@charset "UTF-8";

/*!
Theme Name: Everything Tokyo (Cocoon Child)
Description: Everything Tokyo 用の Cocoon 子テーマ。色・フォント・余白は design.md に準拠。
Theme URI: https://everythingtokyo.jp/
Author: Everything Tokyo
Template: cocoon-master
Version: 0.1.0
Text Domain: everything-tokyo
*/

/************************************
** デザイントークン（design.md と同じ値。ここ以外で色を作らない）
************************************/
:root {
  --et-primary: #1F3A5F;
  --et-primary-hover: #162B47;
  --et-accent: #C8412A;
  --et-accent-hover: #A8361F;
  --et-bg: #FAFAF7;
  --et-surface: #FFFFFF;
  --et-text: #1A1D23;
  --et-subtext: #5B6270;
  --et-border: #E3E1DA;
  --et-input-border: #5B6270;
  --et-info-bg: #EEF2F7;

  --et-font-heading: "Plus Jakarta Sans", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --et-font-body: "Inter", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;

  --et-radius: 8px;
  --et-radius-card: 12px;
  --et-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);

  --et-content: 720px;
  --et-wide: 1200px;
  --et-space-section: 96px;
  --et-space-element: 24px;
  --et-tap-min: 48px;

  /* Cocoon 側の変数を上書き */
  --cocoon-default-font: var(--et-font-body);
  --cocoon-text-color: var(--et-text);
  --cocoon-pallid-text-color: var(--et-subtext);
  --cocoon-x-pallid-text-color: var(--et-subtext);
  --cocoon-default-text-size: 17px;
  --cocoon-basic-border-color: var(--et-border);
  --cocoon-thin-color: var(--et-border);
  --cocoon-x-thin-color: var(--et-border);
  --cocoon-white-color: var(--et-surface);
  --cocoon-basic-border-radius: var(--et-radius);
  --card-ratio: 3 / 2;
}

/************************************
** ベース
************************************/
body {
  font-family: var(--et-font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--et-text);
  background-color: var(--et-bg);
  -webkit-font-smoothing: antialiased;
}

.header-container,
.main,
.footer {
  background-color: var(--et-bg);
}

a {
  color: var(--et-primary);
}
a:hover {
  color: var(--et-primary-hover);
}

/* ページ内リンクで飛んだ時、固定ヘッダーに見出しが隠れないように */
[id] {
  scroll-margin-top: 88px;
}

:focus-visible {
  outline: 2px solid var(--et-primary);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-name-text,
.entry-card-title {
  font-family: var(--et-font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--et-text);
}

/* レイアウト幅：一覧・トップは1200px */
@media (min-width: 1024px) {
  .wrap {
    width: min(var(--et-wide), calc(100% - 32px));
  }
}

/* 記事・固定ページ本文は720px中央寄せ（サイドバーなし前提） */
.no-sidebar.single .main,
.no-sidebar.page:not(.home):not(.et-wide-page) .main {
  width: 100%;
  max-width: calc(var(--et-content) + 64px);
  margin-inline: auto;
  padding: 32px;
  border: 0;
}
@media (max-width: 767px) {
  .no-sidebar.single .main,
  .no-sidebar.page:not(.home):not(.et-wide-page) .main {
    padding: 24px 16px;
  }
}

/************************************
** 見出し（Cocoon 初期デザインをリセット → 藍の短い下線）
************************************/
.article h2,
.article h3,
.article h4 {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 48px 0 var(--et-space-element);
}
.article h2 {
  font-size: 28px;
  position: relative;
  padding-bottom: 12px;
}
.article h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--et-primary);
}
.article h3 {
  font-size: 22px;
}
.article h4 {
  font-size: 19px;
}
@media (max-width: 767px) {
  .article h2 { font-size: 24px; }
  .article h3 { font-size: 20px; }
}

.entry-title {
  font-size: 34px;
  padding: 0;
}
@media (max-width: 767px) {
  .entry-title { font-size: 28px; }
}

/* 小さい文字：最小13px */
.date-tags,
.post-date,
.post-update,
.breadcrumb,
.wp-block-image figcaption,
.wp-element-caption {
  font-size: 13px;
  color: var(--et-subtext);
}

/* 固定ページでは日付・著者を出さない（記事だけに表示） */
.page .date-tags,
.page .footer-meta {
  display: none;
}

/* トップページの「Home」タイトルは隠す（H1 はヒーローに置く） */
.home.page .entry-title {
  display: none;
}

/************************************
** 画像
************************************/
.article img,
.wp-block-image img {
  border-radius: var(--et-radius);
}

/* 写真ギャラリー */
.et-gallery.wp-block-gallery.has-nested-images {
  gap: 8px;
}
.et-gallery.wp-block-gallery.has-nested-images figure.wp-block-image img {
  border-radius: var(--et-radius);
}

/* 宿バナー（写真＋文章） */
.et-stay-columns {
  gap: 32px;
  margin: 0;
}
.et-stay-columns .wp-block-image {
  margin: 0;
}
.et-stay-columns .wp-block-image img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

/************************************
** ヘッダー
************************************/
/* スクロールしても上に残るヘッダー（ロゴ左・メニュー右） */
.header-container {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--et-border);
  background-color: rgba(250, 250, 247, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.admin-bar .header-container {
  top: 32px;
}
.header-container .navi,
.header-container .navi-in > ul li {
  background-color: transparent;
}
.header-container-in.hlt-top-menu .site-name-text {
  font-family: var(--et-font-heading);
  font-size: 24px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.header-container-in.hlt-top-menu .navi-in > ul li {
  width: auto;
}
.header-container-in.hlt-top-menu .navi-in > ul li:not(.et-menu-cta) > a {
  padding: 0 16px;
  font-size: 15px;
}
.site-name-text,
.site-name-text-link {
  color: var(--et-primary);
}
.navi,
.navi-in > ul li,
.navi-in > ul .sub-menu {
  background-color: var(--et-bg);
}
.navi-in a {
  color: var(--et-primary);
  font-weight: 600;
}
.navi-in a:hover {
  background-color: var(--et-info-bg);
  color: var(--et-primary-hover);
}

/* ヘッダーCTA：メニュー項目に CSS クラス et-menu-cta を付ける */
.navi-in > ul li.et-menu-cta {
  width: auto;
  display: flex;
  align-items: center;
  padding: 0 8px;
}
.navi-in > ul li.et-menu-cta > a,
.menu-drawer li.et-menu-cta > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--et-tap-min);
  height: auto;
  padding: 0 24px;
  border-radius: var(--et-radius);
  background-color: var(--et-accent);
  color: #FFFFFF;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.navi-in > ul li.et-menu-cta > a:hover,
.menu-drawer li.et-menu-cta > a:hover {
  background-color: var(--et-accent-hover);
  color: #FFFFFF;
}
.menu-drawer li.et-menu-cta {
  margin-top: 16px;
}

/* モバイル下部ボタン：サイドバーを使わないので Sidebar ボタンを隠す
   （Menu ボタンはヘッダーメニューを割り当てると自動で出る） */
.mobile-menu-buttons .sidebar-menu-button {
  display: none;
}

/* スマホ下部の「Book」ボタン（朱） */
.mobile-menu-buttons .et-book-menu-button {
  padding: 4px;
}
.mobile-menu-buttons .et-book-menu-button > a.et-book-menu-a {
  display: flex !important;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: var(--et-radius);
  background-color: var(--et-accent);
  color: #FFFFFF !important;
  text-decoration: none;
}
.mobile-menu-buttons .et-book-menu-a:hover,
.mobile-menu-buttons .et-book-menu-a:active {
  background-color: var(--et-accent-hover);
}
.mobile-menu-buttons .et-book-menu-a .menu-caption {
  font-weight: 700;
  color: #FFFFFF;
}

/* モバイルのドロワーメニュー */
.menu-drawer a {
  min-height: var(--et-tap-min);
  display: flex;
  align-items: center;
  color: var(--et-primary);
}

/************************************
** ボタン
************************************/
/* 主要CTA（自分たちの宿）：ボタンブロックに et-btn-cta */
.wp-block-button.et-btn-cta .wp-block-button__link,
/* アフィリエイト予約：ボタンブロックに et-btn-affiliate */
.wp-block-button.et-btn-affiliate .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--et-tap-min);
  padding: 14px 28px;
  border-radius: var(--et-radius);
  color: #FFFFFF;
  font-family: var(--et-font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.wp-block-button.et-btn-cta .wp-block-button__link {
  background-color: var(--et-accent);
}
.wp-block-button.et-btn-cta .wp-block-button__link:hover {
  background-color: var(--et-accent-hover);
  color: #FFFFFF;
}
/* 2026-11-09 やまと決定：予約・CTA（アフィリエイトの予約ボタンを含む）は朱 */
.wp-block-button.et-btn-affiliate .wp-block-button__link {
  background-color: var(--et-accent);
}
.wp-block-button.et-btn-affiliate .wp-block-button__link:hover {
  background-color: var(--et-accent-hover);
  color: #FFFFFF;
}

/* サイト内の導線（藍）：ボタンブロックに et-btn-primary */
.wp-block-button.et-btn-primary .wp-block-button__link,
.wp-block-button.et-btn-outline .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--et-tap-min);
  padding: 14px 28px;
  border-radius: var(--et-radius);
  font-family: var(--et-font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.wp-block-button.et-btn-primary .wp-block-button__link {
  background-color: var(--et-primary);
  color: #FFFFFF;
}
.wp-block-button.et-btn-primary .wp-block-button__link:hover {
  background-color: var(--et-primary-hover);
  color: #FFFFFF;
}
/* 控えめな導線：ボタンブロックに et-btn-outline */
.wp-block-button.et-btn-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--et-primary);
  border: 2px solid var(--et-primary);
  padding: 12px 26px;
}
.wp-block-button.et-btn-outline .wp-block-button__link:hover {
  background-color: var(--et-info-bg);
  color: var(--et-primary-hover);
}

