@charset "UTF-8";
/*
    Template: swell
    Theme Name: とりまるくん（SWELL CHILD）
    Theme URI: https://torimarukun.com/
    Description: とりまるくん サービスサイト用のSWELL子テーマ。デザイントークンとセクション用スタイルを定義する。
    Author: 株式会社ライフノード
    Author URI: https://lifenode.co.jp/
    Version: 1.5.0
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================================
   このファイルは自動生成されます。直接編集しないでください。
   編集するのは static/assets/css/style.css と tools/build-theme-css.py です。

   色・余白・書体を変えたいときは :root の変数だけ書き換えれば
   サイト全体に反映されます。個別のセクションを触る必要はありません。
   ========================================================= */
@charset "UTF-8";
/* =========================================================
   とりまるくん — Design System
   Primary Blue #8A6542 / Ink Navy #3E2A12
   ※全てCSS変数で定義。SWELL子テーマへそのまま移植する
   ========================================================= */

:root{
  /* brand */
  --brand:#8A6542;
  --brand-d:#6E4F33;
  --brand-l:#F5EEE6;
  --brand-l2:#FAF6F1;
  --brand-line:#E3D5C3;
  --ink:#3E2A12;
  --body:#5C4A3A;
  --muted:#7D6B59;

  /* neutral（青にわずかに寄せる） */
  --paper:#FFFFFF;
  --surface:#FAF6F1;
  --surface-2:#F3ECE3;
  --line:#EAE0D4;
  --line-soft:#F2ECE4;
  --warn:#B4532F;

  /* type */
/* 文字サイズの基準（ここ以外でpx直書きしない） */
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-md:14px;
  --fs-base:16px;
  --fs-lg:18px;
  --fs-xl:20px;
  --fs-2xl:24px;
  --fs-3xl:28px;
  --fs-h1:clamp(30px,6vw,46px);
  --fs-h2:clamp(24px,4.4vw,34px);
  --fs-h3:clamp(18px,2.6vw,22px);
  --fs-display:clamp(38px,6vw,52px);

  --f-en:"Inter","Noto Sans JP","Hiragino Sans",sans-serif;
  --f-head:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --f-body:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;

  /* layout */
  --w:1160px;
  --w-narrow:820px;
  --pad:20px;
  --sec:64px;
  --r:12px;
  --r-s:8px;
  --pill:999px;

  --logo-eye:#FFFFFF;

  --sh:0 1px 2px rgba(62,42,18,.04), 0 6px 20px rgba(62,42,18,.06);
  --sh-l:0 2px 6px rgba(62,42,18,.06), 0 20px 48px rgba(138,101,66,.14);
}
@media (min-width:768px){ :root{ --pad:40px; --sec:100px; } }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--f-body); font-size:var(--fs-base); line-height:1.95;
  letter-spacing:.02em; -webkit-font-smoothing:antialiased; text-size-adjust:100%;
  /* 日本語を単語の途中で折り返さず、文節で改行する（対応ブラウザのみ） */
  word-break:auto-phrase;
  line-break:strict;
}
/* 見出しは文節改行＋行長のバランス調整 */
h1,h2,h3,h4,p,li,dd,dt,summary,.hero__lead,.sec-head p{word-break:auto-phrase}
/* 本文の段落は、右側に余白を残さず行幅をいっぱいまで使う。
   見出しは文節で折り返したほうが読みやすいので auto-phrase のままにする。 */
.hero__lead,.naming p,.effect__note{word-break:normal; overflow-wrap:anywhere; line-break:strict}
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:wrap}
@media (min-width:768px){ body{font-size:var(--fs-base)} }
img,svg{max-width:100%; height:auto; vertical-align:middle}
a{color:var(--brand)}
h1,h2,h3,h4{font-family:var(--f-head); color:var(--ink); margin:0; text-wrap:balance; letter-spacing:.01em; font-weight:700}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:3px}

.container{width:100%; max-width:var(--w); margin-inline:auto; padding-inline:var(--pad)}
.narrow{max-width:var(--w-narrow)}

