@charset "UTF-8";
/* ============================================================
   meissen_interior_event style.css
   Variant C: ジャーナル・モノグラム
   Pattern 04 ハイブリッド型 (読3:商品2)
   2026-05-12 全面置換 (lp-baseline-ui 準拠)
   2026-05-12 リビジョン: calc(rem*1.5) 全廃・本文書き直し対応・商品画像 max-width 統一
   ============================================================ */

/* ----------------------------------------------------------
   :root tokens — draft.md 軸3 lp-baseline-ui (黄金比ステップ)
   ---------------------------------------------------------- */
:root {
  --sp-1: 8px;  --sp-2: 13px; --sp-3: 21px;
  --sp-4: 34px; --sp-5: 55px; --sp-6: 89px; --sp-7: 144px;
  --c-paper: #FBFAF7;
  --c-cream: #F2EDE0;
  --c-ink:   #1A1A1A;
  --c-ink-soft: #3A3A3A;
  --c-ink-mute: #5A5A5A;
  --c-line:  #E8E2D2;
  --c-line-dk:#D9D4C8;
  --c-accent:#0B1F44; /* navy */
  --c-gold:  #9F8A5A;
  --c-gold-lt:#C9A45A;
  --ff-serif-en: "Cormorant Garamond", Georgia, serif;
  --ff-serif-jp: "Noto Serif JP", "Yu Mincho", serif;
  --ff-sans:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --ff-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* base
------------------------------ */
* {box-sizing: border-box;}
a {
  opacity: 1 !important;
  -webkit-tap-highlight-color: rgba(86,86,86,0.5);
  color: inherit;
}
h2, h3, h4, h5 { font-weight: normal; }
ul, ol, li { list-style: none; }
dd {
  display: block;
  margin-inline-start: 0;
  unicode-bidi: normal;
}
figure {
  display: block;
  margin: 0;
}
img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   journal-paper / journal-cream / journal-dark  背景帯
   ============================================================ */
.journal-paper {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--ff-serif-en), var(--ff-serif-jp);
}
.journal-cream {
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--ff-serif-en), var(--ff-serif-jp);
}
.journal-dark {
  background: var(--c-ink);
  color: var(--c-paper);
  font-family: var(--ff-serif-en), var(--ff-serif-jp);
}

/* ============================================================
   wrapper / wrap  共通幅
   ============================================================ */
