/* =====================================================
   野鳥の写真展 告知サイト  style.css
   配色：チラシ担当さん指定の3色（ダークグリーン #1e4837／ティール #008080／ライトベージュ #eae3bc）
   ===================================================== */

:root {
 /* --- 公式カラー（チラシ担当さん指定） --- */
 --green-900: #1e4837; /* ダークグリーン：濃い背景の基本色 */
 --green-500: #008080; /* ティール：リンク・見出しラベル・アイコン */
 --cream: #eae3bc; /* ライトベージュ：濃い背景の上の文字・ボタン・帯 */
 /* --- 上の3色から作った派生色 --- */
 --green-950: #132f25; /* フッター・グラデーションの端（ダークグリーンをさらに暗く） */
 --green-800: #245442; /* ボタンなど、ダークグリーンより少し明るい面 */
 --green-700: #2d6650;
 --green-300: #93bfa9; /* 濃い背景の上の小見出し */
 --cream-2: #f3efdb; /* ライトベージュを薄めた面 */
 --paper: #fbfaf3; /* ページの地色 */
 --ink: #1c2925;
 --muted: #5f6d67;
 --line: rgba(30, 72, 55, 0.16);
 --accent: #008080;
 --sky: #008080;

 --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
 --sans:
  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
 --en: "Cormorant Garamond", "Times New Roman", serif;

 --container: 1040px;
 --gutter: 16px;
}

*,
*::before,
*::after {
 box-sizing: border-box;
}
html {
 overflow-x: hidden;
 scroll-behavior: smooth;
 -webkit-text-size-adjust: 100%;
}
body {
 margin: 0;
 font-family: var(--sans);
 font-size: 16px;
 line-height: 1.9;
 color: var(--ink);
 background: var(--paper);
 overflow-x: hidden;
 font-feature-settings: "palt";
}
img {
 max-width: 100%;
 height: auto;
 display: block;
}
a {
 color: inherit;
}
h1,
h2,
h3 {
 font-family: var(--serif);
 font-weight: 500;
 line-height: 1.4;
 margin: 0;
}
p {
 margin: 0;
}
ul,
dl {
 margin: 0;
 padding: 0;
 list-style: none;
}

.container {
 max-width: var(--container);
 margin: 0 auto;
 padding: 0 var(--gutter);
}
section[id] {
 scroll-margin-top: 56px;
} /* 固定ヘッダーぶん、ページ内リンクの着地位置をずらす */
.sp-only {
 display: none;
}
@media (max-width: 640px) {
 .sp-only {
  display: inline;
 }
 .pc-only {
  display: none;
 }
}

/* 共通パーツ ------------------------------------ */
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}
.eyebrow {
 font-family: var(--en);
 font-size: 15px;
 letter-spacing: 0.32em;
 text-transform: uppercase;
 color: var(--green-500);
 margin-bottom: 10px;
}
.eyebrow--light {
 color: var(--green-300);
}
.section-title {
 font-size: clamp(26px, 3.6vw, 38px);
 letter-spacing: 0.06em;
 margin-bottom: 18px;
}
.section-title--light {
 color: var(--cream);
}
.section-lead {
 color: var(--muted);
 margin-bottom: 40px;
}

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 min-height: 52px;
 padding: 12px 30px;
 border-radius: 999px;
 font-family: var(--sans);
 font-weight: 500;
 font-size: 15px;
 letter-spacing: 0.08em;
 text-decoration: none;
 transition:
  transform 0.2s,
  background 0.2s,
  color 0.2s,
  box-shadow 0.2s;
 border: 1px solid transparent;
}
.btn:hover {
 transform: translateY(-2px);
}
.btn--light {
 background: var(--cream);
 color: var(--green-900);
 border-color: var(--cream);
}
.btn--light:hover {
 background: #fff;
}
.btn--ghost {
 background: transparent;
 color: var(--cream);
 border-color: rgba(233, 227, 210, 0.55);
}
.btn--ghost:hover {
 border-color: var(--cream);
 background: rgba(233, 227, 210, 0.08);
}
.btn--dark {
 background: var(--green-800);
 color: var(--cream);
}
.btn--dark:hover {
 background: var(--green-700);
 box-shadow: 0 8px 22px rgba(11, 36, 28, 0.25);
}
.btn--outline {
 background: transparent;
 color: var(--green-900);
 border-color: var(--green-900);
}
.btn--outline:hover {
 background: var(--green-900);
 color: var(--cream);
}
/* 2行ボタン（大きい文字＋小さい補足） */
.btn--stack {
 flex-direction: column;
 gap: 2px;
 line-height: 1.4;
 padding: 12px 26px;
 min-width: 240px;
}
.btn--stack small {
 font-size: 11px;
 font-weight: 400;
 letter-spacing: 0.04em;
 opacity: 0.8;
}
.btn--ig {
 background: var(--cream);
 color: var(--green-900);
 font-family: var(--en);
 font-size: 22px;
 font-weight: 600;
 letter-spacing: 0.03em;
 padding: 14px 34px;
}
.btn--ig:hover {
 background: #fff;
}
.text-link {
 color: var(--sky);
 text-decoration: underline;
 text-underline-offset: 3px;
}

