/* =============================================================================
   queta-lp-swell — Queta LP（SWELL 子テーマ / Gutenberg ブロック版）
   このファイルが functions.php から enqueue される「実体」。
   フロント（.post_content 内）とエディタ iframe の両方で読み込まれる。

   設計メモ:
   - SWELL の :where() ベースのレイアウト規則は詳細度0 → 自前クラスが無印で勝つ。
   - SWELL の .post_content h2/h3/ul/li/table（詳細度0,1,1）に勝つため、
     見出し・リスト・表ルールは「セクション親クラス + 要素クラス」で 0,2,x に上げる。
   - 全幅は alignfull。Hero(cover) だけ inner-container が article_size で絞られるので打ち消す。
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  --color-navy:        #05123d;
  --color-navy-deep:   #040f3d;
  --color-navy-card:   #0a1f59;
  --color-accent:      #1a6bf2;
  --color-accent-mid:  #3366d9;
  --color-badge-text:  #66b2ff;
  --color-body-light:  #bfd1f2;
  --color-body-gray:   #59668c;
  --color-bg-pale:     #f7faff;
  --color-border:      #e0e5f2;
  --color-text-dark:   #0d1a47;
  --color-text-feat:   #d9e5ff;
  --color-white:       #ffffff;

  --sp-section-y:  6rem;
  --pc-section-y:  clamp(6rem, 5.56vw, 8rem);

  --radius-sm:   0.4rem;
  --radius-md:   0.8rem;
  --radius-lg:   1.2rem;
  --radius-xl:   1.6rem;
  --radius-pill: 2rem;
}

/* -----------------------------------------------------------------------------
   1. SWELL 復元（62.5% rem 基準と SWELL 既定文字サイズの両立）
   html を 62.5%（1rem=10px）にしつつ、SWELL の本文・UI が縮まないよう
   body と SWELL のルート変数を 16px 相当に戻す。
   -------------------------------------------------------------------------- */
html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
}
:root {
  --swl-fz--root: 16px;
}

/* 子テーマのフォントを LP と揃える（Inter → 和文フォールバック） */
.p-hero,
.p-section {
  font-family: 'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
    'Noto Sans JP', 'メイリオ', Meiryo, sans-serif;
  line-height: 1.7;
}

/* -----------------------------------------------------------------------------
   2. セクション基盤 / コンテナ / alignfull 調整 / post_content 余白の中和
   -------------------------------------------------------------------------- */

/* セクション間の隙間を消す（SWELL: .post_content>*{margin-bottom:2em}）。
   フロント（post_content 直下）とエディタ（block gap）の両方を中和。 */
.post_content > .p-hero,
.post_content > .p-section {
  margin-top: 0;
  margin-bottom: 0;
}
.p-hero,
.p-section {
  margin-block: 0;
}

/* 全幅セクションの縦パディング（デフォルト） */
.p-section {
  padding-block: var(--sp-section-y);
}
@media (min-width: 768px) {
  .p-section {
    padding-block: var(--pc-section-y);
  }
}

/* 中央寄せの内側コンテナ（最大 1440px） */
.l-container {
  width: 100%;
  max-width: 144rem;
  margin-inline: auto;
  padding-inline: 2rem;
}
@media (min-width: 768px) {
  .l-container {
    padding-inline: clamp(3rem, 8%, 12rem);
  }
}

/* Hero(cover) の inner-container を SWELL の article_size 制限から解放 */
.p-hero > .wp-block-cover__inner-container {
  max-width: none;
}
.p-hero > .wp-block-cover__inner-container > * {
  margin-bottom: 0;
}

/* 自前見出しから SWELL の装飾（背景・枠・擬似要素）を剥がす */
.p-hero .wp-block-heading,
.p-section .wp-block-heading {
  background: none;
  border: none;
  padding: 0;
}
.p-hero .wp-block-heading::before,
.p-section .wp-block-heading::before,
.p-hero .wp-block-heading::after,
.p-section .wp-block-heading::after {
  content: none;
  display: none;
}

/* -----------------------------------------------------------------------------
   3. ボタン（wp:button のラッパに c-btn 系 className、装飾は内側のリンクへ）
   -------------------------------------------------------------------------- */
.c-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem 3.2rem;
  border-radius: 9999px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4;
  transition: opacity 0.2s, background-color 0.2s;
  white-space: nowrap;
}
.c-btn .wp-block-button__link:hover {
  opacity: 0.88;
}
.c-btn--primary .wp-block-button__link {
  background-color: var(--color-accent);
  color: var(--color-white);
  border: none;
}
.c-btn--outline-white .wp-block-button__link {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--color-white);
}
.c-btn--outline-dark .wp-block-button__link {
  background-color: transparent;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
}
@media (min-width: 768px) {
  .c-btn--outline-dark .wp-block-button__link {
    border: 1px solid var(--color-border);
    color: var(--color-text-dark);
  }
}
.c-btn--white-blue .wp-block-button__link {
  background-color: var(--color-white);
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
}
.c-btn--sm .wp-block-button__link {
  padding: 1.2rem 2.4rem;
  font-size: 1.4rem;
}
.c-btn--lg .wp-block-button__link {
  padding: 1.8rem 4.8rem;
  font-size: 1.7rem;
}

/* -----------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
.p-hero {
  min-height: 73.3rem;
  padding-block: 4.8rem;
  display: flex;
  align-items: center;
  color: var(--color-white);
}
.p-hero.wp-block-cover {
  border-radius: 0;
}
@media (min-width: 880px) {
  .p-hero {
    min-height: 58rem;
    padding-block: 6rem;
  }
}

.p-hero__inner.wp-block-columns {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  align-items: stretch;
  margin-block: 0;
}
@media (min-width: 880px) {
  .p-hero__inner.wp-block-columns {
    flex-direction: row;
    align-items: center;
    gap: 6rem;
  }
  .p-hero__inner > .wp-block-column.p-hero__left {
    flex: 1 1 0% !important;
  }
  .p-hero__inner > .wp-block-column.p-hero__right {
    flex: 0 1 56rem !important;
    min-width: 0;
  }
}
@media (max-width: 879px) {
  .p-hero__inner > .wp-block-column {
    flex-basis: auto !important;
  }
}

.p-hero__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4rem;
}
.p-hero__badge.c-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1.2rem;
  background-color: rgba(26, 107, 242, 0.25);
  color: var(--color-badge-text);
  font-size: 1.2rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
}
.p-hero .p-hero__heading {
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  margin: 0;
}
@media (min-width: 880px) {
  .p-hero .p-hero__heading {
    font-size: clamp(3.6rem, 3.89vw, 5.6rem);
  }
}
.p-hero__lead {
  font-size: 1.4rem;
  color: var(--color-body-light);
  line-height: 1.7;
  margin: 0;
}
@media (min-width: 880px) {
  .p-hero__lead {
    font-size: 1.5rem;
  }
}
.p-hero__cta-row.wp-block-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
}
.p-hero__cta-row .wp-block-button {
  width: 28rem;
  max-width: 100%;
}
.p-hero__cta-row .wp-block-button__link {
  width: 100%;
}
@media (min-width: 880px) {
  .p-hero__cta-row.wp-block-buttons {
    flex-direction: row;
    gap: 1.6rem;
    width: auto;
  }
  .p-hero__cta-row .wp-block-button {
    width: auto;
  }
}

/* -----------------------------------------------------------------------------
   5. セクションヘッダ（eyebrow + 見出し）
   -------------------------------------------------------------------------- */
