:root{
  --accent-color:#1c5722;
  --bg-color:#ffffff;
  --text-color:#1a1a1a;
  --font-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
}

/* ===== Reset & base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-serif);color:var(--text-color);background:var(--bg-color);line-height:1.7;}
img{max-width:100%;height:auto;vertical-align:middle;}
a{color:inherit;text-decoration:none;}

/* ■■■ 1) 共通レイアウトユーティリティ ― container を中央寄せ ■■■ */
.container{
  width:90%;
  max-width:1100px;           /* お好みで調整 */
  margin:0 auto;              /* 中央寄せ */
}

/* notice 再定義（トップ固定→スクロールで隠れる） */
.notice-bar {
  position: fixed;          /* 画面最上部 */
  top: 0;
  left: 0;
  width: 100%;
  background: #005e9b;
  color: #fff;
  text-align: center;
  padding: .5rem 1rem;
  font-weight: 700;
  font-size: .95rem;
  z-index: 2000;
  transform: translateY(0);
  opacity: 1;
  transition: transform .35s ease, opacity .35s ease;
}
.notice-bar.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ===== Left-side header ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;   /* ← ここが変更対象 */
  height: 100vh;
  background: rgba(248, 248, 248, 0.959);
  box-shadow: 2px 0 4px rgba(0,0,0,.05);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}
/* ─── 左サイドヘッダーのロゴを拡大 ─── */
#header_logo{
  width: 100%;
}
#header_logo img{
  display: block;
  margin: 0 auto;
  /* PC 時（左ヘッダー幅 220px 想定）で “左右 60px の余白” を残す */
  max-width: calc(100% - 120px);
  height: auto;
}
.main-nav{margin-top:2rem;width:100%;}
.main-nav ul {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* ← 1rem → 1.5rem に拡大 */
  list-style: none;
  align-items: center;
}
.main-nav a{font-weight:700;position:relative;}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:var(--accent-color);transform:scaleX(0);transition:transform .3s ease;transform-origin:left;}
.main-nav a:hover::after{transform:scaleX(1);}
.nav-toggle{display:none;} /* desktop */

/* ===== Main wrapper ===== */
.main-wrapper{
  margin-left:220px;
  padding-top:0;           /* ← 2.5rem を 0 にして “白帯” を解消 */
  position:relative;
}

.site-header .logo img{
  height:90px;          /* 60px → 90px に拡大 */
  width:auto;
}

