/*
Theme Name: KSP合同会社
Theme URI:
Author: KSP / 制作
Description: KSP合同会社 コーポレートサイト（テンプレ③・方向C／品のある信頼コーポレート）。無料版ACF前提・番号付きフィールド＋フォールバック型。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ksp
*/

/* =====================================================================
 * このファイルは scss/ からのコンパイル出力です（編集はSCSS側で）。
 * 構成：base/components/header/footer は全ページ共通（無スコープ）、
 *      TOP固有は #top、下層固有は #common に配置。
 * ===================================================================== */

/* ---------------- root / reset ---------------- */
:root{--navy:#1B2A47;--navy-deep:#14203A;--red:#B33A33;--ink:#2A2E35;--gray:#5A5F69;--line:#E4E2DC;--bg:#FAF9F6;--white:#FFFFFF;--mincho:'Shippori Mincho',serif;--sans:'Noto Sans JP',sans-serif;--jost:'Jost',sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:62.5%;scroll-behavior:smooth}
body{font-family:var(--sans);font-size:1.6rem;line-height:1.9;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------------- shared helpers ---------------- */
.wrap{width:88%;max-width:1120px;margin-inline:auto}
.eyebrow{font-family:var(--jost);font-size:1.3rem;letter-spacing:.18em;color:var(--red);text-transform:uppercase;display:block;margin-bottom:1.2rem}
.sec-title{font-family:var(--mincho);font-weight:600;font-size:3.2rem;line-height:1.4;color:var(--navy);letter-spacing:.04em}
.rule{width:30px;height:2px;background:var(--red);margin-top:1.8rem}
.fade{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s ease}
.fade.in{opacity:1;transform:none}
/* デバイス別改行：SP以外はSP(≤768)で非表示＝「PCで改行・SPは1行」 */
.br_monitor,.br_pc,.br_tab,.br_sp{display:none}
@media(max-width:768px){.br_sp{display:inline}}                          /* スマホのみ改行 */
@media(min-width:769px){.br_pc{display:inline}}                          /* SP以外すべて（タブレット/PC/大画面）で改行 */
@media(min-width:769px) and (max-width:1024px){.br_tab{display:inline}}  /* タブレットのみ改行 */
@media(min-width:1441px){.br_monitor{display:inline}}                    /* 大画面のみ改行 */

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:1.2rem;font-family:var(--jost);font-weight:500;font-size:1.5rem;letter-spacing:.1em;padding:1.8rem 3.4rem;border-radius:4px;transition:.35s;white-space:nowrap;cursor:pointer;border:none}
.btn--red{background:var(--red);color:#fff}.btn--red:hover{background:#9c2f29}
.btn--navy{background:var(--navy);color:#fff}.btn--navy:hover{background:var(--navy-deep)}
.btn--line{background:#06C755;color:#fff}.btn--line:hover{background:#05a648}
.btn--outline{border:.5px solid var(--navy);color:var(--navy);background:none}.btn--outline:hover{background:var(--navy);color:#fff}
.contact__btns{margin-top:4.4rem;display:flex;gap:1.8rem;justify-content:center;flex-wrap:wrap}

/* ---------------- header ---------------- */
.head{position:sticky;top:0;z-index:50;background:rgba(250,249,246,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:.5px solid var(--line)}
.head__in{display:flex;align-items:center;justify-content:space-between;height:8rem}
.brand{display:flex;align-items:center}.brand img{height:5.4rem;width:auto}
.gnav{display:flex;align-items:center;gap:2.6rem}
.gnav a{font-size:1.4rem;letter-spacing:.04em;color:var(--navy);position:relative;padding:.4rem 0;transition:color .3s}
.gnav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--red);transition:width .3s}
.gnav a:hover{color:var(--red)}.gnav a:hover::after{width:100%}
.gnav a.is-current{color:var(--red)}.gnav a.is-current::after{width:100%}
.head__cta{display:flex;align-items:center;gap:1.2rem}
.head__ext{display:flex;gap:.8rem}
.head__ext a{width:3.6rem;height:3.6rem;display:grid;place-items:center;border:.5px solid var(--line);border-radius:4px;font-family:var(--jost);font-size:1.1rem;color:var(--navy);transition:.3s}
.head__ext a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.head__ext a svg{width:1.8rem;height:1.8rem;display:block}
.head__tel{font-family:var(--jost);font-weight:500;font-size:1.8rem;color:var(--navy);letter-spacing:.04em;display:flex;align-items:center;gap:.6rem}
.head__tel span{font-family:var(--sans);font-size:1rem;color:var(--gray);letter-spacing:.1em}
/* PC（マウス操作）ではTEL発信リンク全般のクリックを無効化（タッチ端末は発信可） */
@media(hover:hover) and (pointer:fine){a[href^="tel:"]{pointer-events:none;cursor:default}}
.burger{display:none}

/* ---------------- spec table (TOP preview + 会社概要で共用) ---------------- */
.spec{width:100%;border-collapse:collapse;border-top:.5px solid var(--line)}
.spec th,.spec td{text-align:left;padding:2rem 0;border-bottom:.5px solid var(--line);font-size:1.5rem;vertical-align:top;line-height:1.8}
.spec th{width:18rem;font-weight:500;color:var(--navy);font-size:1.4rem;letter-spacing:.06em}
.spec td{color:var(--gray)}
.spec td .flag{display:inline-block;margin-left:.8rem;font-family:var(--jost);font-size:1.1rem;color:var(--red);border:.5px solid var(--red);border-radius:3px;padding:.1rem .8rem;letter-spacing:.06em;vertical-align:middle}

/* =====================================================================
 * TOP（#top）
 * ===================================================================== */
/* hero slider */
#top .hero{position:relative;height:84vh;min-height:560px;max-height:800px;overflow:hidden}
#top .hero__slides{position:absolute;inset:0;background-color:var(--navy)}
#top .slide{position:absolute;inset:0;opacity:0;z-index:0;transition:opacity 1.4s ease;background-size:cover;background-position:center;display:grid;place-items:center}
#top .slide.is-active{opacity:1;z-index:2}
#top .slide.is-prev{opacity:1;z-index:1}
#top .slide__note{position:absolute;right:3rem;bottom:3rem;font-family:var(--jost);font-size:1.1rem;letter-spacing:.1em;color:rgba(255,255,255,.45)}
#top .hero__scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(105deg,rgba(20,32,58,.82),rgba(20,32,58,.5) 48%,rgba(20,32,58,.2))}
#top .hero__inner{position:relative;z-index:2;height:100%;display:flex;align-items:center}
#top .hero__copy{max-width:60rem}
#top .hero__eyebrow{font-family:var(--jost);font-size:1.4rem;letter-spacing:.22em;color:#E8B4B0;text-transform:uppercase;display:block;margin-bottom:2.4rem}
#top .hero h1{font-family:var(--mincho);font-weight:600;font-size:5.4rem;line-height:1.5;color:#fff;letter-spacing:.06em}
#top .hero h1 em{font-style:normal;background:linear-gradient(transparent 70%,rgba(179,58,51,.55) 70%)}
#top .hero__lead{margin-top:2.8rem;font-size:1.6rem;line-height:2;color:rgba(255,255,255,.82);max-width:42rem}
#top .hero__pill{display:inline-flex;align-items:center;gap:1rem;margin-top:3.4rem;padding:1rem 1.8rem;border:.5px solid rgba(255,255,255,.34);border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#top .hero__pill b{font-family:var(--mincho);font-weight:600;font-size:1.6rem;color:#fff;letter-spacing:.04em}
#top .hero__pill span{font-size:1.1rem;color:rgba(255,255,255,.6)}
#top .hero__ctrl{position:absolute;left:0;right:0;bottom:3.4rem;z-index:3}
#top .hero__ctrl-in{display:flex;align-items:center;gap:2.4rem}
#top .hero__count{font-family:var(--jost);font-size:1.3rem;letter-spacing:.14em;color:rgba(255,255,255,.7)}
#top .hero__count b{color:#fff;font-weight:500}
#top .hero__dots{display:flex;gap:1rem}
#top .dot{width:3.4rem;height:2px;background:rgba(255,255,255,.3);border:none;padding:0;cursor:pointer;transition:background .3s}
#top .dot.is-active{background:var(--red)}
/* intro */
#top .intro{padding:11rem 0;text-align:center}
#top .intro h2{font-family:var(--mincho);font-weight:600;font-size:3.6rem;line-height:1.7;color:var(--navy);letter-spacing:.06em}
#top .intro p{margin-top:3rem;font-size:1.6rem;line-height:2.1;color:var(--gray);max-width:60rem;margin-inline:auto}
/* strengths */
#top .str{padding:0 0 11rem}
#top .str__head{margin-bottom:5rem}
#top .str__list{display:grid;grid-template-columns:repeat(2,1fr);border-top:.5px solid var(--line);border-left:.5px solid var(--line)}
#top .str__item{padding:4rem 3.4rem;border-right:.5px solid var(--line);border-bottom:.5px solid var(--line);background:#fff}
#top .str__no{font-family:var(--jost);font-size:1.3rem;color:var(--red);letter-spacing:.1em}
#top .str__t{font-family:var(--mincho);font-weight:600;font-size:2.4rem;color:var(--navy);margin:1.4rem 0;letter-spacing:.04em;line-height:1.5}
#top .str__t .x{color:var(--red);font-family:var(--jost);font-weight:300;margin:0 .4rem}
#top .str__d{font-size:1.5rem;line-height:1.95;color:var(--gray)}
/* ksp meaning */
#top .ksp{background:var(--navy);color:#fff;padding:10rem 0}
#top .ksp__eyebrow{font-family:var(--jost);font-size:1.3rem;letter-spacing:.22em;color:#E0857F;text-transform:uppercase;text-align:center;display:block;margin-bottom:5rem}
#top .ksp__row{display:grid;grid-template-columns:repeat(3,1fr)}
#top .ksp__cell{text-align:center;padding:0 2rem;position:relative}
#top .ksp__cell+.ksp__cell::before{content:"";position:absolute;left:0;top:10%;height:80%;width:.5px;background:rgba(255,255,255,.16)}
#top .ksp__letter{font-family:var(--mincho);font-weight:700;font-size:7rem;color:var(--red);line-height:1}
#top .ksp__jp{font-family:var(--mincho);font-weight:600;font-size:2.6rem;margin:2rem 0 1.2rem;letter-spacing:.12em}
#top .ksp__en{font-family:var(--jost);font-size:1.2rem;letter-spacing:.24em;color:rgba(255,255,255,.5);text-transform:uppercase}
#top .ksp__foot{text-align:center;margin-top:6rem;font-family:var(--mincho);font-size:1.9rem;line-height:1.9;letter-spacing:.06em;color:rgba(255,255,255,.92)}
/* contents cards */
#top .cont{padding:11rem 0}
#top .cont__head{text-align:center;margin-bottom:5.6rem}
#top .cont__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
#top .card{background:#fff;border:.5px solid var(--line);border-radius:6px;overflow:hidden;transition:transform .4s,border-color .4s}
#top .card:hover{transform:translateY(-6px);border-color:var(--navy)}
#top .card__ph{aspect-ratio:4/3;background-color:var(--navy);background-size:cover;background-position:center}
#top .card__body{padding:2.8rem 2.6rem 3rem}
#top .card__en{font-family:var(--jost);font-size:2.2rem;color:var(--navy);letter-spacing:.06em}
#top .card__jp{font-family:var(--mincho);font-weight:600;font-size:1.8rem;color:var(--navy);margin:.6rem 0 1.4rem;letter-spacing:.08em}
#top .card__d{font-size:1.4rem;line-height:1.9;color:var(--gray)}
#top .card__link{display:inline-flex;align-items:center;gap:.8rem;margin-top:2rem;font-family:var(--jost);font-size:1.3rem;letter-spacing:.1em;color:var(--red)}
#top .card__link i{font-style:normal;transition:transform .3s}
#top .card:hover .card__link i{transform:translateX(4px)}
/* flow */
#top .flow{background:#fff;border-block:.5px solid var(--line);padding:11rem 0}
#top .flow__head{text-align:center;margin-bottom:5.6rem}
#top .flow__steps{display:grid;grid-template-columns:repeat(5,1fr)}
#top .flow__step{position:relative;padding:0 1.6rem;text-align:center}
#top .flow__step+.flow__step::before{content:"";position:absolute;left:0;top:2.1rem;width:100%;height:.5px;background:var(--line);z-index:0}
#top .flow__num{position:relative;z-index:1;width:4.2rem;height:4.2rem;margin:0 auto 1.8rem;border-radius:50%;background:var(--bg);border:.5px solid var(--navy);display:grid;place-items:center;font-family:var(--jost);font-size:1.5rem;color:var(--navy)}
#top .flow__t{font-family:var(--mincho);font-weight:600;font-size:1.7rem;color:var(--navy);margin-bottom:.8rem;letter-spacing:.04em}
#top .flow__d{font-size:1.3rem;line-height:1.8;color:var(--gray)}
/* company preview */
#top .company{padding:11rem 0}
#top .company__grid{display:grid;grid-template-columns:.82fr 1fr;gap:5rem;align-items:center}
#top .company__ph{aspect-ratio:4/3;background-color:var(--navy);background-size:cover;background-position:center}
/* contact (TOP) */
#top .contact{background:#fff;border-top:.5px solid var(--line);padding:10rem 0;text-align:center}
#top .contact h2{font-family:var(--mincho);font-weight:600;font-size:3.4rem;color:var(--navy);letter-spacing:.06em}
#top .contact p{margin-top:2.2rem;font-size:1.6rem;color:var(--gray)}

/* =====================================================================
 * 下層共通（#common）
 * ===================================================================== */
#common .phero{position:relative;background-color:var(--navy);background-size:cover;background-position:center;color:#fff;padding:8rem 0 6rem;overflow:hidden}
#common .phero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,32,58,.9),rgba(20,32,58,.74) 55%,rgba(20,32,58,.6));z-index:1}
#common .phero__deco{position:absolute;right:-4rem;bottom:-6rem;width:22rem;height:22rem;border:.5px solid rgba(255,255,255,.1);border-radius:50%;z-index:1}
#common .phero .wrap{position:relative;z-index:2}
#common .phero__en{font-family:var(--jost);font-size:1.4rem;letter-spacing:.24em;color:#E8B4B0;text-transform:uppercase;display:block;margin-bottom:1.6rem}
#common .phero__t{font-family:var(--mincho);font-weight:600;font-size:4rem;letter-spacing:.08em}
#common .crumb{margin-top:2.6rem;font-family:var(--jost);font-size:1.2rem;letter-spacing:.08em;color:rgba(255,255,255,.55)}
#common .crumb a:hover{color:#fff}
#common .crumb span{margin:0 .8rem;color:rgba(255,255,255,.3)}
#common .sec{padding:9rem 0}
#common .lead{font-family:var(--mincho);font-weight:500;font-size:2.2rem;line-height:1.9;color:var(--navy);letter-spacing:.04em;text-align:center;max-width:64rem;margin:0 auto 0}
#common .lead+.lead-sub{margin-top:2.4rem;text-align:center;color:var(--gray);font-size:1.6rem;line-height:2;max-width:60rem;margin-inline:auto}
#common .prose h3{font-family:var(--mincho);font-weight:600;font-size:2.2rem;color:var(--navy);margin:0 0 1.6rem;letter-spacing:.04em}
#common .prose p{font-size:1.6rem;line-height:2;color:var(--ink);margin-bottom:1.6rem}
#common .prose p:last-child{margin-bottom:0}
/* ごあいさつ：社員写真＋挨拶文を50/50（SPは縦積み） */
#common .company__grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:flex-start}
/* service / flow rows */
#common .svc{display:grid;grid-template-columns:1fr;gap:0;border-top:.5px solid var(--line)}
#common .svc__row{display:grid;grid-template-columns:7rem 1fr 1.1fr;gap:3rem;align-items:center;padding:4rem 0;border-bottom:.5px solid var(--line)}
#common .svc__no{font-family:var(--jost);font-size:1.6rem;color:var(--red);letter-spacing:.08em}
#common .svc__t{font-family:var(--mincho);font-weight:600;font-size:2.4rem;color:var(--navy);letter-spacing:.04em}
#common .svc__t small{display:block;font-family:var(--jost);font-size:1.2rem;color:var(--gray);letter-spacing:.1em;margin-top:.6rem;text-transform:uppercase}
#common .svc__d{font-size:1.5rem;line-height:1.95;color:var(--gray)}
/* reasons */
#common .reasons{border-top:.5px solid var(--line);margin-top:6rem}
#common .reason{display:grid;grid-template-columns:8rem 1fr 1.15fr;gap:3rem;align-items:start;padding:4.4rem 0;border-bottom:.5px solid var(--line)}
#common .reason__no{font-family:var(--jost);font-size:2.4rem;color:var(--red);line-height:1}
#common .reason__t{font-family:var(--mincho);font-weight:600;font-size:2.4rem;color:var(--navy);letter-spacing:.04em;line-height:1.45}
#common .reason__t .x{color:var(--red);font-family:var(--jost);font-weight:300;margin:0 .4rem}
#common .reason__t small{display:block;font-family:var(--jost);font-size:1.2rem;color:var(--gray);letter-spacing:.12em;margin-top:.8rem;text-transform:uppercase}
#common .reason__d{font-size:1.55rem;line-height:2;color:var(--gray)}
/* dual panel */
#common .dual{display:grid;grid-template-columns:1fr auto 1fr;gap:3rem;align-items:center;background:#fff;border:.5px solid var(--line);border-radius:6px;padding:5rem 4rem;margin-top:5rem}
#common .dual__cell{text-align:center}
#common .dual__cell .jost{font-family:var(--jost);font-size:1.2rem;letter-spacing:.16em;color:var(--red);text-transform:uppercase;display:block;margin-bottom:1rem}
#common .dual__cell b{font-family:var(--mincho);font-weight:600;font-size:2.6rem;color:var(--navy);display:block;letter-spacing:.04em}
#common .dual__cell p{margin-top:1.4rem;font-size:1.4rem;line-height:1.9;color:var(--gray)}
#common .dual__x{font-family:var(--jost);font-weight:300;font-size:4rem;color:var(--red)}
/* note */
#common .note{background:#fff;border:.5px solid var(--line);border-left:3px solid var(--red);border-radius:0 6px 6px 0;padding:2.6rem 3rem;font-size:1.5rem;line-height:1.95;color:var(--gray)}
#common .note b{color:var(--navy);font-weight:500}
/* creed */
#common .creed{background:var(--navy);color:#fff;border-radius:6px;padding:5.4rem 4rem;text-align:center}
#common .creed__en{font-family:var(--jost);font-size:1.2rem;letter-spacing:.22em;color:#E0857F;text-transform:uppercase;display:block;margin-bottom:2rem}
#common .creed__row{display:flex;justify-content:center;gap:5rem;flex-wrap:wrap;margin-bottom:3rem}
#common .creed__row b{font-family:var(--mincho);font-weight:600;font-size:2.4rem;letter-spacing:.1em}
#common .creed__row b em{font-style:normal;color:var(--red);margin-right:.6rem}
#common .creed p{font-family:var(--mincho);font-size:1.7rem;line-height:1.9;color:rgba(255,255,255,.9);letter-spacing:.04em}
/* contact sub cards */
#common .rec-points{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
#common .rec-point{background:#fff;border:.5px solid var(--line);border-radius:6px;padding:3.4rem 3rem}
#common .rec-point .no{font-family:var(--jost);font-size:1.3rem;color:var(--red)}
#common .rec-point h4{font-family:var(--mincho);font-weight:600;font-size:1.9rem;color:var(--navy);margin:1.2rem 0 1.2rem;letter-spacing:.04em}
#common .rec-point p{font-size:1.4rem;line-height:1.9;color:var(--gray)}
/* policy */
#common .policy{max-width:80rem;margin:0 auto}
#common .policy__intro{font-size:1.6rem;line-height:2;color:var(--ink);margin-bottom:5rem}
#common .policy__sec{margin-bottom:4rem}
#common .policy__sec h3{font-family:var(--mincho);font-weight:600;font-size:2rem;color:var(--navy);letter-spacing:.04em;margin-bottom:1.6rem;padding-bottom:1.2rem;border-bottom:.5px solid var(--line)}
#common .policy__sec h3 em{font-style:normal;font-family:var(--jost);color:var(--red);margin-right:1.2rem;font-size:1.7rem}
#common .policy__sec p{font-size:1.5rem;line-height:2;color:var(--gray);margin-bottom:1.2rem}
#common .policy__sec ul{list-style:none;margin:1rem 0}
#common .policy__sec ul li{position:relative;padding-left:1.8rem;font-size:1.5rem;line-height:1.95;color:var(--gray);margin-bottom:.6rem}
#common .policy__sec ul li::before{content:"–";position:absolute;left:0;color:var(--red)}
#common .policy__date{margin-top:5rem;text-align:right;font-size:1.4rem;color:var(--gray)}
/* cta band */
#common .ctaband{background:var(--navy);color:#fff;text-align:center;padding:8rem 0}
#common .ctaband h2{font-family:var(--mincho);font-weight:600;font-size:3rem;letter-spacing:.06em;margin-bottom:1.6rem}
#common .ctaband p{color:rgba(255,255,255,.75);font-size:1.5rem;margin-bottom:3.6rem}
#common .ctaband .contact__btns{margin-top:0}

/* =====================================================================
 * footer
 * ===================================================================== */
.foot{background:var(--navy);color:rgba(255,255,255,.72);padding:6.4rem 0 3rem;font-size:1.4rem;line-height:1.9}
.foot__top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:4rem;padding-bottom:4.4rem;border-bottom:.5px solid rgba(255,255,255,.14)}
img{height:12rem;width:auto}
.foot__brand p{margin-top:2rem;font-size:1.3rem}
.foot__h{font-family:var(--jost);font-size:1.2rem;letter-spacing:.16em;color:#E0857F;text-transform:uppercase;margin-bottom:1.8rem}
.foot__addr+.foot__addr{margin-top:1.4rem}
.foot__addr b{color:#fff;font-weight:500;font-size:1.3rem;display:block}
.foot ul{list-style:none}.foot ul li{margin-bottom:1rem}.foot ul a:hover{color:#fff}
.foot__sns{display:flex;gap:1rem;margin-top:2rem}
.foot__sns a{width:3.6rem;height:3.6rem;display:grid;place-items:center;border:.5px solid rgba(255,255,255,.24);border-radius:4px;font-family:var(--jost);font-size:1.1rem;color:#fff;transition:.3s}
.foot__sns a:hover{background:var(--red);border-color:var(--red)}
.foot__sns a svg{width:1.8rem;height:1.8rem;display:block}
.foot__btm{display:flex;justify-content:space-between;align-items:center;padding-top:2.6rem;font-size:1.2rem;flex-wrap:wrap;gap:1rem}
.foot__btm a:hover{color:#fff}

/* ---------------- floating banner ---------------- */
.floatbtns{position:fixed;right:2rem;bottom:2rem;z-index:60;display:flex;flex-direction:column;gap:1.2rem}
.floatbtn{width:6rem;height:6rem;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;color:#fff;box-shadow:0 6px 20px rgba(20,32,58,.28);transition:transform .3s}
.floatbtn:hover{transform:translateY(-3px)}
.floatbtn svg{width:2.4rem;height:2.4rem;display:block}
.floatbtn span{font-family:var(--jost);font-size:1rem;letter-spacing:.05em}
.floatbtn--line{background:#06C755}
.floatbtn--ig{background:var(--navy)}
.floatbtn--lp{background:var(--red)}

/* 外部LP：TOP誘導バナー */
.lpband{background:var(--navy);color:#fff;margin-bottom:8rem}
.lpband__in{display:flex;align-items:center;justify-content:space-between;gap:3rem;padding:5.6rem 0;flex-wrap:wrap}
.lpband__eyebrow{font-family:var(--jost);font-size:1.3rem;letter-spacing:.18em;color:#E0857F;text-transform:uppercase;display:block;margin-bottom:1rem}
.lpband__t{font-family:var(--mincho);font-weight:600;font-size:2.8rem;line-height:1.4;letter-spacing:.04em}
.lpband__d{margin-top:1.2rem;font-size:1.4rem;color:rgba(255,255,255,.82);max-width:56rem}
.lpband__btn{flex:none}

/* =====================================================================
 * responsive
 * ===================================================================== */
@media(max-width:1024px){
	#top .hero h1{font-size:4.6rem}
	.gnav{gap:1.8rem}.gnav a{font-size:1.3rem}
}
@media(max-width:768px){
	html{font-size:56.25%}
	.gnav,.head__tel,.head__ext{display:none}.brand img{height:4.6rem}
	.burger{display:block;position:relative;width:4.4rem;height:4.4rem;border:.5px solid var(--line);border-radius:4px;background:none;cursor:pointer}
	.burger span{position:absolute;left:50%;top:50%;width:2rem;height:2px;background:var(--navy);border-radius:2px;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .35s ease}
	.burger span:nth-child(1){transform:translate(-50%,calc(-50% - .6rem))}
	.burger span:nth-child(2){transform:translate(-50%,-50%)}
	.burger span:nth-child(3){transform:translate(-50%,calc(-50% + .6rem))}
	.nav-open .burger span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
	.nav-open .burger span:nth-child(2){opacity:0}
	.nav-open .burger span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}
	/* TOP */
	#top .hero{height:auto;min-height:0;max-height:none}
	#top .hero__slides{position:relative;height:46vh;min-height:300px}
	#top .slide{position:absolute}
	#top .hero__scrim{height:46vh;min-height:300px;top:0}
	#top .hero__inner{position:static;background:var(--navy);padding:4.4rem 0 6rem}
	#top .hero__copy{max-width:none}
	#top .hero h1{font-size:3.4rem;line-height:1.6}
	#top .hero__ctrl{bottom:auto;top:calc(46vh - 4rem);text-shadow:0 1px 8px rgba(20,32,58,.7)}
	#top .intro,#top .str,#top .ksp,#top .cont,#top .flow,#top .company,#top .contact{padding-block:6.4rem}
	#top .intro h2{font-size:2.8rem}
	#top .str__list{grid-template-columns:1fr;border-left:none;border-top:none}
	#top .str__item{border-left:.5px solid var(--line);border-top:.5px solid var(--line);padding:3.2rem 2.6rem}
	#top .ksp__row,#top .cont__grid{grid-template-columns:1fr;gap:2.4rem}
	#top .ksp__cell+.ksp__cell::before{display:none}
	#top .ksp__cell+.ksp__cell{border-top:.5px solid rgba(255,255,255,.16);padding-top:4rem}
	#top .flow__steps{grid-template-columns:1fr;gap:3rem}
	#top .flow__step+.flow__step::before{display:none}
	#top .flow__step{display:flex;gap:1.8rem;text-align:left;align-items:flex-start}
	#top .flow__num{margin:0;flex-shrink:0}
	#top .company__grid{grid-template-columns:1fr;gap:3rem}
	/* shared */
	.contact__btns{flex-direction:column}.btn{justify-content:center}
	.spec th{width:11rem}
	/* 下層 */
	#common .sec,#common .ctaband{padding-block:6.4rem}
	#common .phero__t{font-size:3rem}
	#common .svc__row{grid-template-columns:1fr;gap:1rem}
	#common .reason{grid-template-columns:1fr;gap:1.2rem;padding:3.2rem 0}
	#common .reason__no{font-size:2rem}
	#common .dual{grid-template-columns:1fr;gap:2rem;padding:3.4rem 2.6rem}
	#common .dual__x{transform:none;text-align:center;line-height:1}
	#common .rec-points{grid-template-columns:1fr;gap:2.4rem}
	#common .company__grid{grid-template-columns:1fr;gap:3rem}
	/* footer（SPは中央寄せ） */
	.foot__top{grid-template-columns:1fr;gap:3.4rem;text-align:center}
	.foot__brand img{margin-inline:auto}
	.foot__sns{justify-content:center}
	.foot__btm{flex-direction:column;align-items:center;text-align:center}
	/* SPナビ（ドロワー） */
	.gnav{position:fixed;inset:8rem 0 auto 0;background:var(--bg);border-bottom:.5px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:1rem 6%;z-index:49;display:flex;opacity:0;visibility:hidden;transform:translateY(-1.2rem);transition:opacity .55s ease,transform .55s cubic-bezier(.4,0,.2,1),visibility .55s;pointer-events:none}
	.nav-open .gnav{opacity:1;visibility:visible;transform:none;pointer-events:auto}
	.gnav a{width:100%;padding:1.4rem 0;border-bottom:.5px solid var(--line);font-size:1.5rem}
}
@media(prefers-reduced-motion:reduce){
	.fade{opacity:1;transform:none;transition:none}
	#top .slide{transition:opacity .01s}
	html{scroll-behavior:auto}
}