/* ===== custom-index.css — TOPページ専用スタイル（他ページからは読み込まれない） ===== */

/* ===== 1. デザイントークン（design.md 由来。ここに無い値を創作しないこと。rule.md 3-2） ===== */
:root {
  /* --- Text & Icon --- */
  --color-text-primary: #505050;
  --color-text-orange: #ED6C00;
  --color-text-orange-hover: #F6B580;
  --color-text-disabled: #88867F;
  --color-text-on-surface: #FFFFFF;
  --color-text-lixil-gray: #3C3B38;

  /* --- Background --- */
  --color-bg-white: #FFFFFF;
  --color-bg-blue: #0081B7;
  --color-bg-blue-high: #D5F3F7;
  --color-bg-blue-low: #1B7893;
  --color-bg-container-orange: #FCF8F6;
  --color-bg-orange: #ED6C00;
  --color-bg-gray: #F3F2F2;

  /* --- Border --- */
  --color-border-base: #DFDFDF;
  --color-border-strong: #505050;
  --color-border-orange: #ED6C00;
  --color-border-orange-high: #F6B580;

  /* --- Button --- */
  --color-button-yellow: #FAAF3B;
  --color-button-primary: #ED6C00;
  --color-button-primary-hover: #EF7B1A;
  --color-button-card: #FFFFFF;
  --color-button-card-hover: #FDF5ED;

  /* --- Font size --- */
  --font-size-title-h1: 24px;
  --font-size-title-h2: 22px;
  --font-size-title-h3: 18px;
  --font-size-title-h4: 16px;
  --font-size-body-l: 16px;
  --font-size-body-m: 14px;
  --font-size-body-s: 8px;

  /* --- Font weight（既存の --font-weight-bold/normal とは別系統。名前衝突を避けた別名） --- */
  --font-weight-w3: 300;
  --font-weight-w6: 600;

  /* --- Line height（全スタイル共通で fontSize × 1.5） --- */
  --line-height-base: 1.5;

  /* --- Shadow --- */
  --shadow-sm: 0px 1px 3px 0px #0000000D;
  --shadow-base: 0px 4px 12px 0px #00000014;
  --shadow-md: 0px 6px 16px 0px #0000001F;

  /* --- Spacing（Mobile値。PC値は @media (min-width:768px) で同名再定義する） --- */
  --spacing-0: 0px;
  --spacing-sss: 4px;
  --spacing-ss: 8px;
  --spacing-s: 16px;
  --spacing-m: 24px;
  --spacing-l: 40px;
}

/* PC側は同名トークンを再定義して上書きする。--spacing-0 は同値(0)のため再定義しない */
@media (min-width: 768px) {
  :root {
    --spacing-sss: 8px;
    --spacing-ss: 16px;
    --spacing-s: 24px;
    --spacing-m: 40px;
    --spacing-l: 60px;
  }
}

/* ===== 2. margin リセット（rule.md 2-4） ===== */
.custom-top-wrapper h1,
.custom-top-wrapper h2,
.custom-top-wrapper h3,
.custom-top-wrapper p,
.custom-top-wrapper ul,
.custom-top-wrapper ol {
  margin-top: 0;
  margin-bottom: 0;
}

.custom-top-wrapper ul,
.custom-top-wrapper ol {
  padding-left: 0;
  list-style: none;
}

/* ===== 3. セクションの入れ物 ===== */

/* ページ全体 wrapper */
.custom-top-wrapper {
  width: 100%;
}

/* ===== 3-2. ヒーロー（ロゴ ＋ 検索バー） ===== */
.custom-hero-section {
  width: 100%;
  background-color: var(--color-bg-container-orange);
  padding: var(--spacing-s);
  box-sizing: border-box;
}

.custom-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-s);
  padding-top: var(--spacing-ss);
  padding-bottom: var(--spacing-ss);
  width: 100%;
}

/* object-fit: contain は画像の縦横比が枠とわずかに違うため（歪ませずに収める） */
.custom-hero-logo {
  width: 120px;
  height: 30px;
  object-fit: contain;
}

@media (min-width: 768px) {
  .custom-hero-logo {
    width: 170px;
    height: 42px;
  }
}

/* ===== 3-3. 検索バー（HTMLは search ヘルパー生成のため自前で書けない） ===== */
.custom-search-container {
  width: 100%;
  margin-inline: auto;
}

/* Copenhagenは .search と input の二重枠線。.search 側を消して input を見た目の本体にする */
.custom-search-container .search {
  /*! 実DOMは <form>。不可視の子要素3つを無影響化するため flex にしている */
  display: flex;
  align-items: center;
  margin: 0; /* <form> の既定margin打ち消し */
  border: none;
  border-radius: 0;
  position: relative; /* ::before アイコンの位置基準 */
}

