/* dorodoro portal */

/* ---------- トークン ---------- */
: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;
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: pretty;
}

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; }
/* トップページは白→薄グレーを1つおきに並べてリズムを作る。
   ルール: 白ではじめ、白で終える(=ヒーロー画像の直後とピンクのフッター直前は白)。
   セクションを増減したときは、必ず交互になるよう付け替えること。
   いまの並び: news 白 / works 灰 / gallery 白 / blog 灰 / about 白 */
.section--paper { background-color: var(--paper); }
/* セクションの区切り罫 */
main .section + .section { border-top: 1px solid var(--ink); }

/* ---------- ローダー ----------
   穴あけに mask は使わない。iOSではマスク下の子アニメが描画されないため、
   .loader-veil(透明な円+巨大なbox-shadow)の直径を広げて穴に見せる。 */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* 背景は塗らない(ピンクは .loader-veil の影が塗る) */
}
.loader.is-done { pointer-events: none; }
/* 中央の透明な円の外側を、ぼかし0の巨大な影で塗る */
.loader-veil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 0 210vmax var(--pink);
}

/* 中央の白い丸バッジ(veilのピンクより上に置く) */
.loader-inner {
  position: relative;
  z-index: 1;
  width: clamp(210px, 52vw, 290px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  /* scale単独プロパティは旧iOS Safariが非対応なので transform で書く */
  transition: transform .5s cubic-bezier(.55, 0, .85, .45), opacity .12s ease .4s;
}
.loader.is-done .loader-inner { opacity: 0; transform: scale(0); }
/* うっすら二重の外周リング(静止) */
.loader-inner::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .55);
}
/* 回る白い弧。mask を避けて border の円弧で描く */
.loader-inner::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 3.5px solid transparent;
  border-top-color: #fff;
  border-right-color: rgba(255, 255, 255, .45);
  animation: ring-spin 1.25s linear infinite;
}
@keyframes ring-spin { to { transform: 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;
  /* 長さは portal.js が getTotalLength() で入れる。
     pathLength は旧iOS Safariが無視するので使わない */
  opacity: 0;
}
.loader-word-svg.is-draw .s {
  opacity: 1;
  animation: letter-draw .34s 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; }

/* ---------- 見出し ---------- */
.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(中抜き○＋塗り●) */
.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;
}
/* ロゴはローダーと同じ一筆書きSVG(墨のストローク+ピンクのo)。
   フォント版とローダー版で顔が2つある状態を解消し、手描きに一本化 */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-svg {
  display: block;
  width: 146px;
  height: auto;
  overflow: visible;
}
.brand-svg .s {
  fill: none;
  stroke: var(--ink);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand-svg .s--o {
  stroke: var(--pink);
  /* ホバーでoだけぷるんとさせるための基準点(各パスの中心) */
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.brand:hover .brand-svg .s--o { animation: jelly-svg .5s var(--bounce); }
/* SVGパスには scale: 単独プロパティが効かない環境があるため transform で書く */
@keyframes jelly-svg {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.14, .86); }
  60%  { transform: scale(.94, 1.06); }
  100% { transform: scale(1, 1); }
}

/* ナビ: 英字+和文の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; }
  .global-nav.is-open li:nth-child(7) a { transition-delay: .4s; }
}

/* ---------- HERO ---------- */
@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 ----------
   左のレール+日付ごとの丸。最新だけピンク●、それ以前は黒○。 */
.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 .txt .go {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
/* 本文は太らせず、末尾のピンクの矢印だけでリンクだと分かるようにする。
   矢印は内部・外部で分けず ↗ に統一する(参加予定イベントと同じ形) */
.news-list .txt .go::after {
  content: " ↗";
  color: var(--pink-deep);
  font-weight: 700;
  font-size: .85em;
}
.news-list .txt .go:hover { color: var(--pink-deep); }

/* 最新●のさざ波 */
.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; }

/* 広い画面ではお知らせ(左)とイベント(右)の2カラム */
.news-cols {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
/* 参加予定イベント */
.events {
  max-width: 640px;
  margin-top: clamp(36px, 5vw, 52px);
  padding-top: clamp(20px, 3vw, 26px);
  border-top: var(--frame);
}
@media (min-width: 861px) {
  .news-cols .events {
    max-width: none;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    padding-left: clamp(28px, 4vw, 52px);
    border-left: var(--frame);
    align-self: stretch; /* 区切りの縦罫を左列の高さまで通す */
  }
}
@media (max-width: 860px) {
  .news-cols { grid-template-columns: 1fr; }
}
.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: " ↗";
  color: var(--pink-deep);
  font-weight: 700;
  font-size: .85em;
}
.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; }
}

