/* =========================================================
   TROUBLE PAGE (paired with REQUEST)
   ========================================================= */

/* intro */
.trouble-intro{
  padding: 64px 0 44px;
  position: relative;
  overflow: hidden;
}
.trouble-intro::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(700px 320px at 18% 28%, rgba(40,200,255,.18), transparent 60%),
    radial-gradient(720px 360px at 82% 16%, rgba(255,42,109,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.66));
  pointer-events:none;
}
.trouble-intro .container{ position: relative; z-index: 1; }

.trouble-kicker{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 14px;
}
.trouble-kicker .kicker-text{
  font-weight: 1000;
  letter-spacing: .10em;
  color: rgba(11,42,85,.85);
  font-size: 12px;
}

.trouble-title{
  margin: 0 0 12px;
  font-weight: 1000;
  letter-spacing: .01em;
  line-height: 1.10;
  font-size: clamp(28px, 3.0vw, 44px);
  color: #0b2a55;
}
.trouble-lead{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.9;
  font-weight: 900;
  color: rgba(11,42,85,.78);
  max-width: 60ch;
}
.trouble-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
  margin-bottom: 16px;
}

/* “安心” */
.trouble-assurance{
  list-style:none;
  padding: 0;
  margin: 0;
  display:grid;
  gap: 8px;
  max-width: 660px;
}
.trouble-assurance li{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(11,42,85,.14);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  color: rgba(11,42,85,.82);
}

/* chooser grid */
.trouble-chooser{ padding-top: 28px; }

.tgrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .tgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .tgrid{ grid-template-columns: 1fr; gap: 12px; }
}

/* card unified height */
.tcard{
  position: relative;
  display:flex;
  flex-direction: column;
  text-decoration:none;
  color: #0b2a55;

  border-radius: 22px;
  border: 3px solid rgba(11,42,85,.22);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 10px 10px 0 rgba(0,0,0,.18), 0 18px 44px rgba(11,42,85,.12);

  padding: 18px 18px 16px;
  min-height: 220px; /* ★不揃い対策 */
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, filter .14s ease;
}
@media (hover:hover){
  .tcard:hover{
    transform: translate(-3px,-3px);
    box-shadow: 14px 14px 0 rgba(0,0,0,.22), 0 24px 56px rgba(11,42,85,.14);
    border-color: rgba(11,42,85,.34);
    filter: saturate(1.03);
  }
}

.tcard-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

/* label: もっと目立つ */
.tlabel{
  display:inline-flex;
  align-items:center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .14em;
  color: #0b2a55;
  background: rgba(255,255,255,.88);
  border: 2px solid rgba(11,42,85,.22);
}
.tprio{
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .10em;
  opacity: .85;
}

.tcard-title{
  margin: 0 0 8px;
  font-weight: 1000;
  letter-spacing: .01em;
  line-height: 1.18;
  font-size: 18px;
}
.tcard-text{
  margin: 0 0 14px;
  color: rgba(11,42,85,.72);
  font-weight: 900;
  line-height: 1.7;
  font-size: 13px;
}
.tcard-link{
  margin-top: auto;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 1000;
  letter-spacing: .06em;
  font-size: 12px;
  color: rgba(11,42,85,.92);
}
.tcard-link::after{
  content:"→";
  font-weight: 1000;
}

