@charset "UTF-8";
/*!
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
*/
/* =========================================================
   SWELL Design Pattern (DP) Base Style
   - SWELLのカスタマイザー（GUI）設定を尊重するハイブリッド設計
   - 投稿ページへの影響を完全に遮断する厳格なスコープ管理
========================================================= */
/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap");
/* -------------------------------------------
 * 1. DP専用 変数定義（CSS Custom Properties）
 * ------------------------------------------- */
:root {
  --dp-font-jp-maru: "Zen Maru Gothic", sans-serif;
  --dp-font-en: "Roboto", sans-serif;
  --dp-font-num: "Roboto Condensed", sans-serif;
  --dp-font-general: "Inter", sans-serif;
  --dp-space-block-pc: 4rem;
  --dp-space-block-sp: 3rem;
  --dp-space-element-pc: 2.5rem;
  --dp-space-element-sp: 1.5rem;
  --dp-space-inner-pc: 1rem;
  --dp-space-inner-sp: 0.5rem;
  --dp-letter-spacing-heading: 0.1em;
  --dp-letter-spacing-text: 0.03em;
  --dp-line-height-large: 2;
  --dp-line-height-medium: 1.6;
  --dp-line-height-small: 1.4;
  --dp-radius: 4px;
  --dp-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  --dp-color-sub: var(--color_gray);
  --dp-border-width: 3px;
  --dp-font-size-page-title-pc: 48px;
  --dp-font-size-page-title-sp: 36px;
  --dp-font-size-title-pc: 40px;
  --dp-font-size-title-sp: 32px;
  --dp-font-size-heading-pc: 24px;
  --dp-font-size-heading-sp: 20px;
  --dp-font-size-summary: 18px;
  --dp-font-size-explanation: 14px;
  --dp-font-weight-heading: 500;
}

/* -------------------------------------------
 * 2. 厳格なスコープ管理（DP用テンプレート限定）
 * ------------------------------------------- */
.dp-wrap h2,
.dp-wrap h3 {
  margin: 0 0 var(--dp-space-inner-pc);
  padding: 0;
  border: none;
  background: transparent;
}
.dp-wrap h2::before,
.dp-wrap h3::before {
  content: none;
}
.dp-wrap h2::before, .dp-wrap h2::after,
.dp-wrap h3::before,
.dp-wrap h3::after {
  position: unset;
  content: none;
  border: none;
  background: transparent;
  width: auto;
  height: auto;
  inset: unset;
}
.dp-wrap h3 {
  font-size: var(--dp-font-size-heading-pc);
}
.dp-wrap .wp-block-image img {
  pointer-events: none;
}
@media screen and (max-width: 959px) {
  .dp-wrap .wp-block-image img {
    width: 100%;
  }
}
.dp-wrap p {
  line-height: 1.8;
  letter-spacing: var(--dp-letter-spacing-text);
}
.dp-wrap .wp-block-image:has(a) img {
  pointer-events: auto;
}
.dp-wrap .c-lead {
  letter-spacing: var(--dp-letter-spacing-heading);
  font-size: clamp(16px, 1.2vw, 20px);
}
@media screen and (max-width: 599px) {
  .dp-wrap .c-lead {
    letter-spacing: var(--dp-letter-spacing-text);
  }
}
.dp-wrap .c-copy {
  margin-bottom: calc(var(--dp-space-inner-pc) * 1.25);
  line-height: var(--dp-line-height-medium);
  font-size: clamp(18px, 1.2vw, 20px);
  font-weight: var(--dp-font-weight-heading);
}
.dp-wrap .c-summary {
  margin-bottom: var(--dp-space-element-pc);
  line-height: var(--dp-line-height-large);
  font-size: clamp(16px, 1.2vw, 18px);
}
@media screen and (max-width: 599px) {
  .dp-wrap .c-summary {
    margin-bottom: var(--dp-space-element-sp);
    line-height: var(--dp-line-height-medium);
    text-align: left;
  }
}
.dp-wrap .c-pricing-number {
  line-height: 1;
  font-family: var(--dp-font-num);
  font-weight: var(--dp-font-weight-heading);
}
.dp-wrap .c-pricing-number span {
  font-feature-settings: "palt" on;
}
.dp-wrap .c-pricing-number span:first-child {
  margin-right: 3px;
}
@media screen and (max-width: 599px) {
  .dp-wrap .c-pricing-number {
    margin-bottom: var(--dp-space-inner-pc);
  }
}
.dp-wrap .c-term {
  display: inline-block;
  max-width: 240px;
  width: 100%;
  margin-bottom: calc(var(--dp-space-element-pc) * 0.6);
  padding: calc(var(--dp-space-inner-sp) / 2) var(--dp-space-inner-pc);
  background-color: var(--color_text);
  color: var(--color_bg);
  border-radius: calc(var(--dp-radius) / 2);
  font-weight: var(--dp-font-weight-heading);
}
@media screen and (max-width: 599px) {
  .dp-wrap .c-term {
    margin-bottom: calc(var(--dp-space-element-sp) * 0.6);
  }
}
.dp-wrap .c-annotation {
  text-align: center;
  font-size: var(--dp-font-size-explanation);
}
@media screen and (max-width: 768px) {
  .dp-wrap .c-annotation {
    text-align: left;
  }
}
.dp-wrap ul.-list-flex {
  justify-content: flex-start;
  padding-left: 0 !important;
  gap: var(--dp-space-element-pc);
  /* 横並び キーワードリスト */
}
@media screen and (max-width: 599px) {
  .dp-wrap ul.-list-flex {
    gap: var(--dp-space-element-sp);
  }
}
.dp-wrap ul.-list-flex li {
  list-style: none;
}
.dp-wrap ul.-list-flex.list-keyword {
  gap: var(--dp-space-inner-pc);
  margin-bottom: var(--dp-space-inner-pc);
}
@media screen and (max-width: 599px) {
  .dp-wrap ul.-list-flex.list-keyword {
    gap: var(--dp-space-inner-sp);
  }
}
.dp-wrap ul.-list-flex.list-keyword li {
  list-style: none;
  padding: var(--dp-space-inner-sp) var(--dp-space-inner-pc);
  background-color: #ffffff;
  border-radius: var(--dp-radius);
}
@media screen and (max-width: 599px) {
  .dp-wrap ul.-list-flex.list-keyword li {
    padding: calc(var(--dp-space-inner-sp) / 2) var(--dp-space-inner-sp);
  }
}
.dp-wrap ul.-list-flex.list-hashtag {
  justify-content: center;
  gap: var(--dp-space-inner-pc) var(--dp-space-element-pc);
}
@media screen and (max-width: 599px) {
  .dp-wrap ul.-list-flex.list-hashtag {
    flex-direction: column;
    gap: var(--dp-space-inner-sp);
  }
}
.dp-wrap ul.-list-flex.list-hashtag li {
  font-size: 1.125rem;
}
@media screen and (max-width: 599px) {
  .dp-wrap ul.-list-flex.list-hashtag li {
    font-size: inherit;
  }
}
.dp-wrap ul.-list-flex.list-hashtag li::before {
  content: "＃";
  left: 0;
}

/*--------------------------------------------------------
 mainタグ
--------------------------------------------------------*/
/* 非表示 レスポンシブデザイン */
.-sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .-sp {
    display: block;
    max-width: 480px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .-pc {
    display: none;
  }
}

/*--------------------------------------------------------
分割セクション デザインパターン
--------------------------------------------------------*/
/*

 セクションタイトル (section-title)

*/
/* --- 1. section-title --default (H2) --- */
.dp-section-title {
  margin-bottom: var(--dp-space-block-pc);
  text-align: center;
}
@media screen and (max-width: 599px) {
  .dp-section-title {
    justify-content: center;
    margin-bottom: var(--dp-space-block-sp);
  }
}
.dp-section-title h1 {
  margin-bottom: var(--dp-space-inner-pc);
  color: var(--color_text);
  letter-spacing: var(--dp-letter-spacing-heading);
  font-size: var(--dp-font-size-page-title-pc);
  font-weight: var(--dp-font-weight-heading);
  font-family: var(--dp-font-jp-maru);
}
@media screen and (max-width: 599px) {
  .dp-section-title h1 {
    line-height: 1.4;
    letter-spacing: var(--dp-letter-spacing-text);
    font-size: var(--dp-font-size-page-title-sp);
  }
}
.dp-section-title h2 {
  margin: 0 0 var(--dp-space-inner-pc);
  padding: 0;
  background: transparent;
  color: var(--color_text);
  border: none;
  letter-spacing: var(--dp-letter-spacing-heading);
  font-size: var(--dp-font-size-title-pc);
  font-weight: var(--dp-font-weight-heading);
}
@media screen and (max-width: 599px) {
  .dp-section-title h2 {
    letter-spacing: var(--dp-letter-spacing-text);
    font-size: var(--dp-font-size-title-sp);
  }
}
.dp-section-title span {
  display: inline-block;
}
.dp-section-title .swl-bg-color {
  padding: 0 8px 0 clamp(4px, 1.2vw, 10px);
  border-radius: var(--dp-radius);
  font-size: 90%;
  font-family: var(--dp-font-num);
}
.dp-section-title .en-title,
.dp-section-title .dp-section-title__en {
  margin-bottom: var(--dp-space-inner-sp);
  letter-spacing: var(--dp-letter-spacing-heading);
  font-family: var(--dp-font-en);
}
@media screen and (max-width: 599px) {
  .dp-section-title .en-title,
  .dp-section-title .dp-section-title__en {
    letter-spacing: var(--dp-letter-spacing-text);
    margin-bottom: 0;
    font-size: 20px;
  }
}

/* --- 2. section-title--a  --- */
.dp-section-title--a h1,
.dp-section-title--a h2 {
  font-weight: 600;
}

/* --- 3. section-title--b (英語大＋日本語小) --- */
.dp-section-title--b .en-title {
  line-height: 1.4;
  letter-spacing: var(--dp-letter-spacing-heading);
  font-size: calc(var(--dp-font-size-title-pc) * 1.5);
}
@media screen and (max-width: 599px) {
  .dp-section-title--b .en-title {
    letter-spacing: var(--dp-letter-spacing-text);
    font-size: calc(var(--dp-font-size-title-sp) * 1.25);
  }
}
.dp-section-title--b h2 {
  font-size: var(--dp-font-size-heading-pc);
  font-weight: 400;
}
@media screen and (max-width: 599px) {
  .dp-section-title--b h2 {
    font-size: var(--dp-font-size-heading-sp);
  }
}

/* --- 4. section-title--c 固有（左寄せ＋サブタイトルライン） --- */
.dp-section-title--c {
  text-align: left;
}
.dp-section-title--c .en-title {
  margin-bottom: 32px;
  font-size: 20px;
  font-family: var(--dp-font-en);
}
.dp-section-title--c .en-title::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: var(--color_text);
  margin-top: 16px;
}

/* --- 5. section-title--d 左右イラスト＋背景スライドテキスト --- */
@keyframes dp-bg-text-slide {
  from {
    transform: translateY(-50%) translateX(0);
  }
  to {
    transform: translateY(-50%) translateX(-50%);
  }
}
.dp-section-title--d {
  position: relative;
  max-width: var(--article_size);
  margin-inline: auto;
}
.dp-section-title--d .bg-text-slide-loop {
  position: absolute;
  top: 48px;
  left: calc(50% - 50vw);
  margin-left: 0 !important;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  max-width: none !important;
  animation: dp-bg-text-slide 64s linear infinite;
}
.dp-section-title--d .bg-text-slide-loop p {
  flex-shrink: 0;
  margin: 0;
  font-family: var(--dp-font-en);
  font-size: clamp(128px, 22vw, 290px);
  font-weight: bold;
  color: var(--color_main_thin);
  letter-spacing: 0.05em;
  mix-blend-mode: overlay;
  padding-right: 1em;
}
.dp-section-title--d .main-title-side-icon {
  position: relative;
  justify-content: center;
  padding-top: 24px;
  z-index: 1;
}
.dp-section-title--d .main-title-side-icon > .wp-block-image {
  position: absolute;
  bottom: 0;
  pointer-events: none;
  width: 192px;
  height: 192px;
}
@media screen and (max-width: 599px) {
  .dp-section-title--d .main-title-side-icon > .wp-block-image {
    bottom: -8px;
    width: 96px;
    height: 96px;
  }
}
.dp-section-title--d .main-title-side-icon > .wp-block-image img {
  display: block;
  height: 192px;
  width: auto;
}
@media screen and (max-width: 599px) {
  .dp-section-title--d .main-title-side-icon > .wp-block-image img {
    height: 96px;
  }
}
.dp-section-title--d .main-title-side-icon > .wp-block-image:first-child {
  left: 0;
}
@media screen and (max-width: 959px) {
  .dp-section-title--d .main-title-side-icon > .wp-block-image:first-child {
    left: -32px;
  }
}
@media screen and (max-width: 599px) {
  .dp-section-title--d .main-title-side-icon > .wp-block-image:first-child {
    left: -56px;
  }
}
.dp-section-title--d .main-title-side-icon > .wp-block-image:first-child img {
  margin-left: auto;
}
.dp-section-title--d .main-title-side-icon > .wp-block-image:last-child {
  right: 0;
}
@media screen and (max-width: 959px) {
  .dp-section-title--d .main-title-side-icon > .wp-block-image:last-child {
    right: -32px;
  }
}
@media screen and (max-width: 599px) {
  .dp-section-title--d .main-title-side-icon > .wp-block-image:last-child {
    right: -56px;
  }
}
.dp-section-title--d .main-title-side-icon > .wp-block-group {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 959px) {
  .dp-section-title--d .c-lead {
    text-align: left;
  }
}

/* --- 6. section-title--e 左寄せ（シンプル・アンダーラインなし） --- */
.dp-section-title--e {
  text-align: left;
}
.dp-section-title--e .en-title {
  font-size: 20px;
  font-family: var(--dp-font-en);
  font-weight: 300;
  letter-spacing: 0.24em;
}

/* --- 7. section-title--f fullWide用（コンテナ幅+パディング・左寄せ） --- */
.dp-section-title--f {
  text-align: left;
  max-width: calc(var(--container_size, 0px) + var(--swl-pad_container, 0px) * 2);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--swl-fw_inner_pad, 0);
  padding: 0 var(--swl-pad_container, 0);
}

/* セクションタイトル */
/*

 リスト (list)

 【実装ルール】
 - ブロック: TYPE-K（wp:list）をベースとする
 - dp-list-〇〇 クラスは明示的に指定された場合のみ wp-block-list に付与する
 - スタイリングは .dp-list-〇〇 を起点に wp-block-list / li を直接ターゲットにする
 - 新規バリアントはこのファイル末尾に追記すること

*/
/* --- dp-list-bubble-label（吹き出しラベル＋テキストリスト） --- */
.dp-list-bubble-label {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dp-list-bubble-label .wp-block-group {
  display: flex;
  align-items: flex-start;
  gap: var(--dp-space-inner-pc);
}
.dp-list-bubble-label .wp-block-group > p:first-child {
  display: inline-block;
  position: relative;
  background-color: var(--color_main);
  border-radius: var(--dp-radius);
  padding: 2px 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: var(--dp-line-height-medium);
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
}
.dp-list-bubble-label .wp-block-group > p:first-child::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--color_main);
}
.dp-list-bubble-label > .wp-block-group > p:last-child {
  margin-top: 2px;
}

/* --- dp-list-label-sub（ラベルサブタイトル） 横並びグループブロック使用 --- */
.dp-list-label-sub {
  justify-content: center;
  margin-bottom: var(--dp-space-inner-sp);
  gap: 8px;
  font-size: var(--dp-font-size-heading-pc);
}
.dp-list-label-sub .swl-bg-color {
  padding: 4px 12px;
  border-radius: var(--dp-radius);
}

/* リスト */
/*

 ボタン (button)

*/
/* ===========================================
SWELL独自ボタン
=========================================== */
/* 共通スタイル */
.dp-button {
  margin-bottom: 0;
}
.dp-button .swell-block-button__link {
  min-width: 300px;
  font-size: var(--dp-font-size-summary);
  font-weight: var(--dp-font-weight-heading);
}
@media screen and (max-width: 599px) {
  .dp-button .swell-block-button__link {
    width: 100%;
  }
}

/* 右矢印ボタン ホバー時に右移動アニメーション */
.dp-button-right-arrow .swell-block-button__link {
  padding: 0.75em 1em;
}
.dp-button-right-arrow .-right {
  transition: transform 0.3s ease;
}
.dp-button-right-arrow:hover .-right {
  transform: translateX(5px);
}

/* 角丸レクタングルボタン */
.button-rectangle .swell-block-button__link {
  border-radius: var(--dp-radius);
}

/* 大きめボタン */
.button-large .swell-block-button__link {
  padding: var(--dp-space-element-sp) var(--dp-space-element-pc);
  font-size: var(--dp-font-size-heading-pc);
  font-weight: var(--dp-font-weight-heading);
}
@media screen and (max-width: 599px) {
  .button-large .swell-block-button__link {
    padding: var(--dp-space-element-sp) var(--dp-space-inner-pc);
    font-size: var(--dp-font-size-summary);
    font-weight: 600;
  }
}

/* 背景白抜きボタン */
.button-white .swell-block-button__link {
  background: var(--color_bg);
  color: var(--color_main) !important;
}

/* ===========================================
WP標準ボタン
=========================================== */
.wp-block-buttons.dp-button-normal {
  margin-bottom: 0;
}
@media screen and (max-width: 599px) {
  .wp-block-buttons.dp-button-normal {
    justify-content: center;
  }
}
@media screen and (max-width: 599px) {
  .wp-block-buttons.dp-button-normal a {
    width: 100%;
  }
}

/* ボタン */
/*

 カード (card)

*/
/* ===========================================
英語コピー小＋円形画像 or アイコン＋見出し＋テキスト
=========================================== */
.dp-card-circle .swell-block-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dp-card-circle .en-copy {
  margin-bottom: -0.5em;
  text-align: center;
  font-size: 0.875rem;
  font-family: var(--dp-font-en);
  z-index: 2;
}
.dp-card-circle .wp-block-image,
.dp-card-circle i {
  position: relative;
  width: 160px;
  height: 160px;
  overflow: hidden;
  margin-bottom: 0;
  background-color: var(--color_bg);
  border-radius: 50%;
  z-index: 1;
}
.dp-card-circle .wp-block-image::before,
.dp-card-circle i::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px;
  color: var(--color_text);
}
@media screen and (max-width: 599px) {
  .dp-card-circle .wp-block-image,
  .dp-card-circle i {
    width: 112px;
    height: 112px;
    margin-bottom: var(--dp-space-inner-sp);
  }
}
.dp-card-circle .wp-block-image img,
.dp-card-circle i img {
  width: 96px;
  height: 100%;
  object-fit: contain;
}
@media screen and (max-width: 768px) {
  .dp-card-circle .wp-block-image img,
  .dp-card-circle i img {
    width: 64px;
  }
}
.dp-card-circle h3 {
  margin-bottom: calc(var(--dp-space-inner-pc) / 2);
  font-size: var(--dp-font-size-heading-pc);
  text-align: center;
}
@media screen and (max-width: 599px) {
  .dp-card-circle h3 {
    margin-bottom: calc(var(--dp-space-inner-sp) / 2);
    font-size: var(--dp-font-size-heading-sp);
  }
}

/* ===========================================
グレー背景中央寄せ カードリスト下にブリッジコピー用スペース
=========================================== */
.dp-card-band {
  position: relative;
  margin-bottom: var(--dp-space-block-pc);
}
@media screen and (max-width: 599px) {
  .dp-card-band {
    margin-bottom: var(--dp-space-block-sp);
  }
}
.dp-card-band::before {
  content: "";
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw - 32px, 1328px);
  height: calc(100% + 6em + 80px);
  background-color: var(--color_main_thin);
  border-radius: var(--dp-radius);
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .dp-card-band::before {
    top: 64px;
    width: 100vw;
    height: calc(100% + 4em + 64px);
    border-radius: 0;
  }
}
@media screen and (max-width: 599px) {
  .dp-card-band::before {
    height: calc(100% + 64px);
  }
}
.dp-card-band .wp-block-image,
.dp-card-band i {
  margin-bottom: var(--dp-space-inner-pc);
}

/* ===========================================
カウンター基礎コード （配置は別クラスで記述してください）
=========================================== */
.dp-card-counter .swell-block-columns__inner {
  counter-reset: card-counter;
}
.dp-card-counter .swell-block-column {
  counter-increment: card-counter;
}
.dp-card-counter .swell-block-column::before {
  content: counter(card-counter, decimal-leading-zero);
}

/* ===========================================
 背景＋画像サイズ プレーン状態
=========================================== */
.dp-card-plain .swell-block-column {
  background-color: #ffffff;
  border-radius: var(--dp-radius);
  overflow: hidden;
}
.dp-card-plain .wp-block-image {
  margin: 0;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.dp-card-plain .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dp-card-plain i img {
  width: 64px;
  height: 100%;
  object-fit: contain;
}
.dp-card-plain p {
  padding: var(--dp-space-inner-pc) var(--dp-space-inner-pc);
}

/* ===========================================
イラスト背景透過
=========================================== */
.dp-card-illust .wp-block-image img {
  object-fit: contain;
  height: 200px;
}

/* ===========================================
カードリスト中央寄せ
=========================================== */
.dp-card-center > .swell-block-columns__inner {
  justify-content: center;
}

/* ===========================================
 カウンター右上＋画像＋見出し＋説明
 (前提: .dp-card--counter の付与が必要です)
=========================================== */
.dp-card-sticky-note {
  position: relative;
}
.dp-card-sticky-note::before {
  position: absolute;
  content: "";
  top: var(--dp-space-block-pc);
  left: var(--dp-space-block-pc);
  transform: none;
  width: calc(100% + (100vw - 100%) / 2);
  height: 100%;
  background-color: var(--color_main_thin);
  border-radius: var(--dp-radius) 0 0 var(--dp-radius);
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .dp-card-sticky-note::before {
    top: var(--dp-space-inner-pc);
    left: var(--dp-space-inner-pc);
    width: calc(100% + (100vw - 100%) / 2);
    height: 100%;
  }
}
@media screen and (max-width: 599px) {
  .dp-card-sticky-note .swell-block-columns__inner {
    row-gap: var(--dp-space-element-sp);
  }
}
.dp-card-sticky-note .swell-block-column {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 var(--dp-space-element-pc) var(--dp-space-element-pc);
  background-color: var(--color_bg);
  border-radius: var(--dp-radius);
  box-shadow: var(--dp-shadow);
}
.dp-card-sticky-note .swell-block-column::before {
  align-self: flex-start;
  padding-top: var(--dp-space-inner-pc);
  border-top: calc(var(--dp-border-width) * 2) solid var(--color_main);
  line-height: 1;
  letter-spacing: 0;
  font-family: var(--dp-font-num);
  font-size: var(--dp-font-size-title-pc);
  font-weight: var(--dp-font-weight-heading);
}
@media screen and (max-width: 599px) {
  .dp-card-sticky-note .swell-block-column::before {
    margin-bottom: 0;
  }
}
.dp-card-sticky-note .swell-block-column > :last-child {
  margin-bottom: 0;
}
.dp-card-sticky-note .wp-block-image {
  margin-bottom: var(--dp-space-element-pc);
  border-radius: 0;
}
@media screen and (max-width: 599px) {
  .dp-card-sticky-note .wp-block-image {
    margin-bottom: var(--dp-space-element-sp);
  }
}
.dp-card-sticky-note .wp-block-image img {
  height: 180px;
  object-fit: contain;
}
@media screen and (max-width: 599px) {
  .dp-card-sticky-note .wp-block-image img {
    height: 120px;
  }
}
.dp-card-sticky-note h3 {
  margin-bottom: var(--dp-space-inner-pc);
  font-size: var(--dp-font-size-heading-pc);
}
@media screen and (max-width: 599px) {
  .dp-card-sticky-note h3 {
    font-size: var(--dp-font-size-heading-sp);
  }
}

/* ===========================================
 カウンター中央上＋画像＋見出し＋説明
 (前提: .dp-card--counter の付与が必要です)
=========================================== */
.dp-card-circle-badge {
  margin-bottom: 0;
}
.dp-card-circle-badge .swell-block-column {
  position: relative;
  background-color: #ffffff;
  border-radius: var(--dp-radius);
  padding: 0 0 var(--dp-space-element-pc);
  box-shadow: var(--dp-shadow);
  text-align: center;
  z-index: 1;
}
.dp-card-circle-badge .swell-block-column::before {
  content: counter(card-counter, decimal-leading-zero);
  position: absolute;
  top: -1em;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: var(--color_text);
  border-radius: 50%;
  line-height: 1;
  font-family: var(--dp-font-num);
  font-weight: 300;
  font-size: var(--dp-font-size-title-pc);
  z-index: 2;
}
@media screen and (max-width: 599px) {
  .dp-card-circle-badge .swell-block-column::before {
    width: 64px;
    height: 64px;
    font-size: var(--dp-font-size-title-sp);
  }
}
.dp-card-circle-badge .swell-block-column .wp-block-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0 0 1em;
  border-radius: var(--dp-radius) var(--dp-radius) 0 0;
  overflow: hidden;
  background-color: var(--color_main_thin);
}
@media screen and (max-width: 599px) {
  .dp-card-circle-badge .swell-block-column .wp-block-image {
    aspect-ratio: unset;
  }
}
.dp-card-circle-badge .swell-block-column .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dp-card-circle-badge .wp-block-group {
  padding: 0 var(--dp-space-inner-pc);
}
.dp-card-circle-badge h3 {
  margin-bottom: calc(var(--dp-space-inner-pc) / 2);
  text-align: center;
}
@media screen and (max-width: 599px) {
  .dp-card-circle-badge h3 {
    margin-bottom: calc(var(--dp-space-inner-sp) / 2);
  }
}
.dp-card-circle-badge p {
  font-size: clamp(14px, 1.2vw, var(--dp-font-size-summary));
}

