@charset "utf-8";

/*-------------------------*/
/*  base
/*-------------------------*/
:root,
:host {
    --white: #ffffff;
    --black: #000000;
    --main_text: #3e3a39;
}

* {
    box-sizing: border-box;
    position: relative;
}

body {
    /* font-family: 'ヒラギノ角ゴ ProN', 'Noto Sans JP', sans-serif, "メイリオ", Meiryo, 'Kosugi Maru', sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
    font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
    font-optical-sizing: auto;
    font-style: normal;
    position: relative;
    line-height: 1.8;
    font-size: 15px;
    color: var(--main_text);
}

body.sub {
    font-family: 'Noto Sans JP', sans-serif, "メイリオ", Meiryo, 'Kosugi Maru', sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    /* font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif; */
    font-optical-sizing: auto;
    font-style: normal;
    position: relative;
    line-height: 1.2;
    font-size: 16px;
    color: var(--main_text);
}

main {
    position: relative;
    z-index: 1;
}

* {
    position: relative;
    box-sizing: border-box;
}

a {
    color: #000;
}

.op {
    /* font-family: 'ヒラギノ角ゴ ProN', 'Noto Sans JP', sans-serif, "メイリオ", Meiryo, 'Kosugi Maru', sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
    font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
    color: #fff;
    font-weight: bold;
    font-size: 120px;
    line-height: 1;
    word-break: break-all;
    opacity: 0.2;
    overflow: hidden;
    max-width: 100%;
}

.op p {
    width: 3000px;
}

.op.bottom {
    text-align: left;
    position: absolute;
    bottom: 0;
}

.inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 100px 10px;
}

.inner div.is-1000,
.inner p.is-1000 {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

main .mv img {
    width: 100%;
}

h2 {
    font-size: 30px;
    position: relative;
    letter-spacing: normal;
    font-weight: normal;
}

h2.solid {
    text-align: center;
    margin-bottom: 40px;
}


h2 span:not(.small) {
    font-family: "Allura", cursive;
    color: #FBC061;
    font-size: 28px;
    letter-spacing: normal;
}

h2.dia span {
    display: inline-block;
    color: #FBC061;
    transform: rotate(-24deg);
    position: absolute;
    left: -24px;
    top: 0px;
}

h2.solid span {
    display: block;
}

.bgon:before {
    content: "";
    width: 100%;
    height: 100%;
    background: url("../img/greet_bg.png") no-repeat center;
    background-size: cover;
    position: absolute;
    opacity: 0.1;
}

.bgwon:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    opacity: 0.2;
    left: 0;
}

.btn {
    justify-content: flex-end;

}

.btn a {
    color: #000;
    background: url(../img/btn.png) no-repeat center right;
    background-size: contain;
    padding: 40px 56px;
}

.src_l:after {
    content: "";
    display: block;
    position: absolute;
    width: 500px;
    height: 1000px;
    bottom: -500px;
    left: 0;
    background: url(../img/bg_l.png) no-repeat top right;
    background-size: contain;
    z-index: -1;
    opacity: 0.3;
}

.src_r:after {
    content: "";
    display: block;
    position: absolute;
    width: 500px;
    height: 1000px;
    bottom: -500px;
    right: 0;
    background: url(../img/bg_r.png) no-repeat top right;
    background-size: contain;
    z-index: -1;
    opacity: 0.1;
}

.col2,
.col3,
.col4 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    /* justify-content: flex-start; */
    justify-content: space-evenly;
}

/*-------------------------/*-------------------------*/
/*  pc  
/*-------------------------/*-------------------------*/
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

