// スタイルシート common

@charset "utf-8";

@import "mixin";

body {
    @include root;
    position: relative;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

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

a:hover {
    opacity: 0.75;
}

.default {
    @include contentdefault;
    @include eachcss;
}

:where(figure) { margin: 0; }

$__color: #192231;

body {
    background-color: #F2F2F2;
}

@mixin c-arrow {
    display: inline-block;
    width: 6px;
    height: 12px;
    background: url(../images/arrow-white.svg) no-repeat center/contain;
}

// ===

.c-heading {
    @include ff_ja(shippori);
    display: flex;
    align-items: center;
    position: relative;
    &__inner {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .en {
        color: #999999;
        @include f_all(14);
        font-weight: bold;
        &>small { font-size: .7em }
    }
    .ja {
        color: currentColor;
        @include f_all(20);
        font-weight: bold;
        @include maxwidth(768) {
            @include f_all(18);
        }
    }
    &.vertical {
        justify-content: center;
        .c-heading__inner {
            align-items: center;
        }
        .ja {
            @include ff_ja(noto);
            margin-left: 0.2em;
            letter-spacing: 0.2em;
            @include maxwidth(768) {
                letter-spacing: 0.15em;
            }
        }
    }
}

.c-buttons {
    display: flex;
    flex-wrap: wrap;
}

.c-button {
    display: inline-block;
    height: auto;
    @include maxwidth(768) {
        width: 100%;
    }
    &__link {
        @include ff_ja(noto);
        color: $themetextcolor;
        @include f_all(14);
        font-weight: 500;
        @include flex_centering;
        gap: 12px;
        min-width: 280px;
        @include maxwidth(768) {
            min-width: initial;
        }
        min-height: 45px;
        height: 100%;
        background-color: $themecolor;
        padding: .85em 1em 1em calc(1em + 10px);
        box-sizing: border-box;
        position: relative;
        &::after{
            content: '';
            display: inline-block;
            width: 5px;
            height: 10px;
            background: url(../images/arrow-white.svg) no-repeat center/contain;
            margin-top: .10em;
        }
        &[target="_blank"] {
            &::after{
                width: 10px;
                height: 10px;
                background-image: url(../images/target_blank-white.svg);
            }
        }
        &:hover { opacity: 1; }
        @media (hover: hover) {
            transition: .4s;
            &:hover {
                background-color: $themecolor3 !important;
                border-color: $themecolor3 !important;
            }
        }
    }
    &.is-style-border {
        .c-button__link {
            border: solid 1px #999999;
            background-color: transparent;
        }
    }
}

$header_breakpoint: 1200;
$header_breakpoint2: 768;
#header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 20;
    .container {
        color: $themetextcolor;
        padding: 25px 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2em;
        &>* { position: relative; }
        @include maxwidth($header_breakpoint2) {
            justify-content: flex-end;
            padding: 0 15px 13px;
            align-items: flex-start;
            &::before{
                content: '';
                display: inline-block;
                // height: 35%;
                background-color: $themecolor;
                @include absolute_centering;
            }
        }
        .sitename {
            @include maxwidth($header_breakpoint2) {
                position: absolute;
                top: 0;
                left: 15px;
                z-index: 1;
            }
            a {
                display: flex;
                align-items: center;
                gap: 20px;
                @include maxwidth($header_breakpoint2) {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 15px;
                }
                &:hover {opacity: 1; }
                .logo {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    padding: 16px 20px;
                    box-sizing: border-box;
                    background-color: $__color;
                    @include maxwidth($header_breakpoint2) {
                        padding: 15px 18px;
                    }
                    img {
                        width: 60px;
                        @include maxwidth($header_breakpoint2) {
                            width: 53px;
                        }
                    }
                    @media (hover: hover) {
                        transition: .4s;
                        &:hover {
                            filter: brightness(0.80);
                            -webkit-filter: brightness(0.80);
                        }
                    }
                }
                .title {
                    display: inline-flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 14px;
                    @include maxwidth($header_breakpoint2) { gap: 8px; }
                    .outline {
                        @include f_all(14);
                        font-weight: bold;
                        @include maxwidth($header_breakpoint2) {
                            @include f_all(12);
                        }
                    }
                    .name {
                        @include f_all(20);
                        font-weight: bold;
                        @include maxwidth($header_breakpoint2) {
                            @include f_all(18);
                        }
                    }
                }
            }
        }
        .header-menu {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            @include maxwidth($header_breakpoint2) {
                padding-top: 1rem;
                padding-right: calc(30 / 375 * 100%);
            }
            @include maxwidth(360) { padding-right: 5px; }
            .header-buttons {
                .header-button {
                    @include ff_ja(noto);
                    @include f_all(14);
                    font-weight: bold;
                    white-space: nowrap;
                    &__link {
                        @include flex_centering;
                        flex-direction: column;
                        align-items: flex-start;
                        &.tel {
                            gap: 5px;
                            .telnum {
                                strong {
                                    font-size: 1.9em;
                                    @include maxwidth($header_breakpoint2) {
                                        font-size: 1.4em;
                                    }
                                    font-weight: bold;
                                    padding-left: 0.2em;
                                }
                            }
                            .teltime {
                                @include maxwidth($header_breakpoint2) {
                                    @include f_all(11);
                                }
                            }
                        }
                    }
                }
            }
            .global-menu {
                margin-top: 20px;
                @include maxwidth($header_breakpoint) {display: none;}
                ul {
                    @include f_all(15);
                    @include ff_ja(noto);
                    font-weight: bold;
                    display: flex;
                    flex-wrap: wrap;
                    gap: 2em;
                    li {
                        a {
                        }
                    }
                }
            }
        }
    }
}

#gnav {
    position: fixed;
    inset: 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    background-color: $__color;
    transition-property: opacity, visibility;
    transition-duration: .8s;
    .menu_open & {
        opacity: 1;
        visibility: visible;
    }
    &Inner {
        position: fixed;
        inset: 0;
        .admin-bar & { top: 32px; }
        overflow-y: auto;
        // スクロールバー非表示
        -ms-overflow-style: none;
        scrollbar-width: none;
        &::-webkit-scrollbar { display: block; }
        .container {
            color: $themetextcolor;
            padding: 5vh 0;
            box-sizing: border-box;
            @include container(900, 40);
            @include maxwidth(768) {
                padding-top: 20px;
                padding-bottom: 65px;
                margin-left: 20px;
                margin-right: 20px;
            }
            .head {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                gap: 0.5em;
                flex-wrap: wrap;
                .sitename {
                    a {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        padding: 15px 18px;
                        box-sizing: border-box;
                        background-color: $themecolor;
                        position: relative;
                        &:hover { opacity: 1; }
                        @media (hover: hover) {
                            transition: .4s;
                            &:hover {
                                filter: brightness(0.80);
                                -webkit-filter: brightness(0.80);
                            }
                        }
                        img {
                            width: 60px;
                            @include maxwidth(768) { width: 52px; }
                        }
                    }
                }
                .tel-button {
                    @include ff_ja(noto);
                    @include f_all(14);
                    font-weight: bold;
                    padding-bottom: 10px;
                    &__link {
                        @include flex_centering;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 5px;
                        .telnum {
                            strong {
                                font-size: 1.9em;
                                @include maxwidth(768) { font-size: 1.4em; }
                                font-weight: bold;
                                padding-left: 0.2em;
                            }
                        }
                        .teltime {
                            @include maxwidth(768) {
                                @include f_all(11);
                            }
                        }
                    }
                }
            }
            .body {
                margin-top: 40px;
                @include maxwidth(768) { margin-top: 20px; }
                .menu {
                    ul {
                        li {
                            color: $themetextcolor;
                            @include ff_ja(noto);
                            @include f_all(14);
                            font-weight: 500;
                            &:not(:first-child) { margin-top: 1px; }
                            overflow: hidden;
                            .menu_open & {
                                @for $i from 0 to 20 {
                                    &:nth-child(#{$i + 1}) a {
                                        transition-delay: #{$i * .05s};
                                    }
                                }
                            }
                            a {
                                display: flex;
                                align-items: center;
                                min-height: 45px;
                                padding: 10px 35px 10px 20px;
                                box-sizing: border-box;
                                background-color: #2D3645;
                                position: relative;
                                &::after{
                                    content: '';
                                    display: inline-block;
                                    width: 5px;
                                    height: 10px;
                                    background: url(../images/arrow-white.svg) no-repeat center/contain;
                                    position: absolute;
                                    top: 0;
                                    bottom: 0;
                                    right: 25px;
                                    margin: auto;
                                }

                                transform: translateY(100%);
                                transition: transform .3s;
                                .menu_open & {
                                    transform: translateY(0);
                                }
                                
                                &.instagram {
                                    font-weight: 400;
                                    gap: .7em;
                                    &::before{
                                        content: '';
                                        display: inline-block;
                                        width: 14px;
                                        height: 14px;
                                        background: url(../images/icon-insta-white.svg) no-repeat center/contain;
                                        margin-top: .20em;
                                    }
                                }
                                &[target="_blank"] {
                                    font-weight: 400;
                                    &::after{
                                        width: 12px;
                                        height: 12px;
                                        background-image: url(../images/target_blank-white.svg);
                                        right: 20px;
                                    }
                                }
                            }
                        }
                    }
                }
                .address {
                    @include ff_ja(noto);
                    @include f_all(14);
                    @include maxwidth(768) {
                        @include f_all(12);
                    }
                    line-height: 1.5;
                    text-align: center;
                    margin-top: 1em;
                }
            }
        }
    }
}

#asideMenu {
    position: fixed;
    top: 35vh;
    right: 0;
    transform: translateY(-50%);
    z-index: 101;
    @include maxwidth(768) {
        position: absolute;
        top: 21.5vh;
        .menu_open & { opacity: 0; }
        .subpage & { display: none; }
    }
    .gnav-toggle {
        overflow: hidden;
        a {
            color: $themetextcolor;
            display: block;
            flex-direction: column;
            width: 45px;
            height: 45px;
            background-color: $themecolor3;
            position: relative;
            transition: all .4s;
            @media screen and (min-width: #{$header_breakpoint2 + 1 * 1px}) {
                transform: translateY(100%);
                .scroll-out-site-header &, .menu_open & {
                    transform: translateY(0);
                }
            }
            .menu_open & {
                background-color: #893D50;
            }
            &:hover { opacity: 1; }
            @media (hover: hover) {
                &:hover {
                    filter: brightness(0.80);
                    -webkit-filter: brightness(0.80);
                }
            }
            span.r {
                display: inline-block;
                width: 13px;
                height: 13px;
                position: absolute;
                left: 50%;
                top: 40%;
                transform: translate(-50%,-50%);
                .menu_open & {
                    transform: translate(-50%,-50%) rotate(45deg);
                }
                span {
                    display: inline-block;
                    width: 100%;
                    height: 1px;
                    background-color: currentColor;
                    @include absolute_centering;
                    &:nth-child(1) {
                    }
                    &:nth-child(2) {
                        transform: rotate(90deg);
                    }
                }
            }
            span.t {
                @include ff_ja(noto);
                @include f_all(12);
                font-weight: bold;
                position: absolute;
                left: 50%;
                bottom: 4%;
                transform: translate(-50%,-50%);
                &::before{
                    content: 'menu';
                    .menu_open & {
                        content: 'close';
                    }
                }
            }
        }
    }
    ul {
        margin-top: 6px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        li {
            flex-basis: 45px;
            overflow: hidden;
            a {
                display: inline-block;
                width: 45px;
                height: 45px;
                background-color: $accentcolor;
                position: relative;
                transition: all .4s;
                @media screen and (min-width: #{$header_breakpoint2 + 1 * 1px}) {
                    transform: translateY(100%);
                    .scroll-out-site-header &, .menu_open & {
                        transform: translateY(0);
                    }
                }
                &:hover { opacity: 1; }
                @media (hover: hover) {
                    transition: .4s;
                    &:hover {
                        filter: brightness(0.80);
                        -webkit-filter: brightness(0.80);
                    }
                }
                &::before{
                    content: '';
                    display: inline-block;
                    background: no-repeat center/contain;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                }
                &.instagram {
                    &::before{
                        width: 18px;
                        height: 18px;
                        background-image: url(../images/icon-insta-white.svg);
                    }
                }
                &.shop {
                    &::before{
                        width: 23px;
                        height: 20px;
                        background-image: url(../images/icon-shop-white.svg);
                    }   
                }
                &>span { display: none; }
            }
        }
    }
}

#asideMenuSp {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    display: flex;
    flex-direction: row-reverse;
    gap: 2px;
    transform: translateY(100%);
    transition: transform .4s;
    .scroll-out-site-header &, .menu_open & {
        transform: translateY(0);
    }
    .subpage & {
        transform: translateY(0);
    }
    display: none;
    @include maxwidth($header_breakpoint2) { display: flex; }
    .gnav-toggle {
        flex-basis: 150px;
        a {
            @include ff_ja(noto);
            color: $themetextcolor;
            @include f_all(12);
            font-weight: bold;
            @include flex_centering;
            height: 45px;
            background-color: $themecolor3;
            gap: 1em;
            transition: all .4s;
            .menu_open & {
                background-color: #893D50;
            }
            &:hover { opacity: 1; }
            @media (hover: hover) {
                &:hover {
                    filter: brightness(0.80);
                    -webkit-filter: brightness(0.80);
                }
            }
            .r {
                display: inline-block;
                width: 13px;
                height: 13px;
                position: relative;
                margin-top: .20em;
                transition: all .4s;
                .menu_open & {
                    transform: rotate(45deg);
                }
                &>span {
                    display: inline-block;
                    width: 100%;
                    height: 1px;
                    background-color: currentColor;
                    @include absolute_centering;
                    &:nth-child(1) {
                    }
                    &:nth-child(2) {
                        transform: rotate(90deg);
                    }
                }
            }
            .t {
                &::before{
                    content: 'menu';
                    .menu_open & {
                        content: 'close';
                    }
                }
            }
        }
    }
    ul {
        flex: auto;
        display: flex;
        flex-direction: row-reverse;
        gap: 2px;
        li {
            flex-basis: 50%;
            a {
                @include ff_ja(noto);
                color: $themetextcolor;
                @include f_all(12);
                font-weight: bold;
                @include flex_centering;
                gap: 5px;
                background-color: $accentcolor;
                padding: 10px 2px;
                box-sizing: border-box;
                height: 45px;
                position: relative;
                @include maxwidth(360) {
                    @include f_all(10);
                    gap: 2px;
                }
                &::before{
                    flex-shrink: 0;
                    content: '';
                    display: inline-block;
                    background-size: contain;
                    background-position: center center;
                    background-repeat: no-repeat;
                    margin-top: 0.15em;
                }
                &.instagram {
                    &::before{
                        width: 13px;
                        height: 13px;
                        @include maxwidth(360) {
                            width: 12px;
                            height: 12px;
                        }
                        background-image: url(../images/icon-insta-white.svg);
                    }
                }
                &.shop {
                    &::before{
                        width: 16px;
                        height: 14px;
                        @include maxwidth(360) {
                            width: 14px;
                            height: 12px;
                        }
                        background-image: url(../images/icon-shop-white.svg);
                    }
                }
                &:hover { opacity: 1; }
                @media (hover: hover) {
                    transition: .4s;
                    &:hover {
                        filter: brightness(0.80);
                        -webkit-filter: brightness(0.80);
                    }
                }
            }
        }
    }
}

