/* 768-1024-1920 */
:root {
    --zen-antique:"Zen Kaku Gothic Antique", sans-serif;
    --zen-gothic:"Zen Kaku Gothic New", sans-serif;

    --sky:#4AF1FF;
    --blue:#18A6AC;
    --blue-dark:#064192;
    --blue-deep:#002250;
    --yellow:#FFFF48;
    --yellow-dark:#FFF003;
    --orange:#FD6F23;
    --orange-dark:#B94100;
    --beige:#EEEBE2;
    --gray:#707070;
    --black:#000;
    --white:#fff;

    --trans:0.5s ease;
}
html {
    scroll-behavior:smooth;
    font-size:16px;
    font-weight:500;
    font-family:var(--zen-gothic);
    line-height:1.8;
}
body {
    position:relative;
    background-image:url(/lp/kurashifair/2025w/image/pc_back.jpg);
    background:image-set(
        url(/lp/kurashifair/2025w/image/pc_back@2x.webp) 2x type("image/webp"),
        url(/lp/kurashifair/2025w/image/pc_back.webp) 1x type("image/webp"),
        url(/lp/kurashifair/2025w/image/pc_back@2x.jpg) 2x,
        url(/lp/kurashifair/2025w/image/pc_back.jpg) 1x
    ) no-repeat center / cover;
    background-attachment:fixed;
    z-index:0;
}
*,*:before,*:after { margin:0px; padding:0px;}
:is(ul, ol) { list-style:none;}
img { max-width:100%; height:auto; vertical-align:bottom;}
a { text-decoration:none;}
a[href^="tel"] { pointer-events:none;}
a:is(:link, :visited) { color:currentColor;}

@media(any-hover:hover) {
    a:not(:has(img)):hover { opacity:0.75;}
    a:hover img { filter:brightness(1.05);}
}
@media(any-hover:none) {
    a:not(:has(img)):active { opacity:0.75;}
    a:active img { opacity:0.75;}
}

@media (width < 768px) {
    body { background-image:none;}
    a[href^="tel"] { pointer-events:auto;}
}


@media (767px < width) {
    .pc { display:inherit;}
    .sp { display:none!important;}
}
@media (width < 768px) {
    .pc { display:none!important;}
    .sp { display:inherit;}
}




.acd {
    --padding-block:1.375em;
    --padding-inline:1.5em;
    --radius:12px;

    width:var(--container-width);
    margin:20px auto 0;
    border-radius:var(--radius);
    background-color:var(--white);

    & dt {
        position:relative;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        align-items:start;
        gap:12px;
        padding:var(--padding-block) var(--padding-inline);
        background-color:var(--white);
        border-radius:var(--radius);
        line-height:1.2;
        cursor:pointer;
    }
    & dt:before {
        --w:3px;

        content:"";
        position:absolute;
        display:block;
        width:30px;
        aspect-ratio:60/28.5;
        background-color:#000;
        clip-path:polygon(
            0 0,
            50% calc(100% - var(--w)),
            100% 0,
            100% var(--w),
            50% 100%,
            0 var(--w)
        );
        inset:var(--padding-block) var(--padding-inline) auto auto;
        transition:clip-path var(--trans);
    }
    & dd {
        position:relative;
        padding:0 var(--padding-inline);
        color:#000;
        font-size:14px;

        display:grid;
        grid-template-rows:0fr;
        opacity:0;
        visibility:hidden;
        transition:all var(--trans);
        z-index:1;
    }
    & dd:before {
        content:"";
        position:absolute;
        display:block;
        width:calc(100% - var(--padding-inline) * 2);
        inset:0 auto auto var(--padding-inline);
        height:1px;
        background-color:transparent;
        transition:background-color var(--trans);
    }
    & dd > div { overflow:hidden;}
    & strong { font-size:16px;}
    & small { font-size:14px; color:var(--mc-red);}
    & p { margin-top:1em; font-size:1rem; line-height:1.875; text-align:center;}
    & .acd_img img { width:100%; border-radius:20px 0 20px 0;}
    & .acd_list {
        position:relative;
        margin-top:50px;
        padding:2.25em 1em;
        border:solid 1px currentColor;
        border-radius:20px;
    }
    & .acd_list:before {
        content:"メリット";
        position:absolute;
        inset:auto auto 100% 0px;
        translate:0 50%;
        display:block;
        width:fit-content;
        padding-inline:0.25em;
        font-size:1.125rem;
        font-weight:bold;
        background-color:#fff;
        border:inherit;
    }
    & .acd_list li { padding-left:1em; text-indent:-1em; font-size:0.75rem; line-height:2;}
    & .acd_list li:before { content:"・";}
}
/* active */
.acd.active {

    & dt:before {
        clip-path:polygon(
            0 0,
            50% 0,
            100% 0,
            100% var(--w),
            50% var(--w),
            0 var(--w)
        );
    }
    & dd {
        grid-template-rows:1fr;
        padding-block:var(--padding-block);
        opacity:1;
        visibility:visible;
    }
    & dd:before { background-color:currentColor;}
}



/* ==================================================
    header
================================================== */
header {
    position:fixed;
    /* viewport:1200-1920px  50-200px */
    inset:auto auto 4.8148vh clamp(3.125rem, calc(-12.5rem + 20.833vw), 12.5rem);
    border:solid 4px var(--black);
    border-radius:20px;
    background-color:var(--white);

    & ul { padding:min(50px, 4.6296vh); font-size:20px;}
    & li + li { margin-top:1em;}
}
.sp_btn { display:none;}

