/* ---------- ボタン（primary / secondary / tertiary） ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-7);border:1px solid transparent;border-radius:var(--radius-sm);
  font-weight:var(--weight-bold);font-size:var(--text-md);letter-spacing:.08em;line-height:1.8;
  white-space:nowrap;cursor:pointer;
  transition:background var(--motion-base) var(--ease-standard),
             border-color var(--motion-base) var(--ease-standard),
             box-shadow var(--motion-base) var(--ease-standard),
             color var(--motion-base) var(--ease-standard);
}
.btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
/* primary：主 CTA。1領域に1つ。
   background ショートハンドは使わない＝background-size が auto に戻り、グラデが流れなくなる */
.btn--primary{
  background-image:var(--grad-cta);background-size:200% auto;background-position:left center;
  color:var(--color-on-accent);
}
.btn--primary:hover,.btn--primary:active{background-image:var(--grad-cta-hover);background-position:right center}
/* secondary：枠の太さは border でなく inset の box-shadow で足す＝他の skin と高さが揃う */
.btn--secondary{
  background:var(--color-surface);color:var(--color-accent);border-color:var(--color-accent);
  box-shadow:inset 0 0 0 1px var(--color-accent);
}
/* hover は面だけ動かす。混ぜるのは blue-700（accent を薄めると灰色に寄る）。文字・枠 9.46 を保つ */
.btn--secondary:hover,.btn--secondary:active{
  background:color-mix(in srgb,var(--blue-700) 6%,var(--color-surface));
}
/* tertiary：静止で面を持つ＝タッチでボタンだと示す唯一の手掛かり */
.btn--tertiary{background:var(--color-overlay-neutral);color:var(--color-accent)}
.btn--tertiary:hover,.btn--tertiary:active{background:var(--color-overlay-neutral-strong)}
.btn .ic{width:1em;height:1em}
.btn--sm{padding:var(--space-1) var(--space-5);font-size:var(--text-sm)}
.btn--wide{min-width:200px}    /* 固定幅にしない。幅は親レイアウトの責務（button.md §6） */

/* ---------- タグ ----------
   色は役割で分ける。金＝ブランドの分類（業種・シーン・記事種別）、青＝ソリューションの種類。
   枠は文字の色の 30% で作る */
.tag{
  display:inline-flex;align-items:center;
  padding:var(--space-1) var(--space-2);border:1px solid color-mix(in srgb,var(--color-brand-secondary) 30%,transparent);border-radius:var(--radius-sm);
  font-family:var(--font-sans);font-size:var(--text-xs);line-height:1.5;
  color:var(--color-brand-secondary);white-space:nowrap;
}
/* ソリューションの種類。詳細ページでは <a>、カード内では <span>（カード全体が1つのリンク） */
.tag--solution{
  border-color:color-mix(in srgb,var(--color-accent) 30%,transparent);
  color:var(--color-accent);
}
a.tag--solution:hover,a.tag--solution:active{
  border-color:var(--color-accent);
  color:color-mix(in srgb,var(--color-accent) 65%,var(--color-text));
}
/* 画像の上：白の不透明の地で写真から切る。白地 5.05 の AA を保つ */
.tag--on-image{
  padding:var(--space-1) var(--space-3);
  background:var(--color-surface);border:0;font-weight:var(--weight-medium);
}

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--color-surface);color:var(--color-text);
  border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm);
}
.site-header__inner{
  display:flex;align-items:center;gap:var(--space-6);flex-wrap:nowrap;
  padding:var(--space-2) var(--space-7);
}
.site-header__logo img{width:164px;height:40px}
/* 本文へのスキップ。フォーカスを受けたときだけバーの下に現れる */
.skip-link{
  position:absolute;top:100%;left:var(--space-4);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  background:var(--color-surface);color:var(--color-accent);border:1px solid var(--color-accent);
  font-size:var(--text-sm);font-weight:var(--weight-medium);white-space:nowrap;
  transform:translateY(-400%);
  transition:transform var(--motion-fast) var(--ease-standard);
}
.skip-link:focus-visible{transform:translateY(var(--space-1))}
/* 主ナビ。項目をバー全高に伸ばし、現在地の下線をバー下端の罫に重ねる */
.global-nav{
  display:flex;gap:var(--space-1);align-self:stretch;margin-left:auto;
  margin-top:calc(-1 * var(--space-2));margin-bottom:calc(-1 * var(--space-2) - 1px);
}
.global-nav a{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:0 var(--space-3);border-bottom:2px solid transparent;
  font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-subtle);
  transition:background-color var(--motion-fast) var(--ease-standard),
             color var(--motion-fast) var(--ease-standard);
}
.global-nav a:hover{background:var(--color-overlay-neutral)}
.global-nav a[aria-current="page"],
.global-nav a[aria-current="true"]{color:var(--color-text);border-bottom-color:var(--color-accent)}
.site-header__actions{display:flex;align-items:center;gap:var(--space-3)}
/* ハンバーガーとドロワーの閉じるボタン。狭い画面でだけ出す（→ ヘッダーの切り替え） */
.menu-btn{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;
  background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);
  color:var(--color-text);cursor:pointer;
  transition:background-color var(--motion-fast) var(--ease-standard);
}
.menu-btn:hover,.menu-btn:active{background:var(--color-overlay-neutral)}
.menu-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.menu-btn .ic{width:1.5rem;height:1.5rem}

