@charset "UTF-8";

/* ------------------------------------------------------------------
common
------------------------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure {
margin:0px;
padding:0px;
border:0px;
outline:0px;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
box-sizing:border-box;
}
ol, ul {list-style:none;}
ul li{position: relative;}

html{font-size:16px;}

body{
color:#818d93;
text-align: center;
font-size:1rem;
font-family:"Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
-webkit-text-size-adjust: 100%;
box-sizing:border-box;
letter-spacing:1px;
}

/* font set */

ul#gNav li a, .link, .ttl, .icon, .catch, #navToggle, .btnlink, div#header .block p a, .sub-menu, .flogo, .btn a, .contact p a, .circle, open, h1,h2,h3,h4,h5, .subttl, ul.cPhoto li span, .font, #service .linkarea a{
font-family: maru-maru-gothic-bsr-stdn, sans-serif;
font-weight: 400;
font-style: normal;
}

#content-top h2:before{
font-family: "the-seasons", sans-serif;
font-weight: 300;
font-style: normal;
}


a{color:#818d93; text-decoration:none;}
a:hover{opacity:0.8;}
a:active{color:#818d93; text-decoration:none;}

p{
line-height:1.8;
letter-spacing:1px;
margin:0 0 1.6rem 0;
text-align:justify;
word-break: break-all;
}

img{
border: 0px;
vertical-align: bottom;
max-width:100%;
}

.arrow::before, .btn a::after, .fa_icon::before, .fa_icon::after, .btnlink::before,#service ul.submenu li a:after, #first ul.submenu li a:after, .trigger a:after {
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}

.blue{color:#57c1d7;}
.light_blue{color:#abe0eb;}
.blue_gray{color:#818d93;}

.red{color:#C93329;}
.red-border{
border:4px solid #C93329;
display:block;
padding:0.4rem;
}

.left{text-align:left;}
.right{text-align:right;}
.center{text-align:center !important;}
.line{display:inline-block;}
.nobr{white-space:nowrap;}
.large{font-size:110%;}
.xlarge{font-size:120%;}
.xxlarge{font-size:130%;}
.small{font-size:90%;}
.xsmall{font-size:80%;}
.caution{color:#05AFB6}
.underline{text-decoration: underline;}

ul {
display: inline-block;
box-sizing:border-box;
width: 100%;
margin:0 0 2rem 0;
line-height:1.8;
}
li{
line-height:1.8;
letter-spacing: 2px;
text-align:justify;
margin:0 0 0.4rem;
}

ul.indent{margin:0 0 1rem 0.6rem;}
ul.dot li{
padding-left:1rem;
}
ul.dot li:before{
border-radius: 50%;
width: 6px;
height: 6px;
display: block;
position: absolute;
left: 0; 
top:calc(0.5rem + 3px);
content: "";
background:#57c1d7;
}
ul.dot.align_c li:before{
top:calc(50% - 3px);
}

ul.dot.red_dot li:before{
background:#ab6768;
}

ul.disc{
padding:0 0 0 1rem;
}
ul.disc li{
list-style-type:disc;
margin-bottom:4px;
text-align:left;
}

strong{font-weight:bold;}
.bottom0{margin-bottom:0 !important;}
.bottomhalf{margin-bottom:0.5rem !important;}
.bottom1rm{margin-bottom:1rem !important;}
.bottom2rm{margin-bottom:2rem !important;}
.bottom4rm{margin-bottom:4rem !important;}
.top1rm{margin-top:1rem !important;}
.top2rm{margin-top:2rem !important;}
.top4rm{margin-top:4rem !important;}
.sub{margin-bottom:1.4rem !important;}
.end{margin-bottom:3rem !important;}
.nopoint{pointer-events: none;}
i{
margin-right:0.4rem;
color:#57c1d7;
vertical-align:baseline;
}
.breadcrumb i{
color:#818d93 !important;
}

.btnlink a{
padding:10px;
background:rgba(255,255,255,0.7);
border-radius:8px;
border:2px solid #05AFB6;
display:block;
}
.btn a{
display:inline-flex;
align-items:center;
justify-content:center;
text-align:center;
border-radius:4rem;
padding:0.6rem;
margin:10px 0;
box-sizing:border-box;
width:40%;
max-width:500px;
}
.btn a, .btn i{
color:#fff;
}
btn i{
margin:0 0 0 0.4rem;
}
.monshin.btn a{
background:#57c1d7;
}
.monshin.btn a i{
margin:0 0.4rem 0 0;
}

.telink{pointer-events:none;}

h1 span{
display:inline-block;
letter-spacing:0;
}
h1 span:before{
display:inline-block;
content:"-";
}

h2{
font-size:1.5rem;
margin:0 0 2rem;
line-height:1.6;
color:#818d93;
text-align:center;
}
main h2{
font-size:1.6rem;
margin:2rem 0 2rem;
padding:1rem 0;
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
position: relative;
}
main h2:after {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: inline-block;
content: "";
background: #abe0eb;
width: 60px;
height: 2px;
}
main h2.clear{
justify-content:flex-start;
}
main h2.clear:after {
content:none;
}
h3{
font-size:1.4rem;
margin:0 0 1.6rem 0;
}
main h3{
text-align:left;
margin:1.4rem 0 1.4rem;
}

h4{
font-size:1.1rem;
margin:0 0 0.6rem 0;
text-align:left;
}

h5{
font-size:1rem;
margin:0 0 14px 0;
text-align:left;
}


div#wrapper{
width:100%;
margin:0 auto;
background-size:contain;
background:#fff;
}

div#content-top, div.content{
overflow:hidden;
margin:0 auto;
}
div#content-top .btn{
text-align:center;
margin:0;
width: 100%;
}

#content-top section{
display: block;
box-sizing:border-box;
padding:4rem 1rem 4rem;
}

.inner{
max-width:1100px;
margin:0 auto;
}



#content-top div p:last-child, .content div p:last-child{
margin:0;
}

.nav{
margin:2rem 0 2rem;
}
.nav ul{
text-align:center;
}
.nav ul li{
display:inline-block;
vertical-align:top;
border:2px solid #05afb6;
background:rgba(255,255,255,0.7);
border-radius:6px;
margin:1%;
position:relative;
}
.nav ul li a{
font-size:1rem;
color:#05afb6;
box-sizing:border-box;
display:table-cell;
vertical-align:middle;
padding:1rem 0 1rem;
letter-spacing:0;
}
.nav ul li a span{
padding:0.6rem 1rem;
}
.nav ul li a i{
margin:0 0 0 0.6rem;
}

.overlay{
display:none;
background:rgba(255,255,255,0.8);
height: 100%;
width: 100%;
z-index:10;
position:fixed;
top:60px;
}
.openNav .overlay{
display:block;
}

ul.breadcrumb{
text-align:right;
font-size:0.8rem;
margin: 0 0 3rem;
}
ul.breadcrumb li, ul.breadcrumb li a {
display:inline-flex;
align-items:center;
color:#999;
}

ol{
counter-reset: item;
list-style-type: none;
padding-left: 0;
}
ol li{
margin:0 0 0.6rem;
text-align:left;
display:flex;
}
ol li:before {
flex-shrink:0;
display:inline-flex;
justify-content:center;
align-items:center;
counter-increment: item;
content: counter(item);
border-radius:50%;
background:#abe0eb;
color:#fff;
width:30px;
height:30px;
margin:0 0.4rem 0 0;
}

.content main{
background:#fff;
margin:0 auto 1rem;
max-width:1140px;
border-radius:0 0 0.6rem 0.6rem
}
.content i{
line-height:1.8;
}

.main-header{
padding:3rem 0;
background: url("../img/common/content-bg-tp.webp") 50% 20% / cover;
height:20vh;
}
main .inner{
margin:0 auto;
padding:3rem 1rem 3rem;
}
main .inner p{
margin:0 0 1rem;
}
main p.ttl, main h1{
margin:0;
padding:3rem 0;
font-size:1.8rem;
text-align:center;
}
main .telink{
color:#a885ba;
text-decoration: underline;
}

.circle{
display:inline-block;
vertical-align:bottom;
text-align:center;
height: 40px;
line-height: 40px;
width: 40px;
box-sizing:border-box;
background:#abe0eb;
border-radius:50%;
padding:0;
color:#fff;
margin:0 10px 0 0;
}


/* ------------------------------------------------------------------
header
------------------------------------------------------------------ */

div#header{
width:100%;
max-width:1200px;
height:620px;
box-sizing:border-box;
margin:0 auto;
position:relative;
background:#fff;
}


