/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --blue:     #1a3a6b;
  --blue-dk:  #0d2145;
  --blue-lt:  #3560a8;
  --blue-pale:#d5e0f2;
  --white:    #ffffff;
  --off:      #f4f7fd;
  --ink:      #0e1a3a;
  --ink-lt:   #e8eef8;
  --muted:    rgba(255,255,255,0.65);
  --border:   rgba(255,255,255,0.18);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--ink);
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 15px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(255,255,255,0.50);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.45s ease, opacity 0.45s ease;
  display: flex;
  align-items: center;
}

header.visible {
  transform: translateY(0);
  opacity: 1;
  background: rgba(255,255,255,0.92);
}

.header-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
  height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0;
}

.header-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  margin-right: 80px;
}

.logo-ja {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 1.45rem;
  letter-spacing: 0.22em;
  color: var(--ink);
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.logo-en {
  position: absolute;
  left: 100%;
  margin-left: 28px;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  /* 2026-08-31：名前（Isao Toshimori）は本人指示で全箇所とも斜体。
     Shippori Mincho に本物の斜体は無いので、年号などと同じ疑似斜体になる */
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--ink);
  opacity: 0.45;
  white-space: nowrap;
  z-index: 0;
  top: 50%;
  transform: translateY(-50%);
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 60px;
}

.header-nav a {
  display: block;
  position: relative;
  padding: 0 34px;
  font-family: 'Shippori Mincho', 'Noto Serif JP', 'EB Garamond', serif;
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: #8a8a96;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
  line-height: 72px;
}

.header-nav a:hover { color: var(--blue); }

.nav-en {
  display: inline-block;
  transition: opacity 0.25s;
}

.nav-ja {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  opacity: 0;
  transition: opacity 0.25s;
  white-space: nowrap;
  pointer-events: none;
}

.header-nav a:hover .nav-en { opacity: 0; }
.header-nav a:hover .nav-ja { opacity: 1; }

.header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  justify-content: flex-end;
}

.hdr-social {
  display: flex;
  gap: 24px;
  align-items: center;
}

.hdr-social a {
  color: #8a8a96;
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  align-items: center;
}

.hdr-social a:hover { color: var(--blue); }

.hdr-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.hdr-lang {
  font-size: 0.65rem;
  color: #8a8a96;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hdr-lang button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.65rem;
  font-family: inherit;
  color: #8a8a96;
  padding: 0;
  transition: color 0.2s;
}

.hdr-lang button.active,
.hdr-lang button:hover { color: var(--blue); }

.hdr-lang .sep { color: #ccc; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  background: var(--white);
}

.slide picture {
  display: contents;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 3.5s ease-in-out;
  background: var(--white);
}

.slide.active { opacity: 1; }

.slide img {
  width: min(680px, 72vw);
  height: min(680px, 72vh);
  object-fit: contain;
  display: block;
  will-change: transform;
}

.slide.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@keyframes kenburns-cover {
  from { transform: scale(1.0);  }
  to   { transform: scale(1.12); }
}

/* 2026-08-28：ease-in-out の alternate（往復）をやめた。
   往復だと20秒ごとに端で減速して一度止まり、折り返す。1枚の表示は
   10秒＋フェード3.5秒＝13.5秒なので、その折り返しに当たると
   画面の中で止まって見えていた。
   linear の片道1回きり（17秒）に変えて、表示されている13.5秒のあいだは
   常に等速で動き続け、動きが終わる前にフェードで消えるようにした。
   スライドが表に出るたびに JS が頭から掛け直すので、途中で終わらない */
.slide.cover img {
  animation: kenburns-cover 17s linear forwards;
}

/* 2026-08-28：全部「寄る」動きだったので、1枚おきに「引く」動きにした。
   reverse は 1.12 → 1.00 の向きで走る。動き出しと終わりの大きさが
   隣どうしで逆になるので、寄る → 引く → 寄る … と交互に見える */
.slide.cover.kb-out img {
  animation-direction: reverse;
}

@keyframes kenburns-loop {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.slide:not(.cover) img {
  animation: kenburns-loop 120s linear infinite !important;
}

.hero-name-overlay {
  position: absolute;
  bottom: 48px;
  left: 54px;
  z-index: 2;
  pointer-events: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.hero-name-overlay .name-ja {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 1.9rem;
  letter-spacing: 0.22em;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 8px;
  margin-left: 3px;
  display: block;
  white-space: nowrap;
}

.hero-name-overlay .name-en {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  /* 2026-08-31：上下二段の英字。フッターと同じ 0.32倍にそろえる。
     和文 1.9rem × 0.32 ＝ 0.61rem */
  font-style: italic;
  font-size: 0.61rem;
  letter-spacing: 0.24em;
  color: #888;
  white-space: nowrap;
  display: block;
  /* 2026-08-31：上下二段のとき、字間（letter-spacing）が最後の文字の
     後ろにも入るぶん右に寄って見えるので、英字だけ左へずらす（1px ＋ 1px ＝ 2px） */
  position: relative;
  left: -2px;
}

#hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 220px;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.85) 70%, #ffffff 100%);
  pointer-events: none;
  z-index: 1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WAVE DIVIDER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wave {
  height: 4px;
  margin: 80px 0;
  background: linear-gradient(
    90deg,
    var(--white) 0%,
    var(--blue-pale) 12%,
    var(--blue-lt)  32%,
    var(--blue)     50%,
    var(--blue-lt)  68%,
    var(--blue-pale) 88%,
    var(--white) 100%
  );
  opacity: 0;
  transform-origin: center;
  transform: scaleX(0);
  transition: opacity 1.6s ease, transform 1.6s ease;
}

.wave.revealed {
  opacity: 0.72;
  transform: scaleX(1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION SHARED
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sec-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 160px 24px 220px;
}

.sec-heading {
  text-align: center;
  font-family: 'Crimson Pro', 'Noto Serif JP', 'EB Garamond', serif;
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--blue);
  margin-bottom: 80px;
  letter-spacing: 0.25em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONCEPT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* overflow は clip（hidden だと中の position:sticky が効かなくなる）。
   2026-08-28：横だけ clip にした。下の薄いグラウカスが3つ目のボックスの
   下端をまたぐので、両方向を切ると円の下側が水平にスパッと切れてしまう。
   clip は hidden と違い片方の軸だけ visible にできる */
#concept { background: var(--white); position: relative; overflow-x: clip; }

#concept .sec-wrap { position: relative; z-index: 1; padding-top: 300px; padding-bottom: 140px; }

/* 3つのブロックの入れ物。薄いグラウカスはこの箱を基準に置く。
   基準を #concept ではなくここにしているので、見出し・リード文の高さに
   関係なく「3つのボックスをひとつと見立てた、その上下の中央」に来る */
.concept-stage { position: relative; }

/* 薄いグラウカス。2026-08-28：3つのボックスをひとまとまりと見立て、
   その上下の中央に1枚だけ、画面の右端から。
   right は親幅に関係なく画面の右端が基準 */
.concept-bg-photo {
  position: absolute;
  top: 50%;
  right: calc(50% - 50vw);
  transform: translate(50%, -50%);
  width: min(64vw, 1400px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  z-index: 0;
  opacity: 0.06;
  pointer-events: none;
}

.concept-bg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 2026-08-28：150秒 → 400秒。回っていることが分からないくらい遅く */
  animation: kenburns-loop 400s linear infinite;
}

@media (max-width: 900px) {
  /* 2026-09-10：90 → 170vw。円の中心は画面の右端にあるので左半分だけが見える。
     390pxで直径351 → 663px になり、画面の右半分いっぱいに広がる。
     上限700pxは据え置き。これを超えるとコンセプトのセクションから
     下へはみ出して次のGalleryに重なる（#concept は overflow-y: visible） */
  .concept-bg-photo { width: min(170vw, 700px); opacity: 0.05; }
}

#concept .sec-heading {
  color: var(--blue);
  margin-bottom: 80px;
  font-size: 2rem;
  letter-spacing: 0.18em;
  font-weight: 300;
  text-align: left;
  margin-left: -190px;
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 1s ease, transform 1s ease;
}

#concept .sec-heading.revealed {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 900px) {
  #concept .sec-heading { margin-left: 0; text-align: center; margin-bottom: 40px; }
}

.concept-lead {
  writing-mode: horizontal-tb;
  font-family: 'Shippori Mincho', 'Noto Serif JP', 'EB Garamond', serif;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.9;
  letter-spacing: 0.06em;
  text-align: left;
  /* リード文と本文①のあいだ。ブロック間（108px）よりひとまわり大きく取って、
     この一文を独立させる。画面の高さでは変えず一定 */
  margin-bottom: 120px;
  margin-left: -190px;
  opacity: 0;
  transition: opacity 1s ease;
}

.concept-lead.revealed {
  opacity: 1;
}

@media (max-width: 900px) {
  .concept-lead { margin-left: 0; }
}

 /* 本文の入れ物。Concept見出しの左端から本文の右端までの軸いっぱいに広げ、
   その中で3つのブロックを右・左・右に振り分ける。左右のマージンは
   見出し・リード文と同じ式なので、左端はぴたりと揃う */
.concept-body {
  writing-mode: horizontal-tb;
  height: auto;
  font-size: 1.1rem;
  color: #3d3d48;
  line-height: 2.4;
  letter-spacing: 0.08em;
  /* <br> で1行ずつ改行しているので両端揃えにはしない（どの行も
     「最後の行」扱いになるうえ、効くと短い行が引き伸ばされる） */
  text-align: left;
  display: block;
}

/* ブロック3つ。--right は右端を本文の軸に、--left は左端を見出しの軸に。
   幅は一番長い行にぴったり合わせる（max-content）ので、右寄せのブロックは
   最後の1文字まで軸に届く。長い英文は740pxで頭打ちにして折り返す */
.concept-blk {
  width: max-content;
  max-width: min(740px, 100%);
  margin-bottom: clamp(80px, 12vh, 180px);
}
.concept-blk--right { margin-left: auto;  margin-right: 0; }
.concept-blk--left  { margin-left: 0;     margin-right: auto; }
.concept-blk:last-child { margin-bottom: 0; }

/* うっすら出てくる。ブロックごとに入ってくる向きを変える
   （①右から ②左から ③下から）。.revealed は JS が付ける */
.concept-body p {
  opacity: 0;
  transition: opacity 1.6s ease, transform 1.6s ease;
}

.concept-in--right { transform: translateX(90px); }
.concept-in--left  { transform: translateX(-90px); }
.concept-in--up    { transform: translateY(64px); }

.concept-body p.revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .concept-body { margin-left: 0; margin-right: 0; }
  .concept-blk  { width: 100%; }
}

.concept-body [lang="en"] { display: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GALLERY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#gallery { background: var(--white); overflow: hidden; }

#gallery .sec-heading {
  margin-bottom: 32px;
  font-size: 2rem;
  text-align: left;
  margin-left: min(calc(50vw - 570px), 190px);
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 1s ease, transform 1s ease;
}

#gallery .sec-heading.revealed {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 900px) {
  /* margin-bottom はファイル末尾の余白スケール(--sp-b)で一括管理 */
  #gallery .sec-heading { margin-left: 0; text-align: center; }
}

/* 流れる写真の下〜Atelierまでの余白（もとは index.html のインラインstyle） */
.gallery-marquee-wrap { padding: 0 0 320px; }

.gallery-marquee {
  overflow: hidden;
  width: 100%;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.gallery-track {
  display: flex;
  gap: 0;
  width: max-content;
  cursor: grab;
  user-select: none;
  will-change: transform;
}

.gallery-track.dragging { cursor: grabbing; }

.gallery-track img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none; /* 画像自体のドラッグを無効化（クリックは.g-itemで拾う） */
}

.gallery-marquee { touch-action: pan-y; } /* スマホでは縦スクロールを妨げない */

.g-item {
  flex: 0 0 auto;
  width: 480px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.4s ease;
}

.g-item:hover img { transform: scale(1.06); }

