/*
Theme Name: Lightning
Text Domain: lightning
Theme URI: https://lightning.vektor-inc.co.jp/en/
Description: Lightning is a very simple & easy to customize theme which is based on the Bootstrap. It is also very friendly with custom post types and custom taxonomies. When you add a new one, the breadcrumbs will be adjusted and posts will look beautifully without editing or adding a template files.
Author: Vektor,Inc.
Author URI: https://www.vektor-inc.co.jp
Version: 15.30.1
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Lightning WordPress theme, Copyright (C) 2015-2025 Vektor,Inc.
Lightning WordPress theme is licensed under the GPL.

Lightning WordPress Theme bundles the following third-party resources:

Font Awesome icon font, Copyright 2012 Fonticons, Inc.
its fonts are licensed under the terms of the SIL OFL License 1.1, and its code is licensed under the terms of the MIT license
Source: https://fontawesome.com/

Bootstrap framework, Copyright 2011 Bootstrap Authors and Twitter, Inc.
Bootstrap is licensed under the terms of the MIT license
Source: https://getbootstrap.com/

CSS Simple Tree Shaking
CSS Simple Tree Shaking is licensed under the terms of the GNU General Public License v2 license
Source: https://celtislab.net/
*/


:root{
  --accent:#00BFFF;
  --green:#0c9b3c;
  --text:#111;
  --muted:#666;
  --max:1100px;
}
*{box-sizing:border-box;
	padding: 0;
	margin: 0;
}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;color:var(--text);line-height:1.7;background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9}

