/*
================================================================
  style.css — Nakatsuru Artist Portfolio
  白・黒・淡い青 / 静謐・詩的・凛
================================================================
  分割想定 (将来の SCSS 化時):
    _variables.scss    → CUSTOM PROPERTIES
    _base.scss         → RESET & BASE
    _utility.scss      → UTILITY / ACCESSIBILITY / ANIMATION
    _components.scss   → COMMON COMPONENTS
    _header.scss       → SITE HEADER / NAVIGATION
    _hero.scss         → HERO SECTION (front-page)
    _statement.scss    → STATEMENT SECTION (front-page)
    _works.scss        → WORKS PREVIEW SECTION (front-page)
    _news.scss         → NEWS PREVIEW SECTION (front-page)
    _cta.scss          → CONTACT CTA SECTION (共通)
    _scene-break.scss  → SCENE BREAK (共通)
    _flower.scss       → FLOWER SILHOUETTE (共通)
    _footer.scss       → SITE FOOTER (共通)
    _page-intro.scss   → PAGE INTRO (内部ページ共通)
    _profile.scss      → PROFILE PAGE
    _responsive.scss   → RESPONSIVE OVERRIDES
================================================================
*/


/* ================================================================
   CUSTOM PROPERTIES
   ================================================================ */
:root {
  /* --- Colors --- */
  --clr-bg:           #F8F7F5;   /* 温かみある白 */
  --clr-text:         #1C1C1C;   /* 深黒 */
  --clr-muted:        #8A8A8A;   /* 補助テキスト */
  --clr-accent:       #A9C4D2;   /* 淡い青（差し色） */
  --clr-accent-deep:  #6D9FB5;   /* 淡い青・濃い目 */
  --clr-border:       #D8D4CE;   /* 繊細なボーダー */
  --clr-hover:        rgba(169, 196, 210, 0.10); /* hover背景 */
  --clr-error:        #9E6B6B;   /* エラーテキスト（落ち着いた赤） */

  /* --- Typography --- */
  --font-jp:   'Noto Serif JP', Georgia, '游明朝', serif;
  --font-en:   'Cormorant Garamond', Georgia, serif;

  /* --- Spacing scale --- */
  --sp-xs:   0.5rem;   /*  5px */
  --sp-sm:   1.0rem;   /* 10px */
  --sp-md:   2.0rem;   /* 20px */
  --sp-lg:   4.0rem;   /* 40px */
  --sp-xl:   7.0rem;   /* 70px */
  --sp-2xl: 10.0rem;   /* 100px */

  /* --- Layout --- */
  --max-w:   1200px;
  --gutter:  2.4rem;

  /* --- Transitions --- */
  --ease:      0.35s ease;
  --ease-slow: 0.65s ease;
}


/* ================================================================
   RESET & BASE
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.0;
  letter-spacing: 0.06em;
  color: var(--clr-text);
  background-color: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
}


/* ================================================================
   UTILITY / ACCESSIBILITY
   ================================================================ */

/* スクリーンリーダー用非表示 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ================================================================
   SCROLL FADE-IN ANIMATION
   .js-fade-in → initial state (hidden)
   .js-fade-in.is-visible → animated in (via IntersectionObserver)
   ================================================================ */
.js-fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Works カード: 順番に遅延 */
.works-grid .js-stagger:nth-child(1) { transition-delay: 0.08s; }
.works-grid .js-stagger:nth-child(2) { transition-delay: 0.22s; }
.works-grid .js-stagger:nth-child(3) { transition-delay: 0.36s; }

/* News リスト: 順番に遅延 */
.news-list .js-fade-in:nth-child(1) { transition-delay: 0.04s; }
.news-list .js-fade-in:nth-child(2) { transition-delay: 0.16s; }
.news-list .js-fade-in:nth-child(3) { transition-delay: 0.28s; }


/* ================================================================
   COMMON COMPONENTS — text-link
   ================================================================ */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--clr-text);
  border-bottom: 1px solid var(--clr-border);
  padding-bottom: 0.25em;
  transition: border-color var(--ease), color var(--ease);
}

.text-link:hover {
  border-color: var(--clr-text);
}

.text-link__arrow {
  display: inline-block;
  transition: transform var(--ease);
}

.text-link:hover .text-link__arrow {
  transform: translateX(5px);
}


/* ================================================================
   COMMON COMPONENTS — section-header
   ================================================================ */
.section-header {
  margin-bottom: var(--sp-lg);
}

.section-header__title {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.section-header__en {
  font-family: var(--font-en);
  font-size: 3.4rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--clr-text);
}

.section-header__ja {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.20em;
  color: var(--clr-muted);
}


/* ================================================================
   COMMON COMPONENTS — section-more
   ================================================================ */
.section-more {
  margin-top: var(--sp-lg);
  text-align: right;
}


/* ================================================================
   SITE HEADER / NAVIGATION
   ================================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: rgba(248, 247, 245, 0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease-slow);
}

.site-header.is-scrolled {
  border-bottom-color: var(--clr-border);
}

.site-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 6.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ロゴ */
.site-header__logo-en {
  font-family: var(--font-en);
  font-size: 1.95rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: var(--clr-text);
  display: block;
}

/* デスクトップ ナビ */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
}

.site-nav__link {
  font-family: var(--font-en);
  font-size: 1.28rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  color: var(--clr-text);
  position: relative;
  padding-bottom: 0.2em;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--clr-accent-deep);
  transition: width var(--ease);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  width: 100%;
}

/* ハンバーガー（デスクトップ非表示） */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 2.8rem;
  height: 2.8rem;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--clr-text);
  transition: transform var(--ease), opacity var(--ease);
  transform-origin: center;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}


/* ================================================================
   HERO SECTION
   ================================================================ */
.hero {
  min-height: 100svh;
  min-height: 100vh; /* fallback */
  display: flex;
  align-items: center;
  padding: 10rem var(--gutter) var(--sp-xl);
  position: relative;

  /* ---- 背景画像 ----
     WordPress化時: style属性の background-image で差し替え可
     例: <section class="hero" style="background-image:url('<?php echo $img; ?>')">
  */
  background-image: url('../images/hero.jpg');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  background-color: var(--clr-bg); /* 画像未設定時のフォールバック */
}

/* ヴェール：白い薄膜をかけてすりガラス風に仕上げる
   opacity 調整の目安:
     淡い・明るめの画像 → rgba(..., 0.60〜0.65)
     暗め・濃いめの画像 → rgba(..., 0.72〜0.78)
*/
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(248, 247, 245, 0.68);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  z-index: 0;
  pointer-events: none;
}

/* テキスト要素を overlay（::before）より前面に出す */
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}

/* アイウォーター（小さなラベル） */
.hero__eyebrow {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  color: var(--clr-muted);
  margin-bottom: var(--sp-md);
  opacity: 0;
  animation: fadein 1.2s ease 0.3s forwards;
}

/* キャッチコピー */
.hero__catchcopy {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: clamp(4rem, 7.2vw, 7.6rem);
  line-height: 1.55;
  letter-spacing: 0.14em;
  color: var(--clr-text);
  margin-bottom: var(--sp-xl);
}