.wrapper_top,
.wrapper_first,
.wrapper_second,
.wrapper_third,
.wrapper_fourth,
.wrapper_fifth,
.wrapper_sixth,
.wrapper_seventh {
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  padding: 0 6%;
}
.wrapper_footer {
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.wrap_top    { width: 100%; margin: 0 auto; padding: var(--sp-3) 0 var(--sp-5); }
.wrap_first  { width: 100%; margin: 0 auto; padding: var(--sp-7) 0 var(--sp-5); }
.wrap_second { width: 100%; margin: 0 auto; padding: var(--sp-3) 0 var(--sp-7); }
.wrap_third  { width: 100%; margin: 0 auto; padding: var(--sp-7) 0; }
.wrap_fourth { width: 100%; margin: 0 auto; padding: var(--sp-7) 0; }
.wrap_fifth  { width: 100%; margin: 0 auto; padding: var(--sp-7) 0; border-top: 1px solid var(--c-ink); }
.wrap_sixth  { width: 100%; margin: 0 auto; padding: var(--sp-7) 0; border-top: 1px solid var(--c-line); }
.wrap_seventh{ width: 100%; margin: 0 auto; padding: var(--sp-7) 0; }
.wrap_footer { width: 100%; margin: 0 auto; padding: var(--sp-5) 0 var(--sp-6); }

/* section
------------------------------ */
.section_top,
.section_first,
.section_second,
.section_third,
.section_fourth,
.section_fifth,
.section_sixth,
.section_seventh,
.section_footer {
  width: 100%;
  margin: 0 auto;
  max-width: 1280px;
}

/* ============================================================
   typography utility (Variant C base classes)
   2026-05-12 リビジョン: calc(rem*1.5) 撤廃 → 16px ベース固定
   ============================================================ */
.ovl {
  font: 500 12px/1.4 var(--ff-sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.ovl-accent { color: var(--c-accent); }
.ovl-cta    { color: #9A8F70; }
.mono {
  font: 400 12px/1.5 var(--ff-mono);
  letter-spacing: 0.06em;
}
.mono-muted { color: #7A7466; }
.mono-colophon { color: #9A8F70; }
.num {
  font: 500 12px/1 var(--ff-sans);
  letter-spacing: 0.24em;
  color: var(--c-accent);
}
.num-plain { color: var(--c-ink); font-style: normal; }
.jp { font-family: var(--ff-serif-jp); }
.dropcap::first-letter {
  font-family: var(--ff-serif-en);
  font-style: italic;
  font-size: 5.5em;
  line-height: 0.85;
  float: left;
  padding: 8px 14px 0 0;
  color: var(--c-accent);
}

/* ============================================================
   wrapper_top — Journal Masthead + Hero
   ============================================================ */
.journal-masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-line);
}
.masthead-no {
  font-size: calc(1.0rem * 1.5);
  font-style: italic;
  font-family: var(--ff-serif-en);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-4) 0 var(--sp-6);
}
.hero-text { display: flex; flex-direction: column; gap: var(--sp-4); }
.hero-display {
  font-family: var(--ff-serif-en);
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.92;
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--c-ink);
}
.hero-display em { font-style: italic; }
.hero-display-line { display: block; }
.title-jp {
  font-family: var(--ff-serif-jp);
  font-size: calc(0.9rem * 1.5);
  line-height: 1.85;
  margin: 0;
  color: var(--c-ink-soft);
}
.hero-meta {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}
.hero-rule {
  display: inline-block;
  width: 60px;
  height: 1px;
  background: var(--c-ink);
}
.hero-figure { margin: 0; }
.hero-figure .eachPik {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.hero-caption {
  font-family: var(--ff-serif-jp);
  font-size: calc(0.9rem * 1.5);
  color: var(--c-ink-mute);
  margin-top: var(--sp-2);
  font-style: italic;
}

.journal-contents {
  border-top: 1px solid var(--c-ink);
  border-bottom: 1px solid var(--c-ink);
  padding: var(--sp-3) 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-3);
}
.contents-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contents-label {
  font-family: var(--ff-serif-en);
  font-size: calc(0.9rem * 1.5);
  font-style: italic;
  color: var(--c-ink);
}

/* ============================================================
   wrapper_first — Intro Essay (dropcap)
   ============================================================ */
.intro-grid {
  display: grid;
  grid-template-columns: 180px 1fr 200px;
  gap: var(--sp-5);
  max-width: 1280px;
  margin: 0 auto;
}
.intro-side { padding-top: 8px; }
.intro-side-left { border-right: 0; }
.intro-side-right {
  padding-left: var(--sp-3);
  border-left: 1px solid var(--c-line);
}
.essay-h2 {
  font-family: var(--ff-serif-en);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  margin: 0 0 var(--sp-3);
  font-weight: 400;
  font-style: italic;
  color: var(--c-ink);
}
.essay-lede {
  font-family: var(--ff-serif-jp);
  font-size: calc(0.9rem * 1.5);
  line-height: 2.05;
  margin: 0 0 var(--sp-3);
  color: var(--c-ink);
}
.essay-body {
  font-family: var(--ff-serif-jp);
  font-size: calc(0.9rem * 1.5);
  line-height: 2;
  margin: 0;
  color: var(--c-ink-soft);
}
.aside-text {
  font-family: var(--ff-serif-jp);
  font-size: calc(0.9rem * 1.5);
  line-height: 1.95;
  margin: var(--sp-2) 0 0;
  color: var(--c-ink-soft);
}

/* ============================================================
   block-head  (各 wrapper の見出し統一)
   ============================================================ */
.block-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--sp-5);
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.block-h2 {
  font-family: var(--ff-serif-en);
  font-size: clamp(28px, 4.5vw, 48px);
  margin: var(--sp-2) 0 0;
  font-weight: 400;
  font-style: italic;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.block-sub {
  font-family: var(--ff-serif-jp);
  font-size: calc(0.9rem * 1.5);
  color: var(--c-ink-mute);
  max-width: 360px;
  line-height: 1.95;
  margin: 0;
}

/* ============================================================
   Product Block (subsection_third + flexBox)
   既存 baseline-ui を保ちつつ Variant C へ調整
   ============================================================ */
.contents_explain {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.subsection_third {
  margin: var(--sp-6) 0 0;
  padding: 0;
}
.subsection_third:first-child { margin-top: 0; }
.subsection_third + .subsection_third {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}
.subsection_third .heading_sub {
  margin: 0 0 var(--sp-3);
  font-family: var(--ff-serif-en), var(--ff-serif-jp);
  color: var(--c-ink);
  font-size: calc(0.9rem * 1.5);
  line-height: 1.5;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  border-left: 3px solid var(--c-accent);
  padding-left: var(--sp-2);
  text-align: left;
}

/* asymmetric-feature: 1点目を大きく見せる */
.asymmetric-feature .imgBox_02 figure { padding: 0; }

/* flexBox 共通 (textBox 36 / imgBox 60 base) */
.flexBox_01,
.flexBox_02 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 4%;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: flex-start;
}
.flexBox_02 { flex-direction: row-reverse; }
.textBox_01 { width: 48%; margin: 0; padding: 0; }
.imgBox_02  { width: 48%; margin: 0; padding: 0; }
.textBlock_01 { width: 100%; margin: 0; padding: 0; }
.imgBlock_01  { width: 100%; margin: 0; padding: 0; }

/* PC 拡大（社長指摘 2026-05-09(2) 踏襲） */
@media screen and (min-width: 1101px) {
  .flexBox_01 > .imgBox_02,
  .flexBox_02 > .imgBox_02 { width: 65%; }
  .flexBox_01 > .textBox_01,
  .flexBox_02 > .textBox_01 { width: 32%; }
}
@media screen and (min-width: 640px) and (max-width: 1100px) {
  .flexBox_01 > .imgBox_02,
  .flexBox_02 > .imgBox_02 { width: 60%; }
  .flexBox_01 > .textBox_01,
  .flexBox_02 > .textBox_01 { width: 36%; }
}

/* text_01 */
p.text_01 {
  margin: 0 0 var(--sp-2);
  font-family: var(--ff-serif-jp);
  color: var(--c-ink);
  font-size: calc(0.9rem * 1.5);
  line-height: 2;
  letter-spacing: 0.04em;
  text-align: left;
}
p.text_01:last-child { margin-bottom: 0; }
p.text_01 strong { font-weight: 500; color: var(--c-accent); }

/* figure inside imgBox */
.imgBox_02 figure {
  margin: 0;
  width: 100%;
}
.imgBox_02 figure a {
  display: block;
  text-decoration: none;
}
.imgBox_02 figure a img.eachPik {
  width: 100%;
  height: auto;
  transition: 0.3s;
  background: #FFF;
}
.imgBox_02 figure a:hover img.eachPik { filter: brightness(0.92); }

.imgBox_02 > figure + .contents_button {
  margin: var(--sp-3) 0 0;
  padding: 0;
}

/* ============================================================
   2026-05-12 商品画像 max-width 統一（FIX_3）
   ============================================================ */
.subsection_third .imgBox_02 figure img.eachPik {
  max-width: 360px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ============================================================
   wrapper_third — Collector Voice / Living with Meissen
   ============================================================ */
.voice-wrap {
  max-width: 1080px;
  margin: 0 auto;
  text-align: left;
}
.voice-num { text-align: center; display: block; }
.voice-pull {
  font-family: var(--ff-serif-jp);
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1.45;
  margin: var(--sp-3) 0 var(--sp-2);
  text-align: center;
  font-weight: 400;
  color: var(--c-ink);
}
.voice-sub {
  font-family: var(--ff-serif-jp);
  font-size: calc(0.9rem * 1.5);
  line-height: 1.7;
  text-align: center;
  color: var(--c-ink-mute);
  margin: 0 0 var(--sp-5);
}
.ornament-laurel {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-5);
}
.voice-columns {
  column-count: 2;
  column-gap: 48px;
  column-rule: 1px solid var(--c-line);
  font-family: var(--ff-serif-jp);
}
.voice-para {
  font-size: calc(0.9rem * 1.5);
  line-height: 2.1;
  margin: 0 0 var(--sp-3);
  break-inside: avoid;
  color: var(--c-ink-soft);
}
.voice-para:first-child { color: var(--c-ink); margin-top: 0; }
.voice-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line-dk);
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ============================================================
   wrapper_fifth — Craftsmanship
   ============================================================ */
.hands-wrap {
  max-width: 1080px;
  margin: 0 auto;
}
.ornament-acanthus {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-2);
}
.hands-num,
.hands-h2,
.hands-lede {
  text-align: center;
}
.hands-h2 {
  font-family: var(--ff-serif-en);
  font-size: clamp(34px, 5vw, 56px);
  margin: var(--sp-2) 0 var(--sp-2);
  font-weight: 400;
  font-style: italic;
  color: var(--c-ink);
}
.hands-lede {
  font-family: var(--ff-serif-jp);
  font-size: calc(0.9rem * 1.5);
  color: var(--c-ink-mute);
  max-width: 680px;
  margin: 0 auto var(--sp-5);
  line-height: 1.95;
  text-align: left;
}
.hands-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.hand-step { text-align: left; padding: 0 var(--sp-1); }
.hand-roman {
  font-family: var(--ff-serif-en);
  font-size: calc(2.3333rem * 1.5);
  font-style: italic;
  color: var(--c-accent);
  line-height: 1;
  margin: 0;
}
.hand-en {
  font-family: var(--ff-serif-en);
  font-size: calc(0.9167rem * 1.5);
  margin: var(--sp-2) 0 4px;
  font-weight: 400;
  font-style: italic;
  color: var(--c-ink);
}
.hand-jp {
  font-family: var(--ff-serif-jp);
  font-size: calc(0.9rem * 1.5);
  color: var(--c-ink-soft);
}
.hand-step .mono { margin-top: var(--sp-2); display: block; }

