/* TOP専用CSS
   ・ファーストビュー（.herowrap）……支給モックアップ準拠
   ・それ以降のセクション ……………… 参考サイト（esv）の設計言語準拠
*/

/*==================== ファーストビュー ====================*/
.herowrap {position:relative;margin-top:10vh;overflow:hidden;
	background:linear-gradient(180deg,#eaf3fb 0%,#f4f9fd 55%,#ffffff 100%);}

/* 背景写真（右側にビジネスパーソン＋街） */
.herowrap .herobg {position:absolute;top:0;right:0;width:66%;height:100%;
	background:url(../img/top/hero.jpg) no-repeat center right;background-size:cover;}
/* 左から白へのフェード（テキストの可読性を確保） */
.herowrap .herobg::after {content:"";position:absolute;inset:0;
	background:linear-gradient(90deg,#eef5fb 0%,rgba(238,245,251,0.75) 18%,rgba(238,245,251,0) 45%);}

.herowrap .heroinner {position:relative;z-index:10;padding:4.5vw 5vw 3vw 5vw;}

/* --- 左カラム --- */
.heromain {width:52%;}
.heromain .pill {display:inline-block;background:#dfeaf9;color:#1c4f9c;
	font-size:0.95rem;font-weight:700;letter-spacing:0.04em;padding:0.75em 1.6em;border-radius:2em;margin-bottom:1.8rem;}
.heromain h1 {font-size:3.1rem;font-weight:900;line-height:1.42em;color:var(--navy);letter-spacing:0.005em;margin-bottom:0.5rem;}
.heromain h1 .em {color:var(--orange);font-size:1.34em;display:inline-block;line-height:1.2em;}
.heromain h2 {font-size:1.05rem;font-weight:400;line-height:2.0em;color:var(--ink-2);margin-top:1.2rem;}

/* 特長チップ 2×2 */
.herofeat {display:flex;flex-wrap:wrap;gap:0.8rem;margin:2.2rem 0 2.4rem 0;}
.herofeat li {flex:1 1 45%;display:flex;align-items:center;gap:0.9rem;background:#fff;
	border:solid #e2e9f2 1px;box-shadow:0 2px 10px rgba(20,40,75,0.05);
	padding:1.1em 1.4em;font-size:1.0rem;font-weight:700;color:var(--navy);}
.herofeat li svg {width:1.7em;height:1.7em;flex:none;}

/* CTA */
.herocta {display:flex;gap:1rem;flex-wrap:wrap;align-items:center;}
.herocta a.btn {font-size:1.05rem;padding:1.3em 2.6em;display:inline-flex;align-items:center;gap:0.7rem;}
.herocta a.btn svg {width:1.2em;height:1.2em;flex:none;}
.herocta a.btn.cv {box-shadow:0 6px 18px rgba(239,116,32,0.28);border:none;}
.herocta a.btn.line2 {background:#fff;border:solid var(--navy) 1px;}

/* 実績バッジ（月桂樹） */
.herobadge {display:inline-flex;align-items:center;gap:0.5rem;margin-top:2.2rem;
	font-size:1.0rem;font-weight:700;color:#8a6d3b;}
.herobadge svg {width:1.9em;height:2.3em;flex:none;}

/* --- 右カラム：手書きコピー --- */
.herocatch {position:absolute;top:2.5vw;right:16vw;width:20vw;z-index:20;}
.herocatch img {width:100%;height:auto;}

/*SP*/
@media (max-width: 896px){
	.herowrap {margin-top:8.5vh;background:linear-gradient(180deg,#e9f2fb 0%,#f3f8fd 60%,#ffffff 100%);}
	/* 人物は写真の右寄りにいるため、SPでは背景位置を右に寄せて顔が入るようにする */
	.herowrap .herobg {width:92%;height:54%;top:19%;right:-14%;background-position:93% 50%;}
	/* 左からの白フェード＋上端のフェードで、見出し・リード文の可読性を確保する */
	.herowrap .herobg::after {background:
		linear-gradient(90deg,#eef5fb 0%,rgba(238,245,251,0.72) 20%,rgba(238,245,251,0.1) 52%,rgba(238,245,251,0) 70%),
		linear-gradient(180deg,#eef5fb 0%,rgba(238,245,251,0) 22%);}
	.herowrap .heroinner {padding:5vh 6vw 3vh 6vw;}
	.heromain {width:100%;}
	.heromain .pill {font-size:1.0rem;margin-bottom:1.4rem;}
	.heromain h1 {font-size:2.05rem;line-height:1.38em;}
	.heromain h1 .em {font-size:1.3em;}
	.heromain h2 {font-size:1.05rem;line-height:1.9em;width:74%;}
	.herofeat {display:none;}
	.herocta {display:block;width:84%;}
	.herocta a.btn {width:100%;margin-bottom:0.6rem;justify-content:center;font-size:1.02rem;
		padding:1.15em 0.8em;white-space:nowrap;}
	.herocta a.btn svg {width:1.1em;height:1.1em;}
	.herobadge {margin-top:1.4rem;font-size:0.95rem;}
	.herocatch {position:relative;top:auto;right:auto;width:56%;margin:3.5vh 0 0 0;}
}

/*==================== 4ステップ（ファーストビュー下） ====================*/
.stepband {position:relative;z-index:10;padding:0 5vw 4vw 5vw;background:transparent;}
.herowrap .stepband {margin-top:1vw;}
.steplist {display:flex;gap:2.2rem;}
.steplist .step {flex:1;background:#fff;border:solid #e2e9f2 1px;box-shadow:0 4px 16px rgba(20,40,75,0.07);
	padding:1.6rem 1.5rem;position:relative;}
/* カード間の流れを示す矢印（最後のカードには付けない） */
.steplist .step:not(:last-child)::after {content:"";position:absolute;top:50%;right:-1.45rem;
	width:0.62rem;height:0.62rem;margin-top:-0.31rem;
	border-top:solid var(--blue) 2.5px;border-right:solid var(--blue) 2.5px;
	transform:rotate(45deg);opacity:0.5;}
.steplist .step .num {display:inline-flex;align-items:center;justify-content:center;
	width:2.1em;height:2.1em;border-radius:50%;background:var(--navy);color:#fff;
	font-size:0.9rem;font-weight:700;margin-right:0.7rem;vertical-align:middle;}
.steplist .step h3 {display:inline;font-size:1.25rem;font-weight:700;color:var(--navy);vertical-align:middle;}
.steplist .step .fig {margin:1.3rem 0;background:#f4f8fd;border-radius:0.4rem;
	height:8.6vw;display:flex;align-items:center;justify-content:center;}
.steplist .step .fig svg {width:78%;height:78%;}
.steplist .step p {font-size:0.95rem;line-height:1.8em;color:var(--ink-2);}
/*SP*/
@media (max-width: 896px){
	.stepband {padding:4vh 5vw 5vh 5vw;}
	.steplist {flex-wrap:wrap;gap:0.7rem;}
	.steplist .step {flex:1 1 46%;padding:1.2rem 1rem;}
	/* SPは2×2に折り返すため、矢印は出さない */
	.steplist .step:not(:last-child)::after {display:none;}
	.steplist .step h3 {font-size:1.15rem;}
	.steplist .step .fig {height:22vw;margin:1rem 0;}
	.steplist .step .fig svg {width:82%;height:82%;}
	.steplist .step p {font-size:0.92rem;}
}

/* スクロール誘導 */
.scrollhint {text-align:center;padding:0 0 3vw 0;}
.scrollhint span {font-size:0.9rem;color:var(--ink-3);letter-spacing:0.1em;display:inline-flex;align-items:center;gap:1.2rem;}
.scrollhint span::before,.scrollhint span::after {content:"";width:3vw;height:1px;background:var(--line);}
.scrollhint .arw {display:block;margin:0.8rem auto 0;width:0.6rem;height:0.6rem;
	border-bottom:solid var(--ink-3) 1px;border-right:solid var(--ink-3) 1px;transform:rotate(45deg);}
@media (max-width: 896px){
	.scrollhint {padding-bottom:5vh;}
	.scrollhint span::before,.scrollhint span::after {width:8vw;}
}

/*==================== 以降：esv準拠のセクション ====================*/

/* 概要＋3カラム */
.aboutarea {background:#fff;}
.aboutarea .collist {margin-top:1vw;}
.aboutarea .collist .inner {padding:0 1.2rem;}
.aboutarea .collist .inner:first-child {padding-left:0;}
.aboutarea .collist .inner:last-child {padding-right:0;}
.aboutarea .collist .box {border-top:solid var(--navy) 2px;padding:2rem 0 0 0;height:100%;}
.aboutarea .collist .box .no {font-size:0.9rem;font-weight:700;color:var(--label);letter-spacing:0.18em;margin-bottom:1rem;}
.aboutarea .collist h3 {font-size:1.6rem;font-weight:500;margin-bottom:1.2rem;color:var(--navy);line-height:1.5em;}
.aboutarea .collist p {font-size:1.0rem;line-height:2.0em;color:var(--ink-2);}
/*SP*/
@media (max-width: 896px){
	.aboutarea .collist .inner {padding:0;margin-bottom:3.5rem;}
	.aboutarea .collist .inner:last-child {margin-bottom:0;}
	.aboutarea .collist h3 {font-size:1.4rem;}
	.aboutarea .collist p {font-size:1.05rem;}
}

/* 交互レイアウト（画像＋テキスト） */
.contents02 {}
.contents02 .inner .box {padding:5vw;}
.contents02 .inner .box .label {font-size:0.9rem;font-weight:700;color:var(--label);
	letter-spacing:0.18em;text-transform:uppercase;display:block;margin-bottom:1.2rem;}
.contents02 .inner h2 {font-size:2.3rem;font-weight:500;margin-bottom:0em;line-height:1.5em;color:var(--navy);}
.contents02 .inner h3 {font-size:1.2rem;font-weight:500;margin-top:0.8em;color:var(--blue);}
.contents02 .inner p {font-size:1.05rem;margin-top:1.5em;line-height:2.1em;color:var(--ink-2);}
.contents02 .inner p a.btn {margin-top:0.5rem;}
.contents02 .image {background-repeat:no-repeat;background-position:center center;background-size:cover;min-height:46vh;}
.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);}
/*SP*/
@media (max-width: 896px){
	.contents02 .inner .box {padding:6vh 6vw;}
	.contents02 .image {min-height:52vw;}
	.contents02 .inner h2 {font-size:1.7rem;}
	.contents02 .inner h3 {font-size:1.1rem;}
	.contents02 .inner p {font-size:1.05rem;}
}

/* 全面画像＋暗幕（esvのgolfarea/workareaパターン） */
.imagearea {position:relative;overflow:hidden;}
.imagearea .bgcover {position:absolute;top:0;left:0;width:100%;height:100%;
	background-color:#0e1c35;background-repeat:no-repeat;background-position:center center;background-size:cover;
	background-attachment:fixed;}
.imagearea .cover {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(14,28,53,0.72);opacity:0.3;}
.imagearea.on .cover {opacity:1;transition:4s;}
.imagearea .textbox {position:relative;z-index:10;text-align:center;}
.imagearea .textbox .label {font-size:0.9rem;font-weight:700;color:rgba(255,255,255,0.55);
	letter-spacing:0.18em;text-transform:uppercase;display:block;margin-bottom:1.5rem;}
.imagearea .textbox h2 {font-size:3.0rem;font-weight:500;color:#fff;line-height:1.5em;margin-bottom:0;}
.imagearea .textbox p {font-size:1.1rem;line-height:2.3em;margin-top:2.5rem;color:rgba(255,255,255,0.88);}
/*SP*/
@media (max-width: 896px){
	.imagearea .bgcover {background-attachment:scroll;}
	.imagearea .textbox h2 {font-size:1.8rem;}
	.imagearea .textbox p {font-size:1.05rem;line-height:2.0em;text-align:left;margin-top:2rem;}
}

/* 数字で見る（3カラム） */
.numarea {background:var(--bg-1);}
.numlist {display:flex;flex-wrap:wrap;margin-top:1vw;}
.numlist .inner {padding:0 1.5rem;}
.numlist .box {border-top:solid var(--line) 1px;padding:2.2rem 0 0 0;}
.numlist .box .cap {font-size:1.0rem;color:var(--ink-3);margin-bottom:1rem;line-height:1.8em;}
.numlist .box .val {font-size:3.0rem;font-weight:700;color:var(--navy);line-height:1.2em;letter-spacing:-0.01em;}
.numlist .box .val small {font-size:0.42em;font-weight:500;margin-left:0.3em;color:var(--ink-2);}
.numlist .box .sub {font-size:0.9rem;color:var(--ink-3);margin-top:1rem;line-height:1.8em;}
/*SP*/
@media (max-width: 896px){
	.numlist .inner {padding:0;margin-bottom:2.5rem;}
	.numlist .box .val {font-size:2.4rem;}
}

/* ステップ（記事になるまで）— esv風の縦並び */
.flowarea {background:#fff;}

/*FAQ*/
.faqwrap {background:var(--bg-1);}
.faqarea {margin-top:1vw;}
.faq {background:#fff;border:solid var(--line-2) 1px;border-bottom:none;padding:1.8rem 2.5rem;margin:0;}
.faqarea .faq:last-of-type {border-bottom:solid var(--line-2) 1px;}
.faq > summary {cursor:pointer;list-style:none;font-size:1.15rem;font-weight:700;color:var(--navy);
	line-height:1.7em;padding-right:2rem;position:relative;}
.faq > summary::-webkit-details-marker {display:none;}
.faq > summary::after {content:"";position:absolute;right:0;top:0.6em;width:0.75em;height:0.75em;
	border-bottom:solid var(--blue) 2px;border-right:solid var(--blue) 2px;transform:rotate(45deg);transition:0.25s;}
.faq[open] > summary::after {transform:rotate(-135deg);top:0.85em;}
.faq .answer {margin-top:1.2rem;padding-top:1.2rem;border-top:solid var(--line-2) 1px;}
.faq .answer p {font-size:1.0rem;font-weight:400;color:var(--ink-2);line-height:2.0em;}
/*SP*/
@media (max-width: 896px){
	.faq {padding:1.3rem 1.2rem;}
	.faq > summary {font-size:1.05rem;}
	.faq .answer p {font-size:1.0rem;}
}

/* ============================================================
   トップ：SEO/AIO記事（最新）
   記事が1本も無いときはPHP側でセクションごと出ないので、空の見た目にはならない。
   ============================================================ */
.toparticles {gap:0;margin-top:1rem;}
.toparticles .inner {padding:0 1rem;}
.toparticles .box {display:block;height:100%;background:#fff;border:solid var(--line) 1px;
	padding:2rem 1.8rem;transition:0.25s;text-decoration:none;}
.toparticles .box:hover {border-color:var(--blue);box-shadow:0 10px 26px rgba(20,40,75,0.08);
	transform:translateY(-3px);text-decoration:none;}
.toparticles .meta {display:flex;align-items:center;gap:0.9rem;margin-bottom:1rem;}
.toparticles .meta .date {font-size:0.85rem;color:var(--label);letter-spacing:0.08em;}
.toparticles .meta .cat {font-size:0.78rem;color:var(--blue);border:solid var(--blue) 1px;
	border-radius:2em;padding:0.25em 0.9em;line-height:1.4em;}
.toparticles .ttl {font-size:1.2rem;font-weight:500;line-height:1.65em;color:var(--navy);margin-bottom:0.9rem;}
.toparticles .box:hover .ttl {color:var(--blue);}
.toparticles .dsc {font-size:0.95rem;line-height:1.9em;color:var(--ink-2);}

.topcats {display:flex;flex-wrap:wrap;justify-content:center;gap:0.7rem;margin-top:3rem;}
.topcats a {font-size:0.9rem;line-height:1.4em;color:var(--ink-2);background:var(--bg-1);
	border:solid var(--line-2) 1px;border-radius:2em;padding:0.6em 1.3em;transition:0.2s;}
.topcats a:hover {background:#fff;border-color:var(--blue);color:var(--blue);text-decoration:none;}

/*SP*/
@media (max-width: 896px){
	.toparticles .inner {width:100%;padding:0;margin-bottom:1.2rem;}
	.toparticles .box {padding:1.6rem 1.4rem;}
	.toparticles .ttl {font-size:1.1rem;}
	.topcats {margin-top:2rem;gap:0.5rem;}
	.topcats a {font-size:0.85rem;padding:0.55em 1.1em;}
}