@charset "utf-8";

/* ============================================================
   ユーティリティ: 視覚的に隠すが支援技術には読まれる
============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   スキップナビゲーション (WCAG 2.4.1)
============================================================ */
.skip-link {
  position: fixed;
  top: -9999px;
  left: 12px;
  z-index: 9999;
  background: #174e97;
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ============================================================
   フォーカスリング (WCAG 2.4.7) — キーボード操作時のみ表示
============================================================ */

/* ラジオボタン: inputがfocusされたとき隣のsort_circleにリングを表示 */
.sort_chk input:focus-visible ~ .sort_circle,
.sort_rad input:focus-visible ~ .sort_circle {
  outline: 2px solid #174e97;
  outline-offset: 3px;
}

/* CTAボタン (.cat_btn) */
.cat_btn:focus-visible {
  outline: 2px solid #174e97;
  outline-offset: 3px;
}

/* FVナビリンク (.fv_link) */
.fv_link:focus-visible {
  outline: 2px solid #174e97;
  outline-offset: 3px;
}

/* テキストリンク全般（コンテンツ内） */
#main a:focus-visible {
  outline: 2px solid #174e97;
  outline-offset: 2px;
/*  border-radius: 2px;*/
}

body {
    font-family: "MFW-HiraginoUDSansRStd-W4", "Noto Sans JP", sans-serif;
}
.bold {
    font-family: "MFW-HiraginoUDSansRStd-W6", "Noto Sans JP", sans-serif;
}
a {
  color: #000;
}
#main a:focus,
#main a:hover {
  text-decoration: none;
/*  opacity: 0.77;*/
}
/* ============================================================
   cat_sec: つらい気持ちセクション（Figma node 82:1581 準拠）
============================================================ */

/* カテゴリ見出しバー */
.cat_bar {
  background: #D2F3FA;
  border-radius: 14px;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  padding: 18px 20px;
  margin: 0 0 40px;
  letter-spacing: 1px;
}

/* カードグリッド：gap=40px (Figma: card1 x=110, card2 x=660, 660-110-510=40) */
.cat_cards {
  display: flex;
  gap: 40px;
}

