@charset "utf-8";

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

* {
    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);
    background: url("../img/bg_main.png") center;
}

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;
}

main .mv img {
    width: 100%;
}

h2 {
    font-size: 48px;
    position: relative;
    letter-spacing: 10px;
    font-weight: bold;
}

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 .logo {
    width: 100%;
    height: 100vh;
    min-height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9699;
}

.mv .inner {
    padding: 0 10px;
}

.mv .logo img {
    max-width: 150px;
}

.mv .logo_01 {
    width: 80%;
    position: absolute;
    top: 5%;
    left: -200px;
    z-index: 961;
}

.mv .logo_02 {
    width: 80%;
    position: absolute;
    top: 5%;
    right: -200px;
    z-index: 96;
}

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

@media (max-width:790px) {
    .mv .logo_01 {
        width: 134%;
        position: absolute;
        top: 22%;
        left: -200px;
        z-index: 961;
    }

    .mv .logo_02 {
        width: 134%;
        position: absolute;
        top: 22%;
        right: -200px;
        z-index: 96;
    }
}

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

.greeting .image {
    position: absolute;
    z-index: 888;
    top: 230px;
    left: -99px;
}

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

.greeting .text:before {
    content: "";
    width: 100%;
    height: 100%;
    background: url("../img/greet_bg.png") no-repeat center;
    background-size: cover;
    position: absolute;
    opacity: 0.7;
    top: 0;
    left: 0;
}

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

.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 div {
    text-align: center;
}

.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;
}

.btn {
    text-align: right;
}

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

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

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

.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: -100px;
    bottom: -15px;
    width: 5vw;
}

.totop img {
    width: 100%;
}

/*-------------------------*/
/*  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;
    font-weight: bold;
    margin-bottom: 30px;
}

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

#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: 60px 0;
}

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

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

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

#cnt .st_item .col2>div,
#cnt .st_item .col3>div {
    padding: 50px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    text-align: left;
}

#cnt .st_item span::before {
    content: "●";
    display: block;
    color: #FBC061;
    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;
}

#cnt .st_item .col2>div,
#cnt .st_item .col3>div {
    padding: 50px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.023);
    text-align: left;
}

/*-------------------------*/
/*  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 #333;
}

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

#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: 0;
}

#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
    /*-------------------------*/
.recruit .rec_mv {
    background: url("../img/re_mv.png") no-repeat top center #bc702fc4;
    background-size: 100% auto;
    color: #fff;
    text-align: center;
}

.recruit .rec_mv .fast {
    height: 51.2vw;
    background: rgba(188, 112, 47, 0.77);
    display: flex;
    justify-content: center;
    align-items: center;
}

.recruit .rec_mv .fast p {
    font-size: 36px;
}

.recruit .rec_mv .fast p span {
    font-size: 48px;
}

.recruit .rec_mv .sec {
    padding: 100px 0;

}

.recruit .center {
    margin-bottom: 0;
}

.recruit .tec_cat {
    background: #E8AA52;
}

.recruit .tec_cat h2 {
    color: #fff;
    margin-bottom: 60px;
}

.recruit .tec_cat .col5 {
    display: flex;
    justify-content: center;
    font-size: 12px;
    text-align: center;
    gap: 0.5%;
}

.recruit .tec_cat .col5 {
    display: flex;
    justify-content: center;
    font-size: 12px;
    text-align: center;

}

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

/*  */
.recruit .syain_wrap h2 {
    font-size: 100px;
}

.recruit .syain_wrap h2 span {
    font-size: 36px;
    display: block;
}

.syain_item {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap: 30px;
    text-align: right;
}

.rec_photo_02 {
    margin-top: 20px;
}

.recruit .tec_cat.flow {
    color: #fff;
}

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

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

.entry {
    color: #fff;
    background: #E89623;
}

.entry .btn2 a {
    margin-left: auto;
    color: #fff;
    display: block;
    border: 1px solid #fff;
    padding: 30px;
    width: 70%;
    margin-bottom: 20px;
}

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

footer .btn2 a {
    margin-left: auto;
    color: #333;
    display: block;
    border: 1px solid #333;
    padding: 30px;
    width: 70%;
    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: 48%;
}

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

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

.menus {
    position: absolute;
    bottom: 11vw;
    z-index: 9999999;
    width: 100%;
}

.menus ul {
    display: flex;
    width: 100%;
}

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

.menus li img {
    width: 80%;
}

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

.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;
}

/*-------------------------/*-------------------------*/
/*  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;
    }
}
    
@media (max-width: 550px) {
    .menus li span {
        display: block;
        position: absolute;
        bottom: 4rem;
        left: 0px;
        padding: 6px 10px;
        background: #1f1e1b;
        color: #FFF;
        font-size: 0.8em;
        border-radius: 10px;
        transition: 0.5s;
        opacity: 0;
    }

    .menus {
        position: absolute;
        bottom: 64vw;
        z-index: 9999999;
        width: 95%;
    }

}

/*----*/
.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;
}

.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;
}