/* -----------------------------------
 * ベーススタイル
 * --------------------------------- */
:root {
  --header-z: 100;
  --header-h: 80px;

  --font--serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --white: #fffefc;
  --black: #272520;

  --color--primary: hsl(80, 100%, 32%);
  --color--focus: hsl(80, 100%, 32%);
  --color--text: #2d322b;

  --color--border: hsl(120, 7%, 84%);
  --color--bg: hsl(80, 50%, 98%);

  /* bgカラー, primaryカラー, 黒を混ぜる */
  --color--bg-mid: color-mix(
    in srgb,
    var(--color--bg) 80%,
    color-mix(in srgb, var(--color--primary) 25%, black)
  );

  /* フォントサイズ */
  --font-size--base: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);

  /* コンテンツサイズ */
  --size--md: 900px;
  --size--lg: 1440px;
  --size--xl: 1600px;

  /* トランジション */
  --duration: 0.4s;
  --duration--fadeIn: 0.6s;

  /* サイトの左右両端につける共通の余白量 */
  --space--gutter: var(--space--6);
}

html {
  /* 要素はみ出しによる横スクロールの発生を防止. (overflow は 継承プロパティではないので両方記述） */
  overflow-x: clip;

  /* ダイアログ展開時のガタツキを防ぐ */
  scrollbar-gutter: stable;
}
html:has(:modal[open]) {
  /* モーダルが開いている時はコンテンツをスクロールさせない */
  overflow: hidden;
}
body {
  /* htmlから継承する */
  overflow: inherit;
}

/* フォーカスリングの調整 */
:where(a, button):focus-visible {
  outline: 2px solid var(--color--focus);
}


/* -----------------------------------
 * 汎用コンポーネントクラス
 * --------------------------------- */
/* 画像ラッパー */
.img-frame {
  overflow: hidden;
}
:where(.img-frame) > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* コンテンツサイズの管理 */
.container {
  padding-inline: var(--space--gutter);
}
.container > * {
  max-width: var(--size--md);
  margin-inline: auto;
}
.container--lg > * {
  max-width: var(--size--lg);
}
.container--xl > * {
  max-width: var(--size--xl);
}

/* 第１章で学んだ、メディアクエリに依存しないカラムコントロール */
.switch-columns {
  display: flex;
  flex-wrap: wrap;
}
.switch-columns__side {
  flex-basis: var(--side-width, 240px);
  flex-grow: 1;
}
.switch-columns__main {
  flex-basis: min(100%, var(--main-width, 50%));
  flex-grow: 999999; /* 大きな数値を指定 */
}

/* ボタンのベーススタイル */
.button {
  color: #fff;
  background-color: #000;
  display: flex;
  position: relative;
  width: fit-content;
  align-items: center;
  line-height: 1.4;
  text-decoration: none;
  padding: 1em 1.5em;
  border-radius: 99em;
}

/* tabキーでのフォーカス時のデフォルト動作 */
.button:focus-visible {
  outline-offset: 0px;
  outline: solid 3px color-mix(in srgb, var(--color--focus), transparent 50%);
}

/* グラデーションスタイルのボタン */
.button--grad {
  background-image: linear-gradient(
    45deg,
    color-mix(in srgb,var(--color--primary), black 25%),
    var(--color--primary),
    color-mix(in srgb, var(--color--primary), black 30%)
  );
  background-size: 200% 100%;
  transition: background-position 0.3s;
}
@media (any-hover: hover) {
  .button--grad:hover {
    background-position: 100% 0;
  }
}
.button--grad:focus-visible{
  background-position: 100% 0;
}


/* -----------------------------------
 * ヘッダー
 * --------------------------------- */
.header {
  position: sticky;
  height: var(--header-h, auto);
  width: 100%;
  top: 0;
  left: 0;
  padding-block: var(--space--4);
  z-index: var(--header-z);
  background-color: color-mix(in srgb, var(--color--bg) 50%, transparent);

  /*  すりガラス表現  */
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.1);
}
.header__inner {
  display: flex;
  align-items: center;
}
.site-logo {
  font-size: 24px;
  font-family: serif;
  font-weight: bold;
  line-height: 1;
}
.site-logo > a {
  text-decoration: none;
  color: inherit;
}


/* -----------------------------------
 * ナビゲーションモーダル
 * --------------------------------- */