/* ===== Hero ===== */
.hero{position:relative;color:#fff;}
/*.slider{height:70vh;min-height:400px;overflow:hidden;}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;width:100%;background-image:url("./hero1.jpg");}*/
.hero-text{position:absolute;top:50%;left:10%;transform:translateY(-50%);padding:1rem 1.5rem;}
.hero-text.sub{font-size:1.25rem;}
.hero-text.vertical{writing-mode: vertical-rl;text-orientation:mixed;font-size:1.25rem;margin-bottom:1rem;}
.hero-text.vertical h2{font-size:2rem;margin-bottom:1rem;}
/*.slide::before{content:"";position:absolute;inset:0;background:#000;opacity:.4;}*/

.update-bar{
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem 1rem;
  font-size:.95rem;color:#444;
  border-bottom:1px solid #e0e0e0;   /* 背景色なし／下線だけ */
}
.update-bar time{color:#888;font-size:.9rem;}

/* ===== Common section ===== */
section{padding:2rem 0;}
/*section:nth-of-type(even){background:#f7f7f7;}*/
.section-title{text-align:center;font-size:2rem;margin-bottom:2rem;color:var(--accent-color);}
.home .main-wrapper > section:nth-of-type(even){
  background: var(--alt-section-bg);
}

/* ===== Feature ===== */
.feature{gap:2rem;}
.feature .feature-slider{flex:1 1 45%;max-width:480px;overflow:hidden;position:relative;}
.feature .feature-text{display:flex;flex-direction:row-reverse;flex:1 1 60%;min-width:280px;align-items:center;justify-content:space-around;}
.feature .Feature-pic{width:30%;}
.feature-heading{writing-mode:vertical-rl;text-orientation:mixed;font-size:1.5rem;margin-bottom:1rem;color:var(--accent-color);font-weight:700;padding-left:20px;font-size:200%;}
.feature .feature-sub-text{            /* 既存セレクタを上書き */
  display:flex;
  flex-direction:row-reverse;
  gap:3rem;                            /* ★画像と縦書きテキストの間を広げる*/
}
.feature-sub{                          /* 既存行の line-height を広げる */
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:1rem;
  line-height:2;                       /* ★行間を倍に */
}

/* ===== Profile ===== */
.profile-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  justify-content: center; /* ← 追加：左右中央に配置 */
}
.profile-photo{
  flex:0 0 300px;          /* 幅を 200px 固定 */
  width:200px;
  height:auto;
  border-radius:4px;
}
.profile-content {
  flex: 1 1 420px;
  max-width: 580px;
}
.profile-name{font-size:1.5rem;color:var(--accent-color);margin-bottom:.5rem;}
.profile-title{font-size:1.1rem;margin-bottom:1rem;color:#555;}
.profile-qual{list-style:disc;padding-left:1.2rem;margin-top:.5rem;line-height:1.6;}
#profile .section-title{
  margin-bottom:2rem;       /* コンテナと見出しの間隔を確保 */
}

/* ===== Price ===== */
.price-list{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.price-card{border:1px solid #e0e0e0;padding:1.5rem;border-radius:8px;background:#fff;}
.price-card h3{font-size:1.3rem;margin-bottom:.5rem;}
.price{font-size:2rem;color:var(--accent-color);margin:.5rem 0 1rem;}

/* ===== Access ===== */
.access-container{flex-direction:column;gap:2rem;align-items:center;}
.map-box{width:100%;max-width:900px;margin:auto;}
.map-wrapper{
  width:100%;height:400px;          /* ← aspect-ratio を削除しサイズ固定 */
  border:none;border-radius:4px;
}
/* ===== Access photo gallery ===== */
.access-photos{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:1.5rem;
}
.access-photos img{
  width:220px;              /* サムネイル幅 */
  max-width:100%;
  height:auto;
  border-radius:4px;
  cursor:pointer;
  transition:transform .3s;
}
.access-photos img:hover{
  transform:scale(1.05);
}
/* ===== Lightbox overlay ===== */
.lightbox-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
  opacity:0;
  transition:opacity .3s ease;
  z-index:1500;
}
.lightbox-overlay.open{
  visibility:visible;
  opacity:1;
}
.lightbox-overlay img{
  max-width:90%;
  max-height:90%;
  border-radius:6px;
}

/* ===== Footer ===== */
.site-footer{background:var(--accent-color);color:#f1f1f1;margin-left:220px;}
.footer-top{display:flex;flex-wrap:wrap;}
.footer-col{flex:1 1 300px;padding:2rem;}
.footer-col+.footer-col{border-left:1px solid rgba(255,255,255,.25);}
.footer-nav{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;padding:1rem;border-top:1px solid rgba(255,255,255,.25);}
.footer-nav a{font-size:.95rem;}
.copy{text-align:center;font-size:.85rem;padding:1rem;border-top:1px solid rgba(255,255,255,.25);}

/* ─── ② PC 用レイアウト ─── */
@media (min-width:1301px){
  .notice-bar{
    position: relative;         /* フローに従わせる */
    top: auto;
    left: auto;
    margin-left: 220px;         /* 左サイドヘッダー分だけオフセット */
    width: calc(100% - 220px);  /* コンテンツ幅いっぱいに伸ばす */
    z-index: 1;                 /* 必要なら調整 */
  }
}

/* ─── ③ モバイル／タブレット用レイアウト ─── */
@media (max-width:1300px){
  /* notice-bar はグローバル定義（position:fixed）のまま */

  /* モバイルで main 冒頭に出来る余白を自動計算で最小化 */
  .main-wrapper{
    margin-top: calc(var(--notice-offset, 0px) + 40px);
    /*  └ notice 高さ(JSで設定) + モバイルヘッダー高(64px) */
  }
}

@media(max-width:1300px) {
  .main-nav {
    display: none;
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.85);
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav ul {
    gap: 2rem;
  }

  .main-nav a {
    color: #fff;
    font-size: 1.4rem;
  }
}

/* ===== 中央寄せレイアウトのための共通クラス ===== */
.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* ===== スムーススクロールの適用 ===== */
html {
  scroll-behavior: smooth;
}

/* ===== 「施術コース・料金」セクションの上下スペース調整 ===== */
#menu {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.price-list {
  margin-top: 2.5rem;
}

/* ===== 左サイドのロゴとメニューの間隔 ===== */
.logo {
  margin-bottom: 3rem;
}

.price-card{
  border:1px solid #e0e0e0;
  padding:1.5rem;
  border-radius:8px;
  background:#fff;
  transition:transform .25s ease, box-shadow .25s ease;
}
.price-card:hover{
  transform:translateY(-6px);          /* 浮き上がり */
  box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.service-icons {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  width: 90px;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}

.service-icons.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ここに文字サイズや色を正しく記述 */
.icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.icon-btn.reserve{background:#00661a;}
.icon-btn.price  {background:#002a5e;}
.icon-btn.access {background:#8b0000;}

/* ─── Service Icons : レイアウト & ホバー ─── */
.icon-btn {
  gap: .45rem;                    /* アイコンと文字の間 */
  line-height: 1;
}
.icon-btn .icon { width: 26px; height: 26px; }
.icon-btn .icon img { width: 100%; height: auto; display:block; }

.icon-btn:hover   { filter: brightness(1.25); transform: translateY(-2px); }
.icon-btn:active  { transform: translateY(0); }

/* アイコン間の余白をゼロにしたい場合（上下ボーダーが不要なら削除可） */
.icon-btn + .icon-btn { margin: 0; }

/* モバイル横長ヘッダー */
.mobile-header {
  position: fixed;
  top: var(--notice-offset, 0); /* JSで notice 高さ反映 */
  left: 0;
  width: 100%;
  height: 64px;
  background: #fff;
  display: none; /* デフォは非表示: ブレークポイント下で表示 */
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 1900;
  box-shadow: none;
  transition: top .35s ease, box-shadow .35s ease;
}
.mobile-header.is-stuck {
  top: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* モバイルロゴ画像サイズ */
.mobile-header .mobile-logo img {
  height: 44px;
  width: auto;
}

/* ハンバーガー */
.mobile-nav-toggle {
  --bar-h: 2px;
  --bar-w: 24px;
  position: relative;
  width: 32px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.mobile-nav-toggle span {
  position: absolute;
  left: 0;
  width: var(--bar-w);
  height: var(--bar-h);
  background: #333;
  transition: transform .25s ease, opacity .25s ease;
}
.mobile-nav-toggle span:nth-child(1){top:0;}
.mobile-nav-toggle span:nth-child(2){top:calc(50% - var(--bar-h)/2);}
.mobile-nav-toggle span:nth-child(3){bottom:0;}
.mobile-nav-toggle.is-active span:nth-child(1){transform:translateY(11px) rotate(45deg);}
.mobile-nav-toggle.is-active span:nth-child(2){opacity:0;}
.mobile-nav-toggle.is-active span:nth-child(3){transform:translateY(-11px) rotate(-45deg);}

/* ドロワー本体 */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(300px, 80%);
  height: 100vh;
  background: #fff;
  z-index: 2100;
  transform: translateX(100%);
  transition: transform .35s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4rem;
}
.mobile-drawer.open {
  transform: translateX(0);
}
.mobile-drawer-inner {
  padding: 1.5rem;
}
.mobile-drawer-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* ドロワーメニュー */
.mobile-drawer-nav ul {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.mobile-drawer-nav a {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent-color);
}

/* 検索 */
.mobile-search {
  display: flex;
  gap: .5rem;
  margin-top: 3rem;
}
.mobile-search input {
  flex: 1;
  font-size: 1rem;
  padding: .5rem .75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.mobile-search button {
  padding: .5rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  background: var(--accent-color);
  color: #fff;
  cursor: pointer;
}

/* 予約案内 */
.mobile-drawer-reserve {
  margin-top: 3rem;
  text-align: center;
  font-size: .95rem;
  line-height: 1.6;
}
.mobile-drawer-reserve .btn {
  display: block;
  margin: .75rem auto 0;
  max-width: 240px;
  padding: .75rem 1rem;
  text-align: center;
  border-radius: 4px;
  font-weight: 700;
}
.mobile-drawer-reserve .btn.tel {
  background: #00661a;
  color: #fff;
}
.mobile-drawer-reserve .btn.line {
  background: #005e9b;
  color: #fff;
}

/* 背景黒マスク */
.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 2050;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
}
.mobile-drawer-backdrop.open {
  opacity: 1;
  visibility: visible;
}

/* ブレークポイント以下での切り替え */
@media (max-width:1300px){
  .desktop-only{display:none !important;}   /* 左サイドヘッダー消す */
  .site-footer{margin-left:0 !important;}   /* 左余白解除 */
  .main-wrapper{margin-left:0 !important;padding-top:0;}
  .mobile-header{display:flex;}             /* トップヘッダー表示 */
  .service-icons{display: none !important;} /* 任意微調整可 */
}

/* ────────────────────────────────────────────
   PC（1301 px 以上）で
   1) .notice-bar 下の “うっすら空白” をゼロに
   2) モバイルで付いた .is-hidden を無視して常に表示
   ──────────────────────────────────────────── */
@media (min-width:1301px){
  /* ① 隙間除去 */
  .notice-bar{
    margin-bottom:0;               /* 念のためリセット */
  }
  /* .hero 側に万一 margin が残っていた場合の保険 */
  .notice-bar ~ .main-wrapper .hero{margin-top:0;}

  /* ② .is-hidden が残っていても PC では強制表示 */
  .notice-bar.is-hidden{
    transform:none;
    opacity:1;
  }
  
}

/* ===== フェード速度を 0.15s に統一 ===== */
.notice-bar,
.mobile-header,
.mobile-drawer,
.mobile-drawer-backdrop {
  transition-duration: .30s !important;
}

/* ===== ヒーロー背景：タブレット以下で中央寄せ ===== */
@media (max-width: 1024px){
  .slider .slide{
    background-size: cover;        /* 画面全体を覆い縮尺保持 */
    background-position: center;   /* 常に中央を表示 */
  }
}

/* ===== Sub-Hero ===== */
.hero-sub .slider{
  height: 40vh;          /* index.html より低め */
  min-height: 300px;
}

.hero-sub .hero-text{
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);   /* X 方向も補正 */
}

.vertical h2 {
  writing-mode: vertical-rl;     /* 縦書き（右→左） */
  text-orientation: upright;     /* 文字を立てる */
  white-space: nowrap;           /* 改行禁止 */
  font-size: 2rem;
  color: white;
  line-height: 1.8;
}

/* --- About 本文 ― 交互レイアウト --- */
.about-section{
  display:flex;
  flex-direction:column;
  gap:4rem;
  padding-block:4rem;
}

.about-block{
  display:flex;
  align-items:center;
  gap:3rem;
}
.about-block:nth-child(even){ flex-direction:row-reverse; }

.about-block figure{
  flex: 0 0 40%;         /* 写真は 40% 幅以内 */
  max-width:400px;
}
.about-block img{
  width:100%;
  height:auto;
  border-radius:8px;
}

.about-block p{
  flex:1;
  text-align:left;
}

/* スマホは縦並び */
@media(max-width: 768px){
  .about-block{
    flex-direction:column !important;
    text-align:center;
  }
  .about-block figure{max-width:90%;}
}

/* --- テキストサイズ調整 --- */
.about-section p {
  font-size: 1.125rem;     /* 約18px */
  line-height: 1.9;
  font-weight: bold
}

.about-block .lead {
  font-size: 1.3rem;       /* 強調文は大きめ 約20px */
  font-weight: bold;
}

.therapist {
  font-size: 1.1rem;
  text-align: center;
  margin-top: 2rem;
}

@media(max-width: 480px){
  .about-section p {
    font-size: 1.2rem;     /* 小画面でやや拡大 */
  }
}

/* ===== Opening Hours ===== */
.hours-wrapper{position:relative;margin-block:4rem;}
.hours-board{
  background:#00391f;color:#fff;
  border-radius:80px 20px 80px 20px;
  padding:3rem 2rem;text-align:center;
}
.hours-table{width:100%;border-collapse:collapse;font-size:1.15rem;}
.hours-table th,
.hours-table td{padding:.6rem .75rem;}
.hours-table th{font-weight:700;}
.hours-table td::before{
  font-family:"Noto Serif JP",serif;font-size:1.4rem;line-height:1;
}
.hours-table .open::before{content:"●";}
.hours-table .close::before{content:"／";}

.hours-actions{
  display:flex;
  justify-content:center;
  gap:0;                             /* 区切り線で分割するため余白ゼロ */
}
.hours-btn{
  flex:1 1 260px;
  max-width:320px;
  display:flex;                      /* 横並び */
  align-items:center;
  gap:.8rem;                         /* アイコンと文字の間 */
  padding:1.5rem 1rem;
  background:var(--accent-color);    /* 定義済みグリーン */
  color:#fff;
  border:1px solid #fff;             /* 区切り線 */
  font-weight:700;
  text-align:left;
  transition:filter .25s,transform .25s;
}
.hours-btn + .hours-btn{border-left:none;} /* 内側の重複線を除去 */
.hours-btn:hover{filter:brightness(1.12); transform:translateY(-4px);}
.hours-btn img{width:28px;height:auto;}

@media(max-width:768px){
  .hours-board{padding:2rem 1rem;}
  .hours-table{font-size:.95rem;}
}

/* ===== Access Section =================================== */
.access-section {
  width: min(90%, 1000px);
  margin-inline: auto;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
}

.map-wrap {
  position: relative;
  aspect-ratio: 16 / 9;   /* ★ 画面比率を固定してレスポンシブ対応 */
  width: 120%;
  overflow: hidden;
}

.map-wrap iframe {
  position: absolute;
  inset: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

.access-info {
  margin-top: 1rem;
  line-height: 1.7;
}

.clinic-name {
  font-size: clamp(1.4rem, 2vw + 0.8rem, 2rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.clinic-address,
.clinic-tel {
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.tel-icon {
  font-size: 1.1rem;
  vertical-align: middle;
}


/* ─── Opening Hours：モバイル調整 ─── */
@media (max-width:600px){
  .hours-board{
    padding:2rem .8rem;   /* 余白を少し削減 */
    overflow-x:auto;      /* 内部だけ横スクロール可 */
  }
  .hours-table{
    min-width:560px;      /* デザイン保持用下限幅 */
    font-size:.9rem;      /* 文字をやや縮小 */
  }
}
/* 列幅を均等化して詰める */
.hours-table{
  table-layout:fixed;
  width:100%;
}

@media (max-width:768px){
  /* テキスト → 写真 の縦並び */
  .feature-text{
    flex-direction: column;
    align-items: center;
  }
  .feature .Feature-pic{
    width: 90%;
    max-width: 460px;
    order: 2;          /* テキストの次に並ぶ */
    margin-top: 1.5rem;
  }
  /* 縦書きテキストどうしの間隔を調整 */
  .feature .feature-sub-text{
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  .feature-text,
  .feature-sub-text{
    flex: 1 1 0;                        /* 同幅で伸縮 */
  }
}

@media (min-width:1301px){
  #header_logo img{ max-width:180px; } /* 例：180px まで拡大 */
}

/* ========== ① Feature 写真：モバイルでテキストの下に ========== */
/* 既存 .feature .feature-text {flex-direction:row-reverse;} を上書きしたい。
   2 クラス指定(.feature .feature-text)と同じ優先度でないと負けるので
   “.feature-text” 単体ではなく必ず “.feature .feature-text” にする。       */
@media (max-width: 768px){
  .feature .feature-text{
    flex-direction: column !important;   /* ← 強制的に縦並び */
    align-items: center;
  }
  .feature .Feature-pic{
    order: 2;           /* テキスト → 写真 の順番 */
    width: 90%;
    max-width: 460px;
    margin-top: 1.5rem;
  }
  .feature .feature-sub-text{  flex-direction:row-reverse; gap:1rem; align-items:flex-start; } 
}

.hours-note{
  margin-top: .5rem;
  font-size: .8rem;
  text-align: center;
  color: #ffffff;
  display: none;          /* デフォルト非表示 */
}

/* スマホ限定で表示 */
@media (max-width: 600px){
  .hours-note{display:block;}
}

/* ===== Mobile Drawer : クリニック情報 ===== */
.drawer-info {
  margin-top: 2rem;              /* ナビリンク群と適切に間隔を取る */
  padding: 1rem 1.2rem;
  background: #004d00;           /* 本サイトで使っているダークグリーン */
  color: #fff;
  border-radius: .6rem;
  font-size: .9rem;
  line-height: 1.5;
  text-align: center;
}

.drawer-info a {                 /* 電話番号リンク */
  color: inherit;
  text-decoration: none;
}

.drawer-info .drawer-tel {
  font-size: 1.6rem;
  font-weight: 700;
  margin: .5rem 0;
}

.drawer-info .drawer-tel span {
  font-size: .9rem;
  font-weight: 400;
  margin-right: .4rem;
}

/* ─── Profile photo : タブレット以下で縮小 ─── */
@media (max-width: 1024px){
  .profile-photo{ flex: 0 0 240px; width: 240px; }
}
@media (max-width: 600px){
  .profile-photo{ flex: 0 0 180px; width: 180px; }
}

/* === 3) index.html #access 予約ブロック === */
.reserve-box{text-align:center; margin-bottom:2rem;}
.reserve-btns{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.25rem;
  margin-top:1rem;
  text-align:center;
}
.reserve-btns .btn{
  min-width:180px;
  padding:.9rem 1.4rem;
  border:2px solid var(--accent-color);
  border-radius:6px;
  font-weight:700;
  transition:background .25s,color .25s;
  display:flex;           /* アイコン → テキスト 横並び */
  align-items:center;
  gap:.65rem;
  padding:.8rem 1.4rem;
  border:2px solid var(--accent-color);
  border-radius:8px;
  font-weight:700;
  background:#fff;
  color:var(--accent-color);
  transition:
    background .25s ease,
    color      .25s ease,
    transform  .25s ease;
}
.reserve-btns .btn:hover{
  background:var(--accent-color);
  color:#fff;
}

.reserve-btns .btn img{
  width:28px;             /* 画像を適正サイズに固定 */
  height:auto;
}

.reserve-btns .btn.tel{
  background:#00661a;     /* 電話ボタンは緑ベース */
  border-color:#00661a;
  color:#fff;
}

.reserve-btns .btn:hover{
  background:var(--accent-color);
  color:#fff;
  transform:translateY(-2px);
}

@media(max-width:480px){
  .reserve-btns .btn{min-width:160px;}
}

:root{
  --accent-color:#1c5722;
  --bg-color:#ffffff;
  --text-color:#1a1a1a;
  --font-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --alt-section-bg:#c2924a; /* ← ベージュ（お好みで #F7EEDC / #FAF1E6 などに変更可） */
}

/*.home .main-wrapper section:nth-of-type(even){
  background: var(--alt-section-bg) !important;
}
@media (max-width: 768px){
  .home .main-wrapper section:nth-of-type(even){
    background: var(--alt-section-bg) !important;
  }
}*/

/* ===== About Intro（index.html 専用）===== */
.about-intro{
  /*background: var(--alt-section-bg);*/
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.about-intro .intro-card{
  background:#fff;
  border-radius: 14px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.about-intro .section-title{
  margin-bottom: 1.25rem;
}
.intro-lead{
  font-size: clamp(1.05rem, 1.2rem + .2vw, 1.25rem);
  line-height: 2;
  letter-spacing: .02em;
}
.intro-actions{ margin-top: 1.4rem; }
.intro-btn{
  display: inline-block;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  background: #fff;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  position: relative;
}
.intro-btn::after{
  content: "›";
  display: inline-block;
  margin-left: .5rem;
  transform: translateX(0);
  transition: transform .2s ease;
}
.intro-btn:hover{
  background: var(--accent-color);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.intro-btn:hover::after{ transform: translateX(3px); }

/* ====== Logo: 品質担保（コントラスト低下を防止） ====== */
.logo img,
.mobile-logo img{
  filter: none !important;          /* ぼかし/色調フィルタの影響を排除 */
  opacity: 1 !important;            /* 透過の継承を防止 */
  mix-blend-mode: normal !important;/* 合成モードの影響を防止 */
}

/* ====== PC：左ヘッダーで「空白→ロゴ→空白」 ====== */
@media (min-width:1301px){
  /* ヘッダー上側の余白（= 上の“空白”） */
  .site-header{
    padding-top: clamp(24px, 8vh, 72px);   /* 画面高に応じて気持ち良い余白 */
  }
  /* ロゴの上下余白（= ロゴの前後を空白でサンド） */
  .site-header .logo{
    margin-block: clamp(20px, 6vh, 56px);  /* 上下ともに確保 */
  }
  /* ナビはロゴ直下に素直に並べる（ロゴ側で余白を管理） */
  .main-nav{
    margin-top: 0;
  }
}

/* === Worries section =================================== */

:root{
  --accent-color: var(--accent-color, #4caf50); /* 既存が無い場合のフォールバック */
  --beige:#f4ede3;  /* カード用のベージュ */
}

.worries{
  background: #4c923a; /* セクション背景（画像の雰囲気に合わせた淡いグリーン） */
  padding: clamp(2.2rem, 5vw, 3rem) 0;
}
.worries-title{
  text-align:center;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
  letter-spacing: .04em;
  color:#333;
}
.worries-title span{ color: var(--accent-color); font-weight:700; }
.worries-sub{
  text-align:center;
  margin-top:.35rem;
  font-size:.95rem;
  color:#5c9466;          /* 英文サブのやさしい緑 */
  letter-spacing:.06em;
}


/* 箇条書きに見えない縦積みレイアウト */
.worries-stack{
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: 1fr; /* PCでも1列表示 */
  gap: 1rem;
}

.worries-list{
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: 1fr; /* PCでも1列（画像に合わせて縦積み） */
  gap: 1rem;
}
.worry-card{
  border: 1px solid rgba(0,0,0,.06);      /* 0.06 に修正 */
  box-shadow: 0 6px 18px rgba(0,0,0,.06); /* 0.06 に修正 */
  border-radius: 16px;
  padding: clamp(1rem, 2.2vw, 1.25rem) clamp(1rem, 3vw, 1.6rem);
  text-align: center;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.9;
  background:#fff;                    /* 奇数＝白 */
}
.worry-card:nth-child(even){
  background: var(--beige);           /* 偶数＝ベージュ */
}
.em-red{ color:#d10b0b; font-weight:700; }

.worries-cta{
  position: relative;
  margin-top: 1.6rem;
  background: var(--accent-color);
  color:#ffffff;
  text-align:center;
  font-weight:800;
  font-size: clamp(1.1rem, 1rem + .9vw, 1.6rem);
  padding: 1rem;
  border-radius: 12px;
}
.worries-cta::before{
  content:"";
  position:absolute;
  top:-10px; left:50%;
  transform: translateX(-50%);
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent var(--accent-color) transparent;
}

/* 余白の詰まりを防ぐ（セクション上下の切り替えが滑らかになる） */
.worries + .hero{ margin-top: 0; }

/* ========== 交互背景：奇数=ベージュ / 偶数=白（hero・worries・about-introは除外） ========== */
:root{
  /* ベージュは既存の --alt-section-bg を流用（無ければフォールバック色を指定） */
  --alt-section-bg: var(--alt-section-bg, #F5EFE6);
}

/* main直下の<section>を対象に、見出し付き各ブロックを交互色に */
.home .main-wrapper > section:not(.hero):not(.worries):not(.about-intro):nth-of-type(odd){
  background: var(--alt-section-bg) !important;
}
.home .main-wrapper > section:not(.hero):not(.worries):not(.about-intro):nth-of-type(even){
  background: #fff !important;
}

/* ========== #about-intro を背景写真化（tree.jpg） ========== */
.about-intro{
  position: relative;
  background: url("tree.jpg") center / cover no-repeat;
  /* 高さは画面に応じて可変：小画面で窮屈にならず、大画面で貧相にならない */
  min-height: clamp(320px, 45vh, 560px);
  display: flex;           /* 中身を縦方向センター */
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0; /* 既存の余白指定を維持 */
}

/* 読みやすさ確保の半透明オーバーレイ（必要なら濃さを調整） */
.about-intro::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(255,255,255,.35);  /* 0.35 に修正 */
}

/* 中のカードは前面に */
.about-intro .intro-card{
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(160%) blur(1px);
}

/* --- 交互背景：奇数=ベージュ／偶数=白（hero・worries・about-introを除外） --- */
:root{ --alt-section-bg:#F5EFE6; }

.home .main-wrapper > section:not(.hero):not(.worries):not(.about-intro):nth-of-type(odd){
  background: var(--alt-section-bg) !important;
}
.home .main-wrapper > section:not(.hero):not(.worries):not(.about-intro):nth-of-type(even){
  background: #fff4f4 !important;
}

.site-footer{ background:#1c5722 !important; }

/* ===== 変数の最終固定（重複・自己参照の上書きを無効化） ===== */
:root{
  --accent-color: #1c5722;      /* 最終決定色 */
  --alt-section-bg: #F5EFE6;    /* 交互背景のベージュ */
}

/* ===== フッター：LINE ボタンのデザインを固定 ===== */
.btn-line-footer{
  display:inline-block;
  padding:.7rem 1.1rem;
  border-radius:8px;
  font-weight:700;
  background:#ffffff;                 /* 白ベース */
  color: var(--accent-color);         /* 文字は緑で固定 */
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 8px rgba(0,0,0,.10);
  transition: background .2s, color .2s, box-shadow .2s, transform .2s;
}
.btn-line-footer:hover{
  background:#eaf4ec;                 /* うっすら緑が入った白 */
  color: var(--accent-color);
  box-shadow:0 6px 18px rgba(0,0,0,.16);
  transform: translateY(-2px);
}
.btn-line-footer:active{ transform:none; }

/* フッターの通常リンクは白文字のまま（↑のボタンは除外） */
.site-footer .footer-col a:not(.btn-line-footer),
.footer-nav a{ color:#fff; }

/* ===== すべてのボタンのホバーで「真っ白化」を防ぐセーフガード ===== */
a, button, .btn, .hours-btn, .intro-btn, .reserve-btns .btn, .icon-btn{
  transition: background .2s, color .2s, filter .2s, box-shadow .2s, transform .2s;
}
.hours-btn:hover,
.reserve-btns .btn:hover,
.intro-btn:hover{
  filter: brightness(1.08);   /* 明度を少しだけ上げてコントラストを保持 */
}

/* ===== 「そのお悩み〜」の文字色を読みやすく ===== */
.worries-cta{
  color:#fff !important;        /* 黒系へ変更（背景が白系でも可読） */
  text-shadow:none;             /* 余計な強調があれば打ち消す */
}

@media (min-width: 601px) {
  .profile-title,
  .profile-name {
    display: inline-block;      /* ブロック要素をインライン化して同一行に */
    vertical-align: middle;     /* 行内で縦位置を揃える */
    margin: 0;                  /* 見出しや p のデフォルト余白をリセット */
  }

  /* タイトルと名前の間に少しスペースを入れる（必要に応じて調整） */
  .profile-title {
    margin-right: 0.6rem;
    font-size: 1.05rem;         /* お好みで調整 */
    color: #555;                /* 既存デザインに合わせた色 */
  }
  .profile-name {
    font-size: 1.5rem;          /* 既存値に合わせる */
    color: var(--accent-color);
    font-weight: 700;
  }
}

/* スマホでは従来どおり改行（読みやすさのため） */
@media (max-width: 600px) {
  .profile-title,
  .profile-name {
    display: block;
    margin: 0 0 0.4rem 0;       /* 少し間隔をとる */
  }
}

/* About ページ：文章まとめ用 */
.about-text-block {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.about-photo-block {
  text-align: center;
  margin-top: 2.5rem;
}
.about-photo-block img {
  max-width: 400px;
  width: 100%;
  border-radius: 8px;
}

/* ==== Hero Slider : 完全版（無限ループ&フリッカー解消） ==== */
.hero {
  position: relative;
  color: #fff;
}

/* 画面高さはお好みで。重複を避けたいのでここで一本化 */
.slider{
  position: relative;
  z-index: 1;
  height: 70vh;           /* 例：70vh */
  min-height: 500px;      /* 例：500px */
  overflow: hidden;
}

/* 旧 .slide の背景初期値を打ち消しておく（ghost防止） */
.slider .slide{
  position: absolute;
  inset: 0;
  background: none;       /* ← 旧 background-image を無効化 */
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity;
  animation: heroFade 24s linear infinite; /* 8秒×3枚＝24秒で1周 */
}

/* 各スライド。負のdelayで位相ずらし → ループ頭でも乱れない */
.slider .slide:nth-child(1){
  background-image: url("hero1.jpg");
  animation-delay: -0s;
}
.slider .slide:nth-child(2){
  background-image: url("hero2.jpg");
  animation-delay: -8s;   /* 2枚目は8秒先行 */
}
.slider .slide:nth-child(3){
  background-image: url("hero3.jpg");
  animation-delay: -16s;  /* 3枚目は16秒先行 */
}

/* 黒オーバーレイ（読みやすさ） */
.slider .slide::before{
  content:"";
  position:absolute; inset:0;
  background:#000;
  opacity:.35;
  pointer-events:none;
}

/* テキストは常に最前面＆非アニメ。フェードで消えません */
.hero .hero-text{
  position:absolute;
  z-index: 3;
  top:50%;
  left:10%;
  transform: translateY(-50%);
}

/* 1枚あたり8秒スロット：0.96sフェードIN → 6.96s表示 → 0.96sフェードOUT */
@keyframes heroFade{
  0%   { opacity: 0; }
  4%   { opacity: 1; }   /* 約0.96sで点灯 */
  33%  { opacity: 1; }   /* 約6.96sキープ */
  37%  { opacity: 0; }   /* 約0.96sで消灯 */
  100% { opacity: 0; }
}

/* 端末幅が狭いときも中央トリミング */
@media (max-width:1024px){
  .slider .slide{ background-position:center; }
}

/* 動きを減らす設定のユーザーには静止表示 */
@media (prefers-reduced-motion: reduce){
  .slider .slide{ animation: none; opacity: 0; }
  .slider .slide:nth-child(1){ opacity: 1; } /* 1枚目のみ表示 */
}

/* 1) メイン直下のセクションにだけ標準余白を配る（粒度を上げる） */
.home .main-wrapper > section{
  padding-top: clamp(2rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 3vw, 3rem);
}

/* 2) ヒーロー（slider）は常に上下ゼロ（PC/タブレット/スマホ共通） */
.home .main-wrapper > .hero{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 3) ヒーロー直後（= #worries）の「上側パディング」を消して段差ゼロに */
.home .main-wrapper > .hero + section{
  padding-top: 1 !important;
}


/* ===== Drawer オープン時に背景スクロールを止める（保険） ===== */
html.is-drawer-open { overflow: hidden; }

/* ===== Hero：ページ別に“縦/横/位置”を完全分離（v2） ===== */

/* デフォルト（安全網）：vertical クラスだけでは縦書きにしない */
.hero .hero-text.vertical{
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

/* ① index（<body class="home">）だけ：ブロック全体を縦書き（h2 も p も縦） */
.home .hero .hero-text.vertical{
  writing-mode: vertical-rl !important; /* ← ここで段落も縦書きに */
  text-orientation: mixed;              /* 日本語は縦、英数は読みやすく回転 */
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  text-align: start;
}
.home .hero .hero-text.vertical h2{
  text-orientation: upright;            /* 見出しは全角を立てる */
  font-size: 2rem;
  margin-inline-end: 1rem;              /* h2 と本文の“縦方向の間” */
}
.home .hero .hero-text.vertical p{
  line-height: 2;
  font-size: 1.1rem;
}

/* ② サブページ（about.html / access.html）：横書き & 画面中央配置 */
.hero-sub .hero-text{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 0 1rem;
  z-index: 3;
}
/* サブページでは、たとえ .vertical が付いていても横書きで固定 */
.hero-sub .hero-text,
.hero-sub .hero-text *{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}


/* ===== Sub pages (about / access) : ヒーローは静止表示 ===== */
.hero-sub .slider .slide{
  animation: none !important;   /* フェード停止 */
  opacity: 1 !important;        /* 常に表示 */
}

/* ===== サブページ hero の上下余白最適化 ===== */
/* PC：上下とも 0 にして段差を消す */
@media (min-width:1301px){
  .main-wrapper > .hero.hero-sub{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}
/* モバイル：上の余白は現状維持、下だけ 0 にする */
@media (max-width:1300px){
  .main-wrapper > .hero.hero-sub{
    padding-bottom: 0 !important;
    /* padding-top は触らない（ヘッダー分の空きは残す） */
  }
}

/* ===== about 本文と写真の中央寄せ（フッターには波及させない） ===== */
.about-section{
  display: grid;
  justify-items: center; /* 子要素を左右中央 */
}
.about-text-block{
  text-align: center;     /* 文章を中央寄せ */
}
.about-photo-block figure,
.about-photo-block img{
  display: block;
  margin-left: auto;
  margin-right: auto;     /* 画像を中央配置 */
}


/* 枠で囲む：やや細めの□ */
body.about .about-text-block{
  border: 1px solid rgba(0,0,0,.25);
  padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 3vw, 2rem);
  background: #fff;
  border-radius: 0;          /* 角を立てる（□） */
  max-width: 900px;
  margin: 0 auto;
}
body.about .about-text-block p + p{ margin-top: 1rem; }

/* モバイルでは左サイドが消えるので左右オフセットをゼロに */
@media (max-width:1300px){
  body.about .main-wrapper{ margin-left: 0 !important; }
  body.about .site-footer{ margin-left: 0 !important; }
}

.about .site-footer{ margin-left: 0 !important; }


/* ===== Feature：タブレット(769–1400px)で写真を少し大きく ===== */
@media (min-width: 769px) and (max-width: 1400px){
  .feature .Feature-pic{
    width: 42%;
    max-width: 520px;
  }
  .feature .feature-sub-text{ gap: 2rem; }
}

/* ===== スマホだけ強制改行を出すユーティリティ ===== */
.sp-br{ display:none; }
@media (max-width:830px){
  .sp-br{ display:inline; }
}

/* ===== 長文カードのはみ出し防止（横幅固定ではない）===== */
/* 既存 .worry-card { word-break: keep-all; } を維持しつつ、
   スマホのみ“任意の位置で折返し可”にして右はみ出しを抑止 */
@media (max-width:600px){
  .worry-card{
    word-break: normal;        /* 日本語の不自然な分割を避ける */
    overflow-wrap: anywhere;   /* はみ出しそうならどこでも折り返す */
    hyphens: auto;
  }
  /* 万一親の内側余白が小さくても横にはみ出さない保険 */
  .worries .container{ max-width: 100%; }
  .worries-stack{ width: 100%; }
}

/* ===== Profile：スマホで不要な改行/余白を除去 ===== */
@media (max-width: 600px){
  .profile-content br{ display: none !important; } /* 「佐々木〜」直下の <br><br> も無効化 */
  .profile-content{ margin-top: .25rem; }
  .profile-name{ margin-bottom: .25rem; }
}

/* ===== about-intro：スマホでの読みやすさ最適化 ===== */
@media (max-width:600px){
  .about-intro .intro-card{
    padding: 1.25rem 1rem;
    width: min(92%, 640px);
    margin-inline: auto;
  }
  .about-intro .intro-lead{
    word-break: keep-all;       /* 日本語の自然な改行を優先 */
    overflow-wrap: anywhere;    /* はみ出す直前で折返し */
    line-height: 1.95;
    letter-spacing: 0.02em;
  }
  /* 必要になったら文章中に .sp-br を追加すれば、その位置だけ確実に改行できる */
}

/* ===== Feature 写真：ライトアップ（やわらかい光のにじみ）===== */
.feature .Feature-pic{
  position: relative;
  z-index: 0;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.18)); /* 立体感 */
}

/* 画像の背面に“光だまり”を敷く */
.feature .Feature-pic::after{
  content:"";
  position:absolute;
  inset:-10% -8% -12% -8%;               /* 少し大きめに */
  background: radial-gradient(40% 35% at 50% 60%,
                              rgba(255,255,255,.85),
                              rgba(255,255,255,.35) 45%,
                              rgba(28,87,34,.15) 70%,
                              transparent 100%);
  filter: blur(22px);
  z-index:-1;                             /* 画像の下に敷く */
  pointer-events:none;
  border-radius: 24px;
}

/* モバイルでは光を少し弱めに */
@media (max-width:768px){
  .feature .Feature-pic::after{
    filter: blur(16px);
    inset:-8% -6% -10% -6%;
    opacity:.9;
  }
}

/* ===== PC版：トップページ専用 Heroスライダーの縦幅を拡大 ===== */
@media (min-width:0px){
  body.home .hero .slider {
    height: 80vh;     /* デフォルト70vhを85vhに拡大 */
    min-height: 700px; /* 500px → 650pxに調整（好みに応じて変更可） */
  }
}

/* =========================
   Hero: 端末別の画像切替
   モバイル（～1300px）＝ hero1/2/3.jpg
   PC（1301px～）      ＝ hero_1/_2/_3.jpg
   ========================= */

/* ▼ モバイルをデフォルトに（既存指定を安全に上書き） */
.slider .slide:nth-child(1){ background-image: url("hero1_1.jpg"); }
.slider .slide:nth-child(2){ background-image: url("hero2.jpg"); }
.slider .slide:nth-child(3){ background-image: url("hero3.jpg"); }

/* ▼ PC幅で画像セットを切替 */
@media (min-width:600px){
  .slider .slide:nth-child(1){ background-image: url("hero_1.png"); }
  .slider .slide:nth-child(2){ background-image: url("hero_2.jpg"); }
  .slider .slide:nth-child(3){ background-image: url("hero_3.jpg"); }
}

/* ===== Hero Text Sub（改行固定用）===== */
.hero-text.sub h2 {
  white-space: nowrap;     /* 自動改行を禁止 */
  overflow-wrap: normal;   /* 不自然な分割を防止 */
  word-break: keep-all;    /* 日本語は自然な区切りだけ */
}

/* ===== Profile：改行を有効化 ===== */
.profile-content br {
  display: inline !important; /* 強制的に改行を有効化 */
}