@charset "utf-8";

/* navbar --specific
--------------------------------------------------*/
@media screen and (max-width: 750px) {
    #navbar .hamburger span.line {
        background-color: #97a8b8;
    }
    #navbar.--js_bg span.line{
        background-color: #f7f5f0;
    }
    #navbar a svg path{
        fill: #97a8b8;
    }
}

/* sub-wrapper
--------------------------------------------------*/
.sub-wrapper .content{
    width: 846px;
    margin: 50px auto 0;
}
.sub-wrapper .content:first-of-type{
    margin-top: 0;
}
.sub-wrapper .content .content__title{
    padding: 6px 0 6px 10px;
    border-left: 6px solid #97a8b8;
    border-bottom: 1px solid #97a8b8;
    font-size: 2.2rem;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    letter-spacing: 0.2em;
}
.sub-wrapper .content .--font_medium{
    font-weight: 500;
}
.sub-wrapper .content ul.bullet li{
    padding-left: 10px;
    position: relative;
}
.sub-wrapper .content ul.bullet li::before{
    content: '・';
    position: absolute;
    left: 0;
    top: 0;
}
.sub-wrapper .content span.caution{
    display: inline-block;
    padding-left: 16px;
    position: relative;
}
.sub-wrapper .content span.caution::before{
    content: '※';
    position: absolute;
    left: 0;
    top: 0;
}
.sub-wrapper .content ol{
    counter-reset: listnum;
}
.sub-wrapper .content ol li{
    padding-left: 25px;
    position: relative;
}
.sub-wrapper .content ol li::before{
    counter-increment: listnum;
    content: '('counter(listnum)')';
    position: absolute;
    left: 0;
    top: 0;
}
#privacy.sub-wrapper .content .content__title,
#termsOfUse.sub-wrapper .content .content__title{
    margin-bottom: 40px;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.8;
}
.sub-wrapper .content > dl{
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #97a8b8;
    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: 0.15em;
    text-align: justify;
}
.sub-wrapper .content > dl > dt{
    font-weight: 600;
}
#privacy.sub-wrapper .content > dl > dt,
#termsOfUse.sub-wrapper .content > dl > dt{
    padding-left: 60px;
    position: relative;
}
#privacy.sub-wrapper .content > dl > dt .num_article,
#termsOfUse.sub-wrapper .content > dl > dt .num_article{
    position: absolute;
    left: 0;
}
.sub-wrapper .content > dl > dd a{
    color: #74342b;
    text-decoration: underline;
}
.sub-wrapper .content > dl dl.inner_dl dt{
    font-weight: 400;
}
.sub-wrapper .content dd{
    font-weight: 300;
}
.sub-wrapper .content > dl dl.inner_dl:not(dl.inner_dl:first-of-type){
    margin-top: 20px;
}

/* アコーディオン */
.sub-wrapper .content.--accArea:not(.sub-wrapper .content.--accArea:first-of-type){
    margin-top: 40px;
}
.sub-wrapper .content.--accArea .accArea-title{
    padding-left: 20px;
    color: #97a8b8;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.2em;
}
.sub-wrapper details.accordion{
    width: 100%;
    margin-top: 20px;
}
.sub-wrapper details.accordion summary.acc-head{
    padding: 20px 60px 20px 20px;
    background-color: #97a8b8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f7f5f0;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.15em;
    list-style: none;
    position: relative;
}
.sub-wrapper details.accordion summary.acc-head::before,
.sub-wrapper details.accordion summary.acc-head::after{
    content: '';
    display: inline-block;
    width: 27px;
    height: 2px;
    background-color: #f7f5f0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.3s;
}
.sub-wrapper details.accordion summary.acc-head::after{
    transform: translateY(-50%) rotate(90deg);
    transition: transform 0.3s ease;
}
.sub-wrapper details.accordion[open] summary.acc-head::before{
    opacity: 0;
}
.sub-wrapper details.accordion[open] summary.acc-head::after{
    transform: translateY(-50%) rotate(180deg);
}
.sub-wrapper details.accordion .acc-body {
    overflow: hidden;
}
.sub-wrapper details.accordion .acc-body .acc-body__inner{
    padding: 20px;
    background-color: #e5e9ed;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: 0.1em;
}
.sub-wrapper details.accordion .acc-body .acc-body__inner a{
    color: #74342b;
    text-decoration: underline;
}
.sub-wrapper details.accordion .acc-body .acc-body__inner dl dt{
    font-weight: 500;
}
.sub-wrapper details.accordion .acc-body .acc-body__inner dl dd{
    font-weight: 300;
}
@media screen and (max-width: 750px) {
    .sub-wrapper .content{
        width: 100%;
    }
    .sub-wrapper .content .content__title{
        font-size: 1.7rem;
    }
    #privacy.sub-wrapper .content .content__title,
    #termsOfUse.sub-wrapper .content .content__title{
        font-size: 1.2rem;
    }
    .sub-wrapper .content > dl{
        padding: 15px 17px;
        font-size: 1.2rem;
    }
    #privacy.sub-wrapper .content > dl > dt,
    #termsOfUse.sub-wrapper .content > dl > dt{
        padding-left: 50px;
    }
    /* アコーディオン */
    .sub-wrapper .content.--accArea .accArea-title{
        padding-left: 17px;
        font-size: 1.6rem;
    }
    .sub-wrapper details.accordion summary.acc-head{
        padding: 17px 55px 17px 17px;
        font-size: 1.2rem;
    }
    .sub-wrapper details.accordion summary.acc-head::before,
    .sub-wrapper details.accordion summary.acc-head::after{
        width: 22px;
    }
    .sub-wrapper details.accordion .acc-body .acc-body__inner{
        padding: 17px;
        font-size: 1.2rem;
    }
}

