/* ナンダモンぬいぐるみの販促ページ。 */

/* DotGothic16 は本体ではプレイヤーが選ぶ設定フォントのひとつで、未ログインの公開ページには
   適用されない。このページはゲーム画面と同じドット書体で見せたいので、ページ側で読み込む。 */
@font-face {
  font-family: "DotGothic16";
  src: url("/static/fonts/DotGothic16-Regular.ttf") format("truetype");
  font-display: swap;
}

/* 共有ヘッダーはこのページ専用のバーへ置き換える。フッターは書体と配色だけこのページの
   砂地に揃え、ページの最下端だけを濃い茶の帯で締める。 */
body > header { display: none; }
body > footer.bg-light {
  border-top: 0;
  border-bottom: clamp(14px, 2vw, 22px) solid #8b5a2b;
  background-color: #f2e2c4 !important;
  color: #6b4a2f;
  font-family: "DotGothic16", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

body > footer.bg-light small { color: #6b4a2f; }
body > footer.bg-light a { color: #6b4a2f !important; }

.np-page {
  /* 実物の色をそのまま基調にする。クリーム＝本体、茶＝ツノとおなか、グレー＝首巻き。 */
  --np-ink: #3a2f26;
  --np-ink-sub: #63544a;
  --np-ink-weak: #6f6055;
  --np-cream: #fbf3e4;
  --np-cream-light: #fdf8ee;
  --np-paper: #fffdf8;
  --np-brown: #6b4a2f;
  --np-brown-deep: #8b5a2b;
  --np-accent: #cf7622;
  --np-gray: #5f646c;
  --np-line: #e5d4b8;
  --np-line-soft: #efe3ce;
  /* 囲いの線はモックに合わせて薄いオレンジの実線を基本にする。 */
  --np-line-accent: #e8b98a;
  --np-shadow: 0 6px 18px rgba(107, 74, 47, .1);
  /* ページ左端と本文コンテナの差。帯を左端まで伸ばすのに使う。 */
  --np-bleed: max(12px, (100vw - 1120px) / 2);
  color: var(--np-ink);
  background: var(--np-cream-light);
  font-family: "DotGothic16", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: .875rem;
  line-height: 1.5;
}

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

.np-inner {
  width: min(100% - 24px, 760px);
  margin-inline: auto;
}

/* ページ上部のバー */
.np-bar {
  border-bottom: 1px solid var(--np-line);
  background: var(--np-paper);
}

.np-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 2vw, 20px);
  align-items: center;
  width: min(100% - 24px, 880px);
  margin-inline: auto;
  padding: clamp(8px, 1.6vw, 12px) 0;
}

.np-logo {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--np-brown);
  text-decoration: none;
}

.np-logo img {
  width: clamp(30px, 6vw, 40px);
  height: auto;
}

.np-logo__text { display: flex; flex-direction: column; line-height: 1.25; }
.np-logo__text b { font-size: clamp(1rem, 2.8vw, 1.2rem); }
.np-logo__text small { color: var(--np-ink-weak); font-size: clamp(.7rem, 1.8vw, .78rem); letter-spacing: .08em; }

.np-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 2.4vw, 26px);
  margin-inline: auto 0;
}

.np-nav a {
  color: var(--np-ink-sub);
  font-size: clamp(.875rem, 2.2vw, .95rem);
  text-decoration: none;
}

.np-nav a:hover, .np-nav a:focus-visible { color: var(--np-accent); }

.np-bar__cta {
  padding: clamp(7px, 1.4vw, 10px) clamp(14px, 2.6vw, 22px);
  border-radius: 999px;
  background: var(--np-brown-deep);
  box-shadow: var(--np-shadow);
  color: #fffdf8;
  font-size: clamp(.875rem, 2.2vw, .95rem);
  text-decoration: none;
}