.nav-dialog {
  /* デフォルトのdialogスタイルをリセット */
  border: none;
  padding: 0;
  margin: 0;
  max-width: unset;
  max-height: unset;
  overflow: unset;
  background: none;

  /* フルスクリーン表示 */
  width: 100%;
  height: 100%;

  /* テキストカラー */
  color: var(--white);

  /* 背景を半透明の黒 + ブラー効果 */
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);

  /* アニメーション */
  opacity: 0;
  transition: opacity var(--duration), var(--duration);
}

/* トランジション用（data-open でフェードイン） */
.nav-dialog[data-open] {
  opacity: 1;
}

/* ::backdrop のアニメーションはFirefoxで動かないので、背景ブラーをdialog自体につけておく */
.nav-dialog::backdrop {
  background-color: transparent;
}

/* dialogのdisplay操作はできるだけ避けたいので、innerを用意してレイアウト管理 */
.nav-dialog__inner {
  /* 内部を縦向きフレックス（__body を flex:1 で広げるため） */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 閉じるボタンを配置するヘッダー */
.nav-dialog__head {
  display: flex;
  flex-shrink: 0;

  /* .headerと同じ余白、サイズでボタン位置を揃える */
  width: 100%;
  height: var(--header-h, auto);
  padding-block: var(--space--4);
}

/* ナビゲーションコンテンツ本体 */
.nav-dialog__body {
  /* 高さを広げる */
  flex: 1;

  /* 要素が増えて画面サイズを超えたらここをスクロールできるようにする */
  overflow: auto;
  overscroll-behavior: contain;

  /* 中央配置 */
  display: grid;
  align-content: center;
}

/* ナビゲーション */
/* .site-nav {} */

/* ナビゲーションリスト */
.site-nav__list {
  list-style: none;
  padding: 0;

  /* 項目を縦並びで余白をgapで管理 */
  display: flex;
  flex-direction: column;
  gap: 1em;
}

/* モーダル展開時のアニメーションを付ける */
.site-nav__item {
  opacity: 0;
  transform: translateY(2em);
  transition: transform var(--duration), opacity var(--duration);
}
.nav-dialog[data-open] .site-nav__item {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ナビゲーションリンク */
.site-nav__item > a {
  color: inherit;
  text-decoration: none;
  font-size: 2em;
  font-family: serif;
  font-style: italic;

  display: inline-flex;
  padding: 0.25em 0.5em;
  border-radius: 2px;
  transition-duration: var(--duration);
  transition-property: color, scale;
}

@media (any-hover: hover) {
  .site-nav__item > a:hover {
    color: var(--color--focus);
    scale: 1.05;
  }
}

/* --- サイトナビゲーション用トグルボタン --- */
.menu-btn {
  /* buttonのスタイルリセット */
  font: inherit;
  width: auto;
  height: auto;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;

  /* ボタンのスタイル */
  border-radius: 4px;
  padding: 0.5rem;
  margin-inline-start: auto;
  transition: opacity var(--duration);
}

/* メニューを開くボタン: メニュー展開時にフェードアウト */
.menu-btn--open {
  opacity: 1;
}

/* body:has() は処理負荷が高いので、隣接セレクタを使う */
.nav-dialog[data-open] + .header .menu-btn--open {
  opacity: 0;
  pointer-events: none;
}

/* メニューを閉じるボタン: dialog展開時にフェードイン */
.menu-btn--close {
  opacity: 0;
}
.nav-dialog[data-open] .menu-btn--close {
  opacity: 1;
}

/* ハンバーガーアイコン */
.menu-icon {
  width: 1.5em;
  height: 1.5em;
  display: grid;
  align-content: center;
  gap: 0.375em;
  transition: gap var(--duration);
}
.menu-icon > span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition-duration: var(--duration);
  transition-property: transform, opacity;
}

/* 閉じるボタンのアイコン */
.menu-icon--close > span {
  grid-area: 1/1;
  --rotate: 45deg;
  transition: transform var(--duration);
}
.menu-icon--close > span:first-child {
  transform: rotate(var(--rotate));
}
.menu-icon--close > span:last-child {
  transform: rotate(calc(var(--rotate) * -1));
}

/* ホバーアニメーション */
@media (any-hover: hover) {
  .menu-btn--open:hover > .menu-icon {
    gap: 0.25em;
  }
  .menu-btn--close:hover > .menu-icon > span {
    --rotate: 30deg;
  }
}


/* -----------------------------------
 * ヒーローコンテンツ（メインビジュアル）
 * --------------------------------- */
 .hero {
  height: calc(100svh - var(--header-h, 0px) - min(3vw, 2rem));
  padding-inline: min(3vw, 2rem);
  position: relative;
  display: grid;
  grid-template-rows: 2fr 1fr;
}
@media (min-width: 800px) {
  .hero {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
  }
}

/* ヒーローテキスト */
.hero__text {
  display: grid;
  place-items: center;
  place-content: center;
  font-size: clamp(2rem, 1rem + 4vw, 4.5rem);
  font-family: var(--font--serif);
  font-weight: 900;
  line-height: 1.1;
  font-weight: 400;
  text-align: center;
}
.hero__text > .clip-text {
  background-image: linear-gradient(
    45deg,
    color-mix(in srgb,var(--color--primary), black 25%),
    var(--color--primary),
    color-mix(in srgb, var(--color--primary), black 30%)
  );
}

/* ヒーロー画像 */
.hero__image {
  position: relative;
  border-start-start-radius: 8vw;
}
.hero__image > img {
  /* 画像の色味を調整 */
  filter: saturate(1.4) brightness(1.1);
}
.hero__image > div[aria-hidden="true"] {
  /* ドットフィルター */
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle,
      rgb(250 250 250 / 50%) 1px,
      rgb(250 250 250 / 10%) 0%);
  background-size: 3px 3px;
}


