@charset "UTF-8";

/* asset-study-001-f — ページ固有スタイル (SP: 402px 基準) */


/* ブランドアクセント — このLPは紫系 (マネキャリ配色)。:root 上書きで共通コンポーネントも紫に */
:root {
  --color-accent:       #bd4f93;
  --color-accent-rgb:   189, 79, 147;
  --color-accent-deep:  #6a54ab;
  --gradient-accent:     linear-gradient(70deg, #bd4f93, #6a54ab);

  /* CTA ボタンの立体影 — 紫系 deep (透過黒ではなくボタン色に合わせる) */
  --c-button-shadow:    #7a2f60;

  /* .l-section--tinted の背景: 淡い赤紫 (赤紫寄り / 淡さは維持) */
  --color-section-bg:   #fdf4f9;

  /* BoostUp Form step indicator — LP アクセントに連動 (current 強調 / done 薄トーン) */
  --buf-step-current-bg: var(--color-accent);
  --buf-step-done-bg:    color-mix(in srgb, var(--color-accent) 30%, #fff);
  --buf-step-done-fg:    var(--color-accent);
  --buf-step-pending-fg: var(--buf-step-current-bg);
}

/* submit は solid ではなく gradient で (CTA と揃える) */
input[type="submit"].c-form__submit,
button.c-form__submit {
  background: var(--gradient-accent);
}


/* 共通コンポーネントの上書き — フラット基調 (影なし)。c-chat__balloon のみ紫系の淡い影 */
.c-card {
  box-shadow: none;
}

.c-chat__balloon {
  box-shadow: 0 4px 14px rgba(var(--color-accent-rgb), 0.14);
}

.ss-schedule__slot-link {
  box-shadow: none;
}
.ss-schedule__slot-link:hover {
  box-shadow: none;
}
.ss-schedule__slot-link.is-selected,
.ss-schedule__slot-link.is-selected:hover {
  box-shadow: none;
}


/* FV (p-fv) */
.p-fv {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  /* width / max-width / margin-inline は lp-common.css で共通設定済み */
  background-color: var(--color-white);
}

.p-fv__inner {
  position: relative; /* 画像下部に重ねる .c-button-wrap の配置基準 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  width: 100%;
}

.p-fv__catch {
  display: block;
  width: 100%;
  margin: 0;
  line-height: var(--line-height-none);
}

.p-fv__catch img {
  width: 100%;
  height: auto;
}

/* CTA ボタンを画像最下部に重ねる (bottom / padding は画像差替時に微調整) */
.p-fv .c-button-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  padding-inline: var(--mobile-gutter);
}

/* CTAボタン下の参加条件 — FV (画像オーバーレイ) では省スペースのためボタンに寄せる。
   汎用スタイル (font / color / 正の余白) は lp-common.css に定義。 */
.p-fv .c-button-wrap__condition {
  margin-top: calc(var(--space-md) - var(--space-xl));
}


/* Voice (p-voice) — Swiper */
.p-voice__lead {
  font-size: var(--font-base);
  line-height: var(--line-height-relaxed);
  text-align: center;
  color: var(--color-ink);
}

.p-voice__swiper {
  --swiper-navigation-color: var(--color-accent);
  --swiper-navigation-size: 1.714rem;
  width: 100%;
  padding: 0 var(--space-xl);
  position: relative;
}

.p-voice__list {
  width: 100%;
}

.p-voice__item {
  width: 100%;
  height: auto;
}

.p-voice__swiper .swiper-button-prev,
.p-voice__swiper .swiper-button-next {
  width: 2.571rem;
  height: 2.571rem;
  margin-top: calc(var(--space-xl) * -1);
  background-color: var(--color-white);
  border-radius: var(--border-radius-full);
}

.p-voice__swiper .swiper-button-prev::after,
.p-voice__swiper .swiper-button-next::after {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
}

.p-voice__swiper .swiper-button-prev { left: 0; }
.p-voice__swiper .swiper-button-next { right: 0; }

.p-voice__card {
  gap: var(--space-md);
  padding: var(--space-lg);
  border-top-left-radius: var(--border-radius-2xl);
  border-bottom-right-radius: var(--border-radius-2xl);
}

.p-voice__head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
}

.p-voice__avatar {
  flex-shrink: 0;
  width: 4.286rem;
  height: 4.286rem;
  border-radius: var(--border-radius-full);
  object-fit: cover;
}

.p-voice__person {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  font-size: var(--font-sm);
  line-height: var(--line-height-snug);
  color: var(--color-ink);
}

.p-voice__assets {
  display: grid;
  grid-template-columns: 40% 60%;
  row-gap: var(--space-2xs);
  padding: var(--space-md) 0;
  font-size: var(--font-base);
  line-height: var(--line-height-normal);
  border-top: 1px dashed var(--color-accent);
}

.p-voice__assets dt {
  font-weight: var(--font-weight-normal);
  color: var(--color-ink);
}

.p-voice__assets dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  text-align: right;
}

.p-voice__comment {
  font-size: var(--font-sm);
  line-height: var(--line-height-relaxed);
  text-align: justify;
  color: var(--color-ink);
}

.p-voice__note {
  font-size: 0.643rem; /* 他LP(gow/gmw)と統一の極小注記 ≒ 9px */
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-500);
}


/* What (p-what) */
.p-what__catch {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--border-radius-lg);
}

.p-what__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
}

.p-what__closing {
  padding: var(--space-xl) 0;
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  text-align: center;
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
  border-top: 1px dashed var(--color-gray-300);
  border-bottom: 1px dashed var(--color-gray-300);
}


/* Reason (p-consultant) — 講師紹介 */
.p-consultant__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.p-consultant__img--narrow {
  width: 80%;
}

