/* ==========================================
   🔤 オリジナルフォント「kazukiReiwa」の登録
   ========================================== */
@font-face {
    font-family: 'kazukiReiwa-Regular';
    src: url('fonts/kazukiReiwa-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
   全文章・全要素へのフォント適用
   ========================================== */
 body, h1, h2, h3, h4, p, a, span, div {
    font-family: 'kazukiReiwa-Regular', 'YuMincho', '游明朝', serif !important;
}

/* ==========================================
   🎨 1. 基本設定（全体に関わるルール）
   ========================================== */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background-color: #C7D6E8; /* ブルーグレー */
    color: #4a3b32;            /* 優しいココアブラウン */
    overflow-x: hidden;
    position: relative;
}

.lp-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
    position: relative;        
    z-index: 2; /* コンテンツは前面 */
}

/* --- タイトル画像 --- */
.main-title img {
    max-width: 100%;          
    width: 600px;            
    height: auto;
    margin-bottom: 0;        
    display: block;          
    margin-left: auto;       
    margin-right: auto;      
}

/* --- 文章・キャッチコピー --- */
.lp-content p {
    font-size: 22px;
    line-height: 1.8;
    margin: 24px 0;
}

.catch-copy {
    margin-top: 3 !important;    /* ← 確実に上書き＆距離を縮める */           
    font-size: 22px;
    font-weight: bold;
    color: #6582ce;        
    text-align: inherit;     
}

/* --- 🎯 1つ目のタイピング演出ボックス --- */
.typing-box {
    background-color: #F6F4EA;    /* アイリッシュホワイト色 */
    border: 2px solid #E7CDE0;    
    border-radius: 12px;          
    padding: 40px 20px;           
    margin: 60px auto;            
    max-width: 700px;             
    min-height: 20px;             
    display: block;               
    text-align: center;           
    box-shadow: 0 6px 20px rgba(167, 164, 224, 0.25); 
}

.typing-main-row {
    display: block;
    text-align: center;
    margin-bottom: 15px;          
}

#typing-text {
    font-size: 38px;              
    font-weight: bold;            
    line-height: 2.0;             
    color: #C7D6E8;               
    margin: 0;
    display: inline-block;        
    text-align: left;             
    vertical-align: middle;
}

.typing-sub-text {
    font-size: 21.5px !important;   
    color: #6b5649;               
    line-height: 1.6; 
    margin: 0;
    padding-top: 10px;
    border-top: 1px dashed #909fcc; 
    display: inline-block;
    max-width: 90%;              
}

/* ==========================================
   🌸 活動内容（①②③）のカード（文字数お揃い・高さ同期版）
   ========================================== */
.content-services {
    margin: 60px auto;
    max-width: 700px;             
    padding: 0 10px;
}
/* カード全体のコンテナ */
.content-card {
    /* 見出しエリアの高さ(120px)に合わせて綺麗に塗り分け */
    background: repeating-linear-gradient(90deg, #C7D6E8 0px, #C7D6E8 24px, #F6F4EA 24px, #F6F4EA 48px) top / 100% 120px no-repeat,
        #8ea7e6
        !important;
    border-radius: 16px;          
    margin-bottom: 35px;          
    box-shadow: 0 8px 24px rgba(224, 164, 178, 0.15); 
    display: flex;                
    flex-direction: column;       
    align-items: stretch;         
    text-align: left;             
    transition: transform 0.3s ease;
    overflow: hidden;             
    position: relative;
    box-sizing: border-box;
    }
.content-card:hover {
    transform: translateY(-3px);  
}
/* --- 💡 上方120pxエリア（見出しブロック・文字数ズレ吸収） --- */
/* 行(row)の役割と、文字の役割を分離 */
.card-lead-row {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 12px;
    padding: 20px 30px;
    height: 120px !important;
    position: relative;
    z-index: 5;
    width: 100%;
    box-sizing: border-box;
}
.content-card .card-text .card-lead {
    font-size: 22px !important;
    background-color: transparent !important;
    color: #6b5d49 !important;
    margin: 0;
    line-height: 1.4;
    font-weight: bold;
    flex: 1;     /* ← 見出し文が幅を取り、カップ画像が右側に収まるようにする */
}
.cup-mikoshi-container,
.flower-animation-container {
    flex-shrink: 0;
}
/* 数字（①②③）の設定 */
.card-number {
    font-size: 28px !important;   
    color: #6b5d49 !important;    
    margin: 0;
    line-height: 1.4;
    font-weight: bold;
    font-feature-settings: "palt";
    display: inline-block;
    flex-shrink: 0;              
    }

/* --- 💡 下方エリア（本文・コンテンツブロック） --- */
.card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: transparent !important; 
    position: relative;
    z-index: 4;
}

