@charset "utf-8";

/* -----------------------------------------------------------------------
base
----------------------------------------------------------------------- */

html{
font-size:16px;
}


/*color*/
:root {
  --blue: #4B74A2;
  --light_blue: #d7e8f2;
  --bg_blue:#fafaff;
  --pink: #FAE5EE;
}

.blue, i, .logo .sub > span, .open .lg, #service h2{color:var(--blue);}
.lignt_blue{color:var(--light_blue);}
.pink{color:var(--pink)}

body{
font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
/*font-family:"Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing: grayscale;
color:#6e6e73;
background:var(--bg_blue);
}
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td, form, fieldset, figure {
letter-spacing:1px;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
ul li, ol li {
 list-style-type: none;
}
p,li,dt,dd {
 -webkit-text-size-adjust: none;
line-height:1.6rem;
font-size:1rem;
}
strong{
font-weight:bold;
color:#111;
}
a {
text-decoration: none;
color:#fff;
transition-duration:0.3s;
}
img {
 border: 0;
 max-width:100%;
}
img, input, select, textarea {
 vertical-align: middle;
}
*:first-child+html * {
 letter-spacing: 0; /* hasLayout問題を回避 */
}
i{
margin-right:0.4rem;
}



/*font*/

.shuei-l, h2, footer, .logo, #service h2, h3, .open, .info, .clinicName{
font-family: "dnp-shuei-mgothic-std", sans-serif;
font-weight: 400;
font-style: normal;
}
.shuei-b, .open .lg, .logo .sub{
font-family: "dnp-shuei-mgothic-std", sans-serif;
font-weight: 600;
font-style: normal;
}

ul.disc{ 
line-height:1.6;
padding-left:1rem;
}
ul.disc li{ 
list-style-type:disc;
}

div p:last-of-type{margin:0;}
.mb0{margin-bottom:0 !important;}
.mb10{margin-bottom:10px !important;}
.subend{margin:0 0 1rem !important;}
.end, p.end, .serviceInner p.end{margin:0 0 2rem !important;}

.nw{
white-space:nowrap;
}
.dib, .inline{
display:inline-block;
}
.small{
font-size:90%;
line-height:1.4
}



header {
padding:8px 0;
margin: 0;
}

main {
margin:0;

}

section{
padding:3rem 0 3rem;
}

ul.link{
text-align:center;
margin:0 0 40px;
}
ul.link li{
display:inline-block;
}
ul.link li a{
  color: #fff;
  background-color:#CD682A;
  box-sizing:border-box;
  padding: 0;
  margin: 0;
  width: 180px;
  height: 180px;
  line-height: 180px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  margin:0 20px;
  font-weight:bold;
}


h1 {
padding: 0 1rem;
font-size:0.8rem;
text-align:center;
}
h1 span::after{
content:" | ";
}
h2{
text-align:center;
margin: 0 auto 2rem;
position:relative;
width:90%;
font-size:1.5rem;
border:none;
padding-bottom:10px;
}

.logoarea{
padding:3rem 0 0;
}


.logo{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
line-height:1.2;
margin:0 auto 3rem;
width:50%;
max-width:480px;
color:#c5ada0;
}
.logo .sub{
font-size:1rem;
}
.logo .sub > span{
font-size:1.4rem;
}

.logo .lg{
display:block;
margin:0 0 0.4rem;
font-size:3rem;
}

.open{
text-align:center;
margin:0 auto;
font-size:1.1rem;
line-height:1.6;
padding:1.6rem 0;
color:#897a72;
background:#fff;
}
.open .sm{
font-size:1.3rem;
margin:0 0.4rem;
}
.open .lg{
letter-spacing:2px;
font-size:1.8rem;
margin:0.4rem 0;
}
.open:before, .open:after{
display:block;
content:"";
background:#fff;
height:1px;
width:100%;
}
.open:before{
transform:translateY(-0.8rem);
}
.open:after{
transform:translateY(0.8rem);
}

