@charset 'utf-8';

/*

 * name:top.css

 * author:Sovanda

*/



/* top

------------------------------------------------ */



#main { padding: 0 !important; }

#footer { margin-top: 0; }



@media screen and (min-width: 768px) {

    #header.fixed { position: absolute; background: rgba(255, 255, 255, .5); transform: none !important; }

    .fixed #hd-nav { position: absolute; width: 21.77em; height: 100vh; background: #fff; left: 0; top: 0; z-index: 2; }

    .fixed .hd-nav--iframe { display: block; width: 100%; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; }

    .fixed .hd-nav--iframe::-webkit-scrollbar { display: none; }

    .fixed .hd-nav--links { flex-wrap: wrap; }

    .fixed .hd-nav--links li { position: relative; width: 100%; height: 8.72vh; display: block; order: 3; border-top: 1px solid #E3E3E3; }

    .fixed .hd-nav--links li a { padding: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center; }

    .fixed .hd-nav--links li.active a,

    .fixed .hd-nav--links li a:hover { background: #DDE6FF; color: #000; }

    .fixed .hd-nav--links li.h-show  { display: block; }

    .fixed .hd-nav--links li.h-logo { order: 1; height: 171px; border-top: none; }

    .fixed .hd-nav--links li.h-logo a { background: none !important; }

    .fixed .hd-nav--links li.h-logo img { width: 60.8%; }

    .fixed .hd-nav--links li.h-date { order: 2; border-top: none; }

    .fixed .hd-nav--links li.h-date a { background: var(--color-main); color: #fff !important; }

    .fixed .hd-nav--links li.h-date a:before { content: ''; display: inline-block; width: 2.15em; height: 2.15em; margin-right: .77em; background: url(../../img/share/icon-calendar.png) no-repeat; background-size: 100% 100%; }

    .fixed .hd-nav--links li.h-sns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }

    .fixed .hd-nav--links li.h-sns a { width: 2.3em; margin: 0 .38em; position: relative; left: auto; top: auto; background: none !important; }

}



/* section visual */

#visual { padding: 0; height: 100vh; }

.visual__slide {  }

.visual__slide--items { position: relative; width: 100%; height: 100vh; }

.visual__slide--items img { position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; }

.visual__news { position: absolute; right: 20px; bottom: 20px; width: 42.3em; z-index: 2; }

.visual__news--title { font-size: inherit; color: #fff; display: inline-block; background: var(--color-main); padding: 1em 1.15em; border-top-right-radius: .3em; border-top-left-radius: .3em; }

.visual__news__desc { font-size: inherit; display: flex; flex-wrap: wrap; align-items: center; width: 100%; padding: 1em; background: #fff; border-radius: .3em; border-top-left-radius: 0; }

.visual__news__desc--date { position: relative; width: 6.76em; }

.visual__news__desc--date:after { content: '|'; display: block; position: absolute; top: 50%; right: 0; transform: translate(0,-50%); color: #E3E3E3; }

.visual__news__desc--tlt { width: calc( 100% - 16.36em ); line-height: 2; padding-left: 1em; }

.visual__news__desc--tlt a { display: block; color: var(--color-main); text-decoration: underline; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

.visual__news__desc--btn { line-height: 2.69; width: 9.6em; text-align: center; }

.visual__news__desc--btn a { display: block; color: #fff; border: 1px solid var(--color-main); background: var(--color-main); border-radius: 10em; text-align: center; }

.visual__news__desc--btn a:hover { background: #fff; color: var(--color-main); }

.visual__slide .owl-dots { position: absolute; height: 1.15em; bottom: 20px; left: 28.84em; display: flex; flex-wrap: wrap; }

.visual__slide .owl-dots .owl-dot { display: block; width: 1.15em; height: 1.15em; border-radius: 50%; background: #C7C7C7; transition: 300ms ease; margin-right: .46em; }

.visual__slide .owl-dots .owl-dot.active { background: var(--color-main); }



    @media screen and (max-width: 768px) {

        #visual { height: 450px; }

        .visual__slide--items { height: 450px; }

        .visual__news { width: calc( 100% - 40px ); }

        .visual__news__desc--tlt { width: calc( 100% - 6.76em ); }

        .visual__news__desc--btn { display: none; }

        .visual__slide .owl-dots { display: none; }

    }



/* section therape */

#therape {  }

#therape .section__block { display: flex; flex-wrap: wrap; justify-content: space-between; }

.therape__block { width: 49%; display: flex; flex-wrap: wrap; justify-content: space-between; }

.therape__video { width: 49%; display: block; overflow: hidden; position: relative; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); }

.therape__video video { height: 100%; width: auto; position: absolute; left: 48%; top: 0; transform: translateX(-50%); }

.therape__boxs { width: 100%; padding: 1em 0; display: flex; flex-wrap: wrap; align-items: center; background: #fff; border-radius: .153em; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); }

.therape__boxs:not(:last-child) { margin-bottom: 1em; }

.therape__boxs--tlt { font-size: 1.23em; width: 28.3%; text-align: center; }

.therape__boxs--tlt img { width: 22.3%; display: block; margin: 0 auto .375em; }

.therape__boxs--desc { font-size: 1.075em; width: calc( 100% - 28.3% ); }

.therape__boxs--date dl { position: relative; display: block; }

.therape__boxs--date dl:not(:last-child) { margin-bottom: 1.5em; }

.therape__boxs--date dl dt { display: block; margin-bottom: .35em; }

.therape__boxs--date dl dd { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }

.therape__boxs--date dl dd span { font-size: .84em; line-height: 2.72; width: 7em; text-align: center; color: #fff; background: var(--color-main); border-radius: 10em; display: block; }

.therape__boxs--date dl dd p { width: calc( 100% - 6.6em ); }

.therape__boxs--contact {  }

.therape__boxs--contact li { font-size: inherit; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; }

.therape__boxs--contact li:not(:last-child) { margin-bottom: .35em; }

.therape__boxs--contact li i { font-size: 1.46em; line-height: 1.578; color: var(--color-main); }

.therape__boxs--contact li p { width: calc( 100% - 2.07em ); word-break: break-word; }

.therape__boxs--contact li p span { font-size: .77em; line-height: 1.2; display: block; color: #8A8A8A; }



    @media screen and (max-width: 768px) {

        .therape__block { width: 100%; margin-bottom: 4%; }

        .therape__video { width: 100%; }

        .therape__video video { height: auto; width: 100%; position: relative; left: 50% }

        .therape__boxs { width: 100%; padding: 1.15em; border: 1px solid #e3e3e3; }

        .therape__boxs:not(:last-child) { margin-bottom: 4%; }

        .therape__boxs--tlt { width: 100%; display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #e3e3e3; }

        .therape__boxs--tlt img { width: 2.75em; margin: 0 1em 0 0; }

        .therape__boxs--desc { width: 100%; }

    }



/* section service */

#service { padding-top: 0; }

.service__block { display: flex; flex-wrap: wrap; justify-content: space-between; }

.service__search { position: relative; width: 25.8%; padding: 1.92em 1.538em; display: flex; flex-direction: column; align-items: center; justify-content: center; background: url(../../img/top/service-bg.jpg) no-repeat center; background-size: cover; }

.service__search:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; background: rgba(0, 0, 0, .8); }

.service__search:after { content: ''; display: block; position: absolute; top: 50%; right: 0; transform: translate(0,-50%); width: 0px; height: 0px; border-top: .84em solid transparent; border-bottom: .84em solid transparent; border-right: 1.38em solid #fff; }

.service__search--tlt { font-size: 1.23em; line-height: 2; color: #fff; position: relative; z-index: 2; text-align: center; }

.service__search--form { width: 89%; display: block; margin: 1.92em auto 0; position: relative; display: block; z-index: 2; }

.service__search--form input[type="search"] { font-family: inherit; font-size: .84em; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; padding: .38em 1.538em; width: 100%; height: 4.4em; background: #fff; border: none; border-radius: .385em; -webkit-box-sizing: border-box; box-sizing: border-box; }

.service__search--form input[type="submit"] { font-family: inherit; font-size: 1.23em; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; display: block; margin: .875em auto 0; padding: 0; text-align: center; width: 52%; height: 2.75em; color: #fff; background: var(--color-main); border: none; border-radius: 10em; -webkit-box-sizing: border-box; box-sizing: border-box; }

.service__lists { padding: 2em 0; width: 72.4%; display: flex; flex-wrap: wrap; }

.service__lists li { font-size: 1.075em; width: 18.2%; margin-right: 2.25%; text-align: center; }

.service__lists li:nth-child(5n) { margin-right: 0; }

.service__lists li:nth-child(n+6) { margin-top: 6.9%; }

.service__lists li a { display: block; }

.service__lists li img { display: block; width: 58.9%; margin: 0 auto .85em; filter: invert(1); }



    @media screen and (max-width: 768px) {

        .service__search { width: 100%; padding-bottom: 2.5em; }

        .service__lists { width: 100%; padding: 0; margin-top: 1.538em; }

        .service__lists li { width: 50%; margin: 0; border: 1px dashed #e3e3e3; }

        .service__lists li:nth-child(n+6) { margin-top: 0; }

        .service__lists li:nth-child(n+3) { border-top: none; }

        .service__lists li:nth-child(2n) { border-left: none; }

        .service__lists li img { width: 30%; margin-bottom: .35em; }

        .service__lists li a { padding: 1em 0; }

        .service__search:after { left: 50%; right: auto; top: auto; bottom: 0; transform: translate(-50%,0); border: none; border-left: .84em solid transparent; border-right: .84em solid transparent; border-bottom: 1.38em solid #fff; }

        

    }



/* section special */

#special { background: #F8F9FA; }

.special__block { display: flex; flex-wrap: wrap; }

.special__lists { position: relative; width: 30.3%; margin-right: 4.55%; padding: 0 1.38em 0 .77em; }

.special__lists:nth-child(3n) { margin-right: 0; }

.special__lists:nth-child(n+4) { margin-top: 3.7%; }

.special__lists:nth-child(3n+2) { margin-top: 6.6%; }

.special__lists:nth-of-type(2) { margin-top: 2.9%; }

.special__lists--img { position: relative; width: 100%; height: 22.9em; display: block; overflow: hidden; border-radius: .77em; }

.special__lists--img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.special__lists--tags { font-size: inherit; position: absolute; left: 0; top: 1.38em; color: #fff; min-width: 13.84em; padding: .5em; background: var(--color-main); text-align: center; border-bottom-right-radius: 10em; border-top-right-radius: 10em; z-index: 2; }

.special__lists--tags:before { content: ''; display: inline-block; position: absolute; top: -.77em; left: 0; border-left: .77em solid transparent; border-bottom: .77em solid #3D3D3D; }

.special__lists--desc { position: relative; padding: 1.15em 1.38em; display: block; width: 100%; margin: -3.61em 0 0 1.38em; background: #fff; border-radius: .77em; z-index: 2; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); }



    @media screen and (max-width: 768px) {

        .special__lists { width: 100%; margin: 0; }

        .special__lists:nth-child(n+2),

        .special__lists:nth-of-type(2),

        .special__lists:nth-child(3n+2) { margin-top: 4%; }

        .special__lists--img { width: 100%; height: 0; padding-bottom: 88.8%; border-radius: .385em; }

        .special__lists--desc { width: 100%; border-radius: .385em; }

        /*.special__lists--img { width: 50%; height: 0; padding-bottom: 44.6%; border-radius: .385em; }

        .special__lists--desc { width: calc( 50% + 1.38em ); margin: 1.38em 0 0 -1.38em;  border-radius: .385em; }*/

    }



/* section package */

#package {  }

.package__block { display: flex; flex-wrap: wrap; }

.package__lists { font-size: inherit; width: 32.3%; margin-right: 1.55%; display: block; }

.package__lists:nth-child(3n) { margin-right: 0; }

.package__lists:nth-child(n+4) { margin-top: 1.55%; }

.package__lists__box { text-align: center; padding: 5em 1.538em 5.76em; background: #fff; border-radius: .77em; border: 1px solid #e3e3e3; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); }

.package__lists__box--tlt { font-size: 1.846em; margin-bottom: 1.5em; }

.package__lists__box--img { width: 75.8%; display: block; margin: 0 auto; }

.package__lists__box--price { font-size: 2.769em; font-weight: bold; line-height: 1.2; color: var(--color-main); margin-top: .5em; }

.package__lists--btn { font-size: 1.69em; line-height: 3.3; display: block; position: relative; margin: -1.65em auto 0; width: 66.5%; z-index: 2; }

.package__lists--btn a { display: block; color: #fff; border: 1px solid var(--color-main); background: var(--color-main); border-radius: 10em; text-align: center; }

.package__lists--btn a:hover { background: #fff; color: var(--color-main); }



    @media screen and (max-width: 768px) {

        .package__lists { position: relative; width: 100%; margin-right: 0; }

        .package__lists:nth-child(n+2) { margin-top: 4%; }

        .package__lists__box { position: relative; text-align: left; padding: 1.15em 1.15em; border-radius: .385em; display: flex; flex-wrap: wrap; align-items: center; }

        .package__lists__box--tlt { font-size: 1.538em; width: calc( 50% - .75em ); position: absolute; right: .75em; top: .75em; margin: 0; text-align: center; }

        .package__lists__box--img { width: 50%; }

        .package__lists__box--price { font-size: 2.3em; width: 50%; margin: 0; text-align: center; }

        .package__lists--btn { margin: 0; line-height: 3; width: calc( 50% - 0.9375em ); font-size: 1.15em; text-align: center; position: absolute; right: 0.9375em; bottom: 0.9375em; }

        .package__lists--btn a { display: inline-block; width: 65%; }

    }



    @media screen and (max-width: 480px) {

        .package__lists { font-size: 2.7vw; }

    }



/* section news */

#news { background: #F8F9FA; }

.news__block { display: flex; flex-wrap: wrap; }

.news__lists { font-size: inherit; width: 32.3%; margin-right: 1.55%; border-radius: .77em; background: #fff; display: block; overflow: hidden; }

.news__lists:nth-child(3n) { margin-right: 0; }

.news__lists:nth-child(n+4) { margin-top: 1.55%; }

.news__lists--img { display: block; overflow: hidden; position: relative; height: 19.84em; }

.news__lists--img a { display: block; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.news__lists--img a img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; object-fit: cover; object-position: center; transition: 300ms ease; }

.news__lists--img a:after { content: ''; display: block; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2.538em; background: url(../../img/top/news-bg-box.png) no-repeat; background-size: 100% 100%; z-index: 2; }

.news__lists--img a:hover img { transform: scale(1.1); }

.news__lists--desc { display: block; position: relative; padding: 0 3.46em 1.538em; z-index: 2; }

.news__lists--date { font-size: 1.075em; line-height: 1; margin-bottom: 1.28em; }

.news__lists--date span { font-size: 138%; display: inline-block; color: var(--color-main); }

.news__lists--tlt { font-size: 1.23em; line-height: 2; margin-bottom: .25em; }

.news__lists--tlt a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

.news__lists--cmn { font-size: .92em; color: #555555; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

.news__lists--btn { font-size: inherit; display: block; margin-top: .5em; }

.news__lists--btn a { display: inline-block; padding: .25em 1em; color: #fff; background: var(--color-main); overflow: hidden; border-radius: .3em; border: 1px solid var(--color-main); vertical-align: top; }

.news__lists--btn a:hover { background: none; color: var(--color-main); }



    @media screen and (max-width: 768px) {

        .news__lists,

        .news__lists:nth-child(3n) { font-size: inherit; width: 48%; margin-right: 4%; border-radius: .385em; }

        .news__lists:nth-child(2n) { margin-right: 0; }

        .news__lists:nth-child(n+3) { margin-top: 4%; }

        .news__lists--img { height: 0; padding-bottom: 67.5%; }

        .news__lists--img a:after { height: 1.46em; }

        .news__lists--desc { padding: 0 .77em .77em; }

        .news__lists--date { font-size: inherit; margin-top: 0.385em; margin-bottom: 0.77em; }

        .news__lists--tlt { font-size: 1.075em; line-height: 2; margin-bottom: 0; }

        .news__lists--cmn,

        .news__lists--btn { display: none; }

    }



/* section contact */

#contact { padding: 0; }

#contact .section--title { line-height: 1.2; }

#contact .section--title:after,

#contact .section--title:before { content: none; }

.contact__block { padding: 5em 0 5em 3.84em; width: 54.2%; margin-left: auto; }

.contact--info { font-size: 1.23em; line-height: 2; padding-left: 1.6875em; }

.contact--info dl { display: block; }

.contact--info dl:not(:last-child) { margin-bottom: 1em; }

.contact--info dl dt { color: var(--color-main); margin-bottom: .44em; position: relative; }

.contact--info dl dt i { display: flex; align-items: center; width: 1.125em; height: 1.78em; position: absolute; left: -1.6875em; top: 0; }

.contact__maps { position: absolute; top: 0; width: calc( 50vw - 3.84em ); right: calc( 50% + 3.84em ); height: 100%; }

.contact__maps iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }



    @media screen and (max-width: 1240px) {

        .contact__maps { width: 45.8%; right: 54.2% }

    }



    @media screen and (max-width: 768px) {

        #contact { padding: 45px 0 85%; }

        #contact .wrap { position: initial; }

        .contact__block { padding: 0; width: 100%; }

        .contact--info { font-size: 1.15em; }

        .contact__maps { width: 100%; height: 0; top: auto; right: auto; left: 0; bottom: 0; padding-bottom: calc( 85% - 20px ); }

    }