@charset "utf-8";
/* Sma/////////////////////////CSS */
@media  screen and ( max-width:896px ){

* {
  margin: 0;
  padding: 0;
}


.sp { display: block !important; }
.pc { display: none !important; }


/*---wrapper---*/
#wrapper{
    width: 100%;
    background: url(../../images/image-mask-av/back.jpg) repeat;
    background-size: 48px;
    background-color: #fff;
    overflow: hidden;
}


/*---h,p---*/
h1{
    display: none;
}
h2{
    width: 100%;
    margin: 0 auto 3%;
}
h3{
    font-size: 3.2vw;
    letter-spacing: 1px;
    text-align: center;
    line-height: 7vw;
}
h4{
    font-size: 3vw;
    letter-spacing: 1px;
    text-align: center;
    line-height: 7vw;
}


/*---span,under,text---*/
.y_under{
    background: linear-gradient(transparent 60%, #ffff6694 60%);
}
.p_under{
    background: linear-gradient(transparent 60%, #ff5d8b52 60%);
}
.s_txt{
    font-size: 3vw;
}
.m_txt{
    font-size: 4vw;
}
.l_txt{
    font-size: 5.5vw;
}
.white{
    color: #fff;
}
.pink{
    color: #f4356b;
}


/*---header---*/
header{
    width: 100%;
    height: 40px;
    border-bottom: solid 1px #fff;
    background: #EBB1BF;
    text-align: center;
}
header p{
    width: 86px;
    margin: 0 auto 0;
    padding-top: 10px;
}


/*---bt_sp---*/
#bt_sp{
    width: 100%;
    height: 96px;
    position: fixed;
    bottom: 0;
    z-index: 100;
}
#bt_sp p{
    width: 66%;
    margin: 16px auto 0;
}


/*---main---*/
main{
    width: 100%;
    background: #F0C8D1;
    position: relative;
    height: auto;
}
.txt_01{
    position: absolute;
    width: 66%;
    z-index: 2;
    top: 4%;
    left: 3%;
}
.txt_02{
    position: absolute;
    width: 78%;
    z-index: 2;
    bottom: 20%;
    left: 5%;
}
.m_bt{
    position: absolute;
    width: 28%;
    z-index: 2;
    bottom: 28%;
    right: 4%;
}
.count_area{
    margin: 0 auto 0;
    padding: 12% 0;
    text-align: center;
}
.count_area p{
    color: #f4356b;
    font-weight: bold;
    font-size: 3vw;
}
.count_area span{
    font-size: 8vw;
    font-weight: bold;
}
.count_area ul{
    width: 100%;
}
.count_area li{
    display: inline-block;
    font-size: 3.2vw;
    font-weight: bold;
    letter-spacing: 1px;
    vertical-align: middle;
    text-align: left;
}
.count_area .num{
    background: #fff;
    padding: 10px;
    border-radius: 50%;
    margin-right: 1%;
    color: #f4356b;
}


/*---inner---*/
.inner{
    width: 90%;
    margin: 0 auto 0;
}
.img_box{
    width: 90%;
    margin: 10% auto;
}

