/* ==========================================================
   2026年10月リニューアル版LPの追加スタイル
   色・文字サイズ・ボタン・カードは styles.css の変数と部品をそのまま使い、
   新しいLPで増えた部品だけをここにまとめています。
   ========================================================== */

/* ---------------- ヘッダー ---------------- */

.lp .header-inner {
  flex-wrap: nowrap;
}

.lp .site-nav {
  margin-left: auto;
}

.header-cta {
  min-height: 42px;
  padding: 0.4em 1.3em;
  font-size: 0.95rem;
  flex: 0 0 auto;
}

/* スマホだけで効かせる改行 */
.sp-only {
  display: none;
}

@media (max-width: 720px) {
  .pc-only {
    display: none;
  }
}

/* ---------------- 共通：セクション番号・交互の背景 ---------------- */

.lp-section-no {
  text-align: center;
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-lavender-dark);
}

.lp-band {
  max-width: none;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.lp-band > * {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.lp-band > .section-lead {
  max-width: var(--max-width-text);
}

.lp-center-btn {
  display: flex;
  width: fit-content;
  margin: 2.2rem auto 0;
}

/* ---------------- ファーストビュー ---------------- */

.lp-hero {
  padding-bottom: 3rem;
}

.lp-eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.3em 1em;
  border-radius: 999px;
  background: var(--color-green-pale);
  color: var(--color-green-dark);
  font-weight: 700;
  font-size: 0.95rem;
}

.lp-proof {
  list-style: none;
  max-width: var(--max-width);
  margin: 2.6rem auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.lp-proof li {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.lp-proof-main {
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
}

.lp-proof-main strong {
  white-space: nowrap;
  color: var(--color-green-dark);
  font-size: 1.35em;
  margin: 0 0.1em;
}

.lp-proof-sub {
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

/* ---------------- 01 お悩み ---------------- */

.lp-check-list {
  list-style: none;
  max-width: var(--max-width-text);
  margin: 2rem auto 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}

.lp-check-list li {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 0.9rem 1.2rem 0.9rem 3rem;
  font-weight: 600;
}

.lp-check-list li::before {
  content: "✓";
  position: absolute;
  left: 1.1rem;
  top: 0.9rem;
  color: var(--color-green);
  font-weight: 700;
}

.lp-bridge {
  max-width: var(--max-width-text);
  margin: 2.2rem auto 0;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  background: var(--color-lavender-pale);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
}

.lp-bridge img {
  width: 120px;
  height: auto;
  border-radius: 14px;
  flex: 0 0 auto;
}

.lp-bridge p {
  margin: 0;
}

.lp-bridge strong {
  color: var(--color-green-dark);
}

/* ---------------- 02 声（LPではバッジも表示） ---------------- */
/* アイコンとお名前を上に横並び、吹き出しはカードの横幅いっぱいに。
   吹き出しが細くなって数文字ごとに改行される（縦に長くなる）のを防ぐ。 */

.lp .voice-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas:
    "avatar name"
    "bubble bubble"
    "badge  badge";
  align-content: start;
  align-items: center;
  gap: 0.7rem 0.6rem;
  padding: 1.1rem 1.1rem 1.2rem;
}

.lp .voice-quote {
  display: contents;
}

.lp .voice-avatar {
  grid-area: avatar;
  width: 40px;
  height: 40px;
}

.lp .voice-name {
  grid-area: name;
  font-size: 0.95rem;
}

.lp .voice-bubble {
  grid-area: bubble;
  font-size: 0.92rem;
  line-height: 1.7;
  padding: 0.75rem 0.9rem 0.75rem 1.5rem;
}

.lp .voice-bubble::before {
  font-size: 1.4rem;
  left: 0.45rem;
}

.lp .voice-card .voice-badge {
  grid-area: badge;
  justify-self: start;
}

@media (max-width: 1000px) {
  .lp .voice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------- 03 サポート内容 ---------------- */
/* プランカード・比較表・サービスカードは styles.css の部品をそのまま使っています */

.lp-sub-heading--first {
  margin-top: 1rem;
}

.lp-service-concept {
  text-align: center;
  color: var(--color-green-dark);
  font-weight: 700;
  margin: -0.6rem 0 0;
}

.lp-service-lead {
  text-align: center;
  max-width: var(--max-width-text);
  margin: 0.8rem auto 0;
  font-size: var(--font-small);
  color: var(--color-text-soft);
}

.lp-service-lead strong {
  color: var(--color-green-dark);
}

/* 違いがひと目でわかる一言 */
.lp-plan-diff {
  margin: 0 auto 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-green-dark);
  background: var(--color-green-pale);
  border-radius: 8px;
  padding: 0.25em 0.7em;
  width: fit-content;
}

/* 料金は見えるけれど目立ちすぎない大きさに */
.lp-plan-price-line {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-soft);
}

/* 3プランの比較表 */
.lp-compare {
  margin: 2rem auto 0;
  max-width: 900px;
}

.lp-compare-title {
  text-align: center;
  font-weight: 700;
  color: var(--color-green-dark);
  margin-bottom: 0.8rem;
}

.lp-compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
}

.lp-compare-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.5;
}

