@layer base, module, layout, pages, utility, custom;

/* =================================================================================================
@layer base
==================================================================================================== */
@layer base {

    /* ==========================
    normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
    ========================== */
    html {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%
    }

    body {
        margin: 0
    }

    main {
        display: block
    }

    h1 {
        font-size: 2em;
        margin: .67em 0
    }

    hr {
        box-sizing: content-box;
        height: 0;
        overflow: visible
    }

    pre {
        font-family: monospace, monospace;
        font-size: 1em
    }

    a {
        background-color: transparent
    }

    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
    }

    /* ==========================
    Reset
    ========================== */
    *,
    ::after,
    ::before {
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    div,
    ul,
    dl,
    dt,
    dd,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0px;
        padding: 0px;
    }

    ul {
        list-style: none;
    }

    img {
        max-width: 100%;
        height: auto;
        vertical-align: bottom;
    }

    /* ==========================
    Root
    ========================== */
    :root {
        interpolate-size: allow-keywords;
        font-size: min(16px, 4.2666666667vw);
        --s-gutter: clamp(1rem, 0.156rem + 2.344vw, 2.2222222222rem);
        --s-box-section: clamp(3rem, 2.273rem + 3.64vw, 5rem);
        --s-box-pd: clamp(1rem, 0.719rem + 0.781vw, 1.3333333333rem);
        --s-container-md: 720px;
        --s-container: 1200px;
        --s-btn-bdr-radius: 0.35rem;
        --c-primary: #6b7e8e;
        --c-primary-l: #8aa2b2;
        --c-sub: #f5f5f5;
        --c-sub2: #f7f2cb;
        --c-accent: #f4db25;
        --c-accent-l: #f40000;
        --c-body-bg: #fff;
        --c-body-color: #0a141e;
        --c-border-color: #ddd;
        --f-size-h1: clamp(1.75rem, 0.836rem + 2.539vw, 3rem);
        --f-size-h2: clamp(1.625rem, 0.992rem + 1.758vw, 2.4444444444rem);
        --f-size-h3: clamp(1.375rem, 0.953rem + 1.172vw, 1.8888888889rem);
        --f-size-h4: clamp(1.25rem, 0.969rem + 0.781vw, 1.5555555556rem);
        --f-size-h5: clamp(1.125rem, 0.984rem + 0.391vw, 1.2222222222rem);
        --f-size-h6: 1rem;
        /*--f-size-s: 0.875rem;*/
        --f-size-s: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem);
        --f-size-ss: clamp(0.5rem, 0.455rem + 0.23vw, 0.625rem);
        --f-family-g: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
        --f-family-m: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
        --f-family-e: "Arial Black", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    }

    @media(min-width: 577px) {
        :root {
            font-size: min(16px, 2.2222222222vw);
        }
    }

    @media(min-width: 1025px) {
        :root {
            font-size: min(18px, 1.2121212121vw);
        }
    }

    @-ms-viewport {
        width: auto;
    }

    /* ==========================
    html, body
    ========================== */
    html {
        scroll-behavior: smooth;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -ms-overflow-style: scrollbar;
    }

    body {
        margin: 0px;
        padding: 0px;
        color: var(--c-body-color);
        background-color: var(--c-body-bg);
        line-height: 1.5;
        overflow-x: hidden;
        font-family: var(--f-family-g);
    }

    /* ==========================
    a
    ========================== */
    a {
        color: var(--c-primary);
    }

    a:visited {
        color: color-mix(in srgb, var(--c-primary), white 10%);
    }

    a:hover {
        color: color-mix(in srgb, var(--c-primary), white 20%);
    }

    /* ==========================
    form
    ========================== */
    input,
    select,
    textarea {
        border: 1px solid var(--c-border-color);
        padding: .5em 1em;
        color: var(--c-body-color);
        background: var(--c-body-bg);
        border-radius: var(--s-btn-bdr-radius);
        max-width: 100%
    }

    input:focus,
    select:focus,
    textarea:focus {
        background: var(--c-sub);
        border-color: var(--c-primary)
    }

    input[placeholder],
    select[placeholder],
    textarea[placeholder] {
        color: color-mix(in srgb, var(--c-body-color), white 20%)
    }

    [type=text],
    [type=search],
    [type=tel],
    [type=url],
    [type=email],
    [type=password],
    textarea {
        width: 100%
    }

    form label {
        display: inline-block
    }

    input,
    input:hover,
    input:focus,
    select,
    select:hover,
    select:focus {
        transition: all .5s ease
    }

    [type=submit] {
        cursor: pointer;
        padding: .5em 2em;
        border: none;
        background: var(--c-primary);
        color: var(--c-body-bg)
    }

    [type=submit]:visited {
        color: var(--c-body-bg)
    }

    [type=submit]:hover,
    [type=submit]:focus,
    [type=submit]:active {
        color: var(--c-body-bg);
        background: color-mix(in srgb, var(--c-primary), white 20%)
    }

    [type=submit]:disabled {
        background: #eceeef;
        color: #818a91
    }

    .readonly {
        border: none
    }

    .readonly:focus {
        background: var(--c-body-bg)
    }

    /* ==========================
    heading
    ========================== */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-bottom: .5em;
        line-height: 1.2;
        word-break: auto-phrase;
    }

    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)
    }

}

