:root{
    --main_color:#C2AD75;
    --ac_color:#460C58;
    --yel_color:#FFF78B;
    --font_color:#000;
}
body{
    font-family: "M PLUS 2", sans-serif;
    font-weight: 600;
    color: var(--font_color);
    background:#fff;
    font-size: 16px;
}
main{
    overflow: hidden;
}
.wrap{
    width:1240px;
    max-width:100%;
    margin:0 auto;
    padding:0 .3rem;
}
a{
    display:inline-block;
    text-decoration: none;
    outline: none;
    color:inherit;
}
ul{
    padding:0;
    margin:0;
    list-style: none;
}
img{
    max-width: 100%;
}
.content_wrap{
    width:980px;
    padding:0 10px;
    margin:0 auto;
    max-width: 100%;
}
.sp_only{
    display:none;
}
.mobile_only{
    display:none;
}
.al_center{
    text-align: center;
}
.al_right{
    text-align: right;
}

.bg_wagara{
    position: relative;
    z-index: 0;
}
.bg_wagara::after{
    content: '';
    display: block;
    position: absolute;
    inset:0;
    z-index: -1;
    background-image: url(../images/bg_wagara_1.png);
    background-blend-mode: overlay;
    opacity: .2;
    background-color:inherit;
}
.bg_wagara.w2::after{
    background-image: url(../images/bg_wagara_2.png);
}
.bg_wagara.w3::after{
    background-image: url(../images/bg_wagara_3.png);
}
.bg_wagara.w4::after{
    background-image: url(../images/bg_wagara_4.png);
}

/*slide_container*/
.slide_container {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease-out;
}
.slide_container.active {
    grid-template-rows: 1fr;
}
.slide_container .inner {
    overflow-y: hidden;
}

/*flip amnime*/
/*横*/
.flip-wrap {
    perspective: 800px; /* 奥行き */
    display: inline-block;
}

.flip-inner {
    transform-style: preserve-3d;
    transition: transform 1s ease;
    display: inline-grid;
    
}
.sec_title .flip-inner{
    animation: flip 4s infinite ease;
}

/* 共通 */
.flip-inner span {
    grid-area: 1 / 1;
    backface-visibility: hidden;
    white-space: nowrap;
    text-align: center;
}

/* 表 */
.front {
    transform: rotateY(0deg);
}
/* 裏 */
.back {
    transform: rotateY(180deg);
}

.flip-inner.active {
    transform: rotateY(180deg);
}
@keyframes flip {
    0%   { transform: rotateY(0); }
    20%   { transform: rotateY(0); }
    40%   { transform: rotateY(180deg); }
    60%  { transform: rotateY(180deg); }
    80% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}

/*縦*/
/*navで使用*/
.vertical .flip-wrap {
    perspective: 1200px; /* 奥行き */
}
.vertical .flip-inner {
    transition: transform .5s ease;
    animation: flipX 2s ease-out forwards;
    animation-delay: calc(var(--i) * 0.3s);
}
.vertical .flip-inner.ready {
    animation: none;
}
.vertical .flip-inner span {
    text-align: left;
}
.vertical .front {
    transform: rotateX(0deg);
}
.vertical .back {
    transform: rotateX(180deg);
}
.vertical .flip-wrap:hover .flip-inner {
    transition: transform .5s ease;
    transform: rotateX(180deg)!important;
}


@keyframes flipX {
    0%   { transform: rotateX(0); }
    30%   { transform: rotateX(0); }
    100% { transform: rotateX(1440deg); }
}

