/**
 * 広告LP専用スタイル（デザイン刷新版）
 * - 添付バナー（PDF）の世界観：グリーン×イエロー×ブラック×コーラル
 * - GDN向け：FVで価値を即理解 → 資料DLへ最短導線
 */

/* ========================================
   1) ベース / デザイントークン
======================================== */
.ad-lp{
  /* Brand palette (from banner) */
  --primary-color: #5AB657;         /* バナー寄せグリーン */
  --primary-dark:  #3E914B;
  --primary-ink:   #1F6B33;

  --yellow:        #F6E566;         /* バナー寄せイエロー */
  --yellow-soft:   #FFF6C3;
  --yellow-cream:  #FFFEF6;

  --coral:         #DB4D39;         /* バナーの「無料相談予約」ボタン系 */
  --coral-dark:    #B93B2C;

  --ink:           #111111;
  --ink-soft:      rgba(17,17,17,.72);

  --bg-white:      #ffffff;
  --bg-page:       var(--yellow-cream);

  --border-soft:   rgba(0,0,0,.08);

  --shadow-sm:     0 6px 18px rgba(0,0,0,.10);
  --shadow-md:     0 18px 60px rgba(0,0,0,.14);
  --shadow-lg:     0 32px 110px rgba(0,0,0,.18);

  --radius-sm:     12px;
  --radius-md:     18px;
  --radius-lg:     28px;
  --radius-xl:     36px;

  --font-sans:     "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num:      "Poppins", "Noto Sans JP", system-ui, sans-serif;
}

.ad-lp *{ box-sizing: border-box; }
.ad-lp body{ margin:0; }

body.ad-lp{
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ad-lp .container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

.ad-lp a{ color: inherit; }
.ad-lp img{ max-width:100%; height:auto; display:block; }

/* 見出しの整え */
.ad-lp h1, .ad-lp h2, .ad-lp h3{ letter-spacing: .01em; }

/* ========================================
   2) 共通ボタン
======================================== */
.ad-lp .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease;
  user-select: none;
}

.ad-lp .btn:active{
  transform: translateY(1px) scale(.99);
}

.ad-lp .btn-large{
  padding: 16px 26px;
  font-size: 16px;
}

/* Primary（資料DL） */
.ad-lp .btn-accent{
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  box-shadow: 0 14px 30px rgba(90,182,87,.35);
}

.ad-lp .btn-accent:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(90,182,87,.42);
  text-decoration: none;
}

/* Secondary（無料相談予約） */
.ad-lp .btn-secondary{
  background: linear-gradient(135deg, var(--coral), var(--coral-dark));
  color: #fff;
  box-shadow: 0 14px 30px rgba(219,77,57,.28);
}

.ad-lp .btn-secondary:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(219,77,57,.34);
  text-decoration: none;
}

/* Light button（カード内の補助など） */
.ad-lp .btn-light{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border-soft);
  color: var(--ink);
}

/* ========================================
   3) 画面1：FV（ヒーロー）
======================================== */
.ad-hero{
  position: relative;
  overflow: hidden;
  padding: 52px 0 70px;

  /* バナーの「上グリーン / 下イエロー」を現代的に */
  background:
    radial-gradient(900px 380px at 12% 0%, rgba(246,229,102,.55), transparent 62%),
    radial-gradient(700px 320px at 88% 10%, rgba(255,255,255,.45), transparent 62%),
    linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 48%, var(--yellow) 48%, var(--yellow-cream) 100%);
}

/* うっすらパターン（やりすぎない） */
.ad-hero::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 2px, transparent 2px 10px);
  opacity:.35;
  transform: rotate(-8deg);
  pointer-events:none;
}

.ad-hero .container{
  position: relative;
  display:flex;
  flex-direction: column;
  gap: 28px;
  z-index: 1;
}

@media (min-width: 900px){
  .ad-hero .container{
    flex-direction: row;
    align-items: center;
    gap: 44px;
  }
}

/* 左：コンテンツカード */
.ad-hero__content{
  flex: 1;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 28px;
}

@media (min-width: 900px){
  .ad-hero__content{
    padding: 30px 32px;
  }
}

/* バッジ（上品に） */
.ad-hero__badges{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ad-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
  background: rgba(246,229,102,.85);
  border: 1px solid rgba(0,0,0,.12);
}

