@charset "UTF-8";

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('//fonts.googleapis.com/css?family=Quicksand:300,400,500,700');


/*=================================================
よくあるご質問
=================================================*/
.question {
  width:100%;
  margin: auto;
  padding:0 0 15px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items: flex-start;
}
.question_mark {
  width:100%;
  max-width:80px;
  margin:0 15px 0 0;
}
.question_mark img {
  max-width:80px;
}
.question_text {
  box-sizing: border-box;
  max-width: 100%;
  flex: 1;
}
@media screen and (max-width: 640px) {
.question_mark {
  max-width:48px;
  margin:0 10px 0 0;
  }
.question_mark img {
  max-width:48px;
  }
}

.question_title {
  border-bottom: 3px solid #837569;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.3;
  display: inline-block;
  margin: 10px 0 8px;
}
@media screen and (max-width: 640px) {
.question_title {
  font-size: 1.1em;
  margin: 10px 0 6px;
  }
}


/*=================================================
診療時間
=================================================*/
.hourtable {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 15px;
}
.hourtable th {
  border-top: 1px solid #999;
  font-weight: bold;
  color: #837569;
  font-size: 1.1em;
  background: #F5ECE3;
  line-height: 100%;
  padding: 8px 12px;
  text-align: center;
  border-bottom: 1px solid #999;
}
.hourtable td {
  font-weight: 500;
  color: #837569;
  font-size: 1.4em;
  line-height: 100%;
  padding: 15px 12px;
  text-align: center;
  border-bottom: 1px solid #999;
}
@media screen and (max-width: 840px) {
.hourtable {
  margin: 15px 0 12px;
  }
.hourtable th {
  font-size: 0.9em;
  padding: 6px 6px;
  }
.hourtable td {
  font-size: 1em;
  font-weight: normal;
  padding: 10px 6px;
  }
}

/*=================================================
医師紹介
=================================================*/
.profile {
  width:100%;
  margin: auto;
  padding:15px 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
}
.profile_img {
  width:40%;
  margin:0 30px 0 0;
  text-align: center;
}
.profile_text {
  width:60%;
}
@media screen and (max-width: 767px) {
.profile {
  flex-direction: column;
  display:block;
  }
.profile_img {
  width:100%;
  margin:0 0 15px 0;
  }
.profile_text {
  width:100%;
  }
}

.resizedoctor{
  width:100%;
  max-width:260px;
}
@media screen and (max-width: 640px) {
.resizedoctor{
  max-width:180px;
  }
}

/*=================================================
当院の特徴
=================================================*/
.point {
  width:100%;
  margin: auto;
  padding:0 0 15px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items: flex-start;
}
.point_numb {
  width:100%;
  max-width:100px;
  margin:0 20px 0 0;
}
.point_numb img {
  max-width:100px;
}
.point_text {
  box-sizing: border-box;
  max-width: 100%;
  flex: 1;
}
@media screen and (max-width: 640px) {
.point {
  flex-direction: column;
  display:block;
  }
.point_numb {
  width:100%;
  max-width:100%;
  text-align: center;
  margin:0 0 0 0;
  }
.point_numb img{
  max-width:80px;
  }
.point_text {
  text-align: center;
  }
}

.point_yellow {
  border-bottom: 3px solid #F4C268;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.3;
  display: inline-block;
  margin: 10px 0 8px;
}
.point_green {
  border-bottom: 3px solid #5F9F57;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.3;
  display: inline-block;
  margin: 10px 0 8px;
}
.point_blue {
  border-bottom: 3px solid #669ABE;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.3;
  display: inline-block;
  margin: 10px 0 8px;
}
.point_pink {
  border-bottom: 3px solid #EB7C9B;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.3;
  display: inline-block;
  margin: 10px 0 8px;
}
@media screen and (max-width: 640px) {
.point_yellow,
.point_green,
.point_blue,
.point_pink {
  margin: 10px 0 6px;
  }
}

.lefttext {
  text-align: left !important;
}

/*=================================================
ヘッダー情報
=================================================*/
.head1 {
  width:100%;
  margin: auto;
  padding:30px 0 20px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items: center;
}
.head1_left {
  width:70%;
}
.head1_right {
  width:30%;
}
@media screen and (max-width: 640px) {
.head1 {
  flex-direction: column;
  display:block;
  padding:20px 0 15px;
  }
.head1_left {
  width:100%;
  }
.head1_right {
  display: none;
  }
}

.head2 {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items: center;
}
.head2_left {
  width:25%;
  margin: 0 40px 0 0;
}
.head2_right {
  width:75%;
}
@media screen and (max-width: 960px) {
.head2 {
  flex-direction: column;
  display:block;
  }
.head2_left {
  display: none;
  }
.head2_right {
  width:100%;
  }
.head2 h1{
  padding: 0 0.6em;
  }
.head2 h2{
  padding: 0 0.6em;
  }
}

