﻿.pc {
  display: block!important;
}

.sp {
  display: none!important;
}

@media screen and (max-width: 768px) {
    
    ul{
        padding-inline-start: 20px;
        margin-block-start: 0;
    margin-block-end: 0;
    }
    
     .pc {
    display: none!important;
  }
      .sp {
    display: block!important;
  }
    div#header{
       height: 4.5rem;
        
}
    ul.number_list{
        margin-left: 8px;
    }
    ul.number_list li{
        padding-left: 0;
    }
    a:hover{
        color: #ffffff;
    }
    #main .left_border_none{
        float: none;
        margin: 0;
        padding: 0;
    }
    #main div.inner div.box_01{
        padding: 20px;
    }
    #main img.border{
        padding: 0;
    border: none
    }
    div#main img.right{
            float: none;
        padding: 0;
        margin:0 auto 10px;
        border: none;
    }
    div.first_bg{
        background: url(../images/first_bottom.png) no-repeat center center;
  background-size: cover;
    height: 3.7rem;
    }
    span.font_size_29{
        font-size: 26px!important;
    }
     span.font_size_28{
        font-size: 26px!important;
    }
      span.font_size_30{
        font-size: 26px!important;
    }
    video{
        height: auto;
    }
    
    div ul.list li + li{
        margin-top: 10px;
    }
    div ul.list{
        margin-left: 10px;
    }
   
   h1.logo{
    padding-top: 0;
      position: absolute;
       margin-top: 0;
               top: 30px;
        
      
    }
    div.flex_wrap .img{
            width: 100%;
    }
    
    h1.logo img{
       width: 75%;
    }
      div.logo{
    padding-top: 0;
      position: absolute;
       margin-top: 0;
               top: 30px;
        
      
    }
    div.logo img{
       width: 75%;
    }
    #main .inner h1{
        font-size: 26px;
            padding: 10px 0;
        text-align: center;
        margin: 0;
    }
   #header div.header_inner{
       width: 100%;
       
    }
    div.main_contents_first img{
        width: 100%;
        
    }
    div#main img.alignnone{
     padding: 0;
    box-sizing: border-box;
    }
    
     div#main img.left{
        float: none; 
     margin: 0;
         padding: 0;
         margin-bottom: 15px;
         border:none;
    }
    div#main .inner .box_01_3{
        width: 100%;
    }
    #main a.dr_btn{
        text-decoration: none;
    }
    #main .dr_btn p{
       
    font-weight: normal;
    letter-spacing: 0.07em;
    color: #FFFFFF;
    margin: 20px 0px 15px 0;
    background: none;
    padding: 10px;
    background-color: #ca9a32;
    clear: both;
    line-height: 140%;
    box-sizing: content-box;
    }
    /* --- nav の初期（閉）状態と開いた状態 --- */
/* スマホ向けのスライドイン例（右側から出る） */
 
nav.gnav{
  position: fixed;
  top: 0;
    bottom: 0; 
  right: -100%;            /* 初期は画面外に隠す */
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9980;
  transition: right .28s ease;
  box-shadow: -6px 0 20px rgba(0,0,0,0.08);
  overflow-y: auto;   
 padding: 1.7rem 2rem;
}

/* active で表示 */
nav.gnav.active{
  right: 0;
        top: 0;
    
}

/* body.active は必要に応じてスクロール停止に使う */
body.active{
  overflow: hidden;
}

/* メニュー内のリンク見た目（必要に応じて調整） */
nav.gnav ul{ list-style: none; padding: 0; margin:0; display: block;}
    
/*   nav.gnav ul li{height: calc(100vh / 11);}*/
nav.gnav a{ text-decoration: none; color: #333; font-size: 1rem; 
/*    display:block; */
    padding: 0;
    line-height: 1.3;
    box-sizing: border-box;
    display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
    height: calc(100vh / 12);
    
    }
    nav.gnav li:last-child a {
  border-bottom: none;
}
    
  .clinic_navi {
      display: none;
    }
  .header_contact{
      display: none;
    }
    .header_tel{
    display: none;
    }
    
