/* ===== index（トップ）専用。必ず body.page-index を先頭に ===== */

/* ヒーロー */
/* ===== ヒーロー（スライダー高さに合わせる） ===== */
.page-index .hero {
  background: #F9F9F9;
  padding: 0;                 /* ← 余白を除去 */
  text-align: left;
  position: relative;
  height: 280px;              /* ← スライダーと完全一致 */
  display: flex;
  align-items: center;        /* ← 上下中央に配置 */
  justify-content: center;    /* ← 左右中央に配置 */
  overflow: hidden;           /* ← はみ出しを防ぐ */
  z-index: 1;
}

.page-index .hero-image {
  position: relative;
  width: 100%;
  max-width: 1120px;
  height: 250px;              /* ← 画像高さと揃える */
  overflow: hidden;
  margin: 0 auto;
}

/* カルーセル */
@keyframes scroll-slider{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.page-index .slider{ display:flex; width:max-content; animation:scroll-slider 20s linear infinite; }
.page-index .slide{ width:350px; height:250px; object-fit:cover; margin-right:10px; flex-shrink:0; }

/* ナビ（ヒーロー上のタブ） */
.page-index .primary-nav{
  position:absolute; top:20px; left:20px; z-index:10; background:rgba(255,255,255,.8);
  padding:5px 15px; border-radius:5px;
    /* ▼ これを追加/強化 */
  z-index: 1500;
}
.page-index .primary-nav ul{ display:flex; flex-direction:column; gap:0; list-style:none; padding:0; margin:0; }
.page-index .primary-nav li{
  background:rgba(255,255,255,.9); height:38px; line-height:38px; font-weight:700; font-size:14px;
  width:200px; text-align:left; padding-left:16px; border-bottom:1px dotted #888; position:relative;
  transition: background-color .3s ease, color .3s ease;
}
.page-index .primary-nav li:last-child{ border-bottom:none; }
.page-index .primary-nav li::after{
  content:">"; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#444;
}
.page-index .primary-nav a{
  text-decoration:none; color:#333; font-weight:700; display:block; width:100%; height:100%;
}

/* ヒーロー下 CTA/テキスト */
.page-index .hero-content{ text-align:center; margin-top:40px; }
.page-index .hero-content h2{ font-size:32px; margin-bottom:20px; color:#000; }
.page-index .hero-content p{ font-size:18px; max-width:500px; margin:0 auto; color:#333; }
.page-index .cta-button{
  display:inline-block; margin-top:30px; padding:12px 28px; font-size:16px;
  background:#000; color:#fff; text-decoration:none; border:none; transition:background-color .3s;
}
.page-index .cta-button:hover{ background:#444; }

/* エリアドロップダウン */
.page-index .area-menu{ position:relative; }
.page-index .area-icon{ width:23px; height:23px; }
.page-index .area-dropdown{
  display: none;                 /* ← ここを none に！ */
  gap: 24px 48px;                   /* 行間・列間 */
  position: absolute;
  top: 100%;
  left: 0;
  width: 600px;
  background:#fff;
  border:1px solid #ccc;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  padding:16px 24px;
  border-radius:6px;
  box-sizing:border-box;
  line-height:1.3;
  z-index: 2000;
}


/* ▼ ドロップダウン内「この条件で検索」ボタン（黄色 × スタイリッシュ） */
.page-index .dropdown-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #222;
  background: linear-gradient(90deg, #ffe45e 0%, #ffd400 100%);
  border: 1px solid #d8b200;
  border-radius: 4px;               /* ← 角丸を控えめに */
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: background .3s ease, box-shadow .2s ease, transform .1s ease;
}

.page-index .dropdown-search-btn:hover {
  background: linear-gradient(90deg, #fff176 0%, #ffe45e 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transform: translateY(-1px);
}

.page-index .dropdown-search-btn:active {
  background: linear-gradient(90deg, #ffd400 0%, #f9c600 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  transform: translateY(0);
}

.page-index .dropdown-search-btn i {
  font-size: 14px;
  color: inherit;              /* テキストと同色 */
  margin-right: 6px;           /* テキストとの隙間 */
  transition: transform .2s ease, color .2s ease;
}

.page-index .dropdown-search-btn:hover i {
  transform: scale(1.1);
  color: #111;                 /* わずかに濃くしてアクティブ感 */
}


/* ▼ スマホ時は1カラム＋下にフル幅の操作行（変形しない） */
@media (max-width: 799px){
  .page-index .area-dropdown{
    position: static;        /* その場表示 */
    grid-template-columns: 1fr; /* 1カラム */
    width: 100%;
    gap: 16px;
  }
  .page-index .area-actions{
    grid-column: 1;          /* 1カラムなのでそのまま */
    justify-content: stretch;
  }
}

.page-index .area-dropdown.active{ display:grid; }
.page-index .area-column{ flex:1; display:flex; flex-direction:column; gap:16px; }
.page-index .area-group{ background:#fafafa; border:1px solid #eee; border-radius:4px; padding:8px 12px; box-sizing:border-box; }
.page-index .area-group h4{ font-size:14px; margin:0 0 6px; display:flex; align-items:center; gap:6px; }
.page-index .area-group label{ display:block; font-size:14px; margin:2px 0; }
.page-index .purpose-note{ font-size:12px; color:#666; margin-left:20px; display:block; }

/* モバイルのドロップダウン挙動 */
@media (max-width:799px){
  .page-index .area-column{ flex:none; width:100%; }
}

/* ピックアップグリッド */
.page-index .main-area{ flex:1; min-width:0; }
.page-index .pickup-container{
  --col-min:200px; --gap:16px;
  display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit, minmax(var(--col-min), 1fr));
  width:100%; margin-inline:auto;
}
/* 4列強制（デスクトップ） */
@media (min-width:1024px){
  .page-index .pickup-container{ grid-template-columns:repeat(4, minmax(0, 1fr)) !important; gap:16px !important; }
}
/* タブレット以下は自動 3→2→1 */
@media (max-width:1023.98px){
  .page-index .pickup-container{ grid-template-columns:repeat(auto-fit, minmax(220px,1fr)) !important; gap:14px !important; }
}

/* カード */
.page-index :root{ --card-height:340px; --thumb-ratio:4/3; }
.page-index .pickup-item{
  display:flex; flex-direction:column; height:var(--card-height);
  border:1px solid #e6e6e6; border-radius:6px; background:#fff; overflow:hidden;
}
.page-index .pickup-thumb{ width:100%; aspect-ratio:4/3; position:relative; overflow:hidden; border-radius:4px; }
.page-index .pickup-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-index .pickup-caption{ margin-top:6px; font-size:14px; color:#333; }
.page-index .pickup-meta{ margin-top:8px; }
.page-index .pickup-location{
  font-size:12px; color:#666; margin:0; display:flex; align-items:center; justify-content:center;
}
.page-index .map-icon{ width:14px; height:14px; object-fit:contain; margin-right:4px; vertical-align:middle; }
.page-index .pickup-name{ font-size:15px; font-weight:600; color:#222; margin:4px 0 0; line-height:1.4; }
.page-index .pickup-capacity{ font-size:12px; color:#777; margin-top:4px; text-align:center; }
.page-index .pickup-tags{ margin-top:4px; text-align:center; }
.page-index .tag{ display:inline-block; background:#eef4ff; color:#2a63d4; font-size:11px; padding:2px 6px; margin:2px 3px; border-radius:4px; }


/* 左 利用目的（※非表示） */
.page-index .dev-hidden{ display:none !important; }

/* ▼ メイン検索ボタン（黄色 × スタイリッシュ） */
.page-index .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 30px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  background: linear-gradient(90deg, #ffe45e 0%, #ffd400 100%);
  border: 1px solid #d8b200;
  border-radius: 6px;                /* ← 丸みを抑えてシャープに */
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: background .3s ease, box-shadow .2s ease, transform .1s ease;
  letter-spacing: 0.03em;
}

.page-index .cta-button:hover {
  background: linear-gradient(90deg, #fff176 0%, #ffe45e 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
  transform: translateY(-1px);
}

.page-index .cta-button:active {
  background: linear-gradient(90deg, #ffd400 0%, #f9c600 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  transform: translateY(0);
}


/* モバイル時もその場表示ではなく固定表示を優先（押しやすさ重視） */
@media (max-width: 799px){
  .page-index .area-dropdown.is-fixed {
    left: 12px !important;        /* 画面左右にはみ出さないよう保険 */
    right: 12px !important;
    width: auto !important;
  }
}


/* === 全国メニュー：2行×複数列 + ボタンは近畿の下で中央 === */
.page-index #global-area-dropdown{ display:none !important; }

.page-index #global-area-dropdown.active,
.page-index #global-area-dropdown[data-open="1"]{
  display: flex !important;            /* ← 親は縦積み */
    flex-direction: column !important;  /* ← ここが効く */
  /*grid-auto-flow: column;                    縦2つ→次の列へ */
  /*grid-template-rows: repeat(2, auto) auto;  1-2行=エリア, 3行=ボタン */
/*grid-auto-columns: 180px !important;*/
  gap: 14px 20px;
  width: 700px !important;         /* ← 900をやめて700に固定 */
    box-sizing: border-box;
  max-height: min(75vh, 560px);
  overflow-y: auto; overflow-x: hidden;
  padding: 12px 16px 10px;
}

/* 3カラムの中身（北海道〜九州）だけ grid で並べる */
.page-index #global-area-dropdown .area-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(180px, 200px)) !important;
  gap: 16px 24px;
  width: 100%;
    width: fit-content;   /* ← コンテンツ幅に縮む（=700いっぱいに広がらない） */
  margin: 0 auto;       /* ← 余白は左右で均等、中央配置 */
  justify-content: center;
  justify-items: start;
}

/* エリアは列いっぱい使わせる（細すぎ問題の解消） */
.page-index #global-area-dropdown .area-column{ display: contents; }
.page-index #global-area-dropdown .area-group{
  width: 100% !important;
    max-width: 180px !important;  /* 念のための上限 */
  min-width: 0 !important;
}

/* 検索ボタン行は常に“最後に1行”・中央寄せ・縦長禁止 */
.page-index #global-area-dropdown .area-actions{
  order: 2;                           /* 最下段に固定 */
  display: flex !important;
  justify-content: center !important; /* ど真ん中 */
  align-items: center !important;     /* 縦長化を防ぐ */
  position: static !important;        /* sticky 等の名残を無効化 */
  width: 100% !important;
  padding-top: 10px !important;
  border-top: 1px solid #eee !important;
  margin: 0 !important;
  text-align: center !important;
}

/* 横幅の都合で3列しか置けない時は“中央列(2列目)”に置く */
@media (max-width: 1023px){
  .page-index #global-area-dropdown.active,
  .page-index #global-area-dropdown[data-open="1"]{
    grid-auto-columns: 300px;
    width: min(98vw, 940px);
  }
  .page-index #global-area-dropdown .area-actions{ grid-column: 2; }
}

/* モバイルは1列（最後・中央） */
@media (max-width: 799px){
  .page-index #global-area-dropdown.active,
  .page-index #global-area-dropdown[data-open="1"]{
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    width: 100%;
  }
  .page-index #global-area-dropdown .area-actions{
    grid-column: 1;
    justify-content: center;
  }
}
/* 既存の“下の操作行を右寄せ/ sticky”を打ち消すための保険 */
.page-index #global-area-dropdown .area-actions .dropdown-search-btn{
  margin: 0 auto;                       /* 追加の保険（中央） */
}


/* ボタン自体が伸びたり回り込んだりしないよう固定 */
.page-index #global-area-dropdown .dropdown-search-btn{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  height: auto !important;
  float: none !important;
}


/* 主要エリア：ボタンを最下段・中央に固定 */
.page-index #main-area-dropdown .area-column { display: contents; } /* 中身だけ並べる */

.page-index #main-area-dropdown { display: none !important; }
/* 開くときだけ表示（class でも data 属性でも可） */
.page-index #main-area-dropdown.active,
.page-index #main-area-dropdown[data-open="1"]{
  display: grid !important;
}

.page-index #main-area-actions{
  grid-column: 1 / -1;                 /* 全列を横断して“最下段”の1行に */
  display: flex !important;
  justify-content: center !important;  /* 中央寄せ */
  align-items: center !important;
  position: static !important;         /* 既存のstickyを無効化 */
  /*padding-top: 10px;*/
  border-top: 1px solid #eee;
  width: 100%;
}

.page-index #main-area-actions .dropdown-search-btn{
  white-space: nowrap;    /* 伸びて縦長になるのを防止 */
  flex: 0 0 auto;
}
/* —— 主要エリアドロップダウンのレイアウト —— */
.page-index #main-area-dropdown{
  display: none !important;
  grid-template-columns: 220px 1fr;       /* 左=東京(固定幅) / 右=その他 */
  gap: 16px 20px;
  width: 520px !important;                /* “半分以下”にキュッと */
  max-width: 92vw;                        /* 画面が狭い時の保険 */
  padding: 16px 12px!important;     /* 上下に余裕を増やす */
  min-height: 600px !important;           /* 下方向に約800px分広げる */
  max-height: none !important;            /* 高さ制限を解除 */
  overflow: visible !important;           /* 切れ防止 */
}

