/* style_gaiyou_responsive.css */

/* 基本的なリセットと共通スタイル */
* {
    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;
    background-color: #FFFFFF; /* 元の背景色 */
}

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

a:hover {
    color: #FF0000; /* ホバー時のリンク色 (元のstyle要素から) */
}

a:visited {
    color: #0000FF; /* 訪問済みリンク色をデフォルトと同じ青に設定 (元のbodyタグから) */
}

a:active {
    color: #0000FF; /* アクティブリンク色をデフォルトと同じ青に設定 (元のbodyタグから) */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

/* 元のインラインスタイルで定義されていたクラス */
.auto-style1 {
    color: #FF0000;
}

/* 全体のラッパー */
#wrapper {
    max-width: 800px; /* PCでの最大幅を調整（元の645pxよりやや広めに、またはコンテンツに合わせて調整） */
    margin: 0 auto; /* 中央揃え */
    padding: 15px; /* 全体の余白 */
    background-color: #fff; /* コンテンツ領域の背景色 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 影で囲み */
}

/* ヘッダー */
.page-header {
    background-color: #6396EF; /* 元のテーブル背景色 */
    color: #fff;
    padding: 10px 15px;
    margin-bottom: 20px;
    text-align: center;
}

.page-header h1 {
    font-size: 1.8em;
    margin: 0;
    padding: 5px 0;
}

/* メインコンテンツエリア */
.main-content-area {
    padding: 0;
}

.info-section {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee; /* 各セクションの下線 */
}

.info-section:last-child {
    border-bottom: none; /* 最後のセクションには下線なし */
    margin-bottom: 0;
}

.section-title {
    font-size: 1.4em;
    color: #FF0000; /* 元のタイトル色 */
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #ccc; /* 必要であればタイトル下の線 */
}

.info-section h3 {
    font-size: 1.2em;
    color: #0000FF; /* 元のサブタイトル色 */
    margin-top: 20px;
    margin-bottom: 10px;
}

.info-section h3 .auto-style1 {
    color: #FF0000; /* 元のサブタイトル内の赤字 */
}

.info-section p {
    font-size: 0.95em;
    margin-bottom: 1em;
    /* text-indent: 1em; /* 段落の最初の字下げは削除しました */ */
}

.info-section p b {
    color: #FF0000; /* 太字テキストの色 (元の設定を再現) */
}

/* フッター */
.page-footer {
    text-align: center;
    padding: 20px 0 10px;
    margin-top: 30px;
    border-top: 1px solid #eee;
    font-size: 0.85em;
    color: #666;
}

/* CTA誘導リンクのスタイル（「提供アイテム」セクション用） */
.cta-link {
    display: inline-block;
    background-color: #008CBA; /* 青系の色。トップページのボタン色と合わせるか、ページに合わせた色を選択してください */
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.95em;
    margin-top: 10px;
    margin-bottom: 5px; /* 下の要素との余白 */
    transition: background-color 0.3s ease;
}

.cta-link:hover {
    background-color: #006B96; /* ホバー時の色 */
}

/* ページ下部のチュートリアルリンクも同じスタイルを適用 */
.info-section a.cta-link {
    display: block; /* ブロック要素にして中央揃えや幅指定をしやすくする */
    max-width: 350px; /* ボタンの最大幅 */
    margin: 20px auto 10px; /* 中央揃え */
    padding: 12px 25px; /* ボタンのサイズを少し大きく */
    font-size: 1em;
    background-color: #FF4500; /* トップページのCTAボタンと似た色 */
}

.info-section a.cta-link:hover {
    background-color: #e03c00;
}

/* スマートフォン向けの調整 (767px以下) */
@media (max-width: 767px) {
    #wrapper {
        padding: 10px;
    }

    .page-header h1 {
        font-size: 1.5em;
    }

    .section-title {
        font-size: 1.2em;
        padding-bottom: 3px;
        margin-bottom: 10px;
    }

    .info-section p {
        font-size: 0.9em;
        /* text-indent: 0.8em; は削除済み */
    }
}