@charset "UTF-8";

:root{

    --main-color: #E8E3D0;
    --sub-color1: #C14325;
    --sub-color2: #36190E;
    --color: #000000;
    --font1: "Noto Serif JP", sans-serif;
    --font2: "Noto Sans JP", sans-serif;

}
img{
    width: 100%;
}


@media screen and (min-width:769px) , print{

    :root{
        --padding-lr: 2.5rem;
        --font-size: 1.6rem;
    }
    html{
        font-size: 62.5%;
    }
    body{
        font-size: var(--font-size);
    }
    .pc2024{
        display: block;
    }
    .sp2024{
        display: none;
    }
    .pci2024{
        display: inline;
    }
    .pcib2024{
        display: inline-block;
    }
    .pcf2024{
        display: flex;
    }

}
@media screen and (max-width:768px) , print{

    :root{
        --padding-lr: 1.5rem;
        --font-size: 1.4rem;
    }
    html{
        font-size: 2.415458vw;
    }
    body{
        font-size: 1.4rem;
    }
    .sp2024{
        display: block;
    }
    .spi2024{
        display: inline;
    }
    .spib2024{
        display: inline-block;
    }
    .spf2024{
        display: flex;
    }

}



/* ----- ベース ----- */
.main2024{
    width: 100%;
    /* overflow-x: hidden; */
    overflow: hidden;
}
.sec2024{
    padding-top: 12rem;
    padding-bottom: 12rem;
}
.sec2024__inner{
    position: relative;
    z-index: 5000;
}
.layout2024,
.layout2024 *{
    font-size: var(--font-size);
    font-family: var(--font1);
    color: var(--color);
    line-height: 1;
    box-sizing: border-box;
}
.layout2024 a{
    transition: .3s all ease-in-out;
    text-decoration: none;
    color: var(--color);
}
.layout2024 a:hover{
    opacity: .6;
}
.fullwidth2024{
    width: 100%;
    padding-left: var(--padding-lr);
    padding-right: var(--padding-lr);
    margin-left: auto;
    margin-right: auto;
}
.maxwidth2024{
    width: 100%;
    max-width: calc(140rem + (var(--padding-lr) * 2));
    padding-left: var(--padding-lr);
    padding-right: var(--padding-lr);
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1366px) , print{

}
@media screen and (max-width:768px) , print{
    .main2024{
        width: 100%;
        /* overflow-x: hidden; */
        overflow: hidden;
    }
    .sec2024{
        padding-top: 10rem;
        padding-bottom: 10rem;
    }
    .sec2024__inner{
        position: relative;
        z-index: 5000;
    }
    .layout2024,
    .layout2024 *{
        font-size: var(--font-size);
        font-family: var(--font1);
        color: var(--color);
        line-height: 1;
        box-sizing: border-box;
    }
    .layout2024 a{
        transition: .3s all ease-in-out;
        text-decoration: none;
        color: var(--color);
    }
    .layout2024 a:hover{
        opacity: .6;
    }
    .fullwidth2024{
        width: 100%;
        padding-left: var(--padding-lr);
        padding-right: var(--padding-lr);
        margin-left: auto;
        margin-right: auto;
    }
    .maxwidth2024{
        width: 100%;
        max-width: none;
        padding-left: var(--padding-lr);
        padding-right: var(--padding-lr);
        margin-left: auto;
        margin-right: auto;
    }

}



/* ----- パーツ ----- */
/* ----- 見出し */
.sec2024__title1{
    margin-bottom: 8.5rem;
    text-align: center;
    position: relative;
}
.sec2024__title1 span{
    font-size: 3.6rem;
    line-height: calc(80 / 36);
    font-weight: 700;
    letter-spacing: .25em;
    position: relative;
}
.sec2024__title1 span::before{
    content: "";
    display: block;
    width: 19.1rem;
    height: 2px;
    background: #989898;
    position: absolute;
    left: -12rem;
    top: -1.5rem;
    transform: rotate(-45deg);
}


