@charset "UTF-8";

/* ==========================================================================
   WHO YOU CHOOSE - カウンセラー詳細ページ (detail/style.css)
   ・PCファースト: 基本スタイル = PC (Figma 1920px)。
     SP (768px未満: width < 768px) の差分のみ各ルール内に @media をネストして記述する
   ・可変値の clamp: 最小 = 1000px時 / 最大 = Figma 1920px時
     (1000px以下はソリッドレイアウトで横スクロール)
   ========================================================================== */

/* ==========================================================================
   1. CSS変数・リセット・基底スタイル
   ========================================================================== */
:root {
  --primary-teal: #2bb9ba;
  --primary-teal-dark: #007e94;
  --primary-teal-light: #e8f7f8;
  --primary-teal-border: #58ccd8;
  --accent-pink: #de4d80;
  --accent-pink-shadow: #be4670;
  --text-main: #333333;
  --text-sub: #666666;
  --bg-light: #f7fbfc;
  --font-main: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-en: "Outfit", "Open Sans", sans-serif;
  --counselor-mint: #56c6b4;
  --container-max: 1313px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* WebPフォールバック用の picture は箱を作らず、中の img を直接 flex / grid のアイテムにする */
.counselor-detail-main picture {
  display: contents;
}

/* picture を display: contents にすると source も grid のセルを占めるため消す（画像の選択には影響しない） */
.counselor-detail-main picture > source {
  display: none;
}

body:has(.counselor-detail-main) {
  font-family: var(--font-main);
  color: var(--text-main);
  background-color: #ffffff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* トップページ(smaryu.com)と同じソリッドレイアウト仕様:
     PC（768px以上）: 幅1000px以上は100%伸長、1000px以下は固定（横スクロール） */
  width: 100%;
  min-width: 1000px;

  @media (width < 768px) {
    min-width: unset;
    max-width: 100svw;
    overflow-x: hidden;
  }
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* パンくず: 一覧ページ（body に font-weight:500）と太さを揃える。
   指定しないと reset.css の body{font-weight:200} を継承して細くなる */
body:has(.counselor-detail-main) #BreadcrumbsPC {
  font-weight: 500;
}

/* サイト共通の reset.css が h1〜h6・p に text-align: left を直接指定しているため、親の指定を継承させる。
   :where() で詳細度をクラス1つ分に抑え、個別に text-align を書いた要素はそちらを優先させる */
.counselor-detail-main :where(h1, h2, h3, h4, h5, h6, p) {
  text-align: inherit;
}

/* 表示制御ユーティリティ */
.u-pc {
  display: block !important;

  @media (width < 768px) {
    display: none !important;
  }
}

.u-sp {
  display: none !important;

  @media (width < 768px) {
    display: block !important;
  }
}

/* ==========================================================================
   2. レイアウト・共通見出し
   ========================================================================== */
.counselor-detail-container {
  --container-padding: 20px;
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-padding) * 2);
  /* コンテンツ幅 + 左右padding分を広げ、中身の幅を保つ */
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.counselor-detail-section-head--center {
  text-align: center;
}

.counselor-detail-section-head__en {
  font-family: "Open Sans", var(--font-en), sans-serif;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 0.07em;
  /* PC: 4.2px / 60px */
  color: #3e3e3e;
  line-height: 1.1;
  text-transform: uppercase;

  @media (width < 768px) {
    font-size: 26px;
    letter-spacing: 0.05em;
    /* SP: 1.3px / 26px */
  }
}

.counselor-detail-section-head__ja {
  margin-top: 2px;
  font-family: var(--font-main);
  font-size: 22px;
  font-weight: 700;
  color: #3e3e3e;
  letter-spacing: 0.044em;
  /* PC: 0.968px / 22px */
  line-height: 1.4;

  @media (width < 768px) {
    font-size: 11px;
    letter-spacing: 0.02em;
    /* SP: 0.22px / 11px */
  }
}


/* ==========================================================================
   3. 留学相談ボタン (.c-btn-consult)
   ========================================================================== */
.c-btn-consult {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 531px;
  max-width: 100%;
  height: 70px;
  margin-inline: auto;
  border-radius: 3px;
  background-color: var(--accent-pink);
  box-shadow: 0 7px 0 var(--accent-pink-shadow);
  color: #fff;
  font-family: "Noto Sans JP", "Noto Sans", sans-serif;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 1.15px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  cursor: pointer;

  /* サイト共通の a:visited（文字色 #00a0bb）が優先されるため、訪問後も白のままにする */
  &:visited {
    color: #fff;
  }

  &:hover {
    /* サイト共通の a:hover（文字色 #777・下線）が優先されるため、ボタンの見た目を保つよう明示する */
    color: #fff;
    text-decoration: none;
    opacity: 0.95;
    transform: translateY(6px);
    box-shadow: 0 0 0 var(--accent-pink-shadow);

    @media (width < 768px) {
      transform: translateY(-2px);
      box-shadow: 0 6px 0 var(--accent-pink-shadow);
    }
  }

  &:active {
    transform: translateY(7px);
    box-shadow: none;

    @media (width < 768px) {
      transform: translateY(4px);
    }
  }

  @media (width < 768px) {
    width: 325px;
    height: 48px;
    box-shadow: 0 4px 0 var(--accent-pink-shadow);
    font-size: 15px;
    letter-spacing: 0.45px;
  }
}

