@charset "UTF-8";
/* viewport:375-768px */
:root {

    --content-width:min(1200px, 95%);
    --zenmaru:"Zen Maru Gothic", sans-serif;
    --trans:0.5s ease;
    --base-z-index:1;

    --h2-w:700px;
}
html {
    font-family:"Noto Sans JP", sans-serif;
    font-size:16px;
    font-weight:300;
    scroll-behavior:smooth;
    overflow-x:clip;
}

*,*:before,*:after { margin:0; padding:0;}
img { max-width:100%; height:auto; vertical-align:bottom;}
address { font-style:normal;}
:is(h1, h2, h3, h4, h5, h6) { margin:0px; font-size:1rem; font-weight:normal;}
ul, ol { list-style:none;}
h2 {
    margin-inline:auto;
    width:min(var(--h2-w), 100%);
    color:#fff;
    /* 23-41px */
    font-size:clamp(1.438rem, calc(0.364rem + 4.58vw), 2.563rem);
    font-weight:bold;
    font-family:var(--zenmaru);
    text-align:center;
    background-color:#21A4EA;
    border-radius:100vmax;
}
.content_wrap { width:var(--content-width); margin-inline:auto;}
.indents { width:fit-content; margin-inline:auto;}
.indent { padding-left:1em; text-indent:-1em;}

@media (any-hover:hover) {
    a:hover { opacity:0.75;}
}
@media (any-hover:none) {
    a:active { opacity:0.75;}
}

/* ==================================================
    main
==================================================*/
/* fv */
.fv {
    position:relative;
    padding-top:60px;
    z-index:var(--base-z-index);

    & :where(.catch, .title) { display:block; margin-inline:auto;}
    & .title { padding-block:83.5px 231.5px;}

    & .abs { position:absolute; z-index:calc(var(--base-z-index) - 1);}
    & .abs1 { width:581px;   aspect-ratio:581/240;     inset:71.6px auto auto calc(50% + 219px);}
    & .abs2 { width:390px;   aspect-ratio:390/306.5;   inset:90.5px calc(50% + 410px) auto auto;}
    & .abs3 { width:259.5px; aspect-ratio:259.5/225.5; inset:469px calc(50% + 240px) auto auto;}
    & .abs4 { width:514px;   aspect-ratio:514/360.5;   inset:356.5px auto auto calc(50% + 180px);}
}
@media (width < 960px){
    .fv {
        width:95%;
        height:auto;
        aspect-ratio:960/1280;
        margin-inline:auto;
        padding-top:41px;

        & .catch { width:52.9166%;}
        & .title { width:74.2708%; padding-block:39.0625% 0;}
        & .abs1 { width:52.8125%;  inset:20.078125% 3.90625% auto auto;}
        & .abs2 { width:34.5833%;  inset:18.9583% auto auto 5.2604%;}
        & .abs3 { width:23.59375%; inset:68.046875% auto auto 16.6666%;}
        & .abs4 { width:45.55729%; inset:71.09375% 14.84375% auto auto;}
    }

}
@media (width < 768px){
    .fv {
        padding-top:22px;
        height:840px;
        aspect-ratio:unset;

        & .catch { width:min(312px, 80%);}
        & .title { width:min(353.5px, 90.6410%); padding-top:209px;}
        & .abs1 { width:min(252px, 64.6153%); inset:108px calc(50% - 76px) auto auto;}
        & .abs2 { width:min(169px, 43.3333%); inset:221.5px auto auto calc(50% - 2px);}
        & .abs3 { width:min(112.5px, 28.8461%); inset:575px calc(50% + 13px) auto auto;}
        & .abs4 { width:min(223px, 57.1794%); inset:624px auto auto calc(50% - 76px);}
    }
}


