@charset "UTF-8";

/*
    @media (width < 896px) { ... }
*/

#marche,
#marche *,
#marche *:before,
#marche *:after { margin:0px; padding:0px; box-sizing:border-box;}

#content {
    --gray:#B5B5B5;
    --beige:#F8E9CF;
    --pink:#F29C9A;
    --red:#E33C0B;
    --yellow:#F4D174;
    --green:#849B5D;
    --blue:#1488B6;
    --brown:#70421F;
    --black:#000000;

    --noto:"Noto Sans JP", sans-serif;
    --zenmaru:"Zen Maru Gothic", sans-serif;

    --radius:15px;
    /* viewport:375-896px  5-10px */
    --bw:clamp(0.5rem, calc(0.14rem + 0.96vw), 1rem);

    background-color:var(--beige)!important;
}

#marche {
    font-size:16px;

    & a { text-decoration:none;}
    & a[href^="tel"] { color:inherit; pointer-events:none;}
    & img { max-width:100%; height:auto; vertical-align:bottom;}
    & :is(ol, ul) { list-style:none;}
    & h2 { background:transparent;}
    & h3 { border:none;}

    & .caution { margin-top:1lh; padding-left:1em; text-indent:-1em; font-size:14px;}
    & .caution:before { content:"※";}


    & .sec-snippet-h3 { display:contents;}
}

@media (width < 896px){
    #marche {

        & a[href^="tel"] { pointer-events:auto;}
        & .caution { margin-top:0.5lh;}
    }
}

/* ----- .fv ----- */
#marche .fv {

    & img { width:100%;}
}


/* ----- .intro ----- */
#marche .intro {
    display:flex;
    flex-direction:column;
    align-items:center;
    /* viewport:375-896px  45-60px */
    margin-top:clamp(4.5rem, calc(3.42rem + 2.879vw), 6rem);
    /* viewport:375-896px  16-43px */
    padding:clamp(1.6rem, calc(-0.343rem + 5.182vw), 4.3rem);
    border:solid var(--bw) var(--yellow);
    border-radius:var(--radius);
    background-color:#fff;
    font-family:var(--zenmaru);
    font-weight:bold;

    & p {
        margin-top:0.8333em;;
        /* viewport:375-896px  16-24px */
        font-size:clamp(1.6rem, calc(1.024rem + 1.536vw), 2.4rem);
        color:var(--brown);
        text-align:center;
    }
    & ul {
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        /* viewport:375-896px  20-28.5px */
        gap:clamp(2rem, calc(1.388rem + 1.631vw), 2.85rem) 70px;
        /* viewport:375-896px  30-40px */
        margin-top:clamp(3rem, calc(2.28rem + 1.919vw), 4rem);
    }
    & li {
        padding-bottom:11.5px;
        flex-basis:min(440px, 100%);
        /* viewport:375-896px  15-23px */
        font-size:clamp(1.5rem, calc(0.924rem + 1.536vw), 2.3rem);
        color:var(--red);
        background:linear-gradient(to right, var(--gray) 3px, transparent 3px, transparent 8px) repeat-x left bottom / 8px 2px;
    }
}
@media (width < 896px) {
    #marche .intro {

        & p { word-break:keep-all;}
    }
}