.g-cap {
  position: absolute;
  inset: 0;
  background: rgba(22, 60, 160, 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
  padding: 8px;
  text-align: center;
}

.g-item:hover .g-cap { opacity: 1; }

.g-cap-t {
  color: #fff;
  font-size: 0.78rem;
  font-style: italic;
  margin-bottom: 2px;
}

.g-cap-t [lang="en"] { display: none; }

.g-cap-m {
  color: rgba(255,255,255,0.72);
  font-size: 0.64rem;
}

.g-cap-m [lang="en"] { display: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NEWS / BLOG — 左右分割（見開き風・中央寄せ）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#news-blog {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.nb-col {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 100px 30px;
}

.nb-col.nb-news {
  background: var(--white);
  padding-top: 150px;
  padding-bottom: 150px;
}

.nb-col.nb-blog {
  background: var(--white);
  justify-content: center;
  padding: 100px 40px 150px;
}

.nb-inner {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.nb-col-label {
  font-family: 'Crimson Pro', 'Noto Serif JP', 'EB Garamond', serif;
  font-style: normal;
  font-weight: 300;
  font-size: 1.4rem;
  letter-spacing: 0.25em;
  color: var(--blue-lt);
  text-align: center;
  flex: none;
  border-bottom: 2px solid var(--blue);
  padding-bottom: 14px;
  margin: 0;
}
.nb-col.nb-news .nb-col-label { color: var(--blue); font-size: 35px; border-bottom: none; padding-bottom: 0; text-align: left; }

.nb-news .nb-inner {
  max-width: 1200px;
  gap: 32px;
}

.nb-news-row {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.nb-news .nb-list {
  width: 100%;
  max-width: 850px;
  margin-left: auto;
  /* 見出し「News」の横に並ぶので、本文のかたまりを少し下げて重心をずらす。
     900px以下は縦積みになるので下の @media で 0 に戻す */
  margin-top: 40px;
}

.nb-news .nb-cell > div {
  display: flex;
  align-items: baseline;
  gap: 20px;
  width: 100%;
}

.nb-news .nb-date {
  flex: none;
  width: 64px;
  margin-bottom: 0;
}

.nb-blog .nb-inner {
  max-width: 1200px;
  gap: 64px;
}

.nb-blog .nb-col-label {
  text-align: left;
  font-weight: 300;
  font-size: 35px;
  letter-spacing: 0.2em;
  color: var(--ink);
  border-bottom: none;
  padding-bottom: 0;
}

.nb-list {
  flex: 1;
  min-width: 0;
}

.nb-cell {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  min-height: 104px;
  box-sizing: border-box;
  border-bottom: 1px dotted #dde0ea;
}

.nb-news .nb-cell {
  min-height: 114px;
  padding: 30px 0;
}

.nb-news .nb-viewall {
  margin-top: -8px;
}

.nb-blog .nb-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}

.nb-blog .nb-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* 中身の領域を箱の上下中央に取り、その中で写真だけを下端に寄せる。
     上下の padding を揃えてあるので、見出しの中心＝箱の中心になる。
     写真の上端は日付（top:11px）のすぐ下で止まる */
  justify-content: flex-end;
  height: 187px;
  padding: 26px 44px 26px 48px;
  background: rgba(184, 144, 42, 0.04);
  border-top: none;
  border-bottom: none;
  transition: box-shadow 0.55s ease;
}

/* カーソルを乗せると、右下にうっすら金の影が浮かぶ。
   2026-09-10：それまでの「下→右へ伸びるL字の線」をやめてこちらにした。
   x/y を正、spread を負にすることで影を右下だけに出している */
.nb-blog .nb-cell:hover,
.nb-blog .nb-cell:focus-visible {
  box-shadow: 14px 16px 30px -10px rgba(184, 144, 42, 0.38);
}

.nb-blog .nb-cell-body {
  display: flex;
  align-items: center;
  gap: 28px;
  /* 行を中身の領域いっぱいに広げる。こうしないと行の高さが写真の高さに
     なってしまい、見出しが「箱の中央」ではなく「写真の中央」に揃う */
  flex: 1;
}

.nb-blog .nb-date {
  position: absolute;
  top: 11px;
  right: 44px;
  color: #B8902A;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-style: italic;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}

.nb-blog .nb-title {
  flex: 1;
  min-width: 0;
  font-family: 'BIZ UDPGothic', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  line-height: 1.9;
  color: #222222;
}

.nb-blog .nb-thumb {
  width: 200px;
  height: 123px;
  /* 見出しは行の中央、写真だけ行の下端へ */
  align-self: flex-end;
}

.nb-blog .nb-thumb img {
  transition: transform 0.4s ease;
}

.nb-blog .nb-cell:hover .nb-thumb img {
  transform: scale(1.12);
}

.nb-viewall {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  margin-top: -40px;
  text-decoration: none;
  color: var(--ink);
}

.nb-viewall-text {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}

.nb-viewall-text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--blue);
  transition: width 0.35s ease;
}

.nb-viewall:hover .nb-viewall-text::after {
  width: 100%;
}

/* News / Blog：タイトル→記事の順に左からスライドイン */
.nb-reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.nb-reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.nb-col-label.nb-reveal-left { transition-delay: 0s; }
.nb-list.nb-reveal-left { transition-delay: 0.35s; }

.nb-viewall-label {
  font-family: 'Crimson Pro', 'Noto Serif JP', 'EB Garamond', serif;
  font-size: 0.9rem;
  color: #948d7d;
  letter-spacing: 0.04em;
}

.nb-viewall-target {
  font-family: 'Crimson Pro', 'Noto Serif JP', 'EB Garamond', serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink);
  transition: color 0.2s ease;
}

.nb-viewall-arrow {
  font-size: 1.2rem;
  color: #B8902A;
  transition: transform 0.25s ease;
}

.nb-viewall:hover .nb-viewall-target {
  color: var(--blue);
}
.nb-viewall:hover .nb-viewall-arrow { transform: translateX(4px); }

/* Blogの2列グリッドは1セルあたり左右padding92px＋サムネ200px＋見出しの最小幅を
   必要とし、2列だと最低1067px（実測）。それ未満の画面では列が画面幅を超えて
   横スクロールが出るため、セルの見た目は保ったまま1列に落とす。
   2026-09-10：サムネを163→200pxに広げたぶん必要幅が971→1067pxに増えたので、
   境目を1024→1080pxへ引き上げた */
@media (max-width: 1080px) {
  .nb-blog .nb-list { grid-template-columns: 1fr; }
}

/* ━━━ スマホのBlog（2026-09-10に組み替え）━━━
   1列に縦積みになるので、「日付 → 見出し」を左に縦に積み、写真は右端で上下中央。
   ・日付は絶対配置（右上）をやめて見出しのすぐ上へ。間は4px
   ・「日付＋見出し」のかたまりの中心と、写真の中心が、どちらも箱の中心に来る
   ・写真だけ流れから外して絶対配置にしてある。流れに置くと写真の高さが行を
     押し広げ、日付と見出しが20px離れてしまうため。右側には写真のぶんの
     padding を確保している
   ・写真の幅 min(180px, 42vw) は、狭い端末ほど一緒に縮んで見出しを潰さないため */
@media (max-width: 768px) {
  .nb-blog .nb-list { grid-template-columns: 1fr; gap: 22px 18px; }

  /* 「11 白洲フェスティバル概観」は word-break: auto-phrase でひとかたまり扱いになり、
     約200px を要求する。写真のぶんの padding と合わせるとマスの最小幅が列を超え、
     481〜768px で横スクロールが出ていた（481pxで実測+3px）。
     グリッドの 1fr が最小幅を下回れるようにし、どうしても入らない語だけ折り返す */
  .nb-blog .nb-cell { min-width: 0; }
  .nb-blog .nb-title { overflow-wrap: anywhere; }

  .nb-blog .nb-cell {
    /* 写真の幅。3つの小さいほうを採る。
         180px  … これ以上は大きくしない
         42vw   … 画面が狭くなったら一緒に縮む
         100vw - 225px … 見出しの列を必ず残すための下限。日付「2026.08.26」は
                         65px 必要で折り返せないため、これを下回ると箱が
                         画面外まで広がり横スクロールが出る（320pxで実測+15px） */
    --pic: min(180px, 42vw, calc(100vw - 225px));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* 素の .nb-cell が gap:16px を持っており、これが日付と見出しの間に入る */
    gap: 0;
    height: auto;
    min-height: 150px;
    padding: 20px calc(20px + var(--pic) + 16px) 20px 20px;
  }

  /* 中の見出しと写真を、箱の直接の子として並べる */
  .nb-blog .nb-cell-body { display: contents; }

  .nb-blog .nb-date {
    position: static;
    margin: 0 0 4px;
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .nb-blog .nb-title {
    font-size: 0.95rem;
    line-height: 1.6;
    /* 見出しそのものを箱の上下中央に置く。上に日付（高さ 0.8rem×1.2 ＋ 下margin 4px）が
       あるぶん見出しが下へ寄るので、同じ量を下に足して打ち消している */
    margin-bottom: calc(0.8rem * 1.2 + 4px);
  }

  .nb-blog .nb-thumb {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: var(--pic);
    height: auto;
    aspect-ratio: 200 / 123;
  }
}

/* ━━━ 560px以下は二段（2026-09-10）━━━
   横並びのままだと見出しの列が90pxしか取れず、
   「12 榎倉康二氏の死去　榎倉康二氏の言葉」が3〜4行に割れていた。
   上の段に「日付＋見出し」、下の段に写真を箱の幅いっぱいで置く。
   見出しが横幅を全部使えるので最大2行に収まり、写真も270px幅と大きく出る。
   境目を480→560pxにしたのは、macOSのブラウザが窓を約500pxより細くできず、
   480pxのままだと窓を縮める方法では二段を確認できないため。
   実機のiPhoneはどれも430px以下なので、見え方は変わらない */
@media (max-width: 560px) {
  .nb-blog .nb-cell {
    align-items: stretch;
    padding: 20px;
    min-height: 0;
  }

  .nb-blog .nb-title {
    /* 「Suit‐Glaucus series」のような欧文の連なりが折り返せず、
       320px幅でセルを画面外まで押し広げていたため、どこでも折れるようにする */
    font-size: 0.88rem;
    overflow-wrap: anywhere;
    /* 横並びのときの「上下中央にそろえるための打ち消し」は二段では不要 */
    margin-bottom: 14px;
  }

  .nb-blog .nb-thumb {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    aspect-ratio: 200 / 123;
  }
}

.nb-thumb {
  width: 120px;
  height: 68px;
  flex: none;
  overflow: hidden;
  background: var(--blue-pale);
}

.nb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nb-date {
  display: block;
  color: #B8902A;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
  white-space: nowrap;
}

.nb-title {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 1rem;
  color: #3d3d48;
  line-height: 1.6;
}

.nb-news .nb-title {
  font-size: 1.2rem;
  line-height: 1.7;
}

/* カーソルを乗せたときの合図は、下線が左から伸びるのと写真の拡大に任せる。
   箱ごと薄くする指定(opacity: 0.7)は本人指示で外した */
a.nb-cell { text-decoration: none; }
a.nb-cell .nb-title { color: var(--ink); }

.nb-txt [lang="en"] { display: none; }

@media (max-width: 900px) {
  #news-blog { grid-template-columns: 1fr; }
  .nb-col { padding: 80px 5vw; justify-content: center; }
  .nb-news .nb-inner,
  .nb-blog .nb-inner { max-width: 440px; }
}

@media (max-width: 768px) {
  .nb-col { padding: 64px 24px; justify-content: center; }
  /* .nb-news / .nb-blog 側が (0,2,0) で max-width:1200px を指定しているので、
     同じ詳細度で書かないと効かない（.nb-inner 単独では負ける） */
  .nb-news .nb-inner,
  .nb-blog .nb-inner { max-width: 520px; }
}

/* スマホでは News / Blog / Contact の3見出しを
   同じ文字サイズ(2rem)で画面の左右中央に揃える */
@media (max-width: 900px) {
  /* News は見出しが記事リストの左に横並びで入るので、まず縦積みにする */
  .nb-news-row { flex-direction: column; }
  .nb-news .nb-list { margin-top: 0; }

  .nb-col.nb-news .nb-col-label,
  .nb-blog .nb-col-label,
  .contact-title-row .footer-contact-title {
    font-size: 2rem;
    text-align: center;
    width: 100%;
  }

  /* 字間は最後の文字の後ろにも入るため、中央揃えだと字間の半分ぶん左へずれる。
     同量の padding-left を足して見た目の中心を画面の中心に合わせる */
  .nb-col.nb-news .nb-col-label { padding-left: 0.25em; }
  .nb-blog .nb-col-label { padding-left: 0.2em; }
  .contact-title-row .footer-contact-title { padding-left: 0.12em; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ATELIER（地図）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#atelier-section { background: var(--white); }

/* Atelierタイトル：紺のバーが右から出て、中に白抜き文字が浮き出る */
.at-title-bar {
  /* 紺の帯の下端と、その下のぼかしパネルの上端は接させる（本人指示） */
  margin: 0 calc(-50vw + 50%) 0;
  overflow: hidden;
}

.at-title-bar-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  background: var(--ink);
  opacity: 0;
  transform: translateX(120px);
  transition: opacity 1s ease, transform 1s ease;
}

.at-title-bar-fill.revealed {
  opacity: 1;
  transform: translateX(0);
}

.at-title-bar-text {
  font-family: 'Crimson Pro', 'Noto Serif JP', 'EB Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.25em;
  color: #ffffff;
  margin: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
  transition-delay: 0.5s;
}

.at-title-bar-fill.revealed .at-title-bar-text {
  opacity: 1;
}

@media (max-width: 900px) {
  /* スマホはタイトルバーの直下にぼかしパネルが接するようにする */
  .at-title-bar { margin-bottom: 0; }
  /* 各セクションの「前の内容の終わり → 次のタイトル」はファイル末尾で100pxに統一 */
  .at-title-bar-fill { padding: 28px 0; }
  .at-title-bar-text { font-size: 1.5rem; }
}

.atelier-maps-wrap {
  position: relative;
}

.atelier-box-reveal {
  position: relative;
  height: 870px;
  margin: 0 calc(-50vw + 50%);
  display: flex;
  z-index: 0;
  overflow: hidden;
}

.ap-half {
  position: relative;
  width: 50%;
  overflow: hidden;
}

/* Atelierの写真ブロック：バーの後に左→右の順で浮き出る */
.ap-half-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.ap-half-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.ap-half-left.ap-half-reveal { transition-delay: 0.2s; }
.ap-half-right.ap-half-reveal { transition-delay: 0.55s; }

.ap-half img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ap-half .ap-img-blur {
  filter: blur(40px);
  transform: scale(1.3);
}

.ap-half-left::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 182, 193, 0.18);
  pointer-events: none;
}

.ap-half-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26, 58, 107, 0.18);
  pointer-events: none;
}

.ap-content {
  position: absolute;
  z-index: 1;
  top: calc(50% + 20px);
  left: 50%;
  width: 66%;
  transform: translate(-50%, -50%);
}

.ap-photo-frame {
  width: 100%;
  position: relative;
  /* 16:9 の比率に上下20pxずつ(計40px)足した高さ */
  height: 0;
  padding-top: calc(56.25% + 40px);
  overflow: hidden;
}

.ap-photo-link {
  display: block;
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.ap-photo-frame .ap-img-sharp {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.ap-photo-link:hover .ap-img-sharp,
.ap-photo-link:focus-visible .ap-img-sharp {
  transform: scale(1.08);
}

.ap-info-band {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 37px;
}

.ap-info-title-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 14px;
}

.ap-info-title {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.15em;
  color: #ffffff;
  margin: 0;
}

.ap-info-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.ap-info-link:hover {
  background: #ffffff;
  color: var(--ink);
}

.ap-info-link span {
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}

.ap-info-text span {
  display: block;
  font-family: 'BIZ UDPGothic', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
}

.ap-info-text strong {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-weight: 700;
  color: #ffffff;
  margin-right: 10px;
}

.ap-map-frame {
  width: 230px;
  aspect-ratio: 3 / 2;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  overflow: hidden;
}

.ap-map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.ap-half-vertical {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: calc(56px + 66% + 40px);
  display: flex;
  align-items: center;
  margin: 0;
  writing-mode: vertical-rl;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 0.92rem;
  letter-spacing: 0.28em;
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.9);
}

/* ぼかしの上に敷く白の四角。写真〜住所/Tel〜MAPまでをまとめて包む。
   幅にpadding分を足しているので、白場だけが外側に広がり写真の大きさは変わらない。
   スマホ(≤900px)は写真を全幅にする別レイアウトのため適用しない */
