/* --- 全体スタイルとフォント設定 --- */
body {
    background-color: #2a3a4a; /* 紺色の背景 */
    background-image: linear-gradient(white 1px, transparent 1px),
                      linear-gradient(90deg, white 1px, transparent 1px),
                      linear-gradient(rgba(255,255,255,.3) .5px, transparent .5px),
                      linear-gradient(90deg, rgba(255,255,255,.3) .5px, transparent .5px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin: 0;
    padding-top: 1vh; /* 上部の余白を戻す */
    padding-bottom: 1vh; /* 上部の余白を戻す */
    box-sizing: border-box;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* --- ゲームボーイ本体 --- */
.gameboy-body {
    background-color: #faedc2;
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 15px;
    padding: 30px 30px 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.5);
    border: 2px solid #b4b4ac;
    position: relative;
    box-sizing: border-box;
}

/* --- 画面エリア --- */
.screen-frame {
    background-color: #808080;
    border-radius: 10px;
    padding: 20px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.screen-header {
    text-align: center;
    color: #d8d8d0;
    font-size: 14px;
    margin-bottom: 10px;
}

.screen-content {
    background-color: #acb586;/*#9bbc0f;*/
    color: #0f380f;
    padding: 20px;
    height: 570px;
    border-radius: 5px;
    border: 2px solid #333;
    overflow-y: auto;
    background-image: linear-gradient(rgba(15, 56, 15, 0.2) 50%, transparent 50%),
                      linear-gradient(90deg, rgba(15, 56, 15, 0.2) 50%, transparent 50%);
    background-size: 4px 4px;
}

.profile-content { text-align: center; }
.profile-title,
.profile-content h2 {
    font-size: 22px; margin: 10px 0; 
    font-family: 'Press Start 2P', 'DotGothic16', sans-serif;
}
.myface { width: 150px; height: 150px; border-radius: 8px; border: 2px solid #0f380f; margin-bottom: 15px; }
/* .myhobby { width: 150px; height: 220px; border-radius: 8px; border: 2px solid #0f380f; margin-bottom: 15px; } */
.profile-title { font-size: 28px; margin-bottom: 15px; }
.profile-content h2 { font-size: 25px; margin: 10px 0; }
.profile-content p { font-size: 20px; font-weight: 800; line-height: 1.6; margin: 5px 0; }

/* --- 操作ボタンエリア --- */
.controls-area {
    display: flex;
    padding: 10px 0;
    /* 十字ボタンを右にずらすために調整 */
    justify-content: flex-end; /* 右端に寄せる */
    align-items: center;
    margin-top: 20px;
    margin-bottom: 0;
    gap: 150px; /* 十字キーとABボタンの間隔を調整 */
}

/* --- 十字キー (D-Pad) --- */
.d-pad {
    position: relative;
    width: 125px; /* サイズは維持 */
    height: 125px;
    display: grid;
    grid-template-areas: ". up ." "left center right" ". down .";
    grid-template-rows: 35% 30% 35%;
    grid-template-columns: 35% 30% 35%;
}
.d-pad-btn {
    background-color: #333;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    transition: background-color 0.2s;
    position: relative; /* ラベルを配置するための基準 */
    z-index: 1; /* ← これを追加 */
}
.d-pad-btn:hover { background-color: #555; }
.d-pad-btn:active { transform: translateY(2px); box-shadow: 1px 1px 2px rgba(0,0,0,0.4); }

.up { grid-area: up; border-radius: 5px 5px 0 0; }
.down { grid-area: down; border-radius: 0 0 5px 5px; }
.left { grid-area: left; border-radius: 5px 0 0 5px; }
.right { grid-area: right; border-radius: 0 5px 5px 0; }
.d-pad-center {
    grid-row: 2 / 4;
    grid-column: 2 / 3;
    background: #333;
    border-radius: 0 0 5px 5px;
}

/* --- 十字キーのラベルをボタンの外側、かつ本体枠内に配置 --- */
.d-pad-btn::after {
    content: attr(data-label);
    position: absolute;
    color: #555; /* 文字色をグレーに戻す */
    font-family: sans-serif;
    font-weight: bold;
    white-space: nowrap;
    font-size: 12px; /* 固定サイズ */
}
/* ラベルの位置調整 */
.up::after { bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); }
.down::after { top: calc(100% + 5px); left: 50%; transform: translateX(-50%); }
/* "HOBBY" と "SNS" のラベルが本体枠に収まるように左右位置を調整 */
.left::after { right: calc(100% + 15px); top: 50%; transform: translateY(-50%); } /* 左ボタンのラベルを右に寄せる */
.right::after { left: calc(100% + 15px); top: 50%; transform: translateY(-50%); } /* 右ボタンのラベルを左に寄せる */

/* 長い文字がボタンからはみ出す場合、文字サイズを少し小さくする調整 */
.d-pad-btn[data-label="ACHIEVEMENTS"]::after {
    font-size: 10px; /* "ACHIEVEMENTS" のみ少し小さく */
}


/* --- A/B ボタン --- */
.ab-buttons {
    display: flex;
    align-items: center;
    /* 十字ボタンを右にずらした分、ABボタンも右に寄せる */
    margin-right: 10px; /* 本体右端からの余白 */
}
.button {
    width: 80px; height: 80px; background-color: #263f8a; border-radius: 50%;
    color: white; text-decoration: none; display: flex; justify-content: center; align-items: center;
    font-size: 30px; box-shadow: 3px 3px 5px rgba(0,0,0,0.4), inset -2px -2px 4px rgba(0,0,0,0.3);
    border: 4px solid #9c2675; transition: all 0.1s;
    -webkit-tap-highlight-color: transparent; /* ← これを追加 */
    outline: none; /* ← これも追加推奨 */
}
.button.a { margin-left: 20px; transform: rotate(-25deg); }
.button.b { transform: rotate(-25deg); }
.button span { transform: rotate(25deg); }
.button:active { transform: rotate(-25deg) translateY(2px); box-shadow: 1px 1px 2px rgba(0,0,0,0.4); }

/* --- HOBBYページ用アコーディオンのスタイル --- */

/* アコーディオン全体のテキストを左揃えに */
.hobby-text {
    text-align: left;
    margin-top: 20px;
}


/* detailsタグの基本スタイル */
.hobby-text details {
    border: 2px solid #0f380f; /* 画面の文字色と同じ枠線 */
    border-radius: 0; /* 四角いデザインに */
    margin-bottom: 12px;
    background: rgba(15, 56, 15, 0.1); /* 背景を少しだけ暗く */
}

/* summaryタグ（クリックする部分）のスタイル */
.hobby-text summary {
    background-color: #0f380f; /* 画面の文字色と同じ背景 */
    color: #acb586; /* 画面の背景色と同じ文字色 */
    padding: 8px 12px;
    font-family: 'Press Start 2P', 'DotGothic16', sans-serif; /* 見出しと同じフォント */
    font-size: 18px;
    cursor: pointer;
    list-style: none; /* 標準の▶マーカーを非表示 */
    position: relative;
}

/* 標準の▶マーカーを非表示 (Chrome, Safari) */
.hobby-text summary::-webkit-details-marker {
    display: none;
}

/* カスタムマーカーを追加 */
.hobby-text summary::before {
    content: '▶';
    margin-right: 10px;
}

/* 開いたときのカスタムマーカー */
.hobby-text details[open] summary::before {
    content: '▼';
}

/* アコーディオン内のpタグ（本文）のスタイル */
.hobby-text details p {
    padding: 15px;
    margin: 0; /* pタグのデフォルトマージンをリセット */
    font-size: 18px;
    line-height: 1.7;
    color: #0f380f; /* 文字色を明示的に指定 */
}

/* アコーディオン内のリストのスタイル */
.hobby-text details ul,
.hobby-text details ol {
    padding-left: 40px; /* リストのインデント（字下げ） */
    margin: 15px 0; /* の間に適切な余白を設定 */
}

/* アコーディオン内のリスト項目（li）のスタイル */
.hobby-text details li {
    font-size: 18px; /* 本文と同じフォントサイズ */
    line-height: 1.7; /* 本文と同じ行間 */
    color: #0f380f;   /* 本文と同じ文字色 */
    padding-left: 5px; /* マーカー（・や数字）とテキストの間の余白 */
    margin-bottom: 0px; /* 各リスト項目間の余白 */
    font-weight: 800;
}

.hobby-text details img {
    max-width: calc(100% - 30px); /* 左右に15pxずつの余白を確保 */
    height: auto;    /* アスペクト比を維持 */
    display: block;  /* インライン要素の余白をなくす */
    margin: 15px auto; /* 上下に余白、左右中央寄せ */
    border: 2px solid #0f380f; /* 画面の文字色と同じ枠線 */
    border-radius: 4px; /* 少し角を丸める */
    box-sizing: border-box; /* paddingやborderを幅に含める */
}

/* YouTube動画のコンテナ */
.responsive {
    padding: 0 15px 15px 15px; /* 動画の上下左右に余白 */
}

/* YouTube動画のiframe */
.responsive iframe {
    max-width: 100%; /* 横幅を画面に合わせる */
    height: auto;
    aspect-ratio: 16 / 9; /* 16:9の比率を維持 */
    border: 2px solid #0f380f; /* 動画に枠線を追加 */
    box-sizing: border-box;
}

/* --- お問い合わせボタンのスタイル --- */
.contact-button-container {
    margin-top: 30px; /* 上の要素との余白 */
}

.contact-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #0f380f; /* 画面の文字色と同じ */
    color: #acb586; /* 画面の背景色と同じ */
    font-family: 'Press Start 2P', 'DotGothic16', sans-serif; /* ドット絵フォント */
    font-size: 18px;
    text-decoration: none;
    border: 2px solid #0f380f;
    box-shadow: 4px 4px 0px #0f380f; /* 影をつけて立体感を出す */
    transition: all 0.1s;
}

/* ボタンをホバーしたときのスタイル */
.contact-button:hover {
    background-color: #3a5c26;
    color: #cdd4aa;
}

/* ボタンを押したときのスタイル */
.contact-button:active {
    transform: translate(4px, 4px); /* 影の分だけ動かす */
    box-shadow: none; /* 押したときに影を消す */
}

.instagram-button {
    display: inline-block;
    margin-top: 5px; /* 上のh2要素との余白 */
    transition: transform 0.2s ease; /* アニメーションを滑らかに */
}

/* ロゴの色を指定 */
.instagram-button svg {
    fill: #0f380f; /* 画面の文字色と同じ */
    width: 60px;   /* ボタンの幅を大きくする */
    height: 60px;  /* ボタンの高さを大きくする */
}

/* ホバーしたときに少し大きくする */
.instagram-button:hover {
    transform: scale(1.1);
}

/* 押したときに少し小さくする */
.instagram-button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

/* --- 言語切り替えスイッチ --- */
.lang-switch-container {
    display: flex;
    justify-content: flex-end; /* 右寄せにする */
    margin-bottom: 10px; /* 下のコンテンツとの余白 */
    padding-right: 5px; /* 右側の微調整 */
}

.lang-switch {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 34px;
}

/* チェックボックス本体を隠す */
.lang-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* スライダーの見た目 */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0f380f; /* ゲームボーイの文字色 */
    border: 2px solid #0f380f;
    transition: .4s;
    border-radius: 34px;
}

/* スライダーの横長の部分 */
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 38px; /* ← 幅を広くする */
    left: 2px;   /* ← 左の位置を調整 */
    bottom: 2px;
    background-color: #acb586; /* ゲームボーイの画面背景色 */
    transition: .4s;
    border-radius: 20px; /* ← 角を丸めた長方形に */
}