/* 下方部分の余白 */
.card-text p,
.card-text-with-cups,
.card-text-with-flower {
    background-color: transparent !important;
    padding: 25px 30px 45px 30px; 
    margin: 0 !important;
    box-sizing: border-box;
}

/* 下方の詳細テキスト */
.card-text p {
    font-size: 20px !important;   
    color: #f2ede3 !important;    
    line-height: 1.7;
    }

/* --- ☕ ②のカードの中身（画像配置） --- */
.card-text-with-cups {
    display: flex;
    align-items: flex-start;          
    justify-content: flex-start;  
    width: 100%;
    gap: 20px;                    
}

.cup-mikoshi-container {
    position: relative;
    width: 80px;                  
    height: 90px;
    min-width: 80px;              
    display: block;
    margin-left: 10px;            
    }

.cup-position-wrapper {
    position: absolute;
    top: 40%;
    left: 70%;     /* ← 自分の枠（.cup-mikoshi-container）の中心を基準にする */
    width: 0;
    height: 0;
}

.cup-pos-1 { transform: translate(-50%, -50%) translateY(-10px); }
.cup-pos-2 { transform: translate(-50%, -50%) translate(26px, 15px); }
.cup-pos-3 { transform: translate(-50%, -50%) translate(-26px, 15px); }

.mikoshi-cup {
    width: 44px;                  
    height: auto;
    object-fit: contain;
    display: block;
    transform-origin: center;
    }

/* --- 🌸 ③のカードの中身（お花配置） --- */
.card-text-with-flower {
    display: flex;
    align-items: flex-start;          
    justify-content: flex-start;  
    width: 100%;
    gap: 20px;                    
}

.flower-animation-container {
    position: relative;
    width: 80px;                  
    height: 80px;
    min-width: 80px;              
    display: block;
    margin-left: 10px;
}

.center-cup {
    width: 80px;                  
    height: auto;
    position: absolute;
    top: 70%;
    left: 50%;                    
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 1;                   
}

.orbit-flower-wrapper {
    position: absolute;
    width: 40px;                  
    height: 28px;
    top: 48%;                     
    left: 60px;                    
    z-index: 2;                   
    animation: hanafuda-rotate 6s linear infinite; 
}

.orbit-flower {
    width: 100%;                  
    height: auto;
    display: block;
}

/* --- 🎯 3つの円エリア --- */
.circle-container {
    display: flex;
    justify-content: space-between; 
    gap: 20px;                    
    margin: 60px 0;
    padding: 0 10px;
}

.circle-item {
    flex: 1;                        
    display: flex;
    flex-direction: column;         
    align-items: center;            
    position: relative;
}

.circle-image {
    width: 100%;
    max-width: 230px;
    position: relative;
}

.circle-image img {
    width: 100%;                    
    height: auto;
    display: block;
}

.circle-text {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;            
    background-color: transparent;  
    padding: 0;                
    width: 80%;                    
    z-index: 10;                    
}

.circle-text h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
    color: #87774a;                 
    text-align: center;
}

.circle-text p {
    margin: 8px 0 0 0;
    font-size: 13px !important;     
    line-height: 1.4;
    text-align: center;
}

/* --- 🎯 ツインブロック --- */
.twin-block-container {
    display: flex;            
    justify-content: space-between;
    gap: 30px;                
    margin: 80px auto;        
    max-width: 750px;         
    padding: 0 10px;
}

.twin-block-item {
    flex: 1;                  
    position: relative;
}

