/* 基本的なリセットとフォント設定 */
body {
font-family: "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
background-color: #00a6e7; /* 背景色を変更 */
padding: 20px; /* 全体的なパディング */
margin: 0; /* bodyのデフォルトマージンを削除 */
}

/* ヘッダー */
header {
max-width: 760px; /* 最大幅を設定 */
margin: 0 auto 32px; /* 中央寄せと下マージン */
}

.header-image-container {
margin-bottom: 20px; /* ヘッダー画像の下マージン */
}

header img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
width: 100%; /* 幅を100%に設定 */
}


/* デフォルト（モバイルファースト）の画像タイトルコンテナと画像の設定 */
.form-title-image-container {
text-align: center;
margin: 20px auto; /* 親要素の余白を調整 */
}

/* form-title-image-container 内のimg要素に共通のモバイルスタイルを適用 */
.form-title-image-container img {
display: block;
margin: 0 auto;
height: auto;
width: 70%; /* モバイル時の幅をここで設定 */
max-width: 90%; /* モバイル時のmax-widthもここで統一 */
}

#image-form-title {
margin-top: 70px; /* お好みで調整 */
}

/* PC用の画像はデフォルトで非表示、モバイル用は表示 */
.pc-only {
display: none;
}

.mobile-only {
display: block;
}

/* --- 新しく追加するボタンのスタイル --- */
.button-link-area {
text-align: center; /* ボタン画像を中央寄せ */
margin: 20px auto 30px auto; /* 上下左右の余白を調整 */
/* 親要素 (.form-title-image-container) の幅に追従するため、
ここではmax-widthは指定しません */
}

.button-link {
display: block; /* aタグをブロック要素にして画像の幅を制御 */
margin: 0 auto; /* 中央寄せ */
line-height: 0; /* 画像の下にできる余白をなくす */
}

.button-link img {
display: block; /* imgをブロック要素にしてレイアウトを安定 */
height: auto; /* アスペクト比を維持 */
margin: 0 auto; /* 画像自身も中央寄せ */
}
/* --- ここまで追加するボタンのスタイル --- */

