@charset "utf-8";

/* ================================================
    初期化設定
================================================ */

html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

address,
caption,
cite,
code,
dfn,
th,
var {
    font-style: normal;
    font-weight: normal;
}

caption,
th {
    text-align: left;
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img,
abbr,
acronym,
fieldset {
    border: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

a {
    display: block;
    text-decoration: none;
    color: inherit;
    outline: none;
}

/* ================================================
    全体の構造設定
================================================ */

html {
    font-size: 62.5%;
    scroll-behavior:smooth;
}

body {
    font-size:1.4rem;
    line-height:1.6;
    font-family:"Zen Old Mincho",serif;
    color:#000000;
    padding:0;
    margin:0;
    -webkit-text-size-adjust:100%;
    letter-spacing:0.05em;
    overflow-x:hidden;
    overflow-y:auto;
    background-color:#ffffff;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    -webkit-font-smoothing:antialiased;
}

button {
    font-size: 1.4rem;
    line-height: 1.6;
    font-family: "Zen Old Mincho", serif;
    color: #000000;
    padding: 0px;
    margin: 0px;
    -webkit-text-size-adjust: 100%;
    letter-spacing: 0.05em;
}

a {
    color: #000000;
    -webkit-transition: all .4s;
    transition: all .4s;
    text-decoration: none;
}

a:hover {
    opacity: 0.6;
    -webkit-transition: all .4s;
    transition: all .4s;
    text-decoration: none;
}

p{
    text-align: justify;
    font-size: 1.5rem;
}

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

.playfair {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
/* ラッパー
------------------------------------------------ */


/* ヘッダー
------------------------------------------------ */
.header{
    max-width:1440px;
    margin:auto;
}
@media screen and (max-width: 1540px) {
    .header{
        margin:0 50px;
    }
}
.header-inr{
    visibility:visible;
}
.header-inr h1{
    max-width: 198px;
}
.header-list{
    width: 54.166%;
}
.header-list ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-list ul a{
    margin-right: 35px;
}
.header-list ul a:last-child{
    margin-right: 0;
}
.header-list ul a li{
    color: #564603;
    font-size: 1.6rem;
}
/* グローバルナビ
------------------------------------------------ */


/* ファーストビュー
------------------------------------------------ */
.fv{
    position: relative;
}
.fv-wrap{
    min-height:100vh;
    min-height:100dvh;
    max-width: 1680px;
    margin: auto;
    display: flex;
    align-items: center;
    position: relative;
}
@media screen and (max-width: 1780px) {
    .fv-wrap{
        margin: 0 80px;
    }
}
@media screen and (max-width: 768px) {
    .fv-wrap{
        margin: 0 20px;
    }
}
.fv-inr{
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 10000;
}
.fv-con{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: auto;
}
.fv-logo img{
    max-width: 200px;
}
@media screen and (max-width: 1680px) {
    .fv-con{
        margin-left: 90px;
        margin-right: auto;
    }
    .fv-list ul{
        margin-left: 0;
    }
}
@media screen and (max-width: 1100px) {
    .fv-con{
        margin-left: 50px;
    }
}
.fv-list{
    width: 55%;
}
.fv-list-recruit.fv-list{
    width: 100%;
    margin-left: 20px;
}
.fv-list ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    margin-left: 90px;
}
.fv-list ul li a{
    color: #564603;
    font-size: 1.6rem;
}
.fv-logo{
    transform-origin:left center;
    will-change:transform;
}

.fv-list{
    will-change:transform;
}

@media screen and (max-width: 960px) {
    .fv-circle {
        width: 100%;
        padding-top: 100%;
    }
    .fv-list{
        display: none;
    }
    .fv-logo img{
        max-width: 150px;
    }
    .fv-logo-top.fv-logo img {
        margin-left: 50px;
        max-width: 150px;
    }
    .fv-logo-recruit.fv-logo img{
        max-width: 150px;
    }
}
@media screen and (max-width: 768px) {
    .fv-con{
        margin-left: 30px;
    }
    .fv-logo img{
        max-width: 150px;
    }
    .fv-logo-top.fv-logo img {
        margin-left: 20px;
        max-width: 90px;
    }
    .fv-logo-recruit.fv-logo img{
        max-width: 90px;
    }
}

/* ファーストビューRecruit
------------------------------------------------ */
.fv-recruit-menu{
    max-width: 1440px;
    margin: auto;
}
.fv-recruit-menu ul{
    margin-top: 40px;
    margin-left: auto;
    margin-right: 35px;
    max-width: 720px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fv-recruit-menu ul li a{
    color: #564603;
    font-size: 1.6rem;
}
.fv-recruit-line.fv-line{
    margin-top: 13px;
}
.fv-recruit.fv-circle{
    border: solid 1px #564603;
    background-color: #564603;
}
.fv-list.fv-list-recruit ul{
    max-width: 795px;
    width: 100%;
    justify-content: flex-end;
}
.fv-recruit-link{
    color: #fff;
    font-size: 1.8rem;
    position: absolute;
    padding-bottom: 35px;
    right: 60px;
    top: 50%;
    transform: translate(50%, -50%);
}
.fv-recruit-logo-sp{
    display: none;
}
.fv-recruit-bottom-link{
    display: none;
}
.fv-recruit-link-icon{
    display: flex;
    align-items: center;
}
.fv-recruit-link-icon::after{
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background-image: url(./images/icon_recruit_link.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 8px;
}
@media screen and (max-width: 1180px) {
    .fv-logo.fv-recruit-logo-pc img{
        max-width: 175px;
    }
    .fv-recruit-line.fv-line {
        width: calc(100% - 350px);
    }
}
@media screen and (max-width: 960px) {
    .fv.fv-recruit-top{
        margin-top: 100px;
    }
    .fv-recruit-menu{
        display: none;
    }
    .fv-list-recruit.fv-list{
        display: none;
    }
    .fv-circle{
        width:90%;
        height:0;
        padding-top:90%;
        border:solid 1px #564603;
        border-radius:50%;
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }
    .fv-recruit.fv-circle{
        width: 65%;
        padding-top: 65%;
    }
    .fv-logo.fv-recruit-logo-sp{
        display: block;
        position: absolute;
        left: 50px;
        top: 50%;
        transform: translate(0, -50%);
        z-index: 2;
    }
    .fv-logo.fv-recruit-logo-sp img{
        max-width: 280px;
    }
    .fv-logo.fv-recruit-logo-pc{
        display: none;
    }
    .fv-recruit-line.fv-line{
        width: calc(100% - 430px);
        margin-top: 0;
    }
    .fv-recruit-link{
        font-size: 3.3rem;
        padding-bottom: 60px;
    }
    .fv-recruit-bottom-link{
        margin-top: 140px;
        margin-bottom: 350px;
        display: block;
        width: 88.164%;
        margin-right: auto;
        border-bottom: solid 1px #2d270e;
    }
    .fv-recruit-bottom-link-block{
        margin-left: 100px;
        text-align: center;
    }
    .fv-recruit-bottom-link a{
        display: inline-flex;
        margin: auto;
        font-size: 3.5rem;
        color: #564603;
        padding-bottom: 20px;
    }
}
@media screen and (max-width: 960px) {
    .fv-logo.fv-recruit-logo-sp img{
        max-width: 200px;
    }
    .fv-recruit-line.fv-line{
        width: calc(100% - 340px);
        margin-top: 0;
    }
    .fv-recruit-link{
        font-size: 2.4rem;
        padding-bottom: 40px;
    }
    .fv-recruit-bottom-link a{
        font-size: 2.4rem;
    }
}
@media screen and (max-width: 828px) {
    .fv-circle{
        width:100%;
        padding-top:100%;
    }
}
@media screen and (max-width: 768px) {
    .fv.fv-recruit-top{
        margin-top: 0;
    }
    .fv-recruit-bottom-link{
        margin-top: 0;
        margin-bottom: 200px;
    }
    .fv-logo.fv-recruit-logo-sp{
        left: 30px;
    }
    .fv-logo.fv-recruit-logo-sp img{
        max-width: 150px;
    }
    .fv-recruit.fv-circle {
        width: 100%;
        padding-top: 100%;
    }
    .fv-recruit-line.fv-line{
        width: calc(100% - 220px);
        margin-top: 0;
    }
    .fv-recruit-link {
        font-size: 2rem;
        padding-bottom: 30px;
    }
    .fv-recruit-bottom-link a{
        font-size: 2rem;
        padding-bottom: 10px;
    }
}

/* メイン
------------------------------------------------ */
.top{
    height: 100vh;
    position: relative;
}
.swiper-slide{
    height: 100vh !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.swiper-slide1{
    background-image: url(./images/fv_pc1.jpg);
}
.swiper-slide2{
    background-image: url(./images/fv_pc2.jpg);
}
.swiper-slide3{
    background-image: url(./images/fv_pc3.jpg);
}
.swiper-slide4{
    background-image: url(./images/fv_pc4.jpg);
}
.swiper-slide5{
    background-image: url(./images/fv_pc5.jpg);
}
.top-con{
    height: 100vh;
    max-width: 1440px;
    margin: auto;
    width: 100%;
}
@media screen and (max-width: 1600px) {
    .top-con{
        padding: 0 80px;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 768px) {
    .top-con{
        padding: 0 20px;
        box-sizing: border-box;
    }
}
.top-text1{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.top-text2{
    position: absolute;
    bottom: 10%;
    max-width: 1320px;
    margin-right: auto;
    width: calc(100% - 100px);
}
.top-text-flex1{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.top-text-flex1 p{
    order: 1;
}
.top-text-block2-pc{
    display: flex;
    align-items: center;
    max-width: 1320px;
    margin: auto;
}
.top-text-block2-sp{
    display: none;
}
.top-text-line2{
    width: 40%;
    border-bottom: solid 1px #fff;
    margin-right: 15px;
    opacity: 0.6;
}
.top-text-flex2{
    display: flex;
    align-items: baseline;
    width: 100%;
    max-width: 850px;
    margin-left: auto;
    justify-content: space-between;
}
.top-text3-block{
    max-width: 810px;
    margin-left: auto;
}
.top-text3{
    position: absolute;
    bottom: 10%;
}
@media screen and (max-width: 1500px) {
    .top-text3{
        bottom: 10%;
        right: 50px;
    }
}
.top-text4-block{
    max-width: 820px;
    margin-left: auto;
    width: calc(100% - 100px);
}
.top-text4{
    position: absolute;
    bottom: 10%;
}
.top-text5{
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}
.text-right{
    justify-content: flex-end !important;
}
.text-center{
    text-align: center;
    justify-content: center !important;
}
.top-text h2{
    font-size: 9.6rem;
    color: #fff;
}
.top-text.top-text2 h2{
    margin-right: 60px;
}
@media screen and (max-width: 1360px) {
    .top-text.top-text2 h2{
        font-size: 6.8vw;
        margin-right: 10px;
    }
}
@media screen and (max-width: 1020px) {
    .top-text h2{
        font-size: 9.5vw;
    }
}
@media screen and (max-width: 960px) {
    .top-text.top-text2 h2{
        margin-right: 0;
    }
    .top-text-flex1{
        display: block;
    }
    .top-text-flex1 p{
        justify-content: flex-end;
    }
}
@media screen and (max-width: 828px) {
    .top-text-block2-pc{
        display: none;
    }
    .top-text-block2-sp{
        display: block;
    }
    .top-text-block2-flex-sp{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
.top-text p{
    font-size: 2.6rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
}
@media screen and (max-width: 768px) {
    .top-text p{
        font-size: 2rem;
    }
    .top-text4{
        width: calc(100% - 40px);
        left: 0;
        right: 0;
        margin: auto;
    }
    .top-text4.top-text h2{
        font-size: 12vw;
        text-align: right;
    }
}
@media screen and (max-width: 468px) {
    .top-text p{
        font-size: 1.5rem;
    }
    .top-text.top-text2 h2 {
        font-size: 8.7vw;
    }
    .top-text2 {
        width: calc(100% - 40px);
    }
    .top-text3{
        width: calc(100% - 40px);
        right: 0;
        left: 0;
        margin: auto;
    }
    .top-text3.top-text h2{
        font-size: 10vw;
    }
    .top-text4.top-text h2{
        font-size: 11.5vw;
    }
}
.top-text.top-text2 p{
    font-size: 1.6rem;
}
.top-text.top-text3 p{
    font-size: 1.6rem;
}
.top-text.top-text4 p{
    font-size: 1.6rem;
}
.top-text.top-text5 p{
    font-size: 1.6rem;
}
@media screen and (max-width: 468px) {
    .top-text.top-text2 p{
        font-size: 1.4rem;
    }
    .top-text.top-text3 p{
        font-size: 1.4rem;
    }
    .top-text.top-text4 p{
        font-size: 1.4rem;
    }
    .top-text.top-text5 p{
        font-size: 1.4rem;
    }
}
.top-text-line::before{
    content: "";
    display: block;
    width: 100%;
    border-bottom: solid 1px #fff;
    margin-right: 13px;
    opacity: 0.6;
}

.concept{
    background-color: #d5e2e2;
}
.concept-main{
    position: relative;
}
.concept-line{
    position: absolute;
    width: 56%;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    margin-bottom: 91px;
}
.concept-line::after{
    box-sizing: border-box;
    width: 100%;
}
.concept-con{
    max-width: 1680px;
    margin: 0 auto;
}
@media screen and (max-width: 1780px) {
    .concept-con{
        margin: 0 80px;
    }
}
.about-con{
    padding-top: 50px;
    position: relative;
    margin-bottom: 90px;
    box-sizing: border-box;
}
.concept-ttl1{
    font-size: 3.3rem;
    color: #2d270e;
    text-align: right;
    padding-right: 55px;
    padding-bottom: 35px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.concept-ttl1::after{
    content: "";
    display: block;
    width: 50px;
    position: absolute;
    right: -25px;
}
@media screen and (max-width: 1720px) {
    .concept-ttl1::after{
        width: 40px;
        right: -20px;
    }
}
@media screen and (max-width: 768px) {
    .concept-ttl1::after{
        width: 30px;
        right: -15px;
    }
}
.about-inr{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1560px;
    margin-right: auto;
}
.about-img-block{
    width: 50%;
    max-width: 780px;
}
.about-img{
    padding-top: 133.82%;
    background-image: url(./images/about.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.about-img p{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 7%;
    font-size: 2.6rem;
    text-align: center;
    color: #f2c300;
}
.about-company-blank{
    width: 50%;
    max-width: 780px;
}
.about-text{
    max-width: 660px;
}
.about-text-inr{
    max-height: 735px;
    height: 49.7vw;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 710px;
    width: 100%;
    padding-left: 35px;
    padding-right: 50px;
    box-sizing: border-box;
    display: flex;
}
.about-text-inr.about-text-company{
    max-height: none;
    height: 895px;
    display: block;
}
.about-ttl{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
.about-ttl.mb1{
    margin-bottom: 40px;
}
.about-ttl.mb2{
    margin-bottom: 30px;
}
.about-text-inr p{
    color: #2d270e;
}
.about-text-block-vertical{
    display: flex;
    margin-left: 80px;
    order: 1;
}
.about-ttl-vertical{
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    order: 1;
    white-space: nowrap;
}
.about-ttl1-ver{
    font-size: 1.5rem;
    color: #2d270e;
    margin-bottom: 10px;
}
.about-ttl2-ver{
    font-size: 1.3rem;
    color: #2d270e;
    margin-top: 15px;
}
.about-ttl1{
    font-size: 1.5rem;
    color: #2d270e;
    margin-right: 20px;
    white-space: nowrap;
}
.about-ttl2{
    font-size: 1.3rem;
    color: #2d270e;
    display: flex;
    align-items: center;
    margin-left: 10px;
    white-space: nowrap;
}
.about-ttl-line{
    display: block;
    width: 100%;
    border-bottom: solid 1px #2d270e;
}
.about-ttl-line-ver{
    height: 32px;
    border-left: solid 1px #2d270e;
}
.vertical{
    writing-mode: vertical-rl;
}
.about-ttl-ver{
    font-size: 4.3rem;
    line-height: 1;
    margin-top: -10px;
    margin-right: 35px;
}
.about-text-block-beside{
    max-width: 420px;
    margin-left: auto;
}
.about-text-block{
    margin-bottom: 105px;
}
.about-values{
    margin-bottom: 35px;
}
.about-values-num{
    font-size: 2.2rem;
    margin-bottom: 15px;
}
.about-value-text{
    font-size: 2.2rem;
}
.about-bottom{
}
.about-company{
    max-width: 1680px;
    margin: 0 auto 260px;
}
@media screen and (max-width: 1780px) {
    .about-company{
        margin: 0 80px 260px;
    }
}
.about-company-inr{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1560px;
    margin-right: auto;
}
.about-company-text{
    max-width: 670px;
}
.about-company-list{
}
.about-company-list.about-company-list-jp{
    margin-bottom: 70px;
}
.about-company-item{
    margin-bottom: 30px;
}
.about-company-head{
    font-size: 1.8rem;
    color: #656565;
    margin-bottom: 15px;
}
.about-company-body{
    font-size: 2rem;
    color: #2d270e;
}
.about-vision-text{
    font-size: 2.2rem;
}
@media screen and (max-width: 1230px) {
    .concept-line{
        width: 100%;
    }
    .about-inr{
        display: block;
    }
    .about-img-block{
        width: 100%;
        margin: 0 auto 95px;
    }
    .about-img{
        width: 100%;
        padding-top: 122.82%;
    }
    .about-text{
        width: 100%;
        max-width: none;
    }
    .about-text-inr{
        max-height: 830px;
        height: auto;
        max-width: none;
        width: 100%;
        padding-left: 0;
        padding-right: 20px;
        justify-content: space-between;
    }
    .about-text-block-beside{
        max-width: unset;
    }
    .about-text-block-vertical{
        margin-left: 100px;
    }
    .about-text-block{
        margin-bottom: 0;
        padding-bottom: 45px;
    }
    .about-company-text{
        max-width: unset;
    }
}
@media screen and (max-width: 930px) {
    .about-img-block{
        width: calc(100% - 25px);
        margin: 0 25px 95px 0;
    }
}
@media screen and (max-width: 828px) {
    .about-con{
        padding-top: 45px;
    }
    .concept-ttl1{
        padding-bottom: 45px;
    }
    .about-text-block-vertical{
        margin-left: 40px;
    }
    .about-text-block-beside {
        margin-right: auto;
        margin-left: 0;
        max-width: 485px;
    }
    .about-company{
        margin: 0 50px 145px;
    }
    .about-company-item{
        margin-bottom: 50px;
    }
}
@media screen and (max-width: 768px) {
    .concept-con {
        margin: 0 20px;
    }
    .concept-ttl1{
        font-size: 2rem;
        padding-right: 25px;
    }
    .about-ttl1{
        font-size: 1.6rem;
    }
    .about-ttl2{
        font-size: 1.2rem;
    }
    .about-vision-text{
        font-size: 1.8rem;
    }
    .about-values-num{
        font-size: 1.8rem;
    }
    .about-value-text{
        font-size: 1.8rem;
    }
    .about-text-block-vertical {
        margin-left: 20px;
    }
    .about-ttl-ver{
        font-size: 3rem;
        margin-right: 10px;
    }
    .about-ttl1-ver{
        font-size: 1.4rem;
    }
    .about-company{
        margin: 0 20px 145px;
    }
    .about-company-head{
        font-size: 1.6rem;
    }
    .about-ttl2-ver{
        font-size: 1.2rem;
    }
    .about-company-body{
        font-size: 1.4rem;
    }
}

.message{
    max-width: 1680px;
    margin: 0 auto 80px;
    box-sizing: border-box;
    padding-bottom: 70px;
}
@media screen and (max-width: 1780px) {
    .message{
        margin: 0 80px 80px;
    }
}
.message-top{
    display: flex;
    justify-content: space-between;
}
.message-ttl h2{
    color: #fff;
    font-size: 8.7rem;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    line-height: 1;
}
@media screen and (max-width: 1720px) {
    .message-ttl h2{
        font-size: 4.7vw;
    }
}
.message-ttl-sub{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 780px;
}
@media screen and (max-width: 1720px) {
    .message-ttl-sub{
        max-width: 43vw;
    }
}
.message-ttl-sub h3{
    color: #fff;
    font-size: 3.3rem;
}
.message-ttl-sub p{
    color: #2d270e;
    font-size: 3.5rem;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 1720px) {
    .message-ttl-sub h3{
        font-size: 1.8vw;
    }
    .message-ttl-sub p{
        font-size: 1.8vw;
    }
}
.message-block{
    margin-top: 100px;
    width: 50%;
}
.message-img{
    background-image: url(./images/message.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 66.666%;
}
.message-name-block{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    padding-right: 30px;
    box-sizing: border-box;
}
@media screen and (max-width: 1200px) {
    .message-top{
        display: block;
    }
    .message-block{
        width: 100%;
        margin-bottom: 75px;
    }
    .message-name-block{
        padding-top: 45px;
    }
}
.message-text1{
    font-size: 1.5rem;
    color: #656565;
}
.message-text2{
    font-size: 4rem;
    color: #2d270e;
}
.message-con{
    margin-top: -30px;
    padding-right: 20px;
    box-sizing: border-box;
    max-width: 960px;
    margin-left: auto;
}
.message-con h3{
    font-size: 2.8rem;
    color: #fff;
    margin-bottom: 40px;
}
.message-text-block p{
    margin-bottom: 40px;
    letter-spacing: 0em;
    color: #2d270e;
    font-size: 1.8rem;
}
.message-text-block p span{
    font-weight: bold;
}
.message-block h3{
    display: none;
}
.sp-message-ttl{
    display: none;
}
.pc-message-ttl{
    display: block;
}
@media screen and (max-width: 1200px) {
    .sp-message-ttl{
        display: block;
        margin: 0 50px;
    }
    .pc-message-ttl{
        display: none;
    }
    .message-con{
        margin-top: 0;
    }
    .message-ttl h2 {
        font-size: 5vw;
    }
    .message-ttl-sub h3{
        font-size: 2.4rem;
    }
    .message-ttl-sub p{
        font-size: 2.4rem;
    }
    .message-ttl-sub{
        max-width: unset;
        display: block;
    }
    .message-block{
        margin-top: 180px;
    }
    .message-con h3{
        display: none;
    }
    .message-block h3{
        display: block;
        font-size: 2.8rem;
        color: #fff;
        margin-bottom: 15px;
        line-height: 1;
    }
    .message-text1{
        font-size: 2rem;
    }
    .message-text-block{
        height: 700px;
    }
    .message-text-block p{
        font-size: 1.8rem;
    }
}
@media screen and (max-width: 768px) {
    .message {
        margin: 0 20px 80px;
    }
    .sp-message-ttl{
        margin: 0 20px;
    }
    .message-ttl h2 {
        font-size: 8.8vw;
    }
    .message-ttl-sub h3{
        font-size: 2.2rem;
    }
    .message-ttl-sub p{
        font-size: 2rem;
    }
    .message-block h3{
        font-size: 2.2rem;
    }
    .message-text1{
        font-size: 1.4rem;
    }
    .message-text2{
        font-size: 2.7rem;
    }
    .message-text-block p{
        font-size: 1.4rem;
    }
}
.message-text-block{
    overflow: hidden;
    height: 650px;
    transition:
        height 0.7s cubic-bezier(.4,0,.2,1);
}
.message-more-btn-block{
    margin-top: 55px;
    text-align: right;
}
.message-more-btn{
    position: relative;
    display: inline-block;
    padding-right: 50px;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: #2d270e;
    font-size: 2rem;
    line-height: 1;
}
.message-more-btn::after{
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 20px;
    height: 1px;
    background: #2d270e;
    transform: translateY(-50%);
}
.message-more-btn::before{
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 20px;
    height: 1px;
    background: #2d270e;
    transform:
        translateY(-50%)
        rotate(90deg);
    transition:
        transform 0.7s cubic-bezier(.4,0,.2,1);
}
.message-more-btn::before{
    transform: rotate(90deg);
    transition:
        transform 0.7s cubic-bezier(.4,0,.2,1);
}
.message-more-btn.is-open::before{
    transform:
        translateY(-50%)
        rotate(0deg);
}
@media screen and (max-width: 768px) {
    .message-more-btn{
        font-size: 1.6rem;
    }
}

.company{
    background-color: #a8c1c0;
}
.company-main-img{
    background-image: url(./images/group.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 52.6%;
    position: relative;
}
.company-main-img h2{
    position: absolute;
    left: 9%;
    top: 4%;
    font-size: 2.8rem;
    color: #f2c300;
}
.company-con{
}

.group-con{
    box-sizing: border-box;
    max-width: 1680px;
    margin: 0 auto 130px;
    padding-left: 55px;
}
.group-con.group-pt{
    padding-top: 110px;
}
@media screen and (max-width: 1780px) {
    .group-con{
        margin: 0 80px;
    }
    .group-con.group-con-top{
        margin: 0 80px 130px 80px;
    }
}
.company-group-line{
    margin-left: auto;
    width: calc(100% - ((100% - 1680px) / 2));
    position: relative;
}
.company-group-line::before{
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
}
@media screen and (max-width: 1780px) {
    .company-group-line{
        margin-left: 80px;
        width: calc(100% - 80px);
    }
}
.group-ttl{
    padding-top: 50px;
    margin-bottom: 145px;
}
.group-ttl h2{
    color: #fff;
    font-size: 3.3rem;
    display: flex;
    align-items: center;
    position: relative;
}
.group-ttl h2::before{
    content: "";
    display: block;
    width: 50px;
    position: absolute;
    left: -80px;
}
.group-flex{
    display: flex;
    justify-content: space-between;
    margin-bottom: 110px;
}
.group-ttl-jp{
    font-size: 3rem;
    color: #2d270e;
    letter-spacing: 0.1em;
}
.group-ttl-en{
    color: #656565;
    font-size: 2rem;
    letter-spacing: 0.08em;
}
.group-flex ul{
    width: 50%;
}
.group-list-item{
    margin-bottom: 10px;
}
.group-list-block{
    display: flex;
    align-items: center;
}
.group-list-block.flex-start{
    align-items: flex-start;
}
.group-list-ttl{
    color: #656565;
    font-size: 1.6rem;
    width: 26.17%;
}
.group-list-ttl.playfair{
    width: 26.17%;
    min-width: 170px;
}
.group-list-text{
    color: #2d270e;
    font-size: 1.8rem;
}
@media screen and (max-width: 1200px) {
    .group-flex{
        display: block;
    }
    .group-ttl-jp,.group-ttl-en{
        margin-bottom: 15px;
    }
    .group-flex ul{
        width: 100%;
    }
}

.company-block-wrap{
    margin-bottom: 120px;
}
.company-block-con{
    position: relative;
    margin-bottom: 50px;
}
.company-block-con.company-block-con-bottom{
    margin-bottom: 120px;
}
.company-line{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 53.57%;
}
.company-line::after{
    width: 100%;
    bottom: 0;
}
.company-block{
    max-width: 1680px;
    display: flex;
    justify-content: space-between;
    margin: auto;
}
@media screen and (max-width: 1780px) {
    .company-block{
        margin: 0 80px;
    }
}
.company-block-img{
    width: 46.428%;
    padding-top: 34.82%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
.company-block-img1{
    background-image: url(./images/group1.jpg);
}
.company-block-img2{
    background-image: url(./images/group2.jpg);
}
.company-block-img3{
    background-image: url(./images/group3.jpg);
}
.company-block-img4{
    background-image: url(./images/group4.jpg);
}
.company-block-img5{
    background-image: url(./images/group5.jpg);
}
.company-block-text{
    width: 50%;
}
.company-block-text h3{
    font-size: 3.3rem;
    color: #656565;
    margin-bottom: 45px;
}
.company-block-text-inr{
    box-sizing: border-box;
    padding-left: 77px;
    min-height: 68.38%;
}
.company-block-text-inr::after{
    content: "";
    display: block;
    position: absolute;
}
.company-block-text-inr h4{
    font-size: 2rem;
    color: #656565;
    margin-bottom: 20px;
}
.company-block-text-inr p{
    font-size: 1.8rem;
    margin-bottom: 45px;
}
.company-block-text-inr p span{
    display: block;
    font-size: 2rem;
    color: #656565;
    margin-bottom: 5px;
}
.company-block-text-inr p span.company-block-text-dec1{
    font-size: 1.8rem;
}
.company-block-text-inr p.company-block-text-dec{
    margin-bottom: 25px;
}
@media screen and (max-width: 1024px) {
    .group-con{
        padding-left: 20px;
    }
    .group-ttl h2{
        padding-left: 35px;
    }
    .group-ttl h2::before {
        left: -50px;
    }
    .company-block{
        display: block;
    }
    .company-block-con{
        margin-bottom: 150px;
    }
    .company-block-img{
        width: 100%;
        padding-top: 75.128%;
        margin-bottom: 60px;
    }
    .company-block-text{
        width: 100%;
    }
    .company-block-text-inr{
        padding-bottom: 20px;
    }
    .company-line{
        bottom: -80px;
        width: 100%;
    }
    .company-group-line{
        margin-top: 275px;
    }
}

@media screen and (max-width: 828px) {
    .group-ttl{
        padding-top: 50px;
        margin-bottom: 120px;
    }
    .group-flex{
        margin-bottom: 150px;
    }
    .group-ttl-jp{
        margin-bottom: 60px;
    }
    .group-ttl-en{
        font-size: 3.8vw;
        margin-bottom: 80px;
    }
    .group-list-item{
        margin-bottom: 55px;
    }
    .group-list-block{
        align-items: baseline;
    }
    .group-list-ttl{
        width: 180px;
        min-width: 180px;
    }
    .group-list-ttl.playfair{
        width: 260px;
        min-width: 260px;
    }
    .group-list-ttl.playfair.group-list-ttl-sp{
        width: 260px;
        min-width: 260px;
    }
    .company-block-text-inr h4{
        margin-bottom: 35px;
    }
}
@media screen and (max-width: 768px) {
    .group-ttl h2{
        padding-left: 5px;
    }
    .group-ttl h2::before {
        left: -37px;
        width: 36px;
    }
    .company-group-line{
        margin-left: 20px;
        width: calc(100% - 20px);
    }
    .group-con{
        margin: 0 20px;
    }
    .company-block{
        margin: 0 20px;
    }
    .group-con.group-con-top {
        margin: 0 20px 130px;
    }
    .company-main-img h2{
	    left: 5%;
		top: 5%;
        font-size: 1.3rem;
    }
    .group-ttl h2 {
        font-size: 2rem;
    }
    .group-ttl-jp{
        font-size: 1.9rem;
    }
    .group-ttl-en{
        font-size: 3.6vw;
    }
    .group-list-ttl{
        font-size: 1.4rem;
        width: 100px;
        min-width: 100px;
    }
    .group-list-ttl.playfair{
        width: 135px;
        min-width: 135px;
    }
    .group-list-ttl.playfair.group-list-ttl-sp{
        width: 135px;
        min-width: 135px;
    }
    .group-list-text{
        font-size: 1.4rem;
    }
    .company-block-text-inr{
        padding-left: 20px;
    }
    .company-block-text h3{
        font-size: 2.2rem;
    }
    .company-block-text-inr h4{
        font-size: 1.8rem;
    }
    .company-block-text-inr p{
        font-size: 1.4rem;
    }
    .company-block-text-inr p span{
        font-size: 1.5rem;
    }
    .company-block-text-inr p span.company-block-text-dec1{
        font-size: 1.4rem;
    }
}
@media screen and (max-width: 480px) {
    .group-list-ttl.playfair{
        width: 150px;
        min-width: 150px;
    }
    .about-img p{
        font-size: 1.6rem; 
    }
    .group-list-ttl.playfair.group-list-ttl-sp{
        width: 150px;
        min-width: 150px;
    }
}

.news{
    background-color: #a8c1c0;
}
.news-con{
    position: relative;
    box-sizing: border-box;
    margin-bottom: 150px;
}
.news-line{
    top: 115px;
    position: absolute;
    width: 50%;
}
.news-line::before{
    width: 100%;
}
.news-logo{
    background-image: url(./images/news_logo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 64.895%;
    padding-top: 9.206%;
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0.4;
}
.news-ttl{
    padding-left: 55px;
    box-sizing: border-box;
}
.news-ttl h2{
    font-size: 3.3rem;
    color: #2d270e;
    padding: 30px 0;
    display: flex;
    align-items: center;
    position: relative;
}
.news-ttl h2::before{
    content: "";
    display: block;
    width: 50px;
    position: absolute;
    left: -80px;
}
.news-flex{
    max-width: 1680px;
    margin: auto;
    display: flex;
    align-items: flex-start;
}
@media screen and (max-width: 1780px) {
    .news-flex{
        margin: 0 80px;
    }
}
.news-block-l{
    width: 50%;
    box-sizing: border-box;
}
.news-block-l ul{
    height: 476px;
    overflow-y: auto;
    overscroll-behavior: auto;
}
.news-block-r{
    order: 1;
    width: 50%;
}
.news-img{
    background-image: url(./images/news.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 115.02%;
    position: relative;
}
.news-img h2{
    position: absolute;
	bottom: 7%;
    right: 10%;
    font-size: 2.8rem;
    color: #f2c300;
}
.news-item{
    position: relative;
}
.news-item::before{
    width: 100%;
    bottom: 0;
}
.news-head{
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    position: relative;
}
.news-head-inr{
    display: flex;
    align-items: center;
    padding: 30px 56px 30px 40px;
    box-sizing: border-box;
}
.news-date{
    font-size: 1.6rem;
    color: #656565;
    min-width: 100px;
    margin-right: 5px;
}
.news-title{
    font-size: 1.8rem;
    color: #2d270e;
}
.news-icon{
    position: absolute;
    right: 40px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
}
.news-icon::before,
.news-icon::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:16px;
    height:1px;
    background:#2d270e;
    transform:translate(-50%,-50%);
}
.news-icon::before{
    transform:translate(-50%,-50%) rotate(90deg);
    transition:transform 0.7s cubic-bezier(.4,0,.2,1),opacity 0.7s cubic-bezier(.4,0,.2,1);
    opacity:1;
}
.news-item.is-open .news-icon::before{
    transform:translate(-50%,-50%) rotate(0deg);
    opacity:0;
}
.news-panel{
    height:0;
    overflow:hidden;
    transition:height 0.7s cubic-bezier(.4,0,.2,1);
}
.news-body{
    padding: 0 56px 30px 0;
    box-sizing: border-box;
    margin-left: 145px;
}
.news-body p{
    font-size: 1.6rem;
}
@media screen and (max-width: 1024px) {
    .news-line{
        width: 100%;
        top: unset;
        bottom: 500px;
    }
    .news-logo{
        width: 100%;
        padding-top: 15%;
        bottom: -20px;
        background-position: left;
    }
    .news-flex{
        display: block;
        margin-right: 0;
    }
    .news-block-l {
        width: 100%;
        margin-bottom: 50px;
        padding-bottom: 95px;
    }
    .news-block-l ul{
        height: 400px;
    }
    .news-block-r{
        width: calc(100% - 50px);
    }
    .news-icon{
        right: 50px;
    }
}
@media screen and (max-width: 768px) {
    .news-flex {
        margin: 0 0 0 20px;
    }
    .news-block-r {
        width: calc(100% - 20px);
    }
    .news-icon {
        right: 16px;
    }
    .news-img h2{
        font-size: 1.6rem;
        bottom: 5%;
        right: 5%;
    }
    .news-ttl h2{
        font-size: 2.4rem;
    }
    .news-head-inr{
        padding: 15px 15px;
    }
    .news-date{
        font-size: 1.4rem;
        min-width: 85px;
    }
    .news-title{
        font-size: 1.4rem;
        line-height: 1.4;
        max-width: 67%;
    }
    .news-body{
        margin-left: 0;
        padding: 0 15px 15px;
    }
    .news-body p{
        font-size: 1.4rem;
    }
}

.recruit-ttl{
    max-width: 1680px;
    margin: -120px auto 50px;
    padding-top: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media screen and (max-width: 1780px) {
    .recruit-ttl{
        margin: -120px 80px 50px;
    }
}
.recruit-ttl h3{
    padding-left: 55px;
    box-sizing: border-box;
    color: #f2c300;
    font-size: 2.6rem;
}
.recruit-link{
    color: #2d270e;
    font-size: 2rem;
    margin-right: 120px;
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 28px;
    box-sizing: border-box;
    cursor:pointer;

}
.recruit-link::after{
    content: "";
    display: block;
    background-image: url(./images/icon_job_btn.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 15px;
    height: 14px;
    position: absolute;
    right: 0;
}
@media screen and (max-width: 828px) {
    .recruit-ttl h3{
        padding-left: 0;
    }
}
@media screen and (max-width: 768px) {
	.news-ttl{
	    padding-left: 55px;
	    box-sizing: border-box;
	}
    .recruit-ttl{
        margin: 0 20px 50px;
    }
    .recruit-ttl h3{
        font-size: 2.4rem;
    }
    .recruit-link{
        font-size: 2rem;
        padding-right: 28px;
        margin-right: 0;
    }
    .recruit-link::after{
        width: 15px;
        height: 14px;
    }
}

.loop-wrap{
    width: 100%;
    overflow: hidden;
    padding-bottom: 150px;
}
.loop-wrap.loop-bottom{
    padding-bottom: 70px;
}
.loop-wrap.recruit{
    margin-bottom: 250px;
    padding-bottom: 0;
}
.loop-wrap.recruit{
    overflow:hidden;
    touch-action:pan-y;
    cursor:grab;
}
.loop-wrap.recruit:active{
    cursor:grabbing;
}

.loop-wrap.recruit .loop-track{
    user-select:none;
    -webkit-user-select:none;
}

.loop-wrap.recruit .recruit-interview-block{
    pointer-events:auto;
}

.loop-wrap.recruit .recruit-interview-block *{
    pointer-events:auto;
}

.loop-track{
    display: flex;
    width: max-content;
    will-change: transform;
    animation: loop-marquee var(--loop-duration, 22s) linear infinite;
}
.loop-list{
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}
.loop-list li{
    flex-shrink: 0;
    margin-right: 20px;
}
.recruit.loop-list li{
    margin-right: 80px;
}
.loop-list img{
    width:auto;
    max-width:none;
    height:432px;
    object-fit:cover;
}
@keyframes loop-marquee{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-1 * var(--loop-distance, 0px)));
    }
}
@media screen and (max-width: 828px) {
    .loop-list img{
        height:180px;
    }
}


.contact{
    padding-top: 145px;
    background-color: #d5e2e2;
}
.contact.recruit{
    padding-top: 225px;
    background-color: #efeddf;
}
.contact-ttl{
    max-width: 1680px;
    margin: auto;
}
@media screen and (max-width: 1780px) {
    .contact-ttl{
        margin: 0 80px;
    }
}
.contact-ttl h2{
    font-size: 2.8rem;
    color: #2d270e;
    line-height: 1;
}
.contact-ttl.recruit h2{
    color: #564603;
}
.contact-line{
    margin-top: -2px;
    position: relative;
}
.contact-line::before{
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
}
.contact-line.recruit{
    border-bottom: solid 1px #564603;
}
.contact-con{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1680px;
    margin: 45px auto 80px;
}
@media screen and (max-width: 1780px) {
    .contact-con{
        margin: 45px 80px 80px;
    }
}
.contact-block{
    width: 48%;
    margin-bottom: 70px;
}
.contact-link-block{
    text-align: right;
    margin-bottom: 15px;
}
.contact-link{
    display: inline-flex;
    color: #656565;
    position: relative;
    justify-content: flex-end;
    align-items: center;
    padding-right: 28px;
}
.contact-link::after{
    content: "";
    display: block;
    background-image: url(./images/icon_link.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 12px;
    height: 10px;
    position: absolute;
    right: 0;
}
.contact-img{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 51.28%;
    position: relative;
}
.contact-img1{
    background-image: url(./images/contact1.jpg);
}
.contact-img2{
    background-image: url(./images/contact2.jpg);
}
.contact-img3{
    background-image: url(./images/contact3.jpg);
}
.contact-img4{
    background-image: url(./images/contact4.jpg);
}
.contact-img h3{
    font-size: 3.3rem;
    color: #fff;
    text-shadow: 1px 1px 35px rgba(0,0,0,0.75);
    box-sizing: border-box;
    position: absolute;
    left: 40px;
    bottom: 35px;
}
.contact-text{
    position: relative;
    box-sizing: border-box;
    padding: 25px 0 0 40px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.contact-text::after{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 1px;
    height: 100%;
}
.contact-text-icon{
    margin-left: 10px;
}
.contact-text-inr h3{
    color: #2d270e;
    font-size: 2rem;
    margin-bottom: 25px;
    position: relative;
}
.contact-text-inr h3::before{
    content: "";
    display: block;
    width: 35px;
    position: absolute;
    left: -58px;
    top: 16px;
}
.contact-text-inr h4{
    color: #656565;
    font-size: 1.8rem;
    margin-bottom: 25px;
}
.contact-text-inr p{
    font-size: 1.6rem;
}
.contact-text-inr p.contact-text-mb{
    margin-bottom: 10px;
}
.contact-icon1{
    width: 35px;
    height: 35px;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 50%;
    position: relative;
    margin-bottom: 7px;
}
.contact-icon1::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(./images/icon_insta.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
}
.contact-icon2{
    width: 35px;
    height: 35px;
    width: 35px;
    height: 35px;
    background-color: #a8c1c0;
    box-sizing: border-box;
    border-radius: 50%;
    position: relative;
}
.contact-icon2::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(./images/icon_mail.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px;
    height: 13px;
}
.con-br{
    display: block;
}
@media screen and (max-width: 1420px) {
    .con-br{
        display: none;
    }
}
@media screen and (max-width: 828px) {
    .contact-con{
        margin: 90px 50px 130px;
    }
    .contact-block{
        width: 100%;
    }
    .contact-img{
        margin-bottom: 8px;
    }
    .contact-text-inr h4{
        margin-bottom: 15px;
    }
}
@media screen and (max-width: 768px) {
    .contact-ttl{
        margin: 0 20px;
    }
    .contact-con{
        margin: 90px 20px 130px;
    }
    .contact-ttl h2{
        font-size: 2.4rem;
    }
    .contact-link{
        font-size: 1.4rem;
        padding-right: 15px;
    }
    .contact-link::after {
        width: 12px;
        height: 10px;
    }
    .contact-img h3{
        font-size: 2rem;
        left: 20px;
        bottom: 15px;
    }
    .contact-text{
        padding: 20px 0 0 30px;
    }
    .contact-text-inr h3{
        font-size: 1.5rem;
    }
    .contact-text-inr h3::before{
        width: 30px;
        left: -45px;
    }
    .contact-text-inr h4{
        font-size: 1.3rem;
    }
    .contact-text-inr p{
        font-size: 1.3rem;
    }
}
/* Recruitページ
------------------------------------------------ */
.recruit-main{
    background-color: #efeddf;
    padding-top: 275px;
    padding-bottom: 235px;
}
.recruit-company{
    max-width: 1680px;
    margin: 0 auto 330px;
}
@media screen and (max-width: 1780px) {
    .recruit-company{
        margin: 0 20px 330px;
    }
}
@media screen and (max-width: 768px) {
    .recruit-company{
        margin: 0 20px 330px;
    }
}
.recruit-company-con{
    max-width: 775px;
    margin-right: 120px;
    margin-left: auto;
}
@media screen and (max-width: 1601px) {
    .recruit-company-con{
        margin-left: auto;
        margin-right: 0;
    }
}
.recruit-company-con h2{
    font-size: 8.6rem;
    color: #564603;
    line-height: 1;
    letter-spacing: 0.1em;
    text-align: right;
    margin-bottom: 30px;
}
.recruit-company-con p{
    font-size: 2.6rem;
    color: #564603;
    text-align: right;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.recruit-company-con p::before{
    content: "";
    display: block;
    width: 45%;
    left: 0;
}


@media screen and (max-width: 934px) {
    .recruit-company-con h2{
        font-size: 8.9vw;
        text-align: center;
    }
    .recruit-company-con p{
        font-size: 2.8vw;
    }
}

@media screen and (max-width: 805px) {
    .recruit-company-con h2{
        font-size: 8.8vw;
        text-align: center;
    }
    .recruit-company-con p{
        font-size: 2.8vw;
    }
}


.recruit-interview-ttl{
    max-width: 1680px;
    margin: 0 auto 50px;
}
@media screen and (max-width: 1780px) {
    .recruit-interview-ttl{
        margin: 0 80px 50px;
    }
}
@media screen and (max-width: 768px) {
    .recruit-company-con h2{
        font-size: 9.8vw;
    }
    .recruit-interview-ttl{
        margin: 0 20px 50px;
    }
}
.recruit-interview-ttl h2{
    font-size: 3.3rem;
    color: #2d270e;
}
.recruit-interview-block{
    position: relative;
    width: 400px;
    height: 492px;
    cursor:pointer
}
.interview-kakko{
    position: absolute;
    height: 25px;
    width: 25px;
    border-left: solid 1px #564603;
    border-bottom: solid 1px #564603;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
}
.interview-number{
    position: absolute;
    bottom: 0;
    right: 0;
    color: #2d270e;
    font-size: 3.3rem;
}
.recruit-interview-img{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 68.5%;
    margin-bottom: 15px;
}
.recruit-interview-img1{
    background-image: url(./images/interview1.jpg);
}
.recruit-interview-img2{
    background-image: url(./images/interview2.jpg);
}
.recruit-interview-img3{
    background-image: url(./images/interview3.jpg);
}
.recruit-interview-img4{
    background-image: url(./images/interview4.jpg);
}
.recruit-interview-text-inr{
    display: flex;
    margin-bottom: 10px;
}
.recruit-interview-text-head{
    padding-right: 15px;
    margin-right: 15px;
    box-sizing: border-box;
    white-space: nowrap;
    display: flex;
    position: relative;
}
.recruit-interview-text-head::after{
    content: "";
    display: block;
    height: 16px;
    border-right: solid 1px #a5a290;
    position: absolute;
    right: 0;
    top: 8px;
}
.recruit-interview-text-head.modal-text{
    padding-right: 20px;
    margin-right: 20px;
}
.recruit-interview-text-head p{
    font-size: 1.6rem;
    color: #656565;
}
.recruit-interview-text-body p{
    font-size: 1.6rem;
    color: #2d270e;
}
.recruit-interview-text-head.modal-text p{
    font-size: 1.8rem;
}
.recruit-interview-text-body.modal-text p{
    font-size: 1.8rem;
}
@media screen and (max-width: 828px) {
    .recruit-interview-block{
        width: 600px;
        height: 740px;
    }
}
@media screen and (max-width: 768px) {
    .recruit-interview-block{
        width: 400px;
        height: 492px;
    }
    .recruit-interview-text-head.modal-text{
        padding-right: 10px;
        margin-right: 10px;
    }
    .recruit-interview-text-head::after{
        height: 13px;
        top: 6px;
    }
    .recruit-interview-ttl h2{
        font-size: 2.6rem;
    }
    .interview-number{
        font-size: 3rem;
    }
    .recruit-interview-text-head p{
        font-size: 1.8rem;
    }
    .recruit-interview-text-body p{
        font-size: 1.8rem;
    }
    .recruit-interview-text-head.modal-text p{
        font-size: 1.8rem;
    }
    .recruit-interview-text-body.modal-text p{
        font-size: 1.8rem;
    }
}
@media screen and (max-width: 480px) {
    .recruit.loop-list li{
        margin-right: 30px;
    }
    .recruit-interview-block{
        width: 240px;
        height: 380px;
    }
    .recruit-interview-ttl h2{
        font-size: 2.2rem;
    }
    .interview-number{
        font-size: 2.2rem;
    }
    .recruit-interview-text-head p{
        font-size: 1.2rem;
    }
    .recruit-interview-text-body p{
        font-size: 1.2rem;
    }
    .recruit-interview-text-head.modal-text p{
        font-size: 1.2rem;
    }
    .recruit-interview-text-body.modal-text p{
        font-size: 1.2rem;
    }
}
.recruit-job{
    max-width: 1680px;
    margin: auto;
}
@media screen and (max-width: 1780px) {
    .recruit-job{
        margin: 0 80px;
    }
}
.recruit-job-ttl{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 65px;
}
.recruit-job-ttl h2{
    font-size: 3.3rem;
    color: #564603;
}
.recruit-job-ttl p{
    font-size: 2rem;
    color: #2d270e;
}
.recruit-job-con{
    display: flex;
    justify-content: space-between;
}
.recruit-job-block-l{
    width: 46.428%;
}
.recruit-job-block-r{
    width: 50%;
}
.recruit-job-block-ttl{
    font-size: 3.3rem;
    color: #2d270e;
    padding-top: 25px;
    padding-bottom: 60px;
}
.recruit-job-occupation.job-mb1{
    margin-bottom: 90px;
}
.recruit-job-occupation.job-mb2{
    margin-bottom: 75px;
}
.recruit-job-occupation.job-mb3{
    margin-bottom: 50px;
}
.recruit-job-occupation h4{
    font-size: 2rem;
    color: #2d270e;
    margin-bottom: 30px;
}
.recruit-job-occupation-inr{
    box-sizing: border-box;
    margin-left: 0px;
    padding-left: 45px;
}
.recruit-job-occupation-inr::after{
}
.recruit-job-occupation-inr h5{
    font-size: 2rem;
    color: #656565;
    margin-bottom: 35px;
    display: inline-flex;
    position: relative;
    align-items: center;
}
.recruit-job-occupation-inr h5::after{
    content: "";
    display: block;
    height: 15px;
    border-right: solid 1px #564603;
    box-sizing: border-box;
    position: absolute;
    right: -20px;
}
.recruit-job-occupation-block p{
    font-size: 1.8rem;
    color: #000000;
}

.job-accordion{
    margin-bottom: 10px;
}
.job-accordion-head{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: #2d270e;
    text-align: left;
    position: relative;
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: #000000;
    padding: 0;
}
.job-accordion-head::before,
.job-accordion-head::after{
    content: "";
    position: absolute;
    right: 0;
    width: 16px;
    height: 1px;
    background: #2d270e;
    transition:
        transform 0.4s cubic-bezier(.4,0,.2,1);
}
.job-accordion-head::before{
    transform: rotate(90deg);
}
.job-accordion.is-open .job-accordion-head::before{
    transform: rotate(0deg);
}
.job-accordion-body{
    height: 0;
    overflow: hidden;
    transition:
        height 0.4s cubic-bezier(.4,0,.2,1);
}
.job-accordion-body p{
    font-size: 1.4rem;
    color: #656565;
    margin-bottom: 20px;
}

.recruit-job-btn-block{
    max-width: 726px;
    margin: 0 auto 0 8px;
}
.recruit-job-btn{
    height: 80px;
    background-color: #a5a290;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}
.recruit-job-btn::after{
    content: "";
    display: block;
    background-image: url(./images/icon_job_btn.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 17px;
    height: 16px;
    position: absolute;
    right: 78px;
}
@media screen and (max-width: 1315px) {
    .recruit-job-btn::after{
        right: 30px;
    }
}
.recruit-job-btn-block.job-btn-mb1{
    margin: 0 auto 100px 8px;
}
.recruit-job-btn p{
    color: #2d270e;
    font-size: 1.8rem;
}
.recruit-job-btn-link{
    text-align: right;
    margin-top: 15px;
    max-width: 735px;
    margin-right: auto;
}
.recruit-job-btn-link a{
    display: inline-block;
    font-size: 1.8rem;
    color: #656565;
}
.recruit-job-img{
    background-image: url(./images/recruit_job.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding-top: 66.666%;
    margin-bottom: 80px;
}
@media screen and (max-width: 1120px) {
    .recruit-job-con{
        display: block;
    }
    .recruit-job-block-l{
        width: 100%;
    }
    .recruit-job-block-r{
        width: 100%;
    }
    .recruit-job-btn-block{
        margin: auto;
    }
    .recruit-job-btn-block.job-btn-mb1{
        margin: 0 auto 100px;
    }
    .recruit-job-img{
        margin-top: 115px;
    }
}

.recruit-view-back{
    background-color: #e0dcc3;
    box-sizing: border-box;
    position: relative;
}
.recruit-view-line-top{
    width: 100%;
    position: absolute;
    top: 0;
}
.recruit-view-line-bottom{
    width: 100%;
    position: absolute;
    bottom: 1px;
}
.recruit-view-line-top::before,.recruit-view-line-bottom::before{
    width: 100%;
}
.recruit-view{
    height: 220px;
    max-width: 1440px;
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
}
@media screen and (max-width: 1540px) {
    .recruit-view{
        padding: 0 50px;
        box-sizing: border-box;
    }
}
.recruit-view-link{
    display: inline-block;
}
.recruit-view-link p{
    font-size: 2.8rem;
    color: #2d270e;
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 30px;
}
.recruit-view-link p::after{
    content: "";
    display: block;
    background-image: url(./images/icon_link.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 15px;
    height: 14px;
    position: absolute;
    right: -30px;
}

@media screen and (max-width: 1780px) {
.recruit-job-occupation-inr{
    padding-left: 30px;
}
}

@media screen and (max-width: 828px) {
    .recruit-job-occupation h4{
        margin-bottom: 45px;
    }
    .recruit-job-occupation-inr{
        padding-left: 40px;
    }
    .recruit-job-btn{
        height: 190px;
    }
    .recruit-job-btn::after {
        width: 26px;
        height: 23px;
        right: 70px;
    }
    .recruit-job-btn p{
        text-align: center;
    }
    .recruit-view-link p{
        padding-right: 50px;
    }
}
@media screen and (max-width: 768px) {
    .recruit-job{
        margin: 0 20px;
    }
    .recruit-job-ttl h2{
        font-size: 2.3rem;
    }
    .recruit-job-ttl p{
        font-size: 1.1rem;
    }
    .recruit-job-block-ttl{
        font-size: 2.4rem;
    }
    .recruit-job-occupation h4{
        font-size: 2rem;
        margin-bottom: 30px;
    }
    .recruit-job-occupation-inr{
        padding-left: 20px;
    }
    .recruit-job-occupation-inr h5{
        font-size: 2rem;
    }
    .job-accordion-head{
        font-size: 1.6rem;
    }
    .job-accordion-body p{
        font-size: 1.4rem;
    }
    .recruit-job-btn{
        height: 100px;
    }
    .recruit-job-btn::after {
        width: 17px;
        height: 16px;
        right: 30px;
    }
    .recruit-job-btn p{
        font-size: 1.8rem;
        text-align: center;
    }
    .recruit-job-btn-link a{
        font-size: 1.7rem;
    }
    .recruit-view{
        padding: 0 30px;
    }
    .recruit-view-link p{
        font-size: 2.6rem;
        padding-right: 30px;
    }
    .recruit-view-link p::after{
        width: 15px;
        height: 14px;
    }
    .recruit-job-occupation-block p{
        font-size: 1.6rem;
    }
}
@media screen and (max-width: 480px) {
    .recruit-job-btn p{
        font-size: 1.6rem;
    }
    .recruit-job-btn-link a{
        font-size: 1.4rem;
    }
}
/* モーダル
------------------------------------------------ */
.modal{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.modal.is-open{
    display: block;
}

.modal_backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}

.modal_panel{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    max-width:1680px;
    width:100%;
    max-height:calc(100dvh - 80px);
    background:#ffffff;
    box-sizing:border-box;
    padding-top:60px;
    padding-right:60px;
    padding-bottom:60px;
    padding-left:60px;
    display:flex;
    flex-direction:column;
}
@media screen and (max-width: 1780px) {
    .modal_panel{
        width: calc(100% - 100px);
    }
}
@media screen and (max-width: 768px) {
    .modal_panel{
        width: calc(100% - 20px);
    }
}
.modal_close{
    position: absolute;
    top: 25px;
    right: 30px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.modal_close::before,
.modal_close::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 1px;
    background: #a5a290;
    transform-origin: center;
}
.modal_close::before{
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal_close::after{
    transform: translate(-50%, -50%) rotate(-45deg);
}
.modal_content{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    flex:1;
    min-height:0;
    padding-right: 10px;
    box-sizing: border-box;
}
.modal_hero{
    display: flex;
    align-items: flex-end;
    margin-bottom: 60px;
}
.modal_meta{
    margin-left: 45px;
}
.modal_meta_top{
    margin-bottom: 40px;
}
.modal_img{
    width: 55%;
    padding-top: 35%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.modal_img1{
    background-image: url(./images/interview1.jpg);
}
.modal_img2{
    background-image: url(./images/interview2.jpg);
}
.modal_img3{
    background-image: url(./images/interview3.jpg);
}
.modal_img4{
    background-image: url(./images/interview4.jpg);
}
.modal_meta_bottom{
}
.modal_num{
    font-size: 2.2rem;
    color: #a5a290;
/*     margin-bottom: 10px; */
}
.modal_name{
    font-size: 5.4rem;
    color: #2d270e;
}

.modal_label{
    font-size: 1.4rem;
    color: #656565;
    margin-bottom: 10px;
}
.modal_text{
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}
.modal_text_block{
    width: 48%;
}
.modal_question_num{
    font-size: 1.8rem;
    color: #a5a290;
    margin-bottom: 10px;
}
.modal_question{
    font-size: 1.8rem;
    color: #2d270e;
    padding-bottom: 15px;
    border-bottom: solid 1px #a5a290;
    margin-bottom: 15px;
}
.modal_text_block p{
    font-size: 1.6rem;
    color: #2d270e;
}

@media screen and (max-width: 1050px) {
    .modal_close{
        top: 20px;
        right: 20px;
    }
    .modal_panel{
        aspect-ratio: auto;
        min-height: calc(100vh - 40px);
        min-height: calc(100dvh - 40px);
        padding: 80px 60px 15px 60px;
    }
    .modal_hero{
        display: block;
        margin-bottom: 40px;
    }
    .modal_img{
        width: 100%;
        padding-top: 59.52%;
        margin-bottom: 20px;
    }
    .modal_meta{
        margin-left: 0;
    }
    .modal_meta_bottom{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .modal_text{
        display: block;
    }
    .modal_text_block{
        width: 100%;
        margin-bottom: 50px;
    }
}
@media screen and (max-width: 828px) {
    .modal_question{
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .modal_text_block p{
        color: #2d270e;
    }
}
@media screen and (max-width: 768px) {
    .modal_panel{
        padding: 70px 20px 30px;
    }
    .modal_close {
        top: 20px;
        right: 20px;
    }
    .modal_num{
        font-size: 1.6rem;
    }
    .modal_name{
        font-size: 2.8rem;
    }
    .modal_question_num{
        font-size: 1.8rem;
    }
    .modal_question{
        font-size: 1.5rem;
    }
    .modal_text_block p{
        font-size: 1.3rem;
    }
}
/* フッター
------------------------------------------------ */
.footer-back{
    background-color: #d5e2e2;
}
.recruit-footer-back{
    background-color: #efeddf;
}
.footer{
    max-width: 1680px;
    margin: auto;
}
@media screen and (max-width: 1720px) {
    .footer{
        margin: 0 80px;
    }
}
@media screen and (max-width: 768px) {
    .footer{
        margin: 0 20px;
    }
}
.footer-link-block{
    padding-bottom: 10px;
    display: flex;
    justify-content: flex-end;
    position: relative;
    border-bottom: solid 1px #2d270e;
}
.footer-link-block::before{
    width: 100%;
    bottom: 0;
}
.footer-link{
    font-size: 2.2rem;
    color: #2d270e;
    display: inline-flex;
    padding-right: 50px;
    box-sizing: border-box;
    position: relative;
}
.footer-link::after{
    content: "";
    display: block;
    background-image: url(./images/icon_top.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 10px;
    height: 18px;
    position: absolute;
    right: 20px;
    bottom: 8px;
}
.footer-inr{
}
.footer-copy-block{
    padding: 30px 0;
    box-sizing: border-box;
}
.footer-copy{
    font-size: 1.6rem;
    color: #2d270e;
}
@media screen and (max-width: 768px) {
    .footer-link{
        font-size: 1.6rem;
        padding-right: 30px;
    }
    .footer-link::after {
        width: 8px;
        height: 16px;
        right: 10px;
        bottom: 4px;
    }
    .footer-copy{
        font-size: 1.4rem;
    }
}
/* ADD
------------------------------------------------ */


.b {
    font-weight: bold;
}

.center {
    text-align: center;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mt40 {
    margin-top: 40px;
}

.mt60 {
    margin-top: 60px;
}

.mt75 {
    margin-top: 75px;
}

.mt80 {
    margin-top: 80px;
}

.mt90 {
    margin-top: 90px;
}

.mt120 {
    margin-top: 120px;
}

.mt125 {
    margin-top: 125px;
}

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

.mb40{
    margin-bottom: 40px;
}

.mb85 {
    margin-bottom: 85px;
}

.pb275{
    padding-bottom: 275px;
}

.clear {
    clear: both;
}

.flo-l {
    float: left;
}

.flo-r {
    float: right;
}

.f11 {
    font-size: 11px;
}

.f12 {
    font-size: 12px;
}

.f15 {
    font-size: 15px;
}

.f16 {
    font-size: 16px;
}

.f18 {
    font-size: 18px;
}

.f21 {
    font-size: 21px;
}

.f24 {
    font-size: 24px;
}

.pc{
    display: block;
}
.sp{
    display: none;
}
@media screen and (max-width: 828px) {
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
}

.l-header-sp{
  position:relative;
  display:none;
}

.l-header-poti-sp{
  pointer-events:none;
}

.l-header-flex-sp{
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:auto;
}
.l-header-flex-sp.l-recruit-header-flex-sp{
  align-items:center;
  justify-content:space-between;
}
.fv-logo-recruit{
    margin-left: 50px;
}
@media screen and (max-width: 768px) {
    .fv-logo-recruit{
        margin-left: 20px;
    }
}

.btn-trigger{
    width:40px;
    height:30px;
    position:relative;
    cursor:pointer;
    background:none;
    border:none;
    padding:0;
    margin:0;
    z-index:1200;
}

.btn-trigger span{
    display:block;
    width:100%;
    height:1px;
    background:#2d270e;
    position:absolute;
    left:0;
    top:50%;
    transition:transform 0.3s ease;
    transform-origin:center;
}

.btn-trigger span:nth-of-type(1){
    transform:translateY(-8px);
}

.btn-trigger span:nth-of-type(2){
    transform:translateY(8px);
}

.btn-trigger.active span:nth-of-type(1){
    transform:translateY(0) rotate(45deg);
}

.btn-trigger.active span:nth-of-type(2){
    transform:translateY(0) rotate(-45deg);
}

.menu-overlay{
    padding:0 30px 0 30px;
    box-sizing:border-box;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    height:100dvh;
    background-color:#fff;
    opacity:0;
    visibility:hidden;
    transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
    z-index:1150;
}

.menu-overlay.active{
    opacity:1;
    visibility:visible;
    overflow-y:auto;
}

.sp-menu-inr{
    padding:30px 0 30px 30px;
    border-left:solid 1px #2d270e;
    box-sizing:border-box;
}

.fv-logo-menu-sp{
    max-width:150px;
    display:flex;
    align-items:center;
    margin-bottom:50px;
}

.fv-logo-menu-sp::before{
    content:"";
    display:block;
    border-bottom:solid 1px #2d270e;
    width:30px;
    position:absolute;
    left:16px;
}

.c-navi-list ul li{
    margin-bottom:30px;
}

.c-navi-list ul li a{
    color:#564603;
    font-size:1.8rem;
}

.sp-menu-copy{
    position:absolute;
    bottom:15%;
    left:30px;
}
.sp-menu-copy p{
    font-size: 1.4rem;
}

@media screen and (max-width:960px){
    .l-header-sp{
        display:block;
    }

    .header{
        position:absolute;
        width:calc(100% - 40px);
    }

    .header.is-fixed-sp{
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:9999;
        background-color: rgba(255,255,255,0.55);
    }

    .header.is-fixed-sp-menu{
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:9999;
    }

    .l-header-poti-sp{
        position:fixed;
        top:0;
        left:0;
        right:0;
        width:100%;
        z-index:1200;
        padding:20px 0 10px;
        transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        padding 0.3s ease;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
    }

    .btn-trigger{
        position:fixed;
        top:calc(env(safe-area-inset-top, 0px) + 24px);
        right:50px;
        z-index:1300;
        display:block;
        transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        top 0.3s ease;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
    }

    body.is-sp-menu-ready .l-header-poti-sp{
        opacity:1;
        visibility:visible;
    }

    body.is-sp-menu-ready .btn-trigger{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    body.is-sp-menu-open .l-header-poti-sp{
        opacity:1;
        visibility:visible;
    }

    body.is-sp-menu-open .btn-trigger{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .l-header-sp.scrolled .btn-trigger{
        top: 16px;
    }

    .l-header-sp.scrolled .l-header-poti-sp{
        padding-top:15px;
        background-color: rgba(255,255,255,0.5);
    }
    .menu-overlay{
        pointer-events:none;
    }

    .menu-overlay.active{
        pointer-events:auto;
    }
}
@media screen and (max-width:768px){
    .l-header-sp.scrolled .btn-trigger{
        top:9px;
    }
    .btn-trigger{
        right:20px;
    }
}

[data-scroll-chain]::-webkit-scrollbar{
    width: 14px;
}

[data-scroll-chain]::-webkit-scrollbar-track{
    background: transparent;
}

[data-scroll-chain]::-webkit-scrollbar-thumb{
    background: rgba(45,39,14,0.5);
    border-radius: 999px;
    border: 4px solid transparent;
    background-clip: content-box;
}

[data-scroll-chain]::-webkit-scrollbar-button{
    display: none;
    width: 0;
    height: 0;
}



.line-draw{
    position:relative;
}

.line-draw.draw-ttb-r::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    width:1px;
    background:#2d270e;
    transform:scaleY(0);
    transform-origin:center top;
    transition:
        transform 0.9s cubic-bezier(.4,0,.2,1);
    will-change:transform;
}

.line-draw.draw-ttb-l::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:1px;
    background:#2d270e;
    transform:scaleY(0);
    transform-origin:center top;
    transition:
        transform 0.9s cubic-bezier(.4,0,.2,1);
    will-change:transform;
}

.line-draw.draw-ttb-r.is-inview::after,
.line-draw.draw-ttb-l.is-inview::after{
    transform:scaleY(1);
}

.draw-ltr::before,
.draw-rtl::after{
    content:"";
    position:absolute;
    height:1px;
    background:#2d270e;
    transform:
        scaleX(0);
    transition:
        transform 0.9s cubic-bezier(.4,0,.2,1);
    will-change:transform;
}

.draw-ltr::before{
    transform-origin:left center;
}

.draw-rtl::after{
    transform-origin:right center;
}

.is-inview .draw-ltr::before,
.is-inview .draw-rtl::after{
    transform:
        scaleX(1);
}

@media screen and (min-width:1630px){
	.message-con h3{
		margin-top: 50px;
	}
}