/* =========================================================
  Header, layout base
========================================================= */
#page_header{
  display: none;
}

@media screen and (min-width: 960px){
  #header{
    display: none;
  }
}

.ab-sp-only-break{
  display: inline;
}
@media (max-width: 980px){
  .ab-sp-only-break{
    display: block;
  }
}

#main_contents{
  margin: 0 auto;
  padding: 0 0 !important;
}
@media screen and (min-width: 960px){
  #main_contents{
    width: 1000px !important;
  }
}

/* =========================================================
  HYBRID LP base
========================================================= */
#body{
  --ab-bg: #0b1220;
  --ab-bg2: #0f1a33;
  --ab-surface: rgba(255,255,255,0.08);
  --ab-surface2: rgba(255,255,255,0.12);
  --ab-text: rgba(255,255,255,0.92);
  --ab-text2: rgba(255,255,255,0.72);
  --ab-border: rgba(255,255,255,0.16);
  --ab-primary: #6aa8ff;
  --ab-primary2: #9a7bff;
  --ab-radius: 22px;

  color: var(--ab-text);
  background: radial-gradient(1200px 600px at 20% 10%, rgba(106,168,255,0.18), transparent 60%),
              radial-gradient(900px 480px at 85% 15%, rgba(154,123,255,0.14), transparent 55%),
              linear-gradient(180deg, var(--ab-bg), var(--ab-bg2));
  padding: 28px 0px 0px;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
}

#body::before{
  content: "";
  position: fixed;
  left: 0;
  top: 12vh;
  width: 280px;
  height: 280px;
  transform: translate3d(calc(var(--ab-orb-x, 20vw) * 1), 0, 0);
  border-radius: 999px;

  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,0.92) 0%,
    rgba(255,255,255,0.60) 16%,
    rgba(106,168,255,0.55) 34%,
    rgba(154,123,255,0.40) 52%,
    rgba(106,168,255,0.18) 66%,
    rgba(255,255,255,0.00) 74%
  );

  filter: blur(22px) saturate(140%);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  will-change: transform;
}

.ab-hybrid-lp{
  position: relative;
  z-index: 1;
  padding: 50px 0px 0px;
}

.ab-hybrid-lp a{ color: inherit; text-decoration: none; }

.ab-hybrid-lp__inner{
  margin: 0 auto;
}

.post_content p{
  margin: 0 0 0 0 !important;
}
.post_content ul{
  list-style: none;
  margin-bottom: 0;
}

/* =========================================================
  H2 gradient text
========================================================= */
.ab-hybrid-lp h2{
  font-weight: 900;
  font-size: 32px;
  line-height: 1.35;
  letter-spacing: 0.02em;

  color: transparent;
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0.92) 0%,
    rgba(255,255,255,0.92) 45%,
    rgba(255,255,255,0.30) 55%,
    rgba(255,255,255,0.30) 100%
  );
  background-size: 220% 100%;
  background-position: 100% 0;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  will-change: background-position;
}

@media (max-width: 1024px){
  .ab-hybrid-lp h2{ font-size: 28px; }
}

/* =========================================================
  HERO
========================================================= */
.ab-hybrid-lp .ab-hybrid-hero__copy,
.ab-hybrid-lp .ab-hybrid-hero__visual,
.ab-hybrid-lp .ab-hybrid-hero__card{
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.ab-hybrid-lp .ab-hybrid-hero__grid{
  display: block !important;
}

.ab-hybrid-lp .ab-hybrid-hero{
  padding: 28px 14px 10px;
  position: relative;
}

.ab-hybrid-lp .ab-hero2{
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
  gap: 24px;
  align-items: center;
  padding: 18px 0 8px;
  max-width: 1120px;
  margin: 0 auto;
}

.ab-hybrid-lp .ab-hero2__left,
.ab-hybrid-lp .ab-hero2__right{
  min-width: 0;
  width: auto !important;
}

.ab-hybrid-lp .ab-hero2__catch{
  margin: 0 0 10px;
  font-size: 36px;
  line-height: 1.22;
  letter-spacing: 0.01em;
}

.ab-hybrid-lp .ab-hero2__lead{
  margin: 0 0 14px;
  color: var(--ab-text2);
  line-height: 1.85;
  font-size: 15.5px;
  max-width: 44em;
}

.ab-hybrid-lp .ab-hero2__brand{
  margin: 0 0 16px;
}

.ab-hybrid-lp .ab-hero2__brandText{
  display: inline-block;
  font-weight: 900;
  font-size: 2.5rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.96);
  white-space: pre-line;
  border-right: 2px solid rgba(255,255,255,0.85);
  padding-right: 6px;
  line-height: normal;
}

.ab-hybrid-lp .ab-hero2__brandText.is-typing{
  animation: abHybridCaretBlink 650ms steps(1) infinite;
}

@keyframes abHybridCaretBlink{
  50%{ border-right-color: transparent; }
}

.ab-hybrid-lp .ab-hero2__brandText.is-done{
  border-right-color: transparent;
}

.ab-hybrid-lp .ab-hero2__brandText.is-glint{
  position: relative;
}

.ab-hybrid-lp .ab-hero2__brandText.is-glint::after{
  content: "";
  position: absolute;
  inset: -6px -8px;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,0.0) 40%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0.0) 60%,
    transparent 100%);
  transform: translateX(-120%);
  animation: abGlintSweep 780ms ease forwards;
  pointer-events: none;
  filter: blur(0.4px);
}

@keyframes abGlintSweep{
  to{ transform: translateX(120%); }
}

