/****** Overview ******/





/*--webp対応ブラウザの場合--*/
.webp #overview{ 
    background: url("../img/bg_white.webp")  top center repeat-y;
    background-size: 100%;
    padding-bottom: 100px;
    text-align: center;
    overflow: hidden;
}
/*--webp非対応ブラウザの場合--*/
.no-webp #overview { 
    background: url("../img/bg_white.jpg")  top center repeat-y;
    background-size: 100%;
    padding-bottom: 100px;
    text-align: center;
    overflow: hidden;
}


#overview h2{
    margin: 50px auto;
    display: block;
    font-size: 32px;
    font-weight: 800;
}

#overview .summary{
    padding: 0px 20px;
}

@media screen and (min-width:700px) { 
    /*　画面サイズが700pxからはここを読み込む　*/

    #overview h2{
        margin: 80px auto;
        display: block;
        font-size: 32px;
    }
}

#overview .summary .summary-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
    max-width: 800px;
    margin: 50px auto 0px auto;
}

#overview .summary a{
    list-style: none;
    text-align: center;
    background-size: 100%;
    height:0;
    padding-bottom: 85%;
    margin-bottom: 40%;
    box-shadow: 0px 0px 10px #00000080;
    border-radius: 30px;
    opacity: 1;
    display: block;
    color: #29262b;
}


#overview .contents-txt-box{
    background: #F2F2F2 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 10px #00000080;
    border-radius: 30px;
    opacity: 1;
    display: block;
    color: #29262b;
}

#overview .summary h3{
    margin: 5px;
    font-weight: 800;
}

#overview .summary .summary-box .summary-txt-l {
    width: 90%;
    padding: 5px;
    margin: 70% auto;
}

#overview .summary .summary-box .summary-txt-r {
    width: 90%;
    padding: 5px;
    margin: 70% auto;
}

@media screen and (min-width:700px) { 
    /*　画面サイズが480pxからはここを読み込む　*/

    #overview .summary{
        padding: 0px 100px;
    }

    #overview .summary a{
        list-style: none;
        width: 40%;
        text-align: center;
        background-size: 100%;
        height:0;
        padding-bottom: 40%;
    }

    #overview .summary .summary-box .summary-txt-l {
        margin-top: 80%;
        margin-left: -50px;
        width: 80%;
        padding: 20px;
    }

    #overview .summary .summary-box .summary-txt-r {
        margin-top: 80%;
        margin-left: 50px;
        width: 80%;
        padding: 20px;
    }
}

#overview .summary .summary-box .summary-txt-r span,
#overview .summary .summary-box .summary-txt-l span{
    text-align: left;
    padding: 10px;
    display: block;
    line-height: 1.8em;
}

#overview .detail{
    margin: 50px auto;
    padding: 20px 10px 30px 10px;
    text-align: center;
    position: relative;
    background: #F2F2F2 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 10px #00000080;
    opacity: 1;
    display: block;
    color: #29262b;

}

@media screen and (min-width:700px) { 
    /*　画面サイズが480pxからはここを読み込む　*/

    #overview .detail{
        max-width: 900px;
        margin: 50px auto;
        padding: 20px 20px 30px 20px;
        position: relative;
        border-radius: 30px;
    }
}

#overview .detail h3{
    padding: 50px auto;
    display: block;
    font-size: 32px;
    font-weight: 800;
}

#overview .detail h4{
    padding: 25px auto;
    display: block;
    font-size: 24px;
    font-weight: 800;
}

#overview .detail p{
    text-align: left;
    padding: 20px;
    line-height: 1.8em;
}

#overview .detail .subheader{
    width: 105%;
    margin-left: -2.5%;
}

#overview .sub-box{
    background: #fff;
    margin: 30px auto;
}

#overview .sub-box .sub-light{
    margin-left: -100px;
    position: absolute;
    margin-top: 280px;
    margin-left: -50px;
}

#overview .chart{
    text-align: left;
    line-height: 1.8em;
    margin: 10px;
    }

#overview .chart th{
    width: 18%;
    vertical-align: top;
}

#overview .chart td{
}

@media screen and (max-width:640px){
    table th, table td{ display:block; }
    #overview .chart th{
        width: 100%;
        background: #ddd;
        padding: 10px auto;
        display: block;

    }
}



.btn{
    text-align: center;
    margin: 30px auto;
    max-width: 250px;
    display: block;
    padding: 15px 80px;
    line-height: 1.8em;
    font-weight: 800;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border: 4px solid #DC4B8A;
    border-radius: 20px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

.btn:hover{
    text-decoration: none;
    color: #FCF25A;
    border: 4px solid #FCF25A;
}

.btn_dis{
    text-align: center;
    margin: 30px auto;
    max-width: 250px;
    display: block;
    padding: 15px 80px;
    line-height: 1.8em;
    font-weight: 800;
    background: #FFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border: 4px solid #BBB;
    border-radius: 20px;
    color: #BBB;
}