@charset "utf-8";

/* LP全体のラッパー設定 */
.lp-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
  color: #231F20;
  line-height: 1.6;
}
/* 優先度を上げてCMS標準のCSSに勝つように指定 */
.lp-wrapper img { max-width: 100%; height: auto; vertical-align: bottom; }

/* 記事タイトル部分 */
.lp-article-header { text-align: center; margin-bottom: 0; padding: 20px 20px 40px; background-color: #fff; }
.lp-date { font-size: 16px; color: #404040; margin-bottom: 10px; }
.lp-main-copy { font-size: 32px; color: #036EB8; font-weight: 900; margin-bottom: 15px; }
.lp-label { display: inline-block; border: 1px solid #036EB8; color: #036EB8; font-size: 14px; padding: 4px 20px; background: #fff; font-weight: bold; }

/* ヒーローセクション */
.lp-hero-section { text-align: center; padding: 60px 20px 50px; background-color: #fff; }
.lp-hero-title { font-size: 56px; font-weight: 900; margin-bottom: 15px; color: #036EB8; }
.lp-hero-desc { font-size: 24px; margin-bottom: 40px; font-weight: 600; line-height: 32px; color: #231F20; }
.lp-hero-image { background: #ccc; width: 100%; max-width: 1200px; aspect-ratio: 16 / 9; margin: 0 auto 40px; display: flex; align-items: center; justify-content: center; }

/* ボタン共通設定 */
.lp-btn-wrap { text-align: center; margin-top: 20px; }
.lp-btn { 
  display: inline-flex; align-items: center; justify-content: center; 
  text-decoration: none; font-weight: 900; 
  border-radius: 15px; transition: opacity 0.3s; 
  width: 100%; max-width: 880px; height: 96px; 
  font-size: 30px; box-sizing: border-box;
}
.lp-btn:hover { opacity: 0.8; }
.lp-btn-primary { background-color: #036EB8; color: #FFFFFF; }
/* ↓ max-widthを320px、widthを100%に変更して既存サイトのボタン幅と統一 ↓ */
.lp-btn-blue { background-color: #003572; color: #fff; height: 60px; width: 100%; max-width: 320px; font-size: 16px; border-radius: 30px;}
.lp-wrapper img.lp-arrow-icon { margin-left: 15px; height: 30px; width: auto; flex-shrink: 0; }

/* 特徴・ステップセクション */
.lp-features-section { 
  background-color: #E7F6FC; 
  padding: 60px 20px; 
  /* CMSの枠を突き抜けて画面幅いっぱいにする指定 */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.lp-feature-card { 
  background: #FFFFFF; padding: 50px; margin-bottom: 40px; 
  max-width: 1200px; margin-left: auto; margin-right: auto; 
  border-radius: 0 56px 56px 56px; 
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3); 
}
.lp-feature-title { font-size: 44px; font-weight: 900; margin-bottom: 15px; display: flex; align-items: center; color: #003572; }
.lp-wrapper img.lp-num-icon { height: 56px; width: auto; margin-right: 15px; flex-shrink: 0; }
.lp-feature-lead { font-weight: 600; font-size: 24px; margin-bottom: 30px; line-height: 32px; color: #404040; }
.lp-feature-images { display: flex; gap: 30px; margin-bottom: 30px; }
.lp-img-box { flex: 1; background: #ccc; aspect-ratio: 16 / 9; max-width: 470px; display: flex; align-items: center; justify-content: center; }
.lp-feature-list { font-size: 20px; color: #000000; padding-left: 0; list-style: none; margin: 0; line-height: 32px; font-weight: 400;}
.lp-feature-list li { position: relative; padding-left: 1.2em; margin-bottom: 10px; }
.lp-feature-list li::before { content: '●'; position: absolute; left: 0; top: 0; color: #036EB8; }
.lp-text-blue { color: #036EB8; font-weight: 700; }

/* 動画セクション */
.lp-video-section { text-align: center; padding: 60px 20px; background: #fff; }
.lp-video-container { background: #ccc; max-width: 800px; aspect-ratio: 16 / 9; margin: 0 auto 40px; display: flex; align-items: center; justify-content: center; position: relative; }
.lp-wrapper img.lp-play-icon { width: 80px; height: auto; flex-shrink: 0; }

/* ボトムテキストリンク */
.lp-bottom-info-section { text-align: center; padding: 0 20px 40px; background: #fff; }
.lp-bottom-text { font-size: 16px; margin-bottom: 30px; }
.lp-bottom-link-group { margin-bottom: 20px; font-size: 16px; }
.lp-link-title { margin-bottom: 5px; color: #231F20; font-weight: bold; }
.lp-text-link { color: #036EB8; text-decoration: underline; }
.lp-text-link:hover { text-decoration: none; }

/* 一覧へ戻るボタン */
.lp-back-btn-wrap { text-align: center; padding-bottom: 60px; background: #fff; }

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .lp-hero-title { font-size: 32px; }
  .lp-feature-title { font-size: 28px; }
  .lp-wrapper img.lp-num-icon { height: 36px; }
  .lp-hero-desc, .lp-feature-lead { font-size: 16px; line-height: 1.5; }
  .lp-btn { font-size: 18px; height: 72px; border-radius: 12px; }
  .lp-wrapper img.lp-arrow-icon { height: 18px; }
  .lp-feature-images { flex-direction: column; gap: 15px; }
  .lp-img-box { max-width: 100%; height: auto; }
  .lp-feature-card { padding: 30px 20px; border-radius: 0 30px 30px 30px; }
  .lp-feature-list { font-size: 15px; line-height: 1.6; }
}

/* --- 改行調整用クラス追加 --- */
/* PCでのみ改行させる（スマホでは改行しない） */
@media screen and (max-width: 767px) {
  .br-pc { display: none; }
}

/* スマホでのみ改行させる（PCでは改行しない） */
@media screen and (min-width: 768px) {
  .br-sp { display: none; }
}