.ab-hybrid-lp .ab-hero2__brandText.is-gradient{
  color: transparent;
  background: linear-gradient(135deg, #ff8a3d 0%, #ff5fa2 45%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 18px rgba(106,168,255,0.18);
}

.ab-hybrid-lp .ab-hero2__cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.ab-hybrid-lp .ab-hero2__right{
  display: grid;
  place-items: center;
}

.ab-hybrid-lp .ab-hero2__logo{
  width: min(440px, 100%) !important;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.35));
  z-index: -1;
}

/* =========================================================
  Buttons
========================================================= */
.ab-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
  min-width: 160px;
}
.ab-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.10); color: #fff !important; }

.ab-btn--primary{
  border-color: rgba(106,168,255,0.55);
  background: linear-gradient(90deg, rgba(106,168,255,0.95), rgba(154,123,255,0.95));
  color: rgba(255,255,255,0.96);
}
.ab-btn--primary:hover{
  background: linear-gradient(90deg, rgba(106,168,255,1), rgba(154,123,255,1));
}
.ab-btn--ghost{
  background: rgba(255,255,255,0.04);
}

/* =========================================================
  Sections
========================================================= */
.ab-sec{
  padding: 48px 6px;
}

.ab-sec--tint{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--ab-radius);
  padding: 46px 18px;
  margin: 18px 0;
}

.ab-sec__head{ margin: 0 0 20px; }
.ab-sec__title{ margin: 0 0 8px; font-size: 26px; line-height: 1.35; }
.ab-sec__sub{ margin: 0; color: var(--ab-text2); line-height: 1.8; font-size: 15px; }

/* =========================================================
  Cards
========================================================= */
.ab-cardGrid{
  display: grid;
  gap: 12px;
}
.ab-cardGrid--3{ grid-template-columns: repeat(3, 1fr); }
.ab-cardGrid--2{ grid-template-columns: repeat(2, 1fr); }

.ab-hybrid-lp .ab-card{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 18px 16px;
}

.ab-card--accent{
  background: linear-gradient(180deg, rgba(106,168,255,0.10), rgba(255,255,255,0.04));
  border-color: rgba(106,168,255,0.22);
}

.ab-card__title{
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.5;
}
.ab-card__text{
  margin: 0;
  color: rgba(255,255,255,0.76);
  line-height: 1.85;
  font-size: 14px;
}

.ab-hybrid-lp .ab-card::after{
  content: "";
  position: absolute;
  right: -4%;
  bottom: -10%;
  width: 70%;
  height: 70%;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: 0.22;
  filter: brightness(0.45) contrast(1.1) saturate(0.9);
  pointer-events: none;
  z-index: 0;
}

.ab-hybrid-lp .ab-card > *{
  position: relative;
  z-index: 1;
}

/* why cards */
.ab-hybrid-lp #why .ab-card:nth-child(1)::after{
  background-image: url("https://ai-bloga.com/wp-content/uploads/2026/01/google_bg.webp");
}
.ab-hybrid-lp #why .ab-card:nth-child(2)::after{
  background-image: url("https://ai-bloga.com/wp-content/uploads/2026/01/ai_bg.webp");
}
.ab-hybrid-lp #why .ab-card:nth-child(3)::after{
  background-image: url("https://ai-bloga.com/wp-content/uploads/2026/01/LLMO_bg.webp");
}

/* solution cards */
.ab-hybrid-lp #solution .ab-card:nth-child(1)::after{
  background-image: url("https://ai-bloga.com/wp-content/uploads/2026/01/ai_bg02.webp");
}
.ab-hybrid-lp #solution .ab-card:nth-child(2)::after{
  background-image: url("https://ai-bloga.com/wp-content/uploads/2026/01/human_bg.webp");
}

/* service section sign */
.ab-hybrid-lp #service,
.ab-hybrid-lp #difference .ab-compare__col{
  position: relative;
  overflow: hidden;
}

.ab-hybrid-lp #service::after{
  content: "";
  position: absolute;
  right: -10%;
  bottom: -10%;
  width: 62%;
  height: 62%;
  background-image: url("https://ai-bloga.com/wp-content/uploads/2026/01/hybrid_sign.webp");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: 0.3;
  filter: brightness(0.33) contrast(1.05) saturate(0.85);
  pointer-events: none;
  z-index: 0;
}

.ab-hybrid-lp #service > *{
  position: relative;
  z-index: 1;
}

/* difference columns sign */
.ab-hybrid-lp #difference .ab-compare__col::after{
  content: "";
  position: absolute;
  right: -10%;
  bottom: -10%;
  width: 74%;
  height: 74%;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: 0.3;
  filter: brightness(0.33) contrast(1.05) saturate(0.85);
  pointer-events: none;
  z-index: 0;
}

.ab-hybrid-lp #difference .ab-compare__col > *{
  position: relative;
  z-index: 1;
}

.ab-hybrid-lp #difference .ab-compare__col:nth-child(1)::after{
  background-image: url("https://ai-bloga.com/wp-content/uploads/2026/01/card_bg_aba_logo.webp");
}
.ab-hybrid-lp #difference .ab-compare__col:nth-child(2)::after{
  background-image: url("https://ai-bloga.com/wp-content/uploads/2026/01/card_bg_abah_logo.webp");
}

/* contact：box自体に右下サインを入れる */
.ab-hybrid-lp #contact .ab-contact__box{
  position: relative;
  overflow: hidden;
}

/* 右下に沈める画像 */
.ab-hybrid-lp #contact .ab-contact__box::after{
    content: "";
    position: absolute;
    right: 10%;
    bottom: 0%;
    width: 100%;
    height: 100%;
    background-image: url(https://ai-bloga.com/wp-content/uploads/2026/01/card_bg_abah_logo.webp);
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    opacity: 1.0;
    pointer-events: none;
    z-index: 0;
}

