/* 110 えんがわ堂 — K02 雑誌の格子。12列の格子に、大きさのちがう枠を組む。
   色と書体は共通の13変数だけ。区切りの色は .t-red が同じ名前の変数を上書きする */
:root {
  --c-bg: #fff6f4;
  --c-bg-alt: #ffe1e7;
  --c-text: #374151;
  --c-sub: #4b5563;
  --c-line: #3a2226;
  --c-accent: #d63a45;
  --c-accent-text: #b4232c;
  --c-on-accent: #ffffff;
  --c-2: #ffb48f;
  --c-3: #a9dcae;
  --font-ja: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-head: "Yusei Magic", "Zen Kaku Gothic New", sans-serif;
  --font-en: "Grandstander", "Zen Kaku Gothic New", sans-serif;
  --radius: 24px;
  --bold: 3px;
  --shadow: 6px 6px 0 var(--c-line);
  --header-h: 64px;
  --gap: 16px;
}
.t-red { --c-bg: #d63a45; --c-bg-alt: #b4232c; --c-text: #ffffff; --c-sub: #ffffff; --c-line: #3a2226; --c-accent: #ffffff; --c-accent-text: #ffffff; --c-on-accent: #b4232c; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-ja); font-size: 16px; line-height: 1.85; overflow-x: hidden; }
figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dd, li { word-break: auto-phrase; overflow-wrap: anywhere; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ===== ヘッダー ===== */
.header { position: sticky; top: 0; z-index: 30; background: var(--c-bg); border-bottom: var(--bold) solid var(--c-line); }
.header__inner { height: var(--header-h); padding: 0 16px; display: flex; align-items: center; gap: 10px; position: relative; max-width: 1240px; margin: 0 auto; }
.logo { display: flex; flex-direction: column; text-decoration: none; color: var(--c-text); white-space: nowrap; flex: none; min-height: 44px; justify-content: center; margin-right: auto; }
.logo__ja { font-family: var(--font-head); font-size: 22px; line-height: 1.2; color: var(--c-accent-text); }
.logo__en { font-family: var(--font-en); font-size: 15px; letter-spacing: .12em; line-height: 1.1; color: var(--c-text); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); border: var(--bold) solid var(--c-line); box-shadow: 0 4px 0 var(--c-line); font-family: var(--font-ja); font-weight: 700; font-size: 16px; line-height: 1.3; text-decoration: none; white-space: nowrap; flex: none; cursor: pointer; }
.btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--c-line); }
.btn--lg { min-height: 56px; padding: 0 28px; }
.btn--ghost { background: var(--c-bg); color: var(--c-accent-text); }
.btn--inv { background: var(--c-bg-alt); color: var(--c-text); }
.header__btn { padding: 0 16px; min-height: 44px; }
.spmenu summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--c-line); }
.spmenu summary::-webkit-details-marker { display: none; }
.spmenu__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spmenu__bar, .spmenu__bar::before, .spmenu__bar::after { display: block; width: 24px; height: 3px; border-radius: 2px; background: currentColor; position: relative; }
.spmenu__bar::before, .spmenu__bar::after { content: ""; position: absolute; left: 0; }
.spmenu__bar::before { top: -8px; } .spmenu__bar::after { top: 8px; }
.spmenu[open] .spmenu__bar { background: transparent; }
.spmenu[open] .spmenu__bar::before { top: 0; transform: rotate(45deg); }
.spmenu[open] .spmenu__bar::after { top: 0; transform: rotate(-45deg); }
.spmenu__nav { position: absolute; right: 12px; top: calc(100% + 8px); width: min(calc(100% - 24px), 340px); background: var(--c-bg); border: var(--bold) solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 20px 12px; display: flex; flex-direction: column; }
.spmenu__nav a { display: flex; align-items: center; min-height: 52px; color: var(--c-text); text-decoration: none; font-weight: 700; border-bottom: 2px dotted var(--c-line); }
.spmenu__nav a:last-child { border-bottom: 0; }