/* end : @layer base */


/* =================================================================================================
@layer module
==================================================================================================== */
@layer module {

    /* ==========================
    logo
    ========================== */
    .logo {
        img {
            width: clamp(11.25rem, 8.523rem + 13.64vw, 18.75rem);
            aspect-ratio: 5 / 1;
        }

        &:hover,
        &:focus,
        &:active {
            filter: drop-shadow(2px 2px 3px color-mix(in srgb, var(--c-body-color), transparent 70%));
            transition: all .5s ease;
        }
    }

    /* ==========================
    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-icon {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--c-body-color);
        text-align: center;
        width: clamp(2.813rem, 2.472rem + 1.7vw, 3.75rem);
        height: clamp(2.813rem, 2.472rem + 1.7vw, 3.75rem);
        transition: all .5s ease;
        border-radius: var(--s-btn-bdr-radius);

        .icon {
            max-width: clamp(1.875rem, 1.534rem + 1.7vw, 2.813rem);
        }

        .text {
            font-size: var(--f-size-ss);
        }

        .pop {
            position: absolute;
            top: -0.25rem;
            right: 0;
            font-size: var(--f-size-ss);
            color: var(--c-body-bg);
            z-index: 1;
            padding: 0.25rem;
            line-height: 1;

            &::after {
                content: "";
                background-color: var(--c-accent);
                width: 100%;
                aspect-ratio: 1 / 1;
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: -1;
                transform: translate(-50%, -50%);
                border-radius: 50%;
            }
        }

        &:hover,
        &:focus,
        &:active {
            background-color: var(--c-sub);
        }
    }

    .btn-open-nav {
        .ham {
            width: clamp(1.875rem, 1.534rem + 1.7vw, 2.813rem);
            height: clamp(1.875rem, 1.534rem + 1.7vw, 2.813rem);
            position: relative;
            display: block;

            >i {
                display: inline-block;
                transition: all .4s;
                position: absolute;
                left: 15%;
                width: 70%;
                height: 2px;
                border-radius: 1.5px;
                background: var(--c-body-color);

                &:nth-of-type(1) {
                    top: 20%;
                    transform-origin: left top;
                }

                &:nth-of-type(2) {
                    top: calc(50% - 1.5px);
                    transform-origin: center;
                }

                &:nth-of-type(3) {
                    bottom: 20%;
                    transform-origin: left bottom;
                }
            }
        }

        &.close {
            .ham {
                >i {
                    width: 83%;

                    &:nth-of-type(1) {
                        transform: rotate(45deg);
                    }

                    &:nth-of-type(2) {
                        opacity: 0;
                    }

                    &:nth-of-type(3) {
                        transform: rotate(-45deg);
                    }
                }
            }
        }
    }

    .btn-page-top {
        display: inline-block;
        width: clamp(2.5rem, 2.273rem + 1.14vw, 3.125rem);
        height: clamp(2.5rem, 2.273rem + 1.14vw, 3.125rem);
        background-color: color-mix(in srgb, var(--c-body-color), transparent 50%);
        color: var(--c-body-bg);
        text-decoration: none;
        cursor: pointer;
        z-index: 2000;
        border-radius: var(--s-btn-bdr-radius);

        &::after {
            content: "";
            width: 15px;
            height: 15px;
            border-top: 2px solid var(--c-body-bg);
            border-left: 2px solid var(--c-body-bg);
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: center;
            transform: translate(-50%, -50%) rotate(45deg);

        }

        &:hover,
        &:focus,
        &:active {
            color: var(--c-body-bg);

            &::after {
                animation: PageTop .75s linear infinite;
            }
        }
    }

    @keyframes PageTop {
        0% {
            opacity: 1;
            top: 50%;
        }

        50% {
            opacity: 0;
            top: 0;
        }

        51% {
            opacity: 0;
            top: 100%;
        }

        100% {
            opacity: 1;
            top: 50%;
        }
    }

    .btn-a {
        display: inline-flex;
        align-items: center;
        color: var(--c-body-color);
        text-decoration: none;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        padding: .5em 1em;
        z-index: 1;
        border: 1px solid var(--c-border-color);
        border-radius: var(--s-btn-bdr-radius);

        &::after {
            content: "";
            position: absolute;
            background-color: var(--c-accent-l);
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            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 1em .5em 2em;
        z-index: 1;
        border: 1px solid var(--c-border-color);
        border-radius: var(--s-btn-bdr-radius);

        &::before,
        &::after {
            content: "";
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 3px;
            top: calc(50% - 3px);
            left: 1em;
            background-color: var(--c-primary-l);
            transform-origin: center right;
            transition: all .2s;
        }

        &:hover,
        &:focus,
        &:active,
        &.on {

            &::before,
            &::after {
                width: 10px;
                height: 2px;
                border-radius: 0;
                top: 50%;
                transform: translateY(-50%);
            }

            &::before {
                transform: translateY(-50%) rotate(45deg);
            }

            &::after {
                transform: translateY(-50%) rotate(-45deg);
            }
        }
    }

    .btn-c {
        display: inline-flex;
        align-items: center;
        color: var(--c-body-bg);
        text-decoration: none;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        padding: .5em 1em;
        z-index: 1;
        border-radius: var(--s-btn-bdr-radius);
        transition: ease .2s;
        background-color: var(--c-primary);

        &::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.5em .5em 2.5em;
        z-index: 1;
        border: 1px solid var(--c-border-color);
        border-radius: var(--s-btn-bdr-radius);
        transition: ease .2s;

        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0.5em;
            width: 16px;
            height: 2px;
            background-color: var(--c-primary-l);
            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: 2px solid var(--c-primary-l);
            border-right: 2px solid var(--c-primary-l);
            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);
            }
        }
    }

    .btn-card-1 {
        display: flex;
        flex-wrap: wrap;
        background-color: var(--c-body-bg);
        transition: all .5s ease;
        border-radius: var(--s-btn-bdr-radius);
        padding: 0.5rem;

        >.img {
            overflow: hidden;
            flex-basis: 30%;
            max-width: 30%;
            border-radius: 0.5rem;
        }

        >.category {
            font-size: var(--f-size-ss);
            width: fit-content;
            position: absolute;
            bottom: 0;
            right: 0;
            border-radius: var(--s-btn-bdr-radius) 0 var(--s-btn-bdr-radius) 0;
        }

        >.text {
            flex-basis: 70%;
            max-width: 70%;
            order: -1;
            align-self: center;
            padding-right: 1rem;
            text-decoration: none;
            color: var(--c-body-color);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        >.note {
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            >li {
                padding-right: 1rem;
            }

            .face {
                img {
                    width: 2rem;
                    height: 2rem;
                    object-fit: cover;
                    border-radius: 50%;
                }
            }

            .like {
                .icon {
                    width: 1.2rem;
                    vertical-align: middle;
                }

                .count {
                    color: var(--c-primary);
                    font-size: var(--f-size-s);
                }
            }

            .data {
                color: var(--c-primary);
                font-size: var(--f-size-s);
            }
        }

        &:hover,
        &:focus,
        &:active {
            background-color: var(--c-sub);
        }
    }

    @media(min-width: 768px) {
        .btn-card-1 {
            >.text {
                height: 3em;
            }
        }
    }

    @media(min-width: 1025px) {
        .btn-card-1 {
            >.img {
                flex-basis: 100%;
                max-width: 100%;
            }

            >.category {
                top: 0;
                left: 0;
                right: auto;
                bottom: auto;
            }

            >.text {
                flex-basis: 100%;
                max-width: 100%;
                order: 0;
                margin: 0.5rem 0;
            }
        }
    }

    .btn-card-2 {
        display: flex;
        flex-wrap: wrap;
        background-image: linear-gradient(135deg, var(--c-accent-l) 40%, var(--c-sub) 40%);
        transition: all .5s ease;
        border-radius: var(--s-btn-bdr-radius);
        padding: 0.5rem;
        text-decoration: none;
        height: 100%;

        >.img {
            overflow: hidden;
            flex-basis: 40%;
            max-width: 40%;

            >img {
                width: fit-content;
            }
        }

        >.text {
            flex-basis: 60%;
            max-width: 60%;
            order: -1;
            align-self: center;
            padding-right: 1rem;
            text-decoration: none;
            color: var(--c-body-bg);
            overflow: hidden;

            .title {
                word-break: keep-all;
                text-stroke: var(--c-accent-l) 3px;
                -webkit-text-stroke: var(--c-accent-l) 3px;
                paint-order: stroke;
                &::after {
                    background-color: var(--c-body-bg);
                }
            }

            .description {
                font-size: 13px;
                text-stroke: var(--c-accent-l) 1px;
                -webkit-text-stroke: var(--c-accent-l) 1px;
                paint-order: stroke;
                text-shadow: 1px 1px 0 var(--c-accent-l),-1px -1px 0 var(--c-accent-l), 1px -1px 0 var(--c-accent-l);
            }
        }
    }

    .hvr-shadow {
        filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c-body-color), transparent 70%));

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

    .hvr-shadow-2 {

        &:hover,
        &:focus,
        &:active {
            background-color: var(--c-sub);
            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-sub);
        border-radius: 0.5em;
        padding: var(--s-box-pd);
    }

    .box-c {
        background: var(--c-sub2);
        padding: var(--s-box-pd);
    }


    /* ==========================
    caption
    ========================== */
    .cap-subhead {
        padding: 0.5em;
        border-top: 1px solid var(--c-primary-l);
        border-bottom: 1px solid var(--c-primary-l);
        position: relative;

        &:has(.pop) {
            text-indent: 1em;
        }

        .icon {
            width: 1.2em;
        }

        .pop {
            position: absolute;
            top: -0.75rem;
            left: 0;
            font-size: var(--f-size-s);
            z-index: 1;
            padding: 0.25rem 0.5rem;
            line-height: 1;
            transform: rotate(-15deg);
            text-indent: 0;
            color: var(--c-body-bg);

            &::before {
                content: "";
                width: 0.5rem;
                height: 0.5rem;
                clip-path: polygon(0 0, 100% 0, 50% 100%);
                background-color: var(--c-accent-l);
                position: absolute;
                top: 100%;
                left: 1rem;
            }

            &::after {
                content: "";
                background-color: var(--c-accent-l);
                width: 100%;
                height: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: -1;
                transform: translate(-50%, -50%);
                border-radius: 1rem;
                text-indent: 0;
            }
        }
    }

    .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-accent-l);
            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-primary-l);
        }
    }

    .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 {
        a {
            display: flex;
            flex-wrap: wrap;
            text-decoration: none;
            transition: all 0.5s ease;
            align-items: center;
            padding: 0.5rem;
            border-radius: var(--s-btn-bdr-radius);
            color: var(--c-body-color);

            .data {
                font-size: var(--f-size-ss);
                padding-right: 1rem;
            }

            .title {
                font-size: var(--f-size-s);
            }

            &:hover,
            &:focus,
            &:active {
                background-color: var(--c-sub2);
            }
        }
    }

    .post-list-2 {
        display: flex;
        flex-wrap: wrap;

        >li {
            margin-top: 1rem;
            /*1024 kyou追加（タグ位置ズレ対応のため）start*/
            position: relative;
            /*1024kyou追加end*/
        }
    }

    .bnr-list {
        display: flex;
        flex-wrap: wrap;

        >li {
            margin-top: 1rem;
        }
    }

    @media(min-width: 769px) {
        .post-list-2 {
            >li {
                width: 50%;
                padding: 0.5rem;
            }
        }

        .bnr-list {
            >li {
                width: 50%;
                padding: 0.5rem;
            }
        }
    }

    @media(min-width: 1025px) {
        .post-list-2 {
            width: 80%;
            /*1003 kyou追加*/
            justify-self: center;
            /*1003 kyou追加*/

            >li {
                width: 33%;
                padding: 1rem;
            }
        }

        .bnr-list {
            >li {
                width: 33.33%;
            }
        }
    }

    .page-nav {
        margin-top: var(--s-box-section);

        >ul {
            display: flex;
            align-items: center;
            justify-content: center;

            >li {
                padding: 0 0.2rem;
            }
        }

        a {
            display: inline-flex;
            width: 2rem;
            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-bg);
                cursor: default;

                &::after {
                    background-color: var(--c-body-color);
                    border-color: var(--c-body-color);
                }
            }
        }
    }

    /* ==========================
    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;
    }

    /* ==========================
    slick-slider
    ========================== */
    .slick-prev,
    .slick-next {
        width: 40px;
        height: 40px;
        z-index: 1;

        &::before {
            font-size: var(--f-size-h3);
            color: var(--c-primary) !important;
        }
    }

    .slick-prev {
        transform: translate(50%, -50%);
    }

    .slick-next {
        transform: translate(-50%, -50%);
    }

    .slick-dots {
        display: none;
        bottom: 0;
        transform: translateY(50%);
    }

    /* ==========================
    etc
    ========================== */
    .text-maru {
        position: relative;
        padding: 0 0.25em;
        z-index: 1;
        display: 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%;
        }
        > img {
            filter: brightness(100);
        }
    }

}

