/*全ページ共通------------------------------------------------*/
:root {
    --primary-color: #4a4e69;
    --secondary-color: #22223b;
    --accent-color: #9a8c98;
    --text-color: #4a4e69;
    --bg-color: #f2e9e4;
    --card-bg-color: #ffffff;
}

/*ヘッダー*/
.site-header {
    background-color: var(--primary-color);
    color: #fff;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding: 5px 10px;
    transition: color 0.3s;
    border-bottom: 2px solid transparent;
}

nav ul li a:hover {
    color: var(--bg-color);
    border-bottom: 2px solid var(--bg-color);
}

nav ul li a.active {
    color: var(--bg-color);
    border-bottom: 2px solid var(--bg-color);
    font-weight: bold;
}

/*メイン*/
body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.8;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
}

main {
    padding-top: 80px;
    padding-bottom: 40px;
}

.container {
    display: flex; /* フレックスボックスを使用 */
    max-width: 1100px; /* コンテナの最大幅を設定 */
    margin: 0 auto; /* 中央に配置 */
    padding: 0 20px;
}

.content-wrapper {
    background-color: var(--card-bg-color);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 40px;
    margin-bottom: 15px;
    flex: 1; /* 残りのスペースを占める */
}
.content {
    position: relative;
    background-color: var(--card-bg-color);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    flex: 1; /* 残りのスペースを占める */
    margin-bottom: 15px;
}

.image-right {
    float: right;
    width: 30%;
    margin-left: 20px;
    margin-bottom: 20px;
}

.image-right img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.clear-float {
    clear: both;
}
.flex-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    justify-content: space-between;
}

.text-content {
    flex: 1;
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 0; /* テキストコンテンツの上部マージンを削除 */
}

.image-container {
    flex: 0 0 40%;
}

.e-cert-image {
    margin-bottom: 20px; /* 画像の下部マージンを調整 */
}

.e-cert-image img {
    display: block; /* インライン要素の余分なスペースを削除 */
    max-width: 100%; /* 画像が親要素を超えないようにする */
    height: auto; /* アスペクト比を維持 */
    margin-bottom: 0; /* 画像自体の下部マージンを削除 */
}

.feature-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: var(--secondary-color);
}

.purchase-button {
    margin-bottom: 40px;
    text-align: center;
}

.author-intro {
    margin-top: 1rem;
}

.cta-button {
    display: block; /* ブロック要素に戻す */
    padding: 10px 20px;
    background-color: #007bff; /* サイトの主要な色に合わせて変更してください */
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin: 0 auto; /* 自動マージンで中央に配置 */
    text-align: center; /* テキストを中央揃え */
    margin-left: auto; /* 左マージンを自動に設定 */
    margin-right: auto; /* 右マージンを自動に設定 */
}

.cta-button:hover {
    background-color: #0056b3; /* ホバー時の色 */
}

.cta-button:active {
    background-color: #004085; /* クリック時の色 */
}

.step-title {
    font-size: 1.5em; /* 1.8emから1.5emに縮小 */
    color: #333;
    border-left: 5px solid #4CAF50;
    padding-left: 15px;
    margin: 30px 0 20px;
    position: relative;
    overflow: hidden;
}

.step-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #4CAF50, transparent);
}

.step-number {
    color: #4CAF50;
    font-weight: bold;
    margin-right: 10px;
}

.section-title {
    font-size: 1.6em;
    color: #333;
    border-bottom: 4px solid #4CAF50;
    padding-bottom: 10px;
    margin: 30px 0 20px;
}

.highlight {
    background: linear-gradient(transparent 60%, #ffff66 60%);
    font-weight:bolder;
}

.section-subtitle {
    font-size: 1.2em;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    color: #333;
}

.disabled {
    color: black; /* グレーにする */
    pointer-events: none; /* クリックできないようにする */
    text-decoration: none; /* 下線を消す */
}

.affiliate-ad {
    width: 300px; /* 広告の幅を広げる */
    margin-left: 20px; /* メインコンテンツとの間隔を設定 */
    margin-top: 60px;
}

section {
    scroll-margin-top: 100px; /* ヘッダーの高さに合わせて調整 */
    margin-bottom: 80px;
}

a {
    display: inline-block; /* インラインブロックに設定 */
    max-width: 100%; /* 最大幅を親要素に合わせる */
    overflow-wrap: break-word; /* 長いテキストを折り返す */
}

#backToTop {
    position: fixed;
    bottom: 20px; /* 画面の下からの距離 */
    right: 20px; /* 画面の右からの距離 */
    background-color: #6c757d; /* 中立的なグレー */
    color: white; /* ボタンの文字色 */
    border: none; /* ボタンの枠線をなしに */
    padding: 10px 15px; /* ボタンの内側の余白 */
    border-radius: 5px; /* ボタンの角を丸く */
    cursor: pointer; /* カーソルをポインターに */
    z-index: 1000; /* 他の要素の上に表示 */
    display: none; /* 初期状態は非表示 */
}

#backToTop:hover {
    background-color: #5a6268; /* ホバー時の少し濃いグレー */
}

/*パンくず*/
.breadcrumb {
    margin: -60px 0 10px 0;
    padding: 0;
    list-style: none;
}

.breadcrumb li {
    display: inline;/*横に並ぶように*/
    list-style: none;
    font-weight: bold;/*太字*/
}

.breadcrumb li:after {/* >を表示*/
    content: '>';
    padding: 0 0.2em;
    color: #555;
}

.breadcrumb li:last-child:after {
    content: '';
}

.breadcrumb li a {
    text-decoration: none;
    color: #1d1d63;/*色*/
}

.breadcrumb li a:hover {
    text-decoration: underline;
}

.affiliate-link {
    font-weight: bold; /* 太字にする */
    color: #007BFF; /* リンクの色を青にする */
    padding: 5px; /* テキスト周りに余白を追加 */
    border-radius: 3px; /* 角を丸くする */
    background-color: #f0f8ff; /* 背景色を薄い青にする */
    transition: background-color 0.3s; /* ホバー時の背景色変更にアニメーションを追加 */
}

.adcenter-top {
    text-align:center;
    margin-bottom: 5px;
    margin-top: 35px;
}

.adcenter {
    text-align:center;
    margin-bottom: 5px;
}


/*フッター*/
.site-footer {
    background-color: var(--primary-color);
    color: #fff;
    text-align: center;
    padding: 0.5rem 0;
    position: relative;
    bottom: 0;
    width: 100%;
    display: flex; /* フレックスボックスを使用 */
    justify-content: center; /* 水平方向に中央揃え */
}

.site-footer p {
    margin: 0;
    font-size: 0.9rem;
}

.site-footer a {
    display: inline-block;
    color: white; /* 文字色を白に設定 */
    margin: 0 10px; /* リンク間のスペースを追加 */
}

/*index.html--------------------------------------------------------------------*/

