/* ===== 聖域ちゃん official website / タイプA（空間型）基本CSS ===== */
:root {
  /* 案A ライト基調（仮案：立ち絵と見比べて調整） */
  --base: #F6F7FB;        /* 背景（白〜薄グレー） */
  --grid: #E3E6F0;        /* 方眼グリッド線 */
  --main: #4B5CA8;          /* メイン（原作のピンク相当） */
  --main-soft: #AEB8E6;   /* メインの淡色（影・反射） */
  --ink: #14172B;         /* 文字・ボタン・タグ */
  --accent: #8FE3F0;      /* ネオンシアン（装飾専用・文字には使わない） */
  --spot: #FFE94A;        /* ネオンイエロー（⚡用） */
  --white: #FFFFFF;
  --main-deep: #38468C;
  --font-en: "Jost", "Noto Sans JP", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
  --header-h: 72px;
}
* { box-sizing: border-box; margin: 0; }
html { height: 100%; }
body { font-family: var(--font-jp); color: var(--ink); background: var(--base); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--main); outline-offset: 3px; }

/* ---- ヘッダー ---- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 32px 0; display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.82); backdrop-filter: blur(6px); }
.logo { font-family: var(--font-en); font-weight: 600; line-height: 1.1; }
.logo small { display: block; font-size: 11px; font-weight: 500; }
.nav ul { list-style: none; padding: 0; display: flex; gap: 40px; }
.nav a { font-family: var(--font-en); font-weight: 500; letter-spacing: .04em; color: var(--main); padding: 4px 0; }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.nav-toggle, .hamburger { display: none; }

/* ---- ヒーロー（空間） ---- */
.hero { position: relative; min-height: 100svh; overflow: hidden;
  background-color: var(--base);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 36px 36px; }
.floor { position: absolute; inset: auto 0 0 0; height: 30%;
  background: linear-gradient(to bottom, rgba(75,92,168,.12), rgba(227,230,240,.9)); }
.stage { position: absolute; inset: var(--header-h) 0 0 0; display: grid; place-items: end center; }
.stand { position: relative; z-index: 3; height: min(78svh, 900px); width: auto; max-width: 90vw; object-fit: contain; }
.reflect { position: absolute; z-index: 1; bottom: -45%; height: min(78svh, 900px); transform: scaleY(-1); opacity: .22;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 55%); mask-image: linear-gradient(to bottom, #000 0, transparent 55%); }

/* 波形の翼（左右対称） */
.wing { position: absolute; z-index: 2; bottom: 18%; width: min(24vw, 380px); fill: var(--main); opacity: .92; }
.wing--l { left: calc(50% - min(40vw, 560px)); }
.wing--r { right: calc(50% - min(40vw, 560px)); transform: scaleX(-1); }

/* 浮遊オブジェクト */
.fx { position: absolute; z-index: 2; animation: float 7s ease-in-out infinite; }
.fx--bolt1 { top: 18%; left: 10%; width: 90px; fill: var(--spot); stroke: var(--ink); stroke-width: 2; }
.fx--plug  { top: 24%; right: 14%; width: 110px; fill: var(--main); animation-delay: -2s; }
.fx--wave  { top: 14%; left: 34%; width: 150px; fill: none; stroke: var(--accent); stroke-width: 3; opacity: .85; stroke-linejoin: round; animation-delay: -4s; }
.fx--bolt2 { bottom: 30%; right: 8%; width: 60px; fill: var(--accent); animation-delay: -1s; }
.fx--kuro { top: 42%; left: 7%; width: 130px; height: auto; animation-delay: -3s; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-18px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .fx { animation: none; } }

/* SNSアイコン（右端・縦並び） */
.sns { position: fixed; z-index: 40; right: 20px; top: 28%; display: grid; gap: 14px; list-style: none; padding: 0; }
.sns a { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: var(--main); color: var(--white); font: 600 20px var(--font-en); }

/* NEW TOPICS（左下） */
.topics { position: fixed; z-index: 40; left: 0; bottom: 0; width: min(560px, 92vw); background: var(--main); color: var(--white);
  clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); padding: 24px 56px 24px 32px; }
.topics summary { cursor: pointer; list-style: none; font: 600 15px var(--font-en); background: var(--ink); display: inline-block; padding: 6px 14px; }
.topics summary::-webkit-details-marker { display: none; }
.topics ul { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 8px; font-size: 15px; }
.topics time { font-family: var(--font-en); margin-right: 16px; }

