@charset "utf-8";

/* ============================================
   フェードインアニメーション（スクロール連動）
   ============================================ */

/* 初期状態：透明・少し下にオフセット */
.js-fadein {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

/* 表示状態 */
.js-fadein.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ディレイ付きフェードイン（汎用） */
.js-fadein-delay {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.5s ease var(--fadein-delay, 0s),
    transform 0.5s ease var(--fadein-delay, 0s);
}

/* 表示状態（JS で .is-visible を付与） */
.js-fadein-delay.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================
   ヒーローセクション
   ============================================ */

/* ヒーローセクション外枠 */
.hero {
  /* ヘッダーと隙間なく配置 */
  line-height: 0;
}

/* slick スライダーのラッパー */
.hero__slider {
  width: 100%;
}

/* 各スライド */
.hero__slide {
  width: 100%;
  line-height: 0;
}

/* スライド内の画像：全幅・縦横比を維持 */
.hero__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}


/* ============================================
   ショートナビゲーション
   ヒーロー直下の4項目メニュー
   ============================================ */

/* ナビ外枠：黒背景 */
.short-nav {
  background-color: var(--c-black);
}

/* 4カラムグリッド */
.short-nav__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}

/* 各アイテム：右に区切り線（最後は除く） */
.short-nav__item {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.short-nav__item:last-child {
  border-right: none;
}

/* リンク：縦中央揃えで上下パディング */
.short-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 0;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

.short-nav__link:hover {
  background-color: rgb(255, 255, 255, .2);
}

/* 日本語テキスト */
.short-nav__ja {
  display: block;
  font-size: clamp(1.25rem, 2.3vw, 1.3rem);
  color: var(--c-white);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* 英語テキスト（サブテキスト） */
.short-nav__en {
  display: block;
  font-size: clamp(1rem, 2.1vw, 1.2rem);
  color: var(--c-red);
  /* 明るい赤でアクセント */
  line-height: 1.2;
  letter-spacing: 0.08em;
}

/* ============================================
   メッセージセクション
   ロゴ中央・キャッチコピー
   ============================================ */

/* セクション外枠：白背景 */
.message {
  background-color: var(--c-white);
  padding: 48px 0 24px;
  text-align: center;
}

/* ロゴ画像 */
.message__logo-img {
  height: 132px;
  width: auto;
  display: block;
  margin-inline: auto;
  margin-bottom: 24px;
}

/* キャッチコピー */
.message__catch {
  font-size: clamp(3.4rem, 6.1vw, 4rem);
  font-weight: 700;
  color: var(--c-main);
  /* メインカラー（深紅） */
  line-height: 1.5;
}


/* ============================================
   トピックスセクション
   ============================================ */

/* ニュースリスト */
.topics__list {
  list-style: none;
  margin-top: 0;
  /* sec-titleのborder-bottomと接する */
}

/* 各ニュースアイテム：下ボーダーで区切り */
.topics__item {
  border-bottom: 1px solid var(--c-border);
}

/* リンク全体をクリック領域に */
.topics__link {
  display: block;
  padding: 16px 8px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.topics__link:hover {
  opacity: 0.7;
}

/* 投稿日時 */
.topics__date {
  display: block;
  font-size: clamp(1.3rem, 2.5vw, 1.4rem);
  margin-bottom: 4px;
}

/* 投稿タイトル */
.topics__title {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  font-weight: 400;
  line-height: 1.6;
}

/* 現在ページ表示（無限スクロール用・各一覧ページ共通） */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  margin-top: 48px;
}

/* ============================================
   ランキングセクション
   ============================================ */

.ranking {
  padding-bottom: 24px;
}

/* ---- タブ ---- */

/* タブ行：flex・タブ間に1px空き */
.ranking__tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 0;
}

/* 各タブボタン */
.ranking__tab {
  flex: 1;
  /* 均等幅 */
  padding: 8px 0;
  background: none;
  border: none;
  /* 非アクティブ：1px下ボーダー */
  border-bottom: 2px solid var(--c-border);
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s ease, border-width 0.2s ease;
}

/* アクティブタブ：2px下ボーダー＋メインカラー＋太字 */
.ranking__tab.is-active {
  border-bottom: 2px solid var(--c-main);
  font-weight: 700;
}

/* ---- タブパネル ---- */

/* 非アクティブパネルは非表示 */
.ranking__panel {
  display: none;
}

/* アクティブパネルのみ表示 */
.ranking__panel.is-active {
  display: block;
}

/* ---- ランキングリスト ---- */

.ranking__list {
  list-style: none;
}

/* 各ランキングアイテム：写真左・テキスト右の横並び */
.ranking__item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
}


/* ---- 写真エリア ---- */

/* 写真ラッパー：幅50%固定 */
.ranking__photo-wrap {
  flex: 0 0 50%;
  overflow: hidden;
}

/* 写真：縦横比 4:5（ポートレート） */
.ranking__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* ---- テキストエリア ---- */

.ranking__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 8px;
  gap: 4px;
}

/* ランキング番号（Instrument Serif・アクセントカラー） */
.ranking__num {
  font-family: var(--f-title);
  font-size: clamp(6.4rem, 12.1vw, 6.8rem);
  color: var(--c-accent);
  line-height: 1;
  font-weight: 400;
}

/* キャスト名 */
.ranking__name {
  font-size: clamp(2.4rem, 5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.4;
}

/* 年齢・身長 */
.ranking__detail {
  font-size: clamp(1.4rem, 2.9vw, 1.6rem);
  line-height: 1.4;
}

/* キャッチコピー */
.ranking__catch {
  font-size: clamp(1.3rem, 2.5vw, 1.4rem);
  color: var(--c-red);
  line-height: 1.4;
}

/* ============================================
   ポイントランキングセクション
   タブ（Daily / Monthly / Yearly）＋ 10位リスト
   ============================================ */


/* ---- タブ ---- */

/* タブ行：flex・均等3列 */
.point-ranking__tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 0;
}

/* 各タブボタン */
.point-ranking__tab {
  flex: 1;
  padding: 8px 0;
  background: none;
  border: none;
  border-bottom: 2px solid var(--c-border);
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s ease;
  color: var(--c-text);
}

/* アクティブタブ：メインカラー下ボーダー */
.point-ranking__tab.is-active {
  border-bottom: 2px solid var(--c-main);
}

/* ---- タブパネル ---- */

/* 非アクティブパネルは非表示 */
.point-ranking__panel {
  display: none;
}

/* アクティブパネルのみ表示 */
.point-ranking__panel.is-active {
  display: block;
}

/* ---- ランキングリスト ---- */

.point-ranking__list {
  list-style: none;
}

/* 各アイテム行：左からトレンドアイコン・順位・写真・名前+ポイント */
.point-ranking__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-border);
}

.point-ranking__item:first-child {
  border-top: 1px solid var(--c-border);
}

/* ---- トレンドアイコン（矢印 or NEW） ---- */

/* アイコンラッパー：幅固定・中央揃え */
.point-ranking__trend {
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 矢印アイコン（上昇・下降）：縦長 14×19px ベース */
.point-ranking__trend-icon--arrow {
  width: 12px;
  height: auto;
  display: block;
}

/* NEWアイコン：横長 36×13px ベース */
.point-ranking__trend-icon--new {
  width: 32px;
  height: auto;
  display: block;
}

/* ---- 順位番号 ---- */

.point-ranking__rank {
  flex: 0 0 24px;
  font-size: clamp(2.4rem, 4.6vw, 2.6rem);
  font-weight: 700;
  text-align: center;
  line-height: 1;
  color: var(--c-text);
}

/* ---- 写真（正方形トリミング） ---- */

/* 写真ラッパー：64×64px 固定・正方形 */
.point-ranking__photo-wrap {
  display: block;
  /* a タグになったため明示的にブロック化 */
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  overflow: hidden;
}

/* 写真：正方形にトリミング */
.point-ranking__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* ---- 名前・ポイント ---- */

.point-ranking__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* キャスト名 */
.point-ranking__name {
  font-size: clamp(2.4rem, 4.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ポイント数値 */
.point-ranking__point {
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  line-height: 1.3;
}

/* ============================================
   即メンセクション
   黒背景・slick centerMode スライダー
   ============================================ */

/* セクション外枠：黒背景 */
.sokumen {
  background-color: var(--c-black);
  padding: 32px 0 40px;
  overflow: hidden;
  /* centerModeのはみ出し制御 */
  margin-bottom: 48px;
}

/* タイトルエリア（スライダーと別に横パディングを確保） */
.sokumen__head {
  padding-inline: 16px;
  max-width: var(--max-width);
  margin-inline: auto;
}

/* sec-title を黒背景用に上書き */
.sokumen .sec-title {
  border-bottom-color: var(--c-main);
  margin-bottom: 24px;
}

.sokumen .sec-title__en {
  color: var(--c-white);
}

.sokumen .sec-title__ja {
  color: var(--c-white);
}

/* ---- スライダー ---- */

/* スライダーラッパー（全幅・パディングなし） */
.sokumen__slider {
  width: 100%;
}

/* 各スライドの外枠 */
.sokumen__slide {
  padding-inline: 4px;
  /* スライド間の隙間 */
}

/* 写真カード（オーバーレイ用に relative） */
.sokumen__card {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

/* 写真 */
.sokumen__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* 非アクティブスライドに黒オーバーレイ */
.sokumen__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* アクティブ（中央）スライドはオーバーレイ非表示 */
.slick-center .sokumen__card::after {
  opacity: 0;
}

/* ---- テキスト情報 ---- */

/* 非アクティブスライドのテキストは非表示 */
.sokumen__info {
  text-align: center;
  padding-top: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* アクティブスライドのみ表示 */
.slick-center .sokumen__info {
  opacity: 1;
}

/* キャスト名 */
.sokumen__name {
  font-size: clamp(2.4rem, 4.6vw, 2.6rem);
  font-weight: 700;
  color: var(--c-white);
  line-height: 1.4;
  margin-bottom: 8px;
}

/* 年齢・身長 */
.sokumen__detail {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  color: var(--c-white);
  line-height: 1.4;
  margin-bottom: 8px;
}

/* キャッチコピー */
.sokumen__catch {
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  color: var(--c-red);
  line-height: 1.4;
}

/* ---- slick ドットのカスタム（黒背景用） ---- */

.sokumen__slider .slick-dots {
  position: static;
  /* 絶対配置ではなく通常フローに */
  padding-top: 24px;
}

.sokumen__slider .slick-dots li button::before {
  color: var(--c-white);
  opacity: 0.4;
  font-size: 8px;
}

.sokumen__slider .slick-dots li.slick-active button::before {
  color: var(--c-main);
  opacity: 1;
}

/* ============================================
   DIARYセクション
   写メ日記一覧（写真左・テキスト右）
   ============================================ */


/* 日記リスト */
.diary__list {
  display: flex;
  flex-direction: column;
}

/* 各日記アイテム：写真左・テキスト右の横並び */
.diary__item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-border);
}

.diary__item:first-child {
  /* border-top: 1px solid var(--c-border); */
}

/* 写真リンク：正方形サムネイル */
.diary__photo-link {
  display: block;
  flex-shrink: 0;
  width: 120px;
  transition: opacity 0.2s ease;
}

.diary__photo-link:hover {
  opacity: 0.8;
}

/* サムネイル画像：正方形・トリミング */
.diary__img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* テキストエリア */
.diary__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* gap: 4px; */
  min-width: 0;
  /* テキストのはみ出し防止 */
}

/* 投稿日時 */
.diary__date {
  display: block;
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  line-height: 1.4;
}

/* 日記タイトル（リンク） */
.diary__title {
  display: block;
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  /* 標準プロパティ（互換性確保） */
  transition: color 0.2s ease;
}

.diary__title:hover {
  color: var(--c-main);
}

/* 名前・年齢（横並び） */
.diary__meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

/* 名前リンク */
.diary__name {
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  text-decoration: none;
  transition: color 0.2s ease;
}

.diary__name:hover {
  color: var(--c-main);
}

/* 年齢 */
.diary__age {
  font-size: clamp(1.3rem, 2.5vw, 1.4rem);
}

/* いいね数（ハートアイコン＋数字） */
.diary__like {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  font-weight: 700;
  margin-top: auto;
}

/* ハートアイコン */
.diary__heart {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}
.favo_icon {
  cursor: pointer;
}

/* ============================================
   NEW FACEセクション
   新人セラピスト一覧（todaysカード流用・出勤時間なし）
   ============================================ */



/* ============================================
   本日の出勤セクション
   詳細検索アコーディオン・ソート・2列キャスト一覧
   ============================================ */


/* ---- こだわり検索ボタン ---- */

/* トリガーボタン：全幅・メインカラー・テキスト中央 */
.therapist__search-trigger {
  position: relative;
  width: 100%;
  padding: 4px;
  background-color: var(--c-main);
  color: var(--c-white);
  font-size: clamp(1.3rem, 2.7vw, 1.5rem);
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-align: center;
  margin-bottom: 16px;
  border-radius: 50vmax;
  transition: opacity 0.2s ease;
}


/* ＋／－アイコン：右端に絶対配置・2文字を重ねてフェード切り替え */
.therapist__search-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0;
  /* 実テキストは非表示 */
}

/* ::before（＋）と ::after（－）を重ねて配置 */
.therapist__search-icon::before,
.therapist__search-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  line-height: 1;
  transition: opacity 0.25s ease;
}