/* box内の中身を前面に */
.ab-hybrid-lp #contact .ab-contact__box > *{
  position: relative;
  z-index: 1;
}

/* スマホは控えめに（difference と同じ思想） */
@media (max-width: 768px){
  .ab-hybrid-lp #contact .ab-contact__box::after{
    width: 86%;
    height: 86%;
    right: -10%;
    bottom: -20%;
    opacity: 0.3;
  }
}

/* border light */
.ab-hybrid-lp .ab-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from calc(var(--ab-bd-a, -45) * 1deg) at 50% 50%,
    rgba(255,255,255,0.00) 0deg,
    rgba(255,255,255,0.00) 260deg,
    rgba(255,255,255, calc(var(--ab-bd-alpha, 0) * 1)) 300deg,
    rgba(255,255,255, calc(var(--ab-bd-alpha, 0) * 0.35)) 330deg,
    rgba(255,255,255,0.00) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  filter: drop-shadow(0 0 calc(var(--ab-bd-glow, 0) * 1px) rgba(255,255,255,0.35));
  opacity: 1;
}

/* =========================================================
  Split, list, note, highlight, steps, compare, cta, faq, contact
========================================================= */
.ab-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.ab-split__col{ min-width: 0; }

.ab-check{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.ab-check li{
  position: relative;
  padding-left: 28px;
  color: rgba(255,255,255,0.82);
  line-height: 1.85;
  font-size: 14px;
}
.ab-check li:before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
}

.ab-note{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  padding: 18px 16px;
}
.ab-note__title{ margin: 0 0 6px; font-weight: 900; }
.ab-note__text{ margin: 0; color: rgba(255,255,255,0.76); line-height: 1.85; font-size: 14px; }

.ab-highlight{
  margin-top: 16px;
  border-radius: 18px;
  border: 1px solid rgba(106,168,255,0.25);
  background: linear-gradient(90deg, rgba(106,168,255,0.10), rgba(154,123,255,0.06));
  padding: 16px 14px;
}
.ab-highlight__lead{ margin: 0 0 6px; font-weight: 900; line-height: 1.6; }
.ab-highlight__sub{ margin: 0; color: rgba(255,255,255,0.76); line-height: 1.8; font-size: 14px; }

.ab-steps{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.ab-step{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 16px 14px;
}
.ab-step__num{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, rgba(106,168,255,0.22), rgba(154,123,255,0.10));
  border: 1px solid rgba(255,255,255,0.10);
}
.ab-step__title{ margin: 2px 0 8px; font-size: 16px; }
.ab-step__text{ margin: 0; color: rgba(255,255,255,0.76); line-height: 1.85; font-size: 14px; }
.ab-step__list{ margin: 0; padding: 0 0 0 18px; color: rgba(255,255,255,0.78); line-height: 1.85; font-size: 14px; }

.ab-compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ab-compare__col{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  padding: 18px 16px;
}
.ab-compare__col--primary{
  border-color: rgba(106,168,255,0.28);
  background: linear-gradient(180deg, rgba(106,168,255,0.10), rgba(255,255,255,0.04));
}
.ab-compare__title{ margin: 0 0 6px; font-size: 18px; }
.ab-compare__lead{ margin: 0 0 12px; color: rgba(255,255,255,0.82); font-weight: 900; }
.ab-compare__list{
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,0.78);
  line-height: 1.8;
  font-size: 14px;
}
.ab-compare__list li{ padding-left: 18px; position: relative; }
.ab-compare__list li:before{ content: "•"; position: absolute; left: 0; top: 0; }
.ab-compare__note{ margin: 0; color: rgba(255,255,255,0.68); line-height: 1.8; font-size: 13px; }

.ab-oneLine{
  margin-top: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff8a3d 0%, #ff5fa2 45%, #8b5cf6 100%);
  padding: 14px 12px;
  text-align: center;
}
.ab-oneLine__big{ margin: 0; font-weight: 900; line-height: 1.55; font-size: 1.0rem; }

