/* TOP専用CSS（LP構成・ESV流） */
/* 使用画像: top-1.jpg〜top-6.jpg (img/top/), icon01〜03.svg, more.svg */

/**************************************** メインビジュアル ****************************************/
.mainimgarea {position:relative;width:100%;height:100vh;overflow:hidden;background:#111;}
.mainimgarea .bgcover {position:absolute;top:0px;left:0px;width:100%;height:100%;
	background:#111 url(../img/top/top-1.jpg) no-repeat center center;background-size:cover;
	transform:scale(1.0);}
.mainimgarea.on .bgcover {transform:scale(1.12);transition:20s;}
.mainimgarea .cover {position:absolute;top:0px;left:0px;width:100%;height:100%;
	background:linear-gradient(100deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.52) 45%, rgba(0,0,0,0.28) 100%);}

.mainimgarea .mainimg {position:absolute;top:50%;left:6vw;width:62vw;transform:translateY(-50%);z-index:100;}
.mainimgarea .mainimg h2 {font-size:1.1rem;color:#e8b98a;letter-spacing:0.22em;margin-bottom:1.8em;
	opacity:0;transform:translateY(2vh);}
.mainimgarea.on .mainimg h2 {opacity:1;transform:translateY(0);transition:1.4s 0.2s;}
.mainimgarea .mainimg h1 {font-size:4.6rem;color:#fff;line-height:1.35em;font-weight:normal;letter-spacing:0.02em;
	margin-bottom:0.5em;opacity:0;transform:translateY(3vh);}
.mainimgarea.on .mainimg h1 {opacity:1;transform:translateY(0);transition:1.6s 0.5s;}
.mainimgarea .mainimg .lead {font-size:1.1rem;color:#eee;line-height:2.2em;margin-bottom:2.5em;
	opacity:0;transform:translateY(3vh);}
.mainimgarea.on .mainimg .lead {opacity:1;transform:translateY(0);transition:1.6s 0.9s;}