.custom-search-container input[type="search"] {
  flex: 1 1 auto;
  min-width: 0; /* flexアイテムの最小幅による溢れ防止（rule.md 6-2） */
  box-sizing: border-box;
  width: 100%;
  /* 高さ40px・角丸30px・アイコン18px はコンポーネント固有の寸法（design.md Search_Bar） */
  height: 40px;
  /*! type="search" のWebKit既定装飾（角丸・内側影・キャンセルボタン）を消す */
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--color-border-strong);
  border-radius: 30px;
  background-color: var(--color-bg-white);
  color: var(--color-text-primary);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-w3);
  line-height: var(--line-height-base);
  /* 左padding = バー左padding + アイコン18px + gap */
  padding-left: calc(var(--spacing-s) + 18px + var(--spacing-ss));
  padding-right: var(--spacing-s);
}

.custom-search-container input[type="search"]::placeholder {
  color: var(--color-text-primary);
  opacity: 1; /* Firefoxの既定透明度を打ち消す */
}

.custom-search-container input[type="search"]:focus-visible {
  /* focusの可視化は rule.md 7-3 のため追加（色のみ変更） */
  border-color: var(--color-border-orange);
  outline: 2px solid var(--color-border-orange);
  outline-offset: 2px;
}

/* アイコンは Copenhagen の ::before グリフを流用（画像アセットを追加しない） */
.custom-search-container .search::before {
  content: "\1F50D";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--spacing-s);
  color: var(--color-text-primary);
  font-size: 18px;
  line-height: 1em;
  background-color: transparent;
}

@media (min-width: 768px) {
  .custom-search-container {
    /* PCの検索バー幅610px。溢れ防止のため width 固定ではなく max-width（rule.md 6-2） */
    max-width: 610px;
  }
  .custom-search-container input[type="search"] {
    font-size: var(--font-size-body-l);                               /* body.l に切り替え */
    padding-left: calc(var(--spacing-s) + 18px + var(--spacing-sss)); /* gapをSSSに切り替え */
  }
}

/* ===== 2. ページ内アンカーナビ（Anchor-Links） ===== */
/*! ★区切り線は項目間のみ（末尾に付けると中央寄せが崩れる） */
/*! ★`white-space: nowrap` は使わない（320px幅で溢れるため折り返しを許容する） */
/*! ★Mobileで奇数のとき余った1件は2列一体化にせず左列へ置く（ユーザー指示） */
/*! ★同名の .custom-in-page-nav が他2ファイルにもある（中身は別物。TOPで読まれないだけ） */
/*! prefers-reduced-motion で囲むのは必須。html に指定すること（スクロールコンテナ） */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.custom-in-page-nav {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(1000px + var(--spacing-s) * 2); /* .custom-section と同じ内容幅 */
  margin-inline: auto;
  padding: var(--spacing-m) var(--spacing-s) calc(var(--spacing-l) - var(--spacing-m));
  /* Mobile: 2列グリッド。列幅は等幅(1fr)ではなくラベル実寸(auto)にして2列ごと中央に置く */
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  row-gap: var(--spacing-s); /* mobile 行間16px */
  /* 列間は行間より1段上のtier(24px)。32px以上にすると320px幅でラベルが折り返す */
  column-gap: var(--spacing-m);
}
@media (min-width: 768px) {
  .custom-in-page-nav {
    /* PC: 1行・中央寄せ */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-ss); /* pc 16px */
  }
}

.custom-anchor-link {
  display: flex;
  align-items: center;
  color: var(--color-text-primary);
  font-size: var(--font-size-body-m); /* mobile 14px = body.m-bold */
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
  text-decoration: none; /* hover時のunderlineは style.css の a:hover が担う */
}
@media (min-width: 768px) {
  .custom-anchor-link {
    font-size: var(--font-size-body-l); /* pc 16px = body.l-bold */
  }
}
.custom-anchor-link:focus-visible {
  outline: 2px solid var(--color-text-orange);
  outline-offset: 2px;
}

/* オレンジ円＋白い下向き矢印（16px）。画像アセットを使わず data URI で描画 */
.custom-anchor-link::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: var(--spacing-ss); /* mobile 8px */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8" fill="%23ED6C00"/><path d="M8 4.2v6.4M5.2 8l2.8 2.8L10.8 8" fill="none" stroke="%23ffffff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media (min-width: 768px) {
  .custom-anchor-link::before {
    margin-right: var(--spacing-sss); /* pc 8px（tier名が違うだけで値は同じ） */
  }
  /* 項目間の区切り線 */
  .custom-anchor-link:not(:last-child)::after {
    content: "";
    flex-shrink: 0;
    width: 1px;
    height: 24px;
    margin-left: var(--spacing-ss); /* pc 16px */
    background-color: var(--color-border-base);
  }
}

