// スタイルシート 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;
}

// z-index
$zindex_header: 13;
$zindex_gnavtoggle: 100;

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

@mixin triangle($width, $height, $direction: right, $color: currentColor) {
    width: 0;
    height: 0;
    border-style: solid;

    @if $direction == top {
        border-color: transparent transparent $color transparent;
        border-width: 0 ($width / 2) $height ($width / 2);
    }

    @if $direction == right {
        border-color: transparent transparent transparent $color;
        border-width: ($height / 2) 0 ($height / 2) $width;
    }

    @if $direction == bottom {
        border-color: $color transparent transparent transparent;
        border-width: $height ($width / 2) 0 ($width / 2);
    }

    @if $direction == left {
        border-color: transparent $color transparent transparent;
        border-width: ($height / 2) $width ($height / 2) 0;
    }
}

// JavaScript
.js-parallax-elem-box {
    overflow: hidden;
    .js-parallax-elem {
        position: relative;
        img {
            display: block;
        }
    }
}
//scrollEffect
.js-scroll-object {
    opacity: 0;
    transform: translate(0, 30px);
    &._left {
        transform: translate(-10%, 0);
        @include maxwidth(800) {
            transform: translate(0, 30px);
        }
    }
    &._right {
        transform: translate(10%, 0);
        @include maxwidth(800) {
            transform: translate(0, 30px);
        }
    }
    &[data-top="already"] {
        opacity: 1;
        transform: translate(0, 0);
        transition: 0.8s;
    }
}
.js-scroll-object-continue1 {
    & > ul > li {
        opacity: 0;
        transform: translate(0, 30px);
    }
    &[data-top="already"] {
        & > ul > li {
            opacity: 1;
            transform: translate(0, 0);
            transition: 0.8s;
            @for $i from 1 through 10 {
                &:nth-child(#{$i}) {
                    transition-delay: $i * 0.2s;
                }
            }
        }
    }
}
.js-scroll-object-continue2 {
    ul li {
        opacity: 0;
        transform: translate(0, 30px);
    }
    &[data-top="already"] {
        ul li {
            opacity: 1;
            transform: translate(0, 0);
            transition: 0.8s;
            @for $i from 1 through 10 {
                &:nth-child(#{$i}) {
                    transition-delay: $i * 0.2s;
                }
            }
        }
    }
}
//scrollEffect

/* Component
==================================================================*/
// buttons //
//primary
.c-btn-primary {
    text-align: center;
    a {
        @include f_all(18, 160);
        @include fw_b;
        color: $themetextcolor;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-width: 234px;
        width: 100%;
        min-height: 60px;
        box-sizing: border-box;
        border: solid 1px $themecolor1;
        position: relative;
        &::before {
            content: "";
            display: block;
            @include triangle(8px, 14px, right, $accentcolor);
            position: absolute;
            top: 0;
            bottom: 0;
            right: 20px;
            margin: auto;
            transition: 0.3s;
        }
        &:hover {
            &:before {
                transform: translate(3px, 0);
            }
        }
    }
}
// secondary
.c-btn-secondary {
    display: inline-flex;
    align-items: center;
    width: 290px;
    @include maxwidth(480) {
        width: 246px;
    }
    min-height: 60px;
    padding-left: 30px;
    box-sizing: border-box;
    border-radius: 0 25px 0 0;
    background-color: rgba($basecolor, 0.9);
    a,
    span {
        @include f_all(20, 160);
        @include fw_b;
        color: $themetextcolor;
        display: inline-flex;
        align-items: center;
        &::after {
            content: "";
            display: inline-block;
            @include triangle(8px, 14px, right, $accentcolor);
            margin-left: 10px;
            transition: 0.3s;
        }
        &:hover {
            &:after {
                transform: translate(3px, 0);
            }
        }
    }
}
// MainVisual TopNews
.c-btn-top-news {
    a {
        @include f_all(13);
        @include maxwidth(600) {
            @include f_all(12);
        }
        color: $subtextcolor;
        @include fw_m;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px;
        min-height: 30px;
        box-sizing: border-box;
        background-color: $themecolor;
        &::after {
            content: "";
            display: inline-block;
            @include triangle(7px, 12px, right, $basecolor);
            margin-left: 0.5em;
            transition: 0.3s;
        }
        &:hover {
            &:after {
                transform: translate(3px, 0);
            }
        }
    }
}
//footer
.c-btn-form {
    @include f_all(36);
    @include fw_b;
    @include maxwidth(600) {
        @include f_all(28);
    }
    a {
        display: flex;
        align-items: center;
        &::after {
            content: "";
            display: inline-block;
            @include triangle(8px, 14px, right, $basecolor);
            margin-left: 1em;
            transition: 0.3s;
        }
        &:hover {
            &:after {
                transform: translate(3px, 0);
            }
        }
    }
}
// heading //
.c-heading {
    @include f_all(20, 160);
    @include maxwidth(600) {
        @include f_all(18, 160);
    }
    @include fw_b;
    color: $subtextcolor;
    text-align: center;
    h2 {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 15px 100px;
        box-sizing: border-box;
        min-height: 60px;
        background-color: $themecolor;
        white-space: nowrap;
        @include maxwidth(480) {
            max-width: 274px;
            padding: 0;
            width: 100%;
        }
    }
    &.u-absolute {
        position: absolute;
        top: -30px;
        margin: auto;
    }
    &.u-c-absolute {
        position: absolute;
        top: -30px;
        margin: auto;
        left: 50%;
        transform: translate(-50%, 0);
        @include maxwidth(480) {
            left: 30px;
            right: 30px;
            margin: auto;
            transform: none;
        }
    }
}
// Header + Footer MENU
.c-menu {
    width: 100%;
    @include f_all(13, 0, 24);
    @include fw_m;
    color: $subtextcolor;
    display: flex;
    align-items: flex-start;
    // flex-direction: column;
    flex-wrap: wrap;
    .menu {
        width: 100%;
        &:not(:first-child) {
            margin-top: 45px;
        }
        h2 {
            padding-bottom: 1em;
            border-bottom: solid 1px $basecolor;
            margin-bottom: 1em;
        }
        ul {
            li {
                a {
                    @include f_all(14, 0, 30);
                    display: inline-flex;
                    align-items: center;
                    &::before {
                        content: "";
                        display: inline-block;
                        margin-right: 15px;
                        @include triangle(6px, 11px, right, $basecolor);
                        transition: 0.3s;
                    }
                    &:hover {
                        &:before {
                            transform: translate(3px, 0);
                        }
                    }
                }
            }
        }
        &.menu1 {
            flex: 0 1 100%;
        }
        &.menu2 {
            flex: 0 1 100%;
            .l-menu-wrapper {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                padding-right: 24px;
                box-sizing: border-box;
                @include maxwidth(600) {
                    padding-right: 0;
                    flex-wrap: wrap;
                    margin-top: -20px;
                }
                ul {
                    @include maxwidth(600) {
                        margin-top: 20px;
                        &:not(:last-child) {
                            width: 50%;
                        }
                    }
                    li {
                        a {
                        }
                    }
                }
            }
        }
        &.menu3 {
            flex: 0 1 146px;
            margin-right: 30px;
            @include maxwidth(600) {
                flex: 0 1 100%;
                margin-right: 0;
            }
        }
        &.menu4 {
            flex: 0 1 146px;
            @include maxwidth(600) {
                flex: 0 1 100%;
            }
        }
    }
    .aside-menu {
        flex: 0 1 100%;
        margin-top: 45px;
        ul {
            display: flex;
            align-items: center;
            li {
                &:not(:last-child) {
                    margin-right: 25px;
                }
                a {
                    @include maxwidth(600) {
                        @include f_all(13, 0, 24);
                    }
                }
            }
        }
    }
}
// Gnav + Section bar
.c-bar {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 1px;
    background-color: $accentcolor;
    transition: 1s 0.3s ease-in-out;
    @include maxwidth(800) {
        width: 1px;
        height: 100%;
        top: 0 !important;
        bottom: 0 !important;
        transform-origin: top !important;
        transform: scaleY(0) !important;
    }
    &.bar-left {
        transform-origin: center left;
        transform: scaleX(0);
    }
    &.bar-right {
        transform-origin: center right;
        transform: scaleX(0);
    }
    body.menu_open & {
        transform: scaleX(1);
        @include maxwidth(800) {
            transform: scaleY(1) !important;
        }
    }
    &.js-bar {
        &[data-top="already"] {
            transform: scaleX(1);
            @include maxwidth(800) {
                transform: scaleY(1) !important;
            }
        }
    }
}

