/* =========================
   LP Hero Section
========================= */

.lp-hero {
	position: relative;
	color: #fff;
	background-image: url("https://aijimy.com/wp-content/uploads/2024/03/AIJIMY_top.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* 黒オーバーレイ */
.lp-hero.has-dark-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(13, 13, 13, 0.5);
	z-index: 0;
}

/* 中身を前面に */
.lp-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 20px;
}

/* レイアウト */
.lp-hero__columns {
	align-items: center;
}

/* 左カラム */
.lp-hero__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* 実績バッジ */
.lp-hero__badge {
	font-size: 14px;
	letter-spacing: 0.05em;
}

/* ロゴ */
.lp-hero__logo img {
	max-width: 280px;
	margin: 0 auto;
}

/* タイトル */
.lp-hero__title {
	font-size: clamp(24px, 4vw, 40px);
	line-height: 1.4;
}

/* リード文 */
.lp-hero__lead {
	font-size: 16px;
	line-height: 1.8;
	opacity: 0.95;
}

/* CTA */
.lp-hero__cta {
	gap: 16px;
}

/* ボタン共通 */
.lp-hero__btn .wp-block-button__link {
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 700;
}

/* プライマリ */
.lp-hero__btn--primary .wp-block-button__link {
	background-color: #ffffff;
	color: #0d0d0d;
}

/* セカンダリ */
.lp-hero__btn--secondary .wp-block-button__link {
	background-color: transparent;
	border: 2px solid #ffffff;
	color: #ffffff;
}

/* 注釈 */
.lp-hero__note {
	font-size: 12px;
	opacity: 0.7;
}

/* 右画像 */
.lp-hero__image img {
	width: 100%;
	height: auto;
}

/* =========================
   Responsive
========================= */

@media (max-width: 781px) {
	.lp-hero__inner {
		padding: 40px 16px;
	}

	.lp-hero__title {
		text-align: center;
	}

	.lp-hero__cta {
		justify-content: center;
	}
}
/* =========================
   Logo Section
========================= */

.lp-logo__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 20px;
}

.lp-logo__title {
	margin: 0;
}

/* ロゴ行の余白調整（テーマ依存のgapを上書きしやすい） */
.lp-logo__row {
	margin-bottom: 17px;
}

.lp-logo__row:last-child {
	margin-bottom: 0;
}

/* 各ロゴ枠 */
.lp-logo__item {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 画像を枠内に収める */
.lp-logo__img img {
	width: 100%;
	max-width: 140px;
	height: auto;
	object-fit: contain;
}

/* SP：4列相当（Columnsが縦積みになるテーマ対策として flex-wrap を補助） */
@media (max-width: 781px) {
	.lp-logo__inner {
		padding: 60px 16px;
	}

	/* ここが肝：Columns を “グリッドっぽく” する */
	.lp-logo__row {
		display: flex;
		flex-wrap: wrap;
		gap: 17px;
	}

	.lp-logo__row > .wp-block-column.lp-logo__item {
		flex: 0 0 calc(25% - (17px * 3 / 4));
	}

	.lp-logo__img img {
		max-width: 90px;
	}
}

/* さらに小さい端末：2列に落とす（読みやすさ優先） */
@media (max-width: 480px) {
	.lp-logo__row > .wp-block-column.lp-logo__item {
		flex: 0 0 calc(50% - (17px / 2));
	}
}

/* =========================
   Reason Section
========================= */

.lp-reason-title{
	margin-top: 0px !important;
}

/* =========================
   Pricing Section (LP)
   ========================= */

/* 全体 */
.lp-pricing {
  padding: 72px 0;
}

.lp-pricing__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.lp-pricing__title {
  margin: 0 0 12px;
}

.lp-pricing__subtitle {
  margin: 0;
  color: #667085;
}

/* Columns の余白調整（WP側のデフォルトgapを活かしつつ微調整） */
.lp-pricing__columns {
  margin-top: 8px;
}

/* =========================
   Plan Card
   ========================= */

.lp-plan {
	  display: flex;
  background: #fff;
  border: 1px solid #E6E8EC;
  border-radius: 14px;
  padding: 22px 18px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.06);
  height: 100%;
}

/* “おすすめ” */
.lp-plan--recommended {
  border: 2px solid #F79009;
  box-shadow: 0 10px 28px rgba(247, 144, 9, 0.18);
  position: relative;
}

