/* General reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}

body, html {
    height: 100%;
    font-family: "Roboto", sans-serif;
}

.font_italic{
    font-family: "Roboto", sans-serif;
    font-style: italic!important;
    font-weight: 100!important;
}

.main-visual img {
    width: 100%;
    height: 100%; /* Make the image fill the header area */
    object-fit: cover; /* Ensure the image covers the header area, cropping if necessary */
    display: block;
}

.new {
    background-color: #f4f4f4;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Prevent scrollbars on the section itself */
}

.new ul {
    list-style-type: none;
    max-height: 160px; /* Approximate height for 3 lines of text */
    overflow-y: auto; /* Adds vertical scroll if content exceeds max-height */
    width: 100%; /* Ensures full width of the section */
    padding: 0; /* Remove default padding */
}

.new li {
    padding: 0.5em 0; /* Adjust padding as needed */
    text-align: center;
}

/* mainタグ内のコンテンツのマージンを設定して、メニューバーと重ならないようにする */
main {
    margin-top: 44px; /* メニューバーの高さ分だけ上に余白を追加 */
}

/* メニューバーのスタイル */
.menu-bar {
    display: none; /* デスクトップ用メニューはデフォルトで非表示 */
}

.menu-bar nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-bar nav ul li {
    margin: 0 10px;
}

.menu-bar nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.menu-bar nav ul li a:hover {
    color: #ddd;
}

/* ハンバーガーメニューアイコンのスタイル */
.menu-icon {
    position: fixed;
    top: 10px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    z-index: 1001;
    text-align: center;
    width: 50px; /* アイコンの幅 */
    height: 50px; /* アイコンの高さ */
    background-color: rgba(200, 200, 200, 0.5); /* 薄いグレーの背景色 */
    border-radius: 50%; /* 丸い形にする */
    line-height: 50px; /* アイコンを垂直中央に揃えるための行の高さ */
    vertical-align: middle;
}

/* iOSデバイス用のスタイル */
/* safari */
_::-webkit-full-page-media, _:future, :root .menu-icon {
    line-height: 45px; /* アイコンを垂直中央に揃えるための行の高さ */
}

.menu-icon:hover {
    background-color: rgba(150, 150, 150, 0.7); /* ホバー時に少し濃くする */
}

/* サイドメニューが開いているときのハンバーガーメニューアイコンのスタイル */
.menu-icon.open {
    color: #fff; /* 白色に変更 */
    background-color: rgba(200, 200, 200, 0.5); /* 薄いグレーの背景色 */
    border-radius: 50%; /* 丸い形にする */
}

/* サイドメニューのスタイル */
.side-menu {
    position: fixed;
    top: 0;
    right: -250px; /* 初期状態は画面外に隠す */
    width: 250px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    transition: right 0.3s ease-in-out;
    z-index: 1000;
    padding-top: 60px;
    overflow-y: auto; /* サイドメニュー自体にスクロールを追加 */
}

.side-menu nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-left: 1rem;
}

.side-menu nav ul li {
    margin: 20px 0;
}

.side-menu nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}
.side-menu nav ul li a:hover {
    color: #b67c7c;
}

/* オーバーレイ */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 900;
    display: none;
}

/* サイドバーが表示されているときのスタイル */
.sidebar-open {
    right: 0;
}

.sidebar-overlay-active {
    display: block;
}

/* イントロ */
.synopsis-head{
    padding: 20px;
    background-color: #f4f4f4;
}
.synopsis {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5); /* 背景色を追加 */
}

.synopsis_backimage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.synopsis-content {
    position: relative;
    max-width: 800px;
    padding: 40px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    color: #fff; /* テキスト色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7); /* テキスト背景の影 */
    opacity: 0; /* 初期状態で非表示 */
    transition: opacity 3s ease-out; /* フェードインのトランジション */
    z-index:1;
}

.synopsis-content.show {
    opacity: 1; /* 表示状態 */
}

.synopsis-content p {
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* テキストのシャドウ */
}

/* キャスト・スタッフ */
footer {
    background-color: #333; /* 背景色 */
    color: #fff; /* テキストカラー */
    padding: 20px;
    text-align: center;
}

footer a {
    color: #ffcc00; /* リンクカラー */
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline; /* ホバー時のアンダーライン */
}

.footer-content{
    font-size:0.8rem;
}

.social-logo {
    vertical-align: middle; /* ロゴとテキストを縦方向に中央揃え */
    width: 18px; /* ロゴのサイズを調整 */
    height: auto;
}