/* 「LINEで相談予約」ラベル付き: ラベルをボタン上端の中央に重ねる */
.c-btn-consult--line {
  position: relative;
  /* ラベルと重ならないよう、ボタン文字を少し下げる（PC: 6.5px / SP: 4px） */
  padding-top: 13px;

  @media (width < 768px) {
    padding-top: 8px;
  }
}

.c-btn-consult__badge {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 333px;
  height: 39px;
  border: 2px solid var(--accent-pink);
  border-radius: 999px;
  background-color: #fff;
  color: #3e3e3e;
  font-size: 19px;
  letter-spacing: 0.14em;
  /* PC: 2.66px / 19px */
  padding-left: 0.14em;
  /* 末尾のletter-spacing分を相殺して中央揃え */

  @media (width < 768px) {
    width: 204px;
    height: 22px;
    border-width: 1.24px;
    gap: 6px;
    font-size: 12px;
    /* SP: 1.68px / 12px */
  }

  /* LINEアイコン（装飾）: 公式の .ai から書き出したベクターSVG なので、どの画面倍率でもぼやけない */
  &::before {
    content: "";
    width: 27px;
    height: 27px;
    background: url("../img/detail/icon-line.svg?v=20261029-02") no-repeat center / contain;

    @media (width < 768px) {
      width: 14px;
      height: 14px;
    }
  }
}

/* ==========================================================================
   4. ヒーロー / プロフィール詳細セクション
   ========================================================================== */
.counselor-detail-hero {
  position: relative;
  max-width: 1920px;
  margin-inline: auto;
  /* タイトルをパンくずの直下に置くため上の余白はなし */
  padding-top: 0;
  padding-bottom: 188px;
  overflow: hidden;
  background-color: rgba(220, 237, 239, 0.1965);

  & .counselor-detail-container {
    position: relative;
    z-index: 1;
    margin-block-start: 78px;

    @media (width < 768px) {
      margin-block-start: 59px;
    }
  }

  @media (width < 768px) {
    padding-top: 0;
    padding-bottom: 83px;
  }
}

.counselor-detail-hero__header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.counselor-detail-hero__title {
  color: #6eb2c6;
  font-size: clamp(68.75px, 6.875vw, 132px);
  font-family: "Open Sans", "Outfit", "Noto Sans JP", sans-serif;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  /* 一覧ページと同じく、文字の上端がパンくずのすぐ下に来るよう行の上下余白を詰める */
  line-height: 1;
  /* 文字サイズ（6.875vw）に比例: 1920pxで-24px、1000pxで-12.5px */
  margin-block-start: clamp(-24px, -1.25vw, -12.5px);
  text-align: center;

  @media (width < 768px) {
    /* 文字を画面幅いっぱいに広げる（文字列の幅 約14.53em → 100vw ÷ 14.53 ≒ 6.88vw、少し余裕をみて6.8vw） */
    font-size: 6.8vw;
    /* 左右の字間ぶんの余白をなくし、字面の端を画面端に合わせる */
    text-indent: 0;
    margin-inline-end: -0.4em;
    line-height: 1;
    margin-block-start: -2px;
  }
}