/* 閉じているとき：＋を表示・－を非表示 */
.therapist__search-icon::before {
  content: '＋';
  opacity: 1;
}

.therapist__search-icon::after {
  content: '－';
  opacity: 0;
}

/* 開いているとき：＋を非表示・－を表示（クロスフェード） */
.therapist__search-trigger[aria-expanded="true"] .therapist__search-icon::before {
  opacity: 0;
}

.therapist__search-trigger[aria-expanded="true"] .therapist__search-icon::after {
  opacity: 1;
}

/* アコーディオン本体：白背景 */
.therapist__search-body {
  padding: 32px 16px;
  background-color: var(--c-white);
  margin-bottom: 24px;
  border: 2px solid var(--c-main);
}

/* hidden属性で非表示（JSで付け外し） */
.therapist__search-body[hidden] {
  display: none;
}

/* ============================================
   こだわり検索フィルター
   ============================================ */

/* 各フィルターグループ：下ボーダーで区切り */
.search-filter__group {
  padding: 24px 0;
  border-bottom: 1px solid var(--c-border);
}

.search-filter__group:first-child {
  padding-top: 0;
}

/* フィルターラベル（太字） */
.search-filter__label {
  display: block;
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  font-weight: 700;
  margin-bottom: 8px;
}

/* フィルターアイテム群：flex で折り返し */
.search-filter__items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

/* 各フィルターボタン：テキストのみ */
.search-filter__btn {
  background: none;
  border: none;
  padding: 0;
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  font-weight: 400;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* ホバー・選択時：メインカラー */
.search-filter__btn:hover,
.search-filter__btn.is-active {
  color: var(--c-main);
}

/* 検索実行ボタン：sec-more__link と同サイズ・中央寄せ */
.search-filter__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  height: 64px;
  margin-top: 24px;
  margin-inline: auto;
  background-color: var(--c-main);
  color: var(--c-white);
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  font-weight: 400;
  border: none;
  border-radius: 50vmax;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.search-filter__submit:hover {
  opacity: 0.85;
}

/* hidden属性で非表示（JSで付け外し） */
.therapist__search-body[hidden] {
  display: none;
}

/* ---- 店舗セレクトボックス（共通） ---- */

/* セレクト本体：黒罫線・中央テキスト・右端に▼ */
.store-select,
.day-select {
  width: 100%;
  padding: 8px 40px 8px 16px;
  border: 1px solid var(--c-black);
  background-color: var(--c-white);
  appearance: none;
  -webkit-appearance: none;
  font-size: clamp(2rem, 4.3vw, 2.4rem);
  font-weight: 700;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
  /* ▼ アイコン */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  margin-bottom: 16px;
}

/* ---- ソートボタン（共通） ---- */

/* ソートラッパー */
.sort {
  margin-bottom: 16px;
}

/* ソートリスト：3列グリッド */
.sort__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: var(--c-bg-gray);
  gap: 12px 0;
  padding: 8px 0;
}

/* 各 li：右ボーダーでセパレーター */
.sort__list li {
  border-right: 1px solid var(--c-border);
}

/* 各行の最後（3・6番目）：右ボーダーなし */
.sort__list li:nth-child(3n) {
  border-right: none;
}

/* 最終行（4〜6番目）：下ボーダーなし */
.sort__list li:nth-last-child(-n+3) {
  border-bottom: none;
}

/* 各ソートボタン：テキストのみ・中央揃え */
.sort__btn {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  font-size: clamp(1.3rem, 2.5vw, 1.4rem);
  font-weight: 400;
  cursor: pointer;
  text-align: center;
  transition: color 0.2s ease;
}

/* アクティブ：メインカラー・太字 */
.sort__btn.is-active {
  color: var(--c-main);
  font-weight: 700;
}

/* ---- セラピスト一覧（2列グリッド） ---- */

.todays__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 8px;
}

/* リンク：カード全体をクリック領域に */
.todays__link {
  display: block;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.todays__link:hover {
  opacity: 0.8;
}

/* 写真ラッパー（バッジ配置の基準） */
.todays__photo-wrap {
  position: relative;
}

/* 写真：縦横比 3:4 */
.todays__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Noバッジ（写真左上・アクセントカラー） */
.todays__badge {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 4px 12px;
  background-color: var(--c-main);
  color: var(--c-white);
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
}

/* 出勤時間 */
.todays__time {
  font-size: clamp(1.6rem, 3.2vw, 1.8rem);
  font-weight: 700;
  color: var(--c-white);
  background-color: var(--c-dark);
  text-align: center;
  line-height: 1.4;
  padding: 8px 0;
  margin-bottom: 8px;
}

/* キャスト名 */
.todays__name {
  font-size: clamp(2.4rem, 4.6vw, 2.6rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 8px;
}

/* 年齢・身長 */
.todays__detail {
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  text-align: center;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 4px;
}

/* キャッチコピー */
.todays__catch {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  color: var(--c-red);
  line-height: 1.4;
  text-align: center;
}

/* ============================================
   スケジュールページ：セラピスト一覧（1列）
   ============================================ */

/* リスト */
.schedule__list {
  list-style: none;
}

/* 各アイテム：ボーダーで囲んだカード・カード間に余白 */
.schedule__item {
  margin-top: 40px;
  overflow: hidden;
}

.schedule__item:first-child {
  margin-top: 0;
}

/* カードリンク（上段）：写真左・テキスト右の横並び */
.schedule__card {
  display: flex;
  gap: 8px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.schedule__card:hover {
  opacity: 0.8;
}

/* ---- 写真エリア ---- */

/* 写真ラッパー：幅40%固定・Noバッジ配置の基準 */
.schedule__photo-wrap {
  position: relative;
  flex: 0 0 48%;
}

/* 写真：縦横比 3:4 */
.schedule__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Noバッジ（写真左上） */
.schedule__badge {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 4px 12px;
  background-color: var(--c-main);
  color: var(--c-white);
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
}

/* ---- テキストエリア ---- */

.schedule__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-top: 4px;
}

/* 名前 */
.schedule__name {
  font-size: clamp(2.4rem, 4.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.3;
}

/* 年齢・身長 */
.schedule__detail {
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  line-height: 1.4;
}

/* 口コミ件数 */
.schedule__review {
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  line-height: 1.4;
}

/* キャッチコピー */
.schedule__catch {
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  color: var(--c-red);
  line-height: 1.4;
}

/* 出勤時間：グレー背景・中央揃え */
.schedule__time {
  font-size: clamp(1.8rem, 3.6vw, 2rem);
  font-weight: 700;
  background-color: var(--c-bg-gray);
  text-align: center;
  padding: 6px 0;
  line-height: 1.4;
  margin-top: 12px;
}

/* 特色タグリスト */
.schedule__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  list-style: none;
  margin-top: 12px;
}

/* 各タグ：ゴールドのアウトライン pill */
.schedule__tag {
  font-size: 1.3rem;
  color: var(--c-white);
  background-color: var(--c-accent);
  padding: 1px 8px;
  border-radius: 4px;
  line-height: 1.6;
  white-space: nowrap;
}

/* ---- 出勤情報エリア（下段） ---- */
.schedule__times {
  padding-top: 16px;
}

/* 出勤時間ヘッダー：ダーク背景・白テキスト */
.schedule__times-head {
  background-color: var(--c-dark);
  color: var(--c-white);
  font-size: clamp(2.0rem, 3.9vw, 2.2rem);
  font-weight: 700;
  text-align: center;
  padding: 8px 12px;
  line-height: 1.4;
}

/* 時間帯リスト */
.schedule__slots {
  list-style: none;
  border: 1px solid var(--c-border);
}

/* 各時間帯行：時間（左）＋ステータス（右） */
.schedule__slot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
  font-weight: 700;
}

.schedule__slot:last-child {
  border-bottom: none;
}

/* 時間帯テキスト */
.schedule__slot-time {
  color: var(--c-text);
  font-size: clamp(1.8rem, 3.6vw, 2.0rem);
}

/* ステータス：空き時間（ネイビー）・a タグなので下線なし */
.schedule__slot-status--open {
  color: #3F92FF;
  text-decoration: none;
}

/* ステータス：予約済（メインカラー） */
.schedule__slot-status--booked {
  color: var(--c-red);
}

/* ============================================
   口コミページ：口コミ一覧
   ============================================ */

/* リスト */
.review__list {
  list-style: none;
  margin-top: 16px;
}

/* 各口コミカード：ボーダーで囲む */
.review__item {
  margin-top: 12px;
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
  padding-bottom: 56px;
}

.review__item:first-child {
  margin-top: 0;
}

/* ---- 上段：キャスト情報（リンク） ---- */

/* 写真左・テキスト右の横並び・下ボーダーで下段と区切る */
.review__cast {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.review__cast:hover {
  opacity: 0.8;
}

/* 写真ラッパー：正方形 100×100px */
.review__cast-photo-wrap {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  overflow: hidden;
}

/* 写真：正方形にトリミング */
.review__cast-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* キャスト名 */
.review__cast-name {
  font-size: clamp(2.4rem, 4.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-text);
  margin-top: 8px;
}

/* 年齢・身長 */
.review__cast-detail {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  color: var(--c-text);
  line-height: 1.4;
  margin-top: 4px;
}

/* ---- 下段：口コミ本体 ---- */

.review__body {
  /* padding: 12px; */
}

/* 投稿日（1行目）・投稿者（2行目）：縦並び */
.review__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

/* 投稿日 */
.review__date {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
}

/* 投稿者名：太字・やや大きめ */
.review__author {
  font-size: clamp(2.0rem, 3.9vw, 2.2rem);
  font-weight: 700;
  color: var(--c-text);
}

/* 点数＋★行：グレー背景バー（gap:0・点数だけ右マージンで間隔を取る） */
.review__score-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  background-color: var(--c-bg-cream);
  padding: 4px 12px;
  margin-bottom: 24px;
}

/* 点数（太字）：右に広めの余白で「評価★」と区切る */
.review__score {
  font-size: clamp(2.4rem, 4.5vw, 2.5rem);
  font-weight: 700;
  margin-right: 16px;
}

/* 「評価」ラベル：★と密着 */
.review__score-label {
  font-size: clamp(2.2rem, 4.1vw, 2.3rem);
  font-weight: 700;
  color: var(--c-text);
}

/* 評価★（ゴールド） */
.review__stars {
  font-size: clamp(2rem, 3.9vw, 2.2rem);
  color: #FFA90A;
  letter-spacing: 0.05em;
}

/* タイトル：メインカラー（深紅）・大きめ */
.review__title {
  font-size: clamp(2.4rem, 4.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 16px;
  color: var(--c-main);
}

/* 本文 */
.review__text {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.9;
  color: var(--c-text);
  margin-bottom: 24px;
}

/* フッター：いいね（上）＋口コミリンクボタン（下）の縦並び */
.review__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* いいねボタン：テキストは黒・アイコンと横並び */
.review__like {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  color: var(--c-text);
  cursor: pointer;
  padding: 0;
  text-align: left;
}

/* ハートアイコン */
.review__like-icon {
  width: 16px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* 口コミ詳細リンク：全幅ブロックボタン */
.review__link {
  display: block;
  width: 80%;
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  color: var(--c-white);
  background-color: var(--c-main);
  padding: 12px 0;
  text-decoration: none;
  transition: opacity 0.2s ease;
  border-radius: 50vmax;
  margin: 32px auto 0;
}

.review__link:hover {
  opacity: 0.8;
}

/* ============================================
   共通：お問い合わせ・フォーム（.contact-form）
   リクエストBOX・問い合わせなど複数ページで使用
   ============================================ */

/* フォーム全体 */
.contact-form {
  margin-top: 24px;
}

/* 各フィールドグループ：ラベル＋入力欄のセット */
.contact-form__group {
  margin-bottom: 24px;
}

/* ラベル行：項目名＋必須バッジを横並び */
.contact-form__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--c-text);
}

/* 「必須」バッジ：赤背景・白文字 */
.contact-form__required {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--c-white);
  background-color: var(--c-red);
  padding: 2px 8px;
  line-height: 1.4;
}

