h1 {
    font-weight: bold;
    font-size: 2.0em;
}

h2 {
    position: relative;
    padding: 10px;
    padding-left: 25px;
    font-weight: bold;
    font-size: 1.8em; /* フォントサイズを1.5倍に設定 */
    margin-top: 60px;
    margin-bottom: 15px;
    background-color: aliceblue;
}

h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background-color: #3498db;
}

section {
	/** padding-bottom: 40px; **/
}

h3 {
	position: relative;
	border-bottom: 5px solid #ddd;
	padding-bottom :2px;
	padding-top :25px;
	margin-top :15px;
	margin-bottom :15px;
    font-size: 1.5em; /* フォントサイズを1.5倍に設定 */
    font-weight: bold;
}
h3:before {
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 20%;
	height: 5px;
	content: '';
	background: #27acd9;
}


/* CSSコードに追加・修正 */
.position-relative {
    position: relative;
    display: inline-block;
}

.img-overlay-text, .img-overlay-text2 {
    background-color: rgba(0, 106, 182, 0.5);
    padding: 5px 10px;
    border-radius: 5px;
    word-wrap: break-word;
    text-align: center;
    width: 90%; /* テキストが画像の横幅を超えないように制限 */
    overflow-wrap: break-word; /* テキストの折り返しを強制 */
    line-height: 1.2; /* 行間を狭く */
    z-index: 2;
}

.img-overlay-text {
    font-size: 2.5rem;
}

.img-overlay-text2 {
    font-size: 1.5rem;	
}

/* スマホサイズ用のメディアクエリ */
@media (max-width: 767px) {
    .img-overlay-text {
        font-size: 1.8rem; /* スマホ用にフォントサイズを小さく */
    }

    .img-overlay-text2 {
        font-size: 1rem; /* スマホ用にフォントサイズを小さく */
    }
}

/* テキスト位置の微調整 */
.position-absolute {
    top: 50%; /* テキストの位置を少し上に移動 */
    transform: translate(-50%, -50%); /* 中央揃え */
}



.image-overlay {
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* オーバーレイの色と透明度 */
    z-index: 1; /* オーバーレイを最前面に配置 */
}


/*---------------------------------------------------------------------------------------------*/
/* [start] 記事のFAQ */
/*---------------------------------------------------------------------------------------------*/
/* 質問のスタイル */
.faq-q {
    color: #2c3e50; /* 濃いグレーで読みやすい文字色 */
    background-color: #e8f7fc; /* 薄い青背景で落ち着き感 */
    border-left: 4px solid #27acd9; /* 左に控えめなグレーライン */
    padding: 12px 16px; /* 適度な内側余白 */
    font-size: 1.1rem; /* 少し大きめの文字サイズ */
    margin-top: 20px; /* 質問と回答間の余白 */
    border-radius: 4px; /* 角を少し丸める */
    font-family: 'Arial', sans-serif; /* シンプルで読みやすいフォント */
    position: relative; /* アイコン用に調整 */
    padding-left: 50px; /* 左にアイコン用余白を追加 */
}
/* 質問のアイコン */
.faq-q::before {
    content: "Q:"; /* 質問アイコンとしてシンプルなQ */
    position: absolute;
    left: 15px; /* アイコンの位置調整 */
    top: 50%; /* 縦の中央揃え */
    transform: translateY(-50%);
    font-weight: bold; /* 太字で視認性を高める */
    color: #27acd9; /* 控えめな青 */
    font-size: 1.2rem; /* 少し大きめのアイコン */
}
/* 回答のスタイル */
.faq-a {
    color: #495057; /* やや薄めのグレーで読みやすさを強調 */
    background-color: #ffffff; /* 白背景でシンプルに */
    border-left: 4px solid #6c757d; /* 左に落ち着いたグレーライン */
    padding: 12px 16px; /* 適度な内側余白 */
    font-size: 1rem; /* 標準サイズの文字 */
    margin-top: 10px; /* 上下の間隔 */
    margin-bottom: 30px; /* 回答間の余白 */
    border-radius: 4px; /* 角を少し丸める */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* さりげない影を追加 */
    font-family: 'Arial', sans-serif; /* シンプルで読みやすいフォント */
    position: relative; /* アイコン用に調整 */
    padding-left: 50px; /* 左にアイコン用余白を追加 */
}
/* 回答のアイコン */
.faq-a::before {
    content: "A:"; /* 回答アイコンとしてシンプルなA */
    position: absolute;
    left: 15px; /* アイコンの位置調整 */
    top: 50%; /* 縦の中央揃え */
    transform: translateY(-50%);
    font-weight: bold; /* 太字で視認性を高める */
    color: #6c757d; /* 控えめなグレー */
    font-size: 1.2rem; /* 少し大きめのアイコン */
}
/* レスポンシブ調整 */
@media (max-width: 768px) {
    .faq-q, .faq-a {
        font-size: 1rem; /* モバイルでは文字を小さく */
        padding: 10px 16px; /* 内側余白を調整 */
        padding-left: 45px; /* アイコン用余白を調整 */
    }
    .faq-q::before, .faq-a::before {
        font-size: 1rem; /* アイコンのサイズを調整 */
        left: 12px; /* モバイルでの位置調整 */
    }
}
/*---------------------------------------------------------------------------------------------*/
/* [end] 記事のFAQ */
/*---------------------------------------------------------------------------------------------*/