/* =========================================================
   音楽会 スマホ版
   style.css

   PDF・お気に入り・プレイリストなし
========================================================= */


/* =========================================================
   基本設定
========================================================= */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;

    background: #f3f6f8;
    color: #222;

    font-family:
        "BIZ UDPGothic",
        "Yu Gothic",
        "Meiryo",
        sans-serif;

    font-size: 16px;
}


/* =========================================================
   フォーム共通
========================================================= */

button,
select,
input {
    font: inherit;
}

button {
    min-height: 46px;

    border: 1px solid #9aa5ad;
    border-radius: 10px;

    background: #ffffff;
    color: #222;

    cursor: pointer;

    touch-action: manipulation;
}

button:active {
    transform: translateY(1px);
}

select,
input {
    border: 1px solid #9aa5ad;
    border-radius: 8px;

    background: #ffffff;
    color: #222;
}


/* =========================================================
   アプリ全体
========================================================= */

#app {
    width: 100%;
    max-width: 760px;

    min-height: 100vh;
    min-height: 100dvh;

    margin: 0 auto;

    background: #ffffff;
}


/* =========================================================
   ヘッダー
========================================================= */

#appHeader {
    position: sticky;
    top: 0;
    z-index: 30;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;
    height: 32px;

    padding: 3px 6px;

    background: #edffdc;

    border-bottom: 1px solid #d8dde1;
}

#appHeader h1 {
    margin: 0;

    text-align: center;

    font-size: 21px;
}

/* =========================================================
   メインメニュー

   スマホでは3列×2行
========================================================= */

#mainMenu {
    position: sticky;

    top: 34px;
    z-index: 29;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 2px;

    padding: 3px;

    background: #ddf3f6;

    border-bottom: 1px solid #d8dde1;
}

#mainMenu button {
    width: 100%;

    min-width: 0;
    min-height: 26px;
    height: 26px;

    padding: 0px 2px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    border-radius: 5px;
}

#mainMenu button.selected {
    background: #cbddfb;

    border-color: #5794bc;
}


/* =========================================================
   ワークスペース
========================================================= */

#workspace {
    width: 100%;

    padding: 4px;

    padding-left:
        max(8px, env(safe-area-inset-left));

    padding-right:
        max(8px, env(safe-area-inset-right));
}


/* =========================================================
   サブメニュー

   スマホでは3列
========================================================= */

#subMenu {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 2px;

    margin-bottom: 4px;
    background: #f0e0d0;

}

#subMenu button {
    width: 100%;

    min-width: 0;
    min-height: 26px;

    padding: 0 2px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    border-radius: 5px;
}

#subMenu button.selected {
    background: #fbeedc;

    border-color: #5794bc;
}


/* =========================================================
   案内
========================================================= */

.guide {
    grid-column: 1 / -1;

    margin: 12px 4px;

    color: #666;

    text-align: center;

    line-height: 1.6;
}


/* =========================================================
   項目一覧
========================================================= */

#itemList {
    display: grid;

    grid-template-columns: 1fr;

    gap: 8px;

    width: 100%;
}

.itemRow {
    display: block;

    width: 100%;
}

.itemButton {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    width: 100%;

    min-height: 50px;
    height: auto;

    padding: 5px 10px;

    line-height: 1.2;

    text-align: left;
}


/* =========================================
   項目名
========================================= */

.itemTitle {
    width: 100%;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.25;
}


/* =========================================
   項目コメント
========================================= */

.itemComment {
    width: 100%;

    margin-top: 2px;

    font-size: 13px;
    font-weight: 400;

    line-height: 1.2;
}


/* =========================================================
   コンテンツ領域
========================================================= */

#contentArea {
    display: none;

    width: 100%;
}


/* =========================================================
   コンテンツヘッダー
========================================================= */

#contentHeader {
    position: sticky;

    top: 165px;
    z-index: 28;

    display: grid;

    grid-template-columns:
        92px minmax(0, 1fr);

    align-items: center;

    gap: 6px;

    padding: 4px 0 6px;

    background: #eeeeaa;

    border-bottom: 1px solid #dddd44;
}

#contentHeader h2 {
    min-width: 0;

    margin: 0;

    font-size: 20px;
    line-height: 1.3;

    overflow-wrap: anywhere;
}

#backButton {
    width: 100%;

    min-height: 30px;

    padding: 3px;
}


/* =========================================================
   コンテンツ共通
========================================================= */

.contentContainer {
    display: none;

    width: 100%;
}


/* =========================================================
   MP4
========================================================= */

#mp4Container {
    width: 100%;
}

#mp4Player {
    display: block;

    width: 100%;
    max-height: 62vh;

    background: #000000;
}


/* =========================================================
   YouTube
========================================================= */

#youtubeContainer {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #000000;
}

#youtubePlayer {
    width: 100%;
    height: 100%;
}

#youtubePlayer iframe {
    display: block;

    width: 100% !important;
    height: 100% !important;

    border: 0;
}


/* =========================================================
   MP3
========================================================= */

#mp3Container {
    width: 100%;

    text-align: center;
}

#mp3Image {
    display: none;

    width: 100%;
    height: auto;

    max-height: 30vh;

    margin: 0 auto 4px;

    object-fit: contain;

    border-radius: 8px;
}

#mp3Player {
    display: block;

    width: 100%;

    margin: 0 auto;
}


/* =========================================================
   4行同期歌詞
========================================================= */

#currentLyrics {
    width: 100%;

    margin: 10px 0;

    overflow: hidden;
}

.lyricLine {
    display: flex;

    width: 100%;

    min-height: 44px;

    align-items: center;
    justify-content: center;

    padding: 3px 5px;

    line-height: 1.25;

    text-align: center;

    overflow-wrap: anywhere;
    word-break: normal;
}

#lyricPrev {
    min-height: 27px;
}

#lyricCurrent {
    min-height: 45px;

    background: #fff4b8;

    border-radius: 8px;

    font-weight: 700;
}

#lyricNext {
    min-height: 33px;
}

#lyricNext2 {
    min-height: 21px;
}


/* =========================================================
   全歌詞
========================================================= */

#fullLyrics {
    width: 100%;

    margin: 12px 0 70px;

    text-align: left;
}

#fullLyrics summary {
    min-height: 44px;

    padding: 10px;

    background: #eef3f6;

    border-radius: 8px;

    font-weight: 700;

    cursor: pointer;
}

#lyricsList {
    width: 100%;

    padding: 12px 4px;

    white-space: pre-wrap;

    overflow-wrap: anywhere;

    font-size: 19px;
    line-height: 1.75;

    text-align: left;
}


/* =========================================================
   Slide
========================================================= */

#slideContainer {
    width: 100%;

    text-align: center;
}

#slideImage {
    display: block;

    width: 100%;
    height: auto;

    max-height: 70vh;

    margin: 0 auto;

    object-fit: contain;

    background: #111111;
}

#slideNumber {
    padding: 8px;

    text-align: center;

    font-size: 17px;
    font-weight: 700;
}


/* =========================================================
   Text
========================================================= */

#textContainer {
    width: 100%;
}

#textContent {
    width: 100%;

    padding: 12px;

    background: #fafafa;

    border-radius: 8px;

    white-space: pre-wrap;

    overflow-wrap: anywhere;

    font-size: 18px;
    line-height: 1.8;
}


/* =========================================================
   Exercise
========================================================= */

#exerciseContainer {
    width: 100%;
}

#exerciseProgress {
    min-height: 30px;

    padding: 4px;

    text-align: center;

    font-weight: 700;
}

#exerciseCard {
    margin: 8px 0;

    padding: 16px;

    background: #f7f8f9;

    border-radius: 12px;

    text-align: center;
}

#exerciseStepTitle {
    margin: 0 0 10px;

    font-size: 24px;

    line-height: 1.4;
}

#exerciseStepText {
    white-space: pre-wrap;

    overflow-wrap: anywhere;

    font-size: 19px;
    line-height: 1.7;
}

#exerciseTimer {
    margin-top: 14px;

    font-size: 40px;
    font-weight: 700;

    line-height: 1.2;
}

