@charset "UTF-8";

/* gmw-asset-001 — ページ固有 (SP: 402px 基準)。gow-asset-001 の色値のみグリーン系へ差替えたバリアント */

:root {
  /* ブランドアクセント: オレンジ → グリーン */
  --color-accent:     #16a34a;                                   /* was var(--color-orange)     */
  --color-accent-rgb: 22, 163, 74;                               /* was var(--color-orange-rgb) */
  --gradient-accent:   linear-gradient(135deg, #4ade80 0%, #15803d 100%); /* 明確な2トーンの緑グラデ */

  /* 背景 */
  --color-section-bg: #fff9ea;   /* tinted セクション 淡オレンジ (黄み寄り) */

  /* CTA ボタンの立体影 — グリーン deep */
  --c-button-shadow:  #166534;   /* was #b84412 */

  /* BoostUp Form step indicator — --color-accent に自動連動 */
  --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);
}


/* LP カード等の box-shadow を外す (CTA / Form / ss-schedule / c-chat__balloon は残す) */
.c-card,
.p-recommend__item,
.p-learn__list,
.p-consultant__scene-img {
  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%;
}

/* FV は 1 枚の全面画像。下に共通 CTA ボタンを配置 */
.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);
}


/* 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);
}


/* Recommend (p-recommend) — 淡オレンジ (白×淡オレンジ交互) */
.p-recommend {
  background-color: var(--color-section-bg);
}

.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: 60%;
  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);}

.p-learn__item {
  position: relative;
  padding-left: var(--space-2xl);
  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));
  /* チェックマーク円 fill: オレンジ #fe612c → グリーン #16a34a */
  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='%2316a34a'/><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);
}


/* Consultant (p-consultant) — 講師紹介 / 淡オレンジ (白×淡オレンジ交互) */
.p-consultant {
  background-color: var(--color-section-bg);
}

.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__card {
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
}

.p-consultant__title {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  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: 6.429rem; /* 90px */
  height: 6.429rem;
  aspect-ratio: 1 / 1;
  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);
}

.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);
}

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

.p-consultant__scene-caption {
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--color-ink);
}

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

.p-consultant__body {
  font-size: var(--font-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink);
}


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


/* Voice (p-voice) — Case を hcw の Voice デザインに変更 (アバター＋属性＋資産＋声) */
.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);
  box-shadow: var(--shadow-md);
}

.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; /* 極小注記 ≒ 9px */
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-500);
}


/* FAQ (p-faq) — リライト版で追加。開閉は asset.js (.p-faq__item) */
.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);
}


/* Seminar Form (p-form) — form.html */
.p-form .c-form__policy p,
.p-form .c-form__policy li {
  text-align: justify;
}