.np-bar__cta {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

/* ボタンの肉球はモックに合わせた飾り。白抜きにして地の茶から浮かせる。 */
.np-bar__cta::after {
  width: 1em;
  height: 1em;
  background: #fffdf8;
  content: "";
  mask: url("/static/image/nandamon_plush/paw.webp") center / contain no-repeat;
}

.np-bar__cta:hover, .np-bar__cta:focus-visible { background: var(--np-brown); color: #fffdf8; }

/* ファーストビュー */
.np-hero {
  position: relative;
  padding: clamp(12px, 2vw, 20px) 0 clamp(30px, 4vw, 44px);
  /* 狭い幅では文字が背景の上に乗るので全面を明るく伏せる。 */
  background:
    linear-gradient(180deg, rgba(253, 248, 238, .88) 0%, rgba(253, 248, 238, .78) 60%, rgba(251, 243, 228, .8) 100%),
    url("/static/image/nandamon_plush/hero-scene.webp") center bottom / cover no-repeat;
}

/* 二段組みになる幅からは、文字のある左側だけを伏せて右の背景を見せる。 */
@media (min-width: 780px) {
  .np-hero {
    min-height: clamp(390px, 44vw, 430px);
    background: linear-gradient(180deg, #fdf8ee 0%, #faf1e0 100%);
  }
}

/* 写真は右側だけに置き、左の文字面へ向かって溶かす。狭い幅では一段組みになり
   文字が写真の上に来るため、この置き方は二段組みの幅からだけ使う。 */
.np-hero__photo { display: none; }

@media (min-width: 780px) {
  .np-hero__photo {
    position: absolute;
    inset: 0 0 0 auto;
    display: block;
    width: 61%;
    /* 素の写真は赤い箱が強く出て文字面より目立つので、モックと同じ明るさまでクリームの
       薄衣を全体へかけて馴染ませる。 */
    background:
      linear-gradient(rgba(253, 248, 238, .26), rgba(253, 248, 238, .26)),
      url("/static/image/nandamon_plush/hero-scene.webp") center bottom / cover no-repeat;
    filter: saturate(.85);
    /* 文字面へ写真が食い込むと本文が読めなくなるので、溶け終わりを右へ寄せる。 */
    mask-image: linear-gradient(90deg, transparent 0, #000 36%);
  }

  .np-hero::before, .np-hero::after {
    position: absolute;
    color: var(--np-accent);
    content: "✦";
    opacity: .55;
  }

  .np-hero::before { top: 18%; left: 6%; font-size: 1.1rem; }
  .np-hero::after { bottom: 26%; left: 13%; font-size: .8rem; }
}

.np-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(18px, 3.5vw, 32px);
  align-items: center;
  grid-template-columns: 1fr;
  width: min(100% - 24px, 880px);
  margin-inline: auto;
}

.np-hero__copy { position: relative; }

@media (min-width: 780px) {
  .np-hero__copy::before {
    position: absolute;
    top: -38px;
    left: 20%;
    color: #ead5a4;
    content: "☁";
    font-size: 2rem;
    opacity: .72;
  }
}

@media (min-width: 780px) {
  .np-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* 見出しの上に置く帯。左右を斜めに落として旗のようにする。 */
.np-ribbon {
  display: inline-block;
  max-width: calc(100% + var(--np-bleed));
  /* 左端まで伸ばすぶん、内側の余白で文字の開始位置を保つ。 */
  margin: 0 0 clamp(9px, 1.8vw, 14px) calc(-1 * var(--np-bleed));
  padding: 5px clamp(14px, 2.4vw, 22px) 5px calc(var(--np-bleed) + clamp(14px, 2.4vw, 22px));
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  background: linear-gradient(180deg, #a3552a, #86451e);
  color: #fff8ec;
  font-size: clamp(.8rem, 2vw, .875rem);
}

.np-hero__title {
  position: relative;
  margin: 0 0 clamp(8px, 1.6vw, 12px);
  font-size: clamp(1.7rem, 5.2vw, 2.35rem);
  line-height: 1.34;
}

/* 見出しの左肩に置く小さな効果線。見出しの左外へはみ出すため、コンテナの外側に
   余白ができる幅からだけ出す。それ未満では左端で見切れる。 */
@media (min-width: 940px) {
  .np-hero__title::before {
    position: absolute;
    top: 2px;
    left: -30px;
    width: 18px;
    height: 20px;
    background: repeating-linear-gradient(45deg, var(--np-accent) 0 2.5px, transparent 2.5px 9px);
    content: "";
    opacity: .8;
  }
}

.np-accent { color: var(--np-accent); }

.np-hero__lead {
  margin: 0 0 clamp(11px, 2vw, 16px);
  color: var(--np-ink-sub);
  font-size: clamp(.9rem, 2.3vw, .95rem);
}

/* 販売状態は色だけに頼らず、見出しと本文でも状態を書く。 */
.np-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--np-accent);
  border-radius: 999px;
  background: var(--np-paper);
  box-shadow: var(--np-shadow);
  color: var(--np-brown);
  font-size: clamp(.82rem, 2.1vw, .875rem);
}

.np-status__mark {
  flex: none;
  width: .95em;
  height: .95em;
  background: url("/static/image/nandamon_plush/paw.webp") center / contain no-repeat;
}

.np-hero__stage {
  position: relative;
  min-height: 350px;
}

/* モックと同じく、ぬいぐるみを切り取りの線へまたがらせて手前に出す。 */
@media (min-width: 780px) {
  .np-hero__stage { margin-left: clamp(-74px, -5vw, -24px); }
}

.np-hero__plush {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 14px 22px rgba(107, 74, 47, .22));
}

.np-hero__dot {
  position: absolute;
  right: 0;
  bottom: clamp(38px, 9vw, 66px);
  width: clamp(56px, 11vw, 108px);
  height: auto;
  image-rendering: pixelated;
}

/* 写真の上に載る注記。白地では写真と同化するので、モックと同じ濃い灰の座布団に白文字で置く。 */
.np-hero__note {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 246px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(97, 89, 79, .82);
  color: #fdf6e8;
  font-size: clamp(.75rem, 1.9vw, .8125rem);
  line-height: 1.5;
}

/* セクションの境目をやわらかく切る */
.np-wave {
  position: absolute;
  inset: auto 0 -1px;
  height: clamp(38px, 6vw, 70px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,8 C160,2 300,48 470,68 C620,86 760,102 900,106 C1020,109 1122,94 1200,80 L1200,120 L0,120 Z' fill='%23fdf8ee'/%3E%3Cpath d='M0,8 C160,2 300,48 470,68 C620,86 760,102 900,106 C1020,109 1122,94 1200,80' fill='none' stroke='%23d9a86a' stroke-width='3' stroke-dasharray='10 13' stroke-linecap='round' transform='translate(0,-15)'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

/* 見出しの階層は文字サイズだけでなく、色と両脇の印でも区別する。 */
.np-section { margin-top: clamp(20px, 3vw, 34px); }

.np-section__title {
  display: flex;
  gap: clamp(8px, 2vw, 16px);
  align-items: center;
  justify-content: center;
  margin: 0 0 clamp(6px, 1.2vw, 10px);
  color: var(--np-brown);
  font-size: clamp(1.12rem, 3.2vw, 1.3rem);
  line-height: 1.4;
  text-align: center;
}

.np-section__title::before, .np-section__title::after {
  color: var(--np-accent);
  content: "✦";
  font-size: .7em;
}

/* 見出しの脇の印は、その節が何を扱うかで使い分ける。ナンダモン自身の話は肉球、
   読み落とすと困る注意は警告記号、それ以外は既定の飾り。 */
.np-section__title--paw::before {
  width: .95em;
  height: .95em;
  background: url("/static/image/nandamon_plush/paw.webp") center / contain no-repeat;
  content: "";
}

.np-section__title--paw::after { content: none; }

.np-section__title--warn::before {
  color: #a3552a;
  content: "⚠";
  font-size: .85em;
}

.np-section__title--warn::after { content: none; }

.np-section__lead {
  margin: 0 auto clamp(8px, 1.5vw, 12px);
  max-width: 44em;
  color: var(--np-ink-sub);
  font-size: clamp(.875rem, 2.2vw, .9375rem);
  line-height: 1.55;
  text-align: center;
}

.np-caption {
  margin: 8px 0 0;
  color: var(--np-ink-weak);
  font-size: clamp(.875rem, 2.1vw, .9rem);
  line-height: 1.6;
  text-align: center;
}

.np-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: var(--np-paper);
}

/* ドット絵と実物の対比。このページで一番見せたい一か所。 */
/* モックと同じく、見出しごと破線の囲いに入れて一つの展示台に見せる。 */
.np-compare-frame {
  position: relative;
  padding: clamp(9px, 1.3vw, 11px);
  border: 1px solid var(--np-line-accent);
  border-radius: 14px;
  background:
    radial-gradient(circle at 9px 9px, var(--np-accent) 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) 9px, var(--np-accent) 2px, transparent 2.6px),
    radial-gradient(circle at 9px calc(100% - 9px), var(--np-accent) 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--np-accent) 2px, transparent 2.6px);
}

.np-compare-frame::before, .np-compare-frame::after {
  position: absolute;
  color: var(--np-accent);
  content: "✦";
  font-size: clamp(.8rem, 1.8vw, 1.05rem);
  opacity: .7;
}

.np-compare-frame::before { top: clamp(10px, 2vw, 18px); left: clamp(12px, 2.4vw, 24px); }
.np-compare-frame::after { right: clamp(12px, 2.4vw, 24px); bottom: clamp(10px, 2vw, 18px); }

.np-compare-frame .np-section__title { margin-top: 0; padding-top: 0; }

.np-compare__garden {
  position: absolute;
  right: 4%;
  bottom: -8px;
  left: 4%;
  height: 26px;
  background: url("/static/image/nandamon_plush/garden.webp") center bottom / 72% auto no-repeat;
  pointer-events: none;
}

.np-compare {
  display: grid;
  gap: clamp(8px, 2vw, 18px);
  align-items: center;
  justify-items: center;
  grid-template-columns: 1fr;
  padding: clamp(9px, 1.5vw, 13px);
  border: 1px solid var(--np-line-accent);
  border-radius: 10px;
  background: var(--np-paper);
}

@media (min-width: 620px) {
  .np-compare { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); }
}