/* 各カード外枠（グラデーション背景、border-radius 40px） */
.cat_card {
  flex: 1;
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1080px) {
  .cat_card {
    max-width: 510px;
  }
}
/* 電話：linear-gradient(179.53°, #174e97→#4CA6D7) */
.cat_card.tel {
  background: linear-gradient(179.53deg, #174e97 0.41%, #4CA6D7 99.59%);
}
/* LINE：linear-gradient(180.31°, #018901→#A7D670) */
.cat_card.line {
  background: linear-gradient(180.31deg, #018901 0.27%, #A7D670 99.73%);
}

/* ヘッダー（グラデーション透け）: 高さ55px (Figma: y=3204→3259) */
.cat_hd {
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.tel .cat_hd {
  background: #174e97;
}
.line .cat_hd {
  background: #018901;
}
.chat .cat_hd {
  background: #c94e02;
}
/* ヘッダーアイコン（丸型背景、32×32px） */
.cat_hd_ic {
/*  width: 32px;*/
/*  height: 32px;*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  border-radius: 50%;*/
/*  background: rgba(255,255,255,0.25);*/
/*  flex-shrink: 0;*/
  align-items: center;
  display: inline-flex;
}
.cat_hd_ic svg {
/*  width: 16px;*/
/*  height: 16px;*/
/*  fill: #fff;*/
}
.cat_hd_ic_line {
  font-size: 8px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
  border-radius: 7px;
}

/* カード本体（白背景）: margin 0 6px 6px (Figma: white rect offset 6px sides/bottom)
   padding top 30px (content frame abs y=1710-1680=30), sides 24px (x=140-116=24) */
.cat_bd {
  background: #fff;
  margin: 0 6px 6px;
  border-radius: 36px 36px;
  padding: 30px 24px 24px;
  flex: 1;
}

/* カードタイトル: font-size 24px (Figma 107:2063 text-[24px]), gap 25px */
.cat_tit {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 25px;
  line-height: 1.35;
}

/* 対象行: h=50px、margin-bottom=25px */
.cat_target {
  display: flex;
  align-items: stretch;
  height: 50px;
  margin-bottom: 25px;
  font-size: 14px;
}
/* 対象バッジ: 電話=60px幅 / LINE=52px幅 */
.cat_target_lbl {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px 0 0 8px;
  white-space: nowrap;
}
.tel .cat_target_lbl {
  width: 60px;
  background: #174e97;
}
.line .cat_target_lbl {
  width: 52px;
  background: #018901;
}
/* 対象テキスト: bg=#f5f5f5、padding-left=15px */
.cat_target_txt {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 15px;
  background: #f5f5f5;
  border-radius: 0 8px 8px 0;
}

/* サブ見出し（電話カードのみ）: font-size 20px (Figma 107:2070 text-[20px] W6) */
.cat_lead {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}

/* 説明・キーワードテキスト: line-height 1.8 (Figma 107:2071 leading-[1.8]) */
.cat_kw {
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 25px;
}

/* アクション行（ボタン＋QR）: gap=22px (Figma: QR at x=382, btn w=360, 382-360=22) */
.cat_action {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 25px;
}

/* ボタン: 360×68px、border-radius=34px、border=3px solid、shadow=0 4px 8px rgba(0,0,0,0.2)、font-size=20px */
.cat_btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 68px;
  background: #fff;
  border: 3px solid;
  border-radius: 34px;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
  font-size: 20px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  color: #000;
  padding-left: 20px;
}
.cat_btn.icon_freedial {
  padding-left: 0;
}
a.cat_btn {
  text-decoration: underline;
  cursor: pointer;
}
/* a[href^="tel:"] override */
a.cat_btn[href^="tel:"] {
  text-decoration: underline;
  cursor: pointer;
}
.tel .cat_btn {
  border-color: #174e97;
}
.line .cat_btn {
  border-color: #018901;
}
.cat_btn:focus,
.cat_btn:hover {
/*  border-radius: 32px;*/
}
.cat_btn:hover,
.cat_btn:hover * {
  opacity: 1;
}
.tel .cat_btn:hover {
  background-color: color-mix(in srgb, #4CA6D7 33%, transparent);
  background-color: #dae5ff;
}
.line .cat_btn:hover {
  background-color: color-mix(in srgb, #A7D670 33%, transparent);
  background-color: #ddfbc8;
}
.chat .cat_btn:hover {
  background-color: color-mix(in srgb, #FFAC6D 33%, transparent);
  background-color: #fbe7b8;
}
.cat_btn svg {
  flex-shrink: 0;
}

/* QRコード: 68×68px (Figma 107:2080 size-[68px]) */
.cat_qr {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  display: block;
  padding: 4px;
  border: 1px solid;
}

/* 注記テキスト: font-size 14px, line-height 1.6 (Figma 107:2082 text-[14px] leading-[1.6]) */
.cat_note {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}
.cat_note p {
  margin: 0;
}

/* ============================================================
   チャットカード（Figma #c94e02 オレンジ）
============================================================ */
.cat_card.chat {
  background: linear-gradient(180deg, #c94e02 0%, #e87a3a 100%);
  background: linear-gradient(180deg, #c94e02 0%, #FFAC6D 100%);
}
.chat .cat_target_lbl {
  width: 60px;
  background: #c94e02;
}
.chat .cat_btn {
  border-color: #c94e02;
/*  color: #c94e02;*/
}

/* cat_cards 複数行のギャップ */
.cat_cards + .cat_cards {
  margin-top: 40px;
}

/* 単一カードレイアウト（左寄せ510px）*/
.cat_cards.single {
/*  max-width: 510px;*/
  width: 510px;
}
.cat_cards.single .cat_card {
/*  flex: 0 0 510px;*/
/*  max-width: 510px;*/
}

/* カテゴリバー カラーバリアント (Figma exact colors) */
.cat_bar { background: #d2f3f9; }       /* デフォルト: つらい気持ち */
.cat_bar--tsurai  { background: #d2f3f9; }   /* #d2f3f9 */
.cat_bar--kodomo  { background: #ddfbc8; }   /* #ddfbc8 */
.cat_bar--josei   { background: #ffe4e9; }   /* #ffe4e9 */
.cat_bar--shokuba { background: #dae5ff; }   /* #dae5ff */
.cat_bar--kigaruni { background: #fbe7b8; }  /* #fbe7b8 */

/* BONDプロジェクト ロゴ+URL行 */
.cat_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}
.cat_logo img {
  height: 50px;
  width: auto;
}
.cat_logo a {
  font-size: 14px;
/*  color: #018901;*/
/*  text-decoration: underline;*/
}

/* ============================================================
   sort_result_sec: ソート結果（Figma 102:1897 白背景）
============================================================ */
@keyframes sortFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
#sort_result_container.sort-fade {
  animation: sortFadeIn 0.4s ease both;
  animation: sortFadeIn 0.9s ease both;
}
@media (prefers-reduced-motion: reduce) {
  #sort_result_container.sort-fade {
    animation: none;
  }
}

.sort_result_sec {
/*  background: #fff;*/
  padding: 60px 110px 80px;
  padding: 60px 0 80px;
}
.sort_result_sec .cat_cards {
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}
.sort_result_note {
  text-align: center;
  font-size: 14px;
  color: #555;
  margin-bottom: 40px;
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   obetsu_sec: お悩み別の相談窓口（Figma y=2924～）
============================================================ */
.obetsu_sec {
  background: #fff;
  background: #FFFDE9;
  padding: 80px 110px;
  padding: 120px 0 80px;
}
.obetsu_inner {
  max-width: 1060px;
  margin: 0 auto;
}
.obetsu_title {
  font-size: 46px;
  text-align: center;
  margin: 0 0 16px;
  line-height: 1.3;
}
.obetsu_note {
  font-size: 14px;
  text-align: center;
  color: #555;
  margin-bottom: 60px;
}
.cat_sec {
  margin-bottom: 60px;
  margin-bottom: 80px;
}
.cat_sec:last-child {
  margin-bottom: 0;
}

/* その他バナー (Figma 102:1890 w=1060 h=90 白、radius 14px)*/
.other_banner {
  background: #fff;
  border-radius: 14px;
  padding: 20px 30px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 60px;
/*  box-shadow: 0 2px 6px rgba(0,0,0,0.08);*/
}
.other_banner a {
/*  color: #174e97;*/
/*  text-decoration: underline;*/
}
.other_banner p { margin: 0; }

/* ============================================================
   voice_sec: 悩んでいるあなたへ（Figma 44:446 グラデーション背景）
   Section: y=8540, h=1285, padding-top=90px, padding-bottom=90px
   White Card 1 (45): x=110, y=8737, w=1060, h=494, r=30px
   White Card 2 (46): x=110, y=9271, w=1060, h=464, r=14px
   Inner Quote Box (86/87): margin 20px from card, h=109, r=20px, bg=#effeff
   Catch: 26px W6; Source: 20px W6
   Body text: 18px (bold quotes / regular explanation)
   Gap between cards: 40px (9271-9231=40)
============================================================ */
.voice_sec {
  background: linear-gradient(180deg, #ddf6ff 20%, #e4f8c9 100%);
  padding: 90px 0;
}
.voice_inner {
  max-width: 1060px;
  margin: 0 auto;
}
.voice_sec_title {
  font-size: 38px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 50px;
  line-height: 1.3;
}

/* 白いカードボックス（Rectangle 45 r=30px / Rectangle 46 r=14px） */
.voice_card {
  background: #fff;
  margin-bottom: 40px;
  padding-top: 20px;
}
.voice_card:first-of-type { border-radius: 30px; }
.voice_card:last-of-type  { border-radius: 14px; }
.voice_card:last-child    { margin-bottom: 0; }

/* 内側カラーボックス #EFFEFF（Rectangle 86/87: 20pxマージン, h=109, r=20px） */
.voice_hd {
  background: #EFFEFF;
  border-radius: 20px;
  margin: 0 20px 0;
  padding: 51px 40px 31px;
  padding: 31px 40px 31px;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 109px;
  box-sizing: border-box;
}
.voice_quote_catch {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.voice_quote_src {
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 本文エリア (Figma座標ベース padding) */
.voice_body {
  display: flex;
  align-items: flex-start;
  gap: 39px;
  padding: 35px 44px 58px 50px;
}
/* 反転レイアウト: 写真左・テキスト右（Card 2） */
.voice_body--reversed {
  flex-direction: row-reverse;
  gap: 58px;
  padding: 35px 50px 58px 69px;
}

.voice_text {
  flex: 1;
  font-size: 18px;
  line-height: 1.8;
}
.voice_text p { margin: 0 0 20px; line-height:2; }
.voice_text p:last-child { margin-bottom: 0; }

/* 写真1（右側: w=243, h=264）*/
.voice_side_photo {
  width: 243px;
  flex-shrink: 0;
}
.voice_side_photo img {
  width: 100%;
  height: 264px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* 写真2枚（左側、重なり配置: Figma 135:2154 top/135:2153 bottom） */
.voice_body2_photos {
  width: 200px;
  flex-shrink: 0;
  position: relative;
  height: 245px;
}
.voice_body2_photos img {
  position: absolute;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
/* 1枚目 (voice_photo2.png = pixta_83991085: w=193 h=182, top=62px left=0) */
.voice_body2_photos img:first-child {
  width: 193px;
  height: 182px;
  top: 62px;
  left: 0;
}
/* 2枚目 (voice_photo1.png = pixta_64794133: w=125 h=175, top=0 left=25px, 前面) */
.voice_body2_photos img:last-child {
  width: 125px;
  height: 175px;
  top: 0;
  left: 25px;
  z-index: 1;
}

/* ============================================================
   campaign_sec: 気づいてください（Figma 122:2126）
   Layout from Figma absolute coords (1280px canvas):
     logo: x=170, y=9885, w=174, h=180
     title: x=387, y=9937, w=683, h=57  (center=728)
     sub:   x=569, y=10009, w=319, h=24 (center=728)
   Section top: y=9825 → top pad = 9885-9825 = 60px
   Gap logo→title: 387-344 = 43px
============================================================ */
.campaign_sec {
  background: #fff;
}
.campaign_inner {
  max-width: 1060px;
  margin: 0 auto;
  /* padding-left 60px positions logo at x=110+60=170 (Figma exact) */
  padding: 60px 0 66px 60px;
  display: flex;
  align-items: center;
  gap: 43px;
}
.campaign_logo {
  width: 174px;
  height: 180px;
  flex-shrink: 0;
}
.campaign_logo img { width: 100%; height: 100%; object-fit: contain; }
/* text body: 683px wide, centered text (Figma title w=683, center x=728) */
.campaign_body {
  width: 683px;
  flex-shrink: 0;
  text-align: center;
}
/* Figma 44:492: 38px, #174e97, W6, center, nowrap */
.campaign_title {
  font-size: 38px;
  font-weight: 700;
  color: #174e97;
  margin: 0 0 15px;
  line-height: 1.5;
  white-space: nowrap;
}
/* Figma 44:494: 16px, #174e97, W4, center */
.campaign_sub {
  font-size: 16px;
  color: #174e97;
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   免責ボックス (Figma 133:2148 Rectangle 88)
   x=110, y=10131, w=1060, h=505
   border: 2px solid #174e97, radius: 20px, fill: none→白
   内部テキスト x=130→ボックス左+20px, y=10171→top+40px
============================================================ */
.footer_disclaimer_sec {
  background: #fff;
  /* top padding 0: キャンペーンセクション直後にボックスが来る */
  padding: 0 110px 60px;
}
.footer_disclaimer_inner {
  max-width: 1060px;
  margin: 0 auto;
  border: 2px solid #174e97;
  border-radius: 20px;
  background: #fff;
  padding: 40px ;
  font-size: 14px;
  line-height: 1.8;
  color: #000;
}
.footer_disclaimer_inner p { margin: 0 0 16px; }
.footer_disclaimer_inner p:last-child { margin-bottom: 0; }
.footer_disclaimer_inner a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer_disclaimer_inner a:hover { color: #174e97; }
/* 外部リンクアイコン (Figma 135:2158/2162/2166: 13×13px) */
.icon_ext {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px;
  flex-shrink: 0;
}

/* ============================================================
   フッター (Figma 44:498, 44:496, 44:563)
   ロゴ: x=150, y=10696, w=234, h=134
   組織情報: x=464 (ロゴright384+gap80=464), 14px/1.8 black
   Copyright: x=464, y=10781, 12px/1.8 black
   dark blue bar なし — Rectangle 83 (white) 続き
============================================================ */
.footer {
  background: #fff;
}
.footer_content {
  max-width: 1060px;
  margin: 0 auto;
  /* padding-left: 40px でロゴを x=110+40=150 に合わせる */
  /* padding-top: 60px (10696-10636=60px, 免責ボックス下からの距離) */
  /* padding-bottom: 50px (10853-10803=50px, ページ下端まで) */
  padding: 60px 0 23px 40px;
  display: flex;
  align-items: flex-start;
  /* gap: 80px (ロゴright 384 → テキスト left 464: 464-384=80px) */
  gap: 80px;
}
/* ロゴ: Figma 234×134px */
.footer_logo_area {
  width: 234px;
  height: 134px;
  flex-shrink: 0;
}
.footer_logo_area img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.footer_info_area {
  flex: 1;
}
/* 組織情報: Figma 44:496, 14px, black, line-height 1.8, nowrap */
.footer_org_txt {
  font-size: 14px;
  line-height: 1.8;
  color: #000;
  margin: 0 0 10px;
  white-space: nowrap;
}
/* Copyright: Figma 44:563, 12px, black, line-height 1.8 */
.footer_copyright_txt {
  font-size: 12px;
  line-height: 1.8;
  color: #000;
  margin: 0;
  white-space: nowrap;
}

/* fv ヒーロー写真（Figma pixta images 絶対配置）*/
.fv_photo {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  z-index: 0;
}
.fv_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fv_photo--left {
  left: -88px;
  top: 165px;
  width: 416px;
  height: 416px;
  z-index: 999;
}
.fv_photo--right {
  left: 876px;
  top: -58px;
  width: 629px;
  height: 629px;
  z-index: 999;
}

/* fv サブタイトル「悩んでいるあなたへ。」*/
.fv_subheading {
  font-size: 24px;
  color: #000;
  text-align: center;
  line-height: 1.6;
  margin: 0 0 120px;
  margin: 0 0 100px;
}

/* ============================================================
   fv: ファーストビジュアル（Figma 82:1365: 1280×1514, グラデーション背景）
============================================================ */
#main {
  position: relative;
}
#main:after {
  position: relative;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 0;
  content: "";
  width: 100%;
  height: 100%;
/*    background: linear-gradient(180deg, #EDFFF2 20.25%, #EFFEFF 100%);*/
    background: url(../img/figma_export/bg.jpg) no-repeat center top;
    background-size: 100% auto;
/*    aspect-ratio: 1440 / 3672;*/
}
#main > * {
    z-index: 1;
    position: relative;
}

.fv {
  position: relative;
/*  overflow: hidden;*/
  /* from-[#edfff2] from-[20.254%] to-[#effeff] */
/*  background: linear-gradient(180deg, #edfff2 20.254%, #effeff 100%);
    background: url(../img/figma_export/bg.jpg) no-repeat center top;
    background-size: 100% auto;
    aspect-ratio: 1440 / 3672;*/
}

/* 1280px基準の位置合わせコンテナ */
.fv_inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 80px;
  padding-bottom: 30px;
}

/* ロゴ (Figma 42:10: x=30, y=0, w=170) */
.fv_logo {
  position: absolute;
  left: 30px;
  top: 0;
  width: 170px;
  z-index: 2;
}
.fv_logo img {
  display: block;
  width: 100%;
}

/* 装飾ブロブ (mix-blend-multiply, opacity 30%, 絶対配置) */
.fv_blob {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.fv_blob img {
  display: block;
  width: 100%;
  mix-blend-mode: multiply;
  opacity: 0.3;
}
/* image 37: x=603, y=-131, w=431 */
.fv_blob--37 { width: 431px; left: 603px; top: -131px; }
/* image 41: x=172, y=-31, w=420 */
.fv_blob--41 { width: 420px; left: 172px; top: -31px; }
/* image 38: x=-132, y=212, w=442 */
.fv_blob--38 { width: 442px; left: -132px; top: 212px; }
/* image 39: x=320, y=824, w=490 */
.fv_blob--39 { width: 490px; left: 320px; top: 824px; }
/* image 40: x=1376, y=681, w=332 */
.fv_blob--40 { width: 332px; left: 1376px; top: 681px; }

/* 白いブラーボックス (Rectangle 82: 117:2125, x=256, y=80, w=770, h=380, r=50px, blur=4px) */
.fv_hero_bg {
  position: absolute;
  top: 80px;
  width: 70vw;
  max-width: 770px;
  height: 380px;
/*  background: #fff;*/
  opacity: 0.6;
  border-radius: 50px;
  filter: blur(4px);
  z-index: 1;
  pointer-events: none;
  left: 0;
  right: 0;
  margin: auto;
}


/* ヒーロー中央コンテンツ（バッジ y=130, テキスト y=203/263, リンク y=540） */
.fv_hero {
  text-align: center;
  position: relative;
  z-index: 2;
  padding-top: 130px;
}

/* バッジ (102:1895: 286×50, bg=#174e97, r=4px, white 24px W6 tracking 4.8px) */
.fv_badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 286px;
  height: 50px;
  background: #174e97;
  border-radius: 4px;
  color: #fff;
  font-size: 24px;
  letter-spacing: 4.8px;
  margin: 0 auto 23px;
}

/* ヒーロー見出し (Group 85: 40px #174e97, tracking 8px W6) */
.fv_heading {
  font-size: 40px;
  color: #174e97;
  letter-spacing: 8px;
  line-height: 1.5;
  margin: 0 0 13px;
}

/* ナビリンク2本 (Figma Rectangle 5/6: 440×80px, radius 40px, bg #f6f8c9) */
.fv_links {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 125px;
  margin-bottom: 100px;
}
.fv_link {
  width: 440px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f6f8c9;
  border-radius: 40px;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
  font-size: 20px;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  font-family: "MFW-HiraginoUDSansRStd-W6", "Noto Sans JP", sans-serif;
}
  .fv_link:first-child {
    background: #d4f3ff;
  }
.fv_link:hover {
  opacity: 0.8;
  text-decoration: underline;
}
.fv_link_arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #174e97;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 「相談窓口を探す」大見出し (54:573: y=695, 46px black center) */
.fv_sort_title {
  font-size: 46px;
  color: #000;
  text-align: center;
  margin: 0 0 34px;
  margin: 0 0 20px;
  line-height: 1.2;
  line-height: 69px;
  position: relative;
  z-index: 1;
}

/* sort_sec の fv内上書き */
.fv_sort_sec {
  margin: auto;
  margin-top: 0 !important;
/*  padding-left: 110px;*/
/*  padding-right: 110px;*/
  max-width: 1056px;
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
}

/* ============================================================
   sort_sec: 相談窓口を探す 2エリア（Figma 44:127, 44:128）
============================================================ */

.sort_sec {
  margin-top: 60px;
}

/* サブタイトル: abs y=784, Q1 top y=864 → 底部 gap 50px */
.sort_sec_sub {
  text-align: center;
  font-size: 20px;
  margin-bottom: 50px;
}

/* ボックス共通: border 2px solid #174e97, border-radius 30px (Figma) */
.sort_box {
  background: #fff;
  border: 2px solid #174e97;
  border-radius: 30px;
}
.sort_box_q1 {
  padding: 26px 60px 40px 48px;
  min-height: 340px;
  margin-bottom: 30px;
}
.sort_box_q2 {
  padding: 26px 60px 26px 48px;
  min-height: 190px;
}
.sort_q_hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 52px;
}
  .sort_q_hd {
    background: #eff9ff;
    margin: -26px -48px 30px;
    width: calc(100% + 54px + 54px);
    padding: 20px 30px 15px;
    border-radius: 30px 30px 0 0;
  }

/* 番号バッジ: font-size 28px, color #fff, bg #174e97 (Figma 44:75) */
.sort_q_num {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  background: #174e97;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

/* 質問テキスト: font-size 24px, #174e97 (Figma 44:65) */
.sort_q_lbl {
  font-size: 24px;
  font-weight: 700;
  color: #174e97;
}

/* Q2: 横並び、gap 50px (Figma: gap-[50px] in Frame4)
   padding-left 12px: Frame4 abs x=170-110=60, box left-pad=48 → 60-48=12px */
.sort_radios {
  display: flex;
  gap: 50px;
/*  align-items: center;*/
  padding-left: 12px;
  flex-wrap: wrap;
}
/* Q1: 縦並び、gap 20px (50px間隔 - item h=30px = 20px)
   padding-left 12px: checks abs x=170-110=60, box left-pad=48 → 60-48=12px */
.sort_checks,
.sort_wide {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 12px;
}

/* 各項目: flex row, gap 10px, h=30px (Figma: gap-[10px], frame h=30) */
.sort_chk,
.sort_rad {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
/*  height: 30px;*/
}
.sort_chk input,
.sort_rad input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.sort_col2 {
  gap: 22px;
}
.sort_col2 .sort_chk,
.sort_col2 .sort_rad {
  width: calc((100% - 100px) / 2 );
}

/* サークル: 26×26px (Figma: Ellipse w=26 h=26) */
.sort_circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #174e97;
  flex-shrink: 0;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sort_chk input:checked ~ .sort_circle::after,
.sort_rad input:checked ~ .sort_circle::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #174e97;
}

/* ラベルテキスト: font-size 20px, underlined (Figma: 20px, text-decoration underline) */
.sort_opt_lbl {
  font-size: 20px;
  font-weight: normal;
  text-decoration: underline;
  color: #000;
}

.sort_chk input:checked ~ .sort_opt_lbl,
.sort_rad input:checked ~ .sort_opt_lbl {
  text-decoration: none;
}

@media screen and (max-width: 1080px) {
.sec,
.fv_inner {
  padding-left: 20px;
  padding-right: 20px;
}
.cat_cards {flex-direction: column;}
.cat_cards.single {
  width: auto;
}
}

/* ============================================================
   SP: スマートフォン対応 (Figma node 149:2314, 375px幅)
============================================================ */
@media screen and (max-width: 768px) {

  /* ── FV: ファーストビジュアル ── */
  .fv_logo { display: none; }
  .fv_blob,
  .fv_photo,
  .fv_hero_bg { display: none; }

  .fv_inner {
    max-width: 100%;
    padding-bottom: 40px;
  }

  .fv_hero {
    padding-top: 80px;
    padding-top: 170px;
    padding-top: 186px;
  }

  .fv_badge {
    width: 200px;
    height: 35px;
    font-size: 18px;
    letter-spacing: 3.6px;
    margin-bottom: 15px;
  }

  .fv_heading {
    font-size: 26px;
    letter-spacing: 2px;
    margin-bottom: 10px;
  }

  .fv_subheading {
    font-size: 16px;
    color: #174e97;
    margin-bottom: 40px;
    margin-bottom: 154px;
    margin-bottom: 196px;
  }

  /* ナビリンク: 2カラムグリッド */
  .fv_links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    gap: 15px;
    padding: 0 20px;
    padding: 0 2px;
    margin-bottom: 50px;
    justify-items: stretch;
  }

  .fv_link {
    width: auto;
    height: 80px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: normal;
    font-family: "MFW-HiraginoUDSansRStd-W4", "Noto Sans JP", sans-serif;
    padding: 8px 1px 8px 10px;
    white-space: normal;
    line-height: 1.3;
/*    flex-direction: column;*/
/*    gap: 4px;*/
  }

  .fv_sort_title {
    font-size: 32px;
    margin-bottom: 16px;
    margin-bottom: 1px;
    padding: 0 20px;
  }

  .fv_sort_sec {
/*    padding-left: 20px;*/
/*    padding-right: 20px;*/
  }

  .sort_sec_sub {
    font-size: 16px;
    margin-bottom: 20px;
    margin-bottom: 32px;
  }

  .sort_box {
    border-radius: 20px;
  }

  .sort_box_q1 {
    padding: 0 20px 30px;
    min-height: 0;
    margin-bottom: 20px;
  }

  .sort_box_q2 {
    padding: 0 20px 30px;
    min-height: 0;
  }

  /* Q見出し行: #eff9ff 背景バー (Figma SP: bg-[#eff9ff] h-[65px]) */
  .sort_q_hd {
    background: #eff9ff;
    margin: 0 -20px 30px;
    width: auto;
    padding: 14px 20px;
    padding: 20px 20px;
    border-radius: 18px 18px 0 0;
  }

  .sort_q_num {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .sort_q_lbl {
    font-size: 20px;
  }

  .sort_opt_lbl {
    font-size: 18px;
  }
  .sort_col2 .sort_chk, .sort_col2 .sort_rad,
  .sort_chk, .sort_rad {
    width: 100%;
  }
  .sort_chk, .sort_rad {
    align-items: flex-start;
  }

  .sort_checks {
    padding-left: 0;
  }

  /* Q2: 縦並び (Figma SP では flex-wrap w=116px で縦配置) */
  .sort_radios {
    flex-direction: column;
    gap: 20px;
/*    padding-left: 0;*/
  }

  /* ── sort_result_sec ── */
  .sort_result_sec {
    padding: 30px 20px 40px;
  }

  .sort_result_note {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .cat_card {
    border-radius: 30px;
  }

  .cat_bd {
    border-radius: 0 0 24px 24px;
    padding: 20px 16px 16px;
  }

  /* SP: QRコード非表示 */
  .cat_qr { display: none; }

  .cat_action {
    margin-bottom: 15px;
  }

  .cat_btn {
    height: 65px;
    font-size: 18px;
  }

  .cat_hd {
    font-size: 18px;
    height: 50px;
  }

  .cat_tit {
    font-size: 20px;
    margin-bottom: 15px;
    white-space: normal;
  }

  .cat_target {
    height: auto;
    min-height: 50px;
    margin-bottom: 15px;
  }

  .cat_target_txt {
    white-space: normal;
    line-height: 1.4;
    padding: 8px 12px;
  }

  .cat_lead {
    font-size: 18px;
  }

  .cat_kw {
    margin-bottom: 15px;
  }

  .cat_cards + .cat_cards {
    margin-top: 20px;
  }

  /* ── obetsu_sec ── */
  .obetsu_sec {
    background: #fffde9;
    padding: 50px 20px 60px;
  }

  .obetsu_title {
    font-size: 32px;
    margin-bottom: 10px;
  }

  .obetsu_note {
    font-size: 14px;
    margin-bottom: 40px;
  }

  .cat_bar {
    font-size: 20px;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 20px;
  }

  .cat_sec {
    margin-bottom: 40px;
  }

  .other_banner {
    margin-top: 40px;
    padding: 20px 15px;
  }

  /* ── voice_sec ── */
  .voice_sec {
    padding: 50px 20px 60px;
  }

  .voice_inner {
    max-width: 100%;
  }

  .voice_sec_title {
    font-size: 28px;
    margin-bottom: 25px;
  }

  /* voice_card: SP では padding で対応 */
  .voice_card {
    margin-bottom: 20px;
  }

  /* 内側カラーボックス SP */
  .voice_hd {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    margin: 15px 15px 0;
    padding: 20px;
    min-height: 0;
    border-radius: 16px;
  }
.voice_hd > * {
    text-align: center;
    justify-content: center;
    display: flex;
    width: 100%;
}
  .voice_quote_catch {
    font-size: 20px;
    line-height: 1.4;
    margin: 0;
  }

  .voice_quote_src {
    font-size: 14px;
    margin-left: 0;
    white-space: normal;
  }

  .voice_body {
    flex-direction: column;
    padding: 20px;
    gap: 20px;
  }

  /* SP: 反転レイアウトを解除して縦積みに */
  .voice_body--reversed {
    flex-direction: column;
    padding: 20px;
    gap: 20px;
  }
.column-reverse {
    flex-direction: column-reverse;
}
.img_center {
  text-align: center;
}
.img_center {
  display: flex;
  justify-content: center;
  width: 100%;
}
  .voice_side_photo {
    width: 160px;
    margin: 0 auto;
  }

  .voice_side_photo img {
    height: auto;
  }

  .voice_text {
    font-size: 14px;
  }

  /* SP: 重なり写真を通常フローに戻す */
  .voice_body2_photos {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }

  .voice_body2_photos img {
    position: static;
    width: 45%;
    max-width: 130px;
    height: auto;
  }

  /* ── campaign_sec ── */
  .campaign_inner {
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    gap: 20px;
  }

  .campaign_logo {
    width: 125px;
    height: 130px;
  }

  .campaign_body {
    width: auto;
    text-align: center;
  }

  .campaign_title {
    font-size: 32px;
    white-space: normal;
    line-height: 1.4;
    margin-bottom: 10px;
  }

  .campaign_sub {
    font-size: 14px;
  }

  /* ── footer_disclaimer_sec ── */
  .footer_disclaimer_sec {
    padding: 0 20px 40px;
  }

  .footer_disclaimer_inner {
    padding: 20px 10px;
  }

  /* ── footer ── */
  .footer_content {
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 30px;
    gap: 20px;
    text-align: center;
  }

  .footer_logo_area {
    width: 160px;
    height: 91px;
  }

  .footer_logo_area img {
    object-position: center;
  }

  .footer_org_txt {
    white-space: normal;
    text-align: center;
  }

  .footer_copyright_txt {
    white-space: normal;
    text-align: center;
  }

} /* end @media 768px */

@media screen and (max-width: 768px) {
#main:after {
/*  display: none;*/
    background: url(../img/figma_export/bg_sp.jpg) no-repeat center top;
    background-size: 100% auto;
}
section.fv {
}
}
@media screen and (max-width: 768px) {
.fv_heading {
    font-size: 6vw;
}
}