@charset "utf-8";

/* RESET
------------------------------------------ */
:where(*) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
::before, ::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-size: 100%;
/*  font-weight: 400*/
}

:where(img) {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  vertical-align: middle;
}

:where(a) {
  color: inherit;
  text-decoration: none
}

:where(ul, ol) {
  list-style: none
}

:where(table) {
  border-collapse: collapse;
  width: 100%;
  font-size: 100%
}

:where(input, textarea, select, button) {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  font-size: 100%;
  font-weight: 400;
  outline: none
}

address{
  font-style: normal;
}

@media screen and (min-width: 768px) {
  :where(img) {
    width: 100%;
    height:auto;
  }
}

:where(sup){
  vertical-align: top;
}


/* BASE
------------------------------------------ */
:root {
  --jp: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --jp-accent: "Noto Sans JP", sans-serif;
  --en: "Quicksand", "Zen Maru Gothic", sans-serif;
  /* --en-accent: ; */

  --fw-n-jp: 400;
  --fw-b-jp: 700;
  --fw-n-jp-accent: 400;
  --fw-b-jp-accent: 700;
  --fw-n-en: 400;
  --fw-b-en: 700;

  --color-font: #5C524E;

  /*サイトカラー*/
  --color-base: #FFF9F2;
  --color-base1: #F8EFE1;
  --color-base2: #6B5F59;
  --color-base3: #776B65;
  --color-base4: #FFEFDF;

  /* 面：やわらかいベージュ。旧「濃色面」の置き換え先 */
  --color-surface-deep: #F1E5D3;
  --color-surface-mid: #E9DBC6;
  --color-accent: #C25E1B;
  --color-gold2: #F2994A;
  /* 面と文字でトークンを分けている（2026-08-31）。
     濃色面そのものをやめ、面はすべてベージュ（--color-surface-deep / -mid）。
     --color-navy / -base2 / -base3 / -font は「文字色」専用のやわらかい暖色ダーク。
     クラス名 fc-navy / bgc-navy は互換のため据え置き（bgc-navy はベージュ面を指す）。
     アクセントのオレンジは小さな面（バッジ・丸番号）とCTAにのみ残す。
     クラス名 fc-navy / bgc-navy は互換のため据え置き */
  --color-navy: #5C524E;


  /*モノトーン*/
  --color-000: #000;
  --color-111: #111;
  --color-222: #222;
  --color-333: #333;
  --color-444: #444;
  --color-555: #555;
  --color-666: #666;
  --color-777: #777;
  --color-888: #888;
  --color-999: #999;
  --color-aaa: #aaa;
  --color-bbb: #bbb;
  --color-ccc: #ccc;
  --color-ddd: #ddd;
  --color-eee: #eee;
  --color-fff: #fff;
  --color-red: #D64545;

  --font-size-ratio: .75; /*1〜.75で設定する*/
  --font-size-enlargement: 1;

  --lh-ratio: 1;
  --ls: 1;

  --space-s: 5vw;
  --space-m: 11vw;
  --space-l: 18vw;

  --space-ratio: 1;

  /* --- casual redesign tokens (2026-08-27) --- */
  --color-accent-soft: #FDEBDC;   /* アクセントの淡色面 */
  --color-accent-mid: #F2994A;    /* 明るいウォームオレンジ */
  --color-accent-deep: #A54B12;   /* ホバー・濃色 */
  --color-line: #F0DFC7;          /* 罫線・区切り（ベージュ） */

  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* 暗色面で使うアクセント（--color-accent は暗色上でコントラスト不足のため） */
  --color-accent-on-dark: #F7C08A;
  /* 明るいオレンジ面に載せる濃色の文字 */
  --color-badge-ink: #6B3105;

  /* 相談チャネル別のCTA色 */
  --color-cta-line: #06C755;
  --color-cta-mail: #3BA7B0;
  --color-cta-tel: #E4572E;

  /* 余白スケール（Figma Variables と対応。既存の --space-s/m/l は vw のセクション余白で別用途） */
  --gap-4: 4px;
  --gap-8: 8px;
  --gap-12: 12px;
  --gap-16: 16px;
  --gap-20: 20px;
  --gap-24: 24px;
  --gap-32: 32px;
  --gap-40: 40px;
  --gap-48: 48px;
  --gap-64: 64px;

  --shadow-soft: 0 6px 20px rgba(160, 105, 60, 0.10);
  --shadow-card: 0 10px 30px rgba(90, 74, 66, 0.10);
  --shadow-pop: 0 12px 28px rgba(194, 94, 27, 0.22);
}

body {
  position: relative;
  font-size: 13px;
  font-family: var(--jp);
  font-weight: var(--fw-n-jp);
  color: var(--color-font);
  letter-spacing: var(--ls);
  line-height: 1;
  overflow-x: hidden;
}

@media screen and (min-width: 768px) {
  body {
    font-size: 14px;
  }
  :root {
    --font-size-ratio: .9; /*1〜.9で設定する*/
    --lh-ratio: 1;

    --space-ratio: 1;
  }
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --font-size-ratio: 1; /*1 〜 1.1 で設定する*/
    --space-ratio: 1;
  }
  body {
    font-size: 16px;
  }
}