@charset "UTF-8";

.contents-wrapper {
    width: 100%;
    margin: 0 auto;
    line-height: 1.7;
    letter-spacing: 0.1em;
}
.contents-wrapper .contents-image {
    width: 80%;
    margin: 0 auto 3%;
}
.contents-wrapper .contents-image.contents-main-image {
    width: 100%;
}
.contents-wrapper .contents-image img {
    width: 100%;
}
.contents-wrapper .contents-heading {
    width: 80%;
    margin: 0 auto 3%;
}
.contents-wrapper .contents-heading h3 {
    margin: 8% 0;
    text-align: center;
    font-size: 3vw;
    font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
}
.contents-wrapper .contents-heading h4 {
    margin: 8% 0 3%;
    font-size: 2.2vw;
}
.contents-wrapper .contents-text {
    width: 80%;
    margin: 0 auto 3%;
    font-size: 1.4vw;
}
.contents-wrapper .contents-text .marker {
    background: linear-gradient(transparent 60%, #fafad2 60%);
}
.contents-wrapper .contents-button {
    width: 40%;
    margin: 0 auto 3%;
}
.contents-wrapper .contents-button a {
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 10px;
    background-color: #66bfbf;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.6vw;
    line-height: 4;
    text-decoration: none;
}
.contents-wrapper .contents-button a:hover {
    opacity: 0.6;
}
.contents-wrapper .contents-space {
    padding: 5% 0;
}
.contents-wrapper .contents-conditions {
    width: 80%;
    margin: 0 auto 3%;
    padding: 3%;
    border: 2px solid #66bfbf;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 1.2vw;
}
.contents-wrapper .contents-conditions .conditions-title {
    width: 100%;
    text-align: center;
    font-size: 1.5vw;
    font-weight: bold;
}
.contents-wrapper .contents-conditions .conditions {
    margin-top: 3%;
}
.contents-wrapper .contents-conditions .conditions ul {
    margin-top: 1%;
}
.contents-wrapper .contents-conditions .conditions a {
    text-decoration: underline;
}

@media screen and (max-width: 479px) {

    .contents-wrapper {
        width: 100%;
    }
    .contents-wrapper .contents-image {
        width: 90%;
    }
    .contents-wrapper .contents-image.contents-main-image {
        width: 100%;
    }
    .contents-wrapper .contents-heading {
        width: 90%;
    }
    .contents-wrapper .contents-heading h3 {
        font-size: 5vw;
        text-align: left;
    }
    .contents-wrapper .contents-heading h4 {
        margin: 10% 0 4%;
        font-size: 4vw;
    }
    .contents-wrapper .contents-text {
        width: 90%;
        margin-bottom: 5%;
        font-size: 3.5vw;
    }
    .contents-wrapper .contents-button {
        width: 90%;
    }
    .contents-wrapper .contents-button a {
        border-radius: 5px;
        font-size: 4vw;
        line-height: 3;
    }
    .contents-wrapper .contents-conditions {
        width: 90%;
        margin-bottom: 5%;
        padding: 5%;
        font-size: 3vw;
    }
    .contents-wrapper .contents-conditions .conditions-title {
        font-size: 4.5vw;
    }
    .contents-wrapper .contents-conditions .conditions {
        margin-top: 5%;
    }
}

#campaign_login {
    width: 40%;
    margin: 0 auto 3%;
}
#campaign_login .login-title {
    width: 100%;
    margin-bottom: 1%;
    text-align: center;
    font-size: 1.8vw;
}
#campaign_login a {
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 10px;
    background-color: #66bfbf;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.6vw;
    line-height: 4;
    text-decoration: none;
}
#campaign_login a:hover {
    opacity: 0.6;
}

@media screen and (max-width: 479px) {

    #campaign_login {
        width: 90%;
    }
    #campaign_login .login-title {
        display: none;
    }
    #campaign_login a {
        border-radius: 5px;
        font-size: 4vw;
        line-height: 3;
    }
}

#campaign_products {
    margin-top: 8%;
}
#campaign_products .products-title {
    text-align: center;
    font-size: 2vw;
    font-weight: bold;
}
#campaign_products .search-products .search-product .product-header .product-name {
    min-height: 3.3vw;
}
#campaign_products .search-products .search-product .product-button {
    text-align: center;
}
#campaign_products .search-products .search-product .product-button a.action-button-sub {
    border: none;
    box-shadow: none;
    font-size: 1.3vw;
}

@media screen and (max-width: 479px) {

    #campaign_products {
        margin-top: 5%;
    }
    #campaign_products .products-title {
        font-size: 5vw;
    }
    #campaign_products .search-products .search-product {
        margin-top: 0;
    }
    #campaign_products .search-products .search-product .product-header .product-name {
        min-height: 11vw;
    }
    #campaign_products .search-products .search-product .product-button a.action-button-sub {
        font-size: 4vw;
    }
}

.product-modaal-wrapper .modaal-container {
    width: 40%;
}
.product-modaal-wrapper .modaal-container .product-area {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    padding: 3% 0;
    font-size: 1vw;
}

@media screen and (max-width: 479px) {

    .product-modaal-wrapper .modaal-container {
        width: 88vw;
    }
    .product-modaal-wrapper .modaal-content-container {
        padding: 3% 5%;
    }
    .modaal-wrapper.product-modaal-wrapper .modaal-close {
        top: 10px;
        right: 10px;
        background: #999;
        z-index: 1;
    }
    .product-modaal-wrapper .modaal-container .product-area {
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 5% 0;
        font-size: 3vw;
    }
}