/* ---------- ドロワー（狭い画面のメニュー。挙動 → assets/js/header.js） ----------
   既定は器を畳んだ状態＝ナビと CTA がバーの直接の子として並ぶ。
   パネルとして立ち上げるのは 1080px 以下だけ。visibility は継承するため、畳むときに visible へ戻す */
.drawer-overlay,.drawer{display:contents;visibility:visible}
.drawer__head{display:none}
/* 見出し要素にはしない（h1 より前に h2 が来るのを避ける）。aria-labelledby の参照元 */
.drawer__title{
  font-weight:var(--weight-bold);
  font-size:var(--text-lg);letter-spacing:.06em;color:var(--color-text-heading);
}
body.is-menu-open{overflow:hidden}
/* リサイズ中は遷移を止める＝1080px をまたぐ瞬間に閉じるアニメが再生されない（→ assets/js/header.js） */
body.is-resizing .drawer-overlay,
body.is-resizing .drawer{transition:none}

/* ---------- カード（ソリューション・事例 共通の器） ---------- */
.card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--color-surface-brand);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
  transition:box-shadow var(--motion-fast) var(--ease-standard);
}
/* active も hover と同じ値にする＝タッチでは hover が発火せず、これが唯一の押した反応 */
a.card:hover,a.card:active{box-shadow:var(--shadow-md)}
a.card:focus-visible{border-radius:var(--radius-lg)}
/* 画像は絶対配置＝通常フローだと aspect-ratio も object-fit も効かず、カードごとに高さが変わる */
.card__media{position:relative;aspect-ratio:16/9}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:720px){
  .card__media{aspect-ratio:2/1}
}

/* ---------- カードのグリッド（トップの事例、導入事例一覧で共有） ---------- */
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-9)}
@media (max-width:1080px){
  .card-grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .card-grid-3{grid-template-columns:1fr;gap:var(--space-4)}
}

/* ---------- リンクの印 ----------
   静止状態で出す（hover しない環境で押せることを示す）。置き場所は器の右端で揃える。
   同じページ内は arrow-right、外部サイトは external-link */
.link-icon{color:var(--color-text-subtle)}
.solution-card__body > .link-icon{margin-top:auto;align-self:flex-end}

/* ---------- ソリューションカード ---------- */
.solution-card__body{display:flex;flex-direction:column;flex:1;gap:var(--space-2);padding:var(--space-5) var(--space-6)}
.solution-card__title{
  font-family:var(--font-sans);font-weight:var(--weight-medium);
  font-size:var(--text-md);letter-spacing:-.015em;line-height:1.5;color:var(--color-text-heading);
}
.solution-card__text{font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-text-subtle)}
/* 下段は活用シーンのタグ列（半パッケージ型だけ）。金の .tag＝分類、青の .tag--solution はソリューションの種類に予約 */

/* ---------- 導入事例カード ---------- */
.card__media .tag--on-image{position:absolute;left:var(--space-2);bottom:var(--space-2)}
.case-card__body{display:flex;flex-direction:column;flex:1;padding:var(--space-5) var(--space-6)}
.case-card__title{
  font-family:var(--font-sans);font-weight:var(--weight-medium);
  font-size:var(--text-md);letter-spacing:-.015em;color:var(--color-text-heading);
}
.case-card__text{
  margin-top:var(--space-3);margin-bottom:var(--space-3);
  font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-text-subtle);
}
/* 下段のタグ列（事例・ソリューション共通）。矢印は行内に置かず右下に固定＝矢印だけの行を作らない。
   右 padding は矢印の場所の確保。bottom 6px＝タグ1行（約28px）と矢印（1em）の高さ差の半分 */