.np-compare__side { width: 100%; text-align: center; }

.np-compare__dot {
  width: clamp(84px, 17vw, 96px);
  height: auto;
  image-rendering: pixelated;
}

.np-compare__arrow {
  width: clamp(30px, 5vw, 40px);
  height: clamp(30px, 5vw, 40px);
  background: var(--np-accent);
  clip-path: polygon(
    0 37.5%, 62.5% 37.5%, 62.5% 25%, 75% 25%, 75% 37.5%, 87.5% 37.5%, 87.5% 62.5%,
    75% 62.5%, 75% 75%, 62.5% 75%, 62.5% 62.5%, 0 62.5%
  );
  transform: rotate(90deg);
}

@media (min-width: 620px) {
  .np-compare__arrow { transform: none; }
}

.np-compare__photo {
  max-height: 125px;
  object-fit: cover;
}

/* 特徴。写真があるものは同じ1枚の写真から切り出している。 */
.np-feature-band {
  padding: clamp(9px, 1.4vw, 12px);
  border-radius: 12px;
  background: #f8efdd;
}

.np-feature-band .np-section__title { margin-top: 0; }

.np-features {
  display: grid;
  gap: clamp(10px, 1.8vw, 15px);
  /* 狭い画面では縦に読み、本文幅を確保できる幅からモックと同じ3枚組にする。 */
  align-items: start;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 620px) and (max-width: 759.98px) {
  .np-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  .np-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.np-feature {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--np-line-accent);
  border-radius: 10px;
  background: var(--np-paper);
}

