/* ﾃ･ﾋ�敕･窶ｺﾅｾﾃ｣窶堋｢ﾃ｣窶堋ｯﾃ｣窶堋ｻﾃ｣窶堋ｹﾃｦ邃｢窶堙｣ﾂ�ｮﾃ｣ﾆ陳｢ﾃ｣ﾆ陳ｼﾃ｣ﾆ停ぎﾃ｣ﾆ陳ｫﾃｨﾂ｡ﾂｨﾃｧﾂ､ﾂｺ */
html {
    font-size: 62.5%;   /* ﾃ｣ﾆ停€｢ﾃ｣窶堋ｩﾃ｣ﾆ陳ｳﾃ｣ﾆ塚�｣窶堋ｵﾃ｣窶堋､ﾃ｣窶堋ｺﾃｨﾂｪﾂｿﾃｦ窶｢ﾂｴﾃｧ窶敖ｨ */
}

.modal{
    position:relative;
}
.modal .overlay{
    display:none;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.5);
    position:fixed;
    z-index:10000;
    border:5px solid #ccc;
    box-sizing:border-box;
}
.modal .btn_area{
    width:100%;
    max-width:768px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius:12px;
    background:#fff;
    padding:50px 30px;
    box-shadow:0 0 10px rgba(0,0,0,0.2);
    box-sizing:border-box;
    z-index:100001;
}
.modal .btn_area p{
    font-size:2.4rem;
    color:#606060;
    padding:0;
    margin:0 auto 30px;
    text-align:center;
}
.modal .btn_area > div{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin:0 auto;
    padding:0 20px;
}
.modal .btn_area > div a{
    display:flex;
    align-items:center;
    justify-content: center;
    flex-flow: column;
    flex:48%;
    max-width:48%;
    height:88px;
    background:#e5eac3;
    text-align:center;
    color:#606060;
    font-size:2.8rem;
    line-height:1;
    border-radius:50vw;
    transition:0.3s all;
}
.modal .btn_area > div a span.min{
    display:table;
    margin:0 auto;
    font-size:2rem;
    line-height:1.2;
}
.modal .btn_area > div a:hover{
    text-decoration:none;
    opacity:0.35;
    -ms-filter:"alpha(opacity=35)";
}

/*************************** ﾃｧ窶敖ｻﾃｩﾂ敖｢ﾃ｣窶堋ｵﾃ｣窶堋､ﾃ｣窶堋ｺﾃ｣ﾂ��767pxﾃ､ﾂｻﾂ･ﾃ､ﾂｸ窶ｹﾃ｣ﾂ�ｮﾃ･ ﾂｴﾃ･ﾂ斥�｣ﾂ�ｫﾃｩﾂ�ｩﾃｧ窶敖ｨ ***************************/
@media screen and (max-width: 767px) {
    .modal .btn_area{
        max-width:96%;
        padding:30px;
    }
    .modal .btn_area p{
        font-size:2rem;
        margin:0 auto 20px;
    }
    .modal .btn_area > div{padding:0;}
    .modal .btn_area > div a{
        font-size:2.2rem;
        height:72px;
        padding:0;
    }
    .modal .btn_area > div a span.min{
        font-size:1.6rem;
        line-height:1.4;
    }
}

/*************************** ﾃｧ窶敖ｻﾃｩﾂ敖｢ﾃ｣窶堋ｵﾃ｣窶堋､ﾃ｣窶堋ｺﾃ｣ﾂ��640pxﾃ､ﾂｻﾂ･ﾃ､ﾂｸ窶ｹﾃ｣ﾂ�ｮﾃ･ ﾂｴﾃ･ﾂ斥�｣ﾂ�ｫﾃｩﾂ�ｩﾃｧ窶敖ｨ ****************************/
@media screen and (max-width: 640px) {
    .modal .btn_area{
        max-width:94%;
        padding:20px;
    }
    .modal .btn_area p{
        font-size:1.8rem;
        margin:0 auto 10px;
    }
    .modal .btn_area > div{padding:0;}
    .modal .btn_area > div a{
        font-size:1.8rem;
        height:66px;
    }
    .modal .btn_area > div a span.min{
        font-size:1.4rem;
        line-height:1.4;
    }
}

/*************************** ﾃｧ窶敖ｻﾃｩﾂ敖｢ﾃ｣窶堋ｵﾃ｣窶堋､ﾃ｣窶堋ｺﾃ｣ﾂ��480pxﾃ､ﾂｻﾂ･ﾃ､ﾂｸ窶ｹﾃ｣ﾂ�ｮﾃ･ ﾂｴﾃ･ﾂ斥�｣ﾂ�ｫﾃｩﾂ�ｩﾃｧ窶敖ｨ ****************************/
@media screen and (max-width: 480px) { /* SP */
    .btn_area{max-width:92%;}
    .btn_area p{font-size:1.4rem;}
    .btn_area > div a{
        font-size:1.6rem;
        height:60px;
    }
    .btn_area > div a span.min{font-size:1.2rem;}
}