@import url('https://fonts.googleapis.com/css2?family=Carattere&family=Inter:opsz,wght@14..32,100..900&display=swap');
:root{
  --navy:#142849;
  --orange:#ff6f00;
  --muted:#6B7280;
  --line:#E5E7EB;
  --soft:#F6F7F9;
  --radius:10px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --header-h: 64px;
}

*{box-sizing:border-box}
html{
  scroll-behavior: smooth;
}
html,body{margin:0;padding:0}
body{
  font-family:Inter, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color:#0f172a;
  background:#fff;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1160px, 92vw); margin-inline:auto;padding: 40px 0;}

.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#fff;padding:10px 12px;border-radius:6px;box-shadow:var(--shadow);z-index:9999}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

section[id]{
  scroll-margin-top: calc(var(--header-h) + 16px);
}
/* ===== Section Head (Popular Experiences) ===== */

/* 共通：セクションヘッダの余白と整列 */
.section-head{
  margin-bottom: 18px;
}

/* row版：基本は縦積み＋右寄せリンク（モバイル想定） */
.section-head-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  align-items: start;
}

/* タイトル */
.section-title{
  margin: 0;
  color: var(--navy);
  font-weight: 800;
  line-height: 1.25;
  font-size: clamp(18px, 2.2vw, 28px);
  letter-spacing: .01em;
}

/* サブタイトル */
.section-subtitle{
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.5;
  font-size: 14px;
}

/* 右上リンク（View All） */
.link-more{
  justify-self: end;            /* 要望：右寄せ */
  align-self: start;
  color: var(--navy);           /* 要望：navy */
  text-decoration: underline;   /* 要望：下線 */
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  font-weight: 800;
  font-size: 14px;
  padding: 6px 8px;             /* クリックしやすくする工夫 */
  border-radius: 10px;
  transition: .2s ease;
}

/* hover工夫：下線と背景 */
.link-more:hover{
  background: rgba(0,0,0,0.04);
  text-decoration-thickness: 2px;
}

/* “View All →” の矢印だけ少し動かす（任意） */
.link-more::after{
  content: "";
}

/* ===== PCでの見栄え最適化 ===== */
@media (min-width: 900px){
  .section-head-row{
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .section-head-left{
    text-align: left;  /* PCでは左寄せにすると自然（おすすめ） */
  }

  .section-subtitle{
    max-width: 52ch;   /* 横長時に読みやすい行幅に制限 */
  }

  .link-more{
    align-self: center;
  }
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid rgba(229,231,235,.85);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand-logo{height:34px;width:auto;display:block}
.brand{ flex: 0 0 auto; }
/* Desktop Nav */
.site-nav{
  display:flex;
  align-items:center;
  gap:18px;
  color:var(--navy);
  font-weight:800;
  font-size:14px;

  flex-wrap: nowrap;     /* 追加：折り返し禁止 */
  white-space: nowrap;   /* 追加：文字折返し禁止 */
  flex: 1 1 auto;
  justify-content: flex-end;
}
.nav-item{position:relative; display:flex; align-items:center;gap: 10px;}
.nav-link{
  color:var(--navy);
  opacity:.92;
}
.nav-link:hover{opacity:1}

.nav-caret{
  display:inline-block;
  width:0;
  height:0;
  margin-left:6px;
  vertical-align:middle;
  border-left:  4px solid transparent;
  border-right: 4px solid transparent;
  border-top:   5px solid currentColor; /* ▾ 下向き三角 */
}


/* --- PC dropdown fix --- */
.has-dropdown{ position: relative; }

/* 隙間をなくす */
.dropdown{
  position:absolute;
  top:100%;            /* ← calc(100% + xx) をやめる */
  left:0;
  margin-top:10px;     /* 見た目の余白は margin で出す */
  min-width:220px;
  background:#fff;
  border:1px solid rgba(229,231,235,.9);
  border-radius:6px;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
  padding:10px;
  z-index:1000;
  /* ↓ アニメ用：最初は見えない状態 */
  display:block;            /* ← これが重要（noneにしない） */
  opacity:0;
  transform: translateY(-8px) scale(.98);
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s linear .18s; /* 消える時に遅延 */
}
.dropdown a,
.dropdown-link{
  display:block;               /* ← 1行1項目に */
  white-space:nowrap;          /* 折り返し防止（必要なら外す） */
  padding:10px 12px;
  border-radius:6px;
  font-weight:800;
  color:var(--navy);
}
.dropdown a + a,
.dropdown-link + .dropdown-link{
  margin-top:6px;              /* ← 縦方向の間隔 */
}
/* hover時の見た目（任意：読みやすさUP） */
.dropdown a:hover,
.dropdown-link:hover{
  background:rgba(230,126,34,.10);
}
/* click-open 用 */
.dropdown.is-open{
  opacity:1;
  transform: translateY(0) scale(1);
  visibility:visible;
  pointer-events:auto;

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s;
}
/* マウスが通る“橋”を作って hover が切れないようにする */
.has-dropdown::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:12px;     /* ←この高さ分、隙間を埋める */
}

/* hover / focus で開く */
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{
  opacity:1;
  transform: translateY(0) scale(1);
  visibility:visible;
  pointer-events:auto;

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s;
}


/* ========================================
   Language Switcher Styling
   ======================================== */

/* PC Header - Language Dropdown */
.nav-item.lang-switch {
  position: relative;
}

.nav-item.lang-switch .lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease;
  white-space: nowrap;
}

