@charset "utf-8";

/*===============================================================================
トップページ
===============================================================================*/
body{
    background: #eee;
}

.main-page {
    max-width: 192rem;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 .5rem 0 rgba(0, 0, 0, 0.2);
}

/*========================================================
メインビジュアル
========================================================*/
.main-area img{
    width: 100%;
}
.main-visual {
    position: relative;
    overflow:hidden;
}

.main-visual .img2 img{
    position: absolute;
    top:50%;
    left: 50.8%;
    transform:translate(-50%,-50%);
}

@media screen and (min-width: 641px) {
    .main-visual-mb, .main-visual-mb-2{
        display: none;
    }
}

@media screen and (max-width: 640px) {
    .main-visual {
        display: none;
    }
    
    .main-visual-mb {
        padding-top: 5rem;
        position: relative;
        overflow:hidden;
    }
    
    .main-visual-mb .img2 img{
        padding-top: 5rem;
        width: 40%;
        position: absolute;
        top:-7%;
        right: 0;
/*        transform:translate(-0,-0);*/
    }
    
    .main-visual-mb-2{
        max-width: 640rem;
        margin: -3rem auto 0;
        display: flex;
        justify-content: space-between;
    }
    
    .main-visual-mb-2 .item1,
    .main-visual-mb-2 .item2,
    .main-visual-mb-2 .item3{
        width: 33%;
        position: relative;
        padding-bottom: 17%;
    }

    .main-visual-mb-2 .img1-1{
        width: 88%;
        position: absolute;
        margin: 0 auto;
        bottom: 0%;
        left: 50%;
        transform:translate(-50%,0%);
    }
    
    .main-visual-mb-2 .img1 img{
        border: solid .5rem #fff;
        border-radius: 50%
    }
}

/*========================================================
よくある心配
========================================================*/
.needs-bcg {
    margin: 5% 0 4%;
    position: relative;
    overflow:hidden;
}

.needs-bcg img{
    width: 100%;
}

.needs .txt{
    position: absolute;
    top:50%;
    left: 30%;
    transform:translate(-30%,-50%);
}

.needs .txt2{
    color: #fff;
    position: absolute;
    bottom:3%;
    right: 17%;
}

.hh1 {
    line-height: 1.3;
    margin-bottom: 1em
}
.hh1 span{
    color: #20a48a;
    font-weight: bold;
}

.hh1 .pre {
    font-size: 1.6rem;
}

.hh1 .main {
/*    font-size: 2.8rem; */
}

.list-1 ul li {
    padding: 1rem 0 1rem 4rem;
    margin-bottom: 0rem;
    line-height: 1.5;
    background: url("../images/midashi-icon.png") left 0px top 3px no-repeat;
    background-size: 3rem auto;
    background-position: left center;
    font-size: 2.1rem;
    color: #4d4d4d;
    font-weight: bold;
}

.list-1 ul li:last-child {
    margin-bottom: 0;
}

.needs p{
    padding: 2rem 0 0 0;
    margin: 0;
    font-size: 1.8rem;
    line-height: 1.5;
}

@media screen and (max-width: 1200px) {
    .needs .hh1 {
        line-height: 1.3;
        margin-bottom: 0.2em;
    }
    .needs .hh1 .main{
        font-size: 2.6rem;
    }
    .needs p{
        padding: 1rem 0 0 0;
        margin: 0
    }
}