.exerciseControls {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.exerciseControls button {
    width: 100%;

    min-height: 50px;

    font-weight: 700;
}


/* =========================================================
   ゲーム設定共通
========================================================= */

.gameSettings {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    width: 100%;

    margin-bottom: 8px;
}

.gameSettings label {
    display: grid;

    grid-template-columns: 1fr;

    gap: 4px;

    min-width: 0;

    font-size: 14px;
    font-weight: 700;
}

.gameSettings select {
    width: 100%;

    min-width: 0;
    min-height: 44px;

    padding: 5px;
}

.gameSettings button {
    width: 100%;

    min-height: 44px;

    align-self: end;

    font-weight: 700;
}


/* =========================================================
   番号入力
========================================================= */

.numberInput {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 100px;

    gap: 8px;

    width: 100%;

    margin-bottom: 10px;
}

.numberInput input {
    width: 100%;

    min-width: 0;
    height: 48px;

    padding: 0 10px;

    border: 1px solid #9aa5ad;
    border-radius: 10px;

    font-size: 20px;
}

.numberInput button {
    width: 100%;

    min-height: 48px;

    font-weight: 700;
}


/* =========================================================
   神経衰弱
========================================================= */

#memoryContainer {
    width: 100%;
}

#memoryInfo {
    min-height: 42px;

    padding: 8px 4px;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.45;
}

#memoryBoard {
    display: grid;

    gap: 5px;

    width: 100%;

    margin: 0 auto 70px;
}


/* =========================================================
   神経衰弱カード
========================================================= */

.memoryCard {
    position: relative;

    width: 100%;

    min-width: 0;
    min-height: 0;

    aspect-ratio: 1 / 1;

    padding: 2px;

    overflow: hidden;

    background: #e8edf0;

    border-radius: 7px;
}

.memoryCard img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 6px;
}

.memoryCard.matched {
    opacity: 0.62;
}

.cardNo {
    position: absolute;

    z-index: 3;

    top: 3px;
    left: 4px;

    min-width: 23px;

    padding: 1px 4px;

    background: rgba(
        255,
        255,
        255,
        0.88
    );

    border-radius: 5px;

    color: #222;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.3;

    text-align: center;
}

.memoryCard .back {
    display: flex;

    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;

    font-size:
        clamp(
            28px,
            10vw,
            54px
        );

    font-weight: 700;
}


/* =========================================================
   15パズル
========================================================= */

#puzzle15Container {
    width: 100%;
    box-sizing: border-box;
}

#puzzle15Settings {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 6px;
    margin: 6px 0;
}

#puzzle15Settings select,
#puzzle15Settings button {
    min-height: 36px;
    padding: 4px 8px;

    font-size: 14px;
}

#puzzle15Info {
    margin: 5px 0 2px;

    text-align: center;
    font-size: 17px;
    font-weight: bold;
}

#puzzle15Message {
    min-height: 25px;

    margin: 3px 0 6px;

    text-align: center;
    font-size: 14px;
}


/* ----- 盤面 ----- */

#puzzle15Board {
    display: grid;

    width: min(94vw, 420px);
    aspect-ratio: 1 / 1;

    margin: 0 auto;

    gap: 3px;

    padding: 3px;

    box-sizing: border-box;

    border: 2px solid #777;
    border-radius: 6px;

    background: #777;
}


/* ----- 駒 ----- */

.puzzle15Tile {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 0;

    padding: 0;

    border: 1px solid #777;
    border-radius: 5px;

    background: #eeeeee;

    font-size: 26px;
    font-weight: bold;

    cursor: pointer;

    overflow: hidden;

    box-sizing: border-box;
}


/* ----- 空白 ----- */

.puzzle15Tile.empty {
    border: none;

    background: transparent;

    cursor: default;
}


/* ----- 画像駒 ----- */

.puzzle15Tile.imageTile {
    background-repeat: no-repeat;

    border: 1px solid #555;

    font-size: 0;
}



/* =========================================
   音楽もぐらたたき
========================================= */

#moleContainer {
    width: 100%;
    box-sizing: border-box;
}


#moleSettings {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 5px;

    margin: 5px 0;
}


#moleSettings select,
#moleSettings button {
    height: 34px;

    padding: 2px 7px;

    font-size: 14px;
}


#moleInfo {
    margin: 5px 0 2px;

    text-align: center;

    font-size: 18px;
    font-weight: bold;
}


#moleMessage {
    min-height: 24px;

    margin: 2px 0 5px;

    text-align: center;

    font-size: 15px;
}


/* -----------------------------------------
   盤面
----------------------------------------- */

#moleBoard {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    width: 100%;
    max-width: 500px;

    margin: 8px auto;

    box-sizing: border-box;
}


/* -----------------------------------------
   穴
----------------------------------------- */

.moleHole {
    position: relative;

    width: 100%;
    height: 100px;

    min-width: 0;

    padding: 0;

    overflow: hidden;

    border: 2px solid #777;
    border-radius: 50%;

    background: #dddddd;

    box-sizing: border-box;
}


/* -----------------------------------------
   モグラ
----------------------------------------- */

.mole {
    position: absolute;

    left: 50%;
    bottom: -70px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    border-radius: 50%;

    background: #777;

    color: white;

    font-size: 30px;
    font-weight: bold;

    transition:
        bottom 0.12s,
        transform 0.12s;
}


/* モグラ出現 */

.moleHole.active .mole {

    bottom: 12px;

}


/* 当たり */

.moleHole.hit .mole {

    transform:
        translateX(-50%)
        scale(0.78);

}


/* =========================================================
   オセロ
========================================================= */

#othelloContainer {
    width: 100%;
}

#othelloInfo {
    min-height: 42px;

    padding: 8px 4px;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.45;
}


/* =========================================================
   オセロ盤
========================================================= */

#othelloBoard {
    display: grid;

    grid-template-columns:
        repeat(8, minmax(0, 1fr));

    gap: 2px;

    width: min(
        100%,
        620px
    );

    margin: 0 auto 70px;

    padding: 3px;

    background: #174f32;

    border-radius: 4px;
}


/* =========================================================
   オセロマス
========================================================= */

.othelloCell {
    position: relative;

    width: 100%;

    min-width: 0;
    min-height: 0;

    aspect-ratio: 1 / 1;

    padding: 0;

    background: #2e8b57;

    border: 1px solid
        rgba(
            0,
            0,
            0,
            0.35
        );

    border-radius: 0;
}


/* 合法手 */

.othelloCell.legal::after {
    position: absolute;

    z-index: 1;

    top: 42%;
    left: 42%;

    width: 16%;
    height: 16%;

    background:
        rgba(
            255,
            255,
            255,
            0.55
        );

    border-radius: 50%;

    content: "";
}


/* 最後に置いた場所 */

.othelloCell.lastMove {
    outline: 3px solid #ffd54f;

    outline-offset: -3px;
}


/* =========================================================
   オセロ番号
========================================================= */

.cellNo {
    position: absolute;

    z-index: 4;

    top: 1px;
    left: 2px;

    color: #ffffff;

    font-size:
        clamp(
            7px,
            2.1vw,
            12px
        );

    font-weight: 700;

    line-height: 1;

    text-shadow:
        0 1px 2px #000000;
}


/* =========================================================
   オセロ石
========================================================= */

.disc {
    position: absolute;

    z-index: 2;

    top: 14%;
    left: 14%;

    width: 72%;
    height: 72%;

    border-radius: 50%;

    box-shadow:
        0 1px 3px
        rgba(
            0,
            0,
            0,
            0.45
        );
}

.disc.black {
    background: #111111;
}

.disc.white {
    background: #ffffff;

    border: 1px solid #aaaaaa;
}


/* =========================================================
   ハノイの塔
========================================================= */
/* =========================================================
   ハノイの塔
========================================================= */

#hanoiContainer {
    width: 100%;
    box-sizing: border-box;
}


/* ----- 上部操作 ----- */

#hanoiSettings {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 5px;
    margin: 4px 0;
}

#hanoiSettings select,
#hanoiSettings button {
    height: 32px;
    padding: 2px 7px;
    font-size: 14px;
}

#hanoiInfo {
    margin: 4px 0 2px;

    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

#hanoiMessage {
    min-height: 22px;

    margin: 2px 0 4px;

    text-align: center;
    font-size: 14px;
}


/* =========================================================
   ハノイ盤面
========================================================= */

#hanoiBoard {
    display: grid;

    /* 画面をきれいに3等分 */
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    column-gap: 12px;

    width: 100%;
    height: 220px;

    padding: 5px 8px 0;

    box-sizing: border-box;
}