.hero__catchcopy-line {
  display: block;
  opacity: 0;
  transform: translateY(18px);
  animation: fadein 1.0s ease forwards;
}

.hero__catchcopy-line:nth-child(1) { animation-delay: 0.55s; }
.hero__catchcopy-line:nth-child(2) { animation-delay: 0.78s; }

/* サブテキスト */
.hero__sub {
  font-family: var(--font-jp);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.25;
  letter-spacing: 0.10em;
  color: var(--clr-muted);
  max-width: 26em;
  opacity: 0;
  animation: fadein 1.0s ease 1.1s forwards;
}

/* スクロール誘導ライン */
.hero__scroll {
  display: inline-block;
  margin-top: var(--sp-2xl);
  opacity: 0;
  animation: fadein 1.0s ease 1.6s forwards;
}

.hero__scroll-line {
  display: block;
  width: 1px;
  height: 5.4rem;
  background: linear-gradient(to bottom, transparent, var(--clr-muted));
  animation: scrollpulse 2.8s ease-in-out 2.2s infinite;
}

/* Hero アニメーション定義 */
@keyframes fadein {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollpulse {
  0%, 100% { opacity: 0.35; transform: scaleY(1);    }
  50%       { opacity: 0.75; transform: scaleY(1.12); }
}


/* ================================================================
   STATEMENT SECTION
   ================================================================ */
.statement {
  padding: var(--sp-2xl) var(--gutter);
  border-top: 1px solid var(--clr-border);
}

.statement__inner {
  max-width: 54rem;
  margin: 0 auto;
}

.statement__body {
  margin-bottom: var(--sp-xl);
}

.statement__text {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 2.25;
  letter-spacing: 0.10em;
  color: var(--clr-text);
  margin-bottom: var(--sp-lg);
}

/* 引用風のインデント */
.statement__text--quoted {
  padding-left: 2.2em;
  border-left: 1px solid var(--clr-border);
  color: var(--clr-text);
}

.statement__cta {
  text-align: right;
}

/* 写真：テキストの後、右寄りに静かに置く
   WordPress化時: the_field('statement_image') の <img> に差し替え */
.statement__figure {
  margin: var(--sp-xl) 0 var(--sp-xl) auto;
  width: 65%;
  background-color: #ECEAE7; /* 画像未設定時フォールバック */
}

.statement__figure-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  opacity: 0.80;
  background-color: #ECEAE7; /* ファイル未設置でも aspect-ratio で高さ確保 */
  transition: opacity var(--ease-slow);
}


/* ================================================================
   SCENE BREAK — セクション間の雰囲気イメージ
   WordPress: get_template_part('parts/scene-break')
   ================================================================ */
.scene-break {
  padding: 0 var(--gutter) var(--sp-xl);
}

.scene-break__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.scene-break__figure {
  background-color: #ECEAE7; /* 画像未設定時フォールバック */
}

.scene-break__img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 8;      /* 横長シネマ比率。画像に合わせて調整可 */
  object-fit: cover;
  object-position: center;
  opacity: 0.72;             /* 余白の中に沈む存在感 */
  background-color: #ECEAE7; /* ファイル未設置でも高さを確保 */
  transition: opacity var(--ease-slow);
}


/* ================================================================
   WORKS PREVIEW SECTION
   ================================================================ */
.works-preview {
  padding: var(--sp-2xl) var(--gutter);
  border-top: 1px solid var(--clr-border);
}

.works-preview__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Works Grid — 3列（WordPressループの article.works-card を繰り返す構造） */
/* align-items: start → カードごとに独立した高さ（縦長と横長が混在しても整然と並ぶ） */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md) var(--sp-md);
  align-items: start;
}

/* Works Card — 1件 = 1 WP ループアイテム */
.works-card__link {
  display: block;
  transition: opacity var(--ease);
}

.works-card__link:hover {
  opacity: 0.72;
}

/* サムネイル（画像未設定時はプレースホルダ表示） */
.works-card__thumb {
  /* aspect-ratio は指定しない — 画像自身の縦横比を尊重する */
  background-color: #ECEAE7;
  overflow: hidden;
  margin-bottom: var(--sp-sm);
  position: relative;
}

/* プレースホルダー：斜め線テクスチャ（後で WP のアイキャッチ画像に差し替え） */
/* ※ 親に高さが無いので aspect-ratio を直接指定してプレースホルダーの高さを確保 */
.works-card__thumb-fill {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;   /* 画像が無いときだけこの比率でプレースホルダーを表示 */
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 14px,
    rgba(169, 196, 210, 0.18) 14px,
    rgba(169, 196, 210, 0.18) 15px
  );
  transition: transform var(--ease-slow);
}

.works-card__link:hover .works-card__thumb-fill {
  transform: scale(1.04);
}

.works-card__body {
  padding: 0 0.2rem;
}

.works-card__cat {
  font-family: var(--font-en);
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: 0.24em;
  color: var(--clr-accent-deep);
  text-transform: uppercase;
  margin-bottom: 0.4em;
}

.works-card__title {
  font-size: 1.55rem;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.08em;
  color: var(--clr-text);
  margin-bottom: 0.4em;
}

.works-card__year {
  font-family: var(--font-en);
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--clr-muted);
}


/* ================================================================
   NEWS PREVIEW SECTION
   ================================================================ */
.news-preview {
  padding: var(--sp-2xl) var(--gutter);
  border-top: 1px solid var(--clr-border);
}

.news-preview__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* News List — 1件 = 1 WP ループアイテム */
.news-list {
  border-top: 1px solid var(--clr-border);
}

.news-list__item {
  border-bottom: 1px solid var(--clr-border);
}

.news-list__link {
  display: grid;
  grid-template-columns: 9.5rem 6.5rem 1fr;
  align-items: baseline;
  column-gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-xs);
  transition: background-color var(--ease), padding-left var(--ease);
}

.news-list__link:hover {
  background-color: var(--clr-hover);
  padding-left: var(--sp-sm);
}

.news-list__date {
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.10em;
  color: var(--clr-muted);
  white-space: nowrap;
}

.news-list__cat {
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.10em;
  color: var(--clr-accent-deep);
  white-space: nowrap;
}

.news-list__title {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.06em;
  color: var(--clr-text);
}


/* ================================================================
   CONTACT CTA SECTION
   ================================================================ */
.contact-cta {
  padding: var(--sp-2xl) var(--gutter) calc(var(--sp-2xl) + var(--sp-xl));
  border-top: 1px solid var(--clr-border);
  text-align: center;
}

.contact-cta__inner {
  max-width: 36rem;
  margin: 0 auto;
}

.contact-cta__text {
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 2.25;
  letter-spacing: 0.12em;
  color: var(--clr-text);
  margin-bottom: var(--sp-xl);
}