/* ===== 雑誌の格子 ===== */
.mag { position: relative; max-width: 1240px; margin: 0 auto; padding: 20px 16px 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.mag > * { position: relative; z-index: 1; min-width: 0; }
.mag > .clouds { position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; margin-left: -50vw; height: 820px; overflow: hidden; pointer-events: none; }
.cell-group { grid-column: 1 / -1; }

/* D03：ぼかした色の雲（CSSだけ・ゆっくり形を変える。文字は乗せない） */
.cloud { position: absolute; display: block; filter: blur(46px); opacity: .85; border-radius: 52% 48% 60% 40% / 45% 55% 45% 55%; }
.cloud--1 { width: 560px; height: 420px; left: -8%; top: 8%; background: color-mix(in srgb, var(--c-accent) 38%, transparent); }
.cloud--2 { width: 520px; height: 380px; right: -6%; top: 2%; background: var(--c-2); }
.cloud--3 { width: 460px; height: 340px; left: 36%; top: 42%; background: var(--c-3); }
@media (prefers-reduced-motion: no-preference) {
  .cloud--1 { animation: morph1 16s ease-in-out infinite alternate; }
  .cloud--2 { animation: morph2 19s ease-in-out infinite alternate; }
  .cloud--3 { animation: morph1 22s ease-in-out infinite alternate-reverse; }
}
@keyframes morph1 { from { border-radius: 52% 48% 60% 40% / 45% 55% 45% 55%; transform: translate(0, 0) scale(1); } to { border-radius: 40% 60% 42% 58% / 60% 40% 60% 40%; transform: translate(60px, 30px) scale(1.12); } }
@keyframes morph2 { from { border-radius: 60% 40% 48% 52% / 50% 50% 50% 50%; transform: translate(0, 0) scale(1); } to { border-radius: 44% 56% 58% 42% / 40% 60% 40% 60%; transform: translate(-70px, 40px) scale(.94); } }

/* 枠のつくり：太い線と、ずらした影 */
.art, .wish, .step, .info, .peek__stage, .works .work, .craft-photo, .joint-photo, .hero-photo, .contact, .copy, .craft-text { border: var(--bold) solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--c-bg); overflow: hidden; }

.en { font-family: var(--font-en); font-weight: 700; font-size: 15px; letter-spacing: .1em; color: var(--c-accent-text); line-height: 1.4; margin-bottom: 8px; }
.h1, .h2, .step h3, .work h3 { font-family: var(--font-head); font-weight: 400; color: var(--c-text); }
.h1 { font-size: clamp(26px, 7.6vw, 44px); line-height: 1.45; margin-bottom: 14px; }
.h2 { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.4; }

/* --- メインビジュアル --- */
.art { grid-column: 1 / -1; background: color-mix(in srgb, var(--c-2) 28%, var(--c-bg)); display: flex; flex-direction: column; }
.art svg { width: 100%; height: auto; display: block; flex: 1 1 auto; min-height: 0; }
.art__tag { font-family: var(--font-head); font-size: 17px; padding: 8px 16px 14px; text-align: center; color: var(--c-text); }
.a-sky { fill: color-mix(in srgb, var(--c-2) 30%, var(--c-bg)); }
.a-sun { fill: var(--c-2); stroke: var(--c-line); stroke-width: 4; }
.a-rays path { stroke: var(--c-line); stroke-width: 4; stroke-linecap: round; fill: none; }
.a-ground { fill: var(--c-3); stroke: var(--c-line); stroke-width: 4; }
.a-wall { fill: var(--c-bg); stroke: var(--c-line); stroke-width: 4; }
.a-roof { fill: color-mix(in srgb, var(--c-line) 40%, var(--c-2)); stroke: var(--c-line); stroke-width: 4; stroke-linejoin: round; }
.a-line { fill: none; stroke: var(--c-line); stroke-width: 3; stroke-linecap: round; }
.a-door { fill: color-mix(in srgb, var(--c-accent) 30%, var(--c-bg)); stroke: var(--c-line); stroke-width: 4; }
.a-knob { fill: var(--c-line); }
.a-win { fill: color-mix(in srgb, var(--c-2) 45%, var(--c-bg)); stroke: var(--c-line); stroke-width: 4; }
.a-engawa { fill: color-mix(in srgb, var(--c-line) 30%, var(--c-2)); stroke: var(--c-line); stroke-width: 4; }
.a-trunk { stroke: var(--c-line); stroke-width: 12; stroke-linecap: round; fill: none; }
.a-leaf { fill: var(--c-3); stroke: var(--c-line); stroke-width: 4; }
.a-flower circle { fill: var(--c-accent); stroke: var(--c-line); stroke-width: 3; }
.a-center circle { fill: var(--c-2); }
.a-bush circle { fill: var(--c-3); stroke: var(--c-line); stroke-width: 4; }