/* -----------------------------------
 * セクション共通スタイル
 * --------------------------------- */
.section {
  padding-block: 6em;
  background-color: var(--color--bg);
}
.section-title {
  margin-bottom: 1em;
  font-size: var(--font-size--2xl);
  line-height: 1.2;
  font-family: var(--font--serif);
  font-weight: 400;
}


/* -----------------------------------
 * Menus セクション
 * --------------------------------- */
.glass-cards {
  display: grid;
  gap: 1.5em;
}
.glass-card {
  --duration: 0.4s;
  display: grid;
  box-shadow: var(--shadow--sm);
  border-radius: var(--radius--lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  line-height: 1.4;
  transition: box-shadow var(--duration);
}
.glass-card__media {
  grid-area: 1/1;
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
  transition: filter var(--duration);
  filter: saturate(1.2) brightness(1);
}
.glass-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--duration);
}
.glass-card__content {
  grid-area: 1/1;
  display: grid;
  align-self: end;
  gap: 0;
  padding: 1em;
  z-index: 0;
  color: #fff;

  /* すりガラス表現 */
  background: rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: blur(12px) brightness(0.9);
  backdrop-filter: blur(12px) brightness(0.9);
  box-shadow: inset 0px 1px 0px rgb(255 255 255 / 0.1),
    inset 0px 2px 8px -2px rgb(255 255 255 / 0.1);
}
.glass-card__title {
  font-weight: 500;
  font-size: 1em;
}
.glass-card__text {
  display: grid;
  font-size: var(--font-size--xs);
  opacity: 0.9;
}
.glass-card__text__inner {
  overflow: hidden;
}
.glass-card__text__inner::before,
.glass-card__text__inner::after {
  /* 擬似要素で余白調整 */
  content: "";
  display: block;
  height: 0.5em;
}
.glass-card__footer {
  display: flex;
  gap: 0.5em;
  justify-content: end;
  padding-top: 0.5em;
  opacity: 0.8;
  font-size: var(--font-size--xs);
  line-height: 1;
}
.glass-card__arrow {
  transition: translate var(--duration);
}