.counselor-detail-hero__subhead {
  margin-block-start: 44px;
  text-align: center;
  font-size: clamp(28px, 1.927vw, 37px);
  font-weight: 700;
  color: #333333;
  letter-spacing: 0.3em;
  /* PC: 11.1px / 37px */
  line-height: 1.5;

  @media (width < 768px) {
    margin-block-start: 15px;
    font-size: 14px;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
}

/* --- プロフィールカード --- */
.counselor-detail-profile-card {
  background-color: transparent;
}

.counselor-detail-profile-card__top {
  display: flex;
  flex-direction: row;
  gap: clamp(48.96px, 4.896vw, 94px);
  align-items: flex-start;

  /* SP: 写真とプロフィール情報を1列に並べ、order で Figma の並び順
     (タグ → キャッチ → 名前 → 写真スライダー → 本文) にする */
  @media (width < 768px) {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
}

/* 写真ビジュアルエリア */
.counselor-detail-profile-card__visual {
  --visual-width: clamp(466px, 32.552vw, 625px);
  flex: 0 0 var(--visual-width);
  width: var(--visual-width);
  max-width: 100%;

  /* SPは写真スライダー (.counselor-detail-profile-card__slider) に置き換える */
  @media (width < 768px) {
    display: none;
  }
}

.counselor-detail-profile-card__main-photo {
  border-radius: 0;
  overflow: hidden;
}

/* 写真は頭上の余白がそろっているため、上端を合わせて下をカットする */
.counselor-detail-profile-card__img-main {
  width: 100%;
  aspect-ratio: 624 / 363;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 0;
}

.counselor-detail-profile-card__sub-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;

  @media (width < 768px) {
    display: none;
  }
}

.counselor-detail-profile-card__img-sub {
  width: 100%;
  height: 100%;
  aspect-ratio: 308 / 179;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 0;
}

/* SP用 写真スライダー (Splide) */
.counselor-detail-profile-card__slider {
  display: none;

  @media (width < 768px) {
    display: block;
    order: 4;
    margin-top: 19px;
  }
}

.counselor-detail-profile-card__slider-img {
  display: block;
  width: 100%;
  aspect-ratio: 335 / 195;
  object-fit: cover;
  object-position: center top;
}

/* 縦長の全身写真は高さに合わせて中央に置き、左右をグレーの壁の背景で埋める
   ※ __img-sub / __slider-img の object-fit を上書きするため、両方より後に書く */
.counselor-detail-profile-card__img-full {
  object-fit: contain;
  background: url("../img/detail/profile-full-bg.webp") center / cover;
}

.counselor-detail-profile-card__slider-pagination {
  gap: 2px;
  margin-top: 14px;
}

.counselor-detail-profile-card__slider-page {
  display: block;
  width: 8px;
  height: 2px;
  padding: 0;
  border: none;
  background-color: #c8c8c8;
  cursor: pointer;

  &.is-active {
    background-color: #707070;
  }
}

/* プロフィール情報エリア */
.counselor-detail-profile-card__info {
  flex: 1;
  min-width: 0;

  /* SPは子要素を .counselor-detail-profile-card__top の並びに直接参加させる */
  @media (width < 768px) {
    display: contents;
  }
}

.counselor-detail-profile-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  list-style: none;
  margin-block-start: 22px;

  @media (width < 768px) {
    order: 1;
    gap: 8px;
    margin-block-start: 0;
    margin-bottom: 15px;
  }
}

.counselor-detail-profile-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-inline: 20px;
  background-color: var(--counselor-mint, #56c6b4);
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  border-radius: 9999px;
  white-space: nowrap;

  @media (width < 768px) {
    min-height: 21px;
    padding-inline: 12px;
    font-size: 10px;
    line-height: 1.2;
  }
}

.counselor-detail-profile-card__catch {
  border-left: 8px solid var(--counselor-mint, #56c6b4);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  color: #333333;
  letter-spacing: 0.04em;
  padding-left: 20px;
  margin-block-start: 34px;
  margin-inline-start: 8px;
  word-break: auto-phrase;

  @media (width < 768px) {
    order: 2;
    border-left-width: 4px;
    padding-left: 11px;
    font-size: 13px;
    line-height: 26px;
    letter-spacing: 0.05em;
    margin-block-start: 0;
    margin-inline-start: 0;
  }
}

.counselor-detail-profile-card__name {
  margin-top: 30px;
  font-size: 28px;
  font-weight: 700;
  color: #333333;
  line-height: 1.4;
  letter-spacing: 5px;

  @media (width < 768px) {
    order: 3;
    margin-top: 11px;
    font-size: 20px;
    letter-spacing: 0.05em;
  }
}

.counselor-detail-profile-card__bio {
  max-width: 530px;
  margin-top: 32px;
  font-size: 16px;
  /* Figma: Noto Sans Medium。reset.css の body{font-weight:200} を継承して細くなるため明示する */
  font-weight: 500;
  line-height: 2;
  color: #3e3e3e;
  letter-spacing: 0.04em;

  @media (width < 768px) {
    order: 5;
    max-width: 100%;
    margin-top: 26px;
    font-size: 12px;
    line-height: 20px;
    /* Figma SP: 0.242px（11pxに対して 0.022em） */
    letter-spacing: 0.022em;
  }
}

/* --- スペックテーブル (得意な国・プラン・実績) --- */
.counselor-detail-profile-card__specs {
  margin-block-start: 54px;

  @media (width < 768px) {
    margin-block-start: 34px;
  }
}

.counselor-detail-specs-table {
  display: flex;
  flex-direction: column;
  gap: 10px;

  @media (width < 768px) {
    gap: 3px;
  }
}

.counselor-detail-specs-table__row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 63px;

  @media (width < 768px) {
    min-height: 40px;
  }
}

