/* 白河於徒弥 公式サイト｜トップページ専用
   境目が形を持つ面の重なり。色は各事業サイトの実測色から。 */

@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:#8a867e;
  --shu:#b3301e;

  --abesan:#19448e;      /* arigatou-abesan.com  key-color 実測 */
  --mimizu:#ddeacd;      /* niigatamimizu.com    key-color 実測 */
  --mimizu-ink:#3d5a2a;
  --shukyaku:#fbd206;    /* benriya-shukyaku     --key 実測 */
  --shukyaku-pale:#fff0a5;
  --coaching:#1c2351;    /* niigata-coaching     --ink 実測 */
  --coaching-paper:#f2ecdf;
  --coaching-acc:#b95f28;

  --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;
  --arc:clamp(44px,8vw,110px);
}

*,*::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;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}
:focus-visible{outline:3px solid var(--shu);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);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}
.hd__name::before{content:"";inline-size:.62em;block-size:.62em;border-radius:50%;background:var(--shu)}
.hd__role{color:var(--sumi-2)}

/* ---------- 扉 ---------- */
.gate{position:relative;overflow:clip;padding-block:clamp(6.5rem,15vh,9rem) 0;background:var(--paper)}
.gate__in{position:relative;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:1fr;gap:0}
.gate__label{color:var(--sumi-2);margin-block-end:1.4rem}
.gate__h1{
  position:relative;z-index:3;font-weight:900;line-height:1.42;letter-spacing:.02em;
  font-size:clamp(1.55rem,7.1vw,3.5rem);
}
.u{display:inline-block}
.gate__h1 .ln{display:block}
.gate__h1 .ln + .ln{margin-inline-start:.9em}
.mk{background-image:linear-gradient(transparent 62%,rgba(179,48,30,.42) 62%,rgba(179,48,30,.42) 92%,transparent 92%);padding-inline:.06em}
.gate__stage{position:relative;z-index:2;margin-block-start:clamp(1rem,3vw,2rem);display:grid;justify-items:center}
.gate__disc{
  position:absolute;inset-inline:0;inset-block-end:0;margin-inline:auto;
  inline-size:min(80%,420px);block-size:74%;border-radius:999px 999px 0 0;background:var(--shu);
}
.gate__word{
  position:absolute;inset-inline:0;inset-block-end:58%;z-index:0;text-align:center;white-space:nowrap;
  font-family:var(--f-en);font-weight:900;font-stretch:118%;letter-spacing:-.02em;line-height:.8;
  font-size:min(10.5vw,150px);color:rgba(28,27,25,.07);pointer-events:none;
}
.gate__photo{position:relative;z-index:2;inline-size:min(86%,440px)}
.gate__photo img{inline-size:100%;margin-block-end:-6px}
.seal{
  position:absolute;z-index:4;inset-inline-end:clamp(.2rem,4vw,5rem);inset-block-start:clamp(.5rem,5vw,3rem);
  inline-size:clamp(92px,21vw,138px);aspect-ratio:1;border-radius:50%;background:var(--sumi);color:var(--paper);
  display:grid;place-items:center;text-align:center;transform:rotate(9deg);
  font-weight:900;font-size:clamp(.72rem,2vw,.92rem);line-height:1.5;letter-spacing:.04em;
}
.seal small{display:block;font-family:var(--f-en);font-weight:700;font-size:.58em;letter-spacing:.18em;opacity:.75;margin-block-start:.2em}
.gate__name{
  position:absolute;z-index:4;left:0;top:clamp(1rem,4vw,2rem);
  writing-mode:vertical-rl;font-weight:900;letter-spacing:.34em;font-size:clamp(.95rem,2.4vw,1.25rem);
  background:var(--paper);padding:.9em .45em;border-radius:999px;
}