main {
max-width: 700px;
margin: 0 auto;
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

/* 新しく追加する郵送応募ボックス全体のスタイル調整（マージンのみ） */
.postal-application-box {
margin-bottom: 3em; /* 下に余白を追加 */
margin-top: 20px; /* mainのpadding-topと調整 */
}

.info-section {
max-width: 700px;
margin: 0 auto 32px;
background: #fff;
padding: 24px 30px;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
font-weight: bold; /* この指定がul li に継承される */
text-align: left;
color: #333;
line-height: 1.6;
}

.info-section h2 { /* このルールは section-title クラスがあるh2には適用されない */
font-size: 1.2em;
font-weight: bold;
color: #007bb5;
text-align: left;
margin-bottom: 24px;
}

/* 既存の .info-section .section-title のスタイル */
.info-section .section-title {
font-size: 1.2em;
margin: 24px 0 12px;
font-weight: bold;
color: #007bb5;
border-bottom: 2px solid #00a6e7;
padding-bottom: 4px;
text-align: left;
}

.info-section .section-title:first-of-type {
margin-top: 0;
}

.info-section p {
line-height: 2.2; /* 元々3でしたが、リストと合わせるため調整 */
margin-bottom: 15px;
}

/* 「テーマ」の本文の行間を調整する新しいルール */
/* h2の直後のp要素に適用 */
.info-section h2.section-title + p {
line-height: 1.8; /* 応募資格のリストと同じ行間に設定 */
margin-top: 10px; /* 必要に応じて調整 */
margin-bottom: 15px; /* 必要に応じて調整 */
}

.info-section p.award-item {
line-height: 3;
margin-bottom: 25px;
}

.info-section p.award-item .indent-text {
display: inline-block;
text-indent: 1.5em;
margin-left: -1.5em;
}

h3 {
background-color:#f0fbff;
padding-top:0.8em;
padding-bottom:0.1em;
border-left: 10px solid #00a6e7; /* 左側だけのボーダー */
}

.info-section p:has(.blue-star) {
line-height: 1.8;
margin-bottom: 12px;
}

.info-section p .blue-star {
color: #00a6e7;
margin-right: 5px;
}

/* 応募資格セクション内のリストのスタイル調整 (修正: font-weight: normal; を削除) */
.info-section ul {
list-style: none; /* デフォルトのリストマーカーを削除 */
padding: 0; /* デフォルトのパディングを削除 */
margin-top: 15px; /* 上の要素との余白 */
margin-bottom: 15px; /* 下の要素との余白 */
}

.info-section ul li {
margin-bottom: 8px; /* 各リストアイテムの下に余白 */
line-height: 1.8; /* 行の高さ */
color: #333; /* 文字色をデフォルトに */
text-align: left; /* 左寄せ */
/* --- ★ここから数字のアウトデントのための追加★ --- */
padding-left: 1.8em;     /* テキスト全体を右にずらす */
text-indent: -1.8em;     /* 数字の部分だけ左にずらす */
/* --- ★ここまで追加★ --- */
}

.theme-list .award-heading {
margin-bottom: 12px;
}

/* --- テーマ・応募期間セクション共通のul/li --- */
.info-section .theme-list {
list-style: none;
padding: 0;
margin-top: 15px;
margin-bottom: 15px;
}

.info-section .theme-list li {
margin-bottom: 8px;
line-height: 2.2;     /* ←ここ変更！ */
color: #333;
text-align: left;
padding-left: 1.8em;
text-indent: -1.8em;
}

/* ●●賞（優秀賞・佳作・参加賞など）の見出し行に余白を追加して、本文と離す */
.theme-list .award-heading {
margin-bottom: 12px;
}

/* 番号なしのリスト項目（例：募集期間）専用 */
.info-section .theme-list.nobullet {
padding-left: 0;
margin-left: 0;
}

.info-section .theme-list.nobullet li {
padding-left: 0;
text-indent: 0;
}

.contact-box {
border: 3px solid #00a6e7;
border-radius: 12px;
padding: 16px;
text-align: center; /* contact-box のデフォルトを中央寄せに設定 */
background-color: #f0fbff;
color: #333;
font-weight: bold;
margin-top: 40px;
line-height: 2;
}

/* お問い合わせボックスと郵送応募ボックス内のh2.section-title.contact-heading のスタイル */
.section-title.contact-heading {
text-align: center;
color: #007bb5; /* 文字色を水色に */
border-bottom: 2px solid #00a6e7; /* 下線を復活 */
padding-bottom: 4px;
margin-bottom: 1em; /* 下のpタグとの間隔 */
font-size: 1.2em;
font-weight: bold;
}

.contact-box p {
line-height: 2.2;
margin-top: 0; /* 上の要素との間隔を調整 */
margin-bottom: 0; /* 下の要素との間隔を調整 */
}

/* 郵送応募ボックス内の見出し上の余白を調整 */
.postal-application-box .section-title.contact-heading {
margin-top: 0;
}

.contact-box ul {
list-style: none;
padding-left: 0;
margin-left: 0;
text-align: center; /* ← これを追加！ */
}

.contact-box ul li {
padding-left: 0;
text-indent: 0;
text-align: center; /* ← これを追加！ */
}

.contact-box .theme-list li {
text-align: center;
}

ruby rt {
font-size: 0.4em;
padding-bottom: 0.3em; /* ルビとテキストの間隔 */
font-weight: normal; /* 太字を解除 */
}

.indent-1 {
padding-left: 1em;
display: block;
}

.required-info {
max-width: 700px;
margin: 0 auto 16px;
font-weight: bold;
text-align: center;
}

.required-star {
color: red;
}

form label {
display: block;
font-weight: bold;
margin-top: 16px;
margin-bottom: 6px;
background-color: #edf9fd;
padding: 6px 12px;
border-radius: 4px;
}

form input,
form select,
form textarea {
padding: 6px;
font-size: 1em;
border: 5px solid #ccedfa;
border-radius: 12px;
box-sizing: border-box;
margin-bottom: 24px;
width: 100%;
}

form input:focus,
form select:focus,
form textarea:focus {
outline: none; /* デフォルトのfocus outlineを削除 */
box-shadow: 0 0 5px rgba(0, 166, 231, 0.7); /* カスタムfocus glow */
border-color: #00a6e7; /* ボーダーの色も変更 */
}

form input::placeholder {
color: #aaa;
}

form input::-webkit-outer-spin-button,
form input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

form input::-ms-clear {
display: none;
}

form textarea {
height: 100px;
resize: vertical;
}

.form-divider {
border-bottom: 3px dotted #00a6e7;
margin: 4px 0 24px;
}

.form-divider--last {
margin: 16px 0;
}

input[type="file"] {
appearance: none;
background-color: #ccedfa;
color: #333;
padding: 10px 16px;
border-radius: 12px;
border: 5px solid #00a6e7;
font-size: 1em;
cursor: pointer;
}

input[type="file"]:focus {
outline: none;
box-shadow: 0 0 5px rgba(0, 166, 231, 0.7);
border-color: #00a6e7;
}

input[type="file"]::-webkit-file-upload-button {
background-color: #00a6e7;
color: white;
border: none;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
}

input[type="file"]::-webkit-file-upload-button:hover {
background-color: #007bb5;
}

/* ------------------------------
共通ユーティリティクラス
------------------------------ */

.hidden {
display: none;
}
/* */

.button-container {
text-align: center;
}

form button {
text-align: center;
margin-top: 30px;
background-color: orange;
color: #fff;
border: none;
padding: 12px 32px;
font-size: 1.2em;
font-weight: bold;
border-radius: 50px;
cursor: pointer;
transition: all 0.2s ease;
}

form button:hover {
background-color: #ff9900;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 166, 231, 0.4);
}

form button:active {
background-color: #e68000;
transform: translateY(0);
box-shadow: none;
}

.button-text-small {
display: block;
font-size: 0.6em;
color: #fff;
text-align:left;
}

form small {
display: block;
margin-top: 4px;
margin-left: 12px;
margin-bottom: 6px;
font-size: 0.85em;
color: #666;
}

.radio-clean {
display: flex;
flex-direction: row;
gap: 32px;
margin: 8px 0 24px;
align-items: center;
}

.radio-clean .radio-inline {
display: flex;
align-items: center;
gap: 6px;
font-weight: normal;
background: none;
padding: 0;
margin: 0;
}

.color1 {
color: #007bb5;
}

/* PC表示（768px以上）の場合 */
@media (min-width: 768px) {
/* PC用を表示し、モバイル用を非表示 */
.pc-only {
display: block;
}
.mobile-only {
display: none;
}

/* PC用の画像タイトルコンテナの余白調整 */
.form-title-image-container {
margin-top: 10px; /* デフォルトより詰める */
margin-bottom: 30px; /* 上下左右の余白を調整 */
max-width: 760px; /* 親要素の最大幅（必要に応じて調整） */
}

/* PC用の応募要項の画像（tt_bosyu_pc.png）の幅設定 */
#image-bosyu-pc { /* IDで指定 */
width: 100%; /* 親要素の幅いっぱいに広げる */
max-width: 100%;
height: auto;
}

/* PC用のフォームタイトル画像（title_text.png）の幅設定 */
#image-form-title { /* IDで指定 */
width: 300px; /* 横300pxに戻す */
max-width: 100%; /* 親要素を超える場合は縮小 */
height: auto;
}

