@charset "utf-8";


/* ------------------------------------------------------------ common */
section{ position: relative; height: 100vh; min-height: 800px; overflow: hidden; }
section .inner{ z-index: 3; position: relative; height: 100%; }
section .inner.front{ z-index: 20; }
.object{ z-index: -1; position: absolute; display: block; }

/* img */
.sp-bubble{ display: none; }


/* ------------------------------------------------------------ movie */
#movie video{ z-index: 10; top: 50%; left: 50%; translate: -50% -50%; width: 100%; height: 100vh; object-fit: cover; }
#roop{ position: absolute; }
#wave{ position: fixed; z-index: 500; }


/* ------------------------------------------------------------ fv */
#fv{ position: relative; }
#fv .fv_inner{ z-index: 20; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 90%; }

#fv .fv-logo{ display: block; width: 355px; height: auto; padding: 0 40px 0 0; }
#fv .txt{ width: 445px; font-feature-settings: "palt"; }
#fv .txt h2{ padding: 0 0 10px; font-size: 27px; font-family:  "Helvetica Neue" , Helvetica , Arial ; font-weight: 700; line-height: 150%; }
#fv .txt p{ font-size: 12px; line-height: 200%; font-family:  "Helvetica Neue" , Helvetica , Arial ; font-weight: 400;  }

/* img */
#fv .bubble{ width: 40%; height: auto; top: 50%; left: 50%; translate: -50% -50%; }
#fv .wave{ top: 9vh; left: -50%; width: 100vw; }


/* ------------------------------------------------------------ activities */
#activities{ }
#activities .main-ttl .line p{ font-size: 11px; font-family: 'Noto-Sans-JP-Medium'; }

#activities .project,
#activities .pro{ position: absolute; }
#activities .project{ width: 260px; }
#activities .project .line{ padding-left: 11px; border-left: 3px solid #4d4d4d; }
#activities .project .main{ position: relative; width: 390px; }
#activities .project .main h4{ font-size: clamp(22px,1rem,30px); font-family: "Helvetica Neue" , Helvetica , Arial ; font-style: italic; line-height: 120%; font-weight: 700; }
#activities .project .main h4 small{ display: block; padding: 0 0 2px; font-style: normal; font-size: 12px; line-height: 120%; }
#activities .project .main p{ padding: 9px 0 0; line-height: 150%; font-size: 10px; }

#activities .pro a{ width: 260px; display: flex; align-items: flex-start; }
#activities .pro p{ border-right: 2px solid #4d4d4d; width: 75px; text-align: center; font-size: 24px; font-family:  "Helvetica Neue" , Helvetica , Arial ; font-weight: 700; font-style: italic; }
#activities .pro p small{ display: block; padding: 0 0 5px; font-size: 14px; text-align: center; }
#activities .pro h5{ padding-left: 11px; font-size: 15px; font-family:  "Helvetica Neue" , Helvetica , Arial ; font-weight: 700; font-style: italic; }
#activities .pro h5 small{ display: block; padding: 0 0 4px; font-size: 10px; line-height: 130%; font-family: 'Noto-Sans-JP-Bold'; font-weight: normal;}

#activities .project01{ top: 15%; left: 41%; }
#activities .pro01{ bottom: -7%; left: -106%; }
#activities .pro02{ bottom: -95%; left: -69%; }
#activities .pro03{ bottom: -189%; left: -38%; }
#activities .pro04{ bottom: -168%; left: 30%; }
#activities .pro05{ bottom: -81%; left: 90%; }
#activities .pro06{ bottom: -130%; right: -156%; }
#activities .pro07{ bottom: 0; right: -150%; }

#activities .project02{ top: calc(50vh + 190px); left: 22%; }
#activities .project03{ top: calc(50vh + 300px); left: 35%; }
#activities .project04{ top: calc(50vh + 210px); right: 30%; }
#activities .project05{ top: calc(50vh + 70px); right: 5%; }

/* img */
#activities .wave{ width: 100vw; top: -76%; right: -70%; }


