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

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

#wrap {
    overflow: hidden;
}

body, .txt_color_nomal, .hvr_txt_color_nomal:hover {
    color: #737373;
}

#intro {
    min-height: 460px;
    overflow: hidden;
}

.intro_txt_wrap {
    margin-top: 5%;
}

@media screen and (max-width: 768px){
    .intro_txt_wrap {
    margin-top: 20%;
}
}

@media screen and (max-width: 667px){
    .intro_txt_wrap {
    margin-top: 0%;
}
}





/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#head_logo {
    display: none;
}

#pc_nav {
    display: none;
}

#main_img {
 height: auto!important;   
}

#main_img .scroll_bar span::before {
    background-color: pink;
}


:root{
    --color1: #e2acb1;
    --color2: #f8edec;
    --color3: #b1a59c;
    --color4: #fdf5ef;
	/*--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){

}


/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.fv_maintext {
    width: 30%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* / ====== ロゴ回転 ====== / */
.logo {
    position: absolute;
    bottom: 40px;
    right: 6%;
    width: 11%;
  animation: rotateLogo 20s linear infinite;
}

@keyframes rotateLogo {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* / ====== ドア（clip-pathで再現） ====== / */
.door01 {
    width: 27%;
    background-color: #fff;
    overflow: hidden;
    bottom: 0%;
    left: 5%;
    border-radius: 45% 47% 0 0;
    height: 65%;
    object-fit: cover;
    border: #fff 5px solid
}

.door01 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.door01 img.active {
  opacity: 1;
}

.door01 img.fade-out {
  opacity: 0;
  transform: scale(1.03);
  transition:.3s;
}

.sub_txt01 {
    width: 25%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 3%;
}




/* .mainImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity .6s ease; → 自然にゆっくり
} */

/* .door {
    width: 27%;
    background-color: #fff;
    overflow: hidden;
    bottom: 0%;
    left: 5%;
    border-radius: 45% 47% 0 0;
    height: 65%;
    object-fit: cover;
    border: #fff 5px solid
}

.door img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.door img.active {
  opacity: 1;
}

.door img.fade-out {
  opacity: 0;
  transform: scale(1.03);
} */


.mainImage {
  width: 100%;
  opacity: 1;
  transition: opacity .4s ease;/* ← これが確実に発動する */
}

.mainImage.fade-out {
  opacity: 0;
}



/* くまちゃん */
.kuma {
    width: 10%;
    left: 4.8%;
    bottom: 53%;
    /* 最初はアニメーションOFF */
    animation: none;
}

.kuma.start {
    /* ロード後にこれを付けてアニメーション開始 */
   animation: kumachan 3s forwards;
}

@keyframes kumachan {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* / ====== サムネイル ====== / */
.right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.right01 {
    top: 20%;
    right: 11%;
    width: 10%;
    aspect-ratio: 1;
    z-index: 2;
}

.right02 {
    top: 40%;
    right: 6%;
    width: 9%;
    aspect-ratio: 1;
}

.right03 {
    right: 17%;
    bottom: 12%;
    width: 13%;
    aspect-ratio: 1;
}


.right01 .thumb {
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  animation: float 4s ease-in-out infinite;
  border: #fff 3px solid;
}

.right02 .thumb { 
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  animation: float02 4s ease-in-out infinite;
  border: #fff 3px solid;
}
    
.right03 .thumb { 
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  animation: float03 4s ease-in-out infinite;
  border: #fff 3px solid;
    
}


@keyframes float {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(-5deg) translateY(-10px); }
}

@keyframes float02 {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-10px); }
}

@keyframes float03 {
  0%, 100% { transform: rotate(-15deg) translateY(0); }
  50% { transform: rotate(-15deg) translateY(-10px); }
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    
    /* .door {
    width: 27%;
    background-color: #fff;
    overflow: hidden;
    bottom: 0%;
    left: 5%;
    border-radius: 45% 47% 0 0;
    height: 65%;
    object-fit: cover;
    border: #fff 5px solid
}

.door img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.door img.active {
  opacity: 1;
}

.door img.fade-out {
  opacity: 0;
  transform: scale(1.03);
} */

    
    .door {
        width: 80%;
        left: 50%;
        bottom: 0;
        overflow: hidden;
        background-color: #fff;
        transform: translateX(-50%);
        border-radius: 45% 47% 0 0;
        height: 51%;
            object-fit: cover;
        border: #fff 4px solid;
    }
    
        .door img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
    }
    
    .door img.active {
      opacity: 1;
    }
    
    .door img.fade-out {
      opacity: 0;
      transform: scale(1.03);
    }
    
    .fv_maintext {
        width: 75%;
        top: 31%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .kuma {
        width: 30%;
        left: 6.4%;
        bottom: 39.8%;
        z-index: 2;
    }
    
    .logo {
        bottom: 2%;
        right: 5%;
        z-index: 3;
        width: 27%;
    }
    
    #wrap {
        padding-top: 0px!important;
    }
    
    
