/* =========================
   Cradle Project (Full styles.css)
   Logo-based Theme + Members + Profile + Tags
   Light-first + Auto Dark Mode
   ========================= */

/* =========================
   Variables
   ========================= */
:root{
  /* Brand from your logo */
  --brand-pink: #EF7D95;
  --brand-cyan: #68C5DB;
  --brand-cyan2:#66C5DA;

  /* Light UI */
  --bg-0: #FFFFFF;
  --bg-1: #F6FAFC;
  --paper: rgba(255,255,255,.72);

  --ink-0:#0B1024;
  --ink-1:#2D3558;
  --muted:#6C769D;

  --stroke: rgba(11,16,36,.10);
  --stroke-strong: rgba(11,16,36,.16);

  --glass: rgba(255,255,255,.70);
  --glass2: rgba(255,255,255,.82);

  --shadow: 0 18px 46px rgba(11,16,36,.10);
  --shadow-soft: 0 12px 26px rgba(11,16,36,.08);

  /* fixed header height */
  --header-h: 72px;

  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;

  --container: 1120px;
  --gutter: 20px;

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* Auto dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg-0:#070A14;
    --bg-1:#0B1024;
    --bg-tint-cyan: rgb(12, 47, 54);
    --bg-tint-pink: rgb(73, 13, 26);
    --paper: rgba(0, 0, 0, 0.08);

    --ink-0:#EAF0FF;
    --ink-1:#B9C4E6;
    --muted:#8793B6;

    --stroke: rgba(255,255,255,.14);
    --stroke-strong: rgba(255,255,255,.22);

    --glass: rgba(255,255,255,.08);
    --glass2: rgba(255,255,255,.12);

    --shadow: 0 16px 40px rgba(0,0,0,.35);
    --shadow-soft: 0 10px 26px rgba(0,0,0,.22);
  }
}

/* =========================
   Reset / Base
   ========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink-0);
  /* single continuous background (no seams) */
  background:
    linear-gradient(
      180deg,
      var(--bg-0) 0%,
  /*  var(--bg-tint-pink) 70%,
      var(--bg-tint-cyan) 80%, */
      var(--bg-0) 100%
    );
  background-attachment: fixed;
  font-family: "Zen Maru Gothic","Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  letter-spacing: .02em;
  overflow-x:hidden;
}

/* soft noise / sparkle (disabled to avoid seams) */
body::before{ display:none; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; }
p{ margin:0; }

/* =========================
   Layout helpers
   ========================= */
.container{
  width:min(var(--container), calc(100% - var(--gutter)*2));
  margin-inline:auto;
}
.section{
  padding: clamp(56px, 7vw, 92px) 0;
}
.section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-top:50px;
}
.section-title h2{
  margin:0;
  font-weight:800;
  letter-spacing:.06em;
  font-size: clamp(22px, 2.2vw, 34px);
}
.section-title .hint{
  color:var(--muted);
  font-size:14px;
}
.section-title-center{
  margin:0;
  font-weight:800;
  letter-spacing:.06em;
  font-size: clamp(22px, 2.2vw, 34px);
  display:flex;
  align-items:flex-end;
  gap:14px;
  position: relative;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #68c6db, #51b6cf 10px, #f07f97 0, #eb6780 20px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* generic grids */
.grid{
  display:grid;
  gap: 14px;
}
.grid-3{
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .grid-3{ grid-template-columns: 1fr; }
}

/* =========================
   Header / Nav
   ========================= */
.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom:1px solid var(--stroke);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:18px;
}

main{ padding-top: var(--header-h); }
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand img{
  height:auto;
  width:50px;
  display:block;
}
.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  color:var(--ink-1);
  font-size:14px;
  padding:10px 10px;
  border-radius: 12px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav a:hover{
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  color: var(--ink-0);
}

/* =========================
   Hero
   ========================= */
.hero{ padding: clamp(42px, 7vw, 86px) 0 22px; }

.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3vw, 34px);
  align-items:stretch;
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
}

