/*
  custom.css
  ------------------------------------------------------------
  ルール：ページ固有 / デザイン寄せ / 微調整はここ
  - base.css：共通パーツ（header/menu/footer）と挙動に関わる最低限
  - custom.css：各ページの見た目（TOPなど）

  NOTE:
  - パスは必ず /assets/... のルート相対
  - 追加の色は基本 CSS変数（--c-primary など）を優先
*/

/* ======================================================
  COMMON (ALL PAGES)
  ------------------------------------------------------
  ここから下は「全ページ共通」で使うスタイル
  - 例：ボタン / 共通UI / アクセシビリティ補助 など
  - TOP以外のページでも使ってOK
====================================================== */

/* ======================================================
  Accessibility (COMMON)
====================================================== */

/* スキップリンク：フォーカス時のみ表示 */
.skipLink {
  position: absolute;
  left: -9999px;
  top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #111;
  color: #fff;
  text-decoration: none;
  z-index: 3000;
}

.skipLink:focus {
  left: 12px;
}

/* ======================================================
  Buttons (COMMON)
====================================================== */

.btnPrimary,
.btnOutline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 44px;
  /* iOS推奨タップ領域 */
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.btnPrimary {
  background: var(--c-primary);
  color: #fff;
  border: 1px solid var(--c-primary);
}

.btnOutline {
  background: #fff;
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
}

.btnPrimary:focus-visible,
.btnOutline:focus-visible {
  outline: 3px solid rgba(47, 111, 191, 0.25);
  outline-offset: 2px;
}

/* hover（タッチ端末で暴れないよう hover: hover で限定） */
@media (hover: hover) {
  .btnPrimary:hover {
    filter: brightness(0.95);
  }

  .btnOutline:hover {
    background: var(--c-primary-weak);
  }
}

/* ======================================================
  TOP PAGE ONLY
  ------------------------------------------------------
  ここから下は「TOPページ専用」のスタイル
  - index.html の .pageHome / .homeFv* / .homeSection* など
  - 他ページで使わない（使う場合は共通側へ移動）
====================================================== */

.pageHome {
  /* まずはスマホ基準 */
  padding-bottom: 24px;
}

/* --- FV --- */
/* .homeFv {
  padding: 16px 0 10px;
} */

.homeFv__inner {
  max-width: 1160px;
  margin: 0 auto;
  /* padding: 0 16px;
  display: grid;
  gap: 14px; */
}

.homeFv__media {
  width: 100%;

  img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 526 / 269;
  }
}

.homeFv__copy {
  background: #fff;
}

.homeFv__title {
  margin: 0 0 4px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.homeFv__lead {
  margin: 0;
  color: var(--c-muted);
}

.homeFv__actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.homeFv__media {
  margin: 0;
  /* border-radius: 16px;
  overflow: hidden;
  background: #eee; */
}

/* .homeFv__media img {
  display: block;
  width: 100%;
  height: auto;
} */

/* --- Sections --- */
.homeSection {
  max-width: 1160px;
  margin: 18px auto 0;
  padding: 0 16px;
}

.homeSection__title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
}

.homeSection__title--alert {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c1304f;
}

.homeSection__icon {
  color: #c1304f;
  flex-shrink: 0;
}

.homeSection__text {
  margin: 0;
  color: var(--c-muted);
}

/* News list（仮） */
.homeNews {
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  gap: 10px;
}

.homeNews__item a {
  display: block;
  padding: 12px 12px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
}

@media (hover: hover) {
  .homeNews__item a:hover {
    background: var(--c-primary-weak);
    border-color: rgba(0, 0, 0, 0.06);
  }
}

/* ======================================================
  TOP: FV placeholder（画像未配置時）
====================================================== */
.homeFv__placeholder {
  display: block;
  width: 100%;
  height: auto;
}

/* ======================================================
  TOP: キャンペーン（バナー）
====================================================== */
.homeBannerSlider__list {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}

