/* ============================================================================
   Aizoon合同会社 コーポレートサイト — 世界観: 「朱華色の水引をかけた便箋」
   クリーム色の便箋の上に、朱華色（はねずいろ）の一本の水引。
   代行とは、お客様の手間を「引き受け、結ぶ」こと。装飾はその一本の線と、
   柔らかい光を受けた立体の「A」だけに絞る。線は A の横棒がほどけて始まり、
   ページを縦に貫き、フッターの A でもう一度結ばれて終わる。
   書体: Shippori Mincho B1（見出し）／ Zen Kaku Gothic New（本文）の2系統。
   ============================================================================ */

:root {
  /* 朱 ── 面ではなく線と差し色に使う。地は生成りの紙、文字は墨 */
  --c-hanezu: #c04a3e;      /* 装飾の朱（地に対して4.5:1） */
  --c-hanezu-light: #d9796b;
  --c-hanezu-text: #a63a2f; /* 大きな文字に使える朱（地に対して5.9:1） */
  --c-deep: #8d2d24;        /* リンク・罫（7.7:1） */
  --c-deepest: #6b2019;     /* eyebrow・塗りボタンの地（10.5:1） */
  --c-tint: #f0e4df;
  --bg: #f8f6f1;            /* 生成り */
  --bg-peach: #f2eee5;
  --bg-lav: #eeeae0;
  --bg-dark: #1b1b1e;       /* 締まる面（フッター・強調セクション） */
  --ink: #1b1b1e;           /* 墨（15.9:1） */
  --ink-sub: #585860;       /* 6.5:1 */
  --ink-on-dark: #efece6;   /* 濃色面の本文（14.6:1） */
  --ink-sub-on-dark: #a9a59d; /* 濃色面の副文（7.0:1） */
  --ink-rgb: 27, 27, 30;
  --deep-rgb: 141, 45, 36;
  --deepest-rgb: 107, 32, 25;
  --brand-rgb: 192, 74, 62;
  --rule: rgba(var(--ink-rgb), 0.16);
  --rule-soft: rgba(var(--ink-rgb), 0.08);
  --btn-fill-bg: var(--c-deepest);
  --btn-fill-hover: #5f1c16;
  --footer-figure: url('/assets/img/cta.webp');

  --font-serif: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
  --font-sans: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;

  /* タイプスケール: 落差で読ませる。PC では H1 100px / トップ h2 58px / 柱の数字 82px / ラベル 12px */
  --fs-display: clamp(2.6rem, 1.2rem + 5.4vw, 6.25rem);
  --fs-h1: clamp(2rem, 1.2rem + 3.2vw, 4.5rem);
  --fs-h2-top: clamp(2rem, 1.3rem + 2.6vw, 3.75rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-pillar: clamp(3.2rem, 2rem + 3.6vw, 5.2rem);
  --fs-lead: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --container: 1160px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(80px, 10vw, 150px);
  --header-h: 72px;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.6s;
}

/* ページ遷移: クロスフェード（動きを減らす設定では無効） */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: 0.22s; }
  ::view-transition-new(root) { animation-duration: 0.32s; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.02em;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-color: rgba(var(--deep-rgb), 0.5); text-underline-offset: 0.2em; }