.c-section-header.wp-block-group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
  text-align: center;
  margin-bottom: 3.2rem;
}
@media (min-width: 768px) {
  .c-section-header.wp-block-group {
    gap: 1.2rem;
    margin-bottom: 5.6rem;
  }
}
.c-section-header__en {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.2em;
  margin: 0;
}
@media (min-width: 768px) {
  .c-section-header__en {
    font-size: 1.3rem;
  }
}
.c-section-header .c-section-header__ja {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin: 0;
}
@media (min-width: 768px) {
  .c-section-header .c-section-header__ja {
    font-size: clamp(2.6rem, 2.22vw, 3.2rem);
  }
}
/* plain 見出し（eyebrow なし） */
.p-problem .c-section-heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-text-dark);
  text-align: center;
  margin: 0 0 3.2rem;
}
@media (min-width: 768px) {
  .p-problem .c-section-heading {
    font-size: clamp(2.2rem, 2.22vw, 3.2rem);
    margin-bottom: clamp(3.2rem, 3.33vw, 4.8rem);
  }
}

/* -----------------------------------------------------------------------------
   6. Problem
   -------------------------------------------------------------------------- */
.p-problem {
  background-color: var(--color-bg-pale);
}
.p-problem__grid.wp-block-columns {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-block: 0;
}
@media (min-width: 768px) {
  .p-problem__grid.wp-block-columns {
    flex-direction: row;
    gap: clamp(1.6rem, 1.67vw, 2.4rem);
  }
  .p-problem__grid > .wp-block-column {
    flex: 1 1 0% !important;
    min-width: 0;
  }
}
.c-card.wp-block-column {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 0.4rem 1.6rem rgba(13, 26, 71, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
@media (min-width: 768px) {
  .c-card.wp-block-column {
    padding: 3.6rem 3.2rem;
    gap: 1.6rem;
  }
}
.c-card.wp-block-column:hover {
  transform: translateY(-6px);
  box-shadow: 0 0.8rem 3.2rem rgba(13, 26, 71, 0.14);
}
.c-card__icon-img.wp-block-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12rem;
  height: 12rem;
  flex-shrink: 0;
  background-color: #e5edff;
  border-radius: 2.4rem;
  margin: 0;
}
@media (min-width: 768px) {
  .c-card__icon-img.wp-block-image {
    width: clamp(12rem, 11.11vw, 16rem);
    height: clamp(12rem, 11.11vw, 16rem);
    border-radius: clamp(2.4rem, 2.36vw, 3.4rem);
  }
}
.c-card__icon-img img {
  width: 10rem;
  height: 10rem;
  object-fit: cover;
  border-radius: 1.6rem;
}
@media (min-width: 768px) {
  .c-card__icon-img img {
    width: clamp(10rem, 10.28vw, 14.8rem);
    height: clamp(10rem, 10.28vw, 14.8rem);
    border-radius: clamp(1.6rem, 1.39vw, 2rem);
  }
}
.c-card .c-card__title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-text-dark);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}
@media (min-width: 768px) {
  .c-card .c-card__title {
    font-size: 1.8rem;
  }
}
.c-card__body {
  font-size: 1.3rem;
  color: var(--color-body-gray);
  text-align: center;
  line-height: 1.7;
  margin: 0;
}
@media (min-width: 768px) {
  .c-card__body {
    font-size: 1.4rem;
  }
}

/* -----------------------------------------------------------------------------
   7. Strengths
   -------------------------------------------------------------------------- */
.p-strengths {
  background-color: var(--color-white);
}
.p-strengths__grid.wp-block-columns {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin-block: 0;
}
@media (min-width: 768px) {
  .p-strengths__grid.wp-block-columns {
    flex-direction: row;
    gap: clamp(1.6rem, 2.22vw, 3.2rem);
  }
  .p-strengths__grid > .wp-block-column {
    flex: 1 1 0% !important;
    min-width: 0;
  }
}
.c-strength-card.wp-block-column {
  background-color: var(--color-bg-pale);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2.4rem 2.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (min-width: 768px) {
  .c-strength-card.wp-block-column {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: 0 0.4rem 1.6rem rgba(13, 26, 71, 0.08);
    padding: 4rem 3.6rem;
    gap: 2rem;
  }
}
.c-strength-card.wp-block-column:hover {
  transform: translateY(-6px);
  box-shadow: 0 0.8rem 3.2rem rgba(13, 26, 71, 0.14);
}
.c-strength-card__num-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  background-color: var(--color-accent);
  border-radius: 1.8rem;
  color: var(--color-white);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}
@media (min-width: 768px) {
  .c-strength-card__num-badge {
    width: 4.8rem;
    height: 4.8rem;
    background-color: rgba(26, 107, 242, 0.2);
    border-radius: 2.4rem;
    color: var(--color-accent);
    font-size: 1.6rem;
  }
}
.c-strength-card .c-strength-card__title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-text-dark);
  line-height: 1.5;
  margin: 0;
}
@media (min-width: 768px) {
  .c-strength-card .c-strength-card__title {
    font-size: 2rem;
  }
}
.c-strength-card__body {
  font-size: 1.3rem;
  color: var(--color-body-gray);
  line-height: 1.7;
  margin: 0;
}
@media (min-width: 768px) {
  .c-strength-card__body {
    font-size: 1.4rem;
  }
}

/* -----------------------------------------------------------------------------
   8. About（Vyondとは）
   -------------------------------------------------------------------------- */
.p-about {
  background-color: var(--color-navy-deep);
  background-image: linear-gradient(rgba(4, 15, 61, 0.8), rgba(4, 15, 61, 0.8)), url('../images/hero-bg.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.p-about__inner.wp-block-columns {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  align-items: stretch;
  margin-block: 0;
}
@media (min-width: 1000px) {
  .p-about__inner.wp-block-columns {
    flex-direction: row;
    align-items: center;
    gap: clamp(3.2rem, 5.56vw, 8rem);
  }
  .p-about__inner > .wp-block-column.p-about__video {
    flex: 0 1 60rem !important;
    min-width: 0;
    margin-top: 4rem;
  }
  .p-about__inner > .wp-block-column.p-about__text {
    flex: 1 1 0% !important;
    max-width: 56rem;
  }
}
.p-about__text {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
@media (min-width: 1000px) {
  .p-about__text {
    gap: 2rem;
  }
}
.p-about__label.c-label-tag {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-badge-text);
  letter-spacing: 0.2em;
  margin: 0;
}
@media (min-width: 1000px) {
  .p-about__label.c-label-tag {
    font-size: 1.3rem;
  }
}
.p-about .p-about__heading {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.5;
  margin: 0;
}
@media (min-width: 1000px) {
  .p-about .p-about__heading {
    font-size: clamp(2.4rem, 2.22vw, 3.2rem);
  }
}
.p-about__desc {
  font-size: 1.3rem;
  color: var(--color-body-light);
  line-height: 1.7;
  margin: 0;
}
@media (min-width: 1000px) {
  .p-about__desc {
    font-size: 1.5rem;
  }
}
.p-about .p-about__features {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 0;
}
.p-about .p-about__features li {
  position: relative;
  padding-left: 1.8rem;
  font-size: 1.3rem;
  color: var(--color-text-feat);
  line-height: 1.6;
  margin: 0;
}
@media (min-width: 1000px) {
  .p-about .p-about__features li {
    font-size: 1.4rem;
  }
}
.p-about .p-about__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.8rem;
  height: 0.8rem;
  background-color: var(--color-accent);
  border-radius: 0.4rem;
}

/* About の動画（自動再生ループ）— プレースホルダー c-video-ph を <video> に差し替え */
.p-about .p-about__video-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background-color: #0a1840;
}

/* -----------------------------------------------------------------------------
   9. Stats
   -------------------------------------------------------------------------- */