/* ----- .conpany ----- */
#marche .conpany {
    --theme:var(--black);

    counter-reset:num 0;
    /* viewport:375-896px  56.5-113px */
    margin-top:clamp(5.65rem, calc(1.583rem + 10.845vw), 11.3rem);

    & .c_block {
        /* viewport:375-896px  16-40px */
        --p:clamp(1.6rem, calc(-0.127rem + 4.607vw), 4rem);

        position:relative;
        padding:var(--p);
        background-color:#fff;
        border-radius:var(--radius);

        &:not(.food):before,
        &:not(.food):after {
            content:"";
            position:absolute;
            display:block;
            /* viewport:375-896px  65-130px */
            width:clamp(6.5rem, calc(1.821rem + 12.476vw), 13rem);
            height:auto;
            aspect-ratio:130/85;
            background:url(/-/media/Project/Dmc%20Tenants/DD%20Tenant/kochi/custom-lp/img/marche/decor.png) no-repeat center / contain;
            inset-block:0 auto;
        }
        &:not(.food):before { inset-inline:0 auto;}
        &:not(.food):after { inset-inline:auto 0; scale:-1 1;}
    }
    & .c_block + .c_block {
        /* viewport:375-896px  32-50px */
        margin-top:clamp(3.2rem, calc(1.904rem + 3.455vw), 5rem);
    }

    & .food   { --theme:var(--red);}
    & .nibako { --theme:var(--blue);}
    & .ft     { --theme:var(--green);}
    & .ws     { --theme:var(--pink);}

    & h4 {
        display:grid;
        grid-template-columns:1fr auto 1fr;
        /* viewport:375-896px  10-30px */
        gap:clamp(1rem, calc(-0.44rem + 3.839vw), 3rem);
        width:65%;
        margin-inline:auto;
        color:var(--theme);
        font-family:var(--zenmaru);
        /* viewport:375-896px  20-30px */
        font-size:clamp(2rem, calc(1.28rem + 1.919vw), 3rem);
        font-weight:bold;

        &:before,
        &:after {
            content:"";
            display:block;
            background-image:radial-gradient(circle, var(--theme) 2.5px, transparent 2.5px);
            background-repeat:repeat-x;
            background-size:15px 5px;
        }
        &:before { background-position:right center;}
        &:after { background-position:left center;}
    }
    & ul {
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        /* viewport:375-896px  14-40px */
        gap:clamp(1.4rem, calc(-0.471rem + 4.99vw), 4rem);
        margin-top:34px;
    }
    & li:not([class]) {
        position:relative;
        counter-increment:num;
        text-align:center;

        &:before {
            content:counter(num);
            position:absolute;
            display:grid;
            place-items:center;
            /* viewport:375-896px  24.5-40px */
            width:clamp(2.45rem, calc(1.334rem + 2.975vw), 4rem);
            height:auto;
            aspect-ratio:1;
            background-color:var(--theme);
            color:#fff;
            font-family:var(--zenmaru);
            /* viewport:375-896px  14-20px */
            font-size:clamp(1.4rem, calc(0.968rem + 1.152vw), 2rem);
            font-weight:bold;
            line-height:1;
            inset:0 auto auto 0;
            pointer-events:none;
            z-index:11;
        }
        & figure {
            display:block;
            padding:0.5em 0.5em 0;
            color:#fff;
            font-family:var(--zenmaru);
            /* viewport:375-896px  16-20px */
            font-size:clamp(1.6rem, calc(1.312rem + 0.768vw), 2rem);
            font-weight:bold;
            background-color:var(--theme);
        }
        & figcaption {
            display:flex;
            justify-content:center;
            align-items:center;
            /* viewport:375-896px  4-8px */
            gap:clamp(0.4rem, calc(0.112rem + 0.768vw), 0.8rem);
            /* viewport:375-896px  6-13px */
            padding-block:clamp(0.6rem, calc(0.096rem + 1.344vw), 1.3rem);
        }
        & a figcaption:before {
            content:"";
            display:block;
            flex-shrink:0;
            /* viewport:375-896px  16-19px */
            width:clamp(1.6rem, calc(1.384rem + 0.576vw), 1.9rem);
            height:auto;
            aspect-ratio:1;
            background:url(/-/media/Project/Dmc%20Tenants/DD%20Tenant/kochi/custom-lp/img/marche/icon_insta.svg) no-repeat center / contain;
        }
        & > img { border:solid var(--bw) var(--theme); box-sizing:content-box;}
        & p {
            margin-top:10px;
            /* viewport:375-896px  14-16px */
            font-size:clamp(1.4rem, calc(1.256rem + 0.384vw), 1.6rem);
        }
    }

    /* food */
    & .food {
        /* viewport:375-896px  90-118px */
        --pt:clamp(9rem, calc(6.985rem + 5.374vw), 11.8rem);

        padding-top:var(--pt);

        &:before,
        &:after {
            content:"";
            position:absolute;
            display:block;
            height:auto;
            background:url() no-repeat center / contain;
            z-index:11;
        }
        &:before {
            width:min(184px, 30%);
            aspect-ratio:184/74;
            background-image:url(/-/media/Project/Dmc%20Tenants/DD%20Tenant/kochi/custom-lp/img/marche/food_ill1.png);
            inset:40px calc(50% + 251px) auto auto;
        }
        &:after {
            width:min(134.5px, 20%);
            aspect-ratio:134.5/92.5;
            background-image:url(/-/media/Project/Dmc%20Tenants/DD%20Tenant/kochi/custom-lp/img/marche/food_ill2.png);
            inset:30px auto auto calc(50% + 245.5px);
        }
        & h3 { position:absolute; inset:0 auto auto 50%; width:min(420px, 100%); translate:-50% -50%;}
        & .ill {
            display:grid;
            grid-template-columns:subgrid;
            grid-column:span 2;
            direction:rtl;

            & img { justify-self:center; align-self:center; width:224px;}
        }
    }
    /* nibako */
    & .nibako {

        & li { display:grid; grid-template-rows:subgrid; grid-row:span 2; gap:0;}
        & .ext {

            & a {
                display:flex;
                flex-direction:column;
                align-items:center;
                justify-content:center;
                /* viewport:375-896px  10-30px */
                gap:clamp(1rem, calc(-0.44rem + 3.839vw), 3rem);
                border:solid var(--bw) var(--theme);
                background-color:#fff;
            }
            & img { width:224px;}
            & div {
                color:#fff;
                /* viewport:375-896px  6-10px */
                padding-block:clamp(0.6rem, calc(0.312rem + 0.768vw), 1rem);
                /* viewport:375-896px  18-20px */
                padding-inline:clamp(1.8rem, calc(1.656rem + 0.384vw), 2rem);
                background-color:var(--theme);
                border-radius:100vmax;
                /* viewport:375-896px  12-16px */
                font-size:clamp(1.2rem, calc(0.912rem + 0.768vw), 1.6rem);
            }
        }
    }
    /* .ft（キッチンカー） */
    .ft {
        
        & .ill { text-align:center;}
        & .ill img { width:248px;}
    }
    /* .ws（ワークショップ） */
    .ws {

        & li { display:grid; grid-template-rows:subgrid; grid-row:span 2; gap:0;}
        & .ill { grid-column:span 2;}
        & .ill img { justify-self:center; align-self:end; width:394px;}
    }
}
@media (any-hover:hover) {
    #marche :is(.conpany, .others) a:hover { filter:brightness(0.9);}
}
@media (width < 896px){
    #marche .conpany {

        & h4 { width:100%;}
        & ul { grid-template-columns:repeat(2, 1fr);}
        & li:not([class]) {

            & img { width:100%;}
            &:not(:has(figure)) { display:block;}
            & > img { box-sizing:border-box;}
        }

        /* .food */
        & .food {

            &:before { inset:auto auto calc(100% - var(--pt)) var(--p);}
            &:after { inset:auto var(--p) calc(100% - var(--pt)) auto;}
            & h3 { width:min(420px, 75%);}
            & .ill { grid-column:span 1;}
            & .ill img { width:75%;}
        }

        /* .nibako */
        & .nibako {

            & .ext {
                grid-row:span 1;
                grid-column:span 2;
            
                & a { width:60%; margin-inline:auto; padding-block:0.5em;}
                & img { width:75%;}
                & div { margin-inline:1em; text-align:center;}
            }
        }

        /* .ft */
        & .ft .ill img { width:75%;}

        /* .ws */
        & .ws {

            & .ill { grid-row:span 1;}
            & .ill img { width:60%;}
        }
    }
}