/* ============================================================
   wrapper_seventh — CTA Dark
   ============================================================ */
.cta-wrap { max-width: 720px; margin: 0 auto; text-align: center; }
.ornament-fillet { display: flex; justify-content: center; margin-bottom: var(--sp-3); }
.cta-h2 {
  font-family: var(--ff-serif-en);
  font-size: clamp(36px, 6vw, 72px);
  margin: var(--sp-3) 0 var(--sp-3);
  font-weight: 400;
  font-style: italic;
  color: var(--c-paper);
  line-height: 1.05;
}
.cta-h2 em { font-style: italic; color: var(--c-gold-lt); }
.cta-lede {
  font-family: var(--ff-serif-jp);
  font-size: calc(0.9rem * 1.5);
  color: #C9C2B0;
  max-width: 540px;
  margin: 0 auto var(--sp-5);
  line-height: 1.9;
}
.cta-colophon {
  margin-top: var(--sp-5);
  border-top: 1px solid #5A5040;
  padding-top: var(--sp-3);
}

/* ============================================================
   wrapper_footer — シリーズ／ブランド誘導ボタン
   ============================================================ */
.wrapper_footer {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--ff-serif-en), var(--ff-serif-jp);
}
.flexColumn_footer {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 24px;
}
.wrapper_footer .ColumnBox_footer__01 {
  width: 100%;
  margin: 0 auto;
  padding: 0 15%;
  box-sizing: border-box;
}
.wrapper_footer .ColumnBox_footer__01 .contents_button {
  width: 100%;
  margin: 0 auto;
  padding: 0 !important;
  box-sizing: border-box;
}
.wrapper_footer .ColumnBox_footer__01 .contents_button > a {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
}
.wrapper_footer .ColumnBox_footer__01 p.seriesBtn {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 14px 0;
  font-family: var(--ff-sans);
  font-size: calc(0.9rem * 1.5);
  letter-spacing: 0.18em;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--c-ink);
  color: var(--c-ink);
  background: transparent;
  box-sizing: border-box;
  text-transform: uppercase;
  transition: 0.2s;
}
.wrapper_footer .ColumnBox_footer__01 p.seriesBtn:hover {
  opacity: 1 !important;
  color: var(--c-paper) !important;
  background: var(--c-ink);
}

