@charset "utf-8";

/* =================================================
   PCレイアウトは basetop.css のまま（触らない）
   スマホ：組み替え
   タブレット：PCを縮小表示（sidebarなし）
   ================================================= */

/* スマホ用ヘッダーはPCでは非表示 */
.sp_header{ display: none; }

/* PCでは非表示 */
.sp_reserve{
  display:none;
}

/* スマホ用ナビメニューはデフォルト非表示 */
.sp_navi_menu{
  display: none;
}

/* --- ナビボタンの見た目（スマホ・タブレット共通） --------------------
   表示/非表示は各メディアクエリ側で制御する。
   イメージマップ(.info_navi)はCSSで縮小するとクリック領域がずれるため、
   スマホ・タブレットではこの実リンク版を使う。
   -------------------------------------------------------------------- */
.sp_navi_menu{
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 20px 0;
  padding: 0 10px;
}

/* byoji_02用：activeボタン1つ＋サブメニュー2列 */
.sp_navi_menu_sub{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  grid-column: 1 / -1;
}

.navi_btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: white;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.navi_btn:active{
  transform: scale(0.95);
}

.navi_btn i{
  font-size: 32px;
  margin-bottom: 8px;
}

/* 各ボタンの色 */
.navi_vaccin{ background: linear-gradient(135deg, #ff6b35, #ff8c42); }
.navi_kakaritsuke{ background: linear-gradient(135deg, #9ccc65, #8bc34a); }
.navi_byoji{ background: linear-gradient(135deg, #4db6ac, #26a69a); }
.navi_yoyaku{ background: linear-gradient(135deg, #ffd54f, #ffca28); color: #333; }
.navi_shinryo{ background: linear-gradient(135deg, #ec407a, #e91e63); }

/* 現在のページ（active）：1段目に全幅表示 */
.navi_btn.active{
  grid-column: 1 / -1;
  padding: 24px 10px;
  font-size: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.navi_btn.active i{
  font-size: 40px;
  margin-bottom: 10px;
}


/* 予約ボタン（共通） */
.button-yoyaku{
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
  width: 250px;
  margin: 10px auto;
  padding: .7em 1.6em;      /* ← 高さを少し低く */
  border: 2px solid #fff;
  border-radius: 6px;
  box-shadow: 0 0 0 3px #d02578;
  background-color: #d02578;
  color: #fff;
  font-weight: 600;
  font-size: 1.05em;        /* ← 少し小さく */
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}

.button-yoyaku::after{
  transform: rotate(45deg);
  width: 6px;
  height: 6px;
  margin-left: 10px;
  margin-top: 2px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  content: '';
}

/* =========================
   スマホ（〜767px）
   ========================= */
@media screen and (max-width: 767px){

  /* ---- 土台 ---- */
  html, body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
  }

  .wrapper,
  #wrapper{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .sidebar,
  #sidebar{
    display: none;
  }

  .main,
  #main,
  #msg_main,
  #msg_main_link{
    float: none;
    width: 100%;
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* ---- スマホだけ：既存ヘッダーを消して、テキストヘッダーを出す ---- */
  .header{
    display: none;
  }

  .sp_header{
    display: block;
    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
    padding: 10px 6px 6px;
    box-sizing: border-box;
  }

  .sp_header_inner{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .sp_header_logo{
    width: 56px;
    height: auto;
    flex: 0 0 auto;
  }

  .sp_header_text{
    line-height: 1.25;
  }

  .sp_header_name{
    font-weight: bold;
    font-size: 16px;
    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
  }

  .sp_header_info{
    font-size: 12px;
    margin-top: 2px;
    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
  }

  .sp_header_tel{
    font-size: 14px;
    margin-top: 4px;
  }

  .sp_header_tel a{
    text-decoration: none;
  }

  .sp_reserve{
    display:block;
    margin: 16px 0 24px;
    text-align:center;
    box-sizing: border-box;
  }

  .sp_reserve_btn{
    display:block;
    width:100%;
    max-width:420px;
    margin:0 auto;

    background:linear-gradient(180deg,#ff2f8a,#e5006a);
    color:#fff;
    font-weight:700;
    font-size:18px;
    letter-spacing:0.5px;

    padding:16px 0;
    border-radius:14px;
    text-decoration:none;

    box-shadow:0 6px 0 #b4004f;
    transition:all .15s ease;
  }

  .sp_reserve_btn:active{
    transform:translateY(3px);
    box-shadow:0 3px 0 #b4004f;
  }

  .sp_reserve_btn::after{
    content:"  ＞";
    font-weight:400;
  }
	
  .button-yoyaku{
    width: calc(100% - 6px) !important;  /* shadowの分だけ余白 */
    max-width: 420px !important;
    padding: .7em 1.6em !important;
    font-size: 1em !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

	@media screen and (max-width: 767px){
  .button-yoyaku{
    width: calc(100% - 6px) !important;
    max-width: 420px !important;
    padding: .55em 1.2em !important;
    font-size: .95em !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  .button-yoyaku::after{
    width: 5px !important;
    height: 5px !important;
    margin-left: 8px !important;
  }


  /* intro系テキスト スマホ用 */
  .txt_yoyaku,
  .txt_yoyaku02,
  .txt_shinryo,
  .txt_vaccin,
  .txt_byoji,
  .txt_hattatsu {
    font-size: 16px !important;
    line-height: 2.2em !important;
    padding: 10px 15px !important;
  }

  /* intro_infoのマージン調整 */
  #intro_info,
  #intro_info_02 {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px !important;
  }
}

	
	.sp_header_inner{
    display: flex;
    flex-direction: column;     /* ← 縦並びにする */
    align-items: center;        /* ← 横方向センター */
    text-align: center;         /* ← 文字も中央 */
    gap: 6px;
  }

  .sp_header_logo{
    width: 70px;                /* 少し大きめでもOK */
    height: auto;
  }

  .sp_header_text{
    text-align: center;
  }
	
  /* ---- 線（幅840px）の対策（ヘッダーを消すので、残っていても崩れないように）---- */
  .line_840_header,
  .line_840_footer{
    width: 100%;
    box-sizing: border-box;
  }

  /* ---- 上部ボタン群 共通 ---- */
  .top_button,
  #top_button{
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    margin: 8px auto 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* <a> は2列（50%）で横並び */
  .top_button > a{
    width: calc(50% - 3px) !important;
    height: auto;
    display: block;
    box-sizing: border-box;
  }

  /* <a>の中の画像は親幅いっぱいに（hspace属性も打ち消す） */
  .top_button > a > img{
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 !important;  /* hspace="8" を打ち消す */
  }

  /* cols-3 のロゴは非表示 */
  .top_button.cols-3 > img{
    display: none !important;
  }

  /* PC用のtop_button（usemap含む）はスマホでは非表示 */
  .top_button:not(.cols-3):not(.sp_only){
    display: none !important;
  }

  /* スマホ専用ブロック */
  .top_button.sp_only{
    display: flex !important;
  }

  /* sp_only内のusemapは全幅 */
  .top_button.sp_only > img[usemap]{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
	
  /* ---- バナー群（Dreamweaver互換：grid→flex）---- */
  .grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0 6px;
    box-sizing: border-box;
  }

  .grid a{
    display: block;
    width: calc(50% - 8px);
  }

  .grid img{
    width: 100%;
    height: auto;
    display: block;
  }

  /* ---- フッター ---- */
  .footer,
  #footer{
    width: 100%;
    height: auto;
    margin-top: 30px;
    box-sizing: border-box;
    display: block !important;
    padding: 6px 4px !important;
  }

  .footer_inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .fotter_left,
  .fotter_right{
    float: none;
    width: 100%;
    text-align: center;
    padding-right: 0 !important;
    white-space: normal !important;
  }

  /* 旧レイアウト用の幅調整（スマホ時） */
  #intro_shinryo,
  #intro_vaccin,
  #intro_yoyaku,
  #intro_hattatsu,
  #intro_byoji,
  #intro_info,
  #honbun_2500,
  #honbun_2300,
  #honbun_2000,
  #honbun_1800,
  #honbun_1600,
  #honbun_1500,
  #honbun_auto,
  #honbun_1400,
  #honbun_1200,
  #honbun_1100,
  #honbun_1000,
  #honbun_850,
  #honbun_740,
  #honbun_600,
  #honbun_250,
  #msg_infobox,
  #msg_infobox_access,
  #msg_linkbox,
  #fm_infobox,
  #fm_box,
  #fm_box_right,
  #fm_box_about,
  #access_map,
  #access_info,
  #access_photo,
  #link_box,
  #keijiban_box{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 0 auto !important;
    padding: 15px 10px 0 10px !important;
    box-sizing: border-box;
  }



  /* 区切り線は「幅だけ」親に合わせる。
     本文ボックス用のpadding/marginを当てると空の枠に見えてしまうため別扱い */
  #line_740,
  #line_800,
  #line_840,
  #message_line{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* 診療時間の表も100%に */
  #honbun_740 img,
  .txt_honbun img{
    max-width: 100% !important;
    height: auto !important;
  }

  /* 画像はコンテナ内で縮小表示 */
  img{
    max-width: 100%;
    height: auto;
  }

  /* info_navi.gif はスマホで全幅表示 */
  .info_navi{
    display: none !important; /* スマホでは非表示 */
  }

  /* スマホ用ナビゲーションボタン（見た目は共通定義。ここでは表示のみ切替） */
  .sp_navi_menu{
    display: grid !important; /* byoji_02のインラインstyle="display:none"を上書き */
  }

  /* 本文内の画像もスマホで全幅表示 */
  .content_img{
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
  }
}




/* =========================
   さらに小さい端末（〜480px）
   ========================= */
@media screen and (max-width: 480px){

  /* ボタンは2列のまま維持（.top_button の記述は削除） */

  /* バナーは1列表示 */
  .grid a{
    width: 100%;
  }

}


/* =========================
   タブレット（768〜1024px）
   固定1000pxを流動化して収める（sidebarなし・拡大縮小なし）

   ※旧実装は transform: scale() で端末別に縮小していたが、
     scale(0.72)/scale(0.85) が .wrapper（クラス）しか対象にしておらず、
     #wrapper を使う28ページは768〜1023pxの全域で scale(0.95)＝950px となり
     左右が切れて読めなくなっていた。流動レイアウトに置き換えて解消。
   ========================= */
@media screen and (min-width: 768px) and (max-width: 1024px){

  html, body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  /* 土台：最大1000pxの流動レイアウト（scaleハック廃止） */
  .wrapper,
  #wrapper{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 12px;
    box-sizing: border-box;
    transform: none;
  }

  /* サイドバーはタブレットでは出さない */
  .sidebar,
  #sidebar{
    display: none;
  }

  .main,
  #main,
  #msg_main,
  #msg_main_link{
    float: none;
    width: 100%;
    max-width: 850px;
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .footer,
  #footer{
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }

  /* basetop.css の固定幅ブロック（700〜840px）を親幅に収める */
  .top_button, #top_button,
  .line_840_header, .line_840_footer,
  #top_bunner, #top_infobox,
  #line_840, #line_800, #line_740, #message_line,
  #intro_yoyaku, #intro_vaccin, #intro_shinryo,
  #intro_hattatsu, #intro_byoji, #intro_info, #intro_info_02,
  #honbun_auto, #honbun_850, #honbun_740, #honbun_message,
  #honbun_2500, #honbun_2300, #honbun_2000, #honbun_1800,
  #honbun_1600, #honbun_1500, #honbun_1400, #honbun_1200,
  #honbun_1100, #honbun_1000,
  #msg_infobox, #msg_infobox_access, #msg_linkbox,
  #link_box, #keijiban_box,
  #access_map, #access_info, #access_photo{
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 画像を親幅に収める（header.gif が830pxあるため必須） */
  img{
    max-width: 100%;
    height: auto;
  }

  /* スマホ専用ヘッダー・予約ボタンはタブレットでは出さない */
  .sp_header,
  .sp_reserve{
    display: none;
  }

  /* ---- ナビゲーション ----
     .info_navi は746pxのイメージマップ。幅を縮めるとareaの座標が
     ずれてリンクが効かなくなるため、タブレットでは実リンク版を使う */
  .info_navi{
    display: none;
  }

  .sp_navi_menu{
    display: grid !important; /* byoji_02のインラインstyle="display:none"を上書き */
    grid-template-columns: repeat(4, 1fr);
  }
  .sp_navi_menu_sub{
    grid-template-columns: repeat(4, 1fr);
  }

  /* ---- 上部ボタン群 ----
     PC用ブロックは画像マップ(usemap)を含むため同じ理由で使わず、
     実リンク版(.sp_only)に差し替えたうえで3列の流動グリッドにする */
  .top_button,
  #top_button{
    width: 100%;
    max-width: 840px;
    margin: 10px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
  }

  .top_button > a,
  .top_button > img{
    width: calc(33.333% - 6px);
    height: auto;
    display: block;
    margin: 0;          /* hspace属性を打ち消す */
    box-sizing: border-box;
  }
  .top_button > a > img{
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
  }

  /* usemapを含むPC用ブロックは非表示、実リンク版を表示 */
  .top_button:not(.cols-3):not(.sp_only){
    display: none;
  }

  /* 実リンク版の配置。
     かかりつけ(256x117)と発熱外来(256x117)はPC版では
     top_button_kakari_hatsunetsu.jpg 1枚の上下半分なので、
     タブレットでも3列目に上下で積んでPCの見た目を再現する */
  .top_button.sp_only{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .top_button.sp_only > a{
    width: auto;
  }
  .top_button.sp_only > a:nth-child(1){ grid-column: 1; grid-row: 1; }
  .top_button.sp_only > a:nth-child(2){ grid-column: 2; grid-row: 1; }
  .top_button.sp_only > a:nth-child(3){ grid-column: 3; grid-row: 1; align-self: start; }
  .top_button.sp_only > a:nth-child(4){ grid-column: 3; grid-row: 1; align-self: end; }
}


/* =========================
   PC（1025px〜）

   ※basetop.css は .wrapper / .main / .sidebar と「クラス」で定義しており、
     クラスを使うのは top.html のみ。残る28ページは #wrapper / #main /
     #sidebar と「ID」なので、それらのPCレイアウトはこのブロックが担う。
     （そのため削除不可。!important は不要なので外した）
   ========================= */
@media screen and (min-width: 1025px){

  body{
    margin: 0;
  }

  .wrapper,
  #wrapper{
    width: 1000px;
    margin: 0 auto;
    padding: 0;
    transform: none;
  }

  .sidebar,
  #sidebar{
    display: block;
    float: left;
    width: 50px;
    margin-top: 10px;
    margin-left: 0;
  }

  .main,
  #main,
  #msg_main,
  #msg_main_link{
    float: left;
    width: 850px;
    height: auto;
    margin: 0;
  }

  /* スマホ専用パーツはPCでは出さない */
  .sp_header,
  .sp_reserve,
  .sp_navi_menu{
    display: none;
  }

  /* 上部ボタン群はPC用（元のサイズ）を表示 */
  .top_button,
  #top_button{
    display: block;
  }
  .top_button > a{
    width: auto;
  }
  .top_button > a > img{
    width: auto;
    height: auto;
  }
  .top_button:not(.cols-3):not(.sp_only){
    display: block;
  }
  .top_button.sp_only{
    display: none;
  }
  .top_button.cols-3 > img{
    display: inline;
  }

  .info_navi{
    display: block;
    width: 746px;
    height: 156px;
    margin-left: 45px;
    margin-right: 45px;
  }

  .content_img{
    width: 701px;
    height: 173px;
    margin: 0;
  }

  /* .grid はbasetop.cssのgrid定義を活かす（display:blockで上書きしない） */
}

/* ページトップボタン（スマホのみ） */
.pagetop {
  display: none;
}
@media screen and (max-width: 767px) {
  .pagetop {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background-color: #FF8C00;
    border-radius: 50%;
    text-decoration: none;
    z-index: 9999;
  }
  .pagetop::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 14px solid white;
  }
}