/* テキスト入力欄 */
.contact-form__input {
  display: block;
  width: 100%;
  min-height: 48px; /* iOSで空のdate inputが潰れる対策 */
  padding: 12px;
  background-color: var(--c-bg-gray);
  border: none;
  font-size: 1.6rem;
  color: var(--c-text);
  outline: none;
  appearance: none;
}

.contact-form__input:focus {
  outline: 2px solid var(--c-main);
  outline-offset: -2px;
}

/* テキストエリア */
.contact-form__textarea {
  display: block;
  width: 100%;
  padding: 12px;
  background-color: var(--c-bg-gray);
  border: none;
  font-size: 1.6rem;
  color: var(--c-text);
  resize: vertical;
  outline: none;
  line-height: 1.7;
}

.contact-form__textarea:focus {
  outline: 2px solid var(--c-main);
  outline-offset: -2px;
}

/* select ラッパー：矢印アイコンを right に配置 */
.contact-form__select-wrap {
  position: relative;
}

/* select 本体：グレー背景・矢印SVGをright端に */
.contact-form__select {
  display: block;
  width: 100%;
  padding: 12px 40px 12px 12px;
  background-color: var(--c-bg-gray);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  color: var(--c-text);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}

.contact-form__select:focus {
  outline: 2px solid var(--c-main);
  outline-offset: -2px;
}

/* date input：カレンダーアイコンを非表示にしない（OSデフォルト活用） */
.contact-form__input--date {
  cursor: pointer;
}

/* 注釈テキスト（ご感想欄の上など） */
.contact-form__note {
  font-size: clamp(1.35rem, 2.6vw, 1.45rem);
  line-height: 1.6;
  margin-bottom: 8px;
}

/* 送信ボタンラッパー：上に余白 */
.contact-form__submit-wrap {
  margin-top: 40px;
}

/* 送信ボタン：全幅・角丸・メインカラー */
.contact-form__submit {
  display: block;
  width: 90%;
  padding: 16px 0;
  background-color: var(--c-main);
  font-size: clamp(1.6rem, 3.2vw, 1.8rem);
  color: var(--c-white);
  border: none;
  border-radius: 40px;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s ease;
  margin: 0 auto;
}

.contact-form__submit:hover {
  opacity: 0.8;
}

/* 確認ページ：ボタン2つ横並び */
.contact-form__submit-wrap--confirm {
  display: flex;
  gap: 8px;
}

.contact-form__submit-wrap--confirm .contact-form__submit {
  flex: 1;
  width: auto;
}

/* 修正するボタン：アウトライン */
.contact-form__submit--back {
  background-color: var(--c-border);
  color: var(--c-black);
}

/* ============================================
   共通：テキストコンテンツ（.text-content）
   プライバシーポリシー・Q&A など文章中心のページで使用
   ============================================ */

/* ラッパー */
.text-content {
  margin-top: 8px;
}

/* リード文 */
.text-content__lead {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.9;
  margin-bottom: 16px;
}

/* 制定日・署名 */
.text-content__date {
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  text-align: right;
  margin-bottom: 24px;
  color: #555;
}

/* 各セクション：上に余白 */
.text-content__section {
  margin-top: 8px;
}

/* h3 見出し：黒背景・白テキスト・全幅バナー */
.text-content__heading {
  font-size: clamp(2rem, 3.9vw, 2.2rem);
  font-weight: 700;
  padding: 12px;
  line-height: 1.4;
  margin-bottom: 0;
  border-left: 4px solid var(--c-main);
}

