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


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

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

:root{
    --color1: #acc649;
    --color2: #f8fbf2;
    --color3: #204537;
	/*--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　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* PC用設定 */
#handwriting {
    width: 44%;
    height: auto;
    position: absolute;
    top: 4%;
    left: 3%;
    transform: rotate(5deg);
}

/* 文字自体の色（画像に合わせて濃い緑などに設定） */
#base path {
    fill: #82C32E !important; 
}

.cls-1, .cls-3, .cls-2 {
    fill: #385123 !important;
}

/* 3. 「毎」の文字が入っているパス（cls-5）を濃くする */
/* もし「過ごす」まで濃くなってしまう場合は、この下の行を消してください */
.cls-5 {
    fill: #385123 !important;
}

/* マスク用の線（ここをVivusがなぞることで文字が見えてくる） */
#svgMask path {
    fill: none !important;
    stroke: #ffffff !important; /* マスク内は必ず白 */
    stroke-width: 25px; /* 文字をしっかり覆う太さに調整 */
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dashoffset 0.1s;
}



.sub_copy {
    width: 12%;
    right: 6%;
    bottom: 6%;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    #handwriting {
        width: 94%;
        height: auto;
        position: absolute;
        top: 8%;
        left: 0%;
        transform: rotate(5deg);
    }
        .sub_copy {
        width: 50%;
        right: 0;
        bottom: 0;
    }
    
}

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

    
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.con_item01 {
        width: 20%;
    top: -10%;
    left: 8%;
}

@keyframes floating {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px); /* 上に15px移動（数字を小さくするとより静かになります） */
  }
  100% {
    transform: translateY(0);
  }
}

.u-float {
  /* アニメーション名, 1周期の時間, 緩急, 無限反復 */
  animation: floating 4s ease-in-out infinite;
  
  /* 念のため、アニメーションを滑らかにする設定 */
  will-change: transform;
}

.con_item02 {
        width: 20%;
    right: 2%;
    bottom: -10%;
    z-index: 2;
}

.u-float02 {
  /* アニメーション名, 1周期の時間, 緩急, 無限反復 */
  animation: floating02 6s ease-in-out infinite;
  
  /* 念のため、アニメーションを滑らかにする設定 */
  will-change: transform;
}

@keyframes floating02 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px); /* 上に15px移動（数字を小さくするとより静かになります） */
  }
  100% {
    transform: translateY(0);
  }
}

#contents2 {
    background-image: url('/Files/img/bg01.png');
    background-size: cover;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .con_item01 {
        width: 30%;
        top: -13%;
        left: 2%;
    }
    
    .con_item02 {
    width: 30%;
    right: 2%;
    bottom: -5%;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
        .con_item01 {
            top: -5%;
        }
        
        
}



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


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

}

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

}