.np-feature__photo {
  display: block;
  width: 100%;
  height: auto;
  /* 3枚の見出し位置を揃えるため、切り出し比率を写真側とCSS側の両方で固定する。 */
  aspect-ratio: 8 / 3;
  border-bottom: 1px solid var(--np-line-soft);
  object-fit: cover;
}

.np-feature__body { padding: 7px 42px 8px 9px; }

.np-feature__name {
  margin: 0 0 3px;
  color: var(--np-brown);
  font-size: clamp(.95rem, 2.4vw, 1rem);
}

.np-feature__text {
  margin: 0;
  color: var(--np-ink-sub);
  font-size: clamp(.82rem, 2.1vw, .875rem);
  line-height: 1.5;
}

.np-feature::after {
  position: absolute;
  right: 7px;
  bottom: 6px;
  width: 32px;
  height: 32px;
  background: url("/static/image/nandamon_plush/dot-sit.webp") center / contain no-repeat;
  content: "";
  image-rendering: pixelated;
}

.np-feature:nth-child(2)::after {
  background-image: url("/static/image/nandamon_plush/dot-stand.webp");
  transform: scaleX(-1);
}

/* キャラクター紹介 */
.np-profile {
  position: relative;
  display: grid;
  gap: clamp(14px, 3vw, 28px);
  align-items: center;
  grid-template-columns: 1fr;
  justify-items: center;
  padding: clamp(11px, 1.7vw, 15px);
  border: 2px solid var(--np-line-accent);
  border-radius: 14px;
  outline: 1px solid var(--np-line-accent);
  outline-offset: -7px;
  background: var(--np-paper);
}

