@charset "utf-8";

#tops { width:100%; height:100vh; background:#000; position:relative; margin:0; display:flex; align-items:center; justify-content:center; padding:0 0 70px 0; }
#top_sp { width:90%; margin:auto; position:fixed; }
.top_sp1 { text-indent:0.75em; }
.top_sp3 { text-indent:1.5em; }
#top_pc { display:none; }
@media screen and (min-width: 840px){
	#top_sp { display:none; }
	#top_pc{ width:100vw; height:70vh; display:flex; justify-content: center; align-items: center; flex-direction:column; /*margin:15vh auto;*/ position:fixed; }
	#particle1{ width:100%; height: 100vh; vertical-align: bottom; }
	#particle2{ width:100%; height: 100vh; vertical-align: bottom; }
	#particle3{ width:100%; height: 100vh; vertical-align: bottom; }
}

.MENU li a.MENU__TOP span	{ background:#000; }
@media screen and (min-width: 840px){
	header { position: -webkit-sticky; position: sticky; top: 0; z-index:20; }
}

#wrapper { background:#fff; position:relative; padding:0 0 100px 0; }
.box { width:100%; }
@media screen and (min-width: 1240px){
	.box { width:1200px; }
}

#copy { width:100vw; display:flex; justify-content:center; padding:0; }
.m-load.is-anim-loaded .border{display:none}
.m-load{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;background:#000; }
.m-load .border{width:1px;height:100%;position:absolute;top:0;left:50%;-webkit-transform:skewX(-40.89deg);transform:skewX(-40.89deg)}
.m-load .border .inner{width:100%;height:0;background:#fff;position:absolute;bottom:0;left:0;-webkit-transition:height .5s linear;transition:height .5s linear}
.m-load .i{width:200%;height:200%;background:#000;position:absolute;top:-50%;-webkit-transform:translate(0,0) skewX(-40.89deg);transform:translate(0,0) skewX(-40.89deg)}
.m-load .i:nth-child(1){right:50%}
.m-load .i:nth-child(2){left:50%}
.m-load.is-anim-loaded{background:0 0}
.m-load.is-anim-loaded .i{-webkit-transition:-webkit-transform cubic-bezier(.05,1,.125,1) 1.5s;transition:-webkit-transform cubic-bezier(.05,1,.125,1) 1.5s;transition:transform cubic-bezier(.05,1,.125,1) 1.5s;transition:transform cubic-bezier(.05,1,.125,1) 1.5s,-webkit-transform cubic-bezier(.05,1,.125,1) 1.5s}
.m-load.is-anim-loaded .i:nth-child(1){-webkit-transform:translate(-50vw,-50vh) skewX(-40.89deg);transform:translate(-50vw,-50vh) skewX(-40.89deg)}
.m-load.is-anim-loaded .i:nth-child(2){-webkit-transform:translate(50vw,50vh) skewX(-40.89deg);transform:translate(50vw,50vh) skewX(-40.89deg)}
.js-anim-visual img{-webkit-transform:translate(-50%,-50%) scale(1.25) rotate(3deg);transform:translate(-50%,-50%) scale(1.25) rotate(3deg)}
.js-anim-visual.is-anim img{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:-webkit-transform 50s cubic-bezier(.19,1,.22,1);transition:-webkit-transform 50s cubic-bezier(.19,1,.22,1);transition:transform 50s cubic-bezier(.19,1,.22,1);transition:transform 50s cubic-bezier(.19,1,.22,1),-webkit-transform 50s cubic-bezier(.19,1,.22,1)}
.l-visual{ width:100%; height:100%; position:relative}

.h1 { width:95%; height:calc(100vh - 70px); margin:0 auto; display:flex; flex-direction:column; justify-content:center; }
.h1Copy { width:100%; display:block; font-size:24px; line-height:1.8; letter-spacing:0.1em; }
._c{display:inline-block;font-weight:100}
._c span{transform:rotate(5deg) translate(0, 70%);transform-origin:-100px center;opacity:0;display:inline-block;white-space:pre}
.ttl1.scBomb_anim ._c span{transition:opacity 0.8s cubic-bezier(0.26, 0.06, 0, 1),transform 1s cubic-bezier(0.36, 0.14, 0, 1);transform:rotate(0deg) translate(0, 0%);opacity:1;animation-duration:3.8s;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.455, 0.03, 0.515, 0.955);animation-name:ttl1_anim;animation-iteration-count:infinite}
.h1En { margin:10px 0 0 0; font-size:14px; line-height:1.2; letter-spacing:0.25em; }
@media screen and (min-width: 840px){
	#copy { height:calc(100vh - 90px); }
	.l-visual{ height:calc(100vh - 90px); }
	.h1 { width:80%; height:calc(100vh - 90px); margin:0 auto; }
	.h1Copy { font-size:64px; line-height:1.7; }
	.h1Copy .js-span { display:flex; flex-direction:column; }
	.h1En { margin:40px 0 0 0; font-size:24px; line-height:1.2; letter-spacing:0.25em; }
}


@keyframes ttl1_anim{0%{color:#333}12.5%{color:#ff7f00}25%{color:#333}100%{color:#333}}

#news { width:100vw; height:auto; padding:30px 2.5%; background:#f8f8f8; }
#news .box { height:100%; display:flex; flex-direction:column; align-items:center; position: -webkit-sticky; position: sticky; }
.newsH2 { width:100%; display:flex; flex-direction:row; align-items:baseline; }
.newsH2Title { }
.newsH2En { font-weight:bold; font-size:20px; line-height:1.5em; }
.newsH2Jp { margin:0 0 0 10px; font-size:14px; line-height:1.5; }
.newsList {  }
.newsList dl { padding:10px 0; border-bottom:1px solid #ccc; display:flex; flex-direction:column; align-items:start; justify-content:space-between; line-height:1.75; }
.newsList dl dt { color:#999; }
.newsList dl dt em { width:auto; display:block; padding:0; color:#ff2a29; text-align:left; font-weight:bold; line-height:1.2; }
.newsList dl dd a { text-decoration: underline; }
@media screen and (min-width: 840px){
	#news { height:auto; padding:100px 2.5%; }
	#news .box { flex-direction:row; align-items:start; }
	.newsH2 { width:40%; flex-direction:column; }
	.newsH2Title { margin:20px auto 0 auto; display:flex; flex-direction:column; align-items:baseline; }
	.newsH2En { margin:0; font-size:28px; }
	.newsH2Jp { margin:0; font-size:16px; }
	.newsList { width:60%; }
	.newsList dl { padding:15px 0; flex-direction:row; }
	.newsList dl dt { width:auto; }
	.newsList dl dd { width:calc(100% - 90px); }	
}

#ism { width:100vw; height:auto; padding:0 2.5% 30px 2.5%; background:#fff; }
.ismEn { margin:50px 0 0 0; display:flex; flex-direction:column; justify-content:right; position: -webkit-sticky; position: sticky; z-index:1; top:70px; }
.ismEn .top_w { margin:0 30px 0 auto; }
.ismEn .top_b { margin:-20px 0 0 auto; }
.ismH2 { margin:-40px 0 0 0; font-size:20px; }
.ismText { display:block; margin:20px 0 0 0; }
.ismText br { display:none; }
@media screen and (min-width: 840px){
	#ism { padding:0 2.5% 200px 2.5%; }
	.ismEn .top_w { margin:-70px 100px 0 auto; }
	.ismEn .top_b { margin:-80px 0 0 auto; }
	.ismH2 { margin:-100px 0 0 0; font-size:24px; }
	.ismText { width:800px; margin:50px auto 0 auto; font-size:16px; }
	.ismText br { display:inline; }
}
@media screen and (min-width: 1240px){
	.ismH2 { width:1200px; margin:-100px auto 0 auto; }
}

#interview { width:100vw; height:auto; padding:0 2.5% 30px 2.5%; background:#fff; }
.interviewEn { margin:50px 0 0 0; display:flex; flex-direction:column; justify-content:right; position: -webkit-sticky; position: sticky; z-index:1; top:70px; }
.interviewEn .top_b { margin:-20px 0 0 auto;  text-align: right;}
.interviewH2 { margin:-10px 0 0 0; font-size:20px; }
.interviewList { width:100%; display:flex; flex-wrap:wrap; }
.interviewList li { width:100%; margin:0 0 50px 0; }
.interviewList li a { width:100%; display:block; }
.interviewList li a:hover { opacity:.7; transition:.5s; }
.interviewOutline { width:100%; padding:0 0 0 2.5%; border-left:3px solid #000; display:flex; flex-direction:column; justify-content:left; align-items:center; }
.interviewOutline dt { width:100%; }
.interviewNm { font-weight:bold; font-size:20px; }
.interviewArea { margin:10px 0 0 0; color:#999; font-size:14px; }
.interviewOutline dd { width:100%; }
.interviewOutline dd h3 { font-size:20px; line-height:1.5; }
.interviewImg { width:100%; display:block; margin:10px 0 0 0; }
.interviewCopy { width:100%; display:block; margin:5px 0 0 0; line-height:1.5; }
.interviewCons { width:100%; margin:5px 0 0 0; padding:0; border-top:1px solid #ccc; display:flex; flex-direction:column; justify-content:left; }
.interviewCons dt { width:100%; color:#999; font-size:14px; }
.interviewCons dd { width:100%; display:flex; flex-wrap:wrap; justify-content:left; align-items:center; font-size:14px; line-height:1.5; }
.interviewCon { width:100%; display:flex; justify-content:left; align-items:center; }
.interviewCon1 { width:14px; height:14px; display:block; margin:0 5px 0 0; background:#31FF39; }
.interviewCon2 { width:14px; height:14px; display:block; margin:0 5px 0 0; background:#FF8891; }
.interviewCon3 { width:14px; height:14px; display:block; margin:0 5px 0 0; background:#3190FB; }
.interviewCon4 { width:14px; height:14px; display:block; margin:0 5px 0 0; background:#FF8B00; }
.interviewLink { width:200px; height:40px; margin:10px 0 0 0; display:flex; justify-content:center; align-items:center; border:1px solid #999; text-align:center; line-height:40px; transition:.5s; }
.interviewList li a:hover .interviewLink { background:#f8f8f8; transition:.5s; }
.interviewLink i { margin:0 0 0 10px; font-size:18px; }
@media screen and (min-width: 840px){
	#interview { padding:0 2.5% 100px 2.5%; }
	.interviewEn { margin:50px -100px 0 0; }
	.interviewEn .top_b { margin:-80px 0 0 auto; }
	.interviewH2 { margin:-40px 0 0 0; font-size:24px; }
	.interviewList { margin:50px 0 0 0; justify-content:space-between; }
	.interviewList li { width:47.5%; margin:0 0 70px 0; }
	.interviewOutline { flex-direction:row; }
	.interviewOutline dt { width:20%; }
	.interviewNm { font-size:28px; }
	.interviewArea { margin:0; }
	.interviewOutline dd { width:80%; font-size:16px; }
	.interviewCopy { margin:10px 0; font-size:20px; }
	.interviewCons { padding:10px 0 0 0; flex-direction:row; }
	.interviewCons dt { width:20%; }
	.interviewCons dd { width:80%; font-size:14px; }
	.interviewCon { width:50%; }
	.interviewLink { margin:30px 0 0 0; }
}
@media screen and (min-width: 1240px){
	.interviewH2 { width:1200px; margin:-100px auto 0 auto; }
	.interviewList { width:1200px; margin:50px auto 0 auto; }
}

#clients { width:100vw; height:auto; padding:0 2.5% 30px 2.5%; background:#fff; }
.clientsEn { margin:50px 0 0 0; display:flex; flex-direction:column; justify-content:right; position: -webkit-sticky; position: sticky; z-index:1; top:70px; }
.clientsEn .top_b { margin:-20px 0 0 auto; }
.clientsH2 { margin:-40px 0 0 0; font-size:20px; }
.clientsH2 span { width:100%; display:block; margin:0; font-size:14px; line-height:1.5; text-indent:-0.5em; }
.clientsList { width:100%; display:flex; flex-wrap:wrap; justify-content:left; align-items:center; }
.clientsList li { width:50%; margin:20px 0 0 0; }
.clientsList li img { width:90%; display:block; margin:0 auto 10px auto; text-align:center; border:1px solid #ccc; }
.clientsList li span { width:90%; display:block; margin:0 auto; text-align:center; font-size:10px; line-height:1.5; }
@media screen and (min-width: 840px){
	#clients { padding:0 2.5% 50px 2.5%; }
	.clientsEn { margin:50px -75px 0 0; }
	.clientsEn .top_b { margin:-80px 0 0 auto; }
	.clientsH2 { margin:-100px 0 0 0; font-size:24px; }
	.clientsList { justify-content: space-between;}
	.clientsList li { width:24%; margin:50px 0 0 0; }
	.clientsList li img { width:100%; }
	.clientsList li span { font-size:15px; }
}
@media screen and (min-width: 1240px){
	.clientsH2 { width:1180px; margin:-100px auto 0 auto; }
	.clientsList { width:1180px; margin:0 auto; }
}

#service { width:100vw; height:auto; padding:0 2.5% 30px 2.5%; background:#fff; }
.serviceEn { margin:50px 0 0 0; display:flex; flex-direction:column; justify-content:right; position: -webkit-sticky; position: sticky; z-index:1; top:70px; }
.serviceEn .top_w { margin:0 10px 0 auto; }
.serviceEn .top_b { margin:-20px 30px 0 auto; }
.serviceH2 { margin:-10px 0 0 0; font-size:20px; }
.serviceList { width:100%; display:flex; flex-direction:column; position:relative; z-index:0; }
.serviceList li { width:100%; display:block; margin:10px 0 20px 0; }
.serviceList li div { width:100%; display:flex; flex-direction:row-reverse; position:relative; align-items: flex-start;}
.serviceList li div img { width:100%; display:block; margin-top:50px; }
.serviceList li div dl { width:100%; min-width:60%; padding:5px 0 0 0; display:flex; align-items:start; justify-content:left; border-top:3px solid #000; position:absolute; left:0; top:10px; }
.serviceList li div dt { font:normal normal bold 16px/1.5 "Arial", sans-serif; }
.serviceList li div dd { margin:0 0 0 10px; line-height:1.5; }
.serviceList li div dd h3 { font-size:14px; text-shadow:1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff; }
.serviceList li div dd strong { font:normal normal bold 20px/1.2 "Arial", sans-serif; color: white;-webkit-text-stroke: 1px black;}
@media screen and (min-width: 840px){
	#service { padding:100px 2.5% 100px 2.5%; }
	.serviceEn .top_w { margin:-70px 10px 0 auto; }
	.serviceEn .top_b { margin:-80px -70px 0 auto; }
	.serviceH2 { margin:-100px 0 0 0; font-size:24px; }
	.serviceList { margin:0 auto; }
	.serviceList li { margin:50px 0 30px 0; }
	.serviceList li div img { width:60%; margin-top:initial; }
	.serviceList li div dl { width:auto; min-width:55%; top:50px; }
	.serviceList li div dt { font-size:28px; }
	.serviceList li div dd { margin:0 0 0 30px; }
	.serviceList li div dd h3 { font-size:24px; }
	.serviceList li div dd strong { font-size:64px; }
	}
@media screen and (min-width: 1240px){
	.serviceH2 { width:1200px; margin:-100px auto 0 auto; }
	.serviceList { width:1000px; }
}

#contents { width:100vw; height:auto; padding:0 2.5%; background:#fff; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }
.contentsList { width:100%; display:flex; flex-direction:column; justify-content:center; }
.contentsList li { width:100%; display:block; border-bottom:1px solid #ccc; }
.contentsList li:last-child { border:none;}
.contentsList li a { width:100%; height:120px; display:flex; flex-direction:column; justify-content:right; position:relative; transition:.5s; }
.contentsList li a:hover { opacity:.7; transition:.5s; }
.contentsH2 { width:auto; margin:30px 0 0 125px; display:flex; flex-direction:column; text-align:left; line-height:1.5; }
.contentsH2 h2 { width:100%; display:block; font-weight:bold; font-size:24px; }
.contentsH2 span { width:100%; display:block; }
.contentsImg { width:100px; border-radius:50%; position:absolute; top:10px; left:2.5%; }
.contentsArrow { width:22px; height:22px; display:block; background:#000; border-radius:50%; color:#fff; position:absolute; top:50%; right:2.5%; margin:-11px 0 0 0; text-align:center; line-height:22px; }
@media screen and (min-width: 840px){
	.contentsList { flex-direction:row; }
	.contentsList li { width:33.3%; display:block; border-bottom:none; border-right:1px solid #ccc; }
	.contentsList li a { height:auto; padding:20px 0 40px 0; justify-content:space-between; }
	.contentsH2 { margin:30px auto 0 auto; text-align:center; }
	.contentsImg { width:150px; position:relative; top:auto; left:auto; margin:10px auto; }
	.contentsArrow { position:relative; top:auto; right:auto; margin:10px auto; }
}
@media screen and (min-width: 1240px){
	.contentsList li { width:360px; }
}

.linkExposition { width:80%; height:75px; margin:50px auto 0 auto; display:flex; justify-content:center; align-items:center; background:#000; color:#fff; text-align:center; transition:.5s; }
.linkExposition:hover { opacity:0.7; transition:.5s; }
.linkExpositionArrow { width:22px; height:22px; display:block; margin-left:20px; background:#fff; color:#000; border-radius:50%; text-align:center; line-height:22px; }
@media screen and (min-width: 1240px){
	.linkExposition { width:800px; font-size:16px; margin:50px auto 100px auto; }
}

.ismText br { display:block; }
.ismText strong { font-size:24px; font-weight:bold; letter-spacing:0.1em; line-height:1.7em; }
.ismText strong br { display:block; }
.ismText span.yellow {position: relative;display: inline-block; font-weight:bold; z-index: 0;}
.ismText span.yellow::after {content: "";position: absolute;left: 0;bottom: 0.5em;width: 100%; height: 0.5em; background: #ffff00;z-index:-1; }
@media screen and (min-width:840px){
	.ismText strong { font-size:30px; }
}