@charset "utf-8";
/* ============ トークン ============ */
:root{
  --brand-yellow:#FFD900;
  --brand-yellow-pale:#FFF6C9;
  --sumi:#2B2B2B;
  --ink:#2B2B2B;
  --ink-sub:#555555;
  --ink-note:#2B2B2B;
  --accent-red:#E0453C;
  --accent-blue:#2F4E9E;
  --surface:#FFFFFF;
  --alt:#FAFAF8;
  --rule:#DDDDDD;
  --rule-strong:#C9C9C9;
  --divider:#E5E5E5;
  --photo-bg:#F5F5F0;
  --fs-h1:34px; --fs-h2:26px; --fs-h3:21px; --fs-body:16px; --fs-note:14px;
  --sp-1:8px; --sp-2:13px; --sp-3:21px; --sp-4:34px; --sp-5:55px; --sp-6:89px; --sp-7:144px;
  --font:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
  --logo:url("../assets/img/logo_flag.png");

  /* --- レスポンシブ用の可変トークン --- */
  --wrap-max:1160px;
  --wrap-pad:var(--sp-3);
  --sec-pad:var(--sp-5);
  --fv-h:640px;
  --band-h:200px;
  --closing-h:280px;
  --fs-lead:var(--fs-body);
  --fs-catch:22px;
  --fs-sec-head:20px;
  --fs-band-text:20px;
  --fs-card-title:18px;
  --fs-card-label:var(--fs-note);
  --fs-plan-title:var(--fs-body);
  --fs-pillar:var(--fs-body);
  --fs-contact-org:18px;
  --fs-contact-tel:18px;
  --fs-contact-site:var(--fs-note);
  --fs-closing:22px;
  --logo-fv:280px;
  --logo-closing:210px;
  --shots-ratio:348/330;
  --shot-size:60.34%;
  --shot2-left:39.66%;
  --shot2-top:33.33%;
  --pillar-no:30px;
  --pillar-pad:var(--sp-2);
  --plan-cover-w:84px;
  --plan-cover-h:119px;

  /* --- アニメーション --- */
  --fade-dur:.7s;
  --fade-ease:cubic-bezier(.22,.61,.36,1);
  --fade-shift:16px;
}

@media (min-width:768px){
  :root{
    --wrap-pad:var(--sp-5);
    --sec-pad:var(--sp-6);
    --fv-h:820px;
    --band-h:300px;
    --closing-h:400px;
    --fs-lead:clamp(var(--fs-body), 1.45vw, 20px);
    --fs-catch:clamp(24px, 2.45vw, var(--fs-h1));
    --fs-sec-head:clamp(22px, 1.95vw, var(--fs-h2));
    --fs-band-text:clamp(22px, 2.3vw, 32px);
    --fs-card-title:clamp(18px, 1.55vw, var(--fs-h3));
    --fs-card-label:var(--fs-body);
    --fs-plan-title:clamp(17px, 1.3vw, 18px);
    --fs-pillar:clamp(var(--fs-body), 1.2vw, 17px);
    --fs-contact-org:clamp(19px, 1.5vw, var(--fs-h3));
    --fs-contact-tel:clamp(19px, 1.5vw, var(--fs-h3));
    --fs-contact-site:var(--fs-body);
    --fs-closing:clamp(24px, 2.45vw, var(--fs-h1));
    --logo-fv:clamp(300px, 31vw, 440px);
    --logo-closing:clamp(220px, 20vw, 290px);
    --shots-ratio:540/430;
    --shot-size:51.85%;
    --shot2-left:44.44%;
    --shot2-top:34.88%;
    --pillar-no:34px;
    --pillar-pad:var(--sp-2) var(--sp-3);
    --plan-cover-w:104px;
    --plan-cover-h:147px;
  }
}

/* ============ ベース ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--surface);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}

/* スクリーンリーダー専用 */
.a11y-note{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* SP専用の改行（PCでは無効化） */
@media (min-width:768px){ .br-sp{display:none} }

.wrap{width:100%;max-width:calc(var(--wrap-max) + var(--wrap-pad) * 2);
  margin-inline:auto;padding-inline:var(--wrap-pad)}
.sec{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)}
.sec--white{background:var(--surface)}
.sec--alt{background:var(--alt)}
.sec__head{font-weight:900;color:var(--sumi);letter-spacing:.02em;font-size:var(--fs-sec-head);line-height:1.5}
.sec__head--c{text-align:center}
.body{color:var(--ink);line-height:1.95;font-size:var(--fs-body)}
.note{color:var(--ink-note);line-height:1.85;font-size:var(--fs-note)}

