<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<style>
/* 全体の設定 */
.lp-section-empathy {
padding: 80px 20px;
background-color: #ffffff; /* 背景は白 */
font-family: “Helvetica Neue”, Arial, “Hiragino Kaku Gothic ProN”, “Hiragino Sans”, “Meiryo”, sans-serif;
color: #4a4a4a;
line-height: 1.8;
position: relative;
overflow: hidden;
text-align: center;
}
/* 水彩風の背景アクセント（右上と左下） */
.watercolor-blob-1 {
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255, 235, 238, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
z-index: 0;
pointer-events: none;
}
.watercolor-blob-2 {
position: absolute;
bottom: -150px;
left: -150px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255, 248, 225, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
z-index: 0;
pointer-events: none;
}
.content-wrapper {
position: relative;
z-index: 1;
max-width: 700px;
margin: 0 auto;
}
/* 見出しのデザイン */
.section-title {
font-family: “Yu Mincho”, “MS Mincho”, serif;
font-size: 28px;
color: #7d6b63;
margin-bottom: 50px;
font-weight: normal;
letter-spacing: 0.05em;
position: relative;
display: inline-block;
padding-bottom: 15px;
}
.section-title::after {
content: “”;
position: absolute;
bottom: 0;
left: 15%;
right: 15%;
height: 1px;
background: linear-gradient(to right, transparent, #d4b8ab, transparent);
}
/* 箇条書き（縦並び）のデザイン */
.problem-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.problem-item {
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(212, 184, 171, 0.2);
border-radius: 15px;
padding: 25px 30px;
margin-bottom: 20px;
display: flex;
align-items: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
/* チェックマークのアイコン */
.check-icon {
width: 28px;
height: 28px;
margin-right: 20px;
background-color: #fce4ec;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #d81b60;
font-weight: bold;
flex-shrink: 0;
}
.problem-text {
font-size: 17px;
color: #5d5d5d;
}
/* 下部の補足メッセージ */
.closing-text {
margin