.content-page div#header{
height:280px;
}

div#header .bgimg{
position:absolute;
left:0;
opacity:0;
width:100%;
height:480px;
animation:bgfade 18s infinite;
border-radius:0 1rem 0 1rem;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}

div#header .src01{

}
div#header .src02{
animation-delay  : 6s;
}
div#header .src03{
animation-delay  : 12s;
}
div#header .src04{
animation-delay  : 18s;
}
div#header .src05{
animation-delay  : 24s;
}


@keyframes bgfade { 
   0% { opacity: 0; }
   11% { opacity: 1; } /* 2 / 18 */
  33% { opacity: 1; } /* 6 / 18 */
  44% { opacity: 0; } /* 8 / 18 */
 100% { opacity: 0; }
}

.content-page div#header .bgimg{
animation:none;
}

div#header .block{
padding:2rem 1rem 0;
box-sizing:border-box;
width:100%;
display:flex;
align-items:center;
max-height:300px;
margin:0 auto;
position:relative;
}

div#header .infohead{
width:30%;
display:flex;
justify-content:space-between;
align-items:center;
}

div#header .logo{
box-sizing:border-box;
width:100%;
max-width:360px;
}
div#header .logo a{
box-sizing:border-box;
margin:0 0 0;
display: flex;
justify-content: center;
align-items:center;
}
div#header .logo a img{
box-sizing:border-box;
margin: 0 0 0.3vw;
}
div#header .logo a img.single{
display:none;
}

div#header .logo a:hover{
opacity:1;
}

div#header .block .info{
position:absolute;
top:0;
right:0;
display:flex;
margin:0;
padding:0;
z-index:10000;
}
div#header .block .info p{
padding:0 0.2rem;
vertical-align:top;
display:inline-block;
margin:0;
box-sizing:border-box;
max-width:300px;
font-size:1rem;
letter-spacing:0;
position:relative;
}

div#header .block .info p a, #info .contact p a{
text-align:center;
line-height:1.4;
display: flex;
justify-content: center;
align-items: center;
padding:0.8rem 2rem 0.8rem;
box-sizing:border-box;
border:1px solid #818d93;
border-top:none;
}
div#header .block .info p a i, #info .contact p a i{
color:#57c1d7;
}
div#header .block .info p a:hover i{
color:#abe0eb;
}

div#header .block .info p a .sp{
display:none;
}

.instagram i{
margin:0;
}

