@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&display=swap');

:root{
    --text-color: #505050;
    --green-color: #8EC361;
    --orange-color: #FDA830;
    --bg-color: #FFF4D6;
    --gray-color: #F5F5F5;
    --white-color: #fff;

    --font-14px: clamp(13px, 0.972vw, 14px);
    --font-20px: clamp(20px, 1.388vw, 20px);
    --font-25px: clamp(25px, 1.7361vw, 25px);
    --font-30px: clamp(28px, 2.083vw, 30px);
    --font-40px: clamp(32px, 2.77vw, 40px);

    --m-100: 6.941%;
    --m-50: 3.47%;
    --m-150: 10.42%;
    --m-250: 17.36%;

    /* --gap-50: 5rem; */
    --gap-30: 3rem;
    --gap-20: 2rem;
    --gap-10: 1rem;

    --radius-20: 2vh;
    --radius-10: 1vh;

    --shadow: drop-shadow(0 0 15px rgba(80,80,80,0.15));
}
*{
    line-height: 150%;
    font-family: "Zen Maru Gothic", sans-serif;
    color: var(--text-color);
    letter-spacing: 5%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-X: hidden;
    background: #fff;
}
address{
    font-style: normal;
    display: inherit;
}
.heading{
    font-size: var(--font-40px);
    font-weight: 700;
    width: fit-content;
    margin: 0 auto;
}
.green{
    color: var(--green-color);
}
.orange{
    color: var(--orange-color);
}
.bg-y{
    background: var(--bg-color);
}
.bg-g{
    background: var(--gray-color);
}
.bg-w{
    background: var(--white-color);
}
.flex{
    display: flex;
}
.column{
    display: flex;
    flex-direction: column;
}
ol li,
ul li{
    list-style: none;
}
a{
    text-decoration: none;
    display: block;
}
a:hover{
    opacity: .7;
    transition: .2s;
}
.font20{
    font-size: var(--font-20px);
}
.font25{
    font-size: var(--font-25px);
}
.font30{
    font-size: var(--font-30px);
}
.font40{
    font-size: var(--font-40px);
}
.font14{
    font-size: var(--font-14px);
}
.bold{
    font-weight: 700;
}
img{
    display: block;
    width: 100%;
    height: auto;
}
/* 余白 */
.m-50{
    padding: var(--m-50)
}
.m-50-top{
    padding-top: var(--m-50);
}
.m-50-bottom{
    padding-bottom: var(--m-50);
}
.m-100{
    padding: var(--m-100);
}
.m-100-top{
    padding-top: var(--m-100);
}
.m-100-bottom{
    padding-bottom: var(--m-100);
}
.m-150{
    padding-left: var(--m-150);
    padding-right: var(--m-150);
}
.sp-w{
    display: none;
}

@media screen and (max-width: 769px){
    :root{
        --m-100: 5%;
        --m-50: 3%;
        --m-150: 7%;
        --m-250: 7%;
    }
}

@media screen and (max-width: 450px){
    :root{
        --m-100: 10%
    }
    .sp-w{
        display: unset;
    }
}

@media screen and (max-width: 400px){
    :root{
        --font-40px: clamp(27px, 2.77vw, 40px);
        --font-30px: clamp(25px, 2.083vw, 30px);
        --font-25px: clamp(22px, 1.7361vw, 25px);
        --font-20px: clamp(18px, 1.388vw, 20px);
    }
    html{
        font-size: 15px;
    }
}

/******************

* アニメーション

******************/
.element{
    animation: pop 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-play-state: paused;
    display: block;
}
.pop-in{
    opacity: 0;
}
.pop-in.in-view{
    animation: pop 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    display: block;
    opacity: 1;
}
@keyframes pop{
    0%{
        transform: scale(0) translate(0px);
    }
    50%{
        transform: scale(1.05);
    }
    80%{
        transform: scale(0.95);
    }
    100%{
        transform: initial;
    }
}
.fade-in{
    opacity: 0;
}
.fade-in.in-view{
    opacity: 1;
    animation: fade .9s ease-in-out;
}
@keyframes fade{
    from{
        opacity: 0;
        transform: translateY(30px);
    }
    to{
        opacity: 1;
        transform: translateY(0px);
    }
}

/******************

* header

******************/
header{
    padding: 1% 5%;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    width: 100%;
    z-index: 999;
    background: rgba(255,255,255,0.8);
}
.header--w{
    justify-content: space-between;
    align-items: center;
}
header .left{
    align-items: center;
    width: 30%;
    gap: 10px;
    z-index: 1;
}
header .left a{
    width: 45%;
}
header .kitchen-logo{
    aspect-ratio: 139 / 17;
    width: 40%;
    height: auto;
}
header .right{
    align-items: center;
    gap: 1rem;
}
header .tel--w a{
    font-weight: 700;
    gap: 5px;
    align-items: center;
    transition: .2s;
}
header .tel--w a::before{
    content: "";
    background: url(../image/icon_tel.svg) no-repeat;
    background-size: 100% 100%;
    aspect-ratio: 28 / 23;
    width: 1.7rem;
    height: auto;
}
header .cta-button a{
    background: var(--orange-color);
    color: var(--white-color);
    border-radius: var(--gap-10);
    height: stretch;
    gap: .5rem;
    padding: 1rem 1.5rem;
    transition: .2s;
}
header .cta-button a::before{
    content: "";
    background: url(../image/cta-icon.svg) no-repeat;
    aspect-ratio: 1 / 1;
    width: 1.5rem;
    height: auto;
    display: block;
    background-size: 100% 100%;
}
header .cta-button a:hover{
    transform: scale(1.05);
    opacity: 1;
}
header .tel--w a:hover{
    transform: scale(1.05);
    opacity: 1;
}
/* ----- sp-menu ----- */
html.menu-open,
body.menu-open {
    overflow: hidden;
}

