/* 基本設定 */
* {
    box-sizing: border-box;
}

body {
    font-family: "Shippori Mincho", serif;
    margin: 0;
    line-height: 1.8;
    color: #2E2E3A;

    /* 画像が表示されない場合の背景色を指定 */
    background-color: #0e1534;

    /* コンテンツが長くなった時にスクロールできるよう高さを確保 */
    min-height: 100vh;
    
    position: relative;
    z-index: 1;
}

/* iPhoneの background-attachment: fixed 対策 */
body::before {
    content: ""; /* 疑似要素には必須 */
    position: fixed; /* 要素自体をビューポートに固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* body のコンテンツ（mainタグなど）より背面に配置 */

    background-image: url('../images/background_picture.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

h1, h2, h3 {
    font-family: "Shippori Mincho", serif;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: #007bff;
}

a:hover {
    text-decoration: underline;
}

/* ヘッダー */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background-color: #0e1534;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 0;
    margin-bottom: 0;
    width: 100%;
    z-index: 1000;
}

.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-logo img {
    display: flex;
    height: 40px; 
    max-width: 100%;
    display: block;
}

.header-right {
    display: flex;
    align-items: center;
}

.social-links a {
    margin-left: 15px;
}

.social-links img {
    width: 28px;
    height: 28px;
    color: #fff;
    transition: opacity 0.3s ease;
}

.social-links img:hover {
    opacity: 0.7;
}

/* ハンバーガーメニュー */
.hamburger {
    display: none; /* 非表示 */
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin-left: 20px;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* ナビゲーション */
.nav {
    display: block;
}
.nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    background-color: #FFFAF0;
    position: fixed;
    top: 62px; /* ヘッダーの高さに合わせる */
    width: 100%;
    z-index: 999;
}

.nav li a {
    display: block;
    padding: 15px 20px;
    color: #333;
    font-weight: 700;
    transition: background-color 0.3s;
}

.nav li a:hover {
    background-color: #555;
    text-decoration: none;
}

/* 目次をきれいにする */
#top, #story, #cast, #information, #comment,  #ticket, #contact{
    scroll-margin-top: 180px; /* ヘッダーの高さに合わせる */
  }

/* 目次のリンクを踏んだ時にきれいに表示させる */
main {
    padding-top: 120px; /* 固定ヘッダーとナビゲーション分 */
}

.content-section {
    max-width: 800px;
    margin: 0 auto 60px auto;
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    position: relative; /* ::before擬似要素の基準点にする */
    overflow: hidden;   /* はみ出した要素を隠す */
}

.content-section h2 {
    text-align: center;
    font-size: 2.5em;
    margin-top: 0;
    margin-bottom: 40px;
    color: #444;
}

/* 光の筋 */
.content-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    opacity: 0;
  }
  
  /* アニメーション定義 */
  @keyframes shine {
    0% {
      left: -70%;
      opacity: 0.3;
    }
    50% {
      opacity: 1;
    }
    100% {
      left: 120%;
      opacity: 0;
    }
  }
  
  /* 表示時にshineクラスを付与 */
  .content-section.show::before {
    animation: shine 1.2s ease forwards;
  }
  
  /* 見出しなど軽いフェードアップ効果も追加すると自然 */
  .content-section h2,
  .content-section h3,
  .content-section p {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
  }
  
  .content-section.show h2,
  .content-section.show h3,
  .content-section.show p {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}


/* ヒーローセクション */
.hero {
    position: relative; /* 子要素 (背景画像と中央画像) の位置決めの基準にする */
    width: 100%;
    height: 600px; /* ヒーローセクションの高さ。必要に応じて調整 */
    overflow: hidden; /* はみ出した要素を隠す */
    margin-bottom: 0px;
    text-indent: -9999px;
}

/* ヒーローセクションの背景画像 */
.hero-background-image {
    position: absolute; /* 親要素 (.hero-section) を基準に配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 背景画像がセクション全体を覆うように拡大・縮小 */
    z-index: 1; /* 他の要素より奥に表示 */
  }
  
  /* 中央に配置する画像のコンテナ */
  .hero-center-image-container {
    position: absolute; /* 親要素 (.hero-section) を基準に配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    display: flex; /* Flexboxを使って子要素を中央に配置 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    
    z-index: 2; /* 背景画像より手前に表示 */
  }
  
  /* 中央に配置する画像自体 */
  .hero-center-image {
    max-width: 70%; /* 親コンテナ (hero-center-image-container) の幅の80%まで */
    max-height: 70%; /* 親コンテナの高さの80%まで */
    width: auto; /* 縦横比を維持 */
    height: auto; /* 縦横比を維持 */
    display: block; /* 画像の下の余白を消す */
}

