@charset "UTF-8";

:root {
    --ex--color--primary: #fba06f;
    --ex--color--primary-dull: #f8ede2;
    --ex--color--primary-light: #fff6ec;
    --ex--color--secondary: #eb6d94;
    --ex--color--secondary-pale: #fff1f4;
    --ex--color--base: #8a827a;
    --ex--color--base-light: #b3acaa;
    --ex--color--white: #fff;
    --ex--color--accent-1: #fdf5e7;
    --ex--color--accent-2: #fff7a9;
    --ex--color--accent-3: #fff8ca
}

:root {
    --line-height: 1.714
}

:root {
    --ex--spacing-10: 1.333cqw;
    --ex--spacing-20: 2.667cqw;
    --ex--spacing-30: 4cqw;
    --ex--spacing-40: 5.333cqw;
    --ex--spacing-50: 6.667cqw;
    --ex--spacing-60: 8cqw;
    --ex--spacing-70: 9.333cqw;
    --ex--spacing-80: 10.667cqw;
    --ex--spacing-90: 12cqw;
    --ex--spacing-100: 13.333cqw;
    --spacing--use--outside: var(--chg--spacing-xl)
}

:root {
    --leading-trim: calc((1em - 1lh)/2);
    --leading-trim-en: calc((1cap - 1lh)/2)
}

:root {
    --font-weight-medium: 400;
    --font-weight-bold: 700;
    --font-family-default: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", arial, "Hiragino Sans", "BIZ UDPGothic", meiryo, sans-serif;
    --font-family-main: var(--font-family-default);
    --font-family-sub: dnp-shuei-mgothic-std, "Shuei MaruGo", var(--font-family-default)
}

:root {
    --radius: var(--spacing-2xs, 10px);
    --radius-s: calc(var(--radius) / 2);
    --radius-l: calc(var(--radius) * 2);
    --radius-xl: calc(var(--radius) * 3);
    --radius-oval: 100vmax
}

:root {
    --bp--xs: 420;
    --bp--s: 640;
    --bp--m: 750
}

html {
    scroll-behavior: smooth
}

.ex-svg-area {
    position: absolute;
    inset-inline-start: -9999px;
    height: 0;
    overflow: hidden;
    visibility: hidden
}

.ex-outside-30 {
    margin-inline: var(--ex--spacing-30)
}

.ex-outside-40 {
    margin-inline: var(--ex--spacing-40)
}

.ex-outside-50 {
    margin-inline: var(--ex--spacing-50)
}

.ex-heading-1 {
    padding-block: 5.333cqw 6.667cqw;
    margin-block: 16cqw 5.333cqw;
    font-family: var(--font-family-sub);
    font-size: 7.467cqw;
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    color: var(--ex--color--white);
    text-align: center;
    background-color: var(--ex--color--primary);
    clip-path: polygon(100% 0, 100% 75.9036144578%, 50% 100%, 0 75.9036144578%, 0 0)
}

.ex-heading-1.-small {
    font-size: 5.333cqw;
    line-height: 1.5
}

.ex-heading-2 {
    position: relative;
    padding-block: 6.667cqw 6.667cqw;
    margin-block: 10.667cqw var(--ex--heading-2--margin-bottom, 9.333cqw);
    font-family: var(--font-family-sub);
    line-height: 1.4583333333;
    color: var(--ex--color--primary);
    text-align: center;
    background-color: var(--ex--color--primary-light)
}

.ex-heading-2__point {
    font-size: 3.733cqw
}

.ex-heading-2__text {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 6.4cqw !important;
    line-height: inherit !important
}

.ex-heading-2__text>span {
    font-size: .8em;
    color: var(--ex--color--base)
}

.ex-heading-2__text>span:not(.inline-keep) {
    display: block
}

.ex-heading-2__arrow {
    position: absolute;
    inset-block-start: calc(100% - 1px);
    inset-inline-start: 50%;
    width: 21.333cqw;
    height: 5.333cqw;
    fill: var(--ex--color--primary-light);
    translate: -50% 0
}

