@charset "utf-8";

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

html{
font-size:16px;
}


/*color*/

:root {
  /* Accent */
  --accent:        #ee7800;
  --accent-dark:   #c46300;
  --accent-light:  #ff9933;
  --accent-pale:   #ffecd6;

  /* Warm neutrals */
  --warm-white:       #f7f3ef;
  --warm-gray-light:  #e8e0d8;
  --warm-gray:        #c4b8ac;
  --warm-gray-dark:   #8a7d72;
  --warm-dark:        #3d3028;
  --warm-black:       #1e1710;

  /* Text */
  --text-on-accent:   #ffffff;
  --text-base:     #3d3028;
  --text-primary:     #5a4c43;
  --text-secondary:   #8a7d72;
  --text-muted:       #c4b8ac;

  /* Background */
  --bg-page:          #f7f3ef;
  --bg-surface:       #ffffff;
  --bg-subtle:        #ede7e0;

  /* Border */
  --border:           #ddd5cb;
}

.orange, i, .logo .sub > span, .open .lg, #service h2{color:var(--accent);}

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:var(--text-primary);
}
*{
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*/

.tsukuardgothic, h2, footer, .logo, #service h2, h3, .open, .info, .doctorName, .clinicName, .open .lg, .logo .sub{
font-family: "fot-tsukuardgothic-std", sans-serif;
font-weight: 700;
font-style: normal;
letter-spacing:0;
}
.tsukuardgothic-light, .pty, .clinicName{
font-family: "fot-tsukuardgothic-std", sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing:0;
}


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 0.2rem;
font-size:0.8rem;
text-align:center;
color:var(--text-secondary);
}
h1 span::after{
content:" | ";
}
h2{
text-align:center;
margin: 0 auto 3rem;
position:relative;
width:90%;
font-size:1.6rem;
border:none;
}

.logoarea{
padding:3rem 0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}


.logo{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
line-height:1.2;
margin:0 auto 3rem;
width:70%;
max-width:700px;
color:var(--accent);
}
.logo p{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.logo .sub{
font-size:1rem;
}
.logo .sub > span{
font-size:1.4rem;
}

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

.open{
text-align:center;
margin:0 auto;
font-size:1.1rem;
line-height:1.6;
padding: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 {
display:block;
max-width:900px;
margin:2rem auto;
overflow:hidden;
line-height:1.4;
box-sizing:border-box;
font-size:1.4rem;
text-align:center;
border-radius:2rem;
padding:0.4rem 0.8rem;
background:var(--accent-light);
color:#fff;
/*background-size: auto auto;
background-color: rgba(248, 231, 238, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(247, 235, 240, 1) 4px, rgba(247, 235, 240, 1) 8px );*/
}

.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:var(--bg-page);
/*background: linear-gradient(to bottom,  var(--bg_blue) 0%,var(--light_blue) 100%);*/
border-bottom:1px solid var(--blue);
}
.greeting h3{
font-size:1.2rem;
margin:0 0 1rem;
text-align:left;
}
.greeting h3,.doctorInfoInner h2{
color:var(--text-secondary);
}

.newsInner, .greetingInner, .doctorInfoInner{
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:var(--bg-surface);
padding:0 0;
background-size:cover;
}

#service h2{
width:100%;
padding:2rem 1rem 2rem;
margin:0;
line-height:1.6;
background:#fff;
color:var(--accent);
}

.serviceInner{
text-align:left;
padding:6rem 0;
background: url("../img/common/header-bg.jpg") 50% 50%  / cover transparent;
border-top:1px solid var(--accent-pale);
border-bottom:1px solid var(--accent-pale);
}
.serviceInner > div{
width: 90%;
max-width: 940px;
margin:0 auto;
display:flex;
justify-content:space-around;
flex-wrap:wrap;
}
.serviceInner > div > div{
display:flex;
flex-direction:column;
padding:1rem;
margin:0.4rem;
width:calc(100%/3 - 0.8rem);
background:rgba(255,255,255,0.9);
border-radius:0.4rem;
border:1px solid var(--warm-gray-light);
}
.serviceInner h3{
margin:0 0 1rem;
padding:0 0 0.4rem;
color:var(--text-primary);
border-bottom:1px solid var(--accent-dark);
font-size:1.2rem;
line-height:1.5;
height:4rem;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

.serviceInner p{
color:var(--text-primary);
margin:0;
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, footer{
background:var(--bg-page);
}


.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;
position:relative;
}
.clinicInformationInner .clinicInformationCol > div p{
margin:1rem 0;
text-align:center;
}

.clinicInformationInner .clinicInformationCol > div .info{
font-size:1.3rem;
margin:0 0 0.2rem;
color:var(--text-secondary);
}
.clinicInformationInner .clinicInformationCol > div .info.schedule{
margin:0 0 1rem;
}
.clinicInformationInner .clinicInformationCol > div .subject{
margin:0 0 0.4rem;
}
.clinicInformationInner .clinicInformationCol > div dl{

}
.clinicInformationInner .clinicInformationCol > div.notready dl{
-ms-filter: blur(6px);
  filter: blur(6px);
}
.clinicInformationInner .clinicInformationCol > div.notready:after{
content:"準備中です";
display:flex;
justify-content:center;
align-items:center;
text-align:center;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
}


#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(--warm-gray-light);
}
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;
}