@charset "UTF-8";
/* ==================================================
   enhancements.css
   --------------------------------------------------
   キーカラー、アクセシビリティ対応、予約導線、
   投稿ページ・お知らせ一覧のスタイル。

   style.css / takibi.css はビルド生成物（SCSS からの出力）のため
   直接編集せず、上書き分をこのファイルに分離している。

   ※ SCSS のソースを持っている場合は、いずれ本体へ統合してください。
   ================================================== */

/* --------------------------------------------------
   0. カラートークン
   --------------------------------------------------
   キーカラーは「惣湯グリーン」#2F5D50。
   万葉公園の樹々と、黒い木造建築という本サイトの世界観に
   最も近い色として選定しました。「森、湯、食、本」の
   最初の一語である「森」を担う色でもあります。

   これまでリンク色に使われていた金色 #D79D2D は、
   白背景に対するコントラスト比が 2.30:1 しかなく、
   WCAG AA の基準（4.5:1）を大きく下回っていました。
   惣湯グリーンは 7.49:1 で、最高位の AAA を満たします。

   金色は「装飾のためのアクセント」として残し、
   文字色としては使わない、という役割分担にしています。

   ▼ 色を変えたいときはこの 3 行だけを書き換えてください。
   -------------------------------------------------- */
:root {
  /* キーカラー（リンク・強調・主要ボタン） */
  --soyu-key: #2F5D50;        /* 惣湯グリーン  白背景 7.49:1 / AAA */
  --soyu-key-dark: #234739;   /* ホバー・押下  白背景 10.34:1 */
  --soyu-key-soft: #E7EEEB;   /* 背景・罫線 */

  /* ボタンの立体感
     単色の塗りだと平坦で押せる感じが弱かったため、
     上を明るく下を暗くしたわずかな階調を敷いています。
     明るい側でも白文字とのコントラストは 6.21:1 あり、
     WCAG AA（4.5:1）を満たします。 */
  --soyu-btn-top: #376A5D;        /* 白文字 6.21:1 */
  --soyu-btn-bottom: #2A5548;     /* 白文字 8.43:1 */
  --soyu-btn-top-hover: #2F5D50;
  --soyu-btn-bottom-hover: #234739;
  --soyu-btn-shadow: 0 3px 10px rgba(47, 93, 80, .26);
  --soyu-btn-shadow-hover: 0 5px 16px rgba(47, 93, 80, .34);
  /* 上端のごく淡い明かり。面が丸みを持って見える */
  --soyu-btn-sheen: inset 0 1px 0 rgba(255, 255, 255, .16);

  /* 既存色（役割を整理して継承） */
  --soyu-accent: #D79D2D;     /* 金：装飾のみ。文字色には使わない */
  --soyu-text: #666666;       /* 本文        白背景 5.74:1 / AA */
  --soyu-heading: #3F3F3F;    /* 見出し      白背景 10.53:1 / AAA */
  --soyu-border: #DDD9D2;     /* 罫線 */
  --soyu-bg-soft: #F6F6F6;    /* 淡い背景 */
}

/* --------------------------------------------------
   0.1 リンク色をキーカラーに
   既存の body a{color:#D79D2D} を同じ詳細度で上書きする。
   （.news__list li a など、個別に色指定のある箇所は変わらない）
   -------------------------------------------------- */
body a {
  color: var(--soyu-key);
}

body a:hover {
  color: var(--soyu-key-dark);
}

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

/* --------------------------------------------------
   2. スキップリンク
   キーボード操作時、Tab の 1 回目で本文へ飛べるようにする。
   フォーカスされるまでは画面外に隠れている。
   -------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 12px 24px;
  font-size: 14px;
  line-height: 1;
  color: #fff !important;
  text-decoration: none;
  letter-spacing: .1em;
  background: var(--soyu-key);
  border-radius: 0 0 4px 4px;
  transition: top .2s ease;
}

.skip-link:focus {
  top: 0;
  opacity: 1 !important;
  outline: 2px solid #fff;
  outline-offset: -6px;
}

/* スキップリンクの着地点。レイアウトに影響を与えない */
#main-content {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

#main-content:focus {
  outline: none;
}

/* --------------------------------------------------
   3. フォーカスの可視化
   マウス操作では出さず、キーボード操作のときだけ枠を出す。
   既存の a:hover{opacity:.4} はフォーカス時に効かないため、
   輪郭線で位置を伝える。
   -------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--soyu-key);
  outline-offset: 3px;
  border-radius: 2px;
}

/* focus-visible 未対応ブラウザ向けの保険 */
.no-focus-visible a:focus,
.no-focus-visible button:focus,
.no-focus-visible [tabindex]:not([tabindex="-1"]):focus {
  outline: 2px solid var(--soyu-key);
  outline-offset: 3px;
}

/* --------------------------------------------------
   3.5 閉じているメニューをタブ移動の対象から外す
   .navigation は opacity:0 + translateX(100%) で隠れているだけ
   だったため、キーボード操作だと「見えないリンク」に次々
   フォーカスが移ってしまっていた。visibility で完全に外す。
   （transition:all が効いているため、開閉のアニメーションは維持される）
   -------------------------------------------------- */
.navigation {
  visibility: hidden;
}

.navigation.is-show {
  visibility: visible;
}

/* --------------------------------------------------
   3.6 PC 用ヘッダーメニュー
   --------------------------------------------------
   ハンバーガーメニューだけだと、下層ページ間の移動に
   「開く → 選ぶ」の 2 手が必要でした。PC は画面幅に
   余裕があるため、主要ページを直接並べます。

   ・トップページには出しません（全画面の映像が主役のため）
   ・768px 以下では非表示。従来どおりハンバーガーを使います
   -------------------------------------------------- */
