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

/*mainimgarea（ファーストビュー）*/
/* top-1.jpg : 左に白フェードが入った合成画像。PCは背面に敷き、SPはテキストの下に置く */
.mainimgarea {position:relative;width:100%;height:90vh;overflow:hidden;background:#fff;z-index:5000;margin-top:10vh;}

.mainimgarea .fvphoto {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}
.mainimgarea .fvphoto img {width:100%;height:100%;object-fit:cover;object-position:center right;display:block;}
.mainimgarea .fvphoto::after {content:"";position:absolute;top:0;left:0;width:100%;height:100%;
	background:linear-gradient(90deg,#fff 0%,#fff 22%,rgba(255,255,255,0.78) 34%,rgba(255,255,255,0) 50%);}

.mainimgarea .mainimg {position:relative;z-index:10;width:58vw;padding:8vh 3vw 6vh 6vw;}

/* 見出し上のラベル（オレンジの罫＋小さな文字） */
.mainimgarea .fvlabel {display:flex;align-items:center;gap:0.9vw;margin-bottom:1.6vh;}
.mainimgarea .fvlabel::before {content:"";display:block;width:2.2vw;height:2px;background:#f2600a;flex:none;}
.mainimgarea .fvlabel span {font-size:1.05vw;font-weight:bold;color:#1d2126;letter-spacing:0.02em;}

.mainimgarea .mainimg h1 {font-size:4.0vw;line-height:1.34;letter-spacing:-0.025em;color:#14171a;font-weight:900;margin-bottom:2.4vh;}
.mainimgarea .mainimg h2 {font-size:2.0vw;line-height:1.5;color:#14171a;font-weight:bold;margin-bottom:1.4vh;}

.mainimgarea .catcharea {padding:0 0 3.4vh 0;}
.mainimgarea .catcharea p {font-size:1.15vw;line-height:1.85;color:#5b636b;background:none;padding:0;display:block;}

.mainimgarea .maincta {text-align:left;display:flex;flex-wrap:wrap;gap:1.2vw;}
.mainimgarea .maincta .btn {font-size:1.25vw;font-weight:bold;padding:1.35vh 2.4vw;border-radius:0.6vw;margin:0;
	display:inline-flex;align-items:center;gap:1.1vw;transition:0.2s;}
.mainimgarea .maincta .btn::after {content:"→";font-size:1.1em;line-height:1;}
.mainimgarea .maincta .btn.contact {border:solid #fa7014 2px;background:#fa7014;color:#fff;}
.mainimgarea .maincta .btn.contact:hover {border:solid #e05f08 2px;background:#e05f08;color:#fff;text-decoration:none;}
.mainimgarea .maincta .btn.overview {border:solid #d5d9dd 2px;background:rgba(255,255,255,0.92);color:#14171a;}
.mainimgarea .maincta .btn.overview:hover {border:solid #14171a 2px;background:#fff;color:#14171a;text-decoration:none;}

/* 右側の流れカード（話す→記事→note→SNS）
   ヘッダー高を除いた 90vh に必ず収まるよう、寸法は min(vw, vh) で指定する。
   横に広く縦が短いウィンドウでも下が切れない。 */
.fvflow {position:absolute;z-index:20;right:2.2vw;top:50%;transform:translateY(-50%);
	width:min(18vw, 34vh);max-height:82vh;}
.fvflow .fvcard {background:#fff;border-radius:min(0.8vw,1.4vh);box-shadow:0 min(0.5vw,0.9vh) min(1.5vw,2.6vh) rgba(20,23,26,0.13);
	padding:min(0.9vw,1.6vh) min(1.05vw,1.9vh);}
.fvflow .fvcard .fvcardhead {display:flex;align-items:center;gap:min(0.7vw,1.2vh);margin-bottom:min(0.5vw,0.9vh);}
.fvflow .fvcard .fvicon {width:min(2.2vw,3.9vh);height:min(2.2vw,3.9vh);border-radius:50%;background:#fa7014;flex:none;
	display:flex;align-items:center;justify-content:center;}
.fvflow .fvcard .fvicon svg {width:min(1.2vw,2.1vh);height:min(1.2vw,2.1vh);fill:#fff;}
.fvflow .fvcard .fvwave {display:flex;align-items:center;gap:min(0.16vw,0.28vh);height:min(1.5vw,2.6vh);}
.fvflow .fvcard .fvwave i {display:block;width:min(0.16vw,0.28vh);background:#fa7014;border-radius:0.1vw;}
.fvflow .fvcard b {display:block;font-size:min(1.0vw,1.8vh);color:#14171a;line-height:1.5;}
.fvflow .fvcard p {font-size:min(0.78vw,1.4vh);line-height:1.55;color:#6b737b;margin-top:min(0.25vw,0.45vh);}
.fvflow .fvcard .fvlines {margin-top:min(0.6vw,1.05vh);}
.fvflow .fvcard .fvlines span {display:block;height:min(0.38vw,0.67vh);background:#eceff2;border-radius:0.2vw;
	margin-bottom:min(0.3vw,0.53vh);}
.fvflow .fvcard .fvlines span:nth-child(2) {width:82%;}
.fvflow .fvcard .fvlines span:nth-child(3) {width:60%;}
.fvflow .fvarrow {text-align:center;color:#fa7014;font-size:min(1.0vw,1.8vh);line-height:1;padding:min(0.4vw,0.7vh) 0;}

/*SP*/
@media (max-width: 896px){
	.mainimgarea {height:auto;display:flex;flex-direction:column;}
	.mainimgarea .mainimg {order:1;}
	.mainimgarea .fvphoto {order:2;}
	.fvflow {order:3;}
	.mainimgarea .mainimg {width:100%;padding:5vh 6vw 4vh 6vw;}
	.mainimgarea .fvlabel {gap:2.5vw;margin-bottom:1.5vh;}
	.mainimgarea .fvlabel::before {width:6vw;}
	.mainimgarea .fvlabel span {font-size:0.95rem;}
	.mainimgarea .mainimg h1 {font-size:2.1rem;line-height:1.4;margin-bottom:2vh;}
	.mainimgarea .mainimg h2 {font-size:1.25rem;margin-bottom:1vh;}
	.mainimgarea .catcharea {padding:0 0 2.5vh 0;}
	.mainimgarea .catcharea p {font-size:0.95rem;}
	.mainimgarea .maincta {display:block;padding:0;}
	.mainimgarea .maincta .btn {font-size:1.1rem;width:100%;text-align:center;justify-content:center;gap:1rem;
		padding:1.1rem 0;border-radius:0.5rem;margin-bottom:0.6rem;}

	.mainimgarea .fvphoto {position:relative;width:100%;height:32vh;}
	.mainimgarea .fvphoto img {height:100%;object-fit:cover;object-position:68% center;}
	.mainimgarea .fvphoto::after {display:none;}

	.fvflow {position:relative;right:auto;top:auto;transform:none;width:100%;max-height:none;padding:4vh 6vw 2vh 6vw;}
	.fvflow .fvcard {border-radius:0.6rem;padding:1rem;box-shadow:0 0.3rem 1rem rgba(20,23,26,0.12);}
	.fvflow .fvcard .fvcardhead {gap:0.6rem;margin-bottom:0.3rem;}
	.fvflow .fvcard .fvicon {width:2.2rem;height:2.2rem;}
	.fvflow .fvcard .fvicon svg {width:1.1rem;height:1.1rem;}
	.fvflow .fvcard .fvwave {height:1.4rem;gap:0.12rem;}
	.fvflow .fvcard .fvwave i {width:0.14rem;border-radius:0.1rem;}
	.fvflow .fvcard b {font-size:1.0rem;}
	.fvflow .fvcard p {font-size:0.8rem;margin-top:0.2rem;}
	.fvflow .fvcard .fvlines {margin-top:0.5rem;}
	.fvflow .fvcard .fvlines span {height:0.35rem;margin-bottom:0.25rem;}
	.fvflow .fvarrow {font-size:1rem;padding:0.4rem 0;}
}

/* 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 .boxicon {width:4.2rem;height:4.2rem;border-radius:50%;background:#fa7014;
	display:flex;align-items:center;justify-content:center;margin:0 auto 1.4rem;}
.contents01 .collist .boxicon svg {width:2.1rem;height:2.1rem;fill:#fff;}
.contents01 .collist h3 {font-size:1.7rem;line-height:1.5;margin-bottom:0.9rem;color:#14171a;font-weight:bold;}
.contents01 .collist p {font-size:1.25rem;line-height:1.85;color:#4a525a;text-align:left;}
.contents01 p.text-center {padding-top:3rem;}
/*SP*/
@media (max-width: 896px){
	.contents01 .textbox {padding-bottom:3rem;}
	.contents01 .textbox p {width:100%;}
	.contents01 .collist .boxicon {width:3.6rem;height:3.6rem;margin-bottom:1rem;}
	.contents01 .collist .boxicon svg {width:1.8rem;height:1.8rem;}
	.contents01 .collist h3 {font-size:1.35rem;}
	.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-8.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);}
.contents02 .image.image05 {background-image:url(../img/top/top-7.jpg);}
.contents02 .image.image06 {background-image:url(../img/top/top-8.jpg);}
/*SP*/
@media (max-width: 896px){
	.contents02 .inner .box {padding:5vh 5vw;}
	.contents02 .image {min-height:50vw;}
}

/*faqarea TOP用*/
/**************************************** 新着コラム ****************************************/
.newsarea {background:#fff;}
.newsarea .heading {text-align:center;padding:5vw 5vw 2vw;}
.newsarea .heading h2 {font-size:3.5rem;margin-bottom:0.5em;}
.newsarea .heading p {font-size:1.4rem;color:#333;margin-bottom:0;}

.newslist {width:65vw;max-width:100%;margin:0 auto;padding:0 0 3vw;}
.newscard {border-bottom:solid #e5e5e5 1px;}
.newscard:first-child {border-top:solid #e5e5e5 1px;}
.newscard > a {display:flex;align-items:center;gap:2rem;padding:1.6rem 0.5rem;text-decoration:none;color:#14171a;transition:0.2s;}
.newscard > a:hover {background:#fafafa;text-decoration:none;}
.newscard .thumb {flex:0 0 12rem;height:8rem;overflow:hidden;border-radius:0.4rem;background:#eee;display:block;}
.newscard .thumb img {width:100%;height:100%;object-fit:cover;display:block;}
.newscard .body {display:block;flex:1 1 auto;min-width:0;}
.newscard .meta {display:block;font-size:1.0rem;color:#666;margin-bottom:0.4em;}
.newscard .meta .cat {margin-left:1rem;padding:0.2em 0.8em;border:solid #ccc 1px;border-radius:2rem;font-size:0.95rem;}
.newscard .ttl {display:block;font-size:1.4rem;font-weight:bold;line-height:1.5em;}
.newscard > a:hover .ttl {color:#fa7014;}

.newsarea .catlinks {display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;padding:0 5vw 5vw;}
.newsarea .catlinks a.btn {font-size:1.0rem;padding:0.9em 2em;}

/*SP*/
@media (max-width: 896px){
	.newsarea .heading h2 {font-size:2.1rem;}
	.newslist {width:100%;padding:0 5vw 5vh;}
	.newscard > a {gap:1.2rem;padding:1.2rem 0;align-items:flex-start;}
	.newscard .thumb {flex:0 0 8rem;height:6rem;}
	.newscard .ttl {font-size:1.2rem;}
	.newsarea .catlinks {gap:0.6rem;padding:0 5vw 8vh;}
	.newsarea .catlinks a.btn {width:100%;text-align:center;}
}

.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:#39a8e1;}
.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;}
}