header .sp-menu .menu-btn{
    justify-content: space-between;
    height: 2rem;
    cursor: pointer;
}
header .sp-menu .menu-btn span{
    width: 3rem;
    height: 4px;
    display: block;
    background: var(--green-color);
    border-radius: 100vh;
    transition: .3s;
}
header .sp-cont,
header input[type="checkbox"]{
    display: none;
}
header .sp-cont .menu{
    padding: var(--m-250);
}
header .sp-cont ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
}
header .sp-cont li a{
    justify-content: space-between;
    border-bottom: 1px solid var(--green-color);
    padding: 1rem;
}
header .sp-cont li a::after{
    content: "";
    background: url(../image/sp-button.svg) no-repeat;
    aspect-ratio: 1 / 1;
    width: 1.5rem;
    height: auto;
    background-size: 100% 100%;
    display: block;
    transition: .2s;
}
header .sp-cont li a:hover::after{
    transform: translateX(.5rem);
}
header .sp-cont .cta--w{
    align-items: stretch;
    padding: var(--m-100) var(--m-250);
    gap: 1.5rem;
    flex-wrap: wrap;
}
header .sp-cont .bg-nami{
    /* position: absolute; */
    bottom: 0;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 100%;
}
header .sp-cont .bg-nami::before{
    content: "";
    background: url(../image/nami_top.svg) no-repeat;
    display: block;
    background-size: 100% 100%;
    aspect-ratio: 1440 / 29;
    width: 100%;
    height: auto;
}
header .sp-cont .cta--w a{
    color: var(--white-color);
    border-radius: var(--gap-10);
    flex: 1;
    padding: 1rem;
    transition: .2s;
}
header .sp-cont .cta--w a:hover{
    opacity: 1;
    transform: scale(1.05);
}
header .sp-cont .cta--w a,
header .sp-cont .cta--w a p,
header .sp-cont .cta--w a address{
    color: var(--white-color);
    text-align: center;
}
header .sp-cont .cta--w a address{
    justify-content: center;
    gap: .5rem;
    align-items: center;
}
header .sp-cont .cta--w a address::before{
    content: "";
    display: block;
    background: url(../image/icon_tel_w.svg) no-repeat;
    aspect-ratio: 44 / 37;
    width: 2rem;
    height: auto;
    background-size: 100% 100%;
}
header .sp-cont .cta--w a:nth-of-type(1){
    background: var(--green-color);
}
header .sp-cont .cta--w a:nth-of-type(2){
    background: var(--orange-color);
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
header .sp-cont .cta--w a:nth-of-type(2)::before{
    content: "";
    display: block;
    background: url(../image/cta-icon.svg) no-repeat;
    aspect-ratio: 1 / 1;
    width: 2rem;
    height: auto;
    background-size: 100% 100%;
}
header input[type="checkbox"]:checked + .menu-btn span:nth-of-type(1){
    transform: rotate(45deg) translate(10px, 10px);
}
header input[type="checkbox"]:checked + .menu-btn span:nth-of-type(2){
    display: none;
}
header input[type="checkbox"]:checked + .menu-btn span:nth-of-type(3){
    transform: rotate(-45deg) translate(10px, -10px);
}
header input[type="checkbox"]:checked ~ .sp-cont{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    position: fixed;
    width: 100%;
    background: var(--white-color);
    height: 100dvh;
    right: 0;
    top: 0;
    z-index: -1;
    inset: 0;
}
header:has(input[type="checkbox"]:checked) .header--w .right .tel--w,
header:has(input[type="checkbox"]:checked) .header--w .right .cta-button{
    display: none;
}

@media screen and (max-width: 769px){
    header{
        padding: 3% 5%;
    }
    header .tel--w,
    header .cta-button{
        display: none;
    }
    header .left{
        width: 42%;
    }
    /* sp-menu */
    header .sp-cont .bg-nami::before{
        margin-bottom: -2px;
    }
    header .sp-cont .menu{
        padding-top: calc(var(--m-250) * 3);
    }
    header .sp-cont ul{
        grid-template-columns: 1fr;
    }
    header .sp-cont .cta--w{
        flex-direction: column;
    }
}

@media screen and (max-width: 450px){
    header{
        padding: 5%;
    }
    header .left{
        width: 60%;
    }
}

/******************

* 追従ボタン

******************/
.follow-button{
    position: fixed;
    right: 0;
    top: 45%;
    z-index: 99;
}
.follow-button a{
    background: var(--orange-color);
    align-items: center;
    padding: 1rem;
    border-top-left-radius: var(--radius-10);
    border-bottom-left-radius: var(--radius-10);
    gap: .5rem;
}
.follow-button a span{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color: var(--white-color);
    transition: .2s;
}
.follow-button a::before{
    content: "";
    background: url(../image/cta-icon.svg) no-repeat center;
    background-size: 100% 100%;
    aspect-ratio: 1 / 1;
    display: block;
    width: 2rem;
    height: auto;
}
.follow-button a:hover{
    transform: scale(1.07);
    transform-origin: center right;
    opacity: 1;
}

@media screen and (max-width: 450px){
    .follow-button{
        bottom: 0;
        top: unset;
        left: 0;
        width: 100%;
    }
    .follow-button a span{
        -ms-writing-mode: unset;
        writing-mode: unset;
    }
    .follow-button a{
        border-radius: 0;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
}

/******************

* MV
* #mv

******************/
.mv--w{
    position: relative;
    background-image: linear-gradient(0deg, var(--bg-color), var(--white-color));
    padding: 2rem 0;
}
.mv--w .txt--w p,
.mv--w .txt--w h1{
    text-align: center;
}
.mv--w .txt--w p{
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 1rem;
}
.mv--w .txt--w p::before,
.mv--w .txt--w p::after{
    content: "";
    display: block;
    aspect-ratio: 37 / 36;
    width: 3rem;
    height: auto;
}
.mv--w .txt--w p::before{
    background: url(../image/piko_left.svg) no-repeat;
    background-size: 100% 100%;
}
.mv--w .txt--w p::after{
    background: url(../image/piko_rignt.svg) no-repeat;
    background-size: 100% 100%;
}
.mv--w .txt--w .bg-txt{
    color: var(--white-color);
    background: var(--green-color);
    padding: 5px 10px;
    border-radius: var(--gap-10);
    display: inline-block;
    margin: 0 .5rem;
}
.mv--w .txt--w .bg-txt:nth-of-type(2){
    margin-left: 0;
}
/* ----- スライダー ----- */
.carousel{
    width:100%;
    overflow:hidden;
    padding:40px 0;
    position: relative;
}
.carousel::before,
.carousel::after{
    content: "";
    position: absolute;
    display: block;
    z-index: 3;
}
.carousel::before{
    background: url(../image/powa01.svg) no-repeat;
    width: 10%;
    height: auto;
    aspect-ratio: 149 / 104;
    background-size: 100% 100%;
    left: 10%;
    top: 0%;
}
.carousel::after{
    background: url(../image/powa02.svg) no-repeat;
    width: 5%;
    height: auto;
    aspect-ratio: 70 / 72;
    background-size: 100% 100%;
    right: 15%;
    top: 3%;
}
.carousel-track{
    display:flex;
    gap:24px;
    will-change: transform;
}
.card{
    position: relative;
    transition: transform .7s cubic-bezier(.77,0,.18,1), opacity .7s;
    flex: 0 0 clamp(280px, 45vw, 700px);
    border-radius:20px;
    overflow:hidden;
    transform: scale(.88);
    filter: var(--shadow);
}
.card img{
    width:100%;
    display:block;
}
.card.active{
    transform: scale(1);
    z-index:10;
}

@media screen and (max-width: 769px){
    .card{
        height: 40vh;
    }
    .card img{
        height: 100%;
        object-fit: cover;
    }
}

@media screen and (max-width: 400px){
    .mv--w .txt--w .bg-txt{
        padding: 2px 10px;
    }
}

/* ----- サポート問い合わせ ----- */
.mv--w .support{
    display: none;
    /* background: var(--white-color);
    position: absolute;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-10);
    bottom: 5%;
    right: 5%;
    bottom: 2%;
    filter: var(--shadow); */
}
.mv--w .support a{
    align-items: baseline;
    gap: 5px;
}
.mv--w .support a::before{
    content: "";
    background: url(../image/icon_tel_g.svg) no-repeat;
    background-size: 100% 100%;
    aspect-ratio: 25 / 20.65;
    width: 1.5rem;
    height: auto;
}

@media screen and (max-width: 450px){
    .mv--w .support{
        display: none;
    }
}


/******************

* 高齢者施設、障がい者施設〜〜
* #pickup

******************/
#pickup::after{
    content: "";
    background: url(../image/en-bottom.svg) no-repeat;
    aspect-ratio: 1440 / 109;
    width: 100%;
    height: auto;
    display: block;
    background-size: 100% 100%;
}
.pickup--w{
    gap: var(--gap-30);
}
.pickup--w h2{
    text-align: center;
}
.pickup--w h2 span.flex{
    align-items: center;
    justify-content: center;
}
.pickup--w h2 img{
    aspect-ratio: 224 / 27;
    height: 100%;
    width: auto;
}
.pickup--w ul{
    gap: 1.5rem;
}
.pickup--w li{
    flex: 1;
    gap: var(--gap-10);
}
.pickup--w li .img--w{
    overflow: hidden;
    border-radius: var(--radius-20);
    position: relative;
}
.pickup--w li:nth-of-type(1) .img--w::after{
    content: "❶";
}
.pickup--w li:nth-of-type(2) .img--w::after{
    content: "❷";
}
.pickup--w li:nth-of-type(3) .img--w::after{
    content: "❸";
}
.pickup--w li .img--w::after{
    font-size: var(--font-40px);
    position: absolute;
    left: .5rem;
    top: .5rem;
    color: var(--green-color);
    background: var(--white-color);
    border-radius: 100vh;
    letter-spacing: -1px;
    text-align: center;
    line-height: 90%;
}
.pickup--w li h3,
.pickup--w li p{
    text-align: center;
}

@media screen and (max-width: 769px){
    .pickup--w ul{
        flex-direction: column;
    }
    .pickup--w li h3{
        font-size: var(--font-30px);
    }
    .pickup--w li .img--w::after{
        font-size: calc(var(--font-40px) * 2);
    }
    #pickup::after{
        margin-top: -1px;
    }
}