/* 画面が広い時 */
@media (min-width: 600px) {
  .glass-cards {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  /* 追加テキストを隠し、ホバーアニメーションの準備 */
  .glass-card__text {
    grid-template-rows: 0fr;
    transition: grid-template var(--duration);
  }
}

/* ホバー時 */
@media (any-hover: hover) {
  /* 追加の説明テキストを出現させる */
  .glass-card:hover .glass-card__text {
    grid-template-rows: 1fr;
  }

  /* 画像を少し暗くする。（テキストの可読性確保にもなる）  */
  .glass-card:hover .glass-card__media {
    filter: saturate(1.2) brightness(0.8);
  }
  .glass-card:hover .glass-card__content {

    -webkit-backdrop-filter: blur(12px) brightness(0.8);
    backdrop-filter: blur(12px) brightness(0.8);
  }

  /* 矢印をほんのり動かす */
  .glass-card:hover .glass-card__arrow {
    translate: 4px 0;
  }
}

/* Tabキーによるフォーカス時も同じ表現 */
.glass-card:focus-visible .glass-card__text {
  grid-template-rows: 1fr;
}
.glass-card:focus-visible .glass-card__media {
  filter: saturate(1.2) brightness(0.8);
}
.glass-card:focus-visible .glass-card__content {
  -webkit-backdrop-filter: blur(12px) brightness(0.8);
  backdrop-filter: blur(12px) brightness(0.8);
}
.glass-card:focus-visible .glass-card__arrow {
  translate: 4px 0;
}


/* -----------------------------------
 * About セクション
 * --------------------------------- */
.broken {
  display: flex;
  flex-direction: column;
}
.broken__title {
  font-family: var(--font--serif);
  font-size: var(--font-size--2xl);
  font-weight: 400;
  line-height: 1.2;
}
.broken__subtext {
  margin-top: 1.5em;
  font-size: var(--font-size--sm);
}

/*  小さい画面サイズでの配置  */
.broken__img-1 {
  aspect-ratio: 16 / 9;
  width: 45%;
  margin-top: 1.5em;
  margin-left: auto;
}
.broken__img-2 {
  aspect-ratio: 3 / 2;
  width: 70%;
  margin-top: -4vw;
}

/* 画面が広い時 */
@media (min-width: 800px) {
  .broken {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: repeat(24, 1fr);

    /* 2:1 */
    height: min(100vh, 50vw);
  }

  .broken > .img-frame {
    width: auto;
    margin: 0;
    aspect-ratio: unset;
  }

  .broken__img-1 {
    grid-column: span 8 / -2;
    grid-row: 1 / span 12;
  }
  .broken__img-2 {
    grid-column: 1 / span 13;
    grid-row: 8 / -1;
  }

  .broken__title {
    /* img-2 より1マス狭いカラムでセンター寄せ */
    grid-column: 1 / span 11;
    grid-row: 3 / 7;
    justify-self: center;
  }
  .broken__subtext {
    /* img-1と同じカラムから１マス内側 */
    grid-column: 15 / -2;
    grid-row: 14 / -3;
    margin-top: 0;
    align-self: end;
  }
}

/* maskに使うsvg画像をセット */
.mask-svg.broken__img-1{
  --mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M171.7,58.3c16.4,27.8,22.4,62.3,8.8,88.7c-13.4,26.4-46.3,44.5-79,44.4c-32.8-0.1-65.3-18.5-79.9-45.5 C6.7,118.7,9.8,82.9,26.1,55.3S71.8,7.9,100,8.7C128.2,9.4,155.2,30.4,171.7,58.3z"/></svg>');
}
.mask-svg.broken__img-2{
  --mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 200 200"><path d="M99.3,14.9c22.8-0.3,46.4,11.8,63.3,30.1c17.1,18.3,27.5,43,26.6,67c-1.1,24.1-13.6,47.8-32,60 c-18.3,12.2-42.6,13-68,13.1c-25.5,0.2-52.3-0.3-65.9-13.9c-13.7-13.6-14.2-40.4-10.7-64.4c3.8-24,11.7-45.1,26.7-62.1 C54.3,27.8,76.4,15.1,99.3,14.9z"/></svg>');
}


/* -----------------------------------
 * Events セクション
 * --------------------------------- */
 .section-events {
  background-color: var(--color--bg-mid);
}

/* イベントカードリスト */
.subgrid-cards {
  display: grid;
  gap: var(--space--8);

  /*  自動段組み  */
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

/* 各カードがsubgridを使用 */
.subgrid-card {
  position: relative;
  display: grid;

  /* 4行分の行領域を確保（画像・タイトル・本文・メタ情報） */
  grid-row: span 4;

  /* 親グリッドの行ラインを継承し、カード間で各行の高さを揃える */
  grid-template-rows: subgrid;

  gap: var(--space--4);
  padding: var(--space--4);
  box-shadow: var(--shadow--sm);
  border-radius: 8px;
  background: var(--color--bg);
  line-height: 1.4;

  /* トランジション */
  --duration: 0.4s;
  transition: box-shadow var(--duration);
}

.subgrid-card__media {
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
}
.subgrid-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--duration);
}

.subgrid-card__title {
  font-size: 1em;
  align-self: center;
  position: static;
  color: inherit;
  display: block;
  text-decoration: none;
}
/* カード全体をリンク化する */
.subgrid-card__title::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.subgrid-card__text {
  font-size: var(--font-size--sm);
  opacity: 0.9;
}
.subgrid-card__meta {
  font-size: var(--font-size--xs);
  padding-top: var(--space--4);
  opacity: 0.8;
}

