@charset "Shift_JIS";
/* viewport の設定 (HTMLのに追加してください) */
/* */
/***************■全体構造*********************/
/*背景の指定*/
#backcolor {
background-color: #ffedab;
}
/*タイトル*/
#titleImage {
width: 950px; /* 固定幅に戻す */
padding: 0;
border: none;
margin: 0 auto; /* 中央寄せ */
display: block; /* 画像がブロック要素として振る舞うように */
}
/*作業範囲*/
.main_body {
background-color: #fff;
width: 950px; /* 固定幅に戻す */
font-size: 14px;
text-align: center;
padding: 0px 0px; /* 元のpaddingに戻す */
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box; /* padding, border を幅に含まれるように */
}
.main_body p {
font-size: 18px; /* 元のフォントサイズに戻す */
color: #2d2d2d;
padding: 0; /* 元のpaddingに戻す */
text-align: left;
line-height: 1.6; /* 行間を調整 (維持) */
}
.main_body span {
margin-left: 30px; /* 元の左マージンに戻す */
padding: 0 10px; /* 元のpaddingに戻す */
border-bottom: 1px dotted #2d2d2d;
}
.mida_main {
width: 950px; /* 固定幅に戻す */
background-color: #f06d68;
padding: 2px 0px 0px 0px; /* 元のpaddingに戻す */
font-size: 20px; /* 元のフォントサイズに戻す */
font-weight: bold;
text-align: center;
color: #fff;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
box-sizing: border-box; /* padding, border を幅に含まれるように */
}
/*装飾関連*/
hr {
border: 0;
border-top: 1px dotted #a9a9a9;
margin: 20px 0px; /* 元のマージンに戻す */
}
/* --------------------------------------------------
リンク色
-------------------------------------------------- */
a:link {
text-decoration: none;
color: #0000ff;
}
a:visited {
text-decoration: none;
color: #0000ff;
}
a:hover {
text-decoration: none;
color: #ff6600;
}
a:active {
text-decoration: none;
color: #ccccff;
}
/* ==================================================
レスポンシブ対応のためのメディアクエリ
画面幅が 980px 以下のデバイスに適用
(950px + 左右の余白を考慮して少し大きめに設定)
================================================== */
@media screen and (max-width: 980px) {
#titleImage,
.main_body,
.mida_main {
width: auto; /* 幅を自動調整 */
max-width: 95%; /* 親要素の95%に制限し、左右に余白を持たせる */
margin-left: auto;
margin-right: auto;
}
.main_body {
padding: 15px; /* 狭い画面での上下左右の余白 */
}
.main_body p {
font-size: 16px; /* 狭い画面でのフォントサイズ調整 */
padding: 10px 0; /* 狭い画面での上下の余白 */
}
.main_body span {
display: block; /* 各spanを改行して表示 */
margin-left: 0; /* 左マージンをなくす */
padding: 5px 0; /* 上下のpaddingを調整 */
}
.mida_main {
font-size: 18px; /* 狭い画面でのフォントサイズ調整 */
padding: 10px 15px; /* 狭い画面での上下左右の余白 */
}
/* さらに狭い画面 (例: 600px以下) での調整 */
@media screen and (max-width: 600px) {
.mida_main {
font-size: 16px;
padding: 8px 15px;
}
.main_body p {
font-size: 14px;
padding: 8px 0;
}
}
}