/* ===================================================================
   NEXT STEP BASE  全ページ共通のスタイル

   透明感（白と淡い青・すりガラス）を保ったまま、「引き算と統一」で洗練させたデザイン。
   ・決まりを少なくする：文字の大きさ・字間・太さ・丸み・影・余白は、
     下の「物差し」（:root）だけを使う。新しい値を直接書かない
   ・飾りを減らす：枠線はなくし、面と影だけで区切る。ストライプはトップの見出しまわりだけ
   ・やわらかさは、余白・軽さ・そろった丸みで出す
   ・濃い色の塗りは相談ボタンだけ（どの画面でも相談ボタンが一番目立つように）

   もくじ
     0. 物差し（文字の大きさ・字間・太さ・行の高さ・丸み・影・余白・動き・アイコン）
     1. 基本設定（色・字体・光・共通の部品）
     2. ヘッダー（ロゴ＋タブバー＋相談ボタン）
     3. フッター
     4. トップページ
     5. サービスページ
     6. 相談ボタン（相談セクション・ヘッダー・スマホの固定バー）
     7. 日本語の改行
     8. ページを開いたときの動き
     9. 案内チャット「お困りごとから探す」
    10. 申し込みフォーム（form/）
    11. 料金の目安（price/）
   =================================================================== */

/* ===================================================================
   0. 物差し
   スマホの値を基本にし、768px以上でPCの値に切り替える
   =================================================================== */
:root{
  /* --- 文字の大きさ（スマホ6段階／PC7段階） --- */
  --fs-xs:   13px;   /* 印・注記・英字のラベル */
  --fs-sm:   14px;   /* 小さな説明・チップ・料金・フッター */
  --fs-base: 16px;   /* 本文 */
  --fs-md:   18px;   /* リード文・カードの名前・流れの名前 */
  --fs-lg:   22px;   /* セクションの見出し */
  --fs-xl:   26px;   /* ページの見出し */
  --fs-2xl:  26px;   /* トップのキャッチコピー（スマホはページの見出しと同じ） */

  /* --- 字間（3種類） --- */
  --ls-0: 0;         /* 本文・見出し */
  --ls-1: .04em;     /* ボタン・タブ・印 */
  --ls-2: .12em;     /* 英字の小さなラベル */

  /* --- 文字の太さ（3種類） --- */
  --fw-regular: 400; /* 本文 */
  --fw-medium:  500; /* 見出し・英字のラベル */
  --fw-bold:    700; /* ページの大見出し・ボタン・印・強調 */

  /* --- 行の高さ（3種類） --- */
  --lh-tight: 1.4;   /* 見出し */
  --lh-snug:  1.6;   /* 小さな文字・カードの説明 */
  --lh-body:  1.8;   /* 本文 */

  /* --- 角の丸み（3種類） --- */
  --r-sm:   8px;     /* 小さい部品：印・カテゴリの印・「開業準備中」 */
  --r-md:   20px;    /* カード（お悩み・できること・比較・流れ・置き換え例・リンクカード） */
  --r-pill: 999px;   /* 丸い形：ボタン・タブ・チップ・番号の丸 */

  /* --- 影（2種類：ふだん用・触れたとき用。青みのある淡く広がる影） --- */
  --shadow:       0 1px 2px rgba(19,49,104,.04), 0 8px 24px -8px rgba(31,110,190,.20);
  --shadow-hover: 0 2px 4px rgba(19,49,104,.05), 0 16px 40px -12px rgba(31,110,190,.32);

  /* --- 余白（8pxの倍数） --- */
  --sp-1:   8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  48px;
  --sp-6:  64px;
  --sp-7: 112px;
  --section-y: var(--sp-6);   /* セクションの上下の余白（全ページ共通） */
  --gutter-x:  var(--sp-3);   /* 画面の左右の余白 */

  /* --- 動き（触れたときの反応とページを開いたときの動きで共通） --- */
  --dur:  .25s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* 動き出しは速く、最後はゆっくり止まる */
  --lift: translateY(-2px);                 /* 触れたときに少し浮く */

  /* --- アイコン（線の太さは見た目で1.8pxにそろえる） --- */
  --icon-lg: 24px;   /* カードのアイコン */
  --icon-sm: 20px;   /* 文字の横に並ぶアイコン（ボタン・チェック・矢印） */

  /* --- イラスト（サービスページの見出しまわり） --- */
  --illust-h: 220px; /* 1列（960px未満）のときの高さの上限 */

  /* --- 案内チャット（お困りごとから探す） --- */
  --guide-w:  400px;  /* PC：右下に開く画面の幅 */
  --guide-h:  600px;  /* PC：右下に開く画面の高さの上限 */
  --sheet-h:  85vh;   /* スマホ：画面下から開く画面の高さ（下の @supports で dvh に置き換える） */
  --anchor-y: calc(var(--sp-6) + var(--sp-3));   /* 88px：「詳しく見る」で移動したとき、カードの上にあける高さ（残るヘッダーの下に出す） */
}
@supports (height:1dvh){
  :root{ --sheet-h: 85dvh; }   /* スマホのアドレスバーが出入りしても、高さがずれない */
}
/* 360px前後の細いスマホでは、左右の余白を少しだけ狭める（キャッチコピーを2行に収めるため） */
@media (max-width:374px){
  :root{ --gutter-x: var(--sp-2); }
}
@media (min-width:768px){
  :root{
    --fs-sm:   15px;
    --fs-md:   20px;
    --fs-lg:   28px;
    --fs-xl:   40px;
    --fs-2xl:  48px;
    --section-y: var(--sp-7);
    --anchor-y:  var(--sp-7);   /* PCは残るヘッダーが高いので広めに */
  }
}

/* ===================================================================
   1. 基本設定
   =================================================================== */
