/* style_responsive.css */

/*
   画像の縮小表示について:
   - 全ての `img` 要素には `max-width: 100%; height: auto;` が適用されています。
     これにより、画像は親要素の幅に合わせて自動的に縮小し、アスペクト比を維持します。
   - 個別の画像には、元のサイズを超えて拡大しないよう、具体的な `max-width` も設定されています。
     （例: .top-banner img は max-width: 800px; ）
   - ブラウザを縮小した際に画像が小さくならない場合、以下の点をご確認ください:
     1. このCSSファイルがHTMLに正しくリンクされ、読み込まれていますか？
        - HTMLの <link> タグの href 属性とCSSファイルのパスが一致しているか。
        - CSSファイルが指定された場所に存在しているか。
     2. ブラウザのキャッシュが原因ではありませんか？
        - キャッシュをクリアして強制再読み込み (Ctrl+Shift+R または Cmd+Shift+R) を試してください。
     3. 画像の親要素（例: .top-banner や .main-content, #wrapper）が、ブラウザのサイズ変更に合わせて縮小していますか？
        - 開発者ツール (F12キーで開くことが多い) を使用して、各要素のボックスモデルや計算済みスタイルを確認し、幅がどのように計算されているかを見てみてください。
        - もし親要素が固定幅を持っている、または `min-width` が設定されていて画面幅より広い場合、画像はそれ以上縮小できません。
     4. 他のCSSルール（インラインスタイルや `!important` など）がこれらのルールを上書きしていませんか？
        - 開発者ツールで画像の要素を選択し、「Styles」タブで適用されているCSSルールを確認してください。
*/

/* Basic Reset & Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'メイリオ', Meiryo, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    line-height: 1.6;
    color: #333;
}

a {
    text-decoration: none;
    color: #0000FF; /* リンクのデフォルト色 */
}

a:visited {
    color: #0000FF; /* 訪問済みリンクも青 */
}

a:active {
    color: #00FFFF; /* アクティブリンクの色 */
}

/* CTAボタンの訪問済みリンクの色を白に固定 */
.cta-button:visited {
    color: white !important;
}

img {
    max-width: 100%; /* 親要素の幅を超えないよう縮小 */
    height: auto;    /* アスペクト比を維持 */
    display: block;  /* ブロック要素化し余計な隙間をなくす */
}

ul {
    list-style: none;
    padding-left: 0;
}

/* inline style で指定されていたクラス */
.auto-style2 {
    color: #3C549B;
    text-decoration: underline;
}

.auto-style3 {
    font-size: smaller;
}

.red {
    color: red;
}

.center {
    text-align: center;
}

/* 全体コンテンツを内包するラッパー */
#wrapper {
    max-width: 1200px; /* 大画面での最大幅 */
    min-width: 320px;  /* 最小幅の目安 */
    margin: 0 auto;
    padding: 10px;
}