.lp-plan__badge {
  display: inline-block;
  margin: 0 auto 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #F79009;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

.lp-plan__name {
  margin: 6px 0 12px;
      padding: 0 .1em 0.5em !important;
}

.lp-plan__desc {
  margin: 10px 0 0;
  color: #667085;
}

/* 仕切り線 */
.lp-plan__sep {
  margin: 18px 0;
  border-color: #EEF2F6;
}

.lp-plan__buttons {
  margin-top: auto;
}

@media (max-width: 782px) {
  .lp-plan {
    display: block;
  }
}

/* =========================
   Price line (月額 / 数字 / 円)
   ========================= */

.lp-plan__price {
  margin: 8px 0 0;
}

.lp-price {
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.lp-price__prefix,
.lp-price__unit {
  margin: 0;
  color: #344054;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}

.lp-price__number {
  margin: 0;
  font-weight: 800;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #0B1220;
}

/* 金額の強調（編集者がクラス付け外しで選べる） */
.lp-emphasis {
  color: #175CD3;
}

/* =========================
   Features (1行=1段落ブロック)
   ========================= */

.lp-plan__features {
  margin-top: 6px;
}

/* 行の共通 */
.lp-feature {
  margin: 10px 0;
  padding-left: 26px; /* アイコン分 */
  position: relative;
  color: #0B1220;
  font-size: 15px;
  line-height: 1.45;
}

/* チェック（OK） */
.lp-feature--ok::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #EAF3FF;
  border: 1px solid #B2DDFF;
}

/* 疑似チェックマーク */
.lp-feature--ok::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.62em;
  width: 6px;
  height: 10px;
  border-right: 2px solid #175CD3;
  border-bottom: 2px solid #175CD3;
  transform: rotate(40deg);
}

/* 強調（編集者が行単位で選べる） */
.lp-feature--emphasis {
  font-weight: 800;
  color: #0B1220;
}

.lp-feature--emphasis::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #FFF3E0;
  border: 1px solid #FEC84B;
}

.lp-feature--emphasis::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.62em;
  width: 6px;
  height: 10px;
  border-right: 2px solid #F79009;
  border-bottom: 2px solid #F79009;
  transform: rotate(40deg);
}

/* 無効（disabled） */
.lp-feature--disabled {
  color: #98A2B3;
}

.lp-feature--disabled::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #F2F4F7;
  border: 1px solid #EAECF0;
}

.lp-feature--disabled::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.78em;
  width: 10px;
  height: 0;
  border-top: 2px solid #98A2B3;
  transform: rotate(-10deg);
}

/* =========================
   CTA area
   ========================= */

.lp-pricing__cta {
  text-align: center;
}

.lp-pricing__cta-text {
  margin: 0 0 14px;
  color: #344054;
  font-weight: 600;
}

/* WP button linkに適用 */
.lp-button--primary .wp-block-button__link {
  background: #F79009;
  color: #fff;
  border-radius: 12px;
  padding: 14px 22px;
  font-weight: 800;
  border: 1px solid #F79009;
  box-shadow: 0 10px 20px rgba(247, 144, 9, 0.22);
  text-decoration: none;
}

.lp-button--primary .wp-block-button__link:hover {
  background: #E07E00;
  border-color: #E07E00;
}

/* =========================
   Responsive tweaks
   ========================= */

@media (max-width: 782px) {
  .lp-pricing {
    padding: 56px 0;
  }
  .lp-plan {
    padding: 20px 16px;
  }
  .lp-price__number {
    font-size: 30px;
  }
}

/* =========================
   Billing toggle (monthly/annual)
   ========================= */

/* スイッチ（見た目だけ。実際の切替はセクションクラスで運用） */
.lp-billing-switch {
  gap: 10px;
  margin: 0;
}

.lp-billing-switch .wp-block-button__link {
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid #D0D5DD;
  background: #fff;
  color: #344054;
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.06);
}
/* 月額/年額の出し分け（親クラスで切替） */
.lp-pricing.lp-billing--monthly .lp-price--annual { display: none; }
.lp-pricing.lp-billing--annual  .lp-price--monthly { display: none; }

/* 税抜注記 */
.lp-pricing__note{
  margin: 10px 0 0;
  color: #667085;
  font-size: 13px;
}