.p-stats {
  background-color: var(--color-navy-deep);
  background-image: linear-gradient(rgba(4, 15, 61, 0.8), rgba(4, 15, 61, 0.8)), url('../images/hero-bg.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.p-stats .p-stats__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-white);
  text-align: center;
  margin: 0 0 3.2rem;
}
@media (min-width: 915px) {
  .p-stats .p-stats__heading {
    font-size: clamp(2rem, 1.94vw, 2.8rem);
    margin-bottom: clamp(3.2rem, 3.33vw, 4.8rem);
  }
}
.p-stats .p-stats__heading br {
  display: inline;
}
@media (min-width: 915px) {
  .p-stats .p-stats__heading br {
    display: none;
  }
}
.p-stats__desc {
  color: var(--color-body-light);
  text-align: center;
  font-size: 1.5rem;
  line-height: 2;
  margin: 0 0 3.2rem;
}
@media (min-width: 915px) {
  .p-stats__desc {
    font-size: 1.6rem;
    margin-bottom: clamp(3.2rem, 3.33vw, 4.8rem);
  }
}
.p-stats__row.wp-block-columns {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2.4rem;
  margin-block: 0;
}
@media (min-width: 915px) {
  .p-stats__row.wp-block-columns {
    flex-direction: row;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
  }
  .p-stats__row > .wp-block-column {
    flex: 1 1 0% !important;
    min-width: 0;
  }
}
.p-stats__item.wp-block-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 2.4rem 2rem;
  background-color: var(--color-navy-card);
  border-radius: var(--radius-md);
  position: relative;
}
@media (min-width: 915px) {
  .p-stats__item.wp-block-column {
    background-color: transparent;
    border-radius: 0;
    padding: 2rem clamp(1.6rem, 2.78vw, 4rem);
  }
  /* 区切り線（2・3番目の左に縦線） */
  .p-stats__row > .wp-block-column.p-stats__item + .p-stats__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.2rem;
    height: 10rem;
    background-color: rgba(255, 255, 255, 0.4);
  }
}
.p-stats__number {
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
  margin: 0;
}
@media (min-width: 915px) {
  .p-stats__number {
    font-size: clamp(3.6rem, 4.17vw, 6rem);
    color: var(--color-badge-text);
  }
}
.p-stats__number-sub {
  font-size: 2.4rem;
  font-weight: 700;
  margin-left: 0.2rem;
}
@media (min-width: 915px) {
  .p-stats__number-sub {
    font-size: clamp(2.4rem, 1.94vw, 2.8rem);
  }
}
.p-stats__label {
  font-size: 1.3rem;
  color: var(--color-body-light);
  margin: 0;
}
@media (min-width: 915px) {
  .p-stats__label {
    font-size: 1.5rem;
  }
}

/* -----------------------------------------------------------------------------
   10. Clients
   -------------------------------------------------------------------------- */
.p-clients {
  background-color: var(--color-bg-pale);
  padding-block: 4rem;
}
.p-clients__heading {
  font-size: 1.2rem;
  color: var(--color-body-gray);
  text-align: center;
  margin: 0 0 2rem;
}
@media (min-width: 768px) {
  .p-clients__heading {
    font-size: 1.4rem;
    margin-bottom: 3.2rem;
  }
}
.p-clients__logos.wp-block-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1.6rem;
}
@media (min-width: 768px) {
  .p-clients__logos.wp-block-group {
    gap: 0 3.2rem;
  }
}
.c-logo-badge {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  padding: 0.8rem 1.2rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-dark);
  text-align: center;
  white-space: nowrap;
  margin: 0;
}
@media (min-width: 768px) {
  .c-logo-badge {
    padding: 1.2rem 2.4rem;
    font-size: 1.4rem;
    border-radius: 0;
    border: none;
    background-color: transparent;
  }
}

/* -----------------------------------------------------------------------------
   11. Works
   -------------------------------------------------------------------------- */
.p-works {
  background-color: var(--color-white);
}
.p-works__lead {
  font-size: 1.3rem;
  color: var(--color-body-gray);
  text-align: center;
  margin: 0 0 0.8rem;
}
@media (min-width: 768px) {
  .p-works__lead {
    display: none;
  }
}
.p-works__grid.wp-block-group {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 768px) {
  .p-works__grid.wp-block-group {
    gap: clamp(1.6rem, 1.67vw, 2.4rem);
  }
}
.p-works__row.wp-block-columns {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 2rem;
  margin-block: 0;
}
@media (min-width: 768px) {
  .p-works__row.wp-block-columns {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: clamp(1.6rem, 1.67vw, 2.4rem);
  }
}
/* <768: コア/SWELL の列ブレークポイント(≤781 で flex-basis:100% 等・SWELL は 600px 付近)に
   依存せず縦積み＋カード全幅を !important で固定。これを怠ると 600〜768px で列が横並びに
   崩れ、カードが潰れて説明テキスト(c-work-card__desc)が見えなくなる */
@media (max-width: 767px) {
  .p-works__row.wp-block-columns {
    flex-direction: column !important;
  }
  .p-works__row > .wp-block-column {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
  }
}
@media (min-width: 768px) {
  .p-works__row > .wp-block-column {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0;
  }
}
.c-work-card.wp-block-column {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.c-work-card.wp-block-column:hover {
  transform: translateY(-6px);
  box-shadow: 0 0.8rem 3.2rem rgba(13, 26, 71, 0.12);
}
.c-work-card__thumb.wp-block-image {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #d0daf0;
  overflow: hidden;
}
.c-work-card__thumb a,
.c-work-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
}
.c-work-card__thumb img {
  object-fit: cover;
  transition: transform 0.3s ease;
}
.c-work-card__thumb:hover img {
  transform: scale(1.04);
}
/* SWELL の .wp-block-image img / :after を打ち消す（白背景・枠・clearfix の visibility:hidden）*/
.p-works .c-work-card__thumb img {
  border: none;
  background: none;
  border-radius: 0;
}
/* 再生ボタン（赤丸 + 白三角）。.p-works スコープで SWELL の .wp-block-image:after に詳細度で勝つ */
.p-works .c-work-card__thumb::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5.6rem;
  height: 5.6rem;
  background-color: rgba(255, 0, 0, 0.85);
  border-radius: 50%;
  visibility: visible;
  z-index: 1;
  transition: background-color 0.2s, transform 0.2s;
  pointer-events: none;
}
.p-works .c-work-card__thumb::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-left: 0.4rem;
  width: 0;
  height: 0;
  /* SWELL clearfix の height:0 / visibility:hidden を上書き */
  visibility: visible;
  clear: none;
  border-style: solid;
  border-width: 0.9rem 0 0.9rem 1.6rem;
  border-color: transparent transparent transparent #ffffff;
  z-index: 2;
  pointer-events: none;
}
.p-works .c-work-card__thumb:hover::before {
  background-color: rgba(255, 0, 0, 1);
  transform: translate(-50%, -50%) scale(1.1);
}
.c-work-card .c-work-card__title {
  padding: 1.2rem 1.6rem 0.4rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-text-dark);
  line-height: 1.4;
  margin: 0;
}
@media (min-width: 768px) {
  .c-work-card .c-work-card__title {
    font-size: 1.5rem;
  }
}
.c-work-card__desc {
  padding: 0 1.6rem 1.6rem;
  font-size: 1.3rem;
  color: var(--color-body-gray);
  line-height: 1.6;
  margin: 0;
}
@media (min-width: 768px) {
  .c-work-card__desc {
    font-size: 1.4rem;
  }
}
.p-works__btn-wrap.wp-block-buttons {
  display: flex;
  justify-content: center;
  margin-top: 3.2rem;
}
@media (min-width: 768px) {
  .p-works__btn-wrap.wp-block-buttons {
    margin-top: 4rem;
  }
}
@media (max-width: 767px) {
  .p-works__btn-wrap .wp-block-button {
    width: 28rem;
    max-width: 100%;
  }
  .p-works__btn-wrap .wp-block-button__link {
    width: 100%;
  }
}

