@charset "UTF-8";
/* ==========================================================================
   site.css — 台湾トラベルビジョン(twtv.jp)固有のデザイン(サイト所有)
   --------------------------------------------------------------------------
   WordPress(SWELL + 子テーマ)の見た目を markdown-cms 上で再現する。
   トークンは theme.css、コア構造は cms.css(編集しない)。ここは見た目の上書きだけ。
   読み込みは config/theme.php の stylesheets。
   ========================================================================== */

/* ── 共通の下地 ─────────────────────────────────────────── */

body { font-weight: 500; letter-spacing: .02em; overflow-wrap: anywhere; }
body.admin::before { display: none; }

/* 最上部のキャッチフレーズ帯(SWELL のヘッダーバー) */
body::before {
  content: "台湾に行こう";
  display: block;
  background: var(--tw-main);
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  padding: 0 max(20px, calc((100% - 1200px) / 2 + 20px));
}

/* ── ヘッダー / ナビ ─────────────────────────────────────── */

.site-header {
  background: #fdfdfd;
  backdrop-filter: none;
  border-bottom: 0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
}
.site-header__inner { max-width: 1200px; min-height: 72px; }
.site-logo {
  font-size: 1.5rem; font-weight: 700; letter-spacing: .08em; color: #333;
}
.site-logo:hover { color: var(--tw-main); }
.site-nav__item > a {
  color: #333; font-size: .9rem; font-weight: 500; letter-spacing: .06em;
  padding: .5rem .85rem; border-radius: 0;
}
.site-nav__item > a:hover { background: transparent; color: var(--tw-main); }
.site-nav__item.is-active > a { color: var(--tw-main); box-shadow: inset 0 -2px 0 var(--tw-main); }
.nav-toggle { border-color: #cbd5e0; }

/* ── パンくず(灰色の帯) ───────────────────────────────── */

.breadcrumb {
  max-width: none; background: #f7f7f7;
  padding: 10px max(20px, calc((100% - 1200px) / 2 + 20px));
  font-size: 11px; line-height: 1.6;
}
.breadcrumb li:not(:last-child)::after { content: "\203A"; opacity: .6; margin-left: .45rem; }
.breadcrumb a { color: #555; }

/* ── 本文コンテナの幅 ───────────────────────────────────── */

.site-main { padding: 28px 0 64px; }
.site-main > .container { max-width: 900px; }
.site-main > .container:has(> .page--section) { max-width: 1200px; }
.site-main > .container:has(> .page--home) { max-width: none; padding-inline: 0; }
.site-main:has(.page--home) { padding: 0; }

/* ── 記事ヘッダー(タイトル → 日付 → アイキャッチ の順にする) ─ */

.page__header { display: flex; flex-direction: column; margin-bottom: 1.5rem; }
.page__header > * { order: 2; }
.page h1 {
  order: 0; font-size: clamp(22px, 1.2rem + 1.4vw, 30px); line-height: 1.45;
  font-weight: 700; color: #333; letter-spacing: .02em; margin: 0 0 .6rem;
}
.page__meta { order: 1; font-size: 13px; color: #718096; }
.page__hero {
  order: 3; margin: 20px 0 8px; border: 0; border-radius: 20px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .2);
}
.page--section .page__header { margin-bottom: 1rem; }
.page--section h1 { border-left: 6px solid var(--tw-main); padding-left: .7rem; }

/* PR 表記 */
.pr-notice {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 2rem; padding: 10px 14px;
  font-size: 14px; color: #555;
  background: repeating-linear-gradient(-45deg, #f6f6f6, #f6f6f6 6px, #fff 6px, #fff 12px);
  border-radius: 4px;
}
.pr-notice__icon {
  flex: 0 0 auto; width: 1.4em; height: 1.4em; display: inline-grid; place-items: center;
  border-radius: 50%; background: #035058; color: #fff; font-size: .8em; font-weight: 700; font-style: italic;
}

/* ── 記事本文(子テーマ CSS を移植) ─────────────────────── */

.page__body { color: #4a5568; }
.page__body .lede { font-size: 1rem; color: inherit; }
.page__body p { font-size: 16px; line-height: 1.8; color: #4a5568; margin: 0 0 1.5em; }
.page__body h2 {
  font-size: clamp(28px, 5vw, 36px); font-weight: 700; line-height: 1.3; letter-spacing: -.02em;
  color: var(--tw-heading); margin: 60px 0 30px; padding: 0; border: 0;
}
.page__body h3 {
  font-size: clamp(20px, 4vw, 24px); font-weight: 600; line-height: 1.4; letter-spacing: -.01em;
  color: var(--tw-heading-sub); margin: 40px 0 20px; padding: 0 0 12px; border: 0; border-bottom: 2px solid #e2e8f0;
}
.page__body h4 {
  font-size: clamp(18px, 3.5vw, 20px); font-weight: 600; line-height: 1.5;
  color: #4a5568; margin: 30px 0 16px; padding: 0;
}
.page__body ul, .page__body ol { margin: 20px 0; padding-left: 30px; }
.page__body li { margin: 0 0 10px; line-height: 1.7; color: #4a5568; }
.page__body blockquote {
  border-left: 4px solid var(--tw-article-link); padding: 20px 24px; margin: 30px 0;
  background: #f7fafc; border-radius: 8px; color: #2d3748;
}
.page__body hr { border: 0; border-top: 1px solid #e2e8f0; margin: 40px 0; }
.page__body :is(p, li, td, th):not(.toc li) a:not(.swell-btn__link):not(.ota-btn):not(.blog-card__link) {
  color: var(--tw-article-link); text-decoration: none; border-bottom: 1px solid rgba(102, 126, 234, .3);
  transition: color .2s ease, border-color .2s ease;
}
.page__body :is(p, li, td, th):not(.toc li) a:not(.swell-btn__link):not(.ota-btn):not(.blog-card__link):hover {
  color: var(--tw-article-link-hover); border-bottom-color: var(--tw-article-link-hover);
}
.page__body a.cms-link { font-weight: inherit; }

/* 画像(角丸 + 影 + ホバーで浮く) */
.page__body .cms-figure { margin: 30px 0; }
.page__body .cms-figure img, .page__body p > img {
  border-radius: 16px; box-shadow: var(--shadow-md); width: 100%;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1);
}
.page__body .cms-figure img:hover { transform: translateY(-4px); box-shadow: 0 20px 35px -5px rgba(0, 0, 0, .15), 0 10px 15px -6px rgba(0, 0, 0, .1); }
.page__body .cms-figure figcaption { font-size: 14px; color: #718096; text-align: center; margin-top: 12px; font-style: italic; }

/* 目次 */
.toc { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem 1.4rem 1.2rem; margin: 2rem 0; }
.toc__title { text-align: center; font-size: 1rem; letter-spacing: .1em; margin: 0 0 .6rem; color: #333; }
.toc a { color: #333; }
.toc a:hover { color: var(--tw-main); }

/* 表(見出し行は紫、偶数行は薄いグレー) */
.table-wrap { margin: 30px 0; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1); }
table.data-table { margin: 0; font-size: 15px; border: 0; }
table.data-table th, table.data-table td { border: 0; border-bottom: 1px solid #e2e8f0; }
table.data-table thead th {
  background: var(--tw-article-link); color: #fff; padding: 16px; font-weight: 600;
  pointer-events: none; cursor: default;
}
table.data-table thead th[data-sort]::after { content: none; }
table.data-table td { padding: 14px 16px; color: #4a5568; }
table.data-table tbody tr:nth-child(even) { background: #f7fafc; }
table.data-table tbody tr:hover { background: #edf2f7; }

/* ── ブログカード(あわせて読みたい) ─────────────────────── */

.blog-card { margin: 2.2em 0; }
.blog-card__link {
  display: block; position: relative; padding: 30px 16px 16px; background: #fff;
  border: 1px solid rgba(0, 0, 0, .12); border-radius: 4px; color: inherit; text-decoration: none; transition: box-shadow .2s;
}
.blog-card__link:hover { text-decoration: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .1); }
.blog-card__caption {
  position: absolute; top: -1px; left: -1px; padding: 2px 12px; font-size: 11px; letter-spacing: .08em;
  color: #fff; background: var(--tw-main); border-radius: 4px 0 4px 0;
}
.blog-card__inner { display: flex; gap: 16px; align-items: center; }
.blog-card__thumb { flex: 0 0 168px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #e2e8f0; }
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.blog-card__title { font-weight: 700; font-size: 15px; line-height: 1.5; color: #333; }
.blog-card__excerpt { font-size: 12px; line-height: 1.6; color: #718096; }
.blog-card__meta { font-size: 12px; font-weight: 700; color: var(--tw-main); }

/* 周辺スポット（座標 lat/lng を持つ記事の末尾に自動表示。コアの .nearby*。カードは上の .blog-card を共用） */
.nearby { margin: 60px 0 30px; }
.nearby__title {
  font-size: clamp(24px, 4.5vw, 30px); font-weight: 700; line-height: 1.3; letter-spacing: -.02em;
  color: var(--tw-heading); margin: 0 0 24px; padding: 0; border: 0;
}
.nearby .blog-card { margin: 0; }
.nearby .blog-card__link { height: 100%; }

/* ── 予約・購入ボタン(SWELL ボタン) ─────────────────────── */

.swell-btn { margin: 2.2em 0; text-align: center; }
.swell-btn__link {
  --btn: #3d79d5;
  position: relative; display: inline-block; min-width: min(100%, 320px); padding: .9em 2em; overflow: hidden;
  background: var(--btn); color: #fff !important; font-weight: 700; line-height: 1.5; text-decoration: none !important;
  border-radius: 6px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2); transition: transform .2s, box-shadow .2s;
}
.swell-btn__link:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .25); }
.swell-btn__link::after {
  content: ""; position: absolute; top: -20%; left: -60%; width: 40%; height: 140%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); animation: swell-shiny 3.5s ease-in-out infinite;
}
.swell-btn--red .swell-btn__link { --btn: #e44141; }
.swell-btn--blue .swell-btn__link { --btn: #3d79d5; }
.swell-btn--green .swell-btn__link { --btn: #63a84d; }
.swell-btn--orange .swell-btn__link { --btn: #f09f4d; }
@keyframes swell-shiny { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .swell-btn__link::after { animation: none; display: none; } }

/* ── ホテルカード(OTA ボタン) ───────────────────────────── */

.ota-buttons-wrap {
  --ota-radius: 16px; border-radius: var(--ota-radius); overflow: hidden; background: #fff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .1); margin: 2em auto; max-width: 100%; position: relative;
}
.ota-buttons-image { position: relative; width: 100%; height: 200px; }
.ota-buttons-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.ota-buttons-image::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 90px; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, .55) 50%, #fff 100%);
}
.ota-buttons-body { padding: 16px 20px 20px; }
.has-bg-image .ota-buttons-body { margin-top: -48px; position: relative; z-index: 1; }
.page__body .ota-buttons-title { margin: 0 0 4px; font-size: 1.1em; font-weight: 700; color: #1a202c; line-height: 1.35; }
.has-bg-image .ota-buttons-title {
  display: inline;
  text-shadow: 0 -2px 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 2px 0 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff,
    -2px 2px 0 #fff, 2px 2px 0 #fff, 0 3px 10px rgba(0, 0, 0, .35);
}
.page__body .ota-buttons-cta { margin: 0 0 10px; font-size: .72em; color: #6b7280; letter-spacing: .07em; font-weight: 600; }
.ota-buttons-list { display: flex; flex-direction: column; gap: 6px; }
.ota-btn {
  --ota-color: #333; --ota-text-color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px;
  background: var(--ota-color); border-radius: 10px; font-weight: 700; font-size: .95em; line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: filter .15s, transform .15s, box-shadow .15s;
}
.ota-btn, .ota-btn:link, .ota-btn:visited, .ota-btn:hover, .ota-btn:focus-visible, .ota-btn:active {
  color: var(--ota-text-color) !important; text-decoration: none !important; border-bottom: 0 !important;
}
.ota-btn:hover, .ota-btn:focus-visible { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .22); }
.ota-btn:active { filter: brightness(.92); transform: none; }
.ota-btn-label { flex: 1; }
.ota-btn-arrow { font-size: 1.4em; line-height: 1; transition: transform .15s; display: inline-block; }
.ota-btn:hover .ota-btn-arrow { transform: translateX(4px); }
.ota-btn[data-ota="rakuten"] { --ota-color: #00b900; --ota-text-color: #ffffff; }
.ota-btn[data-ota="booking"] { --ota-color: #003580; --ota-text-color: #ffffff; }
.ota-btn[data-ota="agoda"] { --ota-color: #e00022; --ota-text-color: #ffffff; }
.ota-btn[data-ota="jtb"] { --ota-color: #c92434; --ota-text-color: #ffffff; }
.ota-btn[data-ota="trip"] { --ota-color: #287dfa; --ota-text-color: #ffffff; }
.ota-btn[data-ota="expedia"] { --ota-color: #febf4f; --ota-text-color: #1e243a; }
.ota-btn[data-ota="hotels"] { --ota-color: #ef3346; --ota-text-color: #ffffff; }
@media (max-width: 480px) {
  .ota-buttons-wrap { margin: 1.5em 0; }
  .ota-buttons-body { padding: 12px 14px 16px; }
  .ota-buttons-image { height: 160px; }
  .ota-btn { padding: 8px 12px; font-size: .9em; }
}
@media (prefers-reduced-motion: reduce) {
  .ota-btn, .ota-btn-arrow { transition: none; }
  .ota-btn:hover, .ota-btn:hover .ota-btn-arrow { transform: none; }
}

/* ── 広告・地図の埋め込み ─────────────────────────────── */

.embed { margin: 2em 0; text-align: center; overflow: hidden; }
.embed img { display: inline-block; max-width: 100%; border-radius: 0; box-shadow: none; transform: none !important; }
.embed iframe { max-width: 100%; border: 0; }
.embed--map iframe { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 16px; box-shadow: var(--shadow-sm); }
.embed .p-adBox, .embed .p-adBox__body { margin: 0; padding: 0; }

/* ── 記事カード(Stylish Post Blocks) ─────────────────── */

.spb-block-wrapper { padding: 60px 0; margin: 0; background: #f7fafc; }
.spb-block-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.spb-block-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.spb-header-content { flex: 1; }
.page__body h2.spb-block-title {
  font-size: 32px; font-weight: 700; margin: 0 0 8px; padding: 0; color: var(--tw-heading);
  letter-spacing: -.02em; line-height: 1.3; border: 0;
}
.spb-divider { border: 0; height: 2px; background: linear-gradient(to right, #e2e8f0, transparent); margin: 24px 0 40px; }
.page__body a.spb-more-link {
  font-size: 16px; color: #4a5568; display: flex; align-items: center; gap: 8px; font-weight: 500;
  padding: 8px 16px; border-radius: 6px; background: rgba(0, 0, 0, .02); border: 0; text-decoration: none; transition: all .3s ease;
}
.page__body a.spb-more-link:hover { color: #2d3748; background: rgba(0, 0, 0, .05); transform: translateX(4px); }
.spb-posts-grid { display: grid; gap: 24px; margin: 0; grid-template-columns: repeat(3, 1fr); }
.spb-post-card {
  background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; height: 100%;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.spb-post-card:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04); }
.page__body a.spb-post-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; border: 0; }
.spb-post-image-wrapper { position: relative; width: 100%; overflow: hidden; background: #e2e8f0; aspect-ratio: 16 / 9; }
.page__body .spb-post-image {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.spb-post-card:hover .spb-post-image { transform: scale(1.08); }
.spb-post-image-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #035058 0%, #2a8a94 100%); }
.spb-post-content { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }
.page__body h3.spb-post-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 18px; font-weight: 700; margin: 0 0 12px; padding: 0; line-height: 1.5; color: var(--tw-heading);
  border: 0; letter-spacing: 0;
}
.page__body .spb-post-excerpt {
  font-size: 14px; line-height: 1.7; color: #4a5568; margin: 0 0 16px; flex-grow: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.spb-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.spb-post-date { font-size: 13px; color: #718096; font-weight: 500; letter-spacing: .02em; }
.spb-post-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.spb-tag { display: inline-block; padding: 4px 10px; background: #edf2f7; color: #4a5568; border-radius: 4px; font-size: 12px; font-weight: 500; }
.page--section .spb-posts-grid { margin: 1.5rem 0 0; }
@media (max-width: 968px) { .spb-posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .spb-posts-grid { grid-template-columns: 1fr; gap: 16px; }
  .spb-block-wrapper { padding: 40px 0; }
  .spb-block-header { flex-direction: column; gap: 16px; margin-bottom: 30px; }
  .page__body h2.spb-block-title { font-size: 24px; }
  .page__body a.spb-more-link { font-size: 14px; }
  .spb-post-content { padding: 20px; }
  .page__body h3.spb-post-title { font-size: 16px; }
}

/* ── トップページ: メインビジュアル ─────────────────────── */

.page--home .page__header {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.page--home .toc { display: none; }
.page--home .page__body p:not([class]) { color: #333; }
.page--home .page__body img { border-radius: 0; box-shadow: none; }

.hero {
  position: relative; overflow: hidden; color: #fff; background: #1f2d33;
  height: calc(100vh - 94px); height: calc(100svh - 94px); min-height: 420px; max-height: 900px;
}
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero__inner {
  position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); width: min(100%, 1200px); padding: 0 20px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
}
.page__body .hero__title { font-size: 28px; font-weight: 500; line-height: 1.4; letter-spacing: .1em; color: #fff; margin: 0 0 .6rem; }
.page__body .hero__text { font-size: 18px; line-height: 1.8; color: #fff; margin: 0; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-shadow: 0 0 6px rgba(0, 0, 0, .4); text-decoration: none;
}
.hero__scroll:hover { color: #fff; text-decoration: none; opacity: .85; }
.hero__scroll-arrow {
  width: 14px; height: 14px; margin-bottom: 4px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg); animation: hero-bounce 1.8s ease-in-out infinite;
}
@keyframes hero-bounce { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 4px; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll-arrow { animation: none; } }
@media (max-width: 640px) { .page__body .hero__title { font-size: 22px; } .page__body .hero__text { font-size: 15px; } .hero__inner { bottom: 64px; } }

/* ── トップページ: 新着スライダー ───────────────────────── */

.post-slider { position: relative; padding: 12px 0 44px; background: #fdfdfd; }
.post-slider__viewport { max-width: 1200px; margin: 0 auto; padding: 8px 20px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.post-slider__viewport::-webkit-scrollbar { display: none; }
.page__body .post-slider__track { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.page__body .post-slider__item { flex: 0 0 calc((100% - 32px) / 3); margin: 0; scroll-snap-align: start; }
.page__body .post-slider__item a { display: block; color: inherit; text-decoration: none; border: 0; }
.post-slider__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.page__body .post-slider__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; transition: transform .5s; }
.post-slider__item a:hover .post-slider__thumb img { transform: scale(1.05); }
.post-slider__cat {
  position: absolute; top: 8px; right: 8px; padding: 2px 10px 2px 8px; font-size: 11px; font-weight: 700; line-height: 1.6;
  color: #fff; background: var(--tw-main); border-radius: 4px;
}
.post-slider__cat::before { content: ""; display: inline-block; width: .9em; height: .7em; margin-right: .35em; background: #fff; border-radius: 1px 3px 1px 1px; }
.post-slider__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.55; color: #333;
}
.post-slider__nav {
  position: absolute; top: calc(12px + 8px + (min(100vw, 1200px) - 72px) / 3 * .5625 / 2); width: 26px; height: 46px;
  transform: translateY(-50%); border: 0; cursor: pointer; background: rgba(51, 51, 51, .85); z-index: 2;
}
.post-slider__nav::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
}
.post-slider__nav--prev { left: max(20px, calc((100% - 1200px) / 2 + 20px)); }
.post-slider__nav--prev::before { transform: translate(-30%, -50%) rotate(45deg); }
.post-slider__nav--next { right: max(20px, calc((100% - 1200px) / 2 + 20px)); }
.post-slider__nav--next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.post-slider__nav:hover { background: #333; }
.post-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.post-slider__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #cbd5e0; cursor: pointer; }
.post-slider__dot[aria-current="true"] { background: #333; }
@media (max-width: 820px) {
  .page__body .post-slider__item { flex-basis: 66%; }
  .post-slider__nav { top: calc(20px + 66vw * .5625 / 2); }
}
@media (max-width: 520px) { .page__body .post-slider__item { flex-basis: 80%; } }

/* ── トップページ: 帯・数値・アイコン ───────────────────── */

.band { padding: 60px 0; }
.band--gray { background: #f7f7f7; }
.band--white { background: #fff; }
.band__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.band__lead { margin-bottom: 32px; }
.band__cols { display: grid; gap: 32px; align-items: start; }
.band__cols--2 { grid-template-columns: repeat(2, 1fr); gap: 48px; align-items: center; }
.band__cols--3 { grid-template-columns: repeat(3, 1fr); }
.band__col > :first-child { margin-top: 0; }
.band__col > :last-child { margin-bottom: 0; }
.page__body .band h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5; color: #333; margin: 0 0 1.2rem; }
.page__body .band h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: .02em; color: #333; margin: 0 0 1.2rem; padding: 0; border: 0; }
.page__body .band .cms-figure { margin: 0 0 1.2rem; }
.page__body .band .cms-figure img { border-radius: 0; box-shadow: none; width: 100%; }
.page__body .band .cms-figure img:hover { transform: none; box-shadow: none; }
.page__body .band .cms-figure figcaption { font-size: 13px; font-style: normal; text-align: left; margin-top: 8px; color: #718096; }
.band--cta ul, .page__body .band ul { list-style: none; padding-left: 0; }
.page__body .band ul li { position: relative; padding-left: 1.7em; margin: 0 0 .7em; color: #333; }
.page__body .band ul li::before {
  content: ""; position: absolute; left: .35em; top: .35em; width: .5em; height: .9em;
  border: solid var(--tw-main); border-width: 0 .17em .17em 0; transform: rotate(45deg);
}

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 1.6rem 0 0; }
.stats__item { background: #fff; padding: 22px 12px; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 4px 4px -4px rgba(0, 0, 0, .1); }
.page__body .stats p { margin: 0; color: #333; }
.page__body .stats__num strong { font-size: 1.4rem; font-weight: 700; padding: 0 .1em; }
.page__body .stats__label { margin-top: .4rem; font-size: 14px; }

.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; margin-right: .45em; background: currentColor; -webkit-mask: var(--svg) center / contain no-repeat; mask: var(--svg) center / contain no-repeat; }
.icon.i-utensils { --svg: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoIGQ9Ik00MTYgMEM0MDAgMCAyODggMzIgMjg4IDE3NlYyODhjMCAzNS4zIDI4LjcgNjQgNjQgNjRoMzJWNDgwYzAgMTcuNyAxNC4zIDMyIDMyIDMyczMyLTE0LjMgMzItMzJWMzUyIDI0MCAzMmMwLTE3LjctMTQuMy0zMi0zMi0zMnpNNjQgMTZDNjQgNy44IDU3LjkgMSA0OS43IC4xUzM0LjIgNC42IDMyLjQgMTIuNUwyLjEgMTQ4LjhDLjcgMTU1LjEgMCAxNjEuNSAwIDE2Ny45YzAgNDUuOSAzNS4xIDgzLjYgODAgODcuN1Y0ODBjMCAxNy43IDE0LjMgMzIgMzIgMzJzMzItMTQuMyAzMi0zMlYyNTUuNmM0NC45LTQuMSA4MC00MS44IDgwLTg3LjdjMC02LjQtLjctMTIuOC0yLjEtMTkuMUwxOTEuNiAxMi41Yy0xLjgtOC05LjMtMTMuMy0xNy40LTEyLjRTMTYwIDcuOCAxNjAgMTZWMTUwLjJjMCA1LjQtNC40IDkuOC05LjggOS44Yy01LjEgMC05LjMtMy45LTkuOC05TDEyNy45IDE0LjZDMTI3LjIgNi4zIDEyMC4zIDAgMTEyIDBzLTE1LjIgNi4zLTE1LjkgMTQuNkw4My43IDE1MWMtLjUgNS4xLTQuNyA5LTkuOCA5Yy01LjQgMC05LjgtNC40LTkuOC05LjhWMTZ6bTQ4LjMgMTUybC0uMyAwLS4zIDAgLjMtLjcgLjMgLjd6Ij48L3BhdGg+PC9zdmc+"); }
.icon.i-hands-praying { --svg: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDY0MCA1MTIiPjxwYXRoIGQ9Ik0zNTEuMiA0LjhjMy4yLTIgNi42LTMuMyAxMC00LjFjNC43LTEgOS42LS45IDE0LjEgLjFjNy43IDEuOCAxNC44IDYuNSAxOS40IDEzLjZMNTE0LjYgMTk0LjJjOC44IDEzLjEgMTMuNCAyOC42IDEzLjQgNDQuNHY3My41YzAgNi45IDQuNCAxMyAxMC45IDE1LjJsNzkuMiAyNi40QzYzMS4yIDM1OCA2NDAgMzcwLjIgNjQwIDM4NHY5NmMwIDkuOS00LjYgMTkuMy0xMi41IDI1LjRzLTE4LjEgOC4xLTI3LjcgNS41TDQzMSA0NjUuOWMtNTYtMTQuOS05NS02NS43LTk1LTEyMy43VjIyNGMwLTE3LjcgMTQuMy0zMiAzMi0zMnMzMiAxNC4zIDMyIDMydjgwYzAgOC44IDcuMiAxNiAxNiAxNnMxNi03LjIgMTYtMTZWMjE5LjFjMC03LTEuOC0xMy44LTUuMy0xOS44TDM0MC4zIDQ4LjFjLTEuNy0zLTIuOS02LjEtMy42LTkuM2MtMS00LjctMS05LjYgLjEtMTQuMWMxLjktOCA2LjgtMTUuMiAxNC4zLTE5Ljl6bS02Mi40IDBjNy41IDQuNiAxMi40IDExLjkgMTQuMyAxOS45YzEuMSA0LjYgMS4yIDkuNCAuMSAxNC4xYy0uNyAzLjItMS45IDYuMy0zLjYgOS4zTDIxMy4zIDE5OS4zYy0zLjUgNi01LjMgMTIuOS01LjMgMTkuOFYzMDRjMCA4LjggNy4yIDE2IDE2IDE2czE2LTcuMiAxNi0xNlYyMjRjMC0xNy43IDE0LjMtMzIgMzItMzJzMzIgMTQuMyAzMiAzMlYzNDIuM2MwIDU4LTM5IDEwOC43LTk1IDEyMy43bC0xNjguNyA0NWMtOS42IDIuNi0xOS45IC41LTI3LjctNS41UzAgNDkwIDAgNDgwVjM4NGMwLTEzLjggOC44LTI2IDIxLjktMzAuNGw3OS4yLTI2LjRjNi41LTIuMiAxMC45LTguMyAxMC45LTE1LjJWMjM4LjVjMC0xNS44IDQuNy0zMS4yIDEzLjQtNDQuNEwyNDUuMiAxNC41YzQuNi03LjEgMTEuNy0xMS44IDE5LjQtMTMuNmM0LjYtMS4xIDkuNC0xLjIgMTQuMS0uMWMzLjUgLjggNi45IDIuMSAxMCA0LjF6Ij48L3BhdGg+PC9zdmc+"); }
.icon.i-tree { --svg: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoIGQ9Ik0yMTAuNiA1LjlMNjIgMTY5LjRjLTMuOSA0LjItNiA5LjgtNiAxNS41QzU2IDE5Ny43IDY2LjMgMjA4IDc5LjEgMjA4SDEwNEwzMC42IDI4MS40Yy00LjIgNC4yLTYuNiAxMC02LjYgMTZDMjQgMzA5LjkgMzQuMSAzMjAgNDYuNiAzMjBIODBMNS40IDQwOS41QzEuOSA0MTMuNyAwIDQxOSAwIDQyNC41YzAgMTMgMTAuNSAyMy41IDIzLjUgMjMuNUgxOTJ2MzJjMCAxNy43IDE0LjMgMzIgMzIgMzJzMzItMTQuMyAzMi0zMlY0NDhINDI0LjVjMTMgMCAyMy41LTEwLjUgMjMuNS0yMy41YzAtNS41LTEuOS0xMC44LTUuNC0xNUwzNjggMzIwaDMzLjRjMTIuNSAwIDIyLjYtMTAuMSAyMi42LTIyLjZjMC02LTIuNC0xMS44LTYuNi0xNkwzNDQgMjA4aDI0LjljMTIuNyAwIDIzLjEtMTAuMyAyMy4xLTIzLjFjMC01LjctMi4xLTExLjMtNi0xNS41TDIzNy40IDUuOUMyMzQgMi4xIDIyOS4xIDAgMjI0IDBzLTEwIDIuMS0xMy40IDUuOXoiPjwvcGF0aD48L3N2Zz4="); }

@media (max-width: 820px) {
  .band { padding: 40px 0; }
  .band__cols--2, .band__cols--3 { grid-template-columns: 1fr; gap: 28px; }
}

/* ── フッター ─────────────────────────────────────────── */

.site-footer { background: var(--tw-footer-bg); border-top: 0; margin-top: 0; padding: 0; color: var(--tw-footer-text); }
.site-footer__inner { display: none; }
.site-footer__bottom { max-width: 1200px; margin-top: 0; padding-top: 0; border-top: 0; }
.footer-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 56px 0 40px; }
.footer-widgets__title { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--tw-footer-text); letter-spacing: .05em; }
.footer-widgets p, .footer-widgets li { font-size: 14px; line-height: 1.8; color: var(--tw-footer-text); margin: 0 0 .4rem; }
.footer-widgets ul { list-style: none; margin: 0; padding: 0; }
.footer-widgets a { color: var(--tw-footer-text); text-decoration: none; }
.footer-widgets a:hover { text-decoration: underline; color: #fff; }
.footer-widgets img { border-radius: 0; }
.footer-widgets__logo { width: 150px; height: 150px; }
.footer-widgets__op li { margin-bottom: .9rem; }
.site-footer__bottom > p { text-align: center; padding: 18px 0 22px; font-size: 12px; color: var(--tw-footer-text); border-top: 1px solid rgba(255, 255, 255, .12); }
@media (max-width: 820px) { .footer-widgets { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 28px; } }

/* ── 小さい画面 ─────────────────────────────────────────── */

@media (max-width: 820px) {
  .site-header__inner { min-height: 60px; }
  .site-logo { font-size: 1.2rem; }
  .site-nav__item > a { padding: .7rem .4rem; font-size: 1rem; }
  .page__body h2 { margin: 40px 0 20px; }
  .page__body h3 { margin: 30px 0 15px; }
  .blog-card__inner { flex-direction: column; align-items: stretch; }
  .blog-card__thumb { flex-basis: auto; }
}