/* --- Mac LP Specific CSS --- */
.lp-theme { --tomato: #e60012; }

/* -----------------------------------------------------------
 * Gutenberg の wp:group は常に内部に
 *   <div class="wp-block-group__inner-container is-layout-flow">
 * を挿入し、元々の children はその中に入る。
 * そのため元の CSS が親要素 (例: .about-points) に grid を効かせていても
 * 直下子は inner-container 1 個になり grid が成立しない。
 *
 * 対策: 元の layout 指定を .wp-block-group__inner-container に横移植する。
 * また is-layout-flow の自動 margin や is-layout-constrained の max-width も
 * LP 内では解除。 (display:contents は editor React レンダラと干渉するため不使用)
 * ----------------------------------------------------------- */

/* === is-layout-* の既定スタイルを解除 (念のため) === */
.lp-theme .is-layout-constrained > *,
.lp-theme .is-layout-flow > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.lp-theme .is-layout-flow > * + * {
  margin-block-start: 0;
}

/* trust の lp-section-head: inner title group + lead paragraph を flex 横並び */
.lp-theme .trust-section .lp-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
}

/* === wp:image が生成する <figure> の default margin を潰す === */
.lp-theme .wp-block-image,
.lp-theme .wp-block-image figure {
  margin: 0;
}
.lp-theme .season-overview-card .wp-block-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
/* .point: 元 inline で padding:16px + display:flex;flex-direction:column を指定していたので再現 */
.lp-theme .point {
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.lp-theme #contact .wp-block-image img {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: block;
}

/* === wp:heading が自動付与する .wp-block-heading の margin を既存 CSS に委ねる === */
.lp-theme .wp-block-heading {
  margin: 0;
}

/* === WP デフォルトスタイルが LP の色/サイズを上書きしないよう明示 === */
.lp-theme .lp-section-head h2,
.lp-theme .lp-section-head h2.wp-block-heading {
  font-size: clamp(28px, 4vw, 42px);
  color: var(--tomato);
}
.lp-theme .trust-section .lp-section-head h2,
.lp-theme .trust-section .lp-section-head h2.wp-block-heading {
  color: #12344f;
}
.lp-theme .voices-section .lp-section-head h2,
.lp-theme .voices-section .lp-section-head h2.wp-block-heading {
  color: #fff;
}

