@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ============================================================================
 * 奥の間｜Cocoon Child スタイルシート
 * ----------------------------------------------------------------------------
 * 【貼り付け方】
 *   外観 → テーマファイルエディター → Cocoon Child → style.css
 *   ファイルの一番下に、この内容を丸ごと貼り付けて「ファイルを更新」。
 *
 *   ※ style.css 冒頭にある「Theme Name: Cocoon Child」から始まる
 *      コメント行は絶対に消さないこと
 *      （消すとテーマとして認識されなくなります）
 *
 * 【命名規則】
 *   すべてのクラスに ok- 接頭辞を付けています。
 *   プロトタイプの .wrap / .card / .btn / .section などをそのまま使うと
 *   Cocoon本体のCSSと衝突してサイト全体が崩れるためです。
 *
 *   既存の .okunoma-totteoki（中の人のとっておき）と
 *   .okunoma-yadodata（宿DATA）はそのまま残して構いません。
 * ==========================================================================*/


/* ============================================================
 * 0. デザイントークン
 * ==========================================================*/
:root{
  --ok-paper:#FAF9F5;
  --ok-card:#FFFFFF;
  --ok-ink:#2B3340;
  --ok-sub:#5D6673;
  --ok-indigo:#33557A;
  --ok-indigo-d:#274462;
  --ok-pine:#3F6B54;
  --ok-pine-d:#345A46;
  --ok-line:#E4E1D8;
  --ok-wash:#F1EEE6;
  --ok-gold:#C99A4E;
  --ok-serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --ok-sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP",sans-serif;
}


/* ============================================================
 * 1. サイト全体（Cocoon 上書き）
 * ==========================================================*/
body{
  background-color:var(--ok-paper);
  font-family:var(--ok-sans);
  color:var(--ok-ink);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}

/* 見出しを明朝に */
.article h1,.article h2,.article h3,.article h4,
.entry-title,.entry-card-title,.a-wrap .entry-card-title{
  font-family:var(--ok-serif);
  letter-spacing:.03em;
}

.article a{ color:var(--ok-indigo); }

/* コンテンツ幅をプロトタイプに合わせる（1060px）
   ※ max-width だけを指定すると左寄せになるため margin:auto は必須 */
#content .content-in,
#container{
  max-width:1160px;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* ============================================================
 * 2. ヘッダー
 * ==========================================================*/
#header,
.header,
.header-container{
  background-color:var(--ok-paper) !important;
  border-bottom:1px solid var(--ok-line);
}

/* サイト名を「襖マーク＋奥の間／OKUNOMA」に仕立てる */
.logo-header .site-name-text-link,
.logo-header a.site-name-text-link,
#header .site-name a{
  display:flex !important;
  align-items:center;
  gap:11px;
  text-decoration:none;
}

/* 襖マーク（SVGをデータURIで埋め込み。画像アップロード不要） */
.logo-header .site-name-text-link::before,
#header .site-name a::before{
  content:"";
  flex:none;
  width:36px;height:36px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect x='1.5' y='1.5' width='33' height='33' rx='3' fill='none' stroke='%23274462' stroke-width='2'/%3E%3Crect x='6.5' y='7' width='12.5' height='22' rx='1' fill='%2333557A'/%3E%3Crect x='19' y='7' width='3.5' height='22' fill='%23C99A4E'/%3E%3Crect x='22.5' y='7' width='7' height='22' rx='1' fill='%2333557A'/%3E%3Crect x='16.5' y='16' width='1.4' height='4.5' rx='.7' fill='%23FAF9F5'/%3E%3C/svg%3E") no-repeat center/contain;
}

.logo-header .site-name-text,
#header .site-name-text{
  display:flex !important;
  flex-direction:column;
  font-family:var(--ok-serif);
  font-size:22px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--ok-ink);
  line-height:1.1;
}

/* 欧文サブ表記 */
.logo-header .site-name-text::after,
#header .site-name-text::after{
  content:"OKUNOMA";
  font-family:var(--ok-sans);
  font-size:8.5px;
  font-weight:400;
  letter-spacing:.4em;
  color:var(--ok-sub);
  margin-top:3px;
}

/* キャッチフレーズは非表示（ロゴが主役） */
.tagline{ display:none; }

/* グローバルメニュー */
#navi,
.navi{
  background-color:var(--ok-paper) !important;
  border-top:1px solid var(--ok-line);
  border-bottom:1px solid var(--ok-line);
}
#navi .navi-in > ul > li > a{
  color:var(--ok-ink);
  font-size:13px;
  letter-spacing:.04em;
}
#navi .navi-in > ul > li > a:hover{
  background-color:var(--ok-wash);
  color:var(--ok-indigo);
}


