@charset "UTF-8";

/* =========================================================
   tonari LP – base / design tokens
   ---------------------------------------------------------
   Figma: 375 x 9467 (スマホ専用アートボード)
   --design-w : Figma のアートボード幅(px)
   --max-w    : PC 表示時に固定する最大幅(px) = 一番大きいスマホ相当
   1rem = デザイン上の 10px。Figma の px を 10 で割って rem で書く。
   ========================================================= */

:root {
  --design-w: 375;
  --max-w: 430;

  /* color */
  --c-text: #3f3526;
  --c-text-strong: #1a1e20;
  --c-text-brown: #79613d;
  --c-green: #00935a;
  --c-orange: #ff8d40;
  --c-orange-shadow: #f75e21;
  --c-cream: #fffbe7;
  --c-cream-deep: #fff5c7;
  --c-yellow: #ffed9a;
  --c-gray-bubble: #f4f4f4;
  --c-blue-bubble: #f3f7fa;
  --c-peach: #fff8f0;
  --c-mint: #e5f6e9;
  --c-mint-pale: #eef6f0;
  --c-tag-beige: #ffedd5;
  --c-dot-active: #88dacc;
  --c-white: #fff;

  /* z-index */
  --z-cta: 50;
}

html {
  /* 100vw / (design-w / 10) を --max-w 相当で頭打ちにする */
  font-size: min(
    calc(100vw / (var(--design-w) / 10)),
    calc(var(--max-w) * 1px / (var(--design-w) / 10))
  );
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  /* PC で wrapper の外側に出る余白 */
  background: #efe9d6;
  color: var(--c-text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", meiryo, sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd, dt {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* <picture> 自体はボックスを作らせず、<img> を直接の子と同じに扱う。
   display:contents だと <source> も flex アイテムになり gap が余分に入るため打ち消す */
picture {
  display: contents;
}

picture > source {
  display: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ---------------------------------------------------------
   レイアウトの器
   スマホ幅では画面いっぱい、PC では --max-w で中央寄せ
   --------------------------------------------------------- */
.l-wrapper {
  position: relative;
  width: 100%;
  max-width: calc(var(--max-w) * 1px);
  margin-inline: auto;
  background: var(--c-cream);
  overflow-x: clip;
  /* 固定 CTA ぶんの余白 */
  padding-bottom: 8.8rem;
}

/* 画面読み上げ専用 */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}