@media (min-width: 901px) {
  .ap-content {
    width: calc(66% + 112px);
    /* 大画面で白場が伸び続けてパネル(870px)からはみ出すのを防ぐ上限 */
    max-width: 800px;
    padding: 56px;
    background: var(--white);
    /* 白場を入れたぶん、従来の+20pxオフセットをやめてパネル中央に置く */
    top: 50%;
  }
  .ap-content .ap-info-title,
  .ap-content .ap-info-text strong { color: var(--ink); }
  .ap-content .ap-info-text span { color: rgba(14, 26, 58, 0.85); }
  .ap-content .ap-map-frame { border-color: rgba(14, 26, 58, 0.25); }
  .ap-content .ap-info-link { border-color: rgba(14, 26, 58, 0.6); color: var(--ink); }
  .ap-content .ap-info-link:hover { background: var(--ink); color: var(--white); }
  /* 住所の長さの違いで折り返し行数が左右で変わり白場の高さがずれるため、
     長いほう(岡山アトリエ)が収まる行数を確保して揃える */
  .ap-info-text { min-height: 0; }
}

@media (max-width: 1024px) {
  .atelier-box-reveal { height: 560px; }
  .ap-info-band { margin-top: 24px; }
  .ap-info-title { font-size: 1.35rem; }
  .ap-info-text span { font-size: 0.85rem; }
  .ap-info-link { width: 30px; height: 30px; }
  .ap-map-frame { width: 160px; }
}

/* レスポンシブ中間幅の白場。幅が狭まるほど余白とMAPを詰めて、
   白場がパネル(overflow:hidden)からはみ出して切れるのを防ぐ */
/* ノート幅以下では横並びだと左カラムが痩せて住所の折り返し行数が左右で変わり、
   白場の高さが崩れる。ここから「タイトル → MAP → ADD./Tel.」の縦積みに切り替える。
   display:contents で .ap-info-left を透過させ、3つを帯の直接の子として並べ替える */
@media (max-width: 1400px) {
  .ap-info-band { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ap-info-left { display: contents; }
  .ap-info-title-row { order: 1; margin: 0; }
  .ap-map-frame { order: 2; }
  /* 縦積みでは帯の全幅を使えるので3行ぶんで揃う */
  .ap-info-text { order: 3; min-height: 0; }
}

@media (min-width: 901px) and (max-width: 1400px) {
  .ap-content { width: calc(66% + 80px); padding: 40px; }
  .ap-map-frame { width: 190px; }
  .ap-info-band { margin-top: 28px; }
  /* ノート幅では住所ブロックを一回り小さくして白場の収まりをよくする */
  .ap-info-text span { font-size: 0.92rem; }
  .ap-info-text { min-height: 0; }
}

@media (min-width: 901px) and (max-width: 1024px) {
  /* 870px→560pxに縮むぶん白場が収まらないので、パネル側も高さを確保する */
  .atelier-box-reveal { height: 700px; }
  .ap-content { width: calc(66% + 56px); padding: 28px; }
  .ap-map-frame { width: 160px; }
  .ap-info-band { gap: 14px; margin-top: 22px; }
  /* この幅から住所は0.85remなので行の高さも変わる */
  .ap-info-text span { font-size: 0.85rem; }
  .ap-info-text { min-height: 0; }
}

@media (max-width: 900px) {
  .atelier-box-reveal {
    position: static;
    height: auto;
    margin: 0;
    flex-direction: column;
    /* PC用の overflow:hidden が残っていると、100vwに広げたパネルが
       親(.sec-wrapの内側幅)で切られて左右に余白が出る */
    overflow: visible;
  }
  .ap-half {
    /* パネルごと画面の両端まで伸ばす（内側の写真を端に揃えるための土台） */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: 0;
    padding: 60px 24px;
    box-sizing: border-box;
  }
  .ap-content {
    position: relative;
    z-index: 1;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    transform: none;
  }
  /* 鮮明写真を画面の両端まで。.ap-half の左右padding(24px)を打ち消す */
  .ap-photo-frame {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .ap-photo-frame .ap-img-sharp {
    aspect-ratio: 16 / 9;
    min-height: 180px;
  }
  .ap-info-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .ap-map-frame {
    width: 100%;
    max-width: 150px;
    min-height: 100px;
  }
  .ap-info-title-row {
    flex-wrap: wrap;
  }
  .ap-info-text span { font-size: 0.85rem; }
  .ap-info-text { min-height: 0; }
}

@media (max-width: 560px) {
  .ap-map-frame { max-width: 140px; min-height: 93px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTACT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.contact-title {
  text-align: left;
  margin-left: min(calc(50vw - 570px), 190px);
  transform: translateX(-60px);
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  font-family: 'Shippori Mincho', 'Noto Serif JP', 'EB Garamond', serif;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--blue);
  letter-spacing: 0.25em;
  padding: 300px 0 80px;
}

.contact-title.revealed {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 900px) {
  .contact-title,
  .contact-title.revealed { transform: none; margin-left: 0; text-align: center; }
}

.contact-photo {
  width: 100%;
  aspect-ratio: 16/5.5;
  overflow: hidden;
  position: relative;
}

.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: brightness(0.78) saturate(0.65);
  display: block;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 2.4s ease, transform 2.4s ease;
}

.contact-photo img.revealed {
  opacity: 1;
  transform: translateY(0);
}

.contact-lower {
  width: 100%;
  padding: 160px 0;
  text-align: left;
  background: var(--blue-dk);
  box-sizing: border-box;
}

.contact-outer {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.contact-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-left: min(calc(50vw - 570px), 190px);
  margin-right: 190px;
  gap: 60px;
}

.contact-info {
  flex: 1;
  min-width: 0;
}

.contact-msg {
  width: 440px;
  max-width: 100%;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.75);
  line-height: 2;
  text-align: left;
}

.contact-msg [lang="en"] { display: none; }

.contact-actions {
  flex: none;
  width: 490px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  padding: 0;
  background: #fff;
  color: var(--blue-dk);
  text-decoration: none;
  font-family: 'BIZ UDPGothic', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-align: center;
  transition: background 0.25s, color 0.25s;
  box-sizing: border-box;
}

.contact-btn:hover {
  background: var(--blue-pale);
  color: var(--blue-dk);
}

.contact-social {
  display: flex;
  justify-content: center;
  gap: 44px;
  margin-top: 32px;
}

.contact-social a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  align-items: center;
}

.contact-social a:hover { color: #fff; }

.contact-social svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTACT（Blog直下・独立セクション）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.contact-section {
  background: var(--white);
  /* 下の140pxが「Contactの中身 → フッターの紺」のあいだの白。
     100pxから上下に20pxずつ広げた（本人指示） */
  padding: 60px 0 140px;
  /* タイトルが右から入ってくる1秒間、translateX(60px)のぶん横スクロールが出るため切る */
  overflow-x: clip;
}

.contact-title-row {
  text-align: right;
  /* 1200px未満では calc() が負→0になり見出しが画面端に接触するため最低24pxを確保 */
  padding-right: max(24px, calc(50vw - 600px));
  margin-bottom: 64px;
}

.contact-title-reveal {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 1s ease, transform 1s ease;
}

.contact-title-reveal.revealed {
  opacity: 1;
  transform: translateX(0);
}

.contact-title-row .footer-contact-title {
  color: var(--ink);
  font-weight: 300;
}

@media (max-width: 900px) {
  .contact-title-row { text-align: left; padding: 0 24px; }
}

.contact-section-inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 640px;
  /* 写真・青ボックスのスライドイン前の位置（画面右外）で横スクロールが出ないよう切る。
     hidden と違い clip はスクロールコンテナを作らないので sticky を壊さない */
  overflow-x: clip;
}

.contact-photo-reveal {
  position: relative;
  /* Contactタイトル/Blog右列と同じ右端(50vw+600px)まで写真を伸ばす。
     画面幅1200px未満ではこの軸が画面外に出るため、親幅(=body幅)でクランプする */
  flex: 0 0 min(50vw + 600px, 100%);
  width: min(50vw + 600px, 100%);
  /* 写真の高さはここで確定させる。指定しないと img の height:100% が auto に落ち、
     画像本来の縦横比（1261×929）のまま約972pxまで伸びてしまう */
  height: 720px;
  overflow: visible;
  opacity: 0;
  transform: translateX(-120px);
  transition: opacity 1.8s ease 0.4s, transform 1.8s ease 0.4s;
}

.contact-photo-reveal.revealed {
  opacity: 1;
  transform: translateX(0);
}

.contact-photo-reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 写真のどの部分を見せるか。20% は「手全体を右へ寄せる」位置（本人選択：案C）。
     中央（50%）だと指が左端で切れるため、見せる範囲を左寄りにして手を右へ送っている */
  object-position: 20% center;
  display: block;
}

.contact-side {
  flex: 1 1 auto;
  min-width: 0;
}

/* 青ボックス：写真の右下にかかる位置に、最後に右からスライドインして表示 */
.contact-blue-box {
  position: absolute;
  left: auto;
  /* 写真の右端（＝Contactタイトルと同じ軸）より60px右で止める。
     ただし写真の右端が画面端に近づく狭い画面では、はみ出さないよう0まで戻す
     （25pxはスクロールバー幅ぶんの安全マージン。50vwはスクロールバーを含むため） */
  right: clamp(-60px, calc(625px - 50vw), 0px);
  width: min(560px, 60%);
  bottom: 56px;
  background: #B8902A;
  padding: 48px 52px;
  box-shadow: 0 24px 48px rgba(14, 26, 58, 0.28);
  z-index: 2;
  opacity: 0;
  transform: translateX(160px);
  transition: opacity 1.4s ease 1s, transform 1.4s ease 1s;
}

.contact-blue-box.revealed {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 900px) {
  .contact-section-inner { flex-direction: column; min-height: 0; }
  .contact-photo-reveal { flex: none; width: 100%; height: auto; overflow: hidden; }
  .contact-photo-reveal img { height: 400px; }
  .contact-side { display: none; }
  .contact-blue-box {
    position: static;
    width: auto;
    max-width: none;
    right: auto;
    margin: -40px 20px 0;
    box-sizing: border-box;
    /* 縦積みではボックスの下が白地になるため、影がグレーの滲みとして残る。
       写真に重なる上側だけ薄く残し、下には落とさない */
    box-shadow: 0 -6px 18px rgba(14, 26, 58, 0.14);
  }
}

@media (max-width: 480px) {
  .contact-blue-box { padding: 36px 28px; }
}

.contact-section .footer-contact-text {
  color: rgba(255, 255, 255, 0.85);
  max-width: none;
}

.contact-section .footer-contact-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 40px;
  padding-top: 14px;
  padding-bottom: 14px;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}

.contact-section .footer-contact-btn:hover {
  background: #ffffff;
  color: var(--ink);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
footer {
  background: var(--ink);
  /* 2026-09-10：上の余白を170→100pxに。もともと170pxは
     フッターの中にContactがあった頃の値で、Contactを外に出した
     TOPだけ .footer-no-contact で100pxに詰めてあった。
     いまは9ページとも中にContactが無いので100pxで揃えた。
     （.footer-no-contact は詳細度が footer より高く、狭い画面の
       80px/60px まで上書きしてしまっていたので指定ごと削除） */
  padding: 100px 24px 40px;
}

.footer-inner2 {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  box-sizing: border-box;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.footer-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 56px;
}

.footer-contact-card {
  padding: 48px 44px;
  background: rgba(255, 255, 255, 0.05);
}

.footer-contact-label {
  display: block;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-style: italic;
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  color: #cfdaf5;
  opacity: 0.8;
  margin-bottom: 18px;
}

.footer-contact-title {
  font-family: 'Crimson Pro', 'Noto Serif JP', serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #ffffff;
  margin-bottom: 22px;
}

.footer-contact-text {
  font-family: 'BIZ UDPGothic', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.95;
  letter-spacing: 0.02em;
  max-width: 420px;
  margin-bottom: 34px;
}

.footer-contact-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 22px 42px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  color: #ffffff;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.footer-contact-btn:hover {
  background: #ffffff;
  color: var(--ink);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.footer-name-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.f-name-ja {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 1.5rem;
  letter-spacing: 0.22em;
  color: #ffffff;
  line-height: 1.2;
  white-space: nowrap;
}

.f-name-en {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  /* 2026-08-31：和文と上下二段に組んだ英字。ここを基準にする。
     和文 1.5rem に対して 0.48rem ＝ 0.32倍。斜体は本人指示 */
  font-style: italic;
  font-size: 0.48rem;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  white-space: nowrap;
  /* 2026-08-31：上下二段のとき、字間（letter-spacing）が最後の文字の
     後ろにも入るぶん右に寄って見えるので、英字だけ左へずらす（1px ＋ 1px ＝ 2px） */
  position: relative;
  left: -2px;
}

.f-info {
  font-family: 'BIZ UDPGothic', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.85;
  letter-spacing: 0.03em;
}

.footer-social {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 20px;
}

.footer-social a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  align-items: center;
}

.footer-social a:hover { color: #ffffff; }

.footer-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-nav-list {
  list-style: none;
}

.footer-nav-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  /* 線が左の列いっぱい（1440pxで570px）まで伸びて、いちばん長い文字
     「Contact」83px に対して長すぎたため、右側を詰めた。
     割合なので画面幅が変わっても列に対する比率は保たれる */
  max-width: 80%;
}

.footer-nav-list a {
  display: block;
  padding: 14px 6px;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: #ffffff;
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease, padding-left 0.25s ease;
}

.footer-nav-list a:hover {
  color: #cfdaf5;
  padding-left: 16px;
}

.footer-nav-list .nav-en { display: inline-block; transition: opacity 0.25s; }
.footer-nav-list .nav-ja {
  position: absolute;
  left: 6px;
  top: 14px;
  transform: none;
  opacity: 0;
  transition: opacity 0.25s;
  white-space: nowrap;
  pointer-events: none;
}
.footer-nav-list a:hover .nav-en { opacity: 0; }
.footer-nav-list a:hover .nav-ja { opacity: 1; }

/* 2026-09-13：著作権表示。日本語 → ローマ字のお名前の順で1行。
   日英は中の <span lang> と下の1行、あとは body.lang-en の共通ルールで入れ替わる */
