/* 白河於徒弥 公式サイト｜事業の詳細ページ
   トップ（top.css）と同じ言語。面の色だけ事業ごとに差し替える。 */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Archivo:wdth,wght@100..125,600..900&display=swap');

:root{
  --paper:#f4f1ea;
  --white:#fbfaf7;
  --sumi:#1c1b19;
  --sumi-2:#4a4844;
  --sumi-3:#736f68;
  --shu:#b3301e;

  --abesan:#19448e;
  --mimizu:#ddeacd;
  --mimizu-ink:#3d5a2a;
  --shukyaku:#fbd206;
  --shukyaku-pale:#fff0a5;
  --coaching:#1c2351;
  --coaching-paper:#f2ecdf;
  --coaching-acc:#9c4a17;

  --f-jp:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --f-en:"Archivo","Helvetica Neue",Arial,sans-serif;

  --gutter:clamp(1.4rem,5.5vw,4rem);
  --maxw:1160px;
  --read:40em;
  --arc:clamp(44px,8vw,110px);

  --key:var(--sumi);       /* 事業ごとに差し替える */
  --key-fg:var(--paper);
  --acc:var(--shu);
  --tint:var(--white);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--sumi);
  font-family:var(--f-jp);font-weight:500;font-size:clamp(15px,.6vw + 13px,17px);
  line-height:2.05;letter-spacing:.04em;font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