/* メインコンテンツ領域 */
.custom-main-container {
  width: 100%;
}

/*! max-width は「内容幅1000px＋左右padding」。単純な 1000px に変えると左右が合わなくなる */
.custom-section {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(1000px + var(--spacing-s) * 2);
  margin-inline: auto;
  padding: var(--spacing-m) var(--spacing-s);
  /* margin ではなく gap を使うのは子要素側の margin リセットと詳細度が競合しないため */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}
@media (min-width: 768px) {
  .custom-section {
    gap: var(--spacing-ss); /* SSトークンに切り替え（PC 16px） */
  }
}

/*! セクションの背景帯（全幅）。背景だけを担う全幅の入れ物を1枚かぶせる必要がある */
.custom-section-band {
  width: 100%;
}
.custom-section-band--gray {
  background-color: var(--color-bg-gray); 
}

/*! TOP最下部⇔フッターの白い隙間を消す打ち消し。★読み込み順を変えると効かなくなる */
.custom-footer {
  margin-top: 0;
}

/* ===== 3-1. セクション見出し（Title コンポーネント） ===== */
.custom-section-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%; /* .custom-section__group（align-items: flex-start）配下でも全幅を保つ */
  gap: var(--spacing-sss);
  font-size: var(--font-size-title-h3);
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  margin: 0;
}

.custom-section-title::after {
  content: "";
  display: block;
  /* 塗りなのでborderではなくbackgroundを使う */
  background-color: var(--color-bg-orange);
  /* 下線の寸法はコンポーネント固有の値（spacingトークンではない） */
  width: 24px;
  height: 4px;
}

@media (min-width: 768px) {
  .custom-section-title {
    font-size: var(--font-size-title-h2); /* title.h2 に切り替え */
  }
}

/* ===== 3-4. 初期設定セクション（ラベルはPC側が正。rule.md 3-2-2） ===== */

/* 説明文。2文を1つの <p> に入れ、中で <br> で改行する（段落間に余白を作らない） */
.custom-section-description {
  font-size: var(--font-size-body-l);
  font-weight: var(--font-weight-w3);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  margin: 0;
  /*! これが無いと max-content幅に縮んでテキストが折り返さなくなる */
  width: 100%;
}

/* 説明文中の強調 */
.custom-text-orange {
  color: var(--color-text-orange);
}

/* 説明文中のインラインリンク。既定でも下線を出す指定が要る（style.css は hover のみ） */
.custom-text-link-inline {
  color: var(--color-text-orange);
  text-decoration: underline;
  transition: color 0.2s;
}
.custom-text-link-inline:hover,
.custom-text-link-inline:focus-visible {
  color: var(--color-text-orange-hover);
  text-decoration: underline;
}
.custom-text-link-inline:focus-visible {
  outline: 2px solid var(--color-border-orange);
  outline-offset: 2px;
}

/* ===== 3-5. Button-startguide（既存 .custom-cta-card-primary を再利用） ===== */
.custom-cta-card-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-ss);
  /* 固定高さではなく min- にする（ラベル折り返しで崩れないため。rule.md 6-4） */
  min-height: 103px;
  /*! 上下paddingは入れないこと。min-height 103px に足されてPCで116pxになる */
  padding-block: 0;
  padding-inline: var(--spacing-s);
  box-sizing: border-box;
  background-color: var(--color-bg-container-orange);
  /* 枠線の役割に合うトークンを使う */
  border: 4px solid var(--color-border-orange);
  box-shadow: var(--shadow-base);
  color: var(--color-text-orange);
  font-size: var(--font-size-title-h3);
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
  text-decoration: none;
  transition: background-color 0.2s;
}

.custom-cta-card-primary:hover,
.custom-cta-card-primary:focus-visible {
  /*! ハードコードは意図的（rule.md 3-3）。新トークン体系に無い値のため直書き */
  background-color: #ED6C0040;
  /* style.css の a:hover の下線を打ち消す（詳細は .custom-card-link:hover のコメント参照） */
  text-decoration: none;
}

.custom-cta-card-primary:focus-visible {
  outline: 2px solid var(--color-border-orange);
  outline-offset: 2px;
}

/* クリック後に下線が残る対処（詳細は .custom-card-link:focus のコメント参照） */
.custom-cta-card-primary:focus,
.custom-cta-card-primary:active {
  text-decoration: none;
}

.custom-icon-large {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  object-fit: contain;
}

@media (min-width: 768px) {
  .custom-cta-card-primary {
    gap: var(--spacing-sss); /* SSSトークンに切り替え */
  }
}

