:root{
	--base-font: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	--sub-font: "游明朝", YuMincho, yu-mincho-pr6n, serif;
	--base-color: #000;
	--sub-color01: #0058a7;
	--sub-color02: #828282;
	--background-color: #e9ecf7;
}

*{ box-sizing: border-box; }
html { font-size: 62.5%; }
body{
	font-family: var(--base-font);
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--base-color);	
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.12em;
	text-align: justify;
}

h1,h2,h3,h4,h5,h6{ font-family: var(--sub-font); font-weight: 500; color: var(--sub-color01); }


/*** adobe使用フォント
FOT-TsukuARdGothic Std
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-weight: 700;
***/

a{ transition: .5s; }
a:hover{ opacity: .5; }
br{ line-height: inherit; }
p{ line-height: 2; }
span, a, strong, small{ color: inherit; font-size: inherit; font-family: inherit; font-weight: inherit; letter-spacing: inherit; }

.wrap{ width: 800px; margin: 0 auto; position: relative; }
.wrap.midium{ width: 900px; }
.row{ display: flex; justify-content: space-between; }

.body-wrap{ overflow: hidden; position: relative; }

@media(min-width: 769px){
	.sp{ display: none !important; }
}

header{ position: absolute; top: 2rem; left: 8rem; }

.mv{ display: block; width: 100%; height: 60rem; object-fit: cover; object-position: left; }

main{ display: block; }
main section{ width: 80rem; margin: 0 auto; position: relative; }