/* 本文エリア：白背景・左右パディング */
.text-content__body {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 本文段落 */
.text-content__body p {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.9;
}

/* h4 小見出し */
.text-content__subheading {
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  font-weight: 700;
  margin-top: 4px;
}

/* リスト */
.text-content__list {
  padding-left: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.text-content__list li {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.9;
  list-style: disc;
}

/* ============================================
   FAQ：アコーディオン（.faq）
   ============================================ */

/* リスト */
.faq__list {
  margin-top: 8px;
}

/* 各 Q&A アイテム：下ボーダーで区切る */
.faq__item {
  border-bottom: 1px solid var(--c-border);
}

.faq__item:first-child {
  border-top: 1px solid var(--c-border);
}

/* ---- 質問行（トリガー） ---- */

/* Q ラベル・質問文・矢印を横並び */
.faq__question {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 8px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

/* Q ラベル */
.faq__q-label {
  flex: 0 0 auto;
  font-size: clamp(2.4rem, 4.6vw, 2.6rem);
  font-weight: 700;
  color: var(--c-main);
  line-height: 1;
}

/* 質問テキスト：余白を埋める */
.faq__q-text {
  flex: 1;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  font-weight: 700;
  line-height: 1.5;
}

/* 矢印：回転アニメーション */
.faq__arrow {
  flex: 0 0 auto;
  font-size: 1.2rem;
  color: var(--c-text);
  transition: transform 0.3s ease;
  /* 開いている状態（aria-expanded="true"）で180度回転 */
}

/* aria-expanded="true" のとき矢印を180度回転 */
.faq__question[aria-expanded="true"] .faq__arrow {
  transform: rotate(180deg);
}

/* ---- 回答行 ---- */

/* Q ラベル・回答文を横並び */
.faq__answer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 8px 20px;
}

/* hidden 属性があるときは非表示（display:flex に上書きされるのを防ぐ） */
.faq__answer[hidden] {
  display: none;
}

/* A ラベル */
.faq__a-label {
  flex: 0 0 auto;
  font-size: clamp(2.4rem, 4.6vw, 2.6rem);
  font-weight: 700;
  color: var(--c-accent);
  line-height: 1.2;
}

/* 回答テキスト */
.faq__a-text {
  flex: 1;
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.9;
}

/* ============================================
   キーワード検索（共通）
   ============================================ */

/* ラッパー */
.keyword-search {
  margin-bottom: 16px;
}

/* ラベル */
.keyword-search__label {
  display: block;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  font-weight: 700;
  margin-bottom: 4px;
}

/* 入力欄＋ボタンの横並び */
.keyword-search__field {
  display: flex;
}

/* テキスト入力 */
.keyword-search__input {
  flex: 1;
  min-width: 0; /* iOSでflexアイテムが縮み切らず横ズレする対策 */
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-right: none;
  background-color: var(--c-white);
  font-size: 1.6rem;
  outline: none;
  /* ブラウザ標準のsearch入力UIを非表示 */
  appearance: none;
  -webkit-appearance: none;
}

.keyword-search__input::-webkit-search-cancel-button {
  display: none;
}

/* 検索ボタン：黒背景・虫眼鏡 */
.keyword-search__btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background-color: var(--c-black);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.keyword-search__btn:hover {
  opacity: 0.75;
}

/* アイコン色（白） */
.keyword-search__icon {
  color: var(--c-white);
  display: block;
  flex-shrink: 0;
}

/* ============================================
   セラピストランクヘッダー
   ============================================ */

/* ラッパー：ダーク背景・中央揃え・下部にゴールドライン */
.therapist-rank {
  background-color: var(--c-dark);
  text-align: center;
  padding: 8px 16px 0;
  margin-bottom: 16px;
  border-bottom: 5px solid var(--c-accent);
  color: var(--c-white);
}

/* 2つ目以降：上余白 */
.schedule__list+.therapist-rank {
  margin-top: 64px;
}

/* EXECUTIVEなど：ボーダーをメインカラーに */
.therapist-rank--main {
  border-bottom-color: var(--c-main);
}

/* ランク名（英字）：Instrument Serif・大 */
.therapist-rank__en {
  font-family: var(--f-title);
  font-size: clamp(4.8rem, 9.3vw, 5.2rem);
  font-weight: 400;
  line-height: 1.2;
}

/* ランク名（日本語）：小・細 */
.therapist-rank__ja {
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  line-height: 1.4;
  margin-bottom: 8px;
}

/* 料金テキスト：やや小・下寄り */
.therapist-rank__price {
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  line-height: 1.4;
  padding-bottom: 16px;
}


/* ============================================
   口コミページ
   ============================================ */


/* ============================================
   リクエストBOXページ
   ============================================ */


/* ============================================
   プライバシーポリシーページ
   ============================================ */


/* ============================================
   FAQページ
   ============================================ */


/* ============================================
   イベント一覧ページ
   ============================================ */

/* イベントリスト */
.event__list {
  list-style: none;
}

.event__item {
  margin-bottom: 24px;
}

/* ============================================
   トピックス詳細ページ
   ============================================ */

.post__header {
  padding: 12px 8px 24px;
  border-bottom: 1px solid var(--c-border);
}

.post__date {
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
}

.post__title {
  font-size: clamp(1.8rem, 3.6vw, 2rem);
  font-weight: 700;
}

.writing_area img {
  height: auto !important;
}


/* ============================================
   ブログ詳細ページ（diary001.html など）
   ============================================ */

/* 投稿ヘッダー：日時・タイトル・投稿者・いいね */
.diary-post__header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 24px;
}

/* 投稿日時 */
.diary-post__date {
  display: block;
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  color: var(--c-text);
}

/* 投稿タイトル */
.diary-post__title {
  font-size: clamp(2.0rem, 3.9vw, 2.2rem);
  font-weight: 700;
  line-height: 1.5;
}

/* 投稿者・いいね 横並び */
.diary-post__meta {}

/* 投稿者名リンク */
.diary-post__author {
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  color: var(--c-link);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.diary-post__author:hover {
  opacity: 0.7;
}

/* いいね数 */
.diary-post__like {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  font-weight: 700;
  margin-top: 8px;
}

/* いいねハートアイコン */
.diary-post__heart {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

/* ============================================
   WYSIWYG投稿エリア（.photomail_wrap）
   CMSから出力される本文ブロック
   ============================================ */

.photomail_wrap {
  margin-bottom: 32px;
}

/* 本文テキストエリア */
.photomail_text_area {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.9;
  margin-bottom: 24px;
}

.photomail_text_area p {
  margin: 0;
}

/* 本文画像エリア */
.photomail_image_area {
  margin-bottom: 24px;
}

.photomail_image_area img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   ページネーション（前後の投稿へ）
   ============================================ */

.diary-post__pager {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* 前・次ボタン共通 */
.diary-post__pager-prev,
.diary-post__pager-next {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  background-color: var(--c-main);
  color: var(--c-white);
  text-decoration: none;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  border-radius: 50vmax;
  transition: background-color 0.2s ease;
  text-align: center;
}

.diary-post__pager-prev:hover,
.diary-post__pager-next:hover {
  background-color: var(--c-border);
}

/* ============================================
   セラピスト情報カード（diary-therapist）
   写真左・テキスト右レイアウト
   ============================================ */

.diary-therapist {
  background-color: var(--c-bg-gray);
  padding: 24px 16px;
}

/* カード：写真左・テキスト右の横並び */
.diary-therapist__card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* 写真リンク */
.diary-therapist__photo-link {
  display: block;
  flex-shrink: 0;
  width: 120px;
  transition: opacity 0.2s ease;
}

.diary-therapist__photo-link:hover {
  opacity: 0.8;
}

/* 写真：正方形・トリミング */
.diary-therapist__img {
  width: 120px;
  display: block;
}

/* テキストエリア */
.diary-therapist__body {
  flex: 1;
  min-width: 0;
}

/* セラピスト名リンク */
.diary-therapist__name {
  display: block;
  font-size: clamp(2.2rem, 4.3vw, 2.4rem);
  font-weight: 700;
  text-decoration: none;
  color: var(--c-text);
  line-height: 1.3;
  margin-bottom: 8px;
  transition: color 0.2s ease;
}

.diary-therapist__name:hover {
  color: var(--c-main);
}

/* スペック（年齢・身長） */
.diary-therapist__spec {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.diary-therapist__spec-row {
  display: flex;
  gap: 8px;
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
}

.diary-therapist__spec-label {
  color: var(--c-text);
  flex-shrink: 0;
}

.diary-therapist__spec-value {
  color: var(--c-text);
}

/* キャッチコピー */
.diary-therapist__catch {
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  line-height: 1.6;
  color: var(--c-main);
}

/* ============================================
   最新の投稿セクション（diary-latest）
   ============================================ */


/* ============================================
   写メ日記セクション（diary-all）
   ============================================ */



/* ============================================
   初めての方へページ
   ============================================ */


/* キャッチコピー：大きく中央寄せ・太字 */
.howto-msg__catch {
  font-size: clamp(3.2rem, 6.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin-top: 24px;
  margin-bottom: 16px;
}

/* メッセージテキスト：中央寄せ */
.howto-msg__text {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.8;
  text-align: center;
  margin-bottom: 24px;
}

/* 動画：全幅 */
.howto-msg__video {
  width: 100%;
}

.howto-msg__video video {
  width: 100%;
  height: auto;
  display: block;
}


/* ============================================
   待ち合わせ＆ホテルリストページ
   ============================================ */

/* 説明文 */
.hotel__desc {
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  line-height: 1.8;
  color: var(--c-text);
  margin-bottom: 32px;
}

/* 都道府県ブロックの間隔 */
.hotel__pref {
  margin-bottom: 32px;
}

.hotel__pref:last-child {
  margin-bottom: 0;
}

/* 都道府県名：左に赤いボーダー */
.hotel__pref-name {
  font-size: clamp(2rem, 3.9vw, 2.2rem);
  font-weight: 700;
  padding: 12px;
  line-height: 1.4;
  margin-bottom: 16px;
  border-left: 4px solid var(--c-main);
}

/* エリアリンクのul */
.hotel__links {
  list-style: none;
}

/* 各エリアアイテム：ボーダーで区切り */
.hotel__link-item {
  border-bottom: 1px solid var(--c-border);
}

.hotel__link-item:first-child {
  border-top: 1px solid var(--c-border);
}

/* エリアリンク本体：横並び・矢印右端 */
.hotel__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  color: var(--c-text);
  text-decoration: none;
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  transition: opacity 0.2s ease;
}

.hotel__link:hover {
  opacity: 0.6;
}

/* 右端の矢印記号 */
.hotel__link-arrow {
  font-size: clamp(1.8rem, 3.6vw, 2rem);
  color: var(--c-text);
  line-height: 1;
}


/* ============================================
   ホテルカード（ホテル詳細リストページ共通）
   ============================================ */

/* カード1枚の外枠：ボーダーで区切り */
.hotel-card {
  margin-bottom: 88px;
}

.hotel-card:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* ホテル名：左に赤いボーダー */
.hotel-card__name {
  font-size: clamp(2rem, 3.9vw, 2.2rem);
  font-weight: 700;
  padding: 12px;
  line-height: 1.4;
  margin-bottom: 12px;
  border-left: 4px solid var(--c-main);
}

/* 住所 */
.hotel-card__address {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  margin-bottom: 4px;
}

/* 公式サイトURL */
.hotel-card__url {
  display: inline-block;
  font-size: clamp(1.4rem, 1.45vw, 1.6rem);
  color: var(--c-link);
  text-decoration: underline;
  margin-bottom: 24px;
  word-break: break-all;
}

/* 画像スライダーラッパー（全幅・チラ見せ余白はslickが管理） */
.hotel-card__slider {
  width: 100%;
  margin-bottom: 32px !important;
}

/* 各スライドの外枠：左右に隙間 */
.hotel-card__slide {
  padding-inline: 4px;
  position: relative;
  overflow: hidden;
  line-height: 0;
}

/* スライド画像：横長比率・トリミング */
.hotel-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* 画像ラッパー（オーバーレイ用に relative） */
.hotel-card__img-wrap {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

/* 非アクティブスライドに黒オーバーレイ */
.hotel-card__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* アクティブ（中央）スライドはオーバーレイ非表示 */
.slick-center .hotel-card__img-wrap::after {
  opacity: 0;
}

/* ---- slick ドットのカスタム ---- */

.hotel-card__slider .slick-dots {
  position: static;
  padding-top: 16px;
}

.hotel-card__slider .slick-dots li button::before {
  color: var(--c-text);
  opacity: 0.3;
  font-size: 8px;
}

.hotel-card__slider .slick-dots li.slick-active button::before {
  color: var(--c-main);
  opacity: 1;
}

/* 説明文 */
.hotel-card__desc {
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  line-height: 1.8;
  margin-bottom: 32px;
}

/* 料金テーブル */
.hotel-card__table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
}

/* テーブルキャプション（「ご予算」） */
.hotel-card__table caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 1.8rem);
  padding: 0 0 4px 8px;
}

/* 見出しセル */
.hotel-card__table th {
  width: 88px;
  padding: 16px 12px;
  font-weight: 700;
  background-color: var(--c-bg-gray);
  border: 1px solid var(--c-border);
  text-align: center;
  white-space: nowrap;
}

/* データセル */
.hotel-card__table td {
  padding: 16px 12px;
  font-weight: 700;
  border: 1px solid var(--c-border);
}


/* ============================================
   イベント詳細ページ
   ============================================ */

.event_textarea img {
  height: auto !important;
}


/* ============================================
   サービス内容ページ（service.html）
   ============================================ */

/* セクション外枠：白背景 */
.service {}

/* イントロ文 */
.service__intro {
  margin-bottom: 24px;
  font-size: clamp(1.4rem, 2.9vw, 1.6rem);
}

/* ============================================
   共通：目次（.toc）
   service.html・howto.html など複数ページで共用
   ============================================ */

/* 目次ブロック */
.service__toc,
.howto-toc {
  margin-bottom: 40px;
}

.howto-toc {
  background-color: var(--c-bg-gray);
  padding: 24px 16px 32px;
}

/* 目次タイトル「目次」 */
.service__toc-title,
.toc__title {
  font-size: clamp(2rem, 3.9vw, 2.2rem);
  font-weight: 700;
  padding: 12px;
  line-height: 1.4;
  margin-bottom: 0;
  border-left: 4px solid var(--c-main);
}

/* 目次リスト */
.service__toc-list,
.toc__list {
  list-style: none;
}

/* 目次各行 */
.service__toc-item,
.toc__item {
  border-bottom: 1px solid var(--c-border);
}

.service__toc-item:last-child,
.toc__item:last-child {
  border-bottom: none;
}

/* 目次リンク：番号・テキスト・矢印を横並び */
.service__toc-link,
.toc__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--c-text);
  transition: background-color 0.2s ease;
}

.service__toc-link:hover,
.toc__link:hover {
  background-color: var(--c-bg-gray);
}

/* 目次：番号 */
.service__toc-num,
.toc__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--c-main);
  color: var(--c-white);
  font-size: 1.6rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* 目次：テキスト（伸縮） */
