body {
font-family: "Helvetica", "Arial", sans-serif;
margin: 0;
padding-bottom: 70px; /* フッターの高さ分の余白を作る */
line-height: 1.8;
}

.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
padding-top: 30px;
}

/* 見出し */
.yt-heading {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 23px; /* ← 動画サムネとバランスを取る文字サイズ */
font-weight: bold;
}

.yt-heading .bar {
width: 6px;
height: 1.2em; /* 文字と高さを揃える */
background-color: orange;
margin-right: 8px;
border-radius: 2px;
}

.yt-heading .title {
color: #333;
}


.img-center {
width: 100%;
max-width: 900px;      /* container と同じ最大幅 */
margin: 20px auto;     /* ← ブロックを中央に配置 */
text-align: center;    /* 中の画像を中央配置 */
}

.img-center img {
width: 100%;           /* ← スマホで確実に縮む */
height: auto;
display: block;
margin: 0 auto;
}


.kadai-center {
width: 100%;
max-width: 900px;      /* container と同じ最大幅 */
margin: 20px auto;     /* ← ブロックを中央に配置 */
text-align: center;    /* 中の画像を中央配置 */
}

.kadai-center img {
width: 80%;           /* ← スマホで確実に縮む */
height: auto;
display: block;
margin: 0 auto;
}


.container > .text-block {
width: 100%;
max-width: 900px;       /* container と合わせる */
margin: 20px auto;      /* ブロックを中央に揃える */
text-align: left;       /* 中身は左揃えのまま */
font-size: 18px;
line-height: 1.5;
}


/* 小見出し */
.sub-title {
text-align: left !important;
font-size: 24px;
font-weight: bold;
width: 100%;
max-width: 900px;     /* container と同じ */
margin-top: 40px;
margin-bottom: 0;
}

/* PC：横並び */
.content-row {
display: flex;
align-items: flex-start;
width: 100%;
max-width: 900px;      /* container と同じ幅 */
margin: 0 auto 20px;     /* ブロック自体を中央揃え */
gap: 30px;               /* テキストと画像の間隔 */
}

/* text-block：左側の文章 */
.content-row .text-block {
flex: 1;                 /* 余白は文章側に広がる */
font-size: 18px;
line-height: 1.5;
text-wrap: balance; 
}

/* 画像エリア：右側 */
.image-area img {
max-width: 350px;        /* PC での最大幅（調整可能） */
width: 100%;
height: auto;
border-radius: 4px;
}


/* クローズボタン */
.b-center {
text-align: center;
}

.close-btn {
display: inline-block;   /* これが重要！横幅が伸びるのを防ぐ */
padding: 7px 11px;
margin-bottom: 5%;
background-color: #6495ed;
color: white;
border-radius: 3px;
cursor: pointer;
border: none;
font-size: 18px;
width: fit-content;      /* 必要以上に横に広がらない */
text-align: center;
}

.close-btn:hover {
background-color: #0a66c2;
}


/* フッター（横幅いっぱいの青い帯・白文字） */
footer.site-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;    
background: #0a66c2;
color: white;
text-align: center;
padding: 10px 0;
font-size: 14px;
z-index: 9999;
}


/* ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ スマホ用レスポンシブ調整 ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ */
@media screen and (max-width: 700px) {
.sub-title {
font-size: 20px;
text-align: left;
margin-bottom: 15px;
line-height: 1.2;
}

/* 横並びを縦並びに切り替え */
.content-row {
flex-direction: column;
width: 100%;
max-width: 100%;   /* より自然に全幅にする */
}

.content-row .text-block {
font-size: 16px;
text-align: left;
}

.image-area img {
width: 100%;       /* スマホでは確実に縮む */
height: auto;
margin-top: 10px;
}
}