/* ボタン直下の「Affiliate link」表記 */
.et-affiliate-note {
  margin-top: 8px !important;
  font-size: 13px;
  color: var(--et-subtext);
}

/* 記事冒頭のアフィリエイト開示 */
.et-disclosure {
  font-size: 14px;
  color: var(--et-subtext);
  border-left: 3px solid var(--et-border);
  padding: 4px 0 4px 16px;
}

/************************************
** 記事の種類の表示（We've been here / Researched guide）
************************************/
.et-guide-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: var(--et-space-element) !important;
}
.et-guide-badge svg {
  flex-shrink: 0;
}
.et-guide-badge-wrap {
  margin-bottom: var(--et-space-element) !important;
}
.et-guide-badge-wrap .et-guide-badge {
  margin-bottom: 0 !important;
  text-decoration: none;
}
.et-guide-badge-wrap .et-guide-badge:hover span {
  text-decoration: underline;
}
.et-guide-visited:hover {
  color: #FFFFFF;
}

/* 方針ページのラベル説明 */
.et-label-list {
  display: grid;
  gap: 16px;
  margin: var(--et-space-element) 0;
}
.et-label-item {
  background-color: var(--et-surface);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius);
  padding: 20px;
}
.et-label-item .et-guide-badge {
  margin-bottom: 12px !important;
}
.et-label-item p:last-child {
  margin-bottom: 0;
}
.et-guide-visited {
  background-color: var(--et-primary);
  color: #FFFFFF;
}
.et-guide-researched {
  background-color: var(--et-surface);
  color: var(--et-primary);
  border: 1px solid var(--et-primary);
}
.et-guide-practical {
  background-color: var(--et-info-bg);
  color: var(--et-primary);
}

/* 比較表（記事内、テーブルブロックに et-compare-table） */
.article .et-compare-table table {
  border-collapse: collapse;
  font-size: 15px;
}
.article .et-compare-table th {
  background-color: var(--et-primary);
  color: #FFFFFF;
  text-align: left;
  padding: 10px 12px;
  border: 0;
}
.article .et-compare-table td {
  padding: 12px;
  border: 0;
  border-bottom: 1px solid var(--et-border);
  vertical-align: top;
}
.article .et-compare-table tr {
  background: transparent !important;
}
.article .et-compare-table td:first-child {
  font-weight: 600;
  color: var(--et-primary);
  white-space: nowrap;
}
@media (max-width: 599px) {
  .et-compare-table {
    overflow-x: auto;
  }
  /* 横スクロールは3列以上の表だけ（2列の表は画面幅に収める） */
  .article .et-compare-table table:has(th:nth-child(3), tr:first-child td:nth-child(3)) {
    min-width: 560px;
  }
  .article .et-compare-table td:first-child {
    white-space: normal;
  }
}

/* FAQ（詳細ブロックを縦に並べる） */
.et-faq .wp-block-details {
  border-bottom: 1px solid var(--et-border);
  margin: 0 !important;
  padding: 0;
}
.et-faq .wp-block-details:first-child {
  border-top: 1px solid var(--et-border);
}
.et-faq summary {
  position: relative;
  display: block;
  cursor: pointer;
  list-style: none;
  min-height: var(--et-tap-min);
  padding: 14px 40px 14px 0;
  font-family: var(--et-font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--et-text);
}
.et-faq summary::-webkit-details-marker {
  display: none;
}
.et-faq summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--et-primary);
}
.et-faq details[open] summary::after {
  content: "\2212";
}
.et-faq summary:hover {
  color: var(--et-primary);
}
.et-faq .wp-block-details > *:not(summary) {
  margin: 0 0 16px !important;
}

/* フレーズ表（英語・日本語・読み方） */
.article .et-phrase-table td:first-child {
  white-space: normal;
  color: var(--et-text);
  font-weight: 400;
}
.article .et-phrase-table td:nth-child(2) {
  font-size: 18px;
  font-weight: 600;
  color: var(--et-primary);
}
.article .et-phrase-table td:nth-child(3) {
  font-style: italic;
}

/* スマホではフレーズ表を1行ずつのカードにする（相手に画面を見せやすく） */
@media (max-width: 599px) {
  .et-phrase-table.et-compare-table {
    overflow-x: visible;
  }
  .article .et-phrase-table table {
    min-width: 0;
  }
  .article .et-phrase-table thead {
    display: none;
  }
  .article .et-phrase-table tr,
  .article .et-phrase-table td {
    display: block;
    width: auto;
  }
  .article .et-phrase-table tr {
    border-bottom: 1px solid var(--et-border);
    padding: 12px 0;
  }
  .article .et-phrase-table td {
    border: 0;
    padding: 0;
  }
  .article .et-phrase-table td:first-child {
    font-size: 14px;
    color: var(--et-subtext);
  }
  .article .et-phrase-table td:nth-child(2) {
    font-size: 24px;
    line-height: 1.4;
    margin: 2px 0;
  }
}

/* Cocoon の関連記事が0件の時（「Could not find related posts.」だけの時）は欄ごと隠す */
.related-entries:has(.related-list > p:only-child) {
  display: none;
}

/* 関連記事への導線（Keep reading） */
.et-keep-reading {
  background-color: var(--et-info-bg);
  border-radius: var(--et-radius);
  padding: 8px 24px 16px;
  margin-top: 48px;
}
.article .et-keep-reading h2 {
  font-size: 19px;
  margin: 16px 0 8px;
  padding: 0;
}
.article .et-keep-reading h2::after {
  content: none;
}
.et-keep-reading ul {
  margin: 0;
}
.et-keep-reading li {
  padding: 4px 0;
}
.et-keep-reading a {
  font-weight: 600;
}

