@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : goods.css
Description : グッズ
===================================================================== */


/* =====================================================================
*    goods
* =================================================================== */

.goods {
    padding: calc(150 / 750 * 100%) 0 calc(100 / 750 * 100%);
}

.goods_lead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 3.6rem;
    font-weight: bold;
    color: var(--red);
    text-align: center;
}

.goods_lead::before,
.goods_lead::after {
    content: "…";
    display: block;
    width: 100%;
    height: 3rem;
    line-height: 0;
    font-size: 5rem;
    font-weight: normal;
}

.goods_lead::before {
    text-align: right;
}

.goods_lead::after {
    text-align: left;
}

.goods_lead span {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin: 0 .3em;
}

.btn_shop {
    margin: calc(80 / 690 * 100%) auto calc(66 / 690 * 100%);
}

.btn_shop::before {
    background-image: url(../images/harry/harry1.png);
    width: calc(90 / 480 * 100%);
    padding-top: calc(90 / 480 * 100%);
    margin: calc(-66 / 480 * 100%) auto 0;
}

.btn_shop a {
    font-weight: bold;
    border: .15em solid var(--red);
    line-height: 1;
    text-align: center;
    padding: 1em;
    border-radius: 2em;
    -webkit-box-shadow: 2px 2px 10px 0px rgb(0 0 0 / 25%);
    box-shadow: 2px 2px 10px 0px rgb(0 0 0 / 25%);
}

.goods_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.goods_list>li {
    width: calc(300 / 690 * 100%);
    padding-bottom: calc(30 / 690 * 100%);
    margin-left: calc(45 / 690 * 100%);
}

.goods_list>li::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(80 / 300 * 100%);
    height: .2em;
    background-color: var(--red);
}

@media screen and (max-width: 767px) {
    .goods_list>li:nth-child(2n+1) {
        margin-left: 0;
    }
    .goods_list>li:not(:nth-child(-n+2)) {
        margin-top: calc(60 / 690 * 100%);
    }
}

.goods_img li:not(:last-child) {
    margin-bottom: .7em;
}

.goods_img li::before,
.goods_img li::after,
.goods_img span::before,
.goods_img span::after {
    content: '';
    position: absolute;
    width: calc(20 / 300 * 100%);
    padding-top: calc(20 / 300 * 100%);
    border-top: .15em solid var(--red);
    border-left: .15em solid var(--red);
    z-index: 2;
}

.goods_img span {
    display: block;
}

.goods_img li::before {
    top: 0;
    left: 0;
}

.goods_img li::after {
    top: 0;
    right: 0;
    -webkit-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.goods_img span::before {
    bottom: 0;
    left: 0;
    -webkit-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1);
}

.goods_img span::after {
    bottom: 0;
    right: 0;
    -webkit-transform: scale(-1, -1);
    -ms-transform: scale(-1, -1);
    transform: scale(-1, -1);
}

.goods_img img {
    border: .15em solid var(--red3);
}

.goods_name {
    font-weight: bold;
    line-height: 1.333;
    margin: .7em 0 .5em;
}

.goods_detail dl {
    line-height: 1.833;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.goods_detail dt {
    padding-right: .2em;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

@media screen and (min-width: 768px) {
    .goods {
        padding: calc(140 / 1400 * 100%) 0 calc(100 / 1400 * 100%);
    }
    .goods_lead {
        font-size: 2.8rem;
    }
    .goods_lead::before,
    .goods_lead::after {
        height: 3.3rem;
    }
    .btn_shop {
        width: calc(390 / 1200 * 100%);
        margin: calc(80 / 1200 * 100%) auto calc(60 / 1200 * 100%);
    }
    .btn_shop::before {
        width: calc(90 / 390 * 100%);
        padding-top: calc(90 / 390 * 100%);
        margin-top: calc(-65 / 390 * 100%);
    }
    .btn_shop a:hover {
        background-color: var(--red);
    }
    .goods_list>li {
        width: calc(300 / 1200 * 100%);
        padding-bottom: calc(25 / 1200 * 100%);
        margin-left: calc(33 / 1200 * 100%);
    }
    .goods_list>li::before {
        width: calc(40 / 300 * 100%);
    }
    .goods_list>li:nth-child(3n+1) {
        margin-left: 0;
    }
    .goods_list>li:not(:nth-child(-n+3)) {
        margin-top: calc(40 / 1200 * 100%);
    }
    .goods_name {
        margin: 1em 0 .8em;
    }
}

@media screen and (min-width: 1400px) {
    .goods {
        padding: 140px 0 100px;
    }
}


/* =====================================================================
*    shop
* =================================================================== */

.shop {
    background-color: var(--red2);
    padding: calc(110 / 750 * 100%) 0 calc(150 / 750 * 100%);
}

.shop_list {
    background-color: #fff;
    padding: calc(40 / 690 * 100%) calc(30 / 690 * 100%);
}

.shop_list:not(:last-child) {
    margin-bottom: calc(90 / 690 * 100%);
}

.shop_list dt {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    width: calc(460 / 690 * 100%);
    font-weight: bold;
    font-size: 2.8rem;
    background-color: var(--red);
    color: #fff;
    padding: 0.2em 0;
    margin-top: -1.2em;
}

.shop_list:first-child dt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/harry/harry5.png) no-repeat center/contain;
    width: calc(125 / 460 * 100%);
    padding-top: calc(91 / 460 * 100%);
    margin: calc(-25 / 460 * 100%) 0 0 calc(-100 / 460 * 100%);
    -webkit-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.shop_list:first-child dt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/harry/harry5.png) no-repeat center/contain;
    width: calc(125 / 460 * 100%);
    padding-top: calc(91 / 460 * 100%);
    margin: calc(-25 / 460 * 100%) 0 0 calc(-100 / 460 * 100%);
    -webkit-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.shop_list:nth-child(2) dt::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background: url(../images/harry/harry2.png) no-repeat center/contain;
    width: calc(95 / 460 * 100%);
    padding-top: calc(91 / 460 * 100%);
    margin: calc(-25 / 460 * 100%) calc(-70 / 460 * 100%) 0 0;
}

.shop_list dd {
    border-bottom: .1em solid var(--red2);
}

.shop_list dd a {
    display: inline-block;
    padding: .8em 0 .8em 1.2em;
}

.shop_list dd a::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background-color: var(--red);
    margin: auto 0;
}

@media screen and (min-width: 768px) {
    .shop {
        padding: calc(100 / 1400 * 100%) 0;
    }
    .shop_box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .shop_list {
        padding: calc(40 / 1200 * 100%);
        width: calc(475 / 1200 * 100%);
        margin: 0 calc(25 / 1200 * 100%) !important;
    }
    .shop_list dt {
        padding: 0.5em 0;
        width: calc(255 / 475 * 100%);
        font-size: 1.8rem;
    }
    .shop_list:first-child dt::before {
        width: calc(125 / 255 * 100%);
        padding-top: calc(91 / 255 * 100%);
        margin: calc(-35 / 255 * 100%) 0 0 calc(-92 / 255 * 100%);
    }
    .shop_list:nth-child(2) dt::before {
        width: calc(95 / 255 * 100%);
        padding-top: calc(91 / 255 * 100%);
        margin: calc(-35 / 255 * 100%) calc(-76 / 255 * 100%) 0 0;
    }
    .shop_list dd a:hover {
        color: var(--red);
    }
}

@media screen and (min-width: 1400px) {
    .shop {
        padding: 100px 0;
    }
}