/* ===== 3-6. Card_Link（リンクカード）とそのコンテナ。アイコン・説明文は任意 ===== */
.custom-card-link-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-ss);
}

.custom-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  /* 背景用トークンを使う */
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border-base);
  padding: var(--spacing-s) var(--spacing-ss);
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}

.custom-card-link:hover,
.custom-card-link:focus-visible {
  background-color: var(--color-bg-container-orange);
  border-color: var(--color-border-orange);
  /*! style.css の hover下線を打ち消している（向こうは追加専用スコープで直せない） */
  text-decoration: none;
}

.custom-card-link:focus-visible {
  outline: 2px solid var(--color-border-orange);
  outline-offset: 2px;
}

/*! マウスクリック後に `a:focus` の下線が残るのを防ぐ（下線の打ち消しだけを行う） */
.custom-card-link:focus,
.custom-card-link:active {
  text-decoration: none;
}

/* icon（任意）＋text（title＋description）を横並びにするグループ */
.custom-card-link__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-s); /* mobile: Sトークン(16px)、アイコン⇔テキストのgap */
}

/* title（＋description）を縦積みするグループ（Step 9で新規追加） */
.custom-card-link__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px; /* 固定値。spacing tokenに置き換えないこと */
}

.custom-card-link__title {
  font-size: var(--font-size-title-h4);
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  margin: 0;
}

/* 説明文（任意。Step 9で新規追加） */
.custom-card-link__description {
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-w3);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  margin: 0;
}

/* アイコン（任意。Step 9で新規追加。design.md初版から予告されていた寸法） */
.custom-card-link__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
@media (min-width: 768px) {
  .custom-card-link__icon {
    width: 40px;
    height: 40px;
  }
}

/* 矢印は常に表示（design.md Card_Link）。CSSのborder三角形で描き、画像アセットを追加しない */
.custom-card-link__arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
}

.custom-card-link__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-top: 2px solid var(--color-text-primary);
  border-right: 2px solid var(--color-text-primary);
  transform: translate(-60%, -50%) rotate(45deg);
}

@media (min-width: 768px) {
  .custom-card-link-list {
    flex-direction: row;
  }
  .custom-card-link-list > .custom-card-link {
    flex: 1 1 0;
    min-width: 0; /* 等分時の溢れ防止（rule.md 6-2） */
  }
  .custom-card-link__content {
    gap: var(--spacing-ss); /* SSトークンに切り替え（design.md Card_Link） */
  }
}

/* ===== 3-7. アイコン付きテキストリンク ===== */
/*! ★custom-guide.css の .custom-link-with-icon-primary は使わないこと（rule.md 1-7） */
/*! 現在このブロックは未使用。再採用時の参照用に残している（経緯は design.md） */
.custom-text-link-with-icon {
  position: relative; /* ::after（三角）を円の中に重ねるための基準 */
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-ss);
  color: var(--color-text-primary);
  font-size: var(--font-size-body-l);
  font-weight: var(--font-weight-w3);
  line-height: var(--line-height-base);
  text-decoration: underline;
  transition: color 0.2s;
}

/* オレンジの円（14px）。コンポーネント固有の寸法 */
.custom-text-link-with-icon::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--color-bg-orange);
}

/* 円の中央に重ねる白い右向き三角（CSSのborder三角形。画像アセットを追加しないための実装） */
.custom-text-link-with-icon::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 4px solid var(--color-text-on-surface);
}

.custom-text-link-with-icon:hover,
.custom-text-link-with-icon:focus-visible {
  color: var(--color-text-orange);
}

.custom-text-link-with-icon:focus-visible {
  outline: 2px solid var(--color-border-orange);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .custom-text-link-with-icon {
    gap: var(--spacing-sss); /* SSSトークンに切り替え */
  }
}

/* ===== 3-8. Title_Category_group ＋ Card_Introduction ===== */

/* Title_Category_group：アイコン(任意) + カテゴリ見出し（18px/600 = title.h3） */
.custom-category-title-group {
  display: flex;
  align-items: center;
  gap: 8px; /* 固定値。spacing tokenに置き換えないこと */
}
.custom-category-title-group__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.custom-category-title-group__title {
  font-size: var(--font-size-title-h3);
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  margin: 0;
}

/* Card_Introduction を複数並べるコンテナ（PICKUPの2枚組で使用） */
.custom-card-introduction-list {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 固定値。spacing tokenに置き換えないこと */
  width: 100%;
}
@media (min-width: 768px) {
  .custom-card-introduction-list {
    flex-direction: row;
  }
  .custom-card-introduction-list > .custom-card-introduction {
    flex: 1 1 0;
    min-width: 0; /* 等分時の溢れ防止（rule.md 6-2） */
  }
}

