﻿/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */
.top_page html,.top_page body,.top_page div,.top_page span,.top_page applet,.top_page object,.top_page iframe,.top_page h1,.top_page h2,.top_page h3,.top_page h4,.top_page h5,.top_page h6,.top_page p,.top_page blockquote,.top_page pre,.top_page a,.top_page abbr,.top_page acronym,.top_page address,.top_page big,.top_page cite,.top_page code,.top_page del,.top_page dfn,.top_page em,.top_page font,.top_page ins,.top_page kbd,.top_page q,.top_page s,.top_page samp,.top_page small,.top_page strike,.top_page strong,.top_page sub,.top_page sup,.top_page tt,.top_page var,.top_page dl,.top_page dt,.top_page dd,.top_page ol,.top_page ul,.top_page li,.top_page fieldset,.top_page form,.top_page label,.top_page legend,.top_page table.table,.top_page caption,.top_page tbody,.top_page tfoot,.top_page thead,.top_page tr,.top_page th,.top_page td {
    font-size: 105%;
}

.top_page h2 {
    font-size: 200%;
}
/* 
blog_wrap {
    font-size: 100%;
} */

.bannar {
    width: 8%;
    bottom: 3%;
    right: 70px;
    max-width: 150px;
    z-index: 100;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.bannar_none {
    transform: translateY(100%);
    opacity: 0;
}

@media screen and (max-width: 768px){
        .bannar {
    width: 28%;
    bottom: 3%;
    right: 60px;
    }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    .bannar {
        width: 28%;
        bottom: 4%;
        right: 40px;
    }
}

#loading {
  position: fixed;
  inset: 0;
    background-color: #d3f0d2;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
}

.blob {
  position: absolute;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(210, 240, 209,0.4) 40%, transparent 100%);
  filter: blur(100px);
  transform-origin: center;
  animation: blobAnim 4s ease-in-out forwards;
}

/* ゆらぎ＋にじみっぽい動き + 拡大縮小 */
@keyframes blobAnim {
  0% {
    transform: scale(0.3) rotate(0deg);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.1) rotate(15deg);
    opacity: 1;
  }
  
  
/*   66% {
  transform: scale(0.9) rotate(-10deg);
  opacity: 0.9;
}
100% {
  transform: scale(0.3) rotate(0deg);
  opacity: 0.7;
} */
}


.blob01 {
  position: absolute;
  width: 40%;
    left: 5%;
    bottom: -20%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(210, 240, 209,0.5) 60%, transparent 100%);
  filter: blur(100px);
  transform-origin: center;
  animation: blobAnim01 4s ease-in-out infinite;
}

@keyframes blobAnim01 {
  0% {
    transform: scale(0.3) rotate(0deg);
    opacity: 0.7;
  }
  33% {
    transform: scale(1.1) rotate(15deg);
    opacity: 1;
  }
  
  
66% {
  transform: scale(0.9) rotate(-10deg);
  opacity: 0.9;
}
100% {
  transform: scale(0.3) rotate(0deg);
  opacity: 0.7;
}
}

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */

/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#wrap {
    overflow: hidden;
}



:root{
    /*--color1: #111; */
    --color2: #f3eddf;
    --color3: #d3b6ff;
	/*--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);}*/


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.top_wrap #menu_bt {
    top: 30px;
    right: 95px;
}

.main_img {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: auto;
    box-sizing: border-box;
/*     overflow: hidden; */
}

.fv_mian_txt {
        left: 5%;
    bottom: 50px;
    width: 42%;
    z-index: 1;
}

#video {
     width: 100%;
  clip-path: url(#leafMask);
  -webkit-clip-path: url(#leafMask);
  object-fit: fill;
  aspect-ratio: 1.6;
    width: 70vw;
}


#video .video {
    height: 100%;
}

.video_wrap {
    top: 5%;
    right: -6%;
    filter: drop-shadow(-7px 8px 0px var(--color1));
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .main_img {
        height: auto;
    }
        .index .main_header h1 {
        max-width: 150px;
        margin: 0;
    }
    
    .top_wrap #menu_bt {
        top: 30px;
        right: 25px;
    }
    
        .video_wrap {
        top: 36%;
        right: 38%;
        transform: translateX(50%);
    }
    
        #video {
        width: 130vw;
    }
    
/*     #video .video {
    height: 71vh;
    width: 130vw;
} */
    
    .fv_mian_txt {
        width: 80%;
        top: 12%;
    }
    
    .blob01 {
        top: 7%;
        left: 9%;
        width: 50%;
        bottom: auto;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(210, 240, 209, 0.5) 60%, transparent 100%);
    }


}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    
        .video_wrap {
        top: 40%;
        right: 39%;
        transform: translateX(50%);
    }
    
    #video {
        width: 130vw;
    }
    
    .top_wrap #menu_bt {
        top: 20px;
        right: 20px;
    }
    
    .index .main_header h1 {
        max-width: 100px;
    }
    
    .fv_mian_txt {
        width: 80%;
        top: 12%;
        z-index: 1;
    }
    
    .fv_sub_txt {
        width: 51%;
        bottom: 20px;
        right: 5%;
    }
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}


