@charset "utf-8";
/* CSS Document */

/* =======================================
	2024.07  
    SWEDEN HOUSE FOR CLINIC
    SMPH
======================================= */

/*SP 追加スタイル style.cssを継承*/

@media screen and (max-width: 640px) {
    
    body{
    overflow-x: hidden;
    }
    
    section{
        min-width:auto;
    }
    
    /*--- FV ---*/
    div#fv{
        display:block;
        flex-wrap:none;
        justify-content: none;
        height:100vh;
    }
    
    div#fv div#fv_pho_l{
        display:none;
    }
    div#fv div#fv_pho_s{
    width:100%;
    height:15%; 
        margin-top:2.5vh;
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -ms-flex-wrap: nowrap;
  	flex-wrap: nowrap;
    justify-content:space-between;
        flex-direction:row;
}

div#fv div#fv_pho_s > div{
    width:32.6%;
    height:15vh;  
}
  
    div#fv div#fv_wrap{
    margin:0;
    position:relative;
  	display:contents;
    -ms-flex-wrap: none;
  	flex-wrap: none;
    justify-content:none;
	gap: 0px;
    /*width:40%;
    height:100%;
    background:#0e6236;*/
}
    
    /*div#fv div#fv_pho_s::before{
        content: '';
  display: block;
  width: 100%;
  height: 38%;
  background-image: url(../img/sp_fv_pho1_l.jpg);
  background-size: cover;
    }*/
    
   div#fv div#fv_text{
    width:100%;
    display:flex;
      align-items: center;
      justify-content: center;
       height:80%;
}
    div#fv #sp_fv_parts{
    height:16%;
    width:100%;
    background: url("../img/sp_fv_parts.png") no-repeat right bottom;
    background-size:contain;
    position:absolute;
    right:0;
    bottom:0;
}
    
    
div#fv div#fv_text_wrap{
    width:82%;
    margin:0 auto;
    position:relative;
    z-index:5;
}
    
div#fv div#fv_text_wrap h1{
    width:98%;
    margin:0 auto;
    }

div#fv div#fv_text_wrap h3{
    border-left:solid 7px #0e6236;
    padding-left:7px;
    color:#0e6236;
    font-size:0.8em;
    font-weight:bold;
    margin:0.5em 0;
    letter-spacing:0.15em;
    line-height:1.3em;
}

div#fv div#fv_text_wrap p{
    font-size:0.75em;
    margin-top:0;
    line-height:1.7em;

}
    
@media screen and (min-height: 700px) {
    div#fv div#fv_text{
       height:77%;
    }
    div#fv #sp_fv_parts{
    height:17vh;
    }
    
    div#fv div#fv_text_wrap h3{
        
    font-size:0.9em;
    }
    div#fv div#fv_text_wrap p{
    font-size:0.8em;
    margin-top:1em;
    line-height:1.8em;
    }
    }
    
div#fv div#fv_text_wrap p br{
    /*display:none;*/
    }
    
    
div#fv div#fv_btn{
    position:relative;
    width:90%;
    max-width:auto;
    text-align:center;
    height:auto;
}

div#fv_btn ul{
    margin:1.5em auto;
}

div#fv_btn ul li{
    position:relative;
    width:25%;
    max-width:auto;
    padding:0;
    display:inline-block;
    margin:0 3%;
    padding:0;
}

div#fv_btn ul li a{
    width:100%;
    height:100%;
    border:solid 1px #0e6236;
    display:block;
}

