/*
Theme Name: My Retro Theme
Author: Your Name
Description: 2000年代初頭風の個人ログ用シンプルテーマ
Version: 1.0
*/

/* 2000年代風のレトロな基本スタイル例 */
body {
    background-color: #f0f0f0; /* 薄いグレーの背景 */
    color: #333333;
    font-family: "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /* 当時定番のフォント */
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

#container {
    width: 780px; /* 当時のスタンダードな画面幅 */
    margin: 0 auto;
    background-color: #ffffff;
    border: 1px solid #999999;
    padding: 20px;
}

h1 {
    font-size: 18px;
    border-bottom: 2px dashed #666666; /* 破線の下線 */
    padding-bottom: 5px;
}

a {
    color: #0000ff; /* 青色リンク */
    text-decoration: underline;
}

a:visited {
    color: #800080; /* 紫色訪問済みリンク */
}
/* サイドバー内の画像をエリア枠内（100%）に自動で収める設定 */
#sidebar img {
    max-width: 100%;
    height: auto;
}

/* 特定のプロフィール画像（img130.jpg）のサイズ個別調整 */
#sidebar img[src*="img130.jpg"] {
    width: 150px; /* お好みの幅（例: 150px）に調整してください */
    height: auto;
    display: block;
    margin-top: 5px;
}


/* ==========================================
   1. ブラウザサイズに合わせて自動改行
   ========================================== */
body, #container, main, article, .content {
    /* 長い英単語やURLが画面外にはみ出るのを防ぎ、枠内で自動改行する設定 */
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ==========================================
   2. YouTube埋め込み動画をブラウザ・枠幅に合わせて自動縮小
   ========================================== */
/* WordPressが埋め込んだYouTube（iframeやvideo）を親要素の幅に収める */
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"],
.content iframe,
.content video {
    max-width: 100% !important;
    height: auto !important;
    /* 縦横比（16:9）を保ったまま綺麗に縮小させる設定 */
    aspect-ratio: 16 / 9;
}

/* ==========================================
   3. スマホ閲覧サイズに合わせたレスポンシブ表示
   ========================================== */
/* ==========================================
   PC用レイアウト（基本は横並び2カラム）
   ========================================== */
#wrapper {
    display: flex;
    gap: 20px;
}

main {
    flex: 1;
    min-width: 0; /* フレックスボックス内での崩れ防止 */
}

#sidebar {
    width: 220px;
    flex-shrink: 0;
}

/* ==========================================
   スマホ用レイアウト（画面幅768px以下）
   ========================================== */
/* ==========================================
   スマホ用レイアウト（画面幅768px以下）
   ========================================== */
@media screen and (max-width: 768px) {

    /* スマホ内のあらゆる要素（*）に対して強制自動改行を適用 */
    *,
    body, p, h1, h2, h3, h4, a, li, dt, dd, .content {
        word-break: break-all !important;      /* 枠端で機械的に強制改行 */
        overflow-wrap: anywhere !important;   /* 長い単語・URLもどこでも折り返し */
        line-break: strict !important;         /* 禁則処理を有効化 */
        white-space: normal !important;        /* 改行なし（nowrap）を打ち消し */
    }

    /* スマホ閲覧時の基本文字サイズ */
    body {
        font-size: 14px !important; /* ★文字サイズ指定（お好みで変更可能） */
        line-height: 1.7 !important;
    }

    /* 記事タイトル等の文字サイズ調整 */
    h1 { font-size: 18px !important; }
    h2 { font-size: 16px !important; }

    /* レイアウト設定 */
    #container {
        width: 100% !important;
        box-sizing: border-box;
        padding: 12px !important;
    }

    #wrapper {
        display: block !important;
    }

    main,
    #sidebar {
        width: 100% !important;
    }

    #sidebar {
        margin-top: 30px;
        border-top: 1px dashed #999999;
        padding-top: 20px;
    }
}