/* ============================================================
   H. Fukui – Watercolor Gallery
   yoshikiokamura.art を参考にした横スクロールギャラリー
   ============================================================ */

:root {
  --paper: #f7f5f1;
  --ink: #2b2a28;
  --ink-soft: #8c8880;
  --line: #dcd8d0;
  --font-latin: "Jost", "Helvetica Neue", sans-serif;
  --font-ja: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-ui: "Jost", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  overflow: hidden;
  touch-action: none;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }

/* ---------- 水彩のにじみ背景(PCのみ) ---------- */
#paint {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---------- 横スクロール土台 ---------- */
#viewport {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

#track {
  display: flex;
  align-items: stretch;
  height: 100%;
  will-change: transform;
}

.panel {
  flex: none;
  height: 100%;
  position: relative;
}

/* ---------- 表紙(スクロールで本のように開く) ---------- */
.hero {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  transform-origin: left center;
  will-change: transform;
  backface-visibility: hidden; /* 90度を超えたら裏面は見せない */
  pointer-events: none;        /* ドラッグ操作は下のビューポートに通す */
  box-shadow: 40px 0 80px -20px rgba(60, 50, 40, .35);
}

/* めくれるときの右端の陰影(スライドの画像より前面) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to left, rgba(40, 30, 20, .18), transparent 22%);
  pointer-events: none;
}

.hero_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: opacity 2s ease;   /* js の HERO_FADE とそろえる */
}

.hero_logo {
  position: absolute;
  z-index: 4;
  top: 45%;
  left: 7vw;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 3vw;
  color: #fff;
  text-shadow: 0 2px 28px rgba(40, 60, 40, .35);
  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, .5)) drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.4));
  white-space: nowrap;
}

.hero_logo_strong {
  font-family: var(--font-latin);
  font-weight: 200;
  font-size: 8.5vw; /* vw基準:SPでも画面内に収まる */
  line-height: 1;
  letter-spacing: .34em;
  text-indent: .17em;
}

.hero_logo_sub {
  font-weight: 300;
  font-size: 3vw;
  letter-spacing: .5em;
  padding-left: .5vw;
  color: #fff;
}

.hero_hint {
  position: absolute;
  z-index: 4;
  right: 3.2vw;
  bottom: 4.5vh;
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: .95rem;
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, .5)) drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.4));
}

.hero_hint_arrow {
  display: inline-block;
  margin-left: .5rem;
  animation: nudge 2.4s ease-in-out infinite;
}

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(.5rem); }
}