.ab-ctaBox{
  margin-top: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  padding: 16px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ab-ctaBox__title{ margin: 0 0 6px; font-weight: 900; font-size: 1.1rem; }
.ab-ctaBox__sub{ margin: 0; color: rgba(255,255,255,0.72); line-height: 1.8; font-size: 14px; }
.ab-ctaBox__btns{ display: flex; gap: 10px; flex-wrap: wrap; }

.ab-faq{ display: grid; gap: 10px; }
.ab-faq__item{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.ab-faq__q{
  cursor: pointer;
  padding: 14px 14px;
  list-style: none;
  font-weight: 900;
}
.ab-faq__q::-webkit-details-marker{ display: none; }
.ab-faq__a{
  padding: 0 14px 14px;
  color: rgba(255,255,255,0.76);
  line-height: 1.85;
  font-size: 14px;
}
.ab-faq__item[open]{ border-color: rgba(106,168,255,0.24); }

.ab-contact{ display: grid; place-items: center; }
.ab-contact__box{
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  padding: 18px 16px;
}
.ab-contact__title{ margin: 0 0 10px; font-weight: 900; font-size: 16px; }
.ab-contact__cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ab-contact__note{ margin: 12px 0 0; color: rgba(255,255,255,0.68); font-size: 13px; line-height: 1.8; }

/* hex bg */
#ab-hex-bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* =========================================================
  Scroll fade for tint section
========================================================= */
.ab-js .ab-hybrid-lp .ab-sec--tint{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 720ms ease, transform 720ms ease;
  will-change: opacity, transform;
}
.ab-js .ab-hybrid-lp .ab-sec--tint.is-on{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* =========================================================
  Price
========================================================= */
.ab-hybrid-lp .ab-price2{ position: relative; }

.ab-hybrid-lp .ab-price2__track{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}

.ab-hybrid-lp .ab-price2__card{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 18px 16px;
  min-height: 150px;

  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 720ms ease, transform 720ms ease, filter 520ms ease;
  will-change: opacity, transform;
}

.ab-hybrid-lp .ab-price2.is-on .ab-price2__card{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.ab-hybrid-lp .ab-price2.is-on .ab-price2__card:nth-child(1){ transition-delay: 0ms; }
.ab-hybrid-lp .ab-price2.is-on .ab-price2__card:nth-child(2){ transition-delay: 110ms; }
.ab-hybrid-lp .ab-price2.is-on .ab-price2__card:nth-child(3){ transition-delay: 220ms; }
.ab-hybrid-lp .ab-price2.is-on .ab-price2__card:nth-child(4){ transition-delay: 330ms; }
.ab-hybrid-lp .ab-price2.is-on .ab-price2__card:nth-child(5){ transition-delay: 440ms; }

.ab-hybrid-lp .ab-price2__name{
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.ab-hybrid-lp .ab-price2__meta{
  margin: 0 0 10px;
  color: rgba(255,255,255,0.74);
  font-size: 13.5px;
  letter-spacing: 0.04em;
}
.ab-hybrid-lp .ab-price2__price{
  margin: 0;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.02em;
}

/* =========================================================
  Responsive blocks
========================================================= */
@media (max-width: 980px){
  .ab-hybrid-lp{
    padding: 50px 14px 0px;
  }

  .ab-ctaBox__btns{
    width: 100% !important;
  }

  .ab-hybrid-lp .ab-price2__track{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .ab-hybrid-lp .ab-price2__track::-webkit-scrollbar{ height: 8px; }
  .ab-hybrid-lp .ab-price2__track::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
  }

  .ab-hybrid-lp .ab-price2__card{
    flex: 0 0 82%;
    scroll-snap-align: center;
    opacity: 0.22;
    transform: translate3d(0, 0, 0) scale(0.92);
    transition: opacity 420ms ease, transform 420ms ease, filter 420ms ease;
    filter: blur(0.2px);
  }

  .ab-hybrid-lp .ab-price2__card.is-active{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }
}

@media (max-width: 768px){
  #body::before{
    width: 240px;
    height: 240px;
    top: 10vh;
    filter: blur(20px) saturate(135%);
    opacity: 0.90;
  }

  .ab-hybrid-lp h2{
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: 0.03em;
  }

  .ab-hybrid-lp .ab-hero2{
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .ab-hybrid-lp .ab-hero2__catch{ font-size: 30px; }
  .ab-hybrid-lp .ab-hero2__cta .ab-btn{ width: 100%; min-width: 0; }
  .ab-hybrid-lp .ab-hero2__logo{ width: min(420px, 100%) !important; }
  .ab-hybrid-lp .ab-hero2__brandText{ font-size: 2.0em; }

  .ab-cardGrid--3{ grid-template-columns: 1fr; }
  .ab-cardGrid--2{ grid-template-columns: 1fr; }
  .ab-split{ grid-template-columns: 1fr; }
  .ab-compare{ grid-template-columns: 1fr; }

  .ab-btn{ width: 100%; min-width: 0; }

  .ab-step{ grid-template-columns: 56px 1fr; }
  .ab-step__num{ width: 56px; height: 56px; border-radius: 16px; }

  .ab-hybrid-lp .ab-card::after,
  .ab-hybrid-lp #solution .ab-card::after{
    opacity: 0.18;
    width: 78%;
    height: 78%;
    right: 10%;
    bottom: -10%;
  }

  .ab-hybrid-lp #service::after{
    width: 82%;
    height: 82%;
    right: -10%;
    bottom: -2%;
    opacity: 0.30;
  }

  .ab-hybrid-lp #difference .ab-compare__col::after{
    width: 86%;
    height: 86%;
    right: -10%;
    bottom: -2%;
    opacity: 0.3;
  }
}

@media (max-width: 480px){
  .ab-hybrid-lp .ab-price2__card{ flex-basis: 88%; }
  .ab-hybrid-lp .ab-price2__price{ font-size: 20px; }
}

/* =========================================================
  Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce){
  #body::before{
    transform: translate3d(20vw, 0, 0);
  }

  .ab-hybrid-lp h2{
    color: rgba(255,255,255,0.92);
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }

  .ab-hybrid-lp .ab-hero2__brandText{ animation: none; }
  .ab-hybrid-lp .ab-hero2__brandText.is-glint:after{ animation: none; display: none; }
  .ab-hybrid-lp .ab-hero2__brandText.is-sparkle:before{ animation: none; display: none; }

  .ab-btn{ transition: none; }

  .ab-hybrid-lp .ab-card::before{ display: none; }
  .ab-hybrid-lp .ab-card{ border-color: rgba(255,255,255,0.16); }

  .ab-js .ab-hybrid-lp .ab-sec--tint{
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ab-hybrid-lp .ab-price2__card{
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ab-hybrid-lp .ab-price2__card.is-active{
    transform: none;
  }
}

.ab-hybrid-lp .ab-seika{
  padding-top: 8px;
}

.ab-hybrid-lp .ab-seika__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 12px;
  opacity: .9;
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 9999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
}

.ab-hybrid-lp .ab-seika__title{
  margin: 0 0 8px;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.16;
}

.ab-hybrid-lp .ab-seika__one{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
  opacity: .9;
}

.ab-hybrid-lp .ab-seika__frame{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  transform: translateY(14px);
  opacity: 0;
  transition: transform 700ms ease, opacity 700ms ease;
}

.ab-hybrid-lp .ab-seika__frame.is-on{
  transform: translateY(0);
  opacity: 1;
}

.ab-hybrid-lp .ab-seika__glow{
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 20%, rgba(255,138,61,.30), transparent 45%),
              radial-gradient(circle at 75% 55%, rgba(139,92,246,.28), transparent 52%),
              radial-gradient(circle at 45% 90%, rgba(96,165,250,.20), transparent 55%);
  filter: blur(18px);
  animation: abSeikaGlow 5.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes abSeikaGlow{
  0%{ transform: translate3d(-1.5%, -1.0%, 0) scale(1.02); opacity: .75; }
  50%{ transform: translate3d(1.8%, 1.2%, 0) scale(1.06); opacity: .95; }
  100%{ transform: translate3d(-1.5%, -1.0%, 0) scale(1.02); opacity: .75; }
}

.ab-hybrid-lp .ab-seika__figure{
  margin: 0;
  position: relative;
  z-index: 1;
}

.ab-hybrid-lp .ab-seika__img{
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.02);
  transition: transform 900ms ease;
}

.ab-hybrid-lp .ab-seika__frame.is-on .ab-seika__img{
  transform: scale(1.0);
}

.ab-hybrid-lp .ab-seika__cap{
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  opacity: .8;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.ab-hybrid-lp .ab-seika__chips{
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 2;
}

.ab-hybrid-lp .ab-seika__chip{
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 9999px;
  background: rgba(0,0,0,.40);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  transform: translateY(-6px);
  opacity: 0;
  transition: transform 700ms ease, opacity 700ms ease;
}

.ab-hybrid-lp .ab-seika__frame.is-on .ab-seika__chip{
  transform: translateY(0);
  opacity: 1;
}

.ab-hybrid-lp .ab-seika__frame.is-on .ab-seika__chip:nth-child(2){ transition-delay: 120ms; }
.ab-hybrid-lp .ab-seika__frame.is-on .ab-seika__chip:nth-child(3){ transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce){
  .ab-hybrid-lp .ab-seika__frame,
  .ab-hybrid-lp .ab-seika__img,
  .ab-hybrid-lp .ab-seika__chip{
    transition: none;
  }
  .ab-hybrid-lp .ab-seika__glow{
    animation: none;
  }
  .ab-hybrid-lp .ab-seika__frame{
    transform: none;
    opacity: 1;
  }
  .ab-hybrid-lp .ab-seika__chip{
    transform: none;
    opacity: 1;
  }
}

/* ==========================
   Spacer
   ========================== */
.ab-hybrid-lp .ab-spacer{
  width: 100%;
  pointer-events: none;
}

/* 大きめ：成果・ヒーロー周り用 */
.ab-hybrid-lp .ab-spacer--lg{
  height: clamp(48px, 6vw, 96px);
}

/* スマホ最適化 */
@media (max-width: 980px){
  .ab-hybrid-lp .ab-spacer--lg{
    height: clamp(36px, 8vw, 72px);
  }
}

.ab-hybrid-lp .ab-voice{
  padding-top: 10px;
}

.ab-hybrid-lp .ab-voice__viewport{
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 2px 14px;
}

.ab-hybrid-lp .ab-voice__viewport::-webkit-scrollbar{
  display: none;
}

.ab-hybrid-lp .ab-voice__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 420px);
  gap: 14px;
  align-items: stretch;
}

