@charset "UTF-8";
/* heading
------------------------*/
article div.wrapper div.content div.header {
  width: 100%;
  border-bottom: 1px solid #b49b46;
  position: relative;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-bottom: 20px;
}

article div.wrapper div.content div.header h1 {
  font-size: 30px;
  font-weight: 400;
  font-family: "Yu Mincho", "YuMincho", serif;
  letter-spacing: 2px;
}

/* content
------------------------*/
.storys {
    --shinri: #75ccf3;
    --kodomo: #f5b8d3;
    --manage: #f8bc60;
    --hoiku: #c8de86;
    --eiyo: #fedc68;
    * {
        box-sizing: border-box;
    }
    img {
        display: block;
        height: auto;
    }
    .ib {
        display: inline-block;
    }
    margin-block-start: min(7.6vw, 33px);
    container-type: inline-size;
}
.storys__logo {
    width: min(73.3%, 349px);
    margin-inline: auto;
}
.storys__innav {
    font-size: min(3.6vw, 16px);
    font-weight: 700;
    margin-block-start: 1em;
    margin-block-end: min(13.3vw, 60px);
    ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        gap: 1.05em;
    }
    li {
        text-align: center;
        a {
            display: grid;
            place-items: center;
            place-content: center;
            height: 3.875em;
            width: 12.8em;
            border-radius: 100vmax;
            border: 2px solid currentColor;
            line-height: 1.31;
            transition: all .3s;
            background-color: var(--color);
            color: #fff;
            &:focus-visible {
                background-color: var(--color);
                color: #fff;
            }
            @media (any-hover: hover) and (pointer: fine) {
                background-color: #fff;
                color: var(--color);
                &:hover {
                    background-color: var(--color);
                    color: #fff;
                }
            }
        }
        &:first-of-type {
            --color: var(--shinri);
        }
        &:nth-of-type(2) {
            --color: var(--kodomo);
        }
        &:nth-of-type(3) {
            --color: var(--manage);
        }
        &:nth-of-type(4) {
            --color: var(--hoiku);
        }
        &:nth-of-type(5) {
            --color: var(--eiyo);
        }
    }
    @container (max-width: 500px) {
        ul {
            width: min(27em, 100%);
            margin-inline: auto;
            justify-content: space-between;
            gap: 1.07em 0;
        }
        span {
            display: inline-block;
        }
    }
}
.storys__box {
    border: 2px solid currentColor;
    color: var(--color);
    background-size: 100%;
    background-repeat: repeat-y;
}

.storys__heading {
    width: auto;
    font-size: 20px;
    font-weight: 700;
    padding-block: 1em;
    padding-inline: 1.25em;
    display: grid;
    grid-template-columns: 1fr 1.8em;
    align-items: center;
    gap: 1em;
    border: none;
    margin: 0;
    background-color: #fff;
    cursor: pointer;
    &::after {
        content: "";
        display: block;
        aspect-ratio: 1 / 1;
        border: 1px solid #fff;
        border-radius: 50%;
        background-image: url(../img/storys/arrow.svg);
        background-size: .85em;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: var(--color);
        rotate: 180deg;
    }
    &.open {
        background-color: var(--color);
        color: #fff;
        &::after {
            rotate: initial;
        }
    }
    .-s {
        font-size: .65em;
    }
    @container (max-width: 500px) {
        font-size: 18px;
        &::after {
            border-width: 2px;
        }
    }
}

.storys__cont {
    position: relative;
    z-index: 1;
    font-size: 15px;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s;
    &>section {
        overflow: hidden;
        .-p-1 {
            opacity: 0;
            visibility: hidden;
            transition: opacity .3s ease, visibility .3s ease;
        }
    }
    &.open {
        /* display: block; */
        grid-template-rows: 1fr;
        &>section {
            .-p-1 {
                opacity: 1;
                visibility: visible;
            }
        }
    }
}
.storys__cont-heading {
    background-color: #fff;
    padding-inline: 1.33em;
    padding-block-start: 1.26em;
    padding-block-end: 2.8em;
    clip-path: polygon(0% 0%, 100% 0%, 100% 52%, 0% 100%);
    position: relative;
    z-index: 1;
    margin-block-end: 2em;
    img {
        width: 66.6%;
    }
    @container (max-width: 500px) {
        margin-block-end: .4em;
    }
}
.storys__cont-1 {
    .-p-1 {
        position: absolute;
        top: 0;
        right: 1.4%;
        z-index: 2;
        width: 33.79%;
    }
}
.storys__cont-2 {
    .-p-1 {
        position: absolute;
        top: 0;
        right: 6.4%;
        z-index: 2;
        width: 27.27%;
    }
}
.storys__cont-3 {
    .-p-1 {
        position: absolute;
        top: 0;
        right: .22%;
        z-index: 2;
        width: 28.5%;
        @container (max-width: 500px) {
            top: 4px;
            right: .5%;
            width: 35%;
        }
    }
}
.storys__cont-4 {
    .-p-1 {
        position: absolute;
        top: 0;
        right: 7.5%;
        z-index: 2;
        width: 29%;
    }
}
.storys__cont-5 {
    .-p-1 {
        position: absolute;
        top: 0;
        right: 9.4%;
        z-index: 2;
        width: 25%;
        @container (max-width: 500px) {
            width: 32%;
        }
    }
}