/* ---------- 導入パネル ---------- */
.intro {
  width: max(88vw, 900px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 6vw;
  gap: 4vw;
}

.intro_title {
  position: absolute;
  top: 6vh;
  left: 6vw;
  font-family: var(--font-latin);
  font-weight: 200;
  font-size: clamp(3rem, 7vw, 5.5rem);
  letter-spacing: .04em;
}

.intro_body {
  border-left: 1px solid var(--ink);
  padding-left: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-self: center;
  margin-top: 10vh;
}

.intro_text {
  font-size: .92rem;
  line-height: 2.1;
  letter-spacing: .08em;
}

.intro_text-ja { font-family: var(--font-ja); }

.intro_note {
  font-size: .78rem;
  line-height: 2;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

.intro_index {
  display: flex;
  flex-direction: column; /* 若い年が上 */
  gap: .1rem;
  margin-top: 8vh;
}

.intro_index_item {
  display: grid;
  grid-template-columns: 3.4rem auto; /* 作品番号3桁ぶん */
  align-items: baseline;
  gap: 1rem;
  padding: .28rem 1rem .28rem 0;
  font-family: var(--font-latin);
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--ink-soft);
  border-left: 2px solid transparent;
  transition: color .3s, border-color .3s;
}

.intro_index_item:hover, .intro_index_item.is-active {
  color: var(--ink);
  border-left-color: var(--ink);
}

.intro_index_year { font-size: 1.05rem; text-align: right; color: var(--ink); }
.intro_index_range { font-size: .78rem; }

/* ---------- 区切り(作品番号) ---------- */
.chunkmark {
  width: 40vw;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 9vw;
}

.chunkmark_num {
  font-family: var(--font-latin);
  font-weight: 200;
  font-size: clamp(2.6rem, 5.6vw, 4.8rem);
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
}

.chunkmark_range {
  margin-top: 1.1rem;
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: .85rem;
  letter-spacing: .22em;
  color: var(--ink-soft);
}

/* ---------- 作品 ---------- */
/* 題名の末尾の「小」「大」(桃の習作と大原画) */
.title_size { font-size: .7em; margin-left: .15em; }

.work {
  flex: none;
  align-self: center;
  margin: 0 7vw;
  will-change: transform;
}

.work_frame {
  position: relative;
  background: #e7e4de;
  box-shadow:
    0 1px 2px rgba(60, 50, 40, .18),
    14px 18px 34px -12px rgba(60, 50, 40, .28);
  transition: transform .5s cubic-bezier(.22,.8,.3,1), box-shadow .5s;
}

.work:hover .work_frame {
  transform: translateY(-6px);
  box-shadow:
    0 1px 2px rgba(60, 50, 40, .16),
    18px 26px 44px -12px rgba(60, 50, 40, .32);
}

.work_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.work_img.is-loaded { opacity: 1; }

.work_caption {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin-top: .9rem;
  padding-left: .2rem;
}

.work_title {
  font-family: var(--font-ja);
  font-size: .92rem;
  letter-spacing: .14em;
}

/* タイトル頭の作品番号(js/main.js の SHOW_NO) */
.work_no {
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: .78em;
  letter-spacing: .1em;
  color: var(--ink-soft);
  margin-right: .6em;
}

.work_date {
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--ink-soft);
}

/* 号数の横の誌名と掲載年月は号数の0.7倍 */
.meta_sub { font-size: .7em; }

/* 「大きく」時は年月日をしっかり拡大 */
html.font-large .work_date { font-size: .85rem; }
html.font-large .detail_meta { font-size: .95rem; }

/* ---------- 結び ---------- */
.outro {
  width: 70vw;
  min-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}

.outro_sign {
  font-family: var(--font-latin);
  font-weight: 200;
  font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing: .3em;
}

.outro_note {
  font-family: var(--font-ja);
  font-size: .9rem;
  letter-spacing: .2em;
  color: var(--ink-soft);
}

.outro_btn {
  margin-top: 2rem;
  font-size: .85rem;
  letter-spacing: .15em;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--ink);
  transition: opacity .3s;
}

.outro_btn:hover { opacity: .5; }

/* ---------- 種類での絞り込み ---------- */
#filter {
  position: fixed;
  top: 1.7rem;
  left: 1.8rem;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  padding: .5rem 1.1rem;
  max-width: min(60vw, 640px);
  background: rgba(247, 245, 241, .85);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: .08em;
}

.filter_btn {
  color: var(--ink-soft);
  padding: 3px 0;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
  white-space: nowrap;
}

.filter_btn:hover { color: var(--ink); }

.filter_btn.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* 作品一覧の上に出す操作の案内。上のボタン列と作品のあいだの帯に置く */
#workHint {
  position: fixed;
  top: 12.5vh;
  left: 5vw;
  right: 5vw;
  z-index: 20;
  font-family: var(--font-ja);
  font-size: .86rem;
  letter-spacing: .08em;
  line-height: 1.7;
  text-align: center;
  color: var(--ink);
  pointer-events: none;
}

/* 狭い画面でも句の途中で折り返さない */
#workHint span { display: inline-block; }
#workHint.is-away { opacity: 0; }
#workHint b { font-weight: inherit; }