.service__toc-text,
.toc__text {
  flex: 1;
  font-size: clamp(1.6rem, 3.2vw, 1.8rem);
}

/* 目次：下向き矢印 */
.service__toc-arrow,
.toc__arrow {
  display: block;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid var(--c-text);
  border-right: 2px solid var(--c-text);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* 各サービス項目 */
.service__item {
  margin-top: 40px;
  background-color: var(--c-bg-cream);
  padding: 32px 16px 56px;
}

/* 項目見出し：番号＋タイトル横並び */
.service__item-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* 項目番号（丸背景） */
.service__item-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--c-main);
  color: var(--c-white);
  font-size: 2rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* 項目タイトル */
.service__item-title {
  font-size: clamp(2rem, 3.9vw, 2.2rem);
  font-weight: 700;
}

/* 動画ラッパー：全幅・アスペクト比維持 */
.service__video {
  margin: 16px 0;
}

.service__video video {
  width: 100%;
  height: auto;
  display: block;
}

/* 項目本文 */
.service__item-body {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.8;
}

.service__item-body p+p {
  margin-top: 12px;
}

.service__item img {
  margin-top: 16px;
}


/* サブボックス（お迎えセクション内の場合分け） */
.service__sub-box {
  margin-top: 24px;
}

/* サブボックスタイトル */
.service__sub-title {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  border-left: 4px solid var(--c-main);
  padding: 6px 12px;
}


/* ============================================
   メディア掲載実績セクション（howto.html #howto-1）
   ============================================ */

/* セクション全体：黒背景 */
.howto-media {}

/* 黒背景エリア：ラベル＋画像 */
.howto-media__top {}

/* ラベル「メディア掲載実績」 */
.howto-media__label {
  color: var(--c-white);
  font-size: clamp(1.4rem, 2.9vw, 1.6rem);
  font-weight: 700;
  margin-bottom: 16px;
}

/* メディア画像：全幅（media.jpg 1枚） */
.howto-media__img {
  width: 100%;
  height: auto;
  display: block;
}

/* 掲載メディア一覧：SPは縦並び */
.howto-media__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 24px;
}

/* 各メディアアイテム */
.howto-media__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* メディア種別ラベル（雑誌 / YouTube / TV）：ゴールド左ボーダー */
.howto-media__kind {
  font-size: clamp(1.7rem, 3.2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
}

/* 各メディアの個別画像 */
.howto-media__item-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 白背景エリア：バッジ3つ */
.howto-media__stat {
  padding: 40px 16px 0;
}

/* バッジリスト：三角配置（グリッド） */
.howto-media__badges {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 320px;
  margin: 0 auto;
}

/* 1つ目だけ2列にまたがって中央寄せ */
.howto-media__badge--top {
  grid-column: 1 / -1;
  justify-self: center;
}

/* バッジ共通：中央揃え */
.howto-media__badge {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 丸：CSSで作成（黒背景・白テキスト） */
.howto-media__badge-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: var(--c-main);
  color: var(--c-white);
  font-size: clamp(2rem, 3.9vw, 2.2rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

/* バッジ2行目：大きめフォント */
.howto-media__badge-large {
  font-size: clamp(2.8rem, 5.4vw, 3rem);
}


/* ============================================
   LIPが選ばれる理由セクション（howto.html #howto-2）
   ============================================ */

/* セクション全体：白背景 */
.howto-reasons {}

/* セクション内見出し：左ボーダーあり（howto.html など複数箇所で共用） */
.sec-heading {
  font-size: clamp(2rem, 3.9vw, 2.2rem);
  font-weight: 700;
  padding: 12px;
  line-height: 1.4;
  margin-bottom: 0;
  border-left: 4px solid var(--c-main);
}

/* 理由リスト：縦並び */
.howto-reasons__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

/* 各理由カード：番号丸＋テキスト横並び */
.howto-reasons__item {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--c-bg-gray);
  border-radius: 8px;
  padding: 20px 16px;
}

/* 番号丸（アクセントカラー：ゴールド） */
.howto-reasons__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--c-accent);
  color: var(--c-white);
  font-size: 2.4rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* 見出しテキスト：太字 */
.howto-reasons__heading {
  font-size: clamp(2.2rem, 4.3vw, 2.4rem);
  font-weight: 700;
  margin-bottom: -4px;
}

/* サブテキスト：補足説明 */
.howto-reasons__sub {
  font-size: clamp(1.8rem, 3.6vw, 2rem);
}




/* ============================================
   ご利用の流れセクション（howto.html #howto-3）
   ============================================ */

/* セクション全体：白背景 */
.howto-flow {}

/* セクション見出し：金の左ボーダー */
.howto-flow__section-title {
  font-size: clamp(1.8rem, 3.6vw, 2rem);
  font-weight: 700;
  border-left: 4px solid var(--c-accent);
  padding: 4px 12px;
  margin-bottom: 24px;
  color: var(--c-text);
  line-height: 1.4;
}

/* キャッチコピー（金色・大） */
.howto-flow__catch {
  font-size: clamp(2.8rem, 5.7vw, 3.2rem);
  font-weight: 700;
  color: var(--c-accent);
  text-align: center;
  margin-bottom: 40px;
}

/* ステップリスト */
.howto-flow__step {
  border: 2px solid var(--c-accent);
  padding: 24px 16px 32px;
}

/* ステップヘッド：金の上ボーダー＋タイトル */
.howto-flow__head {
  text-align: center;
  margin-bottom: 12px;
}

/* ステップラベル（ステップ名：黒・太字） */
.howto-flow__label {
  font-size: clamp(2rem, 3.9vw, 2.2rem);
  font-weight: 700;
  color: var(--c-text);
}

/* ステップ説明テキスト */
.howto-flow__text {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.8;
  color: var(--c-text);
  margin-bottom: 16px;
}

/* 画像：全幅 */
.howto-flow__media-img {
  width: 100%;
  height: auto;
  display: block;
}

/* YouTube埋め込みラッパー：16:9アスペクト比維持 */
.howto-flow__youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.howto-flow__youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 下向き矢印：中央寄せ */
.howto-flow__arrow {
  display: block;
  width: 32px;
  height: auto;
  margin: 24px auto;
}




/* ============================================
   料金システムセクション（howto.html #howto-4）
   ============================================ */

/* 料金カード：枠線・白背景 */
.price-card {
  border: 1px solid #ddd;
  padding: 40px 0;
  margin-bottom: 32px;
}

/* キャッチ：中央寄せ */
.price-card__catch {
  text-align: center;
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  margin-bottom: 24px;
}

/* コース一覧リスト */
.price-card__list {
  list-style: none;
  border-top: 1px solid #e0e0e0;
  margin: 0 16px 24px;
}

/* コース行：左に名前・右に価格 */
.price-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid #e0e0e0;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  font-weight: 700;
}

/* 価格：太字 */
.price-card__price {}

/* シミュレーション例エリア：中央寄せ */
.price-card__example {
  text-align: center;
}

/* 例ラベル */
.price-card__example-label {
  font-size: clamp(1.6rem, 3vw, 1.7rem);
}

/* 合計金額（金色・大） */
.price-card__example-total {
  font-size: clamp(3.2rem, 6.4vw, 3.6rem);
  font-weight: 700;
  color: var(--c-accent);
  margin-bottom: 8px;
}

/* 注釈 */
.price-card__example-note {
  font-size: clamp(1.4rem, 2.9vw, 1.6rem);
  line-height: 1.6;
}

/* シミュレーターボタン：中央・ピル形 */
.howto-price__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88%;
  max-width: 400px;
  height: 64px;
  margin: 0 auto;
  background-color: var(--c-main);
  color: var(--c-white);
  text-decoration: none;
  font-size: clamp(1.6rem, 3.2vw, 1.8rem);
  border-radius: 50vmax;
  transition: opacity 0.2s ease;
}

.howto-price__btn:hover {
  opacity: 0.85;
}



/* ============================================
   口コミセクション（howto.html #howto-5）
   ============================================ */

/* YouTube埋め込みラッパー：16:9アスペクト比維持 */
.howto-review__youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom: 32px;
}

.howto-review__youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 口コミカードリスト */
.howto-review__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 口コミ注意書き：薄いグレー背景・角丸 */
.review-notice {
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  line-height: 1.8;
  color: var(--c-text);
  background-color: var(--c-bg-gray);
  padding: 24px;
  margin: 24px 0 32px;
}

/* 口コミカード：枠線・角丸 */
.review-card {
  border: 4px solid #EAEAEA;
  border-radius: 16px;
  overflow: hidden;
  padding: 48px 24px 56px;
}

/* 投稿者ラベル：下罫線付き */
.review-card__label {
  font-size: clamp(2rem, 3.9vw, 2.2rem);
  font-weight: 700;
  color: var(--c-main);
  margin-bottom: 16px;
}

/* 口コミ本文エリア */
.review-card__body {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.8;
}

/* 段落間の余白 */
.review-card__body p+p {
  margin-top: 12px;
}


/* ============================================
   プライバシーセクション（howto.html #howto-6）
   ============================================ */

