@charset "UTF-8";

/* ========================================================================== 
   TOUR COURSE — 観光モデルコース共通スタイル
   --------------------------------------------------------------------------
   使い方：HTML最外側を <section class="tour-course theme-hiraizumi"> にする。
   地域別の色は下記テーマ設定で管理し、共通レイアウトは編集不要。
   ※既存の .hc-* クラスは変更する必要がありません。
   ========================================================================== */

/* 01. デフォルトテーマ：平泉（テーマ指定なしの場合も平泉色） */
.tour-course {
  --tc-main: #27554d;
  --tc-dark: #203a35;
  --tc-muted: #697b74;
  --tc-border: #e1e8e2;
  --tc-light: #e9f2ec;
  --tc-line: #d7e5dc;
  --tc-hero-start: #214a40;
  --tc-hero-end: #477368;
  --tc-hero-eyebrow: #eee1bc;
  --tc-hero-lead: #f0f5f2;
  --tc-photo-start: #e8eee9;
  --tc-photo-end: #f4f5ee;
  --tc-photo-text: #70877c;
  --tc-accent: #86652d;
  --tc-accent-light: #f6eedc;
  --tc-link-line: #b38d4c;
  --tc-point-bg: #f3f7f3;

  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 70px;
  color: var(--tc-dark);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.85;
}

.tour-course *,
.tour-course *::before,
.tour-course *::after { box-sizing: border-box; }

/* 02. テーマカラー：クラスの追加・切り替えだけで全体に反映 */
.tour-course.theme-hiraizumi {
  /* 平泉は上記デフォルトと同じ配色 */
  --tc-main: #27554d;
}

.tour-course.theme-kesennuma {
  --tc-main: #216f9a;
  --tc-dark: #203b4a;
  --tc-muted: #627b87;
  --tc-border: #dce9ef;
  --tc-light: #e5f3fa;
  --tc-line: #d1e5ee;
  --tc-hero-start: #15516f;
  --tc-hero-end: #3888aa;
  --tc-hero-eyebrow: #d7eff8;
  --tc-hero-lead: #f2faff;
  --tc-photo-start: #e1eff5;
  --tc-photo-end: #f1f7fb;
  --tc-photo-text: #6b8d9c;
  --tc-accent: #9a553f;
  --tc-accent-light: #fff0e8;
  --tc-link-line: #78acc5;
  --tc-point-bg: #f0f8fb;
}

.tour-course.theme-gourmet {
  --tc-main: #a85b2c;
  --tc-dark: #463527;
  --tc-muted: #827264;
  --tc-border: #eee1d5;
  --tc-light: #fff0e5;
  --tc-line: #efdfd0;
  --tc-hero-start: #87441e;
  --tc-hero-end: #bf8050;
  --tc-hero-eyebrow: #ffedcb;
  --tc-hero-lead: #fff8f1;
  --tc-photo-start: #f7e9db;
  --tc-photo-end: #fff7ee;
  --tc-photo-text: #a08068;
  --tc-accent: #74522c;
  --tc-accent-light: #f7ebd6;
  --tc-link-line: #c58a60;
  --tc-point-bg: #fff7ef;
}

.tour-course.theme-onsen {
  --tc-main: #80629b;
  --tc-dark: #3d3347;
  --tc-muted: #807487;
  --tc-border: #e9e1ed;
  --tc-light: #f2ebf6;
  --tc-line: #e4d8eb;
  --tc-hero-start: #57456b;
  --tc-hero-end: #947baa;
  --tc-hero-eyebrow: #f4e5f6;
  --tc-hero-lead: #fbf6ff;
  --tc-photo-start: #eee5f1;
  --tc-photo-end: #faf5fa;
  --tc-photo-text: #96819d;
  --tc-accent: #855778;
  --tc-accent-light: #f8eaf3;
  --tc-link-line: #ad90bc;
  --tc-point-bg: #f9f4fa;
}

/* 03. ファーストビュー */
.tour-course a { color: inherit; }

.tour-course .hc-hero {
  color: #fff;
  background:
    radial-gradient(circle at 90% 15%, rgba(255, 255, 255, .14), transparent 36%),
    linear-gradient(120deg, var(--tc-hero-start), var(--tc-hero-end));
  border-radius: 18px;
  padding: clamp(27px, 5vw, 55px);
  margin-bottom: 42px;
}

.tour-course .hc-eyebrow {
  margin: 0 0 8px;
  color: var(--tc-hero-eyebrow);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
}

.tour-course .hc-hero h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 4vw, 32px); /* 最大32px */
  font-weight: 700;
  line-height: 1.45;
}

.tour-course .hc-lead {
  max-width: 760px;
  margin: 14px 0 21px;
  color: var(--tc-hero-lead);
  font-size: 15px;
}

.tour-course .hc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.tour-course .hc-facts span {
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 99px;
  background: rgba(255, 255, 255, .09);
  font-size: 12px;
}

/* 04. タイムライン・時刻 */
.tour-course .hc-timeline { position: relative; }

