:root{
  --brand: #2e7d32;      /* 緑（濃） */
  --brand2:#7cb342;      /* 黄緑（明） */
  --brand-soft:#e8f5e9;  /* 薄い緑背景 */
  --ink:#0f172a;
  --text:#1f2937;  --ink:#0f172a;
  --nav-h: 64px;
  --totop-img:url('../images/totop.png');
}

/* ベース */
body{ line-height:1.8; color:var(--ink);
  font-family:'Noto Sans JP',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; }
p{ font-size:1.05rem; }
.badge-soft{ background:var(--brand-soft); color:var(--brand-ink); }

a
{ color: var(--brand); }
a:hover{ color: #1b5e20; }

.brand-text{
  font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", serif;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;         /* ←縦のズレが減る */
  transform: translateY(1px); /* ←微調整（0〜2pxで好み） */
}
.navbar-brand img{
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}


.btn-brand{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  border: 0;
  color: #fff;
}
.btn-brand:hover{ filter: brightness(.95); color:#fff; }

.badge-brand{
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid rgba(46,125,50,.15);
}

.btn-outline-success{
  color: #2e7d32;
  border-color: #2e7d32;
}

.btn-outline-success:hover{
  background: #2e7d32;
  color: #fff;
}

.table-clinic thead th{
  background: var(--brand-soft);
  color: var(--brand);
  border-color: rgba(46,125,50,.25);
}

.table-clinic td,
.table-clinic th{
  border-color: rgba(46,125,50,.18);
}

/* タイトルっぽい行（もし th が左列にあるなら） */
.table-clinic tbody th{
  font-weight: 700;
}


/* ヒーロー背景（任意の画像に差し替えOK） */
.hero{
  position:relative; min-height:70vh; display:flex; align-items:center; justify-content:center;
  background: center/cover no-repeat url('../images/hero.jpg');
  color:#fff;
}
.hero::after{
  content:""; position:absolute; inset:0 0 auto 0; height:140px;
  background: linear-gradient(to bottom, rgba(0,0,0,.40), rgba(0,0,0,0));
  pointer-events:none;
}
.hero .container{ position:relative; z-index:1; }

/* ナビ（オーバーレイ→スクロールで白） */
.navbar-overlay{ background: transparent; transition: background .25s ease, box-shadow .25s ease, color .25s ease; }
.navbar-overlay .navbar-brand, .navbar-overlay .nav-link{ color:#fff; }
.navbar-overlay .nav-link.active, .navbar-overlay .nav-link:hover{ color:#f8f9fa; }
.navbar-overlay .navbar-toggler{ border-color: rgba(255,255,255,.5); }
.navbar-overlay .navbar-toggler-icon{ filter: invert(1) brightness(200%); }
.navbar-overlay.scrolled{
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.navbar-overlay.scrolled .navbar-brand, .navbar-overlay.scrolled .nav-link{ color:#0f172a; }
.navbar-overlay.scrolled .navbar-toggler{ border-color: rgba(0,0,0,.15); }
.navbar-overlay.scrolled .navbar-toggler-icon{ filter:none; }


/* カード系 */
.card{
 background:#fff;
 border:1px solid rgba(0,0,0,.06);
 box-shadow:0 8px 24px rgba(0,0,0,.06);
 }

.card-title{
 background:var(--brand-soft);
 color:var(--brand-ink);
 text-align:center;
 }

.card-price{
 text-align:right;
 }
 
.price-list li::before{
  content: "•";
  display: inline-block;
  margin-right: .35rem;
} 


/* アンカーずれ対策 */
section[id]{ scroll-margin-top: calc(var(--nav-h) + 8px); }



/* ── 上へ戻る ───────────────── */
/* 上へ戻る
.to-top{
  position:fixed; right:16px; bottom:16px; z-index:1030;
  width:56px; height:56px; border:none; cursor:pointer;
  background-image: var(--totop-img);
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-color: transparent; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
  opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity .2s ease, transform .2s ease, filter .15s ease;
}
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
 */
 
 .to-top{
  opacity:0;
  pointer-events: none;  
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  color: #fff;
  text-decoration: none;

  background: linear-gradient(135deg, var(--brand), #7cb342);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  border: 0;

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  z-index: 1050;
}

.to-top i{
  font-size: 34px;     /* 矢印の大きさ */
  line-height: 1;
}

.to-top:hover{
  transform: translateY(-3px);
  filter: brightness(1.05);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}

.to-top:active{
  transform: translateY(-1px);
}

.to-top:focus-visible{
  outline: 3px solid rgba(124,179,66,.45);
  outline-offset: 3px;
}

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


/* ── h2装飾 ───────────────── */
/*
.font-patrick { font-family: 'Fredericka the Great', cursive; }
*/
h2 {
  color: var(--brand);
  text-align:center;
  margin: 56px 0 24px;
  font-weight: 800;
  letter-spacing: .02em;
  }

.section-title-cool{
  color: var(--brand);
  text-align:center;
  margin: 64px 0 32px;   /* 少し余白も広げる */
  font-weight: 800;
  letter-spacing: .05em;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP",
        "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.section-title-cool .en{
  font-size: clamp(2.2rem, 4vw, 3.2rem);  /* ←ここを大きく */
  font-weight: 800;
}

.section-title-cool .jp{
  display:block;
  margin-top: .4rem;
  font-size: 1.1rem;     /* ←少し大きく */
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(0,0,0,.65);  
}

/* 下線（クールに細め） */
.section-title-cool{
  position: relative;
  padding-bottom: 14px;
}
.section-title-cool::after{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:0;
  border-radius: 999px;
  width: 110px;        /* ←長く */
  height: 3px;         /* ←少し太く */
    
  background: linear-gradient(90deg, var(--brand), #7cb342);
}





/* ── 院のご案内アイコン ───────────────── */
.feature-icon {
  width: 44px;
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  /*background: rgba(25, 135, 84, 0.10);*/ /* successの薄緑 */
}

.feature-icon i {
  font-size: 40px;   /* ← 24〜32で好み。まず28推し */
  line-height: 1;
}

/* アイコン枠の幅も少しだけ広げてバランス調整（任意だけどおすすめ） */
.feature-icon{
  width: 44px;       /* ← デフォだと詰まりやすいので */
  flex: 0 0 44px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;  /* 見出しとの高さ合わせ（任意） */
}

.feature-item{
  align-items: flex-start;
}















/* ── 創業100周年バッジ ───────────────── */
/* ヒーロー中央寄せレイヤ（全面にかぶせて中央に） */
.hero-center{
  position:absolute; inset:0;
  display:grid; place-items:center;   /* 中央に配置 */
  pointer-events:none;                /* ボタンだけ反応させるため */
  z-index:2;
}

/* ボタンはクリックできるように */
.hero-center .btn{ pointer-events:auto; }

/* ロゴ＋コピーの並べ方：PCはロゴが左、コピーが右（横並び） */
.hero-box{
  display:flex; 
  align-items:center;
  gap: clamp(12px, 2.4vw, 28px);      /* ロゴとコピーの隙間 */
  background: rgba(0,0,0,.10);        /* ほんのりプレート(任意) */
  backdrop-filter: saturate(160%) blur(2px);
  border-radius: 12px;
  padding: clamp(12px, 2vw, 22px) clamp(16px, 3vw, 28px);
}

/* 100周年ロゴ：サイズは画面に応じて可変 */
.hero-anniv{
  width: clamp(120px, 14vw, 220px);
  height:auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
  flex: 0 0 auto;
}

/* コピーは常に中央寄せ（ボックス内） */
.hero-copy{
  text-align:center;
}

/* --- スマホ（縦積み：ロゴが上、コピーが下） --- */
@media (max-width: 991.98px){
  .hero-box{
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,.20);
    padding: 12px 16px;
  }
  .hero-anniv{
    width: clamp(120px, 34vw, 180px); /* スマホはやや小さめ */
  }
}

/* ===== Desktop 調整（992px 以上）===== */
@media (min-width: 992px){

  /* 1) ボックスの位置を少し下げる */
  .hero-box{
    margin-top: 20vh;                 /* 画面高の 10% 分だけ下へ */
    max-width: 880px;                 /* ボックスの最大幅を少し絞る */
    padding: 14px 24px;               /* 余白も少しだけ軽く */
    gap: 22px;                        /* ロゴとテキストの間 */
  }

  /* 2) ロゴを少し大きく */
  .hero-anniv{
    width: clamp(180px, 19vw, 280px); /* 以前より一回りアップ */
  }

  /* 3) プレートの濃さを少し抑えたい場合 */
  /* .hero-box { background: rgba(0,0,0,.10); } */
}



/* ヒーローのテキストが看板と被っても読めるよう、影を少し */
.hero-copy h1,
.hero-copy p{
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* 既存の hero まわりで position:relative が無い場合は付与 */
.hero{ position:relative; }



/* ===== Mobile: 開いたメニューを読みやすく ===== */
/* ===== モバイルメニュー：右側に出るパネル型／チラつき無し ===== */
@media (max-width: 991.98px){

  /* collapse 本体を“右側パネル”として固定配置 */
  #topNav .navbar-collapse{
    position: fixed;
    top: 56px;                 /* ←ナビの高さに合わせて調整（例:56px） */
    right: 12px;               /* 画面端にピッタリなら 0 */
    width: min(86vw, 360px);   /* パネル幅：最大360pxまで */
    padding: 14px 16px;
    z-index: 1040;             /* 文字・ボタンを最前面に */
  }

  /* 背景パネル（リンクの背面に置く） */
  #topNav .navbar-collapse::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: 14px;
    background: rgba(17,24,39,.82);           /* 半透明ダーク */
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    box-shadow: 0 14px 30px rgba(0,0,0,.25);
    opacity:0; transform: translateY(-6px);
    transition: opacity .12s ease, transform .16s ease;
    pointer-events:none;       /* クリックを邪魔しない */
    z-index:0;                 /* 背面に固定 */
  }

  /* 開き始め（collapsing）からもう表示させる → チラつき防止 */
  #topNav .navbar-collapse.collapsing::before,
  #topNav .navbar-collapse.show::before{
    opacity:1; transform:none;
  }

  /* リンクは見やすく＆前面へ */
  #topNav .navbar-collapse .nav-link{
    position: relative; z-index:1;
    color:#fff !important;
    font-size:1.14rem; padding:12px 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
  }
  #topNav .navbar-collapse .nav-item + .nav-item{
    border-top: 1px solid rgba(255,255,255,.14);
  }
}

/* 動きを苦手な設定の人にはブラーをオフ */
@media (prefers-reduced-motion: reduce){
  #topNav .navbar-collapse::before{ transition:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
}


/* ===== heroカスタマイズ ===== */
.hero-kamioka{
  min-height: 82vh;
  background: url("../images/hero.jpg") center/cover no-repeat;
  display: flex;
  align-items: flex-start; /* 上寄せ */
  padding-top: 72px;       /* ナビの分だけ空ける */
}

.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
}

.hero-copy{
  margin-top: 32px;   /* 文字を上に */
}

.thumb-img{
  width: 100%;
  height: 220px;      /* ここで統一 */
  object-fit: cover;  /* 見切れは出るけど「意図したトリミング」になる */
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* スタッフ写真は顔が上にあるので、上寄せでトリミング */
.thumb-img--staff{
  object-position: 50% 20%; /* ← 20%あたりがだいたい顔残る。10〜30%で調整 */
}

/* 施術は中央でOKが多い */
.thumb-img--treat{
  object-position: 50% 50%;
}

/* スマホは小写真の高さを少し下げる（見やすい） */
@media (max-width: 576px){
  .hero-kamioka{ padding-top: 56px; min-height: 78vh; }
  .hero-copy{ margin-top: 16px; }
  .thumb-img{ height: 180px; }
}