@charset "utf-8";

.phone_only {
    display: block;
}

.screen_only {
    display: none;
}

.contents00 {
    background: #fff !important;
}

.contents_nav li a {
    border-top: 10px #18779A solid !important;
}

.contents_nav li a {
    box-shadow: 0px 3px 9px rgb(195 202 237) !important;
}

.targets {
    background: #daf0f8 !important;
}

.targets .targets_list em {
    color: #18779a !important;
    letter-spacing: 0;
}

.targets .targets_list li {
    background: url(../../img/goods/ks/check.webp) no-repeat 20px center, linear-gradient(to right, #ffffff 0%, rgb(255 255 255) 100%) !important;
    background-size: 3.7333333333333vw auto, auto !important;
}

.radio_container_div .discount img {
    width: auto;
    float: right;
}

.radio_container_div .discount img:first-child {
    display: none
}

.radio_container_div .discount img:last-child {
    display: block;
    position: absolute;
    top: 0;
}

.purchase .one_time h2,
.purchase .regular h2 {
    margin: 0 0 0 3vw;
    position: relative;
    z-index: 1;
    font-size: 6vw;
}

.purchase .one_time h2 p,
.purchase .regular h2 p {
    font-size: 3.5vw;
    padding-bottom: 6px;
}

.gold_1 {
    color: #996e33 !important;
    margin: 0 0 5px 0 !important;
}

.red_1 {
    color: #eb0044;
    margin-bottom: 5px;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: -0.05em;
}

.purchase .btn_modal {
    font-size: 2.9333333333333vw;
    line-height: 1.4;
    position: absolute;
    top: -7.5vw;
    right: 0;
    z-index: 1;
}

.purchase_contents {
    position: relative;
    margin-top: 3vw;
}

.radio_container label {
    width: 100%;
}

.radio_container_div {
    display: flex;
    align-items: flex-end;
}

.radio_container {
    flex: 1;
    width: 100%;
}

.regular .radio_container {
    height: inherit;
}

.radio_container {
    margin: 0 0 6px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.radio_container label {
    margin-top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4vw 2.5vw 4vw 12vw;
    position: relative;
}

.one_time .radio_container label {
    padding: 1.5vw 1vw 1.5vw 12vw;
}

.radio_container label .label_group {
    gap: 5px;
    display: flex;
    align-items: flex-end;
    flex: 1 !important;
    flex-direction: row;
    margin: 13px 0 13px 48px;
}

.one_time .radio_container label .label_group {
    gap: \5px;
    display: flex;
    align-items: flex-end;
    flex: 1 !important;
    flex-direction: row;
    margin: 0;
}

.radio_container label img {
    height: 50px;
    width: auto;
    margin: 0 5px;
    position: relative;
    top: inherit;
    right: initial;
    transform: inherit;
    left: inherit;
    bottom: inherit;
}

.purchase .supply .detail,
.purchase .notice .detail {
    margin-left: 0;
    font-size: 3.2vw;
    font-weight: normal;
    display: block;
    margin-top: 0.8vw;
    letter-spacing: 0.5px;
}

.purchase .price {
    margin: 0;
    font-size: 3vw;
    flex: 1;
}

.purchase .price .number {
    font-size: 5.8vw;
    letter-spacing: -0.5px;
    padding: 0 0.5vw;
}

.radio_container_div {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 4vw;
    position: relative;
    margin-bottom: 0;
}

.radio_container_div .discount {
    width: 16%;
    /* margin-bottom: -4vw; */
    z-index: 1;
    position: absolute;
    left: -3.3vw;
    top: -2.3vw;
}

.radio_container_div .discount img {
    width: auto;
    float: none;
    position: inherit;
}

.radio_container label .label_group {
    gap: 3px;
    display: flex;
    width: 100%;
    flex: 1 !important;
    margin: 0 0 0 1vw;
    flex-direction: column;
    align-items: stretch;
}

.one_time .radio_container label .label_group {
    gap: 5px;
    display: flex;
    align-items: center;
    flex: 1 !important;
    flex-direction: row;
    margin: 3px 0 3px -1vw;
}

.radio_container label::before {
    top: 50%;
    transform: translateY(-50%);
    left: 3.6vw;
    background-size: auto 98%;
}

.radio_container input:checked+label::before {
    top: 48%;
    transform: translateY(-50%);
    left: 3.6vw;
    background-size: auto 98%;
}

.purchase .supply .notice_red,
.purchase .notice .notice_red {
    display: block;
}

.purchase .supply .notice_red,
.purchase .notice .notice_red {
    display: block;
    font-size: 4.88vw;
    margin-bottom: 0;
    letter-spacing: normal;
    position: relative;
    padding-right: 4vw;
}

.purchase .supply {
    flex: 1;
    font-size: 4.88vw;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    row-gap: 1vw
}

.purchase .notice {
    flex: 1;
    font-size: 4.88vw;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: flex-end;
}

.purchase .notice_second,
.purchase .notice_second {
    color: #222;
    display: block;
    font-size: 3.2vw;
    letter-spacing: normal;
    font-weight: bold;
    width: 100%;
}

.purchase .supply .notice_red:before,
.purchase .notice .notice_red:before {
    position: absolute;
    content: "-";
    right: 1vw;
    top: 0vw;
    font-size: 4.88vw;
}

.radio_container input:checked+label {}

.purchase .note {
    text-align: right;
    /*margin-top: 1vw !important;*/
}

.mb_2 {
    margin-bottom: -2vw !important
}

.brown_2 {
    color: #996e33 !important;
    margin: 0 !important;
}

.purchase .link {
    font-size: 2.9333333333333vw;
    line-height: 1.4;
    position: absolute;
    top: -7vw;
    right: 0;
    z-index: 1;
}

.regular_extra_footer .link {
    position: relative;
    line-height: normal;
    font-size: 3.864734299516908vw;
    top: inherit;
}

.red_group,
.red_group span,
.red_group span.detail {
    color: #eb0000 !important;
}

.w1400 {
    width: auto
}

.tips {
    background: linear-gradient(to bottom, #ffffff 0%, #dcf0f9 13%, #dcf0f9 96%, #ffffff 100%);
}

.tips .lead,
.tips_list .label h3 span,
.tips_list .label h3 {
    color: #18779a !important;
}

.tips_list .label {
    border-left: 2px #18779a solid !important;
}

 .precautions_table td .spec_list li.fig02 figure {
        width: 79% !important;
        display: flex;
        align-items: center;
        flex-direction: row;
        margin: 0;
    }

.precautions_table td .spec_list li.fig02 figure img{
    flex: 1
}

/*main*/
.color1 {
    color: #222;
}

.color2 {
    color: #996e33;
}

.color3 {
    color: #18779a;
}

/*main*/
.ks_1 {
    padding: 0;
    width: auto;
    margin: auto;
    position: relative;
}

.ks_1>.h1 {
    width: auto;
    color: #222;
    font-weight: bold;
    text-align: center;
    font-size: 6.5vw;
    margin: auto;
    position: absolute;
    padding-bottom: 29px;
    left: 50%;
    top: 5vw;
    transform: translateX(-50%);
    font-family: "arail";
    white-space: nowrap;
}

.ks_1>img {
    width: 100%
}

.bg1 {
    background: url(/img/goods/ks/bg1_sp.webp) no-repeat center top;
    background-size: 100% auto;
    position: relative;
    text-align: center;
    padding-top: 10vw;
}

.bg1>.h1 {
    width: fit-content;
    color: #222;
    font-weight: bold;
    text-align: center;
    font-size: 7.5vw;
    margin: auto;
    position: relative;
    font-family: "arail";
}

.bg1>.h1:before {
    position: absolute;
    content: "";
    width: 66vw;
    height: 1px;
    background: #222;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
}

.bg1>.h1_1 {
    width: fit-content;
    color: #18779a;
    text-align: center;
    font-size: 5vw;
    margin: auto;
    position: relative;
    padding-top: 5vw;
    padding-bottom: 3vw;
    line-height: 1.7;
    font-weight: bold;
    font-family: "arail";
}

.bg1>.h1_2 {
    width: fit-content;
    color: #222;
    text-align: center;
    font-size: 4vw;
    margin: auto;
    position: relative;
    padding-top: 0;
    padding-bottom: 29px;
    line-height: normal;
    font-weight: bold;
}

.bg1 img.pro {
    width: 66%;
    margin-top: 15vw;
    margin-bottom: -6vw;
    margin-right: 0;
}

.bg1 .dia {
    position: absolute;
    width: 22vw;
    left: 4%;
    top: 44%;
    margin: 0;
}

.bg2 {
    background: url(/img/goods/ks/bg2_sp.webp)no-repeat;
    background-size: 100% auto;
    text-align: center;
    padding-top: 8vw;
    padding-bottom: 60px;
}

.bg2 img {
    width: 80%;
}

.bg2 .radius_div {
    width: auto;
    margin: auto;
    padding: 0 15px;
}

.bg2 .radius_div .radius:last-child p {
    color: #cb486c
}


.bg2 .radius {
    background: #fff;
    border-radius: 30px;
    width: auto;
    padding: 2vw 0 2vw 21%;
    position: relative;
    margin-top: 7vw;
    margin-left: 7vw;
}

.bg2 .radius img {
    margin: 0 0 0 -24px;
    width: 26vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -3vw;
}

.bg2 .radius p {
    font-size: 6vw;
    font-weight: bold;
    color: #18779A;
    text-align: left;
}

.bg2 .radius b {
    font-size: 4.4vw;
    text-align: left;
    line-height: 1.4;
    padding-top: 4px;
    display: block;
}

.bg3 {
    background: #fdf1f5;
    background-size: 100% auto;
    text-align: center;
    padding-top: 8vw;
    padding-bottom: 6vw;
}

.bg3>.h1 {
    width: fit-content;
    color: #222;
    font-weight: bold;
    text-align: center;
    font-size: 6.5vw;
    margin: auto;
    position: relative;
    font-family: "arail";
}

.bg3>.h1:before {
    position: absolute;
    content: "";
    width: 80vw;
    height: 1px;
    background: #222;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
}

.bg3>.h1_1 {
    width: fit-content;
    color: #c83962;
    text-align: center;
    font-size: 5vw;
    margin: auto;
    position: relative;
    padding-top: 31px;
    padding-bottom: 29px;
    line-height: 1.7;
    font-weight: bold;
    font-family: "arail";
}

.bg3 .box3_div {
    width: auto;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 4vw;
    flex-direction: column;
    padding: 15px;
}

.bg3 .box3 {
    padding: 4vw 5vw 5vw 4vw;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.bg3 .box3 p {
    display: inline-block;
    background: #c83964;
    color: #fff;
    padding: 0px 10vw;
    border-radius: 10px;
    text-indent: 10px;
    position: relative;
    font-size: 6vw;
    font-weight: bold;
}

.bg3 .box3 p:before {
    position: absolute;
    content: "";
    width: 4vw;
    height: 2vw;
    border-bottom: #fff solid 3px;
    border-left: #fff solid 3px;
    transform: rotate(315deg);
    left: 6vw;
    top: 3vw;
}

.bg3 .box3 img {
    width: 100%
}

.precautions_table td .nutrition_table th,
.precautions_table td .nutrition_table td {
    width: 50%;
    white-space: normal;
}

.tips_list .label .date {
	color: #727272;
}

.btn_modal button {
	border: none;
	color: #0072ef;
	cursor: pointer;
	background: url(../../img/goods/common/icon_question.svg) no-repeat 0 center;
	background-size: 4vw 4vw;
	padding-left: 6vw !important;
	padding-right: 0;
}


.btn_modal button:hover,
.btn_modal button:active {
	color: #00bbff;
	text-decoration: underline;
}

.price_list .price_list_table caption {
	background: #18779A !important;
}

.price_list .price_list_table td.price {
	color: #18779A !important;
}

.price_list .price_list_table td.number,
.price_list .price_list_table td.price {
	color: #18779A !important;
}

/*------------------------------------------------------------
[PC]
------------------------------------------------------------ */
@media print,
screen and (min-width: 768px) {

    .phone_only {
        display: none;
    }

    .screen_only {
        display: block;
    }

    .contents00 {
        background: #fff !important;
    }

    .tips {
        background: #fff !important;
    }

    .tips_list,
    .tips .note {
        background: #daf0f8 !important;
    }

    .tips h2,
    .tips .lead {
        font-family: "arail"
    }

    .tips .lead,
    .tips_list .label h3 span,
    .tips_list .label h3 {
        color: #18779a !important;
    }

    .tips_list .label {
        border-left: 2px #18779a solid !important;
    }

    .precautions_table td .nutrition_table {
        width: auto !important;
    }

    .precautions_table td .nutrition_table th {
        width: 60% !important;
    }

    .precautions_table td .nutrition_table td {
        width: 40% !important
    }

    .precautions_table td .spec_list li.fig02 figure {
        width: 160px !important;
        display: flex;
        align-items: center;
        flex-direction: row;
    }

    .precautions_table td .spec_list li.fig02 figure div {
        text-align: left;
        margin-left: 10px;
    }

    .price_list .price_list_table caption {
        background: #18779A !important;
    }

    .price_list .price_list_table td.number,
    .price_list .price_list_table td.price {
        color: #18779A !important;
    }

    .targets .targets_list em {
        color: #18779a !important;
        letter-spacing: -1px;
    }

    .precautions_table td .spec_list li.fig01 figure {
        width: 63px;
    }

    .purchase .one_time,
    .purchase .regular {
        padding: 5px 6px 2px 14px !important;
        position: relative;
    }

    .purchase .one_time h2,
    .purchase .regular h2 {
        margin: 0;
        position: absolute;
        z-index: 1;
        font-size: 20px;
        top: 14px;
    }

    .purchase .one_time h2 p,
    .purchase .regular h2 p {
        font-size: 12px;
        padding-bottom: 6px;
    }

    .radio_container_div {
        display: flex;
        align-items: flex-end;
        flex-direction: row;
        gap: 0;
        margin-bottom: 7px;
    }

    .radio_container_div .discount {
        width: 23%;
        margin-bottom: 0px;
        left: inherit;
        position: relative;
        top: inherit
    }

    .radio_container_div .discount p {
        color: #ff5500;
        font-weight: bold;
        flex: 1;
    }

    .radio_container_div .discount img {
        width: auto;
        float: right;
    }

    .radio_container_div .discount img:first-child {
        display: block;
        position: relative;
    }

    .radio_container_div .discount img:last-child {
        display: none
    }

    .radio_container {
        flex: 1
    }

    .purchase_contents {
        padding: 5px 3px 2px 0px;
        flex: 1;
        width: auto;
        margin-top: 0;
    }

    .radio_container label {
        padding: 0px 15px 0px 0px;
        flex: 1;
        width: auto;
        margin-top: 0;
    }

    .radio_container label .label_group {
        gap: 5px;
        display: flex;
        align-items: flex-start;
        flex: 1 !important;
        margin: 10px 0 10px 48px;
        flex-direction: column;
    }

    .one_time .radio_container label .label_group {
        gap: 5px;
        display: flex;
        align-items: flex-end;
        flex: 1 !important;
        flex-direction: row;
        margin: 0 0 0 48px;
    }

    .radio_container label img {
        height: 50px;
        width: auto;
        margin: 0 5px;
        position: relative;
        top: inherit;
        right: initial;
        transform: inherit;
        left: inherit;
        bottom: inherit;
    }

    .purchase .supply {
        flex: 1;
        font-size: 20px;
        text-align: left;
        display: flex !important;
        align-items: center;
        flex-direction: row;
    }

    .purchase .notice {
        flex: 1;
        font-size: 20px;
        text-align: left;
        display: flex !important;
        flex-direction: row;
        align-items: center;
    }

    .purchase .supply .notice_red,
    .purchase .notice .notice_red {
        display: block;
        font-size: 20px;
        margin-bottom: 0;
        padding-right: 20px;
    }

    .purchase .supply .notice_red:before,
    .purchase .notice .notice_red:before {
        position: absolute;
        content: "-";
        right: 6px;
        font-size: 20px;
        top: inherit;
    }

    .purchase .notice_second,
    .purchase .notice_second {
        color: #222;
        display: block;
        font-size: 14px;
        margin-top: 0;
        font-weight: bold;
        letter-spacing: normal;
    }

    .purchase .supply .detail,
    .purchase .notice .detail {
        margin-left: 5px;
        font-size: 15px;
        font-weight: normal;
        display: inline;
        margin-top: 0;
        letter-spacing: normal;
    }

    .purchase .price {
        margin: 0;
        font-size: 14px;
        width: 100%;
        flex: 1;
    }

    .purchase .price .number {
        font-size: 25px;
        letter-spacing: -0.5px;
        padding: 0;
    }

    .radio_container label {
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .radio_container label:nth-child(2) {
        margin: 0;
    }

    .one_time .radio_container label {
        padding: 6px 10px 6px 0;
    }

    .radio_container {
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
    }

    .regular .radio_container {
        height: 94px;
    }

    .red_1 {
        color: #eb0044;
        margin-bottom: 5px;
        font-size: 22px;
        font-weight: bold;
        line-height: 1.5;
        letter-spacing: -0.05em;
    }

    .purchase .btn_modal {
        font-size: 14px;
        line-height: 1.4;
        position: inherit;
        top: inherit;
        right: inherit;
        z-index: 1;
    }

    .radio_container input:checked+label::before {
        top: 50%;
        transform: translateY(-50%);
        left: 12px;
    }

    .radio_container label::before {
        top: 50%;
        transform: translateY(-50%);
        left: 12px;
    }

    .regular_extra::after {
        bottom: -32px;
        left: -14px;
    }

    .purchase .link {
        position: relative;
        top: 0;
        right: 0;
        font-size: 14px;
        line-height: 25px;
        z-index: 999;
    }

    .mb17 {
        margin-bottom: -17px;
    }

    .btn_modal button {
        border: none;
        color: #0072ef;
        cursor: pointer;
        background: url(/img/goods/common/icon_question.svg) no-repeat 0 center;
        background-size: 16px 16px;
        padding-left: 25px !important;
        padding-right: 0;
    }

    .targets {
        background: #daf0f8 !important;
    }

    .targets .targets_list li {
        background: url(../../img/goods/ks/check.webp) no-repeat 34px center, linear-gradient(to right, #ffffff 0%, rgb(255 255 255) 100%) !important;
        background-size: 22px auto, auto !important;
    }

    .suntory_contents .nav_suntory ul li.nav_healthfood button::before {
        background-color: #009ee0;
    }

    .suntory_contents .nav_suntory ul li.nav_healthfood button::after {
        content: '';
        width: 100%;
        height: 5px;
        background: #009ee0;
        border-radius: 2px;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .w1400 {
        width: 1400px;
        margin: auto;
    }

    .q_and_a_contents {
        flex: 1;
    }


    /*main*/
    .ks_1 {
        padding: 0;
        width: 1400px;
        margin: auto;
        position: relative;
    }

    .ks_1>.h1 {
        width: fit-content;
        color: #222;
        font-weight: bold;
        text-align: center;
        font-size: 40px;
        margin: auto;
        position: absolute;
        padding-bottom: 29px;
        left: 50%;
        top: 37px;
        transform: translateX(-50%);
        font-family: "arail";
    }

    .ks_1>img {
        width: 100%
    }

    .bg1 {
        background: url(/img/goods/ks/bg1.webp) no-repeat center top;
        background-size: 100% auto;
        position: relative;
        text-align: center;
        padding-top: 60px;
    }

    .bg1>.h1 {
        width: fit-content;
        color: #222;
        font-weight: bold;
        text-align: center;
        font-size: 40px;
        margin: auto;
        position: relative;
        font-family: "arail";
    }

    .bg1>.h1:before {
        position: absolute;
        content: "";
        width: 418px;
        height: 1px;
        background: #222;
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg1>.h1_1 {
        width: fit-content;
        color: #18779a;
        text-align: center;
        font-size: 27px;
        margin: auto;
        position: relative;
        padding-top: 21px;
        padding-bottom: 29px;
        line-height: 1.7;
        font-weight: bold;
        font-family: "arail";
    }

    .bg1>.h1_2 {
        width: fit-content;
        color: #222;
        text-align: center;
        font-size: 22px;
        margin: auto;
        position: relative;
        padding-top: 0;
        padding-bottom: 29px;
        line-height: 1.7;
        font-weight: bold;
    }

    .bg1 img.pro {
        width: 51%;
        margin-top: 30px;
        margin-bottom: -62px;
        margin-right: -43px;
    }

    .bg1 .dia {
        position: absolute;
        width: 189px;
        left: 13%;
        top: 30%;
        margin: 0;
    }

    .bg2 {
        background: url(/img/goods/ks/bg2.webp)no-repeat;
        background-size: 100% auto;
        text-align: center;
        padding-top: 84px;
        padding-bottom: 60px;
    }

    .bg2 img {
        width: auto;
    }

    .bg2 .radius_div {
        width: 43%;
        margin: auto
    }

    .bg2 .radius_div .radius:last-child p {
        color: #cb486c
    }


    .bg2 .radius {
        background: #fff;
        border-radius: 30px;
        width: auto;
        padding: 20px 0 20px 25%;
        position: relative;
        margin-top: 52px;
        margin-left: 0;
    }

    .bg2 .radius img {
        margin: 0 0 0 -24px;
        width: 165px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -10px;
    }

    .bg2 .radius p {
        font-size: 34px;
        font-weight: bold;
        color: #18779A;
        text-align: left;
    }

    .bg2 .radius b {
        font-size: 26px;
        text-align: left;
        line-height: 1.4;
        padding-top: 4px;
        display: block;
    }

    .bg3 {
        background: #fdf1f5;
        background-size: 100% auto;
        text-align: center;
        padding-top: 84px;
        padding-bottom: 60px;
    }

    .bg3>.h1 {
        width: fit-content;
        color: #222;
        font-weight: bold;
        text-align: center;
        font-size: 40px;
        margin: auto;
        position: relative;
        font-family: "arail";
    }

    .bg3>.h1:before {
        position: absolute;
        content: "";
        width: 440px;
        height: 1px;
        background: #222;
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg3>.h1_1 {
        width: fit-content;
        color: #c83962;
        text-align: center;
        font-size: 27px;
        margin: auto;
        position: relative;
        padding-top: 31px;
        padding-bottom: 29px;
        line-height: 1.7;
        font-weight: bold;
        font-family: "arail";
    }

    .bg3 .box3_div {
        width: 1400px;
        margin: auto;
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-direction: row;
    }

    .bg3 .box3 {
        padding: 16px 30px 30px 30px;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .bg3 .box3 p {
        display: inline-block;
        background: #c83964;
        color: #fff;
        padding: 0px 42px;
        border-radius: 30px;
        text-indent: 10px;
        position: relative;
        font-size: 25px;
        font-weight: bold;
    }

    .bg3 .box3 p:before {
        position: absolute;
        content: "";
        width: 20px;
        height: 11px;
        border-bottom: #fff solid 3px;
        border-left: #fff solid 3px;
        transform: rotate(315deg);
        left: 21px;
        top: 10px;
    }

    .bg3 .box3 img {
        width: 100%
    }
	
	.contents_nav li a {
		box-shadow: 0px 3px 9px rgb(203 184 146) !important;
	}
	

}