/* Layout */
.container{width:min(var(--max),92%);margin-inline:auto}
.section{padding: clamp(2.5rem, 5vw, 5rem) 0}
.sect-ttl{text-align:center;font-size:clamp(28px,4vw,44px);letter-spacing:.08em;margin:0 0 1rem}
.sect-ttl small{display:block;font-size:.6em;color:#888;margin-top:.25em}

/* Header */
.site-header{position:sticky;
	z-index:50;
	 background: linear-gradient(90deg, #0b7a2a99, #159e3a99); /* 99(hex)=60% */;
}

.header__row{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.site-logo img{height:80px}
.gnav .hamburger{display:none;position:relative;width:42px;height:36px;border:0;background:transparent}
.gnav .hamburger span,
.gnav .hamburger::before,
.gnav .hamburger::after{content:"";position:absolute;left:8px;right:8px;height:2px;background:#fff;transition:.25s}
.gnav .hamburger span{top:17px}
.gnav .hamburger::before{top:10px}
.gnav .hamburger::after{bottom:10px}
.gnav__list{display:flex;gap:1.2rem;list-style:none;margin:0;padding:0}

.gnav__list img {
	height: 50px;
}
.gnav__list a{color:#fff;padding:.0rem .0rem;border-radius:.0rem}
.gnav__list a:hover{background:rgba(255,255,255,.15)}

@media (max-width:840px){
  .gnav .hamburger{display:block}
  .gnav__list{position:absolute;inset:96px 0 auto 0;background:#0b7a2a;display:none;flex-direction:column;padding:1rem}
  .gnav__list.is-open{display:flex}
}

/* HERO */
:root { --midashi-overlap: 24px; } 
.hero{position:relative;min-height:80svh;overflow:hidden;
	background-image: url("https://trek-kobe-tsukuhara.jp/wp/wp-content/uploads/2025/08/hptop.jpg");
	background-position: center;
	background-size: cover;
  margin-top: -100px;   /* 上に引き上げてヘッダーの裏へ */
  padding-top: var(--header-h);             /* 内容は隠れないように同量足す */
  position: relative;                       /* 念のため */
  z-index: 0;
  overflow: visible;                  /* ← 重要：はみ出しを切らない */
  z-index: 1;      
}
.hero__slides{position:relative;height:100%}
.hero__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s}
.hero__slide.is-active{opacity:1}
.hero__copy{position:absolute;inset:auto auto 6% 6%;color:#fff}
.hero__logo{width:min(220px,42vw);margin-bottom:1rem}
.hero__ribbon{display:inline-block;background:#128c2b;color:#fff;padding:.75rem 1rem;border-radius:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.25)}

.hero__midashi{
  position: absolute;
  right: clamp(8px, 15vw, 20vw);
  bottom: calc(-1 * var(--midashi-overlap));  /* 下にはみ出す */
  width: clamp(120px, 9vw, 220px);           /* 画像の見栄えに合わせて調整 */
  transform: rotate(0deg);                    /* 画像が水平なら斜めに。不要なら消してOK */
  transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
  pointer-events: none;                        /* クリックを邪魔しない（必要なら外す） */
  z-index: 2;
}

@media (max-width: 600px){
  :root { --midashi-overlap: 16px; }
  .hero__midashi{
    right: 8px;
    width: 92px;
    transform: rotate(-5deg);
  }
}

/* 角度は変えたくないので 0deg。角度を付けたい時は値だけ変えればOK */
:root{
  --midashi-rot: 0deg;       /* 例: -6deg にすると傾けたまま動きます */
  --midashi-overshoot: 1.12; /* どれだけ大きくするか（1.08〜1.18くらい） */
}

/* 帯画像（アニメ基準形） */
.hero__midashi{
  transform: rotate(var(--midashi-rot)) scale(1);
  animation: midashiPop 900ms cubic-bezier(.22,.9,.25,1.25) 120ms both;
  /* ↑ 遅延120ms, 終了後に最終状態を保持(both) */
}

/* ポップインのキーフレーム */
@keyframes midashiPop{
  0%   { opacity: 0; transform: rotate(var(--midashi-rot)) scale(.86); }
  60%  { opacity: 1; transform: rotate(var(--midashi-rot)) scale(var(--midashi-overshoot)); }
  100% {            transform: rotate(var(--midashi-rot)) scale(1); }
}

/* 動きを苦手とするユーザーには止める（アクセシビリティ） */
@media (prefers-reduced-motion: reduce){
  .hero__midashi{ animation: none; opacity: 1; }
}

/* 追加調整 */

/* ===== LEAD: 基準値（ここを触ると全体が動きます） ===== */
:root{
  --lead-title-w: clamp(520px, 58vw, 980px); /* タイトル画像の幅 */
  --lead-text-w : clamp(28rem, 36vw, 40rem); /* 本文の最大幅 */
  --lead-gap    : clamp(10px, 1.5vw, 18px);  /* タイトルと本文の間 */
}

/* picture をラッパーとして扱う */
.lead__title-img{
  display:block;
  width: var(--lead-title-w);
  margin-inline: auto;
  margin-bottom: var(--lead-gap);
}
.lead__title-img img{ width:100%; height:auto; display:block; }

/* 本文は細めの柱にして中央寄せ */
.lead__txt{
  max-width: var(--lead-text-w);
  margin: 0 auto;
  text-align: center;
}

/* ===== アイコンの位置（PC） ===== */
@media (min-width: 900px){
  /* 左上：散歩（タイトル左肩のやや外） */
  .lead__decor--left{
    position:absolute;
    left: calc((100% - var(--lead-title-w)) / 2 - 84px);
    top: -22px;
  }
  .lead__decor--left img{ width: 168px; }

  /* 右上：家族（OUTSIDE!! の右肩） */
  .lead__decor--right{
    position:absolute;
    right: calc((100% - var(--lead-title-w)) / 2 - 8px);
    top: -8px;
  }
  .lead__decor--right img{ width: 188px; }

  /* 右下：カヌー（本文の右下に少し重ねる） */
  .lead__decor--canoe{
    position:absolute;
    right: calc((100% - var(--lead-title-w)) / 2 - 14px);
    bottom: -10px;
  }
  .lead__decor--canoe img{ width: 170px; }
}

/* ===== モバイル：散歩アイコンを非表示、他は控えめに ===== */
@media (max-width: 640px){
  .lead__decor--left{ display:none; }
  .lead__decor--right{ right: 8px; top: -6px; }
  .lead__decor--right img{ width: clamp(86px, 24vw, 130px); }
  .lead__decor--canoe{ right: 10px; bottom: -6px; }
  .lead__decor--canoe img{ width: clamp(90px, 26vw, 130px); }
}

/* 899px以下では「散歩」と「家族」アイコンを非表示 */
@media (max-width: 899px){
  .lead__decor--left,   /* icon_sanpo.png（散歩） */
  .lead__decor--right { /* icon_kazoku.png（家族） */
    display: none;
  }
}


/* 追加調整 */
/* LEAD */






/* アクセシビリティ：見えないけど読み上げる */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0
}

/* レイアウトの土台 */
.lead{position:relative}
.lead__wrap{
	position:relative;
	padding-block: clamp(1.2rem, 2.4vw, 2rem);
 
}
.lead__title-img{
  width: clamp(340px, 64vw, 920px);
  max-width: 100%;
  display:block;
  margin-inline:auto;
  margin-bottom: .75rem;
}
.lead__txt{
  max-width: 560px;
  margin: 60px auto 0;
  text-align: center;
  color:#333;
}

/* デコレーション画像（共通） */
.lead__decor{
  position:absolute;
  z-index: 1;
  pointer-events: none;
}
.lead__decor img{
  display:block;
  width: auto;
  height: auto;
  max-width: 100%;
}

/* 注釈（＼ …… ／ を疑似要素で） */
.lead__note{
  font-weight:700;
  font-size: clamp(12px, 1.6vw, 15px);
  color:#2b2b2b;
  white-space: nowrap;
  text-align:center;
  line-height:1.2;
  margin-top: .25rem;
}
.lead__note::before{content:"＼"; margin-right:.35em}
.lead__note::after {content:"／"; margin-left:.35em}

/* 位置指定（PC向け） */
@media (min-width: 900px){
  /* 左上：コンテナ左から少し外へ */
  .lead__decor--left{
    left: max(-8px, calc((100% - var(--max, 1100px)) / -8)); /* ちょい外側へ押し出し */
    top: 260px;
  }
  .lead__decor--left img{ width: clamp(96px, 12vw, 150px); }

  /* 右上：タイトルの右肩あたり */
  .lead__decor--right{
        right: 12vw;
        top: 120px;
  }
  .lead__decor--right img{ 
        width: clamp(70px, 80px, 90px);
	}

  /* 右下：本文の右下に少し重ねる */
  .lead__decor--canoe{
    right: clamp(6px, 3vw, 28px);
    bottom: clamp(-6px, -1.2vw, -12px); /* 少しはみ出すなら負値に */
  }
  .lead__decor--canoe img{ width: clamp(90px, 12vw, 160px); }
}

/* モバイルは中央寄せにして重なりを弱める */
@media (max-width: 899.98px){
  .lead__decor--left{
    left: 6px; top: -8px;
  }
  .lead__decor--left img{ width: clamp(78px, 22vw, 120px); }

  .lead__decor--right{
    right: 6px; top: -8px;
  }
  .lead__decor--right img{ width: clamp(78px, 22vw, 120px); }

  .lead__decor--canoe{
    right: 8px; bottom: -6px;
  }
  .lead__decor--canoe img{ width: clamp(86px, 26vw, 130px); }
}

/* GALLERY */
.gallery{background:linear-gradient(#fff,#e8f7ff);padding:2rem 0}
.gallery__row{overflow:hidden}
.marquee{display:flex;gap:.75rem;list-style:none;margin:0;padding:0;animation:scroll-left 35s linear infinite;will-change:transform}
.gallery__row--right .marquee{animation-name:scroll-right}
.marquee li{flex:0 0 auto}
.marquee img{height:160px;width:auto;border-radius:.5rem;display:block}
@keyframes scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scroll-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ACTIVITY */
.activity__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:1.5rem}
@media (max-width:800px){.activity__cards{grid-template-columns:1fr}}
.act-card{position:relative;display:block;border-radius:1rem;overflow:hidden;background:#fff;border:1px solid #e5e5e5;box-shadow:0 10px 30px rgba(0,0,0,.06);color:#fff}
.act-card__img{padding-top:56%;background-size:cover;background-position:center}
.act-card h3{position:absolute;left:1rem;top:1rem;color:#fff;background:rgba(0,0,0,.45);padding:.4rem .6rem;border-radius:.5rem;margin:0}
.act-card p{position:absolute;right:1rem;bottom:3.2rem;background:#fff;color:#222;padding:.4rem .6rem;border-radius:.5rem;margin:0}
.btn-ghost{position:absolute;right:1rem;bottom:.9rem;border:2px solid #fff;color:#fff;padding:.35rem .8rem;border-radius:999px;background:rgba(0,0,0,.35);backdrop-filter:blur(4px)}


/* === ACTIVITY ヒーロー === */
.activity{ padding: 0; } /* 余白は下で制御 */
.activity-hero{
  position: relative;
  isolation: isolate;
  padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 7vw, 90px);
  min-height: clamp(420px, 60vw, 680px);
  overflow: hidden;
}
/* 半透明の背景（自転車.jpg）を擬似要素で敷く → 子要素は透明にならない */
.activity-hero::before{
  content:"";
  position:absolute; inset:0;
  background: url("https://trek-kobe-tsukuhara.jp/wp/wp-content/uploads/2025/08/自転車.jpg") center/cover no-repeat;
  opacity: .35;                       /* ← 透明度はお好みで */
  filter: saturate(110%) contrast(105%);
  z-index:-1;
}

/* 見出し画像 */
.activity-hero__title{
  width: clamp(300px, 60vw, 980px);
  margin: 0 auto clamp(16px, 3vw, 28px);
  display:block;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.18));
}

/* ボタン配置：sp=縦並び / PC=2列 */
.activity-hero__buttons{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3.2vw, 28px);
  justify-items:center;
}
@media (min-width: 900px){
  .activity-hero__buttons{ grid-template-columns: 1fr 1fr; }
}

/* ボタン画像のサイズとホバー */
.actbtn{ max-width: clamp(320px, 42vw, 520px); }
.actbtn img{
  width:100%; height:auto; display:block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.22));
  transition: transform .25s ease, filter .25s ease;
}
.actbtn:hover img{ transform: translateY(-2px) scale(1.02); filter: drop-shadow(0 24px 48px rgba(0,0,0,.26)); }

/* 既存の .reveal を使ってふわっと出現。時間差をつけたい要素に delay クラス */
.reveal.delay-1{ transition-delay: .12s; }
.reveal.delay-2{ transition-delay: .24s; }

/* 動きが苦手なユーザー配慮 */
@media (prefers-reduced-motion: reduce){
  .actbtn img{ transition: none; }
}

/* NEWS 横スクロール */
.news__rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(280px,80%);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem}
.news__rail::-webkit-scrollbar{height:8px}
.news__rail::-webkit-scrollbar-thumb{background:#ddd;border-radius:99px}
.news__item{scroll-snap-align:start;border:1px solid #eee;border-radius:.75rem;overflow:hidden;background:#fff}
.news__thumb{aspect-ratio:16/9;background:#f5f5f5}
.news__thumb img{width:100%;height:100%;object-fit:cover}
.news__date{display:block;font-size:.85rem;color:#666;margin:.5rem .75rem 0}
.news__title{font-size:1rem;margin:.25rem .75rem 1rem;color:#111}

/* INFORMATION */
.info{position:relative;overflow:clip}
.info__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.25}
.info__wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem}
@media (max-width:900px){.info__wrap{grid-template-columns:1fr}}
.info__ttl{font-size:1.25rem;margin:.75rem 0}

/* ===== INFORMATION（理想６） ===== */
.info{ padding: 0; }

/* 背景写真 + 薄い白ベールで淡く */
.info-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 60px) 0 clamp(36px, 7vw, 80px);
  isolation: isolate;
}
.info-hero::before{
  content:"";
  position:absolute; inset:0;
  background: url("https://trek-kobe-tsukuhara.jp/wp/wp-content/uploads/2025/08/P1124353.jpg") center/cover no-repeat;
  z-index:-2;
  transform: translateZ(0);
}
.info-hero::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(255,255,255,.55);   /* 背景を淡くする白ベール */
  z-index:-1;
}

/* 見出し */
.info__title{
  text-align:center;
  font-weight: 900;
  letter-spacing:.08em;
  color:#111;
  font-size: clamp(34px, 8vw, 90px);
  margin: 0 0 clamp(16px, 2.5vw, 28px);
}
.info__title small{
  display:block;
  font-size: clamp(12px, 2.2vw, 20px);
  letter-spacing:.25em;
  margin-top: .25em;
  color:#222;
}

/* 画像+テキスト（PC2カラム / SP縦並び） */
.info__content{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 3vw, 22px);
  align-items:start;
  margin-bottom: clamp(18px, 4vw, 28px);
}
@media (min-width: 900px){
  .info__content{
    grid-template-columns: minmax(260px, 0.9fr) 1.1fr;
    gap: clamp(18px, 3vw, 28px);
  }
}

.info__photo img{
  width:100%; height:auto; display:block;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}

.info__ttl{
  font-size: clamp(18px, 2.4vw, 28px);
  margin: .2rem 0 .5rem;
}
.info__text p{ margin: 0; line-height: 1.9; color:#222; }

/* 地図（角丸＋影） */
.info__map{
  margin-top: clamp(10px, 2vw, 16px);
}
.info__map iframe{
  width: 100%;
  height: clamp(260px, 42vw, 420px);
  display:block;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.16);
}

/* PCのみ表示のイラスト（地図の手前に重ねる） */
.info__mascot{
  bottom: clamp(32px, 6vw, 140px); /* 好みで数値は調整OK */
  /* そのまま */
  position: absolute;
  left: max(12px, calc((100% - var(--max, 1100px)) / 2 + 8px));
  width: clamp(110px, 12vw, 150px);
  z-index: 2;
}
@media (min-width: 1000px){
  .info__mascot{ display:block; }
}

@media (max-width: 999px){
  .info__mascot{ display:none; }
}

/* 既存のフェードインを流用 */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }











/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-in{opacity:1;transform:none}



/* ギャラリー上に被せられるよう基準を作る */
.gallery{
  position: relative;
  overflow: visible;                 /* はみ出しOK（画像は各rowで隠れる） */
}

/* カヌー：右から左へループ。高さ・被り量・速度は下の変数で調整 */
:root{
  --canoe-top: -10px;                /* 上に食い込ませる量（-を増やすともっと被る） */
  --canoe-size: clamp(90px, 12vw, 160px);
  --canoe-speed: 26s;                /* 速さ。短くすると速くなる */
}

.gallery__canoe{
  position: absolute;
  top: var(--canoe-top);
  left: calc(100% + 12vw);          /* 画面の外(右)からスタート */
  width: var(--canoe-size);
  z-index: 5;
  pointer-events: none;
  animation: canoeLoop var(--canoe-speed) linear infinite;
  /* ふわっと上下に揺らす（任意） */
  animation-name: canoeLoop, canoeBob;
  animation-duration: var(--canoe-speed), 3.6s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

/* 右→左へ通過して、また右から出直す */
@keyframes canoeLoop{
  0%   { left: calc(100% + 12vw); }
  100% { left: -28vw; }             /* 左の外まで抜ける */
}

/* さざ波ゆらぎ（任意、不要ならこのキーフレームを削除） */
@keyframes canoeBob{
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-6px) rotate(1deg); }
}

/* 小さな画面ではサイズと被り量を控えめに */
@media (max-width: 899px){
  :root{
    --canoe-top: -6px;
    --canoe-size: clamp(76px, 22vw, 120px);
    --canoe-speed: 22s;
  }
}

/* 動画酔い配慮：ユーザーが動きを減らす設定なら止める */
@media (prefers-reduced-motion: reduce){
  .gallery__canoe{ animation: none; }
}

/* INFORMATION: 旧レイアウトを無効化して縦並びに戻す */
.info__wrap{ 
  display: block;  /* ← これで見出し→内容→地図の順に縦積みになります */
}

/* 念のため：もし他所で grid が当たっても各要素は1列占有にする保険 */
.info__title, .info__content, .info__map{ grid-column: 1 / -1; }

/* NEWS 画像見出し */
.news__title-img{
  display:block;
  width: clamp(320px, 60vw, 980px);
  margin: 0 auto clamp(14px, 2.5vw, 24px);
}
.news__title-img img{
  width:100%;
  height:auto;
  display:block;
}



/* 画像見出し */
.info__title-img{
  display:block;
  width: clamp(320px, 60vw, 980px);
  margin: 0 auto clamp(16px, 2.5vw, 28px);
}
.info__title-img img{ width:100%; height:auto; display:block; }

	
	
/* ===== Footer (Base for 理想8) =============================== */
.site-footer{
  background: linear-gradient(90deg,#0b7a2a,#159e3a);
  color:#fff;
  margin-top: clamp(24px,6vw,56px);
}
.site-footer a{ color:inherit; text-decoration:none; }
.site-footer a:hover{ opacity:.92; }

/* 共通コンテナ（既存 .container があるならそれを使用） */
.site-footer .container{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(22px,3vw,34px) clamp(16px,4vw,32px);
}

/* 4カラムのメニュー */
.footer__grid{
  display:grid;
  gap: clamp(16px,2.4vw,28px);
  grid-template-columns: 1fr;               /* SPは1列 */
  align-items:start;
}
@media (min-width:960px){
  .footer__grid{  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px; } /* PCは5列 */
}

/* 各カード */
.f-card{ text-align:center; position:relative; }
@media (min-width:960px){
  .f-card{ padding-left: clamp(10px,1.6vw,16px); }
  .f-card:not(:first-child){
    /* 区切り線を各カラムの左端に描くのでズレにくい */
    border-left: 1px solid rgba(255,255,255,.28);
  }
}

@media (max-width:959px){
      .f-card {
        display: flex;
    }
}

.f-card__head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex: 1;
}
.f-card__icon{
  width: clamp(44px,5vw,64px);
  height:auto;
  display:block;
}
/* 画像内に文字が入っているので念のため非表示 */
.f-card__title{ display:none; }

/* 白い角丸ボタン（トップページ/新着情報/ご利用方法…） */
.f-card__links{
    display: grid;
    gap: 10px;
    margin-top: clamp(8px, 1.6vw, 12px);
    margin-left: clamp(8px, 6vw, 15px);
    justify-items: left;
}
.f-card__links a,
.f-card__label{
  background:#fff;
  color:#0b7a2a;
  display:inline-block;
  padding:.42rem .72rem;
  font-weight:700;
  box-shadow:
    0 1px 0 rgba(0,0,0,.08),
    inset 0 -2px 0 rgba(0,0,0,.06);
  margin-inline:auto;               /* 中央寄せ */
}
.f-card__links a:hover{ background:#f3fff6; }

/* OFFICIAL SNS ↔ お問い合わせの白いバー */
.footer__bar{
  background:#fff; color:#0b7a2a;
  border-radius:12px;
  padding: clamp(12px,2.4vw,18px) clamp(16px,3vw,24px);
  margin: clamp(18px,3vw,28px) auto 0;
  display:grid; gap:12px; align-items:center;
  grid-template-columns: 1fr;                /* SP:縦積み */
}
@media (min-width:960px){
  .footer__bar{
    grid-template-columns: 1fr 1fr;          /* PC:左右2分割 */
  }
  .footer__bar-right{ text-align:right; }
}

.footer__bar-left{ display:flex; align-items:center; gap:14px; }
.footer__snslabel{ font-weight:700; letter-spacing:.06em; }

.sns-list{ list-style:none; margin:0; padding:0; display:inline-flex; gap:14px; }
.sns-list img{ width:26px; height:auto; display:block; }

.contact__ttl{ margin:0 0 2px; font-weight:700; }
.contact__tel, .contact__time{ margin:0; }

/* コピーライト帯（最下段の細い帯） */
.footer__copy{
  text-align:center;
  padding:12px 0;
  background: rgba(0,0,0,.15);
  font-size:.9rem;
}
/* ============================================================ */	


ul.f-card__links {
    list-style: none;
	flex: 1;
}

img.f-card__icon {
    height: 80px;
    width: auto;
}


img.activity-hero__title.reveal.is-in {
    max-height: 160px;
    width: auto;
}
picture.news__title-img.reveal.is-in img {
    max-height: 160px;
    width: auto;
	margin: inherit;
}



/* ========== Rental Guide (scoped) ========== */
:root{
  --brand-1:#0b7a2a; /* header左のグリーン */
  --brand-2:#159e3a; /* header右のグリーン */
  --ink:#1b1b1f;
  --ink-weak:#5a5a63;
  --bg:#ffffff;
  --panel:#f6fbf7;
  --line:#e5efe7;
  --accent:#0b8f6a;
}

.guide .container{max-width:1100px;margin:0 auto;padding:clamp(16px,2vw,24px);}

/* --- hero --- */
.rental-hero{
  background:
    linear-gradient(180deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.85) 70%, #fff 100%),
    url("https://trek-kobe-tsukuhara.jp/wp/wp-content/uploads/2025/08/自転車.jpg") center/cover no-repeat;
  padding: clamp(40px,6vw,80px) 0 clamp(24px,5vw,56px);
}
.page-eyebrow{letter-spacing:.12em;color:var(--accent);font-weight:700;margin:0 0 .25rem;}
.page-title{font-size:clamp(28px,4.3vw,44px);line-height:1.2;margin:.2rem 0 .75rem;}
.page-title span{display:block;font-size:clamp(16px,2.2vw,20px);color:var(--ink-weak);}
.page-lead{max-width:70ch;color:var(--ink-weak);}

/* --- buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.6em; text-decoration:none; font-weight:700; border-radius:999px;
}
.cta-wide{
  padding:.9rem 1.6rem; background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
  color:#fff; box-shadow:0 10px 18px rgba(0,0,0,.15);
  position:relative; isolation:isolate; line-height:1.1;
}
.cta-wide span{
  display:block; font-weight:600; opacity:.9; font-size:.78em; letter-spacing:.02em;
  border-top:2px solid rgba(255,255,255,.65); margin-top:.35rem; padding-top:.35rem;
}
.cta-wide:hover{transform:translateY(-1px); filter:saturate(1.05);}

/* 大きめCTA */
.cta-wide--lg{font-size:clamp(18px,2.2vw,22px);padding:1.1rem 2rem;}

/* 画像ボタンを使いたい場合（任意）
.cta-wide{background:transparent;padding:0}
.cta-wide{inline-size: 420px; block-size:100px; background:url(https://trek-kobe-tsukuhara.jp/wp/wp-content/uploads/2025/08/btn_wide.png) no-repeat/contain;}
*/
/* ===== FLOWCHART (理想10デザイン) ===== */
.flow { margin: clamp(40px, 8vw, 80px) 0; }
.flow__head { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.flow__eyebrow {
  font-size: clamp(14px, 2.6vw, 22px);
  letter-spacing: .08em;
  color: #1a8f6d; /* 見出しの英字をアクセントに */
  font-weight: 700;
}
.flow__title {
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight: 800;
  letter-spacing: .04em;
  margin-top: .25em;
}

.flow__box{
  background: #f7f8f7;                 /* 薄いグレー面 */
  border: 1px solid #e4e7e4;
  border-radius: 20px;
  padding: clamp(20px, 4vw, 40px);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.flow__row{
  display: grid;
  grid-template-columns: minmax(110px, 160px) 1fr; /* 左ラベル固定 / 右本文可変 */
  gap: clamp(14px, 2.4vw, 26px);
  padding: clamp(14px, 2.4vw, 24px) clamp(4px, 1vw, 8px);
  align-items: start;
  border-top: 1px solid #e6e9e6;
}
.flow__row:first-child{ border-top: none; }

.flow__label{
  position: relative;
  font-weight: 700;
  color: #1f2d27;
  letter-spacing: .04em;
  line-height: 1.8;
  padding-left: 6px;
}

/* フローチャートの 2 カラムグリッド */
.guide-flow__grid{
  /* 左カラムの幅と列間。あなたの値に合わせて調整してください */
  --label-w: 9.5rem;   /* 「Web予約」「ご来店」などの幅 */
  --gap: 32px;         /* 列間 */
  --pad: 28px;         /* 枠内の上下パディング */
  position: relative;
}

/* コンテナに通す縦線（上～下まで） */
.guide-flow__grid::before{
  content: "";
  position: absolute;
  top: var(--pad);
  bottom: var(--pad);
  left: calc(var(--label-w) + var(--gap)/2);
  transform: translateX(-50%);  /* 線の中心を列間ど真ん中に */
  width: 2px;
  background: #dfe7e2;          /* 線の色（お好みで） */
  pointer-events: none;
}


.flow__content{ color:#2b3a34; line-height: 1.95; }
.flow__content p{ margin: .4em 0; }
.flow__content .flow__em{
  color: #d64f4f;                       /* 赤強調 */
  font-weight: 700;
}
.flow__content .flow__note{
  color: #5c6d64;
  font-size: .95em;
}

/* SP：縦積み＆縦線オフ */
@media (max-width: 768px){
  .flow__row{
    grid-template-columns: 1fr;
    padding: 18px 6px;
  }
  .flow__label{
    margin-bottom: 4px;
  }
  .flow__label::after{ display: none; }
  .flow__box{ border-radius: 16px; }
}

/* --- cards --- */
.cards{display:grid; gap:clamp(14px,2vw,20px); grid-template-columns:repeat(3,1fr);}
.cards--two{grid-template-columns:repeat(2,1fr);}
.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:clamp(14px,2.2vw,20px)}
.card-ttl{font-size:clamp(16px,2.2vw,18px); margin:.1rem 0 .4rem; font-weight:800}
.card.callout{background:linear-gradient(180deg,#f2fff8,#e9fff2); border-color:#cfeedd}
.dot{padding-left:1.1em;margin:0}.dot li{list-style:disc; margin:.25rem 0}

/* --- final cta --- */
.guide-final-cta{padding:clamp(24px,6vw,72px) 0; background:linear-gradient(180deg,#fff, #f6fbf7)}
.guide-final-cta .container{display:grid; place-items:center}

/* --- responsive --- */
@media (max-width: 1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  .flow-steps{grid-template-columns:1fr}
  .cards,.cards--two{grid-template-columns:1fr}
  .rental-hero{background:
    linear-gradient(180deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.9) 65%, #fff 100%),
    url("https://trek-kobe-tsukuhara.jp/wp/wp-content/uploads/2025/08/自転車.jpg") center/cover no-repeat;}
}


/* ====== Rental Hero ====== */
.rental-hero{
  position:relative;
  min-height:clamp(360px, 48vw, 560px);
  display:grid;
  place-items:center;
  overflow:clip;
  background:#eef7f0;
}
.rental-hero > picture,
.rental-hero > picture > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
.rental-hero__fade{
  position:absolute; left:0; right:0; bottom:0;
  height:36%;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.85) 60%,
    #fff 100%);
  pointer-events:none;
}
.rental-hero__inner{
  position:relative; z-index:2;
  width:min(92%, 1100px);
  margin-inline:auto;
  padding:clamp(20px, 4vw, 48px);
  align-self:start;
}
.rental-hero__eyebrow{
  margin:0 0 .4rem;
  font-size:clamp(12px, 1.2vw, 14px);
  letter-spacing:.12em;
  color:#fff;
}
.rental-hero__ttl{
  margin:0;
  font-size:clamp(28px, 3.6vw, 48px);
  line-height:1.15;
  color:#fff;
}
.rental-hero__sub{
  margin:.2rem 0 1rem;
  font-size:clamp(14px, 1.6vw, 18px);
  opacity:.9;
  color:#fff;
}
.rental-hero__lead{
  max-width:56ch;
  line-height:1.9;
  color:#fff;
}

/* SPヒーロー内ボタン（横長画像）。PCでは非表示 */
.btn-reserve-hero{
  position:absolute;
  left:clamp(12px, 6vw, 10%);
  bottom:clamp(12px, 6vw, 40px);
  width:clamp(240px, 60vw, 420px);
  display:none; /* PC非表示 */
  z-index:3;
}
.btn-reserve-hero img{ width:100%; height:auto; display:block; }

/* PC追従の丸ボタン */
.reserve-cta-fixed{
  position:fixed;
  right:clamp(12px, 2vw, 24px);
  bottom:clamp(12px, 2vw, 24px);
  width:clamp(96px, 12vw, 148px);
  z-index:90;
  transform:translateZ(0);
}
.reserve-cta-fixed img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 8px 0 rgba(0,0,0,.25));
  border-radius:50%;
}
@media (hover:hover){
  .reserve-cta-fixed:hover{ transform:translateY(-2px); }
}

/* ====== SPレイアウト調整 ====== */
@media (max-width: 767px){
  .rental-hero{
    min-height: clamp(520px, 78vh, 760px);
  }
  .rental-hero__inner{
    align-self:end;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.35);
  }
  .rental-hero__lead{ color:#fff; opacity:.95; }

  /* フェードは暗くして文字を読みやすく */
  .rental-hero__fade{
    height:58%;
    background:linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.25) 25%,
      rgba(0,0,0,.5) 100%);
  }

  .btn-reserve-hero{ display:block; } /* SPで表示 */
  .reserve-cta-fixed{ display:none; }  /* 丸ボタンはSPで非表示（被り防止） */
}


/* 見出しを枠内で気持ち詰める */
.flow__box .flow__head{
  text-align: center;
  margin: 0 0 clamp(16px, 3vw, 28px);
}

.flow__box .flow__eyebrow{
  font-size: clamp(14px, 2.6vw, 22px);
  letter-spacing: .08em;
  color: #1a8f6d;
  font-weight: 700;
}

.flow__box .flow__title{
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight: 800;
  letter-spacing: .04em;
  margin-top: .25em;
}

/* 先頭行のボーダーは出さない（既存と同じ） */
.flow__row:first-child{ border-top: none; }


/* color */
:root{
  --brand:#0b8b72;          /* 見出し・ドット用 */
  --brand-dark:#0a6f5f;
}

/* セクション余白 */
.guide-section{ padding-block: clamp(48px,6vw,88px); }

/* 見出し（FLOWCHART と同トーン） */
.guide-hgroup.center{
  text-align:center;
  margin-bottom: clamp(20px,3.5vw,32px);
}
.guide-eyebrow{
  color: var(--brand);
  font-weight: 700;
  letter-spacing: .2em;
  font-size: clamp(16px,2.1vw,22px);
  line-height: 1.2;
}
.guide-ttl-ja{
  margin-top: .35em;
  font-weight: 700;
  font-size: clamp(22px,3vw,32px);
}

/* 緑のスクエア箇条書き */
.guide-bullets{
  max-width: min(1000px, 92%);
  margin: clamp(16px,2.5vw,24px) auto clamp(36px,5vw,72px);
  display: grid;
  gap: clamp(10px,1.6vw,14px);
}
.guide-bullets li{
  position: relative;
  padding-left: 1.8em;
  line-height: 1.95;
}
.guide-bullets li::before{
  content:"";
  position: absolute;
  left: 0; top: .75em;
  width: 12px; height: 12px;
  border-radius: 2px;
  background: var(--brand);
  box-shadow: 0 2px 0 rgb(0 0 0 / 10%);
}
.guide-bullets .note{ font-size: .92em; opacity: .92; }

.hl{ color:#d44; font-weight:700; }  /* 赤ハイライト（数値等） */
.nowrap{ white-space: nowrap; }


li {
    list-style: none;
}


/* ========== Cycle page base ========== */
:root{
  --brand: #0A8B74;
  --brand-d: #06705f;
  --ink: #133;
  --muted: #6b7a85;
  --bg-soft: #f4f7f6;
  --chip: #e7f3ef;
}
.cycle .section { padding: clamp(48px,6vw,88px) 0; }
.container { width:min(1120px, 92%); margin-inline:auto; }
.tc { text-align:center; }
.eyebrow { letter-spacing:.18em; font-size:.9rem; color:var(--brand); }
.h2 { font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2rem); line-height:1.25; margin:.2em 0 .6em; }

/* ========== HERO ========== */
.cycle-hero { position:relative; min-height:clamp(520px, 72vh, 760px); overflow:hidden; }
.cycle-hero__bg,
.cycle-hero__bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cycle-hero__inner { position:relative; z-index:2; padding-top:clamp(56px,8vw,96px); color:#fff; }
.cycle-hero .eyebrow{ color:#fff; }
.cycle-hero .ttl { font-size:clamp(2rem, 1.2rem + 2.4vw, 3rem); margin:.25em 0 .4em; }
.cycle-hero .lead { max-width:56ch; font-size:clamp(.95rem, .8rem + .4vw, 1.05rem); line-height:1.9; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.cycle-hero__fade{ position:absolute; inset:auto 0 0; height:34%; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 70%, #fff 100%); z-index:1; }

/* 小さめの予約ボタン（ヒーロー内） */
.btn.reserve-sm{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:180px; height:56px; margin-top:18px;
  border-radius:999px; background:var(--brand); color:#fff; text-decoration:none;
  box-shadow:0 8px 14px rgba(0,0,0,.18);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn.reserve-sm:hover{ transform:translateY(-2px); background:var(--brand-d); box-shadow:0 10px 18px rgba(0,0,0,.22); }
.btn.reserve-sm .btn__ja{ font-weight:700; letter-spacing:.08em; line-height:1; }
.btn.reserve-sm .btn__en{ font-size:.72rem; opacity:.9; margin-top:2px; position:relative; }
.btn.reserve-sm .btn__en::after{
  content:""; display:block; width:92px; height:2px; background:#fff; opacity:.8; margin:-10px auto 8px;
}

/* ========== INTRO ========== */
.cycle-intro__grid{
  display:grid; gap:clamp(16px,3vw,28px); align-items:center;
  grid-template-columns: 1.1fr 1fr;
}
.cycle-intro__text p{ color:var(--ink); line-height:1.9; }
.cycle-intro__pic img{ width:100%; height:auto; border-radius:18px; box-shadow:0 14px 28px rgba(0,0,0,.12); }
@media (max-width: 899px){
  .cycle-intro__grid{ grid-template-columns:1fr; }
}

/* ========== LINEUP cards ========== */
.lineup-cards{
  margin-top:24px;
  display:grid; gap:16px;
  /* 幅に応じて自動で 5～7列などに可変 */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.lineup-card{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06); display:flex; flex-direction:column;
}
.lineup-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.lineup-card__body{ padding:12px 12px 14px; display:grid; gap:8px; }
.lineup-card__body h3{ font-size:1.02rem; }
.chip{
  align-self:start; font-size:.85rem; letter-spacing:.06em; color:var(--brand);
  background:var(--chip); border-radius:999px; padding:6px 12px; text-decoration:none;
}
.chip:hover{ background:#dff0ea; }

/* ========== DETAIL（大きめカード） ========== */
.detail{ display:grid; gap:28px; }
.detail-card{
  background:#fff; border-radius:18px; overflow:hidden; display:grid; gap:0;
  grid-template-columns: 1.15fr 1fr;
  box-shadow:0 14px 28px rgba(0,0,0,.08);
}
.detail-card__pic img{ width:100%; height:100%; object-fit:cover; }
.detail-card__body{ padding:clamp(18px,2.4vw,28px); }
.detail-ttl{ font-size:clamp(1.25rem, 1rem + .8vw, 1.6rem); margin:0 0 10px; }

.price dl{ display:grid; grid-template-columns:80px 1fr; gap:8px 10px; margin:10px 0 16px; }
.price dt{ color:var(--muted); }
.price dd{ font-weight:700; }
.size h4{ font-size:1rem; margin:8px 0 4px; color:var(--brand-d); }
.notes{ margin:10px 0 0 0; padding-left:1.2em; }
.notes li{ list-style:disc; margin:.35em 0; }

@media (max-width: 999px){
  .detail-card{ grid-template-columns:1fr; }
  .detail-card__pic{ order:-1; }
}

/* ========== GEAR ========== */
.cycle-gear{ background:var(--bg-soft); }
.gear-grid{ margin-top:12px; display:grid; gap:18px; grid-template-columns:repeat(4, 1fr); }
.gear{ background:#fff; border-radius:14px; text-align:center; padding:12px; box-shadow:0 8px 18px rgba(0,0,0,.06); }
.gear img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:10px; }
.gear__name{ margin-top:8px; font-weight:600; }
@media (max-width: 899px){ .gear-grid{ grid-template-columns:repeat(2, 1fr); } }

/* ========== FLOAT CTA（右下追従） ========== */
.floating-cta{
  position:fixed; right:18px; bottom:18px; z-index:50; display:block; line-height:0;
  transition:transform .2s ease, filter .2s ease;
}
.floating-cta:hover{ transform:translateY(-2px); filter:drop-shadow(0 10px 18px rgba(0,0,0,.28)); }
.floating-cta__pc{ display:block; width:150px; height:auto; }
.floating-cta__sp{ display:none; }
@media (max-width: 899px){
  .floating-cta__pc{ display:none; }
  .floating-cta__sp{ display:block; width:min(92vw, 700px); height:auto; }
}

/* ===== detail spec（新：料金／身長／台数） ===== */
.spec-list {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: .25rem 1rem;
  margin: .5rem 0 0;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.8;
}
.spec-list dt {
  color: #0d6b5d;          /* 見出し：ブランドグリーン系 */
  font-weight: 700;
}
.spec-list dd {
  margin: 0;
}

/* アンカー位置のずれ防止（固定ヘッダーを考慮） */
.detail-card { scroll-margin-top: 96px; }

/* 一応スムーズスクロール（未設定なら） */
html { scroll-behavior: smooth; }


/* === DETAIL を 2列グリッドに === */
.cycle-detail .detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列 */
  gap: 28px; /* カード間の間隔。お好みで */
}

/* グリッド化するのでカードの個別マージンは無効化 */
.cycle-detail .detail .detail-card {
  width: 100%;
  margin: 0;
}

/* もし「.detail-card + .detail-card { margin-top:… }」が既存なら上書きで無効化 */
.cycle-detail .detail .detail-card + .detail-card {
  margin-top: 0;
}

/* 画像の横幅はカードに合わせる */
.detail-card__pic img {
  width: 100%;
  height: auto;
  display: block;
}

/* 画面が狭い時は1列に戻す */
@media (max-width: 960px) {
  .cycle-detail .detail {
    grid-template-columns: 1fr; /* 1列 */
    gap: 20px;
  }
}


/* ---------- 共通：ページヒーロー ---------- */
.page-hero { padding: 64px 0 24px; }
.page-hero .eyebrow { letter-spacing: .18em; color: #157e6f; font-weight: 700; }
.page-hero .ttl-ja { font-size: clamp(24px, 3vw, 36px); margin: 6px 0 8px; }
.page-hero .lead { color:#557; }

/* ---------- INSURANCE ---------- */
.insure-grid { display:grid; gap:22px; grid-template-columns: repeat(4,1fr); margin: 24px auto 56px; }
@media (max-width: 1024px){ .insure-grid{grid-template-columns: repeat(2,1fr);} }
@media (max-width: 680px){ .insure-grid{grid-template-columns: 1fr;} }
.insure-card{ background:#fff; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.06); padding:24px; }
.insure-card__head{ font-size:16px; color:#157e6f; margin:0 0 10px; }
.insure-card__price{ font-size:24px; font-weight:700; margin:0 0 8px; }
.insure-card__price span{ font-size:34px; }
.insure-card__desc{ color:#445; line-height:1.8; }

/* ---------- FAQ（アコーディオン） ---------- */
.faq-h2{ font-size:22px; margin:32px 0 14px; text-align:left; }
.faq-list{ margin:0; }
.faq-item{ border-bottom:1px solid #e6eee9; }
.faq-q{
  width:100%; text-align:left; background:#fff; border:0; padding:16px 44px 16px 0;
  font: inherit; line-height:1.6; position:relative; cursor:pointer;
}
.faq-q::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:#157e6f; color:#fff; font-weight:700;
}
.faq-item.is-open .faq-q::after{ content:"–"; }  /* マイナス記号 */
.faq-a{ padding:0 0 16px; color:#445; line-height:1.9;
    background-color: #f2f2f2;
    padding: 15px;}
.faq-a[hidden]{ display:none; }

/* ---- sub navigation (page in-links) ---- */
.subnav{
  display:flex; gap:10px; justify-content:center; margin:14px 0 6px; padding:0; list-style:none;
}
.subnav a{
  display:inline-block; padding:8px 14px; border-radius:999px; background:#e6f3f0;
  color:#157e6f; font-weight:700; text-decoration:none;
}
.subnav a:hover{ background:#d4ede8; }
.mb-24{ margin-bottom:24px; }

/* ====== Dropdown (PC) / Accordion (SP) for Cycling ====== */
.gnav__list > li { position: relative; }
.gnav__list .has-sub > a { position: relative; }

/* ▼ 下層（PCはフローティング、SPは縦積み） */
.sub{
  list-style: none;
  margin: 0;
  padding: .6rem;
  min-width: 220px;
  display: grid;
  gap: .25rem;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #fff;
  color: #0b7a2a;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  opacity: 0;
  pointer-events: none;
  transition: .18s ease;
  z-index: 40;
}
.sub a{
  display: block;
  padding: .6rem .8rem;
  border-radius: 8px;
  color: #0b7a2a;
  font-weight: 700;
  text-decoration: none;
}
.sub a:hover{ background: #f3fff6; }

/* PC：hover / focus-within で開く（キーボード操作にも対応） */
.has-sub:hover > .sub,
.has-sub:focus-within > .sub{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* ちいさな三角形（飾り） */
.has-sub:hover > .sub::before,
.has-sub:focus-within > .sub::before{
  content:"";
  position:absolute; top:-8px; left:50%;
  transform:translateX(-50%);
  border:8px solid transparent;
  border-bottom-color:#fff;
}

/* ▼ SP（～840px）：ハンバーガー内のアコーディオンにする */
@media (max-width:840px){
  /* 既存仕様：.gnav__list がオーバーレイの縦並びになる */
  .sub{
    position: static;
    transform: none;
    box-shadow: none;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    padding: .25rem 0 .5rem .25rem;
    margin: .25rem 0 .25rem .5rem;
    gap: 0;
    opacity: 1;               /* 常に描画はする */
    pointer-events: auto;
    display: none;            /* ただし初期は非表示 */
  }
  .has-sub.is-open > .sub{ display: block; }

  /* サブ展開ボタン（右端の ＞ ） */
  .sub-toggle{
    display: inline-flex;
    width: 34px; height: 34px;
    margin-left: 6px;
    align-items:center; justify-content:center;
    background: transparent; border: 0;
  }
  .sub-toggle::before{
    content:"";
    width: 10px; height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    transition: transform .2s ease;
    opacity: .9;
  }
  .has-sub.is-open > .sub-toggle::before{ transform: rotate(45deg); } /* ↓ に変形 */
}

/* PCでは展開ボタンは不要なので隠す */
@media (min-width:841px){
  .sub-toggle{ display:none; }
}


/* 親を基準に配置 */
.gnav .has-sub{ position: relative; }

/* ドロップダウン本体 */
.gnav .sub{
  position: absolute;
  top: calc(100% + 8px);   /* アイコンの下に8pxだけ離して表示（見た目で調整OK） */
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition: opacity .15s ease, visibility .15s ease, translate .15s ease;
  z-index: 1000;
  pointer-events: auto;
}

/* ホバーorフォーカス中は開く（キーボード操作にも対応） */
.gnav .has-sub:hover .sub,
.gnav .has-sub:focus-within .sub,
.gnav .sub:hover{
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}


.nav li, nav li {
    text-align: center;
}


th.day-left {
    display: none;
}


/* ===== cycle：予約ボタン ===== */
.detail-card__cta{ margin-top: .6rem; }

.reserve-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; padding:.65rem 1.1rem; border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-d));
  color:#fff; font-weight:700; text-decoration:none;
  box-shadow:0 8px 16px rgba(0,0,0,.14);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.reserve-btn:hover{
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow:0 12px 22px rgba(0,0,0,.18);
}


/* ===== cycle：上部ショートカットボタン ===== */
.cycle-cta { padding: 8px 0 24px; }
.cycle-cta .cta-btns {
  display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
}

/* ボタン共通 */
.cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.2rem; border-radius:999px; font-weight:700;
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow:0 10px 18px rgba(0,0,0,.12);
}
.cta-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 24px rgba(0,0,0,.16); }

/* プライマリ（ブランド色） */
.cta-btn--primary{
  background:linear-gradient(90deg, var(--brand), var(--brand-d));
  color:#fff;
}

/* セカンダリ（白地＋枠） */
.cta-btn--outline{
  background:#fff; color:var(--brand-d);
  border:2px solid var(--brand);
}


/* How-to block */
.rental-how { background:#f3faf7; border-radius:16px; }
.rental-how .lead { max-width:60ch; margin:.5rem auto 1rem; }
.rental-how .rules { max-width:70ch; margin:0 auto; padding-left:1.2rem; list-style:disc; }
.rental-how .rules li + li { margin-top:.4rem; }

/* 気持ちよくスクロール */
html { scroll-behavior: smooth; }

/* アンカー飛びのズレ防止（固定ヘッダーを越える分だけ調整） */
#rental-map { scroll-margin-top: 96px; }

/* 地図の入れ物 */
.cycle-map .map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;      /* 比率固定でレスポンシブ */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* 埋め込みiframeは全面にフィット */
.cycle-map .map-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* （任意）メモの体裁 */
.cycle-map .map-note { margin-top: 12px; color: #666; font-size: .95rem; }



/* SPメニューの中央寄せ（～840px） */
@media (max-width: 840px){
  /* UL 自体 & LI を中央寄せ */
  .gnav__list > li,
  .gnav_list  > li { text-align: center; }

  /* 各リンクをセンターに・左パディングを消す */
  .gnav__list > li > a,
  .gnav_list  > li > a {
    display: block;
    width: 100%;
    padding: 18px 0 !important;   /* 左余白でズレるテーマ対策 */
    text-align: center;
  }

  /* アイコン画像を中央に */
  .gnav__list > li > a img,
  .gnav_list  > li > a img {
    display: block;
    margin: 0 auto;
        height: 18vw;
        width: auto;
  }

  /* サブメニュー開閉ボタン（矢印）を右端に固定 */
  .gnav__list .sub-toggle,
  .gnav_list  .sub-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }
}


@media (max-width:840px){
picture.news__title-img.reveal.is-in img {
    max-height: 100px;
    width: auto;
    margin: inherit;
}
	
	p.lead__txt.reveal.is-in {
    text-align: left;
}
}






/* ダウンロード案内（前回と同じ） */
.insure-download{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  background:#f4fbff; border:1px solid #d9ecff;
  padding:12px 14px; border-radius:12px; margin:6px 0 18px;
}
.insure-download__lead{ margin:0; color:#1a2a33; }
.dl-button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem 1rem; border-radius:999px; font-weight:700;
  background:linear-gradient(90deg,#0b7a2a,#159e3a); color:#fff; text-decoration:none;
  box-shadow:0 8px 16px rgba(0,0,0,.12);
}
.dl-button:hover{ transform:translateY(-1px); filter:saturate(1.05); }

/* カード内の細部調整（既存スタイルの上乗せ） */
.insure-card__price{ display:flex; align-items:baseline; gap:.25em; margin:.25rem 0 .5rem; }
.insure-card__price span{ font-size:clamp(22px,3.6vw,30px); font-weight:800; letter-spacing:.02em; }
.insure-card__price small{ font-size:.85em; opacity:.7; }
.insure-card__bullets{ margin:.25rem 0 0; padding-left:1.1em; }
.insure-card__bullets li{ line-height:1.7; margin:.15rem 0; }





/* 貸し出し場所（3カード） */
.rental-locations{
  display:grid; gap:clamp(14px,2.5vw,20px);
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .rental-locations{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width: 1180px){
  .rental-locations{ grid-template-columns: repeat(4, 1fr); }
}

.loc-card{
  background:#fff; border:1px solid #eaeaea; border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  display:flex; flex-direction:column; overflow:hidden;
}
.loc-card__body{ padding:12px 14px; }
.loc-card__name{ margin:.1rem 0 .25rem; font-weight:800; font-size:1.08rem; }
.loc-card__addr{ margin:0 0 .5rem; color:#333; line-height:1.7; }
.loc-card__actions{ margin:0; }

.btn--mini{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.42rem .8rem; border-radius:999px; font-weight:700;
  background:linear-gradient(90deg,#0b7a2a,#159e3a); color:#fff; text-decoration:none;
  box-shadow:0 8px 16px rgba(0,0,0,.12);
}
.btn--mini:hover{ transform:translateY(-1px); filter:saturate(1.05); }

.loc-card__map{ position:relative; aspect-ratio: 4 / 3; }
.loc-card__map iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block;
}
.map-note{ color:#555; margin-top:8px; }


/* 下揃えにするためのパッチ */
.rental-locations{ align-items:stretch; }  /* 念のため行の高さをそろえる */
.loc-card{ display:flex; flex-direction:column; height:100%; } /* カードを縦flex */
.loc-card__map{
  margin-top:auto;            /* ← これで地図が常にカード下端へ */
  position:relative;
  aspect-ratio: 4 / 3;        /* 地図の縦横比を統一（任意で 16/9 でもOK） */
}
.loc-card__map iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}



/* タイトル・前置き */
.insure-ttl{
  margin: 8px 0 10px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
}
.insure-lead{ margin:0 0 10px; line-height:1.9; }

/* 概要の2カード */
.insure-liability-grid{
  display:grid; gap:12px; grid-template-columns:1fr;
}
@media (min-width:900px){ .insure-liability-grid{ grid-template-columns:1fr 1fr; } }
.liability-card{
  background:#eaf6ef; border:1px solid #cfe9d8; border-radius:12px;
  padding:12px 14px;
}
.liability-ttl{ margin:0 0 4px; font-weight:800; color:#116e3a; }
.liability-ex{ margin:0; }
.insure-note{
  margin-top:10px; padding:10px 12px; border-radius:10px;
  background:#fff5e6; border:1px solid #ffe0b3; color:#4a3b1f;
}

/* 支払限度額テーブル（CSSグリッド） */
.insure-limits{ margin-top:20px; }
.limits-grid{
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap:0; border:1px solid #e5e5e5; border-bottom:none;
  border-radius:12px 12px 0 0; overflow:hidden;
}
.limits-grid + .limits-grid{ border-radius:0 0 12px 12px; border-top:none; border-bottom:1px solid #e5e5e5; }
.limits-head .cell{
  background:#eaf5ff; border-right:1px solid #e5e5e5; padding:10px 12px; text-align:center; font-weight:700;
}
.limits-head .cell:last-child{ border-right:none; }
.limits-body .cell{
  background:#fff; border-right:1px solid #e5e5e5; padding:16px 14px; display:flex; align-items:center; justify-content:center; text-align:center;
}
.limits-body .cell:last-child{ border-right:none; }
.cell--big{ font-size:clamp(18px,2.4vw,22px); font-weight:700; }
.bignum{ font-size:clamp(24px,3.6vw,32px); font-weight:800; margin-right:.15em; letter-spacing:.02em; }
.limits-list{ margin:0; padding-left:1.1em; text-align:left; line-height:1.9; }
.limits-footnote{ margin:.6rem 0 0; font-size:.95em; color:#444; }

/* スマホ時の積み替え */
@media (max-width:720px){
  .limits-grid{ grid-template-columns: 1fr; }
  .limits-head .cell, .limits-body .cell{ border-right:none; border-bottom:1px solid #e5e5e5; }
  .limits-body .cell:last-child{ border-bottom:1px solid #e5e5e5; }
}

/* 小さな改行補助 */
.sp{ display:none; }
@media (max-width:640px){ .sp{ display:inline; } }


/* ▼スマホ時：支払限度額テーブルを「見出し→値」のペア順に並べる */
@media (max-width: 720px){

  /* ① セクション自体をグリッドにして、内部2グリッドをフラット化 */
  .insure-limits{
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
  }
  .insure-limits .limits-grid{        /* 既存の2つのグリッドを“器だけ”にする */
    display: contents;
    border: none;
  }

  /* ② 見た目（色・罫線）を再付与 */
  .insure-limits .limits-head .cell{
    background: #eaf5ff;
    font-weight: 700;
    text-align: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e5e5;
  }
  .insure-limits .limits-body .cell{
    background: #fff;
    text-align: center;
    padding: 16px 14px;
    border-bottom: 1px solid #e5e5e5;
  }
  .insure-limits .limits-body .cell:last-child{ border-bottom: none; } /* 最後のセルの線を消す */

  /* ③ 並び替え：H1→V1→H2→V2→H3→V3 */
  .insure-limits .limits-head .cell:nth-child(1){ grid-row: 1; }
  .insure-limits .limits-body .cell:nth-child(1){ grid-row: 2; }
  .insure-limits .limits-head .cell:nth-child(2){ grid-row: 3; }
  .insure-limits .limits-body .cell:nth-child(2){ grid-row: 4; }
  .insure-limits .limits-head .cell:nth-child(3){ grid-row: 5; }
  .insure-limits .limits-body .cell:nth-child(3){ grid-row: 6; }

  /* ④ 数値の視認性（任意で少し大きく） */
  .insure-limits .cell--big .bignum{ font-size: 28px; }
}



/* 年間保険料（3列目）をまるごと隠して、2列レイアウトに詰める */
.insure-limits .limits-head .cell:nth-child(3),
.insure-limits .limits-body .cell:nth-child(3){
  display:none;
}

/* PC/タブレット：2列に再定義して隙間を詰める */
.insure-limits .limits-grid{
  grid-template-columns: 1fr 1fr !important;
}

/* 罫線の調整（右端の線がダブらないように） */
.insure-limits .limits-head .cell:nth-child(2),
.insure-limits .limits-body .cell:nth-child(2){
  border-right: none;
}

/* スマホの並び：見出し→値 のペアで並べ直し（2項目版） */
@media (max-width: 720px){
  .insure-limits{
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
  }
  .insure-limits .limits-grid{ display: contents; border: none; }

  /* 見出しの見た目 */
  .insure-limits .limits-head .cell{
    background: #eaf5ff;
    font-weight: 700;
    text-align: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e5e5;
  }
  /* 値の見た目 */
  .insure-limits .limits-body .cell{
    background: #fff;
    text-align: center;
    padding: 16px 14px;
    border-bottom: 1px solid #e5e5e5;
  }

  /* 並び替え：H1→V1→H2→V2（3項目目は非表示のため不要） */
  .insure-limits .limits-head .cell:nth-child(1){ grid-row: 1; }
  .insure-limits .limits-body .cell:nth-child(1){ grid-row: 2; }
  .insure-limits .limits-head .cell:nth-child(2){ grid-row: 3; }
  .insure-limits .limits-body .cell:nth-child(2){ grid-row: 4; }

  /* 最後の行の罫線を消す */
  .insure-limits .limits-body .cell:nth-child(2){ border-bottom: none; }
}


.rental-locations {
  justify-content: center; /* 中央寄せ */
}


.canoe-flyer {
  margin: 1.5rem auto;
  max-width: 900px;
}
.canoe-flyer img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

.canoe-notes {
  margin-top: 2rem;
  background: #f8fdfb;
  border: 1px solid #dcefe5;
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.canoe-notes h3 {
  margin-bottom: 1rem;
  color: #0b8b72;
}
.canoe-notes ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.canoe-notes li {
  margin: 0.5rem 0;
  padding-left: 1.2em;
  position: relative;
}
.canoe-notes li::before {
  content: "※";
  position: absolute;
  left: 0;
  color: #d44;
  font-weight: bold;
}

.dl-button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1.2rem; border-radius:999px; font-weight:700;
  background:linear-gradient(90deg,#0b7a2a,#159e3a); color:#fff; text-decoration:none;
  box-shadow:0 8px 16px rgba(0,0,0,.12);
}
.dl-button:hover{ transform:translateY(-1px); filter:saturate(1.05); }

.sns-list img {
  width: 28px;  /* 少し大きめ */
  height: auto;
}

.sns-list a:hover img {
  opacity: 0.8;
  transform: scale(1.05);
  transition: 0.2s;
}

.man-in {
    background: linear-gradient(90deg, #0b7a2a, #159e3a);
    padding: .7rem 1.2rem;
    display: table;
    margin: auto;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    width: auto;
    font-weight: 700;
    color: #fff;
}

.man-in p {
    margin: auto;
}

.hide {
	display: none;
}


/* サイクルトレイン案内ページ用 */
.train-flyer {
  margin-bottom: 1.8rem;
  text-align: center;
}

.train-flyer img {
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.train-flyer img:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.btn-ghost {
  display: inline-block;
  background: linear-gradient(90deg, #0b7a2a, #159e3a);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  border-radius: 999px;
  padding: 0.9rem 2rem;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn-ghost:hover {
  background: linear-gradient(90deg, #159e3a, #0b7a2a);
  transform: translateY(-2px);
}