/* ==========================================================
   中内共路 | Tomomichi Nakauchi — 共通スタイル
   ========================================================== */

:root {
  --bg: #faf3ec;        /* 淡い桜色がかったベージュ */
  --ink: #3d352e;       /* 焦茶がかった柔らかい墨色 */
  --ink-soft: #8b7d6f;  /* 薄墨(暖) */
  --line: #ecdfd2;      /* 極細罫線(ごく淡い茶) */
  --sakura: #fdf9f5;    /* 桜の白 */
  --ph-bg: #f3e9dd;     /* プレースホルダー背景 */
  --max-width: 960px;
  --font-serif: "EB Garamond", "Noto Serif JP", "Hiragino Mincho ProN",
    "Yu Mincho", serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

a:hover {
  opacity: 0.55;
}

main a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--line);
}

/* ----------------------------------------------------------
   ヘッダー
   ---------------------------------------------------------- */

.site-header {
  padding: 3rem 1.5rem 0;
  text-align: center;
}

.site-title {
  display: inline-block;
}

.site-title a {
  display: block;
}

.site-title .title-ja {
  display: block;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-indent: 0.35em; /* letter-spacing の右余白を相殺して中央に */
}

.site-title .title-en {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* 英語版:欧文名をメイン表記にする */
.site-title--en .title-ja {
  font-size: 1.35rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}

.site-title--en .title-en {
  text-transform: none;
  letter-spacing: 0.5em;
}

.site-nav {
  margin-top: 2.2rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.site-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 2.4rem;
  padding: 0.9rem 0;
}

.site-nav li a {
  display: block;
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  text-align: center;
}

.site-nav li a span {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-top: 0.1rem;
}

.site-nav li a[aria-current="page"] {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.15rem;
}

.lang-switch {
  padding: 0.8rem 0 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}

.lang-switch .is-current {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}

.lang-switch .sep {
  margin: 0 0.5em;
}

.nav-toggle {
  display: none;
}

/* ホーム:ヒーロー画像に重ねる半透明ヘッダー */
.site-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding-top: 2.6rem;
  padding-bottom: 2.4rem;
  /* 絵(鳥たち)が透けて見えるよう淡めに。可読性は text-shadow で補う */
  background: linear-gradient(
    180deg,
    rgba(250, 243, 236, 0.42) 0%,
    rgba(250, 243, 236, 0.34) 68%,
    rgba(250, 243, 236, 0) 100%
  );
}

.site-header--overlay .site-title a,
.site-header--overlay .site-nav a,
.site-header--overlay .lang-switch {
  text-shadow:
    0 0 6px rgba(250, 243, 236, 0.95),
    0 1px 4px rgba(250, 243, 236, 0.9),
    0 1px 2px rgba(61, 53, 46, 0.18);
}

/* 薄墨のサブ表記は絵に溶けやすいので、オーバーレイ上では墨色に寄せる */
.site-header--overlay .site-nav li a span,
.site-header--overlay .title-en,
.site-header--overlay .lang-switch,
.site-header--overlay .lang-switch a {
  color: rgba(61, 53, 46, 0.82);
}

.site-header--overlay .title-ja {
  font-size: 2.1rem;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
}

.site-header--overlay .site-title--en .title-ja {
  font-size: 1.7rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
}

.site-header--overlay .site-nav {
  border-top-color: rgba(61, 53, 46, 0.16);
  border-bottom: none;
}

/* ----------------------------------------------------------
   メイン
   ---------------------------------------------------------- */

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
}

/* サブページ共通の見出しバンド(Homeのヒーローと呼応する「間」) */
.page-head {
  position: relative;
  text-align: center;
  padding: 2.4rem 1rem 2.2rem;
  margin-bottom: 3.8rem;
  overflow: hidden;
}

/* 作品の気配を薄く敷く(毛並みや鳥の気配がうっすら分かる程度) */
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/works/Arcadia.JPG") center 30% / cover no-repeat;
  opacity: 0.35;
  /* 地色と作品の色調が近いため、コントラストを少し足して柄を出す */
  filter: blur(1px) contrast(1.18) saturate(1.25);
  pointer-events: none;
}

