@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ（大人の自由旅倶楽部カスタマイズ）
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
Text Domain: otona
*/

/************************************
** 子テーマ用のスタイルを書く
** 大人の自由旅倶楽部
** スマホファースト：基本はスマホ、min-width で広い画面を上書き
************************************/

/* ---------- デザイントークン ---------- */
:root{
  --ot-bg: #FAF8F4;          /* アイボリー（背景） */
  --ot-surface: #FFFFFF;     /* 白（カード・記事面） */
  --ot-text: #282828;        /* チャコール（本文） */
  --ot-muted: #6B645C;       /* 補足テキスト */
  --ot-greige: #D9D1C6;      /* グレージュ */
  --ot-greige-soft: #EFEAE3; /* 淡いグレージュ（面） */
  --ot-line: #E4DED4;        /* 罫線 */
  --ot-accent: #7F6640;      /* くすみゴールド（文字用・コントラスト4.5以上） */
  --ot-accent-soft: #C9B48E; /* くすみゴールド（装飾用） */
  --ot-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --ot-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --ot-radius: 2px;
  --ot-shadow: 0 1px 3px rgba(40, 40, 40, .06);
  --ot-wrap: 1120px;
  --ot-gutter: 20px;
  --ot-section: 72px;
}

/* ---------- ベース ---------- */
html, body{
  overflow-x: clip;
}
body.body{
  background-color: var(--ot-bg);
  color: var(--ot-text);
  font-family: var(--ot-sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .03em;
  -webkit-font-smoothing: antialiased;
}
a{
  color: var(--ot-text);
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
a:hover{
  color: var(--ot-accent);
}
img{
  height: auto;
}
h1, h2, h3, h4,
.entry-title, .archive-title, .ot-hero__brand, .ot-hero__copy, .site-name-text{
  font-family: var(--ot-serif);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.5;
}

/* ---------- レイアウト ---------- */
.content{
  margin-top: 0;
}
.content-in.wrap,
.header-in.wrap,
.navi-in.wrap,
.footer-in.wrap{
  width: auto;
  max-width: var(--ot-wrap);
  padding-left: var(--ot-gutter);
  padding-right: var(--ot-gutter);
  box-sizing: border-box;
}
.main,
.sidebar{
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.main{
  padding-top: 32px;
  padding-bottom: 48px;
}

/* ---------- ヘッダー ---------- */
.header-container{
  background-color: var(--ot-bg);
  border-bottom: 1px solid var(--ot-line);
  box-shadow: none;
}
.header{
  background-color: transparent;
}
.header-in{
  min-height: 0;
  padding-top: 28px;
  padding-bottom: 20px;
}
.logo-text{
  padding: 0;
}
.site-name-text{
  color: var(--ot-text);
  font-size: 24px;
  letter-spacing: .12em;
}
.tagline{
  color: var(--ot-muted);
  font-size: 12px;
  letter-spacing: .12em;
  margin: 0 0 6px;
}
.navi{
  background-color: transparent;
}
.navi-in > ul{
  justify-content: center;
}
.navi-in > ul > li{
  width: auto;
  height: auto;
}
.navi-in > ul > li > a{
  color: var(--ot-text);
  font-size: 14px;
  letter-spacing: .12em;
  padding: 12px 18px 16px;
}
.navi-in > ul > li > a:hover,
.navi-in > ul > li.current-menu-item > a{
  background-color: transparent;
  color: var(--ot-accent);
}
.navi-in a:hover{
  background-color: transparent;
}

/* スマホ用ヘッダーメニュー（Cocoonのハンバーガー） */
.mobile-header-menu-buttons{
  background-color: var(--ot-bg);
  box-shadow: none;
  border-bottom: 1px solid var(--ot-line);
}
.mobile-menu-buttons .menu-button > a,
.mobile-menu-buttons .menu-button-in{
  color: var(--ot-text);
}
.menu-content{
  background-color: var(--ot-bg);
}
.menu-drawer a{
  color: var(--ot-text);
  font-size: 15px;
  letter-spacing: .08em;
  padding: 14px 8px;
  border-bottom: 1px solid var(--ot-line);
}

/* ---------- パンくず ---------- */
.breadcrumb{
  color: var(--ot-muted);
  font-size: 12px;
  margin: 0 0 20px;
  padding: 0;
}
.breadcrumb a{
  color: var(--ot-muted);
  text-decoration: none;
}

/* ---------- 記事ページ ---------- */
.article{
  margin-bottom: 0;
}
.article-header .entry-title,
.entry-title{
  font-size: 26px;
  line-height: 1.55;
  margin: 8px 0 16px;
  padding: 0;
}
.date-tags{
  color: var(--ot-muted);
  font-size: 12px;
  text-align: left;
  margin-bottom: 20px;
}
.eye-catch-wrap{
  margin-bottom: 24px;
}
.eye-catch img{
  width: 100%;
  border-radius: var(--ot-radius);
}
.cat-label{
  background-color: var(--ot-surface);
  color: var(--ot-text);
  border: 1px solid var(--ot-line);
  border-radius: var(--ot-radius);
  font-size: 11px;
  letter-spacing: .1em;
  padding: 2px 10px;
}
.entry-categories-tags .cat-link{
  background-color: transparent;
  color: var(--ot-accent);
  border: 1px solid var(--ot-accent-soft);
  border-radius: var(--ot-radius);
  font-size: 12px;
  letter-spacing: .08em;
}
.entry-content{
  margin-top: 0;
  margin-bottom: 48px;
}
.entry-content > p,
.entry-content > ul,
.entry-content > ol{
  margin-bottom: 1.8em;
}

/* 記事見出し（Cocoon標準の背景・枠をリセットして上品に） */
.article h2{
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ot-line);
  border-radius: 0;
  font-size: 22px;
  margin: 64px 0 28px;
  padding: 0 0 14px;
  position: relative;
}
.article h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 1px;
  background-color: var(--ot-accent);
}
.article h3{
  border: 0;
  border-left: 2px solid var(--ot-accent-soft);
  border-radius: 0;
  font-size: 19px;
  margin: 48px 0 20px;
  padding: 2px 0 2px 14px;
}
.article h4{
  border: 0;
  font-size: 17px;
  margin: 32px 0 16px;
  padding: 0;
}

/* 目次 */
.toc{
  background-color: var(--ot-surface);
  border: 1px solid var(--ot-line);
  border-radius: var(--ot-radius);
  display: block;
  font-size: 14px;
  margin: 32px 0;
  padding: 20px 24px;
}
.toc-title{
  font-family: var(--ot-serif);
  letter-spacing: .12em;
}
.toc-content a{
  text-decoration: none;
}

/* PR表記（Cocoonの広告表記） */
.pr-label{
  background-color: var(--ot-greige-soft);
  border: 0;
  border-radius: var(--ot-radius);
  color: var(--ot-muted);
  font-size: 12px;
  letter-spacing: .04em;
}

/* 記事下：関連記事・ページ送り・プロフィール */
.related-entry-heading,
.comment-title,
.under-entry-content .widget-title,
.sidebar h2,
.sidebar h3{
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ot-line);
  border-radius: 0;
  color: var(--ot-text);
  font-family: var(--ot-serif);
  font-size: 18px;
  letter-spacing: .1em;
  padding: 0 0 10px;
  margin-bottom: 20px;
}
.related-entry-card-wrap,
.pager-post-navi a,
.author-box{
  background-color: var(--ot-surface);
  border: 1px solid var(--ot-line);
  border-radius: var(--ot-radius);
}
.author-box{
  padding: 20px;
}
.author-box .author-name{
  font-family: var(--ot-serif);
}