/* recommendedItems
--------------------------------------------------*/
.sub-wrapper .recommendedItems{
    padding-top: 65px;
    border-top: 2px solid #97a8b8;
}
.sub-wrapper .recommendedItems__title{
    margin-bottom: 30px;
    color: #2b2b2b;
    font-size: 2.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-align: center;
}
.sub-wrapper .recommendedItems__slide{
    width: calc(100% - 90px);
    margin: 0 auto;
}
.sub-wrapper .recommendedItems__slide .splide__slide a img{
    width: 100%;
}
.sub-wrapper .recommendedItems__slide .splide__arrow--prev{
    width: auto;
    height: auto;
    background: none;
    left: -45px;
}
.sub-wrapper .recommendedItems__slide .splide__arrow--next{
    width: auto;
    height: auto;
    background: none;
    right: -45px;
}
.sub-wrapper .recommendedItems__slide .splide__arrow svg{
    width: 1.5em;
    height: 1.5em;
}
.sub-wrapper .recommendedItems__slide .slide__productName,
.sub-wrapper .recommendedItems__slide .slide__prodcutPrice{
    font-size: 1.8rem;
    letter-spacing: 0.075em;
}
.sub-wrapper .recommendedItems__slide .slide__productName{
    margin-top: 20px;
}
.sub-wrapper .recommendedItems__slide .slide__prodcutPrice{
    margin-top: 10px;
}
@media screen and (max-width: 750px) {
    .sub-wrapper .recommendedItems__title{
        margin-bottom: 25px;
        font-size: 1.7rem;
        text-align: left;
    }
    .sub-wrapper .recommendedItems__slide{
        width: 100%;
    }
    .sub-wrapper .recommendedItems__slide .slide__productName,
    .sub-wrapper .recommendedItems__slide .slide__prodcutPrice{
        font-size: 1.3rem;
    }
}