.u{display:inline-block}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.read{max-width:calc(var(--read) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.en{font-family:var(--f-en);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem}

/* ---------- ヘッダー ---------- */
.hd{position:absolute;inset:0 0 auto 0;z-index:30}
.hd__in{max-width:var(--maxw);margin-inline:auto;padding:1.3rem var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.hd__name{font-weight:900;font-size:1.05rem;letter-spacing:.22em;text-decoration:none;display:flex;align-items:center;gap:.6em;color:var(--sumi)}
/* 名前の横の丸はロゴ＝どのページでも朱で固定。ページの色に連動させない（2026-09-24 おとさん） */
.hd__name::before{content:"";inline-size:.62em;block-size:.62em;border-radius:50%;background:var(--shu)}
.hd__role{color:var(--sumi-2)}
.hd__cta{
  font-weight:900;font-size:.82rem;letter-spacing:.12em;text-decoration:none;color:inherit;
  border:1.5px solid currentColor;border-radius:999px;padding:.5rem 1.2rem;transition:background .2s,color .2s;
}
.hd__cta:hover{background:var(--sumi);color:var(--paper)}

/* ---------- 扉 ---------- */
.top{
  position:relative;overflow:clip;background:var(--top-bg,var(--paper));color:var(--top-fg,var(--sumi));
  padding-block:clamp(6.5rem,15vw,9rem) calc(var(--arc) + clamp(4.6rem,20vw,15rem) * .85 + clamp(2rem,5vw,3.5rem));  /* 背景英字が本文と重ならない帯を下に取る（2026-09-24） */
}
.top__word{
  position:absolute;inset-inline-start:-3vw;inset-block-end:var(--arc);z-index:0;  /* 次の段の弧に隠れない高さ（2026-09-24） */
  white-space:nowrap;pointer-events:none;
  font-family:var(--f-en);font-weight:900;font-stretch:118%;letter-spacing:-.02em;line-height:.85;
  font-size:clamp(4.6rem,20vw,15rem);color:rgba(28,27,25,.07);
}
.top__in{position:relative;z-index:1;display:grid;gap:clamp(1.8rem,5vw,3rem);align-items:center}
.top__back{display:inline-flex;align-items:center;gap:.6em;font-weight:700;font-size:.86rem;letter-spacing:.1em;text-decoration:none;opacity:.8;margin-block-end:1.6rem}
.top__back::before{content:"";inline-size:.5em;block-size:.5em;border-block-start:2.5px solid currentColor;border-inline-start:2.5px solid currentColor;transform:rotate(-45deg)}
.top__back:hover{opacity:1}
.top__h1{font-weight:900;line-height:1.38;letter-spacing:.03em;font-size:clamp(2.1rem,7.4vw,3.8rem)}
.top__sub{font-weight:700;font-size:clamp(1rem,2.8vw,1.25rem);margin-block-start:.7rem;color:var(--acc)}
.top__lead{margin-block-start:1.6rem;max-inline-size:32em;opacity:.92}
.top__pic{justify-self:center;inline-size:100%;max-inline-size:560px}
.top__pic img{border-radius:18px;box-shadow:0 18px 40px -20px rgba(0,0,0,.5)}

/* ---------- 本文 ---------- */
.body{position:relative;background:var(--paper);margin-block-start:calc(var(--arc) * -1);border-radius:50% 50% 0 0 / var(--arc) var(--arc) 0 0;padding-block:calc(var(--arc) + clamp(2.6rem,6vw,4.5rem)) clamp(3rem,7vw,5rem)}
.sec{margin-block-start:clamp(2.6rem,7vw,4.5rem)}
.sec:first-child{margin-block-start:0}
.sec__h{font-weight:900;font-size:clamp(1.35rem,4.4vw,1.9rem);line-height:1.5;letter-spacing:.03em;padding-block-end:.7rem;border-block-end:2px solid var(--key)}
.sec p{margin-block-start:1.2rem}
.sec p strong{font-weight:900;background-image:linear-gradient(transparent 62%,color-mix(in srgb,var(--acc) 34%,transparent) 62%)}

/* 年表 */
.steps{list-style:none;margin:1.8rem 0 0;padding:0}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:0 1.2rem;padding-block:1rem;border-block-start:1px solid rgba(28,27,25,.18)}
.steps li:last-child{border-block-end:1px solid rgba(28,27,25,.18)}
.steps b{font-family:var(--f-en);font-weight:800;font-size:.9rem;letter-spacing:.06em;color:var(--acc);padding-block-start:.35em;min-inline-size:4.5em}

/* 引用（おとさんの言葉） */
.quote{margin-block-start:1.8rem;padding:1.4rem 1.5rem;background:var(--tint);border-inline-start:4px solid var(--acc);border-radius:0 12px 12px 0;font-weight:700}

/* 出口 */
.links{margin-block-start:clamp(2.6rem,7vw,4.5rem)}
.links__h{font-weight:900;font-size:1.05rem;margin-block-end:1rem}
.links__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem}
.links__list a{
  display:inline-flex;align-items:center;gap:.7em;text-decoration:none;font-weight:700;font-size:.92rem;
  border:1.5px solid var(--sumi);border-radius:999px;padding:.7rem 1.3rem;transition:background .2s,color .2s;
}
.links__list a::after{content:"";inline-size:.45em;block-size:.45em;border-block-start:2px solid currentColor;border-inline-end:2px solid currentColor;transform:rotate(45deg)}
.links__list a:hover{background:var(--sumi);color:var(--paper)}

/* 足元 */
.ft{margin-block-start:clamp(3rem,8vw,5rem);padding-block-start:1.6rem;border-block-start:1px solid rgba(28,27,25,.18);display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.78rem;color:var(--sumi-3)}
.ft a{text-decoration:none}
.ft a:hover{text-decoration:underline}

/* 事業ごとの色 */
/* 事業ごとの色は「見出しの線」と「マーカー」だけ。土台はトップと同じ紙。 */
/* 下層は全ページ、トップと同じ色（墨・朱・生成り）。事業ごとの色に染めない（2026-09-24 おとさん） */
.w-benriya,.w-mimizu,.w-shukyaku,.w-coaching,.w-consult,.w-profile{--key:var(--sumi);--acc:var(--shu);--tint:#f0ece3}

/* おとさん本人が書く場所。中身が入るまで印を出しておく */
.sec--philosophy .pending{
  color:var(--sumi-3);font-weight:700;letter-spacing:.06em;
  border:1.5px dashed rgba(28,27,25,.25);border-radius:14px;
  padding:1.6rem;text-align:center;margin-block-start:1.4rem;
}

/* 事業名の上に細く色の帯を敷いて、どの事業かを一目で示す */
.top__sub{color:var(--acc)}

@media (min-width:860px){
  .top__in--wide{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .top__h1{font-size:clamp(2.4rem,4vw,3.4rem)}
}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .sec > *,.links > *{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* フォームのボット除け（人には見せない） */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* パンくずリスト（見た目は従来の「戻る」リンクを踏襲） */
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;list-style:none;margin:0;padding:0}
.crumb li{display:inline-flex;align-items:center;gap:.5em}
.crumb li+li::before{content:"/";opacity:.5}
.crumb a{text-decoration:none;color:inherit}
.crumb a:hover{text-decoration:underline}
.crumb [aria-current="page"]{opacity:.75;font-weight:500}

/* ブログ記事用（_templates/article.html） */
.art__date{font-size:.85rem;opacity:.7;margin-block:.4rem 0}
.art h3{font-size:1.15rem;margin-block:2.2rem .8rem;padding-inline-start:.7em;border-inline-start:4px solid var(--key,currentColor)}
.art figure{margin:2rem 0}
.art figure img{inline-size:100%;block-size:auto;border-radius:12px}
.art figcaption{font-size:.82rem;opacity:.7;margin-block-start:.5rem}
.toc{background:rgba(0,0,0,.035);border-radius:14px;padding:1.2rem 1.4rem;margin-block-end:2.5rem}
.toc__h{font-weight:700;margin:0 0 .5rem}
.toc ol{margin:0;padding-inline-start:1.3em}
.toc a{color:inherit}