/* ---------- 記事一覧（カテゴリー・アーカイブ） ---------- */
.archive-title{
  font-size: 24px;
  margin: 0 0 24px;
}
.list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.list > .entry-card-wrap{
  width: auto;
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: 0;
}
.list .entry-card{
  display: block;
}
.list .entry-card-thumb{
  width: 100%;
  float: none;
  margin: 0 0 14px;
}
.list .entry-card-thumb img{
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--ot-radius);
}
.list .entry-card-content{
  margin: 0;
  padding: 0;
}
.entry-card-title{
  font-family: var(--ot-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}
.entry-card-snippet{
  color: var(--ot-muted);
  font-size: 14px;
  line-height: 1.8;
}
.pagination .page-numbers{
  background-color: var(--ot-surface);
  border: 1px solid var(--ot-line);
  border-radius: var(--ot-radius);
}

/* ---------- ボタン共通 ---------- */
.ot-btn .wp-block-button__link{
  background-color: var(--ot-text);
  border: 1px solid var(--ot-text);
  border-radius: var(--ot-radius);
  color: #fff;
  font-size: 14px;
  letter-spacing: .14em;
  padding: 14px 36px;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.ot-btn .wp-block-button__link:hover{
  background-color: transparent;
  color: var(--ot-text);
}
.ot-btn--light .wp-block-button__link{
  background-color: rgba(250, 248, 244, .95);
  border-color: rgba(250, 248, 244, .95);
  color: var(--ot-text);
}
.ot-btn--light .wp-block-button__link:hover{
  background-color: transparent;
  color: #fff;
}
.ot-btn--ghost .wp-block-button__link{
  background-color: transparent;
  color: var(--ot-text);
}
.ot-btn--ghost .wp-block-button__link:hover{
  background-color: var(--ot-text);
  color: #fff;
}
/* リンク未設定（準備中）のボタンはクリックできない見た目に */
.ot-btn .wp-block-button__link:not([href]){
  border-color: var(--ot-line);
  color: var(--ot-muted);
  cursor: default;
}
.ot-btn .wp-block-button__link:not([href]):hover{
  background-color: transparent;
  color: var(--ot-muted);
}
.ot-center{
  justify-content: center;
}

/************************************
** トップページ（固定ページ「ホーム」）
************************************/
/* 固定ページのタイトル・日付・SNSボタン等はトップでは表示しない */
.front-top-page.page .article-header,
.front-top-page.page .date-tags,
.front-top-page.page .sns-share,
.front-top-page.page .sns-follow,
.front-top-page.page .footer-meta,
.front-top-page.page .author-info,
.front-top-page.page .breadcrumb{
  display: none;
}
.front-top-page.page .main{
  padding-top: 0;
  padding-bottom: 0;
}
.front-top-page.page .entry-content{
  margin: 0;
}
.front-top-page .article h2,
.front-top-page .article h3{
  border: 0;
  margin: 0;
  padding: 0;
}
.front-top-page .article h2::after{
  content: none;
}
/* 上のリセットより優先させるため、トップの見出し余白はここで指定する */
.front-top-page .article .ot-section__title{
  margin-bottom: 32px;
}
.front-top-page .article .ot-route__title{
  margin-bottom: 20px;
}
.front-top-page .article .ot-tool__title{
  margin-bottom: 4px;
}
.front-top-page .article .ot-card__title{
  margin-bottom: 8px;
}
/* Cocoon標準のリスト余白（.article ul/ol）をトップの独自リストでは打ち消す */
.article .ot-catlist,
.article .ot-route,
.article .ot-cards__grid{
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
}
/* グループブロック同士の自動余白をグリッド内では打ち消す */
.article .ot-tools__grid > .ot-tool,
.article .ot-cards__grid > li{
  margin: 0;
}

/* 画面幅いっぱいに広げるセクション */
.ot-full{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* セクション共通 */
.ot-section{
  padding: var(--ot-section) 0;
}
.ot-section + .ot-section:not(.ot-full){
  border-top: 1px solid var(--ot-line);
}
.ot-eyebrow{
  color: var(--ot-accent);
  font-family: var(--ot-serif);
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin: 0 0 12px !important;
}
.article .ot-section__title,
.ot-section__title{
  font-size: 22px;
  line-height: 1.6;
  margin: 0 0 32px;
}
.ot-empty{
  color: var(--ot-muted);
  text-align: center;
}

/* 1. HERO */
.ot-hero{
  position: relative;
  display: flex;
  align-items: center;
  /* 画面の高さに合わせつつ、縦長の画面で伸びすぎないよう上限を設ける */
  min-height: 88vh;
  min-height: min(88svh, 860px);
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  color: #fff;
}
.article .ot-hero__image{
  position: absolute;
  inset: 0;
  margin: 0;
}
.ot-hero__image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ot-hero::after{
  /* 文字を読みやすくする薄いオーバーレイ（グラデーションは使わない） */
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(40, 40, 40, .28);
  pointer-events: none;
}
.ot-hero__content{
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ot-wrap);
  margin: 0 auto;
  padding: 96px var(--ot-gutter) 64px;
}
.ot-hero__brand{
  font-size: 15px;
  letter-spacing: .28em;
  margin: 0 0 16px;
}
.ot-hero__copy{
  font-size: 30px;
  line-height: 1.6;
  margin: 0 0 28px;
}
.ot-hero__lead{
  font-size: 15px;
  line-height: 2;
  margin: 0 0 36px;
}

/* 2. INTRODUCTION */
.ot-intro{
  max-width: 640px;
  margin: 0 auto;
}
.ot-intro p:not(.ot-eyebrow){
  line-height: 2.1;
  margin: 0 0 1.6em;
}

/* 中身が空のウィジェット（記事・コメントがまだないとき）は表示しない。記事が増えると自動で表示される */
.widget:has(.cat-item-none),
.widget:has(.wp-block-latest-posts__list:empty),
.widget:has(.wp-block-latest-comments.no-comments),
.widget:has(div.wp-block-archives){
  display: none;
}

/* 3. FEATURED JOURNEY */
/* 特集の下線と次セクションの区切り線が二重にならないように */
.ot-journey + .ot-section:not(.ot-full){
  border-top: 0;
}
.ot-journey{
  background-color: var(--ot-surface);
  border-top: 1px solid var(--ot-line);
  border-bottom: 1px solid var(--ot-line);
}
.ot-journey__inner{
  box-sizing: border-box;
  max-width: var(--ot-wrap);
  margin: 0 auto;
  padding: 0 var(--ot-gutter);
  display: grid;
  gap: 48px;
}
.ot-journey__lead{
  margin: 0 0 20px;
}
.ot-badge{
  display: inline-block;
  border: 1px solid var(--ot-accent-soft);
  border-radius: var(--ot-radius);
  color: var(--ot-accent);
  font-family: var(--ot-serif);
  font-size: 12px;
  letter-spacing: .2em;
  padding: 2px 14px;
  margin: 0 0 24px;
}
.ot-journey__image{
  margin: 0 0 28px;
}
.ot-journey__image img{
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--ot-radius);
}
.article .ot-route__title{
  font-size: 17px;
  letter-spacing: .14em;
  margin: 0 0 20px;
}
.ot-route{
  list-style: none;
  counter-reset: ot-route;
  margin: 0;
  padding: 0;
}
.ot-route li{
  counter-increment: ot-route;
  position: relative;
  padding: 0 0 18px 44px;
  margin: 0;
  font-family: var(--ot-serif);
  font-size: 17px;
  line-height: 1.5;
}
.ot-route li::before{
  /* 番号 */
  content: counter(ot-route, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--ot-accent);
  font-family: var(--ot-sans);
  font-size: 12px;
  letter-spacing: .08em;
}
.ot-route li::after{
  /* 経路の縦線 */
  content: "";
  position: absolute;
  left: 30px;
  top: 10px;
  bottom: -2px;
  width: 1px;
  background-color: var(--ot-line);
}
.ot-route li:last-child::after{
  content: none;
}
.ot-route em{
  display: block;
  color: var(--ot-muted);
  font-family: var(--ot-sans);
  font-size: 11px;
  font-style: normal;
  letter-spacing: .1em;
}

/* 4. CATEGORY */
.ot-catlist{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
}
.ot-catlist li{
  margin: 0;
  padding: 0;
}
.ot-catlist a{
  display: block;
  height: 100%;
  box-sizing: border-box;
  background-color: var(--ot-surface);
  border: 1px solid var(--ot-line);
  border-radius: var(--ot-radius);
  font-family: var(--ot-serif);
  font-size: 15px;
  line-height: 1.5;
  padding: 20px 16px;
  text-decoration: none;
  transition: border-color .2s;
}
.ot-catlist a:hover{
  border-color: var(--ot-accent-soft);
  color: var(--ot-text);
}
.ot-catlist em{
  display: block;
  color: var(--ot-accent);
  font-size: 11px;
  font-style: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* 5. NEW ARTICLES（クエリーループ） */
.ot-cards__grid{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin: 0 0 40px;
  padding: 0;
}
.ot-cards__grid > li{
  margin: 0;
}
.ot-cards .wp-block-post-featured-image{
  margin: 0 0 14px;
}
.ot-cards .wp-block-post-featured-image img{
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--ot-radius);
}
.ot-card__cat{
  color: var(--ot-accent);
  font-size: 12px;
  letter-spacing: .12em;
  margin: 0 0 6px;
}
.ot-card__cat a{
  color: inherit;
  text-decoration: none;
}
.article .ot-card__title{
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 8px;
}
.ot-card__title a{
  text-decoration: none;
}
.ot-card__excerpt{
  color: var(--ot-muted);
  font-size: 14px;
  line-height: 1.8;
}
.ot-card__excerpt p{
  margin: 0;
}
.ot-card__excerpt .wp-block-post-excerpt__more-link{
  display: none;
}

/* 6. TRAVEL TOOLS */
.ot-pr-note{
  color: var(--ot-muted);
  font-size: 12px;
  margin: -16px 0 28px;
}
.ot-tools__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.ot-tool{
  display: flex;
  flex-direction: column;
  background-color: var(--ot-surface);
  border: 1px solid var(--ot-line);
  border-radius: var(--ot-radius);
  padding: 24px;
}
.ot-tool > *{
  margin: 0;
}
.ot-tool__label{
  color: var(--ot-accent);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.article .ot-tool__title{
  font-size: 18px;
  margin: 0 0 4px;
}
.ot-tool__service{
  font-size: 13px;
  color: var(--ot-muted);
  margin-bottom: 12px;
}
.ot-tool__desc{
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 20px;
  flex: 1;
}

/* アフィリエイトリンク（Cocoonアフィリエイトタグの中身で使うクラス） */
.ot-affi-btn{
  display: block;
  background-color: var(--ot-text);
  border: 1px solid var(--ot-text);
  border-radius: var(--ot-radius);
  color: #fff;
  font-size: 14px;
  letter-spacing: .1em;
  text-align: center;
  text-decoration: none;
  padding: 12px 16px;
  margin-top: 8px;
}
.ot-affi-btn:hover{
  background-color: transparent;
  color: var(--ot-text);
}
/* 提携URL未設定：リンクなしの表示（誤クリックが起きない） */
.ot-affi-pending{
  display: block;
  border: 1px dashed var(--ot-greige);
  border-radius: var(--ot-radius);
  color: var(--ot-muted);
  font-size: 13px;
  text-align: center;
  padding: 11px 16px;
  margin-top: 8px;
}

/* 7. PROFILE */
.ot-profile__cols{
  gap: 40px;
  margin-bottom: 0;
}
.ot-profile__image{
  margin: 0;
}
.ot-profile__image img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--ot-radius);
}
.ot-profile__body p:not(.ot-eyebrow){
  line-height: 2;
  margin: 0 0 1.4em;
}