#mv {
    box-sizing: border-box;
    position: relative;
    @include maxwidth($header_breakpoint2) {
        padding-top: var(--sp-mv-margintop);
    }
    .container {
        position: relative;
        .swiper {
            &-wrapper {
            }
            &-slide {
                height: 100vh;
                height: 100svh;
                min-height: 600px;
                @include maxwidth($header_breakpoint2) {
                    height: var(--sp-slide-height);
                    min-height: 380px;
                }
                &::after{
                    content: '';
                    @include absolute_centering;
                    background-color: rgba(#000, .3);
                }
                &>img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
        .overlay {  
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 5;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            color: $themetextcolor;
            white-space: nowrap;
            @include maxwidth($header_breakpoint2) {
                top: auto;
                bottom: 124px;
                transform: translate(-50%, 0);
            }
            .text-en {
                font-size: 40px;
                font-weight: bold;
                @include maxwidth($header_breakpoint2) {
                    font-size: 32px;
                }
                @include maxwidth(360) {
                    font-size: clamp(28px,(32 / 360 * 100vw),32px);
                }
            }
            .text {
                font-size: 16px;
                font-weight: bold;
                margin-top: 20px;
                @include maxwidth($header_breakpoint2) {
                    font-size: 14px;
                }
                @include maxwidth(360) {
                    font-size: clamp(12px,(14 / 360 * 100vw),14px);
                }
            }
        }
        .asidemenu {
            position: absolute;
            z-index: 5;
            right: 0;
            bottom: 40px;
            @include maxwidth($header_breakpoint2) {
                display: none;
            }
            ul {
                display: flex;
                flex-direction: column;
                gap: 8px;
                li {
                    a {
                        color: $themetextcolor;
                        @include f_all(14);
                        font-weight: bold;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        min-width: 240px;
                        min-height: 45px;
                        height: 100%;
                        padding: 0 47px;
                        box-sizing: border-box;
                        background-color: $accentcolor;
                        position: relative;
                        &>span {
                            display: inline-flex;
                            align-items: center;
                            &::after{
                                content: '';
                                width: 6px;
                                height: 12px;
                                background: url(../images/arrow-white.svg) no-repeat center/contain;
                                margin-top: 0.15em;
                            }
                        }
                        &::before{
                            content: '';
                            display: inline-block;
                            background: no-repeat center/contain;
                        }
                        &.instagram {
                            &::before {
                                width: 18px;
                                height: 18px;
                                background-image: url(../images/icon-insta-white.svg);
                                margin-right: 28px;
                            }
                            &>span {
                                gap: 20px;
                            }
                        }
                        &.shop {
                            &::before {
                                width: 23px;
                                height: 20px;
                                background-image: url(../images/icon-shop-white.svg);
                                margin-right: 18px;
                            }
                            &>span {
                                gap: 12px;
                            }
                        }

                        &:hover { opacity: 1; }
                        @media (hover: hover) {
                            transition: .4s;
                            &:hover {
                                filter: brightness(0.8);
                                -webkit-filter: brightness(0.8);
                            }
                        }
                    }
                }
            }
        }
        .scroll-down {
            @media screen and (min-width: #{$header_breakpoint2 + 1 * 1px}) {
                position: absolute;
                left: 50%;
                bottom: 30px;
                transform: translateX(-50%);
                z-index: 5;
            }
            @include maxwidth($header_breakpoint2) {
                background-color: $__color;
                @include flex_centering;
                padding-top: 25px;
                padding-bottom: 15px;
            }
            a {
                color: $themetextcolor;
                @include f_all(14);
                font-weight: bold;
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                gap: 1em;
                @include maxwidth($header_breakpoint2) {
                    @include f_all(12);
                    gap: 10px;
                }
                &::after{
                    content: '';
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    background-color: $themecolor3;
                }
            }
        }
    }
    .topics {
        background-color: $__color;
        padding: 40px 0 25px;
        box-sizing: border-box;
        @include maxwidth($header_breakpoint2) {
            padding-top: 0;
            padding: 15px 0 15px;
        }
        &__container {
            @include container(1360, 40);
            color: $themetextcolor;
            background-color: $themecolor2;
            padding: 13px 80px;
            @include maxwidth(1440) {
                padding-left: (80 / 1440 * 100vw);
                padding-right: (80 / 1440 * 100vw);
            }
            box-sizing: border-box;
            position: relative;
            display: flex;
            align-items: center;
            gap: 1em;
            @include maxwidth($header_breakpoint) {
                padding-top: 18px;
                padding-bottom: 18px;
                flex-direction: column;
                align-items: flex-start;
                gap: 24px;
                &>* {
                    flex: none !important;
                    width: 100%;
                }
            }
            @include maxwidth(768) {
                margin-left: 10px;
                margin-right: 10px;
            }
        }
        .heading {
            flex-basis: 170px;
            @include f_all(15);
            font-weight: bold;
            padding-left: 20px;
            box-sizing: border-box;
            @include maxwidth($header_breakpoint) {
                padding-left: 0;
            }
        }
        .body {
            flex: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1em;
            ul {
                @include ff_ja(noto);
                @include f_all(14);
                font-weight: bold;
                @include maxwidth(768) {
                    @include f_all(13);
                }
                li {
                    a {
                        display: flex;
                        align-items: center;
                        @include maxwidth(768) {
                            flex-wrap: wrap;
                        }
                        .date {
                            margin-right: 40px;
                            @include maxwidth(768) {
                                margin-right: 20px;
                            }
                        }
                        .terms {
                            margin-right: 20px;
                            @include maxwidth(768) {
                                margin-right: 0;
                            }
                            .term {
                                display: inline-flex;
                                align-items: center;
                                gap: 8px;
                                &::before{
                                    content: '';
                                    display: inline-block;
                                    width: 6px;
                                    height: 6px;
                                    border-radius: 9999px;
                                    background-color: $accentcolor;
                                }
                            }
                        }
                        .title {
                            line-height: 1.3;
                            @include maxwidth(768) {
                                flex-basis: 100%;
                                margin-top: 8px;
                            }
                            &>span {
                                &::after{
                                    content: '';
                                    @include c-arrow();
                                    margin-left: 10px;
                                    transform: translateY(.1em);
                                }
                            }
                        }
                    }
                }
            }
            .button {
                display: inline-block;
                @include maxwidth($header_breakpoint) {
                    position: absolute;
                    top: 12px;
                    right: 15px;
                    z-index: 1;
                }
                &__link {
                    @include ff_ja(noto);
                    @include f_all(14);
                    font-weight: bold;
                    line-height: 1.3;
                    @include flex_centering;
                    gap: 8px;
                    padding: 0.4em 20px 0.5em;
                    box-sizing: border-box;
                    min-height: 38px;
                    background-color: $themecolor;
                    position: relative;
                    @include maxwidth($header_breakpoint) {
                        @include f_all(12);
                        padding-left: 10px;
                        padding-right: 10px;
                        min-height: 28px;
                    }
                    &::after{
                        content: '';
                        @include c-arrow();
                        margin-top: 0.1em;
                    }
                    &:hover { opacity: 1; }
                    @media (hover: hover) {
                        transition: .4s;
                        &:hover {
                            background-color: $themecolor3;
                        }
                    }
                }
            }
        }
    }
}

#contentFooter {
    background-color: $__color;
    position: relative;
    &Banner {
        padding: 20px 0;
        box-sizing: border-box;
        @include maxwidth(768) {
            padding-top: 40px;
        }
        .container {
            @include container(1360, 40);
            @include maxwidth(768) {
                margin-left: 20px;
                margin-right: 20px;
            }
            .banners {
                display: flex;
                gap: 4px;
                @include maxwidth(1024) {
                    flex-direction: column;
                    gap: 2px;
                    &>* {
                        flex: none !important;
                        width: 100%;
                    }
                }
                .banner {
                    flex-basis: 50%;
                    overflow: hidden;
                    position: relative;
                    &.js-trigger {
                        .banner__link {
                            opacity: 0;
                            transform: translateY(20px);
                            transition: 1.2s;
                        }
                        &.js-trigger-active {
                            .banner__link {
                                opacity: 1;
                                transform: translateY(0);
                            }
                            @media screen and (min-width: 1025px) {
                                @for $i from 0 to 2 {
                                    &:nth-child(#{$i + 1}) .banner__link {
                                        transition-delay: #{$i * .2s};
                                    }
                                }
                            }
                        }
                    }
                    &__link {
                        color: $themetextcolor;
                        @include flex_centering;
                        min-height: 292px;
                        position: relative;
                        padding: 10px;
                        box-sizing: border-box;
                        gap: 10px;
                        @include maxwidth(768) {
                            min-height: 150px;
                        }
                        @media (hover: hover) {
                            &:hover {
                                .bgimage {
                                    &::after {
                                        background-color: rgba($themecolor, .60);
                                        // border: 1px solid $__color;
                                    }
                                }
                            }
                        }
                        .title {
                            display: flex;
                            align-items: flex-end;
                            gap: 10px;
                            position: relative;
                            z-index: 1;
                            &::before, &::after {
                                flex-shrink: 0;
                            }
                            &::after{
                                content: '';
                                display: inline-block;
                                width: 6px;
                                height: 12px;
                                background: url(../images/arrow-white.svg) no-repeat center/contain;
                            }
                            &::before{
                                content: '';
                                display: inline-block;
                                background: no-repeat center/contain;
                                transform: translateY(12%);
                            }
                            &__inner {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                gap: 10px;
                            }
                            .en {
                                @include f_all(14);
                                font-weight: bold;
                                text-align: center;
                            }
                            .ja {
                                @include f_all(18);
                                font-weight: bold;
                                text-align: center;
                            }
                        }
                        .bgimage {
                            @include absolute_centering;
                            &::after{
                                content: '';
                                @include absolute_centering;
                                background-color: $themecolor2;
                                backdrop-filter: blur(4px);
                                -webkit-backdrop-filter: blur(4px);
                                transition: .4s;
                                @media (hover: none) {
                                    background-color: rgba($themecolor, .80);
                                }
                            }
                            &>img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                        &.shop {
                            .title {
                                &::before{
                                    width: 34px;
                                    height: 30px;
                                    background-image: url(../images/icon-shop-white.svg);
                                }
                            }
                        }
                        &.hometown-tax {
                            .title {
                                &::before{
                                    width: 34px;
                                    height: 35px;
                                    background-image: url(../images/icon-hometown-tax-white.svg);
                                }
                            }
                        }
                        &[target="_blank"] {
                            .title {
                                &::after{
                                    width: 15px;
                                    height: 15px;
                                    background-image: url(../images/target_blank-white.svg);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    &Contact {
        padding: 75px 0 120px;
        box-sizing: border-box;
        position: relative;
        @include maxwidth(768) { padding: 60px 0 30px; }
        .container {
            @include container(1160, 40);
            z-index: 1;
            color: $themetextcolor;
            @include maxwidth(768) {
                margin-left: 20px;
                margin-right: 20px;
            }
            .head {
            }
            .body {
                margin-top: 30px;
                .leadtext {
                    @include f_all(18);
                    font-weight: bold;
                    line-height: 1.5;
                }
                .text {
                    @include ff_ja(noto);
                    @include f_all(15);
                    font-weight: bold;
                    line-height: 1.8;
                    margin-top: 20px;
                    @include maxwidth(768) {
                        @include f_all(14);
                    }
                }
                .contact-buttons {
                    display: flex;
                    gap: 80px;
                    margin-top: 40px;
                    @include maxwidth(1440) {
                        gap: (80 / 1440 * 100vw);
                    }
                    @include maxwidth(768) {
                        flex-direction: column;
                        gap: 5px;
                        &>* {
                            flex: none !important;
                            width: 100%;
                        }
                    }
                    .contact-button {
                        flex-basis: 50%;
                        height: auto;
                        &__link {
                            @include ff_ja(noto);
                            @include f_all(20);
                            @include maxwidth(768) {
                                @include f_all(18);
                            }
                            font-weight: bold;
                            @include flex_centering;
                            min-height: 120px;
                            @include maxwidth(768) { min-height: 100px; }
                            height: 100%;
                            background-color: rgba(#893D50, .8);
                            padding: 10px;
                            box-sizing: border-box;
                            position: relative;
                            &:hover { opacity: 1; }
                            @media (hover: hover) {
                                transition: .4s;
                                &:hover {
                                    filter: brightness(0.80);
                                    -webkit-filter: brightness(0.80);
                                }
                            }
                            &.tel {
                                @include f_all(14);
                                font-weight: bold;
                                flex-direction: column;
                                .telnum {
                                    display: inline-flex;
                                    align-items: center;
                                    strong {
                                        font-size: 2.28em;
                                        font-weight: bold;
                                        margin-left: 0.15em;
                                        padding-bottom: 0.2em;
                                        @include maxwidth(768) {
                                            font-size: 2.14em;
                                        }
                                    }
                                }
                                .teltime {
                                    line-height: 1.3;
                                    padding-top: 0.25em;
                                    @include maxwidth(768) {
                                        font-size: .85em;
                                    }
                                }
                            }
                            &.mailform {
                                &::before{
                                    content: '';
                                    display: inline-block;
                                    width: 24px;
                                    height: 18px;
                                    background: url(../images/icon-mail-white.svg) no-repeat center/contain;
                                    margin-right: 14px;
                                    margin-top: 0.15em;
                                    @include maxwidth(768) {
                                        width: 17px;
                                        height: 13px;
                                        margin-right: 8px;
                                        margin-top: .20em;
                                    }
                                }
                                &::after{
                                    content: '';
                                    @include c-arrow();
                                    width: 5px;
                                    height: 10px;
                                    margin-left: 8px;
                                    margin-top: 0.2em;
                                }
                                .title {
                                }
                            }
                        }
                    }
                }
            }
        }
        .bgimage {
            @include absolute_centering;
            background-size: cover;
            background-position: center top;
            background-repeat: no-repeat;
            &::before{
                content: '';
                @include absolute_centering;
                background-color: rgba($themecolor, .60);
                @include maxwidth(768) {
                    background-color: rgba($themecolor, .80);
                }
            }
        }
    }
}

#footer {
    padding: 60px 0 75px;
    box-sizing: border-box;
    background-color: $themecolor;
    position: relative;
    @include maxwidth(768) {
        padding-top: 40px;
    }
    .container {
        @include container(1360, 40);
        color: $themetextcolor;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 2em;
        @include maxwidth(1200) {
            flex-direction: column;
            &>* {
                flex: none !important;
                width: 100%;
            }
        }
        @include maxwidth(768) {
            margin-left: 20px;
            margin-right: 20px;
            gap: 15px;
        }
        .l-left {
            padding-top: 10px;
            @include maxwidth(1200) {
                padding-top: 0;
            }
            .sitename {
                @include maxwidth(1200) {
                    text-align: center;
                }
                img {
                    width: 58px;
                }
            }
            .address {
                @include ff_ja(noto);
                @include f_all(14);
                line-height: 1.5;
                margin-top: 25px;
                @include maxwidth(1200) {
                    text-align: center;
                }
                @include maxwidth(768) {
                    @include f_all(13);
                    margin-top: 15px;
                }
            }
        }
        .l-right {
            flex-basis: 658px;
            .footer-menu, .footer-asidemenu {
                @include ff_ja(noto);
                @include f_all(14);
                font-weight: 500;
            }
            .footer-menu {
                ul {
                    display: flex;
                    justify-content: flex-end;
                    flex-wrap: wrap;
                    gap: 30px 2em;
                    @include maxwidth(1200) {
                        justify-content: initial;
                        gap: 1px;
                    }
                    @include maxwidth(768) {
                        flex-direction: column;
                        &>* { flex: none !important; }
                    }
                    li {
                        @include maxwidth(1200) {
                            flex-basis: calc((100% - 1px) / 2);
                        }
                        a {
                            display: inline-flex;
                            align-items: center;
                            @include maxwidth(1200) {
                                display: flex;
                                align-items: center;
                                min-height: 45px;
                                padding: 0.5em 30px 0.5em 20px;
                                box-sizing: border-box;
                                position: relative;
                                background-color: #2D3645;
                                &::after{
                                    flex-shrink: 0;
                                    content: '';
                                    display: inline-block;
                                    @include c-arrow();
                                    width: 5px;
                                    height: 10px;
                                    position: absolute;
                                    top: 0;
                                    bottom: 0;
                                    right: 20px;
                                    margin: auto;
                                }
                            }
                            &.instagram {
                                &::before{
                                    flex-shrink: 0;
                                    content: '';
                                    width: 14px;
                                    height: 14px;
                                    background: url(../images/icon-insta-white.svg) no-repeat center/contain;
                                    margin-right: 8px;
                                    margin-top: 0.15em;
                                }
                            }
                            &[target="_blank"] {
                                font-weight: 400;
                                &::after{
                                    flex-shrink: 0;
                                    content: '';
                                    display: inline-block;
                                    width: 12px;
                                    height: 12px;
                                    background: url(../images/target_blank-white.svg) no-repeat center/contain;
                                    margin-left: 8px;
                                    margin-top: 0.15em;
                                    @include maxwidth(1200) {
                                        margin: auto;
                                        right: 15px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .footer-asidemenu {
                margin-top: 60px;
                @include maxwidth(768) {
                    margin-top: 20px;
                }
                ul {
                    font-weight: 400;
                    line-height: 1.2;
                    display: flex;
                    justify-content: flex-end;
                    gap: 2em;
                    flex-wrap: wrap;
                    @include maxwidth(768) {
                        flex-direction: column;
                        justify-content: flex-start;
                        gap: 1em;
                    }
                    li {
                        a {
                        }
                    }
                }
            }
            #copyright {
                margin-top: 25px;
                display: flex;
                justify-content: flex-end;
                @include maxwidth(768) {
                    margin-top: 45px;
                    justify-content: flex-start;
                }
                small {
                    @include ff_ja(noto);
                    @include f_all(13);
                    line-height: 1.3;
                }
            }
        }
    }
}

#totop {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 20;
    overflow: hidden;
    @include maxwidth($header_breakpoint2) {
        bottom: 47px;
    }
    a{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 45px;
        height: 45px;
        background-color: $accentcolor;
        color: $themetextcolor;
        @include ff_ja(noto);
        @include f_all(12);
        font-weight: bold;
        transform: translateY(100%);
        transition: all .4s;
        .scroll-out-site-header &  {
            transform: translateY(0);
        }
        &:hover { opacity: 1; }
        @media (hover: hover) {
            &:hover {
                filter: brightness(0.80);
                -webkit-filter: brightness(0.80);
            }
        }
        &::before{
            content: '';
            display: inline-block;
            width: 12px;
            height: 6px;
            background: url(../images/arrow-top-white.svg) no-repeat center/contain;
            margin-bottom: 6px;
        }
    }
}

// === Toppage sections

// #toppageCompnay のスライドに適用
@keyframes slide_animation {
    from {
        -webkit-clip-path: circle(0 at 50% 50%);
        clip-path: circle(0 at 50% 50%);
    }
    to {
        -webkit-clip-path: circle(100% at 50% 50%);
        clip-path: circle(100% at 50% 50%);
    }
}
#toppageCompany {
    padding: 25px 0 60px;
    box-sizing: border-box;
    background-color: $__color;
    position: relative;
    @include maxwidth(768) {
        padding-top: 15px;
        padding-bottom: 0;
    }
    .container {
        @include container(1360, 40);
        color: $themetextcolor;
        @include maxwidth(768) {
            margin-left: 0;
            margin-right: 0;
        }
        .columns {
            display: flex;
            flex-direction: row-reverse;
            @include maxwidth(1024) {
                flex-direction: column;
                &>* {
                    flex: none !important;
                    width: 100%;
                }
            }
            .column {
                flex-basis: 50%;
                height: auto;
                position: relative;
                &.js-trigger {
                    opacity: 0;
                    transform: translateY(20px);
                    transition: 1.2s;
                    &[data-col="1"] > * {
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.2s;
                    }
                    &.js-trigger-active {
                        opacity: 1;
                        transform: translateY(0);
                        &[data-col="1"] > * {
                            opacity: 1;
                            transform: translateY(0);
                            @for $i from 0 to 3 {
                                &:nth-child(#{$i + 1}) {
                                    transition-delay: #{$i * .1s};
                                }
                            }
                        }
                    }
                }
                &[data-col="1"] {
                    background-color: $themecolor;
                    padding: 130px 40px 110px;
                    box-sizing: border-box;
                    @include maxwidth(768) {
                        padding: 80px 20px 60px;
                    }
                    .logo {
                        text-align: center;
                        img {
                            width: 104px;
                            @include maxwidth(768) { width: 94px; }
                        }
                    }
                    .leadtext {
                        @include f_all(18);
                        font-weight: bold;
                        line-height: 1.5;
                        text-align: center;
                        margin-top: 20px;
                        @include maxwidth(768) {
                            @include f_all(16);
                        }
                    }
                    .c-buttons {
                        margin-top: 30px;
                        justify-content: center;
                        .c-button {
                            &__link {
                            }
                        }
                    }
                }
                &[data-col="2"] {
                    .slideshow {
                        height: 100%;
                        padding: 48px 48px 25px;
                        box-sizing: border-box;
                        @include maxwidth(768) {
                            padding: 20px 20px 15px;
                        }
                        z-index: 1;
                        &-wrapper {
                            padding-top: (405 / 580 * 100%);
                            box-sizing: border-box;
                        }
                        &-slide {
                            &-active { animation: slide_animation 1s forwards; }
                        }
                        &-bgslide {
                            &::after{
                                content: '';
                                @include absolute_centering;
                                background-color: rgba($themecolor2, .6);
                                backdrop-filter: blur(5px);
                                -webkit-backdrop-filter: blur(5px);
                                z-index: 1;
                            }
                            .item {
                                filter: grayscale(100%);
                                -webkit-filter: grayscale(100%);
                            }
                        }
                    }
                }
            }
        }
    }
}

#toppageLineup {
    padding-top: 80px;
    position: relative;
    @include maxwidth(768) { padding-top: 50px; }
    .container {
        .haed {
            .c-heading {
            }
        }
        .body {
            margin-top: 40px;
            @include maxwidth(768) {
                margin-top: 30px;
            }
            #lineupForm {
            }
            .lineup-terms {
                @include container(1360, 40);
                margin-bottom: 30px;
                @include maxwidth(768) {
                    margin-left: 0;
                    margin-right: 0;
                }   
            }
            .product-headline {
                .headline-items {
                    .headline-item {
                        &__link {
                        }
                    }
                }
            }
            .c-buttons {
                justify-content: center;
                margin: 50px 30px 0;
                @include maxwidth(768) { margin-top: 30px; }
            }
            .loop-swiper {
                margin-top: 60px;
                @include maxwidth(768) { margin-top: 40px; }
                position: relative;
                &::before{
                    content: '';
                    display: block;
                    width: 100%;
                    height: 50%;
                    background-color: $__color;
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                }
                .swiper {
                    &-wrapper {
                    }
                    &-slide {
                        width: (450 / 1440 * 100vw);
                        @include maxwidth(1024) { width: (450 / 1024 * 100vw); }
                        @include maxwidth(600) { width: (266 / 375 * 100vw); }
                        &__inner {
                            padding-top: 100%;
                            box-sizing: border-box;
                            position: relative;
                            &>img {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                    }
                }
            }
        }
    }
}

#lineupForm {
    &.toppage {
        @include container(1360, 40);
    }
    @include ff_ja(noto);
    margin-bottom: 50px;
    padding-bottom: 25px;
    border-bottom: solid 1px #999;
    box-sizing: border-box;
    @include maxwidth(768) {
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 20px;
        margin-bottom: 30px;
    }
    &>* {
        max-width: 1220px;
        width: 100%;
        margin: auto;
        padding: 0 30px;
        box-sizing: border-box;
        position: relative;
        @include maxwidth(768) {
            padding: 0;
            max-width: 100%;
            width: auto;
        }
    }
    .product-taxonomys {
    }
    .form-buttons {
        margin-top: 25px;
        @include flex_centering;
        box-sizing: border-box;
        @include maxwidth(768) {
            display: block;
            margin: 35px 30px 0;
        }
        .form-button {
            button[type="submit"] {
                cursor: pointer;
                border: none;
                outline: none;
                padding: 1em;
                @include maxwidth(768) { width: 100%; }
                &::before{
                    content: '';
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    background: url(../images/icon-search-white.svg) no-repeat center/contain;
                    margin-top: .035em;
                }
            }
        }
    }
}

.product-taxonomys {
    @include maxwidth(768) { margin-right: 20px; }
    .product-taxonomy {
        &:not(:first-child) {
            margin-top: 15px;
            @include maxwidth(768) { margin-top: 4px; }
        }
        display: flex;
        align-items: flex-start;
        @include maxwidth(768) { align-items: initial; }
        &.js-trigger {
            .terms-wrap .term {
                opacity: 0;
                transition: 1.2s;
            }
            &.js-trigger-active {
                .terms-wrap .term {
                    opacity: 1;
                    @for $i from 0 to 25 {
                        &:nth-child(#{$i + 1}) {
                            transition-delay: #{$i * .1s};
                        }
                    }
                }
            }
        }
        .title {
            flex-shrink: 0;
            @include f_all(14);
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            gap: 15px;
            padding-top: 0.4em;
            margin-right: 25px;
            @include maxwidth(768) { margin-right: 15px; }
            &::after{
                content: '';
                width: 10px;
                height: 2px;
                background-color: #999;
                margin-top: 0.15em;
                @include maxwidth(768) { display: none; }
            }
            @include maxwidth(768) {
                justify-content: center;
                color: $themetextcolor;
                padding: 13px;
                box-sizing: border-box;
                background-color: #192231;
                &>span {
                    writing-mode: vertical-rl;
                    display: inline-block;
                    width: 1em;
                }
            }
        }
        .terms-wrap {
            flex: auto;
            display: flex;
            gap: 12px;
            @include maxwidth(768) {
                flex-wrap: wrap;
                gap: 8px;
                padding: 5px 0;
                box-sizing: border-box;
            }
            .allterms {
                flex-shrink: 0;
                @include maxwidth(768) { display: contents; }
                .term {
                    .name { 
                        min-width: 75px;
                        gap: 6px;
                        &::before{
                            content: '';
                            display: inline-block;
                            width: 4px;
                            height: 4px;
                            border-radius: 9999px;
                            background-color: currentColor;
                        }
                    }
                }
            }
            .terms {
                flex: auto;
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                @include maxwidth(768) { display: contents; }
            }
            .term {
                display: inline-block;
                // overflow: hidden;
                position: relative;
                input[type="radio"] {
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0;
                    &:checked {
                        &+.name {
                            color: $themetextcolor;
                            background-color: $accentcolor;
                        }
                    }
                }
                .name {
                    cursor: pointer;
                    @include f_all(14);
                    font-weight: bold;
                    padding: 0 12px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;
                    background-color: $themetextcolor;
                    min-height: 25px;
                    position: relative;
                    z-index: 1;
                    @media (hover: hover) {
                        &:hover {
                            filter: brightness(0.80);
                            -webkit-filter: brightness(0.80);
                        }
                    }
                }
            }
        }
    }
}

.product-headline {
    &.js-trigger {
        .headline-items .headline-item {
            opacity: 0;
            transform: translateY(20px);
            transition: 1.2s;
        }
        &.js-trigger-active {
            .headline-items .headline-item {
                opacity: 1;
                transform: translateY(0);
                @for $i from 0 to 8 {
                    &:nth-child(#{$i + 1}) {
                        transition-delay: #{$i * .1s};
                    }
                }
            }
        }
    }
    .headline-items {
        .headline-item {
            &__link {
                .thumb {
                    display: block;
                    padding-top: 100%;
                    box-sizing: border-box;
                    position: relative;
                    &>img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                    .labels {
                        position: absolute;
                        top: 10px;
                        left: 10px;
                        right: 10px;
                        margin: auto;
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        gap: 5px;
                        .label {
                            @include ff_ja(noto);
                            color: $themetextcolor;
                            background-color: $themecolor;
                            @include f_all(14);
                            font-weight: bold;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            padding: 0 12px 1px;
                            box-sizing: border-box;
                            position: relative;
                            min-height: 25px;
                            &.pop1 { background-color: $themecolor3; }
                            &.pop2 { background-color: #999; }
                            &.pop3 { background-color: #C59982; }
                            &.pop4 { background-color: $themecolor2; }

                            // 売上ラベル
                            &.sales {
                                @include f_all(13);
                                @include maxwidth(360) { @include f_all(12); }
                                padding-left: 8px;
                                &::before{
                                    flex-shrink: 0;
                                    content: '';
                                    display: inline-block;
                                    width: 14px;
                                    height: 10px;
                                    background: url(../images/label_sales.svg) no-repeat center/contain;
                                    margin-right: 4px;
                                }
                                &.sales1 {
                                    &::before { background-image: url(../images/label_sales_no1.svg); }
                                }
                                &.sales2 {
                                    &::before { background-image: url(../images/label_sales_no2.svg); }
                                }
                                &.sales3 {
                                    &::before { background-image: url(../images/label_sales_no3.svg); }
                                }
                            }

                            // オススメ商品
                            &.recommend {
                                @include f_all(13);
                                @include maxwidth(360) { @include f_all(12); }
                                padding-left: 8px;
                                &::before{
                                    flex-shrink: 0;
                                    content: '';
                                    display: inline-block;
                                    width: 14px;
                                    height: 13px;
                                    background: url(../images/label-recommend.svg) no-repeat center/contain;
                                    margin-right: 4px;
                                }
                            }
                        }
                    }
                }
                .docs {
                    display: block;
                    padding-top: 10px;
                    box-sizing: border-box;
                    position: relative;
                    .title {
                        display: block;
                        color: $basetextcolor;
                        @include f_all(16);
                        font-weight: bold;
                        line-height: 1.5;
                    }
                    .terms {
                        display: block;
                        @include ff_ja(noto);
                        @include f_all(14);
                        font-weight: bold;
                        padding-top: 8px;
                        .term {
                            color: $themetextcolor;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            padding: .35em 12px;
                            box-sizing: border-box;
                            background-color: $themecolor;
                            min-height: 25px;
                            position: relative;
                        }
                    }
                }
            }
        }
    }
    .headline-button-prev, .headline-button-next {
        display: none;
        @include maxwidth(768) { display: block; }
        cursor: pointer;
        width: 35px;
        height: 35px;
        background-color: $accentcolor;
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        z-index: 10;
        &::before{
            content: '';
            display: inline-block;
            width: 6px;
            height: 12px;
            background: url(../images/arrow-white.svg) no-repeat center/contain;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
    .headline-button-prev {
        left: 5px;
        transform: translateY(-50%) rotate(-180deg);
    }
    .headline-button-next {
        right: 5px;
    }
}


#toppageContents {
    color: $themetextcolor;
    padding-top: 85px;
    box-sizing: border-box;
    background-color: $__color;
    @include maxwidth(768) { padding-top: 45px; }
    .container {
        .head {
            .c-heading {
            }
        }
        .body {
            margin-top: 30px;
            @include maxwidth(768) { margin-top: 15px; }
            // &>section { counter-increment: section-num; }
            .content-section {
                padding: 60px 0;
                @include maxwidth(768) {
                    padding-top: 50px;
                    padding-bottom: 20px;
                }
                box-sizing: border-box;
                border-top: 1px solid $themecolor;
                border-bottom: 1px solid $themecolor;
                position: relative;
                .title-en {
                    @include ff_ja(noto);
                    color: rgba($themecolor3, .60);
                    @include f_all(40);
                    // letter-spacing: 0.10em;
                    position: absolute;
                    top: 80px;
                    right: 60px;
                    @include maxwidth(1440) { right: (60 / 1440 * 100vw); }
                    @include maxwidth(1024) {
                        top: 50px;
                        right: (60 / 1024 * 100vw);
                    }
                    @include maxwidth(768) {
                        @include f_all(36);
                        letter-spacing: 0;
                        right: 15px !important;
                    }
                    z-index: 1;
                    &>span {
                        display: inline-block;
                        width: 1em;
                        writing-mode: vertical-rl;
                    }
                }
                *[id$="Inner"] {
                    @include container(1120, 40);
                    z-index: 1;
                    @include maxwidth(768) {
                        margin-left: 20px;
                        margin-right: 20px;
                    }
                }
                .columns {
                    display: flex;
                    flex-direction: row-reverse;
                    align-items: center;
                    gap: 140px;
                    @include maxwidth(1440) { gap: (140 / 1440 * 100vw); }
                    @include maxwidth(1024) {
                        flex-direction: column !important;
                        align-items: initial;
                        gap: 20px;
                        &>* {
                            flex: none !important;
                            width: 100%;
                        }
                    }
                    @include maxwidth(768) { gap: 10px; }
                    .column {
                        &.js-trigger {
                            opacity: 0;
                            transform: translateY(20px);
                            transition: 1.2s;
                            &[data-col="1"] > * {
                                opacity: 0;
                                transform: translateY(20px);
                                transition: 1.2s;
                            }
                            &.js-trigger-active {
                                opacity: 1;
                                transform: translateY(0);
                                &[data-col="1"] > * {
                                    opacity: 1;
                                    transform: translateY(0);
                                    @for $i from 0 to 3 {
                                        &:nth-child(#{$i + 1}) {
                                            transition-delay: #{$i * .1s};
                                        }
                                    }
                                }
                            }
                        }
                        &[data-col="1"] {
                            flex-basis: 460px;
                            @include maxwidth(1024) {
                                max-width: 460px;
                                width: 100%;
                                margin: auto;
                            }
                        }
                        &[data-col="2"] {
                            flex-basis: 520px;
                            @include maxwidth(1024) {
                                max-width: 520px;
                                width: 100%;
                                margin: auto;
                            }
                        }
                        .title, .text {
                            @include maxwidth(1380) { padding-right: 60px; }
                            @include maxwidth(1024) { padding-right: 0; }
                            @include maxwidth(600) { padding-right: 60px; }
                        }
                        .title {
                            @include ff_ja(noto);
                            @include f_all(20);
                            font-weight: bold;
                            line-height: 1.5;
                            @include maxwidth(768) {
                                @include f_all(22);
                                letter-spacing: 0.15em;
                                padding-bottom: .7em;
                                position: relative;
                                &::after{   
                                    content: '';
                                    width: 1em;
                                    height: 2px;
                                    background-color: $themecolor3;
                                    position: absolute;
                                    left: 0;
                                    bottom: 0;
                                }
                            }
                        }
                        .text {
                            @include ff_ja(noto);
                            @include f_all(14);
                            font-weight: 500;
                            line-height: 1.8;
                            margin-top: 27px;
                        }
                        .buttons {
                            margin-top: 13px;
                            @include maxwidth(768) { margin-top: 20px; }
                            .button {
                                @include ff_ja(shippori);
                                @include f_all(16);
                                font-weight: 600;
                                &:not(:last-of-type) {
                                    border-bottom: solid 1px rgba(#999999, .5);
                                }
                                &__link {
                                    display: flex;
                                    align-items: center;
                                    padding: 10px 30px 10px 20px;
                                    box-sizing: border-box;
                                    min-height: 72px;
                                    position: relative;
                                    @include maxwidth(768) {
                                        min-height: 60px;
                                        padding-left: 4px;
                                    }
                                    &::after{
                                        content: '';
                                        display: inline-block;
                                        width: 5px;
                                        height: 10px;
                                        background: url(../images/arrow-white.svg) no-repeat center/contain;
                                        position: absolute;
                                        top: 0;
                                        bottom: 0;
                                        right: 20px;
                                        margin: auto;
                                    }
                                    &:hover { opacity: 1; }
                                    @media (hover: hover) {
                                        z-index: 0;
                                        &::before{
                                            content: '';
                                            @include absolute_centering;
                                            background-color: rgba($themecolor3, .4);
                                            z-index: -1;
                                            opacity: 0;
                                            transform: scaleX(0);
                                            transform-origin: right center;
                                            transition-property: opacity, transform;
                                            transition-duration:.4s;
                                            backdrop-filter: blur(5px);
                                            -webkit-backdrop-filter: blur(5px);
                                        }
                                        &:hover {
                                            &::before { opacity: 1; transform: scaleX(1); transform-origin: left center; }
                                        }
                                    }
                                }
                            }
                        }
                        .image {
                            padding-top: (496 / 520 * 100%);
                            @include maxwidth(1024) { padding-top: (280 / 335 * 100%); }
                            box-sizing: border-box;
                            position: relative;
                            &>img {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                    }
                }
                .bgimage {
                    @include absolute_centering;
                    // z-index: 0;
                    &::after{
                        content: '';
                        @include absolute_centering;
                        background-color: rgba(#000, .6);
                        backdrop-filter: blur(5px);
                        -webkit-backdrop-filter: blur(5px);
                    }
                    &>span {
                        @include absolute_centering;
                        background-size: cover;
                        background-position: center center;
                        background-repeat: no-repeat;
                        filter: grayscale(100%);
                        -webkit-filter: grayscale(100%);
                    }
                }
            }
            #service {
                &Inner {
                }
            }
            #store {
                &Inner {
                }
                .title-en {
                    right: auto;
                    left: 60px;
                    @include maxwidth(1440) { left: (60 / 1440 * 100vw); }
                    @include maxwidth(1024) { left: auto; right: (60 / 1024 * 100vw); }
                }
                .columns {
                    flex-direction: row;
                    gap: 130px;
                    @include maxwidth(1440) { gap: (130 / 1440 * 100vw); }
                    @include maxwidth(1024) { gap: 20px; }
                    .column {
                        &[data-col="1"] {
                            @include maxwidth(1380) { padding-left: 60px; }
                            @include maxwidth(1024) { padding-left: 0; }
                            .c-buttons {
                                margin-top: 30px;
                                @include maxwidth(768) { margin-top: 15px; }
                            }
                        }
                        &[data-col="2"] {
                            .c-buttons { margin-top: 20px; }
                        }
                        .store-table {
                            margin-top: 35px;
                            @include maxwidth(600) { margin-top: 20px; }
                            table {
                                width: 100%;
                                tr {
                                    border-bottom: solid 1px rgba(#999, .5);
                                    @include maxwidth(600) {
                                        &:last-of-type { border-bottom: none; }
                                    }
                                    th, td {
                                        @include ff_ja(noto);
                                        @include f_all(14);
                                        line-height: 1.5;
                                        padding: 0.75em 20px 0.75em 11px;
                                        vertical-align: top;
                                        box-sizing: border-box;
                                    }
                                    th {
                                        min-width: 90px;
                                        @include maxwidth(600) { min-width: 100px; }
                                        font-weight: 600;
                                    }
                                    td {
                                        p {
                                            &:not(:first-of-type) { text-indent: -.5em; }
                                            br.sp {
                                                @media screen and (min-width: 769px) {
                                                    display: none;
                                                }
                                            }
                                        }
                                    }

                                    @include maxwidth(600) {
                                        &:first-of-type {
                                            &, th, td {
                                                display: block;
                                                width: 100%;
                                                min-width: initial;
                                            }
                                            th { padding: 18px 7px 6px; }
                                            td { padding: 6px 0px 18px; }
                                        }
                                        &:not(:first-of-type) {
                                            display: flex;
                                            align-items: center;
                                            th, td {
                                                padding-left: 0;
                                                padding-right: 0;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        .gmap {
                            width: 100%;
                            height: 430px;
                            @include maxwidth(768) { height: 220px; }
                            iframe {
                                width: 100% !important;
                                height: 100% !important;
                            }
                        }
                        .c-buttons { justify-content: center; }
                    }
                }
                .bgimage {
                    &::after{
                        background-color: rgba($themecolor, .6);
                    }
                }
            }
            #recruit {
                &Inner {
                }
            }
        }
    }
}

#toppageNewstopics {
    padding: 100px 0;
    box-sizing: border-box;
    position: relative;
    @include maxwidth(1024) {
        padding-top: 20px;
        padding-bottom: 50px;
    }
    .container {
        @include container(1360, 40);
        @include maxwidth(1024) {
            margin-left: 0;
            margin-right: 0;
        }
        .columns {
            display: flex;
            gap: 140px;
            @include maxwidth(1440) { gap: (140 / 1440 * 100vw); }
            @include maxwidth(1024) {
                flex-direction: column;
                gap: 20px;
                &>* { flex: none !important; }
            }
            .column {
                &.js-trigger {
                    opacity: 0;
                    transform: translateY(20px);
                    transition: 1.2s;
                    &[data-col="1"] {
                        .newstopics-terms li {
                            opacity: 0;
                            transition: 1.2s;
                        }
                    }
                    &[data-col="2"] {
                        .headline .headline-item {
                            opacity: 0;
                            transform: translateY(20px);
                            transition: 1.2s;
                        }
                    }
                    &.js-trigger-active {
                        opacity: 1;
                        transform: translateY(0);
                        &[data-col="1"] {
                            .newstopics-terms li {
                                opacity: 1;
                                @for $i from 0 to 20 {
                                    &:nth-child(#{$i + 1}) {
                                        transition-delay: #{$i * .1s};
                                    }
                                }
                            }
                        }
                        &[data-col="2"] {
                            .headline .headline-item {
                                opacity: 1;
                                transform: translateY(0);
                                @for $i from 0 to 3 {
                                    &:nth-child(#{$i + 1}) {
                                        transition-delay: #{$i * .1s};
                                    }
                                }
                            }
                        }
                    }
                }
                &[data-col="1"] {
                    flex-basis: 480px;
                    padding: 80px 30px 50px;
                    box-sizing: border-box;
                    background-color: $themecolor;
                    @include maxwidth(1024) {
                        padding: 30px;
                        margin: 0 40px;
                    }
                    @include maxwidth(768) {
                        padding-left: 20px;
                        padding-right: 20px;
                        margin: 0 20px;
                    }
                    &>* {
                        max-width: 280px;
                        width: 100%;
                        margin: auto;
                        @include maxwidth(1024) { max-width: 480px; }
                    }
                    .c-heading {
                        &__inner {
                        }
                        .en {
                        }
                        .ja { color: $themetextcolor; }
                    }
                    .newstopics-taxonomys {
                        margin-top: 40px;
                        @include maxwidth(768) { margin-top: 25px; }
                        .newstopics-taxonomy {
                            .title {
                                @include ff_ja(noto);
                                color: $themetextcolor;
                                @include f_all(14);
                                font-weight: bold;
                                display: inline-flex;
                                align-items: center;
                                gap: 0.8em;
                                &::after{
                                    content: '';
                                    display: inline-block;
                                    width: 1em;
                                    @include maxwidth(768) { width: 10px; }
                                    height: 2px;
                                    background-color: #999;
                                    margin-top: 0.15em;
                                }
                            }
                            .newstopics-terms {
                                margin-top: 30px;
                                @include maxwidth(768) { margin-top: 20px; }
                            }
                        }
                    }
                    .c-buttons {
                        margin-top: 30px;
                        @include maxwidth(1024) { justify-content: center; }
                        @include maxwidth(768) { margin-top: 20px; }
                    }
                }
                &[data-col="2"] {
                    flex-basis: 740px;
                }

                .headline {
                    position: relative;
                    &.swiper {
                        @include maxwidth(1024) {
                            padding-left: 40px;
                            padding-right: 40px;
                        }
                        @include maxwidth(768) {
                            padding-left: 20px;
                            padding-right: 20px;
                        }
                    }
                    .headline-items {
                        @media screen and (min-width: 1025px) {
                            display: flex;
                            flex-direction: column;
                        }
                        .headline-item {
                            &:not(:first-child) {
                                margin-top: 25px;
                                @include maxwidth(1024) { margin-top: 0; }
                            }
                            &__link {
                                @include ff_ja(noto);
                                @include f_all(14);
                                font-weight: bold;
                                padding-top: 10px;
                                padding-left: 30px;
                                box-sizing: border-box;
                                border-left: solid 2px $themecolor2;
                                display: flex;
                                align-items: center;
                                gap: 40px;
                                @include maxwidth(1024) {
                                    padding-top: 0;
                                    padding-left: 0;
                                    border: none;
                                    flex-direction: column;
                                    align-items: flex-start;
                                    gap: 18px;
                                    &>* { flex: none !important; }
                                }
                                .thumb {
                                    flex-shrink: 0;
                                    flex-basis: 190px;
                                    @include maxwidth(1024) { width: 100%; }
                                    .img {
                                        display: block;
                                        padding-top: (120 / 190 * 100%);
                                        @include maxwidth(1024) {
                                            padding-top: (200 / 325 * 100%);
                                        }
                                        box-sizing: border-box;
                                        position: relative;
                                        &>img {
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            width: 100%;
                                            height: 100%;
                                            object-fit: cover;
                                        }
                                    }
                                }
                                .docs {
                                    flex: auto;
                                    display: flex;
                                    flex-direction: column;
                                    flex-wrap: wrap;
                                    @include maxwidth(1024) {
                                        width: 100%;
                                        align-items: center;
                                        flex-direction: row;
                                        padding-left: 20px;
                                        box-sizing: border-box;
                                        position: relative;
                                        &::before{
                                            content: '';
                                            display: inline-block;
                                            width: 2px;
                                            background-color: $themecolor2;
                                            position: absolute;
                                            top: 1px;
                                            bottom: 1px;
                                            left: 0;
                                            margin: auto;
                                        }
                                    }
                                    .date {
                                        @include maxwidth(1024) { margin-right: 14px; }
                                    }
                                    .terms {
                                        margin-top: 25px;
                                        @include maxwidth(1024) { margin-top: 0; }
                                        .term {
                                            display: inline-flex;
                                            align-items: center;
                                            gap: 8px;
                                            &::before{
                                                content: '';
                                                display: inline-block;
                                                width: 6px;
                                                height: 6px;
                                                border-radius: 9999px;
                                                background-color: $accentcolor;
                                                margin-top: .10em;
                                            }
                                            &:not(:first-child:last-child) {
                                                margin-right: 1em;
                                                margin-bottom: 0.10em;
                                            }
                                        }
                                    }
                                    .title {
                                        line-height: 1.3;
                                        margin-top: 10px;
                                        @include maxwidth(1024) { flex-basis: 100%; }
                                        @include maxwidth(768) { margin-top: 6px; }
                                        &>span {
                                            &::after{
                                                content: '';
                                                display: inline-block;
                                                width: 6px;
                                                height: 12px;
                                                background: url(../images/arrow-black.svg) no-repeat center/contain;
                                                margin-left: 8px;
                                                transform: translateY(.08em);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    &-button-prev, &-button-next {
                        cursor: pointer;
                        width: 35px;
                        height: 35px;
                        background-color: $accentcolor;
                        position: absolute;
                        top: 40%;
                        transform: translateY(-50%);
                        z-index: 10;
                        transition: all .4s;
                        display: none;
                        @include maxwidth(768) { display: block; }
                        &.swiper-button-disabled { opacity: .4; }
                        &::after{
                            content: '';
                            display: inline-block;
                            width: 6px;
                            height: 12px;
                            background: url(../images/arrow-white.svg) no-repeat center/contain;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%,-50%);
                        }
                    }
                    &-button-prev {
                        left: 5px;
                        transform: translateY(-50%) rotate(180deg);
                    }
                    &-button-next {
                        right: 5px;
                    }
                }

            }
        }
    }
}

.subpage-newstopics-taxonomys {
    margin-bottom:40px;
}
.subpage-newstopics-headline {
	$threshold_px: 600px;
	$threshold: 600;
    position: relative;
    @media screen and (max-width: $threshold_px) {
        display: flex;
        flex-direction: column;
        gap: 20px
    }
    .headline-item {
        &:not(:first-child) {
            margin-top: 25px;
            @include maxwidth($threshold) { margin-top: 0; }
        }
        &__link {
            @include ff_ja(noto);
            @include f_all(14);
            font-weight: bold;
            padding-top: 10px;
            padding-left: 30px;
            box-sizing: border-box;
            border-left: solid 2px $themecolor2;
            display: flex;
            align-items: center;
            gap: 40px;
            @include maxwidth($threshold) {
                padding-top: 0;
                padding-left: 0;
                border: none;
                flex-direction: column;
                align-items: flex-start;
                gap: 18px;
                &>* { flex: none !important; }
            }
            .thumb {
                flex-shrink: 0;
                flex-basis: 190px;
                @include maxwidth($threshold) { width: 100%; }
                .img {
                    display: block;
                    padding-top: (120 / 190 * 100%);
                    @include maxwidth($threshold) {
                        padding-top: (200 / 325 * 100%);
                    }
                    box-sizing: border-box;
                    position: relative;
                    &>img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
            .docs {
                flex: auto;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                @include maxwidth($threshold) {
                    width: 100%;
                    align-items: center;
                    flex-direction: row;
                    padding-left: 20px;
                    box-sizing: border-box;
                    position: relative;
                    &::before{
                        content: '';
                        display: inline-block;
                        width: 2px;
                        background-color: $themecolor2;
                        position: absolute;
                        top: 1px;
                        bottom: 1px;
                        left: 0;
                        margin: auto;
                    }
                }
                .date {
                    @include maxwidth($threshold) { margin-right: 14px; }
                }
                .terms {
                    margin-top: 25px;
                    @include maxwidth($threshold) { margin-top: 0; }
                    .term {
                        display: inline-flex;
                        align-items: center;
                        gap: 8px;
                        &::before{
                            content: '';
                            display: inline-block;
                            width: 6px;
                            height: 6px;
                            border-radius: 9999px;
                            background-color: $accentcolor;
                            margin-top: .10em;
                        }
                        &:not(:first-child:last-child) {
                            margin-right: 1em;
                            margin-bottom: 0.10em;
                        }
                    }
                }
                .title {
                    line-height: 1.3;
                    margin-top: 10px;
                    @include maxwidth($threshold) { flex-basis: 100%; }
                    &>span {
                        &::after{
                            content: '';
                            display: inline-block;
                            width: 6px;
                            height: 12px;
                            background: url(../images/arrow-black.svg) no-repeat center/contain;
                            margin-left: 8px;
                            transform: translateY(.08em);
                        }
                    }
                }
            }
        }
    }
}

.subpage-lineup-headline {
	.headline-items {
		display:flex;
		flex-wrap:wrap;
		gap: 20px;
		& > * {
			flex: 0 0 calc((100% - 20px * 3) / 4);
            @include maxwidth(1024) {
                flex: 0 0 calc((100% - 20px * 2) / 3);
            }
			@include maxwidth(680){
				flex: 0 0 calc((100% - 20px * 1) / 2);
			}
		}
	}
	.noposts {
		padding: 2em 1em;
		background-color:$basecolor;
		flex: 0 0 100%;
		text-align:center;
	}
}

.newstopics-terms {
    position: relative;
    ul {
        @include ff_ja(noto);
        color: $basetextcolor;
        @include f_all(14);
        font-weight: bold;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px 12px;
        @include maxwidth(768) { gap: 8px; }
        li {
            &:first-child { flex-basis: 100%; }
            a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: .55em;
                padding: 0 12px;
                box-sizing: border-box;
                min-height: 25px;
                background-color: $themetextcolor;
                position: relative; 
                &.all {
                    &::before{
                        content: '';
                        display: inline-block;
                        width: 4px;
                        height: 4px;
                        border-radius: 9999px;
                        background-color: currentColor;
                        margin-top: 0.10em;
                    }
                }
                &.current {
                    color: $themetextcolor;
                    background-color: $accentcolor;
                }
                &:hover { opacity: 1; }
                @media (hover: hover) {
                    &:hover {
                        filter: brightness(0.80);
                        -webkit-filter: brightness(0.80);
                    }
                }
            }
        }
    }
}

.newstopics-headline {
    position: relative;
    .headline {
        &-items {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            @include maxwidth(768) { gap: 10px; }
        }
        &-item {
            width: calc((100% - (20px * 3)) / 4);
            @include maxwidth(1024) {  }
            &__link {
                display: block;
                position: relative;
                &>* { display: block; }
                span.thumb {
                    span.img {
                        display: block;
                        padding-top: (200 / 325 * 100%);
                        box-sizing: border-box;
                        position: relative;
                        &>img {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }
                span.docs {
                    @include ff_ja(noto);
                    @include f_all(14);
                    font-weight: bold;
                    margin-top: 20px;
                    padding-left: 20px;
                    border-left: solid 1px $themecolor2;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    span.date {
                        margin-right: 14px;
                    }
                    span.terms {
                        span.term {
                        }
                    }
                    span.title {
                        flex-basis: 100%;
                        margin-top: 8px;
                    }
                }
            }
        }
    }
}

#toppageInstagram {
    padding: 50px 0 46px;
    box-sizing: border-box;
    position: relative;
    background-color: $__color;
    @include maxwidth(768) {
        padding-top: 30px;
        padding-bottom: 20px;
    }
    .container {
        @include container(1160, 40);
        @include maxwidth(768) {
            margin-left: 20px;
            margin-right: 20px;
        }
        .heading {
            @include flex_centering;
            position: relative;
            &__inner {
                display: inline-flex;
                flex-direction: column;
                align-items: center;
            }
            .logo {
                display: inline-block;
                width: 16px;
                height: 16px;
                background: url(../images/icon-insta-white.svg) no-repeat center/contain;
            }
            h2 {
                color: $themetextcolor;
                @include ff_ja(noto);
                @include f_all(20);
                font-weight: bold;
                margin-top: 8px;
            }
        }
        .body {
            margin-top: 40px;
            @include maxwidth(768) { margin-top: 20px; }
            // ul {
            //     display: flex;
            //     gap: 10px;
            //     @include maxwidth(1024) { flex-wrap: wrap; }
            //     li {
            //         @include maxwidth(1024) { width: calc((100% - 10px) / 2); }
            //         img {
            //         }
            //     }
            // }
            // .c-buttons {
            //     justify-content: center;
            //     margin-top: 40px;
            //     @include maxwidth(768) { margin-top: 20px; }
            // }

            .items {
                .item {
                    padding: 25px 40px 40px;
                    @include maxwidth(768) {
                        padding: 30px 20px;
                    }
                    box-sizing: border-box;
                    position: relative;
                    background: $themecolor2;
                    &:not(:first-of-type) { margin-top: 20px; }
                    &.js-trigger {
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.2s;
                        &.js-trigger-active {
                            opacity: 1;
                            transform: translateY(0px);
                        }
                    }
                    .subhead {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        gap: 1em;
                        .heading {
                            h3 {
                                color: $themetextcolor;
                                @include f_all(16);
                                font-weight: bold;
                                line-height: 1.5;
                                padding-left: 20px;
                                box-sizing: border-box;
                                position: relative;
                                &::after{
                                    content: '';
                                    width: 3px;
                                    position: absolute;
                                    top: 0;
                                    bottom: 0;
                                    left: 0;
                                    margin: auto;
                                    background-color: $themecolor3;
                                }
                            }
                        }
                        .c-buttons {
                            margin: 0;
                            @include maxwidth(768) { display: none; }
                        }
                    }
                    .subbody {
                        margin-top: 15px;
                        position: relative;

                        .sp {
                            @media screen and (min-width: 769px) {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
}

// === Sub page 

#subpageHeadingVisual {
    position: relative;
    .visual {
        height: 150px;
        @include maxwidth(768) {
            height: 210px !important;
        }
        position: relative;
        &::after{
         content: '';
         @include absolute_centering;
         background-color: rgba(#000, .40);
        }
        &>img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

#subpageTopicpath {
    margin: 40px 0;
    position: relative;
    @include maxwidth(768) { margin: 30px 0; }
    .container {
        @include container(1160, 40);
        @include maxwidth(768) {
            margin-left: 20px;
            margin-right: 20px;
        }
        ul {
            @include ff_ja(noto);
            @include f_all(14);
            @include maxwidth(786) {
                @include f_all(13);
            }
            font-weight: bold;
            line-height: 1.3;
            li {
                display: inline-flex;
                align-items: center;
                &::after{
                    content: '';
                    display: inline-block;
                    width: 6px;
                    height: 12px;
                    background: url(../images/arrow-black.svg) no-repeat center/contain;
                    margin: .15em .7em 0;
                }
                &:last-child::after { display: none; }
            }
        }
    }
}

#subpageHeading {
    @include maxwidth(1024) { justify-content: center; }
    &Inner {
        @include maxwidth(1024) { align-items: center; }
    }
    .ja { @include ff_ja(noto); }
}

#subpageContent {
    margin: 50px 0 60px;
    position: relative;
    @include maxwidth(768) { margin-top: 30px; }
    //.container {
    & > .container {
        @include container(1160, 40);
        @include maxwidth(768) {
            margin-left: 20px;
            margin-right: 20px;
        }
        #sidebar { 
            @include maxwidth(1024) { display: none !important; }
        }
        .columns {
            display: flex;
            gap: 80px;
            @include maxwidth(1440) { gap: (80 / 1440 * 100vw); }
            @include maxwidth(1024) {
                flex-direction: column;
                gap: 40px;
                &>* {
                    flex: none !important;
                    width: 100%;
                }
            }
            @include maxwidth(768) { gap: 30px; }
            .post-type-archive.post-type-archive-lineup & {
                display: contents;
            }
            .column {
                &[data-col="1"] {
                    // flex-basis: 280px;
                    flex: 0 0 280px;
                    .post-type-archive.post-type-archive-lineup & {
                        margin-bottom: 40px;
                        @include maxwidth(768) { margin-bottom: 30px; }
                    }
                }
                &[data-col="2"] {
                    // flex-basis: 800px;
                    flex: 1 1 800px;
                }

                .default { 
                    // 商品紹介
                    .product-columns {
                        display: flex;
                        gap: 40px;
                        @include maxwidth(768) {
                            flex-direction: column;
                            gap: 30px;
                            &>* { flex: none !important; }
                        }
                        .product-column {
                            &:nth-of-type(1) {
                                flex-basis: 360px;
                                width: 0;
                                @include maxwidth(768) { 
                                    max-width: 480px;
                                    width: 100%;
                                    margin-left: auto;
                                    margin-right: auto;
                                }
                            }
                            &:nth-of-type(2) {
                                flex-basis: 400px;
                            }
                            &>* {
                                margin-top: 20px;
                                @include maxwidth(768) { margin-right: 15px; }
                                &:first-child { margin-top: 0 !important; }
                            }
                            #mainSwiper {
                                .swiper {
                                    &-wrapper {
                                    }
                                    &-slide {
                                        &__inner {
                                            padding-top: 100%;
                                            box-sizing: border-box;
                                            position: relative;
                                            &>img {
                                                position: absolute;
                                                top: 0;
                                                left: 0;
                                                width: 100%;
                                                height: 100%;
                                                object-fit: cover;
                                            }
                                        }
                                    }
                                }
                            }
                            .thumb-wrapper {
                                margin-top: 10px;
                                display: flex;
                                gap: 10px;
                                @include maxwidth(768) {
                                    margin-top: 5px;
                                    gap: 5px;
                                }
                                .thumb-media {
                                    cursor: pointer;
                                    flex-basis: calc((100% - (10px * 2)) / 3);
                                    @include maxwidth(768) {
                                        flex-basis: calc((100% - (5px * 2)) / 3);
                                    }
                                    position: relative;
                                    &::after{
                                        content: '';
                                        display: inline-block;
                                        @include absolute_centering;
                                        background-color: rgba(#000, .5);
                                        backdrop-filter: blur(2px);
                                        -webkit-backdrop-filter: blur(2px);
                                        opacity: 0;
                                        transition: opacity .4s;
                                    }
                                    &-active::after { opacity: 1; }
                                    &>img {
                                    }
                                }
                            }

                            .labels {
                                color: $themetextcolor;
                                @include ff_ja(noto);
                                @include f_all(14);
                                font-weight: bold;
                                line-height: 1;
                                display: flex;
                                flex-wrap: wrap;
                                gap: 10px;
                                .label {
                                    display: inline-flex;
                                    align-items: center;
                                    justify-content: center;
                                    background-color: $accentcolor;
                                    padding: 0 12px 1px;
                                    box-sizing: border-box;
                                    min-height: 25px;
                                    position: relative;
                                    &.pop1 { background-color: $themecolor3; }
                                    &.pop2 { background-color: #999; }
                                    &.pop3 { background-color: #C59982; }
                                    &.pop4 { background-color: $themecolor2; }

                                    // 売上ラベル
                                    &.sales {
                                        @include f_all(13);
                                        padding-left: 8px;
                                        background-color: $themecolor;
                                        &::before{
                                            flex-shrink: 0;
                                            content: '';
                                            display: inline-block;
                                            width: 14px;
                                            height: 10px;
                                            background: url(../images/label_sales.svg) no-repeat center/contain;
                                            margin-right: 4px;
                                        }
                                        &.sales1 {
                                            &::before { background-image: url(../images/label_sales_no1.svg); }
                                        }
                                        &.sales2 {
                                            &::before { background-image: url(../images/label_sales_no2.svg); }
                                        }
                                        &.sales3 {
                                            &::before { background-image: url(../images/label_sales_no3.svg); }
                                        }
                                    }

                                    // オススメ商品
                                    &.recommend {
                                        @include f_all(13);
                                        padding-left: 8px;
                                        background-color: $themecolor;
                                        &::before{
                                            flex-shrink: 0;
                                            content: '';
                                            display: inline-block;
                                            width: 14px;
                                            height: 13px;
                                            background: url(../images/label-recommend.svg) no-repeat center/contain;
                                            margin-right: 4px;
                                        }
                                    }
                                }
                            }

                            .leadtext {
                                @include ff_ja(noto);
                                @include f_all(18);
                                @include maxwidth(768) {
                                    @include f_all(16);
                                }
                                font-weight: bold;
                                line-height: 1.5;
                            }
                            
                            .text {
                                @include ff_ja(noto);
                                @include f_all(14);
                                font-weight: 500;
                                line-height: 1.8;
                                margin-top: 12px;
                            }

                            .taxs {
                                padding: 20px;
                                box-sizing: border-box;
                                background-color: #fff;
                                position: relative;
                                @include maxwidth(768) {
                                    padding-left: 15px;
                                    padding-right: 15px;
                                }
                                .tax {
                                    display: flex;
                                    align-items: flex-start;
                                    gap: 15px;
                                    &:not(:first-of-type) { margin-top: 5px; }
                                    @include maxwidth(768) {
                                        gap: 10px;
                                    }
                                    .title {
                                        flex-shrink: 0;
                                        @include ff_ja(noto);
                                        @include f_all(14);
                                        font-weight: bold;
                                        line-height: 1;
                                        display: inline-flex;
                                        align-items: center;
                                        padding-top: .05em;
                                        gap: 15px;
                                        @include maxwidth(768) {
                                            @include f_all(13);
                                            gap: 10px;
                                        }
                                        &::after{
                                            content: '';
                                            display: inline-block;
                                            width: 10px;
                                            height: 2px;
                                            background-color: #999;
                                            margin-top: 0.1em;
                                        }
                                    }
                                    .terms {
                                        color: $themetextcolor;
                                        @include ff_ja(noto);
                                        @include f_all(13);
                                        font-weight: bold;
                                        line-height: 1;
                                        display: flex;
                                        flex-wrap: wrap;
                                        gap: 8px;
                                        .term {
                                            display: inline-flex;
                                            align-items: center;
                                            justify-content: center;
                                            padding: 0.2em 8px 0.25em;
                                            box-sizing: border-box;
                                            background-color: $themecolor;
                                            min-height: 20px;
                                            position: relative;
                                        }
                                    }
                                }
                            }

                        }
                    } // .product-columns

                    .c-contact-buttons {
                        .c-contact-button {
                            &:not(:first-of-type) { margin-top: 10px; }
                            &__link {
                                color: $themetextcolor;
                                text-decoration: none;
                                @include ff_ja(noto);
                                @include f_all(20);
                                line-height: 1.3;
                                font-weight: bold;
                                @include flex_centering;
                                padding: 10px;
                                background-color: $themecolor2;
                                min-height: 120px;
                                box-sizing: border-box;
                                position: relative;
                                @include maxwidth(768) {
                                    @include f_all(18);
                                    min-height: 100px;
                                }
                                &.tel {
                                    @include f_all(14);
                                    flex-direction: column;
                                    .telnum {
                                        display: inline-flex;
                                        align-items: center;
                                        gap: .45em;
                                        strong {
                                            font-size: 2.285em;
                                            padding-bottom: .10em;
                                            @include maxwidth(768) {
                                                font-size: 2.14em;
                                            }
                                        }
                                    }
                                    .teltime {
                                        @include maxwidth(768) {
                                            @include f_all(12);
                                        }
                                    }
                                }
                                &.form {
                                    &::before, &::after {
                                        content: '';
                                        display: inline-block;
                                        background-size: contain;
                                        background-position: center;
                                        background-repeat: no-repeat;
                                        margin-top: 0.15em;
                                    }
                                    &::before{
                                        width: 24px;
                                        height: 18px;
                                        background-image: url(../images/icon-mail-white.svg);
                                        margin-right: 14px;
                                        @include maxwidth(768) {
                                            width: 17px;
                                            height: 13px;
                                            margin-right: 8px;
                                        }
                                    }
                                    &::after{
                                        width: 5px;
                                        height: 10px;
                                        background-image: url(../images/arrow-white.svg);
                                        margin-left: 8px;
                                    }
                                    .title {
                                    }
                                }

                                &:hover { opacity: 1; }
                                @media (hover: hover) {
                                    transition: filter .4s;
                                    &:hover {
                                        filter: brightness(.85);
                                        -webkit-filter: brightness(.85);
                                    }
                                }
                            }
                        }
                    }

                }
            }
        }
    }
}

#sidebar {
    margin-top: 45px;
    &Inner {
        position: sticky;
        top: 6vh;
        .admin-bar & { top: calc(6vh + 32px); }
        left: 0;
    }
    ul {
        li {
            @include ff_ja(noto);
            @include f_all(14);
            font-weight: bold;
            line-height: 1.2;
            &:not(:first-child) { margin-top: 1px; }
            a {
                display: flex;
                align-items: center;
                background-color: #fff;
                min-height: 40px;
                padding: 0.5em 15px;
                box-sizing: border-box;
                position: relative;
                &::before{
                    content: '';
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    background-color: $themecolor3;
                    margin-right: 17px;
                }
            }
        }
    }
    .parent {
    }
    .children {
        margin-top: 1px;
        li {
            a {
                &::before{
                    height: 1px;
                    background-color: #999;
                }
            }
        }
    }
}

/* Pager */
.pager {
    text-align: center;
    margin: 40px 0;
    @include f_all(14);
    a,
    span {
        display: inline-block;
        margin: 0 0 0.25em 0.75em;
        min-width: 3em;
        padding: 1em;
        box-sizing: border-box;
        background-color: #afafb0;
        color: #fff;
    }
    .current {
        background-color: $themecolor;
    }
}
/* Archivelink */
.monthly_archive_link {
    //@include container(800, 10);
    margin-top: 50px;
    @include f_all(14);
    a.show_archive_links {
        display: block;
        width: 200px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: mix($basetextcolor, $basecolor, 0.1);
        margin: auto;
        border-radius: 30px;
        position: relative;
        &:after {
            content: ">";
            display: inline-block;
            transform: rotateZ(90deg) scaleX(0.5);
            position: absolute;
            right: 30px;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    }
    ul {
        margin-top: 20px;
        display: none;
        &.show { display: flex; }
        justify-content: center;
        flex-wrap: wrap;
        li {
            margin: 0 5px 10px;
            flex: 0 0 113px;
            text-align: center;
            a {
                display: block;
                background-color: mix($basetextcolor, $basecolor, 0.05);
                padding: 7px 0;
                border-radius: 15px;
            }
        }
    }
}

.lineup-terms {
    @include ff_ja(noto);
    font-weight: bold;
    @include f_all(14);
    display: flex;
    gap: 25px;
    position: relative;
    @include maxwidth(768) {
        gap: 0;
    }
    .subpage & { margin-bottom: 30px; }
    &.js-trigger { // スクロールエフェクトを付与
        ul li {
            opacity: 0;
            transition: 1.2s;
        }
        &.js-trigger-active ul li {
            opacity: 1;
            @for $i from 0 to 25 {
                &:nth-child(#{$i + 1}) {
                    transition-delay: #{$i * .1s};
                }
            }
        }
    }
    .title {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 15px;
        &::after{
            content: '';
            display: inline-block;
            width: 10px;
            height: 2px;
            background-color: #999999;
        }
        @include maxwidth(768) {
            color: $themetextcolor;
            padding: 13px;
            box-sizing: border-box;
            background-color: $themecolor;
            &::after { display: none; }
            &>span {
                display: inline-block;
                width: 1em;
                writing-mode: vertical-rl;
            }
        }
    }
    ul {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        @include maxwidth(768) {
            gap: 8px;
            padding: 5px 15px;
            box-sizing: border-box;
        }
        li {
            a {
                @include flex_centering;
                padding: 0 12px;
                box-sizing: border-box;
                min-height: 25px;
                background-color: $themetextcolor;
                position: relative;
                &.current {
                    color: $themetextcolor;
                    background-color: $accentcolor;
                    gap: 3px;
                    &::before{
                        content: '';
                        display: inline-block;
                        width: 4px;
                        height: 4px;
                        background-color: currentColor;
                        border-radius: 9999px;
                    }
                }
            }
        }
    }
}