/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

/* ===================================================================
   Palette — White / Gray（2026-08 クライアント指定：背景=白、帯=グレー）
   旧 Powder Petal 配色は git 履歴参照
   =================================================================== */
:root {
  --color-bg: #FFFFFF;        /* 地色：白 */
  --color-bg-alt: #EDEDED;    /* 淡グレーの帯 */
  --color-surface: #FAFAFA;   /* カード、タイル */
  --color-ink: #212121;
  --color-ink-soft: #5C5C5C;
  --color-line: #C7C7C7;
  --color-line-soft: #E5E5E5;
  --color-accent: #757575;
  --color-footer-bg: #808080; /* フッター帯：グレー */
  --color-footer-ink: rgba(255,255,255,0.9);
  --bg-rgb: 255, 255, 255;    /* ヘッダーの背景（スクロール時） */
  --overlay-rgb: 32, 32, 32;  /* 写真のオーバーレイと影 */

  /* 写真の上に乗る文字・線は常に明色 */
  --color-on-dark: #FFFFFF;
  --on-dark-rgb: 255, 255, 255;

  --serif-jp: "Noto Serif JP", "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", serif;
  --serif-en: "Cormorant Garamond", "Georgia", serif;
  --sans-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --sans-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.4,.0,.2,1);
}

html { scroll-behavior: smooth; }

/* ===== 行割り調整（字余り対策） =====
   見出し: 各行がなるべく均等になるよう折り返し（1〜2文字の字余りを防ぐ）
   本文:   最終行が極端に短くならないよう調整
   ※ 非対応ブラウザでは従来どおりの折り返しになるだけで害はない */
h1, h2, h3, .section-title, .hero-title, .page-hero-title, .profile-name {
  text-wrap: balance;
  word-break: auto-phrase; /* 日本語を文節単位で折り返す（対応ブラウザのみ） */
}
p, dd, .section-lead, .lead {
  text-wrap: pretty;
}
/* 文節単位の折り返し固定: .pwで囲んだ語句の途中では改行しない
   （Safariはword-break: auto-phrase非対応のため、重要な見出しは明示指定） */
.pw { display: inline-block; }
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--sans-jp);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.02em;
}

/* Language visibility: default JP */
.lang-en { display: none; }
[data-lang="en"] .lang-ja { display: none; }
[data-lang="en"] .lang-en { display: inline; }
[data-lang="en"] body, [data-lang="en"] {
  font-family: var(--sans-en);
}

/* ===== Layout helpers ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.container.narrow {
  max-width: 760px;
}
.center { text-align: center; }

.section {
  padding: 120px 0;
  border-top: 1px solid var(--color-line-soft);
}
.section:first-of-type { border-top: 0; }

.section-label {
  font-family: var(--sans-en);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--color-accent);
  margin-bottom: 24px;
  text-transform: uppercase;
  font-weight: 400;
}
.section-title {
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.4;
  letter-spacing: 0.04em;
  margin-bottom: 40px;
  color: var(--color-ink);
}
[data-lang="en"] .section-title { font-family: var(--serif-en); font-weight: 400; letter-spacing: 0.02em; }
.section-lead {
  font-size: 16px;
  line-height: 2;
  color: var(--color-ink-soft);
  max-width: 720px; /* 明示的な<br>の行が意図しない位置で折り返さない幅 */
  margin: 0 auto 60px;
}
.section-heading { margin-bottom: 60px; }
.section-heading.center { text-align: center; }

