@charset "utf-8";

/* =======================================================================

 共通項目
 
======================================================================= */
body{
  color: #512e25;
  background-color: #f9dfdf;
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
a{
  text-decoration: none;
}
*{
  box-sizing: border-box;
}
ul{
  list-style: none;
}
img{
  max-width: 100%;
}
#index .key_visual .key_v_wrapper, header, .container > article, footer .footer_frame{
  width: 100%;
  max-width: 1100px;
  height: 100%;
  margin: 0 auto;
}

.pc_none{
	display:none;
}
.sp_none{
	display:block;
}

@media screen and (max-width: 767px){
  .tel{
    letter-spacing: .1em;
  }
  body{
    font-size: 4vmin;
  }
  .pc_none{
	  display:block;
  }
.sp_none{
	display:none;
}
} 

/* -----------------------------------------------------------
 見出し
----------------------------------------------------------- */


/* -----------------------------------------------------------
　スライダー用
----------------------------------------------------------- */
.swiper-container{
  line-height: 0;
}


/* =======================================================================

 個別項目
 
======================================================================= */


/* -----------------------------------------------------------
　診療時間
----------------------------------------------------------- */
.medical_time{
  width: 100%;
}
.medical_time th{
  background-color: rgba(250,226,226,.9);
}
.medical_time tr {
  border-bottom: solid 1px #afafaf;
}
.medical_time tr:nth-of-type(1) th:first-of-type{
  border-right: solid 1px #afafaf;
  width: 30%;
}
.medical_time tr:nth-of-type(2) th, .medical_time tr:nth-of-type(3) th{
  background-color: rgba(255,255,255,.9);
  border-right: solid 1px #afafaf;
}
.medical_time td{
  background-color: rgba(255,255,255,.9);
}
.medical_time th, .medical_time td{
  padding: .7rem 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
}
.medical_time tr:not(:last-child) td{
  font-weight: bold;
}
.medical_time .consultation_time{
  border-radius: 100%;
  border: solid 1px #512e25;
  width: 1.8vmin;
  height: 1.8vmin;
  display: inline-block;
}
.medical_time .unable{
  border-bottom: solid 1px #512e25;
  width: 1.8vmin;
  height: 0;
  display: inline-block;
  vertical-align: middle;
}
.medical_time tr:last-of-type{
  border-bottom: none;
}
.medical_time tr:last-of-type td{
  text-align: left;
  padding: .3rem .7rem;
  line-height: 1.4;
  font-size: 90%;
}
@media screen and (max-width: 767px) {
  .medical_time .consultation_time{
    width: 3vw;
    height: 3vw;
  }
  .medical_time .unable{
    width: 3vw;
  }
}
/* -----------------------------------------------------------
　ヘッダー
----------------------------------------------------------- */
header{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  padding: 1rem 1rem 2rem;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  line-height: 1.4;
}
header div:last-child{
  text-align: right;
}
header .h_address{
  font-size: 90%;
}
header .tel{
  font-size: 170%;
}
@media screen and (min-width: 1120px){
  header{
    padding: 1rem 0 2rem;
  }
}
@media screen and (min-width: 768px) {
  header h1{
    width: 30%;
    min-width:312px;
  }
}
@media screen and (max-width: 767px) {

  header {
    padding-bottom: .5rem;
  }
  header >div{
    display: none;
  }
  header h1{
    width: 75%;
    max-width: 312px;
  }
}