/* ---------- 行リスト(link / contact 共通) ---------- */
.row-head {
  display: flex;
  align-items: baseline;
  gap: 6px 14px;
  flex-wrap: wrap;
}
.row-head .en {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(19px, 3vw, 25px);
  letter-spacing: .01em;
  text-transform: lowercase;
  line-height: 1;
}
.row-head .label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--pink-deep);
}
/* @ハンドルなど欧文のラベルは英字フォントで */
.row-head .label--en {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: .08em;
}
.row-desc {
  display: block;
  margin-top: 9px;
  max-width: 44em;
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-dim);
}

/* ---------- 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 .en::after { content: " ↗"; font-size: .55em; letter-spacing: 0; }
.link-list a:hover .row-desc { color: var(--ink); }

/* ---------- contactページ: 行の右端にボタン ---------- */
.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-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: 15px;
}
.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; }
/* 飛び先がまだ無いカード(見せるが押せない) */
.product-card--soon { cursor: default; }
.product-card--soon:hover { translate: 0 0; border-color: var(--ink); }
.product-card--soon:hover .thumb img { scale: 1; }
.soon-note {
  display: inline-block;
  margin-top: 14px;
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--ink-dim);
}
/* スタッガー */
.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 ---------- */
/* 横スクロールの棚 */
.books-scroller { position: relative; }
.books-grid {
  display: flex;
  flex-wrap: nowrap;
  /* カードを行の高さまで伸ばし、表紙は margin-top:auto で下端の棚線に揃える。
     新刊だけ大きくしても、背の高さが違う本が同じ棚に立つ形になる */
  align-items: stretch;
  gap: clamp(24px, 4vw, 44px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* はみ出すバッジとホバーの浮きがクリップされないぶんの余白。
     マイナスマージンで見た目の位置は元のまま保つ */
  padding: 18px 16px 8px;
  margin: -14px -12px 0;
  scroll-padding-inline: 16px;
  /* スクロールバーは出さない */
  scrollbar-width: none;
}
.books-grid::-webkit-scrollbar { display: none; }
.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;
  margin: 0;
}
/* 前後ボタン */
.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: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: clamp(150px, 22vw, 178px);
  text-decoration: none;
  color: var(--ink);
}
/* 新刊は一回り大きく。棚の中で背の高い一冊として立たせる */
.book--new { width: clamp(196px, 29vw, 236px); }
/* 完売本 */
.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); }
/* 完売だけの棚では棚ラベルと重複するのでバッジを出さない */
[data-filter="soldout"] .sold-tag { display: none; }
.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;
  /* 背の低い本を棚の線まで下ろす(高さは行のいちばん高い本が決める) */
  margin-top: auto;
  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--new .name { font-size: 14px; }
.book--new .info { font-size: 11.5px; }
.book .name {
  display: block;
  margin-top: 16px;
  /* 1行に収め、長いタイトルは…で省略する(全文は title 属性で出る)。
     行数が揃うので表紙も仕様の行も自然に並ぶ */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  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; }
.reveal.is-in .book:nth-child(5) { transition-delay: .4s; }
.no-js .book { opacity: 1; translate: 0 0; }

/* ---------- WEB COMICS ---------- */
.comic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: clamp(16px, 2.6vw, 26px);
}
.comic-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.comic-card .cover {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: var(--frame);
  border-radius: 10px;
  background: var(--white);
  transition: translate .3s var(--bounce), border-color .3s;
}
.comic-card .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.comic-card:hover .cover { translate: 0 -4px; border-color: var(--pink); }
.comic-card .name {
  display: block;
  margin-top: 10px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .04em;
  line-height: 1.6;
}
.comic-card .info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-dim);
}
/* 閲覧ページ(ビューアはComimiが描く) */
.comic-head h1 {
  font-size: clamp(21px, 3.4vw, 28px);
  letter-spacing: .06em;
  line-height: 1.5;
}
.comic-head .tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.comic-head .tags time {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-dim);
}
.comic-head .comic-lead {
  max-width: 42em;
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-dim);
}
/* ビューアには translate を効かせない。包含ブロックになると
   Comimi の全画面(position:fixed)が枠の中に閉じ込められる */
