﻿@charset "utf-8";


/* style */
/* -------------------------------------------------------- */
#contents {position:relative; z-index:100;}

.video {width:100%; height:100.0vh; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; top:0; left:0; pointer-events:none;}
.video > video {min-width:100%; min-height:100%; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%);}
.ttl1 {text-align:center;}
.ttl1 .en {font-size:4.0rem; font-family: "Quando", serif; font-style:italic; font-weight:normal; line-height:1; letter-spacing:0.1em; color:#80b54b; display:block;}
.ttl1 .jp {font-size:1.2rem; font-weight:400; line-height:1; letter-spacing:0.1em; color:#fff; margin:1.5em 0 0 0; display:block;}

.top-bg {position:relative; z-index:-1; pointer-events:none;}
.top-bg > div {width:100%; height:100.0vh; background-repeat:no-repeat; background-position:center center; background-size:cover; position:fixed; top:0; left:0; overflow:hidden; opacity:0; pointer-events:none;}
.top-bg video {min-width:100%; min-height:100%; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%);}
.top-bg .video1::before,
.top-bg .video2::before {content:''; width:100%; height:100%; background-color:rgba(166,166,166,1); display:block; position:absolute; top:0; left:0; z-index:10; mix-blend-mode:multiply;}
.top-bg .video1::after {content:''; width:100%; height:100%; background:url(../img/top/bg_04.png) center center no-repeat; background-size:cover; display:block; position:absolute; top:0; left:0; z-index:12;}
.top-bg .bg1::before,
.top-bg .bg2::before,
.top-bg .bg3::before {content:''; width:100%; height:100%; position:absolute; top:0; left:0; mix-blend-mode:multiply;}
.top-bg .bg1::before {background-color:rgba(113,177,163,0.7);}
.top-bg .bg2::before {background-color:rgba(187,210,128,0.7);}
.top-bg .bg3::before {background-color:rgba(163,209,219,0.7);}
#top-sec1-video {transition:opacity 1.0s ease;}
body.load #top-sec1-video {opacity:1;}
#top-sec2-video {transition:opacity 2.0s ease;}
#top-sec2-video.on {opacity:1;}
#top-sec4-bg1.on {opacity:1;}
#top-sec4-bg2 {transition:opacity 1.0s ease;}
#top-sec4-bg2.on {opacity:1;}
#top-sec4-bg3 {transition:opacity 1.0s ease;}
#top-sec4-bg3.on {opacity:1;}

.top-sec1 {position:relative;}
.top-sec1 .sec {min-height:250.0vh; position:relative; z-index:10;}
.top-sec1 .obj {opacity:0; transition:opacity 1.0s ease;}
.top-sec1.on .obj {opacity:1;}
.top-sec1 .scroll {position:fixed; top:calc(100vh - 100px); left:50%; transform:translate3d(-50%,-120%,0); opacity:0; filter:blur(10px); z-index:20; transition:opacity 1.0s ease, filter 1.0s ease;}
.top-sec1.on .scroll {opacity:1; filter:blur(0);}
.top-sec1 .scroll a {font-size:1.2rem; line-height:1; letter-spacing:0.1em; text-align:center; text-decoration:none; color:#fff; padding:65px 0 0 0; display:block; position:relative;}
.top-sec1 .scroll a span {width:1px; height:60px; display:block; position:absolute; top:0; left:50%; overflow:hidden;}
.top-sec1 .scroll a span::before,
.top-sec1 .scroll a span::after {content:''; width:100%; height:100%; background-color:rgba(255,255,255,0.3); display:block; position:absolute; top:0; left:0;}
.top-sec1 .scroll a span::after {height:200%; background-color:rgba(255,255,255,0.7); top:-100%; opacity:0;}
.top-sec1 .scroll a:hover span::after {animation:scroll 3.0s ease-in-out 0.0s infinite normal none;}
.top-sec1 .txt {text-align:left; color:#fff; padding:35.0vh 0 0 0; position:fixed; top:0; will-change:transition;}
.top-sec1 .txt dt {font-size:6.9rem; line-height:1.5; letter-spacing:0.2em; text-shadow:0 0 3px #000, 0 0 3px #000;}
.top-sec1 .txt dt > span {opacity:0; filter:blur(10px);}
.top-sec1 .txt dd {font-size:1.8rem; line-height:1.7; margin:1.0em 0 0 0; letter-spacing:0.2em; text-shadow:0 0 3px #000, 0 0 3px #000; opacity:0; filter:blur(10px);}
body.load .top-sec1 .txt dt > span {opacity:1; filter:blur(0); transition:opacity 1.0s ease, filter 1.0s ease;}
body.load .top-sec1 .txt dt > span:nth-of-type(1) {transition-delay:1.1s;}
body.load .top-sec1 .txt dt > span:nth-of-type(2) {transition-delay:1.2s;}
body.load .top-sec1 .txt dt > span:nth-of-type(3) {transition-delay:1.3s;}
body.load .top-sec1 .txt dt > span:nth-of-type(4) {transition-delay:1.4s;}
body.load .top-sec1 .txt dt > span:nth-of-type(5) {transition-delay:1.5s;}
body.load .top-sec1 .txt dt > span:nth-of-type(6) {transition-delay:1.6s;}
body.load .top-sec1 .txt dt > span:nth-of-type(7) {transition-delay:1.7s;}
body.load .top-sec1 .txt dt > span:nth-of-type(8) {transition-delay:1.8s;}
body.load .top-sec1 .txt dt > span:nth-of-type(9) {transition-delay:1.9s;}
body.load .top-sec1 .txt dt > span:nth-of-type(10) {transition-delay:2.0s;}
body.load .top-sec1 .txt dt > span:nth-of-type(11) {transition-delay:2.1s;}
body.load .top-sec1 .txt dt > span:nth-of-type(12) {transition-delay:2.2s;}
body.load .top-sec1 .txt dt > span:nth-of-type(13) {transition-delay:2.3s;}
body.load .top-sec1 .txt dt > span:nth-of-type(14) {transition-delay:2.4s;}
body.load .top-sec1 .txt dt > span:nth-of-type(15) {transition-delay:2.5s;}
body.load .top-sec1 .txt dd {opacity:1; filter:blur(0); transition:opacity 1.5s ease, filter 1.5s ease;}
body.load .top-sec1 .txt dd {transition-delay:2.8s;}

.top-sec2 {position:relative;}
.top-sec2 .sec {min-height:150.0vh; position:relative; z-index:10;}
.top-sec2 .txt1 {font-size:2.1rem; line-height:2.5; letter-spacing:0.2em; text-align:center; color:#fff; text-shadow:0 0 3px #000, 0 0 3px #000;}
.top-sec2 .txt2 {margin:12.0vh 0 0 0;}
.top-sec2 .txt2 .en {text-shadow:0 0 3px rgba(0,0,0,0.4), 0 0 3px rgba(0,0,0,0.4);}
.top-sec2 .txt2 .jp {text-shadow:0 0 3px #000, 0 0 3px #000;}
.top-sec2 .movie {width:600px; margin:5.6vh auto 0 auto;}
.top-sec2 .movie > div {width:100%; padding:56.66% 0 0 0; border-radius:24px; position:relative; overflow:hidden;}
.top-sec2 .movie > div > div {width:100%; height:100%; position:absolute; top:0; left:0;}
.top-sec2 .movie video {width:100%; height:100%;}

.top-sec3 {position:relative;}
.top-sec3::before {content:''; width:731px; height:557px; background:url(../img/top/bg_01.png) left bottom no-repeat; background-size:100% auto; display:block; position:absolute; bottom:0; left:0; pointer-events:none;}
.top-sec3 .video {width:100%; height:100%; opacity:1; pointer-events:none; z-index:1;}
.top-sec3 .video::before {content:''; width:100%; height:100%; background-color:rgba(166,166,166,1); display:none; position:absolute; top:0; left:0; z-index:10; mix-blend-mode:multiply;}
.top-sec3 .video::after {content:''; width:100%; height:100%; background:-webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 36%, rgba(255,255,255,1) 100%); background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 36%, rgba(255,255,255,1) 100%); display:block; position:absolute; bottom:-2px; left:0; z-index:12;}
.top-sec3 .sec {min-height:100.0vh; padding:80.0vh 0 360px 0; box-sizing:border-box; position:relative; z-index:10;}
.top-sec3 .txt1 {margin:50px 0;}
.top-sec3 .txt2 {padding:5px 0 0 0;}
.top-sec3 .txt2 dl {max-width:700px; text-align:center; margin:25px auto 0 auto; padding:15px 10px; background-color:#fff; box-shadow:0 6px 10px rgba(0,0,0,0.4); border-radius:20px;}
.top-sec3 .txt2 dt {font-size:2.6rem; font-weight:500; line-height:1; letter-spacing:0.2em; color:#80b54b;}
.top-sec3 .txt2 dd {font-size:1.8rem; letter-spacing:0.1em; line-height:1.2; margin:0.5em 0 0 0;}
.top-sec3 .txt3 {margin:80px 0 0 0;}
.top-sec3 .txt3 .en {font-size:2.4rem;}
.top-sec3 .txt4 {margin:60px 0 0 0;}
.top-sec3 .txt4 dt {font-size:2.2rem; letter-spacing:0.1em; line-height:1.3;}
.top-sec3 .txt4 dt span{font-size:5.0rem; letter-spacing:0.1em; line-height:1.4;}
.top-sec3 .txt4 dt P{font-size:1.4rem; letter-spacing:0.1em; line-height:1.8;}
.top-sec3 .txt4 dd {font-size:5.0rem; letter-spacing:0.1em; line-height:1.4;}
.top-sec3 .txt4 dd span {color:#80b54b;}
.top-sec3 .txt5 {max-width:935px; margin:70px auto 0 auto; display:flex; justify-content:space-between; align-items:center;}
.top-sec3 .txt5 > div {width:48.2%; box-sizing:border-box;}
.top-sec3 .txt5 a {width:100%; height:100px; font-size:1.8rem; line-height:1.2; text-align:left; text-decoration:none; color:#262626; padding:0 2.5em; background-color:#abc963; border-radius:20px; box-sizing:border-box; display:flex; align-items:center; position:relative;}
.top-sec3 .txt5 a::before {content:''; width:142px; height:142px; margin:-71px 0 0 0; background:url(../img/top/txt_02.png) center center no-repeat; background-size:cover; display:block; position:absolute; top:50%; transition:transform 0.6s ease;}
.top-sec3 .txt5 a::after {content:''; width:142px; height:142px; margin:-71px 0 0 0; background:url(../img/common/arrow_02.png) center center no-repeat; background-size:22px auto; display:block; position:absolute; top:50%; transform:rotate(90deg);}
.top-sec3 .txt5 a:hover::before {transform:rotate(120deg) scale3d(1.1,1.1,1);;}
.top-sec3 .txt5 > div:nth-of-type(1) a {padding-left:160px; justify-content:flex-end;}
.top-sec3 .txt5 > div:nth-of-type(1) a::before,
.top-sec3 .txt5 > div:nth-of-type(1) a::after {left:15px;}
.top-sec3 .txt5 > div:nth-of-type(2) a {padding-right:160px; justify-content:flex-start;}
.top-sec3 .txt5 > div:nth-of-type(2) a::before,
.top-sec3 .txt5 > div:nth-of-type(2) a::after {right:15px;}

.top-sec3 .txt6 {max-width:935px; margin:30px auto 0 auto; display:flex; justify-content:space-between; align-items:center;}
.top-sec3 .txt6 > div {width:48.2%; box-sizing:border-box;}
.top-sec3 .txt6 > div:nth-of-type(1) a {padding-left:160px; justify-content:flex-end;}
.top-sec3 .txt6 > div:nth-of-type(1) a::before,
.top-sec3 .txt6 > div:nth-of-type(1) a::after {left:15px;}
.top-sec3 .txt6 > div:nth-of-type(2) a {padding-right:160px; justify-content:flex-start;}
.top-sec3 .txt6 > div:nth-of-type(2) a::before,
.top-sec3 .txt6 > div:nth-of-type(2) a::after {right:15px;}

.top-sec4 {position:relative;}
.top-sec4 > div {position:relative;}
.top-sec4 > div:last-of-type .sec {min-height:150.0vh;}
.top-sec4 .sec {min-height:100.0vh; padding-top:46.0vh; position:relative; z-index:10;}
.top-sec4 .txt1 {text-align:left;}
.top-sec4 .txt1 .en {color:#fff;}
.top-sec4 .txt2 {font-size:4.0rem; line-height:1.7; letter-spacing:0.2em; text-align:left; color:#fff; margin:1.0em 0 0 0;}
.top-sec4 .txt3 {text-align:left; margin:90px 0 0 0;}
.top-sec4 .txt3 a {font-size:1.4rem; font-weight:500; letter-spacing:0.1em; text-decoration:none; color:#fff; padding:0 90px 0 0; display:inline-block; position:relative;}
.top-sec4 .txt3 a::before {content:''; width:142px; height:142px; margin:-71px 0 0 0; background:url(../img/top/txt_02_w.png) center center no-repeat; background-size:cover; display:block; position:absolute; top:50%; right:-150px; transition:transform 0.6s ease;}
.top-sec4 .txt3 a::after {content:''; width:142px; height:142px; margin:-71px 0 0 0; background:url(../img/common/arrow_02.png) center center no-repeat; background-size:22px auto; display:block; position:absolute; top:50%; right:-150px; transform:rotate(90deg);}
.top-sec4 .txt3 a:hover::before {transform:rotate(120deg) scale3d(1.1,1.1,1);}
.top-sec4 .txt3 a span {width:82px; height:1px; display:block; position:absolute; top:50%; right:0; overflow:hidden;}
.top-sec4 .txt3 a span::before,
.top-sec4 .txt3 a span::after {content:''; width:100%; height:100%; background-color:rgba(255,255,255,0.3); display:block; position:absolute; top:0; left:0;}
.top-sec4 .txt3 a span::after {width:100%; background-color:rgba(255,255,255,0.7); left:-100%; opacity:0; transition:left 0.6s ease, opacity 0.3s ease;}
.top-sec4 .txt3 a:hover span::after {left:0; opacity:1;}

.top-sec5 {background-color:#fff; position:relative;}
.top-sec5::before {content:''; width:940px; height:540px; background:url(../img/top/bg_02.png) left top no-repeat; background-size:100% auto; display:block; position:absolute; top:0; left:0; pointer-events:none;}
.top-sec5 .sec {max-width:100%; padding:200px 0 0 0; position:relative; z-index:10;}
.top-sec5 .clm {display:flex;}
.top-sec5 .clm > div {flex:1;}
.top-sec5 .clm a {width:100%; height:800px; text-decoration:none; color:#fff; background-repeat:no-repeat; background-position:center center; background-size:cover; display:block; position:relative;}
.top-sec5 .clm a::before {content:''; width:100%; height:100%; background-color:rgba(77,77,77,0.5); display:block; position:absolute; top:0; left:0; mix-blend-mode:multiply;}
.top-sec5 .clm a .bar {width:1px; height:230px; margin:0 auto; display:block; position:relative; z-index:10; overflow:hidden;}
.top-sec5 .clm a .bar::before,
.top-sec5 .clm a .bar::after {content:''; width:100%; height:100%; background-color:rgba(255,255,255,0.3); display:block; position:absolute; top:0; left:0;}
.top-sec5 .clm a .bar::after {height:100%; background-color:rgba(255,255,255,0.7); top:-100%; opacity:0; transition:top 0.6s ease, opacity 0.3s ease;}
.top-sec5 .clm a:hover .bar::after {top:0; opacity:1;}
.top-sec5 .clm a .ttl {margin:35px 0 0 0; position:relative; z-index:10;}
.top-sec5 .clm a .ttl .en {color:#fff;}
.top-sec5 .clm a .arrow {width:142px; height:142px; margin:90px auto 0 auto; position:relative;}
.top-sec5 .clm a .arrow::before {content:''; width:142px; height:142px; background:url(../img/top/txt_02_w.png) center center no-repeat; background-size:cover; display:block; position:absolute; top:0; left:0; transition:transform 0.6s ease;}
.top-sec5 .clm a .arrow::after {content:''; width:142px; height:142px; background:url(../img/common/arrow_02.png) center center no-repeat; background-size:22px auto; display:block; position:absolute; top:0; left:0; transform:rotate(90deg);}
.top-sec5 .clm a:hover .arrow::before {transform:rotate(120deg) scale3d(1.1,1.1,1);}

.top-sec6 {background-color:#fff; position:relative;}
.top-sec6 .sec {padding-top:260px; padding-bottom:260px; position:relative; z-index:10;}
.top-sec6::before {content:''; width:543px; height:659px; background:url(../img/top/bg_03_l.png) left bottom no-repeat; background-size:100% auto; display:block; position:absolute; bottom:0; left:0; pointer-events:none;}
.top-sec6::after {content:''; width:502px; height:714px; background:url(../img/top/bg_03_r.png) right top no-repeat; background-size:100% auto; display:block; position:absolute; top:0; right:0; pointer-events:none;}
.top-sec6 .txt1 {font-size:1.8rem; font-weight:300; line-height:4.1; text-align:center;}

.top-sec7 {background-color:#fff; position:relative;}
.top-sec7 .sec {padding-top:20px; padding-bottom:64.0vw; position:relative; z-index:10;}
.top-sec7 .bg {width:100%; height:100%; background-repeat:no-repeat; background-position:center bottom; background-size:100% auto; position:absolute; top:0; left:0; pointer-events:none;}
.top-sec7 .sec {max-width:980px; position:relative; z-index:10;}
.top-sec7 .note {text-align:left;}
.top-sec7 .note li {font-size:1.0rem; line-height:2.0; letter-spacing:0.1em; padding:0 0 0 1.2em; position:relative;}
.top-sec7 .note li::before {content:'※'; display:block; position:absolute; top:0; left:0;}

.top-sec8 {background-color:#fff; position:relative;}
.top-sec8 .sec {max-width:100%; padding:0; position:relative; z-index:10;}
.top-sec8 .clm {width:6000px; display:flex; position:relative; animation:slide 80.0s linear 0.0s infinite normal none;}
.top-sec8 .clm > div {flex:1;}
@keyframes scroll {
	0% {top:-200%; opacity:0;}
	25% {opacity:1;}
	50% {top:0; opacity:1;}
	100% {top:200%; opacity:0;}
}
@keyframes slide {
	0% {left:0;}
	100% {left:-3000px;}
}
@media screen and (max-width:1200px){
	.top-sec3::before {width:60.9vw;}
	.top-sec5::before {width:78.3vw;}
	.top-sec6::before {width:45.2vw;}
	.top-sec6::after {width:41.8vw;}
	.top-sec5 .clm a .ttl .en {font-size:3.3vw;}
}
@media screen and (max-width:767px){
	.ttl1 .en {font-size:3.0rem;}
	.ttl1 .jp {font-size:1.2rem;}

	.top-sec1 .sec {min-height:200.0vh;}
	.top-sec1 .scroll {display:none;}
	.top-sec1 .txt {text-align:left; color:#fff; padding:45.0vh 0 0 0; position:fixed; top:0; will-change:transition;}
	.top-sec1 .txt dt {font-size:8.5vw;}
	.top-sec1 .txt dd {font-size:3.5vw;}

	.top-sec2 .sec {min-height:120.0vh;}
	.top-sec2 .txt1 {font-size:1.6rem;}
	.top-sec2 .movie {width:100%;}

	.top-sec3::before {width:60.9vw;}
	.top-sec3 .video::after {background:-webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 26%, rgba(255,255,255,1) 100%); background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 26%, rgba(255,255,255,1) 100%);}
	.top-sec3 .video {background-position:center top; background-size:100% auto;}
	.top-sec3 .sec {padding:50.0vw 15px 150px 15px;}
	.top-sec3 .txt1 {}
	.top-sec3 .txt2 {padding:5px 0 0 0;}
	.top-sec3 .txt2 dt {font-size:1.8rem;}
	.top-sec3 .txt2 dd {font-size:1.4rem;}
	.top-sec3 .txt3 {margin:50px 0 0 0;}
	.top-sec3 .txt3 .en {font-size:1.8rem;}
	.top-sec3 .txt4 {margin:20px 0 0 0;}
    .top-sec3 .txt4 dt {font-size:1.6rem;}
    .top-sec3 .txt4 dt span{font-size:2.8rem; letter-spacing:0.1em; line-height:1.2;}
	.top-sec3 .txt4 dd {font-size:2.8rem;}
	.top-sec3 .txt5 {max-width:935px; margin:30px 0 0 0; display:block;}
	.top-sec3 .txt5 > div {width:auto; padding:30px 0 0 0;}
	.top-sec3 .txt5 a {height:70px; font-size:1.6rem; padding:0 1.5em;}
	.top-sec3 .txt5 a::before {width:100px; height:100px; margin:-50px 0 0 0;}
	.top-sec3 .txt5 a::after {width:100px; height:100px; margin:-50px 0 0 0;}
	.top-sec3 .txt5 > div:nth-of-type(1) a {padding-left:120px;}
	.top-sec3 .txt5 > div:nth-of-type(2) a {padding-right:120px;}

    .top-sec3 .txt6 {max-width:935px; margin:0px 0 0 0; display:block;}
    .top-sec3 .txt6 > div {width:100%; padding:30px 0 0 0;}
    .top-sec3 .txt6 > div:nth-of-type(1) a {padding-left:0px; justify-content:flex-end;}
    .top-sec3 .txt6 > div:nth-of-type(1) a::before,
    .top-sec3 .txt6 > div:nth-of-type(1) a::after {left:0px;}
    .top-sec3 .txt6 > div:nth-of-type(2) a {padding-right:00px; justify-content:flex-start;}
    .top-sec3 .txt6 > div:nth-of-type(2) a::before,
    .top-sec3 .txt6 > div:nth-of-type(2) a::after {right:0px;}

	.top-sec4 .sec {padding-top:20.0vh;}
	.top-sec4 > div:last-of-type .sec {min-height:100.0vh;}
	.top-sec4 .txt2 {font-size:2.4rem;}
	.top-sec4 .txt3 {margin:50px 0 0 0;}
	.top-sec4 .txt3 a {font-size:1.4rem; padding:0 50px 0 0;}
	.top-sec4 .txt3 a::before {width:100px; height:100px; margin:-50px 0 0 0; right:-110px;}
	.top-sec4 .txt3 a::after {width:100px; height:100px; margin:-50px 0 0 0; right:-110px;}
	.top-sec4 .txt3 a span {width:40px;}

	.top-sec5::before {width:78.3vw; height:100%;}
	.top-sec5 .sec {padding:100px 0 0 0;}
	.top-sec5 .clm {display:block;}
	.top-sec5 .clm a {height:100vh;}
	.top-sec5 .clm a .bar {height:20vh;}
	.top-sec5 .clm a .ttl {margin:15px 0 0 0;}
	.top-sec5 .clm a .ttl .en {font-size:3.0rem;}
	.top-sec5 .clm a .arrow {width:100px; height:100px; margin:50px auto 0 auto;}
	.top-sec5 .clm a .arrow::before {content:''; width:100px; height:100px;}
	.top-sec5 .clm a .arrow::after {content:''; width:100px; height:100px;}

	.top-sec6 .sec {padding-top:100px; padding-bottom:100px;}
	.top-sec6::before {width:45.2vw; height:100%;}
    .top-sec6::after {width:45.2vw; height:100%;}
    .top-sec6 .txt1 {font-size:1.4rem; line-height:2; text-align:left;}

	.top-sec7 .note li {font-size:1.0rem;}

	.top-sec8 .clm {width:3000px; animation:slide 80.0s linear 0.0s infinite normal none;}
}
