@charset "utf-8";

/*************************************
* CSSリセット
*************************************/

html, body, div, span, p, h1, h2, h3, h4, h5,h6,
a, dl, dt, dd, ol, ul, li, form, label,
table, tbody, tfoot, thead, tr, th, td,
article, footer, header, nav, section{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, footer, header, nav, section {
  display: block;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,form,
input,textarea,button,table,tr,th,td,main,
footer,header,nav,section,form{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/*************************************
* 共通
*************************************/

body{
  line-height: 1.5;
  font-size: 62.5%;
  font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background: #FFFFFF;
  color:#4D4D4D;
  word-break : break-all;
}
img{
  max-width: 100%;
  height: auto;
}
h2{
  color: #64AA00;
  font-size: 1.8em;
  text-align: center;
  padding-top: 25px;
  position: relative;
  margin-bottom: 35px;
}
h2:before{
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 47px;
  height: 19px;
  background:url(../img/common/mark_h2.png) no-repeat;
  background-size:contain;
}
h2 span{
  display: block;
  font-size: 0.5em;
  color: #999999;
}
h3{
  color: #6C3400;
  font-size: 2.0em;
  position: relative;
  margin-bottom: 20px;
  text-align: left;
  padding-left: 30px;
}
h3:before{
  content: ' ';
  position: absolute;
  top: 3px;
  left: 0;
  width: 21.5px;
  text-align: left;
  height: 27.5px;
  background:url(../img/common/mark_h3.png) no-repeat;
  background-size:contain;
}
a{
  color:#4D4D4D;
  text-decoration: none;
}
a:hover{
  color: #64AA00;
}
a:hover img{
  opacity: 0.7;
}
.pc-view{
  display: block;
}
.pc-view-inline{
  display: inline;
}
.sp-view{
  display: none;
}
.sp-view-inline{
  display: none;
}
.clearfix:after {
  content:'';
  display:block;
  clear:both;
}
.box-wrapper{
  text-align: center;
}
.half-box{
  width: 480px;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 40px;
}
.half-box:nth-child(odd){
  margin-right: 25px;
}
.half-box img{
  border-radius: 3px;
}
.half-box h3{
  margin: 10px 0;
}
.half-box p{
  font-size: 1.2em;
  text-align: left;
  line-height: 1.8;
}
.button{
  border: 1px #B3B3B3 solid;
  padding: 15px 5px;
  background: transparent;
  cursor: pointer;
  outline: none;
  appearance: none;
  min-width: 180px;
  font-size: 1.4em;
  display: inline-block;
  transition: 0.2s;
  -webkit-transition : 0.2s;
  text-align: center;
}
.button:hover{
  color: #FFFFFF!important;
  background: #64AA00!important;
}
.button:after{
  content: '\003e';
  margin-left: 1em;
}

/*************************************
* ヘッダー
*************************************/

header{
  min-width: 990px;
  position: relative;
}
#header_nav{
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255,255,255,0.8);
  z-index: 2;
  width: 100%;
  min-width: 990px;
  height: 110px;
}
#header_nav.fixed{
  position: fixed;
  border-bottom: 1px #ccc solid;
  height: 75px;
}
#header_nav .container{
  display: table;
  height: 100%;
}
#header_nav h1{
  display: table-cell;
  vertical-align: middle;
  border-left: 1px #ccc solid;
  text-align: center;
  font-size: 1.4em;
  font-weight: bold;
  width: 232px;
}
#header_nav h1 a{
  display: block;
  padding: 25px 0;
}
#header_nav.fixed h1 a{
  padding: 7px 0;
}
#header_menu a{
  display: table-cell;
  vertical-align: middle;
  border-left: 1px #ccc solid;
  text-align: center;
  font-size: 1.4em;
  /*width: 125px;*/
  width: 150px;        
  height: 110px;
  transition: 0.2s;
  -webkit-transition : 0.2s;
  color: #333;
}
#header_nav.fixed #header_menu a{
  height: 75px;
  transition: 0.2s;
  -webkit-transition : 0.2s;
}
#header_menu a:last-child{
  border-right: 1px #ccc solid;
}
#header_menu a.active,
#header_menu a:hover{
  background: rgba(108,52,0,0.7);
  color: #FFFFFF
}
#header_nav h1 img{
  width: 189px;
  margin: 0 auto;
}
#header_menu a span{
  display: block;
  color: #6C3400;
  font-size: 0.7em;
}
#header_menu a.active span,
#header_menu a:hover span{
  color: #FFFFFF
}

/*************************************
* スライダー、メインビジュアル
*************************************/

