// スタイルシート 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_MVoverlay: 1;
$zindex_toscroll: 3;
$zindex_sns: 4;
$zindex_totop: 12;
$zindex_header: 13;
$zindex_heading: 14;
$zindex_contact: 12;
$zindex_gnav: 15;
$zindex_gnavtoggle: 100;

.default {
    @include contentdefault;
    @include eachcss;
}
@mixin triangle($direction, $width, $height, $color) {
    width: 0;
    height: 0;
    border-style: solid;
    $valWidth: $width / 2;
    $valHeight: $height / 2;
    @if ($direction == topward) {
        border-width: 0 $valWidth $height $valWidth;
        border-color: transparent transparent $color transparent;
    } @else if ($direction == leftward) {
        border-width: $valHeight $width $valHeight 0;
        border-color: transparent $color transparent transparent;
    } @else if ($direction == rightward) {
        border-width: $valHeight 0 $valHeight $width;
        border-color: transparent transparent transparent $color;
    } @else if ($direction == bottomward) {
        border-width: $height $valWidth 0 $valWidth;
        border-color: $color transparent transparent transparent;
    } @else if $direction == upperleft {
        border-color: $color transparent transparent transparent;
        border-width: $height $height 0 0;
    } @else if $direction == upperright {
        border-color: transparent $color transparent transparent;
        border-width: 0 $height $height 0;
    } @else if $direction == lowerright {
        border-color: transparent transparent $color transparent;
        border-width: 0 0 $height $height;
    } @else if $direction == lowerleft {
        border-color: transparent transparent transparent $color;
        border-width: $height 0 0 $height;
    }
}
//slick初期化
button.slick-arrow,
ul.slick-dots li button {
    overflow: hidden;
    text-indent: -9999px;
    border: none;
    background: none;
    box-shadow: none;
    outline: none;
    padding: 0;
}

// Scroll Effect
.offs.fadeEffect {
    opacity: 0;
    transform: translate(0, 30px);
}
.ons.fadeEffect {
    opacity: 1;
    transform: translate(0);
    transition-property: opacity transform;
    transition: 0.8s ease-in-out;
}
.offs.borderEffect {
    .border {
        &.border1 {
            transform: scaleY(0);
        }
        &.border2 {
            transform: scaleX(0);
        }
        &.border3 {
            transform: scaleY(0);
        }
        &.border4 {
            transform: scaleX(0);
        }
    }
    .body {
        opacity: 0;
        transform: translate(0, 20px);
    }
}
.ons.borderEffect {
    .border {
        transition: transform 0.8s ease-in-out;
        &.border1 {
            transform-origin: top center;
            transform: scaleY(1);
        }
        &.border2 {
            transform-origin: center left;
            transform: scaleX(1);
            transition-delay: 0.8s;
        }
        &.border3 {
            transform-origin: bottom center;
            transform: scaleY(1);
        }
        &.border4 {
            transform-origin: center right;
            transform: scaleX(1);
            transition-delay: 0.8s;
        }
    }
    .body {
        opacity: 1;
        transform: translate(0);
        transition-property: opacity transform;
        transition: 0.8s 1.6s ease-in-out;
    }
}
.item_frame.slideEffect {
    overflow: hidden;
    span.image {
        opacity: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        vertical-align: bottom;
    }
}
.item_frame.ons.slideEffect {
    span.image {
        opacity: 1;
        animation: kf_img_show 1.6s ease-in-out forwards;
    }
}
[class*="slideEffect"] {
    overflow: hidden;
    position: relative;
    &::before,
    &::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    &::before {
        z-index: 2;
        background-color: $themecolor;
    }
    &::after {
        background-color: mix($themecolor, $basecolor, 0.9);
        z-index: 2;
    }
    span.image {
        transform: scale(1.5);
    }
}
.slideEffect_left {
    &::before,
    &::after {
        left: 0;
    }
}
.slideEffect_right {
    &::before,
    &::after {
        right: 0;
    }
}
.ons {
    &[class*="slideEffect"] {
        transform: scale(1);
        transition: all 1.2s cubic-bezier(0.75, 0, 0.145, 1);
        span.image {
            transition: all 1.2s cubic-bezier(0.75, 0, 0.145, 1);
            transform: scale(1);
        }
    }
    &.slideEffect_left::before,
    &.slideEffect_left::after {
        left: -100%;
        transition: all 1.2s cubic-bezier(0.75, 0, 0.145, 1);
    }
    &.slideEffect_right::before,
    &.slideEffect_right::after {
        right: -100%;
        transition: all 1.2s cubic-bezier(0.75, 0, 0.145, 1);
    }
    &.slideEffect_left::before,
    &.slideEffect_right::before {
        transition-delay: 0.3s;
    }
}