div#header .catch{
text-align:center;
display:block;
position:absolute;
width:100%;
bottom:28%;
font-size:1.6rem;
color:#fff;
}
div#header .catch strong{
display:block;
font-size:110%;
margin:0 0 0.4rem;
}
div#header .catch span{
font-size:120%;
color:#57c1d7;
}
.fadeIn{
animation-name:fadeInObj;
animation-duration:2.8s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeInObj{
  from {
opacity: 0;
  }
  to {
opacity: 1;
  }
}
.shadow{
padding: 10px;
color: #CCC;
font-size: 100px;
text-shadow:
2px 2px 2px rgba(255,255,255,0.4), -2px -2px 2px rgba(255,255,255,0.4),
   -2px 2px 2px rgba(255,255,255,0.4),  2px -2px 2px rgba(255,255,255,0.4),
2px 0px 2px rgba(255,255,255,0.4), -2px -0px 2px rgba(255,255,255,0.4),
0px 2px 2px rgba(255,255,255,0.4),  0px -2px 2px rgba(255,255,255,0.4);
margin: 0;
}
.shadow01{
padding: 10px;
text-shadow:
2px 2px 2px rgba(255,255,255,0.6), -2px -2px 2px rgba(255,255,255,0.6),
   -2px 2px 2px rgba(255,255,255,0.6),  2px -2px 2px rgba(255,255,255,0.6),
2px 0px 2px rgba(255,255,255,0.6), -2px -0px 2px rgba(255,255,255,0.6),
0px 2px 2px rgba(255,255,255,0.6),  0px -2px 2px rgba(255,255,255,0.6);
margin: 0;
}

div#header .open{
position:absolute;
width:100%;
bottom:40px;
}
div#header .open{
text-align:center;
margin:0 auto;
font-size:1.1rem;
line-height:1.6;
letter-spacing:4px;
padding:1rem 0;
background-size: auto auto;
background-color: rgba(238, 251, 253, 0.8);
background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(218, 241, 246, 0.8) 4px, rgba(218, 241, 246, 0.8) 8px );
}
div#header .open .sm{font-size:1.3rem;}
div#header .open .lg{
letter-spacing:2px;
font-size:1.7rem;
margin:0.4rem 0;
color:#57c1d7;
}

div#header.fixed{
padding-top:120px;
}
div#header.fixed .block{
position:fixed;
align-items:center;
z-index:200;
background:rgba(255,255,255,0.9);
padding:0;
max-width:none;
left:0;
top:0;
width:100%;
height:68px;
flex-direction:row;
border-bottom:1px solid rgba(146,120,100,0.4);
}
div#header.fixed .block .infohead{
width:20%;
height: 100%;
align-items:center;
}
div#header.fixed .block nav{
width:calc(80% - 150px);
max-width:1100px;
}


div#header.fixed .block .info{
top:4px;
right:4px;
justify-content:center;
}
.close{display:none}
div#header.fixed .block .info .close{
z-index:300;
cursor: pointer;
display:flex;
justify-content:center;
align-items:center;
width:30px;
height:30px;
position:absolute;
top:-14px;
right:calc(50% - 15px);
background:#fff;
border:1px solid #9bc948;
border-radius:15px;
}
div#header.fixed .block .info .close i{
margin:0;
color:#847f7d;
}
div#header.fixed .block .info.off{
display:none;
}

div#header.fixed .block .info p{
padding:0;
opacity:0.9;
margin:0;
max-width:none;
position:relative;
width:50px;
}
div#header.fixed .block .info p span{display:none;}

div#header.fixed .block .info p + p:after{
content:"";
position:absolute;
left:0;
top:20%;
width:1px;
height:60%;
background:#818d93;
background:rgba(129,141,147,0.4);
}

div#header.fixed .block .info p i{
margin:0 0 0.2rem;
}
div#header.fixed .block .info p a{
height:60px;
border:none;
border-radius:0;
padding:0 0.6vw;
width:100%;
flex-direction: column;
}

div#header.fixed .block .nav{
width:calc(100% - 80px);
}

.block nav{
width:70%;
display:block;
}
ul#gNav {
display:flex;
justify-content:center;
margin:0 auto;
padding:2rem 0 0;
text-align:center;
width:100%;
position:relative;
left:0;
bottom:0;
}

ul#gNav li {
display:inline-block;
text-align:center;
box-sizing:border-box;
margin:0 0.8vw;
vertical-align:top;
position:relative;
line-height:1.2;
padding:0
}

ul#gNav li a{
letter-spacing:0;
font-size:1.1rem;
padding:1rem 0;
display:block;
text-align:center;
position:relative;
box-sizing:border-box;
}
ul#gNav li a:hover{
color:#57c1d7;
}

ul#gNav li.parent a .arrow{
display:inline-block;
margin-left:6px;
width:1rem;
height:1rem;
color:#57c1d7;
}
ul#gNav li.parent a .arrow::after{
font: var(--fa-font-light);
content: "\f078";
}
ul#gNav li ul.child{
position:absolute;
width:200px;
top:40px;
left:calc(50% - 100px);
z-index:1000;
visibility: hidden;
opacity: 0;
display:flex;
flex-direction:column;
margin:0;
padding:0;
box-sizing:border-box;
}
ul#gNav li ul.child li{
display:inline-flex;
align-items:center;
justify-content:center;
margin:0;
}
ul#gNav li ul.child li a{
padding:0.6rem 0.4rem;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
width:100%;
height:50px;
font-size:1rem;
}
ul#gNav li ul.child li a:hover{opacity:1;}

ul#gNav li ul.child li i{
margin:0 0 0 0.2rem;
}
ul#gNav li:hover ul.child{
visibility: visible;
opacity: 1;
}
/*ul#gNav li ul.child{
visibility: visible;
opacity: 1;
}*/
ul#gNav ul.child li a:after, ul#gNav ul.child li + li a:after{
border:none;
}