/* STORY, CAST, INFOなどなど */
.story-section {
    width:100%;
    margin: 0;
    padding: 10px;
    background-color: #333;
    margin-bottom: 60px;
}

/* アニメーションの初期状態 */
.fade-up-target h2 {
    font-size: 2.5em;
    color:white;
    text-align: center;

    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.fade-up-target p {
    font-size: 1em;
    color:white;
    text-align: center;
    padding: 10px;

    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;

    overflow-wrap: break-word;
    word-break: break-word;
}

/* is-visibleクラスが付与された時の状態（アニメーション実行後） */
.fade-up-target.is-visible h2,
.fade-up-target.is-visible p {
    opacity: 1;
    transform: translateY(0);
}

/* h2とpを少しずらして表示させる */
.fade-up-target.is-visible p {
    transition-delay: 0.2s; /* pタグのアニメーションを0.2秒遅らせる */
}


/* キャスト */
.cast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: center;
}

.member {
    border-radius: 10px;
    padding:10px;
}

.member h3 {
    margin-bottom: 5px;
    font-size: 1.2em;
}

.member p {
    margin-top: 0;
    font-size: 1em;
}

.member:hover {
    transform: translateY(-5px); /* 少し浮き上がる効果 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* オーバーレイのスタイル */
.overlay {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒い背景 */
    display: flex; /* Flexboxで中央揃え */
    justify-content: center;
    align-items: center;
    
    /* 初期状態は非表示 */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

/* オーバーレイが表示されるときのスタイル */
.overlay.active {
    visibility: visible;
    opacity: 1;
}

/* オーバーレイの中身のスタイル */
.overlay-content {
    background-color: #fff;
    padding: 0px;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;

    display: flex;
    align-items: center;
    overflow: hidden;
}

#overlay-image {
    width: 40%; /* コンテンツ幅の40%を画像エリアに */
    height: auto;
    object-fit: cover; /* 画像の比率を保ったままエリアを埋める */
    align-self: stretch; /* 画像の高さをコンテンツ全体に合わせる */
}

.overlay-text {
    padding: 30px; /* テキストの周りに余白を持たせる */
    width: 60%; /* 残りの60%をテキストエリアに */
}

.overlay-text h2 {
    margin-top: 0;
    font-size: 2em;
    color: #333;
}

#overlay-role {
    font-size: 1em;
    color: #555;
    line-height: 1.6;
    margin: 10px 0; /* 上下の余白を調整 */
}

/* 役者名のスタイル */
#overlay-actor {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    text-align: right;     /* 右寄せにする */
    margin-top: 20px;      /* 役の説明との間に余白を確保 */
    padding-right: 10px;   /* 少し右に余白 */
    border-top: 1px solid #eee; /* 上に区切り線を入れる */
    padding-top: 15px;
}

.overlay.active .overlay-content {
    transform: scale(1); /* 表示時に少し拡大するアニメーション */
}

/* 閉じるボタン */
.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 2em;
    cursor: pointer;
    color: #888;
    z-index: 10;
}

.close-btn:hover {
    color: #333;
}

.info-content h3 {
    border-bottom: 2px solid rgba(221, 203, 147, 0.9);
    padding-bottom: 10px;
    margin-top: 30px;
}

.info-content iframe {
    width: 100%;
    margin-top: 20px;
    border-radius: 8px;
}

.info-content p span {
    display: block;
    font-size: 0.9em;
    color: #444;
    margin-top: 10px;
}

#comment .comment-content {
    padding: 20px;
    margin: 20px 40px;
    text-align: center;
    border-radius: 8px;
    box-shadow:
    5px 5px 10px #4d4d4d
}

#comment h3{
    border-bottom: 2px solid rgba(221, 203, 147, 0.9);
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
}

#comment p{
    text-align: center;
    font-size: 0.9em;
}

#comment p span{
    display: block;
    text-align: center;
    margin-top: 15px;
    font-size: 0.9em;
    color: #444;
}

#ticket p {
    text-align: center;
    display: block;
}

#ticket p span {
    text-align: center;
    display: block;
    margin-top: 15px;
    font-size: 0.9em;
    color: #444;
}

.btn.ticket {
    display: block;
    width: 80%;
    max-width: 400px;
    margin: 30px auto 0;
    padding: 15px;
    background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 100%);
    color: white;
    text-align: center;
    border-radius: 5px;
    font-weight: 700;
    font-size: 1.1em;
    overflow: hidden;
    transition: background-color 0.3s;
}