/* ===== Header ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(var(--bg-rgb), 0);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(var(--bg-rgb), 0.94);
  border-bottom-color: var(--color-line-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-ink);
  transition: color 0.3s var(--ease);
}
.site-header:not(.is-scrolled) .logo { color: var(--color-on-dark); }
.logo-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-family: var(--serif-en);
  font-weight: 500;
  font-size: 25px;
  letter-spacing: 0.05em;
  line-height: 1;
}
.logo-sub {
  font-family: var(--sans-en);
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
}
.logo-text {
  font-family: var(--sans-en);
  font-size: 11px;
  letter-spacing: 0.24em;
  font-weight: 500;
}
.nav ul {
  display: flex;
  gap: 28px;
}
.nav a {
  font-family: var(--sans-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink);
  position: relative;
  padding: 6px 0;
  transition: color 0.3s var(--ease);
}
.site-header:not(.is-scrolled) .nav a { color: var(--color-on-dark); }
.nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease);
}
.nav a:hover::after { width: 100%; }
[data-lang="ja"] .nav a { font-family: var(--sans-jp); font-size: 13px; letter-spacing: 0.12em; }

.header-tools {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lang-toggle {
  font-family: var(--sans-en);
  font-size: 11px;
  letter-spacing: 0.2em;
  border: 1px solid currentColor;
  padding: 6px 12px;
  color: var(--color-ink);
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header:not(.is-scrolled) .lang-toggle { color: var(--color-on-dark); }
.lang-toggle:hover { background: var(--color-ink); color: var(--color-bg); }
.site-header:not(.is-scrolled) .lang-toggle:hover { background: var(--color-surface); color: var(--color-ink); }

.menu-toggle {
  display: none;
  width: 28px;
  height: 22px;
  position: relative;
  color: var(--color-ink);
}
.site-header:not(.is-scrolled) .menu-toggle { color: var(--color-on-dark); }
.menu-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  position: absolute;
  left: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), top 0.3s var(--ease);
}
.menu-toggle span:nth-child(1) { top: 4px; }
.menu-toggle span:nth-child(2) { top: 11px; }
.menu-toggle span:nth-child(3) { top: 18px; }
.menu-toggle.is-open span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* ===== Hero ===== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  color: var(--color-on-dark);
}
.hero-slides {
  position: absolute;
  inset: -10px; /* ぼかしで縁がにじまないよう画面外まで広げる（.heroがoverflow:hidden） */
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s var(--ease), transform 8s var(--ease);
  transform: scale(1.02);
}
.hero-slide.is-active {
  opacity: 1;
  transform: scale(1.08);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  /* 文字が乗る左側だけ濃くし、写真の主役が写る右側は素のまま見せる
     （ぼかしをかけずにコピーの可読性を確保するため） */
  background:
    linear-gradient(90deg, rgba(var(--overlay-rgb),0.72) 0%, rgba(var(--overlay-rgb),0.42) 48%, rgba(var(--overlay-rgb),0.06) 100%),
    linear-gradient(180deg, rgba(var(--overlay-rgb),0.26) 0%, rgba(var(--overlay-rgb),0.16) 40%, rgba(var(--overlay-rgb),0.44) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-shadow: 0 1px 14px rgba(0,0,0,0.42); /* 明るい写真の上でもコピーが沈まないように */
}
.hero-eyebrow {
  font-family: var(--sans-en);
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  margin-bottom: 24px;
  opacity: 0.85;
  font-weight: 400;
}
[data-lang="ja"] .hero-eyebrow { font-family: var(--sans-jp); letter-spacing: 0.2em; font-size: 12px; }
.hero-title {
  font-family: var(--serif-jp);
  font-weight: 300;
  font-size: clamp(36px, 6vw, 76px);
  line-height: 1.25;
  letter-spacing: 0.05em;
  margin-bottom: 28px;
  max-width: 800px;
}
[data-lang="en"] .hero-title { font-family: var(--serif-en); font-weight: 300; letter-spacing: 0.01em; }
.hero-sub {
  font-size: 16px;
  line-height: 2;
  max-width: 540px;
  opacity: 0.92;
  margin-bottom: 48px;
}
.hero-cta {
  font-family: var(--sans-en);
  font-size: 11px;
  letter-spacing: 0.32em;
  border: 1px solid var(--color-on-dark);
  padding: 16px 32px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.hero-cta:hover { background: var(--color-surface); color: var(--color-ink); }

.hero-dots {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 14px;
}
.hero-dots button {
  width: 28px;
  height: 1px;
  background: rgba(var(--on-dark-rgb),0.4);
  transition: background 0.3s var(--ease), width 0.3s var(--ease);
}
.hero-dots button.is-active { background: var(--color-surface); width: 48px; }

/* ===== Statement ===== */
.statement { background: var(--color-bg); text-align: center; padding: 140px 0; }
.statement .section-label { display: inline-block; }
.statement-body p {
  font-family: var(--serif-jp);
  font-size: 17px;
  line-height: 2.2;
  color: var(--color-ink);
  margin-bottom: 28px;
  text-align: left;
}
[data-lang="en"] .statement-body p { font-family: var(--serif-en); font-size: 19px; line-height: 1.85; letter-spacing: 0.01em; }
.statement-signature {
  font-family: var(--sans-en) !important;
  font-size: 12px !important;
  letter-spacing: 0.24em;
  color: var(--color-accent) !important;
  margin-top: 40px !important;
  text-align: center !important;
}

/* ===== Concept ===== */
.concept { background: var(--color-bg-alt); }
.concept-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 80px;
  align-items: start;
}
.concept-image {
  position: sticky;
  top: 120px;
}
.concept-image img {
  width: 100%;
  height: auto; /* 構図の左右を切らず、写真そのままの比率で見せる */
}
.concept-text .lead {
  font-family: var(--serif-jp);
  font-size: 18px;
  line-height: 2;
  color: var(--color-ink);
  margin-bottom: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--color-line);
}
.concept-text .lead p + p { margin-top: 1.5em; }
[data-lang="en"] .concept-text .lead { font-family: var(--serif-en); font-size: 20px; line-height: 1.7; }
.concept-list li {
  margin-bottom: 36px;
  padding-left: 0;
}
.concept-list h3 {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  color: var(--color-ink);
}
[data-lang="en"] .concept-list h3 { font-family: var(--serif-en); font-weight: 500; letter-spacing: 0.02em; font-size: 22px; }
.concept-list p {
  font-size: 15px;
  line-height: 2;
  color: var(--color-ink-soft);
}