/* 背景を強めたぶん、見出し文字は淡い光暈で可読性を確保 */
.page-head .page-title,
.page-head .page-title-sub {
  text-shadow:
    0 0 10px rgba(250, 243, 236, 0.95),
    0 1px 4px rgba(250, 243, 236, 0.85);
}

/* ページごとの背景バリエーション */
.page-head--seijaku::before {
  background-image: url("/images/works/seijaku.JPG");
  background-position: center 40%;
}

.page-head--tenkou::before {
  background-image: url("/images/works/tenkouni_madou.JPEG");
  background-position: center 25%;
}

/* 見出し下の短い罫線 */
.page-head::after {
  content: "";
  position: relative;
  display: block;
  width: 3em;
  margin: 2rem auto 0;
  border-bottom: 1px solid var(--line);
}

.page-title {
  position: relative;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  text-align: center;
}

.page-title-sub {
  position: relative;
  display: block;
  margin-top: 0.7rem;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--ink-soft);
}

section + section {
  margin-top: 5rem;
}

.section-title {
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  margin-bottom: 1.8rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

p + p {
  margin-top: 1.2em;
}

.note {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* ----------------------------------------------------------
   Home
   ---------------------------------------------------------- */

/* フルブリードヒーロー:画面幅いっぱいに作品を見せる */
.hero--full {
  margin: 0 0 4.5rem;
}

.hero--full .hero-media {
  overflow: hidden;
}

.hero--full .hero-media img {
  display: block;
  width: 100%;
  height: 86vh;
  object-fit: cover;
  /* 羊の背の鳥たちがナビ帯より下に来るよう、やや上寄りでトリミング */
  object-position: center 30%;
  /* 読み込み時にゆっくりスケールイン(絹をそっと広げるイメージ) */
  animation: hero-zoom 3.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes hero-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero--full .hero-media img {
    animation: none;
  }
}

.hero--full figcaption {
  max-width: var(--max-width);
  margin: 1rem auto 0;
  padding: 0 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  text-align: right;
}

.home-main {
  padding-top: 0;
}

.intro {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.intro p {
  font-size: 0.95rem;
}

/* ----------------------------------------------------------
   プレースホルダー(画像差し替え前の枠)
   ---------------------------------------------------------- */

.ph {
  background: var(--ph-bg);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
}

.ph--hero {
  aspect-ratio: 16 / 9;
  /* 絹地の暈しのイメージ:上から下へごく淡い暖色グラデーション */
  background: linear-gradient(
    180deg,
    #f8e7da 0%,
    #f7ecdf 45%,
    #f5efe5 100%
  );
  border: none;
}

.ph--work {
  aspect-ratio: 4 / 5;
}

/* ----------------------------------------------------------
   Works
   ---------------------------------------------------------- */

.series-lead {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 1.8rem;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.6rem;
}

.work-grid figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.work-grid .work-ttl {
  display: block;
  color: var(--ink);
  font-size: 0.85rem;
}

.work-grid .work-ttl-sub {
  display: block;
  font-size: 0.7rem;
  margin-bottom: 0.15rem;
}

/* 画像を images/works/ に置くとプレースホルダー地の上に表示される
   (未配置の間は onerror で img を隠し、地色の枠だけ見せる) */
.ph--work img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ----------------------------------------------------------
   ライトボックス(Works)
   ---------------------------------------------------------- */

.work-grid .ph--work img {
  cursor: zoom-in;
}

.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(42, 36, 30, 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lb.is-open {
  opacity: 1;
  visibility: visible;
}

body.lb-lock {
  overflow: hidden;
}

.lb-stage {
  max-width: 84vw;
  text-align: center;
}

.lb-stage img {
  display: block;
  margin: 0 auto;
  max-width: 84vw;
  max-height: 78vh;
  width: auto;
  height: auto;
}

.lb-stage figcaption {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: rgba(250, 243, 236, 0.82);
}

.lb-stage figcaption .work-ttl {
  display: block;
  font-size: 0.92rem;
  color: #faf3ec;
}

.lb-stage figcaption .work-ttl-sub {
  display: block;
  font-size: 0.72rem;
  margin-bottom: 0.1rem;
  color: rgba(250, 243, 236, 0.65);
}

.lb button {
  position: absolute;
  background: none;
  border: none;
  color: rgba(250, 243, 236, 0.85);
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.lb button:hover {
  opacity: 0.55;
}

.lb-close {
  top: 0.8rem;
  right: 1rem;
  font-size: 2.1rem;
  padding: 0.5rem 0.7rem;
}

.lb-prev,
.lb-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  padding: 0.8rem 1rem;
}

.lb-prev {
  left: 0.4rem;
}

.lb-next {
  right: 0.4rem;
}

@media (max-width: 760px) {
  .lb-stage {
    max-width: 92vw;
  }

  .lb-stage img {
    max-width: 92vw;
    max-height: 68vh;
  }

  .lb-prev,
  .lb-next {
    font-size: 2.1rem;
    padding: 0.7rem 0.5rem;
  }

  .lb-prev {
    left: 0.1rem;
  }

  .lb-next {
    right: 0.1rem;
  }
}

/* ----------------------------------------------------------
   About
   ---------------------------------------------------------- */

/* プロフィール:写真+テキスト */
.profile-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.4rem;
  align-items: start;
}

.profile-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 62% 20%;
}

.bio-table {
  width: 100%;
}

.bio-table dl {
  display: grid;
  grid-template-columns: 7em 1fr;
  row-gap: 0.9rem;
  font-size: 0.92rem;
}

.bio-table dd {
  line-height: 1.9;
}

.bio-table dt {
  color: var(--ink-soft);
  font-weight: normal;
}

/* ----------------------------------------------------------
   Class(絵画教室)
   ---------------------------------------------------------- */

.class-card {
  padding: 2.2rem 2rem;
  /* 罫線ではなく地色の変化(桜の白)で区切る */
  background: var(--sakura);
}

.class-card + .class-card {
  margin-top: 1.6rem;
}

.class-card h3 {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  margin-bottom: 0.3rem;
}

.class-card .class-genre {
  font-size: 0.8rem;
  color: var(--ink-soft);
  letter-spacing: 0.15em;
  margin-bottom: 1.4rem;
}

.class-card dl {
  display: grid;
  grid-template-columns: 6em 1fr;
  row-gap: 0.5rem;
  font-size: 0.92rem;
}

.class-card dt {
  color: var(--ink-soft);
}

/* 教室情報+教室写真の2カラム(左右の天地を揃える) */
.class-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.8rem 2.6rem;
  align-items: stretch;
}

.class-body .class-photo {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* 情報ブロックと同じ高さに引き伸ばす(キャプション分を除いて写真が伸縮) */
.class-body .ph--class {
  aspect-ratio: auto;
  width: 100%;
  flex: 1;
  min-height: 180px;
}

/* 写真下の控えめなキャプション(見出しと同系統の字間) */
.class-photo figcaption {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  text-align: center;
}

.ph--class {
  position: relative;
  aspect-ratio: 4 / 3;
}

/* 写真を images/class/ に置くとプレースホルダーの上に表示される */
.ph--class img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 縦長写真で被写体が下寄りの場合の切り抜き位置 */
.ph--class img.focus-bottom {
  object-position: center 74%;
}

/* 英語版Class:教室写真2枚並び */
.class-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-top: 2.5rem;
}

.class-photos figcaption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  text-align: center;
}