.lp-compare-table th,
.lp-compare-table td {
  padding: 0.75rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  vertical-align: middle;
}

.lp-compare-table tbody tr:last-child th,
.lp-compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.lp-compare-table thead th {
  background: var(--color-green-pale);
  color: var(--color-green-dark);
  font-weight: 700;
}

.lp-compare-table tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-ivory);
  width: 30%;
}

.lp-compare-table td {
  color: var(--color-text);
}

.lp-compare-table small {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-soft);
  font-weight: 400;
}

.lp-compare-table tbody th small {
  display: inline;
}

.lp-yes {
  color: var(--color-green);
  font-weight: 700;
  font-size: 1.15rem;
}

.lp-no {
  color: #b5b5b5;
}

.lp-compare-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin: 0.6rem 0 0;
}

/* 出版できた方への特典（15秒の宣伝動画） */
.lp-gift {
  max-width: 900px;
  margin: 2.6rem auto 0;
  padding: 2rem 1.6rem 1.6rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff7f3, var(--color-white));
  border: 2px solid var(--color-pink);
  text-align: center;
}

.lp-gift-badge {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.2em 1em;
  border-radius: 999px;
  background: var(--color-pink);
  color: #a24c63;
  font-weight: 700;
  font-size: 0.9rem;
}

.lp-gift-title {
  font-size: 1.45rem;
  margin-bottom: 0.5em;
}

.lp-gift-limit {
  display: inline-block;
  margin: 0 0 0.9rem;
  padding: 0.35em 1.2em;
  border-radius: 10px;
  background: var(--color-white);
  border: 1px dashed #d99aab;
  color: #a24c63;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.5;
}

.lp-gift-lead {
  font-size: var(--font-small);
  color: var(--color-text-soft);
  margin-bottom: 1.4rem;
}

.lp-gift-samples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 190px));
  justify-content: center;
  gap: 1.4rem;
}

.lp-gift-sample {
  margin: 0;
}

.lp-gift-sample video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 10px 22px rgba(58, 58, 58, 0.14);
}

.lp-gift-sample figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-soft);
}

.lp-gift-sample figcaption strong {
  display: block;
  color: var(--color-green-dark);
  font-size: 0.95rem;
}

.lp-gift-terms {
  margin: 1.2rem 0 0;
  font-size: 0.82rem;
  color: var(--color-text-soft);
}

.lp-service-note {
  max-width: var(--max-width-text);
  margin: 1.4rem auto 0;
  font-size: 0.92rem;
  color: var(--color-text-soft);
  background: var(--color-green-pale);
  border-radius: 12px;
  padding: 0.8rem 1rem;
}

.lp-plans .service-grid {
  margin-top: 0;
}

/* ---------------- 04 流れ ---------------- */

.lp-steps {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  counter-reset: none;
}

.lp-steps li {
  position: relative;
  background: var(--color-ivory);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.4rem 1.2rem;
}

.lp-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -0.85rem;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-top: 3px solid var(--color-green);
  border-right: 3px solid var(--color-green);
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
}

.lp-step-no {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-white);
  background: var(--color-green);
  border-radius: 999px;
  padding: 0.15em 0.8em;
  margin-bottom: 0.6rem;
}

.lp-steps h3 {
  font-size: 1.1rem;
  margin-bottom: 0.3em;
}

.lp-steps p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-soft);
}

/* ---------------- 05 エリーナと本 ---------------- */