.fixed ul#gNav{
margin:0;
padding:0.4rem 0;
position: relative;
background:none;
}

#navToggle {
display:none;
}
#navToggle div {
border-radius:1px;
height:34px;
}
#navToggle span {
display:block;
position:absolute;
width:50%;
height:2px;
margin:0 25% 0;
border-radius: 4px;
background-color:#fff;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out}
#navToggle span:nth-child(1) {top:10px}
#navToggle span:nth-child(2) {top:20px}
#navToggle span:nth-child(3) {top:30px}


/* ------------------------------------------------------------------
footer
------------------------------------------------------------------ */

div#footer{
padding:3rem 0;
margin: 0 auto;
position:relative;
overflow:hidden;
background:rgba(171,224,235,0.6);
display:flex;
flex-wrap:wrap;
}

div#footer > div{
width:50%;
}

div#footer #fNav{
display:flex;
}
div#footer #fNav ul {
overflow:hidden;
margin:0 0 20px 0;
letter-spacing:2px;
display:flex;
flex-direction:column;
}
div#footer #fNav ul li {
display:inline-block;
margin: 0 0.4rem 0.6rem;
padding:0;
box-sizing: border-box;
}
div#footer #fNav ul li a{
display:block;
}
div#footer #fNav ul li a.fa_icon{
display:inline-block;
margin-left:6px;
}
div#footer #fNav ul li a.fa_icon::before{
font: var(--fa-font-light);
content: "\f054";
width:1rem;
height:1rem;
color:#57c1d7;
}
div#footer #fNav ul li ul.submenu{
margin:0.6rem 0 0;
}
div#footer #fNav ul li ul.submenu li{
width:100%;
margin:0 0 0.6rem;
}
div#footer #fNav ul li ul.submenu li a::before{
content: "-";
display: inline-block;
color:#57c1d7;
}


div#footer p.copy{
text-align: center;
font-size:80%;
margin:0 1rem;
width:100%;
}

div#footer div#fInfo{
clear: both;
text-align:center;
margin:0 0 30px;
}
div#footer div#fInfo img{
border-radius:6px;
}

div#footer div#fInfo p, div#footer div#fInfo a{
display:inline-block;
vertical-align:middle;
text-align:center;
width:100%;
letter-spacing: 1px;
margin:10px 0;
}
div#footer div#fInfo .flogo{
font-size:1.4em;
}
div#footer div#fInfo .flogo img{
width:80%;
max-width:300px;
}
div#footer div#fInfo .insta{
text-align:center;
}
div#footer div#fInfo .insta a{
margin:0;
padding:8px;
border-radius:50%;
display:inline-flex;
justify-content:center;
width:auto;
background:#fff;
}
div#footer div#fInfo .insta a i{
margin:0;
}

div#footer div#fInfo a.telink{
margin:0.6rem 0 0.6rem;
line-height:1;
display: inline-flex;
align-items: center;
justify-content: center;
}

section#info{
padding:0 1rem;
}
section#info .inner{
display:flex;
justify-content:center;
max-width:1000px;
font-size:1rem;
margin:0 auto 3rem;
width:100%;
text-align:center;
overflow:hidden;
box-sizing:border-box;
position:relative;
}
section#info .inner:after{
position:absolute;
top:0;
left:calc(50% + 1px);
display:block;
content:"";
width:1px;
height:100%;
background:#818d93;
}

section#info .inner > div{
display:flex;
flex-direction:column;
align-items:center;
/*max-width:600px;
width:100%;*/
max-width:480px;
width:calc(100% - 1.2rem);
border-radius:0.2rem;
margin:0.2rem;
overflow: hidden;
text-align:left;
vertical-align:top;
box-sizing:border-box;
padding:1rem;
background:rgba(255,255,255,0.8);
background:#fff;
}




section#info >div p{
width:100%;
text-align:center;
margin:0 0 0.4rem;
}
section#info >div p.ttl{
font-size:1.4rem;
margin:0 0 1rem;
position:relative;
}

#info .contact p a{
border: 1px solid #818d93;
}
#info .contact p a i{
line-height:1.4;
}


section#info > div.calendar .calnotice, .content-cal .calnotice{
text-align:justify;
letter-spacing:0;
margin:0 0 0.2rem;
line-height:1.6;
display:block;
width:100%;
}
section#info > div + div{
border-left:2px dashed #E0EEE1;
}

section#info >div.mapcol{
max-width:calc(960px + 2% );
width:100%;
margin-bottom:0;
}

section#info >div p.transit{
text-align:left;
}

/*
div#content-top .mapcol{
display:none;
}*/

#info .contact p +p{
margin:1rem 0 0;
}
#info .info p a{
display:flex;
align-items:center;
justify-content:center;
border-radius: 6px;
padding:0.6rem;
box-sizing:border-box;
}


section#accessinfo{
text-align:center;
}
section#accessinfo .inner{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
max-width:900px;
padding:0 1rem;
}
section#accessinfo .inner p{
margin:0 0 0.4rem;
}
section#accessinfo .inner p:last-child{
margin:0;
}
section#accessinfo .transport{
width:100%;
border-radius:0 0 0.6rem 0.6rem;
}

section#accessinfo .transport i:before{
display: block;
width:1rem;
}


#map{
border:1px solid #c0c0c0;
width:100%;
height:44vh;
margin: 0 auto 1rem;
overflow: hidden;
}
#map iframe{
border-radius:0.6rem;
width: 100%;
height:74vh;
margin-top: -17vh;
}

.accessInfo{
padding:0.6rem;
box-sizing:border-box;
margin:0;
}
.accessInfo p{
margin:0 0 10px;
text-align:left;
}
.accessInfo p i{
color:#70AA73;
}