/* チェックされたとき（EN選択時）のスタイル */
input:checked + .slider:before {
    transform: translateX(35px); /* ← 移動距離を調整 */
}

input:checked + .slider:before {
    transform: translateX(35px);
}

/* テキストのスタイル */
.lang-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Press Start 2P', sans-serif;
    font-size: 14px;
    color: #acb586;
    pointer-events: none; /* テキストをクリックできないようにする */
}

.lang-text.jp {
    left: 10px;
}

.lang-text.en {
    right: 9px;
}


/* --- レスポンシブ対応 --- */
@media (max-width: 620px) {
    /* bodyの余白をなくし、画面全体を使えるようにする */
    body {
        padding: 0;
    }

    /* ゲームボーイ本体を画面いっぱいに広げる */
    .gameboy-body {
        width: 100%;
        max-width: 100%;
        height: 100vh; /* 画面の高さに合わせる */
        height: 100dvh; /* 動的ビューポート高（アドレスバーなどを考慮） */
        padding: 15px; /* ここを調整: 左右のパディングを少し減らす */
        border-radius: 0; /* 角の丸みをなくす */
        display: flex;
        flex-direction: column;
    }

    /* 画面エリアが残りの高さを全て使うようにする */
    .screen-area {
        flex-grow: 1;
        overflow: hidden; /* はみ出し防止 */
        display: flex;
    }
    .screen-frame {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 10px; /* ここを調整: 画面フレームのパディングも少し減らす */
    }
    /* screen-contentの高さを可変にする */
    .screen-content {
        height: 100%;
        flex-grow: 1;
        padding: 15px; /* ここを調整: コンテンツのパディングも少し減らす */
    }

    /* --- 文字サイズのレスポンシブ対応 --- */
    .profile-title {
        font-size: 6vw; /* メインタイトル */
    }
    .profile-content h2 {
        font-size: 5vw; /* 名前 */
    }
    .profile-content p {
        font-size: 3.5vw; /* 本文 */
    }
    .hobby-text summary {
        font-size: 4vw; /* アコーディオンのタイトル */
    }
    .hobby-text details p {
        font-size: 3.5vw; /* アコーディオンの本文 */
    }
    .hobby-text details li {
        font-size: 3.5vw; /* スマホでも本文と同じフォントサイズに */
    }

    /* --- ボタン類のレスポンシブ対応 --- */
    .controls-area {
        flex-shrink: 0;
        padding: 5px 0;
        display: flex;
        justify-content: center; /* 横方向の中央揃え */
        align-items: center;
        gap: 22vw; /* 十字ボタンとA/Bボタンの間隔 */
        position: relative; /* ← 位置を調整するために追加 */
        left: 4vw;          /* ← 全体を右に4%ずらす */
    }
    .button {
        width: 12vw; /* A/Bボタンを少し小さく */
        height: 12vw;
        font-size: 5.0vw; /* 文字も合わせて小さく */
        -webkit-tap-highlight-color: transparent; /* ← これを追加 */
        outline: none; /* ← これも追加推奨 */
    }
    .button:active {
        /* PC版のtransformからrotate(-25deg)を維持しつつ、縮小と translateY を適用 */
        transform: rotate(-25deg) translateY(0.5vw) scale(0.95); /* スマホに合わせて値を調整 */
        box-shadow: 0.5vw 0.5vw 1vw rgba(0,0,0,0.4); /* 影もスマホに合わせて調整 */
        background-color: rgb(18, 46, 72); /* 少し暗い色 */
        transition: all 0.00001s; /* 素早い反応 */
    }
    .d-pad {
        width: 30vw;
        height: 30vw;
    }
    .d-pad-btn:active {
        transform: translateY(0.5vw); /* スマホに合わせて値を調整 */
        box-shadow: 0.5vw 0.5vw 1vw rgba(0,0,0,0.4); /* 影もスマホに合わせて調整 */
        background-color: #222; /* 十字キーも少し暗い色 */
        transition: all 0.00001s; /* 素早い反応 */
    }
    .contact-button-container {
        margin-top: 5vw; /* 上の余白をvw単位で調整 */
    }

    .contact-button {
        padding: 2vw 4vw; /* パディングをvw単位で調整 */
        font-size: 3.5vw; /* 本文と同じくらいのサイズに */
        box-shadow: 0.8vw 0.8vw 0px #0f380f; /* 影もvw単位で調整 */
        -webkit-tap-highlight-color: transparent; /* ← これを追加 */
        outline: none; /* ← これも追加推奨 */
    }

    .contact-button:active {
        transform: translate(0.8vw, 0.8vw); /* 影の分だけ動かす */
        transition: all 0.00001s; /* 素早い反応 */
    }

    .instagram-button svg {
        width: 10vw; /* ロゴの幅を画面サイズに合わせる */
        height: 10vw; /* ロゴの高さを画面サイズに合わせる */
    }

    .ab-buttons {
        /* margin-right: -10vw; を削除、または調整 */
        margin-right: 0; /* 右側のマイナス余白をなくす */
        margin-left: 0; /* 左側にも余計な余白がないか確認 */
    }
    .d-pad-btn::after {
        font-size: 2.2vw;
        color: #555;
        text-align: center;
    }
    .up::after {
        bottom: calc(100% + 5px);
        left: 50%;
        transform: translateX(-50%);
    }
    .down::after {
        top: calc(100% + 5px);
        left: 50%;
        transform: translateX(-50%);
    }
    .left::after {
        right: calc(100% + 1.5vw);
        top: 50%;
        transform: translateY(-50%);
    }
    .right::after {
        left: calc(100% + 1.5vw);
        top: 50%;
        transform: translateY(-50%);
    }
    .d-pad-btn[data-label="ACHIEVEMENTS"]::after {
        font-size: 1.8vw;
    }

    .lang-switch-container {
        margin-bottom: 2vw;
    }
    .lang-switch {
        width: 70px; /* 全体の幅を少し小さく */
        height: 30px; /* 全体の高さを少し小さく */
    }
    .slider:before {
        height: 22px; /* ハンドルの高さを小さく */
        width: 32px;  /* ハンドルの幅を小さく */
        left: 2px;
        bottom: 2px;
    }
    input:checked + .slider:before {
        transform: translateX(30px); /* スマホでの移動距離 */
    }
    .lang-text {
        font-size: 10px; /* テキストを少し小さく */
    }
    .lang-text.jp {
        left: 10px;
    }
    .lang-text.en {
        right: 10px;
    }
}