header{ position: relative; }
header .mv{ position: relative; }
header .logo{ width: 290px; display: block; position: absolute; top: 30px; left: 20px; z-index: 10; }
header h1 {width: 350px;display: block;position: absolute;top: 10px;left: 20px;z-index: 10;}
header p{ font-size: 30px; color: #fff; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 10; font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
header p span{ display: block; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-size: 12px; text-align: center; }

.mv-slider img.pc{ display: block; width: 100%; }
.mv-slider img.sp{ display: none; }

.news-area{ padding-bottom: 50px; }
.news-area.wrap.movie01{ padding-bottom: 0px; margin-top:50px;}
.news-area dl.emergency{ border: solid 1px #00468c; border-radius: 5px; overflow: hidden; margin-bottom: 50px; }
.news-area dl.emergency dt{ background: #00468c; color: #fff; font-size: 20px; text-align: center; padding: 8px 0; }
.news-area dl.emergency dd{ padding: 20px 90px 25px; font-size: 16px; }
.news-area dl.emergency dd a.btn{ width: 250px; height: 50px; background: #00468c; color: #fff; margin: 20px auto 0; }
.news-area dl.normal{ display: flex; justify-content: center; align-items: center; }
.news-area dl.normal dt{ font-size: 12px; color: #00468c;padding-right: 20px; white-space: nowrap; width:140px;}
.news-area dl.normal dd{ padding-left: 24px; border-left: solid 2px #00468c; width: 100%; }
.news-area dl.normal dd li{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.news-area dl.normal dd li span{ padding-right: 2em; }


.top-info{ background: #f3f5f8; padding: 50px 0; }
.top-info h2{ font-size: 18px; color: #00468c; text-align: center; margin-bottom: 40px; font-weight: 600; white-space: nowrap; }
.top-info h2 span{ display: block; text-align: center; font-weight: normal; font-size: 14px; }
.top-info h2 strong{ font-size: 30px; }
.top-info .flex{ display: flex; justify-content: space-between; }
.top-info .flex > .left{ width: 380px; }
.top-info .flex > .right{ width: 380px; }
.top-info .address{ display: flex; justify-content: flex-end; margin-left: auto; align-items: center; margin-top: 10px; }
.top-info .address .left{ margin-right: 10px; }
.top-info .address strong{ display: block; text-align: right; color: #00468c; font-size: 20px; font-weight: 700; }
.top-info .address p{ white-space: nowrap; text-align: right; font-size: 12px; color: #00468c; }
.top-info .address a img{ display: block; }
.top-info .left a.btn{ margin-top: 50px; }
.top-info .right a.btn{ margin-top: 63px; }


div.img01{ width: 83.3333vw; height: 50vw; background: url(../images/index/bg01.jpg) no-repeat; background-size: cover; background-position: center; margin: 100px 0 0 auto; }
div.img02{ width: 100%; height: 500px; background: url(../images/index/bg02.jpg) no-repeat; background-size: cover; background-position: center; background-attachment: fixed; display: flex; justify-content: center; align-items: center; }
div.img02 .logo{ width: 226px; display: block; }
div.img03{ width: 83.3333vw; height: 50vw; background: url(../images/index/bg03.jpg) no-repeat; background-size: cover; background-position: center; margin-left: auto; }


.first h2,
.features h2,
.treatment h2,
.troubles h2,
.doctor h2{ font-size: 32px; color: #00468c; position: relative; padding-bottom: 40px; }

.features h2, .features h2 span,
.troubles h2, .troubles h2 span{ text-align: right; }

.first h2:after,
.treatment h2:after,
.doctor h2:after{ content: ''; width: calc(50vw - 400px); height: 1px; background: #00468c; position: absolute; bottom: 0px; left: calc(-50vw + 400px); }

.features h2:after,
.troubles h2:after{ content: ''; width: calc(50vw - 400px); height: 1px; background: #00468c; position: absolute; bottom: 0px; right: calc(-50vw + 400px); }

.first h2 span,
.features h2 span,
.treatment h2 span,
.troubles h2 span,
.doctor h2 span{ display: block; font-size: 12px; color: #66b9e9; }


.first{ padding-bottom: 100px; }
.first h2{ margin-bottom: 40px; padding-top: 90px; }
.first h2:before{ content: ''; width: 100%; height: 100%; border-bottom: solid 1px; border-right: solid 1px; border-radius: 0 0 5px 0; position: absolute; bottom: 0; right: 0; }
.first a.btn{ margin: 40px auto 0; }


.features{ padding: 0 0 70px; }
.features h2{ padding-top: 70px; }
.features h2:before{ content: ''; width: 100%; height: 100%; border-bottom: solid 1px; border-left: solid 1px; border-radius: 0 0 0 5px; position: absolute; bottom: 0; left: 0; }
.features h3{ font-size: 26px; color: #00468c; margin-bottom: 10px; }
.features-list{ margin-top: 70px; }
.features-list li .img{ width: calc(50vw + 300px); display: flex; }
.features-list li:nth-of-type(odd) .img{ margin-left: calc(-50vw + 400px); }
.features-list li:nth-of-type(even) .img{ margin-right: calc(-50vw + 400px); margin-left: auto; }
.features-list li .img .left{ width: calc(100% - 300px); height: 300px; background-repeat: no-repeat;  background-size: cover; background-position: center;}
.features-list li:nth-of-type(1) .img .left{ background-image: url(../images/index/features01.jpg); }
.features-list li:nth-of-type(2) .img .left{ background-image: url(../images/index/features02.jpg); }
.features-list li:nth-of-type(3) .img .left{ background-image: url(../images/index/features03.jpg); }
.features-list li:nth-of-type(4) .img .left{ background-image: url(../images/index/features04.jpg); }
.features-list li:nth-of-type(even) .img .left{ order: 2; }
.features-list li .img .right{ width: 300px; background: #cad1de; display: flex; align-items: flex-end; }
.features-list li:nth-of-type(odd) .img .right{ justify-content: flex-end; }
.features-list li:nth-of-type(even) .img .right{ order: 1; }
.features-list li .img .right img{ display: block; width: 185px; margin-bottom:10px; }
.features-list li:nth-of-type(odd) .img .right img{ margin-right: 10px; }
.features-list li:nth-of-type(even) .img .right img{ margin-left: 10px; }
.features-list li .content{ padding: 50px 0 40px 120px; position: relative; }
.features-list li:nth-of-type(even) .content{ margin-left: 120px; }
.features-list li .content .number{ width: 70px; height: 40px; display: flex; align-items: center; justify-content: space-between; position: absolute; top: 50px; left: 0; }
.features-list li .content .number span{ font-size: 12px; color: #00468c; letter-spacing: 0; white-space: nowrap; border-bottom: solid 1px; }
.features-list li .content .number strong{ font-size: 50px; color: #00468c; }
.features a.btn{ margin: 40px auto 40px; }

.features-list li .img .left{ opacity: 0; transition: 1.8s; transition-delay: .3s; transform: translateY(-15px); }
.features-list li .img .right{ opacity: 0; transition: 1.8s; transition-delay: .8s; transform: translateY(15px); }
.features-list li .img.active .left{ opacity: 1; transform: translateY(0); }
.features-list li .img.active .right{ opacity: 1; transform: translateY(0); }

.treatment{ padding: 0 0 100px; }
.treatment h2{ margin-bottom: 40px; padding-top: 70px; }
.treatment h2:before{ content: ''; width: 100%; height: 100%; border-bottom: solid 1px; border-right: solid 1px; border-radius: 0 0 5px 0; position: absolute; bottom: 0; right: 0; }
.treatment .treat-list{ margin-top: 50px; }
.treatment a.btn{ margin: 40px auto 0; }


.troubles{ background: url(../images/index/bg04.jpg) no-repeat; background-size: cover; padding: 0 0 100px; }
.troubles h2{ color: #fff; border-color: #fff; padding-top: 70px; }
.troubles h2:before{ content: ''; width: 100%; height: 100%; border-bottom: solid 1px; border-left: solid 1px; border-radius: 0 0 0 5px; position: absolute; bottom: 0; left: 0; }
.troubles h2 span{ color: #fff; }
.troubles h2:after{ background: #fff; }
.troubles .inner{ max-width: 360px; margin: 80px 0 0 auto; }
.troubles .inner h3{ font-size: 26px; color: #fff; margin-bottom: 20px; }
.troubles .inner p{ color: #fff; }
.troubles .inner a.btn{ background: #fff; margin-top: 20px; }
.troubles .inner a.btn:hover{ background: #00468c; }
.troubles .inner a.btn:hover:after{ border-color: #fff; }


.doctor{ padding: 0 0 100px; }
.doctor h2{ padding-top: 70px; }
.doctor h2:before{ content: ''; width: 100%; height: 100%; border-bottom: solid 1px; border-right: solid 1px; border-radius: 0 0 5px 0; position: absolute; bottom: 0; right: 0; }
.doctor .flex{ display: flex; justify-content: space-between; margin-top: 50px; }
.doctor .flex .left{ width: 360px; }
.doctor .flex .right{ width: 300px; }
.doctor .flex .left h3{ font-size: 26px; color: #00468c; margin-bottom: 40px; }
.doctor .flex .left dl dt{ font-size: 18px; color: #00468c; }
.doctor .flex .left dl dd{ font-size: 26px; color: #00468c; margin-bottom: 20px; }
.doctor .flex .left a.btn{ margin-top: 40px; }


/****** inveiw ****/

.fade-up{ opacity: 0; transition: 1.4s; transition-delay: .4s; transform: translateY(-10px); }
.fade-up.active{ opacity: 1; transform: translateY(0); }

header nav ul li {font-size: 0.9666vw; white-space: nowrap;}

.b {font-weight: 700;}
section.group ul {
	text-align: center;
	margin-bottom: 20px;
}
section.group ul li {
    display: inline-block;
	 vertical-align: top;
    width: 20%;
    padding-bottom: 20px;
    padding: 20px;
}
.group h3 { text-align: center; font-size: 26px; }
.group li { display: inline-block; vertical-align: top; width: 20%; padding-bottom: 20px; padding: 20px; } 
.group li span { line-height: 2;color: #00468c; } 
@media (max-width: 768px){ 
	.group h2 { font-size: 20px; margin-top:0; } 
	section.group ul li { width: 46%; padding: 0 2px 10px 2px; line-height: 1;} 
	.group span.b { font-size: 3.4vw; } 
	.group a { font-size: 3.2vw; } 
}


/*20201207*/

.common_questions_top {text-align:center; margin:20px auto;}
.common_questions_top img {width:100%; height:auto;}

.new-wrap {
    background: none;
    max-width: 800px;
    margin: 0 auto 50px;
    padding: 0;
}

.treatment-box {
    background: url(../images/index/webp/bg-treatment01.webp) #fff no-repeat center bottom 12px/calc(100% - 20px);
    padding: -12px 50px 2px;
    z-index: 0;
}

.treatment-box .bg-gray {
    background: #f9f9f9;
    padding: 45px 50px 45px;
    margin-top: 50px;
}
.treatment-box .bg-gray h3 {
    font-size: 22px;
    text-align: center;
    margin-bottom: 1em;
}

.kakaku-text {
    margin-bottom: 15px;
}

.treatment-box .bg-gray dl {
    border-bottom: solid 1px #00468b;
}

.treatment-box .bg-gray dl > .row {
    padding: 16px 0;
    border-top: solid 1px #00468b;
}

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

.treatment-box .bg-gray dl dd.row {
    width: 376px;
    position: relative;
}
.treatment-box .bg-gray dl dt {
    font-size: 16px;
    font-weight: 700;
    color: #00468c;
}