/* =================================================================== */
/*  Webフォント  */
/* =================================================================== */
.dotgothic16-regular {
    font-family: "DotGothic16", sans-serif;
    font-weight: 400;
    font-style: normal;
}


/* =================================================================== */
/*  HTMLとbody（基礎・土台）  */
/* =================================================================== */


/* 基本ページ表示設定 */
html {
    background: unset;
    background: black;
}



body {
    /* 最低でも画面の縦幅分の表示領域を確保する命令 */
    height: auto;
    min-height: 100svh;
    /* 横幅の表示領域を画面の100%に設定 */
    width: 100%;
    /* 余白を削除 */
    margin: 0;
    padding: 0;

    /* ページ全体のフォントを設定*/
    /* 游明朝はWindowsとMacで表示が違いすぎるのでNG。特にWindowsが読めたもんじゃないくらい細い*/
    /* 雰囲気に調和してるのでドットフォントを採用*/
    font-family: "DotGothic16", sans-serif;


    /* ページ全体の背景色を設定 */
    /* フッターの下から稀に白がチラチラするのが嫌だから、下から10pxだけ黒くしてるよ */
    background: linear-gradient(to top, black 10px, whitesmoke 10px);

}

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


/* headerのスタイル設定 */
header {
    /* 見出しの下の余白を調整 */
    margin-bottom: 10svh;

    padding-top: 10svh;


}

/* ヘッダー画像 */
.header-img {
    /* 画像をブロック要素にする */
    display: block;
    /* 左右のマージンを自動で調整して中央揃え */
    margin: 0 auto;
    /* サイズ */
    width: 17vh;
    max-width: 120px;
    min-width: 80px;
    height: auto;

}



/* =================================================================== */
/*  トップ */
/* =================================================================== */



/* トップページ専用の領域設定 */
.top-container {
    width: 95%;
    margin: 0 auto;
    margin-bottom: 10svh;
}


/* ヒーローdiv */
#hero-visual {
    /* 横方向の中央揃え */
    margin: 0 auto;
    padding-top: 10svh;
}


/* hero-self-portrait （トップの自画像）  */
#hero-portrait {
    /* 画像をブロック要素にする */
    display: block;
    /* 中央揃え */
    margin: 0 auto;
    /* サイズ */
    width: 17vh;
    max-width: 120px;
    min-width: 80px;
    height: auto;
}


/* hero-Handwritten-title （トップの自筆の題字）  */
#hero-Handwritten-title {
    /* 画像をブロック要素にする */
    display: block;
    /* 中央揃え */
    margin: 0 auto;
    /* サイズ */
    width: 25vh;
    max-width: 200px;
    min-width: 150px;
    height: auto;
}

/* top-index （目次の入れ物）  */
.top-index {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}


/* div要素を横に並べる設定 */
.top-indexYOKOGAMEN {
    display: flex;
    margin: 0;
    /* はみ出ても折り返さない設定 */
    flex-wrap: nowrap;
    /* 必要なら space-around, space-evenly に変更可能 */
    justify-content: space-between;

}

/* div1を横に並べる時に、それぞれのdiv1の領域を再定義 */
.divYOKOGAMEN {
    margin: 0;
    /* 横方向の中央揃え */
    width: 23vw;
}



/* 「製作中！」のバッジ専用設定 */
#seisakutotyuu {
    /* 他の要素を無視して画面の左上に固定 */
    position: fixed;
    top: 2svh;
    left: 2svh;
    /* 他の要素より前面に表示 */
    z-index: 9999;
    /* サイズ */
    /* まず横幅を画面の横幅の8%に。100pxよりは小さくならないように制限 */
    width: 8svw;
    min-width: 100px;
    height: auto;
    pointer-events: none;
}







/* =================================================================== */
/*  🛠️🛠️🛠️🛠️🛠️🛠️🛠️🛠️共通部品🛠️🛠️🛠️🛠️🛠️🛠️🛠️🛠️🛠️ */
/* =================================================================== */

/* 通常の表示領域設定 */
.container {
    width: 95%;
    max-width: 700px;
    margin: 0 auto;
    margin-bottom: 10svh;
}


