/* =============================================================
   dorodoro — circle portal
   路線: ビビッドピンク×黒×白のモードポップ。
   白地+黒のタイポ/細罫が主役、ピンクは純度100%のまま面積を絞って差す。
   パステルワッシュ・波区切り・微傾き・ドット散らしは使わない。
   ブランドモチーフは「oo」(ロゴの中抜き○と塗り●)に一本化。
   ※Webオンリーサイト(キスエゴ: 極太枠+ハードオフセット影+番号キッカー)と
     表現がかぶらないよう、枠は1pxヘアライン・影はピンクの拡散光影・
     見出しは番号なし+ooで構成する。ずらし影(◯px ◯px 0)は使用禁止。
   ============================================================= */

/* ---------- トークン ---------- */
:root {
  --white:     #ffffff;
  --paper:     #f7f5f6;
  --ink:       #171417;
  --ink-dim:   #7d747a;
  --pink:      #ef5a97;
  --pink-deep: #d13d7d;
  --pink-soft: #ffe9f2;   /* ホバー等のごく小面積のみ */
  --line:      rgba(23, 20, 23, .14);

  --font-en: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;

  --frame: 1px solid var(--ink);                        /* ヘアライン枠 */
  /* 影は使わない(フラット)。立体感はホバーの浮き+ピンク罫で出す。
     ぼやけた拡散影・オフセット影(キスエゴとかぶる)ともに禁止 */

  --bounce: cubic-bezier(.34, 1.56, .64, 1);    /* ぽよん */
  --ease-out: cubic-bezier(.3, 0, .2, 1);

  --section-pad: clamp(72px, 10vw, 128px);
  --gutter: clamp(20px, 5vw, 48px);
  --content-w: 1120px;
}

/* ---------- ベース ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--pink) var(--paper);
}

body {
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 2;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--pink-deep); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
a:hover { color: var(--ink); }
ul { list-style: none; }
::selection { background: var(--pink); color: #fff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.wrap { max-width: var(--content-w); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); position: relative; }
.section--paper { background-color: var(--paper); }
/* エディトリアルの黒細罫でセクションを区切る(波区切りの後継) */
main .section + .section { border-top: 1px solid var(--ink); }

/* ---------- ローダー(毎回表示・JSが制御) ----------
   ピンク全面の中央に白い丸バッジ、その中に dorodoro を一筆書き(墨+ピンクのo)。
   退場は「バッジが一点に収縮 → 同じ中心から丸い穴が開いて広がる」二段階の○ワイプ。 */
@property --hole {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--pink);
  --hole: 0%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--hole) - 1px), #000 var(--hole));
          mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--hole) - 1px), #000 var(--hole));
  /* バッジが収縮し切った直後(.5s)に、同じ中心から穴が広がる */
  transition: --hole .9s var(--ease-out) .5s;
}
.loader.is-done { --hole: 160vmax; pointer-events: none; }

/* 中央の白い丸バッジ */
.loader-inner {
  position: relative;
  width: clamp(210px, 52vw, 290px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  /* 退場: 一点へきゅっと収縮して消える(加速カーブ) */
  transition: scale .5s cubic-bezier(.55, 0, .85, .45), opacity .12s ease .4s;
}
.loader.is-done .loader-inner { opacity: 0; scale: 0; }
/* うっすら二重の外周リング(静止) */
.loader-inner::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .55);
}
/* くるくる回る白の光弧(ローディング表現) */
.loader-inner::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #fff, rgba(255, 255, 255, 0) 120deg, rgba(255, 255, 255, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  animation: ring-spin 1.25s linear infinite;
}
@keyframes ring-spin { to { rotate: 1turn; } }

/* dorodoro の一筆書き(円の中の水平帯に収まる幅) */
.loader-word-svg {
  width: clamp(172px, 44vw, 240px);
  height: auto;
  overflow: visible;
}
.loader-word-svg .s {
  fill: none;
  stroke: var(--ink);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: letter-draw .3s ease forwards;
  animation-delay: var(--d, 0s);
}
.loader-word-svg .s--o { stroke: var(--pink); }
@keyframes letter-draw { to { stroke-dashoffset: 0; } }
.loader--skip { display: none; }

/* ---------- 見出し(左揃え・通し番号+大型タイポ+oo) ---------- */
.sec-head {
  display: flex;
  align-items: baseline;
  column-gap: 20px;
  row-gap: 6px;
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.sec-head .en {
  position: relative;
  z-index: 0;
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(44px, 8vw, 76px);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: var(--ink);
}
/* ビビッドピンクのマーカー下線(文字の足元に敷く=フラットなピンクの面) */
.sec-head .en::after {
  content: "";
  position: absolute;
  left: -.08em;
  right: -.12em;
  bottom: -.02em;
  height: .24em;
  z-index: -1;
  border-radius: 3px;
  background: var(--pink);
  transform-origin: left center;
}
/* 出現時: マーカーを左からすっと引く */
.sec-head.reveal .en::after { scale: 0 1; transition: scale .6s var(--ease-out) .25s; }
.sec-head.reveal.is-in .en::after { scale: 1 1; }
.no-js .sec-head .en::after { scale: 1 1; }
@keyframes dot-pop { from { scale: 0; } to { scale: 1; } }
.sec-head .jp {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .22em;
  color: var(--ink-dim);
}
/* 見出し装飾「oo」= ロゴの dorodoro と同じ、中抜き○＋塗り●。
   出現時: ●が左から転がって線を引く→線が消える→○がぽん */
.oo {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 12px;
  flex: 0 0 auto;
  align-self: center;
}
.oo::before { /* ●が引いていく線(最後は消える) */
  content: "";
  position: absolute;
  left: -50px;
  top: 4.5px;
  width: 68px;
  height: 3px;
  border-radius: 3px;
  background: var(--pink);
  transform-origin: left center;
  opacity: 0;
}
.oo i { /* 塗り●(右) */
  position: absolute;
  right: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pink);
}
.oo::after { /* 中抜き○(左) */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
}
.reveal.is-in .oo::before { animation: oo-line 1s ease both; }
.reveal.is-in .oo i { animation: oo-roll .9s var(--bounce) both; }
.reveal.is-in .oo::after { animation: dot-pop .45s var(--bounce) .95s backwards; }
@keyframes oo-line {
  0%   { opacity: .35; scale: 0 1; }
  55%  { opacity: .35; scale: 1 1; }
  78%  { opacity: .35; }
  100% { opacity: 0; scale: 1 1; }
}
@keyframes oo-roll {
  0%   { translate: -58px 0; }
  70%  { translate: 2px 0; }
  84%  { translate: 0 0; scale: 1.18 .84; }
  100% { translate: 0 0; scale: 1; }
}