.twin-block-inner {
    background-color: #f6f5f2; 
    border-radius: 20px;       
    padding: 25px 20px;
    height: 100%;              
    display: flex;
    align-items: center;       
    justify-content: center;
    box-shadow: 0 10px 30px rgba(224, 164, 178, 0.12); 
    border: 2px solid #8ea7e6; 
    box-sizing: border-box;    
    transition: transform 0.3s ease;
}

.twin-block-inner:hover {
    transform: translateY(-4px); 
}

.twin-block-inner h3 {
    font-size: 16px;          
    color: #6b5649;            
    line-height: 1.6;         
    margin: 0;
    font-weight: bold;
    text-align: center;       
}

/* --- 🎯 2つ目のタイピング演出ボックス --- */
.typing-box-2 {
    margin: 120px auto 80px;      
    max-width: 900px;             
    text-align: center;           
    display: block;
}

.typing-main-container {
    display: inline-flex;         
    align-items: center;          
    justify-content: center;      
    gap: 40px;                    
    vertical-align: middle;
}

.candle-side {
    width: 100px;                  
    height: auto;                 
    object-fit: contain;
    display: block;
    align-self: center;
}

.typing-main-row-2 {
    display: inline-block;
    text-align: center;           
    position: relative;
    vertical-align: middle;
    width: auto;                  
}

#typing-text-2 {
    font-size: 24px;              
    font-weight: bold;            
    line-height: 1.8;             
    color: #8ea7e6;      /* 8ea7e6        */
    margin: 0;
    display: inline-block;        
    text-align: center;           
    white-space: pre-line;        
}

/* --- ✨ ツインサークル --- */
.twin-circle-container {
    display: flex;
    justify-content: center;  
    gap: 60px;                
    margin: 80px auto;
    max-width: 750px;         
    padding: 0 10px;
}

.twin-circle-item {
    flex: 1;
    max-width: 260px;         
    display: flex;
    flex-direction: column;
    align-items: center;      
    position: relative;
}
/*
.twin-circle-image {
    width: 100%;
    position: relative;
}
*/
.twin-circle-image img {
    width: 100%;
    height: auto;
    display: block;
}

.twin-circle-text {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;       
    background-color: transparent; 
    padding: 0;
    width: 85%;                    
    z-index: 10;
}

.twin-circle-text h3 {
    margin: 0;
    font-size: 18px;          
    color: #6b5649;           
    line-height: 1.6;
    font-weight: bold;
    text-align: center;       
}

/* ==========================================
   🌸 ③ 締めくくりメッセージエリア（背景サイズ最適化版）
   ========================================== */
.closing-message-zone {
    background-image: url('images/backgrounds/sousyoku.webp') !important; 
    background-size: 98% !important;
    background-position: center 42% !important;
    background-repeat: no-repeat;
    border: none !important;    
    border-radius: 20px;          
    padding: 120px 140px 190px 140px;
    margin: 100px auto 20px;      
    max-width: 1400px;             
    text-align: center;           
    /*box-shadow: 0 8px 24px rgba(252, 247, 247, 0.886); */
    position: relative;
    box-sizing: border-box;
}

.closing-message-zone h2 {
    font-size: 26px;              
    color: #f9ea9e;               
    line-height: 2.5;             
    margin: 0;
    font-weight: bold;
}

.shine-text {
  font-size: 22px;
  font-weight: bold;
  color: #f9ea9e; /* 基本の文字色 */
  display: inline-block; /* グラデーションの幅を文字幅に合わせる */
  
  /* グラデーション背景の設定（基本色 → 光 → 基本色） */
  background: linear-gradient(
    110deg, 
    #f6f4ea 35%, 
    #f9ea9e 50%, 
    #f6f4ea 65%
  );
  background-size: 200% 100%;
  background-position: 100% 0; /* 初期状態は光を右側に隠しておく */
  
  /* 背景を文字の形にくり抜く設定 */
  -webkit-background-clip: text;
  background-clip: text;
}

/* 画面の1/3に達した時にJSで付与するクラス */
.shine-text.is-active {
  animation: shineAnimation 1s ease-out forwards;
}

