.m-ratioBox-wrap {width:100%; padding-top:100%; position:relative; overflow:hidden;}
.m-ratioBox-wrap .m-ratioBox {position:absolute; top:0; left:0; right:0; bottom:0; background-size:cover; background-position:center;}
/*
.m-ratioBox-wrap .m-ratioBox:after {content:""; width:83px; height:28px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:url("../img/logo.svg") no-repeat; background-size:100%; opacity:0.4;}
 */
.m-ratioBox-wrap img {display:block; width:100%; position:absolute; left:50%; top:50%; transform:translateY(-50%) translateX(-50%); z-index:1;}
.m-ratioBox-wrap iframe {width:105%; position:absolute; left:50%; top:50%; transform:translateY(-50%) translateX(-50%); z-index:1;}

html, body {
    background-color:#efefef;
}
#wrap {
    width:100%; height:100vh;
    max-width:500px; margin:0 auto;
    background-color:#fff;
}

.area-index {
    display: flex; align-items: center;
    height:100%;
    position:relative;
    background-color:#FFF4CF;
}
.area-index .content {
    width: 100%;
    margin-top:-40%;
    position:relative;
    text-align: center;
    z-index:1;
}
.area-index .content img {
    display: block;
    margin:0 auto;
}
.area-index .content .title {
    margin-top:10px;
}
.area-index .content .top {
    margin-bottom:20px;
}
.area-index .content .comment {
    margin-bottom:36px;
    text-align: center; line-height:20px;
}
.area-index .content .comment .point {
    font-weight:bold;
}
.area-index .deco {
    width: 100%;
    position: absolute;
    bottom:0; left:0;
}
.area-index .deco-top {
    width: 100%;
    position: absolute;
    top:40px; left:0;
}
.area-index .m-btn.type01 {
    margin:0 auto; margin-top:14px;
}
.area-index .m-btn.type01:first-of-type {
    margin-top:0;
}



.area-accept {
    display: flex; align-items: center;
    height:100%;
    position:relative;
    background-color:#FFF4CF;
}
.area-accept .content {
    width: 100%;
    margin-top:-40%;
    position:relative;
    text-align: center;
    z-index:1;
}
.area-accept .content img {
    display: block;
    margin:0 auto;
}
.area-accept .content .title {
    margin-top:10px;
}
.area-accept .content .top {
    margin-bottom:20px;
}
.area-accept .content .comment {
    margin-bottom:36px;
    text-align: center; line-height:20px;
}
.area-accept .content .comment .point {
    font-weight:bold;
}
.area-accept .deco {
    width: 100%;
    position: absolute;
    bottom:0; left:50%; transform:translateX(-50%);
}
.area-accept .deco-top {
    width: 100%;
    position: absolute;
    top:40px; left:0;
}
.area-accept .m-btn.type01 {
    margin:0 auto; margin-top:14px;
}
.area-accept .m-btn.type01:first-of-type {
    margin-top:0;
}

.m-btn.type01 {
    display: flex; align-items: center; justify-content: center;
    width:215px; height:52px; padding:0 20px;
    font-weight:500;
    border-radius:30px;
    background-color:#fff;
    box-shadow:0px 4px 10px rgba(232,181,0,0.19);
}