/* =========================================================
   1本の塔
========================================================= */

.hanoiTower {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;

    padding: 0;

    border: 1px solid #aaa;
    border-radius: 6px;

    background: #fafafa;

    overflow: hidden;
}


/* ----- 縦の棒 ----- */

.hanoiPole {
    position: absolute;

    left: 50%;
    bottom: 12px;

    width: 5px;
    height: 175px;

    transform: translateX(-50%);

    background: #777;

    border-radius: 3px;

    z-index: 1;
}


/* ----- 土台 ----- */

.hanoiTower::after {
    content: "";

    position: absolute;

    left: 3px;
    right: 3px;
    bottom: 8px;

    height: 6px;

    background: #666;

    border-radius: 3px;

    z-index: 1;
}


/* =========================================================
   円盤を積む領域
========================================================= */

.hanoiDisks {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 14px;

    display: flex;
    flex-direction: column-reverse;
    align-items: center;

    width: 100%;

    z-index: 5;

    pointer-events: none;
}


/* ----- 円盤 ----- */

.hanoiDisk {
    display: block;

    height: 17px;

    flex: 0 0 17px;

    margin-top: 2px;

    border: 1px solid #444;
    border-radius: 8px;

    background: #d8d8d8;

    box-sizing: border-box;
}


/* ----- 選択中 ----- */

.hanoiTower.selected {
    outline: 3px solid #333;

    background: #eeeeee;
}


/* ----- 棒番号 ----- */

#hanoiTowerNames {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    column-gap: 12px;

    padding: 0 8px;

    text-align: center;

    font-size: 15px;
    font-weight: bold;
}




/* =========================================================
   順番記憶
========================================================= */

#sequenceContainer {
    width: 100%;
    box-sizing: border-box;
}

#sequenceSettings {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
    margin: 6px 0;
}

#sequenceSettings select,
#sequenceSettings button {
    min-height: 36px;
    padding: 4px 10px;
    font-size: 15px;
}

#sequenceInfo {
    margin: 5px 0;

    text-align: center;
    font-size: 17px;
    font-weight: bold;
}

#sequenceMessage {
    min-height: 28px;

    margin: 4px 0;

    text-align: center;
    font-size: 16px;
}

#sequenceDisplay {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 70px;

    margin: 5px 0 10px;

    font-size: 38px;
    font-weight: bold;

    border: 1px solid #aaa;
    border-radius: 8px;

    background: #fafafa;
}


/* ----- 入力ボタン ----- */

#sequenceButtons {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 5px;

    width: 100%;
}

.sequenceButton {
    min-width: 0;
    height: 62px;

    padding: 0;

    font-size: 25px;
    font-weight: bold;

    border: 2px solid #888;
    border-radius: 10px;

    background: #eee;
}


/* 光っているボタン */

.sequenceButton.sequenceActive {
    transform: scale(0.94);

    border-width: 4px;

    background: #fff;
}


/* 色モード */

.sequenceButton.color0 {
    background: #ff6666;
}

.sequenceButton.color1 {
    background: #66aaff;
}

.sequenceButton.color2 {
    background: #66cc77;
}

.sequenceButton.color3 {
    background: #ffcc55;
}

.sequenceButton.color4 {
    background: #cc88dd;
}



/* =========================================================
   共通操作ボタン

   MP4
     再生 / 一時停止 / 停止 / 終了

   Slide
     最初へ / 前へ / 次へ / 終了
========================================================= */

#commonControls {
    position: sticky;

    bottom: 0;

    z-index: 40;

    display: none;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 5px;

    width: 100%;

    margin-top: 8px;

    padding: 8px 0;

    padding-bottom:
        max(
            8px,
            env(safe-area-inset-bottom)
        );

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    border-top: 1px solid #d8dde1;
}

#commonControls button {
    width: 100%;

    min-width: 0;
    min-height: 30px;
    height: 30px;


    padding: 0px 2px;

    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
   420px以下
========================================================= */

@media
    screen and
    (max-width: 420px) {

    #appHeader h1 {
        font-size: 23px;
    }

    #status,
    #name {
        font-size: 11px;
    }


    /* メインメニュー */

    #mainMenu {
        top: 35px;

        gap: 3px;

        padding: 4px;
    }

    #mainMenu button {
        min-height: 30px;
        height: 30px;


        padding: 3px;

        font-size: 15px;
    }


    /* コンテンツヘッダー */

    #contentHeader {
        top: 171px;

        grid-template-columns:
            82px minmax(0, 1fr);
    }

    #contentHeader h2 {
        font-size: 18px;
    }


    /* サブメニュー */

    #subMenu {
        gap: 5px;
    }

    #subMenu button {
        min-height: 30px;
        height: 30px;


        padding: 2px;

        font-size: 15px;
    }


    /* 項目 */

	.itemButton {
	    min-height: 50px;
	    height: auto;
	}

    /* 歌詞設定 */

    .sliderRow {
        grid-template-columns:
            minmax(0, 1fr) 52px;
    }


    /* 全歌詞 */

    #lyricsList {
        font-size: 18px;
    }


    /* Exercise */

    #exerciseStepTitle {
        font-size: 22px;
    }

    #exerciseStepText {
        font-size: 18px;
    }

    #exerciseTimer {
        font-size: 36px;
    }


    /* ゲーム設定 */

    .gameSettings {
        grid-template-columns: 1fr;
    }


    /* 番号入力 */

    .numberInput {
        grid-template-columns:
            minmax(0, 1fr) 88px;
    }


    /* 共通操作 */

    #commonControls button {
        font-size: 13px;
    }
}


/* =========================================================
   360px以下
========================================================= */

@media
    screen and
    (max-width: 360px) {

    #workspace {
        padding-left: 5px;
        padding-right: 5px;
    }

    #mainMenu {
        gap: 4px;
    }

    #mainMenu button {
        font-size: 14px;
    }

    #subMenu {
        gap: 4px;
    }

    #subMenu button {
        font-size: 14px;
    }

    #contentHeader {
        grid-template-columns:
            76px minmax(0, 1fr);
    }

    #backButton {
        padding: 3px;

        font-size: 14px;
    }

    #contentHeader h2 {
        font-size: 17px;
    }

    .numberInput {
        grid-template-columns:
            minmax(0, 1fr) 82px;
    }

    #commonControls {
        gap: 3px;
    }

    #commonControls button {
        padding-left: 1px;
        padding-right: 1px;

        font-size: 12px;
    }
}

/* =========================================================
   フッター
========================================================= */

#appFooter {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    width: 100%;

    margin-top: 20px;

    padding:
        10px
        max(10px, env(safe-area-inset-right))
        max(10px, env(safe-area-inset-bottom))
        max(10px, env(safe-area-inset-left));

    background: #eef3f6;

    border-top: 1px solid #d8dde1;

    color: #555;
}

#status {
    text-align: left;

    font-size: 12px;
}

#name {
    text-align: right;

    font-size: 12px;

    white-space: nowrap;
}



/* =========================================================
   横向きスマホ
========================================================= */

@media
    screen and
    (orientation: landscape)
    and
    (max-height: 600px) {

    #appHeader {
        position: relative;
    }

    #mainMenu {
        position: relative;

        top: auto;
    }

    #contentHeader {
        position: relative;

        top: auto;
    }

    #mp3Image {
        max-height: 55vh;
    }

    #slideImage {
        max-height: 72vh;
    }
}

/* =========================================
   オセロ設定
   スマホでも横並び
========================================= */

#othelloContainer .gameSettings {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 6px 10px;

    width: 100%;
    margin-bottom: 8px;
}


/* ラベル文字＋プルダウンを同じ行にする */

#othelloContainer .gameSettings label {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;

    align-items: center;

    width: auto;
    min-width: 0;

    gap: 4px;

    margin: 0;

    white-space: nowrap;

    font-size: 14px;
    font-weight: 700;
}


/* プルダウン */

#othelloContainer .gameSettings select {
    display: inline-block;

    width: auto;
    min-width: 75px;
    min-height: 36px;
    height: 36px;

    padding: 2px 4px;
    margin: 0;

    flex: 0 0 auto;

    font-size: 14px;
}


/* ゲーム開始ボタン */