:root{
  /* --- 色（本文は背景に対して 7:1 以上、小さい文字は 4.5:1 以上。
         一番濃い背景（相談セクションの右下 #deeefc）でも満たす値） --- */
  --navy:        #133168;  /* 紺：見出し・ロゴ・タブの文字・印の文字（白地 12.6:1） */
  --blue:        #1f9bf0;  /* 水色：アイコン・ストライプだけ。文字には使わない（白地 3.0:1） */
  --blue-text:   #0b72c4;  /* 濃い青：相談ボタンの塗り／白い面の上の小さい青文字だけ（白地 4.98:1） */
  --blue-hover:  #0a5fa3;  /* 濃い青のボタンに触れたとき */
  --text:        #34466a;  /* 本文：明るい紺グレー（白地 9.4:1／一番濃い背景 7.96:1） */
  --text-dim:    #4d5d78;  /* 補足の小さい文字（白地 6.66:1／一番濃い背景 5.63:1） */
  --bg:          #ffffff;

  /* --- 淡い面と線 --- */
  --tint-blue:   rgba(31,155,240,.12);   /* 淡い水色の面（「月額」「オンライン」などの印） */
  --tint-navy:   rgba(19,49,104,.06);    /* 淡い紺の面（「対面」「SNS」の印・タブ・チップ） */
  --tint-soft:   rgba(31,155,240,.07);   /* ごく淡い水色の面（項目のチップ・置き換え例） */
  --tab-current: #e6f3fe;                /* ご相談の流れの番号の地 */
  --line:        rgba(19,49,104,.08);    /* 細く淡い線（ヘッダー・相談バーの区切りだけ） */
  --line-strong: rgba(19,49,104,.14);    /* 「開業準備中」の細い枠 */
  --scrim:       rgba(19,49,104,.24);    /* 案内チャットを開いたときの、うしろの暗さ */
  --ring:        rgba(31,155,240,.45);   /* 案内チャットで移動した先のカードを、少しのあいだ光らせる輪 */

  /* --- 面（すりガラス） --- */
  --surface:      rgba(255,255,255,.80); /* カードの白い面（奥の光がほんのり透ける） */
  --glass:        rgba(255,255,255,.85); /* ヘッダー・画面下の相談バー（ぼかしと合わせて使う） */
  --glass-solid:  rgba(255,255,255,.96); /* ぼかしに対応していないブラウザ用（ほぼ白） */
  --glass-blur:   blur(12px) saturate(1.4);

  /* --- 光（右上から差す淡い光／セクションの淡いグラデーション） --- */
  --light-corner: radial-gradient(ellipse 75% 95% at 100% 0%, rgba(31,155,240,.12) 0%, rgba(31,155,240,.05) 45%, rgba(31,155,240,0) 75%);
  --light-wash:   linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
  --light-alt:    linear-gradient(180deg, #f7fbff 0%, #eef6fe 100%);
  --light-consult:linear-gradient(160deg, #ffffff 0%, #f2f8ff 50%, #deeefc 100%);

  /* --- 字体 --- */
  --font-body:    "BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",
                  "Yu Gothic Medium","Meiryo",system-ui,sans-serif;
  --font-heading: "Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",
                  "Yu Gothic","Meiryo",sans-serif;
  --font-latin:   "Montserrat","Hiragino Sans","Yu Gothic",sans-serif;   /* 英字は小さなアクセントだけ */

  /* --- 幅 --- */
  --maxw:   1040px;   /* 中身の最大幅 */
  --gutter: max(var(--gutter-x), calc((100% - var(--maxw)) / 2));   /* 中身を中央にそろえる左右の余白 */

  /* --- 絵（名刺の斜めストライプ・アイコン）。HTMLに書かずに済むよう、ここで持つ
         ストライプは塗りつぶさず、上が濃く下へ行くほど水色に抜けて透ける。使うのはトップの見出しまわりだけ
         アイコンは24の枠で描き、20pxで表示したときに線が1.8pxになる太さ（2.16）にしてある --- */
  --img-stripe:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 200'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231f9bf0' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%231f9bf0' stop-opacity='.08'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23133168' stop-opacity='.72'/%3E%3Cstop offset='.55' stop-color='%231f9bf0' stop-opacity='.42'/%3E%3Cstop offset='1' stop-color='%231f9bf0' stop-opacity='.06'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='96,0 124,0 22,200 -6,200' fill='url(%23a)'/%3E%3Cpolygon points='142,0 224,0 122,200 40,200' fill='url(%23b)'/%3E%3C/svg%3E");
  --icon-mail:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.16' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");
  --icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
  --icon-check:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.16' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16.2 9.5'/%3E%3C/svg%3E");
  --icon-chevron:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-search:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.16' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5l5 5'/%3E%3C/svg%3E");
  --icon-close:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --icon-calendar:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.16' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E");
  --icon-chat:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5c4.7 0 8.5 3 8.5 6.8s-3.8 6.8-8.5 6.8c-.9 0-1.8-.1-2.6-.3L5 19.5l1.2-3.4C4.6 14.9 3.5 13.2 3.5 11.3 3.5 7.5 7.3 4.5 12 4.5z'/%3E%3C/svg%3E");
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  font-weight:var(--fw-regular);
  line-height:var(--lh-body);
  /* iPhoneを横向きにしたとき、ノッチ（画面の切り欠き）に文字がかからないように */
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

img{ max-width:100%; height:auto; }
small{ font-size:inherit; }               /* <small> で文字が物差しより小さくならないように */

[hidden]{ display:none !important; }      /* hidden の部品（JavaScriptが動くまで隠す入口など）は、どの見た目の指定よりも優先して隠す */

/* キーボードで操作したときの枠 */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--blue-text);
  outline-offset:3px;
}

/* 画面には出さず、読み上げだけで伝える文字 */
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* 中身の幅をそろえる入れ物 */
.container{
  width:100%;
  max-width:calc(var(--maxw) + var(--gutter-x) * 2);
  margin:0 auto;
  padding:0 var(--gutter-x);
}

/* カード・カテゴリのアイコン（線の色は水色、線の太さは1.8px） */
.svc-icon{
  flex-shrink:0;
  width:var(--icon-lg); height:var(--icon-lg);
  color:var(--blue);
}

/* CSSで描くアイコン（封筒・チェック・矢印）の共通の形 */
.consult-btn::before, .worries li::before, .example-after::before, .svc-card::after{
  content:"";
  flex-shrink:0;
  width:var(--icon-sm); height:var(--icon-sm);
  background:currentColor;
  -webkit-mask:var(--icon) center / contain no-repeat;
          mask:var(--icon) center / contain no-repeat;
}

/* --- 触れたときの反応（全部品で同じ：少し浮く・影が広がる・色が変わる） --- */
.svc-card, .tabs a, .consult-btn{
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (hover:hover){
  .svc-card:hover, .tabs a:hover, .consult-btn:hover{
    transform:var(--lift);
    box-shadow:var(--shadow-hover);
  }
}
/* 動きを減らす設定では、浮く動きも色の変化の動きもつけない */
@media (prefers-reduced-motion:reduce){
  .svc-card, .tabs a, .consult-btn, .footer-nav a, .biz-table a, .policy a{ transition:none; }
  .svc-card:hover, .tabs a:hover, .consult-btn:hover{ transform:none; }
}

/* ===================================================================
   2. ヘッダー（ロゴ＋タブバー＋相談ボタン）
   スマホ（〜767px）：1段目ロゴ、2段目タブバー。スクロールするとロゴの段は消え、タブの段だけ残る
   768〜899px     ：1段目ロゴ、2段目タブバー＋相談ボタン。スクロールすると2段目だけ残る
   900px〜        ：ロゴ｜タブバー｜相談ボタンを横1段で上に固定
   残るヘッダーは半透明の白＋ぼかし（すりガラス）。ぼかしに対応していないブラウザではほぼ白
   =================================================================== */
.site-header{
  position:sticky;
  top:-56px;                              /* ロゴの段（高さ56px）だけ上に消えて、タブの段が残る */
  z-index:10;
  background-color:var(--glass-solid);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;
  flex-direction:column;
}

/* --- ロゴ（押すとトップへ） --- */
.brand{
  align-self:flex-start;                  /* 押せる範囲はロゴの幅だけ（右上のストライプにかからない） */
  height:56px;
  padding:0 var(--gutter-x);
  display:flex; align-items:center; gap:var(--sp-1);
  color:var(--navy);
  text-decoration:none;
}
.brand img{ width:32px; height:auto; flex-shrink:0; }
.brand-name{
  font-family:var(--font-latin);
  font-size:var(--fs-base);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-2);
  white-space:nowrap;
}

/* --- タブバー（5つのタブは折り返さず横一列）。枠線はなく、淡い面の丸い形 --- */
.tabs{ padding:var(--sp-1) var(--gutter-x); }   /* 左右はロゴと同じ余白にそろえる */
.tabs ul{
  list-style:none;
  display:flex;
  gap:var(--sp-1);
}
.tabs li{ flex:1 1 0; min-width:0; }   /* 5つを同じ幅に */
.tabs a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:44px;
  border-radius:var(--r-pill);
  background-color:var(--tint-navy);
  color:var(--navy);
  line-height:var(--lh-tight);
  text-decoration:none;
}
@media (hover:hover){
  .tabs a:hover{ background-color:#fff; }
}
.tab-cat{                                 /* Web / SNS / DX / IT / AI */
  font-family:var(--font-latin);
  font-size:var(--fs-base);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-1);
}
.tab-sub{                                 /* 日本語の補足（狭い画面では隠す） */
  display:none;
  font-size:var(--fs-xs);
  color:var(--text-dim);
  white-space:nowrap;
}
/* 今いるページのタブ：白く浮いた面＋濃い青の文字（相談ボタンより目立たせない） */
.tabs a[aria-current="page"]{
  background-color:#fff;
  box-shadow:var(--shadow);
  color:var(--blue-text);
}

@media (min-width:520px){
  .tab-sub{ display:block; }
  .tabs a{ min-height:52px; }
}

/* スマホのトップページだけ：ロゴの段の右上に、名刺の斜めストライプ（見出しに重ならない位置） */
@media (max-width:767px){
  .site-header:has(+ main .hero){
    background-image:var(--img-stripe);
    background-repeat:no-repeat;
    background-position:right top;
    background-size:62px 56px;
  }
}

/* 768px以上：2段目にタブバー＋相談ボタン */
@media (min-width:768px){
  .header-inner{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    column-gap:var(--sp-2);
    padding:0 var(--gutter-x) var(--sp-1);
  }
  .brand{ grid-column:1 / -1; justify-self:start; padding:0; }
  .tabs{ padding:0; }
}
/* 900px以上：ロゴ｜タブバー｜相談ボタンを横1段 */
@media (min-width:900px){
  .site-header{ top:0; }
  .header-inner{
    grid-template-columns:auto minmax(0, 1fr) auto;
    column-gap:var(--sp-3);
    max-width:1280px;
    margin:0 auto;
    padding:var(--sp-2) var(--sp-5);
  }
  .brand{ grid-column:auto; height:auto; gap:var(--sp-2); }
  .brand img{ width:40px; }
  .brand-name{ font-size:var(--fs-md); }
  .tabs{ justify-self:end; width:100%; max-width:560px; }
}

/* ===================================================================
   3. フッター（線はなく、余白で区切る）
   スマホ：リンク → 対応エリア → お問い合わせ の順に1列
   768px以上：左に対応エリア・お問い合わせ、右にリンク
   =================================================================== */
.site-footer{
  padding:var(--sp-6) var(--gutter-x) var(--sp-4);
  background:var(--bg);
  color:var(--text-dim);
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
}
.footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
}

/* --- フッターのリンク（料金・事業者情報などは後からここに li を足す）。押せる高さ 44px --- */
.footer-nav ul{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:var(--sp-2);
}
.footer-nav a{
  min-height:44px;
  display:flex; align-items:center;
  color:var(--text);
  text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.footer-nav a:hover{ color:var(--blue-text); text-decoration:underline; text-underline-offset:3px; }

/* --- 対応エリア --- */
.site-footer .reach{
  margin-top:var(--sp-4);
  font-family:var(--font-heading);
  font-size:var(--fs-base);
  font-weight:var(--fw-medium);
  color:var(--navy);
}
.site-footer .areas{
  margin-top:var(--sp-2);
  display:flex; flex-direction:column; gap:var(--sp-1);
}
.site-footer .areas .row{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--sp-1);
}
.site-footer .areas dt{                   /* 「対面」「オンライン」の印（淡い面＋紺の文字） */
  flex-shrink:0;
  padding:0 var(--sp-1);
  border-radius:var(--r-sm);
  background:var(--tint-navy);
  color:var(--navy);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-1);
  line-height:var(--lh-body);
}
.site-footer .areas dd{ color:var(--text); }
.site-footer .areas .online dt{ background:var(--tint-blue); }
.site-footer .areas .online dd{ font-weight:var(--fw-bold); color:var(--navy); }

/* --- お問い合わせ・コピーライト --- */
.site-footer .contact{ margin-top:var(--sp-2); }
.site-footer .contact a{
  color:var(--blue-text);
  font-weight:var(--fw-bold);
  text-underline-offset:3px;
  white-space:nowrap;                     /* メールアドレスは途中で折り返さない */
}
.site-footer .contact a:hover{ color:var(--blue-hover); }
.site-footer .copyright{
  margin-top:var(--sp-5);
  font-family:var(--font-latin);
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-2);
}

@media (min-width:768px){
  .footer-inner{
    grid-template-columns:minmax(0, 1fr) auto;
    column-gap:var(--sp-6);
  }
  .footer-nav{ grid-column:2; grid-row:1 / span 3; }
  .footer-nav ul{ column-gap:var(--sp-5); }
  .site-footer .reach{ grid-column:1; grid-row:1; margin-top:0; }
  .site-footer .areas{ grid-column:1; grid-row:2; }
  .site-footer .contact{ grid-column:1; grid-row:3; }
  .site-footer .copyright{ grid-column:1 / -1; }
}

/* ===================================================================
   4. トップページ（このセクションで一番見せたいもの：キャッチコピー）
   =================================================================== */
.hero{
  position:relative;
  overflow:hidden;                        /* 右上の装飾をはみ出させない */
  padding:var(--sp-5) var(--gutter-x) var(--sp-6);
  background-image:var(--light-corner), var(--light-wash);   /* 右上から差す淡い光 */
}
.hero-inner{
  position:relative; z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
}