div#fv_btn ul li a img{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
}
       /*--- cont1 ---*/


        div.fc_area{
            position:relative;
            width:100%;
            margin:0 auto 0;
            padding-top:1em;
            overflow-x: hidden;
        }

        div.feature_title{
            position:relative;
            width:90%;
            margin: 0 auto;
            text-align:left;
    }
        div.feature_lead >div{
            width:90%;
            margin: 0 auto;
        }

        div.feature_title{
            margin:1em auto 2em;
        }

        div.feature_title h3{
            text-align:left;
        }

        div.feature_title h3 img{
            display:block;
            vertical-align: middle;
        }

        div.feature_title h3 img.num{
            width:auto;
            height:80px;
            margin-bottom:1em;
        }

        div.feature_title h3 img.t,
        div.feature_title h3 picture.t{
            width:auto;
            height:120px;
        }
    
        div.feature_title h3 img.ill{
            position:absolute;
        }

        #fc00 img.ill{
            left:50%;
            bottom:auto;
            top:1.5em;
            width:12%;
        }

        #fc01 img.ill{
            right:0;
            bottom:auto;
            top:1em;
            width:12%;
        }
        #fc02 img.ill{
            left:50%;
            bottom:auto;
            top:0em;
            width:10%;
        }
        #fc03 img.ill{
            right:0;
            bottom:auto;
            top:1.5em;
            width:16%;
        }
        #fc04 img.ill{
            left:50%;
            bottom:auto;
            top:1.5em;
            width:12%;
        }
        #fc05 img.ill{
            right:0;
            bottom:auto;
            top:1em;
            width:12%;
        }
        #fc06 img.ill{
            left:50%;
            bottom:auto;
            top:0.5em;
            width:12%;
        }

        div.feature_lead{
            width:100%;
            background:#f6f1e8;
            margin:0;
            padding:1.5em 0 1px;
        }

        div.feature_lead >div h5{
            font-size:0.9em;
            text-align: left;
        }

        div.feature_lead >div p{
            width:100%;
            font-size:0.8em;
            line-height:1.5em;/**/
            text-align: left;
        }

        div.feature_lead >div p span{
            display:inline;
        }

        div.feature_lead img{
            width:40%;
            position:absolute;
            top:-16em;
        }

        div#fc00 div.feature_lead img{
            bottom:0.5em;
        }
    
    div.fc_area:nth-child(even) div.feature_title h3{
    margin-left:41%;
}

    
        div.fc_area:nth-child(odd) div.feature_lead img{
        right:-6%;
        }
    
    div.fc_area:nth-child(even) div.feature_lead img{
        left:-6%;
        }