/* トグル見た目 */
.lp-billing-switch { gap: 10px; margin: 0; }
.lp-billing-switch .wp-block-button__link{
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid #D0D5DD;
  background: #fff;
  color: #344054;
  box-shadow: 0 6px 16px rgba(16,24,40,.06);
}

/* アクティブ状態（aria-pressed=true を使う） */
.lp-billing-switch .wp-block-button__link[aria-pressed="true"]{
  background: #175CD3;
  border-color: #175CD3;
  color: #fff;
  box-shadow: 0 10px 20px rgba(23,92,211,.18);
}
/* =========================================================
   LP Support Section (Gutenberg core blocks only)
   - Target: .lp-support, .lp-support-card, .lp-support-trust
   ========================================================= */

/* ---- Variables (fallback included) ---- */
:root{
  --lp-primary: var(--primary-color, #2563eb);
  --lp-text: var(--text-color, #111827);
  --lp-muted: #6b7280;
  --lp-bg: #f9fafb;
  --lp-border: #e5e7eb;
  --lp-card-bg: #ffffff;
  --lp-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  --lp-radius: 10px;
}

/* ---- Section ---- */
.lp-support{
  background: var(--lp-bg);
  padding: 72px 0;
}

.lp-support__inner{
  /* テーマによってはコンテナ幅が違うので、
     ここで最大幅を持たせたい場合だけ有効化してください
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 20px;
  */
}

.lp-support__title{
  color: var(--lp-text);
  text-align: center;
  margin: 0 0 12px;
  letter-spacing: 0.02em;
}

.lp-support__subtitle{
  color: var(--lp-muted);
  text-align: center;
  margin: 0;
  line-height: 1.8;
}

/* ---- Grid (Columns) ---- */
.lp-support__grid{
  margin-top: 0; /* spacerで制御する設計 */
  gap: 30px;
}

/* Columns の子要素が縦に伸びるように */
.lp-support__col{
  display: flex;
}

.lp-support-card{
  background: var(--lp-card-bg);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  padding: 28px;
  width: 100%;
  text-align: center;
  position: relative;
  border-top: 4px solid var(--lp-primary);
}

/* Step label */
.lp-support-card__label{
  display: inline-block;
  background: var(--lp-primary);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0 0 14px;
}

/* Icon */
.lp-support-card__icon{
  margin: 0 0 18px;
}

.lp-support-card__icon img{
  height: 80px;
  width: auto;
  display: inline-block;
}

/* Title */
.lp-support-card__title{
  color: var(--lp-text);
  margin: 0 0 12px;
  font-size: 1.15rem;
}

/* Text */
.lp-support-card__text{
  color: var(--lp-muted);
  margin: 0 0 18px;
  text-align: left;
  line-height: 1.9;
  font-size: 0.95rem;
}

/* Link-like button */
.lp-support-card__links{
  justify-content: center;
  margin: 0;
}

/* WP Button base */
.lp-support-card__link .wp-block-button__link{
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Outline style -> text link taste */
.lp-support-card__link.is-style-outline .wp-block-button__link{
  background: transparent;
  color: var(--lp-primary);
  border-color: transparent; /* “リンク風”にする */
  padding: 0;              /* ボタン感を薄める */
}

/* Hover */
.lp-support-card__link .wp-block-button__link:hover{
  transform: translateX(4px);
  text-decoration: underline;
  box-shadow: none;
}

/* Divider area */
.lp-support__divider{
  border-color: var(--lp-border);
  margin: 0;
}

/* ---- Trust badges ---- */
.lp-support-trust{
  text-align: center;
}

.lp-support-trust__text{
  font-weight: 700;
  color: #374151;
  margin: 0 0 18px;
}

/* Badges row */
.lp-support-trust__badges{
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Badge button */
.lp-support-trust__badge .wp-block-button__link{
  background: #fff;
  color: #4b5563;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.lp-support-trust__badge .wp-block-button__link:hover{
  border-color: var(--lp-primary);
  color: var(--lp-primary);
  text-decoration: none;
}

/* ---- Responsive ---- */
@media (max-width: 768px){
  .lp-support{
    padding: 56px 0;
  }

  .lp-support-card{
    padding: 22px;
  }

  .lp-support-card__text{
    font-size: 0.95rem;
  }

  .lp-support-trust__badges{
    flex-direction: column;
    align-items: center;
  }
}