/* --- 「Web / SNS / DX / IT Partner」（控えめな英字のラベル） --- */
.eyebrow{
  font-family:var(--font-latin);
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-2);
  line-height:var(--lh-snug);
  color:var(--text-dim);
  white-space:nowrap;
}

/* --- キャッチコピー --- */
.catch{
  margin-top:var(--sp-2);
  font-family:var(--font-heading);
  font-size:var(--fs-2xl);
  font-weight:var(--fw-bold);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-0);
  color:var(--navy);
}

/* --- 5つのサービスカード（4枚＋AIは横いっぱい） --- */
.services{
  margin-top:var(--sp-4);
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));   /* スマホは2列 */
  gap:var(--sp-2);
  list-style:none;
}
/* AIだけは全幅で横並び（名刺の4カテゴリとは別枠の位置づけ） */
.services .ai{ grid-column:1 / -1; }

/* --- 開業準備中の表示（押せないので、ボタンに見えない細い枠線だけのラベル） --- */
.soon{
  display:inline-block;
  margin-top:var(--sp-3);
  padding:0 var(--sp-2);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);
  letter-spacing:var(--ls-1);
  color:var(--text-dim);
}

@media (min-width:640px){
  .services{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--sp-3); }   /* PCは4列 */
}
@media (min-width:768px){
  /* 右上に名刺の斜めストライプ（透けるグラデーション）＋淡い光。ストライプはここだけ */
  .hero{
    padding:var(--sp-7) var(--gutter) var(--sp-6);
    background-image:var(--img-stripe), var(--light-corner), var(--light-wash);
    background-repeat:no-repeat;
    background-position:right top, 0 0, 0 0;
    background-size:clamp(170px, 23vw, 300px) auto, auto, auto;
  }
  .catch{ margin-top:var(--sp-3); }
  .services{ margin-top:var(--sp-6); }
  .soon{ margin-top:var(--sp-5); }
}

/* ページを開いたときの動きは「8. ページを開いたときの動き」にまとめてある */

/* ===================================================================
   サービスへのリンクカード
   トップの5枚と、サービスページ下の「ほかのサービス」で共通
   枠線はなく、半透明の白い面＋ふんわりした影。英字は小さなラベル、日本語の名前を主役にする
   =================================================================== */
.svc-card{
  --icon:var(--icon-chevron);
  position:relative;
  height:100%;
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-1);
  padding:var(--sp-2);
  border-radius:var(--r-md);
  background-color:var(--surface);
  box-shadow:var(--shadow);
  text-decoration:none;
}
@media (hover:hover){
  .svc-card:hover{ background-color:#fff; }
}
/* 押せることを示す右上の矢印（カードのアイコンと中心の高さをそろえる） */
.svc-card::after{
  position:absolute;
  top:calc(var(--sp-2) + (var(--icon-lg) - var(--icon-sm)) / 2);
  right:var(--sp-2);
  color:var(--blue);
}
/* 英字のカテゴリ名（小さなラベル） */
.svc-card .cat{
  margin-top:var(--sp-1);
  font-family:var(--font-latin);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-2);
  line-height:var(--lh-snug);
  color:var(--blue-text);
}
/* 日本語の名前（カードの主役） */
.svc-card .desc{
  font-family:var(--font-heading);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  line-height:var(--lh-snug);
  color:var(--navy);
}
/* AIカード：横並び。白い面の上に、右へ行くほど淡い水色がにじむ */
.services .ai .svc-card{
  flex-direction:row; align-items:center; gap:var(--sp-2);
  padding-right:var(--sp-6);
  background:linear-gradient(90deg, rgba(226,240,253,0) 30%, rgba(226,240,253,.75) 100%), rgba(255,255,255,.88);
}
.services .ai .svc-card .cat{ margin-top:0; }
.services .ai .svc-card::after{ top:50%; transform:translateY(-50%); }

@media (min-width:640px){
  .svc-card{ padding:var(--sp-3); }
  .svc-card::after{ top:calc(var(--sp-3) + (var(--icon-lg) - var(--icon-sm)) / 2); right:var(--sp-3); }
  .svc-card .cat{ margin-top:var(--sp-2); }
  .svc-card .desc{ font-size:var(--fs-base); }
  .services .ai .svc-card{ gap:var(--sp-3); }
}

/* ===================================================================
   5. サービスページ
   =================================================================== */

/* --- 1) 見出し（カテゴリ名＋日本語名＋リード文）。一番見せたいもの：ページの見出し --- */
.page-hero{
  padding:var(--sp-5) var(--gutter-x) var(--sp-6);
  background-image:var(--light-corner), var(--light-wash);   /* 右上から差す淡い光 */
}
.page-cat{                                /* カテゴリの印（白い面だけ。枠はつけない） */
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-2);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.85);
  font-family:var(--font-latin);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-2);
  line-height:var(--lh-tight);
  color:var(--blue-text);
}
.page-cat .svc-icon{
  width:var(--icon-sm); height:var(--icon-sm);
  stroke-width:2.16;                      /* 20pxで表示しても線が1.8pxになるように */
}
.page-title{
  margin-top:var(--sp-3);
  font-family:var(--font-heading);
  font-size:var(--fs-xl);
  font-weight:var(--fw-bold);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-0);
  color:var(--navy);
}
.lead{
  max-width:34em;
  margin-top:var(--sp-2);
  font-size:var(--fs-md);
  line-height:var(--lh-body);
  color:var(--text);
}
@media (min-width:768px){
  .page-hero{ padding:var(--sp-7) var(--gutter) var(--sp-6); }
  .lead{ margin-top:var(--sp-3); }
}

/* --- イラスト（サービスページだけ。枠・影・背景の四角はつけない。背景は透明で、見出しまわりの光になじむ）
       960px未満：1列。見出しとリード文のあとに置き、高さを --illust-h までに抑える（左寄せ）
       960px以上：2列。左に文章、右にイラスト。上下の中心をそろえる --- */
.page-illust{
  display:block;
  width:100%;
  height:auto;                            /* HTMLの width/height（960×600）から高さが決まり、読み込み中もずれない */
  max-height:var(--illust-h);
  margin-top:var(--sp-4);
  object-fit:contain;
  object-position:left center;
}
@media (min-width:960px){
  .page-hero-inner{
    display:grid;
    grid-template-columns:minmax(0, 6fr) minmax(0, 5fr);   /* 文章 6：イラスト 5 */
    align-items:center;
    column-gap:var(--sp-5);
  }
  .page-illust{ max-height:none; margin-top:0; }
}

/* --- セクション共通（上下の余白は全ページで同じ） --- */
.section{ padding:var(--section-y) 0; }
.section-alt{ background-image:var(--light-alt); }
.section-title{
  font-family:var(--font-heading);
  font-size:var(--fs-lg);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-0);
  color:var(--navy);
}
.section-lead{
  max-width:38em;
  margin-top:var(--sp-2);
  line-height:var(--lh-body);
  color:var(--text);
}

/* --- 白い面（カード）の共通の見た目：枠線はなく、半透明の白い面＋ふんわりした影 --- */
.worries li, .compare-item, .service-card, .flow{
  border-radius:var(--r-md);
  background:var(--surface);
  box-shadow:var(--shadow);
}

/* --- 2) こんなお悩みありませんか --- */
.worries{
  list-style:none;
  margin-top:var(--sp-4);
  display:grid;
  gap:var(--sp-2);
}
.worries li{
  --icon:var(--icon-check);
  position:relative;
  /* 文章は普通の流れのまま（<span class="nowrap"> などが並びを崩さないように）、左にチェックの場所をあける */
  padding:var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + var(--icon-sm) + var(--sp-2));
  line-height:var(--lh-body);
  color:var(--text);
}
/* 左のチェック（1行目の文字と中心の高さをそろえる） */
.worries li::before{
  position:absolute;
  left:var(--sp-3);
  top:calc(var(--sp-3) + (var(--lh-body) * 1em - var(--icon-sm)) / 2);
  color:var(--blue);
}
@media (min-width:768px){
  .worries{ margin-top:var(--sp-5); gap:var(--sp-3); }
}
/* 3列にするのは960px以上（それより狭いと1行が9字ほどになり、単語の途中で折れるため） */
@media (min-width:960px){
  .worries{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* --- SNSとLINE公式の違い（SNSページのみ）。一番見せたいもの：2つの役割の文 --- */
.compare{
  margin-top:var(--sp-4);
  display:grid;
  gap:var(--sp-2);
}
.compare-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2);
  padding:var(--sp-3);
}
.compare-label{                           /* 淡い面＋紺の文字（枠はつけない） */
  padding:0 var(--sp-1);
  border-radius:var(--r-sm);
  background:var(--tint-navy);
  color:var(--navy);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-1);
  line-height:var(--lh-body);
}
.compare-item.line .compare-label{ background:var(--tint-blue); }
.compare-role{
  font-family:var(--font-heading);
  font-size:var(--fs-md);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  color:var(--navy);
}
.compare-text{
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  color:var(--text);
}
.compare-note{
  margin-top:var(--sp-3);
  line-height:var(--lh-body);
  color:var(--text);
}
@media (min-width:640px){
  .compare{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:768px){
  .compare{ margin-top:var(--sp-5); gap:var(--sp-3); }
  .compare-item{ padding:var(--sp-4); }
  .compare-note{ margin-top:var(--sp-4); }
}

/* --- 3) できること（サービスごとのカード）。一番見せたいもの：サービスの名前 --- */
.service-list{
  margin-top:var(--sp-4);
  display:grid;
  gap:var(--sp-2);
}
.service-card{
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--sp-3);
}
.service-name{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1);
  font-family:var(--font-heading);
  font-size:var(--fs-md);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  color:var(--navy);
}
.tag{                                     /* 「月額」などの小さな印（淡い面＋紺の文字。枠はつけない） */
  padding:0 var(--sp-1);
  border-radius:var(--r-sm);
  background:var(--tint-blue);
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-1);
  line-height:var(--lh-body);
  color:var(--navy);
}
.service-text{
  line-height:var(--lh-body);
  color:var(--text);
}
.service-points{
  list-style:none;
  display:flex; flex-wrap:wrap;
  gap:var(--sp-1);
}
.service-points li{                       /* 項目のチップ（ごく淡い面だけ。控えめに） */
  padding:0 var(--sp-2);
  border-radius:var(--r-pill);
  background:var(--tint-soft);
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  color:var(--text);
}