/* キャッチコピー：中央・太字 */
.howto-privacy__catch {
  font-size: clamp(2.4rem, 4.6vw, 2.6rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 32px;
}

/* ボックスリスト */
.howto-privacy__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 各ボックス：枠線 */
.privacy-box {
  border: 1px solid #ddd;
  padding: 16px 16px 24px;
}

/* ボックスタイトル：赤・中央・太字 */
.privacy-box__title {
  font-size: clamp(2rem, 3.9vw, 2.2rem);
  font-weight: 700;
  color: var(--c-main);
  text-align: center;
  margin-bottom: 8px;
}

/* ボックス本文 */
.privacy-box__text {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.8;
}



/* ============================================
   セラピストセクション（howto.html #howto-7）
   ============================================ */

/* セクション全体：白背景 */
.howto-therapist {
  padding-bottom: 64px;
}

/* タイトル・テキストエリア：内側padding */
.howto-therapist__inner {}

/* キャッチコピー：中央・太字 */
.howto-therapist__catch {
  font-size: clamp(2.4rem, 4.6vw, 2.6rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* 見つけ方リスト：番号付き・インデント */
.howto-therapist__steps {
  list-style: decimal;
  padding-left: 1.8em;
}

.howto-therapist__steps li {
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  line-height: 1.9;
}

/* スライダーラッパー：黒背景・全幅 */
.howto-therapist__slider-wrap {
  background-color: var(--c-black);
  padding: 24px 0 32px;
}

/* ボタンエリア：内側padding */
.howto-therapist__btn-wrap {
  padding-top: 56px;
}

/* セラピスト一覧ボタン：ピル形・赤 */
.howto-therapist__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88%;
  max-width: 400px;
  height: 64px;
  margin: 0 auto;
  background-color: var(--c-main);
  color: var(--c-white);
  text-decoration: none;
  font-size: clamp(1.6rem, 3.2vw, 1.8rem);
  border-radius: 50vmax;
  transition: opacity 0.2s ease;
}

.howto-therapist__btn:hover {
  opacity: 0.85;
}



/* ============================================
   料金システムページ（system.html）
   ============================================ */

/* 目次タイトル：sec-headingに上margin */
.system-toc__title {
  margin-bottom: 0;
}

/* 目次グリッド：2列・左右で縦の罫線なし */
.system-toc__grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

/* 目次各アイテム：下罫線 */
.system-toc__item {
  border-bottom: 1px solid var(--c-border);
}

/* 目次リンク：テキスト＋シェブロン横並び */
.system-toc__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 8px;
  text-decoration: none;
  color: var(--c-text);
  transition: background-color 0.15s ease;
}

.system-toc__link:hover {
  background-color: var(--c-bg-gray);
}

/* テキスト */
.system-toc__text {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  font-weight: 700;
  line-height: 1.4;
}

/* シェブロン（下向き矢印：CSS描画） */
.system-toc__chevron {
  display: block;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid var(--c-text);
  border-right: 2px solid var(--c-text);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-bottom: 4px;
}


/* LINEで予約・相談ボタン：フッターと同デザイン */
.system-line-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 88%;
  height: 64px;
  margin: 40px auto 0;
  background-color: var(--c-line);
  border-radius: 50vmax;
  color: var(--c-white);
  text-decoration: none;
  font-size: clamp(1.6rem, 3.2vw, 1.8rem);
  font-weight: 700;
  transition: opacity 0.2s ease;
}

.system-line-btn:hover {
  opacity: 0.85;
}

/* LINEアイコン */
.system-line-btn__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}


/* 各セクション共通：上の余白 */
.system-section {
  margin-top: 56px;
}

/* 注記テキスト */
.system-note {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  margin-top: 4px;
  margin-bottom: 16px;
}

/* コース料金リスト */
.course-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 各コースボックス */
.course-box {
  border: 1px solid #ddd;
}

/* ボックス上部：時間と金額 */
.course-box__head {
  padding: 20px 16px 16px;
  text-align: center;
}