/* ヘッダー ------------------------------------ */
.site-header {
 position: fixed;
 inset: 0 0 auto 0;
 z-index: 50;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 14px var(--gutter);
 color: var(--cream);
 background: linear-gradient(
  to bottom,
  rgba(7, 26, 20, 0.75),
  rgba(7, 26, 20, 0)
 );
 pointer-events: none;
}
.site-header > * {
 pointer-events: auto;
}
.site-header__brand {
 display: flex;
 align-items: baseline;
 gap: 10px;
 text-decoration: none;
}
.site-header__ja {
 font-family: var(--serif);
 font-size: 18px;
 letter-spacing: 0.12em;
}
.site-header__en {
 font-family: var(--en);
 font-size: 14px;
 letter-spacing: 0.12em;
 opacity: 0.8;
}
.site-header__nav {
 display: flex;
 gap: 22px;
 font-size: 13px;
 letter-spacing: 0.1em;
}
.site-header__nav a {
 text-decoration: none;
 opacity: 0.85;
}
.site-header__nav a:hover {
 opacity: 1;
}
.site-header__ig {
 padding: 6px 14px;
 border: 1px solid rgba(233, 227, 210, 0.5);
 border-radius: 999px;
}
.site-header {
 transition:
  background 0.3s,
  color 0.3s,
  padding 0.3s;
}
.site-header.is-scrolled {
 color: var(--green-900);
 background: rgba(251, 250, 246, 0.92);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 padding: 10px var(--gutter);
 box-shadow: 0 1px 0 var(--line);
}
.site-header.is-scrolled .site-header__ig {
 border-color: rgba(11, 36, 28, 0.4);
}
@media (max-width: 640px) {
 .site-header__en {
  display: none;
 }
}

/* スマホ用メニュー ------------------------------------ */
/* 角丸四角のダークグリーン地にベージュの三本線。写真の上でも、白っぽいヘッダーの上でも同じ見た目
   ※ iPhoneのSafariはボタンの色を勝手に青にするので、色は必ず明示する */