/* --- 料金の目安（金額が決まったら .price の中の「準備中」を書き換える）。線はつけず、余白で区切る --- */
.price{
  margin-top:auto;                        /* カードの一番下にそろえる */
  padding-top:var(--sp-1);
  font-size:var(--fs-sm);
  color:var(--text-dim);
}
.price-value{
  font-weight:var(--fw-bold);
  color:var(--navy);
}

@media (min-width:720px){
  .service-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-3); }
  .service-card.wide{ grid-column:1 / -1; }   /* 横いっぱいのカード */
}
@media (min-width:768px){
  .service-list{ margin-top:var(--sp-5); }
  .service-card{ padding:var(--sp-4); }
}
@media (min-width:1000px){
  .service-list.three{ grid-template-columns:repeat(3, minmax(0, 1fr)); }   /* カードが3枚のページ */
}

/* --- たとえば（DXページの置き換え例） --- */
.examples-title{
  margin-top:var(--sp-1);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--blue-text);
}
.examples{
  list-style:none;
  display:grid;
  gap:var(--sp-2);
}
.example{
  display:flex; flex-direction:column; gap:var(--sp-1);
  padding:var(--sp-2);
  border-radius:var(--r-md);
  background:var(--tint-soft);
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
}
.example-name{
  font-weight:var(--fw-bold);
  color:var(--navy);
}
.example-before{ color:var(--text); }
.example-after{
  --icon:var(--icon-arrow-down);
  font-weight:var(--fw-bold);
  color:var(--navy);
}
.example-after::before{                   /* 「前 → 後」の矢印（水色の線） */
  display:block;
  margin-bottom:var(--sp-1);
  background:var(--blue);
}
@media (min-width:720px){
  .examples{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* --- 4) ご相談の流れ（5ページ共通）：番号つきの縦のリスト。線はつけない --- */
.flow{
  list-style:none;
  counter-reset:step;
  max-width:880px;
  margin-top:var(--sp-4);
  padding:var(--sp-2) var(--sp-3);
}
.flow li{
  counter-increment:step;
  display:grid;
  grid-template-columns:40px minmax(0, 1fr);
  column-gap:var(--sp-2);
  padding:var(--sp-2) 0;
}
/* 番号の丸（淡い水色の面＋紺の数字） */
.flow li::before{
  content:counter(step);
  grid-column:1; grid-row:1 / span 2;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-pill);
  background:var(--tab-current);
  color:var(--navy);
  font-family:var(--font-latin);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
}
.flow-name{
  grid-column:2; grid-row:1;
  align-self:center;
  font-family:var(--font-heading);
  font-size:var(--fs-md);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  color:var(--navy);
}
.flow-text{
  grid-column:2; grid-row:2;
  margin-top:var(--sp-1);
  line-height:var(--lh-body);
  color:var(--text);
}
@media (min-width:720px){
  .flow{ padding:var(--sp-3) var(--sp-4); }
  .flow li{ grid-template-columns:40px 200px minmax(0, 1fr); column-gap:var(--sp-3); }
  .flow li::before{ grid-row:1; }
  .flow-name{ align-self:start; padding-top:var(--sp-1); }
  .flow-text{ grid-column:3; grid-row:1; margin-top:0; padding-top:var(--sp-1); }
}
@media (min-width:768px){
  .flow{ margin-top:var(--sp-5); }
}

/* --- 6) ほかのサービスへのリンク --- */
.other-tabs{
  list-style:none;
  margin-top:var(--sp-4);
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--sp-2);
}
@media (min-width:720px){
  .other-tabs{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--sp-3); }
}
@media (min-width:768px){
  .other-tabs{ margin-top:var(--sp-5); }
}

/* --- タブのないページ（事業者情報 about/・プライバシーポリシー privacy/）の白い面
       読みやすい幅（38em）までにし、枠線・区切り線はつけず、白い面と余白で区切る --- */
.biz-table, .policy{
  max-width:38em;
  padding:var(--sp-3);
  border-radius:var(--r-md);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.biz-table a, .policy a{
  color:var(--blue-text);
  text-underline-offset:3px;
  transition:color var(--dur) var(--ease);
}
@media (hover:hover){
  .biz-table a:hover, .policy a:hover{ color:var(--blue-hover); }
}
@media (min-width:768px){
  .biz-table, .policy{ padding:var(--sp-4); }
}

/* --- 事業者情報（about/）の概要の表。一番見せたいもの：項目の中身
       スマホ：項目名の下に中身。640px以上：項目名と中身の2列（項目名の列の幅は一番長い項目名に合わせる） --- */
.biz-table{
  margin-top:var(--sp-4);
  display:grid;
  row-gap:var(--sp-3);
}
.biz-table dt{
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-1);
  line-height:var(--lh-body);
  color:var(--text-dim);
}
.biz-table dd{
  line-height:var(--lh-body);
  color:var(--text);
}
.biz-list{
  list-style:none;
  display:grid;
  gap:var(--sp-1);
}
@media (min-width:640px){
  .biz-table{
    grid-template-columns:max-content minmax(0, 1fr);
    column-gap:var(--sp-5);
    align-items:baseline;
  }
  .biz-table .row{ display:contents; }
}
@media (min-width:768px){
  .biz-table{ margin-top:var(--sp-5); }
}

/* --- プライバシーポリシー（privacy/）の本文。一番見せたいもの：項目の見出し
       項目のあいだは広く（--sp-4）、見出しと本文・本文どうしは狭く（--sp-1） --- */
.policy > * + *{ margin-top:var(--sp-1); }
.policy > * + h2{ margin-top:var(--sp-4); }
.policy h2{
  font-family:var(--font-heading);
  font-size:var(--fs-md);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-0);
  color:var(--navy);
}
.policy p, .policy li{
  line-height:var(--lh-body);
  color:var(--text);
}
.policy ul{
  padding-left:var(--sp-3);
  display:grid;
  gap:var(--sp-1);
}
.policy li::marker{ color:var(--blue); }
.policy > .policy-date{
  margin-top:var(--sp-4);
  font-size:var(--fs-sm);
  color:var(--text-dim);
}

/* ===================================================================
   6. 相談ボタン
   後でフォームや公式LINEに差し替えるときは、
   各ページの <a class="consult-btn"> の href だけを書き換える
   （1ページに3か所：ヘッダー／相談セクション／スマホの固定バー）
   ボタンの封筒アイコンはCSSで付けている（.consult-btn::before）
   ページの中で濃い色の塗りを使うのは相談ボタンだけ（一番目立つように）
   =================================================================== */

/* --- ページ下の相談セクション（白〜淡い水色のグラデーション）。一番見せたいもの：相談ボタン --- */
.consult{
  padding:var(--section-y) var(--gutter-x);
  background-image:var(--light-consult);
  color:var(--navy);
}
.consult-title{
  font-family:var(--font-heading);
  font-size:var(--fs-lg);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-0);
}
.consult-text{
  max-width:34em;
  margin-top:var(--sp-2);
  line-height:var(--lh-body);
  color:var(--text);
}
.consult-btn{
  --icon:var(--icon-mail);
  display:flex; align-items:center; justify-content:center; gap:var(--sp-1);
  height:56px;
  margin-top:var(--sp-4);
  padding:0 var(--sp-4);
  border-radius:var(--r-pill);
  background-color:var(--blue-text);
  color:#fff;
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-1);
  text-decoration:none;
  white-space:nowrap;
  box-shadow:var(--shadow);
}
@media (hover:hover){
  .consult-btn:hover{ background-color:var(--blue-hover); }
}
.consult-note{
  margin-top:var(--sp-2);
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
  color:var(--text-dim);
}
@media (min-width:768px){
  .consult{ padding:var(--section-y) var(--gutter); }
  .consult-text{ margin-top:var(--sp-3); }
  .consult-btn{ display:inline-flex; height:64px; margin-top:var(--sp-5); padding:0 var(--sp-5); }
}

/* --- ヘッダーの相談ボタン（768px以上で表示。スマホは画面下の固定バーを使う） --- */
.site-header .consult-btn{
  display:none;
  height:52px;
  margin-top:0;
  padding:0 var(--sp-3);
  font-size:var(--fs-base);
}
@media (min-width:768px){
  .site-header .consult-btn{ display:flex; }
}

/* --- スマホ：画面下に固定する相談バー（768px以上では出さない） --- */
.consult-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  padding:var(--sp-1) var(--sp-2) calc(var(--sp-1) + env(safe-area-inset-bottom));   /* iPhoneの画面下端（ホームバー）を避ける */
  background-color:var(--glass-solid);
  border-top:1px solid var(--line);
}
.consult-bar .consult-btn{
  height:52px;
  margin-top:0;
}
/* 固定バーの高さ（約69px）＋すき間＋iPhoneの画面下端のぶん、ページの一番下に余白をとる（8の倍数：88px） */
body{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
body.is-form{ padding-bottom:env(safe-area-inset-bottom); }   /* 申し込みページは相談バーを置かないので、そのぶんの余白もいらない */
@media (min-width:768px){
  .consult-bar{ display:none; }
  body{ padding-bottom:0; }
}

/* --- 残るヘッダーと画面下の相談バーを、すりガラスにする ---
   ぼかしに対応しているブラウザだけ半透明にする（対応していなければ上の「ほぼ白」のまま）。
   スマホで重くならないよう、ぼかしは軽め（12px） */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-header, .consult-bar{
    background-color:var(--glass);
    -webkit-backdrop-filter:var(--glass-blur);
            backdrop-filter:var(--glass-blur);
  }
}

