/* ==========================================================================
   Working Career Association - Main Styles (CLEAN FULL)
   Structure:
    0) Tokens / Base / Utilities
    1) Title Bar
    2) Hero (Layers 1–6 + Animations)
    3) Sections (About / Features / CTA)
    4) Footer
    5) Forms (Signup / Contact)
    6) Responsive
    7) Accessibility / Print
   ========================================================================== */

/* === 0) Tokens / Base / Utilities === */
:root{
  --brand:#0A3B6D;
  --cream:#FFE08A;
  --text:#222;
  --muted:#EBEBEB;
  --bg:#fff;
  --soft:#f5f5f7;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --easing:cubic-bezier(.2,.8,.2,1);
  --container:1120px;
  --header-h:120px;             /* 固定ヘッダー高 */

  /* Hero */
  --hero-max-w:1920px;
  --hero-min-h:680px;

  /* Scroll Big */
  --scroll-size:128px;
  --scroll-ring:3px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-padding-top:var(--header-h)}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid #1e90ff55;outline-offset:2px}

.container{width:95%;max-width:var(--container);margin-inline:auto}
.section{padding: 0;background:#fff}
.section--soft{background:var(--soft)}
.header-spacer{height:var(--header-h)}

/* === 1) Title Bar === */
.title-bar{
  position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,4vw,48px);
  background:#fff;border-bottom:1px solid #eee;
  transform:translateY(-100%);opacity:0;
  transition:transform .5s var(--easing),opacity .5s var(--easing);
}
.title-bar.is-visible{transform:translateY(0);opacity:1}

/* 左：ロゴ + テキスト */
.title-bar__left{display:flex;align-items:center;gap:12px;min-width:0}
.title-bar__logo img{height:100px;width:auto}
.logo-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.logo-text__line1{font-size:12px;font-weight:700;color:#222;white-space:nowrap;letter-spacing: 2px;padding-bottom: 5px}
.logo-text__line2{font-size:22px;font-weight:900;color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 右：CTA */
.title-bar__cta{
  font-weight:700;padding:.6em 1.2em;border-radius:999px;
  background:var(--brand);color:#fff;box-shadow:var(--shadow);
  transition:transform .2s var(--easing),box-shadow .2s var(--easing);
}
.title-bar__cta:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(207,0,0,.25)}

/* 画像風のビッグCTAボタン */
.title-bar__cta--big{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px 20px;min-width:240px;border-radius:18px;text-align:center;line-height:1.15;
  background:var(--brand));
  white-space:nowrap;
}
.title-bar__cta--big .cta-main{font-weight:900;font-size:18px;color:var(--cream);letter-spacing:.04em}
.title-bar__cta--big .cta-sub{display:block;margin-top:2px;font-weight:700;font-size:12px;color:#fff;letter-spacing:.06em;opacity:.95}
.title-bar__cta--big:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(207,0,0,.38)}

/* === 2) Hero (Layers 1–6) === */
.hero{
  position:relative;height:100vh;min-height:var(--hero-min-h);overflow:hidden;
  background:#9AC5F1;isolation:isolate;
}
.hero__img{position:absolute;pointer-events:none;user-select:none;-webkit-user-drag:none}

/* L2: center burst */
.hero__img--burst{
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.86);
  width:min(100vw,var(--hero-max-w));
  max-height:100vh;height:auto;opacity:0;z-index:1;
}
/* PCは縦基準で完全カバー（上下に帯が出ない） */
@media (min-width:961px){
  .hero__img--burst{
    width:auto;height:100vh;min-width:100vw;max-width:none;max-height:none;
    top:50%;left:50%;transform:translate(-50%,-50%) scale(.86);
  }
}

/* L3: top slide-in */
.hero__img--top{
  top:150px;left:clamp(300px,5vw,64px);
  width:clamp(1200px,42vw,1200px);height:auto;
  transform:translateX(-28px);opacity:0;z-index:2;
}
/* L4: center-left slide-in */
.hero__img--center-left{
  top:55%;left:clamp(150px,5vw,64px);
  transform:translate(-28px,-50%);
  width:clamp(600px,46vw,800px);height:auto;opacity:0;z-index:3;
}
/* L5: scroll hint */
.scroll-big{
  position:absolute;left:50%;bottom:40px;transform:translateX(-50%);
  width:var(--scroll-size);height:var(--scroll-size);border-radius:50%;
  display:flex;align-items:center;justify-content:center;gap:8px;color:var(--brand);font-weight:800;letter-spacing:.12em;z-index:4;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.18));
}
.scroll-big:focus-visible{outline:3px solid; color:var(--brand);outline-offset:4px}
.scroll-big::before{content:"";position:absolute;inset:0;border-radius:50%;border:var(--scroll-ring) solid rgba(255,255,255,.68);animation:pulse 1.6s ease-out infinite}
.scroll-big::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px dashed rgba(255,255,255,.35);animation:spin 8s linear infinite}
.scroll-big__txt{position:absolute;bottom:12px;font-size:12px;opacity:.95;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.scroll-big__icon{width:44px;height:44px;border-radius:50%;border:3px solid ;color:var(--brand);position:relative}
.scroll-big__icon::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:18px;background:var(--brand);transform:translateX(-50%);box-shadow:0 18px 0 0 #0A3B6D}
.scroll-big__icon::before{content:"";position:absolute;left:50%;bottom:8px;width:16px;height:16px;border-bottom:3px solid;color:var(--brand);border-right:3px solid #0A3B6D;transform:translateX(-50%) rotate(45deg)}



/* L6: right-side text */
.hero__copy{
  position:absolute;top:55%;right:clamp(16px,5vw,64px);
  transform:translate(28px,-50%);width:min(50vw,800px);z-index:3;opacity:0;color:var(--brand);text-align:left;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.15));
}
.hero__copy-text{
  margin:0;font-weight:800;font-size:clamp(22px,2.2vw,25px);
  line-height:1.8;letter-spacing:.02em;white-space:pre-line;text-shadow:0 1px 2px rgba(0,0,0,.3);
}

/* Hero enter animations */
.hero.is-in .hero__img--burst{animation:popIn .9s var(--easing) .05s forwards}
.hero.is-in .hero__img--center-left{animation:leftInCenter .7s var(--easing) .3s forwards}
.hero.is-in .hero__img--top{animation:leftInTop .7s var(--easing) .15s forwards}
.hero.is-in .hero__copy{animation:rightInCenter .75s var(--easing) .45s forwards}