header .inner {
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .inner li {
    display: inline-block;
}

header .inner li a {
    color: #fff;
    font-weight: bold;
    margin-left: 20px;
}

main {}

/*-------------------------*/
/*  mv
/*-------------------------*/
.mv {
    height: 100vh;
    min-height: 800px;
    background: url("../img/top_mv.png") no-repeat center;
    background-size: cover;
    overflow: hidden;
}


.mv .inner {
    width: 100%;
    height: 100%;
    max-width: 100%;
    padding: 0 10px;
}

.mv .logo_01 {
    width: 60%;
    position: absolute;
    left: -0;
    top: 55%;
    transform: translateY(-50%) translateX(0%);
    z-index: 96;
}

.mv .logo_02 {
    width: 58%;
    position: absolute;
    top: 55%;
    transform: translateY(-50%) translateX(0%);
    right: -0;
    z-index: 95;
}

.mv .logo_01.l01 {
    width: 47%;
    position: absolute;
    left: 74px;
    top: 53%;
    transform: translateY(-50%) translateX(0%);
    z-index: 98;
}

.mv .logo_01.l01.shrink {
    animation: logo_01_01 5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes logo_01_01 {
    100% {
        width: 9%;
        position: absolute;
        left: 44%;
        top: 75%;
        z-index: 98;
    }
}


.mv .logo_02.l02 {
    width: 45%;
    position: absolute;
    top: 55%;
    transform: translateY(-50%) translateX(0%);
    right: 85px;
    z-index: 98;
}

.mv .logo_02.l02.shrink {
    animation: logo_02_01 5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes logo_02_01 {
    100% {
        width: 8%;
        position: absolute;
        top: 75%;
        right: 44%;
        z-index: 98;
    }
}

.mv .mv_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    top: 0;
    right: 0;
    z-index: 98;
}

.mv .logo {
    display: block;
    position: absolute;
    z-index: 9699;
    top: 77%;
    left: 50%;
    max-width: 150px;
    transform: translateY(-50%) translateX(-50%);
}

.mv .logo img {
    max-width: 100%;
}

.mv .mv_text {
    color: #fff;
    display: block;
    width: 100%;
    max-width: 90%;
    font-weight: bold;
    font-size: 3em;
    letter-spacing: 1.5px;
    position: absolute;
    top: 27%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 110;
    opacity: 0;
}

.mv .mv_text.on {
    animation: luxurySlide 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes luxurySlide {
    0% {
        opacity: 0;
        transform: translateX(-40%);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%);
    }
}

.mv .mv_text_02 {
    color: #fff;
    display: block;
    width: 100%;
    max-width: 90%;
    font-size: 1.1em;
    letter-spacing: 1.5px;
    position: absolute;
    top: calc(26% + 80px);
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 110;
    opacity: 0;
    animation: luxurySlide_02 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.mv .mv_text_02.on {
    animation: luxurySlide_02 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes luxurySlide_02 {
    0% {
        opacity: 0;
        transform: translateX(-60%);
    }

    60% {}

    100% {
        opacity: 1;
        transform: translateX(-50%);
    }
}

.mv .mv_text,
.mv .mv_text_02,
.mv .logo img,
.mv .logo_01 img,
.mv .logo_02 img {
    display: none;
}


@media (max-width:790px) {
    .mv .mv_text {
        font-size: 1.5em;
    }

    .mv .logo_01 {
        width: 134%;
        position: absolute;
        top: 50%;
        left: -50%;
    }

    .mv .logo_02 {
        width: 134%;
        position: absolute;
        top: 50%;
        right: -50%;
    }

    .mv .logo_01.l01 {
        width: 115%;
        position: absolute;
        top: 51%;
        left: -50%;
        transform: translateY(-50%) translateX(0%);
        z-index: 98;
    }

    .mv .logo_02.l02 {
        width: 115%;
        position: absolute;
        top: 51%;
        transform: translateY(-50%) translateX(0%);
        right: -50%;
        z-index: 98;
    }
}

/*-------------------------*/
.line_01 {
    width: 97%;
    height: 4px;
    background: #f6aa3d;
    transform: scaleX(0);
    transform-origin: right center;
    position: absolute;
    top: calc(26% + 76px);
    right: 0;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1011;
    transform: scaleX(0);
}

.line_01.on {
    animation: lineExtend 0.8s ease-out forwards;
}

@keyframes lineExtend {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/*-------------------------*/
.line_02 {
    width: 2px;
    height: 100%;
    background: #7a7b78;
    transform: scaleY(0);
    transform-origin: right top;
    position: absolute;
    top: 0%;
    left: 2%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 100;
    transform: scaleX(0);
}

.line_10 {
    width: 2px;
    height: 100%;
    background: #7a7b78;
    transform-origin: right top;
    position: absolute;
    top: 0%;
    left: -1%;
}

.line_11 {
    left: 50%;
    top: 0;
    transform: translateY(0%) translateX(-50%);
    position: fixed;
    width: 100%;
    max-width: 1200px;
    height: 100vh;
    z-index: 100;
}

.group .line_11 {
    z-index: 1112;
}

.recruit .line_11 {
    /* left: 32%;
    top: 0;
    transform: translateY(0%) translateX(-50%);
    position: fixed;
    width: 49%;
    max-width: 1200px;
    height: 100vh;
    z-index: 100; */
}

.line_02.on {
    animation: lineExtend_02 3s ease-out forwards;
}

@keyframes lineExtend_02 {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

/*-------------------------*/
.line_03 {
    width: 25px;
    height: 80%;
    background: linear-gradient(to bottom,
            #666464 0%,
            #666464 30%,
            transparent 30%,
            transparent calc(30% + 20px),
            #666464 calc(30% + 20px),
            #666464 calc(60% + 20px),
            transparent calc(60% + 20px),
            transparent calc(60% + 40px),
            #666464 calc(60% + 40px),
            #666464 100%);
    transform: scaleY(0);
    transform-origin: right bottom;
    position: absolute;
    bottom: 0%;
    left: 4%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 100;
    transform: scaleX(0);
}

.line_03.on {
    animation: lineExtend_03 0.8s ease-out forwards;
}

@keyframes lineExtend_03 {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

/*-------------------------*/
.line_04 {
    width: 10px;
    height: 80%;
    background: #63676b;
    transform: scaleY(0);
    transform-origin: right bottom;
    position: absolute;
    top: 0%;
    left: 0.5%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 100;
    transform: scaleX(0);
}

.line_04.on {
    animation: lineExtend_03 0.8s ease-out forwards;
}

@keyframes lineExtend_03 {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

h2,
h3 {
    position: relative;
}

h2:after {
    content: "";
    display: block;
    width: 110%;
    height: 2px;
    background: #63676b;
    transform: scaleX(0);
    transform-origin: left center;
    position: absolute;
    top: 1.5em;
    left: -10%;
    z-index: 100;
    transform: scaleX(0);
}

body:not(#top) .recruit h2 {
    margin-bottom: 64px;
}

body:not(#top) .recruit h3 {
    margin-bottom: 30px;
    font-size: 20px;
    padding: 0 20px;
}

body:not(#top) .recruit div {
    line-height: 1.8;
}

body:not(#top) .recruit div.img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 250px;
}

.s60 {
    width: 60%;
}

.s40 {
    width: 38%;
}

.s40 img {
    position: absolute;
    bottom: -60px;
}

.s60 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.s60 ul li {
    width: calc((100% - 32px) / 3);
    /* 3枚/行、gap16px×2本ぶんを差し引く */
}

.s60 ul li a {
    display: block;
}

.s60 ul li img {
    width: 100%;
    height: auto;
    display: block;
}

.s40 img {
    width: 100%;
    height: auto;
    display: block;
}

body:not(#top) .recruit .mb-100 {
    padding-bottom: 80px;

}

.last {}

body.sub .recruit p {
    padding: 30px 0 4em 1em;
}

body.sub .recruit .inner {
    position: relative;
    z-index: 1111;
}

body:not(#top) .recruit h2:after {
    content: "";
    display: block;
    width: 50%;
    height: 2px;
    background: #f6aa3d;
    transform: scaleX(0);
    transform-origin: left center;
    position: absolute;
    top: 1.5em;
    left: -10%;
    z-index: 100;
    transform: scaleX(0);
}

.sustainable h3.active:after,
.strategy h3.active:after,
.recruit h3.active:after {
    content: "";
    display: block;
    width: 80%;
    height: 2px;
    background: #7a7b78;
    transform: scaleX(0);
    transform-origin: left center;
    position: absolute;
    top: 1.5em;
    left: 0%;
    z-index: 100;
    transform: scaleX(0);
    animation: h2line 1.5s ease-out forwards;
}

.sustainable header h3.active:after,
.strategy header h3.active:after,
.recruit header h3.active:after {
    display: none;
}

.strategy .sas_item h3.active:after {
    content: "";
    display: block;
    width: 80%;
    height: 2px;
    background: #7a7b78;
    transform: scaleX(0);
    transform-origin: left center;
    position: absolute;
    top: 1.2em;
    left: 0%;
    z-index: 100;
    transform: scaleX(0);
    animation: h2line 1.5s ease-out forwards;
}

h2.active:after {
    animation: h2line 0.8s ease-out forwards;
}

@keyframes h2line {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.fadeup {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 1s,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.fadeup.active {
    opacity: 1;
    transform: translateY(0);
}

/*-------------------------*/
/*  segment
/*-------------------------*/
.sections {
    width: 98%;
    margin: 0 auto;
}

.inner_02 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    gap: 0;
    padding: 10px 1em 10px 2em;
}

* {
    box-sizing: border-box;
}

.segment .flex {
    display: flex;
    gap: 20px;
}

.segment .flex div {
    flex: 1;
}

.segment .flex div span {
    text-align: center;
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
}

.segment .flex div a {
    width: 100%;
    margin: 60px auto 0;
    display: block;
    position: relative;
}

.segment .flex div p {
    width: 100%;
    text-align: center;
    position: absolute;
    top: -70px;
    z-index: 2;
}

.segment .flex div p.textbox {
    position: absolute;
    top: 80px;
    font-size: 0.85em;
}

.segment .flex div a div {
    width: 100%;
    max-width: 161px;
    margin: 0 auto 0;
    display: block;
    border: #23282d 1px solid;
    position: relative;
    padding: 135px 10px 10px;
    box-sizing: border-box;
    font-size: 0.7em;
    z-index: 1;
}

/* seg1〜seg5: 初期は非表示、hoverで直下のdivを下にスライドして表示する。
   opacity/transformのみで隠すため、非表示時もdivは通常のレイアウト幅を占有し続け、
   .segmentの高さ(hover前後)は変化しない */
.segment .flex .seg1 a>div,
.segment .flex .seg2 a>div,
.segment .flex .seg3 a>div,
.segment .flex .seg4 a>div,
.segment .flex .seg5 a>div {
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.segment .flex .seg1 a:hover>div,
.segment .flex .seg2 a:hover>div,
.segment .flex .seg3 a:hover>div,
.segment .flex .seg4 a:hover>div,
.segment .flex .seg5 a:hover>div {
    opacity: 1;
    transform: translateY(0);
}

/*-----------------*/
body.sub .text {
    gap: 0;
    padding: 10px 1em 10px 2em;
    padding: 20px 1em 30px 33px;
}

.st_01.col2>* {
    width: calc(36% - 15px);
}

body.sub .segments_wrap {
    background: #464d51;
    color: #ffffff;
}

body.sub .segments_wrap .inner {
    padding-top: 0;
    position: relative;
    z-index: 1111;
}

body.sub .segments_wrap .line_11 {
    z-index: 111;
}


body.sub .segments_wrap .inner .col2 {
    padding: 120px 10px;
}

body.sub .segments_wrap .btn2 a {
    color: #ffffff;
    background: transparent;
    text-align: left;
}

body.sub .segments_wrap .right {
    text-align: right;
}

body.sub .segments_wrap .right .buildtext {
    text-align: left;
    width: 100%;
    margin-right: 0;
    padding-left: 30%;
}

body.sub .segments_wrap h4 {
    margin-top: 100px;
}

body.sub .segments_wrap h4 span {
    border-bottom: 2px solid #fff;
}

body.sub .segments_wrap h4+p {
    font-size: 0.8em;
}

body.sub .segments_wrap .col2 {
    gap: 0;
    border-bottom: 1px solid #fff;
    padding-bottom: 120px;
}

body.sub .segments_wrap .col2>div {
    width: 70%;
}

body.sub .segments_wrap .col2 .r_logo_wrap {
    width: 30%;
}

body.sub .segments_wrap .col2 .logo_space {
    background: #fff;
    width: 200px;
    padding: 20px 20px 12px;
    box-sizing: border-box;
    text-align: center;
    margin: 0 auto;
}

body.sub .segments_wrap .col2 .r_logo_wrap p {
    margin-top: 15px;
    font-size: 1.25em;
    text-align: center;
    margin-bottom: 7px;
}

body.sub .segments_wrap .col2 .r_logo_wrap p span {
    border-bottom: 2px solid #ec9b3c;
}

body.sub .segments_wrap .col2 .r_logo_wrap p.small {
    margin-top: 0px;
    font-size: 0.7em;
    border-bottom: none;
    margin-bottom: 40px;
}

body.sub .segments_wrap .btn2 a {
    color: #fff;
    display: block;
    margin: 20px auto 0;
    border: 1px solid #fff;
    padding: 10px 10px 10px 20px;
    width: 53%;
    margin-bottom: 20px;
    font-size: 0.8em;
}

body.sub .segments_wrap .btn2 a:after {
    content: "";
    display: block;
    width: 130px;
    height: 18px;
    background: url(../img/link_arrow.png) no-repeat center right;
    position: absolute;
    right: -25px;
    top: 24%;
}

body.sub .segments_wrap .right {
    margin-top: 60px;
}

body.sub .segments_wrap .right p {
    margin-bottom: 30px;
}

body.sub .segments_wrap h3+p {
    margin-bottom: 30px;
    font-size: 0.8em;
    letter-spacing: -0.5px;
}

body.sub .segment>.col2>div {
    width: calc(40%);
}

body.sub .segment>.col2 .col2>div {
    width: calc(50%);
}

body.sub .segment .col2>.seg1 {
    width: calc(60%);
}

body.sub .segment .col2>.seg1 span {
    font-size: 1.1em;
}

body.sub .segment .col2>.seg2 {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

body.sub .segment .col2 .seg3 {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

body.sub .segment .col2 .seg4 {
    min-height: 200px;
}

body.sub .segment .col2 .seg5 {
    min-height: 200px;
}

body.sub .company .col2 p {
    margin: 2.5em 0 4em;

}

body.sub .sustainable p {
    margin-top: 2.5em;
}

body.sub .recruit img {
    height: auto;
    object-fit: cover;
}

body.sub .recruit .imgas {
    width: 30%;
    text-align: center;
    padding-top: 36px;
    margin-top: 30px;
    border-right: 1px solid #333;
}

body.sub .recruit .imgas img {
    width: 67%;
}

body.sub .recruit .midd {
    width: 42%;
    padding: 57px 40px 40px;
}

body.sub .recruit .last {
    width: 24%;
}

body.sub .recruit .midd p {
    font-size: 15px;
    line-height: 1;
}

body:not(#top) .recruit h3 {
    font-size: 26px;
    margin-bottom: 0;
}

body.sub .recruit .left {
    padding: 1em 2em 4em;
}

/*-------------------------*/
/*  greeting
/*-------------------------*/
.greeting .inner {
    position: relative;
    padding: 0 0 100px;
}

.greeting .image {
    position: relative;
    top: 100px;
    max-width: 280px;
    width: calc(25% - 15px);
}

.greeting .text {
    position: relative;
    padding: 40px 60px;
}

.texts {
    width: calc(75% - 15px);
    padding: 45px 60px 60px;
}

.greeting:before {
    content: "";
    width: 100%;
    height: 780px;
    background: #dcdddd;
    background-size: cover;
    position: absolute;
    opacity: 0.7;
    top: 0;
    left: 0;
}

.greeting h3 {
    font-size: 40px;
    margin-bottom: 30px;
}

/*-------------------------*/
/*  mission
    /*-------------------------*/
.mission h3 {
    color: #d6d6db;
    line-height: 1;
}

.mission h3 span {
    display: block;
}

.mission h3 span img {
    display: block;
    margin-left: auto;
}

.mission .inner>div {
    display: flex;
    align-items: top;
    margin-bottom: 80px;
}

.mission .inner>div h3 {
    text-align: right;
    font-size: 48px;
    width: 35%;
    padding-right: 30px;
}

.mission .inner>div div {
    width: 65%;
    line-height: 2;
}

.mission .inner>div div p {
    padding-left: 1.3em;
}

.mission .inner>div div p span::before {
    content: "●";
    display: block;
    color: #FBC061;
    position: absolute;
    left: -1.3em;
}

/*-------------------------*/
/*  group
    /*-------------------------*/
.group .text h2 {
    margin-bottom: 30px;
}

.group .text h3 {
    border-bottom: 1px solid #7a7b78;
    font-size: 1.5em;
}

.vision.group .text h2 {
    margin-bottom: 90px;
}

.vision.group .text h3 {
    border-bottom: 2px solid #7a7b78;
    padding-left: 10px;
    margin-bottom: 20px;
}

.vision.group .text .col2 li {
    width: 90%;
    font-size: 14px;
    margin-bottom: 30px;
}

.greeting .text h3 {
    font-size: 20px;
    margin-bottom: 60px;
}

.group .greeting .text h3 {
    border-bottom: none;
}

.group .greeting .text .right {
    text-align: right;
}

.group .greeting .text {
    padding-bottom: 0px;
}

.group .text h3 span {
    display: inline-block;
    margin-left: 1em;
    font-size: 0.5em;
    color: #f3982d;
}

.group .text .col2>div {
    margin-bottom: 40px;
}

.group .text ul li {
    padding-left: 1.2em;
    margin-top: 0.5em;
}

.group .text ul li:before {
    content: "●";
    display: inline;
    position: absolute;
    top: 0;
    left: 0;
}

.group .text div {}

.group .text .gr-item.is-b {
    margin-bottom: 30px;
}

.group .text .gr-item {
    padding: 50px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
}

.group .text .col3 .gr-item img {
    max-width: 100px;
    margin-bottom: 10px;
}

.group .text .col3 {
    gap: 30px;
}

.group .text .col3>* {
    width: calc(33% - 30px);
}

/*-------------------------*/
/*  sustainable
    /*-------------------------*/
/* .sustainable {
    background: url("../img/top_ss.png") no-repeat center;
    background-size: cover;
}

.sustainable h2 {
    text-align: center;
}

.sustainable p {
    text-align: center;
    margin-bottom: 60px;
}

.sustainable h2.solid {
    margin-bottom: 10px;
}

.sustainable .tex {
    text-align: left;
    line-height: 2;
}

.sustainable .tex {
    text-align: left;
    line-height: 2;
    margin-bottom: 60px;
} */
body.sub .sustainable .left {
    padding: 2em 2em 4em;
}

body.sub .sustainable p {
    padding: 1em 2em 4em 1em;
}

.btn {
    text-align: right;
}

/*-------------------------*/
/*  news
    /*-------------------------*/
.stitem.news h2 {
    margin-bottom: 40px;
}

.stitem.news ul {
    width: 100%;
    margin: 0 auto;
    border-top: 1px solid #ddd;
}

.stitem.news li {
    padding: 20px 5%;
    border-bottom: 1px solid #ddd;
}

.stitem.news li a {
    color: #000;
}

/*-------------------------*/
/*  recruit
    /*-------------------------*/
.recruit .center {
    line-height: 2;
    margin-bottom: 60px;
}


/*-------------------------*/
/*  footer
    /*-------------------------*/
footer {
    min-height: 500px;
}

footer:before {
    content: "";
    width: 100%;
    height: 100%;
    background: url("../img/greet_bg.png") no-repeat center;
    background-size: cover;
    position: absolute;
    opacity: 0.2;
}

.totop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 72px;
    z-index: 9999;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease, transform .2s ease;
}

.totop.is-visible {
    opacity: 1;
    visibility: visible;
}

.totop:hover {
    transform: translateY(-4px);
}

.totop img {
    width: 100%;
    display: block;
}

@media (max-width: 550px) {
    .totop {
        right: 12px;
        bottom: 12px;
        width: 56px;
    }
}

footer a {
    display: inline-block;
    padding-top: 10px;
    color: #fff;
}

.stitem.pp .inner * {
    text-align: left;
}

.stitem.pp .inner ul,
.stitem.pp .inner p {
    margin-bottom: 30px;
}

#cnt .stitem.pp h3 {
    margin-bottom: 6px;
}


/*-------------------------*/
/*  footer
/*-------------------------*/
#cnt main {
    padding-top: 78px;
}

.bread {
    background: #FFC269;
}

.bread .inner {
    padding: 10px;
}

.bread p {
    display: inline-block;
}

.bread a {
    color: #000;
}

/*-------------------------*/
/*  strategy
    /*-------------------------*/
#cnt h3 {
    font-size: 24px;
    margin-bottom: 30px;
}

#cnt.strategy h3 {
    font-size: 20px;
    margin-bottom: 48px;
}

#cnt.strategy .is-mb-03 h3 {
    font-size: 20px;
    margin-bottom: 70px;
}

#cnt .st_item.grow.is-mb-03 .col2>div,
#cnt .st_item.grow.is-mb-03 .col3>div {
    max-width: 300px;
    text-align: left;
    border: 1px solid #231815;
    position: relative;
    padding: 20px 20px 60px;
    box-sizing: border-box;
}

#cnt.strategy .is-mb-03 .text {
    padding: 30px 0;
}

.shorts {
    padding-bottom: 0px !important;
}

#cnt.strategy .is-mb-03 .shorts div {
    padding-top: 35px !important;
}

#cnt .st_item.grow .col2>div h4 {
    font-size: 18px;
    padding-bottom: 5px;
}

.flexer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.flexer>div {
    text-align: center;
    width: calc((100% - 32px) / 3);
    /* 3枚/行、gap16px×2本ぶんを差し引く */
}

.shorts2 {
    padding-bottom: 0px !important;
}

#cnt.strategy .is-mb-03 .shorts2 div {
    padding-top: 35px !important;
}

#cnt h4 {
    font-size: 18px;
    margin-bottom: 20px;
}

.strategy_wrap,
.history,
.greeting,
footer,
.stitem {
    position: relative;
    z-index: 1111;
}

#cnt.strategy .stitem .is-center h4,
#cnt.strategy .stitem .is-center p,
#cnt.strategy .stitem {
    text-align: center;
}