/* Card_Introduction：画像＋タイトル＋説明＋記事リンク一覧（PCのみ表示）＋「他の記事をみる」 */
.custom-card-introduction {
  display: flex;
  align-items: center;
  gap: 24px; /* 固定値（img⇔テキスト）。spacing tokenに置き換えないこと */
  box-sizing: border-box;
  background-color: var(--color-bg-gray);
  padding: var(--spacing-ss); /* Mobileも同名tierに揃えて両対応化 */
}
/* PCのみ左右paddingが 16px → 8px。参照するtier自体がBPで変わるため自前で切り替える */
@media (min-width: 768px) {
  .custom-card-introduction {
    padding: var(--spacing-ss) var(--spacing-sss); /* 上下16px / 左右8px */
  }
}
.custom-card-introduction__img {
  flex-shrink: 0;
  width: 138px;
  height: 103px;
  object-fit: contain;
}
.custom-card-introduction__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sss); /* mobile 4px / pc 8px（title・説明・記事リンク一覧の間） */
  flex: 1 1 0;
  min-width: 0; /* rule.md 6-2 */
}
.custom-card-introduction__title {
  font-size: var(--font-size-title-h4);
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  margin: 0;
}
/* 説明文はBPで参照するテキストスタイルが変わる（Mobile body.m / PC body.l） */
.custom-card-introduction__description {
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-w3);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  margin: 0;
}
@media (min-width: 768px) {
  .custom-card-introduction__description {
    font-size: var(--font-size-body-l); /* body.m → body.l に切り替え */
  }
}

/* 記事リンク一覧はMobileバリアントに無いためPCのみ表示（意図的な情報量の差） */
.custom-card-introduction__links {
  display: none;
  flex-direction: column;
  gap: 9px; /* 固定値。spacing tokenに置き換えないこと */
  width: 100%;
}
@media (min-width: 768px) {
  .custom-card-introduction__links {
    display: flex;
  }
}

/* 「他の記事をみる」リンク（TextLinkコンポーネント）。design.md未定義の新規コンポーネント。 */
.custom-text-link-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* 固定値。spacing tokenに置き換えないこと */
  height: 36px;
  padding-inline: 8px; /* 固定値。spacing tokenに置き換えないこと */
  border-radius: 6px;
  color: var(--color-text-orange);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
  text-decoration: none;
  align-self: flex-start; /* 既定は左寄せ。Card_Introduction 内だけ右寄せに上書きする（下記） */
  transition: color 0.2s;
}
/* PICKUPのカード内だけ Mobile で右寄せ。PCは既定どおり左寄せ */
.custom-card-introduction__content > .custom-text-link-more {
  align-self: flex-end;
}
@media (min-width: 768px) {
  .custom-card-introduction__content > .custom-text-link-more {
    align-self: flex-start;
  }
}
/*! ★ラベルのBP出し分け。どちらか一方だけを表示する状態を必ず保つこと（両方消えると文字が無くなる） */
.custom-text-link-more__label--pc {
  display: none;
}
@media (min-width: 768px) {
  .custom-text-link-more__label--mobile {
    display: none;
  }
  .custom-text-link-more__label--pc {
    display: inline;
  }
}
/* hover時に矢印も文字色に追従させるため ::after の三角は currentColor を参照 */
.custom-text-link-more:hover,
.custom-text-link-more:focus-visible {
  color: var(--color-text-orange-hover);
}
.custom-text-link-more:focus-visible {
  outline: 2px solid var(--color-border-orange);
  outline-offset: 2px;
}
.custom-text-link-more::after {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  /* 既存 .custom-card-link__arrow と同じ意匠。色は currentColor で hover に自動追従 */
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
  transition: border-color 0.2s;
}

/* Card_Link をPCで3列グリッドに折り返すためのコンテナ（カードは既存クラスを流用） */
.custom-card-link-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px; /* 固定値。spacing tokenに置き換えないこと */
  width: 100%;
}
@media (min-width: 768px) {
  .custom-card-link-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 2列版（お客様サポートで使用。PC 2列、Mobileは基底クラスのまま1列） */
@media (min-width: 768px) {
  .custom-card-link-grid--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 1列版（旧LifeAssistの「詳細メニュー」展開部。PCでも縦積みのまま） */
@media (min-width: 768px) {
  .custom-card-link-grid--1col {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*! ★どちらのエリアにも padding-top を付けないこと（閉じた状態でも隙間が残る）。子側の margin-top を使う */
.LAHomeContents-area > .custom-card-link-grid,
.LAHomeDCContents-area > .custom-card-link-grid {
  margin-top: var(--spacing-s); /* Mobile 16px（カード間gapと同値）/ PC 24px */
}

/* ===== 3-6b. .custom-section 内のサブグループ（困ったときは ＋ お客様サポート） ===== */
.custom-section__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-s); /* mobile: 16px（.custom-section本来のgapと同じ） */
  width: 100%;
}
@media (min-width: 768px) {
  .custom-section__group {
    gap: var(--spacing-ss); /* pc: 16px */
  }
}

#support.custom-section {
  gap: var(--spacing-m); /* mobile: 24px */
}
@media (min-width: 768px) {
  #support.custom-section {
    gap: var(--spacing-s); /* pc: 24px */
  }
}