/* ===== Services ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}
.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line-soft);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -24px rgba(var(--overlay-rgb),0.18);
}
.service-thumb {
  width: 100%;
  height: 280px;
  background-size: cover;
  background-position: center;
}
.service-body { padding: 40px 36px 44px; }
.service-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  color: var(--color-accent);
}
.service-icon svg { width: 100%; height: 100%; }
.service-num {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.service-card h3 {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  line-height: 1.4;
}
[data-lang="en"] .service-card h3 { font-family: var(--serif-en); font-weight: 500; font-size: 26px; letter-spacing: 0.01em; }
.service-card p {
  font-size: 14.5px;
  line-height: 2;
  color: var(--color-ink-soft);
}

/* ===== Profile ===== */
.profile { background: var(--color-bg); }
.profile-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 80px;
  align-items: center;
}
.profile-name {
  font-family: var(--serif-en);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  margin-bottom: 28px;
}
.profile-name small {
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--color-accent);
  margin-left: 14px;
}
.profile-text p {
  font-size: 15.5px;
  line-height: 2.1;
  color: var(--color-ink);
  margin-bottom: 40px;
}
.profile-meta {
  border-top: 1px solid var(--color-line);
}
.profile-meta > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-line-soft);
  align-items: baseline;
}
.profile-meta dt {
  font-family: var(--sans-en);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--color-accent);
  text-transform: uppercase;
}
[data-lang="ja"] .profile-meta dt { font-family: var(--sans-jp); letter-spacing: 0.12em; font-size: 12px; }
.profile-meta dd {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-ink);
  margin: 0;
}
.profile-image img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}

/* ===== Gallery ===== */
.gallery { background: var(--color-bg-alt); }
/* クライアント指定の9枚を3×3で組む。全体が正方形の一枚板になり、下端が揃う */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gallery-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  cursor: pointer;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 1.2s var(--ease), filter 0.4s var(--ease);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--overlay-rgb),0.78) 100%);
  color: var(--color-on-dark);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.gallery-item:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Contact ===== */