/* 2026-11-04 Keep reading の写真付きカード */
.article .et-keep-reading .et-kr-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.article .et-keep-reading .et-kr-card { margin: 0; padding: 0; list-style: none; }
.article .et-keep-reading .et-kr-card::before { content: none; }
.et-kr-card a { display: flex; align-items: center; gap: 12px; height: 100%; overflow: hidden; background: #FFFFFF; border: 1px solid var(--et-border); border-radius: 10px; color: var(--et-primary, #1F3A5F); line-height: 1.35; text-decoration: none; }
.et-kr-card a:hover { border-color: #1F3A5F; }
.et-kr-card a:focus-visible { outline: 3px solid #1F3A5F; outline-offset: 2px; }
.et-kr-card img.et-kr-img, .et-kr-card .et-kr-noimg { flex: 0 0 96px; width: 96px; height: 72px; border-radius: 0; object-fit: cover; background: #EEE9DE; }
.et-kr-title { padding: 8px 12px 8px 0; font-size: 15px; }
@media (max-width: 640px) { .article .et-keep-reading .et-kr-cards { grid-template-columns: 1fr; } }

/* 調べて書いた記事の情報元 */
.et-sources {
  border-top: 1px solid var(--et-border);
  margin-top: 48px;
  padding-top: 8px;
  font-size: 15px;
}
.article .et-sources h2 {
  font-size: 19px;
  margin-top: 24px;
}
.article .et-sources h2::after {
  content: none;
}

/************************************
** 1日のルート図（記事内、wp:html で <ol class="et-route">）
************************************/
.et-route {
  list-style: none;
  margin: var(--et-space-element) 0;
  padding: 0 0 0 4px;
  counter-reset: none;
}
.article .et-route li {
  list-style: none;
  margin: 0;
}
.et-route-stop,
.et-route-leg {
  position: relative;
  padding-left: 32px;
}
/* 縦の線 */
.et-route-stop::before,
.et-route-leg::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--et-primary);
}
.et-route-stop:first-child::before {
  top: 12px;
}
.et-route-stop:last-child::before {
  bottom: auto;
  height: 12px;
}
/* 停留所の丸 */
.et-route-stop::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--et-surface);
  border: 3px solid var(--et-primary);
  box-sizing: border-box;
}
.et-route-stop {
  padding-bottom: 4px;
}
.et-route-stop strong {
  display: block;
  font-family: var(--et-font-heading);
  font-size: 18px;
  line-height: 1.3;
}
.et-route-time {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--et-subtext);
}
.et-route-leg {
  font-size: 14px;
  color: var(--et-subtext);
  padding-top: 8px;
  padding-bottom: 12px;
}
.et-route-leg::before {
  background-image: repeating-linear-gradient(to bottom, var(--et-primary) 0 4px, transparent 4px 8px);
  background-color: transparent;
}

/************************************
** 情報ボックス（Access / Cost / Time / Best time to go）
************************************/
.et-info-box {
  background-color: var(--et-info-bg);
  border-radius: var(--et-radius);
  padding: var(--et-space-element);
}
.et-info-box table,
.article .et-info-box table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  background: transparent;
  margin: 0;
}
.et-info-box th,
.et-info-box td,
.article .et-info-box th,
.article .et-info-box td {
  border: 0;
  border-bottom: 1px solid var(--et-border);
  background: transparent;
  padding: 12px 8px;
  text-align: left;
  vertical-align: top;
}
.article .et-info-box tr {
  background: transparent !important;
}
.et-info-box tr:last-child th,
.et-info-box tr:last-child td {
  border-bottom: 0;
}
.et-info-box th,
.et-info-box td:first-child {
  width: 34%;
  font-weight: 600;
  color: var(--et-primary);
  padding-right: 16px;
}
@media (max-width: 599px) {
  .et-info-box {
    padding: 16px;
  }
  .et-info-box th,
  .et-info-box td:first-child {
    width: 38%;
  }
}

/************************************
** 自分たちの宿のCTAバナー
************************************/
.et-stay-banner {
  background-color: var(--et-surface);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius-card);
  box-shadow: var(--et-shadow-card);
  padding: 32px;
}
@media (max-width: 767px) {
  .et-stay-banner { padding: 24px 16px; }
}

/************************************
** トップページ（GO TOKYO の構成を参考にした大胆なレイアウト）
** 巨大な英字見出し／青海波の帯／写真タイル／画面幅いっぱいのセクション
************************************/
:root {
  --et-seigaiha-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cg fill='%23EEF2F7' stroke='%231F3A5F' stroke-opacity='0.08' stroke-width='1'%3E%3Ccircle cx='20' cy='0' r='20'/%3E%3Ccircle cx='20' cy='0' r='15'/%3E%3Ccircle cx='20' cy='0' r='10'/%3E%3Ccircle cx='20' cy='0' r='5'/%3E%3Ccircle cx='0' cy='10' r='20'/%3E%3Ccircle cx='0' cy='10' r='15'/%3E%3Ccircle cx='0' cy='10' r='10'/%3E%3Ccircle cx='0' cy='10' r='5'/%3E%3Ccircle cx='40' cy='10' r='20'/%3E%3Ccircle cx='40' cy='10' r='15'/%3E%3Ccircle cx='40' cy='10' r='10'/%3E%3Ccircle cx='40' cy='10' r='5'/%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3Ccircle cx='20' cy='20' r='15'/%3E%3Ccircle cx='20' cy='20' r='10'/%3E%3Ccircle cx='20' cy='20' r='5'/%3E%3C/g%3E%3C/svg%3E");
  --et-seigaiha-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cg fill='%231F3A5F' stroke='%23FFFFFF' stroke-opacity='0.07' stroke-width='1'%3E%3Ccircle cx='20' cy='0' r='20'/%3E%3Ccircle cx='20' cy='0' r='15'/%3E%3Ccircle cx='20' cy='0' r='10'/%3E%3Ccircle cx='20' cy='0' r='5'/%3E%3Ccircle cx='0' cy='10' r='20'/%3E%3Ccircle cx='0' cy='10' r='15'/%3E%3Ccircle cx='0' cy='10' r='10'/%3E%3Ccircle cx='0' cy='10' r='5'/%3E%3Ccircle cx='40' cy='10' r='20'/%3E%3Ccircle cx='40' cy='10' r='15'/%3E%3Ccircle cx='40' cy='10' r='10'/%3E%3Ccircle cx='40' cy='10' r='5'/%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3Ccircle cx='20' cy='20' r='15'/%3E%3Ccircle cx='20' cy='20' r='10'/%3E%3Ccircle cx='20' cy='20' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

.home.page .main {
  padding: 0;
}
.home.page .article {
  margin-bottom: 0;
}
.home.page .entry-content {
  margin-top: 0;
}

/* 画面幅いっぱいに広げるセクション */
html,
body {
  overflow-x: clip;
}
.home.page .content {
  margin-top: 0;
}
.home.page .entry-content,
.home.page .article,
.home.page .main,
.home.page .content {
  margin-bottom: 0;
}
.home.page .footer {
  margin-top: 0;
}
.entry-content > .et-bleed {
  margin-bottom: 0 !important;
}
.entry-content > .et-hero.et-bleed,
.entry-content > .et-bleed + .et-bleed {
  margin-top: 0 !important;
}
.et-bleed {
  width: 100vw;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 16px;
  padding-right: 16px;
}

/* 小見出し（KICKER） */
.et-kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px !important;
}