.ad-badge--accent{
  background: #111;
  color:#fff;
  border-color: transparent;
}

/* H1 */
.ad-hero__title{
  margin: 0 0 12px;
  font-size: clamp(1.85rem, 4.8vw, 2.9rem);
  line-height: 1.18;
  font-weight: 900;
  color: var(--ink);
}

.ad-hero__title-sub{
  display:block;
  margin-top: 8px;
  font-size: clamp(1.05rem, 3.2vw, 1.35rem);
  font-weight: 900;
  color: var(--ink);
}

/* “LINE”の文字をバナー寄せに */
.ad-hero__title .text-gradient{
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 黒帯コピー（バナーの世界観を踏襲） */
.ad-hero__kickers{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 16px;
}

.ad-kicker{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #111;
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

.ad-kicker i{ color: var(--yellow); }

/* サブコピー */
.ad-hero__subtitle{
  margin: 0 0 18px;
  font-size: 1rem;
  color: var(--ink-soft);
}

.ad-hero__subtitle strong{
  color: var(--ink);
  font-weight: 900;
}

/* 価格ボックス：黄色ベースで視認性UP */
.ad-hero__price{
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(246,229,102,.70), rgba(255,246,195,.55));
  border: 1px solid rgba(0,0,0,.10);
}

.ad-hero__price-row{
  display:flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
}

.ad-hero__price-monthly strong{
  font-family: var(--font-num);
  font-size: 1.55em;
  color: var(--primary-ink);
  letter-spacing: .01em;
}

.ad-hero__price-divider{
  color: rgba(0,0,0,.35);
}

.ad-hero__price-initial{
  color: var(--ink);
  font-weight: 700;
  padding: 4px 10px;
  background: rgba(255,255,255,.7);
  border-radius: 8px;
}

.ad-hero__price-example{
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255,255,255,.75);
  border-radius: 10px;
  border-left: 4px solid var(--primary-color);
}

.ad-hero__price-example strong{
  font-family: var(--font-num);
  color: var(--primary-ink);
  font-size: 1.2em;
}

/* 3ベネフィット：カードを整える */
.ad-hero__benefits{
  display:flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 18px;
}

@media (min-width: 600px){
  .ad-hero__benefits{
    flex-direction: row;
  }
}

.ad-benefit-card{
  flex:1;
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 14px 14px 14px 14px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.ad-benefit-card i{
  font-size: 20px;
  color: var(--primary-color);
  margin-top: 2px;
}

.ad-benefit-card strong{
  display:block;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
  font-weight: 900;
}

.ad-benefit-card p{
  margin: 0;
  font-size: 12px;
  color: rgba(0,0,0,.62);
  line-height: 1.4;
}

/* CTA */
.ad-hero__cta{
  display:flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 14px;
}

@media (min-width: 520px){
  .ad-hero__cta{
    flex-direction: row;
  }
}

.ad-btn-primary{ flex: 1; text-align:center; }
.ad-btn-secondary{ flex: 0 0 auto; text-align:center; }

/* 不安つぶし */
.ad-hero__reassurance{
  display:flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0,0,0,.12);
}

.ad-hero__reassurance p{
  margin:0;
  font-size: 13px;
  color: rgba(0,0,0,.70);
  display:flex;
  align-items:flex-start;
  gap: 8px;
}

.ad-hero__reassurance i{
  color: var(--primary-color);
  margin-top: 2px;
}

/* 右：ヒーロー画像 */
.ad-hero__image{
  flex: 0 0 auto;
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 540px;
  padding: 18px 16px 10px;
}

@media (min-width: 900px){
  .ad-hero__image{
    width: 500px;
    padding: 22px 18px 10px;
  }
}

/* 背面のイエロー台座 */
/*.ad-hero__image::before{
  content:"";
  position:absolute;
  inset: 18px 8px 18px 8px;
  background: linear-gradient(135deg, rgba(246,229,102,.98), rgba(255,246,195,.92));
  border-radius: 28px;
  box-shadow: 0 22px 60px rgba(0,0,0,.16);
  transform: rotate(-2.5deg);
  z-index: 0;
}*/

/* 画像の白フレーム */
.ad-hero__image::after{
  content:"";
  position:absolute;
  inset: 6px 16px 0px 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  z-index: 0;
}

.ad-hero__image img{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 16px;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.16));
}