/* ---------- ボタン(黒ベース・ホバーでピンク+控えめぷるん) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 36px;
  border-radius: 999px;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--white);
  border: var(--frame);
  transition: background .22s, color .22s, border-color .22s;
}
.btn:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  animation: jelly .5s var(--bounce);
}
@keyframes jelly {
  0%   { scale: 1 1; }
  30%  { scale: 1.04 .96; }
  60%  { scale: .98 1.02; }
  100% { scale: 1 1; }
}
.btn--fill { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--fill:hover { background: var(--pink); border-color: var(--pink); }
/* 主導線用。ピンクは純度を落とさず面積を絞って置く */
.btn--pink { background: var(--pink); border-color: var(--pink); color: #fff; }
.btn--pink:hover { background: var(--ink); border-color: var(--ink); }

.pill {
  display: inline-block;
  border-radius: 999px;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .14em;
  padding: 2px 12px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: var(--white);
  white-space: nowrap;
}
.pill--fill { background: var(--pink); border-color: var(--ink); color: #fff; }
.pill--r18 { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* backdrop-filterは使わない(fixed配置の.global-navの包含ブロックになり
     モバイルメニューの高さが潰れるため) */
  background: rgba(255, 255, 255, .97);
  border-bottom: var(--frame);
}
.site-header .inner {
  max-width: var(--content-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}
.brand {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 25px;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
.brand .o2 { display: inline-block; color: var(--pink); }
.brand:hover { color: var(--ink); }
.brand:hover .o2 { animation: jelly .5s var(--bounce); }

/* ナビ: 各セクション見出しと同じ「英字+和文」の2段組み。
   ホバー/現在地では見出しと同じピンクのマーカーが英字の足元に引かれる。 */
.global-nav ul { display: flex; gap: 0; }
.global-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 13px 15px;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}
.global-nav .en {
  position: relative;
  z-index: 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: lowercase;
}
.global-nav .en::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -2px;
  height: 7px;
  z-index: -1;
  border-radius: 2px;
  background: var(--pink);
  transform-origin: left center;
  scale: 0 1;
  transition: scale .28s var(--ease-out);
}
.global-nav .jp {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink-dim);
  transition: color .2s;
}
.global-nav a:hover .en::after,
.global-nav a[aria-current="page"] .en::after { scale: 1 1; }
.global-nav a:hover .jp,
.global-nav a[aria-current="page"] .jp { color: var(--pink-deep); }

.nav-toggle {
  display: none;
  background: var(--white);
  border: var(--frame);
  color: var(--ink);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-indent: .16em;
  padding: 10px 18px;
  border-radius: 999px;
  min-height: 44px;
  cursor: pointer;
}

@media (max-width: 780px) {
  .nav-toggle { display: inline-block; }
  .global-nav {
    display: none;
    position: fixed;
    inset: 64px 0 0;
    background: var(--white);
    overflow-y: auto;
  }
  .global-nav.is-open { display: block; }
  .global-nav ul {
    flex-direction: column;
    gap: 2px;
    padding: 8vh var(--gutter);
    align-items: center;
  }
  .global-nav a { gap: 6px; padding: 15px 26px; opacity: 0; translate: 0 10px; }
  .global-nav .en { font-size: 21px; }
  .global-nav .en::after { height: 10px; bottom: -3px; }
  .global-nav .jp { font-size: 11px; letter-spacing: .2em; }
  .global-nav.is-open a { opacity: 1; translate: 0 0; transition: opacity .3s ease, translate .3s var(--bounce); }
  .global-nav.is-open li:nth-child(1) a { transition-delay: .04s; }
  .global-nav.is-open li:nth-child(2) a { transition-delay: .1s; }
  .global-nav.is-open li:nth-child(3) a { transition-delay: .16s; }
  .global-nav.is-open li:nth-child(4) a { transition-delay: .22s; }
  .global-nav.is-open li:nth-child(5) a { transition-delay: .28s; }
  .global-nav.is-open li:nth-child(6) a { transition-delay: .34s; }
}

/* ---------- HERO(最新作のKVを全面に) ----------
   最新作のキービジュアルをフルブリードで見せる。スライドは○ワイプ
   (ローダー退場・ロゴのoと同じ「まる」の文法)+Ken Burnsの微ズーム。
   スライドが2枚以上のときだけJSがカルーセルを動かす。 */
@property --hiris {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
.hero {
  position: relative;
  height: min(calc(100svh - 64px), 840px);
  min-height: 440px;
  overflow: hidden;
  background: var(--paper);
}
.hero .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  --hiris: 120vmax;
  -webkit-mask-image: radial-gradient(circle at 54% 42%, #000 calc(var(--hiris) - 1px), transparent var(--hiris));
          mask-image: radial-gradient(circle at 54% 42%, #000 calc(var(--hiris) - 1px), transparent var(--hiris));
  transition: opacity 0s linear 1.05s; /* 退場側: ○ワイプ(1s)完了後に消す */
}
.hero .slide.is-active {
  opacity: 1;
  z-index: 1;
  transition: none;
  animation: hero-iris 1s var(--ease-out) both;
}
@keyframes hero-iris { from { --hiris: 0%; } to { --hiris: 120vmax; } }
.hero .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
/* ゆっくりズーム(Ken Burns) */
.hero .slide.is-active img { animation: kv-zoom 9s ease-out forwards; }
@keyframes kv-zoom { from { scale: 1; } to { scale: 1.05; } }
/* 作品タグ(左下): 最新作ページへの導線 */
.hero-tag {
  position: absolute;
  left: max(var(--gutter), calc((100vw - var(--content-w)) / 2 + var(--gutter)));
  bottom: 26px;
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 26px;
  border-radius: 999px;
  border: var(--frame);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .25s, background .25s, color .25s;
}
.hero-tag .tag-label {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: lowercase;
  color: var(--pink-deep);
}
.hero-tag .tag-title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: lowercase;
}
.hero-tag:hover { border-color: var(--pink); background: var(--pink); color: #fff; }
.hero-tag:hover .tag-label { color: #fff; }
.hero .pager {
  position: absolute;
  left: 50%;
  bottom: 20px;
  translate: -50% 0;
  display: flex;
  gap: 10px;
  z-index: 3;
}
.hero .pager button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: rgba(255, 255, 255, .85);
  cursor: pointer;
  padding: 0;
  transition: background .2s, scale .25s var(--bounce);
}
.hero .pager button.is-active { background: var(--pink); scale: 1.3; }
.hero .pager button:hover { background: var(--pink); scale: 1.2; }
@media (max-width: 640px) {
  .hero-tag {
    left: var(--gutter);
    right: var(--gutter);
    justify-content: center;
    bottom: 20px;
  }
}

/* ---------- NEWS ----------
   ooタイムライン: 左のレール+日付ごとの丸。
   最新(先頭)だけピンク●・それ以前は黒○=ロゴのooと同じ対。 */
.news-list {
  position: relative;
  max-width: 640px;
  padding-left: 36px;
}
.news-list::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  border-left: 2px dotted rgba(23, 20, 23, .3);
}
.news-list li { position: relative; }
.news-list li + li { margin-top: 28px; }
.news-list li::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2.5px solid var(--ink);
}
.news-list li:first-child::before { background: var(--pink); border-color: var(--ink); }
/* 最新●のさざ波 */
.news-list li:first-child::after {
  content: "";
  position: absolute;
  left: -36px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--pink);
  opacity: 0;
  pointer-events: none;
}
.news-list.reveal.is-in li:first-child::after { animation: dot-ripple 1.5s ease-out .9s 2; }
@keyframes dot-ripple {
  from { opacity: .65; scale: 1; }
  to   { opacity: 0;   scale: 2.5; }
}
.news-list .row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.news-list time {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .08em;
  color: var(--pink-deep);
}
.news-list .txt { margin-top: 6px; font-size: 14px; line-height: 1.9; }
/* スタッガー入場 */
.news-list.reveal li { opacity: 0; translate: -14px 0; transition: opacity .5s ease, translate .5s var(--bounce); }
.news-list.reveal li::before { scale: 0; transition: scale .35s var(--bounce) .15s; }
.news-list.reveal.is-in li { opacity: 1; translate: 0 0; }
.news-list.reveal.is-in li::before { scale: 1; }
.news-list.reveal.is-in li:nth-child(2) { transition-delay: .12s; }
.news-list.reveal.is-in li:nth-child(2)::before { transition-delay: .27s; }
.news-list.reveal.is-in li:nth-child(3) { transition-delay: .24s; }
.news-list.reveal.is-in li:nth-child(3)::before { transition-delay: .39s; }
.no-js .news-list li { opacity: 1; translate: 0 0; }
.no-js .news-list li::before { scale: 1; }

