/* --- 基本設定 --- */
body{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Original Yu Gothic", "Yu Gothic", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            line-height: 1.8;
            color: #333;
            margin: 0;
            background-color: #f9f9f9;
        }
        .container{
            max-width: 900px;
            margin: 0 auto;
            padding: 0 20px;
        }
        section{
            padding: 60px 0;
        }
        h1, h2, h3{
            line-height: 1.4;
        }
        h2{
            text-align: center;
            font-size: 2rem;
            margin-bottom: 40px;
            color: #1a237e; /* 濃い青色 */
            padding: 0.5em 0;/*上下の余白*/
            border-top: solid 3px #1a237e;/*上線*/
            border-bottom: solid 3px #1a237e;/*下線*/
        }
        h3 {
            padding: 0.25em 0.5em;/*上下 左右の余白*/
            color: #494949;/*文字色*/
            background: transparent;/*背景透明に*/
            border-left: solid 5px #1a237e;/*左線*/
        }


/* 横並び */

.flex {
  display: flex; /*横並び*/
}
.flex .image {
  width: 150px; /*画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.flex .right {
  margin: 0 0 0 20px;
  padding: 0;
}
.flex .title {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 18px;
}
.flex .text {
  margin: 10px 0 0;
  padding: 0;
}

/* --- ヘッダー --- */
        header{
            background-color: #fff;
            padding: 20px 0;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo{
            font-size: 1.5rem;
            font-weight: bold;
            color: #1a237e;
        }

        /* --- ヒーローセクション --- */
        #hero{
            background-color: #e3f2fd; /* 薄い青色 */
            text-align: center;
            padding: 80px 0;
        }
        #hero h1{
            font-size: 2.5rem;
            color: #1a237e;
            margin-bottom: 20px;
        }
        #hero p{
            font-size: 1.1rem;
            margin-bottom: 30px;
        }

        /* --- お悩みセクション --- */
        #problems{
            background-color: #fff;
        }
        .problem-list{
            list-style: none;
            padding: 0;
        }
        .problem-list li{
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            font-size: 1.1rem;
            text-align: center;
            font-weight: 500;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .problem-list li::before{
            content: '';
            color: #1a237e;
            font-weight: bold;
            margin-right: 10px;
        }

        /* --- 解決策セクション --- */
        #solution{
            text-align: left;
            background-color: #e8eaf6; /* やや紫がかった薄い青 */
        }
        #solution .lead{
            font-size: 1.5rem;
            font-weight: bold;
            color: #1a237e;
        }
        #solution p{
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        #solution2{
            text-align: left;
            background-color: #ffffff; /* 白 */
        }
        #solution2 .lead{
            font-size: 1.5rem;
            font-weight: bold;
            color: #1a237e;
        }
        #solution2 p{
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }