@font-face {
font-family: "OradanoGSRR";
            src: url("00_assets/OradanoGSRR.ttf") format("truetype");
            font-display: swap;
}

:root {
--bg-color: #1a1a1a;
            --text-color: #daaa64;
            --accent-white: #f4f0df;
            --accent-red: #641824;
}

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

html,
        body {
font-family: "OradanoGSRR", "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            overflow-x: hidden;
            scroll-behavior: smooth;
}

.header-visual {
width: 100%;
            min-height: 15dvh;
            background-color: var(--accent-white);
            background-image: url('01_OG/paper_texture.png');
            background-repeat: repeat;
            display: flex;
            align-items: center;
}

.header-inner {
width: 100%;
            max-width: 1024px;
            margin: 0 auto;
            padding: 20px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
}

.header-visual img {
width: auto;
            max-height: 100%;
            max-width: 70%;
            display: block;
}

.menu-container {
position: relative;
            display: inline-block;
}

.menu-button {
display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 34px;
            height: 22px;
            margin-bottom: 1dvh;
            cursor: pointer;
            z-index: 1001;
}

.menu-line {
width: 100%;
            height: 2px;
            background-color: var(--accent-red);
            transition: 0.3s;
}

.header-menu {
display: none;
            position: absolute;
            top: 100%;
            right: 0;
            width: 200px;
            background-color: var(--accent-red);
            background-image: url('01_OG/paper_texture.png');
            border: 1px solid var(--text-color);
            z-index: 1000;
}

#nav-toggle:checked~.header-menu {
display: block;
}

.header-menu ul {
list-style: none;
            padding: 10px 0;
}

.header-menu li {
list-style: none !important;
            display: block;
}

.header-menu a {
display: block;
            padding: 12px 20px;
            color: var(--text-color);
            text-decoration: none;
            font-size: 1rem;
            border-bottom: 1px solid rgba(218, 170, 100, 0.1);
}

.header-menu li:last-child a {
border-bottom: none;
}

section {
width: 100%;
            padding: 5dvh 0 7dvh 0;
}

.new-release {
background: url('01_OG/paper_texture.png') repeat, var(--accent-red);
            background-attachment: local;
}

.preview-section {
background: url('01_OG/paper_texture.png') repeat, #0d0d0d;
            background-attachment: local;
}

.overview-section {
background: url('01_OG/paper_texture.png') repeat, var(--accent-red);
            background-attachment: local;
}

.inner {
position: relative;
            width: 100%;
            max-width: 1024px;
            margin: 0 auto;
            padding: 0 40px;
}

.font-opacity {
opacity: 0.72;
}

.section-title {
font-size: 2.0rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            border-left: 2px solid var(--text-color);
            padding-left: 15px;
            margin-bottom: 60px;
}

/* オーバーレイ内のタイトルの行間を他の箇所と統一 */
        .full-overlay .section-title {
line-height: 1.3 !important;
            margin-top: 0;
            margin-bottom: 60px;
}

.og-container {
display: flex;
            flex-direction: column;
            gap: 60px;
}

.artist-name-container {
flex: 1 1 0%;
            min-width: 300px;
            display: flex;
            flex-direction: column;
}

.artist-name-container h2 {
font-family: "OradanoGSRR", serif !important;
            line-height: 1.3;
            margin: 0;
            font-weight: 900;
            word-break: keep-all;
}

.main-title-part {
font-size: 1.2rem !important;
            margin-bottom: 1.5rem !important;
}

.name-en {
font-size: 1.0rem;
            letter-spacing: 0.15em;
}

.name-jp {
font-size: 0.9rem;
            letter-spacing: 0.1em;
}

.feat-text {
font-size: 0.9rem;
            margin-top: 5px;
}

.margin {
margin-bottom: 1.5rem !important;
}

.jacket-nav ul {
list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
}

.jacket-nav a {
text-decoration: none;
            color: var(--text-color);
            font-size: 1.5rem;
            letter-spacing: 0.15em;
            font-weight: 900;
}

.split-container {
display: flex;
            flex-wrap: wrap;
            gap: 40px;
            max-width: 1100px;
            margin: 0 auto;
}

.player-box {
flex: 1.2;
            min-width: 300px;
}

.audiomack {
width: 100%;
            height: 600px;
            border-radius: 4px;
}

.track-item {
border-bottom: 1px solid rgba(218, 170, 100, 0.2);
            background: var(--accent-red);
            transition: background 0.3s;
}