@media (min-width: 620px) {
  .np-profile {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
  }
}

.np-profile__dot {
  width: clamp(92px, 19vw, 132px);
  height: auto;
  image-rendering: pixelated;
}

/* 二段組みではモックと同じく、ドット絵を枠の下辺へ立たせて足元に草花を敷く。 */
@media (min-width: 620px) {
  .np-profile__dot { align-self: end; }

  .np-profile::before {
    position: absolute;
    bottom: 6px;
    left: 10px;
    width: clamp(130px, 24vw, 170px);
    height: 36px;
    background: url("/static/image/nandamon_plush/decor-sprig.webp") 38% bottom / 300% auto no-repeat;
    content: "";
    pointer-events: none;
  }
}

.np-profile__text { margin: 0 0 8px; }
.np-profile__text:last-child { margin-bottom: 0; }

.np-quote {
  margin: 0 0 8px;
  padding-left: 10px;
  border-left: 3px solid var(--np-accent);
  color: var(--np-brown);
}

.np-quote cite { font-style: normal; }

.np-profile__note, .np-profile__leaf {
  position: absolute;
  font-size: 1.25rem;
  opacity: .6;
}

.np-profile__note { top: 12px; left: 15%; color: #75a8c5; transform: rotate(-12deg); }
.np-profile__leaf { right: 18px; bottom: 10px; color: #88a85d; font-size: 1.55rem; }

/* 販売情報。値が決まったらこの表と注記だけを書き換える。
   モックと同じく、表のカードの右外へ大きなドット絵を花畑ごと座らせる。 */
.np-sale {
  display: grid;
  gap: clamp(8px, 1.6vw, 16px);
  align-items: end;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .np-sale { grid-template-columns: minmax(0, 1fr) auto; }
}

.np-sale__card {
  padding: clamp(11px, 1.8vw, 15px);
  border: 1px solid var(--np-line-accent);
  border-radius: 10px;
  background: var(--np-paper);
}

.np-sale__list {
  display: grid;
  gap: 2px clamp(12px, 3vw, 24px);
  grid-template-columns: max-content minmax(0, 1fr);
  max-width: 32em;
  margin: 0;
}

@media (min-width: 720px) {
  .np-sale__list {
    grid-template-columns: repeat(2, max-content minmax(0, 1fr));
    max-width: none;
  }
}

.np-sale__list dt {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--np-cream);
  color: var(--np-ink-weak);
  font-weight: normal;
}

.np-sale__list dd {
  margin: 0;
  padding: 2px 0;
  color: var(--np-ink);
}

.np-sale__note {
  max-width: 42em;
  margin: clamp(7px, 1.4vw, 10px) 0 0;
  padding-top: clamp(7px, 1.4vw, 10px);
  border-top: 1px dashed var(--np-line);
  color: var(--np-ink-sub);
  font-size: clamp(.82rem, 2.1vw, .875rem);
}

.np-sale__figure {
  position: relative;
  justify-self: end;
  padding: 0 clamp(10px, 2.4vw, 26px) 8px;
}

.np-sale__dot {
  display: block;
  position: relative;
  z-index: 1;
  width: clamp(110px, 20vw, 180px);
  height: auto;
  image-rendering: pixelated;
}

.np-sale__garden {
  position: absolute;
  inset: auto 0 0;
  height: 56px;
  background: url("/static/image/nandamon_plush/decor-sprig.webp") center bottom / 130% auto no-repeat;
  pointer-events: none;
}

/* 注意事項 */
.np-notes-block {
  display: grid;
  gap: clamp(8px, 1.6vw, 16px);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .np-notes-block { grid-template-columns: minmax(0, 1fr) auto; }
}

.np-notes {
  margin: 0;
  padding-left: 0;
  color: var(--np-ink-sub);
  font-size: clamp(.82rem, 2.1vw, .875rem);
  line-height: 1.5;
  list-style: none;
}

.np-notes li {
  position: relative;
  padding-left: 1.4em;
}

.np-notes li::before {
  position: absolute;
  top: .55em;
  left: .15em;
  width: .5em;
  height: .5em;
  border: 1.5px solid #e29a92;
  border-radius: 50%;
  content: "";
}

.np-notes li + li { margin-top: 5px; }

/* 看板の文字は画像へ焼き込まず、板の上へ重ねる。書体が揃い、読み上げにも残る。 */
.np-sign {
  position: relative;
  /* 板の内側へ「まっててほしいんダモン」が1行で収まる幅を保つ。 */
  width: clamp(148px, 30vw, 160px);
  margin-inline: auto;
}

.np-sign__img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(.82);
}