.counselor-detail-specs-table__header {
  flex: 0 0 415px;
  width: 415px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background-color: var(--counselor-mint, #56c6b4);
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  /* 2.2px */
  text-align: center;

  /* PC幅の狭い画面 (1024px以下) では見出し列を縮める */
  @media (width <= 1024px) {
    flex: 0 0 300px;
    width: 300px;
    font-size: 20px;
  }

  @media (width < 768px) {
    flex: 0 0 153px;
    width: 153px;
    padding: 8px 5px;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1.3;
  }
}

.counselor-detail-specs-table__data {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 12px 32px;
  background-color: rgba(255, 255, 255, 0.91);
  color: #3e3e3e;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
  /* 0.8px */
  line-height: 1.5;

  @media (width <= 1024px) {
    padding: 12px 20px;
    font-size: 16px;
  }

  @media (width < 768px) {
    padding: 0 0 0 15px;
    background-color: transparent;
    font-size: 12px;
    line-height: 15px;
  }
}

.counselor-detail-profile-card__cta {
  text-align: center;
  margin-block-start: 105px;

  @media (width < 768px) {
    margin-block-start: 47px;
  }
}

/* ==========================================================================
   5. MOVIE セクション (カウンセラー紹介動画)
   ========================================================================== */
.counselor-detail-movie {
  position: relative;
  background: url("../img/detail/movie-bg.png") no-repeat center center / cover;
  padding: 132px 0 160px;
  overflow: hidden;

  @media (width < 768px) {
    padding: 52px 0 108px;
  }
}

.counselor-detail-movie__watermark {
  position: absolute;
  bottom: -0.106em;
  /* 1920px時 -14px。文字サイズに比例させ、どの幅でも同じ見切れ方にする */
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  width: max-content;
  /* 文字列が箱からはみ出して右側だけ切れないよう、文字幅の箱を中央配置する */
  text-align: center;
  font-family: "Open Sans", var(--font-en), sans-serif;
  font-size: clamp(68.75px, 6.875vw, 132px);
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  opacity: 0.72;
  letter-spacing: 0.4em;
  /* PC: 52.8px / 132px */
  padding-left: 0.4em;
  /* letter-spacing による右ズレを補正して完全中央配置 */
  pointer-events: none;
  white-space: nowrap;

  @media (width < 768px) {
    top: 3px;
    bottom: auto;
    /* 文字を画面幅いっぱいに広げる（Figmaでははみ出しているが、画面内に収める）。
       字面の幅 約14.53em → 100vw ÷ 14.53 ≒ 6.88vw、少し余裕をみて6.8vw。
       左右の字間ぶんの余白（padding-left と末尾の letter-spacing）は対称なので中央のまま */
    font-size: 6.8vw;
  }
}

.counselor-detail-movie__container {
  position: relative;
  z-index: 2;
}

.counselor-detail-movie__card {
  position: relative;
  display: block;
  width: 100%;
  max-width: 475px;
  margin: 0 auto;
  margin-block-start: 58px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  overflow: hidden;
  cursor: pointer;

  @media (width < 768px) {
    max-width: 335px;
    margin-block-start: 48px;
  }
}

.counselor-detail-movie__poster {
  width: 100%;
  height: auto;
  aspect-ratio: 475 / 775;
  object-fit: cover;
  display: block;

  @media (width < 768px) {
    aspect-ratio: 335 / 498;
  }
}

/* 再生アイコン（白い円 + 三角）
   中央だと顔に重なるカウンセラーがいるため、右下の角に置く */
.counselor-detail-movie__play {
  position: absolute;
  inset: auto 20px 20px auto;
  width: 80px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  transition: scale 0.2s;

  &::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 54%;
    translate: -50% -50%;
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent var(--primary-teal);
  }

  @media (width < 768px) {
    width: 64px;
  }
}

@media (hover: hover) {
  .counselor-detail-movie__card:hover .counselor-detail-movie__play {
    scale: 1.1;
  }
}

/* 動画ポップアップ: PCは画面に収まる最大サイズ、SPは幅75%で高さは動画なり */
.counselor-detail-movie__dialog {
  width: min(90vw, 90dvh * 9 / 16);
  max-width: none;
  max-height: none;
  /* 冒頭のリセット (margin: 0) で dialog 標準の中央寄せが消えるため戻す */
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;

  @media (width < 768px) {
    width: 75svw;
  }

  &::backdrop {
    background: rgb(0 0 0 / 0.8);
  }
}

.counselor-detail-movie__video {
  display: block;
  width: 100%;
  height: auto;
}

/* 閉じるボタン（動画の右上の外側に × を表示） */
.counselor-detail-movie__close {
  position: absolute;
  bottom: 100%;
  right: 0;
  width: 40px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;

  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 28px;
    height: 2px;
    background: #fff;
    translate: -50% -50%;
    rotate: 45deg;
  }

  &::after {
    rotate: -45deg;
  }
}

/* ==========================================================================
   6. CHARACTER セクション (コミュニケーションスタイル)
   ========================================================================== */