/* newsのおまけ枠: 参加予定イベント。
   独立セクションにはせず、ニュース一覧の下に細罫で足す小さな棚。 */
.events {
  max-width: 640px;
  margin-top: clamp(36px, 5vw, 52px);
  padding-top: clamp(20px, 3vw, 26px);
  border-top: var(--frame);
}
.events-label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.events-label .en {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .01em;
  text-transform: lowercase;
  line-height: 1;
}
.events-label .jp {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--ink-dim);
}
.event-list li {
  display: flex;
  align-items: baseline;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding-block: 13px;
}
.event-list li + li { border-top: 1px dotted rgba(23, 20, 23, .25); }
.event-list time {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--pink-deep);
  white-space: nowrap;
}
.event-list time .range { opacity: .7; }
.event-list .body { flex: 1 1 240px; }
.event-list .name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--ink);
  text-decoration: none;
}
.event-list .name::after { content: " ↗"; font-size: .8em; }
.event-list .name:hover { color: var(--pink-deep); }
.event-list .place {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--ink-dim);
}
/* 狭い幅では日付/名前の折返し位置が件ごとに変わるので縦積みに固定 */
@media (max-width: 560px) {
  .event-list li { flex-direction: column; gap: 5px; }
  .event-list .body { flex: 1 1 auto; }
}