.contact { background: var(--color-bg); padding: 140px 0; }
.contact .section-label.center { display: inline-block; margin: 0 auto 24px; }
.contact-lead {
  font-size: 16px;
  line-height: 2.1;
  color: var(--color-ink-soft);
  margin: 0 auto 60px;
  max-width: 600px;
}
.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}
.contact-method {
  display: block;
  padding: 36px 24px;
  border: 1px solid var(--color-line);
  text-align: center;
  background: var(--color-surface);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.contact-method:hover {
  border-color: var(--color-ink);
  transform: translateY(-3px);
}
.contact-label {
  font-family: var(--sans-en);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--color-accent);
  margin-bottom: 14px;
  font-weight: 500;
}
.contact-value {
  font-family: var(--serif-en);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  margin-bottom: 12px;
}
.contact-note {
  font-size: 12px;
  color: var(--color-ink-soft);
  line-height: 1.6;
}
.contact-foot {
  font-size: 12px;
  color: var(--color-ink-soft);
  line-height: 1.8;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-ink);
  padding: 80px 0 40px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-logo {
  font-family: var(--sans-en);
  font-size: 14px;
  letter-spacing: 0.24em;
  color: var(--color-on-dark);
  margin-bottom: 12px;
  font-weight: 500;
}
.footer-tagline {
  font-family: var(--serif-jp);
  font-size: 13px;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
[data-lang="en"] .footer-tagline { font-family: var(--serif-en); }
.footer-meta {
  text-align: right;
  font-size: 12px;
  line-height: 1.8;
  max-width: 480px;
}
.footer-meta p + p { margin-top: 8px; opacity: 0.6; }

/* ===== Reveal-on-scroll ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-slide { transition: opacity 0.4s linear; transform: none; }
  .hero-slide.is-active { transform: none; }
  html { scroll-behavior: auto; }
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .nav { display: none; }
  .nav.is-open {
    display: block;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--color-bg);
    padding: 32px;
    border-top: 1px solid var(--color-line-soft);
  }
  .nav.is-open ul { flex-direction: column; gap: 20px; }
  .menu-toggle { display: block; }

  .concept-grid { grid-template-columns: 1fr; gap: 48px; }
  /* モバイルではヒーロー画像の直後に写真が重ならないよう、本文の後ろに回す */
  .concept-image { position: static; order: 2; }
  .concept-text { order: 1; }

  /* 肩書は名前の下に1行で（途中改行しない） */
  .profile-name small { display: block; margin-left: 0; margin-top: 12px; }

  .services-grid { grid-template-columns: 1fr; gap: 32px; }
  .service-thumb { height: 240px; }

  .profile-grid { grid-template-columns: 1fr; gap: 48px; }
  .profile-image img { height: 420px; }


  .contact-methods { grid-template-columns: 1fr; }

  .footer-inner { flex-direction: column; }
  .footer-meta { text-align: left; }

  .section { padding: 80px 0; }
  .hero { height: 100vh; min-height: 540px; }

  .header-inner { padding: 16px 20px; }
  .container { padding: 0 20px; }
  .logo-text { display: none; }
}

@media (max-width: 540px) {
  /* 狭い画面では3列だとタイルが小さすぎて写真が見えないため2列に。
     9枚は2で割り切れないので、先頭の1枚を横いっぱいに使って下端を揃える */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gallery-item:first-child { grid-column: span 2; }
  .gallery-item:first-child img { aspect-ratio: 4 / 3; }
  .profile-meta > div { grid-template-columns: 1fr; gap: 4px; }
  /* 「共にある暮らしへ。」が2行に割れないサイズに */
  .hero-title { font-size: 32px; }

  /* 縦長すぎる画面では横長写真がほとんど切り落とされるため高さを抑える。
     svh はアドレスバーの伸縮で高さが跳ねないようにするため（非対応環境は上のvhを使う） */
  .hero { height: 74vh; height: 74svh; min-height: 480px; }

  /* PC用の改行指定は狭い画面だと「改行＋折り返し」で行が細切れになるため無効化し、
     行を埋めながら折り返させる（語の途中で切れないよう .pw で語句を保護している） */
  .section-lead:not(.lead-fixed) br { display: none; }

  /* .lead-fixed は改行位置を指定どおり保つ箇所。一番長い行が折り返さないよう、
     その行の文字数（--lead-units）から必要な文字サイズを逆算する。
     16pxを上限、9.5pxを下限とし、極端に狭い端末では折り返しを許容する */
  .lead-fixed {
    font-size: max(9px, min(16px, calc((100vw - 44px) / var(--lead-units, 26))));
    letter-spacing: 0;
  }

}

/* ===== Journal: 記事公開前の告知ブロック ===== */
.journal-notice {
  max-width: 640px;
  margin: 0 auto;
  padding: 72px 32px 76px;
  text-align: center;
  border: 1px solid var(--color-line-soft);
  background: var(--color-surface);
}
.journal-notice-label {
  font-family: var(--sans-en);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--color-accent);
  margin-bottom: 20px;
}
.journal-notice-title {
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}
[data-lang="en"] .journal-notice-title { font-family: var(--serif-en); font-size: 27px; }
.journal-notice-text {
  font-size: 15px;
  line-height: 2;
  color: var(--color-ink-soft);
}
@media (max-width: 540px) {
  .journal-notice { padding: 56px 24px 60px; }
  .journal-notice-title { font-size: 21px; }
}