/*---base---*/
#base01,
#base02,
#base09{
    width: 100%;
    margin: 0 auto;
    padding: 14% 0;
}
#base03{
    width: 100%;
    margin: 0 auto;
    padding: 0 0 14%;
    background: linear-gradient(180deg, #ffffff00 0%, #ffffff00 21%, #f0c8d1 21%, #f0c8d1 100%);
}
#base03 h2{
    width: 90%;
    margin: 0 auto 3%;
}
#base03 .box{
    background: #F8829C;
    width: 82%;
    margin: 0 auto 0;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 5px 5px 0px 0px rgb(255 255 255);
}
#base03 .inner{
    width: 94%;
    margin: 0 auto 0;
    border: dashed 2px #fff;
    border-radius: 7px;
    padding: 6% 3% 8% 3%;
}
#base04{
    width: 100%;
    margin: 0 auto;
    padding: 0 0 6%;
    background: #F0C8D1;
}
#base04 h2{
    width: 90%;
    margin: 0 auto 3%;
}
#base04 .box{
    background: #fff;
    width: 82%;
    margin: 0 auto 0;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 5px 5px 0px 0px rgb(248 129 156);
    position: relative;
    height: auto;
}
#base04 .inner{
    width: 94%;
    margin: 0 auto 0;
    border: dashed 2px #F8829C;
    border-radius: 10px;
    padding: 6% 3% 8% 3%;
}
#base04 ul{
    width: 90%;
    margin: 5% auto;
    list-style: url(../../images/image-mask-av/icon.png) inside;
}
#base04 li{
    margin: 2% auto;
    font-size: 3.3vw;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 7vw;
}
.img_oubo{
    position: absolute;
    width: 26%;
    bottom: -7%;
    right: -7%;
}
#base05{
    width: 100%;
    margin: 0 auto 0;
    padding: 14% 0;
    background: #F0C8D1;
}
#base06{
    width: 100%;
    margin: 0 auto 0;
    padding: 14% 0;
}
#base07{
    width: 100%;
    margin: 0 auto 0;
    padding: 0 0 4%;
}
#base08{
    width: 100%;
    margin: 0 auto;
    padding: 14% 0;
    background: #FCFFB0;
}
#base09 ul{
    width: 100%;
    margin: 3% auto 0;
    text-align: center;
}
#base09 li{
    display: inline-block;
    text-align: left;
    margin: 6% 1%;
    font-weight: bold;
    font-size: 3vw;
    letter-spacing: 1px;
    vertical-align: middle;
    line-height: 6vw;
}
#base09 .left{
    width: 26%;
}
#base09 .right{
    width: 64%;
}
#base10{
    width: 100%;
    margin: 0 auto;
    padding: 0 0 14%;
    background: linear-gradient(180deg, #ffffff00 0%, #ffffff00 14%, #f0c8d1 14%, #f0c8d1 100%);
}
#base10 h2{
    width: 100%;
    margin: 0 auto 3%;
}
#base10 h4{
    font-size: 3vw;
    letter-spacing: 1px;
    text-align: center;
    line-height: 6vw;
}
#base10 .box{
    background: #F8829C;
    width: 82%;
    margin: 0 auto 0;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 5px 5px 0px 0px rgb(255 255 255);
}
#base10 .inner{
    width: 94%;
    margin: 0 auto 0;
    border: dashed 2px #fff;
    border-radius: 10px;
    padding: 6% 3% 8% 3%;
}
#base10 ul{
    width: 100%;
    margin: 0 auto 0;
    text-align: center;
}
#base10 li{
    display: inline-block;
    margin: 0 2%;
    font-weight: bold;
    vertical-align: middle;
}
#base10 p{
    font-size: 2vw;
    letter-spacing: 2px;
    text-align: center;
}
#base10 .left{
    width: 42%;
}
#base10 .right{
    width: 97%;
    margin-top: 5%;
}
#base11{
    width: 100%;
    margin: 0 auto;
    padding: 0 0 14%;
    background: #F0C8D1;
}
#base11 h2{
    width: 90%;
    margin: 0 auto 3%;
}
#base11 .box{
    background: #fff;
    width: 82%;
    margin: 0 auto 0;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 5px 5px 0px 0px rgb(248 129 156);
}
#base11 .inner{
    width: 94%;
    margin: 0 auto 0;
    border: dashed 2px #F8829C;
    border-radius: 10px;
    padding: 6% 3% 8% 3%;
}
#base11 dl{
    background: #fff;
    width: 100%;
    margin: 5% auto 0;
}
#base11 dt{
    background: #fabaca;
    border-radius: 10px 10px 0 0;
    border: solid 2px #fabaca;
    padding: 2px 0 2px 10px;
    font-size: 2.6vw;
    letter-spacing: 0;
    font-weight: bold;
}
#base11 dt img{
    width: 20px;
    margin-right: 5px;
    margin-top: 5px;
}
#base11 li{
    display: inline-block;
    vertical-align: middle;
}
#base11 dd{
    border: solid 2px #fabaca;
    border-radius: 0 0 10px 10px;
    padding: 12px 20px;
    font-size: 2.6vw;
    font-weight: bold;
    line-height: 5vw;
}
#base12{
    width: 100%;
    margin: 0 auto;
    padding: 0 0 14%;
    background: linear-gradient(180deg, #f0c8d1 0%, #f0c8d1 90%, #ffffff00 90%, #ffffff00 100%);
}
#base12 h2{
    width: 90%;
    margin: 0 auto 3%;
}
#base12 .box{
    background: #F8829C;
    width: 82%;
    margin: 0 auto 0;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 5px 5px 0px 0px rgb(255 255 255);
}
#base12 .inner{
    width: 94%;
    margin: 0 auto 0;
    border: dashed 2px #fff;
    border-radius: 10px;
    padding: 6% 3% 3% 3%;
}
#base13{
    width: 100%;
    margin: 0 auto;
    padding: 2% 0 20%;
}


/*---pageTop---*/
#pageTop img {
    width: 10%;
    margin-top: -4%;
}


/*--fotter--*/
#sod_fotter {
    text-align: center;
    width: 100%;
    background: #F0C8D1;
}
.sod_m{
    text-align: center;
    width: 40%;
}
#footimg{
    width: 100%;
    margin: 6% auto 0;
}
#sod_copy{
    font-size: 2.5vw;
    color: #000;
    margin: 0 auto 0;
    letter-spacing: 0;
    background: #F0C8D1;
    width: 100%;
    padding: 8px 0 22%;
}

}
.is-fix{
    overflow: hidden;
}