/* TOP専用CSS */
/* 使用画像: top-1.jpg〜top-6.jpg (img/top/), icon01.svg, check.svg */

/*mainimgarea*/
.mainimgarea {position:relative;width:100%;height:90vh;overflow:hidden;background:#1a1a2e;z-index:5000;margin-top:10vh;}
/* top-1.jpg : TOPページメインビジュアル */
.mainimgarea .bgcover {position:absolute;top:0px;left:0px;width:100%;height:100%;
	background:#1a1a2e url(../img/top/top-1.jpg) no-repeat center center;background-size:cover;opacity:0.6;}
.mainimgarea .mainimg {position:relative;z-index:1000;padding:5vw 10vw;}
.mainimgarea .mainimg h2 {font-size:2.2vw;color:#fff;}
.mainimgarea .mainimg h1 {font-size:4.6vw;color:#fff;line-height:1.2;margin-bottom:0.3em;}
.mainimgarea .catcharea {padding:1.5vw 0;}
.mainimgarea .catcharea p {font-size:2.2vw;font-weight:bold;color:#fff;padding-left:1.5em;padding-right:1.0em;display:inline-block;
	background:url(../img/top/check.svg) no-repeat left center;background-size:auto 1em;}

/*キャンペーン帯*/
.mainimgarea .campaign-bar {display:inline-block;background:#e06000;color:#fff;font-weight:bold;
	font-size:1.6vw;padding:0.5em 1.6em;border-radius:2em;margin-bottom:1vw;box-shadow:0 3px 12px rgba(0,0,0,0.3);}
.mainimgarea .campaign-bar .strike {color:#ffd9bb;}

.mainimgarea .maincta {text-align:left;}
.mainimgarea .maincta .btn {font-size:1.4rem;border-radius:3rem;margin:0 1rem 0 0;}
.mainimgarea .maincta .btn.contact {border:solid #e06000 2px;background:#e06000;color:#fff;}
.mainimgarea .maincta .btn.overview {border:solid #1a3470 2px;background:#1a3470;color:#fff;}
.mainimgarea .maincta .btn.contact:hover {border:solid #e06000 2px;color:#e06000;background:#fff;}
.mainimgarea .maincta .btn.overview:hover {border:solid #1a3470 2px;color:#1a3470;background:#fff;}

/*SP*/
@media (max-width: 896px){
	.mainimgarea {height:auto;}
	.mainimgarea .mainimg {text-align:center;padding:6vh 5vw 4vh 5vw;}
	.mainimgarea .campaign-bar {font-size:1.1rem;margin-bottom:2rem;}
	.mainimgarea .mainimg h2 {font-size:1.4rem;}
	.mainimgarea .mainimg h1 {font-size:8vw;margin-bottom:2rem;}
	.mainimgarea .catcharea {margin-bottom:2rem;}
	.mainimgarea .catcharea p {font-size:1.6rem;display:block;text-align:left;padding:0.7rem 0.5rem 0.7rem 4.5rem;
		background-position:left 1.5rem center;background-color:rgba(0,0,0,0.4);
		border:solid rgba(255,255,255,0.3) 1px;margin:0 0 0.2rem 1.5rem;}
	.mainimgarea .maincta {padding:0 10vw;}
	.mainimgarea .maincta .btn {font-size:1.2rem;padding:1.5rem 0rem;width:100%;text-align:center;margin-bottom:0.3rem;}
}

/* top-2.jpg : contents01セクション背景 */
.contents01 {background:#fff url(../img/top/top-2.jpg) no-repeat center center;background-size:cover;background-attachment:fixed;position:relative;}
.contents01 .cover {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,1.0);opacity:0.3;}
.contents01.on .cover {opacity:0.7;transition:5s;}
.contents01 .innerwrap {position:relative;z-index:100;}
.contents01 .textbox {padding-bottom:3rem;text-align:center;}
.contents01 .textbox p {}
.contents01 .collist .inner {text-align:center;padding:0.5rem;}
.contents01 .collist .inner .box {background:#fff;border-radius:1rem;padding:3rem;box-shadow:0 0 10px rgba(0,0,0,0.2);height:100%;}
.contents01 .collist img {width:5vw;margin-bottom:1rem;display:none;}
.contents01 .collist h3 {font-size:3rem;margin-bottom:1rem;color:#113083;}
.contents01 .collist p {font-size:1.4rem;}
.contents01 p.text-center {padding-top:3rem;}
/*SP*/
@media (max-width: 896px){
	.contents01 .textbox {padding-bottom:3rem;}
	.contents01 .textbox p {width:100%;}
	.contents01 .collist img {width:20vw;}
	.contents01 .collist p {text-align:left;}
}

.contentwrap {}
.contents02 {}
.contents02 .inner {}
.contents02 .inner .box {padding:5vw;}
.contents02 .inner h2 {font-size:2.4rem;margin-bottom:0em;line-height:1.3em;}
.contents02 .inner h3 {font-size:1.6rem;margin-top:0.5em;}
.contents02 .inner p {font-size:1.4rem;margin-top:1.0em;}
.contents02 .image {background-repeat:no-repeat;background-position:center center;background-size:cover;min-height:50vh;}
/* top-3.jpg〜top-6.jpg : TOPページ各セクションの背景画像 */
.contents02 .image.image01 {background-image:url(../img/top/top-3.jpg);}
.contents02 .image.image02 {background-image:url(../img/top/top-4.jpg);}
.contents02 .image.image03 {background-image:url(../img/top/top-5.jpg);}
.contents02 .image.image04 {background-image:url(../img/top/top-6.jpg);}
/*SP*/
@media (max-width: 896px){
	.contents02 .inner .box {padding:5vh 5vw;}
	.contents02 .image {min-height:50vw;}
}

/*TOPの3時間ステップ*/
.stepwrap {background:#1a3470;padding:6vw 5vw;}
.stepwrap .heading {text-align:center;margin-bottom:3rem;}
.stepwrap .heading h2 {font-size:3.5rem;color:#fff;margin-bottom:0.5em;}
.stepwrap .heading p {font-size:1.4rem;color:#dfe4f2;}
.steplist {display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;max-width:80vw;margin:0 auto;}
.stepitem {flex:1;min-width:220px;background:#fff;border-radius:1rem;padding:2.5rem 2rem;text-align:center;position:relative;}
.stepitem .num {display:inline-block;background:#e06000;color:#fff;font-weight:bold;font-size:1.2rem;
	width:2.6em;height:2.6em;line-height:2.6em;border-radius:50%;margin-bottom:1rem;}
.stepitem h3 {font-size:1.6rem;color:#1a3470;margin-bottom:0.6em;}
.stepitem p {font-size:1.2rem;color:#333;line-height:1.7em;}
/*SP*/
@media (max-width: 896px){
	.stepwrap .heading h2 {font-size:2.1rem;}
	.steplist {max-width:100%;flex-direction:column;}
	.stepitem {min-width:0;}
}

/*TOP料金ブロック*/
.pricewrap {background:#fff8f2;padding:6vw 5vw;text-align:center;}
.pricewrap h2 {font-size:3.5rem;color:#1a1a2e;margin-bottom:1rem;}
.pricebox {display:inline-block;background:#fff;border:solid #e06000 3px;border-radius:1.5rem;padding:3rem 5rem;box-shadow:0 4px 16px rgba(0,0,0,0.08);}
.pricebox .campaign-badge {margin-bottom:1.5rem;}
.pricebox .price-normal {font-size:1.4rem;color:#666;margin-bottom:0.3rem;}
.pricebox .price-now {font-size:2.0rem;color:#1a1a2e;font-weight:bold;margin-bottom:0.5rem;}
.pricebox .price-now b {font-size:4.5rem;color:#e06000;}
.pricebox .price-note {font-size:1.1rem;color:#888;margin-bottom:2rem;}
.pricewrap .price-cta {margin-top:1rem;}
/*SP*/
@media (max-width: 896px){
	.pricewrap h2 {font-size:2.1rem;}
	.pricebox {padding:2.5rem 2rem;width:100%;}
	.pricebox .price-now b {font-size:3.5rem;}
}

/*faqarea TOP用*/
.faqwrap {background:#eee;}
.faqwrap .heading {text-align:center;padding:5vw 5vw 2vw;}
.faqwrap .heading h2 {font-size:3.5rem;margin-bottom:0.5em;}
.faqwrap .heading p {font-size:1.4rem;color:#333;margin-bottom:0;}
.faqarea {padding:0 5vw 5vw;}
.faq {background:#fff;border-radius:1rem;padding:2rem 5rem;margin-bottom:0.5rem;}
.faq > summary {cursor: pointer;list-style: none;font-size:1.4rem;font-weight:bold;color:#1a3470;}
.faq > summary::-webkit-details-marker {display: none;}
.faq > summary::after {content: "+";float: right;}
.faq[open] > summary::after {content: "−";}
.faq .answer {margin-top:1rem;}
.faq .answer p {font-size:1.2rem;font-weight:normal;color:#333;}
/*SP*/
@media (max-width: 896px){
	.faqwrap .heading h2 {font-size:2.1rem;}
	.faqarea .faq {padding:15px;}
	.faqarea .faq summary {font-size:1.2rem;}
}