/* ============================================================
 * 3. フッター
 * ==========================================================*/
#footer,
.footer{
  background-color:#20293A !important;
  color:#AEB7C4;
  font-size:12px;
}
#footer a,
.footer a,
#footer .menu-footer a{
  color:#AEB7C4 !important;
}
#footer a:hover,
.footer a:hover{ color:#fff !important; }
#footer .logo-footer .site-name-text,
#footer .site-name-text{
  color:#F0F2EE !important;
  font-family:var(--ok-serif);
}
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); }


/* ============================================================
 * 4. トップページ（Cocoon の余計な装飾を消す）
 *    ※ トップは必ず「1カラム」設定にすること
 * ==========================================================*/
body.home .entry-title,
body.home .article-header,
body.home #breadcrumb,
body.home .breadcrumb,
body.home .date-tags,
body.home .footer-meta,
body.home .sns-share,
body.home .sns-follow,
body.home .under-entry-content,
body.home .pager-post-navi{
  display:none !important;
}

body.home #main,
body.home .main,
body.home article.article,
body.home .entry-content{
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
  max-width:none !important;
}
body.home #content,
body.home .content{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* --- トップページを強制的に「全幅1カラム」にする ---
   ページ設定で1カラムにし忘れても、ここで確実に全幅になる。
   全幅表示（.ok-root）は「メインカラムの中心＝画面の中心」を前提に
   計算しているため、サイドバーが残っていると左右にずれる。 */
body.home #sidebar,
body.home .sidebar,
body.home #sidebar-scroll{
  display:none !important;
}
body.home #content,
body.home #content .content-in,
body.home #container,
body.home #main,
body.home .main{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  float:none !important;
}


/* ============================================================
 * 5. レイアウト土台
 * ==========================================================*/
/* 画面幅いっぱいに広げる（1カラム前提） */
.ok-root{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.ok-wrap{
  max-width:1060px;
  margin:0 auto;
  padding:0 22px;
}
.ok-eyebrow{
  font-size:11px;
  letter-spacing:.18em;
  color:var(--ok-indigo);
  text-transform:uppercase;
  font-weight:600;
}
.ok-section{ padding:56px 0; }
.ok-section-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:26px;
}
.ok-section-head .ok-en{
  font-size:11px;
  letter-spacing:.2em;
  color:var(--ok-sub);
}


/* ============================================================
 * 6. 写真エリア（アイキャッチ／未設定時のグラデーション）
 * ==========================================================*/