.hero-card{
  border-radius: var(--r-xl);
  padding: clamp(22px, 3vw, 34px);
  background: var(--glass);
  border:1px solid var(--stroke-strong);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  margin-top: 30px
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(520px 320px at 30% 30%, color-mix(in srgb, var(--brand-cyan) 22%, transparent), transparent 60%),
    radial-gradient(520px 320px at 70% 40%, color-mix(in srgb, var(--brand-pink) 20%, transparent), transparent 60%);
  filter: blur(14px);
  opacity:.85;
}
.hero-card > *{ position:relative; }

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size: 13px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.kicker .dot{
  width:8px; height:8px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-pink));
  box-shadow: 0 0 18px color-mix(in srgb, var(--brand-cyan) 40%, transparent);
}
.hero h1{
  margin:14px 0 12px;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height:1.15;
  letter-spacing:.04em;
}
.hero p{
  color:var(--ink-1);
  line-height:1.9;
  font-size: 15px;
}
.hero-actions{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 16px;
  border:1px solid var(--stroke-strong);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  color:var(--ink-0);
  font-weight:750;
  font-size:14px;
  letter-spacing:.04em;
  transition: transform .18s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  user-select:none;
}
.btn:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
}
.btn-primary{
  border-color: color-mix(in srgb, var(--brand-cyan) 38%, var(--stroke-strong));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-cyan) 26%, var(--paper)),
    color-mix(in srgb, var(--brand-pink) 18%, var(--paper))
  );
  box-shadow: 0 14px 36px color-mix(in srgb, var(--brand-cyan) 18%, transparent);
}
.btn-primary:hover{
  border-color: color-mix(in srgb, var(--brand-cyan) 55%, var(--stroke-strong));
}
.btn-ghost{ background: transparent; }

/* =========================
   Cards / Lists
   ========================= */
.card{
  border-radius: var(--r-lg);
  background: var(--glass);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.card-pad{ padding: 18px; }

.card-title{
  margin:0 0 8px;
  font-size:16px;
  letter-spacing:.04em;
}
.card-text{
  margin:0;
  color:var(--ink-1);
  line-height:1.85;
  font-size:14px;
}

/* News list */
.list{
  display:grid;
  gap:10px;
}
.list-item-link{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.list-item-link:focus-visible{
  outline:2px solid color-mix(in srgb, var(--brand-cyan) 50%, transparent);
  outline-offset:3px;
}
.list-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 76%, transparent);
}
.list-item:hover{
  border-color: color-mix(in srgb, var(--brand-cyan) 24%, var(--stroke));
  background: color-mix(in srgb, var(--paper) 88%, transparent);
}
.meta{
  color:var(--muted);
  font-size:12px;
  margin-bottom:12px;
}
.list-item h4{
  margin:4px 0 0;
  font-size:15px;
  letter-spacing:.03em;
}
.list-item p{
  margin:6px 0 0;
  color:var(--ink-1);
  font-size:13px;
  line-height:1.8;
}

.news-more{ margin-top:16px; }
.news-crumb{ margin-bottom:14px; }
.news-article{
  border-radius: var(--r-xl);
  padding: clamp(18px, 3vw, 28px);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow-soft);
}
.news-article h1{
  margin: 4px 0 10px;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing:.05em;
}
.news-article .news-meta{
  display:flex;
  gap:10px;
  align-items:center;
  color: var(--muted);
  font-size: 12px;
}
.news-article .news-type{
  padding: 4px 10px;
  border-radius: 999px;
  border:1px solid var(--stroke);
}
.news-article .news-body{ margin-top: 16px; }
.news-article .news-body p{ margin: 0 0 10px; line-height: 1.9; }
.news-article .news-image{ margin-top: 14px; border-radius: 18px; overflow:hidden; border:1px solid var(--stroke); }
.news-article .news-image img{ width:100%; display:block; }

/* =========================
   concept
   ========================= */