.mainimgarea .maincta {opacity:0;transform:translateY(3vh);}
.mainimgarea.on .maincta {opacity:1;transform:translateY(0);transition:1.6s 1.3s;}
.mainimgarea .maincta a.btn {margin-right:0.5rem;margin-top:0;}
.mainimgarea .maincta a.btn.overview {background:none;border:solid #fff 0.1rem;color:#fff;}
.mainimgarea .maincta a.btn.overview:hover {background:#fff;color:#111;}
.mainimgarea .maincta a.btn.contact {background:#e8833a;border:solid #e8833a 0.1rem;color:#fff;}
.mainimgarea .maincta a.btn.contact:hover {background:#fff;border:solid #fff 0.1rem;color:#e8833a;}

/*右下：料金の常設表記*/
.mainimgarea .pricenote {position:absolute;bottom:6vh;right:5vw;z-index:100;text-align:right;
	border-right:solid #e8833a 2px;padding-right:1.5vw;opacity:0;}
.mainimgarea.on .pricenote {opacity:1;transition:2s 1.6s;}
.mainimgarea .pricenote dt {font-size:0.75rem;color:#e8b98a;letter-spacing:0.2em;margin-bottom:0.6em;}
.mainimgarea .pricenote dd {font-size:1.0rem;color:#fff;line-height:1.9em;}
.mainimgarea .pricenote dd small {font-size:0.75rem;color:#bbb;}

/*スクロール誘導*/
.mainimgarea .more {position:absolute;bottom:0;left:6vw;z-index:100;width:1px;height:8vh;background:rgba(255,255,255,0.3);overflow:hidden;}
.mainimgarea .more:after {content:"";position:absolute;top:0;left:0;width:1px;height:3vh;background:#e8833a;
	animation:scrolline 2.4s cubic-bezier(0.6,0,0.4,1) infinite;}
@keyframes scrolline { 0% {transform:translateY(-3vh);} 100% {transform:translateY(8vh);} }

/*SP*/
@media (max-width: 896px){
	/* コンテンツ量に応じて伸びるようにし、固定ヘッダー(10vh)と重ならないよう上に余白を取る */
	.mainimgarea {height:auto;min-height:100vh;display:flex;align-items:center;padding:15vh 6vw 10vh 6vw;}
	.mainimgarea .cover {background:linear-gradient(rgba(0,0,0,0.74),rgba(0,0,0,0.58));}
	.mainimgarea .mainimg {position:relative;top:auto;left:auto;transform:none;width:100%;}
	.mainimgarea .mainimg h2 {font-size:1.05rem;letter-spacing:0.12em;margin-bottom:1.5em;line-height:1.7em;}
	.mainimgarea .mainimg h1 {font-size:2.3rem;line-height:1.4em;}
	.mainimgarea .mainimg .lead {font-size:1.15rem;line-height:1.9em;}
	.mainimgarea .maincta a.btn {display:block;width:100%;margin-right:0;margin-bottom:0.4rem;}
	.mainimgarea .pricenote {display:none;}
	.mainimgarea .more {display:none;}
}

/**************************************** 要点カプセル ****************************************/
.summaryarea {padding:10vh 5vw;background:#fff;}
.summaryarea .content {width:62vw;max-width:100%;margin:0 auto;}
.summaryarea .capsule {margin-bottom:0;background:#f2f2f2;}
/*SP*/
@media (max-width: 896px){
	.summaryarea {padding:6vh 5vw;}
	.summaryarea .content {width:100%;}
}

/**************************************** パララックス帯（課題提起／余韻） ****************************************/
.parallaxarea {position:relative;overflow:hidden;}
.parallaxarea .bgcover {position:absolute;top:0px;left:0px;width:100%;height:100%;
	background-color:#111;background-repeat:no-repeat;background-position:center center;background-size:cover;
	background-attachment:fixed;}
/* 背景写真が明るい場合でも白文字が読めるよう、スクリムは濃いめに固定する */
.parallaxarea .cover {position:absolute;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,0.74);opacity:0.45;}
.parallaxarea.on .cover {opacity:1;transition:5s;}
.parallaxarea .textbox {position:relative;z-index:10;}
.parallaxarea .heading h2, .parallaxarea h2 {color:#fff;}
.parallaxarea p {color:#eee;}
.parallaxarea .src {color:rgba(255,255,255,0.6);}
.parallaxarea .src a {color:rgba(255,255,255,0.6);}

/*課題提起の数値*/
.problemarea .datahi {text-align:center;padding:6vh 0 2vh 0;}
.problemarea .datahi .num {font-size:7rem;line-height:1.1em;color:#e8833a;font-weight:normal;letter-spacing:0.02em;}
.problemarea .datahi .cap {font-size:1.05rem;color:#fff;line-height:2.2em;margin-top:1.5em;}
.problemarea .plist {display:flex;flex-wrap:wrap;margin:5vh 0 3vh 0;}
.problemarea .plist .p {width:50%;padding:1.4em 1.5em;font-size:0.95rem;line-height:1.8em;color:#fff;
	border-top:solid rgba(255,255,255,0.2) 1px;}
.problemarea .plist .p:before {content:"";display:inline-block;width:0.8em;height:1px;background:#e8833a;
	vertical-align:middle;margin-right:0.8em;}
/*SP*/
@media (max-width: 896px){
	.parallaxarea .bgcover {background-attachment:scroll;}
	.problemarea .datahi .num {font-size:3.6rem;}
	.problemarea .datahi .cap {font-size:1.15rem;line-height:2.0em;text-align:left;}
	.problemarea .plist {display:block;margin:4vh 0 2vh 0;}
	.problemarea .plist .p {width:100%;font-size:1.15rem;padding:1.2em 0;}
}

/**************************************** 概念セクション（3カラム） ****************************************/
.conceptarea {background:#fff;}
.conceptarea .collist {margin-top:2vh;}
.conceptarea .collist .inner {padding:0 2vw;border-left:solid #eee 1px;}
.conceptarea .collist .inner:first-child {border-left:none;}
.conceptarea .collist img {width:4vw;margin-bottom:2em;}
.conceptarea .collist h3 {font-size:1.4rem;margin-bottom:1em;line-height:1.6em;}
.conceptarea .collist p {font-size:0.95rem;}
/*SP*/
@media (max-width: 896px){
	.conceptarea .collist .inner {padding:4vh 0;border-left:none;border-top:solid #eee 1px;}
	.conceptarea .collist .inner:first-child {border-top:none;padding-top:0;}
	.conceptarea .collist img {width:14vw;margin-bottom:1.5em;}
	.conceptarea .collist h3 {font-size:1.4rem;}
	.conceptarea .collist p {font-size:1.15rem;}
}

/**************************************** 3ステップ ****************************************/
.steparea {background:#f2f2f2;}
.steparea .steplist {display:flex;flex-wrap:wrap;margin-top:2vh;}
.steparea .steplist .st {width:33.3%;padding:0 2vw;position:relative;}
.steparea .steplist .st:before {content:"";position:absolute;top:0;left:0;width:1px;height:100%;background:#ddd;}
.steparea .steplist .st:first-child:before {display:none;}
.steparea .steplist .st .no {font-size:0.75rem;color:#e8833a;letter-spacing:0.25em;display:block;margin-bottom:1.5em;}
.steparea .steplist .st h3 {font-size:1.8rem;margin-bottom:1em;}
.steparea .steplist .st p {font-size:0.95rem;}
/*SP*/
@media (max-width: 896px){
	.steparea .steplist {display:block;}
	.steparea .steplist .st {width:100%;padding:4vh 0;border-top:solid #ddd 1px;}
	.steparea .steplist .st:before {display:none;}
	.steparea .steplist .st:first-child {border-top:none;padding-top:0;}
	.steparea .steplist .st .no {font-size:1.0rem;}
	.steparea .steplist .st h3 {font-size:1.6rem;}
	.steparea .steplist .st p {font-size:1.15rem;}
}

/**************************************** 交互ブロック（画像55% / テキスト45%） ****************************************/
.itemarea {background:#fff;}
.itemarea .item {display:flex;flex-wrap:wrap;}
.itemarea .item.reverse {flex-direction:row-reverse;}
.itemarea .item .image {width:55%;min-height:70vh;
	background-repeat:no-repeat;background-position:center center;background-size:cover;}
.itemarea .item .textbox {width:45%;padding:10vh 5vw;display:flex;flex-direction:column;justify-content:center;}
.itemarea .item h3 {font-size:0.8rem;color:#e8833a;letter-spacing:0.2em;margin-bottom:1.5em;}
.itemarea .item h2 {font-size:2.4rem;line-height:1.45em;margin-bottom:0.8em;}
.itemarea .item p {font-size:0.98rem;}
.itemarea .item a.btn {align-self:flex-start;}
/*SP*/
@media (max-width: 896px){
	.itemarea .item {display:block;}
	.itemarea .item .image {width:100%;min-height:32vh;}
	.itemarea .item .textbox {width:100%;padding:6vh 6vw;display:block;}
	.itemarea .item h3 {font-size:1.0rem;}
	.itemarea .item h2 {font-size:1.7rem;}
	.itemarea .item p {font-size:1.15rem;}
}

/**************************************** 実証データ ****************************************/
.proofarea {background:#f2f2f2;}

/**************************************** 比較 ****************************************/
.comparearea {background:#fff;}

/**************************************** 料金 ****************************************/
.pricearea {background:#f2f2f2;}
.pricearea .pricegrid {display:flex;flex-wrap:wrap;margin:2vh 0 5vh 0;}
.pricearea .pricegrid .pricecard {width:50%;background:#fff;padding:6vh 3vw;border-right:solid #f2f2f2 0.5rem;}
.pricearea .pricegrid .pricecard:last-child {border-right:none;border-left:solid #f2f2f2 0.5rem;}
.pricearea .pricecard .ttl {font-size:0.8rem;color:#e8833a;letter-spacing:0.2em;margin-bottom:1.8em;}
.pricearea .pricecard .amount {font-size:3.6rem;line-height:1.1em;letter-spacing:0.01em;}
.pricearea .pricecard .amount .unit {font-size:1.3rem;}
.pricearea .pricecard .tax {font-size:0.8rem;color:#888;margin-top:1em;}
.pricearea .pricecard p {font-size:0.95rem;margin-top:2em;}
/*SP*/
@media (max-width: 896px){
	.pricearea .pricegrid {display:block;}
	.pricearea .pricegrid .pricecard {width:100%;padding:5vh 6vw;border-right:none;margin-bottom:0.5rem;}
	.pricearea .pricegrid .pricecard:last-child {border-left:none;}
	.pricearea .pricecard .ttl {font-size:1.0rem;}
	.pricearea .pricecard .amount {font-size:2.8rem;}
	.pricearea .pricecard p {font-size:1.15rem;}
}

/**************************************** FAQ ****************************************/
.faqarea {background:#fff;}
.faq {border-bottom:solid #ddd 1px;padding:0;}
.faq > summary {cursor:pointer;list-style:none;font-size:1.1rem;line-height:1.7em;padding:2.2em 3em 2.2em 0;
	position:relative;transition:0.3s;}
.faq > summary::-webkit-details-marker {display:none;}
.faq > summary::after {content:"";position:absolute;right:1em;top:50%;margin-top:-1px;width:0.9em;height:1px;background:#111;}
.faq > summary span.pm {position:absolute;right:1em;top:50%;margin-top:-1px;width:0.9em;height:1px;background:#111;
	transform:rotate(90deg);transition:0.3s;}
.faq[open] > summary span.pm {transform:rotate(0deg);}
.faq > summary:hover {color:#c0632a;}
.faq .answer {padding:0 3em 2.5em 0;}
.faq .answer p {font-size:0.95rem;color:#444;}
/*SP*/
@media (max-width: 896px){
	.faq > summary {font-size:1.2rem;padding:1.8em 2.5em 1.8em 0;}
	.faq .answer {padding:0 0 2em 0;}
	.faq .answer p {font-size:1.15rem;}
}