/* Utility
==================================================================*/
// 長体
.u-long-body {
    display: inline-block;
    transform: scale(0.8, 1);
    transform-origin: 0 0;
    width: 125%; //1/0.8
    // white-space: nowrap;
    &.u-c-origin {
        transform-origin: center center;
    }
    &.u-c-text-align {
        text-align: center;
    }
    &.u-100per-width {
        width: 100%;
    }
}
// Arrow Red
.btn.u-arrow {
    a,
    span {
        @include f_all(20, 160);
        color: $themecolor;
        @include fw_b;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &::after {
            content: "";
            display: inline-block;
            @include triangle(8px, 14px, right, $accentcolor);
            transition: 0.3s;
        }
    }
    &:hover {
        a,
        span {
            &::after {
                transform: translate(3px, 0);
            }
        }
    }
}
/* Site Common
==================================================================*/
#header-aside {
    height: 100%;
    .aside-box {
        height: 100%;
        .box-inner {
            height: 100%;
            #telButtonWrapper {
                flex: 0 1 auto;
                padding: 0 15px;
                background-color: $themecolor3;
                height: 100%;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                @include maxwidth(420) {
                    padding: 0 6px;
                }
                #telButton {
                    .tel {
                        a {
                            display: flex;
                            align-items: center;
                            span.shop {
                                @include f_all(13);
                                @include fw_b;
                                color: $subtextcolor;
                                display: inline-flex;
                                align-items: center;
                                justify-content: center;
                                width: 55px;
                                min-height: 20px;
                                padding-bottom: 1px;
                                box-sizing: border-box;
                                background-color: $themecolor;
                                margin-right: 10px;
                                @include maxwidth(420) {
                                    @include f_all(12);
                                    width: 45px;
                                    right: 5px;
                                }
                            }
                            span.tel-num {
                                @include f_all(20);
                                white-space: nowrap;
                                @include maxwidth(420) {
                                    @include f_all(17);
                                }
                                color: $themetextcolor;
                                @include fw_b;
                            }
                        }
                        &.tel1 {
                        }
                        &.tel2 {
                            margin-top: 6px;
                        }
                    }
                }
            }
            #lineButtonWrapper {
                flex: 0 0 60px;
                height: 100%;
                #lineButton {
                    a {
                        display: inline-flex;
                        justify-content: center;
                        flex-direction: column;
                        width: 60px;
                        min-height: 60px;
                        background-color: #00b900;
                        text-align: center;

                        .icon {
                            img {
                            }
                        }
                        span.text {
                            display: block;
                            @include f_all(12);
                            @include fw_b;
                            margin-top: 8px;
                            color: $subtextcolor;
                            text-align: center;
                            text-transform: uppercase;
                        }
                    }
                }
            }
            #mailButtonWrapper {
                flex: 0 0 60px;
                height: 100%;
                #mailButton {
                    a {
                        display: inline-flex;
                        justify-content: center;
                        flex-direction: column;
                        width: 60px;
                        min-height: 60px;
                        background-color: $themecolor;
                        text-align: center;

                        .icon {
                            img {
                            }
                        }
                        span.text {
                            display: block;
                            @include f_all(12);
                            @include fw_b;
                            margin-top: 8px;
                            color: $subtextcolor;
                            text-align: center;
                            text-transform: uppercase;
                        }
                    }
                }
            }
            #instaButtonWrapper {
                flex: 0 0 60px;
                height: 100%;
                #instaButton {
                    a {
                        display: inline-flex;
                        justify-content: center;
                        flex-direction: column;
                        width: 60px;
                        min-height: 60px;
                        text-align: center;
                        background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
                        background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
                        overflow: hidden;
                        position: relative;
                        z-index: 0;
                        padding-top: 1px;
                        box-sizing: border-box;

                        &::before {
                            content: '';
                            z-index: -1;
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
                        }

                        .icon {
                            img {
                                width: 22px;
                            }
                        }
                        span.text {
                            display: block;
                            @include f_all(12);
                            @include fw_b;
                            margin-top: 8px;
                            color: $subtextcolor;
                            text-align: center;
                        }
                    }
                }
            }
            #gnavToggleWrapper {
                flex: 0 0 60px;
                height: 100%;
                transition: 0.3s;
                body.menu_open & {
                    opacity: 0;
                }
                #gnavToggle {
                    a {
                        display: inline-block;
                        width: 60px;
                        min-height: 60px;
                        background-color: $accentcolor;
                        position: relative;
                        span {
                            display: block;
                        }
                        span.b {
                            width: 24px;
                            height: 3px;
                            background: #fff;
                            @include absolute_centering;
                            transition: all 0.3s;
                            &.b1 {
                                transform: translate(0, -16px);
                            }
                            &.b2 {
                                transform: translate(0, -8px);
                            }
                            &.b3 {
                            }
                        }
                        span.b4 {
                            position: absolute;
                            bottom: 10px;
                            left: 0;
                            right: 0;
                            margin: auto;
                            text-align: center;
                            &::before {
                                content: "Menu";
                                display: block;
                                @include f_all(12);
                                @include fw_b;
                                color: #fff;
                                text-align: center;
                                text-transform: uppercase;
                            }
                        }
                    }
                }
            }
        }
    }
}
header {
    #header {
        position: relative;
        z-index: $zindex_header;
        .container {
            @include container(1140, 20);
            padding: 34px 0 37px;
            @include maxwidth(600) {
                padding: 20px 0 25px;
            }
            &::before {
                content: "";
                display: block;
                height: 8px;
                background-color: $themecolor;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            .outline {
                @include f_all(14);
                @include fw_b;
                color: $themetextcolor;
                text-align: center;
                @include maxwidth(600) {
                    @include f_all(11, 0, 20);
                    text-align-last: left;
                }
                br {
                    display: none;
                    @include maxwidth(600) {
                        display: block;
                    }
                }
            }
            .l-header {
                margin-top: 20px;
                display: flex;
                align-items: center;
                height: 60px;
                @include maxwidth(600) {
                    margin-top: 17px;
                    display: block;
                    height: auto;
                }
                .item {
                    height: 100%;
                    @include maxwidth(600) {
                        height: 53px;
                    }
                    &.item1 {
                        flex: 0 1 35%;
                        @include maxwidth(1180) {
                            flex: 0 1 50%;
                        }
                        @include maxwidth(600) {
                            margin-left: -20px;
                        }
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: $themecolor3;
                        padding: 0 10px;
                        .logo {
                            img {
                                width: 338px;
                                @include maxwidth(800) {
                                    width: 290px;
                                }
                            }
                        }
                    }
                    &.item2 {
                        flex: 0 1 35%;
                        @include maxwidth(1180) {
                            flex: 0 1 50%;
                        }
                        @include maxwidth(600) {
                            margin: 10px -20px 0;
                        }
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: $themecolor;
                        padding: 0 10px;
                        .sitename {
                            h1 {
                                a {
                                    img {
                                        width: 336px;
                                        @include maxwidth(800) {
                                            width: 277px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    &.item3 {
                        flex: 0 1 30%;
                        @include maxwidth(1180) {
                            flex: 0 1 0;
                            // display: none;
                        }
                        @include maxwidth(800) {
                            display: none;
                        }
                        #header-aside {
                            // @include maxwidth(800) {
                            //     position: fixed;
                            //     left: 0;
                            //     right: 0;
                            //     bottom: 0;
                            //     height: 60px;
                            //     width: 100%;
                            // }
                            .aside-box {
                                .box-inner {
                                    display: flex;
                                    align-items: center;
                                    #telButtonWrapper {
                                        @include maxwidth(1180) {
                                            display: none;
                                        }
                                        // @include maxwidth(800) {
                                        //     display: flex;
                                        //     flex: 0 1 calc(100% - 120px);
                                        // }
                                        #telButton {
                                            .tel {
                                                a {
                                                    span.shop {
                                                    }
                                                    span.tel-num {
                                                    }
                                                }
                                                &.tel1 {
                                                }
                                                &.tel2 {
                                                }
                                            }
                                        }
                                    }
                                    #lineButtonWrapper {
                                        @include maxwidth(1180) {
                                            display: none;
                                        }
                                        // @include maxwidth(800) {
                                        //     display: block;
                                        // }
                                        #lineButton {
                                            a {
                                                .icon {
                                                    img {
                                                    }
                                                }
                                                p.text {
                                                }
                                            }
                                        }
                                    }
                                    #mailButtonWrapper {
                                        @include maxwidth(1180) {
                                            display: none;
                                        }
                                        // @include maxwidth(800) {
                                        //     display: block;
                                        // }
                                        #mailButton {
                                            a {
                                                .icon {
                                                    img {
                                                    }
                                                }
                                                p.text {
                                                }
                                            }
                                        }
                                    }
                                    #instaButtonWrapper {
                                        @include maxwidth(1180) {
                                            display: none;
                                        }
                                    }
                                    #gnavToggleWrapper {
                                        height: 100%;
                                        @include maxwidth(1180) {
                                            display: none;
                                        }
                                        @media screen and (max-height: 450px) and (min-width: 801px) {
                                            body.menubutton_scrollout & {
                                                display: block;
                                                position: fixed;
                                                top: 20px;
                                                right: 25px;
                                            }
                                        }
                                        // @include maxwidth(800) {
                                        //     display: block;
                                        // }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
#gnav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 20;
    background-color: rgba($themecolor3, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    body.menu_open & {
        opacity: 1;
        visibility: visible;
    }
    nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow: auto;
        @include maxwidth(800) {
            padding: 50px 0;
            box-sizing: border-box;
        }
        position: relative;
        .c-bar {
            &.bar-left {
                top: 12%;
            }
            &.bar-right {
                bottom: 12%;
            }
        }
        .l-header-menu {
            max-width: 800px;
            padding: 40px 100px;
            margin: 0 20px;
            box-sizing: border-box;
            background-color: rgba($themecolor, 0.8);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            opacity: 0;
            visibility: hidden;
            transition: 0.3s 0.3s ease-in-out;
            @include maxwidth(800) {
                padding: 60px 30px;
            }
            body.menu_open & {
                opacity: 1;
                visibility: visible;
            }
            position: relative;
            a.gnav-close {
                width: 45px;
                height: 45px;
                background-color: $themecolor3;
                position: absolute;
                top: 20px;
                right: 20px;
                &::before,
                &::after {
                    content: "";
                    width: 25px;
                    height: 2px;
                    background-color: $accentcolor;
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    margin: auto;
                }
                &::before {
                    transform: rotate(45deg);
                }
                &::after {
                    transform: rotate(-45deg);
                }
            }
            .menu {
                h2 {
                }
                ul {
                    li {
                        a {
                            &:before {
                            }
                        }
                    }
                }
                &.menu1 {
                }
                &.menu2 {
                    .l-menu-wrapper {
                        ul {
                            li {
                                a {
                                    &:before {
                                    }
                                }
                            }
                        }
                    }
                }
                &.menu3 {
                }
                &.menu4 {
                }
            }
            .aside-menu {
            }
        }
    }
}
aside {
    #aside {
        position: fixed;
        top: 50%;
        right: -230px;
        @media screen and (max-height: 625px) {
            right: -105px;
        }
        margin: auto;
        z-index: 15;
        transform: translate(0, -50%) rotateZ(-90deg);
        opacity: 0;
        visibility: hidden;
        body.menubutton_scrollout & {
            opacity: 1;
            visibility: visible;
        }
        @include maxwidth(800) {
            position: fixed;
            top: auto;
            left: 0;
            bottom: 0;
            right: 0;
            transform: none;
            width: 100%;
            opacity: 1;
            visibility: visible;
        }
        @media screen and (max-height: 450px) and (min-width: 801px) {
            display: none;
        }
        .aside-inner {
            width: 620px;
            @media screen and (max-height: 625px) {
                width: 370px;
            }
            @include maxwidth(800) {
                width: 100%;
            }
            height: 60px;
            display: flex;
            align-items: center;
            .aside-sitename-en {
                flex: 0 0 250px;
                height: 100%;
                @include maxwidth(800) {
                    display: none;
                }
                @media screen and (max-height: 625px) {
                    display: none;
                }
                a {
                    height: 100%;
                    display: inline-block;
                    background-color: $themecolor;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img {
                        height: 25px;
                        -ms-interpolation-mode: nearest-neighbor; /* IE8+ */
                        image-rendering: -webkit-optimize-contrast; /* Safari (WebKit) */
                        image-rendering: -moz-crisp-edges; /* Firefox (Gecko) */
                        image-rendering: -o-crisp-edges; /* Opera 12.x */
                        image-rendering: pixelated; /* Chrome 41+, Opera 29+ (CSS4) */
                    }
                }
            }
            #header-aside {
                @include maxwidth(800) {
                    width: 100%;
                }
                .aside-box {
                    .box-inner {
                        display: flex;
                        align-items: center;
                        @include maxwidth(374) {
                        }
                        #telButtonWrapper {
                            flex: 0 0 250px;
                            box-sizing: border-box;
                            @include maxwidth(800) {
                                flex: 0 1 calc(100% - 120px);
                            }
                            #telButton {
                                .tel {
                                    a {
                                        span.shop {
                                            & > span {
                                            }
                                        }
                                        span.tel-num {
                                        }
                                    }
                                    &.tel1 {
                                    }
                                    &.tel2 {
                                    }
                                }
                            }
                        }
                        #mailButtonWrapper,#lineButtonWrapper, #instaButtonWrapper {
                            transform: rotate(90deg);
                            @include maxwidth(800) {
                                transform: none;
                            }
                            #mailButton,#lineButton,#instaButton {
                                a {
                                    backface-visibility: hidden;
                                    -webkit-backface-visibility: hidden;
                                    -webkit-font-smoothing: antialiased;
                                    -moz-osx-font-smoothing: grayscale;
                                    .icon {
                                        img {
                                            -ms-interpolation-mode: nearest-neighbor; /* IE8+ */
                                            image-rendering: -webkit-optimize-contrast; /* Safari (WebKit) */
                                            image-rendering: -moz-crisp-edges; /* Firefox (Gecko) */
                                            image-rendering: -o-crisp-edges; /* Opera 12.x */
                                            image-rendering: pixelated; /* Chrome 41+, Opera 29+ (CSS4) */
                                        }
                                    }
                                    span.text {
                                    }
                                }
                            }
                        }
                        #gnavToggleWrapper {
                            transform: rotate(90deg);
                            @include maxwidth(800) {
                                transform: none;
                            }
                            #gnavToggle {
                                a {
                                    backface-visibility: hidden;
                                    -webkit-backface-visibility: hidden;
                                    -webkit-font-smoothing: antialiased;
                                    -moz-osx-font-smoothing: grayscale;
                                    span.b {
                                    }
                                    span.b4 {
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
#mainVisual {
    position: relative;
    .container {
        .visual {
            padding-bottom: 165px;
            position: relative;
            @include maxwidth(800) {
                padding-bottom: 100px;
            }
            .bgimage {
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: 1;
                width: calc((876 / 1920) * 100vw);
                @include maxwidth(800) {
                    width: calc((312 / 375) * 100vw);
                }
                .p-slides {
                    // 縦並び解消
                    opacity: 0;
                    &.slick-initialized {
                        opacity: 1;
                    }
                    .p-slider {
                        .frame {
                            span.inner {
                                img {
                                    height: 100%;
                                    height: calc((800 / 1920) * 100vw);
                                    @include maxwidth(800) {
                                        height: calc((284 / 375) * 100vw);
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .slides {
                .slider {
                    .frame {
                        width: 82%;
                        position: relative;
                        @include maxwidth(800) {
                            width: calc(100% - 20px);
                        }
                        &::before {
                            content: "";
                            display: block;
                            @include absolute_centering;
                            background-color: rgba($basecolor, 0.45);
                        }
                        img {
                            width: 100%;
                            height: 100%;
                            min-height: 742px;
                            object-fit: cover;
                            @include maxwidth(800) {
                                min-height: calc((400 / 375) * 100vw);
                            }
                        }
                    }
                }
            }
        }
        #top-news {
            position: absolute;
            left: 0;
            bottom: 112px;
            background-color: $basecolor;
            width: calc((960 / 1920) * 100vw);
            min-height: 122px;
            z-index: 2;
            @include maxwidth(1024) {
                position: static;
                width: 100%;
                background-color: $themecolor3;
            }
            @include maxwidth(800) {
                margin-bottom: 60px;
            }
            .top-news-inner {
                padding: 15px 15px 20px;
                box-sizing: border-box;
                max-width: 490px;
                width: 100%;
                margin-left: auto;
                margin-right: 0;
                @include maxwidth(1024) {
                    margin-right: auto;
                    padding: 20px 20px 23px 20px;
                    max-width: 600px;
                }
                .top-news-head {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    h2 {
                        $top-news-color: #707070;
                        @include f_all(14);
                        color: $top-news-color;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        width: 114px;
                        min-height: 43px;
                        box-sizing: border-box;
                        border: solid 1px $top-news-color;
                        @include maxwidth(600) {
                            width: 100px;
                            @include f_all(12);
                        }
                    }
                    .btn-area {
                        a {
                        }
                    }
                }
                .top-news-body {
                    margin-top: 15px;
                    ul{
                        li{
                            &:nth-child(2){
                                margin-top: 8px;
                            }
                        }
                    }
                    a {
                        display: flex;
                        align-items: flex-start;
                        @include f_all(14, 0, 17);
                        @include maxwidth(600) {
                            @include f_all(12, 0, 15);
                        }
                        span.date {
                            margin-right: 1em;
                        }
                        span.title {
                        }
                    }
                }
            }
        }
        #overlay {
            position: absolute;
            top: 118px;
            left: 23%;
            z-index: 3;
            @include maxwidth(1024) {
                left: 10%;
            }
            @include maxwidth(800) {
                position: static;
            }
            .overlay-inner {
                writing-mode: vertical-rl;
                @include maxwidth(800) {
                    max-width: 306px;
                    width: 100%;
                    margin: 0 auto;
                }
                @include maxwidth(600) {
                    max-width: 270px;
                }
                .t1 {
                    @include f_all(56, 0, 75);
                    font-weight: 800;
                    @include maxwidth(800) {
                        position: absolute;
                        top: 40px;
                        left: calc((32 / 800) * 100%);
                        writing-mode: horizontal-tb;
                        width: 100%;
                    }
                    @include maxwidth(600) {
                        @include f_all(39, 0, 54);
                    }
                    span.a {
                        color: $accentcolor;
                    }
                }
                .t2 {
                    margin-right: 60px;
                    @include f_all(15, 800, 34);
                    // @include fw_m;
                    @include maxwidth(800) {
                        margin-right: 0;
                    }
                    @include maxwidth(600) {
                        @include f_all(13, 800, 30);
                    }
                }
                #header-scroll {
                    display: none;
                    @include maxwidth(800) {
                        writing-mode: horizontal-tb;
                        display: block;
                        position: absolute;
                        top: 280px;
                        left: calc((32 / 800) * 100%);
                        z-index: 3;
                    }
                    @include maxwidth(600) {
                        top: 220px;
                    }
                    a {
                        @include maxwidth(800) {
                            @include f_all(13);
                            @include fw_b;
                            color: $subtextcolor;
                            display: inline-flex;
                            align-items: center;
                            padding: 7px 10px;
                            box-sizing: border-box;
                            background-color: $accentcolor;
                            &::after {
                                content: "";
                                display: inline-block;
                                @include triangle(8px, 14px, right, $basecolor);
                                transform: rotate(90deg);
                                margin-left: 1.15em;
                                transition: 0.3s;
                            }
                            &:hover {
                                &::after {
                                    transform: translate(0, 3px) rotate(90deg);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
#contentFooter {
    background-color: $basecolor;
    position: relative;
    z-index: 1;
    &::before,
    &::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    &::before {
        background-color: #dbdbdb;
        height: 50%;
        @include maxwidth(800) {
            height: 85%;
        }
    }
    &::after {
        background-color: rgba($themecolor2, 0.25);
        bottom: 0;
    }
    #contentFooterContact {
        background: center left / 1093px auto no-repeat;
        @include maxwidth(800) {
            background-position: bottom 90px right calc((-200 / 375) * 100vw);
            background-size: calc((589 / 375) * 100%);
        }
        position: relative;
        z-index: 1;
        .container {
            padding: 120px 0 111px;
            @include container(1140, 20);
            @include maxwidth(800) {
                padding-bottom: calc((400 / 375) * 100vw);
            }
            @include maxwidth(600) {
                padding-top: 95px;
            }
            .c-heading.heading {
                right: calc((200 / 1140) * 100%);
                @include maxwidth(800) {
                    left: 50%;
                    right: auto;
                    margin: auto;
                    transform: translate(-50%, 0);
                }
                @include maxwidth(480) {
                    left: 0;
                    right: 0;
                    transform: none;
                    h2 {
                        transform-origin: center center !important;
                    }
                }
            }
            .items {
                .item {
                    &:not(:first-child) {
                        margin-top: 73px;
                        @include maxwidth(600) {
                            margin-top: 60px;
                        }
                    }
                    .box {
                        max-width: 726px;
                        width: 100%;
                        border-radius: 0 25px 0 0;
                        margin-left: auto;
                        margin-right: 0;
                        .box-inner {
                            min-height: 192px;
                            position: relative;
                        }
                    }
                    &.item1 {
                        .box {
                            background-color: $accentcolor;
                            .box-inner {
                                color: $subtextcolor;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                flex-direction: column;
                                background: center left 50px / 224px auto no-repeat;
                                @include maxwidth(600) {
                                    background: center left -20px / 224px auto no-repeat;
                                }
                                h3 {
                                    @include f_all(18);
                                    @include fw_b;
                                    text-transform: uppercase;
                                    @include maxwidth(600) {
                                        @include f_all(14);
                                    }
                                }
                                .btn-area {
                                    margin-top: 15px;
                                    .form {
                                    }
                                }
                                p.text {
                                    @include f_all(14, 0, 27);
                                    @include fw_m;
                                    margin-top: 20px;
                                    @include maxwidth(600) {
                                        @include f_all(13, 0, 26);
                                    }
                                }
                            }
                        }
                    }
                    &.item2,
                    &.item3 {
                        .box {
                            background-color: $themecolor3;
                            .box-inner {
                                .head {
                                    @include f_all(16, 160);
                                    color: $subtextcolor;
                                    @include fw_b;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    width: 266px;
                                    height: 60px;
                                    border-radius: 25px 25px 0 0;
                                    background-color: $themecolor;
                                    position: absolute;
                                    top: -30px;
                                    left: 0;
                                    @include maxwidth(600) {
                                        width: 211px;
                                        @include f_all(15, 160);
                                    }
                                }
                                .body {
                                    padding-top: 60px;
                                    padding: 60px 30px 35px;
                                    box-sizing: border-box;
                                    @include maxwidth(600) {
                                        padding-left: 25px;
                                        padding-right: 25px;
                                    }
                                    .subbody {
                                        display: flex;
                                        align-items: center;
                                        @include maxwidth(769) {
                                            display: block;
                                        }
                                        .tel-button {
                                            margin-right: 78px;
                                            @include maxwidth(769) {
                                                margin-right: 0;
                                            }
                                            a {
                                                display: inline-flex;
                                                align-items: center;
                                                flex-wrap: wrap;
                                                span.icon {
                                                    margin-right: 8px;
                                                    img {
                                                        width: 35px;
                                                    }
                                                }
                                                span.tel-num {
                                                    @include f_all(28);
                                                    @include fw_b;
                                                    color: $themetextcolor;
                                                    @include maxwidth(600) {
                                                        @include f_all(24);
                                                    }
                                                }
                                            }
                                        }
                                        .map-area {
                                            display: inline-flex;
                                            align-items: center;

                                            @include maxwidth(769) {
                                                margin-top: 20px;
                                            }
                                            @include maxwidth(480) {
                                            }
                                            .icon {
                                                margin-right: 15px;
                                                // @include maxwidth(769) {
                                                //     margin-right: 0;
                                                // }
                                                img {
                                                    width: 23px;
                                                }
                                            }
                                            .detail {
                                                display: inline-flex;
                                                align-items: center;
                                                @include maxwidth(480) {
                                                    display: block;
                                                }
                                                p.address {
                                                    @include f_all(14, 0, 22);
                                                    @include fw_m;
                                                    color: $themetextcolor;
                                                    margin-right: 15px;
                                                    @include maxwidth(480) {
                                                        margin-right: 0;
                                                    }
                                                }
                                                .btn-area {
                                                    @include maxwidth(480) {
                                                        margin-top: 7px;
                                                    }
                                                    .map-btn {
                                                        @include f_all(11);
                                                        color: $subtextcolor;
                                                        @include fw_b;
                                                        text-transform: uppercase;
                                                        a {
                                                            display: inline-flex;
                                                            align-items: center;
                                                            justify-content: center;
                                                            width: 63px;
                                                            min-height: 22px;
                                                            padding: 0 10px;
                                                            box-sizing: border-box;
                                                            background-color: $accentcolor;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    .tel-time {
                                        @include f_all(14, 0, 22);
                                        @include maxwidth(600) {
                                            @include f_all(13, 0, 22);
                                        }
                                        @include fw_m;
                                        color: $themetextcolor;
                                        text-align: center;
                                        margin-top: 25px;
                                        @include maxwidth(480) {
                                            text-align: left;
                                        }
                                        br {
                                            display: none;
                                            @include maxwidth(480) {
                                                display: block;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    &.item2 {
                        .box {
                            .box-inner {
                                .heading {
                                    h3 {
                                    }
                                }
                                .body {
                                    .subbody {
                                        .tel-button {
                                            a {
                                                span.icon {
                                                }
                                                span.tel-num {
                                                }
                                            }
                                        }
                                        .map-area {
                                            .icon {
                                                img {
                                                }
                                            }
                                            p.address {
                                            }
                                            .map-btn {
                                                a {
                                                }
                                            }
                                        }
                                    }
                                    .tel-time {
                                    }
                                }
                            }
                        }
                    }
                    &.item3 {
                        .box {
                            .box-inner {
                                .heading {
                                    h3 {
                                    }
                                }
                                .body {
                                    .subbody {
                                        .tel-button {
                                            a {
                                                span.icon {
                                                }
                                                span.tel-num {
                                                }
                                            }
                                        }
                                        .map-area {
                                            .icon {
                                                img {
                                                }
                                            }
                                            p.address {
                                            }
                                            .map-btn {
                                                a {
                                                }
                                            }
                                        }
                                    }
                                    .tel-time {
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
footer {
    #footer {
        padding: 117px 0 25px;
        background-color: $themecolor1;
        position: relative;
        z-index: 5;
        @include maxwidth(800) {
            padding-bottom: 85px;
        }
        .container {
            color: $subtextcolor;
            @include container(1140, 20);
            display: flex;
            align-items: flex-start;
            @include maxwidth(1280) {
                flex-wrap: wrap;
                flex-direction: column;
            }
            flex-wrap: wrap;
            .l-footer-detail {
                max-width: 485px;
                width: 100%;
                padding: 38px 25px 48px;
                box-sizing: border-box;
                background-color: $themecolor;
                margin: -160px 75px 0 0;
                @include maxwidth(1280) {
                    margin-left: auto;
                    margin-right: auto;
                }
                .l-detail-inner {
                    max-width: 288px;
                    width: 100%;
                    margin: 0 auto;
                    .sitename {
                        text-align: center;
                        a {
                            .logo {
                                img {
                                    width: 115px;
                                    @include maxwidth(600) {
                                        width: 92px;
                                    }
                                }
                            }
                            .ja {
                                padding-top: 35px;
                                @include maxwidth(600) {
                                    padding-top: 27px;
                                }
                                img {
                                    width: 210px;
                                    @include maxwidth(600) {
                                        width: 170px;
                                    }
                                }
                            }
                            .en {
                                padding-top: 10px;
                                @include maxwidth(600) {
                                    padding-top: 11px;
                                }
                                img {
                                    width: 87px;
                                    @include maxwidth(600) {
                                        width: 70px;
                                    }
                                }
                            }
                        }
                    }
                    .footer-address {
                        margin-top: 35px;
                        @include maxwidth(600) {
                            margin-top: 30px;
                        }
                        .item {
                            @include f_all(13, 0, 24);
                            &:not(:first-child) {
                                margin-top: 30px;
                            }
                            h2 {
                                box-sizing: border-box;
                                padding-bottom: 0.8em;
                                margin-bottom: 0.8em;
                                border-bottom: solid 1px $basecolor;
                            }
                            p {
                            }
                            &.item1 {
                                h2 {
                                }
                                p {
                                }
                            }
                            &.item2 {
                                h2 {
                                }
                                p {
                                }
                            }
                        }
                    }
                }
            }
            .l-footer-menu {
                max-width: 580px;
                @include maxwidth(1280) {
                    margin: 45px auto 0;
                }
                .menu {
                    &:not(:first-child) {
                    }
                    h2 {
                    }
                    ul {
                        li {
                            a {
                                &::before {
                                }
                                &:hover {
                                    &:before {
                                    }
                                }
                            }
                        }
                    }
                    &.menu1 {
                    }
                    &.menu2 {
                    }
                    &.menu3 {
                    }
                    &.menu4 {
                    }
                }
                .aside-menu {
                    @include maxwidth(1280) {
                        margin-top: 100px;
                        ul {
                            justify-content: center;
                        }
                    }
                }
                #copyRight {
                    margin-top: 111px;
                    @include maxwidth(1280) {
                        flex: 0 1 100%;
                        text-align: center;
                    }
                    @include maxwidth(600) {
                        margin-top: 80px;
                    }
                    p {
                        @include f_all(11);
                    }
                }
            }
        }
    }
}

/* Top Page
==================================================================*/
#content {
    body.subpage & {
        &::before,
        &::after {
            content: "";
            display: block;
            width: calc((180 / 1920) * 100%);
            position: absolute;
            top: 0;
            bottom: 0;
            @include maxwidth(1024) {
            }
        }
        &::before {
            left: 0;
            background-color: $themecolor;
            @include maxwidth(1024) {
                // background-color: rgba($themecolor, 0.25);
                background-image:linear-gradient(to right,$themecolor 0%,$themecolor 10px,#fff 10px,#fff 100%);
            }
        }
        &::after {
            right: 0;
            background-color: $themecolor3;
            @include maxwidth(1024) {
                background-color: rgba($themecolor3, 0.25);
            }
        }
    }

    .common-section-01 {
        .container {
            @include container(1140);
            .box {
                max-width: 820px;
                width: 100%;
                background-color: rgba($themecolor1, 0.65);
                .box-inner {
                    padding: 74px 47px 48px;
                    box-sizing: border-box;
                    position: relative;
                    @include maxwidth(600) {
                        padding: 50px 30px;
                    }
                    .heading {
                    }
                    .body {
                        p.text {
                            max-width: 540px;
                            width: 100%;
                            margin: auto;
                            @include f_all(14, 0, 27);
                            @include fw_m;
                            color: $subtextcolor;
                        }
                        .cards {
                            margin-top: 35px;
                            display: flex;
                            align-items: flex-start;
                            flex-wrap: wrap;
                            @include maxwidth(800) {
                                flex-direction: column;
                            }
                            @include maxwidth(600) {
                                margin-top: 20px;
                            }
                            .card {
                                flex: 0 1 calc((100% - 30px) / 3);
                                border-radius: 0 25px 0 0;
                                background-color: $themecolor3;
                                &:not(:nth-child(3n)) {
                                    margin-right: 15px;
                                    @include maxwidth(800) {
                                        margin-right: 0;
                                    }
                                }
                                @include maxwidth(800) {
                                    width: 100%;
                                    flex: 0 1 100%;
                                    &:not(:first-child) {
                                        margin-top: 10px;
                                    }
                                }
                                .card-inner {
                                    a {
                                        display: block;
                                        padding: 15px;
                                        box-sizing: border-box;
                                        @include maxwidth(600) {
                                            padding: 15px 15px 8px 15px;
                                        }
                                        .thumbnail {
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            flex-wrap: wrap;
                                            border-radius: 0 25px 0 0;
                                            background-color: $basecolor;
                                            min-height: 246px;
                                            padding: 24px 10px;
                                            box-sizing: border-box;
                                            @include maxwidth(600) {
                                                min-height: 150px;
                                            }
                                            img {
                                                width: 100px;
                                                @include maxwidth(480) {
                                                    width: 80px;
                                                }
                                            }
                                        }
                                        .btn-area {
                                            margin-top: 18px;
                                            @include maxwidth(600) {
                                                margin-top: 10px;
                                            }
                                            .btn {
                                                span {
                                                }
                                            }
                                        }
                                    }
                                }
                                &.last-card {
                                    flex: 0 1 100%;
                                    margin-top: 15px;
                                    .card-inner {
                                        a {
                                            display: flex;
                                            align-items: flex-end;
                                            flex-direction: row-reverse;
                                            @include maxwidth(800) {
                                                display: block;
                                            }
                                            .thumbnail {
                                                flex: 0 1 552px;
                                                min-height: 140px;
                                                padding: 17px 10px;
                                                box-sizing: border-box;
                                                @include maxwidth(800) {
                                                    min-height: 246px;
                                                }
                                                @include maxwidth(600) {
                                                    min-height: 150px;
                                                }
                                                img {
                                                }
                                            }
                                            .btn-area {
                                                flex: 0 1 160px;
                                                margin-right: 28px;
                                                @include maxwidth(800) {
                                                    margin-right: 0;
                                                }
                                                span.t {
                                                    display: block;
                                                    @include f_all(12);
                                                    color: $themecolor;
                                                    margin-bottom: 6px;
                                                }
                                                .btn {
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    #toppageService01 {
        padding: 111px 0 210px;
        background: bottom left / 960px auto no-repeat;
        @include maxwidth(800) {
            background-position: bottom left;
            background-size: calc((375 / 375) * 100vw) auto;
            padding-bottom: calc((272 / 375) * 100vw);
        }
        .container {
            .box {
                margin-right: 0;
                margin-left: auto;
                .box-inner {
                    .heading {
                    }
                    .body {
                        p.text {
                        }
                        .cards {
                            .card {
                                .card-inner {
                                    a {
                                        .thumbnail {
                                            img {
                                            }
                                        }
                                        .btn-area {
                                            .btn {
                                            }
                                        }
                                    }
                                }
                                &.last-card {
                                    .card-inner {
                                        a {
                                            .thumbnail {
                                                flex-direction: column;
                                                img {
                                                    width: 278px;
                                                    @include maxwidth(600) {
                                                        width: 211px;
                                                    }
                                                }
                                                span.t {
                                                    @include f_all(13, 0, 24);
                                                    margin-top: 10px;
                                                    @include maxwidth(600) {
                                                        @include f_all(11, 0, 24);
                                                    }
                                                }
                                            }
                                            .btn-area {
                                                span.t {
                                                }
                                                .btn {
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    #toppageService03 {
        padding: 150px 0;
        background: center right / 821px auto no-repeat;
        @include maxwidth(800) {
            background-position: bottom 95px right;
            background-size: calc((375 / 375) * 100vw) auto;
            padding-bottom: calc((424 / 375) * 100vw);
        }
        @include maxwidth(600) {
            padding-top: 111px;
        }
        .container {
            .box {
                .box-inner {
                    .heading {
                    }
                    .body {
                        p.text {
                        }
                        .cards {
                            .card {
                                .card-inner {
                                    a {
                                        .thumbnail {
                                            img {
                                            }
                                        }
                                        .btn-area {
                                            .btn {
                                            }
                                        }
                                    }
                                }
                                &.last-card {
                                    .card-inner {
                                        a {
                                            .thumbnail {
                                                ul {
                                                    display: flex;
                                                    align-items: center;
                                                    justify-content: center;
                                                    flex-wrap: wrap;
                                                    margin-top: -15px;
                                                    li {
                                                        margin-right: 20px;
                                                        margin-top: 15px;
                                                        @include maxwidth(600) {
                                                            margin-right: 15px;
                                                        }
                                                        img {
                                                            &.l1 {
                                                                width: 188px;
                                                                @include maxwidth(600) {
                                                                    width: 140px;
                                                                }
                                                            }
                                                            &.l2 {
                                                                width: 84px;
                                                                @include maxwidth(600) {
                                                                    width: 62px;
                                                                }
                                                            }
                                                            &.l3 {
                                                                width: 128px;
                                                                @include maxwidth(600) {
                                                                    width: 96px;
                                                                }
                                                            }
                                                            &.l4 {
                                                                width: 136px;
                                                                @include maxwidth(600) {
                                                                    width: 100px;
                                                                }
                                                            }
                                                            &.l5 {
                                                                width: 163px;
                                                                @include maxwidth(600) {
                                                                    width: 105px;
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                            .btn-area {
                                                span.t {
                                                }
                                                .btn {
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    #toppageService04 {
        overflow: hidden;
        position: relative;
        padding: 60px 0;
        .c-bar {
            &.bar-left {
                top: 170px;
            }
            &.bar-right {
                bottom: 110px;
                @include maxwidth(800) {
                    top: 0;
                    bottom: 0;
                }
            }
        }
        .container {
            @include container(1140, 25);
            padding-top: 25px;
            @include maxwidth(800) {
                margin: 0;
                padding-top: 80px;
            }
            .banner {
                max-width: 820px;
                width: 100%;
                background-color: $themecolor;
                padding: 180px 30px 18px 30px;
                box-sizing: border-box;
                position: relative;
                &:not(:first-child) {
                    margin-top: 40px;
                    @include maxwidth(800) {
                        margin-top: 130px;
                    }
                }
                @include maxwidth(800) {
                    padding: 230px 30px 40px;
                }
                .banner-inner {
                    .head {
                        position: absolute;
                        top: -25px;
                        left: 25px;
                        right: -25px;
                        margin: auto;
                        @include maxwidth(800) {
                            top: -80px;
                            left: 10px;
                            right: 0;
                        }
                        .thumbnail {
                            .frame {
                                width: 100%;
                                height: 200px;
                                @include maxwidth(800) {
                                    height: 280px;
                                }
                                position: relative;
                                &::before {
                                    content: "";
                                    display: block;
                                    background-color: rgba($themecolor2, 0.3);
                                    @include absolute_centering;
                                }
                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                        }
                        .btn-area {
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            .btn {
                                a {
                                }
                            }
                        }
                    }
                    .body {
                        p.text {
                            @include f_all(14, 0, 24);
                            @include fw_m;
                            color: $subtextcolor;
                            @include maxwidth(600) {
                                @include f_all(13, 0, 24);
                            }
                        }
                    }
                }
                &.banner1 {
                    .banner-inner {
                        .head {
                            .thumbnial {
                                img {
                                }
                            }
                            .btn-area {
                                .btn {
                                    a {
                                    }
                                }
                            }
                        }
                        .body {
                            p.text {
                            }
                        }
                    }
                }
                &.banner2 {
                    margin-left: auto;
                    margin-right: 25px;
                    .banner-inner {
                        .head {
                            .thumbnial {
                                img {
                                }
                            }
                            .btn-area {
                                .btn {
                                    a {
                                    }
                                }
                            }
                        }
                        .body {
                            p.text {
                            }
                        }
                    }
                }
            }
        }
    }
    #toppageCompany {
        margin-bottom: 154px;
        @include maxwidth(600) {
            margin-bottom: 90px;
        }
        position: relative;
        .container {
            max-width: 1140px;
            width: 100%;
            margin: 0 auto;
            .box {
                padding: 50px 80px;
                margin: 0 20px;
                @include maxwidth(800) {
                    padding: 40px 0;
                }
                box-sizing: border-box;
                background-color: $themecolor;
                .box-inner {
                    .items {
                        .item {
                            display: flex;
                            align-items: center;
                            @include maxwidth(800) {
                                display: block;
                            }
                            .banner {
                                flex: 0 1 580px;
                                position: relative;
                                @include maxwidth(800) {
                                    margin: 0 -20px;
                                }
                                .banner-inner {
                                    .thumbnail {
                                        .frame {
                                            height: 240px;
                                            position: relative;
                                            &::before {
                                                content: "";
                                                display: block;
                                                background-color: rgba($themecolor2, 0.3);
                                                @include absolute_centering;
                                            }
                                            img {
                                                width: 100%;
                                                height: 100%;
                                                object-fit: cover;
                                            }
                                        }
                                    }
                                }
                                .btn-area {
                                    position: absolute;
                                    left: 0;
                                    bottom: 0;
                                    @include maxwidth(800) {
                                        left: 20px;
                                    }
                                    a {
                                        .btn {
                                        }
                                    }
                                }
                            }
                            .text-box {
                                padding: 25px 50px;
                                box-sizing: border-box;
                                background-color: rgba($themecolor2, 0.76);
                                position: absolute;
                                width: 50%;
                                @include maxwidth(800) {
                                    position: static;
                                    width: auto;
                                    margin: 0 -20px;
                                    padding: 40px 50px;
                                }
                                .text-box-inner {
                                    max-width: 452px;
                                    width: 100%;
                                    @include maxwidth(800) {
                                        margin: 0 auto !important;
                                    }
                                    p {
                                        @include f_all(14, 0, 27);
                                        @include maxwidth(600) {
                                            @include f_all(13, 0, 26);
                                        }
                                        @include fw_m;
                                        color: $subtextcolor;
                                    }
                                }
                            }
                            &.item1 {
                                .banner {
                                }
                                .text-box {
                                    right: 0;
                                }
                            }
                            &.item2 {
                                flex-direction: row-reverse;
                                margin-top: 30px;
                                @include maxwidth(800) {
                                    margin-top: 40px;
                                }
                                .banner {
                                    .btn-area {
                                        left: auto;
                                        right: 0;
                                        @include maxwidth(800) {
                                            right: 20px;
                                        }
                                        a {
                                            .btn {
                                                border-radius: 25px 0 0 0;
                                            }
                                        }
                                    }
                                }
                                .text-box {
                                    left: 0;
                                    .text-box-inner {
                                        margin-left: auto;
                                        margin-right: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    #toppageService02 {
        margin-top: 80px;
        @include maxwidth(800) {
            margin-top: 40px;
        }
        padding: 120px 0 98px;
        @include maxwidth(600) {
            padding: 60px 0 80px;
        }
        background-color: $themecolor3;
        .container {
            @include container(1140);
            .heading {
                h2 {
                }
            }
            .body {
                margin-top: 50px;
                .nav-link-list {
                }
                .top-headline {
                    margin-top: 60px;
                    @include maxwidth(600) {
                        margin-top: 30px;
                    }
                }
                .btn-area {
                    margin-top: 50px;
                }
            }
        }
    }
    .nav-link-list {
        & > ul {
            & > li {
                padding: 15px 40px;
                @include maxwidth(600) {
                    padding: 15px 30px;
                }
                box-sizing: border-box;
                background-color: $basecolor;
                border-radius: 15px;
                &:not(:first-child) {
                    margin-top: 10px;
                }
                &:not(.head) {
                    display: flex;
                    align-items: center;
                    @include maxwidth(600) {
                        display: block;
                    }
                }
                & > a {
                    @include f_all(16, 160);
                    @include fw_b;
                    color: $themetextcolor;
                    flex: 0 0 86px;
                    margin-right: 32px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    cursor: pointer;
                    @include maxwidth(600) {
                        flex: 0 1 100%;
                        margin-right: 0;
                    }
                    &::after {
                        content: "";
                        display: inline-block;
                        @include triangle(8px, 14px, right, $themecolor);
                        transition: 0.3s;
                    }
                    &:hover {
                        &:after {
                            transform: translate(3px, 0);
                        }
                    }
                }
                & > ul {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    margin-bottom: -10px;
                    @include maxwidth(600) {
                        margin-top: 30px;
                    }
                    & > li {
                        margin-right: 10px;
                        margin-bottom: 10px;
                        & > a {
                            @include f_all(13);
                            @include maxwidth(600) {
                                @include f_all(12);
                            }
                            @include fw_b;
                            color: $subtextcolor;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            padding: 0 20px;
                            min-height: 23px;
                            box-sizing: border-box;
                            background-color: $accentcolor;
                        }
                    }
                }
            }
        }
        &.top-nav {
            & > ul {
                & > li {
                    & > a {
                        @include maxwidth(600) {
                            &:after {
                                @include triangle(8px, 14px, right, $accentcolor);
                                transform: rotate(-90deg);
                            }
                            // acMenu
                            // 最初に開いたまま
                            &.stay {
                                &::after {
                                    @include triangle(8px, 14px, right, $themecolor);
                                    transform: rotate(90deg);
                                }
                                &.js-active {
                                    &::after {
                                        @include triangle(8px, 14px, right, $accentcolor);
                                        transform: rotate(-90deg);
                                    }
                                }
                            }
                            &.js-active {
                                &::after {
                                    @include triangle(8px, 14px, right, $themecolor);
                                    transform: rotate(90deg);
                                }
                            }
                        }
                        &:hover {
                            &:after {
                                @include maxwidth(600) {
                                    &.stay {
                                        &:after {
                                            transform: rotate(90deg);
                                        }
                                        &.js-active {
                                            &::after {
                                                transform: rotate(-90deg);
                                            }
                                        }
                                    }
                                    &.js-active {
                                        &::after {
                                            transform: rotate(90deg);
                                        }
                                    }
                                    transform: rotate(-90deg);
                                    // transform: none;
                                    // @include triangle(8px, 14px, right, $themecolor);
                                }
                            }
                        }
                    }
                    & > ul {
                        & > li {
                            & > a {
                            }
                        }
                    }
                }
            }
        }
        &.information-nav {
            padding: 45px 30px;
            @include maxwidth(600) {
                padding: 35px 10px;
            }
            box-sizing: border-box;
            background-color: $themecolor3;
            border-radius: 25px 0 0 0;
            & > ul {
                & > li {
                    &.head {
                        padding-top: 10px;
                        padding-bottom: 10px;
                        display: inline-flex;
                        align-items: center;
                        a {
                            flex: 0 1 100%;
                            margin-right: 0 !important;
                            &:after {
                                margin-left: 1em;
                            }
                        }
                        @include maxwidth(600) {
                            width: 100%;
                            a {
                                &.current {
                                }
                            }
                        }
                    }
                    & > a {
                        &.current {
                            color: $accenttextcolor;
                            &:after {
                                @include triangle(8px, 14px, right, $accentcolor);
                            }
                        }
                    }
                    & > ul {
                        & > li {
                            & > a {
                                &.current {
                                    color: $accenttextcolor;
                                    background-color: $basecolor;
                                    border: solid 2px $accentcolor;
                                    border-radius: 0.8em 0 0 0;
                                    // &::before {
                                    //     content: "#";
                                    //     display: inline-block;
                                    //     margin-right: 0.15em;
                                    // }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .information_headline {
        ul {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            flex-wrap: wrap;
            li {
                margin-right: 30px;
                @include maxwidth(800) {
                    margin-right: 23px;
                }
                a {
                    display: block;
                    span.thumbnail {
                        display: block;
                        height: 35vw;
                        min-height: 280px;
                        max-height: 320px;
                        @include maxwidth(1020) {
                            height: 25vw;
                            min-height: 200px;
                            max-height: 280px;
                        }
                        @include maxwidth(600) {
                            height: auto;
                            min-height: auto;
                            max-height: none;
                        }
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            border-radius: 25px 0 0 0;
                        }
                    }
                    span.docs {
                        @include f_all(14, 0, 27);
                        color: $themetextcolor1;
                        @include fw_m;
                        display: block;
                        padding-top: 13px;
                        @include maxwidth(600) {
                            padding-top: 20px;
                        }
                        span.detail {
                            display: block;
                            & > span {
                                display: block;
                            }
                            span.model {
                            }
                            span.year {
                            }
                            span.mileage {
                            }
                        }
                        span.terms {
                            display: block;
                            margin-top: 0.8em;
                            padding-top: 0.5em;
                            border-top: solid 1px $themecolor;
                            span.term {
                                margin-right: 0.65em;
                                display: inline-flex;
                                align-items: center;
                                &::before {
                                    content: "#";
                                }
                            }
                        }
                    }
                }
                &.blank{
                    display: none;
                }
            }
        }
        &.top-headline {
            ul {
                li {
                    flex: 0 1 calc((100% - 60px) / 3);
                    margin-bottom: 30px;
                    @include maxwidth(800) {
                        flex: 0 1 calc((100% - 46px) / 3);
                    }
                    @include maxwidth(600) {
                        flex: 0 1 auto;
                        width: calc((282 / 375) * 100vw);
                        margin-bottom: 0;
                    }
                    &:nth-child(3n) {
                        margin-right: 0;
                        @include maxwidth(600) {
                            margin-right: 23px;
                        }
                    }
                    a {
                        span.thumbnail {
                            img {
                                @include maxwidth(600) {
                                    height: calc((253 / 375) * 100vw);
                                }
                            }
                        }
                    }
                }
            }
        }
        &.headline {
            margin-top: 40px;
            ul {
                li {
                    flex: 0 1 calc((100% - 30px) / 2);
                    margin-bottom: 50px;
                    @include maxwidth(800) {
                        flex: 0 1 calc((100% - 23px) / 2);
                        margin-bottom: 25px;
                    }
                    @include maxwidth(480) {
                        margin-right: 0px;
                        flex: 0 1 100%;
                    }
                    &:nth-child(2n) {
                        margin-right: 0;
                    }
                    a {
                        span.thumbnail {
                            img {
                                max-height: 330px;
                                @include maxwidth(840) {
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    #toppageNews {
        margin: 120px 0;
        position: relative;
        @include maxwidth(600) {
            margin: 110px 0 60px;
        }
        #bgimageWrapper {
            position: absolute;
            top: 83px;
            bottom: 75px;
            left: 0;
            right: 0;
            margin: auto;
            @include maxwidth(600) {
                bottom: 90px;
            }
            #bgimage {
                height: 100%;
                .frame {
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        min-height: 600px;
                    }
                }
            }
        }
        .container {
            @include container(1140);
            z-index: 1;
            .box {
                min-height: 555px;
                padding: 53px 30px 45px;
                @include maxwidth(600) {
                    padding-bottom: 60px;
                }
                box-sizing: border-box;
                background-color: rgba($themecolor3, 0.95);
                .box-inner {
                    max-width: 900px;
                    width: 100%;
                    margin: 0 auto;
                    .heading {
                        h2 {
                        }
                    }
                    .body {
                        margin-top: 60px;
                        @include maxwidth(600) {
                            margin-top: 50px;
                        }
                        .btn-area {
                            margin-top: 50px;
                            @include maxwidth(600) {
                                margin-top: 60px;
                            }
                        }
                    }
                }
            }
        }
    }
    .nav.news-nav {
        & > ul {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: -10px;
            @include maxwidth(480) {
                justify-content: space-between;
            }
            & > li {
                margin-bottom: 10px;
                &:not(:last-child) {
                    margin-right: 20px;
                    @include maxwidth(480) {
                        margin-right: 10px;
                    }
                }
                @include maxwidth(480) {
                    width: calc((100% - 10px) / 2);
                    &:nth-child(2n) {
                        margin-right: 0;
                    }
                }
                & > a {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    // width: 140px;
                    padding: 0 1.45em;
                    box-sizing: border-box;
                    min-height: 36px;
                    @include f_all(14);
                    @include maxwidth(480) {
                        @include f_all(13);
                        width: 100%;
                        padding: 0 5px;
                    }
                    background-color: $themecolor3;
                    &::after {
                        content: "";
                        display: inline-block;
                        @include triangle(8px, 14px, right, $themecolor);
                        margin-left: 0.8em;
                        transition: transform 0.3s;
                    }
                    &:hover {
                        &::after {
                            transform: translate(3px, 0);
                        }
                    }
                    &.current {
                        color: $subtextcolor;
                        background-color: $accentcolor;
                        &::after {
                            @include triangle(8px, 14px, right, $basecolor);
                        }
                    }
                }
            }
        }
    }
    .news_headline {
        ul {
            li {
                border-top: solid 1px #cccccc;
                &:last-child {
                    border-bottom: solid 1px #cccccc;
                }
                a {
                    @include f_all(14, 0, 27);
                    @include maxwidth(600) {
                        @include f_all(13, 0, 26);
                    }
                    @include fw_m;
                    display: block;
                    padding: 30px 35px;
                    @include maxwidth(600) {
                        padding: 20px 20px 20px 10px;
                    }
                    box-sizing: border-box;
                    position: relative;
                    &::before {
                        content: "";
                        display: block;
                        @include triangle(8px, 14px, right, $themecolor);
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        right: 20px;
                        margin: auto;
                        transition: 0.3s;
                        @include maxwidth(600) {
                            right: 10px;
                            top: auto;
                            bottom: 26px;
                        }
                    }
                    &:hover {
                        &:before {
                            transform: translate(3px, 0);
                        }
                    }
                    display: flex;
                    align-items: center;
                    @include maxwidth(600) {
                        flex-wrap: wrap;
                    }
                    span.date {
                        margin-right: 1em;
                        @include maxwidth(600) {
                            flex: 0 1 100%;
                            margin-right: 0;
                        }
                    }
                    span.title {
                        @include maxwidth(600) {
                            flex: 0 1 100%;
                        }
                    }
                }
            }
        }
        &.top-headline {
            ul {
                li {
                    a {
                    }
                }
            }
        }
        &.headline {
            margin-top: 40px;
            ul {
                -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
                background-color: rgba($basecolor, 0.45);
                li {
                    a {
                    }
                }
            }
        }
    }
}
/* Sub Page
==================================================================*/
/* SubPageHeadingVisual */
#subpageHeadingVisual {
    position: relative;
    z-index: 1;
    width: calc((1680 / 1920) * 100%);
    height: 300px;
    @include maxwidth(800) {
        width: calc(100% - 20px);
        height: 280px;
    }
    &::before {
        content: "";
        display: block;
        background-color: rgba(mix($accentcolor, $themecolor2, 0.45), 0.75);
        @include absolute_centering;
    }
    #subpageHeading {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 100%;
        h2 {
            white-space: nowrap;
            span.en {
                @include f_all(123, 160);
                @include maxwidth(800) {
                    @include f_all(75, 160);
                }
                @include maxwidth(480) {
                    @include f_all(55, 160);
                }
                @include ff_en;
                color: rgba($subtextcolor, 0.15);
                text-transform: capitalize;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            span.ja {
                @include f_all(28, 160);
                @include maxwidth(800) {
                    @include f_all(22, 160);
                }
                @include maxwidth(480) {
                    @include f_all(18, 160);
                }
                @include fw_b;
                color: $subtextcolor;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}
/* TopicPath */
#subpageTopicPath {
    position: relative;
    margin-bottom: 80px;
    // max-width: 1440px;
    // width: 100%;
    width: calc((1440 / 1920) * 100%);
    @include maxwidth(800) {
        width: calc(100% - 40px);
    }
    background-color: $themecolor3;
    .container {
        max-width: 800px;
        width: 100%;
        margin-left: auto;
        margin-right: 115px;
        ul {
            padding: 13px 30px;
            box-sizing: border-box;
            @include maxwidth(600) {
                padding: 8px 15px;
            }
            li {
                display: inline;
                color: $themetextcolor;
                @include f_all(13, "", 27);
                @include fw_b;
                @include maxwidth(600) {
                    @include f_all(12, "", 24);
                }
                &::after {
                    content: ">>";
                    display: inline-block;
                    margin: 0 0.55em;
                }
                &:last-child {
                    &::after {
                        display: none;
                    }
                }
                a {
                    display: inline-block;
                }
            }
        }
    }
}
/* 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: $themecolor3;
        border-radius: 1em 0 0 0;
    }
    .current {
        background-color: $themecolor;
        color: #fff;
    }
}
/* Archivelink */
div.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: $themecolor3;
        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;
            }
        }
    }
}
/* SubpageContent */
#subpageContent {
    margin: 80px 0 150px;
    .container {
        @include container(800,30);
        z-index: 2;
        .default {
            @include maxwidth(1080) {
                margin-right: 100px;
            }
            @include maxwidth(800) {
                margin-right: 0;
            }
        }
    }
}
/* Subpage　車検ページ */
.block-syaken-frame{
    padding: 0;
    margin-bottom: 40px;
    div.wp-block-group__inner-container{        
        h6.h6-syaken-title{
           cursor: pointer;
        }
        .block-syaken-box{
            display: none;
        }
    }
}