.homeBannerSlider__item {
  flex: 0 0 78%;
  scroll-snap-align: start;

  img {
    width: 100%;
    height: auto;
  }

  a {
    display: grid;
    place-items: center;
    min-height: 140px;
    /* padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e6e6e6;
  text-decoration: none;
  font-weight: 800; */
  }
}


@media (hover: hover) {
  .homeBannerSlider__item a:hover {
    background: var(--c-primary-weak);
  }
}

/* ======================================================
  TOP: 重要なお知らせ
====================================================== */
.homeAlerts__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.homeAlerts__item a {
  display: block;
  padding: 12px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e6e6e6;
  text-decoration: none;

  /* 注意喚起っぽさ */
  border-left: 6px solid var(--c-primary);
}

@media (hover: hover) {
  .homeAlerts__item a:hover {
    background: var(--c-primary-weak);
  }
}

/* ======================================================
  TOP: 主要導線
====================================================== */
.homePrimaryLinks__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.homePrimaryLinks__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 16px 14px;
  border-radius: 16px;
  border: 1px solid #e6e6e6;
  background: #fff;
  text-decoration: none;
  font-weight: 900;
}

.homePrimaryLinks__card::after {
  content: "›";
  color: var(--c-muted);
  font-size: 20px;
  line-height: 1;
}

@media (hover: hover) {
  .homePrimaryLinks__card:hover {
    background: var(--c-primary-weak);
  }
}

/* ======================================================
  TOP: 信用組合とは（ポイント）
====================================================== */
.homeAbout__points {
  margin: 12px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.homeAbout__point {
  padding: 10px 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e6e6e6;
}

.homeAbout__cta {
  margin-top: 12px;
}

/* ======================================================
  TOP: ご相談（カテゴリ導線）
====================================================== */
.homeConsult__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.homeConsult__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid #e6e6e6;
  background: #fff;
  text-decoration: none;
  font-weight: 800;
}

.homeConsult__item::after {
  content: "›";
  color: var(--c-muted);
  font-size: 18px;
  line-height: 1;
}

@media (hover: hover) {
  .homeConsult__item:hover {
    background: var(--c-primary-weak);
  }
}

/* ======================================================
  TOP: ライフプラン（タイル）
====================================================== */
.homeLifePlan__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.homeLifePlan__tile {
  display: grid;
  place-items: center;
  min-height: 78px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid #e6e6e6;
  background: #fff;
  text-decoration: none;
  font-weight: 900;
}

@media (hover: hover) {
  .homeLifePlan__tile:hover {
    background: var(--c-primary-weak);
  }
}

/* ======================================================
  TOP: お知らせ（CTA）
====================================================== */
.homeNewsWrap__cta {
  margin-top: 12px;
}

/* ======================================================
  TOP: 店舗・ATM
====================================================== */
.homeShopAtm__actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ======================================================
  TOP: 採用
====================================================== */
.homeRecruit__cta {
  margin-top: 12px;
}

/* ======================================================
  TOP: 取り組み（バナー）
====================================================== */
.homeInitiatives__banners {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.homeInitiatives__banner a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid #e6e6e6;
  background: #fff;
  text-decoration: none;
  font-weight: 800;
}

.homeInitiatives__banner a::after {
  content: "›";
  color: var(--c-muted);
  font-size: 20px;
  line-height: 1;
}

@media (hover: hover) {
  .homeInitiatives__banner a:hover {
    background: var(--c-primary-weak);
  }
}

/* ======================================================
  Responsive (tablet+)
====================================================== */

@media (min-width: 768px) {
  .homeFv {
    padding: 22px 0 18px;
  }

  /* .homeFv__inner {
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    gap: 22px;
  } */
  .homeFv__media {
    img {
      aspect-ratio: 1161 / 653;
    }
  }

  .homeFv__title {
    font-size: 34px;
  }

  .homeSection__title {
    font-size: 20px;
  }

  .homeSection__title--alert {
    font-weight: bold;
  }

  /* TOP: layouts on tablet+ */
  .homePrimaryLinks__grid {
    grid-template-columns: 1fr 1fr;
  }

  .homeConsult__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .homeLifePlan__tiles {
    grid-template-columns: repeat(3, 1fr);
  }

  .homeBannerSlider__list {
    overflow: visible;
  }

  .homeBannerSlider__item {
    flex-basis: 1;
    flex: 1 1 0;
  }
}