/* -----------------------------------------------------------------------------
   12. Pricing
   -------------------------------------------------------------------------- */
.p-pricing {
  background-color: var(--color-white);
}
.p-pricing__cards.wp-block-columns {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin-block: 0;
}
@media (min-width: 768px) {
  .p-pricing__cards.wp-block-columns {
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(1.6rem, 1.67vw, 2.4rem);
    align-items: flex-start;
  }
  .p-pricing__cards > .wp-block-column {
    flex: 1 1 24rem !important;
    min-width: 0;
    max-width: 37.3rem;
  }
}
.c-plan-card.wp-block-column {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  padding: 3.2rem 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.c-plan-card.wp-block-column:hover {
  transform: translateY(-6px);
  box-shadow: 0 0.8rem 3.2rem rgba(13, 26, 71, 0.12);
}
.c-plan-card--highlight.wp-block-column {
  border: 2px solid var(--color-accent);
  box-shadow: 0 0.4rem 2rem rgba(26, 107, 242, 0.12);
}
.c-plan-card__name {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-dark);
  text-align: center;
  margin: 0;
}
@media (min-width: 768px) {
  .c-plan-card__name {
    font-size: 2.2rem;
  }
}
.c-plan-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.4rem;
  background-color: var(--color-accent-mid);
  color: var(--color-body-light);
  font-size: 1.3rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  margin: 0;
}
@media (min-width: 768px) {
  .c-plan-card__badge {
    font-size: 1.6rem;
  }
}
.c-plan-card__catch {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-body-gray);
  text-align: center;
  line-height: 1.6;
  margin: 0;
}
@media (min-width: 768px) {
  .c-plan-card__catch {
    font-size: 1.4rem;
  }
}
.c-plan-card__price {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--color-text-dark);
  text-align: center;
  margin: 0;
}
@media (min-width: 768px) {
  .c-plan-card__price {
    font-size: 3.2rem;
  }
}
.c-plan-card__tax {
  font-size: 1.2rem;
  color: var(--color-body-gray);
  text-align: center;
  margin: 0;
}
@media (min-width: 768px) {
  .c-plan-card__tax {
    font-size: 1.3rem;
  }
}
.c-plan-card__divider.wp-block-separator {
  border: none;
  border-top: 1px solid var(--color-border);
  width: 100%;
  margin: 0;
  opacity: 1;
}
.c-plan-card .c-plan-card__features {
  width: 100%;
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
}
/* SP(≤767px) はリストのかたまりをカード中央へ寄せる（内容幅 + margin:auto で中央配置・項目は左揃えのまま） */
@media (max-width: 767px) {
  .c-plan-card .c-plan-card__features {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
}
.c-plan-card .c-plan-card__features li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1.3rem;
  color: var(--color-text-dark);
  line-height: 1.5;
  margin: 0;
}
@media (min-width: 768px) {
  .c-plan-card .c-plan-card__features li {
    font-size: 1.4rem;
  }
}
.c-plan-card .c-plan-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 0.6rem;
  height: 0.6rem;
  background-color: #4d99ff;
  border-radius: 0.3rem;
}
.c-plan-card__meta {
  font-size: 1.1rem;
  color: var(--color-body-gray);
  text-align: center;
  margin: 0;
}
@media (min-width: 768px) {
  .c-plan-card__meta {
    font-size: 1.2rem;
  }
}
.c-plan-card__cta-wrap.wp-block-buttons {
  width: 100%;
  display: flex;
  justify-content: center;
}
.c-plan-card__cta-wrap .wp-block-button {
  width: min(26rem, 100%);
}
.c-plan-card__cta-wrap .wp-block-button__link {
  width: 100%;
  padding: 1.4rem 3.2rem;
  font-size: 1.5rem;
}

/* Option block */
.p-pricing__option-block.wp-block-group {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 100%;
}
@media (min-width: 768px) {
  .p-pricing__option-block.wp-block-group {
    margin-top: 5.6rem;
    max-width: 60rem;
    margin-inline: auto;
  }
}
.p-pricing__option-title-row.wp-block-group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.6rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.6rem;
}
.p-pricing .p-pricing__option-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin: 0;
}
@media (min-width: 768px) {
  .p-pricing .p-pricing__option-title {
    font-size: 2.4rem;
  }
}
.p-pricing__option-note {
  font-size: 1.1rem;
  color: var(--color-body-gray);
  white-space: nowrap;
  margin: 0;
}
@media (min-width: 768px) {
  .p-pricing__option-note {
    font-size: 1.3rem;
  }
}
.p-pricing__option-table.wp-block-table {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.p-pricing__option-table table {
  width: 100%;
  border-collapse: collapse;
}
.p-pricing__option-table thead th {
  padding: 1.4rem 1.6rem;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: 1.3rem;
  font-weight: 600;
  text-align: left;
  border: none;
}
.p-pricing__option-table thead th:last-child {
  text-align: right;
}
.p-pricing__option-table tbody td {
  padding: 1.4rem 1.6rem;
  color: var(--color-text-dark);
  font-size: 1.3rem;
  background-color: var(--color-white);
  border: none;
}
.p-pricing__option-table tbody td:last-child {
  text-align: right;
}
.p-pricing__option-table tbody tr:nth-child(odd) td {
  background-color: var(--color-bg-pale);
}
@media (min-width: 768px) {
  .p-pricing__option-table thead th,
  .p-pricing__option-table tbody td {
    padding: 1.7rem 2.4rem;
    font-size: 1.4rem;
  }
}

/* -----------------------------------------------------------------------------
   13. Flow
   -------------------------------------------------------------------------- */
.p-flow {
  background-color: var(--color-bg-pale);
}
.p-flow__steps.wp-block-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 1.2rem;
}
@media (min-width: 1000px) {
  .p-flow__steps.wp-block-group {
    flex-direction: row;
    align-items: stretch;
    gap: 2.4rem;
  }
  /* ステップ間の矢印（最後以外のカード右側のギャップに絶対配置）*/
  .p-flow__steps > .c-step-card:not(:last-child)::after {
    content: '\203A';
    position: absolute;
    right: -1.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-accent);
    font-size: 2.4rem;
    line-height: 1;
    pointer-events: none;
  }
}
/* SP: num を左、title/body を右に縦積み（静的版 __text ラッパー相当を Grid で再現）*/
.c-step-card.wp-block-group {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 0.4rem 1.6rem rgba(13, 26, 77, 0.07);
  padding: 1.6rem 2rem;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.6rem;
  row-gap: 0.4rem;
  align-items: center;
  width: 100%;
  min-height: 10rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.c-step-card.wp-block-group > .c-step-card__num {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}
.c-step-card.wp-block-group > .c-step-card__title {
  grid-column: 2;
  align-self: end;
}
.c-step-card.wp-block-group > .c-step-card__body {
  grid-column: 2;
  align-self: start;
}
@media (min-width: 1000px) {
  .c-step-card.wp-block-group {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 21.7rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
    padding: 3.2rem 2.4rem;
    border-radius: var(--radius-lg);
  }
  .c-step-card.wp-block-group > .c-step-card__num,
  .c-step-card.wp-block-group > .c-step-card__title,
  .c-step-card.wp-block-group > .c-step-card__body {
    grid-column: auto;
    grid-row: auto;
  }
}
.c-step-card.wp-block-group:hover {
  transform: translateY(-0.6rem);
  box-shadow: 0 1.2rem 3.2rem rgba(13, 26, 77, 0.14);
}
.c-step-card__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  background-color: var(--color-accent);
  border-radius: 1.8rem;
  color: var(--color-white);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}
