/*====================================================
//// id common
====================================================*/
.cmn_head_design {
    background-color: var(--color_1);
    border-radius: 2em;
    color: #fff;
    font-weight: 900;
    padding: .4em;
    text-align: center;
}
.markerline {
	background: linear-gradient(transparent 70%, var(--color_5) 70%, var(--color_5) 100%);
    padding: 0 0 .2em;
}

.balloon_item-wrapper {
    display: grid;
        grid-gap: min(3vw, 34px);
    margin-top: min(4vw, 50px);
}

.balloon_item-text {
    border-radius: 15px;
    line-height: 1.4;
    padding: 1em 1.2em;
    position: relative;
}
.balloon-eggplant .balloon_item-text {
    background-color: #E6E6E6;
}
.balloon-onion .balloon_item-text {
    background-color: #F6F09E;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
    .cmn_head_design {
        font-size: min(5.5vw, 3rem);
    }

    .balloon_item-wrapper {
        grid-gap: min(20vw, 100px);
    }
    .balloon_item {
        position: relative;
    }
    .balloon_item-img {
        position: absolute;
        z-index: 10;
    }
    .balloon_item-coverImg {
        padding-top: 0;
        height: 100%;
    }
    .balloon_item-text::before {
        content: '';
        display: block;
        margin: auto;
        position: absolute;
        width: 12px;
        height: 14px;
    }

    .balloon-onion .balloon_item-img {
        bottom: calc(100% - 10px);
        right: 10%;
        width: 25%;
        height: min(20vw, 100px);
    }
    .balloon-onion .balloon_item-text::before {
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 19" preserveAspectRatio="none"><path fill="%23F6F09E" d="M6.15,17.15L16,0H0v16.03c.02,1.02.5,2.01,1.36,2.51.53.31,1.13.46,1.73.46,1.19,0,2.39-.62,3.07-1.85Z" /></svg>') no-repeat top center;
        bottom: calc(100% - 1px);
        right: 40%;
        left: auto;
        transform: rotate(180deg);
    }

    .balloon-eggplant .balloon_item-img {
        top: calc(100% - 10px);
        left: 10%;
        width: 25%;
        height: min(20vw, 100px);
    }
    .balloon-eggplant .balloon_item-text::before {
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 19" preserveAspectRatio="none"><path fill="%23e6e6e6" d="M6.15,17.15L16,0H0v16.03c.02,1.02.5,2.01,1.36,2.51.53.31,1.13.46,1.73.46,1.19,0,2.39-.62,3.07-1.85Z" /></svg>') no-repeat top center;
        top: calc(100% - 1px);
        left: 40%;
        right: auto;
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    .cmn_head_design {
        font-size: min(4.5vw, 4rem);
    }

    .balloon_item-wrapper:has(.blank) {
        grid-gap: 0;
    }
    .balloon_item {
        display: flex;
            align-items: center;
        gap: 20px;
    }
    .balloon_item-img {
        position: relative;
        width: 25%;
    }
    .balloon_item-text {
        font-size: min(2.5vw, 2.5rem);
        flex: 1;
    }
    .balloon_item-text::before {
        content: '';
        display: block;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 16px;
        height: 24px;
    }

    .balloon-eggplant .balloon_item-text::before {
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 24" preserveAspectRatio="none"><path fill="%23e6e6e6" d="M2.5,16.29l13.5,7.71V0L2.5,7.71c-1.67.95-2.5,2.62-2.5,4.29s.83,3.33,2.5,4.29Z" /></svg>') no-repeat center;
        right: calc(100% - 1px);
    }

    .balloon-onion {
        flex-direction: row-reverse;
    }
    .balloon-onion .balloon_item-text::before {
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 24" preserveAspectRatio="none"><path fill="%23F6F09E" d="M2.5,16.29l13.5,7.71V0L2.5,7.71c-1.67.95-2.5,2.62-2.5,4.29s.83,3.33,2.5,4.29Z" /></svg>') no-repeat center;
        left: calc(100% - 1px);
        transform: scale(-1, 1);
    }
}

@media screen and (min-width:1040px) {
}

@media (hover: hover) {}

/*====================================================
//// id detail
====================================================*/
.detail-inner {
    padding-bottom: 0;
}
.detail-rule-wrapper {
    display: grid;
        grid-gap: min(4vw, 50px);
    margin: min(5vw, 48px) auto 0;
    width: min(100%, 788px);
}
.detail-rule dt {
    background-color: var(--color_3);
    color: var(--color_6);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
.detail-rule dd {
    line-height: 1.4;
}
.detail-rule dd .markerline {
    display: inline-block;
    margin: .1em 0 .2em;
}
.detail-rule dd strong {
    color: var(--color_1);
    font-size: 1.16em;
    line-height: 1;
}
.detail-rule dd strong.big {
    font-size: 1.5em;
}
.detail-rule .add_text {
    font-size: .6em;
}
.detail-rule .markList {
    margin-top: 1em;
}
.detail-rule .markList li {
    line-height: 1.2;
    margin: 0;
}
.detail-rule .markList li + li {
    margin-top: .2em;
}

.detail-sub_head {
    color: var(--color_1);
    font-weight: 900;
    margin: min(10vw, 90px) 0 min(4vw, 20px);
    text-align: center;
}

.detail-img {
    margin: 10px;
}

.detail-rule-2 {
    margin-top: min(10vw, 95px);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
    .detail-rule {
        border: solid 2px var(--color_3);
    }
    .detail-rule dt {
        font-size: min(4.6vw, 2rem);
        padding: .4em;
    }
    .detail-rule dd {
        display: flex;
            justify-content: center;
        padding: 1em .6em;
    }
    .detail-rule dd strong.big {
        font-size: 1.3em;
    }
    .detail-sub_head {
        font-size: min(6vw, 3rem);
    }
    .detail-balloon-1 .balloon_item-text {
        display: grid;
            grid-gap: min(2vw, 20px);
            place-items: center;
    }
    .detail-balloon-1 .balloon_item-text .img {
        width: min(40%, 180px);
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    .detail-rule {
        display: grid;
            align-items: center;
            grid-gap: 22px;
            grid-template-columns: auto 1fr;
    }
    .detail-rule dt {
        border-radius: 100%;
        display: flex;
            align-items: center;
            justify-content: center;
        font-size: min(2.5vw, 2.5rem);
        line-height: 1.2;
        width: 6em;
        height: 6em;
    }
    .detail-rule dd {
        font-size: min(3.5vw, 3rem);
    }

    .detail-sub_head {
        font-size: min(4.5vw, 4rem);
    }

    .detail-balloon-1 .balloon_item-text {
        display: grid;
            align-items: center;
            grid-gap: min(2vw, 24px);
            grid-template-columns: 1fr min(30vw, 180px);
    }

}

@media screen and (min-width:1040px) {
}

@media (hover: hover) {}

/*====================================================
//// id health
====================================================*/
.health-inner {
    padding-bottom: 0;
}
.health-img.img-1 {
    margin-top: min(10vw, 70px);
}
.health-img.img-2 {
    margin-top: min(16vw, 120px);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    .health-content {
        padding-bottom: min(15vw, 150px);
    }
}

@media screen and (min-width:1040px) {
}

@media (hover: hover) {}

/*====================================================
//// id message
====================================================*/
.message-text {
    color: var(--color_4);
    font-weight: 900;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
    .message-wrapper {
        display: grid;
            grid-gap: min(3vw, 20px);
            place-items: center;
    }
    .message-text {
        font-size: min(5.5vw, 4rem);
        text-align: center;
    }
    .message-img {
        width: min(35%, 200px);
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    .message-inner {
        padding-bottom: min(14vw, 120px);
    }
    .message-wrapper {
        display: flex;
            flex-direction: row-reverse;
    }
    .message-text {
        font-size: min(4.5vw, 5rem);
    }
    .message-img {
        position: relative;
        /* transform: translate(-24px, calc(min(13vw, 150px) * -1)); */
        width: 27%;
    }
    .message-img-inner {
        position: absolute;
            left: -24px;
            bottom: 0;
        width: 100%;
    }
}

@media screen and (min-width:1040px) {
}

@media (hover: hover) {}