/* commonBrandBtn 5プロパティ完全上書き (lp-baseline A-3 厳格) */
a.commonBrandBtn,
a.commonBrandBtn:hover {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.wrapper_footer .ColumnBox_footer__01 a.commonBrandBtn,
.wrapper_footer .ColumnBox_footer__01 a.commonBrandBtn:hover {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: inherit !important;
  opacity: 1 !important;
  box-sizing: border-box;
}
.wrapper_footer .ColumnBox_footer__01 a.commonBrandBtn > div {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
.wrapper_footer .ColumnBox_footer__01 a.commonBrandBtn > div > p {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 0;
  font-family: var(--ff-sans);
  font-size: calc(0.9rem * 1.5);
  letter-spacing: 0.18em;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  background: transparent;
  box-sizing: border-box;
  text-transform: uppercase;
  transition: 0.2s;
}
.wrapper_footer .ColumnBox_footer__01 a.commonBrandBtn:hover > div > p {
  color: var(--c-paper);
  background: var(--c-accent);
}

/* contents_button generic */
.contents_button {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.contents_button + .contents_button { margin-top: 2%; }
.contents_button > a {
  display: block;
  text-decoration: none;
}
.subsection_third .contents_button .seriesBtn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  font-family: var(--ff-sans);
  font-size: calc(0.9rem * 1.5);
  letter-spacing: 0.18em;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--c-ink);
  color: var(--c-ink);
  background: transparent;
  box-sizing: border-box;
  text-transform: uppercase;
  transition: 0.2s;
}
.subsection_third .contents_button .seriesBtn:hover {
  opacity: 1 !important;
  color: var(--c-paper) !important;
  background: var(--c-ink);
}

/* ============================================================
   Other utilities (FS互換維持)
   ============================================================ */
.white_bk { background: rgba(255,255,255,.8); }
.gray_bk  { background: rgba(238,238,238,1); }
.beige_bk { background: rgba(240,238,228,.8); }
.goldtext { color: var(--c-gold); }
.whiteTxt { color: #fff !important; }
.space    { margin: 5% 0; }
.pc_display {display: block !important;}
.sp_display {display: none !important;}
.br_pc {display: block !important;}
.br_sp {display: none !important;}
.pc_img {display: block !important;}
.sp_img {display: none !important;}


/* ============================================================
   Tablet (max-width: 1100px)
   ============================================================ */
@media screen and (max-width: 1100px) {
  .wrapper_top,
  .wrapper_first,
  .wrapper_second,
  .wrapper_third,
  .wrapper_fourth,
  .wrapper_fifth,
  .wrapper_sixth,
  .wrapper_seventh { padding: 0 4%; }

  .hero-grid { gap: var(--sp-4); }
  .hero-display { font-size: clamp(48px, 8vw, 96px); }
  .intro-grid { grid-template-columns: 140px 1fr 160px; gap: var(--sp-4); }
  .hands-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}

/* ============================================================
   Rakuten / narrow tablet (max-width: 850px)
   ============================================================ */
@media screen and (max-width: 850px) {
  .wrapper_top,
  .wrapper_first,
  .wrapper_second,
  .wrapper_third,
  .wrapper_fourth,
  .wrapper_fifth,
  .wrapper_sixth,
  .wrapper_seventh { padding: 0 4%; }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .intro-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .intro-side-right { border-left: none; padding-left: 0; border-top: 1px solid var(--c-line); padding-top: var(--sp-3); }
  .voice-columns { column-count: 1; }
}

/* ============================================================
   SP (max-width: 639px)
   ============================================================ */
@media screen and (max-width: 639px) {
  .wrapper_top,
  .wrapper_first,
  .wrapper_second,
  .wrapper_third,
  .wrapper_fourth,
  .wrapper_fifth,
  .wrapper_sixth,
  .wrapper_seventh { padding: 0 5%; }

  .wrap_top    { padding: var(--sp-2) 0 var(--sp-4); }
  .wrap_first  { padding: var(--sp-5) 0 var(--sp-5); }
  .wrap_second { padding: var(--sp-3) 0 var(--sp-5); }
  .wrap_third  { padding: var(--sp-5) 0; }
  .wrap_fourth { padding: var(--sp-5) 0; }
  .wrap_fifth  { padding: var(--sp-5) 0; }
  .wrap_sixth  { padding: var(--sp-5) 0; }
  .wrap_seventh{ padding: var(--sp-5) 0; }

  .journal-masthead { padding: var(--sp-2) 0; }
  .masthead-no { font-size: calc(0.9rem * 1.5); }
  .mono-muted { font-size: calc(0.9rem * 1.5); }

  .hero-display { font-size: clamp(40px, 11vw, 56px); }
  .hero-meta { flex-wrap: wrap; gap: var(--sp-2); }
  .title-jp { font-size: calc(0.9rem * 1.5); }

  .journal-contents {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 12px 0;
  }
  .contents-item:nth-child(n+5) { display: none; }
  .contents-label { font-size: calc(0.9rem * 1.5); }

  .essay-h2 { font-size: calc(1.1667rem * 1.5); }
  .essay-lede { font-size: calc(0.9rem * 1.5); line-height: 1.95; }
  .essay-body { font-size: calc(0.9rem * 1.5); line-height: 1.9; }
  .dropcap::first-letter { font-size: 4.5em; padding: 6px 10px 0 0; }

  .block-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-4); }
  .block-h2 { font-size: calc(1.1667rem * 1.5); }
  .block-sub { font-size: calc(0.9rem * 1.5); max-width: 100%; }

  .subsection_third { margin: var(--sp-4) 0 0; }
  .subsection_third + .subsection_third { margin-top: var(--sp-5); padding-top: var(--sp-4); }
  .subsection_third .heading_sub { font-size: calc(0.9rem * 1.5); margin-bottom: var(--sp-2); }

  /* 商品画像 SP: max-width 100% (FIX_3) */
  .subsection_third .imgBox_02 figure img.eachPik {
    max-width: 100%;
  }

  .flexBox_01,
  .flexBox_02 {
    flex-direction: column;
    column-gap: 0;
  }
  .textBox_01,
  .imgBox_02 { width: 100%; margin: 0 auto; }
  .imgBox_02 { margin: var(--sp-3) 0 0; }

  p.text_01 { font-size: calc(0.9rem * 1.5); line-height: 1.9; }

  .voice-pull { font-size: calc(0.9167rem * 1.5); line-height: 1.5; margin: var(--sp-2) 0 var(--sp-1); }
  .voice-sub { font-size: calc(0.9rem * 1.5); margin: 0 0 var(--sp-3); }
  .voice-para { font-size: calc(0.9rem * 1.5); line-height: 1.95; }
  .voice-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ornament-laurel { margin-bottom: var(--sp-3); }
  .ornament-laurel svg { width: 60px; height: 40px; }

  .hands-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .hand-roman { font-size: calc(1.6667rem * 1.5); }
  .hand-en { font-size: calc(0.9rem * 1.5); }
  .ornament-acanthus svg { width: 180px; }
  .hands-h2 { font-size: calc(1.0833rem * 1.5); }
  .hands-lede { font-size: calc(0.9rem * 1.5); }

  .cta-h2 { font-size: calc(1.3333rem * 1.5); }
  .cta-lede { font-size: calc(0.9rem * 1.5); }
  .ornament-fillet svg { width: 140px; }

  .wrapper_footer { padding: 0; }
  .wrap_footer { padding: var(--sp-4) 0 var(--sp-5); }
  .wrapper_footer .ColumnBox_footer__01 { padding: 0 5%; }
  .flexColumn_footer { gap: 16px; }
  .wrapper_footer .ColumnBox_footer__01 p.seriesBtn,
  .wrapper_footer .ColumnBox_footer__01 a.commonBrandBtn > div > p {
    padding: 14px 0;
    font-size: calc(0.9rem * 1.5);
  }
  .subsection_third .contents_button .seriesBtn { padding: 5% 2%; font-size: calc(0.9rem * 1.5); letter-spacing: 0.14em; }

  /* SP only */
  .pc_display {display: none !important;}
  .sp_display {display: block !important;}
  .br_pc {display: none !important;}
  .br_sp {display: block !important;}
  .pc_img {display: none !important;}
  .sp_img {display: block !important;}
}