div.fc_area:nth-child(even) div.feature_lead h5,
div.fc_area:nth-child(even) div.feature_lead p{
    width:auto;
    max-width:auto;
    margin-left:0;
}


        div.feature_cont{
            position:relative;
            width:100%;
            background:url("../img/fc_bg.jpg");
            margin:0;
        }

        div.feature_cont::before{
            content: '';
          display: block;
          width: 25px;
          height:15px;
          background-image: url("../img/fc_yaji.png");
          background-size: 100% 100%;
          position:absolute;
            left:50%;
            top:-3px;
            z-index:30;
            margin-left:-14px;
        }

        div.feature_cont.active{
            padding:0 0 1.8em;
            border-radius: 0 0 30px 30px;
            border-bottom:solid 8px #0e6236;
        }

        div.feature_cont.active::before{
            display:none;
        }

        div.feature_cont h4{
            width:100%;
            background:#0e6236;
            color:#FFF;
            text-align:center;
            font-size:0.9em;
            font-weight:bold;
            padding:1em 0 0.8em;
            border-radius: 0 0 30px 30px;
            transition:0.5s;
        }

        div.feature_cont h4::before{
          content: '';
          display: inline-block;
          width: 18px;
          height: 18px;
          background-image: url(../img/btn_opn.png);
          background-size: contain;
          vertical-align: middle;
        margin:-2px 8px 0 0;
        }
        div.feature_cont.active h4{
            border-radius: 0;
        }

        div.feature_cont.active h4::before{
            content: '';
          display: none;
        }

        div.feature_cont h4:hover{
            color:#80ad96;
            cursor:pointer;
        }

        div.feature_cont.active h4:hover{
            color:#FFF;
            cursor:auto;
        }
    
    


        div.feature_cont div.feature_cont_area{
            position:relative;
            width:80%;
            margin:3em auto 1em;
            display:none;
            transition:1s;
        }

        div.feature_cont.active div.feature_cont_area{
            display:block;
        }
    
    div.feature_cont div.feature_cont_area p{
        font-size:0.9em;
    }

        .feature_cont_pho{
            text-align: center;
            color:#0e6236;
            font-size:0.9em;
            font-weight:500;
            margin-bottom:0;
        }

        .feature_cont_pho img{
            width:100%;
        }

        div#b-free .feature_cont_pho.all{
            width:100%;
            margin: 0 auto;
        }

        .feature_cont_pho.all{
            width:100%;
        }

        .feature_cont_pho.left{
            width:30%;
            margin-right:3%;
            float:left;
        }

        .feature_cont_pho.right{
            width:30%;
            margin-left:3%;
            float:right;
        }

        .feature_cont_pho span{
            display:block;
            font-size:0.8em;
            line-height:1.2em;
            text-align:left;
        }

        div.feature_cont_sec{
            margin:0 0 3em;
        }

        div.feature_cont div.feature_cont_area hr{
            border-top:dashed 1px #0e6236;
        }

        div.feature_cont img.cls_btn{
            width:50px;
            transition:1s;
        }

        div.feature_cont img.cls_btn:hover{
            opacity:0.5;
            cursor:pointer;
        }

        /*--- cont1 fc00 ---*/

        /*--- Dr. ---*/
        #fc00 .feature_cont_area p.feature_cont_pho.right{
            width:100%;
            margin-left:0;
            margin-bottom:1.5em;
        }
    
    #fc00 .feature_cont_area p.feature_cont_pho.right img{
        width:40%;
        margin:0 auto;
    }
    
    #fc00 .feature_cont_area p.feature_cont_pho.right span{
        text-align: center;
    }

        #fc00 .feature_cont_area p.feature_cont_pho.all{
            margin-bottom:2em;
        }

        /**/
    div.feature_cont ul.gallery li img,ul.gallery li p{
            width:100%;
            padding:0;
        }
    
    #fc01 .feature_cont_area,
    #fc02 .feature_cont_area{
    max-width:auto;
    min-width:auto;
    }

    
    
        ul.gallery li img,ul.gallery li p{
            width:98%;
            padding:0;
        }

        /**/
        #fc04 .feature_cont_area p.feature_cont_pho.left{
            width:100%;
            margin-right:0%;
            margin-bottom:1.5em;
        }

        #fc04 .feature_cont_area p.feature_cont_pho.right{
            width:100%;
            margin-left:0%;
            margin-bottom:1.5em;
        }

        #fc04 .feature_cont_area hr,
        #fc05 .feature_cont_area hr{
            margin-bottom:3em;
        }

        #fc05 .feature_cont_area p.feature_cont_pho.left{
            width:70%;
            margin-right:auto;
            margin-left:auto;
            margin-bottom:1.5em;
            float:none;
        }

        #fc05 .feature_cont_area p.feature_cont_pho.all img{
            width:100%;
            margin:0 auto 1.5em;
        }   
    
    /*--- cont2 ---*/
    section#cont2{
        padding-top:0;
        margin-bottom:3.5em;
    }
    

        section#cont2 h2{
            display:block;
            width:100%;
            max-width:auto;
            margin:0 auto 0;
            text-align:left;
        }

        section#cont2 h2 img{
            width:50%;
            top:-1.5em;
            left:5%;
        }

        div#sview{
            width:90%;
            max-width:auto;
            margin:0 auto 0;
            display:block;
        }

        div#sview div.sview_cont_area:first-child{
            position:relative;
            width:80%;
            background:url("../img/sview_prof.png")no-repeat center top;
            background-size:100% auto;
            opacity:1;
            margin:0 auto;
        }

        p#prof_btn{
            bottom:22%;
        }
    
        div#sview.prof p#prof_btn{
        bottom:1%;
        }

        div#sview div.sview_cont_area:last-child{
            width:90%;
            margin:3em auto 0;
        }

        div#sview div.sview_cont_area:first-child img{
        width:100%;  
            transition:1s;  
        }

        div#sview div.sview_cont_area:last-child p{
            font-size:0.8em;
            line-height:30px;
            background: url("../img/sview_line.png?0");
            background-position:left -2px;
        }
    
        div#sview div.sview_cont_area div.sview_cont_link{
            text-align: center;
        }
    
        div#sview div.sview_cont_area:last-child a{
        font-size:0.8em;
        padding:1em 1.5em;
        border-radius:20px;
        }
    
    div#sview div.sview_cont_area:last-child a span{
    font-size:0.6em;
    margin-left:2px;
}
        div#sview div.sview_cont_area:last-child a::after{
        content: '';
          display: inline-block;
          width: 10px;
          height: 10px;
          background-image: url("../img/icon_blank.png");
          background-size: contain;
          vertical-align: middle;
        margin:-1px 0 0 2px;
        }

        div#sview div.sview_cont_area h3{
            width:100%;
            margin-bottom:1em;
        }

        div#sview div.sview_cont_area #profile{
            display:none;
        }
    
    p#prof_btn:hover{
    opacity:1;
}

                /*--- cont3 ---*/

            section#cont3 div.clinic{
                width:100%;
                background:url("../img/clinic_bg.png") no-repeat left top;
                background-size:100% 300px;
                margin-bottom:0;
                padding-top:0;
            }

            section#cont3 div.clinic_area{
                width:100%;
                background:url("../img/fc_bg.jpg");
                border-bottom:solid 10px #88b7d9;
                padding:0 0;
                margin-bottom:3em;
            }

            .clinic_data,.clinic_cont,
            section#cont3 div.clinic_garalley > div{
                position:relative;
                width:90%;
                margin:0 auto;
                max-width:auto;
                min-width:auto;
            }

            .clinic_data h4{
                width:80%;
                padding:1em 0 0;
            }
            .clinic_data h4 img,
            .clinic_cont h5 img{
                width:100%;
            }

            .clinic_cont h5{
                position:relative;
                right:5%;
                left:5%;
                top:0;
                width:90%;
            }

            .clinic_cont{
                margin:1.5em auto;
                text-align:left;
            }

            .clinic_cont img.clinic_pp{
                width:94%;
                margin:-0.5em 0 0 3%;
            }

            .clinic_cont h3{
                text-align:left;
                border-left:solid 10px #4293e3;
                padding:5px 0 5px 18px;
                font-size:1.2em;
                font-weight:bold;
                margin-top:1.5em;
                margin-bottom:1em;
                letter-spacing:0.15em;
                line-height:1.5em;

            }
    

            .clinic_cont h6{
                font-size:1em;
                letter-spacing:0.15em;
                line-height:1.5em;
                color:#4293e3;
                margin-bottom:1.2em;
            }

            .clinic_cont h6 span{
                display:inline-block;
            }
    
            .clinic_cont p{
                font-size:0.9em;
    }

            .clinic_cont h3,
            .clinic_cont h6,
            .clinic_cont p{
                width:90%;
                margin-left:auto;
                margin-right:auto;
            }

            .clinic_cont_pho{
                width:90%;
                position:relative;
                margin:1.5em auto 0;
                right:auto;
                bottom:auto;
            }

            .clinic_cont_pho img{
    width:100%;
    margin-top:1em;
                margin-bottom:1em;
    border-radius:8px;
}

            section#cont3 a.btn_int{
                display:block;
                width:320px;
                margin:0 auto -20px;
            }

            section#cont3 a.btn_int img{
                width:100%;
            }
            /*--- cont4 ---*/
            section#cont4{
                margin-bottom:3em;
            }
            div#interview_link{
                width:90%;
                max-width:auto;
                margin:0 auto;
            }

            div#interview_link h4{
                text-align:center;
                color:#0e6236;
                font-weight:900;
                font-size:1.2em;
                letter-spacing:0.2em;
            }

            div#interview_link > p{
                text-align:center;
                color:#808080;
                font-weight:700;
                letter-spacing:0.2em;
            }

            div#interview_link ul{
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
                flex-wrap: wrap;
                justify-content:space-between;
                transition:0.2s;
            }

            div#interview_link ul li{
                width:47%;
                vertical-align: top;
                margin-bottom:1em;
            }

            div#interview_link ul li a{
                padding:0;
                display:block;
                width:100%;
                height:100%;
                text-decoration:none;
                position:relative;
            }

            div#interview_link ul li a p{
                margin:0 1em 5em;
                padding:1em 0 0;
                font-size:0.8em;
                font-weight:500;
                color:#000;
                line-height:1.5em;
            }

            div#interview_link ul li a p.btn{
                position:absolute;
                left:24%;
                bottom:15px;
                margin:0 auto;
                text-align:center;
                width:50%;
                background:#0e6236;
                border-radius:3px;
                padding:0.2em 0;
                color:#FFF;
            }

            div#interview_link ul li:nth-child(1) a,
    div#interview_link ul li:nth-child(4) a,
    div#interview_link ul li:nth-child(5) a{
                background:#f6f3ee;
            }
            div#interview_link ul li:nth-child(2) a,
    div#interview_link ul li:nth-child(3) a{
                background:#eae1d8;
            }
    
            div#interview_link > span.note{
                font-size:0.7em;
                text-align: left;
                text-indent:-1em;
                margin-left:1.5em;
            }

            div#bnr_info{
                width:80%;
            margin:0 auto 2em;
                display:none;
            }

            div#bnr_info img{
                width:100%;
            }

            /*--- footer ---*/

            footer{
                position:fixed;
                height:30px;
                left:0;
                bottom:0;
                background:url("../img/footer_bg.png") no-repeat center bottom;
                background-size:100% 30px;
                display:block;
                width:100%;
                z-index:30;
                display:none;
            }

            a#f_bnr{
                display:block;
                position:fixed;
                width:100%;
                right:0;
                bottom:-0.2em;
                max-width:auto;
                min-width:auto;
                z-index:500;
                display:none;
            }

            a#f_bnr img{
                width:100%;
                transition:2s;
            }

            a#f_bnr.btm img{
                display:block;
            }

    div#copyright{
        padding-bottom:1em;
    }
    
    
            div#copyright a{
    width:auto;
    height:auto;
    margin:0 auto;
    position:relative;
}