/* ===========================================
   カウンター右上＋画像＋説明 縦線で区切り
   (前提: .dp-card--counter の付与が必要です)
=========================================== */
.dp-card-verticle-line {
  margin-bottom: var(--dp-space-block-pc);
}
@media screen and (max-width: 599px) {
  .dp-card-verticle-line {
    margin-bottom: var(--dp-space-block-sp);
  }
}
.dp-card-verticle-line .swell-block-columns__inner {
  counter-reset: card-counter;
}
.dp-card-verticle-line .swell-block-column {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  counter-increment: card-counter;
}
.dp-card-verticle-line .swell-block-column::before {
  content: "ISSUE\a" counter(card-counter, decimal-leading-zero);
  white-space: pre;
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color_text);
  border-radius: 50%;
  font-family: var(--dp-font-en);
  font-size: 13px;
  font-weight: var(--dp-font-weight-heading);
  color: var(--color_bg);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  z-index: 1;
}
.dp-card-verticle-line .swell-block-column:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -1.5rem;
  width: 1px;
  height: calc(100% - 2rem);
  background-color: var(--color_text);
}
@media screen and (max-width: 959px) {
  .dp-card-verticle-line .swell-block-column:not(:last-child)::after {
    display: none;
  }
}
.dp-card-verticle-line .swell-block-column .wp-block-image {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: var(--dp-space-inner-pc);
  padding: 2rem 2rem 0;
}
.dp-card-verticle-line .swell-block-column .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 599px) {
  .dp-card-verticle-line .swell-block-column .wp-block-image {
    margin-bottom: var(--dp-space-inner-sp);
  }
}
.dp-card-verticle-line .swell-block-column p {
  font-size: var(--dp-font-size-summary);
  line-height: var(--dp-line-height-medium);
  text-align: center;
}

/* ===========================================
 カード3つ並び＋円形背景
=========================================== */
.dp-card-copy-blur {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}
.dp-card-copy-blur .swell-block-column {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--dp-space-element-pc);
  font-weight: 600;
  font-feature-settings: "palt" 1;
  background: radial-gradient(ellipse at 38% 32%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 62%), var(--color_main_thin);
  box-shadow: 8px 12px 28px rgba(0, 0, 0, 0.13), -4px -6px 14px rgba(255, 255, 255, 0.9), inset 2px 3px 8px rgba(255, 255, 255, 0.55), inset -2px -3px 8px rgba(0, 0, 0, 0.08);
}

/* ===========================================
特徴キーワード: 角丸ボーダー
=========================================== */
.dp-card-rounded-corner {
  gap: var(--dp-space-inner-sp);
}
.dp-card-rounded-corner p {
  display: inline-block;
  border: 2px solid;
  border-radius: 99px;
  padding: 8px 24px;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.6;
}
@media screen and (max-width: 599px) {
  .dp-card-rounded-corner p {
    font-size: 16px;
    padding: 6px 16px;
  }
}

/* ===========================================
上下二分割カード（4つ横並び）
=========================================== */
.dp-card-splid-color {
  align-items: flex-start;
  gap: 5px !important;
}
.dp-card-splid-color > .wp-block-group {
  min-width: 0;
}
.dp-card-splid-color > .wp-block-group p:first-child {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--color_main);
  color: #ffffff;
  text-align: center;
  font-size: var(--dp-font-size-explanation);
  font-weight: var(--dp-font-weight-heading);
  padding: 0.5em 0.25em;
  margin: 0;
  line-height: var(--dp-line-height-medium);
}
.dp-card-splid-color > .wp-block-group p:last-child {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--color_main_thin);
  color: var(--color_main);
  text-align: center;
  font-size: var(--dp-font-size-explanation);
  font-weight: var(--dp-font-weight-heading);
  padding: 0.5em 0.25em;
  margin: 0;
  line-height: var(--dp-line-height-medium);
}
@media screen and (max-width: 599px) {
  .dp-card-splid-color {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .dp-card-splid-color > .wp-block-group p {
    font-size: 0.75rem;
    padding: 0.4em 0.15em;
  }
}

/* ===========================================
 カードリスト　見出し白背景付き（中央寄せ）＋画像＋説明
=========================================== */
.dp-card-title-bg-center .swell-block-column {
  position: relative;
  padding-top: 24px;
}
.dp-card-title-bg-center h3 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: max-content;
  min-width: 256px;
  max-width: calc(100% - 32px);
  padding: var(--dp-space-inner-pc);
  background-color: #ffffff;
  border-radius: var(--dp-radius);
  box-shadow: var(--dp-shadow);
  font-size: clamp(18px, 2vw, 20px);
  text-align: center;
}
@media screen and (max-width: 599px) {
  .dp-card-title-bg-center h3 {
    font-size: var(--dp-font-size-heading-sp);
    padding: var(--dp-space-inner-sp);
  }
}
.dp-card-title-bg-center .wp-block-image {
  border-radius: calc(var(--dp-radius) * 2);
  overflow: hidden;
}
.dp-card-title-bg-center .wp-block-image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* カードリスト */
/*

 お客様の声カード (card-voice)

*/
/* ----------------------------------------------
 dp-card-voice 共通
 ---------------------------------------------- */
.dp-card-voice .wp-block-jetpack-rating-star > span {
  margin-bottom: 0;
}
.dp-card-voice .wp-block-jetpack-rating-star:not(.is-style-outlined) > span {
  margin-right: 0;
}
.dp-card-voice .swell-block-column {
  border-radius: var(--dp-radius);
  box-shadow: var(--dp-shadow);
  display: flex;
  flex-direction: column;
}
.dp-card-voice .swell-block-column > .wp-block-group {
  margin-bottom: 0;
}
.dp-card-voice .wp-block-image {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  margin: 0;
  overflow: hidden;
}
.dp-card-voice .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
@media screen and (max-width: 599px) {
  .dp-card-voice .wp-block-image {
    width: 72px;
    height: 72px;
  }
}
.dp-card-voice h3 {
  margin: 0 0 var(--dp-space-inner-pc);
  padding: 0;
  border: none;
}
.dp-card-voice h3::before {
  content: none;
}
.dp-card-voice .swell-block-balloon {
  margin-bottom: 0;
}
.dp-card-voice .-circle > .c-balloon__iconImg {
  object-position: top;
}
.dp-card-voice .c-balloon__text p {
  line-height: var(--dp-line-height-small);
}

/* ----------------------------------------------
 dp-card-voice--a
 お客様の声カード 典型例
 ---------------------------------------------- */
.dp-card-voice--a .swell-block-column {
  background: #fff;
  padding: 32px 40px;
  gap: 16px;
}
@media screen and (max-width: 599px) {
  .dp-card-voice--a .swell-block-column {
    padding: 24px 20px;
  }
}
.dp-card-voice--a .swell-block-column .dp-voice-card__row {
  border-bottom: 1px solid var(--color_text);
  gap: 24px;
}
.dp-card-voice--a .swell-block-column .dp-voice-card__row.is-layout-flex {
  align-items: center;
}
.dp-card-voice--a .swell-block-column .dp-voice-card__row .wp-block-image {
  flex-shrink: 0;
  height: 96px;
  margin: 0;
}
.dp-card-voice--a .swell-block-column .dp-voice-card__row .wp-block-image img {
  height: 100%;
  object-fit: contain;
}
.dp-card-voice--a .swell-block-column .dp-voice-card__profile p {
  margin: 0;
  line-height: var(--dp-line-height-medium);
  letter-spacing: var(--dp-letter-spacing-text);
}
.dp-card-voice--a .swell-block-column .dp-voice-card__profile p:last-child {
  font-size: var(--dp-font-size-explanation);
}
.dp-card-voice--a .swell-block-column h3.wp-block-heading {
  font-size: 16px;
  font-weight: 700;
  line-height: var(--dp-line-height-small);
  letter-spacing: var(--dp-letter-spacing-text);
  margin: 0;
}
.dp-card-voice--a .swell-block-column > p {
  font-size: var(--dp-font-size-explanation);
  line-height: var(--dp-line-height-small);
  letter-spacing: var(--dp-letter-spacing-text);
  margin: 0;
}

/* ----------------------------------------------
 dp-card-voice--b
 お悩み（見出し＋吹き出し）→ 導入効果カード
 吹き出し: wp:loos/balloon ブロック使用
 ---------------------------------------------- */
.dp-card-voice--b .swell-block-column {
  padding-top: 1.25em;
}
.dp-card-voice--b .dp-card-voice__label {
  align-self: center;
  position: relative;
  z-index: 1;
  margin-bottom: -1.1em;
  padding: 0.3em 1.25em;
  background-color: var(--color_text);
  color: #ffffff;
  border-radius: 2em;
  font-size: var(--dp-font-size-explanation);
  font-weight: var(--dp-font-weight-heading);
  letter-spacing: var(--dp-letter-spacing-heading);
  line-height: 1.5;
  white-space: nowrap;
}
.dp-card-voice--b .dp-card-voice__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background-color: #ffffff;
}
.dp-card-voice--b .dp-card-voice__top {
  position: relative;
  flex: 1;
  padding: 2em 1.25rem 0;
  background-image: linear-gradient(to bottom, var(--dp-color-sub) calc(100% - 16px), transparent calc(100% - 16px));
}
.dp-card-voice--b .dp-card-voice__top::before {
  content: "";
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 48px;
  background: var(--dp-color-sub);
  clip-path: polygon(100% 0, 0 0, 0 100%);
}
.dp-card-voice--b .dp-card-voice__heading {
  margin-bottom: var(--dp-space-inner-pc);
  font-size: 18px;
  line-height: var(--dp-line-height-medium);
}
@media screen and (max-width: 1024px) {
  .dp-card-voice--b .dp-card-voice__heading {
    font-size: 16px;
  }
}
.dp-card-voice--b .dp-card-voice__divider {
  border-top: 1px solid var(--dp-color-sub);
  margin: 0;
  opacity: 1;
}
.dp-card-voice--b .dp-card-voice__bottom {
  padding: 1.25rem;
}
.dp-card-voice--b .dp-card-voice__bottom > p {
  margin: 0;
  font-size: var(--dp-font-size-explanation);
  line-height: var(--dp-line-height-large);
}
.dp-card-voice--b .dp-card-voice__effect-label {
  justify-content: center;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--dp-space-inner-pc);
}
.dp-card-voice--b .dp-card-voice__effect-label::before, .dp-card-voice--b .dp-card-voice__effect-label::after {
  content: "";
  display: block;
  flex: 0.1;
  height: 1px;
  background-color: var(--color_text);
}
.dp-card-voice--b .dp-card-voice__effect-title {
  margin: 0;
  font-size: var(--dp-font-size-heading-pc);
}
@media screen and (max-width: 599px) {
  .dp-card-voice--b .dp-card-voice__effect-title {
    font-size: var(--dp-font-size-heading-sp);
  }
}

/* ----------------------------------------------
 dp-card-voice--c
 アイコン＋ラベル＋見出し＋感想テキストカード
 Figma: group_row / label_profile / label_role
 ---------------------------------------------- */
.dp-card-voice--c .swell-block-column {
  background: #fff;
  border-radius: var(--dp-radius);
  padding: 32px 40px;
  gap: 16px;
}
@media screen and (max-width: 599px) {
  .dp-card-voice--c .swell-block-column {
    padding: 24px 20px;
  }
}
.dp-card-voice--c .group_row {
  gap: 24px;
}
.dp-card-voice--c .group_row.is-layout-flex {
  align-items: center;
}
.dp-card-voice--c .label_profile {
  flex: 1;
  gap: 8px;
}
.dp-card-voice--c .label_role {
  display: inline-block;
  width: 100%;
  padding: 0.1em 0.75em;
  background-color: var(--color_main);
  color: #fff;
  font-size: var(--dp-font-size-explanation);
  font-weight: 700;
  text-align: center;
  letter-spacing: var(--dp-letter-spacing-text);
  line-height: var(--dp-line-height-medium);
  margin: 0;
}
.dp-card-voice--c .wp-block-image {
  border: 1px solid var(--color_text);
  border-radius: 50%;
  background-color: var(--color_bg);
}
.dp-card-voice--c h3.wp-block-heading {
  font-size: 16px;
  font-weight: 700;
  line-height: var(--dp-line-height-small);
  letter-spacing: var(--dp-letter-spacing-text);
  margin: 0;
}
.dp-card-voice--c .swell-block-column > p {
  font-size: var(--dp-font-size-explanation);
  line-height: var(--dp-line-height-medium);
  letter-spacing: var(--dp-letter-spacing-text);
  margin: 0;
}

@media screen and (max-width: 959px) {
  .dp-card-voice.js-swipe-slider.is-slider-active .swell-block-columns__inner {
    margin-left: 0;
    scroll-padding-left: var(--swl-fw_inner_pad, 0);
  }
  .dp-card-voice.js-swipe-slider.is-slider-active .swell-block-column {
    margin: 0;
  }
}

/* お客様の声カード */
/*

 メディアブロック (media-block)

*/
/* ===========================================
メディア＋テキストセクション
=========================================== */
.dp-media-text-section .swell-block-fullWide__inner > .sp_only img {
  border-radius: var(--dp-radius);
}
.dp-media-text-section .wp-block-image.sp_only {
  margin-bottom: var(--dp-space-block-sp);
}
.dp-media-text-section .wp-block-image.sp_only:last-child {
  margin-bottom: 0;
}
.dp-media-text-section p,
.dp-media-text-section li,
.dp-media-text-section .wp-block-list {
  letter-spacing: var(--dp-letter-spacing-text);
}
.dp-media-text-section .dp-section-title {
  margin-bottom: var(--dp-space-element-pc);
}
@media screen and (max-width: 599px) {
  .dp-media-text-section .dp-section-title {
    margin-bottom: var(--dp-space-element-sp);
    text-align: center;
  }
}
.dp-media-text-section .dp-section-title h2 {
  margin-bottom: 0;
}
.dp-media-text-section .p-summary {
  line-height: var(--dp-line-height-large);
  margin-bottom: var(--dp-space-element-pc);
}
@media screen and (max-width: 599px) {
  .dp-media-text-section .p-summary {
    margin-bottom: var(--dp-space-element-sp);
  }
}
.dp-media-text-section .card-list-icon-heading-text {
  margin-bottom: var(--dp-space-element-pc);
}
@media screen and (max-width: 599px) {
  .dp-media-text-section .card-list-icon-heading-text {
    margin-bottom: var(--dp-space-element-sp);
  }
}
.dp-media-text-section .card-list-icon-heading-text .swell-block-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dp-media-text-section .card-list-icon-heading-text .wp-block-image {
  margin-bottom: 0.75em;
}
.dp-media-text-section .card-list-icon-heading-text .wp-block-image img {
  width: 3.5em;
  height: 3.5em;
  object-fit: contain;
}
.dp-media-text-section .card-list-icon-heading-text .swell-block-column > p:first-of-type {
  font-size: 1.25em;
  font-weight: var(--dp-font-weight-heading);
  font-family: var(--dp-font-num);
  line-height: var(--dp-line-height-small);
  margin-bottom: 0.25em;
}
.dp-media-text-section .card-list-icon-heading-text .swell-block-column > p:last-of-type {
  font-size: 0.8125rem;
}

/* --- キャプションボックス --- */
.cap_box.caption-sub-color {
  --capbox_color: var(--color_text);
}
.cap_box.caption-sub-color .cap_box_ttl {
  top: 0;
  left: var(--dp-space-element-pc);
  padding: var(--dp-space-inner-pc) calc(var(--dp-space-inner-pc) * 2);
  background-color: var(--color_main);
  border-radius: calc(var(--dp-radius) / 2);
}
@media screen and (max-width: 599px) {
  .cap_box.caption-sub-color .cap_box_ttl {
    left: var(--dp-space-element-sp);
    padding: var(--dp-space-inner-pc) calc(var(--dp-space-inner-pc) * 1.25);
  }
}
.cap_box.caption-sub-color .cap_box_ttl span {
  display: block;
  line-height: var(--dp-line-height-medium);
  color: #ffffff;
  text-align: left;
  letter-spacing: var(--dp-letter-spacing-text);
  font-size: 1.125rem;
  font-weight: var(--dp-font-weight-heading);
}
@media screen and (max-width: 599px) {
  .cap_box.caption-sub-color .cap_box_ttl span {
    font-size: 1.05rem;
  }
}
.cap_box.caption-sub-color .cap_box_content {
  margin-top: calc(var(--dp-space-element-pc) * -1);
  margin-bottom: 0;
  padding: calc(var(--dp-space-element-pc) * 1.75) var(--dp-space-element-pc) var(--dp-space-element-pc) var(--dp-space-element-pc);
  background-color: var(--color_bg);
  border-radius: var(--dp-radius);
  border: var(--dp-border-width) solid var(--color_main);
}
@media screen and (max-width: 599px) {
  .cap_box.caption-sub-color .cap_box_content {
    padding: calc(var(--dp-space-element-pc) * 1.5) var(--dp-space-element-sp) var(--dp-space-element-sp) var(--dp-space-element-sp);
  }
}
.cap_box.caption-sub-color .cap_box_content > p {
  font-weight: var(--dp-font-weight-heading);
  margin-bottom: var(--dp-space-inner-pc);
}
@media screen and (max-width: 599px) {
  .cap_box.caption-sub-color .cap_box_content > p {
    margin-bottom: var(--dp-space-inner-pc);
  }
}
.cap_box.caption-sub-color .p-copy {
  margin-bottom: calc(var(--dp-space-inner-pc) * 1.25);
  line-height: var(--dp-line-height-medium);
  letter-spacing: var(--dp-letter-spacing-text);
  font-size: 1.125rem;
  font-weight: var(--dp-font-weight-heading);
}
@media screen and (max-width: 599px) {
  .cap_box.caption-sub-color .p-copy {
    margin-bottom: var(--dp-space-inner-pc);
    font-size: inherit;
  }
}
.cap_box.caption-sub-color .wp-block-list {
  margin-bottom: 0;
}
.cap_box.caption-sub-color .wp-block-list li {
  margin: 0 0 calc(var(--dp-space-inner-pc) / 2);
}
@media screen and (max-width: 599px) {
  .cap_box.caption-sub-color .wp-block-list li {
    margin: 0 0 calc(var(--dp-space-inner-sp) / 2);
    font-size: 0.875em;
  }
}
.cap_box.caption-sub-color .wp-block-list li:last-child {
  margin-bottom: 0;
}

/* --- メイン2カラム（画像 + テキスト） --- */
.dp-media-text-block {
  gap: 3em;
  align-items: stretch;
}
@media screen and (max-width: 599px) {
  .dp-media-text-block {
    margin-bottom: var(--dp-space-block-sp);
  }
}
.dp-media-text-block .media-block {
  flex: 0 0 50%;
  min-width: 0;
}
.dp-media-text-block .media-block > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: var(--dp-space-element-pc);
}
.dp-media-text-block .media-block .wp-block-image {
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
}
.dp-media-text-block .media-block .wp-block-image img {
  width: 100%;
  height: 100%;
  border-radius: var(--dp-radius);
  object-fit: cover;
}
.dp-media-text-block .text-block {
  flex: 1;
  min-width: 0;
}
@media screen and (max-width: 959px) {
  .dp-media-text-block .text-block {
    max-width: 540px;
    margin: 0 auto;
  }
}

/* ===========================================
連番用：親セクションでカウンター 共通プレーンコード
※以下、メディアブロックの親要素に設定してください
=========================================== */
.dp-media-text-block-counter {
  counter-reset: media-num;
}

