/* 基本スタイル */
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #eef4f8; /* 淡い青系の背景 */
}

/* ヘッダー画像セクション */
.lp-header {
    padding: 0;
    margin: 0;
    line-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
.lp-section {
    padding: 60px 20px;
    text-align: center;
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-bottom: 0 !important;
}
.lp-gutenberg-content .lp-section h1,
.lp-gutenberg-content .lp-section h2,
.lp-gutenberg-content .lp-section h3 {
    color: #222; /* 濃いグレー/黒に見出し色を変更 */
    margin-bottom: 20px;
}
.lp-section p {
    margin-bottom: 15px;
    font-size: 1.05em; /* 本文のフォントサイズを少し大きく */
}

/* 重要な文字の強調 (本文内) */
.lp-section strong {
    color: #0056b3; /* 本文内の強調文字をメインの青系に */
    font-weight: bold;
}

/* 見出し内の強調文字 */
.lp-section h1 strong,
.lp-section h2 strong,
.lp-section h3 strong {
    color: inherit; /* 親要素（見出し）の色を継承 */
    font-weight: bolder; /* さらに太く */
}

/* ヒーローセクション内の強調文字 */
.lp-hero h1 strong {
    color: #007bff; /* h1内のstrongは青 */
    text-shadow: none;
}
.lp-hero p strong {
    color: #333; /* p内のstrongは黒 */
    text-shadow: none;
}

/* Gutenbergコンテンツのラッパー */
.lp-gutenberg-content {
    width: 100%; /* 全幅に適用 */
    margin: 0 auto;
    padding: 0; /* 各セクションでpaddingを調整するため0に */
}

/* 各セクション内のコンテンツを中央に寄せるためのラッパー */
.lp-section > *:not(.lp-button-group):not(.lp-reason-grid):not(.lp-table-container):not(.lp-flow-steps):not(.lp-faq-list):not(.lp-form-container) {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* ヒーローセクション内のコンテンツは個別に調整 */
.lp-hero h1, .lp-hero p {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* Gutenbergブロックのスタイル調整例 */
.lp-gutenberg-content .wp-block-heading {
    margin-top: 40px;
    margin-bottom: 20px;
}
.lp-gutenberg-content .wp-block-paragraph {
    margin-bottom: 15px;
}
.lp-gutenberg-content .wp-block-button .wp-block-button__link {
    display: inline-block;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    background-color: #007bff;
    color: #fff;
}
.lp-gutenberg-content .wp-block-button .wp-block-button__link:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}
.lp-gutenberg-content .wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.lp-gutenberg-content .wp-block-column {
    flex: 1 1 300px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: left;
}
.lp-gutenberg-content .wp-block-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.lp-gutenberg-content .wp-block-table th, .lp-gutenberg-content .wp-block-table td {
    border: 1px solid #dee2e6;
    padding: 12px 15px;
    text-align: left;
}
.lp-gutenberg-content .wp-block-table th {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
}
.lp-gutenberg-content .wp-block-table tr:nth-child(even) {
    background-color: #f2f7fb;
}

/* 見出しデザインパターン */
.lp-heading-accent {
    color: #007bff !important; /* アクセントカラー（青系） */
}
.lp-heading-underline {
    text-decoration: underline;
    text-decoration-color: #007bff; /* 下線の色をアクセントカラーに */
    text-underline-offset: 5px;
}
.lp-heading-background {
    background-color: #e0f2f7; /* 淡い背景色 */
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
}
/* 新しい見出しパターン */
.lp-heading-left-border {
    text-align: left;
    padding-left: 15px;
    border-left: 5px solid #007bff; /* アクセントカラーの左ボーダー */
}
.lp-heading-bg-center {
    background-color: #e9f2f7; /* 淡い青系の背景 */
    padding: 15px 20px;
    border-radius: 8px;
    display: inline-block; /* 背景がテキスト幅に合わせる */
    color: #222; /* 文字色は濃いグレー/黒 */
}
/* h2専用パターン */
.lp-h2-divider {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
}
.lp-h2-divider::after {
    content: '';
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: 3px !important;
    background-color: #007bff !important; /* アクセントカラーの区切り線 */
    border-radius: 2px !important;
}
.lp-h2-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* テキストに影 */
    color: #2c3e50; /* 濃い青系の文字色 */
}

/* 新しい見出しパターン：下線 */
.lp-h2-underline {
    color: #222; /* 文字色 */
    border-bottom: 3px solid #007bff; /* 青色の下線 */
    padding-bottom: 10px;
    text-align: left; /* 文字を左寄せに */
    margin-bottom: 15px; /* 下線とサブタイトルの間にスペースを追加 */
}

/* 新しい見出しパターン：上下ボーダー */
.lp-h2-double-border {
    color: #222;
    border-top: 2px solid #007bff;
    border-bottom: 2px solid #007bff;
    padding: 15px 0;
    text-align: center; /* 中央寄せ */
}

/* 新しい見出しパターン：グラデーション背景 */
.lp-h2-gradient-bg {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: #fff !important;
    padding: 15px 25px;
    border-radius: 8px;
    display: inline-block;
    text-align: center;
}

/* 見出し内ハイライト用 */
.lp-h2-highlight {
    color: red;
    text-shadow:
        -2px -2px 0 #fff,
         2px -2px 0 #fff,
        -2px  2px 0 #fff,
         2px  2px 0 #fff,
        -2px  0   0 #fff,
         2px  0   0 #fff,
         0   -2px 0 #fff,
         0    2px 0 #fff;
    font-size: 1.2em;
}

/* 新しい見出しパターン：文字色のみ */
.lp-h2-text-only {
    color: #007bff; /* アクセントカラー（青） */
    background: none; /* 背景を無効化 */
    border: none;
    padding: 10px 0;
    text-align: center;
}

/* 新しい見出しパターン：繰り返し線ボーダー */
.lp-h2-repeat-line {
  position: relative;
  padding: 1.5rem 1rem;
  text-align: center;
  background: none; /* 背景を無効化 */
  border: none; /* ボーダーを無効化 */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* 影を追加 */
  color: #2c3e50; /* 文字色も指定 */
}

.lp-h2-repeat-line::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 下線スタイルのh2の疑似要素を強制的に非表示にする */
.lp-h2-underline::before,
.lp-h2-underline::after,
.lp-h2-double-border::before,
.lp-h2-double-border::after,
.lp-h2-gradient-bg::before,
.lp-h2-gradient-bg::after,
.lp-h2-text-only::before,
.lp-h2-text-only::after,
.lp-h2-repeat-line::before /* ::afterはデザインで使うため、::beforeのみ無効化 */ {
    display: none;
}

/* 新しい見出しパターン：背景色ベタ塗り */
.lp-h2-solid-bg {
    background-color: #007bff; /* 濃い青色の背景 */
    color: #fff !important; /* 文字色を白に */
    padding: 15px 20px;
    border-radius: 8px;
    display: block; /* 背景がコンテンツ幅いっぱいに広がるように */
}

/* ヒーローセクション */
.lp-hero {
    background: #fff; /* 背景を白に */
    padding: 60px 20px;
}
.lp-hero h1 {
    font-size: 2.8em;
    margin-bottom: 30px !important;
    color: #333;
    line-height: 1.6;
    text-shadow: none;
}
.lp-hero p {
    font-size: 1.2em;
    margin-bottom: 30px;
    color: #555;
    line-height: 1.8;
}

.lp-button-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.lp-button {
    display: inline-block;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.lp-button-primary {
    background-color: #28a745; /* LINEカラー (緑系) */
    color: #fff;
}
.lp-button-primary:hover {
    background-color: #218838;
    transform: translateY(-2px);
}
.lp-button-secondary {
    background-color: #007bff; /* フォームカラー (青系) */
    color: #fff;
}
.lp-button-secondary:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

/* 選ばれる理由セクション */
.lp-reason {
    background-color: #d1ecf1;
}
.lp-reason h2 {
    font-size: 2.8em;
    color: #222; /* 濃いグレー/黒に見出し色を変更 */
}
.lp-reason-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1000px;
    margin: 40px auto 0;
}
.lp-reason-item {
    flex: 1 1 300px;
    background-color: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: left;
}
.lp-reason-item-img {
    max-width: 200px !important; /* 画像の最大幅 */
    height: auto;
    display: block;
    margin: 0 auto 15px; /* 中央寄せと下に余白 */
}
.lp-reason-item h3 {
    font-size: 1.8em;
    color: #007bff; /* 青系のアクセント */
    margin-bottom: 15px;
}
.lp-reason-item p {
    font-size: 1em;
}

/* 買取価格目安セクション */
.lp-price-guide {
    background-color: #e9ecef; /* 淡いグレーの背景 */
}
.lp-price-guide h2 {
    font-size: 2.8em;
    color: #fff; /* 背景が淡い青なので、見出しは白に */
}
.lp-table-container {
    max-width: 800px;
    margin: 40px auto;
    overflow-x: auto;
}
.lp-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.lp-table th, .lp-table td {
    border: 1px solid #cce5ff; /* 青系のボーダー */
    padding: 12px 15px;
    text-align: left;
}
.lp-table th {
    background-color: #007bff; /* 青系のヘッダー */
    color: #fff;
    font-weight: bold;
}
.lp-table tr:nth-child(even) {
    background-color: #f2f7fb; /* 淡い青系のストライプ */
}
.lp-table caption {
    caption-side: bottom;
    margin-top: 10px;
    font-size: 0.9em;
    color: #555;
}

/* 買取の流れセクション */
.lp-flow {
    background-color: #fff;
}
.lp-flow h2 {
    font-size: 2.8em;
    color: #222; /* 濃いグレー/黒に見出し色を変更 */
}
.lp-flow-steps {
    max-width: 800px;
    margin: 40px auto;
    text-align: left;
}
.lp-flow-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}
.lp-flow-step-number {
    font-size: 2.2em;
    font-weight: bold;
    color: #007bff; /* 青系のアクセント */
    margin-right: 20px;
    flex-shrink: 0;
}
.lp-flow-step-content h3 {
    font-size: 1.6em;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 10px;
}

/* よくあるご質問セクション */
.lp-faq {
    background-color: #e9ecef;
}
.lp-faq h2 {
    font-size: 2.8em;
    color: #222; /* 濃いグレー/黒に見出し色を変更 */
    text-align: center;
}
.lp-faq-list {
    max-width: 800px;
    margin: 40px auto;
    text-align: left;
}
.lp-faq-item {
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0; /* 淡いグレーのボーダー */
    padding-bottom: 15px;
}
.lp-faq-item strong {
    color: #007bff; /* 青系のアクセント */
    font-size: 1.1em;
}

/* 最終CTAセクション */
.lp-cta {
    background-color: #d1ecf1; /* 淡い水色の背景 */
    color: #0c5460; /* 濃い青緑系の文字色 */
}
.lp-cta h2 {
    font-size: 2.8em;
    color: #fff; /* 背景が淡い水色なので、見出しは白に */
}
.lp-cta p {
    color: #0c5460;
}
.lp-cta ul li span {
    color: #28a745; /* 緑系のチェックマーク */
}

/* 特定商取引法に基づく表記 */
.lp-legal {
    background-color: #e9ecef;
    color: #333;
    padding: 40px 20px;
    font-size: 0.85em;
    text-align: left;
}
.lp-legal h2 {
    color: #fff;
    font-size: 1.8em;
    margin-bottom: 20px;
}
.lp-legal p {
    margin-bottom: 10px;
}

