/* ==========================================================================
   Sections
   セクションごとにバナーコメントで区切る。セクションをまたぐセレクタは
   書かない（WordPress テーマ化時に template-parts へそのまま切り出すため）。
   ========================================================================== */


/* ==========================================================================
   01. Site header — Figma 9:313
   ========================================================================== */
.site-header {
  background-color: var(--color-navy);
  padding-block: var(--space-4);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__end {
  display: flex;
  align-items: center;
  gap: var(--space-15);
}

.site-header__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-6);
  height: var(--btn-height);
}

/* グローバルナビ。ここだけ DM Sans / letter-spacing は normal */
.site-nav__list {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.site-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-nav);
  font-size: var(--fs-p2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-p2-medium);
  color: var(--color-white);
  white-space: nowrap;
}

.site-nav__chevron {
  flex: none;
  width: 29px;
  height: 24px;
}


/* ==========================================================================
   02. Hero — Figma 9:102
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-navy);
  padding-block: var(--space-35);
}

/* 背景の波線装飾。Figma では Hero-section 原点から y=192.271px、
   幅 1920 / 高さ 547。#FFE492 の opacity 0.3。 */
.hero__decoration {
  position: absolute;
  top: 192.271px;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  height: 547px;
  pointer-events: none;
  user-select: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

/* コンテンツ幅 1480px のうち、テキスト 656px + 画像 824px（余白なし） */
.hero__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-15);
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  color: var(--color-text-on-dark);
}

.hero__media {
  flex: none;
  width: 824px;
  height: 549px;
  /* Figma 上は実画像ではなく単色のプレースホルダ矩形（Primary/100）。
     実画像が用意でき次第 <img> に差し替える。 */
  background-color: var(--color-primary-100);
}


/* ==========================================================================
   03. Work management — Figma 107:52087
   上下パディング 140px、2 ブロックの間隔 100px。
   ========================================================================== */
.work-management {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
  padding-block: var(--space-35);
  color: var(--color-text);
}

/* 左端の等高線装飾。コンテナ（1480px）の外に出るのでページ左端基準で置く。
   opacity 0.2 と mix-blend-mode:multiply は SVG 側に焼き込み済みなので
   ここで重ねて指定しない。 */
.work-management__contours {
  position: absolute;
  left: 0;
  top: 265px; /* 上パディング 140 + ブロック内オフセット 125 */
  width: 441px;
  height: 449px;
  pointer-events: none;
  user-select: none;
}

/* -- 2 ブロック共通 -------------------------------------------------------- */
.work-block {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

/* Project Management: テキスト 672px + 間隔 60px + 画像 748px = 1480px */
.work-block--pm {
  gap: var(--space-15);
}

/* Work together: イラスト 710px + 間隔 100px + テキスト 670px = 1480px */
.work-block--wt {
  gap: var(--space-25);
}

.work-block__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-15);
}

.work-block__text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
}

/* 見出しに重なる黄色い手書き風の下線。Figma のレイヤー順どおりテキストの背面。 */
.work-block__underline {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.work-block--pm .work-block__underline {
  left: 0;
  top: 39.86%;
  width: 101.09%;
  height: 23.33%;
}

.work-block--wt .work-block__underline {
  left: 31.19%;
  top: 32.46%;
  width: 44.54%;
  height: 16.84%;
}

.work-block__title,
.work-block__lead {
  position: relative;
  z-index: 1;
}

/* Figma 上は実画像ではなく単色のプレースホルダ矩形（Primary/100）。 */
.work-block__media {
  flex: none;
  width: 748px;
  height: 547px;
  background-color: var(--color-primary-100);
}

.work-block__illustration {
  flex: none;
  width: 710px;
  height: 661px;
}


/* ==========================================================================
   04. Use as Extension — Figma 9:1936
   Figma 上のフレーム名は "Customise it to your needs" だが中身は Use as Extension。
   クラス名は内容に合わせている。
   ========================================================================== */
.extension {
  background-color: var(--color-navy);
  padding-block: var(--space-35);
  color: var(--color-text-on-dark);
}

/* テキスト 696px + 間隔 98px + 画像 686px = 1480px */
.extension__inner {
  display: flex;
  align-items: center;
  gap: 98px;
}

.extension__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-15);
}

.extension__text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
}

/* "Extension" の下に敷く黄色い手書き風の線。テキストの背面。 */
.extension__underline {
  position: absolute;
  z-index: 0;
  left: 24.41%;
  top: 37.72%;
  width: 58.8%;
  height: 28.19%;
  pointer-events: none;
  user-select: none;
}

