/* =================================================================================================
 overwrite
==================================================================================================== */
.l-navi-local {
    overflow-x: auto;
    scrollbar-width: none;
    >ul >li > a{
        text-wrap: nowrap;
    }
}
.l-navi-local::-webkit-scrollbar {
    display: none;
}
@media only screen and (max-width: 959px) {
    .l-navi-local >ul {
        justify-content: start;
        padding-left: 1rem;
    }
}

/* =================================================================================================
 #sustainability
==================================================================================================== */
#sustainability {

    /* =================================================================================================
    base
    ==================================================================================================== */
    --s-gutter: 30px;
    --s-box-section: 80px;
    --s-box-pd: 2rem;
    --s-container-md: 780px;
    --s-container: 1380px;
    --s-btn-bdr-radius: 50px;
    --s-card-radius: 10px;
    --c-primary-d: #ffba00;
    --c-primary: #ffd500;
    --c-primary-l: #ffd460;
    --c-sub: #fafaef;
    --c-sub2: #ffeab1;
    --c-accent: #00a1d1;
    --c-accent-l: #6edbed;
    --c-accent2: #5dc44b;
    --c-accent2-l: #a8e89c;
    --c-accent3: #e576a3;
    --c-accent3-l: #f4bad4;
    --c-body-bg: #fff;
    --c-body-color: #272727;
    --c-border-color: #b7b7b7;
    --c-light-gray: #f8f8f8;
    --f-size-h1: 35px;
    --f-size-h2: 24px;
    --f-size-h3: 18px;
    --f-size-h4: 16px;
    --f-size-h5: 14px;
    --f-size-h6: 13px;
    --f-size-s: 12px;
    --f-size-ss: 10px;
    --f-family-g: "UDShinGoPr", "Yu Gothic", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Meiryo UI", "Meiryo", "メイリオ", "Arial", "Vardana", "MS PGothic", "ＭＳ Ｐゴシック";

    @media only screen and (max-width: 959px) {
        --s-gutter: 20px;
        --s-box-pd: 1rem;
        --f-size-h1: 24px;
        --f-size-h2: 20px;
    }

    h1 { font-size: var(--f-size-h1); }
    h2 { font-size: var(--f-size-h2); }
    h3 { font-size: var(--f-size-h3); }
    h4 { font-size: var(--f-size-h4); }
    h5 { font-size: var(--f-size-h5); }
    h6 { font-size: var(--f-size-h6); }

    h1,h2,h3,h4,h5,h6 {
        font-weight: 700;
        margin: 0 0 0.5em 0;
        line-height: 1.3;
    }

    img, picture {
        display: inline;
    }

    /* =================================================================================================
    module
    ==================================================================================================== */

    /* ==========================
    container
    ========================== */
    .container-md, .container, .container-fluid {
        margin-right: auto;
        margin-left: auto;
        padding-right: var(--s-gutter);
        padding-left: var(--s-gutter);
    }
    .container-md {
        max-width: var(--s-container-md);
    }
    .container {
        max-width: var(--s-container);
    }
    .container-fluid {
        max-width: 100%;
    }

    /* ==========================
    button
    ========================== */
    .btn-a {
        display: inline-flex;
        align-items: center;
        color: var(--c-body-color);
        text-decoration: none;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        padding: .5em 1.25em;
        z-index: 1;
        border: 1px solid var(--c-border-color);
        border-radius: 0.5rem;
        background-color: var(--c-light-gray);
        font-weight: 700;
        &::after {
            content: "";
            position: absolute;
            background-color: var(--c-primary-d);
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            transform: scale(0, 1);
            transform-origin: right top;
            transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
        }
        &:hover, &:focus, &:active, &.on {
            &::after {
                transform-origin: left top;
                transform: scale(1, 1);
            }
        }
        .icon {
            width: 1.2em;
            margin-right: 0.5em;
        }
    }
    .btn-b {
        display: inline-flex;
        align-items: center;
        color: var(--c-body-color);
        text-decoration: none;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        padding: .5em 1.25em .5em 2.25em;
        z-index: 1;
        border: 1px solid var(--c-border-color);
        border-radius: var(--s-btn-bdr-radius);
        background-color: var(--c-body-bg);
        font-weight: 700;
        &::before, &::after {
            content: "";
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 3px;
            top: calc(50% - 3px);
            left: 1em;
            background-color: var(--c-primary-d);
            transform-origin: center right;
            transition: all .2s;
        }
        &:hover, &:focus, &:active, &.on {
            &::before,&::after {
                width: 10px;
                height: 3px;
                border-radius: 0;
                top: 50%;
                transform: translateY(-50%);
            }
            &::before {
                transform: translateY(-50%) rotate(45deg);
            }
            &::after {
                transform: translateY(-50%) rotate(-45deg);
            }
        }
        &.on {
            cursor: default;
            background-color: var(--c-light-gray);
            &::before, &::after {
                background-color: var(--c-body-color);
            }
        }
    }
    .btn-c {
        display: inline-flex;
        align-items: center;
        color: var(--c-body-color);
        text-decoration: none;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        padding: .5em 1.5em;
        z-index: 1;
        border-radius: var(--s-btn-bdr-radius);
        transition: ease .2s;
        background-color: var(--c-primary);
        font-weight: 700;
        &::after {
            content: "";
            position: absolute;
            background-color: var(--c-primary-l);
            width: 100%;
            height: 100%;
            bottom: 0;
            left: 0;
            z-index: -1;
            transform: scale(0, 1);
            transform-origin: right top;
            transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
        }
        &:hover, &:focus, &:active, &.on {
            &::after {
                transform-origin:left top;
                transform:scale(1, 1);
            }
        }
    }
    .btn-d {
        display: inline-flex;
        align-items: center;
        color: var(--c-body-color);
        background-color: var(--c-body-bg);
        text-decoration: none;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        padding: .5em 1.75em .5em 2.75em;
        z-index: 1;
        border: 1px solid var(--c-border-color);
        border-radius: var(--s-btn-bdr-radius);
        transition: ease .2s;
        font-weight: 700;
        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0.5em;
            width: 16px;
            height: 3px;
            background-color: var(--c-primary-d);
            transform-origin: center right;
            transform: translateY(-50%) scale(0, 1);
            transition: all .2s;
            z-index: 1;
        }
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 1em;
            width: 10px;
            height: 10px;
            border-top: 3px solid var(--c-primary-d);
            border-right: 3px solid var(--c-primary-d);
            transition: all .2s;
            transform: translateY(-50%) rotate(45deg);
            transform-origin: center;
            z-index: 1;
        }
        &:hover, &:focus, &:active, &.on {
            &::before {
                left: 1em;
                transform: translateY(-50%) scale(1, 1);
            }
            &::after {
                left: 1.4em;
                transform: translateY(-50%) rotate(45deg);
            }
        }
        &.blue {
            &::before {
                background-color: var(--c-accent);
            }
            &::after {
                border-top: 3px solid var(--c-accent);
                border-right: 3px solid var(--c-accent);
            }
        }
    }
    .btn-e {
        display: inline-flex;
        align-items: center;
        color: var(--c-body-color);
        text-decoration: none;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        padding: .5em 1.5em;
        z-index: 1;
        border-radius: var(--s-btn-bdr-radius);
        transition: ease .2s;
        background-color: var(--c-accent-l);
        font-weight: 700;
        &::after {
            content: "";
            position: absolute;
            background-color: var(--c-accent);
            width: 100%;
            height: 100%;
            bottom: 0;
            left: 0;
            z-index: -1;
            transform: scale(0, 1);
            transform-origin: right top;
            transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
        }
        &:hover, &:focus, &:active, &.on {
            color: var(--c-body-bg);
            &::after {
                transform-origin:left top;
                transform:scale(1, 1);
            }
        }
    }

    .btn-card-1 {
        display: flex;
        flex-direction: column;
        background-color: var(--c-body-bg);
        transition: all .5s ease;
        border-radius: var(--s-card-radius);
        padding: 0.5rem;
        position: relative;
        border: none;
        >.img {
            width: 100%;
            overflow: hidden;
            border-radius: var(--s-card-radius) var(--s-card-radius) 0 0;
            display: block;
            line-height: 0;
            img {
                aspect-ratio: 3 / 2;
                width: 100%;
                object-fit: cover;
                object-position: center center;
                display: block;
            }
        }
        >.category {
            font-size: var(--f-size-s);
            width: fit-content;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: var(--s-card-radius) 0 var(--s-btn-bdr-radius) 0;
            padding: 0.5rem 2rem 0.5rem 1rem;
            background-color: var(--c-primary);
        }
        >.text {
            width: 100%;
            padding: 1rem;
            text-decoration: none;
            color: var(--c-body-color);
            border-radius: 0 0 var(--s-btn-bdr-radius) var(--s-card-radius);
            .date {
                font-size: var(--f-size-ss);
                font-weight: 400;
            }
            .title {
                font-size: var(--f-size-h4);
            }
            .excerpt {
                font-size: var(--f-size-s);
                font-weight: 400;
            }
        }
        &:hover, &:focus, &:active {
        }
        &.blue {
            >.category {
                background-color: var(--c-accent-l);
            }
            &::after {
                background-color: var(--c-accent);
            }
        }
        &.green {
            >.category {
                background-color: var(--c-accent2-l);
            }
            &::after {
                background-color: var(--c-accent2);
            }
        }
        &.pink {
            >.category {
                background-color: var(--c-accent3-l);
            }
            &::after {
                background-color: var(--c-accent3);
            }
        }
    }
    .btn-card-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
        border-radius: var(--s-card-radius);
        background-color: var(--c-body-bg);
        padding: var(--s-box-pd);
    }
    .btn-card-3 {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
        border-radius: var(--s-card-radius);
        background-color: transparent;
        border: none;
        >.date {
            font-size: var(--f-size-s);
            font-weight: 400;
        }
        &:hover, &:focus, &:active {
            background-color: var(--c-sub2);
        }
    }
    @media(min-width: 960px) {
        .btn-card-3 {
            flex-direction: row;
            align-items: center;
            >.date {
                margin-right: 1rem;
            }
        }
    }
    .btn-card-4 {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 100%;
        border-radius: var(--s-card-radius);
        background-color: var(--c-body-bg);
        padding: 0.25rem;
        .img {
            width: 33.33%;
        }
        .text {
            width: 66.66%;
            padding: 1rem;
            display: flex;
            flex-direction: column;
        }
        .date {
            font-size: var(--f-size-s);
            font-weight: 400;
        }
    }

    .hvr-shadow-1 {
        filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c-body-color), transparent 70%));
        &:hover, &:focus, &:active {
            background-color: var(--c-sub2);
            filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-body-color), transparent 70%));
        }
    }
    .hvr-shadow-2 {
        &:hover, &:focus, &:active {
            filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-body-color), transparent 70%));
        }
    }

    /* ==========================
    box
    ========================== */
    .box-a {
        border: var(--c-border-color) solid 1px;
        padding: var(--s-box-pd);
    }
    .box-b {
        background: var(--c-body-bg);
        border-radius: var(--s-card-radius);
        padding: var(--s-box-pd);
    }
    .box-b-title {
        margin-top: calc(var(--s-box-pd) * -1);
        margin-left: calc(var(--s-box-pd) * -1);
        margin-right: calc(var(--s-box-pd) * -1);
    }
    .box-c {
        background: var(--c-sub2);
        padding: var(--s-box-pd);
    }
    .box-step {
        background-color: var(--c-sub);
        border-radius: var(--s-card-radius);
        position: relative;
        &::after {
            content: ">";
            display: inline-flex;
            padding: 0.5rem;
            color: var(--c-primary-d);
            font-size: var(--f-size-h3);
            background: var(--c-sub2);
            border-radius: 50%;
            aspect-ratio: 1 /1;
            align-items: center;
            justify-content: center;
            z-index: 1;
            line-height: 0;
            padding: 1rem;
            pointer-events: none;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(90deg);
        }
        &.arrow-none {
            &::after {
                display: none;
            }
        }
        .num-text {
            position: absolute;
            left: -0.75rem;
            top: -0.75rem;
            line-height: 1;
            background-color: var(--c-primary-d);
            padding: 0.5rem 1rem 0.5rem 1rem;
            display: flex;
            align-items: center;
            &::before {
                content: "";
                display: inline-block;
                background-color: var(--c-primary-d);
                width: 2rem;
                height: 100%;
                position: absolute;
                top: 0;
                left: 100%;
                clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 50%, 100% 100%, 0 100% );
            }
            &::after {
                content: "";
                display: inline-block;
                background-color: var(--c-primary-d);
                width: 0.75rem;
                height: 0.75rem;
                position: absolute;
                top: 100%;
                left: 0;
                clip-path: polygon(0 0,100% 0, 100% 100%);
            }
        }
        >.title {
            padding: var(--s-box-pd);
            background-color: var(--c-primary);
            border-radius: var(--s-card-radius) var(--s-card-radius) 0 0;
        }
        >.text {
            padding: var(--s-box-pd);
        }
    }
    @media(min-width: 960px) {
        .box-step {
            &::after {
                top: 50%;
                left: 100%;
                transform: translate(-8%,-50%);
            }
            &.arrow-none_pc {
                &::after {
                    display: none;
                }
            }
        }
    }
    .box-step-2 {
        background-color: var(--c-light-gray);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border-radius: 1rem;
        align-items: stretch;
        position: relative;
        &::after {
            content: ">";
            display: inline-flex;
            padding: 0.25rem;
            color: var(--c-primary-d);
            font-size: var(--f-size-h6);
            /*background: var(--c-sub2);*/
            border-radius: 50%;
            aspect-ratio: 1 /1;
            align-items: center;
            justify-content: center;
            z-index: 1;
            line-height: 0;
            padding: 1rem;
            pointer-events: none;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, 0) rotate(90deg);
        }
        &.arrow-none {
            &::after {
                display: none;
            }
        }
        .num-text {
            background-color: var(--c-primary-d);
            padding: 0.5rem 1rem;
            border-radius: 1rem 0 0 0;
            width: 3rem;
        }
        >.title {
            padding: 0.5rem 1rem;
            background-color: var(--c-primary-l);
            width: calc(100% - 3rem);
            border-radius: 0 1rem 0 0;
        }
        >.text {
            width: 100%;
            padding: 0.5rem 1rem;
            font-size: var(--f-size-s);
            padding-left: 3rem;
        }
    }
    @media(min-width: 960px) {
        .box-step-2 {
            border-radius: 3rem;
            .num-text {
                border-radius: 3rem 0 0 3rem;
            }
            >.title {
                width: calc(30% - 3rem);
                border-radius: 0;
            }
            >.text {
                width: 70%;
                font-size: var(--f-size-h4);
            }
        }
    }

    /* ==========================
    caption
    ========================== */
    .cap-subhead {
        display: flex;
        align-items: center;
        &::before {
            content: "";
            width: 0.5em;
            height: 0.5em;
            border-radius: 50%;
            margin: 0.65em 0.5em 0.5em 0.5em;
            background-color: var(--c-primary);
        }
    }

    .cap-bdrbtm-a {
        padding-bottom: 0.25em;
        border-bottom: 0.06em solid var(--c-border-color);
    }
    .cap-bdrbtm-b {
        display: flex;
        align-items: flex-end;
        padding-left: 0.3em;
        line-height: 1.5;
        position: relative;
        z-index: 1;
        &::before {
            content: "";
            width: 100%;
            position: absolute;
            height: 0.06em;
            background-color: var(--c-primary-d);
            bottom: 0;
            left: 0;
            z-index: -1;
        }
        &::after {
            content: "";
            flex-grow: 1;
            display: block;
            margin-top: 0.25em;
            margin-left: 0.3em;
            height: 0.06em;
            background-color: var(--c-border-color);
        }
    }
    .cap-bdrbtm-c, .cap-bdrbtm-d {
        position: relative;
        padding-bottom: 0.75em;
        text-align: center;
        z-index: 1;
        &::after {
            content: "";
            width: 4em;
            height: 0.2em;
            border-radius: 0.1em;
            background-color: var(--c-primary);
            position: absolute;
            bottom: 0;
            left: calc(50% - 2em);
        }
    }
    .cap-bdrbtm-d {
        text-align: left;
        &::after {
            left: 0;
        }
    }

    .cap-bdrleft {
        border-left: 0.3em solid var(--c-primary);
        padding-left: 0.3em;
    }

    .cap-bdrmid-a, .cap-bdrmid-b, .cap-bdrmid-c {
        display: flex;
        align-items: center;
        &::before, &::after {
            content: "";
            flex-grow: 1;
            display: block;
            border-top-style: solid;
            border-top-width: 0.06em;
            border-top-color: var(--c-primary-l);
        }
        &::before {
            margin-right: 0.5em;
        }
        &::after {
            margin-left: 0.5em;
        }
        &.short {
            &::before, &::after {
                max-width: 3em;
            }
        }
    }
    .cap-bdrmid-a {
        &.short {
            justify-content: center;
        }
    }
    .cap-bdrmid-b {
        &::before {
            display: none;
        }
    }
    .cap-bdrmid-c {
        &::after {
            display: none;
        }
    }

    /* ==========================
    list
    ========================== */
    .post-list-1 {
        display: flex;
        flex-wrap: wrap;
        >* {
            padding: 0 0.5rem;
            margin-bottom: 2rem;
        }
    }
    @media(min-width: 960px) {
        .post-list-1 {
            >* {
                width: 33.33%;
                padding: 0 1.5rem;
            }
        }
    }
    .post-list-2 {
        border-top: 1px dotted var(--c-border-color);
        >* {
            border-bottom: 1px dotted var(--c-border-color);
            padding: 0.5rem 0;
        }
    }
    .post-list-3 {
        >* {
            margin-bottom: 1rem;
        }
    }
    .page-nav {
        margin-top: 3rem;
        >ul {
            display: flex;
            align-items: center;
            justify-content: center;
            >li {
                padding: 0 0.5rem;
            }
        }
        a {
            display: inline-flex;
            width: 3rem;
            justify-content: center;
            align-items: center;
            position: relative;
            color: var(--c-body-color);
            text-decoration: none;
            z-index: 1;
            transition: 0.5s all ease;
            vertical-align: middle;
            img {
                width: 1em;
            }
            &::after {
                content: "";
                display: inline-block;
                width: 100%;
                aspect-ratio: 1 / 1;
                background-color: var(--c-body-bg);
                border-radius: 50%;
                border: 1px solid var(--c-border-color);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: -1;
            }
            &:hover, &:focus, &:active {
                &::after {
                    background-color: var(--c-border-color);
                }
            }
            &.on {
                color: var(--c-body-color);
                cursor: default;
                &::after {
                    background-color: var(--c-primary-d);
                    border-color: var(--c-primary-d);
                }
            }
        }
    }
    .post-nav {
        display: flex;
        justify-content: center;
        border-radius: var(--s-btn-bdr-radius);
        overflow: hidden;
        >li {
            padding: 0 1px;
        }
        >.prev {
            .btn-c {
                border-radius: var(--s-btn-bdr-radius) 0 0 var(--s-btn-bdr-radius);
                >i {
                    &::before {
                        content: "<";
                    }
                }
                >span {
                    display: none;
                }
            }
        }
        >.list {
            flex-grow: 1;
            .btn-c {
                width: 100%;
                border-radius: 0;
                justify-content: center;
                >.cat-name {
                    display: none;
                }
            }
        }
        >.next {
            .btn-c {
                border-radius: 0 var(--s-btn-bdr-radius) var(--s-btn-bdr-radius) 0;
                >i {
                    &::before {
                        content: ">";
                    }
                }
                >span {
                    display: none;
                }
            }
        }
    }
    @media(min-width: 960px) {
        .post-nav {
            >.prev {
                .btn-c {
                    >span {
                        display: inline-block;
                        margin-left: 0.5rem;
                    }
                }
            }
            >.list {
                .btn-c {
                    >.cat-name {
                        display: inline-block;
                    }
                }
            }
            >.next {
                .btn-c {
                    >span {
                        display: inline-block;
                        margin-right: 0.5rem;
                    }
                }
            }
        }
    }

    .list-disc {
        list-style: disc;
        >li {
            margin-bottom: 1em;
            margin-left: 2.5em;
            text-indent: 0;
            &::marker {
                font-weight: 700;
                color: var(--c-primary-d);
            }
        }
        &.small {
            >li {
                margin: 0 0 0 1em;
            }
        }
    }

    .list-decimal {
        list-style: decimal;
        >li {
            margin-bottom: 1em;
            margin-left: 2.5em;
            text-indent: 0;
            &::marker {
                font-weight: 700;
            }
        }
    }

    /* ==========================
    table
    ========================== */
    table {
        border-collapse: separate;
	    border-spacing: 0;
        border-bottom: 1px solid var(--c-border-color);
    }
    th, td {
        border-top: 1px solid var(--c-border-color);
        padding: 0.5rem;
    }
    .table-2 {
        thead {
            th {
                background-color: var(--c-sub2);
            }
        }
        th, td {
            border: 1px solid var(--c-border-color);
        }
    }
    .table-box {
        display: block;
        >dl {
            display: block;
            >dt {
                display: block;
                background-color: var(--c-sub2);
                padding: 0.5rem;
                
            }
            >dd {
                display: block;
                padding: 0.5rem;
            }
        }
    }
    @media(min-width: 960px) {
        .table-box {
            display: table;
            border-bottom: 1px solid var(--c-border-color);
            >dl {
                display: table-row;
                >dt {
                    display: table-cell;
                    border-top: 1px solid var(--c-border-color);
                }
                >dd {
                    display: table-cell;
                    border-top: 1px solid var(--c-border-color);
                }
            }
        }
    }

    /* ==========================
    slick-slider
    ========================== */
    .slick-slide {
        padding: 0.5rem;
    }
    .slick-prev, .slick-next {
        width: 40px;
        height: 40px;
        z-index: 1;
        &::before {
            font-size: var(--f-size-h1);
            color: var(--c-primary-d) !important;
        }
    }
    .slick-prev {
        transform: translate(50%, -50%);
    }
    .slick-next {
        transform: translate(-50%, -50%);
    }
    .slick-dots {
        bottom: 0;
        transform: translateY(100%);
        li button::before {
            font-size: 10px;
        }
    }
    .slick-dots li.slick-active button::before {
        color: var(--c-primary-d);
    }

    /* ==========================
    rows
    ========================== */
    @media only screen and (max-width: 959px) {
        .rows-2_sp {
            display: flex;
            flex-wrap: wrap;
            >* {
                width: 50%;
                padding: 0 calc(var(--s-gutter) / 2);
            }
        }
        .rows-3_sp {
            display: flex;
            flex-wrap: wrap;
            >* {
                width: 33.33%;
                padding: 0 calc(var(--s-gutter) / 2);
            }
        }
        .rows-4_sp {
            display: flex;
            flex-wrap: wrap;
            >* {
                width: 25%;
                padding: 0 calc(var(--s-gutter) / 2);
            }
        }
    }

    @media(min-width: 960px) {
        .rows-2_pc {
            display: flex;
            flex-wrap: wrap;
            >* {
                width: 50%;
                padding: 0 calc(var(--s-gutter) / 2);
            }
        }
        .rows-3_pc {
            display: flex;
            flex-wrap: wrap;
            >* {
                width: 33.33%;
                padding: 0 calc(var(--s-gutter) / 2);
                &.col-2_pc { width: 66.66%; }
            }
        }
        .rows-4_pc {
            display: flex;
            flex-wrap: wrap;
            >* {
                width: 25%;
                padding: 0 calc(var(--s-gutter) / 2);
                &.col-2_pc { width: 50%; }
                &.col-3_pc { width: 75%; }
            }
        }
        .rows-5_pc {
            display: flex;
            flex-wrap: wrap;
            >* {
                width: 20%;
                padding: 0 calc(var(--s-gutter) / 2);
                &.col-2_pc { width: 40%; }
                &.col-3_pc { width: 60%; }
                &.col-4_pc { width: 80%; }
            }
        }
    }

    /* ==========================
    etc
    ========================== */
    .text-maru {
        position: relative;
        padding: 0 0.5em;
        z-index: 1;
        display: inline-flex;
        &::after {
            content: "";
            width: 100%;
            aspect-ratio: 1 / 1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
            background-color: var(--c-accent-l);
            border-radius: 50%;
        }
    }
    .text-maru-wrap {
        display: flex;
        align-items: start;
        >.text-maru {
            margin-right: 0.25rem;
        }
    }
    .youtube {
        width: 100%;
        aspect-ratio: 16/9;
        position: relative;
        >iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }
    }
    .video {
        width: 100%;
        aspect-ratio: 16/9;
        position: relative;
        >video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }
    }


    /* =================================================================================================
    layout
    ==================================================================================================== */

    .sus-anchor {
        scroll-margin-top: 65px;
    }

    .sus-contents-title {
        position: relative;
        .img {
            >img {
                width: 100%;
            }
        }
        .title {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
            >h1 {
                background-color: var(--c-body-bg);
                padding: 0.5em 1em;
                margin-bottom: 0;
                text-wrap: nowrap;
            }
            >h5 {
                background-color: var(--c-primary);
                padding: 0.5rem;
                width: 100%;
                margin: 0;
                text-wrap: nowrap;
            }
        }
        .title-2 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            border: 1px solid var(--c-body-bg);
            padding: 1rem 2rem;
            >h1 {
                margin: 0;
            }
        }
        .title-3 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            padding: 1rem 2rem 0 2rem;
            >h1 {
                margin: 0;
            }
        }
    }
    @media(min-width: 960px) {
        .sus-contents-title {
            .title {
                >h1 {
                    padding: 0.5em 2em;
                }
            }
            .title-2 {
                padding: 3rem 5rem;
                >h1 {
                    margin: 0 0 0.5em 0;
                }
            }
        }
    }

    .sus-nav-footer {
        >ul {
            display: flex;
            flex-direction: column;
            >li {
                margin-bottom: 0.5rem;
                >a {
                    width: 100%;
                    border: none;
                }
            }
        }
    }
    @media(min-width: 960px) {
        .sus-nav-footer {
            >ul {
                flex-direction: row;
                flex-wrap: wrap;
                >li {
                    margin-bottom: 1rem;
                    width: 25%;
                    padding: 0 0.5rem;
                }
            }
        }
    }

    .sus-nav-head-sub {
        border-top: 1px solid var(--c-border-color);
        background-color: var(--c-light-gray);
        text-align: center;
        overflow-x: auto;
        > ul {
            display: flex;
        }
        .btn-a {
            width: 100%;
            text-wrap: nowrap;
            justify-items: center;
            background-color: transparent;
            border: none;
            border-radius: 0;
            font-size: var(--f-size-s);
            color: var(--c-border-color);
            &:hover, &:focus, &:active, &.on {
                color: var(--c-body-color);
            }
        }
    }
    @media(min-width: 960px) {
        .sus-nav-head-sub {
            >ul {
                display: inline-flex;
                margin: 0 auto;
                flex-direction: row;
                flex-wrap: wrap;
                max-width: var(--s-container);
                >li {
                    padding: 0;
                }
            }
            .btn-a {
                font-size: var(--f-size-h4);
            }
        }
    }

    .sus-nav-footer-sub {
        .cap-bdrmid-b {
            &::after {
                border-color: var(--c-border-color);
            }
        }
        .btn-a {
            padding-left: 0.5em;
            border-radius: 0;
        }
        .btn-d {
            border: none;
            width: 100%;
            border-radius: 0;
            background-color: transparent;
            &.on {
                color: var(--c-border-color);
                pointer-events: none;
                &::before {
                    background-color: var(--c-border-color);
                }
                &::after {
                    border-color: var(--c-border-color);
                }
            }
        }
        .btn-b {
            font-size: var(--f-size-s);
            font-weight: 400;
            width: 100%;
            border-radius: 0;
            border: none;
            background-color: transparent;
            margin-left: 1rem;
            &.on {
                color: var(--c-border-color);
                pointer-events: none;
                &::before {
                    background-color: var(--c-border-color);
                }
                &::after {
                    background-color: var(--c-border-color);
                }
            }
        }
        .ul-child {
            margin-top: 2rem;
            img {
                aspect-ratio: 16 / 9;
                object-fit: cover;
                width: 100%;
            }
        }
    }

    .sus-sns-list {
        a {
            display: flex;
            align-items: center;
            border-radius: var(--s-card-radius);
            background-color: var(--c-body-bg);
            height: 100%;
            >figure {
                width: 20%;
                max-width: 60px;
                padding: 0;
                margin: 0;
                text-align: center;
                padding: 0.5rem;
                >img {
                    width: 100%;
                }
            }
            >span {
                flex-grow: 1;
                padding: 1rem;
            }
        }
    }
    @media(min-width: 960px) {
    }

    /* =================================================================================================
    pages
    ==================================================================================================== */

    /* ==========================
     top page
    ========================== */
    .sus-top-mv {
        width: 100%;
        aspect-ratio: 1 / 1;
        position: relative;
        background-image: url(../images/top/bg_mv.jpg);
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: left top;
        animation: susMvScroll_sp 60s linear infinite alternate;
        .top-copy {
            width: 50%;
            max-width: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
    @media(min-width: 960px) {
        .sus-top-mv {
            width: 100%;
            aspect-ratio: 4 / 1;
            background-size: 100% auto;
            background-position: center top; 
            animation: susMvScroll_pc 60s linear infinite alternate;
            .top-copy {
                width: 20%;
                max-width: 300px;
            }
        }
    }
    .sus-top-section-concept {
        position: relative;
        >.bg-img {
            margin-top: 2rem;
        }
        >.photo {
            position: absolute;
            left: 5%;
            bottom: 0;
            width: 90%;
            aspect-ratio: 1 / 1;
            z-index: 1;
            >* {
                position: absolute;
                z-index: 1;
                margin: 0;
                &::after {
                    content: "";
                    width: 100%;
                    height: 100%;
                    background-color: var(--c-sub2);
                    top: 0.5rem;
                    left: 0.5rem;
                    position: absolute;
                    z-index: -1;
                    border-radius: 1rem;
                }
                >img {
                    border-radius: 1rem;
                }
            }
            >.photo-1 {
                top: 0;
                left: 2%;
                width: 40%;
            }
            >.photo-2 {
                top: 5%;
                right: 5%;
                width: 40%;
            }
            >.photo-3 {
                bottom: 4%;
                left: 0;
                width: 50%;
            }
            >.photo-4 {
                bottom: 5%;
                right: 0;
                width: 45%;
            }
            >.photo-5 {
                bottom: 40%;
                right: 15%;
                width: 40%;
            }
        }
    }
    @media(min-width: 960px) {
        .sus-top-section-concept {
            position: relative;
            padding-bottom: 5%;
            >.text {
                position: absolute;
                top: 18%;
                left: 50%;
                transform: translate(-50%, 0);
                text-wrap: nowrap;
                z-index: 10;
                -webkit-text-stroke: 4px var(--c-body-bg);
                paint-order: stroke;
            }
            >.bg-img {
                text-align: center;
                >img {
                    max-width: 33.33%;
                    margin: auto;
                }
            }
            >.photo {
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                >* {
                    &::after {
                        top: 1rem;
                        left: 1rem;
                        border-radius: 3rem;
                    }
                    >img {
                        border-radius: 3rem;
                    }
                }
                >.photo-1 {
                    top: -5%;
                    left: 10%;
                    width: 18%;
                }
                >.photo-2 {
                    top: 5%;
                    right: var(--s-gutter);
                    width: 25%;
                }
                >.photo-3 {
                    bottom: 10%;
                    left: var(--s-gutter);
                    width: 22%;
                }
                >.photo-4 {
                    bottom: -5%;
                    right: 45%;
                    width: 22%;
                }
                >.photo-5 {
                    bottom: 3%;
                    right: 14%;
                    width: 23%;
                }
            }
        }
    }
    .sus-top-section-kiban {
        >ul {
            display: flex;
            flex-wrap: wrap;
            >li {
                margin-top: 1rem;
                flex-basis: 50%;
                max-width: 50%;
                padding: 0 0.5rem;
            }
        }
        .btn-card-2 {
            .img {
                img {
                    max-width: 50%;
                    margin: auto;
                }
            }
        }
    }
    @media(min-width: 960px) {
        .sus-top-section-kiban {
            >ul {
                justify-content: center;
                >li {
                    flex-basis: 25%;
                    max-width: 25%;
                    padding: 0 1rem;
                }
            }
        }
        .btn-card-2 {
            .img {
                img {
                    max-width: 100% !important;
                }
            }
        }
    }
    .sus-top-section-theme {
        .box-theme {
            display: block;
            transition: 0.3s linear all;
            position: relative;
            &::after {
                content: "> 詳しくはこちら";
                position: absolute;
                bottom: -0.5rem;
                right: -0.4rem;
                padding: 0.25rem 1rem;
                background-color: var(--c-accent2);
                border-radius: 1rem 0 1rem 0;
                color: var(--c-body-bg);
                font-size: var(--f-size-s);
            }
            &.box-theme-2 {
                &::after {
                    background-color: var(--c-accent3);
                }
            }
            &:hover, &:focus, &:active {
                opacity: 0.75;
            }
        }
    }

    /* ==========================
     about page
    ========================== */
    .sus-about-kadai {
        display: flex;
        flex-direction: column;
        >.img {
            margin-top: 2rem;
        }
        h2 {
            display: flex;
            align-items: center;
            .kadai {
                font-size: var(--f-size-h6);
                padding: 0 0.5em;
                margin-right: 0.5em;
                border-radius: 0.3rem;
                background-color: var(--c-primary);
            }
        }
        .cap-bdrmid-a {
            &::before, &::after{
                border-color: var(--c-primary-d);
            }
        }
    }
    @media(min-width: 960px) {
        .sus-about-kadai {
            display: flex;
            flex-direction: row;
            align-items: center;
            >.text {
                width: 75%;
            }
            >.img {
                width: 25%;
                &.order--1 {
                    order: -1;
                }
            }
        }
    }

    /* ==========================
     message page
    ========================== */
    .sus-message-section {
        p {
            margin: 1rem auto;
            font-size: var(--f-size-h4);
            line-height: 1.8;
        }
        ul {
            margin: 3rem auto;
            text-align: center;
            max-width: 720px;
            >li{
                background-color: var(--c-sub2);
                padding: 0.5rem 1rem;
                width: 100%;
                margin-bottom: 1rem;
                border-radius: 0.5rem;
                font-weight: 700;
            }
        }
    }

    /* ==========================
     mirai page
    ========================== */
    .sus-mirai-logo {
        max-width: 500px;
        min-width: 240px;
        width: 100%;
    }
    .sus-mirai-about {
        >.img {
            margin-top: 2rem;
        }
    }
    @media(min-width: 960px) {
        .sus-mirai-about {
            display: flex;
            >.text {
                width: 55%;
                padding-right: 1.5rem;
            }
            >.img {
                width: 45%;
                padding-left: 1.5rem;
            }
        }
    }

    /* ==========================
     chiikugashi page
    ========================== */
    .table-boshuu {
        width: 100%;
        table-layout: fixed;
        th, td {
            text-align: center;
            vertical-align: center;
        }
        td {
            height: 70px;;
        }
        a {
            padding: 0.5rem;
            background-color: var(--c-primary);
            aspect-ratio: 1 / 1;
            display: inline-flex;
            border-radius: 50%;
            align-items: center;
        }
    }

    /* ==========================
     shirushi page
    ========================== */
    .sus-shirushi-box {
        li {
            border-bottom: 1px dotted var(--c-border-color);
        }
        .kifusaki{
            display: flex;
            flex-direction: column;
            padding: 0.25rem 1rem;
            border-radius: 0.5rem;
            transition: all 0.3s linear;
            .kanren {
                font-size: var(--f-size-s);
                width: fit-content;
            }
            &:hover, &:focus, &:active {
                background-color: var(--c-sub2);
            }
        }

    }
    @media(min-width: 960px) {
        .sus-shirushi-box {
            .kifusaki {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
        }
     }

    /* ==========================
     post page
    ========================== */
    .post-normalize {
        /* ==========================
        normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
        ========================== */
        h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
        ul {
            list-style: disc;
            padding-left: 2.5em;
            margin-top: 1em;
            margin-bottom: 1em;
            >li {
                margin-bottom: 1em;
            }
            ul {
                list-style: circle;
                margin-top: 0;
            }
            ol {
                margin-top: 0;
            }
        }
        ol {
            list-style: decimal;
            padding-left: 2.5em;
            margin-top: 1em;
            margin-bottom: 1em;
            >li {
                margin-bottom: 1em;
            }
            ul {
                list-style: circle;
                margin-top: 0;
            }
            ol {
                margin-top: 0;
            }
        }
        h1, h2, h3 {
            margin-top: 2em;
        }
        p {
            margin-top: 1em;
            margin-bottom: 1em;
        }
    }


    /* =================================================================================================
    utility
    ==================================================================================================== */

    /* ==========================
     font-size
    ========================== */
    .h1 { font-size: var(--f-size-h1); }
    .h2 { font-size: var(--f-size-h2); }
    .h3 { font-size: var(--f-size-h3); }
    .h4 { font-size: var(--f-size-h4); }
    .h5 { font-size: var(--f-size-h5); }
    .h6 { font-size: var(--f-size-h6); }
    .text-size-s { font-size: var(--f-size-s); }
    .text-size-ss { font-size: var(--f-size-ss); }

    /* ==========================
     text
    ========================== */
    .text-left { text-align: left;}
    .text-center { text-align: center;}
    .text-right { text-align: right;}

    .text-w-400 { font-weight: 400; }
    .text-w-500 { font-weight: 500; }
    .text-w-700 { font-weight: 700; }

    .text-wrap-nowrap { text-wrap: nowrap;}

    .text-kome {
        padding-left: 1em;
        text-indent: -1em;
    }

    .wb-keep-all { word-break: keep-all; }
    .wb-break-all { word-break: break-all; }

    .va-m { vertical-align: middle; }

    .lh-1 { line-height: 1; }
    .lh-1d2 { line-height: 1.2; }
    .lh-1d5 { line-height: 1.5; }
    .lh-1d8 { line-height: 1.8; }
    .lh-2 { line-height: 2; }
    
    .br:before {
        content: "\a";
        white-space: pre;
    }

    /* ==========================
     border
    ========================== */
    .bdr-all { border: solid var(--c-border-color) 1px; }
    .bdr-top { border-top: solid var(--c-border-color) 1px; }
    .bdr-bottom { border-bottom: solid var(--c-border-color) 1px; }
    .bdr-right { border-right: solid var(--c-border-color) 1px; }
    .bdr-left { border-left: solid var(--c-border-color) 1px; }

    .bdr-radius-05 { border-radius: 0.5em; }
    .bdr-radius-0 { border-radius: 0; }
    .bdr-radius-1 { border-radius: 1em; }
    .bdr-radius-2 { border-radius: 2em; }
    .bdr-radius-t-r-0 { border-top-right-radius: 0; }
    .bdr-radius-t-l-0 { border-top-left-radius: 0; }
    .bdr-radius-b-r-0 { border-bottom-right-radius: 0; }
    .bdr-radius-b-l-0 { border-bottom-left-radius: 0; }

    .bdr-c-primay-d { border-color: var(--c-primary-d); }
    .bdr-c-primay { border-color: var(--c-primary); }
    .bdr-c-primay-l { border-color: var(--c-primary-l); }
    .bdr-c-accent { 
        border-color: var(--c-accent); 
        &::before, &::after {
            border-color: var(--c-accent);
        }
    }
    .bdr-c-accent2 { 
        border-color: var(--c-accent2); 
        &::before, &::after {
            border-color: var(--c-accent2);
        }
    }
    .bdr-c-accent3 { 
        border-color: var(--c-accent3); 
        &::before, &::after {
            border-color: var(--c-accent3);
        }
    }
    .bdr-c-accent-l { border-color: var(--c-accent-l); }
    .bdr-c-accent2-l { border-color: var(--c-accent2-l); }
    .bdr-c-accent3-l { border-color: var(--c-accent3-l); }
    .bdr-c-sub { border-color: var(--c-sub); }
    .bdr-c-sub2 { border-color: var(--c-sub2); }
    .bdr-c-bdrcolor { border-color: var(--c-border-color); }
    .bdr-c-bodycolor { border-color: var(--c-body-color); }
    .bdr-c-bodybg { border-color: var(--c-body-bg); }

    .bdr-none { border: none; }

    /* ==========================
     dsiplay
    ========================== */
    .dsp-ib { display: inline-block; }
    .dsp-b { display: block; }
    .dsp-f { display: flex; }
    .dsp-if { display: inline-flex; }
    
    /* ==========================
     flex
    ========================== */
    .f-jc-center { justify-content: center; }
    .f-ai-center { align-items: center; }

    /* ==========================
     color
    ========================== */
    .text-primary-d { color: var(--c-primary-d); }
    .text-primary { color: var(--c-primary); }
    .text-primary-l { color: var(--c-primary-l); }
    .text-accent { color: var(--c-accent); }
    .text-accent2 { color: var(--c-accent2); }
    .text-accent3 { color: var(--c-accent3); }
    .text-accent-l { color: var(--c-accent-l); }
    .text-accent2-l { color: var(--c-accent2-l); }
    .text-accent3-l { color: var(--c-accent3-l); }
    .text-sub { color: var(--c-sub); }
    .text-sub2 { color: var(--c-sub2); }
    .text-bodycolor { color: var(--c-body-color); }
    .text-bodybg { color: var(--c-body-bg); }
    .text-bdrcolor { color: var(--c-border-color); }
    .text-red { color: #F00000;}

    .bg-primary-d { background-color: var(--c-primary-d); }
    .bg-primary { background-color: var(--c-primary); }
    .bg-primary-l { background-color: var(--c-primary-l); }
    .bg-accent { background-color: var(--c-accent); }
    .bg-accent2 { background-color: var(--c-accent2); }
    .bg-accent3 { background-color: var(--c-accent3); }
    .bg-accent-l { background-color: var(--c-accent-l); }
    .bg-accent2-l { background-color: var(--c-accent2-l); }
    .bg-accent3-l { background-color: var(--c-accent3-l); }
    .bg-sub { background-color: var(--c-sub); }
    .bg-sub2 { background-color: var(--c-sub2); }
    .bg-bodybg { background-color: var(--c-body-bg);}
    .bg-bodycolor { background-color: var(--c-body-color); }
    .bg-bdrcolor { background-color: var(--c-border-color);}
    .bg-light-gray { background-color: var(--c-light-gray); }
    .bg-white-a { background-color: rgba(255,255,255,0.5);}

    .after-bg-primary-d::after { background-color: var(--c-primary-d); }
    .after-bg-primary::after { background-color: var(--c-primary); }
    .after-bg-primary-l::after { background-color: var(--c-primary-l); }
    .after-bg-accent::after { background-color: var(--c-accent); }
    .after-bg-accent2::after { background-color: var(--c-accent2); }
    .after-bg-accent3::after { background-color: var(--c-accent3); }
    .after-bg-accent-l::after { background-color: var(--c-accent-l); }
    .after-bg-accent2-l::after { background-color: var(--c-accent2-l); }
    .after-bg-accent3-l::after { background-color: var(--c-accent3-l); }
    .after-bg-sub::after { background-color: var(--c-sub); }
    .after-bg-sub2::after { background-color: var(--c-sub2); }
    .after-bg-bodybg::after { background-color: var(--c-body-bg);}
    .after-bg-bodycolor::after { background-color: var(--c-body-color); }
    .after-bg-bdrcolor::after { background-color: var(--c-border-color);}
    .after-bg-light-gray::after { background-color: var(--c-light-gray); }

    /* ==========================
     size
    ========================== */
    .w-50p { width: 50%; }
    .w-100p { width: 100%; }
    .w-fit-content { width: fit-content; }
    .w-08em { width: 0.8em;}
    .w-1em { width: 1em;}
    .w-1d2em { width: 1.2em; }
    .w-2em { width: 2em;}
    .w-3em { width: 3em;}
    .w-4em { width: 4em;}
    .w-5em { width: 5em;}

    .h-100p { height: 100%; }
    .h-fit-content { height: fit-content; }

    /* ==========================
     etc
    ========================== */
    .shadow-1 {
        box-shadow: 0 0 14px 0 color-mix(in srgb, var(--c-body-color), transparent 80%) ;
    }
    .shadow-primary-d {
        box-shadow: 0.5rem 0.5rem 0 var(--c-primary-d);
    }
    .shadow-accent {
        box-shadow: 0.5rem 0.5rem 0 var(--c-accent);
    }
    .shadow-accent2 {
        box-shadow: 0.5rem 0.5rem 0 var(--c-accent2);
    }
    .shadow-accent3 {
        box-shadow: 0.5rem 0.5rem 0 var(--c-accent3);
    }

    .pe-none {
        pointer-events: none;
    }

    /* ==========================
     margin
    ========================== */
    .m-t-section{ margin-top: var(--s-box-section); }
    .m-b-section{ margin-bottom: var(--s-box-section); }
    .m-b--section{ margin-bottom: calc(var(--s-box-section) * -1); }
    .m-y-section{ margin-top: var(--s-box-section); margin-bottom: var(--s-box-section); }
    .m-a-0 { margin: 0; }
    .m-t-0 { margin-top: 0; }
    .m-r-0 { margin-right: 0; }
    .m-l-0 { margin-left: 0; }
    .m-b-0 { margin-bottom: 0; }
    .m-a-05 { margin: 0.5rem; }
    .m-t-05 { margin-top: 0.5rem; }
    .m-r-05 { margin-right: 0.5rem; }
    .m-l-05 { margin-left: 0.5rem; }
    .m-b-05 { margin-bottom: 0.5rem; }
    .m-a-1 { margin: 1rem; }
    .m-t-1 { margin-top: 1rem; }
    .m-r-1 { margin-right: 1rem; }
    .m-l-1 { margin-left: 1rem; }
    .m-b-1 { margin-bottom: 1rem; }
    .m-a-2 { margin: 2rem; }
    .m-t-2 { margin-top: 2rem; }
    .m-r-2 { margin-right: 2rem; }
    .m-l-2 { margin-left: 2rem; }
    .m-b-2 { margin-bottom: 2rem; }
    .m-a-3 { margin: 3rem; }
    .m-t-3 { margin-top: 3rem; }
    .m-r-3 { margin-right: 3rem; }
    .m-l-3 { margin-left: 3rem; }
    .m-b-3 { margin-bottom: 3rem; }
    .m-a-4 { margin: 4rem; }
    .m-t-4 { margin-top: 4rem; }
    .m-r-4 { margin-right: 4rem; }
    .m-l-4 { margin-left: 4rem; }
    .m-b-4 { margin-bottom: 4rem; }
    .m-a-5 { margin: 5rem; }
    .m-t-5 { margin-top: 5rem; }
    .m-r-5 { margin-right: 5rem; }
    .m-l-5 { margin-left: 5rem; }
    .m-b-5 { margin-bottom: 5rem; }
    .m-a-auto { margin: auto; }
    .m-t-auto { margin-top: auto; }
    .m-r-auto { margin-right: auto; }
    .m-l-auto { margin-left: auto; }
    .m-b-auto { margin-bottom: auto; }

    /* ==========================
     padding
    ========================== */
    .p-t-section{ padding-top: var(--s-box-section); }
    .p-b-section{ padding-bottom: var(--s-box-section); }
    .p-y-section{ padding-top: var(--s-box-section); padding-bottom: var(--s-box-section); }
    .p-a-box{ padding: var(--s-box-pd);}
    .p-t-box{ padding-top: var(--s-box-pd);}
    .p-r-box{ padding-right: var(--s-box-pd);}
    .p-l-box{ padding-left: var(--s-box-pd);}
    .p-b-box{ padding-bottom: var(--s-box-pd);}
    .p-a-gutter{ padding: var(--s-gutter);}
    .p-t-gutter{ padding-top: var(--s-gutter);}
    .p-r-gutter{ padding-right: var(--s-gutter);}
    .p-l-gutter{ padding-left: var(--s-gutter);}
    .p-b-gutter{ padding-bottom: var(--s-gutter);}
    .p-a-05 { padding: 0.5rem; }
    .p-a-1 { padding: 1rem; }
    .p-a-2 { padding: 2rem; }
    .p-a-0 { padding: 0; }
    .p-t-0 { padding-top: 0; }
    .p-r-0 { padding-right: 0; }
    .p-l-0 { padding-left: 0; }
    .p-b-0 { padding-bottom: 0; }

    /* ==========================
     hidden
    ========================== */
    .hidden { display: none; }

    @media only screen and (max-width: 959px) {
        /* ==========================
        font-size
        ========================== */
        .h1 { font-size: var(--f-size-h1_sp); }
        .h2 { font-size: var(--f-size-h2_sp); }
        .h1_sp { font-size: var(--f-size-h1_sp); }
        .h2_sp { font-size: var(--f-size-h2_sp); }
        .h3_sp { font-size: var(--f-size-h3); }
        .h4_sp { font-size: var(--f-size-h4); }
        .h5_sp { font-size: var(--f-size-h5); }
        .h6_sp { font-size: var(--f-size-h6); }
        .text-size-s_sp { font-size: var(--f-size-s); }
        .text-size-ss_sp { font-size: var(--f-size-ss); }

        /* ==========================
        text
        ========================== */
        .text-left_sp { text-align: left;}
        .text-center_sp { text-align: center;}
        .text-right_sp { text-align: right;}

        .wb-keep-all_sp { word-break: keep-all; }
        .wb-break-all_sp { word-break: break-all; }

        .br_sp:before {
            content: "\a";
            white-space: pre;
        }

        /* ==========================
        flex
        ========================== */
        .f-ai-start_sp { align-items: start; }
        .f-ai-center_sp { align-items: center; }
        .f-ai-end_sp { align-items: end; }

        /* ==========================
        hidden
        ========================== */
        .hidden_sp { display: none; }
    }

    @media(min-width: 960px) {

        /* ==========================
        font-size
        ========================== */
        .h1_pc { font-size: var(--f-size-h1); }
        .h2_pc { font-size: var(--f-size-h2); }
        .h3_pc { font-size: var(--f-size-h3); }
        .h4_pc { font-size: var(--f-size-h4); }
        .h5_pc { font-size: var(--f-size-h5); }
        .h6_pc { font-size: var(--f-size-h6); }
        .text-size-s_pc { font-size: var(--f-size-s); }
        .text-size-ss_pc { font-size: var(--f-size-ss); }

        /* ==========================
        text
        ========================== */
        .text-left_pc { text-align: left;}
        .text-center_pc { text-align: center;}
        .text-right_pc { text-align: right;}

        .wb-keep-all_pc { word-break: keep-all; }
        .wb-break-all_pc { word-break: break-all; }

        .br_pc:before {
            content: "\a";
            white-space: pre;
        }

        /* ==========================
        size
        ========================== */
        .w-50p_pc { width: 50%; }

        /* ==========================
        flex
        ========================== */
        .f-ai-start_pc { align-items: start; }
        .f-ai-center_pc { align-items: center; }
        .f-ai-end_pc { align-items: end; }

        /* ==========================
        hidden
        ========================== */
        .hidden_pc { display: none; }
    }

} /* end : #sustainability */

/* =================================================================================================
 animation
==================================================================================================== */
@keyframes susMvScroll_pc {
  0% {
    background-position: center top;
  }
  50% {
    background-position: center bottom;
  }
  100% {
    background-position: center top;
  }
}
@keyframes susMvScroll_sp {
  0% {
    background-position: left top;
  }
  50% {
    background-position: right top;
  }
  100% {
    background-position: left top;
  }
}