@charset 'utf-8';

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

/* reset
------------------------------------------------ */
body,div,pre,p,a,img,form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object,
figure,figcaption {
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6 { font-family: inherit; font-size: inherit; }
html { height: 100%; font-size: 62.5%; }
body {
	width: 100%;
	height: 100%;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #4C4948;
}

ul,ol { list-style: none; }
img { width: auto; height: auto; max-width: 100%; border: none; vertical-align: top; }
a { transition: all 0.3s ease; }
a:link { text-decoration: none; color: #4C4948; }
a:visited { text-decoration: none; color: #4C4948; }
a:hover { text-decoration: none; }

/* clearfix
------------------------------------------------ */
.clearfix {
	clear: both;
	*zoom: 1;
}
.clearfix:before,.clearfix:after {
	content: ' ';
	display: table;
}
.clearfix:after { clear: both; }

/* hide show pc and sp */
.pc { display: block !important; }
.sp { display: none !important; }

	@media only screen and (max-width: 768px) {
	    .pc { display: none !important; }
	    .sp { display: block !important; }
	}

.brandon { font-family: brandon-grotesque, sans-serif; }

/* container
------------------------------------------------ */
#container {
	font-size: 10px;
	position: relative;
	display: block;
	overflow: hidden;
}

	.wrap { position: relative; display: block; max-width: 132em; margin: 0 auto; padding: 0 3em; z-index: 1; }
	.wrap-initial { position: initial; }


		@media only screen and (min-width: 768px) and (max-width: 1380px) {
			#container { font-size: .7246vw; }
		}

		@media only screen and (max-width: 376px) {
			#container { font-size: 2.65vw; }
		}

	/* section style */
	.section:nth-child(n) { --index: calc(var(--order, 0) + n); }
	.section { position: relative; display: block; padding-top: 18em; z-index: calc(100 - var(--index)); }
	.section--title { display: block; position: relative; margin-bottom: 5em; }
	.section--title .t-small { font-size: 1.6em; font-weight: bold; line-height: 2.125; display: inline-block; background: #40A598; color: #FFFF57; padding: 0 1.25em; margin-bottom: .75em; border-radius: 10em; }
	.section--title .t-big { font-size: 3.8em; font-weight: bold; line-height: 1.3; }
	.section--block { display: block; position: relative; }
	.section--desc { font-size: 1.6em; line-height: 1.7; position: relative; }
	.section--title ~ .section--desc { margin-top: -1.4375em; }

	.section-cloud:before,
	.section-cloud:after { content: ''; display: block; position: absolute; width: 192em; left: 50%; bottom: 0; transform: translateX(-50%); background-repeat: no-repeat; background-size: 100% 100%; }

		@media only screen and (min-width: 1920px) {
			.section-cloud:before,
			.section-cloud:after { width: 100vw; }
		}

		@media only screen and (max-width: 768px) {
			.section { padding-top: 10em; }
			.section--title { text-align: center; margin-bottom: 2.6em; }
			.section--title .t-small { font-size: 1.3em; line-height: 2; padding: 0 1.6em; margin-bottom: .5em; }
			.section--title .t-big { font-size: 2.2em; line-height: 1.3; }
			.section--title ~ .section--desc { margin-top: -.25em; }

			.section-cloud:before,
			.section-cloud:after { width: 100vw; }
		}

	/* image in frame */
	.fit-img { display: block; overflow: hidden; position: relative; }
	.fit-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-transition: linear .3s; transition: linear .3s; }

	/* i-icon image */
	.i-icon { display: block; position: relative; transition: all .3s ease; }
	.i-icon:before,
	.i-icon:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-repeat: no-repeat; background-size: 100% 100%; transition: all .3s ease; }
	.i-links:before { background-image: url(../img/share/icon-link-w.svg); }
	.i-insta:before { background-image: url(../img/share/icon-insta-w.svg); }
	.i-arrow:before { background-image: url(../img/share/arrow-box-w.svg); }
	.i-arrowp:before { background-image: url(../img/share/arrow-box-p.svg); }
	.i-arrowb:before { background-image: url(../img/share/arrow-box-b.svg); }
	.i-arrowy:before { background-image: url(../img/share/arrow-box-y.svg); }
	.i-box { border-radius: 50%; }
	.i-box:before { width: 36%; height: 32%; left: 55%; top: 50%; transform: translate(-50%, -50%); }
	.i-plus:after,
	.i-plus:before { left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; }
	.i-plus:after { height: 1px; }
	.i-plus:before { width: 1px; }

	/*	hover line */
	.h-line span { position: relative; display: inline-block; }
	.h-line span:before { content: ""; position: absolute; right: 0; width: 0; bottom: 0; background: #4C4948; height: 1px; transition-property: width; transition-duration: 0.3s; transition-timing-function: ease-out; }

	
	    @media only screen and (min-width: 768px) {
	    	.h-wave:hover span { -webkit-animation-name: wave; animation-name: wave; -webkit-animation-duration: .2s; animation-duration: .2s; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; display: inline-block; }
	        .h-line:hover span:before { left: 0; right: auto; width: 100%; }

	        @-webkit-keyframes wave { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -.5em, 0); } }
        	@keyframes wave { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -.5em, 0); } }
	    }

	/* button style */   
	.btn-more { display: block; max-width: 26em; width: 100%; margin-top: 7em; }
	.btn-more a { font-size: 1.6em; font-weight: bold; box-sizing: border-box; padding: .7em 2.875em .7em 1.875em; color: #fff; border: 1px solid #EB6D8E; background: #EB6D8E; display: block; position: relative; border-radius: 10em; }
	.btn-more .i-plus { width: 1em; height: 1em; position: absolute; right: 1.875em; top: 50%; transform: translateY(-50%); }

		@media only screen and (min-width: 768px) {
			.btn-more a:hover { background: none; border-color: #EB6D8E; color: #EB6D8E; }
			.btn-more a:hover .i-plus:after,
			.btn-more a:hover .i-plus:before { background: #EB6D8E; }
		}

		@media only screen and (min-width: 768px) {
			.btn-more { margin-top: 5em; }
		}


	/* shake icon */
	@keyframes ringTheBell1 {
	    0% { transform: translateY(0) rotate(0); }
	    10% { transform: translateY(-20px) rotate(0); }
	    20% { transform: translateY(-20px) rotate(15deg); }
	    30% { transform: translateY(-10px) rotate(-15deg); }
	    50% { transform: translateY(0) rotate(0); }
	    70% { transform: translateY(0) rotate(0); }
	    100% { transform: translateY(0) rotate(0); }
	}

	/*@keyframes ringTheBell3 {
		0% { transform: translateY(0) rotate(0); }
		10% { transform: translateY(-20px) rotate(15deg); }
		20% { transform: translateY(-20px) rotate(0deg); }
		25% { transform: translateY(-10px) rotate(0)}
		30% { transform: translateY(0) rotate(0); }
		70% { transform: translateY(0) rotate(0); }
		100% { transform: translateY(0) rotate(0); }
	}*/
	@keyframes ringTheBell3 {
		0% {transform: translateY(0) rotate(0deg);}
		20%{transform: translateY(-5em) rotate(10deg);}
		30% {transform: translateY(.5em) rotate(-10deg);}
		70% {transform: translateY(0px) rotate(0deg);}
		 00% { transform: translateY(0) rotate(0); }
  	}

/* header
------------------------------------------------ */
#header { 
	font-size: inherit; 
	position: absolute; 
	top: 0; 
	left: 0; 
	display: block; 
	width: 100%; 
	height: 10.6em; 
	z-index: 99; 
	transform: translateY(0); 
	transition: transform 0.3s ease-in-out; 
}
	@media only screen and (min-width: 768px) {
		#header:before { content: ''; display: block; width: 100vw; height: 100%; position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: #fff; z-index: 0; opacity: 0; box-shadow: 0 .2em .26em rgba(93, 38, 38, .16); }
	}
	@media only screen and (max-width: 768px) {
		#header { height: 8.4em; }
	}

	#header .wrap { max-width: 182em; }
	#head-logo { float: left; max-width: 12em; display: block; position: relative; margin-top: 1em; }
	#head-logo a { display: block; }
	#head-logo a img { width: 100%; height: auto; position: relative; }

	@media only screen and (max-width: 768px) {
		#header .wrap { padding: 0 1.5em; }
		#head-logo { max-width: 9.2em; margin-top: 1.5em; z-index: 10; }
	}

	#head-menu { float: right; display: block; position: relative; }
	.head-menu--frame { position: relative; display: flex; flex-direction: column-reverse; height: 10.6em; justify-content: center; }
	.head-menu--links { display: flex; flex-wrap: wrap; align-items: center; margin-right: 8em; }
	.head-menu--links li { font-size: 1.6em; font-weight: bold; display: inline-block; margin-left: 2.5em; }
	.head-menu--links li a { display: block; }


	@media only screen and (max-width: 1366px) {
		.head-menu--links li { margin-left: 2em; }
	}

	@media only screen and (max-width: 768px) {
		#head-menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; margin: 0; background: none; transition: all .3s ease; z-index: 0; opacity: 0; visibility: hidden; box-sizing: border-box; background: #fff url(../img/share/bg-menu.png) repeat top center; background-size: cover; }
	    .head-menu--frame { width: 100%; height: 100%; display: block; padding: 13.6em 3em 10em; overflow: scroll; overflow-y: scroll; transition: transform 0.3s 0.15s ease-out; -ms-overflow-style: none; scrollbar-width: none; box-sizing: border-box; }
	    .head-menu--frame::-webkit-scrollbar { display: none; }
	    .head-menu--links { display: block; text-align: center; margin: 0; }
		.head-menu--links li { display: block; margin: 0; }
		.head-menu--links li:not(:last-child) { margin-bottom: 2.3125em; }
		.head-menu--links li a { display: block; }

		.head-menu--company { position: fixed; left: 0; top: calc( 100svh - 6.6em ); display: flex !important; justify-content: center; align-items: center; width: 100%; height: 6.6em; background: url(../img/share/bg-ft-bow_sp.png) repeat-x top center; background-size: 2.76em 100%; }
		.head-menu--company a { font-size: 1.6em; font-weight: bold; color: #fff; padding: .35em 0 0em; }
		.head-menu--company a .i-links { display: inline-block; width: 1em; height: 1em; margin-left: .3em; vertical-align: -.1em; }
		.head-menu--company a .i-links:before { background-image: url(../img/share/icon-links-w.svg); }

	    /* header action hamburger */
	    #header.h-show #head-menu { opacity: 1; visibility: initial; }
	}

	.head-insta { position: absolute; right: 3em; top: 50%; transform: translateY(-50%); z-index: 2; }
	.head-insta a { display: block; }
	.head-insta a i { display: block; overflow: hidden; width: 5em; height: 5em; box-sizing: border-box; border-radius: 50%; border: .2em solid #EB6D8E; }
	.head-insta a i:before { left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50%; height: 50%; background-image: url(../img/share/icon-insta-p.svg); }	

	@media only screen and (min-width: 768px) {
		.head-insta a:hover i { background: #EB6D8E; }
		.head-insta a:hover i:before { background-image: url(../img/share/icon-insta-w.svg); }	
	}

	@media only screen and (max-width: 768px) {
		.head-insta { right: 8.4em; top: 2em; transform: none; }
		.head-insta a i { width: 3.4em; height: 3.4em; background: #4C4948; border: none; }
		.head-insta a i:before { width: 47%; height: 47%; background-image: url(../img/share/icon-insta-w.svg); }

		#head-hamb { font-size: inherit; position: absolute; right: 1.5em; top: 1em; z-index: 10; }
        #head-hamb:after,
        #head-hamb:before { content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%,-50%); }
        #head-hamb:after { background: url(../img/share/bg-hamb.png); background-size: 100% 100%; z-index: 1; }
        #head-hamb:before { width: 75%; height: 75%; border-radius: 50%; z-index: 0; box-shadow: 0 .2em 2.6em rgba(200, 136, 61, .16); }
        #head-hamb a { display: block; position: relative; width: 5.4em; height: 5.4em; z-index: 2; }
        #head-hamb span { display: block; position: absolute; left: 50%; width: 2em; height: .2em; color: #000; background: #fff; transform: translateX(-50%); transition: all .2s; border-radius: 10em; }
        #head-hamb span:first-of-type { top: calc( 50% - .55em); }
        #head-hamb span:last-of-type { bottom: calc( 50% - .55em); }

        /* header action hamburger */
        #header.h-show #head-hamb span:first-of-type { top: calc( 50% - .1em ); width: 2em; transform: translateX(-50%) rotate(-45deg); }
        #header.h-show #head-hamb span:last-of-type { bottom: calc( 50% - .1em ); width: 2em; transform: translateX(-50%) rotate(45deg); }

        body.h-showed { overflow: hidden; }
	}

		

/* header action scroll */
#header.header-fixed { position: fixed; }
#header.header-transition-down { transform: translateY(-100%); opacity: 0; }
#header.header-transition-up { transform: translateY(-100%); }
#header.header-transition-up:before { transition: linear .3s; }
#header.header-visible { opacity: 1; transform: translateY(0); }
#header.header-visible:before { opacity: 1; }

/* main
------------------------------------------------ */
#main {
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 2;
}
	
	.swiper { opacity: 0; }
	.swiper.swiper-initialized { opacity: 1; transition: linear .3s; }

	/* Popup styles */
	.popup { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; padding: 3em 2em; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; z-index: 9999 !important; overflow: hidden; box-sizing: border-box; overflow: scroll; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; }
	.popup--frame { background: #fff; border-radius: 10px; padding: 20px; max-width: 768px; width: 100%; max-height: 100%; opacity: 0; transition: all 0.3s ease; }
	.popup.open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
	.popup.open .popup--frame { opacity: 1; }
	.popup--close { position: fixed; right: 2em; top: 2em; z-index: 10; width: 6em; height: 6em; border-radius: 50%; background: #4C4948; z-index: 2; }
	.popup--close span { display: block; position: absolute; left: 50%; width: 2em; height: .2em; color: #000; background: #fff; transform: translateX(-50%); transition: all .2s; border-radius: 10em; }
    .popup--close span:first-of-type { top: calc( 50% - .1em ); transform: translateX(-50%) rotate(-45deg); }
    .popup--close span:last-of-type { bottom: calc( 50% - .1em ); transform: translateX(-50%) rotate(45deg); }

    	@media only screen and (min-width: 768px) {
    		.popup--close:hover { opacity: .8; transition: linear .3s; }
    	}

    /* page */	
	#p-page { padding-top: 0; margin-bottom: 10em; }

		@media only screen and (max-width: 768px) {
			#p-page { margin-bottom: 6em; }
		}

	/* page head */
	#p-head { position: relative; padding-top: 22.3em; padding-bottom: 11.5em; }
	.p-head--title { display: block; position: relative; text-align: center; }
	.p-head--title .t-small { font-size: 1.6em; font-weight: bold; line-height: 2.125; display: inline-block; background: #40A598; color: #FFFF57; padding: 0 1.25em; margin-bottom: .5em; border-radius: 10em; }
	.p-head--title .t-big { font-size: 5.5em; font-weight: bold; letter-spacing: .05em; line-height: 1.4; }
	.p-head--canvas { position: absolute; top: 0; width: 140em; height: 50em; z-index: 2; pointer-events: none; }
	.p-head--canvas-01 { left: -80em; }
	.p-head--canvas-02 { right: -80em; }

		@media only screen and (max-width: 768px) {
			#p-head { padding-top: 12em; padding-bottom: 4.6em; }
			.p-head--title .t-small { font-size: 1.3em; line-height: 2; padding: 0 1.6em; margin-bottom: .38em; }
			.p-head--title .t-big { font-size: 2.4em; line-height: 1.4; }
			.p-head--canvas { width: 47.5em; height: 26em; }
			.p-head--canvas-01 { left: -28em; }
			.p-head--canvas-02 { right: -28em; }
		}

	#projectpop { padding: 15em 0; display: block; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(../img/top/bg-project-pop.jpg); background-attachment: fixed; }
	#projectpop .popup--frame { position: relative; padding: 0; max-width: 120em; max-height: initial; margin: 0 auto; background: #fff; display: block; overflow: initial; border: .8em solid #66B7AC; border-radius: 3em; box-sizing: border-box; z-index: 10; }
	#projectpop .popup--frame:after { content: ''; display: block; position: absolute; width: calc( 100% + 1.6em ); height: 6em; left: -.8em; bottom: -.8em; background: #F2F2F2; box-sizing: border-box; border-left: .8em solid #66B7AC; border-right: .8em solid #66B7AC; border-bottom-right-radius: 3em; border-bottom-left-radius: 3em;  }
	.projectpop--head { display: flex; flex-wrap: wrap; align-items: center; position: relative; width: 100%; height: 40em; background: #66B7AC; border-top-right-radius: 2em; border-top-left-radius: 2em; overflow: hidden; margin-bottom: 8em; }
	.projectpop--bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-size: cover; background-position: center; z-index: 0; }
	.projectpop--head:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-size: cover; background-position: center; background-image: url(../img/top/projectpop-bg-head-cover.png); mix-blend-mode: multiply; z-index: 1; }
	.projectpop__about { padding: 3.3em 0 2.3em; max-width: 52.4em; display: block; position: relative; border-top: 1px dashed #FFFF57; color: #fff; margin-left: 4.5em; border-bottom: 1px dashed #FFFF57; position: relative; z-index: 2; }
	.projectpop__about:before { content: 'SPECIAL INTERVIEW'; font-family: 'Barlow', sans-serif; font-size: 1.5em; letter-spacing: .07em; font-weight: bold; color: #FFFF57; background: #66B7AC; position: absolute; left: 0; top: -.9em; padding-right: .75em; }
	.projectpop__about--tlt { font-size: 1.8em; font-weight: normal; line-height: 1.5; transition: linear .3s; }
	.projectpop__about--tlt strong { font-size: 2.77em; font-weight: bold; line-height: 1.4; margin-top: .1315em; display: block; }
	.projectpop__about--name { font-size: 1.6em; font-weight: normal; line-height: 1.7; margin-top: 3.5em; }
	.projectpop__about--name strong { font-size: 1.75em; line-height: 1.5; margin-right: .357em; margin-top: .2142em; display: inline-block; }
	.projectpop--desc { font-size: 1.6em; line-height: 1.7; max-width: 43.75em; display: block; margin: 0 auto 4.1875em; padding: 0 calc( 9.375em - .5em ); }
	.projectpop__slides { opacity: 1; }
	.projectpop__slides .swiper-wrapper { flex-wrap: wrap; }
	.projectpop__slides .swiper-slide { width: 50%; }
	.projectpop__list:not(:last-child) { margin-bottom: 15em; }
	.projectpop__list--desc { display: block; margin-top: 7.5em; padding: 0 calc( 15em - .8em ); }
	.projectpop__list--tlt { font-size: 2.3em; line-height: 1.39; font-weight: bold; color: #EB6D8E; margin-bottom: 1.47em; }
	.projectpop__list--break { display: flex; flex-wrap: wrap; justify-content: space-between; }
	.projectpop__list--cmn { font-size: 1.6em; line-height: 1.7; width: 46.66%; }
	.projectpop__list--cmn h2 + p,
	.projectpop__list--cmn h3 + p,
	.projectpop__list--cmn h4 + p,
	.projectpop__list--cmn h5 + p,
	.projectpop__list--cmn h6 + p,
	.projectpop__list--cmn p + p { margin-top: 1em; }
	.projectpop__list--cmn p + h2,
	.projectpop__list--cmn p + h3,
	.projectpop__list--cmn p + h4,
	.projectpop__list--cmn p + h5,
	.projectpop__list--cmn p + h6 { margin-top: 2em; }
	.projectpop--bot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; margin-top: 15em; padding: 5em calc( 15em - .8em ) 12em; background: #F2F2F2; border-bottom-right-radius: 1em; border-bottom-left-radius: 1em; }
	.projectpop--professor { font-size: 1.6em; line-height: 1.7; width: 30%; }
	.projectpop--professor strong { font-size: 1.75em; line-height: 1.5; margin: .25em .35em 0 0; display: inline-block; }
	.projectpop--reference { width: 70%; padding-left: 7em; box-sizing: border-box; border-left: 1px solid #CCCCCC; }
	.projectpop--reference li { font-size: 1.4em; line-height: 1.7; display: block; position: relative; padding-left: .71em; }
	.projectpop--reference li:before { content: ''; display: block; width: .33em; height: .33em; position: absolute; left: 0; top: .7em; border-radius: 50%; background: #4C4948; }
	.projectpop--reference li:not(:last-child) { margin-bottom: 1em; }
	.projectpop--reference li a .i-links { display: inline-block; width: 1em; height: 1em; margin-left: .5em; vertical-align: -.15em; } 
	.projectpop--reference li a .i-links:before { background-image: url(../img/share/icon-link-b.svg); }
	.projectpop--close { color: #fff; display: flex; align-items: center; justify-content: center; position: absolute; right: -.75em; top: auto; bottom: -.8em; width: calc( 100% + 1.5em ); height: 6em; border-radius: 0; background-color: initial; background-image: url(../img/top/educational-bg-bow.png); background-repeat: repeat-x; background-position: top center; background-size: 3.43em 100%; border-bottom-right-radius: 3em; border-bottom-left-radius: 3em; box-sizing: border-box; transition: linear .3s; }
	.projectpop--close small { font-size: 2.3em; display: inline-block; position: relative; padding-right: 1em; }
	.projectpop--close small:after,
	.projectpop--close small:before { content: ''; font-size: .4347em; display: block; position: absolute; right: -1.5em; width: 2em; height: .2em; color: #000; background: #fff; transition: all .2s; border-radius: 10em; }
	.projectpop--close small:after { bottom: calc( 50% - .2em ); width: 2em; transform: translateX(-50%) rotate(-45deg); }
	.projectpop--close small:before { bottom: calc( 50% - .2em ); width: 2em; transform: translateX(-50%) rotate(45deg); }
	.projectpop--canvas { position: fixed; top: 0; width: 140em; height: 50em; pointer-events: none; }
	.projectpop--canvas-01 { left: -70em; }
	.projectpop--canvas-02 { right: -70em; }

	    @media only screen and (min-width: 768px) and (min-height: 320px) and (max-height: 1080px) {
	        #projectpop { font-size: .925vh; }

	    }

	    @media only screen and (min-width: 768px) {
	        .projectpop--close:hover { opacity: .8; }
	    }

	    @media only screen and (max-width: 768px) {
	        #projectpop { padding: 0 0 5em 4.5em; background: #fff; }
	        #projectpop:before { content: ''; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(76, 73, 72, .3); mix-blend-mode: multiply; }
	        #projectpop > .popup--close { right: auto; left: .75em; top: 1em; width: 3em; height: 3em; }
	        #projectpop > .popup--close span { width: 1.4em; }
	        #projectpop .popup--frame { border: none; overflow: hidden; border-radius: 0; border-bottom-right-radius: 3em; border-bottom-left-radius: 3em; }
	        #projectpop .popup--frame:after { content: none; }
	        .projectpop--head { padding: 3em 3em calc( 3em + 28vw ); display: block; overflow: initial; height: initial; border-top-right-radius: 0; border-top-left-radius: 0; margin-bottom: calc( 16vw + 3.5em ); box-sizing: border-box; }
	        .projectpop--bg,
	        .projectpop--head:after { content: none; display: none; }
	        .projectpop--profile { display: block; overflow: hidden; position: absolute; left: 3em; bottom: -16vw; height: 43.73vw; width: calc( 100% - 6em ); border-radius: 3em; }
	        .projectpop--profile img { width: 100%; margin-top: -1em; }
	        .projectpop__about { padding: 2em 0 1.5em; max-width: 100%; margin-left: 0; text-align: center; }
	        .projectpop__about:before { font-size: 1em; left: 50%; transform: translateX(-50%); padding: 0 .75em; }
	        .projectpop__about--tlt { font-size: 1.4em; }
	        .projectpop__about--tlt strong { font-size: 1.57em; letter-spacing: .08em; line-height: 1.3; }
	        .projectpop__about--name { font-size: 1.2em; line-height: 1.5; margin-top: 1em; }
	        .projectpop__about--name strong { font-size: 1.75em; line-height: 1.5; margin-right: .357em; margin-top: .2142em; }
	        .projectpop__about--name span { font-size: 1.16em; }
	        .projectpop--desc { font-size: 1.5em; margin-bottom: 3.6em; padding: 0 2em; }
	        .projectpop__slides { overflow: initial; }
	        .projectpop__slides .swiper-slide:nth-child(n+2) { display: none; }
	        .projectpop__slides.swiper-initialized .swiper-wrapper { flex-wrap: initial; }
	        .projectpop__slides.swiper-initialized .swiper-slide { width: 100%; }
	        .projectpop__slides.swiper-initialized .swiper-slide:nth-child(n+2) { display: block; }
	        .projectpop__slides .swiper-pagination { height: 1.8em; bottom: -2.8em; top: auto; }
	        .projectpop__slides .swiper-pagination-bullet { position: relative; width: 1.8em; height: 1.8em; margin: 0 .5em !important; background: none; transition: all .3s ease; opacity: 1; }
	        .projectpop__slides .swiper-pagination-bullet:after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: #ccc; transform: scale(.5); }
	        .projectpop__slides .swiper-pagination-bullet-active { background: #66B7AC; }
	        .projectpop__slides .swiper-pagination-bullet-active:after { background: #fff; }
	        .projectpop__list:not(:last-child) { margin-bottom: 5.8em; }
	        .projectpop__list--desc { margin-top: 5.8em; padding: 0 3em; }
	        .projectpop__list--tlt { font-size: 1.8em; line-height: 1.5; margin-bottom: .88em; text-align: center; }
	        .projectpop__list--break { display: block; }
	        .projectpop__list--cmn { font-size: 1.5em; width: 100%; display: none; }
	        .projectpop__list--cmn h2 + p,
	        .projectpop__list--cmn h3 + p,
	        .projectpop__list--cmn h4 + p,
	        .projectpop__list--cmn h5 + p,
	        .projectpop__list--cmn h6 + p,
	        .projectpop__list--cmn p + p { margin-top: 1.13em; }
	        .projectpop__list--cmn p + h2,
	        .projectpop__list--cmn p + h3,
	        .projectpop__list--cmn p + h4,
	        .projectpop__list--cmn p + h5,
	        .projectpop__list--cmn p + h6 { margin-top: 1.6em; }
	        .projectpop--bot { display: block; margin-top: 5.4em; padding: 4em 3em 8.5em; border-radius: 0; }
	        .projectpop--professor { font-size: 1.2em; line-height: 1.5; width: 100%; text-align: center; }
	        .projectpop--professor strong { font-size: 1.75em; line-height: 1.5; margin-right: .357em; margin-top: .2142em; }
	        .projectpop--professor span { font-size: 1.16em; }
	        .projectpop--reference { width: 100%; padding: 0; margin-top: 2em; border: none; }
	        .projectpop--reference li:not(:last-child) { margin-bottom: .78em; }
	        .projectpop--reference li a { border-bottom: 1px solid; }
	        .projectpop--close { right: 0; bottom: 0; width: 100%; height: 5em; border-radius: 0; background-size: 2.8em 100%; }
	        .projectpop--close small { font-size: 1.6em; font-weight: bold; margin-top: .25em; padding-right: .75em; }
	        .projectpop--close small:after,
	        .projectpop--close small:before { height: .3em; }
	    }

/* Prevent body from scrolling */
body.no-scroll { overflow: hidden; }

/* footer
------------------------------------------------ */
#footer {
	font-size: inherit;
	position: relative;
	display: block;
	width: 100%;
}

#ft-info { padding: 6.5em 0 9.5em; display: block; position: relative; overflow: hidden; }
.ft-info--logo { display: block; max-width: 19.3em; margin: 0 auto; }
.ft-info--links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 4.5em; }
.ft-info--links li { font-size: 1.6em; font-weight: bold; margin: 0 1.25em; }
.ft-info--links li a { display: block; }

	@media only screen and (max-width: 768px) {
		#ft-info { padding: 8.5em 0 6.5em; }
		.ft-info--logo { max-width: 14.5em; }
		.ft-info--links { display: block; text-align: center; margin-top: 4.5em; }
		.ft-info--links li { display: block; }
		.ft-info--links li:not(:last-child) { margin-bottom: 1.8125em; }
	}

#ft-bot { display: block; position: relative; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 6em, #40A598 0%); }
#ft-bot:before { content: ''; display: block; width: 100vw; height: 7em; position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: url(../img/share/bg-ft-bow.png) repeat-x top center; background-size: 7.8em 100%; z-index: 0; }
.ft-bot--links { display: flex; flex-wrap: wrap; align-items: center; height: 7em; }
.ft-bot--insta { display: block; margin-bottom: -1em; }
.ft-bot--insta a { display: flex; flex-wrap: wrap; align-items: center; color: #fff; }
.ft-bot--insta a span { font-family: brandon-grotesque, sans-serif; font-size: 1.5em; font-weight: bold; }
.ft-bot--insta a .i-icon { display: block; margin-left: 1em; width: 3.2em; height: 3.2em; border: 1px solid #fff; background: #40A598; border-radius: 50%; }
.ft-bot--insta a .i-icon:before { width: 1.6em; height: 1.6em; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.ft-bot--company { display: block; margin-bottom: -1em; margin-left: 4em; }
.ft-bot--company a { font-size: 1.2em; color: #fff; display: inline-block; }
.ft-bot--company a .i-links { display: inline-block; width: 1.29em; height: 1.29em; margin-left: .5em; vertical-align: -.3em; }	
.ft-bot--company .h-line span:before { background: #fff; }

	@media only screen and (min-width: 768px) {
		.ft-bot--insta a:hover .i-icon { background: #fff; }
		.ft-bot--insta a:hover .i-icon:before { background-image: url(../img/share/icon-insta-g.svg); }
		.ft-bot--copy { font-family: brandon-grotesque, sans-serif; font-size: 1.2em; position: absolute; top: 2.7em; right: 2.5em; color: #fff; }
	}

	@media only screen and (max-width: 768px) {
		#ft-bot { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 5em, #40A598 0%); }
		#ft-bot .wrap { padding: 0 1.5em; }
		#ft-bot:before { height: 6.6em; background: url(../img/share/bg-ft-bow_sp.png) repeat-x top center; background-size: 2.76em 100%; }
		.ft-bot--links { height: 6.6em; }
		.ft-bot--company { margin-left: 2.5em; }
		.ft-bot--copy { font-family: brandon-grotesque, sans-serif; font-size: 1em; position: absolute; top: 3.1em; right: 1.5em; color: #fff; }
	}

#pop-banner { font-size: inherit; position: fixed; right: 2em; bottom: 2em; width: 29.6em; z-index: 50; }
#pop-banner a { display: block; transition: linear .2s; }
#pop-banner img { display: block; width: 100%; -webkit-filter: drop-shadow(0 .2em 1.3em rgba(200, 136, 61, .26)); filter: drop-shadow(0 .2em 1.3em rgba(200, 136, 61, .26)); }

	@media screen and (min-width: 768px) {
		#pop-banner { transition: linear .1s; }
		#pop-banner a:hover { opacity: .8; }
		#pop-banner.arrived { opacity: 0; pointer-events: none }
		#pop-banner.arrived a { opacity: 1; visibility: initial; }
	}

	@media screen and (max-width: 768px) {
		#pop-banner { right: 1.5em; bottom: 1.5em; width: calc( 100% - 3em ); }
		#pop-banner img { -webkit-filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .16)); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .16)); }
	}

.ft-canvas { display: block; }
.ft-canvas li { position: absolute; top: 0; width: 140em; height: 50em; }
.ft-canvas li:nth-of-type(1) { left: -70em; }
.ft-canvas li:nth-of-type(2) { right: -70em; }
.ft-canvas li:nth-of-type(3),
.ft-canvas li:nth-of-type(4) { display: none }
.ft-canvas li canvas { width: 100%; height: 100%; }

	@media screen and (max-width: 768px) {
		.ft-canvas li { top: 15em; width: 47.5em; height: 26em; }
		.ft-canvas li:nth-of-type(1),
		.ft-canvas li:nth-of-type(3) { left: -28em; }
		.ft-canvas li:nth-of-type(2),
		.ft-canvas li:nth-of-type(4) { right: -28em; }
		.ft-canvas li:nth-of-type(3),
		.ft-canvas li:nth-of-type(4) { display: block; top: 65em; }
	}