/* ---------- section ---------- */
.section{padding-block:var(--sec)}
.section--tint{background:var(--surface)}
.section--soft{background:linear-gradient(180deg,#FFFFFF 0%, var(--surface) 100%)}

.sec-head{margin-bottom:40px}
.sec-head.center{text-align:center}
.eyebrow{
  display:block; font-family:var(--f-en); font-weight:600;
  font-size:var(--fs-xs); letter-spacing:.26em; color:var(--brand); margin-bottom:14px;
}
.sec-head h2{font-size:var(--fs-h2); font-weight:900; line-height:1.55; letter-spacing:.04em}
.sec-head p{margin-top:18px; color:var(--muted); font-size:var(--fs-md); line-height:2; max-width:44em}
.sec-head.center p{margin-inline:auto}
/* 役割分担の説明文は2文目が長いため、1行で収まる幅を確保する。 */
.scope-sec .container{max-width:900px}
.scope-sec .sec-head p{max-width:none}
/* モバイルでは説明文を左詰めにする。見出しや数字は中央のまま。 */
@media (max-width:767.98px){
  .sec-head.center p,
  .naming p,
  .price__desc,
  .price__note,
  .effect__note,
  .effect__cut,
  .fcta__in p{text-align:left}
}

/* ---------- buttons（ピル型） ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-head); font-weight:700; font-size:var(--fs-base); line-height:1.4;
  padding:16px 26px; border-radius:var(--pill); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background-color .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.btn .ar{width:13px; height:13px; flex:none; transition:transform .18s}
.btn:hover .ar{transform:translateX(3px)}
.btn--primary{background:var(--brand); color:#fff; box-shadow:0 2px 6px rgba(138,101,66,.22), 0 10px 26px rgba(138,101,66,.24)}
.btn--primary:hover{background:var(--brand-d); transform:translateY(-1px); box-shadow:0 4px 10px rgba(138,101,66,.26), 0 16px 34px rgba(138,101,66,.28)}
.btn--ghost{background:#fff; color:var(--brand); border-color:var(--brand-line)}
.btn--ghost:hover{background:var(--brand-l); border-color:var(--brand)}
.btn--plain{background:transparent; color:var(--brand); padding-inline:6px; box-shadow:none}
.btn--plain:hover{text-decoration:underline}
.btn--white{background:#fff; color:var(--brand)}
.btn--white:hover{background:var(--brand-l)}
.btn--outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.btn--outline-light:hover{background:rgba(255,255,255,.12); border-color:#fff}
.btn--sm{padding:11px 22px; font-size:var(--fs-md)}
.btn--lg{padding:19px 40px; font-size:var(--fs-base)}
.btn--wide{width:100%}
@media (min-width:600px){ .btn--wide{width:auto; min-width:300px} }

.btn-row{display:flex; flex-direction:column; gap:12px}
@media (min-width:600px){ .btn-row{flex-direction:row; flex-wrap:wrap; align-items:center} }
.btn-row.center{justify-content:center; align-items:center}

/* ---------- header ---------- */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(255,255,255,.95); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.hd__in{display:flex; align-items:center; gap:20px; height:66px}
@media (min-width:1024px){ .hd__in{height:78px} }
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.logo svg{width:32px; height:32px; flex:none; color:var(--ink)}
.logo b{font-family:var(--f-head); font-weight:900; font-size:var(--fs-xl); color:var(--ink); letter-spacing:.03em; white-space:nowrap}
.gnav{display:none; margin-left:auto; align-items:center; gap:30px}
@media (min-width:1024px){ .gnav{display:flex} }
.gnav a{font-family:var(--f-head); font-weight:700; font-size:var(--fs-md); color:var(--ink); text-decoration:none; white-space:nowrap; transition:color .16s}
.gnav a:hover{color:var(--brand)}
.hd__cta{display:none; margin-left:4px}
@media (min-width:1024px){ .hd__cta{display:inline-flex} }
.burger{margin-left:auto; width:44px; height:44px; display:grid; place-items:center; background:transparent; border:1px solid var(--line); border-radius:var(--r-s); cursor:pointer}
@media (min-width:1024px){ .burger{display:none} }
.burger span{display:block; width:19px; height:1.5px; background:var(--ink); position:relative; transition:background-color .2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:19px; height:1.5px; background:var(--ink); transition:transform .2s}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.spnav{display:none; border-top:1px solid var(--line-soft); background:#fff; padding:6px var(--pad) 26px; max-height:calc(100dvh - 66px); overflow-y:auto}
.spnav[data-open="true"]{display:block}
@media (min-width:1024px){ .spnav{display:none !important} }
.spnav a{display:block; font-family:var(--f-head); font-weight:700; font-size:var(--fs-base); color:var(--ink); text-decoration:none; padding:15px 2px; border-bottom:1px solid var(--line-soft)}
.spnav .btn{margin-top:22px}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-top:calc(66px + 40px); padding-bottom:52px;
  background:linear-gradient(170deg,#F7F0E7 0%, #FBF8F3 46%, #FFFFFF 100%);
}
@media (min-width:1024px){ .hero{padding-top:calc(78px + 68px); padding-bottom:96px} }
.hero::after{
  content:""; position:absolute; right:-18%; top:-24%; width:62%; aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, rgba(138,101,66,.09), transparent 66%);
  pointer-events:none;
}
.hero__grid{display:grid; gap:38px; position:relative; z-index:1}
@media (min-width:1024px){ .hero__grid{grid-template-columns:1fr 1.02fr; gap:44px; align-items:center} }
@media (min-width:1200px){ .hero__grid{grid-template-columns:1fr 1.08fr; gap:56px} }
/* ファーストビューの一行コピーは廃止。
   既に作成済みのページにも残っているため、表示だけ止める。 */
.hero__eyebrow{display:none}
.hero h1{font-size:var(--fs-h1); font-weight:900; line-height:1.42; letter-spacing:.005em; color:var(--ink)}
.hero__lead{margin-top:24px; font-size:var(--fs-base); line-height:1.95; color:var(--body); max-width:31em}
@media (min-width:600px){ .hero__lead{margin-top:26px; line-height:2.05} }
@media (min-width:768px){ .hero__lead{font-size:var(--fs-base)} }
.hero__btns{margin-top:30px}
/* モバイルでは、見出しのすぐ下に管理画面を見せる。
   hero__body を display:contents にして、中身と画像を1列に並べ替える。 */
@media (max-width:1023.98px){
  .hero__grid{display:flex; flex-direction:column; gap:0}
  .hero__body{display:contents}
  .hero__body > h1{order:1}
  .hero__shot{order:2; margin-top:28px}
  .hero__body > .hero__lead{order:3}
  .hero__body > .hero__btns{order:4}
  .hero__body > .hero__note{order:5}
}
/* 2つのボタンを同じ幅にそろえて横並びに収める */
@media (min-width:600px){
  .hero__btns{gap:14px}
  .hero__btns .btn{flex:1 1 0; min-width:0; padding-inline:18px; white-space:nowrap}
}
.hero__note{margin-top:22px; display:flex; flex-wrap:wrap; gap:7px 20px; font-size:var(--fs-sm); color:var(--muted)}
.hero__note span{display:inline-flex; align-items:center; gap:7px}
.hero__note svg{width:15px; height:15px; color:var(--brand); flex:none}
.hero__shot{position:relative}
.hero__shot .mock{border-radius:14px; box-shadow:var(--sh-l); overflow:hidden; background:#fff; border:1px solid var(--line)}
.hero__shot .mock img,.hero__shot .mock svg{display:block; width:100%; height:auto}
.hero__shot .mock figure,.step__shot .mock figure,.screen .mock figure{margin:0}
.shot-cap{margin-top:14px; font-size:var(--fs-xs); color:var(--muted); text-align:center; line-height:1.7}

/* ---------- before / after ---------- */
.ba{display:grid; gap:30px}
@media (min-width:1000px){ .ba{grid-template-columns:.8fr 1.2fr; gap:52px; align-items:center} }
.ba__cards{display:grid; gap:12px; align-items:stretch}
@media (min-width:560px){ .ba__cards{grid-template-columns:1fr 44px 1fr; gap:0} }
.ba__card{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff}
.ba__card--after{border-color:var(--brand-line); box-shadow:0 4px 14px rgba(138,101,66,.1)}
.ba__card h3{
  font-size:var(--fs-md); font-weight:700; text-align:center; padding:13px 10px;
  background:var(--surface-2); color:var(--body);
}
.ba__card--after h3{background:var(--brand-l); color:var(--brand)}
.ba__card .sub{display:block; text-align:center; font-size:var(--fs-xs); color:var(--muted); padding:14px 10px 4px; font-weight:500}
.ba__card--after .sub{color:var(--brand)}
.ba__card ul{padding:14px 18px 20px; display:grid; gap:11px}
.ba__card li{display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-sm); line-height:1.75}
.ba__card li svg{width:15px; height:15px; flex:none; margin-top:.42em; color:#C9B8A4}
.ba__card--after li svg{color:var(--brand)}
.ba__card--after li{color:var(--ink)}
.ba__ar{display:grid; place-items:center; padding:10px 0}
.ba__ar i{width:34px; height:34px; border-radius:50%; background:var(--brand); display:grid; place-items:center; flex:none}
.ba__ar svg{width:15px; height:15px; color:#fff; transform:rotate(90deg)}
@media (min-width:560px){ .ba__ar svg{transform:none} }

/* ---------- reasons (3つの理由) ---------- */
.reasons{display:grid; gap:16px}
@media (min-width:768px){ .reasons{grid-template-columns:repeat(3,1fr); gap:20px} }
.reason{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px 26px;
  transition:box-shadow .2s, transform .2s, border-color .2s;
}
.reason:hover{box-shadow:var(--sh); border-color:var(--brand-line); transform:translateY(-2px)}
.reason__top{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.reason__ic{width:34px; height:34px; flex:none; color:var(--brand)}
.reason__n{font-family:var(--f-en); font-weight:900; font-size:var(--fs-sm); color:var(--brand); letter-spacing:.06em; font-variant-numeric:tabular-nums}
.reason h3{font-size:var(--fs-lg); font-weight:900; line-height:1.6; margin-bottom:12px}
.reason p{font-size:var(--fs-sm); line-height:1.95; color:var(--muted)}
.reason a{
  display:inline-flex; align-items:center; gap:7px; margin-top:18px;
  font-family:var(--f-head); font-weight:700; font-size:var(--fs-md); color:var(--brand); text-decoration:none;
}
.reason a:hover{text-decoration:underline}
.reason a svg{width:12px; height:12px}

/* ---------- problems ---------- */
.probs{display:grid; gap:14px}
@media (min-width:768px){ .probs{grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px} }
.prob{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.prob__ic{width:38px; height:38px; flex:none; border-radius:9px; display:grid; place-items:center; background:#FBF0EC; color:var(--warn)}
.prob__ic svg{width:19px; height:19px}
.prob h3{font-size:var(--fs-base); line-height:1.7; margin-bottom:7px}
.prob p{font-size:var(--fs-sm); line-height:1.9; color:var(--muted)}

/* ---------- steps ---------- */
.steps{display:grid; gap:48px}
@media (min-width:960px){ .steps{gap:76px} }
.step{display:grid; gap:26px}
@media (min-width:960px){
  .step{grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center}
  .step:nth-child(even) .step__body{order:2}
}
.step__num{display:inline-flex; align-items:center; gap:12px; font-family:var(--f-en); font-weight:900; font-size:var(--fs-xs); letter-spacing:.16em; color:var(--brand); margin-bottom:16px}
.step__num::after{content:""; width:40px; height:1.5px; background:var(--brand); opacity:.3}
.step h3{font-size:var(--fs-h3); font-weight:900; line-height:1.6; margin-bottom:16px}
.step p{font-size:var(--fs-md); line-height:2.05; color:var(--body)}
.step ul{margin-top:18px; display:grid; gap:9px}
.step li{position:relative; padding-left:26px; font-size:var(--fs-sm); line-height:1.85; color:var(--muted)}
.step li::before{content:""; position:absolute; left:0; top:.58em; width:16px; height:16px; border-radius:50%; background:var(--brand-l)}
.step li::after{content:""; position:absolute; left:4.5px; top:calc(.58em + 5px); width:6px; height:3px; border-left:1.6px solid var(--brand); border-bottom:1.6px solid var(--brand); transform:rotate(-45deg)}
.step__shot .mock{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh); background:#fff}
.step__shot .mock svg,.step__shot .mock img{display:block; width:100%; height:auto}
/* 実際の画面（ギャラリー）。カードの高さを揃えるため、写真は上端から切り取って見せる */
.screens{display:grid; gap:32px}
@media (min-width:768px){ .screens{grid-template-columns:1fr 1fr; gap:40px 32px} }
.screen .mock{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh); background:#fff; aspect-ratio:16/10}
.screen .mock figure{height:100%}
.screen .mock img{display:block; width:100%; height:100%; object-fit:cover; object-position:left top}
.screen--right .mock img{object-position:right top}
.screen h3{margin-top:18px; font-size:var(--fs-lg); font-weight:700; line-height:1.6}
.screen__desc{margin-top:6px; font-size:var(--fs-sm); line-height:1.9; color:var(--muted)}
.screens + .shot-cap{margin-top:28px}

/* ---------- features ---------- */
.feats{display:grid; gap:14px}
@media (min-width:640px){ .feats{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .feats{grid-template-columns:repeat(3,1fr); gap:18px} }
.feat{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 24px}
.feat__ic{width:40px; height:40px; border-radius:10px; background:var(--brand-l); color:var(--brand); display:grid; place-items:center; margin-bottom:16px}
.feat__ic svg{width:20px; height:20px}
.feat h3{font-size:var(--fs-base); line-height:1.65; margin-bottom:10px}
.feat p{font-size:var(--fs-sm); line-height:1.95; color:var(--muted)}

/* ---------- scope ---------- */
.scope{display:grid; gap:16px}
@media (min-width:880px){ .scope{grid-template-columns:1fr 1fr; gap:20px} }
.scope__col{border-radius:var(--r); padding:30px 26px; border:1px solid var(--line); background:#fff}
.scope__col--ai{background:var(--brand-l); border-color:var(--brand-line)}
.scope__lbl{display:inline-flex; align-items:center; gap:9px; font-family:var(--f-head); font-weight:900; font-size:var(--fs-xs); letter-spacing:.14em; margin-bottom:15px; color:var(--brand)}
.scope__col--pro .scope__lbl{color:var(--ink)}
.scope__lbl svg{width:16px; height:16px}
.scope__col h3{font-size:var(--fs-xl); font-weight:900; line-height:1.6; margin-bottom:18px}
.scope__col ul{display:grid; gap:12px}
.scope__col li{position:relative; padding-left:27px; font-size:var(--fs-md); line-height:1.85; color:var(--body)}
.scope__col li::before{content:""; position:absolute; left:0; top:.5em; width:17px; height:17px; border-radius:50%; background:#fff; border:1.5px solid var(--brand-line)}
.scope__col--pro li::before{border-color:#E6DACB}
.scope__col li::after{content:""; position:absolute; left:5px; top:calc(.5em + 5px); width:6px; height:3px; border-left:1.6px solid var(--brand); border-bottom:1.6px solid var(--brand); transform:rotate(-45deg)}
.scope__col--pro li::after{border-color:var(--ink)}
.scope__note{margin-top:22px; padding:22px 24px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); font-size:var(--fs-md); line-height:2; color:var(--body)}
.scope__note strong{color:var(--ink); font-weight:700}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:4px; margin-bottom:26px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  font-family:var(--f-head); font-weight:700; font-size:var(--fs-md); line-height:1.5; color:var(--muted);
  background:transparent; border:0; border-bottom:2.5px solid transparent; margin-bottom:-1px;
  padding:13px 20px; cursor:pointer; white-space:nowrap; transition:color .16s, border-color .16s;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--brand); border-bottom-color:var(--brand)}
.panel[hidden]{display:none}
.merits{display:grid; gap:14px}
@media (min-width:768px){ .merits{grid-template-columns:repeat(3,1fr)} }
.merit{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px 22px}
.merit h4{font-family:var(--f-head); font-size:var(--fs-base); line-height:1.65; margin-bottom:10px; font-weight:700}
.merit p{font-size:var(--fs-sm); line-height:1.9; color:var(--muted)}
.panel__link{margin-top:22px; display:inline-flex; align-items:center; gap:8px; font-family:var(--f-head); font-weight:700; font-size:var(--fs-md); color:var(--brand); text-decoration:none}
.panel__link:hover{text-decoration:underline}
.panel__link svg{width:12px; height:12px}

/* ---------- trust ---------- */
.trusts{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
@media (min-width:768px){ .trusts{grid-template-columns:repeat(2,1fr)} }
.trust{background:#fff; padding:28px 26px}
.trust h3{font-size:var(--fs-base); line-height:1.65; margin-bottom:11px; display:flex; align-items:center; gap:11px}
.trust h3 svg{width:19px; height:19px; color:var(--brand); flex:none}
.trust p{font-size:var(--fs-sm); line-height:1.95; color:var(--muted)}

/* ---------- flow ---------- */
.flow{display:grid; gap:12px}
@media (min-width:900px){ .flow{grid-template-columns:repeat(4,1fr)} }
.flow__i{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 22px}
.flow__i b{display:block; font-family:var(--f-en); font-weight:900; font-size:var(--fs-xs); letter-spacing:.14em; color:var(--brand); margin-bottom:12px}
.flow__i h3{font-size:var(--fs-base); line-height:1.65; margin-bottom:9px}
.flow__i p{font-size:var(--fs-sm); line-height:1.9; color:var(--muted)}
.flow__i .dur{display:inline-block; margin-top:14px; font-size:var(--fs-xs); font-weight:700; color:var(--brand); background:var(--brand-l); border-radius:var(--pill); padding:4px 12px}

/* ---------- price ---------- */
.price{background:#fff; border:1px solid var(--brand-line); border-radius:16px; padding:34px 24px; text-align:center; box-shadow:var(--sh)}
@media (min-width:768px){ .price{padding:48px} }
.price__head{font-family:var(--f-head); font-weight:900; font-size:var(--fs-h3); color:var(--ink); line-height:1.6}
.price__desc{margin-top:18px; font-size:var(--fs-md); line-height:2; color:var(--body); max-width:38em; margin-inline:auto}
.price__list{display:grid; gap:10px; margin:30px auto 0; max-width:540px; text-align:left}
.price__list li{display:flex; gap:13px; align-items:flex-start; font-size:var(--fs-md); line-height:1.85; background:var(--surface); border-radius:var(--r-s); padding:15px 20px}
.price__list svg{width:17px; height:17px; color:var(--brand); flex:none; margin-top:.35em}
.fee{display:grid; gap:14px; margin:28px auto 0; max-width:560px; text-align:left}
@media (min-width:600px){ .fee{grid-template-columns:1fr 1fr} }
.fee__i{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s); padding:22px 20px; text-align:center}
.fee__label{display:inline-block; font-family:var(--f-head); font-weight:700; font-size:var(--fs-xs);
  color:var(--brand-d); background:var(--brand-l); border-radius:999px; padding:5px 14px; letter-spacing:.02em}
.fee__amount{margin-top:14px; display:flex; align-items:baseline; justify-content:center; gap:4px; line-height:1.2}
.fee__amount b{font-family:var(--f-en); font-size:var(--fs-3xl); font-weight:900; color:var(--ink)}
.fee__amount .unit{font-family:var(--f-head); font-size:var(--fs-md); font-weight:700; color:var(--body)}
.fee__note{margin-top:11px; font-size:var(--fs-xs); line-height:1.8; color:var(--muted)}
.price__cta{margin-top:32px}
.price__note{margin-top:20px; font-size:var(--fs-xs); color:var(--muted); line-height:1.8}

/* ---------- faq ---------- */
.faq{display:grid; gap:10px}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .18s}
.faq details[open]{border-color:var(--brand-line)}
.faq summary{display:flex; gap:14px; align-items:flex-start; cursor:pointer; list-style:none; padding:20px 22px; font-family:var(--f-head); font-weight:700; font-size:var(--fs-base); color:var(--ink); line-height:1.7}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{flex:none; width:25px; height:25px; border-radius:6px; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:var(--fs-xs); font-weight:900; margin-top:1px}
.faq summary .ic{margin-left:auto; flex:none; width:15px; height:15px; color:var(--muted); transition:transform .2s}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq__a{padding:0 22px 22px 61px; font-size:var(--fs-md); line-height:2; color:var(--body)}
.faq__a a{color:var(--brand)}

/* ---------- company ---------- */
.company{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff}
.company dl{margin:0; display:grid}
@media (min-width:640px){ .company dl{grid-template-columns:210px 1fr} }
.company dt{font-family:var(--f-head); font-weight:700; font-size:var(--fs-md); color:var(--ink); background:var(--surface); padding:17px 22px; border-bottom:1px solid var(--line-soft)}
.company dd{margin:0; padding:17px 22px; font-size:var(--fs-md); line-height:1.9; border-bottom:1px solid var(--line-soft)}
@media (max-width:639px){ .company dt{padding-bottom:8px; border-bottom:0} .company dd{padding-top:0} }
.company dl > *:nth-last-child(-n+2){border-bottom:0}
.ph{color:var(--muted); font-style:normal; background:repeating-linear-gradient(-45deg,var(--surface-2) 0 6px,transparent 6px 12px); border-radius:4px; padding:2px 10px; font-size:var(--fs-sm)}

/* ---------- final cta ---------- */
.fcta{background:linear-gradient(140deg,#8A6542 0%, #6E4F33 100%); color:#F4EADD; padding-block:var(--sec); position:relative; overflow:hidden}
.fcta::after{content:""; position:absolute; left:-10%; bottom:-40%; width:46%; aspect-ratio:1; background:radial-gradient(circle,rgba(255,255,255,.12),transparent 65%)}
.fcta__in{text-align:center; position:relative; z-index:1}
.fcta h2{font-size:var(--fs-h2); font-weight:900; line-height:1.6; color:#fff}
.fcta p{margin-top:20px; font-size:var(--fs-md); line-height:2; color:#EADBC8; max-width:34em; margin-inline:auto}
.fcta__btns{margin-top:34px; display:flex; flex-direction:column; gap:12px; align-items:center}
@media (min-width:600px){ .fcta__btns{flex-direction:row; justify-content:center} }
.fcta__meta{margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:9px 26px; font-size:var(--fs-sm); color:#E3D2BD}
.fcta__meta span{display:inline-flex; align-items:center; gap:8px}
.fcta__meta svg{width:14px; height:14px; color:#fff; opacity:.8}
.fcta__tel{margin-top:30px; padding-top:28px; border-top:1px solid rgba(255,255,255,.18)}
.fcta__tel .lbl{font-size:var(--fs-xs); color:#E3D2BD; display:block; margin-bottom:5px}
.fcta__tel a{font-family:var(--f-head); font-weight:900; font-size:var(--fs-3xl); color:#fff; text-decoration:none; letter-spacing:.04em; font-variant-numeric:tabular-nums}
.fcta__tel .hours{display:block; font-size:var(--fs-xs); color:#E3D2BD; margin-top:5px}

/* ---------- footer ---------- */
.ft{background:#F5F0E8; color:#6B5A4A; padding-block:52px 0; font-size:var(--fs-sm)}
.ft__grid{display:grid; gap:34px; padding-bottom:38px; border-bottom:1px solid rgba(62,42,18,.1)}
@media (min-width:860px){ .ft__grid{grid-template-columns:1.5fr 1fr 1fr 1fr} }
.ft .logo b{color:var(--ink)}
.ft .logo svg{color:var(--brand)}
.ft__about{margin-top:18px; line-height:1.95; color:#6B5A4A; max-width:24em}
.ft h4{font-family:var(--f-head); font-weight:700; font-size:var(--fs-sm); color:var(--ink); letter-spacing:.08em; margin-bottom:16px}
.ft ul{display:grid; gap:11px}
.ft a{color:#6B5A4A; text-decoration:none}
.ft a:hover{color:var(--brand); text-decoration:underline}
.ft__bottom{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; padding-block:24px 28px; font-size:var(--fs-xs)}
.ft__bottom nav{display:flex; flex-wrap:wrap; gap:12px 20px}
.ft__copy{margin-left:auto; color:#8A7866}

/* ---------- sp sticky cta ---------- */
.spbar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:grid; grid-template-columns:1fr 1.35fr; gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97); backdrop-filter:blur(10px); border-top:1px solid var(--line);
  transform:translateY(120%); transition:transform .25s ease;
}
.spbar[data-show="true"]{transform:translateY(0)}
@media (min-width:1024px){ .spbar{display:none} }
.spbar .btn{padding:14px 10px; font-size:var(--fs-md); gap:7px}
@media (max-width:1023px){ body.has-spbar{padding-bottom:80px} }

/* ---------- スクロール表示 ----------
   既定では常に見える状態にしておき、JavaScriptが動いたときだけ
   フェードインの演出を有効にする。
   JSが読み込めなかった場合でも本文が消えないようにするため。 */
.js-reveal .rv{opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease}
.js-reveal .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-reveal .rv{opacity:1; transform:none; transition:none}
  *{animation:none !important}
  .btn,.reason{transition:none}
}
.center{text-align:center}
.mt-l{margin-top:40px}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- responsive line break ---------- */
.sp-br{display:none}
@media (min-width:520px){ .sp-br{display:inline} }

/* ---------- 運営会社表記 ---------- */
.ft__corp{margin-top:18px; font-size:var(--fs-xs); line-height:1.9; color:#8A7866}
.fcta__by{margin-top:14px !important; font-size:var(--fs-xs) !important; color:#E3D2BD !important}

/* =========================================================
   下層ページ共通
   ========================================================= */
.page-head{
  padding-top:calc(66px + 40px); padding-bottom:40px;
  background:linear-gradient(170deg,#F7F0E7 0%, #FBF8F3 60%, #FFFFFF 100%);
  border-bottom:1px solid var(--line-soft);
}
@media (min-width:1024px){ .page-head{padding-top:calc(78px + 56px); padding-bottom:52px} }
.page-head h1{font-size:var(--fs-h2); font-weight:900; line-height:1.5}
.page-head p{margin-top:16px; font-size:var(--fs-base); line-height:2; color:var(--muted); max-width:42em}
.crumb{display:flex; flex-wrap:wrap; gap:8px; font-size:var(--fs-xs); color:var(--muted); margin-bottom:18px}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--brand); text-decoration:underline}
.crumb li+li::before{content:"／"; margin-right:8px; color:#D2C3B0}
.crumb ol{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}

/* ---------- contact layout ---------- */
.ct{display:grid; gap:32px; align-items:start}
@media (min-width:960px){ .ct{grid-template-columns:1.35fr .65fr; gap:48px} }
.ct__aside{display:grid; gap:16px}
@media (min-width:960px){ .ct__aside{position:sticky; top:100px} }
.aside-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px 22px}
.aside-card h2{font-size:var(--fs-base); font-weight:700; margin-bottom:14px}
.aside-card ul{display:grid; gap:10px}
.aside-card li{position:relative; padding-left:25px; font-size:var(--fs-sm); line-height:1.8; color:var(--body)}
.aside-card li::before{content:""; position:absolute; left:0; top:.52em; width:16px; height:16px; border-radius:50%; background:var(--brand-l)}
.aside-card li::after{content:""; position:absolute; left:4.5px; top:calc(.52em + 5px); width:6px; height:3px; border-left:1.6px solid var(--brand); border-bottom:1.6px solid var(--brand); transform:rotate(-45deg)}
.aside-card--tel{background:#fff; border-color:var(--brand-line); text-align:center}
.aside-card--tel .lbl{display:block; font-size:var(--fs-xs); color:var(--muted); margin-bottom:6px}
.aside-card--tel a{display:inline-block; font-family:var(--f-head); font-weight:900; font-size:var(--fs-3xl); color:var(--ink); text-decoration:none; letter-spacing:.03em; font-variant-numeric:tabular-nums}
.aside-card--tel .hours{display:block; font-size:var(--fs-xs); color:var(--muted); margin-top:6px; line-height:1.7}

/* ---------- form ---------- */
.form{display:grid; gap:26px}
.field{display:grid; gap:9px}
.field > label,.field .lg{font-family:var(--f-head); font-weight:700; font-size:var(--fs-md); color:var(--ink); display:flex; align-items:center; gap:9px}
.req,.opt{font-size:var(--fs-xs); font-weight:700; padding:3px 8px; border-radius:4px; letter-spacing:.04em; font-family:var(--f-body)}
.req{background:#FCEDE9; color:#B4532F}
.opt{background:var(--surface-2); color:var(--muted)}
.hint{font-size:var(--fs-xs); color:var(--muted); line-height:1.75}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field select,.field textarea{
  width:100%; font-family:var(--f-body); font-size:var(--fs-base); color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-s);
  padding:14px 16px; line-height:1.7; transition:border-color .16s, box-shadow .16s;
}
.field textarea{min-height:150px; resize:vertical}
.field select{appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5l4-4' stroke='%236B7C92' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; background-size:12px; padding-right:44px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(138,101,66,.12)}
.field input::placeholder,.field textarea::placeholder{color:#C9B8A4}

.radios{display:grid; gap:10px}
@media (min-width:560px){ .radios{grid-template-columns:repeat(2,1fr)} }
.radios label{
  display:flex; align-items:center; gap:11px; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-s);
  padding:14px 16px; font-size:var(--fs-md); color:var(--ink); transition:border-color .16s, background-color .16s;
}
.radios label:hover{border-color:var(--brand-line); background:var(--brand-l2)}
.radios input{appearance:none; width:19px; height:19px; flex:none; padding:0; margin:0; border:1.5px solid #D2C3B0; border-radius:50%; background:#fff; transition:border-color .16s, box-shadow .16s}
.radios input:checked{border-color:var(--brand); border-width:6px}
.radios label:has(input:checked){border-color:var(--brand); background:var(--brand-l)}
.radios input:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

.consent{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px}
.consent label{display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:var(--fs-md); line-height:1.8; color:var(--body)}
.consent input{appearance:none; width:20px; height:20px; flex:none; padding:0; margin:.2em 0 0; border:1.5px solid #D2C3B0; border-radius:4px; background:#fff; position:relative; transition:background-color .16s, border-color .16s}
.consent input:checked{background:var(--brand); border-color:var(--brand)}
.consent input:checked::after{content:""; position:absolute; left:6px; top:2.5px; width:5px; height:10px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(42deg)}
.consent input:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.form__submit{display:grid; gap:14px; justify-items:center; text-align:center}
.form__submit .btn{width:100%; max-width:380px}
.form__submit .note{font-size:var(--fs-xs); color:var(--muted); line-height:1.8}

/* ---------- 汎用テキストページ ---------- */
.prose{max-width:760px}
.prose h2{font-size:var(--fs-xl); font-weight:900; margin:44px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line)}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:16px; font-size:var(--fs-base); line-height:2.05}
.prose ul{margin:0 0 18px; padding-left:1.3em; list-style:disc}
.prose li{margin-bottom:7px; font-size:var(--fs-base); line-height:1.95}
.prose li::marker{color:var(--muted)}
.prose dl{margin:0 0 18px}
.prose dt{font-weight:700; color:var(--ink); margin-top:14px}
.prose dd{margin:4px 0 0; padding-left:1.2em}

/* ---------- thanks ---------- */
.thanks{text-align:center; padding-block:var(--sec)}
.thanks__ic{width:66px; height:66px; margin:0 auto 26px; border-radius:50%; background:var(--brand-l); color:var(--brand); display:grid; place-items:center}
.thanks__ic svg{width:32px; height:32px}
.thanks h1{font-size:var(--fs-h2); font-weight:900; line-height:1.6}
.thanks p{margin-top:20px; font-size:var(--fs-base); line-height:2.05; color:var(--body); max-width:34em; margin-inline:auto}
.thanks__box{margin:34px auto 0; max-width:520px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; text-align:left}
.thanks__box h2{font-size:var(--fs-md); font-weight:700; margin-bottom:12px}
.thanks__box p{margin:0; font-size:var(--fs-sm); line-height:1.9; color:var(--muted); max-width:none}

/* 質問が未登録のときに編集者へ出す案内 */
.faq__empty{background:var(--surface); border:1px dashed var(--line); border-radius:var(--r); padding:20px 22px; font-size:var(--fs-sm); color:var(--muted); text-align:center}

/* =========================================================
   削減効果（数字）
   ========================================================= */
.effect{display:grid; gap:16px}
@media (min-width:820px){ .effect{grid-template-columns:1fr 1fr; gap:20px} }
.effect__card{background:#fff; border:1px solid var(--brand-line); border-radius:16px; padding:30px 26px; box-shadow:var(--sh)}
.effect__label{display:block; font-family:var(--f-head); font-weight:700; font-size:var(--fs-sm); color:var(--muted); letter-spacing:.06em; margin-bottom:20px}
.effect__row{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap}
.effect__from,.effect__to{text-align:center}
.effect__from .n{font-family:var(--f-head); font-weight:700; font-size:var(--fs-3xl); color:var(--muted); line-height:1.2; font-variant-numeric:tabular-nums; text-decoration:line-through; text-decoration-thickness:1.5px; text-decoration-color:#D2C3B0}
.effect__to .n{font-family:var(--f-head); font-weight:900; font-size:var(--fs-display); color:var(--brand); line-height:1.05; font-variant-numeric:tabular-nums}
.effect__from .u,.effect__to .u{display:block; font-size:var(--fs-xs); color:var(--muted); margin-top:6px}
.effect__ar{width:26px; height:26px; flex:none; color:var(--brand); opacity:.5}
.effect__cut{margin-top:20px; padding-top:18px; border-top:1px solid var(--line-soft); text-align:center; font-size:var(--fs-md); color:var(--body)}
.effect__cut b{font-family:var(--f-head); font-weight:900; font-size:var(--fs-xl); color:var(--ink); font-variant-numeric:tabular-nums; margin-inline:3px}
.effect__note{margin-top:20px; font-size:var(--fs-xs); line-height:1.9; color:var(--muted)}

/* =========================================================
   工程別の時間短縮表
   ========================================================= */
.wt{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff; -webkit-overflow-scrolling:touch}
.worktable{border-collapse:collapse; width:100%; min-width:560px; font-size:var(--fs-md)}
.worktable th,.worktable td{padding:14px 18px; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:middle}
.worktable thead th{background:var(--surface); font-family:var(--f-head); font-weight:700; font-size:var(--fs-xs); color:var(--ink); letter-spacing:.04em; white-space:nowrap}
.worktable thead th:nth-child(2),.worktable thead th:nth-child(3){text-align:right; width:110px}
.worktable td:nth-child(2),.worktable td:nth-child(3){text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.worktable td:nth-child(2){color:var(--muted)}
.worktable td:nth-child(3){font-family:var(--f-head); font-weight:700; color:var(--brand)}
.worktable td .how{display:block; font-size:var(--fs-xs); color:var(--muted); font-weight:400; margin-top:3px; font-family:var(--f-body)}
.worktable tbody tr:last-child td{border-bottom:0}
.worktable tfoot td{background:var(--brand-l); font-family:var(--f-head); font-weight:900; font-size:var(--fs-base); color:var(--ink); border-top:2px solid var(--brand-line)}
.worktable tfoot td:nth-child(3){color:var(--brand); font-size:var(--fs-lg)}
.wt-note{margin-top:14px; font-size:var(--fs-xs); line-height:1.9; color:var(--muted)}

/* =========================================================
   対応書類
   ========================================================= */
.docs{display:grid; gap:20px}
@media (min-width:820px){ .docs{grid-template-columns:1fr 1fr} }
.docs__box{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 24px}
.docs__box--main{background:var(--brand-l); border-color:var(--brand-line)}
.docs__box h3{font-size:var(--fs-base); font-weight:900; margin-bottom:6px}
.docs__box .lead{font-size:var(--fs-sm); color:var(--muted); line-height:1.8; margin-bottom:16px}
.docs__box--main .lead{color:var(--brand)}
.docs__box ul{display:flex; flex-wrap:wrap; gap:8px}
.docs__box li{display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-sm); font-weight:500; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--pill); padding:7px 14px}
.docs__box--main li{border-color:var(--brand-line)}
.docs__box li svg{width:13px; height:13px; color:var(--brand); flex:none}

/* =========================================================
   法令対応
   ========================================================= */
.lt{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff}
.legaltable{border-collapse:collapse; width:100%; min-width:680px; font-size:var(--fs-sm); line-height:1.85}
.legaltable th,.legaltable td{padding:16px 18px; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:top}
.legaltable thead th{background:var(--surface); font-family:var(--f-head); font-weight:700; font-size:var(--fs-xs); color:var(--ink); white-space:nowrap}
.legaltable td:first-child{font-family:var(--f-head); font-weight:700; color:var(--ink); white-space:nowrap; width:180px}
.legaltable td:last-child{color:var(--body)}
.legaltable tbody tr:last-child td{border-bottom:0}

/* =========================================================
   セキュリティ一覧
   ========================================================= */
.secgrid{display:grid; gap:14px}
@media (min-width:700px){ .secgrid{grid-template-columns:repeat(2,1fr); gap:16px} }
@media (min-width:1040px){ .secgrid{grid-template-columns:repeat(3,1fr)} }
.secbox{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px 22px}
.secbox h3{display:flex; align-items:center; gap:10px; font-size:var(--fs-base); margin-bottom:14px}
.secbox h3 svg{width:18px; height:18px; color:var(--brand); flex:none}
.secbox ul{display:flex; flex-wrap:wrap; gap:7px}
.secbox li{font-size:var(--fs-xs); color:var(--body); background:var(--surface); border-radius:var(--r-s); padding:5px 11px; line-height:1.7}

/* =========================================================
   サポート体制
   ========================================================= */
.support{display:grid; gap:16px}
@media (min-width:820px){ .support{grid-template-columns:1fr 1fr; gap:20px} }
.support__col{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px 26px}
.support__when{display:inline-block; font-family:var(--f-en); font-weight:700; font-size:var(--fs-xs); letter-spacing:.1em; color:var(--brand); background:var(--brand-l); border-radius:var(--pill); padding:5px 14px; margin-bottom:18px}
.support__col dl{display:grid; gap:18px; margin:0}
.support__col dt{font-family:var(--f-head); font-weight:700; font-size:var(--fs-md); color:var(--ink); margin-bottom:6px}
.support__col dd{margin:0; font-size:var(--fs-sm); line-height:1.9; color:var(--muted)}

/* セクション末尾から詳細ページへ送るリンク */
.more-link{margin-top:32px; text-align:center}
.more-link a{display:inline-flex; align-items:center; gap:9px; font-family:var(--f-head); font-weight:700; font-size:var(--fs-md); color:var(--brand); text-decoration:none; border-bottom:1.5px solid transparent; padding-bottom:2px; transition:border-color .16s}
.more-link a:hover{border-bottom-color:var(--brand)}
.more-link svg{width:12px; height:12px; transition:transform .16s}
.more-link a:hover svg{transform:translateX(3px)}

/* 編集者にだけ見えるメモ */
.editor-note{background:#FFF8E5; border:1px dashed #E0C27A; border-radius:var(--r-s); padding:16px 18px; font-size:var(--fs-sm); line-height:1.9; color:#7A5A1E}

/* =========================================================
   サービス名の由来（ファーストビュー直下の帯）
   ========================================================= */
.naming{background:var(--brand-l2); border-block:1px solid var(--line-soft)}
.naming .container{padding-block:44px; text-align:center}
@media (min-width:768px){ .naming .container{padding-block:56px} }
.naming__mark{width:38px; height:38px; color:var(--brand); margin:0 auto 16px; display:block}
.naming h2{font-size:var(--fs-h2); font-weight:900; line-height:1.6; letter-spacing:.04em}
.naming h2 .dot{color:var(--brand)}
.naming p{margin-top:16px; font-size:var(--fs-md); line-height:2; color:var(--muted); max-width:38em; margin-inline:auto}

/* =========================================================
   サービス紹介動画（縦長・横長どちらにも対応）

   縦横比をCSS変数で持たせているのが要点。
   ポスター画像の読み込みに失敗しても、動画要素が既定サイズ（300×150）に
   縮まないようにするため。実際の比率は読み込み後にJSが上書きする。
   ========================================================= */
.videobox{display:flex; justify-content:center}
.videobox__player{
  display:block; width:100%; max-width:1080px; height:auto;
  aspect-ratio:var(--video-ar, 16 / 9);
  object-fit:contain;
  border-radius:14px; background:#1C130B; box-shadow:var(--sh-l);
}
/* 縦長の動画のときだけ、高さで制限する */
.videobox--portrait .videobox__player{
  width:auto; max-width:100%; aspect-ratio:var(--video-ar, 9 / 16);
  max-height:min(78vh,760px);
}
@media (max-width:600px){
  .videobox__player{border-radius:10px}
  .videobox--portrait .videobox__player{max-height:none; width:100%}
}

/* =========================================================
   WordPress / SWELL 用の調整

   ヘッダー・フッター・ページの器は子テーマのテンプレートで持っているため、
   ここではWordPressが生成するマークアップとの差分だけを吸収する。
   ========================================================= */

/* 管理バーの分だけ固定ヘッダーを下げる */
body.admin-bar .hd{top:32px}
@media (max-width:782px){ body.admin-bar .hd{top:46px} }

main{display:block}

/* ロゴ */
.logo__img{height:30px; width:auto; display:block}
@media (min-width:1024px){ .logo__img{height:38px} }
.ft .logo__img{height:40px}

/* ---------- メニュー（wp_nav_menuは ul/li で出力される） ---------- */
.gnav ul{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0}
.gnav li{margin:0}
.gnav li a{font-family:var(--f-head); font-weight:700; font-size:var(--fs-md); color:var(--ink); text-decoration:none; white-space:nowrap; transition:color .16s}
.gnav li a:hover{color:var(--brand)}

.spnav ul{list-style:none; margin:0; padding:0}
.spnav li a{display:block; font-family:var(--f-head); font-weight:700; font-size:var(--fs-base); color:var(--ink); text-decoration:none; padding:15px 2px; border-bottom:1px solid var(--line-soft)}

.ft h2{font-family:var(--f-head); font-weight:700; font-size:var(--fs-sm); color:var(--ink); letter-spacing:.08em; margin:0 0 16px}
.ft ul{list-style:none; margin:0; padding:0}

/* ---------- ブロックエディタが出力する要素 ---------- */
.wp-block-group.section,
.wp-block-group.hero,
.wp-block-group.fcta,
.wp-block-group.page-head{margin-block:0}
.wp-block-image{margin:0}
.wp-block-image figure{margin:0}
figure.wp-block-image{margin:0}
.wp-block-buttons{margin:0}
.entry-content > *{margin-block:0}

/* SWELLのFAQブロックを本サイトの見た目に合わせる */
.swell-block-faq__item{background:#fff; border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px; overflow:hidden}
.swell-block-faq__item[open]{border-color:var(--brand-line)}
.swell-block-faq__question{font-family:var(--f-head); font-weight:700; font-size:var(--fs-base); color:var(--ink); padding:20px 22px}
.swell-block-faq__answer{padding:0 22px 22px; font-size:var(--fs-md); line-height:2; color:var(--body)}
.swell-block-step__number{background:var(--brand)}

/* ---------- 投稿一覧（お知らせ） ---------- */
.post-list{display:grid; gap:14px}
.post-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); transition:border-color .18s, box-shadow .18s}
.post-card:hover{border-color:var(--brand-line); box-shadow:var(--sh)}
.post-card a{display:block; padding:24px 26px; text-decoration:none}
.post-card time{display:block; font-size:var(--fs-xs); color:var(--muted); font-variant-numeric:tabular-nums; margin-bottom:8px}
.post-card h2{font-size:var(--fs-lg); line-height:1.7; margin-bottom:10px}
.post-card p{font-size:var(--fs-sm); line-height:1.9; color:var(--muted)}
.pager{margin-top:32px}
.pager .nav-links{display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
.pager .page-numbers{display:grid; place-items:center; min-width:40px; height:40px; padding:0 12px; border-radius:var(--r-s); border:1px solid var(--line); background:#fff; color:var(--ink); text-decoration:none; font-family:var(--f-head); font-weight:700; font-size:var(--fs-md)}
.pager .page-numbers.current{background:var(--brand); border-color:var(--brand); color:#fff}
.pager .page-numbers:hover:not(.current){border-color:var(--brand-line); color:var(--brand)}

/* 本文まわり（投稿など、パターンを使わないページ） */
.prose .wp-block-image{margin:24px 0}
.prose > *:first-child{margin-top:0}

/* 質問が未登録のときに編集者へ出す案内 */
.faq__empty{background:var(--surface); border:1px dashed var(--line); border-radius:var(--r); padding:20px 22px; font-size:var(--fs-sm); color:var(--muted); text-align:center}

/* スキップリンク */
.skip-link:focus{position:fixed; top:8px; left:8px; width:auto; height:auto; clip:auto; padding:10px 16px; background:#fff; border:2px solid var(--brand); border-radius:var(--r-s); z-index:200}

/* =========================================================
   料金表（金額が確定してから使うパターン用）
   ========================================================= */
.plans{display:grid; gap:16px; max-width:860px; margin-inline:auto}
@media (min-width:768px){ .plans{grid-template-columns:repeat(2,1fr); gap:20px} }
.plan{background:#fff; border:1px solid var(--brand-line); border-radius:16px; padding:30px 26px; box-shadow:var(--sh)}
.plan__for{display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; color:var(--muted); margin-bottom:8px}
.plan h3{font-size:var(--fs-xl); font-weight:900; margin-bottom:16px}
.plan__price{display:flex; align-items:baseline; gap:6px; padding-bottom:20px; border-bottom:1px solid var(--line-soft); margin-bottom:20px}
.plan__price b{font-family:var(--f-head); font-weight:900; font-size:var(--fs-display); color:var(--brand); line-height:1.1; font-variant-numeric:tabular-nums}
.plan__price .unit{font-size:var(--fs-sm); color:var(--muted); font-weight:500}
.plan ul{display:grid; gap:10px; list-style:none; padding:0; margin:0}
.plan li{display:flex; gap:11px; align-items:flex-start; font-size:var(--fs-md); line-height:1.8}
.plan li svg{width:17px; height:17px; color:var(--brand); flex:none; margin-top:.32em}
.price__note.center{text-align:center}

/* =========================================================
   実績・数字（実績が出てから使うパターン用）
   ========================================================= */
.stats{display:grid; gap:16px}
@media (min-width:768px){ .stats{grid-template-columns:repeat(3,1fr); gap:20px} }
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px 26px; text-align:center}
.stat__label{display:block; font-family:var(--f-head); font-weight:700; font-size:var(--fs-sm); color:var(--muted); letter-spacing:.06em; margin-bottom:12px}
.stat__num{display:flex; align-items:baseline; justify-content:center; gap:5px}
.stat__num b{font-family:var(--f-head); font-weight:900; font-size:var(--fs-display); line-height:1.05; color:var(--brand); font-variant-numeric:tabular-nums}
.stat__num span{font-size:var(--fs-base); font-weight:700; color:var(--ink)}
.stat__note{margin-top:12px; font-size:var(--fs-xs); line-height:1.8; color:var(--muted)}

/* =========================================================
   Contact Form 7
   ========================================================= */
.ct__form .wpcf7{margin:0}
/* CF7が生成する form 要素には独自のクラスが付かないため、ここで組み直す */
.ct__form .wpcf7-form{display:grid; gap:26px}
.ct__form .wpcf7-form > p{margin:0}
.ct__form .wpcf7-form > p:empty{display:none}
.ct__form .field{display:grid; gap:9px}
/* CF7は選択肢を span で二重に包んで出すため、外側の段組みは解除し、
   選択肢を持つ span 側で段を作る。
   （解除しないと段組みが二重になり、カードの幅が半分になる） */
.radios:has(.wpcf7-form-control){display:block}
.radios .wpcf7-form-control-wrap{display:block; width:100%}
.radios .wpcf7-form-control{display:grid; gap:12px; align-items:stretch}
@media (min-width:560px){ .radios .wpcf7-form-control{grid-template-columns:repeat(2,1fr)} }
.radios .wpcf7-list-item{margin:0; display:flex}
.radios .wpcf7-list-item label{width:100%; align-items:center; min-height:76px; padding:18px 20px; font-size:var(--fs-base); gap:13px}
.radios .wpcf7-list-item input{width:21px; height:21px; padding:0; margin:0}
.radios .wpcf7-list-item input:checked{border-width:7px}
.consent .wpcf7-list-item input{padding:0}
.radios .wpcf7-list-item-label{font-size:var(--fs-md)}
.consent .wpcf7-list-item{margin:0}
.consent .wpcf7-list-item-label{font-size:var(--fs-md); line-height:1.8}
.field .wpcf7-form-control-wrap{display:block}
.wpcf7 .wpcf7-not-valid-tip{color:#B4532F; font-size:var(--fs-xs); margin-top:6px}
.wpcf7 .wpcf7-response-output{margin:20px 0 0; padding:14px 18px; border-radius:var(--r-s); border:1.5px solid var(--line); font-size:var(--fs-sm); line-height:1.8}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{border-color:#E8BFB2; background:#FCEDE9; color:#8A3B22}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--brand-line); background:var(--brand-l); color:var(--brand)}
.wpcf7-spinner{display:block; margin:14px auto 0}
.grecaptcha-badge{visibility:hidden}
.recaptcha-note{font-size:var(--fs-xs); color:var(--muted); line-height:1.8; text-align:center; margin-top:16px}
.recaptcha-note a{color:var(--muted)}