#cnt.strategy .stitem .op,
#cnt.strategy .stitem h2 {
    text-align: left;
}

#cnt.strategy .stitem h2.solid {
    text-align: center;
}

#cnt.strategy .cacht {
    margin: 65px 0 120px 0;
}

#cnt.strategy .cacht.is-02 {
    margin: 65px 0 32px 0;
}

#cnt main .nopad .inner {
    padding-top: 0;
}

#cnt .st_item {
    margin-bottom: 60px;
}

#cnt .st_item p {
    margin-bottom: 30px;
}

#cnt .st_item.mb-30 p {
    margin-bottom: 100px;
}

#cnt .st_item.bgons .col2>div,
#cnt .st_item.bgons .col3>div {
    text-align: left;
    border: 1px solid #464d51;
}

#cnt .st_item.bgons .col2>div h4,
#cnt .st_item.bgons .col3>div h4 {
    padding: 10px;
    color: #fff;
    text-align: center;
    background: #464d51;
    margin-bottom: 0;
}


#cnt .st_item.grow .col2>div,
#cnt .st_item.grow .col3>div {
    text-align: left;
    border: 1px solid #231815;
    position: relative;
    padding: 20px 20px 60px;
    box-sizing: border-box;
}

#cnt .st_item.grow .col2>div h4,
#cnt .st_item.grow .col3>div h4 {
    text-align: center;
    border-bottom: 2px solid #23282d;
}