.menu-btn {
 display: none;
 width: 42px;
 height: 42px;
 padding: 0;
 border: 0;
 border-radius: 10px;
 background: var(--green-900);
 color: var(--cream);
 box-shadow: 0 2px 8px rgba(11, 36, 28, 0.25);
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 position: relative;
 z-index: 70;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 5px;
 transition:
  background 0.2s,
  color 0.2s;
}
.menu-btn__bar {
 display: block;
 width: 22px;
 height: 2px;
 background: currentColor;
 border-radius: 2px;
 transition:
  transform 0.25s,
  opacity 0.2s;
}
/* 開いたら「×」に。メニューの緑地の上なので、ベージュ地・緑の線に反転 */
body.menu-open .menu-btn {
 background: var(--cream);
 color: var(--green-900);
}
body.menu-open .menu-btn__bar:nth-child(1) {
 transform: translateY(7px) rotate(45deg);
}
body.menu-open .menu-btn__bar:nth-child(2) {
 opacity: 0;
}
body.menu-open .menu-btn__bar:nth-child(3) {
 transform: translateY(-7px) rotate(-45deg);
}
.mobile-menu {
 position: fixed;
 inset: 0;
 z-index: 40; /* ヘッダー（50）より下。×ボタンと店名はヘッダー側に見えたまま */
 background: rgba(19, 47, 37, 0.97);
 color: var(--cream);
 display: flex;
 flex-direction: column;
 justify-content: flex-start; /* center にすると背の低い画面で上が切れて戻れんくなる */
 padding: 72px var(--gutter) 32px;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
}
/* 収まるときは上下中央、収まらんときは普通にスクロール */
.mobile-menu__nav {
 margin-top: auto;
}
.mobile-menu__foot {
 margin-bottom: auto;
}
@media (max-height: 700px) {
 .mobile-menu__nav a {
  padding: 7px 20px;
  font-size: 19px;
 }
 .mobile-menu__ig {
  margin-top: 10px;
 }
 .mobile-menu__foot {
  margin-top: 18px;
 }
}
.mobile-menu[hidden] {
 display: none;
}
.mobile-menu__nav {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
}
.mobile-menu__nav a {
 font-family: var(--serif);
 font-size: 22px;
 letter-spacing: 0.18em;
 text-decoration: none;
 padding: 12px 20px;
}
.mobile-menu__ig {
 margin-top: 18px;
 font-family: var(--en) !important;
 font-size: 18px !important;
 letter-spacing: 0.04em !important;
 border: 1px solid rgba(234, 227, 188, 0.6);
 border-radius: 999px;
}
.mobile-menu__foot {
 margin-top: 32px;
 text-align: center;
 font-size: 12px;
 letter-spacing: 0.12em;
 opacity: 0.7;
}
body.menu-open {
 overflow: hidden; /* 後ろのページが動かんように */
}
/* メニューを開いてる間は、ヘッダーを透明・ベージュ文字に（スクロール後の白っぽい帯を消す） */
body.menu-open .site-header,
body.menu-open .site-header.is-scrolled {
 background: transparent;
 box-shadow: none;
 color: var(--cream);
 backdrop-filter: none;
 -webkit-backdrop-filter: none;
}
@media (max-width: 900px) {
 .menu-btn {
  display: flex;
 }
 .site-header__nav {
  display: none; /* スマホはハンバーガーに集約 */
 }
}

/* ヒーロー ------------------------------------
   スマホ：写真を横いっぱい → 下に文字
   PC   ：写真を画面いっぱい（左右は同じ写真のぼかし hero_bg.jpg を敷く）→ 下に日程の帯 */
.hero {
 position: relative;
 isolation: isolate;
 min-height: 100svh;
 padding: 76px 0 64px;
 color: var(--cream);
 background: linear-gradient(
  160deg,
  var(--green-800) 0%,
  var(--green-900) 55%,
  var(--green-950) 100%
 );
 overflow: hidden;
}
.hero__grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 4px;
}
.hero__visual {
 position: relative;
}
.hero__visual-box {
 position: relative;
}
/* 写真の下端を背景に溶かす（スマホ） */
.hero__key {
 width: 100%;
 height: auto;
 display: block;
 -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
 mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}
.hero__copy {
 margin: 24px var(--gutter) 0;
 font-family: var(--serif);
 font-size: 20px;
 letter-spacing: 0.22em;
 line-height: 1.9;
 display: flex;
 flex-direction: column;
 gap: 2px;
 text-align: center;
}
.hero__inner {
 text-align: center;
 padding: 0 var(--gutter);
}
.hero__meta {
 margin: 30px 0 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 padding: 18px 0;
 border-top: 1px solid rgba(234, 227, 188, 0.35);
 border-bottom: 1px solid rgba(234, 227, 188, 0.35);
 width: 100%;
}
.hero__date {
 font-family: var(--en);
 display: flex;
 align-items: baseline;
 gap: 12px;
 flex-wrap: wrap;
 justify-content: center;
}
.hero__date-y {
 font-size: 18px;
 letter-spacing: 0.2em;
 opacity: 0.8;
}
.hero__date-md {
 font-size: clamp(36px, 4vw, 48px);
 font-weight: 500;
 letter-spacing: 0.02em;
 line-height: 1;
}
.hero__date-md small {
 font-family: var(--sans);
 font-size: 13px;
 letter-spacing: 0.1em;
 margin-left: 6px;
 opacity: 0.85;
 vertical-align: 0.9em;
}
.hero__date-sep {
 font-size: 32px;
 opacity: 0.6;
}
.hero__place {
 font-size: 15px;
 letter-spacing: 0.1em;
}
.hero__free {
 margin-top: 6px;
 font-family: var(--serif);
 font-size: 15px;
 letter-spacing: 0.3em;
 padding: 4px 18px 4px 22px;
 border: 1px solid rgba(234, 227, 188, 0.7);
}
.hero__actions {
 margin-top: 30px;
 display: flex;
 gap: 14px;
 justify-content: center;
 flex-wrap: wrap;
}
@media (max-width: 640px) {
 .hero__copy {
  font-size: 19px;
 }
 .hero__date {
  gap: 8px;
 }
 .hero__date-y {
  flex-basis: 100%;
  font-size: 15px;
  margin-bottom: -6px;
 }
 .hero__date-md {
  font-size: 34px;
  white-space: nowrap;
 }
 .hero__date-md small {
  font-size: 11px;
  margin-left: 4px;
 }
 .hero__date-sep {
  font-size: 24px;
 }
}

