@charset "UTF-8";
*,*::before,*::after {
    margin:0px;
    padding:0px;
    box-sizing:border-box;
}
:root {
    --color-base-font:#625140;
    --color-main:#ed7e82;

    --font-noto:"Noto Sans JP", sans-serif;
    --font-zen:"Zen Maru Gothic", sans-serif;
    --font-haviland:"Mr De Haviland", cursive;
}
body {
    font-size:clamp(0.875rem, calc(0.77rem + 0.449vw), 1rem);/* vp:375-820px 14-16px */
    font-weight:500;
    font-family:var(--font-noto);
    font-feature-settings:"palt";
    letter-spacing:0.05em;
    color:var(--color-base-font);
    line-height:1.8;
}
img {
    display:block;
    max-width:100%;
    height:auto;
    vertical-align:middle;
}
p {
    font-size:0.9375em;
}
main { overflow:hidden;}
section { position:relative;}
.inner { width:min(980px, 95%); margin-inline:auto;}
.hanging { text-indent:1em hanging;}

.abs { position:absolute;}
*::before,
*::after,
.peNone { pointer-events:none;}
br.sp { display:none;}

details {
    font-weight:500;
    border-block:solid 1px;
    padding-block:1em;
    padding-inline:60px 0;

    &[open] { padding-block:1em 2em;}
    & summary { font-size:13px; position:relative;}
    & summary + * { font-size:11px; margin-top:1em;}

    & summary::before,
    & summary::after {
        content:"";
        position:absolute;
        translate:0 -50%;
        display:block;
        width:1em;
        height:2px;
        background-color:currentColor;
        inset:50% calc(100% + 1em) auto auto;
    }
    & summary::after { rotate:0.25turn;}
    &[open] summary::after { rotate:0.5turn;}

    & dl + dl { margin-top:1lh;}
    & dt { margin-block:1em;}
    & p { font-size:1em;}
}
@media (max-width:768px){
    .inner { width:85%;}
    br.sp { display:block;}
    section { overflow:clip visible;}
}


/* ==================================================
    header
================================================== */
header .logo {
    position:absolute;
    inset:3rem auto auto 3rem;
}
@media (max-width:768px){
    header .logo {
        inset:1rem auto auto 1rem;
    }
}


/* ==================================================
    footer
================================================== */
footer {

    & .address {
        margin-block:108px 100px;

        & img { margin-inline:auto;}
        & img:nth-of-type(1) { width:173px;}
        & img:nth-of-type(2) { width:167px; margin-top:26px;}
        & img:nth-of-type(3) { width:289px; margin-top:9px;}
        & img:nth-of-type(4) { width:384px; margin-top:20px;}
    }
    & .copy {
        font-size:12px;
        font-weight:500;
        font-family:var(--font-zen);
        color:#fff;
        text-align:center;
        display:block;
        padding-block:0.75em;
        background-color:var(--color-main);
    }
}
@media (max-width:768px){
    footer {

        & .address {
            margin-block:17.5342vw;

            & img:nth-of-type(1) { width:32.8767vw;}
            & img:nth-of-type(2) { width:29.5890vw; margin-top:4.9315vw;}
            & img:nth-of-type(3) { width:52.6027vw; margin-top:1.9178vw;}
            & img:nth-of-type(4) { width:70.1369vw; margin-top:3.8356vw;}
        }
        
    }
}