#slider{
  width: 100%;
  margin-bottom: 60px;
  min-height: 400px;
}
#slider img{
  opacity: 0;
  -webkit-transition: all 1.3s;
  transition: all 1.3s;
}
#main_visual{
  margin-bottom: 60px;
  position: relative;
}
#main_visual h2{
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "メイリオ", "Meiryo", serif;
  font-weight: bold;
  font-size: 1.6em;
  color: #FFFFFF;
  text-shadow: 1px 2px 3px #4D4D4D;
  position: absolute;
  padding: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 40px;
}
#main_visual h2:before{
  content: none;
}
#main_visual h2 span{
  font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #FFFFFF;
}

/*************************************
*  main, container
*************************************/

main{
  margin-bottom: 90px;
  display: block;
}
.container{
  width: 990px;
  margin: 0 auto;
  position: relative;
}

/*************************************
*  インフォメーション
*************************************/

#infomation{
  display: table;
  width: 100%;
  margin-bottom: 90px;
}
#infomation .col-left{
  width: 50%;
  display: table-cell;
  padding-right: 15px;
}
#infomation .col-right{
  width: 50%;
  display: table-cell;
  padding-left: 15px;
}
#infomation_news{
  font-size: 1.2em;
}
#infomation_news dt{
  color: #6C3400;
  border-top: 1px #B3B3B3 dotted;
  padding-top: 15px;
  margin-bottom: 5px;
}
#infomation_news dd{
  padding-bottom: 15px;
}
#infomation_news dd a{
  color: #4D4D4D;
  text-decoration: underline;
}
#infomation_news dd a:hover{
  color: #64aa00;
  text-decoration: none;
}
#infomation_news dd:last-child{
  border-bottom: 1px #B3B3B3 dotted;
}
#infomation_hours{
  margin-bottom: 30px;
}
#infomation_hours h3 span{
  font-size: 0.8em;
}
#infomation_hours table{
  width: 100%;
  margin-bottom: 5px;
}
#infomation_hours table th,
#infomation_hours table td{
  border: 1px #B3B3B3 solid;
  padding: 10px;
  text-align: center;
  font-size: 1.4em;
}
#infomation_hours p{
  text-align: right;
  font-size: 1.3em;
}
#infomation_contact h3{
  border-bottom: 1px #B3B3B3 solid;
  padding-bottom: 20px;
}
#infomation_contact p{
  font-size: 1.8em;
  margin-bottom: 10px;
}
#infomation_contact p > span{
  font-size: 0.8em;
  margin-left: 10px;
}
#infomation_contact .row{
  display: flex;
  align-items: center;
}
#infomation_tel{
  position: relative;
  font-size: 2.7em;
  margin-right: 20px;
  padding-left: 30px;
  font-weight: bold;
}
#infomation_tel:before{
  content: ' ';
  position: absolute;
  top: 7px;
  left: 0;
  width: 19px;
  height: 24px;
  background:url(../img/common/icon_phone_gray.png) no-repeat;
  background-size:contain;
}
#infomation_mail{
  position: relative;
  font-size: 1.4em;
  padding-left: 30px;
}
#infomation_mail:before{
  content: ' ';
  position: absolute;
  top: 3px;
  left: 0;
  width: 20.5px;
  height: 14.5px;
  background:url(../img/common/icon_mail_gray.png) no-repeat;
  background-size:contain;
}
#infomation_notice {
    display: inline-block;
}

/*************************************
* お知らせモーダルウィンドウ
*************************************/
.remodal .remodal-contents{
  text-align: left;
  font-size: 1.4em;
  margin-bottom: 20px;
  line-height: 1.8;
}
.remodal img{
  display: block;
  margin: 0 auto 30px auto;
}

/*************************************
* フッター
*************************************/

footer{
  background: #808080;
  text-align: right;
  height: 45px;
  min-width: 990px;
}
footer p{
  position: absolute;
  right: 0;
  top: 15px;
  font-size: 0.9em;
  color: #FFFFFF
}
#footer_map{
  height: 500px;
  background : #f1ebe3;
  text-align: center;
  min-width: 990px;
}
#footer_nav{
  position: absolute;
  left: 0;
  top: 13px;
}
#footer_nav ul li{
  float: left;
  margin-right: 15px;
}
#footer_nav ul li img{
  width: 18px;
  height: 18px;
}

/*************************************
* 個別ページ（トップぺージ）
*************************************/

