@charset "UTF-8";html {scroll-behavior: smooth;}/* ベースリセット */* {box-sizing: border-box;margin: 0;padding: 0;}body {color: #2b2b2b;background-color: #f7f6f3;line-height: 1.7;}/* ==========================================2カラムレイアウト全体のコンテナ（1180pxに固定）============================================ */.lp-container {display: flex !important;min-height: 100vh;max-width: 1180px;margin: 0 auto;position: relative !important;align-items: stretch !important;}/* ==========================================左側固定パネル（PC版のみJSで追従制御）============================================ */.left-fixed-panel {position: relative;top: 0;/* ─── 左カラムの幅を35%（413px）に完全固定 ─── */width: calc(1180px * 0.35) !important;flex-shrink: 0 !important;height: calc(100vh - 40px) !important;margin-right: 24px !important;/* ────────────────────────────────────────── */background: linear-gradient(135deg, #53bc9e 0%, #8da7ce 100%);color: #fff;padding: 60px 30px;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;box-shadow: 4px 4px 20px rgba(0,0,0,0.08);z-index: 100;overflow: hidden;}/* 画面幅が768px以下のスマートフォン環境では追従を完全クリア */@media (max-width: 768px) {.left-fixed-panel {position: relative !important;top: auto !important;left: auto !important;bottom: auto !important;width: 100% !important;height: auto !important;margin-right: 0 !important;margin-bottom: 20px !important;}}/* 波模様擬似要素（左上） */.left-fixed-panel::before {content: "";position: absolute;top: 0;left: 0;width: 185px;height: 100px;background-image: url("../../img/usr/line_follow_guide/back_wave_r.png");background-size: contain;background-repeat: no-repeat;background-position: top left;opacity: 0.15;pointer-events: none;z-index: 1;}/* 波模様擬似要素（右下） */.left-fixed-panel::after {content: "";position: absolute;bottom: 0;right: 0;width: 185px;height: 100px;background-image: url("../../img//usr/line_follow_guide/back_wave_r.png");background-size: contain;background-repeat: no-repeat;background-position: bottom right;opacity: 0.15;pointer-events: none;z-index: 1;}/* メインコンテンツ前面配置 */.fv-content {position: relative;z-index: 2;display: flex;flex-direction: column;align-items: center;}.fv-badge {background-color: #c83c23;color: #fff;font-weight: bold;padding: 6px 18px;border-radius: 4px;margin-bottom: 25px;font-size: 16px;letter-spacing: 0.1em;}.fv-title {font-size: 30px;font-weight: 700;margin-bottom: 25px;line-height: 1.5;letter-spacing: 0.05em;color: #fff;}.fv-text {font-size: 16px;margin-bottom: 45px;opacity: 0.9;text-align: left;}.cta-button {display: block;width: 100%;max-width: 290px;background-color: #c5a059;color: #fff;text-decoration: none;font-weight: bold;font-size: 16px;padding: 18px;border-radius: 4px;box-shadow: 0 6px 18px rgba(0,0,0,0.2);transition: transform 0.2s, background-color 0.2s;letter-spacing: 0.05em;}.cta-button:hover {transform: translateY(-2px);background-color: #b38f48;}/* ==========================================右側：スクロールエリア（情報・ステップ案内）============================================ */.right-scroll-panel {/* ─── ★右側の幅を65%（767px）に強固に完全固定 ─── */width: calc(1180px * 0.65) !important;max-width: calc(1180px * 0.65) !important;flex-shrink: 0 !important;/* ─────────────────────────────────────────────────── */padding: 60px 26px;background-color: #fff;}@media (max-width: 768px) {.right-scroll-panel {width: 100% !important;max-width: 100% !important;padding: 10px 16px 40px;}}.section-title {font-size: 24px;border-bottom: 3px double #c5a059;padding-bottom: 12px;margin: 46px 0 30px;font-weight: bold;color: #0a1f44;}/* メリットブロック */.benefits-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 15px;margin-bottom: 60px;}.benefit-card {background-color: #faf9f6;padding: 24px 12px;border-radius: 6px;text-align: center;border: 1px solid #eaddca;display: flex;flex-direction: column;align-items: center;}.benefit-svg-icon {width: 55px;height: 55px;margin-bottom: 15px;stroke: #c5a059;stroke-width: 4px;stroke-linecap: round;stroke-linejoin: round;fill: none;}.benefit-card h3 {font-size: 18px;margin-bottom: 8px;color: #0a1f44;font-weight: bold;border-bottom: none !important;}.benefit-card p {font-size: 16px;color: #555;line-height: 1.5;}/* 分岐導線ブロック */.branch-container {display: flex;gap: 15px;margin-bottom: 20px;}.branch-box {flex: 1;background-color: #faf9f6;border: 1px solid #c5a059;border-radius: 6px;padding: 24px 15px;text-align: center;}.branch-box h3 {font-size: 18px;margin-bottom: 12px;color: #0a1f44;border-bottom: none !important;}.branch-box p {font-size: 16px;margin-bottom: 18px;color:#666;}.branch-link {display: inline-block;background-color: #0a1f44;color: #fff;text-decoration: none;padding: 10px 20px;border-radius: 4px;font-weight: bold;font-size: 16px;transition: opacity 0.2s;}.branch-link:hover {opacity: 0.9;}/* ステップブロック */.step-container {margin-bottom: 60px;}.step-block {display: flex;background-color: #fff;border: 1px solid #eaddca;border-radius: 8px;padding: 24px;margin-bottom: 24px;align-items: center;}.step-number {font-size: 28px;font-weight: bold;color: #c5a059;margin-right: 20px;border-right: 2px solid #eee;padding-right: 20px;white-space: nowrap;}.step-content {flex: 1;}.step-content h3 {font-size: 19px;margin-bottom: 8px;color: #0a1f44;font-weight: bold;}.step-content p {font-size: 16px;color: #666;margin-bottom: 15px;}.step-image {width: 64%;max-width: 100%;height: 230px;display: flex;align-items: center;justify-content: center;border-radius: 4px;margin: 45px auto;}.step-image img {width: 96%;}.step-image-icon {width: 64%;max-width: 100%;height: 230px;display: flex;align-items: center;justify-content: center;border-radius: 4px;margin: auto;}.step-image-icon img {width: 50%;}/* 下部CTAエリア */.cta-section-bottom {background: linear-gradient(135deg, #0a1f44 0%, #16386b 100%);color: #fff;padding: 40px 35px;border-radius: 6px;text-align: center;margin: 0 auto 50px;}.cta-section-bottom h2 {font-size: 24px;color: #fff;border-bottom: none !important;}.cta-section-bottom p {font-size: 16px;color: #d0d7e2;margin: 10px 0 20px;}/* スワイプ手順エリア用のナビゲーションドット（デフォルト非表示） */.step-swipe-dots {display: none;}.pc-only {display: block;}.sp-only {display: none;}/* ==========================================スマートフォン用のハイブリッドレイアウト============================================ */@media (max-width: 768px) {.sp-only {display: block;}.pc-only {display: none;}.lp-container {flex-direction: column;background: #fff;height: auto;overflow-x: hidden;}.left-fixed-panel {position: relative !important;left: 0 !important;top: auto !important;width: 100% !important;height: auto !important;padding: 50px 25px;box-shadow: none;}.right-scroll-panel {width: 100% !important;max-width: 100% !important;margin-left: 0;padding: 10px 16px 40px;}.fv-title {font-size: 26px;}.fv-text {font-size: 14px;margin-bottom: 35px;}.section-title {font-size: 19px;margin: 40px 0 20px;}/* メリット（縦並びスクロール） */.benefits-grid {grid-template-columns: 1fr;gap: 15px;margin-bottom: 45px;}/* 分岐導線（縦並びスクロール） */.branch-container {flex-direction: column;gap: 15px;margin-bottom: 16px;}/* 【手順部分のみを横スワイプ化】 */.step-container {display: flex;flex-direction: row;width: 100vw;margin-left: -16px;margin-right: -16px;padding: 5px 16px 20px;overflow-x: auto;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;margin-bottom: 10px;}/* 各ステップのカードを横スワイプの1シートに変形 */.step-block {flex: 0 0 calc(100vw - 32px);margin-right: 16px;margin-bottom: 0;scroll-snap-align: start;flex-direction: column;align-items: flex-start;box-shadow: 0 4px 12px rgba(0,0,0,0.05);border: 1px solid #eaddca;}.step-block:last-child {margin-right: 0;}.step-number {border-right: none;border-bottom: 2px solid #c5a059;padding-right: 0;padding-bottom: 5px;margin-right: 0;margin-bottom: 15px;width: 100%;font-size: 24px;}/* 手順がスワイプできることを示すインジケーター（ドット）を手順の下に出現させる */.step-swipe-dots {display: flex;justify-content: center;gap: 8px;margin-bottom: 40px;}.step-dot {width: 7px;height: 7px;background-color: #d0d0d0;border-radius: 50%;transition: background-color 0.3s, transform 0.3s;}.step-image img {width: 76%;}.cta-section-bottom h2 {font-size: 20px;color: #fff;}.step-image-icon {width: 98%;max-width: 100%;height: 230px;display: flex;align-items: center;justify-content: center;border-radius: 4px;margin: auto;}}