@charset "UTF-8";
/* ============================================================
   八王子モール歯科・矯正歯科  2026 デザインリニューアル追加CSS
   （PDF: HO HP1 準拠。header.php / front-page.php で読み込み）
   ※ base.css / main.css / add.css の後に読み込む前提
   ============================================================ */

:root{
  --kv-green:#008340;
  --kv-green-mid:#4CB07A;
}

/* ------------------------------------------------------------
   1. グローバルナビ（アイコン付き・アイコンを上、ラベルを下）
   ------------------------------------------------------------ */
.gnav2026 .a{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  line-height:1.25;
  text-align:center;
}
.gnav2026 .gnav-ico{
  width:30px;
  height:30px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
/* 旧デザインの英語サブラベル(span)は新ナビでは非表示 */
.gnav2026 .a > span{ display:none; }

/* ------------------------------------------------------------
   2. PC：ロゴ（左）＋アイコンナビ（右）を同じ段に横並び
      ※ style.css のヘッダー/ナビ指定を上書き（後読み込み前提）
   ------------------------------------------------------------ */
@media screen and (min-width:641px){
  /* ヘッダー：白背景・ロゴ段の高さを確保（ナビは絶対配置で重ねる） */
  header{
    position:relative;
    height:132px !important;       /* ロゴ段の高さ。必要に応じて調整 */
    min-width:1240px;
    background:none !important;
    margin:0 auto;
    overflow:visible;
  }
  header .logo{
    float:left;
    width:auto;
    height:auto;
    margin:24px 0 0 20px;
  }
  header .logo img{
    height:84px;                   /* ロゴの高さ。必要に応じて調整 */
    width:auto;
    max-width:100%;
  }

  /* ナビをロゴの右・同じ段へ絶対配置（フローから外すのでヒーローは重ならない） */
  nav{
    position:absolute;
    top:52px;                      /* ←ロゴとの縦位置合わせ（数値で微調整） */
    left:0; right:0;
    width:1240px;
    min-width:1240px;
    height:auto !important;
    background:none !important;
    margin:0 auto;
    z-index:20;
  }
  nav ul.ul{
    width:auto;
    height:auto !important;
    background:none !important;
    margin:0;
    padding:0 20px 0 0;
    box-sizing:border-box;
    display:flex;
    justify-content:flex-end;      /* 右寄せ */
    align-items:center;
    gap:26px;
    list-style:none;
  }
  nav ul.ul li.li{
    float:none;
    width:auto !important;
    height:auto !important;
    background:none !important;    /* 区切り線画像を消す */
    padding:0;
    margin:0;
    text-align:center;
  }
  nav ul.ul li.li a.a{
    width:auto;
    height:auto;
    padding:0;
    color:var(--kv-green) !important;
    font-size:14px;
    font-weight:bold;
    line-height:1.3;
  }

  /* ナビの透明な余白部分でロゴのクリックが遮られないようにする */
  nav,
  nav ul.ul{ pointer-events:none; }
  nav ul.ul li.li{ pointer-events:auto; }
  header .logo,
  header .logo a{ display:inline-block; position:relative; z-index:30; }

  /* ドロップダウン(サブメニュー)を各メニュー項目の真下に表示 */
  .gnav2026 li.li{ position:relative; }
  .gnav2026 .sub_nav{
    top:100%;
    margin-top:8px;
    left:50%;
    transform:translateX(-50%);
  }
  /* 料金表は右寄りのため右端基準に（画面外へのはみ出し防止） */
  .gnav2026 #nav_pricel .sub_nav{
    left:auto;
    right:0;
    transform:none;
  }
}

/* ------------------------------------------------------------
   3. ヒーロー上の 電話番号・Web予約（PC）
   ------------------------------------------------------------ */
#visual{ position:relative; }
.hero-cta{
  position:absolute;
  top:22px;
  right:60px;              /* 背景画像の右端に合わせて内側へ（+30px左に調整） */
  z-index:6;
  display:flex;
  align-items:center;
  gap:14px;
}
.hero-cta a{ display:block; line-height:0; }
/* 電話番号画像は透過のため白い角丸の下地を敷く */
.hero-tel{
  background:#fff;
  border-radius:40px;
  padding:10px 24px;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
}
.hero-tel img{ width:250px; height:auto; display:block; }
.hero-web img{
  width:220px; height:auto; display:block;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.20));
}

/* スマホではヒーロー上のCTAは非表示（追従CTAで代替） */
@media screen and (max-width:640px){
  .hero-cta{ display:none; }
}

/* ------------------------------------------------------------
   4. スクロール追従CTA（電話番号・Web予約）
      追従中は不透明度を下げて視認性を確保
   ------------------------------------------------------------ */
.float-cta{
  position:fixed;
  right:14px;
  bottom:18px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
  pointer-events:none;
}
.float-cta.is-show{
  opacity:.82;              /* ← 追従表示中は不透明度を下げる */
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.float-cta.is-show:hover{ opacity:1; }  /* ホバー時は視認性UP */
.float-cta a{ display:block; line-height:0; }
.float-cta img{ display:block; height:auto; }

.float-tel{
  background:#fff;
  border-radius:40px;
  padding:6px 16px;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.float-tel img{ width:230px; max-width:42vw; }
.float-web img{ width:230px; max-width:42vw; filter:drop-shadow(0 2px 6px rgba(0,0,0,.2)); }

@media screen and (max-width:640px){
  .float-cta{ right:8px; bottom:8px; gap:6px; }
  .float-tel img,
  .float-web img{ width:180px; max-width:46vw; }
}

/* ------------------------------------------------------------
   4-2. スマホ：メニューを開いた時はアイコンを外し、テキストの
        リスト表示にする（アイコンなし・左寄せ・▸マーク）
   ------------------------------------------------------------ */
@media screen and (max-width:640px){
  /* アイコンは非表示 */
  .gnav2026 .gnav-ico{ display:none !important; }
  /* 縦積み(flex)を解除して、既存テーマの左寄せテキスト行に戻す */
  .gnav2026 .a{
    display:block !important;
    text-align:left;
  }
  /* 各項目の先頭に緑の▸マーク */
  .gnav2026 .a::before{
    content:"";
    display:inline-block;
    width:0; height:0;
    border-left:1.8vw solid rgb(0,131,64);
    border-top:1.1vw solid transparent;
    border-bottom:1.1vw solid transparent;
    margin-right:2.4vw;
    vertical-align:middle;
  }
}

/* ------------------------------------------------------------
   5. 診療時間（画像1枚）
   ------------------------------------------------------------ */
.sc-schedule{
  max-width:1000px;
  margin:28px auto;
  padding:0 16px;
  text-align:center;
}
.sc-schedule img{
  width:100%;
  height:auto;
  max-width:1000px;
  display:block;
  margin:0 auto;
}

/* ------------------------------------------------------------
   6. 口腔管理体制強化加算（画像1枚）
   ------------------------------------------------------------ */
.kasan{
  max-width:1000px;
  margin:40px auto 50px;
  padding:0 16px;
  text-align:center;
}
.kasan img{
  width:100%;
  height:auto;
  max-width:1000px;
  display:block;
  margin:0 auto;
}