/* end : @layer module */


/* =================================================================================================
@layer layout
==================================================================================================== */
@layer layout {

    /* ==========================
    wrap
    ========================== */
    #wrap {}

    /* ==========================
    header
    ========================== */
    #header {
        padding-top: clamp(0.5rem, 0.318rem + 0.91vw, 1rem);
        padding-bottom: clamp(0.5rem, 0.318rem + 0.91vw, 1rem);
        background-color: var(--c-body-bg);
        box-shadow: 0 1px 4px color-mix(in srgb, var(--c-body-color), transparent 90%);
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .header-container {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: auto 1fr;
        padding-left: clamp(0rem, -0.909rem + 4.55vw, 2.5rem);
        padding-right: clamp(0rem, -0.909rem + 4.55vw, 2.5rem);
    }

    .header-logo {
        place-self: center;
        margin-right: 1rem;
    }

    .header-menu {
        text-align: right;

        >ul {
            display: inline-flex;

            >li {
                padding-left: clamp(0rem, -0.364rem + 1.82vw, 1rem);
                padding-right: clamp(0rem, -0.364rem + 1.82vw, 1rem);
            }
        }
    }

    /* ==========================
     footer
    ========================== */
    #footer {
        background-color: var(--c-sub);
        padding: var(--s-box-section) 0;
        margin-top: var(--s-box-section);
    }

    .footer-container {
        padding: 0 var(--s-gutter);
        display: flex;
        flex-direction: column;
    }

    .footer-menu {
        display: flex;
        flex-wrap: wrap;
        margin-top: 2rem;

        >div {
            width: 100%;
            border-top: 1px solid var(--c-border-color);
            margin-top: 1rem;
            padding-top: 1rem;

            &:last-child {
                padding-bottom: 1rem;
                border-bottom: 1px solid var(--c-border-color);
            }
        }

        .btn-a,
        .btn-b {
            width: 100%;
            border: none;
            border-radius: 0;
        }
    }

    .copyright {
        margin-top: 3rem;
        text-align: center;
        font-size: var(--f-size-ss);
    }

    @media(min-width: 769px) {
        .footer-menu {
            >div {
                width: calc(50% - 1rem);
                margin: -1px 0.5rem 0 0.5rem;
                padding-bottom: 1rem;
                border-bottom: 1px solid var(--c-border-color);
            }
        }
    }

    @media(min-width: 1025px) {
        .footer-container {
            align-items: center;
        }

        .footer-menu {
            width: 100%;

            >div {
                width: calc(25% - 1rem);
            }
        }
    }

    /* ==========================
     page top
    ========================== */
    .page-top-container {
        position: fixed;
        right: var(--s-gutter);
        bottom: 1rem;
        z-index: 5;
        transition: 0.75s all ease;
        opacity: 0;
        pointer-events: none;

        &.change {
            pointer-events: all;
            opacity: 1;
        }
    }

    /* ==========================
     nav-global
    ========================== */
    .close-area {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        display: none;

        &.change {
            display: block;
        }
    }

    #nav-global {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 20;
        padding-top: clamp(4.375rem, 3.693rem + 3.41vw, 6.25rem);
        background-color: var(--c-body-bg);
        transition: all .6s;
        transform: translateX(100%);
        display: flex;
        flex-direction: column;
        justify-content: center;

        &.change {
            transform: translateX(0);
        }
    }

    .nav-global-container {
        display: flex;
        flex-direction: column;
        position: relative;
        justify-content: space-between;
        overflow-y: auto;
        overflow-x: hidden;
        width: calc(100% - var(--s-gutter) * 2);
        height: calc(100% - 50px);
        max-height: 90%;
        margin: 1rem auto 0 auto;
    }

    .nav-global-menu {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .btn-a {
            width: 100%;
            font-size: var(--f-size-h5);
            border: none;
            border-radius: 0;
        }

        .btn-b {
            width: calc(100% - 1rem);
            border: none;
            border-radius: 0;
            margin-left: 1rem;
        }
    }

    .nav-global-container-user {
        width: calc(100% - var(--s-gutter) * 2);
        margin: 1rem auto 0 auto;

        >ul {
            display: flex;

            >li {
                width: 50%;
                padding: 0 0.5rem;
            }
        }

        .btn-a {
            width: 100%;
            background-color: var(--c-sub);
        }
    }

    .nav-global-container-close {
        width: calc(100% - var(--s-gutter) * 2);
        margin: 1rem auto 0 auto;
        text-align: center;

        .btn-c {
            justify-content: center;
            width: 100%;
        }
    }

    @media(min-width: 769px) {
        #nav-global {
            width: 40vw;
            box-shadow: -1px 0 4px color-mix(in srgb, var(--c-body-color), transparent 90%);
        }
    }

    @media(min-width: 1025px) {
        #nav-global {}

        .nav-global-menu {
            >li {
                >ul {
                    display: flex;
                    flex-wrap: wrap;

                    >li {
                        flex-basis: 50%;
                        max-width: 50%;
                    }
                }
            }
        }
    }

    /* ==========================
     contents title
    ========================== */
    .contents-title {
        display: block;
        padding: 3rem var(--s-gutter);
        background-color: var(--c-sub);
        background-image:
            linear-gradient(135deg, var(--c-accent-l) 50%, var(--c-sub) 50%),
            linear-gradient(135deg, var(--c-sub) 50%, var(--c-accent-l) 50%);
        background-size: 4rem 4rem, 4rem 4rem;
        background-repeat: no-repeat, no-repeat;
        background-position: top left, right bottom;

        >h1 {
            margin: 0;
            text-align: center;
        }
    }

}