/* PC：写真ばーん＋下に帯 */
@media (min-width: 901px) {
 .hero {
  --band-h: 132px; /* 下の帯の高さ */
  padding: 0;
  background: var(--green-950);
 }
 .hero__grid {
  display: block;
 }
 .hero__visual {
  height: calc(100svh - var(--band-h));
  min-height: 460px;
  padding-top: 64px; /* ヘッダーぶん */
  display: flex;
  justify-content: center;
  background: url(images/hero_bg.jpg) center / cover no-repeat;
 }
 /* 写真の下端を帯の色へ溶かす */
 .hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
   to top,
   var(--green-950) 0%,
   rgba(19, 47, 37, 0) 14%
  );
 }
 .hero__visual-box {
  height: 100%;
  max-width: 100%;
 }
 .hero__key {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* 左右のふちをぼかし背景に溶かす */
  -webkit-mask-image: linear-gradient(
   to right,
   transparent,
   #000 5%,
   #000 95%,
   transparent
  );
  mask-image: linear-gradient(
   to right,
   transparent,
   #000 5%,
   #000 95%,
   transparent
  );
 }
 .hero__copy {
  position: absolute;
  right: 5%;
  bottom: 7%;
  z-index: 1;
  margin: 0;
  text-align: right;
  font-size: clamp(18px, 1.7vw, 25px);
  letter-spacing: 0.2em;
  text-shadow:
   0 2px 18px rgba(0, 0, 0, 0.7),
   0 0 4px rgba(0, 0, 0, 0.5);
 }
 .hero__inner {
  height: var(--band-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 64px);
  padding: 0 var(--gutter);
  text-align: left;
 }
 .hero__meta {
  margin: 0;
  padding: 0;
  border: 0;
  width: auto;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
   "date date"
   "place free";
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
 }
 .hero__date {
  grid-area: date;
  justify-content: flex-start;
 }
 .hero__date-md {
  font-size: 40px;
 }
 .hero__place {
  grid-area: place;
  font-size: 14px;
 }
 .hero__free {
  grid-area: free;
  margin: 0;
  font-size: 13px;
  padding: 2px 12px 2px 16px;
 }
 .hero__actions {
  margin: 0;
  flex-wrap: nowrap;
 }
}
/* PCでも幅が狭いときは Instagram のボタンを帯から外す（ヘッダーにある） */
@media (min-width: 901px) and (max-width: 1140px) {
 .hero__actions .btn--ghost {
  display: none;
 }
}

/* 写真展について ------------------------------------ */
.about {
 background: var(--cream-2);
 padding: clamp(70px, 10vw, 120px) 0;
 text-align: center;
 position: relative;
}
.about__inner {
 max-width: 760px;
}
.about__title {
 font-size: clamp(24px, 3.6vw, 36px);
 letter-spacing: 0.1em;
 margin-bottom: 28px;
}
.about__lead {
 font-size: clamp(15px, 1.7vw, 17px);
 letter-spacing: 0.08em;
 line-height: 2.2;
}
.about__note {
 margin-top: 28px;
 color: var(--muted);
 font-size: 14px;
 letter-spacing: 0.08em;
}