/* ----------------------------------------------------------
   News
   ---------------------------------------------------------- */

.news-list {
  list-style: none;
}

.news-item {
  border-bottom: 1px solid var(--line);
  padding: 1.6rem 0.2rem;
}

.news-item:first-child {
  border-top: 1px solid var(--line);
}

.news-item time {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
}

.news-item h3 {
  font-size: 0.98rem;
  font-weight: 500;
  margin-top: 0.2rem;
}

.news-item p {
  font-size: 0.88rem;
  margin-top: 0.4rem;
  color: var(--ink-soft);
}

/* ----------------------------------------------------------
   Contact
   ---------------------------------------------------------- */

.contact-block {
  text-align: center;
  padding: 1rem 0 0;
}

.contact-block .contact-label {
  font-size: 0.78rem;
  letter-spacing: 0.25em;
  color: var(--ink-soft);
}

.contact-block .contact-value {
  font-size: 1.05rem;
  margin-top: 0.3rem;
}

.contact-block + .contact-block {
  margin-top: 3rem;
}

/* ----------------------------------------------------------
   フッター
   ---------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 1.5rem 3rem;
  text-align: center;
}

.footer-icons {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2.4rem;
}

.footer-icons a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.footer-icons svg {
  width: 22px;
  height: 22px;
  display: block;
}

.footer-icons span {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}

.copyright {
  margin-top: 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}

/* ----------------------------------------------------------
   レスポンシブ(〜760px)
   ---------------------------------------------------------- */