/* ===================================================================
   7. 日本語の改行
   auto-phrase：単語（文節）の途中で折り返さない（<html lang="ja"> が前提。
                Chrome・Edgeは対応。Safari（iPhone）など未対応のブラウザもある）
   pretty    ：最後の行に1文字だけ落ちるのを防ぐ
   balance   ：短い見出し・リード文の行の長さをそろえる
   CSSで直らない箇所や、未対応のブラウザでも崩したくない箇所は、
   HTML側で <br> や <span class="nowrap"> で個別に調整する
   ※ 文章はすべて左揃えなので、スマホで2行以上になる説明文も左揃えになる
   =================================================================== */
body{
  word-break:auto-phrase;
  text-wrap:pretty;
}
h1, h2, h3, .lead, .section-lead, .consult-text, .compare-role{
  text-wrap:balance;
}
.nowrap{ white-space:nowrap; }            /* メールアドレスなど、途中で折り返したくない語 */

/* ===================================================================
   8. ページを開いたときの動き
   ページを開くたびに、最初の画面の主な要素が上から順に、下から12px上がりながら浮かび上がる。
   ・ヘッダー（ロゴ・タブ・相談ボタン）と画面下の相談バーは動かさない
     （タブを押した瞬間に、選んだタブの色がすぐ切り替わって見えるように）
   ・動かすのは opacity と transform だけ（レイアウトはずれない）
   ・普段の表示では透明にしない。透明なのは動きの最初のコマだけなので、
     動きが効かない環境でも中身は必ず見える
   ・1つ 0.55秒、0.08秒ずつずらす。4段目が 0.24秒＋0.55秒＝0.79秒で動き終わる
     （要素を増やすときは、最後の要素も 0.8秒以内に終わるようにする）
   ・曲線は、触れたときの反応と同じ（--ease）
   =================================================================== */
:root{
  --rise-duration:.55s;
  --rise-step:.08s;
  --rise-ease:var(--ease);
}
@keyframes rise{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}
/* 動かす要素（トップ：一行・キャッチコピー・5枚のカード（と、その下の案内チャットの入口）・開業準備中／
   サービスページ：カテゴリの印・見出し・リード文・イラスト・その下の最初のセクションの中身） */
.hero .eyebrow, .hero .catch, .hero .services, .hero .guide-entry, .hero .soon,
.page-hero .page-cat, .page-hero .page-title, .page-hero .lead, .page-hero .page-illust,
.page-hero + .section > .container{
  animation:rise var(--rise-duration) var(--rise-ease) both;
}
/* 上から順に、少しずつ時間をずらす（イラストはリード文と同じ段。4段のままなので0.79秒で終わる） */
.hero .catch,    .page-hero .page-title{ animation-delay:var(--rise-step); }
.hero .services, .hero .guide-entry, .page-hero .lead, .page-hero .page-illust{ animation-delay:calc(var(--rise-step) * 2); }
.hero .soon,     .page-hero + .section > .container{ animation-delay:calc(var(--rise-step) * 3); }

/* 端末の「動きを減らす」設定がオンのときは動かさず、最初から表示する */
@media (prefers-reduced-motion:reduce){
  .hero .eyebrow, .hero .catch, .hero .services, .hero .guide-entry, .hero .soon,
  .page-hero .page-cat, .page-hero .page-title, .page-hero .lead, .page-hero .page-illust,
  .page-hero + .section > .container{
    animation:none;
  }
}

/* ===================================================================
   9. 案内チャット「お困りごとから探す」
   ・台本は js/guide-scenario.js、LINE ID は js/site-config.js、動きは js/guide.js
   ・JavaScriptが動くときだけ <html class="has-guide"> になり、入口（hidden）が出る
   ・入口：PCは画面右下のボタン／スマホは画面下の相談バーの左／トップはサービスカードの下
   ・PCは右下に小さな画面、スマホは画面下から大きく開く。Esc か「閉じる」か外側を押すと閉じ、開いたボタンに戻る
   ・濃い色の塗りは、相談に進むボタンだけ（サイト全体の決まりと同じ）
   =================================================================== */

/* --- 「詳しく見る」で移動した先：残るヘッダーに隠れない位置に出し、少しのあいだ光らせる --- */
.service-card[id]{ scroll-margin-top:var(--anchor-y); }
.section[id]{ scroll-margin-top:calc(var(--anchor-y) - var(--section-y)); }   /* 見出しがカードと同じ高さに来るように */
.service-card[tabindex="-1"]:focus, .section[tabindex="-1"]:focus{ outline:none; }
@keyframes guided{
  from{ box-shadow:0 0 0 3px var(--ring), var(--shadow-hover); }
  to  { box-shadow:0 0 0 3px transparent, var(--shadow); }
}
.service-card.is-guided{ animation:guided calc(var(--rise-duration) * 4) var(--ease) both; }

/* --- 入口のボタン（淡い面＋紺の文字＋虫めがね。相談ボタンより目立たせない） --- */
.guide-fab, .guide-bar-btn, .guide-entry-btn{
  --icon:var(--icon-search);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-1);
  border:none;
  border-radius:var(--r-pill);
  font-family:inherit;
  font-size:var(--fs-base);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-1);
  line-height:var(--lh-tight);
  color:var(--navy);
  white-space:nowrap;
  cursor:pointer;
}

/* トップ：サービスカードの下 */
.guide-entry{ margin-top:var(--sp-3); }
.guide-entry-btn{
  min-height:52px;
  padding:0 var(--sp-3);
  background-color:var(--surface);
  box-shadow:var(--shadow);
}

/* PC：画面右下（768px以上。スマホは相談バーの入口を使う） */
.guide-fab{ display:none; }

/* スマホ：画面下の相談バーに、入口と相談ボタンを半分ずつ並べる */
@media (max-width:767px){
  .has-guide .consult-bar{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:var(--sp-1);
  }
  .guide-bar-btn{
    height:52px;
    padding:0 var(--sp-1);
    background-color:var(--tint-blue);
    font-size:var(--fs-sm);
  }
  .has-guide .consult-bar .consult-btn{
    padding:0 var(--sp-1);
    font-size:var(--fs-sm);
  }
  .guide-bar-btn, .has-guide .consult-bar .consult-btn{ letter-spacing:var(--ls-0); }   /* 半分の幅に文字とアイコンを収める */
  html.guide-is-open{ overflow:hidden; }   /* 開いているあいだ、うしろのページを動かさない */
}
/* 375px未満の細いスマホ：相談バーの2つのボタンは、アイコンを外して文字だけにする */
@media (max-width:374px){
  .guide-bar-btn::before, .has-guide .consult-bar .consult-btn::before{ display:none; }
}
@media (min-width:768px){
  .guide-entry{ margin-top:var(--sp-4); }
  .guide-fab{
    display:inline-flex;
    position:fixed; z-index:15;
    right:calc(var(--sp-3) + env(safe-area-inset-right));
    bottom:var(--sp-3);
    height:52px;
    padding:0 var(--sp-3);
    background-color:var(--glass-solid);
    box-shadow:var(--shadow);
  }
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .guide-fab{
    background-color:var(--glass);
    -webkit-backdrop-filter:var(--glass-blur);
            backdrop-filter:var(--glass-blur);
  }
}

/* --- チャットの画面（スマホは画面下から大きく、PCは右下に小さく開く） --- */
.guide{
  position:fixed;
  inset:auto 0 0 0;
  width:100%; max-width:none;
  height:var(--sheet-h); max-height:none;
  margin:0; padding:0;
  border:none;
  border-radius:var(--r-md) var(--r-md) 0 0;
  background-color:var(--bg);
  box-shadow:var(--shadow-hover);
  color:var(--text);
  overflow:hidden;
}
.guide[open]{
  display:flex; flex-direction:column;
  animation:guide-sheet var(--rise-duration) var(--ease) both;
}
.guide::backdrop{ background-color:var(--scrim); }
@keyframes guide-sheet{
  from{ transform:translateY(100%); }
  to  { transform:none; }
}
@media (min-width:768px){
  .guide{
    inset:auto calc(var(--sp-3) + env(safe-area-inset-right)) var(--sp-3) auto;
    width:min(var(--guide-w), calc(100vw - var(--sp-3) * 2));
    height:auto;
    max-height:min(var(--guide-h), calc(100vh - var(--sp-3) * 2));
    border-radius:var(--r-md);
  }
  .guide[open]{ animation-name:rise; }   /* 「ページを開いたときの動き」と同じ：下から少し上がる */
}

/* 見出しの段（タイトル＋閉じる） */
.guide-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
  border-bottom:1px solid var(--line);
}
.guide-title{
  font-family:var(--font-heading);
  font-size:var(--fs-md);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-0);
  color:var(--navy);
}
.guide-close{
  --icon:var(--icon-close);
  flex-shrink:0;
  width:44px; height:44px;
  display:grid; place-items:center;
  border:none;
  border-radius:var(--r-pill);
  background-color:transparent;
  color:var(--navy);
  cursor:pointer;
}

/* やりとりの欄（ここだけスクロールする） */
.guide-log{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
  padding:var(--sp-3);
  display:flex; flex-direction:column; gap:var(--sp-2);
  background-image:var(--light-alt);
}

/* 吹き出し：案内役は白、選んだものは淡い水色で右寄せ */
.guide-msg{
  padding:var(--sp-1) var(--sp-2);
  border-radius:var(--r-md);
  line-height:var(--lh-snug);
}
.guide-msg.is-bot{
  align-self:flex-start;
  margin-right:var(--sp-5);
  border-top-left-radius:var(--r-sm);
  background-color:var(--bg);
  color:var(--text);
}
.guide-msg.is-bot:focus{ outline:none; }   /* 読み上げのためにフォーカスを移すだけなので、枠は出さない */
.guide-msg.is-user{
  align-self:flex-end;
  margin-left:var(--sp-5);
  border-top-right-radius:var(--r-sm);
  background-color:var(--tint-blue);
  color:var(--navy);
  font-weight:var(--fw-bold);
}

