/* iPad Garden アドベントカレンダー2026 募集ページ */

:root {
  color-scheme: light;
  --cream: #f8ecdc;
  --cream-deep: #eee2cd;
  --paper: #fffaf3;
  --ink: #3b2f2a;
  --ink-soft: #66564d;
  --red: #a64b42;
  --red-deep: #8f4139;
  --coral: #e0785e;
  --coral-soft: #fbe6dc;
  --green: #3d6652;
  --gold: #c39331;
  --line: #eadfcd;
  --stitch: #ddcbb0;
  --font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  /* 紙の背景画像（読み込めない場合は --cream の地色だけで表示） */
  --paper-img: url("images/paper-texture-cream-v1-1254.jpg");
  --paper-img-set: image-set(url("images/paper-texture-cream-v1-1254.webp") type("image/webp"), url("images/paper-texture-cream-v1-1254.jpg") type("image/jpeg"));
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--cream);
  background-image: var(--paper-img);
  background-image: var(--paper-img-set);
  background-size: 627px 627px;   /* 原寸1254pxを半分の大きさで並べる（高精細画面でもくっきり） */
  background-repeat: repeat;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.9;
  letter-spacing: .03em;
  overflow-wrap: anywhere;
  line-break: strict;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-underline-offset: .2em; }
a:focus-visible, .form-btn:focus-visible, button:focus-visible {
  outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px;
}

h1, h2, h3 { font-weight: 700; line-height: 1.45; margin: 0; }
p { margin: 0 0 .9em; }
p:last-child { margin-bottom: 0; }
.nb { display: inline-block; }   /* 句・日付のまとまりで改行させる */

/* =====================================================
   表紙
   ・2枚の場面は同じ枠（stage）に重ね、切替で高さを変えない。
   ・スマホ（599px以下）：ロゴとタイトルを絵の空の部分に置き、
     コピーとボタンは絵の左の余白に重ねる。
   ・600px以上：文字ブロック全体を絵の左上の余白に重ねる。
   変数
     --ar   絵の枠の縦横比
     --pos-a / --pos-b  各場面の切り抜き位置
     --fade 絵の上端をぼかす量（紙色となじませる）
   ===================================================== */

.hero {
  --ar: 1.45;
  --pos-a: 100% 50%;
  --pos-b: 34% 50%;
  --fade: 18%;
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  overflow: hidden;
}

.hero__stage {
  position: relative;
  aspect-ratio: var(--ar);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 97%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 97%, transparent 100%);
}
.hero__scene { position: absolute; inset: 0; opacity: 0; }
.hero__scene.is-active { opacity: 1; }
.hero__scene img { width: 100%; height: 100%; object-fit: cover; }
.hero__scene--a img { object-position: var(--pos-a); }
.hero__scene--b img { object-position: var(--pos-b); }

/* JavaScriptで動かすときだけ、切替とごく弱いズームを付ける */
.hero.is-animated .hero__scene { transition: opacity 1.6s ease-in-out; }
.hero.is-animated .hero__scene img { transform: scale(1); transform-origin: 70% 60%; transition: transform 9s ease-out; }
.hero.is-animated .hero__scene.is-active img { transform: scale(1.02); }

/* 小さな光（3点だけ） */
.glint {
  position: absolute;
  width: 11px;
  height: 11px;
  background: var(--gold);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: .5;
  pointer-events: none;
}
.glint--1 { left: 47%; top: 30%; }
.glint--2 { left: 62%; top: 16%; width: 8px; height: 8px; }
.glint--3 { left: 4%;  top: 74%; width: 8px; height: 8px; }
.hero.is-animated .glint { animation: twinkle 4.5s ease-in-out infinite; }
.hero.is-animated .glint--2 { animation-delay: 1.5s; }
.hero.is-animated .glint--3 { animation-delay: 3s; }
@keyframes twinkle { 0%, 100% { opacity: .2; } 50% { opacity: .75; } }

/* 文字 */
.hero__copy { position: relative; z-index: 2; pointer-events: none; }
.hero__copy a { pointer-events: auto; }
.hero__title, .hero__lead { text-shadow: 0 0 12px rgba(248, 241, 230, .95), 0 0 3px rgba(248, 241, 230, .9); }