/* ------------------------------------------------------------ contact */
.fb_iframe_widget iframe{ max-height: 580px; pointer-events: none; overflow: hidden;  }

.more{ display: none; }
.sec-inner{ position: absolute; top: 50%; left: 25%; translate: 0 -50%; padding-left: 0; width: 60%; }
#fb-root{ width: 500px; }

#contact .main p { font-size: 16px; line-height: 170%; }
#contact .main p a{ padding: 0 10px; border-bottom: 1px solid; }


/* img */
.jsBubble{ transition: all 4s cubic-bezier(0.34, 1.56, 0.64, 1); position: absolute; z-index: 1; opacity: 0; }
#contact .fix{ position: fixed; }

:root{
	--move-slow: 6.5s;
}

#contact .bubble01{ transition: var(--move-slow);width: 550px; top: -17%; left: 19%; }
#contact .bubble02{ width: 150px; top: 4%; right: 36%; }
#contact .bubble03{ width: 150px; top: 21%; left: 20%; rotate: -14deg; }
#contact .bubble04{ transition: var(--move-slow); width: 100px; top: 15%; left: 4%; }
#contact .bubble05{ transition: var(--move-slow); width: 110px; top: 23%; left: 63%; }
#contact .bubble06{ width: 190px; top: 5%; left: 100vw; }
#contact .bubble07{ width: 120px; top: 4%; left: 69%; }
#contact .bubble08{ width: 330px; top: 89vh; left: 21%; }
#contact .bubble09{ width: 140px; top: calc(50vh + 230px); left: 50%; }
#contact .bubble10{ transition: var(--move-slow); width: 450px; top: calc(50vh + 200px); left: 80%; }
#contact .bubble11{ width: 100px; top: 33%; right: 5%; }
#contact .bubble12{ width: 60px; top: 20%; left: 88%; }

/* activities */
#contact .bubble01.moved{ width: 550px; top: 0; left: 34%; }
#contact .bubble02.moved{ width: 120px; top: 23%; left: 28%; }
#contact .bubble03.moved{ width: 150px; top: 34%; left: 31%; }
#contact .bubble04.moved{ width: 300px; top: 48%; left: 31%; }
#contact .bubble05.moved{ width: 110px; top: 44%; left: 50%; }
#contact .bubble06.moved{ width: 110px; top: 32%; left: 56%; }
#contact .bubble07.moved{ width: clamp(190px,14vw,220px); top: 36%; left: 68%; }
#contact .bubble08.moved{ width: 270px; top: calc(50vh + 100px); left: 20%; }
#contact .bubble09.moved{ width: 170px; top: calc(50vh + 240px); left: 35%; }
#contact .bubble10.moved{ width: clamp(230px,23vw,340px); top: calc(50vh + 80px); left: 52%; }
#contact .bubble11.moved{ width: clamp(190px,14vw,220px); top: 49%; right: 9%; }
#contact .bubble12.moved{ width: 120px; top: 19%; left: 66%; }



@media only screen and (max-width: 1500px) {
	#activities .pro01{ left: -115%; }
	#activities .pro02{ left: -70%; }
	#activities .pro04{ left: 39%; }
	#activities .project03{ left: 44%; }
	#activities .project04{ right: 17%; }
	#activities .project05{ top: calc(50vh + 30px); right: 15%; width: 30px; }
	
	#contact .bubble04.moved{ top: 50%; left: 32%; }
	#contact .bubble05.moved{ left: 53%; }
	#contact .bubble06.moved{ left: 63%; }
	#contact .bubble07.moved{ left: 73%; }
	#contact .bubble09.moved{ left: 44%; }
	#contact .bubble10.moved{ left: 66%; }
	#contact .bubble11.moved{ right: 4vw }
	#contact .bubble12.moved{ left: 68%; }
}