/* “導入かんたん” ステッカー（バナーの吹き出し要素を現代化） */
.ad-hero__image-sticker{
  position:absolute;
  z-index: 2;
  top: -10px;
  left: 14px;
  background: rgba(255,255,255,.95);
  border: 2px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
  display:flex;
  flex-direction: column;
  gap: 2px;
}

.ad-hero__image-sticker span{
  font-weight: 900;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.1;
}

.ad-hero__image-sticker small{
  font-size: 11px;
  color: rgba(0,0,0,.62);
  line-height: 1.1;
}

/* ========================================
   対応業種セクション
======================================== */
.ad-industries{
  padding: 64px 0;
  background: #fff;
}

.ad-industries__lead{
  text-align: center;
  margin: -20px 0 36px;
  font-size: 15px;
  color: rgba(0,0,0,.68);
}

.ad-industries__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto 28px;
}

@media (min-width: 600px){
  .ad-industries__grid{
    grid-template-columns: repeat(4, 1fr);
  }
}

.ad-industry-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,246,195,.25));
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  transition: transform .22s ease, box-shadow .22s ease;
}

.ad-industry-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}

.ad-industry-card__icon{
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px rgba(90,182,87,.25);
}

.ad-industry-card__icon i{
  font-size: 26px;
  color: #fff;
}

.ad-industry-card span{
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
  line-height: 1.35;
}

.ad-industries__note{
  text-align: center;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(246,229,102,.35), rgba(90,182,87,.12));
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-lg);
  font-size: 14px;
  color: rgba(0,0,0,.74);
  font-weight: 700;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ad-industries__note i{
  color: var(--primary-color);
  font-size: 18px;
}

/* スマホ用改行 */
.sp-only{ display: none; }
@media (max-width: 599px){
  .sp-only{ display: inline; }
}

/* ========================================
   4) 画面2：資料DLブロック
======================================== */
.ad-download{
  position: relative;
  padding: 64px 0;
  background:
    radial-gradient(900px 360px at 20% 0%, rgba(90,182,87,.14), transparent 62%),
    radial-gradient(900px 360px at 90% 20%, rgba(246,229,102,.38), transparent 62%),
    linear-gradient(180deg, var(--yellow-cream) 0%, rgba(255,246,195,.55) 100%);
}

.ad-download__wrapper{
  display:flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,0,0,.06);
  overflow:hidden;
}

@media (min-width: 900px){
  .ad-download__wrapper{ flex-direction: row; }
}

.ad-download__info{
  flex: 1;
  padding: 38px 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,246,195,.28));
}

.ad-download__title{
  margin:0 0 10px;
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--ink);
  display:flex;
  align-items:flex-start;
  gap: 10px;
}

.ad-download__title i{
  color: var(--coral);
  font-size: 1.55rem;
  margin-top: 2px;
}

.ad-download__subtitle{
  margin: 0 0 22px;
  font-size: 14px;
  color: rgba(0,0,0,.66);
  line-height: 1.7;
}

.ad-download__features h3{
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 900;
  color: var(--ink);
}

.ad-download__features ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 10px;
}

.ad-download__features li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
}

.ad-download__features li i{
  color: var(--primary-color);
  margin-top: 4px;
}

.ad-download__note{
  margin-top: 18px;
  padding: 12px 14px;
  background: rgba(90,182,87,.10);
  border: 1px solid rgba(90,182,87,.18);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: rgba(0,0,0,.70);
  display:flex;
  align-items:flex-start;
  gap: 10px;
}

.ad-download__note i{ color: var(--primary-ink); }

/* フォーム */
.ad-download__form-wrapper{
  flex: 0 0 420px;
  padding: 36px 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.98));
  border-left: 1px solid rgba(0,0,0,.06);
}

@media (max-width: 899px){
  .ad-download__form-wrapper{
    border-left: none;
    border-top: 1px solid rgba(0,0,0,.06);
  }
}

.ad-download__form-title{
  margin:0 0 18px;
  font-size: 1.2rem;
  font-weight: 900;
  text-align:center;
  color: var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}

.ad-download__form-title i{ color: var(--primary-color); }

/* フォームUI */
.ad-form-group{ margin-bottom: 14px; }

