/* page/top.css - トップページ専用 / 抽出元: トップページ/assets/css/style.css */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO
   WordPress ACF: hero_image / hero_copy / hero_sub_copy / line_url / hero_badge_text
   FV画像: fetchpriority="high" loading="eager" で LCP 改善
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero {
  position: relative; height: 100svh; min-height: 580px; max-height: 900px;
  background: var(--charcoal); overflow: hidden;
  display: flex; align-items: flex-end;
  padding-top: 60px; /* ヘッダー高さ分 */
}
@media (min-width: 768px) { .hero { padding-top: 72px; align-items: center; } }

/* ヒーロー写真グリッド（SPは2×2、PCは非対称3カラム） */
.hero-grid {
  position: absolute; inset: 0;
  display: grid; gap: 2px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.hero-grid > div { overflow: hidden; }

@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 1.3fr .85fr .85fr; grid-template-rows: 1fr 1fr; }
  .hg1 { grid-column: 1; grid-row: 1 / 3; }
}
.hero-grid picture,
.hero-grid img { height: 100%; }

/* オーバーレイ */
.hero-ov {
  position: absolute; inset: 0; z-index: 2;
  /* 文字が乗る下部の可読性をスクリムで担保（写真の明るさ・文字位置に依存させない・WCAG AA・2026-07-09） */
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}

/* テキストエリア */
.hero-body { position: relative; z-index: 3; padding: 0 var(--sp) 48px; width: 100%; }
/* 左の垂直軸を完全統一：すべての直下要素を左パディング基準で揃える */
.hero-body > * {
  min-width: 0;
  margin-left: 0;
}
@media (min-width: 768px) { .hero-body { padding: 0 52px; max-width: 1400px; margin: 0 auto; } }

/* ③ 対象・地域 + 具体価値（統合・短文2行・ゆったり高級感） */
.hero-sub {
  font-family: var(--jp);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 2.1;            /* ゆったり広めの行間で高級感 */
  color: rgba(255,255,255,.92);
  margin: 0 0 22px 0;
  max-width: 38em;
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
  animation: fup .9s ease .75s both;
}
@media (max-width: 419px) {
  .hero-sub { font-size: .76rem; line-height: 2.0; letter-spacing: .08em; }
}
/* ヒーローCTA エリア
   - タイトル・サブタイトル・説明文・ボタン・注釈・バッジを完全に同一の左軸で揃える
   - width: fit-content を外し、親(.hero-body)の左パディング基準に揃える
   - PC/SP問わず同じ左揃えレイアウト */
.hero-acts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  animation: fup .9s ease .9s both;
}