.product-modaal-wrapper .modaal-container .product-area .modal-wrap {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2000;
    overflow: hidden;
    background: none;
    background-color: rgba(0, 0, 0, 0.3);
}
.product-modaal-wrapper .modaal-container .product-area .modal-wrap .cart-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 50%;
    padding: 2% 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    font-weight: bold;
    font-size: 1.3vw;
    color: #fff;
}

@media screen and (max-width: 479px) {

    .product-modaal-wrapper .modaal-container .product-area .modal-wrap .cart-modal {
        width: 80%;
        padding: 2% 0;
        font-size: 4vw;
    }
}

.product-modaal-wrapper .modaal-container .product-main-area {
    width: 100%;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-name {
    margin-top: 2%;
    font-size: 1.5vw;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area {
    margin-top: 6%;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .size-table .size-table-btn {
    display: block;
    font-size: 1.1vw;
    font-weight: bold;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .size-table .size-table-content {
    position: relative;
    display: none;
    width: 100%;
    margin: 1% auto 0;
    background-color: #fff;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .size-table .size-table-content .size-table-body {
    padding: 1%;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .size-table .size-table-content .size-table-body h5 {
    display: none;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .size-table .size-table-content .size-table-body .size_guide .size_img {
    width: 80%;
    margin: 0 auto;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .size-table .size-table-content .size-table-body .size_guide .size_img img {
    width: 100%;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .size-table .size-table-content .size-table-body .size_guide table {
    margin: 2% 0 1%;
    border: 0.5px solid #ddd;
    color: #222;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .size-table .size-table-content .size-table-body .size_guide table tr th {
    padding: 0.8% 0.4%;
    text-align: center;
    color: #222;
    background-color: #fff;
    border: 0.5px solid #ddd;
    font-size: 0.8vw;
    font-weight: bold;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .size-table .size-table-content .size-table-body .size_guide table tr td {
    width: 100px;
    padding: 0.8% 0.4%;
    text-align: center;
    border: 0.5px solid #ddd;
    font-size: 0.8vw;
}
@media screen and (max-width: 479px) {

    .product-modaal-wrapper .modaal-container .product-main-area {
        margin-top: 3%;
        padding: 0;
    }
    .product-modaal-wrapper .modaal-container .product-main-area .product-name {
        margin-top: 1%;
        font-size: 4.5vw;
    }
    .product-modaal-wrapper .modaal-container .product-main-area .product-size-area {
        margin-top: 3%;
    }
    .product-modaal-wrapper .modaal-container .product-main-area .product-size-area .size-table .size-table-btn {
        font-size: 3.3vw;
    }
    .product-modaal-wrapper .modaal-container .product-main-area .product-size-area .size-table .size-table-content .size-table-body .size_guide .size_img {
        width: 100%;
    }
    .product-modaal-wrapper .modaal-container .product-main-area .product-size-area .size-table .size-table-content .size-table-body .size_guide table tr th {
        font-size: 2.4vw;
    }
    .product-modaal-wrapper .modaal-container .product-main-area .product-size-area .size-table .size-table-content .size-table-body .size_guide table tr td {
        font-size: 2.4vw;
    }
}

.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .product-size-items {
    margin-top: 3%;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .product-size-items .product-size-item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    width: 100%;
    height: 3.6vw;
    margin-top: 2.4%;
    padding: 2% 4%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 2px 2px 4px -1px #444;
    font-size: 1vw;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .product-size-items .product-size-item.no-stock {
    background-color: #ccc;
    box-shadow: none;
    cursor: not-allowed;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .product-size-items .product-size-item .size-name {
    width: 25%;
    font-size: 1.3vw;
    font-weight: bold;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .product-size-items .product-size-item .size-status {
    flex-grow: 1;
    margin-left: 1%;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .product-size-items .product-size-item .size-status .arrival-comment {
    color: #de5656;
    font-weight: bold;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .product-size-items .product-size-item .size-status .sold-out {
    color: #fff;
    font-weight: bold;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .product-size-items .product-size-item .size-action {
    width: 40%;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .product-size-items .product-size-item .size-action .cart {
    background-color: #66bfbf;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    line-height: 2;
    cursor: pointer;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-size-area .product-size-items .product-size-item .size-action .cart:hover {
    opacity: 0.6;
}

.product-modaal-wrapper .modaal-container .product-main-area .product-button {
    width: 100%;
    margin-top: 3%;
}
.product-modaal-wrapper .modaal-container .product-main-area .product-button a.action-button {
    display: block;
    padding: 2% 0;
    line-height: normal;
    font-size: 1vw;
}

@media screen and (max-width: 479px) {

    .product-modaal-wrapper .modaal-container .product-main-area .product-size-area .product-size-items .product-size-item {
        height: 12vw;
        padding: 2% 2% 2% 4%;
        font-size: 3vw;
    }
    .product-modaal-wrapper .modaal-container .product-main-area .product-size-area .product-size-items .product-size-item .size-name {
        width: 25%;
        font-size: 4vw;
    }
    .product-modaal-wrapper .modaal-container .product-main-area .product-size-area .product-size-items .product-size-item .size-status {
        margin-left: 1%;
    }
    .product-modaal-wrapper .modaal-container .product-main-area .product-size-area .product-size-items .product-size-item .size-action {
        width: 40%;
    }
    .product-modaal-wrapper .modaal-container .product-main-area .product-size-area .product-size-items .product-size-item .size-action .cart {
        border-radius: 4px;
        line-height: 2;
    }

    .product-modaal-wrapper .modaal-container .product-main-area .product-button a.action-button {
        font-size: 3vw;
    }
}