.ad-form-group label{
  display:block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.ad-form-group input,
.ad-form-group select,
.ad-form-group textarea{
  width:100%;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 14px;
  font-size: 16px;
  background: rgba(255,255,255,.96);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.ad-form-group input:focus,
.ad-form-group select:focus,
.ad-form-group textarea:focus{
  outline:none;
  border-color: rgba(90,182,87,.6);
  box-shadow: 0 0 0 4px rgba(90,182,87,.16);
}

.required-tag,
.optional-tag{
  display:inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 900;
  border-radius: 6px;
  vertical-align: middle;
}

.required-tag{
  background: var(--coral);
  color:#fff;
}

.optional-tag{
  background: rgba(0,0,0,.45);
  color:#fff;
}

.ad-form-privacy{
  margin: 18px 0;
  font-size: 13px;
  color: rgba(0,0,0,.68);
}

.ad-form-privacy label{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  cursor:pointer;
}

.ad-form-privacy input{ margin-top: 4px; }

.ad-form-privacy a{
  color: var(--primary-ink);
  text-decoration: underline;
}

/* 営業電話しません訴求 */
.ad-form-notice{
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(90,182,87,.12), rgba(246,229,102,.18));
  border: 1px solid rgba(90,182,87,.28);
  border-radius: var(--radius-md);
  text-align: center;
}

.ad-form-notice p{
  margin: 0;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
}

.ad-form-notice i{
  color: var(--primary-ink);
  margin-right: 6px;
}

.ad-form-notice strong{
  color: var(--primary-ink);
}

.ad-form-submit{ width:100%; }

/* 送信メッセージ */
.error-message{
  background: rgba(219,77,57,.10);
  border: 1px solid rgba(219,77,57,.25);
  color: #8E1E12;
  padding: 12px 14px;
  border-radius: 14px;
  margin-bottom: 14px;
  font-size: 14px;
}

.success-message{
  background: rgba(90,182,87,.12);
  border: 1px solid rgba(90,182,87,.26);
  color: var(--primary-ink);
  padding: 12px 14px;
  border-radius: 14px;
  margin-bottom: 14px;
  font-size: 14px;
  display:flex;
  align-items:center;
  gap: 8px;
}

/* DL成功画面 */
.ad-download__success{
  text-align:center;
  padding: 10px 0;
}

.ad-download__success-icon{
  font-size: 60px;
  color: var(--primary-color);
  margin-bottom: 12px;
}

.ad-download__success h4{
  margin: 0 0 6px;
  font-size: 1.45rem;
  color: var(--ink);
  font-weight: 900;
}

.ad-download__success > p{
  margin: 0 0 14px;
  font-size: 14px;
  color: rgba(0,0,0,.68);
}

.ad-download__success-note{
  font-size: 12px;
  color: rgba(0,0,0,.62);
  margin-top: 12px !important;
}

.ad-download__next-action{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed rgba(0,0,0,.12);
}

.ad-download__next-action p{
  margin: 0 0 10px;
  font-size: 13px;
  color: rgba(0,0,0,.68);
}

.ad-download__next-note{
  margin: 8px 0 0;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

/* ========================================
   5) セクション共通（見出し）
======================================== */
.ad-section-title{
  margin: 0 0 36px;
  text-align:center;
  font-weight: 900;
  color: var(--ink);
  font-size: clamp(1.45rem, 4vw, 2.05rem);
  line-height: 1.35;
}

.ad-section-title::after{
  content:"";
  display:block;
  width: 72px;
  height: 6px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-color), var(--yellow));
}

.ad-section-subtitle{
  font-size: .92em;
  font-weight: 700;
  color: rgba(0,0,0,.58);
}

/* ========================================
   6) 画面3：導入フロー
======================================== */
.ad-flow{
  padding: 64px 0;
  background: #fff;
}

.ad-flow__steps{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 14px;
  margin-bottom: 34px;
}

@media (min-width: 900px){
  .ad-flow__steps{
    flex-direction: row;
    justify-content:center;
    gap: 0;
  }
}


.ad-flow__step{
  position: relative;
  display:flex;
  flex-direction: column;
  align-items:center;
  text-align:center;
  padding: 18px 18px 16px;
}

.ad-flow__step-icon{
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  box-shadow: 0 16px 34px rgba(90,182,87,.26);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 12px;
}