.ab-hybrid-lp .ab-voice__card{
  scroll-snap-align: start;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  padding: 16px 16px 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

.ab-hybrid-lp .ab-voice__top{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.ab-hybrid-lp .ab-voice__avatar{
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  flex: 0 0 auto;
}

.ab-hybrid-lp .ab-voice__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ab-hybrid-lp .ab-voice__name{
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.ab-hybrid-lp .ab-voice__meta{
  margin: 4px 0 0;
  font-size: 12px;
  opacity: .82;
  line-height: 1.2;
}

.ab-hybrid-lp .ab-voice__quote{
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.9;
  opacity: .95;
}

.ab-hybrid-lp .ab-voice__quote::before{
  content: "“";
  font-size: 28px;
  line-height: 0;
  vertical-align: -10px;
  opacity: .55;
  margin-right: 6px;
}

.ab-hybrid-lp .ab-voice__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ab-hybrid-lp .ab-voice__tag{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.26);
  opacity: .95;
}

.ab-hybrid-lp .ab-voice__hint{
  margin: 10px 0 0;
  font-size: 12px;
  opacity: .78;
}

@media (max-width: 980px){
  .ab-hybrid-lp .ab-voice__track{
    grid-auto-columns: minmax(78vw, 86vw);
  }
}

/* ==========================
   AI × 人 役割分担セクション
   ========================== */

.ab-hybrid-lp .ab-role{
  padding-top: 10px;
}

.ab-hybrid-lp .ab-role__visual{
  margin: 10px auto 28px;
  max-width: 1100px;
}

.ab-hybrid-lp .ab-role__img{
  width: 100%;
  height: auto;
  display: block;
}

.ab-hybrid-lp .ab-role__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.ab-hybrid-lp .ab-role__card{
  border-radius: 20px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

.ab-hybrid-lp .ab-role__card--ai{
  border-color: rgba(120,170,255,.35);
}

.ab-hybrid-lp .ab-role__card--human{
  border-color: rgba(255,170,90,.35);
}

.ab-hybrid-lp .ab-role__label{
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  opacity: .85;
}

.ab-hybrid-lp .ab-role__title{
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
}

.ab-hybrid-lp .ab-role__list{
  margin: 0 0 8px 1.2em;
  line-height: 1.9;
}

.ab-hybrid-lp .ab-role__note{
  margin: 0;
  font-size: 13px;
  opacity: .85;
}

.ab-hybrid-lp .ab-role__one{
  margin: 26px 0 0;
  text-align: center;
}

.ab-hybrid-lp .ab-role__one p{
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .04em;
}

@media (max-width: 980px){
  .ab-hybrid-lp .ab-role__grid{
    grid-template-columns: 1fr;
  }

  .ab-hybrid-lp .ab-role__one p{
    font-size: 18px;
  }
}

#ab-coupon-popup {
  display:none;
}

.wpcf7 {
   border: none!important;
   background: rgba(0, 0, 0, 0)!important;
}

.ab-cf7-form input[type="radio"],
.ab-cf7-form input[type="checkbox"]{
 transform: translateY(1px) !important;
 margin-right: 8px !important;
}

/* CF7：無料設定サポートフォーム見やすさ改善 */
.ab-cf7-form{
 max-width: 860px !important;
 margin: 0 auto !important;
}

.ab-cf7-field{
 margin: 0 0 18px !important;
}

.ab-cf7-label{
 display: block !important;
 font-size: 15px !important;
 line-height: 1.5 !important;
 font-weight: 700 !important;
 letter-spacing: .02em !important;
}

.ab-cf7-badge{
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 margin-left: 8px !important;
 padding: 2px 10px !important;
 border-radius: 999px !important;
 font-size: 12px !important;
 line-height: 1.6 !important;
 font-weight: 700 !important;
 vertical-align: middle !important;
 border: 1px solid rgba(0,0,0,.12) !important;
 background: rgba(0,0,0,.04) !important;
}

.ab-cf7-badge.is-required{
 border-color: rgba(220, 38, 38, .35) !important;
 background: rgba(220, 38, 38, .08) !important;
}

.ab-cf7-badge.is-optional{
 border-color: rgba(2, 132, 199, .35) !important;
 background: rgba(2, 132, 199, .08) !important;
}

.ab-cf7-form .wpcf7-form-control-wrap{
 display: block !important;
 margin-top: 8px !important;
}

.ab-cf7-input,
.ab-cf7-textarea{
 width: 100% !important;
 box-sizing: border-box !important;
 padding: 14px 14px !important;
 font-size: 16px !important;
 line-height: 1.6 !important;
 border-radius: 12px !important;
 border: 1px solid rgba(0,0,0,.18) !important;
 background: #ffffff1c !important;
 outline: none !important;
 transition: border-color .15s ease, box-shadow .15s ease !important;
 color: #ffffff;
}

.ab-cf7-textarea{
 min-height: 140px !important;
 resize: vertical !important;
}

.ab-cf7-input:focus,
.ab-cf7-textarea:focus{
 border-color: rgba(59,130,246,.65) !important;
 box-shadow: 0 0 0 4px rgba(59,130,246,.15) !important;
}

.ab-cf7-form ::placeholder{
 color: rgba(0,0,0,.45) !important;
}

.ab-cf7-hr{
 height: 1px !important;
 background: rgba(0,0,0,.08) !important;
 margin: 22px 0 !important;
}

.ab-cf7-actions{
 margin-top: 22px !important;
}

.ab-cf7-submit{
 width: 100% !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 padding: 14px 18px !important;
 border-radius: 14px !important;
 border: none !important;
 cursor: pointer !important;
 font-size: 16px !important;
 font-weight: 800 !important;
 letter-spacing: .02em !important;
 background: #ff5900 !important;
 color: #fff !important;
}

.ab-cf7-submit:hover{
 opacity: .92 !important;
}

.ab-cf7-submit:active{
 opacity: .85 !important;
}

.ab-cf7-form .wpcf7-not-valid-tip{
 margin-top: 8px !important;
 font-size: 13px !important;
 font-weight: 700 !important;
}

.ab-cf7-form .wpcf7-response-output{
 margin: 18px 0 0 !important;
 padding: 14px 14px !important;
 border-radius: 12px !important;
 font-size: 14px !important;
}

/* スマホ微調整 */
@media (max-width: 980px){
 .ab-cf7-label{ font-size: 14px !important; }
 .ab-cf7-input, .ab-cf7-textarea{ font-size: 16px !important; }
}

.ab-cf7-form select.ab-cf7-radio{
width:100% !important;
box-sizing:border-box !important;
padding:14px 14px !important;
font-size:16px !important;
line-height:1.6 !important;
border-radius:12px !important;
border:1px solid rgba(0,0,0,.18) !important;
background-color:#fff !important;
appearance:none !important;
background-image:linear-gradient(45deg, transparent 50%, rgba(0,0,0,.5) 50%),linear-gradient(135deg, rgba(0,0,0,.5) 50%, transparent 50%) !important;
background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50% !important;
background-size:6px 6px,6px 6px !important;
background-repeat:no-repeat !important;
}
.ab-cf7-form .wpcf7-list-item{
   margin:8px 0 0 !important;
   display:block !important;
   line-height:1.6 !important;
}

.ab-cf7-form .ab-cf7-field + select,.ab-cf7-form .ab-cf7-field + textarea,.ab-cf7-form .ab-cf7-field + .wpcf7-form-control{
margin-bottom:18px !important;
}

.ab-cf7-radio {
 display: flex;
 gap: 16px;
}

.ab-cf7-radio .wpcf7-list-item {
 margin: 0;
 background-color: #ffffff2b !important;
 padding: 14px !important;
 border-radius: 18px !important;
}

.ab-cf7-radio .wpcf7-list-item label {
 display: flex;
 align-items: center;
 gap: 6px;
 cursor: pointer;
}

/* ==========================
  Voice Slider Nav (PC only)
  ========================== */

.ab-hybrid-lp .ab-voice__wrap{
 position: relative;
}

.ab-hybrid-lp .ab-voice__nav{
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 44px;
 height: 44px;
 border-radius: 9999px;
 border: 1px solid rgba(255,255,255,.18);
 background: rgba(0,0,0,.35);
 backdrop-filter: blur(10px);
 cursor: pointer;
 z-index: 5;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

.ab-hybrid-lp .ab-voice__nav--prev{ left: -8px; color: #fff; }
.ab-hybrid-lp .ab-voice__nav--next{ right: -8px; color: #fff; }

.ab-hybrid-lp .ab-voice__navIcon{
 font-size: 26px;
 line-height: 1;
 opacity: .92;
 transform: translateY(-1px);
}

.ab-hybrid-lp .ab-voice__nav:hover{
 background: rgba(0,0,0,.48);
}

.ab-hybrid-lp .ab-voice__nav:active{
 transform: translateY(-50%) scale(.98);
}

/* 端のカードがボタンに隠れないように余白を足す */
.ab-hybrid-lp .ab-voice__viewport{
 padding-left: 18px;
 padding-right: 18px;
}

/* ボタンはPCのみ */
@media (max-width: 980px){
 .ab-hybrid-lp .ab-voice__nav{
   display: none;
 }
 .ab-hybrid-lp .ab-voice__viewport{
   padding-left: 2px;
   padding-right: 2px;
 }
}

/* =========================
  PRICE2（既存HTML専用）
  既存CSSへの干渉を避けるため
  #price2 .ab-price2 だけに限定
========================= */

/* セクション内のヘッドは既存の ab-sec を活かしつつ微調整だけ */
#price2 .ab-oneLine__big{
 margin: 10px 0 0;
 line-height: 1.15;
 letter-spacing: .02em;
}

/* 横スクロール前提のトラック */
#price2 .ab-price2__track{
 max-width: 1100px;
 margin: 0 auto;
 padding: 0 16px;
 display: flex;
 gap: 14px;
 overflow-x: auto;
 overflow-y: hidden;
 -webkit-overflow-scrolling: touch;
 scroll-snap-type: x mandatory;
 scrollbar-width: thin;
}

#price2 .ab-price2__track::-webkit-scrollbar{
 height: 10px;
}
#price2 .ab-price2__track::-webkit-scrollbar-thumb{
 background: rgba(255,255,255,0.22);
 border-radius: 999px;
}
#price2 .ab-price2__track::-webkit-scrollbar-track{
 background: rgba(255,255,255,0.08);
 border-radius: 999px;
}

