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

.whiteboard {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 999;
	animation: fadeOut 3s 5s forwards;
}

.whiteboard__logo { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); opacity: 0; text-align: center; animation: fadeInOut 3s 1s forwards; }
.whiteboard__logo > img { width: 100px; height: auto; }

.cont-wrap__inner { background: url("../common/img/bg_cont-wrap_sp.png") no-repeat 50% 100%/680px auto; }
@media screen and (min-width: 681px) {
	.cont-wrap__inner { background-image: url("../common/img/bg_cont-wrap_pc.png"); background-size: 100% auto; }
}

.header--top { background: rgba(194,229,156,0.4);
background: linear-gradient(90deg, rgba(194,229,156,0.4) 0%, rgba(100,179,244,0.4) 100%); }
.header--top .main-menu__item a,
.header--top .main-menu__item ._atxt { color: #fff; }


.l-body.lock .header--top .main-menu__item a,
.l-body.lock .header--top .main-menu__item ._atxt { color: #4b4b73; }

.header--grey { background: #f5f5f5; }
.header--grey .header__navtrg span { background: #4b4b73; }
.header--grey .main-menu__item a,
.header--grey .main-menu__item ._atxt { color: #4b4b73; }
@media screen and (min-width: 681px) {
	.header--top ._atxt:hover, .main-menu__item__link:hover,
	.header--top .nav-dropdown__item__link:hover,
	.header--grey ._atxt:hover, .main-menu__item__link:hover,
	.header--grey .nav-dropdown__item__link:hover { color: #f5463c; }
}










.mainvisual { position: fixed; left: 0; width: 100%; height: calc(100% - 48px); }
.mainvisual__inner { position: relative; display: flex; height: 100%; }
.mainvisual:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.20); content: ""; z-index: 10; }
.mainvisual__logo { position: absolute; top: 0; right: 25px; height: 100%; z-index: 20; opacity: 0; animation: fadeIn 1s 9s forwards; }
.mainvisual__logo > img { width: auto; height: 100%; }
.mainvisual__scroll { opacity: 0; }

.sl-focus { background-repeat: no-repeat; background-position:50% 50%; background-size: cover; }
.sl-focus .slick-list,
.sl-focus .slick-track,
.sl-focus__item { height: 100%; }



@media screen and (max-width: 680px) {
	.mainvisual__inner { flex-direction: column; }
	.sl-focus { width: 100%; height: 50%; }
}
@media screen and (min-width: 681px) {
	.mainvisual { height: 100%; z-index: 60; }
	.mainvisual__inner { justify-content: space-between; }
	.mainvisual__logo { right: 50%; transform: translateX(50%); }
	.sl-focus { width: 50%; height: 100%; }
}
/*
  background: url("../img/img_1.jpg") no-repeat 50% 50% / cover;
}
*/


.fixed-btn-wrap { position: fixed; left: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; z-index: 100; }
.fixed-btn-wrap::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1px; height: 24px; background: #fff; content: ""; pointer-events: none; }
.fixed-btn { display: flex; justify-content: space-between; align-items: center; width: 50%; height: 48px; background: #f5463c; padding: 0 30px; font-size: 1.3rem; font-weight: 700; line-height: 1; color: #fff; }
.fixed-btn::after { width: 15px; height: 14px; background: url("../common/img/ico_blank_white.png") no-repeat center/contain; content: ""; }
@media screen and (min-width: 681px) {
	.fixed-btn-wrap { left: auto; right: 0; max-width: 400px; }
	.fixed-btn-wrap.is-abs { position: absolute; bottom: 501px; right: 0; }
	.fixed-btn { height: 56px; transition: .4s; }
	.fixed-btn:hover { color: #d22d2d; }
	.fixed-btn:hover::after { background-image: url("../common/img/ico_blank_red.png"); }
}


.cont-wrap { margin-top: 0; z-index: 70; }
.cont-wrap--top { position: relative; background-color: #fff; padding-bottom: 48px; }
/*.cont-wrap--top::before { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: block; width: 100%; height: 100%; background: url("../img/about/bg_bottom.png") no-repeat 50% 100%/1200px auto; content: ""; z-index: 0; pointer-events: none; mix-blend-mode: multiply; }*/
@media screen and (min-width: 681px) {
	.cont-wrap--top { background: url("../common/img/bg_line.png") repeat #fff 50% 50%/200px auto; padding-bottom: 0; }
}
@media screen and (min-width: 1201px) {
	.cont-wrap--top { background: none; background-color: #fff; }
	.cont-wrap--top::before { background-size: 100% auto; }
}

/**************************************************
		Section -　
**************************************************/
/*	Marquee	*/
.marquee-wrap { position: relative; height: 112px; }
.marquee { position: absolute; top: 50%; transform: translateY(-50%); width: 2303px; height: 59px; }
.marquee__item { margin-right: 30px; }

@media screen and (max-width: 680px) {
	.marquee-wrap { width: calc(100% + 60px); margin-left: -30px; margin-right: -30px; }
}
@media screen and (min-width: 681px) {
	.marquee-wrap { width: 100vw; height: 184px; z-index: 10; }
	.marquee { width: 2994px; height: 77px; }
}

/*	Intro	*/
.sec--intro {  }
.intro { position: relative; }

.intro__txt { position: relative; background: #fff; padding: 36px 48px 38px; font: 300 1.4rem YakuHanMP_Noto, "Noto Serif JP", serif; line-height: 2.4; letter-spacing: 0.02em; }
.intro::before { position: absolute; top: 0; display: block; width: calc(100vw - 40px); height: calc(100% + 242px); background: #f5f5f5; content: ""; z-index: 0; mix-blend-mode: multiply; }
@media screen and (max-width: 374px) {
	.intro__txt { font-size: 1.3rem; }
}
@media screen and (max-width: 680px) {
	.intro__img { position: relative; width: calc(100% + 60px); margin-left: -30px; margin-right: -30px; }
	.intro__txt { width: calc(100% + 30px);  margin-top: -30px; }
	.intro::before { left: -30px; }
}
@media screen and (min-width: 681px) {
	.intro__img { position: absolute; right: 200px; width: 100%; height: 658px; }
	.intro__txt { width: 400px; margin-left: auto; margin-right: 0; padding: 28px 0 70px 80px; font-size: 1.6rem; line-height: 2.75; }
	.intro__txt p { position: relative; z-index: 10; }
	.intro__txt::before { position: absolute; left: 0; bottom: 0; display: block; width: 100vw; height: calc(100% + 184px); background: #fff; content: ""; z-index: 0; }
	.intro::before { right: 0; width: calc(50% + 50vw); height: calc(100% + 280px); }
	.intro::after { position: absolute; left: -220px; bottom: -170px; display: block; width: 200px; height: 200px; background: rgb(194,229,156); background: linear-gradient(90deg, rgba(194,229,156,1) 0%, rgba(100,179,244,1) 100%); content: ""; opacity: .4; filter: blur(2rem); }

}
@media screen and (min-width: 1201px) {
	.intro__img { width: calc(50% + 50vw - 200px); }
}



/*	Interview	*/
.common-ttl--top { padding-top: 30px; }
.common-ttl--top .common-ttl__main { line-height: 1.4; }

.intv-top { position: relative; margin-top: 120px; margin-bottom: 58px; z-index: 10; }
.intv-top__img { position: relative; }
.intv-top__img::before { position: absolute; right: -20px; bottom: -80px; display: block; width: 120px; height: 120px; background: rgb(194,229,156); background: linear-gradient(90deg, rgba(194,229,156,1) 0%, rgba(100,179,244,1) 100%); content: ""; opacity: .4; filter: blur(1rem); }
@media screen and (max-width: 680px) {
	.intv-top__img { width: calc(100% + 30px); margin-right: -30px; margin-bottom: 80px; }
}
@media screen and (min-width: 681px) {
	.common-ttl--top { padding-top: 32px; }
	.common-ttl--top .common-ttl__main { line-height: 1.5; }
	.intv-top { margin-top: 200px; padding-top: 128px; }
	.intv-top__img { position: absolute; top: 0; left: 400px; width: 600px; }
	.intv-top__img::before { right: -20px; bottom: -100px; width: 200px; height: 200px; filter: blur(1.5rem);
}
}
@media screen and (min-width: 1201px) {
	.intv-top__img { width: calc(50% + 50vw - 400px); height: 480px; }
}



.person { position: relative; }/*TEMP*/
.person__inner { position: relative; display: block; z-index: 10; }
.person__sent { position: relative; }
.person__sent__who { color: #f5463c; }
.person__sent__who__num { display: inline-block; font-family: 'Playfair Display', serif; font-size: 12rem; font-weight: 400; font-style: italic; line-height: 1; letter-spacing: -0.02em; }
.person__sent__who__txt {  }
.person__sent__who__txt__name,
.person__sent__who__txt__occu { display: block; }
.person__sent__who__txt__name { margin-top: 6px; margin-bottom: 8px; font-size: 2.4rem; }
.person__sent__who__txt__name::after { content: "さん"; font-size: 1.2rem; }
.person__sent__who__txt__occu { font-size: 1.4rem; font-weight: 400; line-height: 1; }
.person__sent__txt { margin-top: 24px; }
.person__sent__txt p { display: inline-flex; align-items: center; height: 34px; background: #fff; padding: 0 5px; font: 300 2.2rem YakuHanMP_Noto, "Noto Serif JP", serif; line-height: 1; letter-spacing: 0.08em; }
.person__sent__txt p:not(:last-of-type) { margin-bottom: 6px; }

.person__sent__link { display: flex; justify-content: flex-end; align-items: center; margin-top: 24px; }
.person__sent__link__txt { margin-right: 32px; font-size: 1.4rem; font-weight: 700; line-height: 1; color: #353852; }
.person__sent__link__btn { position: relative; width: 75px; height: 75px; background: #fff; border-radius: 50%; }
.person__sent__link__btn::before { position: absolute; top: 50%; left: 50%; transform: translate(-35%, -50%); width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 14px; border-color: transparent transparent transparent #353852; content: ""; }


.person__image .image { position: relative; }

.person__image.js-scr .inview { opacity: 0; transition: 0.6s; }

.js-scr .inview::before,
.js-scr .inview::after { position: absolute; top: 0; right: 0; content: ""; width: 100%; height: 100%; }

.js-scr .inview::before { background: rgb(194,229,156); background: linear-gradient(90deg, rgba(194,229,156,1) 0%, rgba(100,179,244,1) 100%); }
.js-scr .inview::after { background-color: #fff; }

.person__image.js-scr.js-scr-active .inview { opacity: 1; }
.js-scr.js-scr-active .inview::after { width: 0; transition: 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); }
.js-scr.js-scr-active .inview::before { width: 0; transition: 0.6s 1s cubic-bezier(0.785, 0.135, 0.15, 0.86); }



.person--1 { padding-top: 80px; padding-bottom: 40px; }
.person--1 .person__image--2 { position: absolute; bottom: 204px; right: -30px; width: 120px; height: 120px; }

.person--2 { padding-bottom: 112px; }

.person::before { position: absolute; top: 0; display: block; height: 100%; background: #f5f5f5; content: ""; z-index: 0; mix-blend-mode: multiply; }
.person--1::before { left: -30px; width: calc(100% + 30px); }
.person--2::before { right: -30px; width: calc(100% - 20px); }



@media screen and (max-width: 374px) {
	.person__sent__txt p { font-size: 2.1rem; }
}
@media screen and (max-width: 680px) {
	.person__sent { margin-top: -77px; z-index: 50; }
	.person__image { position: relative; width: calc(100% + 30px); }
	.person--1 .person__image--1 { margin-left: -30px; }
	.person--2 .person__image { margin-right: -30px; }
	/*
	.person--1 .person__image--2.js-scr { right: 0; width: 90px; height: 120px; overflow: hidden; transition: 0.6s; }
	.person--1 .person__image--2.js-scr.js-scr-active { right: -30px; width: 120px; }
	*/
}
@media screen and (min-width: 681px) {
	
	
	.person__sent__who { position: relative; display: flex; align-items: center; padding-bottom: 16px; }
	.person__sent__who::before,
	.person__sent__who::after { position: absolute; bottom: 0; height: 1px; content: ""; }
	.person__sent__who::before { left: 0;  width: 100%; background: #f5463c; }
	.person__sent__who::after { left: 100%;  width: 100%; background: #4b4b73; }
	.person__sent__who__num { font-size: 18rem; font-weight: 400; }
	.person__sent__who__txt { position: relative; transform: translateY(30px); margin-left: 14px; }
	.person__sent__who__txt__name { margin-top: 0; margin-bottom: 16px; font-size: 2.8rem; }
	.person__sent__who__txt__name::after { font-size: 1.6rem; }
	.person__sent__who__txt__occu { font-size: 1.8rem; }
	.person__sent__txt { margin-top: 40px; }
	.person__sent__txt p { height: 40px; background: #fff; padding: 0 5px; font-size: 2.8rem; letter-spacing: 0.05em; }
	.person__sent__txt p:not(:last-of-type) { margin-bottom: 6px; }
	
	.person__sent__link { display: inline-flex; margin-top: 32px; }
	.person__sent__link__txt { color: #353852; transition: .4s; }
	.person__sent__link__btn { width: 85px; height: 85px; background: #fff; transition: .4s; transform-origin: center; }
	.person__sent__link__btn::before { border-width: 6px 0 6px 16px;  transition: .4s; }
	.person__inner:hover .person__sent__link__txt { color: #f5463c; }
	.person__inner:hover .person__sent__link__btn { transform: scale(0.7646); background: #f5463c; }
	.person__inner:hover .person__sent__link__btn::before { border-color: transparent transparent transparent #fff; }
	
	.person__image {  }
	.person__image .image::before { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; content: ""; box-shadow: 0px 0px 30px 0px rgba(0, 195, 206, 0.2); opacity: 0; transition: 0.6s; }
	.person__inner:hover .person__image .image::before { opacity: 1; }
	
	.person--1 { margin-top: 81px; padding-top: 120px; padding-bottom: 200px; }
	.person--1 .person__inner { text-align: right; }
	.person--1 .person__sent { display: inline-block; margin-top: -5px; margin-right: -43px; text-align: left; }
	.person--1 .person__image--1 { position: absolute; right: 300px; width: 700px; }
	.person--1 .person__image--1 .inview { height: 480px; overflow: hidden; }
	.person--1 .person__image--2 { bottom: -216px; left: -200px; right: auto; width: 200px; height: 200px; }
	.person--1 .person__sent__link { padding-left: 180px; }
	.person--1::before { left: 200px; width: 800px; }
	.person--1::after { position: absolute; top: 0; left: 0; display: block; width: 200px; height: 200px; background: #f5f5f5; content: ""; mix-blend-mode: multiply; }
	
	.person--1 .person__image--1.js-scr .inview::after {  }
	
	.person--2 { padding-top: 70px; padding-bottom: 200px; }
	.person--2 .person__sent { z-index: 50; }
	.person--2 .person__sent__who { flex-direction: row-reverse; justify-content: flex-end; }
	.person--2 .person__sent__who__txt { transform: translateY(30px); margin-left: 0; margin-right: 50px; }
	.person--2 .person__sent__who::before { width: 380px; }
	.person--2 .person__sent__who::after { left: auto; right: 100%; }
	.person--2 .person__image { position: absolute; top: -70px; right: -120px; width: 720px; height: 560px; }
	.person--2 .person__sent__link { padding-left: 160px; }
	.person--2::before { top: auto; bottom: 0; right: 400px; width: calc(50% + 50vw - 400px); height: 400px; mix-blend-mode: normal; z-index: 10; }
	.person--2 .person__inner { z-index: inherit; }
	
	
}
@media screen and (min-width: 1201px) {
	.person--1 .person__image--1 { width: calc(50% + 50vw - 300px); }
	.person--1::before { bottom: 0; width: calc(50% + 50vw - 200px); }
}


/*	Merit	*/
.sec--merit { position: relative; background: url("../img/home/bg_merit_sp.jpg") no-repeat center/cover; padding-top: 64px; padding-bottom: 64px; color: #fff; }
.sec--merit::before,
.sec--merit::after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; content: ""; }
.sec--merit::before { background: #4b4b73; opacity: 0.95; mix-blend-mode: multiply; z-index: 0; }
.sec--merit::after { left: 50%; transform: translateX(-50%); background: url("../common/img/bg_line.png") repeat 50% 50%/200px auto; z-index: 5; }

/*.sec--merit::before { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #4b4b73; content: ""; opacity: 0.95; mix-blend-mode: multiply; z-index: 9; }*/
.sec--merit .l-wrapper { position: relative; z-index: 10; }
.sec--merit .common-ttl__cross::before,
.sec--merit .common-ttl__cross::after { background: #fff; }
.merit__txt { margin-top: 18px; font-size: 1.5rem; font-weight: 700; line-height: 1.86666; letter-spacing: 0.03em; }
.merit__link { display: flex; justify-content: flex-end; align-items: center; margin-top: 26px; }
.merit__link__txt { margin-right: 32px; font-size: 1.4rem; font-weight: 700; line-height: 1; color: #fff; }
.merit__link__btn { position: relative; width: 75px; height: 75px; background: #fff; border-radius: 50%; }
.merit__link__btn::before { position: absolute; top: 50%; left: 50%; transform: translate(-35%, -50%); width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 14px; border-color: transparent transparent transparent #353852; content: ""; }

@media screen and (max-width: 680px) {
	.sec--merit::after { display: none; }
}
@media screen and (min-width: 681px) {
	.sec--merit { background-image: url("../img/home/bg_merit_pc.jpg"); }
	.merit { display: flex; justify-content: space-between; }
	.merit__txt { flex: 1; line-height: 2.1333; }
	
	.merit__link__txt { transition: .4s; }
	.merit__link__btn { width: 85px; height: 85px; background: #fff; transition: .4s; transform-origin: center; }
	.merit__link__btn::before { border-width: 6px 0 6px 16px;  transition: .4s; }
	.merit__link:hover .merit__link__txt { color: #f5463c; }
	.merit__link:hover .merit__link__btn { transform: scale(0.7646); background: #f5463c; }
	.merit__link:hover .merit__link__btn::before { border-color: transparent transparent transparent #fff; }
}


/*	Challenge	*/
@media screen and (min-width: 681px) {
	.sec--chl .common-ttl__main { letter-spacing: 0.03em; }
}


/*	borderLine 相殺用	*/
@media screen and (max-width: 1200px) {
	.borderLine { display: none; }
}
@media screen and (min-width: 1201px) {
	.borderLine::before,
	.borderLine::after { position: absolute; top: 0; bottom: 0; height: 100%; opacity: 1; }
	.borderLine::before { border-left: 1px solid #c8d2d7; }
	.borderLine::after { width: 1200px; border-left: 1px solid #c8d2d7; border-right: 1px solid #c8d2d7; }
	.borderLine::before,
	.borderLine::after { content: ""; position: absolute; top: 0; left: 50%; height: 100%; opacity: 1; transform: translateX(-50%); pointer-events: none; z-index: -1; }
	.borderLine__outer::before,
	.borderLine__inner::before,
	.borderLine__inner::after { position: absolute; top: 0; bottom: 0; height: 100%; opacity: 1; }
	.borderLine__outer::before { width: 1600px; }
	.borderLine__inner::before { width: 800px; }
	.borderLine__inner::after { width: 400px; }
	.borderLine__outer::before,
	.borderLine__inner::before,
	.borderLine__inner::after { content: ""; position: absolute; z-index: -1; top: 0; left: 50%; height: 100%; opacity: 1; border-right: 1px solid #c8d2d7; border-left: 1px solid #c8d2d7; transform: translateX(-50%); pointer-events: none; }
	
	
}






.sec--chl { padding-top: 64px; padding-bottom: 166px; }
.chl-wrap { margin-top: 33px; }
.chl { position: relative; display: inline-block; width: 275px; margin-left: 8px; margin-right: 8px; }
.chl__front,
.chl__back { display: block; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-duration: 1.5s; transition-property: transform, opacity; padding: 30px 0 27px; color: #fff; }
.chl__front { transform: rotateY(0deg); background: #f5f5f5; }
.chl__back { position: absolute; opacity: 0; top: 0px; left: 0px; width: 100%; height: 100%; background: #1e82a0; transform: rotateY(-180deg); }

.chl__occu { font-size: 2.0rem; font-weight: 700; line-height: 1; text-align: center; color: #1e82a0; }
.chl__occu--lsctrl { letter-spacing: -0.05em; }
.chl__img { display: flex; justify-content: center; margin-top: 24px; margin-bottom: 19px; }
.chl__img img { width: 158px; }
.chl__ttl { margin-left: 32px; margin-right: 32px; margin-bottom: 8px; font-size: 1.6rem; font-weight: 700; line-height: 1.625; color: #1e82a0; }
.chl__txt { margin-left: 32px; margin-right: 32px; font-size: 1.3rem; font-weight: 700; line-height: 1.84615; text-align: justify; color: #1e82a0; }


.chl-list .slick-dots { bottom: -46px; }
.chl-list .slick-dots li { width: 13px; height: 13px; margin: 0; }
.chl-list .slick-dots li:not(:last-child) { margin-right: 13px; }
.chl-list .slick-dots li button { width: 13px; height: 13px; }
.chl-list .slick-dots li button::before { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #1e82a0; content: ""; opacity: 1; }
.chl-list .slick-dots li.slick-active button::before { background: #1e82a0; }



@media screen and (max-width: 680px) {
	
}
@media screen and (min-width: 681px) {
	.sec--chl { padding-top: 88px; padding-bottom: 160px; }
	.chl-wrap { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; margin-top: 80px; }
	.chl { width: 288px; min-height: 320px; background: #f5f5f5; margin-left: 9px; margin-right: 9px; }
	.chl__front .chl__ttl,
	.chl__front .chl__txt { display: none; }
	.chl__front,
	.chl__back { padding: 40px 0 21px; }
	.chl__img { margin-top: 40px; }
	.chl__back .chl__occu,
	.chl__back .chl__ttl,
	.chl__back .chl__txt { color: #fff; }
	.chl__back .chl__ttl { margin-top: 18px; margin-bottom: 12px; }
	.chl__back .chl__txt { font-size: 1.4rem; line-height: 1.85714; }
	
	.chl:hover > .chl__front { transform: rotateY(180deg); }
	.chl:hover > .chl__back { opacity: 1; transform: rotateY(0deg); }
	
	.chl-list .slick-dots { bottom: -54px; }
	.chl-list .slick-dots li { width: 15px; height: 15px; }
	.chl-list .slick-dots li:not(:last-child) { margin-right: 15px; }
	.chl-list .slick-dots li button { width: 15px; height: 15px; }
	.chl-list .slick-dots li button::before { width: 13px; height: 13px; }
	
}



















/**************************************************
		Animations
**************************************************/
@keyframes fadeInOut {
	0% { opacity: 0;}
	20% { opacity: 1;}
	80% { opacity: 1;}
	100% { opacity: 0;}
}
@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@-webkit-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}