/* end : @layer layout */


/* =================================================================================================
@layer pages
==================================================================================================== */
@layer pages {

    /* ==========================
     login page
    ========================== */
    .login-kv {
        max-width: 960px;
        margin: 0 auto;

        img {
            border-radius: 1rem;
        }
    }

    /* ==========================
     top page
    ========================== */
    .top-kv {
        overflow-x: hidden;

        .top-kv-container {
            max-width: 960px;
            margin: 0 auto;
        }

        .slick-slider {
            .slick-list {
                overflow: visible;
            }

            .slick-slide {
                transform: scale(0.9);
                transition: all 300ms ease;
                overflow: hidden;
                border-radius: 1rem;

                &:has(a) {

                    &:hover,
                    &:focus,
                    &:active {
                        filter: drop-shadow(0px 0px 5px color-mix(in srgb, var(--c-body-color), transparent 70%));
                        transition: all .5s ease;
                    }
                }
            }

            .is--active {
                /*transform: scale( 1 );*/
            }
        }

        .box-text {
            width: 100%;
            aspect-ratio: 16 / 9;
            background-color: var(--c-sub);
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            text-decoration: none;
            color: var(--c-body-color);

            &:hover,
            &:focus,
            &:active {
                text-decoration: underline;
            }
        }
    }

    .top-use-list {
        >li {
            margin-top: 0.5rem;
        }

        .btn-a {
            .icon {
                width: 1.8em;
            }
        }
    }

    .top-seach-list {
        >li {
            margin-top: 1rem;
        }

        .btn-a {
            .icon {
                width: 2.4em;
            }
        }
    }

    @media(min-width: 769px) {

        .top-use-list,
        .top-seach-list {
            display: flex;
            flex-wrap: wrap;

            >li {
                width: 50%;
                padding: 0 0.5rem;
            }
        }
    }

    @media(min-width: 1025px) {
        .top-use-list {
            >li {
                width: 20%;

                &:last-child {
                    width: 100%;
                }
            }

            .btn-a {
                flex-direction: column;
                justify-content: center;
                height: 100%;

                .icon {
                    width: 4rem;
                }

                .text {
                    text-align: center;
                    font-size: var(--f-size-s);
                    word-break: keep-all;
                    margin-top: 0.5rem;
                }
            }
        }
    }

    /* ==========================
     post page
    ========================== */
    .profile {
        border-top: 3px solid var(--c-primary);
        border-bottom: 3px solid var(--c-primary);
        padding: calc(var(--s-box-pd) + 0.75rem) var(--s-box-pd);
        display: grid;
        grid-template-columns: 25% 75%;
        grid-template-rows: auto auto;
        position: relative;
        background-color: var(--c-sub);

        &::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 0;
            width: 100%;
            height: calc(100% - 4px);
            border-top: 1px solid var(--c-primary);
            border-bottom: 1px solid var(--c-primary);
            pointer-events: none;
        }

        >.photo {
            grid-column: 1 / 2;
            grid-row: 1 / 2;

            img {
                border-radius: 0.5rem;
            }
        }

        >.text {
            padding-left: 1rem;
            grid-column: 2 / 3;
            grid-row: 1 / 2;
        }

        >.text2 {
            grid-column: 1 / 3;
            grid-row: 2 / 3;
        }
    }

    @media(min-width: 769px) {
        .profile {
            >.photo {
                grid-column: 1 / 2;
                grid-row: 1 / 3;
            }

            >.text {
                grid-column: 2 / 3;
                grid-row: 1 / 2;
            }

            >.text2 {
                padding-left: 1rem;
                grid-column: 2 / 3;
                grid-row: 2 / 3;
            }
        }
    }

    @media(min-width: 1025px) {
        .profile {
            grid-template-columns: 15% 85%;
        }
    }

    .post-note {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        >li {
            padding-right: 1rem;
        }

        .face {
            img {
                width: 2rem;
                height: 2rem;
                object-fit: cover;
                border-radius: 50%;
            }
        }

        .like {
            .icon {
                width: 1.2rem;
                vertical-align: middle;
            }

            .count {
                color: var(--c-primary);
                font-size: var(--f-size-s);
            }
        }

        .data {
            color: var(--c-primary);
            font-size: var(--f-size-s);
        }
    }

    .post-normalize {
        ul {
            list-style: disc;
            padding-left: 2.5em;
            margin-top: 1em;
            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;

            ul {
                list-style: circle;
                margin-top: 0;
            }

            ol {
                margin-top: 0;
            }
        }

        h1,
        h2,
        h3 {
            margin-top: 2em;
        }
    }

    .post-icon-menu {
        display: flex;

        >li {
            padding: 0 0.5rem;
        }
    }

    .post-tag-menu {
        display: flex;
        flex-wrap: wrap;

        >li {
            margin-top: 0.5rem;
            padding: 0 0.5rem;
            width: 50%;
        }

        a {
            justify-content: center;
        }
    }

    @media(min-width: 769px) {
        .post-tag-menu {
            >li {
                width: 33.33%;
            }
        }
    }

    @media(min-width: 1025px) {
        .post-tag-menu {
            >li {
                width: 25%;
            }
        }
    }
}