.contact-cta__btn {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 1.28rem;
  font-weight: 300;
  letter-spacing: 0.30em;
  color: var(--clr-text);
  border: 1px solid var(--clr-text);
  padding: 1.3em 3.4em;
  position: relative;
  overflow: hidden;
  transition: color var(--ease);
  z-index: 0;
}

.contact-cta__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--clr-text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ease);
  z-index: -1;
}

.contact-cta__btn:hover {
  color: var(--clr-bg);
}

.contact-cta__btn:hover::before {
  transform: scaleX(1);
}


/* ================================================================
   FLOWER SILHOUETTE
   ================================================================ */
.flower-silhouette {
  width: 100%;
  overflow: hidden;
  line-height: 0; /* inline-block の隙間を消す */
  /* contact-cta の下余白を吸収して footer に続く */
  margin-top: calc(-1 * (var(--sp-2xl) + var(--sp-xl)));
  position: relative;
  z-index: 0;
}

.flower-silhouette__svg {
  width: 100%;
  height: auto;
  /* 高さの下限・上限：ページ幅に追従しつつ最低限の存在感を保つ */
  min-height: 110px;
  max-height: 200px;
}

/* 茎 */
.fs-stem {
  fill: none;
  stroke: var(--clr-text);
  stroke-width: 0.85;
  opacity: 0.24;
}

/* 花びら・花頭 */
.fs-flower {
  fill: var(--clr-text);
  opacity: 0.20;
}

/* つぼみ */
.fs-bud {
  fill: var(--clr-text);
  opacity: 0.16;
}

/* 葉 */
.fs-leaf {
  fill: var(--clr-text);
  opacity: 0.13;
}

/* 茎の先端（花が落ちた後の痕） */
.fs-tip {
  fill: var(--clr-text);
  opacity: 0.18;
}

/* 落花 */
.fs-fallen {
  fill: var(--clr-text);
  opacity: 0.10;
}


/* ================================================================
   SITE FOOTER
   ================================================================ */
.site-footer {
  background-color: var(--clr-text);
  color: var(--clr-bg);
  padding: var(--sp-lg) var(--gutter);
}

.site-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
}

.site-footer__nav-list {
  display: flex;
  gap: var(--sp-lg);
}

.site-footer__nav-list a {
  font-family: var(--font-en);
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: rgba(248, 247, 245, 0.72);
  transition: color var(--ease);
}

.site-footer__nav-list a:hover {
  color: var(--clr-bg);
}

.site-footer__copy {
  font-family: var(--font-en);
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: 0.10em;
  color: rgba(248, 247, 245, 0.55);
}


/* ================================================================
   PAGE INTRO — 内部ページ共通タイトルエリア
   WordPress: page.php / single.php の冒頭
             get_template_part('parts/page-intro') で呼び出し
   ================================================================ */
.page-intro {
  padding: calc(6.4rem + var(--sp-2xl)) var(--gutter) var(--sp-xl);
  border-bottom: 1px solid var(--clr-border);
}

.page-intro__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.page-intro__label {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  color: var(--clr-muted);
  margin-bottom: var(--sp-md);
}

.page-intro__heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2em 1.2em;
  margin-bottom: var(--sp-md);
}

.page-intro__name {
  font-family: var(--font-jp);
  font-size: clamp(3rem, 4.5vw, 4.8rem);
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--clr-text);
  line-height: 1.3;
}

.page-intro__name-en {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.20em;
  color: var(--clr-muted);
}

.page-intro__role {
  font-size: 1.45rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--clr-muted);
  line-height: 1.9;
}


/* ================================================================
   PROFILE — 共通本文テキスト
   ================================================================ */

/* プロフィールページ全体の本文ブロック共通最大幅 */
.profile-section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-2xl) var(--gutter);
}

/* 本文テキスト基本スタイル */
.profile-text {
  font-size: 1.55rem;
  font-weight: 300;
  line-height: 2.25;
  letter-spacing: 0.09em;
  color: var(--clr-text);
  margin-bottom: var(--sp-lg);
  max-width: 52rem;
}

/* 締めの一文：次の段落との間隔を広く取り、呼吸させる */
.profile-text--close {
  margin-top: var(--sp-md);
  margin-bottom: var(--sp-xl);
  font-style: italic;
  color: var(--clr-muted);
}

/* 詩的行分けテキスト：左余白でリズムを作る */
.profile-text--verse {
  padding-left: 2.4em;
  border-left: 1px solid var(--clr-border);
  color: var(--clr-text);
}

/* 強調テキスト：左アクセントライン */
.profile-text--featured {
  padding-left: 2em;
  border-left: 2px solid var(--clr-accent);
  font-size: 1.62rem;
  line-height: 2.3;
  max-width: 48rem;
}


/* ================================================================
   PROFILE — OPENING（キャッチコピー + 宣言）
   WordPress: ACF the_field('catchcopy') / the_field('declaration')
   ================================================================ */
.profile-opening {
  padding: var(--sp-2xl) var(--gutter);
  border-bottom: 1px solid var(--clr-border);
}

.profile-opening__inner {
  max-width: 64rem;
  margin: 0 auto;
}

/* 大キャッチコピー */
.profile-opening__catchcopy {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: clamp(3.6rem, 6vw, 6.4rem);
  line-height: 1.55;
  letter-spacing: 0.14em;
  color: var(--clr-text);
  margin-bottom: var(--sp-xl);
}

.profile-opening__catchcopy-line {
  display: block;
}

/* 価値についての導入文 */
.profile-opening__lead {
  margin-bottom: var(--sp-xl);
}

/* 宣言ブロック：左ボーダーで区切り、独立感を持たせる */
.profile-opening__declaration {
  padding-left: 2.4em;
  border-left: 1px solid var(--clr-border);
  margin-top: var(--sp-xl);
}


/* ================================================================
   PROFILE — ABOUT（私について）
   WordPress: ACF the_field('about_text')
   ================================================================ */
.profile-about {
  border-top: 1px solid var(--clr-border);
}

.profile-about__body {
  max-width: 54rem;
}

/* キーワード群：孤立した言葉として余白の中に浮遊させる */
.about-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md) var(--sp-xl);
  margin: var(--sp-xl) 0 var(--sp-xl) 0;
  padding: var(--sp-lg) 0;
}

.about-keyword {
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--clr-muted);
  /* 余白の中に点在するような見え方 */
}


/* ================================================================
   PROFILE — PHILOSOPHY（思想 4項目）
   WordPress: ACF repeater 'philosophy_items'
   ================================================================ */
.profile-philosophy {
  border-top: 1px solid var(--clr-border);
}

/* 各思想項目：番号ラベル（左）+ 本文（右）の二列 */
.philosophy-item {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 0 var(--sp-xl);
  padding: var(--sp-xl) 0;
  border-top: 1px solid var(--clr-border);
}

.philosophy-item__label {
  padding-top: 0.2em;
}

/* 大きなグレー数字：余白の中でアンカーとして機能する */
.philosophy-item__num {
  display: block;
  font-family: var(--font-en);
  font-size: 4.2rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--clr-border);
  line-height: 1;
  margin-bottom: 0.4em;
}