/* ===== Works（実績サムネイル） ===== */
.works { background: var(--color-bg-alt); }
.works-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.works-item {
  margin: 0;
  overflow: hidden;
  background: var(--color-bg);
}
.works-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.works-item:hover img { transform: scale(1.05); }
@media (max-width: 960px) {
  .works-grid { grid-template-columns: repeat(7, 1fr); gap: 8px; }
}
@media (max-width: 640px) {
  .works-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Subpages: nav active state ===== */
.nav a.is-active::after { width: 100%; }
.nav a.is-active { color: var(--color-accent); }
.site-header:not(.is-scrolled) .nav a.is-active { color: var(--color-on-dark); }

/* ===== Subpages: page hero ===== */
.page-hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  padding: 160px 0 64px;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--overlay-rgb),0.45), rgba(var(--overlay-rgb),0.55));
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  color: var(--color-on-dark);
}
.page-hero-label {
  font-family: var(--sans-en);
  font-size: 11px;
  letter-spacing: 0.34em;
  margin-bottom: 14px;
  opacity: 0.85;
}
.page-hero-title {
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 0.06em;
  line-height: 1.4;
}
[data-lang="en"] .page-hero-title { font-family: var(--serif-en); font-weight: 500; }

/* ===== Journal ===== */
.journal { background: var(--color-bg); }
.journal-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 64px;
}
.journal-item {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-line-soft);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.journal-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(var(--overlay-rgb),0.08);
}
.journal-thumb { margin: 0; overflow: hidden; }
.journal-thumb img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.journal-item:hover .journal-thumb img { transform: scale(1.04); }
.journal-body { padding: 28px 28px 32px; }
.journal-date {
  font-family: var(--sans-en);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--color-accent);
  margin-bottom: 12px;
}
.journal-title {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.6;
  margin-bottom: 12px;
}
[data-lang="en"] .journal-title { font-family: var(--serif-en); font-size: 21px; }
.journal-excerpt {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--color-ink-soft);
  margin-bottom: 18px;
}
.journal-more {
  font-family: var(--sans-en);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--color-ink);
}
.journal-cta { text-align: center; }
.journal-cta .hero-cta { color: var(--color-ink); border-color: currentColor; }