.ad-flow__step-icon i{ font-size: 30px; color:#fff; }

.ad-flow__step-number{
  position:absolute;
  top: 10px;
  right: calc(50% - 52px);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--yellow);
  color: #111;
  font-weight: 900;
  font-family: var(--font-num);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 20px rgba(0,0,0,.14);
}

.ad-flow__step h3{
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
}

.ad-flow__step p{
  margin:0;
  font-size: 13px;
  color: rgba(0,0,0,.64);
}

.ad-flow__arrow{
  color: rgba(0,0,0,.25);
  font-size: 24px;
}

@media (min-width: 900px){ .ad-flow__arrow{ margin: 0 10px; } }

@media (max-width: 899px){
  .ad-flow__arrow i::before{ content:"\f078"; } /* down arrow */
}

.ad-flow__visuals{
  display: flex;
  justify-content: center;
}

.ad-flow__visual img{
  max-width: 460px;
  width:100%;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow-sm);
}

/* ========================================
   7) 画面4：3課題
======================================== */
.ad-problems{
  padding: 64px 0;
  background:
    radial-gradient(900px 360px at 18% 0%, rgba(246,229,102,.35), transparent 62%),
    linear-gradient(180deg, var(--yellow-cream) 0%, rgba(255,246,195,.55) 100%);
}

.ad-problems__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 34px;
}

@media (min-width: 700px){
  .ad-problems__grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

.ad-problem-card{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  text-align:center;
}

.ad-problem-card__before i{
  font-size: 32px;
  color: var(--coral);
}

.ad-problem-card__before span{
  display:block;
  margin-top: 8px;
  font-size: 14px;
  color: rgba(0,0,0,.66);
  font-weight: 800;
}

.ad-problem-card__arrow{
  color: rgba(90,182,87,.9);
  font-size: 20px;
  margin: 10px 0;
}

.ad-problem-card__after{
  padding-top: 14px;
  border-top: 2px dashed rgba(0,0,0,.12);
}

.ad-problem-card__after i{
  font-size: 28px;
  color: var(--primary-color);
}

.ad-problem-card__after span{
  display:block;
  margin-top: 6px;
  font-size: 16px;
  color: var(--primary-ink);
  font-weight: 900;
}

/* ========================================
   8) 画面5：料金
======================================== */
.ad-pricing{
  padding: 64px 0;
  background: #fff;
}

.ad-pricing__card{
  max-width: 560px;
  margin: 0 auto 26px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(900px 360px at 20% 0%, rgba(246,229,102,.45), transparent 60%),
    linear-gradient(135deg, rgba(90,182,87,.08), rgba(255,246,195,.55));
  border: 2px solid rgba(90,182,87,.55);
  box-shadow: var(--shadow-md);
  padding: 30px 26px;
  text-align:center;
}

.ad-pricing__monthly{
  display:flex;
  justify-content:center;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}

.ad-pricing__label{
  font-size: 16px;
  color: rgba(0,0,0,.62);
  font-weight: 900;
}

.ad-pricing__amount{
  font-family: var(--font-num);
  font-size: 52px;
  font-weight: 900;
  color: var(--primary-ink);
  line-height: 1;
}

.ad-pricing__unit{
  font-size: 16px;
  color: rgba(0,0,0,.62);
  font-weight: 900;
}

.ad-pricing__initial{
  font-size: 14px;
  color: rgba(0,0,0,.62);
  margin-bottom: 16px;
}

.ad-pricing__multi{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(90,182,87,.10);
  border: 1px solid rgba(90,182,87,.20);
  border-radius: 16px;
  font-size: 14px;
  color: rgba(0,0,0,.74);
  font-weight: 800;
}

.ad-pricing__multi strong{
  color: var(--primary-ink);
  font-family: var(--font-num);
}

.ad-pricing__example{
  margin-top: 14px;
  font-size: 13px;
  color: rgba(0,0,0,.70);
}

.ad-pricing__example span{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(246,229,102,.70);
  border: 1px solid rgba(0,0,0,.10);
  font-weight: 900;
}

.ad-pricing__example strong{
  font-family: var(--font-num);
}

/* ========================================
   9) 画面6：不安つぶし
======================================== */
.ad-reassurance{
  padding: 64px 0;
  background:
    radial-gradient(900px 360px at 80% 0%, rgba(90,182,87,.12), transparent 62%),
    linear-gradient(180deg, var(--yellow-cream) 0%, rgba(255,246,195,.50) 100%);
}

.ad-reassurance__list{
  max-width: 640px;
  margin: 0 auto 34px;
}

.ad-reassurance__item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  margin-bottom: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

.ad-reassurance__item i{
  font-size: 22px;
  color: var(--primary-color);
}

.ad-reassurance__item span{
  font-size: 15px;
  color: rgba(0,0,0,.78);
  font-weight: 800;
}

.ad-reassurance__cta{
  text-align: center;
}

.ad-reassurance__cta-note{
  margin: 12px 0 0;
  font-size: 13px;
  color: rgba(0,0,0,.65);
}

/* ========================================
   10) 画面7：最終CTA（相談）
======================================== */
.ad-contact{
  padding: 70px 0 90px;
  position: relative;
  overflow:hidden;
  background:
    radial-gradient(900px 360px at 20% 0%, rgba(246,229,102,.25), transparent 62%),
    linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

.ad-contact::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 2px, transparent 2px 12px);
  opacity: .28;
  transform: rotate(-8deg);
  pointer-events:none;
}