/* 1秒間で背景（光）を左から右へ受け流すアニメーション */
@keyframes shineAnimation {
        0% {
        background-position: 100% 0;
        -webkit-text-fill-color: transparent; /* アニメーション中だけ背景を透過させて光を見せる */
        }
        100% {
        background-position: -100% 0;
        -webkit-text-fill-color: transparent;
        }
    }

/* --- 🎯 申し込みボタン --- */
.action-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -50px;            
    margin-bottom: 100px;         
}

.main-button img {
    max-width: 330px;
    height: auto;
    transition: transform 0.3s;
}

.main-button img:hover {
    transform: scale(1.05);
}

/* --- 🧚‍♂️ スクロールについてくる案内妖精（ホバリング追加版） --- */
#scrolling-fairy {
    position: fixed;         
    bottom: 35%;             
    right: 5%;               
    width: 120px !important;  
    height: 120px !important; 
    z-index: 1000;           
    cursor: pointer;         
    text-decoration: none;   
    display: block !important;

    /* 💡ここを追加：2.6秒かけて、上下にふんわり、永久にループ動かす */
    animation: fairy-hovering 2.6s ease-in-out infinite;
}

#scrolling-fairy img {
    width: 100% !important;             
    height: 100% !important;
    object-fit: contain !important; 
    display: block !important;
}

/* 💡ここをCSSの空いている場所（最下部など）に追加 */
@keyframes fairy-hovering {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px); /* 💡一番上で最大8px分、フワッと浮き上がります */
    }
    100% {
        transform: translateY(0);
    }
}

/* ==========================================================================
   背景エフェクト（六芒星・お花）ステージ
   ========================================================================== */
.flower-background-stage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999; 
    pointer-events: none;         
    overflow: hidden;             
    display: block !important;    
}

.bg-rokubousei {
    position: absolute;
    top: 20%;
    left: 10%;
    width: 250px;
    height: auto;
    opacity: 0.25;
    animation: hanafuda-rotate 20s linear infinite; 
    display: block !important;
}

.bg-flower-step1,
.bg-flower-step2,
.bg-flower-step3 {
    position: absolute;
    width: 130px !important;       
    height: auto !important;
    display: block !important;
    opacity: 0.8;            
}

.bg-flower-step1 {
    top: 20%;
    left: -50px;
    animation: flow-left-to-right 12s ease-in-out infinite;
}

.bg-flower-step2 {
    left: -50px;
    top: 10%;
    animation: flow-diagonal 14s ease-in-out infinite;
}

.bg-flower-step3 {
    right: 150px;            
    top: -50px;
    animation: flow-snowball 10s linear infinite;
}

/* ==========================================
   🎬 4. アニメーションの設計図（Keyframes）
   ========================================== */
@keyframes flow-left-to-right {
    0% { left: -50px; transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-30px) rotate(120deg); }
    70% { transform: translateY(30px) rotate(240deg); }
    100% { left: calc(100% + 50px); transform: translateY(0) rotate(360deg); }
}

@keyframes flow-diagonal {
    0% { left: -50px; top: 10%; transform: rotate(0deg); }
    100% { left: calc(100% + 50px); top: 80%; transform: rotate(360deg); }
}

@keyframes flow-snowball {
    0% { top: -50px; transform: rotate(0deg); }
    30% { top: 30%; transform: rotate(90deg); }
    40% { top: 40%; transform: rotate(450deg); }
    50% { top: 50%; transform: rotate(810deg); }
    100% { top: calc(100vh + 50px); transform: rotate(990deg); }
}

@keyframes hanafuda-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================
   🌸 5. アニメーション演出用ステージ（花火・きらきら）
   ========================================= */
#butterfly-stage,
#sparkle-firework-stage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; 
    z-index: 9999;        
    overflow: hidden;
}

.kirakira-step-burst {
    position: absolute;
    top: 0;
    left: 0;
    width: 20vw;         
    max-width: 200px;    
    height: auto;
    object-fit: contain;
    transform: translate(-50%, -50%) scale(0.2); 
    opacity: 0;
    animation: kirakiraFadeBurst 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards; 
}

