:root{
  --text:#222;
  --muted:#666;
  --bg:#fff;

  --grad: linear-gradient(90deg, #ffbf8a 0%, #ff86b2 45%, #9fb3ff 100%);
  --grad-soft: radial-gradient(1200px 800px at 10% 30%, rgba(255,191,138,.28), transparent 60%),
              radial-gradient(1200px 800px at 90% 30%, rgba(159,179,255,.28), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,1));
  --shadow: 0 12px 28px rgba(0,0,0,.08);
  --radius: 22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.tonaream{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color:var(--text);
  background: var(--grad-soft);
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1080px, calc(100% - 40px)); margin:0 auto;}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
}
.header-inner{
  position:relative;
  display:flex;
  align-items:center;
  gap:26px;
  padding:18px 0 28px;
  justify-content:flex-start;
}
.brand .custom-logo{height:44px;width:auto}
.brand-fallback{height:44px;width:auto}

.menu{list-style:none;margin:0;padding:0;display:flex;gap:26px;align-items:center;justify-content:center}
.menu a{font-weight:700;letter-spacing:.02em}
.menu .coming-soon{opacity:.5}

/* Header nav: keep top line aligned even when GOODS has a coming-soon badge */
.site-nav .menu a{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
}
.nav-text{display:block;}
.nav-coming-img{
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  margin-top:4px;
  height:12px;
  width:auto;
  display:block;
}

/* Coming soon (disabled link) */
.menu .is-coming-soon > a{
  opacity:.5;
  cursor:default;
  pointer-events:none;
}