/* ---------- PRODUCTS(ゲーム/アプリなどの制作物カード) ----------
   種別は .meta の中のピル(GAME / APP / TOOL …)で示す。
   件数が増えても崩れないよう、カード幅を保ったまま折り返す。 */
/* ---------- linkページ ---------- */
.link-list { border-top: var(--frame); }
.link-list li { border-bottom: var(--frame); }
.link-list a {
  display: block;
  padding: clamp(18px, 2.6vw, 24px) 4px;
  text-decoration: none;
  color: var(--ink);
  transition: background .2s, padding-left .25s var(--bounce);
}
.link-list a:hover { background: var(--pink-soft); padding-left: 14px; }
.link-list .head {
  display: flex;
  align-items: baseline;
  gap: 6px 14px;
  flex-wrap: wrap;
}
.link-list .en {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(19px, 3vw, 25px);
  letter-spacing: .01em;
  text-transform: lowercase;
  line-height: 1;
}
.link-list .en::after { content: " ↗"; font-size: .55em; letter-spacing: 0; }
.link-list .handle {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--pink-deep);
}
.link-list .desc {
  display: block;
  margin-top: 8px;
  max-width: 44em;
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-dim);
}
.link-list a:hover .desc { color: var(--ink); }

/* ---------- contactページ ---------- */
/* 横3列だと1カラムが狭く文が折り返して読みづらいので、
   linkページと同じ細罫の縦積みに揃え、ボタンは行の右端に置く */
.contact-ways { border-top: var(--frame); }
.contact-way {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px clamp(24px, 4vw, 48px);
  padding: clamp(22px, 3vw, 30px) 4px;
  border-bottom: var(--frame);
}
.contact-way .prof-h { margin-bottom: 10px; }
.contact-way p {
  max-width: 40em;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-dim);
}
.contact-action { margin: 0; justify-self: end; }

@media (max-width: 700px) {
  .contact-way { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0; }
  .contact-action { margin-top: 16px; justify-self: start; }
}

/* ---------- 同人誌の紹介ページ ---------- */
.book-detail {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(26px, 5vw, 56px);
  padding-bottom: clamp(34px, 5vw, 52px);
  border-bottom: var(--frame);
}
.book-cover img {
  width: 100%;
  height: auto;
  border: var(--frame);
  border-radius: 8px;
}
.book-info h1 {
  font-weight: 700;
  font-size: clamp(21px, 3.6vw, 31px);
  letter-spacing: .04em;
  line-height: 1.6;
}
.book-info .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.book-info .prof-dl { margin-top: clamp(20px, 3vw, 28px); }
.shop-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(24px, 3.5vw, 32px); }
/* 紹介ページの完売表示 */
.sold-note {
  display: inline-block;
  margin-top: clamp(24px, 3.5vw, 32px);
  padding: 8px 22px;
  border-radius: 999px;
  border: var(--frame);
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
}
.shop-note { margin-top: 12px; font-size: 11.5px; color: var(--ink-dim); }
/* サンプル画像 */
.sample-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: clamp(12px, 2vw, 18px);
}
.sample-grid img {
  width: 100%;
  height: auto;
  border: var(--frame);
  border-radius: 8px;
  cursor: zoom-in;
  transition: translate .25s var(--bounce), border-color .25s;
}
.sample-grid img:hover { translate: 0 -3px; border-color: var(--pink); }
@media (max-width: 700px) {
  .book-detail { grid-template-columns: 1fr; }
  .book-cover { max-width: 300px; }
}
/* 紹介ページがまだ無い本(リンクにしない) */
.book--nolink { cursor: default; }
.book--nolink:hover .book3d { translate: 0 0; }
.book--nolink:hover .book3d .cover { transform: none; }

/* works 内の小見出しグループ(books / games / other) */
.work-group + .work-group { margin-top: clamp(48px, 7vw, 80px); }
/* 小見出しの右に添える件数・状態(トップのダイジェスト用) */
.group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  flex-wrap: wrap;
}
.group-head .prof-h { margin-bottom: 0; }
.group-note {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--ink-dim);
}
.group-head + .books-scroller,
.group-head + .product-grid { margin-top: clamp(18px, 2.6vw, 26px); }

/* worksページの棚見出し(販売中 / 完売)。細罫を右まで通す静かな見出し */
.shelf-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(28px, 4vw, 40px) 0 clamp(16px, 2.4vw, 22px);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink);
}
.shelf-label .t { flex: 0 0 auto; }
.shelf-label::after { /* ラベルと件数のあいだを通る細罫 */
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}
.shelf-label .n {
  flex: 0 0 auto;
  order: 3;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-dim);
}
.work-detail { margin-top: clamp(26px, 3.5vw, 36px); }
/* 中身がまだ無い枠(ホバーで動かさない) */
.product-card--empty { pointer-events: none; color: var(--ink-dim); }

