@charset "utf-8";

:root {
    /* - カテゴリーカラー */
    --category-color-main: #AF0707;
    --category-color-hobby: #FF9115;
    --category-color-military: #446B18;
    --category-color-web: #0A64BE;
    --category-color-diary: #7A2B7A;

    /* - 基本カラー */
    --color-default: #333;
    --color-back-main: #f4f4f4;
    --color-border-main: #ccc;

    /* - コンテナサイズ */
    --header-height: 103px;
    --container-width: 1282px;
    --container-padding: 30px;
    --container-margin: 50px;

    /* - フォント設定 */
    --font-size-base: 17px;
    --font-gothic: YakuHanJP, "Noto Sans JP", "Meiryo", "Yu Gothic", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Arial", sans-serif;
    --font-gothic-noadjust: "Noto Sans JP", "Meiryo", "Yu Gothic", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Arial", sans-serif;
    --font-mincho: "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", "MS PMincho", "Times New Roman", serif;
    --font-en: "Times New Roman", serif;

    --transition-speed: .4s;
    --transition-speed-high: .2s;
    --leading-trim: calc((1em - 1lh) / 2);

    /* - その他共通 */
    --border-radius-base: 10px;
}

.is-color-hobby {
    --category-color-main: var(--category-color-hobby);
}

.is-color-military {
    --category-color-main: var(--category-color-military);
}

.is-color-web {
    --category-color-main: var(--category-color-web);
}

.is-color-diary {
    --category-color-main: var(--category-color-diary);
}

/*
html{
	scroll-behavior: smooth;
}
*/
body {
    min-height: 100svh;
    color: var(--color-default);
    font-family: var(--font-gothic);
    font-size: var(--font-size-base);
    font-weight: 400;
    padding-top: var(--header-height);
    background: var(--color-back-main);
    line-height: 2;

    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    -webkit-text-size-adjust: 100%;
}

input,
textarea,
select,
button {
    font-family: var(--font-gothic);
    font-weight: 400;
}

img {
    max-width: 100%;
    /*width: auto;*/
    height: auto;
    /*image-rendering: -webkit-optimize-contrast;*/
}

img[src$=".svg"] {
    width: 100%;
}

a[href^="tel:"]:hover {
    opacity: 1;
}

:lang(en) {
    font-family: var(--font-en);
}


@media (min-width:1024px) {

    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }

}

@media (hover: hover) {

    a:any-link:hover,
    button:not(#g-menu-button, .js-menu-close, .init):enabled:hover {
        opacity: .6;
    }

}


/* グローバルヘッダー
--------------------------------------------------------------- */

#g-header {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--header-height);
    border-top: 3px solid var(--category-color-main);
    border-bottom: 1px solid #e6e6e6;
    background: #FFF;
    transition: height .2s;
    z-index: 3;

    &:has(.g-logo + .is-color-hobby) {
        border-top-color: var(--category-color-hobby);
    }

    &:has(.g-logo + .is-color-military) {
        border-top-color: var(--category-color-military);
    }

    &:has(.g-logo + .is-color-web) {
        border-top-color: var(--category-color-web);
    }

    &:has(.g-logo + .is-color-diary) {
        border-top-color: var(--category-color-diary);
    }

    .header-inner {
        box-sizing: content-box;
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        align-items: center;
        max-width: var(--container-width);
        height: 100%;
        padding-inline: var(--container-padding);
        margin: auto;
    }

    @media screen and (min-width:1024px) {

        .g-logo-wrapper {
            transition: .3s;
        }

        &.is-compact {
            height: 70px;
            /*box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, .1);*/

            & .g-logo-wrapper {
                transform: scale(.84) translateX(-25px);
            }
        }

    }

}

/* - サイトタイトル */

.g-logo-wrapper {
    width: fit-content;
    line-height: 1;

    & a {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 15px;
        text-decoration: none;
        margin-bottom: 8px;
    }

    .g-logo img {
        width: auto;
        height: 26px;
        transition: .3s;
    }

    .g-logo-concept {
        font-size: 12px;
        font-weight: 600;
    }

}

/* - サイト基本メニュー */

.g-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    & li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    & li:not(:last-child)::after {
        content: "";
        display: block;
        width: 2px;
        height: 13px;
        background: #ccc;
        margin-inline: 20px;
    }

    & a {
        display: grid;
        grid-template-columns: 13px 1fr;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 700;
        font-feature-settings: "palt";
        text-decoration: none;

        &.current {
            color: var(--category-color-main);
        }

        &::before {
            content: "";
            display: block;
            width: 100%;
            aspect-ratio: 1/1;
            background: var(--category-color-main);
            border-radius: 2px;
        }
    }
}




/* グローバルナビゲーション - PC / SP
--------------------------------------------------------------- */

@media screen and (min-width: 1024px),
print {

    .g-pc-navigation {
        display: block;
    }

    .g-sp-navigation,
    #g-menu-button,
    .js-menu-wrapper {
        display: none;
    }
}

@media screen and (max-width:1023px),
print {

    .g-pc-navigation {
        display: none;
    }

    .g-sp-navigation,
    #g-menu-button {
        display: block;
    }
}


/* ヘッダー PR表記
--------------------------------------------------------------- */

.header-label-wrapper {
    padding: 6px var(--container-padding);
    background: #fff;
    border-bottom: 1px solid #e6e6e6;

    .header-label-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 2em;
        max-width: var(--container-width);
        margin: 0 auto;
    }

    .header-label-newpost-wrapper {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0 20px;
    }

    .label-fair {
        width: fit-content;
        margin-left: auto;
    }
}


/* Swiper
--------------------------------------------------------------- */