.hero__logo { margin: 0 0 .55em; }
.hero__logo img { width: auto; height: 34px; }
.hero__title { color: var(--red); line-height: 1.25; }
.hero__name {
  display: block;
  font-size: clamp(24px, 8vw, 32px);
  letter-spacing: .04em;
}
.hero__year {
  display: block;
  margin-top: .1em;
  color: var(--green);
  font-size: clamp(16px, 5vw, 20px);
  letter-spacing: .14em;
}
.hero__lead {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.65;
}
.hero__cta {
  display: inline-block;
  margin-top: 12px;
  padding: .5em 1.15em;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.6;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--red-deep);
  transition: transform .15s, box-shadow .15s;
}
.hero__cta:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--red-deep); }

/* スマホ：見出しを上、コピーとボタンを絵の左の余白へ */
@media (max-width: 599px) {
  .hero { grid-template-rows: auto auto; }
  .hero__copy { display: contents; }
  .hero__head {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    z-index: 2;
    padding: 20px 18px 0;
  }
  .hero__stage { grid-row: 2; grid-column: 1; margin-top: -26px; }
  .hero__sub {
    grid-row: 2;
    grid-column: 1;
    align-self: start;
    position: relative;
    z-index: 2;
    width: 47%;
    padding: 12px 0 0 18px;
    pointer-events: none;
  }
}
@media (max-width: 360px) {
  .hero__cta { font-size: 13px; padding: .5em .95em; }
  .hero__sub { width: 49%; }
}

/* 600px以上：文字ブロックごと絵の左上に重ねる */
@media (min-width: 600px) {
  .hero {
    --ar: 1.5;
    --pos-a: 100% 50%;
    --pos-b: 38% 50%;
    --fade: 10%;
    --col: 62%;
    --subr: .71;   /* コピー欄の幅（文字ブロックに対する割合） */
    --top: clamp(24px, 4.4vw, 64px);
  }
  .hero > .hero__stage, .hero > .hero__copy { grid-area: 1 / 1; }
  .hero__stage { align-self: end; }
  .hero__copy {
    align-self: start;
    width: var(--col);
    padding: var(--top) 0 0 clamp(24px, 5.5vw, 88px);
  }
  .hero__sub { width: calc(var(--subr) * 100%); margin-top: 1.1em; }
  .hero__logo img { height: clamp(40px, 5.4vw, 52px); }
  .hero__name { font-size: clamp(30px, 4.7vw, 44px); white-space: nowrap; }
  .hero__year { font-size: clamp(19px, 2.7vw, 26px); }
  .hero__lead { font-size: clamp(15px, 1.9vw, 17px); }
  .hero__cta { margin-top: 1em; font-size: 14.5px; padding: .55em 1.4em; }
}
/* パソコン幅：画像をそのままの比率で表示 */
@media (min-width: 1000px) {
  .hero { --ar: 1.7768; --pos-a: 50% 50%; --pos-b: 50% 50%; --fade: 6%; --col: 54%; --subr: .74; }
  .hero__logo img { height: clamp(52px, 4.6vw, 68px); }
  .hero__name { font-size: clamp(40px, 3.9vw, 60px); }
  .hero__year { font-size: clamp(24px, 2.2vw, 34px); }
  .hero__lead { font-size: clamp(17px, 1.45vw, 21px); }
  .hero__cta { font-size: 15.5px; }
}