@media screen and (max-width: 450px){
    .pickup--w h2 span.flex{
        flex-direction: column;
        gap: .5rem;
    }
    .pickup--w h2{
        font-size: var(--font-25px);
    }
}

@media screen and (max-width: 400px){
    .pickup--w h2,
    .pickup--w li h3{
        font-size: var(--font-20px);
    }
    .pickup--w h2 img{
        width: 80%;
        height: auto;
    }
    .pickup--w li .img--w::after{
        font-size: calc(var(--font-40px) * 1.5);
    }
}

/******************

* 悩み
* #beginning

******************/
.beginning--w .worry{
    width: 60%;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto var(--gap-30);
    gap: 2rem;
}
.beginning--w .worry .left{
    width: calc((100% / 3) * 2);
    gap: 1rem;
}
.beginning--w .worry .right{
    width: calc(100% / 3);
}
.beginning--w .worry p{
    background: var(--green-color);
    color: var(--white-color);
    border-radius: var(--radius-10);
    position: relative;
    padding: 1.2rem;
    text-align: center;
}
.beginning--w .worry p::after{
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: var(--green-color);
    display: block;
    right: calc(-1rem + 1px);
    top: calc(50% - .5rem);
}
.beginning--w .triangle{
    gap: 1rem;
    margin: 0 auto;
    width: fit-content;
}
.beginning--w .triangle span{
    width: 7vw;
    height: 2rem;
    background: var(--orange-color);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.beginning--w .triangle::after,
.beginning--w .triangle::before{
    content: "";
    display: block;
    width: 7vw;
    height: 2rem;
    background: var(--orange-color);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.photo--w{
    align-items: center;
    justify-content: space-between;
}
.photo--w span img{
    width: auto;
    height: 2.5rem;
    aspect-ratio: 278 / 34;
}
.photo--w::before{
    content: "";
    background: url(../image/photo_left.webp) no-repeat;
    aspect-ratio: 726 / 662;
    width: 25%;
    height: auto;
    display: block;
    background-size: 100% 100%;
}
.photo--w::after{
    content: "";
    background: url(../image/photo_right.webp) no-repeat;
    aspect-ratio: 728 / 662;
    width: 25%;
    height: auto;
    display: block;
    background-size: 100% 100%;
}
.photo--w h3{
    text-align: center;
}
.photo--w h3 .flex{
    align-items: center;
    gap: .5rem;
}
.link--w{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap-10);
}
.link--w a{
    background: var(--green-color);
    color: var(--white-color);
    border-radius: var(--radius-10);
    padding: 1rem;
    align-items: center;
    justify-content: space-between;
}
.link--w a::after{
    content: "";
    background: var(--white-color);
    width: 1.5rem;
    height: .5rem;
    display: block;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media screen and (max-width: 769px){
    .beginning--w .worry{
        width: 100%;
        padding: var(--m-150);
    }
    .photo--w h3 span{
        display: block;
    }
    .link--w{
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 450px){
    .beginning--w .worry{
        flex-direction: column;
        margin: 0;
    }
    .beginning--w .worry .left{
        width: 100%;
        gap: 2rem;
    }
    .beginning--w .worry p::after{
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        top: unset;
        bottom: -.5rem;
        margin: 0 auto;
        right: 0;
        left: 0;
    }
    .photo--w::before,
    .photo--w::after{
        display: none;
    }
    .photo--w{
        justify-content: center;
        padding: var(--m-50) var(--m-150);
    }
    .link--w{
        grid-template-columns: 1fr;
        padding-bottom: 0;
    }
}

/******************

* 選ばれる理由
* #reason

******************/
#reason::before{
    content: "";
    background: url(../image/nami_top.svg) no-repeat;
    background-size: 100% 100%;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 29;
}
#reason::after{
    content: "";
    background: url(../image/nami_bottom.svg) no-repeat;
    width: 100%;
    height: auto;
    background-size: 100% 100%;
    aspect-ratio: 1440 / 29;
    display: block;
}
.reason--w{
    gap: var(--gap-30);
}
.reason--w h2{
    position: relative;
    align-items: center;
    z-index: 1;
}
.reason--w h2::before{
    content: "";
    background: url(../image/women-face.svg) no-repeat;
    display: block;
    aspect-ratio: 77 / 82;
    width: 5.5rem;
    height: auto;
    background-size: 100% 100%;
}
.reason--w h2::after{
    content: "";
    position: absolute;
    margin: 0 auto;
    right: 0;
    left: 0;
    background: url(../image/graffiti.svg) no-repeat;
    aspect-ratio: 244 / 67;
    background-size: 100% 100%;
    width: 100%;
    height: auto;
    z-index: -1;
    bottom: -.5rem;
}
.reason--w ul{
    gap: var(--gap-30);
}
.reason--w li{
    border-radius: var(--radius-20);
    justify-content: space-between;
    padding: var(--gap-20);
    position: relative;
}
.reason--w li:nth-child(+2n){
    flex-direction: row-reverse;
}
.reason--w li .img--w{
    overflow: hidden;
    border-radius: var(--radius-20);
}
.reason--w li:nth-of-type(1)::after,
.reason--w li:nth-of-type(2)::after,
.reason--w li:nth-of-type(3)::after,
.reason--w li:nth-of-type(4)::after{
    content: "";
    display: block;
    position: absolute;
    height: auto;
    bottom: 1.5rem;
}
.reason--w li:nth-of-type(1)::after{
    background: url(../image/reason01_icon.svg) no-repeat;
    aspect-ratio: 158 / 86;
    background-size: 100% 100%;
    width: 15%;
    left: 1.5rem;
}
.reason--w li:nth-of-type(2)::after{
    background: url(../image/reason02_icon.svg) no-repeat;
    aspect-ratio: 144 / 106;
    background-size: 100% 100%;
    width: 15%;
    right: 1.5rem;
}
.reason--w li:nth-of-type(3)::after{
    background: url(../image/reason03_icon.svg) no-repeat;
    aspect-ratio: 102 / 86;
    background-size: 100% 100%;
    width: 12%;
    left: 1.5rem;
}
.reason--w li:nth-of-type(4)::after{
    background: url(../image/reason04_icon.svg) no-repeat;
    aspect-ratio: 125 / 97;
    background-size: 100% 100%;
    width: 12%;
    right: 1.5rem;
}
.reason--w li .right,
.reason--w li .img--w{
    width: calc((100% / 2) - 1rem);
}
.reason--w li .right{
    gap: var(--gap-10);
}
.reason--w li .right a{
    background: var(--green-color);
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-10);
    color: var(--white-color);
    padding: 1rem 1.5rem;
    width: 60%;
}
.reason--w .right a::after{
    content: "";
    background: url(../image/icon_blank.svg) no-repeat;
    background-size: 100% 100%;
    aspect-ratio: 1 / 1;
    width: 1rem;
    height: auto;
    display: block;
}

