@charset "UTF-8";
/* CSS Document */
:root{
  --ink:#0a0c0e; --muted:#6b7076; --line:#e9e7e2;
  --gold:#c7a76a; --gold-deep:#b5914f; --overlay:rgba(8,10,12,.32);
  --bg-soft:#f7f7f5; --radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans JP",sans-serif;
  color:var(--ink); background:#fff; line-height:1.85; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Noto Serif JP',serif; font-weight:600; letter-spacing:.02em; color:var(--ink)}
a{text-decoration:none}
.sp-br {
  display:none; /* PCでは非表示 */
}
.textlink{color:var(--gold,#c7a76a);border-bottom: 1px dotted var(--gold,#c7a76a);padding-right: 18px;background: url(../img/link.png) right center/16px auto no-repeat;
}
.smalltext{font-size: 90%;}

@media (max-width: 860px) {
  .sp-br {
    display:inline; /* SPでは改行を有効に */
  }
}

/* ===== Hero (mp4 背景) ===== */
.hero{
  position:relative;
  width:100%;
  /* PCは横長（≒19:6）に近い高さに。高さはvw基準で安定させる */
  height:clamp(420px, 31.6vw, 720px); /* 6/19 ≒ 0.3158 → 31.6vw */
  overflow:hidden;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.48));
  pointer-events:none;
}

/* 背景動画 */
.hero-bg{ position:absolute; inset:0; overflow:hidden; }
.hero-bg video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;       /* 画面いっぱいに表示（過度な拡大なし） */
  object-position:center; /* 中央基準でトリミング */
  pointer-events:none;
}

/* 左上の黒帯 */
.notice-overlay{
  position:absolute;
  top:0;
  right:0;
  background:#000;
  padding:15px 25px;          /* 余白なし */
  z-index:2;
}
.notice-overlay p{
  margin:0;           /* 余白なし */
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;      /* 可能な限りコンパクトに */
}

/* 中央コンテンツ */
.hero-inner{ position:relative; z-index:2; max-width:960px; padding:0 20px; }
.hero-title{
  color:#fff; margin:0 0 10px; font-weight:700;
  text-shadow:0 2px 6px rgba(0,0,0,.6); /* 白文字に影 */
  font-size:2.4rem; line-height:1.2;
}
.lead{ margin:.4em 0 0; text-shadow:0 2px 6px rgba(0,0,0,.45); }
.hero-cta{ margin-top:14px; }
.btn-primary{
  display:inline-block;
  margin:10px 6px;
  padding:12px 24px;
  background:var(--gold);     /* ゴールド背景 */
  color:#fff;                 /* 白文字 */
  border:1px solid var(--gold);
  font-weight:700;
  letter-spacing:.02em;
}
.btn-primary:hover{
  background:var(--gold-deep);    /* 濃いゴールド */
  border-color:var(--gold-deep);
}

/* PC/SP 表示切替のユーティリティ（まずデフォルトを定義） */
.pc-only{ display:inline; }
.sp-only{ display:none; }

/* --- スマホ調整（iPhone 12 Pro想定：高さを画面の2/3に） --- */
@media (max-width:860px){
  .hero{
    height:66vh;        /* 画面の約2/3 */
    min-height:480px;   /* 低すぎ防止 */
  }
  .hero-title{ font-size:28px; line-height:1.35; }
  .pc-only{ display:none; }
  .sp-only{ display:inline; }
  /* 被写体が上寄りの動画なら少し下を見せる（必要に応じ微調整） */
  .hero-bg video{ object-position:center 55%; }
}