@media screen and (min-width: 1025px) {
    .needs-bcg .img2{
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .needs-bcg .img1{
        display: none;
    }
    .needs .txt{
        top:50%;
        left: 25%;
        transform:translate(-25%,-50%);
    }
    .needs .txt2{
        color: #fff;
        position: absolute;
        bottom:3%;
        right: 10%;
    }
}

@media screen and (max-width: 640px) {
    .needs-bcg .img1{
        display: none;
    }
    .needs .txt{
        top:50%;
        left: 10%;
        transform:translate(-10%,-50%);
    }

    .needs .hh1 {
        line-height: 1.3;
        margin-bottom: 0.2em;
    }
    .hh1 .pre {
        font-size: 1.6rem;
    }
    .needs .hh1 .main{
        font-size: 2.1rem;
    }
    .needs p{
        padding: 1rem 0 0 0;
        margin: 0;
        font-size: 1.8rem;
    }
    .list-1 ul li {
        font-size: 1.8rem;
    }
}

@media screen and (min-width: 551px) {
.needs-bcg .img3{
    display: none;
}
}

@media screen and (max-width: 550px) {
    .needs-bcg .img2{
        display: none;
    }
    .needs .txt2{
        display: none;
    }
    
    .needs-bcg {
        margin: 5% auto 4%;
        background: #f9f9f9;
        position: relative;
        padding-top: 2%;
        padding-bottom:8%;
    }
    
    .needs p{
        padding: 1rem 0 0 0;
        margin: 0;
        font-size: 1.6rem;
    }
    
    .needs .txt{
        width: 40rem;
        position: static;
        top:0%;
        left: 0%;
        transform:translate(1.5rem,0%);
    }

    .needs .txt3{
        color: #fff;
        position: absolute;
        bottom:10%;
        right: 50%;
        transform:translate(50%,-10%);
    }
    .needs-bcg .img3{
        padding: 3% 20%;
        position: relative
    }
}

/*========================================================
選ばれる理由
========================================================*/
.reason {
    margin-bottom: 5rem;
}

.outer {
    max-width: 120rem;
    margin: 0 auto;
}

.hh1-1 {
    margin-bottom: 1em
}
.hh1-1 span{
    color: #20a48a;
    font-weight: bold;
}

.hh1-1 .pre {
    font-size: 1.6rem;
    color: #ff8000;
}

.reason .item-wrap {
    display: flex;
    justify-content: space-between;
    padding: 3% 0;
}

.reason .item-wrap .item1{
    width: 56%;
}

.reason .midashi-wrap {
    display: flex;
    padding-top: 5%;
}

.reason .midashi-wrap .img1 {
    width: 5rem;
}

.reason .midashi-wrap .img1 img{
    width: 100%;
}

.reason .midashi-wrap h2{
    margin-left: .5em;
}

.item-wrap .item2{
    width: 40%;
}

.reason .img2 {
    width: 100%;
}

.reason .img2 img{
    width: 100%;
}

.kage1{
    filter: drop-shadow(0px 10px 15px rgba(0,0,0,0.3));
}

.kage2{
    filter: drop-shadow(0px 10px 15px rgba(0,0,0,0.15));
}

.reason .sec-foot{
    padding: 0% 0 0%;
}


@media screen and (max-width: 640px) {
    .reason .item-wrap {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        padding: 3% 0;
    }
    
    .reason .item-wrap .item2{
        order: 1;
        width: 100%;
    }
    
    .reason .item-wrap .item1{
        order: 2;
        width: 100%;
    }

}

/*========================================================
小児矯正の特徴
========================================================*/
.kyousei {
    background-color: #e8fbf7;
    padding: 5rem 0;
}

.kyousei .cont1{
    padding: 0rem 0 3rem 0;
}

.kyousei .item-wrap1 {
    display: flex;
    justify-content:space-between;
    max-width: ;
    margin: 0 auto;
    align-items: center
}

.kyousei .cont1 .item1 {
    width:50% ;
    margin-right: 0%
}

.h2-1wrap {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
}

.h2-1wrap .img1{
    width: 3.3em;
    margin-right: 1em;
}

@media screen and (max-width: 640px) {
    .h2-1wrap .img1{
        width: 2.8em;
        margin-right: .7em;
    }
}

.kyousei .h2-1wrap .img1 img{
    width: 100%;
}

.hh2-1 {
    line-height: 1.3;
    color: #20a48a;
    font-weight: bold;
}

.kyousei .cont1 .item2 {
    width:45% ;
}

.kyousei .img2 {
    width: 100%;
    margin: 0;
    border-radius: 1rem;
    overflow: hidden;
/*    box-shadow:3px 3px 5px 5px rgba(0, 0, 0, 0.1);*/
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.kyousei .img2 img{
    width: 100%;
    margin: 0;
}

@media screen and (max-width: 640px) {
    .kyousei {
        padding: 2rem 0;
    }
    
    .kyousei .item-wrap1 {
        flex-flow: column;
    }

    .kyousei .cont1 .item1 {
        width:100% ;
    }
    
    .kyousei .cont1 .item2 {
        width:100% ;
    }
}

.kyousei .cont2{
    background: #fff;
    padding: 3rem  1.5rem 3rem 1.5rem;
    text-align: center;
    border-radius: 1rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.kyousei .cont2 h3{
    color: #20a48a;
    font-weight: bold;
}

.kyousei .item-wrap2 {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    max-width: 70rem;
    margin: 1rem auto 0;
}

.kyousei .cont2 .img1 {
    width: 27%;
    margin: 2rem 2rem 2rem;
}

.kyousei .img1 img{
    width: 100%;
}

.kyousei .img1 p{
    text-align: center;
    margin: 7% 0 0 0;
    line-height: 1.3;
}

.kyousei .sec-foot{
    padding: 4% 0 0%;
}

@media screen and (min-width: 641px) {
    .kyousei .cont2 br{
        display: none;
    }
}

@media screen and (max-width: 640px) {
    .kyousei .cont2{
        padding: 2rem  1.5rem 1rem 1.5rem;
        text-align: center;
    }

    .kyousei .item-wrap2 {
    }

    .kyousei .cont2 .img1 {
        width: 42%;
        margin: 2rem 1rem 1.5rem;
    }

    .kyousei .img1 img{
        width: 100%;
    }

    .kyousei .img1 p{
        text-align: center;
        margin: 7% 0 0 0;
        line-height: 1.3;
    }
    
    .kyousei .sec-foot{
        padding: 10% 0 10%;
    }
}

/*
セクションのボタン
----------------------------------------------------------------------*/
.sec-foot{
    text-align: center;
    padding: 10% 0 10%;
    font-size: 1.8rem;/*文字サイズ*/
}

.sec-btn{
    width: 400px;
    position: relative;
    display: inline-block;
    background-color: #14a57e;/*背景色*/
    color: #FFF;/*文字色*/
    font-weight: bold;
    text-decoration: none;
    line-height: 1;
    margin: 0;
    padding: 1.2em .5em 1.1em .5em;/*ボタン内の余白*/
    border-radius: 5px;/*角の丸み*/
    cursor: pointer;
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);/*影*/
    -webkit-tap-highlight-color: transparent;
    transition: .3s ease-out;/*変化を緩やかに*/
    text-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px ;/*影*/
}

.sec-btn:before {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    content: "";
    width: 100%;
    height: 50%; 
    background-color: rgba(255, 255, 255, 0.11);
    border-radius: 5px 5px 0 0;
}
.sec-btn:hover{
    background-color: #21c196;/*背景色*/
    box-shadow: 0 13px 20px -3px rgba(0,0,0,0.24);/*浮き上がるように*/
}
/*スマホは横幅いっぱいに*/
@media screen and (max-width: 640px) {
    .sec-btn{
        width: 100%;
    } 
}