/* end : @layer pages */


/* =================================================================================================
@layer utility
==================================================================================================== */
@layer 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-100 {
        font-weight: 100;
    }

    .text-w-200 {
        font-weight: 200;
    }

    .text-w-300 {
        font-weight: 300;
    }

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

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

    .text-w-600 {
        font-weight: 600;
    }

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

    .text-w-800 {
        font-weight: 800;
    }

    .text-w-900 {
        font-weight: 900;
    }

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

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

    .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-none {
        border: none;
    }

    /* ==========================
     flex
    ========================== */
    .f-jc-center {
        justify-content: center;
    }

    .f-ai-center {
        align-items: center;
    }

    /* ==========================
     color
    ========================== */
    .text-primary {
        color: var(--c-primary);
    }

    .text-primary-l {
        color: var(--c-primary-l);
    }

    .text-accent {
        color: var(--c-accent);
    }

    .text-accent-l {
        color: var(--c-accent-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);
    }

    .bg-primary {
        background-color: var(--c-primary);
    }

    .bg-primary-l {
        background-color: var(--c-primary-l);
    }

    .bg-accent {
        background-color: var(--c-accent);
    }

    .bg-accent-l {
        background-color: var(--c-accent-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);
    }

    /* ==========================
     size
    ========================== */
    .w-100p {
        width: 100%;
    }

    .w-fit-content {
        width: fit-content;
    }

    .w-08em {
        width: 0.8em;
    }

    .w-1em {
        width: 1em;
    }

    .w-1d2em {
        width: 1.2em;
    }

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

    .h-fit-content {
        height: fit-content;
    }

    /* ==========================
     etc
    ========================== */
    .shadow {
        box-shadow: 0 0 14px 0 color-mix(in srgb, var(--c-body-color), transparent 80%);
    }

    /* ==========================
     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;
    }

    /* ==========================
     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-bottom: 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-bottom: var(--s-gutter);
    }

    .p-l-gutter {
        padding-left: var(--s-gutter);
    }

    .p-b-gutter {
        padding-bottom: var(--s-gutter);
    }

    .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;
    }

    @media(max-width: 768px) {

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

        .text-center_sp {
            text-align: center;
        }

        .text-right_sp {
            text-align: right;
        }

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

    }

    @media(min-width: 769px) {

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

        .text-center_tb {
            text-align: center;
        }

        .text-right_tb {
            text-align: right;
        }

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

    }

    @media(min-width: 1025px) {

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

        .text-center_pc {
            text-align: center;
        }

        .text-right_pc {
            text-align: right;
        }

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

    }

}

/* end : @layer utility */