/* 8. FOLLOW */
.ot-follow{
  background-color: var(--ot-greige-soft);
  text-align: center;
  padding-left: var(--ot-gutter);
  padding-right: var(--ot-gutter);
  box-sizing: border-box;
}
.ot-follow > p:not(.ot-eyebrow){
  max-width: 560px;
  margin: 0 auto 28px;
}
.ot-follow .wp-block-buttons{
  gap: 12px;
}
.ot-follow + *{
  margin-top: 0;
}

/************************************
** 記事内：おすすめボックス（PR）
************************************/
.ot-reco{
  background-color: var(--ot-surface);
  border: 1px solid var(--ot-line);
  border-top: 2px solid var(--ot-accent-soft);
  border-radius: var(--ot-radius);
  margin: 40px 0;
  padding: 24px;
}
.ot-reco > *{
  margin-top: 0;
}
.ot-reco__label{
  color: var(--ot-accent);
  font-size: 12px;
  letter-spacing: .14em;
  margin-bottom: 8px !important;
}
.ot-reco__title{
  font-family: var(--ot-serif);
  font-size: 19px;
  line-height: 1.5;
  margin-bottom: 16px !important;
}
.ot-reco__points{
  font-size: 15px;
  margin-bottom: 20px !important;
  padding-left: 1.2em;
}
.ot-reco__note{
  color: var(--ot-muted);
  font-size: 12px;
  margin: 12px 0 0 !important;
}