/* プロフィールカード内（スペック表と相談ボタンの間）に置く */
.counselor-detail-character {
  margin-block-start: 108px;

  @media (width < 768px) {
    margin-block-start: 71px;
  }
}

/* 見出しはほかのセクションより控えめにし、日本語（カウンセラー名入り）を主役にする */
.counselor-detail-character .counselor-detail-section-head__en {
  font-size: 20px;
  letter-spacing: 1em;
  line-height: 1;
  color: var(--counselor-mint, #56c6b4);
  opacity: 0.77;

  @media (width < 768px) {
    font-size: 11px;
    opacity: 1;
  }
}

.counselor-detail-character .counselor-detail-section-head__ja {
  margin-top: 18px;
  font-size: 25px;
  line-height: 42px;

  @media (width < 768px) {
    margin-top: 19px;
    font-size: 18px;
    letter-spacing: 0.1em;
    /* SP: 1.8px / 18px */
    line-height: 30px;
  }
}

.counselor-detail-character-gauges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 62px;
  row-gap: 65px;
  margin-top: 58px;

  @media (width < 768px) {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 44px;
  }
}

.counselor-detail-gauge {
  display: flex;
  flex-direction: column;
  width: 100%;

  /* SPはゲージの並び順を変更 */
  @media (width < 768px) {
    /* 感情的 〜 論理的 */
    &.counselor-detail-gauge--approach {
      order: 1;
    }

    /* 挑戦思考 〜 安定思考 */
    &.counselor-detail-gauge--mindset {
      order: 2;
    }

    /* 明るい 〜 落ち着いた */
    &.counselor-detail-gauge--vibe {
      order: 3;
    }

    /* 提案型 〜 傾聴型 */
    &.counselor-detail-gauge--proposal {
      order: 4;
    }

    /* フレンドリー 〜 フォーマル */
    &.counselor-detail-gauge--distance {
      order: 5;
    }
  }
}

.counselor-detail-gauge__track {
  position: relative;
  width: 100%;
  height: 22px;
  /* Figma（画像で配置）から実測: 両端は単色、約28%〜72%で色が変わる */
  background: linear-gradient(90deg, #b1e5e0 28%, #63cfd6 72%);
  border-radius: 9999px;

  @media (width < 768px) {
    height: 10px;
  }
}

.counselor-detail-gauge__thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  pointer-events: none;

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-color: #FFF8D1;
    border-radius: 50%;

    @media (width < 768px) {
      width: 8px;
      height: 8px;
    }
  }

  @media (width < 768px) {
    width: 11px;
    height: 11px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  }
}

.counselor-detail-gauge__labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 14px;

  @media (width < 768px) {
    margin-top: 6px;
  }
}

.counselor-detail-gauge__label {
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 500;
  color: #3e3e3e;
  letter-spacing: 0.044em;
  white-space: nowrap;

  @media (width < 768px) {
    font-size: 11px;
  }
}

/* ==========================================================================
   7. MESSAGE セクション (カウンセラーからのメッセージ)
   ========================================================================== */
.counselor-detail-message {
  position: relative;
  overflow: hidden;
  /* PCは 1920px 時の値を上限に、画面幅に合わせて縮める（ほかの clamp() と同じく 1000px 時の値が下限） */
  padding: clamp(157.29px, 15.729vw, 302px) 0 clamp(135.42px, 13.542vw, 260px);
  background-color: #ffffff;
  /* 白を重ねて画像を薄くする（白 92% = 画像の不透明度 8%）
     1つ目は image-set() 非対応ブラウザ用の PNG。対応ブラウザは2つ目で上書きし、WebP が読めなければ PNG を選ぶ */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
    url("../img/detail/melbourne-pc.png");
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
    image-set(url("../img/detail/melbourne-pc.webp") type("image/webp"), url("../img/detail/melbourne-pc.png") type("image/png"));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

  @media (width < 768px) {
    padding: 65px 0 79px;
    /* 白 85% = 画像の不透明度 15% */
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
      url("../img/detail/melbourne-sp.png");
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
      image-set(url("../img/detail/melbourne-sp.webp") type("image/webp"), url("../img/detail/melbourne-sp.png") type("image/png"));
  }
}

.counselor-detail-message__container {
  position: relative;
  z-index: 1;
}

/* --- 見出し --- */
.counselor-detail-message__head {
  text-align: center;
}

.counselor-detail-message__head-en {
  font-family: "Open Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.7em;
  /* PC: 15.4px / 22px */
  line-height: 30px;
  padding-left: 0.7em;
  color: var(--counselor-mint);

  @media (width < 768px) {
    font-size: 11px;
    letter-spacing: 0.07em;
    /* SP: 0.77px / 11px */
    line-height: 15px;
    padding-left: 0;
  }
}