.track-header {
padding: 20px;
            font-family: "OradanoGSRR", serif;
            font-size: 1.1rem;
            opacity: 0.72;
            color: var(--text-color);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            user-select: none;
}

.track-header::-webkit-details-marker {
display: none;
}

.track-item[open] {
background: rgba(100, 24, 36, 0.8);
}

.track-header:after {
content: '+';
            font-size: 2rem;
            font-weight: 600;
            opacity: 0.5;
}

.track-item[open] .track-header:after {
content: '-';
}

.track-body {
padding: 0 20px 30px 20px;
            font-size: 0.95rem;
            line-height: 1.8;
            color: var(--accent-white);
            overflow: hidden;
}

.track-item[open] .track-body {
animation: slideDown 0.5s ease-out forwards;
}

@keyframes slideDown {
0% {
                opacity: 0;
                transform: translateY(-10px);
                max-height: 0;
}

}

        .translation-wrapper {
display: flex;
            flex-wrap: wrap;
            gap: 40px;
            align-items: flex-start;
}

.lang-en,
        .lang-jp {
flex: 1 1 400px;
            min-width: 300px;
}

.lang-en {
    /* 英語部分は明示的に指定されていました */
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--accent-white);
    opacity: 0.8;
}

.lang-jp {
    /* 日本語部分は明示的に游明朝などが指定されていました */
    font-family: "Yu Mincho", "MS PMincho", serif;
    font-size: 0.95rem;
    line-height: 1.9;
}

.lead-text {
font-size: 1.2rem;
            color: var(--text-color);
            margin-bottom: 1.5rem;
            font-weight: bold;
}

.sub-lead {
font-weight: bold;
            margin: 2rem 0 1rem 0;
            border-bottom: 1px solid rgba(218, 170, 100, 0.3);
            display: inline-block;
}

.track-body p {
opacity: 0.72;
            margin-bottom: 1.2rem;
}

.buy-section {
background: var(--bg-color);
            padding: 100px 0;
}

.buy-card {
background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(218, 170, 100, 0.1);
            padding: 40px;
            display: flex;
            flex-direction: column;
}

.buy-card.featured {
border: 1px solid var(--text-color);
            background: rgba(218, 170, 100, 0.05);
}

.buy-card h3 {
opacity: 0.72;
            font-family: "OradanoGSRR", serif;
            font-size: 1.5rem;
            color: var(--text-color);
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
}

.card-desc {
font-size: 0.9rem;
            line-height: 1.6;
            color: var(--accent-white);
            margin-bottom: 30px;
            flex-grow: 1;
}

.link-list a,
        .btn-primary,
        .btn-secondary {
text-decoration: none;
            text-align: center;
            padding: 12px;
            font-size: 0.85rem;
            opacity: 0.90;
            border: 1px solid rgba(218, 170, 100, 0.9);
            color: var(--text-color);
            transition: 0.3s;
}

.link-list a:hover,
        .btn-primary:hover {
background: var(--text-color);
            color: #000;
}

.disabled {
opacity: 0.5 !important;
            cursor: not-allowed;
            border-style: dashed !important;
            pointer-events: none !important;
}

.badge {
font-size: 0.7rem;
            background: var(--accent-red);
            color: #fff;
            padding: 2px 8px;
            border-radius: 2px;
}

.studio-footer {
padding: 60px 20px;
            text-align: center;
}

/* --- オーバーレイの基本設定 --- */
        .full-overlay {
position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--accent-red);
            background-image: url('01_OG/paper_texture.png');
            z-index: 2000;

            /* 初期状態は隠す */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease;
            overflow-y: auto;
}

/* --- チェックが入ったら表示する（ここがJSの代わり） --- */
        #concept-toggle:checked~.full-overlay {
opacity: 0.97;
            visibility: visible;
}

/* 閉じるボタン（×） */
        .overlay-close {
position: fixed;
            top: 20px;
            right: 30px;
            font-size: 3rem;
            color: var(--text-color);
            cursor: pointer;
            z-index: 2001;
}

/* コンテンツの配置 */
        .overlay-content {
max-width: 1100px;
            margin: 100px auto;
            padding: 0 40px;
            color: var(--text-color);
            line-height: 2;
}

/* 「id="concept-toggle" がチェックされている状態」を保持する body を指定 */
        body:has(#concept-toggle:checked) {
position: fixed;
            width: 100%;
            height: 100%;
}