#othelloContainer .gameSettings button {
    width: auto;
    min-width: 85px;
    min-height: 36px;
    height: 36px;

    padding: 2px 7px;
    margin: 0;

    flex: 0 0 auto;

    font-size: 14px;
}

/* =========================================
   オセロ 情報＋番号入力 横並び
========================================= */

#othelloControlRow {
    display: flex;

    flex-direction: row;
    flex-wrap: nowrap;

    align-items: center;
    justify-content: center;

    gap: 8px;

    width: 100%;

    margin: 4px 0 6px;
}


/* 黒・白・手番などの情報 */

#othelloControlRow #othelloInfo {
    width: auto;
    min-width: 0;
    min-height: 36px;

    margin: 0;
    padding: 4px 6px;

    display: flex;
    align-items: center;

    font-size: 14px;
    line-height: 1.2;

    white-space: nowrap;
}


/* マス番号＋入力＋決定 */

#othelloControlRow .numberInput {
    display: flex;

    flex-direction: row;
    flex-wrap: nowrap;

    align-items: center;

    width: auto;

    margin: 0;

    gap: 4px;
}


/* 「マス番号」と入力欄を横並び */

#othelloControlRow .numberInput label {
    display: inline-flex;

    flex-direction: row;

    align-items: center;

    gap: 3px;

    white-space: nowrap;

    font-size: 14px;
}


/* 番号入力欄 */

#othelloControlRow #othelloNumber {
    width: 55px;
    height: 36px;

    padding: 2px 4px;

    font-size: 16px;

    text-align: center;
}


/* 決定ボタン */

#othelloControlRow #othelloPut {
    width: auto;
    min-width: 55px;
    min-height: 36px;
    height: 36px;

    padding: 2px 6px;

    font-size: 14px;
}


/* =========================================
   サブメニューとコンテンツヘッダーを密着
========================================= */

#subMenu {
    margin-bottom: 0 !important;
}


/* 戻るボタン＋コンテンツ名 */

#contentHeader {
    position: relative !important;
    top: auto !important;

    margin: 0 !important;
    padding: 2px 0 !important;

    min-height: 34px;

    grid-template-columns:
        82px minmax(0, 1fr);

    gap: 4px;
}


/* 戻るボタン */

#backButton {
    min-height: 30px;
    height: 30px;

    margin: 0;
    padding: 2px 4px;
}


/* コンテンツ名 */

#contentHeader h2 {
    margin: 0;

    display: flex;
    align-items: center;

    min-height: 30px;

    font-size: 18px;
    line-height: 1.1;
}


/* =========================================
   字抜き歌
   抜いた文字の位置に下線だけ表示
========================================= */

.jinukiBlank {
    display: inline-block;

    width: 1em;

    height: 1em;

    margin: 0 0.03em;

    border-bottom: 3px solid currentColor;

    vertical-align: baseline;
}


/* =========================================================
   ジャンケン画像
========================================================= */

.jankenHandImage {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 280px;
    max-height: 240px;

    object-fit: contain;

    margin: 0 auto;
}


/* ジャンケン画像を表示する中央行 */

#lyricCurrent:has(.jankenHandImage) {
    background-color: white;
    height: 240px;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* =========================================================
   作曲
========================================================= */

#composerContainer {
    width: 100%;
    box-sizing: border-box;
}


/* 音符・テンポ */

.composerSettings {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;

    flex-wrap: wrap;

    margin: 8px 0 14px;
}


.composerSettings label {
    font-size: 18px;
    font-weight: bold;
}


.composerSettings select {
    font-size: 18px;

    padding: 7px 10px;

    margin-left: 4px;
}


/* =========================================================
   鍵盤
========================================================= */

#composerKeyboard {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 7px;

    margin-bottom: 18px;
}


.composerKeyboardRow {
    display: grid;

    grid-template-columns:
        42px
        repeat(7, 1fr);

    gap: 4px;

    align-items: center;
}


.composerOctaveLabel {
    text-align: center;

    font-size: 14px;
    font-weight: bold;
}


.composerKeyboardRow button {
    min-width: 0;

    min-height: 52px;

    padding: 4px 1px;

    border: 1px solid #777;
    border-radius: 7px;

    background: white;

    font-size: 17px;
    font-weight: bold;

    cursor: pointer;
}


.composerKeyboardRow button:active {
    transform: translateY(2px);
}


/* =========================================================
   楽譜
========================================================= */

.composerScoreTitle {
    text-align: center;

    margin:
        12px 0 6px;
}


#composerScore {
    min-height: 120px;

    padding: 10px;

    border: 2px solid #999;
    border-radius: 8px;

    background: white;

    display: flex;
    flex-wrap: wrap;

    align-content: flex-start;

    gap: 6px;

    box-sizing: border-box;
}


.composerEmpty {
    width: 100%;

    text-align: center;

    padding-top: 35px;

    color: #666;
}


.composerScoreNote {
    width: 54px;
    min-height: 76px;

    padding: 4px;

    border: 2px solid #bbb;
    border-radius: 7px;

    background: white;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
}


.composerScoreNote.selected {
    border: 3px solid #222;

    transform: translateY(-2px);
}


.composerNoteName {
    font-size: 17px;
    font-weight: bold;
}


.composerNoteSymbol {
    font-size: 28px;
    line-height: 30px;
}


.composerNoteNumber {
    font-size: 12px;

    margin-top: 2px;
}


/* =========================================================
   操作ボタン
========================================================= */

.composerControls,
.composerEditControls {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 12px;
}


.composerControls button,
.composerEditControls button {
    min-height: 44px;

    padding: 7px 12px;

    font-size: 16px;

    border-radius: 7px;
}


/* =========================================================
   作曲・曲名
========================================================= */

.composerSongName {
    text-align: center;

    margin:
        8px 0 12px;
}


.composerSongName label {
    font-size: 18px;
    font-weight: bold;
}


#composerSongName {
    width: min(240px, 65vw);

    padding: 8px;

    margin-left: 6px;

    font-size: 17px;

    box-sizing: border-box;
}


/* =========================================================
   休符
========================================================= */

.composerRestArea {
    text-align: center;

    margin:
        8px 0 15px;
}


#composerRest {
    min-width: 100px;

    min-height: 44px;

    font-size: 18px;

    font-weight: bold;
}


/* =========================================================
   保存
========================================================= */

.composerSaveArea {
    margin-top: 18px;

    padding-top: 12px;

    border-top:
        1px solid #aaa;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


.composerSaveArea button,
#composerSavedSongs {
    min-height: 42px;

    padding: 6px 10px;

    font-size: 15px;
}


/* =========================================================
   ドレミファゲーム
========================================================= */

#doremiContainer {
    width: 100%;
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   設定
--------------------------------------------------------- */

.doremiSettings {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 8px 0 10px;
}


.doremiSettings select,
.doremiSettings button {

    min-height: 42px;

    padding: 6px 10px;

    font-size: 17px;
}


#doremiInfo {

    min-height: 28px;

    text-align: center;

    font-size: 17px;

    margin-bottom: 4px;
}


/* ---------------------------------------------------------
   7角形
--------------------------------------------------------- */

#doremiPolygon {

    position: relative;

    width: min(
        88vw,
        420px
    );

    aspect-ratio: 1 / 1;

    margin: 5px auto 10px;
}


/* ---------------------------------------------------------
   ドレミボタン
--------------------------------------------------------- */

.doremiButton {

    position: absolute;

    width: 64px;
    height: 64px;

    border-radius: 50%;

    font-size: 20px;
    font-weight: bold;

    transform:
        translate(
            -50%,
            -50%
        );
}


/* 7角形の7頂点 */

.doremiButton:nth-of-type(1) {

    left: 50%;
    top: 8%;
}


.doremiButton:nth-of-type(2) {

    left: 83%;
    top: 24%;
}


.doremiButton:nth-of-type(3) {

    left: 91%;
    top: 60%;
}


.doremiButton:nth-of-type(4) {

    left: 69%;
    top: 89%;
}


.doremiButton:nth-of-type(5) {

    left: 31%;
    top: 89%;
}


.doremiButton:nth-of-type(6) {

    left: 9%;
    top: 60%;
}


.doremiButton:nth-of-type(7) {

    left: 17%;
    top: 24%;
}


/* ---------------------------------------------------------
   中央の問題
--------------------------------------------------------- */

