/* ===== Reset (merged from reset.css) ===== */
/* Meyer's Reset CSS v2.0 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* ========== Backdrop Filter Utilities ========== */
/* Simple utilities for frosted-glass effects.
   Use on containers sitting over imagery. */

/* Generic blur strengths */
.u-backdrop-blur-2 { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.u-backdrop-blur-4 { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.u-backdrop-blur-8 { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.u-backdrop-blur-12 { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Saturation helpers */
.u-backdrop-saturate-120 { -webkit-backdrop-filter: saturate(120%); backdrop-filter: saturate(120%); }
.u-backdrop-saturate-140 { -webkit-backdrop-filter: saturate(140%); backdrop-filter: saturate(140%); }

/* Ready-to-use glass panels */
.u-glass-light {
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(6,6,6,.08);
}
.u-glass-dark {
  background: rgba(6,6,6,.35);
  color: #FCFCFC;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
}

/* Fallbacks when backdrop-filter unsupported */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .u-glass-light { background: rgba(255,255,255,.92); }
  .u-glass-dark  { background: rgba(6,6,6,.6); }
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
.wp-block-quote,.wp-block-code,.wp-block-code code {
  overflow-wrap: anywhere;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
hr {
    margin: 0;
    padding: 0;
}
/* ===== End Reset ===== */

/* ========== ユーティリティ（共通） ========== */
/* 変数（必要に応じて拡張） */
:root {
  --color-text: #333;
  --color-bg: #fff;
  --color-accent: #3a533a;
  --focus: #2b6cb0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --radius-1: 4px;
}

/* ボックスモデルの統一 */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* メディアの既定（比率維持） */
img, svg, video, canvas { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* フォーカス可視化 */
:focus-visible { outline: 2px solid var(--focus, #2b6cb0); outline-offset: 2px; }

/* 画面読み上げ専用テキスト */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 1px 1px);
  clip-path: inset(50%);
  border: 0; white-space: nowrap;
}

/* レイアウト用コンテナ */
.container { max-width: 1200px; margin-inline: auto; padding-inline: 1rem; }

/* 比率ボックス（埋め込み用） */
.ratio { aspect-ratio: 16 / 9; }
.ratio > iframe, .ratio > img, .ratio > video { width: 100%; height: 100%; object-fit: cover; }

/* 横スクロール許容テーブル */
.table-wrap { overflow-x: auto; }
.table-wrap > table { min-width: 600px; border-collapse: collapse; }

/* WordPress/Gutenberg 用の基本クラス */
.wp-block-image img { height: auto; }
.alignwide { margin-inline: auto; }
.alignfull { width: 100%; margin-inline: 0; }
.wp-caption { max-width: 100%; text-align: center; font-size: .85em; color: #555; }

/* 本文用の安全なスコープ（Gutenberg/固定ページで使用） */
.prose { color: var(--color-text); }
.prose p { margin: 0 0 1em; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { margin: 2em 0 .6em; line-height: 1.4; }
.prose ul { list-style: disc; padding-left: 1.2em; margin: 0 0 1em; }
.prose ol { list-style: decimal; padding-left: 1.2em; margin: 0 0 1em; }
.prose blockquote { margin: 1.2em 0; padding-left: 1em; border-left: 4px solid rgba(0,0,0,.1); color: #555; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95em; }
.prose th, .prose td { border: 1px solid rgba(0,0,0,.1); padding: .5em .75em; }
.prose a { color: inherit; text-decoration: underline; }
.prose img { max-width: 100%; height: auto; }

/* grid縦揃え用クラス */
.grid_self_center {
  align-self:center;
  justify-self:center;
}
.grid_self_end {
  align-self:end;
}


/* ========== 基本 ========== */

/* 非表示 */
.hidden-pc { display: none; }
.hidden-tab { display: none; }
.hidden-sp { display: none; }
.none-sp { display: inline; }

/* 基本設定 */
html { font-size: 16px; }
body {
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: .1em;
  color: #333;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  overflow-x: hidden;
}
h1 { font-size: 2.25rem; font-weight: 900; line-height: 1.8; letter-spacing: .2rem; }
h2 { font-size: 1.375rem; font-weight: 900; line-height: 1.8; letter-spacing: .15rem; }
h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.8; letter-spacing: .12rem; }
p  { font-size: 1rem; font-weight: 500; line-height: 1.6; letter-spacing: .1rem; }
p strong { font-weight: 900; }
p em    { font-style: italic; font-weight: 700; }
blockquote, table { font-family: sans-serif; font-size: .875rem; }
button, input, textarea { font-family: inherit; }
a { transition: all .4s; }

/* ---- ヘッダー（PC用） ---- */
.header {
  grid-area: 1 / 1 / 1 / 1;
  display: grid;
  grid-template-columns: 1fr minmax(100px,240px) minmax(100px,960px) 1fr;
  grid-template-rows: 30px 80px;
  background-color: rgba(252,252,252,.8);
  z-index: 10;
  justify-content: space-between;
  align-content: center;
}
.header__line {
  grid-area: 1 / 1 / 2 / 5;
  height: 30px;
  background: #3a533a;
  border: none;
}
.header__logo {
  grid-area: 2 / 2 / 3 / 3;
  line-height: 1;
  padding: 20px 0;
  align-items: center;
}
.header__logo img { height: 40px; display: block; }
.header__location-text {
  grid-area: 1 / 2 / 2 / 3;
  font-size: .7rem;
  margin: auto 0;
  line-height: 1;
  color: #FCFCFC;
}
.header__member-page-button {
  grid-area: 1 / 3 / 2 / 4;
  justify-self: end;
  align-self: start;
  font-size: .9rem;
  font-weight: 900;
  color: #3A533A;
  background: #C8C2B4;
  padding: 0 25px;
  cursor: pointer;
  height: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
.header__member-page-button:hover { background: #8A9D87; color: #FCFCFC; }

.header__navigation {
  grid-area: 2 / 3 / 3 / 4;
  align-content: center;
}
.header__navigation-list {
  display: grid;
  grid-auto-flow: column;
  justify-content: end;
  column-gap: 20px;
}
.header__navigation-item { margin: auto; }
.header__navigation-list a {
  display: block;
  text-decoration: none;
  color: #060606;
  font-weight: 900;
  text-shadow: rgba(6,6,6,.3) 1px 3px 10px;
}
.header__navigation-list a:hover { color: #8A9D87; }

.header__navigation-item--contact a {
  background: #4C513F;
  font-weight: 500;
  color: #FCFCFC;
  padding: 5px 12px;
}
.header__navigation-item--contact a:hover {
  background: #8A9D87;
  color: #3A533A;
}

/* ---- コンテンツエリア ---- */
.wp-post-section__container {
  display: grid;
  max-width: 1200px;
  margin: 0;
  grid-template-columns: auto;
  justify-content: space-between;
}
.wp-post-section__content { grid-area: 1 / 1; }

/* ---- フッター ---- */
.footer {
  background: rgba(6,6,6,.8);
  display: grid;
  grid-template-columns: 1fr minmax(150px,150px) minmax(200px,950px) minmax(150px,100px) 1fr;
  z-index: 10;
  justify-content: space-between;
  align-content: center;
}
.footer__logo {
  grid-area: 1 / 2 / 1 / 2;
  margin: auto 0;
  line-height: 1;
}
.footer__logo img {
  height: 35px;
  filter: invert(96%) sepia(4%) saturate(234%) hue-rotate(150deg) brightness(121%) contrast(98%);
}
.footer__navigation-list {
  grid-area: 1 / 3 / 1 / 3;
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(3,auto);
  column-gap: 10px;
  text-align: left;
  margin-top: 8px;
  font-size: .8rem;
}
.footer__navigation-item a { color: #FCFCFC; text-decoration: none; }
.footer__navigation-item a:hover { color: #8A9D87; }

.footer__navigation-item--member {
  grid-area: 3 / 1 / 3 / 4;
  align-self: end;
  justify-self: end;
  color: #FCFCFC;
  font-size: .7rem;
  font-weight: 700;
  background: rgba(16,16,16,1);
  padding: 5px 15px 0 15px;
  margin-top: 8px;
  cursor: pointer;
  height: 20px;
  text-align: right;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.footer__navigation__sns {
  grid-area: 1 / 4 / 1 / 4;
  justify-self: end;
  align-self: center;
  text-align: right;
  display: grid;
  grid-template-columns: repeat(3,25px);
  column-gap: 10px;
}
.footer__navigation-item--contact { grid-area: 2 / 1 / 2 / 4; }
.footer__navigation-item--contact a {
  font-size: .7rem;
  padding: 3px 9px;
  background: #4C513F;
  color: #FCFCFC;
  text-decoration: none;
}
.footer__navigation-item--contact a:hover { background: #8A9D87; }
.footer__credits {
  grid-area: 3 / 1 / 3 / 6;
  background: #060606;
  color: #FCFCFC;
  text-align: center;
  font-size: .7rem;
  line-height: 1;
  padding: 5px;
}

/* ---- スクロールアニメ（共通） ---- */
#kobozu-trigger { width:100%; height:1px; pointer-events:none; }
@keyframes UpAnime {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-100px); }
}
@keyframes DownAnime {
  from { opacity: 0; transform: translateY(-100px); }
  to   { opacity: 1; transform: translateY(0); }
}
.scrollAnim.ready { opacity: 0; transform: scale(.8); transition: all .8s ease-in; }
.scrollAnim.ready.active { transform: scale(1); opacity: 1; }

/* ---- ハンバーガー（挙動） ---- */
:root { --header-h: 110px; }  /* 30 + 80 の合計 */
body.is-locked { overflow: hidden; }

.main_cover {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  background: rgba(0,0,0,.35);
  z-index: 999;            /* コンテンツより下（モーダル基準1000） */
  pointer-events: none;     /* クリック無効化 */
  transition: opacity .28s ease, height .0s linear .28s, visibility .0s linear .28s;
}
.main_cover.is-active {
  height: calc(100vh - var(--header-h));
  opacity: 1;
  visibility: visible;
  pointer-events: auto;     /* クリック有効化 */
  transition: opacity .28s ease;
}

.header_sp_nav {
  display: none;
  width: 30px;
  height: 26px;
  position: absolute;
  top: 60px;
  right: 2rem;
  margin: auto;
  cursor: pointer;
  z-index: 10;
  border: none;
  background: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.header_sp_nav::before { /* タップ領域拡大用の疑似要素 */
  content: "";
  position: absolute;
  left: -8px; right: -8px; top: -9px; bottom: -9px;
}
.nav_line {
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  background: rgba(6,6,6,.84);
  transform: none;
  transition: transform .25s ease, opacity .2s ease;
}
.nav_line1 { top: 0; bottom: auto; margin-bottom: 10px; }
.nav_line2 { right: 0; top: 0; bottom: 0; margin: auto; }
.nav_line3 { bottom: 0; top: auto; }

/* クロス状態（aria-expanded=true） */
.header_sp_nav[aria-expanded="true"] .nav_line2 {
  opacity: 0;
  transform: scaleX(.6);
}
.header_sp_nav[aria-expanded="true"] .nav_line1 {
  top: 50%;
  bottom: auto;
  margin: 0;
  transform: translateY(-50%) rotate(45deg);
}
.header_sp_nav[aria-expanded="true"] .nav_line3 {
  top: 50%;
  bottom: auto;
  margin: 0;
  transform: translateY(-50%) rotate(-45deg);
}

/* PCではハンバーガー/カバー非表示 */
@media (min-width: 760px) {
  .header_sp_nav, .main_cover { display: none !important; }
}

/* ========== タブレット〜PC（幅760–1250） ========== */
@media screen and (min-width: 760px) and (max-width: 1250px) {
  .header__logo { padding-left: 2%; }
  .header__location-text { padding-left: 2%; }
  .header__member-page-button { margin-right: 2%; }
  .header__navigation-list { margin-right: 2%; }
  .footer__logo { padding-left: 2%; }
  .footer__navigation__sns { margin-right: 2%; }
  .hidden-tab { display: block; }
}

/* ========== スマホ〜タブレット（幅601–759） ========== */
@media screen and (min-width: 601px) and (max-width: 759px) {
  .hidden-pc { display: block; }
  .hidden-tab { display: block; }
  .hidden-sp { display: none; }
  .header__logo { padding-left: 2%; }
  .header__location-text { padding-left: 2%; }
  .header__member-page-button { margin-right: 2%; }
  .header__navigation-list { margin-right: 2%; column-gap: 40px; text-align: center; }
  .footer__logo { padding-left: 2%; }
  .footer__navigation__sns { margin-right: 2%; }
  .footer__navigation-item { font-size: .7rem; }
}

/* ========== スマホ（〜600） ========== */
@media screen and (max-width: 600px) {
  .hidden-pc { display: none; }
  .hidden-tab { display: block; }
  .hidden-sp { display: block; }
  .none-sp { display: none; }

  /* ヘッダーのレイアウト（1カラム） */
  .header { grid-template-columns: 1fr; justify-content: center; }
  .header__line          { grid-area: 1 / 1 / 2 / 2; }
  .header__location-text { grid-area: 1 / 1 / 2 / 2; justify-self: center; }
  .header__logo          { grid-area: 2 / 1 / 3 / 2; justify-self: center; }
  .header__navigation-list {
    grid-area: 3 / 1 / 4 / 2;
    padding: 0;
    margin: 0;
    width: 100%;
    grid-auto-flow: row;
    justify-content: center;
    border-top: 1px solid rgba(6,6,6,.2);
  }
  .header__navigation-list {
    row-gap: 0;
    column-gap: 0;
    display: flex;
    flex-direction: column; /* 縦並びにする */
    padding: 0;
    margin: 0;
  }
  .header__navigation-list li { 
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
  }
  .header__navigation-list li a {
    display: block;
    width: 100%;            /* aを100%にして幅を確保 */
    padding: 14px 0;        /* タップ領域 */
    text-align: center;     /* 中央寄せ */
  }
  .header__navigation-item {
    border-bottom: 1px dotted rgba(6,6,6,.1);
    padding-bottom: 20px;
    width: 100%;
    text-align: center;
    display: block;
  }
  .header__navigation-item a { display: block; width: 100%; padding: 14px 20px; } /* タップ幅UP */

  .header__navigation-item--contact { border-bottom: none; }
  .header__navigation-item--contact a {
    background: none;
    font-weight: 900;
    color: #060606;
    padding: 0;
  }

  /* 重要ボタン（PC用スタイルはモバイルではタブ固定） */
  .header__member-page-button {
    grid-area: 4 / 1 / 5 / 2;
    justify-self: center;
    text-align: center;
    margin-right: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 20px 1%;
    width: 98%;
  }

  /* ハンバーガー表示 */
  .header_sp_nav { display: block; }

  /* ---- グローバルナビ（ULをヘッダー下に固定表示） ---- */
  #global-nav.header__navigation-list {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    z-index: 1000;
    background: rgba(255,255,255,.92);
    height: calc(100vh - var(--header-h) - 56px); /* 画面下のボタン分を差し引き */
    overflow: auto;
    transform: translateY(-120%);                  /* 画面外に隠す */
    transition: transform .28s ease-in-out;
  }
  #global-nav.is-active { transform: translateY(0); }

  .footer {
    grid-template-columns: 1fr 45% 45%  1fr; justify-content: center;
    padding-top: 1rem;
  }
  .footer__navigation__sns {
    grid-area: 1 / 3 / 1 / 3;
  }
  .footer__navigation-list {
    width: 100%;
    grid-area: 2 / 2 / 2 / 4;
    text-align: center;
  }
  /* カバー（背景） */
  .main_cover {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    background: rgba(0,0,0,.35);
    transition: opacity .28s ease, height .0s linear .28s, visibility .0s linear .28s;
  }
  .main_cover.is-active {
    height: calc(100vh - var(--header-h));
    opacity: 1;
    visibility: visible;
    transition: opacity .28s ease;
  }

  /* メンバー用ボタンは、メニュー表示時に下部に出す */
  .header__member-page-button {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 1001;
    height: 56px;
    line-height: 56px;
    border-radius: 0;
    transform: translateY(120%);                   /* 画面外に隠す */
    transition: transform .28s ease-in-out;
  }
  body.is-locked .header__member-page-button { transform: translateY(0); }

  /* メニューの余白調整（.menu は変えない） */
  .menu { transform: none; margin-top: 0; } /* 余白対策 */
}

/* ========== 極小レイアウト（〜400） ========== */
@media screen and (max-width: 400px) {
  .footer__navigation-list { grid-template-columns: 1fr 1fr; }
  .footer__navigation-item--member {
    grid-area: 4 / 1 / 4 / 3;
    width: 80%;
    text-align: center;
  }
  .footer__credits { font-size: .5rem; padding: 20px; }
}