/* 買取の流れセクションのリストスタイル */
ul.flow-list {
  border: solid 2px skyblue;
  border-radius: 5px;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  list-style: none;
  margin-top: 1em;
}

ul.flow-list li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

/* Font Awesome 4.7.0 用のアイコンスタイル */
ul.flow-list li:before {
  font-family: "FontAwesome";
  content: "\f138";
  position: absolute;
  left : 1em;
  color: skyblue;
}

/* 買取の流れショートコードのステップタイトル */
.lp-flow-steps .st-step-title {
    font-size: 2.2em !important;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 15px;
    line-height: 1.4;
}

/*中央寄せ*/
.is-style-vkp-heading-diagonal-line{
 display: flex;
 flex-wrap: nowrap;
 justify-content: center; 
 align-items: center;
 border:0;
 font-weight: bold; /* 追加 */
 font-size: 1.2em; /* 追加 */
 text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* 追加 */
}
/*短い左右線*/
.is-style-vkp-heading-diagonal-line::before,
.is-style-vkp-heading-diagonal-line::after {
 content: '';
 width: 40px; /* 線の長さを長く */
 height: 2px; /* 線の太さを太く */
 background-color:#2c3e50 !important;
 /*Lightning見出しデザイン設定のCSS対策*/
 /* position: absolute; を削除 */
 border: unset;
 /* margin-left: unset; margin-right:unset; flex-grow: unset; は残す */
}
.is-style-vkp-heading-diagonal-line::before{
 margin-right:20px; /* テキストとの間隔を広げる */
 transform: rotate(60deg);
}
.is-style-vkp-heading-diagonal-line::after {
 margin-left:20px;   /* テキストとの間隔を広げる */
 transform: rotate(-60deg);
}

.lp-cta .is-style-vkp-heading-diagonal-line {
    background: none;
    color: inherit;
    padding: 0;
    border: none;
    margin-bottom: 20px;
}

.lp-section .lp-emphasis-text { /* セレクタの詳細度を上げる */
    font-size: 1.8em; /* 文字をさらに大きく */
    font-weight: bolder; /* さらに太く */
    color: #dc3545; /* 赤系の色で強調 */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* 影を追加 */
    background-color: transparent; /* 背景なし */
    padding: 0; /* パディングを削除 */
    border-radius: 0; /* 角丸を削除 */
    display: block; /* ブロック要素に変更 */
    margin-top: 15px; /* 上に余白 */
    margin-bottom: 15px; /* 下に余白 */
}

.lp-emphasis-text strong {
    font-size: inherit; /* 親要素のフォントサイズを継承 */
}