.swiper-container {
    box-sizing: border-box;
    position: relative;
    color: #fff;
    height: 300px;
    padding: 20px 0;
    background: #333;
    overflow: hidden;
    line-height: 1;
    z-index: 1;

    .swiper-slide {
        width: 400px;
        aspect-ratio: 1 / .667;
        margin: 0 10px;
        overflow: hidden;
        border-radius: 10px;

        & a {
            position: relative;
            display: block;
            height: 100%;
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            text-decoration: none;

            @media (hover: hover) {
                &:hover img {
                    transform: scale(1.14);
                }
            }

            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 50%;
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .9) 90%);
            }


            .swiper-post-title {
                box-sizing: border-box;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 20px;
                display: grid;
                gap: 7px;
                padding: 0 20px;
                line-height: 1.4;
                z-index: 1;
            }
        }

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            transition: transform .3s;
            transform: scale(1);
        }

    }

    .swiper-button {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 40px;
        min-width: 0;
        aspect-ratio: 1/1;
        border-radius: 100vmax;
        background: var(--category-color-main) url(../img/common/ico_arrow_right.svg) center center / 10px auto no-repeat;
        box-shadow: none;
        border: 0;
        margin: auto;
        cursor: pointer;
        z-index: 1;

        &.is-prev {
            left: 20px;
            transform: scale(-1, 1);
        }

        &.is-next {
            right: 20px;
        }

    }

}


/* コンテナ全体ラッパー
--------------------------------------------------------------- */

.main-wrapper {
    position: relative;
    padding: 40px 0;
    z-index: 1;

    &.is-page,
    &.is-single-column {
        padding-top: 0;
    }
}

.main-column-container {
    box-sizing: content-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 40px;
    max-width: var(--container-width);
    padding-inline: var(--container-padding);
    margin: auto;
}


/* シングルカラム - スタイル
--------------------------------------------------------------- */

@media screen and (min-width:1024px) {
    .is-single-column {
        .main-column-container {
            grid-template-columns: minmax(0, 1fr);
        }

        &::after {
            content: normal;
        }

        .post-header {
            /*padding-top: 20px;*/
        }

        .post-detail {
            max-width: 1000px;
        }

        .post-list {
            grid-template-columns: repeat(4, 1fr);
        }

        .single-post-thumbnail {
            margin-bottom: 3em;
        }

        .single-post-thumbnail-header {
            position: relative;
            height: 150px;
            z-index: 1;
            overflow: hidden;
            margin-bottom: 40px;

            &::after {
                content: "";
                position: absolute;
                inset: 0;
                margin: auto;
                background: rgba(0, 0, 0, .7);
                z-index: -1;
            }

            .is-background {
                position: absolute;
                inset: 0;
                height: 100%;
                z-index: -1;

                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center center;
                    /*filter: blur(5px);*/
                }
            }

            .is-title {
                display: grid;
                place-content: center;
                width: 100%;
                height: 100%;

                & p {
                    color: #fff;
                    font-size: 32px;
                    font-weight: 600;
                    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.9), 0px 0px 5px rgba(0, 0, 0, 0.9), 0px 0px 5px rgba(0, 0, 0, 0.9);
                    letter-spacing: .05em;
                }
            }
        }
    }
}


/* メインカラム
--------------------------------------------------------------- */

.main-container {
    padding: 40px;
    background: #fff;
    border-radius: var(--border-radius-base);
    overflow: hidden;
}

.index-container {
    padding: 0;
}

.template-index-title {
    position: relative;
    display: grid;
    grid-template-columns: 6px auto 1fr;
    align-items: center;
    gap: 20px;
    color: #333;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.4;
    margin-bottom: 40px;

    &::before {
        content: "";
        position: relative;
        top: 2px;
        display: block;
        width: 6px;
        height: 50px;
        border-radius: 3px;
        background: var(--category-color-main);
    }

    &::after {
        content: "";
        width: 100%;
        height: 3px;
        background: var(--category-color-main);
    }

    .color {
        font-size: 1.2em;
        color: var(--category-color-main);
        margin-right: .1em;
    }

}


/* サイドカラム
--------------------------------------------------------------- */

.aside-container {
    background: #fff;
    padding: 40px 30px;
    border-radius: var(--border-radius-base);
}

.aside-container-inner {
    position: relative;
}

.module-block {
    position: relative;
    margin-bottom: 50px;

    &.is-half-margin {
        margin-bottom: 25px;
    }

    .insert-block {
        margin: 0 !important;
    }

    &:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
        margin-bottom: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }

}

@media screen and (min-width:1024px) {

    .aside-container .post-list-square {
        & a {
            grid-template-columns: 1fr 80px;
        }

        & figure {
            order: 2;
        }

    }

    .fix-wrapper {
        position: sticky;
        top: 110px;
        margin-bottom: 50px;
        z-index: 3;
    }

}

.template-title-1 {
    font-size: 18px;
    font-weight: 700;
    /*font-feature-settings: "palt";*/
    padding-bottom: .9em;
    border-bottom: 2px solid var(--category-color-main);
    margin-bottom: 20px;
    line-height: 1.4;

    &:has(+ .post-list-square) {
        margin-bottom: 5px;
    }

    &::first-letter {
        color: var(--category-color-main);
    }

}


/* 固定ページ
--------------------------------------------------------------- */

.page-title {
    position: relative;
    display: grid;
    place-content: center;
    height: 145px;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.9), 0px 0px 5px rgba(0, 0, 0, 0.9), 0px 0px 5px rgba(0, 0, 0, 0.9);
    background: #1f1f1f url(../img/about/main.jpg) center center / cover no-repeat;
    line-height: 1;
    margin-bottom: 50px;
    z-index: 1;

    &.is-404 {
        background-image: url(../img/404/main.jpg);

        &::before {
            background: rgba(0, 0, 0, .1);
        }

    }

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        margin: auto;
        background: rgba(0, 0, 0, .5);
    }

    & span {
        position: relative;
        z-index: 1;
    }

}