/* 一時停止・再開 */
.hero__toggle {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 250, 243, .92);
  color: var(--ink);
  font: 500 12px/1.4 var(--font);
  cursor: pointer;
}
.hero__toggle[hidden] { display: none; }
.hero__toggle-icon {
  flex: none;
  width: 9px;
  height: 10px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.hero__toggle.is-paused .hero__toggle-icon {
  width: 0;
  height: 0;
  border-right: 0;
  border-left: 9px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
@media (min-width: 600px) {
  .hero__toggle { right: 14px; bottom: 14px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__scene, .hero__scene img, .glint { transition: none !important; animation: none !important; transform: none !important; }
}

/* =====================================================
   導入と重要情報
   ===================================================== */

.opening { padding: clamp(24px, 4.5vw, 52px) 16px clamp(24px, 4vw, 40px); }
.opening__inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.opening__intro { font-size: clamp(16px, 1.7vw, 18px); line-height: 2; }
.keyinfo {
  position: relative;
  padding: 22px clamp(20px, 3vw, 30px);
  background: rgba(255, 251, 245, .82);
  border-radius: 6px;
  box-shadow: 0 10px 24px -18px rgba(91, 58, 31, .5);
}
.keyinfo::before {   /* 縫い目のステッチ */
  content: "";
  position: absolute;
  inset: 7px;
  border: 1.5px dashed var(--stitch);
  border-radius: 3px;
  pointer-events: none;
}
.keyinfo__block + .keyinfo__block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.keyinfo__head {
  display: inline-block;
  margin: 0 0 .5em;
  padding: .05em 1.3em .05em .8em;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.8;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
}
.keyinfo__block p { font-size: 15.5px; line-height: 1.8; }
.deadlines { margin: 0; }
.deadlines div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
  padding: 6px 0;
}
.deadlines div + div { border-top: 1px dashed var(--line); }
.deadlines dt { font-size: 14.5px; font-weight: 500; }
.deadlines dd { margin: 0 0 0 auto; color: var(--red); font-weight: 700; font-size: 17px; white-space: nowrap; }
.deadlines small { font-size: .78em; }
.keyinfo__more { margin: 8px 0 0; text-align: right; font-size: 14px; }
.keyinfo__more a::after { content: " →"; }

@media (max-width: 799px) {
  .opening__inner { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .deadlines div { display: block; padding: 7px 0; }
  .deadlines dd { margin: 0; line-height: 1.5; }
}

/* =====================================================
   目次
   ・900px以上：1行で上端に固定
   ・それ未満：折り返して全項目を表示（固定しない）
   ===================================================== */

.toc {
  background: rgba(248, 236, 220, .82);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.toc ul {
  list-style: none;
  margin: 0 auto;
  padding: 8px 12px;
  max-width: 1040px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 4px;
}
.toc a {
  display: block;
  padding: 6px 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.toc a:hover { color: var(--red); border-bottom-color: var(--coral); }
@media (min-width: 900px) {
  .toc {
    position: sticky;
    top: 0;
    z-index: 10;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
  }
  .toc ul { flex-wrap: nowrap; padding: 4px 12px; }
  .toc a { padding: 8px 14px; }
}
@media (max-width: 899px) {
  .toc ul { padding: 10px 10px; gap: 2px 2px; }
  .toc a { padding: 5px 9px; font-size: 14px; }
}

/* =====================================================
   本文（紙の背景の上に、線と余白で区切る）
   ===================================================== */

.sheet {
  max-width: 880px;
  margin: clamp(8px, 2vw, 24px) auto 0;
  padding: 0 clamp(18px, 5vw, 48px);
}

.sec { padding: clamp(30px, 5vw, 48px) 0; scroll-margin-top: 64px; }
.sec + .sec { border-top: 1.5px dashed var(--stitch); }
@media (max-width: 899px) { .sec { scroll-margin-top: 12px; } }

.sec__title {
  display: flex;
  align-items: center;
  gap: .5em;
  margin-bottom: .9em;
  color: var(--red);
  font-size: clamp(20px, 2.6vw, 25px);
  letter-spacing: .06em;
}
.sec__title::before {   /* 小さな星 */
  content: "";
  flex: none;
  width: .6em;
  height: .6em;
  background: var(--gold);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.sec h3 { color: var(--green); font-size: 17px; margin-bottom: .4em; }

/* 箇条書き */
.dots { list-style: none; margin: 0; padding: 0; }
.dots li { position: relative; padding-left: 1.3em; }
.dots li::before {
  content: "";
  position: absolute;
  left: .2em;
  top: .8em;
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: var(--coral);
}
.dots--spaced li + li { margin-top: .65em; }

/* テーマ：左の太線だけで示す */
.themes { list-style: none; margin: 1.1em 0 0; padding: 0; display: grid; gap: 16px; }
.themes li { padding: 2px 0 2px 16px; border-left: 4px solid var(--green); }
.themes__title { display: block; font-weight: 700; font-size: 17px; line-height: 1.6; }
.themes__note { display: block; color: var(--ink-soft); font-size: 15.5px; margin-top: .2em; }

/* 作品形式：表の行で */
.formats { margin: 1em 0 1.2em; border-top: 1px solid var(--line); }
.formats div {
  display: grid;
  grid-template-columns: 11em 1fr;
  gap: 2px 16px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
}
.formats dt { font-weight: 700; color: var(--red); }
.formats dd { margin: 0; }
@media (max-width: 520px) {
  .formats div { grid-template-columns: 1fr; gap: 0; padding: 9px 2px; }
}

.note-strong {
  padding: 12px 16px;
  border-radius: 6px;
  background: var(--coral-soft);
  font-weight: 700;
}

/* ガイドライン：2列、間に細い線 */
.guide-cols { display: grid; grid-template-columns: 1fr 1fr; margin: 1.3em 0 1.5em; }
.guide:first-child { padding-right: clamp(16px, 3vw, 32px); }
.guide + .guide { padding-left: clamp(16px, 3vw, 32px); border-left: 1px solid var(--line); }
@media (max-width: 680px) {
  .guide-cols { grid-template-columns: 1fr; gap: 18px; }
  .guide:first-child { padding-right: 0; }
  .guide + .guide { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
.aside-note {
  margin-bottom: 1.2em;
  padding: 14px 18px;
  border-radius: 6px;
  background: var(--cream-deep);
  background: rgba(238, 226, 205, .55);
}

/* 圧縮・画質についての了承事項（小さめでも濃く、区切って見せる） */
.consent {
  position: relative;
  margin: 0;
  padding: 12px 16px 12px 18px;
  border-left: 3px solid var(--coral);
  border-radius: 0 6px 6px 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.9;
}

/* スケジュール */
.timeline { list-style: none; margin: 0 0 1.3em; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 8px;
  border-left: 2px dashed var(--stitch);
}
.timeline__row {
  position: relative;
  display: grid;
  grid-template-columns: 8em 1fr;
  align-items: baseline;
  gap: 2px 16px;
  padding: 11px 0 11px 34px;
}
.timeline__row + .timeline__row { border-top: 1px solid var(--line); }
.timeline__row::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--red);
}
.timeline__row--open::before { background: var(--gold); border-color: var(--gold); }
.timeline__date { font-weight: 700; font-size: 18px; color: var(--red); white-space: nowrap; }
.timeline__row--open .timeline__date { color: var(--green); }
.timeline__date small { font-size: .78em; margin-left: .1em; }
.timeline__label { font-weight: 500; }
@media (max-width: 520px) {
  .timeline__row { grid-template-columns: 1fr; padding: 9px 0 9px 32px; }
  .timeline__row::before { top: 1.45em; }
  .timeline__date { font-size: 17px; line-height: 1.5; }
}

/* 前半・後半の担当日：ラベルと期間をそろえる */
.halves {
  margin: 0;
  padding: 6px 16px;
  border-radius: 6px;
  background: rgba(238, 226, 205, .55);
}
.halves__row {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  align-items: baseline;
  gap: 2px 12px;
  padding: 8px 0;
}
.halves__row + .halves__row { border-top: 1px dashed var(--stitch); }
.halves dt { font-weight: 700; white-space: nowrap; }
.halves dd { margin: 0; }
.halves__sep { margin: 0 .25em; }
.halves__mark {
  display: inline-block;
  width: .7em;
  height: .7em;
  margin-right: .45em;
  border-radius: 2px;
  vertical-align: .02em;
}
.halves__mark--first { background: var(--coral); }
.halves__mark--second { background: var(--green); }
@media (max-width: 420px) {
  .halves__row { grid-template-columns: 1fr; gap: 0; }
}

/* 参加の流れ：番号と縦の縫い目でつなぐ */
.steps { list-style: none; margin: 0; padding: 0; }
.step { position: relative; padding: 0 0 28px 52px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 42px;
  bottom: 6px;
  border-left: 2px dashed var(--stitch);
}
.step:last-child::before { display: none; }
.sec .step__title { color: var(--ink); font-size: 17.5px; line-height: 34px; margin-bottom: .3em; }
.step__num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 16px;
  line-height: 1;
}
@media (max-width: 520px) {
  .step { padding-left: 44px; }
  .step::before { left: 14px; top: 38px; }
  .step__num { width: 30px; height: 30px; font-size: 14px; }
  .sec .step__title { line-height: 30px; }
}

/* フォームボタン（URL未設定の間は「準備中」） */
.form-slot { margin-top: 1em; }
.form-btn {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  width: 100%;
  max-width: 400px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  background: var(--cream-deep);
  color: var(--ink-soft);
  border: 2px dashed #cdb99a;
  cursor: not-allowed;
}
.form-btn__label { min-width: 0; }
.form-btn__state {
  flex: none;
  margin-left: auto;
  padding: .1em .8em;
  border-radius: 999px;
  font-size: 13px;
  background: var(--paper);
  color: var(--ink-soft);
}
.form-btn.is-ready {
  background: var(--red);
  color: #fff;
  border: 2px solid var(--red);
  box-shadow: 0 4px 0 var(--red-deep);
  cursor: pointer;
}
.form-btn.is-ready .form-btn__state { background: #fff; color: var(--red); }
.form-btn.is-ready .form-btn__state::after { content: " ↗"; }
.form-btn.is-ready:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--red-deep); }

.closing {
  max-width: 880px;
  margin: clamp(28px, 5vw, 56px) auto 0;
  padding: 0 16px;
  text-align: center;
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 22px);
  color: var(--red);
  letter-spacing: .06em;
}

.footer {
  margin-top: clamp(32px, 5vw, 56px);
  padding: 22px 16px 34px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  border-top: 1.5px dashed var(--stitch);
}
.footer p { margin: 0; }

/* スマホ：本文16px前後 */
@media (max-width: 520px) {
  body { font-size: 16px; line-height: 1.85; letter-spacing: .02em; }
  .form-btn { padding: 12px 14px; }
}

/* =====================================================
   第3次修正
   ===================================================== */

/* スマホ・タブレットでは目次を出さない（本文は通常のスクロールで読む） */
@media (max-width: 899px) {
  .toc { display: none; }
}

/* スマホ：「参加の流れを見る」は絵の下の独立した行へ（サンタに重ねない） */
@media (max-width: 599px) {
  .hero { grid-template-rows: auto auto auto; }
  .hero__sub { display: contents; }
  .hero__lead {
    grid-row: 2;
    grid-column: 1;
    align-self: start;
    position: relative;
    z-index: 2;
    width: 47%;
    padding: 12px 0 0 18px;
  }
  .hero__cta {
    grid-row: 3;
    grid-column: 1;
    justify-self: start;
    position: relative;
    z-index: 2;
    margin: 10px 0 2px 18px;
  }
}
@media (max-width: 360px) {
  .hero__lead { width: 49%; }
}

/* 余白に添える挿絵（飾り・1点だけ表示） */
.vignette { display: block; pointer-events: none; }
.vignette img { width: 100%; height: auto; }
.vignette--intro {
  width: clamp(140px, 13.5vw, 170px);
  margin: 14px 0 0 auto;
  opacity: .95;
}
.vignette--closing { display: none; }
@media (max-width: 799px) {
  .vignette--intro { display: none; }
  .vignette--closing {
    display: block;
    width: 120px;
    margin: 28px auto -8px;
  }
}

/* 一時停止ボタンは絵の枠の右下（ぼかしの手前）に置く */
.hero__toggle { bottom: 6%; }
@media (min-width: 600px) { .hero__toggle { bottom: 5%; } }

/* =====================================================
   本文の挿絵（ツリー・キラキラ・プレゼント・家）
   ・文字の背後には敷かない。見出しの横か、本文の外の余白にだけ置く。
   ・1240px以上：本文の外側（左右の余白）に置く
   ・それ未満：見出しの右に小さく並べる
   ===================================================== */

.sec { position: relative; }
.sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: .9em;
}
.sec__head .sec__title { margin-bottom: 0; }
.decor { display: block; flex: none; pointer-events: none; }
.decor img { display: block; width: 100%; height: auto; }

/* スマホ */
.decor--tree  { width: 58px; }
.decor--gifts { width: 92px; }
.decor--house { width: 66px; }
.decor--divider {
  position: absolute;
  top: -19px;
  left: 50%;
  width: 34px;
  transform: translateX(-50%);
}

/* 中間幅 */
@media (min-width: 600px) {
  .decor--tree  { width: 72px; }
  .decor--gifts { width: 118px; }
  .decor--house { width: 84px; }
  .decor--divider { width: 42px; top: -24px; }
}

/* 本文の外に余白がある幅：左右の余白へ */
@media (min-width: 1240px) {
  .sec__head { display: block; }
  .decor--tree, .decor--gifts, .decor--house { position: absolute; top: 28px; }
  .decor--right { left: calc(100% + 64px); }
  .decor--left  { right: calc(100% + 64px); }
  .decor--tree  { width: 100px; }
  .decor--gifts { width: 140px; top: 40px; }
  .decor--house { width: 110px; }
}

/* =====================================================
   第4次修正：やわらかい見た目・挿絵の位置
   ===================================================== */

/* 本文に明るい帯を重ねない（紙背景を上から下まで一続きに） */
.sheet { background: none; }

/* スマホ：「参加の流れを見る」は絵の下で中央に */
@media (max-width: 599px) {
  .hero__cta { justify-self: center; margin: 12px auto 2px; }
}

/* 硬い下影をやめ、薄く広がる短い影に */
.hero__cta,
.form-btn.is-ready {
  box-shadow: 0 4px 12px -5px rgba(143, 65, 57, .45);
}
.hero__cta:hover,
.form-btn.is-ready:hover {
  transform: translateY(1px);
  box-shadow: 0 2px 8px -4px rgba(143, 65, 57, .45);
}
.hero__lead { font-weight: 500; }

/* 線を細く、紙になじむ色に */
.sec + .sec { border-top: 1px dashed var(--stitch); }
.footer { border-top: 1px dashed var(--stitch); }
.keyinfo::before { border-width: 1px; }
.themes li { border-left: 2px solid #9cb7a6; padding-left: 14px; }
.timeline::before, .step::before { border-left-width: 1.5px; }
.timeline__row::before { border-width: 2px; }
.deadlines div + div { border-top-style: dotted; }

/* 緑のベタ塗りラベルを落ち着かせる */
.keyinfo__head {
  background: rgba(61, 102, 82, .13);
  color: #2f5443;
}

/* 太字の連続を減らす（重要な文字の濃さは保つ） */
.formats dt { font-weight: 500; }
.halves dt { font-weight: 500; }
.note-strong { font-weight: 500; }
.deadlines dd { font-weight: 700; }

/* 挿絵：PCでも本文の幅の中で、見出しの右に添える */
@media (min-width: 1240px) {
  .sec__head { display: flex; }
  .decor--tree, .decor--gifts, .decor--house, .decor--sparkles { position: static; }
}
@media (min-width: 1000px) {
  .decor--tree  { width: 86px; }
  .decor--house { width: 88px; }
  .decor--gifts { width: 118px; }
}

/* キラキラ：線の上ではなく「お願い」の見出しの右に1点 */
.decor--sparkles { position: static; transform: none; width: 46px; }
@media (min-width: 600px) { .decor--sparkles { width: 60px; } }
.sec--sparkle .sec__title::before { display: none; }   /* 見出しの小さな星と重複させない */

/* 挿絵を紙になじませる（ロゴには適用しない） */
.decor img { filter: saturate(.9); }
.decor--sparkles img { filter: saturate(.88); opacity: .82; }
@media (max-width: 360px) {
  .decor--sparkles { width: 36px; }   /* 「参加にあたってのお願い」を1行に保つ */
}

/* =====================================================
   第5次修正
   ===================================================== */

/* 本文の背後の薄いアイボリー面（背景専用の層）。
   上下は約64px、左右は幅の8%で周りの紙へなじませ、硬い境目を出さない。 */
.sheet { position: relative; isolation: isolate; }
.sheet::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -64px 0;
  pointer-events: none;
  background: rgba(255, 252, 247, .36);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%),
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%),
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-composite: intersect;
}
@media (max-width: 959px) {
  .sheet::before {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%),
      linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image:
      linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%),
      linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
}