/*    nav*/
    nav{
   padding: 1rem;
    box-sizing: border-box;    
    }
  
    nav.gnav.active ul li a:hover{
        border-bottom: #f3f3f3 5px solid;
    }
    nav.gnav.active ul li a:hover:before{
        content: "";
    }
    
    div#main div.inner table.table_block th,
    div#main div.inner table.table_block td{
    display: block;
    margin: 0;
    padding: 20px;
    height: auto;
        width: 100%;
        box-sizing: border-box;
       
    }
    
    
/*MV */
div.main_contents_first{
        width: 100%;
        height: auto;
    }

div#container_first{
        height: auto;
    }
    
/* PAGE   */
    #page_top{
	width:100%;
	
}
.page_top_inner{
	width: 100%;
	
}
    h3.top-news__title{
        font-size: 20px;
        margin: 0.5rem 0;
    }
    ul.top-news__list{
        padding-left: 0;
    }
    div.top-news__container{
        display: block;
    }
    div.fade_box.fade-box--news{
        padding-block: 30px;
    }
    div a.top-news__btn-link{
            margin-top: 10px;
    }
    .main_contents .slide{
	width: 100%;
}
    .top_inner{
       padding-left: 10px;
        padding-right: 10px;
    }
    div#footer{
            padding: 10px 0 0 0;
    }
    #footer{
	min-width:100%;
}

.footer_bg{
	min-width:100%;
}
    #footer ul{
	width: 500px;
	
}
    div#container_fourth{
        margin: 0;
    }
    #main .inner div.box_01 p span{
        font-size: 14px;
    }
div.main_contents .contents_link{
	width: 100%;
    height: auto;
    margin: 10px 0;
    padding: 30px 0;
    box-sizing: border-box;
    
    }
    div.main_contents div.contents_link ul{
            display: flex;
    flex-wrap: wrap;
    justify-content: center;
        width: 100%;
        padding-inline-start: 0;
    }
       div.main_contents .contents_link ul li{
        float: none;
           width: 46%;
           box-sizing: border-box;
               line-height: 1.7;
           padding:10px;
           border-bottom: 1px solid #ccc;
    }
    div.main_contents .contents_link ul li:first-child,
    div.main_contents .contents_link ul li:nth-child(3),
div.main_contents .contents_link ul li:nth-child(5),
div.main_contents .contents_link ul li:nth-child(7),
    div.main_contents .contents_link ul li:nth-child(9),
    div.main_contents .contents_link ul li:nth-child(11){
        border-left: none;
    }
    
   
    div.main_contents .contents_link ul li:nth-child(11){
        border-bottom: none;
        width: 100%;
    }
    
    div.main_contents .contents_link ul li a{
       color: #353535;
        font-size: 13px;
    }

div.second_box{
       display: block;
    margin:0 0 30px;
    width: 100%;
    height: auto;
    }
div.second_box img{
    width: 100%;
        height: auto;
     object-fit: cover;
    object-position: center;
    }
/*div.second_box p a{
       width: 100%;
    height: auto;
       margin: 0 auto;
    padding: 7px;
        line-height: 0.8rem;
    position: relative;
    box-sizing: border-box;
        letter-spacing: 0;
    }*/
    div.second_box p a{
        width: 43%;
    }
    
    div.second_box p.flex a::after{
        position: absolute;
        right: 4px;
        font-size: 10px;
        content: "→";
            top: 18px;
    }
    
    
/*    div.second_box .flex{
        display: block;
    }*/
    div#container_second{
        margin: 0px;
    }
    
    div#container_second p{
        padding: 0;
        line-height: 100%;
        margin-top: 10px;
    }
    div.blog_area{
        width: auto;
        float: none;
    }
     div.blog_area h3{
         width: 320px;}
  
     div.blog_area h3 img{
     width: 60%;
    }
    div.blog{
        float: none;
        width: 100%;
    }
    div.photo{
        float: none;
        text-align: center;
        margin-bottom: 20px;
    }
    div.photo img{
        width: 40%;
    }
    

div#navi{
width: 100%;
    height: auto;
}
    div#pan_box #pan_list #breadcrumbslist{
       padding-bottom: 0;
        overflow: hidden;
        margin: 0;
        height: auto!important;
        font-size: 13px;
    }
    
    div#pan_box #pan_list{margin-bottom: 0;}