.f-copy {
  max-width: 1300px;
  margin: 30px auto 0;
  padding: 24px 40px 0;
  text-align: right;
  font-size: 0.80rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.9;
  box-sizing: border-box;
}
.f-copy [lang="en"] { display: none; }

/* 2026-08-31：著作権表示の中でも、名前だけは他の Isao Toshimori と同じ斜体に。
   あわせて1pt（＝1.33px）大きく。0.62rem＝9.92px → 0.70rem＝11.2px */
/* 2026-09-13：本人指示で、行の基本と同じ大きさ・濃さに揃えた
   （2026-08-31 の「お名前だけ1pt大」は取りやめ）。斜体だけ残す */
.f-copy-name {
  font-style: italic;
}

/* 2026-08-31：工藤さんのお名前も斜体に。大きさは行の基本（0.62rem）のまま */
.f-copy-designer {
  font-style: italic;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHTBOX
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#lb {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(8,12,24,0.96);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#lb.open { display: flex; }

#lb-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
}

#lb img {
  max-width: 78vw;
  max-height: 80vh;
  object-fit: contain;
  transition: opacity 0.3s;
}

#lb-info {
  text-align: center;
  margin-top: 24px;
  padding: 0 20px;
}

#lb-title {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.9);
  margin-bottom: 6px;
}

#lb-medium {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.4);
}

.lb-arrow {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  font-size: 1rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.lb-arrow:hover {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

#lb-x {
  position: absolute; top: 20px; right: 28px;
  background: none; border: none;
  color: rgba(255,255,255,0.35); font-size: 1rem;
  cursor: pointer; transition: color 0.2s;
  letter-spacing: 0.1em;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
}
#lb-x:hover { color: #fff; }

#lb-counter {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.25);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GALLERY PAGE（年代別）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gl-page-hero {
  /* 年号を左へずらす量。ヒーローの年号（1988）と、途中の年号のうち
     「1988と同じ位置に出す」ほう（.gl-year-blur = 1990・1992 …）が
     この1つの値を共有するので、左の列が必ずそろう。
     1200pxの外側に残る余白＋padding(40px)から最低余白24pxを引いた値で
     頭打ちにして、狭い画面で画面外へ出ないようにする
     （1440px以上で75pxそのまま／1280pxで56px／1200pxで16px） */
  --gl-year-x: min(75px, max(0px, (100vw - 1200px) / 2) + 16px);
  padding: 180px 80px 180px;
  text-align: left;
  background: var(--white);
  max-width: 1200px;
  margin: 0 auto;
  /* 左＝時代名（明朝・大）＋年号　右＝ひとこと の2列。
     途中の年号だけの見出し(.gl-page-hero-sub)は子が h1 ひとつなので、
     左の auto 列だけが使われて左寄せの1列になる */
  display: grid;
  /* 左の列の幅は、下の横並び作品の「写真55% ＋ 間60px」と同じにしてある。
     こうするとひとことの左端が、作品テキストの列の左端とぴったりそろう
     （1440pxで829px、1200pxで708px、1024pxで611px） */
  grid-template-columns: calc(55% + 60px) minmax(0, 1fr);
  /* ひとことを年号・時代名と同じ一列に並べる。center だと h1 の
     margin-bottom(80px) ぶん下にずれるので、文字の足元(baseline)でそろえる */
  align-items: baseline;
  column-gap: 0;
}


.gl-era-label {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  color: var(--blue);
  opacity: 0.6;
  margin-bottom: 20px;
  display: block;
}

.gl-era-title {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 80px;
  /* 年号と時代名を横1行に。並びは TOPの年代帯(.gl-strip-year)・
     下部の年代ナビ(.gl-nav-era) と同じ「年号 → 時代名」にそろえる
     （HTMLは時代名が先なので order で入れ替える） */
  display: flex;
  align-items: baseline;
  /* 年号と時代名の間。1em は年号の文字サイズと同じ（h1 の font-size がそのまま年号） */
  gap: 1.1em;
}

/* 見出しは「時代名（小・紺）＋ 年号（大・金）」の並び。
   大きさ・金色・イタリックは h1 側に入っているので、時代名だけ小さく・
   立体・紺に打ち消す。年号は各ページの埋め込みstyleで clamp 可変なので、
   時代名の大きさは em で追従させる */
.gl-era-catch {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-style: normal;
  /* 2026-08-27：TOPの年代帯（.gl-strip-year 1.9rem / .gl-strip-catch 1.4rem）と
     同じ比率にそろえる。1.4 ÷ 1.9 = 0.7368…。年号は各ページの埋め込みstyleで
     clamp 可変なので em で追従させる。ウェイト・字間・色も年代帯に合わせた */
  font-size: 0.7368em;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(14, 26, 58, 0.55);
  white-space: nowrap;
}

.gl-era-catch [lang="en"] { display: none; }

/* 字間も年代帯の年号(.gl-strip-year)と同じ 0.1em に。親の 0.15em を打ち消す */
.gl-era-year { margin-left: 0; order: -1; letter-spacing: 0.1em; }

.gl-era-sub {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-style: italic;
  /* 2026-08-27：年号の右に置くようになったので大きく（16px → 18.4px → 21.6px） */
  font-size: 1.35rem;
  letter-spacing: 0.18em;
  color: #999;
  max-width: 420px;
  margin: 0;
  line-height: 1.9;
}

/* 文章の「末尾」を、下の作品テキストの右端（アコーディオンの罫線の右端）に
   合わせる。列の右端までは届いていても左寄せだと文字が途中で終わるので、
   右寄せにして最後の1字が右端に来るようにする */
.gl-era-sub { text-align: right; }

.gl-era-sub [lang="en"] { display: none; }

/* ── 2026-08-28：大見出しの出方 ──────────────────────────────
   ①年号は今の位置から左上へずらし、ボケた状態からピントが合うように現れる
   ②時代名（土と情念 ほか）は少し下げ、右のひとことと「一緒に」右から入る
   .revealed は各ページのインラインJSが付ける。
   途中の年号だけの見出し（.gl-page-hero-sub）は対象外なので :not() で外す */

/* 2026-08-28：年号は上の段にいるので、横の並びからは外す（絶対配置）。
   こうしないと時代名が年号の右隣から始まってしまい、写真の左端にそろわない。
   位置の基準にするため h1 に position: relative を付ける */
.gl-page-hero:not(.gl-page-hero-sub) .gl-era-title {
  position: relative;
}

.gl-page-hero:not(.gl-page-hero-sub) .gl-era-year {
  position: absolute;
  left: 0;
  bottom: 0;
  /* 年号だけ一回り大きく。時代名は 0.7368em で h1 に追従しているので、
     h1 側（.gl-era-title）を触らずここだけ上げれば時代名の大きさは変わらない */
  font-size: 1.2em;

  /* 上へずらす量。150px から100px下げて50pxに */
  --gl-year-y: 50px;
  transform: translate(calc(var(--gl-year-x) * -1), calc(var(--gl-year-y) * -1));
  opacity: 0;
  filter: blur(18px);
  transition: opacity 1.6s ease, filter 1.6s ease;
}

.gl-page-hero:not(.gl-page-hero-sub) .gl-era-year.revealed {
  opacity: 1;
  filter: blur(0);
}

/* 時代名。写真の左端にそろえた位置が定位置（下へ60px）。
   出てくるときだけ、そこからさらに右（+90px）の位置から寄ってくる。
   90px はコンセプト本文(.concept-in--right)と同じ量 */
.gl-page-hero:not(.gl-page-hero-sub) .gl-era-catch {
  /* 2026-08-28：時代名の左端＝h1の左端＝紙面の左の軸＝下の作品写真の左端。
     年号を絶対配置で並びから外してあるので、ここが h1 の先頭になる */
  --gl-catch-x: 0px;
  /* 2026-08-28 六度目：24px → 60px（もう少し下へ） */
  --gl-catch-y: 60px;
  --gl-in: 90px;
  transform: translate(calc(var(--gl-catch-x) + var(--gl-in)), var(--gl-catch-y));
  opacity: 0;
  transition: opacity 1.6s ease, transform 1.6s ease;
}

.gl-page-hero:not(.gl-page-hero-sub) .gl-era-catch.revealed {
  opacity: 1;
  transform: translate(var(--gl-catch-x), var(--gl-catch-y));
}

/* 2026-08-28：ひとことを1行に収める。列の幅（1866pxで444px）で折り返して
   2行になるページがあった（庭との出会い・青と蒼と碧）。幅を文字の実寸
   （max-content）にし、右端は列の右端に置いたまま左へ伸ばす。時代名は
   写真の左端まで寄せてあるので、あいだの空きへ入る形になる。
   900px以下は見出しが1列・中央揃えになるので、そこは折り返しのまま */
@media (min-width: 901px) {
  .gl-page-hero:not(.gl-page-hero-sub) .gl-era-sub {
    width: max-content;
    /* 100% にすると列の幅（1866pxで444px）で頭打ちになり、
       庭との出会い・青と蒼と碧が2行のままになる。制限しない */
    max-width: none;
    justify-self: end;
  }

  /* 2026-09-01：ただし英語表示は別。英文のひとことは和文よりはるかに長く
     （青と蒼と碧で1051px）、max-content のままだと1行で左へ伸び続け、
     時代名の上に丸ごと重なっていた（2009ページ・1440pxで607px、
     901pxで878px。6ページとも同じ症状）。英語のときだけ列の幅で
     折り返させる。右端は justify-self: end と text-align: right で
     従来どおり紙面の右の軸に付く */
  /* 列の切り方も英語だけ変える。和文は「写真55%＋間60px」の位置で切って
     ひとことの左端を作品テキストの列にそろえているが、英文だと右の列が
     444pxしかなく3行以上になる。英語のときは左の列を時代名の実寸ぶんだけに
     し、残り全部をひとことに渡す（間は60px）。これで青と蒼と碧の英文
     （1051px）が 901〜1920px のどの幅でも2行に収まる */
  body.lang-en .gl-page-hero:not(.gl-page-hero-sub) {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 60px;
  }
  body.lang-en .gl-page-hero:not(.gl-page-hero-sub) .gl-era-sub {
    max-width: 100%;
  }
}

/* 右のひとこと。時代名と同じ量・同じ長さ・遅延なしで、一緒に右から入る。
   縦位置も時代名と同じだけ下げる。もともと親の align-items: baseline で
   時代名と文字の足元がそろっているので、同じ量だけ下げれば横一列に戻る */
.gl-page-hero:not(.gl-page-hero-sub) .gl-era-sub {
  /* 2026-08-28：右へ150px出したあと、同じだけ左へ戻したので横方向は 0。
     文章の右端は 1200px の枠の右端（＝下の作品テキストの右端）に接しており、
     ここから右へ動かすと画面の右端まで16pxしか残らない */
  --gl-sub-x: 0px;
  /* 時代名と同じだけ下げて、横一列を保つ */
  --gl-sub-y: 60px;
  --gl-in: 90px;
  transform: translate(calc(var(--gl-sub-x) + var(--gl-in)), var(--gl-sub-y));
  opacity: 0;
  transition: opacity 1.6s ease, transform 1.6s ease;
}

.gl-page-hero:not(.gl-page-hero-sub) .gl-era-sub.revealed {
  opacity: 1;
  transform: translate(var(--gl-sub-x), var(--gl-sub-y));
}

/* 狭い画面ではずらす量を落とす。900px以下は見出しが1列・中央揃えになるので
   位置ずらしはやめ、出方（ボケ／右から）だけ残す */
@media (max-width: 1100px) {
  .gl-page-hero:not(.gl-page-hero-sub) .gl-era-year { --gl-year-y: 24px; }
}
@media (max-width: 900px) {
  .gl-page-hero { --gl-year-x: 0px; }
  .gl-page-hero:not(.gl-page-hero-sub) .gl-era-year { --gl-year-y: 0px; }
  /* 1列・中央揃えになるので右そろえは解除する */
  /* 2026-09-01：年号を絶対配置から普通の1段目に戻したぶん（下の
     .gl-era-year の指定）、時代名の下げ幅を 30px → 5px にする。
     5px は、それまで年号の下端と時代名の上端のあいだに空いていた量なので、
     年号と時代名の間隔は変更前と同じ（1988ページ・390pxで46px）。
     ひとこと（--gl-sub-y）は30pxのまま。そのぶん h1 の下余白を
     40px → 15px にして、時代名との間隔も変更前と同じ40pxに保つ */
  .gl-page-hero:not(.gl-page-hero-sub) .gl-era-catch { margin-left: 0; --gl-catch-x: 0px; --gl-catch-y: 5px; --gl-in: 60px; }
  .gl-page-hero:not(.gl-page-hero-sub) .gl-era-sub { --gl-sub-x: 0px; --gl-sub-y: 30px; --gl-in: 60px; }
}

/* ── 2026-08-28：途中の年号見出し（1989・1990 …）の出方 ────────────
   大きさと出方は 1988（ヒーローの年号）にそろえ、位置だけ左右交互にする。
   ①大きさをヒーローの年号にそろえる。ヒーローは .gl-era-year に 1.2em が
     掛かっているぶんだけ大きかった。各ページの埋め込みstyleが
     .gl-era-title に !important を付けているので、こちらも !important が要る
   ②出方を1つおきに変える。HTML 側に書き込んだクラスで指定している
     ・.gl-year-slide … 右の軸から右へ75px（1989・1991 …）
     ・.gl-year-blur  … 1988と同じ左の列（1990・1992 …）
   出方は左右とも 1988 と同じ（ボケ→ピント）で、位置だけが違う
   .revealed は各ページのインラインJSが付ける */
.gl-page-hero-sub .gl-era-title {
  font-size: clamp(2.16rem, 4.8vw, 3.36rem) !important;
  /* 出方は左右どちらも 1988（ヒーローの年号）とまったく同じ。
     動かず、その場でボケからピントが合いながらうっすら出る */
  opacity: 0;
  filter: blur(18px);
  transition: opacity 1.6s ease, transform 1.6s ease, filter 1.6s ease;
}

.gl-page-hero-sub .gl-era-title.revealed {
  opacity: 1;
  filter: blur(0);
}

/* 1989・1991 … は「写真の右の列」＝紙面の右の軸に右端をそろえ、そこから
   さらに右へ75px。右の軸は 1200px の枠の右端（padding 40px の内側）で、
   全幅の作品写真の右端・作品テキストの右端・ひとことの右端がすべてこの線。
   1440pxで1273px（実測で確認済み）。
   親は2列グリッドで、この見出しは子が h1 ひとつなので放っておくと
   左の列に収まってしまう。1列にして枠の右端まで届かせる。
   出方は 1988 と同じ（動かず、その場でボケ→ピント）*/