.page-detail {
    box-sizing: content-box;
    max-width: var(--container-width);
    padding-inline: var(--container-padding);
    margin: 0 auto 50px;
}


/* アーカイブページ
--------------------------------------------------------------- */

.index-section:not(:last-child) {
    margin-bottom: 70px;
}



/* 404ページ
--------------------------------------------------------------- */

.message-404 {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    line-height: 2.4;
    margin-bottom: 100px;
}



/* 各種コンポーネント
--------------------------------------------------------------- */

/* - カテゴリーラベル */

.label-category {
    box-sizing: border-box;
    display: grid;
    place-content: center;
    width: fit-content;
    min-width: 60px;
    height: 20px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    padding: 0 1em;
    background: var(--category-color-main);
    border-radius: 100vmax;
}


/* - 投稿ラベルコンテナ */

.label-group-post {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    line-height: 1.4;

    .label-fair {
        margin-left: auto;
    }

    @media screen and (min-width: 1024px),
    print {
        &:not(:has(.is-modified)) {
            grid-template-columns: auto auto 1fr;
        }
    }
}

.label-group-post-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 15px;
}


/* - 投稿日付ラベル */

.label-date {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: center;
    gap: .5em;
    color: #555;
    font-size: 12px;
    font-family: var(--font-gothic-noadjust);

    &::before {
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 1/1;
        background: center center / contain no-repeat;
    }

    &.is-public::before {
        background-image: url(../img/common/ico_public.svg);
    }

    &.is-modified::before {
        background-image: url(../img/common/ico_modified.svg);
    }

}


/* - PR表記ラベル */

.label-fair {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: center;
    gap: .5em;
    color: #555;
    font-size: 12px;

    &::before {
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 1/1;
        background: url(../img/common/ico_caution.svg) center center / contain no-repeat;
    }

}


/* - 最新記事1件 */

.label-newpost {
    color: #333;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    & a {
        text-decoration: none;
    }

}


/* - タグリスト */

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    & a {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        font-size: 12px;
        text-decoration: none;
        padding: .1em .6em;
        background: #f2f2f2;
        border-radius: 3px;

        &::before {
            content: "#";
            margin-right: .3em;
        }

        @media (hover: hover) {
            &:hover {
                opacity: 1;
                color: #fff;
                background-color: #333;
            }
        }

    }

    &.is-category {
        & a {
            color: #fff;
            background-color: var(--category-color-main);

            @media (hover: hover) {
                &:hover {
                    opacity: .4;
                }
            }

        }
    }

}


/* - SNSリスト */

.sns-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;

    & a {
        display: grid;
        place-content: center;
        width: 34px;
        aspect-ratio: 1/1;
        border-radius: 0px;
        overflow: hidden;

        &.sns-x {
            background: #000;

            & img {
                width: 18px;
                height: auto;
            }

        }

    }

}


.link-group {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}



/* - ボタン */

.template-button-1 {
    box-sizing: border-box;
    position: relative;
    display: grid;
    place-content: center;
    height: 48px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    padding-inline: 28px;
    background: var(--category-color-main);
    border-radius: 5px;
    line-height: 1;

    &::after {
        position: absolute;
        top: 0;
        right: 15px;
        bottom: 0;
        content: "";
        display: block;
        width: 8px;
        aspect-ratio: 1/1.55;
        background: url(../img/common/ico_arrow_right.svg) center center / contain no-repeat;
        margin: auto;
    }

}

.template-button-block {
    margin-top: .5em;
}

.template-index-more {
    margin: 50px auto 0;

    .template-button-1 {
        max-width: 300px;
        margin-inline: auto;
    }

}


/* - ページナビ */

.post-navigation {
    margin-top: 50px;

    .wp-pagenavi {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 20px;

        & a,
        & span {
            display: grid;
            place-content: center;
            width: 40px;
            aspect-ratio: 1/1;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            border-radius: 100vmax;
            background-color: var(--category-color-main);
        }

        @media (hover: hover) {
            &>a:hover {
                opacity: .3;
            }
        }

        & .current {
            opacity: .3;
        }
    }
}


/* 記事コンポーネント - 記事リスト
--------------------------------------------------------------- */

/* - 通常 */

.post-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px;

    @media screen and (max-width: 1200px),
    print {
        grid-template-columns: repeat(2, 1fr);
    }

    & li {
        display: contents;
    }

    & a {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        gap: 0;
        text-decoration: none;

        @media (hover: hover) {
            &:hover figure img {
                transform: scale(1.14);
            }
        }
    }

    & figure {
        box-sizing: border-box;
        width: 100%;
        aspect-ratio: 1/.667;
        overflow: hidden;
        border-radius: 10px;

        &:has(.is-nothumbnail) {
            border: 1px solid var(--color-border-main);
        }

    }

    & figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        transition: transform .3s;
        transform: scale(1);
    }

    .p-title {
        font-size: 15px;
        font-weight: 800;
        line-height: 1.4;
        margin: .8em 0 1em;
    }

    .p-info {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        /*align-items: center;*/
        gap: 8px;
        color: #666;
        font-size: 12px;
        line-height: 1;
    }

    .label-category {
        min-width: 0;
        height: 15px;
        font-size: 10px;
    }

    .p-date {
        line-height: 1.2;
    }

}


/* - スクエア型 */