@media (max-width: 760px) {
  body {
    font-size: 15px;
  }

  .site-header {
    padding-top: 2.2rem;
  }

  .site-title .title-ja {
    font-size: 1.4rem;
  }

  /* ハンバーガーメニュー */
  .nav-toggle {
    display: block;
    position: absolute;
    top: 1.4rem;
    right: 1.2rem;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--ink);
    margin: 7px auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

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

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

  .site-nav {
    display: none;
    border-bottom: none;
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0;
  }

  .site-nav li a {
    padding: 0.7rem 0;
  }

  .site-nav li a[aria-current="page"] {
    border-bottom: none;
    padding-bottom: 0.7rem;
  }

  .site-nav li a[aria-current="page"]::after {
    content: "";
    display: block;
    width: 1.6em;
    margin: 0.3rem auto 0;
    border-bottom: 1px solid var(--ink);
  }

  main {
    padding: 3rem 1.2rem 4.5rem;
  }

  .page-head {
    padding: 1.6rem 0.5rem 1.6rem;
    margin-bottom: 2.6rem;
  }

  .page-title {
    font-size: 1.25rem;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
  }

  section + section {
    margin-top: 3.5rem;
  }

  .work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem 1rem;
  }

  .class-card {
    padding: 1.6rem 1.3rem;
  }

  .class-card dl {
    grid-template-columns: 5.5em 1fr;
    font-size: 0.88rem;
  }

  .profile-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .profile-photo {
    max-width: 240px;
    margin: 0 auto;
  }

  .class-body,
  .class-photos {
    grid-template-columns: 1fr;
  }

  /* スマホは情報→写真の縦積み、写真は幅いっぱい・4:3 */
  .class-body .ph--class {
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
  }

  /* 年表はスマホでは縦積み(年の下に内容) */
  .bio-table dl {
    grid-template-columns: 1fr;
    row-gap: 0;
    font-size: 0.88rem;
  }

  .bio-table dt {
    margin-top: 1.1rem;
    font-size: 0.8rem;
  }

  .bio-table dt:first-of-type {
    margin-top: 0;
  }

  /* ホーム(オーバーレイヘッダー+ヒーロー)のスマホ調整 */
  .site-header--overlay {
    padding-top: 2rem;
    padding-bottom: 1.4rem;
  }

  .site-header--overlay .title-ja {
    font-size: 1.7rem;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
  }

  .site-header--overlay .site-title--en .title-ja {
    font-size: 1.3rem;
  }

  .site-header--overlay .site-nav.is-open {
    background: rgba(250, 243, 236, 0.96);
  }

  /* 絵の暗部に重なっても見えるよう、ハンバーガー線に淡い光暈 */
  .site-header--overlay .nav-toggle span {
    box-shadow: 0 0 6px rgba(250, 243, 236, 0.85);
  }

  .hero--full {
    margin-bottom: 3rem;
  }

  .hero--full .hero-media img {
    height: 64vh;
  }
}