/* ----- .others ----- */
#marche .others {
    display:grid;
    grid-template:
        "o1 o1" auto
        "o2 o3" auto / 1fr 1fr;
    /* viewport:375-896px  16-50px */
    row-gap:clamp(1.6rem, calc(-0.847rem + 6.526vw), 5rem);
    /* viewport:375-896px  16-38px */
    column-gap:clamp(1.6rem, calc(0.017rem + 4.223vw), 3.8rem);
    /* viewport:375-896px  37.5-50px */
    margin-top:clamp(3.75rem, calc(2.85rem + 2.399vw), 5rem);

    & :is(.o2, .o3) {
        /* viewport:375-896px  12-24.5px */
        padding-top:clamp(1.2rem, calc(0.3rem + 2.399vw), 2.45rem);
        /* viewport:375-896px  10-21px */
        padding-bottom:clamp(1rem, calc(0.208rem + 2.111vw), 2.1rem);
        text-align:center;
    }
    & .o2 {
        grid-area:o2;
        /* viewport:375-896px 15-30px */
        padding-inline:clamp(1.5rem, calc(0.42rem + 2.879vw), 3rem);
    }
    & .o3 {
        grid-area:o3;
        /* viewport:375-896px  23-46px */
        padding-inline:clamp(2.3rem, calc(0.645rem + 4.415vw), 4.6rem);
    }

    & .other_block { background-color:#fff; border-radius:var(--radius);}

    /* .o1 */
    & .o1 {
        position:relative;
        grid-area:o1;

        /* viewport:375-896px  25-50px */
        padding-top:clamp(2.5rem, calc(0.701rem + 4.798vw), 5rem);
        /* viewport:375-896px  16-57.5px */
        padding-left:clamp(1.6rem, calc(-1.387rem + 7.965vw), 5.75rem);
        /* viewport:375-896px  16-70px */
        padding-right:clamp(1.6rem, calc(-2.287rem + 10.365vw), 7rem);
        /* viewport:375-896px  17.5-35px */
        padding-bottom:clamp(1.75rem, calc(0.49rem + 3.359vw), 3.5rem);

        & .t {
            position:absolute;
            inset:0 auto auto 0;
            border-radius:var(--radius) 0 var(--radius) 0;
            overflow:clip;
            width:273px;
        }
        & .marche_wrap {
            /* viewport:375-896px  24-47px */
            --lr-width:clamp(2.4rem, calc(0.745rem + 4.415vw), 4.7rem);

            display:grid;
            grid-template-columns:var(--lr-width) 1fr var(--lr-width);
            align-items:end;
            /* viewport:375-896px  16-42.5px */
            gap:clamp(1.6rem, calc(-0.307rem + 5.086vw), 4.25rem);
        }
    }
}
@media (width < 896px){
    #marche .others {
        grid-template:
            "o1" auto
            "o2" auto
            "o3" auto / 1fr;

        & .o1 {

            & .t { width:max(7em, 25%);}
        }
    }
}