.concept{
  border-radius: var(--r-xl);
  padding: clamp(18px, 3vw, 28px);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand-pink) 10%, var(--glass)),
    var(--glass)
  );
  border:1px solid color-mix(in srgb, var(--brand-pink) 18%, var(--stroke));
  box-shadow: var(--shadow-soft);
}
.concept blockquote{
  margin:0;
  line-height:2.0;
  font-size: 15px;
  white-space: pre-line;
  color: var(--ink-0);
}
.concept .sig{
  margin-top:12px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing:.08em;
  text-align:right;
}

/* =========================
   Members (4 people / 2x2)
   ========================= */
.members-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 760px){
  .members-grid{ grid-template-columns: 1fr; }
}

/* Link-card behavior */
.member-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.member-link:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--member) 45%, transparent);
  outline-offset: 4px;
  border-radius: var(--r-xl);
}
.member-link .pill{ pointer-events:none; }

/* member accent variables */
.member-card{ --member:#68C5DB; --member2:#EF7D95; }
.member-card[data-member="moca"]{ --member:#B1CADC; --member2:#E0A1AF; }
.member-card[data-member="mona"]{ --member:#C596A3; --member2:#D8ABB7; }
.member-card[data-member="ravi"]{ --member:#537BB1; --member2:#8BB0DE; }
.member-card[data-member="noah"]{ --member:#CD7247; --member2:#262D2A; }

.member-card{
  position:relative;
  border-radius: var(--r-xl);
  overflow:hidden;
  background: var(--glass2);
  border:1px solid var(--stroke-strong);
  box-shadow: var(--shadow-soft);
  min-height: 260px;
  isolation:isolate;
}

/* “翼の光”：メンバー色で光らせる */
.member-card::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(300px 220px at 18% 18%,
      color-mix(in srgb, var(--member) 26%, transparent), transparent 60%),
    radial-gradient(280px 200px at 82% 36%,
      color-mix(in srgb, var(--member2) 20%, transparent), transparent 62%);
  filter: blur(14px);
  opacity:.95;
  z-index:0;
}

/* 細い光のライン（戦女神要素） */
.member-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,
      transparent 0 44%,
      color-mix(in srgb, var(--member) 22%, transparent) 44% 46%,
      transparent 46% 100%);
  opacity:.55;
  z-index:0;
  pointer-events:none;
}

.member-body{
  position:relative;
  z-index:1;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.member-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.member-head h3{
  margin:0;
  font-size:18px;
  letter-spacing:.06em;
}
.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--member) 28%, var(--stroke-strong));
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  color: var(--ink-1);
  white-space:nowrap;
}

/* 立ち絵の見せ方：カード内に“収めて映える” */
.member-media{
  margin-top:6px;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  overflow:hidden;
  padding: 10px 10px 0;
}
.member-media img{
  width:100%;
  /* TOP：全身ではなく“上半身”を見せる */
  height: 340px;
  object-fit: cover;
  object-position: center top;
  display:block;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.18));
}

/* 下側をほんのりフェード（対応ブラウザのみ） */
@supports (mask-image: linear-gradient(#000,#000)) {
  .member-media{
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 88%, rgba(0,0,0,0));
  }
}