/* セクション冒頭の一文 */
.lead {
  max-width: 42em;
  margin-bottom: clamp(24px, 3.5vw, 34px);
  font-size: 14.5px;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 380px));
  justify-content: start;
  gap: clamp(20px, 3vw, 32px);
}
.product-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--white);
  border: var(--frame);
  border-radius: 14px;
  overflow: hidden;
  transition: translate .3s var(--bounce), border-color .3s;
}
.product-card:hover { translate: 0 -5px; border-color: var(--pink); }
.product-card .thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  background: var(--paper);
  border-bottom: var(--frame);
}
.product-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transition: scale .5s ease;
}
.product-card:hover .thumb img { scale: 1.04; }
/* サムネ未定時のプレースホルダー(ギャラリーと同じ黒アウトライン文字) */
.product-card .thumb--ph { display: grid; place-items: center; }
.product-card .thumb--ph .ph {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(14px, 2.4vw, 19px);
  letter-spacing: .08em;
  text-transform: lowercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(23, 20, 23, .35);
}
.product-card .body { padding: 20px 22px 22px; }
.product-card .title { font-weight: 700; font-size: 16.5px; letter-spacing: .05em; }
.product-card .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-dim);
  flex-wrap: wrap;
}
.product-card .more {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: lowercase;
  color: var(--pink-deep);
}
.product-card .more::after { content: " →"; display: inline-block; transition: translate .25s var(--bounce); }
.product-card:hover .more::after { translate: 4px 0; }
/* スタッガー */
.reveal .product-card { opacity: 0; translate: 0 20px; transition: opacity .5s ease, translate .5s var(--bounce), border-color .3s; }
.reveal.is-in .product-card { opacity: 1; translate: 0 0; }
.reveal.is-in .product-card:nth-child(2) { transition-delay: .12s; }
.no-js .product-card { opacity: 1; translate: 0 0; }

/* ---------- BOOKS(表紙カードの静かな棚) ----------
   3D本棚は廃止。黒枠+ピンク影の表紙カード+NEWステッカー。
   ホバーの表紙めくり(book3d)は継続。 */
/* 横スクロールの棚: 本を1列に並べ、前後ボタン(またはスワイプ)で送る */
.books-scroller { position: relative; }
.books-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 44px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 4px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--pink) transparent;
}
.books-grid > * { scroll-snap-align: start; }
/* アーカイブ用: 横スクロールせず全件を折り返して並べる */
.books-grid--wall {
  flex-wrap: wrap;
  overflow: visible;
  scroll-snap-type: none;
  gap: clamp(20px, 3vw, 34px) clamp(18px, 2.6vw, 30px);
  padding: 4px 0 0;
}
/* 前後ボタン(棚の右上に oo のように2つ並べる) */
.shelf-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}
.shelf-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: var(--frame);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.shelf-btn:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.shelf-btn.is-end { opacity: .3; pointer-events: none; }
.book {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(150px, 22vw, 178px);
  text-decoration: none;
  color: var(--ink);
}
/* 完売本: 表紙をグレーに落として SOLD OUT を重ねる。
   opacity で白く飛ばさず、彩度だけ抜いて少し沈ませる */
.book.is-sold .cover img { filter: grayscale(1) brightness(.92) contrast(1.05); }
.book.is-sold:hover .cover img { filter: grayscale(.4) brightness(.98) contrast(1.02); }
.book.is-sold .name { color: var(--ink-dim); }
.sold-tag {
  position: absolute;
  top: -10px;
  left: -12px;
  z-index: 2;
  rotate: -8deg;
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  border: var(--frame);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .14em;
  white-space: nowrap;
}
.book:hover .book3d { translate: 0 -6px; transition: translate .3s var(--bounce); }

.book3d {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1.414;
  perspective: 900px;
}
/* 中のページ(ホバーで覗く) */
.book3d .pages {
  position: absolute;
  inset: 1.5% 1.5% 1.5% 4%;
  background:
    repeating-linear-gradient(to bottom, transparent 0 14px, rgba(23, 20, 23, .06) 14px 15px),
    linear-gradient(to right, #efeced, #fffdfd 30%);
  border-radius: 3px 8px 8px 3px;
  border: 1px solid var(--line);
}
/* 表紙(左端が背表紙・めくれる) */
.book3d .cover {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform .55s var(--bounce);
  background: linear-gradient(to right, rgba(23, 20, 23, .12) 0 4px, rgba(23, 20, 23, .04) 4px 10px, transparent 14px), var(--white);
  border: var(--frame);
  border-radius: 3px 8px 8px 3px;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
}
.book:hover .book3d .cover { transform: rotateY(-30deg); }
.book3d .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2px 7px 7px 2px; }
.book3d .cover .ph {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .1em;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-dim);
  text-transform: lowercase;
}
.book3d .new-tag {
  position: absolute;
  top: -10px;
  left: -12px;
  z-index: 2;
  rotate: -8deg;
}
.reveal.is-in .book3d .new-tag { animation: dot-pop .5s var(--bounce) .6s backwards; }
.book .name {
  display: block;
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
}
.book .info {
  display: block;
  margin-top: 2px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--ink-dim);
}
/* スタッガー(ぽんっと立ち上がる) */
.reveal .book { opacity: 0; translate: 0 24px; transition: opacity .5s ease, translate .55s var(--bounce); }
.reveal.is-in .book { opacity: 1; translate: 0 0; }
.reveal.is-in .book:nth-child(2) { transition-delay: .1s; }
.reveal.is-in .book:nth-child(3) { transition-delay: .2s; }
.reveal.is-in .book:nth-child(4) { transition-delay: .3s; }
.no-js .book { opacity: 1; translate: 0 0; }

/* ---------- GALLERY(黒細枠で整列) ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.4vw, 22px);
}
@media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-grid .shot {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
  border: var(--frame);
  position: relative;
  display: grid;
  place-items: center;
  transition: translate .3s var(--bounce), border-color .3s;
}
.gallery-grid .shot:hover { translate: 0 -4px; border-color: var(--pink); }
.gallery-grid .shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .5s ease;
}
.gallery-grid .shot:hover img { scale: 1.05; }
/* プレースホルダー: 黒アウトライン文字のみの潔い表示 */
.gallery-grid .shot .ph {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(13px, 2vw, 17px);
  letter-spacing: .08em;
  text-transform: lowercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(23, 20, 23, .35);
}
.gallery-grid .shot:has(.ph) { background: var(--paper); }
/* カテゴリ絞り込み ----------
   サイトのタグ(.pill)をそのままボタンにした、左揃え+細罫の棚。
   選択中は pill--fill と同じピンク塗り。件数はArchivoで小さく添える。 */
