@charset "UTF-8";
/* CSS Document */

body, html {width: 100%; height: 100%; margin: 0; font-size: 62.5%; scroll-behavior: smooth;}
body {font-size: 62.5%; color: #fff; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; background-color: #000; }

p {font-size: 1.6rem; line-height: 2; margin-bottom: 2rem}

a{transition: 0.5s; text-decoration: none;}
a:hover{opacity: 0.5;}

br.pc-show{}
br.sp-show{display: none}
@media screen and (max-width: 769px) {
	p {font-size: 1.4rem;}
	br.pc-show{display: none;}
	br.sp-show{display: inline;}
}

/* TOP background */
#bg{ position: fixed; width: 100%; height: 90vh; display: flex; align-items: center; justify-content: center;flex-direction: column; background: url("../img/video-bg-min.png"); background-size: cover; overflow: hidden; z-index: -1}
#bg::before{ content: 'scroll'; display: block; position: absolute; bottom: 25vh; left: 3vw; color: #fff; font-size: 1.0rem; letter-spacing: 5px; transform: rotate(90deg); transform-origin: bottom left; opacity: 0; z-index: 2; animation: scroll_a 0.5s linear 2.5s both;}
#bg::after{ content: ''; display: block; position: absolute; bottom: 25vh; left: 2.5vw; height: 0px; width: 1px; background-color: #fff; opacity: 0.75; z-index: 2; animation: scroll_b 2s linear 3s infinite;}
@keyframes scroll_a {
  0% {opacity: 0}
  100% {opacity: 0.75}
}
@keyframes scroll_b {
  0% {height: 0; bottom: 25vh}
  50% {height: 80px; bottom: calc(25vh - 80px);}
  100% {height: 0; bottom: calc(25vh - 80px);}
}
.top-video{ position: absolute; display: block; height: auto; min-height: 100vh; width: auto; min-width: 100vw; }

@media screen and (max-width: 769px) {
}

#wrap-top{position: relative; z-index: 999}

/* HEADER */
#head{position: fixed; width: 100%; z-index: 999999 }
.head-box{width: 96%; height: 5vw; max-height: 60px; margin: 1vw auto 0 auto; display: flex;}
a.head-logo {height: 100%; width: 30%; min-width: 400px; margin-right:auto;}
a.head-logo img{display: inline-block; width: auto; }
a.head-logo img{height: 36%; margin: 3% 0 3% 0;}

a.head-nav{position: relative; display: block; height: 100%; width: 60px; background-color: rgba(0,0,0,0.8); border: 1px solid #999; box-sizing: border-box; }
a.head-nav::before{ content: ''; position: absolute; top: 25%; right: 20%; display: block; width: 60%; height: 2px; background-color: #ccc; transition: 0.5s;}
a.head-nav::after{ content: ''; position: absolute; top: 42%; right: 20%; display: block; width: 30%; height: 2px; background-color: #ccc;  transition: 0.5s;}
a.head-nav strong{ position: absolute; bottom: 15%; display: block; width: 100%; text-align: center; color: #ccc; font-size:1.2rem; font-family: 'Montserrat', sans-serif;  transition: 0.5s;}
a.head-nav:hover{background-color: #005BA9; opacity: 1; }
a.head-nav:hover::after{width: 60%;}

@media screen and (max-width: 769px) {
	.head-box{height: 6vh; }
	a.head-logo {width: 75%; min-width: 0; }
	a.head-logo img:nth-child(1){margin: 5% 0 5% 0;}
	a.head-logo img:nth-child(2){margin: 5.5% 0 5% 5%;}
	a.head-nav{width: 40px}
	a.head-nav strong {font-size: 0.8rem}
}

/* NAVI */
a.menu_on{z-index: 999; background-color: rgba(0,0,0,0.5);;}
a.menu_on::before{ top: 45%; right: 20%;  width: 60%; transform: rotate(45deg); }
a.menu_on::after{ top: 45%; right: 20%; width: 60%; transform: rotate(-45deg); }
a.menu_on strong{ opacity: 0}

#navi {position: fixed; top: 0; right: 0; z-index: 888; height: 100vh; width: 0%; background-color: rgba(0,44,81,0.9); opacity: 0; transition: 0.5s;}
#navi.navi_on {opacity: 1; width: 50%;}
#navi ul { position: absolute; left:5%; top: 12vh; display: block; width: 80%; font-size: 1.6rem; white-space: nowrap}
#navi ul li { margin: 0 ; }
#navi ul li a { display: block; color: #fff; padding: 2vh; box-sizing: border-box; }
#navi ul li a:hover { background-color: rgba(255,255,255,0.5); padding: 2vh 1vh 2vh 3vh;}

#navi ul li.navi-lang {margin-bottom: 20px}
#navi ul li.navi-lang a {border-bottom: 1px solid #ccc; }
#navi ul li.navi-lang a::before {content: ''; display: inline-block; width: 16px; height: 16px; background: url("../img/lang.svg"); background-size: cover; margin-right: 10px; vertical-align: middle;}

@media screen and (max-width: 769px) {
	#navi.navi_on{width: 100%}
	#navi ul {width: 90%; font-size: 1.4rem}
}

/* TOP main */
#main{ position: fixed; bottom: 0; width: 100%; height: 30vh; background: linear-gradient(0deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 75%); z-index: 999999 }
.main-image { position: absolute; bottom: 0; width: 100%; padding-bottom: 2.5vh; overflow: hidden;}
.main-bg { position: relative; display: block; width: 100%; max-width: 1260px; margin: 0 auto;}
.main-bg img { }
/* animation */
.main-bg img:nth-child(1) {width: 100%; animation: mainAnime1 2s ease 1s both;}
@keyframes mainAnime1 {
  0% {transform: scale(2); transform-origin: 50% 0%; filter: blur(4px); opacity: 0;}
  50% {transform: scale(1); transform-origin: 50% 0%; filter: blur(0px); opacity: 1;}
  100% {opacity: 0;}
}
.main-bg img:nth-child(2) {position: absolute; width: 100%; top:0; left: 0; animation: mainAnime2 1s ease 2s both;}
@keyframes mainAnime2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.main-link { position: absolute; top: 0; display: flex; justify-content: left; align-items: baseline; width: 100%; height: 95%; max-width: 1260px;}
@media screen and (min-width: 1260px) { .main-link { left: calc(50% - 630px)}}/* ウインドウ広い場合の幅調整 */
.main-link a {display: flex; justify-content: center; align-items: center; position: relative; text-align: center; z-index: 999; transition: 0.5s; height: 15vw; box-sizing: border-box;}
.main-link a:nth-child(1) {width: 22%; animation: mainAnime3 1s ease 3s both;}
.main-link a:nth-child(2) {width: 23%; animation: mainAnime3 1s ease 3.1s both;}
.main-link a:nth-child(3) {width: 10%; animation: mainAnime3 1s ease 3.2s both;}
.main-link a:nth-child(4) {width: 16%; animation: mainAnime3 1s ease 3.3s both;}
.main-link a:nth-child(5) {width: 11%; animation: mainAnime3 1s ease 3.4s both;}
.main-link a:nth-child(6) {width: 17%; animation: mainAnime3 1s ease 3.5s both;}
@keyframes mainAnime3 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.main-link a img {position: absolute; display: block; width: auto; height: 25%; max-height: 48px; transition: 0.3s; }
.main-link a:hover img {transform: scale(1.1);}
.main-link:has(a:hover) a:not(:hover)::after, .main-link:has(a:hover) a:not(:hover) img {filter: blur(2px); opacity: 0.3;}
.main-link a:nth-child(1) img {top: 10%; left: 70%;}
.main-link a:nth-child(2) img {top: 40%; left: 30%;}
.main-link a:nth-child(3) img {top: 10%; left: 35%;}
.main-link a:nth-child(4) img {top: 40%; left: 30%;}
.main-link a:nth-child(5) img {top: 40%; left: 20%;}
.main-link a:nth-child(6) img {top: 40%; left: 30%;}

/* hover */
.main-link span {display: block; width: 100%; height: 100%; max-width: 1260px; margin: 0 auto; position: absolute; top:0; left: 0; z-index: 1; background-size: contain; background-position: top center; background-repeat: no-repeat;}
@media screen and (min-width: 1260px) {
	.main-link span {left: calc(50% - 630px);}
}

.main-link a:nth-child(1) ~ span {background-image: url("../img/hdx_01-06.png"); opacity: 0; transition: 0.5s;}
.main-link a:nth-child(1):hover ~ span {background-image: url("../img/hdx_01-06.png"); opacity: 1;}
.main-link a:nth-child(2) ~ span {background-image: url("../img/hdx_01-05.png"); opacity: 0; transition: 0.5s;}
.main-link a:nth-child(2):hover ~ span {background-image: url("../img/hdx_01-05.png"); opacity: 1;}
.main-link a:nth-child(3) ~ span {background-image: url("../img/hdx_01-1.png"); opacity: 0; transition: 0.5s;}
.main-link a:nth-child(3):hover ~ span {background-image: url("../img/hdx_01-1.png"); opacity: 1;}
.main-link a:nth-child(4) ~ span {background-image: url("../img/hdx_01-03.png"); opacity: 0; transition: 0.5s;}
.main-link a:nth-child(4):hover ~ span {background-image: url("../img/hdx_01-03.png"); opacity: 1;}
.main-link a:nth-child(5) ~ span {background-image: url("../img/hdx_01-02.png"); opacity: 0; transition: 0.5s;}
.main-link a:nth-child(5):hover ~ span {background-image: url("../img/hdx_01-02.png"); opacity: 1;}
.main-link a:nth-child(6) ~ span {background-image: url("../img/hdx_01-01.png"); opacity: 0; transition: 0.5s;}
.main-link a:nth-child(6):hover ~ span {background-image: url("../img/hdx_01-01.png"); opacity: 1;}


@media screen and (max-width: 769px) {
	.main-image img { width: 100%; margin: 0 auto;}
}

/* space */
#space{ height: 90vh; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 20%);}

@media screen and (max-width: 769px) {
}

/* detail */
#detail{ background: url("../img/hdx_02.png") no-repeat #000 bottom 0 right -5vw; background-size: 100% auto; padding: 20vh 0 40vh 0; min-height: 60vh}
#detail01{ background: url("../img/bg-hana.png") no-repeat #000 top right -5vw / auto 50%; padding: 15vh 0 20vh 0; position: relative; box-sizing: border-box; min-height: 60vh}
#detail02{ background: url("../img/bg-yaku.png") no-repeat #000 top left 30vw / auto 50%; padding: 15vh 0 30vh 0; position: relative; box-sizing: border-box; min-height: 60vh}
#detail03{ background: url("../img/bg-hana.png") no-repeat #000 top right -5vw / auto 50%; padding: 15vh 0 30vh 0; position: relative; box-sizing: border-box; min-height: 60vh}
#detail04{ background: url("../img/bg-jin.png") no-repeat #000 top left 30vw / auto 50%; padding: 15vh 0 30vh 0; position: relative; box-sizing: border-box; min-height: 90vh}
#detail05{ background: url("../img/bg-jin.png") no-repeat #000 top right -5vw / auto 50%; padding: 15vh 0 30vh 0; position: relative; box-sizing: border-box; min-height: 60vh}
#detail06{ background: url("../img/bg-jin.png") no-repeat #000 top left 30vw / auto 50%; padding: 15vh 0 30vh 0; position: relative; box-sizing: border-box; min-height: 80vh}
#detail07{ background: #000; padding: 15vh 0 30vh 0; position: relative; box-sizing: border-box; min-height: 90vh}
.detail-box{ width: 80%; max-width: 1260px; margin: 0 auto; position: relative;}
.detail-box h4{ width: 50%; margin: 20px 0; font-size: 4.5rem; line-height: 1.4; font-family: Hiragino Mincho, serif;}
.detail-box p{ width: 50%; }

.detail-box-right{ width: 80%; max-width: 1260px; margin: 0 auto; position: relative;}
.detail-box-right h4{ width: 50%; margin: 20px 0 20px 50%; font-size: 4.5rem; line-height: 1.4; font-family: Hiragino Mincho, serif;}
.detail-box-right p{ width: 50%; margin-left: 50%; }

.detail-box p strong, .detail-box-right p strong{ display: inline-block; margin-bottom: 20px; font-size: 1.9rem}


@media screen and (max-width: 769px) {
	#detail {background: #000 url("../img/hdx_02.png") no-repeat bottom 0 left -8vw; background-size: 110% auto; padding: 10vh 0 20vh 0;}
	.detail-box{ width: 86%;}
	.detail-box h4{ width: 100%; margin: 20px 0; font-size: 2.8rem; }
	.detail-box p{ width: 100%; }
	
	.detail-box-right{ width: 86%;}
	.detail-box-right h4{ width: 100%; margin: 20px 0; font-size: 2.8rem; }
	.detail-box-right p{ width: 100%; margin-left: 0; }
	
	.detail-box p strong, .detail-box-right p strong{ font-size: 1.4rem}
}

/* detail animation image */
.detail-anime {position: absolute; width: 45%; height: 75vh; display: flex; align-items: center;}
.detail-anime-inner {position: relative; width: 100%; height: 90%;}
.detail-anime-inner::after {content: ''; position: absolute; display: block; top: 0; left: 0; width: 0%; height: 27.5vw; background-color: #333;}
.fadein_on .detail-anime-inner::after {animation: detail-anime-inner-fade 0.8s linear 0.5s both;}
.detail-anime-inner img {position: absolute; display: block; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: 0s opacity 0.9s;}
.fadein_on .detail-anime-inner img {opacity: 1;}
@keyframes detail-anime-inner-fade {
  0% {width: 0%;}
  30% {width: 100%;}
  70% {width: 100%;}
  100% {width: 0%; left: auto; right: 0;}
}
/*
.fadein img:nth-child(1) {position: relative;}
.fadein img:nth-child(2) {opacity: 0; animation: detailAnime 5s linear 2s infinite;}
.fadein img:nth-child(3) {opacity: 0; animation: detailAnime 5s linear 3s infinite;}
.fadein img:nth-child(4) {opacity: 0; animation: detailAnime 5s linear 4s infinite;}
.fadein img:nth-child(5) {opacity: 0; animation: detailAnime 5s linear 5s infinite;}

@keyframes detailAnime {
  0% {opacity: 0;}
  20% {opacity: 1;}
  40% {opacity: 1;}
  60% {opacity: 0;}
  80% {opacity: 0;}
  100% {opacity: 0;}
}
*/
#detail01 .detail-anime{ left: 0; }
#detail02 .detail-anime{ right: 0; }
#detail03 .detail-anime{ left: 0; }
#detail04 .detail-anime{ right: 0; }
#detail05 .detail-anime{ left: 0; }
#detail06 .detail-anime{ right: 0; }
#detail07 .detail-anime{ left: 0; }

@media screen and (max-width: 769px) {
	#detail01, #detail02, #detail03, #detail04, #detail05, #detail06 { background-position: top 45vh right -10vw; background-size: 50% auto; padding: 10vh 0 10vh 0;}
	.detail-anime {position: static; width: 100%; height: auto; display: block; }
	.detail-anime-inner {height: auto;}
	.detail-anime-inner::after {height: 100%;}
	.detail-anime-inner img {position: static; margin-bottom: 10vh}
}

/* SUB movie */
a.sub-open{ color: #fff; font-size: 1.4rem; display:inline-block; position: relative; border: 1px solid #666; padding: 5px 40px 5px 30px; border-radius: 25px; box-shadow: 0 0 25px rgb(136 254 255);}
a.sub-open:hover{ background-color: rgba(255,255,255,0.3)}
a.sub-open::before{ display: inline-block; content: ''; width: 10px; height: 12px; clip-path: polygon(0 0, 100% 50%, 0 100%); background-color: #ccc; margin-right: 10px; transition: 0.5s;}
a.sub-open:hover::before{ clip-path: polygon(0 0, 100% 0, 50% 100%); }

.sub-movie{ background: #000; overflow:hidden; height:0; box-sizing: border-box; transition: 0.5s;}
.sub-movie ul { display: flex; justify-content: space-between; width: 80%; max-width: 1260px; margin: 10vh auto 5vh auto; }
.sub-movie ul li{ display: block; width: 60%; margin: 0 auto 20px auto; list-style: none; font-size: 1.4rem; font-weight: bold; text-align: center;}
.sub-movie  ul li iframe{ display: block; width: 100%; height: 25vw; margin-bottom: 10px; }

.sub-active{ min-height:90vh; }

@media screen and (max-width: 769px) {
	.sub-movie ul { display: block; margin: 15vh auto 15vh auto; }
	.sub-movie ul li{ width: 100%; margin: 0 auto 40px auto;}
	.sub-movie ul li iframe{ width: 100%; height: 50vw; }
	.sub-active{ min-height:75vh; }
}

/* movie */
#movie{ background: rgba(0,0,0,0.75); padding: 20vh 0}
#movie h3{ width: 100%; margin: 0 auto 40px auto; font-size: 4.0rem; font-weight: normal; text-align: center; }
#movie h4{ position: relative; width: 100%; margin: 0 auto 20px auto; font-size: 2.0rem; font-weight: bold; text-align: center; }
#movie h4::before, #movie h4::after{ content: ''; display: inline-block; width: 30px; height: 1px; margin: 0 10px 0.5rem 10px; background-color: #fff;}
#movie ul { display: flex; justify-content: space-between; width: 80%; max-width: 1260px; margin: 0 auto 20px auto; }
#movie ul li{ display: block; width: 45%; margin: 0 auto 20px auto; list-style: none; font-size: 1.4rem; font-weight: bold; text-align: center;}
#movie ul li iframe{ display: block; width: 100%; height: 20vw; margin-bottom: 10px; }
/* animation */
#movie h3.fadein_on{ animation: tracking-in-expand 0.7s cubic-bezier(0.215,0.610,0.355, 1.000) both;}
@-webkit-keyframes tracking-in-expand {
  0% {letter-spacing: -0.5em;opacity: 0;}
  40% {opacity: 0.6;}
  100% {opacity: 1;}
}
@keyframes tracking-in-expand {
  0% {letter-spacing: -0.5em;opacity: 0;}
  40% {opacity: 0.6;}
  100% {opacity: 1;}
}

@media screen and (max-width: 769px) {
	#movie h3{ font-size: 2.2rem; }
	#movie h4{ font-size: 1.4rem; }
	#movie ul { display: block; }
	#movie ul li{ width: 100%; margin: 0 auto 40px auto;}
	#movie ul li iframe{ width: 100%; height: 50vw; }
}

/* comingsoon */
#content1{ background: rgba(0,0,0,0.75); padding: 0 0 20vh 0}
#content1 h3{ width: 90%; margin: 0 auto 40px auto; font-size: 3.0rem; font-weight: normal; text-align: center; font-family: Hiragino Mincho, serif;}
#content1 h3::before{content: ''; width: 1px; height: 100px; display: block; margin: 0 auto 20px auto; background: linear-gradient(0deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);}

@media screen and (max-width: 769px) {
	#content1 h3{ font-size: 2.0rem;}
}

/* invitation */
#invitation{ background: url("../img/invi-bg-drupa.png") no-repeat #fff center center / cover; padding: 20vh 0; color: #333;}
.logo-drupa {width: 20%; max-width: 300px; margin: 0 auto 20px auto}
.logo-drupa img {display: block; width: 100%; height: auto;}
/* animation */
.logo-drupa.fadein_on img {
	-webkit-animation: flip-in-ver-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: flip-in-ver-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes flip-in-ver-right {
  0% {
    -webkit-transform: rotateY(-80deg);-webkit-filter: blur(10px);
            transform: rotateY(-80deg);filter: blur(10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);-webkit-filter: blur(0px);
            transform: rotateY(0);filter: blur(0px);
    opacity: 1;
  }
}
@keyframes flip-in-ver-right {
  0% {
    -webkit-transform: rotateY(-80deg);-webkit-filter: blur(10px);
            transform: rotateY(-80deg);filter: blur(10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);-webkit-filter: blur(0px);
            transform: rotateY(0);filter: blur(0px);
    opacity: 1;
  }
}

#invitation h5{ width: 100%; margin: 0 auto 20px auto; font-size: 2.0rem; font-weight: bold; text-align: center; color: #004987; text-shadow: 0 0 3px #fff; }
#invitation h5 strong{ display: block; width: 100%; margin: 0 auto 10px auto; font-size: 4.0rem; font-weight: normal; }
#invitation p{ text-align: center; }
#invitation p a{ display: block; width: 80%; max-width: 300px; color: #fff; text-align: center; letter-spacing: 3px; background-color: rgb(0 50 110 / 85%); box-shadow: 0 10px 20px rgba(0,0,0,0.5); font-size: 1.6rem; padding: 15px; box-sizing: border-box; margin: 20px auto; border-radius: 50px; border: 1px solid #93cdff;}
#invitation p a:hover{ box-shadow: 0 0 20px rgba(255,255,255,1);}

@media screen and (max-width: 769px) {
	.logo-drupa {width: 40%; }
	#invitation h5{font-size: 1.8rem;}
	#invitation h5 strong{ font-size: 2.8rem; }
	#invitation p{ text-align: left; width: 80%; margin: 0 auto }
}


/* footer */
#foot { background-color: #000; padding-bottom: 30vh}
.footer-title{ width: 96%; max-width: 1260px; margin: 0 auto; padding: 80px 0 20px 0;}
.footer-title h3 { display:block; font-size: 1.2rem;}
.footer-title h3 img { display: block; width: 200px; height: auto; margin: 0 auto}
.foot-link {display: block; width: 90%; max-width: 1260px; margin: 0 auto; padding-bottom: 40px; font-size: 1.1rem; text-align: center;}
.foot-link a {color: #fff; text-decoration: none;}
.copyright {display: block; width: 90%; max-width: 1260px; margin: 0 auto; padding-bottom: 40px; color: #fff; font-size: 1.1rem; text-align: center;}

/* フェードインanimation */
.fadein{ opacity: 0; transition: opacity 0.5s; }
.fadein_on{ opacity: 1; }