/* =========================================
   PLUME HOMME（メンズLP）専用のスタイル：白・グレー・黒のモノトーン
   ・土台は女性用LPの ../style.css をそのまま読み込み、ここで色と一部の部品だけを上書きする
   ・このファイルは mens/index.html だけが読み込むので、女性用ページには影響しない
   ========================================= */

/* 色：女性用の変数名のまま、中身をメンズ用のモノトーンに置き換える
   （女性用の「ベージュ・ブラウン」を使っている部品は、すべて下の色になる） */
:root {
  --homme-ink: #231f20;     /* メインカラー：チャコールブラック（ロゴ画像の背景色と同じ） */
  --homme-mid: #888888;     /* 補助色：ミディアムグレー（飾り・アイコンの線など） */

  --ivory: #f7f7f6;         /* メイン背景：オフホワイト */
  --ivory-dark: #eeeeec;    /* セクション背景：ライトグレー */
  --beige: #eeeeec;         /* セクション背景・明るいボタン（女性用ではベージュ） */
  --beige-line: #d6d6d4;    /* 境界線：薄いシルバーグレー */
  --wood: #231f20;          /* ボタン・アクセント（女性用ではブラウン） */
  --wood-dark: #231f20;     /* 見出し */
  --text: #2e2a2b;          /* 本文：真っ黒ではなく少しやわらかいチャコール */
  --text-sub: #6e6e6e;      /* 補足文：#888888 より少し濃くして、小さな文字も読みやすく */
  --white: #ffffff;         /* カード */
}