/* === FIX_5: footer 連続ボタン gap 統一 (2026-05-12) === */
.flexColumn_footer dd + dd {
  margin-top: 0; /* gap で制御するため重複防止 */
}
/* === FIX_5 END === */



/* ============================================================
   2026-05-12 v2 PC レイアウト崩れ修正 (Chrome 100% / 1280-1920px)
   FIX_1: flexBox 横並び確実化（PC幅で wrap させない）
   FIX_2: block-head 縦並び化（h2 の下に block-sub）
   FIX_3: intro-grid を text左/image右 の2カラム化
   FIX_4: wrapper_second vase-feature 装飾画像（2026-05-12 削除済）
   ============================================================ */

/* --- FIX_1: flexBox PC 横並び確実化 --- */
/* 既存 PC media は 65+32+4=101% で overflow→wrap していた。60+36+4=100% に修正し、flex-wrap も無効化 */
@media screen and (min-width: 1101px) {
  .subsection_third .flexBox_01,
  .subsection_third .flexBox_02 {
    flex-wrap: nowrap;
    align-items: center;
  }
  .subsection_third .flexBox_01 > .imgBox_02,
  .subsection_third .flexBox_02 > .imgBox_02 {
    width: 60%;
    flex: 0 0 60%;
  }
  .subsection_third .flexBox_01 > .textBox_01,
  .subsection_third .flexBox_02 > .textBox_01 {
    width: 36%;
    flex: 0 0 36%;
  }
}
@media screen and (min-width: 640px) and (max-width: 1100px) {
  .subsection_third .flexBox_01,
  .subsection_third .flexBox_02 {
    flex-wrap: nowrap;
    align-items: center;
  }
  .subsection_third .flexBox_01 > .imgBox_02,
  .subsection_third .flexBox_02 > .imgBox_02 {
    width: 56%;
    flex: 0 0 56%;
  }
  .subsection_third .flexBox_01 > .textBox_01,
  .subsection_third .flexBox_02 > .textBox_01 {
    width: 40%;
    flex: 0 0 40%;
  }
}

