/* ==========================================================================
   tablet.css — タブレット（画面幅600〜1023px）用の調整
   2026-09-25 スタジオでお客さまにお見せするとき窮屈だったので、
   1024px以上と同じPCレイアウトを600pxから使うようにした（gen.js の media も600pxに変更）。
   このファイルは PC用CSSのあとに読み込み、幅の狭いタブレットで崩れる箇所だけを直す。

   読み込み: <link href="/css/tablet.css" media="(min-width: 600px) and (max-width: 1023px)">
   ========================================================================== */

/* ==== 全体の余白 ==== */
:root {
  --pc-gutter: 24px;       /* 画面の左右の最低余白（PCは40px） */
  --pc-header-h: 64px;     /* ヘッダーの高さ（PCは80px） */
}

/* ==== ヘッダー ====
   メニュー7本＋電話＋ボタン2つは横に並びきらないので、
   タブレットではメニューをたたんでハンバーガーに戻す（中身はスマホと同じドロワー） */
.header-pc { display: none; }
/* PC用CSSがドロワーを消しているので、タブレットでは使えるように戻す */
.nav-drawer { display: block; }
.header__icon { display: block; }
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--pc-gutter);
}
.header__logo { width: 124px; height: auto; }
/* スマホ版はアイコンを絶対配置しているので、横並びに戻す。
   並びは ロゴ …… Instagram / 電話 / メニュー（スマホと同じ順番） */
.header__icon--hamburger,
.header__icon--tel,
.header__icon--insta {
  position: static;
  inset: auto;
  order: 2;
}
.header__icon--insta { order: 1; margin-left: auto; }
.header__icon--tel { order: 2; }
.header__icon--hamburger { order: 3; }
.header__logo { order: 0; }

/* ==== トップページ ==== */
/* FVの写真は3列だと1枚が細いので2列に */
.fv__pc { gap: 10px; padding: 0 10px; }
.fv__pc-col:nth-child(3) { display: none; }

/* 撮影メニューのカードは2列 */
.plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }

/* 6つのポイントは、左右2段組みをやめて縦に積む */
.points {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "grid" "detail";
  row-gap: 36px;
}

/* ブランドメッセージの下段も縦に積む */
.brand-msg__body {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 24px;
  min-height: 0;
}
.brand-msg__body .fv-logo,
.brand-msg__heading { grid-column: 1; justify-self: center; }
.brand-msg__text { grid-column: 1; grid-row: 3; }
/* 後ろのいびつな丸は、縦に積んだロゴ＋見出しの後ろに置く */
.brand-msg__decor {
  inset: -46px auto auto 50%;
  width: 380px;
  height: 306px;
  transform: translateX(-50%);
}

/* ==== 各プランページ ==== */
/* 文字と写真の2列は、タブレットでは写真を小さめに */
.pp-fv { grid-template-columns: minmax(0, 1fr) clamp(280px, 38vw, 380px); column-gap: 32px; }

/* ==== フォト商品 ==== */
/* 写真と価格表の2列をやめて縦に積む（価格表が潰れるため） */
.pd-item {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "name" "photos" "sub" "price";
  row-gap: 18px;
}

/* ==== 見積もりシミュレーション ==== */
/* オプションのカードは2列（PCは3列） */
.es-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ==== 見積もりシミュレーション ====
   PCは「左に本体・右に選択中バー」の2列。タブレットの幅では2列が収まらないので、
   スマホと同じ1列に戻し、バーは画面の下に貼り付ける。
   本体は 390px設計を 1.6倍に拡大して、画面幅いっぱい近くで見せる */
.estimate-page {
  --es-zoom: 1.6;
  --es-main-w: calc(390px * 1.6);
  --es-left: max(var(--pc-gutter), calc((100% - var(--es-main-w)) / 2));
}
.es-bar-stage {
  left: 50%;
  width: calc(390px * 1.6);
  transform: translateX(-50%);
  top: var(--pc-header-h);
}
.es-bar { width: 100%; zoom: 1.2; }

/* ==== フッター ====
   3列だと「レンタル衣装ギャラリー」などの長い項目が重なるので2列にし、
   ロゴと住所の下にメニューを置く（PCは横並びの3列） */
.footer {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "logo"
    "tagline"
    "info"
    "sns"
    "nav"
    "wordmark"
    "legal";
  row-gap: 0;
}
.footer-nav { margin-top: 36px; }
.footer-nav { padding-right: 40px; }
.footer-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.footer-nav__ja { font-size: 14px; }

/* 6つのポイントのボタンは、正方形だと大きすぎて本文が隠れるので横長にする（2026-09-25） */
.points-grid__item {
  aspect-ratio: auto;
  height: 8em;
}

/* 選んだポイントの見出しと説明は中央寄せ */
.points__detail-label,
.points__detail-text {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* フッターは、メニューより上（ロゴ・キャッチ・住所・SNS）を中央寄せに */
.footer__leaf-logo { margin-left: auto; margin-right: auto; }
.footer__tagline { text-align: center; }
.footer__info { margin: 36px auto 0; text-align: center; }
/* アイコンと文字はひとかたまりで中央に。文字は左そろえのままにして、
   アイコンが郵便番号のすぐ左に来るようにする */
.footer__info p { justify-content: center; text-align: left; }
.footer__sns-row { margin-left: auto; margin-right: auto; }

/* 選んだポイントの写真は、元の縦横比のまま横幅を半分に（2026-09-25 金田さん指定） */
.points__detail-photo {
  width: 50%;
  height: auto;
  aspect-ratio: auto;
  margin: 0 auto;
}
/* 中の写真は枠いっぱいに敷く作り（.img-full）なので、
   高さを写真そのものに決めてもらう（切り抜かず、元の縦横比のまま） */
.points__detail-photo img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: fill;
}