/*=================================================
カラムレイアウト
=================================================*/
.container {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
}
.side {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 320px;
  height: 100vh;
  min-height: 100%;
  background: #837569;
  padding: 0;
  overflow: auto;
}
.main {
  flex: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 32px;
}
@media screen and (max-width: 1240px) {
.side {
  width: 240px;
  }
}
@media screen and (max-width: 960px) {
.container {
  flex-direction: column;
  display:block;
  }
.side {
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  min-width: 100%;
  height: auto;
  min-height: auto;
  z-index: 1000;
  }
.main {
  width: 100%;
  min-width: 100%;
  }
}
@media screen and (max-width: 640px) {
.main {
  padding: 0 18px;
  }
}

/*-------------------------
ナビゲーション枠
--------------------------*/
nav {
  width: 100%;
  padding: 30px 15px;
  margin: 0 auto;
}
nav li {
  padding: 18px 0;
}
nav li img {
  max-width: 180px;
}
.navinfo {
  width: 100%;
  text-align: center;
  padding: 0 15px;
}
.navbr {
  display:none;
}
@media screen and (max-width: 1240px) {
.navbr {
  display:block;
  }
nav li img {
  max-width: 164px;
  }
}
@media screen and (max-width: 960px) {
nav {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  width: 100%;
  max-width: 640px;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  }
nav li {
  width: 25%;
  max-width:25%;
  width: calc(100% / 4);
  padding: 2px;
  line-height: 24px;
  }
nav li img {
  max-width: 100%;
  }
.navinfo {
  display: none;
  }
}
/* 画像デバイス切り替え */
nav .pc {
  display:block;
}
nav .sp {
  display:none;
}
@media(max-width:960px){
nav .pc {
  display:none;
  }
nav .sp {
  display:block;
  }
}

/*-------------------------
フッター
--------------------------*/
footer {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 25px 24px;
  text-align: center;
}
.footillust {
  width:100%;
  max-width:180px;
  margin-bottom: 20px;
}
.footlogo {
  width:100%;
  max-width:180px;
  margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
.footillust {
  max-width:140px;
  margin-bottom: 15px;
  }
}

/*=================================================
各種パーツ
=================================================*/
/*-------------------------
白紙背景
--------------------------*/
.paper {
  width: 100%;
  padding: 32px 42px;
  margin: 0;
  background: #FFF;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow:0px 0px 5px 1px rgba(0,0,0,0.15);
}
@media(max-width:960px){
.paper {
  padding: 24px 32px;
  }
}
@media(max-width:640px){
.paper {
  padding: 24px;
  }
}

/*-------------------------
タイトル
--------------------------*/
.titleicon {
  width: 100%;
  max-width: 100px;
  margin-bottom: 10px;
}
.title {
  width: auto;
  max-height: 32px;
  margin-bottom: 5px;
}
.titleeng {
  font-family: 'Quicksand', sans-serif;
  line-height:1.5;
  white-space: nowrap;
  color:#C7BCB2;
  font-size: 1.4em;
  font-weight: 500;
}
.dotline {
  border-bottom : 5px dotted #837569;
  margin: 8px 0 15px;
}
@media(max-width:960px){
.titleicon {
  max-width: 80px;
  }
.title {
  max-height: 28px;
  }
.titleeng {
  font-size: 1.2em;
  }
}
@media(max-width:640px){
.titleicon {
  max-width: 64px;
  }
.title {
  max-height: 24px;
  }
.titleeng {
  font-size: 1.1em;
  }
.dotline {
  margin: 8px 0 10px;
  }
}

/*-------------------------
サブタイトル
--------------------------*/
.subtitle {
  display:flex; 
  align-items:center;
  font-size: 1.3em;
  font-weight: bold;
  color: #837569;
  margin: 15px 0 5px;
}
.subtitle:after {
  margin-left:5px; 
  border-top:1px solid #C7BCB2; 
  content:""; 
  flex-grow:1;
}
@media(max-width:640px){
.subtitle {
  font-size: 1.1em;
  }
}

.subtitle2 {
  display:flex; 
  align-items:center;
  font-size: 1.1em;
  font-weight: bold;
  color: #837569;
  margin: 15px 0 0;
}
.subtitle2:after {
  margin-left:5px; 
  border-top:1px solid #C7BCB2; 
  content:""; 
  flex-grow:1;
}
@media(max-width:640px){
.subtitle2 {
  font-size: 1em;
  margin: 15px 0 3px;
  }
}

/*-------------------------
ページ上部へジャンプ
--------------------------*/
#jumptop{
  position:fixed;
  right: 40px;
  bottom:40px;
  z-index: 1001;
}
.jumpbtn {
  width:5em;
  height:5em;
  cursor:pointer;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  cursor:pointer;
  background:#837569;
  position: relative;
}
.jumpbtn:before {
  content: '';
  position: absolute;
  top: 45%;
  right: 1.7em;
  display: block;
  width: 1.5em;
  height: 1.5em;
  border-top: 2px solid #FFF; 
  border-right: 2px solid #FFF; 
  transform: rotate(-45deg); 
}
@media(max-width:960px){
#jumptop{
  right: 20px;
  bottom:20px;
  }
.jumpbtn {
  width: 3.4em;
  height: 3.4em;
  }
.jumpbtn:before {
  top: 42%;
  right: 1.2em;
  width: 1em;
  height: 1em;
  }
}