/* ---------- ヘッダー：チャコールブラック（ロゴ画像の背景色と同じ）。ロゴの白文字だけが浮かぶように ---------- */
/* ロゴ画像の黒とつながるよう、透けない単色にする */
.header {
  background: var(--homme-ink);
  border-bottom: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.header__inner { padding-top: 8px; padding-bottom: 8px; }

/* 正式ロゴ（元画像そのまま）。ロゴの背景がチャコールなので、角を丸めた小さな「エンブレム」として置く。
   画像の余白部分は表示枠で隠し、文字の部分だけを見せる
   （元画像 1106×769 のうち、ロゴ文字のある横170〜920・縦240〜570 の範囲） */
.homme-logo {
  position: relative;
  display: block;
  width: 118px;
  aspect-ratio: 750 / 330;
  overflow: hidden;
  line-height: 0;
  border-radius: 6px;
}

.homme-logo img {
  position: absolute;
  width: 147.47%;            /* 1106 / 750 */
  max-width: none;
  height: auto;
  left: -22.67%;             /* 170 / 750 */
  top: -72.73%;              /* 240 / 330 */
}

/* ヘッダーでは背景と同じ色なので、角丸なしでなじませる */
.header .homme-logo { border-radius: 0; }

.men-link--to-women { color: #fff; }

/* ---------- 三本線メニュー（女性用LPと同じ部品・同じ動き。色だけモノトーン） ---------- */
/* ヘッダーは女性用と同じ3列（左：三本線／中央：ロゴ／右：女性向けLPへのリンク） */
.header--nav .men-link--to-women { justify-self: end; white-space: nowrap; }

/* チャコールのヘッダーの上なので、三本線は白 */
.header .nav-toggle { color: #fff; }
.header .nav-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.nav-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 背景の幕・影は茶色みのないグレーに */
.drawer-overlay { background: rgba(0, 0, 0, 0.5); }
.drawer { background: var(--white); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18); }
.drawer__head { border-bottom-color: var(--beige-line); }
.drawer__title { color: var(--homme-mid); }
.drawer__list li + li .drawer__link::before { border-top-color: var(--beige); }
.drawer__link:hover { background: var(--ivory); }

/* メニューのいちばん下：カウンセリング予約ボタン（押しやすい大きさで、左右に余白） */
.drawer__reserve { padding: 0 24px 32px; }
.drawer__reserve .btn { display: block; width: 100%; text-align: center; }

/* ---------- ボタン：チャコールブラック＋白文字 ---------- */
.btn--primary {
  background: var(--homme-ink);
  color: #fff;
  box-shadow: 0 4px 0 #000;
}

.btn--primary:hover { background: #3a3536; }
.btn--primary:active { background: #000; transform: translateY(2px); box-shadow: 0 2px 0 #000; }
.btn--primary:focus-visible { outline: 3px solid var(--homme-mid); outline-offset: 3px; }

/* スマホ下部の固定予約ボタン（帯も白・グレーに） */
.fixed-cta {
  background: rgba(247, 247, 246, 0.96);
  border-top: 1px solid var(--beige-line);
}

/* ---------- 写真の仮枠：グレーの点線枠（女性用の茶色の斜線はなし） ---------- */
.photo__placeholder {
  background: var(--ivory-dark);
  background-image: none;
  border: 1px dashed var(--beige-line);
  border-radius: 16px;
  color: var(--text-sub);
}

/* 脱毛方法カードの写真の仮枠：高さを4:3で決める
   （height: 100% のままだと、iPhoneのSafariでカード全体の高さまで伸び、下の文字がカードからはみ出すため） */
.method-card__photo.photo__placeholder {
  display: flex;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
}

/* ---------- 細かな部品のグレー化 ---------- */
.feature__num { color: var(--homme-mid); opacity: 0.6; }
.flow__icon { background: var(--white); border-color: var(--beige-line); color: var(--homme-ink); }
.flow__item:not(:last-child)::before { border-left-color: var(--homme-mid); opacity: 0.5; }

/* ファーストビューの背景動画：元の16:9のまま全体を表示（スマホでも大きく切り取らない）。
   読み込み中・再生できないときは poster の画像、その前はライトグレー */
.hero-video {
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ivory-dark);
}

/* キャッチコピー「はじめてのメンズ美容に、／安心を。」：スマホで1行目が割れないよう、字の大きさと字間を少しだけ詰める
   （幅374px以下は style.css の 24px のまま） */
@media (min-width: 375px) and (max-width: 767px) {
  .hero__copy { font-size: 26px; letter-spacing: 0.04em; }
}

/* ファーストビューの予約・LINEボタン：行の高さを少し詰めて、押しやすさ（高さ50px以上）を保ったまま縦幅を控えめに */
.hero__text .btn { line-height: 1.6; }

/* PCのファーストビュー：写真の上の文字の下地もオフホワイト */
@media (min-width: 1024px) {
  .hero__text { background: rgba(247, 247, 246, 0.88); }
  /* キャッチコピーを写真の上の枠の中でも2行に（「はじめてのメンズ美容に、／安心を。」） */
  .hero__copy { font-size: 30px; letter-spacing: 0.04em; }
  /* 写真が届くまでの仮枠：重ねた文字（予約・お問い合わせボタン）がはみ出さない高さに */
  .photo--hero .photo__placeholder { min-height: 620px; }
}

/* ---------- 未確定情報の目印（あとで差し替える箇所。目立つよう、あえて別の色） ---------- */
.tbd {
  display: inline-block;
  margin: 4px 0;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f3e3c7;
  color: #6b4a1e;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.tbd-box {
  border: 1px dashed var(--beige-line);
  border-radius: 12px;
  background: var(--white);
  padding: 20px;
  text-align: center;
  color: var(--text-sub);
  font-size: 14px;
}

.tbd-box .tbd { margin-bottom: 6px; }

/* ---------- フッター：チャコールブラック＋白文字 ---------- */
.footer {
  background: var(--homme-ink);
  color: #fff;
}

.footer .small { color: #fff; opacity: 0.7; }
.footer__parking,
.footer__tel-note { color: #d6d6d4; }
.footer__tel a { color: #fff; }

/* フッターではロゴの背景と同じ色なので、角丸なしでなじませる */
.footer .homme-logo {
  width: 150px;
  margin: 0 auto 16px;
  border-radius: 0;
}

/* Googleマップ：チャコールに映える明るいグレーのボタン */
.footer__map { background: var(--ivory-dark); color: var(--homme-ink); }

.footer__women {
  margin-top: 16px;
  font-size: 12px;
}

.footer__women a { color: #fff; text-underline-offset: 3px; }

/* ---------- PLUME HOMMEについて：施術風景の写真と3段落の本文 ---------- */
/* 写真は横長（3:2）のまま、切り取らずに全体を見せる */
.about-photo { margin: 0 0 32px; }
.about-photo .photo { border-radius: 12px; }

.about-photo__caption {
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--text-sub);
  text-align: center;
  letter-spacing: 0.06em;
}

/* スマホでは長い文が中央そろえだと読みにくいので左そろえ。行間と段落の間を少し広めに */
.about-body {
  max-width: 34em;
  margin: 0 auto;
  font-size: var(--fs-body);
  line-height: 2;
  letter-spacing: var(--ls-body);
}

.section .about-body p { line-height: 2; }
.section .about-body p + p { margin-top: 1.6em; }

@media (min-width: 768px) {
  .about-photo { max-width: 720px; margin: 0 auto 40px; }
  .about-body { text-align: center; }
}

/* ---------- 2つの脱毛方法：メンズの写真 ---------- */
/* メンズの2枚はどちらも横長（3:2）なので、女性用の4:3ではなく元の比率の枠にそろえ、切り取らずに見せる */
.method-photo__img--homme { aspect-ratio: 3 / 2; }

/* 説明文が2段落以上のときも、2つめ以降を1つめと同じ左そろえ・本文サイズに */
.section .method-card__catch ~ p:not(.method-card__note) {
  font-size: var(--fs-body);
  text-align: left;
}

/* ---------- お客様の声：白いカードを4枚（スマホは縦、PCは2枚ずつ2段） ---------- */
/* 女性用の吹き出し（.voice）を土台に、メンズは脱毛方法のカードと同じ「上に黒い線」の四角いカードにする */
.homme-voice-list {
  display: grid;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.homme-voice {
  background: var(--white);
  border-radius: 16px;
  border-top: 4px solid var(--homme-ink);
  padding: 28px 20px 32px;
  text-align: center;
}

.homme-voice__num {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--homme-mid);
}

.section .homme-voice__text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.8;
  color: var(--homme-ink);
}

.homme-voice-list + .homme-voice-note {
  max-width: 560px;
  margin: 20px auto 0;
  text-align: right;
}

@media (min-width: 768px) {
  .homme-voice-list,
  .homme-voice-list + .homme-voice-note { max-width: none; }
  .homme-voice-list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  /* 横に並ぶカードの高さをそろえ、言葉はカードの中で上下中央に */
  .homme-voice { display: flex; flex-direction: column; justify-content: center; padding: 32px 20px 36px; }
}

/* ---------- 実際のお客様の施術経過：横に流れるギャラリー（動きは case-gallery.js） ---------- */
/* カードの中身（写真・Before/After・説明）は女性用LPの .case をそのまま使い、色だけモノトーンに */
.case-group + .case-group { margin-top: 48px; }

.case-group__title {
  margin-bottom: 16px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: var(--homme-ink);
}

/* 横に流れる枠。左右の端を少しだけ薄くして、続きがあることを伝える
   （横の位置は case-gallery.js が transform で動かす。縦のスワイプはページのスクロールに任せる） */
.case-gallery {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  --fade: 20px;
}

/* 左右の端を背景色でうっすら隠す（mask-image は動かすたびに描き直しが重く、iPhoneで動きがもたつくため、上に重ねる方式） */
.case-gallery::before,
.case-gallery::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: var(--fade);
  pointer-events: none;
}

.case-gallery::before { left: 0; background: linear-gradient(to right, var(--ivory-dark), rgba(238, 238, 236, 0)); }
.case-gallery::after { right: 0; background: linear-gradient(to left, var(--ivory-dark), rgba(238, 238, 236, 0)); }

.case-gallery.is-dragging { cursor: grabbing; }
.case-gallery.is-dragging .case-gallery__zoom { pointer-events: none; }
.case-gallery:focus-visible { outline: 2px solid var(--homme-mid); outline-offset: 4px; }

.case-gallery__track {
  display: flex;
  gap: 14px;
  width: max-content;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  will-change: transform;
}

/* スマホは画面幅の約8割（隣のカードが少し見える）。写真は正方形のまま全体を表示 */
.case-gallery__item {
  flex: 0 0 auto;
  width: min(78vw, 320px);
  user-select: none;
  -webkit-user-select: none;
}

.case-gallery__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.case-gallery__zoom img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
}

.case-gallery__zoom:focus-visible { outline: 3px solid var(--homme-ink); outline-offset: -3px; }

/* Before / After の札：After はチャコール */
.case__label { background: rgba(255, 255, 255, 0.92); color: var(--homme-ink); }
.case__label--after { background: var(--homme-ink); color: #fff; }

.case__method { background: var(--ivory-dark); color: var(--homme-ink); }
.case__method--wax { background: var(--homme-ink); color: #fff; }

/* 部位・施術方法・年代を横一列に（スマホでも1行に収まる大きさ） */
.case-gallery .case__title {
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 0;
  font-size: 17px;
  white-space: nowrap;
}

.case-gallery .case__method { padding: 2px 9px; font-size: 11px; }

.case__age {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.04em;
  color: var(--text);
}

/* 光脱毛の照射回数・撮影時期は、その下の行に（記号なし） */
.case__details { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.7; color: var(--text-sub); }
.case-gallery .case__details li { padding-left: 0; }

/* カード下の説明は中央そろえ */
.case-gallery .case__body { text-align: center; }
.case-gallery .case__title { justify-content: center; }
.case-gallery .case__details li::before { content: none; }

.section .case-group__note { margin-top: 14px; text-align: center; color: var(--text-sub); }

/* ギャラリー下のInstagram案内 */
.case-instagram { margin-top: 44px; text-align: center; }
.section .case-instagram__lead { margin-bottom: 14px; font-size: 14px; color: var(--text-sub); }
.case-instagram .btn { min-height: 48px; }

@media (min-width: 768px) {
  .case-gallery__item { width: 300px; }
  .case-gallery__track { gap: 20px; }
  .case-gallery { --fade: 48px; }
}

/* ---------- 施術経過の写真の拡大表示 ---------- */
.case-lightbox {
  width: min(92vw, 720px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--white);
  color: var(--text);
}

.case-lightbox::backdrop { background: rgba(20, 18, 19, 0.82); }

.case-lightbox__inner { position: relative; }

.case-lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(92vh - 64px);
  object-fit: contain;     /* 拡大しても切り取らない */
  background: #000;
}

.case-lightbox__caption {
  padding: 14px 20px 16px;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

.case-lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(35, 31, 32, 0.85);
  color: #fff;
  font-size: 22px;
  line-height: 40px;
  cursor: pointer;
}

.case-lightbox__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

html.is-lightbox-open { overflow: hidden; }