/* ===========================================
カウンター付きメディアブロック 定番の左右交互 反復想定
前提：.dp-media-text-block-counter の付与が必要です
=========================================== */
.dp-media-text-block--a {
  counter-increment: media-num;
  position: relative;
  margin-bottom: calc(var(--dp-space-block-pc) * 2);
}
@media screen and (max-width: 768px) {
  .dp-media-text-block--a {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
}
@media screen and (max-width: 599px) {
  .dp-media-text-block--a {
    margin-bottom: var(--dp-space-block-sp);
  }
}
.dp-media-text-block--a::before {
  content: "";
  position: absolute;
  top: var(--dp-space-block-pc);
  left: var(--dp-space-block-pc);
  transform: none;
  width: calc(100% + (100vw - 100%) / 2);
  height: 100%;
  border-radius: var(--dp-radius) 0 0 var(--dp-radius);
  background-color: var(--color_main_thin);
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .dp-media-text-block--a::before {
    top: var(--dp-space-element-pc);
    left: 0;
  }
}
@media screen and (max-width: 599px) {
  .dp-media-text-block--a::before {
    top: var(--dp-space-inner-pc);
  }
}
@media screen and (max-width: 768px) {
  .dp-media-text-block--a:has(> .text-block:first-child) {
    flex-direction: column-reverse;
  }
}
.dp-media-text-block--a:has(> .text-block:first-child)::before {
  left: auto;
  right: var(--dp-space-block-pc);
  border-radius: 0 var(--dp-radius) var(--dp-radius) 0;
  width: calc(100% + (100vw - 100%) / 2);
}
@media screen and (max-width: 768px) {
  .dp-media-text-block--a:has(> .text-block:first-child)::before {
    right: 0;
  }
}
.dp-media-text-block--a .media-block {
  min-height: 0;
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .dp-media-text-block--a .media-block {
    flex: none;
    max-width: 540px;
    width: 100%;
    height: 280px;
    overflow: hidden;
    margin: 0 auto;
  }
  .dp-media-text-block--a .media-block .wp-block-image {
    height: 100%;
  }
}
@media screen and (max-width: 599px) {
  .dp-media-text-block--a .media-block {
    width: calc(100% - 40px);
    height: 240px;
    overflow: hidden;
  }
  .dp-media-text-block--a .media-block .wp-block-image {
    height: 100%;
  }
}
.dp-media-text-block--a .media-block img {
  width: 100%;
  height: 100%;
  border-radius: var(--dp-radius);
  object-fit: cover;
}
.dp-media-text-block--a .text-block {
  padding-top: 2.25em;
}
@media screen and (max-width: 768px) {
  .dp-media-text-block--a .text-block {
    margin-top: -4em;
    padding: 2em var(--dp-space-inner-pc) 2em;
  }
}
@media screen and (max-width: 599px) {
  .dp-media-text-block--a .text-block {
    margin-top: -1.5em;
    padding: 0 var(--dp-space-inner-pc) 1.5em;
  }
}
.dp-media-text-block--a h3 {
  position: relative;
  margin-bottom: var(--dp-space-inner-pc);
  letter-spacing: var(--dp-letter-spacing-text);
  font-size: clamp(20px, 1.2vw, 24px);
  font-weight: 600;
}
.dp-wrap .dp-media-text-block--a h3::before {
  content: counter(media-num, decimal-leading-zero);
  display: block;
  margin-bottom: 0.125em;
  color: var(--color_main);
  line-height: 1;
  font-size: calc(var(--dp-font-size-title-pc) * 1.5);
  font-weight: 300;
  font-family: var(--dp-font-num);
  mix-blend-mode: multiply;
}

.dp-media-text-block--a p {
  margin-bottom: 0;
  line-height: var(--dp-line-height-medium);
  letter-spacing: var(--dp-letter-spacing-text);
}

/* ===========================================
テキストブロック中央配置 メディアブロック左右配置 反復なし
カウンターなし
=========================================== */
.dp-media-text-block--b {
  justify-content: center;
}
.dp-media-text-block--b .text-block {
  min-width: 480px;
}
@media screen and (max-width: 599px) {
  .dp-media-text-block--b .text-block {
    min-width: 0;
  }
}
.dp-media-text-block--b .dp-section-title {
  justify-content: center;
}
@media screen and (max-width: 599px) {
  .dp-media-text-block--b .p-summary {
    text-align: left;
  }
}
.dp-media-text-block--b .media-block {
  overflow: hidden;
  border-radius: var(--dp-radius);
}
.dp-media-text-block--b .media-block:first-child {
  margin-bottom: auto;
}
.dp-media-text-block--b .media-block:last-child {
  margin-top: auto;
}
.dp-media-text-block--b .media-block img {
  height: 660px;
  object-fit: cover;
}

/* ===========================================
カウンター付きメディアブロック カウンター縦向き 最右配置 反復想定 
前提：.dp-media-text-block-counter の付与が必要です
=========================================== */
.dp-media-text-block--c {
  counter-increment: section-counter;
  background-color: var(--color_bg);
  border-radius: var(--dp-radius);
  overflow: hidden;
  margin-bottom: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--dp-space-element-pc);
  padding: var(--dp-space-element-pc);
}
@media screen and (max-width: 959px) {
  .dp-media-text-block--c {
    padding: 0 0 var(--dp-space-element-sp);
  }
}
.dp-media-text-block--c + .wp-block-group {
  border-top: 2px dashed var(--color_main_thin);
}
@media screen and (max-width: 959px) {
  .dp-media-text-block--c + .wp-block-group {
    padding-top: var(--dp-space-element-sp);
  }
}
@media screen and (max-width: 959px) {
  .dp-media-text-block--c {
    align-items: stretch;
    gap: var(--dp-space-element-sp);
  }
}
@media screen and (max-width: 599px) {
  .dp-media-text-block--c {
    flex-direction: column;
    gap: var(--dp-space-inner-sp);
  }
}
.dp-media-text-block--c::before {
  content: "REASON " counter(section-counter, decimal-leading-zero);
  flex-shrink: 0;
  display: block;
  align-self: center;
  width: 22px;
  writing-mode: vertical-rl;
  font-family: var(--dp-font-en);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.25em;
  color: var(--color_text);
  white-space: nowrap;
}
@media screen and (max-width: 599px) {
  .dp-media-text-block--c::before {
    writing-mode: horizontal-tb;
    width: auto;
  }
}
.dp-media-text-block--c > .wp-block-image {
  flex-shrink: 0;
  width: 340px;
  overflow: hidden;
  border-radius: var(--dp-radius);
}
.dp-media-text-block--c > .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 959px) {
  .dp-media-text-block--c > .wp-block-image {
    flex: 0 0 30%;
    aspect-ratio: 4/3;
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 599px) {
  .dp-media-text-block--c > .wp-block-image {
    width: calc(100% - var(--dp-space-element-pc));
    margin: 0 auto;
  }
}
.dp-media-text-block--c > .wp-block-group {
  flex: 1;
  min-width: 0;
}
.dp-media-text-block--c h3 {
  font-size: var(--dp-font-size-heading-pc);
  font-weight: var(--dp-font-weight-heading);
  margin-bottom: var(--dp-space-inner-pc);
}
@media screen and (max-width: 599px) {
  .dp-media-text-block--c h3 {
    font-size: var(--dp-font-size-heading-sp);
  }
}
.dp-media-text-block--c p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: var(--dp-space-inner-pc);
}

/* ===========================================
メディア＋テキストセクション
左:テキスト 右：メディア（画像や動画） スクロール時に固定位置
=========================================== */
.dp-media-text-section--sticky {
  height: auto;
  padding-bottom: clamp(40px, 9vw, 160px) !important;
}
@media screen and (max-width: 1024px) {
  .dp-media-text-section--sticky {
    padding-top: 40px !important;
  }
}
@media screen and (max-width: 599px) {
  .dp-media-text-section--sticky .dp-section-title p br {
    display: none;
  }
}
.post_content .dp-media-text-section--sticky h2 {
  margin-top: 24px;
  margin-bottom: 24px !important;
  letter-spacing: clamp(1px, 0.8vw, 3px);
  font-size: clamp(24px, 3vw, 32px);
  font-feature-settings: "palt";
}

.dp-media-text-section--sticky .dp-media-text-section--sticky__lead {
  margin-bottom: clamp(24px, 3.8vw, 48px) !important;
  letter-spacing: clamp(1px, 0.8vw, 3px);
  font-size: clamp(16px, 1.6vw, 24px);
}
.dp-media-text-section--sticky .dp-media-text-section--sticky__explanation p {
  margin-bottom: clamp(24px, 3.8vw, 48px) !important;
  line-height: 2.2;
  letter-spacing: clamp(1px, 0.8vw, 3px);
  font-size: clamp(14px, 1.6vw, 18px);
}
@media screen and (max-width: 1024px) {
  .dp-media-text-section--sticky .dp-media-text-section--sticky__explanation p {
    line-height: 1.6;
  }
  .dp-media-text-section--sticky .dp-media-text-section--sticky__explanation p:not(.dp-media-text-section--sticky__lead) {
    margin-bottom: clamp(20px, 2vw, 24px) !important;
  }
  .dp-media-text-section--sticky .dp-media-text-section--sticky__explanation p:not(.dp-media-text-section--sticky__lead) br {
    display: none;
  }
}

/* ===========================================
メディアブロックを伸ばす
=========================================== */
.dp-media-text-block--stretch .wp-block-image {
  display: flex;
  height: 100%;
}
.dp-media-text-block--stretch .wp-block-image figure {
  display: flex;
}
.dp-media-text-block--stretch .wp-block-image figure img {
  object-fit: cover;
}
.dp-media-text-block--stretch iframe {
  height: 100%;
}
@media screen and (max-width: 959px) {
  .dp-media-text-block--stretch iframe {
    height: 400px;
  }
}

.dp-stretch-image {
  height: 100%;
}
.dp-stretch-image img {
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 599px) {
  .dp-stretch-image {
    height: auto;
  }
}

/* ===========================================
メディアブロックを反転 SWELL標準ブレイクポイントに準拠
=========================================== */
/* bp: 959px */
@media screen and (max-width: 959px) {
  .dp-reverse--bp > div {
    flex-direction: column-reverse;
  }
}
/* sp: 599px */
@media screen and (max-width: 599px) {
  .dp-reverse--sp > div {
    flex-direction: column-reverse;
  }
}
/* ===========================================
dp-media-text-block-works-a: Works事例 左メディア・右テキスト
wp:loos/columns に付与（SWELLリッチカラム）
（dp-cardやアコーディオンのCSS再実装は行わない）
=========================================== */
.dp-media-text-block-works-a {
  position: relative;
  counter-increment: media-num;
  background-color: white;
  margin-bottom: var(--dp-space-block-pc);
  padding: var(--dp-space-element-pc);
  border-radius: var(--dp-radius);
}
@media screen and (max-width: 599px) {
  .dp-media-text-block-works-a {
    margin-bottom: var(--dp-space-block-sp);
    padding: var(--dp-space-element-sp);
  }
}
.dp-media-text-block-works-a::before {
  position: absolute;
  top: calc(var(--dp-space-element-pc) * -1);
  left: var(--dp-space-element-pc);
  content: counter(media-num, decimal-leading-zero);
  display: block;
  color: var(--color_main_thin);
  line-height: 1;
  font-size: calc(var(--dp-font-size-title-pc) * 3.5);
  font-weight: bold;
  font-family: var(--dp-font-num);
}
@media screen and (max-width: 599px) {
  .dp-media-text-block-works-a::before {
    left: var(--dp-space-element-sp);
    font-size: calc(var(--dp-font-size-title-sp) * 3.5);
  }
}
.dp-media-text-block-works-a .media-block h3 {
  color: var(--color_main);
  font-size: calc(var(--dp-font-size-heading-pc) * 1.25);
}
@media screen and (max-width: 599px) {
  .dp-media-text-block-works-a .media-block h3 {
    font-size: calc(var(--dp-font-size-heading-sp) * 1.25);
  }
}
.dp-media-text-block-works-a .media-block .wp-block-image {
  position: relative;
  margin-bottom: 0;
}
.dp-media-text-block-works-a .media-block .wp-block-image figcaption {
  position: absolute;
  bottom: -1.5em;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  border-radius: var(--dp-radius);
  padding: var(--dp-space-inner-sp) var(--dp-space-inner-pc);
  color: var(--color_main);
  white-space: nowrap;
  line-height: var(--dp-line-height-medium);
  box-shadow: var(--dp-shadow);
  opacity: 1;
}
.dp-media-text-block-works-a .text-block .works-price-bar {
  padding: 0 var(--dp-space-element-sp);
  margin-bottom: var(--dp-space-inner-pc);
}
@media screen and (max-width: 599px) {
  .dp-media-text-block-works-a .text-block .works-price-bar {
    padding: 0 var(--dp-space-inner-sp);
  }
}
.dp-media-text-block-works-a .text-block .works-price-bar p {
  margin: 0;
  font-size: 1.125rem;
  font-weight: var(--dp-font-weight-heading);
}
.dp-media-text-block-works-a .text-block .works-price-bar p strong {
  margin: 0 2px 0 8px;
  font-size: 2.3rem;
  font-family: var(--dp-font-num);
  letter-spacing: 0.025em;
}
@media screen and (max-width: 959px) {
  .dp-media-text-block-works-a .text-block .works-price-bar p strong {
    font-size: 2rem;
  }
}
.dp-media-text-block-works-a .text-block > p {
  color: var(--color_main);
  margin-bottom: var(--dp-space-element-sp);
}
@media screen and (max-width: 599px) {
  .dp-media-text-block-works-a .text-block .works-price-bar p strong {
    font-size: 2.25rem;
  }
}

/* ===========================================
Works スライダー（center mode, 1.2 slides visible）
.dp-works-slider を wp-block-group に付与すると発動
=========================================== */
.dp-works-slider-outer {
  position: relative;
}
.dp-works-slider-outer .dp-slider-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.dp-works-slider-outer .dp-slider-nav__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color_bg);
  border: 1px solid var(--color_text);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}
.dp-works-slider-outer .dp-slider-nav__btn [class*=icon-] {
  font-size: 14px;
  line-height: 1;
  display: block;
}
.dp-works-slider-outer .dp-slider-nav__btn.is-edge {
  opacity: 0.5;
}
.dp-works-slider-outer .dp-slider-nav__btn:not(.is-edge):hover {
  background: var(--color_text);
  color: var(--color_bg);
}
.dp-works-slider-outer .dp-slider-nav__prev {
  left: 0;
}
.dp-works-slider-outer .dp-slider-nav__next {
  right: 0;
}

/* ===========================================
dp-works-slider-b: Works-03 スライダーコンテナ
・fullWide（contentSize:full）内で使用
・セクションタイトル（dp-section-title--f）と左端を揃える
・注：このDPは原則スライドアイテムを4枚以上で使用すること
  3枚以下の場合は自動的に3カラムグリッド表示になる
=========================================== */
.dp-works-slider-b {
  position: relative;
  margin: 0 auto;
}
.dp-works-slider-b:not(.is-slider-active) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--dp-space-element-sp);
  padding-right: var(--swl-fw_inner_pad, 0);
}
@media screen and (max-width: 959px) {
  .dp-works-slider-b:not(.is-slider-active) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 599px) {
  .dp-works-slider-b:not(.is-slider-active) {
    grid-template-columns: 1fr;
  }
}
.dp-works-slider-b .dp-works-slider-inner {
  position: relative;
  z-index: 1;
}

/* ===========================================
dp-media-text-block-works-b: Works事例カード型スライダー
シンプルカード（画像＋タイトル）
wp:group に付与（js-works-slider-item 兼用）
=========================================== */
.dp-media-text-block-works-b {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  border-radius: var(--dp-radius);
  padding: 24px;
}
.dp-media-text-block-works-b .wp-block-image {
  margin-bottom: 0;
  border-radius: var(--dp-radius);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.dp-media-text-block-works-b .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dp-media-text-block-works-b h3 {
  margin-top: var(--dp-space-inner-pc);
  margin-bottom: 0;
  font-size: 18px;
  font-weight: var(--dp-font-weight-heading);
  line-height: var(--dp-line-height-medium);
  color: var(--color_text);
}
@media screen and (max-width: 599px) {
  .dp-media-text-block-works-b h3 {
    font-size: var(--dp-font-size-heading-sp);
  }
}

.dp-works-slider-inner > .dp-media-text-block-works-b.js-works-slider-item {
  width: 28.5714285714%;
}
@media screen and (max-width: 959px) {
  .dp-works-slider-inner > .dp-media-text-block-works-b.js-works-slider-item {
    width: 45.4545454545%;
  }
}
@media screen and (max-width: 599px) {
  .dp-works-slider-inner > .dp-media-text-block-works-b.js-works-slider-item {
    width: 83.3333333333%;
  }
}

.dp-works-slider-inner {
  display: flex !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: var(--dp-space-element-sp);
}
.dp-works-slider-inner::-webkit-scrollbar {
  display: none;
}
.dp-works-slider-inner > .js-works-slider-item {
  flex-shrink: 0;
  width: 83.3333333333%;
  scroll-snap-align: center;
  max-width: none !important;
  margin-bottom: 0;
}

/* メディアブロック */
/* ===========================================
   ステップ (step) - DP Optimized
   【実装ルール】
   - ブロック: TYPE-M（wp:loos/step）を使用すること（TYPE-Eの旧API wp:swell/step は非推奨）
   - .swell-block-step__title はデザインによってdisplay:none対象になるケースがある
   - H3タイトルを使う場合は .swell-block-step__body 内に wp:heading で配置する
   - 新規バリアントはこのファイル末尾に追記すること
=========================================== */
.dp-step-list .swell-block-step__title {
  margin-top: 0;
  margin-bottom: 0;
}

.dp-step-list--a {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--dp-space-element-pc) var(--dp-space-element-sp);
  margin-bottom: var(--dp-space-element-pc);
}
@media screen and (max-width: 959px) {
  .dp-step-list--a {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 599px) {
  .dp-step-list--a {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: var(--dp-space-block-sp);
  }
}
.dp-step-list--a .swell-block-step__item {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  padding: 0;
  text-align: center;
}
@media screen and (max-width: 599px) {
  .dp-step-list--a .swell-block-step__item {
    align-items: flex-start;
    text-align: left;
    padding: 0 1em var(--dp-space-element-sp) 4em;
  }
}
.dp-step-list--a .swell-block-step__item::before {
  content: "" !important;
  position: absolute !important;
  top: 1.5em !important;
  left: calc(-50% + 16px) !important;
  width: calc(100% - 56px) !important;
  height: 0 !important;
  border: none !important;
  border-top: 1px solid var(--color_text) !important;
  background: none !important;
  transform: none !important;
}
@media screen and (max-width: 599px) {
  .dp-step-list--a .swell-block-step__item::before {
    display: none !important;
  }
}
.dp-step-list--a .swell-block-step__item:first-child::before {
  display: none !important;
}
@media screen and (max-width: 959px) {
  .dp-step-list--a .swell-block-step__item:nth-child(3n+1)::before {
    display: none !important;
  }
}
.dp-step-list--a .swell-block-step__item::after {
  display: none;
}
@media screen and (max-width: 599px) {
  .dp-step-list--a .swell-block-step__item::after {
    content: "";
    display: block;
    position: absolute;
    top: 60px;
    left: 24px;
    width: 0;
    height: calc(100% - 72px);
    border-left: 1px solid var(--color_text);
  }
}
@media screen and (max-width: 599px) {
  .dp-step-list--a .swell-block-step__item:last-child {
    padding-bottom: 0;
  }
  .dp-step-list--a .swell-block-step__item:last-child::after {
    display: none;
  }
}
.dp-step-list--a .swell-block-step__item:not(:last-child) .swell-block-step__number {
  background-color: var(--color_bg) !important;
  color: var(--color_text) !important;
  border: 1px solid var(--color_text) !important;
  font-weight: 500;
}
.dp-step-list--a .swell-block-step__number {
  position: relative;
  margin-bottom: 1em;
  font-family: var(--dp-font-num);
}
@media screen and (max-width: 599px) {
  .dp-step-list--a .swell-block-step__number {
    position: absolute !important;
    top: 0;
    left: 0;
    margin-bottom: 0;
    z-index: 1;
  }
}
.dp-step-list--a .swell-block-step__number::after {
  font-size: 12px;
}
.dp-step-list--a .swell-block-step__number .__label {
  font-family: var(--dp-font-en);
}
.dp-step-list--a .swell-block-step__title {
  display: none !important;
}
@media screen and (max-width: 599px) {
  .dp-step-list--a .swell-block-step__body {
    width: 100%;
    margin-left: -16px !important;
  }
}
.dp-step-list--a .swell-block-step__body .wp-block-image {
  margin-bottom: 1em;
}
.dp-step-list--a .swell-block-step__body .wp-block-image img {
  width: 7em;
  height: 7em;
  object-fit: contain;
}
@media screen and (max-width: 599px) {
  .dp-step-list--a .swell-block-step__body .wp-block-image img {
    width: 100%;
  }
}
.dp-step-list--a .swell-block-step__body .wp-block-image.icon-sns img {
  padding: 1em;
}
.dp-step-list--a .swell-block-step__body h3 {
  font-size: var(--dp-font-size-summary);
  font-weight: var(--dp-font-weight-heading);
  margin-bottom: var(--dp-space-inner-pc);
}
@media screen and (max-width: 599px) {
  .dp-step-list--a .swell-block-step__body h3 {
    text-align: center;
  }
}
.dp-step-list--a .swell-block-step__body .card-explanation {
  text-align: center;
  font-size: var(--dp-font-size-explanation);
  line-height: var(--dp-line-height-medium);
}
@media screen and (max-width: 599px) {
  .dp-step-list--a .swell-block-step__body .card-explanation {
    font-size: inherit;
  }
}

/* -------------------------------------------
 * dp-step-list--b: 縦タイムライン型ステップリスト
 * ------------------------------------------- */
.dp-step-list--b {
  display: flex;
  flex-direction: column;
  max-width: 768px;
  margin: 0 auto;
}
.dp-step-list--b .swell-block-step__item {
  display: grid !important;
  grid-template-columns: 96px 1fr;
  grid-template-rows: auto auto;
  column-gap: 64px;
  padding-left: 0;
  padding-bottom: var(--dp-space-block-pc);
  position: relative;
}
@media screen and (max-width: 599px) {
  .dp-step-list--b .swell-block-step__item {
    grid-template-columns: 64px 1fr;
    column-gap: var(--dp-space-inner-pc);
    padding-bottom: var(--dp-space-element-sp);
  }
}
.dp-step-list--b .swell-block-step__item:last-child {
  padding-bottom: 0;
}
.dp-step-list--b .swell-block-step__item:not(:last-child)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 112px !important;
  left: 48px !important;
  width: 0 !important;
  height: calc(100% - 128px) !important;
  border-left: 2px solid var(--color_text) !important;
  background: none !important;
  border-top: none !important;
  transform: none !important;
}
@media screen and (max-width: 599px) {
  .dp-step-list--b .swell-block-step__item:not(:last-child)::after {
    top: 74px !important;
    left: 32px !important;
    height: calc(100% - 80px) !important;
  }
}
.dp-step-list--b .swell-block-step__item::before {
  content: none !important;
}
.dp-step-list--b .swell-block-step__number {
  grid-column: 1;
  grid-row: 1/3;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: var(--color_bg) !important;
  color: var(--color_text) !important;
  border: 2px solid var(--color_text) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--dp-font-num);
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-bottom: 0;
}
@media screen and (max-width: 599px) {
  .dp-step-list--b .swell-block-step__number {
    width: 64px;
    height: 64px;
  }
}
.dp-step-list--b .swell-block-step__number .__shape {
  display: none;
}
.dp-step-list--b .swell-block-step__number .__label {
  font-family: var(--dp-font-en);
  font-size: 10px;
  line-height: 1;
}
.dp-step-list--b .swell-block-step__number::after {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  line-height: 1;
}
.dp-step-list--b .swell-block-step__title {
  font-size: 24px;
}
.dp-step-list--b .swell-block-step__body {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
}
@media screen and (max-width: 599px) {
  .dp-step-list--b .swell-block-step__body {
    margin-left: 0 !important;
  }
}
.dp-step-list--b .swell-block-step__body .wp-block-image {
  position: relative;
  margin-bottom: var(--dp-space-inner-pc);
}
.dp-step-list--b .swell-block-step__body .wp-block-image::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--color_text);
  border-radius: var(--dp-radius);
}
.dp-step-list--b .swell-block-step__body .wp-block-image img {
  border-radius: var(--dp-radius);
}

/* -------------------------------------------
 * dp-step-list--c: 縦タイムライン型（スモール・時間軸）
 * is-style-small 前提 / 時間＋小円形＋縦ライン＋テキスト
 * ------------------------------------------- */
.dp-step-list--c {
  display: flex;
  flex-direction: column;
  max-width: 768px;
  margin: 0 auto;
}
.dp-step-list--c .swell-block-step__item {
  display: grid;
  grid-template-columns: 110px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--dp-space-element-sp);
  padding-bottom: var(--dp-space-element-pc);
  position: relative;
}
@media screen and (max-width: 599px) {
  .dp-step-list--c .swell-block-step__item {
    grid-template-columns: 64px 1fr;
    column-gap: var(--dp-space-inner-pc);
    padding-bottom: var(--dp-space-element-sp);
  }
}
.dp-step-list--c .swell-block-step__item:last-child {
  padding-bottom: 0;
}
.dp-step-list--c .swell-block-step__item::before {
  content: none !important;
}
.dp-step-list--c .swell-block-step__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;
  left: 101px;
  height: calc(100% - 32px);
  border-left: 1px solid var(--color_text);
}
@media screen and (max-width: 599px) {
  .dp-step-list--c .swell-block-step__item:not(:last-child)::after {
    top: 32px;
    left: 71px;
    height: calc(100% - 32px);
  }
}
.dp-step-list--c .swell-block-step__number {
  font-family: var(--dp-font-num);
}
.dp-step-list--c .swell-block-step__number::after {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  line-height: 1;
}
.dp-step-list--c .swell-block-step__number .__shape {
  position: absolute;
  right: 16px;
  top: 10px;
  background-color: var(--color_bg);
  z-index: 1;
}
@media screen and (max-width: 599px) {
  .dp-step-list--c .swell-block-step__number .__shape {
    top: 8px;
    right: 0;
  }
}
.dp-step-list--c .swell-block-step__body {
  grid-column: 2;
  grid-row: 2;
}
.dp-step-list--c .swell-block-step__body .wp-block-image {
  margin-bottom: var(--dp-space-inner-pc);
}