/* ----- 見出し */
.sec2024__title2{
    margin-bottom: 6.5rem;
    text-align: center;
}
.sec2024__title2::after{
    background: var(--sub-color1);
    content: "";
    display: block;
    width: 15rem;
    height: 2px;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
}
.sec2024__title2__en{
    color: var(--sub-color1);
    line-height: 1;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .4em;
    opacity: .5;
    display: block;
}
.sec2024__title2__jp{
    color: var(--sub-color1);
    font-size: 4.2rem;
    font-weight: 700;
    line-height: calc(80 / 42);
    display: block;
}


/* ----- テキスト */
.Text2024{
    font-size: var(--font-size);
    line-height: calc(30 / 16);
}
.corporatelogo{
    
}

/* ----- フォント */
/* ----- ボタン */
.Button2024{
    max-width: 36rem;
    height: 8rem;
    margin-left: auto;
    margin-right: auto;
}
.Button2024 a{
    border: 1px solid var(--sub-color2);
    background: var(--sub-color2);
    width: 100%;
    height: 100%;
    font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 1 !important;
}
.Button2024 a:hover{
    color: var(--sub-color2);
    background: transparent;
}
/* PDFボタン */
.Button2024.-pdf a{
    border: 1px solid var(--sub-color1);
    background: var(--sub-color1);
}
.Button2024.-pdf a::before{
    content: "";
    display: block;
    width: 3rem;
    height: 4rem;
    margin-right: 2rem;
    background-image: url(../images/common/icon_pdf-white.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transition: .3s all ease-in-out;
}
.Button2024.-pdf a:hover{
    color: var(--sub-color1);
    background: transparent;
}
.Button2024.-pdf a:hover::before{
    background-image: url(../images/common/icon_pdf-orange.svg);
}

/* ----- 背景 */
.bg-pattern2024{
    background-image: url(../images/common/bg_pattern.jpg);
    background-image: image-set(url(../images/common/bg_pattern.jpg) 1x, url(../images/common/bg_pattern@2x.jpg) 2x);
    background-image: -webkit-image-set(url(../images/common/bg_pattern.jpg) 1x, url(../images/common/bg_pattern@2x.jpg) 2x);
    background-position: center center;
    position: relative;
    z-index: 5000;
    background-size: cover;
}
.bg-pattern2024.-orange::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: #FFF3E0;
    mix-blend-mode: multiply;
}