.philosophy-item__en {
  display: block;
  font-family: var(--font-en);
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: var(--clr-muted);
  line-height: 1.4;
}

/* 小見出し：細い下ボーダーで本文と区切る */
.philosophy-item__heading {
  font-family: var(--font-jp);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.10em;
  color: var(--clr-text);
  margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--clr-border);
}


/* ================================================================
   PROFILE — CONCEPT（コンセプト）
   WordPress: ACF the_field('concept_quote') / the_field('concept_body')
   ================================================================ */
.profile-concept {
  /* 背景色を微妙に変えてセクションに呼吸を与える */
  background-color: #F2F0ED;
  padding: var(--sp-2xl) var(--gutter);
  text-align: center;
}

.profile-concept__inner {
  max-width: 58rem;
  margin: 0 auto;
}

.profile-concept__eyebrow {
  font-family: var(--font-en);
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.35em;
  color: var(--clr-muted);
  margin-bottom: var(--sp-lg);
}

/* 引用句：凛とした大きさで、ページの"核"として機能する */
.profile-concept__quote {
  font-family: var(--font-jp);
  font-size: clamp(2.4rem, 3.8vw, 3.8rem);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.12em;
  color: var(--clr-text);
  margin-bottom: var(--sp-xl);
}

.profile-concept__body {
  text-align: left;
}

/* コンセプトリスト：左ダッシュ付きで静かに並ぶ */
.concept-list {
  list-style: none;
  margin: 0 0 var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.concept-list li {
  display: flex;
  align-items: center;
  gap: 1.2em;
  font-size: 1.45rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--clr-muted);
}

.concept-list li::before {
  content: '';
  display: block;
  width: 2.4rem;
  height: 1px;
  background-color: var(--clr-accent);
  flex-shrink: 0;
}


/* ================================================================
   PROFILE — FOR WHO（誰のための場所か）
   WordPress: ACF the_field('for_who_intro') / repeater 'for_who_list'
   ================================================================ */
.profile-for-who {
  border-top: 1px solid var(--clr-border);
}

.for-who__body {
  max-width: 54rem;
}

/* リスト：新聞リストと同様の横罫線スタイル */
.for-who-list {
  list-style: none;
  border-top: 1px solid var(--clr-border);
  margin: var(--sp-lg) 0;
}

.for-who-list li {
  display: flex;
  align-items: center;
  gap: 1.6em;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--clr-text);
  padding: 1.3em 0;
  border-bottom: 1px solid var(--clr-border);
}

.for-who-list li::before {
  content: '';
  display: block;
  width: 1.8rem;
  height: 1px;
  background-color: var(--clr-accent-deep);
  flex-shrink: 0;
}


/* ================================================================
   PROFILE — SCENE BREAK modifier (narrower aspect ratio)
   ================================================================ */
.scene-break--narrow .scene-break__img {
  aspect-ratio: 16 / 5;
}


/* ================================================================
   PROFILE — BIO / TIMELINE（経歴）
   WordPress: ACF repeater 'timeline_items'
   ================================================================ */
.profile-bio {
  border-top: 1px solid var(--clr-border);
}

/* プロフィール写真 */
.bio-photo {
  width: 22rem;
  margin: 0 0 var(--sp-xl) 0;
  background-color: #ECEAE7;
}

.bio-photo__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  background-color: #ECEAE7;
}

.bio-photo__caption {
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--clr-muted);
  padding-top: var(--sp-sm);
}

/* 縦タイムライン：左側に垂直線、マーカードット付き */
.timeline {
  position: relative;
  padding-left: 11rem;
  max-width: 72rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 9.2rem;
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  background-color: var(--clr-border);
}

.timeline__item {
  position: relative;
  margin-bottom: var(--sp-xl);
}

/* マーカードット */
.timeline__item::before {
  content: '';
  position: absolute;
  left: -1.9rem;
  top: 0.75em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--clr-bg);
  border: 1px solid var(--clr-border);
}

/* 年代・時期ラベル：絶対配置で左に配置 */
.timeline__period {
  position: absolute;
  left: -11rem;
  top: 0.4em;
  width: 9rem;
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--clr-accent-deep);
  text-align: right;
  line-height: 1.4;
}

/* 年号マーカー：ドットをアクセントカラーに */
.timeline__item--mark::before {
  background-color: var(--clr-accent);
  border-color: var(--clr-accent);
}

.timeline__item--mark .timeline__period {
  font-weight: 400;
  color: var(--clr-text);
}

.timeline__content p {
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 2.0;
  letter-spacing: 0.06em;
  color: var(--clr-text);
  margin-bottom: var(--sp-sm);
}


/* ================================================================
   PROFILE — BELIEF（信念）
   WordPress: ACF the_field('belief_text') / repeater 'proposal_list'
   ================================================================ */
.profile-belief {
  border-top: 1px solid var(--clr-border);
}

.profile-belief__body {
  max-width: 56rem;
}

/* 提案リスト：シンプルな縦並び */
.belief-list {
  list-style: none;
  border-top: 1px solid var(--clr-border);
  margin: var(--sp-lg) 0;
}

.belief-list li {
  display: flex;
  align-items: center;
  gap: 1.4em;
  font-size: 1.45rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--clr-text);
  padding: 1.2em 0;
  border-bottom: 1px solid var(--clr-border);
}

.belief-list li::before {
  content: '';
  display: block;
  width: 1.6rem;
  height: 1px;
  background-color: var(--clr-accent-deep);
  flex-shrink: 0;
}


/* ================================================================
   PROFILE — ACTIVITIES（活動実績）
   WordPress: ACF repeater 'activity_items'
   ================================================================ */
.profile-activities {
  border-top: 1px solid var(--clr-border);
}

/* 3列グリッド：works-grid と同様の繰り返し構造 */
.activities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--sp-lg);
}

.activity-item {
  padding: var(--sp-lg) 0;
  border-top: 1px solid var(--clr-border);
}

.activity-item__title {
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--clr-text);
  margin-bottom: var(--sp-md);
}

.activity-item__list {
  list-style: none;
}

.activity-item__list li {
  position: relative;
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--clr-muted);
  line-height: 1.9;
  padding-left: 1.4em;
}

.activity-item__list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--clr-border);
}

/* activities-grid 内の js-stagger 遅延 */
.activities-grid .js-stagger:nth-child(1) { transition-delay: 0.08s; }
.activities-grid .js-stagger:nth-child(2) { transition-delay: 0.22s; }
.activities-grid .js-stagger:nth-child(3) { transition-delay: 0.36s; }


/* ================================================================
   PROFILE — MESSAGE（最後のメッセージ）
   WordPress: ACF the_field('message_text') / the_field('message_list')
   ================================================================ */
.profile-message {
  padding: var(--sp-2xl) var(--gutter) calc(var(--sp-2xl) + var(--sp-xl));
  border-top: 1px solid var(--clr-border);
}

.profile-message__inner {
  max-width: 54rem;
  margin: 0 auto;
}