/* 選択肢（白い面＋右の矢印。押せる高さ48px以上） */
.guide-choices{
  list-style:none;
  display:grid;
  gap:var(--sp-1);
}
.guide-choice{
  --icon:var(--icon-chevron);
  width:100%;
  min-height:48px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-2);
  border:none;
  border-radius:var(--r-md);
  background-color:var(--surface);
  box-shadow:var(--shadow);
  font-family:inherit;
  font-size:var(--fs-base);
  line-height:var(--lh-snug);
  text-align:left;
  color:var(--navy);
  cursor:pointer;
}
.guide-choice.is-back{                    /* 「最初の質問に戻る」：面のない文字のリンク */
  min-height:44px;
  justify-content:flex-start;
  background-color:transparent;
  box-shadow:none;
  color:var(--blue-text);
  text-decoration:underline;
  text-underline-offset:3px;
}
.guide-choice.is-back::after{ display:none; }

/* 案内のカード（サービス名・説明・置き換え例・ボタン） */
.guide-card{
  display:grid;
  gap:var(--sp-1);
  padding:var(--sp-2);
  border-radius:var(--r-md);
  background-color:var(--bg);
  box-shadow:var(--shadow);
}
.guide-card-name{
  font-family:var(--font-heading);
  font-size:var(--fs-md);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  color:var(--navy);
}
.guide-card-text{ line-height:var(--lh-snug); }
.guide-card-label{
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-1);
  color:var(--text-dim);
}
.guide-example{                           /* 置き換え例：前（淡い文字）→ 後（紺の太字） */
  display:grid;
  gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-2);
  border-radius:var(--r-sm);
  background-color:var(--tint-soft);
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
}
.guide-example-before{ color:var(--text-dim); }
.guide-example-after{
  --icon:var(--icon-arrow-down);
  display:flex; align-items:flex-start; gap:var(--sp-1);
  font-weight:var(--fw-bold);
  color:var(--navy);
}
.guide-steps{                             /* ご相談の流れ（番号付き） */
  padding-left:var(--sp-3);
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
}
.guide-steps li::marker{ color:var(--blue-text); font-weight:var(--fw-bold); }
.guide-summary{                           /* 相談の文章（改行をそのまま見せる） */
  padding:var(--sp-2);
  border-radius:var(--r-sm);
  background-color:var(--tint-soft);
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

/* ボタン：相談に進むものだけ濃い青の塗り。「詳しく見る」は淡い面、「ほかの困りごと」は文字だけ */
.guide-actions{
  display:grid;
  gap:var(--sp-1);
  margin-top:var(--sp-1);
}
.guide-btn{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-1);
  min-height:48px;
  padding:0 var(--sp-3);
  border:none;
  border-radius:var(--r-pill);
  font-family:inherit;
  font-size:var(--fs-base);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-1);
  line-height:var(--lh-tight);
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.guide-btn.is-primary{
  background-color:var(--blue-text);
  box-shadow:var(--shadow);
  color:#fff;
}
.guide-btn.is-secondary{
  background-color:var(--tint-blue);
  color:var(--navy);
}
.guide-btn.is-quiet{
  min-height:44px;
  background-color:transparent;
  font-weight:var(--fw-regular);
  letter-spacing:var(--ls-0);
  color:var(--blue-text);
  text-decoration:underline;
  text-underline-offset:3px;
}
.guide-btn.is-mail{ --icon:var(--icon-mail); }
.guide-btn.is-form{ --icon:var(--icon-calendar); }   /* フォームで日程を申し込む：カレンダー */
.guide-btn.is-line{ --icon:var(--icon-chat); }       /* 公式LINEで日程を相談する：吹き出し */
.consult-btn.is-choice{ --icon:var(--icon-chat); }   /* フォームかLINEがあるとき、サイトの相談ボタン（押すと相談の画面が開く） */
.guide-hint{
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
  color:var(--text-dim);
}

/* 相談の画面：メールは小さな文字のリンクで残す（フォームかLINEの入口があるとき） */
.guide-mail-link{
  margin-top:var(--sp-1);
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
  color:var(--text-dim);
  text-align:center;
}
.guide-mail-link a{
  color:var(--blue-text);
  text-underline-offset:3px;
}
@media (hover:hover){
  .guide-mail-link a:hover{ color:var(--blue-hover); }
}