.nav-item.lang-switch .lang-btn:hover {
  border-color: var(--orange);
}

.nav-item.lang-switch .dropdown--lang {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 150px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  z-index: 1000;
}

.nav-item.lang-switch:hover .dropdown--lang,
.nav-item.lang-switch .lang-btn:focus + .dropdown--lang {
  display: block;
}

.nav-item.lang-switch .dropdown--lang .dropdown-link {
  display: block;
  padding: 10px 16px;
  color: var(--navy);
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.nav-item.lang-switch .dropdown--lang .dropdown-link:hover {
  background-color: var(--soft);
}

.nav-item.lang-switch .dropdown--lang .dropdown-link.current {
  color: var(--orange);
  font-weight: 600;
  background-color: rgba(255, 111, 0, 0.05);
}

/* Mobile Menu - Language */
.mobile-item--has-sub .mobile-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
}

.mobile-submenu-panel--lang {
  padding: 8px 0;
}

.mobile-submenu-panel--lang .mobile-sublink {
  display: block;
  padding: 12px 20px;
  color: var(--navy);
  text-decoration: none;
  font-size: 15px;
  transition: background-color 0.2s ease;
}

.mobile-submenu-panel--lang .mobile-sublink:hover {
  background-color: var(--soft);
}

.mobile-submenu-panel--lang .mobile-sublink.current {
  color: var(--orange);
  font-weight: 600;
  background-color: rgba(255, 111, 0, 0.05);
}



/* CTA */
.nav-cta{
  margin-left:auto;      /* 変更：右寄せの決定打 */
  padding:10px 14px;
  border-radius:6px;
  background:var(--orange);
  color:#fff;
  font-weight:950;
  white-space:nowrap;
  display:inline-flex;   /* 保険：block化を防ぐ */
  align-items:center;
}
.nav-cta:hover{filter:brightness(.95)}

/* ✅ Desktop/Default: hide mobile menu completely */
.mobile-nav,
.mobile-nav-backdrop{
  display: none;
}

/* Mobile */
.nav-toggle{display:none;border:0;background:transparent;padding:10px;border-radius:6px;cursor:pointer}
.nav-toggle-lines{width:22px;height:14px;display:block;position:relative}
.nav-toggle-lines:before,.nav-toggle-lines:after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--navy);border-radius:2px}
.nav-toggle-lines:before{top:2px}
.nav-toggle-lines:after{bottom:2px}


/* Responsive */
@media (max-width: 980px){
  .site-nav{display:none}
  .nav-toggle{display:inline-flex}
}
/* ===== Mobile: top sheet menu (uses backdrop) ===== */

@media (max-width: 980px){

  /* backdrop（背面暗転） */
  .mobile-nav-backdrop{
    display:block;                 /* 表示は常時block、見え方はopacityで制御 */
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    z-index:10000;

    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
  }
  .mobile-nav-backdrop.is-open{
    opacity:1;
    pointer-events:auto;
  }

  /* メニュー本体：上から出る“シート”（衝突を全部排除した安定版） */
.mobile-nav{
  display:block;
  position:fixed;
  top: calc(var(--header-h, 64px) + 10px);
  left: 12px;
  right: 12px;
  z-index:10001;

  /* 横幅のはみ出し防止：vwを使わず、左右固定＋max-widthだけ */
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;

  background: rgba(255,255,255,.98);
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);

  padding: 10px 16px 16px;

  max-height: min(80dvh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  opacity:0;
  transform: translateY(-10px) scale(.98);
  pointer-events:none;
  transition: opacity .22s ease, transform .22s ease;
}

    /* メニュー内の要素も確実に箱に収める */
  .mobile-nav *{
    box-sizing: border-box;
    max-width: 100%;
  }

  .mobile-nav.is-open{
    opacity:1;
    transform: translateY(0) scale(1);
    pointer-events:auto;
  }

  /* メニュー項目の見た目 */
  .mobile-nav a,
  .mobile-nav summary{
    display:block;
    border-bottom:1px solid rgba(229,231,235,.8);
    font-weight:900;
    color:var(--navy);
    padding: 14px 0;
  }
  .mobile-submenu summary{ cursor:pointer; }
  .mobile-submenu a{ padding-left:28px; }

  .mobile-nav .mobile-cta{
    display: block;
    width: 100%;
    margin: 14px 0 0;            /* 左右marginを0にする（はみ出し原因になりやすい） */
    padding: 14px 16px;
    border-radius: 14px;
    text-align: center;
    background: var(--orange);
    color: #fff;
    border-bottom: 0;
  }


  /* PCナビを隠してハンバーガー表示 */
  .site-nav{display:none}
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    border-radius:6px;
    cursor:pointer;
  }

  /* ハンバーガー→× */
  .hamburger{
    width:22px;
    height:16px;
    position:relative;
    display:block;
  }
  .hamburger span{
    position:absolute;
    left:0; right:0;
    height:2px;
    background:var(--navy);
    border-radius:2px;
    transition: transform .22s ease, top .22s ease, opacity .18s ease;
  }
  .hamburger span:nth-child(1){ top:0; }
  .hamburger span:nth-child(2){ top:7px; }
  .hamburger span:nth-child(3){ top:14px; }

  .nav-toggle.is-open .hamburger span:nth-child(1){
    top:7px; transform:rotate(45deg);
  }
  .nav-toggle.is-open .hamburger span:nth-child(2){
    opacity:0;
  }
  .nav-toggle.is-open .hamburger span:nth-child(3){
    top:7px; transform:rotate(-45deg);
  }
}
@media (max-width: 980px){
  .mobile-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid rgba(229,231,235,.8);
  }
  .mobile-link{
    display:block;
    flex:1;
    padding:14px 0;
    font-weight:900;
    color:var(--navy);
  }

  .mobile-subtoggle{
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    border-radius:6px;
    display:grid;
    place-items:center;
    cursor:pointer;
  }
  .mobile-subtoggle:active{ background:rgba(15,23,42,.05); }

  .chev{
    width:10px;
    height:10px;
    border-right:2px solid rgba(44,62,80,.75);
    border-bottom:2px solid rgba(44,62,80,.75);
    transform: rotate(45deg); /* ▾ */
    transition: transform .18s ease;
  }
  .mobile-subtoggle[aria-expanded="true"] .chev{
    transform: rotate(-135deg); /* 開いたら上向き */
  }
    .mobile-item--has-sub{
      border-bottom: 0;
    }
    .mobile-submenu-panel{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height .25s ease, opacity .2s ease, transform .2s ease;
    padding: 0 0 0 14px; /* インデント */
    border-bottom: 1px solid rgba(229,231,235,.8);
  }
    .mobile-nav a:last-child{
    border-bottom: 0;
  }

  .mobile-submenu-panel.is-open{
    max-height: 240px; /* サブメニュー項目数に十分な値に（必要なら増やす） */
    opacity: 1;
    transform: translateY(0);
  }
  .mobile-sublink{
    display:block;
    padding:10px 0;
    font-weight:800;
    color:rgba(44,62,80,.88);
  }
}