#doremiQuestion {

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    width: 125px;
    height: 125px;

    border:
        4px solid #555;

    border-radius: 50%;

    background: white;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 52px;
    font-weight: bold;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   判定
--------------------------------------------------------- */

#doremiResult {

    min-height: 40px;

    text-align: center;

    font-size: 28px;
    font-weight: bold;
}


#doremiRestart {

    margin: 5px auto;

    min-width: 130px;
    min-height: 44px;

    font-size: 17px;
}

/* ドレミボタンを押した時も位置を変えない */

.doremiButton:active {
    transform: translate(-50%, -50%);
}


/* =========================================================
   色文字ゲーム
========================================================= */

#colorWordContainer {
    width: 100%;
    box-sizing: border-box;
}


/* 問題指定 */

/* =========================================================
   色文字ゲーム
========================================================= */

#colorWordInstruction {

    min-height: 80px;

    margin:
        12px auto 18px;

    padding:
        12px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        #fffde7;

    color:
        black;

    font-size:
        38px;

    font-weight:
        bold;

    border:
        3px solid #aaa;

    border-radius:
        16px;

    box-sizing:
        border-box;
}


/*
   旧 colorWordQuestion は
   今回は使用しないので非表示
*/

#colorWordQuestion {
    display: none;
}


/* 回答5個 */

#colorWordAnswers {

    width:
        min(96vw, 600px);

    margin:
        15px auto;

    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap:
        6px;
}


#colorWordAnswers button {

    min-width:
        0;

    height:
        82px;

    padding:
        0;

    color:
        black;

    font-size:
        36px;

    font-weight:
        bold;

    border:
        3px solid #444;

    border-radius:
        12px;

    box-sizing:
        border-box;
}


/* 判定 */

#colorWordResult {
    min-height: 42px;

    margin-top: 15px;

    text-align: center;

    font-size: 28px;
    font-weight: bold;
}


/* 得点 */

#colorWordScore {
    text-align: center;

    margin: 5px 0 12px;

    font-size: 20px;
    font-weight: bold;
}


/* 操作 */

.colorWordControls {
    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 10px;
}


.colorWordControls button {
    min-width: 110px;
    min-height: 46px;

    font-size: 18px;
}



/* =========================================================
   スマホ
========================================================= */

@media (
    max-width: 420px
) {

    .composerKeyboardRow {
        grid-template-columns:
            34px
            repeat(7, 1fr);

        gap: 2px;
    }


    .composerKeyboardRow button {
        min-height: 50px;

        font-size: 15px;

        padding: 2px 0;
    }


    .composerOctaveLabel {
        font-size: 12px;
    }


    .composerScoreNote {
        width: 48px;
    }

    #colorWordAnswers button {

        height:
            70px;

        font-size:
            30px;
    }

}



/* =========================================================
   PC版 基本レイアウト
========================================================= */

body {

    margin: 0;

    background: #f5f5f5;

    font-family:
        "Yu Gothic",
        "Meiryo",
        sans-serif;
}


#app {

    width: 100%;

    min-width: 1000px;

    margin: 0 auto;
}


/* =========================================================
   タイトル
========================================================= */

#header {

    text-align: center;

    padding: 10px;

    background: white;

    border-bottom:
        1px solid #aaa;
}


#header h1 {

    margin: 0;

    font-size: 30px;
}


/* =========================================================
   上部メインメニュー
========================================================= */

#mainMenu {

    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap: 4px;

    padding: 6px;

    background: #ddd;
}


#mainMenu button {

    min-height: 52px;

    font-size: 19px;

    font-weight: bold;

    cursor: pointer;
}


/* =========================================================
   左右2カラム
========================================================= */

#pcLayout {

    display: grid;

    grid-template-columns:
        168px
        minmax(0, 1fr);

    min-height:
        calc(100vh - 120px);
}


/* =========================================================
   左サイドメニュー
========================================================= */

#sidePanel {

    padding: 12px;

    background: #eeeeee;

    border-right:
        2px solid #aaa;
}


#sideTitle {

    margin-bottom: 10px;

    padding: 8px;

    text-align: center;

    font-size: 20px;

    font-weight: bold;
}


#subMenu {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


#subMenu button {

    width: 100%;

    min-height: 48px;

    padding: 8px;

    font-size: 18px;

    text-align: left;

    cursor: pointer;
}


/* =========================================================
   右メイン画面
========================================================= */

#mainPanel {

    min-width: 0;

    padding: 14px;

    background: white;
}


#categoryTitle {

    min-height: 30px;

    margin-bottom: 8px;

    font-size: 22px;

    font-weight: bold;
}


/* =========================================================
   項目一覧
========================================================= */

#itemList {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 15px;

    padding-bottom: 12px;

    border-bottom:
        1px solid #bbb;
}


#itemList button {

    min-width: 130px;

    min-height: 44px;

    padding: 7px 12px;

    font-size: 17px;

    cursor: pointer;
}


/* =========================================================
   コンテンツ
========================================================= */

#contentArea {

    width: 100%;

    min-width: 0;

    box-sizing: border-box;
}


.contentContainer {

    width: 100%;

    box-sizing: border-box;
}




/* =========================================================
   MP4
========================================================= */

#mp4Container {

    width: 100%;

    text-align: center;
}


#mp4Player {

    display: block;

    width: min(100%, 1000px);

    max-height: 72vh;

    margin: 0 auto;

    background: black;
}


/* =========================================================
   YouTube
========================================================= */

#youtubeContainer {

    position: relative;

    width: min(100%, 1000px);

    aspect-ratio: 16 / 9;

    margin: 0 auto;

    overflow: hidden;

    background: black;
}


#youtubePlayer {

    width: 100%;
    height: 100%;
}


#youtubePlayer iframe {

    display: block;

    width: 100% !important;
    height: 100% !important;

    border: 0;
}





/* =========================================================
   MP3
========================================================= */

#mp3Container {

    width: min(100%, 1000px);

    margin: 0 auto;

    text-align: center;
}


#mp3Image {

    display: none;

    width: auto;
    max-width: 100%;

    height: auto;
    max-height: 420px;

    margin: 0 auto 10px;

    object-fit: contain;

    border-radius: 8px;
}


#mp3Player {

    display: block;

    width: min(100%, 800px);

    margin: 8px auto;
}


/* =========================================================
   同期歌詞
========================================================= */

#currentLyrics {

    width: min(100%, 900px);

    margin: 15px auto;

    overflow: hidden;
}


.lyricLine {

    display: flex;

    width: 100%;

    min-height: 46px;

    align-items: center;
    justify-content: center;

    padding: 5px 10px;

    font-size: 21px;
    line-height: 1.4;

    text-align: center;

    box-sizing: border-box;
}


#lyricPrev {

    min-height: 34px;

    font-size: 18px;
}


#lyricCurrent {

    min-height: 54px;

    background: #fff4b8;

    border-radius: 8px;

    font-size: 25px;
    font-weight: bold;
}


#lyricNext {

    min-height: 38px;
}


#lyricNext2 {

    min-height: 30px;
}


/* =========================================================
   全歌詞
========================================================= */

#fullLyrics {

    width: min(100%, 900px);

    margin: 15px auto 40px;

    text-align: left;
}


#fullLyrics summary {

    padding: 10px;

    background: #eef3f6;

    border-radius: 8px;

    font-size: 18px;
    font-weight: bold;

    cursor: pointer;
}


#lyricsList {

    padding: 15px;

    white-space: pre-wrap;

    overflow-wrap: anywhere;

    font-size: 20px;
    line-height: 1.8;
}





/* =========================================================
   Slide
========================================================= */

#slideContainer {

    width: 100%;

    text-align: center;
}


#slideImage {

    display: block;

    width: auto;

    max-width: 100%;
    max-height: 75vh;

    margin: 0 auto;

    object-fit: contain;

    background: #111;
}


#slideNumber {

    padding: 8px;

    text-align: center;

    font-size: 18px;
    font-weight: bold;
}


/* =========================================================
   Text
========================================================= */

#textContainer {

    width: min(100%, 1000px);

    margin: 0 auto;
}


#textContent {

    width: 100%;

    padding: 20px;

    background: #fafafa;

    border-radius: 8px;

    white-space: pre-wrap;

    overflow-wrap: anywhere;

    font-size: 20px;
    line-height: 1.9;

    box-sizing: border-box;
}




