@layer reset, base, page, theme, utilities;

@layer reset{

/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

html {
	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
	line-height: 1.15; /* 1. Correct the line height in all browsers. */
	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
	-moz-tab-size: 4;
	  -o-tab-size: 4;
	     tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

body {
	margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}
}
@layer base {
  :root {
    /* Color */

    /* Typography */
    --font-sans: "Hiragino Sans", "Noto Sans JP", Meiryo, "Noto Sans CJK JP", sans-serif;
    --font-weight-normal: 500;
    --font-weight-bold: 900;
    --color-text: #808181;
    --color-text-strong: #737373;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;

    /* Layout */
    --content-max: 1200px;

    /* トップページ hero-title のサイズ定義。site-header の高さと連動させるため共有。 */
    --hero-title-inline-size: 75svw;
    --hero-title-ratio: 0.1; /* aspect-ratio: 1 / var(--hero-title-ratio) */

    /* 上下限値（大画面での過剰な拡大・SPでの潰れを抑制） */
    --min-header-block-size: 42px;
    --max-header-block-size: 130px;
    --max-title-inline-size: 1000px;

    /* ヘッダ高さ：タイトル高 (= inline-size * ratio) + 1svw の余白。上下限を clamp() で内包するので
       消費側は var(--header-block-size) だけ参照すればよい。 */
    --header-block-size: clamp(
      var(--min-header-block-size),
      calc(var(--hero-title-inline-size) * var(--hero-title-ratio) + 1svw),
      var(--max-header-block-size)
    );

    @media (max-width: 768px) {
      --hero-title-inline-size: 50svw;
    }
  }
}
@layer base {
  html {
    box-sizing: border-box;
  }
  *, *::before, *::after {
    box-sizing: inherit;
  }
  body {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
    line-height: 1.6;
  }
  img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
  }
}
/**
 * data-parallax 属性を持つ要素に、スクロール位置に応じた縦方向の視差移動を与える。
 * CSS Scroll-driven animations（animation-timeline: view()）のみで実現し、JSフォールバックは持たない
 * （このプロジェクトは iOS26+ を前提とするため、Safari 26 でのサポートで要件を満たす）。
 *
 * 使い方:
 *   <div data-parallax style="--parallax-speed: 0.4">...</div>
 *
 * - --parallax-speed: 移動量の係数。正で「下スクロールで要素が下へ」、負で逆方向。未指定時は 0.3。
 * - prefers-reduced-motion: reduce では無効化。
 * - 画面幅が狭い（SP想定）場合は完全無効化ではなく、--parallax-mobile-scale で係数を弱めて動かす。
 */
:root {
  --parallax-mobile-scale: 1;
}