/* ステップ */
/*

 overview-01 見出し+説明３つ縦並び (OVERVIEWページ)

*/
/*--------------------------------------------------------

 overview-01 タイトル縦向き 見出し+説明３つ縦並び

 --------------------------------------------------------*/
.dp-overview-section {
  position: relative;
  padding-top: 96px !important;
  background-color: transparent;
  transition: background-color 0.6s ease;
  will-change: background-color;
}
@media screen and (max-width: 599px) {
  .dp-overview-section {
    margin-top: -160px;
  }
}
.dp-overview-section.is-active {
  background-color: var(--color_main);
}
.dp-overview-section.is-active * {
  color: white !important;
}
.dp-overview-section > div {
  padding: 0 16px;
}
.dp-overview-section .media-block {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1512px;
  height: 100%;
  pointer-events: none;
}
.dp-overview-section .media-block figure {
  position: absolute;
  margin: 0;
  opacity: 0.2;
  line-height: 0;
}
.dp-overview-section .media-block figure img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media screen and (max-width: 599px) {
  .dp-overview-section .media-block figure img {
    height: 180px;
    object-fit: cover;
  }
}
.dp-overview-section .media-block figure:nth-child(1) {
  top: 0;
  left: 5%;
  width: 460px;
}
@media screen and (max-width: 1024px) {
  .dp-overview-section .media-block figure:nth-child(1) {
    width: 380px;
    left: 0;
  }
}
@media screen and (max-width: 959px) {
  .dp-overview-section .media-block figure:nth-child(1) {
    width: 280px;
    left: 0;
  }
}
@media screen and (max-width: 599px) {
  .dp-overview-section .media-block figure:nth-child(1) {
    width: 130px;
    left: 0;
  }
}
.dp-overview-section .media-block figure:nth-child(2) {
  top: 15%;
  right: 5%;
  width: 530px;
}
@media screen and (max-width: 1024px) {
  .dp-overview-section .media-block figure:nth-child(2) {
    width: 374px;
    top: 15%;
    right: 5%;
  }
}
@media screen and (max-width: 959px) {
  .dp-overview-section .media-block figure:nth-child(2) {
    width: 314px;
    top: 20%;
    right: 5%;
  }
}
@media screen and (max-width: 599px) {
  .dp-overview-section .media-block figure:nth-child(2) {
    width: 180px;
    top: 15%;
    right: 0;
  }
}
.dp-overview-section .media-block figure:nth-child(3) {
  top: 60%;
  right: 0;
  width: 520px;
}
@media screen and (max-width: 1024px) {
  .dp-overview-section .media-block figure:nth-child(3) {
    width: 378px;
    top: 78%;
    right: 12%;
  }
}
@media screen and (max-width: 959px) {
  .dp-overview-section .media-block figure:nth-child(3) {
    width: 318px;
    top: 78%;
    right: 5%;
  }
}
@media screen and (max-width: 599px) {
  .dp-overview-section .media-block figure:nth-child(3) {
    width: 160px;
    top: 55%;
    right: 5%;
  }
}
.dp-overview-section .media-block figure:nth-child(4) {
  top: 35%;
  left: 7%;
  width: 420px;
}
@media screen and (max-width: 1024px) {
  .dp-overview-section .media-block figure:nth-child(4) {
    width: 398px;
    top: 50%;
    left: 7%;
  }
}
@media screen and (max-width: 959px) {
  .dp-overview-section .media-block figure:nth-child(4) {
    width: 328px;
    top: 50%;
    left: 5%;
  }
}
@media screen and (max-width: 599px) {
  .dp-overview-section .media-block figure:nth-child(4) {
    width: 160px;
    top: 35%;
    left: 5%;
  }
}
.dp-overview-section .media-block figure:nth-child(5) {
  bottom: 80px;
  left: 5%;
  width: 480px;
}
@media screen and (max-width: 1024px) {
  .dp-overview-section .media-block figure:nth-child(5) {
    width: 380px;
    left: 0;
  }
}
@media screen and (max-width: 959px) {
  .dp-overview-section .media-block figure:nth-child(5) {
    width: 330px;
  }
}
@media screen and (max-width: 599px) {
  .dp-overview-section .media-block figure:nth-child(5) {
    width: 200px;
  }
}
.dp-overview-section .text-block {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  z-index: 1;
}
@media screen and (max-width: 1024px) {
  .dp-overview-section .text-block {
    max-width: 640px;
  }
}
.dp-overview-section .text-block > div {
  display: flex;
  gap: 48px;
}
@media screen and (max-width: 599px) {
  .dp-overview-section .text-block > div {
    flex-direction: column;
  }
}
.dp-overview-section .sticky-heading {
  position: sticky;
  top: 128px;
  align-self: flex-start;
  max-width: 110px;
  width: 100%;
  writing-mode: vertical-rl;
}
@media screen and (max-width: 599px) {
  .dp-overview-section .sticky-heading {
    position: relative;
    top: 0;
    align-self: auto;
    max-width: 100%;
    writing-mode: horizontal-tb;
  }
}
.dp-overview-section .sticky-heading h2 {
  height: max-content;
  margin-right: 16px;
  margin-bottom: 16px;
  line-height: 1;
  text-indent: -3px;
  text-align: left;
  letter-spacing: clamp(2px, 0.2vw, 4px);
  font-size: clamp(32px, 3.5vw, 48px);
}
@media screen and (max-width: 599px) {
  .dp-overview-section .sticky-heading h2 {
    margin-right: 0;
    line-height: 1.2;
  }
  .dp-overview-section .sticky-heading h2 br {
    display: none;
  }
}
.dp-overview-section .sticky-heading .en-title {
  text-align: left;
}
.dp-overview-section .text-content {
  max-width: 570px;
  margin-left: auto;
}
@media screen and (max-width: 599px) {
  .dp-overview-section .text-content {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
  }
}
.dp-overview-section .text-content .content-item {
  margin-bottom: 308px;
}
@media screen and (max-width: 599px) {
  .dp-overview-section .text-content .content-item {
    margin-bottom: 96px;
  }
}
.dp-overview-section .text-content .content-item:last-child {
  margin-bottom: 0;
}
.dp-overview-section .text-content .content-item h3 {
  display: inline-block;
  margin-bottom: 32px;
  padding-bottom: 32px;
  line-height: 1;
  letter-spacing: 8px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: bold;
}
@media screen and (max-width: 599px) {
  .dp-overview-section .text-content .content-item h3 {
    margin-bottom: 16px;
    padding-bottom: 16px;
    line-height: 1.4;
    letter-spacing: 2px;
  }
}
.dp-overview-section .text-content .content-item h3 .large-font {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: bold;
  font-family: var(--font_num);
}
.dp-overview-section .text-content .content-item p {
  margin: 0;
  line-height: 1.6;
  letter-spacing: clamp(2px, 1vw, 6px);
  font-size: clamp(16px, 2vw, 20px);
}
@media screen and (max-width: 599px) {
  .dp-overview-section .text-content .content-item p {
    letter-spacing: 1px;
  }
  .dp-overview-section .text-content .content-item p br {
    display: none;
  }
}
.dp-overview-section.overview-02 .dp-section-title {
  margin-bottom: 128px;
}
@media screen and (max-width: 599px) {
  .dp-overview-section.overview-02 .dp-section-title {
    margin-bottom: 64px;
  }
}
.dp-overview-section.overview-02 .text-block > div {
  flex-direction: column;
  gap: 24px;
}
.dp-overview-section.overview-02 .text-content {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

/* 概要・コンセプト */
/*

 ヘッダー (header)

*/
/* ヘッダーの最大幅を1440pxに調整 */
.-series .l-header__inner,
.l-footer .l-container,
.l-footer .copyright {
  max-width: calc(1512px + var(--swl-pad_container, 0px) * 2);
}

/* ヘッダー背景透明化 */
.l-header {
  background: transparent;
}

/* ヘッダーナビゲーションの高さ調整 */
.c-gnavWrap {
  margin: auto 0;
}
.c-gnavWrap .c-gnav {
  height: 48px;
}

/* --- ヘッダーCTAボタン (.icon-bubble) --- */
.dp-header-cta {
  gap: 16px;
}
@media screen and (max-width: 959px) {
  .dp-header-cta {
    justify-content: center;
    align-items: center;
  }
}
.dp-header-cta .dp-line-buttom a {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.dp-header-cta .dp-line-buttom a:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.dp-header-cta .dp-phone-button a {
  padding: 0;
  border: none;
  text-align: right;
  transition: opacity 0.3s ease;
}
.dp-header-cta .dp-phone-button a:hover {
  opacity: 0.7;
}
.dp-header-cta .dp-phone-button a strong {
  font-size: clamp(16px, 2vw, var(--dp-font-size-heading-pc));
}
@media screen and (max-width: 959px) {
  .dp-header-cta .dp-phone-button a strong {
    font-size: var(--dp-font-size-heading-pc);
  }
}
.dp-vertical-right-ja {
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  width: 56px;
  transition: transform 0.4s ease;
}
.dp-vertical-right-ja.is-footer-hidden {
  transform: translateY(-50%) translateX(calc(100% + 12px));
}
@media screen and (max-width: 959px) {
  .dp-vertical-right-ja {
    display: none;
  }
}
.dp-vertical-right-ja a {
  writing-mode: vertical-rl;
  height: auto;
  padding: 1em 0.5em;
  text-orientation: upright;
  letter-spacing: 0.1em;
  border-radius: var(--dp-radius);
}
@media screen and (max-width: 959px) {
  .dp-vertical-right-ja a {
    writing-mode: horizontal-tb;
    border-radius: var(--dp-radius);
    padding: 8px 16px;
  }
}
.dp-vertical-right-ja .swl-inline-icon {
  margin-bottom: 0.25em;
}
@media screen and (max-width: 959px) {
  .dp-vertical-right-ja .swl-inline-icon {
    margin-bottom: 0;
  }
}

.editor-styles-wrapper .dp-vertical-right-ja {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  width: auto;
  display: block;
}

/* ヘッダーCTAボタンのアイコンのスペース調整 */
@media screen and (max-width: 959px) {
  .swl-inline-icon {
    margin-right: 0.25em;
  }
}

.l-fixHeader .dp-line-buttom {
  display: none;
}

/* ヘッダーナビゲーション */
/*

 メインビジュアル (hero)

*/
/* 共通: メインビジュアルのタイトルグループ */
.dp-hero-title > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 共通: メインビジュアルのコピー */
.dp-hero-main-copy {
  margin-bottom: var(--dp-space-inner-sp);
  font-size: var(--dp-font-size-page-title-pc);
}
@media screen and (max-width: 599px) {
  .dp-hero-main-copy {
    font-size: var(--dp-font-size-page-title-sp);
  }
}

/*--------------------------------------------

LP用メインビジュアル

 -------------------------------------------*/
/* 共通: SWELL機能のLP(専用ページ)用の最外郭フルワイドクラス */
.dp-lp-hero {
  display: flex;
  height: 100vh;
  max-height: 700px;
  min-height: 600px;
}
.dp-lp-hero > div {
  position: static;
  width: 100%;
}
.dp-lp-hero h1 {
  margin-bottom: var(--dp-space-inner-pc);
  font-size: calc(var(--dp-font-size-page-title-pc) * 1.1);
}
@media screen and (max-width: 959px) {
  .dp-lp-hero h1 {
    font-size: var(--dp-font-size-page-title-pc);
  }
}
@media screen and (max-width: 599px) {
  .dp-lp-hero h1 {
    font-size: 2em;
  }
}
.dp-lp-hero .swl-bg-color {
  display: inline-block;
  padding: 0 var(--dp-space-inner-pc);
  border-radius: var(--dp-radius);
}
@media screen and (max-width: 599px) {
  .dp-lp-hero .swl-bg-color {
    padding: calc(var(--dp-space-inner-sp) / 2) var(--dp-space-inner-sp);
  }
}
.dp-lp-hero .swl-bg-color:not(:last-child) {
  margin-bottom: var(--dp-space-inner-pc);
}
@media screen and (max-width: 599px) {
  .dp-lp-hero .swl-bg-color:not(:last-child) {
    margin-bottom: var(--dp-space-inner-sp);
  }
}
.dp-lp-hero .title-copy-main {
  margin-bottom: var(--dp-space-inner-pc);
  font-size: var(--dp-font-size-heading-pc);
}
@media screen and (max-width: 599px) {
  .dp-lp-hero .title-copy-main {
    font-size: var(--dp-font-size-heading-sp);
  }
}

/*---------------------------------------------

 タイトル＋スライダー（SWELL標準メインビジュアル）

 -------------------------------------------*/
@media screen and (max-width: 599px) {
  .dp-lp-hero--a {
    height: auto;
    max-height: none;
    min-height: 0;
  }
}
.dp-lp-hero--a::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: calc(50% - 96px);
  background-color: var(--color_bg);
}
.dp-lp-hero--a > div {
  display: flex;
  align-items: flex-end;
}
@media screen and (max-width: 599px) {
  .dp-lp-hero--a > div {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}
.dp-lp-hero--a .dp-lp-hero-title--a {
  position: relative;
  z-index: 1;
}
.dp-lp-hero--a .dp-lp-hero-title--a > div {
  align-items: flex-start;
}
.dp-lp-hero--a .dp-lp-hero-title--a > div > .wp-block-group:last-child p {
  margin-bottom: var(--dp-space-inner-pc);
  font-size: var(--dp-font-size-summary);
}
.dp-lp-hero--a .wp-block-image {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: calc(50% + 440px);
  height: calc(100% - 96px);
  border-radius: var(--dp-radius) 0 0 var(--dp-radius);
  overflow: hidden;
}
@media screen and (max-width: 959px) {
  .dp-lp-hero--a .wp-block-image {
    width: calc(100% - 128px);
  }
}
@media screen and (max-width: 599px) {
  .dp-lp-hero--a .wp-block-image {
    position: relative;
    top: 0;
    transform: unset;
    width: calc(100% + var(--swl-fw_inner_pad, 0));
    height: 380px;
  }
  .dp-lp-hero--a .wp-block-image img {
    width: 100%;
  }
}
.dp-lp-hero--a .wp-block-image img {
  width: 100vw;
  height: 100%;
  object-fit: cover;
}

/*--------------------------------------------
 dp-lp-hero--b
 背景: 左右2枚画像 / 中央タイトル / 右下イラスト
 -------------------------------------------*/
.dp-lp-hero--b {
  padding-bottom: 4em !important;
}
@media screen and (max-width: 959px) {
  .dp-lp-hero--b {
    justify-content: center;
    max-height: 900px;
  }
}
@media screen and (max-width: 599px) {
  .dp-lp-hero--b {
    max-height: 500px;
    min-height: 400px;
    padding-bottom: 1em !important;
  }
}
.dp-lp-hero--b .swell-block-fullWide__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 3em;
}
@media screen and (max-width: 959px) {
  .dp-lp-hero--b .swell-block-fullWide__inner {
    justify-content: center;
    padding-bottom: 0;
  }
}
.dp-lp-hero--b .swell-block-fullWide__inner :nth-child(2 of .wp-block-group) {
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 100%;
  display: flex;
  gap: var(--dp-space-inner-pc);
  z-index: 0;
}
@media screen and (max-width: 959px) {
  .dp-lp-hero--b .swell-block-fullWide__inner :nth-child(2 of .wp-block-group) {
    flex-direction: column;
    gap: var(--dp-space-inner-pc);
  }
}
@media screen and (max-width: 599px) {
  .dp-lp-hero--b .swell-block-fullWide__inner :nth-child(2 of .wp-block-group) {
    left: 16px;
    right: 16px;
  }
}
.dp-lp-hero--b .swell-block-fullWide__inner :nth-child(2 of .wp-block-group) .wp-block-image {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: var(--dp-radius);
  margin: 0;
}
@media screen and (max-width: 959px) {
  .dp-lp-hero--b .swell-block-fullWide__inner :nth-child(2 of .wp-block-group) .wp-block-image {
    width: 100%;
    height: 500px;
  }
}
@media screen and (max-width: 599px) {
  .dp-lp-hero--b .swell-block-fullWide__inner :nth-child(2 of .wp-block-group) .wp-block-image {
    border-radius: 12px;
  }
}
.dp-lp-hero--b .swell-block-fullWide__inner :nth-child(2 of .wp-block-group) .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dp-lp-hero--b .swell-block-fullWide__inner :nth-child(3 of .wp-block-group) {
  position: absolute;
  bottom: -96px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(var(--container_size, 0px) + var(--swl-pad_container, 0px) * 2);
  width: 100%;
  z-index: 1;
  pointer-events: none;
  margin: 0;
}
.dp-lp-hero--b .swell-block-fullWide__inner :nth-child(3 of .wp-block-group) img {
  width: auto;
  height: 256px;
}
@media screen and (max-width: 599px) {
  .dp-lp-hero--b .swell-block-fullWide__inner :nth-child(3 of .wp-block-group) img {
    height: 128px;
  }
}
.dp-lp-hero--b .swell-block-fullWide__inner :nth-child(3 of .wp-block-group) :nth-child(1 of .wp-block-image) {
  position: absolute;
  bottom: 0;
  left: 0;
}
@media screen and (max-width: 599px) {
  .dp-lp-hero--b .swell-block-fullWide__inner :nth-child(3 of .wp-block-group) :nth-child(1 of .wp-block-image) {
    bottom: 40px;
  }
}
.dp-lp-hero--b .swell-block-fullWide__inner :nth-child(3 of .wp-block-group) :nth-child(2 of .wp-block-image) {
  position: absolute;
  bottom: 0;
  right: 0;
}
@media screen and (max-width: 599px) {
  .dp-lp-hero--b .swell-block-fullWide__inner :nth-child(3 of .wp-block-group) :nth-child(2 of .wp-block-image) {
    bottom: 40px;
  }
}
.dp-lp-hero--b .hero-title-group {
  position: relative;
  z-index: 2;
  text-align: center;
}
.dp-lp-hero--b .hero-title-group > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dp-lp-hero--b .hero-title-group .title-copy-main {
  letter-spacing: var(--dp-letter-spacing-heading);
  /* 白抜き風 */
  -webkit-text-stroke: 4px #fff; /* 太さ 2px、色 黒 */
  color: inherit; /* 文字の塗りつぶし色（白抜き風） */
  -webkit-text-fill-color: inherit; /* 塗りつぶし色を明示的に指定する場合 */
  paint-order: stroke fill;
}

/*--------------------------------------------------------

 hero-lp-01 施工店LP用

 --------------------------------------------------------*/
.p-main_visual .swell-block-fullWide__inner {
  padding: 0;
}

@media screen and (max-width: 768px) {
  .hero-lp-01 .swell-block-fullWide__inner {
    padding: 0;
  }
}

.hero-lp-01 .hero {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 96px 0 32px;
}
@media screen and (max-width: 768px) {
  .hero-lp-01 .hero {
    height: clamp(790px, 216vw, 820px);
    padding-top: 32px;
  }
}

.hero img {
  pointer-events: none;
}

.hero::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 136px;
  background-color: var(--color_deep04);
}
@media screen and (max-width: 768px) {
  .hero::before {
    height: 160px;
  }
}

.hero::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 136px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 128px 100vw 0;
  border-color: transparent transparent transparent var(--color_deep04);
}
@media screen and (max-width: 768px) {
  .hero::after {
    bottom: 160px;
    border-width: 80px 100vw 0;
  }
}

.hero .hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.hero .hero-bg::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  max-width: 300px;
  width: 100%;
  height: clamp(200px, 20vw, 300px);
  background-image: url("../images/hero/fv_bg_aircondetion.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 160% 0;
  z-index: -1;
}

.hero__container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}
@media screen and (max-width: 768px) {
  .hero__container {
    flex-direction: column;
    max-width: 425px;
    margin-bottom: 16px;
    gap: 0;
  }
}

.hero__container > div {
  width: 100%;
}

.hero__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  gap: 40px;
}

.hero__content-main {
  position: relative;
  width: 72%;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .hero__content-main {
    max-width: 100%;
    width: 100%;
  }
}

.hero__content-main .hero-title {
  position: relative;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .hero__content-main .hero-title {
    margin-bottom: 8px;
    text-align: left;
  }
}

.hero__content-main .hero-title .title-area {
  position: absolute;
  top: 4px;
  left: 16px;
  color: var(--color_header_text);
  font-size: clamp(16px, 2vw, 24px);
  font-weight: bold;
  font-feature-settings: "palt";
}
@media screen and (max-width: 768px) {
  .hero__content-main .hero-title .title-area {
    position: relative;
    top: 0;
    left: 0;
    font-size: clamp(16px, 2vw, 20px);
  }
}

@media (min-width: 1024px) {
  .hero__content-main .hero-title .title-area {
    font-size: 24px;
  }
}
.hero__content-main .hero-title img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .hero__content-sub {
    position: relative;
    display: flex;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .hero__content-sub .hero-feature {
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding: 0;
    z-index: 1;
  }
}

