@charset "UTF-8";
/* slide */
.products_slide_wrap{
    width: 40%;
}
.products_slide{
    width: 100%;
}
.products_slide li{
    width: 100%;
}
.products_slide li img{
    width: 100%;
}
/* nav */
.products_slide_nav{
    width: 100%;
    margin-top: 10px;
}
.products_slide_nav li{
    width: 100%;
}
.products_slide_nav li img{
    width: 100%;
}
.products_slide_nav .slick-slide{
    margin: 0 5px;   
}
@media only screen and (max-width: 768px) {
    .products_slide_wrap{
        width: 100%;
    }
}
/* price */

.price_wrap{
    margin: 24px 0;
}
.discount{
    color:var(--white);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    border-radius: 2px;
    background: var(--red);
    display: flex;
    padding: 3px 10px;
    display: inline-block;
    margin-bottom: 8px;
}
.price_wrap .price ,.regular_purchase_list .price{
    color: var(--black);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.price_wrap .price span , .regular_purchase_list .price span{
    font-size: 70%;
    font-weight: 600;
}
.price_wrap .price small , .regular_purchase_list .price small{
    font-size: 70%;
    font-weight: 400;
}
/* 定期購入 */
.regular_purchase_list{
    display: flex;
    flex-flow: column;
    gap: 8px;
}
.regular_purchase_list li{
    padding: 16px 20px;
    border-radius: 4px;
    border: 1px solid var(--border12);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.plan_name{
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
}
.plan_name strong{
    color: var(--red);
    font-weight: 600;
    margin: 0 4px;
    font-size: 16px;
}
/* 初めての方へ */
.guide_wrap{
    margin: 32px 0;
    padding: 20px 24px;
    border: 1px solid var(--border12);
}
.guide_title{
    margin-bottom: 8px;
}
.guide_point_list{
    margin: 16px 0;
    display: flex;
    flex-flow: column;
    gap: 8px;
}
.guide_point_list li{
    display: flex;
    align-items: center;
    gap: 8px;
}
.guide_primarybutton{
    color:var(--white);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    width: 100%;
    line-height: normal;
    border-radius: 2px;
    background: var(--green);
    padding: 12px 10px;
}
.guide_link{
    color: var(--green);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    margin: 24px auto 12px;
    display: block;
}

/* body */
.products_wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.products_contents_wrap{
    width: 55%;
}
@media only screen and (max-width: 768px) {
    .products_contents_wrap{
        width: 100%;
        padding: 24px 4% 0;
    }
}
/*  商品説明 アコーディオン */
.products_desc_list{
    width: 100%;
    margin-top: 32px;
  }
.products_desc_list .accordion_one{
    border-top: 1px solid var(--border12);
    padding: 20px 0;
}
.products_desc_list .accordion_one:last-child{
    border-bottom: 1px solid var(--border12);
}
.products_desc_list .accordion_one .accordion_header {
display: flex;
justify-content: space-between;
position: relative;
cursor: pointer;
transition-duration: 0.2s;
color: var(--black);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 150%;
}
.products_desc_list .accordion_one .accordion_header .i_box {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
transform-origin: center center;
transition-duration: 0.2s;
}
.products_desc_list .accordion_one .accordion_header .i_box .one_i {
display: block;
width: 18px;
height: 18px;
transform-origin: center center;
transition-duration: 0.2s;
position: relative;
}
.products_desc_list .accordion_one .accordion_header.open .i_box {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.products_desc_list .accordion_one .accordion_header .i_box .one_i:before, .products_desc_list .accordion_one .accordion_header .i_box .one_i:after {
display: flex;
content: '';
border-radius: 10px;
width: 12px;
height: 2px;
position: absolute;
top: 8px;
left: 3px;
transform-origin: center center;
background-color:var(--black);
}
.products_desc_list .accordion_one .accordion_header .i_box .one_i:before {
width: 2px;
height: 12px;
top: 3px;
left: 8px;
}
.products_desc_list .accordion_one .accordion_header.open .i_box .one_i:before {
content: none;
}
.products_desc_list .accordion_one .accordion_inner {
display: none;
box-sizing: border-box;
padding-top:10px;
}
.products_desc_list .accordion_inner p{
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 170%;
}
/* modal */
.line-modal {
    position:relative;
    max-width:740px;
    margin-left:auto;
    margin-right:auto;
    padding:50px 80px 30px;
    background-color:white;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 2px 20px 0 rgba(0,0,0,.2);
}
.line-modal .s-logo {
    margin:0 auto 2em;
}
.line-modal .s-logo img {
    max-width: 100%;
}
.line-modal .s-lead {
    font-size:19px;
    line-height: 1.5;
    font-weight:600;
    margin-bottom:1em;
}
.line-modal .s-text {
    font-size:17px;
    line-height: 1.5;
    margin-bottom:1em;
}
.line-modal .s-title {
    color:#00a358;
    font-size:26px;
    line-height: 1.3;
    font-weight:600;
    text-align: center;
    margin-bottom:.5em;
}
.line-modal .s-line-qr {
    width:220px;
    margin:0 auto 40px;
    border:1px solid #efefef;
    display:none;
}
.line-modal .s-line-qr.is-show {
    display:block;
}
.line-modal .s-line-qr img {
    max-width:100%;
}
.line-modal .s-line-button {
    margin-bottom:50px;
    display:none;
}
.line-modal .s-line-button.is-show {
    display:block;
}
.line-modal .s-line-button a {
    display:block;
    width:fit-content;
    margin:0 auto;
    padding: 1.5em 3em;
    background-color:#00a358;
    color:white;
    font-size:22px;
    line-height: 1.2;
    font-weight:600;
    border:4px solid #f6ea36;
    border-radius: 10em;
    transition: all .2s ease-out;
}
.line-modal .s-line-button a:hover {
    transform: translateY(5px);
}
.line-modal .s-coupon {
    display:flex;
    align-items: center;
    background-color:#f6ea36;
    border-radius: 10px;
    padding:10px 26px 10px 40px;
    margin-bottom:40px;
}
.line-modal .s-coupon_text {
    flex:1;
    color:#00a358;
    font-size:24px;
    line-height: 1.5;
    font-weight:600;
}
.line-modal .s-coupon figure {
    width:118px;
    margin:-30px 0 -20px 1em;
}
.line-modal .s-coupon figure img {
    max-width:100%;
}
.line-modal .popup-modal-dismiss a {
    display: block;
    width:fit-content;
    margin:auto;
    background-color: #333;
    padding:1em 2em;
    font-size:16px;
    line-height: 1.2;
    color:white;
    border-radius: 10rem;
}
.popup-modal.s-line {
    background-image: url(/img/common/icon_modal.svg);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 20px;
}
@media only screen and (max-width: 768px) {
    .line-modal {
        margin-left:6px;
        margin-right:6px;
        padding:40px 20px 10px;
    }
    .line-modal .s-logo {
        max-width: 500px;
    }
    .line-modal .s-lead {
        font-size:16px;
    }
    .line-modal .s-text {
        font-size:14px;
    }
    .line-modal .s-title {
        font-size:20px;
    }
    .line-modal .s-line-button {
        margin-bottom:30px;
    }
    .line-modal .s-line-button a {
        padding: 1.5em 2em;
        font-size:16px;
    }
    .line-modal .s-coupon {
        padding:10px 6px 10px 20px;
        margin-bottom:20px;
    }
    .line-modal .s-coupon_text {
        font-size:16px;
    }
    .line-modal .s-coupon figure {
        width:30%;
        margin:-20px 0 -10px 1em;
    }
    .line-modal .popup-modal-dismiss a {
        font-size:12px;
    }
}