/* PC用ボタンの幅指定 */
/* .form-title-image-container 内の .button-link-area 内の img に適用 */
.form-title-image-container .button-link-area .button-link img {
width: 600px; /* PCでの希望横幅 */
max-width: 100%; /* 親要素を超えないように */
}

/* .form-title-image-container 内のボタン領域の余白をPC向けに調整 */
.form-title-image-container .button-link-area {
margin-top: 30px; /* 画像の下からの上部の余白 */
margin-bottom: 40px; /* 次の要素までの下部の余白 */
}
}

@media (max-width: 767px) {
body {
padding: 10px;
}

.info-section {
padding: 16px;
}

main {
padding: 16px;
}

/* モバイル時の新しい郵送応募ボックスのスタイル調整 */
.postal-application-box {
margin-bottom: 20px; /* モバイル時の下余白 */
margin-top: 24px; /* モバイル時のマージン */
}

/* モバイル時の .section-title.contact-heading の調整 */
.section-title.contact-heading {
font-size: 1.1em; /* モバイル時は少し小さく */
margin-bottom: 0.8em; /* モバイル時の下の余白 */
}

form label {
margin-top: 12px;
margin-bottom: 4px;
padding: 4px 8px;
}

form input,
form select,
form textarea {
margin-bottom: 16px;
}

.form-divider {
margin: 4px 0 16px;
}

.required-info {
padding: 0 8px;
}

/* モバイル用の画像はここで調整 */
/* .form-title-image-container img のスタイルがデフォルトとして適用されます */
/* 個別のモバイル画像については、以下で再度指定することも可能です */
.mobile-only.form-title-image-container img {
width: 70%; /* モバイル時の画像幅 */
height: auto;
display: block;
}

.contact-box {
padding: 12px;
margin-top: 24px;
}

/* モバイル用ボタンの幅指定 */
/* .form-title-image-container 内の .button-link-area 内の img に適用 */
.form-title-image-container .button-link-area .button-link img {
width: 80%; /* モバイルでの横幅（適宜調整してください） */
max-width: 100%; /* 親要素を超えないように */
}

/* .form-title-image-container 内のボタン領域の余白をモバイル向けに調整 */
.form-title-image-container .button-link-area {
margin-top: 20px; /* 画像の下からの上部の余白 */
margin-bottom: 30px; /* 次の要素までの下部の余白 */
padding: 0 10px; /* 左右に少し余白を持たせる場合 */
}

/* モバイル時の応募資格リストの行間を調整 */
.info-section ul li {
line-height: 2.2; /* 現在の1.8から変更。お好みの値に調整してください */
margin-bottom: 12px; /* 必要に応じて、各リストアイテムの下の余白も調整 */
}

/* 応募タイトル画像（スマホ）の幅 */
.mobile-only.form-title-image-container > img:first-child {
width: 100%;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto 2em;
}

/* 上のタイトル画像ボックスの上マージンを調整（スマホ用） */
.form-title-image-container {
margin-top: 10px;  /* デフォルトより詰める */
}
}

