@charset "UTF-8";
@import "index.css";

/*
YUKI TAKAHASHI
Copyright 2015 UQ DESIGN. All Rights Reserved.
http://uqyuki-design.com/
*/


/* ------------------------------共通------------------------------　*/
#header { background:url(../img/header_bg01.jpg); background-size:cover; }
#header h1 { color:#ffffff; font-size:36px;  margin:100px 0 90px 0; text-shadow: 0px 1px 0px #000000; }
h1 , h2 , h3 , h4 { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight:normal; }
h2 , h3 { font-size:30px; }
h2 { margin:0 0 30px 0; }
h3 { margin:0 0 30px 0; }
@media screen and (max-width:768px){
#header h1 { font-size:28px; }
h2 , h3 ,h4 { font-size:20px; }
}
.f7f7f7 { background:#f7f7f7 !important; }

article { width:100%; }
section { width:100%; padding:70px 0 50px 0; }
.content { width:1060px; margin:0 auto; }

@media screen and (max-width:768px){
article { width:100%;}
section { width:100%; padding:30px 0 20px 0 }
.content { width:100%; margin:0 auto; }
}


/* ------------------------------院長あいさつ------------------------------　*/

.message01 { background:url(../img/message01_bg.jpg) no-repeat 50% 0;  }
.message01 .content { padding:0 0 0 350px; }
.message01 h2 { text-align:left }

.message02 { background:#f7f7f7 url(../img/message02_bg.png) no-repeat 50% 0; }
.message02 .content { padding:0 350px 0 0; }
.message02 h3 { text-align:left }

.message03 { background:url(../img/message03_bg.jpg) no-repeat 50% 0; }
.message03 .content { padding:0 0 0 350px; }
.message03 h3 { text-align:left }

@media screen and (max-width:768px){
	.message01 , .message02 , .message03 { background:none; }
	.message01 .content , .message02 .content , .message03 .content { padding:0; }
	.message01 img , .message02 img , .message03 img { margin:0 0 20px 0; }
    .message01 h2 , .message02 h3 , .message03 h3 { text-align:center; }
    .message01 p , .message02 p , .message03 p { margin-left:16px; margin-right:16px; }


}


.message04 { background:#f7f7f7; padding:70px 0 70px 0;}
.message04 .content { padding:0; }
.message04 h3 { text-align:left; font-size:20px; margin:0 0 20px 0; padding:0; }
.message04 .box_left { display:block; width:49%; float:left; background:#ffffff; padding:50px; }
.message04 .box_right02 { display:block; width:49%; float:right; background:#ffffff url(../img/prize.jpg) no-repeat 50% 190px; padding:50px 50px 130px 50px; }
.message04 .box_right { display:block; width:49%; float:right; background:#ffffff; padding:50px; }
.message04 .box_bottom { display:block; width:100%; float:none; clear:both; background:#ffffff; padding:50px; margin-top:20px; }
.message04 .box_bottom p {  } 
.message04 td { font-weight:normal; }

@media screen and (max-width:768px){
.message04 .box_left , .message04 .box_right , .message04 .box_bottom { width:90%; float:none; margin:0 5% 5% 5%; }
.message04 .box_left { padding:20px; }
.message04 .box_right {  background:#ffffff url(../img/prize.jpg) no-repeat 50% 125px; padding:20px 20px 130px 20px; }
.message04 .box_bottom { padding:20px; }

 }

.message04 ul { margin:0; padding:0; }
.message04 li { background:none; font-size:14px; font-weight:normal; padding:0 0 10px 0; margin:10px 0 0 0; border-bottom:1px dotted #cccccc; }
@media screen and (max-width:768px){
.message04 li { background:none; font-size:14px; margin:0; padding:0; }
}

.message04 th , .message04 td { border:none; }
.message04 th { width:10%; background:none; }
.message04 td { width:23%; text-align:left }
.message04 tr:nth-child(even) td { background:#ffffff; }

@media screen and (max-width:768px){
     .message04 th{ width:15%; height:80px; display: block; float:left;  margin:0 0 0px 0;}
     .message04 td{ width:82%; height:80px; display: block; float:right; margin:0 0 0px 0;}
}


/* ------------------------------スタッフ紹介ページ------------------------------　*/
.staff {  }
.staff p { padding-left:16px; padding-right:16px; }
.staff .box { width:33.33%; height:350px; float:left; margin:0 0 30px 0; }
.staff .box img { width:150px; height:150px; margin:0 auto 20px auto; }
.staff .box h4 { width:100%; }
.staff .box h4 span { font-size:12px; }
.staff .box p { width:100%; font-size:14px; padding:0 30px; }

@media screen and (max-width:768px){
.staff .box { width:50%; height:auto; 
 	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap; 
    }/* floatした高さを揃える*/
.staff .box h4 { font-size:14px; }
.staff .box p { font-size:12px; padding:0 10px; height:50px; }
}
@media screen and (max-width:768px){
.staff .box p { height:90px; }
}

/* ------------------------------導入の流れページ------------------------------　*/
.bg_none { background:#ffffff !important; }
.bg_white { background:#ffffff url(../img/flow_arow01.png) no-repeat 50% 0!important; }
.step { background:#f7f7f7 url(../img/flow_arow.png) no-repeat 50% 0; }
.step .content { padding:20px; margin:0 auto; }
.step .content .text{ width:650px; float:left; }
.step .content .img{ width:300px; float:right; }
.step p.number { width:80px; height:auto; font-size:16px;font-weight:bold;text-decoration:none;display:block;text-align:center; margin:3px 10px 5px 0; padding:0;color:#ffffff;background:#f76f1e; border-radius:20px; float:left; }
.step .content h2 { margin:0 0 20px 0; padding:0; text-align:left; }
.step .content h2 span { font-size:16px; }
@media screen and (max-width:768px){
.step .content .text{ width:100%; float:none; }
.step .content .img{ width:100%; float:none; margin-top:20px;}
.step p.number { width:50px; font-size:10px; }
.step .content h2 span { font-size:14px; }
}

/* ------------------------------料金ページ------------------------------　*/
.price_opening { background:#f7f7f7; }
.price_opening p {  }
@media screen and (max-width:768px){
.price_opening .content{ position:relative; padding:30px 10px 30px 10px; }
}

.price .box02 { background:#ffffff; padding:1px 20px 10px 20px; margin:20px 0 30px 0; box-shadow: 0px 3px 15px rgba(0,0,0,0.05); border-radius:10px; }
.price .box02 h3 { margin:20px 0 10px 0; padding:0 0 10px 26px; border-top:none; border-bottom:1px dotted #000000; background:url(../img/icon_point.png) no-repeat 0 2px; }
.price .box02 h3::after { background:none; }
@media screen and (max-width:768px){
    .price .box02 { margin:20px; }
    .price .box02 p { margin:0; }
}

/*******************************
* LINE風の左からの吹き出し
********************************/
.left_face {padding-left:90px; background:url(../img/line-kao.png) no-repeat; }
.left_balloon {position:relative; background:#fff; border:1px solid #cccccc; margin:10px; padding:10px; border-radius:15px; margin-right:20%; width:90%; float:left; }
.left_balloon:after,
.left_balloon:before {right: 100%; top: 30px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.left_balloon:after {border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 7px; margin-top: -7px; }
.left_balloon:before {border-color: rgba(204, 204, 204, 0); border-right-color: #cccccc; border-width: 8px; margin-top: -8px; }




table.pattern01 { width:100%; font-size:14px; margin-top:30px; }
table.pattern01 th, table.pattern01 td  { padding:10px; border:1px solid #ddd; }
table.pattern01 th { width:12%; text-align:center; }
table.pattern01 td:nth-child(odd){ width:16%; }
table.pattern01 span.small { font-size:10px; }

@media only screen and (max-width:480px){
    table.pattern01 { width:92%; }
    table.pattern01 { margin:0 4%; }
    table.pattern01 th { border-top:4px dotted #ff6a00!important; }    
    table.pattern01 th img { margin:0 auto; }    
    table.pattern01 th, table.pattern01 td{ width:100%; display:block; border-top:none; }
    table.pattern01 td:nth-child(odd){ width:100%; text-align:right }
    table.pattern01 tr:first-child th { border-top:1px solid #ddd; }
}


table.pattern02 { width:100%; font-size:14px; margin-top:30px; }
table.pattern02 th, table.pattern02 td  { padding:10px; border:1px solid #ddd; }
table.pattern02 th { width:20%; text-align:left; background:#4d4d4d; color:#ffffff; }
table.pattern02 td:nth-child(odd){ width:26%; }
table.pattern02 span.small { font-size:10px; }

@media only screen and (max-width:480px){
    table.pattern02 { width:92%; }
    table.pattern02 { margin:0 4%; }
    table.pattern02 th img { margin:0 auto; }    
    table.pattern02 th, table.pattern02 td{ width:100%; display:block; border-top:none; }
    table.pattern02 td:nth-child(odd){ width:100%; text-align:right }
    table.pattern02 tr:first-child th { border-top:1px solid #ddd; }
}

.price {  }
.price .box { background:#ffffff; padding:30px; margin:0 0 30px 0; }
.price .box p { margin:0; font-size:14px; }
.price h2 { margin:0; }
.price .description { font-size:14px; }
.price h3 { text-align:left; font-size:22px; margin:0 0 20px 0; padding:0; }
.price h4 { text-align:left; margin:30px 0 10px 0; padding:5px; background:#f7f7f7;}
.price ul { margin:0; padding:0; }
.price ul li { background:none; font-size:16px; font-weight:normal; padding:0 0 10px 0; margin:10px 0 0 0; border-bottom:1px dotted #cccccc; }
.price ul.cose li { padding:0 0 10px 22px; background:url(../img/list.png) no-repeat 0 4px; }
.price p.align_right { font-size:14px; }

@media screen and (max-width:768px){
  .price .box { background:#ffffff; padding:20px; margin:20px 0; }
  .price h3 { font-size:18px; }
  .price h4 { font-size:16px; }
  .price ul.cose { margin:0 20px 30px 20px; }
  .price ul li { font-size:14px; }
  .price p { margin:0 20px; }
}


.price h3 {
  position: relative;
  padding-top: .75em;
  border-top: 1px solid #ccc;
}
.price h3::after {
  position: absolute;
  top: -2px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 3px;
  background-color: #333;
}



.price_end { background:#f7f7f7; }
.price_end .content { position:relative; padding:0 0 0 350px;}
.price_end .content img { position:absolute; left:0; bottom:-70px; }
.price_end h2{ text-align:left }

@media screen and (max-width:768px){
    .price_end .content { padding:0 10px;}
.price_end .content img { position:static; margin:0 auto;}
.price_end h2 { text-align:center; }
.price_end img.sm { border-radius:30px; }

}

/* ------------------------------アクセス・診療時間------------------------------　*/
.access {  }
.access .box_right { width:49%; float:right; }
.station { background:#f7f7f7; padding:20px; }
.station p { font-size:12px; margin:0; }
.station p span { color:#f76e1e }

.access .box_left { width:49%; float:left; }
.access .box_left img{ width:100%; }
.access .box_left p { font-size:12px; margin:10px 10px 0 10px; }
.border { border:#333333 solid 5px;  }

table.simple,table.simple01 { font-size:14px; }
table.simple th , table.simple td { border:none; border-bottom:1px solid #cccccc; background:none; text-align:left; color:#333333; font-weight:normal; padding:15px; vertical-align:top}
table.simple01 { margin-top:20px; }
table.simple01 th , table.simple01 td { border:none; border-bottom:1px dotted #cccccc; background:none; text-align:left; color:#333333; font-weight:normal; padding:15px; }

@media screen and (max-width:768px){
.access .box_right { width:96%; float:none; margin:2%; }
.access .box_left { width:96%; float:none; margin:0 2% 30px 2%; }
table.simple   { width:96%; margin:2%; }
table.simple01 { width:96%; margin:30px 2% 0 2%; }
table.simple01 th , table.simple01 td { padding:10px 0; }
}

.box-flow { position:relative; width:33.33%; height:auto; float:left; background:#ffffff; margin:0; padding:0;}
.box-flow img { width:100%; }
.box-flow p {  bottom:0; left:0; width:100%; height:90px; margin:0; padding:5px 16px; font-size:14px; }
.box-flow p span {  }  
@media screen and (max-width:768px){
.box-flow { width:94%; height:auto; margin:0 3%;  }
.box-flow img { height:auto; display:block; }
}

.access .box { background:#f7f7f7; margin:20px; padding:20px; text-align:center; border:1px solid #cccccc; }
.access .box p { margin:0; padding:0; }




/* ------------------------------プライバシーポリシー------------------------------　*/
.privacy h3 { text-align:left; font-size:20px; margin:50px 0 20px 0; }


/* ------------------------------CTA再設定------------------------------　*/
.cta h2 { margin:0; }

/* ------------------------------お問い合わせ部分------------------------------　*/
.form h2 { margin:0; padding:0;  text-align: center;}
.form p {  }
form { width:100%; padding: 0; margin:0 auto; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.05); background:#ffffff; }
input , textarea{ height:auto; padding:10px; background:#ffffff; color:#333333; border:1px solid #cccccc; border-radius:3px; }
.textForm { width:100%; }
.textForm02 { width:30%; }
.textForm03 { width:100%; height:200px; }
.group { display:block; float:none; clear:both; margin:0; padding:20px 10px 20px 10px; border-bottom:1px dotted #c7c7c7;}
.gLeft { display: block; width:20%; float:left; font-weight:bold; }
.gRight { margin-left:20%; width:80%; }
.hissu{ background:#BC272D; color:#ffffff; margin:0 0 0 5px; padding:3px 7px; font-size:11px; font-weight:bold; border-radius:3px; }
.nini{ background:#777777; color:#ffffff; margin:0 0 0 5px; padding:3px 7px; font-size:11px; font-weight:bold; border-radius:3px; }
.errorBg { background:#ffeeee; }
.errorFont { color:#BC272D; font-weight:bold; margin:0; font-size:10pt; }
@media screen and (max-width:768px){
form { width:95%;}
.textForm02 { width:50%; }
.gLeft { display:block; width:100%; float:none; margin-bottom:10px; }
.gRight { margin-left:0%; width:100%; }
}
.insertLeft,.insertRight { display: table; width: 100%; position: relative; margin-bottom:10px; }
.insertLeft .typeBox { display: table-cell; border-bottom-left-radius: 0; border-top-left-radius: 0; width:100%; }
.insertRight .typeBox { display: table-cell; border-bottom-right-radius: 0; border-top-right-radius: 0; width:100%; }
.InsertBox { background-color: #eee; border: 1px solid #ccc; border-radius: 4px; color: #555; font-size: 14px;
line-height: 1; padding: 6px 12px; text-align: center; display: table-cell; width: 1%; box-sizing: border-box; -moz-box-sizing: border-box; }
.insertLeft .InsertBox { border-right: none; border-bottom-right-radius: 0; border-top-right-radius: 0; }
.insertRight .InsertBox { border-left: none; border-bottom-left-radius: 0; border-top-left-radius: 0; }
button { width:300px;height:60px;font-size:17pt;font-weight:bold;text-decoration:none;display:block;text-align:center;margin:1em auto; padding:8px 0 10px;color:#ffffff;background:#f7931e;border-radius:5px;border:3px double #ffffff;}
button:hover { background:#BC272D; color:#ffffff; text-decoration:none; }
select.select01 { background:#ffffff; border:1px solid #cccccc; border-radius:3px; color:#0C2245; font-size:14px; height:40px; line-height:30px; text-align:left; text-indent:5px; vertical-align:middle; width:70%; }