/* 時間＋金額の横並び行 */
.course-box__price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* 時間ラベル */
.course-box__time {
  font-size: clamp(1.8rem, 3.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.1;
}

/* 時間サブテキスト（お泊り時間帯など） */
.course-box__time-sub {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  font-weight: 400;
}

/* 金額 */
.course-box__price {
  font-size: clamp(3.2rem, 6.1vw, 3.4rem);
  font-weight: 700;
}

/* 注記（人気No1・限定など）：アクセントカラー */
.course-box__note {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  color: var(--c-accent);
}

/* アコーディオントリガー */
.course-box__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 4px 0;
  background-color: var(--c-main);
  color: var(--c-white);
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.course-box__trigger:hover {
  opacity: 0.85;
}

/* +/- アイコン */
.course-box__trigger-icon {
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 400;
  flex-shrink: 0;
  display: inline-block;
  transition: transform 0.25s ease;
}

/* 開いているとき：+を45°回転で× に */
.course-box__trigger[aria-expanded="true"] .course-box__trigger-icon {
  transform: rotate(45deg);
}

/* アコーディオン詳細エリア */
.course-box__detail {
  border-top: 1px solid #ddd;
  padding-bottom: 24px;
}

/* 料金内訳テーブル */
.course-table {
  width: 88%;
  border-collapse: collapse;
  margin: 0 auto;
}

.course-table th,
.course-table td {
  padding: 12px 16px;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

.course-table th {
  text-align: left;
  width: 60%;
  line-height: 1.2;
}

.course-table td {
  text-align: right;
  font-weight: 700;
}

/* 合計行：太字 */
.course-table__total th,
.course-table__total td {
  border-bottom: none;
  background-color: #F4F2E6;
}

/* テーブル内注記（小さめ） */
.course-table__sub {
  font-size: clamp(1.3rem, 2.5vw, 1.4rem);
  color: #666;
}

/* ============================================
   共通料金テーブル（指名料金・交通費・延長料金・オプション）
   ============================================ */

/* テーブルを囲む枠線ボックス */
.price-table-box {
  margin-top: 16px;
  border: 1px solid #ddd;
}

/* テーブル本体 */
.price-table {
  width: 100%;
  border-collapse: collapse;
}

/* ヘッダー行 */
.price-table__head th,
.price-table__head td {
  background-color: var(--c-bg-gray);
  font-weight: 700;
}

/* 各セル共通 */
.price-table th,
.price-table td {
  padding: 12px 0;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

/* 最終行の下ボーダーなし */
.price-table tr:last-child th,
.price-table tr:last-child td {
  border-bottom: none;
}

/* 左列：項目名 */
.price-table th {
  text-align: left;
  width: 60%;
  padding-left: 16px;
}

/* 右列：金額 */
.price-table td {
  text-align: right;
  font-weight: 700;
  padding-right: 16px;
}

/* テーブル内注記（小さめ・グレー） */
.price-table__sub {
  font-size: clamp(1.3rem, 2.5vw, 1.4rem);
  color: #666;
}

/* セクション注意書き（・箇条書き） */
.system-caution {
  margin-top: 16px;
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  line-height: 1.9;
}


/* テキストボックス（ご予約・注意事項など） */
.price-text-box {
  padding: 32px 24px;
  margin-top: 16px;
  border: 1px solid #ddd;
}

/* テキストボックス内の小見出し */
.price-text-box h3 {
  font-size: clamp(1.7rem, 3.2vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 8px;
}

/* 2つ目以降の小見出しは上に余白 */
.price-text-box h3+*~h3 {
  margin-top: 24px;
}

.price-text-box h3:not(:first-child) {
  margin-top: 24px;
}

/* テキストボックス内の本文 */
.price-text-box p {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.9;
}


/* 料金計算式ラッパー */
.price-formula {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* 各行：横並び・中央揃え */
.price-formula__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 2行目（= 合計金額）：右方向に寄せて1行目と揃える */
.price-formula__row--result {
  padding-left: 2px;
}

/* グレーボックス：各項目 */
.price-formula__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-bg-gray);
  padding: 8px 16px;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  font-weight: 700;
  border-radius: 8px;
}

/* 合計金額ボックス：大きく・太字 */
.price-formula__item--total {
  padding: 8px 32px;
  font-size: clamp(2.4rem, 4.6vw, 2.6rem);
  font-weight: 700;
}

/* 演算子（+・=） */
.price-formula__op {
  font-size: clamp(1.8rem, 3.6vw, 2rem);
  font-weight: 700;
  flex-shrink: 0;
}



/* ============================================
   年齢確認ページ（index.html）
   ヘッダー・フッターなし・白背景・中央揃え
   ============================================ */

/* 全体ラッパー */
.age-check {
  min-height: 100vh;
  background-color: var(--c-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 24px 56px;
  max-width: var(--page-width);
  margin: 0 auto;
  text-align: center;
}

/* ロゴ */
.age-check__logo {
  display: inline-block;
  margin-bottom: 56px;
}

.age-check__logo-img {
  height: 24vh;
  width: auto;
  display: block;
}

/* 「18歳以上の方」テキスト */
.age-check__message {
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

/* ENTERボタン */
.age-check__enter {
  display: block;
  width: 88%;
  max-width: 400px;
  padding: 12px 0;
  background-color: var(--c-main);
  color: var(--c-white);
  text-decoration: none;
  font-family: var(--f-title);
  font-size: clamp(2.4rem, 4.5vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  border-radius: 40px;
  text-align: center;
  margin-bottom: 16px;
  transition: opacity 0.2s ease;
}

.age-check__enter:hover {
  opacity: 0.85;
}

/* 「※18歳未満の方はご退出下さい」注意書き */
.age-check__caution {
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  color: var(--c-text);
  margin-bottom: 0;
}

/* セクション間の余白 */
.age-check__divider {
  width: 100%;
  height: 40px;
}

/* 営業時間 */
.age-check__hours {
  font-size: clamp(1.6rem, 3.2vw, 1.8rem);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

/* 電話ボタン */
.age-check__tel {
  display: block;
  width: 88%;
  max-width: 400px;
  padding: 16px 24px;
  background-color: var(--c-tel);
  color: var(--c-white);
  text-decoration: none;
  font-size: clamp(1.8rem, 3.6vw, 2rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  transition: opacity 0.2s ease;
}

.age-check__tel:hover {
  opacity: 0.8;
}

/* LINEボタン（グリーン） */
.age-check__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 88%;
  max-width: 400px;
  padding: 16px 24px;
  background-color: var(--c-line);
  color: var(--c-white);
  text-decoration: none;
  font-size: clamp(1.8rem, 3.6vw, 2rem);
  font-weight: 700;
  margin-bottom: 32px;
  transition: opacity 0.2s ease;
}

.age-check__line:hover {
  opacity: 0.85;
}

/* LINEアイコン */
.age-check__line-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* SNSリスト */
.age-check__sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  list-style: none;
}

.age-check__sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.age-check__sns-link:hover {
  opacity: 0.7;
}

/* SNSアイコン：白SVGを黒に反転（白背景のため） */
.age-check__sns-icon {
  width: 32px;
  height: 32px;
  display: block;
  filter: brightness(0);
}

/* ============================================
   料金シミュレーター（.simulator）
   ============================================ */

/* フォーム一覧ラッパー */
.sim-wrap {
  margin-top: 8px;
}

/* ---- 各フォームグループ ---- */

/* フォームグループ：下ボーダーで区切る */
.sim-form {
  padding: 16px 0;
  border-bottom: 1px solid var(--c-border);
}

.sim-form:first-child {
  padding-top: 0;
}

/* ラベル行：項目名＋必須バッジ＋注意書きの縦積み */
.sim-form__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--c-text);
  line-height: 1.5;
}

/* 「必須」バッジ：赤背景・白文字 */
.sim-form__required {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--c-white);
  background-color: var(--c-red);
  padding: 2px 8px;
  line-height: 1.4;
  flex-shrink: 0;
}

/* 注意書き：深紅・幅100%で折り返す */
.sim-form__attention {
  display: block;
  width: 100%;
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  font-weight: 400;
  color: var(--c-main);
  line-height: 1.7;
  margin-top: 4px;
}

/* 入力欄ラッパー */
.sim-form__control {
  display: block;
}

/* 時間選択：時・分を横並び */
.sim-form__control--time {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* テキスト入力（日付など） */
.sim-form__input {
  display: block;
  width: 100%;
  min-height: 48px;
  /* iOSで空のdate inputが潰れる対策 */
  padding: 12px;
  background-color: var(--c-bg-gray);
  border: none;
  font-size: 1.6rem;
  color: var(--c-text);
  outline: none;
  appearance: none;
  cursor: pointer;
}

.sim-form__input:focus {
  outline: 2px solid var(--c-main);
  outline-offset: -2px;
}

/* セレクト共通：グレー背景・矢印SVG */
.sim-form__select {
  display: block;
  width: 100%;
  padding: 12px 40px 12px 12px;
  background-color: var(--c-bg-gray);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  border: none;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  color: var(--c-text);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}

.sim-form__select:focus {
  outline: 2px solid var(--c-main);
  outline-offset: -2px;
}

/* 非活性セレクト */
.sim-form__select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 時間用セレクト（半幅） */
.sim-form__select--half {
  width: auto;
  flex: 1;
  min-width: 0; /* iOSでflexアイテムが縮み切らず横ズレする対策 */
}

/* 時間セパレーター「:」 */
.sim-form__time-sep {
  font-size: clamp(1.6rem, 3.2vw, 1.8rem);
  font-weight: 700;
  flex-shrink: 0;
}

/* ---- コース選択行 ---- */

/* 各コース行：ラベル左＋セレクト右を横並び */
.sim-course-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-bg-gray);
}

.sim-course-row:last-of-type {
  border-bottom: none;
}

/* コースラベル（左側・固定幅） */
.sim-course-row__label {
  flex: 0 0 80px;
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  font-weight: 400;
  color: var(--c-text);
}

/* コース個数セレクト（右側・可変幅） */
.sim-course-row__select {
  width: auto;
  min-width: 80px;
  padding: 10px 36px 10px 12px;
}

/* ---- 計算結果エリア ---- */

/* 結果エリア全体 */
.sim-result {
  margin-top: 24px;
}

/* 結果ボックス：クリーム背景 */
.sim-result__box {
  background-color: #FFF9E8;
  border: 1px solid #E8D9A0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 結果エリアタイトル */
.sim-result__title {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  font-weight: 700;
  color: var(--c-text);
  padding-bottom: 8px;
  border-bottom: 1px solid #E8D9A0;
}

/* エラーメッセージ */
.sim-result__error {
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  color: #f00;
}

/* 各結果行 */
.sim-result__item {
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  color: var(--c-text);
  line-height: 1.7;
}

/* コース内訳（インデント） */
.sim-result__item--sub {
  padding-left: 1em;
}

/* 合計行：太字・大きめ */
.sim-result__total {
  font-size: clamp(1.6rem, 3.2vw, 1.8rem);
  font-weight: 700;
  color: var(--c-text);
  padding-top: 8px;
  border-top: 1px solid #E8D9A0;
  margin-top: 4px;
}

/* 注意書き */
.sim-result__note {
  font-size: clamp(1.3rem, 2.5vw, 1.4rem);
  color: var(--c-main);
  line-height: 1.8;
  margin-top: 12px;
}

/* ---- ボタン ---- */

/* ボタンラッパー：上余白・中央寄せ */
.sim-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

/* 共通ボタン：ピル形・全幅 */
.sim-btn {
  display: block;
  width: 100%;
  padding: 18px 0;
  border: none;
  border-radius: 50vmax;
  font-size: clamp(1.6rem, 3.2vw, 1.8rem);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
  text-decoration: none;
  /* 計算ボタン（デフォルト）：メインカラー */
  background-color: var(--c-main);
  color: var(--c-white);
}

.sim-btn:hover {
  opacity: 0.8;
}

/* コピーボタン：サブカラー（グレー） */
.sim-btn--secondary {
  background-color: #888;
}

/* LINEボタン：グリーン */
.sim-btn--line {
  background-color: var(--c-line);
}

/* ============================================
   予約方法（.reserve）
   ============================================ */

/* ---- イントロ ---- */

/* イントロブロック：下余白 */
.reserve__intro {
  margin: 32px 0 56px;
}

/* 大見出し：中央・大きめ */
.reserve__intro-lead {
  font-size: clamp(2rem, 3.9vw, 2.2rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* 説明文 */
.reserve__intro-text {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.8;
  margin-bottom: 8px;
}

/* 強調テキスト：深紅 */
.reserve__intro-em {
  color: var(--c-main);
  font-weight: 700;
}

/* 予約ボタングループ：縦並び・中央寄せ */
.reserve__btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

/* 予約ボタン共通：全幅・ピル形 */
.reserve__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88%;
  max-width: 320px;
  height: 64px;
  border-radius: 50vmax;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s ease;
  letter-spacing: 0.05em;
}

.reserve__btn:hover {
  opacity: 0.8;
}

/* ボタン内アイコン */
.reserve__btn-icon {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
  margin-right: 8px;
}

/* LINEボタン：グリーン */
.reserve__btn--line {
  background-color: var(--c-line);
  color: var(--c-white);
}

/* メールボタン：青 */
.reserve__btn--mail {
  background-color: var(--c-link);
  color: var(--c-white);
}

/* ---- 必須項目・項目の詳細ブロック ---- */

/* ブロック共通：下余白 */
.reserve__block {
  margin-bottom: 40px;
}

/* ブロックタイトル：深紅背景・白テキスト */
.reserve__block-title {
  font-size: clamp(2rem, 4.3vw, 2.4rem);
  font-weight: 700;
  padding: 12px;
  margin-bottom: 24px;
  line-height: 1.4;
  border-left: 4px solid var(--c-main);
}

/* ---- 必須項目チェックリスト ---- */

/* テキストエリアラッパー */
.reserve__checklist-wrap {
  background-color: var(--c-bg-gray);
  padding: 32px 16px;
}

/* テキストエリア：読み取り専用・全幅 */
.reserve__checklist {
  width: 100%;
  min-height: 60vh;
  padding: 24px;
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  color: var(--c-text);
  line-height: 2;
  resize: none;
  outline: none;
}

/* コピーボタン：深紅・全幅・ピル形 */
.reserve__copy-btn {
  display: block;
  width: 80%;
  margin: 24px auto 0;
  padding: 14px 0;
  background-color: var(--c-dark);
  color: var(--c-white);
  border: none;
  border-radius: 50vmax;
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.reserve__copy-btn:hover {
  opacity: 0.8;
}

/* ---- 項目の詳細リスト ---- */

/* リスト全体 */
.reserve__detail-list {
  list-style: none;
}

/* 各リストアイテム：上ボーダーで区切る・2カラムレイアウト */
.reserve__detail-item {
  display: flex;
  flex-direction: column;
  /* border-bottom: 1px solid var(--c-border); */
}

.reserve__detail-term {
  padding: 16px 12px;
  background-color: var(--c-bg-gray);
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  font-weight: 700;
  line-height: 1.7;
}

.reserve__detail-desc {
  padding: 16px 12px;
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.8;
}

/* ---- お問い合わせボックス ---- */

/* ボックス全体：水色系の薄い背景 */
.reserve__inquiry {
  background-color: var(--c-bg-cream);
  padding: 40px 24px;
  margin-top: 32px;
}

/* 大見出し */
.reserve__inquiry-lead {
  font-size: clamp(2rem, 3.9vw, 2.2rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 16px;
}

.reserve__inquiry-sub {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.8;
  margin-bottom: 16px;
}

/* 注意書き（標準） */
.reserve__inquiry-note {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.8;
  margin-bottom: 16px;
}

/* キャンセル注意（深紅） */
.reserve__inquiry-caution {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  color: var(--c-main);
  line-height: 1.8;
  font-weight: 700;
}

/* ============================================
   プロフィールページ
   ============================================ */


/* プロフィール情報エリア
中央揃え */
.profile-info {
  text-align: center;
}

/* 名前 */
.profile-info__name {
  font-size: clamp(3.2rem, 6.4vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin-bottom: 6px;
}

/* 年齢・身長（一行テキスト・中央） */
.profile-info__spec {
  font-size: clamp(1.4rem, 2.9vw, 1.6rem);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

/* タグ一覧（中央揃え） */
.profile-info__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
}

/* タグ：ゴールド背景・白文字・角丸 */
.profile-info__tag {
  display: inline-block;
  padding: 0 8px;
  background-color: var(--c-accent);
  color: var(--c-white);
  font-size: clamp(1.3rem, 2.5vw, 1.4rem);
  border-radius: 4px;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* SNSアイコンリスト（黒丸・中央揃え） */
.profile-info__sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 0 24px;
  list-style: none;
}

/* SNSボタン */
.profile-info__sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--c-main);
  border-radius: 50%;
  transition: opacity 0.2s ease;
}

.profile-info__sns-link:hover {
  opacity: 0.75;
}

/* SVGを白く反転（黒アイコン対応） */
.profile-info__sns-icon {
  width: 24px;
  height: 24px;
  display: block;
  filter: brightness(0) invert(1);
}

/* 写真スライダー */
.profile-slider {
  background-color: var(--c-white);
  overflow: hidden;
}

.profile-slider__wrap {
  line-height: 0;
}

.profile-slider__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* slick ドット：画像の下に赤ドット */
.profile-slider .slick-dots {
  position: static;
  padding-top: 12px;
  background-color: var(--c-white);
  line-height: 1;
}

/* slick デフォルト指定を無効化 */
.profile-slider .slick-dotted.slick-slider {
  margin-bottom: 0px !important;
}

.profile-slider .slick-dots li button::before {
  font-size: 10px;
  color: #ccc;
  opacity: 1;
}

.profile-slider .slick-dots li.slick-active button::before {
  color: var(--c-main);
  opacity: 1;
}

/* ページ内アンカーナビ
   黒背景・日本語（上・白）・英字（下・赤） */
.profile-nav {
  background-color: var(--c-black);
  position: sticky;
  top: var(--header-height);
  z-index: 50;
}

.profile-nav__list {
  display: flex;
  list-style: none;
}

.profile-nav__item {
  flex: 1;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.profile-nav__item:last-child {
  border-right: none;
}

.profile-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 80px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.profile-nav__link:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* 日本語（上・白） */
.profile-nav__ja {
  font-size: clamp(1.5rem, 3vw, 1.7rem);
  color: var(--c-white);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* 英字（下・赤） */
.profile-nav__en {
  font-size: clamp(1.2rem, 2.5vw, 1.4rem);
  color: var(--c-red);
  letter-spacing: 0.08em;
  line-height: 1;
  margin-top: 4px;
}

/* ============================================
   プロフィール：セラピストに質問（FAQ）
   ============================================ */

/* セクションタイトル（左ボーダーアクセント） */
.profile-faq__title {
  font-size: clamp(2rem, 3.9vw, 2.2rem);
  font-weight: 700;
  padding: 12px;
  line-height: 1.4;
  margin-bottom: 0;
  border-left: 4px solid var(--c-main);
}

/* Q&A リスト */
.profile-faq__list {
  display: flex;
  flex-direction: column;
}

/* 各 Q&A セット（ボーダー区切り） */
.profile-faq__item {
  padding: 16px 0;
  border-bottom: 1px solid var(--c-border);
}

.profile-faq__item:first-child {}

/* 質問行 */
.profile-faq__q {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  font-weight: 400;
  margin-bottom: 8px;
}

/* 回答行 */
.profile-faq__a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
}

/* Q ラベル（赤） */
.profile-faq__q-label {
  font-size: clamp(2.4rem, 4.6vw, 2.6rem);
  font-weight: 700;
  color: var(--c-main);
  line-height: 1;
  flex-shrink: 0;
}

/* A ラベル（ゴールド） */
.profile-faq__a-label {
  font-size: clamp(2.4rem, 4.6vw, 2.6rem);
  font-weight: 700;
  color: var(--c-accent);
  line-height: 1;
  flex-shrink: 0;
}


/* .profile-comment {
  padding: 32px 0;
} */


/* ============================================
   出勤表
   ============================================ */

/* テーブル全体：幅いっぱい・枠線なし */
.profile-schedule__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e0e0e0;
  margin-top: 16px;
}

/* 各行：下ボーダーで区切り */
.profile-schedule__row {
  border-bottom: 1px solid #e0e0e0;
}

/* 土曜：青背景・白テキスト */
.profile-schedule__row--sat .profile-schedule__date {
  background-color: #3F92FF;
  color: var(--c-white);
}

/* 日曜：赤背景・白テキスト */
.profile-schedule__row--sun .profile-schedule__date {
  background-color: #F6151F;
  color: var(--c-white);
}

/* セル共通 */
.profile-schedule__date,
.profile-schedule__time,
.profile-schedule__action {
  padding: 12px 8px;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  vertical-align: middle;
}

/* 日にちセル */
.profile-schedule__date {
  width: 35%;
  font-weight: 700;
  text-align: center;
  background-color: #F6F6F6;
}

/* 時間セル */
.profile-schedule__time {
  width: 40%;
  text-align: center;
  font-weight: 700;
}

/* 空き状況セル */
.profile-schedule__action {
  width: 25%;
  text-align: center;
}

/* 空き状況ボタン */
.profile-schedule__btn {
  display: inline-block;
  padding: 4px 16px;
  background-color: var(--c-main);
  color: var(--c-white);
  font-size: clamp(1.3rem, 2.5vw, 1.4rem);
  font-weight: 700;
  border-radius: 50vmax;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.profile-schedule__btn:hover {
  opacity: 0.8;
}



/* ============================================
   予約状況
   ============================================ */

.profile-reservation .day-select {
  margin-top: 16px;
}


/* ============================================
   お客様の声
   ============================================ */

/* ============================================
  日記
   ============================================ */


/* ============================================
   求人ページ
   ============================================ */
.recruit {}


/* ============================================
   求人ページ：コピーセクション
   ============================================ */
.recruit-copy {
  padding-bottom: 0 0 40px;
}

/* キャッチコピーブロック：白背景・黒細ボーダー */
.recruit-copy__block {
  padding: 16px;
  text-align: center;
  margin-bottom: 16px;
}

/* ラベル：「いま話題の女性用風俗」細字・中央 */
.recruit-copy__label {
  font-size: clamp(2.4rem, 4.6vw, 2.6rem);
  font-weight: 700;
  background-color: #F3E9D3;
  display: inline-block;
  padding: 0 24px;
  margin-bottom: 8px;
}

/* サブテキスト：「入店3か月で」 */
.recruit-copy__sub {
  font-size: clamp(2.0rem, 4.3vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 4px;
}

/* メインコピー行：大文字＋小文字を横並び */
.recruit-copy__headline {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  line-height: 1;
}

/* 大きいテキスト：「月100万円」 */
.recruit-copy__big {
  font-size: clamp(5.6rem, 10.7vw, 6.0rem);
  font-weight: 700;
  color: var(--c-accent);
  letter-spacing: -0.02em;
}

/* 小さいテキスト：「以上可能」 */
.recruit-copy__small {
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 700;
  padding-bottom: 4px;
}

/* YouTube埋め込み：16:9アスペクト比を維持 */
.recruit-copy__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.recruit-copy__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}



/* ============================================
   求人ページ：特色セクション
   ============================================ */
.recruit-features {
  padding: 16px 16px 48px;
}

/* リスト：縦並び・間隔16px */
.recruit-features__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 各アイテム：pill形状・深紅ボーダー・白背景 */
.recruit-features__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 24px;
  border: 2px solid var(--c-main);
  border-radius: 50vmax;
  background-color: var(--c-white);
  text-align: center;
}

/* ラベル（細字・黒） */
.recruit-features__label {
  font-size: clamp(1.6rem, 3.8vw, 1.8rem);
  font-weight: 700;
  color: var(--c-text);
}

/* 値（太字・深紅） */
.recruit-features__value {
  font-size: clamp(2.4rem, 4.6vw, 2.6rem);
  font-weight: 700;
  color: var(--c-red);
}



/* ============================================
   求人ページ：掲載実績セクション
   ============================================ */
.recruit-media {
  padding: 16px 16px 48px;
}

/* 掲載メディア：3種のリストをSPは縦並び */
.recruit-media__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 40px;
}

/* 各メディアアイテム */
.recruit-media__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* メディア種別ラベル（雑誌 / YouTube / TV） */
.recruit-media__label {
  font-size: clamp(1.8rem, 3.4vw, 1.9rem);
  font-weight: 700;
  padding: 8px;
  line-height: 1.4;
  margin-bottom: 12px;
  border-left: 4px solid var(--c-main);
}

/* 掲載メディア画像：横幅いっぱい */
.recruit-media__img {
  width: 100%;
  height: auto;
  display: block;
}

/* YouTube埋め込み：16:9アスペクト比を維持 */
.recruit-media__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.recruit-media__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}


/* ============================================
   求人ページ：代表メッセージセクション
   ============================================ */
.recruit-message {
  padding: 0 0 48px;
}

/* セクションタイトル：左に深紅ボーダー */
.recruit-message__title {
  font-size: clamp(2rem, 3.9vw, 2.2rem);
  font-weight: 700;
  padding: 12px;
  line-height: 1.4;
  margin-bottom: 12px;
  border-left: 4px solid var(--c-main);
}

/* 代表者写真：横幅いっぱい */
.recruit-message__photo {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 24px;
}

/* 本文エリア */
.recruit-message__body {
  padding: 0 16px;
}

/* 段落間の余白 */
.recruit-message__body p+p {
  margin-top: 16px;
}



/* ============================================
   求人ページ：セラピストの声セクション
   ============================================ */
.recruit-voices {
  padding: 48px 0;
}

/* 各セラピストカード */
.recruit-voice {
  padding-bottom: 40px;
}

/* セラピスト間の区切り線 */
.recruit-voice+.recruit-voice {
  padding-top: 40px;
}

/* プロフィールカード：写真左・テキスト右 */
.recruit-voice__profile {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

/* 写真：固定幅・縦長比率 */
.recruit-voice__photo {
  width: 40%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  flex-shrink: 0;
}

/* 情報エリア */
.recruit-voice__info {
  flex: 1;
  padding-top: 4px;
}

/* 名前 */
.recruit-voice__name {
  font-size: clamp(1.8rem, 3.6vw, 2rem);
  font-weight: 700;
  margin-bottom: 8px;
}

/* 年齢（名前の後ろ・細字） */
.recruit-voice__age {
  font-size: clamp(1.4rem, 2.9vw, 1.6rem);
  font-weight: 400;
}

/* 経歴・月給 */
.recruit-voice__career,
.recruit-voice__salary {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.6;
}

.recruit-voice__career {
  margin-bottom: 8px;
}


/* ============================================
   求人ページ：募集要項セクション
   ============================================ */
.recruit-requirements {
  padding: 48px 0 64px;
}

/* 定義リスト全体 */
.recruit-requirements__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-border);
}

/* 各項目ラッパー */
.recruit-requirements__item {
  border-bottom: 1px solid var(--c-border);
}

/* 用語（ラベル行）：ダーク背景・白文字 */
.recruit-requirements__term {
  background-color: var(--c-dark);
  color: var(--c-white);
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  font-weight: 700;
  padding: 8px;
}

.recruit-requirements__desc {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  padding: 16px 8px 32px;
  line-height: 1.8;
}


/* ============================================
   求人CTA（黒背景・LINEボタン）
   ページ内複数配置を想定
   ============================================ */
.recruit-cta {
  background-color: var(--c-bg-gray);
  padding: 32px 0 56px;
  text-align: center;
}

/* リード文 */
.recruit-cta__lead {
  font-size: clamp(1.8rem, 3.6vw, 2.0rem);
  margin-bottom: 16px;
}

/* LINEボタン */
.recruit-cta__line-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--c-line);
  color: var(--c-white);
  font-size: clamp(1.8rem, 3.4vw, 1.9rem);
  font-weight: 700;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 50vmax;
  width: 88%;
  max-width: 360px;
  transition: opacity 0.2s ease;
}