p.backtotop a{
display:none;
transition: all .5s ease;
bottom:1rem;
right: 1rem;
overflow: hidden;
position: fixed;
margin:0;
font-size:1rem;
}
p.backtotop.on a{
display:flex;
justify-content:center;
align-items:center;
opacity:0.5;
}
p.backtotop a:hover{
opacity:1;
}
p.backtotop a i{
margin:6px;
color:#818d93;
}


/* ------------------------------------------------------------------
home
 ------------------------------------------------------------------ */

#news .allinner{
display:flex;
align-items:flex-start;
max-width:1100px;
margin:0 auto;
}

.info-area{
margin:0 0 1rem;
width:100%;
display:flex;
justify-content:center;
}
.info-area picture{
display:block;
width:40%;
max-width:200px;
}


#news p.cal-top{
margin:1rem auto;
width:40%;
background:#fff;
padding:0.6rem;
border-radius:1rem;
border:1px solid #abe0eb;
}

#news h2{
display:block;
width:20%;
max-width:1100px;
font-size:1.2rem;
}
#content-top #news h2:before{
font-size:2rem;
}

#news .inner{
/*width:60%;*/
width:100%;
text-align:left;
display:flex;
flex-direction:column;
align-items:center;
}
#news .inner ul{
width:80%;
max-height:30vh;
margin:0 auto;
border-radius:2px;
display:flex;
flex-wrap:wrap;
background:rgba(255,255,255,0.8);
}
#news .inner ul li{
width:100%;
}
#news .inner ul a{
display: flex;
border-bottom: 1px solid #dfdfdf;
padding:1rem 0;
}
#news .inner ul a time{
margin-right:6px;
color:#abe0eb;
}
#news .inner ul.newslist{
max-height:none;
}
#news .inner ul.newslist li, ul.newslist li{
border-bottom: 1px solid #dfdfdf;
padding:1rem 0;
}
#news .inner ul.newslist li .ttl, ul.newslist li .ttl{
color:#57c1d7;
font-size:1.2rem;
margin:0 0 1rem;
}
#news .inner ul.newslist li:empty, ul.newslist li:empty{
display:none;
}
#news .inner ul.newslist li .date{
font-size: 1.1em;
color: #57c1d7;
}

#content-top #news .inner ul.newslist li:nth-of-type(n+6){
display:none
}

main.post ul.newslist li:nth-of-type(n+4){
  opacity : 0;
  transform : translate(0, 20px);
  transition : all 1s;
}
main.post ul.newslist li.active{
  opacity : 1;
  transform : translate(0, 0);
}



#news .linkbtn{
background:#f0f0f0;
display:inline-block;
padding:0.4rem 1rem;
border-radius:0.2rem;
margin: 0 0 0.4rem;
}

#news p{
text-align:left;
letter-spacing: 1px;
padding:0 0 0.4rem;
margin:0;
line-height: 1.6;
}
#news p.btn{
border-bottom:none;
margin:1rem 0 1rem;
text-align:center;
}


#content-top h2:before {
content: attr(data-en);
display: block;
color: #57c1d7;
font-size: 2rem;
}

#content-top .btn a{
color:#57c1d7;
border:1px solid #57c1d7;
border-radius:2rem;
}
#content-top .btn a::after, .btn a::after{
font: var(--fa-font-light);
content: "\f054";
margin-left:4px;
font-size:0.8rem;
}

#content-top #introduction{
background: url("../img/top/blue.webp")  0 0 / cover transparent;
}
#content-top #introduction  h2:before{
content:"";
height:80px;
display:block;
background: url("../img/common/logo-gray.png") 50% 0 / contain no-repeat;
margin:0 0 1rem;
}
#content-top #introduction  h2{
color:#57c1d7;
font-size:1.8rem;
}
#content-top #introduction  h2:before {
color: #818d93;
}
#introduction .inner{
display:flex;
background:rgba(255,255,255,0.7);
}
#introduction .inner figure {
display:block;
width:50%;
}
#introduction .inner > div{
width:50%;
padding:1rem;
text-align:left;
}

#about .about_list{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
position: relative;
margin:0;
}
#about .about_list > li{
width:calc(50% - 1rem);
margin:0 0 1rem;
border:1px solid #818d93;
}
#about .about_list > li:nth-of-type(n+3){
width:calc(100% / 3 - 1rem);
}
#about .about_list > li a{
text-align:center;
display: block;
padding:0.4rem;
border:1px solid #818d93;
}
#about .about_list > li a:after{
font: var(--fa-font-light);
content: "\f054";
}

#about .about_list div{
padding:2rem;
display: flex;
flex-direction: column;
}
#about .about_list div i{
display:block;
font-size:4rem;
margin:1rem 0;
color:#607c2c;
}
#about .about_list div h3{
line-height:1.4;
}
#about .about_list div p{
margin:0 0 1rem;
text-align:left;
word-break:normal;
}

#speciality{
position:relative;
background:rgba(129,141,147,0.2);
text-align:center;
}
#speciality .inner{
max-width:1000px;
display:flex;
justify-content:space-around;
flex-wrap:wrap;
}
#speciality .inner p{
margin:0 0 3rem;
}
#speciality .list{
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:center;
margin:0;
}
#speciality .list li{
width:calc(100%/3 - 1.2rem);
margin:1rem 0.6rem 40px;
} 
#speciality .list li a{
display:flex;
flex-direction:column;
align-items:center;
background:rgba(255,255,255,0.7);
border-radius:0.2rem;
padding:0.6rem;
height:100%;
}
#speciality .list li h4{
margin-top:-40px;
text-align:center;
color:#57c1d7;
}
#speciality .list li figure{
background:rgba(171,224,235,0.4);
width:8rem;
height:8rem;
border-radius:10rem;
transform: translateY(-50px);
display:flex;
justify-content:center;
align-items:center;
}
#speciality .list li figure img{
width:50%;
}
#speciality .list li a p{
color:#818d93;
}