/* -----------------------------------------------------------
　キービジュアル
----------------------------------------------------------- */
.key_visual{
  position: relative;
  overflow: hidden;
  min-height: 200px;
  height: 25vmin;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  border-bottom: solid 3px #512e25;
}
.key_visual:before, .key_visual:after{
  display: block;
  content: "";
  position: absolute;
}
.key_visual:before{
  display: block;
  content: "";
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  position: absolute;
  top: -6px;
  left: -6px;  
  background: no-repeat center top/100%;
  background-attachment: fixed;
  filter: 0;
}
.key_visual:after{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;  
  background-color: rgba(255,255,255,.5);
}
.key_visual h2{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  text-shadow: 1px 1px 2.5vmin rgba(255,255,255,1), -1px 1px 2.5vmin rgba(255,255,255,1), 1px -1px 2.5vmin rgba(255,255,255,1), -1px -1px 2.5vmin rgba(255,255,255,1);
  font-size: 220%;
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
  font-weight: normal;
  letter-spacing: .1em;
}
@media screen and (max-width: 767px) {
  .key_visual{
    min-height: inherit;
    height: 30vmin;
    border-top: solid 2px #512e25;
    border-bottom: solid 2px #512e25;
  }
  .key_visual h2{
    font-size: 170%;
    letter-spacing: .1em;
  }
}
#doctor .key_visual:before{
  background-image: url(../images/keyv/keyv_doctor.jpg);
}
#first .key_visual:before{
  background-image: url(../images/keyv/keyv_first.jpg);
}
#clinic .key_visual:before{
  background-image: url(../images/keyv/keyv_clinic.jpg);
}
#access .key_visual:before{
  background-image: url(../images/keyv/keyv_access.jpg);
}
#sports_ortho .key_visual:before{
  background-image: url(../images/keyv/keyv_sports.jpg);
}
#rehabilitation .key_visual:before{
  background-image: url(../images/keyv/keyv_rehab.jpg);
}
#osteoporosis .key_visual:before{
  background-image: url(../images/keyv/keyv_osteoporosis.jpg);
}
#pain .key_visual:before{
  background-image: url(../images/keyv/keyv_pain.jpg);
}
#checkup .key_visual:before{
  background-image: url(../images/keyv/keyv_checkup.jpg);
}
#internal .key_visual:before{
  background-image: url(../images/keyv/keyv_internal.jpg);
}
#vaccination .key_visual:before{
  background-image: url(../images/keyv/keyv_vaccination.jpg);
}
#surgery .key_visual:before{
  background-image: url(../images/keyv/keyv_surgery.jpg);
}
#orthopedics .key_visual:before{
  background-image: url(../images/keyv/keyv_orthopedics.jpg);
}
#rheumatism .key_visual:before{
  background-image: url(../images/keyv/keyv_rheumatism.jpg);
}
/* -----------------------------------------------------------
　メインメニュー
----------------------------------------------------------- */
.main_nav{
  border-bottom: solid 5px #512e25;
  padding: 0 0 .5rem;
}
.main_nav ul{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}
.main_nav ul li{
  width: 20%;
  text-align: center;
  border-right: solid 1px #bea9a6;
}
.main_nav ul li:first-child{
  border-left: solid 1px #bea9a6;
}
.main_nav ul li a, .main_nav ul li a img{
  display: block;
}
.main_nav ul li a img{
  margin: .3rem auto;
  transition: .5s;
}
.main_nav ul li a img:first-of-type{
  height: 15px;
}
.main_nav ul li a img:last-of-type{
  height: 10px;
}
.main_nav ul li a:hover img{
  opacity: .8;
  transform: translateY(-2px);
}
@media screen and (max-width: 767px) {
  .main_nav{
    border-bottom: none;
    padding: 0 0 .5rem;
  }
  .main_nav ul{
    max-width: 1100px;
    display: block;
    padding: 10vmin 4vmin 0;
  }
  .main_nav ul li{
    width: 100%;
    text-align: left;
    border-right: none;
  }
  .main_nav ul li:first-child{
    border-left: none;
  }
  .main_nav ul li a{
    padding: 4vmin 0;
    border-top:  solid 1px rgba(255,255,255,.5);
    border-bottom:  solid 1px rgba(190,169,166,.5);
  }
  .main_nav ul li:first-of-type a{
    border-top: none;
  }
  .main_nav ul li:last-of-type a{
    border-bottom: none;
  }
  .main_nav ul li a, .main_nav ul li a img{
    display: block;
  }
  .main_nav ul li a img{
    margin: 0;
    transition: none;
  }
  .main_nav ul li a img:last-of-type{
    margin: 1vmin 0 0 1vmin;
  }
}
/* -----------------------------------------------------------
　ハンバーガーメニュー
----------------------------------------------------------- */
.main_nav #navToggle {
	display: none;
	position: fixed;
	right: 2%;
	top: 2vmin;
	width: 12vmin;
	height: 12vmin;
	cursor: pointer;
	overflow:hidden;
  z-index: 1001;
  border: solid 1px #bea9a6;
  border-radius: 6px;
  background-color: rgba(249,233,233,.8);
}
.main_nav #navToggle div {
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  padding-top: 1.5vmin;
  height: 7vmin;
}
.main_nav #navToggle div>span {
	display: inline-block;
	width: 60%;
  height: 0;
	border: solid 1px #b19692;
  border-radius: 2px;
}
.main_nav #navToggle p{
	font-size:2vmin;
  padding-top: .5vmin;
	text-align:center;
	color:#512e25;
  letter-spacing: -0.1em;
}
@media screen and (max-width: 767px) {
  .main_nav #navToggle{
    display: block;    
  }
  .main_nav nav{
    height: 100%;
    width: 60%;
    position: fixed;
    right: 0;
    top: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    transition: .3s;
    -webkit-transition: -webkit-transform .3s;
    z-index: 1000;
    background-color: #fbcfd1;
  }
  .main_nav.openNav nav{
    transform: translateX(0);
    -webkit-transform: translateX(0);
    box-shadow: 0 0 10px 5px rgba(0,0,0,.2);
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
  }  
  .main_nav #navToggle p span:first-of-type{
    display: block;
  }
  .main_nav #navToggle p span:last-of-type{
    display: none;
  }
  .main_nav.openNav #navToggle p span:first-of-type{
    display: none;
  }
  .main_nav.openNav #navToggle p span:last-of-type{
    display: block;
  }
  .fixed {
    position: fixed;
    width: 100%;
    height: 100%;
  }
}
/* -----------------------------------------------------------
　アサイド
----------------------------------------------------------- */
.container > article aside{
  width: 290px;
  padding-right: 20px;
}
aside input[type="checkbox"] {
  display: none;
}
@media screen and (min-width: 768px){
  aside .menu label{
    display: block;
    height: 3rem;
    background: url(../images/aside_h2.svg) no-repeat center;
    background-size: auto 22px;
    text-indent: -100%;
    overflow: hidden;
    border-bottom: solid 2px #512e25;
    position: relative;
  }
  aside .menu ul{
    border-top: solid 1px #512e25;
    margin-top: 2px;
  }
  aside .menu ul li{
    border-bottom: solid 1px #512e25;
  }
  aside .menu ul a{
    color: #512e25;
    display: block;
    padding: 1.3rem 1rem;
    position: relative;
    transition: .5s;
  }
  aside .menu ul a:hover{
    background-color: #efdfdf;
  }  
  aside .menu ul a:before{
    content: "";
    display: inline-block;
    border: solid 6px transparent;
    border-left: solid 7px #bea9a6;
    position: absolute;
    right: 3%;
    top: 50%;
    margin-top: -6px;
  }
}
@media screen and (max-width: 767px) {
  .container > article aside{
    width: 100%;
    padding-right: 0;
    margin-bottom: 1rem;
  }

/*アコーディオン*/
  .menu{
    background:#fff;
    color: #5c3e36;
    border: 1px solid #bea9a6;
    padding:1rem 1rem 0;
    border-radius: 6px;
    font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
  }
  .menu label {
    display: block;
    position: relative;
    padding-bottom: 1rem;
  }
  .menu label:after{
    display: block;
    content: "";
    border: solid 6px transparent;
    border-top: solid 8px #bea9a6;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(calc(-1rem + 4px));
  }
  input[type="checkbox"].on-off{
      display: none;
  }

  .menu ul {
    transition: all 0.5s;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .menu li a{
    height: 2.5rem;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    color: #5c3e36;
    padding: 0 10px;
    width: 100%;
  	border-top:#dcd5d3 1px solid;
  }
  input[type="checkbox"].on-off + ul{
      max-height: 0;
      overflow: hidden;
  }

  input[type="checkbox"].on-off:checked + ul{
      max-height: calc(2.5rem * 10);
  }
}

/* -----------------------------------------------------------
　メインコンテンツ
----------------------------------------------------------- */
/* ----------- 見出し ----------- */
.main > section >h3{
  position: relative;
  padding: .7rem 0 .8rem;
  margin-bottom: 1.5rem;
  font-size: 140%;
  font-weight: normal;
}
.main > section >h3:before, .main > section >h3:after{
  display: block;
  content: "";
  width: 100%;
  height: 0;
  border-bottom: solid 2px #512e25;
  position: absolute;
  bottom: 0;
}
.main > section >h3:after{
  border-width: 1px;
  bottom: -3px;
}
.main > section >h3 span{
  display: block;
  position: relative;
  padding-left: 3vw;
}
.main > section >h3 span:before, .main > section >h3 span:after{
  display: block;
  content: "";
  width: 1vmin;
  height: .2vmin;
  border-top: solid 1vmin #512e25;
  border-bottom: solid 1vmin #512e25;
  position: absolute;
  margin-top: -1vmin;
  top: 50%;
}
.main > section >h3 span:before{
  left: 1vmin;
  border-top: solid 1vmin #bea9a6;
}
.main > section >h3 span:after{
  left: 2.2vmin;
}
.main > section >h3 img{
  height: 22px;
}
.main > section >h4, .machine li h4{
  border-left: solid 3px #bea9a6;
  font-size: 110%;
  font-weight: normal;
  margin-bottom: 1rem;
  position: relative;
  padding-left: 1rem;
  line-height: 1.3;
}
.main > section >h4:before, .machine li h4:before{
  content: "";
  display: block;
  position: absolute;
  left: 2px;
  top: 0;
  height: 100%;
  border-left: solid 5px #512e25;
}
.main > section >h4{
  font-size: 120%;
  margin: 1.5rem 0;
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .main > section >h3{
    padding: .7rem 0 .6rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    font-size: 130%;
  }
  .main > section >h3 span{
    padding-left: 8.5vmin;
  }
  .main > section >h3 span:before, .main > section >h3 span:after{
    display: block;
    content: "";
    width: 2.2vmin;
    height: .4vmin;
    border-top: solid 2.2vmin #512e25;
    border-bottom: solid 2.2vmin #512e25;
    position: absolute;
    margin-top: -2.2vmin;
    top: 50%;
  }
  .main > section >h3 span:before{
    left: 2.2vmin;
    border-top: solid 2.2vmin #bea9a6;
  }
  .main > section >h3 span:after{
    left: 4.8vmin;
  }
}
.container > article{
  background-color: rgba(255,255,255,.6);
  padding: 2rem 1rem;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.container > article .index_tel{
  display: none;
}
.container > article .main{
  width: calc(100% - 290px);
}
.main > section{
  margin-bottom: 5vmin;
}
.main > section p {
  line-height: 1.8;
}
.main > section >p:not(:last-child){
  margin-bottom: 1.5rem;
}
/* -------リスト------- */
.main ul, .main ol {
  line-height: 1.8;
}
.main .list_icon li{
  margin-left: 1.3rem;
  margin-bottom: .5rem;
  text-indent: -.5rem;
}
.main .list_icon li:before{
  content: '';
	width: .5rem;
	height: .5rem;
	display: inline-block;
	background: #bea9a6;
	position: relative;
	left: -.8rem;
	top: -.1rem;
}
/* -------定義リスト------- */
.main .define_list dt, .main .define_list dd{
  display: block;
  float: left;
  margin: 0;
  line-height: 1.8;
  margin-bottom: .5rem;
}
.main .define_list:after{
  display: block;
  content: "";
  clear: both;
}
.main .define_list dt{
  width: 8em;
  font-weight: bold;
  position: relative;
}
.main .define_list dt:after{
  position: absolute;
  bottom: 0;
  content: "";
  width: calc(8em - .8rem);
  border-bottom: dotted 1px #bea9a6;
  right: 0;
}
.main .define_list dd{
  width: calc(100% - 8em);
  padding-left: 2rem;
}
.main .define_list dt:before{
  content: '';
	width: .5rem;
	height: .5rem;
	display: inline-block;
	background: #bea9a6;
  margin-right: .8rem;
}
/* -------表------- */
.main_table{
  width: 100%;
  background-color: rgba(255,255,255,.7);
  margin-bottom: 1rem;
}
.main_table thead{
  background-color: #f39fa0;
  color: #fff;
}
.main_table td, .main_table th{
  border: solid 1px #afafaf;
  padding: .7rem;
  line-height: 1.6;
  vertical-align: middle;
}
.main_table th{
  font-weight: normal;
}
.main_table thead th:not(:last-of-type){
  border-right-color: rgba(255,255,255,.5);
}
.main_table tbody th{
  background-color: rgba(250,226,226,.9);
}
.main_table h5{
  margin-bottom: .5rem;
  border-bottom: dotted 1px #bea9a6;
  font-weight: normal;
}
.main_table h5:before{
  content: "";
  display: inline-block;
  border-left: solid .5em #bea9a6;
  height: 1em;
  margin-right: .5rem;
  vertical-align: text-bottom;
}
/* -------文字装飾------- */
.text_emphance{
  color: rgb(214, 86, 86);
}
.text_small{
  font-size: 90%;
}
@media screen and (max-width: 767px) {
  .container > article{
    padding: 1rem 1rem 2rem;
    display: block;
  }
  .container > article .index_tel{
    display: block;
    text-align: center;
    margin-bottom: 1rem;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 130%;
  }
  .container > article .index_tel a{
    color: #512e25;
  }
  .container > article .index_tel .tel{
    font-size: 150%;
  }
  .container > article .main{
    width: 100%;
  }
  .main > section >p:not(:last-of-type){
    margin-bottom: 1rem;
  }
  .main .define_list dt{
    width: 6em;
  }
  .main .define_list dt:after{
    width: calc(6em - .8rem);
  }
  .main .define_list dd{
    width: calc(100% - 6em);
    padding-left: 1rem;
  }
  .main_table td, .main_table th{
    padding: .5rem;
  }
}
/* -----------------------------------------------------------
　お知らせ
----------------------------------------------------------- */

.notice_frame {
  /*max-height: 200px;
  overflow-y: scroll;*/
  line-height: 1.8;
  border-bottom: #c8c4c4 1px dotted;
}

.notice_frame dl dt {
  padding: .5rem 1rem .5rem 1.5rem ;
  font-weight: bold;
  line-height: 1.4;
  cursor: pointer;
  position: relative;
  border-top: #c8c4c4 1px dotted;
}
.notice_frame dl dt:first-child{
	border-top: none;
}
.notice_frame dl dt::before { 
	position: absolute;
	top: .7rem;
	left: 0;
	display: block;
	content: '▼';
	font-size: .7em;
	color: #C4AFAD;
}
.notice_frame dl dt.active::before { 
	content: '▲';
}
.notice_frame dl dd {
  font-size: 95%;

  padding: 0rem 1rem 0 1.5rem;
  margin-bottom: 1rem;
}


/* -----------------------------------------------------------
  index
------------------------------------------------------------*/
#index .key_visual{
  width: 100%;
  max-height: 60vmin;
  height: auto;
  min-height: inherit;
  overflow: hidden;
  position: relative;
}
#index .key_visual .key_v_wrapper{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding-left: 1vmin;
}
#index .key_visual h2{
  font-weight: normal;
  font-size: 220%;
  line-height: 1.6;
  padding-bottom: 2vmin;
  height: 40%;
  margin-bottom: 3vmin;
  display: flex;
  display: -webkit-flex;
  align-items: flex-end;
  -webkit-align-items: flex-end;
  position: relative;
  color: inherit;
  letter-spacing: normal;
}
@media screen and (max-width: 1230px){
  #index .key_visual h2{
    font-size: 3vw;
  }
}
#index .key_visual h2:after{
  display: block;
  content: "";
  border-bottom: solid 1px #512e25;
  width: 55%;
  position: absolute;
  bottom: 0;
  left: 0;
}
#index .key_visual .medical_time_wrapper{
  width: 50%;
  background-color: rgba(255,255,255,.3);
  border-radius: 6px;
  padding: .5rem;
  font-size: 1.8vmin;
}
@media screen and (max-width: 767px) {
  #index .key_visual{
    max-height: 50vw;
  }
  #index .key_visual .key_v_wrapper{
    left: 0;
    transform: none;
    padding-left: 0;
  }
  #index .key_visual h2{
    font-size: 5.7vw;
    margin-bottom: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    -webkit-align-items: center;
    text-indent: 0;
    padding-left: 3vw;
    font-weight: bold;
  }
  #index .key_visual h2:after{
    display: none;
  }
  #index .key_visual .medical_time_wrapper{
    display: none;
  }
}
/* ---特長--- */
@media screen and (min-width: 768px) {
  #index .clinic ul:after{
    display: block;
    content: "";
    clear: both;
  }
  #index .clinic ul li{
    float: left;
    width: calc(100% / 3);
    transition: .5s;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    height: 0;
    padding-top: 47%;
  }
  #index .clinic ul li:after, #index .clinic ul li:before{
    display: block;
    content: "";
    position: absolute;
    z-index: 1;
  }
  #index .clinic ul li:before{
    background-color: rgba(255,255,255,.7);
    width: 80%;
    top: 6%;
    left: 10%;
    height: 0;
    transition: .3s;
  }
  #index .clinic ul li:hover:before{
    height: 88%;
  }
  #index .clinic ul li:after{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.4);
  }
  #index .clinic ul li:hover:after{
    display: none;
  }
  #index .clinic ul li div{
    width: 100%;
    height: 50%;
    z-index: 2;
    position: absolute;
    top: 0;
    padding: 0 10% 10%;
    transition: .3s;
    transform: translateY(100%);
  }
  #index .clinic ul li:hover div{
    padding: 10%;
    transform: translateY(0);
  }
  #index .clinic ul li h4{
    transition: .3s;
    margin: 0 auto 0;
    text-align: center;
    width: 87%;
    transform: translateY(-50%);
  }
  #index .clinic ul li:hover h4{
    transform: translateY(0);
    margin: 2vmin auto 2vmin;
  }
  #index .clinic ul li p{
    font-size: 1.7vmin;
    opacity: 0;
    transition: .1s;
    line-height: 1.6;
    padding: 1rem;
    transform: translateY(-100%);
  }
  @media screen and (max-height: 768px){
    #index .clinic ul li p{
      font-size: 13px;
    }
  }
  #index .clinic ul li:hover p{
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s .3s, transform .3s;
  }
  #index .clinic ul li:nth-of-type(1){
    background-image: url(../images/clinic01.jpg);
    background-size: 100%;
  }
  #index .clinic ul li:nth-of-type(2){
    background-image: url(../images/clinic02.jpg);
    background-size: 100%;
  }
  #index .clinic ul li:nth-of-type(3){
    background-image: url(../images/clinic03.jpg);
    background-size: 100%;
  }
}
@media screen and (max-width: 767px) {
  #index .clinic ul li{
    width: 100%;
    height: 0;
    padding-top: 68%;
    background-repeat: no-repeat;
    background-size: 50%;
    background-color: rgba(255,255,255,.7);
    position: relative;
    margin-bottom: 1rem;
  }
  #index .clinic ul li div{
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    padding: 3.5vw;
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: center;
    justify-content: center;
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  #index .clinic ul li h4{
    margin-bottom: 4vw;
    text-align: center;
  }
  #index .clinic ul li p{
    font-size: 3.5vw;
    line-height: 1.6;
  }
  #index .clinic ul li:nth-of-type(1){
    background-image: url(../images/clinic01.jpg);
    background-position: left center;
  }
  #index .clinic ul li:nth-of-type(2){
    background-image: url(../images/clinic02.jpg);
    background-position: right center;
  }
  #index .clinic ul li:nth-of-type(3){
    background-image: url(../images/clinic03.jpg);
    background-position: left center;
  }
  #index .clinic ul li:nth-of-type(2) div{
    right: auto;
    left: 0;
  }
}
/* ---バナー--- */
#index .banners{
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
#index .banners a{
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  width: 48.5%;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; 
  font-size: 95%;
  border: solid 1px #bea9a6;
  position: relative;
  padding: 0 .8vmin;
  text-shadow: 1px 1px 1px rgba(255,255,255,.9), -1px 1px 1px rgba(255,255,255,.9), 1px -1px 1px rgba(255,255,255,.9), -1px -1px 1px rgba(255,255,255,.9);
  line-height: 1.3;
  margin-bottom: 1rem;
  transition: .5s;
  height: 14vmin;
  cursor: pointer;
  background-position: center top;
  color: #512e25;
}
#index .banners a:after{
  display: block;
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  border: solid 10px transparent;
  border-top: solid 10px #512e25;
  border-left: solid 10px #512e25;
  width: 0;
  height: 0;
}
#index .banners a span{
  font-size: 150%;
  display: block;
  white-space: nowrap;
  margin-right: 3%;
  max-width: 55%;
}
#index .banners a span:first-letter{
  font-size: 150%;
  vertical-align: -15%;
}
#index .banners a:nth-of-type(1){
  background-image: url(../images/bn/bn01.jpg);
  background-size: 100%;
}
#index .banners a:nth-of-type(2){
  background-image: url(../images/bn/bn02.jpg);
  background-size: 100%;
}
#index .banners a:nth-of-type(3){
  background-image: url(../images/bn/bn03.jpg);
  background-size: 100%;
}
#index .banners a:nth-of-type(4){
  background-image: url(../images/bn/bn04.jpg);
  background-size: 100%;
}
#index .banners a:hover{
  background-size: 105%;
  opacity: .7;
}
@media screen and (max-width: 767px) {
  #index .banners{
    display: block;
  }
  #index .banners a{
    width: 100%;
    font-size: 3.5vw;
    padding: 5vw 3vw;
    height: auto;
    margin-bottom: .3rem;
    background-position: center;
  }
  #index .banners a:after{
    top: 2px;
    left: 2px;
    border: solid 6px transparent;
    border-top: solid 6px #512e25;
    border-left: solid 6px #512e25;
  }
}
/* ---クリニック概要--- */
#index .summary >div{
  display: flex;
  display: -webkit-flex;
  align-content: space-between;
  -webkit-align-content: space-between;
  align-items: stretch;
  -webkit-align-items: stretch;
  width: 100%;
}
#index .summary >div >div{
  width: 60%;
  padding-right: 3%;
  line-height: 1.5;
}
#index .summary b{
  display: block;
  width: 50%;
  min-width: 180px;
}
@media screen and (min-width: 1100px){
  #index .summary .f_address{
    display: flex;
    display: -webkit-flex;
    align-content: space-between;
    -webkit-align-content: space-between;
    align-items: flex-end;
    -webkit-align-items: flex-end;
    width: 100%;
  }
}
#index .summary .f_address{
  margin: 1rem 0;
}
#index .summary .f_address address{
  display: block;
  font-style: normal;
  margin-right: 5%;
}
#index .summary .f_address >p{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; 
  font-size: 130%;
  line-height: 1.2;
}
#index .summary .f_address >p .tel{
  font-size: 130%;
}
#index .summary dl dt{
  border-left: solid 5px #512e25;
  padding-left: .5rem;
  line-height: 1;
  margin: .5rem 0;
}
@media screen and (min-width: 768px) {
  #index .summary .google_map_wrapper{
    width: 40%;
    padding-top:50%;
    position: relative;
    margin:auto;
  }
    #index .summary .google_map{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
  }
}
_:-ms-lang(x), _::-webkit-meter-bar,#index .summary .google_map_wrapper{
  padding-top:0;
}
_:-ms-lang(x), _::-webkit-meter-bar,#index .summary .google_map {
  position: static;
  min-height: 350px;
}
#index .summary .medical_time{
  margin-top: 1rem;
  line-height: 1;  
}
.main .medical_time tr{
  border: solid 1px #afafaf;
}
.main .medical_time tr:last-of-type td{
  background: transparent;
  padding-top: .7rem;
}
.main .medical_time tr:last-of-type{
  border: none;
}
@media screen and (max-width: 767px) {
  #index .summary >div{
    display: block;
  }
  #index .summary >div >div{
    width: 100%;
    padding-right: 0;
    margin-bottom: 1rem;
  }
  #index .summary b{
    width: 60%;
  }
  #index .summary .google_map{
    width: 100%;
    height: 40vmax;
  }
  #index .summary .f_address >p a{
    color: inherit;
  }
}
/* -----------------------------------------------------------
　院長紹介
----------------------------------------------------------- */
#doctor .greeting >div{
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  min-height: 250px;
/*  padding-right: 30%;*/
  position: relative;
}
#doctor .greeting >div:after{
/*
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: url(../images/doctor.png) no-repeat right top/cover;
  box-shadow: inset 0 0 20px #fdf2f2, inset 0 0 20px #fdf2f2, inset 0 0 20px #fdf2f2, inset 0 0 20px #fdf2f2;
*/
}
#doctor .greeting p{
  line-height: 2.2;
  position: relative;
  z-index: 1;
  width: 100%;
}
#doctor .greeting b{
  display: block;
  text-align: right;
  margin-top: .5rem;
  line-height: 1.8;
  font-size: 90%;
  margin:10px 200px 0 0;
}
#doctor .greeting b span{
  display: block;
  font-size: 120%;

}