/* Links row used both on top and profiles */
.linkrow{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  font-size:13px;
  color:var(--ink-1);
  border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  transition: transform .18s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.pill:hover{
  color:var(--ink-0);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-color: color-mix(in srgb, var(--member) 30%, var(--stroke));
  transform: translateY(-1px);
}

/* クリックしたくなるホバー */
.member-card:hover{
  border-color: color-mix(in srgb, var(--member) 32%, var(--stroke-strong));
  box-shadow: 0 18px 46px color-mix(in srgb, var(--member) 16%, rgba(11,16,36,.08));
}

/* =========================
   Profile Page
   ========================= */
.section-tight{ padding: 26px 0; }

.crumb{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 16px;
}
.crumb a{ color: inherit; }
.crumb a:hover{ color: var(--ink-0); }
.crumb .sep{ opacity:.6; }

.profile{ --member:#68C5DB; --member2:#EF7D95; }
.profile[data-member="moca"]{ --member:#B1CADC; --member2:#E0A1AF; }
.profile[data-member="mona"]{ --member:#C596A3; --member2:#D8ABB7; }
.profile[data-member="ravi"]{ --member:#537BB1; --member2:#8BB0DE; }
.profile[data-member="noah"]{ --member:#CD7247; --member2:#262D2A; }

.profile-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items:stretch;
}
@media (max-width: 900px){
  .profile-grid{ grid-template-columns: 1fr; }
}

.profile-card{
  border-radius: var(--r-xl);
  padding: clamp(18px, 2.6vw, 28px);
  background: var(--glass2);
  border:1px solid var(--stroke-strong);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.profile-card::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:
    radial-gradient(560px 340px at 25% 25%, color-mix(in srgb, var(--member) 24%, transparent), transparent 62%),
    radial-gradient(520px 320px at 70% 35%, color-mix(in srgb, var(--member2) 18%, transparent), transparent 62%);
  filter: blur(16px);
  opacity:.9;
}
.profile-card > *{ position:relative; }

.profile-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.profile-kicker .dot{
  width:8px; height:8px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--member), var(--member2));
  box-shadow: 0 0 18px color-mix(in srgb, var(--member) 35%, transparent);
}

.profile-name{
  margin: 14px 0 6px;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height:1.12;
  letter-spacing:.05em;
}
.profile-role{
  margin:0 0 14px;
  color: var(--ink-1);
  font-weight: 800;
  letter-spacing:.06em;
}
.profile-lead{
  margin:0;
  color: var(--ink-1);
  line-height:1.9;
  font-size: 15px;
}

.profile-links{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

/* ボタンをメンバー色に寄せる（個別ページだけ） */
.profile .btn-primary{
  border-color: color-mix(in srgb, var(--member) 40%, var(--stroke-strong));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--member) 26%, var(--paper)),
    color-mix(in srgb, var(--member2) 18%, var(--paper))
  );
  box-shadow: 0 14px 36px color-mix(in srgb, var(--member) 16%, transparent);
}

.profile-meta{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.meta-chip{
  font-size:12px;
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid color-mix(in srgb, var(--member) 24%, var(--stroke));
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  color: var(--ink-1);
}

.profile-visual{
  border-radius: var(--r-xl);
  background: var(--glass);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  position:relative;
  padding: 10px 10px 0;
}
.profile-visual::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(520px 320px at 40% 30%, color-mix(in srgb, var(--member) 18%, transparent), transparent 62%);
  filter: blur(18px);
  opacity:.75;
}

.profile-visual{
  /* KVホバー表示用（各ページで --hover-url を設定） */
  --hover-url: none;
}

.profile-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--hover-url);
  background-size: cover;
  background-position: center;
  opacity:0;
  transition: opacity .25s var(--ease);
  z-index:2;
}

/* KV切り替えは「本当にホバーできる環境（PC）」だけで有効化 */
@media (hover:hover) and (pointer:fine){
  /* マウスオーバー（PC）/ フォーカス（キーボード）でKV表示 */
.profile-visual:hover::after,
.profile-visual:focus-within::after{
  opacity:1;
}

  /* KV表示中は立ち絵を消す（PCのみ） */
  }

/* タッチ端末では hover 擬似保持で立ち絵が消える事故を防ぐ */
@media (hover: none), (pointer: coarse){
  .profile-visual::after{ display:none; }
  .profile-visual img{ opacity:1 !important; }
}

.profile-visual img{
  position:relative;
  z-index:1;
  width:100%;
  height: min(72vh, 640px);
  object-fit: cover;
  object-position: center 0%;
  filter: drop-shadow(0 22px 24px rgba(0,0,0,.18));
}

/* スマホ等（hoverなし）では誤作動を避け、立ち絵を優先 */
@media (hover: none) {
  .profile-visual::after{
    display:none;
  }
}

.backrow{
  margin-top: 22px;
  display:flex;
  justify-content:flex-start;
}

/* =========================
   Tags / Embeds (for member pages)
   ========================= */
.taggrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 820px){
  .taggrid{ grid-template-columns: 1fr; }
}
.tagcard{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  box-shadow: var(--shadow-soft);
  padding: 14px 14px;
}
.taglabel{
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .08em;
}
.tagvalue{
  margin-top: 6px;
  font-weight: 800;
  letter-spacing: .04em;
}

