/* CSS Document */

header .top_wrap h1{ font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-weight: 100; font-size:15px; float: left;color:#7A2424; margin:10px 0 0; font-weight: normal;}

/* Opening
-----------------------------------------*/
.Opening { width:93%; height:90vh; overflow:hidden; position:relative; z-index:0; margin: 0 auto 5rem;}
.Opening .catcht_wrap{ position: absolute; top:4vw; left: 50px; width: 660px; z-index: 1; }
.Opening .catcht_wrap .white_box{ width: 100%; background:rgb(255, 255, 255, 0.75); padding: 0.9rem 0; box-sizing: border-box;}
.Opening .catcht_wrap .white_box p{ font-size: 34px; color: #7A2424; line-height: 2; text-align: center;}
.Opening .catcht_wrap .white_box p span{ font-size: 120%; line-height: 1; display: inline-block; background: rgba(0, 0, 0, 0) linear-gradient(transparent 55%, rgba(248, 160, 162, 0.5) 0%) repeat scroll 0 0;}
.Opening .catcht_wrap .white_box p span em{ font-size: 150%; line-height: 0; display: inline-block;}
.Opening .catcht_wrap .white_box ul{ padding: 0 40px; display: flex; justify-content:center;}
.Opening .catcht_wrap .white_box ul li{ width: 32%; text-align: center;}
.Opening .catcht_wrap .white_box ul li p{font-size: 20px;}
.Opening .catcht_wrap .white_box ul li img{ width: 150px; background: #FFF; padding: 39.4px 10px; border-radius: 90%; box-sizing: border-box; border:#7A2424 2px solid; margin: 0; }
.Opening .catcht_wrap img{ margin-top: -30px;}
.Opening .catcht_wrap .small_text{ font-size: 10px; letter-spacing: 0; margin-top: 10px;}

/* スライダー1--------------------------- */
.slider{ margin: 0 auto; width: 100%;}
.slider img{ height: auto; width: 100%;}
.slick-prev:before,.slick-next:before { color: #000;}

/* スライダー2--------------------------- */
.slider2{width: 100%; display:flex; flex-wrap:wrap; margin-bottom: -5rem;}
.slider2 li{ width:20%; padding: 0 10px;}
.slider2 img{ height: auto; width: 100%;}

/* 背景固定の写真--------------------------- */
.fixed-bg {position: relative; min-height: 40vh; background-attachment: fixed;background-size: cover; background-position: center;}
.fixed-bg .fixed-bg-content { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; width: 90%; margin: 0 auto; text-align: center; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);}
.bg01 {background-image:url(../images/top/webp/bg_001.webp) ;}
.no-webp .bg01 {background-image:url(../images/top/bg_001.jpg) ;}
.bg02 {background-image:url(../images/top/webp/bg_002.webp) ;}
.no-webp .bg02 {background-image:url(../images/top/bg_002.jpg) ;}
.bg03 {background-image:url(../images/top/webp/bg_003.webp) ;}
.no-webp .bg03 {background-image:url(../images/top/bg_003.jpg) ;}
.bg04 {background-image:url(../images/top/webp/bg_004.webp) ;}
.no-webp .bg04 {background-image:url(../images/top/bg_004.jpg) ;}

/* case_info--------------------------- */
.case_info_wrap{ background: #F6ECED; padding: 15rem 0 7rem;}
.case_info_wrap h2{ position: relative; width: 440px; font-size: 42px; margin: 0 auto 4rem; display:block;}
.case_info_wrap h2 span{ font-size: 30px; line-height: 1.6; display: inline-block;}
.case_info_wrap h2:before{ position: absolute; top:-1.5rem; left: -17rem; content: ""; background: url("../images/top/webp/case_h2.webp") no-repeat 0 0/contain; width:240px; height: 240px; }
.no-webp .case_info_wrap h2:before{ background-image: url("../images/top/case_h2.png");}
.case_info_wrap h2:after{ position: absolute; top:-4rem; right: -18rem; content: ""; background: url("../images/top/webp/case_text.webp") no-repeat 0 0/contain; width:288px; height: 258px; }
.no-webp .case_info_wrap h2:after{ background-image: url("../images/top/case_text.png");}
.case_info_wrap h3{ font-size: 20px; font-weight: 300; border-left: #F8A0A2 3px solid; padding-left: 1rem;}
.case_list{ display: flex; justify-content: space-between;}
.case_list li.case_box{ background: #FFF; border-radius: 5px; width: 49%; padding: 2rem; box-sizing: border-box; box-shadow: 0 0 8px #CCC; }
.case_list li p{ font-size: 15px;}
.slider3 .slick-slide{ margin: 0 1rem;}
.flex.case{ margin: 1rem 0;}
.flex.case li{ position: relative; width: 46%; padding-top: 32px;}
.flex.case li:before{ position: absolute; top: 0; left: 0; content: "Before"; background: #575757; color: #FFF; display: flex; justify-content: center; align-items: center; width: 100%; height: 32px; font-size: 15px;}
.flex.case li:nth-child(2):before{ content: "After"; background: #F8A0A2;}
.flex.case li:nth-child(2):after{ position: absolute; top:0; bottom: 0; left: -25px; margin: auto 0; content: ""; background:url("../images/top/icon-case.svg") no-repeat center/contain; width: 20px; height: 20px;}

/* wrap001--------------------------- */
#wrap001{padding:2rem 0 6.3rem;}
#wrap001 .inner{ display: flex; margin-bottom: 0;}
#wrap001 p.text_01{ font-size: 22px; border-bottom:#333 1px solid; margin:0 0 20px;}
#wrap001 .box_01 p.text_02{ text-align:right; font-size:75%; margin-top:22px;}
#wrap001 .box_02 p.text_02{ font-size:15px;}
#wrap001 .box_01,#wrap001 .box_02{ background:#F6ECED; padding:30px 25px 20px; width:47.8%; height:380px; box-sizing:border-box;}
#wrap001 .box_02{ margin-left:40px;}
#wrap001 .box_02 table td{ font-size:15px; vertical-align:top;}
#wrap001 .box_02 table td.aa{ padding-top:5px;}
#wrap001 .box_02 table{	margin-top:10px;}
#wrap001 .box_02 table i,#footer .box1 table i{font-size:23px;}
#wrap001 .main_btn a,#wrap009 .main_btn a{ background:#FFF; margin-top:25px; margin-bottom:0; border-color:#FFF; font-size:13px;}
#wrap001 .main_btn a:after,#wrap009 .main_btn a:after{ background-image:url(../images/top/btn_2.png);}
#wrap001 .main_btn a:hover,#wrap009 .main_btn a:hover{ background:#7A2424; border-color:#7A2424; color:#FFF;}
#wrap001 .main_btn a:hover:after,#wrap009 .main_btn a:hover:after{ background-image:url(../images/top/btn_1.png);}

/* wrap002--------------------------- */
.wrap002{ padding: 5rem 0 3rem; }
.wrap002 .flex_wrap{ display: flex; justify-content: space-between; flex-direction:row-reverse; margin: 0 0 3rem;}
.wrap002 .img_box{ position: relative; width: 50%; height: 470px; background: url( "../images/top/webp/w2_img.webp") no-repeat center/cover; border-top-right-radius: 90px;}
.no-webp .wrap002 .img_box{ background-image: url("../images/top/w2_img.jpg");}
.wrap002 .img_box span{ position: absolute; bottom: -3.5rem; right: 3rem; }
.wrap002 .text-box{ width: 47%; padding-top: 3rem;}
.wrap002 .text-box .in{ width: 550px; margin-right: auto;}
.wrap002 h2{ font-size: 32px; text-align: center;}
.wrap002 h2 span{ font-size: 24px; }
.wrap002 h3{ margin-top: 1rem; text-align: center;}

/* trouble--------------------------- */
.trouble{ background: url("../images/top/webp/trouble_bg.webp") no-repeat 0 0/100% 70%; padding: 5rem 0;}
.no-webp .trouble{ background-image:url("../images/top/trouble_bg.jpg");}
.trouble h2{ font-size: 30px; text-shadow: 1px 2px 3px #808080; color: #FFF; padding-top: 4rem; text-align: center; background: url("../images/top/webp/trouble_h2.webp") no-repeat 50% 0/720px auto;}
.no-webp .trouble h2{ background-image: url("../images/top/trouble_h2.png");}
.trouble h2 span{ font-size: 40px; }
.trouble ul{ display: flex; justify-content: space-between; width: 875px; margin: 2rem auto 3rem;}
.trouble ul li{ position: relative; color: #333; width: 257px; height: 222px; font-size: 20px; font-weight: bold; text-align: center; background: #FFF; border-radius: 90%; padding-top: 4rem; box-sizing: border-box; }
.trouble ul li span{ color: #7A2424;}
.trouble ul li span.icon1{ position:absolute; top:-5px; left: 0; width: 94px;}
.trouble ul li span.icon2{ position:absolute; bottom:10px; right: 15px; width: 47px;}
.trouble ul li span.icon3{ position:absolute; top:10px; right: 20px; width: 57px;}
.trouble p{ text-align: center; margin-bottom: 1.2rem; }
.trouble p span{ font-size: 30px; color: #7A2424;}

/* wrap004--------------------------- */
#wrap004{ padding:6rem 0 2rem; background :url("../images/top/webp/w4_bg.webp") no-repeat 0 0/cover;}
.no-webp #wrap004{ background-image: url("../images/top/w4_bg.jpg");}
#wrap004 h3{ position: relative; padding:0 0 0 4rem; text-align:left; font-size:20px; margin: 1.5rem 0 1.2rem;}
#wrap004 ul li h3 span{ position: absolute; top:-1.1rem; left: 0; color:#F8A0A2; font-size:90px; font-family: "Tenor Sans", sans-serif; font-weight: 400; font-style: normal; line-height: 1;}
#wrap004 p{ font-size: 15px;}
#wrap004 ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
#wrap004 ul li{ width: 300px; margin-bottom: 3rem;}
#wrap004 ul li img{ width: 100%; height: auto;}

/* wrap005--------------------------- */
#wrap005{ padding:4rem 0 6rem; box-sizing:border-box;}
#wrap005 .inner{ position:relative;}
#wrap005 .clearfix{	margin-bottom:90px;}
#wrap005 .box_01{ width:60%; float:left; padding:0 50px 0 100px; box-sizing:border-box;}
#wrap005 .maru{	position:absolute; top:200px; left:-30px; width:200px; z-index:100;}
#wrap005 .box_02{ width:40%; float:left;}
#wrap005 p{	font-size:13px; margin-bottom:20px;}
#wrap005 h4,#wrap007 h4{ padding-bottom:5px; margin-bottom:20px;	border-bottom:#7A2424 1.5px solid;}
#wrap005 h5{ color:#7A2424;}
#wrap005 table{	color:#7A2424; margin-bottom:20px;}
#wrap005 table td{ line-height:180%;}
#wrap005 h3 span{ font-size:78%; padding-left:5px;}
#wrap005 .mb,#sub p.mb{ margin-bottom:0;}

/* column--------------------------- */
.column{ position: relative; background:#F6ECED; padding: 5rem 0; }
.column .inner{ width: 1200px;}
.column h3{ font-size: 24px; background: #7A2424; color: #FFF; padding: 1rem 0; text-align: center;  border-radius: 1rem 1rem 0 0;}
.column h4{ font-family: "Noto Sans JP", sans-serif; font-size: 15px; font-weight: bold; margin-bottom: .8rem; text-align: center;}
.column .link_wrap{ width: 900px; margin-bottom: 50px; display: flex; justify-content: space-between; margin: 0 auto 5rem;}
.column .link_wrap li{ position: relative; width: 210px; height: 210px; background: #FFF; text-align: center; border-radius: 7px; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .2);}
.column .link_wrap li a{ display: block; height: 100%; width: 100%;  box-sizing: border-box; padding-top:30px;}
.column .link_wrap li a:hover{ opacity: 0.7;}
.column .link_wrap li img.icon{ width:32px; height: 32px; position: absolute; bottom: 10px; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.column .link_wrap li p{ color:#7A2424; font-size: 16px; letter-spacing: 0; margin-bottom: 20px;}
.column .link_wrap li img{ width: 145px; height: auto;}
.column_wrap{ background: #FFF; padding: 4rem 2rem 4rem;}
.column_page { overflow-x: auto; height: 670px; scrollbar-color: #F8A0A2 #f0f0f0; scrollbar-width: thin; display: flex; justify-content: space-around; flex-wrap: wrap; background: #FFF; padding: 0rem 3rem 0; align-items: stretch;}
.column_page li{ margin: 0 0 2rem;}
.column_page li a { display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, .2); align-items: center; background: #FFF; border-radius: 0.5rem; width: 300px; margin-bottom: 1.5rem; overflow: hidden; height: 100%;}
.column_page li a .in { flex-grow: 1; padding: 1.3rem 1rem 0;}
.column_page li .in p{ font-size: 13px; }
.column_page li img{ height: 200px; width: 100%;}

/* instagram banner--------------------------- */
.banner{ width:100%; margin: 30px auto 30px; max-width: 960px;}
.insta_wrap{ display: flex; flex-direction: column; justify-content: center; padding: 2.25rem 3rem; border-radius: 2rem; position: relative; }
.insta_title{ font-weight: 700; font-size: 25px; line-height: 1.4; color: #fff; margin-bottom: 1rem; }
.insta_text{ letter-spacing: 0.07em; }

.insta_btn .insta_wrap{ background: url("../images/common/webp/bnr-insta.webp") no-repeat center/cover; color: #fff; padding: 30px 20px 30px 40px; }
.insta_btn .insta_text{ font-size: 16px; line-height: 1.57; color: #FFF;}
.insta_text_wrap{ display: flex; align-items: center; }
.insta_id{ color: #FFF; min-width: 200px; border:#FFF 1px solid; padding:5px 10px; font-size: 18px; line-height: 1.6; margin-right: 1.8rem; background:url("../images/common/search.png") no-repeat center right 1.1rem/1.5rem; }

/* reason--------------------------- */
.reason{ padding: 5rem 0 4rem;}
.reason h2 span{ font-size: 24px; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
.reason .flex{ flex-direction:row-reverse;}
.reason .text-box{ width: 48%; }
.reason .img_box{ width: 48%; height: 430px; background: url("../images/top/webp/reason_img.webp") no-repeat center/cover;}
.reason .title{ display: flex; justify-content: flex-end; background: #7A2424; color: #FFF; border-top-right-radius: 2rem; padding: 3rem 4rem; text-align: center;}
.reason .title .in{ width: 400px;}
.reason .title+.in{ width: 500px; margin-left: auto; padding-top: 2rem;}
.reason .min{position: relative; margin: 1rem 0 0; font-size: 32px; line-height: 1.4; padding: 1rem 0;}
.reason .min::before,.reason .min::after { position: absolute; width: 30px; height: 30px; content: '';}
.reason .min::before { border-left: solid 1px; border-top: solid 1px; top: 0; left: 0;}
.reason .min::after { border-right: solid 1px; border-bottom: solid 1px; bottom: 0; right: 0;}

/* not-used--------------------------- */
.not-used{ width: 1000px; margin: 3rem auto;}
.not-used h2{ color: #FFF; background: url("../images/top/webp/not-used_bg.webp") no-repeat left/cover; padding: 3rem 0 2rem; border-radius: 1rem 1rem 0 0; line-height: 1.4; margin-bottom: 0;}
.no-webp .not-used h2{ background-image: url( "../images/top/not-used_bg.jpg");}
.not-used h2:after{ content: none;}
.not-used h2 span{ font-size: 48px; font-family: "Tenor Sans", sans-serif;}
.not-used h3{ text-align: center; color: #333; font-weight: bold; font-family: "Noto Sans JP", sans-serif; margin: .8rem 0 1rem;}
.not-used ul{ display: flex; justify-content: space-around; background: #F2F2F2; padding: 3rem 3rem; box-sizing: border-box; border-radius: 0 0 1rem 1rem; box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .2); }
.not-used ul li{ width: 270px;}
.not-used ul li span{ font-size: 50px; color: #B4B4B4; text-align: center; display: block;}
.not-used ul li picture{ position: relative; height: 170px; display: block;}
.not-used ul li picture:after{ content: ""; position: absolute; top:-.3rem; right: 0; left: 0; margin: auto; background: url("../images/top/icon_x.svg") no-repeat 0 0/cover; width: 225px; height: 170px;}


/* features--------------------------- */
.features{ padding: 0 0 4rem;}
.features h3{ font-size: 30px; border-bottom: #ADADAD 1px solid; margin-bottom: 1rem;}
.features h3 span{ color: #D9858E; font-size: 45px; margin-right: 1rem;}
.features h4{ font-size: 20px; font-weight: 600; margin-bottom: .7rem;}
.features .flex_wrap{ position: relative; display: flex; margin-bottom: 6rem;}
.features .img_box,.features .img_box2,.features .img_box3{ width: 65%; height: 325px; background: url("../images/top/webp/features_001.webp") no-repeat center/cover;}
.features .img_box2{ background-image: url("../images/top/webp/features_002.webp"); margin-left: auto;}
.features .img_box3{ background-image: url("../images/top/webp/features_003.webp");}
.no-webp .img_box{ background-image: url("../images/top/features_001.jpg");}
.no-webp .img_box2{ background-image: url("../images/top/features_002.jpg");}
.no-webp .img_box3{ background-image: url("../images/top/features_003.jpg");}
.features .text-box{ position: absolute; top:5rem; left: 0; right: 0; margin: auto; width: 1000px;}
.features .text-box .in{ width: 550px; background: #FFF; padding: 1.5rem 3rem 2rem; box-sizing: border-box; margin-left: auto; box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .2); border-radius: .5rem;}
.features .text-box .in.left{ margin-left: 0; margin-right: auto;}

/* doctor--------------------------- */
.doctor{ background: url("../images/top/webp/dr_bg.webp") no-repeat center/cover; padding: 5rem 0 7rem;}
.no-webp .doctor{ background-image: url("../images/top/dr_bg.jpg");}
.doctor h2,.doctor h2 small{ color: #FFF;}
.doctor h2:after{ border-color: #FFF;}
.doctor h3{ font-size: 32px; color: #7A2424; margin-bottom: .8rem;}
.doctor h4{ font-size: 32px; color: #7A2424; line-height: 1.1; margin: 1rem 0 2rem;}
.doctor h4 span{ font-size: 20px; font-weight: 100;}
.doctor .flex_wrap{ position: relative;}
.doctor .text-box{ width: 60%; background: #FFF; padding: 4rem 8rem 3rem 0; border-top-right-radius: .5rem; box-sizing: border-box;}
.doctor .text-box .in{ width: 525px; margin-left: auto;}
.doctor .text-box .in-box{ width: 421px;}
.doctor .point{ color: #7A2424; font-weight: bold; font-size: 16px; margin-top: 2rem;}
.doctor .img-box{ position: absolute; top:0; bottom: 0; margin: auto; right: 0; background: url("../images/top/webp/dr_bg2.webp") center/cover; width: 47%; height: 450px;}
.no-webp .doctor .img-box{ background-image: url("../images/top/dr_bg2.jpg");}
.doctor .img-box img{ position: absolute; bottom: 0; left: 0;}

/* jidv--------------------------- */
.jidv_wrap { padding: 3rem 0 5.5rem; text-align: center; }
.jidv_wrap img{ margin: 2rem auto 0; display: block;}

/* equipment_wrap--------------------------- */
.equipment_wrap{ width: 1000px; margin: 0 auto; padding: 5rem 0; box-sizing: border-box;}
.equipment_wrap .c-head{ margin-bottom: 4rem;}
.equipment_wrap h3{ font-size: 24px; color: #7A2424; margin-bottom: 3rem;}
.equipment_wrap h4{ position:relative; font-size: 17px; margin: 3rem 0 1rem; line-height: 1.2; padding-left: 2.6rem; font-family: "Noto Sans JP", sans-serif; font-weight: 500; }
.equipment_wrap h4 span{ position: absolute; top: -3px; left: 0; color: #7A2424; font-family: "Tenor Sans", sans-serif; font-size: 20px;}
.equipment_wrap .flex_wrp{ display: flex; justify-content: space-between; margin: 8rem 0 4rem;}
.equipment_wrap .text_area{ width: 270px;}
.equipment_wrap .img_area{ width: 700px;}

.flex_img_wrap{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.flex_img_wrap picture{ position: relative; width: 340px; height: 340px;}
.flex_img_wrap picture span{ position: absolute; top:0; left: 0; background:#FFF; color: #7A2424; width: 70px; height: 70px; display: flex; justify-content: center;align-items: center; font-size: 30px; font-family: "Tenor Sans", sans-serif;}
.flex_img_wrap .w_100_img{ width: 100%; height: 340px; margin-bottom: 2rem;}

@media screen and (min-width: 768px) and (max-width: 1380px) {
    .Opening .catcht_wrap{ width: 46vw;}
    .Opening .catcht_wrap .white_box p{font-size: 26px;}
    .Opening .catcht_wrap .white_box ul{ padding: 0 7vw; margin-top: 5px;}
    .Opening .catcht_wrap .white_box ul li img{ width: 110px; padding: 30px 10px; }
    .Opening .catcht_wrap .white_box ul li p{ font-size: 16px;}
}