/* ヒーロー：自分たちで撮った渋谷センター街の夜（2026-10）に藍のグラデーションを重ねる */
.et-hero {
  background-color: var(--et-primary);
  background-image:
    linear-gradient(90deg, rgba(20, 38, 64, 0.94) 0%, rgba(20, 38, 64, 0.8) 42%, rgba(20, 38, 64, 0.25) 100%),
    url("images/home-hero-photo.jpg");
  background-size: cover, cover;
  background-position: center, center 75%;
  background-repeat: no-repeat;
  color: #FFFFFF;
  padding-top: 140px;
  padding-bottom: 160px;
}
.et-hero-credit {
  position: absolute;
  right: 16px;
  bottom: 12px;
  margin: 0 !important;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.et-hero { position: relative; }
.et-hero .et-kicker {
  color: rgba(255, 255, 255, 0.8);
}
.article .et-hero .et-hero-title {
  font-size: clamp(48px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #FFFFFF;
  max-width: 11ch;
  margin: 0 0 32px;
  padding: 0;
}
.article .et-hero .et-hero-title::after {
  content: none;
}
.et-hero-lead {
  font-size: 19px;
  max-width: 560px;
  margin-bottom: 40px !important;
  color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 767px) {
  .et-hero {
    padding-top: 72px;
    padding-bottom: 96px;
    background-image:
      linear-gradient(180deg, rgba(20, 38, 64, 0.85) 0%, rgba(20, 38, 64, 0.7) 60%, rgba(20, 38, 64, 0.5) 100%),
      url("images/home-hero-photo.jpg");
    background-position: center, center 30%;
  }
  .et-hero-lead { font-size: 17px; }
}

/* 濃い背景の上のボタン：藍→白、枠線→白 */
.et-hero .wp-block-button.et-btn-primary .wp-block-button__link,
.et-band-dark .wp-block-button.et-btn-primary .wp-block-button__link {
  background-color: #FFFFFF;
  color: var(--et-primary);
}
.et-hero .wp-block-button.et-btn-primary .wp-block-button__link:hover,
.et-band-dark .wp-block-button.et-btn-primary .wp-block-button__link:hover {
  background-color: var(--et-info-bg);
  color: var(--et-primary-hover);
}
.et-hero .wp-block-button.et-btn-outline .wp-block-button__link,
.et-band-dark .wp-block-button.et-btn-outline .wp-block-button__link {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.et-hero .wp-block-button.et-btn-outline .wp-block-button__link:hover,
.et-band-dark .wp-block-button.et-btn-outline .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

/* 青海波の帯 */
.et-band {
  background-color: var(--et-info-bg);
  background-image: var(--et-seigaiha-light);
  background-size: 40px 20px;
  padding-top: var(--et-space-section);
  padding-bottom: var(--et-space-section);
}
.et-band-dark {
  background-color: var(--et-primary);
  background-image: var(--et-seigaiha-dark);
  color: #FFFFFF;
  margin-top: var(--et-space-section);
}

.et-section {
  padding: var(--et-space-section) 0 0;
}
@media (max-width: 1231px) {
  .et-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 巨大な英字の見出し（EXPLORE / NEW / STAY / FOLLOW） */
.article h2.et-display {
  font-size: clamp(64px, 12vw, 160px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--et-primary);
  margin: 0;
  padding: 0;
}
.article h2.et-display::after {
  content: none;
}
.et-band-dark h2.et-display,
.article .et-band-dark h2.et-display {
  color: #FFFFFF;
}
.et-display-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--et-subtext);
  margin: 16px 0 48px !important;
}
.et-display-sub::before {
  content: "";
  width: 32px;
  height: 2px;
  background-color: var(--et-accent);
}
.et-band-dark .et-display-sub {
  color: rgba(255, 255, 255, 0.85);
}

/* 写真タイル（カテゴリの入口） */
.et-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 220px;
  gap: 16px;
}
.et-tiles > .et-tile {
  margin: 0 !important;
}
.et-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 24px;
  border-radius: var(--et-radius-card);
  overflow: hidden;
  color: #FFFFFF;
  background-color: var(--et-primary);
  background-image: var(--et-seigaiha-dark);
  background-size: 40px 20px;
  background-position: center;
}
/* 自分たちの写真を入れたタイル（渋谷 2026-10） */
.et-tile.et-tile-areas {
  background-image: url("images/illustrations/interest-free.jpg");
  background-size: cover;
  background-position: center 30%;
}
.et-tile.et-tile-food {
  background-image: url("images/illustrations/interest-food.jpg");
  background-size: cover;
  background-position: center 45%;
}
.et-tile.et-tile-plan {
  background-image: url("images/illustrations/interest-konbini.jpg");
  background-size: cover;
  background-position: center 30%;
}
.et-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 22, 38, 0.8), rgba(12, 22, 38, 0.05) 65%);
  transition: background-color 0.2s ease;
}
.et-tile:hover::before {
  background-color: rgba(12, 22, 38, 0.2);
}
.et-tile > * {
  position: relative;
  margin: 0 !important;
}
.et-tiles > .et-tile:first-child {
  grid-row: span 2;
}
.et-tile-kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  padding: 2px 8px;
}
.article .et-tile h3 {
  font-size: 24px;
  line-height: 1.2;
  margin-top: 8px !important;
  color: #FFFFFF;
}
.article .et-tiles > .et-tile:first-child h3 {
  font-size: 36px;
}
.et-tile h3 a {
  color: #FFFFFF;
  text-decoration: none;
}
/* タイル全体をクリックできるようにする */
.et-tile h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.et-tile h3 a:focus-visible {
  outline: none;
}
.et-tile h3 a:focus-visible::after {
  outline: 3px solid #FFFFFF;
  outline-offset: -6px;
  border-radius: var(--et-radius-card);
}
.et-tile:has(a:hover) h3 a {
  text-decoration: underline;
}
@media (max-width: 1023px) {
  .et-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 180px;
  }
  .et-tiles > .et-tile:first-child {
    grid-row: span 1;
    grid-column: 1 / -1;
  }
  .article .et-tiles > .et-tile:first-child h3 { font-size: 28px; }
}
@media (max-width: 599px) {
  .et-tiles { gap: 12px; grid-auto-rows: 160px; }
  .et-tile { padding: 16px; }
  .article .et-tile h3 { font-size: 19px; }
}

/* SNSアイコン（FOLLOW の帯） */
.et-social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
}
.article .et-social li {
  list-style: none;
  margin: 0;
}
.et-social a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  text-decoration: none;
}
.et-social [class^="icon-"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: var(--et-primary);
  font-size: 32px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.et-social a:hover [class^="icon-"] {
  background-color: var(--et-info-bg);
  transform: translateY(-2px);
}
.et-social a:focus-visible {
  outline: none;
}
.et-social a:focus-visible [class^="icon-"] {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
}
.et-social-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 東京の天気（[et_weather]） */
.et-weather-band {
  background-color: var(--et-surface);
  border-bottom: 1px solid var(--et-border);
  padding-top: 32px;
  padding-bottom: 24px;
}
.et-weather {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px 40px;
  align-items: center;
}
.et-weather p {
  margin: 0;
}
.et-weather-kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--et-subtext);
}
.et-weather-now {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.et-weather-now .et-weather-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  color: var(--et-primary);
}
.et-weather-label {
  font-family: var(--et-font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
}
.et-weather-temps {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px !important;
}
.et-weather-max {
  font-family: var(--et-font-heading);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
}
.et-weather-min {
  font-size: 17px;
  color: var(--et-subtext);
}
.et-weather-pop {
  font-size: 13px;
  font-weight: 600;
  color: var(--et-primary);
  background-color: var(--et-info-bg);
  border-radius: 4px;
  padding: 2px 8px;
}
.et-weather-week {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.et-weather-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 4px;
  border-radius: var(--et-radius);
  font-size: 14px;
  text-align: center;
}
.et-weather-day.is-today {
  background-color: var(--et-info-bg);
}
.et-weather-dow {
  font-weight: 600;
}
.et-weather-date,
.et-weather-day-pop {
  font-size: 13px;
  color: var(--et-subtext);
}
.et-weather-day-icon {
  color: var(--et-primary);
  margin: 4px 0;
}
.et-weather-day-icon .et-weather-icon {
  width: 30px;
  height: 30px;
}
.et-weather-range {
  font-size: 15px;
  color: var(--et-subtext);
}
.et-weather-range strong {
  color: var(--et-text);
}
.et-weather-source {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--et-subtext);
}
.et-weather-source a {
  color: var(--et-subtext);
}
@media (max-width: 1023px) {
  .et-weather {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 767px) {
  /* スマホでは7日分を横スクロール */
  .et-weather-week {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px 4px;
  }
  .et-weather-day {
    flex: 0 0 72px;
    scroll-snap-align: start;
  }
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 文章＋宿カードの2カラム */
.et-split {
  gap: 48px;
  align-items: center;
}
.et-stay-card {
  background-color: var(--et-surface);
  border-radius: var(--et-radius-card);
  box-shadow: var(--et-shadow-card);
  overflow: hidden;
  padding-bottom: 24px;
}
.et-stay-card > * {
  margin-left: 24px !important;
  margin-right: 24px !important;
}
.et-stay-card > .wp-block-image {
  margin: 0 0 20px !important;
}
.et-stay-card > .wp-block-image img {
  border-radius: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.article .et-stay-card h3 {
  margin-top: 8px;
}

/* 目的別の入口 */
.et-entry-grid {
  gap: var(--et-space-element);
}
.et-entry {
  background-color: var(--et-surface);
  border-radius: var(--et-radius-card);
  box-shadow: var(--et-shadow-card);
  padding: 24px;
}
.article .et-entry h3 {
  margin: 8px 0 8px;
}
.et-entry h3 a {
  color: var(--et-text);
  text-decoration: none;
}
.et-entry h3 a:hover {
  color: var(--et-primary);
  text-decoration: underline;
}
.et-entry-label {
  display: inline-block;
  background-color: var(--et-info-bg);
  color: var(--et-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 8px;
  margin: 0 !important;
}

/* 新着ガイド（最新の投稿ブロック） */
.et-latest.wp-block-latest-posts.is-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--et-space-element);
  padding: 0;
  margin: 0 0 32px;
}
.et-latest.wp-block-latest-posts.is-grid li {
  width: auto;
  margin: 0;
  background-color: var(--et-surface);
  border-radius: var(--et-radius-card);
  box-shadow: var(--et-shadow-card);
  overflow: hidden;
  padding-bottom: 16px;
}
.et-latest .wp-block-latest-posts__featured-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}
.et-latest .wp-block-latest-posts__post-title {
  display: block;
  padding: 16px 16px 4px;
  font-family: var(--et-font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  color: var(--et-text);
  text-decoration: none;
}
.et-latest .wp-block-latest-posts__post-date {
  padding: 0 16px;
  font-size: 13px;
  color: var(--et-subtext);
}
@media (max-width: 1023px) {
  .et-latest.wp-block-latest-posts.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .et-latest.wp-block-latest-posts.is-grid { grid-template-columns: minmax(0, 1fr); }
}

/* エリア・ツアー1件分のカード */
.et-area-card {
  background-color: var(--et-surface);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius-card);
  box-shadow: var(--et-shadow-card);
  padding: 32px;
  margin-bottom: var(--et-space-element);
}
.article .et-area-card h3 {
  margin-top: 8px;
}
@media (max-width: 599px) {
  .et-area-card { padding: 24px 16px; }
}

/* 固定ページの導入文・許可番号 */
.et-lead {
  font-size: 19px;
}
.et-license {
  margin-top: 48px !important;
  font-size: 13px;
  color: var(--et-subtext);
}

/* 制作中メモ（公開前に全部消す） */
.et-todo {
  border: 2px dashed var(--et-accent);
  border-radius: var(--et-radius);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--et-accent-hover);
  background-color: var(--et-surface);
}