/*----- アニメーション */
.view2024{
    opacity: 0;
    transform: translate(0, 1rem);
    transition: all ease-in-out 750ms;
}
.view2024.scrollin2024{
    opacity: 1;
    transform: translate(0, 0);
}
.view2_2024{
    overflow: hidden;
    position: relative;
}
.view2_2024::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background: #fff;
    transition: all ease-in-out 750ms;
}
.view2_2024.scrollin2_2024::after {
    left: 100%;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:768px) , print{
    .sec2024__title1{
        margin-bottom: 4rem;
        text-align: center;
    }
    .sec2024__title1 span{
        font-size: 2.8rem;
        width: 100%;
        display: block;
        
    }
    .sec2024__title1 span::before{
        left: -2.5rem;
        top: -3.5rem;
    }

    
    /* ----- 見出し */
    .sec2024__title2{
        margin-bottom: 4rem;
        text-align: center;
    }
    .sec2024__title2::after{
        background: var(--sub-color1);
        content: "";
        display: block;
        width: 15rem;
        height: 2px;
        margin-top: 1rem;
        margin-left: auto;
        margin-right: auto;
    }
    .sec2024__title2__en{
        color: var(--sub-color1);
        font-size: 1.4rem;
    }
    .sec2024__title2__jp{
        color: var(--sub-color1);
        font-size: 3rem;
    }
    
    
    /* ----- テキスト */
    .Text2024{
        font-size: var(--font-size);
        line-height: calc(30 / 16);
    }
    
    /* ----- ボタン */
    .Button2024{
        max-width: 36rem;
        height: 8rem;
        margin-left: auto;
        margin-right: auto;
    }
    .Button2024 a{
        border: 1px solid var(--sub-color2);
        background: var(--sub-color2);
        width: 100%;
        height: 100%;
        font-size: 1.8rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        opacity: 1 !important;
    }
    .Button2024 a:hover{
        color: var(--sub-color2);
        background: transparent;
    }
    /* PDFボタン */
    .Button2024.-pdf a{
        border: 1px solid var(--sub-color1);
        background: var(--sub-color1);
    }
    .Button2024.-pdf a::before{
        content: "";
        display: block;
        width: 3rem;
        height: 4rem;
        margin-right: 2rem;
        background-image: url(../images/common/icon_pdf-white.svg);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        transition: .3s all ease-in-out;
    }
    .Button2024.-pdf a:hover{
        color: var(--sub-color1);
        background: transparent;
    }
    .Button2024.-pdf a:hover::before{
        background-image: url(../images/common/icon_pdf-orange.svg);
    }
    
    /* ----- 背景 */
    .bg-pattern2024{
        background-image: url(../images/common/bg_pattern.jpg);
        background-image: image-set(url(../images/common/bg_pattern.jpg) 1x, url(../images/common/bg_pattern@2x.jpg) 2x);
        background-image: -webkit-image-set(url(../images/common/bg_pattern.jpg) 1x, url(../images/common/bg_pattern@2x.jpg) 2x);
        background-position: center center;
        position: relative;
        z-index: 5000;
        background-size: cover;
    }
    .bg-pattern2024.-orange::before{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background: #FFF3E0;
        mix-blend-mode: multiply;
    }
    
    /*----- アニメーション */
    .view2024{
        opacity: 0;
        transform: translate(0, 1rem);
        transition: all ease-in-out 750ms;
    }
    .view2024.scrollin2024{
        opacity: 1;
        transform: translate(0, 0);
    }
    .view2_2024{
        overflow: hidden;
        position: relative;
    }
    .view2_2024::after{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        background: #fff;
        transition: all ease-in-out 750ms;
    }
    .view2_2024.scrollin2_2024::after {
        left: 100%;
    }

}



