/* リセットとベース設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* クラブ風の背景色に変更 */
body {
    font-family: 'Yuji Syuku', serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition: background-color 1s ease;
}

body.theme-color-1 { 
    background-color: #0d0221 !important; 
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(100, 20, 140, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(20, 80, 140, 0.2) 0%, transparent 60%),
        linear-gradient(to bottom, #0d0221, #14062e) !important;
}

body.theme-color-2 { 
    background-color: #1a0b2e !important; 
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(120, 40, 160, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(40, 100, 160, 0.2) 0%, transparent 60%),
        linear-gradient(to bottom, #1a0b2e, #21103b) !important;
}

body.theme-color-3 { 
    background-color: #16213e !important; 
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(60, 100, 180, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(30, 70, 150, 0.2) 0%, transparent 60%),
        linear-gradient(to bottom, #16213e, #1e2d50) !important;
}

body.theme-color-4 { 
    background-color: #240046 !important; 
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(150, 50, 200, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(100, 30, 180, 0.2) 0%, transparent 60%),
        linear-gradient(to bottom, #240046, #2e0854) !important;
}

body.theme-color-5 { 
    background-color: #1b2430 !important; 
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(50, 100, 150, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(40, 80, 120, 0.2) 0%, transparent 60%),
        linear-gradient(to bottom, #1b2430, #243040) !important;
}

body.theme-color-6 { 
    background-color: #150e28 !important; 
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(80, 60, 160, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(60, 40, 140, 0.2) 0%, transparent 60%),
        linear-gradient(to bottom, #150e28, #1c1335) !important;
}

body.theme-color-7 { 
    background-color: #1f1d36 !important; 
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(100, 80, 160, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(70, 60, 140, 0.2) 0%, transparent 60%),
        linear-gradient(to bottom, #1f1d36, #282642) !important;
}

body.theme-color-8 { 
    background-color: #003151 !important; 
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(20, 100, 170, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(10, 80, 150, 0.2) 0%, transparent 60%),
        linear-gradient(to bottom, #003151, #003d64) !important;
}

body.theme-color-9 { 
    background-color: #1e0a3c !important; 
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(120, 40, 180, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(90, 30, 160, 0.2) 0%, transparent 60%),
        linear-gradient(to bottom, #1e0a3c, #2a0d50) !important;
}

body.theme-color-10 { 
    background-color: #15061f !important; 
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(80, 20, 120, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(60, 15, 100, 0.2) 0%, transparent 60%),
        linear-gradient(to bottom, #15061f, #1e092d) !important;
}

li {
    list-style: none;
}

/* Wonder カードのスタイル */
.wonder-card {
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;
  }
  
  .wonder-card:last-child {
    margin-bottom: 0;
  }
  
  .wonder-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #6d4c41;
    font-family: 'Yuji Syuku', serif;
    text-align: center;
    border-bottom: 2px dotted #6d4c41;
    padding-bottom: 8px;
  }
  
  .wonder-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
  }
  
  .wonder-tag {
    background: #ffffff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
  }
  
  /* カードごとの色 */
  .wonder-intro {
    background-color: #f8e8a0;
  }
  
  .wonder-festival {
    background-color: #ffe57f;
  }
  
  .wonder-studio {
    background-color: #ffd166;
  }
  
  .wonder-adventures {
    background-color: #f5cb5c;
  }
  
  .wonder-dialogue {
    background-color: #e9c46a;
  }
  
  /* 趣旨テキスト */
  .purpose-text {
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 0;
  }

  /* 舞台ページ用のスタイル */
.butai-image {
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    max-width: 50%;
    height: auto;
    margin-bottom: 25px;
  }
  
  .butai-section {
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
  }
  
  .butai-section:last-child {
    margin-bottom: 0;
  }
  
  .butai-section-history {
    background-color: rgba(255, 245, 200, 0.7);
  }
  
  .butai-section-modern {
    background-color: rgba(255, 230, 180, 0.7);
  }
  
  .butai-section-present {
    background-color: rgba(255, 210, 160, 0.7);
  }
  
  .butai-heading {
    font-family: 'Yuji Syuku', serif;
    margin-top: 0;
    margin-bottom: 10px;
    color: #6d4c41;
  }
  
  .butai-paragraph {
    margin-bottom: 20px;
    text-align: justify;
  }
  
  .butai-paragraph:last-child {
    margin-bottom: 0;
  }
  
  .butai-highlight {
    font-weight: bold;
  }

/* 会場ページ用のスタイル - スマホ表示の修正版 */
.venue-map {
    width: 100%;
    max-width: 50%;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    margin: 0 auto 30px;
    display: block;
  }
  
  .venue-container {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 20px;
  }
  
  .venue-item {
    flex: 1 1 calc(50% - 12.5px);
    min-width: 250px; /* 減らしました */
    max-width: 100%; /* 追加しました */
  }
  
  .venue-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #6d4c41;
    font-family: 'Yuji Syuku', serif;
    word-break: break-word; /* 追加しました */
  }
  
  .venue-image {
    width: 100%;
    max-width: 100%; /* 追加しました */
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    margin-bottom: 15px;
  }
  
  .venue-address {
    font-weight: bold;
    margin-bottom: 10px;
    word-break: break-word; /* 追加しました */
  }
  
  .venue-description {
    margin-bottom: 15px;
    word-wrap: break-word; /* 追加しました */
  }
  
  .venue-completion {
    text-align: right;
    font-style: italic;
    color: #666;
    font-size: 11px;
  }
  
  /* スマホ用のスタイル調整 - 強化版 */
  @media (max-width: 768px) {
    .venue-item {
      flex: 1 1 100%;
      min-width: auto; /* 最小幅を制限しない */
    }
    
    .venue-container {
      gap: 20px; /* ギャップを少し狭く */
      padding: 0 5px; /* 左右に少しパディングを追加 */
    }
    
    .venue-title {
      font-size: 1.2rem; /* スマホではフォントサイズを少し小さく */
    }
  }

/* 案内ページ用のスタイル - 地図サイズ修正版 */
.guide-map-container {
    position: relative;
    width: 100%;
    max-width: 600px; /* 最大幅を制限 */
    height: 0;
    padding-bottom: 56.25%; /* 16:9のアスペクト比 */
    margin: 0 auto 30px; /* 中央揃え */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  }
  
  .guide-map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  
  /* PCで縦横比を調整 */
  @media (min-width: 769px) {
    .guide-map-container {
      max-width: 500px; /* PCではさらに小さく */
      padding-bottom: 300px; /* 固定高さ */
      height: auto;
    }
  }
  
  /* スマホ対応 */
  @media (max-width: 768px) {
    .guide-map-container {
      width: 100%;
      max-width: 100%;
      padding-bottom: 75%; /* スマホではより縦長の比率に */
    }
  }

  
  .guide-transport-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 25px;
  }
  
  .guide-transport-item {
    flex: 1 1 calc(50% - 10px);
    min-width: 250px;
    display: flex;
    align-items: flex-start;
  }
  
  .guide-icon {
    font-size: 1.5rem;
    margin-right: 10px;
    flex-shrink: 0;
  }
  
  .guide-content {
    font-size: 1rem;
    line-height: 1.6;
  }
  
  .guide-label {
    font-weight: bold;
  }
  
  .guide-warning {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: bold;
    padding: 12px 15px;
    background-color: #fff3cd;
    border-radius: 6px;
    border-left: 4px solid #ffc107;
  }
  
  .guide-parking-title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .guide-parking-list {
    list-style-type: disc;
    padding-left: 20px;
    font-size: 1rem;
    line-height: 1.6;
  }
  
  .guide-parking-item {
    margin-bottom: 5px;
  }
  
  .guide-parking-item:last-child {
    margin-bottom: 0;
  }
  
  .guide-map-link {
    color: #0066cc;
    text-decoration: none;
    margin-left: 5px;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background-color: #e9f4ff;
    font-size: 0.9em;
  }
  
  .guide-map-link:hover {
    background-color: #d0e6ff;
    text-decoration: underline;
  }
  
  /* スマホ対応 */
  @media (max-width: 768px) {
    .guide-transport-item {
      flex: 1 1 100%;
    }
    
    .guide-icon {
      font-size: 1.3rem;
    }
    
    .guide-content {
      font-size: 0.95rem;
    }
    
    .guide-map-container {
      padding-bottom: 75%; /* スマホではより縦長の比率に */
    }
  }

  /* アトリエ八分目ページのスタイル */
.venue-detail {
    max-width: 100%;
  }
  
  .venue-image-container {
    margin-bottom: 20px;
    text-align: center;
  }
  
  .venue-detail-image {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  }
  
  .venue-description-container {
    background-color: rgba(255, 245, 200, 0.7);
    border-radius: 8px;
    padding: 20px;
  }
  
  .venue-description-text {
    margin-bottom: 15px;
    line-height: 1.7;
    font-size: 1rem;
  }
  
  .venue-description-date {
    text-align: right;
    font-style: italic;
    color: #666;
    margin-bottom: 0;
    font-size: 11px;
  }
  
  /* PC向けのレイアウト調整 */
  @media (min-width: 769px) {
    .venue-detail {
      display: flex;
      gap: 25px;
      align-items: flex-start;
    }
    
    .venue-image-container {
      flex: 0 0 45%;
      margin-bottom: 0;
    }
    
    .venue-description-container {
      flex: 1;
    }
  }

  /* 探検ページ用の追加スタイル */
.email-link {
    color: #0066cc;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  
  .email-link:hover {
    color: #004080;
    text-decoration: underline;
  }
  
  .contact-info {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed #ccc;
  }
  
  /* 探検ページの特別スタイル */
  .venue-description-container .venue-description-text {
    margin-bottom: 15px;
  }
  
  .venue-description-container .venue-description-text:last-child {
    margin-bottom: 0;
  }

  /* 募集ページ用のスタイル */
.recruitment-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .recruitment-intro {
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
  }
  
  .recruitment-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }
  
  .recruitment-button {
    padding: 16px 30px;
    background-color: #f8e8c4;
    border-radius: 5px;
    width: 200px;
    text-align: center;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .recruitment-button::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 200px;
    background: rgba(255, 255, 255, 0.5);
    transform: rotate(45deg);
    top: -50px;
    left: -100px;
    transition: all 0.5s ease;
  }
  
  .recruitment-button:hover {
    background-color: #ffe0a0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }
  
  .recruitment-button:hover::after {
    left: 120%;
  }
  
  @media (min-width: 768px) {
    .recruitment-buttons {
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
    }
  }

  /* 主催者ページ用のスタイル */
.organizer-container {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .organizer-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
  }
  
  .organizer-logo {
    margin-right: 15px;
    flex-shrink: 0;
  }
  
  .logo-image {
    width: 80px;
    height: auto;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .organizer-name {
    font-size: 1.4rem;
    margin: 0;
    font-family: 'Yuji Syuku', serif;
    color: #6d4c41;
  }
  
  .organizer-image-container {
    margin-bottom: 25px;
    text-align: center;
  }
  
  .organizer-main-image {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  }
  
  .organizer-content {
    background-color: rgba(255, 245, 200, 0.7);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
  }
  
  .organizer-text {
    margin-bottom: 15px;
    line-height: 1.7;
    font-size: 1rem;
  }
  
  .organizer-text:last-child {
    margin-bottom: 0;
  }
  
  .organizer-slogan {
    font-weight: bold;
    font-style: italic;
    color: #6d4c41;
  }
  
  .organizer-footer {
    background-color: rgba(235, 235, 235, 0.7);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
  }
  
  .organizer-info {
    margin: 5px 0;
    font-size: 0.9rem;
    color: #555;
  }
  
  @media (max-width: 768px) {
    .organizer-header {
      flex-direction: column;
      text-align: center;
    }
    
    .organizer-logo {
      margin-right: 0;
      margin-bottom: 10px;
    }
    
    .organizer-name {
      font-size: 1.3rem;
    }
  }

  /* Instagramリンク用のスタイル追加 */
.organizer-social {
    display: flex;
    align-items: center;
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    margin-top: 5px;
    transition: color 0.3s ease;
  }
  
  .organizer-social:hover {
    color: #c13584; /* Instagramブランドカラー */
  }
  
  .social-icon {
    margin-right: 5px;
    font-size: 1.1rem;
  }
  
  /* レスポンシブ調整 */
  @media (max-width: 768px) {
    .organizer-social {
      justify-content: center;
      margin-top: 8px;
    }
  }

  /* Keep Tsuyazaki Deep ページ用のスタイル */
.event-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
  }
  
  .event-image-container {
    margin-bottom: 30px;
    text-align: center;
  }
  
  .event-main-image {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.25);
  }
  
  .event-info-container {
    background: linear-gradient(to right, rgba(255, 230, 150, 0.7), rgba(255, 190, 120, 0.7));
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  
  .event-date-container {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed rgba(109, 76, 65, 0.3);
  }
  
  .event-date-main {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 0 5px 0;
    color: #6d4c41;
    font-family: 'Yuji Syuku', serif;
  }
  
  .event-date-sub {
    font-size: 1.1rem;
    margin: 0;
    color: #6d4c41;
  }
  
  .event-time-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
  
  .event-time-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .event-time-icon {
    font-size: 1.4rem;
  }
  
  .event-time-text {
    font-size: 1.1rem;
  }
  
  .event-time-link {
    background-color: rgba(255, 255, 255, 0.6);
    color: #0066cc;
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
  }
  
  .event-time-link:hover {
    background-color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
  }
  
  @media (min-width: 768px) {
    .event-time-container {
      flex-direction: row;
      justify-content: center;
      gap: 40px;
    }
  }

/* イベント詳細ページ用のスタイル - スマホ対応強化版 */
.event-details-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
  }
  
  .event-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(109, 76, 65, 0.3);
  }
  
  .event-name {
    font-family: 'Yuji Syuku', serif;
    font-size: 2rem;
    color: #6d4c41;
    margin: 0 0 5px 0;
    word-wrap: break-word;
  }
  
  .event-hashtag {
    font-size: 1rem;
    color: #0066cc;
    margin: 0;
  }
  
  .event-description {
    background-color: rgba(255, 245, 200, 0.7);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    text-align: center;
    word-wrap: break-word;
  }
  
  .event-description p {
    margin: 0 0 15px 0;
    line-height: 1.6;
  }
  
  .event-description p:last-child {
    margin-bottom: 0;
  }
  
  .event-recruitment {
    font-weight: bold;
    color: #b71c1c;
  }
  
  .event-website a {
    color: #0066cc;
    text-decoration: none;
    padding: 3px 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    transition: all 0.3s ease;
    display: inline-block;
    word-break: break-all;
  }
  
  .event-website a:hover {
    background-color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
  }
  
  .event-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }
  
  .event-info-item {
    background-color: rgba(255, 250, 230, 0.7);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    word-wrap: break-word;
  }
  
  .event-info-label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #6d4c41;
    padding-bottom: 5px;
    border-bottom: 1px dotted #ccc;
  }
  
  .event-info-value {
    line-height: 1.5;
  }
  
  .event-info-value a {
    color: #0066cc;
    text-decoration: none;
    word-break: break-all;
  }
  
  .event-info-value a:hover {
    text-decoration: underline;
  }
  
  .event-program {
    background-color: rgba(255, 240, 180, 0.7);
    border-radius: 8px;
    padding: 20px;
  }
  
  .event-program-title {
    text-align: center;
    font-family: 'Yuji Syuku', serif;
    color: #6d4c41;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px dashed #6d4c41;
  }
  
  .event-program-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }
  
  .event-program-item {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    padding: 15px;
    transition: transform 0.2s ease;
  }
  
  .event-program-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  .event-program-part {
    font-weight: bold;
    color: #b71c1c;
    margin-bottom: 5px;
  }
  
  .event-program-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
  }
  
  .event-program-description {
    font-size: 0.9rem;
    color: #555;
    word-wrap: break-word;
  }
  
  /* スマホ対応の強化 */
  @media (max-width: 768px) {
    .event-program-items {
      grid-template-columns: 1fr;
    }
    
    .event-info-grid {
      grid-template-columns: 1fr;
      gap: 15px;
    }
    
    .event-name {
      font-size: 1.5rem;
    }
    
    .event-description, 
    .event-info-item,
    .event-program {
      padding: 15px;
    }
    
    .event-program-name {
      font-size: 1rem;
    }
    
    .event-details-container {
      padding: 10px;
    }
    
    .event-program-description {
      font-size: 0.85rem;
    }
  }
  
  /* 特に小さいスマホ画面用 */
  @media (max-width: 375px) {
    .event-name {
      font-size: 1.3rem;
    }
    
    .event-info-label,
    .event-program-part {
      font-size: 0.9rem;
    }
    
    .event-info-value,
    .event-description p {
      font-size: 0.9rem;
    }
  }

/* 昔話風ローディング演出用のスタイル */
.storytelling-intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    z-index: 100;
    padding: 20px;
    transition: opacity 1s ease;
}