@media (max-width: 767px) {
  :root {
    /* SPでは動きを控えめに（既定係数の40%）。完全に切りたい場合は 0 にする。 */
    --parallax-mobile-scale: 0.4;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: entry) {
    [data-parallax] {
      /* animation ショートハンドはミニファイ時に animation-timeline を
         誤って内包して無効化されるため、個別プロパティで宣言する。 */
      animation-name: parallax-move;
      animation-duration: 1ms;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      /* entry/exit のみに縮められると範囲解釈が不安定なので、明示的な 0%/100% を維持する。 */
      animation-range: entry 0% exit 100%;
    }

    @keyframes parallax-move {
      from {
        transform: translateY(
          calc(var(--parallax-speed, 0.3) * var(--parallax-mobile-scale, 1) * -300px)
        );
      }
      to {
        transform: translateY(
          calc(var(--parallax-speed, 0.3) * var(--parallax-mobile-scale, 1) * 300px)
        );
      }
    }
  }
}
@layer utilities {
  .visually-hidden {
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;  /* テキスト折返しで幅が変わり読み上げが崩れるのを防ぐ */
  }


  /* imgLoadTrigger による初期描画制御: .is-ready 付与までフェードで隠す。
     複雑な段階演出が不要な要素に付ける汎用ユーティリティ。 */
  .reveal-on-ready {
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .reveal-on-ready.is-ready {
    opacity: 1;
  }

  .caution {
    color: red;
    font-weight: bold;
  }

  .accent {
    color: var(--theme-color-link, #f98656);

    &.accent-strong {
      font-weight: var(--font-weight-bold);
    }
  }

  .strong {
    font-weight: var(--font-weight-bold);
  }

  .note {
    color: #999999;
  }

  .justify {
    text-align: justify;
  }

  .text-center {
    text-align: center;
  }

  /* SP 幅（768px 以下）でのみ表示するユーティリティ。
     改行など、PC レイアウトでは不要・SP でのみ有効にしたい要素に使う。 */
  .sp-only {
    display: none;
  }

  @media (max-width: 768px) {
    .sp-only {
      display: inline;
    }
  }

  /* ============================================================
     フォントサイズユーティリティ
     カンプ準拠（PC 1400px 幅想定）で clamp スケール、768px 以下で SP 値に切り替え。
     SP 値は PC 値の 70%（自動計算・丸め）。
     ============================================================ */
  .fs-40 { font-size: clamp(28px, calc(40 / 1400 * 100vw), 40px); }
  .fs-30 { font-size: clamp(21px, calc(30 / 1400 * 100vw), 30px); }
  .fs-27 { font-size: clamp(19px, calc(27 / 1400 * 100vw), 27px); }
  .fs-24 { font-size: clamp(17px, calc(24 / 1400 * 100vw), 24px); }
  .fs-20 { font-size: clamp(14px, calc(20 / 1400 * 100vw), 20px); }
  .fs-16 { font-size: clamp(11px, calc(16 / 1400 * 100vw), 16px); }
  .fs-12 { font-size: clamp(8px,  calc(12 / 1400 * 100vw), 12px); }

  @media (max-width: 768px) {
    .fs-40 { font-size: 28px; }
    .fs-30 { font-size: 21px; }
    .fs-27 { font-size: 19px; }
    .fs-24 { font-size: 17px; }
    .fs-20 { font-size: 14px; }
    .fs-16 { font-size: 11px; }
    .fs-12 { font-size: 8px; }
  }

}.site-header[data-astro-cid-z4jru4n3] {
  position: absolute;
  z-index: 10;
  width: 100%;
}

.site-header-inner[data-astro-cid-z4jru4n3] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-inline: auto;
  padding-inline: 1svw;
  block-size: var(--header-block-size);
}

.site-header-brand[data-astro-cid-z4jru4n3] {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1;
}

.site-header--static[data-astro-cid-z4jru4n3] .site-header-brand[data-astro-cid-z4jru4n3] {
  color: var(--header-brand-color, #222);
}

.site-header--overlay[data-astro-cid-z4jru4n3] .site-header-brand[data-astro-cid-z4jru4n3] {
  color: var(--header-brand-color, #fff);
}

.site-header-logo[data-astro-cid-z4jru4n3] {
  width: 13.3svw;
  min-inline-size: 100px;
  font-weight: bold;
  text-decoration: none;
  color: inherit;
  display: block;

  & img {
    inline-size: 100%;
    block-size: auto;
  }
}

main[data-astro-cid-z4jru4n3] {
}

.site-footer[data-astro-cid-z4jru4n3] {
  color: var(--footer-fg, #ccc);
  padding-block: 2rem 10rem;
}

.site-footer-inner[data-astro-cid-z4jru4n3] {
  max-inline-size: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.site-footer-nav[data-astro-cid-z4jru4n3] ul[data-astro-cid-z4jru4n3] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer-nav[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3] {
  color: var(--color-text-strong);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.site-footer-nav[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3]:hover {
  text-decoration: underline;
}

.site-footer-copy[data-astro-cid-z4jru4n3] {
  margin: 0;
  font-size: .875rem;
  opacity: .7;
  display: flex;
  letter-spacing: .05em;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  color: #e9e9e9;
}