/* 作品一覧の下の「何点目か」。作品と下端(文字サイズ・進捗バー)のあいだに置く */
#workCount {
  position: fixed;
  left: 5vw;
  right: 5vw;
  bottom: 10vh;
  z-index: 20;
  /* 分子を右寄せの左半分、「/ 154」を左寄せの右半分に置く。分子の桁が変わっても「/ 154」は動かない */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  font-family: var(--font-latin);
  font-weight: 200;
  font-size: 1.5rem;
  letter-spacing: .1em;
  line-height: 1;
  pointer-events: none;
}

#workCount.is-away { opacity: 0; }
#workCountNum { text-align: right; font-variant-numeric: tabular-nums; }

.work_count_total {
  font-size: .85rem;
  color: var(--ink-soft);
  margin-left: .5rem;
}

/* 表紙が開くまでは操作UIを隠す */
#infoBtn, #menuBtn, #filter, #fontSize, #filterBtn, #workHint, #workCount {
  transition: opacity .5s ease;
}

body.on-cover #infoBtn,
body.on-cover #menuBtn,
body.on-cover #filter,
body.on-cover #fontSize,
body.on-cover #workHint,
body.on-cover #workCount,
body.on-cover #filterBtn {
  opacity: 0;
  pointer-events: none;
}

/* 虫眼鏡ボタン(スマホ専用・PCでは非表示) */
#filterBtn {
  display: none;
  position: fixed;
  top: .9rem;
  left: .9rem;
  z-index: 40;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--ink);
  background: rgba(247, 245, 241, .9);
  border: 1px solid var(--line);
  border-radius: 50%;
}

/* ---------- メニュー ---------- */
#menuBtn {
  position: fixed;
  top: 1.4rem;
  right: 1.8rem;
  z-index: 40;
  font-size: .85rem;
  letter-spacing: .3em;
  text-indent: .3em; /* letter-spacingの右余白ぶんを相殺 */
  padding: .65rem 1.2rem;
  color: var(--ink);
  background: rgba(247, 245, 241, .85);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background .3s, border-color .3s;
}

#menuBtn:hover {
  background: rgba(247, 245, 241, 1);
  border-color: var(--ink);
}

#drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(360px, 86vw);
  z-index: 50;
  background: rgba(247, 245, 241, .97);
  box-shadow: -30px 0 60px -30px rgba(60,50,40,.25);
  padding: 5.5rem 2.4rem 3rem;
  transform: translateX(102%);
  transition: transform .55s cubic-bezier(.22,.8,.3,1);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  overflow-y: auto;
}

#drawer.is-open { transform: translateX(0); }

#drawerClose {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  font-size: 1.3rem;
  font-weight: 200;
  padding: .5rem;
}

.drawer_nav {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* 項目名は1行で。スマホ幅・文字「大きく」でも「作品のお申し込み」が収まる大きさにしている */
.drawer_link {
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: .1em;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: color .3s;
}

.drawer_link:hover { color: var(--ink); }

/* 「001 – 020」が折り返さない幅。4列のままだと2行に割れる */
.drawer_years {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
  gap: .7rem 2.2rem;
}

.drawer_year {
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: .9rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
  transition: color .3s;
  text-align: left;
  white-space: nowrap;
}

.drawer_year:hover { color: var(--ink); }

#drawerScrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(43, 42, 40, .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
}

#drawerScrim.is-open { opacity: 1; pointer-events: auto; }

/* ---------- 詳細オーバーレイ ---------- */
#detail, #info, #apply {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(247, 245, 241, .96);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}

#detail.is-open, #info.is-open, #apply.is-open {
  opacity: 1;
  pointer-events: auto;
}

.detail_stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 6vh 10vw 8vh;
}

.detail_img {
  max-width: min(78vw, 1200px);
  max-height: 72vh;
  box-shadow: 0 30px 80px -30px rgba(60, 50, 40, .4);
  background: #e7e4de;
  opacity: 0;
  transform: scale(.985);
  transition: opacity .7s ease, transform .7s ease;
}