/* メッセージリスト：読む人が自分を見つけられるように */
.message-list {
  list-style: none;
  border-top: 1px solid var(--clr-border);
  margin: var(--sp-lg) 0 var(--sp-xl);
}

.message-list li {
  position: relative;
  font-size: 1.45rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--clr-text);
  padding: 1.1em 0 1.1em 2.2em;
  border-bottom: 1px solid var(--clr-border);
}

.message-list li::before {
  content: '・';
  position: absolute;
  left: 0.4em;
  color: var(--clr-accent-deep);
}

/* 締めのエコー：トップページ冒頭のキャッチコピーと呼応する */
.profile-message__echo {
  font-family: var(--font-jp);
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--clr-text);
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--clr-border);
}


/* ================================================================
   RESPONSIVE — TABLET  (max-width: 960px)
   ================================================================ */
@media (max-width: 960px) {
  :root {
    --gutter:  3.2rem;
    --sp-xl:   5.0rem;
    --sp-2xl:  7.5rem;
  }

  .works-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-list__link {
    grid-template-columns: 9rem 6rem 1fr;
    column-gap: var(--sp-sm);
  }

  /* --- Statement figure --- */
  .statement__figure {
    width: 75%;
  }

  /* --- Scene break --- */
  .scene-break__img {
    aspect-ratio: 16 / 7;
  }

  /* --- Profile philosophy --- */
  .philosophy-item {
    grid-template-columns: 10rem 1fr;
    gap: 0 var(--sp-lg);
  }

  /* --- Profile activities --- */
  .activities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Profile timeline --- */
  .timeline {
    padding-left: 9rem;
  }

  .timeline::before {
    left: 7.5rem;
  }

  .timeline__period {
    left: -9rem;
    width: 7.5rem;
  }
}


/* ================================================================
   RESPONSIVE — MOBILE  (max-width: 640px)
   ================================================================ */
@media (max-width: 640px) {
  :root {
    --gutter:  2.0rem;
    --sp-lg:   3.0rem;
    --sp-xl:   4.5rem;
    --sp-2xl:  6.0rem;
  }

  html {
    font-size: 59%;
  }

  /* --- モバイルナビ表示 --- */
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: fixed;
    top: 6.4rem;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--clr-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ease);
  }

  .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav__list {
    flex-direction: column;
    gap: var(--sp-lg);
    text-align: center;
  }

  .site-nav__link {
    font-size: 2.4rem;
    letter-spacing: 0.20em;
  }

  /* --- Hero --- */
  .hero {
    padding-top: 9rem;
    padding-bottom: var(--sp-xl);
  }

  .hero__catchcopy {
    font-size: clamp(3.4rem, 10vw, 5rem);
    margin-bottom: var(--sp-lg);
  }

  .hero__sub {
    font-size: 1.48rem;
    line-height: 2.15;
  }

  .hero__scroll {
    margin-top: var(--sp-xl);
  }

  /* --- Statement --- */
  .statement__text {
    font-size: 1.52rem;
  }

  .statement__text--quoted {
    padding-left: 1.4em;
  }

  /* --- Works --- */
  .works-grid {
    grid-template-columns: 1fr;
    max-width: 44rem;
    margin: 0 auto;
  }

  /* works-card の transition-delay はモバイルでも維持 */

  /* --- News --- */
  .news-list__link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3em var(--sp-sm);
    padding: var(--sp-sm) var(--sp-xs);
  }

  .news-list__title {
    flex-basis: 100%;
    font-size: 1.5rem;
    padding-top: 0.2em;
  }

  /* --- Contact CTA --- */
  .contact-cta__text {
    font-size: 1.7rem;
  }

  /* --- Statement figure --- */
  .statement__figure {
    width: 100%;
    margin-left: 0;
  }

  /* --- Scene break --- */
  .scene-break__img {
    aspect-ratio: 16 / 9;
    opacity: 0.65;
  }

  /* --- Page intro --- */
  .page-intro__heading {
    flex-direction: column;
    gap: 0.3em 0;
  }

  /* --- Profile opening --- */
  .profile-opening__catchcopy {
    font-size: clamp(3.2rem, 9vw, 4.8rem);
    margin-bottom: var(--sp-lg);
  }

  .profile-opening__declaration {
    padding-left: 1.6em;
  }

  /* --- Profile keywords --- */
  .about-keywords {
    gap: var(--sp-sm) var(--sp-lg);
  }

  /* --- Profile philosophy: モバイルは縦積み --- */
  .philosophy-item {
    display: block;
  }

  .philosophy-item__label {
    display: flex;
    align-items: baseline;
    gap: 1.2em;
    margin-bottom: var(--sp-md);
  }

  .philosophy-item__num {
    font-size: 2.8rem;
    margin-bottom: 0;
  }

  .philosophy-item__heading {
    margin-top: var(--sp-sm);
  }

  /* --- Profile concept --- */
  .profile-concept__quote {
    font-size: clamp(2.2rem, 7vw, 3rem);
  }

  /* --- Profile activities --- */
  .activities-grid {
    grid-template-columns: 1fr;
  }

  /* --- Profile timeline --- */
  .timeline {
    padding-left: 0;
    padding-top: var(--sp-lg);
  }

  .timeline::before {
    display: none;
  }

  .timeline__item {
    padding-left: 0;
    border-left: 1px solid var(--clr-border);
    padding-left: var(--sp-md);
    margin-bottom: var(--sp-lg);
  }

  .timeline__item::before {
    display: none;
  }

  .timeline__period {
    position: static;
    width: auto;
    text-align: left;
    margin-bottom: 0.4em;
    font-size: 1.15rem;
    letter-spacing: 0.12em;
  }

  /* --- Profile bio photo --- */
  .bio-photo {
    width: 100%;
    max-width: 28rem;
  }

  /* --- Profile message --- */
  .profile-message__echo {
    font-size: clamp(1.9rem, 6vw, 2.6rem);
  }

  /* --- Flower Silhouette --- */
  .flower-silhouette__svg {
    min-height: 90px;
  }

  /* --- Footer --- */
  .site-footer__inner {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-md);
  }

  .site-footer__nav-list {
    gap: var(--sp-sm);
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* ================================================================
   PAGE INTRO — breadcrumb link (detail pages)
   ================================================================ */
.page-intro__label a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}

.page-intro__label a:hover {
  color: var(--clr-text);
  border-color: var(--clr-border);
}


/* ================================================================
   IS-LOADING — spinner state for JS-rendered containers
   ================================================================ */
.is-loading {
  position: relative;
  min-height: 22rem;
}

.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--clr-border);
  border-top-color: var(--clr-accent-deep);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}


/* ================================================================
   IS-LOADED — staggered fade-in for list items
   animation-delay is set inline by JS per item
   ================================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1.4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.works-grid.is-loaded .works-card {
  opacity: 0;
  animation: fadeInUp 0.55s ease forwards;
}

.news-list.is-loaded .news-list__item {
  opacity: 0;
  animation: fadeInUp 0.55s ease forwards;
}

/* detail page containers: single fade-in */
#workDetail.is-loaded,
#newsDetail.is-loaded {
  animation: fadeInUp 0.5s ease forwards;
}