@media (min-width: 1024px) {
  /* .homeFv__inner {
    gap: 28px;
  } */

  .homeConsult__grid,
  .homeLifePlan__tiles {
    grid-template-columns: repeat(6, 1fr);
  }

  .homeBannerSlider__item a {
    min-height: 130px;
  }
}

/* ======================================================
  END: TOP PAGE ONLY
====================================================== */


/* ======================================================
  top_message PAGE ONLY
====================================================== */

@media (max-width: 967px) {
  .top_message__figure{
    width: 35vw;
    float: right;
    padding-left: 1em;
  }
}

/* ======================================================
  END: top_message PAGE ONLY
====================================================== */


/* ======================================================
  ビジネスバンキング リンクバナー
  - /business/ などで使用。左法人メニューの .spMenuTopLink--banking と
    同じゴールド配色（#8F6F49）を踏襲したエリア幅いっぱいのボタン。
  - 角丸・border太さ・→丸アイコンは .btn.btn--normal に合わせる
    （border-radius:9999px / border:2px / .btn__icon を流用）。色はゴールド。
====================================================== */
.bankingBanner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  padding: 12px 56px;
  border: 2px solid #8F6F49;   /* btn--normal と同じ 2px（色はゴールド維持） */
  border-radius: 9999px;       /* btn と同じ角丸（ピル） */
  background: #8F6F49;          /* 通常＝塗りゴールド地 */
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  /* 通常時の右丸アイコン(.btn__icon)：丸=白 / 矢印=ゴールド */
  --btn-icon-bg: #fff;
  --btn-icon-fg: #8F6F49;
}

/* → 丸アイコンは btn.btn--normal と同じ .btn__icon を流用（塗り丸＋白矢印・リング枠なし）。
   バナーのレイアウト（ラベル中央・アイコン右）は従来どおりのため右端に絶対配置する。 */
.bankingBanner .btn__icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
}

@media (hover: hover) {
  .bankingBanner:hover {
    background: #fff;            /* hover＝白地 */
    color: #8F6F49;
    /* hover時の右丸アイコン：丸=ゴールド / 矢印=白 に反転 */
    --btn-icon-bg: #8F6F49;
    --btn-icon-fg: #fff;
  }
}

/* ======================================================
  /business/service/ PAGE ONLY
  - キャンペーン告知カードの見出しを本番同様に強調
====================================================== */
.card__title--campaign {
  color: red;
  font-weight: bold;
}

/* ======================================================
  END: /business/service/ PAGE ONLY
====================================================== */


/* ======================================================
  .btnRow--related（共通ユーティリティ）
  - 関連リンクが .btnRow を2つ以上に分けて実装されているページ用。
    PCでは行間として40pxの余白（mb-40相当）を意図的に取っている。
  - SPでは各 .btnRow 内のボタン間隔が gap:24px のため、
    mb-40のままだと .btnRow 同士の間だけ40pxとなり間隔が不揃いに見える。
  - SPのみ .btnRow の gap(24px) に揃え、PCの見た目は変えない。
  - 使用ページ: /business/service/banking/moushikomi/,
    /business/service/banking/sousa/, /business/service/densai/moushikomi/,
    /business/service/banking/, /personal/deposit/nenkin_first/,
    /camp/2026/teiki-01/
  - 使用ページ: /business/service/banking/moushikomi/,
    /business/service/banking/sousa/, /business/service/densai/moushikomi/,
    /business/service/banking/, /personal/deposit/nenkin_first/
====================================================== */
.btnRow--related {
  margin-bottom: 40px;
}

@media (max-width: 967px) {
  .btnRow--related {
    margin-bottom: 24px;
  }
}

/* ======================================================
  END: .btnRow--related
====================================================== */


