/* CSS Document */

@media screen and (max-width:768px){
    
    header .top_wrap h1{ font-size:0.8em; line-height:150%; margin-top:20px; }
    header .top_wrap h1 span{ display: none;}
    h2.basic_h2{ font-size: 22px; margin-bottom: 4.2rem; }
    h2.basic_h2 span{ font-size: 40px; line-height: 1.2;}
    h2.basic_h2 small{ font-size: 13px;}
    
/* Opening
-----------------------------------------*/
    .Opening { width:93%; height:160vw; position:relative; float:none; padding-top:0px; padding-bottom: 240px; margin:0 auto;}
    .Opening div.logo_02{ position: absolute; top: 37%; left: -15px; width: 70%; height: auto; z-index: 1;}
    .Opening .slick-dots{ display: none !important;}
    
/* スライダー1--------------------------- */
    .slider{ margin: 0; width: 100%;}
    ul.slider li img{ height:auto; width:100%;}
    .slider_wrap { margin: 9px 0 26px 0;}
    .slider1-dots { position: absolute; bottom: 10px; left: 20px;}
/* スライダー2--------------------------- */
    .slider2-dots { position: absolute; bottom: 20px; right: 20px;}
    
/* case_info--------------------------- */
    .case_info_wrap{  padding: 14rem 0 3rem;}
    .case_info_wrap h2{ width: 100%; font-size: 28px; margin: 0 auto 1.5rem; padding: 0 1rem; box-sizing: border-box; z-index: 1;}
    .case_info_wrap h2 span{ font-size: 17px; margin-bottom: 0.4rem; }
    .case_info_wrap h2:before{ margin: auto; top:-8.9rem; left:0; right: 0; text-align: center; background: url("../images/top/webp/case_h2_sp.webp") no-repeat 0 0/contain; width:300px; height: 175px; z-index: -1;  }
    .no-webp .case_info_wrap h2:before{ background-image: url("../images/top/case_h2_sp.png");}
    .case_info_wrap h2:after{ display: none; }
    .case_info_wrap h3{ font-size: 17px; border-width: 5px; padding-left: 0.7rem;}
    .case_list{ flex-wrap: wrap;}
    .case_list li.case_box{ width: 100%; padding: 1rem; }
    .case_list li.case_box p{ font-size: 12px;}
    .flex.case{ display: block; }
    .flex.case li{ width: 100%;}
    .flex.case li + li{ margin-top: 2rem;}
    .flex.case li:nth-child(2):after{ top: -27px; bottom: auto; left: 0; right:  0; margin: 0 auto; background-image: url("../images/top/icon-case_sp.svg") ; width: 26px; height: 26px;}
    
/* 背景固定の写真--------------------------- */
    .fixed-bg { position: relative; min-height: 33vh; background-attachment: fixed; background-size: cover; background-position: center;}
    .bg01 {background-image:url(../images/top/webp/bg_001_sp.webp) ; background-size: auto 100%;}
    .no-webp .bg01 {background-image:url(../images/top/bg_001_sp.jpg) ;}
    .bg02 { background-image:url(../images/top/webp/bg_002_sp.webp) ;}
    .no-webp .bg02 {background-image:url(../images/top/bg_002_sp.jpg) ;}
    .bg03 {background-image:url(../images/top/webp/bg_001.webp) ;}
    .no-webp .bg03 {background-image:url(../images/top/bg_003_sp.jpg) ;}

/* wrap001--------------------------- */
    #wrap001 { padding:20px 0 0 0;}
    #wrap001 .inner{ padding:0 20px 2rem; display: block;}
    #wrap001 p.text_01{ font-size:13px; border-bottom: #7A2424 1px solid; margin: 0 0 15px; padding: 0 0 5px 0;}
    #wrap001 .box_01 p.text_02{ font-size:12px; margin-top:0; }
    #wrap001 .box_01,#wrap001 .box_02{ width:100%; float:none; padding: 25px 18px; height:auto; border-radius: 10px;}
    #wrap001 .box_02{ margin-left:0; margin-top:25px;}
    #wrap001 table{ height:auto; margin-bottom:20px; }
    #wrap001 .box_02 p.text_02 { font-size: 14px; letter-spacing: 0.1px;}
    #wrap001 .box_02 table td.aa{ padding-right:5px;}
    #wrap001 .box_02 table td { font-size: 14px;}
    #wrap001 .main_btn a { margin-top: 15px; padding: 5px 30px 5px 0;}
    #wrap001 .box_02 table { line-height: 2; margin-bottom:10px; }

/* wrap002--------------------------- */
    .wrap002{ padding: 2rem 0 0; }
    .wrap002 .flex_wrap{ display: block; }
    .wrap002 .img_box{ width: 100%; height: 180px; border-top-right-radius: 0; margin: 1.5rem 0 4rem;}
    .wrap002 .img_box span{ width: 200px; right: 0.5rem; }
    .wrap002 .text-box{ width: 100%; padding: 0 1.5rem 0;}
    .wrap002 .text-box .in{ width: 100%;}
    .wrap002 h2{ font-size: 28px; }
    .wrap002 h2 span{ font-size: 20px; }
    .wrap002 .banner{ margin: 0; width: 100%}
    .wrap002 .banner picture img{vertical-align: bottom;}
    
/* trouble--------------------------- */
    .trouble{ padding: 4rem 1rem 1.5rem; box-sizing: border-box;} 
    .trouble h2{ font-size: 17px; padding-top: 2rem; background-size: 80% auto;}
    .trouble h2 span{ font-size: 28px; padding: 0 0.2rem; }
    .trouble ul{ margin: 3rem auto 1.5rem; justify-content:space-around; flex-wrap: wrap; width: 100%;}
    .trouble ul li{ width: 48%; height: auto; font-size: 18px; padding: 2rem 0; }
    .trouble ul li span.icon1,.trouble ul li span.icon2,.trouble ul li span.icon3{  top:-27px; left: 50% ; margin: auto; width: 60px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
    .trouble ul li span.icon2{  bottom: auto; right: auto; width: 47px; }
    .trouble ul li span.icon3{  width: 53px; right: auto;}
    .trouble p{ margin-bottom: 1rem; }
    .trouble p span{ font-size: 24px; }
    
/* wrap004--------------------------- */
    #wrap004{ padding:2rem 0 0; background :#fcfcfc url("../images/top/webp/w4_bg.webp") no-repeat top right/850px;}
    #wrap004 h3{ padding:0 0 0 3rem; font-size:18px; margin: 1.5rem 0 1rem;}
    #wrap004 ul li{ width: 100%; margin-bottom: 1.5rem;}
    #wrap004 ul li h3 span{ top:-0.3rem; left: 0; font-size:60px;}

/* wrap005--------------------------- */
    #wrap005{ padding:45px 0 0; box-sizing:border-box;}
    #wrap005 .clearfix{ margin-bottom:20px;}
    #wrap005 .box_01{ width:85%; float:right; padding:0; margin-bottom:5px;}
    #wrap005 .maru{ top:95px; left:10px; width:29.5vw; z-index:1;}
    #wrap005 .box_02{ width:85%; float:right;}
    #wrap005 h3{ margin-bottom:5px; line-height:normal;}
    #wrap005 p{ margin-bottom:15px;}
    #wrap005 table td{ font-size:13px;}
    #wrap005 h5{ font-size:15px;}
    #wrap005 .mb1{ margin-bottom:15px;}
    #wrap005 h4 { padding-bottom: 5px; margin-bottom: 10px; border-bottom: #7A2424 1px solid;}
    
/* column--------------------------- */
    .column{ margin: 0; padding: 2rem 0;}
    .column .inner{ width: 100%; margin-bottom: 0;}
    .column h2{ font-size: 20px; letter-spacing: 1px; margin-bottom: 10px;}
    .column h2 + p{ width: 100%; font-size: 12px; height: 30px; margin-bottom: 25px;}
    .column h2 img{ width: 85px; padding-bottom: 15px;}
    .column h3{ font-size: 20px;}
    .column h4{ font-size: 15px;}
    .column .link_wrap{ width: 100%; flex-wrap: wrap; margin: 4.5rem 0 1rem;}
    .column .link_wrap li{ width: 47%; height: 135px; margin-bottom: 20px;}
    .column .link_wrap li p{ font-size: 12px; letter-spacing: 0; margin-bottom: 10px;}
    .column .link_wrap li img{ width: 100px;}
    .column .link_wrap li a{ padding-top: 20px;}
    .column .link_wrap li img.icon{ width: 20px; height: 20px; bottom: 0;}

    .column_wrap{  padding: 1rem 1rem 2rem; margin-bottom: 2rem;}
    .column_page {overflow: scroll !important; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; display: block; height: 400px; padding: 0rem 1rem .5rem;}
    .column_page li{ margin: .5rem 0 0; width: 100%}
    .column_page li + li{ margin-top: 1rem;}
    .column_page li a { width: 100%; margin-bottom: 1.5rem; padding-top: 1.5rem;}
    .column_page li a .in { padding: 1rem;}
    .column_page li .in p{ font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .column_page li img{ width: 70%; height: auto; margin: 0 auto; display: block;}
    
/* instagram banner--------------------------- */
    .banner{ width:calc(100% - 40px); margin: 20px auto;}
    .insta_btn .insta_wrap{ background-image: url("../images/common/webp/bnr-insta-sp.webp"); padding:20px 20px 15px;}
    .insta_text_wrap{ display: block;}
    .insta_title{ font-size: 20px; margin-bottom: 10px;}
    .insta_btn .insta_text{ font-size: 13px;}
    .insta_id{ width: 200px; font-size: 16px; padding-bottom: 1px; margin-bottom: 10px;}
    
    .Opening .catcht_wrap{ top:130px; left: 0; width: auto; }
    .Opening .catcht_wrap .white_box{ width:auto; padding: 15px 20px 10px 10px; border-radius: 10px; display: inline-block; border-radius: 0 10px 10px 0; }
    .Opening .catcht_wrap .white_box p{ font-size: 17px; text-align: left; letter-spacing: 1px; line-height: 2.1;}
    .Opening .catcht_wrap .white_box p span{ font-size: 24px; letter-spacing: 2.5px; }
    .Opening .catcht_wrap .white_box ul{ padding: 0;}
    .Opening .catcht_wrap .white_box ul li p{ display: none;}
    .Opening .catcht_wrap img{ margin-top: 0;}
    .Opening .catcht_wrap .center_img{ width: 278px; display: block; margin: -10px 0 0 15px;}
    .Opening .catcht_wrap .small_text{ font-size: 8px; text-align: center; line-height: 1.8; margin: 0;}
    
    #wrap008 h2{ font-size: 22px; margin-bottom: 4.2rem; }
    #wrap008 h2 span{ font-size: 40px; line-height: 1.2;}
    #wrap008 h2 small{ font-size: 13px;}
    
/* reason--------------------------- */
    .reason{ padding: 2.5rem 0;}
    .reason h2 span{ font-size: 17px; }
    .reason .flex{ display: block;}
    .reason .text-box{ width: 95%; }
    .reason .img_box{ width: 95%; height: 180px; margin-left: auto; z-index: 0; background-image: url("../images/top/webp/reason_img_sp.webp");}
    .no-webp .reason .img_box{ background-image: url("../images/top/reason_img_sp.jpg");}
    .reason .title{  position: sticky; display: block; border-radius: 0; padding: 3rem 1.5rem 1rem; margin-top: -1.3rem; z-index: -1;}
    .reason .title .in{ width: 100%;}
    .reason .title+.in{ width: 100%; padding: 2rem 0 0 1.5rem; box-sizing: border-box;}
    .reason .min{ margin: 0.5rem 0 0; font-size: 27px; padding: .5rem 1rem 0;}
    .reason .min::before,.reason .min::after { position: absolute; width: 25px; height: 25px;}
    
/* not-used--------------------------- */
    .not-used{ width:calc(100% - 40px); margin: 2rem auto;}
    .not-used h2{ background-image: url("../images/top/webp/not-used_bg_sp.webp"); padding: 2rem 0 1rem; letter-spacing: 0; margin-bottom: 0; }
    .no-webp .not-used{ background-image: url("../images/top/not-used_bg_sp.jpg");}
    .not-used h2 span{ font-size: 50px; margin-right: .2rem; }
    .not-used h3{ margin: 1.4rem 0 .8rem;}
    .not-used ul{ display:block; padding: 20px; }
    .not-used ul li{ width: 100%; margin-bottom: 1rem;}
    .not-used ul li picture{ height: auto; }
    .not-used ul li picture:after{ width: 65vw; height: 49vw;}
    
/* features--------------------------- */
    .features{ padding: 0 0 3rem;}
    .features h3{ font-size: 24px;}
    .features h3 span{  font-size: 42px;}
    .features h4{ font-size: 16px;     }
    .features .flex_wrap{ margin-bottom: 19rem;}
    .features .img_box,.features .img_box2,.features .img_box3{ width: 80%; height: 135px;}
    .features .text-box{top: 7rem; width: 100%;}
    .features .text-box .in,.features .text-box .in.left{ width:calc(100% - 40px); margin: 0 auto; padding: 1rem 1.5rem 1.5rem;}
    
/* doctor--------------------------- */
    .doctor{ background-image: url("../images/top/webp/dr_bg_sp.webp"); padding: 2.5rem 0 4rem;}
    .no-webp .doctor{background-image: url("../images/top/dr_bg_sp.jpg"); }
    .doctor h3{ font-size: 24px; margin-bottom: .5rem;}
    .doctor h4{ font-size: 28px;}
    .doctor h4 span{ font-size: 16px; }
    .doctor .text-box{ width:calc(100% - 20px); padding: 11.5rem 1.5rem 2rem; margin-top: 12.5rem; }
    .doctor .text-box .in{ width: 100%;}
    .doctor .text-box .in-box{ width: 100%;}
    .doctor .img-box{ top:-5rem; bottom: auto; margin: auto; right: 0; width:calc(100% - 20px); height: 230px;}
    .doctor .img-box img{ width: 240px; height: auto; bottom: 0; left: 0; right: 0; margin: 0 auto;}
    
/* jidv--------------------------- */
    .jidv_wrap { padding: 2.5rem 0 3rem; text-align: left; }
    .jidv_wrap img{ margin: 2rem auto 0; display: block;}
    
/* equipment_wrap--------------------------- */
    .equipment_wrap{ width: 100%; padding: 2.5rem 1.5rem;}
    .equipment_wrap h3{ font-size: 20px; margin-bottom: 2rem;}
    .equipment_wrap h4{ font-size: 17px; margin: 2rem 0 1rem; padding-left: 2.5rem;}
    .equipment_wrap h4 span{ font-size: 20px;}
    .equipment_wrap .text_area,.equipment_wrap .img_area{ width: 100%; }
    .equipment_wrap .flex_wrp{ display: block; margin: 5rem 0 3rem;}
    .flex_img_wrap{ margin: 0 0 1.5rem;}
    .flex_img_wrap picture{ width: 49%; height: auto;}
    .flex_img_wrap .w_100_img{ height: auto;}
    .flex_img_wrap picture span{ width: 50px; height: 50px; font-size: 26px;}
    .equipment_wrap .text_area{ margin-bottom: 0;}
    .equipment_wrap .text_area img{ margin-bottom: 4rem;}

}