.storytelling-intro.fade-out {
    opacity: 0;
}

.storytelling-text {
    font-family: 'Yuji Syuku', serif;
    font-size: 2rem;
    color: #fff;
    text-align: center;
    margin: 20px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease, transform 1.5s ease;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    white-space: nowrap;
}

.storytelling-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 昔話風の装飾 */
.storytelling-text::before {
    content: "";
    margin-right: 5px;
    opacity: 0.7;
}

.storytelling-text::after {
    content: "";
    margin-left: 5px;
    opacity: 0.7;
}


/* 小さい画面用の調整 */
@media (max-width: 768px) {
    .storytelling-text {
        font-size: 1.5rem;
        white-space: normal;
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .storytelling-text {
        font-size: 1.2rem;
        margin: 15px 0;
    }
}

/* 紙芝居全体のコンテナ */
.kamishibai-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1500px;
    overflow: hidden; /* はみ出す要素を隠す */
}

/* 背景要素がコンテナからはみ出ないようにする */
.background-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* はみ出す要素を隠す */
    z-index: 1;
    pointer-events: none;
}

/* イラスト用のスタイル追加 */
.random-illustration {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

/* 雲とカブトガニのスタイルを削除または上書き */
.random-cloud, .cloud, .cloud-1, .cloud-2, .cloud-3,
.horseshoe-crab, .starfish, .random-bird, .bird, .bird-1, .bird-2, .bird-3 {
    display: none !important; /* 既存の要素を非表示に */
}

/* 雲などの背景要素の色を白色に変更 */
.cloud, .random-cloud {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.4;
    filter: brightness(1) contrast(0.9); /* フィルターを明るく */
}

.cloud-1, .cloud-2, .cloud-3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cpath fill='%23FFFFFF' d='M177.2,63.2c0-10.5-8.5-19-19-19c-0.2,0-0.3,0-0.5,0c-2.4-15.2-15.6-26.8-31.5-26.8c-15.1,0-27.9,10.6-31,24.8c-0.4,0-0.9-0.1-1.3-0.1c-14.3,0-25.9,11.6-25.9,25.9c0,14.3,11.6,25.9,25.9,25.9h63.4C169,94,177.2,85.8,177.2,63.2z'/%3E%3C/svg%3E");
}

