@charset "utf-8";

html, body { 
  margin: 0px;
  padding: 0px;
}

body {
    font-family: "Noto Serif JP", serif; 
    background-color:#0a213a;
    background-repeat: no-repeat;
}

p {
  margin: 0px;
}

.gendai {
  height: 740px;
  background-image: url(gendai.png);
  position: relative;
}

.suwaipu_text {
  position: absolute;
  color: #f9ffd7;  
  top:45px;
  text-align: center;
  width:100%;
  animation: fuwa-fuwa 2s ease-in-out infinite; /* 2秒かけて無限に繰り返す */
 font-size: 20px;
}

.sutoresu_text {
  background-image: url(sutoresu_haikei.png);
  height: 650px; 
  margin: 0%;
  padding-top: 290px;
  box-sizing: border-box;
  text-align: center;
  line-height: 50px;
  font-size: 23px;
  color: #f6fade;
}




/* --- スクロール連動演出 --- */


.scroll-wrapper {
    margin-top: 100px; 
    height: 350vh; 
    position: relative;
    background-color: #0a213a; /* 全体の土台をロゴの色に合わせる */
}

/* --- index.css の該当箇所を修正 --- */

.zoom-sticky-area {
    position: sticky;
    top: 0px; 
    height: calc(100vh - 100px); 
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    /* 1. 上揃えから中央揃えに変更して、真っ直ぐ飛び出す準備をします */
    align-items: center; 
    background-color: #0a213a; 
    z-index: 5;
}

/* index.css 72行目付近から上書き */

/* index.css 72行目付近から修正 */

.rogo-mask-container,
.background-kyoto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 計算上の隙間を防ぐため、画面よりわずかに大きくしておきます */
    width: 101vw; 
    height: 101vh; 
}

.background-kyoto {
    /* ファイル名が kyoto.jpg なので、拡張子を合わせます */
    background-image: url(kyoto.png); 
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center center; 
    z-index: 1;
    opacity: 1;

    /* 1. 背景にも拡大アニメーションを適用 */
    /* ロゴよりも拡大率を抑えた「背景専用のアニメーション」を下に作成します */
    animation: kyoto-zoom linear forwards;
    animation-timeline: scroll(root);
}

.rogo-mask-container {
    z-index: 2;
    background-image: url(rogo.png);
    /* 2. contain にすることで、ロゴの形を絶対に崩さない（伸ばさない）ようにします */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center center; 

    /* マスク設定 */
    -webkit-mask-image: url(rogo.png);
    mask-image: url(rogo.png);
    /* 3. マスクも contain にしてロゴの形と一致させます */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center; 
    
    transform-origin: center center;
    animation: zoom-animation linear forwards;
    animation-timeline: scroll(root);
}

.momiji-img {
    position: absolute;
    top: 45%;
    left: 50%;
    transform-origin: center center;
    /* 1. 拡大アニメーション(スクロール連動) と 揺れアニメーション(時間連動) を両方指定 */
    animation: 
        zoom-animation linear forwards, 
        yura-yura 4s ease-in-out infinite; /* 4秒かけて無限にゆらゆら */
    animation-timeline: scroll(root), auto; 
    
    width: 390px; 
    height: 600px;
    z-index: 3;
    pointer-events: none;
}

/* アニメーション：真ん中から真っ直ぐ拡大させる */
@keyframes zoom-animation {
    /* translate(-50%, -50%) を維持したまま拡大することで中央から真っ直ぐ来ます */
    0%, 38% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    85% { transform: translate(-50%, -50%) scale(15); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(20); opacity: 0; }
}


/* 紅葉がゆらゆら揺れるアニメーション */
@keyframes yura-yura {
    0% { rotate: 0deg; }
    25% { rotate: 5deg; translate: 5px 5px; }
    50% { rotate: 0deg; translate: 0px 10px; }
    75% { rotate: -5px; translate: -5px 5px; }
    100% { rotate: 0deg; translate: 0px 0px; }
}

@keyframes kyoto-zoom {
    /* translate(-50%, -50%) を維持して、少しだけ大きく（1.2倍）します */
    0%, 38% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1.2); }
}


.syoukai {
    background-image: url(syoukai_haikei.png); 
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    min-height: 1040px;
    position: relative;
    z-index: 10; /* 前のセクションより手前に出す */
    color: black;
}


.syoukai_1_png{
    top: 50px;
    position: absolute;
    right: 15px;
}
.syoukai_1_text{
    font-size: 22px;
    position: absolute;
    left: 60px;
    top: 260px;
}

.syoukai_2_png{
    position: absolute;
    top: 440px;
    left: 10px;
}
.syoukai_2_text{
    font-size: 22px;    
    position: absolute;
    top: 640px;
    right: 10px;
}

.syoukai_3_png {
    position: absolute;
    top: 800px;
    right: 20px;
}
.syoukai_3_text{
    font-size: 22px;
    position: absolute;
    top: 960px;
    left: 50px;
}


/* 上下にふわふわ動くアニメーション */
@keyframes fuwa-fuwa {
    0% { transform: translateY(0); }
    50% { transform: translateY(10px); } 
    100% { transform: translateY(0); }
}