/* サイト全体の基本設定 */
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background-color: #f7f7f7; /* 目に優しい薄いグレーの背景 */
    color: #333333; /* 濃いグレーの文字色で読みやすく */
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* 画面の中央に配置し、幅を制限する枠 */
.container {
    max-width: 800px; /* パソコンで見ても横に広がりすぎないように制限 */
    margin: 0 auto;   /* 中央寄せ */
    padding: 0 20px;
}

/* ヘッダー（一番上の部分）のデザイン */
.site-header {
    background-color: #ffffff;
    border-bottom: 3px solid #cc0000; /* 東方らしさを少し出すための赤いライン */
    padding: 20px 0;
    margin-bottom: 30px;
}

.site-header h1 {
    margin: 0;
    font-size: 24px;
}

.site-header p {
    margin: 5px 0 0 0;
    font-size: 14px;
    color: #666666;
}

/* パンくずリスト（現在地ナビゲーション）のデザイン */
.breadcrumb {
    font-size: 13px;
    color: #666666;
    margin-top: 10px;
}

.breadcrumb a {
    color: #cc0000; /* 東方らしい赤色でリンクであることをアピール */
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline; /* マウスを乗せた時だけ下線を出す */
}

/* メインコンテンツ部分の背景を白くしてカードのように見せる */
.works-section {
    background-color: #ffffff;
    padding: 30px;
    border: 1px solid #dddddd;
    border-radius: 8px; /* 角を少し丸くする */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* ほんの少しだけ影をつける */
}

.works-section h2 {
    margin-top: 0;
    border-left: 5px solid #333333; /* 見出しの左にアクセントの線 */
    padding-left: 10px;
    font-size: 20px;
}

.description {
    font-size: 14px;
    color: #555555;
    margin-bottom: 20px;
}

/* 作品一覧リストのデザイン */
.works-list {
    list-style-type: none; /* デフォルトの・（黒丸）を消す */
    padding: 0;
    margin: 0;
}

.works-list li {
    border-bottom: 1px solid #eeeeee; /* リストの間に薄い線を引く */
}

/* リンク（クリックできる部分）のデザイン */
.works-list a {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    text-decoration: none; /* リンクの下線を消す */
    color: #333333;
    transition: background-color 0.2s; /* ホバー時の色変化をフワッとさせる */
}

/* マウスを乗せた時のデザイン（スマホではタップ時） */
.works-list a:hover {
    background-color: #fdf5f5; /* うっすら赤みがかった背景にして反応を示す */
}

.work-number {
    font-size: 13px;
    color: #888888;
    width: 90px; /* 「第○弾」の幅を固定してタイトルを揃える */
}

.work-title {
    font-size: 16px;
    font-weight: bold;
}

/* カテゴリ見出し（グループ区切り）のデザイン */
.category-title {
    margin-top: 40px; /* 上のグループとの間に広い余白を空ける */
    margin-bottom: 10px;
    padding-bottom: 5px;
    font-size: 18px;
    color: #333333;
    border-bottom: 2px solid #dddddd; /* 下線を引いてグループを明確に分ける */
}

/* 最初のカテゴリ見出しだけは、上の余白を狭くする */
.works-section .category-title:first-of-type {
    margin-top: 20px;
}

/* フッター（一番下の部分）のデザイン */
.site-footer {
    text-align: center;
    padding: 30px 0;
    margin-top: 50px;
    font-size: 12px;
    color: #888888;
}

/* =========================================================
   個別楽曲ページ（動画・コメント欄）用のデザイン
========================================================= */

/* 動画をスマホ画面でもはみ出さずに縦横比を維持して表示する */
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9の比率 */
    margin-bottom: 20px;
}

.video-container iframe,
.video-container div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* コメントエリア全体 */
.comment-area {
    margin-top: 40px;
    border-top: 1px solid #dddddd;
    padding-top: 20px;
}

/* コメント入力フォーム */
.comment-form textarea {
    width: 100%;
    height: 80px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #cccccc;
    box-sizing: border-box; /* 枠線を含めて幅100%にする */
}