.logo-mark{background-image:var(--logo);background-size:contain;background-repeat:no-repeat;
  background-position:center;aspect-ratio:1564/762;display:block;margin-inline:auto;max-width:100%}

/* ============ 1. FV ============ */
.fv{position:relative;overflow:hidden;background:var(--sumi);
  min-height:var(--fv-h);display:flex;align-items:center}
.fv__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left 40%;display:block}
.fv__veil{position:absolute;inset:0;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--sumi) 10%, transparent) 0%,
    color-mix(in srgb, var(--sumi) 28%, transparent) 42%,
    color-mix(in srgb, var(--sumi) 82%, transparent) 100%)}
.fv__inner{position:relative;width:100%;text-align:center;
  padding:var(--sp-5) var(--sp-3)}
.lead{color:var(--surface);font-weight:700;display:block;
  font-size:var(--fs-lead);margin-bottom:var(--sp-2)}
.catch{color:var(--surface);font-weight:900;line-height:1.5;letter-spacing:.01em;
  font-size:var(--fs-catch);margin-bottom:var(--sp-3)}
.fv .logo-mark{width:var(--logo-fv)}

@media (min-width:768px){
  .fv__inner{padding:var(--sp-6) var(--sp-5)}
  .lead{margin-bottom:var(--sp-3)}
  .catch{margin-bottom:var(--sp-4)}
}

/* ============ 2. ABOUT① ============ */
.about1__inner{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
.about1__col{flex:1 1 380px;min-width:0}
.about1 .sec__head{margin-bottom:var(--sp-3)}
.about1 .body{margin-bottom:var(--sp-4)}
.shots{position:relative;flex:1 1 420px;width:100%;max-width:540px;margin-inline:auto;
  aspect-ratio:var(--shots-ratio)}
.shots img{position:absolute;display:block;object-fit:cover;border:1px solid var(--rule-strong);
  width:var(--shot-size);aspect-ratio:1;height:auto}
.shots img:first-child{left:0;top:0}
.shots img:last-child{left:var(--shot2-left);top:var(--shot2-top)}

@media (min-width:768px){
  .about1__inner{gap:var(--sp-5)}
  .about1 .sec__head{margin-bottom:var(--sp-4)}
  .about1 .body{margin-bottom:0}
  .shots img:first-child{left:7.4%}
}

/* ============ 3. ABOUT② ビジョン帯・6つの柱 ============ */
.about2 .sec__head{margin-bottom:var(--sp-3)}
.about2__lede{max-width:900px;margin-inline:auto}
@media (min-width:768px){
  .about2 .sec__head{margin-bottom:var(--sp-4)}
}

.band{position:relative;overflow:hidden;background:var(--sumi);
  display:flex;align-items:center;min-height:var(--band-h);
  padding:var(--sp-4) var(--sp-3)}
.band--vision{margin-top:var(--sp-4)}
.band__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.band__img--basin{object-position:center 62%}
.band__img--closing{object-position:center 58%}
.band__veil{position:absolute;inset:0;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--sumi) 66%, transparent) 0%, color-mix(in srgb, var(--sumi) 60%, transparent) 100%)}
.band__inner{position:relative;width:100%;text-align:center}
.band__label{color:var(--surface);font-size:var(--fs-note);font-weight:700;letter-spacing:.18em;
  display:block;margin-bottom:var(--sp-2)}
.band__text{color:var(--surface);font-weight:900;line-height:1.6;font-size:var(--fs-band-text)}
.band__sub{display:block;margin-top:var(--sp-2);font-weight:700;line-height:1.7;
  font-size:var(--fs-lead)}

@media (min-width:768px){
  .band{padding:var(--sp-4) var(--sp-5)}
  .band--vision{margin-top:var(--sp-5)}
  .band__label{margin-bottom:var(--sp-3)}
}