.header__nav {
  display: none;
}

@media screen and (min-width: 769px) {
  /* メニューを置く分、ロゴ下の余白を詰める */
  .header--with-nav .header__logo {
    padding-bottom: 26px;
  }

  .header__nav {
    display: block;
    padding-bottom: 34px;
  }

  .header__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 34px;
    justify-content: center;
  }

  .header__nav-list li {
    position: relative;
  }

  .header__nav-list a {
    display: block;
    padding: 4px 2px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--soyu-text);
    text-decoration: none;
    letter-spacing: .1em;
    transition: color .3s ease;
  }

  /* 下線はホバー時に左から伸ばす（静かな動き） */
  .header__nav-list a::after {
    position: absolute;
    bottom: 0;
    left: 2px;
    width: calc(100% - 4px);
    height: 1px;
    content: "";
    background: var(--soyu-key);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s ease;
  }

  .header__nav-list a:hover,
  .header__nav-list a:focus {
    color: var(--soyu-key);
    opacity: 1;
  }

  .header__nav-list a:hover::after,
  .header__nav-list a:focus::after {
    transform: scaleX(1);
  }

  /* 現在表示中のページ */
  .header__nav-list a[aria-current="page"] {
    color: var(--soyu-key);
  }

  .header__nav-list a[aria-current="page"]::after {
    transform: scaleX(1);
  }

  /* ハンバーガーボタンと重ならないよう、右側に逃げ幅をとる */
  .header--with-nav .header__nav-list {
    padding: 0 120px;
  }
}

/* --------------------------------------------------
   4. メニュー開閉ボタンのタップ領域
   見た目は 35x28px のままで、当たり判定だけ 44x44px に広げる。
   （WCAG 2.5.8 ターゲットサイズ）
   -------------------------------------------------- */
.header__button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  content: "";
  transform: translate(-50%, -50%);
}

.header__button:focus-visible {
  outline: 2px solid var(--soyu-key);
  outline-offset: 8px;
}

/* --------------------------------------------------
   5. 予約ボタン（追従 CTA・メニュー内・テラスページ）
   --------------------------------------------------
   「予約する」という同じ行動を指すボタンは、どのページでも
   同じ見た目になるようキーカラーで統一する。
   白地に #666 の枠線だった従来より、ボタンとして認識されやすい。
   -------------------------------------------------- */
.soyu-cta {
  position: fixed;
  right: 80px;
  bottom: 60px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 270px;
  opacity: 1;
  transition: opacity .3s ease, visibility .3s ease;
}

/* フッターに差しかかったら邪魔にならないよう引っ込める（JS が付与） */
.soyu-cta.is-hidden {
  visibility: hidden;
  opacity: 0;
}

.soyu-cta__link,
.reserve:not(.reserve--event) a,
.navigation__button a {
  display: block;
  padding: 24px 40px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: #fff !important;
  text-align: center;
  letter-spacing: .1em;
  background-color: var(--soyu-key);
  background-image: linear-gradient(180deg, var(--soyu-btn-top) 0%, var(--soyu-btn-bottom) 100%);
  border: 1px solid var(--soyu-btn-bottom);
  border-radius: 70px;
  box-shadow: var(--soyu-btn-shadow), var(--soyu-btn-sheen);
  transition: background-image .3s ease, box-shadow .3s ease, border-color .3s ease, transform .2s ease;
}

.soyu-cta__link:hover,
.soyu-cta__link:focus,
.reserve:not(.reserve--event) a:hover,
.reserve:not(.reserve--event) a:focus,
.navigation__button a:hover,
.navigation__button a:focus {
  color: #fff !important;
  background-image: linear-gradient(180deg, var(--soyu-btn-top-hover) 0%, var(--soyu-btn-bottom-hover) 100%);
  border-color: var(--soyu-btn-bottom-hover);
  box-shadow: var(--soyu-btn-shadow-hover), var(--soyu-btn-sheen);
  opacity: 1;
  transform: translateY(-1px);
}

/* 押した瞬間は沈み込ませる */
.soyu-cta__link:active,
.reserve:not(.reserve--event) a:active,
.navigation__button a:active {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .22);
  transform: translateY(0);
}

/* スタッフ募集と予約を並べたときは、下の予約を枠線ボタンにして
   2 つが同じ重さで主張し合わないようにする */
.soyu-cta__link--recruit + .soyu-cta__link {
  color: var(--soyu-key) !important;
  background-color: #fff;
  background-image: none;
  border-color: var(--soyu-key);
  box-shadow: 0 2px 8px rgba(47, 93, 80, .12);
}

.soyu-cta__link--recruit + .soyu-cta__link:hover,
.soyu-cta__link--recruit + .soyu-cta__link:focus {
  color: #fff !important;
  background-image: linear-gradient(180deg, var(--soyu-btn-top) 0%, var(--soyu-btn-bottom) 100%);
  border-color: var(--soyu-btn-bottom);
  box-shadow: var(--soyu-btn-shadow), var(--soyu-btn-sheen);
}

/* 求人ボタン（ハンバーガーメニュー内）
   予約が主目的なので、こちらは枠線だけの二次ボタンにして
   優先順位が伝わるようにしている。 */
.navigation__recruit {
  margin-top: 16px;
  text-align: center;
}

.navigation__recruit a {
  display: block;
  padding: 22px 40px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--soyu-key) !important;
  text-align: center;
  letter-spacing: .1em;
  background: #fff;
  border: 1px solid var(--soyu-key);
  border-radius: 70px;
  transition: background-color .3s ease, color .3s ease;
}