.ad-contact .ad-section-title{
  color:#fff;
}

.ad-contact .ad-section-title::after{
  background: linear-gradient(90deg, var(--yellow), rgba(255,255,255,.85));
}

.ad-contact__subtitle{
  text-align:center;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  margin-top: -26px;
  margin-bottom: 18px;
}

.ad-contact__phone{
  text-align:center;
  color: rgba(255,255,255,.92);
  margin: 0 0 36px;
  font-weight: 800;
  font-family: var(--font-num);
}

.ad-contact__phone a{
  color: #fff;
  text-decoration: underline;
}

.ad-contact__wrapper{
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ad-contact__form-card{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-lg);
}

.ad-contact__form-title{
  margin: 0 0 22px;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--ink);
  text-align:center;
}

/* ========================================
   11) フッター
======================================== */
.ad-footer{
  background:#111;
  color: rgba(255,255,255,.72);
  padding: 46px 0;
  text-align:center;
}

.ad-footer__logo{
  color:#fff;
  font-weight: 900;
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.ad-footer__content p{
  margin:0;
  font-size: 13px;
}

.ad-footer__links{
  margin: 18px 0 0;
}

.ad-footer__links a{
  color: rgba(255,255,255,.78);
  font-size: 13px;
  margin: 0 12px;
  text-decoration:none;
}

.ad-footer__links a:hover{ text-decoration: underline; }

.ad-footer__note{
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

.ad-footer__copyright{
  font-size: 12px;
  margin-top: 18px;
  color: rgba(255,255,255,.55);
}

/* ========================================
   12) スマホ追従ボトムバー
======================================== */
.ad-sticky-bar{
  position: fixed;
  bottom: -90px;
  left: 0;
  right: 0;
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -10px 30px rgba(0,0,0,.18);
  display:none;
  padding: 12px 14px;
  z-index: 1000;
  transition: bottom .28s ease;
  backdrop-filter: blur(8px);
}

@media (max-width: 899px){
  .ad-sticky-bar{ display:flex; gap: 10px; }
}

.ad-sticky-bar.visible{ bottom: 0; }

.ad-sticky-bar__btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 14px 14px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 900;
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.ad-sticky-bar__btn:active{ transform: scale(.99); }

.ad-sticky-bar__btn--primary{
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff !important;
  box-shadow: 0 12px 22px rgba(90,182,87,.28);
}

.ad-sticky-bar__btn--primary span,
.ad-sticky-bar__btn--primary i{
  color: #fff !important;
}

.ad-sticky-bar__btn--secondary{
  background: linear-gradient(135deg, var(--coral), var(--coral-dark));
  color: #fff !important;
  box-shadow: 0 12px 22px rgba(219,77,57,.22);
}

.ad-sticky-bar__btn--secondary span,
.ad-sticky-bar__btn--secondary i{
  color: #fff !important;
}

/* スティッキーバー表示時の余白 */
@media (max-width: 899px){
  .ad-footer{ padding-bottom: 110px; }
}

/* ========================================
   13) レスポンシブ微調整（最重要：FVでCTAが1画面内）
======================================== */
@media (max-width: 899px){
  .ad-hero{
    padding: 36px 0 52px;
  }

  .ad-hero__content{
    padding: 22px;
  }

  /* スマホは CTA→画像 の順 */
  .ad-hero__image{
    order: 1;
    padding: 14px 10px 2px;
    max-width: 100%;
  }

  .ad-hero__image img{
    max-width: 100%;
  }

  .ad-download__info,
  .ad-download__form-wrapper{
    padding: 24px 22px;
  }

  .ad-contact__form-card{
    padding: 24px;
  }

  .ad-section-title{
    font-size: 1.35rem;
  }
}

@media (max-width: 480px){
  .ad-hero__title{
    font-size: 1.65rem;
  }

  .ad-hero__title-sub{
    font-size: 1.05rem;
  }

  .ad-kicker{
    font-size: 13px;
    padding: 9px 10px;
  }

  .ad-benefit-card{
    padding: 12px;
  }

  .ad-benefit-card p{
    font-size: 11px;
  }
}

/* 動きを抑えたい人向け */
@media (prefers-reduced-motion: reduce){
  .ad-lp .btn,
  .ad-sticky-bar{
    transition: none !important;
  }
}

/* ========================================
   14) Comparison セクション（比較表）
======================================== */
.ad-lp .comparison{
  padding: 64px 0;
  background: var(--bg-white);
}

.ad-lp .section-header{
  text-align: center;
  margin-bottom: 36px;
}

.ad-lp .section-title{
  margin: 0;
  font-weight: 900;
  color: var(--ink);
  font-size: clamp(1.45rem, 4vw, 2.05rem);
  line-height: 1.35;
}

.ad-lp .section-title::after{
  content:"";
  display:block;
  width: 72px;
  height: 6px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-color), var(--yellow));
}