/* form
--------------------------------------------------*/
.container textarea{
    width: 100%;
    background-color: #fff;
    border: 1px solid #97a8b8;
    line-height: 1.7;
    letter-spacing: 0.1em;
}
.container input[type="text"],
.container input[type="password"],
.container input[type="tel"],
.container input[type="email"],
.container input[type="number"],
.container input.--coupon_code{
    width: 100%;
    height: 55px;
    padding-right: 25px;
    padding-left: 25px;
    background-color: #fff;
    border: 1px solid #97a8b8;
    letter-spacing: 0.1em;
}
.container input[type="text"].--divide{
    width: calc((100% - 15px) / 2);
}
.container input[type="text"]::placeholder,
.container input[type="password"]::placeholder,
.container input[type="tel"]::placeholder,
.container input[type="email"]::placeholder,
.container input[type="number"]::placeholder,
.container input.--coupon_code::placeholder{
    color: #97a8b8;
}
.container tr td:has(input[type="text"].--divide){
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.container tr.--FAX td input[type="text"]{
    width: 200px;
}
.container select.customize-select,
.container select[name="quantity"] {
    width: 163px;
    height: 55px;
    margin-right: 13px;
    padding-right: 25px;
    padding-left: 25px;
    border: 1px solid #97a8b8;
    background-color: #fff;
    background-image: url("../img/common/select_customize__arrow.svg");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 55px 55px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    letter-spacing: 0.1em;
}
.container select.customize-select.--quantity,
.container select[name="quantity"]{
    width: 130px;
    height: 55px;
    background-size: 55px 55px;
}
.container select.customize-select:invalid,
.container select[name="quantity"]:invalid{
    color: #97a8b8;
}
.container input[type="submit"].--common,
.container button.--common,
.container a.--common{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 414px;
    height: 60px;
    margin: 0 auto;
    /* margin: 50px auto 0; */
    background-color: #2b2b2b;
    color: #f7f5f0;
    font-size: 1.6rem;
    letter-spacing: 0.2em;
    text-align: center;
}
.container .custom-checkbox{
    font-size: 1.5rem;
    line-height: 1.8;
    letter-spacing: 0.18em;
}
.container .custom-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 30px;
    margin-right: 10px;
    border: 1px solid #97a8b8;
    background-color: #fff;
    border-radius: 50%;
    vertical-align: -5px;
    position: relative;
}
.container .custom-checkbox input[type="checkbox"]:checked:before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #97a8b8;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.container .custom-checkbox a{
    color: #74342b;
    text-decoration: underline;
}
@media screen and (max-width: 750px) {
    .container input[type="text"],
    .container input[type="password"],
    .container input[type="tel"],
    .container input[type="email"],
    .container input.--coupon_code{
        height: 46px;
        padding-right: 15px;
        padding-left: 15px;
        font-size: 1.3rem;
    }
    .container tr.--FAX td input[type="text"]{
        width: calc((100% - 40px) / 3);
    }
    .container tr td input[type="text"].--divide{
        width: calc((100% - 10px) / 2);
    }
    .container tr.--FAX td,
    .container tr td:has(select.customize-select){
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .container select.customize-select,
    .container select[name="quantity"] {
        width: 102px;
        height: 55px;
        margin-right: 0;
        padding-right: 15px;
        padding-left: 15px;
        background-image: url("../img/common/select_customize__arrow__sp.svg");
        background-size: 35px 55px;
        font-size: 1.3rem;
    }
    .container select.customize-select.--quantity,
    .container select[name="quantity"]{
        width: 100%;
        height: 55px;
    }
    .container input[type="submit"],
    .container input[type="submit"].--common,
    .container button.--common,
    .container a.--common{
        width: 72%;
        height: 50px;
        font-size: 1.4rem;
    }
    .container .custom-checkbox{
        font-size: 1.3rem;
    }
}

/* alert
--------------------------------------------------*/
.alert{
    margin: 0 auto;
    text-align: center;
    margin-bottom: 30px;
    color: #f05f64;
    letter-spacing: 0.1em;
}

/* 登録済みリスト / 確認
--------------------------------------------------*/
.sub-wrapper .registeredInfo{
    width: 846px;
    margin: 30px auto 0;
    padding: 50px;
    background-color: #fff;
    border: 1px solid #97a8b8;
}
.sub-wrapper .registeredInfo-table{
    width: 100%;
}
.sub-wrapper .registeredInfo-table tr th,
.sub-wrapper .registeredInfo-table tr td{
    padding: 10px 0;
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0.15em;
    vertical-align: middle;
}
.sub-wrapper .registeredInfo-table tr th{
    width: 30%;
    color: #74342b;
}
.sub-wrapper .registeredInfo-table tr td{
    width: 70%;
}
.sub-wrapper .registeredInfo-table tr td span.--text_small{
    font-size: 1.1rem;
    line-height: 1.7;
    letter-spacing: 0.1em;
}
.sub-wrapper .registeredInfo-table tr td a{
    color: #74342b;
    text-decoration: underline;
}
@media screen and (max-width: 750px) {
    .sub-wrapper .registeredInfo{
        width: 100%;
        padding: 30px 20px;
    }
    .sub-wrapper .registeredInfo-table tr th,
    .sub-wrapper .registeredInfo-table tr td{
        display: block;
        width: 100%;
    }
    .sub-wrapper .registeredInfo-table tr th{
        padding: 0 0 5px 0;
        font-size: 1.2rem;
    }
    .sub-wrapper .registeredInfo-table tr td{
        padding: 0 0 30px 0;
        font-size: 1.3rem;
    }
    .sub-wrapper .registeredInfo-table tr:last-child td{
        padding: 0;
    }
}