@media screen and (max-width: 769px){
    #reason::before{
        margin-bottom: -1px;
    }
    #reason::after{
        margin-top: -1px;
    }
    .reason--w li,
    .reason--w li:nth-child(+2n){
        flex-direction: column;
        gap: var(--gap-10);
    }
    .reason--w li .right,
    .reason--w li .img--w{
        width: 100%;
    }
    .reason--w li:nth-of-type(1)::after,
    .reason--w li:nth-of-type(2)::after,
    .reason--w li:nth-of-type(3)::after,
    .reason--w li:nth-of-type(4)::after{
        width: 25%;
        top: 50%;
        bottom: auto;
    }
    .reason--w li:nth-of-type(3)::after{
        width: 20%;
    }
}

@media screen and (max-width: 450px){
    .reason--w{
        gap: var(--gap-20);
    }
    .reason--w h2::before{
        width: 4rem;
    }
    .reason--w li .right a{
        width: 100%;
    }
    .reason--w li h3{
        font-size: var(--font-20px);
    }
    .reason--w li:nth-of-type(1)::after,
    .reason--w li:nth-of-type(2)::after,
    .reason--w li:nth-of-type(3)::after,
    .reason--w li:nth-of-type(4)::after{
        top: 31%;
    }
}

@media screen and (max-width: 400px){
    .reason--w li:nth-of-type(1)::after,
    .reason--w li:nth-of-type(2)::after,
    .reason--w li:nth-of-type(3)::after,
    .reason--w li:nth-of-type(4)::after{
        top: 29%;
    }
}