/************************************
** フッター
************************************/
.footer{
  background-color: var(--ot-surface);
  border-top: 1px solid var(--ot-line);
  color: var(--ot-text);
  margin-top: 0;
  padding-top: 56px;
}
.footer a{
  color: var(--ot-text);
  text-decoration: none;
}
.footer a:hover{
  color: var(--ot-accent);
}
.footer .widget-title,
.footer h2,
.footer h3{
  background: none;
  border: 0;
  font-family: var(--ot-serif);
  font-size: 15px;
  letter-spacing: .14em;
  padding: 0;
  margin: 0 0 16px;
}
.footer-widgets{
  font-size: 14px;
}
.footer-bottom{
  border-top: 1px solid var(--ot-line);
  margin-top: 32px;
  padding: 28px 0 32px;
}
.navi-footer-in > .menu-footer li{
  border: 0;
}
.navi-footer-in a{
  font-size: 13px;
  letter-spacing: .08em;
}
.copyright{
  color: var(--ot-muted);
  font-size: 12px;
  letter-spacing: .08em;
}

/* 固定ページ（プロフィール・ポリシー等）では投稿日を表示しない */
body.page .article .date-tags{
  display: none;
}

/* スマホのヘッダーバー（メニュー・ロゴ・検索）のロゴも明朝に */
.logo-menu-button .menu-button-in,
.logo-menu-button .site-name-text{
  color: var(--ot-text);
  font-family: var(--ot-serif);
  font-weight: 500;
  letter-spacing: .1em;
}