.counselor-detail-message__head-ja {
  margin-top: 44px;
  font-family: var(--font-main);
  font-size: clamp(20.83px, 2.083vw, 40px);
  font-weight: 700;
  letter-spacing: 0.3em;
  /* PC: 12px / 40px */
  line-height: 59px;
  padding-left: 0.3em;
  color: #3e3e3e;

  @media (width < 768px) {
    margin-top: 24px;
    font-size: 18px;
    letter-spacing: 0.1em;
    /* SP: 1.8px / 18px */
    line-height: 35px;
    padding-left: 0;
  }
}

.counselor-detail-message__content {
  position: relative;
  margin-top: 86px;

  @media (width < 768px) {
    margin-top: 36px;
  }
}

/* --- メッセージ本文 --- */
.counselor-detail-message__body {
  /* 原稿の改行位置（1行最大40文字）で折り返さないよう、デザインの 743px より少し広げる */
  max-width: min(760px, 56vw);
  margin-inline: auto;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.046em;
  /* PC: 0.828px / 18px */
  line-height: 70px;
  color: #3e3e3e;
  text-align: center;

  /* 幅に収まらず折り返すときは、文節の区切りで折り返す（lang="ja" が必要） */
  & p {
    word-break: auto-phrase;
  }

  & p + p {
    margin-top: 70px;

    @media (width < 768px) {
      margin-top: 30px;
    }
  }

  @media (width < 768px) {
    max-width: 256px;
    font-size: 12px;
    letter-spacing: 0.026em;
    /* SP: 0.312px / 12px */
    line-height: 30px;
    word-break: keep-all;
    /* 幅に収まらない行は「。」の後で折り返し、単語の途中で改行しない */
    overflow-wrap: anywhere;
  }
}

/* --- PC用 装飾フォト --- */
.counselor-detail-message__photos-pc {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  @media (width < 768px) {
    display: none;
  }
}

.counselor-detail-message__photo {
  position: absolute;
  object-fit: cover;
}

/* 座標はFigma(1920px幅)基準の割合 */
.counselor-detail-message__photo--tr {
  top: 326px;
  left: 78.98%;
  /* 1574 / 1920 */
  width: 21.51%;
  /* 413 / 1920 */
  aspect-ratio: 413 / 275;
}

.counselor-detail-message__photo--ml {
  top: 796px;
  left: -3.18%;
  /* -61 / 1920 */
  width: 24.22%;
  /* 465 / 1920 */
  aspect-ratio: 465 / 310;
}

.counselor-detail-message__photo--br {
  top: 1028px;
  left: 78.96%;
  /* 1516 / 1920 */
  width: 24.22%;
  aspect-ratio: 465 / 310;
}

/* --- SP用 フォトグリッド (2x2) --- */
.counselor-detail-message__photos-sp {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 7px 8px;
  max-width: 335px;
  margin: 40px auto 0;

  @media (width < 768px) {
    display: grid;
  }
}

.counselor-detail-message__grid-img {
  width: 100%;
  aspect-ratio: 163 / 109;
  object-fit: cover;
}

/* --- メッセージ下部ミニCTA --- */
.counselor-detail-message__cta {
  margin-top: 51px;
  text-align: center;

  @media (width < 768px) {
    margin-top: 33px;
  }
}

.counselor-detail-message__cta-line {
  width: 1px;
  height: 50px;
  margin-inline: auto;
  background-color: #3e3e3e;

  @media (width < 768px) {
    height: 24px;
  }
}

.counselor-detail-message__cta-watermark {
  margin-top: 81px;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1em;
  /* PC: 20px / 20px */
  line-height: 28px;
  padding-left: 1em;
  /* 末尾のletter-spacing分を相殺して中央揃え */
  color: var(--counselor-mint);
  opacity: 0.77;
  text-transform: uppercase;

  @media (width < 768px) {
    margin-top: 41px;
    font-size: 10px;
    /* SP: 10px / 10px */
    line-height: 14px;
    color: #469db8;
  }
}

.counselor-detail-message__cta-sub {
  margin-top: 28px;
  /* ボタン上端までの距離（上に重なる「LINEで相談予約」ラベル分を含む） */
  margin-bottom: 81px;
  font-size: clamp(14.58px, 1.458vw, 28px);
  font-weight: 700;
  letter-spacing: 0.3em;
  /* PC: 8.4px / 28px */
  line-height: 46px;
  padding-left: 0.3em;
  color: #3e3e3e;

  @media (width < 768px) {
    margin-top: 17px;
    margin-bottom: 33px;
    font-size: 14px;
    letter-spacing: 0.07em;
    /* SP: 0.98px / 14px */
    line-height: 18px;
    padding-left: 0;
  }
}

/* ==========================================================================
   8. REVIEWS セクション (実績・お客様の声)
   ========================================================================== */