#detail.is-open .detail_img.is-shown {
  opacity: 1;
  transform: scale(1);
}

.detail_caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
}

.detail_caption_row {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
}

.detail_spec {
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: .76rem;
  letter-spacing: .1em;
  color: var(--ink); /* サイズも金額と同じ濃さ */
}

.detail_spec b { font-weight: 400; }

.detail_price {
  display: inline-block;
  margin-top: .45rem;
  font-weight: 400;
  letter-spacing: .12em;
}

html.font-large .detail_spec { font-size: .95rem; }

.detail_title {
  font-family: var(--font-ja);
  font-size: 1.1rem;
  letter-spacing: .2em;
}

.detail_title .work_no { font-size: .7em; margin-right: 1.3em; }

.detail_meta {
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: .78rem;
  letter-spacing: .15em;
  color: var(--ink-soft);
}

.detail_counter {
  position: absolute;
  top: 6vh;
  right: 5vw;
  font-family: var(--font-latin);
  font-weight: 200;
  font-size: 2rem;
  letter-spacing: .1em;
}

.detail_counter_total {
  font-size: .9rem;
  color: var(--ink-soft);
  margin-left: .5rem;
}

.detail_nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  font-weight: 100;
  padding: 2rem 1.4rem;
  color: var(--ink);
  opacity: .55;
  transition: opacity .3s;
}

.detail_nav:hover { opacity: 1; }
.detail_nav-prev { left: 1.5vw; }
.detail_nav-next { right: 1.5vw; }
.detail_nav[disabled] { opacity: .12; cursor: default; }

.detail_back {
  position: absolute;
  right: 5vw;
  bottom: 6vh;
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: .2em;
  display: flex;
  align-items: center;
  gap: .8rem;
  transition: opacity .3s;
}

.detail_back:hover { opacity: .5; }
.detail_back_x { font-size: 1.2rem; }

/* ---------- 申込みCTA ---------- */
#infoBtn {
  position: fixed;
  top: 1.4rem;
  right: 9.6rem; /* メニューボタンの左に並べる */
  z-index: 40;
  font-family: var(--font-ja);
  font-size: .85rem;
  letter-spacing: .18em;
  text-indent: .18em;
  padding: .65rem 1.4rem;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  transition: opacity .3s;
}

#infoBtn:hover { opacity: .78; }

.detail_apply {
  position: absolute;
  left: 5vw;
  bottom: 6vh;
  z-index: 2;
  font-family: var(--font-ja);
  font-size: .9rem;
  letter-spacing: .16em;
  padding: .7rem 1.5rem;
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
  transition: opacity .3s;
}

.detail_apply:hover { opacity: .78; }

/* 展覧会案内の下に置く申込み導線 */
.info_cta {
  margin-top: 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 1rem;
}

.info_cta_note {
  font-family: var(--font-ja);
  font-size: .8rem;
  line-height: 1.9;
  color: var(--ink-soft);
}

.info_cta_btn {
  font-family: var(--font-ja);
  font-size: .85rem;
  letter-spacing: .16em;
  text-indent: .16em;
  padding: .7rem 1.5rem;
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
  transition: opacity .3s;
}

.info_cta_btn:hover { opacity: .78; }

/* ---------- 申込みフォーム ---------- */
/* フォームはスクロールするので、閉じるボタンが文字に重なっても読めるようにする */
#apply .info_close {
  background: rgba(247, 245, 241, .92);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.apply_inner {
  height: 100%;
  overflow-y: auto;
  padding: 10vh 8vw 12vh;
  display: flex;
  justify-content: center;
}