/* 投稿ボタン */
.submit-btn {
    background-color: #cc0000;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: opacity 0.2s; /* ホバー時の変化をフワッと */
}

.submit-btn:hover {
    opacity: 0.8; /* マウスを乗せたら少し薄くして押せる感を出す */
}

/* 投稿されたコメントの枠（四角をなくしてスッキリ） */
.comment-item {
    background-color: transparent; /* 背景のグレーを消して透明に */
    padding: 20px 0; /* 左右の余白を消して、上下の空間で区切りを表現 */
    border: none; /* ぐるっと囲んでいた枠線を消す */
    border-bottom: 1px solid #dddddd; /* 下線だけを引いてコメント同士を区切る */
    border-radius: 0; /* 角丸を消す */
    margin-bottom: 0; 
    animation: fadeIn 0.4s ease-out;
}

/* アニメーションの具体的な動き（透明＆少し下から、元の位置へ） */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* コメントの投稿者名と日時 */
.comment-meta {
    font-size: 12px;
    color: #888888;
    margin-bottom: 5px;
}

.comment-text {
    font-size: 14px;
    color: #333333;
    white-space: pre-wrap; /* 改行をそのまま反映させる設定 */
}

/* =========================================================
   いいねボタン用のデザイン
========================================================= */
.like-btn {
    background-color: transparent;
    border: none; /* 枠線を消す */
    color: #888888; /* 数字を少し落ち着いたグレーに */
    padding: 0; /* 囲み用の余白をなくす */
    cursor: pointer;
    font-size: 13px; /* 数字のサイズ */
    display: flex; /* ハートと数字を横に綺麗に並べる */
    align-items: center; /* 縦の中央揃え */
    gap: 4px; /* ハートと数字の間の隙間 */
    transition: all 0.2s ease;
}

/* マウスを乗せた時（いいね前） */
.like-btn:hover:not(.liked) {
    color: #ff9999; /* ふんわり赤くして反応を示す */
}

/* いいね済みの状態 */
.like-btn.liked {
    color: #cc0000;
    cursor: default;
}

/* ▼新規追加：ハートマークだけを数字より大きくする設定 */
.like-btn .heart {
    font-size: 20px; /* 18pxからもう少し大きく */
    font-family: "Segoe UI Symbol", "Apple Symbols", sans-serif; /* 白黒のサイズ差をなくす魔法 */
    line-height: 1; /* 縦のズレを防ぐ */
}

/* =========================================================
   削除ボタン用のデザイン
========================================================= */
.delete-btn {
    background-color: #f0f0f0; /* 薄いグレーの背景で控えめに */
    border: 1px solid #dddddd; /* 薄い枠線 */
    color: #888888;
    cursor: pointer;
    font-size: 11px;
    margin-left: 15px;
    padding: 2px 10px; /* 余白をつけてボタンらしい形に */
    border-radius: 12px; /* 角を丸くしてカプセル型に */
    text-decoration: none; /* ダサい下線を消す */
    transition: all 0.2s ease; /* ふわっと色が変わるアニメーション */
}

/* マウスを乗せた時のデザイン */
.delete-btn:hover {
    background-color: #fff0f0; /* 背景をうっすら赤く */
    border-color: #ffcccc; /* 枠線も赤く */
    color: #cc0000; /* 文字色を東方の赤に */
}

/* =========================================================
   返信機能用のデザイン
========================================================= */
/* ▼変更：返信ボタン（コメントアイコン用）をスッキリしたデザインに */
.reply-btn {
    background-color: transparent;
    border: none;
    color: #888888; /* いいねボタンと同じグレーに */
    cursor: pointer;
    font-size: 13px; /* いいねボタンと同じサイズに */
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px; /* アイコンと文字の間の隙間 */
    transition: all 0.2s ease;
}

.reply-btn:hover {
    color: #065fd4; /* マウスを乗せたらYouTubeブルーに光る */
}

/* 返信用の入力フォーム（初期状態は隠す） */
.reply-form-container {
    display: none; /* ここで最初は見えないようにしています */
    margin-top: 15px;
    margin-left: 20px;
    border-left: 2px solid #dddddd;
    padding-left: 15px;
}

