/* Japanese homepage: local styles */

  .ja-home{ --navy:#0B1D33; --navy-deep:#081525; --gold:#B8935A; --gold-soft:#D8C298; --cream:#F7F4EE; --ink:#1C2530; --sub:#5F574C; --line:#E7E1D4; }
  .ja-home{ font-family:'Noto Sans JP', sans-serif; background:var(--cream); color:var(--ink); overflow-x:hidden; }
  .ja-home .serif{ font-family:'Shippori Mincho', serif; }
  .ja-home a{ text-decoration:none; color:inherit; }
  .ja-home a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

  /* ヒーロー：写真＋ネイビーの重ね */
  .ja-home .hero{ position:relative; overflow:hidden; background:var(--navy-deep); }
  .ja-home .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
  .ja-home .hero::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(180deg, rgba(8,21,37,0.62) 0%, rgba(11,29,51,0.55) 45%, rgba(8,21,37,0.88) 100%);
  }
  .ja-home .hero > .hero-inner{ position:relative; z-index:1; }

  .ja-home .gold-rule{ width:56px; height:2px; background:var(--gold); }
  .ja-home .section-label{ font-size:12px; letter-spacing:0.2em; color:#9C8A6A; }
  .ja-home .lead{ color:var(--sub); font-size:14px; line-height:1.9; }
  @media (min-width:768px){ .ja-home .lead{ font-size:15px; } }

  /* ボタン（タップしやすい高さ48px以上） */
  .ja-home .btn{ display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:12px 30px; border-radius:999px; font-weight:700; font-size:14px; letter-spacing:0.03em; transition:background .2s ease, color .2s ease, border-color .2s ease; }
  .ja-home .btn-gold{ background:var(--gold); color:#fff; }
  .ja-home .btn-gold:hover{ background:#a17d47; }
  .ja-home .btn-outline{ border:1px solid var(--gold); color:var(--navy); background:#fff; }
  .ja-home .btn-outline:hover{ background:var(--cream); }
  .ja-home .btn-on-navy{ background:var(--gold); color:var(--navy); }
  .ja-home .btn-on-navy:hover{ background:var(--gold-soft); }

  /* カード */
  .ja-home .nav-card, .ja-home .feature-card{
    background:#fff; border:1px solid var(--line); border-radius:2px;
    display:flex; flex-direction:column; height:100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .ja-home .nav-card{ padding:18px 16px; }
  @media (min-width:768px){ .ja-home .nav-card{ padding:22px 20px; } }
  .ja-home .nav-card:hover, .ja-home .feature-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 16px 28px -18px rgba(11,29,51,0.35);
    border-color: var(--gold-soft);
  }
  .ja-home .card-desc{ font-size:13px; color:var(--sub); line-height:1.75; }
  @media (min-width:768px){ .ja-home .card-desc{ font-size:13.5px; } }
  .ja-home .card-more{ font-size:13px; color:var(--gold); font-family:'Shippori Mincho', serif; margin-top:auto; padding-top:12px; }
  .ja-home .feature-tag{
    display:inline-block; font-size:12px; letter-spacing:0.06em;
    background:var(--navy); color:var(--gold-soft); padding:3px 10px; border-radius:999px; margin-bottom:10px;
  }

  /* MUTOTAXI 特徴（透明感のある内側パネル） */
  .ja-home .svc-panel{ background:rgba(255,255,255,0.78); border:1px solid var(--line); border-radius:2px; backdrop-filter:blur(2px); }
  .ja-home .svc-item{ border-top:1px solid var(--line); padding:14px 0; }
  .ja-home .svc-item p:first-child{ font-weight:700; font-size:14.5px; color:var(--navy); }
  .ja-home .svc-item p:first-child::before{ content:""; display:inline-block; width:14px; height:2px; background:var(--gold); vertical-align:middle; margin-right:8px; }

  /* よく使われるルート（固定ルートの専用ページへ） */
  .ja-home .routes{ border-top:1px solid var(--line); }
  .ja-home .route-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
  @media (min-width:640px){ .ja-home .route-grid{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; } }
  .ja-home .route-card{
    display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--line);
    border-left:3px solid var(--gold); border-radius:2px; padding:18px 18px 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .ja-home .route-card:hover{ border-color:var(--gold-soft); border-left-color:var(--gold); box-shadow:0 14px 26px -20px rgba(11,29,51,0.4); }
  .ja-home .route-name{ font-size:17px; font-weight:700; color:var(--navy); line-height:1.5; margin-bottom:8px; }
  .ja-home .route-arrow{ color:var(--gold); margin:0 6px; }
  .ja-home .route-fare{ font-family:'Shippori Mincho', serif; font-weight:700; font-size:24px; color:var(--navy); line-height:1.3; }
  .ja-home .route-fare small{ font-family:'Noto Sans JP', sans-serif; font-weight:500; font-size:12px; color:var(--sub); margin-right:6px; vertical-align:middle; }

  /* 北海道イベント送迎プラン（ルートカードの下。紺色の背景でルートと区別） */
  .ja-home .event-card{
    display:block; margin-top:28px; background:var(--navy); color:#fff; border-radius:2px;
    border:1px solid var(--navy); border-left:3px solid var(--gold); padding:22px 20px 20px;
    transition: box-shadow .2s ease, border-color .2s ease;
  }
  @media (min-width:768px){ .ja-home .event-card{ margin-top:36px; padding:28px 30px; } }
  .ja-home .event-card:hover{ border-color:var(--gold-soft); border-left-color:var(--gold); box-shadow:0 16px 30px -20px rgba(11,29,51,0.6); }
  .ja-home .event-season{
    display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:0.06em;
    background:var(--gold); color:var(--navy); padding:3px 12px; border-radius:999px; margin-bottom:12px;
  }
  .ja-home .event-title{ font-size:20px; font-weight:700; line-height:1.5; color:#fff; }
  @media (min-width:768px){ .ja-home .event-title{ font-size:22px; } }
  .ja-home .event-sub{ font-size:13.5px; color:rgba(255,255,255,0.78); line-height:1.8; margin-top:4px; }
  .ja-home .event-fares{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
  .ja-home .event-fares > div{ border:1px solid rgba(216,194,152,0.45); padding:10px 12px; }
  .ja-home .event-fares small{ display:block; font-size:12px; color:rgba(255,255,255,0.75); }
  .ja-home .event-fares strong{ font-family:'Shippori Mincho', serif; font-size:22px; font-weight:700; color:#fff; line-height:1.35; }
  .ja-home .event-note{ font-size:12.5px; color:rgba(255,255,255,0.7); line-height:1.75; margin-top:10px; }
  .ja-home .event-more{ display:inline-block; font-size:14px; color:var(--gold-soft); font-family:'Shippori Mincho', serif; margin-top:14px; border-bottom:1px solid rgba(216,194,152,0.5); padding-bottom:1px; }
  @media (min-width:768px){
    .ja-home .event-inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; }
    .ja-home .event-fares{ margin-top:0; min-width:340px; }
  }
  /* ウポポイ・白老観光プラン（イベント送迎プランの下。同じデザインで間隔だけ詰める） */
  .ja-home .event-card.upo-card{ margin-top:16px; }
  @media (min-width:768px){ .ja-home .event-card.upo-card{ margin-top:20px; } }

  /* エリアチップ */
  .ja-home .chip{ display:inline-flex; align-items:center; min-height:40px; padding:6px 16px; border:1px solid var(--line); background:#fff; border-radius:999px; font-size:13.5px; transition:border-color .2s ease; }
  .ja-home .chip:hover{ border-color:var(--gold); }

  .ja-home .text-link{ color:var(--navy); border-bottom:1px solid var(--gold-soft); padding-bottom:1px; }
  .ja-home .text-link:hover{ border-color:var(--gold); }

  .ja-home .taxi-banner{ background:var(--navy); color:#fff; }

  /* 北海道の風景写真（横幅いっぱい・加工なし） */
  .ja-home .landscape{ margin:0; }
  .ja-home .landscape img{
    display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:62% 55%;
  }
  @media (min-width:768px){
    .ja-home .landscape img{ aspect-ratio:auto; height:clamp(420px, 46vw, 640px); object-position:60% 58%; }
  }
  .ja-home .landscape-copy{ border-bottom:1px solid var(--line); }

  @media (prefers-reduced-motion: reduce){
    .ja-home .nav-card, .ja-home .feature-card, .ja-home .route-card, .ja-home .event-card{ transition:none; }
    .ja-home .nav-card:hover, .ja-home .feature-card:hover{ transform:none; }
  }

/* Prebuilt utilities, scoped to .ja-home */
@layer properties;
.ja-home {
  --spacing: .25rem;
  --color-white: #ffffff;
}
.ja-home .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.ja-home .mx-2 {
  margin-inline: calc(var(--spacing) * 2);
}
.ja-home .mx-auto {
  margin-inline: auto;
}
.ja-home .mt-1 {
  margin-top: calc(var(--spacing) * 1);
}
.ja-home .mt-4 {
  margin-top: calc(var(--spacing) * 4);
}
.ja-home .mt-6 {
  margin-top: calc(var(--spacing) * 6);
}
.ja-home .mt-8 {
  margin-top: calc(var(--spacing) * 8);
}
.ja-home .mt-10 {
  margin-top: calc(var(--spacing) * 10);
}
.ja-home .mt-12 {
  margin-top: calc(var(--spacing) * 12);
}
.ja-home .mb-1\.5 {
  margin-bottom: calc(var(--spacing) * 1.5);
}
.ja-home .mb-2 {
  margin-bottom: calc(var(--spacing) * 2);
}
.ja-home .mb-3 {
  margin-bottom: calc(var(--spacing) * 3);
}
.ja-home .mb-4 {
  margin-bottom: calc(var(--spacing) * 4);
}
.ja-home .mb-5 {
  margin-bottom: calc(var(--spacing) * 5);
}
.ja-home .mb-6 {
  margin-bottom: calc(var(--spacing) * 6);
}
.ja-home .mb-8 {
  margin-bottom: calc(var(--spacing) * 8);
}
.ja-home .mb-9 {
  margin-bottom: calc(var(--spacing) * 9);
}
.ja-home .block {
  display: block;
}
.ja-home .flex {
  display: flex;
}
.ja-home .grid {
  display: grid;
}
.ja-home .hidden {
  display: none;
}
.ja-home .h-full {
  height: 100%;
}
.ja-home .w-full {
  width: 100%;
}
.ja-home .shrink-0 {
  flex-shrink: 0;
}
.ja-home .scroll-mt-20 {
  scroll-margin-top: calc(var(--spacing) * 20);
}
.ja-home .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.ja-home .grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ja-home .flex-col {
  flex-direction: column;
}
.ja-home .flex-wrap {
  flex-wrap: wrap;
}
.ja-home .items-center {
  align-items: center;
}
.ja-home .justify-center {
  justify-content: center;
}
.ja-home .gap-2 {
  gap: calc(var(--spacing) * 2);
}
.ja-home .gap-3 {
  gap: calc(var(--spacing) * 3);
}
.ja-home .gap-4 {
  gap: calc(var(--spacing) * 4);
}
.ja-home .self-start {
  align-self: flex-start;
}
.ja-home .border-y {
  border-block-style: var(--tw-border-style);
  border-block-width: 1px;
}
.ja-home .border-\[\#E7E1D4\] {
  border-color: #E7E1D4;
}
.ja-home .bg-white {
  background-color: var(--color-white);
}
.ja-home .p-6 {
  padding: calc(var(--spacing) * 6);
}
.ja-home .px-2 {
  padding-inline: calc(var(--spacing) * 2);
}
.ja-home .px-5 {
  padding-inline: calc(var(--spacing) * 5);
}
.ja-home .px-6 {
  padding-inline: calc(var(--spacing) * 6);
}
.ja-home .py-2 {
  padding-block: calc(var(--spacing) * 2);
}
.ja-home .py-3 {
  padding-block: calc(var(--spacing) * 3);
}
.ja-home .py-8 {
  padding-block: calc(var(--spacing) * 8);
}
.ja-home .py-12 {
  padding-block: calc(var(--spacing) * 12);
}
.ja-home .py-14 {
  padding-block: calc(var(--spacing) * 14);
}
.ja-home .py-16 {
  padding-block: calc(var(--spacing) * 16);
}
.ja-home .py-20 {
  padding-block: calc(var(--spacing) * 20);
}
.ja-home .pt-10 {
  padding-top: calc(var(--spacing) * 10);
}
.ja-home .pt-14 {
  padding-top: calc(var(--spacing) * 14);
}
.ja-home .pb-14 {
  padding-bottom: calc(var(--spacing) * 14);
}
.ja-home .pb-16 {
  padding-bottom: calc(var(--spacing) * 16);
}
.ja-home .text-center {
  text-align: center;
}
.ja-home .text-\[13\.5px\] {
  font-size: 13.5px;
}
.ja-home .text-\[13px\] {
  font-size: 13px;
}
.ja-home .text-\[15px\] {
  font-size: 15px;
}
.ja-home .text-\[30px\] {
  font-size: 30px;
}
.ja-home .tracking-\[0\.18em\] {
  --tw-tracking: 0.18em;
  letter-spacing: 0.18em;
}
.ja-home .text-\[\#6B6155\] {
  color: #6B6155;
}
.ja-home .text-\[\#B7AC99\] {
  color: #B7AC99;
}
.ja-home .text-\[\#D8C298\] {
  color: #D8C298;
}
.ja-home .text-white {
  color: var(--color-white);
}
.ja-home .text-white\/60 {
  color: color-mix(in srgb, #ffffff 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-white) 60%, transparent);
  }
}
.ja-home .text-white\/75 {
  color: color-mix(in srgb, #ffffff 75%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-white) 75%, transparent);
  }
}
.ja-home .text-white\/80 {
  color: color-mix(in srgb, #ffffff 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-white) 80%, transparent);
  }
}
.ja-home .text-white\/85 {
  color: color-mix(in srgb, #ffffff 85%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-white) 85%, transparent);
  }
}
.ja-home .underline {
  text-decoration-line: underline;
}
.ja-home .underline-offset-4 {
  text-underline-offset: 4px;
}
.ja-home .hover\:text-white {
  .ja-home &:hover {
    @media (hover: hover) {
      color: var(--color-white);
    }
  }
}
.ja-home .sm\:hidden {
  @media (width >= 40rem) {
    display: none;
  }
}
.ja-home .sm\:w-auto {
  @media (width >= 40rem) {
    width: auto;
  }
}
.ja-home .sm\:grid-cols-2 {
  @media (width >= 40rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ja-home .sm\:flex-row {
  @media (width >= 40rem) {
    flex-direction: row;
  }
}
.ja-home .sm\:items-center {
  @media (width >= 40rem) {
    align-items: center;
  }
}
.ja-home .sm\:gap-8 {
  @media (width >= 40rem) {
    gap: calc(var(--spacing) * 8);
  }
}
.ja-home .md\:col-span-2 {
  @media (width >= 48rem) {
    grid-column: span 2 / span 2;
  }
}
.ja-home .md\:mb-0 {
  @media (width >= 48rem) {
    margin-bottom: calc(var(--spacing) * 0);
  }
}
.ja-home .md\:flex {
  @media (width >= 48rem) {
    display: flex;
  }
}
.ja-home .md\:inline {
  @media (width >= 48rem) {
    display: inline;
  }
}
.ja-home .md\:grid-cols-2 {
  @media (width >= 48rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ja-home .md\:grid-cols-4 {
  @media (width >= 48rem) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.ja-home .md\:items-center {
  @media (width >= 48rem) {
    align-items: center;
  }
}
.ja-home .md\:justify-between {
  @media (width >= 48rem) {
    justify-content: space-between;
  }
}
.ja-home .md\:gap-5 {
  @media (width >= 48rem) {
    gap: calc(var(--spacing) * 5);
  }
}
.ja-home .md\:gap-10 {
  @media (width >= 48rem) {
    gap: calc(var(--spacing) * 10);
  }
}
.ja-home .md\:gap-x-10 {
  @media (width >= 48rem) {
    column-gap: calc(var(--spacing) * 10);
  }
}
.ja-home .md\:px-8 {
  @media (width >= 48rem) {
    padding-inline: calc(var(--spacing) * 8);
  }
}
.ja-home .md\:px-10 {
  @media (width >= 48rem) {
    padding-inline: calc(var(--spacing) * 10);
  }
}
.ja-home .md\:py-10 {
  @media (width >= 48rem) {
    padding-block: calc(var(--spacing) * 10);
  }
}
.ja-home .md\:py-16 {
  @media (width >= 48rem) {
    padding-block: calc(var(--spacing) * 16);
  }
}
.ja-home .md\:py-20 {
  @media (width >= 48rem) {
    padding-block: calc(var(--spacing) * 20);
  }
}
.ja-home .md\:py-32 {
  @media (width >= 48rem) {
    padding-block: calc(var(--spacing) * 32);
  }
}
.ja-home .md\:pt-20 {
  @media (width >= 48rem) {
    padding-top: calc(var(--spacing) * 20);
  }
}
.ja-home .md\:pb-20 {
  @media (width >= 48rem) {
    padding-bottom: calc(var(--spacing) * 20);
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    .ja-home *, .ja-home ::before, .ja-home ::after, .ja-home ::backdrop {
      --tw-border-style: solid;
      --tw-tracking: initial;
    }
  }
}