@charset "utf-8";
/* 1536 , 1530 × 735 ,1366 *//* ←記画面幅でも崩れていないか確認 */

/* カテゴリリンクの飛び先位置の数値を適宜調整してください */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */


/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#loader {
    background-color: var(--color1);
}

#loading_line {
    background-color: #2B2B2B;
}

#loading_bg {
    background-color: var(--color1);
}

#header {
    background-color: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
}

#canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1; /* 背景として配置 */
            pointer-events: none; /* マウスイベントをブロックしない */
        }


footer .sns_link ul li {
    padding: 5px;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    footer .sns_link ul li {
        padding: auto;
    }

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main .sns_link,#main .main_box{z-index: 2;}
#video{ height: 100vh; }
#video video{
    width: 100%!important;
    height: auto;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
@media  screen and (max-width: 1600px){
    #video video{
        width: auto!important;
        height: 100%;
    }
}

#fix_bnr{
	bottom: 20px;
    right: 20px;
    z-index: 5;
    width: 370px;
}
@media screen and (max-width: 667px){
	#fix_bnr{
	    bottom: 10px;
	    width: 300px;
        right: 0;
        left: 0;
        margin: auto;
	}
}

/* タブレット用 */
@media  screen and (max-width: 768px){
#main,#video{ height: 70vh!important; }
    /* #video video{
        width: 100%!important;
        height: auto;
    } */
}
/* スマホ用 */
@media  screen and (max-width: 667px){
    #main,#video{ height: 90vh!important; }
}

.anim_box .item{
	transform: translateY(20px);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
}
.anim_box .item.start{transform: translateY(0);opacity: 1;}

.anim_box {
    width: 50vw;
    max-width: 800px;
    min-width: 500px;
    top: 50%;
    transform: translateY(-50%);
    left: 5%;
    z-index: 2;
}
.main_copy {
    width: 53%;
    max-width: 630px;
    min-width: 280px;
}

.sub_copy {
    width: 62%;
    max-width: 560px;
    min-width: 320px;
    margin-left: -3px;
}



/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    
    .anim_box {
        width: 76vw;
        max-width: 600px;
        min-width: 540px;
        top: 28%;
        transform: translateY(-50%);
        left: 5%;
    }
    
    .cms_img1 img {
        object-position: -874px;
    }
    
    

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    .anim_box {
        width: 79vw;
        max-width: 370px;
        min-width: 290px;
        top: 27%;
    }
    
    .main_copy {
        width: 67%;
        max-width: 290px;
        min-width: 170px;
    }
    
    .sub_copy {
        width: 79%;
        max-width: 370px;
        min-width: 160px;
    }
    
    .cms_img1 img {
        object-position: -714px;
    }

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* RGBズレフィルターの適用 */
.rgb-shift {
  filter: url('#rgb-shift');
  transform: translateZ(0); /* ブラウザのハードウェアアクセラレーションを有効化して処理落ちを防ぐ */
  will-change: filter;      /* アニメーションのパフォーマンス向上 */
}

.anim_box.rgb-shift {
    transform: translate(0, -50%);
}

#catch {
    background-image: url(/Files/img/item2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13%;
}

.catch_txt {
    text-shadow: 0px 0px 16px #0000006e;
}

.catch_txt .title .pc_txt{
    font-size: min(3vw, 32px);
    text-align: center;
}

#contents .box_item .title .pc_txt {
    font-size: min(2vw, 34px);
}

.no .editTxt1.font_80up {
        margin-top: -5%;
}

.blog_wrap {
    padding: 0 5%;
}

#contents .con_box .box_item.p1 {
         background-position: center -150px;
    }

.content_wrap {
    background-color: rgb(255 255 255 / 90%);
}




/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    #catch {
        background-size: 28%;
    }

    .catch_txt .title .pc_txt {
        font-size: min(4vw, 28px);
    }
    
    #contents .con_box .box_item.p1 {
        background-position: center -20px;
    }
    
    #contents .box_item .title .pc_txt {
        font-size: min(4vw, 28px);
    }

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #catch {
        background-position: center 157%;
        background-size: 51%;
    }

    catch_txt .title .sp_txt{
    font-size: min(6vw, 22px);
    }
    
    #catch .title .sp_txt, #contents .title .sp_txt {
        text-align: center;
    }
    


}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*カテゴリリンクの飛び先位置を調整する*/
/* --- PC --- */
:root {
--header-height: 130px;
}
/* --- スマートフォン --- */
@media screen and (max-width: 667px){
:root {
--header-height: 50px;
}
}


.g_type2 .cate_box{width: 23%!important;margin: 0 1%;}
.g_type2 > div{justify-content: flex-start;align-items: flex-start;}
.g_type2 .modal_bt{cursor: pointer}
.g_type2 .modal_bg{top: 0;left: 0;background-color: rgba(0,0,0,0.5);z-index: 9998;}
.g_type2 .modal_box{max-height: 80%;overflow-y: auto;z-index: 9999;}
.g_type2 .close_bt{cursor: pointer}
.modal_box{max-width: 827px!important;}
.g_type2 .main_image_box{height: 50vh;}
.g_type2 .main_image_box img{width: auto;height: 100%;}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
.g_type2 .cate_box{width: 50%!important;}
.g_type2 .cate_box {margin: 0 auto 20px;}
.g_type2 .main_image_box { height: 37vh;}
}


#page_title {
    background-position: center -430px;
    margin-bottom: 70px
}

#page_title .wrap {
    color: white;
}

#page_title:before {
    display: none;
}

#page_title:after {
    background-color: rgb(0 0 0 / 60%);
}

.youtube_box{
      position: relative;
      width: 80%;
      aspect-ratio: 16 / 9;
      margin-bottom: 50px;
}
.youtube_box iframe{
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

.page3 .rectangle_img img {
    aspect-ratio: auto;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    #page_title {
        background-position: -969px -563px;
    }
    
    .page4 .width_max_tb {
        min-width: auto;
    }

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #page_title {
        background-position: center;
    }
    
    .cate_list li a {
        text-align: center;
    }

}