#cnt .st_item.grow .col2>div .img,
#cnt .st_item.grow .col3>div .img {
    opacity: 0.2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

#cnt .st_item.grow .col2>div p,
#cnt .st_item.grow .col3>div p {
    text-align: center;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
}

#cnt .st_item h4 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 5px;
}

.mb-50 {
    margin-bottom: 30px !important;
}


#cnt .st_item span::before {
    content: "●";
    display: block;
    position: absolute;
    left: -1.3em;
}

#cnt.strategy .stitem .is-center .img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    opacity: 0.3;
}

/*-------------------------*/
/*  group
    /*-------------------------*/
#cnt .gr_item {
    padding: 50px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.023);
    text-align: left;
    margin-bottom: 60px;
    align-items: center;
}

#cnt .gr_item h4 {
    font-size: 40px;
}

#cnt .gr_item .logoimg {
    width: calc(20% - 15px);
    border-right: 2px solid #7a7b78;
}

#cnt .gr_item .texts {
    width: calc(80% - 15px);
}

.tex2 {
    margin-top: 30px;
}

#cnt .greeting .texts p {
    line-height: 1.8;
}

#cnt .gr_item .texts a {
    display: block;
    margin-bottom: 10px;
}

#cnt .gr_item .logoimg img {
    max-width: 150px;
}