/*-------------------------
電話リンク
--------------------------*/
/* ナビ枠(黄色) */
.tel_nav  {
  font-size:1.8em;
  line-height:100%;
  padding:5px 10px 15px 0;
  font-family: 'Quicksand', sans-serif;
  white-space: nowrap;
}
.tel_nav :before {
  content:"";
  display:inline-block;
  width:0.8em;
  height:0.8em;
  background:url(../img/tel_yellow.png) no-repeat;
  background-size:contain;
  padding-left:0.8em;
  vertical-align:bottom;
}
.tel_nav  a{
  text-decoration:none;
  color:#FFD972;
  font-weight:600;
}
@media screen and (max-width: 960px) {
.tel_nav  {
  font-size:1.3em;
  }
}

/* 赤色 */
.tel_red  {
  font-size:2em;
  line-height:100%;
  padding:3px 0;
  font-family: 'Quicksand', sans-serif;
  white-space: nowrap;
}
.tel_red :before {
  content:"";
  display:inline-block;
  width:0.8em;
  height:0.8em;
  background:url(../img/tel_red.png) no-repeat;
  background-size:contain;
  padding-left:0.8em;
  vertical-align:bottom;
}
.tel_red  a{
  text-decoration:none;
  color:#EE6352;
  font-weight:600;
}

/*-------------------------
ボタン
--------------------------*/
/* 茶四角ボタン */
.btn {
  -webkit-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
  -o-appearance:none;
  appearance:none;
  font-size:1.2em;
  cursor: pointer;
  padding: 12px 12px;
  text-decoration: none;
  color: #FFF;
  background: #837569;
  text-align: center;
  font-weight: bold;
  line-height: 100%;
  border: 2px solid #837569;
  margin:10px 0;
  display: inline-block;
  transition: all .3s;
}
a.btn:hover {
  background: #FFF;
  color: #837569;
  border: 2px solid #837569;
}

/* 茶枠線ボタン */
.btn2 {
  -webkit-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
  -o-appearance:none;
  appearance:none;
  font-size:0.9em;
  cursor: pointer;
  padding: 5px 10px 5px;
  text-decoration: none;
  color: #837569;
  background: #FFF;
  text-align: center;
  font-weight: bold;
  line-height: 100%;
  border: 2px solid #837569;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  margin:5px 5px 0 0;
  display: inline-block;
  transition: all .3s;
}
.btn2:hover {
  background: #837569;
  color: #FFF;
  border: 2px solid #837569;
}

/*-------------------------
写真ギャラリー
--------------------------*/
/* 写真ギャラリー横並び2列固定 */
.gallery2 {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
}
.gallery2 li {
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  padding:0 15px 15px 0;
  box-sizing: border-box;
}
.gallery2 img {
  width:100%;
}
@media screen and (max-width: 640px) {
.gallery2 li {
  padding:0 10px 10px 0;
  }
}

/* 写真ギャラリー横並び3列固定 */
.gallery3 {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
}
.gallery3 li {
  width: 33.33%;
  max-width:33.33%;
  width: calc(100% / 3);
  padding:0 15px 15px 0;
  box-sizing: border-box;
}
.gallery3 img {
  width:100%;
}
@media screen and (max-width: 640px) {
.gallery3 li {
  padding:0 8px 8px 0;
  }
}

/* 写真ギャラリーキャプション */
.gallerycaption {
  font-size: 0.8em;
  margin-top: 6px;
  line-height: 1.5;
  padding: 0;
}
@media screen and (max-width: 640px) {
.gallerycaption {
  font-size: 0.7em;
  margin-top: 5px;
  line-height: 1.4;
  }
}
/*-------------------------
横並びflexbox
--------------------------*/
/* 均等2列(767px以下で縦列切り替え) */
.col2 {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
}
.col2 li{
  width:50%;
  margin:0 30px 0 0;
}
.col2 li:last-child{
  margin:0 0 0 0;
}
@media screen and (max-width: 767px) {
.col2 {
  flex-direction: column;
  display:block;
  }
.col2 li {
  width:100%;
  margin:0 0 15px 0;
  }
.col2 li:last-child{
  margin:0 0 0 0;
  }
}

/* 画像＋テキスト／幅1:2＆中央揃え (640px以下で縦列切り替え) */
.column {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items: center;
}
.column_img {
  flex: 1;
  margin:0 20px 0 0;
}
.column_text {
  flex: 2;
}
@media screen and (max-width: 960px) {
.column {
  align-items:flex-start;
  }
}
@media screen and (max-width: 640px) {
.column {
  flex-direction: column;
  display:block;
  }
.column_img {
  max-width:100%;
  margin:0 0 10px 0;
  }
}

/* 画像＋テキスト／幅1:2＆中央揃え (767px以下で上揃え) */
.column2 {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items: center;
}
.column2_img {
  flex: 1;
  margin:0 20px 0 0;
}
.column2_text {
  flex: 2;
}
@media screen and (max-width: 767px) {
.column2 {
  align-items:flex-start;
  }
.column2 li {
  margin:0 15px 0 0;
  }
.column2 li:last-child{
  margin:0 0 0 0;
  }
}