/* カテゴリページの説明文 */
.et-archive-lead {
  max-width: var(--et-content);
  font-size: 18px;
  color: var(--et-subtext);
  margin: 8px 0 32px;
}
.et-archive-lead p {
  margin: 0;
}

/************************************
** 記事カード（Cocoon設定で「縦型カード3列」を選ぶ前提）
************************************/
/* 並び：PC 3列 / タブレット 2列 / スマホ 1列 */
.list.ect-vertical-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--et-space-element);
}
.list.ect-vertical-card > .entry-card-wrap {
  width: auto;
  margin: 0;
}
@media (max-width: 1023px) {
  .list.ect-vertical-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  .list.ect-vertical-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ect-vertical-card .entry-card-wrap,
.ect-vertical-card .a-wrap {
  background-color: var(--et-surface);
  border-radius: var(--et-radius-card);
  box-shadow: var(--et-shadow-card);
  overflow: hidden;
  padding: 0;
  transition: box-shadow 0.2s ease;
}
.ect-vertical-card .entry-card-wrap:hover {
  background-color: var(--et-surface);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.ect-vertical-card .entry-card-content {
  padding: 16px 16px 20px;
}
.entry-card-thumb img,
.card-thumb img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}
.entry-card-title {
  font-size: 19px;
  color: var(--et-text);
}
.entry-card-snippet,
.entry-card-meta {
  font-size: 14px;
  color: var(--et-subtext);
}

/* カテゴリラベル（FOOD / AREAS など） */
.cat-label {
  border: 0;
  border-radius: 4px;
  background-color: var(--et-info-bg);
  color: var(--et-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  top: 8px;
  left: 8px;
}

/************************************
** 目次
************************************/
.toc {
  border: 0;
  border-radius: var(--et-radius);
  background-color: var(--et-info-bg);
  padding: 20px 24px;
}
/* 2026-11-08 目次を本文と同じ幅・左揃えに（Cocoon の「中央」設定では本文幅の中で小さく浮いていたため） */
.article .toc {
  display: block;
  width: auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}
.article .toc .toc-title { text-align: left; }
.toc-title {
  font-family: var(--et-font-heading);
  font-weight: 700;
  color: var(--et-primary);
}

/************************************
** フォーム（Contact）
************************************/
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  font-family: var(--et-font-body);
  font-size: 16px;
  color: var(--et-text);
  background-color: var(--et-surface);
  border: 1px solid var(--et-input-border);
  border-radius: var(--et-radius);
  min-height: var(--et-tap-min);
  padding: 10px 14px;
}
textarea {
  min-height: 160px;
}
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--et-primary);
  outline-offset: 0;
}
input[type="checkbox"] {
  accent-color: var(--et-primary);
  width: 20px;
  height: 20px;
}
input[type="submit"],
button[type="submit"] {
  min-height: var(--et-tap-min);
  padding: 14px 28px;
  border: 0;
  border-radius: var(--et-radius);
  background-color: var(--et-primary);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
}
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--et-primary-hover);
}

/************************************
** 404ページ
************************************/
.error404 .main {
  float: none;
  width: 100%;
  max-width: calc(var(--et-content) + 64px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 64px 32px 96px;
}
.error404 .entry-title::before {
  content: "404";
  display: block;
  font-size: clamp(96px, 18vw, 200px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--et-primary);
  margin-bottom: 16px;
}
.et-404-lead {
  font-size: 19px;
  margin-bottom: 32px !important;
}
.et-404-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.et-404-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--et-tap-min);
  padding: 12px 24px;
  border: 2px solid var(--et-primary);
  border-radius: var(--et-radius);
  font-weight: 600;
  text-decoration: none;
}
.et-404-link:first-child {
  background-color: var(--et-primary);
  color: #FFFFFF;
}
.et-404-link:hover {
  background-color: var(--et-info-bg);
  color: var(--et-primary-hover);
}
.et-404-link:first-child:hover {
  background-color: var(--et-primary-hover);
  color: #FFFFFF;
}
@media (max-width: 767px) {
  .error404 .main { padding: 40px 16px 64px; }
}

/************************************
** お問い合わせフォーム（Contact Form 7）
************************************/
.et-contact-form {
  background-color: var(--et-surface);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius-card);
  padding: 32px;
  margin-top: var(--et-space-element);
}
@media (max-width: 599px) {
  .et-contact-form { padding: 20px 16px; }
}
.et-form-field {
  margin-bottom: 20px;
}
.et-form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.et-required {
  font-weight: 400;
  font-size: 13px;
  color: var(--et-subtext);
}
.et-contact-form input[type="text"],
.et-contact-form input[type="email"],
.et-contact-form select,
.et-contact-form textarea {
  width: 100%;
  box-sizing: border-box;
}
.et-form-consent .wpcf7-list-item {
  margin: 0;
}
.et-form-consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
}
.et-form-consent input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
}
.et-form-submit {
  margin-top: 24px;
}
.et-contact-form .wpcf7-not-valid-tip {
  font-size: 14px;
  color: var(--et-accent-hover);
  margin-top: 4px;
}
.et-contact-form .wpcf7-response-output {
  margin: 20px 0 0 !important;
  border-radius: var(--et-radius);
  padding: 12px 16px !important;
}

/************************************
** フッター
************************************/
.footer {
  border-top: 1px solid var(--et-border);
}
.footer a {
  color: var(--et-primary);
}
.copyright {
  font-size: 13px;
  color: var(--et-subtext);
}

/* トップへ戻るボタン */
.go-to-top-button {
  background-color: var(--et-primary);
  color: #FFFFFF;
  border-radius: var(--et-radius);
}

/************************************
** アニメーション（軽いフェードインのみ）
************************************/
.et-fade-in {
  animation: et-fade-in 0.5s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Guides ページ：カテゴリごとの全記事リスト */
.et-all-guides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.et-all-guides-cat {
  background: var(--et-surface, #FFFFFF);
  border: 1px solid var(--et-border);
  border-radius: 12px;
  padding: 20px 24px;
}
.article .et-all-guides-cat h3 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 18px;
}
.article .et-all-guides-cat h3 a {
  color: var(--et-primary);
  text-decoration: none;
}
.article ul.et-guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.article ul.et-guide-list li {
  padding: 8px 0;
  border-top: 1px solid var(--et-border);
  font-size: 15px;
  line-height: 1.5;
}
.article ul.et-guide-list li:first-child {
  border-top: 0;
}
.article ul.et-guide-list a {
  color: var(--et-text, inherit);
  text-decoration: none;
}
.article ul.et-guide-list a:hover {
  color: var(--et-accent);
  text-decoration: underline;
}
@media (max-width: 834px) {
  .et-all-guides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  .et-all-guides {
    grid-template-columns: 1fr;
  }
}

/* 自分たちの写真（記事内） */
.article .et-photo,
.article .et-photo-row {
  margin: 32px 0;
}
.article .et-photo img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--et-radius-card);
}
.article .et-photo-row .wp-block-image img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--et-radius);
}
.article .et-photo figcaption,
.article .et-photo-row figcaption {
  font-size: 13px;
  color: var(--et-subtext);
  text-align: left;
}
.article .et-photo-row .wp-block-image figcaption {
  position: static;
  background: none;
  color: var(--et-subtext);
  padding: 6px 0 0;
  max-height: none;
  font-size: 13px;
}
.article .et-photo-row > .blocks-gallery-caption {
  margin-top: 4px;
}