/* 「アプリの使い方」も同じサブグループ構造（グループ間24px／内部16px） */
#usage-guide.custom-section {
  gap: var(--spacing-m); /* mobile: 24px（基底のSトークン16pxを上書き） */
}
@media (min-width: 768px) {
  #usage-guide.custom-section {
    gap: var(--spacing-s); /* pc: 24px（Mobile側のMトークンはPCでは40pxになるため戻す） */
  }
}

/* ===== 3-9. Card_Link_Block ===== */
.custom-card-link-block-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-ss); /* mobile 8px / pc 16px */
  width: 100%;
  /*! カードの高さを全行そろえる 1fr。★min-height の決め打ちにしないこと（320px幅で崩れる） */
  grid-auto-rows: 1fr;
}
@media (min-width: 768px) {
  .custom-card-link-block-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.custom-card-link-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-ss);
  box-sizing: border-box;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border-base);
  padding: var(--spacing-ss);
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}
.custom-card-link-block:hover,
.custom-card-link-block:focus-visible {
  /* hoverは既存Card_Linkと同じパターンを踏襲（rule.md 7-3） */
  background-color: var(--color-bg-container-orange);
  border-color: var(--color-border-orange);
  /* style.css の a:hover の下線を打ち消す（詳細は .custom-card-link:hover のコメント参照） */
  text-decoration: none;
}
/* クリック後に下線が残る対処（詳細は .custom-card-link:focus のコメント参照） */
.custom-card-link-block:focus,
.custom-card-link-block:active {
  text-decoration: none;
}
.custom-card-link-block:focus-visible {
  outline: 2px solid var(--color-border-orange);
  outline-offset: 2px;
}
.custom-card-link-block__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.custom-card-link-block__label {
  width: 100%;
  text-align: center; /* mobile: アイコン下中央揃え */
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  margin: 0;
}
@media (min-width: 768px) {
  .custom-card-link-block__icon {
    width: 60px;
    height: 60px;
  }
  .custom-card-link-block__label {
    text-align: left; /* pc: 左寄せ */
    font-size: var(--font-size-title-h4);
  }
}

/* ===== 3-10. 導入をご検討の方（サブ見出しは下線なしの .custom-subsection-title） ===== */

/* gap構成: ①3ブロック間 = --spacing-m ②小見出し⇔リンク = 両BP 8px */
/*! ★「について知る／使い方の例／もっとみる」は入れ子にせず .custom-section 直下へ並列に置く */
#products.custom-section {
  gap: var(--spacing-m); /* ① mobile 24px / pc 40px */
}

/* ② 小見出し＋テキストリンクだけのグループ */
.custom-section__group--tight {
  gap: var(--spacing-ss); /* mobile 8px */
}
@media (min-width: 768px) {
  .custom-section__group--tight {
    gap: var(--spacing-sss); /* pc 8px */
  }
}
/*! style.css の項目 margin-bottom が最後の項目にも効くため打ち消す（ここは1件のみ） */
.custom-section__group--tight .LACategoryPage__articleListItem:last-child {
  margin-bottom: 0;
}

/*! SSトークンは Mobile 8px / PC 16px。PC用の上書きを足さないこと（二重管理になる） */
.custom-section__group--tight-mobile {
  gap: var(--spacing-ss);
}

.custom-subsection-title {
  font-size: var(--font-size-title-h4);
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  margin: 0;
}
@media (min-width: 768px) {
  .custom-subsection-title {
    font-size: var(--font-size-title-h3);
  }
}