.comic-viewer,
.comic-viewer.reveal,
.comic-viewer.reveal.is-in { translate: none; }
.comic-viewer { margin-top: clamp(22px, 3.4vw, 34px); }

/* ---------- 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); }
/* ---------- カテゴリ絞り込み ---------- */
.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; }
.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-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; }

/* ---------- ギャラリー一覧: マソンリー ----------
   CSS Gridの行スパン方式。JS(gallery.js)が絵の縦横比から行数を計算する。
   縦長は1列、横長(幅/高さ>=1.2)は2列ぶち抜きで大きく見せる。
   キャプションは画像の上に重ね、ホバー時だけ出す(画像中心) */
.gallery-grid.is-detailed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 2px;          /* 高さの最小単位。JSがこの単位でスパンを組む */
  grid-auto-flow: row dense;    /* 2列絵の隣にできる穴を後続で埋める */
  gap: clamp(14px, 2.4vw, 22px);
}
@media (max-width: 900px) { .gallery-grid.is-detailed { grid-template-columns: repeat(2, 1fr); } }
.gallery-grid.is-detailed .art-item {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.gallery-grid.is-detailed .art-item--wide { grid-column: span 2; }
.gallery-grid.is-detailed .art-empty { grid-column: 1 / -1; }
.gallery-grid.is-detailed .shot { height: 100%; }
.gallery-grid.is-detailed .shot img { object-fit: cover; }
.gallery-grid.is-detailed .shot {
  aspect-ratio: auto;
  display: block;
}
.gallery-grid.is-detailed .shot img {
  position: static;
  width: 100%;
  height: 100%;      /* 行スパンで決めた枠にぴったり合わせる(誤差は1px程度) */
  display: block;
}
.gallery-grid.is-detailed .art-cap {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  margin: 0;
  padding: 3px 12px;
  background: var(--white);
  border: var(--frame);
  border-radius: 999px;
  opacity: 0;
  translate: 0 4px;
  transition: opacity .25s, translate .25s var(--ease-out);
  pointer-events: none;
}
.gallery-grid.is-detailed .art-item:hover .art-cap,
.gallery-grid.is-detailed .art-item:focus-visible .art-cap {
  opacity: 1;
  translate: 0 0;
}
/* 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; }
.gallery-grid.is-detailed .shot--art.is-veiled img { scale: 1; }
.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);
}
/* newsのview allは左列(.news-col)の中にあるので、列の右端に自然に揃う */
.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; }

/* スタッガー */
.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; }

/* プロフィールの顔。狭い画面でも吹き出しをアイコンの右に保つため、
   折り返しに任せず grid で置き場所を決める。
   広い画面 : アイコン | 名前 / 吹き出し / ボタン(縦に3段)
   狭い画面 : アイコン | 吹き出し …… その下に名前、ボタン */
.prof-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon  hello"
    "names names"
    "links links";
  column-gap: clamp(14px, 3vw, 22px);
  row-gap: clamp(14px, 2.4vw, 18px);
  align-items: center;
  padding-bottom: clamp(30px, 4.5vw, 44px);
  border-bottom: var(--frame);
}
.prof-card .prof-icon  { grid-area: icon; }
.prof-card .prof-names { grid-area: names; }
.prof-card .prof-links { grid-area: links; justify-self: start; }
/* grid の既定では列幅いっぱいに伸びてしまうので、文字の幅に収める */
.prof-card .prof-hello { grid-area: hello; justify-self: start; max-width: 30em; }

@media (min-width: 700px) {
  .prof-card {
    grid-template-areas:
      "icon names"
      "icon hello"
      "icon links";
    column-gap: clamp(24px, 4vw, 40px);
    align-items: start;
  }
  .prof-card .prof-icon { align-self: center; }
}
.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); }
/* アイコン横のひとこと。しっぽもヘアラインで作る。
   grid で位置を決めているので margin は持たせない */