/* カード：幅を固定して横に並ぶように */
#price2 .ab-price2__card{
 flex: 0 0 230px;
 min-width: 230px;
 padding: 16px 16px 14px;
 border-radius: 18px;
 border: 1px solid rgba(255,255,255,0.14);
 background: rgba(255,255,255,0.06);
 scroll-snap-align: start;
 box-shadow: 0 10px 28px rgba(0,0,0,0.22);
 position: relative;
 overflow: hidden;
}

/* 背景指定（Standard）の inline style を邪魔しない */
#price2 .ab-price2__card[style]{
 border-color: rgba(255,255,255,0.18);
}

/* うっすらハイライト（全カード共通） */
#price2 .ab-price2__card:before{
 content: "";
 position: absolute;
 inset: 0;
 background: radial-gradient(520px 200px at 20% 0%, rgba(98,211,255,0.14), rgba(0,0,0,0));
 pointer-events: none;
}

/* カード内テキスト */
#price2 .ab-price2__name{
 margin: 0 0 6px;
 font-size: 12px;
 letter-spacing: .08em;
 text-transform: uppercase;
 color: rgba(255,255,255,0.78);
}

#price2 .ab-price2__meta{
 margin: 0 0 10px;
 font-size: 13px;
 line-height: 1.4;
 color: rgba(255,255,255,0.72);
}

