/* Discography.css */

/* メインコンテンツの幅と中央寄せ */
#discography-main {
	/* ★★★ 修正点：固定ヘッダーの裏に隠れないように、padding-topをここで設定するで！★★★ */
	padding-top: 80px; 
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 50px;
}

.page-title {
	text-align: center;
	font-size: 2.2em;
	color: #333;
	margin-top: 50px; 
	margin-bottom: 30px;
}

/* アルバムを横に並べるためのグリッドレイアウト */
.album-grid {
    display: grid;
    /* ★ 1列の幅を最大300pxまでに制限して、中央に寄せるのがコツや！ ★ */
    grid-template-columns: repeat(2, minmax(auto, 300px)); 
    justify-content: center; /* グリッド全体を中央に */
    gap: 40px 60px; /* 横の隙間（60px）を広げて、画像同士を離す */
    max-width: 1000px; 
    margin: 0 auto 50px auto;
    padding: 0 20px;
}

/* 各アイテムの調整 */
.album-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中の文字も画像に合わせて中央寄せ */
    text-align: center;
    text-decoration: none;
    color: #111;
    transition: transform 0.3s ease;
}

/* ジャケット画像の調整 */
.album-cover {
    width: 100%; /* 親の300pxいっぱいに広がる */
    max-width: 280px; /* ここでお好みのサイズに微調整できるで！ */
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 4px; /* King Gnuは角丸がかなり控えめ（4pxくらい） */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* タイトルと日付 */
.album-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
    text-decoration: underline; /* King Gnu風に下線を入れる */
}

.album-date {
    font-size: 0.85rem;
    color: #333;
}
/* SINGLE / ALBUM のセクションタイトル */
.page-title {
    text-align: center;
    /* King Gnu風：もっと太く、少し文字間を詰める */
    font-size: 2.5rem; 
    font-weight: 900; 
    letter-spacing: -0.02em; 
    color: #111;
    margin-top: 60px; 
    margin-bottom: 40px;
    /* フォントをゴシック体の力強いものに指定 */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 作品タイトルのスタイル */
.album-title {
    font-weight: 800; /* かなり太めにする */
    margin-top: 15px;
    font-size: 1.1rem;
    color: #111;
    text-transform: uppercase; /* 英字があれば大文字にする */
    /* King Gnu風：細い下線を入れる */
    text-decoration: underline;
    text-underline-offset: 4px; /* 下線と文字の隙間を空ける */
    text-decoration-thickness: 1px;
    
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 日付のスタイル */
.album-date {
    display: block;
    font-size: 0.85rem;
    color: #444;
    margin-top: 8px;
    letter-spacing: 0.05em; /* 数字は少し間隔を空けるとおしゃれ */
    font-weight: 500;
}

/* ついでに画像にマウスを乗せた時の動きをKing Gnuっぽく */
.album-item:hover .album-cover {
    transform: scale(1.03); /* 画像だけを少し大きくする */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.album-cover {
    transition: transform 0.4s ease;
    border: none; /* 枠線はない方がKing Gnuっぽい */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* 影を柔らかく深く */
}

/* スマホ表示（画面が狭い時） */
@media (max-width: 768px) {
    .album-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホでも2列維持 */
        gap: 20px 15px;
    }
}
/* --- 詳細ページ (白背景・清潔感重視) 専用スタイル --- */

/* 背景は白のまま、余白をしっかり取る */
#discography-detail-main {
    background-color: #fff; /* 背景を白に戻す */
    color: #333; /* 文字を濃いグレーに */
    padding-top: 100px;
    padding-bottom: 80px;
    text-align: center;
    min-height: 100vh;
}

/* 「SINGLE」などの見出し（今までの雰囲気に合わせる） */
.detail-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
    color: #111;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

/* 作品タイトルの非表示（ジャケ写の下に情報があるなら不要やけど、出したければ block にしてな） */
.detail-sub-title {
    display: none; 
}

/* ジャケ写を中央にドンと配置（ここがKing Gnu風レイアウトの肝！） */
.detail-image-main {
    width: 90%;
    max-width: 550px; /* 少しサイズを絞ると品が出るで */
    height: auto;
    border-radius: 8px; /* 角丸を少しだけ付ける */
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); /* 影を柔らかくして清潔感を出す */
    margin: 0 auto 40px auto;
}

/* 情報ボックスの調整 */
.detail-info-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.detail-info-box-wrapper p {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #444;
}

/* ストリーミングリンク（白背景に映える青か黒に） */
.streaming-link-url a {
    color: #111;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: 1.1rem;
    transition: color 0.3s;
}

.streaming-link-url a:hover {
    color: #666; /* ホバーで少し薄く */
}

/* BACK TO LIST ボタン（今までのボタンに合わせた色に調整） */
.back-to-list-p {
    margin-top: 60px;
}

.back-to-list-button {
    background-color: #111; /* 黒背景に白文字で引き締める */
    color: #fff !important;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.back-to-list-button:hover {
    background-color: #444;
    transform: translateY(-3px); /* 少し浮き上がらせる */
}