/* common.css: サイト全体の共通設定・変数 */
:root {
  /* フォント */
  --font-main: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* 背景・テキスト */
  --page-bg: #FDF6EC;
  --paper:   #FDF6EC;
  --ink:     #3d2817;
  --muted:   #8b6f47;
  --line:    #d4a574;
  --soft:    #ffe4d6;

  /* コーラルパレット */
  --coral:       #ff8c6f;
  --coral-light: #ffa892;
  --coral-dark:  #ff6b4a;
  --peach:       #fcd6d0;

  /* レイアウト */
  --header-h: 126px;
  --container: 1080px;
  --radius:    22px;
  --radius-lg: 26px;
  --shadow:    0 2px 8px rgba(255, 107, 74, 0.12);

  /* 見出しサイズ */
  --site-h1-size-pc: clamp(30px, 4.4vw, 42px);
  --site-h1-size-sp: clamp(21px, 6.2vw, 29px);
  --site-h2-size-pc: clamp(28px, 3.1vw, 40px);
  --site-h2-size-sp: clamp(17px, 5.2vw, 24px);
}

@media (min-width: 840px) {
  :root {
    --header-h: 140px;
  }
}

html {
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-main);
  padding-top: var(--header-h);
  background: var(--page-bg);
  font-weight: 400;
  font-style: normal;
}

/* site以下4ページの共通横余白 */
#index main .container,
#about main .container,
#jobs main .container,
#users main .container {
  padding-inline: 36px;
}

/* site以下4ページの見出しサイズ統一 */
#index main h1,
#about main h1,
#jobs main h1,
#users main h1 {
  font-size: var(--site-h1-size-pc);
  font-weight: 700;
  line-height: 1.2;
}

#index main h2,
#about main h2,
#jobs main h2,
#users main h2 {
  font-size: var(--site-h2-size-pc);
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 820px) {
  #index main .container,
  #about main .container,
  #jobs main .container,
  #users main .container {
    padding-inline: 36px;
  }

  #index main h1,
  #about main h1,
  #jobs main h1,
  #users main h1 {
    font-size: var(--site-h1-size-sp);
  }

  #index main h2,
  #about main h2,
  #jobs main h2,
  #users main h2 {
    font-size: var(--site-h2-size-sp);
  }
}

@media (max-width: 390px) {
  :root {
    --site-h1-size-sp: clamp(20px, 6vw, 26px);
    --site-h2-size-sp: clamp(16px, 4.8vw, 22px);
  }
}

/* =========================
   PC / SP 表示切替ユーティリティ
   HTMLをPC用・SP用に分けた場合に使用する。
   display の値は各要素自身のCSSに任せ、
   ここでは「非表示にする側」だけを指定する。
   ========================= */
@media (max-width: 820px) {
  .pc-only { display: none !important; }
}
@media (min-width: 821px) {
  .sp-only { display: none !important; }
}