/* =========================================
   共通設定 (Common)
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    /* Windows 2000 デフォルトの青色 */
    background-color: #3A6EA5;
    font-family: "MS UI Gothic", "Tahoma", sans-serif;
    font-size: 12px;
    color: #000;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
}

a { color: #000080; text-decoration: none; }
a:hover { text-decoration: underline; color: #FF0000; }
a:visited { color: #800080; }

/* --- 言語切り替え用 --- */
        .lang-en { display: none; }
        .lang-jp { display: inline; }
        body.english-mode .lang-en { display: inline; }
        body.english-mode .lang-jp { display: none; }
/* --- レイアウトコンテナ --- */
.container {
    display: flex;
    gap: 15px;
    width: 100%;
    max-width: 980px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* =========================================
   Win2000 ウィンドウデザイン
   ========================================= */
.win2k-window {
    background-color: #D4D0C8;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: 1px 1px 0 #000;
    padding: 2px;
    margin-bottom: 15px;
    width: 100%;
}

.title-bar {
    background: linear-gradient(to right, #0A246A, #A6CAF0);
    color: #fff;
    padding: 2px 5px;
    font-weight: bold;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 18px;
}

.win-buttons span {
    display: inline-block;
    width: 16px;
    height: 14px;
    background-color: #D4D0C8;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #404040;
    text-align: center;
    line-height: 12px;
    color: #000;
    font-size: 10px;
    margin-left: 2px;
    cursor: pointer;
}

.window-body {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background-color: #fff;
    padding: 20px;
    margin-top: 2px;
    word-wrap: break-word;
}

/* --- カラム設定 --- */
.col-left { width: 180px; flex-shrink: 0; }
.col-main { flex: 1; min-width: 0; }
.col-right { width: 220px; flex-shrink: 0; }

/* =========================================
   メニューバー (Top Menu)
   ========================================= */
.toolbar-area {
    padding: 2px;
    border-bottom: 1px solid #808080;
    margin-bottom: 5px;
    font-size: 11px;
    position: relative;
    z-index: 100;
}

.menu-bar {
    display: flex;
    gap: 10px;
    padding-left: 5px;
    user-select: none;
    cursor: default;
    flex-wrap: wrap;
}

.menu-item {
    padding: 1px 5px;
    position: relative;
    white-space: nowrap;
}

.menu-item:hover {
    background-color: #0A246A;
    color: #fff;
}

.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #D4D0C8;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #404040;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    min-width: 150px;
    z-index: 200;
    color: #000;
    padding: 2px;
}

.dropdown div {
    padding: 5px 10px;
    cursor: pointer;
}

.dropdown div:hover {
    background-color: #0A246A;
    color: #fff;
}

.dropdown hr {
    border: 0;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #808080;
    margin: 3px 0;
}

.show-menu { display: block; }

/* =========================================
   iframe装飾
   ========================================= */
iframe.custom-frame {
    width: 100%;
    border: 2px solid;
    border-color: #404040 #fff #fff #404040;
    background: #fff;
    display: block;
}

iframe.sidebar-frame {
    width: 100%;
    height: auto;
    min-height: 200px;
    
    border: none;
    background-color: transparent;
    display: block;
}

/* =========================================
   メニューページ用
   ========================================= */
#menu-body {
    background-color: transparent !important;
    background-image: none !important;
    padding: 10px !important;
    overflow: hidden !important; /* スクロールバー消去 */
    display: block !important;   /* flex解除 */
}

/* =========================================
   ページ別スタイル
   ========================================= */

/* --- トップページ (Now Playing Marquee) --- */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    background: #000;
    color: #0f0;
    font-family: 'Courier New', monospace;
    padding: 5px 0;
}
.marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 10s linear infinite;
}

/* --- ハロプロ --- */
.love-marquee {
    overflow: hidden;
    white-space: nowrap;
    background-color: #000;
    color: #ff0099; 
    font-weight: bold;
    padding: 5px 0;
    margin-bottom: 10px;
    border: 1px solid #ff0099;
}


.love-marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}
/* アーティストカード */
.artist-card {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 3px 3px 0 #eee;
    padding: 15px;
    margin-bottom: 25px;
    display: flex;
    gap: 15px;
}
.artist-video {
    flex: 0 0 300px;
    border: 4px solid #000;
    background: #000;
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-wrapper iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}
.artist-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.artist-name {
    font-size: 20px;
    font-weight: bold;
    color: #cc0000;
    border-bottom: 1px dotted #ccc;
    margin-bottom: 10px;
    padding-bottom: 5px;
    font-family: "Verdana", sans-serif;
}
.artist-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #333;
    flex-grow: 1;
    margin-bottom: 15px;
}
.go-shrine-btn {
    display: inline-block;
    background: linear-gradient(to bottom, #ff99cc, #ff6699);
    border: 1px solid #cc0066;
    padding: 8px 20px;
    text-align: center;
    text-decoration: none;
    color: #fff !important;
    font-weight: bold;
    border-radius: 4px;
    align-self: flex-start;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.go-shrine-btn:hover {
    background: linear-gradient(to bottom, #ff6699, #cc0066);
}

/* --- ギャラリーページ --- */
.gallery-container {
    height: 600px;
    overflow-y: auto;
    border: 2px inset #fff;
    background-color: #fff;
    padding: 10px;
}
.gallery-toolbar-dummy {
    display: flex; gap: 10px; border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-bottom: 15px;
    color: #666; font-size: 11px;
}
.gallery-grid {
    display: flex; flex-wrap: wrap; gap: 20px; align-content: flex-start;
}
.gallery-item {
    width: 110px; display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 15px;
}
.gallery-item a {
    text-decoration: none; color: #000; display: block; width: 100%; padding: 4px;
    border: 1px solid transparent; cursor: pointer;
}
.gallery-item a:hover {
    background-color: #000080; color: #fff; border: 1px dotted #fff;
}
.gallery-item a:hover img { opacity: 0.8; }
.img-box {
    width: 100%; height: 90px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;
}
.gallery-item img { max-width: 100%; max-height: 100%; object-fit: contain; border: none; }
.img-name { font-size: 11px; font-family: "Tahoma", sans-serif; word-wrap: break-word; }
.img-comment { font-size: 10px; color: #444; margin-top: 4px; line-height: 1.2; width: 100%; }
.en-sub { font-size: 9px; color: #888; font-family: "Verdana", "Arial", sans-serif; display: block; margin-top: 1px; letter-spacing: 0.5px; }

/* ギャラリー拡大表示（モーダル） */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7); z-index: 9999;
    justify-content: center; align-items: center;
}
.modal-window {
    width: auto; max-width: 95vw; max-height: 95vh;
    display: flex; flex-direction: column;
    background-color: #D4D0C8;
    border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 2px solid #404040; border-bottom: 2px solid #404040;
    box-shadow: 0 0 20px rgba(0,0,0,0.6); padding: 3px;
}
.modal-body {
    background-color: #000; border: 2px inset #fff; padding: 0;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden; flex: 1; min-height: 200px; position: relative;
}
.modal-img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.modal-footer {
    margin-top: 5px; padding: 5px; background: #D4D0C8;
    display: flex; justify-content: space-between; align-items: center;
}
.modal-text { text-align: left; font-size: 12px; line-height: 1.3; }
.modal-text .en-sub { color: #666; margin-top: 2px; }


/* =========================================
   アニメーション
   ========================================= */
@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* =========================================
   レスポンシブ対応
   ========================================= */
@media screen and (max-width: 768px) {
    body { padding: 10px; display: block; }
    .container { flex-direction: column; gap: 20px; }
    .col-main { width: 100%; order: 1; }
    .col-left { width: 100%; order: 2; }
    .col-right { width: 100%; order: 3; }
    
    .gallery-grid { justify-content: space-around; }
    .modal-window { max-width: 100%; max-height: 100%; height: 100%; }
    
    .profile-header { flex-direction: column; align-items: center; text-align: center; }
    table.profile-table th, table.profile-table td { display: block; width: 100%; border: none; }
    table.profile-table th { margin-top: 10px; color: #000080; border-bottom: none; }
    table.profile-table td { padding-left: 10px; border-bottom: 1px dotted #ccc; }
    
    .my-banner-area { flex-direction: column; align-items: flex-start; }
    .banner-grid { justify-content: center; }
    
    .artist-card { flex-direction: column; }
    .artist-video { flex: auto; width: 100%; }
    .go-shrine-btn { width: 100%; }
}

iframe.sidebar-frame {
    width: 100%;
    height: auto;
    min-height: 200px;
    
    border: none;
    background-color: transparent;
    display: block;
}

/* 1. ページ全体を囲む装飾枠 */
.shrine-frame {
    border: 3px double #ff6699; 
    padding: 15px;
    background-color: #fffafc; 
    outline: 1px dashed #ffccdd; 
    outline-offset: 5px;
    margin: 5px;
}

/* 2. 愛のマニフェスト（宣言）エリア */
.love-manifesto {
    background-color: #fff0f5;
    border: 2px dashed #ff6699;
    padding: 15px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
}
.love-manifesto b {
    color: #cc0000;
    font-size: 14px;
}

/* 3. モニター風の動画枠 */
.monitor-frame {
    background: #ffccdd; 
    padding: 10px 10px 25px 10px; 
    border-radius: 10px;
    border: 2px solid #ff6699;
    box-shadow: 3px 3px 0 #eeaacc;
    position: relative;
    margin-bottom: 10px;
}
/* 電源ランプ風の飾り */
.monitor-frame::after {
    content: "● REC";
    position: absolute; bottom: 5px; right: 15px;
    font-size: 10px; color: red; font-weight: bold;
    animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* 4. アーティストカードのレイアウト調整 */
.artist-card {
    display: flex; 
    gap: 20px; 
    margin-bottom: 30px;
    background: #fff; 
    padding: 15px; 
    border-bottom: 1px dotted #ccc;
    border: none; 
    box-shadow: none;
}

.artist-video-area { 
    flex: 0 0 320px; 
}

.artist-info-area { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
}

@media screen and (max-width: 768px) {
    .artist-card { flex-direction: column; }
    .artist-video-area { flex: auto; width: 100%; }
}