/* =========================================================
   Exercise
========================================================= */

#exerciseContainer {

    width: min(100%, 900px);

    margin: 0 auto;
}


#exerciseProgress {

    min-height: 34px;

    padding: 6px;

    text-align: center;

    font-size: 18px;
    font-weight: bold;
}


#exerciseCard {

    margin: 12px 0;

    padding: 25px;

    background: #f7f8f9;

    border-radius: 12px;

    text-align: center;
}


#exerciseStepTitle {

    margin: 0 0 15px;

    font-size: 28px;
}


#exerciseStepText {

    white-space: pre-wrap;

    font-size: 21px;
    line-height: 1.8;
}


#exerciseTimer {

    margin-top: 18px;

    font-size: 48px;
    font-weight: bold;
}


.exerciseControls {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 10px;
}


.exerciseControls button {

    min-height: 50px;

    font-size: 18px;
    font-weight: bold;
}





/* =========================================================
   ドレミファゲーム
========================================================= */

#doremiContainer {

    width: 100%;

    box-sizing: border-box;

    text-align: center;
}


.doremiSettings {

    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin: 10px 0 15px;
}


.doremiSettings select,
.doremiSettings button {

    min-height: 44px;

    padding: 7px 14px;

    font-size: 18px;
}


#doremiInfo {

    min-height: 32px;

    margin-bottom: 6px;

    text-align: center;

    font-size: 19px;
}


/* ---------------------------------------------------------
   7角形
--------------------------------------------------------- */

#doremiPolygon {

    position: relative;

    width: 520px;

    height: 520px;

    margin: 10px auto 15px;
}


/* ---------------------------------------------------------
   7個のボタン
--------------------------------------------------------- */

.doremiButton {

    position: absolute;

    width: 78px;
    height: 78px;

    border-radius: 50%;

    font-size: 24px;
    font-weight: bold;

    transform:
        translate(-50%, -50%);
}


/* 押したとき位置を動かさない */

.doremiButton:active {

    transform:
        translate(-50%, -50%);
}


/* ---------------------------------------------------------
   7角形の頂点
--------------------------------------------------------- */

.doremiButton:nth-of-type(1) {

    left: 50%;
    top: 7%;
}


.doremiButton:nth-of-type(2) {

    left: 84%;
    top: 24%;
}


.doremiButton:nth-of-type(3) {

    left: 92%;
    top: 60%;
}


.doremiButton:nth-of-type(4) {

    left: 70%;
    top: 89%;
}


.doremiButton:nth-of-type(5) {

    left: 30%;
    top: 89%;
}


.doremiButton:nth-of-type(6) {

    left: 8%;
    top: 60%;
}


.doremiButton:nth-of-type(7) {

    left: 16%;
    top: 24%;
}


/* ---------------------------------------------------------
   中央問題
--------------------------------------------------------- */

#doremiQuestion {

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    display: flex;

    align-items: center;
    justify-content: center;

    width: 155px;
    height: 155px;

    background: white;

    border: 4px solid #555;
    border-radius: 50%;

    font-size: 62px;
    font-weight: bold;

    box-sizing: border-box;
}


#doremiResult {

    min-height: 45px;

    text-align: center;

    font-size: 30px;
    font-weight: bold;
}


#doremiRestart {

    min-width: 150px;
    min-height: 46px;

    margin: 7px auto;

    font-size: 18px;
}



.doremiButton:active {
    transform: translate(-50%, -50%);
}






/* =========================================================
   色文字ゲーム
========================================================= */

#colorWordContainer {

    width: min(100%, 1000px);

    margin: 0 auto;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   問題
--------------------------------------------------------- */

#colorWordInstruction {

    display: flex;

    align-items: center;
    justify-content: center;

    width: min(100%, 700px);

    min-height: 110px;

    margin: 20px auto 30px;

    padding: 15px;

    background: #fffde7;

    color: black;

    border: 3px solid #aaa;
    border-radius: 16px;

    font-size: 52px;
    font-weight: bold;

    box-sizing: border-box;
}


/* 現在は使用しない */

#colorWordQuestion {

    display: none;
}


/* ---------------------------------------------------------
   回答
--------------------------------------------------------- */

#colorWordAnswers {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 12px;

    width: min(100%, 900px);

    margin: 20px auto;
}


#colorWordAnswers button {

    min-width: 0;

    height: 110px;

    padding: 0;

    color: black;

    font-size: 44px;
    font-weight: bold;

    border: 3px solid #444;
    border-radius: 12px;

    cursor: pointer;

    box-sizing: border-box;
}


#colorWordResult {

    min-height: 48px;

    margin-top: 18px;

    text-align: center;

    font-size: 32px;
    font-weight: bold;
}


#colorWordScore {

    margin: 8px 0 15px;

    text-align: center;

    font-size: 22px;
    font-weight: bold;
}


.colorWordControls {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 15px;
}


.colorWordControls button {

    min-width: 150px;

    min-height: 48px;

    font-size: 18px;
    font-weight: bold;
}




/* =========================================================
   作曲
========================================================= */

#composerContainer {

    width: min(100%, 1100px);

    margin: 0 auto;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   鍵盤
--------------------------------------------------------- */

.composerKeyboard {

    width: 100%;

    margin: 15px auto;
}


.composerKeyboardRow {

    display: grid;

    grid-template-columns:
        55px repeat(7, 1fr);

    gap: 6px;

    margin-bottom: 6px;
}


.composerKeyboardRow button {

    min-height: 65px;

    padding: 5px;

    font-size: 19px;
    font-weight: bold;
}


.composerOctaveLabel {

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 16px;
    font-weight: bold;
}


/* ---------------------------------------------------------
   譜面
--------------------------------------------------------- */

#composerScore {

    display: flex;

    flex-wrap: wrap;

    align-content: flex-start;

    gap: 8px;

    min-height: 150px;

    margin-top: 15px;

    padding: 15px;

    background: white;

    border: 2px solid #999;
    border-radius: 8px;

    box-sizing: border-box;
}


.composerEmpty {

    width: 100%;

    padding-top: 45px;

    text-align: center;

    color: #666;
}


.composerScoreNote {

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    width: 64px;

    min-height: 88px;

    padding: 5px;

    background: white;

    border: 2px solid #bbb;
    border-radius: 7px;
}


.composerScoreNote.selected {

    border: 3px solid #222;

    transform: translateY(-2px);
}


.composerNoteName {

    font-size: 19px;
    font-weight: bold;
}


.composerNoteSymbol {

    font-size: 32px;

    line-height: 34px;
}


.composerNoteNumber {

    margin-top: 3px;

    font-size: 13px;
}


/* ---------------------------------------------------------
   作曲操作
--------------------------------------------------------- */

.composerControls,
.composerEditControls {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 15px;
}


.composerControls button,
.composerEditControls button {

    min-height: 46px;

    padding: 8px 15px;

    font-size: 17px;
}


/* ---------------------------------------------------------
   曲名
--------------------------------------------------------- */

.composerSongName {

    margin: 12px 0;

    text-align: center;
}


.composerSongName label {

    font-size: 19px;
    font-weight: bold;
}


#composerSongName {

    width: 320px;

    padding: 8px;

    margin-left: 8px;

    font-size: 18px;
}


/* ---------------------------------------------------------
   休符
--------------------------------------------------------- */

.composerRestArea {

    margin: 12px 0 18px;

    text-align: center;
}


#composerRest {

    min-width: 120px;

    min-height: 46px;

    font-size: 19px;
    font-weight: bold;
}


/* ---------------------------------------------------------
   保存
--------------------------------------------------------- */

.composerSaveArea {

    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 20px;

    padding-top: 15px;

    border-top: 1px solid #aaa;
}


.composerSaveArea button,
#composerSavedSongs {

    min-height: 44px;

    padding: 7px 12px;

    font-size: 16px;
}





/* =========================================================
   ゲーム設定共通
========================================================= */

.gameSettings {

    display: flex;

    justify-content: center;
    align-items: flex-end;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 15px;
}


.gameSettings label {

    display: flex;

    flex-direction: column;

    gap: 5px;

    font-size: 16px;
    font-weight: bold;
}


.gameSettings select {

    min-width: 150px;

    min-height: 42px;

    padding: 5px;

    font-size: 17px;
}