/* 既存の .area-column の flex 影響を打ち消し */
.page-index #main-area-dropdown .area-column{
  display: block !important;
  flex: none !important;
}

/* 右カラムは中で 2カラム → 中身が “2行” に割れる */
.page-index #main-area-dropdown .area-others{
  display: block !important;     /* ← 普通の縦並びに */
  margin-top: 10px;
  overflow: visible !important;
}

/* グループ箱は必要以上に広がらないように調整 */
.page-index #main-area-dropdown .area-group{
  width: auto !important;
  max-width: none !important;
  padding: 8px 10px;                  /* ほんの少し内側余白 */
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 4px;
}

.page-index #main-area-actions .dropdown-search-btn{
  white-space: nowrap;
  flex: 0 0 auto;
}
/* 検索ボタン：最下段・中央（前回のID版があればそのままでOK） */
.page-index #main-area-actions{
  grid-column: 1 / -1;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: static !important;
  /*padding-top: 10px;*/
  border-top: 1px solid #eee;
  width: 100%;
}
.page-index #main-area-actions .dropdown-search-btn{
  white-space: nowrap;
  flex: 0 0 auto;
}

/* モバイルは1列で縦並び */
@media (max-width: 799px){
  .page-index #main-area-dropdown{
    grid-template-columns: 1fr;
    width: 100% !important;
  }
  .page-index #main-area-dropdown .area-others{
    grid-template-columns: 1fr; /* 右も1列に */
  }
}