/*     ドアのスライド関係 */
    .mainImage {
    opacity: 0;
      transition: opacity 1.2s ease; /* ← ゆっくり切り替え */
    }
    
.door .mainImage.active {
  opacity: 1;
}

.sub_txt01 {
width: 65%;
        left: 50%;
        transform: translateX(-50%);
        bottom: 2%;
}
    
}

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

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#top_contents::before {
    background-image: url('/Files/img/bg01.png')!important;
    background-size: cover;
    opacity: 0.8;
    animation: bgFlow 15s linear infinite;
}

@keyframes bgFlow {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: -120px -80px; /* ← 左上へ移動量 */
    }
}

.con_box01 {
    margin-left: 10%;
}

.custom_img01 {
    border-radius: 0 48% 0 0;
    border: #fff solid 5px;
    height: 30vw!important;
    aspect-ratio: 0.7 / 0.8;
}

.custom_img01 img {
    width: auto!important;
    height: 100%!important;
    object-fit: cover;
}

.con_box02 {
    margin-right: 5%;
}

.custom_img02 {
    border-radius: 48% 0 0 0;
    border: #fff solid 5px;
    height: 30vw!important;
    aspect-ratio: 0.7 / 0.8;
}

.custom_img02 img {
    width: 100%!important;
/*     width: auto!important; */
    height: 100%!important;
    object-fit: cover;
}


/* 熊のアニメーション */
/* #top_contents::after {
    position: absolute;
    display: block;
    content: '';
    background-image: url('/FIles/img/item09.png');
    width: 20%;
    height: auto;
    animation: kuma02 4s ease-in-out infinite;
} */

.kuma01 {
    width: 20%;
    max-width: 200px;
    bottom: 0%;
    right: 7%;
    animation: kuma02 8s ease-in-out infinite;
}
@keyframes kuma02 {
  0% { transform: translateY(100%); }
  50% { transform: translateY(0%); }
  100% { transform: translateY(100%);}
}

.logo01 {
    animation: rotateLogo01 20s linear infinite;
    width: 20%;
    top: 12%;
}

@keyframes rotateLogo01 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.custom_img04 {
    width: 35%;
    left: -12%;
    bottom: -18%;
}

.custom_img05 {
    width: 16%;
    left: -3%;
    bottom: -14%;
    animation: yura 3.5s ease-in-out infinite;
    transform-origin: bottom center; /* 下を支点に回転 */
}

@keyframes yura {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(2deg); }
    50%  { transform: rotate(0deg); }
    75%  { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}


.font_custom01 {
    font-size: calc(1rem + 7px);
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
        
    .con_box01 {
        margin-left: 0%;
    }
    
    .custom_img01 {
        height: 35vw!important;
    }
    
    .con_box02 {
        margin-right: 0%;
    }
    
    .custom_img02 {
        height: 35vw!important;
    }
    
        .custom_img04 {
        width: 43%;
        left: -2%;
        bottom: -18%;
    }
    
    .custom_img05 {
    width: 23%;
    left: 7%;
    bottom: -14%;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    
    #top_contents::before {
        background-size: 180%;
    }
    
    .logo01 {
        width: 40%;
    }
    
    .con_box01 {
        margin-left: 0%;
    }
    
    .custom_img01 {
        border-radius: 0 48% 0 0;
        border: #fff solid 3px;
        height: 80vw!important;
    }
    
    .con_box02 {
        margin-top: 40px;
        margin-right: 0%;
        margin-left: 16%;
    }
    
    .custom_img02 {
        border: #fff solid 3px;
        height: 80vw!important;
    }
    
    .kuma01 {
        width: 25%;
    }
    
    .custom_img04 {
        width: 70%;
        left: -6%;
        bottom: -25%;
    }
    
    .custom_img05 {
        width: 33%;
        left: 12%;
        bottom: -21%;
        z-index: 2;
    }
    
    .font_custom01 {
    font-size: 1rem;
}

    
}




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


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

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    .sp_txt_font {
        font-size: 11px;
    }
}