@media (height < 800px){
    header {

        & ul {
            /* viewport(height):375-800px  16-18px */
            font-size:clamp(1rem, calc(0.89rem + 0.471vh), 1.125rem);
        }
        & li + li {
            /* viewport(height):375-800px  12-18px */
            margin-top:clamp(0.75rem, calc(0.419rem + 1.412vh), 1.125rem);
        }
    }
} 
@media (width < 1200px){
    header {
        inset:calc(1.5em + 50px) 0% auto auto;
        translate:100% 0;
        z-index:3;
        transition:translate var(--trans);

        & ul { font-size:18px;}
    }
    .sp_btn {
        position:fixed;
        inset:1em 1em auto auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:5px;
        width:50px;
        height:50px;
        padding:9px 5px;
        cursor:pointer;
        color:var(--white);
        font-size:13px;
        background-color:var(--black);
        border-radius:3px;
        border:none;
        z-index:2;

        & span {
            --rotate:8.5deg;

            justify-self:start;
            width:100%;
            height:1px;
            background-color:currentColor;
            transform-origin:center left;
            transition:rotate var(--trans);
        }
        & .t {
            justify-self:end;
            display:grid;
            grid-template:"p" 1fr / 1fr;
            place-items:center;
        }
        & .t p { grid-area:p; text-align:center; transition:color var(--trans);}
        & .t p:nth-of-type(1) { color:currentColor;}
        & .t p:nth-of-type(2) { color:transparent;}
    }
    .sp_btn.active {
        & span:nth-of-type(1) { rotate:var(--rotate);}
        & span:nth-of-type(2) { rotate:calc(var(--rotate) * -1);}
        & .t p:nth-of-type(1) { color:transparent;}
        & .t p:nth-of-type(2) { color:currentColor;}
    }
    .sp_btn.active + header { translate:1.5em 0;}
}
@media (width < 768px){
    header {
        & ul {
            padding-bottom:140px;
            font-size:16px;
            background-image:url(/lp/kurashifair/2025w/image/footer/kurashifair_v2.png);
            background:image-set(
                url(/lp/kurashifair/2025w/image/footer/kurashifair@2x.webp) 2x type("image/webp"),
                url(/lp/kurashifair/2025w/image/footer/kurashifair.webp) 1x type("image/webp"),
                url(/lp/kurashifair/2025w/image/footer/kurashifair@2x.png) 2x,
                url(/lp/kurashifair/2025w/image/footer/kurashifair.png) 1x
            ) no-repeat right 30px bottom 0px / 144px auto;
        }
    }
    .sp_btn.active + header { translate:1em 0;}
}



/* ==================================================
    next
================================================== */
.next {
    padding:75px var(--container-gap) 45px;
    background-color:var(--blue);
    color:var(--white);

    & p { font-size:14px; text-align:center;}
    & .flexs { width:fit-content; margin:73px auto 0;}
    & .flex {
        display:flex;
        align-items:baseline;
        font-size:4.6153cqw;
        font-weight:900;

        & span {
            align-self:center;
            display:grid;
            place-items:center;
            width:4em;
            height:4em;
            font-size:0.6666em;
            border:solid 1px;
            border-radius:100%;
        }
        &.tokyo span { background-color:var(--black); border-color:var(--white); margin-right:9px;}
        &.osaka span { background-color:var(--white); border-color:var(--black); color:var(--black);}
        & .day { font-size:1.5555em;}
        & .day small { margin-inline:4px 7px; font-size:0.4642em;}
    }
    & .flex + .flex { margin-top:6px;}
    & .movie {
        margin:30px auto 0;
        width:var(--content-width);

        & figcaption { margin-bottom:10px; font-size:13px; font-weight:900; text-align:center;}
        & iframe { width:100%; height:auto; aspect-ratio:16/9;}
    }
    & .link {
        margin-top:30px;

        & small {
            display:block;
            margin-bottom:10px;
            font-size:2cqw;
            font-weight:bold;
            text-align-last:justify;
        }
        & img { width:100%;}
    }

}




/* ==================================================
    footer
================================================== */
footer {
    padding-block:50px 53.5px;
    background-color:var(--white);
    text-align:center;

    & img { width:100%;}
    & a { display:block;}
    & .kurashifair { margin-inline:auto; width:87%;}
    & .logo { width:76.5%; margin:18.5px auto 0;}
    & p { width:var(--container-width); margin:14px auto 0; font-size:12px; line-height:2;}
    & .privacy { width:fit-content; margin:43.5px auto 0;}
    & .copy { margin-top:29px;}
}
@media (width < 768px){
    footer {
        padding-block-end:100px;
    }
    #top footer {
        padding-block-end:200px;
    }
}