/* --- confirm.html のボタン専用スタイル --- */

/* 確認画面のボタン間隔調整 (PC版) - style.cssの既存定義を上書き */
.button-container {
gap: 40px; /* ボタン間のスペースを40pxに広げる */
}

/* 確認画面のボタン間隔調整 (モバイル版) - style.cssの既存定義を上書き */
@media (max-width: 767px) {
.button-container {
gap: 20px; /* モバイル版では少し狭く */
}
}

/* confirm.html のボタン共通スタイル（既存の form button を上書き） */
.confirm-button {
margin-top: 30px; /* 既存の form button のマージンを維持 */
color: #fff;
border: none;
padding: 12px 32px;
font-size: 1.2em;
font-weight: bold;
border-radius: 50px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center; /* 中央寄せ */
display: inline-block; /* text-alignが効くように */
}

/* 送信するボタンのスタイル */
.confirm-button.submit-button {
background-color: #e95519; /* 送信するボタンの色 */
}

.confirm-button.submit-button:hover {
background-color: #f26f3e; /* 送信するボタンのホバー時の色 (明るく) */
transform: translateY(-2px); /* 既存のエフェクトを維持 */
box-shadow: 0 4px 10px rgba(0, 166, 231, 0.4); /* 既存のエフェクトを維持 */
}

.confirm-button.submit-button:active {
background-color: #b84313; /* 送信するボタンのアクティブ時の色 */
transform: translateY(0); /* 既存のエフェクトを維持 */
box-shadow: none; /* 既存のエフェクトを維持 */
}

/* 修正するボタンのスタイル */
.confirm-button.modify-button {
background-color: #2660ac; /* 修正するボタンの色 */
}

.confirm-button.modify-button:hover {
background-color: #3b7ad7; /* 修正するボタンのホバー時の色 (明るく) */
transform: translateY(-2px); /* 既存のエフェクトを維持 */
box-shadow: 0 4px 10px rgba(0, 166, 231, 0.4); /* 既存のエフェクトを維持 */
}

.confirm-button.modify-button:active {
background-color: #1c467b; /* 修正するボタンのアクティブ時の色 */
transform: translateY(0); /* 既存のエフェクトを維持 */
box-shadow: none; /* 既存のエフェクトを維持 */
}

/* ボタン内の小文字ルビテキストのスタイル調整（text-alignを継承させない） */
.confirm-button .button-text-small {
text-align: left; /* ボタン内のテキストを左に */
}

/* --- complete.html: メッセージボックスの天地のアキ調整（再修正） --- */
.complete-box-no-margin {
/* 親ボックスの天地のアキを残すため、このボックス自身のマージンは調整しない */
margin-top: 0;
margin-bottom: 0;
border-radius: 12px; /* ボックス自体の角丸を復活 */
text-align: center; /* ★ここに追加・修正: ボックス内のデフォルトを中央寄せに設定★ */
}