.reply-form-container textarea {
    width: 100%;
    height: 60px;
    margin-bottom: 5px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #cccccc;
    box-sizing: border-box;
}

/* =========================================================
   返信コメントの見た目（階層化）
========================================================= */
.reply-item {
    margin-left: 40px; 
    margin-top: 10px;
    padding: 10px 0 10px 15px; /* 左側に少しだけ余白を入れる */
    background-color: transparent; /* 背景の白塗りを消して親と馴染ませる */
    border-bottom: none; /* 返信同士の間には下線を引かない（親のグループだと分からせるため） */
    border-left: 2px solid #eeeeee; /* 左側に薄く細い線を引いてツリーを表現 */
}

/* =========================================================
   返信の折りたたみ表示用ボタン
========================================================= */
.toggle-replies-btn {
    background: transparent;
    border: none;
    color: #065fd4; 
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    padding: 0; /* 余白をなくして横並びに最適化 */
    display: inline-flex;
    align-items: center;
    gap: 4px; /* アイコンと文字の隙間を少し狭く */
    transition: background-color 0.2s;
}

.toggle-replies-btn:hover {
    text-decoration: underline; /* ホバー時は下線にする（YouTube風） */
}

/* =========================================================
   「もっと見る」ボタン用のデザイン
========================================================= */
.load-more-container {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.load-more-btn {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    color: #333333;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    padding: 10px 30px;
    border-radius: 20px;
    transition: all 0.2s ease;
}

.load-more-btn:hover {
    background-color: #f7f7f7;
    border-color: #999999;
}

/* =========================================================
   表示/非表示をコントロールする汎用クラス
========================================================= */
.d-none {
    display: none !important;
}

/* =========================================================
   追加：4:3動画用の比率（東方の旧作やサントラ用）
========================================================= */
.video-container.ratio-4-3 {
    padding-top: 75%; /* 16:9の 56.25% に対して、4:3は 75% になります */
}

/* =========================================================
   修正：1:1動画用の比率（サントラのCDジャケット画像用）
========================================================= */
.video-container.ratio-1-1 {
    padding-top: 0; /* 16:9用の古い設定（padding-top: 56.25%）をリセットして無効化する */
    aspect-ratio: 1 / 1; /* 最新のCSS機能を使って、縦横比を完全に 1:1 に固定 */
    max-width: 480px;  /* パソコンで見た時に巨大化しすぎないように制限 */
    margin-left: auto; /* 画面の中央に配置する */
    margin-right: auto;
}

/* =========================================================
   追加：コメント内のタイムスタンプ（時間指定）リンク
========================================================= */
.timestamp-link {
    color: #065fd4; /* YouTubeブルー */
    text-decoration: none;
    cursor: pointer;
}

.timestamp-link:hover {
    text-decoration: underline;
}

/* =========================================================
   SNSシェアボタン用のデザイン（アイコンのみの小サイズ）
========================================================= */
/* タイトルとボタンを横並びにするための枠 */
.title-wrap {
    display: flex;
    justify-content: space-between; /* タイトルは左、ボタンは右に分ける */
    align-items: center; /* 縦の真ん中で揃える */
    margin-bottom: 20px;
}

.title-wrap h2 {
    margin-bottom: 0; /* 元々のh2の下余白を打ち消す */
}

/* アイコンだけの丸いボタン */
.x-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;  /* 幅 */
    height: 36px; /* 高さ */
    background-color: #0f1419;
    color: #ffffff;
    text-decoration: none;
    border-radius: 50%; /* 完全な丸にする */
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.x-share-btn:hover {
    background-color: #272c30;
    transform: scale(1.1); /* マウスを乗せたら少しだけフワッと大きくする */
}

.x-share-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* =========================================================
   入力フォームの自動リサイズ用設定
========================================================= */
.comment-form textarea,
.reply-form-container textarea {
    resize: none; /* ▼追加：右下のドラッグでのサイズ変更を完全に禁止 */
    overflow-y: hidden; /* ▼追加：自動伸長させるため、スクロールバーを隠す */
    min-height: 80px; /* 最初の高さをキープ */
}