/* ================================================================
   EMPTY / ERROR MESSAGE
   ================================================================ */
.empty-message {
  text-align: center;
  color: var(--clr-muted);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2.4;
  padding: var(--sp-xl) 0;
}


/* ================================================================
   WORKS ARCHIVE PAGE
   _works.scss (archive)
   ================================================================ */
.works-archive {
  padding: var(--sp-xl) 0 var(--sp-2xl);
}

.works-archive__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* thumbnail image (replaces .works-card__thumb-fill when image exists) */
/* height: auto で自然比率を保つ — 縦長画像もトリミングせず全体を表示 */
.works-card__thumb-img {
  display: block;
  width: 100%;
  height: auto;
}

/* excerpt: 2-line clamp, hidden on tablet */
.works-card__excerpt {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--clr-muted);
  line-height: 1.9;
  margin-top: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ================================================================
   WORKS DETAIL PAGE
   _works.scss (single)
   ================================================================ */
.works-detail-section {
  padding: var(--sp-lg) 0 var(--sp-2xl);
}

.works-detail-section__inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* type + year meta line */
.entry-header {
  margin-bottom: var(--sp-lg);
}

.entry-header__meta {
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-muted);
  display: flex;
  gap: 1.6em;
  align-items: baseline;
}

.entry-header__year {
  color: var(--clr-border);
}

/* media wrapper */
.entry-media {
  margin-bottom: var(--sp-xl);
}

/* single image */
/* 縦長画像が中央寄せで収まるよう figure 自体を flex コンテナにする */
.entry-figure {
  margin: 0;
  background-color: #ECEAE7; /* 縦長画像の左右余白を背景色で埋める */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.entry-figure__img {
  display: block;
  /* width: 100% のまま自然比率で表示。縦長でも見切れない。     */
  /* 極端に細い縦長は max-width で幅を制限してバランスを保つ    */
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: min(80vh, 72rem); /* 極端に長い画像でも画面内に収める */
}


/* ================================================================
   SLIDER — fade-based, no external library
   CSS Grid スタッキングで縦長・横長どちらもトリミングせず表示
   ================================================================ */
.slider {
  position: relative;
  user-select: none;
}

/*
  従来の position:absolute+aspect-ratio 方式から CSS Grid スタッキングへ変更。
  - すべてのスライドを同一グリッドセルに重ねて配置
  - コンテナ高さは「最も背の高い画像」に自動追従
  - overflow: hidden は不要（画像はコンテナ内に収まる）
*/
.slider__track {
  display: grid;
  background-color: #ECEAE7;
}

.slider__slide {
  grid-area: 1 / 1;        /* 全スライドを同じセルに積み重ねる */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22rem;        /* 画像読み込み前のスペース確保 */
  opacity: 0;
  transition: opacity 0.65s ease;
}

.slider__slide.is-active {
  opacity: 1;
  position: relative;
  z-index: 1;
}

/*
  max-width: 100% + max-height: min(70vh, 65rem) でブラウザが
  アスペクト比を保ったまま両制約に収めてくれる。
  - 横長画像 → max-width が効いてコンテナ幅いっぱいに表示
  - 縦長画像 → max-height が効いてトリミングなしで全体を表示
              → flex centering でコンテナ中央に配置
*/
.slider__img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: min(70vh, 65rem);
}

/*
  ボタンは .slider__track ではなく .slider (position:relative) に対して
  絶対配置。Grid スタッキング後も track と同じ高さ領域に留まるよう
  top を .slider__track 基準に限定する。
*/
.slider__btn {
  position: absolute;
  top: 0;
  height: 100%;        /* .slider__track の高さ分だけ伸ばす */
  display: flex;
  align-items: center; /* ボタンアイコンを縦方向に中央揃え */
  background: transparent;
  border: none;
  color: var(--clr-text);
  font-family: var(--font-en);
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  padding: 0 1.0rem;
  transition: color var(--ease);
}

.slider__btn > span,
.slider__btn {
  /* ‹ › 記号のヒット領域を確保しつつ視覚的に小さく */
}

/* ホバー時にアイコン周囲に薄い円を出す */
.slider__btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.0rem;
  height: 4.0rem;
  border-radius: 50%;
  background: rgba(248, 247, 245, 0.0);
  border: 1px solid transparent;
  transition: background var(--ease), border-color var(--ease);
  pointer-events: none;
}

.slider__btn:hover {
  color: var(--clr-accent-deep);
}

.slider__btn:hover::after {
  background: rgba(248, 247, 245, 0.78);
  border-color: var(--clr-border);
}

.slider__btn--prev { left: 0; }
.slider__btn--next { right: 0; }

.slider__dots {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  padding-top: 1.6rem;
}

.slider__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--clr-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--ease);
}

.slider__dot.is-active {
  background: var(--clr-accent-deep);
}


/* ================================================================
   ENTRY BODY — richtext content from JSON body field
   ================================================================ */
.entry-body {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 2.25;
  letter-spacing: 0.05em;
  color: var(--clr-text);
  margin-bottom: var(--sp-xl);
}

.entry-body p {
  margin-bottom: 1.8em;
}

.entry-body p:last-child {
  margin-bottom: 0;
}

.entry-body em {
  font-style: italic;
  color: var(--clr-muted);
}

.entry-body strong {
  font-weight: 400;
  border-bottom: 1px solid var(--clr-accent);
}

.entry-body a {
  color: var(--clr-accent-deep);
  border-bottom: 1px solid currentColor;
  transition: color var(--ease);
}

.entry-body a:hover {
  color: var(--clr-text);
}

.entry-body ul,
.entry-body ol {
  list-style: none;
  margin: 0 0 1.8em;
  padding: 0;
}

.entry-body ul li,
.entry-body ol li {
  position: relative;
  padding-left: 1.8em;
  margin-bottom: 0.5em;
  font-size: 1.45rem;
}

.entry-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.1em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--clr-accent);
}

.entry-body ol {
  counter-reset: ol-counter;
}

.entry-body ol li::before {
  counter-increment: ol-counter;
  content: counter(ol-counter) '.';
  position: absolute;
  left: 0;
  font-family: var(--font-en);
  font-size: 1.2rem;
  color: var(--clr-muted);
}


/* ================================================================
   ENTRY EXTERNAL LINK
   ================================================================ */
.entry-external {
  margin-top: var(--sp-lg);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--clr-border);
  margin-bottom: var(--sp-lg);
}

.entry-external__link {
  font-family: var(--font-en);
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  color: var(--clr-accent-deep);
  border-bottom: 1px solid var(--clr-accent);
  transition: color var(--ease), border-color var(--ease);
}

.entry-external__link:hover {
  color: var(--clr-text);
  border-color: var(--clr-text);
}


/* ================================================================
   ENTRY NAVIGATION — prev / back / next
   ================================================================ */
.entry-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--clr-border);
}

.entry-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  max-width: 26rem;
  text-decoration: none;
}

.entry-nav__link--disabled {
  visibility: hidden;
  pointer-events: none;
}