.note{
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}

/* Responsive embed helper */
.embed{
  margin-top: 12px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.06);
  aspect-ratio: 16 / 9;
}
.embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* =========================
   Footer
   ========================= */
.footer{
  padding: 34px 0 54px;
  border-top:1px solid var(--stroke);
  color: var(--muted);
}
.footer small{ display:block; line-height:1.9; }

/* =========================
   Profile: KV表示時は立ち絵を消す
   ========================= */

.profile-visual img{
  transition: opacity .25s var(--ease);
}

.profile-visual:hover img,
.profile-visual:focus-within img{
  opacity:0;
}

@media (hover: none) {
  .profile-visual img{
    opacity:1;
  }
}

/* =========================
   Contact
   ========================= */

.contact-title{
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: .08em;
  margin: 0;
}

.contact-form{
  margin-top: 18px;
}

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (max-width: 820px){
  .form-grid{ grid-template-columns: 1fr; }
}

.field{ display:flex; flex-direction:column; gap: 8px; }
.field-span{ grid-column: 1 / -1; }

.field label{
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
}

.field input,
.field select,
.field textarea{
  width:100%;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  color: var(--ink-0);
  padding: 12px 12px;
  outline: none;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .18s var(--ease);
}

.field textarea{ resize: vertical; min-height: 180px; }

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: color-mix(in srgb, var(--accent) 60%, var(--stroke));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  transform: translateY(-1px);
}

.help{
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
}

.check{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 80%, transparent);
}

.check input{ width: 18px; height: 18px; }

.form-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.form-success {
  display: none;
  margin-top: 48px;
  padding: 32px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  text-align: center;
  animation: fadeIn 0.6s ease forwards;
}

.form-success h2 {
  margin-bottom: 16px;
  letter-spacing: 0.08em;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* =========================
   Loader / Intro
   ========================= */
.cp-lock{ overflow:hidden; }

#cp-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

#cp-loader .cp-loader-inner{
  width:min(520px, 86vw);
  text-align:center;
}

.cp-loader-logo{
  width:min(280px, 70vw);
  height:auto;
  display:block;
  margin:0 auto 22px;
  animation: cpFloat 3.6s ease-in-out infinite;
}

@keyframes cpFloat{
  0%,100%{ transform: translateY(0) rotate(-0.6deg); }
  50%{ transform: translateY(-8px) rotate(0.8deg); }
}

.cp-loader-progress{ display:grid; gap:10px; }

/* Hide loader UI (logo + bar) when intro starts */
#cp-loader.cp-ui-off .cp-loader-inner{
  opacity:0;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
.cp-loader-bar{
  height: 12px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  overflow:hidden;
  background: rgba(0,0,0,0.04);
}
.cp-loader-bar-fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brand-cyan) 85%, white),
    color-mix(in srgb, var(--brand-pink) 85%, white)
  );
  border-radius: 999px;
  transition: width .18s var(--ease);
}
.cp-loader-percent{ font-size: 12px; color: var(--muted); letter-spacing: .08em; }

/* White flash when loaded */
#cp-loader.cp-loaded::after{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  opacity:0;
  animation: cpFlash .55s ease forwards;
  pointer-events:none;
}
@keyframes cpFlash{
  0%{ opacity:0; }
  25%{ opacity:1; }
  100%{ opacity:0; }
}

/* Intro stage */
.cp-intro{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
}
#cp-loader.cp-loaded .cp-intro{ opacity:1; }

.cp-intro-stage{
  position:relative;
  width:min(900px, 92vw);
  height:min(520px, 58vh);
}
.cp-intro-ch{
  position:absolute;
  bottom:0;
  width: clamp(180px, 22vw, 260px);
  height:auto;
  opacity:0;
  transform: translateY(60px);
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.12));
}
.cp-intro-ch:nth-child(1){ left: 2%; }
.cp-intro-ch:nth-child(2){ left: 22%; }
.cp-intro-ch:nth-child(3){ left: 48%; }
.cp-intro-ch:nth-child(4){ left: 74%; }