.gl-page-hero-sub.gl-year-slide {
  grid-template-columns: minmax(0, 1fr);
}

.gl-page-hero-sub.gl-year-slide .gl-era-title {
  /* 右の軸より外へ出す量。枠の外に残る余白（padding 40px 込み）から
     最低余白24pxを引いた値で頭打ちにして、画面の右外へ出ないようにする
     （1440px以上で75pxそのまま／1280pxで48px／1200pxで16px） */
  --gl-out: min(75px, max(0px, (100vw - 1215px) / 2) + 16px);
  width: fit-content;
  margin-left: auto;
  margin-right: 0;
  /* 動かない。定位置に置いたまま出る */
  transform: translateX(var(--gl-out));
}

/* 900px以下は見出しが1列になるので、右へずらすのはやめる。
   2026-09-01：中央ではなく左の軸にそろえる（1990・1992 … の .gl-year-blur と
   同じ位置。スマホでは年号が全部左で1本の縦線に乗る） */
@media (max-width: 900px) {
  .gl-page-hero-sub.gl-year-slide .gl-era-title {
    margin-left: 0;
    margin-right: auto;
  }
  .gl-page-hero-sub.gl-year-slide .gl-era-title.revealed {
    transform: none;
  }
}

/* 1990・1992 … は 1988 と同じ左の列。ずらす量は .gl-page-hero の
   --gl-year-x をヒーローの年号と共有しているので、左端が必ずそろう */
.gl-page-hero-sub.gl-year-blur .gl-era-title {
  transform: translateX(calc(var(--gl-year-x) * -1));
}

/* 時代の中の転機（榎倉康二氏との出会い、岡山へ …）。歳森さんの時代別表記で
   （カッコ）書きされていたものを、指定された位置に小さく置く。
   .gl-works の中に作品と並べて入れるので、幅と左右余白は親から受け取る */
.gl-era-note {
  text-align: center;
  margin: 0 0 var(--gl-work-gap);
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: rgba(14, 26, 58, 0.5);
}

.gl-era-note [lang="en"] { display: none; }

@media (max-width: 768px) {
  .gl-era-note { font-size: 0.85rem; letter-spacing: 0.12em; }
}

/* 作品ブロック */
.gl-works {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 160px;
}

.gl-work {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 600px;
  margin-bottom: 2px;
}

.gl-work-img {
  overflow: hidden;
  position: relative;
  min-height: 520px;
}

.gl-work-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.gl-work-img-clickable {
  cursor: pointer;
}

.gl-work-img-clickable img {
  transition: transform 0.5s ease, filter 0.5s ease;
}

.gl-work-img-clickable:hover img {
  transform: scale(1.04);
  filter: brightness(0.92);
}

.gl-work-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 72px;
  background: var(--white);
}

.gl-work.reverse .gl-work-img { order: 2; }
.gl-work.reverse .gl-work-text { order: 1; }

.gl-work-num {
  display: none;
}

.gl-work-title {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  /* 2026-08-27 に本人指示で2px大きく（2rem=32px → 2.125rem=34px） */
  font-size: 2.125rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.4;
}

.gl-work-title-en {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  /* 2026-08-31：ここは英字が主役。Shippori Mincho に本物の斜体が無く、
     疑似斜体（機械的に傾けたもの）になるので直立にする */
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: #aaa;
  margin-bottom: 32px;
  display: block;
}

.gl-work-medium {
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--blue);
  opacity: 0.8;
  margin-bottom: 48px;
  font-family: 'BIZ UDPGothic', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}

.gl-work-body {
  font-size: 0.88rem;
  color: #4a4a55;
  line-height: 2.2;
  letter-spacing: 0.04em;
  border-left: 1px solid var(--blue-pale);
  padding-left: 24px;
}

/* 年代ナビ */
.gl-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 80px 20px 120px;
  background: var(--white);
}

.gl-nav-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  text-decoration: none;
  padding: 24px 16px;
  border: none;
  background: transparent;
  box-shadow: none;
  position: relative;
  transition: background 0.25s;
  gap: 32px;
  width: 720px;
  max-width: 100%;
}

.gl-nav-item:last-child {
  border-bottom: none;
}

.gl-nav-item::after {
  content: "\203A";   /* › シェブロン */
  position: absolute;
  right: 16px;
  top: 50%;
  color: #B8902A;
  font-size: 1.3rem;
  line-height: 1;
  opacity: 0;
  transform: translate(-6px, -50%);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.gl-nav-item:hover::after,
.gl-nav-item:focus-visible::after,
.gl-nav-item.current::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.gl-nav-era {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-style: italic;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: #B8902A;
  white-space: nowrap;
  /* 年号の右端がそろうと時代名の左端もそろう。文字を大きくしたぶん広げてある
     （1.3rem の斜体明朝で「1988」が実測52px。「s」を外す前は64px） */
  min-width: 104px;
}

/* 年代からキャッチまでを一本の紺の線でつなぐ（TOPの年代帯と同じ扱い）。
   基準は .gl-nav-item 側（position: relative 済み）で、矢印の手前まで引く */
.gl-nav-item .gl-nav-label::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 24px;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
  pointer-events: none;
}

.gl-nav-item:hover .gl-nav-label::after,
.gl-nav-item:focus-visible .gl-nav-label::after {
  transform: scaleX(1);
}

.gl-nav-label {
  /* 時代名は、各ページの作品名(.gl-work-title)・大見出し(.gl-era-title)と
     同じ明朝でそろえる。大きさも年号(.gl-nav-era)と同じにする */
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: rgba(14, 26, 58, 0.55);
  transition: color 0.4s ease;
  line-height: 1.8;
}

.gl-nav-label [lang="en"] { display: none; }

.gl-nav-item:hover .gl-nav-label,
.gl-nav-item:focus-visible .gl-nav-label,
.gl-nav-item.current .gl-nav-label {
  color: var(--ink);
}

/* ギャラリーTOPへ戻る */
.gl-back-top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 20px 100px;
  text-decoration: none;
  background: var(--white);
}



.gl-back-top .gl-back-label {
  position: relative;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--ink);
}

.gl-back-top .gl-back-label [lang="en"] { display: none; }

.gl-back-top .gl-back-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: #B8902A;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s ease;
}

.gl-back-top:hover .gl-back-label::after,
.gl-back-top:focus-visible .gl-back-label::after {
  transform: scaleX(1);
}

/* ギャラリーページ用レスポンシブ */
@media (max-width: 900px) {
  .gl-works { padding: 0 0 100px; }
  .gl-work { grid-template-columns: 1fr; min-height: auto; }
  .gl-work-img { aspect-ratio: 4/3; min-height: unset; width: 100%; order: 1 !important; }
  .gl-work-text { order: 2 !important; padding: 0 20px 48px; }
  /* portrait: 900px時点から縦並び */
  .gl-work-portrait { flex-direction: column !important; gap: 0 !important; }
  .gl-work-portrait .gl-work-img { max-width: 100% !important; flex: none !important; width: 100% !important; }
  .gl-nav-item { padding: 20px 28px; }
  .gl-era-title { font-size: 1.4rem; margin-bottom: 40px; }
  .gl-page-hero { padding-bottom: 40px; }
}

@media (max-width: 900px) {
  /* 下の作品が縦積みになる幅（.gl-work-portrait の flex-direction: column）と
     そろえて、見出しも縦に積む。
     2026-09-01：中央揃えをやめた。途中の年号見出し（1989・2010 …）は
     すべて左の軸にそろえる（年号が1本の縦線に乗る） */
  .gl-page-hero { grid-template-columns: 1fr; column-gap: 0; }
  .gl-era-title { justify-content: flex-start; }
  /* 2026-09-01：ページの大見出しだけは三段に振り分ける。
     年号＝左（h1 の中で position: absolute; left: 0 なので元から左端）
     時代名＝右（h1 は flex なので、中身は時代名ひとつ。これを右端へ）
     ひとこと＝左右の中央 */
  .gl-page-hero:not(.gl-page-hero-sub) .gl-era-title { justify-content: flex-end; }
  .gl-era-sub { text-align: center; margin-left: auto; margin-right: auto; }

  /* 2026-09-01：英語表示の時代名（Looking for a point of contact など）の対策。
     .gl-era-catch は white-space: nowrap なので、1行の実寸がそのまま
     「この列に必要な最小幅」になり、見出しの列（1fr）を画面より広げていた。
     同じ列にいるひとことも道連れで右が切れ、era4 の英語・320px では
     63px はみ出していた（body の overflow-x: clip で切られていただけ）。
     ・min-width: 0 …… 列と h1 が中身の実寸に引きずられないようにする
     ・white-space: normal … 入りきらないときだけ2行に折り返させる
       （和文の時代名は5〜7文字で、320pxでも1行に収まるので影響しない）
     ・text-align: right … 2行になったときも右端でそろえる */
  .gl-era-title { min-width: 0; }
  .gl-era-catch { min-width: 0; white-space: normal; text-align: right; }

  /* 2026-09-01：年号と時代名をはっきり2段に分ける。
     年号は PC 用の指定で position: absolute（h1 の下端に固定）のままなので、
     英語で時代名が2行になると h1 が伸び、年号がその上に重なっていた。
     スマホでは絶対配置をやめ、1段目＝年号（左）／2段目＝時代名（右）の
     ふつうの2行にする。flex-basis 100% で年号が1段目を独り占めし、
     時代名は折り返して2段目に落ち、justify-content: flex-end で右端に付く */
  .gl-page-hero:not(.gl-page-hero-sub) .gl-era-title {
    flex-wrap: wrap;
    /* gap: 1.1em は年号と時代名が横に並んでいたときの「間」。
       2段になると行間として効いてしまうので、縦方向は0に戻す */
    row-gap: 0;
    /* 上の --gl-sub-y の説明を参照。40px のままだと、ひとことが
       変更前より25px下がってしまう */
    margin-bottom: 15px;
  }
  .gl-page-hero:not(.gl-page-hero-sub) .gl-era-year {
    position: static;
    flex: 0 0 100%;
    text-align: left;
  }
}

@media (max-width: 768px) {
  /* TOPページのギャラリーエリアナビ */
  .gl-nav-item { width: 100%; max-width: 100%; box-sizing: border-box; }
  #gallery .contact-outer { padding-left: 16px; padding-right: 16px; }

  /* ギャラリーページ */
  .gl-works { padding: 0 0 60px; }
  .gl-work-text { padding: 0 16px 36px; }
  .gl-work-text-featured { padding: 16px 16px 0 !important; }
  .gl-work-portrait .gl-work-text { padding: 0 16px 36px !important; }
  /* 本体を 1.15rem → 1.35rem にしたぶん、こちらも少し上げる（14.4px → 16.8px） */
  .gl-era-sub { max-width: 100%; font-size: 1.05rem; }
  .gl-work-img { aspect-ratio: 4/3; min-height: unset; }
  .gl-nav { padding: 40px 16px 60px; }
}

@media (max-width: 480px) {
  .gl-page-hero { padding: 130px 20px 40px; }
  .gl-work-text { padding: 0 16px 28px; }
  .gl-work-text-featured { padding: 12px 16px 0 !important; }
  .gl-work-portrait .gl-work-text { padding: 0 16px 28px !important; }
  .gl-work-body { font-size: 0.84rem; }
  /* 2rem・字間0.18em では「NEVERTHELESS」のような長い欧文の作品名が
     1語で353px必要になり、320px幅の画面を横に押し広げていた。
     スマホの他の見出し(1.4rem)ともサイズを近づける */
  .gl-work-title { font-size: 1.625rem; letter-spacing: 0.12em; }
  .gl-nav { flex-direction: column; align-items: center; gap: 0; }
  .gl-nav-item { width: 100%; max-width: 100%; padding: 24px 16px; gap: 12px; }
  .gl-nav-era { font-size: 1.05rem; min-width: 58px; }
  .gl-nav-label { font-size: 1.05rem; }
  .gl-work-img { aspect-ratio: 4/3; min-height: unset; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LANGUAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.lang-en [lang="ja"]  { display: none !important; }
body.lang-en [lang="en"]  { display: inline !important; }
body.lang-en .concept-body[lang="en"],
body.lang-en .concept-lead[lang="en"],
body.lang-en p[lang="en"],
body.lang-en .n-txt[lang="en"] { display: block !important; }

/* Gallery work text language switch (medium / process label / accordion) */
.gl-work-medium [lang="en"],
.process-label [lang="en"],
.accordion-btn [lang="en"],
.gl-note [lang="en"],
.accordion-body-inner [lang="en"] { display: none; }

/* Gallery title language switch */
body.lang-en .gl-work-title { display: none !important; }
body.lang-en .gl-work-title-en {
  /* 和文の作品名と同じだけ2px大きく（1.4rem=22.4px → 1.525rem=24.4px） */
  font-size: 1.525rem;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  /* 2026-08-31：ここは英字が主役。Shippori Mincho に本物の斜体が無く、
     疑似斜体（機械的に傾けたもの）になるので直立にする */
  font-style: normal;
  color: var(--ink);
  letter-spacing: 0.10em;
  margin-bottom: 8px;
  display: block !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HAMBURGER MENU
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
  transition: all 0.3s;
}

.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 190;
  background: #F1EFE8;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 48px 32px;
}

.mobile-nav.open { display: flex; }

.mnav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.mnav-links a {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: var(--ink);
  text-decoration: none;
  padding: 13px 0;
  width: 100%;
  text-align: center;
  transition: color 0.2s;
}

.mnav-links a:hover { color: var(--blue); }

.mnav-social {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
}

.mnav-social a {
  color: var(--ink);
  opacity: 0.45;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
}

.mnav-social a:hover { opacity: 0.8; }

.mnav-social svg { fill: currentColor; }

.mnav-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--ink);
  opacity: 0.5;
}

.mnav-lang button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 0.6;
  padding: 0;
}

.mnav-lang button.active {
  opacity: 1;
  border-bottom: 0.5px solid var(--ink);
}

.mnav-lang span { opacity: 0.4; }