/* === パターン内で使うユーティリティクラス (インラインstyleをブロック検証エラーの原因にしないため) === */
.lp-theme .lp-section-head.align-left { text-align: left; }
.lp-theme .section-head-lead {
  font-size: 13px;
  max-width: 400px;
  margin: 0;
  opacity: .9;
}
.lp-theme .about-intro {
  font-weight: 700;
  margin: 0 0 32px;
  font-size: 32px;
  text-align: center;
  line-height: 1.4;
}
.lp-theme .about-body {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 24px;
}
.lp-theme .about-body--last {
  margin-bottom: 32px;
}
.lp-theme .about-cta-wrap {
  text-align: center;
  margin-top: 48px;
}
.lp-theme .about-cta-headline {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 24px;
}
.lp-theme .label-contact { color: #ffe5a6; }
.lp-theme .wrap-pad-80 { padding-top: 80px; }
.lp-theme .season-overview-body .wp-block-heading { margin: 0 0 12px; }
.lp-theme .season-overview-body > p { margin: 0; }

/* === span → p 変換時に発生するブラウザデフォルト margin を解除 === */
/* .label (ABOUT / TRUST / Contact の装飾ラベル) */
.lp-theme p.label { margin: 0; }
/* season-overview の SUMMER/WINTER SUPPORT kicker */
.lp-theme p.season-overview-kicker { margin: 0 0 10px; }
/* point カード内 (番号・タイトル・説明) */
.lp-theme p.point-num   { margin: 0; }
.lp-theme p.point-title { margin: 0 0 8px; }
.lp-theme p.point-desc  { margin: 0; }

/* wp:paragraph が自動付与する .wp-block-paragraph の margin リセット
   (section-head-lead / about-* / cta-headline など、既存クラス側で margin 制御するため) */
.lp-theme p.section-head-lead,
.lp-theme p.about-intro,
.lp-theme p.about-body,
.lp-theme p.about-body--last,
.lp-theme p.about-cta-headline,
.lp-theme p.season-result-note {
  margin-block: 0;
}
/* .about-body の margin-bottom は既存ルールで指定済 */

/* === h3/h4 の wp-block-heading が追加する margin も既存 LP 側に戻す === */
.lp-theme .trust-season-head .wp-block-heading,
.lp-theme .season-result-head .wp-block-heading {
  margin: 0;
}

/* === wrap-pad-80 (contact 下部ロゴ) の wp-block-image centering 保険 === */
.lp-theme .wrap-pad-80 .wp-block-image {
  display: flex;
  justify-content: center;
}

.hero-mosaic { position: relative; min-height: 85vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--paper); }
.mosaic-grid { position: absolute; inset: -5%; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; z-index: 0; opacity: 0.6; transform: rotate(-4deg) scale(1.1); }
.mosaic-grid img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.hero-center { position: relative; z-index: 2; background: #fff; padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 60px); border-radius: 50%; width: min(700px, 90vw); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 30px 80px rgba(230,0,18,0.15); }
.hero-center img { width: min(280px, 60%); margin-bottom: 24px; }
.hero-center h1 { font-size: clamp(20px, 3.5vw, 32px); color: var(--tomato); margin: 0 0 16px; line-height: 1.4; text-shadow: none; }
.hero-center p { font-size: clamp(16px, 2.5vw, 22px); font-weight: 900; color: var(--tomato); margin: 0; text-shadow: none; }

@media (max-width: 640px) {
  .hero-kv {
    min-height: 540px !important;
    height: auto !important;
    align-items: flex-end !important;
    padding: 318px 18px 34px !important;
    background: #fff !important;
  }
  .hero-kv > img {
    top: 68px !important;
    bottom: auto !important;
    width: 50% !important;
    height: 238px !important;
    opacity: 1;
    filter: saturate(0.95);
  }
  .hero-kv > img:first-child { object-position: right center !important; }
  .hero-kv > img:nth-child(2) { object-position: left center !important; }
  .kv-hero-center {
    max-width: 360px !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  .kv-hero-center img {
    position: absolute;
    top: -202px;
    left: 50%;
    transform: translateX(-50%);
    width: min(210px, 62vw) !important;
    margin-bottom: 14px !important;
  }
  .kv-hero-center p:first-of-type { margin-top: 0 !important; }
  .kv-hero-center p:first-of-type {
    font-size: 22px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
  }
  .kv-hero-center p:last-of-type {
    width: min(320px, 88vw);
    margin-top: 18px !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
  }
  .kv-hero-center p br { display: none; }
  .kv-hero-center p:first-of-type br { display: inline; }
}

@media (max-width: 390px) {
  .hero-kv {
    min-height: 520px !important;
    padding-top: 294px !important;
    padding-bottom: 28px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .hero-kv > img {
    top: 66px !important;
    height: 216px !important;
  }
  .kv-hero-center img {
    top: -184px;
    width: min(190px, 58vw) !important;
  }
  .kv-hero-center p:first-of-type { font-size: 20px !important; }
  .kv-hero-center p:last-of-type { font-size: 12px !important; }
}

.lp-section-head { text-align: center; margin-bottom: 60px; position: relative; }
.lp-section-head h2 { font-size: clamp(28px, 4vw, 42px); color: var(--tomato); }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-points { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.point { position: relative; padding: 24px; background: var(--paper); border-radius: 8px; border: 1px solid var(--line); overflow: hidden; }
.point-num { position: absolute; bottom: -10px; right: -5px; font-size: 100px; font-weight: 900; color: var(--theme-yellow); opacity: 0.15; line-height: 1; margin: 0; z-index: 0; pointer-events: none; }
.point-title { position: relative; font-weight: 900; font-size: 16px; margin-bottom: 8px; display: block; z-index: 1; }
.point-desc { position: relative; color: var(--muted); font-size: 12px; line-height: 1.6; z-index: 1; display: block; }
.point img { position: relative; z-index: 1; }
.about-visual { position: relative; }
.about-visual img { border-radius: 12px; transform: rotate(3deg); box-shadow: var(--shadow); }
.badge { position: absolute; bottom: -30px; right: -30px; width: 180px; height: 180px; background: var(--tomato); color: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 900; line-height: 1.2; box-shadow: 0 10px 30px rgba(230,0,18,0.3); transform: rotate(-10deg); }
.badge span { font-size: 14px; opacity: 0.9; }
.badge strong { font-size: 38px; }

.season-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 36px 0 8px; }
.season-overview-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.04); }
.season-overview-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.season-overview-body { padding: 24px; }
.season-overview-kicker { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 900; letter-spacing: 0; }
.season-overview-card.summer .season-overview-kicker { color: var(--tomato); }
.season-overview-card.winter .season-overview-kicker { color: var(--sky); }
.season-overview-body h3 { margin: 0 0 12px; font-size: clamp(20px, 2.5vw, 26px); line-height: 1.4; }
.season-overview-body p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.9; font-weight: 500; }
/* 元の mac_lp.css に `.about-points .point > img { display: none !important; }` が
   あったが、画像を実際に表示する運用になったため削除。 */