a:hover { color: var(--c-deepest); text-decoration-color: var(--c-deepest); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
strong, b { font-weight: 500; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
:focus-visible { outline: 2px solid var(--c-deepest); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--c-tint); color: var(--c-deepest); }

/* 和文組版: 見出しと引用は文節で折り返し、プロポーショナル詰め */
h1, h2, h3, .serif {
  font-family: var(--font-serif);
  font-weight: 500;
  font-feature-settings: 'palt' 1;
  letter-spacing: 0.04em;
  line-height: 1.45;
  word-break: auto-phrase;
  overflow-wrap: break-word; /* 分割できない長い語（カタカナ語など）が極小幅ではみ出さないための保険 */
}
p { text-wrap: pretty; }
.lead, .quote { word-break: auto-phrase; }
.nowrap { white-space: nowrap; }
/* SP だけで改行する（書体の読込前後で行数が変わらないように、折り返し位置を固定する） */
.br-sp { display: none; }
@media (max-width: 860px) { .br-sp { display: inline; } }
.en { font-family: var(--font-serif); font-feature-settings: normal; letter-spacing: 0.08em; }

/* ---------- utilities ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 1000;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 4px 4px;
}
.skip-link:focus { top: 0; }
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - var(--gutter) * 2, 760px); margin-inline: auto; }

.eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-deepest);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ''; display: inline-block; width: 22px; height: 1px;
  background: var(--c-hanezu); vertical-align: middle; margin-right: 12px;
}
.lead { font-size: var(--fs-lead); line-height: 2; color: var(--ink); }
.sub { color: var(--ink-sub); }
.small { font-size: var(--fs-small); line-height: 1.8; }
.note { font-size: var(--fs-small); color: var(--ink-sub); line-height: 1.8; }

/* ---------- buttons: ホバーで朱華が左から満ちる ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.95em 1.7em;
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0.06em;
  text-decoration: none; border-radius: 2px;
  border: 1px solid var(--ink); color: var(--ink); background: transparent;
  transition: color 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--c-hanezu);
  transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
/* 文字色は満ちる途中も基準を割らないように、ホバーの瞬間に切り替える（墨×朱華 6.9:1、墨×クリーム 13:1） */
.btn:hover, .btn:focus-visible { color: var(--ink); border-color: var(--c-hanezu); transition-duration: 0s; }
.btn--line { border-color: var(--c-deepest); color: var(--c-deepest); }
/* 塗りボタンは白文字のまま、より深い朱が満ちる（白×#6b2019 11.4:1、白×#5f1c16 12.6:1） */
.btn--fill { background: var(--btn-fill-bg); border-color: var(--btn-fill-bg); color: #fff; }
.btn--fill::before { background: var(--btn-fill-hover); }
.btn--fill:hover, .btn--fill:focus-visible { color: #fff; border-color: var(--btn-fill-hover); }
.btn--lg { padding: 1.1em 2.2em; font-size: 1rem; }
.btn .arr { width: 1.1em; height: 1.1em; transition: transform 0.3s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }
.btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* 文中リンク（矢印付き）: 下線が右へ伸びる */
.more {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--c-deepest); text-decoration: none; position: relative; padding-bottom: 3px;
}
.more::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--c-hanezu); transform-origin: left; transition: transform 0.4s var(--ease-out);
}
.more:hover::after { transform: scaleX(0.6); }
.more .arr { width: 1em; height: 1em; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s;
}
/* ぼかし背景は擬似要素に持たせる（header 自身に backdrop-filter を付けると
   モバイルメニューの position: fixed の包含ブロックになってしまう） */
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(248, 246, 241, 0.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.site-header.is-scrolled { border-bottom-color: var(--rule-soft); }
.site-header__inner {
  width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto;
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo__mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 4px 8px rgba(var(--deep-rgb), 0.18)); }
.logo__word {
  font-family: var(--font-serif); font-weight: 500; font-size: 1.35rem; letter-spacing: 0.06em; line-height: 1;
}
.site-nav__list { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.site-nav__list a:not(.btn) {
  font-size: 0.92rem; font-weight: 500; letter-spacing: 0.08em; text-decoration: none;
  position: relative; padding: 6px 0; color: var(--ink);
}
.site-nav__list a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-deep);
  transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease-out);
}
.site-nav__list a:not(.btn):hover::after,
.site-nav__list a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site-nav__cta .btn { padding: 0.62em 1.3em; font-size: 0.88rem; }
.site-nav__group, .site-nav__extra { display: none; }
.menu-toggle { display: none; }

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .site-header .logo { position: relative; z-index: 120; }
  .menu-toggle {
    display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 6px;
    width: 44px; height: 44px; margin-right: -8px; position: relative; z-index: 120;
  }
  .menu-toggle__bar { width: 24px; height: 1.5px; background: var(--ink); transition: transform 0.35s var(--ease-out); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
  .site-nav {
    position: fixed; inset: 0; z-index: 110; background: var(--bg);
    padding: calc(var(--header-h) + 12px) var(--gutter) 40px;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0s 0.35s;
    overflow-y: auto;
  }
  .site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list > li { border-bottom: 1px solid var(--rule-soft); }
  .site-nav__list a:not(.btn) { display: block; font-family: var(--font-serif); font-size: 1.4rem; padding: 14px 0; }
  .site-nav__list a:not(.btn)::after { display: none; }
  .site-nav__group { display: block; padding: 6px 0 10px; }
  .site-nav__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .site-nav__sub a:not(.btn) {
    font-family: var(--font-sans); font-size: 0.92rem; padding: 7px 0; color: var(--ink-sub);
  }
  .site-nav__cta { border: 0 !important; padding-top: 22px; }
  .site-nav__cta .btn { width: 100%; justify-content: center; padding: 1em; font-size: 1rem; }
  .site-nav__extra { display: flex; justify-content: space-between; gap: 16px; border: 0 !important; padding-top: 6px; }
  .site-nav__extra a:not(.btn) { font-family: var(--font-sans); font-size: 0.95rem; padding: 10px 0; }
  body.menu-open { overflow: hidden; }
}

/* ---------- breadcrumbs ---------- */
.crumbs {
  width: min(100% - var(--gutter) * 2, var(--container)); margin: 22px auto 0; font-size: 0.78rem;
  color: var(--ink-sub);
}
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 10px; }
.crumbs li + li::before { content: '／'; margin-right: 10px; color: rgba(var(--ink-rgb), 0.45); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--c-deepest); }