#cp-loader.cp-intro-play .cp-intro-ch{
  animation: cpRise .9s var(--ease) forwards;
}
#cp-loader.cp-intro-play .cp-intro-ch:nth-child(1){ animation-delay: .05s; }
#cp-loader.cp-intro-play .cp-intro-ch:nth-child(2){ animation-delay: .22s; }
#cp-loader.cp-intro-play .cp-intro-ch:nth-child(3){ animation-delay: .39s; }
#cp-loader.cp-intro-play .cp-intro-ch:nth-child(4){ animation-delay: .56s; }

@keyframes cpRise{
  to{ opacity:1; transform: translateY(0); }
}

.cp-intro-copy{
  position:absolute;
  left:52%;
  top: 10%;
  transform: translateX(-50%);
  font-size: clamp(22px, 3.2vw, 54px);
  font-weight: bold;
  letter-spacing: .12em;
  background: repeating-linear-gradient(45deg, #68c6db, #51b6cf 10px, #f07f97 0, #eb6780 20px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity:0;
}
#cp-loader.cp-copy .cp-intro-copy{
  animation: cpCopy 4s ease forwards;
}
@keyframes cpCopy{
  0%{ opacity:0; transform: translateX(-50%) translateY(8px); }
  20%{ opacity:1; transform: translateX(-50%) translateY(0); }
  80%{ opacity:1; }
  100%{ opacity:0; }
}

#cp-loader.cp-fade{
  animation: cpFadeOut .55s ease forwards;
}
@keyframes cpFadeOut{ to{ opacity:0; visibility:hidden; } }

@media (prefers-color-scheme: dark){
  #cp-loader{ background:#070A14; }
}

@media (max-width: 640px){
  .cp-intro-stage{ height: min(420px, 54vh); }
  .cp-intro-ch{ width: clamp(140px, 32vw, 200px); }
  .cp-intro-ch:nth-child(1){ left:-6%; }
  .cp-intro-ch:nth-child(2){ left: 18%; }
  .cp-intro-ch:nth-child(3){ left: 48%; }
  .cp-intro-ch:nth-child(4){ left: 72%; }
}

.news-hero img{
  width: 100%;
  height: auto;
}

/* ===== Portrait switch controls (Tachie/KV + outfits) ===== */
.profile-visual--switch{ position: relative; }
.profile-visual--switch::after{ display:none !important; } /* disable hover KV overlay if any */
.profile-visual--switch:hover img{ opacity:1 !important; } /* prevent mobile pseudo-hover hiding */
.profile-visual--switch img{
  width: 100%;
  height: auto;
  display: block;
}

.pv-controls{
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 2;
}

.pv-controls button{
  border-radius: 999px;
  padding: 6px 12px;
  border: 0;
  background: #fff;
  color: #111;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  cursor: pointer;
}

.pv-controls button.is-active{
  background: #111;
  color: #fff;
}

.pv-controls button:disabled{
  opacity: .4;
  cursor: default;
}

.pv-outfits{
  display: flex;
  gap: 6px;
}

/* ===== Restore crop for switch portrait ===== */
.profile-visual--switch{
  /* 上半身だけ見せたい高さに調整 */
  height: 700px;        /* ←好みで調整（例: 480〜620） */
  overflow: hidden;
  border-radius: 24px;  /* 既存に合わせて */
}

/* 画像を枠にフィットさせてトリミング */
.profile-visual--switch img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* 上を基準（上半身寄り） */
}

/* ===== Fix: outfit buttons focus causes portrait to disappear ===== */

/* スイッチ機能の立ち絵は hover/focus で消さない */
.profile-visual--switch:hover img,
.profile-visual--switch:focus-within img{
  opacity: 1 !important;
}

/* スイッチ版は擬似要素のKVオーバーレイを使わない（JSでsrc差し替えのため） */
.profile-visual--switch::after{
  display: none !important;
}

/* SEO/Accessibility: visually hidden headings */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