/* 「使い方の例を見る」列と「動画で見る」列（PCは横並び、Mobileは縦積み） */
.custom-products-examples {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  width: 100%;
}
@media (min-width: 768px) {
  .custom-products-examples {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* Card_Img を複数並べるコンテナ */
.custom-card-img-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 固定値。spacing tokenに置き換えないこと */
}

/*! `<a>` なので text-decoration: none を基底と hover/focus の両方に書く必要がある */
.custom-card-img {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 画像⇔キャプション。Mobileのみ8px。固定値。spacing tokenに置き換えないこと */
  flex-shrink: 0;
  text-decoration: none;
}
.custom-card-img__thumb {
  display: block;
  width: 136px;
  height: 102px;
  object-fit: cover;
  background-color: var(--color-bg-gray); /* 画像読み込み前の背景 */
}
@media (min-width: 768px) {
  .custom-card-img {
    gap: 16px; /* PCは16pxのまま。固定値。spacing tokenに置き換えないこと */
  }
  .custom-card-img__thumb {
    width: 192px;
    height: 144px;
  }
}
.custom-card-img__caption {
  display: flex;
  align-items: center;
  gap: 8px; /* 固定値。spacing tokenに置き換えないこと */
  font-size: var(--font-size-body-l);
  font-weight: var(--font-weight-w3);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
}

/*! Card_Img の hover は白50%を重ねる。★opacity や filter で代替しないこと（下地のグレーが透ける） */
/*! ★<img> には子要素を重ねられないため ::after の絶対配置。サイズは __thumb と同値にすること */
.custom-card-img {
  position: relative; /* ::after オーバーレイの基準 */
}
.custom-card-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 136px;  /* .custom-card-img__thumb と同値（Mobile） */
  height: 102px;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none; /* 重ねたレイヤーがクリック・hoverを奪わないように */
}
.custom-card-img:hover::after,
.custom-card-img:focus-visible::after {
  opacity: 1;
}
.custom-card-img:hover,
.custom-card-img:focus-visible {
  /* style.css の a:hover の下線を打ち消す（上のコメント参照） */
  text-decoration: none;
}
/* クリック後に白オーバーレイを残さないため :focus には広げない */
.custom-card-img:focus,
.custom-card-img:active {
  text-decoration: none;
}
.custom-card-img:hover .custom-card-img__caption,
.custom-card-img:focus-visible .custom-card-img__caption {
  /* TODO(トークン差し替え): hover専用トークンが未定義のため暫定で Disabled を流用中 */
  color: var(--color-text-disabled); /* 暫定 */
}
/* キーボード操作時のフォーカス表示（rule.md 7-3） */
.custom-card-img:focus-visible {
  outline: 2px solid var(--color-border-orange);
  outline-offset: 2px;
}
@media (min-width: 768px) {
  .custom-card-img::after {
    width: 192px; /* .custom-card-img__thumb と同値（PC） */
    height: 144px;
  }
}

/* 「接続できる機器を調べる」のCard_Link。Mobileは横幅いっぱい、PCは幅を固定する */
.custom-card-link--compact {
  /*! 親 .custom-section__group が align-items: flex-start なので、これが無いと内容幅に縮む */
  width: 100%;
}
@media (min-width: 768px) {
  .custom-card-link--compact {
    width: 315px;
    flex: none;
  }
}

/* アプリダウンロード。Mobile: バッジのみ横並び（QRは出さない）／PC: QR＋バッジを白カードに */
.custom-app-download-grid {
  display: flex;
  flex-wrap: wrap; /* 320px幅でも2つ並ぶ（合計259px）が、念のための保険 */
  align-items: center;
  gap: var(--spacing-s); /* mobile 16px */
  width: 100%;
}
.custom-app-download-item {
  display: flex;
  align-items: center;
}
.custom-app-download-item__qr {
  display: none; /* Mobileでは出さない（下のPC側で表示に戻す） */
}
/* バッジの実寸: App Store 108.85x40 ／ Google Play 478x142(高さ40pxで幅134.6) */
.custom-app-download-item__badge {
  height: 40px;
  width: auto;
  object-fit: contain;
}
@media (min-width: 768px) {
  .custom-app-download-grid {
    display: grid;
    /*! 238px = 内容幅1000pxを4列に割った1列ぶん。1fr にすると〜988pxでバッジがはみ出す */
    grid-template-columns: repeat(2, 238px);
    gap: 16px; /* 両ブレークポイント共通の固定値 */
  }
  .custom-app-download-item {
    gap: var(--spacing-ss);
    box-sizing: border-box;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-base);
    padding: var(--spacing-ss);
  }
  .custom-app-download-item__qr {
    display: block;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    object-fit: contain;
  }
  .custom-app-download-item__badge {
    height: 32px;
  }
  /* App Storeバッジだけ余白の取り方が違い、32pxだとGoogle Playより小さく見えるため40px */
  .custom-app-download-item__badge--appstore {
    height: 40px;
  }
}

/* ===== 3-11. アコーディオン型セクション（Daiwa Connect ／ 旧LifeAssist）共通 ===== */
/*! ★新デザインは外側のカード＋トグルのみ。展開後の中身は現行のまま（rule.md 1-3） */
/*! border ではなく background-clip: content-box を使うのは線を内容幅に合わせるため */
.custom-section-divider {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(1000px + var(--spacing-s) * 2);
  margin: 0 auto;
  padding-inline: var(--spacing-s);
  border: none;
  height: 1px;
  background-color: var(--color-border-base);
  background-clip: content-box;
}