/* ======================================================
  .blogBody 内の外部リンクアイコン（共通ユーティリティ）
  - base.css の「.typography a[target="_blank"]」用アイコン(::after)と
    同じSVGを流用し、.typography で包まれていないブログ形式のページ
    （.blogBody）でも同じ見た目の外部リンクアイコンを表示する。
  - 対象: /about/koutuanzenkifu/2021.html〜2025.html の
    「※〇〇公式ホームページはこちら」等（class="textLink" + target="_blank"）
====================================================== */
.blogBody a.textLink[target="_blank"]:not(:has(.btn__iconExternal)):not(:has(img))::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: -2px;
  background-color: currentColor;
  opacity: .95;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M15.4%200H10.9a.6.6%200%201%200%200%201.2H14L7.7%207.5a.6.6%200%200%200%20.8.8L14.8%202v3.1a.6.6%200%200%200%201.2%200V.6A.6.6%200%200%200%2015.4%200z%27/%3E%3Cpath%20d%3D%27M11.6%2016H2a2%202%200%200%201-2-2V4.4a2%202%200%200%201%202-2h5.6a.4.4%200%201%201%200%20.8H2A1.2%201.2%200%200%200%20.8%204.4V14A1.2%201.2%200%200%200%202%2015.2h9.6A1.2%201.2%200%200%200%2012.8%2014V8.4a.4.4%200%201%201%20.8%200V14a2%202%200%200%201-2%202z%27/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M15.4%200H10.9a.6.6%200%201%200%200%201.2H14L7.7%207.5a.6.6%200%200%200%20.8.8L14.8%202v3.1a.6.6%200%200%200%201.2%200V.6A.6.6%200%200%200%2015.4%200z%27/%3E%3Cpath%20d%3D%27M11.6%2016H2a2%202%200%200%201-2-2V4.4a2%202%200%200%201%202-2h5.6a.4.4%200%201%201%200%20.8H2A1.2%201.2%200%200%200%20.8%204.4V14A1.2%201.2%200%200%200%202%2015.2h9.6A1.2%201.2%200%200%200%2012.8%2014V8.4a.4.4%200%201%201%20.8%200V14a2%202%200%200%201-2%202z%27/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ======================================================
  END: .blogBody 内の外部リンクアイコン
====================================================== */


/* ======================================================
  .btn--longLabel（共通ユーティリティ）
  - .btn は height:60px 固定・white-space:nowrap の1行ボタンが前提。
    ラベルが長い場合、文字サイズを縮めると読みにくくなるため、SPのみ
    HTML側に入れた <br class="u-hide-pc"> で意図した位置で改行し、
    3行になった分だけボタンの高さを可変にする。
  - PCは <br class="u-hide-pc"> がdisplay:noneになり従来通り1行のまま
    （このセレクタもSP用メディアクエリの中でのみ効くため無変更）。
  - 使用ページ: /about/koutuanzenkifu/2021.html〜2025.html
    （「交通安全への願いを込めた マイカーローンの取扱い ～贈呈先一覧～」ボタン）
====================================================== */
@media (max-width: 967px) {
  .btn--longLabel {
    height: auto;
    min-height: 60px;
    padding: 12px 20px;
  }

  .btn--longLabel .btn__text {
    min-width: 0;
    line-height: 1.4;
  }
}

/* ======================================================
  END: .btn--longLabel
====================================================== */


/* ======================================================
  .c-itemsNotes（共通ユーティリティ）
  - リスト内のメモをインデント表示するクラス
  - ※を箇条点として表示
  - 使用例：<li>主項目<ul class="c-itemsNotes"><li>メモ</li></ul></li>
====================================================== */
.c-itemsNotes {
  list-style: none;
  padding: 0 0 0 20px;
  margin: 8px 0 0 0;
}

/*
.c-itemsNotes li {
  margin: 4px 0 0 20px;
  font-size: 0.95em;
  color: var(--c-muted);
}
  */

