.indented
{
    ol
    {
        padding-left: 23px;

        li:not(:first-child)
        {
            margin-top: 1lh;
        }
    }
}

.arrow
{
    --w: 5px;

    position: relative;

    .line
    {
        border-radius: 1000px;
        background-color: #000;
    }

    .arrowStart, .arrowEnd
    {
        position: absolute;
        background-color: #000;
    }

    .label
    {
        position: absolute;
    }
}

.arrow.vertical
{
    .line
    {
        width: var(--w);
        height: 100%;
        margin: 0 auto;
    }

    .arrowStart, .arrowEnd
    {
        width: 15px;
        height: 15px;
        transform: translateX(-50%);
    }

    .arrowStart
    {
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        top: 0;
        left: 50%;
    }

    .arrowEnd
    {
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        bottom: 0;
        left: 50%;
    }

    .label
    {
        top: 50%;
        left: 50%;
        margin: 0 8px;
        transform: translate(0, -50%);
    }
}

.arrow.vertical:has(.arrowStart)
{
    padding-top: 3px;
}

.arrow.vertical:has(.arrowEnd)
{
    padding-bottom: 3px;
}

.arrow.horizontal
{
    .line
    {
        width: 100%;
        height: var(--w);
        margin: auto 0;
    }

    .arrowStart, .arrowEnd
    {
        width: 15px;
        height: 15px;
        transform: translateY(-50%);
    }

    .arrowStart
    {
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
        top: 50%;
        left: 0;
    }

    .arrowEnd
    {
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        top: 50%;
        right: 0;
    }

    .label
    {
        top: 0;
        left: 50%;
        margin: 8px 0;
        transform: translate(-50%, 0);
    }
}

.arrow.horizontal:has(.arrowStart)
{
    padding-left: 3px;
}

.arrow.horizontal:has(.arrowEnd)
{
    padding-right: 3px;
}

