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

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

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



:root{
    --color1: #96121c;
    /* --color2: #a9a9a9; */
    --color3: #96121c;
    --color4: #fffdd2;
	/*--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);}




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

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #footer p {
        font-size: 14px!important;
        line-height: 1.5!important;
    }
}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* video ---------------------------------------------------------------------------------------------*/
#video{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
#video{height: 100%;}
#video video{
    display: block;
    vertical-align: bottom;
}
#main_img{max-height: inherit}



@media screen and (max-width: 768px){

#video{
    height: auto;
}

}


.bg_filter {
    top: 0;
    bottom: 0;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.6);
}

.fv_txt01 {
    width: 30%;
    top: 52%;
    left: 48%;
    transform: translate(-50%, -50%);
}

.fv_txt02 {
    width: 22%;
    bottom: -0.5%;
    right: 0%;
}

/* ---------------------------
   アニメーション
--------------------------- */

/* ふわっ：右上に柔らかく浮かぶ */
.sound-fuwa {
  top: 20%;
  right: 18%;
  width: 10%; /* 表示サイズに合わせ調整 */
}

/* カリっ：左下で弾ける */
.sound-kari {
  bottom: 23%;
  left: 12%;
  width: 10%;
}

/* --- ふわっ・カリっ 基本 --- */
.sound-anim {
  position: absolute;
  display: inline-block;
  pointer-events: none;
}

.sound-anim .sound-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity, filter;
}

/* ---------------------------
   ふわっ：やわらかく浮かんで消える
--------------------------- */
@keyframes fuwaFloat {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.8);
    filter: blur(4px);
  }
  20% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
    filter: blur(1px);
  }
  80% {
    opacity: 1;
    transform: translateY(-5px) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translateY(-15px) scale(1.1);
    filter: blur(5px);
  }
}

/* ---------------------------
   カリっ：弾けるような動き
--------------------------- */
@keyframes kariPop {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
    filter: brightness(1);
  }
  10% {
    opacity: 1;
    transform: scale(1.2) rotate(-10deg);
    filter: brightness(1.3) saturate(1.3);
  }
  40% {
    transform: scale(0.9) rotate(5deg);
  }
  80% {
    transform: scale(1) rotate(0);
  }
  100% {
    opacity: 0;
    transform: scale(1.1) rotate(0);
  }
}

/* ---------------------------
   無限ループ設定（ずらして表示）
--------------------------- */


/* --- ふわっ 3枚配置・アニメーション --- */
.sound-fuwa .small {
    top: 60px;
    left: 0px;
  width: 80px;
  animation: fuwaFloat 3s ease-in-out infinite;
  animation-delay: 0s;
}
.sound-fuwa .mid {
    top: 30px;
    left: 110px;
  width: 110px;
  animation: fuwaFloat 3s ease-in-out infinite;
  animation-delay: 1s;
}
.sound-fuwa .large {
  top: -40px;
  left: 30px;
  width: 140px;
  animation: fuwaFloat 3s ease-in-out infinite;
  animation-delay: 2s;
}

/* --- カリっ 3枚配置・アニメーション --- */
.sound-kari .small {
  top: 40px;
  left: 5px;
  width: 60px;
  animation: kariPop 3s ease-in-out infinite;
  animation-delay: 0s;
}
.sound-kari .mid {
    top: 30px;
    left: 110px;
  width: 85px;
  animation: kariPop 3s ease-in-out infinite;
  animation-delay: 1.4s;
}
.sound-kari .large {
  top: -30px;
  left: 15px;
  width: 110px;
  animation: kariPop 3s ease-in-out infinite;
  animation-delay: 2.1s;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    header.top_header,#main_img {height: 500px!important;}
    #header h1.active img{max-width: 110px;}
    #main_img #slide_wrap .down{display: none}
    
.sound-fuwa {
        top: 20%;
        right: 22%;
        width: 14%;
    }
    
    .fv_txt02 {
        width: 80%;
        bottom: 0%;
        right: 0%;
    }
    
    .fv_txt01 {
        top: 50%;
        width: 80%;
    }
    
        #header h1 span {
        display: inline-block;
        border: 1px solid #fff;
        padding: 10px;
    }
}


/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
    header.top_header,#main_img {height: 42vh!important;}
    #header h1.active{top: 0px;left: 0px;}
    #header h1.active img{max-width: 72px;}
    
        
    .sound-fuwa .small {
        top: 30px;
        left: 20px;
        width: 40px;
    }
    
    .sound-fuwa .mid {
        top: 0px;
        left: 90px;
        width: 50px;
    }
    
    .sound-fuwa .large {
        top: -40px;
        left: 30px;
        width: 90px;
    }
    
        .sound-kari {
        bottom: 23%;
        left: -5%;
        width: 10%;
    }
    
    .sound-kari .small {
        top: 40px;
        left: 5px;
        width: 30px;
    }
    
    .sound-kari .mid {
        top: 20px;
        left: 70px;
        width: 55px;
    }
    
    .sound-kari .large {
        top: -30px;
        left: 15px;
        width: 80px;
    }
    


    
    .cate_list li {
    margin: 0;
    width: 80%;
}
.cate_list a {
    padding: 10px 20px;
    width: 80%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* #intro {
    margin-top: -1%;
} */

.custom_img01 {
    width: 16%;
    bottom: 3%;
    left: 12%;
    z-index: 2;
}
.custom_img02 {
    width: 12%;
    bottom: 2%;
    left: 9%;
    z-index: 2;
}

.custom_txt01 {
    height: 300px;
}

.custom_img03 {
    box-shadow: #fffcc7 10px 10px;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .custom_img01 {
        width: 23%;
        bottom: -4%;
        left: 7%;
    }
    
    .custom_img02 {
        width: 25%;
    }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    .custom_img01 {
        width: 31%;
    }
    
    .custom_img02 {
        bottom: 8%;
        left: 9%;
        z-index: 2;
    }
    
    .custom_txt01 {
        height: auto;
    }
    
}



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


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

}

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

}