.navigation__recruit a:hover,
.navigation__recruit a:focus {
  color: #fff !important;
  background-image: linear-gradient(180deg, var(--soyu-btn-top) 0%, var(--soyu-btn-bottom) 100%);
  border-color: var(--soyu-btn-bottom);
  box-shadow: var(--soyu-btn-shadow), var(--soyu-btn-sheen);
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .navigation__recruit {
    margin-top: 12px;
  }

  .navigation__recruit a {
    padding: 15px 24px;
    font-size: 15px;
  }

  .soyu-cta {
    right: 0;
    bottom: 16px;
    left: 50%;
    width: 275px;
    min-width: 0;
    margin: 0 auto;
    transform: translateX(-50%);
  }

  .soyu-cta__link,
  .reserve:not(.reserve--event) a,
  .navigation__button a {
    padding: 16px 24px;
    font-size: 16px;
  }

  /* 画面下部のボタンがフッターの著作権表記に重ならないようにする
     （CTA を出しているページだけに余白を足す） */
  body:has(.soyu-cta) .footer__copy {
    padding-bottom: 80px;
  }
}

/* --------------------------------------------------
   6. 動きを減らす設定への配慮
   前庭障害のある方や、視覚的な動きが苦手な方への対応。
   -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* ボタンの浮き上がりも止める（色と影の変化だけ残す） */
  .soyu-cta__link:hover,
  .reserve a:hover,
  .navigation__button a:hover,
  .article__body .wp-block-button__link:hover,
  .article__body a.soyu-button:hover,
  .soyu-form .wpcf7-submit:hover {
    transform: none !important;
  }
}

/* 自動再生の映像は enhancements.js 側で一時停止する。
   poster（静止画）はそのまま残るので、見た目が欠けることはない。 */

/* ==================================================
   7. 投稿ページ（お知らせ）の本文スタイル
   --------------------------------------------------
   本文は Carbon Fields のテキストエリアを the_content フィルタに
   通して出力しているため、編集画面で書いた HTML がそのまま
   反映されます。見出し・引用・箇条書き・表などを使っても
   崩れないよう、ひととおり整えています。

   ここのスタイルは .article__body の中だけに効きます。
   ================================================== */
.article__body {
  font-family: "Noto Serif JP", serif;
  color: var(--soyu-text);
}

/* ---- 見出し ---- */
.article__body h2,
.article__body .heading-02 {
  padding-left: 18px;
  margin: 72px 0 24px;
  font-size: 26px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--soyu-heading);
  letter-spacing: .1em;
  border-left: 3px solid var(--soyu-key);
}

.article__body > :first-child h2,
.article__body .group-l:first-child > h2:first-child {
  margin-top: 0;
}

/* 見出し3
   全幅のヘアラインの上に、左端 48px だけキーカラーを重ねた二色の下線。
   h2 の「太い縦罫」に対して「細い横罫」で対比させ、
   一段下の階層であることが一目で分かるようにしている。 */
.article__body h3 {
  position: relative;
  padding-bottom: 12px;
  margin: 56px 0 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--soyu-heading);
  letter-spacing: .1em;
  border-bottom: 1px solid var(--soyu-border);
}

.article__body h3::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 48px;
  height: 1px;
  content: "";
  background: var(--soyu-key);
}

/* 見出し4
   罫線は使わず、先頭に短いキーカラーの線を置くだけの軽い扱い。 */
.article__body h4 {
  position: relative;
  padding-left: 22px;
  margin: 40px 0 12px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.8;
  color: var(--soyu-heading);
  letter-spacing: .08em;
}

.article__body h4::before {
  position: absolute;
  top: .95em;
  left: 0;
  width: 12px;
  height: 2px;
  content: "";
  background: var(--soyu-key);
}

/* ---- 本文 ---- */
.article__body p {
  margin-bottom: 1.6em;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .08em;
}

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

.article__body a {
  color: var(--soyu-key);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

.article__body a:hover {
  color: var(--soyu-key-dark);
  text-decoration-thickness: 2px;
  opacity: 1;
}

/* 太字（B）
   太さと色だけでは本文に埋もれてしまうため、
   文字の下側に淡いキーカラーの帯を敷いている（マーカー）。
   帯は文字の高さの下 3 割ほどに収め、主張しすぎないようにした。
   行をまたいでも途切れないよう box-decoration-break を指定。 */
.article__body strong,
.article__body b {
  padding: 0 .15em;
  font-weight: 600;
  color: var(--soyu-heading);
  background: linear-gradient(transparent 68%, var(--soyu-key-soft) 68%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 斜体（I）
   和文に斜体は馴染まないので、傾けずにキーカラーの文字色で表す。 */
.article__body em,
.article__body i {
  font-style: normal;
  font-weight: 500;
  color: var(--soyu-key);
}

.article__body small {
  font-size: 14px;
  line-height: 1.9;
}

/* ---- 箇条書き ---- */
.article__body ul,
.article__body ol {
  margin: 0 0 1.6em;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .08em;
}

.article__body ul > li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: .4em;
}

.article__body ul > li::before {
  position: absolute;
  top: .85em;
  left: .15em;
  width: 5px;
  height: 5px;
  content: "";
  background: var(--soyu-key);
  border-radius: 50%;
}

.article__body ol {
  padding-left: 1.5em;
  list-style: decimal;
}

.article__body ol > li {
  margin-bottom: .4em;
  padding-left: .2em;
}

.article__body ol > li::marker {
  color: var(--soyu-key);
}

/* 入れ子 */
.article__body li > ul,
.article__body li > ol {
  margin: .4em 0 .4em;
}

/* ---- 引用 ---- */
.article__body blockquote {
  position: relative;
  padding: 28px 32px 28px 56px;
  margin: 0 0 1.8em;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .08em;
  background: var(--soyu-bg-soft);
  border-left: 3px solid var(--soyu-key);
}

.article__body blockquote::before {
  position: absolute;
  top: 12px;
  left: 18px;
  font-family: "EB Garamond", serif;
  font-size: 44px;
  line-height: 1;
  color: var(--soyu-key);
  content: "\201C";
  opacity: .45;
}

.article__body blockquote p:last-child {
  margin-bottom: 0;
}

.article__body blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-style: normal;
  letter-spacing: .06em;
  opacity: .8;
}

.article__body blockquote cite::before {
  content: "— ";
}

/* ---- 表 ---- */
.article__body .table-wrap,
.article__body figure.wp-block-table {
  margin-bottom: 1.8em;
  overflow-x: auto;
}

.article__body table {
  width: 100%;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .06em;
  border-collapse: collapse;
}

.article__body th,
.article__body td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--soyu-border);
}