#pan_box{
	float: none;
	width: 500px;
    }
    div.top-news{
        padding: 20px;     
    margin-right: 0;    
    }
    div.main_contents{
        width: 100%;
        margin: 0;
    }
    .blog_area{
        float: none;
    }
    #container_second .main_contents div.banner{
        display: block;
        width: 100%;
        text-align: center;
    }
    div#container_second div.main_contents div.banner img{
        width: 100%;
        
    }
    .flex_second_box{
       display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    div#container_second div.main_contents div.banner img.insta{
        margin-left: 0;
        width: 100%;
        margin-top: 25px;
    }
    .second_box_flex{
    display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .main_inner{
        margin:0 20px;
    }
    .second_box p a{
        width: 50%;
    }

    
    div#load{
        min-width: 100%;
    }
    p#scrollyoyaku a{
     width: 90px;
    font-size: 12px;
            line-height: 15px;
        padding: 10px;
        box-sizing: border-box;
    }
    .fas.fa-envelope{
        font-size: 24px;
    }
    .line{
       width: 40%;  
    }
    
    p#scrolltop{
    right: 28px;
        bottom: 0px;
    }
    
    p#scrolltop img{
       width: 85%;
    }
    p#scrollyoyaku{
        right: 10px;
        bottom: 55px;
    }
    div#container_fourth{
        height: auto;
    }
    
    div.blog ul{
        width:300px;
    }
    
/*    footer*/
    div#footer{
        min-width: 100%;
    }  
    div#footer #footer_in p{
        display: flex;
    align-items: center;
    }
    div#footer #footer_in p.mb10{
        display: block;
        font-size: 12px;
                line-height: 1.7;
    }
    div#footer #footer_in{
        width: 300px;
    }
    div#footer #footer_in .mb15 img{
        width: 100%;
        height: auto;
    }
    div#footer #footer_in img{
        
            height: auto;
    }

  
    div#sidebar{display: none;}
    
    
    div#pan_box{width: 100%; float:none; margin-bottom:0; margin-top: 0;}
    div#main{float:none; width: 100%; padding:0 10px;}
    div.copyright{
    height: auto;
/*        line-height: 2;*/
    }
    div.copyright a:hover{
        color: #ffffff;
    }