.apply_form {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.apply_title {
  font-family: var(--font-ja);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 500;
  letter-spacing: .2em;
}

.apply_lead {
  font-family: var(--font-ja);
  font-size: .88rem;
  line-height: 2;
  letter-spacing: .06em;
}

.apply_rule {
  border: 1px solid var(--line);
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-family: var(--font-ja);
  font-size: .8rem;
  line-height: 1.9;
  color: var(--ink);
}

.apply_rule b { font-weight: 500; }

.apply_field { display: flex; flex-direction: column; gap: .5rem; }

.apply_label {
  font-family: var(--font-ja);
  font-size: .82rem;
  letter-spacing: .1em;
  display: flex;
  align-items: center;
  gap: .7rem;
}

.apply_label em {
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .08em;
  padding: .15rem .5rem;
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
}

.apply_label em.is-optional { color: var(--ink-soft); background: none; border: 1px solid var(--line); }

.apply_form input, .apply_form textarea {
  width: 100%;
  font-family: var(--font-ja);
  font-size: .95rem;
  color: var(--ink);
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .7rem .9rem;
  transition: border-color .3s;
}

.apply_form input:focus, .apply_form textarea:focus { outline: none; border-color: var(--ink); }
.apply_form input.is-error, .apply_form textarea.is-error { border-color: #b4483c; }
.apply_form textarea { resize: vertical; line-height: 1.8; }

.apply_money { position: relative; display: block; }
.apply_money input { padding-right: 2.6rem; }
.apply_money i {
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: .85rem;
  color: var(--ink-soft);
}

.apply_hint {
  font-family: var(--font-ja);
  font-size: .74rem;
  line-height: 1.7;
  color: var(--ink);
}

.apply_hint.is-error { color: #b4483c; }

.apply_row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* ハガキの区切り(申込者 / 1. 作品 / 2. 引き渡し / 3. お支払い) */
.apply_fields { display: flex; flex-direction: column; gap: 2.4rem; }
.apply_fields[hidden], .apply_confirm[hidden], .apply_back[hidden] { display: none; }

.apply_section {
  border: 0;
  margin: 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-width: 0;
}

.apply_heading {
  padding: 0;
  font-family: var(--font-ja);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .14em;
  display: flex;
  align-items: center;
  gap: .7rem;
  /* fieldset の legend は枠線の上に乗るので、通常の見出しとして並べ直す */
  float: left;
  width: 100%;
}

.apply_heading + * { clear: both; }
.apply_heading > span { font-family: var(--font-latin); }
.apply_heading em {
  font-style: normal;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .08em;
  padding: .15rem .5rem;
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
}

/* 作品番号と金額の3行 */
.apply_works {
  display: grid;
  grid-template-columns: 1.6rem 7.5rem 1fr;
  column-gap: 1rem;
  row-gap: .4rem;
  align-items: center;
}
.apply_works_head, .apply_work { display: contents; }
.apply_works_head span {
  font-family: var(--font-ja);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
}
.apply_work_no {
  font-size: .85rem;
  color: var(--ink-soft);
  text-align: center;
}
.apply_work_info {
  grid-column: 2 / -1;
  min-height: 1.2em;
  margin-bottom: .5rem;
  white-space: pre-line;
}

/* 単一選択(□にレ印の代わり) */
.apply_choices { display: flex; flex-wrap: wrap; gap: .6rem; }
.apply_choice { position: relative; }
.apply_choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.apply_choice span {
  display: inline-block;
  font-family: var(--font-ja);
  font-size: .86rem;
  letter-spacing: .06em;
  padding: .6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  transition: background .3s, color .3s, border-color .3s;
  cursor: pointer;
}
.apply_choice input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.apply_choice input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 2px; }
.apply_choices.is-error .apply_choice span { border-color: #b4483c; }

/* 郵便番号 + 住所 */
.apply_addr { display: grid; grid-template-columns: 9rem 1fr; gap: .8rem; }
.apply_zip { position: relative; display: block; }
.apply_zip i {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: .85rem;
  color: var(--ink-soft);
}
.apply_form .apply_zip input { padding-left: 2.1rem; }

/* 確認画面 */
.apply_confirm { display: flex; flex-direction: column; gap: 1.2rem; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.apply_summary {
  display: grid;
  grid-template-columns: 10rem 1fr;
  font-family: var(--font-ja);
  font-size: .86rem;
  line-height: 1.9;
}
.apply_summary dt, .apply_summary dd {
  margin: 0;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
}
.apply_summary dt { color: var(--ink-soft); font-size: .78rem; letter-spacing: .08em; }
.apply_summary dd { white-space: pre-line; }

/* 送信後のお礼。フォームの中身はすべて隠し、これだけを上から見せる */
.apply_form.is-done > :not(.apply_done) { display: none; }
.apply_done[hidden] { display: none; }
.apply_done {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding-top: 4vh;
  text-align: center;
  outline: none;
}
.apply_done_mark {
  width: 3.6rem;
  height: 3.6rem;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-size: 1.5rem;
}
.apply_done_title {
  font-family: var(--font-ja);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 500;
  letter-spacing: .2em;
}
.apply_done_text {
  font-family: var(--font-ja);
  font-size: .9rem;
  line-height: 2;
  letter-spacing: .06em;
}
.apply_done_text span { display: inline-block; } /* 狭い画面でも句の途中で折り返さない */
.apply_done_small { font-size: .78rem; color: var(--ink-soft); }
.apply_done_small a { border-bottom: 1px solid var(--line); }
.apply_done .apply_summary { text-align: left; }

.apply_actions { display: flex; gap: .8rem; }
.apply_actions .apply_submit { flex: 1; }
.apply_back {
  margin-top: .5rem;
  font-family: var(--font-ja);
  font-size: .9rem;
  letter-spacing: .14em;
  padding: 1rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .3s;
}
.apply_back:hover { border-color: var(--ink); }

.apply_privacy {
  font-family: var(--font-ja);
  font-size: .74rem;
  line-height: 1.9;
  color: var(--ink-soft);
}

.apply_privacy a { border-bottom: 1px solid var(--line); }

.apply_submit {
  margin-top: .5rem;
  font-family: var(--font-ja);
  font-size: .95rem;
  letter-spacing: .2em;
  text-indent: .2em;
  padding: 1rem;
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
  transition: opacity .3s;
}

.apply_submit:hover { opacity: .78; }
.apply_submit:disabled { opacity: .4; }

.apply_status {
  font-family: var(--font-ja);
  font-size: .84rem;
  line-height: 1.9;
  text-align: center;
  min-height: 1.6em;
}

.apply_status.is-error { color: #b4483c; }

/* ---------- INFO ---------- */
.info_close {
  position: absolute;
  top: 2rem;
  right: 2.4rem;
  font-size: 1.5rem;
  font-weight: 200;
  padding: .6rem;
  z-index: 2;
}

.info_inner {
  height: 100%;
  overflow: hidden; /* 外枠は動かさず、スクロールは .info_body に任せる */
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  grid-template-rows: 1fr auto; /* 上段にロゴ、下段に申込み導線 */
  align-items: center;
  column-gap: 4vw;
  padding: 8vh 8vw;
}

/* 申込みは左列に置く。左列はスクロールしないので、開いた時点で必ず目に入る */
.info_logo { grid-area: 1 / 1; align-self: end; }
.info_body { grid-area: 1 / 2 / -1 / auto; }
.info_cta { grid-area: 2 / 1; align-self: start; }

.info_logo {
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  letter-spacing: .38em;
  text-align: left;
}

.info_body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 1.2rem; /* スクロールバーのぶんを空ける */
}

/* 紙の色に対して既定のスクロールバーは重いので細く控えめにする */
.info_body, .apply_inner {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.info_body::-webkit-scrollbar, .apply_inner::-webkit-scrollbar { width: 3px; }
.info_body::-webkit-scrollbar-track, .apply_inner::-webkit-scrollbar-track { background: transparent; }

.info_body::-webkit-scrollbar-thumb, .apply_inner::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}

.info_name {
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: .25em;
}

.info_name_en {
  display: block;
  margin-top: .7rem;
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: .85rem;
  letter-spacing: .35em;
  color: var(--ink-soft);
}

.info_text {
  font-family: var(--font-ja);
  font-size: .92rem;
  line-height: 2.2;
  letter-spacing: .1em;
}

.info_placeholder {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-ui);
  font-size: .72rem;
  color: var(--ink-soft);
}

.info_list { display: flex; flex-direction: column; gap: .8rem; }

.info_row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  font-size: .88rem;
  letter-spacing: .08em;
}

.info_row dt { font-family: var(--font-latin); font-weight: 300; color: var(--ink-soft); }
.info_row a { border-bottom: 1px solid var(--line); transition: border-color .3s; }
.info_row a:hover { border-color: var(--ink); }

/* ---------- 進捗バー(画面最下部・全幅) ---------- */
/* 見た目は2pxの線のまま、掴めるように当たり判定だけ広げる */
#progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  z-index: 30;
  cursor: grab;
  touch-action: none;
}

#progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--line);
  transition: height .2s ease;
}