.entry-nav__label {
  font-family: var(--font-en);
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  color: var(--clr-muted);
  text-transform: uppercase;
}

.entry-nav__title {
  font-size: 1.45rem;
  font-weight: 300;
  color: var(--clr-text);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease);
  line-height: 1.6;
}

.entry-nav__link:hover .entry-nav__title {
  border-color: var(--clr-accent);
}

.entry-nav__link--next {
  text-align: right;
  align-items: flex-end;
}

.entry-nav__back {
  font-size: 1.25rem;
  flex-shrink: 0;
  align-self: center;
  white-space: nowrap;
}


/* ================================================================
   NEWS ARCHIVE PAGE
   _news.scss (archive)
   ================================================================ */
.news-archive {
  padding: var(--sp-xl) 0 var(--sp-2xl);
}

.news-archive__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}


/* ================================================================
   NEWS DETAIL PAGE
   _news.scss (single)
   ================================================================ */
.news-detail-section {
  padding: var(--sp-lg) 0 var(--sp-2xl);
}

.news-detail-section__inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* article header: date + category + title */
.news-detail-header {
  margin-bottom: var(--sp-xl);
  padding-bottom: var(--sp-lg);
  border-bottom: 1px solid var(--clr-border);
}

.news-detail-header__meta {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  margin-bottom: var(--sp-md);
}

.news-detail-header__date {
  font-family: var(--font-en);
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--clr-muted);
}

.news-detail-header__cat {
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--clr-accent-deep);
  border: 1px solid var(--clr-accent);
  padding: 0.2em 1em;
  line-height: 1.6;
}

.news-detail-header__title {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: clamp(2.0rem, 3vw, 2.8rem);
  line-height: 1.65;
  letter-spacing: 0.06em;
  color: var(--clr-text);
}


/* ================================================================
   RESPONSIVE — works & news pages
   ================================================================ */

/* ---- tablet (≤960px) ---- */
@media (max-width: 960px) {

  /* hide excerpt to keep cards compact */
  .works-card__excerpt {
    display: none;
  }

  .works-detail-section__inner,
  .news-detail-section__inner {
    max-width: 100%;
  }
}

/* ---- mobile (≤640px) ---- */
@media (max-width: 640px) {

  .works-archive,
  .news-archive {
    padding: var(--sp-lg) 0 var(--sp-xl);
  }

  .works-detail-section,
  .news-detail-section {
    padding: var(--sp-md) 0 var(--sp-xl);
  }

  /* entry nav: stack vertically, center-aligned */
  .entry-nav {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-lg);
  }

  .entry-nav__link {
    max-width: 100%;
    text-align: center;
    align-items: center;
  }

  .entry-nav__link--next {
    text-align: center;
    align-items: center;
  }

  /* slider buttons: slightly smaller on mobile */
  .slider__btn {
    font-size: 2.0rem;
    padding: 0 0.8rem;
  }

  .slider__btn::after {
    width: 3.4rem;
    height: 3.4rem;
  }

  /* news detail title */
  .news-detail-header__title {
    font-size: 2.0rem;
  }

  /* news detail meta: wrap on very small screens */
  .news-detail-header__meta {
    flex-wrap: wrap;
    gap: 0.8rem;
  }
}


/* ================================================================
   CONTACT PAGE
   _contact.scss
================================================================ */

/* ---- セクション ---- */
.contact-section {
  padding: var(--sp-xl) 0 var(--sp-2xl);
}

.contact-section__inner {
  max-width: 64rem;     /* フォームはやや狭めに絞る */
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- 案内文 ---- */
.contact-intro {
  margin-bottom: var(--sp-xl);
}

.contact-intro__text {
  font-size: 1.55rem;
  font-weight: 300;
  line-height: 2.3;
  letter-spacing: 0.08em;
  color: var(--clr-text);
  margin-bottom: 1.6em;
}

.contact-intro__text--quiet {
  color: var(--clr-muted);
  font-size: 1.4rem;
}

/* ---- フォーム本体 ---- */
.contact-form {
  /* transition は JS 側で opacity フェードに使う */
}

/* ---- ハニーポット（視覚的に非表示） ---- */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---- フォームグループ ---- */
.form-group {
  margin-bottom: var(--sp-xl);
}

/* ---- ラベル ---- */
.form-label {
  display: block;
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: 1.2rem;
}

/* ---- 必須マーク ---- */
.form-required {
  color: var(--clr-accent-deep);
  margin-left: 0.4em;
  font-style: normal;
}

/* ---- インプット・テキストエリア共通 ---- */
.form-input,
.form-textarea {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--clr-border);
  border-radius: 0;
  outline: none;
  padding: 1.0rem 0 1.0rem;
  font-family: var(--font-jp);
  font-size: 1.55rem;
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: 0.05em;
  color: var(--clr-text);
  transition: border-color var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--clr-border);
}

/* フォーカス: 下線がアクセントカラーへ */
.form-input:focus,
.form-textarea:focus {
  border-bottom-color: var(--clr-accent-deep);
}

/* エラー状態: 下線がエラーカラーへ */
.form-input.has-error,
.form-textarea.has-error {
  border-bottom-color: var(--clr-error);
}

.form-textarea {
  resize: vertical;
  min-height: 18rem;
}

/* ---- エラーメッセージ ---- */
.form-error {
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--clr-error);
  margin-top: 0.8rem;
  min-height: 1.6em;
  opacity: 0;
  transform: translateY(-0.4rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.form-error.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- フッター（注釈 + ボタン） ---- */
.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--clr-border);
}

.form-note {
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--clr-muted);
}

/* ---- 送信ボタン ---- */
.form-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  min-width: 18rem;
  padding: 1.4rem 4.0rem;
  font-family: var(--font-en);
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clr-text);
  background: transparent;
  border: 1px solid var(--clr-text);
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease), opacity var(--ease);
}

.form-submit:hover:not(:disabled) {
  background: var(--clr-text);
  color: var(--clr-bg);
}

.form-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* スピナー（ローディング中） */
.form-submit__spinner {
  display: none;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.form-submit.is-loading .form-submit__spinner {
  display: block;
}

/* ---- サーバーエラーメッセージ ---- */
.form-server-error {
  margin-top: var(--sp-lg);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--clr-error);
  line-height: 1.9;
  opacity: 0;
  transition: opacity 0.3s ease;
  min-height: 1em;
}

.form-server-error.is-visible {
  opacity: 1;
}

/* ---- 送信完了メッセージ ---- */
.contact-success {
  text-align: center;
  padding: var(--sp-2xl) 0;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.contact-success.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.contact-success__mark {
  font-family: var(--font-en);
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--clr-accent-deep);
  letter-spacing: 0.8em;
  margin-bottom: var(--sp-lg);
}

.contact-success__heading {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  letter-spacing: 0.14em;
  line-height: 1.6;
  color: var(--clr-text);
  margin-bottom: var(--sp-lg);
}

.contact-success__text {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.3;
  letter-spacing: 0.07em;
  color: var(--clr-muted);
  margin-bottom: var(--sp-xl);
}