.cat-filter {
  display: flex;
  align-items: center;
  gap: 10px clamp(14px, 2.4vw, 22px);
  flex-wrap: wrap;
  margin-bottom: clamp(22px, 3vw, 30px);
  padding-bottom: clamp(13px, 1.8vw, 17px);
  border-bottom: var(--frame);
}
.cat-filter .legend {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 0 0 auto;
}
.cat-filter .legend .en {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .01em;
  text-transform: lowercase;
  line-height: 1;
}
.cat-filter .legend .jp {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--ink-dim);
}
.cat-list { display: flex; gap: 8px; flex-wrap: wrap; }
/* ボタンは .btn を土台にして、他のボタンと配色・ホバー(ピンク塗り+ぷるん)を揃える。
   選択中も .btn:hover と同じピンク塗り = 枠線もピンク(黒枠は残さない)。 */
.cat-btn {
  min-height: 36px;
  padding: 6px 18px;
  font-size: 12.5px;
  letter-spacing: .1em;
  cursor: pointer;
}
.cat-btn.is-active {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}
.cat-btn .n {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-dim);
  transition: color .22s;
}
/* 件数が入っていないときは gap のぶん文字が左にずれるので消す */
.cat-btn .n:empty { display: none; }
/* .btn の display が [hidden] に勝ってしまうので明示的に消す(0件カテゴリ) */
.cat-btn[hidden] { display: none; }
.cat-btn:hover .n,
.cat-btn.is-active .n { color: rgba(255, 255, 255, .8); }

/* art.json駆動のサムネ(サムネ+キャプションのボタン) */
.art-item {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.art-cap {
  display: flex;
  align-items: baseline;
  gap: 4px 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.art-cat {
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--pink-deep);
}
.art-cap time {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-dim);
}
/* トップの抜粋グリッドはキャプションを出さない */
.gallery-grid:not(.is-detailed) .art-cap { display: none; }
/* R18ベール: 年齢確認前はぼかし+中央ラベル、確認後は左上の小ラベルのみ */
.shot--art .r18-veil {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .14em;
}
.shot--art .r18-veil i { display: none; }
.shot--art.is-veiled img { filter: blur(18px); scale: 1.12; }
.shot--art.is-veiled .r18-veil {
  inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  border-radius: 0;
  background: rgba(255, 255, 255, .38);
  color: var(--ink);
}
.shot--art.is-veiled .r18-veil b {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(18px, 3vw, 26px);
  letter-spacing: .1em;
  line-height: 1;
}
.shot--art.is-veiled .r18-veil i {
  display: block;
  font-style: normal;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: lowercase;
  text-align: center;
}
/* 「view all」行 */
.gallery-more {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(20px, 3.5vw, 32px);
}
.art-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-dim);
  font-size: 13.5px;
  padding-block: 32px;
}

/* ライトボックス(フラット: 墨の背景幕+白パネル+ヘアライン枠) */
.artbox {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(23, 20, 23, .6);
}
.artbox-panel {
  margin: 0;
  background: var(--white);
  border: var(--frame);
  border-radius: 14px;
  padding: 12px;
  max-width: min(880px, 94vw);
  max-height: 88vh;
  overflow: auto;
}
.artbox-panel img {
  display: block;
  max-width: 100%;
  max-height: min(66vh, 700px);
  width: auto;
  height: auto;
  margin-inline: auto;
  border-radius: 8px;
}
.artbox-cap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 12px 6px 4px;
}
.artbox-cap time {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--pink-deep);
}
.artbox-comment {
  width: 100%;
  font-size: 13.5px;
  line-height: 1.9;
}
/* サンプル拡大時: 縦長ページを大きく見せ、下にページ番号 */
.artbox-panel--sample img { max-height: min(80vh, 1100px); }
.artbox-count {
  padding: 10px 6px 2px;
  text-align: center;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ink-dim);
}
.artbox-close,
.artbox-nav {
  position: fixed;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: var(--frame);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.artbox-close { top: 16px; right: 16px; }
.artbox-prev { left: 14px; top: 50%; translate: 0 -50%; }
.artbox-next { right: 14px; top: 50%; translate: 0 -50%; }
.artbox-close:hover,
.artbox-nav:hover { background: var(--pink); border-color: var(--pink); color: #fff; }

/* スタッガー(グリッドの直下の子=.art-item / プレースホルダーの.shot 両方に効かせる) */
.gallery-grid.reveal > * { opacity: 0; scale: .94; transition: opacity .45s ease, scale .5s var(--bounce); }
.gallery-grid.reveal.is-in > * { opacity: 1; scale: 1; }
.gallery-grid.reveal.is-in > *:nth-child(2) { transition-delay: .08s; }
.gallery-grid.reveal.is-in > *:nth-child(3) { transition-delay: .16s; }
.gallery-grid.reveal.is-in > *:nth-child(4) { transition-delay: .24s; }
.gallery-grid.reveal.is-in > *:nth-child(5) { transition-delay: .32s; }
.gallery-grid.reveal.is-in > *:nth-child(6) { transition-delay: .4s; }
.no-js .gallery-grid > * { opacity: 1; scale: 1; }

/* ---------- ABOUT(トップの要約) ---------- */
.about-box { max-width: 680px; }
.about-box p { font-size: 14.5px; }
.about-box .links {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}
/* アイコン+名義のロックアップ */
.about-id {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 24px);
  margin-bottom: 24px;
}
.about-id .prof-icon { width: clamp(64px, 12vw, 84px); }
.about-id .en {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(20px, 3.4vw, 28px);
  line-height: 1;
  text-transform: lowercase;
}
.about-id .jp {
  margin-top: 7px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-dim);
}