#progress.is-grabbing { cursor: grabbing; }
#progress:hover::before, #progress.is-grabbing::before { height: 4px; }

#progressFill {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  height: 2px;
  width: 0;
  background: var(--ink);
  transition: height .2s ease;
}

#progress:hover #progressFill, #progress.is-grabbing #progressFill { height: 4px; }

#progressLabel {
  position: absolute;
  bottom: 12px;
  left: 0;
  transform: translateX(-50%);
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
  white-space: nowrap;
  pointer-events: none;
  padding: 0;
  border-radius: 999px;
  transition: color .2s ease, background .2s ease, padding .2s ease, bottom .2s ease;
}

/* 触れているあいだは数値を座布団に載せて、掴めることを示す */
#progress:hover #progressLabel, #progress.is-grabbing #progressLabel {
  bottom: 16px;
  color: var(--paper);
  background: var(--ink);
  padding: .32rem .8rem;
}

/* ---------- 文字サイズ切り替え ---------- */
#fontSize {
  position: fixed;
  left: 28px;
  bottom: 34px;
  z-index: 30;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px; /* px固定:「大きく」でもこのボタン自体は拡大しない */
  letter-spacing: .1em;
}

.fontsize_btn {
  color: var(--ink-soft);
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}

.fontsize_btn:hover { color: var(--ink); }