/* ---------- 流れる帯 ---------- */
.band{position:relative;z-index:5;background:var(--sumi);color:var(--paper);overflow:clip;padding-block:.95rem;transform:rotate(-1.6deg) scale(1.03);margin-block:-1.1rem -1.1rem}
.band__track{display:flex;inline-size:max-content;gap:0;animation:band 38s linear infinite}
.band__track span{display:inline-flex;align-items:center;white-space:nowrap;font-weight:900;font-size:clamp(1rem,3vw,1.5rem);letter-spacing:.12em}
.band__track span::after{content:"";inline-size:.7em;block-size:.7em;border-radius:50%;background:var(--shu);margin-inline:1.3em}
@keyframes band{to{transform:translateX(-50%)}}

/* ---------- 面（境目が形を持つ） ---------- */
.pane{
  position:relative;z-index:1;overflow:clip;
  padding-block:calc(var(--arc) * 1.5 + clamp(2.6rem,7vw,5rem)) calc(var(--arc) * 1.5 + clamp(3.6rem,9vw,7rem));
  margin-block-start:calc(var(--arc) * -1.5);
  background:var(--pane-bg,var(--white));color:var(--pane-fg,var(--sumi));
}
.pane--hill{border-radius:50% 50% 0 0 / var(--arc) var(--arc) 0 0}
.pane--left{border-radius:0 100% 0 0 / 0 calc(var(--arc) * 1.5) 0 0}
.pane--right{border-radius:100% 0 0 0 / calc(var(--arc) * 1.5) 0 0 0}
.pane--tab{border-radius:calc(var(--arc) * .9) calc(var(--arc) * .9) 0 0}

.pane__word{
  position:absolute;inset-inline-start:-2vw;inset-block-start:calc(var(--arc) * 1.5);z-index:0;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.4rem,19vw,14rem);color:var(--pane-word,rgba(28,27,25,.06));
}
.pane__in{position:relative;z-index:1;display:grid;gap:clamp(2.2rem,6vw,4rem);align-items:center}
.pane__body{position:relative;z-index:2}
.shot__frame{z-index:1}
.pane__no{display:flex;align-items:center;gap:.9em;color:var(--pane-acc,var(--shu));margin-block-end:1.1rem}
.pane__no::after{content:"";inline-size:2.6em;block-size:2px;background:currentColor}
.pane__h{font-weight:900;line-height:1.4;letter-spacing:.03em;font-size:clamp(1.9rem,6.6vw,3.4rem)}
.pane__sub{font-weight:700;font-size:clamp(1rem,2.6vw,1.2rem);margin-block-start:.5rem;color:var(--pane-acc,var(--shu))}
.pane__lead{margin-block-start:1.5rem;max-inline-size:32em}
.pane__lead + .pane__lead{margin-block-start:1rem}

.tag{
  display:inline-flex;align-items:center;gap:.5em;margin-block-end:1.2rem;
  background:var(--shukyaku);color:var(--sumi);font-weight:900;font-size:.82rem;letter-spacing:.2em;
  padding:.35em 1.1em .35em 1em;border-radius:999px;transform:rotate(-3deg);
}
.tag::before{content:"";inline-size:.55em;block-size:.55em;border-radius:50%;background:var(--sumi)}

.rows{list-style:none;margin:2rem 0 0;padding:0;max-inline-size:30em;border-block-start:1px solid var(--pane-line,rgba(28,27,25,.22))}
.rows li{display:flex;justify-content:space-between;gap:1rem;padding:.85rem .1rem;border-block-end:1px solid var(--pane-line,rgba(28,27,25,.22));font-size:.92rem}
.rows li span:first-child{opacity:.72}
.rows li span:last-child{font-weight:700;text-align:end}

.btn{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-block-start:2rem;max-inline-size:30em;
  background:var(--btn-bg,var(--sumi));color:var(--btn-fg,var(--paper));text-decoration:none;
  font-weight:900;font-size:.98rem;letter-spacing:.08em;padding:1.15rem 1.6rem;border-radius:999px;
  transition:transform .25s ease;
}
.btn::after{content:"";flex:none;inline-size:.62em;block-size:.62em;border-block-start:2.5px solid currentColor;border-inline-end:2.5px solid currentColor;transform:rotate(45deg);margin-inline-end:.3em}
.btn:hover{transform:translateY(-3px)}