figure.doctor_img{
	position:absolute;
	top:30px;
	right:0;


}

@media screen and (max-width: 767px) {
  #doctor .greeting >div{
    display: block;
    min-height: 250px;
    padding-right: 0;
  }
  #doctor .greeting >div:after{
/*
    margin-top: 1rem;
    display: inline-block;
    content: "";
    width: 100%;
    padding-top: 60%;
    height: 0;
    position: relative;
    background: url(../images/doctor.png) no-repeat right top/cover;
    box-shadow: inset 0 0 20px #fdf2f2, inset 0 0 20px #fdf2f2, inset 0 0 20px #fdf2f2, inset 0 0 20px #fdf2f2;
*/
  }
  #doctor .greeting p{
    line-height: 1.8;;
  }
  #doctor .greeting b{
/*    margin-top: 1rem;*/
    margin:1rem 0 0 0;
  }
  
figure.doctor_img{
	position:static;
	text-align:center;
	margin:0 0 15px 0;
}

figure.doctor_img img{
    width:50%;
	height:auto;
}

}
/* -----------------------------------------------------------
　クリニック紹介
----------------------------------------------------------- */
#clinic .swiper-container{
  border: solid 3px #fff;
}
.machine li{
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  background-color:rgba(255,255,255,.7);
  margin-bottom: 1rem;
  padding: 1rem;
}
.machine li:nth-of-type(2n){
  flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
}
.machine li >div{
  width: 50%;
  margin-top: -1rem;
  padding: 0 1rem 0 0;
}
.machine li:nth-of-type(2n) >div{
  padding: 0 0 0 1rem;
}