#page_top .box-wrapper{
  margin-bottom: 40px;
}
#page_top .half-box h3 a{
  color: #6C3400;
}
#page_top .half-box h3 a:hover{
  color: #64AA00;
}
#page_top #nav_treatment{
  width: 990px;
  margin: 0 auto 20px auto;
}
#page_top #nav_treatment ul{
  display: table;
  width: 100%;
  table-layout: fixed;
}
#page_top #nav_treatment ul li{
  display: table-cell;
  text-align: center;
  font-size: 1.4em;
  border-left: 1px #B3B3B3 solid;
  padding: 2px;
}
#page_top #nav_treatment ul li a:hover,
#page_top #nav_treatment ul li.active a{
  background: #666666;
  color: #FFFFFF;
}
#page_top #nav_treatment ul li:last-child{
  border-right: 1px #B3B3B3 solid;
}
#page_top #nav_treatment ul li a{
  width: 100%;
  display: block;
  transition: 0.2s;
  -webkit-transition : 0.2s;
  margin: -5px 0;
  padding: 3px 0;
}
#page_top #treatment_container{
  background:url(../img/top/treatment_container_back.jpg) no-repeat;
  padding-top: 29%;
  background-size: cover;
  position: relative;
  position: relative;
  overflow: hidden;
  min-width: 990px;
}
#page_top #treatment_container ul{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
  display: table;
  table-layout: fixed;
  transition: 0.5s;
  -webkit-transition : 0.5s;
}
#page_top #treatment_container ul li{
  display: table-cell;
  text-align: center;
}
#page_top #treatment_container ul li h3{
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "メイリオ", "Meiryo", serif;
  text-align: center;
  /*padding: 10% 0 0 0;*/
  font-size: 2.6em;
  margin-bottom: 30px;
  color: #FFFFFF;
  text-shadow: 1px 2px 3px #4D4D4D;
}
#page_top #treatment_container ul li h3:before{
  background: none;
  font-weight: bold;
}
#page_top #treatment_container ul li a.button{
  background: rgba(255,255,255,0.8);
  box-shadow: 0px 0px 6px #CCCCCC;
  border: none;
}
#page_top #treatment_container ul li a.button:hover{
  opacity: 0.85;
}

/*************************************
* 個別ページ（当院について）
*************************************/

#page_about h3.mincho{
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "メイリオ", "Meiryo", serif;
  text-align: center;
  font-weight: bold;
  font-size: 2.4em;
  margin-bottom: 30px;
  padding: 0;
  color: #6C3400;
}
#page_about h3.mincho:before {
  content: none;
}
#page_about p.descripition{
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 80px;
  line-height: 1.8;
}

/*************************************
* 個別ページ（治療内容）
*************************************/

#page_treatment h3{
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "メイリオ", "Meiryo", serif;
  text-align: center;
  font-weight: bold;
  font-size: 2.1em;
  margin-bottom: 30px;
  padding: 0;
  color: #6C3400;
}
#page_treatment h3:before {
  content: none;
}
#page_treatment h4{
  text-align: center;
  font-size: 1.4em;
  color: #6C3400;
}
#page_treatment p{
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.8;
}
#page_treatment img{
  width: 100%;
}
#page_treatment img:not(:last-child){
  margin-bottom: 80px;
}
#page_treatment dl{
  text-align: center;
  font-size: 1.4em;
  line-height: 1.8em;
  margin-top: 10px;
  margin-bottom: 30px;
}
#page_treatment dl.arrow dd:not(:last-child):after{
  content: '↓';
  display: block;
  font-weight: normal;
  color: #B3B3B3;
}
#page_treatment dt{
  font-weight: bold;
}
#page_treatment dl:not(.arrow) dd{
  margin-bottom: 10px;
}
#page_treatment ul{
  text-align: center;
  font-size: 1.4em;
  line-height: 1.8em;
  margin-bottom: 30px;
}

/*************************************
* 個別ページ（ドクター紹介）
*************************************/

#page_dentist .dentist-box{
  display: table;
  width: 100%;
}
/*#page_dentist .dentist-box:not(:last-child){
  padding-bottom: 60px;
  margin-bottom: 60px;
  border-bottom: 1px #CCC solid;
}*/
#page_dentist .dentist-box{
  padding-bottom: 60px;
  margin-bottom: 60px;
  border-bottom: 1px #CCC solid;
}
#page_dentist .dentist-image{
  display: table-cell;
  width: 25%;
  padding-left: 60px;
}
#page_dentist .dentist-profile{
  display: table-cell;
  width: 75%;
  padding-left: 50px;
  padding-right: 60px;	
  vertical-align: top;
}
#page_dentist .title{
  color: #64aa00;
  font-size: 1.4em;
  margin-bottom: 25px;
}
#page_dentist h3{
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "メイリオ", "Meiryo", serif;
  font-weight:normal;
  font-size: 2.4em;
  margin-bottom: 30px;
  padding: 0;
  color: #6C3400;
}
#page_dentist h3:before {
  content: none;
}
#page_dentist h3 span{
  font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 0.4em;
  vertical-align: middle;
  margin-left: 20px;
  font-weight: normal;
}
#page_dentist .message{
  font-size: 1.4em;
  margin-bottom: 20px;
  line-height: 1.8;
}
#page_dentist dl {
  font-size: 1.4em;
  border-top: 1px #B3B3B3 dotted;
  padding: 15px 0;
}
#page_dentist dt {
  color: #6C3400;
  width: 60px;
  padding: 2px 5px;
  float: left;
}
#page_dentist dd {
  padding: 2px 5px;
  margin-left: 60px;
}

