@charset "UTF-8" ;

body { font-size : 16px;
       font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'; }
@media screen and (max-width:600px)
{ body { font-size : 13px; }}

/* リンク */
a { color:black; text-decoration:none; }
a:hover { text-decoration:none; }


h1 { font-size: 12px; }


.headline {float: left;
           padding: 10px 0 0; }
.headinfo { font-size: 12px;
            float: left;
            padding: 0 15px; }

.headimg { clear: both; }



.headgazou { text-align: center; }
@media screen and (max-width:960px)
{ .headgazou img { width: 100% ;} }

h2 { font-size: 16px;
     text-align: center; }
@media screen and (max-width:600px)
{ h2 { font-size: 13px; } }

h3 { font-size: 17px; }

.border-bottom-1 { /*線の種類（二重線）太さ 色*/
                   border-bottom: double 5px #FFC778 ; }

.title { font-size: 26px;
         text-align: center; }
@media screen and (max-width:600px)
{.title { font-size: 20px; }}



.main {
 width: 780px;

        margin: 0 auto;
        padding: 10px; }



@media screen and (max-width:800px)

{ .main { width: auto;
          border: none; }
}



/* お知らせ */
.news{ margin:2em 0;
       position: relative;
       padding: 0.5em 1.5em;
       border-top: solid 2px orange;
       border-bottom: solid 2px orange; }
.news:before, .news:after{ content: '';
                           position: absolute;
                           top: -10px;
                           width: 2px;
                           height: -webkit-calc(100% + 20px);
                           height: calc(100% + 20px);
                           background-color: orange; }
.news:before {left: 10px;}
.news:after {right: 10px;}
.news p { margin: 0; 
          padding: 0; }


/* メニュー */
.nav {text-align: center;}
.nav ul {line-style: none;
          margin: 0;
          padding: 0; }
.nav li {display: inline-block; }
.nav li a {display: block;
           padding:0px; }




/* 予約 */
.reserve { width: 70%; 
           margin: 0 auto; }

.reservetext { color: orange;
               font-weight: bold; }

.tel { font-size: 22px;
       color: white;
       background-color: orange; }
.tel a { color: white; }



/* アクセス */
.access { width: 40%;
          float: left; }
@media screen and (max-width:600px)

{ .access { float: none;
            width: 50%;
            margin: 0 auto; }
}




/* マップ */
.ggmap { width: 60%;
         position: relative;
         padding-bottom: 56.25%;
         padding-top: 30px;
         height: 0;
         overflow: hidden; }
@media screen and (max-width:600px)

{ .ggmap { width: 80%;
           margin: 0 auto; }
}



.ggmap iframe,
.ggmap object,
.ggmap embed { position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%; }

/* マップ */
.cal_wrapper { max-width: 960px; 
               min-width: 300px; 
               margin: 2.0833% auto; 
              } 

 
.googlecal { position: relative; 
             padding-bottom: 100%; 
             height: 0; 
            } 
 
 
.googlecal iframe { position: absolute; 
                    top: 0; 
                    left: 0; 
                    width: 100% !important; 
                    height: 100% !important; 
                   } 

@media only screen and (min-width: 768px) { 
.googlecal { padding-bottom: 75%; } 
 } 




/* aboutページ */
.doctor { width: 70%; 
          margin: 0 auto; }
.abouttext { color: orange;
             font-weight: bold;
             text-align: center; }
.aboutgazou { width: 60%; }
.aboutgazou2 { width: 90%; }

/* treatmentページ */
.point { color: orange;
         font-weight: bold;
         text-align: center; }

/* maintenanceページ */
.maintenancetext { color: orange;
                   font-weight: bold;
                   text-align: center; }

/* columnページ */
.columntext { color: orange;
              font-weight: bold; }

/* フッター */
footer { border-top: 3px solid orange;
         padding: 1em 0;
         text-align: center; }
#footmenu{ text-align: center; }
#footmenu ul { display: inline;
               padding-left: 5px;
               border-left: 1px solid #000000; }
#footmenu li { display: inline;
               padding-left: 5px;
               padding-right: 10px;
               border-right: 1px solid #000000; }
#footmenu ul li a { color: orange;
                    font-weight: bold; }
#footmenu ul li a:hover { background-color: yellow; }