@media screen and (max-width: 768px) {
  .hero .hero__content-sub .hero-model {
    position: absolute;
    top: 0;
    right: -16%;
    max-width: 100%;
    width: 75%;
    margin-top: 0;
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  .hero__content-sub .hero-content-other {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60%;
    z-index: 1;
  }
}

.hero__content-main .hero-feature > div {
  display: flex;
  gap: 24px;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .hero__content-main .hero-feature {
    gap: 16px;
  }
}
.hero__content-main .hero-feature img {
  height: auto;
  transition: transform 0.3s ease;
}

.hero__content-main .hero-feature img:hover {
  transform: translateY(-5px);
}

.hero .hero-model {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 380px;
  width: 36%;
  z-index: -1;
}

@media (min-width: 1024px) {
  .hero .hero-model {
    max-width: 390px;
    width: 35%;
  }
}
.hero .hero-model img {
  max-width: 100%;
  height: auto;
  animation: float 6s ease-in-out infinite;
}

.hero__content-bottom > div {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .hero__content-bottom {
    flex-direction: column;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .hero__content-bottom {
    gap: 40px;
  }
}
.hero-content-price {
  flex: 2;
}

.hero-content-other {
  flex: 1.3;
}

.hero-content-price img,
.hero-content-other img {
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.hero-content-price img:hover,
.hero-content-other img:hover {
  transform: scale(1.02);
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
/*--------------------------------------------------------
 背景オブジェクト--------------------------------------------------------*/
.object-content {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1440px;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.object-content .object-circle {
  position: absolute;
  width: 220px;
  height: 220px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  animation: float 6s ease-in-out infinite;
}

.object-content .object-circle.one {
  top: 80px;
  left: -24px;
  background-image: url("../images/object/img_object_01.svg");
  animation-delay: 0s;
}

.object-content .object-circle.two {
  width: 200px;
  height: 200px;
  bottom: 96px;
  right: -24px;
  background-image: url("../images/object/img_object_02.svg");
  animation-delay: 2s;
}

.object-content .object-circle.three {
  top: 200px;
  left: -24px;
  background-image: url("../images/object/img_object_03.svg");
  animation-delay: 0s;
}

.object-content .object-circle.four {
  width: 200px;
  height: 200px;
  bottom: 0;
  right: -24px;
  background-image: url("../images/object/img_object_04.svg");
  animation-delay: 2s;
}

.object-content .object-circle.five {
  top: 0;
  left: -24px;
  background-image: url("../images/object/img_object_03.svg");
  animation-delay: 0s;
}

.object-content .object-circle.six {
  width: 200px;
  height: 200px;
  top: -80px;
  right: -24px;
  background-image: url("../images/object/img_object_04.svg");
  animation-delay: 2s;
}
@media screen and (max-width: 768px) {
  .object-content .object-circle.six {
    width: 100px;
    height: 100px;
    right: 24px;
  }
}

.object-content .object-circle.woman {
  width: 300px;
  height: 300px;
  bottom: -24px;
  left: -24px;
  background-image: url("../images/trouble/trouble_woman.png");
}
@media screen and (max-width: 768px) {
  .object-content .object-circle.woman {
    max-width: 300px;
    width: 33%;
  }
}

.object-content .object-circle.man {
  width: 300px;
  height: 300px;
  bottom: -24px;
  right: -24px;
  background-image: url("../images/trouble/trouble_man.png");
}
@media screen and (max-width: 768px) {
  .object-content .object-circle.man {
    max-width: 300px;
    width: 33%;
  }
}

/* 背景ストライプ */
.diagonal-border {
  position: absolute;
  content: "";
  background-image: repeating-linear-gradient(45deg, #fff490, #fff490 10px, #ffcc00 10px, #ffcc00 20px);
  z-index: -1;
}

/*------------------------------------------------------

  テキスト左＋画像右 / SP 縦並び

 -----------------------------------------------------*/
.hero-split .hero-title-group {
  height: 100%;
}
.hero-split .hero-title-group > div {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 32px;
}
@media screen and (max-width: 959px) {
  .hero-split .hero-title-group > div {
    flex-direction: column-reverse;
  }
}
.hero-split .text-block {
  flex: 1;
  position: relative;
}
.hero-split h1,
.hero-split .title-copy {
  margin-bottom: var(--dp-space-element-pc);
}
.hero-split .en-title {
  margin-bottom: var(--dp-space-inner-pc);
  letter-spacing: var(--dp-letter-spacing-text);
}
@media screen and (max-width: 599px) {
  .hero-split .en-title {
    letter-spacing: var(--dp-letter-spacing-text);
    font-size: var(--dp-font-size-explanation);
  }
}
.hero-split h1 {
  margin-bottom: var(--dp-space-element-sp);
  line-height: var(--dp-line-height-small);
  letter-spacing: var(--dp-letter-spacing-heading);
  font-size: var(--dp-font-size-page-title-pc);
  font-weight: var(--dp-font-weight-heading);
  font-feature-settings: "palt";
}
@media screen and (max-width: 959px) {
  .hero-split h1 {
    font-size: var(--dp-font-size-title-pc);
  }
}
@media screen and (max-width: 599px) {
  .hero-split h1 {
    font-size: var(--dp-font-size-title-sp);
  }
}
.hero-split .title-copy {
  letter-spacing: var(--dp-letter-spacing-text);
}
.hero-split .title-copy-main {
  font-size: var(--dp-font-size-summary);
}
.hero-split .wp-block-group.hero-media.dp-fade-slider {
  display: grid !important;
  flex: 0 0 52%;
  margin-bottom: 0;
}
.hero-split .wp-block-group.hero-media.dp-fade-slider .wp-block-image {
  grid-column: 1/-1;
  grid-row: 1/-1;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 1;
  margin: 0;
}
.hero-split .wp-block-group.hero-media.dp-fade-slider .wp-block-image img {
  height: 100%;
  aspect-ratio: 7/6;
  object-fit: cover;
  border-radius: var(--dp-radius);
}
.hero-split .wp-block-group.hero-media.dp-fade-slider.is-initialized .wp-block-image.is-active {
  opacity: 1;
  z-index: 2;
}
.hero-split .wp-block-group.hero-media.dp-fade-slider:not(.is-initialized) .wp-block-image:first-of-type {
  opacity: 1;
}
@media screen and (max-width: 959px) {
  .hero-split .wp-block-group.hero-media.dp-fade-slider {
    flex: 0 0 100%;
  }
  .hero-split .wp-block-group.hero-media.dp-fade-slider .wp-block-image img {
    height: 500px;
    width: 100vw;
  }
}
@media screen and (max-width: 599px) {
  .hero-split .wp-block-group.hero-media.dp-fade-slider .wp-block-image img {
    height: 300px;
  }
}
@media screen and (max-width: 959px) {
  .hero-split.hero-split--b .hero-title-group > div {
    gap: 0;
  }
}
@media screen and (max-width: 959px) {
  .hero-split.hero-split--b .text-block {
    max-width: 600px;
    margin-top: -128px;
    margin-left: 32px;
    padding: 48px 32px;
    background-color: var(--color_bg);
    border-radius: var(--dp-radius);
  }
}
@media screen and (max-width: 768px) {
  .hero-split.hero-split--b .text-block {
    max-width: 100%;
    margin-top: -48px;
    border-radius: var(--dp-radius) 0 0 0;
  }
}
@media screen and (max-width: 599px) {
  .hero-split.hero-split--b .text-block {
    margin-top: -32px;
    margin-left: 16px;
    padding: 24px 0 0 24px;
  }
}

/* メインビジュアル */
/* 4:6分割カラム */
/*

 ブリッジコピー (bridge-copy)

*/
/* ===========================================
 波形付き全幅白背景
=========================================== */
.dp-bridge-copy-simple {
  position: relative;
  text-align: center;
  z-index: 1;
}
.dp-bridge-copy-simple::before, .dp-bridge-copy-simple::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 200px;
  transform: translateX(-50%);
}
.dp-bridge-copy-simple::before {
  background-color: color-mix(in srgb, var(--color_main) 5%, white);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: -1;
}
@media screen and (max-width: 959px) {
  .dp-bridge-copy-simple::before {
    height: 50%;
  }
}
.dp-bridge-copy-simple::after {
  background-color: #ffffff;
  z-index: -2;
}
@media screen and (max-width: 959px) {
  .dp-bridge-copy-simple::after {
    height: 100%;
  }
}
.dp-bridge-copy-simple p {
  display: inline-block;
  margin: 0;
  line-height: var(--dp-line-height-medium);
  letter-spacing: var(--dp-letter-spacing-text);
  font-size: var(--dp-font-size-title-pc);
  font-weight: var(--dp-font-weight-heading);
}
@media screen and (max-width: 599px) {
  .dp-bridge-copy-simple p {
    font-size: var(--dp-font-size-title-sp);
  }
}
.dp-bridge-copy-simple p:last-child::after {
  content: "";
  display: block;
  width: 100%;
  height: 6px;
  margin: 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='8'%3E%3Cpath d='M0 4 Q10 0 20 4 Q30 8 40 4 Q50 0 60 4 Q70 8 80 4' fill='none' stroke='%232d2d2d' stroke-width='4'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: auto 100%;
}
@media screen and (max-width: 599px) {
  .dp-bridge-copy-simple p:last-child::after {
    content: none;
  }
}

/* ===========================================
 ボーダー＋三角下向き矢印
=========================================== */
.dp-bridge-copy {
  position: relative;
  display: flex;
  justify-content: center;
}
.dp-bridge-copy p {
  position: relative;
  margin: 0;
  padding: var(--dp-space-element-pc) var(--dp-space-element-pc);
  background-color: var(--color_main);
  color: #ffffff;
  border: 4px solid var(--color_main);
  border-radius: var(--dp-radius);
  line-height: var(--dp-line-height-small);
  text-align: center;
  letter-spacing: var(--dp-letter-spacing-text);
  font-size: var(--dp-font-size-title-pc);
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .dp-bridge-copy p {
    padding: var(--dp-space-element-sp) var(--dp-space-inner-pc);
  }
}
@media screen and (max-width: 599px) {
  .dp-bridge-copy p {
    letter-spacing: var(--dp-letter-spacing-text);
    font-size: var(--dp-font-size-title-sp);
  }
}
.dp-bridge-copy::after {
  content: "";
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 48px solid transparent;
  border-right: 48px solid transparent;
  border-top: 32px solid var(--color_main);
}
@media screen and (max-width: 599px) {
  .dp-bridge-copy::after {
    bottom: -24px;
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 24px solid var(--color_main);
  }
}

/* ===========================================
 ドロップシャドウ＋縦線
=========================================== */
.dp-bridge-copy--a {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--dp-space-block-pc) var(--dp-space-element-pc);
  background-color: var(--color_bg);
  border-radius: var(--dp-radius);
  box-shadow: var(--dp-shadow);
  text-align: center;
  z-index: 2;
}
.dp-bridge-copy--a p {
  font-size: var(--dp-font-size-title-pc);
  font-weight: var(--dp-font-weight-heading);
  font-feature-settings: "palt" on;
  line-height: var(--dp-line-height-small);
  letter-spacing: var(--dp-letter-spacing-heading);
  margin: 0;
}
@media screen and (max-width: 768px) {
  .dp-bridge-copy--a p {
    font-size: var(--dp-font-size-title-sp);
  }
}
@media screen and (max-width: 599px) {
  .dp-bridge-copy--a p {
    font-size: var(--dp-font-size-heading-sp);
  }
}
@media screen and (max-width: 599px) {
  .dp-bridge-copy--a {
    padding: var(--dp-space-element-sp) calc(var(--dp-space-element-sp) / 2);
  }
}
.dp-bridge-copy--a::after {
  content: "";
  position: absolute;
  bottom: calc(var(--dp-space-block-pc) * -1);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: var(--dp-space-block-pc);
  background-color: var(--color_text);
}

/* ブリッジコピー */
/*

 よくある悩みセクション (problem)
 【2カラム】左テキスト＋右6枚グリッド＋吹き出し

*/
/* ===========================================
 .dp-problem-section
=========================================== */
.dp-problem-section-band {
  position: relative;
}
.dp-problem-section-band::before {
  content: "";
  position: absolute;
  top: 144px;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 1440px);
  height: calc(50% + 128px);
  background-color: var(--color_main_thin);
  z-index: -1;
}
@media screen and (max-width: 1024px) {
  .dp-problem-section-band::before {
    top: 0;
    height: 87%;
  }
}
@media screen and (max-width: 599px) {
  .dp-problem-section-band::before {
    height: 90%;
  }
}
.dp-problem-section-band .swell-block-fullWide__inner > .wp-block-group:first-child {
  position: relative;
  align-items: center;
  gap: var(--dp-space-element-pc);
  margin-bottom: var(--dp-space-block-pc);
}
@media screen and (max-width: 1024px) {
  .dp-problem-section-band .swell-block-fullWide__inner > .wp-block-group:first-child {
    flex-direction: column;
    gap: var(--dp-space-element-sp);
  }
}
@media screen and (max-width: 599px) {
  .dp-problem-section-band .swell-block-fullWide__inner > .wp-block-group:first-child {
    margin-bottom: var(--dp-space-block-sp);
  }
}
.dp-problem-section-band .swell-block-fullWide__inner > .wp-block-group:first-child > :first-child {
  flex: 0 0 40%;
  min-width: 0;
  text-align: left;
}
@media screen and (max-width: 1024px) {
  .dp-problem-section-band .swell-block-fullWide__inner > .wp-block-group:first-child > :first-child {
    margin-top: 0;
    text-align: center;
  }
}
@media screen and (max-width: 599px) {
  .dp-problem-section-band .swell-block-fullWide__inner > .wp-block-group:first-child > :first-child {
    text-align: left;
  }
}
.dp-problem-section-band .swell-block-fullWide__inner > .wp-block-group:first-child > :first-child h2 {
  line-height: 1.4;
}
.dp-problem-section-band .swell-block-fullWide__inner > .wp-block-group:first-child > :last-child {
  flex: 1;
  min-width: 0;
}

.dp-problem-section-bottom-nospace {
  margin-bottom: 0;
  padding-bottom: 0 !important;
  background-color: color-mix(in srgb, var(--color_main) 5%, white);
}

/* よくある悩み */
/*
 * p-solution.scss
 * 解決できること セクション
 * スコープ: .dp-solution-section
 */
.dp-solution-section__img {
  max-width: 100%;
}

@media (max-width: 767px) {
  .dp-sp-reverse-column .swell-block-columns__inner {
    flex-direction: column-reverse;
  }
}
/* ソリューション */
/*

 私たちの強み (strength)

*/
/* ストレングス */
/*

 コストテーブル (pricing-table)

*/
/* ===========================================
料金セクション (.dp-pricing-section)
=========================================== */
.dp-pricing--a .swell-block-columns {
  overflow: visible;
  margin-bottom: var(--dp-space-element-pc);
}
@media screen and (max-width: 599px) {
  .dp-pricing--a .swell-block-columns {
    margin-bottom: var(--dp-space-element-sp);
  }
}
.dp-pricing--a .swell-block-columns__inner {
  overflow: visible;
}
.dp-pricing--a .swell-block-column {
  position: relative;
  padding: var(--dp-space-element-pc) var(--dp-space-inner-pc);
  background-color: var(--color_bg);
  border-radius: var(--dp-radius);
  box-shadow: var(--dp-shadow);
  text-align: center;
}
@media screen and (max-width: 599px) {
  .dp-pricing--a .swell-block-column:first-child {
    margin-bottom: var(--dp-space-inner-pc);
  }
}
@media screen and (max-width: 599px) {
  .dp-pricing--a .swell-block-column.column-accent {
    padding: var(--dp-space-element-pc) var(--dp-space-inner-pc) var(--dp-space-element-sp);
  }
}
.dp-pricing--a .swell-block-column:has(.pricing-table-accent-badge) {
  border: var(--dp-border-width) solid var(--color_main);
}
@media screen and (max-width: 599px) {
  .dp-pricing--a .swell-block-column {
    padding: var(--dp-space-element-sp) var(--dp-space-inner-sp);
  }
}
.dp-pricing--a .pricing-table-accent-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  max-width: 200px;
  width: 100%;
  margin: 0;
  padding: calc(var(--dp-space-inner-sp) / 2) var(--dp-space-inner-pc);
  background-color: var(--color_main);
  color: #ffffff;
  border-radius: calc(var(--dp-radius) / 2);
  font-weight: 600;
  white-space: nowrap;
  z-index: 1;
}
.dp-pricing--a .en-heding {
  margin-bottom: calc(var(--dp-space-inner-sp) / 2);
  font-size: var(--dp-font-size-explanation);
  font-family: var(--dp-font-en);
}
@media screen and (max-width: 599px) {
  .dp-pricing--a .en-heding {
    margin-bottom: 0;
  }
}
.dp-pricing--a h3 {
  margin-bottom: var(--dp-space-inner-pc);
  font-size: calc(var(--dp-font-size-heading-pc) * 0.9);
  font-weight: 600;
}
@media screen and (max-width: 599px) {
  .dp-pricing--a h3 {
    margin-bottom: var(--dp-space-inner-sp);
    font-size: calc(var(--dp-font-size-heading-sp) * 0.9);
  }
}
.dp-pricing--a .is-style-check_list {
  max-width: 220px;
  width: 100%;
  margin: 0 auto;
  text-align: left;
  line-height: var(--dp-line-height-large);
}
@media screen and (max-width: 599px) {
  .dp-pricing--a .is-style-check_list {
    max-width: 300px;
  }
}
.dp-pricing--a .is-style-check_list li {
  position: relative;
  margin: 0 0 calc(var(--dp-space-inner-pc) / 2);
}
@media screen and (max-width: 599px) {
  .dp-pricing--a .is-style-check_list li {
    margin: 0 0 calc(var(--dp-space-inner-sp) / 2);
  }
}

/* ===========================================
比較テーブル (.dp-pricing--b)
=========================================== */
.dp-pricing--b .wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dp-pricing--b .wp-block-table table {
  min-width: 720px;
  border-collapse: collapse;
}
.dp-pricing--b .wp-block-table th, .dp-pricing--b .wp-block-table td {
  padding: 20px 24px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.3;
  font-size: 18px;
}
@media screen and (max-width: 599px) {
  .dp-pricing--b .wp-block-table th, .dp-pricing--b .wp-block-table td {
    padding: 12px 8px;
    font-size: var(--dp-font-size-explanation);
  }
}
.dp-pricing--b .wp-block-table thead th {
  font-weight: 600;
  background-color: #f8f8f8;
  color: #2d2d2d;
  border: 2px solid #f6f6f6;
}
.dp-pricing--b .wp-block-table thead th:nth-child(2) {
  background-color: var(--color_main);
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  border-top: 4px solid var(--color_main);
  border-left: 4px solid var(--color_main);
  border-right: 4px solid var(--color_main);
  border-bottom: 2px solid var(--color_main);
}
@media screen and (max-width: 599px) {
  .dp-pricing--b .wp-block-table thead th:nth-child(2) {
    font-size: var(--dp-font-size-summary);
  }
}
.dp-pricing--b .wp-block-table thead th:nth-child(n+3) {
  background-color: #888888;
  color: #ffffff;
  font-weight: 500;
}
.dp-pricing--b .wp-block-table tbody td {
  background-color: #ffffff;
  color: #2d2d2d;
  border: 2px solid #f6f6f6;
}
.dp-pricing--b .wp-block-table tbody td:first-child {
  font-weight: 500;
}
.dp-pricing--b .wp-block-table tbody td:nth-child(2) {
  font-weight: 700;
  border-left: 4px solid var(--color_main);
  border-right: 4px solid var(--color_main);
}
.dp-pricing--b .wp-block-table tbody tr:last-child td:nth-child(2) {
  border-bottom: 4px solid var(--color_main);
}

/* ===========================================
料金プランカード（縦型） (.dp-pricing--c)
=========================================== */
.dp-pricing--c .swell-block-columns {
  margin-bottom: 32px;
}
@media screen and (max-width: 599px) {
  .dp-pricing--c .swell-block-columns {
    margin-bottom: 24px;
  }
}
.dp-pricing--c .swell-block-column {
  border-top: 16px solid #d5d6dc;
  border-bottom: 2px solid #d5d6dc;
  padding: 32px 24px 24px;
  background-color: #ffffff;
  box-shadow: var(--dp-shadow);
  text-align: center;
}
@media screen and (max-width: 599px) {
  .dp-pricing--c .swell-block-column {
    padding: 24px 16px 16px;
    border-bottom: none;
  }
}
.dp-pricing--c .swell-block-column:nth-child(3) {
  border-top-color: var(--color_main);
  border-bottom-color: var(--color_main);
}
.dp-pricing--c .swell-block-column h3 {
  margin-bottom: 4px;
  font-size: 24px;
  font-weight: 700;
  color: #16161a;
}
@media screen and (max-width: 599px) {
  .dp-pricing--c .swell-block-column h3 {
    font-size: var(--dp-font-size-heading-sp);
  }
}
.dp-pricing--c .swell-block-column .pricing-subtitle {
  margin-bottom: 16px;
  font-size: var(--dp-font-size-explanation);
  color: #5d5e6f;
}
.dp-pricing--c .swell-block-column .is-style-check_list {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #d5d6dc;
  text-align: left;
}
.dp-pricing--c .swell-block-column .is-style-check_list li {
  position: relative;
}
.dp-pricing--c .swell-block-column .pricing-contract-link {
  font-size: var(--dp-font-size-explanation);
}
.dp-pricing--c .swell-block-column .pricing-contract-link a {
  color: var(--color_main);
  text-decoration: underline;
}
.dp-pricing--c .pricing-annotation-list {
  font-size: var(--dp-font-size-explanation);
  color: #5d5e6f;
  text-align: left;
  margin-bottom: 32px;
  padding-left: 1.2em;
}
.dp-pricing--c .pricing-annotation-list li {
  margin-bottom: 4px;
}

/* 料金表 */
/*

 FAQ (faq)

*/
.faq-column .swell-block-column {
  box-shadow: var(--dp-shadow);
  border-radius: var(--dp-radius);
  padding: var(--dp-space-element-pc);
}
@media screen and (max-width: 599px) {
  .faq-column .swell-block-column {
    padding: var(--dp-space-element-sp) var(--dp-space-element-sp);
  }
}

/* -------------------------------------------
 * dp-faq--b: 1カラム ボーダー区切りアコーディオン
 * ------------------------------------------- */
.dp-faq--b .swell-block-faq {
  border-top: 1px solid var(--color_border);
}
.dp-faq--b .swell-block-faq__item {
  margin-top: var(--dp-space-inner-pc);
  padding-bottom: var(--dp-space-inner-pc);
  border-bottom: 1px solid var(--color_border);
}
.dp-faq--b .faq_q:before,
.dp-faq--b .faq_a:before {
  box-shadow: 0 0 0 1px inset;
}
@media screen and (max-width: 599px) {
  .dp-faq--b .faq_q:before,
  .dp-faq--b .faq_a:before {
    top: 0.25em;
  }
}
.dp-faq--b .faq_q {
  cursor: pointer;
  padding-top: var(--dp-space-inner-pc);
  padding-bottom: var(--dp-space-inner-pc);
  padding-right: 2.5em;
  font-weight: var(--dp-font-weight-heading);
}
.dp-faq--b .faq_q::after {
  content: "\e921";
  font-family: icomoon;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.3s ease;
}
@media screen and (max-width: 599px) {
  .dp-faq--b .faq_q {
    padding-top: var(--dp-space-inner-sp);
    padding-bottom: var(--dp-space-inner-sp);
  }
}
.dp-faq--b .swell-block-faq__item.is-open .faq_q::after {
  transform: translateY(-50%) rotate(-90deg);
}
.dp-faq--b .faq_a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.dp-faq--b .faq_a p:last-child {
  margin-bottom: 0;
}
.dp-faq--b .faq_a:before {
  top: 0.85em;
}
.dp-faq--b .swell-block-faq__item.is-open .faq_a {
  max-height: 500px;
  padding-top: 1em !important;
}

/* -------------------------------------------
 * dp-faq--c: 白カード式アコーディオン（セクション背景: #f8f8f8）
 * ------------------------------------------- */
.dp-faq--c {
  background-color: #f8f8f8;
}
.dp-faq--c .swell-block-faq__item {
  background-color: #ffffff;
  border-radius: var(--dp-radius);
  padding: var(--dp-space-element-sp) var(--dp-space-element-pc);
}
.dp-faq--c .swell-block-faq__item + .swell-block-faq__item {
  margin-top: 16px;
}
@media screen and (max-width: 599px) {
  .dp-faq--c .swell-block-faq__item {
    padding: var(--dp-space-element-sp);
  }
}
.dp-faq--c .faq_q::before,
.dp-faq--c .faq_a::before {
  box-shadow: 0 0 0 1px inset;
}
@media screen and (max-width: 599px) {
  .dp-faq--c .faq_q::before,
  .dp-faq--c .faq_a::before {
    top: 0.6em;
  }
}
.dp-faq--c .faq_q {
  cursor: pointer;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-right: 2.5em;
  font-weight: var(--dp-font-weight-heading);
}
.dp-faq--c .faq_q::after {
  content: "\e921";
  font-family: icomoon;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.3s ease;
}
.dp-faq--c .swell-block-faq__item.is-open .faq_q::after {
  transform: translateY(-50%) rotate(-90deg);
}
.dp-faq--c .faq_a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.dp-faq--c .faq_a p:last-child {
  margin-bottom: 0;
}
.dp-faq--c .faq_a::before {
  top: 0.85em;
}
.dp-faq--c .swell-block-faq__item.is-open .faq_a {
  max-height: 500px;
  padding-top: 1em !important;
}

/* FAQ */
.-type-thumb .p-postList__link,
.p-postList__thumb {
  border-radius: var(--dp-radius);
}

.dp-news-section .c-listMenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dp-space-inner-pc);
}
@media screen and (max-width: 599px) {
  .dp-news-section .c-listMenu {
    gap: var(--dp-space-inner-sp);
    justify-content: flex-start;
  }
}
.dp-news-section .c-listMenu li {
  list-style: none;
}
.dp-news-section .c-listMenu a {
  border-bottom: none;
  transition: background-color 0.3s ease;
}
.dp-news-section .c-listMenu a:hover {
  background-color: transparent;
  padding: 0.75em 1em 0.75em 1.75em !important;
}
.dp-news-section .c-listMenu a {
  position: relative;
}
.dp-news-section .c-listMenu a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color_text);
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.dp-news-section .c-listMenu a:hover::after {
  opacity: 1;
  transform: translateY(-3px);
}