.post-list-square {

    &:has(+ .template-button-block) li:last-child a {
        border: none;
    }

    & a {
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: 15px;
        text-decoration: none;
        padding: 15px 0;
        border-bottom: 1px solid var(--color-border-main);

        @media (hover: hover) {
            &:hover figure img {
                transform: scale(1.2);
            }
        }

        /* - サムネなし記事の場合 */
        &:not(:has(figure)) {
            grid-template-columns: 1fr !important;
        }

    }

    & figure {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 5px;

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            transition: transform .3s;
            transform: scale(1);
        }
    }

    .p-text-wrapper {
        display: grid;
        grid-template-rows: auto auto;
        align-content: space-between;

        /* - カテゴリ・日付情報なしの場合 */
        &:not(:has(.p-info)) {
            display: block;

            .p-title {
                margin-bottom: 0;
            }

        }

    }

    .p-title {
        font-size: 13px;
        font-weight: 700;
        line-height: 1.4;
        margin: 0 0 1em;
    }

    .p-info {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        color: #666;
        font-size: 12px;
        line-height: 1;
    }

    .label-category {
        min-width: 0;
        height: 15px;
        font-size: 10px;
    }

}


/* - アーカイブ型 */

.post-list-index {

    & li:first-child a {
        padding-top: 0;
    }

    & a {
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: 30px;
        text-decoration: none;
        padding: 30px 0;
        border-bottom: 1px solid var(--color-border-main);

        @media (hover: hover) {
            &:hover figure img {
                transform: scale(1.1);
            }
        }

    }

    & figure {
        box-sizing: border-box;
        width: 100%;
        aspect-ratio: 1/.667;
        overflow: hidden;
        border-radius: 10px;

        &:has(.is-nothumbnail) {
            border: 1px solid var(--color-border-main);
        }

    }

    & figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        transition: transform .3s;
        transform: scale(1);
    }

    .p-container {
        display: grid;
        grid-template-rows: auto auto;
        align-content: space-between;
    }

    .p-title {
        font-size: 20px;
        font-weight: 800;
        line-height: 1.4;
        margin-bottom: .5em;
    }

    .p-excerpt {
        color: #666;
        font-size: 14px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .p-info {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        color: #666;
        font-size: 12px;
        line-height: 1;
    }

    .label-category {
        min-width: 0;
        height: 15px;
        font-size: 10px;
    }

}



/* - サムネイルギャラリーリスト */

.gallery-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 15px;

    & img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center center;
        transition: transform .3s;
        transform: scale(1);
    }

    & a {
        display: block;
        border-radius: 5px;
        overflow: hidden;

        @media (hover: hover) {
            &:hover img {
                transform: scale(1.2);
            }
        }

    }

}


/* singleページ
--------------------------------------------------------------- */

/* - 記事導入部分 */

.post-header {
    padding: 0 0 40px;
    border-bottom: 1px solid var(--color-border-main);
    margin-bottom: 40px;

    .post-thumbnail {
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 20px;

        & img {
            width: 100%;
        }

    }

    .post-title {
        font-size: 32px;
        font-weight: 900;
        margin-bottom: .6em;
        line-height: 1.4;
    }

    .post-excerpt {
        color: #666;
        font-size: .9em;
        margin-bottom: 1.5em;
    }

    .tag-list a {
        color: #fff;
        background-color: #333;

        @media (hover: hover) {
            &:hover {
                opacity: .5;
            }
        }
    }

}


/* - 記事本文 */

.post-detail {
    /*max-width: 750px;*/
    max-width: 802px;
    margin: 0 auto 50px;
}


/* - 記事巻末部分 */

.post-footer {

    margin-top: 50px;

    .tag-list-wrapper {
        display: grid;
        grid-template-columns: auto 1fr;
        width: fit-content;
        margin-left: auto;
        gap: .5em;

        &.is-vertical {
            align-items: center;
        }

        &+.tag-list-wrapper {
            margin-top: 15px;
        }

    }

    & p {
        font-size: 12px;
        font-family: var(--font-gothic-noadjust);
    }

    .tag-list {
        justify-content: flex-end;
    }

    .tag-list a {
        color: #fff;
        background-color: #333;

        @media (hover: hover) {
            &:hover {
                opacity: .5;
            }
        }
    }
}


/* - 関連記事 */

.relation-list-wrapper {
    padding-top: 50px;
    border-top: 1px solid var(--color-border-main);
    margin-top: 50px;

    /*
    &:has(+ .relation-list-wrapper) {
        margin-bottom: 50px;
    }
*/
    .relation-title {
        font-size: 32px;
        font-weight: 900;
        line-height: 1.4;
        margin-bottom: .8em;

        &::first-letter {
            color: var(--category-color-main);
        }
    }

    &.is-page {
        margin-top: 100px;

        .relation-title {
            font-size: 26px;
        }

        .post-list {
            grid-template-columns: repeat(4, 1fr);
        }

    }

}


/* パンくず */

.breadcrumb-wrapper {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: .5em;
    line-height: 1;
    margin-bottom: 1.5em;

    &::before {
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        background: url(../img/common/ico_flag.svg) center center / contain no-repeat;
    }
}

.breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .3em 1em;
    font-size: 12px;
    padding: 0;
    list-style: none;

    & li {
        white-space: nowrap;
    }

    & li:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    & li:not(:last-child)::after {
        content: ">";
        padding-left: 1em;
    }
}


/* カテゴリー / タグアーカイブページ
--------------------------------------------------------------- */