/* モバイル時の調整 (max-width: 767px) */
@media (max-width: 767px) {
.complete-box-no-margin {
margin-top: 0;
margin-bottom: 0;
text-align: center; /* ★ここに追加・修正: モバイル時も中央寄せを維持★ */
}
}

/* --- index.html: 郵送応募ボックスの上部アキ調整 --- */
/* index.htmlの郵送応募ボックスにのみ適用 */
main .postal-application-box:first-of-type {
margin-top: 0; /* main内の最初の .postal-application-box の上部マージンを0に設定 */
}

/* モバイル時の調整 (max-width: 767px) */
@media (max-width: 767px) {
main .postal-application-box:first-of-type {
margin-top: 0; /* モバイル時も上部マージンを0に設定 */
}
}

/* --- complete.html: 各要素の個別スタイル調整 --- */

/* h2見出しのスタイル調整 */
.complete-box-no-margin .complete-heading {
text-align: center; /* ★見出しは中央寄せに戻す★ */
color: #007bb5; /* 文字色を水色に（元の画像と同じ色） */
border-bottom: 2px solid #00a6e7; /* 下線を復活 */
padding-bottom: 4px;
margin-bottom: 1em; /* 下のpタグとの間隔 */
font-size: 1.2em;
font-weight: bold;
}

/* h2見出し内のルビのスタイル調整 */
.complete-box-no-margin .complete-heading rt {
font-size: 0.4em; /* 元のルビサイズに戻す */
padding-bottom: 0.3em; /* ルビとテキストの間隔 */
font-weight: normal; /* 太字を解除 */
}

/* 本文部分の左寄せ調整 */
.complete-box-no-margin .complete-text {
text-align: left; /* ★ここが本文の左寄せを適用★ */
margin-bottom: 2em; /* 本文と連絡先の間のスペース調整（PC）*/
line-height: 2.2; /* 行間調整 */
}

/* 事務局連絡先部分のスタイル調整 */
.complete-box-no-margin .complete-contact-info {
text-align: center; /* ★連絡先全体を中央寄せに戻す★ */
margin-top: 0; /* 本文との間隔はcomplete-textのmargin-bottomで調整 */
}

/* 事務局連絡先内のpタグの行間調整 */
.complete-box-no-margin .complete-contact-info p {
line-height: 2.2; /* 調整してください。通常テキストの行間 */
text-align: center; /* ★連絡先内のテキストも中央寄せに戻す★ */
}

/* モバイル時の調整 (max-width: 767px) */
@media (max-width: 767px) {
.complete-box-no-margin .complete-heading {
font-size: 1.1em; /* モバイル時は少し小さく */
margin-bottom: 0.8em; /* モバイル時の下の余白 */
}
.complete-box-no-margin .complete-heading rt {
font-size: 0.45em; /* モバイル時のルビサイズ */
}

.complete-box-no-margin .complete-text {
text-align: left;
margin-bottom: 1.5em; /* 本文と連絡先の間のスペース調整（モバイル）*/
}

.complete-box-no-margin .complete-contact-info {
text-align: center;
}
.complete-box-no-margin .complete-contact-info p {
line-height: 2.2; /* モバイル時の行間 */
text-align: center;
}
}

/* --- complete.html: 送信完了ボックスのボーダーと背景色を白に変更 --- */
/* complete.html専用のボックスの見た目を調整 */
.complete-box-no-margin {
border: 3px solid #ffffff; /* ボーダーを白に */
background-color: #ffffff; /* 背景色を白に */
}

/* モバイル時の調整 (max-width: 767px) */
@media (max-width: 767px) {
.complete-box-no-margin {
border: 3px solid #ffffff; /* モバイル時もボーダーを白に */
background-color: #ffffff; /* モバイル時も背景色を白に */
}
}

/*  */
#kiyaku p {
text-align:center;
font-weight:bold;
color:red;
}

#kiyaku a {
font-weight:bold;
}

/* 追記 */
/* --- 応募規約確認チェックボックスのスタイル（ルビ垂直位置維持版）--- */

.kiyaku-checkbox-container {
    text-align: center; /* コンテナ内の要素を中央寄せにする */
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 700px; /* main要素のmax-widthに合わせるか、適宜調整 */
    margin-left: auto; /* 中央寄せ */
    margin-right: auto; /* 中央寄せ */
    font-size: 16px; /* 親要素のフォントサイズを明示 */
}

