@charset "UTF-8";

@media screen and (max-width: 640px) {
    /**** header ****/

    #spSearch .closeBtn{
        width: 50px;
    }
    header #hnav_sp li{
        width: 50px;
        vertical-align: middle;
        margin-left: 30px;
    }
    header #hnav_sp li#h_searchBtn{
        width: 40px;
    }
    header span{
        width: 320px;
    }
    header #hnav_sp{
        margin-right: 20px;
    }

    /***************/

    #kobetsu_topArea #photoArea{
        height: auto;
    }
    #kobetsu_topArea #photoArea .slick-dots{
        justify-content: center;
        bottom: 30px;
    }
    #kobetsu_topArea h1{
        position: static;
        background: none;
        color: #383838;
        box-shadow: none;
        border: none;
        box-sizing: border-box;
        font-weight: bold;
        font-size: 34px;
        line-height: 1.6;
        padding: 0 20px 10px;
    }
    #kobetsu_topArea h1 span{
        padding: 20px 0 0;
    }
    span.updated.sp_only{
        text-align: center;
        font-size: 25px;
        margin-bottom: 60px;
    }
    .ttl-area{
        text-align: center;
        margin: 60px 0 0;
        font-size: 23px;
    }
    .ttl-area span{
        padding: 0 1em;
        display: inline-block;
        position: relative;
    }
    .ttl-area span:after{
        content: '／';
        position: absolute;
        right: -0.5em;
    }
    .ttl-area span:last-of-type:after{
        content: none;
    }

    #kobetsuDetail{
        border-top: 1px #e5e5e5 solid;
    }


    .wrap{
        width: auto;
        padding-left: 32px;
        padding-right: 32px;
    }
    .dr-pr h2{
        font-size: 32px;
    }
    .pickup-dr{
        align-items: center;
    }
    .pickup-dr .image .image-wrap{
        width: 221px;
        height: 221px;
        border-radius: 112px;
        overflow: hidden;
    }
    .pickup-dr .txt p{
        display: none;
    }
    .pickup-dr .txt h3{
        font-size: 39px;
    }
    .pickup-dr .txt h3 span{
        font-size: 23px;
        margin-bottom: 10px;
    }
    .pickup-dr .txt dl{
        display: block;
        margin: 20px 0 0;
    }
    .pickup-dr .txt dl dt span{
        color: #383838;
        background: none;
        font-size: 23px;
        padding: 0;
    }
    .pickup-dr .txt dl dd li{
        font-size: 23px;
    }

    .recommendation .wrap{
        padding-left: 0;
        padding-right: 0;
    }
    .recommendation h2{
        font-size: 27px;
    }
    .recommend-list li{
        margin: 0 12px;
    }
    .recommendation ul.recommend-list li h4, .panel-group ul li dd h4{
        font-size: 27px;
        padding-top: 50px;
    }
    .recommendation ul.recommend-list li h4 span:before, .panel-group ul li dd h4 span:before{
        width: 49px;
        height: 49px;
        left: -30px;
        top: -18px;
    }
    .recommendation ul.recommend-list li .recommender h3{
        font-size: 27px;
    }
    .recommendation ul.recommend-list li .recommender h3 span, .recommendation ul.recommend-list li p{
        font-size: 23px;
    }
    .slick-dots{
        display: flex;
    }
    .slick-dots li{
        width: 20px;
        height: 20px;
    }
    .slick-dots li button:before{
        content: none;
    }

    #kobetsu_topArea #photoArea.dr-detail{
        /*height: 260px;*/
        height: auto;
    }

    .dr-intro{
        background: #fff;
    }
    .dr-intro h1, .dr-intro .pr-content .left h4, .dr-intro .pr-content .left p{
        color: #383838;
    }
    .dr-intro h1{
        font-size: 39px;
    }
    .dr-intro h1 span{
        font-size: 27px;
    }
    .dr-intro .pr-content .left p, .dr-intro .pr-content .left h4{
        font-size: 23px;
    }
    .pr-content{
        display: block;
    }
    .dr-intro .pr-content .left{
        width: 100%;
        padding-right: 0;
    }
    .pr-content .right{
        display: none;
    }

    .panel-group ul{
        display: block;
    }
    .panel-group ul li{
        width: 100%;
        margin-bottom: 80px;
    }
    .panel-group ul li:last-of-type{
        margin-bottom: 0;
    }
    .panel-group ul li dt .image .image-wrap{
        width: 150px;
        height: 150px;
        border-radius: 75px;
    }
    .panel-group ul li dt{
        width: 445px;
    }
    .panel-group ul li dt .txt h3{
        font-size: 27px;
    }
    .panel-group ul li dt .txt h3 span{
        font-size: 23px;
    }
    .panel-group ul li dd:before{
        left: 130px;
    }
    .panel-group ul li dd .time{
        margin-top: 30px;
    }
    .panel-group .panel:nth-of-type(2) ul li:before{
        width: 66px;
        height: 76px;
    }
    .panel-group .panel:nth-of-type(2) ul li .panel-head{
        font-size: 28px;
        padding: 60px 0 20px;
    }
    .panel-group .panel:nth-of-type(2) ul li .date{
        font-size: 20px;
    }

    /*** recommend ***/

    .mainV{
        margin-top: 88px;
    }

    .ranking .wrap{
        width: 100%;
        padding: 130px 32px 0;
        box-sizing: border-box;
    }
        .ranking h2, .new-arrival h2{
            font-size: 28px;
        }
        .ranking ol{
            flex-wrap: wrap;
        }
        .ranking ol > li{
            width: calc(50% - 15px);
            margin-bottom: 100px;
        }
        .ranking ol > li .thumb{
            margin-bottom: 10px;
        }
        .ranking ol > li .thumb p:before, .new-arrival ul.new-arrival-list li .intro .thumb .inner p:before{
            top: 4px;
        }
        .ranking ol > li ul li{
            margin: 0;
            font-size: 20px;
        }
        .ranking .btn{
            margin-top: -40px;
            font-size: 24px;
        }

    .new-arrival .wrap{
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
        .new-arrival ul.new-arrival-list li{
            margin-right: 12px;
            margin-left: 12px;
        }
        .new-arrival ul.new-arrival-list li .thumb{
            width: 50%;
            height: 150px;
        }
        .new-arrival ul.new-arrival-list li .intro .thumb .inner{
            width: 100%;
            height: 150px;
        }
        .new-arrival ul.new-arrival-list li .intro .intro-info{
            width: calc(50% - 20px);
        }
        .new-arrival ul.new-arrival-list li .intro .intro-info p{
            font-size: 20px;
        }
        .new-arrival ul.new-arrival-list li .balloon dl dt{
            font-size: 23px;
            padding-left: 64px;
            margin: 44px 0 16px;
        }
        .new-arrival ul.new-arrival-list li .balloon dl dt:before{
            width: 49px;
            height: 49px;
            top: -19px;
        }
        .new-arrival ul.new-arrival-list li .recommender{
            justify-content: center;
        }
        .new-arrival ul.new-arrival-list li .recommender .thumb{
            width: auto;
            margin-right: 30px;
        }
        .new-arrival ul.new-arrival-list li .recommender .thumb .inner{
            width: 150px;
            height: 150px;
            border-radius: 100px;
        }
        .new-arrival ul.new-arrival-list li .recommender .txt{
            max-width: 250px;
        }
        .new-arrival ul.new-arrival-list li .recommender .txt p{
            font-size: 24px;
        }
        .new-arrival ul.new-arrival-list li .recommender .txt p span{
            font-size: 18px;
            margin-bottom: 6px;
        }
        .new-arrival ul.new-arrival-list .slick-dots{
            justify-content: center;
            bottom: -40px;
        }
        .new-arrival ul.new-arrival-list .slick-dots li{
            width: 9px !important;
            height: 9px !important;
            border-radius: 5px;
            padding: 0;
            border: solid 1px #2ebe9d;
        }
        .new-arrival ul.new-arrival-list .slick-dots li.slick-active{
            background: #2ebe9d;
        }
            .more_to_user{
                    width: 400px;
                    height: 60px;
                    display: flex;
                    margin: 0 auto;
                    justify-content: center;
                    align-items: center;
                    background: #fff;
                    color: #2ebe9d;
                    border: solid 1px;
                    position: relative;
                    font-size: 16px;
                    transition: .3s;
                    margin-top: 30px;
                    font-size: 24px;
            }
    
    #btoc_implantheader{
        width: 100%;
        background: url(../images/bg_btob_sp.gif) no-repeat center bottom #aaaaaa;}
    #btoc_implantheader h1{
        height: 320px;
        font-size: 32px;
        line-height: 1.4em;
        text-align: center;
        letter-spacing: 1px;
        padding: 70px 0 0 0;}
    .btoc.implant section h2{font-size: 36px;}
    .btoc.implant section h2 br.sp{display: block;}
    .btoc.implant .note h4,
    .btoc.implant section h4{text-align: center;}
    .btoc.implant .gray + p,
    .btoc.implant .note p{font-size: 23px;}
    .btoc.implant .gray br{display: block;}
    .btoc.implant .gray + p{padding: 0 20px;}
    
    /*.implant_dr_area{padding: 0 25px;margin-bottom: 50px;}*/
    .implant_dr_area{padding: 0 25px;margin-bottom: 20px;}
    .implant_dr_area .implant_in,
    .implant_dr_area .dr_list{width: 100%;}
    .implant_dr_area .intro{text-align: justify;}
    
    .implant_dr_area .tit{font-size: 1.53em; line-height: 1.6;}
    .implant_dr_area .tit img{width: 50px;}
    
    .implant_dr_area table tr,
    .implant_dr_area table th,
    .implant_dr_area table td{display: block;}
    .implant_dr_area table tr:nth-child(odd){background: none;}
    
    .implant_dr_area table th{background: #f5fcfa;padding: 20px;border-right: none;border-bottom: 1px solid #e6e6e6;}
    .implant_dr_area table td{padding: 20px;}
    
    .implant_dr_area .dr_list .dr_list_in .box{flex-basis: calc(100%/2 - 10px);margin-bottom: 20px;}
    .implant_dr_area .dr_list .dr_list_in .box .top p:first-child{font-size: /*3vw*/2.7vw;}
    .implant_dr_area .dr_list .dr_list_in .box .top p:last-child{font-size: 3.5vw;}
    .implant_dr_area .dr_list .dr_list_in .box .top p:last-child:before{margin: 15px auto 10px;}
    .implant_dr_area .dr_list .dr_list_in .box .bottom ul li{font-size: 2.2vw;}

    .implant_dr_area .dr_list .dr_list_in .box:nth-of-type(3n+2),
    .implant_dr_area .dr_list .dr_list_in .box:nth-of-type(2),
    .implant_dr_area .dr_list .dr_list_in .box:nth-of-type(1),
    .implant_dr_area .dr_list .dr_list_in .box:nth-of-type(3n+1),
    .implant_dr_area .dr_list .dr_list_in .box:nth-of-type(3){ margin-right: 0; margin-left: 0; }
    
    /**** 200625 ****/

    .movei-wrap01{ width: 100%; padding: 80px 32px 60px 32px; box-sizing: border-box; }
    .movei-wrap01 h3, .btb-price h3, .btob2 .data-book p.head span{ font-size: 36px; }
    .movei-wrap01 dl{ width: 100%; }
    .movei-wrap01 dl + dl{ margin-top: 50px; }
    .movei-wrap01 dl dt{ font-size: 24px; margin-top: 0; }

    .btob2 .data-book{ padding-top: 40px; }
    .btob2 .data-book .contct-btn{ margin: 36px auto 0; }

    .btob5 .flex{ width: 100%; flex-wrap: wrap; box-sizing: border-box; padding-right: 32px; }
    .btob5 .flex ul{ width: 100%; }
    .btob5 .flex dl.movie{ width: 100%; margin-top: 50px; }
    .btob5 .flex dl.movie dt{ font-size: 20px; }
    .btob5 .flex dl.movie dd iframe{ height: 300px; }

    .btb-price{ padding: 80px 0 60px; }
    .btb-price table th, .btb-price table td{ font-size: 24px; }
    .btb-price h4{ font-size: 24px; }
    .btb-price ul li{ font-size: 20px; }
    .btb-price .inner{ width: 100%; box-sizing: border-box; padding: 0 32px; }


    /**** 200923 ****/

    .bnr_area{ width: 100%; }
    .clinicList .mark-box{ top: 30px; }
    .clinicList .mark-box .mark-star img{ width: 22px; }

    .aboutCriteria{ width: auto; margin-left: 32px; margin-right: 32px; }
    .aboutCriteria p{ font-size: 22px; }
    .aboutCriteria.green p span:before{ top: 2px; }
    .aboutCriteria a.btn{ font-size: 18px; }
    
    .aboutPrimary{ width: auto; }
    .aboutPrimary .inner{ padding-top: 30px; }
    .aboutPrimary h3{ font-size: 28px; line-height: 1.6; padding-left: 28px; }
    .aboutPrimary h3:before{ top: 0; }
    .aboutPrimary h3 + p{ font-size: 18px; }
    .aboutPrimary dl dt{ width: 75px; }
    .aboutPrimary dl .row:nth-of-type(1) dt img{ width: 53px; }
    .aboutPrimary dl .row:nth-of-type(2) dt img{ width: 25px; }
    .aboutPrimary a.btn{ font-size: 18px; }
    .aboutPrimary small{ font-size: 18px; line-height: 1.4; }
    .aboutPrimary small img{ width: 20px; }
    .aboutPrimary dl dd{ font-size: 20px; }

    #popupBox02 h3{ font-size: 28px; }
    #popupBox02 h3 + p{ font-size: 18px; line-height: 1.4; }
    #popupBox02 dl dt{ font-size: 24px; }
    #popupBox02 dl dd{ font-size: 18px; }



    /**** 210308 ****/

    .btob1 h2{ font-size: 30px; }
    .mokuji h2, .result h2, .picup h2{ font-size: 36px; }

    .result{ width: calc(100% - 64px); }
    .result .result-list dl{ width: 100%; }
    .result .result-list dl:nth-of-type(n+2){ margin-top: 40px; }
    .result .result-list dl dt{ font-size: 1.4em; }
    .result .result-list dl dt span{ padding-left: 55px; background-size: 40px; }
    .result .result-list + p{ font-size: 1.2em; text-align: left; }
    .result .merit li{ flex-wrap: wrap; }
    .result .merit li .img{ width: 100%; margin-bottom: 30px; }
    .result .merit li dl{ width: 100%; }
    .result .merit li dl dt{ font-size: 1.4em; text-align: center; }
    .result .merit li dl dd{ font-size: 1em; }

    .picup .inner{ width: calc(100% - 64px); }
    .picup .img-wrap{ padding: 20px; }

    .btob3, .btob2 .data-book, .result, .movei-wrap01, .picup, .btob5, .btb-price, .btob6{ padding-top: 140px; }


    /*** 210423 ***/

    section.intro h3{ font-size: 36px; line-height: 1.4; }

}