/*************************************
* 個別ページ（患者さんの声）
*************************************/

#page_reviews #wookmark {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
#page_reviews #wookmark .item {
  width: 310px;
  max-width: 100%;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0px 0px 6px #CCCCCC;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#page_reviews #wookmark .item img {
  width: 100%;
  margin-bottom: 10px;
}
#page_reviews #wookmark .item p {
  font-size: 1.4em;
  line-height: 1.8;
}
#page_reviews #wookmark .item span {
  color: #6C3400;
  display: block;
  text-align: right;
  margin-top: 20px;
  font-size: 1.2em;
}

/*************************************
* 個別ページ（アクセス）
*************************************/

#page_access .col-left{
  width: 40%;
  float: left;
}
#page_access .col-right{
  width: 60%;
  float: right;
}
#page_access h3{
  color: #4D4D4D;
  font-weight: bold;
  padding-left: 0;
  margin-bottom: 10px;
  font-size: 2.5em;
}
#page_access h3:before{
  content: none;
}
#page_access .map{
  border: 1px #B3B3B3 solid;
}
#page_access .address{
  font-size: 1.8em;
  margin-bottom: 10px;
}
#page_access  .tel{
  position: relative;
  font-size: 2.7em;
  margin-right: 20px;
  padding-left: 30px;
  font-weight: bold;
  margin-bottom: 10px;
}
#page_access .tel:before{
  content: ' ';
  position: absolute;
  top: 7px;
  left: 0;
  width: 19px;
  height: 24px;
  background: url(../img/common/icon_phone_gray.png) no-repeat;
  background-size: contain;
}
#page_access .mail{
  position: relative;
  font-size: 1.6em;
  font-weight: bold;
  padding-left: 30px;
  margin-bottom: 30px;
}
#page_access .mail:before{
  content: ' ';
  position: absolute;
  top: 3px;
  left: 0;
  width: 20.5px;
  height: 14.5px;
  background: url(../img/common/icon_mail_gray.png) no-repeat;
  background-size: contain;
}
#page_access ul{
  font-size: 1.4em;
  margin-bottom: 30px;
  list-style-type: disc;
  list-style-position: inside;
}
#page_access ul li{
  margin-bottom: 5px;
}

/*************************************
* 個別ページ（お問合せ）
*************************************/

#page_contact h3{
  font-size: 2.4em;
  text-align: center;
  font-weight: bold;
  padding-left: 0;
}
#page_contact h3:before{
  content: none;
}
#page_contact p{
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 60px;
  line-height: 1.8;
}
#page_contact form{
  width: 660px;
  margin: 0 auto;
}
#page_contact dl {
  font-size: 1.4em;
}
#page_contact dl dt {
  color: #6C3400;
  width: 160px;
  float: left;
  text-align: right;
  padding: 10px 40px 10px 0;
}
#page_contact dl dd {
  margin-left: 160px;
  margin-bottom: 30px;
  width: 500px;
  position: relative;
}
#page_contact dl.confirm dd {
  padding: 10px 0;
}
#page_contact dl dd .error-message{
  position: absolute;
  bottom: 0;
  left: 0;
  position: absolute;
  top: 100%;
  left: 0;
  color: #c0392b;
  font-weight: bold;
}
#page_contact dl input,
#page_contact dl textarea{
  width: 100%;
  border: 0;
  padding: 10px;
  font-size: 1.2em;
  font-family: Arial, sans-serif;
  border: solid 1px #CCCCCC;
  background: #F2F2F2;
}
#page_contact dl input.error,
#page_contact dl textarea.error{
  border: solid 1px #c0392b;
  transition: 0.2s;
}
#page_contact dl input:focus,
#page_contact dl input:active,
#page_contact dl textarea:focus,
#page_contact dl textarea:active{
  background: #FFFFFF;
}
#page_contact dl input{
  height: 40px;
}
#page_contact dl textarea{
  resize: none;
  height: 180px;
}
#page_contact .control{
  width: 660px;
  margin: 0 auto;
  padding-left: 160px;
}
#page_contact .button{
  float: left;
  margin-right: 30px;
}
#page_contact .control.complete{
  width: 660px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
#page_contact .control.complete .button{
  float: none;
  margin: 0;
}