.ph-details{
    max-width: 750px; margin: 0 auto; background: #e7e6e7; --accent: #86B3DC;
}
.note-box img {
    max-width: 100%; height: auto; display: block;
}
.note-box ul {
    list-style: none; padding: 4.3% 5.3%;
}
.note-box li + li {
    margin-top: 4%;
}
.note-box li {
    color: #555; padding-left: 1em; text-indent: -1em; font-size: 120%; line-height: 160%;
}
.note-box .highlight {
    color: #e95471;
}
.note-annotation {
    color: #555; font-size: 13px; line-height: 150%; text-align: right; margin: 0;
    padding: 0 5.3% 4.3%;
}
.section-heading {
    text-align: center; max-width: 750px; margin-left: auto; margin-right: auto; background: #EAEEF9;
}
.section-heading__inner {
    padding: 4.3% 5.3%;
}
.section-heading__title {
    color: var(--accent); font-size: 32px; font-weight: 700; letter-spacing: 0.3em; margin-bottom: 2.4%;
}
.section-heading__sub {
    color: #555; font-size: 17px; letter-spacing: 0.2em; display: flex; align-items: center; justify-content: center; gap: 1.6%; margin-top: 1.6%; margin-bottom: 4.3%;
}
.section-heading__sub::before,
.section-heading__sub::after {
    content: ""; display: inline-block; width: 40px; height: 1px; background: #333;
}
.howto-list {
    color: #555; text-align: left; list-style: none; padding: 0; margin: 0; font-size: 120%; line-height: 160%;
}
.howto-list li + li {
    margin-top: 5.3%;
}
.howto-list li {
    padding-left: 1.7rem; text-indent: -1.7rem;
}
.howto-list .has-image {
    padding-left: 0; text-indent: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 3.3%;
}
.howto-list .has-image > span {
    padding-left: 1.7rem; text-indent: -1.7rem;
}
.howto-num {
    color: var(--accent); margin-right: 0.75em; font-weight: 600;
}
.point-box {
    background: #fff; padding: 3.2%; text-align: left; margin-top: 6.4%; margin-bottom: 4.3%;
}
.point-box__heading {
    color: var(--accent); font-size: 24px; letter-spacing: 0.2em; margin-top: 0; margin-bottom: 1.6%;
}
.point-mark {
    color: var(--accent); margin-right: 0.4em;
}
.point-list {
    color: #555; list-style: none; padding: 0; margin: 0; font-size: 18px;
}
.point-list li {
    padding-left: 1.4em; text-indent: -1.4em;
}
.point-list li + li {
    margin-top: 1.6%;
}
.howto-list .has-image img {
    width: 30%; flex-shrink: 0;
}
.check-row {
    display: flex; gap: 0; margin: 5% 6.5% 8%; background: #fff;
}
.check-box {
    background: #fff; padding: 0 3.2%; flex: 8; min-width: 0; align-self: center;
}
.check-row__img {
    flex: 2; width: 100%; height: auto; display: block; min-width: 55px; align-self: center; margin: 12px 0;
}
.check-box__heading {
    color: var(--accent); font-size: 24px; font-weight: 700; text-align: left; margin: 0 0 3.2%; padding-left: 2.7%; white-space: nowrap; overflow: visible; text-overflow: clip; position: relative; z-index: 1;
}
.check-list {
    list-style: none; padding: 0 2.7%; margin: 0;
}
.check-list li {
    color: #555; padding-left: 1.8em; text-indent: -1.8em; font-size: 18px; line-height: 160%;
}
.check-list li + li {
    margin-top: 2.1%;
}
.check-list li::before {
    content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: 0.4em; vertical-align: middle; position: relative; top: -0.15em; background: url("../images/details-sub_check.jpg") no-repeat center / contain;
}
.check-list .highlight-b {
    font-weight: 700; background: linear-gradient(transparent 60%, #F6EEAD 60%);
}
@media screen and (max-width: 750px) {
    .note-box li {
        font-size: 17px;
    }
    .note-box li + li {
        margin-top: 5.3%;
    }
    .section-heading__title {
        font-size: 26px;
    }
    .section-heading__sub {
        font-size: 15px;
    }
    .howto-list {
        font-size: 17px;
    }
    .point-box__heading {
        font-size: 20px;
    }
    .point-list {
        font-size: 16px;
    }
    .check-row {
        margin-left: 3.35%;
        margin-right: 3.35%;
        padding: 20px 10px;
    }
    .check-box {
        padding-left: 0;
        padding-right: 0;
        min-width: 0;
    }
    .check-box__heading {
        font-size: 17px;
        margin-bottom: 15px;
    }
    .check-list li {
        font-size: 14px;
    }
}
@media screen and (max-width: 768px) {
    .ingredients {
        padding-left: 12px;
        padding-right: 12px;
    }
}
@media screen and (max-width: 390px) {
    .check-box__heading {
        font-size: 15px;
    }
}
@media screen and (min-width: 751px) {
    .check-row {
        padding: 2% 3%;
        margin-left: 7%;
        margin-right: 7%;
    }
}