.recruit-cta__line-btn:hover {
  opacity: 0.85;
}

/* LINEアイコン */
.recruit-cta__line-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}


/* ============================================
   予約速報ティッカー（.news-ticker）
   1件ずつ自動切り替え表示
   ============================================ */

/* 外枠：高さ固定・メインカラー背景・はみ出し非表示 */
.news-ticker {
  background-color: var(--c-black);
  height: 8rem;
  overflow: hidden;
  position: relative;
  margin-bottom: 40px;
}

/* リスト：高さを外枠に合わせる */
.news-ticker__list {
  position: relative;
  height: 100%;
  list-style: none;
}

/* 各アイテム：絶対配置・初期は透明で下に待機 */
.news-ticker__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
  font-size: clamp(1.5rem, 1.45vw, 1.5rem);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(40%);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

/* 表示中アイテム */
.news-ticker__item.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ============================================
   howto：お問い合わせ（CTA）セクション
   ============================================ */

/* セクション全体：黒背景・中央揃え */
.howto-contact {
  background-color: var(--c-bg-gray);
  padding: 40px 0;
  text-align: center;
}

/* セクションタイトル：白・Instrument Serif */
.howto-contact__heading {
  font-size: clamp(2.4rem, 5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 16px;
}

/* リードテキスト：白・細め */
.howto-contact__lead {
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  line-height: 1.8;
  margin-bottom: 32px;
  opacity: 0.85;
}

/* ボタングループ：縦並び・中央寄せ */
.howto-contact__btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

/* ボタン共通：ピル形・全幅 */
.howto-contact__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 88%;
  max-width: 320px;
  height: 64px;
  border-radius: 50vmax;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: opacity 0.2s ease;
}

.howto-contact__btn:hover {
  opacity: 0.8;
}

/* ボタン内アイコン */
.howto-contact__btn-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* LINEボタン：グリーン */
.howto-contact__btn--line {
  background-color: var(--c-line);
  color: var(--c-white);
}

/* 電話ボタン */
.howto-contact__btn--tel {
  background-color: var(--c-tel);
  color: var(--c-white);
}

/* 受付時間：小さめ・白・薄め */
.howto-contact__hours {
  font-size: clamp(1.45rem, 2.8vw, 1.55rem);
  letter-spacing: 0.03em;
}