.ok-ph{
  position:relative;
  border-radius:0;
  overflow:hidden;
  min-height:150px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.ok-ph-1{ background-image:linear-gradient(160deg,#B9CDD6 0%,#7FA3B4 45%,#4F7186 100%); }
.ok-ph-2{ background-image:linear-gradient(165deg,#D9D4C8 0%,#A8AFA6 50%,#6E7C77 100%); }
.ok-ph-3{ background-image:linear-gradient(160deg,#E4D8C4 0%,#C0A986 55%,#8A7250 100%); }
.ok-ph-4{ background-image:linear-gradient(160deg,#E7DED2 0%,#C7A99A 55%,#8F6558 100%); }
.ok-ph-5{ background-image:linear-gradient(165deg,#8A97AC 0%,#55617B 55%,#333D55 100%); }
.ok-ph-6{ background-image:linear-gradient(160deg,#D6DCC6 0%,#9FB08D 55%,#5F7455 100%); }
.ok-ph-7{ background-image:linear-gradient(160deg,#DFD9CE 0%,#B3A794 55%,#75685A 100%); }


/* ============================================================
 * 7. ヒーロー
 * ==========================================================*/
.ok-hero{
  padding:72px 0 56px;
  border-bottom:1px solid var(--ok-line);
  background:linear-gradient(180deg,#FFFFFF 0%,var(--ok-paper) 100%);
}
.ok-hero-title{
  font-family:var(--ok-serif) !important;
  font-weight:600;
  font-size:clamp(28px,4.6vw,44px);
  line-height:1.55;
  letter-spacing:.04em;
  margin:18px 0 14px !important;
  color:var(--ok-ink);
  text-wrap:balance;
  border:none !important;
  padding:0 !important;
  background:none !important;
}
.ok-hero-lead{
  max-width:34em;
  color:var(--ok-sub);
  margin:0 !important;
  font-size:15px;
}


/* ============================================================
 * 8. 注目インタビュー
 * ==========================================================*/
.ok-featured{
  margin:48px 0 0;
  background:var(--ok-card);
  border:1px solid var(--ok-line);
  border-radius:8px;
  overflow:hidden;
  transition:box-shadow .2s ease;
}
.ok-featured:hover{ box-shadow:0 6px 24px rgba(43,51,64,.10); }
.ok-featured-link{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  text-decoration:none !important;
  color:inherit !important;
}
.ok-featured .ok-ph{ min-height:300px; }
.ok-featured-txt{
  padding:34px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.ok-featured-txt h2{
  font-family:var(--ok-serif) !important;
  font-size:24px;
  line-height:1.6;
  font-weight:600;
  margin:10px 0 12px !important;
  color:var(--ok-ink);
  text-wrap:balance;
  border:none !important;
  padding:0 !important;
  background:none !important;
}
.ok-badge-new{
  display:inline-block;
  align-self:flex-start;
  font-size:10px;
  letter-spacing:.14em;
  color:#C2543C;
  border:1px solid currentColor;
  border-radius:3px;
  padding:1px 7px;
  margin-bottom:6px;
}


/* ============================================================
 * 9. 記事カード
 * ==========================================================*/
.ok-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.ok-card{
  background:var(--ok-card);
  border:1px solid var(--ok-line);
  border-radius:8px;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;
}
.ok-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(43,51,64,.10);
}
.ok-card.is-hidden{ display:none; }
.ok-card-link{
  display:flex;
  flex-direction:column;
  height:100%;
  text-decoration:none !important;
  color:inherit !important;
}
.ok-card .ok-ph{ min-height:150px; }
.ok-card-body{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}
.ok-card-body h3{
  font-family:var(--ok-serif) !important;
  font-size:16px;
  font-weight:600;
  line-height:1.65;
  margin:0 !important;
  flex:1;
  color:var(--ok-ink);
  border:none !important;
  padding:0 !important;
  background:none !important;
}
.ok-chiplet{
  font-size:10.5px;
  color:var(--ok-indigo);
  letter-spacing:.08em;
  line-height:1.6;
}
.ok-who{
  font-size:11.5px;
  color:var(--ok-sub);
  line-height:1.6;
}
.ok-featured .ok-who{ font-size:12.5px; }
.ok-tags{
  font-size:10.5px;
  color:var(--ok-indigo);
  letter-spacing:.04em;
  line-height:1.6;
}


/* ============================================================
 * 10. 絞り込みフィルタ
 * ==========================================================*/
.ok-filterbar{
  background:var(--ok-card);
  border:1px solid var(--ok-line);
  border-radius:8px;
  padding:20px 22px;
  margin-bottom:26px;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.ok-fgroup{
  display:flex;
  gap:14px;
  align-items:baseline;
  flex-wrap:wrap;
}
.ok-flabel{
  font-size:11px;
  letter-spacing:.14em;
  color:var(--ok-sub);
  font-weight:600;
  min-width:64px;
}
.ok-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.ok-fchip{
  border:1px solid var(--ok-line);
  background:var(--ok-paper);
  border-radius:999px;
  padding:5px 14px;
  font-size:12.5px;
  color:var(--ok-ink);
  cursor:pointer;
  font-family:var(--ok-sans);
  line-height:1.6;
}
.ok-fchip:hover{ border-color:var(--ok-indigo); }
.ok-fchip.is-active{
  background:var(--ok-indigo);
  border-color:var(--ok-indigo);
  color:#fff;
}
.ok-fsearch{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}
.ok-fsearch input{
  flex:1;
  min-width:220px;
  border:1px solid var(--ok-line);
  border-radius:6px;
  padding:8px 12px;
  font-size:13px;
  font-family:var(--ok-sans);
  background:var(--ok-paper);
  color:var(--ok-ink);
}
.ok-fsearch input:focus{
  outline:2px solid var(--ok-indigo);
  outline-offset:0;
  border-color:var(--ok-indigo);
}
.ok-fresult{
  font-size:12px;
  color:var(--ok-sub);
  display:flex;
  align-items:center;
  gap:16px;
}
.ok-fresult b{
  color:var(--ok-indigo);
  font-size:15px;
  font-variant-numeric:tabular-nums;
}
.ok-fclear{
  background:none;
  border:none;
  color:var(--ok-sub);
  text-decoration:underline;
  cursor:pointer;
  font-size:11.5px;
  padding:0;
  font-family:var(--ok-sans);
}
.ok-fclear:hover{ color:#C2543C; }
.ok-empty{
  display:none;
  text-align:center;
  color:var(--ok-sub);
  font-size:13px;
  padding:44px 20px;
  border:1px dashed var(--ok-line);
  border-radius:8px;
  margin-top:4px;
}
.ok-empty.is-shown{ display:block; }


/* ============================================================
 * 11. 宿向けバナー／ボタン
 * ==========================================================*/
.ok-inns-strip{
  background:var(--ok-indigo-d);
  color:#F2F4F1;
  border-radius:10px;
  padding:38px 40px;
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}
.ok-inns-strip h2{
  font-family:var(--ok-serif) !important;
  font-size:20px;
  font-weight:600;
  margin:0 0 8px !important;
  letter-spacing:.05em;
  color:#F2F4F1 !important;
  border:none !important;
  padding:0 !important;
  background:none !important;
}
.ok-inns-strip p{
  margin:0 !important;
  font-size:13px;
  color:#C9D2DC;
  max-width:36em;
}
.ok-inns-strip .ok-cta{ margin-left:auto; }

.ok-btn{
  display:inline-block;
  border:none;
  cursor:pointer;
  border-radius:6px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.05em;
  padding:13px 26px;
  text-decoration:none !important;
  transition:background .15s ease;
}
.ok-btn-pine{ background:var(--ok-pine); color:#fff !important; }
.ok-btn-pine:hover{ background:var(--ok-pine-d); }
.ok-btn-ghost{
  background:transparent;
  color:#F2F4F1 !important;
  border:1px solid rgba(255,255,255,.5);
}
.ok-btn-ghost:hover{ background:rgba(255,255,255,.08); }


/* ============================================================
 * 12. レスポンシブ
 * ==========================================================*/
@media(max-width:900px){
  .ok-cards{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:760px){
  .ok-featured-link{ grid-template-columns:1fr; }
  .ok-hero{ padding:48px 0 40px; }
  .ok-featured-txt{ padding:24px 22px; }
  .ok-inns-strip{ padding:28px 24px; }
  .ok-inns-strip .ok-cta{ margin-left:0; }
}
@media(max-width:600px){
  .ok-cards{ grid-template-columns:1fr; }
  .ok-section{ padding:40px 0; }
}
@media(prefers-reduced-motion:reduce){
  .ok-card,.ok-card:hover,.ok-featured{ transform:none; transition:none; }
}
/* ============================================================================
 * 【修正パッチ】サイトが左寄りになる問題
 * ----------------------------------------------------------------------------
 * 外観 → テーマファイルエディター → Cocoon Child → style.css
 * ファイルの一番下（前回貼った内容のさらに下）に、これを追記して「ファイルを更新」。
 *
 * 既存の記述を消す必要はありません。CSSは後に書いたものが優先されるため、
 * 追記するだけで上書きされます。
 * ==========================================================================*/

/* --- 修正1：コンテナのセンタリング復活 ---
   前回 max-width だけを指定したため左寄せになっていた。
   左右マージンを auto に戻して中央寄せにする。 */
#content .content-in,
#container{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* --- 修正2：トップページを強制的に「全幅1カラム」にする ---
   全幅表示（.ok-root）は「メインカラムの中心＝画面の中心」を前提に
   計算しているため、サイドバーが残っていると左右にずれる。
   ページ設定で1カラムにし忘れても、ここで確実に全幅になる。 */
body.home #sidebar,
body.home .sidebar,
body.home #sidebar-scroll{
  display:none !important;
}
body.home #content,
body.home #content .content-in,
body.home #container,
body.home #main,
body.home .main{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  float:none !important;
}

/* --- 修正3：横スクロールバーの発生を防ぐ --- */
body.home{ overflow-x:hidden; }

/* ============================================================
 * 宿DATA（テーブルの余白を調整・縞背景を除去）
 * ==========================================================*/
.okunoma-yadodata{
  background:var(--ok-card);
  border:1px solid var(--ok-line);
  border-radius:8px;
  padding:22px 24px;
  margin:30px 0;
}
.okunoma-yadodata .yd-head{
  font-family:var(--ok-serif);
  font-size:16px; font-weight:600; letter-spacing:.08em;
  margin:0 0 14px;
}
.okunoma-yadodata table{ width:100%; border-collapse:collapse; font-size:14px; }
.okunoma-yadodata tr,
.okunoma-yadodata th,
.okunoma-yadodata td{
  background:transparent !important;
  border:none !important;
}
.okunoma-yadodata th{
  text-align:left; color:var(--ok-sub); font-weight:600;
  width:96px; padding:11px 18px 11px 14px !important; white-space:nowrap;
  border-bottom:1px solid var(--ok-line) !important; vertical-align:top;
}
.okunoma-yadodata td{
  padding:11px 0 !important;
  border-bottom:1px solid var(--ok-line) !important;
  color:var(--ok-ink);
}
.okunoma-yoyaku-btn{
  display:block; text-align:center;
  background:var(--ok-pine); color:#fff !important;
  text-decoration:none; border-radius:6px;
  padding:13px; margin-top:18px; font-weight:600;
}
.okunoma-yoyaku-btn:hover{ background:var(--ok-pine-d); }
.okunoma-yadodata .yd-note{
  font-size:11px; color:var(--ok-sub); margin:10px 0 0; line-height:1.7;
}

/* 閲覧数(PV)を非表示 */
.view-count{ display:none !important; }

/* SNSフォロー・シェアボタンを非表示 */
.sns-follow, .follow-buttons, .sns-share { display:none !important; }


/* ============================================================================
 * 奥の間｜Step 3 追加分（地図 ／ Instagram）※2026-09-18 追記
 * ----------------------------------------------------------------------------
 * functions.php 側に 08-child-functions-step3.php を貼ってあることが前提。
 *   [okunoma_map]        … 宿DATAの所在地から地図を表示
 *   [okunoma_instagram]  … 宿の公式Instagramへのリンクカード
 * ==========================================================================*/

/* ============================================================
 * 13. 地図（[okunoma_map]）
 * ==========================================================*/
.ok-map{ margin:34px 0; }

.ok-map-head{
  font-family:var(--ok-serif);
  font-size:16px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--ok-ink);
  margin:0 0 12px !important;
}

.ok-map-frame{
  border:1px solid var(--ok-line);
  border-radius:8px;
  overflow:hidden;
  background:var(--ok-wash);
  line-height:0;
}
.ok-map-frame iframe{
  display:block;
  width:100%;
  border:0;
}

.ok-map-addr{
  margin:12px 0 4px !important;
  font-size:13px;
  color:var(--ok-sub);
  line-height:1.8;
}

.article .ok-map-link,
.ok-map-link{
  font-size:13px;
  color:var(--ok-indigo);
  text-decoration:none;
  letter-spacing:.03em;
}
.ok-map-link:hover{ text-decoration:underline; }

/* サイドバーのウィジェットに置いたときは詰める */
.widget .ok-map{ margin:18px 0 0; }
.widget .ok-map-head{ font-size:14px; }


/* ============================================================
 * 14. Instagramカード（[okunoma_instagram]）
 * ==========================================================*/
.article .ok-insta,
.ok-insta{
  display:flex;
  align-items:center;
  gap:14px;
  margin:30px 0;
  padding:16px 18px;
  background:var(--ok-wash);
  border:1px solid var(--ok-line);
  border-radius:8px;
  text-decoration:none !important;
  color:var(--ok-ink) !important;
  transition:background .18s ease;
}
.article .ok-insta:hover,
.ok-insta:hover{ background:#EBE7DC; }

.ok-insta-icon{
  flex:0 0 auto;
  display:flex;
  color:var(--ok-indigo);
}
.ok-insta-txt{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.ok-insta-label{
  font-size:11px;
  letter-spacing:.14em;
  color:var(--ok-sub);
}
.ok-insta-name{
  font-family:var(--ok-serif);
  font-size:16px;
  font-weight:600;
  line-height:1.6;
}
.ok-insta-name em{
  font-style:normal;
  font-size:13px;
  font-weight:400;
  color:var(--ok-sub);
}
.ok-insta-arrow{
  flex:0 0 auto;
  color:var(--ok-indigo);
  font-size:18px;
}

/* Instagramの投稿そのものを埋め込んだとき（公式の埋め込みコード）の幅調整 */
.article .instagram-media{
  margin:26px auto !important;
  min-width:0 !important;
}


/* ============================================================
 * 15. Step 3 レスポンシブ
 * ==========================================================*/
@media(max-width:600px){
  .ok-map{ margin:26px 0; }
  .ok-insta{ padding:14px 15px; gap:11px; }
  .ok-insta-name{ font-size:15px; }
  .ok-insta-label{ font-size:10.5px; }
}


/* ============================================================
 * 16. トップページのカードを全面クリック可能にする　※2026-09-18 追記
 * ------------------------------------------------------------
 * いままでは画像とタイトルの文字だけがリンクだった。
 * タイトルのリンクを疑似要素でカード全面に広げることで、
 * カードのどこを押しても記事に飛べるようにする。
 * ただし「#タグ」だけは上に重ねて、遷移させない。
 * ==========================================================*/

/* --- 記事カード（[okx_cards]） --- */
.okx-cards .okx-card{ position:relative; }

.okx-cards .okx-card .okx-cbody h3 a::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  z-index:1;
}

/* #タグはリンクの上に出す（＝クリックしても記事に飛ばない） */
.okx-cards .okx-card .okx-tags{
  position:relative;
  z-index:2;
  /* 文字の部分だけを持ち上げ、余白は下のリンクが受けるようにする */
  align-self:flex-start;
}

/* --- 注目インタビュー（[okx_featured]） --- */
.okx-featured{ position:relative; }
.okx-featured .okx-ftxt h2 a::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  z-index:1;
}


/* ============================================================
 * 17. 宿の過ごし方タイプ診断（[okunoma_shindan]）※2026-09-18 追記
 * ==========================================================*/

.ok-sd{
  background:var(--ok-card);
  border:1px solid var(--ok-line);
  border-radius:10px;
  padding:44px 40px;
  margin:44px 0;
  position:relative;
  overflow:hidden;
}
/* 上辺の金のライン */
.ok-sd::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--ok-indigo),var(--ok-gold));
}

.ok-sd-stage{ animation:okSdIn .32s ease both; }
@keyframes okSdIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
@media(prefers-reduced-motion:reduce){
  .ok-sd-stage{ animation:none; }
}

.ok-sd-eyebrow{
  display:block;
  font-family:var(--ok-sans);
  font-size:10.5px;
  letter-spacing:.24em;
  color:var(--ok-indigo);
  font-weight:600;
  margin-bottom:14px;
}

/* ---- イントロ ---- */
.ok-sd-title{
  font-family:var(--ok-serif) !important;
  font-size:clamp(22px,3.2vw,30px) !important;
  font-weight:600;
  line-height:1.55;
  letter-spacing:.03em;
  color:var(--ok-ink);
  margin:0 0 14px !important;
  border:none !important;
  padding:0 !important;
  background:none !important;
}
.ok-sd-lead{
  font-size:14px;
  color:var(--ok-sub);
  line-height:1.9;
  margin:0 0 26px !important;
  max-width:36em;
}

.ok-sd-btn{
  display:inline-block;
  background:var(--ok-indigo);
  color:#fff;
  border:none;
  border-radius:6px;
  font-family:var(--ok-sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:.06em;
  padding:14px 34px;
  cursor:pointer;
  transition:background .15s ease;
}
.ok-sd-btn:hover{ background:var(--ok-indigo-d); }

/* ---- 設問 ---- */
.ok-sd-progress{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:26px;
}
.ok-sd-progress-bar{
  flex:1;
  height:3px;
  background:var(--ok-line);
  border-radius:999px;
  overflow:hidden;
}
.ok-sd-progress-bar span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--ok-indigo),var(--ok-gold));
  transition:width .3s ease;
}
.ok-sd-progress-txt{
  font-size:11.5px;
  color:var(--ok-sub);
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
  white-space:nowrap;
}
.ok-sd-progress-txt b{ color:var(--ok-indigo); font-size:15px; }

.ok-sd-q{
  font-family:var(--ok-serif);
  font-size:clamp(18px,2.4vw,22px);
  font-weight:600;
  line-height:1.7;
  color:var(--ok-ink);
  margin:0 0 22px !important;
  text-wrap:balance;
}

.ok-sd-opts{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:22px;
}
.ok-sd-opt{
  width:100%;
  text-align:left;
  background:var(--ok-paper);
  border:1px solid var(--ok-line);
  border-radius:7px;
  padding:16px 20px;
  font-family:var(--ok-sans);
  font-size:14.5px;
  line-height:1.7;
  color:var(--ok-ink);
  cursor:pointer;
  position:relative;
  padding-left:46px;
  transition:border-color .15s ease,background .15s ease;
}
.ok-sd-opt::before{
  content:"";
  position:absolute;
  left:20px; top:50%;
  width:13px; height:13px;
  margin-top:-6.5px;
  border:1px solid var(--ok-line);
  border-radius:50%;
  background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.ok-sd-opt:hover{
  border-color:var(--ok-indigo);
  background:var(--ok-wash);
}
.ok-sd-opt:hover::before{ border-color:var(--ok-indigo); }
.ok-sd-opt.is-on{
  border-color:var(--ok-indigo);
  background:var(--ok-wash);
}
.ok-sd-opt.is-on::before{
  border-color:var(--ok-indigo);
  box-shadow:inset 0 0 0 3.5px var(--ok-indigo);
}

.ok-sd-back{
  background:none;
  border:none;
  color:var(--ok-sub);
  font-family:var(--ok-sans);
  font-size:12.5px;
  cursor:pointer;
  padding:0;
}
.ok-sd-back:hover{ color:var(--ok-indigo); text-decoration:underline; }

/* ---- 結果 ---- */
.ok-sd-rtype{
  font-size:12.5px;
  color:var(--ok-sub);
  margin:0 0 4px !important;
  letter-spacing:.06em;
}
.ok-sd-rname{
  font-family:var(--ok-serif) !important;
  font-size:clamp(26px,4vw,36px) !important;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--ok-ink);
  margin:0 0 18px !important;
  padding:0 0 16px !important;
  border:none !important;
  border-bottom:1px solid var(--ok-line) !important;
  background:none !important;
  display:inline-block;
}
.ok-sd-rdesc{
  font-size:14.5px;
  line-height:2;
  color:var(--ok-ink);
  margin:0 0 10px !important;
  max-width:38em;
}
.ok-sd-rsecond{
  font-size:12.5px;
  color:var(--ok-sub);
  margin:0 0 32px !important;
}
.ok-sd-rhead{
  font-family:var(--ok-serif);
  font-size:16px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--ok-ink);
  padding-bottom:12px;
  border-bottom:1px solid var(--ok-line);
  margin-bottom:18px;
}

.ok-sd-rcards{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:28px;
}
.ok-sd-card{
  display:flex;
  gap:16px;
  align-items:stretch;
  background:var(--ok-paper);
  border:1px solid var(--ok-line);
  border-radius:8px;
  overflow:hidden;
  text-decoration:none !important;
  color:var(--ok-ink) !important;
  transition:transform .18s ease,box-shadow .18s ease;
}
.ok-sd-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(43,51,64,.10);
}
.ok-sd-card-ph{
  flex:0 0 116px;
  min-height:96px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.ok-sd-card-noimg{
  background-image:linear-gradient(160deg,#B9CDD6,#7FA3B4 45%,#4F7186);
}
.ok-sd-card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:14px 18px 14px 0;
  min-width:0;
}
.ok-sd-card-chip{
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--ok-indigo);
}
.ok-sd-card-title{
  font-family:var(--ok-serif);
  font-size:14.5px;
  font-weight:600;
  line-height:1.65;
}
.ok-sd-card-tags{
  font-size:10.5px;
  color:var(--ok-indigo);
  letter-spacing:.04em;
}

.ok-sd-ractions{ margin-bottom:18px; }
.ok-sd-ractions .ok-sd-btn{
  background:transparent;
  color:var(--ok-indigo);
  border:1px solid var(--ok-line);
  font-weight:600;
  padding:11px 24px;
  font-size:13px;
}
.ok-sd-ractions .ok-sd-btn:hover{
  background:var(--ok-wash);
  border-color:var(--ok-indigo);
}

.ok-sd-note,
.ok-sd-empty{
  font-size:11.5px;
  color:var(--ok-sub);
  line-height:1.8;
  margin:0 !important;
}
.ok-sd-empty{
  padding:28px 20px;
  text-align:center;
  border:1px dashed var(--ok-line);
  border-radius:8px;
}

/* ---- スマホ ---- */
@media(max-width:600px){
  .ok-sd{ padding:30px 20px; margin:30px 0; border-radius:8px; }
  .ok-sd-opt{ padding:14px 16px 14px 42px; font-size:14px; }
  .ok-sd-opt::before{ left:17px; }
  .ok-sd-card-ph{ flex-basis:88px; min-height:84px; }
  .ok-sd-card-body{ padding:12px 14px 12px 0; }
  .ok-sd-btn{ width:100%; }
  .ok-sd-ractions .ok-sd-btn{ width:100%; }
}


/* ============================================================
 * 18. 診断への誘導バナー（[okunoma_shindan_banner]）
 * ==========================================================*/
.article .ok-sdb,
.ok-sdb{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  background:var(--ok-indigo-d);
  border-radius:10px;
  padding:32px 34px;
  margin:44px 0;
  text-decoration:none !important;
  color:#F2F4F1 !important;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;
}
.article .ok-sdb:hover,
.ok-sdb:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(39,68,98,.28);
}
/* 左端の金のライン */
.ok-sdb::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--ok-gold),rgba(201,154,78,0));
}

.ok-sdb-txt{
  flex:1 1 300px;
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
}
.ok-sdb-eyebrow{
  font-family:var(--ok-sans);
  font-size:10px;
  letter-spacing:.24em;
  color:var(--ok-gold);
  font-weight:600;
}
.ok-sdb-title{
  font-family:var(--ok-serif);
  font-size:clamp(18px,2.4vw,22px);
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.6;
  color:#F2F4F1;
}
.ok-sdb-lead{
  font-size:12.5px;
  line-height:1.9;
  color:#C9D2DC;
  max-width:34em;
}
.ok-sdb-cta{
  flex:0 0 auto;
  margin-left:auto;
  border:1px solid rgba(255,255,255,.55);
  border-radius:6px;
  padding:12px 26px;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.06em;
  white-space:nowrap;
  transition:background .15s ease;
}
.ok-sdb:hover .ok-sdb-cta{ background:rgba(255,255,255,.10); }

@media(max-width:600px){
  .ok-sdb{ padding:24px 20px; margin:32px 0; gap:18px; }
  .ok-sdb-cta{
    margin-left:0;
    width:100%;
    text-align:center;
  }
}


/* ============================================================
 * 19. 診断の見た目強化（17章への追加・上書き）※2026-09-18
 *     ・見出しタグをやめたぶんの字組みを再現
 *     ・イントロに情報量を足してリッチに
 * ==========================================================*/

/* 全体：和紙のような地と、四隅の余白感を強める */
.ok-sd{
  background:
    radial-gradient(circle at 92% 8%, rgba(201,154,78,.07), transparent 42%),
    radial-gradient(circle at 4% 96%, rgba(51,85,122,.06), transparent 46%),
    var(--ok-card);
  padding:52px 48px;
}

/* 見出しタグをやめたので、pでも見出しらしく見せる */
.ok-sd p.ok-sd-title{
  font-family:var(--ok-serif) !important;
  font-size:clamp(23px,3.4vw,33px) !important;
  font-weight:600 !important;
  line-height:1.5 !important;
  letter-spacing:.04em;
  color:var(--ok-ink);
  margin:0 0 16px !important;
  text-wrap:balance;
}
.ok-sd p.ok-sd-rname{
  font-family:var(--ok-serif) !important;
  font-size:clamp(27px,4.2vw,38px) !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  letter-spacing:.05em;
  color:var(--ok-ink);
  display:inline-block;
  margin:0 0 20px !important;
  padding:0 0 16px !important;
  border-bottom:2px solid var(--ok-gold) !important;
}

/* イントロ：所要時間などのメタ情報 */
.ok-sd-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 28px;
}
.ok-sd-meta span{
  font-size:11px;
  letter-spacing:.08em;
  color:var(--ok-sub);
  background:var(--ok-wash);
  border:1px solid var(--ok-line);
  border-radius:999px;
  padding:4px 13px;
}

/* イントロ：どんなタイプが出るのかの予告 */
.ok-sd-preview{
  border-top:1px solid var(--ok-line);
  border-bottom:1px solid var(--ok-line);
  padding:20px 0;
  margin:0 0 30px;
}
.ok-sd-preview-label{
  display:block;
  font-size:10.5px;
  letter-spacing:.2em;
  color:var(--ok-sub);
  margin-bottom:12px;
}
.ok-sd-preview-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
}
.ok-sd-ptag{
  font-family:var(--ok-serif);
  font-size:13px;
  color:var(--ok-indigo);
  letter-spacing:.04em;
  position:relative;
  padding-left:13px;
}
.ok-sd-ptag::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:4px; height:4px;
  margin-top:-2px;
  border-radius:50%;
  background:var(--ok-gold);
}

/* 設問：番号バッジ */
.ok-sd-qwrap{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:24px;
}
.ok-sd-qno{
  flex:0 0 auto;
  font-family:var(--ok-sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  color:#fff;
  background:var(--ok-indigo);
  border-radius:5px;
  padding:5px 9px;
  margin-top:5px;
  font-variant-numeric:tabular-nums;
}
.ok-sd-qwrap .ok-sd-q{ margin:0 !important; flex:1; }

/* 結果：カードを2カラムにして密度を上げる */
@media(min-width:760px){
  .ok-sd-rcards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .ok-sd-card{ flex-direction:column; gap:0; }
  .ok-sd-card-ph{ flex:0 0 auto; width:100%; min-height:132px; }
  .ok-sd-card-body{ padding:15px 17px 17px; }
}

/* 結果ヘッダを少し華やかに */
.ok-sd-rhead{
  position:relative;
  padding-left:15px;
  border-bottom:none;
  margin-bottom:16px;
}
.ok-sd-rhead::before{
  content:"";
  position:absolute;
  left:0; top:2px; bottom:14px;
  width:3px;
  background:var(--ok-gold);
  border-radius:2px;
}

@media(max-width:600px){
  .ok-sd{ padding:32px 20px; }
  .ok-sd-qwrap{ gap:10px; margin-bottom:20px; }
  .ok-sd-qno{ padding:4px 7px; font-size:11px; }
  .ok-sd-preview{ padding:16px 0; margin-bottom:24px; }
}