.ad-lp .comparison__table-wrapper{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  margin-bottom: 20px;
}

.ad-lp .comparison__table{
  width: 100%;
  border-collapse: collapse;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 700px;
  background: white;
}

.ad-lp .comparison__table th,
.ad-lp .comparison__table td{
  padding: 18px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: 14px;
  line-height: 1.6;
}

.ad-lp .comparison__table thead th{
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.ad-lp .comparison__table thead th:first-child{
  background: #333;
}

.ad-lp .comparison__table tbody tr:last-child td{
  border-bottom: none;
}

.ad-lp .comparison__table tbody tr:nth-child(even){
  background-color: rgba(0,0,0,.02);
}

.ad-lp .comparison__table td:first-child{
  font-weight: 700;
  text-align: left;
  background-color: rgba(246,229,102,.15);
  min-width: 140px;
}

.ad-lp .comparison__table .win{
  background-color: rgba(90,182,87,.12);
}

.ad-lp .comparison__table .win span{
  display: block;
  font-size: 1.1em;
  font-weight: 900;
  color: var(--primary-ink);
  margin-bottom: 4px;
}

.ad-lp .comparison__table .lose{
  background-color: rgba(219,77,57,.06);
}

.ad-lp .comparison__table .lose span{
  display: block;
  font-size: 1.1em;
  font-weight: 900;
  color: var(--coral);
  margin-bottom: 4px;
}

.ad-lp .key-message{
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, rgba(246,229,102,.25), rgba(90,182,87,.12));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,.06);
}

.ad-lp .key-message p{
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

/* Comparison レスポンシブ */
@media (max-width: 899px){
  .ad-lp .comparison{
    padding: 48px 0;
  }

  .ad-lp .comparison__table-wrapper::before{
    content: '← 横スクロールできます →';
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-ink);
    background: linear-gradient(135deg, rgba(90,182,87,.15), rgba(246,229,102,.25));
    border: 1px solid rgba(90,182,87,.3);
    border-radius: 999px;
    animation: scrollHint 1.5s ease-in-out infinite;
  }

  @keyframes scrollHint{
    0%, 100%{ transform: translateX(0); }
    25%{ transform: translateX(-4px); }
    75%{ transform: translateX(4px); }
  }

  .ad-lp .comparison__table-wrapper{
    margin-bottom: 20px;
  }
}

@media (max-width: 480px){
  .ad-lp .section-title{
    font-size: 1.35rem;
  }

  .ad-lp .comparison__table th,
  .ad-lp .comparison__table td{
    padding: 14px 12px;
    font-size: 13px;
  }

  .ad-lp .key-message p{
    font-size: 1rem;
  }
}