.copy { grid-column: 1 / -1; padding: 22px 20px 24px; background: var(--c-bg); }
.lead { margin-bottom: 18px; }
.copy__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-photo { grid-column: 1 / -1; position: relative; overflow: visible; }
.hero-photo img { width: 100%; height: 260px; object-fit: cover; border-radius: calc(var(--radius) - var(--bold)); }
.sticker { display: grid; place-items: center; text-align: center; font-family: var(--font-head); line-height: 1.35; color: var(--c-on-accent); background: var(--c-accent); border: var(--bold) solid var(--c-line); box-shadow: 3px 3px 0 var(--c-line); }
.sticker--a { position: absolute; right: -6px; top: -26px; width: 104px; height: 104px; border-radius: 50%; font-size: 17px; transform: rotate(10deg); }
.sticker--b { display: inline-grid; margin-top: 14px; padding: 6px 20px; border-radius: 999px; font-size: 17px; transform: rotate(-4deg); color: var(--c-on-accent); }

/* --- 見出しの枠 --- */
.head { grid-column: 1 / -1; padding: 20px 6px 4px; }
.head__lead { margin-top: 10px; }

/* --- こんな家 --- */
.wish { grid-column: span 1; padding: 18px 16px; font-family: var(--font-head); font-size: 18px; line-height: 1.6; background: var(--c-bg-alt); }
.wish b { display: block; font-weight: 400; font-size: 24px; color: var(--c-accent-text); line-height: 1.3; }
.wish--1 { transform: rotate(-1.5deg); } .wish--2 { transform: rotate(1.2deg); background: color-mix(in srgb, var(--c-2) 40%, var(--c-bg)); } .wish--3 { transform: rotate(1deg); background: color-mix(in srgb, var(--c-3) 45%, var(--c-bg)); } .wish--4 { transform: rotate(-1deg); }

/* --- 家の中をのぞく（B04を1枠に収めた。CSSだけ） --- */
.peek { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.peek__radio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.peek__stage { position: relative; aspect-ratio: 4 / 3; }
.peek__base { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.96); }
.peek__win { position: absolute; right: 6%; bottom: 8%; width: 52%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 5px solid var(--c-bg); box-shadow: 0 0 0 var(--bold) var(--c-line), var(--shadow); background: var(--c-bg); }
.peek__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: circle(0% at 50% 50%); transition: clip-path .5s; }
#peek-1:checked ~ .peek__stage .peek__img--1, #peek-2:checked ~ .peek__stage .peek__img--2, #peek-3:checked ~ .peek__stage .peek__img--3 { clip-path: circle(75% at 50% 50%); }
.peek__note { padding: 20px 18px; background: var(--c-bg-alt); display: flex; flex-direction: column; justify-content: center; }
.peek__labels { display: grid; gap: 10px; margin-top: 14px; }
.peek__label { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: var(--bold) solid var(--c-line); border-radius: 999px; background: var(--c-bg); cursor: pointer; line-height: 1.5; }
.peek__label b { display: block; font-family: var(--font-head); font-weight: 400; font-size: 18px; }
.peek__num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-2); border: 2px solid var(--c-line); font-family: var(--font-en); font-weight: 700; }
#peek-1:checked ~ .peek__note .peek__label--1, #peek-2:checked ~ .peek__note .peek__label--2, #peek-3:checked ~ .peek__note .peek__label--3 { background: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 4px 0 var(--c-line); }
#peek-1:checked ~ .peek__note .peek__label--1 .peek__num, #peek-2:checked ~ .peek__note .peek__label--2 .peek__num, #peek-3:checked ~ .peek__note .peek__label--3 .peek__num { background: var(--c-bg); color: var(--c-text); }
.peek__radio:focus-visible ~ .peek__note .peek__label { outline: 0; }
#peek-1:focus-visible ~ .peek__note .peek__label--1, #peek-2:focus-visible ~ .peek__note .peek__label--2, #peek-3:focus-visible ~ .peek__note .peek__label--3 { outline: 3px solid var(--c-accent-text); outline-offset: 3px; }