/* 実物のサイト画面 */
.shot{position:relative;justify-self:center;inline-size:min(64%,300px);aspect-ratio:390/700;margin-block:1rem}
.shot__disc{position:absolute;z-index:0;inset:50% auto auto 50%;inline-size:150%;aspect-ratio:1;border-radius:50%;background:var(--shot-disc,rgba(28,27,25,.06));transform:translate(-50%,-50%)}
.shot__frame{
  position:relative;block-size:100%;border-radius:clamp(22px,4vw,34px);overflow:hidden;background:#fff;
  border:7px solid var(--sumi);box-shadow:0 26px 50px -18px rgba(0,0,0,.45);transform:rotate(var(--tilt,-5deg));
}
.shot__frame img{inline-size:100%;block-size:100%;object-fit:cover;object-position:top}

/* 横長の写真（スマホ枠でなく実写を置く面） */
.shot--wide{inline-size:min(100%,560px);aspect-ratio:16/9}
.shot--wide .shot__frame{
  border:0;border-radius:clamp(16px,3vw,24px);
  box-shadow:0 22px 44px -20px rgba(0,0,0,.42);
  transform:none;                       /* 左右に揺らさない */
}
.shot--wide .shot__frame img{object-position:center}
.shot--wide .shot__disc{inline-size:118%}

/* 帯のように平たい写真（ロゴ・バナー）。16:9で切ると上下が欠けるので実寸に合わせる */
.shot--band{aspect-ratio:auto}
.shot--band .shot__frame{block-size:auto}
.shot--band .shot__frame img{block-size:auto;aspect-ratio:auto}
.shot--band .shot__disc{inline-size:min(88%,420px);inset-block-start:50%}
.shot--band{inline-size:min(100%,560px)}

