@charset "UTF-8";

:root {
  --section-heading-lead-gap: 30px;
  --section-lead-content-gap: 50px;
  --section-lead-font-size: 16px;
  --section-body-font-size: 15px;
}

/* 下層ページの標準構成：見出し → リード文 → 本文 */
main .section-fade > .wrap > .content > .h2-outer:has(+ .lead),
main .section-fade > .wrap > .content > .h2-outer:has(+ .section-lead) {
  margin-bottom: var(--section-heading-lead-gap) !important;
}
main .section-fade > .wrap > .content > .h2-outer + .lead,
main .section-fade > .wrap > .content > .h2-outer + .section-lead {
  font-size: var(--section-lead-font-size) !important;
  margin-bottom: var(--section-lead-content-gap) !important;
}

@media (max-width: 768px) {
  :root {
    --section-heading-lead-gap: 15px;
    --section-lead-content-gap: 35px;
  }
}

/* 下層ページ共通：スクロールに合わせたセクションフェード */
.section-fade > .wrap,
.section-fade > .shokuba-slider-wrap,
.section-fade > .works-slider-wrap {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.section-fade.is-animate > .wrap,
.section-fade.is-animate > .shokuba-slider-wrap,
.section-fade.is-animate > .works-slider-wrap {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .section-fade > .wrap,
  .section-fade > .shokuba-slider-wrap,
  .section-fade > .works-slider-wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*======================CSS変数============================*/
:root {
  /* メインカラー */
  --color-green: #30B040;
  --color-pink: #F04070;
  --color-green-dark: #105030;
  --color-green-light: #E0F0E0;
  --color-pink-watercolor: #F080A0;
  --color-pink-bg: #F0E0E0;
  --color-blue-bg: #90C0F0;
  /* 基本 */
  --color-text: #231815;
  --color-bg: #F5F5F0;
  --color-white: #FFFFFF;
  /* サイズ */
  --content-width: 1200px;
  --breakpoint-sp: 768px;
}

/*======================リセット============================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, figure, figcaption,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, label, legend {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
html {
  font-size: 62.5%;
  box-sizing: border-box;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: var(--color-text);
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  text-decoration-skip-ink: none;
}
body {
  overflow-x: hidden;
  background: var(--color-white);
}
/*======================見出し（丸ゴシック）============================*/
/* Zen Maru Gothic 系見出しは palt（プロポーショナル字形）+ letter-spacing で文字詰め。
   palt は約物・かな・カナ・漢字の左右余白を詰めるので、字間が急に狭く見える。
   letter-spacing で少しだけ空けて可読性を保つ。 */
h1, h2, h3, h4, h5, h6 {
  font-family: "Zen Maru Gothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.04em;
}
ol, ul {
  list-style: none;
}
:focus {
  outline: 0;
}
p {
  text-justify: inter-ideograph;
  line-break: strict;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
a:hover {
  opacity: 0.7;
}
*, *:before, *:after {
  box-sizing: border-box;
}