/* ==================================================
    fixed
================================================== */
.fixed {
    position:fixed;

    &.f1 {
        width:auto;
        height:min(463px, 42.8703vh);
        aspect-ratio:1;
        /* viewport:1200-1920px  50-200px */
        inset:4.1666vh auto auto clamp(3.125rem, calc(-12.5rem + 20.833vw), 12.5rem);
        pointer-events:none;
    }
    &.f2 {
        /* viewport:1200-1920px  165-220px */
        width:clamp(10.313rem, calc(4.583rem + 7.639vw), 13.75rem);
        inset:6.1111vh min(167px, 8.6979vw) auto auto;
        /* viewport:1200-1920px  5-167px */
        inset:6.1111vh clamp(0.313rem, calc(-16.562rem + 22.5vw), 10.438rem) auto auto;
        z-index:0;
    }
    &.f2:before {
        content:"";
        position:absolute;
        display:block;
        width:30%;
        height:auto;
        aspect-ratio:67.29/105.4;
        background-image:url(/lp/kurashifair/2025w/image/fixed/f2_a.png);
        background:image-set(
            url(/lp/kurashifair/2025w/image/fixed/f2_a@2x.webp) 2x type("image/webp"),
            url(/lp/kurashifair/2025w/image/fixed/f2_a.webp) 1x type("image/webp"),
            url(/lp/kurashifair/2025w/image/fixed/f2_a@2x.png) 2x,
            url(/lp/kurashifair/2025w/image/fixed/f2_a.png) 1x
        ) no-repeat center / contain;
        inset:37.7272% 80.4545% auto auto;
        pointer-events:none;
        z-index:1;
    }
    &.f3 {
        /* viewport:1200-1920px  5-170px */
        inset:auto clamp(0.313rem, calc(-16.875rem + 22.917vw), 10.625rem) 4.8148vh auto;
        /* viewport:1200-1920px  165-220px */
        width:clamp(10.313rem, calc(4.583rem + 7.639vw), 13.75rem);
        height:auto;
        aspect-ratio:1;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:space-evenly;
        background-color:var(--white);
        border-radius:30px;
        border:solid 1px var(--gray);
        text-align:center;
    }
    &.f3 a { display:block; width:54.5454%;}
}
@media (height < 800px){
    .fixed {

        &.f1 { width:min(673px, 35.0520vw);}
    }
}
@media (width < 1200px) {
    .fixed {
        &.f1 {
            /* viewport:768-1200px  300-390px */
            width:clamp(18.75rem, calc(8.75rem + 20.833vw), 24.375rem);
            height:auto;
        }
        &.f2 { inset:auto auto 6.1111vh 50px;}
        &.f3 { display:none; pointer-events:none;}
    }
}
@media (width < 768px){
    .fixed {
        &:is(.f1, .f3) { display:none; pointer-events:none;}
        &.f2 {
            width:100%;
            padding:10px 5% 20px;
            background-color:var(--orange-dark);
            inset:auto auto 0 0;
            transform:unset!important;
            z-index:2;

            &:before { content:none; background-image:none;}
            & p {
                --rotate:20deg;
                display:grid;
                grid-template-columns:1fr auto 1fr;
                gap:2rem;
                color:#fff;
                font-size:18px;
                letter-spacing:0.1em;

                &:before, &:after { content:""; width:1px; height:1lh; background-color:currentColor;}
                &:before { justify-self:end; rotate:calc(var(--rotate) * -1);}
                &:after { justify-self:start; rotate:var(--rotate);}
            }
            & .links {
                --gap:0.5em;
                --shadowRange-x:4px;
                --shadowRange-y:3px;

                display:flex;
                gap:var(--gap);
                margin-top:1rem;
                
                & a {
                    display:block;
                    width:calc((100% - var(--shadowRange-x) * 2 - var(--gap)) / 2);
                    border:solid 2px currentColor;
                    border-radius:100vmax;
                    font-size:18px;
                    line-height:1.625;
                    letter-spacing:0.1em;
                    text-align:center;
                    filter:drop-shadow(var(--shadowRange-x) var(--shadowRange-y) 0px #000);
                    transition:
                        filter var(--trans),
                        translate var(--trans);
                    animation:links_rotate 3s ease-in-out infinite;

                    &:focus {
                        translate:calc(var(--shadowRange-x) - 1px) calc(var(--shadowRange-y) - 1px);
                        filter:drop-shadow(1px 1px 0px #000);
                        animation-play-state:paused;
                    }
                    @media (any-hover:hover) {
                        &:hover {
                            translate:calc(var(--shadowRange-x) - 1px) calc(var(--shadowRange-y) - 1px);
                            filter:drop-shadow(1px 1px 0px #000);
                            animation-play-state:paused;
                        }
                    }
                    @media (any-hover:none){
                        &:active {
                            translate:calc(var(--shadowRange-x) - 1px) calc(var(--shadowRange-y) - 1px);
                            filter:drop-shadow(1px 1px 0px #000);
                            animation-play-state:paused;
                        }
                    }
                }
                & a.tokyo { background-color:var(--sky); border-color:#fff;}
                & a.osaka { background-color:var(--yellow-dark);}
                & a.disable { pointer-events:none; animation:none; background-color:color-mix(in sRGB, var(--gray), #fff);}
                & a.disable small { font-size:0.75em; letter-spacing:0;}
            }
        }
    }
}
@keyframes links_rotate {
    0%, 100% { rotate:-2.5deg;}
    50% { rotate:2.5deg;}
}



/* ==================================================
    main
================================================== */
main {
    --container-gap:7.5cqw;
    --content-gap:12.5cqw;
    --container-width:85cqw;
    --content-width:75cqw;

    container:main / inline-size;
    width:min(390px, 100vw);
    min-height:100vh;
    /* viewport:1200-1920px  200-490px */
    margin-inline:auto clamp(12.5rem, calc(-17.708rem + 40.278vw), 30.625rem);
    background-color:var(--beige);

    & section { width:100%;}
}
@media (width < 1200px) {
    main {
        margin-inline-end:0px;
        overflow-x:clip;
    }
}
@media (width < 768px){
    main { width:100%;}
}


/* ==================================================
    #fv
================================================== */
.fv {
    position:relative;

    & h1 img { width:100%;}
    & > p { position:absolute; inset:50px auto auto var(--container-gap);}
    & .line {
        display:flex;
        align-items:end;
        justify-content:space-between;
        width:var(--content-width);
        margin:0px auto auto;
        text-align:center;
        font-size:15px;
        font-weight:bold;
    }
    & .line:before, .line:after {
        content:"";
        display:block;
        width:19.5px;
        height:auto;
        aspect-ratio:19.5/75.5;
        background:url(/lp/kurashifair/2025w/image/fv/line.svg) no-repeat center / contain;
    }
    & .line:after { scale:-1 1;}
    & .info {
        --radius:20px;

        width:var(--container-width);
        margin:20px auto auto;
    }
    & .info_block {
        display:grid;
        grid-template:
            "c d" auto
            "c a" auto
            "c b" 1fr / auto auto;
        justify-content:center;
        gap:10px;
        padding:15px;

        &.tokyo {
            align-items:start;
            background-color:var(--sky);
            border-radius:var(--radius) var(--radius) 0 0;
        }
        &.osaka {
            align-items:end;
            padding-block:1rem 2.5rem;
            background-color:var(--yellow-dark);
            border-radius:0 0 var(--radius) var(--radius);
        }

        & .circle   { grid-area:c;}
        & .day      { grid-area:d;}
        & .area     { grid-area:a;}
        & a         { grid-area:b;}

        & a {
            position:relative;
            font-size:10px;
            text-align:center;
            border-radius:100vmax;
        }
        & a:after {
            content:"";
            position:absolute;
            display:block;
            width:1.1em;
            height:auto;
            aspect-ratio:11/6;
            background-color:currentColor;
            clip-path:polygon(0 0, 100% 0, 50% 100%);
            inset:50% 1em auto auto;
            translate:0 -50%;
        }
        &.tokyo a { color:var(--black); background-color:var(--white);}
        &.osaka a { color:var(--white); background-color:var(--black);}
    }
}
@media (width < 768px){
    .fv {
        & .line { font-size:14px;}
        & .line:before, .line:after { width:17px;}
    }
}



/* ==================================================
    #about
================================================== */
.about {
    padding-bottom:50px;

    & .swiper-wrapper { transition-timing-function:linear;}
    & .swiper-slide { width:fit-content;}
    & .s1 { margin-top:34px;}
    & .s2 { margin-top:27px;}
    & h2 {
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:10px;
        width:310px;
        margin:38px auto 0;
        font-size:18px;
        font-weight:bold;
        text-align:center;

        &:before, &:after {
            content:"";
            display:block;
            width:100%;
            height:7px;
            background:url(/lp/kurashifair/2025w/image/about/line.svg) no-repeat center / 100% 100%;
        }
        &:after { scale:1 -1;}
    }
    & :is(.t1, .t2) { text-align:center;}
    & .t1 { margin-top:1em; font-size:18px; line-height:1.6666;}
    & .t1 strong { font-size:30px; line-height:1; font-weight:bold;}
    & .t2 { margin-top:30px; font-size:13px;}
    & .boxs {
        --radius:20px;

        display:grid;
        grid-template-columns:repeat(2, 160px);
        grid-template-rows:auto 1fr;
        justify-content:center;
        gap:0 11px;
        margin-top:40px;
        text-align:center;
        font-size:12px;
    }
    & .boxs dl { display:grid; grid-template-rows:subgrid; grid-row:span 2;}
    & .boxs dl:first-of-type dd:first-line { font-size:0.9166em;}
    & .boxs dt {
        padding-block:1em;
        background-color:var(--black);
        border-radius:var(--radius) var(--radius) 0 0;
        color:var(--white);
    }
    & .boxs dd {
        position:relative;
        padding-block:15px;
        background-color:var(--white);
        border:solid 1px var(--black);
        border-radius:0 0 var(--radius) var(--radius);
        line-height:2.5;
    }
    & .boxs dd:after {
        content:"";
        position:absolute;
        display:block;
        background:url() no-repeat center / contain;
        height:auto;
        aspect-ratio:1;
    }
    & .boxs dl:nth-of-type(1) dd:after {
        inset:auto -1rem 0px auto;
        width:50px;
        rotate:12deg;
        background-image:image-set(
            url(/lp/kurashifair/2025w/image/about/ripple@2x.png) 2x,
            url(/lp/kurashifair/2025w/image/about/ripple.png) 1x
        );
    }
    & .boxs dl:nth-of-type(2) dd:after {
        width:53px;
        inset:auto -1rem -0.5rem auto;
        background-image:image-set(
            url(/lp/kurashifair/2025w/image/about/imokenpi@2x.png) 2x,
            url(/lp/kurashifair/2025w/image/about/imokenpi.png) 1x
        );
    }
    & .boxs mark {
        position:relative;
        font-size:16px;
        font-weight:bold;
        line-height:1.875;
        background-color:transparent;
        z-index:0;
    }
    & .boxs mark:after {
        content:"";
        position:absolute;
        display:block;
        width:calc(100% + 4px);
        height:1em;
        inset:0.5lh auto auto 50%;
        translate:-50% 0;
        background-color:var(--yellow-dark);
        z-index:-1;
    }
}


/* ==================================================
    #hotspots
================================================== */
.hotspots {

    padding-block:35px 58px;
    background-color:var(--orange-dark);

    & h2 { width:fit-content; margin-inline:auto;}
    & .point_box {
        --radius:20px;

        color:var(--white);
        line-height:2.5;

        & .img { position:relative; width:calc(100% - 7.5cqw); z-index:0;}
        & .abs_t { position:absolute; rotate:-5deg;}
        & .text { width:var(--content-width); margin:20px auto 0; text-align:center; line-height:1.875;}
        & a { display:block; width:fit-content; margin:1em var(--content-gap) auto auto; border-bottom:solid 1px currentColor; font-size:12px;}
    }
    & .img img:not(.abs_t) { width:100%;}
    & :nth-child(odd of .point_box)  .img { margin-inline:0 auto;}
    & :nth-child(even of .point_box) .img { margin-inline:auto 0;}
    & :nth-child(odd of .point_box)  .img img:not(.abs_t) { border-radius:0 var(--radius) var(--radius) 0;}
    & :nth-child(even of .point_box) .img img:not(.abs_t) { border-radius:var(--radius) 0 0 var(--radius);}
    & :nth-child(1 of .point_box) { margin-top:27px;}
    & :nth-child(2 of .point_box) { margin-top:47px;}
    & :nth-child(3 of .point_box) { margin-top:50px;}
    & :nth-child(1 of .point_box) .abs_t { width:170px; inset:auto -3.6111% 9% auto;}
    & :nth-child(2 of .point_box) .abs_t { width:180px; inset:auto auto 9.5% -5.1388%;}
    & :nth-child(3 of .point_box) .abs_t { width:170px; inset:auto -1.9444% 3.5% auto;}
    /* & :nth-child(1 of .point_box) .abs_t { width:46.85%; inset:59.85% auto auto 56.2222%;}
    & :nth-child(2 of .point_box) .abs_t { width:49.89%; inset:59.25% 55.2777% auto auto;}
    & :nth-child(3 of .point_box) .abs_t { width:59.91%; inset:58.65% auto auto 45.25%;} */
    & .anpan1 { margin-top:27px;}
    & .anpan2 { margin-top:6px;}
    & .anpan .swiper-wrapper { transition-timing-function:linear;}
    & .anpan img { width:100%;}
}





/* ==================================================
    #s2025
================================================== */
.s2025 {

    padding-block:45px 50px;
    background-color:var(--white);

    & :is(h2, h3, .tokuten) { width:var(--content-width); margin-inline:auto;}
    & h2 {
        display:grid;
        grid-template-columns:1fr auto 1fr;
        align-items:center;
        font-size:18px;
        line-height:1.5555;

        &:before, &:after {
            content:"";
            display:block;
            width:3.2777em;
            height:auto;
            aspect-ratio:59/36;
            background:image-set(
                url(/lp/kurashifair/2025w/image/s2025/anpan@2x.png) 2x,
                url(/lp/kurashifair/2025w/image/s2025/anpan.png) 1x
            ) no-repeat center / contain;
            rotate:11deg;
        }
        &:before { justify-self:start;}
        &:after  { justify-self:end;}
    }
    & .tokuten {
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:10px;
        margin-top:0.875rem;

        & li {
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            padding:10px;
            border:solid 2px var(--black);
            border-radius:20px;
            background-color:var(--yellow);
            text-align:center;
            font-size:14px;
        }
        & .col1 { grid-column:span 1;}
        & .col2 { grid-column:span 2;}
        & :nth-child(2 of .col2) { padding-top:24px;}
        & a { position:relative; align-self:end; margin-top:1em; padding-right:4em; font-size:10px;}
        & a:after {
            content:"";
            position:absolute;
            display:block;
            width:2em;
            height:auto;
            aspect-ratio:21/23;
            background: url(/lp/kurashifair/2025w/image/s2025/arrow.svg) no-repeat center / contain;
            inset:50% 0 auto auto;
            translate:0 -50%;
        }
    }
}
@media (width < 768px){
    .s2025 h2 {
        &:before { justify-self:end;}
        &:after { justify-self:start;}
    }
}





/* ==================================================
    #seminar_and_workshop
================================================== */
.seminar_and_workshop {
    --seminar-bg-tokyo:#D0EBF4;
    --seminar-bg-osaka:#FAFAA8;
    --saws--bg-color:#FFFF48;

    background-color:var(--blue-deep);

    & input[type="radio"] { display:none;}


    & .intro {
        position:relative;
        width:var(--container-width);
        margin-inline:auto;
        padding-block:50px 30px;
        color:#fff;

        & picture { width:fit-content; margin-inline:auto;}
    }

    /* tab_content */
    & .tab_content_group { display:grid; overflow:clip;}
    & .tab_content {
        grid-column:1/-1;
        grid-row:1/-1;
        opacity:0;
        pointer-events:none;
        transition:all var(--trans);
    }
    & .tab_content.active { opacity:1; pointer-events:auto; transition:all var(--trans);}
    & .tab_content_tokyo { background-color:var(--seminar-bg-tokyo);}
    & .tab_content_osaka { background-color:var(--seminar-bg-osaka);}
    & .tab_content_wrap { overflow:hidden;}

    /* パーツ */
    & .time {
        width:fit-content;
        padding-inline:0.75em;
        background-color:#fff;
        border:solid 2px currentColor;
        border-radius:0.5em;
        color:#000;
        font-weight:900;
    }
}

/* 基本設定：タブ部分 */
.seminar_and_workshop .tabs {
    display:grid;
    grid-template-columns:1fr 1fr;

    & button {
        position:relative;
        display:grid;
        place-items:center;
        height:40px;
        background-color:#D6D6D6;
        border-radius:1em 1em 0 0;
        font-size:18px;
        color:#fff;
        border:none;
        cursor:pointer;
        transition:all var(--trans);
    }
    & button:before {
        content:"";
        position:absolute;
        inset:50% calc(50% + 2.5em) auto auto;
        translate:0% -50%;
        display:block;
        width:42px;
        aspect-ratio:42/66;
        background:image-set(
            url(/lp/kurashifair/2025w/image/fixed/f2_a@2x.webp) 2x type("image/webp"),
            url(/lp/kurashifair/2025w/image/fixed/f2_a.webp) 1x type("image/webp"),
            url(/lp/kurashifair/2025w/image/fixed/f2_a@2x.png) 2x,
            url(/lp/kurashifair/2025w/image/fixed/f2_a.png) 1x
        ) no-repeat center / contain;
        opacity:0;
        z-index:10;
        transition:opacity var(--trans);
    }
    & button.active:before { opacity:1;}
    & button:is(:focus, .active) { color:#000;}
    & .tab_tokyo:is(:focus, .active) { background-color:var(--seminar-bg-tokyo);}
    & .tab_osaka:is(:focus, .active) { background-color:var(--seminar-bg-osaka);}
    @media (any-hover:hover){
        & button:hover { color:#000;}
        & .tab_tokyo:hover { background-color:var(--seminar-bg-tokyo);}
        & .tab_osaka:hover { background-color:var(--seminar-bg-osaka);}
    }
    @media (any-hover:none){
        & button:active { color:#000;}
        & .tab_tokyo:active { background-color:var(--seminar-bg-tokyo);}
        & .tab_osaka:active { background-color:var(--seminar-bg-osaka);}
    }
}

/* 基本設定：セミナー */
.seminar_and_workshop .seminar {
    --r:20px; /* 画像のradius値 */
    padding-block:45px 75px;

    & .box + .box { margin-top:70px;}
    & .img {
        position:relative;
        width:calc(100% - var(--content-gap));
        margin-inline:0 auto;
    }
    & .img img:not([class]) { width:100%; border-radius:0 var(--r) var(--r) 0;}
    & .img .abs { position:absolute;}

    & .box_content {
        display:grid;
        grid-template:
            "time title" auto
            "text text" 1fr / auto 1fr;
        align-items:start;
        gap:0.5em 0;
        width:var(--container-width);
        margin:20px auto 0;
    }
    & .time { grid-area:time;}
    & .title { grid-area:title; font-weight:bold; letter-spacing:0.05em;}
    & .text {
        grid-area:text;
        margin-top:0.5em;
        background-color:#fff;
        font-size:14px;
        line-height:2;
        padding:10px 20px;
    }
}

/* 基本設定：ワークショップ */
.seminar_and_workshop .ws {
    --r:20px; /* 画像のradius値 */
    padding-bottom:75px;
    background-color:var(--orange-dark);
    color:#fff;

    & .box + .box { margin-top:50px;}
    & .box .img { position:relative; width:calc(100% - var(--content-gap)); margin-inline:0 auto;}
    & .box .img img:not([class]) { border-radius:0 var(--r) var(--r) 0px;}
    & .box .img img.abs_t { position:absolute;}

    & .box_content { width:var(--content-width); margin-inline:auto;}
    & .time { margin-top:2em;}
    & .box_content p { margin-top:1.5em; line-height:1.8;}
}


/* 個別設定：東京 */
.seminar_and_workshop .tab_content_tokyo {
    & .seminar {
        & .box2 :nth-child(1 of .abs) { width:156px; inset:auto 5.8823% 7% auto;}
        & .box2 :nth-child(2 of .abs) { width:83px; inset:auto -7.0588% 34.25% auto;}
        & .box3 .abs { width:244px; inset:auto -5.8823% 0% auto;}
        & .box3 .title { display:flex; flex-direction:column;}
        & .box3 .title span:nth-of-type(2) { align-self:end;}
        & .box4 .abs { width:187px; inset:auto 0 -4% auto;}
    }
    & .ws {
        & .box1 .abs_t { inset:auto -8.5294% -6.35% auto; width:280px; rotate:-6deg;}
    }
}

/* 個別設定：大阪 */
.seminar_and_workshop .tab_content_osaka {
    & .seminar {
        & .box2 .abs { width:165px; inset:auto 3.2352% 6.5% auto;}
        & .box2 .box_content { display:flex; flex-wrap:wrap;}
    }
    & .ws {
        & .abs_t { inset:auto -10.2941% 0 auto; rotate:-6deg;}
        & .box1 .abs_t { width:264px;}
        & .box2 .abs_t { width:257px;}
    }
}


@media (width < 768px){
    .seminar_and_workshop .ws {

        & .box .img img:not(.abs_t) { width:100%;}
    }
}

/* tab_content_foot */
.seminar_and_workshop .tab_content_foot {
    width:100%;
    padding:20px var(--container-gap) 25px;
    background-color:var(--yellow);

    & .title {
        color:var(--orange-dark);
        font-size:20px;
        font-weight:bold;
        text-align:center;
        letter-spacing:0.05em;
    }
    & p {
        --rotate:20deg;
        display:grid;
        grid-template-columns:1fr auto 1fr;
        gap:2rem;
        margin-top:1.3333em;
        font-size:15px;
        letter-spacing:0.1em;

        &:before, &:after { content:""; width:1px; height:1lh; background-color:currentColor;}
        &:before { justify-self:end; rotate:calc(var(--rotate) * -1);}
        &:after { justify-self:start; rotate:var(--rotate);}
    }
    & .links {
        --gap:0.5em;
        --shadowRange-x:4px;
        --shadowRange-y:3px;

        display:flex;
        gap:var(--gap);
        margin-top:1rem;
    }
    & .links a {
        display:block;
        width:calc((100% - var(--shadowRange-x) * 2 - var(--gap)) / 2);
        border:solid 2px currentColor;
        border-radius:100vmax;
        line-height:1.625;
        letter-spacing:0.1em;
        text-align:center;
        filter:drop-shadow(var(--shadowRange-x) var(--shadowRange-y) 0px #000);
        transition:
            filter var(--trans),
            translate var(--trans);

        &:focus {
            translate:calc(var(--shadowRange-x) - 1px) calc(var(--shadowRange-y) - 1px);
            filter:drop-shadow(1px 1px 0px #000);
        }
        @media (any-hover:hover) {
            &:hover {
                translate:calc(var(--shadowRange-x) - 1px) calc(var(--shadowRange-y) - 1px);
                filter:drop-shadow(1px 1px 0px #000);
            }
        }
        @media (any-hover:none){
            &:active {
                translate:calc(var(--shadowRange-x) - 1px) calc(var(--shadowRange-y) - 1px);
                filter:drop-shadow(1px 1px 0px #000);
            }
        }
    }
    & .links a.tokyo { background-color:var(--sky);}
    & .links a.osaka { background-color:var(--yellow-dark);}
    & .links a.disable { pointer-events:none; background-color:color-mix(in sRGB, var(--gray), #fff);}
    & .links a.disable small { font-size:0.75em; letter-spacing:0;}
}


@media (width < 768px){

}







/* ==================================================
    #nums
================================================== */
.nums {

    background-color:var(--orange);
    color:var(--white);

    & .fv {
        position:relative;
        z-index:0;

        & img:not([class]) { width:100%;}
        & :is(.abs_t, .text) { position:absolute;}
        & .abs_t { width:74px; inset:-50px var(--container-gap) auto auto;}
        & .text { inset:auto auto 37px var(--content-gap); line-height:2.28; font-size:14px;}
    }
    & .num {
        padding:38px var(--content-gap) 50px;
        
        & h2 { font-size:22px; line-height:1.8181; text-align:center;}
        & h2 small { font-size:0.8181em;}

        & [class^="num"] img { width:100%;}
        & [class^="num"]:has(.abs) { position:relative; z-index:0;}
        & .num1 { width:93%; margin:42.5px auto 0;}
        & .num2 { width:100%; margin-top:19.5px;}
        & .num3 { width:100%; margin-top:17px;}
        & .num4 { width:100%; margin-top:50px;}
        & .abs { position:absolute;}
        & .num2 .abs { width:25.7068%; inset:18.8679% auto auto 85.6551%;}
        & .num3 .abs { width:53.7931%; inset:41.4414% 60.6896% auto auto;}
    }
}



/* ==================================================
    #other
================================================== */
.other {
    padding-block:110px 19.2307cqw;
    background-color:#fff;
    
    & h3 { font-size:18px; font-weight:bold; text-align:center;}
    & .iframe_wrap { margin:2rem auto 0px; width:90%;}
    & .iframe_wrap iframe { width:100%; height:auto; aspect-ratio:35/20;}
    & .tottori {
        position:relative;
        display:block;
        width:var(--container-width);
        margin:2.5rem auto 0;
        
        & img:not([class]) { width:100%;}
        & .abs {
            position:absolute;
            inset:auto auto -21% 6.6666%;
            width:87.2727%;
            rotate:-5deg;
            pointer-events:none;
        }
    }
}




/* ==================================================
    #booth
================================================== */
.booth {
    position:relative;
    padding:45px var(--container-gap) 72px;
    z-index:0;

    & h2 {
        margin-bottom:45px;
        font-size:22px;
        font-family:var(--zen-antique);
        text-align:center;
        line-height:1.8181;
    }
    & > p {
        position:relative;
        width:fit-content;
        margin:16px auto 0;
        font-size:14px;
        font-weight:medium;
        color:var(--blue);
        z-index:0;

        &:after {
            content:"";
            position:absolute;
            display:block;
            width:99px;
            height:auto;
            aspect-ratio:99/32;
            background-image:url(/lp/kurashifair/2025w/image/booth/t_ComingSoon.png);
            background:image-set(
                url(/lp/kurashifair/2025w/image/booth/t_ComingSoon@2x.png) 2x,
                url(/lp/kurashifair/2025w/image/booth/t_ComingSoon.png)
            ) no-repeat center / contain;
            inset:100% -11.5px auto auto;
            rotate:-15deg;
        }
    }
}

/* ==================================================
    #municipalities
================================================== */
.municipalities {
    --kochi: #EEAFC7;
    --niyodo: #BE0904;
    --shimanto: #F0935A;
    --tosa: #C3B572;
    --higashi: #55834D;
    --hata: #4652A0;

    --theme-color:var(--black); /* フォールバック */

    & h2 {
        width:var(--container-width);
        margin-inline:auto;
        padding:0.5rem;
        background-color:var(--orange-dark);
        color:var(--white);
        font-weight:bold;
        letter-spacing:0.2em;
        text-align:center;
    }

    & .kochi    { --theme-color:var(--kochi);}
    & .niyodo   { --theme-color:var(--niyodo);}
    & .shimanto { --theme-color:var(--shimanto);}
    & .tosa     { --theme-color:var(--tosa);}
    & .higashi  { --theme-color:var(--higashi);}
    & .hata     { --theme-color:var(--hata);}

    .map {
        position:relative;
        width:var(--container-width);
        height:auto;
        aspect-ratio:330/390;
        margin-inline:auto;
        z-index:1;

        & .pin {
            position:absolute;
            display:grid;
            place-items:center;
            width:21.1848%;
            cursor:pointer;
            z-index:2;

            & img { grid-area:1/1;}
            & img:nth-of-type(1) { opacity:1; transition:opacity var(--trans); z-index:4;}
            & img:nth-of-type(2) { z-index:3;}
            & img:nth-of-type(1):hover { opacity:0;}

            &.area_kochi     { inset:55.2820% auto auto 50.3333%;}
            &.area_niyodo    { inset:11.3333% auto auto 25.5757%;}
            &.area_shimanto  { inset:24% auto auto 6.5151%;}
            &.area_tosa      { inset:4.3589% auto auto 50.3333%;}
            &.area_higashi   { inset:17.6153% auto auto 73.1818%;}
            &.area_hata      { inset:72.9230% auto auto 27.6363%;}
        }
        & svg { margin-top:36.0256%; margin-left:6.0606%; width:81.5151%; height:auto;}
        & path:not([fill="#fff"]) { fill:#ccc; cursor:pointer; transition:fill var(--trans);}
    }

    /* エリア選択時 */
    &.area_kochi g.area_kochi path:not([fill="#fff"]) { fill:var(--kochi);}
    &.area_niyodo g.area_niyodo path:not([fill="#fff"]) { fill:var(--niyodo);}
    &.area_shimanto g.area_shimanto path:not([fill="#fff"]) { fill:var(--shimanto);}
    &.area_tosa g.area_tosa path:not([fill="#fff"]) { fill:var(--tosa);}
    &.area_higashi g.area_higashi path:not([fill="#fff"]) { fill:var(--higashi);}
    &.area_hata g.area_hata path:not([fill="#fff"]) { fill:var(--hata);}

    &.area_kochi .pin.area_kochi img:nth-of-type(1),
    &.area_niyodo .pin.area_niyodo img:nth-of-type(1),
    &.area_shimanto .pin.area_shimanto img:nth-of-type(1),
    &.area_tosa .pin.area_tosa img:nth-of-type(1),
    &.area_higashi .pin.area_higashi img:nth-of-type(1),
    &.area_hata .pin.area_hata img:nth-of-type(1) { opacity:0;}

    /* エリアhover時 */
    & g.area_kochi:hover path:not([fill="#fff"]) { fill:var(--kochi);}
    & g.area_niyodo:hover path:not([fill="#fff"]) { fill:var(--niyodo);}
    & g.area_shimanto:hover path:not([fill="#fff"]) { fill:var(--shimanto);}
    & g.area_tosa:hover path:not([fill="#fff"]) { fill:var(--tosa);}
    & g.area_higashi:hover path:not([fill="#fff"]) { fill:var(--higashi);}
    & g.area_hata:hover path:not([fill="#fff"]) { fill:var(--hata);}


    & .slides {
        display:grid;

        & > * {
            grid-area:1/1;
            width:calc(100cqw - var(--container-gap));
            margin-inline:auto;
            translate:3em 0;
            opacity:0;
            pointer-events:none;
            height:0px;
            transition:translate var(--trans), opacity var(--trans);
        }
        & .title {
            padding:0.5em 1.25em;
            width:100%;
            background-color:var(--theme-color);
            border-start-start-radius:8px;
            font-size:18px;
            font-weight:bold;
            color:var(--white);
        }
    }
    &.area_kochi .slides .kochi,
    &.area_niyodo .slides .niyodo,
    &.area_shimanto .slides .shimanto,
    &.area_tosa .slides .tosa,
    &.area_higashi .slides .higashi,
    &.area_hata .slides .hata { height:auto; opacity:1; translate:0 0; pointer-events:auto;}
    
    & .swiper {
        position:relative;
        background-color:var(--white);
        font-size:16px;
        
        & .swiper-slide { padding:1.5em 10cqw;}
        & .img img { width:100%; border-radius:10px;}
        & .city { margin-top:0.7272em; font-size:20px; font-weight:bold;}
        & .catch { margin-top:2.2em; font-size:20px; font-weight:bold;}
        & p { margin-top:1.5em;}
        & .swiper-pagination {
            position:static;
            display:flex;
            align-items:center;
            gap:8px;
            margin-inline:auto;
            padding-bottom:1.5em;
            width:fit-content;
        }
        & .swiper-pagination span { margin:0; width:12px; height:auto; aspect-ratio:1;}
        & .swiper-pagination-bullet-active { background-color:var(--theme-color);}
        & .swiper-button-next, .swiper-button-prev {
            translate:0 -50%;
        }
        & .swiper-button-next:after, .swiper-button-prev:after {
            content:"";
            display:block;
            width:22px;
            height:auto;
            aspect-ratio:1;
            background:url(/lp/kurashifair/2025w/image/icon_swiper_btn.svg) no-repeat center / contain;
        }
        & .swiper-button-prev:after { scale:-1 1;}
    }

}


/* ==================================================
    #livelihood
================================================== */
.livelihood {
    position:relative;
    padding-bottom:220px;

    &:after {
        content:"";
        position:absolute;
        display:block;
        width:20px;
        height:auto;
        aspect-ratio:20/1652.95;
        background-image:url(/lp/kurashifair/2025w/image/booth/t_side.png);
        background:image-set(
            url(/lp/kurashifair/2025w/image/booth/t_side@2x.webp) 2x type("image/webp"),
            url(/lp/kurashifair/2025w/image/booth/t_side.webp) 2x type("image/webp"),
            url(/lp/kurashifair/2025w/image/booth/t_side@2x.png) 2x,
            url(/lp/kurashifair/2025w/image/booth/t_side.png) 1x
        ) no-repeat top center / contain;
        inset:0 0 auto auto;
    }
    & h2 {
        width:var(--container-width);
        margin-top:27.5px;
        margin-inline:auto;
        padding:0.5rem;
        background-color:var(--orange-dark);
        color:var(--white);
        font-weight:bold;
        letter-spacing:0.2em;
        text-align:center;
    }
    & .c_box_large { width:var(--container-width); margin-inline:auto;}
}


:is(.booth, .livelihood) {
    & .c_box_large {
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        margin-top:30px;
        padding:22.5px 20px 20px;
        background-color:var(--white);
        clip-path:polygon(
            0 0,
            calc(100% - 13px) 0,
            100% 16px,
            100% 100%,
            0 100%
        );
        z-index:0;
        
        &:after {
            content:"";
            position:absolute;
            display:block;
            width:29px;
            height:auto;
            aspect-ratio:29/164;
            background-image:url(/lp/kurashifair/2025w/image/booth/label.jpg);
            background:image-set(
                url(/lp/kurashifair/2025w/image/booth/label@2x.jpg) 2x,
                url(/lp/kurashifair/2025w/image/booth/label.jpg)
            ) no-repeat center / contain;
            inset:0 20px auto auto;
        }
        & h3 {
            width:100%;
            margin-top:1em;
            padding-block:calc(1em / 3);
            border-block:solid 2px currentColor;
            font-size:16px;
            color:var(--orange-dark);
            text-align:center;
        }
        & .text { margin-top:1em; font-weight:medium; font-size:12px; text-align:center;}
    }
}





/* ==================================================
    #access
================================================== */
.access {
    padding:65px var(--content-gap) 0;
    background-color:var(--orange-dark);
    color:var(--white);

    & h2 { font-size:20px; text-align:center;}
    & .access_box {
        display:grid;
        grid-template:
        "c d" auto
        "c a" auto
        ". i" 1fr / auto 1fr;
        gap:0 10px;
        width:fit-content;
        margin:3rem auto 0px;
        
        & .c { grid-area:c;}
        & .d { grid-area:d;}
        & .a { grid-area:a; padding-block:11px 25px;}
        & .i { grid-area:i; width:200px;}
        & .i iframe { width:100%; height:auto; aspect-ratio:20/18;}
    }
}

/* ==================================================
    #contact
================================================== */
.contact {
    padding:65px var(--container-gap) 85px;
    background-color:var(--orange-dark);
    color:var(--white);

    & .wrap { padding:28px 20px 38px; border:solid 1px currentColor;}
    & .wrap > * { text-align:center;}
    & h2 { font-size:16px;}
    & .t { margin-top:30px; font-size:16px;}
    & .t small { font-size:0.75em;}
    & :is(.t2, .t3) { letter-spacing:0.1em;}
    & .t2 small { letter-spacing:0;}
    & .t3 a{ text-decoration:underline; text-underline-offset:0.375em;}
}


/* ==================================================
    2025.05.09 追加　　.thanks
================================================== */
.thanks {
    
    & .thanks_wrap {
        margin-inline:auto;
        padding-block:40px 100px;
        width:var(--container-width);
    }
    & .grid {
        display:grid;
        grid-template:
            "title img" auto
            "text text" 1fr / 1fr 1fr;
        gap:40px 10px;

        & .title { grid-area:title; justify-self:center; align-self:end; padding-bottom:1.5lh; font-size:20px;}
        & .img   { grid-area:img;}
        & .text  {
            grid-area:text;
            padding:1.25em 10px;
            border:solid 2px var(--black);
            border-radius:10px;
            background-color:var(--white);
            font-size:14px;
            font-weight:bold;
            line-height:2;
            text-align:center;
            letter-spacing:0.05em;
            text-wrap:nowrap;
        }
    }
    & .info {
        margin-top:70px;
        font-size:11px;
        line-height:2;
        text-align:center;

        & .box2 { margin-top:37px;}
    }
}