.mobile-nav a:hover { color: var(--blue); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE: ヘッダー中間幅（〜1264px）
   ナビ間隔34pxのままだとヘッダー全体で約1265px必要になり、
   それ未満の画面ではJapan/Englishが画面右外に押し出される。
   1024px以下の指定に一気に飛ぶ前に、2段階で間隔を詰める。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1264px) {
  .header-nav { padding-right: 40px; }
  .header-nav a { padding: 0 24px; }
}

@media (max-width: 1139px) {
  .header-nav { padding-right: 24px; }
  .header-nav a { padding: 0 18px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE: TABLET（〜1024px）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
  .header-inner { padding: 0 32px; }
  /* 921px（ハンバーガー化の境界の1px上）でも収まる最小の間隔 */
  .header-nav a { padding: 0 12px; font-size: 0.78rem; }
  .sec-wrap { padding: 100px 32px; }
  .contact-title { padding: 100px 0 40px; }
  #atelier-section .sec-heading,
  .contact-title { max-width: 696px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE: ヘッダーをハンバーガーへ（〜920px）
   横並びナビは日本語表示（トップ〜コンタクト7項目）で約919px必要になり、
   これ未満ではJapan/EnglishとSNSアイコンが画面右外に押し出されていた。
   ナビを畳んでハンバーガーメニューに切り替える。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 920px) {
  .header-inner {
    grid-template-columns: 1fr auto auto;
    gap: 12px;
  }
  .header-logo { margin-right: 0; }
  .header-nav { display: none; }
  .hamburger { display: flex; }
  .hdr-social { display: none; }
  .hdr-lang { display: none; }
  /* ロゴ列が 1fr になるため、left:100% の絶対配置だと英字が画面右外へ出る。
     日本語名の右に普通に並べる */
  .logo-en {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    margin-left: 16px;
    display: inline-block;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE: TABLET PORTRAIT（〜768px）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
  .header-inner {
    padding: 0 24px;
  }
  .logo-ja { font-size: 1.5rem; }
  .logo-en { position: static; left: auto; top: auto; transform: none; margin-left: 10px; font-size: 0.76rem; opacity: 0.4; display: inline-block; white-space: nowrap; }

  #hero { min-height: 60vh; }
  .slide img {
    width: min(420px, 92vw);
    height: min(420px, 92vw);
  }
  #hero::after { height: 140px; }

  .hero-name-overlay { display: none; }

  .sec-wrap { padding: 80px 20px; }
  .sec-heading { font-size: 1.7rem; margin-bottom: 32px; }

  #concept .sec-wrap { padding-top: 80px; padding-bottom: 80px; }
  .wave { margin: 40px 0; }
  #gallery .contact-outer { padding-top: 40px; }

  .concept-body { writing-mode: horizontal-tb; height: auto; font-size: 0.96rem; line-height: 2.1; }

  .g-item { width: 100vw; }

  .contact-title { padding: 80px 20px 40px; font-size: 1.4rem; }
  .contact-photo { aspect-ratio: 4/3; }
  .contact-lower { padding: 50px 20px 80px; text-align: center; }
  .contact-inner { flex-direction: column; align-items: center; gap: 28px; margin-left: 0; margin-right: 0; }
  .contact-info { width: 100%; }
  .contact-msg { font-size: 0.86rem; text-align: center; margin: 0 auto; }
  .contact-actions { width: 440px; max-width: 100%; align-items: center; }
  .contact-btn { padding: 12px 36px; }

  footer { padding: 80px 20px 60px; }
  .footer-inner2 { grid-template-columns: 1fr; gap: 56px; padding: 0 20px; text-align: center; }
  .footer-left { align-items: center; }
  .footer-right { align-items: center; }
  .footer-contact-text { max-width: 100%; }
  .footer-brand { align-items: center; text-align: center; }
  .footer-name-wrap { align-items: center; }
  .footer-social { justify-content: center; }
  /* 1列・中央揃えになるので、線は列いっぱいのまま（右だけ詰めると中央からずれる） */
  .footer-nav-list li { max-width: none; }
  .footer-nav-list a { text-align: center; padding: 20px 6px; font-size: 1rem; }
  .footer-nav-list a:hover { padding-left: 6px; }
  .footer-nav-list .nav-en { display: none; }
  .footer-nav-list .nav-ja { position: static; opacity: 1 !important; transform: none; white-space: normal; }
  .f-copy { text-align: center; padding: 24px 20px 0; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE: MOBILE（〜480px）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 480px) {
  body { font-size: 14px; }
  .header-inner { height: 56px; }
  .logo-ja { font-size: 1.15rem; }
  #hero { min-height: 55vh; }
  .slide img {
    width: min(340px, 94vw);
    height: min(340px, 94vw);
  }
  .sec-wrap { padding: 64px 16px; }
  .sec-heading { font-size: 1.5rem; }
  #concept .sec-wrap { padding-top: 60px; padding-bottom: 60px; }
  .concept-body { font-size: 0.92rem; }
  .g-item { width: 100vw; }
  .gl-nav-item { width: 100%; padding: 20px 16px; gap: 16px; }
  .contact-title { padding: 64px 16px 40px; }
  .contact-msg br:not(.must-break) { display: none; }
  .f-name-ja { font-size: 1.4rem; }
  /* 和文が下がるぶん、英字も 0.32倍を保つ（1.4 × 0.32 ＝ 0.45rem） */
  .f-name-en { font-size: 0.45rem; }
  footer { padding: 60px 16px 48px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   スマホ：セクション間の「内容の終わり → 次のタイトル」を100pxに統一
   （境目ごとに前後2つのpaddingの合計が100pxになるよう配分している。
    どちらかを触るともう一方も合わせること）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 900px) {
  /* ヒーロー写真 → Concept見出し */
  #concept .sec-wrap { padding-top: 60px; }

  /* コンセプト画像 → Gallery見出し */
  #gallery .contact-outer { padding-top: 60px; }

  /* 流れる写真 → Atelier紺バーの上（60 + 40 = 100px） */
  .gallery-marquee-wrap { padding-bottom: 60px; }
  #atelier-section .sec-wrap { padding-top: 40px; }

  /* ぼかしパネルの余白。以前は上下90pxで左右24pxより厚く、上下だけ間延びして
     見えていたので、上下を削って左右と同じ24pxにそろえた */
  .ap-half { padding: 24px; }

  /* 流れる写真は画面いっぱい(100vw)の正方形だったので一回り小さくする */
  /* 2026-09-10：流れる正方形写真を少し小さく（78 → 60vw）。
     390pxで 304 → 234px。2枚目が視界に入って「流れている」ことが分かりやすくなる */
  .g-item { width: 60vw; }

  /* スマホにもPCと同じ白ボックスを敷く。
     写真は「スマホでは全幅」方針で 100vw に出していたが、
     白ボックスからはみ出すのでこのパネルだけ解除する */
  .ap-content {
    background: var(--white);
    padding: 28px;
  }
  .ap-photo-frame {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
  .ap-content .ap-info-title,
  .ap-content .ap-info-text strong { color: var(--ink); }
  .ap-content .ap-info-text span { color: rgba(14, 26, 58, 0.85); }
  .ap-content .ap-map-frame { border-color: rgba(14, 26, 58, 0.25); }
  .ap-content .ap-info-link { border-color: rgba(14, 26, 58, 0.6); color: var(--ink); }
  .ap-content .ap-info-link:hover { background: var(--ink); color: var(--white); }

  /* アトリエのパネル → News見出し（40 + 60） */
  #atelier-section .sec-wrap { padding-bottom: 40px; }
  .nb-col.nb-news { padding-top: 60px; }

  /* Newsの View all → Blog見出し（50 + 50） */
  .nb-col.nb-news { padding-bottom: 50px; }
  .nb-col.nb-blog { padding-top: 50px; }

  /* Blogの View all → Contact見出し（40 + 60） */
  .nb-col.nb-blog { padding-bottom: 40px; }
  .contact-section { padding-top: 60px; }
}

/* スマホ：6つのセクションタイトルを同じ大きさ・同じ字間に統一する。
   これまで Atelier だけ 1.5rem、字間は 0.12〜0.25em の4種類に分かれていた。
   字間は最後の文字の後ろにも入るため、中央揃えでは同量の padding-left で
   見た目の中心を画面の中心に戻している */
@media (max-width: 900px) {
  #concept .sec-heading,
  #gallery .sec-heading,
  .at-title-bar-text,
  .nb-col.nb-news .nb-col-label,
  .nb-blog .nb-col-label,
  .contact-title-row .footer-contact-title {
    font-size: 2rem;
    letter-spacing: 0.25em;
    padding-left: 0.25em;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   余白スケール（デスクトップ→ノート→タブレット→スマホ）

   3種類のトークンで全セクションの縦の間隔を管理する。
   --sp-a : 前の内容の終わり → 次のセクション見出し（セクション間）
   --sp-b : 見出し → その直下の内容
   --sp-c : 内容 → 内容（同じセクション内）

   セクション間(--sp-a)は前後2つのpaddingの合計で作るため、
   片方だけ触るともう一方も合わせること。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {                              /* デスクトップ 1281px〜 */
  --sp-a: 200px;
  --sp-b: 80px;
  --sp-c: 120px;
}
@media (max-width: 1280px) {         /* ノート */
  :root { --sp-a: 160px; --sp-b: 64px; --sp-c: 100px; }
}
@media (max-width: 1024px) {         /* タブレット */
  :root { --sp-a: 130px; --sp-b: 52px; --sp-c: 80px; }
}
@media (max-width: 900px) {          /* スマホ */
  :root { --sp-a: 100px; --sp-b: 40px; --sp-c: 60px; }
}

/* 1. ヒーロー → Concept見出し */
#concept .sec-wrap { padding-top: var(--sp-a); }
/* Concept見出し → リード文。リード→本文①と同じ120pxで一定にする
   （--sp-b は 80/64/52/40 と画面幅で変わるので、ここでは使わない） */
#concept .sec-heading { margin-bottom: 120px; }
/* 2. Concept本文③ → セクション下端 */
#concept .sec-wrap { padding-bottom: 110px; }

/* 3. コンセプト画像 → Gallery見出し */
#gallery .contact-outer { padding-top: var(--sp-a); }
/* 4. Gallery見出し → 年代帯 */
#gallery .sec-heading { margin-bottom: var(--sp-b); }

/* 5. 年代別サムネイル帯 → 流れる写真 */
.gl-strips { padding-bottom: var(--sp-c); }

/* 6. 流れる写真 → Atelier紺バー（60% + 40%） */
.gallery-marquee-wrap { padding-bottom: calc(var(--sp-a) * 0.6); }
#atelier-section .sec-wrap { padding-top: calc(var(--sp-a) * 0.4 + 30px); }

/* 7. アトリエのパネル → News見出し（40% + 60%） */
#atelier-section .sec-wrap { padding-bottom: calc(var(--sp-a) * 0.4); }
.nb-col.nb-news { padding-top: calc(var(--sp-a) * 0.6); }

/* 8. News の View all → Blog見出し（50% + 50%） */
.nb-col.nb-news { padding-bottom: calc(var(--sp-a) * 0.5); }
.nb-col.nb-blog { padding-top: calc(var(--sp-a) * 0.5); }

/* 9. Blog の View all → Contact見出し（40% + 60%） */
.nb-col.nb-blog { padding-bottom: calc(var(--sp-a) * 0.4); }
.contact-section { padding-top: calc(var(--sp-a) * 0.6); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   左右軸のクランプ

   Concept見出し・リード文・Gallery見出しは「画面中央から546px左」を共通の
   左軸にしているが、1100px以下でこの値が負になり画面外へ出て文字が切れていた。
   最小40px程度で止まるようにクランプする。
   Gallery側は 50vw（スクロールバー込み）基準で7.5pxずれていたので合わせた。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 901px) {
  /* 2026-09-10：Concept と Gallery の「見出しだけ」を News の左端に合わせた。
     News は .nb-wrap(max 1520) の中で .nb-inner(max 1200) を中央寄せしたもので、
     左端は max(30px, 画面中央 - 600px)。30px は .nb-col の左右padding。
     リード文・本文・年代帯の見出しは従来どおり「中央 - 546px」のまま */
  #concept .sec-heading { margin-left: max(-244px, calc(-50vw + 393.5px)); }
  .concept-lead { margin-left: max(-190px, calc(-50vw + 417.5px)); }

  #gallery .sec-heading { margin-left: clamp(6px, calc(50vw - 631.5px), 136px); }
}

/* 1024px以下は .sec-wrap の左右paddingが24px→32pxに増えるぶん、
   Gallery側の下限も8px足して左端を揃える */
@media (min-width: 901px) and (max-width: 1024px) {
  #gallery .sec-heading { margin-left: clamp(6px, calc(50vw - 631.5px), 136px); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   はみ出しの後始末
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 100vw/50vw はスクロールバーを含む幅、親の50%は含まない幅なので、
   全幅要素は左右に7.5pxずつはみ出す。右側の7.5pxが横スクロールを生んでいた。
   clip は hidden と違いスクロールコンテナを作らないので sticky に影響しない */
#atelier-section { overflow-x: clip; }

/* .concept-body の左右は、見出し・リード文と同じ式で軸まで広げる。
   1100px以下では軸が画面外に出るので、同じ下限でクランプする */
@media (min-width: 901px) {
  .concept-body {
    margin-left:  max(-190px, calc(-50vw + 417.5px));
    margin-right: max(-190px, calc(-50vw + 417.5px));
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   アトリエ白ボックスの中身を上下中央に
   （左右の高さを揃える余りを住所欄に予約していたため、
    余白がすべて下に出て「下側が広い」状態になっていた。
    予約をボックス自体の min-height に移し、余りを上下へ均等に振る）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 901px) {
  .ap-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px;
  }
  /* 写真枠は padding-top で高さを作っているので伸縮させない */
  .ap-content > * { flex: none; }
}

/* 縦積みになる幅は住所の行数差が左右で出るため、ボックス高さを揃える */
@media (min-width: 1025px) and (max-width: 1400px) {
  .ap-content { min-height: 78%; padding: 32px; }
}
@media (min-width: 901px) and (max-width: 1024px) {
  .ap-content { min-height: 81%; padding: 24px; }
}

/* 1024px以下は .sec-wrap の左右paddingが32pxになるぶん、下限を8px戻して
   サブページ（Profile/Atelier）の 54px と揃える */
@media (min-width: 901px) and (max-width: 1024px) {
  #concept .sec-heading { margin-left: max(-252px, calc(-50vw + 385.5px)); }
  .concept-lead { margin-left: max(-190px, calc(-50vw + 409.5px)); }
}

/* サブページ（Profile / Atelier）のページタイトルを、TOPの6見出しと同じ
   大きさ・字間・中央揃えに合わせる。各ページの埋め込みstyleでは
   768px以下・1.4rem・字間0.15em になっていた */
@media (max-width: 900px) {
  .pf-page-title,
  .at-page-title {
    font-size: 2rem;
    letter-spacing: 0.25em;
    padding-left: 0.25em;
    text-align: center;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ギャラリー年代ページの余白スケール

   従来は作品ブロックの間隔が各HTMLのインライン style="margin-bottom: 200px"
   （5ページ計59箇所）で、ブレークポイントが一切効かずスマホでも200pxだった。
   作品名まわりの余白も全幅固定で、文字だけ縮んで間延びしていた。
   サイト共通のスケール（--sp-a 等）と同じ比率で4段階に縮むよう変数化する。

   --gl-gap  : 年代の区切り見出し（.gl-page-hero-sub）まわりの余白
               ※作品ブロックどうしの間隔は --gl-work-gap（下方で定義）
   --gl-ptop : スマホで写真の下に来る作品名までの余白
   --gl-pbot : 作品ブロック内テキストの下余白
   --gl-t2m  : 作品名（英題）→ 素材・寸法
   --gl-m2b  : 素材・寸法 → アコーディオンボタン
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {                            /* デスクトップ 1281px〜 */
  --gl-gap: 200px;
  --gl-ptop: 40px;
  --gl-pbot: 48px;
  --gl-t2m: 32px;
  --gl-m2b: 48px;
}
@media (max-width: 1280px) {       /* ノート */
  :root { --gl-gap: 160px; --gl-ptop: 34px; --gl-pbot: 42px; --gl-t2m: 26px; --gl-m2b: 40px; }
}
@media (max-width: 1024px) {       /* タブレット */
  :root { --gl-gap: 130px; --gl-ptop: 28px; --gl-pbot: 36px; --gl-t2m: 22px; --gl-m2b: 34px; }
}
@media (max-width: 900px) {        /* スマホ */
  :root { --gl-gap: 100px; --gl-ptop: 24px; --gl-pbot: 30px; --gl-t2m: 18px; --gl-m2b: 28px; }
}

/* 作品ブロックどうしの上下の間隔。--gl-gap の4段階（200/160/130/100px）に
   30px 足した値にしている。年代の区切り見出し（.gl-page-hero-sub）の余白は
   --gl-gap のままなので、そちらは変わらない */
:root { --gl-work-gap: calc(var(--gl-gap) + 30px); }
.gl-work { margin-bottom: var(--gl-work-gap); }

/* 縦組み（写真が左・文章が右）の作品が続くときは、写真の下端どうしが
   近く見えるので100px余分に空ける。あいだに年代の区切り見出し
   （.gl-page-hero-sub）が入る場合は隣接しないので対象外になる。
   後ろの要素に margin-top を足す書き方だと、前の要素の margin-bottom と
   相殺（マージンの重なり）されて効かないため、前の要素側を厚くする。
   :has() 非対応のブラウザでは単に従来の間隔に戻るだけ */
.gl-work-portrait:has(+ .gl-work-portrait) {
  margin-bottom: calc(var(--gl-work-gap) + 100px);
}

/* 作品名 → 素材・寸法 → アコーディオンボタン */
.gl-work-title-en { margin-bottom: var(--gl-t2m); }
.gl-work-medium { margin-bottom: var(--gl-m2b); }

/* スマホ・タブレットの縦積み時、写真の下から作品名までの余白を揃える。
   既存ルールが !important を使っているため同じ強さで上書きする */
@media (max-width: 900px) {
  .gl-work-text { padding: var(--gl-ptop) 20px var(--gl-pbot) !important; }
  .gl-work-text-featured { padding: var(--gl-ptop) 16px var(--gl-pbot) !important; }
  .gl-work-portrait .gl-work-text { padding: var(--gl-ptop) 16px var(--gl-pbot) !important; }
}
@media (max-width: 768px) {
  .gl-work-text,
  .gl-work-text-featured,
  .gl-work-portrait .gl-work-text { padding-left: 16px; padding-right: 16px; }
}

/* 年代グループを区切るサブ見出し。もとは各HTMLのインライン
   style="padding: 80px 40px 200px"（17箇所）で固定されていた */
.gl-page-hero-sub {
  padding: calc(var(--gl-gap) * 0.4) 40px var(--gl-gap);
}
.gl-page-hero-sub[data-sep="short"] {
  padding-bottom: calc(var(--gl-gap) * 0.3);
}
@media (max-width: 768px) {
  .gl-page-hero-sub { padding-left: 16px; padding-right: 16px; }
}

/* ===== 日本語の折り返し（行末の1〜2文字残しをなくす） =====
   スマホ幅で「〜であ／る。」のように文末の1〜2文字だけが次行に落ちる問題への対策。
   - text-wrap: pretty  … 段落末尾に短い行が残らないよう行分けを調整する
   - word-break: auto-phrase … 日本語を文節単位で折り返し、語の途中で切らない
   どちらも対応していないブラウザでは単に無視され、従来どおりの折り返しに戻る
   （＝レイアウトが崩れる心配はない）。2026-08時点で Chrome/Edge は両方、
   Safari は pretty のみ対応。英文では auto-phrase は何もしない。
   実測：index.html の375/390px幅で、短行が2件 → 0件になることを確認済み */
p,
li,
blockquote,
dd,
.concept-lead,
.concept-body,
.at-intro-text,
.at-seq-caps,
.pf-intro-text,
.gl-work-text,
.accordion-body-inner,
.nb-cell-body,
.ap-info-text {
  text-wrap: pretty;
  word-break: auto-phrase;
}

/* 例外：プロフィールの年譜は「年号｜内容」の2列で内容側の幅が狭く（320pxで128px）、
   文節で切らない auto-phrase だと「東京藝術大学 後期博士過程修了　博士号取得」が
   1文節扱いで折り返せず、320pxで25pxはみ出していた。ここだけ従来の折り返しに戻す */
.pf-meta-list li,
.pf-list li {
  word-break: normal;
}

/* ===== スマホのアトリエ情報帯：MAPを右に戻して大きく =====
   従来は「タイトル → MAP(幅150px、560px以下は140px) → ADD./Tel.」の縦積みで、
   MAPが小さく見づらかった。グリッドに変えて、タイトルは全幅のまま、
   下段を「住所＝左／MAP＝右」の2列にする。
   .ap-info-left は 1400px以下で display:contents なので、3つとも帯の直接の子として
   グリッドに並ぶ（HTMLの構造は変えていない）。
   MAPは横3:縦4の縦長にして面積を稼ぐ。列幅は clamp で下限150px・上限280pxを付ける
   （%だけだと320pxで従来より小さくなり、768px以上では逆に縦500px超になっていた） */
@media (min-width: 361px) and (max-width: 900px) {
  .ap-info-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(130px, 44%, 280px);
    /* MAPは右列を上下ぶち抜き。タイトルの行から始まり、Tel.の行の下端まで届く */
    grid-template-areas:
      "title map"
      "text  map";
    align-items: start;
    gap: 10px 12px;
  }
  /* 2列にすると住所側が痩せるので、狭い端末では住所だけ一回り小さくする
     （390pxで5行 → 3行。0.85remのままだと「ファミール岡山114号室」が折り返し続ける） */
  .ap-info-text span { font-size: 0.8rem; }
  /* タイトルも左列に収める。1.8remのままだと「岡山アトリエ」が2行に折り返す。
     1.3rem固定でも375pxでは2行になったので、狭い側だけ画面幅に連動させている */
  .ap-info-title { font-size: clamp(1rem, 4.6vw, 1.3rem); }
  .ap-info-title-row { grid-area: title; }
  .ap-info-text {
    grid-area: text;
    min-width: 0;
    /* MAPの高さは埋め込み地図の最小150pxで決まる。住所側をその高さいっぱいに広げ、
       ADD.を上・Tel.を下に置くことで、Tel.の下端がMAPの下端とそろう。
       MAP側を縮めて合わせると、390pxで従来（140×93）より小さくなってしまう */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .ap-map-frame {
    grid-area: map;
    align-self: stretch;
    width: 100%;
    max-width: none;
    /* タイトルの上端からTel.の下端までにぴったり収める（張り出さない）。
       高さは左列の中身なりになるので、min-heightは付けない */
    aspect-ratio: auto;
    min-height: 0;
  }
}

/* 360px以下は横に並べる余地がなく（MAPを右に置くと95px幅まで痩せて従来より小さい）、
   縦積みのまま全幅に広げたほうがMAPは大きく見える */
@media (max-width: 360px) {
  .ap-map-frame {
    width: 100%;
    max-width: none;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   年代別サムネイル帯（TOPのギャラリー下部）

   年代ごとに、その年代の全作品のサムネイルを1本の帯に並べる。
   クリックするとその年代ページの該当作品（#work-NN）へ飛ぶ。
   左端は Concept本文と同じ左右軸（中央-546px）、右端は画面の端まで流す。
   ※2026-09-10 に Gallery見出しだけを News の軸（中央-600px）へ移したので、
     この帯の見出しは Gallery見出しより 54px 内側にいる。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 流れる帯そのものは画面の右端から左端までいっぱいに使うので、
   .gl-strips には左右の余白を持たせない。
   左右軸をそろえるのは年代の見出しだけ。この式は .contact-outer（max-width:1520px・
   左右padding 24px・中央寄せ）の中でさらに
   margin-left: clamp(30px, 50vw - 577.5px, 190px) だけ右に寄っている。
   その3つを足した値を見出しの margin-left にする。
   100% は #gallery の内容幅（スクロールバーを含まない）＝ .contact-outer の
   基準幅なので、中央寄せぶんは vw ではなく % で計算する */
.gl-strip-head {
  margin-left: calc(
      max(0px, (100% - 1520px) / 2)
    + 24px
    + clamp(30px, calc(50vw - 577.5px), 190px)
  );
}

.gl-strip + .gl-strip { margin-top: 56px; }

/* ── 見出し（年代 ＋ ひとことキャッチ）── */
.gl-strip-head {
  display: inline-flex;
  align-items: baseline;
  /* 年号と時代名の間。ホバーで伸びる下線もこの幅ぶん長くなる。
     ギャラリーページの見出し(.gl-era-title)と同じ比率にそろえてある。
     年号 1.9rem(30.4px) × 1.1 = 33.4px */
  gap: 33.4px;
  margin-bottom: 18px;
  text-decoration: none;
  color: inherit;
  position: relative;   /* 下線（::after）の基準 */
}

/* 年代からキャッチまでを一本の線でつなぐ。ホバーで左から伸びる */
.gl-strip-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.gl-strip-head:hover::after,
.gl-strip-head:focus-visible::after { transform: scaleX(1); }

.gl-strip-year {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-style: italic;
  font-size: 1.9rem;
  letter-spacing: 0.1em;
  color: #B8902A;
  white-space: nowrap;
}

.gl-strip-catch {
  /* 時代名は、年代ページの大見出し(.gl-era-catch)・年代ナビ(.gl-nav-label)と
     同じ明朝でそろえる。Shippori Mincho は 400/500/600 を読み込んであるので
     見出しらしく 500 を使う */
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(14, 26, 58, 0.55);
  transition: color 0.4s ease;
}

.gl-strip-catch [lang="en"] { display: none; }

.gl-strip-head:hover .gl-strip-catch,
.gl-strip-head:focus-visible .gl-strip-catch { color: var(--ink); }

/* ── 帯（横スクロール）── */
/* 上の「流れる写真」と同じ作り：はみ出しは隠し、中の track を JS で横へ流す。
   スクロールバーは出さず、掴んで送る操作にする（処理は index.html の JS 側） */
.gl-strip-rail {
  overflow: hidden;
  width: 100%;
  cursor: grab;
  /* 縦スクロールは妨げない */
  touch-action: pan-y;
}

.gl-strip-track {
  display: flex;
  gap: 14px;
  width: max-content;
  align-items: flex-start;   /* 伸ばさない：伸ばすと一番背の高いコマに全部が引かれる */
  will-change: transform;
}

.gl-strip-track.dragging {
  cursor: grabbing;
  /* 掴んでいる間は文字が選択されないように */
  user-select: none;
}

.gl-strip-track img { -webkit-user-drag: none; user-select: none; }

/* ── 1コマ ── */
.gl-strip-cell {
  flex: 0 0 340px;
  /* flexアイテムの min-width は既定が auto（＝中身の最小幅）なので、
     長い作品名があるとコマが 168px を超えて広がってしまう。0 にして
     flex-basis を効かせ、はみ出しはキャプション側で省略する */
  min-width: 0;
  text-decoration: none;
  color: inherit;
  display: block;
}

.gl-strip-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--off);
}

.gl-strip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 0.7s ease, filter 0.5s ease;
  filter: saturate(0.85);
}

.gl-strip-cell:hover .gl-strip-thumb img,
.gl-strip-cell:focus-visible .gl-strip-thumb img {
  transform: scale(1.06);
  filter: saturate(1);
}

.gl-strip-cap {
  /* 作品名を2行で打ち切る。全文は <a> の aria-label に入れてあるので
     情報は失われない。高さを2行ぶんに固定して帯の下端を揃える */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* 標準の line-clamp は書かないこと。Chromeでは display の計算値が
     flow-root になって -webkit-box が無効になり、打ち切りが効かなくなる */
  overflow: hidden;
  padding: 9px 10px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  /* 高さは常に2行ぶん。-webkit-box が使えないブラウザでもここで切れる */
  height: calc(3em + 9px);
  word-break: normal;
  text-wrap: wrap;
}

.gl-strip-title {
  /* 年代ページの作品名（.gl-work-title）と同じ明朝にそろえる */
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(14, 26, 58, 0.6);
  transition: color 0.4s ease;
}

.gl-strip-title [lang="en"] { display: none; }

.gl-strip-cell:hover .gl-strip-title,
.gl-strip-cell:focus-visible .gl-strip-title { color: var(--ink); }

/* 帯ごとに、右から横に流れ込んでくる。
   中の写真が左へ流れ続ける動きと向きをそろえたいので、縦ではなく横に動かす。
   移動量は画面幅に合わせて大きめに取り、#gallery の overflow: hidden で
   右にはみ出したぶんを切る（横スクロールは出ない） */
.gl-strip {
  opacity: 0;
  transform: translateX(min(42vw, 620px));
  transition: opacity 1.3s ease, transform 1.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gl-strip.revealed {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .gl-strip { opacity: 1; transform: none; transition: none; }
  .gl-strip-thumb img { transition: none; }
}

/* ── タブレット以下 ── */
@media (max-width: 1024px) {
  .gl-strip-cell { flex-basis: 285px; }
  .gl-strip + .gl-strip { margin-top: 44px; }
}

/* ── スマホ ──
   左端は .sec-wrap と同じ16px。帯は画面の右端まで流す */
@media (max-width: 900px) {
  .gl-strip-head { margin-left: 16px; }
  .gl-strip-cell { flex-basis: 245px; }
  .gl-strip + .gl-strip { margin-top: 36px; }
  /* 間はここでも年号の1.1倍にそろえる（1.5rem = 24px × 1.1） */
  .gl-strip-head { gap: 26.4px; margin-bottom: 10px; }
  .gl-strip-year { font-size: 1.5rem; }
  .gl-strip-catch { font-size: 1.15rem; }
  /* 文字を大きくしたぶん、狭い幅ではコマ1つに入る字数が減る。
     2行だと長い作品名が12件切れてしまうので、ここだけ3行まで許容する */
  .gl-strip-cap {
    -webkit-line-clamp: 3;
    height: calc(4.5em + 9px);
  }
}

@media (max-width: 480px) {
  .gl-strip-cell { flex-basis: 215px; }
}

/* ── ⑥「対立を超えて」──
   まだ作品が無いので、見出しだけ出して帯の中は空にしてある。
   高さだけは他の帯とそろえたいので、コマ1つぶんの高さを min-height で確保する。
     コマの高さ ＝ 幅(.gl-strip-cell の flex-basis) × 9/16   ← .gl-strip-thumb の aspect-ratio
                 ＋ キャプション2行ぶん(.gl-strip-cap の height)
   .gl-strip-cap は font-size: 0.95rem なので、em ではなく rem 換算で書く。
   見出しは他の5本と同じくページへのリンク。掴んで送るものが無いので
   帯のカーソルだけ既定に戻す */
.gl-strip--empty .gl-strip-rail {
  cursor: default;
  min-height: calc(340px * 9 / 16 + 0.95rem * 3 + 9px);
}

/* コマが少なくて流さない帯（いまは era6 の「あたり」1コマ）。
   掴んで送るものが無いのでカーソルだけ既定に戻す */
.gl-strip--static .gl-strip-rail {
  cursor: default;
}

@media (max-width: 1024px) {
  .gl-strip--empty .gl-strip-rail { min-height: calc(285px * 9 / 16 + 0.95rem * 3 + 9px); }
}

@media (max-width: 900px) {
  /* この幅ではキャプションが3行ぶん（4.5em）になる */
  .gl-strip--empty .gl-strip-rail { min-height: calc(245px * 9 / 16 + 0.95rem * 4.5 + 9px); }
}

@media (max-width: 480px) {
  .gl-strip--empty .gl-strip-rail { min-height: calc(215px * 9 / 16 + 0.95rem * 4.5 + 9px); }
}

/* ギャラリー年代ページ側：#work-NN で飛んだとき、
   固定ヘッダー（72px / スマホ56px）に作品の上端が隠れないようにする */
.gl-work { scroll-margin-top: 104px; }

@media (max-width: 900px) {
  .gl-work { scroll-margin-top: 80px; }
}

/* ヘッダーの News / Blog から飛んだとき、見出しが固定ヘッダーの裏に隠れないようにする。
   #concept・#gallery・#contact は id が <section> に付いていて上に余白があるので
   隠れないが、#news・#blog は見出し(.nb-col-label)そのものに付いていて
   高さが66px（スマホ61px）しかなく、ヘッダー（72px／56px）に丸ごと潜っていた */
#news,
#blog { scroll-margin-top: 104px; }

@media (max-width: 900px) {
  #news,
  #blog { scroll-margin-top: 80px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   本文の両端揃え（右端をそろえる）

   コンセプト本文（.concept-body p）は以前から両端揃えだったので、
   同じ扱いを他の本文にも広げる。詩（.at-goemon-poem）のように
   <br> で改行している文はどの行も「最後の行」扱いになるため、
   指定しても見た目は変わらない。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* .concept-lead と詩（.at-goemon-poem）は <br> で1行ずつ改行した文なので
   対象外。両端揃えにしてもどの行も「最後の行」扱いで効かないうえ、
   効いてしまうと短い行が引き伸ばされて読みにくくなる */
.accordion-body-inner p,
.gl-note p,
.gl-nav-label,
.nb-txt {
  /* text-justify は指定しない。inter-character にすると字間が広がりすぎて、
     以前から両端揃えだった .concept-body p と見た目が変わってしまう */
  text-align: justify;
  /* 英語表示のとき、320pxのような狭い幅では単語の切れ目が少なく、
     両端揃えにすると1行だけ極端に間延びすることがある（1993s の
     「NEC × P3 art and environment × RACE」の行で1.8倍になっていた）。
     欧文だけハイフンで割れるようにして詰まりを逃がす。和文には効かない */
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* 行末に来た全角アキ（「。」の後ろに入れたもの）は、
   行の外へ逃がして右端をそろえる */
.accordion-body-inner p,
.gl-note p,
.at-umenokoya-text {
  hanging-punctuation: allow-end;
}

/* 両端揃えにした本文だけ、文節折り返し（word-break: auto-phrase）をやめる。

   auto-phrase は文節の切れ目でしか折り返さないため折り返し位置が少なく、
   両端揃えと組み合わせると行を埋めるために字間が大きく開く
   （320pxで「木・日用品の容器を用いた「庭」を」の行が目に見えて間延びしていた）。
   normal に戻すと行が詰まり、右端は揃ったまま字間の広がりが消える。

   auto-phrase を入れた目的だった「行末に1〜2文字だけ残る」問題は、
   両端揃えでは最終行以外がぴったり埋まるので起きない。最終行は
   text-wrap: pretty が引き続き面倒を見る。
   両端揃えにしていない要素（.concept-lead・コンセプト本文・詩・
   キャプション・年譜）は auto-phrase のまま。 */
.accordion-body-inner p,
.gl-note p,
.gl-nav-label,
.nb-txt,
.at-intro-text:not(.at-goemon-poem) {
  word-break: normal;
}

/* 作品の下に置く作家テキスト。アトリエの「静かな朝を迎えて〜」(.at-goemon-poem)
   と同じ体裁 ―― 明朝・斜体・黄土色。アコーディオンではなく開いたまま見せる */
.gl-note {
  max-width: 1000px;
  margin: calc(var(--gl-gap) * 0.5) auto;
  /* 本文の終わりから次の作品写真までは、作品どうしの間隔と同じだけ開ける
     （デスクトップ200px。--gl-gap の 200/160/130/100px に追従） */
  margin-bottom: var(--gl-gap);
  padding: 0 40px;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 2.1;
  letter-spacing: 0.04em;
  /* 見出し(.gl-note-title) と同じ紺にそろえる */
  color: rgba(14, 26, 58, 0.6);
}

/* 見出しは本文と切り離して「タイトル」として見せる。
   斜体をやめ、色は時代名(.gl-era-catch) と同じ紺、位置は本文の左端 */
.gl-note-title {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  color: rgba(14, 26, 58, 0.6);
  margin: 0 0 40px;
  text-align: left;
}

/* ▼（アコーディオン）の中の小見出し。原稿の「〇」にあたる、
   ▼のタイトル（●）より一段下の階層。
   ▼のタイトル(.accordion-btn)と同じ明朝を一回り小さくし、
   色は開いたまま見せる作家テキスト(.gl-note-title)と同じ紺にそろえる。
   日英の出し分けは中の <span lang> に任せるので、ここでは指定しない */
.accordion-body-inner .acc-sub {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  color: rgba(14, 26, 58, 0.6);
  text-align: left;
  /* 前の段落との間は、節の変わり目(.acc-group)と同じ2.8em＝実質1行ぶん */
  margin: 2.8em 0 1.2em;
}

.gl-note p { margin: 0 0 1.4em; }
.gl-note p:last-child { margin-bottom: 0; }

/* 時代の大見出しのすぐ下に置く導入テキストは、作品と作品の間に置く .gl-note
   （上下 --gl-gap*0.5 ＝ デスクトップ100px）ほど離す必要がない。
   大見出しの続きとして読ませたいので、上下とも半分の --gl-gap*0.25 にする
   （200/160/130/100px の4段階に追従して 50/40/32.5/25px） */
.gl-note--era-intro {
  /* 上は大見出しの続きとして読ませたいので詰める。
     下は最初の作品写真との切り替わりなので、上より少し開ける */
  margin-top: calc(var(--gl-gap) * 0.25);
  margin-bottom: var(--gl-gap);
}

/* 導入テキストが続くときは、大見出し側の下の空きも詰める。
   .gl-page-hero の padding-bottom（デスクトップ200px）と、h1 の margin-bottom（80px）が
   上の空きの大半を作っていて、導入文のマージンを削っただけでは効かないため。
   :has で「直後に導入文があるページ」だけに限定するので、era1・era2・era6 は変わらない。
   詳細度(0,3,0)で各ページの埋め込み .gl-page-hero(0,1,0) に勝つ。
   768px以下は埋め込み側が !important で padding-bottom:40px にしているので対象外 */
.gl-page-hero:not(.gl-page-hero-sub):has(+ .gl-note--era-intro) {
  padding-bottom: calc(var(--gl-gap) * 0.45);
}
.gl-page-hero:not(.gl-page-hero-sub):has(+ .gl-note--era-intro) .gl-era-title {
  margin-bottom: 32px;
}

/* 開いたまま見せる作家テキスト(.gl-note)の中の箇条書き。原稿の「〇」にあたる。
   行頭に記号を出さず、字下げだけで並びを見せる */
.gl-note-list {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0 0 0 1em;
}
.gl-note-list li { margin: 0 0 0.35em; }

/* ▼の中に置く「原文 → 現代語訳」の対。左に原文、右に訳を並べる。
   狭い画面では上下2段に落とす */
.acc-verse {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.7em 2.2em;
  margin: 1.6em 0 2.4em;
}
.acc-verse dt {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  color: rgba(14, 26, 58, 0.75);
  white-space: nowrap;
}
.acc-verse dd { margin: 0; }
body.lang-en ul[lang="en"],
body.lang-en ol[lang="en"],
body.lang-en dl[lang="en"] { display: block !important; }

/* ▼の中の「1. 2. 3.」の並び。原稿で番号を振って並べてある箇所に使う。
   「三段階とは、」→ 1〜3 →「というものだった。」で1つの文になるので、
   前後の段落との間は詰める。番号は左にぶら下げ、折り返した2行目は
   番号の右にそろえる（position: absolute ＋ padding-left） */
.accordion-body-inner .acc-steps {
  list-style: none;
  margin: 0.5em 0;
  padding: 0 0 0 1.2em;
  counter-reset: acc-step;
}
.accordion-body-inner .acc-steps li {
  position: relative;
  margin: 0 0 0.3em;
  padding-left: 1.8em;
  text-align: left;
}
.accordion-body-inner .acc-steps li:last-child { margin-bottom: 0; }
.accordion-body-inner .acc-steps li::before {
  counter-increment: acc-step;
  content: counter(acc-step) ".";
  position: absolute;
  left: 0;
  top: 0;
}
/* 並びの直前の段落は、文が続くので下の空きを消す */
.accordion-body-inner p.acc-steps-lead { margin-bottom: 0; }
body.lang-en .acc-verse[lang="en"] { display: grid !important; }

@media (max-width: 700px) {
  .acc-verse { grid-template-columns: 1fr; gap: 0; }
  .acc-verse dt { white-space: normal; margin-top: 1em; }
  .acc-verse dt:first-child { margin-top: 0; }
  .acc-verse dd { padding-left: 1em; }
}

@media (max-width: 768px) {
  .gl-note { padding: 0 24px; }
}

@media (max-width: 480px) {
  .gl-note { padding: 0 16px; font-size: 1rem; line-height: 2; }
  .gl-note-title { font-size: 1.2rem; letter-spacing: 0.15em; }
}

/* 郵便番号は「〒703-」「8256」のようにハイフンで割れてしまうので、
   ひとかたまりとして扱う。住所との間は全角スペースぶんの余白で空ける */
.ap-zip {
  white-space: nowrap;
  margin-right: 0.6em;
}


/* ━━━ 折り返せない長い作品名が、列を押し広げないようにする ━━━
   「NEVERTHELESS」は途中で切れない1語で、34px・字間0.18emだと375px要る。
   横並び作品のテキスト列は 901pxで303px / 1024pxで358px しかなく、
   flexアイテムは中身より小さくならないため列ごと広がっていた。その結果
     ・下の作品と年代見出しのひとことの左右がそろわない（1024pxで17px）
     ・901〜1000pxでは横スクロールまで出ていた（901pxで33px）
   列は列の幅を守らせ（min-width: 0）、どうしても入らない語だけ折り返す。
   入る幅（1060px以上）では1行のままなので、見た目は変わらない */
.gl-work-portrait .gl-work-text { min-width: 0; }
/* 最後の逃げ道。下の縮小で入るので通常はここまで来ない */
.gl-work-title { overflow-wrap: break-word; }

/* 901〜1100px では、折り返せない1語の作品名が列に入りきらず、
   min-width: 0 だけだと「NEVERTHELE／SS」のように語中で割れてしまう。
   この幅だけ作品名を列の幅に合わせて縮め、1行に収める。
     列の幅   = 45vw - 96px（写真55%＋間60px＋左右padding 40px から）
     必要な幅 = 文字サイズ × 11.03（「NEVERTHELESS」12字＋字間0.18em の実測）
   余裕を見て 11.3 で割っている。1100px以上では 2.125rem(34px) のまま */
@media (min-width: 901px) and (max-width: 1100px) {
  .gl-work-title { font-size: min(2.125rem, calc((45vw - 96px) / 11.3)); }
}