/* --- FIX_2: block-head 縦並び化（PC でも縦） --- */
.wrapper_second .block-head,
.wrapper_fourth .block-head,
.wrapper_sixth .block-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--sp-2);
  flex-wrap: nowrap;
}
.wrapper_second .block-head .block-sub,
.wrapper_fourth .block-head .block-sub,
.wrapper_sixth .block-head .block-sub {
  max-width: 720px;
  margin: 0;
}

/* --- FIX_3: intro-grid 2カラム化 (text左/image右) --- */
.wrapper_first .intro-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-5);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}
.wrapper_first .intro-main {
  text-align: left;
}
.wrapper_first .intro-figure {
  margin: 0;
  width: 100%;
}
.wrapper_first .intro-figure img.eachPik {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- FIX_4: wrapper_second vase-feature 装飾画像（2026-05-12 削除：事実誤認の絵付け表現とともに装飾画像も除去） --- */
/* .vase-feature ルール群を削除 */

/* --- Tablet (max-width: 1100px) 調整 --- */
@media screen and (max-width: 1100px) {
  .wrapper_first .intro-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }
}

/* --- SP (max-width: 639px) 縦積み --- */
@media screen and (max-width: 639px) {
  .wrapper_first .intro-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .wrapper_first .intro-figure img.eachPik {
    aspect-ratio: 4 / 3;
  }
  /* block-head は既存 SP CSS で column 設定済（ALL wrappers）→ そのまま継承 */
}
/* === 2026-05-12 v2 PC レイアウト崩れ修正 END === */