.pty {
width:80%;
max-width:900px;
margin:4rem auto 4rem;
overflow:hidden;
box-sizing:border-box;
font-size:20px;
text-align:center;
border-radius:6px;
-webkit-background-size: 10px 10px;
-moz-background-size: 10px 10px;
background-size: 10px 10px;
background-color: #ee8391;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, #ed97a1), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #ed97a1),
            color-stop(.75, #ed97a1), color-stop(.75, transparent),
            to(transparent));
background-image: -webkit-linear-gradient(-45deg, #ed97a1 25%, transparent 25%,
          transparent 50%, #ed97a1 50%, #ed97a1 75%,
          transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, #ed97a1 25%, transparent 25%,
          transparent 50%, #ed97a1 50%, #ed97a1 75%,
          transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, #ed97a1 25%, transparent 25%,
          transparent 50%, #ed97a1 50%, #ed97a1 75%,
          transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, #ed97a1 25%, transparent 25%,
          transparent 50%, #ed97a1 50%, #ed97a1 75%,
          transparent 75%, transparent);
background-image: linear-gradient(-45deg, #ed97a1 25%, transparent 25%,
          transparent 50%, #ed97a1 50%, #ed97a1 75%,
          transparent 75%, transparent);
}
.pty .inner{
padding:1rem;
margin:1rem;
background:#fff;
box-sizing:border-box;
}
.pty h2{
 margin: 0 auto 20px;
border-bottom:none;
font-size:1.4em;
padding:0.4rem;
color:#595656;
width:100%;
box-sizing: border-box;
}

.pty .date{
font-size:1.2em;
margin-bottom:20px;

}
.pty .date span{
font-size:180%;
color:#96cda1;
}
.pty strong{
color:#6bbb70;
}


.news h2{
margin: 0 auto 1rem;
border-bottom: 2px solid #b07372;
width:100%;
}
.newsInner{
border-radius:0.4rem;
}
.newsInner p{
border-bottom:1px dashed #bebebe;
padding:0.4rem;
}

.greeting {
overflow:hidden;
position:relative;
z-index:2;
padding-bottom:4rem;
background: linear-gradient(to bottom,  var(--bg_blue) 0%,var(--light_blue) 100%);
/*background: url("../img/common/crossword.png")  0 0 transparent;*/
border-bottom:1px solid var(--blue);
}
.greeting h3{
font-size:1.2rem;
margin:0 0 1rem;
text-align:left;
}

.newsInner, .greetingInner, .doctorInfoInner, .serviceInner > div{
width:80%;
max-width:900px;
margin:0 auto 2rem;
overflow:hidden;
background:#fff;
padding:2rem;
border-radius:1rem;
box-sizing:border-box;
font-size:1rem;
box-shadow:2px 4px 16px #ddd;
}
.greetingInner p {
margin: 0 0 10px;
}
.greetingInner p:last-child {
margin:0;
}

.greetingInner .clinicName{
text-align:right;
margin: 0 0 10px;
font-size:1.1rem;
}

.greetingInner .doctorName {
text-align:right;
margin: 0 0 10px;
line-height:1;
font-size:1.3rem;
}
.greetingInner .doctorName span{
font-size:1rem;
}

.greetingInner .greetingmain{
display:flex;
flex-direction:row-reverse;
align-items:center;
}
/*
.greetingInner .greetingmain .txt{
width:60%;
}
.greetingInner .greetingmain picture{
width:36%;
max-width:400px;
display:block;
margin:0 auto;
padding:0 1rem 1rem;
}
*/
.greetingInner .greetingmain .txt p:last-child{
margin:0 0 3rem;
}
.greetingInner .greetingmain.en{
margin:2rem 0 0;
}
.greetingInner .greetingmain.en p{
line-height:1.8;
}

.doctormain.jp{
margin:0 0 4rem;
}

#doctorInfo {
padding: 60px 0 40px;
background: url("../img/common/tiny-squares.png")  0 0 transparent;
}