.extension__title,
.extension__lead {
  position: relative;
  z-index: 1;
}

/* Figma 上は実画像ではなく単色のプレースホルダ矩形（Primary/100）。 */
.extension__media {
  flex: none;
  width: 686px;
  height: 479px;
  background-color: var(--color-primary-100);
}


/* ==========================================================================
   05. Customise it to your needs — Figma 9:4454
   画像左 / 見出し右。背景は白（ページ地）。
   ========================================================================== */
.customise {
  padding-block: var(--space-35);
  color: var(--color-text);
}

/* 画像 714px + 間隔 98px + テキスト 668px = 1480px */
.customise__inner {
  display: flex;
  align-items: center;
  gap: 98px;
}

/* Figma 上は実画像ではなく単色のプレースホルダ矩形（Primary/100）。 */
.customise__media {
  flex: none;
  width: 714px;
  height: 532.087px;
  background-color: var(--color-primary-100);
}

.customise__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-15);
}

.customise__text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
}

.customise__underline {
  position: absolute;
  z-index: 0;
  left: -1.64%;
  top: 38.94%;
  width: 96.91%;
  height: 24.23%;
  pointer-events: none;
  user-select: none;
}

.customise__title,
.customise__lead {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   06. Pricing — Figma 9:2149
   見出し + 3 カラムの料金カード。中央カードのみ強調（濃紺・上下パディング 80px）。
   ========================================================================== */
.pricing {
  padding-block: var(--space-35);
  color: var(--color-text);
}

.pricing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-15);
}

.pricing__heading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  text-align: center;
}

.pricing__underline {
  position: absolute;
  z-index: 0;
  left: 49.43%;
  top: 34.86%;
  width: 21.52%;
  height: 17.61%;
  pointer-events: none;
  user-select: none;
}

.pricing__title {
  position: relative;
  z-index: 1;
  width: 100%;
}

.pricing__lead {
  position: relative;
  z-index: 1;
  width: 979px;
}

/* カード 472px × 3 + 間隔 32px × 2 = 1480px */
.pricing__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
}

/* -- 料金カード ------------------------------------------------------------ */
.plan {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 25px;
  padding: var(--space-10) 44px;
  border: 1px solid var(--color-yellow);
  border-radius: 10px;
  background-color: var(--color-white);
}

/* 中央の強調カード。枠線を持たず、上下パディングが 80px と広い。 */
.plan--featured {
  padding-block: 80px;
  border: 0;
  background-color: var(--color-navy);
  color: var(--color-text-on-dark);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
}

.plan__header {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
}

.plan__name {
  font-size: var(--fs-p1);
  line-height: var(--lh-p1-semibold);
  font-weight: var(--fw-semibold);
  letter-spacing: normal; /* Paragraph/P1/Semibold のみ letterSpacing 0 */
}

.plan__price {
  font-size: var(--fs-h4);
  line-height: normal;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}

.plan--featured .plan__price {
  color: var(--color-yellow);
}

.plan__tagline {
  font-size: var(--fs-p2);
  line-height: var(--lh-p2-medium);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
}

.plan__features {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}

.plan__feature {
  display: flex;
  align-items: center;
  gap: 19px;
  width: 100%;
}

/* ノード 18.006px に対し SVG は inset -5.55%（=20.006px）。 */
.plan__icon {
  position: relative;
  flex: none;
  width: 18.006px;
  height: 18.006px;
}

.plan__icon img {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 20.006px;
  height: 20.006px;
  max-width: none;
}

.plan__feature-text {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--fs-p3);
  line-height: var(--lh-p3);
  letter-spacing: var(--tracking-tight);
}

/* 強調カードだけ箇条書きが 18px Medium（他は 16px Regular） */
.plan--featured .plan__feature-text {
  font-size: var(--fs-p2);
  line-height: var(--lh-p2-medium);
  font-weight: var(--fw-medium);
}

.plan__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-10);
  border: 1px solid var(--color-yellow);
  border-radius: var(--radius-btn);
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: var(--fs-p3);
  font-weight: var(--fw-medium);
  line-height: normal;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

.plan--featured .plan__cta {
  border: 0;
  background-color: var(--color-blue);
  color: var(--color-white);
}


/* ==========================================================================
   07. Your work — Figma 9:2297            ※未実装
   08. Your data — Figma 9:2362            ※未実装
   09. Our sponsors — Figma 9:2461         ※未実装
   10. Apps — Figma 9:2521                 ※未実装
   11. Testimonial — Figma 9:4709          ※未実装
   12. Free trial — Figma 9:4780           ※未実装
   13. Footer — Figma 9:2757               ※未実装
   ========================================================================== */