.dp-news-section--b .p-postList {
  border-top: none;
}
.dp-news-section--b .p-postList__body {
  display: flex;
  gap: var(--dp-space-inner-pc);
}
@media screen and (max-width: 599px) {
  .dp-news-section--b .p-postList__body {
    flex-direction: column;
    gap: 0;
  }
}
.dp-news-section--b .p-postList__link {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  padding-right: 2.5em;
}
.dp-news-section--b .p-postList__link:before {
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translate(0px, -50%);
  content: "\e921";
  line-height: 1;
  transition: transform 0.3s ease;
  font-weight: bold;
  font-family: icomoon !important;
}
.dp-news-section--b .p-postList__link:hover {
  background: transparent;
  opacity: 0.8;
}
.dp-news-section--b .p-postList__link:hover::before {
  transform: translate(5px, -50%);
}
.dp-news-section--b .p-postList__meta {
  margin-bottom: 0;
  font-size: 1em;
}
.dp-news-section--b .p-postList__title {
  font-size: clamp(1em, 1vw, 1.1em);
  font-weight: var(--dp-font-weight-heading);
}
.dp-news-section--b .p-postList .u-thin {
  opacity: 1;
}
.dp-news-section--b .p-postList .icon-posted::before {
  content: none;
}

/* 投稿セクション */
/*

 バナーリスト (banner-list)

*/
/* -------------------------------------------
 * バナーリスト共通
 * ------------------------------------------- */
.dp-banner-list {
  /* バナーリストA テキスト左下 */
}
.dp-banner-list .c-bannerLink__title span {
  display: inline-block;
  transition: transform 0.3s ease;
  margin-left: 0.5em;
}
.dp-banner-list .c-bannerLink:hover .c-bannerLink__title span {
  transform: translateX(5px);
}
.dp-banner-list .c-bannerLink__text {
  height: auto;
  width: auto;
  text-align: left;
  padding: var(--dp-space-element-pc);
}
@media screen and (max-width: 599px) {
  .dp-banner-list .c-bannerLink__text {
    padding: var(--dp-space-element-sp);
  }
}
.dp-banner-list .c-bannerLink p {
  font-size: var(--dp-font-size-explanation);
}
.dp-banner-list--a .c-bannerLink__text {
  top: auto;
  bottom: 0;
}

/* バナーリスト */
/*

 CTAブロック (cta-block)

*/
/* ===========================================
CTAセクション (.dp-cta-section)
=========================================== */
.dp-cta-section .dp-container {
  background-color: var(--color_main);
  border-radius: var(--dp-radius);
  padding: var(--dp-space-block-pc) var(--dp-space-inner-pc);
}
@media screen and (max-width: 599px) {
  .dp-cta-section .dp-container {
    padding: var(--dp-space-block-sp) var(--dp-space-inner-pc);
  }
}
.dp-cta-section .dp-section-title--a {
  margin-bottom: var(--dp-space-element-pc);
}
@media screen and (max-width: 599px) {
  .dp-cta-section .dp-section-title--a {
    margin-bottom: var(--dp-space-element-sp);
  }
}
.dp-cta-section .dp-section-title--a h2 {
  color: #ffffff;
  margin-bottom: var(--dp-space-inner-sp);
  font-size: var(--dp-font-size-title-sp);
  font-weight: var(--dp-font-weight-heading);
}
@media screen and (max-width: 599px) {
  .dp-cta-section .dp-section-title--a h2 {
    font-size: var(--dp-font-size-heading-sp);
  }
}
.dp-cta-section .dp-section-title--a p {
  color: #ffffff;
  font-size: var(--dp-font-size-summary);
}
@media screen and (max-width: 599px) {
  .dp-cta-section .dp-section-title--a p {
    font-size: var(--dp-font-size-explanation);
  }
}

/* -------------------------------------------
 * 電話・チャット 横並びグループ
 * ------------------------------------------- */
.dp-cta-other {
  justify-content: center;
  align-items: center;
  gap: var(--dp-space-inner-pc);
}
@media screen and (max-width: 599px) {
  .dp-cta-other {
    flex-direction: column;
    flex-wrap: wrap !important;
    justify-content: center;
    border: 1px solid #ffffff;
    max-width: 340px;
    width: 100%;
    border-radius: var(--dp-radius);
  }
}
.dp-cta-other a {
  color: #ffffff;
  text-decoration: none;
}
.dp-cta-other p:nth-of-type(1) {
  font-family: var(--dp-font-num);
  font-weight: 700;
  margin-bottom: 0;
  line-height: var(--dp-line-height-small);
  letter-spacing: 0;
  transition: transform 0.3s ease;
}
.dp-cta-other p:nth-of-type(1) span {
  height: 0.75em;
  font-size: var(--swl-fz--huge);
}
@media screen and (max-width: 599px) {
  .dp-cta-other p:nth-of-type(1) span {
    margin: 0;
  }
}
.dp-cta-other p:nth-of-type(1):hover {
  transform: translateY(-3px);
}
.dp-cta-other .swell-block-button,
.dp-cta-other p:nth-of-type(2) {
  position: relative;
  padding-left: var(--dp-space-inner-pc);
  margin-bottom: 0;
  line-height: var(--dp-line-height-small);
}
.dp-cta-other .swell-block-button::before,
.dp-cta-other p:nth-of-type(2)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5%;
  height: 90%;
  border-left: 1px solid #ffffff;
  opacity: 0.6;
}
@media screen and (max-width: 599px) {
  .dp-cta-other .swell-block-button,
  .dp-cta-other p:nth-of-type(2) {
    font-size: 18px;
  }
}
@media screen and (max-width: 599px) {
  .dp-cta-other .swell-block-button {
    padding-left: 0;
  }
  .dp-cta-other .swell-block-button::before {
    content: none;
  }
}
.dp-cta-other p:nth-of-type(2) {
  transition: transform 0.3s ease;
}
.dp-cta-other p:nth-of-type(2):hover {
  transform: translateY(-3px);
}
@media screen and (max-width: 599px) {
  .dp-cta-other p:nth-of-type(2) {
    width: 100%;
    padding: 1em 0 0;
  }
  .dp-cta-other p:nth-of-type(2)::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    height: 1px;
    width: calc(100% - 2em);
    background-color: #ffffff;
  }
}

/* -------------------------------------------
 * dp-cta--a: 画像＋メインカラー背景 リッチカラム型CTA
 * loos/columns に付与 / 左列:画像 / 右列:テキスト+ボタン
 * ------------------------------------------- */
.dp-cta--a .swell-block-columns__inner {
  gap: 0;
  align-items: stretch;
}
@media screen and (max-width: 959px) {
  .dp-cta--a .swell-block-columns__inner {
    flex-direction: column;
  }
}
.dp-cta--a .swell-block-column {
  flex: 0 0 50%;
}
@media screen and (max-width: 959px) {
  .dp-cta--a .swell-block-column {
    flex: 1;
  }
}
.dp-cta--a .swell-block-column:nth-child(1) .wp-block-image {
  height: 100%;
  margin: 0;
}
.dp-cta--a .swell-block-column:nth-child(1) .wp-block-image img {
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 959px) {
  .dp-cta--a .swell-block-column:nth-child(1) .wp-block-image img {
    height: 400px;
  }
}
@media screen and (max-width: 599px) {
  .dp-cta--a .swell-block-column:nth-child(1) .wp-block-image img {
    height: 300px;
  }
}
.dp-cta--a .swell-block-column:nth-child(2) {
  background-color: var(--color_main);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--dp-space-block-pc) var(--dp-space-element-pc);
  gap: var(--dp-space-inner-pc);
}
@media screen and (max-width: 959px) {
  .dp-cta--a .swell-block-column:nth-child(2) {
    padding: var(--dp-space-element-pc);
  }
}
@media screen and (max-width: 599px) {
  .dp-cta--a .swell-block-column:nth-child(2) {
    padding: var(--dp-space-block-sp) var(--dp-space-inner-sp);
  }
}
.dp-cta--a .swell-block-column:nth-child(2) * {
  color: white;
}
.dp-cta--a .swell-block-column:nth-child(2) h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  margin-bottom: 0;
}
.dp-cta--a .swell-block-column:nth-child(2) > p:nth-of-type(1) {
  font-size: clamp(16px, 2vw, var(--dp-font-size-explanation));
  margin-bottom: 0;
}
.dp-cta--a .swell-block-column:nth-child(2) .swell-block-button {
  width: 100%;
  max-width: 500px;
}
@media screen and (max-width: 599px) {
  .dp-cta--a .swell-block-column:nth-child(2) .swell-block-button {
    max-width: 340px;
    margin-bottom: var(--dp-space-inner-sp) !important;
  }
}
.dp-cta--a .swell-block-column:nth-child(2) .swell-block-button__link * {
  color: var(--color_main);
}
.dp-cta--a .dp-cta-other {
  padding: 1em;
}
.dp-cta--a .dp-cta-other p:nth-of-type(1) {
  font-size: 15px !important;
}
@media screen and (max-width: 599px) {
  .dp-cta--a .dp-cta-other p:nth-of-type(1) span {
    font-size: 28px !important;
  }
}

.dp-cta--b {
  position: relative;
}
.dp-cta--b .dp-cta-other {
  gap: var(--dp-space-element-pc);
}
@media screen and (max-width: 959px) {
  .dp-cta--b .dp-cta-other {
    flex-direction: column;
    margin: 0 auto;
    max-width: 100%;
  }
}
@media screen and (max-width: 599px) {
  .dp-cta--b .dp-cta-other {
    gap: var(--dp-space-inner-pc);
    border: none;
  }
}
.dp-cta--b .dp-cta-other p:nth-of-type(1) {
  text-align: right;
  font-size: 28px;
}
@media screen and (max-width: 959px) {
  .dp-cta--b .dp-cta-other p:nth-of-type(1) {
    text-align: center;
  }
}
@media screen and (max-width: 599px) {
  .dp-cta--b .dp-cta-other p:nth-of-type(1) {
    font-size: 20px;
  }
}
.dp-cta--b .dp-cta-other p:nth-of-type(1) .swl-inline-icon {
  margin-right: 0 !important;
}
.dp-cta--b .dp-cta-other .swell-block-button {
  width: 100%;
  max-width: 360px;
  padding-left: var(--dp-space-element-pc);
}
@media screen and (max-width: 959px) {
  .dp-cta--b .dp-cta-other .swell-block-button {
    max-width: 300px;
    padding-left: 0;
  }
  .dp-cta--b .dp-cta-other .swell-block-button::before {
    content: none;
  }
}
.dp-cta--b .wp-block-image:last-child {
  position: absolute;
  bottom: 0;
  left: -16px;
  width: auto;
  height: calc(100% - 48px);
  margin-bottom: 0;
  z-index: 1;
}
@media screen and (max-width: 959px) {
  .dp-cta--b .wp-block-image:last-child {
    height: calc(100% - 96px);
  }
}
@media screen and (max-width: 599px) {
  .dp-cta--b .wp-block-image:last-child {
    left: -24px;
    height: 50%;
  }
}
.dp-cta--b .wp-block-image:last-child img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

@media screen and (max-width: 959px) {
  .js-swipe-slider.is-slider-active .swell-block-column {
    width: 95% !important;
  }
}

/* CTAブロック */
/*

 フェードインアニメーション

*/
/*--------------------------------------------------------

  PC： スクロール時に固定位置になる動画
  ※ ovserver-fadeIn.js でスクロール時にフェードインアニメーションを実行

 --------------------------------------------------------*/
/*--------------------------------------------------------
  スクロールフェードイン（汎用）
  js-fade         … 個別要素に付与
  js-fade-section … 親に付与 → 直下子要素を自動フェード
--------------------------------------------------------*/
body.js-fade-ready .js-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

body.js-fade-ready .js-fade.is-fade-in {
  opacity: 1;
  transform: none;
}

/*--------------------------------------------------------
  PC： スクロール時に固定位置になる動画
--------------------------------------------------------*/
.fade-animation-wrap > div {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 64px;
}
@media screen and (max-width: 1024px) {
  .fade-animation-wrap > div {
    flex-direction: column-reverse;
    gap: 32px;
  }
}
.fade-animation-wrap > div .text-block {
  max-width: 640px;
  width: 50%;
}
@media screen and (max-width: 1024px) {
  .fade-animation-wrap > div .text-block {
    max-width: 100%;
    width: 100%;
  }
}

/* 縦中央寄せ */
.fade-animation-wrap.align-center > div {
  align-items: center;
}

/* ビデオコンテナ */
.fade-video-container {
  position: sticky;
  top: 13%;
  right: 0;
  max-width: 720px;
  width: 50%;
  height: 75vh;
}
@media screen and (max-width: 1024px) {
  .fade-video-container {
    position: relative;
    max-width: 100%;
    width: 100%;
    height: auto;
  }
}
.fade-video-container video {
  --fade-ms: 600ms;
  transition: opacity 0.3 ease;
  will-change: opacity;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  overflow: hidden;
}

/* ビデオアクティブ */
video.is-active {
  opacity: 1;
}

/*--------------------------------------------------------

  スクロール連動で固定画像3枚フェード切り替え
  ※ fade-scroll.js でスクロール時にフェードインアニメーシュを実行

 --------------------------------------------------------*/
.fade-image-container {
  width: 50%;
}
@media screen and (max-width: 768px) {
  .fade-image-container {
    height: auto;
  }
}

.fade-sticky-inner {
  position: sticky;
  top: 15%; /* 上からの固定位置（必要に応じて調整） */
  width: 100%;
  height: 70vh;
}
@media screen and (max-width: 768px) {
  .fade-sticky-inner {
    position: relative;
    top: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

.fade-sticky-inner figure {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .fade-sticky-inner figure {
    position: relative;
    inset: auto;
    opacity: 1;
    height: auto;
  }
}

.fade-sticky-inner figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media screen and (max-width: 768px) {
  .fade-sticky-inner figure img {
    height: auto;
    object-fit: contain;
  }
}

.fade-sticky-inner figure.active {
  opacity: 1;
}

/* ドットインジケーター */
.fade-dots {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
  z-index: 10;
}

.fade-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  transition: background 0.3s, transform 0.3s;
  display: block;
}

/* ドットインジケーター メインカラー */
.fade-dots {
  --dot-color: var(--color_text);
  position: absolute;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .fade-dots {
    display: none;
  }
}
.fade-dots span {
  display: block;
  height: 1px;
  width: 33.3333333333%;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 1px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
}
.fade-dots span.active {
  width: 40%;
  background: var(--dot-color);
}

/* フェードインアニメーション */
/*

 1日のスケジュール (schedule)

*/
/* ===========================================
 .dp-schedule-section
=========================================== */
.dp-schedule-section .dp-schedule-tabs > input[type=radio] {
  display: none;
}
.dp-schedule-section .dp-schedule-tabs__nav {
  display: flex;
  margin-bottom: var(--dp-space-element-pc);
}
@media screen and (max-width: 599px) {
  .dp-schedule-section .dp-schedule-tabs__nav {
    margin-bottom: var(--dp-space-element-sp);
  }
}
.dp-schedule-section .dp-schedule-tabs__nav label {
  flex: 1;
  padding: 1em;
  text-align: center;
  cursor: pointer;
  background-color: var(--dp-color-sub);
  font-weight: var(--dp-font-weight-heading);
  letter-spacing: var(--dp-letter-spacing-text);
  transition: background-color 0.2s, color 0.2s;
}
@media screen and (max-width: 599px) {
  .dp-schedule-section .dp-schedule-tabs__nav label {
    padding: 0.75em 0.5em;
    font-size: var(--dp-font-size-explanation);
  }
}
.dp-schedule-section #dp-tab-am:checked ~ .dp-schedule-tabs__nav label[for=dp-tab-am],
.dp-schedule-section #dp-tab-pm:checked ~ .dp-schedule-tabs__nav label[for=dp-tab-pm],
.dp-schedule-section #dp-tab-full:checked ~ .dp-schedule-tabs__nav label[for=dp-tab-full] {
  background-color: var(--color_text);
  color: var(--color_bg);
}
.dp-schedule-section .dp-schedule-panel {
  display: none;
}
.dp-schedule-section #dp-tab-am:checked ~ .dp-schedule-panel--am,
.dp-schedule-section #dp-tab-pm:checked ~ .dp-schedule-panel--pm,
.dp-schedule-section #dp-tab-full:checked ~ .dp-schedule-panel--full {
  display: block;
}
.dp-schedule-section .dp-schedule-list {
  position: relative;
  margin: 0;
}
.dp-schedule-section .dp-schedule-list::before {
  content: "";
  position: absolute;
  top: 1.5em;
  bottom: 0;
  left: 120px;
  width: 1px;
  background-color: var(--color_text);
}
@media screen and (max-width: 599px) {
  .dp-schedule-section .dp-schedule-list::before {
    left: 72px;
  }
}
.dp-schedule-section .dp-schedule-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  padding-bottom: var(--dp-space-element-pc);
  position: relative;
}
.dp-schedule-section .dp-schedule-row::before {
  content: "";
  position: absolute;
  left: 120px;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color_text);
  transform: translateX(-50%);
  z-index: 1;
}
.dp-schedule-section .dp-schedule-row:last-child {
  padding-bottom: 0;
}
@media screen and (max-width: 599px) {
  .dp-schedule-section .dp-schedule-row {
    grid-template-columns: 72px 1fr;
    padding-bottom: var(--dp-space-element-sp);
  }
  .dp-schedule-section .dp-schedule-row::before {
    left: 72px;
  }
}
.dp-schedule-section .dp-schedule-row__time {
  font-family: var(--dp-font-num);
  font-size: var(--dp-font-size-heading-pc);
  font-weight: var(--dp-font-weight-heading);
  text-align: right;
  padding-right: 1.5rem;
  line-height: 1.4;
}
@media screen and (max-width: 599px) {
  .dp-schedule-section .dp-schedule-row__time {
    font-size: var(--dp-font-size-heading-sp);
    padding-right: 1rem;
  }
}
.dp-schedule-section .dp-schedule-row__body {
  padding-left: 1.5rem;
}
@media screen and (max-width: 599px) {
  .dp-schedule-section .dp-schedule-row__body {
    padding-left: 1rem;
  }
}
.dp-schedule-section .dp-schedule-row__title {
  font-size: var(--dp-font-size-heading-pc);
  font-weight: var(--dp-font-weight-heading);
  letter-spacing: var(--dp-letter-spacing-heading);
  line-height: var(--dp-line-height-small);
  margin-bottom: 0.5em;
}
@media screen and (max-width: 599px) {
  .dp-schedule-section .dp-schedule-row__title {
    font-size: var(--dp-font-size-heading-sp);
  }
}
.dp-schedule-section .dp-schedule-row__text {
  font-size: var(--dp-font-size-explanation);
  line-height: var(--dp-line-height-medium);
  letter-spacing: var(--dp-letter-spacing-text);
  margin-bottom: 0.5em;
}
.dp-schedule-section .dp-schedule-row__text:last-child {
  margin-bottom: 0;
}
.dp-schedule-section .dp-schedule-row__img {
  margin-top: 1em;
  width: 60%;
  overflow: hidden;
}
.dp-schedule-section .dp-schedule-row__img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media screen and (max-width: 599px) {
  .dp-schedule-section .dp-schedule-row__img {
    width: 100%;
  }
}

/* スケジュール */
/*
 * p-voice.scss
 * お客様の声 セクション
 * スコープ: .dp-voice-section
 */
/* お客様の声 */
/*

 横スワイプスライダー共通ユーティリティ
 .js-swipe-slider を付与するだけでスライダー化。
 JS が条件を満たした場合に .is-slider-active を付与し、スライダーが発動する。
 - PC（> 959px）: カード4枚以上の時のみ発動
 - タブレット・SP : 枚数問わず常に発動
 クラスを外す / 条件を満たさない → swell-block-columns のデフォルトグリッドに復帰。

*/
.js-swipe-slider .dp-slider-nav {
  display: none;
}
.js-swipe-slider .dp-slider-nav__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color_bg);
  border: 1px solid var(--color_text);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}
.js-swipe-slider .dp-slider-nav__btn [class*=icon-] {
  font-size: 14px;
  line-height: 1;
  display: block;
}
.js-swipe-slider .dp-slider-nav__btn.is-edge {
  opacity: 0.5;
}
.js-swipe-slider .dp-slider-nav__btn:not(.is-edge):hover {
  background: var(--color_text);
  color: var(--color_bg);
}
.js-swipe-slider .dp-slider-nav__prev {
  left: 0;
}
.js-swipe-slider .dp-slider-nav__next {
  right: 0;
}
.js-swipe-slider .dp-slider-dots {
  display: none;
}
.js-swipe-slider.is-slider-active {
  position: relative;
}
.js-swipe-slider.is-slider-active .swell-block-columns__inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: var(--dp-space-inner-pc);
  scrollbar-width: none;
}
.js-swipe-slider.is-slider-active .swell-block-columns__inner::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 599px) {
  .js-swipe-slider.is-slider-active .swell-block-columns__inner {
    gap: 16px;
  }
}
.js-swipe-slider.is-slider-active .swell-block-column {
  flex-shrink: 0 !important;
  scroll-snap-align: start;
  margin-bottom: 0 !important;
}
@media screen and (max-width: 959px) {
  .js-swipe-slider.is-slider-active .swell-block-column {
    width: calc(50% - 8px) !important;
  }
}
@media screen and (max-width: 599px) {
  .js-swipe-slider.is-slider-active .swell-block-column {
    width: 85% !important;
  }
}
.js-swipe-slider.is-slider-active .dp-slider-nav {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.js-swipe-slider.is-slider-active .dp-slider-nav .dp-slider-nav__btn {
  pointer-events: all;
}
@media screen and (max-width: 959px) {
  .js-swipe-slider.is-slider-active .dp-slider-nav {
    display: none;
  }
}
.js-swipe-slider.is-slider-active .dp-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: var(--dp-space-element-sp);
}

.dp-slider-dot {
  width: 48px;
  height: 4px;
  border-radius: 10px;
  background-color: #cccccc;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.dp-slider-dot.is-active {
  background-color: var(--color_main);
}
.dp-slider-dot::before {
  content: "";
  display: block;
  height: 20px;
  transform: translateY(-8px);
}