.cloud-1 {
    top: 15%;
    left: -100px;
    width: 150px;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cpath fill='%23FFFFFF' d='M177.2,63.2c0-10.5-8.5-19-19-19c-0.2,0-0.3,0-0.5,0c-2.4-15.2-15.6-26.8-31.5-26.8c-15.1,0-27.9,10.6-31,24.8c-0.4,0-0.9-0.1-1.3-0.1c-14.3,0-25.9,11.6-25.9,25.9c0,14.3,11.6,25.9,25.9,25.9h63.4C169,94,177.2,85.8,177.2,63.2z'/%3E%3C/svg%3E");
    animation: moveRightToLeft 60s linear infinite;
    animation-delay: 0s;
}

.cloud-2 {
    top: 40%;
    left: -80px;
    width: 120px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cpath fill='%23FFFFFF' d='M177.2,63.2c0-10.5-8.5-19-19-19c-3.6,0-7,1-9.9,2.8c-4.3-5.7-11.1-9.4-18.8-9.4c-8.3,0-15.5,4.3-19.7,10.7c-1.3-0.3-2.7-0.4-4.1-0.4c-11.5,0-20.9,9.4-20.9,20.9c0,11.5,9.4,20.9,20.9,20.9h71.5c0.1,0,0.3,0,0.4,0c10.3-0.2,18.6-8.7,18.6-19C177.2,67.8,177.2,65.5,177.2,63.2z'/%3E%3C/svg%3E");
    animation: moveRightToLeft 40s linear infinite;
    animation-delay: 10s;
}