#price2 .ab-price2__price{
 margin-bottom: 12px!important;
 display: flex;
 align-items: baseline;
 gap: 8px;
 color: rgba(255,255,255,0.92);
 line-height: 1.1;
}

/* 既存HTMLの span style を尊重しつつ、全体の見た目だけ整える */
#price2 .ab-price2__price span{
 font-weight: 900;
 letter-spacing: .01em;
}

/* PCでは5枚を見せたいケースが多いので少し広げる */
@media (min-width: 981px){
 #price2 .ab-price2__card{
   flex-basis: 240px;
   min-width: 240px;
 }
}

/* タブレット */
@media (max-width: 980px){
 #price2 .ab-price2__track{
   gap: 12px;
 }
 #price2 .ab-price2__card{
   flex-basis: 220px;
   min-width: 220px;
 }
}

/* スマホ */
@media (max-width: 520px){
 #price2 .ab-price2__track{
   padding: 0 12px;
 }
 #price2 .ab-price2__card{
   flex-basis: 86%;
   min-width: 86%;
 }
}

.ab-price2__notes {
   margin-top: 30px;
}

/* =========================
  theme対策：price2内の span 改行防止
========================= */
#price2 span{
  display:inline;
  white-space:normal;
}


/* 追記CSS：hybrid_lp.css の末尾にそのまま追加（完全版）
  目的：
  - テーマ影響で span が block 化して改行されるのを price2 内だけで無効化
  - 月額 / 年額トグル表示
  - 初期費用を中央表示
  - 年額表示を「上段：実質20%OFF / 中段：年額（縦書き）+金額+円 / 下段：実質月額」に固定
  - 既存の横スクロールカードUIは壊さない
*/

