@charset "UTF-8";

/* ---------------------------------------------
	大会グッズ
--------------------------------------------- */
#goodsWrap{ margin-top: 30px;}
#goodsWrap h3{
    text-align: center;
    font-weight: normal;
    font-size: 130%;
    line-height: 1.4;
    margin: 0 0 10px;
    color: #63b6d0;
}
#goodsWrap .intro{
    text-align: center;
    font-size: 94%;
    margin-bottom: 1em;
    line-height: 1.6;
}
#goodsWrap h4{
    text-align: center;
    font-size: 124%;
    line-height: 1.4;
    font-weight: normal;
}
#goodsWrap h4 + p{
    text-align: center;
    font-size: 94%;
    line-height: 1.4;
}
.mainGoodsWrap,
#preGoodsWrap{
    background-color: rgba(0,0,0,0.06);
    padding: 20px 20px;
    margin-bottom: 30px;
    position: relative;
}
.goodsList{
    margin: 20px 0 10px;
}
.goodsList li{
    float: left;
    width: 33.3%;
    text-align: center;
    line-height: 1.4;
    padding: 0 10px;
    box-sizing: border-box;
    position: relative;
}
.goodsList li.w50{
    float: none;
    width: 40%;
    margin: 0 auto;
}
.goodsList li.new::after{
    content: "NEW";
    background-color: #e4007f;
    color: #fff;
    padding: 0.2em 0.6em;
    position: absolute;
    top: -8px;
    left: 0;
}

.goodsList .photoWrap img{ width: 100%; height: auto;}
.goodsList li dt{
    font-weight: bold;
    margin-top: 0.5em;
}
.goodsList li dt span{ font-size: 90%;}
.goodsList li .attention{ font-size: 84%;}
.goodsList li .price{
    font-weight: bold;
    padding: 0.3em 0;
    color: #0ea8d8;
    font-size: 94%;
}
.goodsList li .price span{ font-size: 84%; font-weight: normal;}
.mainGoodsWrap p.attention,
#preGoodsWrap p.attention{
    text-align: right;
    line-height: 1.2;
    font-size: 72%;
    position: absolute;
    top: 10px;
    right: 6px;
}

.mainGoodsWrap a{
    display: block;
    width: 60%;
    font-size: 118%;
    background-color: #63b6d0;
    color: #fff;
    font-weight: 100;
    line-height: 1.4em;
    padding: 0.5em 0;
    border-radius: 50px;
    position: relative;
    margin: 20px auto 30px;
    text-align: center;
}
.mainGoodsWrap a:hover{ background-color: #3ac0ea;}
.mainGoodsWrap a::after{
    content: "";
    display: block;
    background: url("../img/cursor_s.svg") no-repeat 0 0;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    right: 5%;
    margin: -12px 0 0;
}

#goodsWrap .attention p{
    font-size: 84%;
    line-height: 1.8;
    padding-bottom: 0.4em;
}

@media screen and (max-width: 700px) {
    .mainGoodsWrap, #preGoodsWrap{ padding: 20px  10px;}
    .goodsList li{
        float: none;
        width: 80%;
        margin: 0 auto 30px;
        padding: 0;
    }
    .goodsList li.w100_sp,
    .goodsList li.w50{
        width: 100%;
    }
    .goodsList li:nth-last-of-type(1){ margin-bottom: 0;}
    .mainGoodsWrap p.attention,
    #preGoodsWrap p.attention{
        position: relative;
        right: -1em;
    }
    .mainGoodsWrap a{
        width: 100%;
        font-size: 94%;
    }
    .mainGoodsWrap a::after{ right: 2%;}
}

/* ---------------- 事前販売申し込み方法 ---------------- */
#preOrderWrap{ text-align: center;}
#preOrderWrap h4{
    background-color: #63b6d0;
    color: #fff;
    padding: 0.5em 0;
}
#preOrderWrap h4 + p{
    padding: 0.5em 0;
    font-size: 100%;
}
#preOrderWrap #dateEnd{
    font-size: 140%;
    color: #63b6d0;
}
#preOrderWrap #dateEnd + p{
    line-height: 1.6;
    font-size: 94%;
}

#preOrderWrap .btn{
    width: 90%;
    margin: 0 auto 40px;
}
#preOrderWrap .btn li{
    float: left;
    width: 46%;
    margin: 20px 2%;
}
#preOrderWrap .btn a{
    display: block;
    width: 100%;
    font-size: 118%;
    background-color: #63b6d0;
    color: #fff;
    font-weight: 100;
    line-height: 1.4em;
    padding: 0.5em 0;
    border-radius: 50px;
    position: relative;
}
#preOrderWrap .btn a:hover{ background-color: #3ac0ea;}
#preOrderWrap .btn a::after{
    content: "";
    display: block;
    background: url("../img/cursor_s.svg") no-repeat 0 0;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    right: 10%;
    margin: -12px 0 0;
}
#preOrderWrap dl.attention{
    width: 50%;
    margin: 0 auto 60px;
    border: solid 1px #aaa;
    padding: 1.8em 2em;
}
#preOrderWrap dl.attention dt{
    font-weight: bold;
    padding-bottom: 1em;
    line-height: 1.2;
}
#preOrderWrap dl.attention dd{
    text-align: left;
    font-size: 84%;
    line-height: 1.8;
}
@media screen and (max-width: 870px) {
    #preOrderWrap .btn{ width: 100%;}
    #preOrderWrap dl.attention{ width: 90%; box-sizing: border-box;}
}
@media screen and (max-width: 700px) {
    #preOrderWrap .btn li{
        float: none;
        width: 100%;
        margin: 10px 0;
    }
    #preOrderWrap dl.attention{ width: 100%;}
}