.gameSettings button {

    min-width: 120px;

    min-height: 44px;

    padding: 6px 12px;

    font-size: 17px;
    font-weight: bold;
}


/* =========================================================
   番号入力
========================================================= */

.numberInput {

    display: grid;

    grid-template-columns:
        300px 120px;

    justify-content: center;

    gap: 10px;

    margin: 12px auto;
}


.numberInput input {

    height: 48px;

    padding: 0 10px;

    font-size: 20px;
}


.numberInput button {

    min-height: 48px;

    font-size: 17px;
    font-weight: bold;
}




/* =========================================================
   神経衰弱
========================================================= */

#memoryContainer {

    width: min(100%, 900px);

    margin: 0 auto;
}


#memoryInfo {

    min-height: 42px;

    padding: 8px;

    text-align: center;

    font-size: 18px;
    font-weight: bold;
}


#memoryBoard {

    display: grid;

    gap: 8px;

    width: min(100%, 800px);

    margin: 10px auto 40px;
}


.memoryCard {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    padding: 3px;

    overflow: hidden;

    background: #e8edf0;

    border-radius: 8px;

    cursor: pointer;
}


.memoryCard img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 6px;
}


.memoryCard.matched {

    opacity: 0.62;
}


.cardNo {

    position: absolute;

    z-index: 3;

    top: 4px;
    left: 5px;

    padding: 2px 5px;

    background:
        rgba(255, 255, 255, 0.88);

    border-radius: 5px;

    font-size: 13px;
    font-weight: bold;
}




/* =========================================================
   15パズル
========================================================= */

#puzzle15Container {

    width: min(100%, 800px);

    margin: 0 auto;
}


#puzzle15Settings {

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 10px 0;
}


#puzzle15Settings select,
#puzzle15Settings button {

    min-height: 42px;

    padding: 6px 12px;

    font-size: 17px;
}


#puzzle15Info {

    margin: 8px 0 4px;

    text-align: center;

    font-size: 20px;
    font-weight: bold;
}


#puzzle15Message {

    min-height: 28px;

    margin: 4px 0 8px;

    text-align: center;

    font-size: 17px;
}


#puzzle15Board {

    display: grid;

    width: 520px;
    height: 520px;

    margin: 10px auto;

    gap: 4px;

    padding: 4px;

    background: #777;

    border: 2px solid #777;
    border-radius: 7px;

    box-sizing: border-box;
}


.puzzle15Tile {

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 0;

    padding: 0;

    background: #eee;

    border: 1px solid #777;
    border-radius: 5px;

    font-size: 32px;
    font-weight: bold;

    cursor: pointer;

    overflow: hidden;
}


.puzzle15Tile.empty {

    background: transparent;

    border: none;

    cursor: default;
}



/* =========================================================
   音楽もぐらたたき
========================================================= */

#moleContainer {

    width: min(100%, 850px);

    margin: 0 auto;
}


#moleSettings {

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 10px 0;
}


#moleSettings select,
#moleSettings button {

    min-height: 42px;

    padding: 6px 12px;

    font-size: 17px;
}


#moleInfo {

    margin: 8px 0 4px;

    text-align: center;

    font-size: 20px;
    font-weight: bold;
}


#moleMessage {

    min-height: 28px;

    text-align: center;

    font-size: 17px;
}


#moleBoard {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

    width: 720px;

    max-width: 100%;

    margin: 15px auto;
}


.moleHole {

    position: relative;

    width: 100%;
    height: 150px;

    padding: 0;

    overflow: hidden;

    background: #ddd;

    border: 2px solid #777;
    border-radius: 50%;

    box-sizing: border-box;
}


.mole {

    position: absolute;

    left: 50%;
    bottom: -100px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;
    justify-content: center;

    width: 90px;
    height: 90px;

    background: #777;

    color: white;

    border-radius: 50%;

    font-size: 40px;
    font-weight: bold;

    transition:
        bottom 0.12s,
        transform 0.12s;
}


.moleHole.active .mole {

    bottom: 18px;
}


.moleHole.hit .mole {

    transform:
        translateX(-50%)
        scale(0.78);
}





/* =========================================================
   オセロ
========================================================= */

#othelloContainer {

    width: min(100%, 800px);

    margin: 0 auto;
}


#othelloInfo {

    min-height: 42px;

    padding: 8px;

    text-align: center;

    font-size: 18px;
    font-weight: bold;
}


#othelloBoard {

    display: grid;

    grid-template-columns:
        repeat(8, 1fr);

    gap: 2px;

    width: 620px;
    height: 620px;

    margin: 10px auto 40px;

    padding: 4px;

    background: #174f32;

    border-radius: 5px;

    box-sizing: border-box;
}


.othelloCell {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    padding: 0;

    background: #2e8b57;

    border:
        1px solid rgba(0, 0, 0, 0.35);

    border-radius: 0;

    cursor: pointer;
}


.othelloCell.legal::after {

    position: absolute;

    z-index: 1;

    top: 42%;
    left: 42%;

    width: 16%;
    height: 16%;

    background:
        rgba(255, 255, 255, 0.55);

    border-radius: 50%;

    content: "";
}


.othelloCell.lastMove {

    outline: 3px solid #ffd54f;

    outline-offset: -3px;
}


.disc {

    position: absolute;

    z-index: 2;

    top: 14%;
    left: 14%;

    width: 72%;
    height: 72%;

    border-radius: 50%;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.45);
}


.disc.black {

    background: #111;
}


.disc.white {

    background: white;

    border: 1px solid #aaa;
}




/* =========================================================
   ハノイの塔
========================================================= */

#hanoiContainer {

    width: min(100%, 1000px);

    margin: 0 auto;
}


#hanoiSettings {

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 8px 0;
}


#hanoiSettings select,
#hanoiSettings button {

    min-height: 42px;

    padding: 6px 12px;

    font-size: 17px;
}


#hanoiInfo {

    margin: 6px 0 3px;

    text-align: center;

    font-size: 19px;
    font-weight: bold;
}


#hanoiMessage {

    min-height: 26px;

    text-align: center;

    font-size: 16px;
}


#hanoiBoard {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    column-gap: 20px;

    width: 900px;
    max-width: 100%;

    height: 330px;

    margin: 10px auto;

    padding: 8px;

    box-sizing: border-box;
}


.hanoiTower {

    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    padding: 0;

    background: #fafafa;

    border: 1px solid #aaa;
    border-radius: 7px;

    overflow: hidden;
}





/* ===== PC版「作曲」統合CSS ===== */
/* =========================================================
   固定作曲入力部
========================================================= */

#composerInputArea {
    position: sticky;
    top: 0;
    z-index: 100;

    padding: 10px 20px 12px;

    background: white;

    border-bottom: 1px solid #bbb;

    box-shadow:
        0 4px 8px
        rgba(0, 0, 0, 0.12);
}


/* =========================================================
   設定
========================================================= */

.composerSettings {
    display: flex;
    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 10px;
}

.songNameArea {
    display: flex;
    align-items: center;
    gap: 7px;
}

#composerSongName {
    width: 260px;
    padding: 7px 10px;
}

.composerSettings select {
    padding: 7px 10px;
}

.durationArea {
    display: flex;
    align-items: center;
    gap: 5px;
}

#composerDurationButton {
    min-height: 38px;

    padding: 5px 14px;

    font-weight: bold;

    border-radius: 6px;
}


/* =========================================================
   鍵盤共通
========================================================= */

.keyboardPanel {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
}


/* =========================================================
   3段鍵盤
========================================================= */

.keyboardRow {
    display: flex;
    align-items: center;

    margin: 4px 0;
}

.keyboardLabel {
    width: 55px;

    text-align: center;

    font-weight: bold;
}

.threeKeys {
    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 5px;

    flex: 1;
}

.threeKeys button {
    min-height: 42px;

    border: 1px solid #777;

    border-radius: 5px;

    background: white;

    font-size: 17px;
    font-weight: bold;
}

.threeKeys button:hover {
    background: #eef5ff;
}

.threeKeys button:active {
    transform: translateY(1px);
}


/* =========================================================
   ピアノ鍵盤
========================================================= */

#pianoKeyboard {
    padding: 5px 0;
}