/* 2列表示のとき：最後のタイルが1枚だけ余るときは横いっぱいに */
@media (max-width: 1023px) {
  .et-tiles > .et-tile:last-child:nth-child(even) {
    grid-column: 1 / -1;
  }
}

/* Quick answer（記事冒頭の結論） */
.article .et-quick-answer {
  background: var(--et-info-bg);
  border-left: 4px solid var(--et-primary);
  border-radius: var(--et-radius);
  padding: 20px 24px;
  margin: 24px 0 32px;
}
.article .et-quick-answer > * {
  margin: 0 0 8px !important;
}
.article .et-quick-answer > *:last-child {
  margin-bottom: 0 !important;
}
.article .et-quick-answer-label {
  font-family: var(--et-font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--et-primary);
}

/* 調べて書いた記事の注記（ホテル記事の選定基準など） */
.article .et-note {
  background: var(--et-info-bg);
  border-radius: var(--et-radius);
  padding: 14px 18px;
  font-size: 15px;
  color: var(--et-text);
}

/* 3列以上の比較表は1列目も折り返す（ホテル名などが隣の列に重ならないように） */
.article .et-compare-table table:has(th:nth-child(3)) td:first-child {
  white-space: normal;
}

/* AIイラストの表記 */
.et-ai-label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--et-subtext);
  text-align: right;
}
.et-photo-credit {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--et-subtext);
  text-align: right;
}
.et-photo-credit a { color: inherit; text-decoration: underline; }
.article .et-ai-caption {
  font-size: 12px;
  color: var(--et-subtext);
}

/************************************
** トップページ v2（japan-guide.com を参考にした構成、2026-10-17）
** ヒーロー → 季節の帯 → Top guides → Areas（横スクロール）→ Plan your trip → Find your interest → Day trips → 天気 → New → Stay → Follow
************************************/
/* ヒーロー：見出しを大文字の特大から、写真が主役の落ち着いた大きさに */
.et-hero.et-hero-v2 {
  padding-top: 120px;
  padding-bottom: 150px;
  background-image:
    linear-gradient(90deg, rgba(20, 38, 64, 0.85) 0%, rgba(20, 38, 64, 0.55) 45%, rgba(20, 38, 64, 0.1) 100%),
    url("images/home-hero-photo.jpg");
}
.article .et-hero-v2 .et-hero-title {
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  max-width: 14ch;
  margin-bottom: 20px;
}
.et-hero-v2 .et-hero-lead {
  font-size: 18px;
  max-width: 520px;
  margin-bottom: 32px !important;
}
.et-kicker-dot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  font-size: 16px !important;
}
.et-kicker-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--et-accent);
}
.wp-block-button.et-btn-pill .wp-block-button__link {
  border-radius: 999px;
  padding: 12px 24px;
}
@media (max-width: 767px) {
  .et-hero.et-hero-v2 {
    padding-top: 64px;
    padding-bottom: 120px;
    background-image:
      linear-gradient(180deg, rgba(20, 38, 64, 0.8) 0%, rgba(20, 38, 64, 0.6) 60%, rgba(20, 38, 64, 0.45) 100%),
      url("images/home-hero-photo.jpg");
  }
}

/* 季節の帯：ヒーローの下端に重ねる白いカード（季節ごとに文言を変える） */
.entry-content > .et-season-wrap {
  position: relative;
  z-index: 2;
  margin-top: -64px !important;
  padding: 0 16px;
}
.et-season {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background-color: var(--et-surface);
  border-radius: var(--et-radius-card);
  box-shadow: 0 6px 24px rgba(12, 22, 38, 0.12);
  overflow: hidden;
}
.et-season-main {
  padding: 20px 24px;
}
.et-season-title {
  font-family: var(--et-font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--et-text);
  margin: 0 0 8px !important;
}
.et-season-title span {
  color: var(--et-accent);
}
.et-season-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0 !important;
  padding: 0 !important;
}
.et-season-links li {
  margin: 0;
}
.et-season-links a,
.et-season-more {
  font-size: 15px;
  font-weight: 600;
  color: var(--et-text);
  text-decoration: none;
}
.et-season-links a:hover,
.et-season-more:hover {
  color: var(--et-accent);
  text-decoration: underline;
}
.et-season-more {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-left: 1px solid var(--et-border);
  background-color: var(--et-info-bg);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .et-season { flex-direction: column; }
  .et-season-links { flex-direction: column; }
  .et-season-links a { display: inline-block; padding: 6px 0; }
  .et-season-more { border-left: 0; border-top: 1px solid var(--et-border); padding: 14px 24px; }
}

/* セクションの見出し（左に見出し、右に「すべて見る」） */
.et-home-section {
  padding-top: 72px;
}
.et-home-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.article .et-home-head h2.et-home-h {
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.2;
  color: var(--et-text);
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
}
.article .et-home-head h2.et-home-h::after {
  content: none;
}
.et-home-more {
  font-size: 15px;
  font-weight: 600;
  color: var(--et-primary);
  text-decoration: none;
  white-space: nowrap;
}
.et-home-more:hover {
  color: var(--et-accent);
  text-decoration: underline;
}
.et-home-sub {
  margin: -12px 0 20px !important;
  color: var(--et-subtext);
  font-size: 16px;
}

/* カード共通 */
.et-cards {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.et-card {
  margin: 0 !important;
}
.et-card > a {
  display: flex;
  color: var(--et-text);
  text-decoration: none;
}
.et-card-img {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--et-radius-card);
  overflow: hidden;
  background-color: var(--et-primary);
  background-image: var(--et-seigaiha-dark);
  background-size: 40px 20px;
}
.et-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.et-card > a:hover .et-card-img img {
  transform: scale(1.03);
}
.et-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.et-card-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--et-accent);
}
.et-card-title {
  font-family: var(--et-font-heading);
  font-weight: 700;
  line-height: 1.3;
}
.et-card > a:hover .et-card-title {
  text-decoration: underline;
}
.et-card-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--et-subtext);
}

/* Top guides：左に大きいカード、右に小さいカード4枚 */
.wp-block-columns.et-top-grid {
  gap: 32px;
  margin-bottom: 0;
}
.et-cards-feature .et-card > a {
  flex-direction: column;
  gap: 14px;
}
.et-cards-feature .et-card-title {
  font-size: clamp(22px, 2.4vw, 28px);
}
.et-cards-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.et-cards-list .et-card > a {
  align-items: center;
  gap: 16px;
}
.et-cards-list .et-card-img {
  flex: 0 0 168px;
  border-radius: var(--et-radius);
}
.et-cards-list .et-card-title {
  font-size: 17px;
}
@media (max-width: 781px) {
  .wp-block-columns.et-top-grid { gap: 24px; }
  .et-cards-list .et-card-img { flex-basis: 128px; }
}

/* Areas / Day trips：横スクロールのカード */
.et-carousel {
  position: relative;
}
.et-cards-area {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 4);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px !important;
}
.et-cards-area::-webkit-scrollbar {
  display: none;
}
.et-cards-area:focus-visible {
  outline: 3px solid var(--et-primary);
  outline-offset: 4px;
}
.et-cards-area .et-card {
  scroll-snap-align: start;
}
.et-cards-area .et-card > a {
  flex-direction: column;
  gap: 10px;
}
.et-cards-area .et-card-title {
  font-size: 19px;
}
.et-carousel-btn {
  position: absolute;
  top: calc((100% - 80px) / 2 - 22px);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background-color: var(--et-surface);
  color: var(--et-text);
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(12, 22, 38, 0.2);
  cursor: pointer;
  z-index: 2;
}
.et-carousel-btn:hover {
  background-color: var(--et-info-bg);
}
.et-carousel-btn[hidden] {
  display: none;
}
.et-carousel-prev { left: -14px; }
.et-carousel-next { right: -14px; }
@media (max-width: 1023px) {
  .et-cards-area { grid-auto-columns: calc((100% - 32px) / 2.6); }
}
@media (max-width: 599px) {
  .et-cards-area { grid-auto-columns: 72%; }
  .et-carousel-btn { display: none; }
}

