@charset "UTF-8";
/* =============================================================================
   theme_movie  共通スタイル（親ページ=index / 子ページ=detail 汎用）
   - カラーは全て .theme_movie スコープの CSS変数で一元管理（:root には持たせない）
   - このファイル1枚を親・子両ページから <link> して使用
   - 画像はユーザー書き出し。<img>/背景の差し込み口のみ用意
   - 商品タグ .tagitem--* は movie.css の既存定義を流用（本ファイルでは定義しない）
   ============================================================================= */

/* =============================================================================
   1. カラー変数管理（ここだけ変えれば親子両ページが一括で変わる）
   ============================================================================= */
.theme_movie {
  /* ===== テーマ ===== */
  --tm-theme:        #7FB2B5;   /* テーマカラー */
  --tm-theme-dark:   #5f9d78;   /* 濃色（hover等） */
  --tm-theme-tint:   #eef6f1;   /* 淡色（背景用） */

  /* ===== テイスト別テーマ色（下部「その他のテイスト」カードで全ページ共通に使用＝共有定数） ===== */
  --tm-taste-natural:  #78B992;   /* アットホーム */
  --tm-taste-dramatic: #CCB34F;   /* ドラマチック */
  --tm-taste-joyful:   #E5869C;   /* にぎやか（ジョイフル） */
  --tm-taste-elegant:  #BA81C4;   /* 上品（エレガント） */

  /* ===== 文字色 ===== */
  --tm-text:         #3a3a3a;
  --tm-text-sub:     #7a7a7a;
  --tm-text-strong:  #222222;   /* 濃いめの本文（商品説明等） */
  --tm-text-inverse: #ffffff;
  --tm-text-theme:   var(--tm-theme);

  /* ===== 背景色 ===== */
  --tm-bg:           #ffffff;
  --tm-bg-theme:     var(--tm-theme);
  --tm-bg-tint:      var(--tm-theme-tint);
  --tm-bg-cream:     #f7f4ec;   /* ヒーロー等のやわらか背景 */
  --tm-bg-meta:      #f3f3f3;   /* 商品メタ情報ボックス背景 */
  --tm-hero-bg:      var(--tm-bg-cream);   /* 子ヒーローMV背景（テーマ別CSSで上書き） */

  /* ===== 枠線色 ===== */
  --tm-border:       #e2e2e2;
  --tm-border-theme: var(--tm-theme);
  --tm-border-guide: #7fb2b5;   /* 選び方ガイド枠 */

  /* ===== アクセント（バッジ・タブ・POINT等） ===== */
  --tm-original:      #FFB300;   /* おまかせ（単色フォールバック） */
  --tm-canva:        #02C2CC;   /* Canva（単色フォールバック） */
  --tm-original-grad: linear-gradient(to right, #FF9100 0%, #FFE926 130%);  /* おまかせグラデ */
  --tm-canva-grad:   linear-gradient(to right, #02C2CC 0%, #7426EF 100%);  /* Canvaグラデ */
  --tm-template:      #F96971;    /* 自作（ピンク） */
  --tm-template-tint:  #FFF6F6;   /* 自作エリア背景 */
  --tm-info:         #4c8cd9;   /* 枠線アクセント（青） */
  --tm-gray:         #d9d9d9;   /* 非活性タブ等 */
  --tm-gray-tint:    #eeeeee;   /* フッターボタン背景 */

  /* ===== 装飾 ===== */
  --tm-pill-bg:      rgba(255, 255, 255, .7); /* ヒーローのピル下地 */

  /* ===== レイアウト / 余白 ===== */
  --tm-content-max:  720px;     /* SP基準デザイン。PCで拡張 */
  --tm-radius:       10px;
  --tm-radius-lg:    18px;
  --tm-gap:          clamp(3.2rem, 2rem + 4vw, 6.4rem);

  /* ===== モーション ===== */
  --tm-duration:     250ms;
  --tm-ease:         cubic-bezier(0.16, 1, 0.3, 1);
}

/* テイスト詳細ページのテーマ色は「テーマ別CSS」で切り出して管理する。
   ─ 本ファイル(theme_movie.css)は配色を持たない共通土台。構造側は全て
     --tm-theme / --tm-text-theme / --tm-hero-bg など“テーマ変数”のみ参照する。
   ─ 各ページは 土台CSS + 該当テーマCSS の2枚を読み込む：
       ナチュラル   … theme_movie_natural.css  → <div class="theme_movie theme_movie--detail theme_movie--natural">
       ドラマチック … theme_movie_dramatic.css → .theme_movie--dramatic
       にぎやか/ジョイフル … theme_movie_joyful.css → .theme_movie--joyful
       上品/エレガント … theme_movie_elegant.css → .theme_movie--elegant
   ─ テーマCSS未読込・テーマclass未付与時は下記 .theme_movie 既定色(--tm-theme)で表示。
   ※ --tm-text-theme/--tm-bg-theme/--tm-border-theme は .theme_movie で
      var(--tm-theme) に紐付け済み。テーマCSSは --tm-theme と --tm-hero-bg を
      上書きするだけで全体の配色が切り替わる。 */

/* =============================================================================
   2. ベース（.theme_movie 配下にのみ適用）
   ============================================================================= */
.theme_movie {
  color: var(--tm-text);
  background-color: var(--tm-bg);
  line-height: 1.7;
  word-break: break-word;
  font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Verdana, "メイリオ", Meiryo, sans-serif;
}
.theme_movie img { max-width: 100%; height: auto; vertical-align: bottom; }

/* =============================================================================
   3. レイアウト土台
   ============================================================================= */
.theme_movie_inner {
  width: 100%;
  max-width: var(--tm-content-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.theme_movie_section { padding-block: var(--tm-gap); }
.theme_movie_section--tint  { background-color: var(--tm-bg-tint); }
.theme_movie_section--theme { background-color: var(--tm-bg-theme); color: var(--tm-text-inverse); }

/* =============================================================================
   4. セクション見出し（JP大見出し＋EN小見出し＋リード）
   ============================================================================= */
.theme_movie_head { text-align: center; margin-bottom: 2.4rem; }
.theme_movie_head_en {
  display: block;
  font-size: clamp(1.1rem, 1rem + .3vw, 1.3rem);
  letter-spacing: .18em;
  color: var(--tm-text-theme);
  font-weight: 700;
  margin-top: .6rem;
}
.theme_movie_head_ttl {
  font-weight: 700;
  font-size: 2rem; /* SP。PCは @media(min-width:768px) で上書き（clampを使わず画面幅ごとに指定） */
  line-height: 1.4;
  color: var(--tm-text-theme);
}
.theme_movie_head_lead {
  margin-top: 1.2rem;
  font-size: clamp(1.4rem, 1.3rem + .3vw, 1.6rem);
  color: var(--tm-text-sub);
}
.theme_movie_head--inverse .theme_movie_head_ttl,
.theme_movie_head--inverse .theme_movie_head_en,
.theme_movie_head--inverse .theme_movie_head_lead { color: var(--tm-text-inverse); }

/* 見出しの左右に「＼ ／」の斜め線を添える装飾 */
.theme_movie_head--marks .theme_movie_head_ttl {
  display: inline-flex; align-items: center; gap: 1.6rem;
}
.theme_movie_head--marks .theme_movie_head_ttl::before,
.theme_movie_head--marks .theme_movie_head_ttl::after {
  content: ""; width: 2px; height: .9em; flex: none;
  background-color: currentColor; border-radius: 2px;
}
.theme_movie_head--marks .theme_movie_head_ttl::before { transform: rotate(-22deg); }
.theme_movie_head--marks .theme_movie_head_ttl::after  { transform: rotate(22deg); }

/* 選び方ガイド（--cream セクション）個別スタイル */
.theme_movie_section--cream .theme_movie_head,
.theme_movie_section--cream .theme_movie_head_ttl,
.theme_movie_section--cream .theme_movie_head_lead { color: #222222; }
.theme_movie_section--cream .theme_movie_guideGrid { width: 90%; margin: 0 auto; }

/* =============================================================================
   5. ボタン
   ============================================================================= */
.theme_movie_btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .8rem; width: 100%; max-width: 44rem; min-height: 5.6rem;
  margin-inline: auto; padding: 1.2rem 3.2rem;
  border: 1px solid var(--tm-border); border-radius: 999px;
  background-color: var(--tm-bg); color: var(--tm-text);
  font-weight: 700; text-align: center;
}
/* 矢印はテキストではなく疑似要素の border で作成（右向きシェブロン） */
.theme_movie_btn::after {
  content: ""; width: .8rem; height: .8rem; flex: none;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.theme_movie_btn--theme {
  background-color: var(--tm-bg-theme); border-color: var(--tm-border-theme);
  color: var(--tm-text-inverse);
}
.theme_movie_btn--theme::after { border-color: var(--tm-text-inverse); }
.theme_movie_btn--outline {
  background-color: transparent; border-color: var(--tm-border-theme);
  color: var(--tm-text-theme);
}
.theme_movie_btn--gray {
  background-color: var(--tm-gray-tint); border-color: var(--tm-gray-tint);
  color: var(--tm-text);
}
.theme_movie_btnWrap { display: flex; justify-content: center; margin-top: 5rem; }
@media (hover: hover) {
  .theme_movie_btn:hover { opacity: .85; }
  .theme_movie_btn--outline:hover { background-color: var(--tm-bg-theme); color: var(--tm-text-inverse); }
}
/* SP：もっと見る／すべての〜を見るボタンは横幅そのまま・縦幅のみ狭める（左右paddingは維持） */
@media screen and (max-width: 767px) {
  .theme_movie_btn--theme { min-height: 4rem; padding-block: .6rem; padding: 1rem 0; font-size: 1.5rem; }
}

/* =============================================================================
   6. バッジ（おまかせ / Canva / 自作）と カテゴリチップ
   ============================================================================= */
.theme_movie_badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .3rem 1.2rem; border-radius: 100px;
  font-size: 1.1rem; font-weight: 700; color: var(--tm-text-inverse);
  line-height: 1.4;
}
.theme_movie_badge--original { background-image: var(--tm-original-grad); }
.theme_movie_badge--canva   { background-image: var(--tm-canva-grad); }
.theme_movie_badge--template  { background-color: var(--tm-template); }

/* カテゴリ絞り込みチップ（緑アウトライン） */
.theme_movie_chips {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem 1.4rem; margin: 2.4rem 0 0;
}
.theme_movie_chip {
  display: flex; align-items: center; justify-content: center;
  gap: .8rem; padding: 1.1rem .8rem;
  border: 1.5px solid var(--tm-border-theme); border-radius: 999px;
  color: var(--tm-text-theme); font-weight: 700; font-size: 1.35rem; white-space: nowrap;
}
.theme_movie_chip::after {
  content: ""; flex: none;
  width: 0; height: 0;
  border-left: .4rem solid transparent;
  border-right: .4rem solid transparent;
  border-top: .5rem solid currentColor;
}
@media (hover: hover) {
  .theme_movie_chip:hover { background-color: var(--tm-bg-theme); color: var(--tm-text-inverse); border-color: var(--tm-border-theme); }
}

/* =============================================================================
   7. テイストカード（親「どんな結婚式にしたいですか？」＝子「その他のテイスト」）
      SP=2列 / PC=4列（1行）。ラベルは画像下・テーマ色＋下向きシェブロン
   ============================================================================= */
.theme_movie_tasteGrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem;
}
.theme_movie_tasteCard {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--tm-card, var(--tm-border)); border-radius: var(--tm-radius);
  overflow: hidden; background-color: var(--tm-bg);
}
.theme_movie_tasteCard img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform var(--tm-duration) var(--tm-ease);
}
.theme_movie_tasteCard_label {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .8rem;
  padding: 1rem .8rem 1.2rem; font-size: 1.2rem; font-weight: 700;
  text-align: center; color: var(--tm-card, var(--tm-text-theme));
}
.theme_movie_tasteCard_label::after {
  content: ""; width: .7rem; height: .7rem; flex: none;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
/* アンカーリンク（同ページ内ジャンプ）のテイストカードは矢印を下向きに。
   別ページ遷移する子ページのカードは右向き（既定）のまま */
.theme_movie_tasteCard[href^="#"] .theme_movie_tasteCard_label::after {
  transform: rotate(135deg);
}
/* テイスト別のラベル／枠色（--tm-card を上書き） */
.theme_movie_tasteCard--natural  { --tm-card: var(--tm-taste-natural); }
.theme_movie_tasteCard--dramatic { --tm-card: var(--tm-taste-dramatic); }
.theme_movie_tasteCard--joyful   { --tm-card: var(--tm-taste-joyful); }
.theme_movie_tasteCard--elegant  { --tm-card: var(--tm-taste-elegant); }
@media (hover: hover) {
  .theme_movie_tasteCard:hover { border-color: var(--tm-card, var(--tm-border-theme)); }
}

/* =============================================================================
   8. 商品リストカード（.tagitem--* を流用してタグ表示）
   ============================================================================= */
.theme_movie_pList {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 5rem 1.1rem;
}
.theme_movie_pList--single { grid-template-columns: 1fr; }  /* 大きい注目カード用 */
.theme_movie_pCard a { display: flex; flex-direction: column; height: 100%; }
.theme_movie_pCard_thumb {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
}
.theme_movie_pCard_thumb img { width: 100%; height: 97%; object-fit: cover; object-position: center 54%; }
.theme_movie_pCard--selected .theme_movie_pCard_thumb { outline: 2px solid var(--tm-info); outline-offset: 2px; }
.theme_movie_pCard_tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
/* .tagitem--* は movie.css の色を流用。ここでは形だけ整える */
.theme_movie_pCard_tags .tagitem--profile,
.theme_movie_pCard_tags .tagitem--opening,
.theme_movie_pCard_tags .tagitem--endroll,
.theme_movie_pCard_tags .tagitem--thanks,
.theme_movie_pCard_tags .tagitem--guest,
.theme_movie_pCard_tags .tagitem--entry,
.theme_movie_pCard_tags .tagitem--quiz,
.theme_movie_pCard_tags .tagitem--dress,
.theme_movie_pCard_tags .tagitem--report {
  display: inline-flex; align-items: center; padding: .3rem 1rem;
  border-radius: 100px; font-size: 1rem; font-weight: 700; color: var(--tm-text);
}
.theme_movie_pCard_ttl { margin-top: .8rem; font-size: 1.3rem; font-weight: 700; }
.theme_movie_pCard_desc { margin: .4rem auto 1rem; font-size: 1.2rem; color: var(--tm-text-strong); }
/* 説明文・タグの行数に関わらず価格＋メタ枠をカード下端に揃える（行内で横ラインを一致させる）。
   価格あり（おまかせ）は price が、価格なし（Canva）は直後の meta が余白を吸収して下端に整列。 */
.theme_movie_pCard_price { margin-top: auto; padding-top: .6rem; font-size: 1.8rem; font-weight: 700; }
.theme_movie_pCard_price small { font-size: 1.2rem; font-weight: 700; }
.theme_movie_pCard_desc + .theme_movie_pCard_meta { margin-top: auto; }
.theme_movie_pCard_meta {
  display: block; margin-top: .8rem; padding: .7rem .8rem;
  font-size: 1.1rem; line-height: 1.7; color: var(--tm-text-strong);
  background-color: var(--tm-bg-meta); border-radius: 4px;
}
.theme_movie_pCard_meta > span { display: block; }

/* テイスト別ラインナップ見出し（NATURAL 等）— ラベルを左寄せ、右側に横線を伸ばす */
.theme_movie_lineup + .theme_movie_lineup { margin-top: 7rem; }
.theme_movie_lineup_label {
  display: flex; align-items: center; gap: 1.6rem;
  font-size: clamp(1.5rem, 1.8rem + 1vw, 2.9rem); font-weight: 700;
  letter-spacing: .1em; color: var(--tm-text-theme);
  font-family: 'Josefin Sans', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Verdana, "メイリオ", Meiryo, sans-serif;
}
.theme_movie_lineup_label > span {
  flex: 0 0 auto;
}
.theme_movie_lineup_label::after {
  content: ""; flex: 1 1 auto;
  border-top: 1px solid var(--tm-border-theme);
}
.theme_movie_lineup_ttl { margin-top: .8rem; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); font-weight: 700; }
.theme_movie_lineup_notes { margin: 1rem 0 2rem; }
.theme_movie_lineup_notes li { position: relative; padding-left: 1.6rem; font-size: 1.3rem; }
.theme_movie_lineup_notes li::before {
  content: "・"; position: absolute; left: 0; top: 0;
  color: var(--tm-text-theme); font-weight: 700;
}

/* =============================================================================
   9. ヒーロー（親・子で骨格共有、装飾は modifier）
   ============================================================================= */
.theme_movie_hero { position: relative; overflow: hidden; }
.theme_movie_hero_inner { position: relative; z-index: 1; padding-block: 2.4rem 3.2rem; }
.theme_movie_hero_pill {
  display: inline-block; padding: .5rem 1.6rem; border-radius: 999px;
  background-color: var(--tm-pill-bg); font-size: 1.2rem; font-weight: 700;
  color: var(--tm-text-theme);
}
.theme_movie_hero_ttl { margin-top: 1.2rem; font-size: clamp(2.4rem, 1.6rem + 4vw, 4.4rem); font-weight: 700; line-height: 1.35; }
.theme_movie_hero_en { display: block; font-size: 1.3rem; letter-spacing: .2em; color: var(--tm-text-theme); font-weight: 700; }
.theme_movie_hero_catch { margin-top: 1.2rem; font-size: 1.4rem; }
/* 親：MV画像1枚をそのまま表示（見出しテキストは画像内に含むためsrのみ） */
.theme_movie_hero--index .theme_movie_hero_inner { padding-block: 2.4rem; }
/* 子：画像ブロック（約7割）＋テキスト（約3割）の横並び。左=写真マーキー / 右=テキスト */
.theme_movie_hero--detail {
  /* 画像サイズは clamp でSP↔PCを滑らかに（SPで大きすぎないよう縮小・比率はcoverで維持） */
  --tm-hero-imgH: clamp(8rem, 4rem + 10vw, 14rem);   /* 画像の高さ */
  --tm-hero-imgGap: .8rem; /* 画像間の余白 */
  --tm-hero-visible: 3;    /* 常に見せる枚数 */
  overflow: hidden;
  display: flex; align-items: center;
  background-color: var(--tm-hero-bg);
}
.theme_movie_hero--detail .theme_movie_hero_inner {
  order: -1;  /* テキストブロックを左に */
  flex: 0 0 42%; max-width: 42%;   /* SPはテキストに余裕を（PCで30%に縮小） */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(.4rem, .2rem + .6vw, .8rem);
  padding: clamp(1rem, .6rem + 1.6vw, 2rem) .6rem; text-align: center;
}
/* NATURAL：英字・テーマ色・最大 */
.theme_movie_hero--detail .theme_movie_hero_en {
  font-size: 2rem; letter-spacing: .1em; line-height: 1.15; font-family: 'Josefin';
}
/* ナチュラル＆アットホーム：テーマ色・小 */
.theme_movie_hero--detail .theme_movie_hero_pill {
  background-color: transparent; padding: 0; border-radius: 0;
  font-size: 0.9rem; line-height: 1.5; font-weight: 700;
  color: var(--tm-text-theme);
}
/* 結婚式ムービー特集：濃色・太字・中大 */
.theme_movie_hero--detail .theme_movie_hero_lead {
  font-size: 1.2rem; line-height: 1.35; font-weight: 700;
  color: #222;
}

/* スクリーンリーダー専用（視覚的に隠すがSEO/読み上げには残す） */
.theme_movie_sr {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; white-space: nowrap; border: 0;
  clip-path: inset(50%);
}
/* 子ヒーローMV：2カラムの縦マーキー（左列=上へ / 右列=下へ 無限スクロール）。
   MV幅の約7割を占め、右3割のテキストと横並び。
   各列は同じ画像セットを2回並べ、track を高さ50%ぶん動かして継ぎ目なくループ */
.theme_movie_hero_marquee {
  flex: 0 0 58%; max-width: 58%;   /* SPは縮小（PCで70%に拡大） */
  display: grid; grid-template-columns: 1fr 1fr; gap: .8rem;
  padding: .8rem; align-self: center;
}
/* 列の高さを「画像n枚＋余白」ぶんに固定し、はみ出た画像はクリップ（常時n枚だけ露出） */
.theme_movie_hero_col {
  position: relative; overflow: hidden;
  height: calc(var(--tm-hero-visible) * (var(--tm-hero-imgH) + var(--tm-hero-imgGap)));
}
.theme_movie_hero_track { display: flex; flex-direction: column; will-change: transform; }
.theme_movie_hero_track img {
  display: block; width: 100%; height: var(--tm-hero-imgH); object-fit: cover;
  margin-bottom: var(--tm-hero-imgGap);
}
.theme_movie_hero_col--up   .theme_movie_hero_track { animation: tm-marquee-up   34s linear infinite; }
.theme_movie_hero_col--down .theme_movie_hero_track { animation: tm-marquee-down 34s linear infinite; }
@keyframes tm-marquee-up   { from { transform: translateY(0);     } to { transform: translateY(-50%); } }
@keyframes tm-marquee-down { from { transform: translateY(-50%); } to { transform: translateY(0);     } }

/* SP：MVスライダー画像を 114×65px 固定（列を114px・高さ65px／比率はcoverで維持）。
   スライダーは内容幅、テキストは残り幅を使う。 */
@media screen and (max-width: 767px) {
  .theme_movie_hero--detail { --tm-hero-imgH: 65px; }
  .theme_movie_hero--detail .theme_movie_hero_inner { flex: 1 1 auto; max-width: none; min-width: 0; }
  .theme_movie_hero_marquee {
    flex: 0 0 auto; max-width: none;
    grid-template-columns: 114px 114px; gap: .6rem; padding: .6rem;
  }
  .theme_movie_hero_track img { width: 114px; height: 65px; }
  /* ill_temp_point03.svg のみ SP で w:50 / h:80 に指定 */
  .theme_movie_point_img[src*="ill_temp_point03"] { width: 50px; height: 80px; max-width: none; }
}

/* 親ヒーローのMV画像（文言・装飾込みで書き出した1枚をそのまま表示） */
.theme_movie_hero_mv { display: block; width: 100%; height: auto; }

/* =============================================================================
   10. おまかせ / Canva 説明（親）— 薄グレー角丸ボックスに2行「バッジ … 説明」
   ============================================================================= */
.theme_movie_expl {
  max-width: 45rem; margin: 3.2rem auto 0;
  display: grid; gap: 1.4rem;
  padding: 2rem;
  background-color: var(--tm-gray-tint); border-radius: var(--tm-radius-lg);
}
.theme_movie_expl_row {
  display: grid; grid-template-columns: auto auto 1fr;
  gap: .4rem 1.2rem; align-items: start;
}
.theme_movie_expl_row .theme_movie_badge { align-self: start; min-width: 7rem; }
.theme_movie_expl_dots { color: var(--tm-text-sub); font-weight: 700; }
.theme_movie_expl_txt { font-size: 1.3rem; }

/* =============================================================================
   11. 選び方ガイドカード（親）
   ============================================================================= */
.theme_movie_guideGrid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
.theme_movie_guide {
  border: 1px solid var(--tm-border-guide); border-radius: var(--tm-radius-lg);
  padding: 2rem; text-align: center; background-color: var(--tm-bg);
}
.theme_movie_guide_icon { width: 6rem; height: auto; margin-inline: auto; color: var(--tm-theme); }
.theme_movie_guide_ttl { margin-top: 1rem; font-size: 1.8rem; font-weight: 700; }
.theme_movie_guide_txt { margin-top: 1.2rem; font-size: 1.4rem; text-align: left; color: var(--tm-text); }

/* =============================================================================
   11.5. 作成方法から探すバナー（選び方ガイド下部）
   ============================================================================= */
.theme_movie_findBanner { margin-top: var(--tm-gap); text-align: center; }
.theme_movie_findBanner_ttl {
  font-size: clamp(1.6rem, 1.4rem + .5vw, 2rem); font-weight: 700; color: #222222;
  margin-bottom: 2rem; display: inline-flex; align-items: center; gap: 1.2rem;
}
.theme_movie_findBanner_ttl::before,
.theme_movie_findBanner_ttl::after {
  content: ""; width: 2px; height: 2.4rem; background-color: currentColor;
}
.theme_movie_findBanner_ttl::before { transform: rotate(-25deg); }
.theme_movie_findBanner_ttl::after  { transform: rotate(25deg); }
/* 画面幅にかかわらず1カラム。SPは100%、PCは中央寄せ（最大幅で制限） */
.theme_movie_findBanner_list {
  display: grid; grid-template-columns: 1fr; gap: 1.6rem;
  width: 100%; max-width: 45rem; margin-inline: auto;
}
.theme_movie_findBanner_item {
  display: block; border-radius: var(--tm-radius); overflow: hidden;
  transition: transform 200ms ease, opacity 200ms ease;
}
.theme_movie_findBanner_item:hover { opacity: .85; transform: translateY(-2px); }
.theme_movie_findBanner_item img { width: 100%; height: auto; display: block; }

/* =============================================================================
   12. 作成方法タブ（子「2つの選べる作成方法」）
   ============================================================================= */
/* タブ上：各方法のキャッチ（＼ ／）＋プレビュー画像。2カラム並列で常時表示 */
.theme_movie_methodPrev { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 2.2rem; }
.theme_movie_methodPrev_catch {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 0;
  font-size: 1.3rem; font-weight: 700;
}
/* ＼ ／ は絶対配置。left / right で左右に広げる（gapに依存しない） */
.theme_movie_methodPrev_catch::before,
.theme_movie_methodPrev_catch::after {
  content: ""; position: absolute; top: 50%;
  width: 2px; height: 1.8rem; background-color: currentColor;
}
.theme_movie_methodPrev_catch::before { left: 0;  transform: translateY(-50%) rotate(-22deg); }
.theme_movie_methodPrev_catch::after  { right: 0; transform: translateY(-50%) rotate(22deg); }
.theme_movie_methodPrev_catch--original { color: var(--tm-original); }
.theme_movie_methodPrev_catch--template   { color: var(--tm-template); }
.theme_movie_methodPrev_img { display: block; width: 50%; height: auto; margin: .8rem auto 0; }

/* タブ本体 */
.theme_movie_method_tabs { display: grid; grid-template-columns: 1fr 1fr; }
.theme_movie_method_tab {
  appearance: none; border: none; cursor: pointer;
  padding: 1.5rem 1rem; font-size: 1.6rem; font-weight: 700;
  background-color: #e2e2e2; color: #888;
  border-radius: var(--tm-radius) var(--tm-radius) 0 0;
}
.theme_movie_method_tab--original.is-active { background-color: var(--tm-original); color: #fff; }
.theme_movie_method_tab--template.is-active   { background-color: var(--tm-template); color: #fff; }

/* パネル（おまかせ=クリーム / 自作=淡ピンク） */
.theme_movie_method_panel { display: none; padding: 2.6rem 1.6rem 3.4rem; }
.theme_movie_method_panel.is-active { display: flex; flex-direction: column; gap: 1.4rem; }
.theme_movie_method_panel--original { background-color: #FFFAEC; }
.theme_movie_method_panel--template   { background-color: var(--tm-template-tint); }

/* POINT：個別の白い角丸カード（影付き） */
.theme_movie_point {
  background-color: #fff; border-radius: 14px; padding: 1.6rem 1rem 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04); text-align: center;
}
.theme_movie_point_no { font-size: 1.7rem; font-weight: 700; letter-spacing: .12em; color: var(--tm-original); }
.theme_movie_method_panel--template .theme_movie_point_no { color: var(--tm-template); }
.theme_movie_point_img { max-width: 12rem; height: auto; margin: .8rem auto 1.2rem; }
.theme_movie_point_txt { font-size: 1.5rem; font-weight: 700; line-height: 1.7; }
.theme_movie_pointRow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
/* POINT1（横ワイド）：番号を上・中央、その下にテキスト左＋イラスト右 */
.theme_movie_point--wide { padding: 1.6rem 1.6rem 1.8rem; }
.theme_movie_point--wide .theme_movie_point_row { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.theme_movie_point--wide .theme_movie_point_txt { text-align: left; font-size: 1.6rem; flex-shrink: 0; }
.theme_movie_point--wide .theme_movie_point_img { margin: 0 0 0 auto; max-width: 12rem; }
/* POINTテキスト（SP）※基本ルールより後に置いて確実に上書き。.theme_movie_point--wide は個別指定を維持 */
@media screen and (max-width: 767px) {
  .theme_movie_point_txt { font-size: 1.2rem; }
}

/* =============================================================================
   13. フッターナビ（子）
   ============================================================================= */
.theme_movie_footNav { display: flex; flex-direction: column; gap: 2rem; }
.theme_movie_footNav_item {
  display: block; background-color: #e6e6e6; border-radius: 8px;
  text-align: center; font-size: 1.7rem; font-weight: 700; color: #333;
  padding: 3rem 1rem;
}
@media (hover: hover) { .theme_movie_footNav_item:hover { opacity: .85; } }

/* =============================================================================
   13.5. 詳細ページ（子）固有スタイル  ※ .theme_movie--detail スコープで親(index)に非干渉
   ============================================================================= */
/* 見出しバリエーション（緑=セクション大見出し / dark=濃色） */
.theme_movie_head_ttl--green {
  color: var(--tm-text-theme); text-align: center;
  font-size: clamp(2.1rem, 1.8rem + 1vw, 2.6rem); letter-spacing: .04em;
}
.theme_movie_head_ttl--dark { color: #333; }

/* イントロ見出し（ヒーロー画像の下） */
.theme_movie_intro { text-align: center; padding-block: 3.8rem 0; }
.theme_movie_intro_ttl {
  font-size: 2.3rem; font-weight: 700; /* SP。PCは @media(min-width:768px) で3rem */
  line-height: 1.45; letter-spacing: .03em; color: var(--tm-text-theme);
  font-family: 'はんなり明朝';
}
.theme_movie_intro_lead { margin-top: 1.6rem; font-size: 1.45rem; line-height: 2; color: #4d4d4d; }

/* カテゴリ見出し（JP濃色＋EN英字） */
.theme_movie_catHead { text-align: center; margin-top: 5.2rem; }
.theme_movie_catHead_ttl { font-size: 2rem; font-weight: 700; letter-spacing: .08em; color: #333; }
.theme_movie_catHead_en {
  display: block; margin-top: .8rem; font-size: 1.5rem; font-weight: 400; letter-spacing: .3em;
  color: var(--tm-text-theme);
  font-family: 'Josefin Sans', "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
}

/* 商品カード（詳細ページ準拠：注目=大／グリッド=標準、メタは薄グレー帯） */
.theme_movie--detail .theme_movie_pCard a { height: auto; }
.theme_movie--detail .theme_movie_pList { gap: 2.6rem 1.2rem; margin-top: 2.6rem; }
.theme_movie--detail .theme_movie_pList--single { display: flex; flex-direction: column; gap: 4rem; }
/* 商品名＝常に2行ぶんの高さ（2行超はクランプ）／ 訴求コピー＝常に3行ぶん（3行まで表示＆許容）。
   行数ぶんの min-height を確保することで、テキスト量が違ってもカード内の価格・メタ位置が揃う。 */
.theme_movie--detail .theme_movie_pCard_ttl {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; min-height: 3em;
}
.theme_movie--detail .theme_movie_pCard_desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; min-height: 4.95em;
}
.theme_movie--detail .theme_movie_pCard_thumb { border-radius: 2px; }
/* 注目カード（1カラム大） */
.theme_movie--detail .theme_movie_pList--single .theme_movie_pCard_ttl { font-size: 1.8rem; }
.theme_movie--detail .theme_movie_pList--single .theme_movie_pCard_desc { font-size: 1.45rem; line-height: 1.7; }
.theme_movie--detail .theme_movie_pList--single .theme_movie_pCard_price { font-size: 2.6rem; }
.theme_movie--detail .theme_movie_pList--single .theme_movie_pCard_meta { font-size: 1.35rem; line-height: 1.5; }

/* もっと見る／すべて見るボタン */
/* .theme_movie--detail .theme_movie_btn { font-size: 1.7rem; padding: 1.8rem 4rem; max-width: 34rem; } */
.theme_movie--detail .theme_movie_btnWrap { margin-top: 3.4rem; }

/* テイストカード（枠線＋ラベル横並び＋右シェブロン） */
.theme_movie--detail .theme_movie_tasteGrid { gap: 2rem 1.2rem; }
.theme_movie--detail .theme_movie_tasteCard { border-width: 1.5px; border-radius: 12px; }
.theme_movie--detail .theme_movie_tasteCard_label { font-size: 1.5rem; padding: 1.3rem .8rem; gap: .6rem; }
@media screen and (max-width: 767px) {
  .theme_movie--detail .theme_movie_tasteCard_label { font-size: 1.3rem; }
}
/* =============================================================================
   14. レスポンシブ（モバイルファースト → タブレット/PC）
   ============================================================================= */
@media screen and (min-width: 768px) {
  .theme_movie { --tm-content-max: 960px; }
  .theme_movie_inner { padding-inline: 2.4rem; }
  .theme_movie_pList { grid-template-columns: repeat(3, 1fr); }
  /* 親ページ 各lineup の商品リストは行間を広げる（PCのみ・全テイスト） */
  .theme_movie_lineup > ul.theme_movie_pList { row-gap: 3.5rem; }
  /* 注目カード（--single）：SPは1カラム、PCは2カラム */
  .theme_movie--detail .theme_movie_pList--single {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.6rem 1.2rem;
  }
  /* ピックアップが1件のみのときは中央配置（PCで左寄せにならないよう1カラム中央に） */
  .theme_movie--detail .theme_movie_pList--single:has(> li:only-child) {
    grid-template-columns: minmax(0, 50%); justify-content: center;
  }
  /* ピックアップ1件＋一覧2件以内のときは一覧も中央配置（3カラム左寄せを解消） */
  .theme_movie--detail .theme_movie_pList--single:has(> li:only-child) + .theme_movie_pList:not(:has(> li:nth-child(3))) {
    display: flex; flex-wrap: wrap; justify-content: center;
  }
  .theme_movie--detail .theme_movie_pList--single:has(> li:only-child) + .theme_movie_pList:not(:has(> li:nth-child(3))) > li {
    flex: 0 0 calc((100% - 2.4rem) / 3); max-width: calc((100% - 2.4rem) / 3);
  }
  /* カテゴリ見出しは PC で拡大（SPは 2rem / 1.5rem） */
  .theme_movie_catHead_ttl { font-size: 2.5rem; }
  .theme_movie_catHead_en { font-size: 1.8rem; }
  .theme_movie_lineup + .theme_movie_lineup { margin-top: 9rem; }
  .theme_movie_chips { grid-template-columns: repeat(4, 1fr); }
  /* イントロ大見出し（PC）※clampを使わず画面幅ごとに指定 */
  .theme_movie_intro_ttl { font-size: 3rem; }
  /* チップが5個以上のときは 4-1 の段落ちを避け、3-2 で中央配置
     （flexで折り返し・各行センター。1個あたり3列相当幅） */
  .theme_movie_chips:has(> li:nth-child(5)) {
    display: flex; flex-wrap: wrap; justify-content: center;
  }
  .theme_movie_chips:has(> li:nth-child(5)) > li {
    flex: 0 1 calc((100% - 2 * 1.4rem) / 3);
  }
  /* チップがちょうど3個のときは中央配置（4カラムの左寄せを解消。幅は4列時と揃える） */
  .theme_movie_chips:has(> li:nth-child(3)):not(:has(> li:nth-child(4))) {
    display: flex; flex-wrap: wrap; justify-content: center;
  }
  .theme_movie_chips:has(> li:nth-child(3)):not(:has(> li:nth-child(4))) > li {
    flex: 0 1 calc((100% - 3 * 1.4rem) / 4);
  }
  .theme_movie_tasteGrid { grid-template-columns: repeat(4, 1fr); }
  .theme_movie_guideGrid { grid-template-columns: repeat(2, 1fr); }
  .theme_movie_hero--detail .theme_movie_hero_inner { flex: 0 0 30%; max-width: 30%; }
  .theme_movie_hero_marquee { flex: 0 0 70%; max-width: 70%; gap: 1.2rem; padding: 1.2rem; }
  /* セクション大見出し（PC）※clampを使わず画面幅ごとに指定 */
  .theme_movie_head_ttl { font-size: 2rem; }
  /* ヒーロー文字サイズ（PC）※clampを使わず画面幅ごとに指定 */
  .theme_movie_hero--detail .theme_movie_hero_en { font-size: 4rem; }
  .theme_movie_hero--detail .theme_movie_hero_pill { font-size: 1.5rem; }
  .theme_movie_hero--detail .theme_movie_hero_lead { font-size: 2rem; }
  .theme_movie_methodPrev_catch { font-size: 2rem; gap: 1.4rem; }
  /* PC：＼／はコンテナ幅に依存せずテキスト脇に置く（left/right固定だと広い分だけ離れるため静的配置に切替） */
  .theme_movie_methodPrev_catch::before,
  .theme_movie_methodPrev_catch::after {
    position: static; top: auto; height: 2.2rem;
  }
  .theme_movie_methodPrev_catch::before { transform: rotate(-22deg); }
  .theme_movie_methodPrev_catch::after  { transform: rotate(22deg); }

  /* PC：作成方法パネルの POINT を「3枚を等幅で横1列」に（SPは POINT1ワイド＋2列のまま） */
  .theme_movie_method_panel.is-active {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem; align-items: stretch;
  }
  .theme_movie_pointRow2 { display: contents; }  /* ラッパーを解除して2枚を親グリッドに合流＝計3枚横並び */
  .theme_movie_point { display: flex; flex-direction: column; }
  /* POINT1（SPは横ワイド）は PC では他2枚と同じ縦積みカードに戻す */
  .theme_movie_point--wide .theme_movie_point_row {
    flex-direction: column; align-items: center; gap: 1rem; margin-top: 0;
  }
  .theme_movie_point--wide .theme_movie_point_txt { text-align: center; }
  .theme_movie_point--wide .theme_movie_point_img { margin: 0 auto; }
}
@media screen and (min-width: 1024px) {
  .theme_movie { --tm-content-max: 1080px; }
  .theme_movie_tasteGrid { gap: 2rem; }
  .theme_movie_pList { gap: 2.4rem 2rem; }
}

/* 動きを減らす設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .theme_movie *, .theme_movie *::before, .theme_movie *::after {
    transition: none !important; animation: none !important;
  }
}