/* フッター */
footer {
    position: sticky;
    top: 100svh;
    width: 100%;
    height: 5vh;
    min-height: 50px;

    text-align: center;
    font-size: 2vh;
    font-size: clamp(15px, 2vh, 20px);
    color: #ffffff;
    background-color: #000000;
}

.black-div {
    /* 横方向の中央揃え */
    margin: 0 auto;
    background-color: #000000;
}





/* =================================================================== */
/*  📔📔📔📔📔📔📔📔📔📔📔日記📔📔📔📔📔📔📔📔📔📔📔📔 */
/* =================================================================== */

/* 日記画像 */
.nikki-img {
    /* 画像をブロック要素にする（文字扱いじゃなくてブロック扱いにするっぽい） */
    display: block;
    /* 上下の余白 */
    margin: 3svh auto;
    /* サイズ指定。基本は親要素の横幅100%目一杯に表示。だけど縦長の写真の場合は縦幅を画面の80%になるようにしてる */
    width: 100%;
    height: auto;
    max-height: 80svh;
    /* これ設定すると縦長の写真がぺちゃんこにならん*/
    object-fit: contain;

}


/* 日記のフォント */
.nikki-font {
    /* テキストの色を黒に設定 */
    color: #000;

    /* サイズ */
    font-size: clamp(12px, 2.5vh, 20px);

    /* 読みやすいように行間を調節 */
    line-height: 6svh;

    text-align: center;

}







/* =================================================================== */
/*  共通文字設定 */
/* =================================================================== */

/* 大見出し */
h1 {
    color: #000;
    /* テキストの色を黒に設定 */

    /* 文字の大きさを縦幅の5%に設定。最大30pxに制限*/
    font-size: 5vh;
    font-size: clamp(25px, 5vh, 40px);

    /* テキストを中央に揃える */
    text-align: center;


    /* 大きい文字にアンチエイリアスがかかると視認性が落ちるので、削除 */
    /* Chrome, Safari */
    -webkit-font-smoothing: none;
    /* Firefox on macOS */
    -moz-osx-font-smoothing: grayscale;

}

/* 中見出し */

h2 {
    /* テキストの色を黒に設定 */
    color: #000;

    /* 文字の大きさを縦幅の3%に設定。最低20px、最大30pxに制限*/
    font-size: 3vh;
    font-size: clamp(20px, 3vh, 30px);

    /* テキストを中央に揃える */
    text-align: center;

    /* 大きい文字にアンチエイリアスがかかると視認性が落ちるので、削除 */
    /* Chrome, Safari */
    -webkit-font-smoothing: none;
    /* Firefox on macOS */
    -moz-osx-font-smoothing: grayscale;

}




/* ナビゲーション(nav)のスタイル設定 */
nav {
    text-align: center;
    /* リスト全体を中央揃え */
    line-height: 2.0;
    /* 行間を少し広げる（1.6は文字の高さの1.6倍の行間） */
    font-size: 2.5vh;
    font-size: clamp(20px, 2.5vh, 25px);
    font-family: "DotGothic16", sans-serif;
}

a {
    color: #000000;
    /* すべてのデフォルトスタイルを解除 */
}

/* リンクにカーソルがかぶさった時のスタイル設定 */
a:hover {
    /* ホバー時に黒の下線を表示 */
    text-decoration: underline;
    text-decoration-color: #000000;
    /* フォント設定 */
    color: #000000;
}


/* 文字からアンチエイリアス消してガビガビにするやつ */
.pixelated-text {
    -webkit-font-smoothing: none;
    /* Chrome, Safari */
    -moz-osx-font-smoothing: grayscale;
    /* Firefox on macOS */
}


/* テキストを中央に揃えるクラス */
.center-text {
    text-align: center;
    /* テキストを中央に揃える */
}

.white-text {
    color: whitesmoke;
}










/* =================================================================== */
/*  🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧オーディオプレーヤー🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧 */
/* =================================================================== */


/* オーディオプレーヤーの土台領域 */
#audioPlayerPlaceholder {
    /* サイズ */
    /* widthがmaxで700pxという制限がかかってるので、それに合わせて全部の値に「700pxの場合の数値」を上限として設定してます */
    width: 100%;
    height: clamp(90px, 28vh, 196px);
    /* 横方向の中央揃え */
    margin: 0 auto;
    /* 余白削除 */
    padding: 0;
    /* 装飾 */
    background-color: transparent;
}

