@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&family=WDXL+Lubrifont+JP+N&display=swap');
:root{
    --font1:"M PLUS 1p", sans-serif;
    --cate_title: 1.8rem;
}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}


/*■■ 固定バナー ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#foot_banner .foot_icon{
        width: 45px;
    left: 30px;
    top: 72%;
    transform: translateY(-50%);
}
#foot_banner a{
    font-family: var(--font1);
    font-weight: 900;
    font-size: 24px;
}
#foot_banner a{
    padding: 21px 40px 21px 82px;
}

/*■■ main_img ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#main_img{}
#main_img .main_img_wrap{
    /* max-width: 1280px; */
/*     width: 80%!important; */
    margin: 100px auto 0px;
    z-index: 3;
}

#main_img .main_logo{
    top: 0;
    transform: translate(-50%, 0%);
}

#main_img .catch{
    margin: 100px auto 0;
    width: 50%;
}
#main_img .catch .txt1,#main_img .catch .txt3{font-size: 3rem;}
#main_img .catch .txt2{}
#main_img .catch .txt3{}

.img_fit {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像の比率を保ちながらフィット */
  display: block;
}

/* タブレット */
@media screen and (max-width: 768px){
    #main_img .catch{width: 60%;}
    #main_img .main_img_wrap{    margin: 40px auto 0px;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #main_img .main_img_wrap{
        /* height:calc(90vh - 70px); */
        height: 86vw;
        margin: 40px auto 0px;
    }
    #main_img .catch{
        width: 85%;
        margin: 50px auto 0;
    }
    #main_img #left, #main_img #right{height: 100vw;}
    #main_img #right{
        position: absolute;
        width: 70% !important;
        margin: 0 0 0 30%;
        height: 74vw;
        bottom: 0;
    }
}


/*■■ top, all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.con_title,#intro h2,.cms_title h2 {
    font-family: var(--font1);
    font-weight: 900;
    color: var(--color1);
    font-size: 2rem;
}

#intro{padding-bottom: 0;}
#intro .intro_img span.bgitem{
    width: 100%;
    height: 60%;
    transform: rotate(10deg);
}
#wrap.bg_color1,#wrap.bg_color5{background-color: var(--color2);}
#wrap.bg_color5.top{background-color: var(--color1);}

#info_title_box{
    padding-top: 90px;
    padding-bottom: 10px;
}

.cms_title h2{color: var(--color3);}
#top_cms .top_cms_box{
    width: 70%;
}

#page10 ul li{
    transition: all 0.3s;
    letter-spacing: 0;
}
#page10 ul li:hover{
    transform: translateY(-3px);
}
#page10 ul li:hover a{
    color: var(--color1);
}

/* タブレット */
@media screen and (max-width: 768px){
    #header_menu ul{justify-content: space-evenly!important}
    header #header #header_menu li{
        width: 33%;
        box-sizing: border-box;
        padding: 0;
        margin-bottom: 14px;
        line-height: 1;
    }
    .intro_txt_wrap{margin-bottom: 20px;}
    #intro .intro_wrap{padding: 50px 50px 110px;}
    #top_cms .top_cms_box{width: 80%;}
    

    #info #map{width: 40%;}
    #info .info_txt{
        width: 50%;
        padding-right: 5%;
        box-sizing: border-box;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .drawer-nav{width: 85vw;}
    .drawer-menu li{
        font-size: 18px;
        letter-spacing: 0em;
    }
    .con_title,#intro h2 {
        font-size: 1.5rem;
        text-align: center;
    }
    #intro h2 span.border,#contents .con_box h3 span.border{
        left: 50%;
        transform: translateX(-50%);
    }
    .con_no{text-align: center;}
    
    #info #map,#info .info_txt{width: 90%;}

    #info_title_box{padding: 50px 0 10px;}
    #info{padding-top: 0;}
}

/*■■ 下層ページ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#page_title{}
#page_title #filter_white{background-color: var(--color1)!important;}
#page_title h2{
    font-family: var(--font1);
    font-weight: 900;
}
.cate_title,.cate_title h3{
    font-family: var(--font1);
    font-weight: 900;
    font-size: var(--cate_title);
    line-height: 1.3;
}


/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    #page10 ul li{width: 100% !important;}
}

/*■■ よくある質問 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#cms_5-f #cate3471 .cate_box .open_bt .box_title1::before, .cms_5-f #cate3471 .cate_box .open_bt .box_title1::before{
    display: none;
}
#cms_5-f #cate3471 .cate_box .open_bt .box_title1, .cms_5-f #cate3471 .cate_box .open_bt .box_title1{margin-left: 50px;}


/*■■ 雲コンテンツ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.con_box {
    position: relative;
}

.kumo {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    position: absolute;
    top: 50%;
    left: 50%;
    transition: opacity 1.5s ease, transform 2s ease;
    z-index: 10;
    pointer-events: none;
}

.kumo.animate {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
}

.kumo.fadeout {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
}

.kumo.hidden {
    display: none !important;
}

/* スマホ */
@media screen and (max-width: 667px){
    .kumo {
        transform: translate(-50%, 0%) scale(1.3);
        top: 8%;
    }
    .kumo.animate {
        opacity: 1;
        transform: translate(-50%, 0%) scale(2);
    }
    
    .kumo.fadeout {
        opacity: 0;
        transform: translate(-50%, 0%) scale(2.5);
    }

}

/*■■ 雲TOP ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


.kumo_top {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    position: absolute;
    top: 50%;
    left: 50%;
    transition: opacity 1s ease, transform 1.3s ease;
    z-index: 20;
    pointer-events: none;
}

.kumo_top.animate {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.6);
}

.kumo_top.fadeout {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
}

.kumo_top.hidden {
    display: none !important;
}




/*■■ 無限に左右に動く ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#intro .intro_img{
    animation: pop-rotate .8s steps(2, end) infinite alternate;
    display: inline-block; /* transformを使うので必須 */
}


@keyframes pop-rotate {
  0% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

.con_item1,.con_item2{
    animation: pop-rotate2 .8s steps(2, end) infinite alternate;
    display: inline-block; /* transformを使うので必須 */
}
@keyframes pop-rotate2 {
  0% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(4deg);
  }
}

/*■■ 募集エリアアニメーション ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img{overflow: hidden;}
.img_left, .img_right{
    position: absolute;
    width: 2.4vw;
    height: 200vh;
    background-image: url(../img/center.png);
    background-repeat: repeat-y;
    background-size: 100%;
    z-index: 2;
    animation: bgScroll 10s linear infinite;
}
.img_left{left: 5%;}
.img_right{right: 5%;}

@keyframes bgScroll {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: 200vh;
  }
}

/* タブレット */
@media screen and (max-width: 768px){
    .img_left, .img_right{
        width: 4vw;
        animation: bgScroll 18s linear infinite;
    }
    
}
/* スマホ */
@media screen and (max-width: 667px){
    .img_left, .img_right{
        width: 7vw;
        animation: bgScroll 20s linear infinite;
    }
    .img_left{left: 2%;}
    .img_right{right: 2%;}

}