.hero {
    display: flex; /* フレックスボックスを使用 */
    justify-content: space-between; /* コンテンツを左右に配置 */
    align-items: center; /* 垂直方向に中央揃え */
    background-color: var(--secondary-color);
    color: var(--bg-color);
    text-align: center;
    padding: 25px 25px 0 0; /* パディングを小さくして高さを調整 */
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    opacity: 0.8;
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero h2 {
    font-size: 2.5em; /* フォントサイズを大きく */
    color: #ffffff; /* 白色に変更 */
    margin-bottom: 10px; /* 下のマージンを調整 */
}

.hero p {
    font-size: 1.2em; /* フォントサイズを調整 */
    color: #f0f0f0; /* 明るいグレーに変更 */
    line-height: 1.5; /* 行間を広げる */
}

.e-cert-summary {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.e-cert-summary th, .e-cert-summary td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.e-cert-summary th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.e-cert-summary tr:nth-child(even) {
    background-color: #f9f9f9;
}

.e-cert-summary tr:hover {
    background-color: #f5f5f5;
}

.base-study-image {
    max-width: 80%; /* 基礎学習の図のサイズを小さくするスタイル */
    height: auto; /* アスペクト比を維持 */
    display: block; /* ブロック要素にする */
    margin: 0 auto; /* 中央配置 */
}

/*disclaimer.html------------------------------------------------------------------------*/
.disclaimer-section {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
}

.disclaimer-section h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
}

.disclaimer-section ul {
    list-style-type: disc;
    padding-left: 20px;
}

.disclaimer-section li {
    margin-bottom: 10px;
    line-height: 1.6; /* 行間を広げて読みやすく */
}

.no-underline {
    color: inherit; /* 親要素の色を引き継ぐ */
    text-decoration: none; /* 下線を消す */
}

.disclaimer-section li {
    margin-bottom: 20px; /* 各項目間のスペースを調整 */
}

/*privacy_policy.html------------------------------------------------------------------------------*/
.policy-section h2 {
    margin-bottom: 1em; /* タイトルの下にスペースを追加 */
}
.policy-section ul {
    margin-top: 0.5em; /* 箇条書きの上にスペースを追加 */
    margin-bottom: 1em; /* 箇条書きの下にスペースを追加 */
}
.policy-section li {
    margin-bottom: 1.5em; /* 各項目の下にスペースを追加 */
}
.policy-section li ul {
    margin-top: 0.2em; /* サブリストの上にスペースを追加 */
    margin-bottom: 0.5em; /* サブリストの下にスペースを追加 */
}
.policy-section .narrow-list li {
    margin-bottom: 0.2em; /* 行間を狭くする */
    margin-top: 0.3em;
}
.policy-section .narrow-list li::marker {
    font-size: 0.7em; /* マーカーのサイズを小さくする */
}

/*contact.html--------------------------------------------------------------------------------*/
.contact_telphone{
    margin-right: 100px;
    border: 2px solid #4CAF50;
    background-color: white;
    padding: 20px 40px;
}

.contact_email{
    border: 2px solid #4CAF50;
    background-color: white;
    padding: 20px 40px;
}

.contact_form{
    border: 1.5px solid #4CAF50;
    padding: 50px 30px;
    background-color: white;
    width: 100%;
    box-sizing: border-box; /* パディングを含めた幅計算 */
    display: inline-block;
    margin-bottom: 30px;
    max-width: 100%; /* 幅を100%に設定 */
    margin: 0 auto; /* 中央揃え */
    border: 1px solid #ccc; /* 枠線 */
    border-radius: 5px; /* 角を丸く */
}

.title{
    font-size: 20px;
    margin-bottom: 40px;
    font-weight: bold;
}

.item{
    overflow: hidden;
    margin-bottom: 20px;
    padding-bottom: 5px;
}

.label{
    float: left;
    margin-right: 20px;
    border-left: 3px solid #4CAF50;
    padding-left: 10px;
}

.contact_type{
    margin-bottom: 0;
}

.inputs{
    display: inline-block;
    width: 90%;
    margin-top: 10px;
    text-align: left;
}

.inputs_radio{
    display: inline-block;
    width: 100%;
    margin-top: 5px;
    margin-left: 20px;
    text-align: left;
}


input[type="text"],
input[type="email"]{
    border: 1px solid gray;
    padding: 10px;
    border-radius: 5px;
}

textarea{
    border: 1px solid gray;
    border-radius: 5px;
    padding: 10px;
    height: 160px;
    font-size: 16px;
}

.button_area{
    text-align: center;
    display: flex;
    justify-content: center; /* ボタンを中央揃え */
}

input[type="submit"]{
    background-color: #770312;
    border: none;
    padding: 10px 20px;
    color: white;
    border-radius: 5px;
    font-size: 24px;
    margin-right: 20px;
    cursor: pointer;
}

input[type="reset"]{
    background-color:gray;
    border: none;
    padding: 10px 20px;
    color: white;
    border-radius: 5px;
    font-size: 24px;
    margin-right: 20px;
    cursor: pointer;
}


/*study_contents------------------------------------------------------------------------------------------*/
.toc {
    list-style-type: none; /* デフォルトのリストスタイルを無効にする */
    padding: 10px; /* パディングを追加 */
    background-color: rgba(240, 240, 240, 0.8); /* 薄い背景色を追加 */
    border-radius: 5px; /* 角を丸くする */
}

.toc li {
    margin: 10px 0; /* 各項目の上下にスペースを追加 */
}

.toc li a {
    text-decoration: none; /* 下線を消す */
    color: #333; /* テキストの色 */
}

.toc li a:hover {
    color: #007bff; /* ホバー時の色 */
}

.toc h3{
    text-align: center; /* 中央揃え */
}

.subsection-title {
    font-size: 1.3em; /* 1.8emから1.5emに縮小 */
    color: #333;
    border-left: 5px solid navy;
    padding-left: 15px;
    margin: 40px 0 20px;
    position: relative;
    overflow: hidden;
}

.section-title2 {
    font-size: 1.6em;
    color: #333;
    border-bottom: 4px solid navy;
    padding-bottom: 7px;
    margin: 30px 0 20px;
}

.step-title2 {
    font-size: 1.5em; /* サイズを調整 */
    font-weight: bold; /* 太字にする */
    margin-top: 20px; /* 上部のマージンを追加 */
    margin-bottom: 10px; /* 下部のマージンを追加 */
    color: #fff; /* テキストの色を白に設定 */
    padding: 10px; /* 内側のパディングを追加 */
    background-color: #4a4e69; /* 背景色を設定 */
    border-radius: 4px; /* 角を丸くする */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影を追加して立体感を出す */
}

h5 {
    font-size: 1.1em; /* h5のサイズを1.5emに設定 */
    margin-top: 0.5em; /* 上のマージンを0.5emに設定 */
    margin-bottom: 0.4em; /* 下のマージンを0.5emに設定 */
}

h6 {
    font-size: 1.2em; /* h6のサイズを1.3emに設定 */
    margin: 2em 0 0 0; /* 上のマージンを0.3emに設定 */
    text-decoration:underline;
    font-weight: bold;
}

.keyword {
    display: inline-block; /* インラインブロックで表示 */
    background-color: #f0f0f0; /* 背景色を薄いグレーに設定 */
    color: #333; /* 文字色をダークグレーに設定 */
    padding: 0.3em 0.5em; /* パディングを設定 */
    border-radius: 5px; /* 角を丸くする */
    font-weight: bold; /* 太字に設定 */
}

.equation {
    text-align: center; /* 中央寄せ */
    font-size: 1.2em; /* フォントサイズの設定 */
    margin: 30px 0; /* 上下のマージン */
    width: 100%; /* 幅を100%に設定 */
    max-width: 100%; /* 親要素を超えないようにする */
    color: #170f61e7;
    line-height: 3rem;
}

/**表の記載**/
.confusion-matrix {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}

.confusion-matrix th, .confusion-matrix td {
    border: 1px solid black;
    padding: 8px;
}

.confusion-matrix th {
    background-color: #f2f2f2;
}

.confusion-matrix td {
    background-color: #fff;
}

.graph_image{
    display: block; /* 画像をブロック要素にする */
    margin: 1em auto; /* 左右のマージンを自動にして中央に配置 */
    max-width: 100%; /* 親要素を超えないようにする */
    height: auto; /* アスペクト比を維持 */
    border: 1px solid black;
}

.quotation {
    color: rgba(0, 0, 0, 0.5); /* 薄い文字色 */
    text-align: right; /* 右寄せ */
    margin: 0; /* マージンをリセット */
    font-size: 10px;
}

/*mock_exam.html------------------------------------------------------------------------*/
section#quiz-container {
    max-width: 800px;
    margin: 0 auto;
}