/* =================================================================================================
@layer custom
==================================================================================================== */
@layer custom {

    @media(min-width: 769px) {}

    @media(min-width: 769px) {}

    @media(min-width: 1025px) {}

}

/* end : @layer custom */


/*250903追加*/
.form_container {
    padding: 0;
}

.form_section {
    margin-top: 0;
}

.form_section .container-md {
    max-width: 100%;
}

.form_section .form_group {
    display: flex;
    flex-direction: column;
    margin: 3% 0;
}

.form_section .form_group textarea {
    height: 150px;
    resize: none;
}

.form_section .select {
    display: block;
}

.form_section .form_group_input {
    display: flex;
    gap: 10px;
}

.form_section .form_group_input input {
    transform: scale(1.2);
}

.form_section .btn-c {
    width: 50%;
}

.form_section .form_group p {
    border: 1px solid var(--c-border-color);
    padding: .5em 1em;
    color: var(--c-body-color);
    background: var(--c-body-bg);
    border-radius: var(--s-btn-bdr-radius);
    max-width: 100%;
}

.form_section .span_width {
    border: none !important;
    display: flex;
    gap: 10px;
    display: flex;
    flex-direction: column;
}



.form_bk_btn {
    position: relative;
    width: 50%;
    background-color: var(--c-body-bg);
    color: var(--c-body-color);
    cursor: pointer;
    padding: .5em 1em;
    border: 1px solid var(--c-border-color);
    border-radius: var(--s-btn-bdr-radius);
    overflow: hidden;
    /* 擬似要素をはみ出させない */
    font-size: 18px;
}