/* Plan your trip：アイコン付きの6枚 */
.et-plan {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 !important;
  padding: 0 !important;
}
.et-plan li {
  margin: 0;
}
.et-plan a {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 20px;
  background-color: var(--et-surface);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius-card);
  color: var(--et-text);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.et-plan a:hover {
  border-color: var(--et-primary);
  box-shadow: var(--et-shadow-card);
}
.et-plan svg {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 9px;
  border-radius: 50%;
  background-color: var(--et-info-bg);
  fill: none;
  stroke: var(--et-primary);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.et-plan strong {
  display: block;
  font-family: var(--et-font-heading);
  font-size: 18px;
  line-height: 1.3;
}
.et-plan small {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  color: var(--et-subtext);
}
.et-plan a:hover strong {
  text-decoration: underline;
}
@media (max-width: 1023px) {
  .et-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .et-plan { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .et-plan a { padding: 14px 16px; }
}

/* Find your interest：写真（無いものは青海波）のタイル */
.et-interests {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
}
.et-interest {
  margin: 0;
}
.et-interest a {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 3 / 2;
  padding: 14px 16px;
  border-radius: var(--et-radius-card);
  overflow: hidden;
  color: #FFFFFF;
  font-family: var(--et-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  background-color: var(--et-primary);
  background-image: var(--et-seigaiha-dark);
  background-size: 40px 20px;
  background-position: center;
}
.et-interest a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 22, 38, 0.78), rgba(12, 22, 38, 0) 60%);
  transition: background-color 0.2s ease;
}
.et-interest a:hover::before {
  background-color: rgba(12, 22, 38, 0.2);
}
.et-interest a span {
  position: relative;
}
.et-interest a:hover span {
  text-decoration: underline;
}
.et-interest-food a {
  background-image: url("images/illustrations/interest-food.jpg");
  background-size: cover;
  background-position: center 45%;
}
.et-interest-konbini a {
  background-image: url("images/illustrations/interest-konbini.jpg");
  background-size: cover;
  background-position: center 30%;
}
.et-interest-free a {
  background-image: url("images/illustrations/interest-free.jpg");
  background-size: cover;
  background-position: center 40%;
}
@media (max-width: 1023px) {
  .et-interests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 天気の帯・New・Stay の間隔をそろえる */
.entry-content > .et-weather-band.et-bleed {
  margin-top: 72px !important;
}
.et-home-section .et-latest.wp-block-latest-posts.is-grid {
  margin-top: 0;
}
.et-season-more { gap: 6px; }
/* 写真のクレジットは季節の帯に隠れないよう右上に */
.et-hero-v2 .et-hero-credit {
  top: 12px;
  bottom: auto;
}
.wp-block-button.et-btn-pill .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.article .et-band-dark .et-home-head h2.et-home-h { color: #FFFFFF; }
.et-band-dark .et-home-sub { color: rgba(255, 255, 255, 0.85); margin-bottom: 32px !important; }
.et-band-dark:has(.et-home-head) { padding-top: 64px; padding-bottom: 64px; }

/* フッターのサイトマップ（ウィジェット：カスタムHTML） */
.et-footer-map h3 {
  font-family: var(--et-font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--et-text);
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
}
.et-footer-map ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.et-footer-map li {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
}
.et-footer-map a {
  font-size: 15px;
  color: var(--et-subtext);
  text-decoration: none;
}
.et-footer-map a:hover {
  color: var(--et-primary);
  text-decoration: underline;
}

/************************************
** 予約検索ボックス [et_booking]（2026-10-17）
************************************/
.et-book {
  max-width: 480px;
}
.et-book-title {
  font-family: var(--et-font-heading);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--et-text);
  margin: 0 0 20px !important;
}
.et-book-title span {
  color: var(--et-accent);
}
.et-book-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.et-book-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--et-subtext);
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
}
.et-book-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 56px;
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius-card);
  background-color: var(--et-surface);
  transition: border-color 0.2s ease;
}
.et-book-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.et-book-tab:hover .et-book-icon {
  border-color: var(--et-primary);
}
.et-book-tab[aria-selected="true"] {
  color: var(--et-text);
  font-weight: 700;
}
.et-book-tab[aria-selected="true"] .et-book-icon {
  border-color: var(--et-accent);
  background-color: var(--et-accent);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(200, 65, 42, 0.25);
}
.et-book-tab:focus-visible {
  outline: none;
}
.et-book-tab:focus-visible .et-book-icon {
  outline: 3px solid var(--et-primary);
  outline-offset: 2px;
}
.et-book-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  padding: 20px;
  background-color: #F4F3EF;
  border-radius: var(--et-radius-card);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  margin: 0 !important;
}
.et-book-panel[hidden] {
  display: none;
}
.et-book-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--et-subtext);
}
.et-book-wide,
.et-book-submit,
.et-book-ourstay > * {
  grid-column: 1 / -1;
}
.et-book-field select,
.et-book-field input {
  width: 100%;
  min-height: var(--et-tap-min);
  padding: 10px 14px;
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius);
  background-color: var(--et-surface);
  color: var(--et-text);
  font-size: 17px;
  font-weight: 400;
  font-family: var(--et-font-body);
}
.et-book-field select:focus,
.et-book-field input:focus {
  outline: 2px solid var(--et-primary);
  outline-offset: 1px;
  border-color: var(--et-primary);
}
.et-book-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  background-color: var(--et-accent);
  color: #FFFFFF !important;
  font-family: var(--et-font-heading);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.et-book-submit:hover {
  background-color: var(--et-accent-hover);
}
.et-book-ourstay p {
  margin: 0 !important;
  font-size: 16px;
  line-height: 1.6;
}
.et-book-sublink {
  justify-self: center;
  font-size: 15px;
  font-weight: 600;
}
.et-book-note {
  margin: 10px 4px 0 !important;
  font-size: 13px;
  line-height: 1.5;
  color: var(--et-subtext);
}
@media (max-width: 599px) {
  .et-book-tabs { gap: 8px; }
  .et-book-icon { width: 56px; height: 50px; }
  .et-book-panel { padding: 16px; }
}

/* トップページ：予約ボックス＋自分たちの宿の2列 */
.wp-block-columns.et-book-row {
  gap: 48px;
  align-items: flex-start;
}
.article h2.et-book-title {
  background: none;
  border: 0;
  padding: 0;
}
.article h2.et-book-title::after {
  content: none;
}
.et-book-help {
  margin-top: 14px !important;
  font-size: 15px;
  color: var(--et-subtext);
}
.et-book button.et-book-submit,
.et-book a.et-book-submit {
  background-color: var(--et-accent);
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
}
.et-book button.et-book-submit:hover,
.et-book a.et-book-submit:hover {
  background-color: var(--et-accent-hover);
}
/* 記事の中に置いたとき */
.entry-content > .et-book {
  margin: 48px 0;
}
@media (max-width: 599px) {
  .et-book-field select,
  .et-book-field input { font-size: 16px; padding: 10px; }
}

/* Find your interest：AIイラスト（2026-10-17、ChatGPTで作成・下に表記） */
.et-interest-temples a,
.et-interest-onsen a,
.et-interest-shows a,
.et-interest-seasons a,
.et-interest-kids a {
  background-size: cover;
  background-position: center;
}
.et-interest-temples a { background-image: url("images/illustrations/interest-temples.jpg"); }
.et-interest-onsen a { background-image: url("images/illustrations/interest-onsen.jpg"); }
.et-interest-shows a { background-image: url("images/illustrations/interest-shows.jpg"); }
.et-interest-seasons a { background-image: url("images/illustrations/interest-seasons.jpg"); }
.et-interest-kids a { background-image: url("images/illustrations/interest-kids.jpg"); }
.et-interests-note {
  margin: 10px 0 0 !important;
  font-size: 13px;
  color: var(--et-subtext);
}
/* デザインの決まり：予約・検索ボタンは朱、選択中のタブは藍（2026-11-09 変更。以前は 2026-10-17 の「朱は自分たちの宿だけ」） */
.et-book button.et-book-submit {
  background-color: var(--et-accent);
}
.et-book button.et-book-submit:hover {
  background-color: var(--et-accent-hover);
}
.et-book-tab[aria-selected="true"] .et-book-icon {
  border-color: var(--et-primary);
  background-color: var(--et-primary);
  box-shadow: 0 4px 12px rgba(31, 58, 95, 0.25);
}

/* 2026-10-17：サイトに自分たちの写真を使わない決定 → ヒーロー・タイルはAIイラスト */
.et-hero.et-hero-v2 { background-position: center, 60% 55%; }
@media (max-width: 767px) {
  .et-hero.et-hero-v2 { background-position: center, 72% center; }
}