/******************

* ラインナップ
* #lineup

******************/
.lineup--w{
    gap: var(--gap-30);
}
.lineup--w hgroup h2{
    text-align: center;
}
.lineup--w hgroup p:not(.content--w hgroup p){
    background: var(--green-color);
    color: var(--white-color);
    border-radius: var(--radius-10);
    position: relative;
    width: fit-content;
    padding: .5rem 1rem;
    margin: 0 auto;
}
.lineup--w hgroup p:not(.content--w hgroup p)::before{
    content: "";
    background: url(../image/ok-icon.svg) no-repeat;
    width: 2rem;
    height: auto;
    aspect-ratio: 40 / 15;
    display: block;
    background-size: 100% 100%;
    position: absolute;
    top: -1.2rem;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.lineup--w hgroup p:not(.content--w hgroup p)::after{
    content: "";
    background: var(--green-color);
    width: 1rem;
    height: 1rem;
    display: block;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: -.5rem;
}
.lineup-cont{
    padding: var(--gap-30);
    border-radius: var(--radius-20);
    gap: var(--gap-10);
}
.lineup-cont p.font25{
    text-align: center;
}
.lineup-cont .bg-w{
    border-radius: var(--radius-20);
    padding: var(--gap-20);
    justify-content: center;
    gap: 2rem;
    align-items: center;
}
.lineup-cont .bg-w .img--w.plus{
    width: 1.5rem;
}
/* --- ラインナップ一覧 --- */
.lineup-all{
    gap: var(--gap-20);
}
.lineup-all .content--w{
    flex: 5;
}

/* --- メニューコンテンツ --- */
.lineup-all .right ul,
.lineup-all .nutrition ul{
    flex-wrap: wrap;
    gap: .5rem;
}
.lineup-all .bg-black,
.lineup-all .bg-color{
    padding: .5rem;
    border-radius: var(--radius-10);
}
.lineup-all .bg-black{
    background: var(--text-color);
    color: var(--white-color);
}
.lineup-all .content .color:not(.heading){
    font-size: inherit;
}
.lineup-all .cont01 .color{
    color: var(--green-color);
}
.lineup-all .cont01 .bg-color{
    background: var(--green-color);
    color: var(--white-color);
}
.lineup-all .cont02 .color{
    color: #D9C266;
}
.lineup-all .cont02 .bg-color{
    background: #D9C266;
    color: var(--white-color);
}
.lineup-all .cont03 .color{
    color: #D29F6A;
}
.lineup-all .cont03 .bg-color{
    background: #D29F6A;
    color: var(--white-color);
}
.lineup-all .cont04 .color{
    color: #DC7772;
}
.lineup-all .cont04 .bg-color{
    background: #DC7772;
    color: var(--white-color);
}
.lineup-all .cont05 .color{
    color: #CE74D7;
}
.lineup-all .cont05 .bg-color{
    background: #CE74D7;
    color: var(--white-color);
}
.lineup-all .detail ul{
    gap: 2rem;
}
.lineup-all .detail ul li{
    align-items: center;
    gap: .5rem;
}
.lineup-all .example{
    gap: var(--gap-10);
}
.lineup-all .example .right,
.lineup-all .example .left{
    flex: 1;
}
.lineup-all .example .right,
.lineup-all .nutrition{
    gap: .5rem;
}
.lineup-all a,
.lineup-all a.bg-color{
    padding: 1rem 1.5rem;
    border-radius: var(--radius-10);
    justify-content: space-between;
    align-items: center;
    margin-top: .5rem;
}
.lineup-all .content:has(.nutrition) a{
    width: 50%;
}
.lineup-all a::after{
    content: "";
    background: url(../image/icon_blank.svg) no-repeat;
    aspect-ratio: 1 / 1;
    background-size: 100% 100%;
    display: block;
    width: 1rem;
    height: auto;
}
.lineup-all .img--w{
    overflow: hidden;
    border-radius: var(--radius-20);
}
.content--w .content{
    display: none;
}
.content--w .content.active{
    display: block;
}
.content--w .sp-content{
    gap: var(--gap-10);
}
.content--w .sp-content hgroup p{
    text-align: center;
}

/* --- タブボタン --- */
.lineup-all .button--w{
    flex: 2;
}
.lineup-all .button--w ul{
    position: sticky;
    left: 0;
    top: 50%;
    gap: .5rem;
}
.button--w button{
    width: 100%;
    padding: 1rem;
    border-radius: var(--radius-10);
    color: var(--white-color);
    background: #969696;
    border: none;
    font-size: inherit;
    cursor: pointer;
}
.sp-accordion-btn{
    color: var(--white-color);
    border: none;
    border-radius: var(--radius-10);
    justify-content: space-between;
    align-items: center;
    font-size: calc(var(--gap-20) / 1.5);
}
.sp-accordion-btn::after{
    content: "";
    display: block;
    background: var(--white-color);
    width: .5rem;
    height: 1.5rem;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: .2s;
}
.button--w li:nth-of-type(1) button.active,
.cont01 .sp-accordion-btn{
    background: var(--green-color);
}
.button--w li:nth-of-type(2) button.active,
.cont02 .sp-accordion-btn{
    background: #D9C266;
}
.button--w li:nth-of-type(3) button.active,
.cont03 .sp-accordion-btn{
    background: #D29F6A;
}
.button--w li:nth-of-type(4) button.active,
.cont04 .sp-accordion-btn{
    background: #DC7772;
}
.button--w li:nth-of-type(5) button.active,
.cont05 .sp-accordion-btn{
    background: #CE74D7;
}
.sp-accordion-btn{
    display: none;
}

@media screen and (max-width: 768px){
    .sp-accordion-btn{
        display: flex;
        width: 100%;
        padding: 1rem 1.5rem;
    }
    .lineup-all .button--w{
        display: none;
    }
    .content--w .content{
        display: block;
    }
    .content--w .content:not(:last-child){
        margin-bottom: var(--gap-10);
    }
    .content--w .sp-content{
        display: none;
    }
    .content.active .sp-content{
        display: flex;
        padding: var(--gap-20) 0;
    }
    .content--w .content.active .sp-accordion-btn::after{
        transform: rotate(90deg);
    }
}

@media screen and (max-width: 450px){
    .lineup--w{
        gap: var(--gap-20);
    }
    .lineup-cont{
        padding: var(--gap-20);
    }
    .lineup-cont p.font25{
        font-size: var(--font-20px);
    }
    .lineup-all .detail ul{
        flex-direction: column;
        gap: .5rem;
    }
    .content--w .sp-content hgroup p{
        font-size: var(--font-20px);
    }
    .lineup-all .example{
        flex-direction: column-reverse;
    }
    .lineup-all .content:has(.nutrition) a{
        width: 100%;
    }
}

/******************

* ご利用の流れ
* #flow

******************/
#flow::before{
    content: "";
    background: url(../image/nami_top.svg) no-repeat;
    background-size: 100% 100%;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 29;
}
#flow::after{
    content: "";
    background: url(../image/en-bottom.svg) no-repeat;
    aspect-ratio: 1440 / 109;
    width: 100%;
    height: auto;
    display: block;
    background-size: 100% 100%;
}
.flow--w{
    gap: var(--gap-30);
}
.flow--w h2{
    position: relative;
    align-items: center;
    z-index: 1;
}
.flow--w h2::before{
    content: "";
    background: url(../image/men_face.svg) no-repeat;
    aspect-ratio: 77 / 82;
    width: 5.5rem;
    display: block;
    height: auto;
    background-size: 100% 100%;
}
.flow--w h2::after{
    content: "";
    background: url(../image/graffiti.svg) no-repeat;
    aspect-ratio: 244 / 67;
    right: 0;
    left: 0;
    margin: 0 auto;
    display: block;
    position: absolute;
    z-index: -1;
    bottom: -.5rem;
    width: 100%;
    height: auto;
    background-size: 100% 100%;
}
.flow--w ol{
    gap: 1rem;
    position: relative;
    z-index: 1;
}
.flow--w ol::after{
    content: "";
    display: block;
    width: 100%;
    height: 7px;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: var(--green-color);
    position: absolute;
    z-index: -1;
}
.flow--w li{
    border-radius: var(--radius-20);
    flex: 1;
    align-items: stretch;
    padding: var(--gap-20);
    gap: var(--gap-10);
}
.flow--w li h3{
    text-align: center;
}
.flow--w li .heading{
    align-items: center;
}
.flow--w li .heading::after{
    content: "";
    display: block;
    aspect-ratio: 1 / 1;
    width: 5rem;
    height: auto;
}
.flow--w li:nth-of-type(1) .heading::after{
    background: url(../image/flow01.svg) no-repeat;
    background-size: 100% 100%;
}
.flow--w li:nth-of-type(2) .heading::after{
    background: url(../image/flow02.svg) no-repeat;
    background-size: 100% 100%;
}
.flow--w li:nth-of-type(3) .heading::after{
    background: url(../image/flow03.svg) no-repeat;
    background-size: 100% 100%;
}
.flow--w li a{
    background: var(--green-color);
    color: var(--white-color);
    border-radius: var(--radius-10);
    justify-content: space-between;
    padding: 1rem 1.5rem;
}
.flow--w li a::after{
    content: "";
    display: block;
    background: var(--white-color);
    width: .5rem;
    height: 1.5rem;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media screen and (max-width: 769px){
    #flow::before{
        margin-bottom: -2px;
    }
    #flow::after{
        margin-top: -1px;
    }
    .flow--w ol{
        flex-direction: column;
    }
    .flow--w ol::after{
        width: 15px;
        height: 100%;
        top: 0;
    }
}