/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:6px;
  font-weight:900;font-size:14px;
  border:1px solid transparent;
  transition:.3s ease;
  white-space:nowrap;
}
.btn-sm{padding:10px 12px;border-radius:6px;font-size:13px}
.btn-primary{background:var(--orange);color:#fff}
.btn-secondary{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.22);color:#fff}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn:hover{filter:brightness(.95)}

/* Hero (PC: 中央パネル) */
.hero{
  position:relative;
  min-height: 540px;
  display:flex;
  align-items:center;
  background-image:url("../img/fv.png");
  background-size:cover;
  background-position:center;
   padding-bottom: 56px;
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(1000px 500px at 20% 25%, rgba(0,0,0,.25), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.10));
}
.hero-inner{position:relative;display:flex;justify-content:center}
.hero-panel{
  width:min(780px, 100%);
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
  border-radius:6px;
  padding:34px 34px 28px;
  text-align:center;
  color:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.hero-title{margin:0;font-size:36px;line-height:1.05;font-weight:700}
.hero-sub{margin:12px 0 0;font-size:24px;font-weight:700;opacity:.95}
.hero-desc{font-family: "Carattere", cursive;margin:10px auto 0;max-width:60ch;font-size:24px;opacity:.92}
.hero-ctas{margin-top:18px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Responsive */

/* =========================
   Hero: Mobile typography tuning
   ========================= */
@media (max-width: 980px){

.hero{
  background-image:url("../img/fv_sp.jpeg");
  background-position: 50% 20%; /* 人物が下なので下寄せ */
  background-size: cover;
  align-items:flex-start;
  padding-top: 16px;           /* 文字ブロックの上余白 */
    padding-bottom: 16px;        /* 56pxはスクロール用名残なら縮める */
}

  .hero-inner{
    justify-content:center;
    width:100%;
  }

  .hero-panel{
    /* 文字ブロックが縦に伸びすぎないように */
    padding: 18px 16px 16px;
    max-width: 92vw;

    margin-top: 0;
  }

  .hero-title{
    font-size: clamp(28px, 7.2vw, 36px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
  }

  .hero-sub{
    font-size: clamp(16px, 4.6vw, 20px);
    line-height: 1.25;
    margin-bottom: 10px;
  }

  .hero-desc{
    font-size: 18px;
    line-height: 1.45;
    margin-bottom: 14px;
  }

  /* CTAが縦に伸びすぎるのを防ぐ（必要なら） */
  .hero-ctas{
    gap: 10px;
  }
  .hero-ctas .btn{
    padding: 12px 14px;
    font-size: 14px;
  }
}


/* Grid */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.cards-equal .card{display:flex;flex-direction:column}

/* Cards */
.card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.04);
  overflow:hidden;
}

/* Categories (PC: 写真+バッジ+アイコン) */
.category-media{position:relative}
.category-media img{aspect-ratio:16/10;object-fit:cover}
.category-badge{
  position:absolute;left:14px;top:14px;
  padding:7px 10px;border-radius:999px;
  background:rgba(15,23,42,.78);color:#fff;
  font-size:12px;font-weight:950;
  backdrop-filter:blur(8px);
}
.category-icon{
  position:absolute;right:14px;top:14px;
  width:42px;height:42px;border-radius:6px;
  background:rgba(255,255,255,.85);
  display:grid;place-items:center;
}
.category-body{padding:16px}
.card-title{margin:0;color:var(--navy);font-weight:950;font-size:18px;line-height:1.25}
.card-text{margin:10px 0 0;color:var(--muted);font-size:14px}
.feature-tags{list-style:none;padding:0;margin:12px 0 16px;display:flex;flex-wrap:wrap;gap:8px}
.feature-tags li{
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-size:12px;font-weight:900;color:#334155;
}
.btn-card{width:100%}
.btn-orange{background:var(--orange);color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-green{background:#1F8A70;color:#fff}

/* Why (PC: 5柱) */
.section-why{background:#fff}
.why-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.why-item{
  border:1px solid var(--line);
  border-radius:6px;
  padding:18px 14px;
  text-align:center;
}
.why-icon{
  width:56px;height:56px;margin:0 auto 10px;
  border-radius:6px;background:var(--soft);
  display:grid;place-items:center;
  color:var(--navy);font-size:22px;
}
.why-title{margin:0;color:var(--navy);font-weight:950;font-size:14px;line-height:1.25}
.why-text{margin:8px 0 0;color:var(--muted);font-size:12.5px}

/* Popular experiences (PC: 4カード) */
.exp-media{position:relative;display:block}
.exp-media img{aspect-ratio:16/10;object-fit:cover}
.exp-badge{
  position:absolute;left:14px;top:14px;
  padding:7px 10px;border-radius:999px;
  background:rgba(15,23,42,.78);color:#fff;
  font-size:12px;font-weight:950;
  backdrop-filter:blur(8px);
}
.exp-body{padding:14px 14px 16px}
.exp-rating{display:flex;align-items:center;gap:8px}
.stars{color:#F59E0B;letter-spacing:1px}
.rating-text{font-weight:950;font-size:13px}
.muted{color:var(--muted);font-weight:800}
.exp-title{margin:10px 0 8px;color:var(--navy);font-weight:950;font-size:15px;line-height:1.25}
.exp-desc{margin:0 0 12px;color:var(--muted);font-size:13px}
.exp-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px dashed #E6E8EC;padding-top:12px}
.price{display:flex;flex-direction:column;line-height:1.05}
.from{font-size:11px;color:var(--muted);font-weight:950;text-transform:uppercase;letter-spacing:.08em}
.amount{font-size:18px;color:var(--navy);font-weight:950}

/* How it works (PC: 横並び + つなぎ線) */
.section-how{background:var(--soft)}
.how-steps{
  list-style:none;padding:0;margin:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  position:relative;
}
.how-step{
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:18px 16px;
  text-align:center;
  position:relative;
}
.how-step:not(:last-child):after{
  content:"";
  position:absolute;
  top:40px; right:-18px;
  width:18px;height:2px;
  background:rgba(44,62,80,.25);
}
.how-icon{
  width:64px;height:64px;margin:0 auto 10px;
  border-radius:22px;background:#fff;
  border:1px solid #EEF1F4;
  display:grid;place-items:center;
  font-size:24px;
}
.how-orange{color:var(--orange);box-shadow:0 8px 20px rgba(230,126,34,.15)}
.how-navy{color:var(--navy);box-shadow:0 8px 20px rgba(44,62,80,.12)}
.how-title{font-weight:950;color:var(--navy)}
.how-text{margin-top:6px;color:var(--muted);font-size:13px}
/* How It Works: mobile vertical timeline (stable, continuous line) */
@media (max-width: 980px){

  /* PCの横つなぎ線を完全に無効化 */
  .how-step:not(:last-child)::after{
    display:none !important;
    content:none !important;
  }

  /* 親に“1本の縦線”を引く */
  .how-steps{
    grid-template-columns: 1fr !important;
    position: relative;
    padding-left: 40px;            /* ライン分の余白 */
  }
  .how-steps::before{
    content:"";
    position:absolute;
    left: 18px;                    /* 縦線のX位置 */
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: rgba(44,62,80,.20);
    border-radius: 2px;
  }

  /* 各カードは余白を少しだけ追加（ラインと被らないように） */
  .how-step{
    position: relative;
    padding-left: 16px;            /* カード内の左余白は最小でOK */
  }

  /* 各ステップの“丸” */
  .how-step::before{
    content:"";
    position:absolute;
    left: -29px;                   /* .how-steps の padding-left に対する相対位置 */
    top: 34px;                     /* カード上端からの位置（必要なら微調整） */
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background:#fff;
    border:3px solid var(--orange);
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
  }
}

/* Reviews (PC: 横3) */
.review-grid{grid-template-columns:repeat(3,1fr)}
.review-card{padding:16px}
.review-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.review-avatar{width:54px;height:54px;border-radius:6px;object-fit:cover}
.review-stars{color:#F59E0B;letter-spacing:1px;font-weight:950}
.review-country{color:var(--muted);font-weight:900;font-size:12px;margin-top:2px}
.review-text{margin:0;color:#0f172a;font-weight:650}
.review-name{margin:10px 0 0;color:var(--muted);font-weight:900;font-size:13px}
.trust-row{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.trust-pill{padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:950;color:var(--navy);font-size:12px}

/* Contact (PC: 2カラム) */
.section-contact{background:var(--soft)}
.contact-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.field{display:grid;gap:8px;margin-bottom:12px}
.field-label{font-size:12px;font-weight:950;color:var(--navy)}
.input,.textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:12px;font-size:14px;outline:none}
.input:focus,.textarea:focus{border-color:rgba(230,126,34,.55);box-shadow:0 0 0 4px rgba(230,126,34,.16)}
.contact-form,.contact-card{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:#fff;box-shadow:var(--shadow);}
.contact-title{margin:0;color:var(--navy);font-weight:950}
.contact-text{margin:8px 0 12px;color:var(--muted);font-size:13px}
.contact-list{margin:0;padding-left:18px;color:#0f172a}
.contact-list li{margin:6px 0}

/* Contact: mobile stack */
@media (max-width: 980px){
  .contact-wrap{
    grid-template-columns: 1fr !important; /* 2カラム→1カラム */
  }
  .contact-form{
    order: 1;
  }
  .contact-card{
    order: 2;
  }
}
/* Final CTA */
.final-cta{
  position:relative;
  padding:84px 0;
  background-image:url("../img/footer.png");
  background-size:cover;
  background-position:center;
  color:#fff;
  text-align:center;
}
.final-overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,.22))}
.final-inner{position:relative}
.final-title{margin:0;font-size:46px;line-height:1.02;font-weight:950;letter-spacing:.03em}
.final-lead{margin:12px auto 0;max-width:60ch;opacity:.9;font-weight:650}
.final-ctas{margin:18px 0 0;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.guarantees{list-style:none;padding:0;margin:18px 0 0;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.guarantees li{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.18);backdrop-filter:blur(10px);font-weight:950;font-size:12px}

/* Footer (PC screenshot style) */
.site-footer.site-footer--pc{
  background: var(--navy);
  color: rgba(255,255,255,.92);
  padding: 48px 0 28px;
  border-top: none;
}

.footer-top{
  display: grid;
  grid-template-columns: 1.1fr 1fr .9fr;
  gap: 28px;
  align-items: start;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.footer-title{
  margin: 0 0 10px;
  font-weight: 950;
  font-size: 18px;
  letter-spacing: .01em;
  color: #fff;
}

.footer-desc{
  margin: 0 0 10px;
  color: rgba(255,255,255,.78);
  font-size: 13.5px;
  line-height: 1.7;
}

.footer-link{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Form */
.footer-contact-form{display: grid; gap: 12px}
.footer-field{display: grid; gap: 6px}
.footer-label{
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.9);
}
.footer-input,
.footer-textarea{
  width: 100%;
  border-radius:6px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 10px 12px;
  outline: none;
}
.footer-input:focus,
.footer-textarea:focus{
  border-color: rgba(230,126,34,.75);
  box-shadow: 0 0 0 4px rgba(230,126,34,.18);
}

.footer-submit{
  margin-top: 4px;
  border: 0;
  border-radius:6px;
  padding: 11px 14px;
  font-weight: 950;
  color: #fff;
  background: var(--orange);
  cursor: pointer;
}
.footer-submit:hover{filter: brightness(.95)}

/* Hours */
.hours-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.hours-list li{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(255,255,255,.14);
}
.hours-list .day{font-weight: 900; color: rgba(255,255,255,.9)}
.hours-list .time{color: rgba(255,255,255,.78); font-weight: 800}

/* Footer (bottom-only like screenshot) */
.site-footer-min{
  background: var(--navy);
  color: rgba(255,255,255,.9);
  padding: 22px 0;
}
.container.footer-min-inner{
  padding: 0;
}
.footer-min-inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px 18px;
  align-items: center;
}

.footer-min-copy{
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.75);
}

.footer-min-nav{
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 900;
  font-size: 12.5px;
}

.footer-min-nav a{
  color: rgba(255,255,255,.88);
}
.footer-min-nav a:hover{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}



.footer-min-icon{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: #fff;                 /* 白丸 */
  border: 1px solid rgba(0,0,0,.08);

  color: var(--navy, #163575);      /* --navy が無い環境の保険 */
  text-decoration: none;

  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.footer-min-social{
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center; /* モバイルは中央寄せ */
}

/* Font Awesome アイコンサイズ */
.footer-min-icon i{
  font-size: 18px;
  line-height: 1;
}

/* hover（ブランドカラーに反転） */
.footer-min-icon:hover{
  transform: translateY(-1px);
  background: #ffffff18;
  color: #fff;
  border-color: var(--navy, #163575);
}

/* キーボード操作でも見えるように */
.footer-min-icon:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(22,53,117,.18);
}

/* Responsive */
@media (max-width: 980px){
  .footer-min-inner{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .footer-min-social{justify-content: center;}
}
@media (max-width: 980px){
  /* 3列・4列は全部1列へ */
  .grid-3,
  .grid-4,
  .why-grid,
  .review-grid,
  .how-steps{
    grid-template-columns: 1fr !important;
  }

  /* もし人気カードなどで “横スクロール用” を使っていた場合の保険 */
  .grid{
    overflow: visible;
  }
}
/* ========================================
   Contact Form 7 スタイル適用
   ======================================== */

/* CF7 フォーム全体 */
.wpcf7-form{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* CF7 のラッパー（既存の .field クラスに合わせる） */
.wpcf7-form p{
  margin: 0;
  display: grid;
  gap: 8px;
}

/* CF7 のラベル */
.wpcf7-form label{
  font-size: 12px;
  font-weight: 950;
  color: var(--navy);
  display: grid;
  gap: 6px;
}

/* CF7 の入力欄（既存の .input / .textarea に合わせる） */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus{
  border-color: rgba(230,126,34,.55);
  box-shadow: 0 0 0 4px rgba(230,126,34,.16);
}

/* CF7 の送信ボタン（既存の .btn .btn-primary に合わせる） */
.wpcf7-form input[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 6px;
  background: var(--orange);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: filter .3s ease;
}

.wpcf7-form input[type="submit"]:hover{
  filter: brightness(.95);
}

/* CF7 のエラーメッセージ */
.wpcf7-not-valid-tip{
  font-size: 12px;
  color: #d9534f;
  margin-top: 4px;
  font-weight: 800;
}

/* CF7 の送信完了/エラーメッセージ */
.wpcf7-response-output{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid transparent;
}

.wpcf7-mail-sent-ok{
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.22);
  color: #166534;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng{
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.22);
  color: #991b1b;
}

/* CF7 のスピナー（送信中） */
.wpcf7-spinner{
  margin-left: 10px;
}

/* ========================================
   Bogo 言語切替の出力調整
   ======================================== */

/* Bogo のデフォルトリストを既存ドロップダウンに合わせる */
.dropdown .bogo-language-switcher{
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown .bogo-language-switcher li{
  margin: 0;
}

.dropdown .bogo-language-switcher a{
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  font-weight: 800;
  color: var(--navy);
  transition: background .2s ease;
}

.dropdown .bogo-language-switcher a:hover{
  background: rgba(230,126,34,.10);
}

/* モバイルメニュー用 */
.mobile-submenu-panel .bogo-language-switcher{
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-submenu-panel .bogo-language-switcher li{
  margin: 0;
}

.mobile-submenu-panel .bogo-language-switcher a{
  display: block;
  padding: 10px 0;
  font-weight: 800;
  color: rgba(44,62,80,.88);
}


/* ========================================
   Experience Archive Page
   ======================================== */

/* Archive Header */
.archive-header{
  background: var(--soft);
  padding: 48px 0;
  text-align: center;
}

.archive-title{
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 950;
  color: var(--navy);
  line-height: 1.15;
}

.archive-subtitle{
  margin: 10px auto 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
}

/* Archive Filters (Top Bar) */
.archive-filters{
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

.filters-form{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  align-items: end;
}

.filter-group{
  display: grid;
  gap: 6px;
}

.filter-group label{
  font-size: 12px;
  font-weight: 900;
  color: var(--navy);
}

.filter-group input,
.filter-group select{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.filter-group input:focus,
.filter-group select:focus{
  border-color: var(--orange);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(230,126,34,.15);
}

/* Archive Layout (Sidebar + Main) */
.archive-layout{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  padding: 32px 0;
}

/* Left Sidebar */
.archive-sidebar{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 32px);
  overflow-y: auto;
}

.archive-sidebar h3{
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 950;
  color: var(--navy);
}

.sidebar-filter{
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.sidebar-filter:last-child{
  border-bottom: 0;
}

.sidebar-filter h4{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 950;
  color: var(--navy);
}

.sidebar-filter label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 8px;
  cursor: pointer;
}

.sidebar-filter input[type="checkbox"],
.sidebar-filter input[type="radio"]{
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Main Grid */
.archive-main{
  min-height: 500px;
}

.experiences-count{
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
}

.experiences-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}

/* Experience Card */
.experience-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}

.experience-card:hover{
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  transform: translateY(-2px);
}

.experience-thumb{
  position: relative;
  display: block;
}

.experience-thumb img{
  aspect-ratio: 16/10;
  object-fit: cover;
}

.experience-badge{
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.78);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  backdrop-filter: blur(8px);
}

.experience-body{
  padding: 14px;
}

.experience-title{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.3;
}

.experience-title a{
  color: var(--navy);
}

.experience-title a:hover{
  color: var(--orange);
}

.experience-rating{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.experience-meta{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.experience-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed #E6E8EC;
}

.experience-price{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.experience-price .from{
  font-size: 10px;
  font-weight: 950;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.experience-price .amount{
  font-size: 16px;
  font-weight: 950;
  color: var(--navy);
}

.experience-price .per{
  font-size: 10px;
  color: var(--muted);
}

/* Pagination */
.archive-pagination{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.archive-pagination a,
.archive-pagination span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-weight: 900;
  font-size: 14px;
  color: var(--navy);
  transition: background .2s ease, border-color .2s ease;
}

.archive-pagination a:hover{
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.archive-pagination .current{
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

/* Responsive */
@media (max-width: 980px){
  .archive-layout{
    grid-template-columns: 1fr;
  }

  .archive-sidebar{
    position: static;
    max-height: none;
  }

  .filters-form{
    grid-template-columns: 1fr;
  }

  .experiences-grid{
    grid-template-columns: 1fr;
  }
}

要素	実装方法
ページURL	/faq/（固定ページまたはカスタムテンプレート）
デザイン	アコーディオン形式（クリックで開閉）
セクション分け	Booking & Reservations / Payments & Billing / Itineraries & Activities / Travel & Logistics
検索バー	オプション（後で追加可能）
CTA	Contact Support / View Help Center
1) 固定ページテンプレート page-faq.php を作成
/wp-content/themes/focus-japan-tours/ に page-faq.php を新規作成してください。

📄 page-faq.php（クリックで展開）
2) CSS 追加（FAQ ページ用スタイル）
assets/css/style.css の末尾に以下を追記してください。

Copy/* ========================================
   FAQ Page
   ======================================== */

/* FAQ Hero */
.faq-hero{
  background: var(--soft);
  padding: 64px 0 48px;
  text-align: center;
}

.faq-hero-title{
  margin: 0;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 950;
  color: var(--navy);
  line-height: 1.15;
}

.faq-hero-subtitle{
  margin: 12px auto 28px;
  max-width: 60ch;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
}

/* FAQ Search */
.faq-search{
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.faq-search-input{
  width: 100%;
  padding: 14px 52px 14px 18px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: box-shadow .2s ease;
}

.faq-search-input:focus{
  box-shadow: 0 0 0 4px rgba(20,40,73,.12);
}

.faq-search-btn{
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s ease;
}

.faq-search-btn:hover{
  background: var(--orange);
}

/* FAQ Content */
.faq-content{
  padding: 48px 0;
}

.faq-section{
  margin-bottom: 48px;
}

.faq-section-title{
  margin: 0 0 18px;
  font-size: 24px;
  font-weight: 950;
  color: var(--navy);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--line);
}

/* FAQ Item (Accordion) */
.faq-item{
  margin-bottom: 12px;
}

.faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease;
}

.faq-question:hover{
  background: #1a3a5c;
}

.faq-question[aria-expanded="true"]{
  background: var(--orange);
  border-radius: 8px 8px 0 0;
}

.faq-icon{
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  transition: transform .2s ease;
}

.faq-question[aria-expanded="true"] .faq-icon{
  transform: rotate(45deg);
}

/* FAQ Answer */
.faq-answer{
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  color: #334155;
  font-size: 14px;
  line-height: 1.7;
}

.faq-answer p{
  margin: 0;
}

/* FAQ CTA */
.faq-cta{
  background: var(--navy);
  color: #fff;
  padding: 64px 0;
  text-align: center;
}

.faq-cta-title{
  margin: 0;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 950;
  line-height: 1.2;
}

.faq-cta-subtitle{
  margin: 10px auto 24px;
  max-width: 50ch;
  opacity: .9;
  font-weight: 600;
}

.faq-cta-buttons{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.faq-cta .btn-secondary{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}

.faq-cta .btn-secondary:hover{
  background: rgba(255,255,255,.18);
}

/* Responsive */
@media (max-width: 980px){
  .faq-hero{
    padding: 48px 0 32px;
  }

  .faq-content{
    padding: 32px 0;
  }

  .faq-section{
    margin-bottom: 32px;
  }

  .faq-section-title{
    font-size: 20px;
  }

  .faq-question{
    padding: 14px 16px;
    font-size: 14px;
  }

  .faq-answer{
    padding: 14px 16px;
    font-size: 13px;
  }

  .faq-cta{
    padding: 48px 0;
  }

  .faq-cta-buttons{
    flex-direction: column;
    align-items: stretch;
  }
}

/* ========================================
   About Us Page
   ======================================== */

/* About Hero */
.about-hero{
  background: var(--soft);
  padding: 64px 0;
  text-align: center;
}

.about-hero-title{
  margin: 0;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 950;
  color: var(--navy);
  line-height: 1.1;
}

.about-hero-subtitle{
  margin: 12px auto 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: 18px;
  font-weight: 600;
}

/* Our Story */
.about-story{
  padding: 64px 0;
}

.story-layout{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.story-image img{
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.story-content{
  max-width: 55ch;
}

.story-title{
  margin: 0 0 18px;
  font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 950;
  color: var(--navy);
  line-height: 1.2;
}

.story-content p{
  margin: 0 0 16px;
  color: #334155;
  font-size: 15px;
  line-height: 1.75;
}

.story-content p:last-child{
  margin-bottom: 0;
}

/* What We Offer */
.about-services{
  background: var(--soft);
  padding: 64px 0;
}

.service-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  transition: box-shadow .3s ease, transform .3s ease;
}

.service-card:hover{
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  transform: translateY(-4px);
}

.service-icon{
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--soft);
  display: grid;
  place-items: center;
  font-size: 32px;
}

.service-title{
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 950;
  color: var(--navy);
  line-height: 1.3;
}

.service-text{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

/* Why Choose Us */
.about-why{
  padding: 64px 0;
}

/* Company Info */
.about-company{
  background: var(--soft);
  padding: 64px 0;
}

.company-layout{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
}

.company-title{
  margin: 0 0 24px;
  font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 950;
  color: var(--navy);
  line-height: 1.2;
}

.company-info{
  display: grid;
  gap: 18px;
}

.company-info dt{
  font-size: 13px;
  font-weight: 950;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}

.company-info dd{
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: #334155;
  font-size: 15px;
  line-height: 1.6;
}

.company-info dd:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.company-info a{
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.company-info a:hover{
  color: var(--navy);
}

.company-map{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 400px;
}

/* About CTA */
.about-cta{
  background: var(--navy);
  color: #fff;
  padding: 64px 0;
  text-align: center;
}

.about-cta-title{
  margin: 0;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 950;
  line-height: 1.2;
}

.about-cta-subtitle{
  margin: 10px auto 24px;
  max-width: 50ch;
  opacity: .9;
  font-weight: 600;
}

.about-cta-buttons{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.about-cta .btn-secondary{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}

.about-cta .btn-secondary:hover{
  background: rgba(255,255,255,.18);
}

/* Responsive */
@media (max-width: 980px){
  .about-hero{
    padding: 48px 0;
  }

  .about-story{
    padding: 48px 0;
  }

  .story-layout{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .story-image{
    order: 2;
  }

  .story-content{
    order: 1;
    max-width: none;
  }

  .about-services{
    padding: 48px 0;
  }

  .grid-3{
    grid-template-columns: 1fr;
  }

  .about-why{
    padding: 48px 0;
  }

  .about-company{
    padding: 48px 0;
  }

  .company-layout{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .company-map{
    min-height: 300px;
  }

  .about-cta{
    padding: 48px 0;
  }

  .about-cta-buttons{
    flex-direction: column;
    align-items: stretch;
  }
}

/* ========================================
   Contact Page
   ======================================== */

/* Contact Hero */
.contact-hero{
  background: var(--soft);
  padding: 64px 0 48px;
  text-align: center;
}

.contact-hero-title{
  margin: 0;
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 950;
  color: var(--navy);
  line-height: 1.15;
}

.contact-hero-subtitle{
  margin: 12px auto 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}

/* Contact Page Layout */
.contact-page-content{
  padding: 64px 0;
}

.contact-page-layout{
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px;
  align-items: start;
}

/* Contact Form (Left) */
.contact-page-form{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}

/* Contact Info (Right) */
.contact-page-info{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-info-item{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}

.contact-info-icon{
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
}

.contact-info-text{
  flex: 1;
}

.contact-info-title{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 950;
  color: var(--navy);
  line-height: 1.3;
}

.contact-info-text p{
  margin: 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.65;
}

.contact-info-text a{
  color: var(--orange);
  font-weight: 800;
  text-decoration: none;
  transition: color .2s ease;
}

.contact-info-text a:hover{
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Travel Insurance Notice */
.contact-info-notice{
  padding: 18px;
  background: rgba(230, 126, 34, .08);
  border: 1px solid rgba(230, 126, 34, .22);
  border-radius: var(--radius);
}

.contact-info-notice p{
  margin: 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.65;
}

.contact-info-notice strong{
  color: var(--navy);
  font-weight: 950;
}

/* Responsive */
@media (max-width: 980px){
  .contact-hero{
    padding: 48px 0 32px;
  }

  .contact-page-content{
    padding: 48px 0;
  }

  .contact-page-layout{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-page-form{
    padding: 24px;
  }

  .contact-info-item{
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .contact-info-icon{
    margin-bottom: 8px;
  }
}
/* ========================================
   Legal Pages (Privacy Policy / Terms of Service)
   ======================================== */
.legal-page {
  background: #fff;
}

/* Legal Hero */
.legal-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #1a365d 100%);
  color: #fff;
  padding: 80px 0 60px;
  text-align: center;
}

.legal-hero-title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.2;
}

.legal-hero-desc {
  font-size: clamp(18px, 3vw, 24px);
  opacity: 0.9;
  margin-bottom: 16px;
}

.legal-updated {
  font-size: 14px;
  opacity: 0.7;
  font-style: italic;
}

/* Legal Content */
.legal-content {
  padding: 60px 0 80px;
}

.legal-wrapper {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 48px;
}

@media (max-width: 768px) {
  .legal-wrapper {
    padding: 28px 20px;
  }
}

.legal-intro {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.legal-section {
  margin-bottom: 40px;
}

.legal-section h2 {
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--orange);
}

.legal-section h3 {
  font-size: clamp(18px, 2.5vw, 20px);
  font-weight: 600;
  color: var(--navy);
  margin-top: 24px;
  margin-bottom: 12px;
}

.legal-section p {
  font-size: 15px;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 16px;
}

.legal-section ul {
  margin: 16px 0;
  padding-left: 24px;
}

.legal-section ul li {
  font-size: 15px;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 10px;
  position: relative;
  padding-left: 8px;
}

.legal-section ul li::marker {
  color: var(--orange);
}

.contact-info {
  background: var(--soft);
  border-left: 4px solid var(--orange);
  padding: 20px 24px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.8;
  margin-top: 20px;
}

.contact-info strong {
  display: block;
  color: var(--navy);
  font-size: 17px;
  margin-bottom: 8px;
}

.contact-info a {
  color: var(--orange);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.contact-info a:hover {
  opacity: 0.7;
  text-decoration: underline;
}
/* ========================================
   Index / Blog Archive Styles
   ======================================== */
.site-main {
  padding: 60px 0 80px;
  background: var(--soft);
  min-height: 60vh;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
  margin-bottom: 48px;
}

.post-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}

.post-thumbnail img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.post-content {
  padding: 24px;
}

.post-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
}

.post-title a {
  color: var(--navy);
  text-decoration: none;
  transition: color 0.2s ease;
}

.post-title a:hover {
  color: var(--orange);
}

.post-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.post-excerpt {
  font-size: 15px;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 16px;
}

.read-more {
  display: inline-block;
  color: var(--orange);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.read-more:hover {
  opacity: 0.7;
}

.no-posts {
  text-align: center;
  padding: 80px 20px;
}

.no-posts h2 {
  font-size: 28px;
  color: var(--navy);
  margin-bottom: 12px;
}

.no-posts p {
  font-size: 16px;
  color: var(--muted);
}

/* ページネーション */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}

.pagination .page-numbers {
  display: inline-block;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

@media (max-width: 768px) {
  .posts-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}