@media (min-width: 1000px) {
  .c-step-card__num {
    width: 4rem;
    height: 4rem;
    border-radius: 2rem;
    font-size: 1.4rem;
  }
}
.c-step-card .c-step-card__title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-text-dark);
  margin: 0;
}
.c-step-card__body {
  font-size: 1.2rem;
  color: var(--color-body-gray);
  line-height: 1.7;
  margin: 0;
}
@media (min-width: 1000px) {
  .c-step-card__body {
    font-size: 1.3rem;
  }
}

/* -----------------------------------------------------------------------------
   14. FAQ（wp:details = ネイティブ accordion）
   -------------------------------------------------------------------------- */
.p-faq {
  background-color: var(--color-white);
}
@media (min-width: 768px) {
  .p-faq .l-container {
    max-width: 80rem;
  }
}
.p-faq .c-label-tag--center {
  display: block;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.2em;
  margin: 0;
}
@media (min-width: 768px) {
  .p-faq .c-label-tag--center {
    font-size: 1.3rem;
  }
}
.p-faq .p-faq__heading {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-text-dark);
  text-align: center;
  margin: 0.8rem 0 3.2rem;
}
@media (min-width: 768px) {
  .p-faq .p-faq__heading {
    font-size: clamp(2.4rem, 2.22vw, 3.2rem);
    margin-bottom: clamp(3.2rem, 2.78vw, 4rem);
  }
}
.p-faq__list.wp-block-group {
  display: flex;
  flex-direction: column;
}
.c-faq-item.wp-block-details {
  border-bottom: 1px solid var(--color-border);
  --wp--style--block-gap: 0;
}
/* CSS Grid 方式のスムーズ開閉（JS が回答を .c-faq-item__a-wrap で包む）。
   回答ラッパだけを 1 行グリッドにして 0fr⇄1fr。summary はグリッド外
   （auto 行と fr 行を混在させると 0fr が 0 に潰れないため）。 */
.c-faq-item__a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .c-faq-item__a-wrap {
    transition: none;
  }
}
.c-faq-item.is-open .c-faq-item__a-wrap {
  grid-template-rows: 1fr;
}
.c-faq-item__a-inner {
  overflow: hidden;
  min-height: 0;
}
.c-faq-item__q {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-block: 2rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  position: relative;
}
@media (min-width: 768px) {
  .c-faq-item__q {
    padding-block: 2.4rem;
  }
}
.c-faq-item__q::-webkit-details-marker {
  display: none;
}
/* Q バッジ */
.c-faq-item__q::before {
  content: 'Q';
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  background-color: var(--color-accent);
  border-radius: 1.4rem;
  color: var(--color-white);
  font-size: 1.3rem;
  font-weight: 700;
}
.c-faq-item__q-text {
  flex: 1;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-dark);
  line-height: 1.5;
  transition: color 0.2s;
}
@media (min-width: 768px) {
  .c-faq-item__q-text {
    font-size: 1.6rem;
  }
}
.c-faq-item__q:hover .c-faq-item__q-text {
  color: var(--color-accent);
}
/* 開閉 chevron（右端） */
.c-faq-item__q::after {
  content: '';
  flex-shrink: 0;
  width: 0.8rem;
  height: 0.8rem;
  border-right: 2px solid var(--color-body-gray);
  border-bottom: 2px solid var(--color-body-gray);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin-right: 0.6rem;
}
/* 開いてる時 chevron 反転。JS有効時(.js-accordion=常時open)は .is-open、JS無効時は [open] で判定 */
.c-faq-item[open]:not(.js-accordion) .c-faq-item__q::after,
.c-faq-item.is-open .c-faq-item__q::after {
  transform: rotate(-135deg);
}
.c-faq-item .c-faq-item__a-text {
  font-size: 1.3rem;
  color: var(--color-body-gray);
  line-height: 1.7;
  margin: 0;
  padding: 0 0 3.2rem;
  /* CSS Grid（grid-template-rows 0fr⇄1fr）で開閉。潰れた分を overflow:hidden で隠す */
  overflow: hidden;
}
@media (min-width: 768px) {
  .c-faq-item .c-faq-item__a-text {
    font-size: 1.4rem;
    padding-left: 4rem;
  }
}

/* -----------------------------------------------------------------------------
   15. CTA
   -------------------------------------------------------------------------- */
.p-cta {
  background-color: var(--color-accent);
  padding-block: 6rem var(--sp-section-y);
}
@media (min-width: 768px) {
  .p-cta {
    padding-block: var(--pc-section-y);
  }
}
.p-cta .l-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 768px) {
  .p-cta .l-container {
    gap: 3.2rem;
  }
}
.p-cta .p-cta__heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-white);
  text-align: center;
  line-height: 1.4;
  margin: 0;
}
@media (min-width: 768px) {
  .p-cta .p-cta__heading {
    font-size: clamp(2.2rem, 2.5vw, 3.6rem);
  }
}
.p-cta__sub {
  font-size: 1.3rem;
  color: #cce5ff;
  text-align: center;
  line-height: 1.7;
  margin: 0;
}
@media (min-width: 768px) {
  .p-cta__sub {
    font-size: 1.6rem;
  }
}
.p-cta__buttons.wp-block-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
}
@media (min-width: 768px) {
  .p-cta__buttons.wp-block-buttons {
    flex-direction: row;
    gap: 1.6rem;
  }
}
@media (max-width: 767px) {
  .p-cta__buttons .wp-block-button {
    width: 28rem;
    max-width: 100%;
  }
  .p-cta__buttons .wp-block-button__link {
    width: 100%;
  }
}

/* -----------------------------------------------------------------------------
   16. 動画プレースホルダー（本番素材が来たら wp:video / 埋め込みに差し替え）
   -------------------------------------------------------------------------- */
.c-video-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #0a1840;
  border: 1px solid rgba(102, 153, 242, 0.4);
  border-radius: var(--radius-lg);
}
.c-video-ph__label {
  color: #80a6e5;
  font-size: 1.3rem;
}

/* -----------------------------------------------------------------------------
   16b. Footer（ブロック化）背景画像は CSS 相対パスで当てる
   -------------------------------------------------------------------------- */
.l-footer.wp-block-group {
  background-image: url('../images/hero-bg.jpeg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding-block: 4rem 3.2rem;
  margin-block: 0;
}
@media (min-width: 915px) {
  .l-footer.wp-block-group {
    padding-block: 5.6rem 4rem;
  }
}
.l-footer__inner.wp-block-group {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.l-footer__top.wp-block-group {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  align-items: center;
}
@media (min-width: 915px) {
  .l-footer__top.wp-block-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}
.l-footer__logo-col.wp-block-group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
}
@media (min-width: 915px) {
  .l-footer__logo-col.wp-block-group {
    align-items: flex-start;
  }
}
.l-footer__logo.wp-block-image {
  margin: 0;
  width: 12rem;
}
.l-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 915px) {
  .l-footer__logo.wp-block-image {
    width: 14rem;
  }
}
.l-footer__tagline {
  font-size: 1.3rem;
  color: #8099cc;
  margin: 0;
}
.l-footer__nav.wp-block-group {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  align-items: center;
  text-align: center;
}
@media (min-width: 915px) {
  .l-footer__nav.wp-block-group {
    flex-direction: row;
    gap: 3.2rem;
    align-items: center;
  }
}
.l-footer__nav-item {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1;
}
.l-footer__nav-item a {
  color: #99b2e5;
  transition: color 0.2s;
}
.l-footer__nav-item a:hover {
  color: var(--color-white);
}
@media (min-width: 915px) {
  .l-footer__nav-item {
    font-size: 1.4rem;
  }
}
.l-footer__divider.wp-block-separator {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0;
  opacity: 1;
}
.l-footer__bottom.wp-block-group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
}
@media (min-width: 915px) {
  .l-footer__bottom.wp-block-group {
    flex-direction: row;
    justify-content: space-between;
  }
}
.l-footer__copy {
  font-size: 1.1rem;
  color: #6680b2;
  margin: 0;
}
@media (min-width: 915px) {
  .l-footer__copy {
    font-size: 1.2rem;
  }
}
.l-footer__legal {
  margin: 0;
  font-size: 1.1rem;
}
.l-footer__legal a {
  color: #6680b2;
  transition: color 0.2s;
}
.l-footer__legal a:hover {
  color: var(--color-white);
}
@media (min-width: 915px) {
  .l-footer__legal {
    font-size: 1.2rem;
  }
}