/* ---------- footer: 水引を結び直す場所 ---------- */
.site-footer {
  border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-peach) 100%);
  padding: clamp(56px, 7vw, 104px) 0 36px;
  position: relative; z-index: 2;
}
.site-footer__inner { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.site-footer__top {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center;
  padding-bottom: clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--rule-soft);
}
.site-footer__a {
  width: clamp(120px, 14vw, 180px); height: auto; filter: drop-shadow(0 16px 24px rgba(var(--deepest-rgb), 0.22));
}
.site-footer__line {
  font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1.4; letter-spacing: 0.04em;
  word-break: auto-phrase;
}
.site-footer__sub { margin-top: 0.9rem; color: var(--ink-sub); font-size: 0.95rem; }
.site-footer__actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 12px 16px; }
.site-footer__karte { margin-top: 1rem; font-size: 0.85rem; }
.site-footer__karte a { color: var(--ink-sub); text-decoration-color: var(--c-hanezu); }
.site-footer__karte a:hover { color: var(--c-deepest); }
.site-footer__cols {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px 64px; padding-top: clamp(36px, 4vw, 56px);
}
.site-footer__brand .logo__word { font-size: 1.4rem; }
.site-footer__address { margin-top: 16px; font-size: 0.92rem; line-height: 2; }
.site-footer__address a { text-decoration: none; }
.site-footer__licence { margin-top: 12px; font-size: 0.78rem; color: var(--ink-sub); line-height: 1.9; }
.site-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.site-footer__nav h2 {
  font-family: var(--font-serif); font-size: var(--fs-eyebrow); letter-spacing: 0.22em; color: var(--c-deepest);
  margin-bottom: 12px;
}
.site-footer__nav li { font-size: 0.92rem; line-height: 2.1; }
.site-footer__nav a { text-decoration: none; }
.site-footer__nav a:hover { color: var(--c-deepest); }
.site-footer__copy { margin-top: 28px; font-size: 0.78rem; color: var(--ink-sub); letter-spacing: 0.08em; }

@media (max-width: 760px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 24px; }
  .site-footer__a { width: 96px; }
  .site-footer__cols { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- 濃色の面: トークンを面の中だけ差し替え、文字と罫を反転させる ----------
   フッターと、セクション単位の濃色面（.section--dark / .section--figure）、
   下層ページのヘッダー帯（.page-head--figure）で共通。
   墨 #1b1b1e 地でのコントラスト: 本文 14.6:1 ／ 副文 7.0:1 ／ eyebrow と漢数字 5.6:1。 */
.site-footer,
.section--dark,
.section--figure,
.page-head--figure {
  --ink: var(--ink-on-dark);
  --ink-sub: var(--ink-sub-on-dark);
  --c-deep: var(--c-hanezu-light);
  --c-deepest: var(--c-hanezu-light);
  --rule: rgba(239, 236, 230, 0.18);
  --rule-soft: rgba(239, 236, 230, 0.1);
  --btn-fill-bg: var(--c-hanezu);
  --btn-fill-hover: #8d2d24;
  background: var(--bg-dark);
  color: var(--ink-on-dark);
}
.site-footer { border-top: none; }
/* 濃色面は輪郭ボタンのホバーも白文字にする（白×朱 4.9:1。生成りだと 4.2:1 で足りない） */
.site-footer .btn:hover, .site-footer .btn:focus-visible,
.section--dark .btn:hover, .section--dark .btn:focus-visible,
.section--figure .btn:hover, .section--figure .btn:focus-visible,
.page-head--figure .btn:hover, .page-head--figure .btn:focus-visible { color: #fff; }

/* CTA帯の背景画像（任意）。--footer-figure が無ければ墨の面のままで成立する */
.site-footer::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--footer-figure, none);
  background-size: cover; background-position: center;
  opacity: 0.22;
}
.site-footer__inner { position: relative; z-index: 1; }

/* ---------- 水引（Signature）: A の横棒がほどけて一本の線になり、フッターの A で結ばれる ---------- */
.cord {
  position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none;
  width: 100%; height: 0; overflow: visible;
}
.cord__path {
  fill: none; stroke: var(--c-hanezu); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transition: opacity 0.6s;
  /* 朱がにじむ。紙の上では墨が滲んだように、濃色の面では光って見える */
  filter: drop-shadow(0 0 2px rgba(var(--brand-rgb), 0.5)) drop-shadow(0 0 9px rgba(var(--brand-rgb), 0.28));
}
.cord.is-ready .cord__path { opacity: 1; }
.mark__bar { transform-box: fill-box; transform-origin: right center; }
@media (max-width: 860px) { .cord__path { stroke-width: 1; } }

/* ---------- 出現（控えめ） ---------- */
.reveal {
  opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}