/* ==================================================
    fixed
================================================== */
.fixed {
    --space:1.5rem;
    position:fixed;
    inset:auto auto 0 0;
    width:100%;
    padding-block:var(--space);
    background-color:rgb(0 0 0 / 0.7);
    opacity:0;
    visibility:hidden;
    transition:opacity 0.5s ease, visibility 0.5s allow-discrete;
    z-index:9999;

    &.active { opacity:1; visibility:visible;}
    & ul {
        display:flex;
        justify-content:center;
        gap:var(--space);
        margin-inline:auto;
    }
    & li { display:contents;}
    & a {
        font-size:clamp(0.875rem, calc(0.279rem + 2.545vw), 1.5rem);/* vp:375-768px 14-24px */
        display:grid;
        place-items:center;
        width:min(400px, 100%);
        padding:0.5em 1em;
        color:#fff;
        background-color:var(--c);
        border-radius:0.5em;
    }
    & li:nth-of-type(1) a { --c:var(--color-main);}
    & li:nth-of-type(2) a { --c:#3BAFA6;}
    & small { font-size:0.75em; font-weight:400; line-height:1.2;}
    
    /* hover */
    & a:is(:active, :focus-visible) { opacity:0.75;}
    @media(hover:hover) { & a:hover { opacity:0.75;}}
}
@media(max-width:768px){
.fixed {
    --space:1rem;

    & .inner { width:90%;}
    & ul {
        display:grid;
        grid-template-rows:1fr 1fr;
        justify-content:unset;
    }
}
}


/* ==================================================
    fv
================================================== */
.fv {
    & .bg {
        position:absolute;
        inset:0 auto auto;
        z-index:-1;
    }
    & .inner {
        --pb:230px;
        display:flex;
        flex-direction:column;
        position:relative;
        padding-bottom:var(--pb);

        &::after {
            content:"";
            position:absolute;
            inset:calc(100% - var(--pb) / 2) auto auto 50%;
            translate:-50% -50%; 
            display:block;
            width:3rem;
            aspect-ratio:50/27;
            background-color:var(--color-main);
            clip-path:polygon(0% 0%, 100% 0%, 50% 100%);
        }
    }
    & .img1 {
        width:77.5vw;
        margin-inline:auto;
        padding-top:9.375vw;
    }
    & .img2 {
        width:min(872px, 88.9795%);
        margin:-245px auto 0;
    }
    & p {
        font-size:22px;
        font-weight:400;
        text-align:center;
        line-height:2;
        margin-top:1.5em;
    }
    & .b1 {
        inset:auto 95.4081% 15px auto;
    }
}
@media (max-width:768px){
    .fv {

        & .inner { --pb:45.2054vw;}
        & .img2 { order:1; margin-top:73px;}
        & .img3 { order:3; margin-top:50px;}
        & p { order:2; font-size:18px; font-weight:500; margin-top:50px;}
    }
}


/* ==================================================
    rec
================================================== */
.rec {
    --lh:60px;/* 1行の高さ */
    padding-bottom:17rem;
    background-image:linear-gradient(
        to bottom,
        transparent 0%,
        transparent 5rem,
        var(--color-main) 35rem,
        var(--color-main) 100%
    );
    isolation:isolate;

    & .inner {
        --bg-color:#f8efe3;
        --border-color:#e1b98b;
        --outside-borderWidth:1rem;
        --line-color:color-mix(in sRGB, var(--bg-color) 80%, var(--border-color) 20%);
        --radius:4.375rem;
        
        position:relative;
        background:var(--bg-color) repeating-linear-gradient(
            -45deg,
            var(--line-color) 0px,
            var(--line-color) 2px,
            transparent 2px,
            transparent 16px
        );
        border-radius:var(--radius);
        padding:calc(var(--lh) * 2) 2em calc(var(--lh) * 2);
        box-shadow:
            0px 0px 1rem color-mix(in sRGB,#000 40%,#fff 60%),
            0 0 0 var(--outside-borderWidth) var(--bg-color) inset,
            0 0 0 calc(var(--outside-borderWidth) + 2px) var(--border-color) inset;
    }
    & .midashi {
        margin-inline:auto;
        width:auto;
        height:var(--lh);
    }
    & :nth-child(1 of .midashi) { margin-bottom:var(--lh);}
    & :nth-child(2 of .midashi) { margin-block:var(--lh);}

    /* flex */
    & .flex {
        display:flex;
        align-items:center;
        justify-content:center;
        gap:3rem;

        & .imgs { position:relative; width:300px;}
        & + .flex { margin-top:3rem;}
    }
    & :nth-child(even of .flex) {
        flex-direction:row-reverse;
    }
    & .flex img {
        width:auto;
        object-fit:contain;
    }

    /* flex：個別 */
    & :nth-child(1 of .flex) {
        & .abs {
            width:12rem;
            aspect-ratio:192/81;
            inset:auto auto -4em -4em;
        }
        & > picture img { height:calc(var(--lh) * 2);}
    }
    & :nth-child(2 of .flex) {
        & .abs {
            width:222px;
            aspect-ratio:222/81;
            inset:auto -6rem 2rem auto; 
        }
        & > picture img { height:calc(var(--lh) * 3);}
        & .imgs { position:relative;}
        & .imgs::before {
            content:"";
            position:absolute;
            inset:-15.1462% -23.1455% auto auto;
            display:block;
            width:50%;
            height:auto;
            aspect-ratio:150/148;
            background:url(../../img/rec/bubble2.png) no-repeat center / contain;
        }
        
    }
    & :nth-child(3 of .flex) {
        & .abs {
            width:205px;
            aspect-ratio:205/85;
            inset:auto auto 0.75rem -6.25rem;
        }
        & > picture img { height:calc(var(--lh) * 3);}
        
    }
    & :nth-child(4 of .flex) {
        & .abs {
            width:286px;
            aspect-ratio:286/97;
            inset:auto -5rem -1.5rem auto;
        }
        & > picture img { height:calc(var(--lh) * 3);}
        
    }

    /* abs要素 */
    & .before {
        inset:calc(min(81px, 7.8vw) * -1) auto auto calc(50% - 55.315px);
        width:min(744px, 75.9183%);
        aspect-ratio:744/385;
    }
    & .after {
        inset:auto calc(50% - 9.4897%) calc(min(133px, 12.7vw) * -1) auto;
        width:min(1037px, 105.8163%);
        aspect-ratio:1038/556;
    }

    & .b1 {
        width:87px;
        aspect-ratio:87/85;
        inset:15.9232% auto auto calc(100% + 37px);
    }
    & .b3 {
        width:112px;
        aspect-ratio:111/123;
        inset:41.6493% calc(100% - 43px) auto auto;
        z-index:-1;}
    & .b4 {
        width:227px;
        aspect-ratio:1;
        inset:55.7053% auto auto calc(100% - 114px);
    }
    & .b5 {
        width:112px;
        aspect-ratio:111/123;
        inset:100% calc(100% - 27px) auto auto;
    }
}
@media (max-width:768px){
    .rec {
        --lh:8.1095vw;
        padding-bottom:17.8082vw;

        & .inner {
            --radius:1.5rem;
            --outside-borderWidth:0.5rem;

            padding-inline:9vw;
        }
        & .flex {
            gap:4.6153%;

            & + .flex { margin-top:70px;}
            & .imgs { width:37.2602vw}
        }
        & :nth-child(1 of .flex) {
            & .abs { width:63.1593%; inset:94.3183% 51.22485% auto auto;}
            & > picture img { height:calc(var(--lh) * 3);}
        }
        & :nth-child(2 of .flex) {
            & .abs { width:72.8590%; inset:72.4657% auto auto 43.0895%;}
            & > picture img { height:calc(var(--lh) * 4);}
        }
        & :nth-child(3 of .flex) {
            & .abs { width:67.5342%; inset:89.0338% 43.0895% auto auto;}
            & > picture img { height:calc(var(--lh) * 4);}
        }
        & :nth-child(4 of .flex) {
            & .abs { width:94.0044%; inset:78.2808% auto auto 17.9973%;}
            & > picture img { height:calc(var(--lh) * 3);}
        }

        & .before { inset:-7vw auto auto calc(50% - 30px);}
        & .after { bottom:-11vw;}
        & .b3 { width:9.9683vw; inset:57.8741% 94.504% auto auto;}
        & .b4 { width:14.0098vw; inset:76.2856% auto auto 90.3796%;}
        & .b5 { width:7.8127vw; inset:101% 90.2261% auto auto;}
    }
}


/* ==================================================
    ing
================================================== */
.ing {
    padding-block:20vw 150px;
    
    &::before {
        content:"";
        position:absolute;
        inset:-1px auto auto 0;
        display:block;
        width:100%;
        aspect-ratio:1280/84;
        background-color:var(--color-main);
        mask:url(../../img/ing/wave.svg) no-repeat center top / contain;
    }
    & .inner {
        --radius:4.375rem;

        padding:100px 72px 42px;
        background-color:rgb(255 255 255 / 0.7);
        border-radius:var(--radius);
        filter:drop-shadow(0px 0px 1em color-mix(in sRGB, #fff 75%, #000 25%));
    }
    & .inner + .inner {
        margin-top:5em;
    }
    & .bg {
        inset:0 auto auto 0;
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center top;
        z-index:-1;
    }
    & .wave {
        inset:0 auto auto 0;
        width:100%;
        height:auto;
    }
    & hgroup {
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:1em;
    }
    & .labels {
        font-size:0.9375em;
        display:grid;
        grid-template-columns:repeat(2, 7.6em);
        gap:0.5em;
        margin-top:1em;

        & span {
            color:var(--color-main);
            padding-inline:0.5em;
            border:solid 1px currentColor;
            border-radius:0.25em;
            background-color:#fff;
            text-align:center;
        }
        & small { font-size:0.8em;}
    }
    & .flex {
        display:flex;
        align-items:center;
        gap:1em;
    }
    & .caution {
        font-size:0.625em;
        margin-top:3.6em;
        text-align:end;
    }

    & .b1 { inset:-143px auto auto 83.9795%; width:280px; aspect-ratio:280/242;}
    & .b2 { inset:302px 95.6122% auto auto; width:115px; aspect-ratio:115/113;}
    & .b3 { inset:803px auto auto 93.9795%; width:150px; aspect-ratio:150/148;}
    & .b4 { inset:1189px 93.9795% auto auto; width:183px; aspect-ratio:183/181;}
    & .b5 { inset:-38px auto auto 95.4081%; width:169px; aspect-ratio:169/187;}
    & .b6 { inset:38px 95.8163% auto auto; width:156px; aspect-ratio:156/159;}
    & .b7 { inset:calc(100% + 33px) 99.0816% auto auto; width:111px; aspect-ratio:111/123;}
}
.ing .swiper {
    margin-top:68px;
    padding-inline:1em;

    & .swiper-slide { width:240px;}
    & :is(.swiper-button-next, .swiper-button-prev, .swiper-pagination) { display:none;}
    & .popup {
        --triangle-range:1em;
        
        font-size:22px;
        font-weight:bold;
        font-family:var(--font-zen);
        line-height:1.3;
        color:#fff;
        text-align:center;
        position:relative;
        margin-bottom:var(--triangle-range);
        padding-block:1em 1em;
        border-radius:1em;
        background-color:var(--color-main);
    }
    & .popup::after {
        content:"";
        position:absolute;
        inset:calc(100% - 1px) auto auto 50%;
        translate:-50% 0;
        display:block;
        width:var(--triangle-range);
        height:calc(tan(60deg) * var(--triangle-range) / 2);
        background-color:var(--color-main);
        clip-path:polygon(0% 0%, 100% 0%, 50% 100%);
    }
    & .title {
        font-size:22px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        height:2lh;
    }
    & .title small {
        font-size:0.65em;
    }
    & img {
        margin-block:1em;
        filter:drop-shadow(0 0 0.25em color-mix(in sRGB, #fff 75%, #000 25%));
    }
    & p {
        letter-spacing:0.07em;
        font-feature-settings:unset;
    }
    & :nth-child(3 of .swiper-slide) .labels {
        grid-template-columns:auto 1fr;
    }
}
.ing .other {
    margin-top:5em;

    & h3 { font-size:22px;}
    & .flex img { width:50%;}
}
.ing .inner + .inner {
    padding-bottom:80px;

    & .flex { margin-top:3em;}
    & .flex > img { width:50%;}
    & .flex p { margin-top:1em;}
}
@media (max-width:768px){
    .ing {
        padding-bottom:18.0821vw;

        & .inner {
            --radius:1.5rem;
            padding:45px 0;
        }
        & .inner > *:not(.swiper, img) { padding-inline:5vw;}
        & .inner + .inner .flex {
            flex-direction:column-reverse;

            & img { width:100%!important;}
        }
        & hgroup h2 { width:84.0348%;}
        & .other h3 { text-align:center;}
        & .other .flex { flex-direction:column-reverse;}
        & .other .flex img { width:85%;}

        & .swiper {
            --p-width:3rem;
            --p-gap:6px;
            --p-margin:14px;
            --b:solid 2px #fff;
            --button-inline-pos:calc(50% + var(--p-width) * 1.5 + var(--p-gap) + var(--p-margin));

            overflow:clip visible;

            & :is(.swiper-button-next, .swiper-button-prev, .swiper-pagination) {
                display:block;
                inset-block:calc(100% + 1rem) auto;
            }
            & .swiper-pagination { z-index:-1;}
            & .swiper-pagination-bullet {
                width:var(--p-width);
                height:7px;
                border-radius:100vmax;
                margin-inline:calc(var(--p-gap) / 2);
            }
            & .swiper-pagination-bullet-active {
                background-color:var(--color-main);
            }
            & :is(.swiper-button-next, .swiper-button-prev) {
                width:1.5rem;
                height:auto;
                aspect-ratio:1;
                background-color:var(--color-main);
                border-radius:50%;
                translate:0 100%;
            }
            & .swiper-button-next {
                inset-inline:var(--button-inline-pos) auto;
            }
            & .swiper-button-prev {
                inset-inline:auto var(--button-inline-pos);
            }
            & :is(.swiper-button-next, .swiper-button-prev)::after {
                content:"";
                position:absolute;
                inset-block:50% auto;
                display:block;
                width:30%;
                height:auto;
                aspect-ratio:1;
                border-bottom:var(--b);
            }
            & .swiper-button-next::after {
                inset-inline:50% auto;
                border-right:var(--b);
                rotate:-0.125turn;
                translate:-50% -50%;

            }
            & .swiper-button-prev::after {
                inset-inline:auto 50%;
                border-left:var(--b);
                rotate:0.125turn;
                translate:50% -50%;
            }
        }
        & .b1 { width:16.2137vw; inset:-2.1170% auto auto 87.9701%;}
        & .b2 { width:10.0366vw; inset:17.5885% 93.1175% auto auto;}
        & .b3 { width:13.6572vw; inset:auto auto 14.8951% 94.8086%;}
        & .b4 { width:17.6972vw; inset:auto 83.8129% 38.2389% auto;}
    }
}


/* ==================================================
    usage
================================================== */
.usage {
    padding-block:120px 150px;
    background:linear-gradient(to bottom, #f3b6bc, #fcfcfc, #f3b6bc);

    & .inner {
        position:relative;
        z-index:1;
    }
    & h2 {
        width:fit-content;
        margin-inline:auto;
    }
    & h3 {
        display:grid;
        grid-template-columns:1fr auto 1fr;
        align-items:center;
        gap:1em;
        margin-top:86px;

        &::before,
        &::after {
            content:"";
            display:block;
            width:100%;
            height:100%;
            background:url(../../img/usage/title2_sub.png) no-repeat center / auto 5px;
        }
        &::before { background-position:right center;}
        &::after { background-position:left center;}
    }
    & .step {
        --gap:4rem;

        counter-reset:num;
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        gap:var(--gap);

        & li { counter-increment:num;}
        & li + li { position:relative;}
        & li + li::before {
            --size:38px;

            content:"";
            position:absolute;
            inset:50% calc(100% + var(--gap) / 2) auto auto;
            translate:50% 0;
            display:block;
            width:auto;
            height:var(--size);
            aspect-ratio:25/38;
            background-color:currentColor;
            clip-path:polygon(0% 0%, 100% 50%, 0% 100%);
        }
        & .num {
            position:absolute;
            inset:auto auto 100% 50%;
            translate:-50% -50%;
        }
    }

    & .step.large {
        margin-top:102px;
        color:var(--color-main);

        & li:nth-of-type(2)::after {
            content:"";
            position:absolute;
            inset:auto auto 58.0938% 72.7884%;
            display:block;
            width:36%;
            aspect-ratio:102/101;
            background:url(../../img/usage/img4.png) no-repeat center / contain;
        }
    }
    & .step.small {
        margin-top:52px;

        & li + li::before {
            --size:19px;
        }
    }
    & details {
        margin-top:87px;
    }
    & .b1 {
        inset:-225px 82.9591% auto auto;
        width:23.0612%;
        aspect-ratio:1;
    }
    & .b2 {
        inset:30px auto auto 99.2857%;
        width:11.3265%;
        aspect-ratio:111/123;
    }
    & .b3 {
        inset:516px 94.7959% auto auto;
        width:15.3061%;
        aspect-ratio:150/148;
        z-index:-1;
    }
    & .b4 {
        inset:459px auto auto 96.0204%;
        width:27.2448%;
        aspect-ratio:1;
        z-index:-1;
    }
}
@media(max-width:768px){
    .usage {
        padding-block:17.5vw;

        & h2 { width:32.7246vw;}
        & h3 { margin-top:17.8082vw;}
        & h3 img { width:56.1643vw;}
        & details { margin-top:68px;}
        & .step {
            --gap:98px;
            grid-template-columns:1fr;
            justify-items:center;
        }
        & .step li + li::before {
            rotate:0.25turn;
            inset:auto auto calc(100% + var(--gap) / 2) 50%;
            translate:-50% 50%;
        }
        & .step.large { margin-top:13.6986vw;}
        & .step.small { --gap:42px; margin-top:6.3013vw;}
        & .step.small li + li::before { translate:-50% 100%;}
    }
}



/* ==================================================
    story
================================================== */
.story {
    padding-block:144px 135px;

    & h2 {
        width:fit-content;
        margin-inline:auto;
    }
    & .box {
        margin-top:100px;
        padding:0px min(64px, 6.5306vw) 64px;
        background:#dff0ee url(../../img/story/mask.svg) no-repeat center top / 102% auto;
    }
    & .catch {
        width:fit-content;
        margin:-16px auto 0;
    }
    & .text {
        width:fit-content;
        margin:48px auto 0;
    }
    & .list {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:min(85px, 8.6734vw);
        margin-top:64px;
    }
    & .other {
        margin-top:70px;
    }
}
@media(max-width:768px){
.story {
    padding-block:17.8082vw 16.7123vw;

    & h2 { width:35.9804vw;}
    & .box { margin-top:11.5068vw; padding:0px 5vw 5vw;}
    & .list {
        display:flex;
        flex-direction:column;
        gap:9.8vw;
        margin-top:15.0684vw;

        &::before {
            content:"";
            order:2;
            display:block;
            width:100%;
            height:0.5rem;
            background:url(../../img/usage/title2_sub.png) repeat-x center / auto 100%;
        }
        & img { width:100%;}
        & li:nth-of-type(1) { order:1;}
        & li:nth-of-type(2) { order:3;}
    }
    & .other { margin-top:10.4109vw;}
}
}


/* ==================================================
    other
================================================== */
section.other {
    background:
        linear-gradient(to bottom, transparent, transparent 85%, #fff 100%),
        url(../../img/other/bg.webp) no-repeat center top / 100% auto;

    & .imgs {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:5.46875vw;
        margin-inline:auto;
        padding-top:15vw;
        width:77.5vw;
    }
    & .imgs picture:nth-of-type(1) img {
        margin-top:37px;
        width:33.59375vw;
    }
    & .imgs picture:nth-of-type(2) img {
        width:31.796875vw;
    }
    & details {
        margin-top:-18.75vw;
    }
    & details p + p {
        margin-top:2em;
    }
}
@media(max-width:768px){
section.other {
    
    & .imgs {
        display:flex;
        flex-direction:column-reverse;
        justify-content:center;
        gap:0;
        padding-top:7.6712vw;

        & img { width:100%!important;}
        & picture:nth-of-type(1) { margin-inline:-5vw;}
        & picture:nth-of-type(1) img { margin-top:-22.5vw;}
    }
    & details { margin-top:12.8767vw;}
}
}