.article__body th {
  font-weight: 500;
  color: var(--soyu-heading);
  white-space: nowrap;
  background: var(--soyu-key-soft);
}

/* ---- 区切り線 ---- */
.article__body hr {
  height: 1px;
  margin: 56px 0;
  background: var(--soyu-border);
  border: 0;
}

/* ---- 画像 ---- */
.article__body figure {
  margin: 0 0 1.8em;
}

.article__body figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
  letter-spacing: .06em;
  opacity: .85;
}

/* ---- コード ---- */
.article__body code {
  padding: .15em .45em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--soyu-bg-soft);
  border: 1px solid var(--soyu-border);
  border-radius: 3px;
}

.article__body pre {
  padding: 20px;
  margin-bottom: 1.8em;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.7;
  background: var(--soyu-bg-soft);
  border: 1px solid var(--soyu-border);
}

.article__body pre code {
  padding: 0;
  background: none;
  border: 0;
}

/* ---- PDF リンク ---- */
.article__body .article__pdf a {
  position: relative;
  display: inline-block;
  padding: 12px 20px 12px 52px;
  font-size: 16px;
  color: var(--soyu-key) !important;
  text-decoration: none;
  letter-spacing: .06em;
  background: var(--soyu-key-soft);
  border-radius: 4px;
  transition: background-color .3s ease;
}

.article__body .article__pdf a::before {
  position: absolute;
  top: 50%;
  left: 16px;
  font-family: "EB Garamond", serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  content: "PDF";
  transform: translateY(-50%);
}

.article__body .article__pdf a:hover {
  color: #fff !important;
  background: var(--soyu-key);
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .article__body h2,
  .article__body .heading-02 {
    padding-left: 14px;
    margin: 48px 0 18px;
    font-size: 21px;
  }

  .article__body h3 {
    margin: 32px 0 12px;
    font-size: 18px;
  }

  .article__body h4 {
    font-size: 16px;
  }

  .article__body p,
  .article__body ul,
  .article__body ol {
    font-size: 15px;
    line-height: 1.95;
  }

  .article__body blockquote {
    padding: 20px 20px 20px 40px;
  }

  .article__body blockquote::before {
    top: 8px;
    left: 12px;
    font-size: 34px;
  }
}

/* ==================================================
   8. お知らせ一覧（/news/）
   ================================================== */
.news-archive {
  padding-top: 40px;
  margin-bottom: 120px;
}

.news-archive__heading {
  margin-bottom: 64px;
  text-align: center;
}

.news-archive__heading-main {
  display: block;
  font-size: 30px;
  font-weight: 200;
  line-height: 1.5;
  color: var(--soyu-heading);
  letter-spacing: .18em;
}

.news-archive__heading-sub {
  display: block;
  margin-top: 12px;
  font-family: "EB Garamond", serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--soyu-key);
  letter-spacing: .3em;
  text-transform: uppercase;
}

.news-archive__heading-sub::before,
.news-archive__heading-sub::after {
  display: inline-block;
  width: 24px;
  height: 1px;
  margin: 0 12px;
  vertical-align: middle;
  content: "";
  background: var(--soyu-key);
  opacity: .5;
}

/* 年の区切り */
.news-archive__year {
  padding-bottom: 8px;
  margin: 48px 0 20px !important;
  font-family: "EB Garamond", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  color: var(--soyu-key);
  letter-spacing: .12em;
  border-bottom: 1px solid var(--soyu-border);
}

.news-archive__year:first-child {
  margin-top: 0 !important;
}

/* 一覧の各行（既存 .news__list のスタイルを土台に、行として押しやすく） */
.news-archive .news__list li.post a {
  padding: 14px 8px;
  border-radius: 4px;
  transition: background-color .3s ease;
}

.news-archive .news__list li.post a:hover {
  background: var(--soyu-key-soft);
  opacity: 1;
}

.news-archive .news__list li.post a:hover .content {
  color: var(--soyu-key-dark);
}

.news-archive__pdf-mark {
  display: inline-block;
  padding: 2px 6px;
  margin-left: 10px;
  font-family: "EB Garamond", serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--soyu-key);
  letter-spacing: .06em;
  vertical-align: middle;
  border: 1px solid var(--soyu-key);
  border-radius: 3px;
}

/* ページ送り */
.news-archive__pagination {
  margin-bottom: 72px;
}

.news-archive__pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.news-archive__pagination a,
.news-archive__pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  font-family: "EB Garamond", serif;
  font-size: 16px;
  line-height: 1;
  color: var(--soyu-key);
  text-decoration: none;
  letter-spacing: .06em;
  border: 1px solid var(--soyu-border);
  border-radius: 3px;
  transition: all .3s ease;
}