.storys__card {
    background-color: #fff;
    border-radius: 20px;
    padding-block: 2em;
    padding-inline: 2em;
    margin-inline: 2.13em;
    position: relative;
    z-index: 3;
    display: grid;
    gap: .8em;
    @container (max-width: 500px) {
        border-radius: 15px;
        padding-block: 1.5em;
        padding-inline: 1.13em;
        gap: .8em 0;
        margin-inline: 1.33em;
    }
    .-card-ttl {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.45;
        text-align: center;
        grid-row: 1 / 2;
        grid-column: 1 / 3;
        margin-block-end: 1em;
        @container (max-width: 500px) {
            font-size: 18px;
        }
    }
    .-txt {
        display: block;
        font-size: 1em;
        font-weight: 500;
        line-height: 1.6;
        color: #000;
    }
    &.-card-type01 {
        grid-template-columns: 1fr 60%;
        img {
            grid-column: 1 / 2;
            &:first-of-type {
                width: 121.7%;
                margin-inline-start: -21.7%;
            }
            &:nth-of-type(2) {
                width: 63%;
                margin-inline: auto 24%;
            }
        }
        .-txt {
            grid-column: 2 / 3;
            grid-row: 2 / 4;
        }
        @container (max-width: 500px) {
            grid-template-columns: 1fr;
            img {
                &:first-of-type {
                    width: 100%;
                    margin-inline: auto;
                }
                &:nth-of-type(2) {
                    width: 51.2%;
                    margin-inline: auto;
                }
            }
            .-txt {
                grid-column: 1 / 2;
                grid-row: 4 / 5;
                margin-block-start: 1em;
            }
        }
    }
    &.-card-type02 {
        grid-template-columns: 60% 1fr;
        margin-block-start: 2.67em;
        .-imgs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 9.26%;
            grid-column: 1 / 2;
            img {
                width: 100%;
            }
        }
        .-txt {
            grid-column: 1 / 2;
        }
        .-p-2 {
            grid-column: 2 / 3;
            grid-row: 2 / 4;
        }
        @container (max-width: 500px) {
            grid-template-columns: 1fr;
            margin-block-start: 2em;
            .-imgs {
                gap: 1.33em;
                margin-block-end: 1em;
            }
            .-p-2 {
                grid-column: 1 / 2;
                grid-row: 4 / 5;
            }
        }
    }
    &.-card-type03 {
        grid-template-columns: 1fr 67.5%;
        gap: 0;
        margin-inline: 0;
        &>img {
            width: 160%;
            margin-inline-start: -54%;
            grid-column: 1 / 2;
            grid-row: 2 / 3;
        }
        .-txt {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }
        .-imgs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-column: 1 / 3;
            gap: 2em;
            margin-block-start: 2em;
            img {
                width: 100%;
            }
        }
        @container (max-width: 500px) {
            grid-template-columns: 1fr;
            &>img {
                width: 100%;
                margin-inline: auto;
                
            }
            .-txt {
                grid-column: 1 / 2;
                grid-row: 3 / 4;
            }
            .-imgs {
                grid-template-columns: 1fr;
                gap: 1em;
                grid-column: 1 / 2;
                margin-block-start: 1em;
            }
        }
    }
    &.-card-type04 {
        grid-template-columns: 67.5% 1fr;
        gap: 0;
        margin-inline: 0;
        padding-block-end: 0;
        margin-block-start: 2.67em;
        .-imgs {
            grid-column: 1 / 3;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2em;
            margin-block-end: 2em;
            img {
                width: 100%;
            }
        }
        .-txt {
            grid-column: 1 / 2;
            padding-block-end: 1em;
        }
        &>img {
            grid-column: 2 / 3;
            width:  130%;
            align-self: end;
        }
        @container (max-width: 500px) {
            grid-template-columns: 1fr;
            margin-inline: 0;
            margin-block-start: 2.67em;
            .-imgs {
                grid-column: 1 / 2;
                grid-template-columns: 1fr;
                gap: 1em;
                margin-block-end: 1em;
            }
            &>img {
                grid-column: 1 / 2;
                width: 100%;
            }
        }
    }
    &.-card-type05 {
        grid-template-columns: 1fr 60.4%;
        img {
            &:first-of-type {
                grid-column: 1 / 2;
                width: 125%;
                margin-inline-start: -25%;
                margin-block-start: 1em;
            }
            &:last-of-type {
                grid-column: 1 / 3;
                margin-block-start: 1em;
                width: 100%;
            }
        }
        @container (max-width: 500px) {
            grid-template-columns: 1fr;
            img {
                &:first-of-type {
                    width: 100%;
                    margin-inline: auto;
                    margin-block-start: -1em;
                }
                &:nth-of-type(2) {
                    width: 100%;
                }
            }
            .-txt {
                grid-column: 1 / 2;
                grid-row: 3 / 4;
            }
        }
    }
    &.-card-type06 {
        grid-template-columns: 1fr;
        gap: 0;
        margin-block-start: 2.67em;
        .-inner {
            display: grid;
            grid-template-columns: 60.4% 1fr;
        }
        :nth-child(1 of .-card-ttl) {
            grid-row: 1 / 2;
        }
        :nth-child(1 of .-inner) {
            grid-row: 2 / 3;
            gap: 1em;
            align-items: center;
            img {
                width: 100%;
            }
        }
        :nth-child(2 of .-card-ttl) {
            grid-row: 3 / 4;
            margin-block-start: 1em;
        }
        :nth-child(2 of .-inner) {
            grid-row: 4 / 5;
            .-wide {
                width: 105%;
            }
            .-narrow {
                display: none;
            }
        }
        &>img {
            grid-row: 5 / 6;
            width: 100%;
        }
        @container (max-width: 500px) {
            margin-block-start: 2em;
            .-inner {
                grid-template-columns: 1fr;
            }
            :nth-child(1 of .-inner) {
                .-txt {
                    order: 2;
                }
                img {
                    order: 1;
                }
            }
            :nth-child(2 of .-inner) {
                .-txt {
                    order: 2;
                }
                .-wide {
                    display: none;
                }
                .-narrow {
                    display: block;
                    width: 100%;
                    order: 1;
                    margin-block-end: 1em;
                }
            }
            &>img {
                margin-block-start: 1em;
            }
        }
    }
    &.-card-type07 {
        grid-template-columns: 1fr;
        gap: 0;
        margin-inline: 0;
        padding-block-end: 0;
        .-inner {
            display: grid;
            grid-template-columns: 1fr 67.5%;
        }
        :nth-child(1 of .-card-ttl) {
            grid-row: 1 / 2;
        }
        :nth-child(1 of .-inner) {
            grid-row: 2 / 3;
            gap: 2em;
            margin-block-end: 2em;
            img {
                width: 100%;
            }
        }
        :nth-child(2 of .-card-ttl) {
            grid-row: 3 / 4;
        }
        :nth-child(2 of .-inner) {
            grid-row: 4 / 5;
            .-imgs {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: auto 1fr;
                img {
                    &:first-of-type {
                        width: 150%;
                        margin-inline-start: -55%;
                        margin-block-start: 2em;
                    }
                    &:nth-of-type(2) {
                        width: 133%;
                        margin-inline-start: -38%;
                        align-self: end;
                    }
                }
            }
            .-txts {
                img {
                    width: 100%;
                    margin-block: 2em;
                }
            }
        }
        @container (max-width: 500px) {
            .-inner {
                grid-template-columns: 1fr;
            }
            :nth-child(1 of .-inner) {
                img {
                    width: 65.5%;
                    margin-inline: auto;
                }
            }
            :nth-child(2 of .-inner) {
                .-imgs {
                    margin-block-end: 1em;
                    img {
                        &:first-of-type {
                            width: 108%;
                            margin-inline-start: -4%;
                            margin-block-start: 1em;
                        }
                        &:nth-of-type(2) {
                            width: 100%;
                            margin-inline: auto;
                        }
                    }
                }
            }
        }
    }
    &.-card-type08 {
        grid-template-columns: 1fr;
        gap: 0;
        margin-inline: 0;
        margin-block-start: 2.67em;
        .-inner {
            display: grid;
            grid-template-columns: 67.5% 1fr;
        }
        :nth-child(1 of .-card-ttl) {
            grid-row: 1 / 2;
        }
        :nth-child(1 of .-inner) {
            grid-row: 2 / 3;
            margin-block-end: 2em;
            img {
                width: 130%;
                margin-block-start: 1.4em;
                margin-inline-start: 5%;
            }
        }
        :nth-child(2 of .-card-ttl) {
            grid-row: 3 / 4;
        }
        :nth-child(2 of .-inner) {
            grid-row: 4 / 5;
            .-txt {
                margin-block-end: 2em;
            }
            img {
                width: 100%;
                margin-inline-start: 8%;
                align-self: end;
            }
        }
        .-imgs {
            grid-row: 5 / 6;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2em;
            img {
                width: 100%;
            }
        }
        @container (max-width: 500px) {
            margin-block-start: 2.67em;
            .-inner {
                grid-template-columns: 1fr;
            }
            :nth-child(1 of .-inner) {
                margin-block-end: 0;
                img {
                    width: 108%;
                    margin-inline-start: -4%;
                }
            }
            :nth-child(2 of .-inner) {
                img {
                    width: 80%;
                    margin-inline: auto;
                }
            }
            .-imgs {
                grid-template-columns: 1fr;
                gap: 1.3em;
            }
        }
    }
    &.-card-type09 {
        grid-template-columns: 1fr 67.5%;
        margin-inline: 0;
        gap: 0;
        &>img {
            &:first-of-type {
                grid-row: 2 / 3;
                width: 155%;
                margin-inline-start: -60%;
                align-self: center;
            }
            &:nth-of-type(2) {
                width: 100%;
                grid-row: 3 / 4;
                margin-inline-start: -4%;
                align-self: end;
            }
        }
        .-txt {
            grid-row: 2 / 4;
            padding-block-end: 1em;
        }
        .-imgs {
            grid-column: 1 / 3;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2em;
            img {
                width: 100%;
            }
        }
        @container (max-width: 500px) {
            grid-template-columns: 1fr;
            &>img {
                &:first-of-type {
                    width: 100%;
                    margin-inline: auto;
                }
                &:nth-of-type(2) {
                    width: 58%;
                    margin-inline: auto;
                    margin-block: 1em;
                }
            }
            .-txt {
                grid-row: 4 / 5;
            }
            .-imgs {
                grid-template-columns: 1fr;
                gap: 1em;
            }
        }
    }
    &.-card-type10 {
        grid-template-columns: 62% 5% 1fr;
        grid-template-rows: max-content max-content;
        margin-inline: 0;
        margin-block-start: 2.67em;
        gap: 0;
        .-card-ttl {
            grid-column: 1 / 4;
        }
        .-img1 {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
            width: 93%;
        }
        .-img2 {
            grid-column: 2 / 4;
            grid-row: 3 / 4;
            width: 128%;
            margin-block-start: -6.8em;
        }
        .-txt {
            grid-column: 1 / 3;
            grid-row: 3 / 4;
            margin-block-start: 1em;
        }
        @container (max-width: 500px) {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            margin-block-start: 2em;
            .-card-ttl {
                grid-column: 1 / 2;
            }
            .-img1 {
                width: 100%;
            }
            .-img2 {
                grid-column: 1 / 2;
                grid-row: 4 / 5;
                width: 100%;
                margin-block-start: 1em;
            }
            .-txt {
                grid-column: 1 / 2;
            }
        }
    }
    &.-card-type11 {
        grid-template-columns: 1fr 67.5%;
        img {
            width: 130%;
            margin-inline-start: -30%;
        }
        @container (max-width: 500px) {
            grid-template-columns: 1fr;
            img {
                width: 100%;
                margin-inline: auto;
                grid-row: 2 / 3;
            }
            .-txt {
                grid-row: 3 / 4;
            }
        }
    }
    &.-card-type12 {
        grid-template-columns: 1fr;
        margin-block-start: 2.67em;
        .-inner {
            display: grid;
            grid-template-columns: 67.5% 1fr;
            .-txt {
                grid-column: 1 / 2;
            }
            .-img1 {
                grid-column: 1 / 2;
                width: 100%;
                margin-block-end: 2em;
            }
            .-img2 {
                grid-column: 2 / 3;
                grid-row: 1 / 3;
                width: 86%;
                justify-self: end;
                margin-block-start: -1.5em;
            }
            .-img3 {
                grid-column: 2 / 3;
                width: 131%;
                margin-inline-start: 1em;
            }
        }
        :nth-child(1 of .-card-ttl) {
            grid-row: 1 / 2;
        }
        :nth-child(1 of .-inner) {
            grid-row: 2 / 3;
        }
        :nth-child(2 of .-card-ttl) {
            grid-row: 3 / 4;
        }
        :nth-child(2 of .-inner) {
            grid-row: 4 / 5;
        }
        @container (max-width: 500px) {
            margin-block-start: 2em;
            gap: 0;
            .-inner {
                grid-template-columns: 1fr;
                .-img1 {
                    grid-column: 1 / 2;
                }
                .-img2 {
                    grid-column: 1 / 2;
                    grid-row: 3 / 4;
                    width: 60%;
                    margin-block-start: 1em;
                    justify-self: center;
                }
                .-img3 {
                    grid-column: 1 / 2;
                    width: 100%;
                    margin-inline: auto;
                    margin-block-start: 1em;
                }
            }
            :nth-child(1 of .-inner) {
                margin-block-end: 2em;
            }
        }
    }
    &.-card-type13 {
        grid-template-columns: 1fr;
        margin-inline: 0;
        gap: 0;
        .-inner {
            display: grid;
            grid-template-columns: 1fr 67.5%;
        }
        :nth-child(1 of .-card-ttl) {
            grid-row: 1 / 2;
        }
        :nth-child(1 of .-inner) {
            grid-row: 2 / 3;
            img {
                width: 165%;
                margin-inline-start: -70%;
            }
        }
        :nth-child(2 of .-card-ttl) {
            grid-row: 3 / 4;
        }
        :nth-child(2 of .-inner) {
            grid-row: 4 / 5;
            img {
                width: 135%;
                margin-inline-start: -35%;
                align-self: end;
            }
        }
        .-txt {
            padding-block-end: 1em;
        }
        .-imgs {
            grid-row: 5 / 6;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2em;
            margin-block-start: -5px;
            img {
                width: 100%;
            }
        }
        @container (max-width: 500px) {
            .-inner {
                grid-template-columns: 1fr;
            }
            :nth-child(1 of .-inner) {
                img {
                    width: 100%;
                    margin-inline: auto;
                }
            }
            :nth-child(2 of .-inner) {
                img {
                    width: 95%;
                    margin-inline: auto;
                    margin-block-end: 1em;
                }
            }
            .-imgs {
                grid-template-columns: 1fr;
                gap: 1em;
            }
        }
    }
    &.-card-type14 {
        grid-template-columns: 1fr;
        margin-inline: 0;
        margin-block-start: 2.67em;
        gap: 0;
        .-inner {
            display: grid;
            grid-template-columns: 67.5% 1fr;
        }
        :nth-child(1 of .-card-ttl) {
            grid-row: 1 / 2;
        }
        .-imgs {
            grid-row: 2 / 3;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2em;
            margin-block-end: 2em;
            img {
                width: 100%;
            }
        }
        :nth-child(1 of .-inner) {
            grid-row: 3 / 4;
            margin-block-end: 2em;
            img {
                width: 111.5%;
                margin-inline-start: 5%;
            }
        }
        :nth-child(2 of .-card-ttl) {
            grid-row: 4 / 5;
        }
        :nth-child(2 of .-inner) {
            grid-row: 5 / 6;
            img {
                width: 127%;
                align-self: center;
                margin-inline-start: 5%;
            }
        }
        @container (max-width: 500px) {
            margin-block-start: 2em;
            .-inner {
                grid-template-columns: 1fr;
            }
            .-imgs {
                grid-template-columns: 1fr;
                gap: 1em;
            }
            :nth-child(1 of .-inner) {
                img {
                    width: 100%;
                    margin-inline: auto;
                    margin-block-start: 1em;
                }
            }
            :nth-child(2 of .-inner) {
                img {
                    width: 100%;
                    margin-block-start: 1em;
                    margin-inline: auto;
                }
            }
        }
    }
    &.-card-type15 {
        grid-template-columns: 1fr 60.4%;
        padding-block-end: 0;
        .-inner1 {
            padding-block-end: 2em;
            img {
                &:first-of-type {
                    width: 121.5%;
                    margin-inline-start: -21.5%;
                }
                &:nth-of-type(2) {
                    width: 112.5%;
                    margin-inline-start: -12.5%;
                }
            }
        }
        .-inner2 {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr max-content;
            img {
                width: 71.6%;
                margin-inline: auto 2em;
            }
        }
        @container (max-width: 500px) {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;
            .-inner1 {
                grid-column: 1 / 2;
                grid-row: 2 / 3;
                img {
                    &:first-of-type {
                        width: 100%;
                        margin-inline: auto;
                    }
                    &:nth-of-type(2) {
                        width: 87%;
                        margin-inline: auto;
                    }
                }
            }
            .-inner2 {
                grid-column: 1 / 2;
                grid-row: 3 / 4;
                img {
                    width: 64%;
                    margin-inline: auto;
                }
            }
        }
    }
    &.-card-type16 {
        grid-template-columns: 60.4% 1fr;
        margin-block-start: 2.67em;
        :nth-child(1 of img) {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
            width: 91%;
        }
        .-txt {
            grid-column: 1 / 2;
            grid-row: 3 / 4;
        }
        :nth-child(2 of img) {
            grid-column: 2 / 3;
            grid-row: 2 / 4;
            width: 96%;
            justify-self: end;
            margin-block-start: -2em;
        }
        :nth-child(3 of img) {
            grid-column: 1 / 3;
            grid-row: 4 / 5;
            width: 100%;
        }
        @container (max-width: 500px) {
            margin-block-start: 2em;
            grid-template-columns: 1fr;
            :nth-child(1 of img) {
                width: 100%;
            }
            :nth-child(2 of img) {
                grid-column: 1 / 2;
                grid-row: 4 / 5;
                width: 72%;
                justify-self: center;
                margin-block-start: 0;
            }
            :nth-child(3 of img) {
                grid-column: 1 / 2;
                grid-row: 5 / 6;
                margin-block-start: 1em;
            }
        }
    }
    &.-card-type17 {
        margin-block-start: 2.67em;
        grid-template-columns: 1fr;
        margin-inline: 0;
        gap: 0;
        .-inner {
            display: grid;
            grid-template-columns: 67.5% 1fr;
        }
        :nth-child(1 of .-card-ttl) {
            grid-row: 1 / 2;
        }
        :nth-child(1 of .-inner) {
            grid-row: 2 / 3;
            margin-block-end: 2em;
            img {
                width: 80%;
                justify-self: end;
                margin-block-start: -1em;
            }
        }
        :nth-child(2 of .-card-ttl) {
            grid-row: 3 / 4;
        }
        :nth-child(2 of .-inner) {
            grid-row: 4 / 5;
            .-txt {
                grid-row: span 2;
                padding-block-end: 1em;
            }
            img {
                &:first-of-type {
                    width: 131.4%;
                }
                &:nth-of-type(2) {
                    width: 89%;
                    grid-column: 2 / 3;
                    grid-row: 2 / 3;
                    align-self: end;
                }
            }
        }
        .-imgs {
            grid-row: 5 / 6;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2em;
            margin-block-start: -5px;
            img {
                width: 100%;
            }
        }
        @container (max-width: 500px) {
            margin-block-start: 2em;
            .-inner {
                grid-template-columns: 1fr;
            }
            :nth-child(1 of .-inner) {
                img {
                    width: 56%;
                    justify-self: center;
                    margin-block-start: 1em;
                }
            }
            :nth-child(2 of .-inner) {
                .-txt {
                    grid-row: 1 / 2;
                }
                img {
                    &:first-of-type {
                        width: 100%;
                    }
                    &:nth-of-type(2) {
                        width: 58%;
                        grid-column: 1 / 2;
                        grid-row: 3 / 4;
                        justify-self: center;
                    }
                }
            }
            .-imgs {
                grid-template-columns: 1fr;
                gap: 1em;
            }
        }
    }
}