/* SNS・メルマガのボタンは幅をそろえる */
.ot-follow .wp-block-button{
  min-width: 240px;
}
.ot-follow .wp-block-button__link{
  width: 100%;
  box-sizing: border-box;
}

/* スマホではプロフィール写真を小さめに */
.ot-profile__image{
  max-width: 280px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
** （スマホが基本。以下は広い画面向けの上書き）
************************************/
/* 834px以下：Cocoonはフッターウィジェットを隠すため、縦積みで表示させる */
@media screen and (max-width: 834px){
  /* 上部のメニューバーにロゴがあるため、ヘッダーのロゴは重複表示しない */
  .header-container{
    display: none;
  }
  .footer .footer-widgets{
    display: block;
  }
  .footer .footer-left,
  .footer .footer-center,
  .footer .footer-right{
    width: auto;
    float: none;
    margin: 0 0 28px;
  }
}
/* 600px以上（大きめのスマホ・タブレット縦） */
@media screen and (min-width: 600px){
  .ot-catlist{
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .ot-tools__grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .list{
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 28px;
  }
  .ot-cards__grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 28px;
  }
}

/* 835px以上（タブレット横・PC） */
@media screen and (min-width: 835px){
  :root{
    --ot-gutter: 32px;
    --ot-section: 112px;
  }
  body.body{
    font-size: 17px;
  }
  .site-name-text{
    font-size: 30px;
  }
  .article-header .entry-title,
  .entry-title{
    font-size: 32px;
  }
  .article h2{
    font-size: 25px;
  }
  .article h3{
    font-size: 20px;
  }
  .ot-section__title,
  .article .ot-section__title{
    font-size: 30px;
  }
  .front-top-page .article .ot-section__title{
    margin-bottom: 44px;
  }
  .ot-hero__brand{
    font-size: 16px;
  }
  .ot-hero__copy{
    font-size: 44px;
  }
  .ot-hero__lead{
    font-size: 16px;
  }
  .ot-journey__inner{
    grid-template-columns: 1.25fr 1fr;
    gap: 72px;
    align-items: start;
  }
  .ot-journey__route{
    border-left: 1px solid var(--ot-line);
    padding-left: 48px;
  }
  .ot-tools__grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .ot-cards__grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 32px;
  }
  .list{
    grid-template-columns: repeat(3, 1fr);
  }
  /* サイドバーありのページではカード2列 */
  .sidebar-right .list,
  .sidebar-left .list{
    grid-template-columns: repeat(2, 1fr);
  }
  .ot-profile__cols{
    gap: 72px;
    align-items: center;
  }
  .ot-profile__image{
    max-width: none;
  }
  .ot-reco{
    padding: 32px 36px;
  }
}