.prof-hello {
  position: relative;
  display: inline-block;
  padding: 11px 18px;
  border: var(--frame);
  border-radius: 14px;
  background: var(--white);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .03em;
}
.prof-hello::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 15px;
  width: 12px;
  height: 12px;
  background: var(--white);
  border-left: var(--frame);
  border-bottom: var(--frame);
  rotate: 45deg;
}
/* しっぽは常に左向き(アイコンを指す)。どの幅でも横に並ぶため向きの切替は不要 */
.prof-links { display: flex; gap: 10px; 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-h--sm { gap: 12px; margin-bottom: 14px; }
.prof-h--sm .mark { font-size: clamp(16px, 2.6vw, 19px); }
.prof-h--sm .jp { font-size: 11px; letter-spacing: .18em; }

.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; }
}

/* ---------- フッター ----------
   ロゴは白地でないと配色が崩れるのでここには置かない */
.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;
  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; }
/* 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, .92); /* ピンク地の小さな文字なので薄めすぎない */
  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 ---------- */
/* 記事カード */
.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-card .card-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;
}
/* 記事ページは 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;
}

/* 年齢確認オーバーレイ ----------
   訪問者が最初に対面する画面なので、サイトと同じ顔(ロゴ・ピンクの主導線)にする。
   文字はすべて中央揃え: ロゴ・質問・ボタンが対称なので、本文だけ左に寄せると
   箱の重心がずれて見える。本文は2〜3行の短文なので中央でも読みにくくならない。
   (行末が階段状に暴れないよう text-wrap: balance で行長を均す) */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(255, 255, 255, .97);
  /* flex+margin:auto で中央寄せ: 箱が画面より高いとき(横向きスマホ)は
     grid の place-items:center だと上下が切れて操作不能になるが、
     この組み合わせなら自動でスクロールに切り替わる */
  display: flex;
  overflow-y: auto;
  padding: var(--gutter);
}
.age-gate .box {
  width: min(100%, 430px);
  margin: auto; /* 収まれば中央、あふれたらスクロール */
  background: var(--white);
  border: var(--frame);
  border-radius: 14px;
  padding: clamp(26px, 5vw, 34px) clamp(22px, 5vw, 32px);
  text-align: center;
}
.age-gate .box p { text-wrap: balance; }
/* 箱の中の余白は「セクション間24 / グループ内8〜14」の2段階に揃える。
   ロゴ→本文→[質問+ボタン]→注記 の4ブロック構成 */
.age-brand { margin-bottom: 24px; }
.age-brand .brand-svg { width: 118px; margin-inline: auto; }
.age-gate p { font-size: 13.5px; line-height: 1.9; }
/* 質問がこの画面の主役。見出しとして立て、ボタン列の真上で中央に置く */
.age-gate .ask {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .02em;
  margin-top: 24px; /* 本文とはセクション間隔で離す */
}
.age-gate .actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px; /* 質問とボタンはひとつのグループなので詰める */
}
.age-gate .actions .btn { width: 100%; }
/* 白ボタン(いいえ/トップへ戻る)のホバーは黒。
   ピンクにすると主導線の「はい」と見分けがつかなくなるため */
.age-gate .actions .btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.age-gate .age-lead { font-size: 13.5px; }
/* 2段目(苦手な方への注意)も本文と同じ文字にする。
   大きさや色を変えると書体が増えて見えてかえって読みにくい */
.age-gate .age-lead--sub { margin-top: 8px; }
.age-gate .age-note {
  margin-top: 24px;   /* セクション間隔 */
  padding-top: 14px;  /* 罫線と文字の間はグループ内間隔 */
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--ink-dim);
}
/* R18ページのロックは背面を完全に隠す */
.age-gate.is-lock { background: var(--white); }

/* JSが無効だと age.js の年齢確認が動かないので、R18ページの中身は出さない。
   .no-js を外すのは portal.js / blog.js で、どちらも age.js より後に走る。
   その順のおかげで「白紙 → ゲート → (ゲートの下に)中身」となり、
   R18の中身が一瞬でも素で見えることがない */
.no-js body[data-r18] main,
.no-js body[data-r18] .site-footer { display: none; }

/* <noscript> に置いた代替ゲート。雛形経由で全ページに入るので、
   R18ページ以外では出さない(noscript の中身はJS無効時しか描かれない) */
body:not([data-r18]) .age-noscript { display: none; }

/* ---------- アクセシビリティ ---------- */
: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 .brand-svg .s--o { 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; }
}