/* ---------- about/ プロフィール詳細ページ ---------- */
.prof-icon {
  display: block;
  width: clamp(96px, 18vw, 152px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: var(--frame);
  background: var(--paper);
}
.prof-icon img { width: 100%; height: 100%; object-fit: cover; }

.prof-card {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  flex-wrap: wrap;
  padding-bottom: clamp(30px, 4.5vw, 44px);
  border-bottom: var(--frame);
}
.prof-names .en {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(30px, 5.4vw, 48px);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: lowercase;
}
.prof-names .jp {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink-dim);
}
.prof-names .jp .sep { margin-inline: 8px; color: var(--pink); }
.prof-links { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.btn .ico { width: 14px; height: 14px; fill: currentColor; }
.btn--x { text-transform: none; } /* @SKBmch の大文字を保つ */

.prof-block {
  padding-block: clamp(32px, 5vw, 52px);
  border-bottom: var(--frame);
}
.prof-block p + p { margin-top: 1em; }
.prof-block p,
.prof-block li { font-size: 14.5px; }
/* 小見出し(セクション見出しの弟分。同じピンクマーカー) */
.prof-h {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: clamp(18px, 2.6vw, 26px);
  line-height: 1;
}
.prof-h .mark {
  position: relative;
  z-index: 0;
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(21px, 3.4vw, 30px);
  letter-spacing: .01em;
  text-transform: lowercase;
}
.prof-h .mark::after {
  content: "";
  position: absolute;
  left: -.06em;
  right: -.08em;
  bottom: -.02em;
  height: .26em;
  z-index: -1;
  border-radius: 3px;
  background: var(--pink);
  transform-origin: left center;
}
.reveal .prof-h .mark::after { scale: 0 1; transition: scale .5s var(--ease-out) .2s; }
.reveal.is-in .prof-h .mark::after { scale: 1 1; }
.no-js .prof-h .mark::after { scale: 1 1; }
.prof-h .jp {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--ink-dim);
}

.prof-dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px clamp(20px, 4vw, 40px);
}
.prof-dl dt {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: lowercase;
  color: var(--pink-deep);
  padding-top: 5px;
}
.prof-dl dd { font-size: 14.5px; line-height: 1.8; }

.prof-list { display: grid; gap: 10px; }
.prof-list li {
  position: relative;
  padding-left: 22px;
  line-height: 1.9;
}
.prof-list li::before { /* ooモチーフの中抜き○ */
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--pink);
}
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.prof-back { margin-top: clamp(36px, 5vw, 56px); }

@media (max-width: 560px) {
  .prof-dl { grid-template-columns: 1fr; gap: 4px; }
  .prof-dl dt { padding-top: 12px; }
}

/* ---------- フッター(ビビッドピンクの全面塗り) ----------
   ピンク1面に墨の大型タイポ+たっぷりの余白。マーカーは白に置き換えて
   見出しと同じ意匠を反転で反復する。ロゴは白地でないと配色が崩れるので
   ここには置かない(ロゴはヘッダーとローダーが担う)。 */
.site-footer {
  position: relative;
  background: var(--pink);
  border-top: var(--frame);
  padding-block: clamp(64px, 10vw, 124px) clamp(26px, 3.5vw, 38px);
  color: var(--ink);
}
.foot-lead {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(38px, 7vw, 76px);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: var(--ink);
}
/* 見出しのピンクマーカーを白に反転して敷く */
.foot-lead .mark {
  position: relative;
  z-index: 0;
  display: inline-block;
}
.foot-lead .mark::after {
  content: "";
  position: absolute;
  left: -.05em;
  right: -.07em;
  bottom: .05em;
  height: .24em;
  z-index: -1;
  border-radius: 3px;
  background: var(--white);
  transform-origin: left center;
}
.reveal .foot-lead .mark::after { scale: 0 1; transition: scale .6s var(--ease-out) .3s; }
.reveal.is-in .foot-lead .mark::after { scale: 1 1; }
.no-js .foot-lead .mark::after { scale: 1 1; }
/* 2行とも白マーカーを敷くので、1行目→2行目の順に引かれるようずらす */
.reveal .foot-lead .mark:nth-of-type(2)::after { transition-delay: .48s; }