.category-information-block {
    padding: 30px 0 0;
    border-top: 1px solid var(--color-border-main);
    margin-bottom: 30px;

    .column {
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 20px;
        font-size: 15px;

        &:not(:has(.category-thumbnail)) {
            grid-template-columns: auto;
        }
    }

    .category-thumbnail {
        width: 100%;
        aspect-ratio: 1/1;
        border-radius: 10px;
        overflow: hidden;

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
        }

    }

    .category-name {
        font-size: 26px;
        font-weight: 700;
        line-height: 1.4;

        & span {
            color: var(--category-color-main);
            font-weight: 900;
            margin-right: .1em;
        }

        &:has(+ p) {
            margin-bottom: .5em;
        }

    }

    .tag-list-wrapper {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: .3em;
        margin-top: 2em;
        padding-bottom: 30px;
        border-bottom: 1px solid var(--color-border-main);

        & p {
            font-size: 12px;
            font-weight: 700;
            font-family: var(--font-gothic-noadjust);
        }

        .tag-list a {
            color: #fff;
            background-color: #333;

            @media (hover: hover) {
                &:hover {
                    opacity: .5;
                }
            }
        }
    }

}


/* 検索フォーム
--------------------------------------------------------------- */

.search-form-block {
    max-width: 300px;
}

.search-form-input {
    --base-font-size: 15px;
    position: relative;

    & input {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        width: 100%;
        font-size: var(--base-font-size);
        padding: .66em 3em .66em 1em;
        border: 1px solid #aaa;

        &:focus {
            background-color: #DEF !important;
            border-color: #0092d3 !important;
            outline: 0;
        }
    }

    & input::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }

    .search-submit {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 3em;
        height: 100%;
        font-size: var(--base-font-size);
        margin: auto;
        mask: url(../img/common/ico_search.svg) center center / 1.46em auto no-repeat;
        background: #9a9a9a;
        border: 0;
        overflow: hidden;
        cursor: pointer;
    }
}


/* お問い合わせ
--------------------------------------------------------------- */

.form-table {
    width: 100%;
    margin-inline: auto;

    & th {
        width: 240px;
    }

    & th,
    & td {
        text-align: left;
        vertical-align: middle;
        padding: 20px;
    }

    & .is-optional::before,
    & .is-req::before {
        content: "任意";
        color: #fff;
        font-size: .7em;
        font-weight: 500;
        background: #666;
        padding: .2em .6em;
        margin: 0 10px 0 0;
    }

    & .is-req::before {
        content: "必須";
        background: #D90000;
    }

    .text-req {
        color: red;
        font-weight: 700;
    }

}


/* - フォームスタイル */

.wpcf7-form {

    & input:not([type="checkbox"], [type="submit"]),
    & textarea,
    & select {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        width: 100%;
        font-size: 16px;
        padding: 10px 15px;
        border: 2px solid #aaa;
        border-radius: 8px;

        &:focus {
            background-color: #DEF !important;
            border-color: #0092d3 !important;
            outline: 0;
        }

    }

    .checkbox-group {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    & label {
        display: block;
        padding: .7em;
        background: #eee;
        border-radius: 8px;
        line-height: 1;
        cursor: pointer;
    }

    & label:has(input[type="checkbox"]:checked) {
        color: #fff;
        background: #333;
    }


    & ::placeholder {
        color: #bbb;
    }

    & .input-width-50 {
        width: 60% !important;
    }

}


/* - 同意ブロック */

.consent-block {
    text-align: center;
    padding: 1.5em;
    border: 1px solid #ccc;

    wpcf7-list-item {
        margin: 0;
    }

    & p:not(:last-child) {
        margin-bottom: 1em;
    }

    .consent-button {
        width: fit-content;
        margin: 0 auto;
    }
}


/* -送信ボタン */

.submit-group {
    display: block;
    text-align: center;
    margin: 3em auto 0;

    & input {
        min-width: 200px;
        color: #fff;
        font-family: var(--font-main);
        font-size: 20px;
        font-weight: 700;
        padding: 1em 2em;
        border: 0;
        background: #333;
        cursor: pointer;
        line-height: 1;
    }

    & input.is-back {
        background: #999;
    }

    & .wpcf7-spinner {
        display: block;
    }

}

input:disabled {
    opacity: .3;
    cursor: not-allowed;
}



/* グローバルフッター
--------------------------------------------------------------- */

#g-footer {
    color: #fff;
    padding: 40px 0;
    border-top: 5px solid var(--category-color-main);
    background: #1f1f1f;

    .footer-inner {
        box-sizing: content-box;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 3em;
        max-width: var(--container-width);
        padding-inline: var(--container-padding);
        margin: auto;
    }

    .g-logo-wrapper {
        .g-logo img {
            width: auto;
            height: 22px;
        }
    }

    & a {
        color: #fff;
        text-decoration: none;
    }

}

.footer-menu-wrapper {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 40px;

    & h4 {
        font-size: 16px;
        font-weight: 900;
        margin-bottom: .3em;
    }

    & ul {
        list-style: disc;
        font-size: 14px;
        padding-left: 1.5em;
        margin-left: 1em;

        &.is-column {
            display: grid;
            grid-template-columns: repeat(3, auto);
            gap: 0 3em;
        }

        & li {}

    }

}

.siteguide-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: .4em;
    background: #666;
    border-radius: 5px;

    & li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    & a {
        display: block;
        font-size: 15px;
        text-decoration: none;
        line-height: 1.4;
    }

    & li:not(:last-child)::after {
        content: "│";
        margin-inline: .7em;
    }

}

small {
    display: block;
    color: #ccc;
    font-size: 13px;
    text-align: right;
    line-height: 1;
    margin-top: 1em;
}


/* - 上に戻る */

#js-totop {
    display: none;
    position: relative;
    z-index: 1;

    #totop {
        position: fixed;
        right: 20px;
        bottom: 20px;
        display: grid;
        width: 60px;
        min-width: 0;
        aspect-ratio: 1/1;
        text-align: center;
        background: var(--category-color-main);
        border-radius: 100vmax;
        line-height: 1;
        transition: none;

        & img {
            display: block;
            width: 36%;
            margin: auto;
        }
    }
}



/* 固定メニュー用 アンカー位置調整
--------------------------------------------------------------- */