/* ===== About Okuma ===== */
/* ===== About Okuma ===== */
.about.card-section{
  background:#fff;
  margin:36px auto 0;
  max-width:1200px;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.about .about-hero{
  margin:0 0 14px;
  overflow:hidden;
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  position:relative;
}

/* SPは高さを画像の自然寸法に任せる（縦に間伸びしない） */
.about .about-hero img{
  display:block;
  width:100%;
  height:auto;                 /* ← SPは auto に。%高さ依存を避ける */
  object-fit:cover;
  object-position:center;
  opacity:0;
  transform:translateY(30px);
  transition:
    opacity 3s cubic-bezier(.25,.8,.25,1),
    transform 3s cubic-bezier(.25,.8,.25,1);
  box-shadow:none;
}

/* PCだけは“帯”っぽく見せるために高さを決め、img を100%に */
@media (min-width:861px){
  .about .about-hero{ height:200px; }   /* ご指定の「現状の1/3」相当 */
  .about .about-hero img{ height:100%; }
}

/* IntersectionObserver が付与する .is-visible を採用 */
.about .about-hero.is-visible img{
  opacity:1;
  transform:translateY(0);
}

/* アイブロウ・タイトル・本文（余白をタイトに） */
.about .eyebrow{
  display:block;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 6px;
  padding:0 20px;
}
.about h2{
  margin:0 0 6px;
  padding:0 20px;
  font-size:20px;          /* SPで1行に収まりやすいサイズ */
  line-height:1.6;
}
.about .sub{
  padding:0 20px 8px;
  margin:0;
  color:var(--ink);
}

/* 各OTAへのボタン（角丸ナシ） */
.about .cta-row{
  padding:10px 20px 40px;
  display:flex; flex-wrap:wrap; gap:8px;
}
.about .cta-row .btn-solid-gold{
  border-radius:0;               /* ← 角丸ナシ */
  padding:5px 12px;
  border:1px solid var(--gold);
  color:var(--gold);
  background:#fff;
  font-weight:700;
  font-size:14px;                /* ← 14px 指定 */
}
.about .cta-row .btn-solid-gold:hover{
  border-color:var(--gold-deep);
  color:var(--gold-deep);
}

/* ===== 統合比較ブロック（タブ＋横スクロール） ===== */

/* 見出し・導入 */
.plans-compare{
  padding:48px 16px 28px;
  background:#f7f7f5;
  text-align:center;
}
.plans-compare .eyebrow{
  font-family:'Great Vibes',cursive;
  font-size:24px;
  letter-spacing:.02em;
  color:var(--gold,#c7a76a);
  display:block;
  margin-bottom:4px;
}
.plans-compare h2{
  font-family:'Noto Serif JP',serif;
  font-size:20px;
  line-height:1.4;
  margin:0 0 12px;
}
.plans-compare .intro{
  color:var(--muted,#6b7076);
  max-width:800px;
  margin:0 auto 28px;
  font-size:15px;
}

/* タブ（Special / Premium）+「or」 */
.plan-tabs{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin:0 auto 20px;
}
.plan-tabs [data-role="plan-tab"]{
  appearance:none;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:12px 18px;
  font-family:'Playfair Display',serif;
  font-weight:600;
  font-size:22px;
  color:#0a0c0e;
  position:relative;
}
.plan-tabs [data-role="plan-tab"]::after{
  content:"";
  display:block;
  height:2px;
  width:0;
  margin-top:8px;
  background:linear-gradient(90deg, var(--gold,#c7a76a), var(--gold-deep,#b5914f));
  transition:width .35s ease;
}
.plan-tabs [data-role="plan-tab"].active::after{ width:100%; }
.plan-tabs .or-label{
  font-family:'Playfair Display',serif;
  font-size:16px;
  color:#6b7076;
}

/* 横スライダー（タブ連動＋スワイプ） */
.plan-slider{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  max-width:1200px;
  margin:0 auto;
  border:1px solid #e9e7e2;
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.plan-pane{
  flex:0 0 100%;
  scroll-snap-align:start;
  display:block;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.plan-pane.active{
  opacity:1;
  pointer-events:auto;
}

/* 写真 */
.pc-photo{
  position:relative;
  margin:0;
  overflow:hidden;
}
.pc-photo img{
  display:block;
  width:100%;
  height:320px;
  object-fit:cover;
  object-position:center;
}
/* プレミアム専用特典（ゴールド星マーク付き） */
.pc-body ul {
  list-style: none;          /* ← 黒丸を全体で消す */
  padding-left:0;
  margin:0;
}
.pc-body li {
  position:relative;
  padding-left:1.4em;
}
.pc-body li::before {
  content:"・";               /* 通常は黒丸を疑似要素で描画 */
  position:absolute;
  left:0;
  top:0;
  color:#333;
  font-size:1em;
  line-height:1.4;
}
.pc-body li.premium-only::before {
  content:"★";               /* プレミアム専用はゴールド星に変更 */
  color:var(--gold,#c7a76a);
  font-size:18px;
}

@media (max-width:860px){
  .pc-photo img{ height:240px; }
}

/* 画像上の筆記体ラベル */
@import url("https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap");
.script-eyebrow{
  position:absolute;
  left:-10px;
  bottom:-16px;
  font-family:'Great Vibes',cursive;
  font-size:120px;
  line-height:1;
  color:#fff;
  text-shadow:0 3px 12px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.4);
  opacity:0;
  transform:translateY(24px);
  transition:opacity 1s ease, transform 1s ease;
  pointer-events:none;
}
.plan-pane[data-plan-panel="premium"] .script-eyebrow{
  left:auto; right:16px;
}
.plan-pane.active .script-eyebrow.is-visible{
  opacity:1; transform:none;
}
@media (max-width:860px){
  .script-eyebrow{ font-size:84px; left:-10px; bottom:-18px; }
  .plan-pane[data-plan-panel="premium"] .script-eyebrow{ right:-5px; }
}

/* 比較表本文 */
.pc-head{
  padding:18px 20px 6px;
  text-align:left;
}
.pc-head h3{
  margin:0;
  font-family:'Playfair Display',serif;
  font-size:22px;
}
.pc-body{
  padding:0 20px;
  text-align:left;
}
.pc-body h4{
  margin:14px 0 6px;
  font-size:15px;
  color:var(--gold,#c7a76a);
}
.pc-body ul{
  margin:0;
  padding-left:0px;
  font-size:14px;
}
.pc-body li{ margin:4px 0; }
.pc-body ul.benefit li strong{ color:#0a0c0e; }
/* プレミアム注釈 */
.premium-note {
  font-size: 14px;
  color: var(--gold,#c7a76a);
  margin: 4px 0 0;
}

/* 予約導線（飾り線調整） */
.reserve-cards{
  padding:28px 16px 28px;
  margin-top:22px;
  text-align:left;
  position:relative;
}
.reserve-cards::before{
  content:"";
  position:absolute;
  left:20px; right:20px; top:14px;
  height:3px;
  background:linear-gradient(90deg, transparent, rgba(199,167,106,.85), transparent);
}
.reserve-header{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  margin-bottom:8px;
}
.reserve-deco{ display:none; }
.reserve-title{
  margin:20px 0 15px;
  font-size:20px;
  font-family:'Playfair Display',serif;
  color:var(--gold,#c7a76a);
  text-align:center;
}

/* 予約カード（PC横並び2列・SP縦） */
.reserve-cards .cards-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width:860px){
  .reserve-cards .cards-grid{
    grid-template-columns:1fr 1fr;
  }
}
.reserve-cards .card{
  background:#fff;
  border:1px solid #e9e7e2;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:16px;
}
.reserve-cards .card h5{
  margin:0 0 6px;
  font-size:15px;
  color:var(--gold,#c7a76a);
}
.reserve-cards .card .model{
  margin:0 0 12px;
  color:#6b7076;
  font-size:13px;
}

/* 予約カード：設定期間の表示 */
.period{
  width:100%;
  font-size:12px;
  color:#6b7076;
  margin-bottom:12px;
  letter-spacing:.02em;
}

/* 出発地・日数（常に横並び） */
.controls{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.controls .field{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 0 0;
  min-width:140px;
}
.controls .label{ font-size:12px; }

/* セレクト */
.reserve-cards select{
  padding:10px 12px;
  width:100%;
  border:1px solid var(--gold,#c7a76a);
  border-radius:0;
  background:#fff;
  font-size:14px;
  font-weight:500;
  appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="%23c7a76a" d="M4 6l4 4 4-4"/></svg>');
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:14px;
  padding-right:32px;
}
.reserve-cards select:focus{
  outline:none;
  border-color:var(--gold-deep,#b5914f);
  box-shadow:0 0 0 2px rgba(199,167,106,.18);
}

/* 価格・ボタン */
.bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:15px;
}
.price{
  font-size:24px;
  color:#70562b;
  font-weight:700;
}
.btn-solid-gold.book{
  background:var(--gold,#c7a76a);
  color:#fff;
  border:1px solid var(--gold,#c7a76a);
  padding:5px 15px;
  font-weight:700;
  transition:.2s ease;
}
.btn-solid-gold.book:hover{
  background:var(--gold-deep,#b5914f);
  border-color:var(--gold-deep,#b5914f);
  transform:translateY(-1px);
}

/* 備考 */
.plans-compare .note{
  font-size:12px;
  color:#6b7076;
  margin-top:20px;
  text-align: left;
}

/* フェードアップ */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.is-visible{ opacity:1 !important; transform:none !important; }

/* モバイル調整 */
@media (max-width:860px){
  .plans-compare{ padding:36px 10px 22px; }
  .plan-tabs{ position:sticky; top:0; z-index:5; padding: 0; }
  .pc-head h3{ font-size:20px; }
  .price{ font-size:24px; }
}

/* =========================
   Model Course：導入デザイン（復活）
   ========================= */
.model-course{
  padding:48px 16px;
  background:#fff;
  max-width:1100px;
  margin:0 auto;
  text-align:left;
}
.model-course .eyebrow{
  display:block;
  letter-spacing:.16em;
  font-size:12px;
  color:var(--gold,#c7a76a);
  margin-bottom:6px;
}
.model-course h2{
  font-family:'Noto Serif JP',serif;
  font-size:24px;
  margin:0 0 8px;
}
.model-course .intro{
  color:var(--muted,#6b7076);
  margin:0 0 18px;
  font-size:14.5px;
}

/* =========================
   Model Course：タブ（横4分割／アクティブ金背景）
   ========================= */
.mc-tabs{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  margin:12px 0 16px;
  border:1px solid var(--line,#e9e7e2);           /* ← グレー背景や線を撤廃 */
}
.mc-tabs [data-role="mc-tab"]{
  appearance:none; background:#fff; border:none; cursor:pointer;
  padding:12px 8px;
  font-family:'Noto Serif JP',serif;
  font-weight:600; letter-spacing:.02em;
  font-size:16px; color:#2a2e33;
  position:relative;
}
.mc-tabs [data-role="mc-tab"] + [data-role="mc-tab"]{
  border-left:1px solid var(--line,#e9e7e2); /* タブ間の区切り線のみ残す */
}
.mc-tabs [data-role="mc-tab"]:hover{ background:#fbf8f1; }
.mc-tabs [data-role="mc-tab"].active{
  background:linear-gradient(180deg, var(--gold,#c7a76a), var(--gold-deep,#b5914f));
  color:#fff;
}
@media (max-width:640px){
  .mc-tabs [data-role="mc-tab"]{ padding:10px 6px; font-size:15px; }
}


/* =========================
   Model Course：横スワイプ容器（復活）
   ========================= */
.mc-panels{
  display:flex;                       /* ← これがないと全パネル縦積みになります */
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line,#e9e7e2);
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
}
/* パネル可視制御（非アクティブを不可視） */
.mc-pane{
  flex:0 0 100%;
  scroll-snap-align:start;
  display:block;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  padding:14px 14px 20px;
}
.mc-pane.active{
  opacity:1;
  pointer-events:auto;
}
@media (max-width:640px){
  .mc-pane{ padding:10px 10px 16px; }
}

/* =========================================
   Timeline（外枠罫線なし・縦ラインは金系グラデ）
   ========================================= */
.timeline{
  list-style:none; margin:0; padding:8px 0 8px 92px;
  border:none;                /* ← 外枠完全に削除 */
  position:relative;
}
.timeline::before{
  content:""; position:absolute; left:46px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, rgba(199,167,106,.15), rgba(199,167,106,.55));
}
.timeline li{
  display:grid; grid-template-columns:92px 1fr; column-gap:5px;
  padding:18px 0; position:relative;
}
.timeline li + li{ border-top:1px dashed rgba(0,0,0,.06); } /* 各項目間だけ区切り */

.timeline .time{
  grid-column:1/2; position:relative;
  font-family:'Noto Serif JP',serif; font-size:14px; color:#1e2328;
}
.timeline .time::before{
  content:""; position:absolute; left:-46px; top:.42em;
  width:12px; height:12px; background:#fff;
  border:2px solid var(--gold,#c7a76a); border-radius:50%;background: var(--gold,#c7a76a);
  box-shadow:0 0 0 3px #fff; transform:translateX(-50%);
}

.timeline .detail{ grid-column:2/3; }
.timeline .detail h4{
  margin:0 0 4px; font-size:16px; color:#0a0c0e; font-weight:700;
}
.timeline .detail p{
  margin:0 0 8px; color:#31363b; line-height:1.9; font-size:14px;
}
.model-course .btn-outline{
  display:inline-block; padding:5px 12px;
  border:1px solid var(--gold,#c7a76a); background:#fff; color:var(--gold,#c7a76a);
  font-weight:700; text-decoration:none; letter-spacing:.02em; font-size: 14px;
}

@media (max-width:640px){
  .timeline{ padding-left:25px; }
  .timeline::before{ left:9px; }
  .timeline li{ grid-template-columns:50px 1fr; }
  .timeline .time::before{ left:-15px; }
}
/* =========================
   5) おすすめ旅行グッズ（9アイテム）
   ========================= */
.travel-goods{
  padding:48px 16px 56px;
  background:#fff;
  max-width:1200px;
  margin:0 auto;
  text-align:left;
}
.travel-goods .eyebrow{
  display:block;
  letter-spacing:.16em;
  font-size:12px;
  color:var(--gold,#c7a76a);
  margin-bottom:6px;
}
.travel-goods h2{
  font-family:'Noto Serif JP',serif;
  font-size:24px;
  margin:0 0 18px;
}

/* PC: 3列×3行 / SP: 横スクロール */
.goods-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:900px){
  .goods-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .goods-grid{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:14px;
    scroll-snap-type:x mandatory;
    padding-bottom:8px;
  }
}

/* カード */
.goods-grid .item{
  border:1px solid var(--line,#e9e7e2);
  background:#fff;
  /* 角丸なし（高級・直線） */
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding:0;
  scroll-snap-align:start;
  min-width:0;
}
@media (max-width:640px){
  .goods-grid .item{ flex:0 0 78%; }
}

/* カード本体：白背景＆内側余白 */
.goods-grid .item{
  background:#fff;
  border:1px solid #e9e7e2;
  padding:12px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  /* 角丸なし */
}

/* 画像まわり：はみ出し防止＆中央配置 */
.goods-grid .item img{
  display:block;
  /* ここがポイント：横100%をやめて、カード内で最大値制御に */
  width:auto;
  height:auto;
  max-width:100%;
  max-height:clamp(140px, 24vw, 220px); /* 画面に応じて伸縮 */
  object-fit:contain;                    /* 切り抜かず収める */
  background:#fff;                       /* 画像の下地も白 */
  margin:5px 0;                     /* タイトル等と干渉しない余白 */
}

/* figureや画像の親がある場合の余白リセット */
.goods-grid .item figure{ margin:0; }

/* タイトル等が縦書きで画像に被る場合の保険（あれば適用） */
/* .goods-grid .item .title{ writing-mode:horizontal-tb; } */

/* ---- モバイル横スライド時もレイアウトが崩れないように ---- */
@media (max-width:640px){
  .goods-grid{
    display:flex;
    overflow-x:auto;
    gap:14px;
    padding:6px 4px 10px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .goods-grid .item{
    flex:0 0 85%;
    scroll-snap-align:start;
  }
}

.goods-grid .item h4{
  font-size:16px;
  margin:10px 12px 4px;
  font-weight:700;
}
.goods-grid .item p{
  font-size:13.5px;
  color:#31363b;
  margin:0 12px 10px;
  line-height:1.8;
}

/* ショップ導線（Amazon / Yahoo! / 楽天市場） */
.goods-grid .links{
  display:flex;
  gap:8px;
  padding:0 12px 5px;
  flex-wrap:wrap;
}
.goods-grid .links .btn-shop{
  display:inline-block;
  padding:4px 12px;
  border:1px solid var(--gold,#c7a76a);
  background:#fff;
  color:var(--gold,#c7a76a);
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  letter-spacing:.02em;
  white-space:nowrap;
}
.goods-grid .links .btn-shop:hover{
  border-color:var(--gold-deep,#b5914f);
  color:var(--gold-deep,#b5914f);
}

/* Travel Goods：モバイル横スクロールの質感を強化 */
@media (max-width:640px){
  .goods-grid{
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;   /* ← 自動スクロールを滑らかに */
  }
  .goods-grid .item{ scroll-snap-align:start; }
}
/* オートプレイ一時停止時の見た目（任意） */
.goods-grid.is-paused { cursor: pointer; }
/* =========================
   6) 編集担当者コメント（丸アイコン）
   ========================= */
.editor-comment{
  padding:40px 16px 56px;
  background:#fff;
}
.editor-comment .comment-card{
  max-width:960px;
  margin:0 auto;
  background:#f3f4f6;                 /* 落ち着いたグレー背景 */
  border:1px solid var(--line,#e9e7e2);
  /* 角丸なし */
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding:20px;
  display:flex; gap:16px; align-items:flex-start;
  position:relative;
}
.editor-comment .comment-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--gold,#c7a76a), var(--gold-deep,#b5914f));
}

/* 丸で切り抜いたアイコン */
.editor-comment .avatar{
  width:64px; height:64px; flex:0 0 64px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid var(--gold,#c7a76a);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  background:#fff center/cover no-repeat;
}
.editor-comment .avatar img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* テキスト部 */
.editor-comment .comment-body{ flex:1; min-width:0; }
.editor-comment .title{
  margin:2px 0 6px;
  font-family:'Playfair Display',serif;
  font-size:18px;
  color:#0a0c0e;
  letter-spacing:.01em;
}
.editor-comment .text{
  margin:0 0 10px;
  line-height:1.9;
  color:#31363b;
  font-size:14.5px;
}
.editor-comment .meta{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:#6b7076;
}
.editor-comment .meta .dot{ opacity:.6; }

@media (max-width:640px){
  .editor-comment .comment-card{ padding:16px; gap:12px; }
  .editor-comment .avatar{ width:56px; height:56px; flex-basis:56px; }
}

/* ===== Survey Section (独立ブロック) ===== */
.survey-section{
  padding:40px 20px;
  background:#f9f9f7;
}
.survey-card{
  max-width:720px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--line,#e9e7e2);
  /* 角丸なし */
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:28px 24px;
  text-align:center;
}
.survey-card .survey-title{
  font-family:'Playfair Display',serif;
  font-size:20px;
  letter-spacing:.02em;
  margin:0 0 10px;
  color:var(--ink,#0a0c0e);
}
.survey-card .survey-desc{
  font-size:14px;
  color:var(--muted,#6b7076);
  margin:0 0 16px;
	text-align: left;
}
.survey-card .btn-survey{
  display:inline-block;
  padding:10px 20px;
  background:var(--gold,#c7a76a);
  color:#fff;
  border:1px solid var(--gold,#c7a76a);
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  /* 角丸なし */
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.survey-card .btn-survey:hover{
  background:var(--gold-deep,#b5914f);
  border-color:var(--gold-deep,#b5914f);
  transform:translateY(-1px);
}
/* ===== Footer ===== */
.site-footer {
  background:#202020;
  color:#ccc;
  text-align:center;
  padding:20px;
  font-size:13px;
}
.site-footer p {
  margin:0;
}

/* JSフォールバック：
   初期は表示しておき、js-ready 付与後にリビール制御 */
[data-reveal]{ opacity:1; transform:none; }
.js-ready [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.js-ready .is-visible{ opacity:1 !important; transform:none !important; }