/* Header */
.main-header {
    display: flex;
    flex-direction: column; /* モバイル: 縦並び */
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.header-logo img {
    max-width: 300px; /* 元の画像幅(300px)が上限 */
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.header-menu select {
    width: 100%;
    max-width: 300px; /* セレクトボックス最大幅 */
    padding: 8px;
    margin-top: 10px; /* ロゴと間隔 */
    font-size: 1em;
}

/* Main Content Area */
.main-content {
    padding: 0;
}

.top-banner {
    text-align: center; /* 中央寄せ */
}

.top-banner img {
    width: 100%;       /* 親要素幅に合わせて縮小 */
    max-width: 800px;  /* 元画像以上に拡大しない */
    height: auto;
    margin-bottom: 20px;
    display: inline-block;
}

/* ***** 「おすすめコンテンツ」セクションのスタイル ***** */
.featured-products {
    background-color: #f0f8ff; /* 背景色 */
    border: 1px solid #add8e6;
    padding: 20px;
    margin-bottom: 30px;
    text-align: center;
    border-radius: 8px;
}

.featured-products h2.toppage {
    color: #3C549B;
    border-bottom-color: #add8e6;
    margin-bottom: 20px;
}

.product-cards-wrapper {
    display: flex;
    flex-direction: column; /* モバイル: 縦並び */
    gap: 20px;
    align-items: center;
}

.product-card {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: left;
    width: 100%;         /* モバイルでは全幅 */
    max-width: 480px;    /* カード最大幅 */
    border-radius: 8px;
}

.product-card h3 {
    font-size: 1.3em;
    color: #2e6cb5;
    margin-bottom: 10px;
}

.product-card p {
    font-size: 0.95em;
    margin-bottom: 15px;
    min-height: 4em; /* 高さのばらつきを抑える */
}

.cta-button {
    display: inline-block;
    background-color: #FF4500;
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1em;
    transition: background-color 0.3s ease;
    text-align: center;
    width: 100%;        /* モバイル: 全幅 */
    max-width: 250px;   /* ボタン最大幅 */
}

.cta-button:hover {
    background-color: #e03c00;
}
/* ***** 「おすすめコンテンツ」セクションここまで ***** */

.content-columns-wrapper {
    display: flex;
    flex-direction: column; /* モバイル: 縦に積む */
    gap: 20px;
}

.left-column {
    flex: 1;
}

.right-sidebar {
    width: 100%;       /* モバイル: 全幅 */
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    text-align: center;
}

.sidebar-block {
    margin-bottom: 20px;
}

.sidebar-block img {
    max-width: 165px; /* 元の画像幅(165px)が上限 */
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* ***** サイドバー「提供コンテンツ」リンクのスタイル ***** */
.sidebar-block.paid-links {
    background-color: #e0f0ff;
    border: 1px solid #c0d0ff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.sidebar-block.paid-links h5 {
    color: #2e6cb5;
    font-size: 1.1em;
    margin-bottom: 10px;
}

.sidebar-block.paid-links ul {
    list-style: none;
    padding: 0;
}

.sidebar-block.paid-links li {
    margin-bottom: 8px;
}

.sidebar-block.paid-links a {
    display: block;
    padding: 8px;
    background-color: #ffffff;
    border: 1px solid #b0c0ff;
    color: #3C549B;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

.sidebar-block.paid-links a:hover {
    background-color: #d0e0ff;
}

.social-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.social-icons img {
    width: 80px;
    height: 80px;
}

/* 「お知らせ」ブロックは削除 */

/* Section Styling （最新情報・クイックアクセス・コンテンツ一覧など） */
.section-box {
    margin-bottom: 30px;
    padding: 15px;
    border: 1px solid #eee;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

h2.toppage {
    font-size: 1.5em;
    margin-bottom: 15px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
}

h3.toptitle {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #3C549B;
}

section ul li {
    margin-bottom: 8px;
}

/* images/hidesisuupoint.png 用スタイル */
.hide-shisu-point-ad {
    margin-bottom: 20px;
    padding: 10px;
}

.hide-shisu-point-ad img {
    width: 100%;      /* 追加: 親要素幅に合わせて縮小 */
    max-width: 407px; /* 元の画像幅(407px)以上には引き延ばさない */
    height: auto;
    margin: 0 auto;
}

/* メルマガバナーの画像 */
.mail-magazine-ad img {
    width: 100%;       /* 追加: 親要素幅に合わせて縮小 */
    max-width: 462px;  /* 元の画像幅(462px)以上には引き延ばさない */
    height: auto;
    margin: 20px auto;
}

.quick-access-items,
.content-list-items {
    display: flex;
    flex-direction: column; /* モバイル: 縦並び */
    gap: 20px;
}

/* ==== 改善点1: 各コンテンツカードの背景色とシャドウを強化 ==== */
.content-item {
    padding: 15px;
    border: 1px dashed #eee;
    /* 既存のbackground-color: #fcfcfc; をグラデーションに変更 */
    background: linear-gradient(to bottom, #ffffff, #f9f9f9); /* 微妙なグラデーション */
    border-radius: 8px; /* 角を少し丸める */
    /* 既存のbox-shadow: 0 1px 3px rgba(0,0,0,0.08); をより明確なシャドウに変更 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.12); /* より広がりと濃さのある影 */
    transition: all 0.3s ease; /* ホバーエフェクト用 */
}

.content-item:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.18); /* ホバーで影を強調 */
    transform: translateY(-2px); /* わずかに浮き上がる効果 */
}


.content-item.full-width-item {
    width: 100%;
}

/* ==== 改善点2: サブセクションの見出し(h4)とグループの区切りを強化 ==== */
.content-item .sub-section-group {
    margin-top: 20px; /* 上部マージンを少し増やす */
    padding-top: 15px; /* 上部パディングを少し増やす */
    /* 既存のborder-top: 1px dashed #e0e0e0; をより明確な実線に変更 */
    border-top: 1px solid #ddd;
}

.content-item .sub-section-group:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.content-item .sub-section-group h4 {
    font-size: 1.05em;
    color: #3C549B; /* メインカラーに近い青に */
    font-weight: bold; /* 太字に */
    margin-bottom: 8px;
    padding: 5px 10px; /* パディングを追加 */
    background-color: #e8f0f8; /* ごく薄い背景色 */
    border-radius: 4px; /* 角を丸める */
    border-bottom: none; /* 下線を削除、背景色で見出しを区別 */
    display: inline-block; /* パディングが効くように */
    margin-left: -10px; /* 左端に寄せるための調整 */
}


.content-item .sub-section-group ul {
    margin-bottom: 10px;
}

.content-item .sub-section-group li {
    margin-bottom: 5px;
}

/* 「勉強回顧（重賞検討会）」補足説明用スタイル */
.content-item .content-note {
    font-size: 0.9em;
    color: #666;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 8px 10px;
    background-color: #f9f9f9;
    border-left: 3px solid #ddd;
}

/* 「勉強回顧（重賞検討会）」内のリンク用スタイル */
.content-item .section-link {
    margin-top: 10px;
    font-size: 0.95em;
    text-align: right;
}

.content-item .sub-section-image {
    margin: 15px auto;
}

.content-item .sub-section-image img {
    max-width: 100%;
    height: auto;
}

/* モバイル?タブレットまでの基本スタイル */

/* Tablet layout (768px以上) */
@media (min-width: 768px) {
    .main-header {
        flex-direction: row; /* ロゴとメニュー横並び */
        justify-content: space-between;
    }

    .header-menu select {
        margin-top: 0;
    }

    /* 「おすすめコンテンツ」 横並びに切替 */
    .product-cards-wrapper {
        flex-direction: row;      /* 横並び */
        justify-content: center;  /* 中央寄せ */
        flex-wrap: wrap;          /* 折り返し */
    }
    .product-card {
        flex: 1 1 calc(50% - 20px);      /* 2列表示 */
        max-width: calc(50% - 20px);
    }

    .cta-button {
        width: auto; /* ボタン幅を自動調整 */
    }

    .content-columns-wrapper {
        display: flex;
        flex-direction: row; /* カラム横並び */
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .left-column {
        flex: 3;
        min-width: 450px;
        margin-right: 20px;
    }

    .right-sidebar {
        flex: 1;
        max-width: 250px;
        min-width: 180px;
    }

    .social-icons {
        justify-content: space-around;
        gap: 5px;
    }

    .quick-access-items,
    .content-list-items {
        flex-direction: row; /* 2カラム */
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .quick-access-item,
    .content-item {
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }

    .content-item.full-width-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Desktop layout (1024px以上) */
@media (min-width: 1024px) {
    #wrapper {
        max-width: 1000px; /* デスクトップの最大幅 */
    }

    .left-column {
        flex: 3;
        max-width: 680px;
    }

    .right-sidebar {
        flex: 1;
        max-width: 280px;
    }

    .social-icons img {
        width: 100px; /* デスクトップ: アイコンサイズ */
        height: 100px;
    }
}