/* 面ごとの色 */
.pane--consult{--pane-bg:var(--sumi);--pane-fg:#efeae0;--pane-word:rgba(255,255,255,.06);--pane-acc:#e58a78;--pane-line:rgba(255,255,255,.22);--btn-bg:#efeae0;--btn-fg:var(--sumi)}
.pane--abesan{--pane-bg:var(--abesan);--pane-fg:#fff;--pane-word:rgba(255,255,255,.08);--pane-acc:var(--shukyaku);--pane-line:rgba(255,255,255,.3);--btn-bg:#fff;--btn-fg:var(--abesan);--shot-disc:rgba(255,255,255,.1)}
.pane--mimizu{--pane-bg:var(--mimizu);--pane-word:rgba(61,90,42,.1);--pane-acc:var(--mimizu-ink);--btn-bg:var(--mimizu-ink);--btn-fg:#fff;--shot-disc:rgba(61,90,42,.14)}
.pane--shukyaku{--pane-bg:var(--shukyaku-pale);--pane-word:rgba(28,27,25,.07);--pane-acc:#8a6a00;--shot-disc:rgba(251,210,6,.55)}
.pane--coaching{--pane-bg:var(--coaching-paper);--pane-fg:var(--coaching);--pane-word:rgba(28,35,81,.07);--pane-acc:var(--coaching-acc);--pane-line:rgba(28,35,81,.22);--btn-bg:var(--coaching);--btn-fg:#fff;--shot-disc:rgba(28,35,81,.1)}
.pane--ai{--pane-bg:#f4f4f2;--pane-fg:#0a0a0a;--pane-word:rgba(10,10,10,.07);--pane-acc:#e2361a;--pane-line:rgba(10,10,10,.22);--btn-bg:#0a0a0a;--btn-fg:#fff;--shot-disc:rgba(226,54,26,.16)}
.pane--abesan .pane__h{font-size:clamp(2.3rem,8.4vw,4.6rem)}
.pane--abesan .shot{inline-size:min(72%,340px)}
.pane--abesan .shot--wide{inline-size:min(100%,560px)}

/* ---------- メディア一覧 ---------- */
.kazu{--pane-bg:var(--white)}
.kazu__h{font-weight:900;font-size:clamp(1.5rem,5vw,2.3rem);line-height:1.5;margin-block-end:clamp(1.8rem,5vw,2.8rem)}
.kazu__list{margin:0;padding:0;display:grid;gap:0;border-block-start:2px solid var(--sumi)}
.kazu__list > div{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;padding-block:1.15rem;border-block-end:1px solid rgba(28,27,25,.2)}
.kazu__list dt{font-family:var(--f-en);font-weight:900;font-stretch:112%;font-size:clamp(2rem,7vw,2.9rem);line-height:1;letter-spacing:-.01em;margin:0;flex:none}
.kazu__list dt small{font-family:var(--f-jp);font-weight:900;font-size:.36em;letter-spacing:.06em;margin-inline-start:.25em}
.kazu__list dd{margin:0;font-size:.92rem;color:var(--sumi-2);text-align:end}
.media__list{list-style:none;margin:2.2rem 0 0;padding:0;border-block-start:2px solid var(--sumi)}
.media__list li{display:grid;grid-template-columns:1fr;gap:.5rem;padding:1.15rem .1rem;border-block-end:1px solid rgba(28,27,25,.2)}
.media__list b{font-weight:900;font-size:1rem}
.media__links{display:flex;flex-wrap:wrap;gap:.5rem}
.media__links a{
  text-decoration:none;font-family:var(--f-en);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  border:1.5px solid var(--sumi);border-radius:999px;padding:.42rem 1rem;transition:background .2s,color .2s;
}
.media__links a:hover{background:var(--sumi);color:var(--paper)}

/* ---------- 結び・足元 ---------- */
.end{--pane-bg:var(--sumi);--pane-fg:var(--paper);text-align:center;padding-block-end:clamp(2.4rem,6vw,4rem)}
.end__copy{font-weight:700;font-size:clamp(1rem,3.2vw,1.3rem);line-height:2}
.end__name{
  margin-block-start:clamp(1.6rem,5vw,3rem);font-weight:900;line-height:1.1;letter-spacing:.06em;
  font-size:clamp(3rem,15.5vw,11rem);color:var(--paper);
}
.end__role{margin-block-start:1rem;color:#e58a78}
.end__tools{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-block-start:clamp(2.4rem,6vw,4rem)}
.pill{
  font:inherit;font-weight:700;font-size:.84rem;letter-spacing:.1em;color:var(--paper);background:none;cursor:pointer;text-decoration:none;
  border:1.5px solid rgba(244,241,234,.5);border-radius:999px;padding:.6rem 1.4rem;
}
.pill:hover{background:var(--paper);color:var(--sumi)}
.ft{margin-block-start:clamp(2.6rem,7vw,4.5rem);padding-block-start:1.6rem;border-block-start:1px solid rgba(244,241,234,.2);display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem;font-size:.78rem;color:rgba(244,241,234,.7)}
.ft a{text-decoration:none}
.ft a:hover{text-decoration:underline}

/* ---------- 広い画面 ---------- */
/* ---------- 狭い画面（スマホ）。860px未満で効く ---------- */
@media (max-width:640px){
  /* ヘッダー：3つ並べると折れるので、英字を隠して2つにする */
  .hd__role{display:none}
  .hd__in{padding:1rem var(--gutter);gap:.7rem}
  .hd__name{font-size:.92rem;letter-spacing:.14em;white-space:nowrap}
  .hd__name::before{inline-size:.5em;block-size:.5em}
  .hd__cta{font-size:.72rem;letter-spacing:.06em;padding:.45rem .9rem;white-space:nowrap;flex:none}

  /* 見出し：画面幅で詰める */
  .gate{padding-block-start:clamp(5rem,13vh,6.5rem)}
  .gate__label{font-size:.68rem;letter-spacing:.14em;margin-block-end:1rem}
  .gate__h1{font-size:clamp(1.35rem,6vw,1.8rem)}
  .gate__h1 .ln + .ln{margin-inline-start:.6em}





  /* 流れる帯：文字を小さく */
  .band__track span{font-size:.92rem;letter-spacing:.08em}
}

/* ---------- スマホ・タブレット：HEROを1画面に収め、重ならない配置にする ---------- */
@media (max-width:859px){
  /* 写真：腕組みの下で切る（お腹から下を出さない） */
  .gate{--ph:min((100vw - var(--gutter) * 2) * .64, 320px)}
  .gate__stage{margin-block-start:clamp(1.6rem,6vw,2.4rem)}
  .gate__photo{inline-size:var(--ph);margin-inline:auto;aspect-ratio:900/1060;overflow:hidden}
  .gate__photo img{block-size:100%;object-fit:cover;object-position:50% 0;margin-block-end:0}
  .gate__disc{inline-size:calc(var(--ph) * 1.12);block-size:66%}
  /* 背景の英字：首と肩の後ろに置く（写真に隠れてよい） */
  .gate__word{font-size:12.6vw;letter-spacing:-.04em;inset-block-end:auto;inset-inline:calc(var(--gutter) * -1);text-align:center;color:rgba(28,27,25,.1);
    inset-block-start:calc(var(--ph) * 1.178 * .33 - 5vw)}
  /* 縦書きの名前：写真の左下 */
  .gate__name{left:0;top:auto;bottom:1rem;font-size:.82rem;letter-spacing:.26em;padding:.8em .38em}
  /* 印：写真の右下 */
  .seal{inline-size:clamp(72px,18vw,100px);font-size:.64rem;inset-inline-end:0;inset-block-start:auto;inset-block-end:6%}
}

@media (min-width:860px){
  .gate{padding-block-start:clamp(7rem,11vw,9.5rem)}
  .gate__in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end}
  .gate__h1{font-size:clamp(2.2rem,3.5vw,3.1rem)}
  .gate__copy{align-self:center;padding-block-end:clamp(5rem,9vw,8rem)}
  .gate__stage{margin-block-start:0}
  .gate__photo{inline-size:100%}
  .gate__disc{inline-size:92%}
  .gate__word{inset-inline:auto 0;text-align:right;inset-block-end:62%;font-size:min(10.5vw,150px)}
  .gate__name{left:auto;right:-2.6rem;top:auto;bottom:clamp(5rem,9vw,8rem)}
  .seal{inset-inline-end:auto;inset-inline-start:-3rem;inset-block-start:4rem}
  .pane__h{font-size:clamp(2.2rem,3.6vw,3rem)}
  .kazu__list{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,4rem)}
  .kazu__list > div:nth-child(2){border-block-start:0}
  .pane--abesan .pane__h{font-size:clamp(3rem,5.4vw,4.6rem)}
  .pane__in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .pane--flip .pane__body{order:2}
  .pane--consult .pane__in{grid-template-columns:1fr}
  .media__list li{grid-template-columns:minmax(0,1fr) auto;align-items:center}
}

/* ---------- 動き（スクロール連動）。対応ブラウザだけ・止められる ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .shot:not(.shot--wide) .shot__frame{animation:tilt linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .shot__disc{animation:grow linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
    .pane__word{animation:drift linear both;animation-timeline:view();animation-range:cover 15% cover 85%}
    .pane__body > *{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    .gate__photo{animation:sink linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  }
}
@keyframes tilt{from{transform:rotate(-11deg) translateY(36px)}to{transform:rotate(7deg) translateY(-36px)}}
@keyframes grow{from{transform:translate(-50%,-50%) scale(.55)}to{transform:translate(-50%,-50%) scale(1)}}
@keyframes drift{from{transform:translateX(5%)}to{transform:translateX(-9%)}}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes spin{from{transform:rotate(9deg)}to{transform:rotate(200deg)}}
@keyframes sink{to{transform:translateY(7%)}}

html.still .band__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .band__track{animation:none}
}

.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;
}
.end__cta{
  display:inline-flex;align-items:center;gap:1.1rem;margin-block-start:clamp(2.2rem,6vw,3.4rem);
  background:var(--paper);color:var(--sumi);text-decoration:none;
  font-weight:900;font-size:1rem;letter-spacing:.1em;padding:1.1rem 2.2rem;border-radius:999px;transition:transform .25s ease;
}