/* Site Common
==================================================================*/
header {
    #header {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: $zindex_header;
        &::before {
            content: "";
            display: block;
            height: 6px;
            background-color: $themecolor;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            @include maxwidth(480) {
                display: none;
            }
        }
        .container {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            .sitename {
                flex: 0 0 auto;
                position: relative;
                padding: 96px calc((130 / 1920) * 100vw) 0 46px;
                box-sizing: border-box;
                @include maxwidth(1024) {
                    padding: 20px 130px 0 25px;
                }
                &::after {
                    content: "";
                    display: block;
                    @include triangle(upperleft, calc((468 / 1920) * 100vw), calc((468 / 1920) * 100vw), $themecolor);
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 0;
                    @include maxwidth(1024) {
                        @include triangle(upperleft, 250px, 250px, $themecolor);
                    }
                }
                h1 {
                    a {
                        display: inline-flex;
                        align-items: center;
                        // gap: 10px;
                        position: relative;
                        z-index: 1;
                        @include maxwidth(1024) {
                            flex-direction: column;
                        }
                        img {
                            &:not(:first-child) {
                                margin-left: 10px;
                                @include maxwidth(1024) {
                                    margin-left: 0;
                                    margin-top: 10px;
                                }
                            }
                        }
                    }
                }
            }
            #gnav {
                padding: 48px 180px 0 0;
                @include maxwidth(1024) {
                    padding: 0;
                    opacity: 0;
                    visibility: hidden;
                }
                body.menu_open & {
                    padding: 0;
                    position: fixed;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    overflow-y: auto;
                    @include maxwidth(1024) {
                        opacity: 1;
                        visibility: visible;
                    }
                }
                position: relative;
                z-index: $zindex_gnav;
                .gnav_bg {
                    opacity: 0;
                    visibility: hidden;
                    background-color: rgba($themecolor, 0.75);
                    transform: scaleX(0);
                    @include absolute_centering;
                    z-index: 0;
                    body.menu_open & {
                        opacity: 1;
                        visibility: visible;
                        transform: scaleX(1);
                        transition: transform 0.8s ease-in-out;
                    }
                }
                .container {
                    position: relative;
                    z-index: 1;
                    body.menu_open & {
                        width: 100%;
                        height: 100%;
                    }
                    ul {
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        // gap: 8px 48px;
                        margin-bottom: -6px;
                        body.menu_open & {
                            margin: 0;
                            flex-wrap: nowrap;
                            // gap: 36px 0;
                            width: 100%;
                            height: 100%;
                            justify-content: center;
                            flex-direction: column;
                        }
                        li {
                            margin-right: 44px;
                            margin-bottom: 6px;
                            &:last-child {
                                margin-right: 0;
                            }
                            body.menu_open & {
                                margin: 0;
                                margin-bottom: 36px;
                            }
                            a {
                                display: inline-block;
                                @include f_all(14);
                                @include fw_b;
                                color: $themetextcolor;
                                body.menu_open & {
                                    @include f_all(18);
                                    color: $subtextcolor;
                                }
                                &:not(.item-insta) {
                                    body.menu_open & {
                                        position: relative;
                                        &::after {
                                            content: "";
                                            display: inline-block;
                                            @include maxwidth(600) {
                                                width: 13px;
                                                height: 13px;
                                                margin-left: 10px;
                                                background: url(../images/icon-arrow-double.svg) center center / contain no-repeat;
                                            }
                                        }
                                        &:hover {
                                            &::after {
                                                width: 13px;
                                                height: 13px;
                                                margin-left: 10px;
                                                background: url(../images/icon-arrow-double.svg) center center / contain no-repeat;
                                                transition: 0.3s ease-in-out;
                                            }
                                        }
                                    }
                                }
                                &.item-insta {
                                    display: block;
                                    align-items: center;
                                    justify-content: center;
                                    width: 27px;
                                    height: 27px;
                                    box-sizing: border-box;
                                    border-radius: 50%;
                                    text-indent: -999px;
                                    overflow: hidden;
                                    // background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
                                    background: radial-gradient(circle farthest-corner at 32% 106%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
                                    position: relative;
                                    &::before {
                                        content: "";
                                        display: block;
                                        background: url(../images/icon-awesome-instagram.svg) center center / 17px no-repeat;
                                        @include absolute_centering;
                                        z-index: 1;
                                    }
                                    // &::after {
                                    //     content: "";
                                    //     display: block;
                                    //     width: 100%;
                                    //     height: 100%;
                                    //     position: absolute;
                                    //     top: 45%;
                                    //     left: -20%;
                                    //     background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
                                    // }
                                    body.menu_open & {
                                        width: 30px;
                                        height: 30px;
                                        &::before {
                                            background-size: 20px;
                                        }
                                        &:hover {
                                            border: solid 1px;
                                            border-color: #fff;
                                            transition: border 0.3s;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            #gnavToggleWrapper {
                position: absolute;
                top: 0;
                right: 0;
                z-index: $zindex_gnavtoggle;
                body.menu_open & {
                    position: fixed;
                    top: 15%;
                    left: 60%;
                    right: auto;
                    transform: translate(-50%, 0);
                    transition: top 0.8s ease-in-out;
                    @include maxwidth(600) {
                        left: 50%;
                        top: 10%;
                    }
                    @media screen and (max-height: 720px) and (max-width: 600px) {
                        left: auto;
                        top: 30px;
                        right: 20px;
                    }
                }
                #gnavToggle {
                    a {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        width: 100px;
                        height: 100px;
                        background: $themecolor;
                        position: relative;
                        z-index: $zindex_gnavtoggle;
                        body.menu_open & {
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            background-color: $accentcolor;
                        }
                        @include maxwidth(600) {
                            width: 70px;
                            height: 70px;
                        }
                        span {
                            display: block;
                        }
                        span.b {
                            width: 30px;
                            height: 1px;
                            background: #fff;
                            body.menu_open & {
                                width: 23px;
                            }
                            @include maxwidth(600) {
                                width: 25px;
                            }
                            &.b1 {
                                margin-bottom: 10px;
                                body.menu_open & {
                                    margin-bottom: 0;
                                    transform: rotate(135deg);
                                }
                            }
                            &.b2 {
                                body.menu_open & {
                                    transform: rotate(-135deg);
                                }
                            }
                        }
                        span.b3 {
                            margin-top: 10px;
                            body.menu_open & {
                                display: none;
                            }
                            &::before {
                                content: "Menu";
                                display: block;
                                @include f_all(14);
                                @include ff_en;
                                text-transform: uppercase;
                                color: #fff;
                                @include maxwidth(600) {
                                    @include f_all(12);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
//slick style
button.slick-arrow {
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    background: url(../images/icon-arrow.svg) center center / 6px 10px no-repeat $themecolor;
    @include maxwidth(600) {
        width: 24px;
        height: 24px;
    }
    &.slick-prev {
        transform: scale(-1, 1);
    }
    &:hover {
        opacity: 0.75;
    }
}
ul.slick-dots {
    display: flex;
    align-items: center;
    // gap: 10px;
    // @include maxwidth(600) {
    //     gap: 7px;
    // }
    li {
        margin-right: 10px;
        @include maxwidth(600) {
            margin-right: 7px;
        }
        &:last-child {
            margin-right: 0;
        }
        width: 11px;
        height: 11px;
        @include maxwidth(600) {
            width: 8px;
            height: 8px;
        }
        button {
            width: 100%;
            height: 100%;
            background: #aaaaaa;
            border-radius: 50%;
        }
        &.slick-active {
            button {
                background: $themecolor;
            }
        }
    }
}
@keyframes fadezoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.15);
    }
}
.zoom_effect {
    span.image {
        animation: fadezoom forwards 8s ease-out;
    }
}
#mainVisual {
    position: relative;
    padding-top: 124px;
    position: relative;
    z-index: 1;
    @include maxwidth(1024) {
        margin-bottom: 35px;
    }
    @include maxwidth(600) {
        padding-top: 120px;
    }
    .container {
        .slides {
            position:relative;
            &.slick-initialized {
                display: block;
            }
            padding-bottom: 77px;
            @include maxwidth(600) {
                //padding-bottom: 200px;
                padding-bottom: 45px;
            }
            .slider {
                overflow: hidden;
                border-radius: 10px;
                width: calc((1490 / 1920) * 100vw);
                height: calc(100vh - 200px);
                min-height: 375px;
                margin: 0 calc((24 / 1920) * 100vw);
                position: relative;
                z-index: 1;
                @include maxwidth(600) {
                    width: calc(100vw - 40px);
                    height: calc(100vw - 40px);
                    margin: 0 6px;
                }
                span.image {
                    display: block;
                    width: 100%;
                    height: 100%;
                    // border-radius: 10px;
                    position: relative;
                    &::before {
                        content: "";
                        display: block;
                        border-radius: 10px;
                        width: 100%;
                        height: 100%;
                        background-color: rgba(#000, 0.15);
                    }
                }
            }
            ul.slick-dots {
                position: absolute;
                bottom: 32px;
                right: 150px;
                @include maxwidth(1024){
                    bottom:-42px;
                }
                @include maxwidth(600) {
                    right: 68px;
                    bottom: -23px;
                }
            }
            button.slick-arrow {
                position: absolute;
                bottom: 23px;
                z-index:1;
                @include maxwidth(1024){
                    bottom:-52px;
                }
                @include maxwidth(600) {
                    bottom: -34px;
                }
                &.slick-next {
                    right: 100px;
                    @include maxwidth(600) {
                        right: 30px;
                    }
                }
                &.slick-prev {
                    right: 283px;
                    @include maxwidth(600) {
                        right: 164px;
                    }
                }
            }
            .top_overlay {
                position: absolute;
                inset: 65px 10% 155px auto;
                width: 40vw;;
                max-width:356px;
                pointer-events: none;
                img {
                    width: 100%;
                    height:100%;
                    object-fit: contain;
                }
                @media (max-height: 630px) {
                    width: 160px;
                    top: 90px !important;
                }
                @include maxwidth(1024) {
                    width: 30vw;
                    top:80px;
                    bottom: 70px;
                    img {
                        object-position: bottom center;
                    }
                }
                @include maxwidth(600) {
                    right: 4%;
                    bottom: 55px;
                    width: 30vw;
                    min-width: 120px;
                }
                @include maxwidth(415) {
                    width:20vw;
                }
            }
        }
        .top_header-news {
            max-width: 527px;
            width: 100%;
            min-height: 116px;
            position: absolute;
            bottom: 40px;
            left: 0;
            padding: 25px 30px;
            box-sizing: border-box;
            background: rgba(#000, 0.85);
            color: $subtextcolor;
            @include maxwidth(1024) {
                position: static;
                background: #000;
                padding: 25px 25px 30px 25px;
            }
            @include maxwidth(800){
                max-width: initial;
            }
            .heading {
                @include f_all(16, "", 20);
                @include fw_b;
                padding: 5px 0 0 15px;
                box-sizing: border-box;
                margin-bottom: 16px;
                position: relative;
                @include maxwidth(600) {
                    @include f_all(15, "", 20);
                }
                &::before {
                    content: "";
                    display: block;
                    width: 3px;
                    background: $themecolor;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    margin: auto;
                }
            }
            .body {
                padding-left: 15px;
                a {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    // @include maxwidth(600) {
                    //     flex-wrap: wrap;
                    // }
                    span.date {
                        @include f_all(15);
                        @include fw_b;
                        margin-right: 15px;
                        @include maxwidth(600) {
                            @include f_all(14);
                        }
                    }
                    span.terms {
                        @include f_all(13);
                        margin-right: 19px;
                        @include maxwidth(600) {
                            @include f_all(12);
                            //margin-right: 0;
                        }
                        span.term {
                            display: inline-block;
                            background: $accentcolor;
                            padding: 5px 10px 3px;
                            box-sizing: border-box;
                            margin: 0 0.4em 0 0;
                        }
                    }
                    span.title {
                        display: inline-block;
                        @include f_all(15, "", 28);
                        position: relative;
                        &::after {
                            content: "";
                            display: inline-block;
                            width: 15px;
                            height: 15px;
                            border-radius: 50%;
                            background: url(../images/icon-arrow-color.svg) top 3px left 5px / 6px 10px no-repeat #fff;
                            margin-left: 8px;
                            margin-bottom: -2px;
                        }
                        @include maxwidth(600) {
                            @include f_all(14, "", 28);
                            // flex: 0 1 100%;
                            // margin-top: 8px;
                        }
                    }
                }
            }
        }
        .top_header-scroll {
            position: absolute;
            bottom: 25px;
            left: 50%;
            margin: auto;
            transform: translate(-50%, 0);
            @include maxwidth(1024) {
                bottom: auto;
                top: calc(100vh - 55px);
                left: calc((50 / 375) * 100%);
            }
            @include maxwidth(600) {
                left: 50px;
                top: calc((100vw - 40px) + 125px);
            }
            @include maxwidth(416) {
                top: calc(375px + 125px);
            }
            @media screen and (max-height: 570px) and (max-width: 1024px) and(min-width:600px) {
                top: calc(570px - 50px);
            }
            @media (max-height: 500px) {
                // display: none;
            }
            a {
                @include ff_en;
                @include f_all(11);
                @include fw_b;
                text-transform: uppercase;
                display: inline-block;
                position: relative;
                padding-bottom: 16px;
                &::after {
                    content: "";
                    display: inline-block;
                    width: 6px;
                    height: 10px;
                    background: url(../images/icon-arrow-color.svg) center center / contain no-repeat;
                    transform: rotate(90deg);
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                }
            }
        }
    }
}
#contentFooter {
    position: relative;
    padding-top: 90px;
    @include maxwidth(600) {
        padding-top: 87px;
    }

    body.subpage & {
        padding-top: 0;
    }
    .bg-shape {
        @include triangle(lowerleft, calc((1293 / 1920) * 100vw), calc((1293 / 1920) * 100vw), $themecolor);
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 0;
        @include maxwidth(600) {
            @include triangle(lowerleft, 0, 0, none);
            width: 100%;
            height: 834px;
            background-color: $themecolor;
            clip-path: polygon(0 0, 100% 46%, 100% 100%, 0% 100%);
        }
    }
    .shape {
        @include triangle(lowerleft, calc((1293 / 1920) * 100vw), calc((1293 / 1920) * 100vw), rgba($themecolor, 0.35));
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        @include maxwidth(600) {
            @include triangle(lowerleft, 0, 0, none);
            width: 100%;
            height: 834px;
            background-color: rgba($themecolor, 0.35);
            clip-path: polygon(0 0, 100% 46%, 100% 100%, 0% 100%);
        }
    }
    #contentFooterContact {
        padding: 80px 0;
        position: relative;
        background: left top 30% / 180% no-repeat;
        @include maxwidth(769) {
            background: left 28% top / cover no-repeat;
        }
        @include maxwidth(600) {
            padding: 95px 0;
        }
        &::before,
        &::after {
            content: "";
            display: block;
        }
        &::before {
            background-color: rgba(#000, 0.3);
            @include absolute_centering;
            z-index: 0;
        }
        .container {
            .footer_box-inner {
                max-width: 1300px;
                width: 68%;
                margin: 0 auto 0 0;
                padding: 80px calc((157 / 1920) * 100%) 80px 30px;
                box-sizing: border-box;
                background: rgba($basecolor, 0.55);
                display: flex;
                align-items: flex-start;
                justify-content: flex-end;
                position: relative;
                z-index: 2;
                @include maxwidth(1024) {
                    width: 100%;
                    justify-content: center;
                    padding: 80px 30px;
                }
                @include maxwidth(769) {
                    display: block;
                }
                .footer_area {
                    .heading {
                    }
                    p.text {
                        @include f_all(15, "", 32);
                        @include fw_b;
                        margin-top: 25px;
                        @include maxwidth(769) {
                            @include f_all(14, "", 32);
                            margin-top: 50px;
                        }
                    }
                    .body {
                        .contactButton {
                            a {
                                display: inline-flex;
                                align-items: center;
                                justify-content: center;
                                max-width: 357px;
                                width: 100%;
                                min-height: 90px;
                                padding: 0 5px;
                                box-sizing: border-box;
                            }
                            a.telarea {
                                color: $themecolor;
                                background-color: $basecolor;
                                border: solid 2px;
                                border-color: $themecolor;
                                box-sizing: border-box;
                                .icon {
                                    flex: 0 0 36px;
                                    margin-right: 10px;
                                    @include maxwidth(480) {
                                        margin-right: 6px;
                                    }
                                    img {
                                        width: 36px;
                                    }
                                }
                                .outline {
                                    span {
                                        display: block;
                                    }
                                    .telnum {
                                        @include f_all(31, 30);
                                        @include fw_b;
                                        @include maxwidth(600) {
                                            @include f_all(26, 30);
                                        }
                                    }
                                    .teltime {
                                        margin-top: 4px;
                                        @include f_all(12);
                                    }
                                }
                            }
                            a.formarea {
                                margin-top: 28px;
                                background-color: $themecolor;
                                .icon {
                                    flex: 0 0 20px;
                                    margin-right: 13px;
                                    img {
                                        width: 20px;
                                    }
                                }
                                .text {
                                    display: inline-block;
                                    @include f_all(18);
                                    @include fw_b;
                                    color: $subtextcolor;
                                    position: relative;
                                    // padding-right: 32px;
                                    &::after {
                                        content: "";
                                        display: inline-block;
                                        background: url(../images/icon-arrow-double.svg) center center / contain no-repeat;
                                        width: 13px;
                                        height: 13px;
                                        margin-left: 10px;
                                    }
                                }
                            }
                        }
                    }
                    &.area1 {
                        margin-right: calc((120 / 1300) * 100%);
                        @include maxwidth(769) {
                            margin-right: 0;
                        }
                    }
                    &.area2 {
                        @include maxwidth(769) {
                            margin-top: 30px;
                        }
                    }
                }
            }
        }
    }
}
footer {
    #footer {
        margin-top: 100px;
        background-color: $subcolor;
        position: relative;
        @include maxwidth(600) {
            margin-top: 60px;
        }
        #totop {
            position: absolute;
            top: 0;
            right: 0;
            @include maxwidth(600) {
                left: 0;
                margin: auto;
                text-align: center;
            }
            a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 62px;
                height: 62px;
                background-color: $accentcolor;
                span {
                    text-transform: uppercase;
                    @include f_all(11);
                    @include ff_en;
                    @include fw_b;
                    position: relative;
                    &::before {
                        content: "";
                        display: block;
                        width: 6px;
                        height: 10px;
                        transform: rotate(-90deg);
                        background: url(../images/icon-arrow-color.svg) center center / contain no-repeat;
                        margin: 0 auto 4px;
                    }
                }
            }
        }
        .container {
            // @include container(582,25);
            color: $subtextcolor;
            padding: 100px 0 36px;
            @include maxwidth(600) {
                padding: 129px 0 30px;
            }
            .sitename {
                text-align: center;
                a {
                    display: inline-flex;
                    align-items: center;
                    position: relative;
                    z-index: 1;
                    // gap: 0 10px;
                    @include maxwidth(600) {
                    }
                    img {
                        &:not(:first-child) {
                            margin-left: 10px;
                        }
                    }
                }
            }
            .footer_address {
                text-align: center;
                margin-top: 28px;
                @include maxwidth(600) {
                    margin-top: 20px;
                }
                P {
                    @include f_all(13, "", 24);
                    @include maxwidth(600) {
                        @include f_all(12, "", 24);
                    }
                }
            }
            .footer_menu {
                @include f_all(14, "", 20);
                @include fw_b;
                margin-top: 80px;
                display: flex;
                align-items: flex-start;
                justify-content: center;
                margin-left: 65px;
                @include maxwidth(769) {
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    margin-left: 0;
                }
                @include maxwidth(600) {
                    @include f_all(13, "", 20);
                    margin-top: 53px;
                }
                .menu {
                    @include maxwidth(769) {
                        &:not(:first-child) {
                            margin-top: 25px;
                        }
                    }
                    & > ul {
                        & > li {
                            margin-bottom: 0.65em;
                            & > a {
                                display: inline-block;
                                &.item-insta {
                                    position: relative;
                                    display: inline-block;
                                    padding-left: 35px;
                                    &::before {
                                        content: "";
                                        display: inline-block;
                                        width: 27px;
                                        height: 27px;
                                        background: radial-gradient(circle farthest-corner at 32% 106%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
                                        border-radius: 15px;
                                        position: absolute;
                                        top: 0;
                                        bottom: 1px;
                                        left: 0;
                                        margin: auto;
                                    }
                                    &::after {
                                        content: "";
                                        display: block;
                                        width: 17px;
                                        margin: auto;
                                        position: absolute;
                                        top: 0;
                                        bottom: 1px;
                                        left: 5px;
                                        background: url(../images/icon-awesome-instagram.svg) center center / 17px auto no-repeat;
                                    }
                                }
                            }
                            // 2階層目
                            & > ul {
                                margin-top: 0.65em;
                                & > li {
                                    margin-bottom: 0.65em;
                                    & > a {
                                        display: inline-block;
                                        position: relative;
                                        &::before {
                                            content: "";
                                            display: inline-block;
                                            width: 7px;
                                            height: 12px;
                                            background: url(../images/icon-arrow.svg) center center / contain no-repeat;
                                            margin-right: 10px;
                                            @include maxwidth(769) {
                                                display: none;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    &.menu1 {
                        margin-right: 130px;
                        @include maxwidth(769) {
                            margin-right: 0;
                        }
                    }
                    &.menu2 {
                        margin-right: 130px;
                        @include maxwidth(769) {
                            margin-right: 0;
                        }
                    }
                    &.menu3 {
                    }
                }
            }
            #copyRight {
                margin-top: 100px;
                text-align: center;
                @include maxwidth(600) {
                    margin-top: 80px;
                }
                p {
                    @include f_all(12);
                    @include maxwidth(600) {
                        @include f_all(11);
                    }
                }
            }
        }
    }
}
/* Top Page
==================================================================*/
.c_heading {
    h2 {
        span.ja {
            @include f_all(14);
            color: $subtextcolor;
            font-weight: 500;
            display: inline-block;
            //padding: 4px 15px 3px 15px;
            padding: 2px 15px 5px 15px;
            box-sizing: border-box;
            margin-left: 30px;
            background-color: $themecolor;
            position: relative;
            @include maxwidth(600) {
                @include f_all(12);
                margin-left: 26px;
            }
            &::before {
                content: "";
                display: block;
                width: 15px;
                height: 10px;
                border-top: solid 2px;
                border-left: solid 2px;
                border-color: $themecolor;
                position: absolute;
                bottom: 0;
                left: -15px;
            }
        }
        span.en {
            @include ff_en;
            text-transform: capitalize;
            @include f_all(80);
            @include fw_b;
            display: block;
            margin-top: 8px;
            @include maxwidth(600) {
                @include f_all(50);
            }
            span {
                font-size: 50%;
            }
        }
    }
}
[class*="c_btn"] {
    text-transform: capitalize;
    @include fw_b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 250px;
    width: 100%;
    min-height: 62px;
    padding: 0 5px;
    box-sizing: border-box;
    position: relative;
    @include maxwidth(600) {
        @include f_all(13);
    }
    @include maxwidth(480) {
        max-width: 100%;
    }
    &::after {
        content: "";
        display: inline-block;
        background: center center / contain no-repeat;
        opacity: 0;
        @include maxwidth(1080) {
            opacity: 1;
            width: 13px;
            height: 13px;
            margin-left: 10px;
        }
        @include maxwidth(480) {
            margin-left: 6px;
        }
    }
    &:not(.external) {
        &:hover {
            opacity: 0.9;
            &::after {
                opacity: 1;
                width: 13px;
                height: 13px;
                margin-left: 10px;
                transition: 0.3s ease-in-out;
                @include maxwidth(769) {
                }
                @include maxwidth(480) {
                    margin-left: 6px;
                }
            }
        }
    }
}
.c_btn_v1 {
    @include ff_en;
    color: $themecolor;
    @include f_all(18);
    border: solid 2px;
    border-color: $themecolor;
    background-color: $basecolor;
    @include maxwidth(600) {
        @include f_all(16);
    }
    &::after {
        background-image: url(../images/icon-arrow-double-color.svg);
        margin-bottom: -1px;
    }
}
.c_btn_v2 {
    @include f_all(14);
    color: $subtextcolor;
    background-color: $subcolor;
    @include maxwidth(600) {
        @include f_all(13);
    }
    &::after {
        background-image: url(../images/icon-arrow-double.svg);
        margin-bottom: 2px;
    }
    &.en {
        @include ff_en;
        @include f_all(18);
    }
}
.c_btn_v3 {
    @include ff_en;
    @include f_all(18);
    &::after {
    }
}
.c_btn_v3,
[class*="c_btn"].current {
    color: $subtextcolor;
    background-color: $themecolor;
    @include maxwidth(600) {
        @include f_all(16);
    }
    &::after {
        background-image: url(../images/icon-arrow-double.svg);
        margin-bottom: -1px;
    }
    &.external {
        position: relative;
        transition: 0.3;
        &::after {
            background-image: url(../images/icon-external-link.svg);
            opacity: 1;
            width: 13px;
            height: 13px;
            margin-left: 10px;
        }
    }
}
.c_btn_v3.en {
}
.c_layout {
    .container {
        @include container(1920, 0);
        p.leadtext {
            @include f_all(24, "", 32);
            @include fw_b;
            margin: 55px 0 33px;
            @include maxwidth(600) {
                @include f_all(20, "", 32);
                margin: 39px 0 35px;
            }
        }
        p.text {
            @include f_all(15, "", 32);
            @include maxwidth(600) {
                @include f_all(14, "", 28);
            }
        }
    }
}
#toppageAbout {
    position: relative;
    .shape {
        @include triangle(lowerright, calc((745 / 1920) * 100vw), calc((745 / 1920) * 100vw), $themecolor);
        position: absolute;
        right: 0;
        bottom: calc((-156 / 1920) * 100vw);
        z-index: 0;
    }
    .container {
        background: top right 18% / 578px 680px no-repeat;
        display: flex;
        align-items: center;
        // padding-bottom: 258px;
        padding-bottom: calc((258 / 1920) * 100vw);
        position: relative;
        @include maxwidth(1024) {
            flex-direction: column;
            align-items: flex-start;
            padding-bottom: 0;
            background: center right -100px / calc((578 / 1024) * 100%) auto no-repeat;
        }
        @include maxwidth(600) {
            background: center right -100px / calc((436 / 375) * 100%) auto no-repeat;
        }
        .about_docs {
            flex: 0 1 650px;
            order: 2;
            margin-left: calc((80 / 1920) * 100%);
            margin-right: 30px;
            @include maxwidth(1024) {
                margin: 45px 30px;
            }
            .btnarea {
                margin-top: 80px;
                @include maxwidth(600) {
                    margin-top: 46px;
                }
            }
        }
        .item_frame {
            span.image {
                display: block;
                width: 100%;
                height: 100%;
            }
            &.item_frame1 {
                position: relative;
                order: 1;
                width: calc((662 / 1920) * 100vw);
                height: calc((886 / 1920) * 100vw);
                @include maxwidth(1024) {
                    width: calc((345 / 375) * 100vw);
                    height: calc((250 / 375) * 100vw);
                }
                span.image {
                }
            }
            &.item_frame2 {
                position: absolute;
                right: 0;
                bottom: 0;
                order: 2;
                width: calc((838 / 1920) * 100vw);
                height: calc((420 / 1920) * 100vw);
                @include maxwidth(1024) {
                    position: relative;
                    right: auto;
                    bottom: auto;
                    width: calc((345 / 375) * 100vw);
                    height: calc((140 / 375) * 100vw);
                    margin-right: 0;
                    margin-left: auto;
                }
                span.image {
                }
            }
        }
    }
}
#toppageBusiness {
    position: relative;
    .shape {
        @include triangle(upperright, calc((745 / 1920) * 100vw), calc((745 / 1920) * 100vw), rgba($themecolor1, 0.75));
        position: absolute;
        top: calc((156 / 1920) * 100vw);
        right: 0;
        z-index: 0;
    }
    .container {
        @include container(1300, 30);
        z-index: 1;
        @include maxwidth(1024) {
            padding-top: 130px;
        }
        .heading {
        }
        .body {
            margin-top: 30px;
            .item_card {
                max-width: 960px;
                width: 100%;
                min-height: 320px;
                .card_docs {
                    background-color: rgba(#000, 0.66);
                    max-width: 350px;
                    width: 100%;
                    min-height: 320px;
                    .docs_inner {
                        color: $subtextcolor;
                        padding: 48px 40px 20px;
                        box-sizing: border-box;
                        @include maxwidth(600) {
                            padding: 44px 30px 20px;
                        }
                        .sub-heading {
                            text-align: center;
                            span.en {
                                text-transform: capitalize;
                                @include f_all(12);
                                display: inline-block;
                                padding: 4px 10px 3px;
                                box-sizing: border-box;
                                background-color: #000;
                                margin-bottom: 13px;
                            }
                            span.ja {
                                display: block;
                                @include f_all(20);
                                @include fw_b;
                            }
                        }
                        .sub-body {
                            margin-top: 20px;
                            min-height: 172px;
                            display: flex;
                            justify-content: space-between;
                            flex-direction: column;
                            p.text {
                                @include f_all(14, "", 28);
                            }
                            .btnarea {
                                margin-top: 20px;
                                text-align: center;
                            }
                        }
                    }
                }
                &.item_card1 {
                    background: center bottom -20px / cover no-repeat;
                    margin: 0 auto 0 0;
                    @include maxwidth(1024) {
                        background: center center / cover no-repeat;
                    }
                    .card_docs {
                        .docs_inner {
                            .sub-heading {
                            }
                            .sub-body {
                            }
                        }
                    }
                }
                &.item_card2 {
                    margin: 20px 0 0 auto;
                    background: center bottom -80px / cover no-repeat;
                    @include maxwidth(1440) {
                        background: center center / cover no-repeat;
                    }
                    .card_docs {
                        .docs_inner {
                            .sub-heading {
                            }
                            .sub-body {
                            }
                        }
                    }
                }
            }
        }
    }
}
#toppageProjects {
    margin-top: 130px;
    position: relative;
    @include maxwidth(600) {
        margin-top: 80px;
    }
    .shape {
        width: 100%;
        height: 2395px;
        background-color: $themecolor;
        clip-path: polygon(0 19%, 0 0, 100% 81%, 100% 100%);
        position: absolute;
        top: -320px;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 0;
        @include maxwidth(600) {
            top: -162px;
            bottom: auto;
            height: 886px;
            clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 52%);
        }
    }
    .projects_inner {
        background: rgba(#f2f0ee, 0.75);
        position: relative;
        z-index: 2;
        .container {
            @include container(1300, 30);
            padding: 100px 0 45px;
            .projects_head {
                display: flex;
                align-items: center;
                @include maxwidth(1024) {
                    display: block;
                }
                .heading {
                    order: 2;
                }
                .top_nav {
                    order: 1;
                    flex: 0 1 960px;
                    @include maxwidth(1024) {
                        margin-top: 46px;
                    }
                    ul {
                        li {
                            a {
                            }
                        }
                    }
                }
            }
            .projects_foot {
                margin-top: 40px;
                .headline {
                }
            }
        }
    }
}
.top_nav {
    ul {
        li {
            width: 250px;
            a {
            }
        }
    }
}
.nav {
    margin-bottom: 50px;
    ul {
        justify-content: center;
        li {
            width: 180px;
            a {
                max-width: 100%;
                min-height: 48px;
            }
        }
    }
}
[class*="nav"] {
    ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        // gap: 10px;
        // @include maxwidth(600) {
        //     gap: 7px;
        // }
        margin-bottom: -10px;
        li {
            margin-right: 10px;
            margin-bottom: 10px;
            &:last-child {
                margin-right: 0;
            }
            @include maxwidth(600) {
                margin-right: 7px;
                width: calc((100% - 7px) / 2);
                &:first-child {
                    margin-right: 0;
                    width: 100%;
                    a {
                        max-width: 100%;
                    }
                }
            }
            a {
                @include maxwidth(600) {
                    max-width: 100%;
                }
                @include maxwidth(374) {
                    @include f_all(12);
                }
            }
        }
    }
}
.headline.projects_headline {
    ul {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        // gap: 25px 10px;
        // @include maxwidth(480) {
        //     gap: 25px 0;
        // }
        margin-bottom: -25px;

        li {
            margin-bottom: 25px;
            margin-right: 10px;
            &:nth-child(3n) {
                margin-right: 0;
            }
            width: calc((100% - 20px) / 3);
            @include maxwidth(769) {
                width: calc((100% - 10px) / 2);
                &:nth-child(3n) {
                    margin-right: 10px;
                }
                &:nth-child(2n) {
                    margin-right: 0;
                }
            }
            @include maxwidth(480) {
                margin-right: 0 !important;
                width: 100%;
            }
            a {
                span.thumbnail {
                    height: 293px;
                    @include maxwidth(976) {
                        height: calc((293 / 976) * 100vw);
                    }
                    @include maxwidth(769) {
                        height: calc((340 / 769) * 100vw);
                    }
                    @include maxwidth(480) {
                        height: calc((400 / 480) * 100vw);
                    }
                }
            }
        }
    }
}
.top_headline.projects_headline {
    .slides {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        padding-bottom: 90px;
        position: relative;
        margin: 0 -25px;
        @include maxwidth(600) {
            margin: -22px 0;
        }
        .slider {
            margin: 0 25px;
            @include maxwidth(600) {
                margin: 0;
                padding: 22px 0;
            }
            a {
                span.thumbnail {
                    height: 400px;
                    @include maxwidth(1360) {
                        height: calc((400 / 1360) * 100vw);
                    }
                    @include maxwidth(1024) {
                        height: calc((388 / 1024) * 100vw);
                    }
                    @include maxwidth(600) {
                        height: calc((245 / 375) * 100vw);
                    }
                }
            }
            &.blank {
                a {
                    span.thumbnail {
                        // background-color: mix($themecolor, $basecolor, 0.3);
                    }
                    span.title {
                        @include ff_en;
                    }
                }
            }
        }
        ul.slick-dots {
            position: absolute;
            bottom: 9px;
            left: 50%;
            margin: auto;
            transform: translate(-50%, 0);
        }
        button.slick-arrow {
            position: absolute;
            bottom: 0;
            left: 50%;
            &.slick-next {
                transform: translate(calc(-50% + 60px), 0);
                @include maxwidth(1024) {
                    transform: translate(calc(-50% + 80px), 0);
                }
                @include maxwidth(600) {
                    transform: translate(calc(-50% + 60px), 0);
                }
            }
            &.slick-prev {
                transform: scale(-1, 1) translate(calc((-50% + 60px) + 30px), 0);
                @include maxwidth(1024) {
                    transform: scale(-1, 1) translate(calc((-50% + 80px) + 30px), 0);
                }
                @include maxwidth(600) {
                    transform: scale(-1, 1) translate(calc((-50% + 60px) + 24px), 0);
                }
            }
        }
    }
}
.projects_headline {
    a {
        display: block;
        span.thumbnail {
            display: block;
            width: 100%;
        }
        span.docs {
            display: block;
            padding-top: 20px;
            @include maxwidth(600) {
                padding-top: 12px;
            }
            & > span {
                display: block;
            }
            span.terms {
                display: block;
                @include f_all(13);
                @include maxwidth(600) {
                    @include f_all(12);
                }
                span.term {
                    display: inline-block;
                    color: $subtextcolor;
                    padding: 8px 8px 6px;
                    box-sizing: border-box;
                    background-color: $accentcolor;
                }
            }
            span.title {
                @include f_all(18);
                @include fw_b;
                margin-top: 15px;
                @include maxwidth(600) {
                    margin-top: 10px;
                    @include f_all(14);
                }
            }
            span.outline {
                @include f_all(16, "", 26);
                margin-top: 8px;
                @include maxwidth(600) {
                    @include f_all(14);
                }
            }
            span.date {
                @include f_all(16, "", 26);
                @include maxwidth(600) {
                    @include f_all(14);
                }
            }
        }
    }
}
#toppageRecruit {
    padding: 80px 0 136px;
    position: relative;
    @include maxwidth(600) {
        padding: 50px 0 60px;
    }
    .shape {
        @include triangle(lowerleft, calc((745 / 1920) * 100vw), calc((745 / 1920) * 100vw), rgba($themecolor1, 0.75));
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 0;
    }
    .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        @include maxwidth(1024) {
            flex-direction: column;
            align-items: flex-start;
        }
        .recruit_docs {
            order: 2;
            flex: 0 1 650px;
            margin: 0 calc((80 / 1920) * 100%);
            @include maxwidth(1024) {
                margin: 0;
                margin: 40px 30px 25px;
            }
            .btnarea {
                margin-top: 60px;
                @include maxwidth(600) {
                    margin-top: 50px;
                    a.btn {
                    }
                }
                .column {
                    margin-top: 9px;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    // gap: 9px;
                    margin-bottom: -8px;
                    a.btn {
                        margin-right: 9px;
                        margin-bottom: 9px;
                    }
                }
            }
        }
        .item_frame {
            display: block;
            width: 100%;
            height: calc((777 / 1920) * 100vw);
            @include maxwidth(1024) {
                width: calc((345 / 375) * 100vw);
                height: calc((250 / 375) * 100vw);
            }
            span.image {
                display: block;
                width: 100%;
                height: 100%;
            }
            &.item_frame1 {
                flex: 0 1 448px;
                order: 1;
                @include maxwidth(1024) {
                    flex: 0 1 auto;
                }
            }
            &.item_frame2 {
                flex: 0 1 662px;
                order: 3;
                @include maxwidth(1024) {
                    flex: 0 1 auto;
                    margin-right: 0;
                    margin-left: auto;
                }
            }
        }
    }
}

#toppageRecruit2 {
    padding-block: 80px;
    position: relative;
    @include maxwidth(600) {
        padding-block: 50px 60px;
    }
    margin-block: auto 80px;
    .shape {
        @include triangle(lowerleft, calc((745 / 1920) * 100vw), calc((745 / 1920) * 100vw), rgba($themecolor1, 0.75));
        position: absolute;
        inset: auto auto -80px 0;
        z-index: 0;
    }
	div.bgimage {
		position:absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(24, 32, 104, 0.80) 0%, rgba(0, 0, 0, 0.80) 100%);
		img {
			width: 100%;
			height:100%;
			object-fit: cover;
			mix-blend-mode: multiply;
		}
		&:after {
			content:'';
			display:block;
			position:absolute;
			inset: 0;
			backdrop-filter: grayscale(1);
		}
	}
	div.container {
		@include container(1300, 70);
		color:#fff;
		@include maxwidth(540){
			margin-inline: 0;
		}
		div.recruit_docs {
			div.body {
				div.docarea {
					display:flex;
					gap: 80px;
					margin-block: auto 45px;
					@include maxwidth(1024){
						gap: 40px;
					}
					@include maxwidth(860){
						flex-direction:column;
					}
					@include maxwidth(540){
						margin: auto 30px 45px;
					}
					div.left {
						flex: 1 1 540px;
						@include maxwidth(860){
							flex-basis: auto;
						}
						div.heading.c_heading {
							h2 {
								span.ja {
									background-color: #9b8a1f;
									&:before {
										border-color:#9b8a1f;
									}
								}
								span.en {
								}
							}
						}
						p.leadtext {
							margin-block: 40px 26px;
							@include maxwidth(860){
								margin-block: 20px;
							}
						}
						p.text {
						}
					}
					div.right {
						flex: 1 1 680px;
						@include maxwidth(860){
							flex-basis: auto;
						}
						div.image {
							height:100%;
							img {
								width:100%;
								height:100%;
								object-fit:cover;
							}
						}
					}
				}
				div.btnarea {
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					grid-template-rows: repeat(2, 1fr);
					gap: 10px;
					@include maxwidth(1024){
						grid-template-columns: repeat(2, 1fr);
						grid-template-rows: repeat(4, 1fr); 
					}
					@include maxwidth(768){
						display:block;
					}
					div.item {
						width: 100%;
						aspect-ratio: 317.5 / 280;
						&.item1, &.item4 { aspect-ratio: 317.5 / 570; }
						&.item1 { grid-area: 1 / 1 / 3 / 2; }
						&.item2 { grid-area: 1 / 2 / 2 / 3; }
						&.item3 { grid-area: 1 / 3 / 2 / 4; }
						&.item4 { grid-area: 1 / 4 / 3 / 5; }
						&.item5 { grid-area: 2 / 2 / 3 / 3; }
						&.item6 { grid-area: 2 / 3 / 3 / 4; }
						@include maxwidth(1024){
							&.item1 { grid-area: 1 / 1 / 3 / 2; }
							&.item2 { grid-area: 1 / 2 / 2 / 3; }
							&.item3 { grid-area: 2 / 2 / 3 / 3; }
							&.item4 { grid-area: 3 / 2 / 5 / 3; }
							&.item5 { grid-area: 3 / 1 / 4 / 2; }
							&.item6 { grid-area: 4 / 1 / 5 / 2; }
						}
						@include maxwidth(768){
							aspect-ratio: auto;
							height:180px;
						}
						a {
							display:flex;
							align-items:center;
							justify-content:center;
							width: 100%;
							height:100%;
							position:relative;
							padding-inline: 20px;
							box-sizing: border-box;
							span.image {
								position:absolute;
								inset: 0;
								img {
									width:100%;
									height:100%;
									object-fit: cover;
								}
								&:after {
									content:'';
									display:block;
									position:absolute;
									inset: 0;
									background: rgba(0, 0, 0, 0.60);
								}
							}
							span.title {
								position:relative;
								z-index:1;
								display: flex;
								width: 100%;
								max-width:236px;
								height: 53px;
								padding-inline: 8px;
								display:flex;
								justify-content: center;
								align-items: center;
								color: #FFF;
								font-size: clamp(12px, 1.25vw, 18px);
								font-weight: 700;
								border: 2px solid #FFF;
								box-sizing: border-box;
								gap: clamp(6px, 0.08vw, 12px);
								@include maxwidth(1024){
									font-size: 18px;
									gap: 12px;
								}
                                @include maxwidth(768){
                                    border: 1px solid #FFF;
                                }
								&:after {
									content:'';
									display:block;
									width:15px;
									height:15px;
									background: url(../images/icon-doublearrow-right-white.svg) center / contain no-repeat;
								}
								@include maxwidth(768){
									width: auto;
									height:auto;
									max-width:initial;
									position:absolute;
									inset: 10px;
								}
							}
							&:hover {
								opacity:1;
								span.title {
									background-color: rgba(155, 138, 31, 0.80);
									border-color:rgba(155, 138, 31, 0.80);
									transition: gap 0.3s ease-in-out;
									gap: clamp(8px, 0.97vw, 14px);
								}
							}
						}
					}
				}
			}
		}
	}



//    .container {
//        display: flex;
//        align-items: center;
//        justify-content: space-between;
//        @include maxwidth(1024) {
//            flex-direction: column;
//            align-items: flex-start;
//        }
//        .recruit_docs {
//            order: 2;
//            flex: 0 1 650px;
//            margin: 0 calc((80 / 1920) * 100%);
//            @include maxwidth(1024) {
//                margin: 0;
//                margin: 40px 30px 25px;
//            }
//            .btnarea {
//                margin-top: 60px;
//                @include maxwidth(600) {
//                    margin-top: 50px;
//                    a.btn {
//                    }
//                }
//                .column {
//                    margin-top: 9px;
//                    display: flex;
//                    align-items: center;
//                    flex-wrap: wrap;
//                    // gap: 9px;
//                    margin-bottom: -8px;
//                    a.btn {
//                        margin-right: 9px;
//                        margin-bottom: 9px;
//                    }
//                }
//            }
//        }
//        .item_frame {
//            display: block;
//            width: 100%;
//            height: calc((777 / 1920) * 100vw);
//            @include maxwidth(1024) {
//                width: calc((345 / 375) * 100vw);
//                height: calc((250 / 375) * 100vw);
//            }
//            span.image {
//                display: block;
//                width: 100%;
//                height: 100%;
//            }
//            &.item_frame1 {
//                flex: 0 1 448px;
//                order: 1;
//                @include maxwidth(1024) {
//                    flex: 0 1 auto;
//                }
//            }
//            &.item_frame2 {
//                flex: 0 1 662px;
//                order: 3;
//                @include maxwidth(1024) {
//                    flex: 0 1 auto;
//                    margin-right: 0;
//                    margin-left: auto;
//                }
//            }
//        }
//    }
}


#toppageNewsTopics {
    position: relative;
    z-index: 5;
    .container {
        padding: 110px 0;
        @include maxwidth(1024) {
            padding: 0;
        }
        .box_inner {
            overflow: hidden;
            max-width: 980px;
            width: 100%;
            margin: 0 auto;
            background-color: rgba(#000, 0.65);
            padding: 100px 105px 110px;
            box-sizing: border-box;
            position: relative;
            @include maxwidth(1024) {
                padding: 100px calc((105 / 980) * 100%) 110px;
            }
            @include maxwidth(600) {
                padding: 90px 30px 100px;
            }
            .border {
                background-color: mix($basecolor, $basetextcolor, 0.5);
                position: absolute;
                &.border1 {
                    width: 1px;
                    height: calc(100% - 60px);
                    left: 30px;
                    top: 30px;
                    @include maxwidth(600) {
                        height: calc(100% - 40px);
                        top: 20px;
                        left: 15px;
                    }
                }
                &.border2 {
                    width: calc(100% - 60px);
                    height: 1px;
                    bottom: 30px;
                    left: 30px;
                    @include maxwidth(600) {
                        width: calc(100% - 30px);
                        bottom: 20px;
                        left: 15px;
                    }
                }
                &.border3 {
                    width: 1px;
                    height: calc(100% - 60px);
                    bottom: 30px;
                    right: 30px;
                    @include maxwidth(600) {
                        height: calc(100% - 40px);
                        bottom: 20px;
                        right: 15px;
                    }
                }
                &.border4 {
                    width: calc(100% - 60px);
                    height: 1px;
                    top: 30px;
                    left: 30px;
                    @include maxwidth(600) {
                        width: calc(100% - 30px);
                        top: 20px;
                        left: 15px;
                    }
                }
            }
            .heading {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                span.en {
                    color: $subtextcolor;
                    @include maxwidth(374) {
                        @include f_all(46);
                    }
                }
            }
            .body {
                margin-top: 70px;
                @include maxwidth(600) {
                    margin-top: 35px;
                }
                .top_nav {
                    ul {
                        li {
                            a {
                                &:not(.current) {
                                    background-color: #fff;
                                    color: $basetextcolor;
                                    &::after {
                                        background-image: url(../images/icon-arrow-double-black.svg);
                                    }
                                }
                            }
                        }
                    }
                }
                .headline {
                    margin-top: 80px;
                    @include maxwidth(600) {
                        margin-top: 45px;
                    }
                }
            }
        }
    }
}
.headline.newstopics_headline {
    ul {
        li {
            &:first-child a {
                padding-top: 0;
            }
            a {
                color: $subtextcolor;
                display: flex;
                align-items: center;
                padding: 30px 40px 25px 30px;
                box-sizing: border-box;
                border-bottom: solid 1px;
                border-color: mix($basecolor, $subcolor, 0.5);
                position: relative;
                &::before {
                    content: "";
                    display: block;
                    width: 13px;
                    height: 13px;
                    background: url(../images/icon-arrow-double.svg) center center / contain no-repeat;
                    position: absolute;
                    bottom: 34px;
                    right: 30px;
                    @include maxwidth(769) {
                        right: 12px;
                        bottom: 18px;
                    }

                    body.subpage & {
                        background-image: url(../images/icon-arrow-double-black.svg);
                    }
                }
                @include maxwidth(769) {
                    flex-wrap: wrap;
                    padding: 30px 20px 10px 0;
                }
                & > span {
                    display: block;
                }
                span.date {
                    @include f_all(15);
                    margin-right: 20px;
                    @include maxwidth(600) {
                        @include f_all(13);
                    }

                    body.subpage & {
                        color: $basetextcolor;
                    }
                }
                span.terms {
                    @include f_all(13);
                    margin-right: 20px;
                    span.term {
                        display: inline-block;
                        padding: 6px 8px 5px;
                        box-sizing: border-box;
                        background-color: $accentcolor;
                    }
                    @include maxwidth(600) {
                        @include f_all(12);
                    }
                }
                span.title {
                    @include f_all(15, "", 32);
                    @include maxwidth(769) {
                        margin-top: 13px;
                        flex: 0 1 100%;
                    }
                    @include maxwidth(600) {
                        @include f_all(13, "", 28);
                    }
                    body.subpage & {
                        color: $basetextcolor;
                    }
                }
            }
        }
    }
}
#toppageInstagram {
    padding: 120px 0 0;
    position: relative;
    z-index: 2;
    @include maxwidth(600) {
        padding: 60px 0 0;
    }
    .shape {
        @include triangle(upperright, calc((1055 / 1920) * 100vw), calc((1055 / 1920) * 100vw), rgba($themecolor1, 0.75));
        position: absolute;
        top: 0;
        right: 0;
    }
    .container {
        @include container(1300, 30);
        .heading {
            display: flex;
            justify-content: flex-end;
            @include maxwidth(720) {
                display: block;
            }
            span.ja {
                // background: radial-gradient(at 32% 106%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
            }
            span.en {
                background: radial-gradient(at 10% 110%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                padding-bottom: 0.5em;
            }
        }
        .body {
            margin-top: 30px;
            .btnarea {
                margin-top: 50px;
                text-align: center;
                @include maxwidth(600) {
                    margin-top: 20px;
                }
                a {
                    &:hover {
                        opacity: 1;
                        background: radial-gradient(at -60% 100%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
                    }
                }
            }
        }
    }
}
/* Sub Page
==================================================================*/
/* SubPageHeadingVisual */
#subpageHeadingVisual {
    position: relative;
    padding-top: 124px;
    @include maxwidth(600) {
        padding-top: 90px;
    }
    .shape1 {
        @include triangle(leftward, 22vw, 49vw, rgba($themecolor1, 0.75));
        position: absolute;
        top: 60px;
        right: 0;
        @include maxwidth(600) {
            top: 250px;
        }
    }
    .container {
        position: relative;
        z-index: 1;
        span.image {
            display: block;
            border-radius: 10px;
            width: calc(100% - calc((430 / 1920) * 100%));
            height: 350px;
            margin: 0 auto;
            @include maxwidth(600) {
                width: calc(100% - 40px);
                height: 250px;
            }
        }
    }
}
/* TopicPath */
#subpageTopicPath {
    margin: 30px 0 50px;
    position: relative;
    z-index: 2;
    @include maxwidth(600) {
        margin: 20px 0 35px;
    }
    .container {
        @include container(1340, 30);
        ul {
            li {
                @include fw_b;
                display: inline;
                position: relative;
                &::after {
                    content: ">";
                    display: inline-block;
                    margin: 0 14px;
                }
                &:last-child {
                    &::after {
                        display: none;
                    }
                }
                a {
                    display: inline-block;
                    @include f_all(14);
                    @include maxwidth(600) {
                        @include f_all(12);
                    }
                }
            }
        }
    }
}
/* Pager */
.pager {
    text-align: center;
    margin: 110px 0 40px;
    @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;
        border-radius: 5px;
        background-color: mix($themecolor, $basecolor, 0.3);
        color: #fff;
    }
    .current {
        background-color: $themecolor;
    }
}
/* 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: mix($basetextcolor, $basecolor, 0.1);
        margin: auto;
        border-radius: 30px;
        position: relative;
        &:after {
            content: ">";
            display: inline-block;
            transform: rotateZ(90deg) scaleX(0.5);
            position: absolute;
            right: 30px;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    }
    ul {
        margin-top: 20px;
        display: none;
        &.show {
            display: flex;
        }
        justify-content: center;
        flex-wrap: wrap;
        li {
            margin: 0 5px 10px;
            flex: 0 0 113px;
            text-align: center;
            a {
                display: block;
                background-color: mix($basetextcolor, $basecolor, 0.05);
                padding: 7px 0;
                border-radius: 15px;
            }
        }
    }
}
/* SubpageHeading */
#subpageHeading {
    position: relative;
    z-index: 5;
    .container {
        @include container(1340, 30);
        z-index: 1;
        @include maxwidth(600) {
            margin-left: 18px;
            margin-right: 18px;
        }
        div.common_heading {
            h2 {
                span.ja {
                    @include f_all(14);
                    color: $subtextcolor;
                    font-weight: 500;
                    display: inline-block;
                    padding: 4px 15px 3px 15px;
                    box-sizing: border-box;
                    margin-left: 30px;
                    background-color: $themecolor;
                    position: relative;
                    @include maxwidth(600) {
                        @include f_all(12);
                        margin-left: 26px;
                    }
                    &::before {
                        content: "";
                        display: block;
                        width: 15px;
                        height: 10px;
                        border-top: solid 2px;
                        border-left: solid 2px;
                        border-color: $themecolor;
                        position: absolute;
                        bottom: 0;
                        left: -15px;
                    }
                }
                span.en {
                    @include ff_en;
                    text-transform: capitalize;
                    @include f_all(80);
                    @include fw_b;
                    display: block;
                    margin-top: 8px;
                    @include maxwidth(600) {
                        @include f_all(50);
                    }
                    span {
                        font-size: 50%;
                    }
                }
            }
        }
    }
}
/* SubpageContent */
#subpageContent {
    position: relative;
    overflow: hidden;
    z-index: 5;
    .shape {
        width: 100%;
        height: 2395px;
        background-color: $themecolor;
        clip-path: polygon(0 19%, 0 0, 100% 81%, 100% 100%);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        @include maxwidth(600) {
            top: 50px;
            height: 886px;
            clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 52%);
        }
    }
    #subpageContentInner {
        @include container(1490);
        background-color: rgba($basecolor, 0.98);
        margin-top: 30px;
        margin-bottom: 100px;
        padding: 80px 18px 90px;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
         @include maxwidth(600) {
            padding: 50px 18px 50px;
            margin-left: 0;
            margin-right: 0;
         }
        .container {
            max-width: 900px;
            width: 100%;
            margin: auto;
            position: relative;
        }
    }
}

//------------------ Concept Movie -----------------------//
#toppageMovie {
    padding: 80px 0;
    background-color: #000;
    position: relative;
    z-index: 1;
    .container {
        @include container(1280, 30);
        @include maxwidth(600) {
            margin: 0 15px;
        }
        //追加
        .heading {
            margin-bottom: 25px;
            h2 {
                span.ja {
                    background-color: $accentcolor;
                    &:before {
                        border-color: $accentcolor;
                    }
                }
                span.en {
                    color: $subtextcolor;
                }
            }
        }
        .inner {
            position: relative;
            span.image {
                display: block;
                width: 100%;
                height: 720px;
                @include maxwidth(1340) {
                    height: calc((720 / 1340) * 100vw);
                }
                @media (orientation: landscape) and (max-width: 1024px) {
                    height: 90vh;
                    max-height: 500px;
                }
                body.loaded & {
                    opacity: 0;
                }
            }
            .video {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                width: 100%;
                height: 100%;
                opacity: 0;
                @media (orientation: landscape) and (max-width: 1024px) {
                    max-width: 650px;
                    width: 80%;
                }
                body.loaded & {
                    opacity: 1;
                }
                video {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
    }
}

//------------------ Movie Button -----------------------//
#movie-button {
    @include absolute_centering;
    cursor: pointer; /*カーソルを指に変更*/
    z-index: 2;
    display: none;
    body.loaded & {
        display: block;
    }
    .movie-btn {
        transition: 1.2s ease-in-out;
        span {
            display: block;
            position: absolute;
            bottom: 35px;
            left: 40px;
            transition: 1.2s ease-in-out;
            @include maxwidth(600) {
                bottom: 25px;
                left: 28px;
            }
            // opacity: 0;
            // body.loaded & {
            //     opacity: 1;
            // }
            &.movie-btn-pause {
                &::before,
                &::after {
                    content: "";
                    display: block;
                    width: 8px;
                    height: 30px;
                    background-color: $accentcolor;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: auto;
                }
                &::before {
                    transform: translate(-8px, 0);
                }
                &::after {
                    transform: translate(8px, 0);
                }
            }
            &.movie-btn-play {
                z-index: 1;
                &::before {
                    content: "";
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-top: 15px solid transparent;
                    border-bottom: 15px solid transparent;
                    border-left: 30px solid $accentcolor;
                    border-right: 0;
                    position: absolute;
                    top: -16px;
                    bottom: 0;
                    left: -8px;
                    right: 0;
                    margin: auto;
                    @include maxwidth(600) {
                        // top: 0px;
                    }
                }
            }
        }
    }
}
//------------------ / Movie Button -----------------------//

//------------------ / Concept Movie -----------------------//