/* セクション全体のレイアウトと背景画像 */
        .promise-section {
            position: relative;
            width: 100%;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            
            /* ======== 背景画像の設定 ======== */
            /* 実際の背景画像（右側の人物を含む）のパスを以下の url() 内に指定してください */
            background-image: url('../images/promise-bg.png');
            background-color: #f8f9fa; /* 画像読み込み前のフォールバック色 */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            /* ================================ */
            
            overflow: hidden;
            box-sizing: border-box;
        }

        /* コンテンツを中央に配置するコンテナ */
        .content-container {
            position: relative;
            z-index: 2;
            max-width: 900px;
            width: 100%;
            text-align: center;
        }

        /* アイコンの行 */
        .icons-row {
            display: flex;
            justify-content: center;
            gap: 24px;
        }

        /* PNGアイコン画像のスタイル */
        .icons-row img {
            max-width: 50%;
            max-height: 50%;
            object-fit: contain; /* 画像をフレーム内に収める */
            opacity: 0.9;
        }
        /* サブタイトル (WHY THESE PROMISES) */
        .subtitle {
            font-size: 13px;
            font-weight: 700;
            color: #b5924f;
            letter-spacing: 0.2em;
            margin-bottom: 15px;
            text-transform: uppercase;
        }

        /* メインタイトル (なぜ、この5つの約束をするのか) */
        .main-title {
            font-size: 32px;
            color: #1e2c45;
            margin-bottom: 60px;
            font-weight: 600;
            letter-spacing: 0.08em;
        }

        /* 本文テキストのコンテナ（ブロックは中央寄せ、テキスト自体は左揃え） */
        .text-content {
            display: inline-block;
            text-align: left;
            color: #4a5568;
            font-size: 15px;
        }

        .text-content p {
            margin: 0 0 28px 0;
        }

        .text-content p:last-child {
            margin: 0;
        }

        /* スマホ向けのレスポンシブ調整 */
        @media (max-width: 768px) {
            .wrap {
                max-width: 100%;
            }
            .main-title {
                font-size: 24px;
                margin-bottom: 40px;
            }
            .text-content {
                font-size: 14px;
                line-height: 1.8;
                display: block;
                flex: 1;
                min-width: 0;
                word-break: break-all; /* iPhoneでテキストが突き抜けるのを強制的に防ぐ一番強力なプロパティです */
            }
            .icon-circle {
                width: 48px;
                height: 48px;
            }
            .icons-row {
                gap: 12px;
                flex-wrap: wrap;
            }
            /* スマホでは意図的な改行を解除して自然に折り返す */
            .text-content br {
                display: none; 
            }
            /* 背景画像のスマホ時の位置調整（必要に応じて） */
            .promise-section {
                background-position: 70% center; 
                padding: 0 30px;
            }
            .icons-row img {
                max-width: 80%;
                max-height: 80%;
            }
        }

        #details {
            background-color: #fff;
        }
        .section-head h2 {
            color: #202a36;;
        }

    /* カードを配置するためのラッパー（中央寄せ・余白確保） */
        .promise-wrapper {
            width: 100%;
            padding: 10px 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
        }

        .promise-card {
            position: relative;
            max-width: 900px;
            width: 100%;
            background-color: #fdfcf9; /* 薄いベージュの背景 */
            border: 1px solid #e8e2d5; /* 控えめな境界線 */
            border-radius: 12px; /* 少し丸みを帯びた角 */
            padding: 45px 50px 45px 140px; /* 左側はバッジのために余白を広めに */
            box-sizing: border-box;
        }

        /* 左端の番号バッジ（画像） */
        .promise-badge {
            position: absolute;
            top: 50%;
            left: 25px; /* 画像の幅の半分をマイナス指定して境界線に重ねる */
            transform: translateY(-50%);
            width: 10%; /* 画像の想定サイズ */
            /*height: 90px;*/
            z-index: 2;
            object-fit: contain;
        }

        /* 右上の吹き出しアイコン（画像） */
        .promise-bg-icon {
            position: absolute;
            top: 0;
            right: 0;
            width: 160px; /* 吹き出しの想定サイズ */
            height: auto;
            z-index: 0;
            pointer-events: none; /* テキスト選択の邪魔にならないように */
            border-top-right-radius: 12px; /* カードの角丸に合わせる */
            padding: 10px;
        }

        /* コンテンツエリア（画像より手前に表示） */
        .promise-content {
            position: relative;
            z-index: 1;
        }

        /* タイトル（情報提供） */
        .promise-title {
            font-size: 22px;
            font-weight: 700;
            color: #202a36; /* ダークネイビー/グレー */
            margin: 0 0 20px 0;
            letter-spacing: 0.05em;
        }

        /* 本文 */
        .promise-desc {
            font-size: 15px;
            color: #4a5568;
            line-height: 2.0;
            margin: 0 0 25px 0 !important;
            letter-spacing: 0.02em;
        }

        /* 下部の「具体的には」ボックス */
        .promise-detail-box {
            background-color: #f6f3eb; /* 少し濃いベージュ */
            border-radius: 8px;
            padding: 18px 24px;
            display: flex;
            align-items: flex-start;
            gap: 16px;
        }

        .promise-detail-label {
            font-weight: 700;
            color: #b5924f; /* ゴールド/ブラウン */
            font-size: 14px;
            white-space: nowrap; /* ラベルを改行させない */
            margin-top: 2px;
        }

        .promise-detail-text {
            color: #4a5568;
            font-size: 14px;
            line-height: 1.8;
            margin: 0;
            display: block;
            flex: 1;
            min-width: 0;
            word-break: break-all; /* iPhoneでテキストが突き抜けるのを強制的に防ぐ一番強力なプロパティです */
        }

        /* スマートフォン向けのレスポンシブ対応 */
        @media (max-width: 768px) {
            .promise-wrapper {
                padding: 40px 0px;
            }

            .promise-card {
                padding: 30px 20px 30px 80px;
            }

            .promise-badge {
                width: 60px;
                height: 60px;
                left: 10px;
            }

            .promise-bg-icon {
                width: 100px;
                top: 10px;
                right: 10px;
            }

            .promise-title {
                font-size: 18px;
            }

            .promise-desc {
                font-size: 14px;
                line-height: 1.8;
            }

            .promise-detail-box {
                flex-direction: column; /* 縦並びに変更 */
                gap: 8px;
                padding: 16px;
            }
            .tie-card {
                display: block;
                flex: 1;
                min-width: 0;
                word-break: break-all; /* iPhoneでテキストが突き抜けるのを強制的に防ぐ一番強力なプロパティです */}
            
            .tie-card p {
                padding-bottom: 30px;
            }

        }