.quiz-item {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 20px;
    transition: background-color 0.3s ease;
}

.quiz-item h2 {
    margin-top: 0;
}

#quiz-container button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background: #0078d7;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#quiz-container button:hover {
    background: #005a9e;
}

.answer {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background: #eef;
    border: 1px solid #0078d7;
    border-radius: 5px;
}

#score-container {
    margin-top: 30px;
    text-align: center;
}

#score-display {
    font-size: 1.5em;
    color: #333;
}

#feedback-container {
    margin-top: 30px;
    text-align: center;
}

#feedback-container h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #333;
}

#feedback-container p {
    font-size: 1.2em;
    margin-bottom: 20px;
    color: #555;
}

#feedback-container button {
    padding: 10px 20px;
    font-size: 1em;
    color: white;
    background-color: #0078d7;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#feedback-container button:hover {
    background-color: #005a9e;
}

/* 模試予告コンテナ */
.premium-mock-exam-container {
    margin-top: 30px;
    padding: 25px;
    background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
    border: 2px solid #4dd0e1;
    border-radius: 8px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.15);
}

/* 模試ヘッダー（New!バッジとタイトルを囲む） */
.mock-exam-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* 少し余白を調整 */
}

/* New! バッジ */
.new-badge {
    background-color: #ffc107;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    margin-right: 10px;
}

/* 模試タイトル */
.mock-exam-title {
    color: #1976d2;
    margin-bottom: 0;
    font-size: 1.5em; /* 少し大きく */
}

/* リードテキスト */
.mock-exam-lead {
    font-weight: bold;
    color: #333;
    margin-bottom: 15px; /* 余白を調整 */
}

/* 特徴リスト */
.mock-exam-features {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 20px; /* 余白を調整 */
    color: #555;
}

/* 特徴リストの強調テキスト */
.feature-highlight {
    font-weight: bold;
    color: #00796b;
}

/* 価格情報 */
.price-info {
    text-align: center;
    margin-bottom: 15px;
}

.price-info p{
    text-align: center;
    margin-bottom: 0px;
}

/* 通常価格 */
.regular-price {
    color: #777;
    font-size: 0.9em;
    text-decoration: line-through;
    display: inline-block;
    margin-right: 10px;
}

/* 割引価格 */
.discount-price {
    color: #d32f2f; /* 赤系の強調色 */
    font-size: 1.5em;
    font-weight: bold;
    display: inline-block;
}

/* 価格の数値 */
.price {
    font-weight: bold;
}

/* スペシャルオファーの文字 */
.special-offer {
    background-color: #ffeb3b; /* 黄色系の強調色 */
    color: #212121;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 0.8em;
    margin-right: 5px;
}

/* 割引期間の注釈 */
.discount-note {
    color: #777;
    font-size: 0.8em;
    margin-top: 5px;
}

/* 販売開始予定Wrapper */
.coming-soon-wrapper {
    text-align: center;
    margin-bottom: 15px; /* 余白を追加 */
}

/* 販売開始予定日 */
.release-date {
    background-color: #fdd835;
    color: #212121;
    padding: 12px 24px;
    border-radius: 0px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 8px;
    font-size: 1.2em;
}

/* 購入ボタン（enabled） */
.buy-button {
    display: block;
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

/* 注意書き */
.mock-exam-note {
    font-size: 0.9em;
    color: #777;
    margin-top: 15px;
    text-align: center;
}
.choices input{
    margin-bottom: 15px; /* 選択肢間の余白（調整してください） */
}





/*レスポンシブデザイン*/
/* ... 既存のスタイル ... */

/* PCビュー */
@media (min-width: 1000px) {
    .container {
        max-width: 900px; /* PC用の最大幅 */
    }
    .image-right {
        width: 30%; /* PC用の画像幅 */
    }
}

/* タブレットビュー */
@media (min-width: 520px) and (max-width: 1000px) {
    .container {
        flex-direction: column; /* スマホ用に縦並びにする */
        padding: 0 15px; /* スマホ用のパディング */
    }
    .image-right {
        width: 40%; /* タブレット用の画像幅 */
    }
    .hero h2 {
        font-size: 2.2rem; /* タブレット用のフォントサイズ */
    }
    .hero p {
        font-size: 1rem; /* タブレット用のフォントサイズ */
    }
    .affiliate-ad{
        margin: 0 0 ;
    }
    section {
        margin-bottom: 10px;
    }
    nav ul li a {
        padding: 5px 10px;
        font-size: 16px;
    }
    .content-wrapper {
        margin-top: 100px;
    }
    nav ul {
        margin: 5px 0;
    }
    .equation {
        text-align: center; /* 中央寄せ */
        font-size: 1.0em; /* フォントサイズの設定 */
        width: 100%; /* 幅を100%に設定 */
        max-width: 100%; /* 親要素を超えないようにする */
        overflow-x: auto; /* 横スクロールを有効にする */
        white-space: nowrap; /* 改行を防ぐ */
        
    }

    .e-cert-summary {
        font-size: 14px;
        overflow-x: auto; /* 横スクロールを有効にする */
    }

    .choices{
        font-size: 14px;
    }
    .choices input{
        margin-bottom: 15px; /* 選択肢間の余白（調整してください） */
    }
}

/* スマホビュー */
@media (max-width: 520px) {
    .container {
        flex-direction: column; /* スマホ用に縦並びにする */
        padding: 0 10px; /* スマホ用のパディング */
    }

    .flex-container{
        flex-direction: column; /* スマホ用に縦並びにする */
    }
    .image-right {
        width: 100%; /* スマホ用の画像幅 */
        margin-left: 0; /* スマホ用のマージン調整 */
    }
    .step-title, .section-title2 {
        font-size: 1.2em; /* スマホ用のフォントサイズ */
    }

    .step-title2 {
        font-size: 1.2em; /* スマホ用のフォントサイズ */
    }
    
    .btn, .cta-button, input[type="submit"], input[type="reset"] {
        width: 100%; /* ボタンを全幅にする */
        margin: 10px 0; /* ボタン間のマージン */
    }
    .section-title {
        font-size: 1.0em;
    }
    .hero h2 {
        font-size: 2.2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .image-right {
        float: none;
        width: 100%;
        margin-left: 0;
    }
    .equation {
        text-align: center; /* 中央寄せ */
        font-size: 0.8em; /* フォントサイズの設定 */
        width: 100%; /* 幅を100%に設定 */
        max-width: 100%; /* 親要素を超えないようにする */
        overflow-x: auto;
	    overflow-y: hidden;
        white-space: nowrap; /* 改行を防ぐ */
        font-size: 0.9em;
        border: groove 2px;
        padding-right: 10px;
        padding-left: 10px;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    nav{
        height: 40px;
    }
    nav ul {
        margin: 10px 0;
    }

    nav ul li a {
        padding: 5px 5px;
        font-size: 12px;
    }
    nav ul li {
        margin-left: 5px;
    }
    .hero {
        padding: 5px 0 ;
        margin: 5px 0 5px 0; /* パディングを小さくして高さを調整 */
    }
    .hero h2 {
        font-size: 1.1em; /* フォントサイズを大きく */
        margin: 7px 0;
    }

    hero-subtitle{
        font-size: 12px; /* フォントサイズを大きく */
    }

    .hero p {
        font-size: 1.0em; /* フォントサイズを調整 */
        line-height: 1.0; /* 行間を広げる */
        margin: 7px 0;
    }

    .site-header {
        padding: 0.5rem 0;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1000;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .affiliate-ad{
        margin: 0 0 ;
    }

    section {
        margin-bottom: 10px;
    }

    .purchase-button {
        max-width: 90%; /* 親要素を超えないようにする */
    }

    .content{
        padding-left:10px;
        padding-right: 10px;
    }

    ul{
        padding-left: 20px;
    }

    input[type="submit"]{
        font-size: 16px;
    }
    
    input[type="reset"]{
        font-size: 16px;
    }

    .breadcrumb {
        font-size: 10px;
    }
    #backToTop {
        bottom: 15px; /* スマホでは少し上に配置 */
        right: 15px; /* スマホでは少し左に配置 */
        padding: 4px 12px; /* スマホ用にボタンのサイズを調整 */
        font-size: 14px; /* フォントサイズを小さく */
    }
    .quotation {
        text-align: center; 
        font-size: 7px;
    }

    th, td {
        font-size: 12px;
        padding: 6px;
    }

    .graph_image {
        width: 100% !important;/*htmlで設定しているwidthより優先度をあげている*/
    }

    .e-cert-summary {
        font-size: 12px;
        overflow-x: auto; /* 横スクロールを有効にする */
    }
    #quiz-container {
        font-size: 12px;
    }

    /* 模試予告コンテナ */
    .premium-mock-exam-container {
        margin-top: 20px;
        padding: 15px;
    }

    /* New! バッジ */
    .new-badge {
        background-color: #ffc107;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        font-weight: bold;
        margin-right: 10px;
    }

    /* 模試タイトル */
    .mock-exam-title {
        font-size: 1.1em; /* 少し大きく */
    }
    /* 販売開始予定日 */
    .release-date {
        font-size: 1.0em;
    }
    /* リードテキスト */
    .mock-exam-lead {
        font-size: 0.9em;
    }

    /* 特徴リスト */
    .mock-exam-features {
        font-size: 0.9em;
    }
    .choices{
        overflow-x: auto; /* 水平スクロールを許可 */
        white-space: nowrap; /* 数式が改行されないように */
        display: block; /* 必要に応じてブロック要素にする */
        margin-bottom: 10px; /* 選択肢間の余白（調整してください） */
        font-size: 12px;
    }
    .choices input{
        margin-bottom: 10px; /* 選択肢間の余白（調整してください） */
    }

    
}