@media screen and (max-width: 450px){
    .flow--w h2::before{
        width: 4rem;
    }
}

/******************

* ご利用施設様からの声
* #voice

******************/
.voice--w{
    gap: var(--gap-30);
    padding-top: var(--m-100);
    margin-top: calc(var(--m-100) * -1);
}
.voice--w .sub-txt{
    text-align: center;
    margin-top: var(--gap-10);
}
.voice--w ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-20);
}
.voice--w li{
    gap: var(--gap-20);
}
.voice--w li .bg-g{
    border-radius: var(--radius-20);
    gap: var(--gap-10);
    padding: var(--gap-20);
    height: stretch;
    position: relative;
}
.voice--w li .bg-g::after{
    content: "";
    background: var(--gray-color);
    width: 1rem;
    height: 1rem;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -1rem;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.voice--w li .flex{
    justify-content: center;
    align-items: center;
    gap: var(--gap-10);
}
.voice--w li .flex::before{
    content: "";
    display: block;
    aspect-ratio: 77 / 82;
    width: 5rem;
    height: auto;
}
.voice--w li:nth-of-type(2) .flex::before,
.voice--w li:nth-of-type(3) .flex::before,
.voice--w li:nth-of-type(6) .flex::before,
.voice--w li:nth-of-type(7) .flex::before{
    background: url(../image/men_face.svg) no-repeat;
    background-size: 100% 100%;
}
.voice--w li:nth-of-type(1) .flex::before,
.voice--w li:nth-of-type(4) .flex::before,
.voice--w li:nth-of-type(5) .flex::before,
.voice--w li:nth-of-type(8) .flex::before{
    background: url(../image/women-face.svg) no-repeat;
    background-size: 100% 100%;
}
.voice-btn{
    display: none;
}

@media screen and (max-width: 450px){
    /* .voice--w{
        padding-top: var(--m-100);
        padding-bottom: var(--m-100);
    } */
    .voice--w .sub-txt{
        font-size: var(--font-20px);
    }
    .voice--w ul{
        grid-template-columns: 1fr;
    }
    .voice--w li{
        gap: var(--gap-10);
    }

    /* SPではアコーディオン */
    .more-item{
        display: none;
    }
    .voice-list.open .more-item{
        display: block;
    }
    .voice-btn{
        background: var(--green-color);
        border-radius: var(--radius-10);
        border: none;
        color: var(--white-color);
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 1rem;
        align-items: center;
        margin: var(--gap-20) 0;
    }
    .voice-btn::after{
        content: "";
        display: block;
        width: 1.5rem;
        height: .5rem;
        background: var(--white-color);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }
    .voice-list.open ~ .voice-btn::after{
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }
}

/******************

* よくあるご質問
* #faq

******************/
#faq::before{
    content: "";
    width: 100%;
    height: auto;
    background: url(../image/nami_line.svg);
    background-repeat: repeat-x;
    display: block;
    padding: var(--m-50) 0;
    background-position: center;
}
.faq--w{
    gap: var(--gap-30);
}
.faq--w h2{
    align-items: center;
}
.faq--w h2::before{
    content: "";
    display: block;
    background: url(../image/women_faq.svg) no-repeat;
    background-size: 100% 100%;
    aspect-ratio: 118 / 106;
    width: 6rem;
    height: auto;
}
.faq--w a{
    display: inline;
    text-decoration: underline;
}
.faq--w ul{
    gap: var(--gap-10);
}
.faq--w summary{
    list-style: none;
    background: var(--bg-color);
    border-radius: var(--radius-20);
    cursor: pointer;
}
.faq--w summary::before{
    content: "Q";
    color: var(--green-color);
    font-size: var(--font-25px);
}
summary::-webkit-details-marker{
    display: none;
}
.faq--w summary span{
    align-items: center;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.faq--w summary span.flex::after{
    content: "";
    background: var(--green-color);
    width: .5rem;
    height: 1.5rem;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    display: block;
}
.faq--w summary,
.faq--w details div{
    padding: 1.5rem 2rem;
    gap: .5rem;
    align-items: center;
}
.faq--w details div::before{
    content: "A";
    font-size: var(--font-25px);
    color: var(--orange-color);
}
.faq--w details[open] span::after{
    transform: rotate(90deg);
    transition: .2s;
}

@media screen and (max-width: 769px){
    .faq--w summary span,
    .faq--w summary,
    .faq--w details div{
        gap: 1rem;
    }
}

@media screen and (max-width: 450px){
    .faq--w{
        padding-top: var(--m-100);
        padding-bottom: var(--m-100);
        gap: var(--gap-20);
    }
    .faq--w summary,
    .faq--w details div{
        padding: 1rem;
    }
}

/******************

* お問い合わせ
* #form

******************/
.form--w{
    padding-right: var(--m-250);
    padding-left: var(--m-250);
    gap: var(--gap-30);
}
#form::before{
    content: "";
    background: url(../image/nami_g.svg) no-repeat;
    background-size: 100% 100%;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 29;
    margin-bottom: -1px;
}
.form--w h2{
    position: relative;
    align-items: center;
    z-index: 1;
}
.form--w h2::before{
    content: "";
    background: url(../image/men_face.svg) no-repeat;
    display: block;
    aspect-ratio: 77 / 82;
    width: 5.5rem;
    height: auto;
    background-size: 100% 100%;
}
.form--w h2::after{
    content: "";
    background: url(../image/graffiti_g.svg) no-repeat;
    display: block;
    background-size: 100% 100%;
    aspect-ratio: 244 / 67;
    right: 0;
    left: 0;
    position: absolute;
    margin: 0 auto;
    z-index: -1;
    width: 70%;
    height: auto;
    bottom: -1.5rem;
}
.form--w .tel--w{
    background: var(--orange-color);
    width: 100%;
    text-align: center;
    padding: 1.5rem;
    border-radius: var(--radius-20);
    transition: .2s;
}
.form--w .tel--w:hover{
    transform: scale(1.05);
    opacity: 1;
}
.form--w .tel--w p,
.form--w .tel--w address{
    color: var(--white-color);
}
.form--w .tel--w address{
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.form--w p{
    text-align: center;
}
.form--w .tel--w address::before{
    content: "";
    display: block;
    background: url(../image/icon_tel_w.svg) no-repeat;
    aspect-ratio: 44 / 37;
    width: 3rem;
    height: auto;
    background-size: 100% 100%;
}
form{
    gap: var(--gap-10);
}
form a{
    display: inline;
    text-decoration: underline;
}
form .form-button--w{
    width: 50%;
    margin: 0 auto;
}
form button{
    cursor: pointer;
    background: var(--green-color);
    justify-content: space-between;
    padding: 1rem 1.5rem;
    width: 100%;
    color: var(--white-color);
    border: none;
    border-radius: var(--radius-10);
    transition: .3s;
    align-items: center;
}
form button::after{
    content: "";
    background: var(--white-color);
    width: .5rem;
    height: 1.5rem;
    display: block;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: .2s;
}
form button:hover{
    background: var(--orange-color);
}
form button:hover::after{
    transform: translateX(.5rem);
}
form input[type="text"],
form input[type="tel"],
form input[type="email"],
form textarea{
    border: none;
    padding: 1rem;
    border-radius: var(--radius-10);
    width: 100%;
}
form input[type="checkbox"]{
    transform: scale(1.3);
    margin-right: 5px;
    cursor: pointer;
}
form .form-list{
    display: flex;
    align-items: center;
}
form .form-list label{
    flex: 1;
}
form .form-list input,
form .form-list textarea{
    flex: 3;
}
form .form-list .mail--w{
    width: 100%;
    flex: 3.1;
}
form .form-list .mail--w input{
    width: 100%;
}
form .form-list textarea{
    height: 7rem;
}
form .form-txt{
    text-align: center;
    gap: .5rem;
    margin: 1rem auto;
}
form .form-list:has(textarea){
    align-items: start;
}
form input::placeholder,
form textarea::placeholder{
    color: #B4B4B4;
}
#emailMessage{
    color: var(--orange-color);
    text-align: left;
}