/* NEWS article links */
.news-links{margin-top:20px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:10px;}
.news-link{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;background:#111;color:#fff;text-decoration:none;font-size:0.9rem;}
.news-link:hover{opacity:.85;}
@media (prefers-color-scheme: dark){.news-link{background:#fff;color:#111;}}


/* ===== Audition LP ===== */
.lp-hero{
  position:relative;
  overflow:hidden;
  padding:140px 0 100px;
  background:linear-gradient(135deg,#6d59dd 0%, #f08aa3 100%);
  color:#fff;
}
.lp-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.22;
  mix-blend-mode:screen;
}
.lp-hero-inner{position:relative;z-index:1;text-align:center;}
.lp-kicker{
  display:inline-block;
  margin-bottom:14px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(8px);
  letter-spacing:.12em;
  font-size:.8rem;
}
.lp-hero h1{
  margin:0;
  font-size:clamp(2.3rem,5vw,4.6rem);
  line-height:1.15;
  letter-spacing:.04em;
}
.lp-lead{
  max-width:820px;
  margin:22px auto 0;
  line-height:2;
  font-size:1.04rem;
}
.lp-cta{justify-content:center;margin-top:28px;}
.lp-points{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:24px 0 0;
}
.lp-points li{
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.2);
}
.lp-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.lp-stat{text-align:center;}
.lp-stat strong{
  display:block;
  margin-top:8px;
  font-size:1.7rem;
}
.lp-stat span{
  display:block;
  margin-top:8px;
  color:var(--muted);
}
.lp-section{padding:96px 0;}
.lp-section--soft-blue{background:linear-gradient(180deg, rgba(104,198,219,.10), rgba(255,255,255,0) 100%);}
.lp-section--soft-pink{background:linear-gradient(180deg, rgba(240,127,151,.10), rgba(255,255,255,0) 100%);}
.lp-section--soft-purple{background:linear-gradient(180deg, rgba(125,106,214,.10), rgba(255,255,255,0) 100%);}
.lp-section--white{background:transparent;}
.lp-two-col{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:40px;
  align-items:center;
}
.lp-two-col--reverse{
  grid-template-columns:.95fr 1.05fr;
}
.lp-two-col--reverse .lp-media{order:1;}
.lp-two-col--reverse .lp-copy{order:2;}
.lp-copy h2{
  margin:8px 0 16px;
  font-size:clamp(1.8rem,3vw,2.6rem);
}
.lp-copy p{line-height:1.95;}
.lp-media img{
  width:100%;
  border-radius:26px;
  box-shadow:0 20px 50px rgba(0,0,0,.12);
}
.lp-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:22px;
}
.lp-feature-grid .card h3{margin-top:0;}
.lp-chip-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}
.lp-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
}
.lp-steps{margin-top:18px;}
.lp-schedule{
  max-width:760px;
  margin:26px auto 0;
}
.lp-faq details{
  padding:16px 18px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
}
.lp-faq details + details{margin-top:12px;}
.lp-faq summary{
  cursor:pointer;
  font-weight:700;
}
.lp-faq p{margin:12px 0 0;}
.lp-final-cta{padding:90px 0 120px;}
.lp-final-card{
  text-align:center;
  background:linear-gradient(135deg, rgba(104,198,219,.14), rgba(240,127,151,.14));
}
@media (max-width: 980px){
  .lp-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lp-two-col,
  .lp-two-col--reverse{grid-template-columns:1fr;}
  .lp-two-col--reverse .lp-media,
  .lp-two-col--reverse .lp-copy{order:initial;}
  .lp-feature-grid{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  .lp-hero{padding:120px 0 80px;}
  .lp-stat-grid{grid-template-columns:1fr;}
  .lp-section{padding:74px 0;}
}


/* ===== Audition Pro LP ===== */
.aud-pro-hero{
  position:relative;
  overflow:hidden;
  padding:146px 0 108px;
  color:#fff;
}
.aud-pro-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity: 1.00;

}
.aud-pro-hero-inner{
  position:relative;
  z-index:1;
  text-align:center;
}
.aud-pro-kicker{
  display:inline-block;
  margin-bottom:14px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  letter-spacing:.12em;
  font-size:.8rem;
}
.aud-pro-hero h1{
  margin:0;
  font-size:clamp(2.5rem,5vw,4.8rem);
  line-height:1.14;
  letter-spacing:.03em;
}
.aud-pro-lead{
  max-width:860px;
  margin:24px auto 0;
  line-height:2;
  font-size:1.05rem;
}
.aud-pro-cta{justify-content:center;margin-top:28px;}
.aud-pro-mini{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}
.aud-pro-mini span{
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
}
.aud-pro-strip{
  padding-top:34px;
  padding-bottom:40px;
}
.aud-pro-strip-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.aud-pro-stat{text-align:center;}
.aud-pro-stat strong{
  display:block;
  margin-top:8px;
  font-size:1.7rem;
}
.aud-pro-stat p{
  margin:10px 0 0;
  color:var(--muted);
  line-height:1.8;
}
.aud-pro-section{padding:98px 0;}
.aud-pro-section--blue{background:linear-gradient(180deg, rgba(104,198,219,.10), rgba(255,255,255,0) 100%);}
.aud-pro-section--pink{background:linear-gradient(180deg, rgba(240,127,151,.10), rgba(255,255,255,0) 100%);}
.aud-pro-section--purple{background:linear-gradient(180deg, rgba(125,106,214,.10), rgba(255,255,255,0) 100%);}
.aud-pro-section--white{background:transparent;}
.aud-pro-two-col{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:40px;
  align-items:center;
}
.aud-pro-two-col--reverse{
  grid-template-columns:.92fr 1.08fr;
}
.aud-pro-two-col--reverse .aud-pro-media{order:1;}
.aud-pro-two-col--reverse .aud-pro-copy{order:2;}
.aud-pro-copy h2{
  margin:8px 0 16px;
  font-size:clamp(1.9rem,3vw,2.7rem);
}
.aud-pro-copy p{line-height:1.95;}
.aud-pro-sidecard,
.aud-pro-media img{
  width:100%;
}
.aud-pro-media img{display:block;}
.aud-pro-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:22px;
}
.aud-pro-feature-grid .card h3{margin-top:0;}
.aud-pro-chip-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}
.aud-pro-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
}
.aud-pro-steps{
  margin-top:18px;
  text-align:center; 
}
.aud-pro-schedule{
  max-width:760px;
  margin:26px auto 0;
}
.aud-pro-faq details{
  padding:16px 18px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
}
.aud-pro-faq details + details{margin-top:12px;}
.aud-pro-faq summary{
  cursor:pointer;
  font-weight:700;
}
.aud-pro-faq p{margin:12px 0 0;}
.aud-pro-final{
  padding:92px 0 120px;
}
.aud-pro-final-card{
  text-align:center;
  background:linear-gradient(135deg, rgba(104,198,219,.14), rgba(240,127,151,.14));
}
@media (max-width: 980px){
  .aud-pro-strip-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .aud-pro-two-col,
  .aud-pro-two-col--reverse{grid-template-columns:1fr;}
  .aud-pro-two-col--reverse .aud-pro-media,
  .aud-pro-two-col--reverse .aud-pro-copy{order:initial;}
  .aud-pro-feature-grid{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  .aud-pro-hero{padding:126px 0 84px;}
  .aud-pro-strip-grid{grid-template-columns:1fr;}
  .aud-pro-section{padding:76px 0;}
}

.center{
  text-align:center; 
}

.cp-gradient{
background: linear-gradient(90deg,#6fc7e9,#f6a4c7);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-weight:700;
}

.audition-flow-simple{
padding:80px 0;
}

.flow-grid{
display:flex;
align-items:center;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.flow-item{
text-align:center;
font-weight:600;
}

.flow-item img{
width:180px;
margin-bottom:10px;
}

.flow-arrow{
font-size:40px;
font-weight:700;
opacity:.6;
}

@media(max-width:768px){
.flow-grid{
flex-direction:column;
}
.flow-arrow{
transform:rotate(90deg);
}
}