.ex-heading-2:has(+.ex-b-p2) {
    --ex--heading-2--margin-bottom: 6.667cqw
}

.ex-heading-3 {
    padding-block: 1.6cqw;
    margin-block: 10.667cqw 5.333cqw !important;
    font-size: 5.333cqw !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1.2 !important;
    color: currentcolor !important;
    text-align: center;
    background-color: var(--ex--color--secondary-pale);
    border: 2px solid var(--ex--color--secondary);
    border-radius: var(--radius-oval)
}

.ex-figure {
    --ex--figure--border-width: clamp(3px, .938vw, 6px);
    --font-sub--weight: var(--font-weight-bold);
    overflow: hidden;
    font-size: 5.333cqw;
    border: var(--ex--figure--border-width) solid var(--ex--color--secondary);
    border-radius: 5.333cqw
}

.ex-figure__caption {
    display: grid;
    place-content: center;
    min-height: 3.6em;
    padding-block: 3.2cqw;
    font-family: var(--font-family-sub);
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
    background-color: var(--ex--color--secondary-pale)
}

.ex-figure__container {
    padding-block: 4cqw;
    padding-inline: 8cqw;
    background-color: var(--ex--base--white);
    border-block-start-width: 0
}

.ex-figure__container>img {
    width: 100%
}

.ex-figure .u-note {
    translate: 4cqw 0
}

.ex-figure-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4cqw;
    font-size: 4cqw;
    line-height: 1.3;
    text-align: center
}

.ex-figure-column+img {
    margin-block: 2.667cqw
}

.ex-circles {
    width: 77.867cqw;
    display: block;
    margin-inline: auto
}

.ex-footnote {
    font-size: 2.667cqw !important;
    line-height: 1.5 !important
}

.ex-marker {
    text-decoration-line: underline;
    text-decoration-thickness: var(--ex--marker--thickness, .25em);
    text-decoration-color: var(--ex--marker--color, var(--ex--color--secondary));
    text-decoration-skip-ink: none;
    text-underline-offset: -.05em
}

.ex-plusminus {
    position: relative;
    flex-shrink: 0;
    width: var(--c--plusminus--size, 4cqw);
    aspect-ratio: var(--c--plusminus--ratio, 1);
    margin-inline: auto 0
}

.ex-plusminus:before,
.ex-plusminus:after {
    position: absolute;
    inset: 0;
    width: var(--c--plusminus--width, 1em);
    height: var(--c--plusminus--height, .533cqw);
    margin: auto;
    content: "";
    background-color: var(--c--plusminus--color, currentColor);
    transition: transform .4s
}

.ex-plusminus:before {
    transform: rotate(0)
}

.ex-plusminus:after {
    transform: rotate(90deg)
}

.is-open .ex-plusminus:after {
    transform: rotate(180deg)
}

.product_goods_wrap .cntBox2 {
    zoom: unset;
    -webkit-text-size-adjust: 100%
}

.ex-container {
    width: min(100%, 750px);
    margin-inline: auto;
    font-family: var(--font-family-main);
    font-size: min(4vw, 30px);
    font-weight: var(--font-weight-medium);
    font-feature-settings: "palt";
    letter-spacing: .05em;
    color: var(--ex--color--base);
    line-height: var(--line-height);
    container-type: inline-size;
    overflow: clip
}

.ex-container a {
    color: var(--ex--anchor--color, var(--ex--color--primary));
    text-decoration: none;
    cursor: pointer;
    transition: var(--duration)
}

.ex-container a.under {
    text-decoration: underline
}

.ex-container sup {
    font-size: .5em;
    vertical-align: super
}

.ex-container p {
    font-size: inherit;
    line-height: inherit
}

.ex-fv {
    position: relative;
    aspect-ratio: 75/112;
    margin-block-start: var(--ex--spacing-60);
    background-image: url(/img/items/345_oligo-moist-shampoo/fv.png);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: contain
}

