/* --- ベーススタイル --- */
body {
    background-color: #222;
    color: #d1d1d1;
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    text-align: center; /* h1を中央に */
}

h1 {
    margin-bottom: 20px;line-height:1.4;font-size:1.6em;
}

a{
    color: #d1d1d1;
    text-decoration: none; /* デフォルトの下線を削除 */
}

a:hover {
    text-decoration: underline; /* hover時のみ下線を出す */
}

/* --- コンテナのスタイル --- */
.container {
    width: 600px; /* PCでの幅 */
    margin: 0 auto; /* 中央寄せ */
}

/* --- 個々のアイテムのスタイル --- */
.item, .link-item {
    display: flex; /* 画像とテキストを横並びにする */
    align-items: center; /* 垂直方向の中央揃え */
    padding: 20px;
    margin-bottom:12px;
    border: 1px solid #666; /* 枠線 */
    border-radius: 8px; /* 角丸 */
    background-color: #333; /* 枠内の背景色 */
    text-align: left; /* テキストを左寄せに戻す */
}

/* リンク要素に対しても、a:hoverのスタイルを適用するためにリンク全体を枠線で囲む場合はlink-itemを使用 */
.link-item {
    display: flex;
    /* その他のスタイルは.itemと同様 */
}

.image-wrapper {
    margin-right:20px; /* 画像とテキストの間にスペース */
    flex-shrink: 0; /* 縮まないようにする */
}

/* プレースホルダー画像のスタイル (実際には<img>タグを使用する想定) */
.placeholder-image {
    width: 60px; /* PCでの画像サイズ */
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-content {
    /* flex-grow: 1; /* 残りのスペースを埋める */
}

.text1 {
    font-weight: bold;line-height:1.4;
    margin: 0 0 5px 0;
}

.text2 {
    margin: 0;
    font-size: 0.95em;
}

.br-sp{display: none;}

/* --- スマホ対応 (レスポンシブデザイン) --- */
@media (max-width: 767px) {
    .container {
        width: 90%; /* スマホでの幅 */
        padding: 0 10px; /* 画面端に近すぎないように調整 */
    }

    /* スマホでも画像とテキストは横並びを維持 */
    .item, .link-item {
        padding: 10px;
    }


.br-sp{
        display: block;}
span.sp-none {display: none;}

    /* 画像サイズの調整 */
    .placeholder-image {
        width: auto; /* スマホでの画像サイズ: auto */
        height: auto;
        /* autoで指定されていますが、コンテンツが画像の場合は最大幅などで調整が必要になることがあります。
           今回はプレースホルダーとして、PCと同じ60pxをここでは維持します。
           もし、実際の<img>タグを使う場合は、max-width: 100%; height: auto;などを使うことが多いです。
           ここでは要件の「スマホ表示での画像サイズ / auto」に従い、明示的なサイズ指定を解除します。
           ただし、`auto`だけではサイズが固定されないため、実際の利用シーンに応じて調整が必要です。
           一旦、ここではスマホでも見やすいサイズとして幅を固定せず、flexアイテムとして扱うに留めます。
        */
        width: 60px; /* 実質的にこのサイズで表示されます */
        height: 60px;
    }

    /* 実際の画像を使用する場合の例（コメントアウト） */
    /* .image-wrapper img {
        max-width: 100%;
        height: auto;
    } */

}