@keyframes kirakiraFadeBurst {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
    15% { opacity: 1; }
    40% { transform: translate(-50%, -50%) scale(1.0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
}

/* ==========================================================================
   🌹 バラ園（申し込みボタン周辺）の絶対配置
   ========================================================================= */
.rose-garden-container {
    position: relative;
    max-width: 500px; 
    margin: -40px auto 120px auto;
    padding: 40px;
}

.rose-bouquet-top-left {
    position: absolute;
    top: 60px;
    left: -10px;
    width: 200px;
    height: auto;
    z-index: 5;
}

.rose-bouquet-bottom-right {
    position: absolute;
    bottom: 95px;
    right: 40px;
    width: 90px;
    height: auto;
    transform: rotate(250deg);
    z-index: 2;
}

.rose-cluster {
    position: absolute;
    width: 60px;
    height: auto;
    z-index: 1;
}
.cluster-1 { top: -50px; right: 10px; }
.cluster-2 { bottom: -5px; left: -5px; }

.rotating-rose {
    position: absolute;
    z-index: 1;
    transform: rotate(0deg);
    transition: transform 3s linear; 
}

.white-rose-1 { top: 80px; left: -60px; width: 60px; }
.white-rose-2 { bottom: 90px; right: -50px; width: 50px; }
.white-rose-3 { top: 30px; left: 50px; width: 28px; }

.pink-rose-1 { bottom: 20px; left: 120px; width: 45px; }
.pink-rose-2 { top: 200px; right: -60px; width: 32px; }
.pink-rose-3 { bottom: 60px; left: 75px; width: 38px; }

/* ==========================================================================
   📱 6. スマホ用の部屋（マックス画面幅 767px 以下）
   ========================================================================== */
.sp-only { display: none; }
.pc-only { display: inline-block; }

@media screen and (max-width: 767px) {
    .sp-only { display: inline; }
    .pc-only { display: none !important; }

    #scrolling-fairy {
        width: 75px !important;
        height: 75px !important; 
        bottom: 25% !important; 
    }

    .catch-copy {
        text-align: center !important;
        line-height: 1.9 !important;
        font-size: 1.1rem !important; 
        margin: 0 auto 15px auto !important;
        display: block;
        width: 100%;
    }
    
    .twin-circle-container {
        flex-direction: column;   
        align-items: center;
        gap: 30px; 
        margin: 40px auto;
    }
    .twin-circle-item {
        width: 100%;
        max-width: 240px;
        margin: 0 auto;
        position: relative;
    }
    .twin-circle-text h3 {
        text-align: center !important; 
        line-height: 1.6 !important;
        font-size: 15px !important;
    }

    /* スマホ用の締めくくりメッセージ背景調整 */
      .closing-message-zone {
        background: transparent !important; 
        border: none !important;
        padding: 20vw 15vw !important; 
        margin: 80px auto !important;
        max-width: 500px !important; 
        box-shadow: none !important;  
    }
    
    .closing-message-zone::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: url('images/backgrounds/sousyoku.webp') !important; 
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat;
        border: none !important;     
        z-index: 1;
    }
    
    .closing-message-zone h2 {
        position: relative;
        z-index: 7;                    
        font-size: clamp(1rem, 2.0vw, 1.0rem) !important; /* 画面幅に応じて1rem〜1.3remの間で変化 */
        line-height: 1.9 !important;
        text-align: center !important;
        margin: 0 auto;
        width: 100%;
    }

    .typing-box {
    padding: 25px 20px;
    margin: 40px 24px;        /* ← 15px→24pxで横幅を縮小 */
}
#typing-text {
    font-size: 26px;          /* ← 30px→26pxで少し小さく */
    text-align: center;       
}
.typing-sub-text {
    font-size: 16.5px !important;  /* ← 18.5px→16.5pxで少し小さく */
    padding-top: 8px;
    line-height: 1.5;        
    text-align: center;       
}
/* 新規追加（typing-boxと同じ24pxに揃える） */
.content-services {
    padding: 0 24px;
}
    .circle-container {
        flex-direction: column;   
        gap: 30px; 
        margin: 40px 0;
        align-items: center;
    }
    .circle-item {
        width: 100%;
        max-width: 240px; 
        margin: 0 auto;
    }
    .circle-text h3 { font-size: 18px !important; }
    .circle-text p { font-size: 15.5px !important; }
 
    /* スマホ用カード（高さ同期とグラデーション） */
   .content-card {
    flex-direction: column;   
    align-items: stretch;      
    text-align: left;       
    padding: 0;
    background: 
        repeating-linear-gradient(90deg, #C7D6E8 0px, #C7D6E8 24px, #F6F4EA 24px, #F6F4EA 48px) top / 100% 120px no-repeat,
        #8ea7e6
        !important;
}

     .card-number {
        font-size: 24px !important;          
        color: #6b5649 !important;
    }

    .card-text,
    .card-text p,
    .card-text-with-cups,
   .card-text-with-flower p {
    font-size: 17px !important;   /* ← 15px→17pxで少し大きく */
    color: #f2ede3 !important;
    }
 
    .mikoshi-cup {
        width: 30px;              
    }
    
    .twin-block-container {
        flex-direction: column;   
        gap: 30px;                
        margin: 50px 15px;
    }
    .twin-block-inner {
        padding: 35px 25px;       
    }
    .typing-box-2 {
        padding: 30px 15px;
        width: 100%;
    }
    .typing-main-container {
        display: flex;
        flex-direction: column; 
        align-items: center;    
        gap: 20px;              
    }
    .candle-side {
        width: 45px !important; 
        position: static !important; 
        display: inline-block;
        margin: 0 10px; 
    }
    .typing-main-row-2 {
        width: 100%;
        text-align: center;      
        font-size: 1rem;         
        line-height: 1.7;
        word-break: break-all;   
        padding: 0 10px;
    }
    .action-section {
        margin-top: 30px;         
        margin-bottom: 50px;
    }
} 