/* 下の注記（名前や連絡先はうかがいません） */
.guide-note{
  padding:var(--sp-1) var(--sp-3) calc(var(--sp-1) + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  font-size:var(--fs-xs);
  line-height:var(--lh-snug);
  color:var(--text-dim);
}

/* --- アイコン（線の絵をCSSで付ける。ほかの部品と同じ作り） --- */
.guide-fab::before, .guide-bar-btn::before, .guide-entry-btn::before, .guide-close::before,
.guide-choice::after, .guide-example-after::before, .guide-btn.is-mail::before, .guide-btn.is-form::before, .guide-btn.is-line::before{
  content:"";
  flex-shrink:0;
  width:var(--icon-sm); height:var(--icon-sm);
  background:currentColor;
  -webkit-mask:var(--icon) center / contain no-repeat;
          mask:var(--icon) center / contain no-repeat;
}
.guide-fab::before, .guide-entry-btn::before, .guide-bar-btn::before,
.guide-choice::after, .guide-example-after::before{ color:var(--blue); }
.guide-example-after::before{ margin-top:calc((var(--lh-snug) * 1em - var(--icon-sm)) / 2); }

/* --- 触れたときの反応（サイトのほかの部品と同じ：少し浮く・影が広がる・色が変わる） --- */
.guide-fab, .guide-entry-btn, .guide-bar-btn, .guide-choice, .guide-btn, .guide-close{
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (hover:hover){
  .guide-fab:hover, .guide-entry-btn:hover, .guide-choice:not(.is-back):hover,
  .guide-btn.is-primary:hover, .guide-btn.is-secondary:hover{
    transform:var(--lift);
    box-shadow:var(--shadow-hover);
  }
  .guide-fab:hover, .guide-entry-btn:hover, .guide-choice:not(.is-back):hover{ background-color:#fff; }
  .guide-btn.is-primary:hover{ background-color:var(--blue-hover); }
  .guide-btn.is-secondary:hover{ background-color:#fff; }
  .guide-btn.is-quiet:hover, .guide-choice.is-back:hover{ color:var(--blue-hover); }
  .guide-close:hover{ background-color:var(--tint-navy); }
}

/* --- 動きを減らす設定：開くとき・触れたとき・移動した先は動かさない（移動した先の輪は、動かさずに出す） --- */
@media (prefers-reduced-motion:reduce){
  .guide[open]{ animation:none; }
  .guide-fab, .guide-entry-btn, .guide-bar-btn, .guide-choice, .guide-btn, .guide-close{ transition:none; }
  .guide-fab:hover, .guide-entry-btn:hover, .guide-choice:hover, .guide-btn:hover{ transform:none; }
  .service-card.is-guided{ animation:none; box-shadow:0 0 0 3px var(--ring), var(--shadow); }
}

/* ===================================================================
   10. 申し込みフォーム（form/。PHPで動く）
   ・入力 → 確認 → 完了 の3画面。白い面1枚の中に、手順・入力欄・ボタンを並べる
   ・入力欄だけは枠線を付ける（どこに入力するかが分かるように。白地に対して3:1以上の濃さ --field-line）
   ・入力欄の文字は16px（--fs-base）。スマホで入力欄を押したときに、画面が勝手に拡大されないように
   ・誤りの文は、その項目のすぐ下に赤（--error）の太字で出す
   =================================================================== */
:root{
  --field-line: #76839c;   /* 入力欄の枠（白地 3.82:1／淡い青の帯 3.50:1） */
  --error:      #b3261e;   /* 誤りの文字・枠（白地 6.54:1／淡い青の帯 5.99:1） */
  --error-soft: rgba(179,38,30,.07);   /* 誤りのまとめの地・「必須」の印の地 */
}

.form-card{
  max-width:40em;
  padding:var(--sp-3);
  border-radius:var(--r-md);
  background:var(--surface);
  box-shadow:var(--shadow);
}

/* 手順（入力 → 確認 → 完了） */
.form-steps{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
  color:var(--text-dim);
}
.form-steps li{ display:flex; align-items:center; gap:var(--sp-1); }
.form-step-no{
  display:inline-grid; place-items:center;
  width:var(--icon-lg); height:var(--icon-lg);
  border-radius:var(--r-pill);
  background-color:var(--tint-navy);
  font-family:var(--font-latin);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
}
.form-steps li[aria-current="step"]{ color:var(--navy); font-weight:var(--fw-bold); }
.form-steps li[aria-current="step"] .form-step-no{ background-color:var(--blue-text); color:#fff; }

.form-intro, .form-help{
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
  color:var(--text-dim);
}
.form-intro{ margin-top:var(--sp-3); }

/* 項目 */
.form-field{
  margin-top:var(--sp-4);
  border:0; padding:0; min-inline-size:0;
}
.form-label{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1);
  font-weight:var(--fw-bold);
  line-height:var(--lh-snug);
  color:var(--navy);
}
.form-label + .form-help{ margin-top:var(--sp-1); }
.form-req, .form-opt{
  padding:0 var(--sp-1);
  border-radius:var(--r-sm);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-1);
  line-height:var(--lh-body);
}
.form-req{ background-color:var(--error-soft); color:var(--error); }
.form-opt{ background-color:var(--tint-navy); color:var(--text-dim); }
.form-sublabel{
  display:block;
  margin-bottom:var(--sp-1);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--text-dim);
}

/* 入力欄（文字は16px。押せる高さ48px以上） */
.nsb-form input[type="text"], .nsb-form input[type="email"], .nsb-form input[type="tel"],
.nsb-form input[type="date"], .nsb-form textarea{
  display:block;
  width:100%;
  min-height:48px;
  margin-top:var(--sp-1);
  padding:var(--sp-1) var(--sp-2);
  border:1px solid var(--field-line);
  border-radius:var(--r-sm);
  background-color:#fff;
  font-family:inherit;
  font-size:var(--fs-base);
  line-height:var(--lh-snug);
  color:var(--text);
}
.nsb-form textarea{ resize:vertical; }
.nsb-form input[type="date"]{ width:auto; min-width:12em; max-width:100%; }
.nsb-form input:focus-visible, .nsb-form textarea:focus-visible{
  outline:3px solid var(--blue-text);
  outline-offset:2px;
}
.nsb-form [aria-invalid="true"]:not([type="radio"]){
  border-color:var(--error);
  box-shadow:inset 0 0 0 1px var(--error);
}
.form-error{
  margin-top:var(--sp-1);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  line-height:var(--lh-snug);
  color:var(--error);
}

/* 選ぶ項目（丸い形のラベル。押せる高さ44px） */
.form-choices{
  display:flex; flex-wrap:wrap; gap:var(--sp-1);
  margin-top:var(--sp-1);
}
.form-choice{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  min-height:44px;
  padding:0 var(--sp-2);
  border:1px solid var(--field-line);
  border-radius:var(--r-pill);
  background-color:#fff;
  line-height:var(--lh-snug);
  color:var(--text);
  cursor:pointer;
}
.form-choice input{
  width:var(--icon-sm); height:var(--icon-sm);
  margin:0;
  accent-color:var(--blue-text);
}
.form-choice:has(input:checked){
  border-color:var(--blue-text);
  background-color:var(--tab-current);
  color:var(--navy);
  font-weight:var(--fw-bold);
}
.form-choice:has(input:focus-visible){
  outline:3px solid var(--blue-text);
  outline-offset:2px;
}
.form-choice:has(input[aria-invalid="true"]){ border-color:var(--error); }

/* 第1〜第3希望（日付と時間帯） */
.form-wish-body{
  display:grid;
  gap:var(--sp-2);
  margin-top:var(--sp-1);
}
.form-wish-time{ border:0; padding:0; min-inline-size:0; }
.form-wish-time .form-choices{ margin-top:0; }
@media (min-width:640px){
  .form-wish-body{ grid-template-columns:auto minmax(0, 1fr); column-gap:var(--sp-4); align-items:start; }
}

/* カレンダーの空きから選ぶとき：第1〜第3希望は、候補のプルダウン（入力欄と同じ見た目。文字16px・高さ48px以上） */
.form-wish-intro{ margin-top:var(--sp-4); }
.nsb-form select{
  display:block;
  width:100%;
  max-width:20em;
  min-height:48px;
  margin-top:var(--sp-1);
  padding:var(--sp-1) var(--sp-2);
  border:1px solid var(--field-line);
  border-radius:var(--r-sm);
  background-color:#fff;
  font-family:inherit;
  font-size:var(--fs-base);
  line-height:var(--lh-snug);
  color:var(--text);
}
.nsb-form select:focus-visible{
  outline:3px solid var(--blue-text);
  outline-offset:2px;
}
.form-wish-intro + .form-wish{ margin-top:var(--sp-2); }
/* お申し込みの内容で「まず相談だけ」を選んだら、ご希望の方法と日時を隠す（2026-10-10）。
   :has に対応していない古いブラウザでは出たままになるが、送っても使わない（functions.php の nsb_collect で消す） */
.nsb-form:has(#f-kind-consult:checked) .form-meeting{ display:none; }
/* お申し込みの内容の2つの選択肢は、文が長いので1つずつ横いっぱいに並べる */
.form-kind{ flex-direction:column; align-items:stretch; }

/* 人には見えない欄（機械による送信を見分ける）。画面の外に置く */
.form-hp{
  position:absolute;
  left:-10000px;
  width:1px; height:1px;
  overflow:hidden;
}

.form-privacy{
  margin-top:var(--sp-4);
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
  color:var(--text-dim);
}
.form-privacy a, .form-alert a, .form-done-link a{
  color:var(--blue-text);
  text-underline-offset:3px;
}

/* ボタン：申し込みに進むものは濃い青の塗り（相談ボタンと同じ）。「修正する」は淡い面 */
.form-actions{
  display:grid;
  gap:var(--sp-2);
  margin-top:var(--sp-4);
}
.form-submit, .form-back{
  display:flex; align-items:center; justify-content:center;
  min-height:56px;
  padding:0 var(--sp-4);
  border:none;
  border-radius:var(--r-pill);
  font-family:inherit;
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-1);
  line-height:var(--lh-tight);
  cursor:pointer;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.form-submit{
  background-color:var(--blue-text);
  box-shadow:var(--shadow);
  font-size:var(--fs-md);
  color:#fff;
}
.form-back{
  background-color:var(--tint-blue);
  font-size:var(--fs-base);
  color:var(--navy);
}
@media (hover:hover){
  .form-submit:hover{ background-color:var(--blue-hover); transform:var(--lift); box-shadow:var(--shadow-hover); }
  .form-back:hover{ background-color:#fff; transform:var(--lift); box-shadow:var(--shadow-hover); }
}
@media (prefers-reduced-motion:reduce){
  .form-submit, .form-back{ transition:none; }
  .form-submit:hover, .form-back:hover{ transform:none; }
}
@media (min-width:640px){
  .form-actions{ display:flex; flex-wrap:wrap; align-items:center; }
}

/* 誤りのまとめ・送れなかったとき */
.form-alert{
  margin-top:var(--sp-3);
  padding:var(--sp-2);
  border-radius:var(--r-sm);
  background-color:var(--error-soft);
  line-height:var(--lh-snug);
  color:var(--text);
}
.form-alert-title{ font-weight:var(--fw-bold); color:var(--error); }
.form-alert ul{ margin-top:var(--sp-1); padding-left:var(--sp-3); }
.form-alert ul li + li{ margin-top:var(--sp-1); }
.form-alert p + p{ margin-top:var(--sp-1); }

/* 確認画面：項目名と中身（640px以上は2列） */
.form-review{
  display:grid;
  row-gap:var(--sp-2);
  margin-top:var(--sp-3);
}
.form-review dt{
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--text-dim);
}
.form-review dd{ line-height:var(--lh-snug); color:var(--text); overflow-wrap:anywhere; }
.form-review dd.is-multi{ white-space:pre-wrap; }
@media (min-width:640px){
  .form-review{ grid-template-columns:max-content minmax(0, 1fr); column-gap:var(--sp-4); align-items:baseline; }
  .form-review .row{ display:contents; }
}

/* 完了 */
.form-done{ margin-top:var(--sp-3); }
.form-done-title{
  font-family:var(--font-heading);
  font-size:var(--fs-lg);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  color:var(--navy);
}
.form-done-text{ margin-top:var(--sp-2); font-size:var(--fs-md); color:var(--text); }
.form-done .form-help{ margin-top:var(--sp-2); }
.form-done-link{ margin-top:var(--sp-3); }

@media (min-width:768px){
  .form-card{ padding:var(--sp-4); }
}

/* ===================================================================
   11. 料金の目安（price/）  2026-10-04 追加
   ・見せ方は参考サイト（sealast.co.jp/plan/）にならい、カテゴリごとに
     「名前 → 金額 → 単発/月額の帯 → 内容」のカードを並べる
   ・カードの面・影・並び（720pxで2列／1000pxで3列）は .service-list・.service-card をそのまま使う
   ・線は使わない（11章）。水色（--blue）はチェックの印だけで、文字には使わない
   =================================================================== */

/* --- 見出しまわり：税込の注記と、項目へのジャンプ --- */
.price-tax-note{
  margin-top:var(--sp-2);
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
  color:var(--text-dim);
}
.price-jump{ margin-top:var(--sp-3); }
.price-jump ul{
  list-style:none;
  display:flex; flex-wrap:wrap;
  gap:var(--sp-1);
}
.price-jump a{
  display:inline-flex; align-items:center;
  min-height:44px;                        /* 押せる高さ（11章） */
  padding:0 var(--sp-2);
  border-radius:var(--r-pill);
  background:var(--surface);
  box-shadow:var(--shadow);
  font-family:var(--font-latin);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-1);
  color:var(--navy);
  text-decoration:none;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.price-jump a:hover{ transform:var(--lift); box-shadow:var(--shadow-hover); }

/* 見出しの動き（サービスページのリード文と同じ段で出す） */
.page-hero .price-tax-note, .page-hero .price-jump{
  animation:rise var(--rise-duration) var(--rise-ease) both;
  animation-delay:calc(var(--rise-step) * 2);
}
@media (prefers-reduced-motion:reduce){
  .page-hero .price-tax-note, .page-hero .price-jump{ animation:none; }
}

/* --- カテゴリの見出し（カテゴリの印 .page-cat の下） --- */
.price-sec-title{ margin-top:var(--sp-2); }

/* --- 料金のカード（class="service-card price-card" で使う） --- */
.price-name{
  font-family:var(--font-heading);
  font-size:var(--fs-md);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  color:var(--navy);
}
.price-figure{ display:grid; gap:4px; }   /* 「料金の目安」と金額をひとかたまりに */
.price-label{
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-1);
  line-height:var(--lh-tight);
  color:var(--text-dim);
}
.price-amount{
  display:flex; flex-wrap:wrap; align-items:baseline;
  column-gap:2px;
  line-height:var(--lh-tight);
  color:var(--navy);
}
.price-num{
  font-family:var(--font-latin);
  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
}
.price-unit{
  font-size:var(--fs-base);
  font-weight:var(--fw-bold);
}
.price-unit small{
  font-size:var(--fs-sm);
  font-weight:var(--fw-regular);
}
.price-tax{
  margin-left:var(--sp-1);
  font-size:var(--fs-xs);
  font-weight:var(--fw-regular);
  color:var(--text-dim);
}
.price-amount.is-quote{                   /* 金額を出さないサービス（「お見積り」） */
  font-family:var(--font-heading);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
}
/* 単発・月額の帯（参考サイトの「納期」の帯にあたる） */
.price-band{
  padding:var(--sp-1) var(--sp-2);
  border-radius:var(--r-sm);
  background:var(--tint-navy);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-1);
  line-height:var(--lh-snug);
  text-align:center;
  color:var(--navy);
}
.price-band.is-monthly{ background:var(--tint-blue); }

/* 内容（左にチェックの印。形は --icon-check、色は水色。<span class="nowrap"> が並びを崩さないよう、文章は普通の流れのまま） */
.price-items{
  list-style:none;
  display:grid;
  gap:var(--sp-1);
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
  color:var(--text);
}
.price-items li{
  position:relative;
  padding-left:calc(var(--icon-sm) + var(--sp-1));
}
.price-items li::before{
  content:"";
  position:absolute; left:0;
  top:calc((var(--lh-snug) * 1em - var(--icon-sm)) / 2);   /* 1行目の文字と中心をそろえる */
  width:var(--icon-sm); height:var(--icon-sm);
  background:var(--blue);
  -webkit-mask:var(--icon-check) center / contain no-repeat;
          mask:var(--icon-check) center / contain no-repeat;
}

/* 必要なもの・回数の表（参考サイトの「ページ数／打ち合わせ／原稿／画像素材」にあたる）。線は使わず、淡い面1枚に並べる */
.price-spec{
  display:grid;
  gap:var(--sp-1);
  padding:var(--sp-2);
  border-radius:var(--r-sm);
  background:var(--tint-soft);
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
}
.price-spec .row{
  display:grid;
  grid-template-columns:5.5em minmax(0, 1fr);
  gap:var(--sp-1);
  align-items:baseline;
}
.price-spec dt{ color:var(--text-dim); }
.price-spec dd{ font-weight:var(--fw-bold); color:var(--navy); }
.price-spec-note{                          /* 「遠方の方はWEB3回」などの補足 */
  display:block;
  font-size:var(--fs-xs);
  font-weight:var(--fw-regular);
  color:var(--text-dim);
}
.price-included{ display:grid; gap:var(--sp-1); }   /* 「含まれる内容」の見出しとチェックの一覧をひとかたまりに */
.price-included-label{
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-1);
  color:var(--text-dim);
}

