/* ============================================================ 追加セクション用スタイル - ご利用者様に評価いただいている当院の魅力 (#containerReviews) - 施術の流れ (#containerFlow) 既存の style.css のトーン（游明朝 / アクセント #e67928 / rem基準10px）に合わせている。 マージ時は style.css 末尾に追記するか、このファイルを index.html の で style_responsive.css より前に読み込むこと。 ============================================================ */ /* ---------- 共通：#container1〜9 と同じ余白ルールを流用 ---------- */ #containerReviews, #containerFlow{ width: 80%; margin: 0 auto; padding: 100px 0 50px 0; } /* ---------- ご利用者様に評価いただいている当院の魅力 ---------- */ .reviewSummaryGrid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin: 30px auto 40px auto; } .reviewSummaryCard{ flex: 1 1 260px; max-width: 300px; background-color: #FFFBF3; border: 1px solid #f0dcc0; border-radius: 6px; padding: 34px 24px; text-align: center; } .reviewSummaryCard .reviewIcon{ display: inline-block; width: auto; font-size: 2.6rem; color: #e67928; margin-bottom: 16px; } .reviewSummaryCard h3{ margin: 0 0 12px 0; font-size: 1.8rem; line-height: 1.6em; } .reviewSummaryCard p{ font-size: 1.4rem; line-height: 1.9em; text-align: center; } .reviewGoogleLink{ text-align: center; font-size: 1.6rem; } .reviewGoogleLink a{ display: inline-flex; width: auto; align-items: center; color: #e67928; font-weight: bold; text-decoration: none; border-bottom: 1px solid #e67928; padding-bottom: 4px; } .reviewGoogleLink a:hover{ opacity: 0.75; } .reviewGoogleLink .fa-google{ display: inline-block; width: auto; color: #e67928; } /* ---------- 施術の流れ ---------- */ .flowSteps{ display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 30px; } .flowStep{ flex: 1; text-align: center; } .flowStep .flowNum{ display: block; width: auto; font-size: 1.6rem; color: #e0b78a; letter-spacing: 0.08em; margin-bottom: 6px; } .flowStep .flowIcon{ display: inline-block; width: auto; font-size: 3.0rem; color: #e67928; margin: 6px 0 10px 0; } .flowStep h3{ margin: 0 0 8px 0; font-size: 1.8rem; line-height: 1.4em; } .flowStep p{ font-size: 1.3rem; line-height: 1.7em; text-align: center; } .flowArrow{ flex: 0 0 auto; width: auto; color: #e0b78a; font-size: 1.6rem; padding-top: 40px; } .flowArrow i{ display: inline-block; width: auto; } /* ---------- レスポンシブ（既存 750px ブレークポイントに合わせる） ---------- */ @media (max-width: 750px){ #containerReviews, #containerFlow{ width: 90%; padding: 30px 0 0 0; } .reviewSummaryGrid{ gap: 16px; margin: 20px auto 30px auto; } .reviewSummaryCard{ flex: 1 1 100%; max-width: 100%; padding: 24px 20px; } .flowSteps{ flex-direction: column; align-items: stretch; gap: 0; } .flowStep{ padding: 16px 0; border-bottom: 1px dashed #f0dcc0; } .flowStep:last-child{ border-bottom: none; } .flowArrow{ display: none; } }