@media only screen and (max-width: 1280px) {
	#activities .project01{ left: 44%; }
	#activities .pro04{ left: 35%; }
	#activities .pro05{ left: 55%; }
	#activities .pro06{ right: -132%; }
	#activities .pro07{ right: -114%; }
	#activities .project04{ right: 16%; }
	#activities .project05{ right: 17%; }
	
	#contact .bubble01.moved{ width: 450px; }
	#contact .bubble02.moved{ width: 100px; left: 26%; }
	#contact .bubble03.moved{ width: 130px; }
	#contact .bubble04.moved{ width: 240px; left: 34%; }
	#contact .bubble05.moved{ width: 90px; left: 55%; }
	#contact .bubble06.moved{ left: 61%; }
	#contact .bubble08.moved{ width: 240px; left: 20%; }
	#contact .bubble07.moved{ width: 150px; left: 75%; }
	#contact .bubble09.moved{ width: 140px; left: 49%; }
	#contact .bubble10.moved{ left: 60%; }
	#contact .bubble11.moved{ right: 2%; }
	#contact .bubble12.moved{ width: 79px; left: 75%; }
}

@media only screen and (max-width: 1130px) {
	#contact .bubble06.moved{ left: 74%; }
	#contact .bubble07.moved{ left: 85%; }
	#contact .bubble11.moved{ right: 0%; top: 49%;  width: 150px; }
}

@media only screen and (max-width: 1050px) {
	#contact .bubble01.moved{ left: 42%; }
	#contact .bubble02.moved{ left: 32%; }
	#contact .bubble03.moved{ left: 41%; }
	#contact .bubble04.moved{ left: 39%; }
	#contact .bubble05.moved{ left: 70%; }
	#contact .bubble06.moved{ left: 83%; }
	#contact .bubble07.moved{ left: 110vw; }
	#contact .bubble09.moved{ left: 51%; }
	#contact .bubble10.moved{ top: calc(50vh + 100px); left: 66%; }
	#contact .bubble11.moved{ right: -6%; }
	#contact .bubble12.moved{ left: 88%;  }
}


/* ----------------------------- height ------------------------------- */
@media only screen and (max-height: 1000px) {
	#activities .pro01{ bottom: 18%; }
	#activities .pro02{ bottom: -56%; }
	#activities .pro03{ bottom: -140%; }
	#activities .pro04{ bottom: -127%; }
	#activities .pro05{ bottom: -58%; }
	#activities .pro06{ bottom: -74%; }
	#activities .pro07{ bottom: 24%; }
	
	#contact .bubble03.moved{ top: 31%; }
	#contact .bubble04.moved{ top: 47%; }
	#contact .bubble05.moved{ top: 46%; }
	#contact .bubble06.moved{ top: 31%; }
	#contact .bubble07.moved{ top: 31%; }
	#contact .bubble09.moved{ top: calc(50vh + 260px); }
	#contact .bubble10.moved{ top: calc(50vh + 145px); width: 200px; }
	
}


@media only screen and (max-height: 900px) {
	
	#activities .pro01{ top: 45%; }
	#activities .pro02{ bottom: -86%; }
	#activities .pro03{ bottom: -164%; }
	#activities .pro04{ bottom: -133%; }
	#activities .pro05{ bottom: -63%; }
	#activities .pro06{ bottom: -75%; }
	#activities .pro07{ bottom: 33%; }
	#activities .project02{ top: calc(50vh + 200px); }
	#activities .project03{ top: calc(50vh + 280px); }
	#activities .project04{ top: calc(50vh + 200px); }
	
	#contact .bubble01.moved{ width: 480px; }
	#contact .bubble03.moved{ top: 35%; }
	#contact .bubble04.moved{ width: 250px; top: 53%; }
	#contact .bubble05.moved{ top: 51%; }
	#contact .bubble06.moved{ top: 38%; }
	#contact .bubble08.moved{ width: 230px; top: calc(50vh + 160px); }
	#contact .bubble09.moved{ width: 120px; top: calc(50vh + 250px);  }
	
	
}


/* ------------------------------------------------------------ logostory */
#logostory .logo_img{ width: 100%; max-width: 900px; height: auto; }