/* ----- .access ----- */
#marche .access {
    position:relative;
    /* viewport:375-896px  60-120px */
    margin-top:clamp(6rem, calc(1.681rem + 11.516vw), 12rem);

    & h3 { position:absolute; inset:0 auto auto 50%; translate:-50% -50%;}
    & iframe { width:1128px; border-radius:var(--radius);}
}
@media (width < 896px){
    #marche .access {

        & h3 { width:min(600px, 75%);}
        & iframe { width:100%; height:auto; aspect-ratio:4/3;}
    }
}

/* ----- .contact ----- */
#marche .contact {
    display:flex;
    flex-direction:column;
    align-items:center;
    /* viewport:375-896px  20-30px */
    gap:clamp(2rem, calc(1.28rem + 1.919vw), 3rem);
    width:min(585px, 100%);
    /* viewport:375-896px  34-66.5px */
    margin:clamp(3.4rem, calc(1.061rem + 6.238vw), 6.65rem) auto;
    font-family:var(--zenmaru);

    & h3 {
        padding:0.5em 2em;
        background-color:var(--red);
        border-radius:100vmax;
        /* viewport:375-896px  20-26px */
        font-size:clamp(2rem, calc(1.568rem + 1.152vw), 2.6rem);
        font-weight:bold;
        color:#fff;
    }
    & div {
        text-align:center;
        font-weight:bold;
        /* viewport:375-896px  18-26px */
        font-size:clamp(1.8rem, calc(1.224rem + 1.536vw), 2.6rem);
        line-height:1.75;
    }
    & small {
        display:block;
        /* viewport:375-896px  14-20px */
        font-size:clamp(1.4rem, calc(0.968rem + 1.152vw), 2rem);
    }
    & hr {
        width:100%;
        height:6px;
        background:radial-gradient(circle, var(--pink) 2.5px, transparent 2.5px) repeat-x center / 15px 5px;
        border:none;
    }
    & address {
        margin-top:calc((1lh - 1em) / -2);
        /* viewport:375-896px  16-20px */
        font-size:clamp(1.6rem, calc(1.312rem + 0.768vw), 2rem);
        font-style:normal;
        text-align:center;
        line-height:2;
    }
}
@media (width < 896px){
    #marche .contact {

    }
}