/* スティッキーフッター: SWELL は body 直下のラッパ .wp-singular に header/#content/footer を入れるため、
   そのラッパを縦flex+min-height:100vh にし、本文(#content)を伸ばしてフッターを画面下端へ固定。
   （body を flex にしても #content はラッパ内なので効かない＝.wp-singular が正しい対象） */
.wp-singular {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#content.l-content {
  flex: 1 0 auto;
}

/* -----------------------------------------------------------------------------
   17. フロント限定の SWELL 余白調整（ホームのみ・記事の余白は壊さない）
   -------------------------------------------------------------------------- */
.home .l-content {
  margin-bottom: 0;
  padding-top: 0;
}
.home .l-mainContent__inner > .post_content {
  margin: 0;
}

/* -----------------------------------------------------------------------------
   18. SWELL 標準メインビジュアル（FV）— キャッチ/サブ/ボタンを自作LP(p-hero)寸法に合わせる
   動画全面背景は SWELL 機能のまま、文字とボタンの「大きさ」だけ自作FVに揃える。
   SWELL 本体の後に読み込まれる前提。.p-mainVisual で詳細度を1段上げ後勝ちを確実化。
   （カスタマイザーの文字サイズ inline が !important で勝つ場合は各宣言に !important を付与）
   -------------------------------------------------------------------------- */
.p-mainVisual .p-mainVisual__slideTitle {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.2;
}
@media (min-width: 880px) {
  .p-mainVisual .p-mainVisual__slideTitle {
    font-size: clamp(3.6rem, 3.89vw, 5.6rem);
  }
}

.p-mainVisual .p-mainVisual__slideText {
  font-size: 1.4rem;
  line-height: 1.7;
}
@media (min-width: 880px) {
  .p-mainVisual .p-mainVisual__slideText {
    font-size: 1.5rem;
  }
}

.p-mainVisual .c-mvBtn__btn {
  padding: 1.6rem 3.2rem;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 9999px;
}

/* 左寄せ化: SWELL はテキストラッパ .p-mainVisual__textLayer に a-c(align center) を付与し中央寄せ。
   ラッパを左基準にし、ボタンラッパの auto マージン中央寄せを margin で打ち消す
   （auto マージンは align-self より優先されるため align-self だけでは効かない）。 */
.p-mainVisual .p-mainVisual__textLayer {
  align-items: flex-start;
  text-align: left;
}
.p-mainVisual .p-mainVisual__slideTitle,
.p-mainVisual .p-mainVisual__slideText {
  text-align: left;
}
.p-mainVisual .c-mvBtn {
  align-self: flex-start;
  margin-inline: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1.6rem;
  text-align: left;
}

/* -----------------------------------------------------------------------------
   19. SP ハンバーガーメニュー（SWELL .p-spMenu）: 背景=フッター色 / 文字=白
   __overlay は背後の暗幕なので触らない。SWELL の色が !important で勝つ場合は各宣言に付与。
   -------------------------------------------------------------------------- */
.p-spMenu,
.p-spMenu .p-spMenu__inner,
.p-spMenu .p-spMenu__body {
  background-color: #040e3d;
}
/* パネルの実背景は __inner::before（全面オーバーレイ・SWELL の var(--color_header_bg)=白）。
   ここが白の正体なので直接上書き（background-color では下に隠れて効かない）。 */
.p-spMenu .p-spMenu__inner::before {
  background: #040e3d !important;
}
.p-spMenu,
.p-spMenu a,
.p-spMenu .p-spMenu__nav a,
.p-spMenu .c-widget__title,
.p-spMenu .p-spMenu__closeBtn {
  color: #fff;
}
/* メニューを開いた時は上のサイトヘッダー帯もフッター色に（開状態は html[data-spmenu="opened"]） */
[data-spmenu='opened'] .l-header {
  background-color: #040e3d !important;
}

/* -----------------------------------------------------------------------------
   20. お問い合わせフォーム（Contact Form 7 / <dl class="contact7">）— /contact/
   要素はそのまま、ブランド配色でカード化・入力欄/ボタンを整える。CF7 はこのページのみ。
   -------------------------------------------------------------------------- */
.wpcf7 .wpcf7-form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.8rem 2rem;
  box-shadow: 0 0.4rem 2rem rgba(13, 26, 71, 0.06);
}
@media (min-width: 768px) {
  .wpcf7 .wpcf7-form {
    padding: 4rem 3.6rem;
  }
}
.contact7 {
  margin: 0;
}
.contact7 dt {
  margin: 0 0 0.6rem;
}
.contact7 dd {
  margin: 0 0 2rem;
}
.contact7 dt > p,
.contact7 dd > p {
  margin: 0;
}
.contact7 dt > p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-dark);
}
.contact7 .must,
.contact7 .optional {
  order: -1;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.8rem;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--radius-sm);
}
.contact7 .must {
  background: #e8342f;
  color: var(--color-white);
}
.contact7 .optional {
  background: var(--color-bg-pale);
  color: var(--color-body-gray);
  border: 1px solid var(--color-border);
}
.wpcf7-form input.wpcf7-text,
.wpcf7-form input.wpcf7-email,
.wpcf7-form input.wpcf7-tel,
.wpcf7-form textarea.wpcf7-textarea {
  width: 100%;
  padding: 1.2rem 1.4rem;
  font-size: 1.5rem;
  font-family: inherit;
  color: var(--color-text-dark);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
.wpcf7-form textarea.wpcf7-textarea {
  min-height: 14rem;
  line-height: 1.7;
  resize: vertical;
}
.wpcf7-form input.wpcf7-text:focus,
.wpcf7-form input.wpcf7-email:focus,
.wpcf7-form input.wpcf7-tel:focus,
.wpcf7-form textarea.wpcf7-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.3rem rgba(26, 107, 242, 0.15);
}
.wpcf7-form ::placeholder {
  color: #9aa6c2;
}
.contact7 .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
}
.contact7 .wpcf7-list-item {
  margin: 0;
}
.contact7 .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.4rem;
  font-size: 1.4rem;
  color: var(--color-text-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.contact7 .wpcf7-list-item label:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-pale);
}
.wpcf7-form input[type='checkbox'] {
  width: 1.6rem;
  height: 1.6rem;
  accent-color: var(--color-accent);
}
.btn_contact7 {
  text-align: center;
  font-size: 1.4rem;
  color: var(--color-body-gray);
}
/* 送信ボタン。旧カスタムCSS .btn_contact7 input(0,1,1・width:70%/100%・緑)に勝つよう
   .btn_contact7 .wpcf7-submit(0,2,0)で上書き。幅 22rem 固定＋ブランド青に統一 */
.btn_contact7 .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26rem;
  max-width: 100%;
  margin-top: 0.8rem;
  padding: 1.6rem 3.2rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-white);
  background: var(--color-accent);
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 0.6rem 1.6rem rgba(26, 107, 242, 0.3);
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn_contact7 .wpcf7-submit:hover {
  opacity: 0.92;
  transform: translateY(-0.2rem);
  box-shadow: 0 0.8rem 2rem rgba(26, 107, 242, 0.38);
}
/* フォームのカラム幅を 80% に（固定ページのインライン flex-basis:50% を上書き）。PC幅のみ */
@media (min-width: 782px) {
  .wp-block-columns:has(.wpcf7) > .wp-block-column:has(.wpcf7) {
    flex: 0 0 80% !important;
  }
  .wp-block-columns:has(.wpcf7) > .wp-block-column:not(:has(.wpcf7)) {
    flex: 1 1 0% !important;
    min-width: 0;
  }
}