/*-------------------------*/
/*  group
    /*-------------------------*/

#cnt .cut {
    height: 300px;
    overflow: hidden;
}

#cnt .sas_item {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 0;
    border-bottom: 1px solid #fff;
}

#cnt .sas_item:last-child {
    border-bottom: none;
}

#cnt .sas_item h3 {
    margin-bottom: 10px;
}

#cnt .sas_item .sub {
    margin-bottom: 40px;
}

#cnt .sas_item .icon {
    margin-bottom: 40px;
}

#cnt .sas_item .theme {
    margin-top: 40px;
}

#cnt .sas_item .colors {
    color: #FBC061;
}

/*-------------------------*/
/*  recruit
/*-------------------------*/

.tmc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}


.entry .midd a {
    color: #00a0d2;
}

.entry .btn2 {
    position: relative;
    height: 100%;
}

.entry .btn2 a {
    margin-left: auto;
    display: block;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px 50px;
    width: 100%;
    margin-bottom: 20px;
    z-index: 1111;
    text-align: left;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 100;
}

.entry .btn2 a:after {}

main .btn2 {
    text-align: right;
}

main .btn2 a {
    margin-left: auto;
    color: #7a7b78;
    display: inline-block;
    border: 1px solid #7a7b78;
    padding: 20px 80px 20px 30px;
    width: auto;
    margin-bottom: 20px;
    background: #fff;
}

main .btn2 a:after {
    content: "";
    display: block;
    width: 200px;
    height: 12px;
    background: url(../img/link_arrow_b.png) no-repeat center right;
    position: absolute;
    right: -39px;
    top: 43%;
    scale: 50%;
}

footer .btn2 a {
    margin-left: auto;
    color: #7a7b78;
    display: block;
    border: 1px solid #7a7b78;
    padding: 30px;
    width: 53%;
    margin-bottom: 20px;
}