.chart
{
    --blur: 0px;
    --opacity: 40%;

    > .frame
    {
        margin: 0.3lh 5px 5px 5px;
    }

    .frame
    {
        padding: 10px;
        border-radius: 10px;
        box-shadow: 3px 3px var(--blur) 0 color-mix(in srgb, var(--c-black), transparent var(--opacity));

        .frame
        {
            margin: 10px;
        }
    }

    .lv0
    {
        background-color: #EDEDED;
        border: solid 1px #DCDCDC;
    }

    .turquoise
    {
        background-color: color-mix(in srgb, #81C7DA, transparent 90%);
        border: solid 1px #81C7DA;
        box-shadow: 3px 3px var(--blur) 0 color-mix(in srgb, #81C7DA, transparent var(--opacity));
    }

    .green
    {
        background-color: color-mix(in srgb, #98DA98, transparent 90%);
        border: solid 1px #98DA98;
        box-shadow: 3px 3px var(--blur) 0 color-mix(in srgb, #98DA98, transparent var(--opacity));
    }

    .lightOrange
    {
        background-color: color-mix(in srgb, #D9B285, transparent 90%);
        border: solid 1px #D9B285;
        box-shadow: 3px 3px var(--blur) 0 color-mix(in srgb, #D9B285, transparent var(--opacity));
    }

    .blue
    {
        background-color: color-mix(in srgb, #95B0DA, transparent 90%);
        border: solid 1px #95B0DA;
        box-shadow: 3px 3px var(--blur) 0 color-mix(in srgb, #95B0DA, transparent var(--opacity));
    }

    .flowSub
    {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        > .flxCol
        {
            justify-content: space-between;
        }

        h3
        {
            text-align: center;
        }
    }
}

#centerWrapper
{
    overflow: auto;
    position: relative;
    padding: 1lh;
    border-radius: 15px;
}

#centerWrapper.scroll
{
    box-shadow: inset 0 0 20px 4px #00000014;
}

#a
{
    @media screen and (max-width: 1400px)
    {
        display: block;

        #a-a
        {
            display: flex;

            .chart
            {
                margin-top: 0;
            }
        }

        h2.underlined
        {
            margin-top: 2lh;
            display: flex;
        }
    }

    @media screen and (max-width: 770px)
    {
        #a-a
        {
            display: block;

            .chart
            {
                margin-top: 1lh;
            }
        }
    }
}

#b
{
    #b-a
    {
        display: flex;

        #b-a-b
        {
            max-width: 683px;
        }

        @media screen and (max-width: 1096px)
        {
            display: block;

            #b-a-b
            {
                margin-top: 1lh;
            }
        }
    }
}

#center
{
    min-width: max-content;
    position: relative;
    margin: 0;
}

#arrowA, #arrowB
{
    .line, .arrowStart, .arrowEnd
    {
        background-color: var(--c-yellow);
    }
}

.arrowC
{
    .line, .arrowStart, .arrowEnd
    {
        background-color: var(--c-blue);
    }
}

.contacts
{
    flex-wrap: wrap;
    padding: 5px 0 0 0;

    .contact
    {
        display: flex;
        align-items: center;
        margin: 3px;
    }

    .icon
    {
        --size: 1lh;
        width: var(--size);
        height: var(--size);
        min-width: var(--size);
        min-height: var(--size);
        background-color: var(--c-black);
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
    }

    .icon.phone
    {
        mask-image: var(--icon-phone);
    }

    .icon.map
    {
        mask-image: var(--icon-map);
    }

    .icon.fax
    {
        mask-image: var(--icon-fax);
    }

    .icon.mail
    {
        mask-image: var(--icon-mail);
    }

    .icon + span
    {
        margin:0 20px 0 10px;
    }

    .contact.address
    {
        text-decoration: underline;
    }
}

.office
{
    align-items: center;
    grid-template-columns: 160px 1fr 160px 1fr;
    grid-row-gap: 4px;
    min-width: 0;

    *
    {
        min-width: 0;
    }

    .officeName
    {
        grid-area: 1/1/2/-1;
        background-color: color-mix(in srgb, var(--c-logo), transparent 60%);
        padding: 8px;
        mask: linear-gradient(-45deg,#0000 5.66px,#000 0 calc(100% - 5.66px),#0000 0);
    }

    .contacts
    {
        grid-area: 2/2/3/-1;
        padding: 0;
        align-items: center;
    }

    .label
    {
        padding: 8px;
        margin-right: 5px;
        height: 100%;
        background-color: color-mix(in srgb, var(--c-logo), transparent 80%);
        white-space: nowrap;
        mask: linear-gradient(-45deg,#0000 5.66px,#000 0 calc(100% - 5.66px),#0000 0);
    }

    .hFull
    {
        padding-top: 8px;
    }

    @media screen and (max-width: 1145px)
    {
        grid-template-columns: min-content auto;
    }
}

#ohkubo, #abiko, #kuranami
{
    .specialists
    {
        .label
        {
            grid-area: 3 / 1 / 5 / 2;
        }

        .label + p, .label + div
        {
            grid-area: 3 / 2 / 5 / 3;
        }
    }

    .enrolment
    {
        .label
        {
            grid-area: 5 / 1 / 8 / 2;
        }

        .label + p, .label + div
        {
            grid-area: 5 / 2 / 8 / 3;
        }
    }

    .responsive, .openDays, .openTime, .groupHome, .since
    {
    }

    @media screen and (max-width: 1145px)
    {
        .specialists
        {
            .label
            {
                grid-area: auto;
            }

            .label + p, .label + div
            {
                grid-area: auto;
            }
        }

        .enrolment
        {
            .label
            {
                grid-area: auto;
            }

            .label + p, .label + div
            {
                grid-area: auto;
            }
        }
    }

}

.material a
{
    grid-column: 2 / -1;
}

.images
{
    width: 100%;
    min-width: 0;
    max-width: 100%;

    a
    {
        min-width: 0;
    }

    figure
    {
        width: fit-content;
        min-width: 0;
        margin: auto;
    }

    img
    {
        border-radius: 3px;
        pointer-events: none;
        visibility: hidden;
        position: absolute;
    }
}

#a-a
{
    display: flex;
    flex-wrap: wrap;
}

#a-b-a
{
    display: flex;
    flex-wrap: wrap;
}

@media (hover: hover) and (pointer: fine)
{
    .office.grid
    {
        @media screen and (max-width: 722px)
        {
            font-size: 2.2vw;
        }
    }
}
@media (hover: none) and (pointer: coarse)
{
    .office.grid
    {
        @media screen and (max-width: 654px)
        {
            font-size: 2.3vw;
        }
    }
}