.fontsize_btn.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.fontsize_sep { color: var(--line); }

/* 「大きく」選択時は文字だけ拡大(remベースの文字が対象) */
html.font-large { font-size: 122%; }

/* ---------- カスタムカーソル ---------- */
#cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--ink);
  z-index: 100;
  pointer-events: none;
  transition: width .25s, height .25s, margin .25s, background .25s, opacity .3s;
  opacity: 0;
}

body.has-cursor #cursor { opacity: 1; }

#cursor.is-hover {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  background: transparent;
  border: 1px solid var(--ink);
}

/* 作品の上では白い丸に「詳細」と出す(押すと何が起きるかを言葉で示す) */
#cursor.is-label {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  display: grid;
  place-content: center;   /* 丸より文字が広い途中でも左右中央に置く */
  background: #fff;
  border: 0;
  box-shadow: 0 2px 10px rgba(60, 50, 40, .22);
  font-family: var(--font-ja);
  font-size: .82rem;
  letter-spacing: .12em;
  text-indent: .12em;
  color: var(--ink);
  /* 丸が広がる途中で文字が1字ずつ折り返して縦書きに見えないように。はみ出しは丸で切る */
  white-space: nowrap;
  overflow: hidden;
}

body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }

/* ---------- モバイル ---------- */
@media (max-width: 720px) {
  /* 上のボタン3つ(虫眼鏡・展覧会のご案内・メニュー)は上端と高さ(40px)をそろえる */
  #menuBtn, #infoBtn {
    top: .9rem;
    height: 40px;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  #menuBtn {
    right: .9rem;
    font-size: .78rem;
    padding-left: 1rem;
    padding-right: 1rem;
    backdrop-filter: none; /* 描画負荷を下げる */
  }
  /* スマホは文字サイズの切り替えを出さない(常に「ふつう」) */
  #fontSize { display: none; }

  /* 絞り込みは虫眼鏡ボタン+開閉パネルに */
  #filterBtn { display: flex; }
  #filter {
    display: none;
    top: 3.6rem;
    left: .9rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    padding: .9rem 1.3rem;
    border-radius: 18px;
    backdrop-filter: none;
    background: rgba(247, 245, 241, .97);
    box-shadow: 0 10px 30px -12px rgba(60, 50, 40, .3);
    max-width: none;
  }
  #filter.is-open { display: flex; }

  /* 縦画面では表紙の絵を少し拡大し、画像内の展覧会キャプション等を見切る */
  .hero_img { transform: scale(1.28); }

  /* スクロールを軽くする:重い影・ホバー演出を省略 */
  .work_frame {
    box-shadow: 0 1px 2px rgba(60, 50, 40, .18), 6px 8px 16px -8px rgba(60, 50, 40, .25);
    transition: none;
  }
  .work:hover .work_frame { transform: none; }
  .hero { box-shadow: 14px 0 34px -14px rgba(60, 50, 40, .3); }
  .hero_logo { gap: 5vw; }
  .hero_logo_strong { font-size: 10vw; }
  .hero_logo_sub { font-size: 4vw; }
  .intro { width: 100vw; grid-template-columns: 1fr; gap: 5vw; padding-top: 16vh; align-items: start; }
  .intro_title { top: 5vh; }
  .intro_body { margin-top: 0; padding-left: 1.4rem; gap: 1.2rem; }
  .intro_text { font-size: .8rem; line-height: 1.9; }
  .intro_index { display: none; }

  /* 申込みフォームは1カラムに */
  .apply_inner { padding: 9vh 6vw 12vh; }
  .apply_row2 { grid-template-columns: 1fr; gap: 1.5rem; }
  .apply_addr { grid-template-columns: 1fr; }
  .apply_works { grid-template-columns: 1.2rem 5.5rem 1fr; column-gap: .6rem; }
  .apply_summary { grid-template-columns: 1fr; }
  .apply_summary dt { padding-bottom: 0; border-bottom: 0; }
  #infoBtn { right: 8.2rem; padding-left: 1rem; padding-right: 1rem; letter-spacing: .1em; text-indent: .1em; }
  /* 詳細: Back を右上・番号を左上に移し、空いた下に申し込みボタンを置く。縦長の絵でも説明とボタンのあいだを空ける */
  .detail_apply { left: 50%; transform: translateX(-50%); bottom: 4.5vh; white-space: nowrap; }
  .chunkmark { width: 66vw; min-width: 0; padding-left: 11vw; }
  .work { margin: 0 9vw; }
  .detail_stage { padding: 10vh 6vw 15vh; }
  .detail_img { max-width: 88vw; max-height: 58vh; }
  .detail_nav { display: none; }
  .detail_counter { font-size: 1.4rem; top: 4vh; left: 6vw; right: auto; }
  .detail_back { right: 6vw; top: 4vh; bottom: auto; }
  /* 1カラムのときは ロゴ → 展覧会情報 → 申込み の順に流す */
  .info_inner { display: flex; flex-direction: column; align-items: start; padding-top: 12vh; overflow-y: auto; }
  /* 縦flex + height:100% だと中身が縮められて下の要素に重なるので、縮小させない */
  .info_inner > * { flex-shrink: 0; }
  .info_body { max-height: none; overflow: visible; padding-right: 0; }
  .info_cta {
    align-items: flex-start;
    text-align: left;
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
    width: 100%;
  }
  .outro { width: 100vw; min-width: 0; }
  #fontSize { left: 1rem; bottom: 1rem; }
}