/* 開催概要 ------------------------------------ */
.info {
 background: var(--green-900);
 color: var(--cream);
 padding: clamp(70px, 10vw, 120px) 0;
}
.date-strip {
 display: flex;
 align-items: center;
 gap: 22px;
 flex-wrap: wrap;
 margin: 34px 0 40px;
 padding: 26px 28px;
 border: 1px solid rgba(233, 227, 210, 0.28);
 background: rgba(255, 255, 255, 0.03);
}
.date-strip__label {
 font-family: var(--serif);
 font-size: 15px;
 letter-spacing: 0.2em;
 display: flex;
 align-items: center;
 gap: 14px;
}
.date-strip__label::before {
 content: "";
 width: 34px;
 height: 1px;
 background: var(--cream);
}
.date-strip__days {
 display: flex;
 gap: 0;
 flex-wrap: wrap;
}
.date-strip__days li {
 display: flex;
 align-items: baseline;
 gap: 8px;
 padding: 0 22px;
 border-left: 1px solid rgba(233, 227, 210, 0.28);
}
.date-strip__days li:first-child {
 padding-left: 0;
 border-left: 0;
}
.date-strip__days b {
 font-family: var(--en);
 font-weight: 500;
 font-size: clamp(40px, 6vw, 64px);
 line-height: 1;
 letter-spacing: 0.01em;
}
.date-strip__days small {
 font-size: 13px;
 letter-spacing: 0.1em;
 opacity: 0.9;
}
@media (max-width: 640px) {
 .date-strip {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 18px;
 }
 .date-strip__days {
  flex-wrap: nowrap;
 }
 .date-strip__days li {
  padding: 0 10px;
  gap: 5px;
  white-space: nowrap;
 }
 .date-strip__days b {
  font-size: 32px;
 }
 .date-strip__days small {
  font-size: 11px;
  letter-spacing: 0.05em;
 }
}

.info__list {
 border-top: 1px solid rgba(233, 227, 210, 0.2);
}
.info__row {
 display: grid;
 grid-template-columns: 150px 1fr;
 gap: 12px 24px;
 padding: 20px 0;
 border-bottom: 1px solid rgba(233, 227, 210, 0.2);
}
.info__row dt {
 font-family: var(--serif);
 letter-spacing: 0.2em;
 color: var(--green-300);
 font-size: 15px;
}
.info__row dd {
 margin: 0;
 letter-spacing: 0.06em;
}
.info__sub {
 font-size: 14px;
 opacity: 0.8;
}
.info__free {
 font-family: var(--serif);
 font-size: 24px;
 letter-spacing: 0.2em;
 font-weight: 500;
}
@media (max-width: 640px) {
 .info__row {
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 16px 0;
 }
}

/* 楽しみ方 ------------------------------------ */
.fun {
 padding: clamp(70px, 10vw, 120px) 0;
 background: var(--paper);
}
.fun__cards {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 22px;
}
.fun__card {
 background: #fff;
 border: 1px solid var(--line);
 padding: 34px 26px 30px;
 text-align: center;
 position: relative;
}
.fun__card::before {
 content: "";
 position: absolute;
 left: 50%;
 top: 0;
 transform: translateX(-50%);
 width: 44px;
 height: 2px;
 background: var(--green-500);
}
.fun__icon {
 width: 96px;
 height: 96px;
 margin: 0 auto 18px;
 display: grid;
 place-items: center;
 border-radius: 50%;
 background: var(--cream-2); /* ベージュの丸座布団 */
}
.fun__icon img {
 width: 64px;
 height: 64px;
 display: block;
}
.fun__card h3 {
 font-size: 20px;
 letter-spacing: 0.1em;
 margin-bottom: 10px;
}
.fun__card p {
 font-size: 14px;
 color: var(--muted);
 line-height: 1.9;
}
@media (max-width: 820px) {
 .fun__cards {
  grid-template-columns: 1fr;
  max-width: 520px;
  margin: 0 auto;
 }
}

.goods {
 margin-top: 48px;
 padding: 30px 28px;
 background: var(--cream);
 display: flex;
 align-items: center;
 gap: 28px;
 flex-wrap: wrap;
}
.goods__title {
 font-size: 20px;
 letter-spacing: 0.1em;
 white-space: nowrap;
 padding-right: 28px;
 border-right: 1px solid rgba(28, 41, 37, 0.2);
}
.goods__list {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}
.goods__list li {
 font-size: 14px;
 letter-spacing: 0.08em;
 padding: 8px 16px;
 border-radius: 999px;
 background: #fff;
 border: 1px solid var(--line);
}
@media (max-width: 640px) {
 .goods {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 20px;
 }
 .goods__title {
  border-right: 0;
  padding-right: 0;
  white-space: normal;
 }
}