.np-sign__text {
  position: absolute;
  /* 板は画像の上から約13%〜57%の範囲にある。 */
  inset: 13% 14% 43%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  color: #fdf4e2;
  font-size: .625rem;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 2px rgba(74, 46, 22, .75);
}

@media (min-width: 900px) {
  .np-sign::after {
    position: absolute;
    right: -42px;
    bottom: 0;
    width: 58px;
    height: 58px;
    background: url("/static/image/nandamon_plush/dot-stand.webp") center / contain no-repeat;
    content: "";
    image-rendering: pixelated;
  }
}

.np-back {
  margin: clamp(12px, 2vw, 18px) 0;
  text-align: center;
}

.np-back a { color: var(--np-brown); }

/* ページの終わりは、モックと同じ砂色の丘でフッターへつなぐ。読む内容ではないので背景として敷く。 */
.np-garden {
  height: clamp(38px, 5vw, 60px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C140,38 300,86 470,74 C620,64 760,28 900,40 C1020,50 1122,72 1200,60 L1200,120 L0,120 Z' fill='%23f2e2c4'/%3E%3Cpath d='M0,64 C140,38 300,86 470,74 C620,64 760,28 900,40 C1020,50 1122,72 1200,60' fill='none' stroke='%23d9a86a' stroke-width='3' stroke-dasharray='10 13' stroke-linecap='round' transform='translate(0,-14)'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}