.c-itemsNotes > li::before {
  content: "※";
  display: inline-block;
  margin-right: 0.3em;
  margin-left: -1.3em;
}

.c-itemsNotes > li.card__text--highlight {
  margin: 0;
}

/* ======================================================
  END: .c-itemsNotes
====================================================== */


/* ======================================================
  .c-spTel（共通ユーティリティ）
  - base.css へ移動済み（全ページ共通のため、custom.css非読み込みの
    TOPページにも届く場所に一本化）。ここでは何もしない。
====================================================== */

/* ======================================================
  .c-btnHoverFix（個別対応クラス）
  - .typography 内に置かれた .btn--subPrimary は、
    base.css の「.typography a:is(:hover, :active) { color: var(--c-primary); }」
    の方が詳細度が高いため、ホバー時の文字色がグラデーションボタン本来の色
    ではなく var(--c-primary)（business配下では青）になってしまう。
  - 影響範囲を該当ボタンだけに限定するため、このクラスを付与したうえで
    詳細度を上げて本来の色を維持する。
====================================================== */
.typography a.btn--subPrimary.c-btnHoverFix:is(:hover, :active) {
  color: #39A7AA;
}

/* ======================================================
  END: .c-btnHoverFix
====================================================== */

/* ======================================================
  .tableWrap--fluid（personal/rate, personal/loan_rate 専用）
  - base.css の「table { min-width: 600px; }」は列数の多い表を
    SPで横スクロールさせるための既定値だが、この2ページは横スクロール
    させたくないため、テーブルを親要素幅（画面幅 - padding）に収める。
  - PCは対象外（従来通り base.css の挙動のまま）。
====================================================== */
@media (max-width: 967px) {
  .tableWrap--fluid table {
    min-width: 0;
  }
}

/* ======================================================
  END: .tableWrap--fluid
====================================================== */

/* ======================================================
-北央信用組合新規
  .news-item
  - お知らせの最新記事を強調表示させる
  TOP、お知らせの他、外部サイトのメンテナンスや金利変更の情報を載せる可能性がある個別ページで使用
====================================================== */
.news-item.is-new {
  background: #fffaf0;
  border-left: 4px solid #e58a00;
  border-radius: 6px;
}
.new-badge {
  display: inline-block;
  padding: 2px 5px 8px;
  background: #e58a00;
}
.news-item.is-new .news-title {
  font-weight: 700;
}

/* ======================================================
  END: news-item
====================================================== */

/* ======================================================
-北央信用組合新規
  .rate-table
  - 金利のテーブル表示、SPで縦型テーブルに変更
  - td data-title="" にtheadの項目を設定する
====================================================== */
.rate-table{
  min-width: 150px;
}
.rate-table th,
.rate-table td{
  width: auto;
}
@media screen and (max-width: 1199px){
  .rate-table,
  .rate-table tbody,
  .rate-table tr,
  .rate-table th,
  .rate-table td{
    display: block;
  }
  .rate-table thead{
    display: none;
  }
  .rate-table th{
    font-weight: bold;
    background: var(--c-table-bg);
  }
  .rate-table td::before{
    content: attr(data-title);
    margin-right: 1em;
  }
}
/* ======================================================
  END: rate-table
====================================================== */

/* ======================================================
-北央信用組合新規
  .tool-tip
  - 注釈表記、クリックで注意事項表示
  - detailsで使用を想定
====================================================== */
.tool-tip{
  display: inline-flex;
}
.tool-tip summary{
  cursor: pointer;
  list-style: none;
  color: #c1304f;
  font-weight: 700;
  font-size: 0.8em;
}
.tool-tip p{
  margin: 0.2em;
  font-size: 0.8em;
  font-weight: normal;
}
/* ======================================================
  END: tool-tip
====================================================== */

/* ======================================================
-北央信用組合新規
  .card__text--highlightB
  - 強調表示の青色バージョン
====================================================== */
.card__text--highlightB {
  color: #0070C0;
  font-weight: 700;
  margin: 0 4px;
}
/* ======================================================
  END: card__text--highlightB
====================================================== */