.lp-profile-card {
  max-width: var(--max-width-text);
  margin: 2rem auto 0;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  background: linear-gradient(180deg, var(--color-lavender-pale), var(--color-green-pale));
  border-radius: 28px;
  padding: 2rem 2.2rem;
}

.lp-profile-card img {
  width: 110px;
  height: auto;
  flex: 0 0 auto;
}

.lp-profile-card p {
  margin: 0;
}

.lp-profile-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-green-dark);
  margin-bottom: 0.4rem !important;
}

.lp-profile-name span {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin-left: 0.4em;
}

.lp-history {
  max-width: var(--max-width-text);
  margin: 1.6rem auto 0;
  text-align: center;
}

.lp-history-title {
  font-weight: 700;
  color: var(--color-lavender-dark);
  font-size: var(--font-small);
  margin-bottom: 0.6rem;
}

.lp-history ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.8rem;
}

.lp-history li {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.4em 1.1em;
  font-weight: 700;
  font-size: 0.95rem;
}

.lp-history li {
  position: relative;
}

.lp-history li:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -1.35rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-green);
}

.lp-sub-heading {
  text-align: center;
  margin: 3rem 0 1.4rem;
}

.lp-feature-book {
  max-width: var(--max-width-text);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  background: var(--color-white);
  border: 2px solid var(--color-pink);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  text-decoration: none;
  color: var(--color-text);
  transition: transform 0.15s ease;
}

.lp-feature-book:hover,
.lp-feature-book:focus-visible {
  transform: translateY(-3px);
}

.lp-feature-cover {
  flex: 0 0 150px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(58, 58, 58, 0.15);
}

.lp-feature-cover img {
  width: 100%;
  height: auto;
}

.lp-feature-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.lp-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.lp-tag {
  display: inline-block;
  border-radius: 999px;
  padding: 0.2em 0.9em;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--color-lavender-pale);
  color: var(--color-lavender-dark);
}

.lp-tag--free {
  background: var(--color-pink);
  color: #a24c63;
}

.lp-feature-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-green-dark);
}

.lp-feature-desc {
  font-size: var(--font-small);
  color: var(--color-text-soft);
}

.lp-feature-btn {
  min-height: 46px;
}

.lp .bookshelf {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.lp .bookshelf .shelf-book {
  width: 110px;
}

.lp .voices-more,
.lp .bookshelf-more {
  width: fit-content;
}

/* ---------------- 06 よくある質問 ---------------- */

.lp-faq-list {
  max-width: var(--max-width-text) !important;
  margin-top: 2rem;
  display: grid;
  gap: 0.8rem;
}

.lp-faq-list details {
  background: var(--color-ivory);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 0 1.2rem;
}

.lp-faq-list summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 1rem 2rem 1rem 1.8rem;
  font-weight: 700;
}

.lp-faq-list summary::-webkit-details-marker {
  display: none;
}

.lp-faq-list summary::before {
  content: "Q";
  position: absolute;
  left: 0;
  color: var(--color-green);
}

.lp-faq-list summary::after {
  content: "＋";
  position: absolute;
  right: 0;
  color: var(--color-green-dark);
}

.lp-faq-list details[open] summary::after {
  content: "−";
}

.lp-faq-list details p {
  margin: 0 0 1rem;
  padding-left: 1.8rem;
  color: var(--color-text-soft);
  font-size: var(--font-small);
}

/* ---------------- 07 無料相談 ---------------- */

.lp-consult-video {
  max-width: 640px;
  margin: 0 auto 2rem;
}

/* Kindle出版サポートの紹介動画（神谷じんいちろうさん制作） */
.lp-kindle-video {
  margin: 1.6rem auto 0.4rem;
}

.lp-video-heading {
  text-align: center;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.7rem;
}

.lp-consult-options {
  max-width: var(--max-width-text);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.lp-consult-option {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lp-consult-option p {
  font-size: var(--font-small);
  color: var(--color-text-soft);
}

.lp-consult-label {
  font-weight: 700;
  color: var(--color-green-dark) !important;
  margin-bottom: 0.4rem;
}

.lp-consult-option .btn {
  margin-top: auto;
  width: 100%;
}

/* ---------------- そのほかの活動 ---------------- */

.lp-more {
  padding-top: 0;
  text-align: center;
}

.lp-more-title {
  font-weight: 700;
  color: var(--color-text-soft);
  font-size: var(--font-small);
}

.lp-more-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.lp-more-links a {
  text-decoration: none;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: 999px;
  padding: 0.35em 1em;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-soft);
}

.lp-more-links a:hover {
  color: var(--color-green-dark);
  border-color: var(--color-green);
}

/* ---------------- 下に固定される相談ボタン ---------------- */

.lp-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(255, 251, 243, 0.95);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: center;
  transform: translateY(110%);
  transition: transform 0.25s ease;
}