/* オーディオプレーヤー自体 */
#audioPlayer {
    /* グリッドデザイン */
    display: grid;
    /* 均等に三分割 */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    /* サイズ */
    width: 100%;
    height: clamp(90px, 28vh, 196px);
    margin: 0;
    /* 背景色 */
    background-color: #000000;
    /* 内側に余白を作る。 */
    /* box-sizingでborder-boxにすると、余白を要素のwidth・heightに含める計算になるよ */
    padding: clamp(8px, 2.5vh, 17.5px);
    box-sizing: border-box;

}

/* オーディオinfoコンテナ */
#audioinfo {
    /* グリッド配置 */
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row: 1;
}


/* 音源タイトルについて */
#trackTitle {
    font-size: clamp(11px, 3.5vh, 24.5px);
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    padding: 0;
    /* 文字の上下の余白をなくしてる（文字に対する列の高さを1としてる） */
    line-height: 1;
    /* 下との間隔 */
    margin-bottom: clamp(3.2px, 1vh, 7px);
}

/* 音源のアーティストについて*/
#trackArtist {
    font-size: clamp(9.6px, 3vh, 21px);
    color: #c3c3c3;
    margin: 0;
    padding: 0;
    /* 下との間隔 */
    margin-bottom: clamp(3.2px, 1vh, 7px);
}

/* シークバー全体設定 */
#seekBar-container {
    /* グリッド配置 */
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row: 2;
    /* Flexbox化 */
    display: flex;
    /* サイズ */
    width: 100%;
    /* 自身を中央配置 */
    align-self: center;
    justify-self: center;
    /* 縦方向を中央揃え */
    align-items: center;
    /* 均等な感覚で配置（再生時間は左端へ、シークバーは中央、総時間は右端へ） */
    justify-content: space-between;
    /* 最低限設けたい間隔 */
    gap: 2%;
}


/* 現在の再生時間と総再生時間の表示 */
#currentTimeDisplay,
#durationDisplay {
    font-size: clamp(9.6px, 3vh, 21px);
    color: #dedede;
}

/* シークバーそのもののスタイル */
#seekBar {
    /* クロームやサファリ用のデフォルトスタイルを無効化 */
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: clamp(9.6px, 3vh, 21px);
    background: #ffffff;
    background: linear-gradient(to right, #ffffff 0%, #ffffff 0%, #000000 0%, #000000 100%);
    /* 枠線を追加 */
    border: clamp(1px, 0.2vh, 1.4px) solid #ffffff;
    /* 「アウトライン」「ボーダー」「丸み」「影」を完全に削除 */
    outline: none;
    border-radius: 0;
    box-shadow: none;
    /* 横方向の操作だけを許可 */
    touch-action: pan-x;

}





/* シークバーのつまみ（webkit系向け）*/
#seekBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10svh;
    height: 5svh;
    background: transparent;
    /* 背景を透明に設定 */
    border: none;
    /* 境界線を削除 */
    cursor: grab;
    /* デフォルトの影やボーダーを削除 */
    box-shadow: none;
    /* ポインタを表示して操作可能に */
}

/* シークバーのつまみ（Firefox向け）*/
#seekBar::-moz-range-thumb {
    width: 10svh;
    height: 5svh;
    background: transparent;
    /* 背景を透明に設定 */
    border: none;
    /* 境界線を削除 */
    cursor: pointer;
    /* ポインタを表示して操作可能に */
}


/* チャプターdiv*/
#chapter-container {
    /* 一列目三行目に配置 */
    grid-column: 1;
    grid-row: 3;
    background-color: whitesmoke;
    width: clamp(11px, 3.5vh, 24.5px);
    height: clamp(11px, 3.5vh, 24.5px);
    /* この子要素だけ中央に配置 */
    align-self: end;
    justify-self: start;
}