.site-nav{
  flex:1;
  display:flex;
  justify-content:center;
  margin-left:0;
}
.nav-toggle{
  display:none;
  width:42px;height:42px;border:0;background:transparent;
}
.nav-toggle span{display:block;height:2px;background:#111;margin:7px 0;border-radius:2px}

.site-main{min-height:60vh}

/* common */
.section{padding:54px 0}
.center{text-align:center}
.sub{margin:6px 0 0;color:var(--muted);font-weight:700}
.section-head{margin:0 0 18px}
.section-head .solid{color:#fff;font-size:44px;letter-spacing:.08em}
.section-head.invert .sub{color:#fff;opacity:.9}
.grad-text{
  display:inline-block;
  font-size:44px;
  letter-spacing:.08em;
  font-weight:900;
  background: var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:0;
}
.grad-text.xl{font-size:64px}

.page-hero{padding:54px 0 26px;text-align:center}

.grad-line{
  height:2px;
  background: var(--grad);
  opacity:.65;
  border-radius:2px;
}

.btn-outline, .btn-solid{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.02em;
  padding:12px 24px;
}
.btn-outline{
  position:relative;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--grad) border-box;
  border:2px solid transparent;
  color:#ff86b2;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.btn-solid{
  background: var(--grad);
  color:#fff;
  border:0;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
.tri{
  width:0;height:0;
  border-left:8px solid rgba(80,95,255,.75);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  display:inline-block;
}

.to-top-float{
  position:fixed;
  right:18px; bottom:18px;
  width:44px; height:44px;
  border:0;
  border-radius:12px;
  background: var(--grad);
  color:#fff;
  box-shadow: var(--shadow);
  cursor:pointer;
}

/* HERO */
.hero{padding:18px 0 0}
.hero-inner{padding-bottom:10px}
.hero-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
  align-items:end;
  margin-top:12px;
}
.hero-card{
  position:relative;
  border-radius: 44px;
  height: 430px;
  overflow:hidden;
}
.hero-card-bg{
  position:absolute; inset:0;
  background: color-mix(in srgb, var(--heroCardBg) 85%, white 15%);
  border-radius: 44px;
  opacity:.9;
}
.hero-card-img{
  position:absolute;
  inset:auto 0 0 0;
  width:100%;
  height:100%;
  object-fit:contain;
  transform: translateY(12px);
}
.hero-script{
  text-align:center;
  margin:18px 0 0;
  font-weight:900;
  letter-spacing:.12em;
  background: var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-size:28px;
}

/* NEWS list */
.news-list{margin-top:18px}
.news-row{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:22px;
  align-items:center;
  padding:18px 8px;
  border-top:1px solid rgba(0,0,0,.06);
  position:relative;
}
.news-row:before{
  content:"";
  position:absolute;
  left:0; right:0; top:-1px;
  height:2px;
  background: var(--grad);
  opacity:.35;
}
.news-date{font-weight:900; font-size:22px; color:#333}
.news-title{font-weight:800; letter-spacing:.06em; color:#333; line-height:1.35}
.news-empty{padding:18px 0;color:var(--muted)}

/* ABOUT */
.section-about{padding:0}
.about-grad{
  background: var(--grad);
  padding:54px 0;
  position:relative;
  overflow:hidden;
}
.about-grad:after{
  content:"";
  position:absolute;
  inset:-20% -10%;
  background:
    radial-gradient(400px 300px at 50% 50%, rgba(255,255,255,.25), transparent 60%);
  pointer-events:none;
}
.about-inner{position:relative}
.about-copy{
  text-align:center;
  color:#fff;
  margin-top:22px;
}
.about-lead{
  font-size:34px;
  font-weight:900;
  letter-spacing:.08em;
  margin:14px 0 10px;
}
.about-text{font-size:18px; font-weight:700; line-height:1.9; margin:0}

/* STREAM */
.stream-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
  margin-top:18px;
}
.stream-card{display:flex;flex-direction:column;gap:10px}
.stream-date{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;
  padding:0 14px;
  border-radius:999px;
  background: #ffb4a5;
  color:#fff;
  font-weight:900;
  letter-spacing:.04em;
  width:max-content;
}
.stream-thumb{
  display:block;
  border-radius:10px;
  overflow:hidden;
  background:#ddd;
}
.stream-thumb img{width:100%;height:140px;object-fit:cover}
.stream-title-row{display:flex;align-items:center;gap:8px}
.stream-talent-icon{width:16px;height:16px;display:block;flex:0 0 auto;}
.stream-title{font-size:16px;margin:0;font-weight:900}
.stream-talent{margin:0;color:#333;font-weight:900}

.platform{width:16px;height:16px;border-radius:4px;display:inline-block}
.platform-youtube{background:#ff5a5a}
.platform-tiktok{background:#333}
.platform-x{background:#6aa7ff}
.platform-other{background:#999}

/* Paper box (GUIDELINE) */
.paper-box{
  border-radius: var(--radius);
  padding:2px;
  background: var(--grad);
  box-shadow: var(--shadow);
}
.paper-box-inner{
  border-radius: calc(var(--radius) - 2px);
  background: rgba(255,255,255,.92);
  padding:34px;
}
.content h2{margin:0 0 14px;font-size:26px}
.content h3{margin:28px 0 10px;font-size:20px}
.content a{
  color:#6a7cff;
  font-weight:900;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
}

/* COMPANY */
.company .company-row{margin:22px 0}

/* =========================
   COMPANY（ラベル/値の文字サイズを安定させる）
   - 値側が .value じゃなく dd や p(2つ目以降) でも効くようにする
   ========================= */

.company{
  /* ここだけいじればサイズ調整できます */
  --company-label-size: 18px; /* 会社名 / 事業概要…（小さめ） */
  --company-value-size: 30px; /* TONAREAM株式会社…（大きめ） */
}

/* ラベル側（会社名 / 事業概要 / 所在地…） */
.company .company-row .label,
.company .company-row dt,
.company .company-row p:first-child{
  font-weight: 900;
  color:#333;
  font-size: var(--company-label-size) !important;
  line-height: 1.3;
  margin: 0;
}

/* COMPANY 値側（TONAREAM株式会社 / バーチャルYouTuber事業…） */
.company .company-row .value,
.company .company-row .value p {
  font-size: 32px;     /* ←ここを好みで調整 */
  line-height: 1.35;
  font-weight: 700;
  margin: 6px 0 0;
}

/* ラベル側は必要なら */
.company .company-row .label{
  font-size: 28px;     /* ←ラベルは据え置きでもOK */
}

/* スマホだけさらに大きくしたい場合 */
@media (max-width: 768px){
  .company .company-row .value,
  .company .company-row .value p{
    font-size: 40px;   /* ←スマホ用 */
  }
}


.map-box{margin:22px 0 30px}
.map-placeholder{
  height:320px;
  border-radius:14px;
  background:#dcdcdc;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#fff;font-size:44px;letter-spacing:.1em;
}
.map-embed iframe{width:100%;height:320px;border:0;border-radius:14px}

/* CONTACT */
.contact-panel{
  background:#4a444d;
  border-radius: 0;
  padding:32px;
  color:#fff;
}
.contact-copy{max-width:900px;margin:0 auto 18px}
.contact-copy a{color:#aeb6ff}
.contact-alert{max-width:900px;margin:0 auto 16px;padding:12px 14px;border-radius:10px;font-weight:900}
.contact-alert.ok{background:rgba(60,200,140,.18)}
.contact-alert.ng{background:rgba(255,90,90,.18)}

.contact-form{
  max-width:900px;
  margin:0 auto;
  display:grid;
  gap:18px;
}
.form-row{display:grid;grid-template-columns: 220px 1fr;gap:18px;align-items:center}
.form-row label{font-weight:900;font-size:20px}
.form-row input,.form-row textarea{
  width:100%;
  border:0;
  border-radius:6px;
  padding:16px 16px;
  font-weight:800;
  outline:none;
}
.form-row textarea{resize:vertical}
.req{
  display:inline-block;
  background:#ff7b7b;
  color:#fff;
  font-size:14px;
  padding:6px 10px;
  border-radius:6px;
  margin-left:10px;
  vertical-align:middle;
}

/* TALENT */
.talent-tabs{
  margin:22px auto 0;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.talent-tab{
  border:0;
  background: color-mix(in srgb, var(--pill) 75%, white 25%);
  padding:10px 14px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  box-shadow: 0 8px 16px rgba(0,0,0,.06);
  font-weight:900;
}
.talent-tab img{width:26px;height:26px;border-radius:8px;object-fit:cover}
.talent-tab .caret{
  width:0;height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:8px solid rgba(255,255,255,.9);
  margin-left:6px;
}

.talent-section{padding:0}
.talent-strip{
  background: color-mix(in srgb, var(--talBg) 80%, white 20%);
  padding:34px 0;
}
.talent-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:28px;
  align-items:center;
}
.talent-illust img{
  width:100%;
  max-height:520px;
  object-fit:contain;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.08));
}
.talent-logo img{max-width:380px;height:auto}
.talent-name{font-size:34px;margin:0;font-weight:900}
.talent-catch{margin:10px 0 10px;font-weight:900;line-height:1.7}
.talent-bio{margin:0 0 14px;font-weight:800;line-height:1.85}
.talent-dl{margin:0;display:grid;gap:6px}
.talent-dl > div{display:grid;grid-template-columns: 180px 1fr;gap:10px}
.talent-dl dt{font-weight:900}
.talent-dl dd{margin:0;font-weight:900}
.talent-links{display:flex;gap:10px;margin-top:14px}
.social{
  width:52px;height:52px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.35);
  border-radius:8px;
}
.social svg{width:26px;height:26px;fill:#fff}

/* Footer */
.site-footer{margin-top:0}

.footer-grad{
  position:relative;
  background: var(--grad);
}

/* 2枚目デザインの「薄い白レイヤー」を重ねる */
.footer-grad::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.12);
  pointer-events:none;
}

.footer-inner{
  position:relative;
  display:grid;
  grid-template-rows: auto 1fr auto;
  justify-items:center;
  align-items:center;
  min-height: 280px;
  padding: 48px 0 38px;
  gap: 0;
}

.footer-nav{align-self:start}

.footer-menu{
  gap: 46px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.footer-menu a{
  color:#fff;
  position:relative;              /* ← nav-coming-img の absolute 基準 */
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
}


/* Coming Soon 画像（functions.php の nav_menu_item_title フィルタ出力）に対応 */
.footer-nav .menu a{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
}

.footer-brand{
  align-self:center;
  text-align:center;
  color:#fff;
}

.footer-logo{line-height:0}

/* フッター専用ロゴ（footer.php で /assets/img/footer-logo.(svg|png|webp) を優先表示） */
.footer-logo-img{
  height: 72px;
  width: auto;
  max-width: 520px;
  margin: 0 auto;
}

/* カスタムロゴをフッターに出す場合の最低限の整形（色変換はしない） */
.footer-brand .custom-logo{
  height: 72px;
  width: auto;
  max-width: 520px;
}

.copyright{
  align-self:end;
  margin:0;
  padding: 0 0 8px;
  color: rgba(255,255,255,.92);
  font-weight:900;
  letter-spacing:.06em;
}

/* Responsive */
@media (max-width: 1024px){
  .stream-grid{grid-template-columns: repeat(2, 1fr)}
  .hero-cards{grid-template-columns: repeat(3, 1fr)}
  .talent-inner{grid-template-columns: 1fr}
}
@media (max-width: 768px){
  /* 既存 */
  .site-nav{position:absolute;right:0;top:78px;background:rgba(255,255,255,.92);border-radius:16px;padding:14px;box-shadow:var(--shadow);display:none}
  .site-nav.is-open{display:block}

  /* 追加：aria-expanded が true のときも表示させる（保険） */
  .nav-toggle[aria-expanded="true"] ~ .site-nav{
    display:block !important;
  }

  /* 追加：前面に出す（下の要素に負ける場合） */
  .site-nav{
    z-index:9999;
  }

  /* 追加：モバイルでは縦並び */
  .nav-toggle{display:inline-block}
  .site-nav .menu{flex-direction:column;align-items:flex-start;gap:10px}
  .site-nav .menu a{align-items:flex-start;text-align:left}

  /* coming soon 画像はモバイルでは通常フローで表示 */
  .nav-coming-img{position:static;transform:none;margin-top:4px;height:12px}

  /* Footer（モバイル） */
  .footer-inner{min-height:240px;padding:36px 0 30px}
  .footer-menu{gap:22px}
  .footer-menu a{font-size:16px;letter-spacing:.10em}
  .footer-logo-img,
  .footer-brand .custom-logo{height:60px;max-width:360px}

}

@media (max-width: 520px){
  .stream-grid{grid-template-columns: 1fr}
  .hero-cards{grid-template-columns: 1fr}
  .hero-card{height:280px}
}
/* =========================================
   TALENT PAGE
========================================= */
.talent-page .talent-hero{
  padding: 72px 0 44px;
  background: linear-gradient(90deg, rgba(255,197,153,.35), rgba(173,201,255,.35));
}
.talent-page .talent-hero__inner{
  text-align: center;
}
.talent-page .talent-hero__title{
  font-size: 72px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  margin: 0;
  background: linear-gradient(90deg, #ffb485, #b9a6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.talent-page .talent-hero__subtitle{
  margin: 10px 0 0;
  font-weight: 700;
  opacity: .85;
}

.talent-page .talent-pills{
  margin-top: 22px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.talent-page .talent-pill{
  --pill-bg: #ddd;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--pill-bg);
  text-decoration: none;
  color: #111;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.talent-page .talent-pill__icon{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}
.talent-page .talent-pill__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  display: inline-block;
}
.talent-page .talent-pill__chev{
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(0,0,0,.35);
  margin-left: 2px;
}

.talent-page .talent-section{
  background: var(--talent-bg, #8fd3ff);
  padding: 56px 0;
}
.talent-page .talent-section__inner{
  display: grid;
  grid-template-columns: minmax(280px, 540px) minmax(360px, 1fr);
  gap: 48px;
  align-items: center;
}
.talent-page .talent-section__illust img{
  width: 100%;
  height: auto;
  display: block;
}
.talent-page .talent-section__content{
  color: #fff; /* モックは白文字 */
}
.talent-page .talent-section__logo{
  max-width: 520px;
  margin: 0 auto 14px;
}
.talent-page .talent-section__logo img{
  width: 100%;
  height: auto;
  display: block;
}

.talent-page .talent-section__name{
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 800;
}
.talent-page .talent-section__catch{
  margin: 0 0 12px;
  font-weight: 800;
}
.talent-page .talent-section__bio p{
  margin: 0 0 8px;
  line-height: 1.9;
}

.talent-page .talent-section__meta{
  margin-top: 18px;
  display: grid;
  gap: 8px;
}
.talent-page .talent-section__meta > div{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
}
.talent-page .talent-section__meta dt{
  font-weight: 800;
}
.talent-page .talent-section__meta dd{
  margin: 0;
}

.talent-page .talent-section__social{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.talent-page .talent-social{
  min-width: 96px;
  text-align: center;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
  color: #fff;
  background: rgba(255,255,255,.28);
}

@media (max-width: 900px){
  .talent-page .talent-hero__title{ font-size: 48px; }
  .talent-page .talent-section__inner{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .talent-page .talent-section{
    padding: 40px 0;
  }
}
/* =========================================
   TALENT (override to match mock)
   - 上: グラデ背景
   - 下: タレント色の帯
   - 左絵: 境界をまたいで見せる
========================================= */
.talent-page .talent-section{
  position: relative;
  padding: 0;
  background: linear-gradient(90deg, rgba(255,197,153,.35), rgba(173,201,255,.35));
  overflow: hidden;
}

/* 下半分の帯（高さはここで調整可能） */
.talent-page .talent-section::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 48%; /* ← 2枚目の比率に寄せる。微調整はここだけでOK */
  bottom: 0;
  background: var(--talent-bg, #8fd3ff);
  z-index: 0;
}

.talent-page .talent-section__inner{
  position: relative;
  z-index: 1;
  min-height: 680px;   /* セクション高さの土台 */
  padding: 56px 0 56px;
  display: grid;
  grid-template-columns: minmax(320px, 520px) minmax(420px, 1fr);
  gap: 56px;
  align-items: center;
}

/* 左：全身 */
.talent-page .talent-section__illust{
  padding-left: 28px;
}
.talent-page .talent-section__illust img{
  width: 100%;
  height: auto;
  display: block;
  max-width: 520px;
  margin: 0 auto;
}

/* 右：ロゴ(上)＋情報(下) */
.talent-page .talent-section__content{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-right: 28px;
}

.talent-page .talent-section__top{
  /* ロゴを「上のグラデ領域」に乗せる */
  padding-top: 6px;
}

.talent-page .talent-section__logo{
  max-width: 520px;
  margin: 0 0 10px;
}
.talent-page .talent-section__logo img{
  width: 100%;
  height: auto;
  display: block;
}

.talent-page .talent-section__panel{
  /* パネルを下側へ寄せて、帯の領域に乗せる */
  margin-top: auto;
  padding-bottom: 8px;
  color: #fff;
  max-width: 560px;
}

.talent-page .talent-section__catch{
  margin: 0 0 12px;
  font-weight: 800;
}

.talent-page .talent-section__bio p{
  margin: 0 0 8px;
  line-height: 1.9;
}

/* プロフィールの並び（2枚目に寄せて少し詰める） */
.talent-page .talent-section__meta{
  margin-top: 18px;
  display: grid;
  gap: 8px;
}
.talent-page .talent-section__meta > div{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
}
.talent-page .talent-section__meta dt{
  font-weight: 800;
}
.talent-page .talent-section__meta dd{
  margin: 0;
}

/* SNSボタン：2枚目の「四角いボタン」 */
.talent-page .talent-section__social{
  margin-top: 20px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.talent-page .talent-social{
  width: 86px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 800;
  background: rgba(230,230,230,.55);
  color: rgba(255,255,255,.92);
  /* 文字色を濃くしたいなら↓に変更
     color: rgba(0,0,0,.6);
  */
}

/* レスポンシブ */
@media (max-width: 980px){
  .talent-page .talent-section__inner{
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: auto;
    padding: 44px 0 44px;
  }
  .talent-page .talent-section::after{
    top: 42%;
  }
  .talent-page .talent-section__illust{
    padding-left: 0;
  }
  .talent-page .talent-section__content{
    padding-right: 0;
  }
  .talent-page .talent-social{
    width: 92px;
  }
}
/* TALENT：キャラ色以外（上部背景）を白にする */
.talent-page .talent-section{
  background: #fff !important; /* ← グラデを殺して白固定 */
}

/* 下半分の帯（キャラ色）はそのまま */
.talent-page .talent-section::after{
  background: var(--talent-bg, #8fd3ff) !important;
}
/* =========================
   TALENT pills：左にサムネを「そのまま」表示（矩形）
   ========================= */

/* ピル全体 */
.talent-page .talent-pills .talent-pill{
  display:flex;
  align-items:center;
  height:56px;                 /* ピル高さ（好みで調整） */
  padding:0 18px 0 0;          /* 左は画像に任せるので0 */
  border-radius:999px;
  background:var(--pill-bg, #ddd);
  overflow:hidden;             /* 左画像を丸角に沿って切る */
  gap:14px;
}

/* 左の画像（＝設定した画像をそのまま使う） */
.talent-page .talent-pills .talent-pill__icon{
  width:72px;                  /* 左のサムネ幅 */
  height:56px;                 /* ピル高さに合わせる */
  flex:0 0 auto;
  display:block;
  border-radius:0 !important;  /* 丸くしない */
  object-fit:cover;            /* 2枚目に近い「埋める」表示 */
  object-position:center;
}

/* もし「切り抜き無しで全部見せたい」なら cover→contain に変更
.talent-page .talent-pills .talent-pill__icon{
  object-fit:contain;
  background:#fff;
}
*/

/* 名前（折り返しで変になるのを防ぐ） */
.talent-page .talent-pills .talent-pill__name{
  color:#fff;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 右端の▼を右に寄せる */
.talent-page .talent-pills .talent-pill__chev{
  margin-left:auto;
}

/* 画像が無い時のドットは非表示にしておく（任意） */
.talent-page .talent-pills .talent-pill__dot{
  display:none;
}
/* =========================
   TALENT pills：左サムネをそのまま差し込む（2枚目イメージ）
   ========================= */

/* 横並び */
.talent-page .talent-pills{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

/* ピル本体（子要素/疑似要素の背景を殺して「単色ピル」にする） */
.talent-page .talent-pills .talent-pill{
  --pill-h: 64px;
  --thumb-w: 128px;

  display:flex;
  align-items:center;
  height:var(--pill-h);
  border-radius:999px;
  overflow:hidden;

  background:var(--pill-bg, #ddd) !important;
  border:0 !important;
  box-shadow:none !important;

  padding:0 18px 0 0; /* 左はサムネがあるので0 */
  gap:14px;
  text-decoration:none;
}

/* 既存CSSで背景を持っている可能性がある要素を全リセット */
.talent-page .talent-pills .talent-pill::before,
.talent-page .talent-pills .talent-pill::after{
  content:none !important;
}
.talent-page .talent-pills .talent-pill__name,
.talent-page .talent-pills .talent-pill__chev,
.talent-page .talent-pills .talent-pill__dot{
  background:transparent !important;
  box-shadow:none !important;
}

/* 左の画像＝設定画像をそのまま矩形表示 */
.talent-page .talent-pills .talent-pill__icon{
  width:var(--thumb-w) !important;
  height:var(--pill-h) !important;
  flex:0 0 auto;

  display:block;
  border-radius:0 !important;     /* 丸くしない */
  object-fit:cover;               /* 画面いっぱいに（顔が切れるなら下の object-position 調整） */
  object-position:left center;    /* 顔を出しやすくする */
}

/* 名前 */
.talent-page .talent-pills .talent-pill__name{
  color:#fff !important;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

/* 右端▼（既存の▼が効いてない場合でも見えるように作る） */
.talent-page .talent-pills .talent-pill__chev{
  margin-left:auto;
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:7px solid rgba(255,255,255,.92);
}
/* =========================
   TALENT tabs（上のピル）を「左サムネそのまま＋右に名前＋▼」に統一
   ========================= */

.talent-tabs .talent-tab{
  --pill-h: 56px;
  --thumb-w: 72px;

  display:flex !important;
  align-items:center !important;
  height:var(--pill-h) !important;

  padding:0 18px 0 0 !important;     /* 左は画像、右だけ余白 */
  gap:14px !important;

  border-radius:999px !important;
  overflow:hidden !important;

  background: var(--pill, #8fd3ff) !important; /* タレント色 */
  border:0 !important;
  box-shadow:none !important;
}

/* 左画像：設定した画像をそのまま矩形で差し込む */
.talent-tabs .talent-tab img{
  width:var(--thumb-w) !important;
  height:var(--pill-h) !important;
  flex:0 0 auto !important;

  margin:0 !important;
  border-radius:0 !important;
  object-fit:cover !important;
  object-position:left center !important; /* 顔が出やすい */
}

/* 文字は白固定 */
.talent-tabs .talent-tab,
.talent-tabs .talent-tab *{
  color:#fff !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

/* ▼を右端に寄せる */
.talent-tabs .talent-tab .caret{
  margin-left:auto !important;
  border-top-color: rgba(255,255,255,.92) !important;
}
/* =========================================================
   FIX: TALENTピルの左画像を「設定画像そのまま」で差し込む（2枚目イメージ）
   ========================================================= */

.talent-page .talent-pills .talent-pill{
  --pill-h: 56px;
  --thumb-w: 96px;

  display:flex !important;
  align-items:center !important;
  height:var(--pill-h) !important;

  padding:0 18px 0 0 !important; /* 左は画像 */
  gap:14px !important;

  border-radius:999px !important;
  overflow:hidden !important;

  background:var(--pill-bg, #ddd) !important;
  border:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
/* TALENT：タブ（リンク）を“画像そのもの”で表示 */
.talent-pills--image{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:18px;
}

.talent-tab-image{
  display:inline-block;
  line-height:0; /* 余計な下の隙間を消す */
}

.talent-tab-image__img{
  display:block;
  height:44px;    /* 必要ならここだけ調整 */
  width:auto;
  border-radius:0;      /* 丸抜き禁止 */
  object-fit:contain;   /* トリミング禁止 */
}

.talent-tab-image__fallback{
  display:inline-block;
  padding:10px 14px;
  background:#eee;
  border-radius:10px;
  font-weight:700;
}
/* TALENT tabs（画像リンク） */
.talent-page .talent-tabs{
  margin-top: 22px;
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

.talent-page .talent-tab{
  display:block;
  text-decoration:none;
}

.talent-page .talent-tab__img{
  display:block;
  height:64px;   /* 画像側でピル完成している前提：高さだけ揃える */
  width:auto;
}

@media (max-width: 768px){
  .talent-page .talent-tab__img{ height:56px; }
}
/* =========================
   TALENT：入稿「ピル画像」をそのままリンク表示する（最優先上書き）
   ========================= */

/* 入稿画像ピル：背景や余白を消して、画像だけを表示 */
.talent-page .talent-pill.is-image{
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* 入稿画像（横長ピル）をそのまま見せる */
.talent-page .talent-pill.is-image .talent-pill__img{
  display: block !important;
  height: 96px !important;     /* 好みで調整 */
  width: auto !important;
  max-width: 420px;            /* 好みで調整 */
  border-radius: 24px !important; /* 画像が角丸前提なら 0 にしてOK */
  object-fit: contain !important;  /* 「画像を切らない」 */
}

/* フォールバック用（小アイコン）に引っ張られないようにする */
.talent-page .talent-pill__icon{
  width: 22px;
  height: 22px;
}
.site-header{ z-index: 9999; }
.nav-toggle{ cursor:pointer; position:relative; z-index:10000; pointer-events:auto; }

@media (max-width: 768px){
  .site-nav{ z-index: 9999; }
}
/* =========================================================
   MOBILE NAV FIX
   - スマホでハンバーガーを表示
   - クリック時 .site-nav.is-open をドロップダウン表示
   - PC用横メニュー起因の横スクロール崩れも抑制
   ========================================================= */

.header-inner{
  position: relative; /* モバイルのドロップダウン位置の基準 */
}

@media (max-width: 768px){

  /* 1) ハンバーガーを必ず表示 */
  .nav-toggle{
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* 2) ナビはドロップダウンにして、通常は非表示 */
  .site-nav{
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;

    width: min(92vw, 320px);
    background: rgba(255,255,255,.96) !important;
    border-radius: 16px;
    padding: 14px;
    box-shadow: var(--shadow);
    display: none !important;
    z-index: 9999;
  }

  /* 3) JS が付ける is-open で表示 */
  .site-nav.is-open{
    display: block !important;
  }

  /* 4) メニューを縦並びに */
  .site-nav .menu{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .site-nav .menu a{
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
  }

  /* 5) 横幅崩れ（画面外要素で横スクロール）を抑止 */
  body{
    overflow-x: hidden;
  }

  /* 既に入っている保険（aria-expanded）も生かす */
  .nav-toggle[aria-expanded="true"] ~ .site-nav{
    display: block !important;
  }
}

/* 余白をスマホで少し詰める（全体の幅が合わない対策） */
@media (max-width: 520px){
  .container{
    width: min(1080px, calc(100% - 24px));
  }
}
/* =========================================================
   MOBILE HAMBURGER / NAV 強制修正
   - 三本線を疑似要素で描画（spanが効かなくても表示される）
   - is-open / is-nav-open / aria-expanded どれでも開く
   ========================================================= */

@media (max-width: 768px){

  /* ハンバーガーを必ず表示 */
  .nav-toggle{
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
    position: relative;
    z-index: 10001; /* ナビより上 */
    -webkit-tap-highlight-color: transparent;
  }

  /* 既存spanは念のため非表示（疑似要素で統一） */
  .nav-toggle span{
    display: none !important;
  }

  /* 三本線を疑似要素で描画 */
  .nav-toggle::before{
    content:"";
    position:absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: 2px;
    background: #111;
    border-radius: 2px;
    transform: translateY(-10px);
    box-shadow: 0 8px 0 #111, 0 16px 0 #111; /* 2本分追加 */
  }

  /* ドロップダウン（通常は閉じる） */
  .site-header .site-nav{
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;

    width: min(92vw, 340px) !important;
    background: rgba(255,255,255,.96) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    box-shadow: var(--shadow) !important;
    display: none !important;
    z-index: 10000 !important;
  }

  /* JSが付けるクラスで開く */
  .site-header .site-nav.is-open{
    display: block !important;
  }

  /* JSがbodyにも付けているので保険で開く */
  body.is-nav-open .site-header .site-nav{
    display: block !important;
  }

  /* aria-expanded でも開く（JSが動かない場合の保険） */

  /* メニュー縦並び */
  .site-header .site-nav .menu{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .site-header .site-nav .menu a{
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
  }

  /* 横幅崩れ対策（画面外の要素で横スクロールが出るのを抑止） */
  html, body{
    overflow-x: hidden;
  }
}
/* =========================
   NEWS page / single-news
   ========================= */

.news-page .news-row{cursor:pointer}
.news-page .news-row:hover{background: rgba(255,255,255,.55)}

.news-pagination{
  margin-top:22px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.news-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 12px;
  border-radius:12px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  font-weight:800;
}
.news-pagination .page-numbers.current{
  background: var(--grad);
  color:#fff;
}

/* single */
.news-article{
  width:min(880px, 100%);
  margin:0 auto;
}
.news-article-date{
  margin:0 0 10px;
  font-weight:900;
  font-size:26px;
  letter-spacing:.04em;
  color:#333;
}
.news-article-title{
  margin:0 0 16px;
  font-weight:900;
  font-size:34px;
  letter-spacing:.06em;
  line-height:1.25;
  color:#333;
}
.news-lead{
  margin:0 0 18px;
  font-weight:800;
  line-height:1.9;
  color:#333;
}
.news-figure{
  margin:22px 0;
  border-radius: var(--radius);
  overflow:hidden;
  background:#ddd;
  box-shadow: var(--shadow);
}
.news-figure img{width:100%;height:auto;display:block}
.news-content{
  line-height:1.95;
  font-weight:700;
  color:#333;
}
.news-content a,
.news-article-link a{
  text-decoration: underline;
  color:#6aa7ff;
  font-weight:800;
}
.news-article-actions{margin-top:26px}


/* =========================================================
   TALENT PAGE - PATCH v2 (2026-01-29)
   - TOPボタンをTOPページへ
   - 紹介文/説明文の文字サイズUP
   - 各セクション上部の白地（グラデ）を統一
   - SP時のキャラ選択ピルをセンタリング
   - ロゴとカラー境界の間隔を少し詰める
========================================================= */

/* 1) セクション上部（白地）の背景を全員同じに固定 */
.talent-page .talent-section{
  position: relative !important;
  background: transparent !important;
  --talent-split: 46%; /* ロゴとカラーの隙間を少し詰める（PC基準） */
}
.talent-page .talent-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-soft, linear-gradient(90deg, rgba(255,197,153,.35), rgba(173,201,255,.35)));
  z-index: 0;
  pointer-events: none;
}
/* 下側のカラー帯 */
.talent-page .talent-section::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--talent-split, 46%);
  bottom: 0;
  background: var(--talent-bg, #8fd3ff);
  z-index: 0;
  pointer-events: none;
}
.talent-page .talent-section__inner,
.talent-page .talent-section__content,
.talent-page .talent-section__illust{
  position: relative;
  z-index: 1;
}

/* 2) ロゴとカラー境界のマージンを詰める */
.talent-page .talent-section__top{ padding-top: 18px !important; padding-bottom: 6px !important; }
.talent-page .talent-section__logo{ margin: 0 0 6px !important; width: min(400px, 100%) !important; max-width: 400px !important; }
.talent-page .talent-section__logo img{ width: 100% !important; height: auto !important; max-height: 300px !important; object-fit: contain; }

/* 3) 紹介文/説明文を少し大きく */
.talent-page .talent-section__catch{
  font-size: 16px !important;
  line-height: 1.85 !important;
}
.talent-page .talent-section__bio,
.talent-page .talent-section__bio p{
  font-size: 15px !important;
  line-height: 1.9 !important;
}

/* 4) SP：キャラ選択ピルを確実にセンタリング */
@media (max-width: 600px){
  .talent-page .talent-hero__inner{ text-align: center !important; }
  .talent-page .talent-pills{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 14px auto 0 !important;
    gap: 12px !important;
  }
  .talent-page .talent-pills .talent-pill{
    display: block !important;
    margin: 0 auto !important;
  }
  .talent-page .talent-pill.is-image .talent-pill__img{
    display: block !important;
    margin: 0 auto !important;
  }
}

/* 5) タブレット域：帯位置（見切れ防止のため少し下げる） */
@media (max-width: 980px){
  .talent-page .talent-section{ --talent-split: 42%; }
}


/* =========================================================
   TALENT PAGE - PATCH v3 (2026-01-29)
   - マージン/余白を約6割に（詰める）
   - 紹介文を「折れにくい」範囲で少し大きく
   - TOPボタンのデザインを理想形に復元
   - SP時：ロゴと色帯が被らないように帯の開始位置を下げる
========================================================= */

/* HERO：見出しを他ページ同様のグラデ文字に */
.talent-page .talent-hero{
  background: var(--grad-soft, linear-gradient(90deg, rgba(255,197,153,.35), rgba(173,201,255,.35))) !important;
}
.talent-page .talent-hero__title{
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* 余白を詰める（セクション内の上下・要素間） */
.talent-page .talent-section{
  --talent-split: 44% !important; /* PC：白地を詰める（現状比 約6割寄せ） */
}
.talent-page .talent-section__inner{
  min-height: 620px !important;
  padding: 34px 0 34px !important;
  gap: 40px !important;
}
.talent-page .talent-section__top{
  padding-top: 10px !important;
  padding-bottom: 2px !important;
}
.talent-page .talent-section__logo{
  margin: 0 0 4px !important;
}

/* 紹介文：少し大きく + 折れにくく（字間を微調整／パネル幅を少し広げる） */
.talent-page .talent-section__panel{
  max-width: 660px !important;
}
.talent-page .talent-section__catch{
  font-size: clamp(16px, 1.8vw, 17px) !important;
  line-height: 1.85 !important;
  letter-spacing: -0.01em !important;
}
.talent-page .talent-section__bio,
.talent-page .talent-section__bio p{
  font-size: clamp(15px, 1.6vw, 16px) !important;
  line-height: 1.9 !important;
  letter-spacing: -0.01em !important;
}
/* プロフィール（dt/dd）は折れずに1行で見せる（長い場合は…） */
.talent-page .talent-section__meta dt,
.talent-page .talent-section__meta dd{
  white-space: nowrap;
}
.talent-page .talent-section__meta dd{
  overflow: hidden;
  text-overflow: ellipsis;
}

/* TOPボタン：丸ピル（外枠グラデ＋右に丸矢印） */
.talent-page .talent-to-top{
  display: flex !important;
  justify-content: center !important;
  padding: 34px 0 54px !important;
  background: #fff !important;
}
.talent-page .talent-to-top__link{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 18px 10px 20px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  color: #ff7aa7 !important;
  background: #fff !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.08) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}
.talent-page .talent-to-top__link::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: var(--grad) !important;
  z-index: -1;
}
.talent-page .talent-to-top__arrow{
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--grad) !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* タブレット：高さ・帯位置を微調整 */
@media (max-width: 980px){
  .talent-page .talent-section{ --talent-split: 46% !important; }
  .talent-page .talent-section__inner{
    min-height: auto !important;
    padding: 30px 0 30px !important;
    gap: 22px !important;
  }
  .talent-page .talent-section__panel{ max-width: 100% !important; }
}

/* SP：ロゴと色帯の被り防止（帯を下げる） */
@media (max-width: 600px){
  .talent-page .talent-section{ --talent-split: 56% !important; }
  .talent-page .talent-section__inner{ padding: 26px 0 26px !important; }
  .talent-page .talent-section__top{ padding-top: 6px !important; }
}
@media (max-width: 420px){
  .talent-page .talent-section{ --talent-split: 58% !important; }
}
/* =========================================================
   TALENT PAGE - FIX v4（文字サイズ / TOPボタン / SPロゴ被り / 余白圧縮）
   追記場所：theme.css の最下部
   ========================================================= */

/* 見出し（他ページ同様のグラデ） */
.talent-page .talent-hero__title{
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* セクション共通：余白を “現状の約6割” まで圧縮 */
.talent-page .talent-section{
  --talent-split: 44% !important; /* ロゴとカラーの距離を詰める（PC） */
  padding: 0 !important;
}

/* 上側（白地）の背景感を全員同一にする（1人目と揃える） */
.talent-page .talent-section{
  position: relative;
  background: transparent !important;
  overflow: hidden;
}
.talent-page .talent-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--grad-soft);
  z-index:0;
}
.talent-page .talent-section::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top: var(--talent-split);
  bottom:0;
  background: var(--talent-bg, #8fd3ff);
  z-index:0;
}

/* レイアウト：余白/間隔を圧縮 */
.talent-page .talent-section__inner{
  position: relative;
  z-index: 1;
  min-height: clamp(560px, 68vh, 700px) !important;
  padding: 34px 0 34px !important;      /* ←圧縮 */
  gap: 34px !important;                 /* ←圧縮 */
  align-items: stretch !important;
}

/* ロゴ：400x300相当で拡大しない + ロゴ下の余白を詰める */
.talent-page .talent-section__logo{
  max-width: 400px !important;
  margin: 0 auto 8px !important; /* ←詰める */
}
.talent-page .talent-section__logo img{
  width: 100% !important;
  height: auto !important;
  max-height: 300px !important;
  object-fit: contain !important;
  display:block !important;
}

/* 紹介文字：効いてない原因を潰すため “強制上書き” で大きく */
.talent-page .talent-section__catch{
  font-size: clamp(16px, 1.2vw, 19px) !important;
  font-weight: 900 !important;
  margin: 0 0 10px !important;
  line-height: 1.55 !important;
}
.talent-page .talent-section__bio,
.talent-page .talent-section__bio p{
  font-size: clamp(14px, 1.05vw, 16.5px) !important;
  line-height: 1.9 !important;
}

/* メタ：折れない（=1行）を優先。長い handle は省略表示 */
.talent-page .talent-section__meta{
  margin-top: 14px !important;
  font-size: clamp(13px, 0.95vw, 14.5px) !important;
}
.talent-page .talent-section__meta > div{
  display:grid;
  grid-template-columns: 132px 1fr !important;
  gap: 10px !important;
}
.talent-page .talent-section__meta dd{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* TOPボタン：理想（他ページ）と同じ “グラデ枠 + 右丸矢印” に揃える */
.talent-page .talent-to-top{
  display:flex !important;
  justify-content:center !important;
  padding: 34px 0 56px !important;
  background: transparent !important;
}
.talent-page .talent-to-top__link{
  display:inline-flex !important;
  align-items:center !important;
  gap: 14px !important;
  padding: 14px 20px 14px 22px !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--grad) border-box !important;
  text-decoration:none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
}
.talent-page .talent-to-top__label{
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  color: #ff77b6 !important; /* 文字はピンク寄せ（理想に近づける） */
}
.talent-page .talent-to-top__arrow{
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background: var(--grad) !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* SP：ピルを中央寄せ（画像ピルも確実にセンタリング） */
@media (max-width: 600px){
  .talent-page .talent-pills{
    display:flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .talent-page .talent-pill.is-image{
    display:block !important;
  }
  .talent-page .talent-pill.is-image .talent-pill__img{
    margin: 0 auto !important;
  }

  /* SPロゴとカラー背景が被る問題：帯（::after）を使わず “パネル背景” に切替 */
  .talent-page .talent-section::after{
    display:none !important;
  }
  .talent-page .talent-section{
    background: var(--grad-soft) !important;
  }
  .talent-page .talent-section__inner{
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 22px 0 28px !important;
    gap: 12px !important;
  }
  .talent-page .talent-section__content{
    padding: 0 16px !important;
    text-align: center !important;
  }
  .talent-page .talent-section__logo{
    margin: 0 auto 8px !important;
    max-width: 320px !important;
  }

  .talent-page .talent-section__panel{
    position: relative !important;
    margin-top: 6px !important;   /* ロゴとカラーの距離を詰める */
    padding: 14px 16px 16px !important;
    color: #fff !important;
    text-align: left !important;
  }
  .talent-page .talent-section__panel::before{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    top:0;
    bottom:-10px;
    background: var(--talent-bg, #8fd3ff);
    z-index:-1;
  }
}

/* さらに小さいSPで字が大きすぎて崩れないように微調整 */
@media (max-width: 390px){
  .talent-page .talent-section__catch{
    font-size: 16px !important;
  }
  .talent-page .talent-section__bio,
  .talent-page .talent-section__bio p{
    font-size: 14px !important;
  }
}

/* =========================================================
   GUIDELINE page
   - 最下部の本文と TOP ボタンの間に余白を追加
   - guideline-section でスコープ（テンプレート側で付与）
   ========================================================= */
.guideline-section .paper-box{
  margin-bottom: 28px;
}
@media (max-width: 768px){
  .guideline-section .paper-box{
    margin-bottom: 22px;
  }
}

/* =========================================================
   CONTACT page - PATCH (2026-01-29)
   - PC/SP の見え方をモック（添付）に寄せる
   - デザイン調整のみ（機能は既存の EmailJS を維持）
   ========================================================= */

/* ダークパネルは全幅・中身だけ container で中央寄せ */
.contact-panel{
  background:#4a444d;
  color:#fff;
  padding: 54px 0 58px;
}

.contact-panel .contact-copy{
  max-width: 900px;
  margin: 0 auto 22px;
  font-weight: 700;
  line-height: 1.95;
}
.contact-panel .contact-copy p{margin:0 0 14px}
.contact-panel .contact-copy p:last-child{margin-bottom:0}
.contact-panel .contact-copy a{color:#aeb6ff}

/* フォームのレイアウト（PC） */
.contact-form{
  max-width: 900px;
  margin: 18px auto 0;
  display: grid;
  gap: 22px;
}

.contact-form .form-row{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 22px;
  align-items: center;
}
.contact-form .form-row.is-textarea{align-items:flex-start}

/* ラベル：必須バッジを右端に寄せて "ラベル列と入力列の間" に見せる */
.contact-form .form-row label{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.2;
}

/* 入力 */
.contact-panel .form-row input,
.contact-panel .form-row textarea{
  color:#222;
  background:#fff;
  border:0;
  border-radius: 6px;
  padding: 16px 16px;
  font-weight: 800;
  outline: none;
}
.contact-panel .form-row textarea{
  min-height: 240px;
  resize: vertical;
}

/* 必須バッジ */
.contact-panel .req{
  margin-left: 0;
  flex: 0 0 auto;
  background:#ff7b7b;
  color:#fff;
  font-size:14px;
  padding:6px 10px;
  border-radius:6px;
}

/* 送信ボタン：横長ピル + 右端に白い三角 */
.contact-panel .contact-submit{
  width: min(520px, 100%);
  height: 64px;
  padding: 0 70px;
  font-size: 18px;
  justify-content: center;
  position: relative;
}
.contact-panel .contact-submit .tri{
  position:absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 10px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* パネル下：プライバシー文言 + TOPボタン */
.contact-after{
  padding: 26px 0 54px;
}
.contact-privacy{
  max-width: 900px;
  margin: 0 auto 26px;
  text-align: center;
  font-weight: 700;
  line-height: 1.9;
  color: #333;
}
.contact-privacy p{margin:0 0 10px}
.contact-privacy p:last-child{margin-bottom:0}
.contact-privacy a{
  color:#6a7cff;
  font-weight:900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* SP：ラベルを上・入力を下に縦積み */
@media (max-width: 768px){
  .contact-panel{padding: 40px 0 46px;}

  .contact-panel .contact-copy{
    margin-bottom: 18px;
    font-size: 14px;
  }

  .contact-form{gap: 18px;}
  .contact-form .form-row{
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }
  .contact-form .form-row label{
    justify-content: flex-start;
    font-size: 16px;
  }
  .contact-panel .req{margin-left: 10px;}

  .contact-panel .form-row textarea{min-height: 200px;}

  .contact-panel .contact-submit{
    width: 100%;
    height: 60px;
    padding: 0 64px;
  }
  .contact-panel .contact-submit .tri{right: 22px;}

  .contact-after{padding: 22px 0 48px;}
  .contact-privacy{font-size: 13px;}
}
/* =========================================================
   CONTACT - ブラウン幅調整（PCは箱幅 / SPは全幅のまま）
   ========================================================= */

/* PC/タブレット：ブラウン背景を section 全幅ではなく container（箱）に付ける */
@media (min-width: 769px){
  .contact-panel{
    background: transparent;   /* 全幅ブラウンを解除 */
  }

  .contact-panel > .container{
    background: #4a444d;       /* ブラウンを箱側に付与 */
    color: #fff;
    padding: 54px 70px 58px;   /* 箱内の余白（好みで調整可） */
    border-radius: 0;          /* 角丸不要なら 0 のまま */
  }
}
/* =========================================================
   MOBILE MENU (FULLSCREEN) - PATCH (2026-01-29)
   - SPでハンバーガーを右端に配置
   - 押下でフルスクリーンメニュー（添付2枚目イメージ）を表示
   - 背景は 375x1080 の画像を使用（assets/img/mobile_menu_bg_375x1080.png）
   ========================================================= */

/* JS が body に付与するクラス：スクロール固定 */
body.is-nav-open{
  overflow: hidden;
  touch-action: none;
}

/* SP：ヘッダー右端にハンバーガーを固定 */
@media (max-width: 768px){
  .header-inner{
    position: relative;
    padding-right: 54px !important; /* 右端に置くハンバーガー分の逃げ */
  }
  .nav-toggle{
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* SP：フルスクリーンメニュー */
@media (max-width: 768px){

  /* ナビは常に fixed（レイアウトから外す）＋通常は非表示 */
  .site-header .site-nav{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;

    /* 2枚目の背景画像（優先）＋無い場合はグラデでフォールバック */
    background:
      var(--mobile-nav-bg, none) center top / cover no-repeat,
      var(--grad) !important;

    border-radius: 0 !important;
    box-shadow: none !important;

    padding: 96px 0 0 !important; /* メニューの開始位置 */
    display: none !important;
    z-index: 10000 !important;
    overflow: hidden;
  }

  /* 開く条件：is-open / body.is-nav-open / aria-expanded */
  .site-header .site-nav.is-open{
    display: block !important;
  }
  body.is-nav-open .site-header .site-nav{
    display: block !important;
  }

  /* メニューの並び */
  .site-header .site-nav .menu{
    list-style: none;
    margin: 0;
    padding: 0 0 0 44px; /* 左余白（2枚目に寄せる） */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 26px !important;
  }

  .site-header .site-nav .menu a{
    color: #fff !important;
    font-size: clamp(34px, 10vw, 48px) !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  /* 既存の coming soon 画像は SPメニューでは使わない */
  .site-header .site-nav .nav-coming-img{
    display: none !important;
  }

  /* GOODS：coming soon をピルで表示 */
  .site-header .site-nav .is-coming-soon .nav-text{
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .site-header .site-nav .is-coming-soon .nav-text::after{
    content: "coming soon";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.35);
    color: rgba(255,255,255,.95);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .04em;
    transform: translateY(-2px);
  }

  /* GOODS（coming soon）はクリック不可のまま */
  .site-header .site-nav .is-coming-soon > a{
    opacity: .45 !important;
  }

  /* Close（×）ボタン：JSで .nav-close を nav 直下に prepend する */
  .site-header .site-nav .nav-close{
    position: absolute;
    top: 22px;
    right: 22px;
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .site-header .site-nav .nav-close::before,
  .site-header .site-nav .nav-close::after{
    content:"";
    position:absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: 3px;
    background: rgba(255,255,255,.92);
    border-radius: 3px;
    transform-origin: center;
  }
  .site-header .site-nav .nav-close::before{ transform: translateY(-50%) rotate(45deg); }
  .site-header .site-nav .nav-close::after{  transform: translateY(-50%) rotate(-45deg); }


  /* nav-toggle を×として使うため、JS挿入の .nav-close は表示しない（重複防止） */
  body.is-nav-open .site-header .site-nav .nav-close{
    display: none !important;
  }

  /* メニュー表示中：ハンバーガーは「×」に変形して右上に固定（閉じるボタンとして使う） */
  body.is-nav-open .nav-toggle{ position: relative; }
  body.is-nav-open .nav-toggle span{ opacity: 0 !important; }

  body.is-nav-open .nav-toggle{
    position: fixed !important;
    top: 22px !important;
    right: 22px !important;
    left: auto !important;
    transform: none !important;
    z-index: 100000 !important; /* メニューより上 */
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;

  }

  /* 既存の三本線（::before）を 1本の斜線に変更 */
  body.is-nav-open .nav-toggle::before{
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    box-shadow: none !important;
    top: 50% !important;
    height: 3px !important;
    background: rgba(255,255,255,.92) !important;
    border-radius: 3px !important;
    transform: translateY(-50%) rotate(45deg) !important;
  }

  /* もう1本の斜線（::after）を追加して × を完成させる */
  body.is-nav-open .nav-toggle::after{
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: 3px;
    background: rgba(255,255,255,.92);
    border-radius: 3px;
    transform: translateY(-50%) rotate(-45deg);
  }
}