/* スクロールインジケーター */
.hero-scroll {
  position: absolute; bottom: 20px; right: 18px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  animation: fin 1s ease 1.6s both;
}
@media (min-width: 768px) { .hero-scroll { right: 48px; bottom: 28px; } }
.hero-scroll-txt { font-family: var(--en); font-size: .52rem; letter-spacing: .28em; color: rgba(255,255,255,.36); writing-mode: vertical-lr; }
.scroll-line { width: 1px; height: 42px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.35)); animation: sl 2s ease infinite; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CAMPAIGN BANNER（横幅いっぱいの告知バナー）
   ヒーロー直下・お知らせ直上に配置
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#campaign-banner {
  position: relative;
  width: 100%;
  background:
    linear-gradient(135deg, rgba(184,151,90,.28) 0%, rgba(184,151,90,.10) 100%),
    linear-gradient(180deg, var(--charcoal) 0%, #2a2520 100%);
  border-top: 1px solid rgba(184,151,90,.35);
  border-bottom: 1px solid rgba(184,151,90,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 6px 18px rgba(0,0,0,.18);
  overflow: hidden;
}
#campaign-banner[hidden],
#campaign-banner[data-campaign-visible="false"] {
  display: none;
}
.campaign-banner-link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 16px var(--sp);
  text-decoration: none;
  color: var(--gold-lt);
  transition: background var(--t);
}
.campaign-banner-link:hover { background: rgba(184,151,90,.10); }
/* 複数キャンペーンを同時にトップへ出した場合、2本目以降の帯に上罫線（リピーター対応） */
.campaign-banner-link + .campaign-banner-link { border-top: 1px solid rgba(212,176,122,.22); }
.campaign-banner-text {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  max-width: calc(100vw - 28px);
  padding: 8px 20px;
  border-top: 1px solid rgba(212,176,122,.82);
  border-bottom: 1px solid rgba(212,176,122,.82);
  font-family: var(--jp);
  font-size: .98rem;
  font-weight: 400;
  letter-spacing: .09em;
  line-height: 1.5;
  color: transparent;
  background:
    linear-gradient(
      100deg,
      var(--gold-lt) 0%,
      var(--gold-lt) 38%,
      #fff6c7 46%,
      #fff 50%,
      #fff6c7 54%,
      var(--gold-lt) 62%,
      var(--gold-lt) 100%
    )
    100% 50% / 260% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 12px rgba(212,176,122,.18);
  animation:
    campaignTextShine 4.2s var(--ease) infinite,
    campaignTextGlow 4.2s var(--ease) infinite;
}
.campaign-banner-text::before,
.campaign-banner-text::after {
  content: '';
  position: absolute;
  top: -7px;
  width: 1px;
  height: calc(100% + 14px);
  background: rgba(212,176,122,.82);
  box-shadow: 0 0 12px rgba(212,176,122,.22);
  opacity: .95;
}
.campaign-banner-text::before {
  left: 8px;
}
.campaign-banner-text::after {
  right: 8px;
}
@media (max-width: 419px) {
  .campaign-banner-link { min-height: 62px; padding: 17px 12px; }
  .campaign-banner-text { padding: 8px 16px; font-size: .9rem; letter-spacing: .035em; }
  .campaign-banner-text::before { left: 6px; }
  .campaign-banner-text::after { right: 6px; }
}
@media (min-width: 768px) {
  .campaign-banner-link { min-height: 56px; padding: 16px var(--sp-m); gap: 15px; }
  .campaign-banner-text { font-size: 1rem; letter-spacing: .12em; }
}
@keyframes campaignTextShine {
  0%, 42% { background-position: 100% 50%; }
  68%, 100% { background-position: 0 50%; }
}
@keyframes campaignTextGlow {
  0%, 64%, 100% {
    text-shadow: 0 0 12px rgba(212,176,122,.18);
    filter: brightness(1);
  }
  72% {
    text-shadow:
      0 0 6px rgba(255,255,255,.55),
      0 0 18px rgba(212,176,122,.55),
      0 0 28px rgba(184,151,90,.32);
    filter: brightness(1.16);
  }
  82% {
    text-shadow:
      0 0 4px rgba(255,255,255,.30),
      0 0 14px rgba(212,176,122,.34);
    filter: brightness(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .campaign-banner-text {
    animation: none;
    color: var(--gold-lt);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NEWS TICKER
   WordPress: WP_Query カテゴリ「news」最新1件で動的出力
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ntick { background: var(--warm-white); border-bottom: 1px solid var(--light-gray); padding: 11px 0; }
.ntick-in {
  display: flex; align-items: center; gap: 12px;
  max-width: 1200px; margin: 0 auto; padding: 0 var(--sp); overflow: hidden;
}
@media (min-width: 768px) { .ntick-in { padding: 0 var(--sp-m); gap: 18px; } }
.n-badge { background: var(--gold); color: #fff; font-family: var(--en); font-size: .53rem; letter-spacing: .2em; padding: 3px 10px; flex-shrink: 0; }
.n-date  { font-family: var(--en); font-size: .63rem; color: var(--warm-gray); letter-spacing: .08em; flex-shrink: 0; display: none; }
@media (min-width: 480px) { .n-date { display: block; } }
.n-txt   { font-size: .77rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
@media (min-width: 768px) {
  .ntick-in { justify-content: center; }
  .n-txt { flex: 0 1 auto; max-width: min(760px, 62vw); }
}
.n-txt a { color: var(--text); transition: color var(--t); } .n-txt a:hover { color: var(--gold); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   20TH SECTION（成人式最優先訴求 #1）
   WordPress ACF: twentieth_image / twentieth_description / line_url
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.twentieth-sec {
  background: var(--indigo); color: #fff;
  position: relative; overflow: hidden;
}
.twentieth-sec::before {
  content: '二十歳';
  position: absolute; font-family: var(--jp);
  font-size: clamp(120px, 28vw, 260px);
  font-weight: 300; color: rgba(255,255,255,.03);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none; white-space: nowrap; letter-spacing: .2em; z-index: 0;
}

/* SP: 縦積み / PC: 左写真 右テキスト */
.twentieth-inner {
  display: grid; grid-template-columns: 1fr;
  position: relative; z-index: 1;
}
@media (min-width: 768px) { .twentieth-inner { grid-template-columns: 1fr 1fr; min-height: 580px; } }
@media (min-width: 1100px) { .twentieth-inner { grid-template-columns: 1.1fr .9fr; } }

/* 写真 */
.twentieth-img { position: relative; overflow: hidden; }
.twentieth-img > img,
.twentieth-img > picture { height: 60vw; min-height: 240px; max-height: 480px; filter: brightness(.92); }
@media (min-width: 768px) {
  .twentieth-img > img,
  .twentieth-img > picture { height: 100%; max-height: none; }
}
.twentieth-img-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 68%, rgba(30,45,90,.74) 100%);
}
@media (max-width: 767px) {
  .twentieth-img-ov { background: linear-gradient(to bottom, transparent 68%, rgba(30,45,90,.74) 100%); }
}
/* 人気バッジ */
.twentieth-no1 {
  position: absolute; top: 16px; left: 0; z-index: 2;
  background: var(--gold); color: #fff;
  font-family: var(--jp); font-size: .68rem; letter-spacing: .1em;
  padding: 5px 14px; font-weight: 400;
}

/* テキストエリア */
.twentieth-body {
  padding: 36px var(--sp);
  display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 768px) { .twentieth-body { padding: 60px 52px 60px 44px; } }

.twentieth-lbl { font-family: var(--en); font-size: .58rem; letter-spacing: .4em; color: var(--gold-lt); display: block; margin-bottom: 10px; }
.twentieth-h2  { font-family: var(--jp); font-size: clamp(1.5rem, 4.5vw, 2.5rem); font-weight: 300; color: #fff; letter-spacing: .15em; line-height: 1.4; margin-bottom: 14px; }
.twentieth-desc { font-size: .875rem; color: rgba(255,255,255,.7); line-height: 2.05; letter-spacing: .04em; margin-bottom: 20px; }

/* 強みポイント */
.twentieth-points { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.twentieth-pt {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .83rem; color: rgba(255,255,255,.78); letter-spacing: .04em;
}
.twentieth-pt-ic { flex-shrink: 0; color: var(--gold-lt); font-family: var(--en); font-size: .68rem; margin-top: 3px; }

/* 成人式 CTA（縦→横） */
.twentieth-cta { display: flex; flex-direction: column; gap: 16px; align-items: center; margin-top: 4px; }
@media (min-width: 480px) { .twentieth-cta { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 20px; } }
.twentieth-cta .text-cta,
.twentieth-cta .btn {
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding-top: 11px;
  padding-bottom: 11px;
  line-height: 1.5;
}
.twentieth-cta .text-cta {
  width: 100%;
  max-width: 246px;
}
.twentieth-cta .btn {
  width: 100%;
  max-width: 246px;
  padding-left: 22px;
  padding-right: 22px;
}
@media (min-width: 480px) {
  .twentieth-cta .text-cta {
    flex: 0 0 246px;
    width: 246px;
    min-width: 0;
  }
  .twentieth-cta .btn {
    flex: 0 0 246px;
    width: 246px;
    min-width: 0;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FURISODE STRIP（振袖コレクション）
   WordPress ACF: furisode_images（リピーター）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.furi-wrap { background: var(--charcoal); }
.furi-header { padding: 32px var(--sp) 0; max-width: 1200px; margin: 0 auto; }
@media (min-width: 768px) { .furi-header { padding: 32px var(--sp-m) 0; } }
.furi-header p { font-family: var(--jp); font-size: .82rem; color: rgba(255,255,255,.6); letter-spacing: .04em; }
.furi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 20px; }
@media (min-width: 600px) { .furi-grid { grid-template-columns: repeat(6, 1fr); } }
.furi-item { position: relative; overflow: hidden; aspect-ratio: 2/3; }
.furi-item > img { filter: brightness(1) saturate(1); }
.furi-ov  {
  position: absolute; inset: auto 0 0;
  height: 38%;
  background: linear-gradient(to top, rgba(28,24,20,.48) 0%, rgba(28,24,20,.20) 48%, rgba(28,24,20,0) 100%);
  opacity: 1;
  pointer-events: none;
}
.furi-lbl {
  position: absolute; bottom: 9px; left: 0; right: 0; text-align: center;
  color: #fff; font-family: var(--jp); font-size: .7rem; letter-spacing: .08em;
  opacity: 1;
}
.furi-footer { text-align: center; padding: 30px 0 44px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TRUST / 安心材料 + 口コミ導線
   WordPress ACF: trust_count / trust_review_score / trust_count_label
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.trust-sec { background: var(--warm-white); }
.trust-grid {
  display: grid; gap: 2px;
  grid-template-columns: 1fr 1fr;
  margin-top: 36px;
}
@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }

.tcard {
  background: var(--cream); padding: 24px 16px 20px;
  text-align: center;
}
.tcard-icon  {
  width: 28px;
  height: 28px;
  display: block;
  margin: 0 auto 10px;
  color: var(--gold);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tcard-num   { font-family: var(--en); font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 300; color: var(--charcoal); line-height: 1; display: block; margin-bottom: 4px; }
.tcard-num sup { font-size: .6em; }
.tcard-label { font-family: var(--jp); font-size: .78rem; font-weight: 300; letter-spacing: .06em; color: var(--text2); display: block; margin-bottom: 5px; }
.tcard-note  { font-size: .66rem; color: var(--warm-gray); letter-spacing: .03em; line-height: 1.65; }

/* 口コミボックス */
.review-box {
  margin-top: 28px; padding: 20px 20px;
  background: linear-gradient(135deg, #fefce8, #fef9c3);
  border: 1px solid #fcd34d;
  display: flex; flex-direction: column; gap: 14px;
}
@media (min-width: 640px) { .review-box { flex-direction: row; align-items: center; justify-content: space-between; padding: 22px 28px; } }
.review-box .rv-google-btn { flex-shrink: 0; margin-top: 4px; }
@media (min-width: 640px) { .review-box .rv-google-btn { margin-top: 0; margin-left: 24px; } }
.review-stars { color: #f59e0b; font-size: 1.1rem; letter-spacing: .1em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-stars span { font-family: var(--jp); font-size: .78rem; color: var(--text2); font-weight: 400; }
.review-text { font-family: var(--sans); font-size: .8rem; color: var(--text); letter-spacing: .04em; line-height: 1.8; }
.review-text strong { color: #92400e; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MENU GRID（訴求順: 成人式 > 七五三 > ウェディング > その他）
   WordPress: カスタム投稿タイプ「shooting-menu」のループ
   menu_order で並び順を管理 / featured フラグで大表示制御
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.menu-sec { background: var(--cream); }
.menu-sec .u-text-center.u-mt-28 { margin-top: 34px; }
.mgrid {
  display: grid; gap: 2px;
  grid-template-columns: 1fr 1fr;
  margin-top: 28px;
}
@media (min-width: 768px)  { .mgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .mgrid { grid-template-columns: repeat(4, 1fr); } }

.mi { position: relative; overflow: hidden; cursor: pointer; }
.mi > a {
  position: relative;
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.mi > a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(28,24,20,.57) 0%,
    rgba(28,24,20,.20) 14%,
    rgba(28,24,20,0) 23%
  );
}
/* featured: 横2列分（成人式のみ） */
.mi.mifeat { grid-column: span 2; }

.mi-wrap { aspect-ratio: 3/4; overflow: hidden; position: relative; height: 100%; }
.mi.mifeat .mi-wrap { aspect-ratio: 16/9; }
@media (min-width: 1024px) {
  .mi.mifeat .mi-wrap { aspect-ratio: 4/3; min-height: 280px; }
}
.mi-wrap > img,
.mi-wrap > picture > img { transition: transform .65s ease, filter .44s ease; filter: brightness(1); }
.mi:hover .mi-wrap > img,
.mi:hover .mi-wrap > picture > img { transform: scale(1.05); filter: brightness(.86); }

.mi-ov {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 22px 14px 13px;
  background: none;
  color: #fff;
}
.mi-en    { font-family: var(--en); font-size: .53rem; letter-spacing: .3em; color: var(--gold-lt); display: block; margin-bottom: 3px; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.mi-title { font-family: var(--jp); font-size: .9rem; font-weight: 400; letter-spacing: .08em; text-shadow: 0 1px 10px rgba(0,0,0,.52); }
.mi-desc  { font-size: .65rem; color: rgba(255,255,255,.62); margin-top: 3px; line-height: 1.5; max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.mi:hover .mi-desc { max-height: 36px; }

/* 人気バッジ（成人式カードに付与） */
.mi-badge {
  position: absolute; top: 10px; left: 0; z-index: 2;
  background: var(--gold); color: #fff;
  font-family: var(--jp); font-size: .58rem; letter-spacing: .1em;
  padding: 3px 10px; font-weight: 400;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRICE SECTION（料金の透明化）
   WordPress ACF: price_plans（リピーター）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.price-sec {
  background: var(--charcoal);
  position: relative; overflow: hidden;
}
.price-sec::before {
  content: 'PRICE'; position: absolute;
  font-family: var(--en); font-size: clamp(100px, 22vw, 180px);
  font-weight: 300; color: rgba(255,255,255,.025);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none; white-space: nowrap; letter-spacing: .12em;
}
.price-sec .h2 { color: #fff; }
.price-sec .u-text-center.u-mt-24 { margin-top: 32px; }

.pgrid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 36px;
}
@media (min-width: 580px) { .pgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pgrid { grid-template-columns: repeat(3, 1fr); gap: 2px; } }

.pc {
  background: rgba(255,255,255,.045);
  padding: 26px 20px;
  border-top: 2px solid transparent;
  position: relative;
  transition: background var(--t), border-color var(--t);
}
.pc:hover { background: rgba(255,255,255,.075); border-top-color: var(--gold); }
.pc.pc-pick { border-top-color: var(--gold); background: rgba(184,151,90,.1); }

.pc-tag    { font-family: var(--en); font-size: .52rem; letter-spacing: .2em; color: var(--gold-lt); position: absolute; top: 13px; right: 20px; white-space: nowrap; }
.pc-cat    { font-family: var(--en); font-size: .56rem; letter-spacing: .26em; color: rgba(255,255,255,.38); display: block; margin-bottom: 5px; }
.pc-name   { font-family: var(--jp); font-size: .98rem; font-weight: 400; letter-spacing: .08em; color: #fff; margin-bottom: 12px; }
.pc-price  { font-family: var(--en); font-size: clamp(1.5rem, 3.5vw, 2.1rem); color: var(--gold-lt); font-weight: 300; letter-spacing: .02em; line-height: 1; }
.pc-pnote  { font-size: .66rem; color: rgba(255,255,255,.48); margin-top: 4px; margin-bottom: 16px; }
.pc-list   { display: flex; flex-direction: column; gap: 8px; }
.pc-list li {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: .77rem; color: rgba(255,255,255,.65); letter-spacing: .04em;
}
.pc-ck { color: var(--gold); flex-shrink: 0; margin-top: 2px; font-size: .72rem; }

/* 追加料金の安心説明 */
.price-note {
  margin-top: 24px; padding: 16px 18px;
  background: rgba(255,255,255,.04);
  border-left: 2px solid var(--gold);
  font-size: .74rem; color: rgba(255,255,255,.55);
  line-height: 1.9; letter-spacing: .04em;
}
.price-note strong { color: rgba(255,255,255,.72); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REASONS（選ばれる理由）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.reasons-sec { background: var(--warm-white); }
.r-grid {
  display: grid; gap: 2px;
  /* minmax(0,1fr) でトラックの最小を 0 にする（1fr の既定最小は auto=min-content）。
     かつて global.css の body{word-break:auto-phrase} が日本語 min-content を「最長文節の幅」まで
     膨らませ、1fr 1fr だとこのグリッドに約367pxの「最小幅の床」ができ、実効CSS幅が367px未満の
     端末（Galaxy の画面ズーム時など）でだけ右カードがはみ出していた（2026-06-16 確定）。
     auto-phrase は同日オーナー判断で撤去済みだが、minmax(0,1fr)＋下の min-width:0 は
     どんな長い語にも床を作らせない防御として残す（多段グリッドの既定にすべき書き方）。 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 36px;
}
@media (min-width: 768px) { .r-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rcard {
  background: var(--cream); padding: 26px 18px 22px;
  border-top: 2px solid var(--light-gray);
  min-width: 0; /* グリッド子の既定 min-width:auto を解除＝トラックが床より縮める */
}
.r-no    { font-family: var(--en); font-size: .57rem; letter-spacing: .28em; color: var(--gold); display: block; margin-bottom: 14px; }
.r-title { font-family: var(--jp); font-size: .9rem; font-weight: 400; letter-spacing: .06em; color: var(--charcoal); margin-bottom: 8px; overflow-wrap: anywhere; }
.r-body  { font-size: .76rem; color: var(--text2); line-height: 1.8; letter-spacing: .04em; font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; overflow-wrap: anywhere; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LINE CTA SECTION（何ができるかを明示してから背中を押す）
   WordPress ACF: line_url / line_feature_list（リピーター）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.line-cta-sec {
  background: var(--cream);
  border-top: 1px solid var(--light-gray);
  border-bottom: 1px solid var(--light-gray);
}
/* .line-card 関連スタイルは components.css に移動済み */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIFECYCLE（撮影の流れ）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.lc-sec {
  background: var(--charcoal); color: #fff;
  position: relative; overflow: hidden;
}
.lc-sec::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23B8975A' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.lc-sec .c { position: relative; z-index: 1; }
.lc-sec .h2 { color: #fff; }
.lc-steps {
  display: grid; gap: 0;
  grid-template-columns: 1fr; /* SP: 1列 */
  margin-top: 40px; position: relative;
}
/* SP: 縦並びのステップ間に縦ライン */
.lc-steps::before {
  content: ''; position: absolute;
  left: 34px; top: 42px; bottom: 42px;
  width: 1px;
  background: linear-gradient(to bottom, var(--gold), transparent);
}
@media (min-width: 768px) {
  .lc-steps { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .lc-steps::before {
    left: 40px; right: 40px; top: 26px; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
  }
}
.lc-step {
  /* SP: アイコン左・テキスト右の横並び */
  display: grid; grid-template-columns: 52px auto 1fr; align-items: center; column-gap: 16px;
  padding: 16px 8px; border-bottom: 1px solid rgba(184,151,90,.15);
  text-align: left;
}
.lc-step:last-child { border-bottom: none; }
@media (min-width: 768px) {
  .lc-step {
    display: block; text-align: center;
    padding: 0 8px; border-bottom: none;
  }
}
.lc-num {
  width: 52px; height: 52px; border: 1px solid var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0; /* SP: flex子要素なので auto不要 */
  font-family: var(--en); font-size: .8rem;
  color: var(--gold); background: var(--charcoal);
  position: relative; z-index: 1; flex-shrink: 0;
  transition: background var(--t), color var(--t);
}
@media (min-width: 768px) {
  .lc-num { margin: 0 auto 12px; } /* PC: 中央揃え */
}
.lc-step:hover .lc-num { background: var(--gold); color: var(--charcoal); }
.lc-title { font-family: var(--jp); font-size: .84rem; font-weight: 400; letter-spacing: .08em; color: #fff; margin-bottom: 0; }
.lc-note  { font-size: .64rem; color: rgba(255,255,255,.48); letter-spacing: .04em; line-height: 1.6; }
@media (min-width: 768px) {
  .lc-title { margin-bottom: 5px; }
}
.lc-sec .u-text-center.u-mt-32 { margin-top: 42px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GALLERY STRIP（自動スクロール）
   WordPress: カスタム投稿タイプ「gallery-photo」の一覧で動的出力
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gallery-sec { background: var(--warm-white); padding: 52px 0; overflow: hidden; }
.gallery-head {
  text-align: center;
  margin-bottom: 24px;
}
.gtrack {
  display: flex; gap: 8px; width: max-content;
  animation: mq 28s linear infinite;
}
.gi { flex-shrink: 0; overflow: hidden; position: relative; }
/* SP */
.gi { width: 150px; height: 188px; }
@media (min-width: 600px)  { .gi { width: 200px; height: 250px; } }
@media (min-width: 1024px) { .gi { width: 220px; height: 275px; } }
.gi a { display: block; width: 100%; height: 100%; }
.gi img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 36px auto 0;
  padding: 0 16px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FAQ（抜粋4問 + FAQ一覧ページへ）
   WordPress: カスタム投稿タイプ「faq」上位4件のループ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.faq-sec { background: var(--cream); }
.faq-sec .u-text-center.u-mt-22 { margin-top: 30px; }
.faq-grid {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  margin-top: 28px;
  align-items: start;
}
/* 各カラム内を撮影メニュー（.nb__faq-acc）と同じ罫線リストに（2026-07-24）。
   各行の下罫線は .faq-item／カラム先頭の上罫線をここで敷く。gap は 0＝隙間でなく罫線で区切る。
   2カラム構成自体はトップ固有として維持（レイアウトは変えず Q&A の見た目だけ基準へ）。 */
.faq-col { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--light-gray); }
@media (min-width: 768px) {
  .faq-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SNS（Instagram + LINE）
   WordPress ACF: instagram_url / line_url
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sns-sec { background: var(--warm-white); text-align: center; }
/* SNSセクション見出し：品格ある明朝体を明示的に指定 */
.sns-sec .h2,
.sns-sec h2 {
  font-family: var(--jp);
  font-weight: 300;
}
/* SNSセクションの本文テキスト類は Noto Sans JP に統一
   ※ 見出し（.h2「公式SNS」）は明朝（var(--jp)）のまま維持して情緒を保つ */
.sns-sec .txt,
.sns-sec p,
.sns-sec span:not(.lbl) { font-family: var(--sans); }
.sns-btns {
  display: flex; justify-content: center; gap: 12px;
  margin-top: 24px; flex-wrap: wrap;
  /* SPで最大幅を制限して均等2列に */
  max-width: 400px; margin-left: auto; margin-right: auto;
}
.sns-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px;
  font-size: .8rem; letter-spacing: .12em; color: #fff;
  font-family: var(--sans); white-space: nowrap;
  flex: 1; justify-content: center;
  text-decoration: none;
}
@media (min-width: 480px) { .sns-btn { padding: 15px 36px; flex: 0 1 auto; } }
.sns-btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
/* Instagram: 常時グラデーション着色・不透明 */
.sns-btn.ig {
  background: linear-gradient(45deg, rgba(240,148,51,.9), rgba(188,24,136,.9));
  color: #fff;
  border-color: rgba(255,255,255,.4);
  box-shadow:
    inset 1px 1px 1.5px rgba(255,255,255,.45),
    0 4px 15px rgba(0,0,0,.10);
}
.sns-btn.ig:hover {
  background: linear-gradient(45deg, #f09433, #bc1888);
  border-color: rgba(255,255,255,.6);
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,.55),
    0 6px 20px rgba(188,24,136,.3);
  transform: translateY(-1px);
}
/* LINE: 常時グリーン着色・完全不透明 */
.sns-btn.ln {
  color: #fff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NEWS
   WordPress: WP_Query カテゴリ「news」最新3件のループ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.news-sec { background: var(--cream); }
.news-sec .u-text-center.u-mt-20 { margin-top: 28px; }
.ntabs {
  display: flex; border-bottom: 1px solid var(--light-gray);
  margin-bottom: 20px; overflow-x: auto; scrollbar-width: none;
}
.ntabs::-webkit-scrollbar { display: none; }
.ntb {
  padding: 10px 18px; font-family: var(--en); font-size: .65rem;
  letter-spacing: .2em; color: var(--warm-gray); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--t), border-color var(--t);
  white-space: nowrap;
  background: none; border-top: none; border-left: none; border-right: none;
}
@media (min-width: 768px) { .ntb { padding: 11px 28px; } }
.ntb.on { color: var(--charcoal); border-bottom-color: var(--gold); }
.nlist {
  display: flex;
  flex-direction: column;
  min-height: 207px;
}
@media (min-width: 600px) {
  .nlist { min-height: 168px; }
}
/* お知らせは各タブごとに最新3件のグループ（.ngroup）で出し、JS が表示を切替。
   display:contents で .na を .nlist の直接の子と同じ扱いにし、既存のリスト配置を保つ。 */
.nlist .ngroup:not([hidden]) { display: contents; }
.nlist .ngroup[hidden] { display: none; }
.n-empty {
  padding: 22px 0; color: var(--warm-gray); font-family: var(--jp);
  font-size: .8rem; font-weight: 300; letter-spacing: .04em;
}
.na {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 7px 11px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--light-gray);
  transition: background var(--t);
}
@media (min-width: 600px) { .na { grid-template-columns: auto auto 1fr; grid-template-rows: auto; gap: 8px 16px; padding: 17px 0; } }
.na:hover { background: rgba(184,151,90,.04); }
.n-date  { font-family: var(--en); font-size: .62rem; letter-spacing: .08em; color: var(--warm-gray); white-space: nowrap; }
.n-tag   { font-size: .56rem; letter-spacing: .08em; padding: 2px 8px; border: 1px solid var(--light-gray); color: var(--warm-gray); white-space: nowrap; }
.n-title { font-family: var(--jp); font-size: .875rem; font-weight: 300; letter-spacing: .04em; color: var(--text); line-height: 1.6; transition: color var(--t); grid-column: 1 / -1; }
@media (min-width: 600px) { .n-title { grid-column: 3; } }
.na:hover .n-title { color: var(--gold); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTACT SECTION
   WordPress ACF: tel / contact_page_url / line_url
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.contact-sec {
  background: linear-gradient(135deg, var(--charcoal) 0%, #2a2520 100%);
  padding: 68px 0; text-align: center;
  position: relative; overflow: hidden;
}
@media (min-width: 768px) { .contact-sec { padding: 96px 0; } }
/* 背景の大きい薄文字「CONTACT」（::before）は撤去（オーナー指摘 2026-07-14）。
   PCでは2枚のカードに被って見えづらく、SPではほぼ視認できず装飾として機能していなかったため。 */
.contact-sec .lbl { color: var(--gold); }
.cta-h  { font-family: var(--jp); font-size: clamp(1.35rem, 4vw, 1.9rem); font-weight: 300; color: var(--warm-white); letter-spacing: .14em; margin-bottom: 10px; }
.cta-desc { font-size: .82rem; color: #fff; opacity: .85; margin-bottom: 28px; line-height: 2; letter-spacing: .04em; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO DETAIL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ヒーロー要素：左の垂直軸で統一
   ─ .hero-h1（感情のスイッチ）
   ─ .trust-proof（信頼証明バー）
   ─ .hero-sub（対象・地域）
   ─ .hero-acts
   全て .hero-body の左パディングに対し margin-left: 0 で寸分狂わず一直線
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ① 感情のスイッチ：h1 */
.hero-h1 {
  font-family: var(--jp);
  font-size: clamp(1.06rem, 4.4vw, 1.72rem); /* PC最大=成人式/753と同じ1.72rem。実効は FINAL LAYOUT の L1434（同値） */
  font-weight: 300;
  letter-spacing: .08em;
  color: #fff;
  line-height: 1.55;
  margin: 0 0 18px 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
  animation: fup .9s ease .5s both;
  max-width: min(100%, 23em);
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  .hero-h1 { max-width: 13.5em; }
}

/* H1 サブコピー：「親子三代」（顧客）と「1978年から」（店舗）の主体を視覚的に分離。
   サイズ縮小＋透過＋上余白＋前後 en ダッシュで補助情報と分かるようにする。
   font-family は明示指定：global.css の全 span ルールでゴシックが適用されるため、H1 と揃えて明朝に戻す。 */
.hero-h1-sub {
  display: block;
  font-family: var(--jp);
  font-size: .62em;
  font-weight: 300;
  color: rgba(255,255,255,.78);
  letter-spacing: .06em;
  margin-top: 10px;
}
@media (max-width: 419px) {
  .hero-h1-sub { font-size: .68em; margin-top: 8px; }
}

/* ② 信頼証明バー：成人式/七五三ページ（.nb__trust）と統一した 3等分カラム＋区切り線スタイル。
   ゴールドのピルは廃止。各カラムは数値(大)を上・ラベル(小)を下に縦積み。Google ロゴは口コミ列に残す。
   ※ 旧スタイル（grid 3列／ピル）の重複定義は下部から撤去し、ここに一本化。 */
.trust-proof {
  display: grid;
  /* 3等分カラム（minmax(0,1fr) で常に等幅・はみ出さない）＋ 区切り線用の 1px トラック2本。
     子は順に track1=口コミ, track2=区切り, track3=実績, track4=区切り, track5=創業 に自動配置。 */
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  margin: 0 0 22px 0;
  padding: 13px 0;
  width: 100%;
  max-width: 30em;
  background: transparent;
  border-top: 1px solid rgba(232,212,163,.32);
  border-bottom: 1px solid rgba(232,212,163,.32);
  box-shadow: none;
  animation: fup .9s ease .65s both;
}
.trust-proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 6px;
}
/* カラム間の縦区切り線 */
.tp-sep {
  justify-self: center;
  width: 1px;
  height: 32px;
  background: rgba(232,212,163,.32);
}
/* 数値・★：暗いヒーロー上で可読なライトゴールド＋影。ロゴは数値行に内包。 */
.tp-num {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--en);
  color: #e8d4a3;
  font-weight: 600;
  font-size: clamp(.98rem, 2.4vw, 1.2rem);
  letter-spacing: .04em;
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
/* 数値の後ろに付く単位（組以上 / 年創業）＝数値より一回り小さく。日本語なので明朝（成人式/七五三と統一） */
.tp-unit {
  font-family: var(--jp);
  font-size: .62em;
  font-weight: 500;
  margin-left: 2px;
  letter-spacing: 0;
}
.tp-label {
  font-family: var(--jp);
  color: rgba(232,212,163,.85);
  font-weight: 400;
  font-size: .6rem;
  letter-spacing: .04em;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
/* SP：親(.hero-body)が絶対配置でビューポートより広く取られるレイアウト都合があり、
   width:100% のままだと 3列目が画面外にはみ出す。固定上限でビューポート内に必ず収める
   （PC は base の max-width:30em）。値は実機幅 360/390/414 で 3列が収まる範囲。 */
@media (max-width: 767px) { .trust-proof { max-width: 340px; } }
@media (max-width: 359px) { .trust-proof { max-width: 300px; } }
@media (max-width: 419px) {
  .trust-proof { padding: 11px 0; }
  .tp-num { font-size: .98rem; }
  .tp-label { font-size: .56rem; letter-spacing: 0; }
  .trust-proof-item { padding: 0 3px; }
}

/* ③ 対象・地域 — 左軸統一・自然な折り返し */
/* （既存 .hero-sub のスタイルは前段を継承し、margin-left のみ徹底） */

/* ヒーローLINEボタン */
.hero-line-btn {
  font-size: .82rem;
  padding: 15px 28px;
}
@media (min-width: 480px) { .hero-line-btn { padding: 15px 36px; } }

/* .line-night-note は components.css に移動済み */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. スタジオおだしまの約束（レター形式・信頼醸成ユニット）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.promise-sec {
  background: #FAF7F2; /* cream より僅かに温かみのある絹色 */
}
.promise-letter {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 40px 44px;
  border: 1px solid var(--gold);
  /* 二重線: 外側のoutlineを使わずinset box-shadowで画面端切れを防止 */
  box-shadow:
    inset 0 0 0 4px #FAF7F2,
    inset 0 0 0 5px rgba(184,151,90,.22),
    0 4px 24px rgba(184,151,90,.08);
  position: relative;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(184,151,90,.04) 39px,
      rgba(184,151,90,.04) 40px
    ),
    #FAF7F2;
}
@media (max-width: 580px) {
  .promise-letter { padding: 32px 20px 32px; }
}
.promise-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(184,151,90,.3);
}
.promise-en {
  font-family: var(--en);
  font-size: .6rem;
  letter-spacing: .44em;
  color: var(--gold);
  display: block;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.promise-title {
  font-family: var(--jp);
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  font-weight: 300;
  letter-spacing: .12em;
  color: var(--charcoal);
}
.promise-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.promise-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.promise-check {
  color: var(--gold);
  font-size: .8rem;
  flex-shrink: 0;
  margin-top: 3px;
  line-height: 1.6;
}
.promise-name {
  font-family: var(--jp);
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--charcoal);
  display: block;
  margin-bottom: 4px;
}
.promise-body {
  font-family: var(--jp); /* 情緒的UX強化：明朝体 */
  font-size: .84rem;
  color: var(--text2);
  line-height: 2.0;
  letter-spacing: .05em;
}
/* 署名エリア */
.promise-sign {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(184,151,90,.3);
  text-align: right;
}
.promise-sign-name {
  font-family: var(--jp);
  font-size: .78rem;
  letter-spacing: .2em;
  color: var(--warm-gray);
  font-weight: 300;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(184,151,90,.4);
  transform: rotate(-2deg);
  transform-origin: left bottom;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   お客様の声（Reviews）
   ─ 外部ライブラリなし / CSS疑似要素で星評価
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.reviews-sec { background: var(--warm-white); }

.rv-grid {
  display: grid;
  gap: 24px;
  margin-top: 36px;
}
@media (min-width: 768px) {
  .rv-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* レター風カード */
.rv-card {
  background: var(--cream);
  border: 1px solid rgba(184,151,90,.22);
  padding: 28px 24px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rv-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.rv-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rv-menu {
  font-family: var(--jp);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--gold-dk);
  font-weight: 400;
}
.rv-date {
  font-family: var(--en);
  font-size: .6rem;
  letter-spacing: .14em;
  color: var(--warm-gray);
}

/* 星評価: CSSのみ（外部ライブラリ不使用）
   data-rating属性の値に応じてcontentで描画 */
.rv-stars {
  display: flex;
  gap: 2px;
}
.rv-stars::before {
  /* 常に5つ星表示（満点固定・将来的にJSで動的変更可） */
  content: '★★★★★';
  color: #f59e0b;
  font-size: .85rem;
  letter-spacing: 1px;
  line-height: 1;
}
/* data-rating="4" の場合は4つ星に（CSS属性セレクタ） */
.rv-stars[data-rating="4"]::before { content: '★★★★☆'; }
.rv-stars[data-rating="3"]::before { content: '★★★☆☆'; }

.rv-body {
  flex: 1;
  margin: 0;
  border-left: none; /* blockquoteデフォルトリセット */
}
.rv-body p {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--text2);
  line-height: 2;
  letter-spacing: .04em;
  position: relative;
}
.rv-body p::before {
  content: '\201C'; /* 開き二重引用符 */
  font-family: var(--en);
  font-size: 2.4rem;
  color: rgba(184,151,90,.2);
  position: absolute;
  top: -12px; left: -6px;
  line-height: 1;
}

.rv-author {
  padding-top: 12px;
  border-top: 1px solid rgba(184,151,90,.18);
  background: transparent !important;
}
.rv-name {
  font-family: var(--jp);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--warm-gray);
  background: transparent !important;
  -webkit-text-fill-color: var(--warm-gray);
}

/* Googleリンク：文字とボタンの間隔を確保し、窮屈にならないよう余白を広く */
.rv-footer {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.rv-google-note {
  font-size: .75rem;
  color: var(--warm-gray);
  letter-spacing: .04em;
}
/* お客様の声セクションのフッター内ボタン */
.rv-footer .rv-google-btn { margin-top: 6px; }
.rv-g-logo {
  background: #fff;
  border-radius: 50%;
  padding: 1px;
  width: 16px; height: 16px;
  flex-shrink: 0;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   お問い合わせ（LINE / TEL 一本化デザイン）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.contact-note-form {
  font-size: .7rem;
  color: #fff;
  opacity: .85;
  margin-top: 6px;
  letter-spacing: .04em;
}

.contact-cards {
  display: grid;
  gap: 20px;
  margin-top: 36px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 580px) {
  .contact-cards { grid-template-columns: 1fr 1fr; }
}

.contact-card {
  border: 1px solid rgba(184,151,90,.25);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  background: #fff;
  transition: box-shadow .35s var(--ease);
}
.contact-card:hover { box-shadow: 0 6px 24px rgba(184,151,90,.1); }

.contact-card-icon svg { opacity: .75; }
.contact-card--line .contact-card-icon svg { fill: var(--line); }
.contact-card--tel  .contact-card-icon svg { stroke: var(--gold); }

.contact-card-label {
  font-family: var(--jp);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--charcoal);
}
.contact-card-sub {
  font-size: .7rem;
  color: var(--text2);
  letter-spacing: .04em;
  line-height: 1.7;
}

/* LINE CTA ボタン（contact専用のサイズ調整） */
.btn-line-contact {
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .1em;
  padding: 13px 24px;
  min-height: 44px;
  min-width: 200px;
}

/* 電話番号 */
.contact-tel-num {
  display: block;
  font-family: var(--en);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: .12em;
  color: var(--charcoal);
  margin: 4px 0;
  transition: color var(--t);
  min-height: 44px;
  line-height: 44px;
}
.contact-tel-num:hover { color: var(--gold); }

.contact-card-note {
  font-size: .68rem;
  color: var(--text2);
  opacity: 1;
  line-height: 1.7;
  letter-spacing: .04em;
}

.contact-night-note {
  text-align: center;
  font-size: .68rem;
  color: #fff;
  opacity: .85;
  margin-top: 20px;
  letter-spacing: .04em;
}

/* ロケ地リンク（.loc-link）＝トップ専用ではなく「本文に溶け込むリンク」の共通型として
   components.css へ移設した（2026-07-26）。トップ以外（お知らせ記事末の導線など）でも
   同じ見た目を使うため＝同じ役割のリンクを面ごとに別定義しない。 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO FINAL LAYOUT
   本番ヒーロー: 上部1枚写真 + 下部グラデーション文字エリア。
   共有CTA・信頼バッヂの後に、最終的なヒーロー構図だけを定義する。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero {
  height: calc(100svh - 60px + 3px);
  min-height: 640px;
  max-height: none;
  margin-top: 60px;
  padding-top: 0;
  display: block;
  align-items: initial;
}
@media (min-width: 768px) {
  .hero {
    height: calc(100svh - 72px);
    min-height: 660px;
    margin-top: 72px;
    padding-top: 0;
    align-items: initial;
  }
}

.hero-grid {
  position: relative;
  inset: auto;
  height: 100%;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
}
.hero-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  /* 文字可読性のため黒系の下方グラデに統一（旧ゴールド/茶の装飾グラデは廃止） */
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.22) 58%, rgba(0,0,0,.64) 78%, rgba(0,0,0,.86) 100%);
  pointer-events: none;
}
@media (max-width: 767px) {
  .hero-grid::before {
    display: block;
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.36) 52%, rgba(0,0,0,.76) 76%, rgba(0,0,0,.93) 100%);
  }
}
.hero-grid > div { min-width: 0; }
.hero-grid > .hg1 { overflow: visible; }
.hero-grid > .hero-body { overflow: visible; }
.hg1 {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  overflow: visible;
}
.hg1 .art-picture {
  height: 100%;
}
@media (max-width: 767px) {
  .hero-grid > .hg1 {
    align-self: start;
    height: 100%;
    overflow: visible;
  }
}
@media (min-width: 768px) {
  .hg1 .img-cover { object-position: center 28%; }
}

.hero-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  isolation: isolate;
  z-index: 5;
  box-sizing: border-box;
  width: 100%;
  min-height: 58%;
  max-width: none;
  margin: 0;
  padding: 92px var(--sp) 30px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: end;
  gap: 12px;
  background: none;
  border-top: 0;
  color: #fff;
  overflow: visible;
}
@media (min-width: 768px) {
  .hero-body {
    min-height: 56%;
    padding: 118px var(--sp-m) 58px;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    grid-template-rows: auto auto;
    align-content: end;
    align-items: end;
    column-gap: 40px;
  }
}
.hero-body > * {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin-left: 0;
}

.hero-h1 {
  width: 100%;
  font-size: clamp(1.06rem, 4.4vw, 1.72rem); /* PC最大=成人式/753と同じ1.72rem。SP小画面のみ縮小し2行目「おだしま…います。」を1行に収め「す。」孤立を防ぐ。min 1.06rem は実機相当CDP(360px)で2行目余白30px＝実機フォント差を吸収。base(L819)も同値で揃える */
  line-height: 1.45;
  letter-spacing: .04em;
  margin: 0;
  text-shadow: none;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
}
@media (max-width: 767px) {
  .hero-h1 {
    max-width: none;
  }
  /* 信頼バッジ/H1/サブ文だけを下げる（CTAは下端で固定）。
     この3要素のみ相対オフセットで下方向へ。CTA(.hero-acts)は対象外なので位置不変。
     ※CTA直上に並ぶ構造のため、CTAを動かさず下げられるのは ≈サブ↔CTA余白(約12px)まで。 */
  .hero-h1,
  .trust-proof,
  .hero-sub { top: 10px; }
  /* 信頼バッジをサブ文（成人式・七五三…）に近づける：バッジ既定の margin-bottom:22px を詰める。
     下端揃えのためバッジが下方向へ寄り（H1も追従）、サブ・CTAは不動。 */
  .trust-proof { margin-bottom: -4px; }
}
/* （旧 .trust-proof スタイル＝grid 3列／ピル／レスポンシブ列調整はここにあったが、
   上部の 3等分カラム＋区切り線スタイルへ一本化したため撤去。配置のみ下の @768 で指定。） */
.hero-sub {
  margin: 0;
  color: rgba(255,255,255,.78);
  text-shadow: none;
  font-size: .78rem;
  line-height: 1.85;
  max-width: none;
}
.hero-acts {
  margin: 0;
  width: auto;
}
@media (min-width: 768px) {
  .hero-sub {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  .hero-acts {
    grid-column: 2;
    grid-row: 2;
  }
  .hero-h1 {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }
  .trust-proof {
    grid-column: 1;
    grid-row: 2;
    /* CTA(.hero-acts)と下端を揃える：base の margin-bottom:22px を打ち消す。
       行2の高さが縮む→align-content:end により行1(H1/サブ文)も下方向へ追従して下がる。 */
    margin-bottom: 0;
  }
}

.hero-scroll { display: none; }