/* 1024px以上（PC） */
@media screen and (min-width: 1024px){
  /* サイト幅を狭めた分、本文とサイドバーが横に並ぶよう幅を調整 */
  .sidebar-right:not(.no-sidebar) .content-in,
  .sidebar-left:not(.no-sidebar) .content-in{
    flex-wrap: nowrap;
    gap: 56px;
  }
  .sidebar-right:not(.no-sidebar) .main,
  .sidebar-left:not(.no-sidebar) .main{
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .sidebar-right:not(.no-sidebar) .sidebar,
  .sidebar-left:not(.no-sidebar) .sidebar{
    flex: 0 0 300px;
    width: 300px;
  }
  .ot-tools__grid{
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }
  .ot-tool{
    padding: 24px 20px;
  }
}

/* 動きを減らす設定の人にはアニメーションを止める */
@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
  }
}

/************************************
** メディア化（2026-09 追加）
** 1カラム・雑誌型トップ・記事テンプレート
************************************/

/* ---------- 1カラム：記事・固定ページは読みやすい幅（約760px） ---------- */
.no-sidebar.single .main,
.no-sidebar.page:not(.front-top-page) .main{
  width: auto;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.no-sidebar .sidebar{
  display: none;
}

/* ---------- グローバルナビ：英語ラベル＋日本語キャプション ---------- */
.navi-in .item-label{
  font-size: 13px;
  letter-spacing: .16em;
}
/* 英語ラベルと日本語キャプションを縦に積む（横並び前提の幅計算で折り返すのを防ぐ） */
.navi-in .caption-wrap{
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}
.navi-in > ul > li > a{
  padding: 12px 20px 16px;
}
.navi-in .item-description{
  color: var(--ot-muted);
  font-size: 10px;
  letter-spacing: .06em;
  opacity: 1;
}

/* ---------- セクション見出し（左：英字＋見出し／右：一覧リンク） ---------- */
.ot-sec-head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0 24px;
  margin-bottom: 28px;
}
.ot-sec-head > *{
  margin: 0;
}
.ot-sec-head .ot-eyebrow{
  grid-column: 1 / -1;
}
.front-top-page .article .ot-sec-head .ot-section__title{
  margin-bottom: 0;
}
.ot-sec-head__more{
  font-size: 13px;
  letter-spacing: .06em;
  white-space: nowrap;
}
.ot-sec-head__more a{
  text-decoration: none;
  border-bottom: 1px solid var(--ot-accent-soft);
  padding-bottom: 2px;
}