.social-youtube-logo{
    vertical-align: middle; /* ロゴとテキストを縦方向に中央揃え */
    width: 100px; /* ロゴのサイズを調整 */
    height: auto;
}

.social-head{
    padding: 10px 0;
}

.border-top{
    border-top: 1px solid #fff;
}



/* スタッフセクションのスタイル */
.crew {
    padding: 20px;
    background-color: #f4f4f4; /* 薄いグレーの背景色 */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽いシャドウ */
}

/* スタッフメンバーのスタイル */
.staff-member {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #fff; /* 白い背景色 */
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 軽いシャドウ */
}

/* スタッフ名前のスタイル */
.staff-name {
    font-size: 18px;
    font-weight: bold;
    color: #444; /* ダークグレー */
    margin-bottom: 10px;
}

/* スタッフコメントのスタイル */
.staff-comment {
    font-size: 16px;
    line-height: 1.6;
    color: #666; /* 中間グレー */
}

/* キャラクターセクションのスタイル */
.characters {
    padding: 20px;
    background-color: #f4f4f4; /* 薄いグレーの背景色 */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽いシャドウ */
}

/* キャラクタータイトルのスタイル */
/* キャラクタータイトルのスタイル */
.section-title {
    width: 100%;
    font-size: 32px;
    font-weight: bold;
    color: #ff4081; /* 明るいピンク色 */
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #ff4081 0%, #ff80ab 100%); /* グラデーション背景 */
    -webkit-background-clip: text; /* テキストに背景をクリップ */
    color: transparent; /* テキスト色を透明に */
    border-radius: 8px;
    padding: 10px 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽いシャドウ */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* テキストにシャドウ */
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px; /* タイトル下部の位置調整 */
    height: 4px;
    background: #ff80ab; /* 下部のラインの色 */
    border-radius: 50%;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease; /* アニメーション */
}

.section-title:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* キャラクターカードのスタイル */
.character-card {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center; /* 中央揃え */
    margin-bottom: 20px;
    padding: 10px;
    background-color: #fff; /* 白い背景色 */
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 陰影を強める */
}

/* キャラクター画像のスタイル */
.character-image {
    margin-bottom: 10px; /* 画像とテキストの間のスペース */
    width: 100%; /* 画像の幅を100%に */
    height: auto; /* 高さは自動調整 */
}

/* キャラクター情報のスタイル */
.character-info {
    text-align: center;
}

/* キャラクター名前のスタイル */
.character-name {
    font-size: 18px;
    font-weight: bold;
    color: #444; /* ダークグレー */
    margin-bottom: 5px;
}

/* キャラクター役職のスタイル */
.character-role {
    font-size: 16px;
    color: #666; /* 中間グレー */
    margin-bottom: 10px;
}

/* キャラクターコメントのスタイル */
.character-comment {
    font-size: 16px;
    line-height: 1.6;
    color: #666; /* 中間グレー */
    text-align: left; /* テキストを左寄せ */
    max-width: 100%; /* テキストの幅を制限 (必要に応じて調整) */
}

/* スマートフォン用のメディアクエリ */
@media (max-width: 767px) {
    .character-card {
        padding: 15px;
    }

    .character-name {
        font-size: 16px;
    }

    .character-role, .character-comment {
        font-size: 14px;
    }

    .menu-bar {
        display: none; /* スマートフォンではデフォルトのメニューバーは非表示 */
    }

    .menu-icon {
        display: block; /* スマートフォンでハンバーガーメニューを表示 */
    }

    main {
        margin-top: 0;
    }

    .new li {
        text-align: left;
    }
    
}


/* メディアクエリ */
@media (max-width: 600px) {
    .synopsis {
        height: auto;
        min-height: 100vh; /* スマートフォンでの最小高さを確保 */
        padding: 20px; /* 内部余白を追加 */
    }

    .synopsis-content {
        padding: 20px; /* スマートフォン向けにパディング調整 */
    }

    .menu-bar {
        display: none; /* スマートフォンではデフォルトのメニューバーは非表示 */
    }

    .menu-icon {
        display: block; /* スマートフォンでハンバーガーメニューを表示 */
    }

    main {
        margin-top: 0;
    }
    
}

/* デスクトップ対応 */
@media (min-width: 601px) {
    .menu-icon {
        display: none; /* デスクトップではハンバーガーメニューを非表示 */
    }

    .menu-bar {
        display: block; /* デスクトップではメニューバーを表示 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        padding: 10px 20px;
        z-index: 1000;
    }

    main {
        margin-top: 44px; /* メニューバーの高さ分だけ余白を追加 */
    }
}