.lp-highlight-word {
    font-size: 1.2em; /* 親要素の1.2倍の大きさに変更 */
    color: #dc3545; /* 赤系の色に */
    background-color: transparent; /* 背景なし */
    padding: 0; /* パディングを削除 */
    border-radius: 0; /* 角丸を削除 */
    font-weight: bolder; /* さらに太く */
    text-shadow:
        -1px -1px 0 #fff,  /* 白い縁取り */
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff;
}

/* セクション区切り用三角形 */
.section-divider-triangle {
  position: relative;
  width: 0;
  height: 0;
  margin: 0 auto; /* 中央揃えと上下マージン */
}

.section-divider-triangle::before {
  content: '';
  position: absolute; /* 再度追加 */
  top: -30px; /* 親要素の上端に配置し、上に30px食い込ませる */
  left: 50%;
  transform: translateX(-50%); /* 中央揃え */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 50px; /* 三角形のサイズを調整 (下向き) */
  border-color: #d1ecf1 transparent transparent transparent; /* 三角形の色 */
}

/* お問い合わせフォームセクションのタイトル */
.lp-contact-title {
  position: relative;
  display: inline-block; /* アイコンを左右に配置するため */
  padding: 0 2em; /* アイコンのための余白 */
  text-align: center;
  /* 既存のlp-contact-titleのスタイルを上書きまたは調整 */
  font-size: 2.8em; /* 元のh2のサイズを参考に */
  color: #222; /* 元のh2の色を参考に */
  margin-bottom: 20px; /* 元のh2の余白を参考に */
  font-weight: bold; /* 太字 */
}

.lp-contact-title::before,
.lp-contact-title::after {
  font-family: 'FontAwesome'; /* Font Awesome 4.7.0 */
  font-weight: normal; /* Font Awesome 4.7.0 のアイコンは通常 normal */
  line-height: 1;
  position: absolute;
  top: calc(50% - .5em); /* 垂直方向の中央揃え */
  color: #eb6100; /* アイコンの色 */
}

.lp-contact-title::before {
  left: 0;
  content: '\f101'; /* angle-right */
}

.lp-contact-title::after {
  right: 0;
  content: '\f100'; /* angle-left */
}

/* 強調したい行のスタイル */
.lp-emphasis-line {
  font-size: 1.1em; /* 少し大きく */
  font-weight: bold; /* 太字 */
  color: #333; /* 基本の文字色 */
}

/* lp-emphasis-line 内の強調文字 */
.lp-emphasis-line strong {
  color: #eb6100; /* 目立つ色 */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* 影を追加 */
  font-size: 1.2em; /* さらに大きく */
}

/* 空の段落による隙間を削除 */
.lp-faq + p {
    display: none;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .lp-hero h1 {
        font-size: 1.8em; /* スマホ表示用にフォントサイズを調整 */
    }
    .lp-reason h2,
    .lp-price-guide h2,
    .lp-flow h2,
    .lp-faq h2,
    .lp-cta h2,
    .lp-contact-title {
        font-size: 1.6em; /* スマホ表示用にフォントサイズを調整 */
    }
    .lp-reason-item h3,
    .lp-price-guide h3,
    .lp-flow-step-content h3 {
        font-size: 1.4em; /* スマホ表示用にフォントサイズを調整 */
    }
    .lp-flow-steps .st-step-title {
        font-size: 1.5em !important; /* スマホ表示用にフォントサイズを調整 */
    }
    .lp-hero p {
        font-size: 1.2em; /* レスポンシブ時も調整 */
    }
    .lp-button-group {
        flex-direction: column;
    }
    .lp-feature-item {
        flex: 1 1 100%;
    }
    .lp-flow-step {
        flex-direction: column;
        align-items: center;
    }
    .lp-flow-step-number {
        margin-right: 0;
        margin-bottom: 10px;
    }
    .lp-flow-step-content {
        text-align: center;
    }

}

/* 強調テキスト用の赤文字スタイル */
.lp-hero-highlight {
    color: #fff;
    font-weight: bold;
    text-shadow: -3px 0 red, 3px 0 red, 0 -3px red, 0 3px red, -2px -2px red, 2px -2px red, -2px 2px red, 2px 2px red;
}
/* よくあるご質問サブタイトル */

/* 安心ポイントの星の色 */
.star-color {
    color: red !important; /* 強制的に赤色を適用 */
    font-size: 1.1em; /* 文字サイズを少し大きく */
}
.faq-subtitle {
    font-size: 0.8em; /* h2に対して相対的に小さく */
    font-weight: bold;
    color: #555;
    margin-top: -15px; /* h2との間隔を詰める */
    margin-bottom: 30px; /* 下のリストとの間隔を確保 */
    text-align: center; /* 中央揃え */
}