.counselor-detail-reviews {
  position: relative;
  overflow: hidden;
  padding: 127px 0 118px;
  background-color: #ffffff;
  background-image: url("../img/detail/reviews-bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;

  @media (width < 768px) {
    padding: 53px 0 185px;
    background-position: center 119px;
    background-size: auto 698px;
  }
}

/* --- 見出し --- */
.counselor-detail-reviews__head {
  text-align: center;
}

.counselor-detail-reviews__head-en {
  font-family: "Open Sans", sans-serif;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 0.07em;
  /* PC: 4.2px / 60px */
  line-height: 66px;
  color: #3e3e3e;

  @media (width < 768px) {
    font-size: 26px;
    /* SP: 1.82px / 26px */
    line-height: 30px;
  }
}

.counselor-detail-reviews__head-ja {
  margin-top: 2px;
  font-family: var(--font-main);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.044em;
  /* PC: 0.968px / 22px */
  line-height: 30px;
  color: #3e3e3e;

  @media (width < 768px) {
    margin-top: 5px;
    font-size: 11px;
    /* SP: 0.484px / 11px */
    line-height: 16px;
  }
}

/* --- 3つの実績指標カード --- */
.counselor-detail-reviews__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1302px;
  margin: 88px auto 0;

  @media (width < 768px) {
    gap: 4px;
    max-width: 332px;
    margin-top: 30px;
  }
}

.counselor-detail-stat-card {
  padding: 46px 0 34px;
  border-top: 10px solid var(--counselor-mint);
  background-color: #ffffff;
  text-align: center;

  @media (width < 768px) {
    padding: 13px 0 10px;
    border-top-width: 6px;
  }
}

.counselor-detail-stat-card__title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.05em;
  /* PC: 1.05px / 21px */
  line-height: 29px;
  color: #3e3e3e;
  white-space: nowrap;

  @media (width < 768px) {
    font-size: 10px;
    /* SP: 0.5px / 10px */
    line-height: 14px;
  }
}

.counselor-detail-stat-card__num {
  margin-top: 6px;
  font-family: "Open Sans", sans-serif;
  font-size: 55px;
  font-weight: 600;
  letter-spacing: 0.05em;
  /* PC: 2.75px / 55px */
  line-height: 66px;
  color: var(--counselor-mint);

  @media (width < 768px) {
    font-size: 20px;
    /* SP: 1px / 20px */
    line-height: 24px;
  }
}

/* --- レビュー カルーセル (Splide) --- */
/* PC: 3枚が画面内に収まるよう左右に余白を取り、はみ出したカードはトラックで隠す */
.counselor-detail-reviews__carousel {
  position: relative;
  max-width: 1920px;
  margin: 87px auto 0;
  padding-inline: clamp(15.62px, 1.562vw, 30px);

  & .splide__slide {
    display: flex;
  }

  @media (width < 768px) {
    max-width: none;
    margin-top: 21px;
    padding-inline: 0;
  }
}

/*
 * レビューカード
 * PC: 写真・余白はカード幅(cqi)基準 (Figmaのカード幅635pxに対する比率)。
 *     国旗は画面幅基準の clamp (最小: 1000px時 / 最大: Figma 1920px時)、文字サイズはFigmaの固定値
 */
.counselor-detail-review-card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #ffffff;

  @media (width < 768px) {
    container-type: normal;
  }
}

.counselor-detail-review-card__header {
  display: flex;
  align-items: flex-start;
}

.counselor-detail-review-card__photo {
  flex-shrink: 0;
  width: 44.9cqi;
  /* 285 / 635 */
  height: auto;
  aspect-ratio: 285 / 190;
  object-fit: cover;

  @media (width < 768px) {
    width: 149px;
    height: 100px;
    aspect-ratio: auto;
  }
}

.counselor-detail-review-card__meta {
  min-width: 0;
  padding: 6.3cqi 0 0 4.6cqi;
  /* 40 / 635, 29 / 635 */

  @media (width < 768px) {
    padding: 16px 0 0 14px;
  }
}

.counselor-detail-review-card__flag {
  display: block;
  width: clamp(25.52px, 2.552vw, 49px);
  height: auto;

  @media (width < 768px) {
    width: 34px;
    height: 22px;
  }
}

.counselor-detail-review-card__plan {
  margin-top: 3.6cqi;
  margin-left: -0.9cqi;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.044em;
  /* PC: 0.88px / 20px */
  line-height: 1.4;
  color: #3e3e3e;
  word-break: keep-all;
  /* 狭いカードでは「/」の位置で折り返す */

  @media (width < 768px) {
    margin-top: 10px;
    margin-left: -2px;
    font-size: 11px;
    /* SP: 0.484px / 11px */
    line-height: 15px;
    word-break: normal;
  }
}