/* --- パッケージ --- */
.price-card.is-recommended{ position:relative; }
.price-badge{                             /* 「おすすめ」の印（濃い青の面に白い文字：4.98:1）。カードの上辺に重ねて、隣のカードと金額の高さをそろえる */
  position:absolute;
  top:0; left:var(--sp-3);
  transform:translateY(-50%);
  padding:2px var(--sp-2);
  border-radius:var(--r-pill);
  background:var(--blue-text);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-1);
  line-height:var(--lh-snug);
  color:#fff;
}
.price-card.is-recommended{ box-shadow:var(--shadow-hover); }   /* 枠線ではなく、影を少し強くして目立たせる */
.price-for-label{
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-1);
  color:var(--text-dim);
}
.price-for-text{
  margin-top:4px;
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
  color:var(--text);
}

/* --- サービスの詳しいページ／料金ページへのリンク（料金ページとサービスページの両方で使う） --- */
.price-more{ margin-top:var(--sp-3); }
.price-more a{
  display:inline-flex; align-items:center;
  min-height:44px;                        /* 押せる高さ（11章） */
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--blue-text);
  text-decoration:underline;
  text-underline-offset:.25em;
}
.price-more a:hover{ color:var(--blue-hover); }

/* --- 料金についてのご注意 --- */
.price-notes{
  max-width:44em;
  margin-top:var(--sp-3);
  list-style:none;
  display:grid;
  gap:var(--sp-1);
  line-height:var(--lh-body);
  color:var(--text);
}
.price-notes li{
  position:relative;
  padding-left:1.2em;
}
.price-notes li::before{
  content:"※";
  position:absolute; left:0;
  color:var(--text-dim);
}

@media (min-width:768px){
  .price-jump{ margin-top:var(--sp-4); }
  .price-notes{ margin-top:var(--sp-4); }
  .price-badge{ left:var(--sp-4); }       /* カードの内側の余白（768px〜は32px）にそろえる */
}

/* ===================================================================
   12. ご希望の日時のカレンダー（form/。js/slot-calendar.js）  2026-10-10 追加
   ・空きのある日だけ押せる。昼間の時刻もある日は濃い青で分ける
   ・JavaScriptが動かないときは出さない（プルダウンのまま）
   =================================================================== */
.slot-cal{
  margin-top:var(--sp-2);
  padding:var(--sp-2);
  border-radius:var(--r-md);
  background-color:var(--tint-soft);
}
.slot-cal[hidden]{ display:none; }
.slot-cal-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-1);
}
.slot-cal-title{
  margin:0;
  font-family:var(--font-heading);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--navy);
}
.slot-cal-nav{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  padding:0;
  border:0;
  border-radius:var(--r-pill);
  background-color:#fff;
  color:var(--navy);
  cursor:pointer;
}
.slot-cal-nav::before{
  content:"";
  width:var(--icon-sm); height:var(--icon-sm);
  background-color:currentColor;
  -webkit-mask:var(--icon-chevron) center / contain no-repeat;
          mask:var(--icon-chevron) center / contain no-repeat;
}
.slot-cal-nav.is-prev::before{ transform:scaleX(-1); }
.slot-cal-nav:disabled{ opacity:.35; cursor:default; }

.slot-cal-grid{
  width:100%;
  margin-top:var(--sp-1);
  border-collapse:separate;
  border-spacing:4px;
  table-layout:fixed;
}
.slot-cal-grid th{
  padding:var(--sp-1) 0 4px;
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  color:var(--text-dim);
  text-align:center;
}
.slot-cal-grid td{ padding:0; text-align:center; }
.slot-day{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  min-height:40px;
  aspect-ratio:1 / 1;
  padding:0;
  border:0;
  border-radius:var(--r-sm);
  background:none;
  font-family:var(--font-latin);
  font-size:var(--fs-sm);
  color:var(--text-dim);
  opacity:.45;
}
.slot-day.is-open{                                                      /* 空きのある日（17:00 のみ）：白地に青い枠と青い数字 */
  background-color:#fff;
  color:var(--blue-text);
  font-weight:var(--fw-bold);
  opacity:1;
  cursor:pointer;
  box-shadow:inset 0 0 0 2px var(--blue);
}
.slot-day.is-day{ background-color:var(--blue-text); color:#fff; box-shadow:none; }      /* 昼間も選べる日：濃い青で塗る */
.slot-day.is-current{ box-shadow:inset 0 0 0 2px var(--blue), 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.slot-day.is-day.is-current{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.slot-day.is-picked::after{                                               /* 選んだ日時がある日：下に小さな点 */
  content:"";
  position:absolute; left:50%; bottom:4px;
  width:6px; height:6px;
  margin-left:-3px;
  border-radius:50%;
  background-color:var(--blue-text);
}
.slot-day.is-day.is-picked::after{ background-color:#fff; }
@media (hover:hover){
  .slot-day.is-open:hover{ background-color:var(--tab-current); }
  .slot-day.is-day:hover{ background-color:var(--blue-hover); }
}

.slot-legend{
  display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2);
  margin:var(--sp-1) 0 0;
  font-size:var(--fs-xs);
  color:var(--text-dim);
}
.slot-legend-item{ display:inline-flex; align-items:center; gap:6px; }
.slot-legend-item::before{
  content:"";
  width:14px; height:14px;
  border-radius:4px;
  background-color:#fff;
  box-shadow:inset 0 0 0 2px var(--blue);
}
.slot-legend-item.is-day::before{ background-color:var(--blue-text); box-shadow:none; }

.slot-times{
  margin-top:var(--sp-2);
  padding-top:var(--sp-2);
  border-top:1px solid var(--line);
}
.slot-times-title{ margin:0; font-weight:var(--fw-bold); color:var(--navy); }
.slot-times-empty, .slot-times-note{ margin:0; font-size:var(--fs-sm); color:var(--text-dim); }
.slot-times-note{ margin-top:var(--sp-1); }
.slot-time-list{
  display:flex; flex-wrap:wrap; gap:var(--sp-1);
  margin-top:var(--sp-1);
}
.slot-time{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  min-height:44px;
  padding:0 var(--sp-2);
  border:1px solid var(--field-line);
  border-radius:var(--r-pill);
  background-color:#fff;
  font-family:var(--font-latin);
  font-size:var(--fs-base);
  color:var(--text);
  cursor:pointer;
}
.slot-time[aria-pressed="true"]{
  border-color:var(--blue-text);
  background-color:var(--blue-text);
  color:#fff;
}
.slot-time:disabled{ opacity:.4; cursor:default; }
.slot-time-tag{
  padding:2px 8px;
  border-radius:var(--r-pill);
  background-color:#fff;
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  color:var(--blue-text);
}
.slot-status{ margin:var(--sp-1) 0 0; font-size:var(--fs-sm); color:var(--blue-text); }
.slot-status:empty{ display:none; }

/* 第1〜第3希望の欄：カレンダーが動いているときは、プルダウンの代わりに選んだ日時を出す */
.form-wish.is-enhanced select{ display:none; }
.slot-pick{
  display:flex; align-items:center; gap:var(--sp-1);
  min-height:48px;
  margin-top:var(--sp-1);
  padding:0 0 0 var(--sp-2);
  border:1px solid var(--field-line);
  border-radius:var(--r-sm);
  background-color:#fff;
  color:var(--navy);
  font-weight:var(--fw-bold);
}
.slot-pick.is-empty{ border-style:dashed; color:var(--text-dim); font-weight:var(--fw-regular); }
.slot-pick-clear{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  margin-left:auto;
  padding:0;
  border:0;
  background:none;
  color:var(--text-dim);
  cursor:pointer;
}
.slot-pick-clear[hidden]{ display:none; }
.slot-pick-clear::before{
  content:"";
  width:var(--icon-sm); height:var(--icon-sm);
  background-color:currentColor;
  -webkit-mask:var(--icon-close) center / contain no-repeat;
          mask:var(--icon-close) center / contain no-repeat;
}
@media (hover:hover){
  .slot-time:not(:disabled):hover{ border-color:var(--blue-text); }
  .slot-pick-clear:hover{ color:var(--navy); }
}
@media (min-width:768px){
  .slot-day{ aspect-ratio:auto; height:48px; }   /* PCでは横に広がるので、高さをそろえる */
}