.foot-jp {
  margin-top: clamp(20px, 3vw, 28px);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
}
/* 最下段: 注記(左)とクレジット(右)を白い細罫で区切る */
.foot-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  margin-top: clamp(44px, 7vw, 76px);
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .55);
}
.site-footer .note {
  font-size: 11.5px;
  line-height: 1.9;
  color: rgba(23, 20, 23, .78);
  text-wrap: balance; /* 折返し時に最終行が1語だけ残らないように */
}
.site-footer .credit {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: lowercase;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- スクロールトップ ---------- */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: var(--frame);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  translate: 0 14px;
  pointer-events: none;
  transition: opacity .3s, translate .3s var(--bounce), background .2s, color .2s;
}
.to-top.is-show { opacity: 1; translate: 0 0; pointer-events: auto; }
.to-top:hover { background: var(--pink); border-color: var(--pink); color: #fff; animation: jelly .5s var(--bounce); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; translate: 0 22px; transition: opacity .8s ease, translate .8s var(--bounce); }
.reveal.is-in { opacity: 1; translate: 0 0; }
.no-js .reveal { opacity: 1; translate: 0 0; }

/* =============================================================
   blog/ — 進捗ブログ(posts.json駆動の一覧 + 記事ページ)
   ============================================================= */
/* 記事カード: アイキャッチを天面に敷いた縦積みカード */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: clamp(20px, 3vw, 30px);
}
.post-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--white);
  border: var(--frame);
  border-radius: 14px;
  overflow: hidden;
  transition: translate .25s var(--bounce), border-color .25s;
}
.post-card:hover { translate: 0 -4px; border-color: var(--pink); }
.post-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper);
  border-bottom: var(--frame);
}
.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .5s ease;
}
.post-card:hover .post-thumb img { scale: 1.04; }
/* 画像未設定のときのプレースホルダー(ギャラリーと同じ黒アウトライン文字) */
.post-thumb--ph { display: grid; place-items: center; }
.post-thumb--ph .ph {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(13px, 2vw, 17px);
  letter-spacing: .08em;
  text-transform: lowercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(23, 20, 23, .3);
}
.post-body {
  display: block;
  padding: 17px 19px 19px;
}
.post-card .more {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--pink-deep);
}
.post-card .more::after { content: " →"; display: inline-block; transition: translate .25s var(--bounce); }
.post-card:hover .more::after { translate: 4px 0; }
.post-card .meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.post-card time {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--pink-deep);
}
.post-card .title {
  display: block;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: .04em;
  line-height: 1.65;
}
.post-card .summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-dim);
  margin-top: 6px;
}
.blog-empty {
  color: var(--ink-dim);
  font-size: 13.5px;
}

/* 記事ページ */
.post-head {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  padding-top: clamp(40px, 7vw, 64px);
}
/* 記事ページのアイキャッチ(任意) */
.post-hero {
  display: block;
  max-width: 760px;
  margin: clamp(30px, 4.5vw, 44px) auto 0;
  padding-inline: var(--gutter);
}
.post-hero img {
  width: 100%;
  height: auto;
  border: var(--frame);
  border-radius: 12px;
}
.post-head .meta {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.post-head time {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--pink-deep);
}
.post-head h1 {
  font-weight: 700;
  font-size: clamp(21px, 4vw, 30px);
  letter-spacing: .05em;
  line-height: 1.8;
  margin-top: 12px;
}
/* タイトル下も oo 意匠(記事ページはrevealなし=静止表示) */
.post-head .oo { margin-top: 18px; }
.post-body {
  max-width: 640px;
  margin-inline: auto;
  padding-block: clamp(36px, 6vw, 56px);
  font-size: 14.5px;
  line-height: 2.3;
}
.post-body h2 {
  font-weight: 700;
  font-size: 17.5px;
  letter-spacing: .06em;
  margin: 2.2em 0 .8em;
  padding-left: 14px;
  border-left: 4px solid var(--pink);
  border-radius: 2px;
  line-height: 1.8;
}
.post-body p + p { margin-top: 1.2em; }
.post-body img {
  border-radius: 10px;
  border: var(--frame);
  margin: 1.6em auto;
}
.post-body ul { margin: 1.2em 0; padding-left: 4px; }
.post-body ul li {
  position: relative;
  padding: 4px 0 4px 22px;
  list-style: none;
}
.post-body ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--pink);
}
.post-foot {
  max-width: 640px;
  margin-inline: auto;
  padding-bottom: clamp(48px, 8vw, 72px);
  text-align: center;
}

/* 年齢確認オーバーレイ(js/age.js がサイト共通で表示) */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(255, 255, 255, .97);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  text-align: center;
}
.age-gate .box {
  max-width: 420px;
  background: var(--white);
  border: var(--frame);
  border-radius: 18px;
  padding: 34px 30px;
}
.age-gate p { font-size: 13.5px; line-height: 2.1; }
.age-gate .ask { font-weight: 700; font-size: 15.5px; margin-top: 14px; }
.age-gate .actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.age-gate .age-lead { font-size: 13.5px; }
.age-gate .age-note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--ink-dim);
}
/* R18ページのロックは背面を完全に隠す */
.age-gate.is-lock { background: var(--white); }

/* ---------- アクセシビリティ ---------- */
:focus-visible { outline: 2.5px solid var(--pink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .loader { display: none; }
  .reveal, .news-list.reveal li, .reveal .product-card, .reveal .book,
  .gallery-grid.reveal > * {
    opacity: 1; translate: 0 0; scale: 1; transition: none;
  }
  .news-list.reveal li::before { scale: 1; transition: none; }
  .sec-head.reveal .en::after { scale: 1 1; transition: none; }
  .global-nav .en::after { transition: none; }
  .reveal .foot-lead .mark::after,
  .reveal .prof-h .mark::after { scale: 1 1; transition: none; }
  .news-list.reveal.is-in li:first-child::after { animation: none; }
  .hero .slide { transition: none; -webkit-mask-image: none; mask-image: none; }
  .hero .slide.is-active { animation: none; }
  .hero .slide.is-active img { animation: none; }
  .btn:hover, .to-top:hover, .brand:hover .o2 { animation: none; }
  .reveal.is-in .oo::before, .reveal.is-in .oo i, .reveal.is-in .oo::after,
  .reveal.is-in .book3d .new-tag { animation: none; }
  .book:hover .book3d .cover { transform: none; }
  .product-card, .book3d .cover, .gallery-grid .shot, .hero-tag { transition: none; }
}