/* 既存のボタンスタイル */
.menu-btn{
  width:4.7rem;
  height: 3.4rem;
  background: rgba(255, 255, 255, .8);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9981;
  padding-top: .9rem;
  cursor: pointer;
}
    #main .inner h2 {
        font-size: 19px;
            letter-spacing: 0.05em;
            line-height: 140%;
            margin:15px 0;
    }
 
    
    #main div.inner h3{
        font-size: 18.5px;
            letter-spacing: 0.05em;
            line-height: 140%;
    }
     #main div.inner h4{
        font-size: 18px;
            letter-spacing: 0.05em;
            line-height: 140%;
                 margin: 20px 0px 10px 0;
    }
        #main div.inner h5{
        font-size: 17px;
            letter-spacing: 0.05em;
             line-height: 145%;
            padding: 5px 0 0px 10px;
                 margin: 20px 0px 10px 0;
            clear: both;
    }
    div#main p{
            line-height: 160%;
            letter-spacing: 0.05px;
        
        
    }
    div#main .menu p{
        width: 100%;
        
            box-sizing: border-box;
    }
 
    div#main .inner p + h5{
            margin-top: 30px;
        clear: both;
    }
    div#pan_box #pan_list #breadcrumbslist li{
            float: none;
    }
    div#pan_box #pan_list #breadcrumbslist li.home{
        margin-top:0!important;
        padding-left:0;
        background: url(../images/pankuzu_bg.jpg) no-repeat 0 40%;
    }
     div#pan_box #pan_list #breadcrumbslist li.home a{
       background:none;
    }
    div.page_top_inner{
	width: 100%;
}
    div#wrapper{width: 100%;}
    div#page_top{
	clear:both;
	width:1000px;
	height:37px;
	margin:0px auto;
	position: relative;
}
    div#main .inner img.sub_visual{
        width: 100%;
        margin: 0 0px -5px 0px;
    }
    div#main .inner{padding: 0 10px;}
    div#pan_box{ overflow: hidden; height: auto; position: static;}
    div#pan_box #breadcrumbslist li a, div#breadcrumbslist li span{background: url(../images/arw.gif) no-repeat left center; padding-left: 20px;}
    #pan_box #breadcrumbslist li.current a, #breadcrumbslist li.current span{
        padding: 10px 20px;
    }
    div#pan_box #pan_list #breadcrumbslist li:last-child{padding-left:0;}
    div#pan_box #pan_list #breadcrumbslist li:first-child span{padding-top: 0;}
    div#pan_box #pan_list #breadcrumbslist li:last-child span{padding-left: 0; padding-bottom: 0;}
    div#main .inner ul.page_link{display: flex;
        flex-wrap: wrap;}
    div#main .inner ul.page_link li a{float: none; margin: 0; font-size: 12px; padding: 5px 8px;}
    div#main .inner ul.page_link li{margin-bottom: 10px; margin-right: 8px;}
    div#main .inner ul.page_link li:last-child{ margin-right: 0;}
    br.sp{display: block;}
    div.page_link_wrap{padding: 15px 10px 0;}
     div.page_link_wrap2{padding: 15px 10px 0;}
     div.page_link_wrap3{padding: 15px 10px 0;}
    div.page_link_wrap4{padding: 15px 10px 0;}
    section:last-of-type {
  margin-bottom: 0;
}
    #main .inner img.righ_border_none{
       width: 60%;
        height: auto;
        float: none;
        margin:0 auto 10px;
    }
    img{
        width: 100%;
        height: auto;
    }
    #main div.menu p a{
            font-size: 15px;
            padding: 15px 5px;
        box-sizing: border-box;
                line-height: 140%;
        align-items: center;
        display: flex;
        justify-content: center;
        
        margin: 0;
    }
    #main div.menu p a::after{width: 0.1rem;
    height: 0.1rem;
        right: 20px;
                top: 10px;
    }
     #main .treatment div.menu{
              display: flex;
    justify-content: space-between;
         flex-wrap: wrap;
    }
    #main div.menu p a::after{
        width: 0.01px;
        height: 0.01px;
       top: 25px;
        right: 20px;
    }
      #main .treatment div.menu p{
                width: 47%;
    }
    #main .treatment div.menu p a{ 
        height: 70px;
        font-size: 15px;
        padding: 0;
    }
    #main div.inner .box_01{
        padding: 15px;
    }

    div#main div.inner table th{font-size: 13px; padding: 10px; line-height: 140%;}
    div#main div.inner table.col3_table th:first-child{width: 65%;}
    div#main div.inner table.col3_table img{width: 110px;}
    div#main div.inner table td{padding: 8px; line-height: 140%; font-size: 13px; }
     div#main.contact_form div.inner table th{width: 100%;}
     div#main .box_02{padding: 15px;}
    div.inner .box_02 a{font-size: 100%;}
    div#main .box_02 p{margin: 0 0 5px 0;}
  
    
     #wrapper #main div.menu p a.fade{width:100%!important;}
    #wrapper #main div.menu p a.fade02.none{width:100%!important;}
    
    iframe{width: 100%;
    height: auto;}
    p strong{
            font-size: 15px;
                line-height: 150%;
    }
    #wrapper #main div.inner p.btn_03 a.fade02{
            width: 100%;
                height: auto;
        box-sizing: border-box;
        font-size: 15px;
    }
   
    div#main div.inner table.border_none,
  div#main div.inner table.border_none tbody,
  div#main div.inner table.border_none tr,
  div#main div.inner table.border_none td {
    display: block;
    width: 100%;
          font-size: 15px;
              letter-spacing: 0.05px;
      padding: 4px 0;
  }
    #main table.right{
            float:none;
        text-align: center;
        margin-left: 0;
    }
    #main .media_flex{
        display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }
    #main .media_flex img{
    width: 48%;
      margin-bottom: 15px;   
    }
    
    div.box_333{width: 47%;}
    
    #main table.dr_table img{
            width: 60%;
        float: none;
    }