/* --- 実例（Swiper） --- */
.works { grid-column: 1 / -1; }
.works .work { box-shadow: none; }
.slider__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; padding: 4px 4px 20px; margin: 0 -4px; }
.slider__track { display: flex; gap: 18px; width: max-content; }
.slider__item { width: 78vw; max-width: 420px; flex: none; scroll-snap-align: start; }
.slider.is-swiper .slider__viewport, .works.is-swiper .slider__viewport { overflow: hidden; scroll-snap-type: none; }
.works.is-swiper .slider__track { gap: 0; width: auto; }
.works.is-swiper .slider__item { width: auto; max-width: none; }
.work { overflow: hidden; box-shadow: var(--shadow); background: var(--c-bg); }
.works .work { box-shadow: var(--shadow); }
.work > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: var(--bold) solid var(--c-line); }
.work__body { padding: 14px 18px 20px; }
.work__tag { display: inline-block; font-size: 15px; font-weight: 700; color: var(--c-accent-text); }
.work h3 { font-size: 22px; line-height: 1.5; margin: 2px 0 4px; }
.work p:last-child { font-size: 15px; line-height: 1.8; color: var(--c-sub); }
.slider__ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.slider__ctrl[hidden] { display: none; }
.slider__arrow { width: 56px; height: 56px; border-radius: 50%; border: var(--bold) solid var(--c-line); background: var(--c-bg); box-shadow: 0 4px 0 var(--c-line); cursor: pointer; position: relative; }
.slider__arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-top: 4px solid var(--c-line); border-right: 4px solid var(--c-line); transform: translate(-65%, -50%) rotate(45deg); }
.slider__prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.slider__arrow:hover { background: var(--c-2); }
.slider__dots, .slider__dots.swiper-pagination-horizontal { position: static; width: auto; transform: none; display: flex; }
.slider__dots .swiper-pagination-bullet { width: 30px; height: 44px; margin: 0 !important; background: transparent; opacity: 1; position: relative; border-radius: 0; }
.slider__dots .swiper-pagination-bullet::before { content: ""; position: absolute; left: 7px; top: 14px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--c-line); background: var(--c-bg); }
.slider__dots .swiper-pagination-bullet-active::before { background: var(--c-accent); }
.slider__pause { min-height: 44px; padding: 0 18px; border-radius: 999px; border: var(--bold) solid var(--c-line); background: var(--c-bg); font-family: inherit; font-size: 15px; font-weight: 700; color: var(--c-text); cursor: pointer; }

/* --- 流れ（大きさのちがう枠） --- */
.step { padding: 18px 18px 22px; background: var(--c-bg); }
.step__img { width: 100%; height: 150px; object-fit: cover; border-radius: calc(var(--radius) - 10px); border: 2px solid var(--c-line); margin-bottom: 14px; }
.step__no { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); border: var(--bold) solid var(--c-line); font-family: var(--font-en); font-weight: 700; font-size: 24px; margin-bottom: 8px; }
.step h3 { font-size: 22px; line-height: 1.4; margin-bottom: 6px; }
.step p { font-size: 16px; line-height: 1.8; }
.step--1 { grid-column: 1 / -1; background: var(--c-bg-alt); }
.step--2, .step--3 { grid-column: 1 / -1; }
.step--2 { background: color-mix(in srgb, var(--c-2) 38%, var(--c-bg)); }
.step--3 { background: color-mix(in srgb, var(--c-3) 42%, var(--c-bg)); }
.step--4 { grid-column: 1 / -1; }
.step--5 { grid-column: 1 / -1; background: var(--c-bg-alt); }

/* --- 職人 --- */
.craft-photo, .joint-photo { grid-column: 1 / -1; overflow: hidden; }
.craft-photo img, .joint-photo img { width: 100%; height: 100%; min-height: 200px; max-height: 260px; object-fit: cover; }
.craft-text { grid-column: 1 / -1; padding: 22px 20px 26px; background: var(--c-bg-alt); }
.craft-text .h2 { margin-bottom: 10px; }

