@charset "utf-8";

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

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




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


/* color */
.txt_color_nomal, .hvr_txt_color_nomal:hover{color: var(--black);}
:root{
    --color1: #e82727; 
    --color2: #fffaee; 
    --color3: #ff9b2e; 
    --color4: #fff4e1; 
    --black: #151a1e; 
}

.txt_red, .hvr_txt_red:hover{color: #C12326;}
.txt_gray, .hvr_txt_gray:hover{color: #ccc}
.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)} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: var(--color4)} /* アクセントカラー2 */

/* background-color */
.bg_black, .hvr_bg_black:hover{background-color: var(--black)} /* 黒背景 */
.bg_gray, .hvr_bg_gray:hover{background-color: #ccc}
.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)} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4)} /* アクセントカラー2 */
.bg_color_clear, .hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.border_black, .hvr_border_black:hover{border-color: var(--black)}
.border_gray, .hvr_border_gray:hover{border-color: #ccc}
.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)}


.linkStyle{
	color:var(--color1);
}
.linkStyle:hover{
	color:var(--color1);
	opacity: 0.7;
	transition: all 0.5s;
}

.point_no{
    pointer-events: none;
}

body,.font_2dw {
    font-size: 16px;
}



/* fix_bnr ---------------------------------------------------------------------------------------------*/

#fix_bnr {
    bottom: 10px;
    right: 120px;
    z-index: 10;
    width: 37%;
    max-width: 300px;
    margin: auto;
    transition: opacity 0.8s, transform 0.8s;
    opacity: 0;
    transform: translateY(20px); 
    pointer-events: none; 
}

.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important; 
}
#fix_bnr:hover{
    transform: translateY(0) scale(1.1) !important;
}

/*load*/
#loading_logo {
    max-width: 300px;
}

/*header*/
#header #logo .width_70per{
    width: 90% !important;
}
.sns_links .width_20{
    width: 30px;
}
/*footer*/

#footer::before {
    background: var(--color1);
}
.footer_box #logo2{
    max-width: 300px !important;
}
.footer_box .font_2dw{
    font-size: 14px;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#fix_menu .flex_space-between_tb{
    justify-content: flex-start;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    /*header*/
        .tb_sns_wrap .sns_links_tb li {
        width: 25px;
    }
    
    /*load*/
    #loading_logo {
        width: 50%;
    }
    
/* fix_bnr ---------------------------------------------------------------------------------------------*/
#fix_bnr {
    right: 0;
    left: 0;
    width: 65%;
}

/*footer*/
    .footer_box #logo2 {
            width: 100% !important;
        max-width: 250px !important;
    }
    
}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img .img6{
    bottom: 10%;
    right: -30px;
    width: 70%;
    max-width: 850px;
}

/* --- ベース設定と星空アニメーション --- */
#main_img {
    position: relative;
    height: 100vh;
    background-color: #1a1a2e; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 星空のレイヤー (疑似要素) */
#main_img::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* 指定の星空デザイン */
    background-image: 
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 4px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 3px),
        radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 4px);
    background-size: 550px 550px, 350px 350px, 250px 250px;
    background-position: 0 0, 40px 60px, 130px 270px;
    
    /* ゆっくり明滅 */
    opacity: 0.6;
    animation: twinkle 5s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes twinkle {
    0% { opacity: 0.4; }
    100% { opacity: 0.9; }
}


/* --- メインテキスト画像エリア --- */
#main_txt {
    top: 11%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 750px;
}
#main_txt img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}


/* --- コンテナ共通 --- */
#bike-container,
#car-container {
    position: absolute;
    bottom: 10%; /* 道路の線の高さ */
}


/* --- 画像設定 (ここを修正！) --- */
/* 共通設定 */
#bike-container img,
#car-container img {
    display: block;
    width: auto;
    transition: opacity 0.3s ease;
}

/* 個別設定: バイク */
#bike-container img {
    height: 200px; 
}

/* 個別設定: 車 (230pxに変更) */
#car-container img {
    height: 230px; 
}


/* バイク停止時画像のサイズ調整 */
#bike-container img.img-step2 {
    height: 130px;
}

.img-step2 { position: absolute; top: auto; bottom: 0; left: 0; opacity: 0; }
.img-step1 { opacity: 1; }
.swapped .img-step1 { opacity: 0; }
.swapped .img-step2 { opacity: 1; }


/* --- 1. 車の動き --- */
#car-container {
    z-index: 10;
    left: 55%;
    transform: translateX(-50%);
    transition: opacity 0.8s ease; 
}
#car-container.reset-position {
    transition: none !important;
    left: 55% !important;
    opacity: 0 !important;
}
#car-container.drive-out {
    left: 150%;
    transition: left 1.5s ease-in; 
}


/* --- 2. バイクの動き --- */
#bike-container {
    z-index: 20;
    left: -50%;
    transform: translateX(-50%);
    transition: left 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
#bike-container.drive-in {
    left: 43%;
}
#bike-container.folding {
    left: 55%; 
    transform: translateX(-50%) scale(0) rotate(360deg);
    opacity: 0;
    transition: all 0.6s ease-in;
}
#bike-container.reset-position {
    transition: none !important;
    left: -50% !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
}


/* --- 3. 効果線の動き --- */
#effect-container {
    position: absolute;
    z-index: 30;
    left: 49%;
    
    /* 縦位置の修正: 地面(10%) + 大きい方の画像(230px) + 余白(10px) */
    bottom: calc(10% + 240px); 
    
    transform: translateX(-50%) scale(0.5); 
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#effect-container img {
    height: 70px;
    width: auto;
}