.lp-sticky-cta.is-visible {
  transform: translateY(0);
}

.lp-sticky-cta .btn {
  width: min(100%, 420px);
}

/* PCではヘッダーに相談ボタンがあるので、固定ボタンは出さない */
@media (min-width: 721px) {
  .lp-sticky-cta {
    display: none;
  }
}

/* ---------------- タブレット ---------------- */

@media (max-width: 900px) {
  .lp .site-nav {
    display: none;
  }

  .lp .header-inner {
    justify-content: space-between;
  }

  .lp-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-steps li:nth-child(2)::after {
    display: none;
  }
}

/* ---------------- スマホ ---------------- */

@media (max-width: 720px) {
  .lp .header-inner {
    justify-content: space-between;
    text-align: left;
    padding: 0.7rem 1rem;
  }

  .lp .brand {
    align-items: flex-start;
  }

  .lp-band {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .sp-only {
    display: inline;
  }

  /* キャラクターは小さめにして、見出しとボタンを最初の画面に収める */
  .lp-hero .hero-character {
    width: 130px;
  }

  .lp-hero .hero-inner {
    gap: 0.8rem;
  }

  .lp-hero h1 {
    font-size: 1.85rem;
  }

  .lp-proof,
  .lp-consult-options {
    grid-template-columns: 1fr;
  }

  /* スマホでも横スクロールせずに3プランを並べて見られるように */
  .lp-compare-table {
    min-width: 0;
    font-size: 0.78rem;
    table-layout: fixed;
  }

  .lp-compare-table th,
  .lp-compare-table td {
    padding: 0.55rem 0.25rem;
    word-break: break-all;
  }

  .lp-compare-table tbody th {
    width: 28%;
    padding-left: 0.5rem;
  }

  .lp-compare-table small {
    font-size: 0.7rem;
  }

  .lp .voice-grid {
    grid-template-columns: 1fr;
  }

  .lp-gift {
    padding: 1.6rem 1rem 1.2rem;
  }

  .lp-gift-samples {
    grid-template-columns: repeat(2, minmax(0, 135px));
    gap: 1rem;
  }

  .lp-proof {
    gap: 0.6rem;
    margin-top: 2rem;
  }

  .lp-proof li {
    padding: 0.8rem;
  }

  .lp-bridge {
    flex-direction: column;
    text-align: center;
    padding: 1.4rem 1.2rem;
  }

  .lp-steps {
    grid-template-columns: 1fr;
  }

  .lp-steps li:not(:last-child)::after {
    display: block;
    right: auto;
    left: 50%;
    top: auto;
    bottom: -0.85rem;
    transform: translateX(-50%) rotate(135deg);
  }

  .lp-steps li:nth-child(2)::after {
    display: block;
  }

  .lp-profile-card {
    flex-direction: column;
    text-align: center;
    padding: 1.8rem 1.3rem;
  }

  .lp-history ol {
    flex-direction: column;
  }

  .lp-history ol {
    gap: 1.6rem;
  }

  .lp-history li:not(:last-child)::after {
    content: "↓";
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1.65rem;
    transform: translateX(-50%);
  }

  .lp-feature-book {
    flex-direction: column;
    text-align: center;
    padding: 1.4rem 1.2rem;
  }

  .lp-feature-cover {
    flex-basis: auto;
    width: 160px;
  }

  .lp-feature-info {
    align-items: center;
  }

  .lp-feature-tags {
    justify-content: center;
  }

  .lp .bookshelf {
    gap: 16px 10px;
  }

  .lp .bookshelf .shelf-book {
    width: calc((100% - 20px) / 3);
    max-width: 100px;
  }

  /* 固定ボタンの分だけ、ページの最後に余白を足す */
  body.lp {
    padding-bottom: 80px;
  }
}