/* ----- ヘッダー ----- */
.header2024{
    width: 100%;
    height: 10rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    background: rgba(255,255,255,.7);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 9900;
}
.header2024__inner{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header2024__logo{
    width: 12.8rem;
}
.header2024__logo a{
    display: block;
}
.header2024__logo img{
    width: 100%;
}
.header2024-nav{
    width: calc(100% - 12.8rem);
}
.header2024-nav__inner{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.header2024-nav__item{
    font-size: 1.6rem;
    font-weight: 600;
}
.header2024-nav__item:not(:last-child){
    margin-right: 6rem;
}
.header2024-nav__item.-fs a{
    font-size: 1.4rem;
    line-height: calc(24 / 14);
    text-align: center;
    display: block;
}
@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1200px) , print{
    .header2024-nav__item:not(:last-child){
        margin-right: 2rem;
    }
}
@media screen and (max-width:768px) , print{
    .header2024{
        width: 100%;
        height: 9rem;
        padding-top: 0;
        padding-bottom: 0;
        background:#fff;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        z-index: 9900;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .header2024__inner{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .header2024__logo{
        width: 11.3rem;
        z-index: 9999;
        position: fixed;
    }
    .header2024__logo a{
        display: block;
    }
    .header2024__logo img{
        width: 100%;
    }
    .header2024-nav{
        width:100%;
        display: none;
    }
    .header2024-nav__inner{
        justify-content: flex-start;
        flex-direction: column;
        background-color: #36190E;
        width: 100%;
        height: 100vh;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        padding: 16rem 5rem 0;
        overflow-y: scroll;
    }
    .header2024-nav__item{
        font-size: 1.6rem;
        font-weight: 600;
        width: 100%;
        text-align: center;
        padding:3rem 0;
    }
    .header2024-nav__item:not(:last-child){
        margin-right: 0;
        border-bottom: 1px solid #fff;
    }
    .header2024-nav__item.-fs a{
        font-size: 1.4rem;
        line-height: calc(24 / 14);
        text-align: center;
        display: block;
    }
    .header2024-nav__item a{
        color: #fff;
    }
    .header2024-menu-button{
        width: 6rem;
        height: 6rem;
        padding: 1.3rem;
        box-sizing: border-box;
        display: block !important;
        z-index: 9900;
        cursor: pointer;
        background: #000;
        position: fixed;
        right:1.5rem;
        top: 1.5rem;
        border-radius: 0;
    }
    .header2024-menu-button .menu{
        color: #fff;
        font-size: 1.2rem;
        position: absolute;
        bottom: 1rem;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
    }
    .header2024-menu-button i {
        display: block;
        width: 100%;
        height: 0.1rem;
        background: #fff;
        -webkit-transition: background 0.5s;
        transition: background 0.5s;
        position: relative;
        left: 0px;
        top: 1rem;
    }
    .header2024-menu-button i:before, .header2024-menu-button i:after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: #fff;
        position: absolute;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: all 0.3s !important;
        transition: all 0.3s !important;
    }
    .header2024-menu-button i:before {
        -webkit-transform: translateY(0.8rem);
        -ms-transform: translateY(0.8rem);
        transform: translateY(0.8rem);
    }
    .header2024-menu-button i:after {
        -webkit-transform: translateY(-0.8rem);
        -ms-transform: translateY(-0.8rem);
        transform: translateY(-0.8rem);
    }
    .header2024-menu-button.js-on{
        background: transparent;
    }
    .js-on i{
        background: transparent;
    }
    .js-on i:before {
        transform: translateY(0px) rotate(30deg);
    }
    .js-on i:after {
        transform: translateY(0px) rotate(-30deg);
    }

}