.ex-fv__intro {
    display: flex;
    gap: 1.6cqw;
    align-items: center;
    justify-content: center;
    padding-block-start: 5.333cqw;
    font-size: 4.267cqw !important;
    line-height: 1.4 !important;
    color: var(--ex--color--primary);
    text-align: center;
    letter-spacing: .1em
}

.ex-fv__catch {
    padding-inline-start: 3.733cqw;
    margin-block-start: 3.467cqw;
    font-size: 8.8cqw !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1.35 !important;
    color: var(--ex--color--primary);
    letter-spacing: .075em
}

.ex-fv__title {
    display: flex;
    flex-direction: column;
    gap: 0 .333em;
    align-items: baseline;
    padding-inline-start: 6.667cqw;
    margin-block-start: 50.933cqw;
    font-size: 3.467cqw;
    font-weight: var(--font-weight-medium) !important;
    line-height: 1.4
}

.ex-fv__title>span {
    font-size: 4cqw
}

.ex-fv-list {
    display: flex;
    gap: 2.133cqw;
    align-items: center;
    justify-content: center;
    margin-block-start: 2.133cqw;
    font-size: 4cqw;
    line-height: 1.3333333333
}

.ex-fv-list__item {
    position: relative;
    z-index: 1;
    width: 27.467cqw;
    aspect-ratio: 206/207
}