/* バナー（右下）・フッター */
.banners { position: fixed; z-index: 40; right: 20px; bottom: 44px; display: flex; gap: 12px; }
.banner { display: grid; place-items: center; width: 280px; height: 80px; background: var(--ink); color: var(--white); font: 600 18px var(--font-en); }
.copyright { position: fixed; z-index: 40; right: 20px; bottom: 12px; font: 12px var(--font-en); }

/* ---- スマホ ---- */
@media (max-width: 767px) {
  :root { --header-h: 60px; }
  .site-header { padding-inline: 16px; }
  .hamburger { display: block; width: 44px; height: 44px; cursor: pointer; position: relative; z-index: 60; }
  .hamburger span, .hamburger::before, .hamburger::after { content: ""; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink); }
  .hamburger::before { top: 14px; } .hamburger span { top: 21px; } .hamburger::after { top: 28px; }
  .nav { position: fixed; inset: 0; background: rgba(255,255,255,.97); display: grid; place-items: center; transform: translateY(-100%); transition: transform .3s; }
  .nav ul { flex-direction: column; gap: 28px; text-align: center; font-size: 22px; }
  .nav-toggle:checked ~ .nav { transform: none; }
  .nav-toggle:focus-visible ~ .hamburger { outline: 3px solid var(--main); }
  .fx--kuro { top: 20%; left: 4%; width: 72px; }
  .wing { width: 34vw; bottom: 30%; opacity: .5; }
  .wing--l { left: -6vw; } .wing--r { right: -6vw; }
  .stand { height: 58svh; }
  .sns { position: fixed; right: auto; left: 16px; top: auto; bottom: calc(210px + env(safe-area-inset-bottom, 0px)); grid-auto-flow: column; }
  .sns a { width: 44px; height: 44px; }
  .topics { width: 100%; padding: 14px 20px; clip-path: none; bottom: env(safe-area-inset-bottom, 0px); }
  .banners { position: static; flex-direction: column; padding: 0 16px 24px; }
  .banner { width: 100%; }
  .copyright { display: none; }
}

/* ===== 下層ページ共通 ===== */
.page { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); min-height: 100svh; }
.strip { height: 220px; overflow: hidden; display: grid; justify-items: center; align-items: start;
  background-color: var(--base); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 36px 36px; }
.strip img { height: 560px; width: auto; margin-top: 16px; }
.section { position: relative; overflow: hidden; background-color: var(--main);
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(180deg, var(--main) 0%, var(--main-deep) 100%);
  background-size: 36px 36px, 36px 36px, auto; color: var(--white); padding: 56px 8vw 120px; }