.trust-section { background: #f5f8fb; color: var(--ink); }
.trust-section .lp-section-head h2 { color: #12344f; }
.trust-section .lp-section-head .label { color: var(--sky); opacity: 0.12; }
.trust-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 60px; }
.trust-stat { background: #fff; color: var(--ink); padding: 30px 20px; border-radius: 12px; text-align: center; }
.trust-stat span { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 12px; }
.trust-stat strong { display: block; font-size: clamp(28px, 4vw, 42px); color: var(--sky); line-height: 1; }
.trust-stat strong small { font-size: 16px; }
.trust-season-results { display: grid; gap: 34px; }
.trust-season { padding: clamp(28px, 4vw, 44px); border-radius: 16px; color: #fff; }
.trust-season.summer { background: var(--tomato); }
.trust-season.winter { background: var(--sky); }
.trust-season-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.trust-season-head h3 { margin: 0; color: #fff; font-size: clamp(20px, 3vw, 28px); line-height: 1.4; }
.trust-season-head p { margin: 0; color: rgba(255,255,255,0.86); font-size: 13px; font-weight: 700; }
.trust-season.summer .trust-stat strong { color: var(--tomato); }
.trust-season.winter .trust-stat strong { color: var(--sky); }

.pref-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pref-card { background: #fff; color: var(--ink); border-radius: 12px; padding: 30px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,0.03); text-align: center; }
.pref-card img { height: 160px; width: 100%; object-fit: contain; margin: 0 auto 24px; }
.pref-card .pref-name { display: inline-block; padding: 4px 16px; background: #f0f8ff; color: var(--sky); border-radius: 99px; font-size: 12px; font-weight: 900; margin-bottom: 16px; }
.pref-card .pref-num { color: var(--ink); font-size: 38px; font-weight: 900; line-height: 1; margin-bottom: 24px; }
.pref-card .pref-num small { font-size: 14px; color: var(--muted); }
.pref-card .pref-details { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 16px; }
.winter-item-cards { grid-template-columns: repeat(3, 1fr); }
.winter-item-cards .pref-card { display: flex; flex-direction: column; justify-content: center; min-height: 210px; }
.winter-item-cards .pref-details { justify-content: center; }
.item-illustration { width: min(150px, 70%); aspect-ratio: 1; height: auto; object-fit: contain; margin: 0 auto 18px; border-radius: 0; box-shadow: none; flex: 0 0 auto; }
.season-result-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.season-result-title { margin: 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.4; color: var(--ink); }
.season-result-note { margin: 0; font-size: 13px; color: var(--muted); font-weight: 700; }
.season-result.summer .pref-card .pref-name { background: #fff5f6; color: var(--tomato); }
.season-result.winter .pref-card .pref-name { background: #f0f8ff; color: var(--sky); }
.trust-section .season-result { margin-top: 28px; }
.trust-section .season-result-title { color: #fff; }
.trust-section .season-result-note { color: rgba(255,255,255,0.86); }

.voices-section { position: relative; background: #fdfbf7; padding-top: 0; }
.voices-bg-top { position: absolute; top: 0; left: 0; right: 0; height: 50%; background: var(--tomato); z-index: 0; }
.voices-wrap { position: relative; z-index: 1; padding-top: clamp(70px, 9vw, 116px); }
.voices-section .lp-section-head h2, .voices-section .lp-section-head .label { color: #fff; }
.voice-marquee-container { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); overflow: hidden; margin-bottom: 80px; padding: 20px 0; }
.voice-marquee-track { display: flex; width: fit-content; animation: lp-marquee 30s linear infinite; }
.voice-marquee-content { display: flex; gap: 40px; padding: 0 20px; }
@keyframes lp-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.voice-marquee-track:hover { animation-play-state: paused; }

.polaroid-card { width: 320px; flex-shrink: 0; background: #f8d597; padding: 16px 16px 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); position: relative; transform: rotate(-1.5deg); border-radius: 4px; }
.polaroid-card:nth-child(even) { transform: rotate(1.5deg) translateY(10px); }
.polaroid-card:nth-child(3n) { transform: rotate(-1deg) translateY(-5px); }
.polaroid-tape { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 80px; height: 24px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 4px rgba(0,0,0,0.05); z-index: 2; }
.polaroid-card img { width: 100%; height: 220px; object-fit: cover; margin-bottom: 12px; border-radius: 2px; }
.polaroid-card p { background: #fffceb; padding: 20px; font-size: 14px; font-weight: 700; line-height: 1.8; color: #4a3820; margin: 0; font-family: "Yu Mincho", "MS Mincho", serif; letter-spacing: 0.05em; text-align: justify; border-radius: 2px; }
.letters-head { text-align: center; margin-bottom: 30px; font-weight: 900; font-size: 24px; }
.letters-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.letters-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

.cta-section { background: var(--tomato); text-align: center; color: #fff; }
.cta-section h2 { margin: 0 0 24px; font-size: clamp(24px, 4vw, 38px); line-height: 1.4; color: #fff; }
.cta-section p { font-size: 14px; opacity: 0.9; margin: 0 0 40px; font-weight: 500; }
.cta-box { background: #fff; border-radius: 16px; padding: 40px; color: var(--ink); display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; align-items: center; text-align: left; margin-bottom: 40px; }
.goal { border-right: 1px dashed var(--line); padding-right: 40px; }
.goal span { display: block; font-size: 12px; color: var(--muted); font-weight: 900; margin-bottom: 12px; }
.goal strong { display: block; font-size: clamp(32px, 5vw, 54px); font-weight: 900; line-height: 1; white-space: nowrap; }
.goal strong small { font-size: 20px; }
.bank-info { font-size: 14px; font-weight: 500; }
.bank-info table { width: 100%; border-collapse: collapse; }
.bank-info th { text-align: left; color: var(--muted); padding: 8px 0; width: 100px; }
.bank-info td { font-weight: 900; padding: 8px 0; }
.cta-btns { display: flex; justify-content: center; gap: 20px; }
.cta-btns .button { padding: 0 40px; min-height: 60px; font-size: 16px; border-radius: 99px; }
.btn-yellow { background: var(--theme-yellow); color: var(--ink); }
.btn-outline { background: transparent; border: 2px solid #fff; color: #fff; }

.imp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.imp-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 30px 24px; }
.imp-num { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: #fff5f6; color: var(--tomato); font-weight: 900; align-items: center; justify-content: center; font-size: 12px; margin-bottom: 16px; }
.imp-title { font-size: 12px; color: var(--tomato); font-weight: 900; margin-bottom: 8px; display: block; }
.imp-name { font-size: 18px; font-weight: 900; margin-bottom: 16px; display: block; }
.imp-desc { font-size: 12px; color: var(--muted); line-height: 1.6; }

@media (max-width: 920px) {
  .about-grid, .season-overview, .cta-box { grid-template-columns: 1fr; }
  .trust-stats, .pref-cards, .voice-cards, .imp-cards { grid-template-columns: 1fr 1fr; }
  .winter-item-cards { grid-template-columns: 1fr 1fr; }
  .letters-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .goal { border-right: none; border-bottom: 1px dashed var(--line); padding-right: 0; padding-bottom: 30px; }
}

@media (max-width: 640px) {
  .trust-stats, .pref-cards, .voice-cards, .imp-cards, .letters-grid { grid-template-columns: 1fr; }
  .winter-item-cards { grid-template-columns: 1fr; }
  .cta-btns { flex-direction: column; }
}

.site-footer.red-footer { background: var(--tomato); color: rgba(255,255,255,0.8); border: none; }
.red-footer .footer-links { color: #fff; }
.red-footer .footer-sns a { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }

/* 特設 LP ヘッダー CTA (border-radius ピル型 + tomato bg) */
.button.lp-cta {
  border-radius: 99px;
  background: var(--tomato);
  box-shadow: none;
}

/* ================================================================
 * Gutenberg エディタ (iframe) 内の LP ブロック表示調整
 * useBlockProps で全 LP ブロックに .yume-lp-edit を付与している。
 * ================================================================ */

/* コンテンツ幅を本番と同じ 1180px に収めてはみ出し防止 */
.editor-styles-wrapper .yume-lp-edit {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.editor-styles-wrapper .yume-lp-edit section {
  width: 100%;
  box-sizing: border-box;
}
/* trust 内の 100vw はみ出し (voices-bg-top 等) を抑制 */
.editor-styles-wrapper .yume-lp-edit .voices-bg-top {
  display: none;
}

/* voices のマーキーアニメはエディタ上では停止 (ずっと動くと編集しにくい)。
   100vw はみ出しも抑え、polaroid カードは 3 列 grid で折り返し表示に。 */
.editor-styles-wrapper .voice-marquee-container {
  width: auto !important;
  left: 0 !important;
  transform: none !important;
  overflow: visible !important;
  margin-bottom: 24px;
}
.editor-styles-wrapper .voice-marquee-track {
  animation: none !important;
  width: 100% !important;
  display: block !important;
}
.editor-styles-wrapper .voice-marquee-content {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  padding: 0 !important;
  width: 100% !important;
}
/* polaroid-card は本番 width:320px 固定だが、grid cell に収まるよう解除 */
.editor-styles-wrapper .polaroid-card {
  width: auto !important;
  max-width: 100%;
}
/* 画面幅に応じて 3→2→1 列に折り返し */
@media (max-width: 1000px) {
  .editor-styles-wrapper .voice-marquee-content {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .editor-styles-wrapper .voice-marquee-content {
    grid-template-columns: 1fr !important;
  }
}
/* シームレスループ用の 2 回目描画はエディタでは不要 */
.editor-styles-wrapper .voice-marquee-content[aria-hidden="true"] {
  display: none !important;
}

/* partners (TOP ページ) marquee も同様に停止 (念のため) */
.editor-styles-wrapper .partners-track {
  animation: none !important;
}

/* エディタ内では voices の背景 (voices-section::before 等) を抑えて見やすく */
.editor-styles-wrapper .yume-lp-edit .voices-section {
  padding-top: clamp(40px, 6vw, 70px);
}

/* voices の見出し + ポラロイドカード + 追加ボタン までを赤背景で囲う。
   letters-head / letters-grid には被らないよう yume-lp-edit-voices-top ラッパー限定。 */
.editor-styles-wrapper .yume-lp-edit-voices-top {
  background: var(--tomato);
  padding: 24px 28px 32px;
  border-radius: 10px;
  margin-bottom: 40px;
}
/* 赤背景内の "+ ポラロイドカード追加" ボタンは視認性のため背景白のまま維持
   (既に .yume-lp-edit .components-button:not(.is-destructive) で指定済) */

/* ============================================================
 * エディタ UI の "+ 追加" 系ボタンを白背景 + 青線 + 青文字 に統一
 *   (@wordpress/components の <Button variant="secondary">)
 *   削除用 <Button isDestructive> はそのまま赤を維持する。
 * ============================================================ */
.editor-styles-wrapper .yume-lp-edit .components-button:not(.is-destructive) {
  background: #fff !important;
  color: var(--sky, #3d83bd) !important;
  border: 1px solid var(--sky, #3d83bd) !important;
  box-shadow: none !important;
}
.editor-styles-wrapper .yume-lp-edit .components-button:not(.is-destructive):hover,
.editor-styles-wrapper .yume-lp-edit .components-button:not(.is-destructive):focus {
  background: #f0f8ff !important;
  color: var(--sky, #3d83bd) !important;
}