div#copyright a img{
    width:108px;
    margin-left:0px;
}

div#copyright p{
    font-size:12px;
    color:#454545;
    margin:0.5em auto 5em;
    text-align:center;
}

/* ======================================= */
 
}/*CLOSE tag for SMPH*/ 

/* =======================================
	For SE
======================================= */
@media screen and (max-width: 321px) {
    
    div#fv div#fv_pho_s > div{
    width:32.6%;
    height:12vh;  
}
    
    div#fv div#fv_text_wrap{
    width:90%;
    margin:2vh auto 0;
    }
    
    /*div#fv div#fv_text_wrap h1{
    width:90%;
    }*/
    div#fv div#fv_text{
       height:80%;
    }
    
    div#fv div#fv_text_wrap p br{
    display:none;
}
    
    div#fv #sp_fv_parts{
    display:none;
}
    
    div.feature_title h3 img.t{
            width:auto;
            height:110px;
        }
    div#fv div#fv_text_wrap h3{
    font-size:0.8em;
}

div#fv div#fv_text_wrap p{
    font-size:0.7em;

}
    
    p#prof_btn{
    border:solid 2px #0e6236;
    border-radius: 16px;
    font-size:0.6em;
    font-weight:500;
    padding:0.1em 0;
}
    


    
/* =======================================
	SMPH HACK
======================================= */

/*for Firefox*/    
@-moz-document url-prefix() {
    br.pcdn{
        display:inline;
    }
    }
    
/*for Safari*/
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-color-index:0) {   


}
    
    /* ======================================= */
    
}/*CLOSE tag for SE*/