/* 再生ボタン設定 */
#playPauseButton {
    /* グリッドデザイン */
    display: grid;
    /* 一列目三行目に配置 */
    grid-column: 2;
    grid-row: 3;
    /* 横幅 */
    width: 100%;
    height: 100%;
    /* 装飾リセット */
    border: none;
    cursor: pointer;
    background-color: transparent;
    /* この子要素だけ中央に配置 */
    align-self: center;
    justify-self: center;

    /* すべての余白をリセット */
    padding: 0;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
}

/* SVG（再生ボタン）設定*/
#buttonIcon {
    /* サイズ */
    width: clamp(11px, 3.5vh, 24.5px);
    height: clamp(11px, 3.5vh, 24.5px);
    cursor: pointer;
    /* この子要素だけ中央に配置 */
    align-self: end;
    justify-self: center;

    /* アンチエイリアス消去 */
    image-rendering: pixelated;
}






/* =================================================================== */
/*  🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧オーディオプレーヤー（ミニ）🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧🎧 */
/* =================================================================== */



/* Audioミニ・レディー？*/
#audioPlayer.ready {
    /* flex化 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* サイズ */
    width: 95%;
    max-width: 700px;
    height: 28svh;

    /* 位置 */
    position: fixed;
    right: 0;
    left: 0;
    margin: 0 auto;
    bottom: var(--current-bottom, none);


    /* 内側に余白を作る。 */
    /* box-sizingでborder-boxにすると、余白を要素のwidth・heightに含める計算になるよ */
    padding: 5%;
    box-sizing: border-box;

    /* 装飾 */
    background-color: #000000;


}




/* Audioミニ！*/
#audioPlayer.ready.mini {
    /* flex化 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    /* サイズ */
    width: 95%;
    max-width: 100%;
    height: 28svh;


    /* 内側に余白を作る。 */
    /* box-sizingでborder-boxにすると、余白を要素のwidth・heightに含める計算になるよ */
    padding: 4%;
    box-sizing: border-box;

    /* 位置 */
    /* bottomは「width95%で左右に2.5%づつ余白できてるから、2.5svwで左右と同じになる」 */
    position: fixed;
    bottom: 2.5svw;
    right: 0;
    left: 0;
    margin: 0 auto;



    /* 装飾 */
    background: #000000;
    box-shadow: 0 4px 8px rgba(33, 33, 33, 0.2);
    z-index: 1000;

    /* トランジション */
    transition: all 1s linear
}


/* オーディオinfoコンテナ（ミニ）*/
#audioinfo.mini {
    /* Flexbox化 */
    display: flex;
    /* サイズ */
    width: 100%;
    /* 全体を中央に配置 */
    margin: 0 auto;
    /* 縦方向を中央揃え */
    align-items: center;
    /* 均等な感覚で配置（再生時間は左端へ、シークバーは中央、総時間は右端へ） */
    justify-content: start;
    /* 最低限設けたい間隔 */
    gap: 2%;
}

/* これ・・・・・・何・・・・・・？？？？？？？ */
#audioinfo.mini p {
    margin: 0;
    padding: 0;
    /* 余計な上下余白を削除 */
}



/* ミニタイトル */
#trackTitle.mini {
    font-size: 2.5svh;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
}

/* ミニアーティスト*/
#trackArtist.mini {
    font-size: 2.5svh;
    color: #c3c3c3;
    margin: 0;
}


/* ミニ再生ボタン */
#playPauseButton.mini {
    /* 要素をブロックにする */
    display: block;
    /* 横幅 */
    width: 10svh;
    /* 正方形のアスペクト比を設定（注意：aspect ratioはwidthしか参考にできない） */
    aspect-ratio: 1 / 1;
    /* 中央揃え */
    margin: 0 auto;
    border: none;
    cursor: pointer;
    background-color: transparent;
}



/* ミニプレーヤー設定（画面上部に移動する用）*/
#audioPlayer.mini.at-top {
    /* 横幅を30%に */
    width: 87%;
    height: 15svh;
    /* 余白 */
    padding: 2svh;
    /* 背景色 */
    background-color: #000000;
    /* 配置を自分で決める設定 */
    position: fixed;
    /* 画面上から */
    top: 2.5svh;
    bottom: auto;
    /* 横方向の中央基準に移動 */
    left: 50%;
    /* 自分の幅の半分を左に動かして中央に配置 */
    transform: translateX(-50%);
    background: #000000;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}