/* Book ページ：ガイドへのリンクカード（2026-10-17） */
.et-book-links {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 0 0 32px !important;
  padding: 0 !important;
}
.et-book-links li { margin: 0; }
.et-book-links a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px;
  background-color: var(--et-surface);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius-card);
  color: var(--et-text);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.et-book-links a:hover {
  border-color: var(--et-primary);
  box-shadow: var(--et-shadow-card);
}
.et-book-links strong {
  font-family: var(--et-font-heading);
  font-size: 17px;
  color: var(--et-primary);
}
.et-book-links small {
  font-size: 14px;
  color: var(--et-subtext);
}

/* 東京のエリア地図（自作の模式図）[et_area_map] */
.et-area-map-wrap {
  margin: 0 0 32px;
  padding: 16px;
  background-color: var(--et-surface);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius-card);
}
.et-area-map { display: block; width: 100%; height: auto; }
.et-map-yamanote { fill: var(--et-bg); stroke: var(--et-primary); stroke-opacity: 0.3; stroke-width: 6; }
.et-map-bay { fill: var(--et-info-bg); }
.et-map-arrow { stroke: var(--et-border); stroke-width: 2; stroke-dasharray: 4 4; fill: none; }
.et-map-note { font-size: 16px; fill: var(--et-subtext); font-family: var(--et-font-body); }
.et-map-pt circle { fill: var(--et-surface); stroke: var(--et-primary); stroke-width: 3; }
.et-map-pt text { font-family: var(--et-font-heading); font-size: 21px; font-weight: 700; fill: var(--et-primary); }
.et-map-pt:hover circle, .et-map-pt:focus circle { fill: var(--et-accent); stroke: var(--et-accent); }
.et-map-pt:hover text, .et-map-pt:focus text { fill: var(--et-accent); text-decoration: underline; }
.et-map-pt:focus { outline: none; }
.et-area-map-wrap figcaption { margin-top: 8px; font-size: 13px; color: var(--et-subtext); text-align: center; }
@media (max-width: 599px) {
  .et-area-map-wrap { padding: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .et-area-map { min-width: 640px; }
  .et-area-map-wrap figcaption { position: sticky; left: 0; text-align: left; }
}
.et-map-swipe { display: none; }
@media (max-width: 599px) { .et-map-swipe { display: inline; } }

/* Design refinement: compact editorial layout, 2026-10-17. */
.et-hero.et-hero-v2 { padding-top:64px; padding-bottom:100px; }
.article .et-hero-v2 .et-hero-title { font-size:clamp(36px,5vw,60px); max-width:17ch; margin-bottom:16px; }
.et-hero-v2 .et-hero-lead { max-width:480px; margin-bottom:24px!important; }
.entry-content > .et-home-section { padding-top:56px; margin-top:0; }
.et-home-section .et-home-sub { margin-bottom:24px; }
.single-post .eye-catch-wrap { margin:16px auto 20px; }
.single-post .eye-catch img.eye-catch-image { width:100%; height:220px; object-fit:cover; object-position:center; }
.et-book-row > .wp-block-column:first-child { padding:24px; border:1px solid #dce3ea; border-top:4px solid #1F3A5F; border-radius:12px; background:#fff; }
.et-book-row .et-book-title span { color:#1F3A5F; }
.et-book-row .et-book-panel { background:#f4f6f8; box-shadow:none; }
.et-book-row .et-stay-card { border:1px solid #e6ded6; border-top:4px solid #C8412A; box-shadow:none; }
.et-book-row .et-stay-card .et-entry-label { background:#f6eae5; color:#873a2b; }
@media(max-width:767px) {
 .et-hero.et-hero-v2 { padding-top:36px; padding-bottom:90px; }
 .et-hero-v2 .et-hero-lead { font-size:16px; line-height:1.65; }
 .entry-content > .et-home-section { padding-top:36px; }
 .single-post .eye-catch img.eye-catch-image { height:150px; }
 .et-book-row > .wp-block-column:first-child { padding:18px; }
 .wp-block-columns.et-book-row { gap:24px; }
}

.single-post .eye-catch-wrap .eye-catch { display:block; width:100%; }
.single-post .eye-catch-wrap .eye-catch img.eye-catch-image { max-width:100%; width:100%; aspect-ratio:auto; }

/* Japan eSIM の購入先ボックス [et_esim]（2026-10-19） */
.et-esim { margin: 32px 0; padding: 24px; background: #F7F4EA; border: 1px solid #E4DED0; border-radius: 16px; }
.article .et-esim .et-esim-title { margin: 0 0 6px; padding: 0; border: 0; background: none; font-size: 24px; color: #1F3A5F; }
.article .et-esim .et-esim-title::before, .article .et-esim .et-esim-title::after { display: none; }
.article .et-esim .et-esim-sub { margin: 0 0 16px; color: #5B6270; font-size: 15px; line-height: 1.6; }
.article .et-esim ul.et-esim-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.article .et-esim .et-esim-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 14px 16px; background: #fff; border: 1px solid #E4DED0; border-radius: 12px; }
.article .et-esim .et-esim-item::before { display: none; }
.article .et-esim .et-esim-name { margin: 0 0 2px; font-weight: 700; color: #1F3A5F; font-size: 16px; }
.article .et-esim .et-esim-desc { margin: 0; font-size: 14px; line-height: 1.5; color: #5B6270; }
.article .et-esim a.et-esim-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #C8412A; color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.article .et-esim a.et-esim-btn:hover { background: #A8361F; }
.article .et-esim .et-esim-note { margin: 12px 0 0; font-size: 13px; color: #5B6270; }
@media (max-width: 640px) {
  .et-esim { padding: 18px 14px; }
  .article .et-esim .et-esim-item { flex-direction: column; align-items: stretch; }
  .article .et-esim a.et-esim-btn { justify-content: center; }
}

/* 2026-10-20 目次：小見出しの番号を ①②③ にして、大見出しの 1. 2. と区別する */
@counter-style et-circled {
  system: fixed;
  symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩" "⑪" "⑫" "⑬" "⑭" "⑮" "⑯" "⑰" "⑱" "⑲" "⑳";
  suffix: " ";
  fallback: lower-alpha;
}
.toc .toc-content .toc-list ol,
.toc .toc-content .toc-list ol > li { list-style-type: et-circled; }
.toc .toc-content .toc-list ol ol,
.toc .toc-content .toc-list ol ol > li { list-style-type: lower-alpha; }

/************************************
** 2026-11-08 見た目の統一（サイト改善メモ デザイン編 C）
************************************/
/* ① 記事の冒頭写真：比率を固定（パソコン 2:1、スマホ 3:2）、本文の幅いっぱい、写真の中央を残して切る
   パソコンを 3:2 にしないのは、2026-11-03 の「最初の画面に本文が入らない」問題を避けるため（720×360px） */
.single .eye-catch-wrap .eye-catch { max-width: none !important; margin: 0 !important; display: block; width: 100%; }
.single .eye-catch img.eye-catch-image { width: 100% !important; height: auto !important; aspect-ratio: 2 / 1 !important; object-fit: cover !important; object-position: center !important; border-radius: 12px; }
@media (max-width: 767px) {
  .single .eye-catch img.eye-catch-image { aspect-ratio: 3 / 2 !important; }
}
/* ④ 記事の最後の SNS ボタン：黒い四角から紺の丸に（フッターと同じ丸い形） */
.sns-follow .sns-button.follow-button { width: 44px; height: 44px; border-radius: 50% !important; background-color: #1F3A5F !important; color: #FFFFFF !important; font-size: 22px; display: inline-flex; align-items: center; justify-content: center; }
.sns-follow .sns-button.follow-button:hover, .sns-follow .sns-button.follow-button:focus-visible { background-color: #2C4E78 !important; opacity: 1; }
.sns-follow .sns-follow-message { font-family: var(--et-font-heading); font-weight: 700; color: var(--et-primary); }
/* 日付ラベル：スマホで「Last updated: Nov 5, 2026」が途中で折り返さないように、1つずつまとめて折り返す */
.date-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 12px; }
.date-tags .post-date, .date-tags .post-update { white-space: nowrap; margin-left: 0 !important; }
/* 2026-11-08 検索結果ページなどの検索欄：紺のボタンが入力欄より12px下にずれてはみ出していたので、入力欄の高さの中央にそろえる */
.search-box.input-box { position: relative; }
.search-box.input-box .search-submit { top: 50%; bottom: auto; right: 4px; height: 40px; transform: translateY(-50%); }
/* 2026-11-09 予約ボタンの直前に置く「公式料金（確認日つき）」の行 */
.article p.et-price-note { margin: 0 0 12px; padding: 10px 14px; background: var(--et-info-bg); border-radius: 8px; font-size: 15px; line-height: 1.6; }