/* 横スワイプスライダー */
/* =========================================================
   dp-help: DP詳細ページ ヘルプUI
   スコープ: .single-design_pattern（詳細ページのbodyクラス）
========================================================= */
.single-design_pattern .dp-help-area {
  margin-top: 2.5rem;
}
.single-design_pattern .dp-help-specific {
  margin-bottom: 1.5rem;
}
.single-design_pattern .dp-help-title {
  font-size: var(--dp-font-size-heading-sp);
  font-weight: var(--dp-font-weight-heading);
  letter-spacing: var(--dp-letter-spacing-heading);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--dp-color-sub);
}
.single-design_pattern .dp-help-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.single-design_pattern .dp-help-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding: 1rem;
  background-color: var(--dp-color-sub);
  border-radius: var(--dp-radius);
}
@media screen and (max-width: 768px) {
  .single-design_pattern .dp-help-item {
    gap: 0.5rem;
  }
}
.single-design_pattern .dp-help-item:has(.dp-help-item__media) {
  grid-template-columns: 220px 1fr;
  align-items: start;
}
@media screen and (max-width: 768px) {
  .single-design_pattern .dp-help-item:has(.dp-help-item__media) {
    grid-template-columns: 1fr;
  }
}
.single-design_pattern .dp-help-item__media video,
.single-design_pattern .dp-help-item__media img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  border-radius: calc(var(--dp-radius) / 2);
}
@media screen and (max-width: 768px) {
  .single-design_pattern .dp-help-item__media video,
  .single-design_pattern .dp-help-item__media img {
    max-height: 160px;
  }
}
.single-design_pattern .dp-help-item__content h4 {
  font-size: var(--dp-font-size-explanation);
  font-weight: var(--dp-font-weight-heading);
  letter-spacing: var(--dp-letter-spacing-heading);
  margin-bottom: 0.375rem;
}
.single-design_pattern .dp-help-item__content p {
  font-size: var(--dp-font-size-explanation);
  line-height: var(--dp-line-height-medium);
  color: var(--color_text);
  margin: 0;
}
.single-design_pattern .dp-help-common.swell-block-accordion {
  border: 1px solid var(--dp-color-sub);
  border-radius: var(--dp-radius);
  overflow: hidden;
}
.single-design_pattern .dp-help-common .swell-block-accordion__head {
  font-size: var(--dp-font-size-explanation);
  font-weight: var(--dp-font-weight-heading);
  background-color: var(--dp-color-sub);
  padding: 0.75rem 1rem;
  cursor: pointer;
}
.single-design_pattern .dp-help-common .swell-block-accordion__head span {
  letter-spacing: var(--dp-letter-spacing-heading);
}
.single-design_pattern .dp-help-common .swell-block-accordion__body {
  padding: 1rem;
  font-size: var(--dp-font-size-explanation);
}

/* DP詳細ページ ヘルプUI */
/*

 タブブロック (tab)

 【実装ルール】
 - ブロック: TYPE-L（wp:loos/tab）対応
 - dp-tab / dp-tab-balloon はフルワイドではなく wp:loos/tab 要素に直接付与する
 - is-style-balloon の標準機能（追加実装不要）:
     クリックで吹き出しカラー変更 / 吹き出しの尻尾（テール）表示
 - 追加実装対象: フォントサイズ・タブタイトルのpadding（要調整）
 - 新規バリアントはこのファイル末尾に追記すること

*/
/* --- dp-tab: タブブロック共通ベーススタイル --- */
.dp-tab .c-tabList {
  justify-content: center;
  gap: var(--dp-space-inner-pc);
}
@media screen and (max-width: 599px) {
  .dp-tab .c-tabList {
    flex-wrap: wrap;
    gap: var(--dp-space-inner-sp);
  }
}
.dp-tab .c-tabBody {
  margin-bottom: 0;
}

/* --- dp-tab-card: タブボディ内 2カラムカードレイアウト --- */
.dp-tab-card .swell-block-column:first-child {
  flex: 0 0 clamp(120px, 25%, 200px);
}

/* --- dp-tab-balloon: 吹き出しタブバリアント ---
   is-style-balloon と同一要素に付与して使用
   フォントサイズ・padding を調整（要実装ごとに確認） */
.dp-tab-balloon {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.dp-tab-balloon .c-tabList__button {
  padding: var(--dp-space-element-sp) var(--dp-space-element-pc);
  border-radius: var(--dp-radius);
  font-size: var(--dp-font-size-heading-sp);
  font-weight: 600;
}
@media screen and (max-width: 959px) {
  .dp-tab-balloon .c-tabList__button {
    padding: var(--dp-space-inner-pc) var(--dp-space-element-sp);
  }
}
@media screen and (max-width: 599px) {
  .dp-tab-balloon .c-tabList__button {
    min-width: 0;
    font-size: inherit;
    padding: var(--dp-space-inner-pc);
  }
}

/* タブブロック */
/* ===========================================
   テーブル (table)
   【実装ルール】
   - ブロック: wp:table（ブロックインサーター）
   - is-style-simple と組み合わせて使用
   - th幅はSWELLエディタの「1列目の幅」（swlCell1Width）で設定
   - フォントサイズはSWELLエディタの「文字サイズ」（swlFz）で設定
   - このファイルはテーブルタグ（table / th / td）のデザインのみ記述
   - 新規バリアントはこのファイル末尾に追記すること
=========================================== */
.dp-table--a table {
  width: 100%;
  border-collapse: collapse;
}
.dp-table--a th,
.dp-table--a td {
  padding: 24px 8px;
  vertical-align: top;
  border-top: none;
  border-bottom: 1px solid #d9d9d9;
  text-align: left;
  font-weight: normal;
}
@media screen and (max-width: 599px) {
  .dp-table--a th,
  .dp-table--a td {
    padding: 20px 8px;
    font-size: 14px;
  }
}
.dp-table--a tr:first-child th,
.dp-table--a tr:first-child td {
  padding-top: 0;
}
.dp-table--a th {
  border-bottom-color: #888888;
  white-space: nowrap;
  padding-right: 16px;
}
.dp-table--a td {
  padding-left: 16px;
}
@media screen and (max-width: 599px) {
  .dp-table--a td {
    padding-left: 8px;
  }
}

/* テーブル */
/*--------------------------------------------------------
*
* contact お問い合わせフォーム
*
*--------------------------------------------------------*/
/*ContactForm7カスタマイズ*/
.wpcf7 {
  max-width: 1024px;
  margin: 0 auto;
  padding: 48px;
}
@media screen and (max-width: 959px) {
  .wpcf7 {
    padding: 0;
  }
}
.wpcf7 p {
  text-align: left;
}
.wpcf7 .dp-cf7_container {
  margin-bottom: 24px;
}
.wpcf7 .cf7_row {
  display: flex;
  margin-bottom: 24px;
}
@media screen and (max-width: 959px) {
  .wpcf7 .cf7_row {
    flex-direction: column;
  }
}
.wpcf7 .cf7_row .form-label {
  width: 30%;
  margin-right: 48px;
}
@media screen and (max-width: 959px) {
  .wpcf7 .cf7_row .form-label {
    width: 100%;
    margin-bottom: 8px;
    margin-right: 0;
  }
}
.wpcf7 .cf7_row .form-label .cf7_req {
  margin-right: 8px;
  padding: 2px 5px;
  border-radius: 3px;
  background-color: red;
  color: white;
  font-size: 12px;
}
.wpcf7 .cf7_row .form-label .cf7_unreq {
  margin-right: 8px;
  padding: 2px 5px;
  border-radius: 3px;
  background-color: gray;
  color: white;
  font-size: 12px;
}
.wpcf7 .cf7_row .response {
  width: 100%;
  max-width: 850px;
}
.wpcf7 .cf7_row .response input,
.wpcf7 .cf7_row .response textarea {
  width: 100%;
}
.wpcf7 .cf7_row .response input,
.wpcf7 .cf7_row .response select,
.wpcf7 .cf7_row .response textarea {
  padding: 12px;
  border-radius: 4px;
  background-color: #f2f2f2;
}
.wpcf7 .cf7_row .response.no-txt span,
.wpcf7 .cf7_row .response.no-txt input {
  width: auto;
  margin-bottom: 0;
}
.wpcf7 .cf7_row .response.unit span {
  display: inline-block;
}
.wpcf7 .cf7_row .response.unit span.form-unit {
  margin-left: 8px;
}
.wpcf7 .cf7_row .response.unit input {
  width: 80px;
}
.wpcf7 .cf7_row .response .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.wpcf7 .cf7_row .response .wpcf7-list-item {
  margin-left: 0;
  margin-right: 16px;
}
.wpcf7 .cf7_row .response .inner-label {
  display: block;
  margin-bottom: 4px;
}
.wpcf7 .cf7_row .response .day-of-week-time {
  margin-bottom: 12px;
}
.wpcf7 .cf7_row .response .day-of-week-time p {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}
.wpcf7 .cf7_row .response .day-of-week-time p input[type=date],
.wpcf7 .cf7_row .response .day-of-week-time p select {
  width: auto;
  height: 100%;
}
.wpcf7 .cf7_row .response .day-of-week-time p span {
  width: auto;
}
.wpcf7 .cf7_row .response input,
.wpcf7 .cf7_row .response select,
.wpcf7 .cf7_row .response textarea {
  border: none;
  font-size: clamp(14px, 2vw, 16px);
}
.wpcf7 .cf7_row .response p {
  padding: 0;
}
.wpcf7 .date-time-row {
  display: flex;
  align-items: center;
  gap: var(--dp-space-inner-pc);
  margin-bottom: var(--dp-space-inner-pc);
}
@media screen and (max-width: 959px) {
  .wpcf7 .date-time-row input {
    padding: 0 12px !important;
  }
}
.wpcf7 .form-address label,
.wpcf7 .form-address span {
  display: block;
  margin-bottom: 8px;
}
.wpcf7 .form-address .p-postal-code,
.wpcf7 .form-address #pref {
  width: 128px;
}
.wpcf7 .form-address .postal p {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wpcf7 .form-address .postal p span {
  width: 96px !important;
}
.wpcf7 input.wpcf7-submit {
  width: 100%;
  background-color: var(--color_main);
  border: 0;
  border-radius: 5px;
  color: white;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0 auto;
  padding: 16px;
}
.wpcf7 .cf7_btn {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}
.wpcf7 .wpcf7-spinner {
  width: 0;
  margin: 0;
}
.wpcf7 .form-bottom {
  margin-bottom: 16px;
}
.wpcf7 .form-bottom .wpcf7-list-item {
  margin-left: 0;
}
.wpcf7 .form-bottom p {
  margin-bottom: 32px;
}
.wpcf7 .form-bottom p .form-bottom-heading {
  display: block;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: bold;
}

/* お問い合わせフォーム */
/*--------------------------------------------------------
*
* footer フッター
*
--------------------------------------------------------*/
/*フッター*/
.l-footer {
  width: 100%;
  margin-top: 0;
  padding: 0 0 96px !important;
}
@media screen and (max-width: 599px) {
  .l-footer {
    padding: 48px 0 80px !important;
  }
}
.l-footer__foot {
  padding: 96px 0;
}
@media screen and (max-width: 599px) {
  .l-footer__foot {
    padding: 48px 0;
  }
}
.l-footer .l-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media screen and (max-width: 959px) {
  .l-footer .l-container {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }
}
@media screen and (max-width: 599px) {
  .l-footer .l-container {
    gap: 24px;
  }
}
.l-footer .footer-address {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
  max-width: 425px;
}
@media screen and (max-width: 959px) {
  .l-footer .footer-address {
    align-items: center;
    text-align: center;
    max-width: 100%;
  }
}
.l-footer .footer-address__logo-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.l-footer .footer-logo .c-headLogo {
  height: auto;
}
.l-footer .c-iconList {
  margin-bottom: 0;
}
.l-footer .c-iconList__item:not(.-line) {
  display: none;
}
.l-footer .c-iconList__item.-line a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 100%;
}
.l-footer .c-iconList__item.-line .icon-line:before {
  color: white !important;
  font-size: 24px;
  background-color: var(--color_deep03) !important;
  padding: 4px;
  border-radius: 4px;
}
.l-footer .footer-nav-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
}
@media screen and (max-width: 959px) {
  .l-footer .footer-nav-wrap {
    align-items: center;
  }
}
@media screen and (max-width: 599px) {
  .l-footer .footer-nav-wrap {
    align-items: flex-start;
    padding: 0 16px;
  }
}
.l-footer .footer-nav-wrap nav ul li a {
  position: relative;
  transition: 0.3s ease-in-out;
}
.l-footer .footer-nav-wrap nav ul li a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color_main);
  border-radius: 4px;
  opacity: 0;
  transition: 0.3s ease-in-out;
  transform: translateY(4px);
}
.l-footer .footer-nav-wrap nav ul li a:hover {
  color: inherit;
  text-decoration: none;
  opacity: 1;
}
.l-footer .footer-nav-wrap nav ul li a:hover::before {
  opacity: 1;
  transform: translateY(0);
}
.l-footer .footer-first-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.l-footer .footer-first-nav ul.l-footer__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media screen and (max-width: 959px) {
  .l-footer .footer-first-nav ul.l-footer__nav {
    justify-content: flex-start;
  }
}
.l-footer .footer-first-nav ul.l-footer__nav > li > a {
  display: inline;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  transition: 0.3s ease-in-out;
}
.l-footer .footer-first-nav ul.l-footer__nav > li a, .l-footer .footer-first-nav ul.l-footer__nav > li:first-child a {
  padding: 0;
  border: none !important;
}
.l-footer .footer-first-nav ul.l-footer__nav .footer-nav-right a {
  padding: 8px 16px;
  font-size: inherit;
}
.l-footer .footer-first-nav ul.l-footer__nav .footer-nav-right a:hover:before {
  content: none;
}
.l-footer .footer-first-nav .l-footer__nav {
  height: fit-content;
  padding: 0;
}
.l-footer .footer-first-nav .l-footer__nav .sub-menu .menu-item {
  margin-top: 8px;
  list-style: none;
}
.l-footer .footer-first-nav .l-footer__nav .sub-menu .menu-item a {
  font-size: 15px !important;
}
.l-footer .footer-secondary-nav ul.l-footer__nav-secondary {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media screen and (max-width: 959px) {
  .l-footer .footer-secondary-nav ul.l-footer__nav-secondary {
    justify-content: flex-start;
  }
}
.l-footer .footer-secondary-nav ul.l-footer__nav-secondary li a {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.3s ease-in-out;
}
.l-footer .footer-secondary-nav ul.l-footer__nav-secondary li a:hover {
  opacity: 0.7;
}
.l-footer .copyright {
  display: flex;
  justify-content: center;
  width: calc(100% - 96px);
  margin: 0 auto;
  padding-top: 40px;
  border-top: 1px solid var(--dp-color-sub);
}
@media screen and (max-width: 599px) {
  .l-footer .copyright {
    width: calc(100% - 32px);
  }
}

@keyframes lineAnime {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
}
/* フッター */
/* =============================================
 * Pattern A: タイトル中央配置
 * 余白 上160px / 下48px
 * サブタイトル縦並び・両端ダッシュ非表示
 * ============================================= */
.dp-ttl--a .l-topTitleArea {
  position: relative;
  overflow: visible;
  padding-top: 6em;
  padding-bottom: 6em;
  text-align: center;
}
@media screen and (max-width: 599px) {
  .dp-ttl--a .l-topTitleArea {
    padding-top: 4em;
    padding-bottom: 4em;
  }
}
.dp-ttl--a .l-topTitleArea__img {
  display: none;
}
.dp-ttl--a .l-topTitleArea::before, .dp-ttl--a .l-topTitleArea::after {
  content: "";
  position: absolute;
  width: 616px;
  height: 454px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  mix-blend-mode: multiply;
}
@media screen and (max-width: 959px) {
  .dp-ttl--a .l-topTitleArea::before, .dp-ttl--a .l-topTitleArea::after {
    width: 360px;
    height: 265px;
  }
}
.dp-ttl--a .l-topTitleArea::before {
  left: -208px;
  bottom: -160px;
  transform: rotate(180deg);
}
.dp-ttl--a .l-topTitleArea::after {
  right: -208px;
  top: -160px;
  transform: rotate(-165deg);
}
.dp-ttl--a .l-topTitleArea__body {
  text-shadow: none;
}
.dp-ttl--a .c-pageTitle {
  position: relative;
  z-index: 1;
  color: var(--color_main);
  font-size: var(--dp-font-size-page-title-pc);
}
@media screen and (max-width: 599px) {
  .dp-ttl--a .c-pageTitle {
    font-size: var(--dp-font-size-page-title-sp);
  }
}
.dp-ttl--a .c-pageTitle__subTitle {
  position: relative;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0.25em auto 0;
  padding: 0;
  opacity: 1;
  font-size: var(--dp-font-size-heading-pc);
  font-style: normal;
  visibility: hidden;
}
@media screen and (max-width: 599px) {
  .dp-ttl--a .c-pageTitle__subTitle {
    font-size: var(--dp-font-size-heading-sp);
  }
}

/* 固定ページ タイトルエリア */
/*

 背面イラスト (dp-illust)

 【パターン1: SWELLリッチカラム】
   wp:loos/column の className に dp-illust-wrap を付与
   → swell-block-column が containing block になる

 【パターン2: wp:group 単体】
   wp:group の className に dp-illust-wrap を付与
   → wp-block-group が containing block になる

 【共通: イラスト画像の付与クラス】
   dp-illust           … 背面絶対配置の基底（必須）
   dp-illust--tl/tr/bl/br … 配置バリアント（必須）
   dp-illust--s/m/l    … サイズバリアント（任意）

 【z-index 設計】
   isolation: isolate でスタッキングコンテキストを閉じ込める。
   イラストに z-index: -1 を付与することで、
   前面画像（通常フロー）がクラス追加なしで自然に前面になる。

*/
.dp-wrap .dp-illust-wrap {
  position: relative;
  isolation: isolate;
}
.dp-wrap .dp-illust {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  margin: 0;
}
.dp-wrap .dp-illust img {
  width: 160px;
  height: auto;
  object-fit: contain;
}
@media screen and (max-width: 599px) {
  .dp-wrap .dp-illust img {
    width: 120px;
  }
}
.dp-wrap .dp-illust--tl {
  top: -56px;
  left: -80px;
}
.dp-wrap .dp-illust--tr {
  top: -192px;
  right: 24px;
}
.dp-wrap .dp-illust--bl {
  bottom: 0;
  left: 0;
}
.dp-wrap .dp-illust--br {
  bottom: -56px;
  right: -80px;
}
@media screen and (max-width: 959px) {
  .dp-wrap .dp-illust--tl {
    top: -40px;
    left: -64px;
  }
  .dp-wrap .dp-illust--tr {
    top: auto;
    bottom: -128px;
    right: 0;
  }
  .dp-wrap .dp-illust--bl {
    bottom: 0;
    left: 0;
  }
  .dp-wrap .dp-illust--br {
    bottom: -40px;
    right: -64px;
  }
}
.dp-wrap .dp-illust--s {
  width: 100px;
}
.dp-wrap .dp-illust--m {
  width: 180px;
}
.dp-wrap .dp-illust--l {
  width: 260px;
}
@media screen and (max-width: 959px) {
  .dp-wrap .dp-illust--s {
    width: 72px;
  }
  .dp-wrap .dp-illust--m {
    width: 120px;
  }
  .dp-wrap .dp-illust--l {
    width: 180px;
  }
}

/* 背面イラスト */
/*
 背景装飾テクスチャ (dp-deco)

 セクションの対角に背景オブジェクトを配置するユーティリティ。
 overflow: hidden なし → 上下セクションに自然に侵食するデザイン。
 position: relative は .dp-wrap が担うため不要。
 background-image はカスタマイザー追加CSSで差し込む。

 【付与クラス（dp-wrap と同一要素に付与）】
   dp-deco--tr   … 右上に配置（::after）
   dp-deco--bl   … 左下に配置（::before）
   dp-deco--full … セクション全面背景（::before）

 【カスタマイザー追加CSS コピペテンプレート】
   .dp-deco--tr::after   { background-image: url("画像URL"); }
   .dp-deco--bl::before  { background-image: url("画像URL"); }
   .dp-deco--full::before { background-image: url("画像URL"); }
*/
.dp-wrap.dp-deco--tr::after, .dp-wrap.dp-deco--bl::before {
  content: "";
  position: absolute;
  width: 616px;
  height: 454px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  mix-blend-mode: multiply;
}
@media screen and (max-width: 959px) {
  .dp-wrap.dp-deco--tr::after, .dp-wrap.dp-deco--bl::before {
    width: 360px;
    height: 265px;
  }
}
.dp-wrap.dp-deco--tr::after {
  top: -160px;
  right: -208px;
  transform: rotate(-165deg);
}
.dp-wrap.dp-deco--bl::before {
  bottom: -160px;
  left: -208px;
  transform: rotate(180deg);
}

.dp-deco--full::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* 背景装飾テクスチャ */
/*

 ローディング + ヒーロー入場アニメーション

 【仕組み】
   1. PHP wp_head(priority:1) が <html class="dp-before-load"> をインラインJS で付与（FOUC防止）
   2. オーバーレイが画面を覆いながらローディング表示
   3. window.load + 最低表示時間経過 → loading.js が dp-before-load を外し dp-loaded を付与
   4. CSS transitionが走りヘッダー・コンテンツがスライドフェードイン

 【ブロックへのクラス付与】
   dp-enter-left  … 左ブロックに付与（左→右スライドフェードイン）
   dp-enter-right … 右ブロックに付与（右→左スライドフェードイン）
   dp-enter-up    … 下から上スライドフェードイン（その他コンテンツ用）

*/
#dp-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--color_bg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}
#dp-loading-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.dp-loading-spinner {
  position: relative;
  width: 56px;
  height: 56px;
}
.dp-loading-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 90deg, transparent 0%, var(--color_main, #333) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: dp-spin 0.9s linear infinite;
}
.dp-loading-spinner::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid var(--color_main, #333);
  opacity: 0;
  animation: dp-pulse-ring 1.8s ease-out infinite;
}

