@charset "utf-8";

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

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

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

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

/* 予約ボタン（共通） */
.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_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;
  }



  /* 診療時間の表も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; /* インラインstyle="display:none"を上書き */
    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;
  }

  /* 本文内の画像もスマホで全幅表示 */
  .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）
   PCレイアウトを保ったまま縮小表示（sidebarなし）
   ※計算ではなく段階スケールで“見た目を揃える”
   ========================= */

/* 共通：タブレットでは中央寄せの土台を作る */
@media screen and (min-width: 768px) and (max-width: 1024px){

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

  /* スマホ用ナビはタブレットでも非表示 */
  .sp_navi_menu{
    display: none !important;
  }

  /* info_navi.gif はタブレットでも表示 */
  .info_navi{
    display: block !important;
  }

  /* ★ここに入れる */
  body{
    display: flex !important;
    justify-content: center !important;
  }

  .sidebar,
  #sidebar{
    display: none;
  }

  .wrapper,
  #wrapper{
    width: 1000px;
    margin: 0 !important;
    transform: scale(0.95); /* ← 今使っている値のままでOK */
    transform-origin: top center;
  }

  .main,
  #main,
  #msg_main,
  #msg_main_link{
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
}


/* iPad mini 縦（768）〜小さめ：しっかり縮める */
@media screen and (min-width: 768px) and (max-width: 819px){
  .wrapper{ transform: scale(0.72); }
}

/* iPad Air 縦（820）前後：程よく */
@media screen and (min-width: 820px) and (max-width: 911px){
  .wrapper{ transform: scale(0.85); }
}

/* iPad Pro 縦（1024）まで：大きめに */
@media screen and (width: 1024px){
  body{
    display: flex !important;
    justify-content: center !important;
  }
  .wrapper,
  #wrapper{
    margin: 0 !important;
	transform: scale(1);
  }
}

/* =========================
   PC（1025px〜）は basetop.css を優先して崩れないようにする保険
   ========================= */
@media screen and (min-width: 1025px){

  /* bodyのflexレイアウトを解除・marginもリセット */
  body{
    display: block !important;
    justify-content: normal !important;
    margin: 0 !important;
  }

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

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

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

  /* スマホ用ヘッダーはPCでは出さない */
  .sp_header{
    display: none !important;
  }

  /* PCでは元のレイアウトに戻す */
  .top_button,
  #top_button{
    display: block !important;
  }
  .top_button > a{
    width: auto !important;
  }
  .top_button > a > img{
    width: auto !important;
    height: auto !important;
  }
  /* PC用ブロックを表示に戻す */
  .top_button:not(.cols-3):not(.sp_only){
    display: block !important;
  }
  /* スマホ専用ブロックはPC非表示 */
  .top_button.sp_only{
    display: none !important;
  }
  /* ロゴも表示に戻す */
  .top_button.cols-3 > img{
    display: inline !important;
  }

  /* info_navi.gif はPCで元のサイズに戻す */
  .info_navi{
    display: block !important; /* PCで表示 */
    width: 746px !important;
    height: 156px !important;
    margin-left: 45px !important;
    margin-right: 45px !important;
  }

  /* スマホ用ナビはPCで非表示 */
  .sp_navi_menu{
    display: none !important;
  }

  /* 本文内の画像もPCで元のサイズに戻す */
  .content_img{
    width: 701px !important;
    height: 173px !important;
    margin: 0 !important;
  }

  /* .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;
  }
}