/* ▼ ドロップダウン内の操作行（主要 / 全国 / 目的 共通の基準） */
.page-index .area-dropdown .area-actions{
  display: flex;
  justify-content: center;   /* ← 常に中央 */
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  grid-column: 1 / -1;       /* grid内では全幅 */
  width: 100%;
  position: static;          /* sticky等の名残を無効化 */
  text-align: center;
}
.page-index .area-dropdown .area-actions .dropdown-search-btn{
  margin: 0 auto;            /* 念のため中央配置を補強 */
  float: none;               /* 古いfloatの名残を排除 */
  flex: 0 0 auto;
}
/* === Hero: スライダー画像が巨大化しないように限定上書き === */
.page-index .hero-image {
  position: relative;
  max-width: 1120px;
  height: 250px;              /* デスクトップ基準の見た目を固定 */
  margin: 0 auto;
  overflow: hidden;            /* はみ出しを切る（既存 !important があってもOK） */
}

/* 汎用 img 100% ルールの影響を打ち消す（スライド画像だけ対象） */
.page-index .hero-image img.slide {
  width: 350px !important;
  height: 250px !important;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

/* スライダーの横スクロール設定（既存と整合） */
@keyframes scroll-slider{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.page-index .hero-image .slider {
  display: flex;
  width: max-content;
  animation: scroll-slider 20s linear infinite;
}

/* ---- ヒーローのコピー（ロゴ下に固定） ---- */
.page-index .masthead-copy{
  max-width: 1120px;
  margin: 30px auto 15px;
  padding: 0 40px;
  color:#111;
}

.page-index .masthead-copy h1{
  margin: 0 0 6px;
  line-height: 1.28;
  letter-spacing: .01em;
  font-weight: 800;
  font-size: clamp(22px, 3.6vw, 34px);
}

.page-index .masthead-copy p{
  margin: 0;
  color:#333;
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.7;
}

/* モバイル時：少しコンパクトに */
@media (max-width: 799px){
  .page-index .masthead-copy{
    margin: 8px auto 6px;
    padding: 0 14px;
  }
  .page-index .masthead-copy h1{
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.35;
  }
  .page-index .masthead-copy p{
    font-size: clamp(13px, 3.8vw, 15px);
  }
}

/* 下の「検索する」ボタンを強制非表示（HTML上に残ってもOK） */
.page-index #search-form > .cta-button,
.page-index #search-form > div:has(> .cta-button){
  display:none !important;
}

/* ===== Masthead（ロゴ下の2行コピー）– 都会的モノトーン＋アクセントライン ===== */
.page-index .masthead-copy{
  max-width: 1120px;
  margin: 16px auto 10px;
  padding: 0 20px;
  color:#111;
  position: relative;
}

.page-index .masthead-copy h1{
  margin: 0 0 10px;
  line-height: 1.28;
  letter-spacing: .01em;
  font-weight: 800;
  font-size: clamp(22px, 3.6vw, 34px);
  position: relative;
}

/* アクセントライン（ブランドイエロー系のグラデ） */
.page-index .masthead-copy h1::after{
  content:"";
  display:block;
  width: 72px;                /* ライン長（60–90pxで好み調整） */
  height: 3px;                /* 太さ（2–4px） */
  margin-top: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ffe45e 0%, #ffd400 65%, #f0b400 100%);
  transform-origin: left center;
  animation: masthead-underline-in .5s ease-out both; /* 初回のみ */
}

.page-index .masthead-copy p{
  margin: 0;
  color:#555;
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.7;
}

/* さりげないホバー強調（デスクトップのみの軽い反応） */
@media (hover:hover){
  .page-index .masthead-copy:hover h1::after{
    width: 84px;              /* ほんの少しだけ伸びる */
    transition: width .25s ease;
  }
}

/* 初回アニメーション */
@keyframes masthead-underline-in{
  from { transform: scaleX(0); opacity:.6; }
  to   { transform: scaleX(1); opacity:1;  }
}

/* 動きに配慮（OS設定でモーション削減のときは無効化） */
@media (prefers-reduced-motion: reduce){
  .page-index .masthead-copy h1::after{
    animation: none;
  }
}

/* モバイル微調整 */
@media (max-width: 799px){
  .page-index .masthead-copy{
    margin: 12px auto 8px;
    padding: 0 14px;
  }
  .page-index .masthead-copy h1{
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.35;
  }
  .page-index .masthead-copy h1::after{
    width: 64px;
    height: 3px;
    margin-top: 8px;
  }
}

/* pick-upカード全体をリンクに */
.pickup-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.pickup-item a.pickup-link {
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
  z-index: 1; /* ← これで内部要素より上 */
}

/* hoverエフェクト */
.pickup-item a.pickup-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.pickup-item a.pickup-link:hover .pickup-name {
  text-decoration: underline;
}