/* audience */
.audience {
    background-color:#BEECF8;
    padding-bottom:113.5px;

    & h2 { position:relative; translate:0 -50%; z-index:var(--base-z-index);}
    & .img_set {
        position:relative;
        width:562px;
        margin-inline:calc((100% - var(--h2-w)) / 2) auto;
        z-index:var(--base-z-index);

        & img { position:absolute; z-index:calc(var(--base-z-index) + 1); max-width:unset;}
        & dt {
            margin-bottom:0.3em;
            padding-bottom:0.3em;
            font-family:var(--zenmaru);
            /* 26-34px */
            font-size:clamp(1.625rem, calc(1.148rem + 2.036vw), 2.125rem);
            font-weight:bold;
            border-bottom:solid 4px #fff; 
        }
        & dd {
            /* 17-20px */
            font-size:clamp(1.063rem, calc(0.884rem + 0.763vw), 1.25rem);
            letter-spacing:0.05em;
        }
    }
    & :nth-child(1 of .img_set) {
        margin-top:28px;
        padding-left:50px;
        z-index:calc(var(--base-z-index) - 1);
        
        & img { inset:-99px auto auto 396px; width:609px; aspect-ratio:609/496;}
    }
    & :nth-child(2 of .img_set) {
        margin-top:246.5px;
        padding-left:72px;

        & img { inset:-190px 352px auto auto; width:661px; aspect-ratio:661/496;}
        & dt { text-align:end; padding-right:2em;}
        & dd { width:fit-content; margin-inline:auto -4em;}
    }
    & :nth-child(3 of .img_set) {
        margin-top:185.5px;
        padding-left:50px;

        & img { inset:-204px auto auto 489px; width:497px; aspect-ratio:497/514;}
    }
}
@media (width < 960px) {
    .audience {

        & .img_set {
            width:100%;

            & img { position:static; display:block; margin-inline:auto; width:82%!important;}
        }
        & :nth-child(1 of .img_set) { margin:10px auto 0; padding-left:0;}
        & :nth-child(2 of .img_set) { margin:27px auto 0; padding-left:0;}
        & :nth-child(3 of .img_set) { margin:49px auto 0; padding-left:0;}
        & :nth-child(2 of .img_set) {

            & dt { text-align:start; padding-right:0;}
            & dd { margin-inline:0 auto;}
        }
    }
}
@media (width < 768px) {

}