.news-archive__pagination a:hover {
  color: #fff;
  background: var(--soyu-key);
  border-color: var(--soyu-key);
  opacity: 1;
}

.news-archive__pagination .current {
  color: #fff;
  background: var(--soyu-key);
  border-color: var(--soyu-key);
}

.news-archive__pagination .dots {
  border-color: transparent;
}

.news-archive__empty {
  padding: 60px 0;
  font-size: 16px;
  text-align: center;
  letter-spacing: .08em;
}

/* ==================================================
   8.5 ブロックエディターで書かれた本文
   --------------------------------------------------
   ブロックは h2 / p / ul / blockquote / table といった
   ふつうの要素を出力するため、上の 7. のスタイルがそのまま
   効きます。ここではブロック固有のクラスだけを補います。
   ================================================== */
.article__body .wp-block-image {
  margin: 0 0 1.8em;
}

.article__body .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}

.article__body .wp-block-image figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
  letter-spacing: .06em;
  opacity: .85;
}

/* リストの二重マーカーを防ぐ（丸ポイントは ::before で描いている） */
.article__body ul.wp-block-list {
  list-style: none;
}

.article__body .wp-block-quote {
  /* 7. の blockquote スタイルを継承 */
  border-left: 3px solid var(--soyu-key);
}

.article__body .wp-block-separator {
  height: 1px;
  margin: 56px 0;
  background: var(--soyu-border);
  border: 0;
}

/* ファイル（PDF）ブロック */
.article__body .wp-block-file {
  margin-bottom: 1.8em;
}

.article__body .wp-block-file a:first-child {
  position: relative;
  display: inline-block;
  padding: 12px 20px 12px 52px;
  font-size: 16px;
  color: var(--soyu-key) !important;
  text-decoration: none;
  letter-spacing: .06em;
  background: var(--soyu-key-soft);
  border-radius: 4px;
  transition: background-color .3s ease;
}

.article__body .wp-block-file a:first-child::before {
  position: absolute;
  top: 50%;
  left: 16px;
  font-family: "EB Garamond", serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  content: "PDF";
  transform: translateY(-50%);
}

.article__body .wp-block-file a:first-child:hover {
  color: #fff !important;
  background: var(--soyu-key);
  opacity: 1;
}

/* ダウンロードボタンは使わない（リンク側にまとめている） */
.article__body .wp-block-file__button {
  display: none;
}

/* 配置指定 */
.article__body .aligncenter {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.article__body .alignwide,
.article__body .alignfull {
  max-width: 100%;
}

/* --------------------------------------------------
   8.6 記事中のボタン
   --------------------------------------------------
   WordPress 標準の「ボタン」ブロックをテーマの見た目に合わせる。
   予約 CTA と同じ丸ボタンの言語で揃えているので、
   記事中に置いても浮かない。

   手書きの HTML で使いたい場合は、リンクに soyu-button クラスを
   付けても同じ見た目になる（下部の記述を参照）。
   -------------------------------------------------- */
.article__body .wp-block-buttons {
  gap: 12px;
  margin: 40px 0;
}

.article__body .wp-block-button__link,
.article__body a.soyu-button {
  display: inline-block;
  padding: 20px 44px;
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #fff !important;
  text-align: center;
  text-decoration: none;
  letter-spacing: .1em;
  background-color: var(--soyu-key);
  background-image: linear-gradient(180deg, var(--soyu-btn-top) 0%, var(--soyu-btn-bottom) 100%);
  border: 1px solid var(--soyu-btn-bottom);
  border-radius: 70px;
  box-shadow: var(--soyu-btn-shadow), var(--soyu-btn-sheen);
  transition: background-image .3s ease, box-shadow .3s ease, border-color .3s ease, transform .2s ease;
}

.article__body .wp-block-button__link:hover,
.article__body .wp-block-button__link:focus,
.article__body a.soyu-button:hover,
.article__body a.soyu-button:focus {
  color: #fff !important;
  text-decoration: none;
  background-image: linear-gradient(180deg, var(--soyu-btn-top-hover) 0%, var(--soyu-btn-bottom-hover) 100%);
  border-color: var(--soyu-btn-bottom-hover);
  box-shadow: var(--soyu-btn-shadow-hover), var(--soyu-btn-sheen);
  opacity: 1;
  transform: translateY(-1px);
}

.article__body .wp-block-button__link:active,
.article__body a.soyu-button:active {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .22);
  transform: translateY(0);
}

/* 枠線ボタン（標準の「アウトライン」スタイル） */
.article__body .is-style-outline .wp-block-button__link,
.article__body a.soyu-button--outline {
  color: var(--soyu-key) !important;
  background-color: transparent;
  background-image: none;
  border: 1px solid var(--soyu-key);
  box-shadow: none;
}

.article__body .is-style-outline .wp-block-button__link:hover,
.article__body .is-style-outline .wp-block-button__link:focus,
.article__body a.soyu-button--outline:hover,
.article__body a.soyu-button--outline:focus {
  color: #fff !important;
  background-image: linear-gradient(180deg, var(--soyu-btn-top) 0%, var(--soyu-btn-bottom) 100%);
  border-color: var(--soyu-btn-bottom);
  box-shadow: var(--soyu-btn-shadow), var(--soyu-btn-sheen);
}

/* 矢印つき */
.article__body .is-style-soyu-arrow .wp-block-button__link::after,
.article__body a.soyu-button--arrow::after {
  margin-left: .8em;
  font-family: "EB Garamond", serif;
  content: "\2192";
  transition: transform .3s ease;
}

@media screen and (max-width: 768px) {
  .article__body .wp-block-button__link,
  .article__body a.soyu-button {
    padding: 16px 28px;
    font-size: 15px;
  }
}