/* -----------------------------------------------------------------------------
   21. 過去動画実績 /works2/（page-id-615）— TOP の制作実績風カード化
   既存の「YouTube埋め込み + h4」はそのまま、各 wp-block-column をカードに。ページ限定。
   -------------------------------------------------------------------------- */
/* :has(.wp-block-embed) で「埋め込みを含む旧列」だけに限定。サムネ+リンク版(.c-work-card)へ
   差し替え後は .p-works/.c-work-card 側が担当し二重適用しない。 */
.page-id-615 .post_content .wp-block-columns:has(.wp-block-embed) {
  gap: 2.4rem;
  align-items: stretch;
}
.page-id-615 .post_content .wp-block-column:has(.wp-block-embed) {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0.4rem 1.6rem rgba(13, 26, 71, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.page-id-615 .post_content .wp-block-column:has(.wp-block-embed):hover {
  transform: translateY(-0.6rem);
  box-shadow: 0 0.8rem 3.2rem rgba(13, 26, 71, 0.14);
}
.page-id-615 .post_content .wp-block-column:has(.wp-block-embed) .wp-block-embed {
  margin: 0;
}
.page-id-615 .post_content .wp-block-column:has(.wp-block-embed) .wp-block-heading {
  margin: 0;
  padding: 1.2rem 1.6rem 1.6rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-dark);
  text-align: left;
}
@media (max-width: 767px) {
  .page-id-615 .post_content .wp-block-column:has(.wp-block-embed) {
    width: 100% !important;
    flex-basis: auto !important;
  }
}
/* works2 カード(行)の上下間隔。エディタ貼付だと Gutenberg が .p-works__grid 内に
   .wp-block-group__inner-container を挟み行はその内側に入るため、実コンテナにも flex+gap を当てる
   （inner-container 無し構造なら grid 自身に効く）。page-615 限定・縦のみ。 */
.page-id-615 .p-works__grid,
.page-id-615 .p-works__grid > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}
@media (min-width: 768px) {
  .page-id-615 .p-works__grid,
  .page-id-615 .p-works__grid > .wp-block-group__inner-container {
    gap: 4rem;
  }
}
/* TOP（フロントページ .home）の制作実績も同じ行間に（inner-container 両対応・works2 と同値） */
.home .p-works__grid,
.home .p-works__grid > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}
@media (min-width: 768px) {
  .home .p-works__grid,
  .home .p-works__grid > .wp-block-group__inner-container {
    gap: 4rem;
  }
}

/* =============================================================================
   === 配色変更案 #0D6688（切り戻し可・このブロックごとコメントアウト/削除で現行版に戻る）===
   2026-06-17 クライアント要望: 一部の青系を #0D6688（青緑系）に変更し、現行版（青）と
   見比べられるようにする。既存の色定義（--color-accent 等）は書き換えず、ここで上書き。

     切り戻し手順: この「=== 配色変更案 #0D6688 ===」ブロックを丸ごと削除する
     → 現行版（青）に完全復帰。
     ※ コンパイル元 scss/object/project/_projects.scss 末尾の同名ブロックも同様に外すこと。

     元の青（戻すとき参照）:
       --color-accent      : #1a6bf2  （プライマリ青・主要アクセント）
       --color-accent-mid  : #3366d9  （プラン badge 背景）
       新色（共通）         : #0D6688
   ========================================================================== */

/* 1) Vyondとは？セクション（.p-about）— 「#0D6688 ベタ背景」方針（2026-06-17 オーナー確定・改）。
      背景画像（写真+暗幕）を解除し #0D6688 単色トーンに（.p-stats と統一）。
      文字色: ABOUTラベルのみ濃紺 #040e3d（item 10）。見出し/本文/特徴リスト/•印は元の白系のまま（item 11 で撤去）。
      元: background-color var(--color-navy-deep)(#040f3d) + 写真(hero-bg.jpeg)+暗幕 */
.p-about {
  background-color: #0d6688;
  background-image: linear-gradient(rgba(13, 102, 136, 0.12), rgba(13, 102, 136, 0.12));
}

/* 2-a) STANDARD カードの「無料で相談する」ボタン（c-btn--primary = 青背景）。元: var(--color-accent) */
.p-pricing .c-btn--primary .wp-block-button__link {
  background-color: #0d6688;
}

/* 2-a') お問い合わせ（CF7）の「送信する」ボタンを STANDARD ボタン（2-a）と同色に。
   ベース定義 .btn_contact7 .wpcf7-submit(0,2,0) は青(var(--color-accent))のまま。
   この提案ブロックを丸ごと削除すると送信ボタンも自動で青に戻る（STANDARD と追従）。
   旧カスタムCSS .btn_contact7 input(0,1,1・緑) には 0,2,0 で勝つ（ベースと同詳細度）。
   元: var(--color-accent) (#1a6bf2) */
.btn_contact7 .wpcf7-submit {
  background: #0d6688;
  box-shadow: 0 0.6rem 1.6rem rgba(13, 102, 136, 0.3);
}
.btn_contact7 .wpcf7-submit:hover {
  box-shadow: 0 0.8rem 2rem rgba(13, 102, 136, 0.38);
}

/* 2-b) TRIAL / PROFESSIONAL カードの「無料で相談する」ボタン（c-btn--white-blue = 白地に青枠・青字）。元: var(--color-accent) */
.p-pricing .c-btn--white-blue .wp-block-button__link {
  border-color: #0d6688;
  color: #0d6688;
}

/* 2-c) TRIAL / STANDARD / PROFESSIONAL バッジ。元: var(--color-accent-mid)(#3366d9) */
.p-pricing .c-plan-card__badge {
  background-color: #0d6688;
}

/* 2-d) おすすめカードの強調枠（STANDARD のハイライト枠線）。元: var(--color-accent) */
.p-pricing .c-plan-card--highlight.wp-block-column {
  border-color: #0d6688;
}

/* 2-e) 料金オプション表のヘッダー帯。元: var(--color-accent) */
.p-pricing .p-pricing__option-table.wp-block-table thead th {
  background-color: #0d6688;
}

/* 3) フローセクションのナンバー背景。元: var(--color-accent) */
.p-flow .c-step-card__num {
  background-color: #0d6688;
}

/* 4) FAQ セクションの Q（質問）バッジ背景。元: var(--color-accent) */
.p-faq .c-faq-item__q::before {
  background-color: #0d6688;
}

/* 5) CTA セクションの背景。元: var(--color-accent) */
.p-cta {
  background-color: #0d6688;
}

/* 6) ハイクオリティVyondクリエイター集団セクション（.p-stats）— .p-about と同様に背景画像をなしにして #0D6688 単色トーンに。
      元: background-color var(--color-navy-deep)(#040f3d) + 写真(hero-bg.jpeg)+暗幕 */