.form_bk_btn:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    /*半透明の白*/
    opacity: 0;
    /*初期は透明*/
    transition: opacity 0.5s ease;
    /*ゆっくり出す*/
    pointer-events: none;
    /*クリックを邪魔しない*/
}

.form_bk_btn:hover::after {
    opacity: 1;
    /*hoverで霧が見える*/
}

.form_section label {
    margin-bottom: 5px;
}

@media (max-width: 600px) {
    .form_section .form_group {
        margin: 5% 0;
    }
}

/* === ここまでが今あるCSS === */

/* ▼▼▼ 以下を25/9/12sato追記 ▼▼▼ */
@media(max-width: 768px) {
    .bnr-list {
        display: block;
    }

    .bnr-list>li {
        width: 100%;
        padding: 0;
    }
}


/* ▼▼▼ 以下を25/10/03 kyou追記 ▼▼▼ */
.section-img-center {
    display: flex;
    justify-content: center;
}



@media (min-width: 769px) {
    .section-content-width {
        width: 620px !important;
        margin-inline: auto !important;
    }
}

/* ▼▼▼ 以下を25/10/16 kyou追記 ▼▼▼ */
.slick-slide {
    height: fit-content !important;
}
/* ▼▼▼ 以下を26/05/01 kyou追記 ▼▼▼ */
.top-use-list {
  justify-content: center;
}