/* ==========================================
   💻 7. PC画面専用の調整
   ========================================== */
@media screen and (min-width: 768px) {
    .typing-main-row-2 {
        max-width: 580px !important; 
        width: 100% !important;
        display: inline-block !important;
        white-space: normal !important;
        word-break: keep-all !important; 
    }
}

/* ==========================================================================
   Fairy Cursor Settings
   ========================================================================== */
.typing-cursor,
.typing-cursor-2 {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    width: 55px;  
    height: 55px;
    background: url('images/fairies/fairie-muki/hidari.webp') no-repeat center center;
    background-size: contain;
    opacity: 1;
    visibility: visible;
    transition: opacity 1.8s ease, visibility 1.8s ease; 
}

.cursor-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ==========================================================================
   Firework Settings（花火のバグ修正版）
   ========================================================================== */
.firework-star {
    position: fixed; 
    top: 0;       /* JSの絶対位置(centerX/Y)を正確に反映させるため、起点リセット */
    left: 0;
    width: 45px;  
    height: auto;
    pointer-events: none;
    z-index: 10000;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: star-burst-fade 1.5s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes star-burst-fade {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(0, 0) scale(1) rotate(0deg);
    }
    80% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.3) rotate(360deg);
    }
}
/* ==========================================================================
   🌹 申し込みボタン：白いバラ舞い上がり演出
   ========================================================================== */
.rose-burst-petal {
    position: fixed;
    top: 0;
    left: 0;
    width: 50px;
    height: auto;
    pointer-events: none;
    z-index: 10000;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.6) rotate(0deg);
    animation: roseBurstRise 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes roseBurstRise {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(0, 0) scale(0.6) rotate(0deg);
    }
    5% {
        /* 一瞬で巨大化しつつ、移動も少し始める */
        opacity: 1;
        transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.05), calc(var(--ty) * 0.05)) scale(var(--burst-scale)) rotate(0deg);
    }
    80% {
        /* 巨大化したサイズを保ったまま、散らばる位置まで移動完了 */
        opacity: 1;
        transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(var(--burst-scale)) rotate(var(--rot));
    }
    100% {
        /* サイズはそのまま、最後だけフェードアウト */
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(var(--burst-scale)) rotate(var(--rot));
    }
}