.pillars{display:grid;gap:var(--sp-2);grid-template-columns:1fr;margin-top:var(--sp-4)}
.pillar{background:var(--surface);border:1px solid var(--rule);
  display:flex;align-items:center;gap:var(--sp-2);padding:var(--pillar-pad)}
.pillar__no{background:var(--brand-yellow);color:var(--sumi);border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-feature-settings:'tnum';
  width:var(--pillar-no);height:var(--pillar-no);font-size:var(--fs-note)}
.pillar__label{font-weight:700;line-height:1.5;font-size:var(--fs-pillar)}
.about2__sub{text-align:center;margin-top:var(--sp-3)}
.about2__close{margin-top:var(--sp-3)}

@media (min-width:768px){
  .pillars{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:var(--sp-5)}
  .pillar__no{font-size:var(--fs-body)}
  .about2__close{text-align:center;margin-top:var(--sp-4)}
}
@media (min-width:1000px){
  .pillars{grid-template-columns:repeat(3,1fr)}
}

/* ============ 4. ACTION 3本柱 ============ */
.cards{display:grid;grid-template-columns:1fr;gap:var(--sp-3);margin-top:var(--sp-4)}
.card{background:var(--surface);border:1px solid var(--rule-strong);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column}
.card__label{background:var(--brand-yellow);color:var(--sumi);font-weight:700;text-align:center;
  line-height:1.5;font-size:var(--fs-card-label);padding:9px var(--sp-2)}
.card__inner{padding:var(--sp-3)}
.card__title{font-weight:700;line-height:1.55;color:var(--sumi);
  font-size:var(--fs-card-title);margin-bottom:var(--sp-2)}
.card__text{line-height:1.95;font-size:var(--fs-body)}
.card__note{margin-top:var(--sp-2)}

@media (min-width:768px){
  .cards{margin-top:var(--sp-5)}
  .card__label{padding:10px var(--sp-2)}
  .card__inner{padding:var(--sp-3) var(--sp-3) var(--sp-4)}
}
@media (min-width:900px){
  .cards{grid-template-columns:repeat(3,1fr)}
}

/* ============ 5. SCHEDULE ============ */
.sch{border-top:1px solid var(--divider);margin-top:var(--sp-4)}
.sch__row{border-bottom:1px solid var(--divider);padding:var(--sp-3) 0}
.sch__when{margin-bottom:var(--sp-2)}
.badge-y{display:inline-block;background:var(--brand-yellow);color:var(--sumi);border-radius:3px;
  font-weight:700;font-feature-settings:'tnum';white-space:nowrap;
  font-size:var(--fs-note);padding:6px 14px}
.sch__item{line-height:1.9;position:relative;font-size:var(--fs-body)}
.sch__item + .sch__item{margin-top:var(--sp-1)}
.sch__note{margin-top:var(--sp-3)}

@media (min-width:768px){
  .sch{margin-top:var(--sp-5)}
  .sch__row{display:flex;gap:var(--sp-4);align-items:flex-start}
  .sch__when{flex:none;width:170px;padding-top:2px;margin-bottom:0}
  .badge-y{font-size:var(--fs-body);padding:7px 18px}
  .sch__items{flex:1;min-width:0}
  .sch__item{padding-left:var(--sp-2)}
}

/* ============ 6. PLAN ============ */
.plans{display:grid;grid-template-columns:1fr;gap:var(--sp-3);margin-top:var(--sp-4)}
.plan{background:var(--surface);border:1px solid var(--rule-strong);border-radius:8px;
  display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3)}
.plan__cover{flex:none;background:var(--photo-bg);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-note);color:var(--ink-note);
  width:var(--plan-cover-w);height:var(--plan-cover-h)}
.plan__cover img{width:100%;height:100%;object-fit:contain;display:block}
.plan__title{font-weight:700;line-height:1.6;color:var(--sumi);
  font-size:var(--fs-plan-title);margin-bottom:var(--sp-1)}
.plan__link{font-weight:700;color:var(--sumi);display:inline-flex;align-items:center;gap:var(--sp-1);
  text-decoration:none;font-size:var(--fs-body)}