.custom-accordion-card {
  display: flex;
  flex-direction: column;
  gap: 24px; /* 固定値。spacing tokenに置き換えないこと */
  box-sizing: border-box;
  width: 100%;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border-base);
  border-radius: 4px;
  /* 両ブレークポイントとも16px */
  padding: 16px;
}

/* Daiwa Connectロゴ＋説明文のまとめ。カードの gap 24px を挟まないための入れ物 */
.custom-daiwa-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 両ブレークポイントとも8px。var(--spacing-sss) はMobileが4pxになるため使わない */
  gap: 8px;
  width: 100%;
}

/* 両ブレークポイントとも幅176px。height は固定しない＝アセットの比率をそのまま使う */
.custom-daiwa-logo {
  display: block;
  width: 176px;
  height: auto;
}

.custom-daiwa-guidance-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s); /* mobile 16px / pc 24px */
  width: 100%;
}

.custom-daiwa-guidance {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 両ブレークポイントとも8px */
  gap: 8px;
  width: 100%;
}

.custom-daiwa-guidance__title {
  font-size: var(--font-size-body-l);
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  margin: 0;
}

.custom-daiwa-guidance__text {
  font-size: var(--font-size-body-l);
  font-weight: var(--font-weight-w3);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  margin: 0;
}

.custom-accordion-note {
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-w3);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  margin: 0;
}

/* 「詳細メニュー」トグル。帯そのものを <button> にしてクリック領域を帯全体にしている */
.custom-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px; /* 固定値。spacing tokenに置き換えないこと */
  width: 100%; /* 帯そのものがボタン（上記コメント参照） */
  height: 36px; /* 両ブレークポイント共通 */
  box-sizing: border-box;
  padding: 0; /* <button> の既定paddingを除去 */
  background-color: var(--color-bg-gray);
  border: none;
  border-radius: 0;
  color: var(--color-text-orange);
  font-family: inherit; /* <button> はfont-familyを継承しないため明示（既定のUIフォント化を防ぐ） */
  font-size: var(--font-size-body-m); /* mobile: body.m */
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
  cursor: pointer;
  transition: background-color 0.2s;
}
@media (min-width: 768px) {
  .custom-accordion-toggle {
    font-size: var(--font-size-body-l); /* pc: body.l */
  }
}
.custom-accordion-toggle:hover,
.custom-accordion-toggle:focus-visible {
  /* hoverは既存パターンを踏襲（rule.md 7-3） */
  background-color: var(--color-button-card-hover);
}
.custom-accordion-toggle:focus-visible {
  outline: 2px solid var(--color-border-orange);
  outline-offset: 2px;
}
.custom-accordion-toggle__icon {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform 0.2s;
}
/* アイコンだけMobileで縮小。サブアコーディオン5件はボタン直下でないので24pxのまま */
.custom-accordion-toggle > .custom-accordion-toggle__icon {
  width: 20px;
  height: 20px;
}
@media (min-width: 768px) {
  .custom-accordion-toggle > .custom-accordion-toggle__icon {
    width: 24px;
    height: 24px;
  }
}
/*! `.is-active` は script.js が children[1] に直接付ける。子要素の順序を変えると壊れる */
.custom-accordion-toggle__icon.is-active {
  transform: rotate(45deg);
}
.custom-accordion-toggle__icon::before,
.custom-accordion-toggle__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-text-orange);
  transform: translate(-50%, -50%);
}
.custom-accordion-toggle__icon::before {
  width: 14px;
  height: 2px;
}
.custom-accordion-toggle__icon::after {
  width: 2px;
  height: 14px;
}

/*! ★消すと開閉が壊れる。script.js が nextElementSibling を展開対象にするため兄弟を束ねている */
.custom-accordion-toggle-group {
  width: 100%;
}

/*! ★.custom-accordion-toggle-group のスコープは詳細度を上げるためのもの。外すと効かなくなる */
.custom-accordion-toggle-group .accordion__subtitle {
  font-size: var(--font-size-title-h3); /* 25px → 18px */
  font-weight: var(--font-weight-w6);   /* 550 → 600（Title/H3 の指定） */
  line-height: var(--line-height-base); /* 1.5（Title/H3 の指定） */
}

/* ===== 4. お知らせ枠（機能として利用中なので廃止しないこと。rule.md 1-3） ===== */
/*! .custom-hero-content の子なので margin を足すと gap と二重になる。上下余白は gap に任せる */
.custom-hero-notice {
  width: 100%;
  max-width: 800px;
  box-sizing: border-box;
}