/* ===== Calendar ===== */
.calendar { background: var(--color-bg); }
.calendar-year {
  font-family: var(--serif-en);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--color-ink);
  margin-bottom: 36px;
}
.calendar-list { border-top: 1px solid var(--color-line); }
.calendar-month {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--color-line-soft);
}
.calendar-month-label {
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}
[data-lang="en"] .calendar-month-label { font-family: var(--serif-en); font-weight: 500; }
.calendar-month ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.calendar-month li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px dotted var(--color-line-soft);
  padding-bottom: 10px;
}
.calendar-month li:last-child { border-bottom: 0; padding-bottom: 0; }
.fair-name {
  font-family: var(--serif-jp);
  font-size: 16.5px;
  letter-spacing: 0.04em;
}
.fair-name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.fair-name a:hover { border-bottom-color: currentColor; }
[data-lang="en"] .fair-name { font-family: var(--serif-en); font-size: 18px; }
.fair-meta {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-shrink: 0;
}
.fair-city {
  font-family: var(--sans-en);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.fair-date {
  font-family: var(--sans-en);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  white-space: nowrap;
  min-width: 72px;
  text-align: right;
}

/* ===== Subpage responsive ===== */
@media (max-width: 900px) {
  .journal-list { grid-template-columns: 1fr; }
  .calendar-month { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 600px) {
  .calendar-month li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .fair-meta { gap: 14px; }
  .fair-date { min-width: 0; text-align: left; }
}

/* ===== Contact form (placeholder) ===== */
.contact-form {
  max-width: 640px;
  margin: 0 auto 72px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.form-field { margin-bottom: 32px; }
.form-field label {
  display: block;
  font-family: var(--sans-en);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--color-ink-soft);
  margin-bottom: 10px;
  text-transform: uppercase;
}
[data-lang="ja"] .form-field label { font-family: var(--sans-jp); letter-spacing: 0.18em; }
.form-field label em {
  font-style: normal;
  color: var(--color-accent);
  margin-left: 4px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--color-ink);
  padding: 8px 2px 10px;
  transition: border-color 0.3s var(--ease);
  border-radius: 0;
}
.form-field textarea { resize: vertical; line-height: 1.9; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}
.form-submit { text-align: center; margin-top: 8px; }
.form-button {
  font-family: var(--sans-en);
  font-size: 12px;
  letter-spacing: 0.28em;
  border: 1px solid var(--color-ink);
  padding: 14px 56px;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.form-button:hover {
  background: var(--color-ink);
  color: var(--color-bg);
}
.form-thanks {
  text-align: center;
  margin-top: 28px;
  font-size: 15px;
  color: var(--color-accent);
}
.form-error {
  text-align: center;
  margin-top: 28px;
  font-size: 15px;
  color: #9B3A3A;
}
/* 迷惑送信よけの囮欄。画面にも読み上げにも出さない */
.form-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 660px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ===== Contact info (line style + SNS icon) ===== */
.contact-info { max-width: 640px; margin: 0 auto; }
.contact-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line-soft);
  padding: 22px 2px;
}
.contact-line-label {
  font-family: var(--sans-en);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--color-accent);
}
.contact-line-value {
  font-family: var(--serif-jp);
  font-size: 15.5px;
  letter-spacing: 0.04em;
  text-align: right;
}
[data-lang="en"] .contact-line-value { font-family: var(--serif-en); font-size: 16.5px; }
.contact-sns {
  text-align: center;
  margin: 40px 0 8px;
}
.sns-icon {
  display: inline-flex;
  padding: 10px;
  color: var(--color-ink);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.sns-icon:hover {
  color: var(--color-accent);
  transform: translateY(-2px);
}
@media (max-width: 540px) {
  .contact-line { flex-direction: column; gap: 6px; }
  .contact-line-value { text-align: left; }
}

/* ===== Mobile menu fixes ===== */
@media (max-width: 960px) {
  /* 開いたメニュー内のリンクは、ヘッダー透明時（ページ最上部）でも必ず読める色に */
  .nav.is-open a,
  .site-header:not(.is-scrolled) .nav.is-open a { color: var(--color-ink); }
  .nav.is-open a.is-active,
  .site-header:not(.is-scrolled) .nav.is-open a.is-active { color: var(--color-accent); }

  .nav.is-open {
    box-shadow: 0 24px 48px rgba(var(--overlay-rgb),0.12);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .nav.is-open a { display: block; padding: 10px 0; font-size: 14px; }
}

/* iOSのフォーカス時自動ズームを防ぐ（16px未満だと発動する） */
.form-field input,
.form-field textarea { font-size: 16px; }

/* ===== Instagram feed (モック — 実運用はウィジェット/Graph API に差し替え) ===== */
.instagram { background: var(--color-bg); }
.instagram .section-label { display: inline-block; }

.ig-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-line-soft);
}

.ig-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-line-soft);
}
.ig-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--serif-en);
  font-size: 22px;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ig-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ig-id { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.ig-handle {
  color: var(--color-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.ig-handle:hover { color: var(--color-accent); }
.ig-name {
  font-size: 11px;
  color: var(--color-ink-soft);
  letter-spacing: 0.06em;
}
.ig-follow {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-ink);
  text-decoration: none;
  border: 1px solid var(--color-ink);
  padding: 7px 16px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.ig-follow:hover { background: var(--color-ink); color: var(--color-on-dark); }

.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  background: var(--color-surface);
}
.ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.ig-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s var(--ease);
}
.ig-tile:hover img { opacity: 0.82; }

/* Instagram側で「ピン留め」された投稿の想定（先頭3コマ） */
.ig-tile.is-pinned::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--overlay-rgb),0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M14.6 2.6l6.8 6.8-2 .9-3.4 3.4.3 4.3-1.6 1.6-4.2-4.2-5.6 5.7-1.4-1.4 5.7-5.6-4.2-4.2 1.6-1.6 4.3.3 3.4-3.4z'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.ig-more {
  display: block;
  text-align: center;
  padding: 16px 20px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-ink-soft);
  text-decoration: none;
  border-top: 1px solid var(--color-line-soft);
  transition: color 0.3s var(--ease);
}
.ig-more:hover { color: var(--color-accent); }

@media (max-width: 640px) {
  .ig-header { padding: 14px 16px; }
  .ig-grid { gap: 2px; }
}