/* ---------- 短い導入 ---------- */
.ot-intro{
  text-align: center;
}
.ot-intro__brand{
  color: var(--ot-accent);
  font-family: var(--ot-serif);
  font-size: 13px;
  letter-spacing: .3em;
  margin: 0 0 16px !important;
}
.ot-intro__copy{
  font-family: var(--ot-serif);
  font-size: 16px;
  line-height: 2.2;
  letter-spacing: .08em;
}

/* ---------- DESTINATIONS：写真カード ---------- */
.ot-dest-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 16px;
}
.article .ot-dest-grid > .ot-dest-card{
  margin: 0;
}
.ot-dest-card > *{
  margin: 0;
}
.article .ot-dest-card__image{
  margin: 0 0 12px;
}
.ot-dest-card__image img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--ot-radius);
  transition: opacity .2s;
}
.ot-dest-card__image a:hover img{
  opacity: .88;
}
.ot-dest-card__en{
  color: var(--ot-accent);
  font-family: var(--ot-serif);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.ot-dest-card__name{
  font-family: var(--ot-serif);
  font-size: 18px;
  line-height: 1.5;
}
.ot-dest-card__name a{
  text-decoration: none;
}
.ot-dest-card__desc{
  color: var(--ot-muted);
  font-size: 13px;
  line-height: 1.7;
  margin-top: 4px !important;
}

/* ---------- 雑誌型カード（STAY・ITINERARY・EDITOR'S PICK） ---------- */
.article .ot-mag__grid{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin: 0;
  padding: 0;
}
.article .ot-mag__grid > li{
  margin: 0;
}
.ot-mag .wp-block-post-featured-image{
  margin: 0 0 14px;
}
.ot-mag .wp-block-post-featured-image img{
  width: 100%;
  object-fit: cover;
  border-radius: var(--ot-radius);
}

/* ---------- 新着：小さい写真つき一覧 ---------- */
.article .ot-newlist__grid{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 48px;
  margin: 0;
  padding: 0;
}
.article .ot-newlist__grid > li{
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ot-line);
}
.ot-newlist .wp-block-post-featured-image{
  margin: 0;
}
.ot-newlist .wp-block-post-featured-image img{
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--ot-radius);
}
.article .ot-newlist__body{
  margin: 0;
}
.article .ot-newlist__title{
  font-size: 15px;
  line-height: 1.6;
  margin: 2px 0 0;
}
.ot-newlist__title a{
  text-decoration: none;
}

/* ---------- ITINERARY：白い帯＋ガイド予告 ---------- */
.ot-itinerary-sec{
  background-color: var(--ot-surface);
  border-top: 1px solid var(--ot-line);
  border-bottom: 1px solid var(--ot-line);
}
.ot-itinerary-sec + .ot-section:not(.ot-full){
  border-top: 0;
}
.ot-itinerary-sec__inner{
  box-sizing: border-box;
  max-width: var(--ot-wrap);
  margin: 0 auto;
  padding: 0 var(--ot-gutter);
}
.ot-itinerary-sec__cols{
  gap: 40px;
  margin-bottom: 0;
}
.ot-guide{
  background-color: var(--ot-bg);
  border: 1px solid var(--ot-accent-soft);
  border-radius: var(--ot-radius);
  padding: 28px 24px;
}
.ot-guide > *{
  margin-top: 0;
}
.ot-guide__label{
  color: var(--ot-accent);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 10px !important;
}
.article .ot-guide__title{
  border: 0;
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 12px;
  padding: 0;
}
.ot-guide p,
.ot-guide__list{
  font-size: 14px;
}
.ot-guide__list{
  margin-bottom: 20px !important;
}

/* ---------- ABOUT THE EDITOR ---------- */
.ot-editor__cols{
  gap: 40px;
  margin-bottom: 0;
}
.ot-editor__image{
  margin: 0;
  max-width: 240px;
}
.ot-editor__image img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--ot-radius);
}
.ot-editor__body p:not(.ot-eyebrow){
  line-height: 2;
  margin: 0 0 1.2em;
}