/* ------------------------------------------------------------------
clinic.html
 ------------------------------------------------------------------ */

#clinic .catch{
font-size:1.2rem;
margin:0 0 3rem;
text-align:center;
color:#E9919D;
}

main .inner p.logo-intro, main .inner p.content-cal{
display:block;
margin:0 auto 2rem;
max-width:400px;
width:80%;
}
main .inner p.content-cal{
max-width:600px;
width:100%;
margin:0 auto;
}

ul.cPhoto {
margin: 0 0 30px 0;
overflow:hidden;
display:flex;
flex-wrap:wrap;
justify-content: space-around;

}
ul.cPhoto li:before{
content:none;
}
ul.cPhoto li {
list-style-type:none;
text-align:center;
display:inline-block;
vertical-align:middle;
width:48%;
overflow:hidden;
margin:0 0 0.8rem;
padding:0;
line-height:1.8;
position:relative;
}
ul.cPhoto li img{
border-radius:4px;
}

ul.cPhoto li span{
position:absolute;
bottom:10px;
left:14px;
color:rgba(255,255,255,0.7);
padding: 0.1rem 0.6rem;
background:rgba(0, 0, 0, 0.5);
border-radius:6px;
font-size:0.9em;
letter-spacing:0;
}
ul.cPhoto li.vt img{
position:absolute;
top:-50%;
}

ul.cPhoto p a {
text-decoration:none;
}
ul.cPhoto.eq li span{
width:100%;
bottom:0;
left:0;
line-height:1.2;
border-radius:0;
font-size:0.8em;
}

/* ------------------------------------------------------------------
doctor.html
 ------------------------------------------------------------------ */

.greeting .greeting-inner{
display:flex;
}
.greeting .greeting-inner .doctor{
overflow: hidden;
margin:0 0 1.6rem;
width:40%;
}
.greeting .doctor img{
border-radius:0.4rem;
max-width:500px;
width:80%;
}
.greeting .greeting-inner .doctor_message{
margin:0 0 2rem;
width:60%;
}

ruby rt{
font-weight:bold;
}

.sig{
width:100%;
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:flex-end;
}
.sig p{
line-height: 1;
margin:0 0 10px;
}
.sig p{
white-space: nowrap;
}
.sig p.doctorname {
font-size: 1.6rem;
text-align: right;
}

.profileInner{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
}

.profile {
overflow: hidden;
margin: 0 0 1rem;
width: 36%;
box-sizing:border-box;
padding:0.6rem;
display:flex;
}
.profile:first-of-type{
margin:0;
width:64%;
}


.profilecol{
background:rgba(255,255,255,0.7);
padding:0 1rem;
width:100%;
}
.profilecol h3{
margin:0 0 1rem;
}
.profilecol p {
display: flex;
line-height: 1.8;
margin: 0 0 0.2rem;
}
.profilecol p span:first-of-type{
margin-right: 0.4rem;
white-space: nowrap;
}

.profile h3{
text-align:left;
}
.profile ul{
box-sizing:border-box;
display:inline-block;
width:100%;
margin:0 0 1rem;
}
.profile ul li{
text-align:left;
}

.profile ul li span{
min-width:70px;
}




/* ------------------------------------------------------------------
service
------------------------------------------------------------------ */

.trigger{
cursor:pointer;
}
.trigger:after{
margin-left:4px;
font: var(--fa-font-light);
content: "\f078";
}
.trigger.on:after{
font: var(--fa-font-light);
content: "\f077";
}
.trigger + .drawer{
display:none;
}
.trigger.on + .drawer{
display:block;
}

h2.trigger{
margin-bottom:0;
}
h2.trigger:hover{
opacity:0.8;
}
h2.trigger:after{
background:none;
color:#57c1d7;
height:auto;
width:auto;
animation: blink 1s infinite alternate;
}
h2.trigger.on:after{
animation:none;
}

h2.trigger.on + .drawer{
border:1px solid #abe0eb;
padding:1rem;
}
@keyframes blink{
   0% { opacity: 0 }
 100% { opacity:1 }
}

#service p.btn{
text-align:center;
}
#service p.btn.blue a{
background:#57c1d7;
}
#service p.btn.blue_gray a{
background:#818d93;
}

#service dl{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
text-align:left;
margin:0 0 2rem;
}
#service dl dd, #service dl dt{
padding:0.4rem 0;
display:flex;
justify-content:center;
align-items:center;
margin:0 0 0.4rem;
}
#service dl dt{
color:#fff;
background:#818d93;
}
#service dl dd{
flex-direction:column;
align-items:flex-start;
}

#service dl.price{
font-size:1.2rem;
}
#service .price.center, #service .place_center{
max-width:500px;
margin:0 auto;
}
#service dl.price dt{
width:5rem;
background:#57c1d7;
}
#service dl.price dd{
width:calc(100% - 5rem);
border-left:none;
padding:0.4rem;
}
#service dl.price.medium dt{
width:6rem;
}
#service dl.price.medium dd{
width:calc(100% - 6rem);
}
#service dl.price.long dt{
width:15rem;
}
#service dl.price.long dd{
width:calc(100% - 17rem);
}


#service #pill dl.price{font-size:1rem;}
#service dl.pill_list {
margin:0;
}
dl.pill_list dt{
width:12rem;
}
dl.pill_list dd{
width:calc(100% - 13rem);
}