.section--tall { min-height: calc(100svh - var(--header-h)); }
.page-title { font: 600 clamp(56px, 9vw, 112px)/1 var(--font-en); }
.page-title small { display: block; font: 500 clamp(18px, 2.4vw, 28px) var(--font-en); margin-top: 8px; }
.page-title--dark { color: var(--ink); text-align: right; position: relative; z-index: 2; }
.sub { font: 500 28px var(--font-en); margin-top: 24px; }
.tabs { display: flex; gap: 10px; margin: 24px 0 40px; overflow-x: auto; }
.tab, .pill { flex: none; font: 500 16px var(--font-en); padding: 10px 26px; background: var(--ink); color: var(--white); border: 0; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.pill { background: var(--white); color: var(--ink); cursor: default; }
.tab[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 32px; list-style: none; padding: 0; margin-top: 16px; }
.card { position: relative; background: var(--white); color: var(--ink); padding-bottom: 64px; }
.card[hidden] { display: none; }
.thumb { aspect-ratio: 16 / 9; display: grid; place-items: center; color: #7A8AA8; font: 14px var(--font-jp);
  background: repeating-linear-gradient(45deg, #E6ECF7, #E6ECF7 12px, var(--base) 12px, var(--base) 24px); }
.meta { position: relative; height: 0; }
.date { position: absolute; top: -14px; left: -12px; background: var(--white); color: var(--main); font: 600 15px var(--font-en); padding: 4px 22px 4px 14px; box-shadow: 0 2px 0 var(--grid);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.card h2 { font: 500 16px/1.7 var(--font-jp); padding: 28px 20px 0; }
.tag { position: absolute; right: 16px; bottom: 16px; background: var(--ink); color: var(--white); font: 500 14px var(--font-en); padding: 6px 16px; }
.cards--dl { grid-template-columns: repeat(3, 1fr); }

.space { position: relative; overflow: hidden; padding-inline: 8vw; padding-bottom: 120px;
  background-color: var(--base); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 36px 36px; }
.profile { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-top: 24px; }
.profile-img { height: min(68svh, 720px); width: auto; max-width: 100%; justify-self: center; }
.panel { background: rgba(255,255,255,.9); padding: 32px; line-height: 2; position: relative; z-index: 2; }
.panel--wide { max-width: 760px; margin: 40px auto 0; }
.panel p + p { margin-top: 1.2em; }
.panel h2 { font: 500 18px var(--font-jp); margin-top: 28px; }
.panel h3 { font: 500 16px var(--font-jp); margin-top: 16px; }
.thumbs { display: flex; gap: 16px; margin-top: 24px; }
.thumbs div { width: 112px; aspect-ratio: 1 / 1; background: var(--white); border: 1px solid var(--grid); display: grid; place-items: center; text-align: center; font-size: 12px; }

.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; z-index: 2; }
.mosaic .big { grid-column: span 2; grid-row: span 2; }
.more { display: inline-block; position: relative; z-index: 2; margin-top: 32px; padding: 14px 56px; background: var(--ink); color: var(--white); border: 2px solid var(--white); font: 500 18px var(--font-en); }
.sns-inline { display: flex; gap: 14px; margin-top: 40px; position: relative; z-index: 2; }
.sns-inline a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: var(--white); color: var(--main); font: 600 18px var(--font-en); }

.corner { position: absolute; left: 0; bottom: 0; width: min(42vw, 560px); aspect-ratio: 1; pointer-events: none; }
.corner--r { left: auto; right: 0; }
.section--sns { padding-bottom: min(42vw, 560px); }
.thumbs div { overflow: hidden; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.corner::before { content: ""; position: absolute; inset: 0; background: var(--white); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.corner--r::before { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.corner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left bottom; }
.corner--r img { object-position: right bottom; }

.form { position: relative; z-index: 2; display: grid; gap: 20px; max-width: 820px; margin-left: auto; }
.row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: start; }
.req::after { content: "★"; color: var(--accent); margin-left: 6px; }
.radios { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.form input[type="text"], .form input[type="email"], .form textarea { width: 100%; padding: 12px; border: 0; font: inherit; color: var(--ink); background: var(--white); }
.hp { position: absolute; left: -9999px; }
.note { font-size: 14px; line-height: 1.9; }
.send { justify-self: center; background: var(--ink); color: var(--white); border: 0; padding: 18px 72px; font: 600 18px var(--font-en); cursor: pointer; }

@media (max-width: 767px) {
  .strip { height: 160px; } .strip img { height: 420px; }
  .section { padding: 40px 6vw 96px; }
  .cards, .cards--dl { grid-template-columns: 1fr; }
  .cards--dl { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .profile { grid-template-columns: 1fr; }
  .page-title--dark { text-align: left; }
  .mosaic { grid-template-columns: 1fr 1fr; }
  .row { grid-template-columns: 1fr; gap: 8px; }
  .form { margin-left: 0; }
  .corner { width: 46vw; }
  .section--sns { padding-bottom: 46vw; }
}

/* ===== バナー画像・記事ページ ===== */
.banner--img { width: auto; height: auto; background: none; display: block; }
.banner--img img { display: block; width: 280px; height: auto; }
.card > a { display: block; color: inherit; }
.section--article { padding-top: 56px; }
.article { position: relative; max-width: 880px; margin: 0 auto; background: var(--white); color: var(--ink); padding: 64px 48px 96px; }
.article-title { font: 500 28px/1.5 var(--font-jp); }
.article-img { margin-top: 32px; max-width: 520px; }
.article-body { margin-top: 40px; line-height: 2; }
.article-body p + p { margin-top: 1.2em; }
.article-body a { color: var(--main); text-decoration: underline; }
.tag-row { position: absolute; right: 24px; bottom: 24px; display: flex; gap: 8px; }
.tag-row .tag { position: static; }
.back { display: block; width: fit-content; margin: 48px auto 0; color: var(--white); font: 500 18px var(--font-en); border-bottom: 2px solid var(--white); padding-bottom: 6px; }
.foot { text-align: center; color: var(--white); padding: 56px 0 24px; }
.foot .sns-inline { justify-content: center; }
.foot small { display: block; margin-top: 40px; font: 14px var(--font-en); }
.totop { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 76px; height: 70px; display: grid; align-items: end; justify-items: center; padding-bottom: 8px;
  background: var(--ink); color: var(--white); font: 600 16px var(--font-en); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@media (max-width: 767px) {
  .banner--img img { width: 100%; }
  .article { padding: 56px 20px 88px; }
}

/* ===== 記事画像・サムネ ===== */
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-img-pic { display: block; margin-top: 32px; max-width: 100%; height: auto; }

/* ===== 質感アップデート（グラデーション・2色ラベル・ピル型ボタン） ===== */
:root { --violet: #9A86E6; --aqua: #7CCBE0; --magenta: #D65FD1; --navy: #2C3787;
  --main: #7B6BDB; --main-deep: #5A6CCB; --accent: #8FE3F0; }
.site-header { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--violet), var(--aqua)) 1; }
.nav a[aria-current="page"] { color: var(--ink); }
.section { background: linear-gradient(100deg, var(--violet) 0%, #A9B4EE 48%, var(--aqua) 100%); }
.date { display: inline-flex; background: none; box-shadow: none; clip-path: none; padding: 0; top: -16px; left: -14px; font: 600 15px var(--font-en); }
.date b { background: var(--ink); color: var(--white); font-weight: 600; padding: 5px 16px 5px 14px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.date i { font-style: normal; background: var(--magenta); color: var(--white); padding: 5px 20px 5px 18px; margin-left: -9px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.card, .article, .panel { box-shadow: 0 12px 32px rgba(20,23,43,.14); }
.more, .send { border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--magenta), var(--navy)); color: var(--white); }
.more { padding: 14px 56px; }
.topics { background: linear-gradient(100deg, var(--violet), #8FA6EA); }
.hero::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(40% 50% at 50% 58%, rgba(154,134,230,.30), transparent 70%), radial-gradient(30% 40% at 18% 32%, rgba(124,203,224,.28), transparent 70%), radial-gradient(28% 40% at 84% 36%, rgba(214,95,209,.16), transparent 70%); }

/* ===== 水色→ピンクのグラデーション・PROFILE再構成・DOWNLOAD詳細 ===== */
:root { --pink: #E88BC8; }
.section { background: linear-gradient(100deg, var(--aqua) 0%, #B4AEEC 50%, var(--pink) 100%); }
.site-header { border-image: linear-gradient(90deg, var(--aqua), var(--pink)) 1; }
.topics { background: linear-gradient(100deg, #6FB9D6, #D97FBF); }
.coming { position: relative; z-index: 2; margin-top: 24px; color: var(--white); font: 500 20px/2.1 var(--font-jp); }
.coming p + p { margin-top: 1.2em; }
.space--profile::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(38% 45% at 22% 55%, rgba(124,203,224,.38), transparent 70%), radial-gradient(34% 45% at 78% 40%, rgba(232,139,200,.30), transparent 70%); }
.floor3d { position: absolute; left: -30%; right: -30%; bottom: 0; height: 44%; z-index: 0;
  background-image: linear-gradient(rgba(111,193,220,.45) 1px, transparent 1px), linear-gradient(90deg, rgba(232,139,200,.40) 1px, transparent 1px);
  background-size: 72px 72px; transform: perspective(420px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent); mask-image: linear-gradient(to top, #000 35%, transparent); }
.profile-stage { display: grid; justify-items: start; gap: 24px; position: relative; }
.profile-char { position: relative; z-index: 2; justify-self: center; }
.profile-reflect { position: absolute; left: 0; top: 100%; width: 100%; height: auto; transform: scaleY(-1); opacity: .2;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 55%); mask-image: linear-gradient(to bottom, #000, transparent 55%); }
.profile-stage .thumbs { position: relative; z-index: 3; margin-top: 0; }
.panel--glass { background: rgba(255,255,255,.66); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.85); }
.cards--dl .card { padding-bottom: 28px; }
.section--article .page-title { margin-bottom: 32px; }
.dl-box { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--grid); }
.dl-box h3 { font: 500 18px var(--font-jp); }
.dl-box a:not(.dl-btn) { color: var(--main); text-decoration: underline; }
.agree-dl { display: block; margin: 16px 0 24px; }
.dl-btn { display: inline-block; padding: 16px 56px; border-radius: 999px; background: linear-gradient(90deg, var(--magenta), var(--navy)); color: var(--white); font: 600 18px var(--font-en); }
.dl-btn.is-disabled { background: #DADDE6; pointer-events: none; }
.contact-btn { display: block; width: fit-content; margin: 24px auto 0; padding: 14px 40px; border-radius: 999px; background: var(--ink); color: var(--white); font: 500 16px var(--font-en); }
@media (max-width: 767px) { .floor3d { height: 32%; } .profile-stage { justify-items: center; } }

/* ===== PROFILE：余白の解消・立ち絵拡大 ===== */
.space--profile .profile { grid-template-columns: 1fr 1fr; grid-template-areas: "stage title" "stage panel"; grid-template-rows: auto 1fr; align-items: start; column-gap: 40px; margin-top: 0; }
.space--profile .profile > .page-title { grid-area: title; margin: 0 0 16px; }
.space--profile .profile-stage { grid-area: stage; }
.space--profile .panel--glass { grid-area: panel; margin-top: 0; }
.space--profile .profile-img { height: min(86svh, 920px); }
@media (max-width: 767px) {
  .space--profile .profile { grid-template-columns: 1fr; grid-template-areas: "title" "stage" "panel"; }
  .space--profile .profile-img { height: 62svh; }
}

/* ===== PROFILE：1画面に収まる配置（キズナアイ参考） ===== */
.space--profile { padding-bottom: 32px; }
.space--profile .profile { margin-top: 8px; column-gap: 32px; }
.space--profile .profile > .page-title { font-size: clamp(56px, 7vw, 96px); margin-bottom: 12px; }
.space--profile .profile > .page-title small { font-size: clamp(16px, 1.8vw, 22px); margin-top: 4px; }
.space--profile .profile-stage { gap: 16px; }
.space--profile .profile-img { height: clamp(300px, calc(100svh - 250px), 780px); }
.space--profile .thumbs div { width: 84px; }
.space--profile .panel--glass { padding: 24px 28px; font-size: 15px; line-height: 1.95; }
@media (max-width: 767px) { .space--profile .profile-img { height: 56svh; } }

/* ===== PROFILE：バランス調整（立ち絵を大きく・サムネを足元へ・本文を中央寄せ） ===== */
.space--profile .profile { min-height: calc(100svh - 120px); grid-template-rows: auto 1fr; }
.space--profile .profile-stage { display: flex; flex-direction: column; align-items: stretch; gap: 12px; height: calc(100svh - 120px); min-height: 420px; max-height: 880px; }
.space--profile .profile-char { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; justify-content: center; align-items: flex-end; justify-self: stretch; }
.space--profile .profile-img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: center bottom; }
.space--profile .profile-reflect { height: 100%; width: auto; left: 50%; transform: translateX(-50%) scaleY(-1); }
.space--profile .profile-stage .thumbs { align-self: flex-start; flex: none; }
.space--profile .panel--glass { align-self: center; }
@media (max-width: 767px) {
  .space--profile .profile-stage { height: auto; max-height: none; }
  .space--profile .profile-char { flex: none; }
  .space--profile .profile-img { height: 56svh; }
}
/* ===== CONTACT：送信状態の表示 ===== */
.form-status { min-height: 1.8em; text-align: center; color: var(--white); font-weight: 500; }
.send:disabled { opacity: .6; cursor: wait; }

/* ===== PROFILE：立ち絵を下へ・サムネを本文の下へ ===== */
.space--profile .profile { grid-template-areas: none; grid-template-rows: none; grid-template-columns: 1fr 1fr; align-items: stretch; column-gap: 32px; min-height: 0; }
.space--profile .profile-stage { grid-area: auto; }
.space--profile .profile-side { display: flex; flex-direction: column; height: calc(100svh - 120px); min-height: 420px; max-height: 880px; }
.space--profile .profile-side > .page-title { font-size: clamp(56px, 7vw, 96px); margin: 0 0 16px; }
.space--profile .profile-side > .page-title small { font-size: clamp(16px, 1.8vw, 22px); margin-top: 4px; }
.space--profile .profile-side > .panel--glass { grid-area: auto; align-self: stretch; margin-top: auto; }
.space--profile .profile-side > .thumbs { margin-top: 16px; flex: none; }
.space--profile .thumbs div { width: 132px; }
@media (max-width: 767px) {
  .space--profile .profile { grid-template-columns: 1fr; grid-template-areas: "title" "stage" "panel" "thumbs"; }
  .space--profile .profile-side { display: contents; }
  .space--profile .profile-side > .page-title { grid-area: title; }
  .space--profile .profile-stage { grid-area: stage; }
  .space--profile .profile-side > .panel--glass { grid-area: panel; margin-top: 0; }
  .space--profile .profile-side > .thumbs { grid-area: thumbs; }
}
/* ===== SNSリンク（TOPは右上・他ページは下部） ===== */
.sns a { background: linear-gradient(135deg, var(--aqua), var(--pink)); box-shadow: 0 8px 20px rgba(20,23,43,.18); width: 52px; height: 52px; border-radius: 14px; color: var(--white); }
.sns svg, .sns-inline svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.site-foot { text-align: center; color: var(--white); padding: 44px 16px 32px; background: linear-gradient(100deg, var(--aqua) 0%, #B4AEEC 50%, var(--pink) 100%); }
.site-foot .sns-inline { justify-content: center; margin: 0; }
.site-foot small { display: block; margin-top: 28px; font: 14px var(--font-en); }

/* ===== サムネ：縦長画像でも16:9で切り抜く（NEWS一覧の余白の解消） ===== */
.thumb { position: relative; overflow: hidden; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== スマホ用メニューの修正（ヘッダーのぼかし効果が、fixedのメニューを閉じ込めていたため） ===== */
@media (max-width: 767px) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.96); }
  .nav { height: 100vh; height: 100dvh; visibility: hidden; transition: transform .3s, visibility 0s .3s; }
  .nav-toggle:checked ~ .nav { visibility: visible; transition: transform .3s; }
}

/* ===== スマホUI調整（TOP・PROFILE・SNS・CONTACT・TOPボタン） ===== */
@media (max-width: 767px) {
  /* 右下の三角「TOP」ボタンはスマホでは非表示 */
  .totop { display: none; }

  /* --- TOP：縦に積むレイアウト（立ち絵 → NEW TOPICS → バナー） --- */
  .hero { display: flex; flex-direction: column; padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
  .stage { position: relative; inset: auto; z-index: 45; flex: 1 0 auto; display: grid; place-items: end center; pointer-events: none; margin-bottom: -16px; }
  .stand { width: 104vw; height: auto; max-width: none; margin-bottom: calc(104vw * -0.19); }
  .reflect { display: none; }
  .fx--kuro { top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 2svh); right: 4vw; left: auto; width: 68px; z-index: 46; }
  .fx--wave { top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 6svh); left: 6%; width: 110px; }
  .sns { position: fixed; z-index: 48; left: 12px; right: auto; bottom: auto; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 12px); }
  .sns a { width: 44px; height: 44px; }
  .topics { flex: none; position: relative; z-index: 40; left: auto; bottom: auto; width: 100%; padding: 12px 16px 14px; clip-path: none; }
  .topics::details-content { display: contents; }
  .topics ul { margin-top: 10px; gap: 6px; font-size: 13px; }
  .topics time { margin-right: 10px; }
  .banners { flex: none; position: relative; z-index: 50; right: auto; bottom: auto; flex-direction: row; gap: 10px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .banners > * { flex: 1 1 0; min-width: 0; }
  .banners .banner--img img { width: 100%; height: auto; }

  /* --- PROFILE：立ち絵を画面に合わせて大きく（透明な余白を詰める） --- */
  .space--profile { --pw: 90vw; }
  .space--profile .profile { grid-template-columns: minmax(0, 1fr); }
  .space--profile .profile-stage, .space--profile .profile-char { min-width: 0; }
  .space--profile .profile-stage { min-height: 0; }
  .space--profile .profile-char { justify-content: center; }
  .space--profile .profile-img { flex: none; width: var(--pw); max-width: none; height: auto; min-height: 0; margin-top: calc(var(--pw) * -0.16); margin-bottom: calc(var(--pw) * -0.26); position: relative; left: 50%; transform: translateX(-50%); }
  .space--profile .profile-reflect { display: none; }

  /* --- SNS・CONTACT：右下／左下の聖域ちゃんを一回り大きく --- */
  .corner { width: 58vw; }
  .section--sns { padding-bottom: 58vw; }
  .section--tall:has(> .corner) { padding-bottom: 60vw; }
}

/* ===== DOWNLOAD一覧：タグ（Download）がタイトルに重なるのを解消 ===== */
.cards--dl .card { padding-bottom: 64px; }
@media (max-width: 767px) {
  .cards--dl { grid-template-columns: 1fr; }
}