/* ============================================================
   ASETIA — theme styles
   asetia_ver2 のデザイン言語（Archivo＋#00a0e9＋罫線リスト）を移植しつつ、
   v5 の情報設計（料金・FAQ・お悩み・3ステップ・代表）を残したもの。

   見出しのウェイト（900）とセクション余白は ver2 に忠実。
   一方で色のコントラストだけは ver2 から変えたままにしている——マーキーの
   ブルー地に白文字、ブルーのボタンに白文字はいずれも 2.91:1 で読めないため。

   ── 詳細度の事故について ──
   ver2 では `.work-card p`（0,1,1）が `.work-res`（0,1,0）に勝ってしまい、
   成果数字が 23px 黒 → 14px グレーに潰れていた。子孫の要素セレクタを
   :where() で包めばユーティリティクラスが常に勝つ、というのがその対策。

   **ところがこの対策自体に漏れがあり、同じ事故を2件再発させていた。**
     - `.as-price p` が `.as-price-value` に勝ち、価格が 38px 黒 → 14px
       グレーに。さらに子の `<i>万円〜</i>`（.4em）が 5.6px まで潰れていた
     - `.as-step p` が `.as-step-sub` に勝ち、欧文ラベルが 11px → 14.5px に
       膨らんで、和文見出しと同格に見えていた
   いずれも :where() で包んで解消済み。**`.as-X 要素` の形で書くときは
   必ず :where() を通すこと。** 例外を作ると同じことが起きる。

   ── タイポグラフィ ──
   font-size は :root のトークン（--fs-*）だけを使う。直値を書かない。
   詳細はトークン定義のコメントを参照。
   ============================================================ */

:root{
  --ink:      var(--wp--preset--color--ink);
  --brand:    var(--wp--preset--color--blue);
  --brand-tx: var(--wp--preset--color--blue-text);
  --brand-lt: var(--wp--preset--color--blue);
  --pink:     var(--wp--preset--color--pink);
  --yellow:   var(--wp--preset--color--yellow);
  --gray:     var(--wp--preset--color--gray);
  --deep:     var(--wp--preset--color--ink);
  --mist:     var(--wp--preset--color--base);
  --line:     var(--wp--preset--color--ink);
  --soft:     var(--wp--preset--color--base);

  /* ブルーの面。上に載せる文字は必ずインク（#00a0e9 の上で 6.47:1）。
     白文字は 2.91:1 で不合格なので載せない。 */
  --grad: linear-gradient(115deg, var(--brand) 0%, var(--brand-lt) 55%, var(--soft) 100%);

  --line-dark: rgba(255,255,255,.15);
  --ink-60:    rgba(7,18,28,.68);   /* 白地で 4.5:1 以上 */
  --white-85:  rgba(255,255,255,.87);

  --jp: var(--wp--preset--font-family--sans);
  --en: var(--wp--preset--font-family--display);

  --max: 1280px;
  --gut: clamp(20px, 4.5vw, 64px);
  --hd:  74px;

  /* ----------------------------------------------------------
     タイプスケール（9段）
     以前は font-size が84箇所に直値で散っていて、本文域だけで
     13/13.5/14/14.5/15/15.5/16px の7種が混在していた。差が1px未満の
     段は階層として読めず、ばらつきにしか見えないので、役割ごとに
     畳んである。**新しい直値を足さないこと。** 足りないと感じたら
     まずこの表のどれに当たるかを考える。
     ---------------------------------------------------------- */
  --fs-2xs:  11px;                        /* 欧文ラベル（トラッキング広め） */
  --fs-xs:   13px;                        /* 和文の補助・注記 */
  --fs-sm:   15px;                        /* 密度の要る本文・UI・数字の単位（説明文を15px以上にするため14pxから上げた） */
  --fs-base: 16px;                        /* 標準本文。フォーム入力のiOS自動ズーム回避も兼ねる */
  --fs-lg:   clamp(17px, 1.4vw, 19px);    /* 小見出し */
  --fs-xl:   clamp(21px, 2.4vw, 30px);    /* 中見出し */
  --fs-2xl:  clamp(26px, 4vw,   52px);    /* セクション見出し */
  --fs-3xl:  clamp(30px, 5.6vw, 74px);    /* ページ見出し */
  /* 数字ディスプレイ（実績・料金）。48px上限では、まわりのカード余白に対して
     数字が小さく、実績も料金も「こじんまりして見える」という指摘を受けた。
     見出し（--fs-2xl 上限52px）より数字が小さいと、そのセクションの主役が
     数字だと読めない。ページ見出し（--fs-3xl）に近い段まで上げてある。 */
  --fs-num:  clamp(32px, 5.2vw, 68px);    /* 数字ディスプレイ（実績・料金） */

  /* 行間は本文とリードの2値だけ。以前は 1.6〜2.05 が6種あった。 */
  --lh-body: 1.9;
  --lh-lede: 2;

  /* ボックス内のパディングは2種。以前は7種のばらばらな clamp だった。 */
  --pad-box:    clamp(20px, 2.5vw, 32px);
  --pad-box-sm: clamp(16px, 2vw,   20px);
}

/* WordPress は border-box を全体には掛けないので、ここで揃える。
   これが無いと min-height と padding が足し算になり、100svh を指定した
   ヒーローが「ビューポート＋パディング分」の高さになってCTAが折り返しの
   下へ落ちる。ver2 も同じく `*{box-sizing:border-box}` を前提にしていた。 */
*, *::before, *::after{ box-sizing:border-box; }

/* ---------- 日本語組版 ---------- */
body{ font-feature-settings:"palt"; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
:where(p, li, dd, td, th, summary){ line-break:strict; overflow-wrap:anywhere; }
:where(h1, h2, h3, h4){ word-break:auto-phrase; letter-spacing:.01em; }
::selection{ background:rgba(0,160,233,.2); }
:where(img, svg){ max-width:100%; height:auto; display:block; }

/* ============================================================
   レイアウト
   ============================================================ */
.as-wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

/* フローレイアウトは子に margin-block-start を配る。セクションどうしを
   突き合わせたいので、トップレベルと <main> 直下では無効化する。
   これが無いと、暗いヒーローとマーキーの間に地の白が 24px 覗く。

   トップページの中身は固定ページへ移したので、セクションは <main> の
   直下ではなく .entry-content（wp:post-content の出力）の下に入る。
   その一段も同じく無効化しないと、同じ隙間が再発する。 */
.wp-site-blocks > *,
.as-main > *,
.as-main > .entry-content > *{ margin-block:0; }

/* ============================================================
   ヘッダー
   ver2 の修正点:
   - ヒーロー上でナビが --ink のままで 1.16:1（ほぼ不可視）だった
   - .nav-cta が inline で縦paddingが効かず、右ガターを 26px はみ出していた
   - backdrop-filter に -webkit- プレフィックスが無かった
   ============================================================ */
/* ヒーローも下層ページヘッダも明るい地になったので、透過→白の切り替えはやめて常に白地。 */
.as-hd{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-block-end:1px solid var(--line);
}
.as-nav{
  max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
  height:var(--hd); display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.as-logo{ display:flex; align-items:center; text-decoration:none; }
.as-logo svg{ height:24px; width:auto; }
.as-logo .cls-1{ fill:var(--ink); }
.as-logo .cls-2{ fill:#fff; }

.as-menu{ display:flex; align-items:center; gap:clamp(16px,2.4vw,36px); list-style:none; margin:0; padding:0; }
/* 要素セレクタは :where() で包み、CTA（.as-cta）が必ず勝つようにする。
   素で `.as-menu a { display:block; padding-block:6px }` と書くと詳細度 0,1,1 で
   .as-cta（0,1,0）に競り勝ってしまい、ピルが縦に潰れる。ver2 と同じ事故。 */
/* CTA項目（最後の1件）だけは別扱い。以前はリンク自体に .as-cta を
   書かせていたが、リッチテキスト編集でクラスは失われやすい。
   「as-menu-cta の中のリンク」で判定すれば、編集しても壊れない。 */
.as-menu :where(li:not(.as-menu-cta)) a{
  display:block; font-size:var(--fs-sm); font-weight:700; letter-spacing:.03em;
  color:var(--ink); text-decoration:none; position:relative; padding-block:6px;
}
.as-menu :where(li:not(.as-menu-cta)) a::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:0;
  width:0; height:2px; background:var(--brand); transition:width .3s cubic-bezier(.2,.8,.2,1);
}
.as-menu :where(li:not(.as-menu-cta)) a:hover::after,
.as-menu :where(li[aria-current]:not(.as-menu-cta)) a::after{ width:100%; }
.as-menu{ list-style:none; padding-inline-start:0; }

.as-menu-cta > a {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--brand); color:var(--ink);  /* 白文字は 2.91:1 で不合格 → ink で 6.47:1 */
  font-size:var(--fs-sm); font-weight:700; text-decoration:none; white-space:nowrap;
  min-height:44px; padding:0 24px; border-radius:100px;
  transition:background .25s, color .25s, transform .2s;
}
.as-menu-cta > a:hover { background:var(--ink); color:#fff; transform:translateY(-1px); }
.as-menu-cta > a::after { display:none !important; }

.as-burger{
  display:none; background:none; border:0; cursor:pointer; color:inherit;
  width:44px; height:44px; padding:11px;   /* 44px = タップ領域の最低ライン */
  flex-direction:column; justify-content:center; gap:5px;
}
.as-burger span{
  display:block; width:22px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .3s, opacity .2s;
}
/* ver2 にはバーガーの open 状態が無く、開いても×にならなかった */
.as-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.as-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.as-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  .as-burger{ display:flex; }
  .as-menu{
    position:fixed; inset:var(--hd) 0 0; background:var(--ink);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding:8px 0 40px; overflow-y:auto;
    transform:translateY(-100%); visibility:hidden;
    transition:transform .38s cubic-bezier(.2,.8,.2,1), visibility .38s;
  }
  .as-menu.is-open{ transform:translateY(0); visibility:visible; }
  .as-menu li{ border-block-end:1px solid var(--line-dark); }
  .as-menu :where(li:not(.as-menu-cta)) a{ color:#fff; font-size:var(--fs-base); padding:19px var(--gut); }
  .as-menu :where(li:not(.as-menu-cta)) a::after{ display:none; }
  /* ver2 は li と a の padding が二重に掛かり、CTA だけ 20px 右にズレていた */
  .as-menu li.as-menu-cta{ border-block-end:0; padding:22px var(--gut) 0; }
    /* ドロワーのCTAも他のボタンと同じ56pxに揃える（padding指定だと59pxになる） */
  .as-menu li.as-menu-cta > a{ width:100%; justify-content:center; min-height:56px; padding-block:0; }
  body.as-locked{ overflow:hidden; }   }
:target{ scroll-margin-block-start:calc(var(--hd) + 16px); }

@keyframes as-slide{ to{ transform:translateX(-50%); } }

                         

/* ── 実績カードのピクトグラム ────────────────────────────────
   数字が4つ横に並ぶだけだと、どれも同じ重さに見えて読み分けができない。
   アイコンが1つあると、数字を読む前に「売上の話／株価の話」と当たりがつく。

   絵は本文ではなくここ（CSS）に置き、mask で抜いて色だけ地に合わせる。
   **本文にSVGを書かせない**ためで、編集者は投稿編集画面でグループブロックの
   「スタイル」から選ぶだけでよい（register_block_style / ASETIA_STAT_ICONS）。
   background-image ではなく mask にしてあるのは、明地・暗地で
   同じファイルを使い回すため（画像を2色分用意しなくて済む）。
   ------------------------------------------------------------ */
[class*="is-style-stat-"]::before{
  content:""; display:block;
  width:clamp(26px,2.4vw,32px); aspect-ratio:1;
  margin-block-end:clamp(14px,1.6vw,20px);
  background-color:var(--brand-tx);
  -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat;
}

.is-style-stat-sales::before{
  -webkit-mask-image:url(../img/pict-stat-sales.svg); mask-image:url(../img/pict-stat-sales.svg);
}
.is-style-stat-stock::before{
  -webkit-mask-image:url(../img/pict-stat-stock.svg); mask-image:url(../img/pict-stat-stock.svg);
}
.is-style-stat-launch::before{
  -webkit-mask-image:url(../img/pict-stat-launch.svg); mask-image:url(../img/pict-stat-launch.svg);
}
.is-style-stat-press::before{
  -webkit-mask-image:url(../img/pict-stat-press.svg); mask-image:url(../img/pict-stat-press.svg);
}

/* テンプレート直書きの <a class="as-btn"> は inline-flex なので、
   text-align:center が効いて既に中央にいる。こちらは触らない。 */

/* ボタンは2つの形で出てくる。
     1. テンプレート直書きの <a class="as-btn">
     2. エディターの wp:button（クラスはラッパー div に付き、中に <a> が入る）
   `.as-btn` と素で書くと 2 のラッパーにも当たり、ラッパーと <a> が
   それぞれピルになって「ピルの中にピル」ができる（実測 248×89 の中に 172×55）。
   **必ず a.as-btn と限定すること。** ラッパー側は下の専用ルールで扱う。

   高さは min-height で揃える。padding だけだとゴースト（1px枠）が
   2px だけ高くなり、並べたときに下端がずれる。 */
a.as-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 38px;
  background:var(--brand); color:var(--ink);   /* 6.47:1 */
  border-radius:100px;
  font-size:var(--fs-sm); font-weight:700; line-height:1.5; text-decoration:none;
  transition:transform .25s, box-shadow .25s, background .25s, color .25s;
}
a.as-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,160,233,.32); background:#33b5ef; color:var(--ink); }