@keyframes dp-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes dp-pulse-ring {
  0% {
    transform: scale(0.82);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}
html.dp-before-load .l-header {
  opacity: 0;
  transform: translateY(-100%);
}
html.dp-before-load .dp-enter-left {
  opacity: 0;
  transform: translateX(-32px);
}
html.dp-before-load .dp-enter-right {
  opacity: 0;
  transform: translateX(32px);
}
html.dp-before-load .dp-enter-up {
  opacity: 0;
  transform: translateY(24px);
}

html.dp-loaded .l-header {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
html.dp-loaded .dp-enter-left,
html.dp-loaded .dp-enter-right {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease 0.2s, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}
html.dp-loaded .dp-enter-up {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease 0.5s, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
}

html.dp-scroll-ready .dp-enter-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
html.dp-scroll-ready .dp-enter-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
html.dp-scroll-ready .dp-enter-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
html.dp-scroll-ready .dp-enter-left.is-visible,
html.dp-scroll-ready .dp-enter-right.is-visible,
html.dp-scroll-ready .dp-enter-up.is-visible {
  opacity: 1;
  transform: none;
}

/* ローディング + 入場アニメーション */
/*

 LPビルダー（カート式一括コピー）
 カードチェックボックス / フローティングトリガー / カートドロワー

*/
/* =========================================================
 * ドロワー開放時の競合固定要素制御
 * z-index では解決できない stacking context 問題を
 * body クラスで対象要素を直接制御して解決する
 * ========================================================= */
body.dp-cart-is-open .dp-vertical-right-ja {
  visibility: hidden;
  pointer-events: none;
}
body.dp-cart-is-open .p-fixBtnWrap {
  visibility: hidden;
  pointer-events: none;
}
body.dp-cart-is-open .l-fixHeader {
  z-index: 1 !important;
}

/* =========================================================
 * チェックボックス（カードサムネイル左上 / position: absolute）
 * .pl-card-thumb は既に position: relative のため追加不要
 * ========================================================= */
.pl-card-select {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 26px;
  height: 26px;
  cursor: pointer;
}
.pl-card-select__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.pl-card-select__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pl-card-select__mark::after {
  content: "";
  display: none;
  width: 5px;
  height: 10px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
}
.pl-card-select__input:checked + .pl-card-select__mark {
  background: var(--color_main, #333);
  border-color: var(--color_main, #333);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.pl-card-select__input:checked + .pl-card-select__mark::after {
  display: block;
}
.pl-card-select:hover .pl-card-select__mark {
  border-color: #fff;
  background: rgba(0, 0, 0, 0.45);
}

/* =========================================================
 * 共通CSS エリアのLPビルダー追加チェックボックス
 * ========================================================= */
.dp-base-css-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.dp-base-css-select__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.dp-base-css-select__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--pl-border, #c8c8c4);
  border-radius: 4px;
  background: #fff;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dp-base-css-select__mark::after {
  content: "";
  display: none;
  width: 4px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
}
.dp-base-css-select__input:checked + .dp-base-css-select__mark {
  background: var(--color_main, #333);
  border-color: var(--color_main, #333);
}
.dp-base-css-select__input:checked + .dp-base-css-select__mark::after {
  display: block;
}
.dp-base-css-select__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color_text-sub, #666);
}
.dp-base-css-select:hover .dp-base-css-select__mark {
  border-color: var(--color_main, #333);
}

.pl-card.is-selected .pl-card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--color_main, #333);
  border-radius: var(--pl-radius, 4px);
  pointer-events: none;
  z-index: 2;
}

/* =========================================================
 * フローティングトリガーボタン
 * PC: 画面上部 top:24px の固定ピル（ページトップと同タイミングでフェードイン）
 * SP: 幅広の固定ピル（bottom配置）
 * 初期状態は非表示。スクロールで .is-visible を付与してフェードイン。
 * ========================================================= */
.dp-cart-trigger {
  position: fixed;
  bottom: 40px;
  right: 192px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 24px;
  background: var(--color_main, #333);
  color: #fff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: box-shadow 0.2s ease;
}
.dp-cart-trigger:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.dp-cart-trigger svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.dp-cart-trigger__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #fff;
  color: var(--color_main, #333);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.dp-cart-trigger__count[data-count="0"] {
  display: none;
}
@media screen and (max-width: 959px) {
  .dp-cart-trigger {
    top: auto;
    right: auto;
    left: 2em;
    bottom: 16px;
    width: calc(100% - 112px);
    max-width: 100%;
    border-radius: 8px;
    justify-content: center;
    padding: 14px 24px;
    font-size: 15px;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
  .dp-cart-trigger:hover {
    transform: none;
  }
  .dp-cart-trigger__label {
    display: block;
  }
  .dp-cart-trigger__count[data-count="0"] {
    display: none;
  }
}

/* =========================================================
 * オーバーレイ（ドロワー開放時の背面）
 * ========================================================= */
.dp-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 299;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.dp-cart-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================
 * カートドロワー本体
 * PC: 右スライドイン / SP: 下スライドアップ
 * ========================================================= */
.dp-cart-drawer {
  position: fixed;
  top: 96px;
  right: 24px;
  width: 360px;
  height: calc(100% - 120px);
  background: var(--pl-surface, #fff);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.16);
  border-radius: 16px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(110%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.dp-cart-drawer.is-open {
  transform: translateX(0);
}
@media screen and (max-width: 959px) {
  .dp-cart-drawer {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 80vh;
    max-height: 80dvh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.16);
    transform: translateY(110%);
  }
  .dp-cart-drawer.is-open {
    transform: translateY(0);
  }
}
.dp-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--pl-border, #e2e2de);
  flex-shrink: 0;
}
.dp-cart-drawer__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color_text, #333);
}
.dp-cart-drawer__title svg {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}
.dp-cart-drawer__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--color_main, #333);
  color: #fff;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.dp-cart-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color_text-sub, #6b6b6b);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s ease;
}
.dp-cart-drawer__close:hover {
  background: var(--pl-bg, #f5f5f3);
}
.dp-cart-drawer__close svg {
  width: 20px;
  height: 20px;
}

/* =========================================================
 * 全解除ボタン（ドロワーヘッダー内）
 * ========================================================= */
.dp-cart-clear-btn {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--pl-border, #e2e2de);
  background: transparent;
  color: var(--color_text-sub, #6b6b6b);
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 4px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dp-cart-clear-btn:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

.dp-cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.dp-cart-drawer__footer {
  padding: 16px 20px;
  border-top: 1px solid var(--pl-border, #e2e2de);
  flex-shrink: 0;
}

/* =========================================================
 * カートリスト
 * ========================================================= */
.dp-cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dp-cart-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--color_text-sub, #6b6b6b);
  font-size: 14px;
  line-height: 1.7;
}

/* =========================================================
 * カートアイテム（Phase 2）
 * ========================================================= */
.dp-cart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--pl-border, #e2e2de);
  transition: background 0.15s ease;
}
.dp-cart-item:last-child {
  border-bottom: none;
}
.dp-cart-item__drag {
  display: flex;
  align-items: center;
  color: var(--color_text-sub, #aaa);
  cursor: grab;
  flex-shrink: 0;
}
.dp-cart-item__drag:active {
  cursor: grabbing;
}
.dp-cart-item__thumb {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}
.dp-cart-item__thumb--empty {
  background: var(--pl-bg, #f5f5f3);
  border: 1px solid var(--pl-border, #e2e2de);
}
.dp-cart-item__title {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color_text, #333);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dp-cart-item__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--color_text-sub, #aaa);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease;
}
.dp-cart-item__remove:hover {
  background: #fee2e2;
  color: #dc2626;
}
.dp-cart-item--ghost {
  opacity: 0.4;
  background: var(--pl-bg, #f5f5f3);
}
.dp-cart-item--base-css {
  background: color-mix(in srgb, var(--color_main, #4f46e5) 6%, #fff);
  border-bottom: 1px solid var(--pl-border, #e2e2de);
}
.dp-cart-item--base-css .dp-cart-item__pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  flex-shrink: 0;
  color: var(--color_main, #333);
  opacity: 0.5;
}
.dp-cart-item--base-css .dp-cart-item__title {
  font-weight: 600;
}

/* =========================================================
 * 一括コピーボタン
 * ========================================================= */
.dp-cart-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: var(--color_main, #333);
  color: #fff;
  border: none;
  border-radius: var(--dp-radius, 4px);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dp-cart-copy-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.dp-cart-copy-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}
.dp-cart-copy-btn:not(:disabled):hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* =========================================================
 * トースト通知（Phase 3）
 * ========================================================= */
.dp-cart-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 400;
  padding: 12px 20px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.dp-cart-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.dp-cart-toast.is-error {
  background: #dc2626;
}
@media screen and (max-width: 959px) {
  .dp-cart-toast {
    bottom: 72px;
    font-size: 13px;
    white-space: normal;
    max-width: calc(100% - 32px);
    text-align: center;
  }
}

/* LPビルダー（カート式一括コピー） */
/*

 チュートリアル機能
 スプラッシュ画面 / ウォークスルー / ヘルプボタン

*/
/* =========================================================
 * スプラッシュ画面
 * ========================================================= */
.dp-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  transition: opacity 0.4s ease;
}
.dp-splash.is-hiding {
  opacity: 0;
  pointer-events: none;
}
.dp-splash__inner {
  max-width: 480px;
  width: calc(100% - 48px);
  padding: 40px 36px 36px;
  background: #fff;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}
.dp-splash__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  background: var(--color_main, #333);
  border-radius: 12px;
}
.dp-splash__icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
}
.dp-splash__lead {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color_main, #333);
  text-transform: uppercase;
}
.dp-splash__title {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color_text, #1a1a1a);
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.dp-splash__title::before, .dp-splash__title::after {
  content: none !important;
}
.dp-splash__desc {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color_text-sub, #666);
}
.dp-splash__btn {
  display: block;
  width: 100%;
  padding: 15px;
  margin-bottom: 12px;
  background: var(--color_main, #333);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.dp-splash__btn:hover {
  opacity: 0.85;
}
.dp-splash__skip {
  display: inline-block;
  font-size: 13px;
  color: var(--color_text-sub, #999);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dp-splash__skip:hover {
  color: var(--color_text, #333);
}
@media screen and (max-width: 599px) {
  .dp-splash {
    align-items: flex-end;
  }
  .dp-splash__inner {
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 32px 24px 40px;
  }
}

/* =========================================================
 * チュートリアル オーバーレイ（暗転）
 * ========================================================= */
.dp-tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.68);
  pointer-events: none;
  animation: dp-tut-fadein 0.3s ease forwards;
}

@keyframes dp-tut-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* =========================================================
 * スポットライト要素（JS で動的生成・position:fixed）
 *
 * outline / box-shadow は親の overflow:hidden にクリップされるため、
 * position:fixed の独立要素でターゲット rect を覆う方式を採用する。
 * これにより Step 2（pl-card / overflow:hidden 親）でも欠けない。
 *
 * 構成:
 *   - border: ターゲット周囲のカラーリング
 *   - background: ターゲット内側を薄く明るく見せる
 *   - box-shadow: ターゲット外側を暗くするオーバーレイ代替
 *   - pointer-events: none: クリックをターゲット要素に透過
 * ========================================================= */
#dp-tutorial-spotlight {
  position: fixed;
  z-index: 9001;
  pointer-events: none;
  border: 3px solid var(--color_main, #4f46e5);
  border-radius: 8px;
  box-shadow: 0 0 20px 4px rgba(79, 70, 229, 0.45);
  animation: dp-tut-spotlight-pulse 2s ease-in-out infinite;
}

@keyframes dp-tut-spotlight-pulse {
  0%, 100% {
    box-shadow: 0 0 16px 4px rgba(79, 70, 229, 0.35);
  }
  50% {
    box-shadow: 0 0 28px 8px rgba(79, 70, 229, 0.55);
  }
}
.is-tutorial-highlight {
  pointer-events: auto !important;
}

#dp-cart-copy-btn.is-tutorial-highlight {
  outline: 3px solid var(--color_main, #4f46e5) !important;
  outline-offset: 4px !important;
}

/* =========================================================
 * ツールチップ（吹き出し）
 * ========================================================= */
.dp-tutorial-tooltip {
  position: fixed;
  z-index: 9002;
  width: 300px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
  padding: 20px;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.dp-tutorial-tooltip.is-visible {
  opacity: 1;
}
.dp-tutorial-tooltip__gif-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  margin-bottom: 14px;
  background: var(--pl-bg, #f5f5f3);
  border: 1.5px dashed var(--pl-border, #c8c8c4);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color_main, #333);
  cursor: pointer;
  transition: background 0.15s ease;
}
.dp-tutorial-tooltip__gif-btn[hidden] {
  display: none;
}
.dp-tutorial-tooltip__gif-btn:hover {
  background: color-mix(in srgb, var(--color_main, #4f46e5) 8%, #fff);
}
.dp-tutorial-tooltip__gif-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.dp-tutorial-tooltip__text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--color_text, #1a1a1a);
}
.dp-tutorial-tooltip__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dp-tutorial-tooltip__step {
  font-size: 12px;
  color: var(--color_text-sub, #999);
  font-weight: 600;
  flex-shrink: 0;
}
.dp-tutorial-tooltip__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dp-tutorial-tooltip__skip {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--color_text-sub, #aaa);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
  white-space: nowrap;
}
.dp-tutorial-tooltip__skip:hover {
  color: var(--color_text, #333);
}
.dp-tutorial-tooltip__next {
  padding: 8px 20px;
  background: var(--color_main, #333);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.dp-tutorial-tooltip__next:hover {
  opacity: 0.85;
}
@media screen and (max-width: 959px) {
  .dp-tutorial-tooltip {
    width: calc(100% - 108px) !important;
    max-width: 420px;
    left: auto !important;
    right: 16px !important;
    top: auto !important;
    bottom: 84px !important;
    transform: translateX(0%) !important;
  }
}

/* =========================================================
 * ヘルプボタン（使い方再確認）
 * 縦書き CTA（bottom:56px〜） の上に配置
 * ========================================================= */
.dp-help-btn {
  position: fixed;
  right: 112px;
  bottom: 40px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: auto;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--color_main);
  border-radius: calc(var(--dp-radius) * 2);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--color_text-sub, #666);
  line-height: 1.3;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.dp-help-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}
.dp-help-btn svg {
  width: 18px;
  height: 18px;
  color: var(--color_main, #333);
  flex-shrink: 0;
}
@media screen and (max-width: 959px) {
  .dp-help-btn {
    top: auto;
    bottom: 80px;
    right: 14px;
    width: 56px;
    padding: 8px;
  }
}

/* =========================================================
 * GIF チュートリアルモーダル（Step 4 自動表示）
 * ========================================================= */
.dp-gif-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.dp-gif-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.dp-gif-modal__inner {
  position: relative;
  width: calc(100% - 32px);
  max-width: 500px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
  transform: scale(0.95);
  transition: transform 0.25s ease;
}
.dp-gif-modal.is-visible .dp-gif-modal__inner {
  transform: scale(1);
}
.dp-gif-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  transition: background 0.15s ease;
}
.dp-gif-modal__close:hover {
  background: rgba(0, 0, 0, 0.78);
}
.dp-gif-modal__close svg {
  width: 18px;
  height: 18px;
}
.dp-gif-modal__media {
  width: 100%;
  aspect-ratio: 16/9;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dp-gif-modal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dp-gif-modal__media--placeholder {
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
}
.dp-gif-modal__body {
  padding: 20px 24px 24px;
}
.dp-gif-modal__lead {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color_text-sub, #888);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dp-gif-modal__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dp-gif-modal__step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color_text, #333);
}
.dp-gif-modal__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--color_main, #333);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}
@media screen and (max-width: 959px) {
  .dp-gif-modal {
    align-items: flex-end;
  }
  .dp-gif-modal__inner {
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }
}

/* チュートリアル（スプラッシュ・ウォークスルー・ヘルプボタン） */
/*

 ドロワーメニュー リッチデザインパターン

 【仕組み】
   カスタマイザー「ドロワーメニュー デザイン」で選択
   → body に dp-spmenu--{a|b} を付与
   → SWELLのデフォルト .p-spMenu__inner（width:88vw）をフルスクリーンに上書き

 【SWELLの開閉制御】
   html[data-spmenu="opened"] .p-spMenu__inner { transform: translateX(0) }
   html[data-spmenu="closed"] … 各パターンの初期transform を適用

 【ウィジェットエリア】
   ロゴ → SWELL カスタマイザー「SPメニュータイトル」で設定
   CTA・電話番号・SNS → 「フッター 右カスタムエリア」等のウィジェットで設定

*/
#body_wrap.dp-spmenu--a .p-spMenu__inner,
#body_wrap.dp-spmenu--b .p-spMenu__inner {
  width: 100% !important;
  box-shadow: none !important;
  padding-top: 0 !important;
}
#body_wrap.dp-spmenu--a .p-spMenu__overlay,
#body_wrap.dp-spmenu--b .p-spMenu__overlay {
  display: none !important;
}

html:not([data-spmenu=opened]) #body_wrap.dp-spmenu--a .p-spMenu.-right .p-spMenu__inner,
html:not([data-spmenu=opened]) #body_wrap.dp-spmenu--b .p-spMenu.-right .p-spMenu__inner {
  transform: translateX(100%);
}
html:not([data-spmenu=opened]) #body_wrap.dp-spmenu--a .p-spMenu.-left .p-spMenu__inner,
html:not([data-spmenu=opened]) #body_wrap.dp-spmenu--b .p-spMenu.-left .p-spMenu__inner {
  transform: translateX(-100%);
}

@keyframes dp-nav-item-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
html[data-spmenu=opened] #body_wrap.dp-spmenu--a .c-spnav > li,
html[data-spmenu=opened] #body_wrap.dp-spmenu--b .c-spnav > li {
  animation: dp-nav-item-in 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
html[data-spmenu=opened] #body_wrap.dp-spmenu--a .c-spnav > li:nth-child(1),
html[data-spmenu=opened] #body_wrap.dp-spmenu--b .c-spnav > li:nth-child(1) {
  animation-delay: 0.25s;
}
html[data-spmenu=opened] #body_wrap.dp-spmenu--a .c-spnav > li:nth-child(2),
html[data-spmenu=opened] #body_wrap.dp-spmenu--b .c-spnav > li:nth-child(2) {
  animation-delay: 0.31s;
}
html[data-spmenu=opened] #body_wrap.dp-spmenu--a .c-spnav > li:nth-child(3),
html[data-spmenu=opened] #body_wrap.dp-spmenu--b .c-spnav > li:nth-child(3) {
  animation-delay: 0.37s;
}
html[data-spmenu=opened] #body_wrap.dp-spmenu--a .c-spnav > li:nth-child(4),
html[data-spmenu=opened] #body_wrap.dp-spmenu--b .c-spnav > li:nth-child(4) {
  animation-delay: 0.43s;
}
html[data-spmenu=opened] #body_wrap.dp-spmenu--a .c-spnav > li:nth-child(5),
html[data-spmenu=opened] #body_wrap.dp-spmenu--b .c-spnav > li:nth-child(5) {
  animation-delay: 0.49s;
}
html[data-spmenu=opened] #body_wrap.dp-spmenu--a .c-spnav > li:nth-child(6),
html[data-spmenu=opened] #body_wrap.dp-spmenu--b .c-spnav > li:nth-child(6) {
  animation-delay: 0.55s;
}
html[data-spmenu=opened] #body_wrap.dp-spmenu--a .c-spnav > li:nth-child(7),
html[data-spmenu=opened] #body_wrap.dp-spmenu--b .c-spnav > li:nth-child(7) {
  animation-delay: 0.61s;
}
html[data-spmenu=opened] #body_wrap.dp-spmenu--a .c-spnav > li:nth-child(8),
html[data-spmenu=opened] #body_wrap.dp-spmenu--b .c-spnav > li:nth-child(8) {
  animation-delay: 0.67s;
}

#body_wrap.dp-spmenu--a .p-spMenu__inner {
  background: #fff;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  height: 100vh !important;
  overflow-y: auto !important;
  position: relative;
  padding: 80px 24px 48px !important;
  box-sizing: border-box;
}
#body_wrap.dp-spmenu--a .p-spMenu__inner::before {
  background: transparent !important;
}
#body_wrap.dp-spmenu--a .dp-spmenu-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
#body_wrap.dp-spmenu--a .dp-spmenu-deco::before, #body_wrap.dp-spmenu--a .dp-spmenu-deco::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (max-width: 599px) {
  #body_wrap.dp-spmenu--a .dp-spmenu-deco::before, #body_wrap.dp-spmenu--a .dp-spmenu-deco::after {
    width: 200px;
    height: 200px;
  }
}
#body_wrap.dp-spmenu--a .dp-spmenu-deco::before {
  bottom: -60px;
  left: -60px;
  transform: rotate(180deg);
}
@media screen and (max-width: 599px) {
  #body_wrap.dp-spmenu--a .dp-spmenu-deco::before {
    bottom: -40px;
    left: -40px;
  }
}
#body_wrap.dp-spmenu--a .dp-spmenu-deco::after {
  top: -60px;
  right: -60px;
}
@media screen and (max-width: 599px) {
  #body_wrap.dp-spmenu--a .dp-spmenu-deco::after {
    top: -40px;
    right: -40px;
  }
}
#body_wrap.dp-spmenu--a .p-spMenu__closeBtn {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  width: 48px !important;
  height: 48px !important;
  z-index: 10;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
#body_wrap.dp-spmenu--a .p-spMenu__closeBtn .c-iconBtn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  background: var(--color_main, #333) !important;
  border-radius: 50% !important;
  color: #fff !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
#body_wrap.dp-spmenu--a .p-spMenu__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 560px;
  height: auto !important;
  overflow-y: visible !important;
  padding: 0 !important;
}
#body_wrap.dp-spmenu--a .c-widget__title.-spmenu {
  margin-bottom: 2em;
  text-align: center;
}
#body_wrap.dp-spmenu--a .p-spMenu__nav {
  width: 100%;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}
#body_wrap.dp-spmenu--a .c-spnav {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
#body_wrap.dp-spmenu--a .c-spnav > li {
  border: none !important;
}
#body_wrap.dp-spmenu--a .c-spnav > li > a {
  justify-content: center !important;
  text-align: center;
  font-size: clamp(18px, 4vw, 24px) !important;
  font-weight: 700 !important;
  padding: 0.65em 1em !important;
  letter-spacing: 0.05em;
}
#body_wrap.dp-spmenu--a .p-spMenu__bottom {
  margin-top: 2em !important;
  width: 100%;
  text-align: center;
}

#body_wrap.dp-spmenu--b .p-spMenu__inner {
  display: flex !important;
  flex-direction: column;
  min-height: 100vh;
  height: 100vh !important;
  overflow-y: auto !important;
  background: #f5f0e8 !important;
}
#body_wrap.dp-spmenu--b .p-spMenu__inner::before {
  display: none !important;
}
#body_wrap.dp-spmenu--b .p-spMenu__closeBtn {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 64px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
#body_wrap.dp-spmenu--b .p-spMenu__closeBtn .c-iconBtn {
  background: transparent !important;
  color: var(--color_text, #333) !important;
  font-size: 20px;
}
#body_wrap.dp-spmenu--b .p-spMenu__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: auto !important;
  overflow-y: visible !important;
  padding: 0 !important;
}
#body_wrap.dp-spmenu--b .c-widget__title.-spmenu {
  min-height: 64px;
  padding: 12px 72px 12px 24px !important;
  margin: 0 0 0 0 !important;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}
#body_wrap.dp-spmenu--b .p-spMenu__nav {
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}
#body_wrap.dp-spmenu--b .c-spnav {
  list-style: none;
  padding: 0;
  margin: 0;
}
#body_wrap.dp-spmenu--b .c-spnav > li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}
#body_wrap.dp-spmenu--b .c-spnav > li > a {
  padding: 1.1em 24px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  justify-content: space-between !important;
  letter-spacing: 0.03em;
}
#body_wrap.dp-spmenu--b .p-spMenu__bottom {
  margin-top: 0 !important;
  padding: 2em 24px !important;
  text-align: center;
}

/* ドロワーメニュー デザインパターン */
/*

 スマートアコーディオン（タグクラウド型）
 smart-accordion-01

*/
/* --- タグクラウド型アコーディオン --- */
.dp-smart-accordion-section .swell-block-accordion:not(.is-style-simple) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  border: none;
  background: transparent;
  padding: 0;
}
.dp-smart-accordion-section .swell-block-accordion:not(.is-style-simple) > .swell-block-accordion__item {
  flex: 0 0 auto;
  border: none;
  background: transparent;
}
.dp-smart-accordion-section .swell-block-accordion:not(.is-style-simple) > .swell-block-accordion__item[open] {
  flex: 0 0 100%;
}
.dp-smart-accordion-section .swell-block-accordion:not(.is-style-simple) > .swell-block-accordion__item > .swell-block-accordion__title {
  background: var(--dp-color-sub);
  border-radius: 9999px;
  padding: 10px 28px;
  border: none;
  font-weight: var(--dp-font-weight-heading);
  white-space: nowrap;
  cursor: pointer;
}
@media screen and (max-width: 599px) {
  .dp-smart-accordion-section .swell-block-accordion:not(.is-style-simple) > .swell-block-accordion__item > .swell-block-accordion__title {
    padding: 10px 20px;
    font-size: var(--dp-font-size-heading-sp);
  }
}
.dp-smart-accordion-section .swell-block-accordion:not(.is-style-simple) > .swell-block-accordion__item > .swell-block-accordion__body {
  padding-top: var(--dp-space-inner-pc);
}
@media screen and (max-width: 599px) {
  .dp-smart-accordion-section .swell-block-accordion:not(.is-style-simple) > .swell-block-accordion__item > .swell-block-accordion__body {
    padding-top: var(--dp-space-inner-sp);
  }
}
.dp-smart-accordion-section .swell-block-accordion.is-style-simple {
  display: block;
}
.dp-smart-accordion-section .wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  width: 100%;
}

/* タグクラウド型アコーディオン */