.kiyaku-checkbox-container label {
    display: inline-flex;
    align-items: baseline; /* テキストのベースラインに揃える */
    font-weight: bold;
    color: #333;
    cursor: pointer;
    background-color: transparent;
    padding: 0;
    margin: 0;
    line-height: normal; /* label自体の行高さをブラウザに任せる */
    /* letter-spacing: 0.3em; // ご提供のletter-spacingを削除 */
}

.kiyaku-checkbox-container input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #00a6e7;
    border-radius: 50%; /* 円形 */
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0; /* チェックボックスが縮まないようにする */

    /* ★★★ 天地ずれを解消するための微調整 ★★★ */
    transform: translateY(-2px); /* 上に2px移動させて天地を合わせる */
    margin-right: 8px; /* テキストとの間隔 */
}

.kiyaku-checkbox-container input[type="checkbox"]:checked {
    background-color: #00a6e7;
    border-color: #00a6e7;
}

.kiyaku-checkbox-container input[type="checkbox"]:checked::after {
    content: '✔';
    display: block;
    color: white;
    font-size: 14px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央揃え */
    line-height: 1; /* チェックマーク自身の行高さを調整 */
}

/* ★★★ ルビの重なりを解消するための重要な調整（垂直位置のみ維持）★★★ */
.kiyaku-checkbox-container label ruby {
    display: inline-block; /* ruby自体をインラインブロックとして扱い、テキストフローを維持 */
    vertical-align: middle; /* 親のlabelのalign-items: baseline;に合わせつつ、ルビ全体を中央に */
    /* line-height: 1; // ルビ親文字とルビ文字の行高さを制御 -> 削除 */
    position: relative; /* rtの絶対配置の基準にする */
    /* margin-right: -0.2em; // ルビとルビ文字の間の不要なスペースを少し詰める -> 削除 */
    /* text-align: center; // ルビ親文字も中央揃えにする -> 削除 */
}

.kiyaku-checkbox-container label ruby rt {
    font-size: 0.4em; /* もともとのルビサイズ */
    /* line-height: 1; // ルビ自身の行高さを調整 -> 削除 */
    font-weight: normal; /* 太字解除 */
    white-space: nowrap; /* ルビが改行しないように */
    
    /* ★★★ ルビの天地位置を精密に調整し、重なりを解消 ★★★ */
    position: absolute; /* 親のrubyに対する絶対位置 */
    top: -2.2em; /* 上に移動させて親文字の上に配置（値を大きくしてアキを広げる） */
    left: 50%; /* 水平方向の中央に寄せる準備 */
    transform: translateX(-50%); /* 水平方向の中央揃え */
    padding-bottom: 0.2em; /* ルビと親文字の間隔を少し広げる */
    color: inherit; /* 親の文字色を継承 */
    /* padding-left: 0.05em; // ルビ文字の左右に余白を追加（調整してください） -> 削除 */
    /* padding-right: 0.05em; // ルビ文字の左右に余白を追加（調整してください） -> 削除 */
}

/* 応募規約の文章のルビ調整（#kiyaku p 内のルビは既存のスタイルを尊重） */
#kiyaku p ruby rt {
    position: static; /* デフォルトに戻す */
    font-size: 0.4em;
    padding-bottom: 0.3em;
    font-weight: normal;
    top: auto;
    left: auto;
    transform: none;
    color: inherit;
    /* padding-left, padding-right は影響しないように削除 */
}


/* モバイル時の調整 */
@media (max-width: 767px) {
    .kiyaku-checkbox-container {
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 16px;
    }
    .kiyaku-checkbox-container label {
        line-height: normal;
        /* letter-spacing: 0.5em; // ご提供のletter-spacingを削除 */
    }
    .kiyaku-checkbox-container input[type="checkbox"] {
        width: 18px;
        height: 18px;
        transform: translateY(-1px); /* モバイル時の微調整 */
        margin-right: 6px;
    }
    .kiyaku-checkbox-container input[type="checkbox"]:checked::after {
        font-size: 12px;
    }
    /* モバイル時のルビ調整 */
    .kiyaku-checkbox-container label ruby rt {
        top: -2em; /* モバイル時もアキを広げる */
        font-size: 0.4em;
        padding-bottom: 0.15em; /* モバイル時のルビと親文字の間隔調整 */
        /* padding-left: 0.03em; // モバイル時のルビ文字の左右に余白を追加（調整してください） -> 削除 */
        /* padding-right: 0.03em; // モバイル時のルビ文字の左右に余白を追加（調整してください） -> 削除 */
    }
}