.cloud-3 {
    top: 70%;
    left: -120px;
    width: 180px;
    height: 90px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cpath fill='%23FFFFFF' d='M156.3,53.8c1.1-2.8,1.7-5.8,1.7-9c0-13.8-11.2-25-25-25c-10.8,0-20,6.8-23.5,16.4c-2.7-1.3-5.8-2-9-2c-11.6,0-21.1,9.5-21.1,21.1c0,1.4,0.1,2.7,0.4,4C68.3,62.6,59,74.1,59,87.8c0,17.7,14.3,32,32,32h84.8c13.8,0,25-11.2,25-25c0-12.3-9-22.5-20.7-24.6C178.4,63.3,171.2,53.3,156.3,53.8z'/%3E%3C/svg%3E");
    animation: moveRightToLeft 70s linear infinite;
    animation-delay: 5s;
}

/* 鳥を白色に変更 */
.bird, .random-bird {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    filter: brightness(1) contrast(0.9) blur(1px); /* フィルターを明るく */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30'%3E%3Cpath fill='%23FFFFFF' d='M10,15 C15,12 20,10 25,15 C30,10 35,12 40,15 C35,18 30,16 25,20 C20,16 15,18 10,15 Z'/%3E%3C/svg%3E");
}

.bird-1 {
    top: 25%;
    left: -40px;
    width: 60px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30'%3E%3Cpath fill='%23333333' d='M10,15 C15,12 20,10 25,15 C30,10 35,12 40,15 C35,18 30,16 25,20 C20,16 15,18 10,15 Z'/%3E%3C/svg%3E");
    animation: birdFly1 25s linear infinite;
    filter: brightness(0.8) sepia(0.2) blur(1px);
    opacity: 0.5;
}