/* ============================================================
   フォーム（CF7）
   ============================================================ */
.as-form{ max-width:660px; display:grid; gap:23px; }
:where(.as-form) label{ display:block; font-weight:700; font-size:var(--fs-sm); margin-block-end:8px; }

.as-form input[type=text], .as-form input[type=email], .as-form input[type=tel],
.as-form textarea, .as-form select{
  width:100%; border:1px solid var(--line); padding:14px 15px;
  font-family:inherit; font-size:var(--fs-base);   /* iOS の自動ズーム回避に 16px 以上 */
  background:#fff; color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.as-form textarea{ min-height:9em; resize:vertical; }
.as-form input:focus, .as-form textarea:focus, .as-form select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,160,233,.18);
}
.as-form .wpcf7-list-item{ margin:0; }
.as-form .wpcf7-radio, .as-form .wpcf7-checkbox{ display:flex; flex-wrap:wrap; gap:9px; }
.as-form .wpcf7-list-item-label{
  display:inline-block; border:1px solid var(--line); padding:10px 18px;
  border-radius:100px; font-size:var(--fs-sm); cursor:pointer; transition:.2s;
}
.as-form .wpcf7-list-item input{ position:absolute; opacity:0; width:0; height:0; }
.as-form .wpcf7-list-item input:checked + .wpcf7-list-item-label{ background:var(--ink); color:#fff; border-color:var(--ink); }
.as-form .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label{ outline:2px solid var(--brand-tx); outline-offset:2px; }

/* 同意チェック。プライバシーポリシーへの導線をフォーム内に置く。
   CF7 は acceptance を span で三重に包むので、全部 inline に戻して
   1行の文章としてチェックボックスと並ぶようにする。 */
.as-form-consent{ font-size:var(--fs-sm); margin:0; line-height:1.8; }
.as-form-consent .wpcf7-form-control-wrap,
.as-form-consent .wpcf7-acceptance,
.as-form-consent .wpcf7-list-item{ display:inline; margin:0; }
/* ラベルは block（フォーム共通）、ラベル文字は inline-block（選択肢ピル用）が
   既定。ここでは1行の文章にしたいので両方 inline に戻す。inline-block のままだと
   文字列が分割できず、チェックボックスの隣に入りきらずに丸ごと次行へ落ちる。 */
.as-form-consent label{ display:inline; font-weight:400; margin:0; }
.as-form-consent .wpcf7-list-item-label{
  display:inline; border:0; padding:0; border-radius:0; font-size:inherit; cursor:pointer;
}
/* 18px では WCAG 2.5.8（AA, 24×24）を下回っていた。ラベル文字を押しても
   入るとはいえ、四角そのものを狙う人は少なくない。しかもここは送信直前の
   最後の関門なので、24px まで上げる。 */
.as-form-consent .wpcf7-list-item input[type=checkbox]{
  position:static; opacity:1; width:24px; height:24px; flex:none;
  vertical-align:-6px; margin-inline-end:10px; accent-color:var(--brand-tx);
}
.as-form-consent a{ color:var(--brand-tx); text-underline-offset:3px; }
/* ハニーポット。人間には見せない（display:none だと埋めないボットがいるので位置で隠す） */
.as-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.as-form .wpcf7-submit{
  justify-self:start; cursor:pointer; border:0;
  background:var(--brand); color:var(--ink);   /* 6.47:1。他のCTAと同じピル */
  min-height:56px; padding:0 48px; border-radius:100px;
  font-family:inherit; font-size:var(--fs-base); font-weight:700;
  transition:background .25s, color .25s, transform .2s, box-shadow .25s;
}
.as-form .wpcf7-submit:hover{
  background:#33b5ef; color:var(--ink);
  transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,160,233,.32);
}
.wpcf7-not-valid-tip{ margin-block-start:6px; font-size:var(--fs-xs); color:#c8102e; }
.wpcf7 form .wpcf7-response-output{ margin:0; padding:15px 19px; border-width:1px; font-size:var(--fs-sm); }
.wpcf7 form.invalid .wpcf7-response-output{ border-color:#c8102e; background:#fdf3f4; }
.wpcf7 form.sent .wpcf7-response-output{ border-color:var(--brand); background:var(--soft); }

/* ============================================================
   フッター
   ============================================================ */
.as-ft{ background:var(--ink); color:#fff; padding-block:clamp(50px,6.2vw,82px) 34px; }
/* 区画ごとに役割を持たせる：ロゴと相談／サービス／事例・コラム／会社情報。規約は最下段。
   列の見出しは管理画面の用語（サービス・事例・コラム）に揃えた和文。
   以前は SITEMAP / SERVICE の英字2列で、事例・コラムの区画が無かった。 */
.as-ft-top > *,
.as-ft-top nav > *,
.as-ft-btm > * { margin-block:0; }
.as-ft-btm :where(p){ margin:0; }
.as-ft-top{
  display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:clamp(24px,4vw,56px);
  padding-block-end:38px; border-block-end:1px solid var(--line-dark);
}
@media (max-width:860px){
  .as-ft-top{ grid-template-columns:1fr 1fr; }
  
}
.as-ft .as-logo .cls-1{ fill:#fff; }
.as-ft .as-logo .cls-2{ fill:var(--ink); }

.as-ft-top nav > .as-ft-navlabel{ font-size:var(--fs-sm); font-weight:700; color:var(--brand-lt); margin-block-end:6px; }
.as-ft-top nav ul{ list-style:none; display:grid; gap:1px; margin:0; padding:0; }
/* タップ領域は44px。「お問い合わせ」が入る列なので、押し損ねを作らない。 */
.as-ft-top nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--fs-sm); line-height:1.5; color:var(--white-85); text-decoration:none;
}
.as-ft-top nav a:hover{ color:#fff; }
/* ver2 のフッター最下段は 3.81:1 で不合格だったので白 87% に上げている */
.as-ft-btm{
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  padding-block-start:23px; font-size:var(--fs-xs); color:var(--white-85);
}
.as-ft-btm a{
  display:inline-flex; align-items:center; min-height:44px;   /* 上と同じ理由 */
  color:var(--white-85); text-decoration:none;
}
.as-ft-btm a:hover{ color:#fff; }

/* ============================================================
   ブロックエディター互換レイヤー

   トップページの中身はテンプレートの生HTMLではなく固定ページの
   ブロックに移してある。ブロックが吐くマークアップは手書きHTMLと
   微妙に違うので、その差をここで吸収する。

   主な差分：
   - wp:group はフローレイアウトで子に margin-block-start:24px を配る
     → 自前のflex/gridコンポーネントの中では無効化する
   - wp:button はクラスをラッパー div に付ける（<a> ではない）
     → 内側の .wp-block-button__link に意匠を回す
   - エディターの太字/斜体は <strong>/<em>（<b>/<i> ではない）
     → 両方受ける
   ============================================================ */

/* --- フローレイアウトの余白を自前コンポーネント内で無効化 ---
   :where() で 0,0,1 まで落としてあるので、個々のコンポーネントが持つ
   margin（.as-sub の margin-block-start など）は常にこちらに勝つ。
   0,1,1 で書くと勝敗がソース順で決まってしまい、P0で踏んだのと同じ罠になる。 */
:where(.as-wrap) > * { margin-block:0; }

/* --- ボタン：<a class="as-btn"> と wp:button の両方を同じ見た目に --- */
/* ラッパー（div.wp-block-button.as-btn）は見た目を持たない。装飾は中の <a> だけ。 */
.wp-block-button.as-btn{
  background:none; border:0; padding:0; border-radius:0; box-shadow:none;
}
.wp-block-button.as-btn > .wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 38px;
  background:var(--brand); color:var(--ink);
  border-radius:100px;
  /* body から行間 1.9 を継承すると a.as-btn より背が高くなる */
  font-size:var(--fs-sm); font-weight:700; line-height:1.5; text-decoration:none;
  transition:transform .25s, box-shadow .25s, background .25s, color .25s;
}
.wp-block-button.as-btn > .wp-block-button__link:hover{
  transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,160,233,.32);
  background:#33b5ef; color:var(--ink);
}

/* ============================================================
   アクセシビリティ
   ============================================================ */
.as-skip{
  position:absolute; inset-inline-start:-9999px; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px; text-decoration:none;
}
.as-skip:focus{ inset-inline-start:8px; inset-block-start:8px; }
:where(a, button, summary, input, textarea, select):focus-visible{
  outline:2px solid var(--brand-tx); outline-offset:2px;
}

.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ============================================================
   新デザイン（2026-09 リニューアル）の上書き
   モックの作法：白地・2pxの黒罫線・角丸なし・青のCTA・矢印なし
   ここより上の旧デザインの指定を、必要な分だけ上書きする。
   ============================================================ */

/* ヘッダー：白地、下に2pxの罫線 */
.as-hd{
  background:#fff;
  border-block-end:2px solid var(--ink);
  box-shadow:none;
}
.as-menu :where(li:not(.as-menu-cta)) a{ font-weight:700; }
.as-menu-cta > a{
  background:var(--brand);
  color:#fff;
  border:2px solid var(--ink);
  border-radius:0;
  font-weight:700;
}
.as-menu-cta > a:hover{ background:var(--ink); color:#fff; transform:none; }

/* フッター：白地・黒罫線のグリッド */
.as-ft{ background:#fff; color:var(--ink); border-block-start:2px solid var(--ink); padding-block:0; }
.as-ft .as-wrap{ max-width:none; padding-inline:0; }
.as-ft-top{
  display:grid;
  gap:2px;
  background:var(--ink);
  border-block-end:2px solid var(--ink);
  padding:0;
}
.as-ft-top > *{ background:#fff; padding:36px 40px; }
.as-ft .as-logo .cls-1{ fill:var(--ink); }
.as-ft .as-logo .cls-2{ fill:#fff; }

.as-ft-top nav > .as-ft-navlabel{
  font-family:var(--font-en, Archivo, sans-serif);
  font-weight:900;
  font-size:18px;
  letter-spacing:-.02em;
  color:var(--ink);
  margin-block-end:16px;
}
.as-ft-top nav a{ color:var(--ink); font-weight:700; }
.as-ft-top nav a:hover{ color:var(--brand-tx); }
.as-ft .as-btn{
  background:var(--brand);
  color:#fff;
  border:0;
  border-radius:0;
  font-weight:700;
}
/* 下段の線は1本だけ。上の区画の border-block-end と2本になっていた
   （あいだにブロックの余白が入るので、二重線に見える）。 */
.as-ft-top{ border-block-end:0; }
.as-ft-btm{
  margin-block-start:0;
  border-block-start:2px solid var(--ink);
  padding:18px 56px;
  color:var(--ink);
}
.as-ft-btm a{ color:var(--ink); }

/* スマホ：フッターはプライバシーポリシーと©だけにする */
@media (max-width:781px){
  .as-ft-top{ display:none; }
  .as-ft-btm{ padding:8px 20px; }
}

/* ============================================================
   コマ割りのレイアウト（2026-09 リニューアル）
   モック ServiceIndex / ServicePR の作法をそのままクラスにしたもの。
   2pxの黒罫線で仕切った面（コマ）＋ずらさない黒い影。角丸・矢印・黒地は使わない。
   旧デザインの .as-* とは混ぜないため、接頭辞を asn- にしている。
   ============================================================ */

.asn-en{
  font-family:var(--en);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:.9;
  display:block;
}

/* 区画。セクション同士は罫線で区切らず、余白で切る（PC 144 / SP 120）。 */
.asn-sec{ padding-block-end:40px; }
.asn-sec--last{ padding-block-end:144px; }

/* 区画の見出し（英字＋和文H2＋リード） */
/* 装飾の英字（aria-hidden）は1語なので折り返せない。利用者が文字間隔を広げる設定
   （WCAG 1.4.12）にしたとき、ページごと横に伸びてしまう。はみ出した分は切って、
   ページに横スクロールが出ないようにする。読ませる文字はここでは切れない。 */
.asn-shead, .asn-phero-t{ overflow-x:clip; }

.asn-shead{
  display:flex; flex-direction:column; gap:20px;
  padding:104px 56px 48px;
}
.asn-shead-t{ display:flex; flex-direction:column; gap:12px; }
.asn-shead .asn-en{ font-size:clamp(72px, 8.4vw, 120px); }
.asn-shead h2{ margin:0; font-size:34px; font-weight:900; line-height:1.4; }
.asn-shead p{ margin:0; font-size:16px; line-height:1.8; max-width:30em; }

/* コマの面。格子の隙間（2px）が黒く見えるように、下地をインクにする。 */
.asn-grid{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
  gap:2px; background:var(--ink); border-block-start:2px solid var(--ink);
}
.asn-panel{
  border:2px solid var(--ink);
  margin:0 72px 0 56px;
  box-shadow:16px 16px 0 var(--ink);
  background-color:var(--ink);
}
.asn-cell{
  background:#fff; color:var(--ink);
  padding:24px 28px;
  display:flex; flex-direction:column; justify-content:space-between;
  text-decoration:none;
}
a.asn-cell:hover{ color:var(--ink); }
.asn-cell :where(p){ margin:0; }

/* 一覧・詳細への導線。白地・黒枠・黒い影のボタンに統一する。 */
.asn-more{ padding:40px 72px 0 56px; display:flex; }
.asn-more a{
  display:flex; align-items:center; justify-content:center;
  min-height:68px; padding:0 48px;
  background:#fff; border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink);
  text-decoration:none; font-size:17px; font-weight:900; color:var(--ink);
}
.asn-more a:hover{ background:var(--ink); color:#fff; }

/* 色の面に載せる網点トーン（右上から散らす） */
.asn-tone{ position:relative; isolation:isolate; }
.asn-tone::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(var(--dot) 34%, transparent 37%);
  background-size:10px 10px;
  -webkit-mask-image:radial-gradient(circle at 100% 0%, #000 18%, transparent 48%);
  mask-image:radial-gradient(circle at 100% 0%, #000 18%, transparent 48%);
}
.asn-tb{ --dot:#004f7d; }
.asn-tp{ --dot:#c9265f; }
.asn-ty{ --dot:#d19c00; }

/* サービスのコマ */
.asn-svc{ grid-column:span 4; gap:28px; padding:32px 36px; position:relative; }
.asn-svc .asn-en{ font-size:clamp(34px, 3.9vw, 56px); }
.asn-svc-t{ display:flex; flex-direction:column; gap:6px; }
.asn-svc-t strong{ font-size:16px; font-weight:900; line-height:1.5; }
.asn-svc-t span{ font-size:14px; font-weight:400; line-height:1.7; }
.asn-svc--blue{ background:var(--brand); color:#fff; }
.asn-svc--pink{ background:var(--pink); }
.asn-svc--yellow{ background:var(--yellow); }

/* いま見ているサービス。内側の太い枠と「表示中」のタグで示す（リンクにしない）。 */
.asn-svc--cur{ box-shadow:inset 0 0 0 6px var(--ink); }
.asn-cur-tag{
  position:absolute; inset-block-start:12px; inset-inline-end:12px;
  font-size:13px; font-weight:700; line-height:1.3;
  background:#fff; color:var(--ink); border:2px solid var(--ink); padding:3px 8px;
}

/* ページの頭（パンくず・英字・H1・リード・相談ボタン＋写真） */
.asn-phero{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
  grid-template-rows:560px; gap:2px; background:var(--ink);
}
.asn-phero-t{
  grid-column:1 / 8; background:#fff;
  padding:32px 56px 56px;
  display:flex; flex-direction:column; justify-content:space-between; gap:40px;
}
.asn-phero-t > div{ display:flex; flex-direction:column; gap:24px; }
.asn-phero .asn-en{ font-size:clamp(84px, 9.4vw, 136px); }
.asn-phero h1{ margin:0; font-size:48px; font-weight:900; line-height:1.3; }
.asn-phero p{ margin:0; font-size:18px; line-height:1.9; max-width:32em; }
.asn-phero img{ grid-column:8 / 13; width:100%; height:100%; object-fit:cover; display:block; min-height:0; }
.asn-crumb{ display:flex; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--gray,#5a636c); }
.asn-crumb a{ color:var(--gray,#5a636c); }

/* 青いCTA。黒地は使わない。 */
.asn-cta{
  align-self:flex-start; text-decoration:none;
  background:var(--brand); color:#fff;
  padding:20px 36px; font-weight:700; font-size:17px;
  border-radius:0;
}
.asn-cta:hover{ background:var(--ink); color:#fff; }

@media (max-width:781px){
  .asn-sec{ padding-block-end:40px; }
  .asn-sec--last{ padding-block-end:120px; }
  .asn-shead{ gap:8px; padding:80px 20px 28px; }
  .asn-shead-t{ gap:8px; }
  .asn-shead .asn-en{ font-size:min(64px, calc(19vw - 8px)); }
  .asn-shead h2{ font-size:22px; line-height:1.45; }
  .asn-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .asn-panel{ margin:0 30px 0 14px; box-shadow:10px 10px 0 var(--ink); }
  .asn-cell{ padding:18px 16px; gap:14px; }
  .asn-more{ padding:28px 30px 0 14px; }
  .asn-more a{ flex:1; min-height:60px; padding:0 16px; border-width:3px; box-shadow:6px 6px 0 var(--ink); font-size:16px; }
  .asn-svc{ padding:18px 16px; gap:14px; justify-content:flex-start; }
  .asn-svc .asn-en{ font-size:min(22px, 5vw); }

  .asn-phero{ display:block; }
  .asn-phero-t{ padding:20px 20px 28px; gap:16px; }
  .asn-phero-t > div{ gap:16px; }
  .asn-phero .asn-en{ font-size:min(72px, calc(18vw - 8px)); margin-block-start:20px; }
  .asn-phero h1{ font-size:28px; line-height:1.4; }
  .asn-phero p{ font-size:16px; line-height:1.85; }
  .asn-phero img{ height:240px; border-block-start:2px solid var(--ink); }
  .asn-cta{ align-self:stretch; justify-content:center; display:flex; align-items:center;
            min-height:52px; padding:0 20px; font-size:16px; }
}

/* ニュースマーケティング（真ん中に置くサービス）の大きいコマ */
.asn-hub{ grid-template-rows:400px; }
.asn-svc--hub{ grid-column:1 / 8; }
.asn-hub-body{ grid-column:8 / 13; }
.asn-hub .asn-svc{ padding:48px 56px; gap:0; justify-content:space-between; }
.asn-hub .asn-en--xl{ font-size:clamp(96px, 10.4vw, 150px); }
.asn-hub-tags{ display:flex; gap:8px; }
.asn-hub-tags > span{ font-size:13px; font-weight:700; border:2px solid currentColor; padding:4px 10px; }
.asn-hub-body{ padding:48px 56px; gap:20px; justify-content:center; font-size:16px; line-height:1.9; }
@media (max-width:781px){
  .asn-hub{ grid-template-rows:auto; }
  .asn-svc{ grid-column:auto; }
  .asn-hub .asn-svc{ grid-column:1 / 3; padding:26px 20px; gap:18px; justify-content:flex-start; }
  .asn-hub .asn-en--xl{ font-size:min(88px, 23vw); }
  .asn-hub-tags{ flex-wrap:wrap; gap:6px; }
  .asn-hub-body{ grid-column:1 / 3; padding:22px 20px 24px; gap:14px; justify-content:flex-start; line-height:1.85; }
  .asn-svc:last-child{ grid-column:1 / 3; }
}

/* 事例の抜粋（コマ割り）。1件目は写真つきの大きいコマ。 */
.asn-img{ width:100%; height:100%; object-fit:cover; display:block; min-height:0; }
.asn-cases{ grid-template-rows:250px 250px; }
.asn-case{ padding:0; gap:0; justify-content:flex-start; }
.asn-case > .asn-img{ border-block-end:2px solid var(--ink); }
.asn-case-b{ padding:28px 32px 32px; display:flex; flex-direction:column; gap:12px; flex:1; }
.asn-case--lead{ grid-column:1 / 7; grid-row:1 / 3; display:grid; grid-template-rows:minmax(0,1fr) auto; }
.asn-case--lead .asn-case-b{ padding:28px 40px 32px; }
.asn-case--row{ grid-column:7 / 13; display:grid; grid-template-columns:1fr 1fr; }
.asn-case--row > .asn-img{ border-block-end:0; border-inline-end:2px solid var(--ink); }
.asn-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.asn-tag{ font-size:13px; font-weight:700; background:#fff; border:2px solid var(--ink); padding:4px 10px; }
.asn-case-res{ font-size:24px; font-weight:900; color:var(--brand-tx); line-height:1.3; }
.asn-case--lead .asn-case-t{ font-size:22px; line-height:1.5; }
.asn-case-t{ font-size:17px; line-height:1.6; }
.asn-case-who{ font-size:14px; color:var(--gray); margin-block-start:auto; }

/* 相談への導線 */
.asn-contact{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  grid-auto-rows:360px; gap:2px; background:var(--ink);
  border-block-start:2px solid var(--ink);
}
.asn-contact-t{
  background:#fff; padding:40px 56px;
  display:flex; flex-direction:column; justify-content:center; gap:24px;
}
.asn-contact-t h2{ margin:0; font-size:36px; font-weight:900; line-height:1.45; }
.asn-contact-t p{ margin:0; font-size:16px; line-height:1.8; }
.asn-shead-jp{ font-size:15px; font-weight:700; }

@media (max-width:781px){
  .asn-cases{ grid-template-rows:auto; }
  .asn-case--lead{ grid-column:1 / 3; grid-row:auto; }
  .asn-case--lead > .asn-img{ height:210px; }
  .asn-case--lead .asn-case-b{ padding:18px 20px 20px; gap:8px; }
  .asn-case--lead .asn-case-t{ font-size:18px; line-height:1.55; }
  .asn-case--row{ grid-column:auto; display:flex; }
  .asn-case--row > .asn-img{ height:130px; border-block-end:2px solid var(--ink); border-inline-end:0; }
  .asn-case-b{ padding:14px 14px 16px; gap:8px; }
  .asn-case-res{ font-size:16px; line-height:1.4; }
  .asn-case-t{ font-size:15px; line-height:1.6; }
  .asn-case-who{ font-size:13px; }

  .asn-contact{ grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; }
  .asn-contact > .asn-img{ height:200px; }
  .asn-contact-t{ padding:24px 20px 28px; gap:16px; }
  .asn-contact-t h2{ font-size:24px; }
}

.asn-phero-act{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.asn-phero-sub{ font-size:14px; font-weight:700; }
.asn-shead-lede :where(p){ margin:0; font-size:16px; line-height:1.8; max-width:30em; }

/* 段落だけの面 */
.asn-prose{ grid-column:1 / -1; padding:48px 56px; gap:20px; font-size:16px; line-height:1.9; }
.asn-prose :where(p){ margin:0; }

/* 大きな一文の面（色つき）＋右の説明 */
.asn-stmt{
  grid-column:1 / 7; background:var(--yellow);
  padding:48px 56px; gap:48px;
}
.asn-stmt .asn-tags{ gap:8px; }
.asn-stmt strong{ font-size:44px; line-height:1.45; letter-spacing:-.01em; }
.asn-stmt-b{
  grid-column:7 / 13; padding:48px 56px; gap:20px;
  justify-content:center; font-size:16px; line-height:1.9;
}
.asn-stmt-b :where(p){ margin:0; }

.asn-cols-3 > *{ grid-column:span 4; }
.asn-step{ padding:36px 36px 40px; gap:16px; justify-content:flex-start; }
.asn-step .asn-en{ font-size:64px; }
.asn-step h3{ margin:0; font-size:21px; font-weight:900; line-height:1.6; word-break:keep-all; overflow-wrap:anywhere; }
.asn-step :where(p){ margin:0; font-size:16px; line-height:1.8; }

/* FAQ。質問はブルーの文字、答えは黒。開閉はしない（3列で並べて読ませる）。 */
.asn-faq{ padding:40px 40px 44px; gap:20px; justify-content:flex-start; }
.asn-faq h3{ margin:0; font-size:21px; font-weight:900; line-height:1.5; color:var(--brand-tx); }
.asn-faq :where(p){ margin:0; font-size:16px; line-height:1.9; }

/* 全10件のサービス（詳細ページの下部）は5列の小さいコマ */
.asn-svcs--all{ grid-template-columns:repeat(5, minmax(0,1fr)); grid-auto-rows:130px; }
.asn-svcs--all > .asn-svc{ grid-column:auto; padding:44px 20px 20px; gap:10px; justify-content:flex-start; }
.asn-svcs--all .asn-en{ font-size:30px; }
.asn-svcs--all .asn-svc-t strong{ font-size:15px; }
.asn-svcs--all .asn-svc-t > span{ display:none; }

@media (max-width:781px){
  
  
  
  
  .asn-phero-act{ flex-direction:column; align-items:stretch; gap:14px; }
  .asn-phero-sub{ text-align:center; }

  .asn-prose,
  .asn-stmt, .asn-stmt-b{ grid-column:1 / -1; padding:24px 20px 28px; gap:20px; }
  .asn-stmt{ gap:20px; }
  .asn-stmt strong{ font-size:26px; line-height:1.45; }
  .asn-cols-3 > * { grid-column:1 / -1; }
  .asn-step{ padding:20px 16px 24px; gap:12px; }
  .asn-step .asn-en{ font-size:40px; }
  .asn-step h3{ font-size:18px; }
  .asn-faq{ padding:20px 16px 24px; gap:12px; }
  .asn-faq h3{ font-size:18px; }

  .asn-svcs--all{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:auto; }
  .asn-svcs--all > .asn-svc{ padding:18px 16px; }
  .asn-svcs--all .asn-en{ font-size:min(22px, 5vw); }
}

/* サービス詳細の事例（2件並び）。写真を上、テキストを下に。 */
.asn-case--pair{ grid-column:span 6; display:grid; grid-template-rows:280px auto; }
.asn-case:not(:has(.asn-img)){ display:flex; grid-template-rows:auto; }
.asn-case--pair > .asn-img{ height:280px; }
.asn-cases:has(.asn-case--pair){ grid-template-rows:auto; }
@media (max-width:781px){
  .asn-case--pair{ grid-column:1 / 3; grid-template-rows:auto; }
  .asn-case--pair > .asn-img{ height:200px; }
}

/* ── ニュースマーケティング（ほかのサービスでも使う部品） ─────── */

/* ページヘッダ直下の数字の帯 */
.asn-factbar{
  margin:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:2px; background:var(--ink); border-block:2px solid var(--ink);
}
.asn-factbar--1{ grid-template-columns:minmax(0,1fr); }
.asn-fact{
  background:var(--brand); color:#fff;
  padding:28px 56px 32px;
  display:flex; flex-direction:column; gap:14px;
}
.asn-fact dt{ font-size:16px; font-weight:700; }
.asn-fact dt small{ font-size:13px; }
.asn-fact dd{ margin:0; display:flex; align-items:baseline; gap:6px; }
.asn-fact dd .asn-en{ font-size:88px; }
.asn-fact dd > span:last-child{ font-size:30px; font-weight:900; }
.asn-factnote{
  margin:0; padding:18px 56px;
  font-size:15px; font-weight:700; line-height:1.6;
  border-block-end:2px solid var(--ink);
}

/* HOW：左に大きな一文（青）、右に01・02・03の工程 */
.asn-how{ grid-template-rows:repeat(3, 180px); }
.asn-stmt--blue{ background:var(--brand); color:#fff; grid-row:1 / 4; }
.asn-stmt--blue strong{ font-size:52px; line-height:1.35; }
.asn-tags--w > .asn-tag{ background:transparent; border-color:currentColor; color:inherit; }
.asn-steps-row{
  grid-column:7 / 13; grid-row:1 / 4;
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-rows:repeat(3, minmax(0,1fr)); gap:2px;
}
.asn-steps-row > li{
  background:#fff; padding:0 40px;
  display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:8px;
}
.asn-steps-row .asn-en{ font-size:76px; }
.asn-steps-row h3{ margin:0; font-size:22px; font-weight:900; }
.asn-steps-row :where(p){ margin:0; font-size:16px; line-height:1.8; }

/* WHY：統計の2枚 */
.asn-stats > .asn-stat{ grid-column:span 6; }
.asn-stat{
  margin:0; background:#fff; padding:44px 56px 48px;
  display:flex; flex-direction:column; gap:20px;
}
.asn-stat--pink{ background:var(--pink); gap:28px; }
.asn-stat-n{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.asn-stat-n .asn-en{ font-size:clamp(96px, 11vw, 160px); }
.asn-stat-n > span:nth-child(2){ font-size:44px; font-weight:900; }
.asn-stat-sub{ font-size:26px; font-weight:900; margin-inline-start:8px; }
.asn-stat figcaption{ display:flex; flex-direction:column; gap:10px; }
.asn-stat figcaption strong{ font-size:22px; line-height:1.6; }
.asn-src{ font-size:13px; line-height:1.6; }
.asn-stat:not(.asn-stat--pink) .asn-src{ color:var(--gray); }
.asn-bar{ display:flex; height:28px; border:2px solid var(--ink); }
.asn-bar > span:nth-child(2){ border-inline-start:2px solid var(--ink); }
.asn-legend{ display:flex; flex-wrap:wrap; gap:28px; font-size:14px; font-weight:700; }
.asn-legend > span{ display:flex; gap:6px; align-items:center; }
.asn-sw{ width:14px; height:14px; border:2px solid var(--ink); }
.asn-sw--pink{ background:var(--pink); }
.asn-sw--yellow{ background:var(--yellow); }

/* PLUS：ニュースになる理由をつくる手段 */
.asn-pluses{ grid-template-rows:repeat(2, 170px); }
.asn-plus{ padding:32px; gap:16px; }
.asn-pluses{ grid-template-columns:repeat(12, minmax(0,1fr)); }
.asn-pluses > :nth-child(1){ grid-column:1 / 4;  grid-row:1 / 3; }
.asn-pluses > :nth-child(2){ grid-column:4 / 7;  grid-row:1; }
.asn-pluses > :nth-child(3){ grid-column:4 / 7;  grid-row:2; }
.asn-pluses > :nth-child(4){ grid-column:7 / 10; grid-row:1 / 3; }
.asn-pluses > :nth-child(5){ grid-column:10 / 13; grid-row:1 / 3; }
.asn-plus--sm{ padding:24px 32px; }
.asn-plus--lg .asn-en{ font-size:56px; }
.asn-plus--sm .asn-en{ font-size:52px; }
.asn-plus-t{ display:flex; flex-direction:column; gap:6px; }
.asn-plus--lg .asn-plus-t strong{ font-size:24px; line-height:1.4; }
.asn-plus--sm .asn-plus-t strong{ font-size:19px; }
.asn-plus-t > span{ font-size:15px; font-weight:700; line-height:1.6; }

/* PLAN：料金の2枠 */
.asn-plans > .asn-plan{ grid-column:span 6; }
.asn-plan{ padding:40px 48px 44px; gap:18px; justify-content:flex-start; }
.asn-plan--yellow{ background:var(--yellow); }
.asn-plan--blue{ background:var(--brand); color:#fff; }
.asn-plan-en{ font-size:56px; }
.asn-plan-t{ font-size:24px; }
.asn-plan-p{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px; font-size:30px; font-weight:900; }
.asn-plan-p .asn-en{ font-size:88px; display:inline-block; }
.asn-plan :where(p){ margin:0; font-size:16px; line-height:1.8; font-weight:700; }
.asn-plan :where(ul){
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:8px; font-size:16px; line-height:1.6;
}
.asn-plan :where(li){ padding-inline-start:16px; position:relative; }
.asn-plan :where(li)::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.7em;
  width:7px; height:7px; background:currentColor;
}

@media (max-width:781px){
  .asn-factbar, .asn-factbar--3{ grid-template-columns:minmax(0,1fr); }
  .asn-fact{ padding:18px 20px 20px; gap:8px; }
  .asn-fact dd .asn-en{ font-size:56px; }
  .asn-fact dd > span:last-child{ font-size:20px; }
  .asn-factnote{ padding:14px 20px; font-size:14px; }

  .asn-how{ grid-template-rows:auto; }
  .asn-stmt--blue{ grid-column:1 / -1; grid-row:auto; }
  .asn-stmt--blue strong{ font-size:28px; }
  .asn-steps-row{ grid-column:1 / -1; grid-row:auto; grid-template-rows:auto; }
  .asn-steps-row > li{ padding:18px 16px; grid-template-columns:56px minmax(0,1fr); gap:12px; align-items:start; }
  .asn-steps-row .asn-en{ font-size:40px; }
  .asn-steps-row h3{ font-size:18px; }

  .asn-stats > .asn-stat{ grid-column:1 / -1; }
  .asn-stat{ padding:24px 20px 28px; gap:16px; }
  .asn-stat-n > span:nth-child(2){ font-size:28px; }
  .asn-stat-sub{ font-size:18px; margin-inline-start:0; }
  .asn-stat figcaption strong{ font-size:17px; }
  .asn-legend{ gap:12px; font-size:13px; }

  .asn-pluses{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:auto; }
  .asn-pluses > *{ grid-column:auto !important; grid-row:auto !important; padding:18px 16px; gap:12px; }
  .asn-pluses > :nth-child(1), .asn-pluses > :nth-child(5){ grid-column:1 / 3 !important; }
  .asn-plus--lg .asn-en, .asn-plus--sm .asn-en{ font-size:min(32px, 7vw); }
  .asn-plus--lg .asn-plus-t strong{ font-size:19px; }

  .asn-plans > .asn-plan{ grid-column:1 / -1; }
  .asn-plan{ padding:22px 18px 26px; gap:12px; }
  .asn-plan-en{ font-size:34px; }
  .asn-plan-t{ font-size:20px; }
  .asn-plan-p{ font-size:20px; }
  .asn-plan-p .asn-en{ font-size:56px; }
}

/* ============================================================
   青の面に載せる文字（2026-09-20 修正・WCAG 2.2 AA）

   旧デザインは「ブルーの面の上に載せる文字は必ずインク」としていた。
   これは当時の青（#00a0e9）で 6.47:1 だったから。いまの青（#0078bd）では
   インク文字が **3.97:1** で 4.5:1 に届かない。白文字なら 4.75:1 で通る。
   色を替えたときに、この決めごとだけ見直されずに残っていた。

   あわせて、面が右端で明るい色へ褪せるグラデーションをやめて単色にする。
   褪せた側では白文字が読めなくなるため。新デザインにグラデーションは無い。
   ============================================================ */
:root{ --grad: var(--brand); }

a.as-btn,
.as-form .wpcf7-submit,
.wp-block-button__link.wp-element-button{ color:#fff; }
a.as-btn:hover{ color:#fff; }

/* 青地のボタンは白文字（インク文字は 3.97:1 で不合格）。
   枠線だけのボタン（--ghost / --line）は白地なので対象外。 */
.wp-block-button.as-btn:not(.as-btn--ghost):not(.as-btn--line) > .wp-block-button__link{ color:#fff; }

/* ============================================================
   トップページ（2026-09-20 コマ割りへ刷新）
   カンプ Main / MainMobile の作法。区画は HERO / NEWS / WHAT WE DO /
   CASE / RESULTS / ABOUT US / CONTACT。
   ============================================================ */

/* 見出し（英字＋和文の小見出し＋右にリード） */
.asn-hhead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
  padding:104px 56px 48px;
}
.asn-hhead-t{ display:flex; flex-direction:column; gap:12px; }
.asn-hhead .asn-en{ font-size:clamp(72px, 8.4vw, 120px); }
.asn-hhead-jp{ font-size:15px; font-weight:700; }
.asn-hhead p{ margin:0; font-size:16px; line-height:1.8; }

/* HERO */
.asn-hero{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
  gap:2px; background:var(--ink);
  border-block-end:2px solid var(--ink); height:720px;
}
.asn-hero-t{
  grid-column:1 / 7; background:#fff;
  padding:72px 56px;
  display:flex; flex-direction:column; justify-content:center; gap:48px;
}
.asn-hero h1{ margin:0; display:flex; flex-direction:column; gap:20px; font-weight:900; }
.asn-hero-sub{ font-size:22px; line-height:1.4; }
.asn-hero-big{ font-size:clamp(48px, 5.9vw, 84px); line-height:1.15; letter-spacing:-.02em; }
.asn-hero p{ margin:0; font-size:18px; line-height:1.9; max-width:28em; }
/* 写真は2枠。左は1枚、右は上下2枚。 */
.asn-hero-g{
  grid-column:7 / 13; display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px; background:var(--ink);
}
.asn-hero-a{ grid-column:1; }
.asn-hero-b{ grid-column:2; display:grid; grid-template-rows:repeat(2, minmax(0,1fr)); gap:2px; }

/* お知らせバー */
.asn-ticker{
  display:flex; align-items:center; gap:56px;
  padding:18px 56px; border-block-end:2px solid var(--ink);
  background:#fff; font-size:15px; font-weight:700; overflow:hidden;
}
.asn-ticker > .asn-en{ font-size:18px; color:var(--brand-tx); line-height:1.4; flex:none; }
.asn-ticker-l{ display:flex; gap:56px; overflow:hidden; }
.asn-ticker-l a{
  display:flex; align-items:center; gap:14px; min-height:24px;
  white-space:nowrap; text-decoration:none;
}
.asn-ticker-l time{ color:var(--gray); }

/* WHAT WE DO：10サービス＋写真1枚 */
.asn-hms{ grid-template-rows:repeat(4, 170px); }
.asn-hm{ padding:24px 28px; gap:12px; }
.asn-hm .asn-en{ font-size:52px; }
.asn-hm-t{ display:flex; flex-direction:column; gap:6px; }
.asn-hm-t strong{ font-size:19px; line-height:1.4; }
.asn-hm-t > span{ font-size:14px; font-weight:700; line-height:1.6; }
.hm-a{ grid-column:1 / 7;  grid-row:1 / 3; padding:36px 40px; }
.hm-a .asn-en{ font-size:clamp(96px, 11.7vw, 168px); }
.hm-a .asn-hm-t strong{ font-size:34px; }
.hm-a .asn-hm-t > span{ font-size:17px; }
.hm-b{ grid-column:7 / 10;  grid-row:1; }
.hm-c{ grid-column:10 / 13; grid-row:1; }
.hm-p{ grid-column:7 / 10;  grid-row:2; }
.hm-d{ grid-column:10 / 13; grid-row:2; }
.hm-e{ grid-column:1 / 4;   grid-row:3; }
.hm-f{ grid-column:1 / 4;   grid-row:4; }
.hm-f .asn-en{ font-size:40px; }
.hm-g{ grid-column:4 / 7;   grid-row:3 / 5; padding:32px; }
.hm-g .asn-en{ font-size:80px; }
.hm-g .asn-hm-t strong{ font-size:24px; }
.hm-h{ grid-column:7 / 10;  grid-row:3; }
.hm-i{ grid-column:7 / 10;  grid-row:4; }
.hm-j{ grid-column:10 / 13; grid-row:3 / 5; padding:32px; }
.hm-j .asn-en{ font-size:clamp(64px, 6.7vw, 96px); }
.hm-j .asn-hm-t strong{ font-size:24px; }
.hm-j .asn-hm-t > span{ font-size:16px; }

/* CASE：写真の下に細いタイトルの帯 */
.asn-hcs{ grid-template-rows:220px 88px 220px 88px; }
.asn-hc{ padding:0; gap:0; display:grid; grid-template-rows:minmax(0,1fr) 88px; }
.asn-hc > .asn-img{ border-block-end:2px solid var(--ink); }
.asn-hc-t{
  padding:0 28px; display:flex; flex-direction:column; justify-content:center; gap:6px;
}
.asn-hc-t strong{ font-size:17px; line-height:1.45; }
.asn-hc-t > span{ font-size:13px; color:var(--gray); }
.hc-1{ grid-column:1 / 7;  grid-row:1 / 5; }
.hc-2{ grid-column:7 / 10; grid-row:1 / 3; }
.hc-3{ grid-column:10 / 13; grid-row:1 / 3; }
.hc-4{ grid-column:7 / 10; grid-row:3 / 5; }
.hc-5{ grid-column:10 / 13; grid-row:3 / 5; }

/* RESULTS：数字の面 */
.asn-res{ grid-template-rows:repeat(4, 130px); }
.asn-rc{ padding:28px 32px; }
.asn-rc-n{ display:flex; align-items:baseline; gap:6px; }
.asn-rc-n .asn-en{ font-size:76px; }
.asn-rc-n > span:last-child{ font-size:22px; font-weight:900; }
.asn-rc strong{ font-size:18px; line-height:1.5; }
.asn-rc-b{ display:flex; flex-direction:column; gap:10px; }
.rc-1{ grid-column:1 / 6;  grid-row:1 / 4; padding:36px 40px; }
.rc-1 .asn-rc-n .asn-en{ font-size:clamp(80px, 8.9vw, 128px); }
.rc-1 .asn-rc-n > span:last-child{ font-size:34px; }
.rc-1 strong{ font-size:28px; }
.rc-p1{ grid-column:6 / 9;  grid-row:1 / 3; }
.rc-2{ grid-column:9 / 13; grid-row:1 / 3; }
.rc-3{ grid-column:6 / 9;  grid-row:3 / 5; }
.rc-4{ grid-column:9 / 13; grid-row:3 / 5; }
.rc-p2{ grid-column:1 / 6;  grid-row:4; }
.asn-mark{ background:linear-gradient(transparent 58%, var(--yellow) 58%); padding:0 4px; }

/* ABOUT US */
.asn-abt{ grid-template-rows:260px 260px auto; }
.ab-1{ grid-column:1 / 7; grid-row:1 / 3; padding:48px 56px; }
.ab-1 strong{ font-size:clamp(40px, 4vw, 58px); line-height:1.3; letter-spacing:-.01em; }
.ab-1 p{ margin:0; font-size:16px; font-weight:700; line-height:1.7; }
.ab-1-b{ display:flex; flex-direction:column; gap:20px; }
.ab-1-note{
  margin:0; padding-block-start:20px; border-block-start:2px solid #fff;
  font-size:18px; font-weight:700;
}
.ab-2{ grid-column:7 / 13; grid-row:1; padding:36px 48px; }
.ab-2 strong{ font-size:30px; line-height:1.4; }
.ab-2 p{ margin:0; font-size:16px; line-height:1.7; }
.ab-2-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ab-2-foot a{ font-weight:700; font-size:14px; }
.ab-3{ grid-column:7 / 10; grid-row:2; padding:32px; }
.ab-4{ grid-column:10 / 13; grid-row:2; padding:32px; }
.ab-num p{ margin:0; font-size:15px; font-weight:700; line-height:1.6; }
.ab-num-v{ display:flex; align-items:baseline; gap:4px; }
.ab-num-v .asn-en{ font-size:60px; }
.ab-num-v > span:first-child{ font-size:18px; font-weight:900; }
.ab-num-v > span:last-child{ font-size:20px; font-weight:900; }
.ab-5{
  grid-column:1 / 13; grid-row:3; padding:24px 56px;
  flex-direction:row; align-items:center; gap:28px; flex-wrap:wrap;
}
.ab-5 strong{ font-size:15px; white-space:nowrap; }

@media (max-width:781px){
  .asn-hhead{ flex-direction:column; align-items:flex-start; gap:8px; padding:80px 20px 28px; }
  .asn-hhead .asn-en{ font-size:min(64px, calc(19vw - 8px)); }
  .asn-hhead-jp{ font-size:13px; }

  .asn-hero{ display:block; height:auto; }
  .asn-hero-t{ padding:32px 20px 28px; gap:18px; }
  .asn-hero h1{ gap:12px; }
  .asn-hero-sub{ font-size:16px; }
  .asn-hero-big{ font-size:44px; line-height:1.2; }
  .asn-hero p{ font-size:16px; line-height:1.85; }
  .asn-hero p br{ display:none; }
  .asn-hero-g{
    grid-column:auto; grid-template-rows:repeat(2, 150px);
    border-block-start:2px solid var(--ink);
  }
  .asn-hero-a{ grid-column:1; grid-row:1 / 3; }
  .asn-hero-b{ grid-column:2; grid-row:1 / 3; display:grid; grid-template-rows:repeat(2, minmax(0,1fr)); }

  .asn-ticker{ flex-direction:column; align-items:flex-start; gap:8px; padding:16px 20px; }
  .asn-ticker-l{ flex-direction:column; gap:8px; }
  .asn-ticker-l a{ font-size:13px; white-space:normal; }
  .asn-ticker-l > a:nth-child(3){ display:none; }

  .asn-hms, .asn-hcs, .asn-res, .asn-abt{ grid-template-rows:auto; }
  .asn-hms > *, .asn-hcs > *, .asn-res > *, .asn-abt > *{ grid-column:auto; grid-row:auto; }
  .asn-hm{ min-height:110px; padding:18px 16px; }
  .asn-hm .asn-en{ font-size:min(30px, 6.2vw); }
  .asn-hm-t strong{ font-size:14px; }
  .hm-a{ grid-column:1 / 3; min-height:200px; padding:24px 20px; }
  .hm-a .asn-en{ font-size:min(88px, 23vw); }
  .hm-a .asn-hm-t strong{ font-size:22px; }
  .hm-a .asn-hm-t > span{ font-size:14px; }
  .hm-f .asn-en{ font-size:min(26px, 5.3vw); }
  .hm-g .asn-en, .hm-j .asn-en{ font-size:min(30px, 7vw); }
  .hm-g .asn-hm-t strong, .hm-j .asn-hm-t strong{ font-size:14px; }
  .hm-j .asn-hm-t > span{ font-size:13px; }
  .hm-p{ display:none; }
  /* 奇数で余ったコマは2列ぶんに広げる。そのままだと横に黒い穴ができる。 */
  .hm-j{ grid-column:1 / 3; }

  .asn-hc{ grid-template-rows:auto; }
  .hc-1{ grid-column:1 / 3; }
  .asn-hc > .asn-img{ height:150px; }
  .hc-1 > .asn-img{ height:210px; }
  .asn-hc-t{ padding:14px 14px 16px; min-height:0; }
  .asn-hc-t strong{ font-size:15px; }

  .asn-rc{ padding:18px 16px; gap:14px; }
  .rc-1{ grid-column:1 / 3; padding:22px 18px; }
  .asn-rc-n{ flex-wrap:wrap; }
  .asn-rc-n .asn-en{ font-size:min(56px, 9vw); }
  .rc-1 .asn-rc-n .asn-en{ font-size:min(88px, 19vw); }
  .rc-1 strong{ font-size:20px; }
  .asn-rc strong{ font-size:15px; white-space:normal !important; }
  .rc-4, .rc-p1, .rc-p2{ grid-column:1 / 3; }
  .rc-p1 .asn-img, .rc-p2 .asn-img, .rc-p1, .rc-p2{ height:180px; }

  .ab-1, .ab-2, .ab-5{ grid-column:1 / 3; }
  .ab-1{ padding:24px 20px 28px; gap:18px; }
  .ab-1 strong{ font-size:30px; }
  .ab-1-note{ font-size:15px; }
  .ab-2{ padding:20px 18px 24px; gap:14px; }
  .ab-2 strong{ font-size:20px; }
  .ab-3, .ab-4{ padding:18px 16px; }
  .ab-num-v{ flex-wrap:wrap; }
  .ab-num-v .asn-en{ font-size:min(44px, 6.8vw); }
  .ab-5{ flex-direction:column; align-items:flex-start; gap:12px; padding:18px 20px; }
}

/* フッターの列（カンプの4列に合わせる）
   WHAT WE DO（サービス10件を2列）／ READ ／ COMPANY ／ CONTACT */
.as-ft-top{ grid-template-columns:5fr 2fr 2fr 3fr; }
.as-ft-do :where(ul){ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 24px; }
.as-ft-contact{ display:flex; flex-direction:column; justify-content:space-between; gap:18px; }
.as-ft-note{ margin:0; font-size:13px; color:var(--gray); }
@media (max-width:1100px){
  .as-ft-top{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.as-ft-cta-g{ display:flex; flex-direction:column; gap:10px; }
.as-ft-cta-g > p{ margin:0; }

/* CTAに添える一言と副導線。「相談する」以外の出口を1つ置く。 */
.asn-cta-note{
  margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  font-size:14px; color:var(--gray);
}
.asn-cta-note a{
  display:inline-flex; align-items:center; min-height:24px;
  color:var(--ink); font-weight:700; text-underline-offset:4px;
}
.asn-cta-wrap{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
@media (max-width:781px){
  .asn-cta-wrap{ align-self:stretch; }
  .asn-cta-note{ font-size:13px; gap:12px; }
}

/* スマホのヘッダーに出す相談ボタン。
   メニューはハンバーガーの中に畳まれるので、その中のCTAは画面から消える。
   カンプはヘッダーの並びにボタンを置いているので、それに合わせる。
   （以前は下端に追従するボタンで補っていたが、カンプに無いので廃止した） */
.as-hd-cta{ display:none; }
@media (max-width:900px){
  .as-hd-cta{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; padding:0 14px; margin-inline-start:auto;
    background:var(--brand); color:#fff; border:2px solid var(--ink);
    font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap;
  }
  .as-hd-cta:hover{ background:var(--ink); color:#fff; }
  .as-burger{ margin-inline-start:8px; }
}

/* ============================================================
   ヘッダーの余白とロゴ（2026-09-20 カンプに合わせる）

   ヘッダーだけ旧レイアウト（最大1280px・中央寄せ・左右64px）のままで、
   ロゴが左から144pxの位置にあった。新デザインの区画は全幅で左右56pxなので、
   ロゴと区画の見出しの左端が88pxずれていた。
   ============================================================ */
.as-hd .as-nav{
  max-width:none; margin-inline:0;
  padding:24px 56px; height:auto;
}
/* ヘッダーの中身にもブロックの自動余白が入り、ロゴ以外の項目が24px下がって
   ヘッダーが24px高くなっていた。 */
.as-nav > *{ margin-block:0; }
/* ロゴはブランド資産の色と大きさのまま使う（ロゴタイプは色の規定の対象外）。
   インクで塗っていたので、カンプと別物に見えていた。 */
.as-logo svg{ height:30px; }
.as-hd .as-logo .cls-1{ fill:#00a0e9; }
.as-hd .as-logo .cls-2{ fill:#fff; }

@media (max-width:900px){
  .as-hd .as-nav{ padding:12px 20px; }
  .as-logo svg{ height:24px; }
}

/* ブロックエディターの自動余白（--wp--style--block-gap）を、コマ割りの部品では殺す。
   間隔はすべて padding で設計してあるので、ここに 24px が足されると
   カンプより広くなる（一覧ボタンの上が 40px → 64px になっていた）。 */
/* :where() は詳細度が0点なので、WPの余白指定と同点になり順序次第で負ける。
   素のクラスで書いて確実に勝たせる。 */
.asn-more, .asn-grid, .asn-panel, .asn-shead, .asn-hhead, .asn-sec,
.asn-factbar, .asn-factnote, .asn-ticker, .asn-contact,
.asn-hero, .asn-phero, .as-main nav { margin-block:0; }

/* ヘッダーの高さをカンプ（PC 100px / SP 74px）に合わせる。
   padding は同じ 24px/12px なので、差は中身（CTAピル）の高さぶん。 */
@media (min-width:901px){
  .as-menu-cta > a{ min-height:52px; }
}
@media (max-width:900px){
  .as-hd-cta{ min-height:50px; }
  .as-burger{ min-height:50px; }
}

/* 事例：一覧（CaseIndex）・詳細（CaseG）。コマは asetia_case_cell()。 */
.asn-cases--index, .asn-cases--third{ grid-template-rows:auto; }
.asn-case--sm{ grid-column:span 3; }
.asn-case--third{ grid-column:span 4; }
.asn-case--sm > .asn-img{ height:200px; }
.asn-case--third > .asn-img{ height:220px; }
.asn-cases--index .asn-case--lead{ grid-row:span 2; }
.asn-num{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.asn-num > span:first-child:not(.asn-en){ font-size:16px; font-weight:900; color:var(--ink); }
.asn-case-res.asn-num .asn-en{ font-size:64px; line-height:.9; }
.asn-case-res.asn-num > span:last-child{ font-size:24px; }
.asn-case:not(.asn-case--lead) .asn-case-res.asn-num .asn-en{ font-size:40px; }

.asn-phero--case .asn-en{ font-size:clamp(84px, 10.4vw, 150px); }
.asn-phero--case h1{ font-size:40px; }
.asn-casebar{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:18px 56px; border-block:2px solid var(--ink); font-size:15px;
}
.asn-casebar > span:not(.asn-tags){ color:var(--gray); }
.asn-casebar .asn-tags{ margin-inline-start:auto; }

.asn-story{ grid-column:span 4; padding:40px; gap:20px; justify-content:flex-start; }
.asn-story-h{ display:flex; align-items:baseline; gap:14px; }
.asn-story-h .asn-en{ font-size:76px; }
.asn-story-h h3{ margin:0; font-size:24px; font-weight:900; }
.asn-story :where(p), .asn-story-note :where(p){ margin:0; font-size:16px; line-height:1.9; }
.asn-story-res{
  grid-column:1 / -1; padding:40px 56px;
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end; gap:40px;
}
.asn-story-res > div:first-child{ display:flex; flex-direction:column; gap:16px; }
.asn-story-big{ font-size:26px; font-weight:900; line-height:1.4; }
.asn-story-big.asn-num > span:first-child{ font-size:26px; }
.asn-story-big .asn-en{ font-size:clamp(96px, 11vw, 160px); line-height:.9; }
.asn-story-big.asn-num > span:last-child{ font-size:44px; }
.asn-story-note{ display:flex; flex-direction:column; gap:12px; }
.asn-story-note :where(p){ font-size:18px; font-weight:700; }

@media (max-width:781px){
  .asn-case--sm, .asn-case--third{ grid-column:auto; }
  .asn-case--sm > .asn-img, .asn-case--third > .asn-img{ height:130px; }
  .asn-cases--third > .asn-case--third:first-child{ grid-column:1 / 3; }
  .asn-cases--third > .asn-case--third:first-child > .asn-img{ height:210px; }
  .asn-cases--index .asn-case--lead{ grid-row:auto; }
  .asn-case-res.asn-num .asn-en{ font-size:44px; }
  .asn-phero--case .asn-en{ font-size:min(64px, calc(17vw - 8px)); }
  .asn-phero--case h1{ font-size:28px; }
  .asn-casebar{ flex-direction:column; align-items:flex-start; gap:10px; padding:16px 20px; font-size:14px; }
  .asn-casebar .asn-tags{ margin-inline-start:0; gap:6px; }
  .asn-story{ grid-column:1 / -1; padding:22px 20px; gap:10px; }
  .asn-story-h{ gap:12px; }
  .asn-story-h .asn-en{ font-size:44px; }
  .asn-story-h h3{ font-size:18px; }
  .asn-story :where(p){ line-height:1.85; }
  .asn-story-res{ display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:22px 20px 26px; }
  .asn-story-big, .asn-story-big.asn-num > span:first-child{ font-size:16px; }
  .asn-story-big.asn-num > span:first-child{ width:100%; }
  .asn-story-big .asn-en{ font-size:88px; }
  .asn-story-big.asn-num > span:last-child{ font-size:26px; }
  .asn-story-note :where(p){ font-size:16px; line-height:1.85; }
}

/* 私たちについて（カンプ About）。左に色の面の大きな一文、右に文章。 */
.asn-duo-a{ grid-column:1 / 7; padding:56px; gap:48px; }
.asn-duo-a--5{ grid-column:1 / 6; }
.asn-duo-a strong{ font-size:clamp(32px, 3.1vw, 44px); line-height:1.45; letter-spacing:-.01em; }
.asn-duo-b{ grid-column:7 / 13; padding:56px; gap:20px; justify-content:center; font-size:16px; line-height:1.9; }
.asn-duo-b--7{ grid-column:6 / 13; }
.asn-duo-b :where(p){ margin:0; }
.asn-rep{ display:flex; flex-direction:column; gap:6px; font-size:15px; font-weight:700; line-height:1.7; }
.asn-rep-n{ font-size:26px; font-weight:900; line-height:1.4; }
.asn-rep-n > span{ font-size:15px; font-weight:700; margin-inline-start:10px; }
.asn-band{ grid-column:1 / -1; flex-direction:row; align-items:center; flex-wrap:wrap; gap:32px; padding:36px 56px 40px; }
.asn-band-n{ display:flex; align-items:baseline; gap:6px; font-size:24px; font-weight:900; }
.asn-band-n .asn-en{ font-size:88px; }
.asn-band-n > span:last-child{ font-size:28px; }
.asn-band-t{ font-size:20px; font-weight:900; line-height:1.6; max-width:32em; }
.asn-clients{ list-style:none; padding:0; }
.asn-clients > li{ grid-column:span 3; min-height:110px; align-items:center; justify-content:center; text-align:center; font-size:16px; font-weight:700; }
.asn-kv{ margin:0; display:grid; grid-template-columns:240px minmax(0,1fr); gap:2px; background:var(--ink); }
.asn-kv dt, .asn-kv dd{ margin:0; background:#fff; padding:24px 40px; font-size:16px; line-height:1.8; }
.asn-kv dt{ font-weight:700; }

@media (max-width:781px){
  .asn-duo-a, .asn-duo-b, .asn-band{ grid-column:1 / -1; padding:24px 20px; gap:20px; }
  .asn-duo-a strong{ font-size:28px; }
  .asn-band{ flex-direction:column; align-items:flex-start; gap:12px; }
  .asn-band-n .asn-en{ font-size:64px; }
  .asn-band-t{ font-size:17px; }
  .asn-clients > li{ grid-column:auto; min-height:80px; font-size:14px; }
  .asn-kv{ grid-template-columns:1fr; }
  .asn-kv dt{ padding:14px 20px 4px; }
  .asn-kv dd{ padding:0 20px 14px; margin-block-start:-2px; }
}

/* お問い合わせ（カンプ Contact。予約カレンダーの区画は作らない：brand/canvas/README.md） */
.asn-freeband{
  display:flex; align-items:baseline; gap:32px; padding:28px 56px 32px;
  background:var(--brand); color:#fff; border-block-end:2px solid var(--ink);
  font-size:18px; font-weight:700;
}
.asn-freeband-n{ display:flex; align-items:baseline; gap:6px; font-size:32px; font-weight:900; }
.asn-freeband-n .asn-en{ font-size:96px; }
.asn-flow{ list-style:none; padding:0; }
.asn-flow > li{
  grid-column:span 4; min-height:160px;
  display:grid; grid-template-columns:88px minmax(0,1fr); align-items:start; gap:12px; padding:24px 28px 20px;
}
.asn-flow .asn-en{ font-size:64px; }
.asn-flow h3{ margin:0 0 4px; font-size:20px; font-weight:900; }
.asn-flow p{ margin:0; font-size:16px; line-height:1.7; }
.asn-welcome{
  margin-block-start:40px; box-shadow:none; background:#fff;
  padding:28px 40px; display:flex; align-items:center; gap:40px;
}
.asn-welcome strong{ font-size:20px; line-height:1.6; flex:none; }
.asn-welcome ul{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px 32px; font-size:16px; line-height:1.7; }
.asn-welcome li{ padding-inline-start:16px; position:relative; }
.asn-welcome li::before{ content:""; position:absolute; left:0; top:.7em; width:7px; height:7px; background:currentColor; }

.asn-form{ background:#fff; }
/* CF7 は各項目を <p> で包む。お名前〜ご相談区分の4つを2列、残りを全幅にする。 */
.asn-form form.as-form{ max-width:none; padding:48px 56px 56px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 40px; }
.asn-form form > *{ grid-column:1 / -1; margin:0; }
.asn-form form > p:nth-of-type(-n/**/+4){ grid-column:auto; }
.asn-form .hidden-fields-container{ display:none; }
.asn-form form > p > label{ display:flex; flex-direction:column; gap:10px; margin:0; font-size:16px; font-weight:700; }
.asn-form form > p > label > br{ display:none; }
.asn-form input[type=text], .asn-form input[type=email], .asn-form select, .asn-form textarea{
  box-sizing:border-box; width:100%; min-height:56px; padding:0 16px;
  border:2px solid var(--ink); border-radius:0; background:#fff;
  font:400 16px/1.6 inherit; color:var(--ink);
}
.asn-form textarea{ padding:14px 16px; min-height:200px; resize:vertical; }
.asn-form input:focus-visible, .asn-form select:focus-visible, .asn-form textarea:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; }
.asn-form .as-form-consent{ margin:0; font-size:16px; line-height:1.8; }
.asn-form input[type=submit]{
  width:auto; min-height:64px; padding:0 64px; border:0;
  border-radius:0; background:var(--brand); color:#fff; font:700 17px/1 inherit; cursor:pointer;
}
.asn-form .wpcf7-spinner{ align-self:center; }

@media (max-width:781px){
  .asn-freeband{ gap:16px; padding:20px; }
  .asn-freeband-n .asn-en{ font-size:64px; }
  .asn-freeband-n{ font-size:24px; }
  .asn-flow > li{ grid-column:1 / -1; min-height:0; grid-template-columns:56px minmax(0,1fr); padding:18px 16px; }
  .asn-flow .asn-en{ font-size:44px; }
  .asn-flow h3{ font-size:18px; }
  .asn-welcome{ margin-block-start:28px; flex-direction:column; align-items:flex-start; gap:16px; padding:20px; }
  .asn-welcome strong{ font-size:18px; flex:initial; }
  .asn-welcome ul{ flex-direction:column; }
  .asn-form form.as-form{ grid-template-columns:1fr; padding:24px 20px 28px; gap:22px; }
  .asn-form input[type=submit]{ width:100%; padding:0 16px; }
}

/* 写真の無いページ（お知らせ・コラム・固定ページ・404）。カンプが無いので、新デザインの部品だけで組む。 */
.asn-thead{
  display:flex; flex-direction:column; gap:20px;
  padding:32px 56px 56px; border-block-end:2px solid var(--ink); overflow-x:clip;
}
.asn-thead .asn-crumb{ margin-block-end:20px; }
.asn-thead .asn-en{ font-size:clamp(72px, 8.4vw, 120px); }
.asn-thead h1{ margin:0; font-size:40px; font-weight:900; line-height:1.35; max-width:24em; }
.asn-thead p{ margin:0; font-size:18px; line-height:1.9; max-width:32em; }
.asn-thead-meta{ font-size:15px !important; font-weight:700; color:var(--gray); }

/* 記事本文：読みやすさ優先で1段・行長は約38字。 */
.asn-article{ padding:72px 56px 40px; }
.asn-article-img{ max-width:960px; margin:0 0 56px; border:2px solid var(--ink); }
.asn-article-img img{ display:block; width:100%; height:auto; }
.asn-prose-body{ max-width:40em; font-size:17px; line-height:2; }
.asn-prose-body > *{ margin-block:0 1.4em; }
.asn-prose-body h2{ margin-block:2.4em .8em; font-size:26px; font-weight:900; line-height:1.5; padding-block-start:16px; border-block-start:2px solid var(--ink); }
.asn-prose-body h3{ margin-block:2em .6em; font-size:20px; font-weight:900; line-height:1.6; }
.asn-prose-body a{ color:var(--brand-tx); }
.asn-prose-body img{ max-width:100%; height:auto; }
.asn-prose-body ul, .asn-prose-body ol{ padding-inline-start:1.4em; }

.asn-pager{ gap:24px; flex-wrap:wrap; }

@media (max-width:781px){
  .asn-thead{ gap:12px; padding:20px 20px 32px; }
  .asn-thead .asn-crumb{ margin-block-end:8px; }
  .asn-thead .asn-en{ font-size:min(64px, calc(19vw - 8px)); }
  .asn-thead h1{ font-size:26px; line-height:1.45; }
  .asn-thead p{ font-size:16px; line-height:1.85; }
  .asn-article{ padding:40px 20px 24px; }
  .asn-article-img{ margin-block-end:32px; }
  .asn-prose-body{ font-size:16px; line-height:1.9; }
  .asn-prose-body h2{ font-size:21px; }
  .asn-prose-body h3{ font-size:18px; }
  
  .asn-pager{ flex-direction:column; gap:14px; }
}

/* 固定ヘッダーの下に本文の上端が潜り込んでいた（パンくず・ヒーローの上74pxが隠れていた）。
   --hd は旧ヘッダーの74pxのままで、新ヘッダーの実寸（PC 100+罫線2 / SP 74+罫線2）と合っていなかった。
   旧デザインのページヘッダ（.as-phead / .as-hero。今は index.html だけ）は自前で --hd を足すので除外。 */
:root{ --hd:102px; }
@media (max-width:900px){ :root{ --hd:76px; } }
.as-main{ padding-block-start:var(--hd); }

/* 一覧のコマの上の余白（カンプ CaseIndex：PC 144px / SP 120px） */
.asn-sec--list{ padding-block-start:144px; }
@media (max-width:781px){ .asn-sec--list{ padding-block-start:120px; } }
/* サービス詳細の事例欄が1件のとき（カンプ ServiceMake）：写真と文を左右に。 */
.asn-cases:has(.asn-case--solo){ grid-template-rows:280px; }
.asn-case--solo{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; }
.asn-case--solo > .asn-img{ border-block-end:0; border-inline-end:2px solid var(--ink); }
.asn-case--solo .asn-case-b{ padding:32px 48px; justify-content:center; }
@media (max-width:781px){
  .asn-cases:has(.asn-case--solo){ grid-template-rows:auto; }
  .asn-case--solo{ display:flex; }
  .asn-case--solo > .asn-img{ height:200px; border-inline-end:0; border-block-end:2px solid var(--ink); }
  .asn-case--solo .asn-case-b{ padding:18px 20px 20px; }
}
.asn-case--solo:not(:has(> .asn-img)){ grid-template-columns:1fr; }

/* サービス詳細の実績カード（詳細ページなし）。同じ格の並びなので白。事例のコマの下に続ける。 */
.asn-works{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.asn-cases + .asn-works{ margin-block-start:40px !important; }
.asn-work{ padding:28px 32px 32px; gap:12px; justify-content:flex-start; }
.asn-work p{ margin:0; font-size:16px; line-height:1.8; font-weight:700; }
.asn-work .asn-case-res.asn-num .asn-en{ font-size:48px; }
@media (max-width:781px){
  .asn-works{ grid-template-columns:1fr; }
  .asn-cases + .asn-works{ margin-block-start:28px !important; }
  .asn-work{ padding:18px 20px 20px; }
  .asn-work .asn-case-res.asn-num .asn-en{ font-size:36px; }
}
/* 実績カードが1〜2枚のサービスは、空いた枠を作らずに幅を分ける。 */
.asn-works:has(> .asn-work:only-child){ grid-template-columns:1fr; }
.asn-works:has(> .asn-work:nth-child(2):last-child){ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:781px){ .asn-works:has(> .asn-work:nth-child(2):last-child){ grid-template-columns:1fr; } }

/* スマホのメニューが高さ48pxでしか開かなかった（2026-09-27）。
   旧デザインのヘッダーのすりガラス（backdrop-filter）が残っていて、これがあると
   position:fixed の子（ドロワーの #as-menu）の基準がヘッダーの枠になり、画面いっぱいに広がらない。
   背景は白一色なので、すりガラスは外しても見た目は変わらない。 */
.as-hd{ -webkit-backdrop-filter:none; backdrop-filter:none; }

/* ログイン中の管理バーの下にヘッダーが潜っていた。WP の管理バーの高さ（PC 32px / 782px以下 46px）だけ下げる。 */
.admin-bar .as-hd{ inset-block-start:32px; }
.admin-bar .as-menu{ inset-block-start:calc(var(--hd) + 32px); }
@media (max-width:782px){
  .admin-bar .as-hd{ inset-block-start:46px; }
  .admin-bar .as-menu{ inset-block-start:calc(var(--hd) + 46px); }
}

/* スマホのブラウザがサイトを自動で暗くする機能（Android Chrome のダークモードなど）で、
   白いコマが黒くつぶれて見えた。このサイトは明るい表示だけを前提にしているので、そう宣言する。 */
:root{ color-scheme:only light; }