.machine li figure{
  width: 50%;
  line-height: 0;
}
.machine li h4:first-letter {
  font-size: 150%;
  vertical-align: -10%;
}
@media screen and (max-width: 767px) {
  .machine li{
    display: block;
  }
  .machine li >div{
    width: 100%;
    margin-top: 0;
    padding: 0 0 1rem 0;
  }
  .machine li:nth-of-type(2n) >div{
    padding: 0 0 1rem 0;
  }
  .machine li figure{
    width: 100%;
  }
}
/* -----------------------------------------------------------
　アクセス
----------------------------------------------------------- */
@media screen and (min-width: 768px) {
  #access .main > section:last-of-type > div{
    display: flex;
    display: -webkit-flex;
    height: 35vh;
  }
  #access .address{
    width: 30%;
  }
  #access .google_map_wrapper{
    width: 68%;
    height: 100%;
  }
}
#access .google_map{
  width: 100%;
  height: 35vh;
}
#access address{
  font-style: normal;
  line-height: 1.8;
}
/* -----------------------------------------------------------
　診療メニュー
----------------------------------------------------------- */
.main .frame{
  background-color: rgba(255,255,255,.5);
  padding: 1rem;
  border: dotted 1px #bea9a6;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.main .frame ul:last-of-type li:last-of-type{
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .list_symptoms{
    display: flex;
    display: -webkit-flex;
  }
  .list_symptoms ul{
    width: 50%;
  }
  .list_symptoms li:last-of-type{
    margin-bottom: 0;
  }
}
/* --- 整形外科 --- */
#orthopedics .main_table th:first-of-type{
  width: 25%;
}
/* --- 外科 --- */
#surgery .main dl{
  display: flex;
  display: -webkit-flex;
  line-height: 1.8;
  margin-top: -.5rem;
}
#surgery .main dt{
  margin-right: 1rem;
}
/* --- 内科 --- */
#internal .main_table td{
  width: 50%;
}
#internal .main>section>.list_icon{
  margin-top: -1rem;
}
/* --- 骨粗しょう症 --- */
#osteoporosis .list_symptoms ul:first-of-type{
  width: 35%;
}
#osteoporosis .list_symptoms ul:last-of-type{
  width: 65%;
}
/* --- 健康診断 --- */
#checkup .main_table td{
  width: 75%;
}
/* -----------------------------------------------------------
　フッター
----------------------------------------------------------- */
footer{
  background-color: #fbcfd1;
}
footer .footer_frame{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
}
footer .footer_frame dl{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; 
  line-height: 2;
  padding:  2.5rem 0 3rem;
}
footer .footer_frame dl:first-of-type{
  position: relative;
  margin-right: 8vw;
  padding-right: 8vw;
}
footer .footer_frame dl:first-of-type:after{
  display: block;
  content: "";
  width: 0;
  height: 80%;
  border-right: solid 1px #bea9a6;
  position: absolute;
  right: 0;
  top: 10%;
}
footer .footer_frame dl:last-of-type ul:first-of-type{
  margin-right: 8vw;
}
footer .footer_frame dl dt{
  font-size: 120%;
}
footer .footer_frame dl dd{
  display: flex;
  display: -webkit-flex;
  font-size: 95%;
}
footer .footer_frame dl dd ul{
  padding: .5rem;
}
footer .footer_frame dl dd a{
  display: block;
  color: #512e25;
  transition: .3s;
}
footer .footer_frame dl dd a:before{
  content: "";
  display: inline-block;
  border: solid 6px transparent;
  border-left: solid 7px #bea9a6;
  margin-right: .5rem;
  transition: .3s;
}
footer .footer_frame dl dd a:hover{
  opacity: .8;
  
}
footer .footer_frame dl dd a:hover:before{
  transform: translateX(3px);
}
footer .copyright{
  background-color: #512e25;
  text-align: center;
  color: #fff;
  font-weight: normal;
  font-size: 90%;
  padding: 1rem 0;
}
footer .copyright a{
  color: #fff;
}
@media screen and (max-width: 767px) {
  footer .footer_frame{
    display: none;
  }
}
/* -----------------------------------------------------------
　ページトップへ
----------------------------------------------------------- */

#pagetop_position{
  position: fixed;
  bottom: 50px;
  right: 20px;
}

#pagetop_position a{
  width: 50px;
  height: 50px;
  display: block;
  background: rgba(238,121,121,.8);
  border-radius: 25px;
  position: relative;
  opacity: 0.7;
}
#pagetop_position a:hover{
  opacity: 1;  
}
#pagetop_position a:before, #pagetop_position a:after{
  display: block;
  content: "";
  border-bottom: solid 3px #fff;
  width: 30%;
  position: absolute;
  top:35%;
}
#pagetop_position a:before{
  transform: rotate(-45deg) translateY(-50%);
  right: 42%;
}
#pagetop_position a:after{
  transform: rotate(45deg) translateY(-50%);
  left: 42%;
}
#pagetop_position a span{
  color: #fff;
  font-size: 70%;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width:768px) {
}