.bird-2 {
    top: 35%;
    left: -40px;
    width: 60px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30'%3E%3Cpath fill='%23333333' d='M10,15 C15,12 20,10 25,15 C30,10 35,12 40,15 C35,18 30,16 25,20 C20,16 15,18 10,15 Z'/%3E%3C/svg%3E");
    animation: birdFly2 20s linear infinite;
    animation-delay: 3s;
    filter: brightness(0.8) sepia(0.2) blur(1px);
    opacity: 0.5;
}

.bird-3 {
    top: 15%;
    left: -40px;
    width: 60px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30'%3E%3Cpath fill='%23333333' d='M10,15 C15,12 20,10 25,15 C30,10 35,12 40,15 C35,18 30,16 25,20 C20,16 15,18 10,15 Z'/%3E%3C/svg%3E");
    animation: birdFly3 30s linear infinite;
    animation-delay: 7s;
    filter: brightness(0.8) sepia(0.2) blur(1px);
    opacity: 0.5;
}

/* ランダムな鳥のスタイル調整 */
.random-bird {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    transform-origin: center;
    width: 60px !important;
    height: 40px !important;
    opacity: 0.5 !important;
    filter: brightness(0.8) sepia(0.2) blur(1px);
}

/* ランダムな雲のスタイル */
.random-cloud {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.4;
    filter: brightness(0.7) sepia(0.3);
    pointer-events: none;
}

/* ランダムな水生動物のスタイル */
.random-animal {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

/* カブトガニの色を白色に変更 */
.horseshoe-crab {
    width: 60px !important;
    height: 40px !important;
    filter: brightness(1) contrast(0.9); /* フィルターを明るく */
    opacity: 0.6 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70'%3E%3Cpath fill='%23FFFFFF' d='M50,10 C30,10 15,25 15,35 C15,45 30,60 50,60 C70,60 85,45 85,35 C85,25 70,10 50,10 Z'/%3E%3Cpath fill='%23FAFAFA' d='M50,15 C35,15 20,25 20,35 S35,55 50,55 S80,45 80,35 S65,15 50,15 Z'/%3E%3Cpath fill='%23FFFFFF' d='M50,20 C47,25 45,30 45,35 C45,40 47,45 50,50 C53,45 55,40 55,35 C55,30 53,25 50,20 Z'/%3E%3Cpath stroke='%23FFFFFF' stroke-width='2' d='M15,35 L5,45 M15,35 L5,35 M15,35 L5,25 M85,35 L95,45 M85,35 L95,35 M85,35 L95,25'/%3E%3C/svg%3E");
}

/* ヒトデの色を白色に変更 */
.starfish {
    width: 40px !important;
    height: 40px !important;
    filter: brightness(1) contrast(0.9); /* フィルターを明るく */
    opacity: 0.6 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23FFFFFF' d='M50,15 L60,40 L85,40 L65,55 L75,80 L50,65 L25,80 L35,55 L15,40 L40,40 Z'/%3E%3C/svg%3E");
}

/* 追加のランダム要素スタイル */
.random-cloud, .random-bird, .random-animal {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    background-color: transparent;
}

/* 鳥や雲のアニメーション */
@keyframes moveRightToLeft {
    from { transform: translateX(0) rotate(0deg); }
    to { transform: translateX(calc(-100vw - 200px)) rotate(3deg); }
}

@keyframes moveLeftToRight {
    from { transform: translateX(0) rotate(0deg); }
    to { transform: translateX(calc(100vw + 200px)) rotate(-3deg); }
}

@keyframes birdFly1 {
    0% {
        transform: translateX(0) translateY(0);
    }
    20% {
        transform: translateX(20vw) translateY(-30px);
    }
    40% {
        transform: translateX(40vw) translateY(20px);
    }
    60% {
        transform: translateX(60vw) translateY(-10px);
    }
    80% {
        transform: translateX(80vw) translateY(15px);
    }
    100% {
        transform: translateX(100vw) translateY(0);
    }
}

@keyframes birdFly2 {
    0% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(25vw) translateY(20px);
    }
    50% {
        transform: translateX(50vw) translateY(-15px);
    }
    75% {
        transform: translateX(75vw) translateY(10px);
    }
    100% {
        transform: translateX(100vw) translateY(0);
    }
}

@keyframes birdFly3 {
    0% {
        transform: translateX(0) translateY(0);
    }
    30% {
        transform: translateX(30vw) translateY(-25px);
    }
    60% {
        transform: translateX(60vw) translateY(15px);
    }
    100% {
        transform: translateX(100vw) translateY(-10px);
    }
}

@keyframes birdWingFlap {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.7); /* より大きな羽ばたき効果 */
    }
}

@keyframes crabMove {
    from { left: -100px; }
    to { left: calc(100vw + 100px); }
}

@keyframes crabMoveReverse {
    from { left: calc(100vw + 100px); }
    to { left: -100px; }
}

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

/* 紙芝居フレーム */
.kamishibai-frame {
    position: relative;
    width: 98%;
    height: 98%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-style: preserve-3d;
    z-index: 2;
    animation: frameAppear 1s ease-out forwards;
}

/* 上部のアーチ形状 */
.frame-top-arch {
    position: relative;
    width: 90%;
    height: 110px;
    background: #7d5a42;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    margin-bottom: -1px;
    z-index: 3;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    /* 木目調のテクスチャ */
    background-image: 
        linear-gradient(90deg, 
            rgba(125, 90, 66, 0.8) 0%, 
            rgba(125, 90, 66, 1) 50%, 
            rgba(125, 90, 66, 0.8) 100%),
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='1' result='noise' /%3E%3CfeColorMatrix type='saturate' values='0' /%3E%3CfeBlend in='SourceGraphic' in2='noise' mode='multiply' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' /%3E%3C/svg%3E");
}