/* ---------- 記事テンプレート ---------- */
/* 一次情報バッジ */
.ot-facts{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
}
.article .ot-facts > .ot-fact{
  margin: 0;
  border: 1px solid var(--ot-accent-soft);
  border-radius: var(--ot-radius);
  color: var(--ot-accent);
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1.6;
  padding: 3px 12px;
}
/* ホテル紹介・移動方法・旅費・この旅ならこれ（共通の箱） */
.ot-review,
.ot-cost,
.ot-choice{
  background-color: var(--ot-surface);
  border: 1px solid var(--ot-line);
  border-top: 2px solid var(--ot-accent-soft);
  border-radius: var(--ot-radius);
  margin: 40px 0;
  padding: 24px;
}
.ot-review > *,
.ot-cost > *,
.ot-choice > *{
  margin-top: 0;
}
.ot-review__label,
.ot-choice__label{
  color: var(--ot-accent);
  font-size: 12px;
  letter-spacing: .14em;
  margin-bottom: 8px !important;
}
.article .ot-review__title,
.article .ot-choice__title{
  border: 0;
  font-size: 19px;
  margin: 0 0 16px;
  padding: 0;
}
.ot-review__sub{
  font-weight: 600;
  font-size: 14px;
  margin: 20px 0 6px !important;
}
.ot-choice__cond{
  color: var(--ot-muted);
  font-size: 14px;
  margin-bottom: 6px !important;
}
/* 表 */
.ot-table{
  margin: 0 0 8px;
}
.ot-table table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ot-table th,
.ot-table td{
  border: 0;
  border-bottom: 1px solid var(--ot-line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.ot-table th{
  background-color: var(--ot-greige-soft);
  color: var(--ot-text);
  font-weight: 500;
  width: 32%;
}
.ot-table--cost tr:first-child td,
.ot-table--cost tr:last-child td,
.ot-table--cost tr:last-child th{
  font-weight: 600;
}

/* ---------- 記事末尾の「行き先」リンク ---------- */
.ot-dest-links{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin: 40px 0 0;
}
.ot-dest-links__label{
  color: var(--ot-accent);
  font-family: var(--ot-serif);
  font-size: 11px;
  letter-spacing: .2em;
  margin-right: 4px;
}
.ot-dest-links a{
  border: 1px solid var(--ot-line);
  border-radius: var(--ot-radius);
  padding: 2px 12px;
  text-decoration: none;
}

/* ---------- DESTINATIONSページ（[otona_destinations]） ---------- */
.ot-destinations__region{
  margin-bottom: 48px;
}
.article .ot-destinations__title{
  font-size: 22px;
}
.ot-destinations__title a{
  text-decoration: none;
}
.article .ot-destinations__list{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.ot-destinations__country{
  background-color: var(--ot-surface);
  border: 1px solid var(--ot-line);
  border-radius: var(--ot-radius);
  margin: 0;
  padding: 16px 20px;
}
.ot-destinations__name{
  display: block;
  font-family: var(--ot-serif);
  font-size: 17px;
  text-decoration: none;
}
.ot-destinations__cities{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  margin-top: 6px;
}
.ot-destinations__cities a{
  color: var(--ot-muted);
}

/* ---------- 広い画面 ---------- */
@media screen and (min-width: 600px){
  .article .ot-mag__grid,
  .article .ot-destinations__list{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 835px){
  .ot-dest-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 28px;
  }
  .ot-dest-card__name{
    font-size: 20px;
  }
  .article .ot-mag__grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .article .ot-mag__grid--two{
    grid-template-columns: repeat(2, 1fr);
  }
  /* EDITOR'S PICK：左に大きく1件、右に2件 */
  .article .ot-pick__grid{
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
  }
  .article .ot-pick__grid > li:first-child{
    grid-row: 1 / 3;
  }
  .article .ot-pick__grid > li:first-child .ot-card__title{
    font-size: 24px;
  }
  .article .ot-newlist__grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .ot-intro__copy{
    font-size: 19px;
  }
  .ot-editor__image{
    max-width: none;
  }
  .ot-editor__cols{
    gap: 64px;
    align-items: center;
  }
  .ot-itinerary-sec__cols{
    gap: 56px;
  }
  .ot-review,
  .ot-cost,
  .ot-choice{
    padding: 32px 36px;
  }
  .article .ot-destinations__list{
    grid-template-columns: repeat(3, 1fr);
  }
}
.ot-hero__brand{
  text-transform: uppercase;
}

/* Cocoonの段落余白（.article p）がカード内に効かないよう、より強い指定で打ち消す */
.article .ot-dest-card > *,
.article .ot-sec-head > *{
  margin-bottom: 0;
}
.article .ot-dest-card__en{
  margin-bottom: 2px;
}

/* 834px以下：Cocoonが本文エリアに左右16pxの余白を足すため、帯状のセクションと左端がずれる。余白はサイト幅側（--ot-gutter）だけにそろえる */
@media screen and (max-width: 834px){
  main.main{
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}