#effect-container.show-effect {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    animation: bounceIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes bounceIn {
    0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
    60% { transform: translateX(-50%) scale(1.1); opacity: 1; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}


/* --- 装飾 (道路ライン) --- */
.road-line {
    bottom: 10%;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    z-index: 5;
}



/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    #main_img .img6{
        width: 100%;
        right: -40%;
    }
    #main_img{
        max-height: 700px;
    }
  #bike-container img { height: 160px; }
    #car-container img { height: 180px; }
    #bike-container img.img-step2 { height: 100px; }
    
    
    /* 車 */
    #car-container { left: 58%; }
    #car-container.reset-position { left: 58% !important; }

    /* バイク */
    #bike-container.drive-in { left: 38%; }
    
    /* 収納時は車の位置へ */
    #bike-container.folding { left: 56%; } 
    
    
    /* 効果線の位置調整 */
    #effect-container {
        /* 横位置: バイク(40%)と車(58%)の中間 */
        left: 49%;
        
        /* 縦位置: 車高(180px) + 余白(10px) */
        bottom: calc(10% + 190px); 
    }
    #effect-container img { height: 60px; }
    #main_txt { top: 23%; width: 85%; }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #main_img .img6{
        width: 150%;
        right: -60%;
    }
    #bike-container img { height: 110px; }
    #car-container img { height: 130px; }
    #bike-container img.img-step2 { height: 75px; }
    
    
    /* 車: 右寄り */
    #car-container { left: 64%; }
    #car-container.reset-position { left: 64% !important; }
    
    /* バイク: 左寄り */
    #bike-container.drive-in { left: 35%; }
    
    /* 収納時は車の位置へ */
    #bike-container.folding { left: 62%; }
    
    
    /* 効果線の位置調整 */
    #effect-container {
        /* 横位置: バイクと車の真ん中 */
        left: 48%;
        
        /* 縦位置: 車高(130px) + 余白(5px) */
        bottom: calc(10% + 135px);
    }
    #effect-container img { height: 50px; }
    
    /* テキスト調整 */
    #main_txt { top: 20%; width: 90%; }
    #main_txt img { margin-bottom: 15px; }
    
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#top_contents1 .title h2{
    font-size: 50px;
}
#top_contents2 .title h2{
    font-size: 40px;
    color: var(--color1);
}

#top_cms{
        padding: 0 10%;
}

.top_cms_box{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#top_contents2 .con_box .con_img {
    height: 730px;
}


/*アニメーション*/
.anim-con {
  position: relative;
  width: 100%;
  height: 110px; /* 画像の高さに合わせて調整してください */
  overflow: hidden; 
}

/* 共通設定 */
.moving-item {
  position: absolute;
  bottom: 0px; 
  width: auto;  /* 元画像の横幅比率を維持 */
  height: 100px; /* 画像の高さを指定（ここを調整してサイズを変えてください） */
}

/* --- バイクの設定 --- */
.bike {
  left: -200px; /* スタート位置 */
  /* アニメーション：名前 時間 カーブ 遅延 繰り返し */
  animation: bikeMove 10s linear infinite;
}

/* --- 車の設定 --- */
.car {
  right: -200px; /* スタート位置 */
  transform: scaleX(-1); 
  /* 車はバイクが走り去った後に動かしたいので、遅延(delay)をかけます */
  /* 5秒後にスタートするように設定 */
  animation: carMove 10s ease-in 5s infinite;
}

/* --- アニメーションの動き定義 --- */

@keyframes bikeMove {
  0% {
    left: -300px; /* スタート位置 */
    opacity: 1;
  }
  40% {
    left: 100%; /* ゴール（右端）に到達 */
    opacity: 1;
  }
  41% {
    left: 100%; 
    opacity: 0; 
  }
  /* 透明になってから、スタート位置へ戻す */
  42% {
    left: -300px;
    opacity: 0;
  }
  100% {
    left: -300px;
    opacity: 0;
  }
}

/* 車：右から左へ */
@keyframes carMove {
  0% {
    right: -300px; /* スタート位置 */
    opacity: 1;
  }
  40% {
    right: 100%; /* ゴール（左端）に到達 */
    opacity: 1;
  }
  41% {
    right: 100%;
    opacity: 0;
  }
  /* 透明になってから、スタート位置へ戻す */
  42% {
    right: -300px;
    opacity: 0;
  }
  100% {
    right: -300px;
    opacity: 0;
  }
}

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

}
    #top_contents2 .con_box .con_img {
        height: 480px;
    }
}

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

#top_contents1 .title h2 {
    font-size: 28px;
}

#top_contents2 .title h2 {
    font-size: 26px;
}
#top_contents2 .con_box .con_img {
        height: 250px;
    }
/*アニメーション*/
/* --- バイクの設定 --- */
.bike {
  animation: bikeMove 5s linear infinite;
}

/* --- 車の設定 --- */
.car {
  animation: carMove 5s ease-in 2.5s infinite;
}
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.cate_list li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px;
}

/*ブログ*/
.blogListPattern_item .border_color2{
    border-color: var(--color3);
}

/*お問い合わせ*/
/*お問い合わせ*/

.button a {
    background: var(--color1);
    border-radius: 9999px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    padding: 10px 25px 10px 10px;;
    color: #fff;
    line-height: 1.8;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    border: solid 2px var(--color1);
}
.button a:hover {
    background: var(--color2);
    color: var(--color1);
}
.button a:after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 25px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button a:hover:after {
    border-color:var(--color1);
}

#top_contact_box .con_bt:last-child a {
    padding-left: 0;
    
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #cms_2-e .box_title1::after {
        height: 20px;
    }
    
}