.story__present {
    position: relative;
    z-index: 1;
    .-present-ttl {
        position: relative;
        z-index: 1;
        width: 100%;
        aspect-ratio: 165 / 73;
        margin-block-end: 0;
        display: grid;
        grid-template-columns: 1fr 32.5% calc(4.6% + 2em);
        grid-template-rows: 1fr;
        .-floating-img {
            grid-row: 1 / 2;
            grid-column: 1 / 2;
            align-self: end;
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            img {
                position: absolute;
                bottom: 0;
            }
        }
        &>img {
            position: relative;
            z-index: 2;
            grid-row: 1 / 2;
            grid-column: 2 / 3;
            align-self: center;
            margin-block-start: 25%;
            width: 100%;
        }
        &::before {
            content: "";
            width: 100%;
            height: 90%;
            background-color: #fff;
            grid-area: 1 / 1 / 2 / 4;
            z-index: 1;
            clip-path: polygon(0% 0%, 100% 40%, 100% 100%, 0% 60%);
            align-self: center;
        }
        @container (max-width: 500px) {
            grid-template-columns: 1fr 32.7% calc(3.6% + 1.33em);
            margin-block-start: 1em;
        }
    }
    .-present-wrap {
        font-size: 15px;
        display: grid;
        grid-template-columns: 2.67em 1fr;
        gap: 0 1.6em;
        padding-inline: 2em;
        .-card-ttl {
            text-align: start;
        }
        ul {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(2, 1fr);
            position: relative;
            z-index: 4;
            li {
                background-image: radial-gradient(#fff 30%, transparent 30%);
                background-size: 1em 1em;
                background-position: center;
                background-repeat: repeat-y;
                &>span {
                    aspect-ratio: 1 / 1;
                    border-radius: 50%;
                    background-color: #e7d04e;
                    display: grid;
                    place-content: center;
                    place-items: center;
                    font-size: .714em;
                    font-weight: 500;
                    text-align: center;
                    color: #000;
                    line-height: 1;
                    .-s {
                        display: block;
                        font-size: .714em;
                        font-weight: 400;
                    }
                }
                &.-third {
                    padding-block-start: 2em;
                }
                &.-fourth {
                    background-image: none;
                }
                &.-second {
                    height: 80%;
                    align-content: end;
                }
            }
        }
        @container (max-width: 500px) {
            grid-template-columns: 3em 1fr;
            gap: 0 1em;
            padding-inline: 1.33em;
            .-card-ttl {
                text-align: center;
            }
            ul {
                li {
                    &>span {
                        font-size: 1.13em;
                        .-s {
                            font-size: .706em;
                        }
                    }
                    &.-third {
                        padding-block-start: 12em;
                    }
                }
            }
        }
    }
}
.storys__box-bottom {
    font-size: 15px;
    padding-inline: 2em;
    position: relative;
    z-index: 1;
    margin-block-start: 2em;
    padding-block-start: .8em;
    &::before {
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        background-color: #fff;
        position: absolute;
        inset: 0;
        z-index: -1;
        clip-path: polygon(0% 90px, 100% 0%, 100% 100%, 0% 100%);
    }
    .-data {
        font-size: 16px;
        display: grid;
        grid-template-columns: 1fr 61%;;
        img {
            width: 100%;
        }
        table {
            display: block;
            font-weight: 500;
            color: #000;
            margin-block-start: 2.5em;
            padding-block-end: 2em;
            caption {
                display: block;
                text-align: start;
                font-weight: 500;
                padding-block-end: .8em;
                border-bottom: 2px dotted #d5d5d5;
                margin-block-end: .4em;
                line-height: 1.33;
            }
            tbody {
                display: block;
            }
            tr {
                display: grid;
                grid-template-columns: max-content 1fr;
            }
            th {
                font-weight: 500;
                line-height: 1.46;
                padding-block: .2em;
            }
            td {
                line-height: 1.46;
                padding-block: .2em;
            }
        }
    }
    @container (max-width: 500px) {
        .-data {
            grid-template-columns: 1fr;
            img {
                width: 65%;
                margin-inline: auto;
                max-width: 327px;
            }
            table {
                width: fit-content;
                margin-inline: auto;
                max-width: 90%;
                caption {
                    font-size: 14px;
                    width: fit-content;
                    padding-inline-end: 1.5em;
                }
                th, td {
                    font-size: 13px;
                }
            }
        }
    }
}
.storys__fukidashi {
    font-size: 15px;
    border: 3px solid var(--color);
    border-radius: 2em;
    background-color: #fff;
    padding: 2em;
    position: relative;
    z-index: 1;
    .-svg {
        width: 2em;
        aspect-ratio: 5 / 6;
        position: absolute;
        bottom: calc(-2.5em + 4px);
        left: 2.4em;
        .cls-1 {
            fill: #fff;
        }
        .cls-2 {
            fill: var(--color);
        }
    }
    .-fukidashi-heading {
        color: #d98ac1;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.22;
        text-align: center;
        padding: 0;
    }
    .-txt {
        font-weight: 500;
        line-height: 1.6;
        color: #000;
        margin-block-start: 1em;
    }
    .-inner {
        display: grid;
        grid-template-columns: 54% 1fr;
        img {
            width: 100%;
        }
    }
    @container (max-width: 500px) {
        padding: 1.33em;
        .-inner {
            grid-template-columns: 1fr;
        }
        .-svg {
            transform: scaleX(-1);
            left: 5em;
        }
    }
}

:nth-child(1 of .storys__box) {
    --color: var(--shinri);
    .storys__cont {
        background-image: url(../img/storys/bg-0.png);
    }
    .story__present {
        .-present-ttl {
            .-floating-img {
                img {
                    width: 105%;
                    left: calc(2em + 3.9%);
                }
            }
        }
    }
    .-p-2 {
        width: 107%;
        margin-block-start: -2.2em;
        @container (max-width: 500px) {
            width: 80%;
            margin-block-start: 0;
            margin-inline-start: 10%;
        }
    }
    @container (max-width: 500px) {
        .story__present {
            .-present-ttl {
                .-floating-img {
                    img {
                        width: 105%;
                        left: calc(5.33em - 20%);
                    }
                }
            }
        }
    }
}
:nth-child(2 of .storys__box) {
    --color: var(--kodomo);
    .storys__cont {
        background-image: url(../img/storys/bg-1.png);
    }
    .story__present {
        .-present-ttl {
            .-floating-img {
                img {
                    width: 81%;
                    left: calc(2em + 3.5%);
                }
            }
        }
        .-present-wrap {
            ul {
                li {
                    &.-third {
                        padding-block-start: 7em;
                    }
                }
            }
        }
    }
    .storys__box-bottom {
        .-data {
            grid-template-columns: 1fr 50%;
            img {
                width: 96%;
                margin-block-start: 1em;
            }
        }
    }
    .storys__fukidashi {
        .-inner {
            grid-template-columns: 60% 1fr;
        }
    }
    @container (max-width: 500px) {
        .story__present {
            .-present-ttl {
                .-floating-img {
                    img {
                        width: 81%;
                        left: 1.33em;
                    }
                }
            }
        }
        .storys__box-bottom {
            .-data {
                grid-template-columns: 1fr;
                img {
                    width: 96%;
                }
            }
        }
        .storys__fukidashi {
            .-inner {
                grid-template-columns: 1fr;
            }
        }
    }
}
:nth-child(3 of .storys__box) {
    --color: var(--manage);
    .storys__cont {
        background-image: url(../img/storys/bg-2.png);
    }
    .story__present {
        .-present-ttl {
            .-floating-img {
                img {
                    width: 69%;
                    left: calc(2em + 8.4%);
                    top: 5%;
                    bottom: unset;
                }
            }
        }
    }
    .-card-type01 {
        .-card-ttl {
            margin-block-end: 0;
        }
    }
    .-p-2 {
        width: 95.5%;
        margin-block-start: -2.2em;
        margin-inline-start: 10%;
        @container (max-width: 500px) {
            width: 70%;
            margin-block-start: 0;
            margin-inline-start: 15%;
        }
    }
    .story__present {
        .-present-ttl {
            .-floating-img {
                img {
                    width: 69%;
                    left: calc(2em + 8.4%);
                }
            }
        }
        .-present-wrap {
            ul {
                z-index: 1;
                li {
                    &.-third {
                        padding-block-start: 7em;
                    }
                }
            }
        }
    }
    .storys__box-bottom {
        .-data {
            grid-template-columns: 1fr 55%;
            img {
                width: 100%;
                margin-block-start: 1em;
                margin-inline-start: -8%;
                align-self: end;
            }
        }
    }
    .storys__fukidashi {
        .-inner {
            gap: 1em;
            img {
                width: 100%;
                margin-block-start: 1em;
            }
        }
    }
    @container (max-width: 500px) {
        .story__present {
            .-present-ttl {
                .-floating-img {
                    img {
                        width: 80%;
                        left: calc(5.33em - 24%);
                    }
                }
            }
        }
        .storys__box-bottom {
            .-data {
                grid-template-columns: 1fr;
                img {
                    width: 93%;
                    margin-inline: auto;
                }
            }
        }
    }
}
:nth-child(4 of .storys__box) {
    --color: var(--hoiku);
    .storys__cont {
        background-image: url(../img/storys/bg-3.png);
    }
    .story__present {
        .-present-ttl {
            .-floating-img {
                img {
                    width: 46.5%;
                    left: calc(2em + 30%);
                }
            }
        }
        .-present-wrap {
            ul {
                z-index: 1;
                li {
                    grid-row: span 2;
                }
            }
        }
    }
    .storys__box-bottom {
        .-data {
            grid-template-columns: 1fr 50%;
            img {
                width: 96%;
                margin-block-start: 1em;
            }
        }
    }
    .storys__fukidashi {
        .-inner {
            grid-template-columns: 56% 1fr;
            gap: 1.3%;
            img {
                margin-block-start: 1em;
            }
        }
    }
    @container (max-width: 500px) {
        .story__present {
            .-present-ttl {
                .-floating-img {
                    img {
                        width: 51%;
                        left: 5.33em;
                    }
                }
            }
        }
        .storys__box-bottom {
            .-data {
                grid-template-columns: 1fr;
                img {
                    width: 86%;
                    margin-block-start: 2em;
                }
            }
        }
        .storys__fukidashi {
        .-inner {
            grid-template-columns: 1fr;
            img {
                margin-block-start: 0;
            }
        }
    }
    }
}
:nth-child(5 of .storys__box) {
    --color: var(--eiyo);
    .storys__cont {
        background-image: url(../img/storys/bg-4.png);
    }
    .story__present {
        .-present-ttl {
            .-floating-img {
                img {
                    width: 45.4%;
                    left: calc(2em + 25%);
                }
            }
        }
        .-present-wrap {
            ul {
                z-index: 1;
                li {
                    grid-row: span 2;
                }
            }
        }
    }
    .storys__card {
        &.-card-type13 {
            :nth-child(1 of .-inner) {
                img {
                    margin-block-start: 2em;
                }
            }
            :nth-child(2 of .-inner) {
                img {
                    width: 100%;
                    aspect-ratio: 151 / 221;
                    object-fit: cover;
                    object-position: top center;
                    margin-inline: auto;
                }
            }
        }
    }
    .storys__box-bottom {
        .-data {
            grid-template-columns: 1fr 52%;
            img {
                width: 91%;
                margin-block-start: 2em;
            }
        }
    }
    .storys__fukidashi {
        .-inner {
            gap: 1.3%;
            img {
                margin-block-start: 2em;
            }
        }
    }
    @container (max-width: 500px) {
        .story__present {
            .-present-ttl {
                .-floating-img {
                    img {
                        width: 60%;
                        left: calc(5.33em - 9%);
                        top: 0;
                        bottom: unset;
                    }
                }
            }
        }
        .storys__card {
            &.-card-type13 {
                :nth-child(1 of .-inner) {
                    img {
                        margin-block-start: 0;
                    }
                }
                :nth-child(2 of .-inner) {
                    img {
                        width: 56%;
                    }
                }
                .-imgs {
                    margin-block-start: 0;
                }
            }
        }
        .storys__box-bottom {
            .-data {
                grid-template-columns: 1fr;
                img {
                    width: 100%;
                    margin-block-start: 2em;
                }
            }
        }
        .storys__fukidashi {
        .-inner {
                gap: 0;
                img {
                    margin-block-start: 1em;
                }
            }
        }
    }
}

/* this page's body
------------------------*/
body {
    width: 100%;
}
body[style*="position: fixed"] {
    inset: 0;
}