/* --- 相談・会社情報 --- */
.contact { grid-column: 1 / -1; padding: 28px 22px 32px; background: var(--c-bg); color: var(--c-text); }
.contact .h2 { margin-bottom: 10px; }
.contact__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.tel { font-family: var(--font-en); font-weight: 700; font-size: 20px; color: var(--c-text); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.info { grid-column: 1 / -1; padding: 8px 18px; background: var(--c-bg); }
.info div { padding: 12px 0; border-bottom: 2px dotted var(--c-line); }
.info div:last-child { border-bottom: 0; }
.info dt { font-size: 15px; font-weight: 700; color: var(--c-accent-text); }
.info dd { font-size: 16px; }

/* ===== フッター ===== */
.footer { padding: 36px 20px 44px; text-align: center; background: var(--c-bg-alt); border-top: var(--bold) solid var(--c-line); font-size: 15px; line-height: 1.9; }
.footer__logo { font-family: var(--font-head); font-size: 22px; color: var(--c-accent-text); }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 4px; margin: 6px 0; }
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--c-text); font-weight: 700; text-decoration: none; }
.footer__fiction { color: var(--c-sub); }

/* ===== タブレット（768〜） ===== */
@media (min-width: 768px) {
  .header__inner { padding: 0 32px; }
  .mag { padding: 28px 32px 88px; grid-template-columns: repeat(12, minmax(0, 1fr)); --gap: 20px; }
  .art { grid-column: 1 / -1; }
  .art svg { max-height: 440px; }
  .copy { grid-column: 1 / 8; padding: 28px 28px 30px; }
  .hero-photo { grid-column: 8 / -1; }
  .hero-photo img { height: 100%; min-height: 280px; }
  .head--worry { grid-column: 1 / 5; grid-row: span 2; padding-top: 28px; }
  .wish { grid-column: span 4; }
  .peek { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
  .peek__stage { grid-column: 1 / 9; aspect-ratio: auto; min-height: 420px; }
  .peek__note { grid-column: 9 / -1; }
  .head--works { grid-column: 1 / 7; padding-top: 28px; }
  .step--1 { grid-column: 1 / 8; } .step--2 { grid-column: 8 / -1; }
  .step--3 { grid-column: 1 / 5; } .step--4 { grid-column: 5 / 9; } .step--5 { grid-column: 9 / -1; }
  .head--flow { grid-column: 1 / -1; padding-top: 28px; }
  .craft-photo { grid-column: 1 / 7; } .joint-photo { grid-column: 7 / 10; } .craft-text { grid-column: 10 / -1; padding: 20px 18px; }
  .craft-photo img, .joint-photo img { min-height: 360px; max-height: none; }
  .contact { grid-column: 1 / 9; } .info { grid-column: 9 / -1; align-self: stretch; }
  .slider__item { width: 340px; }
}

/* ===== PC（1080〜）：格子を雑誌のように組む ===== */
@media (min-width: 1080px) {
  .mag { padding-top: 40px; --gap: 24px; }
  .art { grid-column: 1 / 8; grid-row: 1 / 3; }
  .art svg { max-height: none; }
  .copy { grid-column: 8 / -1; grid-row: 1; padding: 30px 28px; }
  .hero-photo { grid-column: 8 / -1; grid-row: 2; }
  .hero-photo img { min-height: 0; }
  .sticker--a { left: -42px; right: auto; top: -30px; width: 116px; height: 116px; }
  .h1 { font-size: 40px; }
  .head--worry { grid-column: 1 / 5; padding-top: 36px; }
  .wish { grid-column: span 4; font-size: 20px; min-height: 150px; display: flex; flex-direction: column; justify-content: center; }
  .wish b { font-size: 28px; }
  .peek__stage { grid-column: 1 / 9; }
  .peek__note { grid-column: 9 / -1; padding: 28px 24px; }
  .head--works { grid-column: 1 / 6; }
  .step--1 { grid-column: 1 / 6; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; }
  .step--1 .step__img { width: 100%; height: 150px; object-fit: cover; border-radius: calc(var(--radius) - 10px); border: 2px solid var(--c-line); margin-bottom: 14px; }
.step__no { width: 88px; height: 88px; font-size: 44px; }
  .step--1 h3 { font-size: 30px; }
  .step--2 { grid-column: 6 / 9; } .step--3 { grid-column: 9 / -1; } .step--4 { grid-column: 6 / 10; } .step--5 { grid-column: 10 / -1; }
  .head--flow { grid-column: 1 / -1; }
  .craft-photo { grid-column: 1 / 6; } .joint-photo { grid-column: 6 / 9; } .craft-text { grid-column: 9 / -1; }
  .contact { grid-column: 1 / 9; padding: 44px 40px; } .info { grid-column: 9 / -1; }
  .slider__item { width: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .peek__img { transition: none; }
}