.p-consultant__card {
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  border-top-left-radius: var(--border-radius-2xl);
  border-bottom-right-radius: var(--border-radius-2xl);
}

.p-consultant__lead-img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
}

.p-consultant__title {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--color-accent);
}

.p-consultant__profile {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
}

.p-consultant__avatar {
  flex-shrink: 0;
  width: 7.143rem;   /* 100px */
  height: 7.143rem;
  object-fit: cover;
  border-radius: var(--border-radius-full);
}

.p-consultant__desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}

.p-consultant__qual {
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-accent-deep);
}

.p-consultant__name {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-ink);
}

.p-consultant__label {
  font-size: var(--font-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-ink);
}

.p-consultant__creds {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  font-size: var(--font-sm);
  line-height: var(--line-height-normal);
  color: var(--color-ink);
}

.p-consultant__creds li {
  position: relative;
  padding-left: var(--space-md);
}

.p-consultant__creds li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 0.357rem;
  height: 0.357rem;
  background-color: var(--color-accent);
  border-radius: var(--border-radius-full);
}

.p-consultant__career {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: var(--font-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
}

/* 見出し下の実績注記 (gow と統一) */
.p-consultant__note {
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-relaxed);
  text-align: center;
  color: var(--color-accent);
}

.p-consultant__scene {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  border-top-left-radius: var(--border-radius-2xl);
  border-bottom-right-radius: var(--border-radius-2xl);
}

/* WP エディタが class を落とすケース用に要素セレクタにも適用 */
.p-consultant__scene-caption,
.p-consultant__scene > p {
  margin: 0;
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--color-accent);
}

.p-consultant__scene-img,
.p-consultant__scene > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-md);
}


/* Trouble (p-trouble) — 画像のみなので .l-section の padding を解除 */
.p-trouble.l-section {
  padding: 0;
}

.p-trouble__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}


/* Recommend (p-recommend) */
.p-recommend__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  width: 100%;
}

.p-recommend__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md);
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
}

.p-recommend__img {
  display: block;
  width: 80%;
  max-width: 8.571rem;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.p-recommend__text {
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-relaxed);
  text-align: center;
  color: var(--color-ink);
}


/* Learn (p-learn) */
.p-learn__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  border-top-left-radius: var(--border-radius-2xl);
  border-bottom-right-radius: var(--border-radius-2xl);
}

.p-learn__item {
  position: relative;
  padding-left: var(--space-3xl);   /* アイコン幅 + 余白 */
  font-size: var(--font-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
}

.p-learn__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* アイコン領域を一行分の高さにして縦中央 (line-height に追従) */
  width: 1.429rem;
  height: calc(1em * var(--line-height-relaxed));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%23a96391'/><polyline points='7 12.5 10.5 16 17 8' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: left center;
  background-size: 1.429rem 1.429rem;
  background-repeat: no-repeat;
}

.p-learn__closing {
  padding: var(--space-xl) 0;
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
  text-align: center;
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
  border-top: 1px dashed var(--color-gray-300);
  border-bottom: 1px dashed var(--color-gray-300);
}


/* Service (p-service) — 人生の3つの備え */
.p-service__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  width: 100%;
}

.p-service__item {
  position: relative;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  text-align: center;
  border-top-left-radius: var(--border-radius-2xl);
  border-bottom-right-radius: var(--border-radius-2xl);
}

.p-service__num {
  position: absolute;
  top: calc(var(--space-2xl) * -1);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-en);
  font-size: var(--font-5xl);
  font-weight: var(--font-weight-black);
  line-height: 1;
  color: var(--color-accent);
}

.p-service__title {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
}

.p-service__fig {
  width: 6.429rem;   /* 90px */
  height: 6.429rem;
  margin: 0 auto;
}

.p-service__fig img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--border-radius-full);
  border: 1px solid var(--color-accent);
}

.p-service__item p {
  font-size: var(--font-sm);
  line-height: var(--line-height-relaxed);
  text-align: justify;
  color: var(--color-ink);
}

.p-service__closing {
  padding: var(--space-xl) 0;
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
  text-align: center;
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
  border-top: 1px dashed var(--color-gray-300);
  border-bottom: 1px dashed var(--color-gray-300);
}


/* FAQ (p-faq) */
.p-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.p-faq__item {
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.p-faq__dl { margin: 0; }

.p-faq__dt {
  position: relative;
  padding: var(--space-lg) var(--space-3xl) var(--space-lg) var(--space-5xl);
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-accent);
  cursor: pointer;
}

.p-faq__dt::before {
  content: "Q";
  position: absolute;
  top: 50%;
  left: var(--space-md);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.714rem;
  height: 1.714rem;
  font-size: var(--font-sm);
  color: var(--color-white);
  background-color: var(--color-accent);
  border-radius: var(--border-radius-full);
}

.p-faq__icon {
  position: absolute;
  top: 50%;
  right: var(--space-lg);
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
}

.p-faq__icon::before,
.p-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.143rem;
  background-color: var(--color-accent);
  border-radius: 1px;
}

.p-faq__icon::after {
  transform: rotate(90deg);
  transition: opacity var(--transition-fast);
}

.p-faq__item.is-open .p-faq__icon::after {
  opacity: 0;
}

.p-faq__dd {
  max-height: 0;
  margin: 0;
  padding: 0 var(--space-lg) 0 var(--space-5xl);
  font-size: var(--font-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
  overflow: hidden;
  transition: max-height var(--duration-base) var(--easeOutCubic),
              padding var(--duration-fast) var(--easeOutCubic);
}

.p-faq__item.is-open .p-faq__dd {
  max-height: 32rem;
  padding: var(--space-sm) var(--space-lg) var(--space-lg) var(--space-5xl);
  border-top: 1px solid rgba(var(--color-accent-rgb), 0.15);
}