h2.general{ font-size: 3.8rem; text-align: center; line-height: 1.6; margin-bottom: 3.6rem; }
h2.general:after{ content: attr(data-en); font-size: 1.5rem; display: flex; justify-content: center; align-items: center; width: 23.4rem; height: 3rem; border-radius: 1.5rem; margin: 0 auto; background: var(--sub-color01); color: #fff; }

.sec-ttl{ margin-bottom: 10rem; }
.sec-ttl h1{ position: relative; z-index: 0; text-align: center; font-size: 3.8rem; line-height: 1.6; margin-top: -2.5rem; margin-bottom: 1.8rem; }
.sec-ttl h1:before{ content: ''; width: 50rem; height: 10rem; border-radius: 5rem; background: #fff; position: absolute; top: -2.5rem; left: 50%; transform: translateX(-50%); z-index: -1; }
.sec-ttl h1 > span{ display: block; text-align: center; color: var(--sub-color02); }
.sec-ttl h1 > span strong{ font-size: 3.8rem; line-height: 1; }
.sec-ttl h1 > span strong small{ font-size: 2rem; }
.sec-ttl h1 > span > span{ font-size: 2rem; background: var(--sub-color02); color: #fff; display: inline-block; padding: .1em 1em; border-radius: 2em; vertical-align: text-bottom; margin-left: .4rem; }
.sec-ttl h2{ font-size: 2rem; font-family: var(--base-font); color: #fff; text-align: center; position: relative; z-index: 0; padding: .4em 0; }
.sec-ttl h2:before{ content: ''; width: 100vw; height: 100%; background: var(--sub-color01); position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1; }

.sec-info{ margin-bottom: 9rem; }
.sec-info .news-list li{ display: flex; justify-content: space-between; align-items: center; }
.sec-info .news-list li + li{ margin-top: .5em; }
.sec-info .news-list li .cat{ width: 8rem; height: 3.6rem; border-radius: 1.8rem; background: var(--sub-color01); color: #fff; display: flex; justify-content: center; align-items: center; }
.sec-info .news-list li > .text{ display: block; width: calc(100% - 9rem); border-bottom: solid 1px var(--sub-color01); cursor: pointer; }
.sec-info .news-list li > .text span{ position: relative; padding-right: 1.5em; display: block; }
.sec-info .news-list li > .text span:after{ content: ''; width: 0; height: 0; border-style: solid; border-width: .4rem 0 .4rem .8rem; border-color: transparent transparent transparent var(--sub-color01); position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.sec-info .news-list li .pop{ position: fixed; visibility: hidden; opacity: 0; }
.sec-info > * + .flyer-row{ margin-top: 5rem; }
.sec-info .flyer-row{ width: 100%; background: var(--sub-color01); padding: 5rem; border-radius: .8rem; align-items: flex-start; }
.sec-info .flyer-row img{ width: 34rem; cursor: pointer; }
.sec-info .flyer-row img.wide{ width: 100%; }
.sec-info > * + .info-row{ margin-top: 5rem; }
.sec-info .info-row .left{ width: 38rem; }
.sec-info .info-row .left h2{ font-size: 2rem; color: var(--sub-color01); line-height: 1.5; text-align: center; margin-bottom: 1.4rem; }
.sec-info .info-row .left .hour-table{ width: 100%; table-layout: fixed; letter-spacing: .06em; }
.sec-info .info-row .left .hour-table thead{ background: var(--background-color); }
.sec-info .info-row .left .hour-table tr{ border-bottom: solid 1px var(--background-color); }
.sec-info .info-row .left .hour-table th{ width: 12.8rem; font-weight: 400; text-align: center; vertical-align: middle; height: 5rem; }
.sec-info .info-row .left .hour-table td{ text-align: center; vertical-align: middle; line-height: 1; letter-spacing: 0; }
.sec-info .info-row .left .hour-table td.txt{ font-size: 1rem; }
.sec-info .info-row .left .hour-table + p{ line-height: 1.6; margin-top: 1rem; }
.sec-info .info-row .right{ width: 38rem; background: #f5f5f5; padding: 3.5rem 3rem; border-radius: .5rem; }
.sec-info .info-row .right .addres-list li{ line-height: 1.6; padding-left: 8rem; width: 100%; min-height: 7rem; display: flex; align-items: center; position: relative; }
.sec-info .info-row .right .addres-list li + li{ margin-top: .8rem; }
.sec-info .info-row .right .addres-list li:before{ content: ''; width: 7rem; height: 7rem; background: no-repeat center/contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.sec-info .info-row .right .addres-list li.address:before{ background-image: url(../../images/pre/address-icon01.png); }
.sec-info .info-row .right .addres-list li.station:before{ background-image: url(../../images/pre/address-icon02.png); }
.sec-info .info-row .right .addres-list li.other:before{ background-image: url(../../images/pre/address-icon03.png); }

.sec-dr{ margin-bottom: 8rem; }
.sec-dr .dr-row{ align-items: flex-start; }
.sec-dr .dr-row .txt{ width: 48rem; }
.sec-dr .dr-row > img{ width: 28rem; }
.sec-dr h3{ font-size: 3.8rem; color: var(--sub-color02); position: relative; z-index: 0; line-height: 1.6; margin-bottom: 1.8rem; }
.sec-dr h3 span{ background: #fff; position: relative; padding-right: .5em; }
/*.sec-dr h3 small{ font-size: 2rem; margin-left: 1em; padding-right: .9em; }*/
.sec-dr h3:after{ content: ''; width: 100%; height: 1px; box-sizing: border-box; border-bottom: dotted .2rem var(--sub-color01); position: absolute; top: 50%; left: 0; z-index: -1; }
.sec-dr h3 ~ p + p{ margin-top: 2rem; }
.sec-dr .history-wrap{ flex-wrap: wrap; margin-top: 3rem; }
.sec-dr .history-wrap .inner{ width: 38rem; }
.sec-dr .history-wrap .inner:last-of-type:not(:nth-of-type(even)){ width: 100%; }
.sec-dr .history-wrap .inner:nth-of-type(n+3){ margin-top: 3rem; }
.sec-dr .history-wrap .inner h4{ font-size: 2rem; color: var(--sub-color01); background: var(--background-color); text-align: center; border-radius: .5rem; padding: .1em 0; margin-bottom: 1rem; }
.sec-dr .history-wrap .inner table{ line-height: 2; }
.sec-dr .history-wrap .inner table th{ font-weight: 400; white-space: nowrap; width: 1px; padding-right: 1.5em; }
.sec-dr .history-wrap .inner ul{ line-height: 2; }
.sec-dr .history-wrap .inner ul li{ position: relative; padding-left: 1em; }
.sec-dr .history-wrap .inner ul li:before{ content: '・'; position: absolute; left: 0; }

.sec-philosophy{ margin-bottom: 8rem; }
.sec-philosophy h2 + h3{ text-align: center; font-size: 3rem; color: var(--sub-color02); line-height: 1.7; margin-bottom: 2.8rem; }
.sec-philosophy h2 + h3 span{ border-bottom: dotted .2rem var(--sub-color01); padding-bottom: .25em; }

.sec-feature{ margin-bottom: 8rem; }
.sec-feature .feature-list li{ display: flex; justify-content: space-between; align-items: flex-start; }
.sec-feature .feature-list li + li{ margin-top: 4rem; }
.sec-feature .feature-list li > img{ width: 38rem; display: block; }
.sec-feature .feature-list li > .txt{ width: 100%; }
.sec-feature .feature-list li > img + .txt{ width: 38rem; }
.sec-feature .feature-list li > .txt h3{ background: var(--background-color); color: var(--sub-color01); text-align: center; border-radius: .5rem; line-height: 1.5; padding: .4em 1em; margin-bottom: 1rem; font-size: 2rem; }

.sec-flow{ margin-bottom: 8rem; }
.sec-flow .flow-list{ counter-reset: flow; }
.sec-flow .flow-list li{ padding-left: 7rem; position: relative; min-height: 5rem; width: 100%; }
.sec-flow .flow-list li:before{ counter-increment: flow; content: counter(flow); width: 5rem; height: 5rem; background: var(--background-color); color: var(--sub-color01); font-family: var(--sub-font); font-size: 3rem; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; }
.sec-flow .flow-list li + li{ margin-top: 3.3rem; }
.sec-flow .flow-list li h3{ font-size: 2rem; line-height: 1.6; margin-bottom: .5rem; }

.sec-treatment{ margin-bottom: 8.5rem; }
.sec-treatment .treat-list{ display: flex; flex-wrap: wrap; }
.sec-treatment .treat-list li{ width: 18rem; margin-right: calc((100% - 18rem * 4) /3 ); border-bottom: dotted .2rem var(--sub-color01); font-weight: 700; padding: 1rem 0 1rem 3rem; background: url(../../images/pre/icon-check01.png) no-repeat left center/2.2rem; }
.sec-treatment .treat-list li:nth-of-type(4n){ margin-right: 0; }
.sec-treatment .treat-list li:nth-of-type(n+5){ margin-top: 2rem; }

.sec-sns{ margin-bottom: 10rem; }
.sec-sns .sns-list{ width: 50rem; margin: 0 auto; }
.sec-sns .sns-list li{ font-size: 2rem; }
.sec-sns .sns-list li + li{ margin-top: 1rem; }
.sec-sns .sns-list li a{ width: 100%; height: 8rem; display: flex; align-items: center; padding-left: 9rem; position: relative; background: #f5f5f5 no-repeat left 3rem center/4rem; border-radius: .5rem; }
.sec-sns .sns-list li.line a{ background-image: url(../../images/pre/icon-sns01.png); }
.sec-sns .sns-list li.fb a{ background-image: url(../../images/pre/icon-sns02.png); }
.sec-sns .sns-list li.insta a{ background-image: url(../../images/pre/icon-sns03.png); }
.sec-sns .sns-list li.twitter a{ background-image: url(../../images/pre/icon-sns04.png); }
.sec-sns .sns-list li.tiktok a{ background-image: url(../../images/pre/icon-sns05.png); }
.sec-sns .sns-list li.youtube a{ background-image: url(../../images/pre/icon-sns06.png); }
.sec-sns .sns-list li a:after{ content: ''; width: 0; height: 0; border-style: solid; border-width: 0.4rem 0 0.4rem 0.8rem; border-color: transparent transparent transparent var(--sub-color01); position: absolute; top: 50%; right: 3rem; transform: translateY(-50%); }

.sec-recruit{ width: 100%; display: flex; background: var(--background-color); align-items: center; }
.sec-recruit > img.bg{ display: block; width: 50%; object-fit: cover; object-position: center; }
.sec-recruit .inner{ width: 60rem; padding: 8rem 5rem 10rem; text-align: center; }
.sec-recruit .inner h2{ margin-bottom: 1.4rem; }
.sec-recruit .inner .btn{ width: 25rem; height: 6rem; display: flex; justify-content: center; align-items: center; background: #fff; font-weight: 700; color: var(--sub-color01); border-radius: .5rem; margin: 1.3rem auto 0; }
.sec-recruit .inner .btn span{ padding-right: 1.5rem; position: relative; }
.sec-recruit .inner .btn span:after{ content: ''; width: 0; height: 0; border-style: solid; border-width: 0.4rem 0 0.4rem 0.8rem; border-color: transparent transparent transparent var(--sub-color01); position: absolute; top: 50%; right: 0; transform: translateY(-50%); }

main + iframe{ display: block; width: 100%; height: 40rem; }

footer{ background: var(--sub-color01); color: #fff; padding: 1.6rem 0; }
footer .copy{ display: block; text-align: center; font-size: 1.2rem; }

.float-btn{ position: fixed; top: 2rem; right: 2rem; z-index: 9980; display: flex; }
.float-btn li + li{ margin-left: 1rem; }
.float-btn li a{ width: 25rem; height: 6rem; border-radius: .5rem; background: var(--sub-color01); color: #fff; font-weight: 700; display: flex; justify-content: center; align-items: center; }
.float-btn li a span{ position: relative; padding-right: 1.5rem; }
.float-btn li a span:after{ content: ''; width: 0; height: 0; border-style: solid; border-width: 0.4rem 0 0.4rem 0.8rem; border-color: transparent transparent transparent #fff; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.float-btn li.web-resv a span{ padding-left: 3.3rem; }
.float-btn li.web-resv a span:before{ content: ''; width: 2.5rem; height: 2.5rem; background: url(../../images/pre/icon-resv01.png) no-repeat center/contain; position: absolute; left: 0; top: 50%; transform: translateY(-57%); }
.float-btn li.tel a span{ padding-left: 2rem; }
.float-btn li.tel a span:before{ content: ''; width: 1.4rem; height: 2.26rem; background: url(../../images/pre/icon-tel01.png) no-repeat center/contain; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }

.overlay{ width: 100%; height: 100%; background: rgba(0, 0, 0, .7); position: fixed; top: 0; left: 0; z-index: 9990; opacity: 0; visibility: hidden; transition: .5s; cursor: pointer; }
.overlay.active{ opacity: 1; visibility: visible; }
.modal{ width: 800px; max-height: calc(100% - 10rem); overflow: scroll; padding: 10rem; background: #fff; position: fixed; top: 10rem; left: 50%; transform: translateX(-50%); z-index: 9991; opacity: 0; visibility: hidden; transition: .5s; }
.modal.active{ opacity: 1; visibility: visible; }
.modal .content .time{ display: block; font-size: 1.2rem; }
.modal .content h2{ font-size: 2.4rem; margin-bottom: 1rem; }
.modal .content p + p{ margin-top: 1.5em; }
.modal .close{ width: 4rem; height: 4rem; display: block; position: absolute; top: 2rem; right: 2rem; cursor: pointer; }
.modal .close:before{ content: ''; width: 100%; height: 1px; background: var(--sub-color01); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); }
.modal .close:after{ content: ''; width: 100%; height: 1px; background: var(--sub-color01); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-45deg); }