@charset "UTF-8";

:root {
    --mikan-gold: #FFB300;
    --mikan-leaf: #4CAF50;
    --mikan-blue: #0078D4;
    --bg-color: #fcfcfc;
    --text-color: #333;
    --font-main: 'Helvetica Neue', Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

body {
    margin: 0; padding: 0;
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
}

/* --- ヘッダー・共通設定 --- */
header { padding: 4rem 1rem 1rem; text-align: center; }
h1 { color: var(--mikan-gold); margin: 0; font-size: 2.8rem; letter-spacing: 0.05em; }
.subtitle { font-size: 0.95rem; color: #666; margin-top: 12px; line-height: 1.6; }

.container { max-width: 1100px; margin: 0 auto; padding: 60px 20px; }
.section-title { text-align: center; color: var(--mikan-gold); font-size: 2rem; margin-bottom: 40px; }
.section-title::after { content: ''; display: block; width: 40px; height: 3px; background: var(--mikan-leaf); margin: 10px auto; }

/* --- 3Dメインビジュアル --- */
.main-visual { display: flex; justify-content: center; min-height: 60vh; }
model-viewer { width: 100%; max-width: 800px; height: 600px; outline: none; touch-action: pan-y; }

/* --- Scriptセクション (物語) --- */
.script-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.script-card {
    background: #fff; border-radius: 15px; border: 1px solid #eee;
    padding: 30px; position: relative; transition: 0.4s;
}
.script-card:hover { transform: scale(1.02); border-color: var(--mikan-gold); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

.script-tag { position: absolute; top: 0; left: 20px; padding: 5px 15px; border-radius: 0 0 10px 10px; font-size: 0.7rem; font-weight: bold; color: #fff; }
.tag-classic { background: #8b4513; }
.tag-scifi { background: var(--mikan-blue); }

.read-btn {
    margin-top: 20px; padding: 10px 20px; background: none;
    border: 1px solid var(--mikan-gold); color: var(--mikan-gold);
    border-radius: 20px; cursor: pointer; transition: 0.3s;
}
.read-btn:hover { background: var(--mikan-gold); color: #fff; }

/* --- Lab Log (ブログカード) --- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.card { background: #fff; border-radius: 20px; padding: 25px; position: relative; border: 1px solid #f0f0f0; transition: 0.4s; }
.card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(255, 179, 0, 0.15); border-color: var(--mikan-gold); }

.card-tag { position: absolute; top: 20px; right: 20px; padding: 4px 12px; border-radius: 20px; font-size: 0.7rem; color: #fff; font-weight: bold; }
.tag-mikan { background: #444; }
.tag-gemini { background: var(--mikan-gold); }

.card-date { font-size: 0.8rem; color: #bbb; display: block; margin-top: 20px; }

/* --- フローティングメニュー --- */
.floating-menu { position: fixed; left: 30px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 1000; }
.menu-item {
    background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 179, 0, 0.2); padding: 12px 22px; border-radius: 40px;
    text-decoration: none; color: var(--text-color); font-weight: bold; transition: 0.4s; width: 180px; display: flex; flex-direction: column;
}
.menu-item:hover { background: var(--mikan-gold); color: #fff !important; transform: translateX(12px); }
.menu-item small { font-size: 0.65rem; font-weight: normal; }

/* --- フッター --- */
footer { text-align: center; padding: 4rem 1rem; color: #999; font-size: 0.85rem; }
.status-badge { display: inline-block; padding: 6px 18px; background: #f0fff4; color: #2f855a; border-radius: 25px; border: 1px solid #c6f6d5; margin-bottom: 10px; }

/* --- スマホレスポンシブ --- */
@media (max-width: 768px) {
    .floating-menu { left: 0; bottom: 0; top: auto; transform: none; width: 100%; flex-direction: row; overflow-x: auto; background: rgba(255,255,255,0.95); padding: 12px 10px; border-top: 1px solid #eee; }
    .menu-item { width: auto; min-width: 100px; padding: 8px 15px; border: none; background: transparent; align-items: center; }
    .menu-item small { display: none; }
    model-viewer { height: 45vh; }
    footer { padding-bottom: 100px; }
}
/* モーダル全体の背景（暗幕） */
.modal {
    display: none; /* 最初は隠しておく */
    position: fixed;
    z-index: 2000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.85); /* 画面を暗くして没入感を出す */
    backdrop-filter: blur(5px);
}

/* 物語が表示されるエリア */
.modal-content {
    margin: 5vh auto;
    width: 90%;
    max-width: 1200px;
    height: 85vh;
    background: #fffaf0; /* 和紙風の背景色 */
    border-radius: 5px;
    position: relative;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

/* --- 縦書きの核心部分 --- */
.vertical-mode {
    writing-mode: vertical-rl; /* 縦書き・右から左 */
    -webkit-writing-mode: vertical-rl;
    padding: 60px 80px;
    height: 100%;
    box-sizing: border-box;
    overflow-x: auto; /* 横スクロールを有効にする */
    font-family: "Sawarabi Mincho", "Hiragino Mincho ProN", serif;
}

.story-title { font-size: 2.5rem; margin-left: 40px; color: #332; }
.story-author { font-size: 1rem; margin-left: 20px; color: #665; }
.story-divider { border: none; border-left: 1px solid #ddd; height: 100%; margin: 0 30px; }
.story-body { font-size: 1.2rem; line-height: 2.8; color: #221; }

/* 閉じるボタン */
.close-btn {
    position: absolute;
    top: 20px; left: 20px; /* 縦書きなので左側に配置すると邪魔にならない */
    font-size: 40px; color: #888; cursor: pointer; z-index: 10;
}
.close-btn:hover { color: var(--mikan-gold); }