/* ゴールドラインのより洗練されたデザイン */
.gold-line {
    position: absolute;
    bottom: 5px;
    left: 10%;
    width: 80%;
    height: 3px;
    background: linear-gradient(90deg, 
        rgba(184, 134, 11, 0.1) 0%, 
        rgba(218, 165, 32, 0.9) 30%, 
        rgba(255, 215, 0, 0.9) 50%,
        rgba(218, 165, 32, 0.9) 70%,
        rgba(184, 134, 11, 0.1) 100%);
    z-index: 4;
}

/* メイン画面エリア */
.main-stage {
    position: relative;
    width: 90%;
    height: calc(100% - 90px);
    background: #7d5a42;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    z-index: 2;
    /* 木目調のテクスチャ */
    background-image: 
        linear-gradient(90deg, 
            rgba(125, 90, 66, 0.8) 0%, 
            rgba(125, 90, 66, 1) 50%, 
            rgba(125, 90, 66, 0.8) 100%),
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='1' result='noise' /%3E%3CfeColorMatrix type='saturate' values='0' /%3E%3CfeBlend in='SourceGraphic' in2='noise' mode='multiply' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' /%3E%3C/svg%3E");
}

/* 中央の表示スクリーン - 黄色の背景 */
.screen {
    position: relative;
    flex: 1;
    margin: 15px;
    background: rgb(243, 237, 102);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 5px solid #5d4333;
}

/* 和紙テクスチャ */
.washi-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='paper' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='3' result='noise'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.1'/%3E%3CfeFuncG type='linear' slope='0.1'/%3E%3CfeFuncB type='linear' slope='0.1'/%3E%3C/feComponentTransfer%3E%3CfeBlend in='SourceGraphic' in2='noise' mode='screen'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='0.2'/%3E%3C/svg%3E");
    background-blend-mode: soft-light;
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}

/* 左の扉 */
.door-left {
    position: absolute;
    top: 0;
    left: -20%;
    width: 20%;
    height: 100%;
    background: #7d5a42;
    transform-origin: right center;
    transition: transform 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    /* 木目調のテクスチャ */
    background-image: 
        linear-gradient(90deg, 
            rgba(125, 90, 66, 0.8) 0%, 
            rgba(125, 90, 66, 1) 50%, 
            rgba(125, 90, 66, 0.8) 100%),
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='1' result='noise' /%3E%3CfeColorMatrix type='saturate' values='0' /%3E%3CfeBlend in='SourceGraphic' in2='noise' mode='multiply' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' /%3E%3C/svg%3E");
}

/* 右の扉 */
.door-right {
    position: absolute;
    top: 0;
    right: -20%;
    width: 20%;
    height: 100%;
    background: #7d5a42;
    transform-origin: left center;
    transition: transform 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    /* 木目調のテクスチャ */
    background-image: 
        linear-gradient(90deg, 
            rgba(125, 90, 66, 0.8) 0%, 
            rgba(125, 90, 66, 1) 50%, 
            rgba(125, 90, 66, 0.8) 100%),
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='1' result='noise' /%3E%3CfeColorMatrix type='saturate' values='0' /%3E%3CfeBlend in='SourceGraphic' in2='noise' mode='multiply' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' /%3E%3C/svg%3E");
}

/* 扉のパターン */
.door-pattern {
    position: absolute;
    top: 15px;
    bottom: 15px;
    width: 90%;
    border-radius: 5px;
    opacity: 0.2;
    background-image: linear-gradient(0deg, 
        transparent 0%, 
        rgba(255,255,255,0.1) 50%, 
        transparent 100%);
}

.door-left .door-pattern {
    right: 5px;
}

.door-right .door-pattern {
    left: 5px;
}

/* 扉の開閉状態 */
.door-left.open {
    transform: rotateY(-110deg);
}

.door-right.open {
    transform: rotateY(110deg);
}

/* 扉が閉じている時のシェイクアニメーション */
.door-left:not(.open) {
    animation: doorShake 1.5s ease-in-out infinite;
    transform-origin: right center;
}

.door-right:not(.open) {
    animation: doorShake 1.5s ease-in-out infinite;
    animation-delay: 0.2s;
    transform-origin: left center;
}

/* ページコンテナ */
.page-container {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1000px;
}

/* 個別のページ */

#page-0 {
    padding: 0 !important;
}

.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(243, 237, 102);
    overflow-y: auto;
    padding: 30px;
    display: none;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: translateZ(0);
}

.page.active {
    display: block;
    z-index: 1;
}

/* スクロールバーのカスタマイズ */
.page::-webkit-scrollbar {
    width: 6px;
}

.page::-webkit-scrollbar-track {
    background: rgba(125, 90, 66, 0.1);
    border-radius: 3px;
}

.page::-webkit-scrollbar-thumb {
    background: rgba(125, 90, 66, 0.3);
    border-radius: 3px;
}

/* ページのコンテンツスタイル - レスポンシブ対応版 */
.page-content {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 0 50px;
  box-sizing: border-box;
}

/* スマホサイズでの余白調整 */
@media (max-width: 768px) {
  .page-content {
      padding: 0 30px;
  }
}

/* スマホサイズでの余白調整 */
@media (max-width: 480px) {
  .page-content {
      padding: 0 3px;
  }
}



.page-title {
    font-size: 2.8rem;
    color: #d81b60;
    margin-bottom: 30px;
    font-weight: 700;
    font-family: 'Yuji Syuku', serif;
}

.page-text {
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: left;
    margin-bottom: 25px;
    font-family: 'Yuji Syuku', serif;
    color: #333;
}