/* 囲みの色を背景と見分けやすく（枠線は足さない） */
.note-strong { background: #f8ddd0; }
.consent { background: rgba(255, 253, 249, .92); box-shadow: 0 1px 6px -3px rgba(120, 80, 50, .25); }
.aside-note, .halves { background: rgba(236, 222, 198, .6); }

/* 小物の出現：画面に入ったとき一度だけ、ふわっと現れて小さく揺れて止まる。
   JavaScriptが準備できたときだけ .decor-wait（待機）を付ける。付かなければ最初から表示。 */
.decor, .vignette { transform-origin: 50% 100%; }
.decor--sparkles { transform-origin: 50% 50%; }
.decor-wait { opacity: 0; transform: translateY(8px); }
.decor-play { animation: decor-in 2.4s cubic-bezier(.3, .7, .4, 1) both; }
.decor--house.decor-play,
.decor--sparkles.decor-play,
.vignette.decor-play { animation-name: decor-in-soft; }
@keyframes decor-in {
  0%   { opacity: 0; transform: translateY(8px) rotate(0); }
  30%  { transform: translateY(0) rotate(0); }
  45%  { transform: rotate(1deg); }
  62%  { transform: rotate(-.9deg); }
  78%  { transform: rotate(.5deg); }
  90%  { transform: rotate(-.2deg); }
  100% { transform: none; }
}
@keyframes decor-in-soft {
  0%   { opacity: 0; transform: translateY(8px) rotate(0); }
  30%  { transform: translateY(0) rotate(0); }
  50%  { transform: rotate(.5deg); }
  72%  { transform: rotate(-.4deg); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .decor, .vignette { animation: none !important; transform: none !important; }
  .decor-wait { opacity: 1 !important; }
}