.p-stats {
  background-color: #0d6688;
  background-image: linear-gradient(rgba(13, 102, 136, 0.12), rgba(13, 102, 136, 0.12));
}
/* 6') 3スタッツ（数値）カードの背景を SP でも PC と揃える。
      真因: ベース .p-stats__item.wp-block-column は SP(<915px)=var(--color-navy-card)(#0a1f59 濃紺) /
      PC(>=915px)=transparent。PCはカードが透明で .p-stats 背景(#0d6688 teal)が透けるが、SPは濃紺ベタが
      残り「SPだけカード色が違う」状態になる。SP も #0d6688(teal)にして PC と一致させる。
      ※ この提案ブロックを外すと SP=navy-card / PC=透明 の元の二色設計に自動復帰する。詳細度(0,2,0)=ベースと同・後勝ち。
      SP 限定(max-width:914.98px)で上書き。PC の transparent（区切り線レイアウト）は一切触らない。
      6'') SP カード背景=#0d6688 でセクション背景(.p-stats=#0d6688)と同色化しカード輪郭が消えたため、控えめな半透明白枠線を追加。
           PC の縦区切り線 rgba(255,255,255,0.4) と調和。角丸はベース .p-stats__item の var(--radius-md)=0.8rem を踏襲。
           border も同じ SP スコープに置くので 6/6' を外せば一緒に消える（追従構造維持）。 */
@media (max-width: 914.98px) {
  .p-stats__item.wp-block-column {
    background-color: #0d6688;
    border: 0.1rem solid rgba(255, 255, 255, 0.35);
  }
}

/* 7) Quetaの強み（STRENGTHS）セクション — ナンバーバッジ
      フローのナンバー（.c-step-card__num）と同様「白文字 + #0D6688 ベタ」で統一。
      SP(<768): 背景 #0d6688 ベタ（文字白は基本定義から継承）/ PC(>=768): 背景 #0d6688 ベタ + 文字白。
      元: var(--color-accent)(#1a6bf2) / PC は rgba(26,107,242,0.2)+青文字 */
.p-strengths .c-strength-card__num-badge {
  background-color: #0d6688;
}
@media (min-width: 768px) {
  .p-strengths .c-strength-card__num-badge {
    background-color: #0d6688;
    color: #fff;
  }
}

/* 8) TOP の青系テキスト（白/淡色背景上の青文字）を #0D6688 ベースへ統一。
      ※ ヒーロー/About/Stats の淡い青文字(#66b2ff)はダーク・#0D6688背景上のため対象外。 */
/* 8-a) 各セクションの英字ラベル（STRENGTHS / WORKS / PRICING / FLOW）元: var(--color-accent) */
.c-section-header__en {
  color: #0d6688;
}
/* 8-b) 実績セクションの outline-dark ボタン（青枠・青字）元: var(--color-accent) */
.c-btn--outline-dark .wp-block-button__link {
  border-color: #0d6688;
  color: #0d6688;
}
/* 8-c) CTA セクションの white-blue ボタン（白地・青枠青字。料金は 2-b で対応済み）元: var(--color-accent) */
.p-cta .c-btn--white-blue .wp-block-button__link {
  border-color: #0d6688;
  color: #0d6688;
}
/* 8-d) フローのステップ間の矢印（›）元: var(--color-accent) */
.p-flow .p-flow__steps > .c-step-card:not(:last-child)::after {
  color: #0d6688;
}
/* 8-e) FAQ の中央ラベルタグ 元: var(--color-accent) */
.p-faq .c-label-tag--center {
  color: #0d6688;
}
/* 8-f) FAQ 質問テキストの hover 色 元: var(--color-accent) */
.c-faq-item__q:hover .c-faq-item__q-text {
  color: #0d6688;
}

/* 9) Stats（.p-stats / Vyondクリエイター集団）の数字（10+ / 500+ / 最短2週間）を #f9f871（明るい黄）に（2026-06-17 オーナー指示）。
      .p-stats__number は PC(>=915px)で var(--color-badge-text) (#66b2ff) に切替わるが、数字・sub とも #f9f871 に統一。
      ※ #f9f871 / #0D6688 背景は高コントラスト。直前: #040e3d / 元: 既定 white / PC(>=915px) var(--color-badge-text) (#66b2ff) */
.p-stats .p-stats__number,
.p-stats .p-stats__number-sub {
  color: #f9f871;
}

/* 10) Vyondとは（.p-about）上の英字ラベル「ABOUT」→ 明るい青 #4d99ff
       （2026-06-17 オーナー指示「料金リストの〇の色（.c-plan-card__features li::before = #4d99ff）と同じに」）。
       元: var(--color-badge-text) (#66b2ff) → #040e3d（濃紺・前回） */
.p-about .p-about__label.c-label-tag {
  color: #4d99ff;
}

/* 11) （撤去）Vyondとは（.p-about）本文の濃紺化は 2026-06-17 オーナー指示で取り消し。
       ABOUTラベル（item 10）のみ #040e3d を残し、見出し/本文/特徴リスト/•印は元の白系
       （見出し=var(--color-white) / 本文=var(--color-body-light) / リスト=var(--color-text-feat) /
        •印=var(--color-accent)）に戻す＝上書きしない。 */

/* 12) FV（SWELL標準メインビジュアル .p-mainVisual）の主CTAボタン「無料で相談する」(c-mvBtn__btn) を
       白背景 + #0D6688 枠 + #0D6688 文字のアウトライン風に（2026-06-17 オーナー指示）。
       ※ SWELL がボタンHTMLに inline style="background-color:#1a6bf2" を出力するため、
          背景の上書きには !important が必須（インライン > セレクタ）。文字色も SWELL 既定に勝つため !important。
       元: inline background-color:#1a6bf2 + 文字 白(SWELL既定) + border なし */
.p-mainVisual .c-mvBtn__btn {
  background-color: #fff !important;
  border: 2px solid #0d6688;
  color: #0d6688 !important;
}

/* 13) Vyondとは（.p-about）特徴リストの •印（li::before）を 明るい青 #4d99ff に
       （2026-06-17 オーナー指示「料金リストの〇の色（.c-plan-card__features li::before = #4d99ff）と同じに」）。
       ::before の background-color が四角ドットの色。同詳細度+ソース順で後勝ち。.p-about の •印のみ。
       元: var(--color-accent) (#1a6bf2) → #040e3d（濃紺・前回） */
.p-about .p-about__features li::before {
  background-color: #4d99ff;
}

/* === 配色変更案 #0D6688 ここまで === */

/* === FVレイアウト調整: 文字・ボタンを画面左へ寄せる（背景動画の動きと重ならないように・切り戻し可）===
   2026-06-17 オーナー指示「FVの文字とボタン要素を左にずらして動画の動きにかぶらないように」。
   真因: FVは .p-mainVisual.-type-movie.-height-full。SWELL本体(main-visual--movie.css)で
   テキストラッパ .p-mainVisual__textLayer は position:absolute; left:50%; transform:translateX(-50%);
   width:100% の「絶対配置の中央寄せ」になっている(-height-auto 以外では常時・全幅で適用)。
   旧版で max-width:52% だけ足したため、52%幅の塊が画面中央(おおむね24%〜76%)に置かれ、中の左寄せ
   テキストが24%地点から始まり「逆に右に寄った」。margin-inline:auto は left+transform 下では効かない。
   → 中央寄せ(left:50%/translateX)を打ち消して左端(left:0/transform:none)にアンカーし横幅を左半分に制限。
   section 18 で中身は既に左揃え(align-items:flex-start/text-align:left)。
   PC(>=960px)のみ。SP(<960)は全幅のまま中身左寄せで問題なし。切り戻し: このブロック削除で元に戻る。 */
@media (min-width: 960px) {
  .p-mainVisual .p-mainVisual__textLayer {
    left: 0; /* SWELL本体の left:50% を打ち消し、絶対配置の基準を左端へ */
    transform: none; /* translateX(-50%) の中央寄せを打ち消し */
    max-width: 52%; /* 横幅を画面左 約半分に制限（残り右半分が動画の動きスペース） */
    margin-inline: 0; /* 中央寄せの auto を無効化（左端アンカーを確実に） */
  }
}
/* === FVレイアウト調整 ここまで === */