.ex-fv-list__item:before {
    position: absolute;
    z-index: -1;
    width: 30.667cqw;
    aspect-ratio: 230/234;
    content: "";
    background-image: url(/img/items/345_oligo-moist-shampoo/fv_circle.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain
}

.ex-fv-list__text {
    display: grid;
    place-items: center;
    height: 104%;
    text-align: center
}

.ex-nav {
    --ex--anchor--color: var(--ex--color--base);
    --ex--nav--padding: 4cqw;
    --ex--nav--border-width: clamp(1px, .469vw, 3px);
    font-size: 5.333cqw;
    line-height: 1.4;
    width: 75.733cqw;
    border: var(--ex--nav--border-width) solid var(--ex--color--primary);
    border-radius: .333cm;
    padding: var(--ex--nav--padding);
    margin-inline: auto;
    margin-block-start: 10.667cqw;
    margin-block-end: 13.333cqw;
    position: relative
}

.ex-nav__label {
    line-height: 1;
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 50%;
    translate: -50% 50%;
    background-color: var(--ex--color--white);
    padding-inline: .5em
}

.ex-nav__list {
    background-color: var(--ex--color--white);
    margin-inline: calc((var(--ex--nav--padding) + var(--ex--nav--border-width)) * -1);
    padding-inline: var(--ex--nav--padding)
}

.ex-nav__item {
    letter-spacing: 0
}

.ex-nav__item:not(:last-child) {
    border-block-end: var(--ex--nav--border-width) dotted var(--ex--color--primary)
}

.ex-nav__anchor {
    padding-block: var(--ex--nav--padding);
    padding-inline: 3.2cqw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em
}

.ex-nav__arrow {
    width: 4cqw;
    height: 2.667cqw;
    fill: var(--ex--color--primary)
}

.ex-point {
    counter-reset: headingPointer
}

.ex-point__number {
    border-radius: var(--radius-oval);
    background-color: var(--ex--color--primary);
    color: var(--ex--color--white);
    font-size: 3.733cqw;
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 50%;
    translate: -50% 50%;
    display: flex;
    align-items: center;
    height: 5.333cqw;
    gap: .333em;
    margin-inline: auto;
    padding-inline: 5.333cqw
}

.ex-point__number:before {
    content: "POINT"
}

.ex-point__number:after {
    content: counter(headingPointer);
    counter-increment: headingPointer
}

.ex-a-list {
    font-size: 3.467cqw
}

.ex-a-list>li {
    display: flex;
    gap: .333em;
    align-items: flex-start
}

.ex-a-list>li:nth-child(1) {
    --a-list-color: #fce3cd
}

.ex-a-list>li:nth-child(2) {
    --a-list-color: #e2eec4
}

.ex-a-list>li:nth-child(3) {
    --a-list-color: #c7e8fa
}

.ex-a-list>li:nth-child(4) {
    --a-list-color: #ddd0e7
}

.ex-a-list>li:before {
    flex-shrink: 0;
    width: 1.8076923077em;
    aspect-ratio: 1;
    content: "";
    background-color: var(--a-list-color, currentColor);
    border-radius: 50%;
    translate: 0 -.05em
}

.ex-a-list>li+li {
    margin-block-start: 1em
}

.ex-qa {
    --ex--qa--padding-inline: 6.667cqw
}

.ex-qa__container {
    overflow: hidden
}

.ex-qa__container+.ex-qa__container {
    margin-top: var(--ex--spacing-60)
}

.ex-qa__title {
    display: flex;
    gap: 2.667cqw;
    align-items: center;
    padding-block-end: 5.333cqw;
    font-size: 4cqw;
    line-height: 1.4666666667;
    cursor: pointer;
    border-block-end: 2px dashed var(--ex--color--primary);
    transition: margin .4s ease-in-out
}

.ex-qa__title:before {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 8cqw;
    aspect-ratio: 1;
    font-size: 4.8cqw;
    color: var(--ex--color--white);
    content: "Q";
    background-color: var(--ex--color--primary);
    border-radius: 50%
}

.ex-qa__wrapper {
    height: 0;
    overflow: hidden;
    font-size: 3.733cqw;
    transition: height .4s ease-in-out
}

.ex-qa__content {
    padding-block: 4cqw;
    padding-inline: var(--ex--qa--padding-inline);
    background-color: var(--ex--color--primary-light)
}

.ex-qa-anchor {
    --ex--anchor--color: var(--ex--color--base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5em 1em;
    margin-block-start: var(--ex--spacing-40);
    font-size: 2.667cqw;
    border: 1px solid
}

.ex-qa-anchor:after {
    content: "＞"
}

.ex-qa-anchor__label {
    flex: 1;
    text-align: center
}

.is-open.ex-qa__title {
    margin-block-end: var(--ex--spacing-40)
}

.ex-banner {
    display: grid;
    gap: 2.667cqw
}

.ex-banner__text {
    font-size: 4.8cqw !important;
    line-height: 1.3888888889 !important;
    text-align: center;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-sub)
}

.ex-step {
    counter-reset: exStep
}

.ex-step__item {
    display: flex;
    gap: 3.2cqw;
    align-items: center;
    justify-content: space-between
}

.ex-step__item+.ex-step__item {
    margin-block-start: var(--ex--spacing-40)
}

.ex-step__number {
    display: flex;
    gap: .333em;
    font-size: 5.333cqw;
    color: var(--ex--color--primary)
}

.ex-step__number:after {
    content: counter(exStep, decimal-leading-zero);
    counter-increment: exStep
}

.ex-step__image {
    width: min(300px, 40cqw)
}

.p-grass {
    --font-sub--weight: var(--font-weight-bold);
    padding-inline: 1.333cqw;
    text-align: center
}

.p-grass>img {
    margin-block-end: 4cqw
}

.p-grass-cntainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.667cqw
}

.p-grass-label {
    font-size: 4cqw !important;
    line-height: 1.375 !important
}

.p-bubble {
    --font-sub--weight: var(--font-weight-bold);
    position: relative
}

.p-bubble-container {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8%;
    align-items: center;
    width: 92%;
    margin: auto;
    translate: -1% -1%
}

.p-bubble-label {
    font-size: 4.267cqw !important;
    line-height: 1.40625 !important;
    color: var(--ex--color--primary);
    text-align: center
}

.p-barrier {
    --font-sub--weight: var(--font-weight-bold);
    position: relative
}

.p-barrier>p {
    position: absolute;
    line-height: 1.5;
    text-align: center
}