.page-image {
    max-width: 100%;
    max-height: 50vh;
    margin-bottom: 25px;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 手のスタイルをアナログな矢印に変更 */
.hand {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    z-index: 20;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent; /* 背景を透明に */
    border-radius: 0;
    box-shadow: none; /* 影を削除 */
    background-image: none; /* 古い手の画像を消去 */
}

/* 左右の矢印スタイルを共通化 - アナログ風に */
.hand::after {
    font-size: 4rem; /* 大きくする */
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(150, 50, 255, 0.7); /* シャドウを強化 */
    font-family: 'Yuji Syuku', serif; /* 和風フォントを使用 */
    font-weight: bold;
}




/* レスポンシブ対応 */
@media (max-width: 1200px) {
    .hand::after {
        font-size: 3.5rem;
    }
}

@media (max-width: 768px) {
    .hand::after {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .hand::after {
        font-size: 2.5rem;
    }
}

/* 縦長の画面向け調整 */
@media (max-aspect-ratio: 3/4) {
    .hand.left {
        left: 10px;
    }
    
    .hand.right {
        right: 10px;
    }
}

/* ページ遷移アニメーション */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.fade-in {
    animation: fadeIn 0.5s forwards;
}

.fade-out {
    animation: fadeOut 0.5s forwards;
}

/* 紙芝居のローディングアニメーション */
@keyframes doorShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-0.5deg); }
    75% { transform: rotate(0.5deg); }
}

/* ドアが開いた後に紙芝居全体が少し揺れるアニメーション */
@keyframes frameAppear {
    0% { transform: scale(0.95); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* ページ切り替えアニメーションの改良 */
.slide-in-right {
    animation: improvedSlideInFromRight 0.5s forwards;
}

@keyframes improvedSlideInFromRight {
    from { 
        transform: translateX(30px) translateZ(0); 
        opacity: 0; 
    }
    to { 
        transform: translateX(0) translateZ(0); 
        opacity: 1; 
    }
}

@keyframes slideOutToLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-30px); opacity: 0; }
}

.slide-out-left {
    animation: slideOutToLeft 0.5s forwards;
}


/* スマホ対応：サイズを調整 */
@media (max-width: 768px) {
    .kamishibai-frame {
        width: 95%;
        height: 90%;
    }
    
    .frame-top-arch {
        width: 90%;
        height: 80px;
    }
    
    .main-stage {
        height: calc(100% - 70px);
        width: 100%;
    }
    
    .screen {
        margin: 10px;
    }
}

/* 超小型画面対応 */
@media (max-width: 320px) {
    .kamishibai-frame {
        width: 98%;
        height: 85%;
    }
    
    .frame-top-arch {
        height: 60px;
    }
    
    .main-stage {
        height: calc(100% - 50px);
    }
}

/* ドットナビゲーションを非常にスタイリッシュに修正 */
.dot-navigation {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 5px; /* 間隔をより狭く */
    z-index: 5;
    max-width: 50%; /* 幅をより狭く */
    margin-left: auto;
    margin-right: auto;
    padding: 4px 8px; /* パディングをより小さく */
    background-color: rgba(0, 0, 0, 0.7); /* 背景をより暗く */
    border-radius: 15px;
    backdrop-filter: blur(5px); /* ブラー効果を強く */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 10px rgba(100, 0, 150, 0.2); /* クラブ風の光沢 */
}

.dot {
    width: 5px; /* より小さいドット */
    height: 5px;
    background-color: rgba(255, 255, 255, 0.2); /* 非アクティブはより暗く */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background-color: rgba(255, 255, 255, 1); /* アクティブはより明るく */
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 15px rgba(150, 50, 255, 0.5); /* より強い光る効果、紫の光沢を追加 */
}

/* 上部に固定配置した静止ミラーボール */
.mirror-ball {
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    z-index: 100;
    background-color: #888;
    background-image: 
        linear-gradient(45deg, 
            #888 0%, #888 10%, 
            #ccc 10%, #ccc 20%, 
            #888 20%, #888 30%, 
            #ccc 30%, #ccc 40%, 
            #888 40%, #888 50%, 
            #ccc 50%, #ccc 60%, 
            #888 60%, #888 70%, 
            #ccc 70%, #ccc 80%, 
            #888 80%, #888 90%, 
            #ccc 90%, #ccc 100%),
        linear-gradient(-45deg, 
            #888 0%, #888 10%, 
            #ddd 10%, #ddd 20%, 
            #888 20%, #888 30%, 
            #ddd 30%, #ddd 40%, 
            #888 40%, #888 50%, 
            #ddd 50%, #ddd 60%, 
            #888 60%, #888 70%, 
            #ddd 70%, #ddd 80%, 
            #888 80%, #888 90%, 
            #ddd 90%, #ddd 100%);
    background-size: 20px 20px;
    box-shadow: 
        0 0 20px rgba(255,255,255,0.7),
        0 0 40px rgba(200,200,200,0.3),
        inset 0 0 20px rgba(255,255,255,0.4);
}

/* ミラーボールの吊り下げ部分 */
.mirror-ball::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 20px;
    background: #888;
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/* 鏡の断片の反射効果 */
.mirror-ball::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9) 0%, transparent 15%),
        radial-gradient(circle at 70% 20%, rgba(255,255,255,0.7) 0%, transparent 12%),
        radial-gradient(circle at 20% 60%, rgba(255,255,255,0.8) 0%, transparent 15%),
        radial-gradient(circle at 60% 80%, rgba(255,255,255,0.6) 0%, transparent 10%);
    filter: blur(1px);
}

/* 1枚目のページ - 全画面表示 */
.page:first-child .page-content {
    padding: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
}