/* color accents (paired with request colors) */
.tcard::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events:none;
  background:
    radial-gradient(680px 240px at 18% 18%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.12));
}
.tcard{ --accent: #28c8ff; }

.tcard.is-cyan   { --accent:#28c8ff; }
.tcard.is-pink   { --accent:#ff2a6d; }
.tcard.is-yellow { --accent:#f1ff45; }
.tcard.is-navy   { --accent:#0b2a55; }
.tcard.is-orange { --accent:#ff7a18; }
.tcard.is-purple { --accent:#7a55ff; } /* ★イラストと被らない紫 */

.tcard{
  border-color: color-mix(in srgb, var(--accent) 30%, rgba(11,42,85,.22));
}
.tlabel{
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--accent) 35%, rgba(0,0,0,.10));
}

/* steps */
.trouble-steps{
  background: rgba(255,255,255,.60);
  border-top: 1px solid rgba(11,42,85,.08);
}
.steps{
  list-style:none;
  padding: 0;
  margin: 14px 0 0;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .steps{ grid-template-columns: 1fr; }
}
.step{
  background: #fff;
  border: 1px solid rgba(11,42,85,.12);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 26px rgba(11,42,85,.08);
}
.step-no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 11px;
  letter-spacing: .12em;
  border: 2px solid rgba(11,42,85,.22);
  background: rgba(11,42,85,.06);
  color:#0b2a55;
}
.step h3{
  margin: 10px 0 6px;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .01em;
}
.step p{
  margin: 0;
  color: rgba(11,42,85,.70);
  font-weight: 900;
  line-height: 1.75;
  font-size: 13px;
}

.steps-cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* pre-footer trouble tone */
.pre-footer-cta--trouble{
  background: linear-gradient(180deg, #0b2a55 0%, #081d3a 100%);
}


/* ===== Recommended articles ===== */
.trouble-reco{ padding-top: 10px; }

.reco-box{
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(11,42,85,.14);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(11,42,85,.10);
  padding: 18px 18px 16px;
}

.reco-head{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}

.reco-title{
  margin: 0;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .01em;
  color:#0b2a55;
}

.reco-list{
  list-style:none;
  padding: 0;
  margin: 10px 0 14px;
  display:grid;
  gap: 10px;
}

.reco-item{
  border-radius: 16px;
  border: 1px solid rgba(11,42,85,.12);
  background: #fff;
  padding: 12px 12px 12px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
@media (hover:hover){
  .reco-item:hover{
    transform: translateY(-2px);
    border-color: rgba(11,42,85,.22);
    box-shadow: 0 14px 34px rgba(11,42,85,.12);
  }
}

.reco-item a{
  text-decoration:none;
  color: inherit;
  display:block;
}

.reco-item .meta{
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .10em;
  color: rgba(11,42,85,.55);
  margin-bottom: 6px;
}

.reco-item .title{
  margin: 0;
  font-weight: 1000;
  font-size: 14px;
  line-height: 1.45;
  color: #0b2a55;
}

.reco-item .desc{
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.7;
  color: rgba(11,42,85,.72);
}

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

.reco-note{
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 900;
  color: rgba(11,42,85,.62);
}

/* button化しても見た目崩れないように */
.tcard{
  text-align: left;
  cursor: pointer;
}
button.tcard{
  appearance: none;
  border: 3px solid rgba(11,42,85,.22);
}


/* ===== Fix: ボタン文字が見えない問題 ===== */

/* メインの濃いボタン */
.page-request .btn-primary,
.page-request .pre-footer-btn.is-post {
  color: #ffffff !important;
}

/* 薄いボタン（ゴースト/白系） */
.page-request .btn-ghost,
.page-request .pre-footer-btn.is-voice {
  color: #0b2a55 !important;
}

/* 角丸のサブボタン（今回の「相談だけでもOK」系） */
.page-request .btn,
.page-request .chip,
.page-request .pill {
  color: #0b2a55;
}

/* もし span や small で文字が入ってる場合も保険 */
.page-request .btn * {
  color: inherit;
}


/* =========================================================
   FIX: ボタンの文字が消える問題（最強保険）
   ========================================================= */

/* まず文字が透明化される系を全部無効化 */
.page-request .request-intro-actions a,
.page-request .pre-footer-actions a,
.page-request .btn,
.page-request .pre-footer-btn{
  color: #0b2a55 !important;
  -webkit-text-fill-color: currentColor !important; /* ←これが効くこと多い */
  text-shadow: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;

  position: relative;     /* ←擬似要素に被されても前に出す */
  z-index: 2;
}

/* 主ボタン（濃い背景）だけ白文字に */
.page-request .btn.btn-primary,
.page-request .request-intro-actions .btn-primary,
.page-request .pre-footer-btn.is-voice{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ボタンの上に“板”が乗ってる場合の対策（板を背面へ） */
.page-request .btn::before,
.page-request .btn::after,
.page-request .pre-footer-btn::before,
.page-request .pre-footer-btn::after{
  z-index: 0 !important;
}

/* テキストを確実に前面へ（中にspanがある時用） */
.page-request .btn > *,
.page-request .pre-footer-btn > *{
  position: relative;
  z-index: 2;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ===== FIX: btn文字が消える（trouble-actions内だけ確実に直す） ===== */
.page-trouble .trouble-actions .btn{
  position: relative;
  z-index: 2;
  color: #0b2a55 !important;
  -webkit-text-fill-color: currentColor !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* primary は白文字 */
.page-trouble .trouble-actions .btn.btn-primary{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 擬似要素が被ってる系の保険 */
.page-trouble .trouble-actions .btn::before,
.page-trouble .trouble-actions .btn::after{
  z-index: 0 !important;
}

/* 中身を前面固定（spanがあっても効く） */
.page-trouble .trouble-actions .btn > *{
  position: relative;
  z-index: 2;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}


/* =========================
   TROUBLE CARDS (MB style)
   ========================= */

.trouble-chooser{ padding: 56px 0 64px; }

/* grid */
.tgrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 14px;
}

@media (max-width: 980px){
  .tgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .tgrid{ grid-template-columns: 1fr; gap: 14px; }
}

/* card base */
.tcard{
  appearance:none;
  -webkit-appearance:none;
  border: 0;
  text-align:left;
  width:100%;
  cursor:pointer;

  border-radius: 22px;
  padding: 18px 18px 16px;
  min-height: 210px;

  position: relative;
  overflow: hidden;

  /* 厚紙っぽい白地 + ほんのり色面 */
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(255,255,255,.75), rgba(255,255,255,.08) 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));

  /* “紙の縁” */
  border: 3px solid rgba(11,42,85,.55);

  /* MBっぽい影：濃紺+段差（グレー影を殺す） */
  box-shadow:
    10px 10px 0 rgba(11,42,85,.22),
    0 18px 44px rgba(11,42,85,.14);

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}

/* 角度で雑誌感（強すぎない） */
.tcard{ transform: rotate(-.25deg); }
.tcard:nth-child(even){ transform: rotate(.25deg); }

@media (hover:hover){
  .tcard:hover{
    transform: translate(-3px,-3px) rotate(0deg);
    box-shadow:
      14px 14px 0 rgba(11,42,85,.24),
      0 24px 54px rgba(11,42,85,.18);
    filter: saturate(1.03);
  }
}
.tcard:active{
  transform: translateY(2px);
  box-shadow:
    7px 7px 0 rgba(11,42,85,.22),
    0 16px 38px rgba(11,42,85,.16);
}
.tcard:focus-visible{
  outline: 4px solid rgba(0,140,255,.35);
  outline-offset: 3px;
}

/* 上部ラベル列 */
.tcard-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

/* “ステッカー”感のラベル */
.tlabel{
  display:inline-flex;
  align-items:center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .16em;

  color: #0b2a55;
  background: rgba(255,255,255,.86);
  border: 2px solid rgba(11,42,85,.35);
  box-shadow: 4px 4px 0 rgba(11,42,85,.18);
  transform: rotate(-6deg);
}

.tprio{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  color: rgba(11,42,85,.72);
}

/* タイトル/本文 */
.tcard-title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .02em;
  line-height: 1.15;
  color: #0b2a55;
}

.tcard-text{
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  font-weight: 800;
  color: rgba(11,42,85,.76);
  max-width: 46ch;
}

/* 下部CTA（押したくなるやつ） */
.tcard-link{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  margin-top: 14px;

  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .10em;
  color: #0b2a55;
}

.tcard-link::after{
  content:"→";
  font-size: 14px;
  transform: translateY(-1px);
}

/* =========================
   Color themes (6)
   ========================= */

/* カードの“色面”は疑似要素で入れる（本文が薄くならない） */
.tcard::before{
  content:"";
  position:absolute;
  inset:-60px -40px auto -60px;
  height: 180px;
  border-radius: 60px;
  opacity: .55;
  filter: blur(0px);
  transform: rotate(-8deg);
}

.tcard.is-blue::before{  background: radial-gradient(circle at 30% 30%, rgba(40,200,255,.85), rgba(40,200,255,0)); }
.tcard.is-cyan::before{  background: radial-gradient(circle at 30% 30%, rgba(124,243,230,.95), rgba(124,243,230,0)); }
.tcard.is-pink::before{  background: radial-gradient(circle at 30% 30%, rgba(255,42,109,.70), rgba(255,42,109,0)); }
.tcard.is-slate::before{ background: radial-gradient(circle at 30% 30%, rgba(11,42,85,.22), rgba(11,42,85,0)); }
.tcard.is-yellow::before{background: radial-gradient(circle at 30% 30%, rgba(241,255,69,.70), rgba(241,255,69,0)); }
.tcard.is-purple::before{background: radial-gradient(circle at 30% 30%, rgba(145,120,255,.60), rgba(145,120,255,0)); }

/* ラベルも色に合わせてちょい差し色（やりすぎない） */
.tcard.is-pink  .tlabel{ border-color: rgba(255,42,109,.45); }
.tcard.is-yellow .tlabel{ border-color: rgba(241,255,69,.55); }
.tcard.is-purple .tlabel{ border-color: rgba(145,120,255,.55); }
.tcard.is-slate  .tlabel{ border-color: rgba(11,42,85,.35); }




/* =========================
   AWARENESS / 気づき記事
   ========================= */

.awareness{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(246,248,251,.9));
  border-top: 1px solid rgba(11,42,85,.08);
  border-bottom: 1px solid rgba(11,42,85,.08);
}

/* grid */
.aw-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

/* card */
.aw-card{
  position: relative;
  display: block;
  text-decoration: none;
  color: #0b2a55;

  background: #fff;
  border: 2px solid rgba(11,42,85,.18);
  border-radius: 18px;

  padding: 18px 18px 20px;

  box-shadow:
    10px 10px 0 rgba(11,42,85,.18),
    0 18px 44px rgba(11,42,85,.10);

  transform: rotate(-.4deg);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* ばらつき（紙っぽさ） */
.aw-card:nth-child(2){ transform: rotate(.5deg); }
.aw-card:nth-child(3){ transform: rotate(-.2deg); }
.aw-card:nth-child(4){ transform: rotate(.8deg); }

@media (hover:hover){
  .aw-card:hover{
    transform: translate(-3px,-3px) rotate(0deg);
    box-shadow:
      14px 14px 0 rgba(11,42,85,.22),
      0 26px 60px rgba(11,42,85,.14);
    border-color: rgba(11,42,85,.32);
  }
}

/* tag */
.aw-tag{
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  margin-bottom: 10px;

  border-radius: 999px;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .14em;

  background: rgba(11,42,85,.06);
  border: 2px solid rgba(11,42,85,.22);
  color: #0b2a55;
}

/* title */
.aw-title{
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 1000;
  line-height: 1.45;
  letter-spacing: .01em;
}

/* text */
.aw-text{
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.7;
  font-weight: 800;
  color: rgba(11,42,85,.72);
}

/* link */
.aw-link{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .08em;
  color: #0b2a55;
  opacity: .9;
}

/* =========================
   Tablet
   ========================= */
@media (max-width: 1100px){
  .aw-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================
   Mobile: horizontal scroll
   ========================= */
@media (max-width: 680px){
  .aw-grid{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    padding: 6px 6px 10px;
  }

  .aw-card{
    flex: 0 0 auto;
    width: 84vw;
    max-width: 420px;
    scroll-snap-align: start;
    transform: none;
  }
}


/* =========================
   Trouble step area buttons fix
   ========================= */

/* ここに該当セクションのクラス名を当てる（例：.trouble-steps など） */
.trouble-steps .btn.btn-primary,
.trouble-steps a.btn.btn-primary{
  color: #fff !important;
}

/* 念のため：中にspan等があっても白 */
.trouble-steps .btn.btn-primary *{
  color: #fff !important;
}

/* ついでにゴーストも見やすく */
.trouble-steps .btn.btn-ghost,
.trouble-steps a.btn.btn-ghost{
  color: #0b2a55 !important;
}