/* event */
.event {
    /* 36-82px */
    padding-top:clamp(2.25rem, calc(-0.493rem + 11.705vw), 5.125rem);
    /* 47-122.5px */
    padding-bottom:clamp(2.938rem, calc(-1.565rem + 19.211vw), 7.656rem);

    & .sub_wrap { position:relative; z-index:var(--base-z-index);}
    & p.center {
        margin-inline:auto;
        font-family:var(--zenmaru);
        /* 17-20px */
        font-size:clamp(1.063rem, calc(0.884rem + 0.763vw), 1.25rem);
        font-weight:bold;
        text-align:center;
    }
    & .dot {
        --size:10px;

        display:grid;
        grid-template-rows:repeat(3, var(--size));
        gap:calc(var(--size) * 1.5);
        width:var(--size);
        /* 41-92px */
        margin:clamp(2.563rem, calc(-0.479rem + 12.977vw), 5.75rem) auto 0;

        & span {
            display:block;
            width:var(--size);
            height:var(--size);
            border-radius:100%;
            background-color:#D0D0D0;
        }
    }
    & :nth-child(1 of .sub_wrap) h2 { /* 59-113px */ margin-top:clamp(3.688rem, calc(0.467rem + 13.74vw), 7.063rem);}
    & :nth-child(2 of .sub_wrap) h2 { /* 43-71.5px */ margin-top:clamp(2.688rem, calc(0.988rem + 7.252vw), 4.469rem);}
    & :nth-child(3 of .sub_wrap) h2 { /* 51.5-131px */ margin-top:clamp(3.219rem, calc(-1.522rem + 20.229vw), 8.188rem);}
    & :where(:nth-child(2 of .sub_wrap), :nth-child(3 of .sub_wrap)) h2 {
        --h2-w:830px;

        position:relative;
        z-index:var(--base-z-index);
    }

    & :nth-child(3 of .sub_wrap) {

        & :where(b, .indent) { display:block; width:fit-content; margin-inline:auto;}
        & b {
            /* 30-36px */
            margin-top:clamp(1.875rem, calc(1.517rem + 1.527vw), 2.25rem);
            font-family:var(--zenmaru);
            font-weight:bold;
            /* 22-27px */
            font-size:clamp(1.375rem, calc(1.077rem + 1.272vw), 1.688rem);
        }
        & .indent {
            /* 15-21px */
            margin-top:clamp(0.938rem, calc(0.58rem + 1.527vw), 1.313rem);
            /* 15-16px */
            font-size:clamp(0.938rem, calc(0.878rem + 0.254vw), 1rem);
        }
    }
    & .indents {
        /* 32-38px */
        margin-top:clamp(2rem, calc(1.642rem + 1.527vw), 2.375rem);
        font-family:var(--zenmaru);
        /* 17-22px */
        font-size:clamp(1.063rem, calc(0.764rem + 1.272vw), 1.375rem);
        font-weight:bold;
    }
    & .idnents .indent { font-size:22px;}
    & .img img { position:absolute; z-index:calc(var(--base-z-index) + 1);}
    & :nth-child(2 of .sub_wrap) .img img { inset:-114px calc(50% + 327.5px) auto auto;}
    & :nth-child(3 of .sub_wrap) .img1 img { inset:-195px auto auto calc(50% + 430px);}
    & :nth-child(3 of .sub_wrap) .img2 img { inset:-92px auto auto calc(50% + 287px);}

    /* .event_wrap */
    & .event_wrap {
        /* viewport:375-960px  27.5-43.5px */
        --border-padding:clamp(1.719rem, calc(1.078rem + 2.735vw), 2.719rem);
        --border:solid 1px #e3e3e3;

        width:min(1000px, 100%);
        /* 70-100px */
        margin:clamp(4.375rem, calc(2.586rem + 7.634vw), 6.25rem) auto 0;
        
        & ul {
            display:grid;
            grid-template-columns:repeat(2, 1fr);
            /* viewport:768-960px  16-50px */
            gap:88px clamp(1rem, calc(-7.5rem + 17.708vw), 3.125rem);
            border-bottom:var(--border);
            padding-bottom:var(--border-padding);
        }
        & ul + ul {
            /* viewport:375-960px  32-42.5x */
            margin-top:clamp(2rem, calc(1.579rem + 1.795vw), 2.656rem);
        }
        & li {
            /* viewport:375-960px  12-31px */
            --padding-inline:clamp(0.75rem, calc(-0.383rem + 4.835vw), 1.938rem);

            position:relative;
            /* viewport:375-960px  29-44px */
            padding-top:clamp(1.813rem, calc(1.212rem + 2.564vw), 2.75rem);
            padding-inline:var(--padding-inline) 0;
            z-index:0;
        }
        & .category {
            display:grid;
            place-items:center;
            width:6.75em;
            height:auto;
            aspect-ratio:135/60;
            position:absolute;
            inset:0 auto auto 0;
            color:#fff;
            /* viewport:375-960px  15-20px */
            font-size:clamp(0.938rem, calc(0.737rem + 0.855vw), 1.25rem);
            font-weight:bold;
            border-radius:6px;
            z-index:1;

            &.osaka { background-color:#EBD421;}
            &.tokyo { background-color:#2C89E6;}
            &.online { background-color:#4FDB59;}
        }
        & .day {
            /* viewport:375-960px  16-20px */
            font-size:clamp(1rem, calc(0.84rem + 0.684vw), 1.25rem);
        }
        & img { width:100%; aspect-ratio:4/3; object-fit:contain;}
        & figcaption {
            margin-top:20px;
            /* viewport:375-960px  18-21px */
            font-size:clamp(1.125rem, calc(1.005rem + 0.513vw), 1.313rem);
            font-weight:bold;
        }
        & figcaption :is(.day, .area) {
            /* viewport:375-960px  16-20px */
            font-size:clamp(1rem, calc(0.84rem + 0.684vw), 1.25rem);
            font-weight:normal;
        }
        & figcaption .area {
            display:grid;
            grid-template-columns:auto 1fr;
            margin-bottom:0.5em;
        }
        & .others {
            display:flex;
            justify-content:end;
            gap:1.15em;
            /* viewport:375-960px  20-35px */
            margin-top:clamp(1.25rem, calc(0.649rem + 2.564vw), 2.188rem);
            /* viewport:375-960px  13-20px */
            font-size:clamp(0.813rem, calc(0.532rem + 1.197vw), 1.25rem);
            font-weight:bold;
        }
        & .others a { color:#000; text-underline-offset:0.15em;}

        & ul.past .others:before {
            content:"終了";
            display:block;
            padding-block:3px;
            width:7em;
            color:#fff;
            font-size:0.85em;
            text-align:center;
            border-radius:6px;
            background-color:#7B7B7B;
        }
    }
}
@media (width < 960px) {
    .event {

        & .img img { position:static;}
        & :nth-child(2 of .sub_wrap) .img { margin:15px auto 0; width:fit-content;}
        & :nth-child(3 of .sub_wrap) {
            display:flex;
            flex-direction:column;
            align-items:center;

            & .img1 { align-self:end; width:min(530px, 69.9056%);}
            & .img2 { align-self:start; width:min(261px, 37.3414%); margin-top:-70px;}
        }
    }
}
@media (width < 768px) {
    .event {

        & .event_wrap {
            
            & ul { grid-template-columns:1fr; row-gap:0; border:none; padding-bottom:0;}
            & li { border-bottom:var(--border); padding-inline:var(--padding-inline); padding-bottom:var(--border-padding);}
            & li + li { 
                /* viewport:375-960px  32-42.5x */
                margin-top:clamp(2rem, calc(1.579rem + 1.795vw), 2.656rem);
            }
        }
    }
}



/* ==================================================
    pageTop
==================================================*/
.pageTop_wrap { position:sticky; bottom:0; z-index:calc(var(--base-z-index) + 100);}
#pageTop {
    --inset:20px;

    position:absolute;
    inset:auto var(--inset) var(--inset) auto;
    display:grid;
    place-items:center;
    width:64px;
    height:auto;
    aspect-ratio:1;
    border:none;
    border-radius:50%;
    background-color:#21A4EA;
    cursor:none;
    pointer-events:none;
    opacity:0;
    transition:opacity var(--trans);

    &.active { opacity:1; cursor:pointer; pointer-events:auto;}
}




/* ==================================================
    footer
==================================================*/
footer {
    background-color:rgb(136 222 244 / 0.24);
    padding-top:49px;
    padding-bottom:53px;

    & .content_wrap {
        display:grid;
        grid-template:
            ".. logo logo .. " auto
            "add add copy copy" 1fr / auto auto auto auto;
        gap:0 1rem;
    }
    & .logo   {
        grid-area:logo;
        justify-self:center;
        width:391px;
    }
    & address {
        grid-area:add;
        margin-top:53px;
        font-size:16px;

        & b {
            display:block;
            font-weight:400;
            font-size:19px;
        }
    }
    & .copy {
        grid-area:copy;
        justify-self:end;
        align-self:end;
        font-size:15px;
    }
}
@media (width < 960px) {
    footer {

        & .content_wrap {
            grid-template:
                "logo" auto
                "add" auto
                "copy" 1fr / 1fr;
        }
        & address { justify-self:center; margin-top:32px;}
        & .copy { justify-self:center; margin-top:18px;}
    }
}
@media (width < 768px){
    footer {

        & .logo { width:min(391px, 75%);}
        & address { font-size:14px;}
        & address b { font-size:17px;}
        & .copy { font-size:13px;}
    }
}