/* フライヤー ------------------------------------ */
.flyer {
 background: var(--cream-2);
 padding: clamp(70px, 10vw, 120px) 0;
}
.flyer[hidden] {
 display: none;
}
.flyer__inner {
 display: grid;
 grid-template-columns: minmax(0, 420px) 1fr;
 gap: 48px;
 align-items: center;
}
.flyer__figure {
 margin: 0;
}
.flyer__figure img {
 width: 100%;
 box-shadow: 0 20px 50px rgba(11, 36, 28, 0.22);
}
.flyer__buttons {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}
.flyer__text p {
 margin-bottom: 24px;
 color: var(--muted);
}
@media (max-width: 820px) {
 .flyer__inner {
  grid-template-columns: 1fr;
  gap: 32px;
 }
 .flyer__figure {
  max-width: 420px;
  margin: 0 auto;
 }
 .flyer__text {
  text-align: center;
 }
 .flyer__buttons {
  justify-content: center;
 }
 .btn--stack {
  width: 100%;
  max-width: 360px;
 }
}

/* アクセス ------------------------------------ */
.access {
 padding: clamp(70px, 10vw, 120px) 0;
 background: var(--paper);
}
.access__grid {
 display: grid;
 grid-template-columns: 1.2fr 1fr;
 gap: 40px;
 align-items: stretch;
}
.access__map {
 min-height: 360px;
 background: var(--cream);
 border: 1px solid var(--line);
}
.access__map iframe {
 width: 100%;
 height: 100%;
 min-height: 360px;
}
.access__body h3 {
 font-size: 24px;
 letter-spacing: 0.1em;
 margin-bottom: 14px;
}
.access__addr {
 letter-spacing: 0.06em;
 margin-bottom: 18px;
}
.access__list {
 margin-bottom: 26px;
 color: var(--muted);
 font-size: 14px;
}
.access__list li {
 padding-left: 18px;
 position: relative;
 line-height: 1.9;
}
.access__list li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.9em;
 width: 5px;
 height: 5px;
 background: var(--accent);
}
@media (max-width: 820px) {
 .access__grid {
  grid-template-columns: 1fr;
 }
 .access__map {
  min-height: 300px;
 }
}

/* お問い合わせ ------------------------------------ */
.contact {
 background: var(--green-900);
 color: var(--cream);
 padding: clamp(70px, 10vw, 120px) 0;
 text-align: center;
}
.contact__inner {
 max-width: 680px;
}
.contact__lead {
 letter-spacing: 0.08em;
 margin-bottom: 32px;
}
.contact__note {
 margin-top: 14px;
 font-size: 13px;
 opacity: 0.7;
 letter-spacing: 0.1em;
}

/* フッター ------------------------------------ */
.site-footer {
 position: relative;
 background: var(--green-950);
 color: var(--cream);
 padding: 40px var(--gutter) 34px;
 text-align: center;
}
.site-footer__logo {
 display: block;
 width: min(200px, 56%);
 margin: 0 auto 16px;
 opacity: 0.95;
 transition:
  opacity 0.2s,
  transform 0.2s;
}
.site-footer__logo img {
 width: 100%;
 height: auto;
}
.site-footer__logo:hover {
 opacity: 1;
 transform: translateY(-2px);
}
.site-footer__title {
 font-family: var(--serif);
 font-size: 16px;
 letter-spacing: 0.14em;
}
.site-footer__title span {
 font-family: var(--en);
 letter-spacing: 0.14em;
 opacity: 0.7;
 font-size: 14px;
}
.site-footer__copy {
 font-family: var(--en);
 letter-spacing: 0.2em;
 opacity: 0.8;
 margin-top: 6px;
}
.site-footer small {
 display: block;
 margin-top: 18px;
 font-size: 12px;
 opacity: 0.55;
 letter-spacing: 0.06em;
}

/* 背景のデコ写真（インスタ写真をポラロイド風に左右へ散らす） ------------------------------------
   画像は images/photos/photo_01.jpg〜photo_10.jpg。
   文字と重ならんように、コンテンツが中央寄せのセクション（about・contact）は1200px以上、
   コンテンツが横いっぱいのセクション（info・fun・flyer・access）は1400px以上でだけ出す。 */