/* 光の筋を作る */
.btn.ticket::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    transition: none;
  }
  
/* hoverで光が左→右へ走る */
.btn.ticket:hover::before {
   left: 125%;
   transition: left 0.7s ease;
}

/* hover時の軽い動きと装飾 */
.btn.ticket:hover {
    text-decoration: none;
    transform: translateY(-3px);
}

#contact p {
    text-align: center;
    display: block;
}

#contact p span {
    text-align: center;
    display: block;
    margin-top: 15px;
    font-size: 0.9em;
    color: #444;
}

/* フッター */
footer {
    background-color: #0e1534;
    color: white;
    text-align: center;
    padding: 40px 20px;
}

.sozo-content h2 {
    color: white;
}

.sozo-links {
    margin: 20px 0;
}

.sozo-links a {
    margin: 0 10px;
}

.social-icon {
    width: 32px;
    height: 32px;
}

/* 待機画面のスタイル */
#loading-screen {
    /* 画面全体を覆う設定 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999; 
    background-color: #6A0DAD; 

    /* ロゴを中央に配置 */
    display: flex;
    justify-content: center;
    align-items: center;

    /* JSで非表示にするための準備 */
    opacity: 1; 
    transition: opacity 0.5s ease-out; 

    overflow: hidden;
}

/* JSによって .hidden クラスが追加されたら非表示にする */
#loading-screen.hidden {
    opacity: 0; 
}


/* ロゴのコンテナ */
.logo-container {
    position: relative;
    /* overflow: hidden;    */
    z-index: 2;
}

/* ロゴ画像自体（サイズは適宜調整） */
.logo-container img {
    display: block; /* 画像下の余白を削除 */
    max-width: 600px;
    height: auto;
}

/* 「光」のエフェクト */
#loading-screen::after { /* ← セレクタ名を変更 */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;


    background-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 45%, /* 光の強さはお好みで調整 */
        rgba(255, 255, 255, 0.4) 55%,
        transparent 100%
    );

    background-size: 200% 100%;
    background-position: -200% 0;

    animation: shine_logo 4s infinite linear; 
}


/* 光が走るアニメーションの定義 */
@keyframes shine_logo {
    0% {
        background-position: -200% 0; 
    }
    100% {
        background-position: 200% 0;  
    }
}


/* レスポンシブ対応 (SP) */
@media (max-width: 768px) {
    .header {
        padding: 15px;
        max-width: 100%;
    }
    
    .nav {
        display: none; /* JSで表示を切り替える */
        position: fixed;
        top: 63px; /* ヘッダーの高さに合わせる */
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        z-index: 998;
    }
    
    .nav.is-active {
        display: block;
    }

    .nav ul {
        flex-direction: column;
        position: static;
        width: auto;
        background: none;
    }
    .nav li a {
        color: #333;
        padding: 15px;
        text-align: center;
        border-bottom: 1px solid #eee;
    }

    .nav li a:hover {
        background-color: #f0f0f0;
    }

    .hamburger {
        display: block; /* SP表示時のみ表示 */
    }
    
    .hamburger.is-active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.is-active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.is-active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    main {
        padding-top: 70px;
    }

    .content-section {
        padding: 20px;
    }

    .content-section.show::before {
        /* 例えば1.2秒から2.5秒に延ばす */
        animation: shine 2.5s ease forwards;
    }

    .hero {
        display: flex; 
        min-height: 100vh;
        height: auto;
    }
    
    /* ヒーローセクションの中央に配置した画像がある場合 */
    .hero-center-image {
        /* 画像が大きすぎないように調整 */
        max-width: 70%; 
    }

    .story-section{
        padding: 10px;
    }

    .overlay-content {
        /* SPでは縦積みに変更 */
        flex-direction: column;
        max-width: 90%;
    }

    #overlay-image {
        width: 100%; /* 横幅いっぱいに */
        max-height: 300px; /* 高くなりすぎないように制限 */
    }

    .overlay-text {
        width: 100%; /* 横幅いっぱいに */
        padding: 20px;
    }

    /* 【最終修正案】#castセクションのアニメーションを調整 */

    /* 1. #cast内のh2は、上下に動かさず「フェードインのみ」にする */
    #cast.content-section h2 {
        transform: none; /* 上下への移動を無効化 */
    }

    /* 2. #cast内のキャスト名(h3)と役者名(p)は、アニメーションを完全に無効化して常に表示する */
    #cast .member h3,
    #cast .member p {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .logo-container img {
        max-width: 280px;
    }

}