/* ----- フッター ----- */
.footer2024{
    padding-top: 5rem;
    padding-bottom: 3.2rem;
    background: #36190E;
    position: relative;
}
.footer2024__body{
    max-width: 105rem;
    margin-left: auto;
    margin-right: auto;
}
.footer2024-header{
    width: 100%;
    margin-bottom: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer2024-block__left{
    width: 38.4rem;
}
.footer2024-header__fs{
    width: 100%;
    margin-bottom: 4rem;
}
.footer2024-header__fs a{
    display: block;
}
.footer2024-header__fs img{
    width: 100%;
}
.footer2024-header__recruit{
    width: 100%;
}
.footer2024-header__recruit a{
    font-family: var(--font2);
    width: 100%;
    height: 8rem;
    font-size: 2.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.footer2024-brand__title{
    font-family: var(--font2);
    font-size: 2.6rem;
    margin-bottom: 2.8rem;
    line-height: calc(29 / 26);
    font-weight: 700;
    color: #fff;
    text-align: center;
}
.footer2024-brand__inner{
    width: 51.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer2024-brand__item{
    width: calc((100% - (1.7rem * 2)) / 4);
}
.footer2024-brand__item a{
    display: block;
}
.footer2024-brand__item img{
    width: 100%;
}
.footer2024-nav{
    width: 100%;
    margin-bottom: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer2024-nav__item:not(:last-child){
    margin-right: 23.8rem;
}
.footer2024-nav__item a{
    font-family: var(--font2);
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}
.footer2024__copyright{
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
}

.wrap-2024-pagetop{
    position: relative;
}
#js-pagetop{
    width: inherit;
    position: fixed;
        right: 0; 
        bottom: -6rem;
    opacity: 0;
    transition: all 0.3s;
    z-index: 8000;
}
    /* スクロール表示 */
    #js-pagetop.foot_fixed {
        position: fixed;
        bottom: 0;
        opacity: 1;
        right: 0; 
    }
    /* フッター絶対位置で固定 */
    #js-pagetop.foot_absolute {
        bottom: 0;
        position: absolute;
        opacity: 1;
        right: 0;
    }
.footer2024-gotop{
    width: 5rem;
    height: 5rem;
        margin-left: auto;
        margin-right: 0;
    /*position: absolute;
    right: 5rem;
    top: 0;
    transform: translateY(-100%);*/
}
    @media (hover: hover){ /*マウス時*/
        .footer2024-gotop:hover{
            opacity: 0.6;
        }
    }
.footer2024-gotop a{
    width: 100%;
    height: 100%;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #36190E;
}
.footer2024-gotop a::before{
    content: "";
    display: block;
    width: 1.4rem;
    height: .8rem;
    background-image: url(../images/common/icon_gotop-arrow.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
@media screen and (min-width:1400px) , print{
    /*親要素幅内
    max-width: calc(140rem +(var(--padding-lr)* 2));の為設定*/
    #js-pagetop {
        right: calc(50% - 70rem - 5rem);
    }
    #js-pagetop.foot_fixed {
        right: calc(50% - 70rem - 5rem);
    }
}

@media screen and (max-width:1200px) , print{
    .footer2024-brand{
        width: calc(50% - 3rem);
    }
    .footer2024-header__left{
        width: 50%;
        margin-right: 3rem;
    }
    .footer2024-nav__item:not(:last-child){
        margin-right: 4rem;
       
    }
}
@media screen and (max-width:768px) , print{
    
    /* ----- フッター ----- */
    .footer2024{
        padding-top: 5rem;
        padding-bottom: 3.2rem;
        background: #36190E;
        position: relative;
    }
    .footer2024__body{
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }
    .footer2024-header{
        width: 100%;
        margin-bottom: 5rem;
        flex-direction: column;
    }
    .footer2024-block__left{
        width: 38.4rem;
    }
    .footer2024-header__fs{
        width: 100%;
        margin-bottom: 4rem;
    }
    .footer2024-header__fs a{
        display: block;
    }
    .footer2024-header__fs img{
        width: 100%;
    }
    .footer2024-header__recruit{
        width: 100%;
    }
    .footer2024-header__recruit a{
        font-family: var(--font2);
        width: 100%;
        height: 8rem;
        font-size: 2.4rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
    }
    .footer2024-brand__title{
        font-family: var(--font2);
        font-size: 2rem;
        margin-bottom: 2rem;
        margin-top:5rem;
    }
    .footer2024-brand__inner{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .footer2024-brand__item{
        width: calc((100% - (1.7rem * 2)) / 4);
    }
    .footer2024-brand__item a{
        display: block;
    }
    .footer2024-brand__item img{
        width: 100%;
    }
    .footer2024-nav{
        width: 100%;
        margin-bottom: 3rem;
       
    }
    .footer2024-nav__item:not(:last-child){
        margin-right: 5rem;
       
    }
    .footer2024-nav__item a{
        font-family: var(--font2);
        font-size: 1.2rem;
        font-weight: 700;
        color: #fff;
    }
    .footer2024__copyright{
        font-size: 1.2rem;
        color: #fff;
        text-align: center;
    }
    .footer2024-gotop{
        width: 4rem;
        height: 4rem;
        position: absolute;
        right: 1.5rem;
        top: 0;
        transform: translateY(-100%);
    }
    .footer2024-gotop a{
        width: 100%;
        height: 100%;
        font-size: 1rem;
        text-align: center;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: #36190E;
    }
    .footer2024-gotop a::before{
        content: "";
        display: block;
        width: 1.4rem;
        height: .8rem;
        background-image: url(../images/common/icon_gotop-arrow.svg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .footer2024-header__left{
        width: 100%;
        margin-right: 0;
    }
    .footer2024-brand{
        width: 100%;   
    }
}