.page:first-child img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/* レスポンシブ調整 */
@media (max-width: 1200px) {

    
    .hand.left {
        left: -80px;
        width: 120px;
        height: 120px;
    }
    
    .hand.right {
        right: -80px;
        width: 120px;
        height: 120px;
    }
    
    .hand.left::after, .hand.right::after {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .hand {
        width: 40px;
        height: 40px;
    }
    
    .hand::after {
        font-size: 1.5rem;
    }
    
    .mirror-ball {
        width: 80px;
        height: 80px;
    }
    

}

@media (max-width: 480px) {
    .kamishibai-frame {
        height: 85%;
        width: 100%;
    }

    .venue-map {
        max-width: 100%;
    }

    .butai-image {
        max-width: 100%;
    }
    
    .hand {
        width: 40px;
        height: 40px;
    }
    
    .hand::after {
        font-size: 1.5rem;
    }
    
    .frame-top-arch {
        height: 80px;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .page-text {
        font-size: 0.9rem;
    }
    
    .dot-navigation {
        gap: 4px;
    }
    
    .dot {
        width: 4px;
        height: 4px;
    }
    

    
    .mirror-ball {
        top: 15px;
        width: 80px;
        height: 80px;
    }
}

/* タッチデバイス専用の調整 */
@media (hover: none) and (pointer: coarse) {
    .hand.left, .hand.right {
        opacity: 0.9;
    }
    
    .hand.left:active, .hand.right:active {
        opacity: 1;
    }
    
    .hand.left {
        left: -10px;
    }
    
    .hand.right {
        right: -10px;
    }
}

/* 縦長の画面向け調整 */
@media (max-aspect-ratio: 3/4) {
    .kamishibai-frame {
        height: 100%;
    }
    
    .frame-top-arch {
        height: 70px;
    }
    
    .page-content {
        padding-bottom: 60px;
    }
    
    .hand.left {
        left: 0;
    }
    
    .hand.right {
        right: 0;
    }
}



/* スマホ用のロゴ対応 */
.fullscreen-image {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
  
  /* デフォルトはPC用ロゴを表示 */
  .sp-logo {
    display: none;
  }
  
  .pc-logo {
    display: block;
  }
  
  /* スマホ用の表示切り替え */
  @media (max-width: 768px) {
    .sp-logo {
        display: block;
        width: 100%;
        height: 100%;  /* 高さを100%に */
      }
      
      .sp-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 重要: カバーモードで表示 */
        object-position: center; /* 中央に配置 */
      }
      
      /* 紙芝居の枠内でのページサイズを調整 */
      .page:first-child {
        height: 100%;
        padding: 0;
      }
      
      .page:first-child .page-content {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      
      /* 紙芝居のコンテナ自体のpadding調整 */
      .kamishibai-container {
        padding: 0;

      }
      
      /* もし親コンテナが固定高さなら */
      .screen {
        padding: 0;
      }

    .pc-logo {
      display: none;
    }
    
    /* 紙芝居のページがロゴ表示時に適切に配置されるよう調整 */
    .page:first-child .page-content {
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
  }

  @media (max-width: 768px) {
    .page:first-child .page-content {
      padding: 0;
      margin: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .page:first-child img {
      width: 100%;
      height: auto;
      object-fit: contain;
      max-height: 100%;
    }
    
    /* 紙芝居のサイズを調整 */
    .kamishibai-container {
      height: 100vh;
      max-height: -webkit-fill-available;
      padding: 0;
    }
    
    /* スクリーン領域の調整 */
    .screen {
      height: 100%;
      padding: 0;
    }
    
    /* ページ自体のサイズ調整 */
    .page {
      height: 100%;
    }
  }

  /* iPhone特有の問題に対処 */
@media (max-width: 430px) { /* iPhoneの一般的な最大幅 */
  .kamishibai-container {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .page:first-child img {
    max-height: 100%;
    width: auto;
    margin: 0 auto;
  }
}





/* 改良版：PC向けを優先したスクロールバースタイル */
.scroll-indicator-container {
  position: fixed;
  right: 20px; /* より右端に配置 */
  top: 80px; /* PCではより上方に配置 */
  height: 150px; /* PCでは大きめに */
  width: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
}

.scroll-indicator-text {
  display: none; /* テキストは非表示 */
}

.scroll-indicator {
  width: 8px;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.1); /* 半透明の背景 */
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1); /* 内側の微妙な影 */
}

.scroll-dot {
  width: 8px;
  height: 40px; /* つまみの高さ */
  background-color: #8A6D3B; /* 黄色背景に合う茶色がかった色 */
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
  animation: scrollThumbAnimation 3s infinite;
  box-shadow: 0 0 5px rgba(138, 109, 59, 0.5); /* 光る効果 */
}

@keyframes scrollThumbAnimation {
  0% {
    top: 0;
    opacity: 0.8;
  }
  50% {
    top: calc(100% - 40px); /* つまみの高さを考慮 */
    opacity: 1;
  }
  100% {
    top: 0;
    opacity: 0.8;
  }
}

/* スマホ対応 - 768px以下の場合 */
@media (max-width: 768px) {
  .scroll-indicator-container {
    right: 10px;
    top: 40px;
    height: 80px;
  }
  
  .scroll-indicator {
    width: 4px;
    height: 80px;
  }
  
  .scroll-dot {
    width: 4px;
    height: 20px;
  }
  
  @keyframes scrollThumbAnimation {
    0% {
      top: 0;
    }
    50% {
      top: calc(100% - 20px);
    }
    100% {
      top: 0;
    }
  }
}

/* 高さが低い画面への対応 */
@media (max-height: 500px) {
  .scroll-indicator-container {
    height: 80px;
    top: 30px;
  }
  
  .scroll-indicator {
    height: 80px;
  }
  
  .scroll-dot {
    height: 20px;
  }
  
  @keyframes scrollThumbAnimation {
    0% {
      top: 0;
    }
    50% {
      top: calc(100% - 20px);
    }
    100% {
      top: 0;
    }
  }
}