.counselor-detail-review-card__name {
  margin-top: 2cqi;
  margin-left: -0.6cqi;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.05em;
  /* PC: 1.5px / 30px */
  line-height: 1.4;
  color: #3e3e3e;

  @media (width < 768px) {
    margin-top: 10px;
    margin-left: -2px;
    font-size: 17px;
    font-weight: 700;
    /* SP: 0.85px / 17px */
    line-height: 24px;
  }
}

.counselor-detail-review-card__text {
  padding: 5.7cqi 6.8cqi 0 7.1cqi;
  /* 36 / 635, 43 / 635, 45 / 635 */
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.044em;
  /* PC: 0.792px / 18px */
  line-height: 2.5;
  /* 45 / 18 */
  color: #3e3e3e;

  @media (width < 768px) {
    padding: 16px 28px 0 26px;
    font-size: 10px;
    /* SP: 0.44px / 10px */
    line-height: 24px;
  }
}

.counselor-detail-review-card__date {
  display: block;
  margin-top: auto;
  padding: 3.1cqi 7.1cqi 11.3cqi;
  /* 20 / 635, 45 / 635, 72 / 635 */
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.044em;
  /* PC: 0.792px / 18px */
  line-height: 1.4;
  color: #3e3e3e;

  @media (width < 768px) {
    padding: 12px 20px 31px;
    font-size: 11px;
    /* SP: 0.484px / 11px */
    line-height: 15px;
  }
}

/* --- 矢印 --- */
.counselor-detail-reviews__arrow {
  --arrow-size: clamp(29.17px, 2.917vw, 56px);
  /* 1920px幅で56px */
  --pagination-space: 71px;
  /* ページネーションの上余白 + 高さ */
  position: absolute;
  bottom: calc(var(--pagination-space) - var(--arrow-size) / 2);
  /* カード下端に矢印の半分が重なる位置 */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--arrow-size);
  height: var(--arrow-size);
  padding: 0;
  border: none;
  background-color: rgba(62, 62, 62, 0.7);
  cursor: pointer;
  transition: opacity 0.2s ease;

  & svg {
    width: 57%;
    /* 32 / 56 */
    height: auto;

    @media (width < 768px) {
      width: 15px;
    }
  }

  &:hover {
    opacity: 0.8;
  }

  @media (width < 768px) {
    --arrow-size: 26px;
    --pagination-space: 41px;
  }
}

/* 1920px幅で左右104px */
.counselor-detail-reviews__arrow--prev {
  left: 5.4%;

  @media (width < 768px) {
    left: 27px;
  }
}

.counselor-detail-reviews__arrow--next {
  right: 5.4%;

  @media (width < 768px) {
    right: 27px;
  }
}

/* --- ページネーション --- */
.counselor-detail-reviews__pagination {
  gap: 8px;
  margin-top: 68px;

  @media (width < 768px) {
    gap: 5px;
    margin-top: 38px;
  }
}

.counselor-detail-reviews__page {
  display: block;
  width: 16px;
  height: 3px;
  padding: 0;
  border: none;
  background-color: #ffffff;
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;

  &.is-active {
    background-color: var(--counselor-mint);
  }

  /* SPは非アクティブを短く、アクティブのみ16px */
  @media (width < 768px) {
    width: 11px;

    &.is-active {
      width: 16px;
    }
  }
}

/* ==========================================================================
   フローティングCTA (.counselor-detail-float)
   ・マークアップは footer-smaryu.php。表示/非表示はサイト共通の Float.js が
     .js-float に .is-show を付け外しする（共通の .p-float と同じ挙動）
   ・高さ: PC 160px / SP 98px（Figma）
   ========================================================================== */
.counselor-detail-float {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 200;
  padding-block: 50px 40px;
  background-color: rgb(0 0 0 / 0.7);
  translate: 0 100%;
  transition: translate 0.3s;

  &.is-show {
    translate: 0 0;
  }

  @media (width < 768px) {
    padding-block: 28px 22px;
  }
}

/* フローティングCTAの表示中は、Cookie 同意バナーをその上へ逃がす
   （共通CSSは .p-float の高さ分しか上げないため、このページのCTAの高さで上書き） */
body:has(.counselor-detail-float) .p-cookie-consent.on-cta2 {
  transform: translateY(-160px);

  @media (width < 768px) {
    transform: translateY(-98px);
  }
}

/* ==========================================================================
   共通フッターの調整（このページのみ）
   ========================================================================== */
/* header.css が nav に白背景を指定しているため打ち消し、親の .p-footer-nav（#f2f2f2）の背景を見せる */
.p-footer-nav__wrap {
  background: none;
}

/* SPで base.css の img{width:100%} と、このCSSの img{height:auto} が重なりPマークが巨大化するため、
   HTMLのwidth属性と同じ62pxを指定する（width:auto だと画像本来の500pxに戻ってしまう） */
.p-footer__pmark img {
  width: 62px;
}