/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
	section{ overflow: visible; padding: 100px 0; height: initial; min-height: auto; clear: both; }
	.inner{ width: 80%; margin: 0 auto; }


	/* img */
	.sp-bubble{ opacity: 0; visibility: hidden; transition: 1.2s; translate: 0 200px; position: absolute; display: block; left: 0; width: 100%; height: auto; }
	.sp-bubble.on{ opacity: 1; visibility: visible; translate: 0 0; }
	
	#activities .bg_01{ top: 0; }
	#activities .bg_02{ top: 34%; }
	#activities .bg_03{ top: 45%; }
	#activities .bg_04{ top: 61%; }
	#activities .bg_05{ top: 89%; }
	
	#news .bg_01{ top: 19%; }
	#contact .bg_01{ top: 41%; }
	

/* ------------------------------------------------------------ fvVideo */
	#movie video{ height: 81vh; }
	#wave{ display: none; }


/* ------------------------------------------------------------ fv */
	#fv{ z-index: 400; padding: 100px 0 50px; height: 100vh; }
	#fv .fv_inner{ width: 71%; top: 57%; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
	
	#fv .fv-logo{ width: 95%; position: initial; margin: 0 0 20px; padding: 0; top: 50%; }
	#fv .txt{ width: 100%; }
	#fv .txt h2{ padding: 0 0 10px; font-size: 17px; }
	#fv .txt p{ font-size: 10px; }
	
	/* img */
	#fv .wave{ top: 44vh; left: -90%; width: 144%; max-width: 200%; }
	#fv .bubble{ width: 72%; }


/* ------------------------------------------------------------ activities */
	#activities{ position: relative; }
	
	#activities .project,
	#activities .pro{ position: initial; clear: both; }
	#activities .project{ width: 100%; }
	
	#activities .project .main{ width: 100%; margin: 0 0 35px; }
	#activities .project .main h4{ font-size: 20px; }
	#activities .project .main h4 small{ font-size: 12px; }
	#activities .project .main p{ padding: 5px 0 0; line-height: 170%; font-size: 10px; }
	
	#activities .right{ float: right; }
	#activities .right .main h4{ font-size: 19px; }
	#activities .right .main h4 small{ font-size: 10px; }
	
	#activities .pro{ width: 100%; margin: 0 0 25px; }
	#activities .project .line{ padding-left: 15px; }
	#activities .pro p{ width: 75px; font-size: 23px; border-width: 1px; }
	#activities .pro a{ width: 100%; height: auto; }
	#activities .pro p small{ padding: 0 0 5px; font-size: 13px; }
	#activities .pro h5{ position: relative; padding-right: 10px; width: 100%; font-size: 15px; }
	#activities .sp-arrow{ position: absolute; top: 50%; right: 0; width: 10px; height: 10px; border-top: 1px solid #4d4d4d; border-right: 1px solid #4d4d4d; rotate: 45deg; }
	
	#activities .project01{ margin: 0 0 110px; }
	
	#activities .project02 .main{ margin: 0 0 25px; }
	
	#activities .project03{ margin-left: 20px; float: initial; }
	#activities .project03 .line{ border-width: 1px; }
    #activities .project05{ margin-left: 20px; float: initial; }
	#activities .project05 .line{ border-width: 1px; }


/* ------------------------------------------------------------ contact */
	#contact{ position: relative; padding-bottom: 150px; }
/* 	#contact:before{ position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 80vh; background: url(../images/bg-sp_02.png) center top/cover no-repeat; } */
	
	#contact .js-bubble{ display: none; }
	#contact .main p{ font-size: 13px; }
	#contact .main p a{ padding: 0; }
	
	.more{ display: block; cursor: pointer; float: right; display: inline-block; border-bottom: 1px solid var(--main-color); font-family:  "Helvetica Neue" , Helvetica , Arial ; font-weight: 700; font-style: italic; }
	.txt-hide{ display: none; }
	.sec-inner{ position: initial; flex-wrap: wrap; align-items: flex-start; translate: 0; width: 100%; overflow: hidden; }
	#fb-root{ width: 100%; }


/* ------------------------------------------------------------ logostory */
	#logostory .logo_img{ width: 100%; max-width: 100%; }

	
}