dl.treatment dt{
width:4rem;
}
dl.treatment dd{
width:calc(100% - 5rem);
}

main .inner p.service-ttl{
font-size:1.2rem;
margin:0;
}

#service ul.submenu {
max-width:1000px;
margin:0 auto 2rem;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
#service ul.submenu li{
width:calc(100% / 3 - 8px);
display:flex;
margin:4px;
}
#service ul.submenu li figure{
width:50%;
text-align:center;
}

#service ul.submenu li a{
width:100%;
margin:0;
padding:1rem;
border-radius:0.4rem;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
position:relative;
}
#service ul.submenu li + li a{
border-left:1px dashed #818d93;
border-radius:0;
}
#service ul.submenu li:nth-of-type(4) a{
border:none;
}

#service ul.submenu li a h2{
font-size:1.2rem;
margin:0 0 1rem;
padding:0;
align-items:center;
}
#service ul.submenu li a h2:after{
position:static;
background:none;
width:auto;
height:auto;
font: var(--fa-font-light);
content: "\f054";
display:flex;
margin:0 0 0 1rem;
color:#57c1d7;
}
#service ul.submenu li a p{
padding:1rem 1rem 0;
}

#service h2 .small{
margin-left:6px;
}

/*#service h2{
padding-top:90px;
margin-top:-90px;
}*/

#service h3, #service .linkarea a{
/*margin:-70px 0 1rem;
padding-top:70px;*/
border-bottom:1px dashed #818d93;
padding:0 0 0.4rem;
display: flex;
flex-wrap:wrap;
align-items: center;
font-size:1.4rem;
margin: 1.4rem 0 1.4rem;
}
#service .linkarea a{
flex-wrap:nowrap;
justify-content:space-between;
text-align:left;
}
#service .linkarea a:after{
content:"";
font: var(--fa-font-light);
content: "\f054";
color:#57c1d7;
}


#service h3.nobdr{
border:none;
}

#service #pill h2{
flex-direction:column;
}
#service #pill h3{
font-size:1.3rem;
color:#57c1d7;
border:none;
margin:0;
}

#service #others .doccol{
font-size:1.1rem;
}

#service #others .price{
display:inline-block;
padding:0 0.2rem;
margin:0;
font-size:1.1rem;
}

#service #others .doc_num{
background:#57C1D8;
color:#fff;
font-size:1.2rem;
padding:0.4rem;
}

#service #others ul.dot li{
width:500px;
display:flex;
justify-content:space-between;
align-items:center;
line-height:1.4;
}

#others table th, #others table td{
width:20%;
}
#others table tr.color th{
color:#fff;
background:#57C1D8;
}
#others table td{
text-align:center;
padding:0;
}
#others table td div{
display:flex;
justify-content:center;
width:100%;
min-height:50px;
}
#others table td div span{
width:20%;
margin:0;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
#others table td div span.small{
width:100%;
border:none !important;
}
#others table td div span:first-of-type{
background:#f0f0f0;
}
#others table td div span + span{
border-left:1px solid #bebebe;
}

#service .scol{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:0 0 1rem;
}
#service .scol h3{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0.4rem;
border-radius:0.4rem;
margin:0;
color:#fff;
white-space:nowrap;
width:180px;
background-color: rgba(137, 208, 233, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(155, 215, 235, 1) 4px, rgba(155, 215, 235, 1) 8px );
}
#service .scol p{
margin:0;
width:calc(100% - 190px);
}
#service .scol.end{
margin:0 0 2rem;
}




#service .col{
border:1px solid #d02441;
padding:1rem;
margin:0 0 2rem;
}
#service .col p:last-child{
margin:0;
}

#service .sleep_cause{
margin:0 0 1rem;
}
#service .sleep_cause p span.txt{
width:calc(100% - 200px);
}
#service .sleep_cause p span.sttl{
width:190px;
}

.servicecal{
display:block;
width:80%;
margin:0 auto 3rem;
text-align:center;
padding: 1rem;
border-radius:4px;
}

table{
margin:0 0 2rem;
width: 100%;
border-collapse: separate;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-spacing: 0;
}
table th{
padding:10px;
background:#f9f9f9;
border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
text-align:center;
line-height:1.6;
vertical-align:middle;
text-align:center;
box-sizing:border-box;
width:460px;
}

table td{
padding:10px;
background:rgba(255,255,255,0.7)FFF;
border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
line-height:1.6;
text-align:left;
vertical-align:middle;
box-sizing:border-box;
}
table span{
margin-left:0.4rem;
display:inline-block;
} 
table td.txtleft{
text-align:left;
}

#service .price{
font-size:1.2rem;
}

#service #document ul.fee li{
text-align:left;
}
#service #document ul.fee li span:before{
content:"：";
}
#service #document ul.fee li span{
font-weight:bold;
}

.ref{
background-size: auto auto;
background-color: rgba(246, 246, 246, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(250, 250, 250, 1) 4px, rgba(250, 250, 250, 1) 8px );
border:1px solid #818d93;
padding:1rem;
border-radius:1rem;
}
#service .ref h3{
margin:0;
padding:0;
}

/* ------------------------------------------------------------------
counseling
 ------------------------------------------------------------------ */

.cbg{
background:#f0f0f0;
padding:1rem;
}

/* ------------------------------------------------------------------
first
 ------------------------------------------------------------------ */

#first .belongings{
text-align:left;
padding:0.6rem 0.8rem;
margin-right:4px;
color:#fff;
background:#818D93;
}

.payment{
max-width:400px;
}

.flow, main .inner .flow p{
margin:0 0 2rem;
}