.case-card__tags,
.solution-card__tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  margin-top:auto;position:relative;padding-right:calc(1em + var(--space-2));
}
.case-card__tags .link-icon,
.solution-card__tags .link-icon{position:absolute;right:0;bottom:6px}

/* 2種のカードの余白を1段詰める。基本ルールの後ろに置く＝メディアクエリは詳細度を上げない */
@media (max-width:720px){
  .solution-card__body,
  .case-card__body{padding:var(--space-4)}
}

/* ---------- ニュース行 ---------- */
/* 幅は FAQ の一覧と同じ。行の右端に矢印を送るため、器が広いと日付と矢印が離れすぎる */
/* 上下は一覧が閉じ、間は行が区切る＝1件でも罫線が消えない */
.news-list{
  max-width:var(--max-list);display:flex;flex-direction:column;
  border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);
}
.news-row{
  display:flex;align-items:center;gap:var(--space-6);
  padding:var(--space-5) var(--space-4);border-bottom:1px solid var(--color-border);border-radius:var(--radius-sm);
}
.news-row:last-child{border-bottom:0}
.news-row:hover,.news-row:active{background:var(--color-overlay-neutral)}
/* 日付は補足の色で beige 地に 4.59 のため、xs では小さすぎる（sm で読ませる） */
.news-row__date{flex:none;width:100px;font-family:var(--font-en);font-size:var(--text-sm);color:var(--color-text-subtle)}
.news-row__title{font-size:var(--text-md);color:var(--color-text-heading)}
.news-row > .link-icon{margin-left:auto}
@media (max-width:720px){
  /* 左右の余白を落として節見出しと左端をそろえる。狭い幅では字下げより整列を採る */
  .news-row{flex-wrap:wrap;gap:var(--space-3);padding-left:0;padding-right:0}
  /* タイトルを独立した行に落とし、矢印は日付・タグと同じ行の右端へ送る＝矢印だけの行を作らない。
     行全体が1つのリンクのため、視覚順と DOM 順がずれても読み上げ・フォーカスに影響しない */
  .news-row__title{order:1;flex-basis:100%}
  /* 日付の固定幅は縦に揃えるための指定。狭い幅では日付と種別を1つの塊として左に寄せる */
  .news-row__date{width:auto}
}

/* ---------- FAQ（開閉は details/summary、JSなし） ---------- */
/* 一覧は質問が1行で読める幅に留める */
.faq-list{max-width:var(--max-list);margin-top:var(--space-6)}
.faq-item{border-bottom:1px solid var(--color-border);padding:var(--space-6) 0}
.faq-item:last-child{border-bottom:0}
.faq-item__q{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  font-family:var(--font-sans);font-weight:var(--weight-medium);
  font-size:var(--text-md);letter-spacing:-.015em;color:var(--color-text-heading);
}
/* chevron は1つを回す。閉：右向き、開：90° 回って下向き */
.faq-item__chev{
  color:var(--color-text-subtle);
  transition:transform var(--motion-base) var(--ease-accelerate);
}
.faq-item[open] .faq-item__chev{
  transform:rotate(90deg);
  transition:transform var(--motion-slow) var(--ease-decelerate);
}
/* 質問は行、回答は段落。器の幅でなく本文の行長で止める（→ README §トークン） */
.faq-item__a{
  max-width:var(--max-text);margin-top:var(--space-4);
  font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-text-subtle);
}
/* 開閉を高さで補間する。auto への補間は base.css の interpolate-size が許可。
   content-visibility の allow-discrete＝閉じる間も中身を残す。未対応ブラウザは瞬時の開閉に落ちる */
.faq-item::details-content{
  height:0;overflow:hidden;opacity:0;
  transition:height var(--motion-base) var(--ease-accelerate),
             opacity var(--motion-base) var(--ease-accelerate),
             content-visibility var(--motion-base) allow-discrete;
}
.faq-item[open]::details-content{
  height:auto;opacity:1;
  transition:height var(--motion-slow) var(--ease-decelerate),
             opacity var(--motion-slow) var(--ease-decelerate),
             content-visibility var(--motion-slow) allow-discrete;
}