.p-barrier-01 {
    inset-block-start: 11.5%;
    inset-inline-end: 52%;
    font-size: 6.667cqw !important;
    color: var(--ex--color--primary)
}

.p-barrier-02 {
    inset-block-start: 14%;
    inset-inline-end: 12%;
    font-size: 5.333cqw !important
}

.p-hari-koshi {
    --font-sub--weight: var(--font-weight-bold);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.667cqw;
    text-align: center
}

.p-hari-koshi+img {
    margin-block: 2.667cqw
}

.p-hari-koshi-label {
    font-size: 4cqw !important;
    line-height: 1.375 !important
}

.-large .p-hari-koshi-label {
    font-size: 5.333cqw !important;
    line-height: 1.5 !important
}

.p-info-box {
    --font-sub--weight: var(--font-weight-bold);
    overflow: hidden;
    text-align: center;
    border: 1px solid var(--ex--color--primary);
    border-radius: 6.667cqw
}

.p-info-box-caption {
    padding-block: 4cqw;
    font-size: 5.333cqw;
    line-height: 1.475
}

.p-info-box-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4cqw;
    padding: 5.333cqw;
    background-color: var(--ex--color--primary-light)
}

.p-info-box-list>li {
    width: calc((100% - 2.4cqw)/2);
    padding: .75em 0;
    font-size: 3.733cqw;
    line-height: 1.125;
    color: var(--ex--color--primary);
    letter-spacing: 0;
    white-space: nowrap;
    background-color: var(--ex--color--white);
    border: 1px solid
}

.p-info-box-list>li:last-child {
    width: 100%
}

.p-info-box-list>li.c {
    display: grid;
    place-items: center
}

.p-info-box-list>li small {
    font-size: .75em
}

.p-info-box-list>li sup {
    font-size: .65em
}

.u-note {
    margin-block-start: 1em;
    font-size: 2.667cqw !important;
    text-align: end
}

.ex-u-center {
    text-align: center
}

.ex-u-base {
    color: var(--ex--color--base)
}

.ex-u-primary {
    color: var(--ex--color--primary)
}

.ex-u-secondary {
    color: var(--ex--color--secondary)
}

.ex-font-sub {
    font-family: var(--font-family-sub);
    font-weight: var(--font-sub--weight, var(--font-weight-medium))
}

.ex-fs-small {
    font-size: .9em
}

.ex-u-fs-20 {
    font-size: 2.667cqw !important
}

.ex-u-fs-28 {
    font-size: 3.733cqw !important
}

.ex-u-fs-36 {
    font-size: 4.8cqw !important
}

.ex-u-medium {
    font-weight: var(--font-weight-medium)
}

.ex-u-bold {
    font-weight: var(--font-weight-bold)
}

.ex-u-mt-10 {
    margin-top: var(--ex--spacing-10)
}

.ex-u-mt-20 {
    margin-top: var(--ex--spacing-20)
}

.ex-u-mt-30 {
    margin-top: var(--ex--spacing-30)
}

.ex-u-mt-40 {
    margin-top: var(--ex--spacing-40)
}

.ex-u-mt-50 {
    margin-top: var(--ex--spacing-50)
}

.ex-u-mt-60 {
    margin-top: var(--ex--spacing-60)
}

.ex-u-mt-70 {
    margin-top: var(--ex--spacing-70)
}

.ex-u-mt-80 {
    margin-top: var(--ex--spacing-80)
}

.ex-u-mt-90 {
    margin-top: var(--ex--spacing-90)
}

.ex-u-mt-100 {
    margin-top: var(--ex--spacing-100)
}

.ex-u-visually-hidden {
    position: fixed !important;
    inset: 0 !important;
    visibility: initial !important;
    inline-size: 4px !important;
    block-size: 4px !important;
    padding: unset !important;
    margin: unset !important;
    contain: strict !important;
    pointer-events: none !important;
    border: none !important;
    opacity: 0 !important
}