footer .btn2 a:after {
    content: "";
    display: block;
    width: 200px;
    height: 12px;
    background: url(../img/link_arrow_b.png) no-repeat center right;
    position: absolute;
    right: 20px;
    top: 43%;
}

.is-lefter .img {
    width: 60%;
}

.is-lefter .btn2 {
    width: 35%;
}


footer {
    background: url("../img/foot_img.png") repeat-x left bottom;
}

.foot {
    text-align: center;
    background: #000;
    color: #fff;
}


/* 
.menus {
    position: absolute;
    bottom: 5vw;
    z-index: 9999999;
    width: 100%;
}
    .menus ul {
    display: flex;
    width: 100%;
}

.menus li {
    text-align: center;
    width: 25%;
}

.menus li img {
    width: 180px;
}

.menus li span {
    display: block;
    position: absolute;
    bottom: 13rem;
    left: 0px;
    padding: 6px 10px;
    font-size: 1em;
    border-radius: 10px;
    transition: 0.5s;
    opacity: 0;
    background: url(../img/btn.png) no-repeat center right;
    background-size: contain;
    padding: 20px 19px 20px 0px;
    min-width: 60%;
} */

.menus {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 9999999;
    width: 100%;
}

.menus.menu_02 {
    z-index: 999999;
}

.menus ul {
    width: 100%;
    height: 100%;
}

.menus li {
    text-align: center;
    width: 180px;
    position: absolute;
}

.menus2 li {
    width: 130px;
}

.menus li:nth-child(1) {
    top: 25%;
    left: 25%;
}

.menus li:nth-child(2) {
    top: 65%;
    left: 25%;
}

.menus li:nth-child(3) {
    top: 25%;
    left: 62%;
}

.menus li:nth-child(4) {
    top: 65%;
    left: 62%;
}


.menus.menu_02 li:nth-child(1) {
    top: 68%;
    left: 83%;
}

.menus.menu_02 li:nth-child(2) {
    top: 28%;
    left: 83%;
}

.menus.menu_02 li:nth-child(3) {
    top: 68%;
    left: 4%;
}

.menus.menu_02 li:nth-child(4) {
    left: 3%;
    top: 27%;
}


@keyframes blur_animation {
    0% {
        filter: drop-shadow(0 0 0 #aaa);
    }

    100% {
        filter: drop-shadow(0px 5px 4px #aaa);
    }
}

.blur_animation {
    animation: blur_animation 1s linear 0s 1 normal forwards running;
}

.logoanime {
    filter: drop-shadow(0px 5px 4px #aaa);
}

.menus.menu_02 li,
.menus a {
    display: none;

}

.menus li img {
    width: 180px;
}

.menus li span {
    display: block;
    position: absolute;
    /* bottom: 13rem;
    8rem */
    bottom: 8rem;
    left: 0px;
    padding: 6px 10px;
    /* background: #1f1e1b; */
    /* color: #FFF; */
    font-size: 1em;
    border-radius: 10px;
    transition: 0.5s;
    opacity: 0;
    background: url(../img/btn.png) no-repeat center right;
    background-size: contain;
    padding: 20px 19px 20px 0px;
    min-width: 60%;
}


/* .menus li span:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 16px;
    border: 5px solid transparent;
    border-top: 14px solid #1f1e1b;
} */

.menus li:hover span {
    opacity: 1;
}

.menus a:hover {
    opacity: 1;
}

/*-------------------------/*-------------------------*/
/*  sp  
/*-------------------------/*-------------------------*/
@media (max-width: 1156px) {

    #cnt header {
        position: relative;
    }

    footer {
        text-align: center;
    }

    .op {
        height: 100px;
    }

    #cnt main {
        padding-top: 0;
    }

    .greeting .image {
        position: relative;
        z-index: 888;
        top: 0;
        left: -0;
        text-align: center;
    }

    h2.solid {
        text-align: center;
        margin-bottom: 80px;
    }

    .greeting .inner p,
    .greeting h3 {
        padding-left: 0%;
    }

    .mission .inner>div {
        display: block;
        margin-bottom: 80px;
    }

    .mission .inner>div h3 {
        text-align: center;
    }

    .mission h3 span img {
        display: block;
        margin-right: auto;
        margin-bottom: 5px;
    }

    .mission .inner>div h3 {
        margin-bottom: 20px;
    }

    .mission .inner>div div,
    .mission .inner>div h3 {
        width: 100%;
    }

    .col5,
    .col6,
    .col2,
    .col3,
    .col4 {
        display: block;
    }

    #cnt .gr_item .logoimg,
    #cnt .gr_item .texts,
    .group .text .col3>*,
    .col5>*,
    .col6>*,
    .col2>*,
    .col3>*,
    .col4>* {
        width: 100%;
    }

    .btn {
        margin-top: 80px;
    }

    .gr_item {
        text-align: center;
    }

    #cnt .gr_item .logoimg {
        text-align: center;
        border-right: none;
    }

    .recruit .rec_mv {
        background: url("../img/re_mv.png") no-repeat top center #bc702fc4;
        background-size: auto 49.7%;
        color: #fff;
        text-align: center;
    }

    .recruit .rec_mv .fast {
        height: 100vh;
        background: rgba(188, 112, 47, 0.77);
        display: flex;
        padding: 0 20px;
        justify-content: center;
        align-items: center;
    }

    .recruit .rec_mv .sec {
        padding: 100px 20px;
    }

    .recruit .tec_cat .col5 {
        flex-wrap: wrap;
    }

    .recruit .tec_cat.flow .col5>div,
    .recruit .tec_cat .col5>div {
        width: 47%;
        margin-bottom: 10px;
    }

    .entry .btn2 a {
        width: 100%;
    }

    footer:before {
        display: none;
    }

    .src_l:after {
        content: "";
        display: block;
        position: absolute;
        width: 60%;
        height: 1000px;
        bottom: -500px;
        left: 0;
        background: url(../img/bg_l.png) no-repeat top right;
        background-size: contain;
        z-index: -1;
        opacity: 0.3;
    }

    footer .btn2 a {
        width: 100%;
    }

}