.plan__link svg{stroke:var(--sumi);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.plan__link:hover svg{transform:translateX(3px)}
.plan__link svg{transition:transform .25s var(--fade-ease)}
.plan__link[aria-disabled="true"]{cursor:default}

@media (min-width:768px){
  .plans{grid-template-columns:repeat(2,1fr);gap:var(--sp-4);margin-top:var(--sp-5)}
  .plan__title{margin-bottom:var(--sp-2)}
}

/* ============ 7. 締めの帯 ============ */
.closing{min-height:var(--closing-h);padding:var(--sp-5) var(--sp-3)}
.closing .band__veil{background:color-mix(in srgb, var(--sumi) 70%, transparent)}
.closing__copy{color:var(--surface);font-weight:900;line-height:1.5;font-size:var(--fs-closing)}
.closing .logo-mark{width:var(--logo-closing);margin-top:var(--sp-3)}

@media (min-width:768px){
  .closing{padding:var(--sp-5)}
  .closing .logo-mark{margin-top:var(--sp-4)}
}

/* ============ 8. CONTACT ============ */
.contact{text-align:center}
.contact .sec__head{margin-bottom:var(--sp-3)}
.contact__org{font-weight:700;color:var(--sumi);font-size:var(--fs-contact-org);margin-bottom:var(--sp-1)}
.contact__addr{line-height:1.8}
.contact__tel{font-weight:700;font-feature-settings:'tnum';
  font-size:var(--fs-contact-tel);margin-top:var(--sp-2);line-height:1.8}
.pc-sep{display:none}
.contact__mail{margin-top:var(--sp-2)}
.contact__site{font-size:var(--fs-contact-site);margin-top:2px;word-break:break-all}
.contact a{text-decoration:underline;text-underline-offset:3px}
/* 電話番号は素のテキスト表示（SPではtel:として機能する） */
.contact .tel-link{text-decoration:none;color:inherit}

@media (min-width:768px){
  .contact .sec__head{margin-bottom:var(--sp-4)}
  .contact__org{margin-bottom:var(--sp-2)}
  .contact__site{word-break:normal}
  .pc-sep{display:inline}
  /* PCでは電話番号をリンクとして機能させない */
  .tel-link{pointer-events:none}
}

/* ============ 9. フッター ============ */
.foot{background:var(--sumi);text-align:center;padding:var(--sp-3)}
.foot__cr{color:var(--surface);font-size:var(--fs-note)}

@media (min-width:768px){
  .foot{padding:var(--sp-3) var(--sp-5)}
}

/* ============================================================
   フェードアニメーション
   ・JSが有効なとき（html.js）だけ初期非表示にする＝JSオフでも全文表示
   ・prefers-reduced-motion: reduce では完全に無効化
   ============================================================ */
.js .fade-up{opacity:0;transform:translateY(var(--fade-shift));
  transition:opacity var(--fade-dur) var(--fade-ease), transform var(--fade-dur) var(--fade-ease);
  will-change:opacity,transform}
.js .fade-up.is-in{opacity:1;transform:none}

/* FVロードシーケンス（リード→キャッチ→旗ロゴ。計1s以内） */
.js .fv__inner .seq{opacity:0;transform:translateY(10px)}
.js.is-loaded .fv__inner .seq{animation:fvIn .6s var(--fade-ease) forwards}
.js.is-loaded .fv__inner .seq:nth-child(1){animation-delay:.05s}
.js.is-loaded .fv__inner .seq:nth-child(2){animation-delay:.23s}
.js.is-loaded .fv__inner .seq:nth-child(3){animation-delay:.41s}
@keyframes fvIn{to{opacity:1;transform:none}}

/* 印刷時は初期非表示を解除（アニメーション未発火のまま印刷されるのを防ぐ） */
@media print{
  .js .fade-up,
  .js .fv__inner .seq{opacity:1 !important;transform:none !important;animation:none !important}
}

@media (prefers-reduced-motion: reduce){
  .js .fade-up,
  .js .fv__inner .seq,
  .js.is-loaded .fv__inner .seq{
    opacity:1 !important;transform:none !important;
    transition:none !important;animation:none !important;transition-delay:0s !important}
  .plan__link svg{transition:none}
  html{scroll-behavior:auto}
}