#doctorInfo .col{
width:90%;
vertical-align:top;
display:inline-block;
text-align:left;
padding:1%;
box-sizing: border-box;
}



#doctorInfo .col span.nw{
font-weight:normal;
white-space: nowrap;
display:inline-block;
}

.doctorInfoInner{
margin:0 auto;
text-align:center;
}

.doctorInfoInner h2{
font-size:1.4rem;
border-radius:4rem;
padding:1.2rem 1.2rem;
display:inline-block;
width:auto;
line-height:1.2;
position: relative;
}


.profileInner{
display:flex;
flex-direction:column;
justify-content:space-around;
text-align:left;
}

.profile {
overflow: hidden;
margin: 0;
padding:0.6rem;
display:flex;
flex-direction:column;
width:100%;
}

.profilecol{
padding:0 0.4rem;
width:100%;
display:flex;
flex-direction:column;
}
.profilecol p{
line-height:1.8;
margin:0 0 0.2rem;
}
.profilecol p span + span{
margin-left:0.4rem;
}

.profilecol p + p{
margin:0.8rem 0 0.2rem;
}

.profilecol.double{
flex-direction:row;
}
.profilecol.double .col{
margin:0;
padding:0.4rem;
width:50%;
}
.profilecol .col:last-of-type{
margin:0;
}

.profile img{
float:left;
display:inline-block;
width:30%;
margin:0 4% 0 0;
max-width:300px;
}

.profile ul{
box-sizing:border-box;
display:inline-block;
width:100%;
}

.profile ul li span.date{
min-width:70px;
}
.profile ul li span.inline{
margin-right:0.4rem;
}

#service {
height:100%;
position:relative;
text-align:center;
background:#fff;
padding:3rem 0 0;
background-size:cover;
}

#service h2{
margin:0 auto 2rem;
line-height:1.6;
}

.serviceInner{
text-align:left;
padding:3rem 0;
background: url("../img/common/header-bg.jpg") 50% 0 transparent;
}
.serviceInner > div{
margin:0 auto;
}
.serviceInner h3{
margin:0 0 1rem;
font-size:1.2rem;
}
.serviceInner p{
margin:0 0 0.4rem;
display:flex;
align-items:center;
}
.serviceInner p.mb0 + p{
margin-left:2rem;
}
.serviceTopInner p span:nth-of-type(2), .serviceInner p span:nth-of-type(2){
width:calc(100% - 2rem);
}

span.circle{
flex-shrink: 0;
border-radius:50%;
display:inline-flex;
justify-content:center;
align-items:center;
margin:0 0.4rem 0 0;
width:1.8rem;
height:1.8rem;
line-height:1.8rem;
font-size:1.2rem;
background: var(--blue);
color:#fff;
}
span.circle.inverse{
background:#fff;
color:#898a8d;
border:1px solid #898a8d;
}

.policy{
background:#f9f9f9;
border:1px solid #bebebe;
border-radius:0.2rem;
padding:1rem;
margin:0 0 2rem;
}
.policy ul{
margin:0;
}

#clinicInformation, #maparea{
background: url("../img/common/crossword.png")  0 0 transparent;
}

.clinicInformationInner {
text-align:center;
overflow:hidden;
}

.clinicInformationInner .clinicInformationCol{
display:flex;
flex-wrap:wrap;
width:100%;
max-width:900px;
margin:0 auto;
justify-content:center;
}
.clinicInformationInner .clinicInformationCol > div{
background:rgba(255,255,255,0.6);
border-radius:0.4rem;
padding:0.6rem;
margin:0.4rem;
box-sizing:border-box;
display:flex;
flex-direction:column;
width:calc(100%/2 - 0.8rem);
border:1px solid #ddd;
}
.clinicInformationInner .clinicInformationCol > div p{
margin:1rem 0;
text-align:center;
}