.contact-success__link {
  font-size: 1.3rem;
}


/* ================================================================
   RESPONSIVE — contact page
================================================================ */

/* ---- tablet (≤960px) ---- */
@media (max-width: 960px) {
  .contact-section__inner {
    max-width: 100%;
  }
}

/* ---- mobile (≤640px) ---- */
@media (max-width: 640px) {

  .contact-section {
    padding: var(--sp-lg) 0 var(--sp-xl);
  }

  .form-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-lg);
  }

  .form-submit {
    width: 100%;
    min-width: unset;
  }
}


/* ================================================================
   ARTICLE PREVIEW — top page (今月の記録)
   _article.scss (home)
   ================================================================ */
.article-preview {
  padding: var(--sp-2xl) 0;
  border-top: 1px solid var(--clr-border);
}

.article-preview__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* article card — rendered by articles.js */
.article-card {
  max-width: 64rem;
}

.article-card__meta {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  margin-bottom: var(--sp-md);
}

.article-card__month {
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: var(--clr-muted);
}

.article-card__cat {
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--clr-accent-deep);
  border: 1px solid var(--clr-accent);
  padding: 0.2em 1em;
  line-height: 1.6;
}

.article-card__title {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: clamp(2.0rem, 3vw, 2.8rem);
  line-height: 1.65;
  letter-spacing: 0.06em;
  color: var(--clr-text);
  margin-bottom: var(--sp-md);
}

.article-card__excerpt {
  font-size: 1.55rem;
  font-weight: 300;
  line-height: 2.15;
  letter-spacing: 0.05em;
  color: var(--clr-muted);
  margin-bottom: var(--sp-lg);
}

/* fade-in for article card container */
#homeCurrentArticle.is-loaded {
  animation: fadeInUp 0.55s ease forwards;
}


/* ================================================================
   ARTICLE ARCHIVE — detail page (過去の記録)
   _article.scss (archive)
   ================================================================ */
.article-archive {
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--clr-border);
}

.article-archive__heading {
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: var(--sp-lg);
}

.article-archive__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.article-archive__item {
  border-bottom: 1px solid var(--clr-border);
}

.article-archive__item:first-child {
  border-top: 1px solid var(--clr-border);
}

.article-archive__link {
  display: flex;
  align-items: baseline;
  gap: 2.4rem;
  padding: 1.6rem 0;
  text-decoration: none;
  transition: color var(--ease);
}

.article-archive__link:hover {
  color: var(--clr-text);
}

.article-archive__month {
  font-family: var(--font-en);
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--clr-muted);
  flex-shrink: 0;
  transition: color var(--ease);
}

.article-archive__link:hover .article-archive__month {
  color: var(--clr-accent-deep);
}

.article-archive__title {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--clr-text);
  line-height: 1.7;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease);
}

.article-archive__link:hover .article-archive__title {
  border-color: var(--clr-border);
}

/* article detail container: single fade-in */
#articleDetail.is-loaded {
  animation: fadeInUp 0.5s ease forwards;
}


/* ================================================================
   INSTAGRAM SECTION — top page (Behold.so embed)
   _instagram.scss
   ================================================================ */
.instagram-section {
  padding: var(--sp-2xl) 0;
  border-top: 1px solid var(--clr-border);
}

.instagram-section__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* embed wrapper */
.instagram-embed-wrap {
  margin-bottom: var(--sp-lg);
}

/*
  Behold.so CSS variables
  ダッシュボードで設定した値をここで上書きできる
*/
.instagram-embed-wrap [data-behold-id] {
  --behold-gap: 2px;
  --behold-columns: 3;
  --behold-border-radius: 0;
  --behold-hover-opacity: 0.82;
  --behold-loading-color: var(--clr-border);
}

/*
  Behold の "Powered by" フッターを目立たなくする
  ※ 無料プランには小さな帰属表示が入る
*/
.instagram-embed-wrap behold-widget::part(footer) {
  opacity: 0.35;
  font-size: 1.0rem;
}


/* ================================================================
   SITE FOOTER SNS LINK
   ================================================================ */
.site-footer__sns {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-en);
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: rgba(248, 247, 245, 0.72);
  text-decoration: none;
  transition: color var(--ease);
}

.site-footer__sns:hover {
  color: var(--clr-bg);
}

.site-footer__sns-icon {
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
}

/* footer layout already has flex; SNS sits between nav and copy */
.site-footer__inner {
  /* existing flex layout handles ordering naturally */
}


/* ================================================================
   RESPONSIVE — article & instagram
   ================================================================ */

/* ---- tablet (≤960px) ---- */
@media (max-width: 960px) {

  .instagram-embed-wrap [data-behold-id] {
    --behold-columns: 3;
  }
}

/* ---- mobile (≤640px) ---- */
@media (max-width: 640px) {

  .article-preview {
    padding: var(--sp-xl) 0;
  }

  .instagram-section {
    padding: var(--sp-xl) 0;
  }

  /* 2 columns on mobile */
  .instagram-embed-wrap [data-behold-id] {
    --behold-columns: 2;
    --behold-gap: 1px;
  }

  .article-archive__link {
    flex-direction: column;
    gap: 0.4rem;
  }
}


/* ================================================================
   画像 404 / 読み込みエラー時のフォールバック表示
   ----------------------------------------------------------------
   imgタグは読み込みに失敗しても要素自体は残るため、
   以下のテクニックで「壊れたアイコン + alt テキスト」を隠し
   プレースホルダー背景だけを見せる。

   仕組み:
     - color: transparent  → alt テキストを透明にして非表示
     - font-size: 0        → ブラウザ組み込みの壊れアイコンを潰す
     - background          → 代わりに淡いプレースホルダーを表示
     - ※ 画像が正常に読み込めた場合はこれらが上書きされ見た目に影響しない
================================================================ */

/* プロフィール写真 */
.bio-photo__img {
  color: transparent;
  font-size: 0;
  background-color: #ECEAE7;
  background-image:
    linear-gradient(
      135deg,
      rgba(169, 196, 210, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(169, 196, 210, 0.15) 50%,
      rgba(169, 196, 210, 0.15) 75%,
      transparent 75%
    );
  background-size: 24px 24px;
}

/* 作品カード サムネイル */
.works-card__thumb-img {
  color: transparent;
  font-size: 0;
  background-color: #ECEAE7;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 14px,
    rgba(169, 196, 210, 0.18) 14px,
    rgba(169, 196, 210, 0.18) 15px
  );
  min-height: 120px; /* 高さゼロになるのを防ぐ */
}

/* シーンブレイク（横長区切り写真） */
.scene-break__img {
  color: transparent;
  font-size: 0;
}

/* 作品詳細 / エントリー本文画像 */
.entry-figure__img {
  color: transparent;
  font-size: 0;
  background-color: #ECEAE7;
  min-height: 120px;
}

/* スライダー画像 */
.slider__img {
  color: transparent;
  font-size: 0;
  background-color: #ECEAE7;
  min-height: 120px;
}