/* ==========================================================================
   Candle Settings（点火の完全連動化）
   ========================================================================== */
.candle-wrapper {
    position: relative;
    width: 100px;
    height: auto;
    display: inline-block;
    align-self: center;
}
@media screen and (max-width: 767px) {
    .candle-wrapper {
        width: 45px !important;
    }
}
.candle-base {
    width: 100%;
    height: auto;
    display: block;
}

/* 初期状態では炎を隠す */
.candle-fire {
    position: absolute;
    top: -22px;     /* キャンドルの芯の真上にじわっと灯るよう配置微調整 */
    left: 50%;
    transform: translateX(-50%) scale(0); /* 初期状態はサイズ0（非表示） */
    width: 150%;
    height: auto;
    opacity: 0;
    mix-blend-mode: screen; 
    transition: opacity 1.2s ease-in-out; 
    pointer-events: none;
    /* 0.5秒かけてふわっと大きく、不透明になる */
     transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}


/* タイピング終了コールバック（ignitedクラス）に100%反応させる */
#candle-trigger-wrap.is-lit .candle-fire {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1); /* 巨大化させず、元のサイズで表示 */
    z-index: 10;
    /* 点火した後にその場でゆらゆら揺れるアニメーションをループ再生 */
    animation: candleWobble 2.5s ease-in-out infinite; 
}
/* 炎がその場でゆらゆら揺れるキーフレーム設定 */
@keyframes candleWobble {
  0% {
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
  50% {
    transform: translateX(-48%) scale(1.02) rotate(2deg); /* わずかに右に傾いて拡大 */
  }
  100% {
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
}


/* ==========================================================================
   Ambient BG Star Settings
   ========================================================================== */
.ambient-bg-star {
    position: fixed; 
    width: 33vw;     
    height: auto;
    pointer-events: none; 
    z-index: -1;     
    opacity: 0;      
    transform: translate(-50%, -50%) scale(0.9) rotate(-10deg);
    animation: ambient-fade-in-out 4s ease-in-out forwards; 
}

@keyframes ambient-fade-in-out {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9) rotate(-10deg);
    }
    40% {
        opacity: 0.3; 
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    60% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.05) rotate(10deg);
    }
}
/* ==========================================================================
   ③ 締めくくりメッセージの「1秒間」きらっと輝くエフェクト
   ========================================================================== */
/* HTML内の .closing-message-zone 内にある文字（pc-only, sp-only両方に対応） */
.closing-message-zone h2 span {
    display: inline-block;
    position: relative;
    color: #6b5649; /* 元のココアブラウン（仮）の文字色 */
    
    /* 文字自体にグラデーションを仕込む（文字色 → きらっとした金・白光 → 文字色） */
    background: linear-gradient(
        110deg, 
        #6b5649 35%, 
        #fff7a3 50%, 
        #6b5649 65%
    );
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    transition: color 0.5s;
}

/* JSによって画面中央に達した（.is-shine がついた）瞬間、1秒間で光が左から右へ走り抜ける */
.closing-message-zone h2 span.is-shine {
    animation: textShineOneSecond 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes textShineOneSecond {
    0% {
        background-position: 100% 0;
        -webkit-text-fill-color: transparent;
    }
    100% {
        background-position: -100% 0;
        -webkit-text-fill-color: transparent; /* 光が通り過ぎた後、元の色に自然に戻る */
    }
}


/* ==========================================================================
   ④ 🌹 白いバラのカーテン ＆ 🧚 中央ホバリング妖精ステージ（構造修正版）
   ========================================================================= */
#rose-curtain-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;           /* どの要素よりも最前面に配置 */
    background-color: #c7d4df; /* 背景色で画面を完全に覆う */
    pointer-events: auto;      /* 最初のタップを確実に奪う */
    overflow: hidden;
    transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;
} /* 👈 ここで綺麗に閉じます */

/* 画面一面に敷き詰められる個々の白いバラ */
.single-curtain-rose {
    position: absolute;
    width: 80px;               /* 小さなバラのサイズ */
    height: auto;
    object-fit: contain;
    opacity: 1;
    user-select: none;
    -webkit-user-drag: none;
}