/* --------------------------------------------------
   8.7 ブロックのスタイル（編集画面の「スタイル」から選択）
   -------------------------------------------------- */

/* 段落：リード文 — 記事の書き出しに */
.article__body .is-style-soyu-lead {
  margin-bottom: 2em;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.95;
  color: var(--soyu-heading);
  letter-spacing: .06em;
}

/* 段落：注釈 — 補足・免責に */
.article__body .is-style-soyu-note {
  padding-left: 1.1em;
  font-size: 14px;
  line-height: 1.9;
  text-indent: -1.1em;
  opacity: .85;
}

.article__body .is-style-soyu-note::before {
  color: var(--soyu-key);
  content: "※ ";
}

/* 段落：囲み — 重要なお知らせに */
.article__body .is-style-soyu-box {
  padding: 24px 28px;
  margin-bottom: 1.8em;
  background: var(--soyu-key-soft);
  border-radius: 4px;
}

/* 見出し：罫線なし */
.article__body .is-style-soyu-plain {
  padding: 0;
  border: 0;
}

.article__body .is-style-soyu-plain::after,
.article__body .is-style-soyu-plain::before {
  display: none;
}

/* 見出し：中央ぞろえ（飾り線） */
.article__body .is-style-soyu-center {
  position: relative;
  padding: 0 0 18px;
  text-align: center;
  border: 0;
}

.article__body .is-style-soyu-center::before {
  display: none;
}

.article__body .is-style-soyu-center::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 1px;
  content: "";
  background: var(--soyu-key);
  transform: translateX(-50%);
}

/* リスト：チェック */
.article__body ul.is-style-soyu-check > li::before {
  top: .55em;
  left: 0;
  width: 6px;
  height: 11px;
  background: none;
  border: solid var(--soyu-key);
  border-width: 0 2px 2px 0;
  border-radius: 0;
  transform: rotate(45deg);
}

.article__body ul.is-style-soyu-check > li {
  padding-left: 1.6em;
}

/* ==================================================
   8.8 お問い合わせフォーム（Contact Form 7）
   --------------------------------------------------
   従来はラベル幅 106px の表組みで、スマートフォンでは
   入力欄が横に潰れていました。ラベルを上に置く縦積みに変え、
   入力欄の高さ・文字サイズも見直しています。

   ・文字サイズ 16px … iOS で入力時に画面が拡大されるのを防ぐ
   ・入力欄の高さ 52px … 指でも押しやすい大きさ
   ・必須／任意をラベル横に明示
   ・エラーは色だけでなくアイコンと文言でも伝える
   ================================================== */
/* お知らせ一覧・プライバシーポリシー・404 と同じ間隔に揃える */
.contact {
  padding-top: 40px;
}

/* 旧レイアウト（ラベル幅 106px の表組み）の名残を打ち消す */
.contact .button {
  margin-left: 0;
}

.soyu-form {
  max-width: 640px;
  margin: 0 auto;
  font-family: "Noto Serif JP", serif;
}

.soyu-form__notice {
  padding: 18px 20px;
  margin-bottom: 40px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .06em;
  background: var(--soyu-bg-soft);
  border-left: 3px solid var(--soyu-key);
}

.soyu-form__row {
  margin-bottom: 28px;
}

.soyu-form__label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--soyu-heading);
  letter-spacing: .08em;
}

.soyu-form__req,
.soyu-form__opt {
  display: inline-block;
  padding: 3px 8px;
  margin-left: 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .06em;
  border-radius: 2px;
}

.soyu-form__req {
  color: #fff;
  background: var(--soyu-key);
}

.soyu-form__opt {
  color: var(--soyu-text);
  background: var(--soyu-bg-soft);
  border: 1px solid var(--soyu-border);
}

.soyu-form__hint {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .04em;
  opacity: .85;
}

/* ---- 入力欄 ---- */
.soyu-form input[type="text"],
.soyu-form input[type="email"],
.soyu-form input[type="tel"],
.soyu-form input[type="url"],
.soyu-form select,
.soyu-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 15px 16px;
  font-family: "Noto Serif JP", serif;
  /* 16px 未満だと iOS が入力時に画面を拡大してしまう */
  font-size: 16px;
  line-height: 1.6;
  color: var(--soyu-heading);
  letter-spacing: .04em;
  background: #fff;
  border: 1px solid var(--soyu-border);
  border-radius: 3px;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.soyu-form textarea {
  min-height: 200px;
  resize: vertical;
}

.soyu-form input::placeholder,
.soyu-form textarea::placeholder {
  color: #b5b0a8;
}

.soyu-form input:focus,
.soyu-form select:focus,
.soyu-form textarea:focus {
  outline: none;
  border-color: var(--soyu-key);
  box-shadow: 0 0 0 3px rgba(47, 93, 80, .12);
}

/* 選択欄の矢印 */
.soyu-form select {
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--soyu-key) 50%), linear-gradient(135deg, var(--soyu-key) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  cursor: pointer;
}

/* CF7 が入力欄を包む span を、幅の邪魔にならないようにする */
.soyu-form .wpcf7-form-control-wrap {
  display: block;
}

/* ---- エラー ---- */
.soyu-form .wpcf7-not-valid {
  border-color: #b3453b;
  background: #fdf7f6;
}

.soyu-form .wpcf7-not-valid-tip {
  display: flex;
  align-items: flex-start;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: #b3453b;
  letter-spacing: .04em;
}

/* 色が見えない方にも伝わるよう、記号でも示す */
.soyu-form .wpcf7-not-valid-tip::before {
  flex: 0 0 auto;
  margin-right: 6px;
  font-weight: 700;
  content: "!";
}