@media (max-width: 550px) {
    .menus {
        position: absolute;
        bottom: 32vw;
        z-index: 9999999;
        width: 95%;
    }

    .menus li img {
        width: 120px;
    }

    .menus li:nth-child(1) {
        top: 30%;
        left: 4%;
    }

    .menus li:nth-child(2) {
        top: 64%;
        left: 3%;
    }

    .menus li:nth-child(3) {
        top: 30%;
        left: 58%;
    }

    .menus li:nth-child(4) {
        top: 64%;
        left: 57%;
    }

    .mv .mv_text {
        top: 31%;

    }

    .menus li span {
        display: block;
        position: absolute;
        bottom: 7rem;
        left: 0px;
        padding: 6px 10px;
        font-size: 0.8em;
        border-radius: 10px;
        transition: 0.5s;
        opacity: 0;
    }

    .menus.menu_02 li:nth-child(1) {
        top: 54%;
        left: 71%;
    }

    .menus.menu_02 li:nth-child(2) {
        top: 43%;
        left: 70%;
    }

    .menus.menu_02 li:nth-child(3) {
        top: 56%;
        left: -8%;
    }

    .menus.menu_02 li:nth-child(4) {
        left: -10%;
        top: 42%;
    }

}

/*----*/
.bg_00_wrap {
    opacity: 0;
    top: 5px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    animation-name: fade-in;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
    animation-delay: .1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

@keyframes fade-in {
    0% {
        transform: translate(-50%, -35%);
    }

    100% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.logos img {
    width: 50px;
    animation: rotateAnimation 5s linear infinite;
}

@keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ---------------------------------------- */
.wpcf7 {
    width: 100%;
    max-width: 800px;
    margin: 60px auto 0;
}

.wpcf7 form {
    width: 500px;
    max-width: 100%;
    margin: 0 auto;
}

.wpcf7 input,
textarea,
select {
    width: 100%;
    border-radius: 5px;
    padding: 10px;
    border: none;
    margin-bottom: 20px;

}

.wpcf7-submit {
    background: #FFC269;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

.stitem.news li p {
    display: inline;
}

.wpcf7 .screen-reader-response {
    position: absolute;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    word-wrap: normal !important;
}

.wpcf7 form .wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2;
    /* Blue */
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
    display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450;
    /* Green */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    border-color: #dc3232;
    /* Red */
}

.wpcf7 form.spam .wpcf7-response-output {
    border-color: #f56e28;
    /* Orange */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #ffb900;
    /* Yellow */
}

.wpcf7-form-control-wrap {
    position: relative;
}

.wpcf7-not-valid-tip {
    color: #dc3232;
    /* Red */
    font-size: 1em;
    font-weight: normal;
    display: block;
}

.use-floating-validation-tip .wpcf7-not-valid-tip {
    position: relative;
    top: -2ex;
    left: 1em;
    z-index: 100;
    border: 1px solid #dc3232;
    background: #fff;
    padding: .2em .8em;
    width: 24em;
}

.wpcf7-list-item {
    display: inline-block;
    margin: 0 0 0 1em;
}

.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
    content: " ";
}

.wpcf7-spinner {
    visibility: hidden;
    display: inline-block;
    background-color: #23282d;
    /* Dark Gray 800 */
    opacity: 0.75;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: 0 24px;
    position: relative;
}

form.submitting .wpcf7-spinner {
    visibility: visible;
}

.wpcf7-spinner::before {
    content: '';
    position: absolute;
    background-color: #fbfbfc;
    /* Light Gray 100 */
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border: none;
    border-radius: 100%;
    transform-origin: 8px 8px;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
    .wpcf7-spinner::before {
        animation-name: blink;
        animation-duration: 2000ms;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes blink {
    from {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.wpcf7 [inert] {
    opacity: 0.5;
}

.wpcf7 input[type="file"] {
    cursor: pointer;
}

.wpcf7 input[type="file"]:disabled {
    cursor: default;
}

.wpcf7 .wpcf7-submit:disabled {
    cursor: not-allowed;
}

.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
    direction: ltr;
}

.wpcf7-reflection>output {
    display: list-item;
    list-style: none;
}

.wpcf7-reflection>output[hidden] {
    display: none;
}


/*----------------------------------*/
#top.sub main,
#cnt.sub main {
    padding-top: 70px;
}

.cnts .inner {
    padding-top: 100px;
}

.col6 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2em;
}

.col6>li {
    width: 16%;
    font-weight: bold;
}

.col6>li.segs {
    width: 20%;
}

@media (max-width: 1156px) {

    .col6>li,
    .col6>li.segs {
        width: 100%;
    }
}

.col6 li {
    padding-top: 10px;
}

.col6 a {
    color: var(--main_text);
    padding-top: 0;
}

body.sub header {
    background: #fff;
}

body.sub header .inner {
    width: 100%;
    padding: 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.sub header li {
    color: #7a7b78;
    font-weight: bold;
    cursor: pointer;
    padding: 20px 0;
}

body.sub header nav>ul>li {
    padding: 20px 0;
}

body.sub header li>div {
    width: 100dvw;
    position: fixed;
    top: 67px;
    left: 0;
    background: #fcfcfc;
    z-index: 99999;
    display: none;
    justify-content: center;
}

body.sub header li div.flex {
    display: flex;
}

body.sub header li.has-sub:before {
    content: ">";
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0;
    left: 0;
    transform: rotate(90deg);
}

body.sub header li ul li {
    padding: 10px 0;
    display: block;
}

body.sub header li ul.active {
    height: 100px;
}

body.sub header .inner .logo {
    width: 38%;
}

body.sub header .inner li {
    margin-left: 20px;
    font-weight: normal;
}

body.sub header .inner li a {
    color: #7a7b78;
    margin-left: 0px;
    font-weight: normal;
}

body.sub header li div h3 {
    width: calc(50% - 10px);
    text-align: right;
    border-right: 1px solid #7a7b78;
    font-size: 1.6em;
    font-weight: bold;
    margin: 20px 0;
    margin-right: 10px;
    padding-right: 10px;
}

body.sub header .inner ul ul {
    width: 50%;
    margin: 20px auto;
}

body.sub header .inner ul ul a {
    display: block;
}

body.sub .logo_wrap {
    /* background: #ffc87a; */
    background: #fff;
    text-align: center;
    padding: 10em 0;
}

body#cnt.sub .segment {
    text-align: center;
}

body#top.sub .company {
    padding: 2em 0 4em;
}



body.sub .segment h2 {
    padding: 0 10px 50px;
}

body.sub .segment h3 {
    font-size: 2em;
    font-weight: bold;
    color: #FBC061;
    padding: 100px 10px 50px;
}

body.sub .segment .ts {
    padding: 0 10px 50px;
}

.mt-20 {
    margin-top: 50px;
}

body.sub .sustainable h3,
body.sub .recruit h3 {
    font-size: 1.25em;
}


body.sub.recruit .rec_mv {
    color: #7a7b78;
    background: #FFC269;
}

body.sub.recruit .tec_cat {
    color: #7a7b78;
    background: #FFC269;
}

body.sub.recruit .tec_cat h2 {
    color: #7a7b78;
    margin-bottom: 60px;
}

body.sub.recruit .tec_cat .col5>div {
    width: 18%;
    padding: 20px;
    border-radius: 10px;
    background-color: #ffe0a2;
}

body.sub.recruit .tec_cat.flow .col5>div {
    width: 15%;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

body.sub.recruit .slider {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

body.sub.recruit .slider .img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

body.sub.recruit .slider .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
}

body.sub.recruit .rec_mv .fast {
    height: 51.2vw;
    background: rgba(188, 112, 47, 0.77);
    display: block;
    overflow: hidden;
}

body.sub.recruit .rec_mv .fast p {
    z-index: 999;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;
}

/* 
body.sub .sustainable {
    padding: 2em 2em 4em;
    text-align: left;
}

body.sub .sustainable p,
body.sub .sustainable h2 {
    text-align: left;
} */


body.sub .segment .btn2 a {
    margin: 5em auto 0;
    color: #7a7b78;
    display: block;
    border: 1px solid #7a7b78;
    padding: 30px;
    width: 53%;
    margin-bottom: 20px;
}

body.sub .segment .btn2 a:after {
    content: "";
    display: block;
    width: 200px;
    height: 12px;
    background: url(../img/link_arrow_b.png) no-repeat center right;
    position: absolute;
    right: 20px;
    top: 48%;
}

body.sub .t-le {
    text-align: left;
    margin-top: 180px;
    max-width: 980px;
}

body.sub .t-le .col2 {
    margin-bottom: 60px;
}

body.sub .t-le .img {
    text-align: center;
}

body.sub .recruit {
    background: url("../img/recruit_bg.png") no-repeat center;
    background-size: cover;
    background-attachment: fixed;
}



@media (max-width:790px) {
    body.sub .segment>.col2>div {
        width: calc(100%);
    }

    body.sub .segment>.col2 .col2>div {
        width: calc(100%);
    }

    body.sub .segment .col2>.seg1 {
        width: calc(100%);
    }

    body.sub .segment .col2>* {
        margin: 0 auto 0;
    }
}


.mb-40.is-80 {
    margin-bottom: 80px;
}

body.sub .recruit p.pl-60 {
    padding-left: 3em;
}

body.sub .recruit p {
    margin-top: 2.5em;
    padding: 1em 2em 4em 1em;
}

.mt-60 {
    margin-top: 60px;
}

/*-------------------------/*-------------------------*/
/*  sp : 1カラム時は横幅を100%に統一
/*-------------------------/*-------------------------*/
@media (max-width: 1156px) {

    /* 分数幅で残っている要素をすべて全幅に */
    .greeting .image,
    .greeting .texts,
    .texts,
    .s60,
    .s40,
    .s60 ul li,
    .flexer>div,
    .st_01.col2>*,
    .is-lefter .img,
    .is-lefter .btn2,
    .vision.group .text .col2 li,
    body.sub .segment>.col2>div,
    body.sub .segment>.col2 .col2>div,
    body.sub .segment .col2>.seg1,
    body.sub .segments_wrap .col2>div,
    body.sub .segments_wrap .col2 .r_logo_wrap,
    body.sub .segments_wrap .col2 .logo_space,
    body.sub .segments_wrap .btn2 a,
    body.sub .segment .btn2 a,
    body.sub .recruit .imgas,
    body.sub .recruit .midd,
    body.sub .recruit .last {
        width: 100%;
    }

    /* 幅を絞っていた max-width も解除 */
    #cnt .st_item.grow.is-mb-03 .col2>div,
    #cnt .st_item.grow.is-mb-03 .col3>div,
    #cnt .st_item.grow .col2>div,
    #cnt .st_item.grow .col3>div,
    .segment .flex div a div {
        max-width: 100%;
    }

    /* 内側パディングで実質幅が欠けていた箇所を解除 */
    body.sub .segments_wrap .right .buildtext {
        padding-left: 0;
    }

    /* トップページの事業セグメントも縦積み(1カラム)に */
    .segment .flex {
        display: flex;
        flex-wrap: wrap;
    }

    .segment .flex>div {
        width: 47%;
        max-width: 47%;
        flex: auto;
    }

    .segment .flex div a {
        margin-top: 110px;
    }

    .segment .flex div a div {
        width: 80%;
    }

    body.sub .recruit .left {
        padding: 1em 0 4em;
    }

    body.sub .sustainable .left {
        padding: 2em 0 4em;
    }

    .col6>li {
        margin-bottom: 2em;
    }

    main .btn2 {
        width: 50%;
        margin: 0 auto;
        text-align: right;
    }

    .group .text .col2>div.texts {
        width: 100%;
        padding: 45px 0 60px;
    }

    .texts,
    body.sub .text {
        gap: 0;
        width: 100%;
        padding: 20px 1em 30px;
    }

    body.sub .strategy_wrap .text {
        padding: 20px 2em 30px;
    }

    .sustainable h3.active:after,
    .strategy h3.active:after,
    .recruit h3.active:after {
        top: auto;
        bottom: 0;
    }

    body.sub .recruit p {
        padding: 1em 2em 11em 1em;
    }

    .s60 ul li {
        width: 46%;
    }

    body.sub .recruit img {
        position: relative;
    }

    body.sub .recruit .imgas img {
        width: 58%;
    }

    body.sub .recruit .imgas {
        border: none;
    }
}