/* =========================
  theme対策：price2内の span 改行防止
========================= */
#price2 span{
  display:inline;
  white-space:normal;
}

/* 「年額」縦書きやバッジなど、意図的に inline-block/flex を使う要素は個別に上書きする */
#price2 .ab-price2__badge,
#price2 .ab-price2__annualLabel,
#price2 .ab-price2__annualRow,
#price2 .ab-price2__annualAmount{
  display:inline-block;
}

/* =========================
  PRICE2：Billing Toggle + 2段価格表示
========================= */

/* 初期費用（中央） */
#price2 .ab-price2__setup{
  text-align:center;
  margin-top:10px;
}
#price2 .ab-price2__setupNum{
  font-size:50px;
  font-weight:900;
  letter-spacing:0.02em;
}

/* -------------------------
  トグル（透明白 60% + ピル）
------------------------- */
#price2 .ab-billingToggle{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}
#price2 .ab-billingToggle__inner{
  position:relative;
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,0.60);
  backdrop-filter:saturate(1.2) blur(6px);
  -webkit-backdrop-filter:saturate(1.2) blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}
#price2 .ab-billingToggle__btn{
  position:relative;
  z-index:2;
  border:0;
  background:transparent;
  padding:10px 18px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  color:rgba(0,0,0,0.72);
  line-height:1;
}
#price2 .ab-billingToggle__btn.is-active{
  color:rgba(0,0,0,0.92);
}
#price2 .ab-billingToggle__pill{
  position:absolute;
  inset:6px;
  width:calc(50% - 3px);
  border-radius:999px;
  background:rgba(255,255,255,0.95);
  box-shadow:0 8px 18px rgba(0,0,0,0.12);
  transform:translateX(0);
  transition:transform .25s ease;
}
#price2.ab-price2[data-ab-billing="annual"] .ab-billingToggle__pill{
  transform:translateX(calc(100% + 6px));
}
#price2 .ab-billingToggle__note{
  margin:0;
  font-size:14px;
  color:rgba(255,255,255,0.70);
}

/* -------------------------
  価格ブロック：2段表示にする
  既存CSSで #price2 .ab-price2__price が display:flex になっているため上書き
------------------------- */
#price2 .ab-price2__price{
  display:block !important;
  margin:10px 0 12px !important;
  line-height:1.15;
}

/* 共通（フェイド演出） */
#price2 .ab-price2__priceLine{
  transition:opacity .35s ease, transform .35s ease, filter .35s ease;
}
#price2 .ab-price2__priceNum{
  font-size: 28px;
  font-weight:900;
  letter-spacing:.01em;
}

/* 月額行：横並びで安定（/月 の折れを抑止） */
#price2 .ab-price2__priceLine.is-monthly{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
#price2 .ab-price2__priceLine.is-monthly .ab-price2__per{
  white-space:nowrap;
}
#price2 .ab-price2__per{
  font-size:14px;
  opacity:.8;
}

/* -------------------------
  年額行：3段固定
  上段：実質20%OFF
  中段：年額（縦書き） + 金額 + 円
  下段：（実質 月 ◯◯ 円）
  前提HTML：
    .ab-price2__annualRow が存在し
    .ab-price2__annualRow 内に
      .ab-price2__annualLabel（年額）
      .ab-price2__annualAmount（金額+円のラッパー） がある
------------------------- */
#price2 .ab-price2__priceLine.is-annual{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  white-space:normal;
}

/* 上段：バッジ */
#price2 .ab-price2__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  background:rgba(16,185,129,0.15);
  color:rgba(16,185,129,0.95);
  border:1px solid rgba(16,185,129,0.25);
  white-space:nowrap;
}

/* 中段：年額（縦書き） + 金額 + 円 */
#price2 .ab-price2__annualRow{
  display:flex !important;
  align-items:flex-end;
  gap:10px;
  width:100%;
  white-space:nowrap;
  align-items: center;
}

/* 年額（縦書き） */
#price2 .ab-price2__annualLabel{
  display:inline-block !important;
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-weight:900;
  opacity:.92;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
  flex:0 0 auto;
  min-height:40px;
}

/* 金額+円（右寄せにして隠れを防ぐ） */
#price2 .ab-price2__annualAmount{
  display:flex !important;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
}

/* 年額 数値 */
#price2 .ab-price2__priceNum[data-ab-annual-total]{
  font-size:28px;
  font-weight:900;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
  display:inline !important;
}

/* 円 */
#price2 .ab-price2__annualYen{
  font-weight:800;
  opacity:.85;
  white-space:nowrap;
  display:inline !important;
}

/* 下段：補助行 */
#price2 .ab-price2__subLine{
  font-size:13px;
  opacity:.9;
  line-height:1.35;
  white-space:normal;
}

/* -------------------------
  切り替え演出（フェイド）
------------------------- */
#price2 .ab-price2__priceLine.is-annual{
  opacity:0;
  transform:translateY(6px);
  filter:blur(2px);
  height:0;
  overflow:hidden;
}
#price2.ab-price2[data-ab-billing="annual"] .ab-price2__priceLine.is-monthly{
  opacity:0;
  transform:translateY(-6px);
  filter:blur(2px);
  height:0;
  overflow:hidden;
}
#price2.ab-price2[data-ab-billing="annual"] .ab-price2__priceLine.is-annual{
  opacity:1;
  transform:translateY(0);
  filter:none;
  height:auto;
  overflow:visible;
}

/* -------------------------
  画面が狭い時の詰まり対策
------------------------- */
@media (max-width: 520px){
  #price2 .ab-price2__priceNum[data-ab-annual-total]{
    font-size:24px;
  }
  #price2 .ab-price2__annualRow{
    gap:8px;
  }
}