.contact .wpcf7-response-output,
.soyu-form .wpcf7-response-output {
  max-width: 640px !important;
  padding: 16px 20px !important;
  margin: 32px auto 0 !important;
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
  letter-spacing: .06em;
  border-width: 1px !important;
  border-radius: 3px;
}

.soyu-form .wpcf7-response-output:focus {
  outline: 2px solid var(--soyu-key);
  outline-offset: 2px;
}

/* ---- プライバシーポリシーへの同意 ---- */
.soyu-form__consent {
  padding: 24px;
  margin: 40px 0 32px;
  text-align: center;
  background: var(--soyu-bg-soft);
  border-radius: 4px;
}

.soyu-form__consent-lead {
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .06em;
}

.soyu-form__consent .wpcf7-list-item {
  margin: 0;
}

.soyu-form__consent label {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .06em;
  cursor: pointer;
}

.soyu-form__consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0 10px 0 0;
  cursor: pointer;
  accent-color: var(--soyu-key);
}

.soyu-form__consent .wpcf7-list-item-label {
  padding-top: 1px;
}

/* ---- 補足と送信ボタン ---- */
.soyu-form__note {
  margin-bottom: 32px;
  font-size: 13px;
  line-height: 1.9;
  text-align: center;
  letter-spacing: .04em;
  opacity: .9;
}

.soyu-form__submit {
  position: relative;
  text-align: center;
}

.soyu-form .wpcf7-submit {
  min-width: 280px;
  padding: 22px 48px;
  font-family: "Noto Serif JP", serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  letter-spacing: .12em;
  cursor: pointer;
  background-color: var(--soyu-key);
  background-image: linear-gradient(180deg, var(--soyu-btn-top) 0%, var(--soyu-btn-bottom) 100%);
  border: 1px solid var(--soyu-btn-bottom);
  border-radius: 70px;
  box-shadow: var(--soyu-btn-shadow), var(--soyu-btn-sheen);
  transition: background-image .3s ease, box-shadow .3s ease, border-color .3s ease, transform .2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.soyu-form .wpcf7-submit:hover,
.soyu-form .wpcf7-submit:focus {
  background-image: linear-gradient(180deg, var(--soyu-btn-top-hover) 0%, var(--soyu-btn-bottom-hover) 100%);
  border-color: var(--soyu-btn-bottom-hover);
  box-shadow: var(--soyu-btn-shadow-hover), var(--soyu-btn-sheen);
  opacity: 1;
  transform: translateY(-1px);
}

.soyu-form .wpcf7-submit:active {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .22);
  transform: translateY(0);
}

.soyu-form .wpcf7-submit:disabled {
  cursor: not-allowed;
  opacity: .5;
}

@media screen and (max-width: 768px) {
  .soyu-form__notice {
    padding: 14px 16px;
    margin-bottom: 32px;
    font-size: 14px;
  }

  .soyu-form__row {
    margin-bottom: 24px;
  }

  .soyu-form textarea {
    min-height: 160px;
  }

  .soyu-form__consent {
    padding: 20px 16px;
  }

  .soyu-form .wpcf7-submit {
    width: 100%;
    min-width: 0;
    padding: 20px 24px;
    font-size: 16px;
  }
}

/* ==================================================
   8.9 プライバシーポリシー
   本文の体裁は 7.（.article__body）をそのまま使っています。
   ================================================== */
.privacy {
  padding-top: 40px;
  margin-bottom: 120px;
}

.privacy .article__body > h2:first-of-type {
  margin-top: 48px;
}

.privacy__date {
  padding-top: 24px;
  margin-top: 56px;
  font-size: 14px;
  text-align: right;
  border-top: 1px solid var(--soyu-border);
}

@media screen and (max-width: 768px) {
  .privacy {
    margin-bottom: 80px;
  }
}

/* ==================================================
   8.10 日本語コンテンツのご案内（英語ページ）
   --------------------------------------------------
   お知らせは日本語のみのため、英語ページでは一覧の前に
   ブラウザ翻訳のご案内を置いています。
   注意書きというより「お手伝い」として読めるよう、
   警告色は使わず、キーカラーの淡い面で穏やかに見せています。
   ================================================== */
.jp-notice {
  display: flex;
  align-items: flex-start;
  max-width: 720px;
  padding: 18px 22px;
  margin: 0 auto 40px;
  text-align: left;
  background: var(--soyu-key-soft);
  border-radius: 4px;
}

.jp-notice__icon {
  flex: 0 0 auto;
  margin: 2px 14px 0 0;
  line-height: 0;
  color: var(--soyu-key);
}

.jp-notice__text {
  margin: 0;
  font-size: 14px !important;
  line-height: 1.9 !important;
  letter-spacing: .02em;
  color: var(--soyu-text);
}

@media screen and (max-width: 768px) {
  .jp-notice {
    padding: 16px 18px;
    margin-bottom: 28px;
  }

  .jp-notice__icon {
    margin-right: 10px;
  }

  .jp-notice__text {
    font-size: 13px !important;
  }
}

/* ==================================================
   8.11 下層ページの可読性
   --------------------------------------------------
   デザインの骨格（余白の大きさ、細い罫線、静かな配色）は
   そのままに、読みづらかった箇所だけを調整しています。
   ================================================== */

/* --------------------------------------------------
   施設情報の表（惣湯テラス・玄関テラス）
   --------------------------------------------------
   スマートフォンでは項目名も内容も中央ぞろえで、
   行間の区切りも無いまま 48px の空きが続いていました。
   複数行にわたる内容が中央ぞろえだと読みづらいため、
   左ぞろえに変え、1 行ごとに細い区切りを入れています。
   -------------------------------------------------- */