.about,
.info,
.fun,
.flyer,
.access,
.contact {
 position: relative;
}
.about > .container,
.info > .container,
.fun > .container,
.flyer > .container,
.access > .container,
.contact > .container {
 position: relative;
 z-index: 2; /* 文字は写真より上 */
}
.deco {
 --deco-w: 150px; /* 写真の幅 */
 --deco-edge: calc(
  50% - var(--container) / 2 - 16px - var(--deco-w)
 ); /* コンテンツの外側 */
 display: none;
 position: absolute;
 z-index: 1;
 width: var(--deco-w);
 aspect-ratio: 4 / 5;
 object-fit: cover;
 padding: 6px 6px 22px; /* ポラロイド風の白フチ（下だけ広め） */
 background: #fff;
 box-shadow: 0 14px 34px rgba(11, 36, 28, 0.22);
 pointer-events: none;
 transform: rotate(var(--r, 0deg));
}
@media (min-width: 1200px) {
 .deco--a1,
 .deco--a2,
 .deco--c1,
 .deco--c2 {
  display: block;
 }
}
@media (min-width: 1400px) {
 .deco {
  --deco-w: 190px;
  display: block;
 }
}
/* 位置と傾き（--r が傾き） */
.deco--a1 {
 left: var(--deco-edge);
 top: 48px;
 --r: -6deg;
} /* PCはヒーローの帯にかからん位置 */
.deco--a2 {
 right: var(--deco-edge);
 bottom: -30px;
 --r: 5deg;
}
.deco--i1 {
 right: var(--deco-edge);
 top: 72px;
 --r: 4deg;
}
.deco--i2 {
 left: var(--deco-edge);
 bottom: 96px;
 --r: -4deg;
}
.deco--f1 {
 left: var(--deco-edge);
 top: 46%;
 --r: 6deg;
}
.deco--f2 {
 right: var(--deco-edge);
 top: 10%;
 --r: -5deg;
}
.deco--fl1 {
 right: var(--deco-edge);
 bottom: 12%;
 --r: 5deg;
}
.deco--ac1 {
 left: var(--deco-edge);
 top: 52%;
 --r: -3deg;
}
.deco--c1 {
 left: var(--deco-edge);
 top: 18%;
 --r: -7deg;
}
.deco--c2 {
 right: var(--deco-edge);
 top: 34%;
 --r: 6deg;
}

/* 1199px以下（スマホ・タブレット）：セクションの継ぎ目に小さく、左右の端からのぞかせる。
   文字と重ならんように、上下の余白（padding 70px）の範囲だけに収める */
@media (max-width: 1199px) {
 .deco {
  display: block;
  --deco-w: 96px;
  padding: 4px 4px 14px;
  box-shadow: 0 8px 20px rgba(11, 36, 28, 0.2);
 }
 /* PC用の位置（top/bottom・left/right）が残らんように、使わん側は auto に戻す */
 .deco--a1 {
  left: -10px;
  right: auto;
  top: -64px;
  bottom: auto;
  --r: -8deg;
 } /* ヒーロー→about 左 */
 .deco--i2 {
  left: -12px;
  right: auto;
  top: -64px;
  bottom: auto;
  --r: 6deg;
 } /* about→開催概要 左 */
 .deco--a2 {
  right: -10px;
  left: auto;
  bottom: -64px;
  top: auto;
  --r: 7deg;
 } /* about→開催概要 右 */
 .deco--i1 {
  left: -10px;
  right: auto;
  bottom: -64px;
  top: auto;
  --r: -6deg;
 } /* 開催概要→楽しみ方 左 */
 .deco--f2 {
  right: -12px;
  left: auto;
  top: -64px;
  bottom: auto;
  --r: 5deg;
 } /* 開催概要→楽しみ方 右 */
 .deco--f1 {
  left: -10px;
  right: auto;
  bottom: -64px;
  top: auto;
  --r: 6deg;
 } /* 楽しみ方→フライヤー 左 */
 .deco--fl1 {
  right: -10px;
  left: auto;
  bottom: -64px;
  top: auto;
  --r: -5deg;
 } /* フライヤー→アクセス 右 */
 .deco--ac1 {
  left: -10px;
  right: auto;
  bottom: -64px;
  top: auto;
  --r: -7deg;
 } /* アクセス→お問い合わせ 左 */
 .deco--c1 {
  right: -12px;
  left: auto;
  top: -64px;
  bottom: auto;
  --r: 6deg;
 } /* アクセス→お問い合わせ 右 */
 .deco--c2 {
  left: -10px;
  right: auto;
  bottom: -64px;
  top: auto;
  --r: -5deg;
 } /* お問い合わせ→フッター 左 */
}
@media (max-width: 640px) {
 .deco {
  --deco-w: 86px;
 }
}

/* 動きを抑える設定の人向け */
@media (prefers-reduced-motion: reduce) {
 html {
  scroll-behavior: auto;
 }
 .btn:hover {
  transform: none;
 }
}