@media screen and (max-width: 769px){
    #form::before{
        margin-bottom: -1px;
    }
    form .form-list{
        flex-direction: column;
        gap: 1rem;
        align-items: start;
    }
    form .form-list input,
    form .form-list textarea{
        flex: auto;
    }
    form .form-list textarea{
        height: 8rem;
    }
}

@media screen and (max-width: 450px){
    .form--w{
        padding-top: var(--m-100);
        gap: var(--gap-20);
    }
    .form--w h2::before{
        width: 4rem;
    }
}

@media screen and (max-width: 400px){
    .form--w .tel--w address::before{
        width: 2rem;
    }
}

/******************

* footer

******************/
footer .copy--w{
    background: #E60312;
    text-align: center;
    padding: 1rem 0;
}
footer .copy--w small{
    color: var(--white-color);
}
footer ul li div{
    color: var(--white-color);
    background: var(--orange-color);
    border-radius: var(--radius-10);
    padding: .5rem;
    width: fit-content;
    margin-bottom: .5rem;
}
footer .footer--w{
    gap: var(--gap-30);
}
footer .office--w ul{
    justify-content: space-between;
}
footer .img--w{
    width: fit-content;
    gap: .5rem;
    margin-bottom: .5rem;
}
footer .img--w a{
    width: 35%;
}
footer .img--w .kitchen-logo{
    aspect-ratio: 139 / 17;
    width: 30%;
    height: auto;
    object-fit: contain;
}

@media screen and (max-width: 769px){
    footer .office--w ul{
        flex-direction: column;
        align-items: center;
        gap: var(--gap-10);
    }
    footer .office--w ul li{
        width: fit-content;
    }
    footer .office--w ul li div,
    footer .office--w ul li address{
        text-align: center;
        margin: 0 auto;
    }
    footer .office--w ul li div{
        margin-bottom: .5rem;
    }
    footer .img--w{
        justify-content: center;
    }
    footer p.font14{
        text-align: center;
    }
}

@media screen and (max-width: 450px){
    footer .footer--w{
        gap: var(--gap-20);
        padding-top: var(--m-100);
        padding-bottom: var(--m-100);
    }
    footer .img--w{
        margin: 0 auto .5rem;
        flex-direction: column;
        align-items: center;
    }
    footer .img--w a,
    footer .img--w .kitchen-logo{
        width: 60%;
    }
}

/******************

* 全体のページ内リンク位置調整

******************/
@media screen and (max-width: 769px){
    [id]{
        scroll-margin-top: 50px;
    }
}

/******************

* thanks
* #thanks

******************/
.thanks--w p{
    text-align: center;
}
.thanks--w .txt--w{
    gap: var(--gap-20);
}