/* === A-3-CB02 fix 2026-05-08 BEGIN === */
.flexColumn_footer {
  gap: 20px;
}
.ColumnBox_footer__02 {
  width: 100%;
  margin: 0 auto;
  padding: 0 15%;
}
/* A-36: 画像-ボタン間隔（詰まり防止 2026-05-09） */
figure + .contents_button,
.imgBlock_01 + .contents_button,
.imgBox_02 + .contents_button,
.contents_explain + .contents_button {
  margin-top: 5%;
}
/* A-38: ボタンクリック領域=表示領域（contents_button の padding を a 側に移譲 2026-05-09） */
.contents_button {
  padding: 0 !important;
}
.contents_button > a {
  display: block;
  width: 100%;
  padding: 2.5% 5%;
  box-sizing: border-box;
  text-decoration: none;
}
@media screen and (max-width: 639px) {
  .flexColumn_footer {
    gap: 16px;
  }
  .ColumnBox_footer__02 {
    width: 100%;
    margin: 0 auto;
    padding: 0 5%;
  }
  figure + .contents_button,
  .imgBlock_01 + .contents_button,
  .imgBox_02 + .contents_button,
  .contents_explain + .contents_button {
    margin-top: 6%;
  }
  .contents_button > a {
    padding: 4% 5%;
  }
}
/* === A-3-CB02 fix 2026-05-08 END === */