/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */

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

/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

:root{
    --color1: #0059d6;
    --color2: #ff931e;
    --color3: #0054a7;
	/*--color4: #f5f2e9;*/
	/*--font-jp: 'Noto Sans JP', "游ゴシック Medium", sans-serif;*/
}

.txt_color1, .hvr_txt_color1:hover{color: var(--color1);}
.txt_color2, .hvr_txt_color2:hover{color: var(--color2);}
.txt_color3, .hvr_txt_color3:hover{color: var(--color3);}
/*.txt_color4, .hvr_txt_color4:hover{color: var(--color4);}*/

/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1);}
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2);}
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3);}
/*.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4);}*/

/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: var(--color1);}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2);}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3);}
/*.border_color4, .hvr_border_color4:hover{border-color: var(--color4);}*/


#header::before {
    display: none;
}


/* --- ロゴの基本設定 --- */
.top_header h1 img {
    height: auto;
    transition: opacity 0.3s ease, visibility 0.3s; /* ふわっと出すための設定 */
}

/* --- PC版の設定（画面幅 1025px以上） --- */
@media screen and (min-width: 1025px) {
    .top_header h1 img {
        opacity: 0;
        visibility: hidden;
    }

    /* スクロールされたら表示する */
    .top_header .is-scrolled h1 img {
        opacity: 1;
        visibility: visible;
    }
}

/* --- スマホ・タブレット版（常時表示） --- */
@media screen and (max-width: 768px) {
    .top_header h1 img {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #header h1 img {
        height: auto;
        width: 120px !important;
    }
}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.main_copy01 {
width: 39%;
    top: 5%;
    left: 5%;
    z-index: 2;
}

.main_copy02 {
    width: 35%;
    bottom: 5%;
    right: 5%;
    z-index: 2;
}

.fv_main {
        width: 70%;
    left: 53%;
    top: 52%;
    transform: translate(-50%, -50%);
}

.sub_copy01 {
    width: 20%;
    left: 7%;
    top: 38%;
}

.sub_copy02 {
    width: 20%;
    left: 0%;
    bottom: 1%;
}
/* 
アニメーションの設定
 */
/* ==========================================================================
   FVアニメーション（がっしゃんこ仕様）
   ========================================================================== */

/* --- 1. 初期状態：すべて非表示 & 開始位置へ --- */

/* 全要素共通：最初は透明 */
.main_copy01, .main_copy02, .fv_main, .sub_copy01, .sub_copy02 {
    opacity: 0 !important;
    will-change: transform, opacity;
}


/* 基礎：画面外左へ */
.main_copy01 { 
    transform: translateX(-400px) skewX(20deg) !important; 
}

/* 誠実：画面外右へ */
.main_copy02 { 
    transform: translateX(400px) skewX(-20deg) !important; 
}

/* サブコピー：少し下へ */
.sub_copy01, .sub_copy02 {
    transform: translateY(20px) !important;
}


/* --- 2. アニメーション実行 (is-active付与後) --- */

/* 画面揺れ：右側の文字がぶつかる1.3秒後に発動 */
.is-active {
    animation: shake_screen 0.4s ease-in-out 1.3s forwards;
}

/* 重機：ドスンと着地して、そのまま浮遊へ */
.is-active .fv_main {
    opacity: 1 !important;
    animation: 
        heavy_land 0.8s cubic-bezier(0.17, 0.89, 0.32, 1.28) forwards,
        floating 4s ease-in-out infinite 0.8s !important;
}

/* メインコピー共通：ガチッとハマる動き */
.is-active .main_copy01,
.is-active .main_copy02 {
    opacity: 1 !important;
    transform: translateX(0) skewX(0) !important;
    transition: 
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.6), 
        opacity 0.2s ease-out !important;
}

/* 【左】基礎：0.9秒後に激突 */
.is-active .main_copy01 { 
    transition-delay: 1.5s !important; 
}

/* 【右】誠実：1.2秒後に激突（この直後に画面が揺れる） */
.is-active .main_copy02 { 
    transition-delay: 2.0s !important; 
}

/* サブコピー：最後にふわっと表示 */
.is-active .sub_copy01,
.is-active .sub_copy02 {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.4s ease-out 2.5s !important;
}


/* --- 3. キーフレーム定義 --- */

/* 重機が上から叩きつけられる動き */
@keyframes heavy_land {
    0% { opacity: 0; transform: translate(-50%, -100%) scale(1.2); }
    100% { opacity: 1; transform: translate(-50%, -52%) scale(1); } /* 52%は元の位置 */
}

/* 浮遊（アイドリング） */
@keyframes floating {
    0%, 100% { transform: translate(-50%, -52%) translateY(0); }
    50% { transform: translate(-50%, -52%) translateY(-15px); }
}

/* 激突時の画面揺れ
@keyframes shake_screen {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-8px, 5px); }
    30% { transform: translate(8px, -5px); }
    50% { transform: translate(-5px, 3px); }
    70% { transform: translate(5px, -2px); }
    100% { transform: translate(0, 0); }
}_copy01, .sub_copy02 {
    opacity: 0 !important; JSが動く前は強制的に非表示
    will-change: transform, opacity;
} */

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .fv_main {
        width: 107%;
        left: 54%;
        top: 57%;
    }
    
        .main_copy01 {
        width: 68%;
        top: 11%;
        left: 5%;
    }
    
    
    .main_copy02 {
        width: 55%;
        bottom: 12%;
        right: 5%;
    }
    
        .sub_copy01 {
            width: 34%;
            left: 7%;
            top: 31%;
        }
        
    .sub_copy02 {
        width: 37%;
        left: 0%;
        bottom: 2%;
    }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
        .main_copy01 {
            top: 5%;
            width: 75%;
    }
    
        .main_copy02 {
        width: 60%;
        bottom: 12%;
        right: 5%;
    }
    
        .sub_copy01 {
            top: 27%;
            width: 44%;
        }
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.video_wrap {
    position: relative;
    overflow: hidden;
    width: 80%;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
}

video {
    min-height: 0;
}

.video_titl01 {
    z-index: 2;
    width: 10%;
    top: 9%;
    right: 18%;
}

.video_titl02 {
    z-index: 2;
    width: 19%;
    bottom: 4%;
    left: 17%;
}

.video_item01 {
    width: 56%;
    right: 6%;
    bottom: -19%;
}

.video_wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせて切り抜き、余白を出さない */
}

.main_item02 {
        width: 43%;
    left: -3%;
    bottom: 11%;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .video_section {
            padding: 5% 16%!important;
    }
    
    .video_titl01 {
        width: 11%;
        top: 6%;
        right: 7%;
    }
    
    .video_titl02 {
        width: 19%;
        bottom: -1%;
        left: 7%;
    }
    
    .main_item02 {
        width: 66%;
        left: -3%;
        bottom: 12%;
    }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
        .main_item02 {
        width: 66%;
        left: -8%;
        bottom: 10%;
    }
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    
    .contact_btn_wrap .icon {
        left: 1em!important;
    }
    
    .custom_txt01 a {
        font-size:14px!important;
    }
}