.clinicInformationInner .clinicInformationCol > div .info{
font-size:1.3rem;
margin:0 0 0.2rem;
}
.clinicInformationInner .clinicInformationCol > div .info.schedule{
margin:0 0 1rem;
}
.clinicInformationInner .clinicInformationCol > div .subject{
margin:0 0 0.4rem;
}


#clinicInformation ul li .resv{
margin:0 0 1rem;
padding:0.6rem;
display:block;
background:#93cfc8;
color:#fff;
border-radius:6px;
}
#clinicInformation ul li .resv:last-of-type{
margin:0;
}

#clinicInformation ul li .resv svg{
color:#fff;
}

#clinicInformation ul li p.note {
font-size:90%;
line-height: 1.5em;
text-align:left;
}
/*
#clinicInformation ul li.address{
font-size:100%;
width:98%;
}*/f

#clinicInformation .hour {
text-align:left;
}
#clinicInformation .qr {
width:50%;
max-width:160px;
}


dl{
display:flex;
flex-wrap:wrap;
}
dl dt,dl dd{
display:flex;
align-items:center;
justify-content:center;
padding:0.4rem;
margin:0 0 0.2rem;
}
dl dt{
width:36%;
background:var(--light_blue);
}
dl dd{
width:64%;
}


table{
margin:0 auto;
width:100%;
border-collapse: separate;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
border-spacing: 0;
font-size:1.2rem;
background:#f9f9f9;
}

table th{
padding:6px;
background:#fafafa;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
line-height:1.6;
font-weight:bold;
vertical-align:middle;
text-align:left;
white-space:nowrap;
}

table td{
padding:6px;
background:#FFFFFF;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
line-height:1.6;
text-align:left;
vertical-align:middle;
}
table td span{
display:inline-block;
}
table td span +span{
margin-left:0.3rem;
}

#clinicInformation caption {
padding:5px 0 0;
caption-side:top;
text-align:left;
font-size:120%;
}
#clinicInformation h3{
font-size:1.4rem;
margin:0 0 10px;
}

.mapInner {
width:80%;
max-width:900px;
text-align:center;
overflow:hidden;
margin: 0 auto;
font-size:120%;
}
.mapInner h3, .mapInner svg{

}
.mapInner h3{
margin:0 0 2rem;
}

.mapInner p{
margin:0;
max-width:900px;
}
p.transit{
display:flex;
margin:0 0 0.4rem;
}
p.transit i{
margin:4px 4px 0 0;
}

.mapinfo {
padding:40px 0 40px;
text-align:center;
font-size: 120%;
}
.mapinfo img{
border-radius:8px;
}

.mapinfo .mapInner{
width:80%;
margin:0 auto;
}
.mapinfo .mapInner p{
text-align:left;
}

div#map{
border:1px solid #c0c0c0;
border-radius:6px;
height:400px;
width:100%;
max-width:900px;
}

.mapcol{
display:flex;
flex-direction:column;
}

p.mapillust{
max-width:400px;
margin: 0 auto;
}
.mapcol .mapinfo{
padding:2rem;
text-align:left;
}
.mapcol .mapinfo p.address{
margin:0 0 2rem;
}

footer {
text-align:center;
font-size:0.8em;
padding:20px 0;
}

.backtotop i{
margin:0;
}
.backtotop a{
/*background:rgba(255,255,255,0.3);*/
border-radius:8px;
font-size:14px;
padding:4px 6px;
z-index:999;
text-align:center;
line-height:1.2;
position:fixed;
bottom:20px;
right:20px;
color:#7d7c79;
}


.oblique {
font-style:oblique;
}

.recruit{
margin:0 0 50px;
font-size:1.2em;
text-align:center;
}
.recruit p{
margin:0 0 10px;
padding:0 10px;
}
.recruit p.btn a{
box-sizing:border-box;
padding:10px;
width:50%;
min-width:310px;
display:inline-block;
background:#f7caf4;
border-radius:4px;
border:2px solid #f98be5;
}