/*header*/
.logo_area{
    background:#fff;
    padding:5px 0;
}
.logo_area .logo{
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.logo img{
    height:2rem;
    width:auto;
    display:block;
}
.btn_menu{
    cursor: pointer;
    font-size: 1.7rem;
}


/*foot*/
footer{
    padding:.5em 0;
    background-color: var(--main_color);
    position:relative;
    z-index: 0;
}
footer::after{
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    background-blend-mode: overlay;
    background-color: inherit;
    background-image: url(../images/bg_foot_black.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
}
.foot_logo{
    height:40px;
    text-align: center;
}
.foot_logo a{
    height:100%;
}
.foot_logo img{
    height:100%;
    width:auto;
    display: block;
}
.foot_nav{
    margin:1rem 0;
    display:flex;
    justify-content: center;
}
.foot_nav_box{
    padding:.7rem 1.7rem;
    border-radius: 16px;
    border:4px solid #000;
    background-color: #fff;
    margin:0 .3rem;
}
.foot_copy{
    text-align: center;
    font-size: .8rem;
}

/*mv*/
.mv_area{
    background-color: var(--main_color);
    position: relative;
    z-index: 0;
}
.mv_flex{
    display:flex;
    padding:2rem 0;
    justify-content: space-between;
}

.mv_flex .mv_img{
    flex-grow: 1;
    border-radius: 16px;
    border:6px solid #000;
    background:#fff;
    overflow: hidden;
    position: relative;
    aspect-ratio: 5 / 3;
}
.mv_flex .mv_img img{
    display:block;
    width:100%;
    height:100%;
    object-fit: cover;
}
.mv_flex .mv_img .text_block_1{
    position: absolute;
    top:0;
    right:.5rem;
    display:flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
    white-space: nowrap;
}
.mv_flex .mv_img .text_block_1 b{
    font-size: min(150px,12.5vw);
    color:#fff;
    text-shadow: 1px 1px 3px #0009;
    font-weight: 900;
}
.mv_flex .mv_img .text_block_1 small{
    font-size: min(40px,3.7vw);
    color:#fff;
    text-shadow: 1px 1px 3px #0009;
    margin-top: 1rem;
    margin-right: .3em;
}
.mv_flex .mv_img .text_block_2{
    position: absolute;
    bottom:2rem;
    left:1rem;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    white-space: nowrap;
}
.mv_flex .mv_img .text_block_2 strong{
    writing-mode: vertical-rl;
    font-feature-settings: initial;
    font-size: min(120px,9vw);
    color:#fff;
    text-shadow: 1px 1px 3px #0009;
    font-weight: 900;
}
.mv_flex .mv_img .text_block_2 b{
    font-size: min(120px,8.9vw);
    color:#fff;
    text-shadow: 1px 1px 3px #0009;
    font-weight: 900;
}
.mv_flex .mv_img .title_block{
    position: absolute;
    top:0;
    left:0;
    margin:1rem;
    border-radius: 16px;
    border:4px solid #000;
    background:#fff;
    overflow: hidden;
    padding:.5rem;
    font-size: min(54px,5vw);
    font-weight: 900;
    min-width: 60%;
    text-align: center;
    box-shadow: 1px 1px 3px #0009;
}
/*company,recruit用*/
.mv_flex .text_block{
    position: absolute;
    bottom:0;
    left:0;
    padding:1rem;
    font-size: min(110px,7.8vw);
    color:#fff;
    text-shadow: 1px 1px 3px #000;
    font-weight: 900;
    line-height: 1.1;
    width:100%;
}
.mv_flex .text_block::first-letter{
    font-size: 1.7em;
}
.mv_flex .text_block .n2{
    font-size: .75em;
}
.mv_flex .text_block .n3 {
    font-size: .9em;
}

.mv_flex .nav{
    flex: 0 0 200px;
    margin-left: 1rem;
}
.mv_flex .nav ul{
    padding:1rem ;
    border-radius: 26px;
    border:6px solid #000;
    background:#fff;
}
.mv_flex .nav ul li{
    position: relative;
    line-height: 1.8;
}
.mv_flex .nav ul li a.active::after{
    content:"\f0da";
    display:block;
    position: absolute;
    top:0;
    left:0;
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 1.2em;
    line-height: 1.5;
}

.mv_flex .nav ul li a{
    font-weight: 900;
    font-size: 25px;
    display:block;
    white-space: nowrap;
    padding-right: .5rem;
    position: relative;
    padding-left: 1.3rem;
}
.ex_nav{
    padding: .5rem 1rem!important;
    margin-top: .5rem;
}

/*section*/
section{
    position: relative;
}
section.margin{
    margin:4rem 0;
    padding-top:2rem;
}
.sec_title{
    align-self: flex-start;
}
.sec_bg{
    font-size: 3vw;
    font-weight: 900;
    color:#0041;
    position: absolute;
    top:0;
    left:0;
    line-height: 1.2;
    overflow-wrap: anywhere;
    max-height: 5em;
    overflow: hidden;
    user-select: none;
    outline: none;
    text-indent: -5em;
    transition: all 0.9s linear;
    animation: sec_bg_tx 10s linear infinite forwards;
}
@keyframes sec_bg_tx {
    0%{
        text-indent: -100%;
    }
    100%{
        text-indent: 0;
    }
}

.sec_flex{
    position: relative;
    z-index: 1;
    display:flex;
    flex-direction: column;
    
}

.sec_title h2{
    font-weight: 900;
    font-size: min(3rem,10vw);
    display: inline-block;
    padding:.7rem;
    padding-right:1rem;
    border-radius: 16px;
    border:4px solid #000;
    z-index: +1;
    background:#fff;
    margin:0;
}
.sec_title h2 i{
    width:.7em;
}
.sec_content{
    position: relative;
    min-width: 80%;
    max-width: 95%;
    align-self: flex-end;
    margin-top:-3rem;
    z-index: -1;
    padding:.7rem;
    border-radius: 16px;
    border:4px solid #000;
    background-color: #fff;
    box-shadow: 1px 1px 5px #0009;
    overflow: hidden;
    
}