/* タップされた時に、各バラにランダム速度のパラメータを持って上昇させる */
.single-curtain-rose.climb-up {
    animation: roseAscent var(--rose-speed, 2s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes roseAscent {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    100% {
        transform: translateY(-135vh) rotate(var(--rose-rot, 360deg)); /* 画面上方の外へ完全にフレームアウト */
        opacity: 0;
    }
}

/* タップされてバラが飛び散った後、ステージ自体を消去するクラス */
#rose-curtain-layer.curtain-gone {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 🧚 カーテンの最前面でホバリングする専用の妖精 */
.curtain-center-fairy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 画面のど真ん中に固定 */
    width: 140px;                     /* 妖精のサイズ */
    height: auto;
    z-index: 1000000;                 /* カーテン背景（999999）よりも手前 */
    pointer-events: none;             /* タップは後ろのカーテン層に透過させる */
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.15));
    
    /* その場で心地よくふわふわホバリング（3.5秒周期で無限ループ） */
    animation: curtainFairyHover 3.5s ease-in-out infinite;
    
    /* 消えるときの滑らかな演出用設定 */
    transition: opacity 1.0s ease-in-out;
}

/* 🧚 カーテンの妖精専用・ホバリングの定義 */
@keyframes curtainFairyHover {
    0% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(12px); } /* 心地よく沈み込む */
    100% { transform: translate(-50%, -50%) translateY(0px); }
}

/* 🎬 タップされてカーテンが消える（curtain-gone）ときの妖精の同調 */
#rose-curtain-layer.curtain-gone .curtain-center-fairy {
    opacity: 0; /* バラと一緒にスーッと透明になって消えます */
}

/* ==========================================================================
   PC・スマホの文字出し分け（2重表示の完全防止ルール）
   ========================================================================== */

/* 1. まず、標準状態（スマホ画面）のルール */
.pc-only {
    display: none !important; /* スマホではPC用の文字を完全に消す */
}
.sp-only {
    display: inline-block !important; /* スマホではスマホ用を表示 */
}

/* 2. 画面の横幅が「768px以上」（PCやタブレット画面）になった時のルール */
@media screen and (min-width: 768px) {
    .pc-only {
        display: inline-block !important; /* PCではPC用の文字を表示する */
    }
    .sp-only {
        display: none !important; /* PCではスマホ用の文字を完全に消す */
    }
}

/* ==========================================================================
   ⑤ 🌟 背景の六芒星（rokubousei.webp）花火風スタイル（階層調整版）
   ========================================================================== */
.firework-hex {
    position: absolute;
    /* 【重要】カードの背景やboxより上、テキストより下に挟み込むための階層設定 */
    z-index: 5;          
    pointer-events: none; /* タップや操作の邪魔を絶対にしない */
    height: auto;
    opacity: 0;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.25));
    
    animation-name: hexFireworkTimeline;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

/* 「花火のように、少し早くふわっと現れ、ピークを保ち、ゆっくり消える」タイムライン */
@keyframes hexFireworkTimeline {
    0% {
        opacity: 0;
        transform: scale(0.7) rotate(var(--initial-rot)); /* 最初は少し小さめからスタート */
    }
    25% {
        opacity: 0.35; /* 25%の時間で、あの美しい「うっすらとした透け具合」まで一気に浮上 */
        transform: scale(1) rotate(var(--initial-rot));    /* ふわっと元の大きさに広がる（開花） */
    }
    65% {
        opacity: 0.35; /* そのままの透け具合をキープしながら、ゆっくりと回転 */
    }
    100% {
        opacity: 0;    /* 最後は回転しながら、夜空に溶けるように消えていく */
        transform: scale(1.05) rotate(var(--final-rot));  /* ほんの少しだけ余韻で広がりながら消滅 */
    }
}



/* ==========================================================================
   📱 スマホ版・背景画像を大きくする設定（全方位カバー版）
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* 装飾用の背景お花エリアを少し大きく見せる演出 */
    .flower-background-stage {
        transform: scale(1.3); 
        transform-origin: center center;
    }
}