﻿:root{
    --color--bg : #F9F9F9;
    --color--bg-elm : #EFEFEF;
    --color--line : #CBCBCB;
    --color--red : #D61C4D;
    --color--blue : #164889;
    --color--light-blue : #60748f;
}
/* ----------- 全体 */
.main-contents {
    padding: 4rem 0;
}
.main-contents * {
    font-family: "Noto Sans JP", sans-serif;
    padding: 0;
    margin: 0;
}
.main-contents a {
    color: black;
}
.main-contents .main-ttl {
    text-align: center;
    font-size: 24px;
    margin-bottom: 70px;
}
.main-contents .main-ttl .inner::before,
.main-contents .main-ttl .inner::after {
    display: inline-block;
    color: var(--color--blue);
    font-size: 1.2em;
    font-weight: normal;
}
.main-contents .main-ttl .inner::before{
    content: "[";
    margin-right: 0.3em;
}
.main-contents .main-ttl .inner::after {
    content: "]";
    margin-left: 0.3em;
}

.main-contents .sub-ttl {
    border-left: 3px solid var(--color--blue);
    padding: 0.2em 0 0.2em 1em;
    margin-bottom: 30px;
    font-size: 24px;
}
.main-contents li { list-style: none;}
/* ----------- もっと見る */
.main-contents .more-btn {
    text-align: center;
    margin-top: 100px;
}
.main-contents .more-btn .btn {
    background-color: var(--color--blue);
    display: block;
    width: 100%;
    max-width: 400px;
    color: white;
    padding: 0.5em 10px;
    border-radius: 0.5em;
    position: relative;
    z-index: 0;
    font-size: clamp(12px, 3.5vw, 24px);
    overflow: hidden;
    margin: auto;
}
/* ----------- カートボタン */
.main-contents .add-cartbtn {
    appearance: none;
    border: 0;
    outline: 0;
    color: white;
    background-color: #F86800;
    line-height: 1;
    text-align: center;
}
.main-contents .add-cartbtn.no-item { background-color: #9b9b9b; pointer-events: none; }
@media (min-width: 769px) {
    .main-contents .add-cartbtn:not(.no-item) {
        position: relative;
        z-index: 0;
        transition: .3s;
        overflow: hidden;
        color: white;
    }
    .main-contents .add-cartbtn:not(.no-item)::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 0;
        height: 100%;
        background: linear-gradient(180deg, #F86800 20%, rgb(255 156 68) 50%, #F86800 80%);
        content: "";
        transition: width .4s ease;
    }
    .main-contents .add-cartbtn:not(.no-item):hover::before {
        width: 100%;
    }
}
/* ----------- 金額 */
.main-contents .price {
    color: var(--color--red);
    font-size: 24px;
    font-weight: bold;
}
.main-contents .price .tax {
    color: black;
    font-size: 0.6em;
    font-weight: normal;
}
@media (max-width: 768px) {
    .main-contents .price .tax {
        display: block;
    }
}

/* ----------- モーダル */
.modal-select .select-btn {
    appearance: none;
    border: 0;
    outline: 0;
    color: white;
    background-color: var(--color--blue);
    display: block;
    width: 100%;
    padding: 1em 10px;
    border-radius: 0.4em;
    font-size: 24px;
    line-height: 1;
    text-align: center;
}
.modal-contents-wrap {
    opacity: 0;
    visibility: hidden;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.modal-contents-wrap.active { 
    opacity: 1;
    visibility: visible;
}
.modal-contents-inner {
    background-color: white;
    max-width: 1600px;
    width: 90%;
    position: relative;
    padding: 2em;
}
.modal-contents-inner .close-btn {
    top: 1em;
    right: 1em;
}
.modal-contents-inner .contents-detail {
    max-height: 60vh;
    overflow: auto;
}
.modal-contents-inner .select-item-list-contents .is-ttl {
    text-align: center;
    margin-bottom: 2em;
}
.modal-contents-inner .select-item-list-contents .select-option-items.is-checkselect-list {
    gap: 24px;
}
.modal-contents-inner .select-item-list-contents .select-option-items.is-checkselect-list .select-item {
    width: calc((100% - 96px) / 5);
}
.modal-contents-inner .select-option-items.is-checkselect-list {padding: 1em 1.5em 0 0;}

@media (max-width: 768px) {
    .modal-contents-inner {
        padding: 2em 1em;
    }
    .modal-contents-inner .select-option-items.is-checkselect-list {padding: 1em 0.5em 0 0;}
    .modal-contents-inner .select-item-list-contents .select-option-items.is-checkselect-list .select-item {width: calc((100% - 24px) / 2);}
}
/* ----------- 閉じるボタン */
.modal-contents-wrap .close-btn {
    width: 25px;
    aspect-ratio: 1;
    position: absolute;
    cursor: pointer;
    outline: 0;
    border: 0;
    background-color: transparent;
}
.modal-contents-wrap .close-btn::before,
.modal-contents-wrap .close-btn::after {
    content: "";
    width: 100%;
    height: 3px;
    display: inline-block;
    background-color: #AFAFAF;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.modal-contents-wrap .close-btn::before { transform: rotate(45deg); }
.modal-contents-wrap .close-btn::after {transform: rotate(-45deg); }
/* ----------- 戻るボタン */
.modal-contents-wrap .back-btn {
    outline: 0;
    border: 0;
    background-color: transparent;
    padding: 0;
    color: #AFAFAF;
}
.modal-contents-wrap .back-btn:hover {
    text-decoration: underline;
}
/* カート:モーダル内 */
.cart-send .modal-contents-inner { max-width: 824px; }
.cart-send-contents,
.cart-send-ttl,
.cart-send-contents .add-send-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cart-send-ttl {
    gap: 20px;
    margin-bottom: 2.5em;
}
#override .cart-send-ttl .iguazu-logo {
    width: auto;
    height: 25px;
}
#override .cart-send-ttl .spbnk-logo { 
    width: auto;
    height: 40px;
}
.cart-send-contents .is-comment {
    text-align: center;
}
.cart-send-contents .is-comment + .is-comment {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color--line);
}
.cart-send-contents .add-send-cart {
    gap: 10px;
    max-width: 500px;
    width: 90%;
    margin: 40px auto 0;
}
.cart-send-contents .add-send-cart .add-cartbtn {
    display: block;
}
.modal-contents-wrap .back-btn { margin: auto; }
@media (max-width: 768px) {
    .content-wrap.item-cart {
        margin-top: 4em;
    }
}
/* カートボタン */
.cart-send-contents .add-cartbtn {
    display: block;
    width: 100%;
    padding: 1em 10px;
    border-radius: 0.4em;
    font-size: 24px;
    line-height: 1;
    text-align: center;
}