/* ==========================================================================
   top-base.css – Lightning 子テーマ 共通スタイル
   ※「トップ全体の共通UI」専用（各セクション細分化CSSは別ファイルへ）
   ========================================================================== */

/* ------------------------------------------------------
   0) グローバル設定
   ------------------------------------------------------ */
:root{
  /* カルーセル右上のキャッチコピー（全スライダー共通） */
  --ts-catch: "変わらぬ旨さが、信頼になる。";

  /* 本文中リンク色（ナビ除外） */
  --ts-link:#fff; --ts-link-hover:#000; --ts-link-visited:#fff;

  /* Ramen Figure つまみ */
  --ramen-cap-py:16px; --ramen-cap-px:18px; --ramen-title-mb:.6rem;
}

/* ------------------------------------------------------
   1) Base（Lightning への軽い上書き）
   ------------------------------------------------------ */
.ts-wrap{ --c-red:#c40000; --c-black:#111; --c-gray:#666; --bg:#fafafa; font-size:16px; line-height:1.7; }
.ts-container{ max-width:1080px; margin:0 auto; padding:0 16px; }

/* ------------------------------------------------------
   2) Hero（動画背景）
   ------------------------------------------------------ */
.ts-hero{ position:relative; min-height:30vh; display:flex; align-items:center; justify-content:center; color:#fff; text-align:center; overflow:hidden; background:#c40000; }
.ts-hero::before{ content:""; position:absolute; inset:0; background:#c40000; opacity:.35; z-index:1; }
.ts-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.6; transition:opacity 2s ease; }
.ts-hero-video.is-fading{ opacity:0; }
@media (prefers-reduced-motion:reduce){ .ts-hero-video{ display:none!important; } }
.ts-hero-inner{ position:relative; z-index:2; padding:48px 16px; }
.ts-hero h1{ font-size:clamp(24px,4vw,40px); margin:0 0 12px; }
.ts-hero p.lead{ font-size:clamp(14px,2.2vw,18px); margin:0 0 20px; }

/* ------------------------------------------------------
   3) CTA / セクション共通
   ------------------------------------------------------ */
.ts-btn{ display:inline-block; padding:12px 18px; border-radius:10px; text-decoration:none; font-weight:700; }
.ts-btn-red{ background:var(--c-red); color:#fff; }
.ts-btn-black{ background:var(--c-black); color:#fff; }
.ts-cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.ts-qr{ margin-top:14px; }
.ts-qr img{ width:120px; height:auto; border-radius:8px; background:#fff; padding:6px; border:1px solid #eee; }

.ts-sec{ padding:48px 0; }
.ts-sec.alt{ background:var(--bg); }
.ts-h2{ font-size:1.6rem; margin:0 0 14px; }
.ts-lead{ color:var(--c-gray); margin:0 0 20px; }

/* ------------------------------------------------------
   4) PRカード
   ------------------------------------------------------ */
.ts-grid{ display:grid; gap:16px; }
.ts-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1024px){ .ts-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .ts-4{ grid-template-columns:1fr; } }
.ts-card{ background:#fff; border:1px solid #eee; border-radius:14px; padding:18px; box-shadow:0 8px 22px rgba(0,0,0,.05); }
.ts-card .icon{ font-size:28px; margin-bottom:6px; }
.ts-card h3{ font-size:1.05rem; margin:0 0 6px; }
.ts-card p{ margin:0; color:#555; }

/* ------------------------------------------------------
   5) YouTube 埋め込み（レスポンシブ）
   ------------------------------------------------------ */
.ts-vidgrid{ display:grid; gap:18px; }
@media (min-width:900px){ .ts-vidgrid{ grid-template-columns:repeat(3,1fr); } }
.ts-embed{ position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px; background:#000; }
.ts-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ------------------------------------------------------
   6) アクセス CTA／フッター
   ------------------------------------------------------ */
.ts-cta-box{ background:#fff; border:1px solid #eee; border-radius:14px; padding:22px; text-align:center; }
.ts-foot{ padding:28px 0; text-align:center; color:var(--c-gray); font-size:.95rem; }

/* アクセスボタン色 */
:root{ --ts-sky:#c41000; --ts-sky-hover:#c40000; }
#access-cta .ts-btn{ background:var(--ts-sky)!important; border-color:var(--ts-sky)!important; color:#fff!important; }
#access-cta .ts-btn:hover,#access-cta .ts-btn:focus{ background:var(--ts-sky-hover)!important; border-color:var(--ts-sky-hover)!important; color:#fff!important; }

/* ------------------------------------------------------
   7) アンカーずれ対策（固定ヘッダー分）
   ------------------------------------------------------ */
#ramen,#stay,#bath,#laundry{ scroll-margin-top:80px; }
html{ scroll-behavior:smooth; }

/* ------------------------------------------------------
   8) カルーセルの被り対策
   ------------------------------------------------------ */
/* 親を相対化 */
.lightning_swiper,.vk_slider,.vk-swiper,.veu_slider,.l-main-visual,.main-visual{ position:relative; }

/* スライド内キャプションを下部グラデ帯へ */
.ts-carousel{ --capPad:clamp(10px,4vw,22px); }
.ts-carousel .slick-slide,.ts-carousel .swiper-slide{ position:relative; }
.ts-carousel .vk_slider_item_text,
.ts-carousel .veu_slider_item .caption,
.ts-carousel figure figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:40; padding:var(--capPad);
  display:flex; flex-direction:column; gap:.45em; color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 46%, rgba(0,0,0,.78) 100%);
}

/* 可変サイズ */
.ts-carousel h2,.ts-carousel .title{ margin:0; line-height:1.25; font-size:clamp(18px,5.5vw,34px); }
.ts-carousel .lead,.ts-carousel p{ margin:0; font-size:clamp(12px,3.6vw,16px); opacity:.95; }
.ts-carousel .btn,.ts-carousel a.button,.ts-carousel .vk_button{ align-self:flex-start; margin-top:.4em; }

/* ドット/矢印の逃がし */
.ts-carousel .slick-dots{ bottom:6px; }
.ts-carousel .swiper-pagination{ bottom:6px !important; }

/* 右上キャッチ（PCのみ表示・z-index低め） */
.lightning_swiper::after,
.vk_slider::after,
.vk-swiper::after,
.veu_slider::after,
.l-main-visual::after,
.main-visual::after{
  content:var(--ts-catch,"活気・あたたかみ・信頼感");
  position:absolute; top:5%; right:2.5%; z-index:20; pointer-events:none;
  font-size:clamp(22px,4.2vw,48px); font-weight:800; letter-spacing:.08em; color:#fff; text-align:right;
  text-shadow:0 0 6px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.6); max-width:92vw; white-space:normal; padding:6px 10px;
}
/* 小さい画面では非表示 */
@media (max-width:768px){
  .lightning_swiper::after,.vk_slider::after,.vk-swiper::after,.veu_slider::after,.l-main-visual::after,.main-visual::after{ display:none!important; }
}

/* ------------------------------------------------------
   9) 本文リンクアクセシビリティ
   ------------------------------------------------------ */
.entry-content a:visited,.l-content a:visited,.widget-area a:visited,.footer a:visited{ color:var(--ts-link-visited)!important; }
.entry-content a:hover,.entry-content a:focus,
.l-content a:hover,.l-content a:focus,
.widget-area a:hover,.widget-area a:focus,
.footer a:hover,.footer a:focus{
  color:var(--ts-link-hover)!important; text-decoration-color:currentColor; text-decoration-thickness:.12em; text-underline-offset:.18em;
}
.entry-content a:focus-visible,.l-content a:focus-visible,.widget-area a:focus-visible,.footer a:focus-visible{
  outline:2px solid var(--ts-link-hover); outline-offset:2px; border-radius:2px;
}

/* ------------------------------------------------------
   10) NAV FIX – グローバルナビは常時「黒」
   ------------------------------------------------------ */
.l-header .global-nav a,.navbar .navbar-nav>li>a,.gNav a,.vk_global_menu a{ color:#111!important; }
.l-header .global-nav a:hover,.navbar .navbar-nav>li>a:hover,.gNav a:hover,.vk_global_menu a:hover{ color:#000!important; }
.vk-mobile-nav a,.vk-mobile-nav-menu a,.vk_mobile_nav a{ color:#111!important; }
.vk-mobile-nav a:hover,.vk-mobile-nav-menu a:hover,.vk_mobile_nav a:hover{ color:#000!important; }

/* 見出し装飾など */
.mv-pack{ background:transparent!important; border:0; box-shadow:none; padding:0; }
.mv-title{
  display:inline-block; color:#fff; font-weight:900; font-size:clamp(28px,4.8vw,56px);
  line-height:1.1; letter-spacing:.04em; -webkit-text-stroke:2px rgba(0,0,0,.55);
  text-shadow:0 0 2px rgba(0,0,0,.85),0 4px 22px rgba(0,0,0,.5);
}
@media (min-width:900px){ .mv-title{ -webkit-text-stroke:2.5px rgba(0,0,0,.55); } }

.mv-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ display:inline-block; padding:6px 12px; border-radius:999px; font-weight:800; font-size:clamp(12px,1.8vw,15px); background:transparent; color:#fff; border:2px solid #fff; text-shadow:0 2px 10px rgba(0,0,0,.55); }
.chip--accent{ border-color:#c40000; box-shadow:0 6px 16px rgba(196,0,0,.25); }

/* ------------------------------------------------------
   11) Ramen Figure（動画の下に黒帯＋説明）
   ------------------------------------------------------ */
.ramen-ph{ margin:16px 0; border-radius:16px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.08); background:transparent; }
.ramen-ph .ts-hero-video{ display:block; width:100%; height:auto; }
.ramen-cap{ background:#111; color:#fff; padding:var(--ramen-cap-py) var(--ramen-cap-px); }
.ramen-cap-title{ color:#c40000; font-weight:700; font-size:1rem; text-align:center; margin:0 0 var(--ramen-title-mb); letter-spacing:.02em; }
.ramen-cap-desc{ color:#fff; margin:0; line-height:1.8; font-size:.95rem; }
@media (min-width:900px){
  :root{ --ramen-cap-py:18px; --ramen-cap-px:22px; --ramen-title-mb:.7rem; }
}
.ramen-card>h3{ display:inline-block; background:#c40000; color:#fff; padding:8px 12px; border-radius:10px; margin:0 0 12px; box-shadow:0 1px 0 rgba(0,0,0,.03); }
.ramen-card>h3::after{ content:none!important; }
.ramen-item h4{ background:#fff3f3; color:inherit!important; padding:8px 10px; border-radius:8px; margin:0 0 8px; }
.ramen-item h4.has-background{ background:#fff3f3!important; color:inherit!important; }

/* ------------------------------------------------------
   12) カルーセル：タイトルを左下固定
   ------------------------------------------------------ */
.ts-carousel{ position:relative; }
.ts-carousel::after{ z-index:20; }
.ts-carousel .mv-pack{ position:absolute; left:2.5%; bottom:12%; margin:0; z-index:40; pointer-events:none; }
.ts-carousel .mv-title{ margin:0; display:block; }
@media (max-width:768px){
  .ts-carousel .mv-pack{ left:3%; bottom:18%; }
  .ts-carousel .mv-title{ font-size:clamp(22px,7vw,32px); -webkit-text-stroke:1.5px rgba(0,0,0,.55); }
}

/* =========================
   Footer layout fix（Lightning child / 汎用対応）
   ========================= */
/* フッターの当たり幅を広く（site-footer 名のスキンにも対応） */
.l-footer,.site-footer{ border-top:none; }
.l-footer .container,.l-footer .widget-area,
.site-footer .widget-area{ max-width:1080px; margin:0 auto; padding:0 16px; }

/* ウィジェットをグリッド化（自動で2～3列） */
.l-footer .widget-area,
.site-footer .widget-area,
.l-footer .footer_widget{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px;
}

/* ウィジェットタイトル（複数クラス対応） */
.l-footer .widget .widget-title,
.l-footer .widget .vk_widget_title,
.l-footer .widget .widgettitle,
.site-footer .widget .widget-title,
.site-footer .widget .widgettitle{
  position:relative; font-size:1.35rem; font-weight:700; margin:0 0 10px;
}
.l-footer .widget .widget-title::after,
.l-footer .widget .vk_widget_title::after,
.l-footer .widget .widgettitle::after,
.site-footer .widget .widget-title::after,
.site-footer .widget .widgettitle::after{
  content:""; display:block; width:120px; height:3px; background:#c40000; margin-top:8px;
}

/* リスト体裁（“サービスページ”項） */
.l-footer .widget ul,.site-footer .widget ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.l-footer .widget ul a,.site-footer .widget ul a{ text-decoration:none; color:inherit; }
.l-footer .widget ul a:hover,.site-footer .widget ul a:hover{ text-decoration:underline; }

/* 埋め込みの横溢れ防止（Gutenberg の embed/figure も） */
.l-footer iframe,.site-footer iframe,
.l-footer .wp-block-embed iframe,.site-footer .wp-block-embed iframe{
  width:100%!important; height:320px; border:0; border-radius:8px;
}

/* 直前セクションの赤ラインを抑制 */
.ts-sec + .l-footer,.ts-sec + .site-footer{ border-top:none; }


/* ===== Footer fix – Gutenberg widget_block 対応（強制版） ===== */

/* ラッパと横幅 */
.l-footer { border-top: none; }
.l-footer .container,
.l-footer .widget-area,
.l-footer .l-footer-widget-area { 
  max-width:1080px; margin:0 auto; padding:0 16px;
}

/* グリッド化（自動 1～3列） */
.l-footer .widget-area,
.l-footer .l-footer-widget-area {
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap:28px;
}

/* ウィジェットのデフォルト余白をリセット */
.l-footer .widget,
.l-footer .widget_block { margin:0 !important; }

/* 見出し（ブロック／従来両対応） */
.l-footer .widget_block .wp-block-heading,
.l-footer .widget .widget-title,
.l-footer .widget .vk_widget_title{
  position:relative;
  font-size:1.25rem;
  font-weight:700;
  margin:0 0 10px !important;
  line-height:1.3;
}
.l-footer .widget_block .wp-block-heading::after,
.l-footer .widget .widget-title::after,
.l-footer .widget .vk_widget_title::after{
  content:"";
  display:block;
  width:120px;height:3px;
  background:#c40000;
  margin-top:8px;
}

/* 箇条書きの整形（サービスページのリストなど） */
.l-footer .widget_block ul,
.l-footer .widget ul{
  list-style:none;
  margin:0 !important;
  padding:0 !important;
  display:grid;
  gap:.6rem;
}
.l-footer .widget_block li,
.l-footer .widget li{ margin:0; }

/* リンク */
.l-footer .widget_block a,
.l-footer .widget a{
  color:inherit;
  text-decoration:none;
}
.l-footer .widget_block a:hover,
.l-footer .widget a:hover{ text-decoration:underline; }

/* 段落・住所等の行間を詰めすぎないよう軽く補正 */
.l-footer .widget_block p{ margin:.25rem 0 !important; }

/* Google マップ等の埋め込みを枠内フィット */
.l-footer iframe{ 
  width:100% !important; height:320px; border:0; border-radius:8px;
}

/* コンテンツ直後の赤い罫線が重なるのを防止 */
.ts-sec + .l-footer,
.entry-content + .l-footer{ border-top:none !important; }



/* 青色ボタン追加 */
.stay-btn-blue {
  background: #003366; /* 好みで濃淡調整可 */
  color: #fff;
}
.stay-btn-blue:hover {
  background: #0066d3;
  color: #fff;
}





/* ------------------------------------------------------
   13) 旧JSで .ts-catch を挿入していた場合の保険
   ------------------------------------------------------ */
/* .ts-catch{ display:none!important; } */