.anchor-block {
    scroll-margin-top: 130px;
}


/* 以下、SP
--------------------------------------------------------------- */

@media screen and (max-width:1023px) {

    :root {
        scrollbar-width: none;

        /* - コンテナサイズ */
        --header-height: 70px;
        --container-width: auto;
        --container-padding: 20px;
        --container-margin: 50px;

        /* - フォント設定 */
        --font-size-base: 16px;

    }

    :root::-webkit-scrollbar {
        display: none;
    }

    body {
        padding-top: 0;
        background: #fff;
    }

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


    /* SP グローバルヘッダー
	--------------------------------------------------------------- */

    #g-header {
        --menu-button-size: 48px;
        --menu-border-width: 24px;
        --menu-border-height: 2px;
        --menu-animation-speed: .3s;
        --menu-animation-bezier: cubic-bezier(.0, .0, .2, 1);
        position: relative;
        border-top-width: 3px;
        transition: none;
        overflow: hidden;

        .header-inner {
            display: flex;
            grid-template-columns: none;
            padding-inline: 10px;
        }
    }

    /* - SP サイトタイトル */

    .g-logo-wrapper {

        & a {
            gap: 10px;
            margin-bottom: 5px;
        }

        .g-logo img {
            height: 18px;
        }

        .g-logo-concept {
            font-size: 10px;
        }

    }

    /* - SP サイト基本メニュー */

    .g-menu {
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 50px;

        & li {
            display: block;
            border-bottom: 1px solid var(--color-border-main);
        }

        & li:not(:last-child)::after {
            content: normal;
        }

        & a {
            grid-template-columns: 13px 1fr;
            align-items: center;
            gap: 8px;
            font-size: 18px;
            padding: 15px 0;
        }
    }


    /* SP メニューモーダル - 開くボタン
    --------------------------------------------------------------- */

    #g-menu-button {
        position: fixed;
        top: 12px;
        right: 12px;
        display: grid;
        grid-template-rows: auto auto;
        align-content: center;
        gap: 6px;
        width: var(--menu-button-size);
        min-width: 0;
        aspect-ratio: 1/1;
        color: #fff;
        font-size: 10px;
        font-weight: 400;
        padding: 0;
        border: 0;
        margin: 0;
        background: var(--category-color-main);
        box-shadow: none;
        line-height: 1;
        cursor: pointer;
        overflow: hidden;
        z-index: 3;
        border-radius: 5px;

        .g-menu-button-line {
            display: grid;
            grid-template-rows: repeat(3, auto);
            align-content: space-between;
            width: var(--menu-border-width);
            height: 15px;
            margin: auto;

            >span,
            &::before,
            &::after {
                content: "";
                display: block;
                width: 100%;
                height: 2px;
                background: #fff;
            }
        }

    }




    /* SP メニューモーダル - 閉じるボタン
    --------------------------------------------------------------- */

    .js-menu-close {
        position: absolute;
        top: 12px;
        right: 12px;
        min-width: 0;
        width: var(--menu-button-size);
        aspect-ratio: 1/1;
        color: #fff;
        background: var(--category-color-main);
        padding: 0;
        border: 0;
        border-radius: 100vmax;
        margin: 0;
        box-shadow: none;
        cursor: pointer;
        z-index: 5;

        &::before,
        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: block;
            width: var(--menu-border-width);
            height: var(--menu-border-height);
            margin: auto;
            background: #fff;
        }

        &::before {
            transform: rotate(45deg);
        }

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

    }


    /* SP メニューモーダルレイアウト
	--------------------------------------------------------------- */

    .js-menu-overlay {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgb(255 255 255 / .94);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 3;
    }


    /* - SP メニューラッパー - 初期値 / 表示時 */
    .js-menu-wrapper {
        display: none;

        &.is-open {
            display: block;
        }
    }

    /* - SP メニュー - 表示コンテナ部分 */
    .js-menu-container {
        max-height: 100svh;
        margin: 0 auto;
        overflow-y: auto;
        scrollbar-width: none;

        &>div {
            box-sizing: border-box;
            min-height: 100svh;
            padding: 60px var(--container-padding) 80px;
        }

        &::-webkit-scrollbar {
            display: none;
        }

        .siteguide-menu {
            background: #333;
            margin-top: 50px;
        }

    }



    /* - SP メニューオーバーレイ用のアニメーション */
    @keyframes mmfadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes mmfadeOut {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }


    /* - SP メニュースライドイン用のアニメーション */
    @keyframes mmslideIn {
        from {
            transform: translateY(15%);
        }

        to {
            transform: translateY(0);
        }
    }

    @keyframes mmslideOut {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-10%);
        }
    }


    /* - SP 右からのスライドアニメーション */
    @keyframes mmslideInRight {
        from {
            transform: translateX(100%);
        }

        to {
            transform: translateX(0);
        }
    }

    @keyframes mmslideOutRight {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(100%);
        }
    }

    .js-menu-wrapper[aria-hidden="false"] {

        .js-menu-overlay {
            animation: mmfadeIn var(--menu-animation-speed) var(--menu-animation-bezier);
        }

        .js-menu-container {
            animation: mmslideInRight var(--menu-animation-speed) var(--menu-animation-bezier);
        }
    }

    .js-menu-wrapper[aria-hidden="true"] {

        .js-menu-overlay {
            animation: mmfadeOut var(--menu-animation-speed) var(--menu-animation-bezier);
        }

        .js-menu-container {
            animation: mmslideOutRight var(--menu-animation-speed) var(--menu-animation-bezier);
        }
    }


    /* SP ヘッダー PR表記
    --------------------------------------------------------------- */

    .header-label-wrapper {
        padding: 6px var(--container-padding);
        background: var(--color-back-main);

        .header-label-inner {
            grid-template-columns: minmax(0, 1fr);
        }

        .header-label-newpost-wrapper {
            display: none;
        }

        .label-fair {
            width: fit-content;
            margin: 0;
        }
    }


    /* SP Swiper
    --------------------------------------------------------------- */

    .swiper-container {
        height: 253px;
        padding: 20px 0;

        .swiper-slide {
            width: 320px;
            margin: 0 5px;
            border-radius: 5px;

            & a {
                font-size: 14px;

                .swiper-post-title {
                    grid-template-columns: 1fr;
                    bottom: 10px;
                    gap: 5px;
                    padding: 0 15px;
                    line-height: 1.4;
                }
            }

            .label-category {
                min-width: 0;
                height: 15px;
                font-size: 10px;
            }
        }

        .swiper-button {
            width: 34px;
            background-size: 8px auto;

            &.is-prev {
                left: calc(50% - 182px);
            }

            &.is-next {
                right: calc(50% - 182px);
            }
        }

    }


    /* SP コンテナ全体ラッパー
    --------------------------------------------------------------- */

    .main-wrapper {
        padding-block: 20px;
    }

    .main-column-container {
        /*grid-template-columns: 1fr;*/
        grid-template-columns: minmax(0, 1fr);
        gap: 50px;
    }


    /* SP シングルカラム - スタイル
    --------------------------------------------------------------- */

    .is-single-column {
        &::after {
            content: normal;
        }

        .post-header {
            padding-top: 0;
        }

        .single-post-thumbnail {
            display: none;
        }

        .single-post-thumbnail-header {
            position: relative;
            margin-bottom: 20px;

            .is-background {}

            .is-title {
                display: none;
            }
        }

        .label-group-post {
            grid-template-rows: auto;
            grid-template-areas: "category public modified";
            gap: 15px;

            .label-category {
                margin-right: 0;
            }

        }

    }


    /* SP メインカラム
    --------------------------------------------------------------- */

    .main-container {
        padding: 0;
        background: none;
        border-radius: 0;
        overflow: visible;
    }

    .index-container {}

    .template-index-title {
        grid-template-columns: 4px auto 1fr;
        gap: 10px;
        font-size: 20px;
        margin-bottom: 30px;

        &::before {
            top: 2px;
            width: 4px;
            height: 100%;
            border-radius: 2px;
        }

        &::after {
            height: 2px;
        }

        .color {
            font-size: 1.2em;
            margin-right: .1em;
        }

    }


    /* SP サイドカラム
    --------------------------------------------------------------- */

    .aside-container {
        padding: 0;
    }

    .module-block {
        margin-bottom: 50px;

        &.is-half-margin {
            margin-bottom: 25px;
        }

    }

    .template-title-1 {
        font-size: 18px;
        padding-bottom: .6em;
        margin-bottom: 20px;

        &:has(+ .post-list-square) {
            margin-bottom: 5px;
        }

    }


    /* SP 固定ページ
    --------------------------------------------------------------- */

    .page-title {
        height: 100px;
        font-size: 20px;
        margin-bottom: 30px;
    }

    .page-detail {
        margin: 0 auto 30px;
    }


    /* SP アーカイブページ
    --------------------------------------------------------------- */

    .index-section:not(:last-child) {
        margin-bottom: 70px;
    }


    /* SP 404ページ
    --------------------------------------------------------------- */

    .message-404 {
        font-size: 18px;
        line-height: 2.4;
        margin-bottom: 50px;
    }


    /* SP 各種コンポーネント
    --------------------------------------------------------------- */

    /* - SP カテゴリーラベル */

    .label-category {
        min-width: 60px;
        height: 16px;
        font-size: 10px;
    }


    /* - SP 投稿ラベルコンテナ */

    .label-group-post {
        --font-size: 10px;
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "category public modified";
        justify-content: flex-start;
        align-content: center;
        gap: 6px 10px;
        line-height: 1.4;

        .label-category {
            grid-area: category;
            font-size: var(--font-size);
            margin-right: 10px;
        }

        .is-public {
            grid-area: public;
            font-size: var(--font-size);
        }

        .is-modified {
            grid-area: modified;
            font-size: var(--font-size);
        }

        .label-fair {
            grid-area: fair;
            font-size: var(--font-size);
        }

        .label-fair {
            margin: 0;
        }

        &:has(.label-newpost) {
            grid-template-columns: auto;
            grid-template-rows: none;
            grid-template-areas: none;
            gap: 0;
            height: 40px;

            .label-category {
                display: none;
            }

            .label-newpost {
                display: none;
            }

            .label-fair {
                font-size: 12px;
            }

        }

    }


    /* - SP 投稿日付ラベル */

    .label-date {
        grid-template-columns: 14px 1fr;
    }


    /* - SP PR表記ラベル */

    .label-fair {
        grid-template-columns: 14px 1fr;
    }


    /* - SP ボタン */

    .template-button-1 {
        margin-inline: auto;

        &.is-sp-max {
            max-width: none;
        }

    }

    .template-button-block {
        margin-top: 20px;
    }


    /* - SP ページナビ */

    .post-navigation {
        margin-top: 30px;

        .wp-pagenavi {
            gap: 10px;

            & a,
            & span {
                width: 32px;
                font-size: 13px;
            }
        }
    }



    /* SP 記事コンポーネント - 記事リスト
    --------------------------------------------------------------- */

    /* - SP 通常 */

    .post-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 15px;

        & figure {
            border-radius: 6px;
        }

        .p-title {
            font-size: 14px;
            margin: .8em 0 1em;
        }

        .p-info {
            gap: 8px;
            font-size: 11px;
        }

        .label-category {
            height: 15px;
            font-size: 10px;
        }

    }


    /* - SP スクエア型 */

    .post-list-square {

        & a {
            grid-template-columns: 120px 1fr;
            gap: 15px;
            padding: 15px 0;
        }

        & figure {
            border-radius: 5px;
        }

        .p-title {
            font-size: 15px;
            line-height: 1.4;
            margin: 0 0 1em;
        }

        .p-info {
            gap: 8px;
            font-size: 11px;
        }

        .label-category {
            height: 16px;
            font-size: 10px;
        }

    }


    /* - SP アーカイブ型 */

    .post-list-index {

        & a {
            grid-template-columns: 40% 1fr;
            gap: 15px;
            padding: 15px 0;
        }

        & figure {
            border-radius: 5px;
        }

        .p-container {
            display: grid;
            grid-template-rows: auto auto;
            align-content: space-between;
        }

        .p-title {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: .5em;
        }

        .p-excerpt {
            display: none;
        }

        .p-info {
            gap: 8px;
            font-size: 11px;
        }

        .label-category {
            height: 16px;
            font-size: 10px;
        }

    }



    /* - SP サムネイルギャラリーリスト */

    .gallery-list {
        gap: 6px;
        margin-bottom: 35px;
    }



    /* SP singleページ
    --------------------------------------------------------------- */

    /* - SP 記事導入部分 */

    .post-header {
        padding: 0 0 30px;
        margin-bottom: 30px;

        .post-thumbnail {
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .post-title {
            font-size: 24px;
            margin-bottom: .7em;
        }

        .post-excerpt {
            font-size: 13px;
        }
    }


    /* - SP 記事本文 */

    .post-detail {
        max-width: none;
        margin: 0 auto 50px;
    }


    /* - SP 記事巻末部分 */

    .post-footer {

        margin-top: 30px;

        & p {
            font-size: 12px;
        }
    }


    /* - SP 関連記事 */

    .relation-list-wrapper {
        padding-top: 30px;
        margin-top: 30px;

        /*
        &:has(+ .relation-list-wrapper) {
            margin-bottom: 30px;
        }
*/
        .relation-title {
            font-size: 24px;
        }

        &.is-page {
            margin-top: 30px;

            .relation-title {
                font-size: 20px;
            }

            .post-list {
                grid-template-columns: repeat(2, 1fr);
            }

        }

    }


    /* SP パンくず */

    .breadcrumb-wrapper {
        grid-template-columns: 14px minmax(0, 1fr);
        gap: .4em;
        margin-bottom: 1.1em;
    }

    .breadcrumb {
        gap: .3em .6em;

        & li:not(:last-child)::after {
            padding-left: .6em;
        }
    }


    /* SP カテゴリー / タグアーカイブページ
    --------------------------------------------------------------- */

    .category-information-block {
        padding: 20px 0 0;
        margin-bottom: 40px;

        .column {
            grid-template-columns: 120px 1fr;
            gap: 15px;
        }

        .category-thumbnail {
            border-radius: 5px;
        }

        .category-name {
            font-size: 18px;

            & span {
                font-size: 1.2em;
            }

            &+p {
                color: #666;
                font-size: 13px;
                line-height: 1.8;
            }

        }

        .tag-list-wrapper {
            grid-template-columns: minmax(0, 1fr);
            gap: .7em 0;
            padding-bottom: 20px;
            margin-top: 1em;

            & p {
                font-size: 12px;
            }
        }

    }


    /* SP 検索フォーム
    --------------------------------------------------------------- */

    .search-form-block {
        max-width: none;
    }

    .search-form-input {
        --base-font-size: var(--font-size-base);
    }


    /* SP お問い合わせ
    --------------------------------------------------------------- */

    .form-table {

        & th {
            width: auto;
        }

        & th,
        & td {
            display: block;
            padding: 20px 20px 0;
        }

        & input:not([type="checkbox"], [type="submit"]),
        & textarea,
        & select {
            border-radius: 5px;
        }

    }




    /* SP グローバルフッター
    --------------------------------------------------------------- */

    #g-footer {
        padding: 40px 0 20px;
        border-width: 3px;

        .footer-inner {
            grid-template-columns: 1fr;
            gap: 30px;
        }

        .g-logo-wrapper {
            .g-logo img {
                height: 18px;
            }
        }

    }

    .footer-menu-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        margin: 0 0 30px;

        & h4 {
            font-size: 16px;
            margin-bottom: .3em;
        }

        & ul {
            display: grid;
            grid-template-columns: repeat(3, auto);
            gap: .3em 2em;
            font-size: 14px;
            margin-left: 1em;

            &.is-column {
                gap: .3em 2em;
            }

        }

    }

    .siteguide-menu {
        display: block;
        padding: 15px 20px;
        border-radius: 5px;

        & li {
            display: block;
        }

        & a {
            display: block;
            color: #fff !important;
            font-size: 14px;
            padding: 15px 10px;
            line-height: 1;
        }

        & li:not(:last-child) {
            border-bottom: 1px solid #aaa;
        }

        & li:not(:last-child)::after {
            content: normal;
        }

    }

    small {
        font-size: 13px;
        text-align: center;
        margin-top: 50px;
    }


    /* - SP 上に戻る */

    #js-totop {

        #totop {
            right: 15px;
            bottom: 15px;
            width: 50px;

            & img {
                width: 36%;
            }
        }
    }



    /* 固定メニュー用 アンカー位置調整
	--------------------------------------------------------------- */

    .anchor-block {
        scroll-margin-top: 130px;
        /*
		margin-top:-10px;
		padding-top:10px;
		*/
    }

}


/* その他
--------------------------------------------------------------- */
@media print {

    body {
        min-width: 1300px;
    }

    #g-header {
        position: relative;
    }

    #g-menu-button {
        display: none;
    }

}