.flow h3{
display:flex;
align-items:center;
margin:0 0 1rem;
border:none;
background:none;
padding:0;
}
.flow h3:before{
content:none;
}

.flow .belongings ul{
margin:0;
}
.flow .belongings h3{
padding:0 0 0.6rem;
border-bottom:1px dashed #aaa;
}



div.flow span.tel a{
color:#f29c9f;
font-weight:bold;
font-size:1.4rem;
}


.firstnotice{
border:4px solid #6ABB70;
border-radius:6px;
padding:1rem;
background-color: rgba(255,255,255,0.7);
background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #f9f9f9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #f9f9f9),color-stop(.75, #f9f9f9), color-stop(.75, transparent),to(transparent));
-webkit-background-size: 7px 7px;
}
.firstnotice ul{
margin:0;
}
.firstnotice ul li:before{
background: #aaa;
}
.firstnotice ul li.paypay{
max-width:400px;
background:rgba(255,255,255,0.7);
display:block;
border:1px solid #818d93;
border-radius:6px;
margin:0.6rem 0 0;
padding:0.2rem;
}
.firstnotice ul li.paypay:before{
content:none;
background:none;
}

/* ------------------------------------------------------------------
access/info
 ------------------------------------------------------------------ */

.route{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}
.route div.route_photo{
width:48%;
margin:0 0 1rem;
}
.route div.route_photo p{
text-align:center;
margin:0;
}
.route div.route_photo figure{
background:#f0f0f0;
margin:0 0 0.4rem;
position:relative;
}
.route div.route_photo + div figure:after{
font-family: "Font Awesome 6 Pro";
font-weight: 900;
font-size: 2rem;
color:#999;
content: "\f178";
position:absolute;
height:40px;
display:flex;
align-items:center;
top:calc(50% - 20px);
left:-3%;
}

.map{
display:flex;
align-items:center;
}

.accessmap{
margin:0 auto;
width:50%;
}
.accessmap p{
margin:0;
}
.accessmap p img{
border-radius:1rem;
}
.transport{
width:50%;
padding:1rem;
}
.transport p{
display:flex;
flex-wrap:wrap;
align-items:center;
text-align:left;
margin:0;
}
.transport p.nowrap{
flex-wrap:nowrap;
align-items:flex-start;
}

.transport p.address{
margin:0 0 1rem;
}
.transport p.address span{
margin-left:4px;
}
.accessinfo{
box-sizing:border-box;
background:rgba(255,255,255,0.8);
padding:0;
border-radius:6px;
}
.accessinfo p{
margin:0 0 0.4rem;
letter-spacing:1px;
text-align:left;
}
.accessinfo p:last-child{
margin:0;
}

.parking{
text-align:center;
}
.parking img{
max-width:600px;
}




p.mapTxt{
margin: 0 0 20px 20px;
line-height: 1.6;
}



p.switchMap01{
width:600px;
text-align:right;
margin: 0 0 20px 15px;
}

/* ------------------------------------------------------------------
monshin
------------------------------------------------------------------ */

main#monshin h2:before{
content:none;
}

ul.monshin_btn{
display:flex;
justify-content:space-around;
margin:0;
}
ul.monshin_btn li{
width:48%;
margin:0 0 1rem;
}
ul.monshin_btn li a{
display:flex;
align-items:center;
border-radius:1rem;
padding:1rem;
background: #b5e2b8;
border: 1px solid #80af82;
}

/* ------------------------------------------------------------------
jobs
------------------------------------------------------------------ */

#jobs .wages{
font-size:1.2rem;
margin:0 0 1rem;
}
#jobs h2:nth-of-type(n+2){
font-size:1.2rem;
padding-bottom:0.2rem;
margin:0;
}
#jobs h3{
font-size:1.1rem;
}

.box{
display:flex;
flex-wrap:wrap;
align-items:center;
line-height:1.3;
}
.box h3{
margin:0.4rem 1rem 0.4rem 0;
width:4rem;
background:#eee;
text-align:center;
}

/* ------------------------------------------------------------------
faq
------------------------------------------------------------------ */

#faq h3:before{
content:"Q";
font-size:1.1rem;
background:#F5AF95;
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
width:2rem;
height:2rem;
border-radius:0.4rem;
margin:0 6px 0 0;
}

/* ------------------------------------------------------------------
digisma
 ------------------------------------------------------------------ */

.app{
display:flex;
}
.app p{
width:50%;
display:flex;
flex-direction:column;
align-items:center;
}
.app p a{
display:block;
border:1px solid #818d93;
padding:0.4rem;
}
.app p a:after{
font: var(--fa-font-light);
content: "\f054";
}
.digisma-flow{
border:1px solid #818d93;
padding:0.8rem;
}
.digisma-flow p{
display:flex;
align-items:center;
text-align:left;
}
.digisma-flow p span + span{
width:calc(100% - 50px);
}


#online .btn a{
width:50%;
}
#online .btn a, #service p.btn.online_link a{
background:#41AC78;
border:1px solid #41AC78;
}
#online .btn a i, #service p.btn.online_link i{
color:#fff;
line-height:1.4;
margin-right:4px;
}

#online p i{
color:#29A268;
}

.online_fare{
background:#ccefde;
border:1px solid #44b27d;
padding:1rem;
margin:0 0 1rem;
}
.online_fare p{
text-align:left;
}

.message {
position: relative;
margin:3rem 0 0;
padding: 0.5em 1em;
border: solid 3px #F5AF95;
border-radius: 8px;
}
.message h2{
margin:0;
border:none;
font-size:1.4rem;
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
background: #FFF;
color: #F5AF96;
font-weight: bold;
}
.message p {
margin:0 0 0; 
padding:0.8rem 0;
}