/* ---------- フッターCTA ---------- */
.footer-cta{background:var(--color-surface-brand);padding:var(--space-12) 0}
/* 幅広は文言とボタンを横に並べ、ボタンを文言のすぐ隣に置く。
   収まらない幅ではボタンが文言の下へ回り、左端を見出しと揃える */
.footer-cta__inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-7) var(--space-12)}
.footer-cta__lead{display:flex;flex-direction:column;align-items:flex-start}
.footer-cta__title{
  font-family:var(--font-sans);font-weight:var(--weight-semibold);
  font-size:var(--text-4xl);line-height:var(--leading-4xl);color:var(--color-text-heading);
}
.footer-cta__text{
  margin-top:var(--space-4);
  font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-text-subtle);
}
/* ボタンは縦積み。幅 300px 固定＝ボタン幅がページ間で揺れない */
.footer-cta__actions{display:flex;flex-direction:column;gap:var(--space-4);width:300px}
/* 基本ルールの後ろに置く＝メディアクエリは詳細度を上げないため、前に置くと負ける */
@media (max-width:720px){
  .footer-cta{padding:var(--space-11) 0}
  /* 幅狭は容器の幅まで広げる（ページヒーローの導線と同じ上限） */
  .footer-cta__actions{width:100%;max-width:var(--max-action)}
}

/* ---------- フッター ---------- */
.site-footer{padding:var(--space-6) 0;background:var(--color-surface-inverse);color:var(--color-on-inverse-subtle)}
.site-footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  font-family:var(--font-en);font-size:var(--text-xs);
}
.site-footer__legal{display:flex;gap:var(--space-6)}
.site-footer__legal a{display:inline-flex;align-items:center;gap:var(--space-1)}
.site-footer__legal a:hover{color:var(--color-on-surface-inverse)}
@media (max-width:720px){
  .site-footer__bottom{flex-direction:column;align-items:flex-start}
}

/* ---------- ヘッダーの切り替え ----------
   バーが1行に収まらなくなる幅（実測 約973px）の手前でドロワーへ。
   min-width と対で書かない＝小数幅でどちらにも当たらない隙間を作らない */
@media (max-width:1080px){
  .menu-btn{display:inline-flex}
  .site-header__inner > .menu-btn{margin-left:auto}
  .drawer-overlay{
    display:flex;justify-content:flex-end;
    position:fixed;inset:0;z-index:var(--z-modal);
    background:var(--color-scrim);
    visibility:hidden;opacity:0;
    transition:opacity var(--motion-base) var(--ease-accelerate),
               visibility 0s linear var(--motion-base);
  }
  /* visibility は退場のアニメが終わってから切り替える＝閉じ切るまで見えたまま動く */
  .drawer-overlay.is-open{
    visibility:visible;opacity:1;
    transition:opacity var(--motion-slow) var(--ease-decelerate),visibility 0s;
  }
  .drawer{
    display:flex;flex-direction:column;gap:var(--space-6);
    /* 既定の visible を打ち消し、器の hidden を継ぐ。閉じたパネルを支援技術と Tab の対象から外す */
    visibility:inherit;
    /* 80vw＝狭い画面でも scrim を2割残し、外側を押して閉じる余地を確保する */
    width:min(320px,80vw);height:100%;overflow:auto;
    padding:var(--space-6);
    background:var(--color-surface);border-left:1px solid var(--color-border);
    box-shadow:var(--shadow-lg);
    transform:translateX(100%);
    transition:transform var(--motion-base) var(--ease-accelerate);
  }
  .drawer-overlay.is-open .drawer{
    transform:translateX(0);
    transition:transform var(--motion-slow) var(--ease-decelerate);
  }
  .drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
  /* 縦並びでは現在地を左の罫で示す */
  .drawer .global-nav{flex-direction:column;gap:0;margin:0}
  .drawer .global-nav a{
    padding:var(--space-3);
    border-bottom:0;border-left:2px solid transparent;
  }
  .drawer .global-nav a[aria-current="page"],
  .drawer .global-nav a[aria-current="true"]{border-left-color:var(--color-accent)}
  .drawer .site-header__actions{flex-direction:column;align-items:stretch}
  .drawer .btn--sm{padding:var(--space-2) var(--space-7);font-size:var(--text-md)}
}
/* base.css の reduced-motion は duration だけを潰すため、visibility の遅延はここで 0 にする */
@media (max-width:1080px) and (prefers-reduced-motion:reduce){
  .drawer-overlay{transition-delay:0s}
}