/* ホバー時: 本来の色に戻し、ズームする */
@media (any-hover: hover) {
  .subgrid-card:hover{
    box-shadow: var(--shadow--lg);
  }
  .subgrid-card:hover .subgrid-card__media > img {
    scale: 1.15;
  }
}

/* Tabキーによるフォーカス時も同じ表現 */
.subgrid-card:focus-within{
    box-shadow: var(--shadow--lg);
  }
.subgrid-card:focus-within .subgrid-card__media > img {
  scale: 1.15;
}


/* -----------------------------------
 * FAQ セクション
 * --------------------------------- */
 .accordions {
  border: solid 1px var(--color--border);
  border-radius: 8px;
  overflow: hidden;
}
.accordion {
  --duration: 0.3s;
  --icon-transform: rotate(90deg);
}
.accordion[open] {
  /* アコーディオンが開いている時、アイコンを反転 */
  --icon-transform: rotate(270deg);
}
.accordion + .accordion {
  border-top: solid 1px var(--color--border);
}
.accordion__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1em 1.25em;
  cursor: pointer;
  background-color: color-mix(in srgb, var(--color--border), transparent 75%);
}

/* Tab操作によるフォーカス時のアウトラインを調整 */
.accordion__title:focus-visible {
	outline: solid 2px var(--color--focus);
	outline-offset: -3px;
}

/* Safariで表示されるデフォルトの三角形アイコンを削除 */
.accordion__title::-webkit-details-marker {
  display: none;
}

/* タイトルホバー時、背景色を少し濃くする */
@media (any-hover: hover) {
  .accordion__title:hover {
    background-color: color-mix(in srgb, var(--color--border), transparent 50%);
  }
}

/* アイコン擬似要素 */
.accordion__title::after {
  content: "";
  display: block;

  /*  clip-path で > アイコンを描画し、回転させる  */
  width: 1em;
  height: 1em;
  background-color: currentColor;
  clip-path: polygon(calc(35% + 4%) calc(10% - 4%),
      calc(75% + 4% * 2) 50%,
      calc(35% + 4%) calc(90% + 4%),
      calc(35% - 4%) calc(90% - 4%),
      calc(75% - 4% * 2) 50%,
      calc(35% - 4%) calc(10% + 4%));
  transform: var(--icon-transform);
  transition: transform var(--duration);
}

/* コンテンツの余白 */
.accordion__content {
  /* 上下のpaddingはアニメーションがカクつくので0にする */
  padding-block: 0em;
  padding-inline: 1.25em;
}
.accordion__content::before,
.accordion__content::after {
  /* 上下の余白を擬似要素で確保する */
  content: "";
  display: block;
  width: 100%;
  height: 1.25em;
}

/* ::details-content をサポートしているブラウザで開閉アニメーションをつける */
@supports selector(details::details-content) {
  .accordion::details-content {
    display: grid;
    transition-duration: var(--duration);
    transition-property: content-visibility, grid-template;
    transition-behavior: allow-discrete;

    /* 閉じてる状態 */
    grid-template-rows: 0fr;
  }

  /* 開いている時 */
  .accordion[open]::details-content {
    grid-template-rows: 1fr;
  }

  /* 0fr/1fr の開閉アニメーションのために必要 */
  .accordion__content {
    overflow: hidden;
  }
}


/* -----------------------------------
 * Access セクション
 * --------------------------------- */
 .access-map {
  aspect-ratio: 21/9;
}
.access-map > iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.map-btn{
  display: flex;
  justify-content: center;
}


/* -----------------------------------
 * フッター
 * --------------------------------- */
.footer{
  margin-top: var(--space--16);
}
.footer__copyright {
  padding: var(--space--4) var(--space--gutter);
  font-size: var(--font-size--xs);
  text-align: center;
}


/* -----------------------------------
 * 以下、ユーティリティクラス
 * --------------------------------- */
.display-none {
  display: none;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.mt-4 {
  margin-top: var(--space--4);
}
.mt-6 {
  margin-top: var(--space--6);
}
.mt-8 {
  margin-top: var(--space--8);
}


/* 背景をテキストの形で切り抜く */
.clip-text {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* SVGでマスク */
.mask-svg {
  aspect-ratio: 1/1;

  /* SVGをData URIとして埋め込み */
  mask-image: var(--mask);
  mask-size: contain;
  mask-position: center;

  /* マスク画像の繰り返しを防ぐ */
  mask-repeat: no-repeat;
}