@media screen and (max-width: 768px) {
  .terrace__definition-list dt,
  .terrace__definition-list dd {
    text-align: left;
  }

  .terrace__definition-list dt {
    padding: 20px 0 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--soyu-key);
    letter-spacing: .14em;
    border-bottom: none;
  }

  .terrace__definition-list dd {
    padding: 0 0 20px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--soyu-border);
  }

  .terrace__definition-list dd:last-child {
    border-bottom: none;
  }
}

/* 注記（※〜）を本文と見分けやすくする */
.terrace__definition-list dd span,
.list--note,
.facility__note {
  line-height: 1.85 !important;
}

.terrace__definition-list dd > span {
  padding-left: 12px;
  border-left: 2px solid var(--soyu-key-soft);
}

/* --------------------------------------------------
   電話番号
   --------------------------------------------------
   .list 内の tel: リンクに pointer-events:none が指定されており、
   スマートフォンでもタップして発信できませんでした。
   指で操作する画面では有効にします。
   -------------------------------------------------- */
@media screen and (max-width: 768px) {
  .list a[href*="tel:"],
  .terrace__definition-list dd a[href*="tel:"] {
    color: var(--soyu-key) !important;
    text-decoration: underline;
    text-underline-offset: .2em;
    pointer-events: auto !important;
    cursor: pointer;
  }
}

/* --------------------------------------------------
   メニュー（玄関テラス）
   品名と価格を左右に振り分け、金額の位置を揃えます。
   -------------------------------------------------- */
.terrace__definition-list dd p.terrace__menu-title,
.terrace__menu-title {
  margin: 28px 0 10px;
  font-family: "EB Garamond", serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--soyu-key);
  text-align: left;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.terrace__definition-list dd p.terrace__menu-title:first-child,
.terrace__menu-title:first-child {
  margin-top: 0;
}

.terrace__menu-list {
  margin: 0 0 4px;
}

.terrace__menu-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
  letter-spacing: .04em;
  border-bottom: 1px dotted var(--soyu-border);
}

.terrace__menu-list li:last-child {
  border-bottom: none;
}

.terrace__menu-list .name {
  flex: 1 1 auto;
}

.terrace__menu-list .price {
  flex: 0 0 auto;
  font-family: "EB Garamond", serif;
  font-size: 15px;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* --------------------------------------------------
   ストーリー
   --------------------------------------------------
   .lead は 22px / 行間 200% で、短い導入文には合いますが
   長い本文が続くと読み進めづらくなります。
   このページだけ本文サイズに落とし、章ごとの間隔を整えます。
   -------------------------------------------------- */
.history .group-l > .lead {
  font-size: 17px;
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: .08em;
}

/* 各章の 1 段落目だけは少し大きく、書き出しとして見せる */
.history .group-l > .heading-02 + .lead {
  font-size: 18px;
  line-height: 2.05;
}

.history .group-l {
  margin-bottom: 56px;
}

.history .group-l > .lead + .lead {
  margin-top: 1.4em;
}

@media screen and (max-width: 768px) {
  .history .group-l > .lead,
  .history .group-l > .heading-02 + .lead {
    font-size: 16px;
    line-height: 1.95;
  }

  .history .group-l {
    margin-bottom: 44px;
  }
}

/* --------------------------------------------------
   交通・アクセス
   ルートの箇条書きを、1 項目ずつ追いやすい間隔に。
   -------------------------------------------------- */
.access .dot-list li {
  padding: 5px 0;
}

.access .group-s > p,
.access .group-l > p {
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--soyu-heading);
}

.access .heading-03 {
  padding-left: 14px;
  border-left: 2px solid var(--soyu-key);
}

/* --------------------------------------------------
   施設の利用申請
   分量が多いページなので、見出しの強弱と間隔を整えます。
   -------------------------------------------------- */
.facility__heading {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--soyu-border);
}

.facility__title {
  padding-left: 14px;
  border-left: 2px solid var(--soyu-key);
}

.facility__col {
  border-color: var(--soyu-border) !important;
  border-radius: 3px;
}

.facility__link a {
  color: var(--soyu-key);
}

@media screen and (max-width: 768px) {
  .facility__section {
    margin-bottom: 72px;
  }

  .facility__section-l {
    margin-bottom: 96px;
  }
}

/* ==================================================
   9. 404 ページ
   ================================================== */
.error404 {
  padding-top: 40px;
  margin-bottom: 120px;
}

.error404__text {
  max-width: 640px;
  margin: 0 auto 48px;
  font-size: 16px;
  line-height: 2;
  text-align: center;
  letter-spacing: .08em;
}

.error404__list {
  max-width: 420px;
  margin: 0 auto 56px;
  border-top: 1px solid var(--soyu-border);
}

.error404__list li {
  border-bottom: 1px solid var(--soyu-border);
}

.error404__list li a {
  display: block;
  padding: 16px 12px;
  font-size: 16px;
  color: var(--soyu-key);
  text-decoration: none;
  letter-spacing: .08em;
  transition: background-color .3s ease;
}

.error404__list li a:hover {
  background: var(--soyu-key-soft);
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .error404 {
    margin-bottom: 80px;
  }

  .error404__text {
    margin-bottom: 36px;
    font-size: 15px;
    text-align: left;
  }

  .news-archive {
    margin-bottom: 80px;
  }

  .news-archive__heading {
    margin-bottom: 40px;
  }

  .news-archive__heading-main {
    font-size: 24px;
  }

  .news-archive__year {
    margin: 36px 0 16px !important;
    font-size: 19px;
  }

  .news-archive .news__list li.post a {
    padding: 12px 6px;
  }
}