.tour-course .hc-timeline::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 78px;
  width: 2px;
  background: var(--tc-line);
}

.tour-course .hc-item,
.tour-course .hc-transfer {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  position: relative;
}

.tour-course .hc-time {
  position: relative;
  padding: 19px 16px 0 0;
  color: var(--tc-main);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tour-course .hc-time::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 25px;
  left: 72px;
  width: 12px;
  height: 12px;
  border: 3px solid var(--tc-main);
  border-radius: 50%;
  background: #fff;
}

/* 05. スポットカード：PCもスマホも写真→本文の縦積み */
.tour-course .hc-card {
  display: block;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tc-border);
  border-radius: 15px;
  box-shadow: 0 6px 22px rgba(32, 58, 53, .055);
}

.tour-course .hc-photo {
  height: 245px;
  overflow: hidden;
  background: var(--tc-photo-start);
}

.tour-course .hc-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tour-course .hc-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 20px;
  color: var(--tc-photo-text);
  text-align: center;
  background: linear-gradient(145deg, var(--tc-photo-start), var(--tc-photo-end));
}

.tour-course .hc-placeholder b {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .23em;
}

.tour-course .hc-placeholder small { font-size: 12px; }
.tour-course .hc-body { padding: 25px 27px; }

.tour-course .hc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 9px;
}

.tour-course .hc-tag {
  padding: 3px 9px;
  border-radius: 4px;
  color: var(--tc-main);
  background: var(--tc-light);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.tour-course .hc-tag--gold {
  color: var(--tc-accent);
  background: var(--tc-accent-light);
}

.tour-course .hc-body h3 {
  margin: 0 0 8px;
  color: var(--tc-dark);
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.45;
}

.tour-course .hc-body p {
  margin: 0 0 14px;
  font-size: 14px;
}

.tour-course .hc-duration {
  margin: 0 0 12px !important;
  color: var(--tc-muted);
  font-size: 12px !important;
  font-weight: 700;
}

.tour-course .hc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tc-main) !important;
  border-bottom: 1px solid var(--tc-link-line);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.tour-course .hc-link:hover { opacity: .7; }

/* 06. 移動時間・スタート／ゴール */
.tour-course .hc-transfer {
  min-height: 61px;
  align-items: center;
}

.tour-course .hc-transfer-label {
  grid-column: 2;
  padding: 17px 0 17px 20px;
  color: var(--tc-muted);
  font-size: 12px;
}

.tour-course .hc-transfer-label::before {
  content: "🚗";
  margin-right: 8px;
}

.tour-course .hc-point {
  padding: 14px 19px;
  color: var(--tc-dark);
  background: var(--tc-point-bg);
  border: 1px solid var(--tc-border);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
}

.tour-course .hc-point strong { color: var(--tc-main); }

/* 07. カード内のランチ紹介 */
.tour-course .hc-lunch {
  display: block;
  margin-top: 21px;
  padding-top: 21px;
  border-top: 1px solid var(--tc-border);
}

.tour-course .hc-lunch .hc-photo {
  height: 170px;
  margin-bottom: 12px;
  border-radius: 9px;
}

.tour-course .hc-lunch h4 {
  margin: 0 0 3px;
  color: var(--tc-dark);
  font-size: 15px;
  line-height: 1.5;
}

.tour-course .hc-lunch p {
  margin: 0;
  font-size: 12px;
}

.tour-course .hc-lunch .hc-placeholder b { font-size: 18px; }
.tour-course .hc-lunch .hc-placeholder small { font-size: 12px; }

/* 08. 注記 */
.tour-course .hc-notes {
  margin-top: 35px;
  padding-top: 15px;
  color: var(--tc-muted);
  border-top: 1px solid var(--tc-border);
  font-size: 12px;
}

/* 09. 狭い画面でもタイムラインを見やすく */
@media (max-width: 750px) {
  .tour-course { padding: 15px 12px 40px; }
  .tour-course .hc-hero { margin-bottom: 27px; border-radius: 12px; }
  .tour-course .hc-timeline::before { left: 16px; }

  .tour-course .hc-item,
  .tour-course .hc-transfer { grid-template-columns: 40px minmax(0, 1fr); }

  .tour-course .hc-time { padding: 0; font-size: 12px; }

  .tour-course .hc-time time {
    display: block;
    position: relative;
    left: 49px;
    top: 0;
    width: 120px;
    margin-bottom: 7px;
  }

  .tour-course .hc-time::after { left: 10px; top: 7px; }
  .tour-course .hc-card,
  .tour-course .hc-point { grid-column: 2; }

  .tour-course .hc-card { display: block; }
  .tour-course .hc-card > .hc-photo { height: 190px; }
  .tour-course .hc-body { padding: 19px; }
  .tour-course .hc-transfer { min-height: 60px; }
  .tour-course .hc-transfer-label { padding-left: 9px; }
  .tour-course .hc-item { row-gap: 28px; }
  .tour-course .hc-item--point { row-gap: 27px; }
  .tour-course .hc-lunch .hc-photo { height: 145px; }
}