#pianoKeys {
    position: relative;

    display: flex;

    width: 100%;
    max-width: 1100px;

    height: 150px;

    margin: 0 auto;

    user-select: none;
}

.pianoWhiteKey {
    position: relative;

    flex: 1;

    height: 150px;

    padding-top: 108px;

    border: 1px solid #333;

    background: white;

    text-align: center;

    font-size: 14px;

    cursor: pointer;
}

.pianoWhiteKey:hover {
    background: #f1f5f8;
}

.pianoBlackKey {
    position: absolute;

    top: 0;

    z-index: 5;

    width: 4.2%;
    height: 92px;

    border: 1px solid #111;

    border-radius:
        0 0 4px 4px;

    background: #222;
    color: white;

    text-align: center;

    padding-top: 55px;

    font-size: 12px;

    cursor: pointer;
}

.pianoBlackKey:hover {
    background: #444;
}


/* =========================================================
   編集ボタン
========================================================= */

.composerEditControls {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 12px;

    margin-top: 9px;
}

.composerEditControls button {
    min-width: 125px;
    min-height: 40px;

    padding: 6px 15px;

    border-radius: 7px;

    font-weight: bold;
}

#composerChange.active {
    background: #ffd54f;

    border: 3px solid #333;
}


/* =========================================================
   楽譜領域
========================================================= */

#scoreArea {
    padding: 18px 25px 35px;

    min-height: 500px;
}

.scoreTitleRow {
    display: flex;
    align-items: center;

    gap: 20px;

    margin-bottom: 10px;
}

.scoreTitleRow h2 {
    margin: 0;
}

.scoreHelp {
    color: #666;
    font-size: 14px;
}


/* =========================================================
   楽譜
========================================================= */

#composerScore {
    display: flex;

    flex-wrap: wrap;

    align-content: flex-start;

    gap: 7px;

    min-height: 180px;

    padding: 18px;

    border: 2px solid #aaa;

    border-radius: 8px;

    background: #fafafa;
}

.composerScoreNote {
    min-width: 58px;

    padding: 10px 8px;

    border: 2px solid #aaa;

    border-radius: 7px;

    background: white;

    text-align: center;

    cursor: pointer;

    user-select: none;
}

.composerScoreNote:hover {
    border-color: #555;
}

.composerScoreNote.selected {
    border: 3px solid #c28b00;

    background: #fff1a8;

    transform: translateY(-2px);
}

.composerScoreNote.playing {
    outline: 3px solid #555;
}

.scoreNoteName {
    display: block;

    font-size: 20px;
    font-weight: bold;
}

.scoreNoteDuration {
    display: block;

    margin-top: 3px;

    font-size: 13px;
}


/* =========================================================
   楽譜表示切替
========================================================= */

.scoreDisplaySwitch {
    margin-left: auto;
}

.scoreDisplaySwitch select {
    padding: 6px 10px;
}


/* =========================================================
   五線譜領域
========================================================= */

#staffScoreArea {
    width: 100%;
    min-height: 250px;

    padding: 15px;

    border: 2px solid #aaa;
    border-radius: 8px;

    background: white;

    overflow-x: auto;
}



/*
   五線譜全体
*/

#staffScore {
    width: 100%;
}


/*
   1段の五線譜
*/

.staffLine {
    position: relative;

    width: 100%;
    min-width: 0;

    height: 150px;

    margin-bottom: 20px;
}


/*
   5本の線
*/

.staffRule {
    position: absolute;

    left: 20px;
    right: 20px;

    height: 1px;

    background: #333;
}

.staffRule.line1 {
    top: 45px;
}

.staffRule.line2 {
    top: 57px;
}

.staffRule.line3 {
    top: 69px;
}

.staffRule.line4 {
    top: 81px;
}

.staffRule.line5 {
    top: 93px;
}


/* =========================================================
   ト音記号
========================================================= */

.staffClef {
    position: absolute;

    left: 20px;
    top: 22px;

    z-index: 10;

    width: 50px;

    font-family:
        "Segoe UI Symbol",
        "Noto Music",
        "Bravura",
        serif;

    font-size: 72px;
    line-height: 80px;

    color: #111;

    text-align: center;
}

/* =========================================================
   五線譜上の音符
========================================================= */

.staffNotes {
    position: absolute;

    left: 70px;
    right: 20px;
    top: 0;

    min-width: 0;
    height: 130px;
    overflow: visible;

    /*
       五線
       45,57,69,81,93px
    */

    background:
        linear-gradient(
            to bottom,

            transparent 44px,
            #333 44px,
            #333 45px,
            transparent 45px,

            transparent 56px,
            #333 56px,
            #333 57px,
            transparent 57px,

            transparent 68px,
            #333 68px,
            #333 69px,
            transparent 69px,

            transparent 80px,
            #333 80px,
            #333 81px,
            transparent 81px,

            transparent 92px,
            #333 92px,
            #333 93px,
            transparent 93px
        );
}

/* =========================================================
   五線譜上の1個の音符
========================================================= */

.staffNote {
    position: absolute;

    top: 0;

    width: 42px;
    height: 130px;

    cursor: pointer;

    user-select: none;

    transform: translateX(-50%);

    z-index: 5;
}









/*
   ♯
*/

.noteSharp {
    position: absolute;

    left: -8px;

    font-size: 21px;

    font-weight: bold;

    z-index: 7;

}


/*
   音名表示
*/

.staffNoteName {
    position: absolute;

    top: 112px;
    left: -2px;

    width: 42px;

    text-align: center;

    font-size: 13px;

    color: #333;
}


/* =========================================================
   五線譜 音符画像
========================================================= */

.staffNoteImage {
    position: absolute;

    left: -11px;

    width: 64px;
    height: 64px;

    object-fit: contain;

    pointer-events: none;

    z-index: 6;
}


/* =========================================================
   五線譜 休符画像
========================================================= */

.staffRestImage {
    position: absolute;

    left: -11px;
    top: 33px;

    width: 64px;
    height: 64px;

    object-fit: contain;

    pointer-events: none;

    z-index: 6;
}


/* =========================================================
   選択音
========================================================= */

.staffNote.selected::before {
    content: "";

    position: absolute;

    left: 0;
    top: 12px;

    width: 40px;
    height: 90px;

    background:
        rgba(255, 213, 79, 0.45);

    border-radius: 7px;

    z-index: -1;
}


/* =========================================================
   加線
========================================================= */

.ledgerLine {
    position: absolute;

    left: 3px;

    width: 28px;
    height: 1px;

    background: #111;

    z-index: 5;
}






/* =========================================================
   演奏
========================================================= */

.composerControls {
    display: flex;

    justify-content: center;

    gap: 12px;

    margin: 18px 0;
}

.composerControls button {
    min-width: 130px;

    min-height: 44px;

    padding: 7px 15px;

    border-radius: 7px;

    font-weight: bold;
}


#composerPlay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}


.playIcon {
    width: 26px;
    height: 26px;

    object-fit: contain;

    pointer-events: none;
}



/* =========================================================
   保存
========================================================= */

.saveArea,
.fileArea {
    max-width: 900px;

    margin: 20px auto;

    padding: 15px;

    border-top: 1px solid #ccc;

    text-align: center;
}

.saveArea h3,
.fileArea h3 {
    margin: 0 0 12px;
}

.saveControls {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}

.saveControls button {
    min-height: 40px;

    padding: 6px 15px;
}

#composerSavedList {
    min-width: 240px;

    padding: 7px;
}


/* =========================================================
   ファイル保存
========================================================= */

.composerFileControls {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 10px;
}

.composerFileControls button {
    flex: none;

    min-width: 140px;
    min-height: 44px;

    padding: 8px 15px;

    font-weight: bold;

    border-radius: 7px;
}



#composerContainer { width:100%; max-width:1200px; margin:0 auto; box-sizing:border-box; }
#composerContainer .composerTopBar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 20px; background:#263238; color:white; font-size:20px; }
#composerContainer .composerTopBar select { margin-left:6px; padding:6px 10px; }
#composerContainer #composerInputArea { position:sticky; top:0; }
#composerContainer .hidden { display:none !important; }
@media (max-width:900px){#composerContainer .scoreTitleRow{flex-wrap:wrap}#composerContainer .scoreDisplaySwitch{margin-left:0}#composerContainer .composerFileControls{flex-wrap:wrap}}