#main div.flex-2{
        display: block;
    }
    #main .flex-2 .col-2{
        width: 100%;
    }
    #main .inner .box_04{
        padding: 15px;
    }
  

#main .ml01 { margin-left:0px!important; }
#main .ml05 { margin-left:0px!important; }
#main .ml06 { margin-left:0px!important; }
#main .ml07 { margin-left:0px!important; }
#main .ml10 { margin-left:0px!important; }
#main .ml13 { margin-left:0px!important; }
#main .ml15 { margin-left:0px!important; }
#main .ml20 { margin-left:0px!important; }
#main .ml25 { margin-left:0px!important; }
#main .ml30 { margin-left:0px!important; }
#main .ml35 { margin-left:0px!important; }
#main .ml45 { margin-left:0px!important; }
#main .ml55 { margin-left:0px!important; }
#main .ml60 { margin-left:0px!important; }
#main .ml120 { margin-left:0px!important; }
#main .ml415 { margin-left:0px!important; }
#main .ml525 { margin-left:0px!important; }
   
.menu-btn .inner{ width: 2rem; height: 1.5rem; position: relative; margin: 0 auto; }
.menu-btn .inner span{ width: 100%; height: 2px; background: #4d4d4d; position: absolute; left: 0; transition: .5s; }
.menu-btn .inner span:nth-of-type(1){ top: 0; }
.menu-btn .inner span:nth-of-type(2){ top: 50%; transform: translateY(-50%); }
.menu-btn .inner span:nth-of-type(3){ bottom: 0; }
.menu-btn.active .inner span:nth-of-type(1){ top: 50%;                   /* 変更前: transform: translateY(6px) */
  transform: translateY(-50%) rotate(45deg); }
.menu-btn.active .inner span:nth-of-type(2){ opacity: 0; }
.menu-btn.active .inner span:nth-of-type(3){ top: 50%;                   /* 変更前: transform: translateY(-9px) */
  transform: translateY(-50%) rotate(-45deg); /* 変更前: rotate(-30deg) */}
.menu-btn p{ font-size: 0.7rem; letter-spacing: 0.04em; color: #4d4d4d; position: relative; margin:0; }
.menu-btn p span{ transition: .5s; display: block; width: 100%; text-align: center; }
.menu-btn p span.close{ position: absolute; left: 0; top: 0; opacity: 0; }
.menu-btn.active p span.menu{ opacity: 0; }
.menu-btn.active p span.close{ opacity: 1; }
	.box_333#sample1118{
		width: 47%;
	}
    
    /*診療メニューページ*/
    div#main .treatment{
       margin-top: 15px; 
    }
div#main.treatment .inner{
	padding: 0 10px;
}

div#main.treatment .second_box{
    width: 100%;
    height: auto;
}


    


div#main.treatment .main_contents{
    width: 100%;
}
    div#main.treatment .main_contents .second_box p{
            line-height: 100%;
}
/*div#main.treatment .main_contents .second_box p a{
    width: 100%;
            line-height: 1rem;
    padding: 0;
}*/
    
    div#main.treatment .main_contents .second_box p a{
    width: 42%;
    height: 35px;
       
}
    
    
 
    #main.treatment div.second_box img{
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }
    #main input[type="text"], textarea{
        width: 95%;
            margin-bottom: 10px;
    }
    .contact_form table.formTable, .contact_form table.formTable td, .contact_form table.formTable th{
        border: none;
    }
    div#main .inner p span.led_border{
        font-size: 100%;
    }
    p.flex_center{
    display: block;
}
       p.flex_center img{
        width: 100%;
}
    .left_w{
        width: 20%;
    }
     .left_w26{
        width: 26%;
    }
        div#main span.valgin_top img{
            width: 100%!important;
    }
    #main table.dr_table2 img{width: 100%;}
    div#main .inner img.small_img{width: 60%; margin:0 auto 10px; display: block;}
    div#main .box_333 p.text_001{
        font-size: 14px;
    }
    div#main p.center{
        text-align: center;
    }
    
    .scroll table{
        width: 100%;
        table-layout: fixed;
    }
      .scroll table th{
        
        table-layout: fixed;
    }
        .scroll table td img{
        width: 100%;
    }

}