@keyframes popIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.86)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes leftInTop{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
@keyframes leftInCenter{from{opacity:0;transform:translate(-28px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@keyframes rightInCenter{from{opacity:0;transform:translate(28px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@keyframes pulse{0%{transform:scale(.88);opacity:.7}70%{transform:scale(1.12);opacity:0}100%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* === 3) Sections === */
/* About */
.lead h2{
  font-size:clamp(22px,3.8vw,36px);line-height:1.35;margin:0 0 16px;font-weight:800;color:var(--brand);
}
.lead p{font-size:clamp(15px,2.4vw,18px);color:#2b2b2b;margin:0;white-space:pre-line}
.lead__grid{display:grid;grid-template-columns:min(20vw,800px) 1fr;gap:clamp(20px,4vw,56px);align-items:center}
.lead__visual{margin:0}
.lead__visual img{width:100%;height:auto;object-fit:contain}

/* About animation hooks */
.js-fade-left,.js-fade-up{opacity:0;will-change:transform,opacity}
.js-fade-left{transform:translateX(-18px)}
.js-fade-up{transform:translateY(18px)}
#about.is-in .js-fade-left{animation:aboutFadeLeft .7s var(--easing) forwards}
#about.is-in .js-fade-up{animation:aboutFadeUp .6s var(--easing) forwards}
.delay-0{animation-delay:0s}.delay-1{animation-delay:.12s}.delay-2{animation-delay:.24s}.delay-3{animation-delay:.36s}
@keyframes aboutFadeLeft{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
@keyframes aboutFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* Features (cards) */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.8vw,28px);margin-top:28px}
.card{
  background:#fff;border-radius:var(--radius);border:2px solid var(--brand);
  box-shadow:var(--shadow);padding:28px;display:flex;flex-direction:column;gap:12px;
  transform:translateY(24px);opacity:0;transition:box-shadow .25s var(--easing),transform .25s var(--easing);
}
.card:hover{box-shadow:0 12px 36px rgba(0,0,0,.12);transform:translateY(20px)}
.card__icon{width:auto;height:200px;object-fit:contain;display:block;margin:0 0 12px}
.card--center{text-align:center}.card--center .card__icon{margin:0 auto 12px}
.card h3{margin:0;color:var(--brand);font-weight:800;font-size:20px;line-height:1.45}
.card p{margin:8px 0 0;color:#000;font-size:18px;line-height:1.8}
.card.is-revealed{animation:fadeUp .6s var(--easing) forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* CTA */
.cta{
  border-radius:calc(var(--radius)*1.2);
  background:linear-gradient(180deg,#e61414,var(--brand));
  color:#fff;padding:48px;display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;box-shadow:var(--shadow);
}
.cta h2{margin:0;font-size:clamp(22px,3.6vw,32px)}
.cta p{margin:0;opacity:.92}
.cta__btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:14px 22px;border-radius:12px;font-weight:800;transition:transform .2s var(--easing),box-shadow .2s var(--easing),background .2s var(--easing),color .2s var(--easing)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.btn--white{background:#fff;color:var(--brand);box-shadow:var(--shadow)}
.btn--white:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.12)}
.btn--ghost{outline:2px solid #fff;color:#fff;background:transparent}
.btn--ghost:hover{background:rgba(255,255,255,.1)}

/* === 4) Footer === */
footer{background:var(--brand);display:flex;align-items:center;justify-content:center;min-height:120px;text-align:center;padding:24px;color:#fff}

/* === 4) Footer === */

/* 内側レイアウト（中央寄せ＋上下に2段） */
.footer__inner{
  max-width: 960px;
  margin-inline: auto;
  min-height: 120px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;       /* 上：メニュー，下：キャプション */
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;                    /* メニューとキャプションの間隔 */
}

/* メニュー：横並び */
.footer__nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;                    /* リンクと仕切りの間隔 */
  font-size: 0.9rem;            /* 少しだけ小さめ */
}

/* 区切り（｜） */
.footer__sep{
  opacity: 0.75;
}

/* リンクスタイル：点線アンダーライン → hover で消える */
.footer__link{
  position: relative;
  color: #fff;
  text-decoration: none;        /* デフォルトの下線は消す */
  padding-bottom: 2px;
  border-bottom: 1px dotted rgba(255,255,255,0.85);  /* 点線のアンダーライン */
  transition:
    border-color 0.25s var(--easing, ease),
    opacity 0.25s var(--easing, ease);
}

/* hover / keyboard フォーカス時：線を消して、少しだけトーンを落とす */
.footer__link:hover,
.footer__link:focus-visible{
  border-bottom-color: transparent; /* 点線アンダーラインを消す */
  opacity: 0.8;
  outline: none;
}

/* キャプション（協会名） */
.footer__caption{
  margin: 0;
  line-height: 1.6;
}

.footer__caption-en{
  font-size: 0.85rem;
  opacity: 0.85;
}
/* === 5) Forms (Signup / Contact) === */
.signup__title{margin:0 0 18px;font-size:clamp(20px,3.2vw,28px);font-weight:800;color:var(--brand)}
.form-card{background:#fff;border:1px solid #e9edf3;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.06);padding:clamp(16px,3vw,28px)}
.form-grid{display:grid;grid-template-columns:200px 1fr;column-gap:18px;row-gap:18px;align-items:center}
.form-grid>label{font-weight:700;color:#3b3b3b}
.form-grid input,.form-grid select,.form-grid textarea{
  width:100%;padding:12px 14px;border:1px solid #dfe3e8;border-radius:10px;background:#fff;
  font-size:16px;line-height:1.4;color:#111;transition:border-color .15s var(--easing),box-shadow .15s var(--easing);
}
.form-grid input::placeholder{color:#9aa3ad}
.form-grid select{appearance:auto;background-position:right 10px center}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%, transparent);outline:0}
.form-actions{margin-top:22px;display:flex;justify-content:center}
.btn--brand{background:var(--brand);color:#fff;border-radius:999px;padding:14px 26px;font-weight:800;box-shadow:0 10px 24px rgba(207,0,0,.25);transition:transform .15s var(--easing),box-shadow .15s var(--easing)}
.btn--brand:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(207,0,0,.28)}
.btn--brand:active{transform:translateY(0)}

/* Contact: fieldset / options */
.form-fieldset{margin:8px 0 0;padding:12px 14px;border:1px dashed #dfe3e8;border-radius:10px;background:#fafbfc}
.form-fieldset legend{font-weight:900;padding:0 8px;background:#fafbfc;color:#111}
.form-options{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.form-options label{display:grid;grid-template-columns:1.2em auto;column-gap:8px;align-items:center;white-space:nowrap;writing-mode:horizontal-tb;line-height:1.6}
.form-options input[type="radio"]{inline-size:1.2em;block-size:1.2em;flex:0 0 auto}

/* === 6) Responsive === */
@media (max-width:1200px){ :root{--scroll-size:120px} }
@media (max-width:960px){
  :root{--header-h:120px} /* 高さはJSの挙動に合わせ固定運用。必要に応じ変更 */
  .logo-text__line1{display:none}
  .logo-text__line2{font-size:16px}
  .title-bar__logo img{height:44px}

  /* ヒーロー：縦積み中央寄せ + L2は背景でアニメ継続 */
  .hero{
    height:100vh;height:100svh;position:relative;display:flex;flex-direction:column;
    justify-content:center;align-items:center;padding:clamp(24px,6vh,48px) 0 92px;overflow:hidden;
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background:var(--brand) url("../../images/layer2.png") center/cover no-repeat;
    transform:scale(.86);opacity:0;z-index:0;pointer-events:none;
  }
  .hero.is-in::before{animation:popInBg .9s var(--easing) .05s forwards}
  @keyframes popInBg{0%{opacity:0;transform:scale(.86)}60%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
  .hero__img--burst{display:none !important}
  .hero > *{position:relative;z-index:1}

  .hero__img{position:static !important;width:min(95vw,720px);height:auto;margin:0 0 14px;transform:none}
  .hero__img--top,.hero__img--center-left{opacity:0;transform:translateX(-18px)}
  .hero.is-in .hero__img--top{animation:leftInStack .6s var(--easing) .18s forwards}
  .hero.is-in .hero__img--center-left{animation:leftInStack .6s var(--easing) .30s forwards}
  @keyframes leftInStack{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}

  .hero__copy{position:static !important;width:min(95vw,720px);text-align:center;opacity:0;transform:translateX(18px);margin-top:4px}
  .hero__copy-text{font-size:clamp(15px,3.6vw,18px)}
  .hero.is-in .hero__copy{animation:rightInStack .6s var(--easing) .45s forwards}
  @keyframes rightInStack{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}

  .cards{grid-template-columns:1fr}
  .cta{padding:32px}
  .form-grid{grid-template-columns:1fr}
  .form-grid>label{margin-top:8px}
  :root{--scroll-size:100px}
}
@media (max-width:520px){
  :root{--header-h:60px;--scroll-size:92px}
  .logo-text__line2{font-size:14px}
  .hero__img{width:min(95vw,540px);margin:0 0 12px}
  .form-options label{white-space:normal}
}

/* === 7) Accessibility / Print === */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .hero__img--burst{opacity:1 !important;transform:translate(-50%,-50%) scale(1) !important}
  .hero__img--top{opacity:1 !important;transform:translateX(0) !important}
  .hero__img--center-left{opacity:1 !important;transform:translate(0,-50%) !important}
  .js-fade-left,.js-fade-up{opacity:1 !important;transform:none !important;animation:none !important}
}
@media print{
  .title-bar{position:static;transform:none;opacity:1}
  .scroll-big{display:none}
  .btn{box-shadow:none}
}

/* ===== CTA illustration + animations ===== */
.cta-illustration{ margin:0 0 20px }
.cta-illustration img{
  display:block; width:100%; height:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* 初期状態（非表示） */
#cta .js-cta-img{ opacity:0; transform:translateY(16px) }
#cta .js-cta-card{ opacity:0; transform:translateY(24px) scale(.98) }

/* 可視化トリガー後 */
#cta.is-in .js-cta-img{ animation:ctaImgIn .6s var(--easing) forwards }
#cta.is-in .js-cta-card{ animation:ctaCardIn .65s var(--easing) .08s forwards }

@keyframes ctaImgIn{
  from{ opacity:0; transform:translateY(16px) }
  to  { opacity:1; transform:none }
}
@keyframes ctaCardIn{
  from{ opacity:0; transform:translateY(24px) scale(.98) }
  to  { opacity:1; transform:translateY(0) scale(1) }
}

/* SP 少しだけ間隔を広げる（任意） */
@media (max-width:960px){
  .cta-illustration{ margin-bottom:16px }
}

/* === University combobox === */
.combo{position:relative}
.combo__input{
  width:100%;
  padding:12px 36px 12px 14px; /* 右にクリアボタン分の余白 */
}
.combo__clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%;
  border:1px solid #dfe3e8; background:#fff; color:#666;
  display:grid; place-items:center; cursor:pointer;
}
.combo__clear:hover{background:#f6f7f9}
.combo__list{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  max-height:280px; overflow:auto;
  background:#fff; border:1px solid #e3e7ee; border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  padding:6px; margin:0; list-style:none; z-index:10; display:none;
}
.combo__list[aria-hidden="false"]{display:block}
.combo__option{
  padding:10px 12px; border-radius:8px; cursor:pointer; line-height:1.4;
}
.combo__option[aria-selected="true"],
.combo__option:hover{background:#f6f7fb}
.combo__hint{color:#6b6b6b; display:block; margin-top:6px}

/* ===== Scroll hint: all white (#fff) ===== */
.scroll-big{ color:var(--brand); !important; }
.scroll-big:focus-visible{ outline-color:var(--brand) !important; }

.scroll-big__txt{ color:var(--brand) !important; text-shadow:none !important; }

.scroll-big::before,
.scroll-big::after{
  border-color:var(--brand) !important;    /* パルス/破線リングも白 */
  opacity:1 !important;            /* 透過を残したくない場合 */
}

/* SP時：スクロール誘導は絶対配置のまま中央固定 */
@media (max-width:960px){
  /* .scroll-big だけ除外して他の子は相対配置のまま */
  .hero > *:not(.scroll-big){
    position:relative; z-index:1;
  }

  .scroll-big{
    position:absolute;           /* ここを再宣言して勝たせる */
    left:50%;
    transform:translateX(-50%);
    bottom:max(18px, env(safe-area-inset-bottom)); /* ノッチ対策 */
    z-index:2;
    --scroll-size:100px;         /* 既存サイズ指定も残す */
  }
}

/* About：SPでは画像を必ず表示（アニメ無効化） */
@media (max-width: 1024px){
  .lead__grid{
    grid-template-columns: 1fr !important; /* 縦並びを強制 */
    gap: 16px 0;
    align-items: start;
  }
  .lead__visual{
    order: -1;
    max-width: 560px;
    margin: 0 auto 12px;
  }
  /* ← 画像が消える根本：js-fade-leftを解除して常に見せる */
  #about .lead__visual.js-fade-left{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}



/* ===== SP(≤520px) のヘッダーレイアウト調整 ===== */
@media (max-width:520px){
  /* ロゴ横テキストを消す */
  .logo-text{ display:none !important; }

  /* バー全体の詰め具合 */
  .title-bar{ gap:8px; }

  /* 左：ロゴエリア 40% 幅確保（はみ出し防止のため min-width:0） */
  .title-bar__left{ flex:0 0 50%; min-width:0; display:flex; align-items:center; }
  /* ロゴ画像はバー高に収める */
  .title-bar__logo{ flex:1; height:calc(var(--header-h) - 10px); }
  .title-bar__logo img{ height:100%; width:auto; }

  /* 右：ビッグCTAは 30% 幅に */
  .title-bar__cta--big{
    flex:0 0 45%;
    width:45%;               /* 念のため */
    min-width:0;
    padding:8px 10px;
    border-radius:12px;
    white-space:normal;      /* 狭い時は折り返し可 */
    text-align:center;
  }
  .title-bar__cta--big .cta-main{ font-size:12px; }
  .title-bar__cta--big .cta-sub{ display:none; } /* サブ行は非表示 */
}

/* ===================== Hero 追加スタイル ===================== */

/* レイヤー位置調整 */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 160px;
  padding-bottom: 120px;
}

.hero__img--logo {
  position: absolute;
  top: 164px;
  left: 100px; /* 指定：左から50px */
  width: clamp(240px, 40vw, 520px);
  opacity: 0;
  transform: translateX(-80px);
  animation: heroLogoIn 1.2s var(--easing) 0.4s forwards;
	z-index: 50;
}

.hero__headline {
	font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(36px, 3.5vw, 3.8rem); /* 指定：63px */
  line-height: 1.3;
  font-weight: 700;
  color: var(--brand);
  margin-top: 260px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s var(--easing) 0.8s forwards;
	z-index: 50;
	  position: absolute;
  top: 120px;               /* 見出しとの間を自然に */
  left: 105px;


}

.hero__headline span {
  display: inline-block;
  color:var(--brand);
}

.hero__subhead {
  font-family: "Noto Sans JP", sans-serif;
 font-size: clamp(30px, 1.0vw, 2.8rem); /* 指定：63px */
  font-weight: 600;
  color: var(--brand);
  margin-top: 16px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s var(--easing) 1.2s forwards;
		z-index: 50;
 position: absolute;
  top: 560px;               /* 見出しとの間を自然に */
  left: 105px;

}

/* 2人画像 */
.hero__img--people {
  position: absolute;
  bottom: -80px;
  right: 0;
  width: clamp(1000px, 4.5vw, 950px);
  opacity: 0;
  transform: translateY(100px);
  animation: peopleUp 1.2s var(--easing) 1.6s forwards;
	z-index: 2;
}

/* Skill Compass画像 */
.hero__img--compass {
  position: absolute;
  bottom: 160px;
  right: 350px;
  width: clamp(500px, 4.5vw, 650px);
  opacity: 0;
  transform: scale(0.8);
  animation: compassPop 1s cubic-bezier(.22,1,.36,1) 2s forwards;
	z-index: 2;
}

/* アニメーション */
@keyframes heroLogoIn {
  0% {opacity:0; transform:translateX(-80px);}
  100% {opacity:1; transform:translateX(0);}
}
@keyframes fadeUp {
  0% {opacity:0; transform:translateY(30px);}
  100% {opacity:1; transform:translateY(0);}
}
@keyframes peopleUp {
  0% {opacity:0; transform:translateY(100px);}
  100% {opacity:1; transform:translateY(0);}
}
@keyframes compassPop {
  0% {opacity:0; transform:scale(0.8);}
  100% {opacity:1; transform:scale(1);}
}

/* フワッと演出のための軽減 */
.js-fade-text {
  will-change: opacity, transform;
}

/* スマホ対応 */
@media (max-width:768px) {
  .hero {
    padding-top: 120px;
    padding-bottom: 80px;
  }
  .hero__headline {
    font-size: clamp(28px,6vw,44px);
    margin-top: 200px;
  }
  .hero__subhead {
    font-size: clamp(18px,4vw,28px);
  }
  .hero__img--people {
    width: 90%;
    right: auto;
    left: 5%;
    bottom: -60px;
  }
  .hero__img--compass {
    right: auto;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%) scale(0.9);
  }
}

/* ===================== テキスト3レイヤー可変対応 ===================== */

/* 1920基準：ロゴ・H1・H2のレイアウトをスケール */
.hero__canvas {
 
  top: 0;
  left: 0;
  width: 1920px;   /* 基準キャンバス */
  height: 1080px;
  transform-origin: top left;
  --scale: clamp(0.35, 100vw / 1920, 1); /* 670pxで約0.35まで縮小 */
  transform: scale(var(--scale));
  z-index: 50;

}


/* ===== .hero--v2：スマホ仕上げ（ロゴ中央／H1,H2は左寄せ中央／人物上にCompass） ===== */
@media (max-width:640px){
  /* セクション余白 */
  header.hero.hero--v2{
    --s: 1;
    height: auto !important;
    padding: 88px 0 84px !important;
  }

  /* 中央に細いカラムを作る（max 520px） */
  header.hero.hero--v2 .hero__canvas{
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    display: grid;
    gap: 18px;
    padding: 0 20px;                 /* 画面端の余白 */
    box-sizing: border-box;
  }

  /* ロゴ＝中央 */
  header.hero.hero--v2 .hero__img--logo{
    position: relative !important;
    inset: auto !important;
    width: min(72%, 320px) !important;
    margin: 0 auto !important;       /* 中央寄せ */
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }

  /* H1＝左寄せ・中央ブロック（上マージンあり） */
  header.hero.hero--v2 .hero__headline{
    position: relative !important;
    inset: auto !important;
    margin: 6px auto 0 !important;   /* 上マージン */
    width: min(92vw, 520px) !important;
    text-align: left !important;     /* 左寄せ */
    font: 700 clamp(24px, 6.5vw, 34px)/1.3 "Noto Sans JP", sans-serif !important;
    letter-spacing: -0.5px;
    color: #fff !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }

  /* H2＝左寄せ・中央ブロック（上マージンあり） */
  header.hero.hero--v2 .hero__subhead{
    position: relative !important;
    inset: auto !important;
    margin: 8px auto 0 !important;   /* 上マージン */
    width: min(92vw, 520px) !important;
    text-align: left !important;
    font: 600 clamp(16px, 4.8vw, 22px)/1.5 "Noto Sans JP", sans-serif !important;
    color: #fff !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }

  /* 人物＝中央配置（基準レイヤー） */
  header.hero.hero--v2 .hero__img--people{
    position: relative !important;
    inset: auto !important;
    width: min(92vw, 560px) !important;
    margin: 10px auto 0 !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    z-index: 1 !important;
  }

  /* Compass＝人物の“上”に重ねて中央、少し小さめ */
  header.hero.hero--v2 .hero__img--compass{
    position: relative !important;        /* 同じグリッド内で重ねる */
    inset: auto !important;
    width: min(56vw, 300px) !important;
    margin: -16% auto 0 !important;       /* 上に持ち上げて人物に重ねる */
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    z-index: 2 !important;                /* 人物より上 */
    pointer-events: none;
  }

  /* スクロール誘導は最後に中央 */
  header.hero.hero--v2 .scroll-big{
    position: static !important;
    margin: 26px auto 0 !important;
    transform: none !important;
  }
}
/* ===== Hero v2 スマホ微調整：H1/H2中央寄せ・Compass中央重ね ===== */
@media (max-width:640px){

  /* H1／H2 を少し中央寄せ（左余白を減らす） */
  header.hero.hero--v2 .hero__headline,
  header.hero.hero--v2 .hero__subhead{
    width: min(88vw, 520px) !important;  /* 幅を少し狭めて中央寄せ */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 4vw !important;        /* 軽く左寄せを残す */
  }

  /* Compassを人物の上下中央（やや胸位置）へ重ねる */
  header.hero.hero--v2 .hero__img--compass{
    position: absolute !important;
    top: 130px;                            /* セクション中央付近 */
    left: 50%;
    transform: translate(-50%, -40%) scale(0.9); /* 上下中央に調整 */
    width: min(60vw, 260px) !important;
    margin: 0 !important;
    z-index: 3 !important;               /* 人物の上に */
    pointer-events: none;
  }

  /* 人物は相対位置の基準になるよう relative */
  header.hero.hero--v2 .hero__img--people{
    position: relative !important;
    z-index: 2 !important;
  }
}
/* ===== Hero v2：SPでコンパスを“胸元”に重ねる最終調整 ===== */
@media (max-width:640px){
  /* 微調整用トークン：上に持ち上げる量（vwベース）とサイズ感 */
  header.hero.hero--v2{ --compass-lift: 60vw; --compass-max: 400px; --people-max: 560px; }

  /* カラム（中央寄せ） */
  header.hero.hero--v2 .hero__canvas{
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    display: grid;
    gap: 18px;
    padding: 40px 20px 0px;
    box-sizing: border-box;
  }

  /* ロゴ＝中央 */
  header.hero.hero--v2 .hero__img--logo{
    position: relative !important;
    inset: auto !important;
    width: min(72%, 320px) !important;
    margin: 0 auto !important;
    transform: none !important; opacity:1 !important; animation:none !important;
  }

  /* H1/H2＝“左寄せ・中央ブロック”＋上マージン（もう少し中央へ） */
  header.hero.hero--v2 .hero__headline,
  header.hero.hero--v2 .hero__subhead{
    position: relative !important; inset:auto !important;
    width: min(88vw, 520px) !important;
    margin-left: auto !important; margin-right: auto !important;
    text-align: left !important;
  }
  header.hero.hero--v2 .hero__headline{
    margin-top: 6px !important;
    font: 700 clamp(24px, 6.5vw, 34px)/1.3 "Noto Sans JP", sans-serif !important;
  }
  header.hero.hero--v2 .hero__subhead{
    margin-top: 8px !important;
    font: 600 clamp(16px, 4.8vw, 22px)/1.5 "Noto Sans JP", sans-serif !important;
  }

  /* 人物＝中央。基準レイヤー（下） */
  header.hero.hero--v2 .hero__img--people{
    position: relative !important; inset:auto !important;
    width: min(92vw, var(--people-max)) !important;
    margin: 12px auto 0 !important;
    transform: none !important; opacity:1 !important; animation:none !important;
    z-index: 1 !important;
  }

  /* コンパス＝人物の“胸元”に中央重ね（上に持ち上げる） */
  header.hero.hero--v2 .hero__img--compass{
    position: relative !important; inset:auto !important;
    width: min(80vw, var(--compass-max)) !important;
    margin: calc(var(--compass-lift) * -1) auto 0 !important; /* ←上に重ねる量 */
    transform: none !important; opacity:1 !important; animation:none !important;
    z-index: 2 !important;     /* 人物より上 */
    pointer-events: none;
  }

  /* スクロール誘導＝最後に中央 */
  header.hero.hero--v2 .scroll-big{
    position: static !important; margin: 26px auto 0 !important; transform: none !important;
  }
}

/* ========== Layout base ========== */

.u-sr{position:absolute!important;clip:rect(1px,1px,1px,1px)!important;clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;white-space:nowrap!important;}

.wc-section{padding: clamp(56px,8vw,96px) 0; background:#fff;}
.wc-container{max-width:var(--container); margin:0 auto; padding:0 var(--pad);}
.wc-container--sc{max-width:var(--container); margin:100px auto 0; padding:0 var(--pad);}
.wc-title{font:700 clamp(20px,2.4vw,28px)/1.4 "Noto Sans JP",sans-serif; color:#111; text-align:center; letter-spacing:.02em; position:relative;}
.wc-separator{height:1px; border:0; background:rgba(0,0,0,.12); margin:28px 0;}

@media (min-width:1280px){
  .wc-container{padding-left: calc(var(--grid-left) - ( (100vw - var(--container))/2 )); padding-right: var(--pad);}
	.wc-container--sc{padding-left: calc(var(--grid-left) - ( (100vw - var(--container))/2 )); padding-right: var(--pad);}
}

/* ========== Intro ========== */
.intro{background:#fff;}
.intro__lead{display:grid; gap:12px; justify-items:center; text-align:center; color:#444;}
.intro__logo{filter: drop-shadow(0 1px 0 rgba(0,0,0,.1));}

/* ========== Reason ========== */
.reason{background:#fff;}
.reason__grid{display:grid; grid-template-columns: 180px 1fr; gap:24px; align-items:start; margin-top:28px;}
.reason__text{color:#333; line-height:1.9;}
@media (max-width:768px){
  .reason__grid{grid-template-columns:1fr; gap:16px; text-align:left;}
}

/* ========== Features ========== */
.features{background:#fff7a8;}
.cards{display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:28px;}
.card{background:#fff; border-radius:16px; padding:20px; box-shadow:0 12px 30px rgba(0,0,0,.06); transform:translateY(8px); transition:transform .35s var(--easing), box-shadow .35s var(--easing);}
.card:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.12);}
.card__figure{display:grid; place-items:center; height:160px; margin-bottom:8px;}
.card__title{font:700 18px/1.5 "Noto Sans JP",sans-serif; margin:4px 0; color:#d73728;}
.card__text{color:#333;}
@media (max-width:1024px){ .cards{grid-template-columns:1fr 1fr;} }
@media (max-width:576px){ .cards{grid-template-columns:1fr;} }

/* ========== Compass ========== */
.compass{background:#f6f6f6;}
.compass__grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; margin-top:28px;}
.compass__chart{background:#fff; border-radius:12px; padding:14px; box-shadow:0 12px 30px rgba(0,0,0,.06); text-align:center;}
.compass__chart figcaption{font-size:12px; color:#666; margin-top:6px;}
.compass__lead{text-align:center; color:#333; margin-top:18px;}
@media (max-width:768px){ .compass__grid{grid-template-columns:1fr;} }

/* ========== Roadmap ========== */
.roadmap{background:var(--brand); color:#fff; position:relative; overflow:hidden;}
.wc-title--light{color:#fff;}
.roadmap__wrap{display:grid; grid-template-columns: 280px 1fr; gap:28px; align-items:center; margin-top:24px;}
.steps{counter-reset: step; list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.steps__item{display:flex; align-items:flex-start; gap:10px; font-weight:600;}
.steps__item span{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#fff; color:var(--brand); font-weight:700;}
@media (max-width:768px){ .roadmap__wrap{grid-template-columns:1fr; text-align:left;} }

/* ========== Signup ========== */
.signup{background:#f7f7f7;}
.signup__lead{text-align:center; color:#c33; margin-top:8px;}
.form{background:#fff; border-radius:16px; padding:22px; box-shadow: 0 20px 40px rgba(0,0,0,.08);}
.form__grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form__row{display:grid; gap:6px;}
.form__row span{font-size:12px; color:#555;}
.form__row input{border:1px solid #ddd; border-radius:8px; padding:12px 14px; font-size:14px; outline:none;}
.form__row input:focus{border-color: var(--brand); box-shadow:0 0 0 3px rgba(216,52,40,.15);}
.form__row--2col{grid-column: span 2;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:999px; border:none; cursor:pointer;}
.btn--primary{background:var(--brand); color:#fff; font-weight:700; margin-top:14px;}
@media (max-width:768px){
  .form__grid{grid-template-columns:1fr;}
  .form__row--2col{grid-column:auto;}
}

/* ========== Reveal Animations (軽量) ========== */
.reveal{opacity:0; transform:translate3d(0,18px,0); will-change:opacity,transform; transition:opacity .7s var(--easing), transform .7s var(--easing);}
.reveal.is-in{opacity:1; transform:none;}
.reveal--up{transform:translate3d(0,24px,0);}
.reveal--left{transform:translate3d(-28px,0,0);}
.reveal--right{transform:translate3d(28px,0,0);}
.reveal--fade{transform:none; opacity:0; }
.reveal--clip{opacity:1; transform:none; position:relative; overflow:hidden;}
.reveal--clip::before{content:""; position:absolute; inset:0; background:var(--brand); transform:translateX(0); animation: none;}
.reveal--clip.is-in::before{animation:clipReveal 1s var(--easing) forwards;}
@keyframes clipReveal{0%{transform:translateX(0);}100%{transform:translateX(100%);}}

/* ほんのりパララックス（features背景などに適用例） */
.features{background:#fff7a8; background-attachment: fixed; background-image: radial-gradient(ellipse at 20% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);}


/* ===================== Intro（新しいジョブ型の就活応援） ===================== */
.intro{ background:#fff; text-align:center; overflow:hidden; }

/* 見出し＋赤アンダーライン（テキスト幅+左右10px／中央から伸長） */
.intro__title{
  position:relative; display:inline-block;
  font:700 clamp(22px,2.4vw,30px)/1.4 "Noto Sans JP",sans-serif;
  color:#111; margin-bottom:48px; text-align:center;
}
.intro__title .intro__underline{
  position:absolute; bottom:-12px; left:50%;
  height:3px; background:var(--brand); border-radius:2px;
  transform:translateX(-50%) scaleX(0); transform-origin:center;
  width:calc(100% + 20px); /* タイトル幅より左右10px広く */
  opacity:0; will-change:transform,opacity;
}
/* 見出しが表示されたら下線アニメ開始 */
.intro__title.is-in .intro__underline{
  animation: introLineGrow .9s var(--easing) .2s forwards;
}
@keyframes introLineGrow{
  0%   {opacity:0; transform:translateX(-50%) scaleX(0);}
  100% {opacity:1; transform:translateX(-50%) scaleX(1);}
}

/* 2カラム：40 / 60、最大1000px */
.intro__grid{
  display:grid; grid-template-columns: 40% 60%; gap:40px;
  align-items:center; justify-content:center; text-align:left;
  max-width:1000px; margin:0 auto;
}

/* ロゴ：少し大きく＋ふわっと拡大 */
.intro__logo{ width:min(100%, 460px); height:auto; }
.reveal--pop{ opacity:0; transform:scale(.94); will-change:opacity,transform; }
.reveal--pop.is-in{ animation: logoPop .8s var(--easing) var(--d,0s) forwards; }
@keyframes logoPop{
  0%{opacity:0; transform:scale(.94);}
  60%{opacity:1; transform:scale(1.02);}
  100%{opacity:1; transform:scale(1);}
}

/* テキスト：20pxでフェードアップ */
.intro__text p{ font-size:18px; font-weight: 500; line-height:1.9; color:#333; }
.sc__text { font-size:18px; font-weight: 500; line-height:1.9; color:#333; text-align: left;}

/* 青の点線：最後にふわっと */
.intro__note-line{ border-top:2px dotted #003366; width:100%; margin:24px 0 10px; opacity:0; }
.intro__note{ font-size:14px; color:#003366; margin:0; opacity:0; }
.reveal--fade{ opacity:0; transition: opacity .7s var(--easing) var(--d,0s); }
.reveal--fade.is-in{ opacity:1; }

/* 既存の reveal--up 等（他セクション共通）を利用 */
.reveal--up{ opacity:0; transform:translate3d(0,24px,0); transition:opacity .7s var(--easing) var(--d,0s), transform .7s var(--easing) var(--d,0s); }
.reveal--up.is-in{ opacity:1; transform:none; }

/* SP */
@media (max-width:768px){
  .intro__grid{ grid-template-columns:1fr; gap:28px; text-align:center; }
  .intro__logo{ width:min(82%, 380px); }
  .intro__text p{ font-size:18px; text-align:center; }
  .intro__note-line{ width:90%; margin:20px auto 8px; }
}


/* 青点線注釈 */
.intro__note {
  margin-top:20px;
  font-size:1rem;
  color:#003366;
  border-bottom:2px dotted #003366;
  display:inline-block;
  padding-top:6px;
}

/* モバイル対応 */
@media (max-width:768px){
  .intro__grid {
    grid-template-columns:1fr;
    gap:20px;
    text-align:center;
  }
  .intro__text p {text-align:center;}
  .intro__underline {bottom:-8px;}
}
/* ========== Reason（ワーキャリをおすすめする理由） ========== */
.reason {
   text-align:center; /* ← タイトルを中央寄せにするために追加 */
}

.reason .wc-container{
  max-width: 1200px;                /* ご指定：幅1000px */
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* 2カラム：画像 左 / テキスト 右（gap 40） */
.reason__grid{
  display: grid;
  grid-template-columns: 320px 1fr; /* 画像幅に合わせた左カラム */
  gap: 10px;
  align-items: start;
  justify-content: center;
  margin-top: 28px;
}

/* タイトルを中央に */
.reason .intro__title {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* 写真サイズ・見栄え */
.reason__photo img{
  width: 400px;                     /* デザイン参考のサイズ感 */
  height: auto;
  display: block;
}

/* お名前キャプション */
.reason__name{
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
}

/* 本文：20pxで読みやすく */
.reason__text p{
  font-size: 18px;                  /* ご指定 */
  line-height: 1.9;
  font-weight: 500;
  margin: 0;
	   text-align:left; 
}

/* タイトルのアンダーラインは intro と同じルールを継承（.intro__title / .intro__underline） */

/* レスポンシブ（768px以下は縦積み＆中央寄せ） */
@media (max-width:768px){
  .reason__grid{
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  .reason__photo{ justify-self: center; }
  .reason__text p{ text-align: left; font-size: 18px; }
}
/* ========== Features（ワーキャリ3つの特長） ========== */
.features{
  background:#fff7a8; /* やわらかい黄色 */
	text-align: center;
}
.features .wc-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad);

}

.compass .wc-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* グリッド：3枚並び（→タブレット2枚、SP1枚） */
.features__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: stretch;
  margin-top: 60px;
}
@media (max-width:1024px){ .features__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:576px){ .features__grid{ grid-template-columns: 1fr; } }

/* カード本体：右下のみ角丸／赤いミシン目風フチ */
.feature-card{
  position: relative;
  background:#fff;
  border: 4px solid ;color: var(--brand);              /* ← ミシン目風に変更（solid→dotted） */
  border-radius: 0 0 16px 0;               /* ← 右下だけ角丸 */
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  overflow: visible;
  transition: transform .35s var(--easing), box-shadow .35s var(--easing);
}
.feature-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}


/* 上部の“赤い帯”ラベル（中央・ミシン目風） */
.feature-card__label{
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 20px;                         /* ← フォントサイズを18pxにアップ */
  letter-spacing: .04em;
  padding: 15px 35px;
  border-radius: 6px;
  line-height: 1.2;
  white-space: nowrap;
	  z-index: 2;   
}

/* ラベル下のミシン目表現（白点々） */
.feature-card__label::after{
  content:"";
  position:absolute;
  left: -8px;                          /* ラベルより少し横に広げる */
  right:-8px;
  bottom:-6px;                         /* ラベルの外に 6px 落とす */
  height: 8px;
  pointer-events:none;
  z-index: 1;

  /* ドット列：白い半円が等間隔に並ぶ（背景が白でも“影”で分かる） */
  background:
    radial-gradient(circle, #fff 3px, transparent 3px) 0 0/12px 8px repeat-x;

  /* 下にうっすら影を入れて白地でも見失わない */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.10));
}

.features__lead{
	font-size: 20px;
	font-weight: 600;
	padding-bottom: 30px;
}

/* 内部余白 */
.feature-card__body{ padding: 24px 22px 0px; display:grid; gap: 5px; text-align:center; }

/* 図版 */
.feature-card__figure{
  display:grid; place-items:center;
  margin: 30px 0 6px;
  min-height: 180px;
}

/* 赤い小見出し */
.feature-card__lead{
  font: 700 20px/1.6 "Noto Sans JP", sans-serif;
  color: #d73728;    /* 赤 */
  margin: 8px 0 0px;
}

/* 本文 */
.feature-card__text{
  font-size: 1rem;
  line-height: 1.9;
	text-align: left;
	color: #111; 
	font-weight: 500;
}

/* タイトルは intro共通の .intro__title / .intro__underline をそのまま利用 */

/* ========== Compass（Core Skill Compass） ========== */
.compass {
  background: #fff;
  text-align: center;
}

/* タイトル：introと同じアンダーラインアニメを適用 */
.compass__title {
  position: relative;
  display: inline-block;
  text-align: center;
  font-weight: 700;
  letter-spacing: .03em;
  padding-bottom: .8rem;
  margin-bottom: clamp(32px, 5vw, 56px);
}


/* グリッド（デザイン踏襲） */
.compass__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  justify-items: center;
  margin-top: 28px;
}
.compass__chart {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  text-align: center;
}
.compass__chart figcaption {
  font-size: 1.3rem;
  color: var(--brand);
  margin-top: 15px;
	font-weight: 600;
	padding-bottom: 20px;
}

/* リード文：中央ブロック、テキスト左寄せ */
.compass__lead {
  text-align: left;
  font-size: clamp(1rem, .9rem + .4vw, 1.125rem);
  line-height: 1.9;
  margin: clamp(28px, 6vw, 48px) auto 0;
  max-width: 550px;
	font-size: 18px;
	font-weight: 500;
	
}
@media (max-width: 768px) {
  .compass__grid { grid-template-columns: 1fr; }
  .compass__lead { text-align: left; }
}
/* ========== Roadmap ========== */
.roadmap{ background:var(--brand); color:#fff; position:relative; overflow:hidden; text-align: center;}
.wc-title--light{ color:#fff; }

/* タイトルの下線：intro流用だが色だけ白に */
.roadmap .intro__title .intro__underline{
  background:#fff;            /* ← brand面なので白線 */
  bottom:-12px;
}

/* レイアウト：画像左／リスト右、PCは広めの余白 */
.roadmap__wrap{
  display:grid;
  grid-template-columns: 420px 1fr;     /* 画像幅に合わせ調整 */
  gap: clamp(35px, 8vw, 90px);
  align-items:center;
  justify-content:center;
  margin-top:0px;
}


.roadmap__illust img{ position:relative; z-index:1; }

/* 画像下の白い説明カード（吹き出し風） */
.roadmap__note{
  background:#fff; color:#c33;
  border-radius:5px;
  box-shadow:0 10px 28px rgba(0,0,0,.10);
  padding:14px 18px;
  font-size:16px; line-height:1.75;
  text-align:left;
  z-index:1;
	font-weight: 700;
}


/* === Roadmap：アイコンをテキスト幅内に収める === */

/* 1) 右カラム(ol.steps)をテキストの実幅で縮める */
.steps{
  list-style:none; padding:0; margin:0;
  display:grid;
  gap: clamp(18px, 3.5vw, 150px);
  position: relative;

  /* ▼ ここがポイント：テキストの内容幅で収縮 */
  width: max-content;        /* コンテンツ幅にフィット */
  max-width: 100%;           /* とはいえ溢れない安全弁 */
  justify-self: start;       /* グリッドの右カラムで横伸びさせない */

  /* テキスト開始位置（= バッジ幅 + 隙間） */
  --badge: 36px;
  --gap: 12px;
  --text-start: calc(var(--badge) + var(--gap));
}

.steps__item{
  display:flex; align-items:flex-start; gap: var(--gap);
  font-weight:800;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.8;
}
.steps__item span{
  display:inline-grid; place-items:center;
  width:var(--badge); height:var(--badge); flex:0 0 var(--badge);
  border-radius:50%; background:#fff; color:var(--brand);
  font-weight:900; box-shadow:0 2px 0 rgba(0,0,0,.08);
}

/* 2) アイコンは .steps 幅（=テキスト幅）内で絶対配置 */
.steps__icon{
  position: absolute;
  width: 48px; height: 48px;
  background: no-repeat center / contain url("../../images/ico-runner.png");
  opacity: 0;                       /* 初期は非表示 */
  transition: opacity .6s var(--easing);
  z-index: 1;
  pointer-events: none;
}
/* 親が可視化されたら、各アイコンを指定遅延で表示 */
.steps.is-in .steps__icon{
  opacity: 1;
  transition-delay: var(--delay, .4s);
}

/* 横位置は“テキスト幅”内で */
.steps{
  --badge: 36px; --gap: 12px; --text-start: calc(var(--badge) + var(--gap));
  width: max-content; max-width: 100%; justify-self: start;
}
.steps__icon--left   { left: var(--text-start); }
.steps__icon--center { left: calc(var(--text-start) + (100% - var(--text-start))/2); transform: translateX(-50%); }
.steps__icon--right  { right: 0; }

/* 縦位置は 1–2 / 2–3 / 3–4 の中間 */
.steps__icon--left   { top: 15%; }
.steps__icon--center { top: 42%; }
.steps__icon--right  { top: 75%; }

@media (max-width:768px){
  .steps{ width:100%; }
  .steps__icon{ display:none; }
}

/* Signup タイトルだけ中央寄せ（フォームは左寄せのまま） */
#signup-title {
  display: block;               /* ブロック要素化 */
  text-align: center;           /* 文字と下線を中央揃え */
  margin-left: auto;
  margin-right: auto;
  width: fit-content;           /* タイトル幅で中央寄せ */
}

/* =========================================
   なぜ、採用はワーキャリなのか（最終版）
   2025/11/08
========================================= */

/* ▼セクション全体をややタイトに：最大960px */

.wc-reasons__wrap{
	background: var(--muted);
	max-width: 100%;
	padding: 30px 0;
}


.wc-reasons__container{
  width: min(80rem, 100% - 4rem);  /* ←960px */
  margin-inline: auto;
}

/* 見出し */
.wc-reasons__head{
  text-align: center;
  margin-bottom: clamp(3.2rem, 4vw, 4.8rem);
}

/* 丸とグリッド */
.wc-reasons__list {
  list-style: none;      /* ← 点を消す */
  margin: 0;             /* ← デフォルト余白を消す */
  padding: 0;            /* ← 左インデントを消す */
  --gap: clamp(2rem, 2.8vw, 3rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: start;
}
@media (min-width: 768px){
  .wc-reasons__list{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .wc-reasons__list{ grid-template-columns: repeat(3, 1fr); }
}

/* 丸のサイズを200〜210px上限に */
.wc-reasons__circle{
  width: clamp(15rem, 20vw, 21rem); /* 150〜210px */
  aspect-ratio: 1/1;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--brand, #11395f);
  position: relative;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 6px 18px rgba(0,0,0,.08);
  transform: scale(.96);
}
.wc-reasons__circle-text{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.5vw, 1.9rem);
  line-height: 1.6;
  padding: 2.4rem;
}

/* テキスト部分も少し詰める */
.wc-reasons__desc{
  text-align: left;
  max-width: 38ch;               /* 既存44ch→38ch */
  margin: 1.4rem auto 0;
  font-size: 1rem;
  line-height: 1.8;
  opacity: .95;
}

/* アニメーション（そのまま） */
.wc-reasons__item.reveal{ opacity:0; transform: translateY(1.6rem) scale(.98); }
.wc-reasons__item.reveal.is-animated{
  opacity:1; transform: translateY(0) scale(1);
  transition: transform .8s var(--easing), opacity .8s var(--easing);
  transition-delay: var(--delay, 0ms);
}

/* 丸の中の2行目を小さめにする */
.wc-reasons__circle-text small {
  font-size: 80%;
  opacity: .9;
  letter-spacing: .03em;
}
/* 丸の中（1行目/2行目）の行間を詰める */
.wc-reasons__circle-text{
  line-height: 1.30;           /* 既存1.6 → 1.30 */
}
.wc-reasons__circle-text small{
  font-size: 85%;
  line-height: 1.20;           /* 既存1.4 → 1.20 */
  margin-top: 0.25em;          /* 既存0.4em → 0.25em */
  font-weight: 600;
}

/* 説明テキストの行間を少し詰める＆上余白を控えめに */
.wc-reasons__desc{
  line-height: 1.65;           /* 既存1.8/1.9 → 1.65 */
  margin-top: 1.2rem;          /* 既存1.4〜1.6rem → 1.2rem */
  letter-spacing: .01em;       /* ほんの少しだけ締める */
}

/* =========================================
   なぜ、採用はワーキャリなのか（修正版）
   2025/11/08 checked
========================================= */

/* 丸の中のテキスト（行間＋サイズ調整） */
.wc-reasons__circle-text{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.5vw, 1.9rem);
  line-height: 1.3 !important;   /* ← 強制的に詰める */
  padding: 2.4rem;
}


/* 本文テキストの行間・余白を調整 */
.wc-reasons__desc{
  text-align: left;
  max-width: 38ch;
  margin: 1.0rem auto 0 !important; /* ← 上余白をさらに詰め */
  font-size: 1rem;
  line-height: 1.9 !important;       /* ← 詰めて効果を明確に */
  opacity: .95;
  letter-spacing: .01em;
	font-weight: 500;
}

/* 丸の中の行間をややタイトに */
.wc-reasons__circle-text{
  line-height: 1.3;
}

/* 2行目だけ小さく（競合回避のため少し強い指定＋!important） */
.wc-reasons__circle .wc-reasons__circle-text .wc-sub{
  display: block;
  font-size: 0.65em !important;  /* 一回り小さく */
  line-height: 1.2 !important;
  margin-top: 0.25em;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .95;
}
/* 丸の中の行間を詰める（親） */
#reasons .wc-reasons__circle-text{
  line-height: 1.25 !important;
}

/* 下の行だけ小さくする（子） */
#reasons .wc-reasons__circle-text > .wc-sub{
  display: block !important;
  font-size: 0.85em !important;   /* ←小さくなる */
  line-height: 1.15 !important;
  margin-top: 0.2em !important;
  font-weight: 600;
  letter-spacing: .02em;
}

/* 版本: 2025/11/08 | デザイン基調はサイト共通。背景・大見出しは既存側で定義済み前提 */
:root{
  --container-narrow: min(96rem, 100% - 4rem); /* 960px幅 */
  --brand: #11395f;         /* 濃紺（必要に応じてサイト共通変数を流用） */
  --paper: #0e3a5f;         /* 背景濃色は既存設定を尊重、ここは予備 */
  --ink-on-dark: #fff;
  --accent: #e1302c;        /* カプセル内の赤括弧 */
  --pill-bg: #fff;
  --pill-shadow: 0 10px 28px rgba(0,0,0,.12);
  --radius-pill: 20px;
  --easing: cubic-bezier(.2,.65,.2,1);
}

/* ===== レイアウト ===== */
.wc-dekikatsu{
  /* 背景色とタイトルは親側ですでに設定済みと伺ったため未指定 */
  color: var(--ink-on-dark);
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(6rem, 8vw, 8rem);
  background:var(--brand);
}
.wc-dekikatsu__container{
  width: var(--container-narrow);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.4rem, 3vw, 3.2rem);
  align-items: start;
}
@media (min-width: 1024px){
  .wc-dekikatsu__container{
    grid-template-columns: 420fr 540fr;  /* 左右比率（イラスト：本文） */
    column-gap: clamp(3.2rem, 4vw, 4rem);
  }
}

/* ===== 左側 ===== */
.wc-dekikatsu__illust img{
  width: clamp(22rem, 32vw, 36rem);
  height: auto;
  display: block;
}
.wc-dekikatsu__catch{
  margin-top: clamp(1.6rem, 2vw, 2.4rem);
  display: grid;
  gap: .4em;
  font-weight: 700;
  font-size: clamp(2.8rem, 4.2vw, 5.6rem); /* スクショに近い大きめ */
  line-height: 1.1;
  letter-spacing: .06em;
}

/* ===== 右側 ===== */
.wc-dekikatsu__lead{
  font-size: clamp(1.5rem, 1.6vw, 1.6rem);
  line-height: 1.9;
  max-width: 60ch;
  margin: 0 0 clamp(2.0rem, 3vw, 3rem);
}
.wc-dekikatsu__note{
  font-size: .92em;
  opacity: .85;
}

/* ===== ピル（白い角丸） ===== */
.wc-dekikatsu__pills{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 2vw, 1.6rem);
}
@media (min-width: 768px){
  .wc-dekikatsu__pills{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px){
  .wc-dekikatsu__pills{ grid-template-columns: repeat(3, 1fr); }
}

.wc-dekikatsu__pill{
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: clamp(7.6rem, 9vw, 9.6rem);
  padding: clamp(1.4rem, 1.8vw, 1.8rem) clamp(1.6rem, 2vw, 2.4rem);
  background: var(--pill-bg);
  color: #24313c;
  border-radius: clamp(14px, 2vw, var(--radius-pill));
  box-shadow: var(--pill-shadow);
  transition: transform .35s var(--easing), box-shadow .35s var(--easing);
}
.wc-dekikatsu__pill:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.16);
}

/* 中の文字（赤い括弧はやや小さく） */
.wc-dekikatsu__pill-main{
  font-weight: 700;
  font-size: clamp(1.6rem, 1.6vw, 1.8rem);
  line-height: 1.25;
}
.wc-dekikatsu__pill-sub{
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  line-height: 1.25;
  color: var(--accent);
  margin-top: .2em;
}

/* ===== アニメーション：既存 .reveal と連動 ===== */
.wc-dekikatsu__pill.reveal{ opacity: 0; transform: translateY(1.6rem); }
.wc-dekikatsu__pill.reveal.is-animated{
  opacity: 1; transform: translateY(0);
  transition: transform .6s var(--easing), opacity .6s var(--easing);
  transition-delay: var(--delay, 0ms);
}

/* 白文字タイトル用のアンダーライン */
.wc-title--light .intro__underline {
  background-color: #fff !important;   /* ← 白に変更 */
  opacity: 1;                          /* 透過なしでくっきり */
}

/* アニメーションや既存スタイルがgradientの場合の保険 */
.wc-title--light .intro__underline::before,
.wc-title--light .intro__underline::after {
  background-color: #fff !important;
}

/* =========================================
  でき活・やる活 セクション（完全版）
  2025/11/08
  想定：html{font-size:62.5%} / BEM / PC1024+で2カラム
========================================= */

:root{
  --container: min(96rem, 100% - 4rem); /* 960px */
  --ink-on-dark: #fff;
  --pill-bg: #fff;
  --pill-shadow: 0 10px 28px rgba(0,0,0,.14);
  --accent: #e1302c;  /* ピルの赤括弧 */
  --easing: cubic-bezier(.2,.65,.2,1);
}

/* セクション余白（背景色は親で設定済み） */
.wc-dekikatsu{
  color: var(--ink-on-dark);
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(6rem, 8vw, 8rem);
}

/* タイトル：中央寄せ＋白いアンダーライン */
#dekikatsu .wc-title,
#dekikatsu .wc-title--light{ text-align: center; }
#dekikatsu .wc-title--light .intro__underline{
  background-color: #fff !important;
  opacity: 1;
}

/* コンテナ：PCで 左30% / 右70% */
.wc-dekikatsu__container{
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;       /* SP: 縦積み */
  gap: clamp(2rem, 3vw, 3rem);
  align-items: start;
}
@media (min-width: 1024px){
  .wc-dekikatsu__container{
    grid-template-columns: 30% 70%;
    column-gap: clamp(2.4rem, 4vw, 4rem);
  }
}

/* ========== 左：イラスト＋「でき活/やる活」 ========== */
.wc-dekikatsu__illust img{
  width: clamp(24rem, 30vw, 36rem);
  height: auto;
  display: block;
}

.wc-dekikatsu__catch{
  margin-top: clamp(1.2rem, 2vw, 2rem);
  display: grid;
  gap: .35em;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .06em;
  font-size: 6.3rem;  /* ← 63px 指定 */
}
@media (max-width: 1023.98px){
  .wc-dekikatsu__catch{ font-size: clamp(3.2rem, 6vw, 5rem); }
}

/* ========== 右：本文（白角30pxボックス）＋ピル ========== */

/* 白ボックス（段落そのものをパネル化） */
.wc-dekikatsu__lead{
  color: #fff;
         /* ← 角丸30px */
  padding:0px;
  margin: 0 0 clamp(2.2rem, 3vw, 3rem);
  font-size: 1.3rem;                  /* ← 18px */
  line-height: 1.8;
  font-weight: 700;                   /* ← weight 700 */
}
.wc-dekikatsu__lead .wc-dekikatsu__note{
  display: inline-block;
  margin-top: .6em;
  font-size: .9em;
  font-weight: 600;
  opacity: .85;
}

/* ピル一覧 */
.wc-dekikatsu__pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ← 3列×2行のまま */
  gap: clamp(0.4rem, 0.8vw, 0.8rem);     /* ← 間隔を半分に（以前: 1.2rem） */
  justify-content: center;
  align-items: start;
  width: min(54rem, 90%);
  margin: clamp(2rem, 3vw, 3rem) 0;
  padding: 0;
}
@media (min-width: 768px){
  .wc-dekikatsu__pills{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px){
  .wc-dekikatsu__pills{ grid-template-columns: repeat(3, 1fr); }
}

.wc-dekikatsu__pill{
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: clamp(7.6rem, 9vw, 9.6rem);
  padding: 20px 20px;
  background: var(--pill-bg);
  color: #24313c;
  border-radius: 20px;
  box-shadow: var(--pill-shadow);
  transition: transform .35s var(--easing), box-shadow .35s var(--easing);
}
.wc-dekikatsu__pill:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
}
.wc-dekikatsu__pill-main{
  font-weight: 700;
  font-size: clamp(1.6rem, 1.6vw, 1.8rem);
  line-height: 1.25;
}
.wc-dekikatsu__pill-sub{
  color: var(--accent);
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  line-height: 1.25;
  margin-top: .2em;
}

/* .reveal 連動（既存JSでOK） */
.wc-dekikatsu__pill.reveal{ opacity: 0; transform: translateY(1.6rem); }
.wc-dekikatsu__pill.reveal.is-animated{
  opacity: 1; transform: translateY(0);
  transition: transform .6s var(--easing), opacity .6s var(--easing);
  transition-delay: var(--delay, 0ms);
}


/* ピル全体の最大幅を制限＋中央寄せ */
.wc-dekikatsu__pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ← 3列×2行のまま */
  gap: clamp(0.4rem, 0.8vw, 0.8rem);     /* ← 間隔を半分に（以前: 1.2rem） */
  justify-content: center;
  align-items: start;
  width: min(54rem, 100%);
  margin: clamp(2rem, 3vw, 3rem) 0;
  padding: 0;
}
@media (min-width: 768px){
  .wc-dekikatsu__pills{
    grid-template-columns: repeat(2, 1fr);
    max-width: 85%;
  }
}
@media (min-width: 1200px){
  .wc-dekikatsu__pills{
    grid-template-columns: repeat(3, 1fr);
    max-width: 65%;           /* ← PCではさらに少し絞る */
  }
}

@media (max-width: 680px){
  .wc-dekikatsu__pills{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ← 3列×2行のまま */
  gap: clamp(0.4rem, 0.8vw, 0.8rem);     /* ← 間隔を半分に（以前: 1.2rem） */
  justify-content: center;
  align-items: start;
  width: min(54rem, 100%);
  margin: clamp(2rem, 3vw, 3rem) 0;
  padding: 0;
}

	.wc-dekikatsu__pill-sub{
  color: var(--accent);
  font-size: clamp(1rem, 1.5vw, 1.6rem);
  line-height: 1.25;
  margin-top: .2em;
}
	
}

/* ピル個別：中央寄せ、やや細身に */
/* 各ピル */

.wc-dekikatsu__pill:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
}

/* 縦中央揃えに変更 */
.wc-dekikatsu__container{
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 3vw, 3rem);
  align-items: center; /* ← ここを center に */
}
@media (min-width: 1024px){
  .wc-dekikatsu__container{
    grid-template-columns: 30% 70%;
    column-gap: clamp(2.4rem, 4vw, 4rem);
    align-items: center; /* ← PC時も中央揃え */
  }
}

/* =========================================
   左カラム（でき活・やる活）
   2025/11/08 調整版
========================================= */

.wc-dekikatsu__left{
  display: flex;
  flex-direction: column;
  justify-content: center;   /* ← 縦中央揃え */
  align-items: center;       /* ← 横中央揃え */
  text-align: center;
  gap: clamp(1.2rem, 2vw, 1.8rem); /* イラストと文字の間隔 */
}

/* イラスト画像を大きめに調整 */
.wc-dekikatsu__illust img{
  width: clamp(28rem, 38vw, 42rem);  /* ← 280〜420pxの範囲で拡大 */
  height: auto;
  display: block;
}

/* 「でき活・やる活」文字：少し小さく・行間を詰める */
.wc-dekikatsu__catch{
  display: grid;
  gap: .25em;                        /* ← 行間を狭く */
  font-weight: 700;
  font-size: clamp(3.6rem, 4.5vw, 4.8rem); /* ← 約36〜48px程度 */
  line-height: 1.1;                  /* ← 行間を詰める */
  letter-spacing: .04em;
  color: #fff;
}

/* ===== 全体：左右を上揃えに（PC時） ===== */
@media (min-width: 1024px){
  .wc-dekikatsu__container{
    /* 以前 center にしていた場合は上書き */
    align-items: start; /* ← 右カラムの上端に合わせる */
  }
}

/* ===== 左カラム：上寄せ＆間隔を詰める ===== */
.wc-dekikatsu__left{
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* ← 縦の中央ではなく上に寄せる */
  align-items: center;
  text-align: center;
  gap: .1em;                   /* ← 画像と文字の間をさらに狭く */
}

/* figure のデフォルト余白を除去してズレを防ぐ */
.wc-dekikatsu__illust{ margin: 0; }
.wc-dekikatsu__illust img{
  width: clamp(28rem, 38vw, 42rem);
  height: auto;
  display: block;
}

/* でき活・やる活：行間をタイトに、サイズは控えめのまま */
.wc-dekikatsu__catch{
  line-height: 1.08;        /* ← さらに詰める */
  font-size: clamp(3.6rem, 4.5vw, 4.8rem);
  letter-spacing: .04em;
}

/* =========================================
   左カラムの画像とテキスト間の余白を詰める
   2025/11/08
========================================= */

/* 左カラム全体：上下は自然、間を詰める */
.wc-dekikatsu__left{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: 0; /* ← gapを完全になくす */
}

/* figureタグのデフォルト余白を消去 */
.wc-dekikatsu__illust {
  margin: 0;
  padding: 0;
}

/* 画像下の余白をゼロに */
.wc-dekikatsu__illust img {
  display: block;
  margin-bottom: 0;       /* ← 下マージンなし */
}

/* 「でき活やる活」：上マージンをゼロに */
.wc-dekikatsu__catch {
  margin-top: 0 !important;  /* ← 画像との間隔をなくす */
  padding-top: 0;
  line-height: 1.05;         /* ← 行間もやや詰める */
  font-size: clamp(3.6rem, 4.5vw, 4.8rem);
  font-weight: 700;
  letter-spacing: .04em;
}

/* スマホではほんの少しだけ間隔を戻す */
@media (max-width: 767.98px){
  .wc-dekikatsu__catch { margin-top: .4rem; }
}

/* =========================================
   Core Skill Compass
   画像の間隔を狭く & 上部に説明文
   2025/11/08
========================================= */

:root{
  --compass-container: min(100rem, 100% - 4rem); /* 1000pxに少し絞る（任意） */
  --gallery-gap: clamp(1rem, 1vw, 1.0rem);     /* ← 画像の間隔：ここを小さくすれば更に詰まる */
  --card-radius: 16px;
  --card-shadow: 0 18px 42px rgba(0,0,0,.08);
}

/* ギャラリー（画像2枚の間隔を狭く） */
.compass__gallery{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 伸び切り */
  column-gap: 10px;  /* 中央の隙間はここで制御 */
  row-gap: 10px;
  align-items: start;
  justify-items: stretch; /* ← centerをやめて満幅に */
  margin-top: 28px;
}
@media (min-width: 992px){
  .compass__gallery{
    grid-template-columns: 1fr 1fr;     /* PCで2列 */
    gap: var(--gallery-gap);            /* デフォルト約16〜20px */
  }
}

/* カード（白ボックス + 影） */
.compass__card{
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: clamp(1.2rem, 1.8vw, 1.6rem);
}
.compass__card img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;                  /* 画像端も少し丸めると上品 */
}
.compass__cap{
  margin-top: .6rem;
  font-size: 1.3rem;
  color: #6b7785;
}

/* reveal 連動は既存JSでOK */
.compass__card.reveal{ opacity:0; transform: translateY(1.6rem); }
.compass__card.reveal.is-animated{
  opacity:1; transform: translateY(0);
  transition: transform .6s cubic-bezier(.2,.65,.2,1), opacity .6s cubic-bezier(.2,.65,.2,1);
  transition-delay: var(--delay, 0ms);
}

/* コンパス2枚：列を等分にしてカード幅を揃える */
#compass .compass__gallery{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← 等分 */
  column-gap: 5x;                                 /* 中央の間隔だけ指定 */
  justify-content: center;
  align-items: start;
  margin-top: 28px;
}

/* 各カードの横幅を統一（padding込みで同サイズ） */
#compass .compass__chart{
  box-sizing: border-box;
  width: clamp(320px, 44vw, 560px); /* ← PCで同じ見え幅に */
  margin: 0 auto;                   /* 中央寄せ */
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  text-align: center;
}

/* 画像はカード幅にフィット（比率は維持） */
#compass .compass__chart img{
  display: block;
  width: 100%;
  height: auto;
}

/* SPは1列 */
@media (max-width: 767.98px){
  #compass .compass__gallery{ grid-template-columns: 1fr; }
  #compass .compass__chart{ width: 100%; max-width: 560px; }
}


/* =========================================
   採用から育成までサポート
   2025/11/08
========================================= */

.wc-support {
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(6rem, 8vw, 8rem);
	text-align: center;
}

.wc-support__container {
  width: min(1200px, 100% - 4rem);
  margin-inline: auto;
}

/* intro共通タイトル継承済み（センター・アンダーライン） */

/* リード文 */
.wc-support__lead {
  text-align: left;
  font-size: clamp(1rem, 1vw, 15px);
  line-height: 1.9;
  color: var(--ink, #222);
  margin: 20px auto clamp(3.6rem, 5vw, 4rem);
  max-width: 48em;
  opacity: 0.95;
}

/* 図 */
.wc-support__figure {
  text-align: center;
  margin: 0 auto;
}

.wc-support__figure img {
  display: inline-block;
  max-width: 100%;
  height: auto;

}
/* =========================================
   企業登録フォーム（Casa BRUTUS調）
   2025/11/08
========================================= */
:root{
  --brand: #11395f;
  --muted: #f6f7f9;
  --ink: #1f2a36;
  --pad: 1rem;
  --easing: cubic-bezier(.2,.65,.2,1);
}

.wc-form{
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(6rem, 8vw, 8rem);
}
.wc-form__container{
  width: min(96rem, 100% - 4rem); /* 960px */
  margin-inline: auto;
	text-align:center;
	
}

/* タイトル下のリード */
.wc-form__note{
  text-align: center;
  color: #c43333;
  font-size: clamp(1.2rem, 1.5vw, 15px);
  margin: 0 auto clamp(2.4rem, 3vw, 3.2rem);
	font-weight: 700;
}

/* カード本体 */
.wc-form__card{
  padding: clamp(2rem, 3vw, 3rem);
}

/* グリッド：PC 2カラム／SP 縦積み */
.wc-form__grid{
  display: grid;
  grid-template-columns:15rem 1fr; /* 左ラベル固定、右可変 */
  column-gap: clamp(1rem, 1vw, 1rem);
  row-gap: clamp(1rem, 1vw, 1rem);
}
@media (max-width: 768px){
  .wc-form__grid{ grid-template-columns: 1fr; }
}

.wc-form__row{ display: contents; } /* 各行を直に並べる */

/* ラベル（左） */
.wc-form__label{
  text-align: right;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
}
@media (max-width: 768px){ .wc-form__label{ text-align: left; } }

/* 必須バッジ */
.wc-form__req{
  display: inline-block;
  margin-left: .6em;
  padding: .2em .6em;
  background: #e1302c;
  color: #fff;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1;
}

/* 入力（右） */
.wc-form__field{ margin: 0; }
.wc-form__field input{
  width: 80%;
  box-sizing: border-box;
  height: clamp(3rem, 3vw, 1rem);
  padding: 0 1.2rem;
  border: 1.5px solid #b7c6dc;
  border-radius: 8px;
  font-size: 0.8rem;
  outline: none;
  transition: border-color .2s var(--easing), box-shadow .2s var(--easing);
}
.wc-form__field input:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(17,57,95,.12);
}

/* エラー表示 */
.wc-form__field.is-error input{
  border-color: #e1302c;
  box-shadow: 0 0 0 3px rgba(225,48,44,.12);
}
.wc-form__error{
  margin-top: .4rem;
  color: #e1302c;
  font-size: 1.3rem;
  min-height: 1.3em; /* レイアウトの揺れ防止 */
}

/* 送信ボタン */
.wc-form__actions{
  margin-top: clamp(2.4rem, 3vw, 3.2rem);
  display: grid;
  place-items: center;
}
.wc-form__submit{
  appearance: none;
  border: none;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  padding: 0.8rem 2.4rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 8px 20px rgba(17,57,95,.24);
  cursor: pointer;
  transition: transform .2s var(--easing), box-shadow .2s var(--easing);
}
.wc-form__submit:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(17,57,95,.28); }
.wc-form__submit:active{ transform: translateY(0); box-shadow: 0 6px 16px rgba(17,57,95,.22); }

/* ラベル（左） */
.wc-form__label{
  align-self: center;           /* ← center → start に変更（上端揃え） */
  text-align: right;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
  line-height: 1.4;            /* 追加：余白を自然に */
  padding-top: 0.4rem;         /* 微調整：上下位置のずれ防止 */
}
@media (max-width: 768px){
  .wc-form__label{
    text-align: left;
    padding-top: 0;            /* SP時はリセット */
  }
}

/* 丸のサイズを200〜210px上限に */
.wc-reasons__circle{
  width: clamp(15rem, 18vw, 18rem); /* 150〜210px */
  aspect-ratio: 1/1;
  margin-inline: auto;
  border-radius: 50%;
  position: relative;
  background: var(--brand, #11395f);
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 6px 18px rgba(0,0,0,.08);
  overflow: hidden; /* ←画像を円形に切り抜くため必須 */
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(.96);
}

/* 円の中に入れる画像（自動で円にフィット） */
.wc-reasons__circle img {
  width: 90%;                 /* ←画像の占有率（70〜90%で調整可） */
  height: auto;
  object-fit: contain;        /* ←画像の縦横比維持でフィット */
  display: block;
}

/* テキストを重ねたい場合（中央配置） */
.wc-reasons__circle-text{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.5vw, 1.9rem);
  line-height: 1.3;
  padding: 2.4rem;
  text-align: center;
  z-index: 2;                 /* ←画像の上に重ねる場合 */
}



/* グリッド全体のレイアウト調整 */
.wc-reasons__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.2rem, 2vw, 1.8rem); /* ← 余白をややタイトに */
  align-items: start;
  justify-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .wc-reasons__list {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 3vw, 2.8rem);
  }
}
@media (min-width: 1024px) {
  .wc-reasons__list {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* ← 幅いっぱい */
    gap: clamp(1.5rem, 2vw, 2rem);                    /* ← 丸間を狭く */
    width: min(95%, 1200px);                         /* ← 最大幅を少し広げる */
    margin-inline: auto;
  }
}

/* 「今すぐ会員登録」専用のアンダーライン色指定 */
#corp-entry-title .intro__underline {
  background-color: #e1302c; /* 固定色にする場合 */
}

/* ===== Hero: 1920→可変。px座標とscaleを廃止し％座標へ ===== */

/* セクション本体：高さは16:9を基準に確保（680px〜100vh） */
header.hero.hero--v2{
  position: relative;
  overflow: hidden;
  background: #9AC5F1;
  min-height: clamp(var(--hero-min-h,680px), 56.25vw, 100vh); /* 56.25vw=16:9 */
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* キャンバス：比率固定の可変ボックス。中央に配置 */
.hero__canvas{
  position: relative;
  width: min(100vw, var(--hero-max-w, 1920px));
  aspect-ratio: 16 / 9;          /* ← 1920×1080の比率を保持 */
  height: auto;
  transform: none !important;    /* ← 既存のscaleを無効化 */
  transform-origin: unset !important;
  margin-inline: auto;
  z-index: 1;
}

/* 背景（放射線）：キャンバス全面カバー */
.hero__img--burst{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none !important;
  opacity: 1;                    /* 初期表示で見えるように */
  z-index: 1;
}

/* ===== 前景レイヤー（％座標に換算：1920×1080基準） ===== */
/* 参考換算： left% = (px / 1920)*100,  top% = (px / 1080)*100,  width% = (px / 1920)*100 */

/* L3: ロゴ（元: top:164px; left:100px; width:520px）*/
.hero__img--logo{
  position: absolute !important;
  left: 5.21%;
  top: 15.19%;
  width: clamp(220px, 27.1%, 520px);
  z-index: 50;
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
}

/* H1（元: top:120px; left:105px）。テキストは％座標＋vwスケール */
.hero__headline{
  position: absolute !important;
  left: 5.47%;
  top: 11.11%;
  margin: 0 !important;
  color: var(--brand);
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 60px);
  line-height: 1.3;
  z-index: 50;
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
}

/* H2（元: top:560px; left:105px） */
.hero__subhead{
  position: absolute !important;
  left: 5.47%;
  top: 51.85%;
  margin: 0 !important;
  color: var(--brand);
  font-weight: 600;
  font-size: clamp(18px, 1.4vw, 32px);
  line-height: 1.55;
  z-index: 50;
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
}

/* 人物（元: bottom:-80px; right:0; width:950px） */
.hero__img--people{
  position: absolute !important;
  right: 0;
  bottom: -7.41%;                 /* -80 / 1080 */
  width: clamp(360px, 49.5%, 950px);
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
  z-index: 2;
}

/* コンパス（元: bottom:160px; right:350px; width:450px）*/
.hero__img--compass{
  position: absolute !important;
  right: 18.23%;                  /* 350 / 1920 */
  bottom: 14.81%;                 /* 160 / 1080 */
  width: clamp(200px, 23.4%, 450px);
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
  z-index: 3;
}

/* スクロール誘導はキャンバス外で中央 */
.scroll-big{
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 4;
}

/* ===== タブレット以下：既存のモバイル設計を活かす ===== */
@media (max-width: 960px){
  /* 既存SPレイアウトを優先（スタック） */
  header.hero.hero--v2{ padding: 88px 0 84px; min-height: auto; }
  .hero__canvas{
    width: 100%;
    aspect-ratio: auto;           /* ← SPは縦積みに切替 */
    display: grid; gap: 18px;
  }
  .hero__img--burst{ display:none; } /* ← 背景はセクション背景色に委ねる */
  .hero__img--logo,
  .hero__headline,
  .hero__subhead,
  .hero__img--people,
  .hero__img--compass{
    position: relative !important;
    inset: auto !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    width: auto;
    margin-inline: auto;
  }
  .hero__img--logo{ width: min(72%, 320px) !important; }
  .hero__headline{ width: min(92vw, 520px); font-size: clamp(24px, 6.5vw, 34px); text-align:left; }
  .hero__subhead{ width: min(92vw, 520px); font-size: clamp(16px, 4.8vw, 22px); text-align:left; }
  .hero__img--people{ width: min(92vw, 560px) !important; }
  .hero__img--compass{ width: min(60vw, 260px) !important; margin-top: -16%; z-index: 3; }
}

/* ===== 修正1：ヒーロー全体を「上揃え」にする ===== */
header.hero.hero--v2{
  /* 中央配置 → 上揃え（縦）・中央（横） */
  display: grid;
  /* place-items: center; ←無効化 */
  place-items: start center;
  /* 固定ヘッダー分の安全域（必要なら値調整） */
  padding-top: clamp(80px, 6vw, 120px);
  padding-bottom: 96px; /* スクロール誘導の余白 */
}

/* キャンバスは上から始まる（中央寄せをやめる） */
.hero__canvas{
  align-self: start;            /* ← 上揃えに固定 */
  margin-top: 0 !important;
}

/* ===== 修正2：SPでも水色背景を維持 ===== */
header.hero.hero--v2{
  background: #9AC5F1;         /* 会社ヒーローの水色を常に適用 */
}

/* 既存の「SPで::beforeに濃紺＋layer2を当てる」指定を上書き */
@media (max-width:960px){
  header.hero.hero--v2::before{
    content:"";
    position:absolute; inset:0;
    background: #9AC5F1 url("images/layer2.png") center/cover no-repeat; /* 水色＋放射線 */
    opacity: .85;                    /* 放射線を薄めたい場合は 0.7〜0.9 で調整 */
    z-index: 0;
    transform: none !important;
    animation: none !important;
  }
  /* SPでもburstを隠したい場合はこのまま。見せたいならコメントアウト */
  .hero__img--burst{ display: none !important; }
}

/* ===== 修正3：見出し群を“やや上”に寄せる微調整（ズレ解消） ===== */
/* 体感で約3%上へ。数値はお好みで 1〜4% 調整してください */
.hero__headline{ top: calc(11.11% - 3%); }   /* 元 11.11% */
.hero__subhead{  top: calc(51.85% - 3%); }   /* 元 51.85% */

/* ===== 修正4：スクロール誘導は常に画面下中央 ===== */
.scroll-big{
  position: fixed;                 /* セクション外の余白に影響されない */
  left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 10;
}
@media (min-width:1281px){
  .scroll-big{ position: absolute; } /* PCの見た目を戻したい場合 */
}

/* ===== もっと上へ：PC・タブレットで全体を持ち上げる ===== */
@media (min-width: 961px){
  /* 中：まずは 40px〜160px ぶん上げ（画面高で自動可変） */
  header.hero.hero--v2{
    --hero-lift: clamp(40px, 6vh, 160px);
  }
  .hero__canvas{
    /* セクション内でキャンバス自体を上に引き上げる */
    margin-top: calc(-1 * var(--hero-lift));
  }

  /* 見出し・サブ見出しをさらに上へ（%は16:9基準の相対） */
  .hero__headline{ top: 8.5%; }   /* 旧 11.11% → 8.5%（強め） */
  .hero__subhead { top: 46.0%; }  /* 旧 51.85% → 46%       */

  /* 右側の要素もバランスを取って微調整（必要なら調整） */
  .hero__img--compass{ bottom: 18%; } /* 旧 14.81% → 18%（やや上） */
  .hero__img--people { bottom: -9%; } /* 旧 -7.41% → -9%（ほんの少し上） */
}

/* ===== 最大でさらに上げたい場合（強） → 上の@mediaの直後に有効化 ===== */
/*
@media (min-width: 961px){
  header.hero.hero--v2{ --hero-lift: clamp(80px, 9vh, 220px); }
  .hero__headline{ top: 7.2%; }
  .hero__subhead { top: 44.0%; }
}
*/

/* ===== A) さらに上へ：余白削減＋キャンバス持ち上げ（PC/Tab） ===== */
@media (min-width: 961px){
  header.hero.hero--v2{
    /* セクションの上パディングを薄く */
    padding-top: clamp(20px, 3vw, 60px);
    padding-bottom: 96px;
    place-items: start center; /* 上揃え */
    --hero-lift: clamp(120px, 9vh, 240px); /* ← 強めに上げる */
  }
  .hero__canvas{ align-self: start; margin-top: calc(-1 * var(--hero-lift)); }

  /* レイヤー再配置（%は1920×1080基準） */
  .hero__img--logo{   top: 12%; left: 5.21%; width: clamp(220px, 27.1%, 520px); }
  .hero__headline{    top: 22%; left: 5.47%; font-size: clamp(28px, 2.6vw, 60px); }
  .hero__subhead{     top: 42%; left: 5.47%; font-size: clamp(18px, 1.4vw, 32px); }

  /* 右側の重なりも上寄せに微調整 */
  .hero__img--compass{ bottom: 18%; right: 18.23%; width: clamp(200px, 23.4%, 450px); }
  .hero__img--people { bottom: -8%; right: 0;    width: clamp(360px, 49.5%, 950px); }
}

/* ===== B) SPの文字色を元に戻す（白指定を打ち消し） ===== */
@media (max-width: 960px){
  header.hero.hero--v2 .hero__headline,
  header.hero.hero--v2 .hero__subhead{
    color: var(--brand) !important;   /* ← 紺に戻す */
  }
}

/* ===== C) SPでも放射を表示（非表示を解除して全面カバー） ===== */
@media (max-width: 960px){
  /* 水色背景は維持 */
  header.hero.hero--v2{ background:#9AC5F1; }

  /* burstレイヤーを表示＆カバー */
  .hero__img--burst{
    display:block !important;
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    opacity:1 !important;
    transform:none !important;
    z-index:0; /* テキストや人物の下 */
  }

  /* 既存の ::before 背景アニメは不要なら無効化 */
  header.hero.hero--v2::before{
    content:none !important;
  }
}

/* ===== D) さらに上げたい時の微調整（任意） ===== */
/* H1/H2を0.5〜1%刻みで詰める例
.hero__headline{ top: 21.5%; }
.hero__subhead { top: 41.5%; }
*/

/* ===== 1795pxを含むPC帯の“放射が縦100%にならない”を固定 ===== */
@media (min-width: 961px){
  .hero__canvas{
    /* 16:9の可変キャンバスを維持（高さ=幅×9/16） */
    width: min(100vw, var(--hero-max-w, 1920px));
    aspect-ratio: 16 / 9;
    position: relative;
    align-self: start;
  }
  .hero__img--burst{
    /* キャンバス全面を確実にカバー */
    position: absolute !important;
    inset: 0 !important;              /* top:0 right:0 bottom:0 left:0 */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;     /* 1795px幅でも縦いっぱいに */
    object-position: center !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 1;
  }
}

/* ===== H1をロゴの下に。フォントも拡大（右画像は変更なし） ===== */
/* 1920×1080基準の%座標：右側バランスは触らない */
@media (min-width: 961px){
  /* ロゴ（据え置き） */
  .hero__img--logo{
    top: 12%; left: 5.21%;
    width: clamp(260px, 27.1%, 560px);   /* 少しだけ可読性UP */
    z-index: 50;
  }

  /* H1：ロゴ直下（余白 ≒ 4%）。フォント大きめ */
  .hero__headline{
    position: absolute !important;
    left: 5.47%;
    top: 26%;                            /* ← ロゴ(12%)の下に配置 */
    margin: 0 !important;
    font-weight: 800;
    font-size: clamp(40px, 3.4vw, 72px); /* 1795px幅で約61px */
    line-height: 1.24;
    color: var(--brand);
    z-index: 50;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }

  /* H2：H1の下に続く（余白 ≒ 6%）。フォントも増量 */
  .hero__subhead{
    position: absolute !important;
    left: 5.47%;
    top: 40%;                            /* ← H1より下に固定 */
    margin: 0 !important;
    font-weight: 700;
    font-size: clamp(24px, 2.1vw, 40px); /* 1795px幅で約37〜38px */
    line-height: 1.55;
    color: var(--brand);
    z-index: 50;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }

  /* 右側は“絶対に崩さない”ので変更しません */
  /* .hero__img--people / .hero__img--compass は既存値のまま */
}

/* ===== スマホの色＆放射（念押しで元に戻す） ===== */
@media (max-width: 960px){
  header.hero.hero--v2{ background:#9AC5F1; }
  .hero__headline,
  .hero__subhead{ color: var(--brand) !important; }
  .hero__img--burst{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    z-index:0;
  }
  header.hero.hero--v2::before{ content:none !important; }
}

/* ===== SP(≤960px)：放射を上下100%でカバーし続ける ===== */
@media (max-width: 960px){
  header.hero.hero--v2{
    position: relative;
    background: #9AC5F1;                  /* 水色は常に維持 */
    overflow: hidden;
    /* SCROLLぶんの余白を確保（被り防止） */
    padding-bottom: calc(100px + 24px);
    min-height: 100svh;                   /* 端末アドレスバー対策 */
  }

  /* キャンバスは前景の器（背面はburstが覆う） */
  .hero__canvas{
    position: relative;
    z-index: 1;
  }

  /* 放射：ヘッダー全面に固定。上下100%で必ずフィット */
  .hero__img--burst{
    display: block !important;
    position: absolute !important;
    inset: 0 !important;                  /* top/right/bottom/left:0 */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;         /* ← 縦も横もカバー */
    object-position: 50% 38% !important;  /* 必要なら 30〜50% で微調整 */
    transform: none !important;
    opacity: 1 !important;
    z-index: 0 !important;
  }

  /* 前景（ロゴ/文言/人物/コンパス）は常に上に */
  .hero__img--logo,
  .hero__headline,
  .hero__subhead,
  .hero__img--people,
  .hero__img--compass{ position: relative !important; z-index: 2 !important; }

  /* SPの文字色を紺に戻す（念押し） */
  .hero__headline,
  .hero__subhead{ color: var(--brand) !important; }

  /* ===== インジケーター（SCROLL）：常に見えるよう固定 ===== */
  .scroll-big{
    position: fixed !important;
    left: 50% !important;
    bottom: max(20px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    z-index: 50 !important;
    pointer-events: auto;
  }
}

/* さらに小さい端末（≤480px）での微調整：少しだけ引き上げ */
@media (max-width: 480px){
  .hero__img--burst{ object-position: 50% 35% !important; }
  .scroll-big{ bottom: max(16px, env(safe-area-inset-bottom)) !important; }
}
/* ===== PC帯（≥961px）：参照画像に寄せて再配置 ===== */
@media (min-width: 961px){

  /* ヒーローは上揃え。余白を最小にして放射が上に届くように */
  header.hero.hero--v2{
    place-items: start center;
    padding-top: clamp(8px, 1.2vw, 18px);
    padding-bottom: 96px;
  }

  /* キャンバス全面を放射でカバー（必ず上端に届く） */
  .hero__canvas{ width:min(100vw, var(--hero-max-w,1920px)); aspect-ratio:16/9; position:relative; height:100% !important;}
  .hero__img--burst{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100vw !important;
    object-fit:cover !important;
    object-position:50% 0% !important;   /* ← 上端に合わせる */
    transform:none !important;
    opacity:1 !important;
    z-index:1;
  }

  /* ロゴ：少し大きく＆やや上 */
  .hero__img--logo{
    top: 10.0%;                      /* 以前: 12% */
    left: 5.21%;
    width: clamp(320px, 30.5%, 620px);/* 参照に近づけ拡大 */
    z-index: 50;
  }
	
	:root{
  --h1-stroke-color: #fff;                           /* 白フチ色 */
  --h1-stroke-width: clamp(1px, 0.22vw, 3px);        /* 1〜3px相当で可変 */
}

  /* H1：ロゴの下に十分な余白を取りつつ大きく */
  .hero__headline{
    position:absolute !important;
    left: 5.47%;
    top: 23.5%;                      /* ← ロゴ(10%)の下に余白を確保 */
    margin: 0 !important;
    font-weight: 900;
    font-size: clamp(52px, 3.9vw, 78px);  /* 1795pxで約70px相当 */
    line-height: 1.22;
    color: var(--brand);
    z-index: 50;
    transform:none !important; opacity:1 !important; animation:none !important;
  }
	
		/* --- A) 軽量版：WebKitストローク＋最小フォールバック --- */
/* 長所：描画がシャープで軽い（Chromium/Safari系）
   短所：Firefoxでは -webkit-text-stroke が効かないため、最小の影で簡易縁取り */
.hero__headline--outline{
  /* WebKit/Blink系できれいな縁取り */
  -webkit-text-stroke: var(--h1-stroke-width) var(--h1-stroke-color);
  /* 将来の標準プロパティ（現状は無視されてもOK） */
  text-stroke: var(--h1-stroke-width) var(--h1-stroke-color);

  /* Firefox向けの“最低限”フォールバック（薄い縁） */
  text-shadow:
    0 0 1px var(--h1-stroke-color),
    0 0 1px var(--h1-stroke-color);
}


  /* H2：H1の下に間を空けて配置＆拡大 */
  .hero__subhead{
    position:absolute !important;
    left: 5.47%;
    top: 38.0%;                      /* ← H1の下にしっかり余白 */
    margin: 0 !important;
    font-weight: 700;
    font-size: clamp(28px, 2.35vw, 44px); /* 1795pxで約42px */
    line-height: 1.55;
    color: var(--brand);
    z-index: 50;
    transform:none !important; opacity:1 !important; animation:none !important;
  }

  /* 右側：バランスは保ったまま全体を少し上に */
  .hero__img--people{
    right: 0;
    bottom: -3%;                     /* 以前:-8% → 上へ */
    width: clamp(360px, 49.5%, 950px);
    z-index: 2;
  }
  .hero__img--compass{
    right: 18.23%;
    bottom: 22%;                     /* 以前:18% → 上へ */
    width: clamp(200px, 23.4%, 450px);
    z-index: 3;
  }
}

/* ===== SP（≤960px）：念押しで放射と色指定を維持 ===== */
@media (max-width:960px){
  header.hero.hero--v2{ background:#9AC5F1; min-height:100svh; overflow:hidden; }
  .hero__img--burst{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important; height:100vw !important;
    object-fit:cover !important;
    object-position:50% 0% !important;   /* ← 上端固定 */
    z-index:0 !important;
  }
  .hero__headline,
  .hero__subhead{ color:var(--brand) !important; }
}
/* =========================================================
   Hero 調整トークン（ココの数値だけ触れば微調整できます）
   ---------------------------------------------------------
   PC帯（≥961px）での上下感覚：
   --gap-logo-h1 … ロゴ → H1の縦間隔（%）
   --gap-h1-h2   … H1  → H2の縦間隔（%）
   SP帯（≤960px）での見え方：
   --sp-burst-y  … 放射の縦位置（%：0が上端、数値↑で下へ）
   --sp-people-up … 人物の持ち上げ量（rem/px/％いずれもOK）
   ========================================================= */
:root{
  /* 初期値（目安） */
  --gap-logo-h1: 25%;  /* ← ロゴ下からH1上までの余白量（PC） */
  --gap-h1-h2:   20%;  /* ← H1下からH2上までの余白量（PC） */
}
@media (max-width:960px){
  :root{
    --sp-burst-y: 0%;     /* ← 放射のY位置。0〜10%で調整 */
    --sp-people-up: 14px; /* ← 人物を上へ。0〜24pxで調整 */
  }
}

/* ====== PC（≥961px）：放射を必ず上端まで、余白は変数で制御 ====== */
@media (min-width:961px){
  header.hero.hero--v2{
    place-items: start center;
    padding:0px;
  }
  .hero__canvas{
    width:min(100vw, var(--hero-max-w,1920px));
    aspect-ratio:16/9;
    position:relative;
  }
  .hero__img--burst{
    position:absolute !important;
    inset:0 !important;                 /* ← 上下左右ぜんぶ0 */
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:50% 0% !important;  /* ← 上端に合わせる（必要なら -2% 〜 4%） */
    transform:none !important;
    opacity:1 !important;
    z-index:1;
  }

  /* ロゴ：やや上＋大きめ */
  .hero__img--logo{
    top:10%;
    left:5.21%;
    width:clamp(320px,40%,620px);
    z-index:50;
  }

:root{
  --h1-stroke-color: #fff;                           /* 白フチ色 */
  --h1-stroke-width: clamp(1px, 0.22vw, 3px);        /* 1〜3px相当で可変 */
}

/* 既存のH1（ご提示コードを尊重し、上書きは最小限） */
.hero__headline{
  position:absolute !important;
  left:5.47%;
  top:calc(10% + var(--gap-logo-h1));   /* ← ロゴからのオフセット */
  margin:0 !important;
  font-weight:900;
  font-size:clamp(35px,3.9vw,65px);
  line-height:1.22;
  color:var(--brand);                    /* 塗り色はブランドカラーのまま */
  z-index:50;
  transform:none !important;
  opacity:1 !important;
  animation:none !important;
}
	
	/* --- A) 軽量版：WebKitストローク＋最小フォールバック --- */
/* 長所：描画がシャープで軽い（Chromium/Safari系）
   短所：Firefoxでは -webkit-text-stroke が効かないため、最小の影で簡易縁取り */
.hero__headline--outline{
  /* WebKit/Blink系できれいな縁取り */
  -webkit-text-stroke: var(--h1-stroke-width) var(--h1-stroke-color);
  /* 将来の標準プロパティ（現状は無視されてもOK） */
  text-stroke: var(--h1-stroke-width) var(--h1-stroke-color);

  /* Firefox向けの“最低限”フォールバック（薄い縁） */
  text-shadow:
    0 0 1px var(--h1-stroke-color),
    0 0 1px var(--h1-stroke-color);
}

  /* H2：H1の“下”。H1位置＋gap分だけ下げる */
  .hero__subhead{
    position:absolute !important;
    left:5.47%;
    top:calc(10% + var(--gap-logo-h1) + var(--gap-h1-h2)); /* ← ★--gap-h1-h2 */
    margin:0 !important;
    font-weight:700;
    font-size:clamp(20px,2vw,35px);
    line-height:1.55;
    color:var(--brand);
    z-index:50;
    transform:none !important; opacity:1 !important; animation:none !important;
  }

  /* 右側：バランス維持のまま、少しだけ上へ */
  .hero__img--people{ right:0; bottom:-2%; width:clamp(400px,50vw,980px); z-index:2; }
  .hero__img--compass{ right:15%; bottom:18%; width:clamp(200px,25vw,450px); z-index:3; }
}

/* ====== SP（≤960px）：放射フルカバー＋人物を上へ持ち上げ ====== */
@media (max-width:960px){
  header.hero.hero--v2{
    background:#9AC5F1;
    min-height:100svh;
    overflow:hidden;
    padding-bottom:calc(100px + 20px);  /* SCROLLのぶん確保 */
	  padding-top:0px !important;
  }
  .hero__img--burst{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important; height:100% !important;
    object-fit:cover !important;
    object-position:50% var(--sp-burst-y) !important; /* ← ★放射の上寄せはここ */
    z-index:0 !important;
  }
  /* 文字色は紺のまま */
  .hero__headline, .hero__subhead{ color:var(--brand) !important; }

  /* 人物：少しだけ上に（インジケーターが見えるように） */
  .hero__img--people{
    position:relative !important;
    z-index:2 !important;
    transform:translateY(calc(-1 * var(--sp-people-up))); /* ← ★上げ量ここ */
  }
  .hero__img--compass{ position:relative !important; z-index:3 !important; }

  /* SCROLLは最前面に */
  .scroll-big{
    position:fixed !important;
    left:50% !important;
    bottom:max(18px, env(safe-area-inset-bottom)) !important;
    transform:translateX(-50%) !important;
    z-index:50 !important;
  }
	
	/* ロゴ：やや上＋大きめ */
  .hero__img--logo{
    top:30%;
  }

  /* H1：ロゴの“下”。topはロゴtopに gap だけ加算して決定 */
  .hero__headline{

    top:calc(10% + var(--gap-logo-h1));   /* ← ★微調整は --gap-logo-h1 で */
  }

  /* H2：H1の“下”。H1位置＋gap分だけ下げる */
  .hero__subhead{
    top:calc(10% + var(--gap-logo-h1) + var(--gap-h1-h2)); /* ← ★--gap-h1-h2 */

  }

}

/* プライバシーポリシー内の見出し行（（〇〇）） */
.sc__text .policy-heading {
  margin: 2.4rem 0 1.2rem; /* 上下の余白。お好みで調整してください */
  font-weight: 700;        /* 念のため太字を指定 */
}

/* 箇条書きの基本スタイル（必要に応じて調整） */
.sc__text .policy-list {
  margin: 0 0 1.8rem 1.4em;
  padding-left: 1.2em;
  list-style-type: disc;
	text-align: left;
}

.sc__text .policy-list li {
  line-height: 1.8;
}

/* =========================
   FAQ（よくあるご質問）セクション
   ========================= */

.faq{
  padding-block: clamp(60px, 8vw, 96px);
  background:#f7f7f7;
}

.faq__lead{
  max-width: 720px;
  margin: 0 auto clamp(32px, 4vw, 40px);
  text-align: center;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.8;
  color:#555;
}

.faq__list{
  max-width: 880px;
  margin: 0 auto;
}

/* 各Q&Aブロック */
.faq-item{
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding-block: 8px;
}

/* 質問タイトル（h3）は余白調整のみ */
.faq-item__title{
  margin: 0;
}

/* Q部分ボタン全体 */
.faq-item__button{
  /* ボタンとしての初期化 */
  width: 100%;
  border: none;
  background: none;
  padding: 16px 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
  cursor: pointer;
  font: inherit;          /* 親のフォントを継承 */
  color: inherit;
}

/* キーボードフォーカス時の見た目（アクセシビリティ） */
.faq-item__button:focus-visible{
  outline: 2px solid var(--brand, #11395f);
  outline-offset: 4px;
}

/* Q. ラベル */
.faq-item__q-label{
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--brand, #11395f);
}

/* 質問テキスト */
.faq-item__question{
  flex: 1 1 auto;
  font-weight: 600;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.6;
}

/* 右側の＋アイコン（丸アイコン） */
.faq-item__icon{
  flex: 0 0 auto;
  width: 1.9rem;  /* 30px前後 */
  height: 1.9rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  margin-left: 1rem;
  position: relative;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

/* ＋の横線・縦線 */
.faq-item__icon::before,
.faq-item__icon::after{
  content: "";
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  background: var(--brand, #11395f);
  transition: transform .25s ease, opacity .25s ease;
}

/* 横線 */
.faq-item__icon::before{
  width: 60%;
  height: 2px;
}

/* 縦線（開いたときに消す） */
.faq-item__icon::after{
  width: 2px;
  height: 60%;
}

/* ホバー時の軽い演出 */
.faq-item__button:hover .faq-item__icon{
  transform: translateY(-1px);
  border-color: var(--brand, #11395f);
}

/* A部分（アコーディオンの中身） */
.faq-item__panel{
  /* JSでmax-heightを制御するための初期値 */
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

/* 回答テキスト */
.faq-item__answer{
display: flex;
  gap: 0.3rem;
  padding: 0 50px 16px 2.35rem;
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.9;
  text-align: left;
}

/* A. ラベル */
.faq-item__a-label{
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--brand, #11395f);
}

/* 開いているときの見た目（親に .is-open を付与） */
.faq-item.is-open .faq-item__icon{
  background: var(--brand, #11395f);
  border-color: var(--brand, #11395f);
}

/* ＋ → − に変化（縦線を消す） */
.faq-item.is-open .faq-item__icon::after{
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

/* SP時の微調整 */
@media (max-width: 576px){
  .faq-item__button{
    align-items: center;
  }
  .faq-item__answer{
    padding-left: 2rem;
  }
}

/* 開いているときは線の色を白にして「赤丸＋白い−」にする */
.faq-item.is-open .faq-item__icon::before,
.faq-item.is-open .faq-item__icon::after{
  background: #fff;
}

/* ＋ → − に変化（縦線を消す） */
.faq-item.is-open .faq-item__icon::after{
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

.faq{text-align: center;
}


/* =========================
   運営組織 / Management Organization
   ========================= */

.org{
  padding-block: clamp(60px, 8vw, 96px);
  background:#fff;
	text-align: center;
}

/* タイトルは中央寄せ（FAQと同じトーン） */
.org .intro__title{
  text-align: center;
}

/* 英語サブタイトル */
.org__eyebrow{
  margin: 8px auto clamp(28px, 4vw, 36px);
  text-align:center;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:#999;
}

/* 2カラムのベースレイアウト */
.org__grid{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: clamp(24px, 4vw, 40px);
	text-align: left;
}

@media (min-width: 1024px){
  .org__grid{
    /* 左カラム：最小280px、最大はコンテンツ幅まで（縮こまりすぎ防止） */
    grid-template-columns: minmax(280px, max-content) minmax(0, 1fr);
    align-items: flex-start;
  }
}

/* 共通カード */
.org__block{
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px);
  border-radius: 16px;
  background:#f9fafb;
  box-shadow: 0 10px 30px rgba(0,0,0,.03);
}

/* 右側：ビジョン／ミッションカードは少しラインを強調 */
.org__block--statement{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-left: 4px solid var(--brand, #11395f);
	font-size: clamp(13px, 1.4vw, 18px);
}

/* 左カラム：運営情報の一覧（定義リスト） */
.org__list{
  display: grid;
  grid-template-columns: minmax(88px, 120px) 1fr;
  row-gap: 12px;
  column-gap: 16px;
  font-size: clamp(13px, 1.4vw, 18px);
  line-height: 1.8;
  margin: 0;
}

.org__label{
  font-weight: 600;
 }

.org__value{
  color:#333;
}

.org__note{
  font-size: 0.9em;
  color:#777;
  margin-left: 0.25em;
}

/* 右カラム：ビジョン／ミッションのテキスト */
.org__statement + .org__statement{
  margin-top: clamp(16px, 2.5vw, 18px);
}

.org__subtitle{
  margin: 0 0 8px;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0.08em;
  color: var(--brand, #11395f);
}

.org__text{
  margin: 0;
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.9;
  color:#444;
}

/* SPでは1カラムで縦並び（そのままでも読みやすいように） */
@media (max-width: 576px){
  .org__block{
    border-radius: 12px;
  }
}



.sc {
	
	max-width: 1120px;
	margin: 0 auto;
	text-align: center;
}

.sc p{
	
	text-align: left;
}

.ct{
		max-width: 1120px;
	margin: 0 auto;
	text-align: center;
	margin-top: 50px;
}

/* A. 全体のベース */
.faq-item__answer{
  position: relative;
  margin: 0;
  line-height: 1.8;
  padding-left: 3.2em;  /* A. の幅ぶん左に余白 */
}

/* A. ラベルを左に固定 */
.faq-item__a-label{
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

/* （１）（２）… 各行：ぶら下げインデント */
.faq-item__answer-line{
  display: block;       /* 1番号＝1ブロック */
  padding-left: 2.8em;  /* 番号＋1文字ぶんの幅 */
  text-indent: -3.2em;  /* 1行目だけ左に戻す → 2行目以降が揃う */
}

.faq-item__answer{ display:block; }
/* 微調整したいときは 2.4〜2.8em の範囲で試してみてください */

/* FAQ：利用料金「コチラ」リンク専用 */
.faq-contact-link{
  color: red;                           /* リンクカラー：赤 */
  text-decoration: none;                /* デフォルトの下線は消す */
  border-bottom: 1px dotted currentColor; /* 現在の色で点線アンダーライン */
  padding-bottom: 1px;
}

/* hover時は少しだけトーンを落とす（お好みで微調整） */
.faq-contact-link:hover,
.faq-contact-link:focus-visible{
  opacity: 0.8;
  /* 点線はそのまま残す場合：border-bottomそのまま */
  outline: none;
}

/* 確認画面：値表示用 */
.wc-form__value{
  background-color: #fff;
  border: 1px solid #e3e7f0;
  border-radius: 999px;            /* 入力フィールドと合わせる */
  padding: 0.75rem 1rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

/* 確認画面：ボタン並び */
.wc-form__actions--confirm{
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

/* ゴーストボタン風（戻るボタン用） */
.wc-form__submit--ghost{
  background: #fff;
  color: var(--brand, #e1302c);
  border: 1px solid var(--brand, #e1302c);
}

/* Thanksカード：テキスト左寄せ＋幅制限 */
.wc-form__card--thanks{
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.wc-form__note--thanks-lead{
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.wc-form__thanks-text{
line-height: 1.8;
  max-width: 450px;
  margin: 0 auto 1.2rem;
}

.wc-form__thanks-subtitle{
  font-size: 1rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}

.wc-form__thanks-list{
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0 0 1.5rem;
}

.wc-form__actions--thanks{
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

/* ===== 企業登録：確認ページ専用レイアウト ================= */

/* セクション全体の横幅とセンタリング */
#corp-entry-confirm .wc-form__container{
  max-width: 960px;
  margin: 0 auto; 
	margin-top: 100px;/* ページ中央 */
}

/* 見出し下の赤い説明文：フォームと同じラインに揃える */
#corp-entry-confirm .wc-form__note{
  max-width: 400px;               /* フォームと同じくらいの幅 */
  margin: 1.5rem auto 2rem;       /* 上下余白＋左右中央寄せ */
  color: #e1302c;                 /* 赤文字（既に指定されていれば省略可） */
  text-align: left;               /* 文字は左揃え */
}

/* 確認フォームのカードを中央に置く */
#corp-entry-confirm .wc-form__card{
  max-width: 920px;               /* 赤文字と幅を揃える */
  margin: 0 auto;                 /* 左右中央寄せ */
}

/* ★ここで元の .wc-form__grid の指定を上書きする */
#corp-entry-confirm .wc-form__grid{
  grid-template-columns: 9rem 1fr !important;  /* ラベル列を少し細くしてバランス調整 */
  column-gap: clamp(1rem, 1vw, 1rem);
  row-gap: clamp(1rem, 1vw, 1rem);
  margin: 0;                                     /* 余計なマージンを消す */
}

/* 確認画面：値表示用（そのまま使用） */
.wc-form__value{
  background-color: #fff;
  border: 1px solid #e3e7f0;
  border-radius: 999px;
  padding: 0.75rem 1rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

/* 確認画面：ボタン並び */
.wc-form__actions--confirm{
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* ゴーストボタン風（戻るボタン） */
.wc-form__submit--ghost{
  background: #fff;
  color: var(--brand, #e1302c);
  border: 1px solid var(--brand, #e1302c);
}


/* 確認画面：値表示用（これはそのままでOK） */
.wc-form__value{
  background-color: #fff;
  border: 1px solid #e3e7f0;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

/* ゴーストボタン風（戻るボタン用） */
.wc-form__submit--ghost{
  background: #fff;
  color: var(--brand, #e1302c);
  border: 1px solid var(--brand, #e1302c);
}

/* ================= レスポンシブ対応 ================== */

/* 1024px 以下：コンテナの横幅を画面に合わせて少し広げる */
@media (max-width: 1024px){
  #corp-entry-confirm .wc-form__container{
    max-width: 90vw;
  }

  #corp-entry-confirm .wc-form__card{
    max-width: 100%;
  }

  #corp-entry-confirm .wc-form__note{
    max-width: 90%;
  }
}

/* 768px 以下：ラベル列＋入力列を少しコンパクトに */
@media (max-width: 768px){
  #corp-entry-confirm .wc-form__grid{
    grid-template-columns: 7rem 1fr !important;
  }

  #corp-entry-confirm .wc-form__container{
    padding-inline: 1.5rem;
  }

  #corp-entry-confirm .wc-form__note{
    max-width: 100%;
  }
}

/* 576px 以下：1カラムにしてスマホで見やすく */
@media (max-width: 576px){
  /* グリッドを1列にして、ラベル→値を縦並びに */
  #corp-entry-confirm .wc-form__grid{
    grid-template-columns: 1fr !important;
  }

  /* ラベルの下に少し余白をつけて読みやすく */
  #corp-entry-confirm .wc-form__label{
    display: block;
    margin-bottom: 0.25rem;
  }

   #corp-entry-confirm .wc-form__container {
    width: 100%;
    padding-inline: 1rem;
	   max-width: 100vw;}

  #corp-entry-confirm .wc-form__card{
    max-width: 100%;
  }

  #corp-entry-confirm .wc-form__actions--confirm{
    flex-direction: column;
  }

  #corp-entry-confirm .wc-form__actions--confirm .wc-form__submit{
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
}

/* デフォルト：改行させる（PC・タブレット） */
br.br-pc-only{
  display: inline;
}

/* スマホ（〜576px）だけ改行なしにする */
@media (max-width: 576px){
  br.br-pc-only{
    display: none;
  }
}

.wc-form__value--textarea{
       /* 改行・スペースをそのまま表示 */
  align-items: flex-start;    /* 上揃え */
}

/* お問い合わせ内容（textarea）を他のフィールドと揃える */
.wc-form__field textarea{
  width: 80%;                 /* 横幅をinputと揃えて100%に */
  min-height: 10rem;           /* 高さをしっかり（約160px）確保 */
  padding: 0.75rem 1rem;       /* 内側余白をinputと揃える */
  border: 1px solid #d3d9e8;   /* 既存inputに近い色に（お好みで調整） */
  border-radius: 16px;         /* inputが丸なら 999px 等に変更 */
  box-sizing: border-box;
  font: inherit;               /* フォントを周囲と合わせる */
  line-height: 1.6;
  resize: vertical;            /* 縦方向だけリサイズ可（横は固定） */
}

/* ラベルとフィールドの縦位置を上揃えにしておく（保険） */
.wc-form__row{
  align-items: center;
}

.wc-form__error{
  margin: 0;          /* 余計な上下マージンを消す */
}

.wc-form__error:empty{
  display: none;      /* テキストが空のときは高さゼロに */
}