@charset "UTF-8";
/* ==================================================
* Dotcon+ 特設ページ
* 2026/10 Figma「260924_デザイン修正案」に合わせ全面リニューアル
* 旧版CSSは _backup/20261007/dotcon-plus.css に保存
* ================================================ */

/** ==================================================
* tokens
* ================================================ */
:root{
  --dp-blue: #1a77c7;
  --dp-blue-dark: #09599f;
  --dp-blue-03: #156aaa;
  --dp-blue-05: #64b9d8;
  --dp-blue-06: #a9d0ea;
  --dp-blue-02: #b0deef;
  --dp-blue-light: #bbe1f3;
  --dp-black: #28272a;
  --dp-black-400: #4f4e52;
  --dp-gray: #e0e0e0;
  --dp-gray-400: #ebeced;
  --dp-white-600: #f7f7f7;
  --dp-white-700: #f5f6f7;
  --dp-yellow: #ffe047;
  --dp-red: #c32d2d;
  --dp-shadow: 0 0 15px rgba(40, 39, 42, 0.1);
  --dp-gradient: linear-gradient(102deg, #1a77c7 18.5%, #00afd2 94.1%);
  --dp-noise: url(../img/dotcon-plus/noise.png) 0 0 / 100px 100px;
  --dp-noise-dark: url(../img/dotcon-plus/noise-dark.png) 0 0 / 100px 100px;
  /* 基本フォント：Be Vietnam Pro 優先（英数字）＋ Noto Sans JP（和文） */
  --dp-font-base: "Be Vietnam Pro", "Noto Sans JP", sans-serif;
  --dp-font-jp: var(--dp-font-base);
  --dp-font-en: var(--dp-font-base);
  --dp-font-yu: 'YuGothic', 'Yu Gothic', '游ゴシック', "Noto Sans JP", sans-serif;
  --dp-font-tel: "din-2014", var(--font-din);
  --dp-header-h: 80px;
  --dp-font-42: 30px;

  /* -- layout -- */
  --content-width: min(95vw, 1220px);
  --content-width-large: min(95vw, 1400px);
  --content-width-medium: min(95vw, 1140px);
  --content-width-small: min(95vw, 900px);
  --content-width-xsmall: min(95vw, 800px);
  --content-width-box: min(95vw, 1000px);
}
@media (min-width: 960px) {
  :root{
    --dp-font-42: 42px;
  }
}
@media (max-width:767px) {
  :root{
    --dp-header-h: 60px;
  }
}

/** ==================================================
* base
* ================================================ */
.dp-body{
  background-color: var(--color-white);
  font-family: var(--dp-font-base);
  color: var(--dp-black);
  font-feature-settings: "palt" 1;
}
html:has(.dp-body){
  scroll-padding-top: calc(var(--dp-header-h) + 32px);
}
.dp-main{
  position: relative;
  overflow-x: clip;
  background: var(--dp-noise), var(--color-white);
}
.dp-main img{
  vertical-align: top;
}
/* .dp-btn は独自の transition（transform / box-shadow）を持つため除外 */
.dp-main a:not(.dp-btn){
  transition: opacity var(--transition-duration) var(--transition-timing-function);
}

/** ==================================================
* 共通パーツ
* ================================================ */
/* 見出し */
.dp-heading{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.dp-heading>.ttl{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  line-height: 1;
}
.dp-heading>.ttl>.row{
  font-size: var(--font-29);
  letter-spacing: 0.04em;
}
.dp-heading>.ttl>.row.-std{
  font-size: var(--font-36);
  letter-spacing: 0;
  line-height: 1.3;
}
.dp-heading>.ttl>.row>.en{
  margin-right: 4px;
  color: var(--dp-blue);
  font-family: var(--dp-font-en);
  font-size: var(--font-36);
  letter-spacing: 0;
}
.dp-heading>.ttl>.row.-large{
  color: var(--dp-blue);
  font-size: var(--dp-font-42);
  font-weight: 900;
}
.dp-heading>.ttl>.row.-large>.num{
  margin-right: 2px;
  font-family: var(--dp-font-en);
  font-size: var(--font-60);
  font-weight: 900;
}
.dp-heading>.en-ttl{
  color: var(--dp-blue-05);
  font-family: var(--font-din);
  font-size: var(--font-20);
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ボタン（グラデーション + 下影） */
.dp-btn{
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 999px;
  background: var(--dp-gradient);
  box-shadow: 0 6px 0 var(--dp-blue-dark);
  color: var(--color-white);
  font-weight: 700;
  transition: transform var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function);
}
.dp-btn>.label{
  flex: 1;
  text-align: center;
  line-height: 1.2;
}
.dp-btn>.arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
}
.dp-btn>.arrow>img{
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  .dp-btn:hover{
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--dp-blue-dark);
  }
}

/* 来場アイコン（Figma上の複数パーツを重ねて表示） */
.dp-visit-icon{
  display: block;
  position: relative;
  flex-shrink: 0;
  width: 99.44px;
  aspect-ratio: 99.44 / 51;
}
.dp-visit-icon>img{
  position: absolute;
  max-width: none;
}
.dp-visit-icon>.v1{ left: 0;      top: 0;      width: 65.4%;  height: 100%; }
.dp-visit-icon>.v2{ left: 1.93%;  top: 3.67%;  width: 61.6%;  height: 92.67%; }
.dp-visit-icon>.v3{ left: 2.42%;  top: 4.68%;  width: 60.59%; height: 90.63%; }
.dp-visit-icon>.v4{ left: 53.09%; top: 7.33%;  width: 46.9%;  height: 91.45%; }
.dp-visit-icon>.v5{ left: 55.5%;  top: 12.02%; width: 42.09%; height: 82.05%; }

/* 維風工業ロゴ（Figma上の複数パーツを重ねて表示） */
.dp-logo-ibuki{
  display: block;
  position: relative;
  aspect-ratio: 244 / 75;
}
.dp-logo-ibuki.-header{
  width: 110px;
}
.dp-logo-ibuki.-footer{
  width: 244px;
}
.dp-logo-ibuki>img{
  position: absolute;
  max-width: none;
}
.dp-logo-ibuki>.p1{ left: 0;      top: 0;      width: 31.73%; height: 100%; }
.dp-logo-ibuki>.p2{ left: 37.95%; top: 14.83%; width: 62.05%; height: 45.32%; }
.dp-logo-ibuki>.p3{ left: 42.11%; top: 71.08%; width: 53.74%; height: 20.34%; }

/* 青ライン付き小見出し */
.dp-line-ttl{
  display: flex;
  align-items: center;
  gap: 32px;
  color: var(--dp-blue-03);
  font-size: var(--font-22);
  font-weight: 700;
  line-height: 2.4;
}
.dp-line-ttl::before,
.dp-line-ttl::after{
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--dp-blue);
}

/* 時間差フェードイン
   親リスト（.fade-in）が画面に入ったら、子要素を上から順に0.3秒ずつずらして表示 */
.dp-stagger.fade-in{
  opacity: 1;
}
.dp-stagger.fade-in.active{
  animation: none;
}
.dp-stagger>*{
  opacity: 0;
}
.dp-stagger.active>*{
  animation: fadeIn 1s ease-in-out forwards;
}
.dp-stagger.active>*:nth-child(2){ animation-delay: 0.3s; }
.dp-stagger.active>*:nth-child(3){ animation-delay: 0.6s; }
.dp-stagger.active>*:nth-child(4){ animation-delay: 0.9s; }
.dp-stagger.active>*:nth-child(5){ animation-delay: 1.2s; }
/* 5つのポイント：2つのリストにまたがって01〜05を順番に表示 */
.dp-point__cards.fade-in{
  opacity: 1;
}
.dp-point__cards.fade-in.active{
  animation: none;
}
.dp-point__cards .dp-point-card{
  opacity: 0;
}
.dp-point__cards.active .dp-point-card{
  animation: fadeIn 1s ease-in-out forwards;
}
.dp-point__cards.active .dp-point__list.-large>.dp-point-card:nth-child(2){ animation-delay: 0.3s; }
.dp-point__cards.active .dp-point__list.-small>.dp-point-card:nth-child(1){ animation-delay: 0.6s; }
.dp-point__cards.active .dp-point__list.-small>.dp-point-card:nth-child(2){ animation-delay: 0.9s; }
.dp-point__cards.active .dp-point__list.-small>.dp-point-card:nth-child(3){ animation-delay: 1.2s; }

/* 下線ボタン */
.dp-line-btn{
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  padding: 24px 64px 24px 0;
  border-bottom: 1px solid var(--dp-black);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.dp-line-btn>.arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 0;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(40, 39, 42, 0.2);
  border-radius: 999px;
  transform: translateY(-50%);
  transition: background-color var(--transition-duration) var(--transition-timing-function);
}
.dp-line-btn>.arrow>img{
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  .dp-line-btn:hover>.arrow{
    background-color: var(--color-white);
  }
}

/** ==================================================
* header
* ================================================ */
.dp-header{
  position: fixed;
  top: 16px;
  left: 40px;
  right: 40px;
  z-index: var(--z-index-site-wrap-header);
}
.dp-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--dp-header-h);
  padding: 0 16px 0 21px;
  border-radius: 6px;
  background-color: var(--color-white);
  box-shadow: var(--dp-shadow);
}
.dp-header__brand{
  display: flex;
  align-items: center;
  gap: 37px;
}
.dp-header__ibuki{
  display: block;
}
.dp-header__dotcon{
  width: 220px;
  line-height: 0;
}
.dp-header__dotcon>img{
  width: 100%;
}
.dp-header__action{
  display: flex;
  align-items: center;
  gap: 48px;
}
/* ヘッダーの電話はSPのみ表示 */
.dp-header__tel{
  display: none;
  align-items: center;
  gap: 10px;
}
.dp-header__tel>.icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background-color: var(--dp-black);
}
.dp-header__tel>.icon>img{
  width: 20px;
  height: 20px;
}
.dp-header__tel>.num{
  font-family: var(--dp-font-tel);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.dp-btn.-header{
  width: 320px;
  height: 60px;
  margin-bottom: 6px;
  padding: 0 19px 0 22px;
  font-size: 18px;
  letter-spacing: 0.02em;
}
.dp-btn.-header>.dp-visit-icon{
  margin-top: 4px;
}
@media (max-width:1400px) {
  .dp-header__tel>.num{
    font-size: 30px;
  }
  .dp-header__action{
    gap: 24px;
  }
}
@media (max-width:1200px) {
  .dp-header{
    left: 20px;
    right: 20px;
  }
  .dp-header__brand{
    gap: 20px;
  }
  .dp-header__dotcon{
    width: 170px;
  }
  .dp-header__tel>.num{
    display: none;
  }
  .dp-btn.-header{
    gap: 8px;
    width: auto;
    font-size: 16px;
  }
  .dp-btn.-header>.dp-visit-icon{
    width: 72px;
  }
}
@media (max-width:767px) {
  .dp-header{
    top: 8px;
    left: 8px;
    right: 8px;
  }
  .dp-header__inner{
    gap: 8px;
    padding-inline: 1em;
  }
  .dp-header__brand{
    gap: 5px;
    flex-direction: column;
    align-items: flex-start;
  }
  .dp-logo-ibuki.-header{
    width: 80px;
  }
  .dp-header__dotcon{
    width: 96px;
  }
  .dp-header__action{
    gap: 8px;
  }
  .dp-header__tel{
    display: flex;
  }
  .dp-header__tel>.icon{
    width: 36px;
    height: 36px;
  }
  .dp-btn.-header{
    width: auto;
    height: 40px;
    margin-bottom: 4px;
    padding: 0 12px;
    box-shadow: 0 4px 0 var(--dp-blue-dark);
    font-size: 12px;
  }
  .dp-btn.-header>.dp-visit-icon,
  .dp-btn.-header>.arrow{
    display: none;
  }
}

/** ==================================================
* Hero
* ================================================ */
.dp-hero{
  position: relative;
  min-height: 833px;
  padding: var(--px-150) 0 0 var(--px-60);
  background-color: var(--dp-white-700);
}
/* 重なり順はFigma通り：波A ＜ 動画 ＜ 波B ＜ テキスト */
.dp-hero__media{
  position: absolute;
  z-index: 1;
  top: -55px;
  left: 51.375%;
  width: 820px;
  height: 848px;
  overflow: hidden;
}
.dp-hero__media>.movie{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dp-hero__wave{
  position: absolute;
  inset: auto 0 0;
  pointer-events: none;
}
.dp-hero__wave>.wave{
  position: absolute;
  aspect-ratio: 708.87 / 110.28;
}
/* --wave-scale：SP では波を横に引き伸ばし、うねりが見えるようにする */
.dp-hero__wave>.wave.-a{
  left: -1.13%;
  width: calc(101.88% * var(--wave-scale, 1));
  bottom: calc(4.275vw * var(--wave-scale, 1));
}
.dp-hero__wave>.wave.-b{
  z-index: 2;
  left: -0.94%;
  width: calc(101.88% * var(--wave-scale, 1));
  aspect-ratio: 708.87 / 83.78;
  bottom: -0.475vw;
}
.dp-hero__wave>.wave>img{
  position: absolute;
  left: 0;
  width: 100%;
  max-width: none;
}
.dp-hero__wave>.wave.-a>.w1{ top: 5.28%; height: 94.72%; }
.dp-hero__wave>.wave.-a>.w2{ top: 0;     height: 35.72%; }
.dp-hero__wave>.wave.-b>.w1{ top: 6.98%; height: 93.02%; }
.dp-hero__wave>.wave.-b>.w2{ top: 0;     height: 42.41%; }

.dp-hero__content{
  position: relative;
  z-index: 3;
  width: max-content;
  max-width: 50%;
}
.dp-hero__ttl{
  font-family: var(--dp-font-yu);
  font-size: var(--font-60);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
}
.dp-hero__lead{
  position: relative;
  margin: 28px 0 0 4px;
  padding-top: 24px;
  font-size: var(--font-22);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.dp-hero__lead::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background-color: var(--dp-black);
}
.dp-hero__award{
  width: 573px;
  margin-top: 37px;
  padding: 14px 20px 16px 38px;
  border: 2px solid var(--dp-blue-06);
  border-radius: 6px;
  background-color: var(--color-white);
}
.dp-hero__award>.item{
  position: relative;
  padding-left: 29px;
  color: var(--dp-blue);
  font-size: var(--font-20);
  font-weight: 700;
  line-height: 1.75;
}
.dp-hero__award>.item::before,
.dp-hero__award>.item::after{
  content: "";
  position: absolute;
  top: calc(0.875em - 10px);
  left: 0;
  width: 20px;
  height: 20px;
  background: url(../img/dotcon-plus/check-circle-s.svg) no-repeat center / 20px 20px;
}
.dp-hero__award>.item::after{
  background: url(../img/dotcon-plus/check-s.svg) no-repeat center / 12px 8px;
}
.dp-hero__action{
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 42px;
}
.dp-btn.-hero{
  flex-shrink: 0;
  width: 381px;
  height: 70px;
  margin-bottom: 6px;
  padding: 0 21px 0 27px;
  font-size: var(--font-24);
  letter-spacing: 0.02em;
}
.dp-btn.-hero>.arrow{
  width: 40px;
  height: 40px;
  border-color: rgba(255, 255, 255, 0.5);
}
.dp-hero__line{
  position: relative;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--dp-blue);
  color: var(--dp-blue);
  font-size: var(--font-22);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media (hover: hover) {
  .dp-hero__line:hover{
    opacity: var(--transition-opacity);
  }
}
@media (max-width:1400px) {
  .dp-hero__media{
    left: 50%;
    width: 52%;
  }
  .dp-hero__content{
    width: 46%;
  }
  .dp-hero__ttl{
    font-size: 4vw;
  }
  .dp-hero__award{
    width: 100%;
    padding-left: 24px;
  }
  .dp-hero__action{
    flex-wrap: wrap;
    gap: 24px 40px;
  }
}
@media (max-width:1200px) {
  .dp-hero{
    padding: 140px 0 0 32px;
  }
  .dp-btn.-hero{
    width: 340px;
    font-size: 20px;
  }
}
@media (max-width:960px) {
  .dp-hero{
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: calc(var(--dp-header-h) + 50px) 0 0;
  }
  .dp-hero__content{
    width: var(--content-width);
    max-width: none;
    margin-inline: auto;
  }
  .dp-hero__ttl{
    font-size: var(--font-60);
    white-space: normal;
  }
  .dp-hero__media{
    position: relative;
    top: auto;
    left: auto;
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-top: 64px;
  }
  .dp-hero{
    --wave-scale: 2;
  }
  .dp-hero__wave>.wave.-a{
    bottom: calc(100vw * 9 / 16 + 4.75vw * var(--wave-scale));
  }
  .dp-hero__wave>.wave.-b{
    bottom: calc(100vw * 9 / 16);
  }
}
@media (max-width:767px) {
  .dp-hero__ttl{
    font-size: 34px;
  }
  .dp-hero__lead{
    margin-top: 20px;
    padding-top: 18px;
  }
  .dp-hero__award{
    margin-top: 24px;
    padding: 12px 14px;
  }
  .dp-hero__award>.item{
    padding-left: 26px;
    font-size: 15px;
  }
  .dp-hero__action{
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 28px;
  }
  .dp-btn.-hero{
    width: 100%;
    max-width: 381px;
    height: 60px;
    margin-inline: auto;
    padding: 0 14px 0 18px;
    font-size: 18px;
  }
  .dp-btn.-hero>.dp-visit-icon{
    width: 72px;
  }
  .dp-btn.-hero>.arrow{
    width: 32px;
    height: 32px;
  }
  .dp-hero__line{
    align-self: center;
    font-size: 16px;
  }
}
@media (max-width:560px) {
  .dp-hero{
    --wave-scale: 2.2;
  }
}

/** ==================================================
* お悩み
* ================================================ */
.dp-trouble{
  position: relative;
  padding: 79px 0 133px;
  background-color: var(--dp-blue-light);
}
.dp-trouble__box{
  display: grid;
  grid-template-columns: 437px 1fr;
  grid-template-areas:
    "head head"
    "media list";
  column-gap: 69px;
  position: relative;
  width: var(--content-width-medium);
  min-height: 667px;
  margin-inline: auto;
  translate: 28px 0;
  padding: 61px 74px 0 0;
  border-radius: 8px;
  background: var(--dp-noise), var(--dp-gray-400);
}
.dp-trouble__head{
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  margin-left: 288px;
}
.dp-trouble__head>.sub{
  color: var(--dp-black-400);
  font-size: var(--font-20);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.dp-trouble__head>.ttl{
  display: flex;
  align-items: center;
  font-size: var(--font-26);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.dp-trouble__head>.ttl>span{
  color: var(--dp-blue);
  font-size: var(--font-38);
}
.dp-trouble__head>.ttl::after{
  content: "";
  flex: 1;
  height: 1.5px;
  margin-left: 1em;
  background-color: var(--dp-black);
}
.dp-trouble__media{
  grid-area: media;
  position: relative;
  width: 500px;
  margin: 41px 0 -27px -63px;
}
.dp-trouble__media>img{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  object-fit: cover;
}
.dp-trouble__list{
  grid-area: list;
  position: relative;
  margin-top: 56px;
}
.dp-trouble__list>.item{
  position: relative;
  margin-bottom: 39px;
  padding: 0 0 15px 41px;
  border-bottom: 1px dashed var(--dp-black);
  font-size: var(--font-20);
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.dp-trouble__list>.item::before{
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 30px;
  height: 28px;
  background: url(../img/dotcon-plus/check-mark.svg) no-repeat center / contain;
}
@media (max-width:1200px) {
  .dp-trouble__box{
    grid-template-columns: 40% 1fr;
    column-gap: 40px;
    translate: none;
    padding: 50px 40px 50px 0;
  }
  .dp-trouble__head{
    margin-left: 40px;
  }
  .dp-trouble__media{
    width: auto;
    margin: 41px 0 0 -40px;
  }
}
@media (max-width:960px) {
  .dp-trouble{
    padding: 60px 0 100px;
  }
  .dp-trouble__box{
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 40px 1em;
  }
  .dp-trouble__head{
    margin-left: 0;
  }
  .dp-trouble__list{
    order: 2;
    margin-top: 32px;
  }
  .dp-trouble__list>.item{
    margin-bottom: 20px;
    padding-left: 36px;
  }
  .dp-trouble__list>.item::before{
    top: -2px;
    left: 0;
    width: 26px;
  }
  .dp-trouble__media{
    order: 3;
    width: 100%;
    max-width: 500px;
    margin: 12px auto 0;
  }
}
@media (max-width:767px) {
  .dp-trouble__head>.ttl::after{
    display: none;
  }
}

/** ==================================================
* 解決
* ================================================ */
.dp-solution{
  position: relative;
  padding-top: 122px;
  background: linear-gradient(var(--dp-blue-light) 0 287px, transparent 287px);
}
.dp-solution__band{
  position: absolute;
  top: 0;
  left: -2.65%;
  width: 104.4%;
  height: 734px;
  background: var(--dp-noise), var(--dp-white-700);
  transform: rotate(2deg);
  transform-origin: left top;
}
.dp-solution__deco{
  position: absolute;
  top: 254px;
  left: 52.5%;
  width: 831px;
  opacity: 0.75;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.dp-solution__deco>img{
  width: 100%;
  aspect-ratio: 831 / 534;
  object-fit: cover;
}
.dp-solution__inner{
  position: relative;
  width: var(--content-width-medium);
  margin-inline: auto;
}
.dp-solution__ttl{
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-weight: 700;
  line-height: 1;
}
.dp-solution__ttl>.first{
  margin-left: 4px;
  font-size: var(--font-40);
  letter-spacing: 0.04em;
}
.dp-solution__ttl>.main{
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.dp-solution__ttl>.main>.logo{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 9px;
}
.dp-solution__ttl>.main>.logo>.kana{
  margin-left: 4px;
  font-size: var(--font-18);
  letter-spacing: 0.04em;
}
.dp-solution__ttl>.main>.ga{
  margin: 46px 12px 0 15px;
  font-size: var(--font-50);
  letter-spacing: -0.02em;
}
.dp-solution__ttl>.main>.box{
  display: flex;
}
.dp-solution__ttl>.main>.box>span{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  padding-bottom: 6px;
  border: 3px solid var(--dp-blue);
  color: var(--dp-blue);
  font-size: 84px;
  letter-spacing: -0.02em;
}
.dp-solution__ttl>.main>.box>span+span{
  margin-left: -3px;
}
.dp-solution__ttl>.main>.end{
  margin: 46px 0 0 10px;
  font-size: var(--font-50);
  letter-spacing: 0.04em;
}
.dp-logo-plus{
  display: block;
  position: relative;
  width: 380px;
  aspect-ratio: 380 / 91;
}
.dp-logo-plus>img{
  position: absolute;
  max-width: none;
}
.dp-logo-plus>.l1{ left: 0;      top: 4.59%;  width: 82.16%; }
.dp-logo-plus>.l2{ left: 0;      top: 0;      width: 82.16%; }
.dp-logo-plus>.l3{ left: 1.47%;  top: 6.32%;  width: 79.16%; }
.dp-logo-plus>.l4{ left: 77.76%; top: 1.38%;  width: 22.18%; }
.dp-logo-plus>.l5{ left: 79.58%; top: 39.84%; width: 11.2%; }

.dp-solution__txt{
  position: relative;
  margin: 46px 0 0 6px;
  color: var(--dp-blue-03);
  font-family: var(--dp-font-jp);
  font-size: var(--font-20);
  font-weight: 700;
  line-height: 2;
}
.dp-strip{
  position: relative;
  margin-top: 104px;
}
.dp-strip .splide__slide{
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 370px;
}
/* Figma上のトリミング位置を再現 */
.dp-strip .splide__slide>img{
  position: absolute;
  left: var(--crop-x, 0);
  top: var(--crop-y, 0);
  width: var(--crop-w, 100%);
  height: var(--crop-h, 100%);
  max-width: none;
}
.dp-strip .splide__slide.-s1{ --crop-h: 180%;    --crop-y: -34.06%; }
.dp-strip .splide__slide.-s2{ --crop-w: 122.8%;  --crop-h: 124.34%; --crop-x: -11.4%; --crop-y: -17.1%; }
.dp-strip .splide__slide.-s3{ --crop-w: 111.4%;  --crop-h: 112.79%; --crop-x: -6.4%;  --crop-y: -10.55%; }
.dp-strip .splide__slide.-s4{ --crop-h: 101.25%; --crop-y: -0.63%; }
@media (max-width:1200px) {
  .dp-logo-plus{
    width: 300px;
  }
  .dp-solution__ttl>.main>.ga,
  .dp-solution__ttl>.main>.end{
    margin-top: 32px;
  }
  .dp-solution__ttl>.main>.box>span{
    width: 76px;
    height: 76px;
    font-size: 64px;
  }
}
@media (max-width:960px) {
  .dp-solution{
    padding-top: 80px;
    background: linear-gradient(var(--dp-blue-light) 0 120px, transparent 120px);
  }
  .dp-solution__band{
    height: 100%;
  }
  .dp-solution__deco{
    top: auto;
    bottom: 280px;
    left: 30%;
    width: 90%;
    opacity: 0.3;
  }
  .dp-strip{
    margin-top: 64px;
  }
  .dp-strip .splide__slide{
    width: 60vw;
    height: calc(60vw * 370 / 500);
  }
}
@media (max-width:767px) {
  .dp-solution__ttl{
    gap: 5px;
  }
  .dp-solution__ttl>.first{
    font-size: 26px;
  }
  .dp-logo-plus{
    width: 200px;
  }
  .dp-solution__ttl>.main>.logo>.kana{
    font-size: 14px;
  }
  .dp-solution__ttl>.main>.ga{
    margin: 32px 8px 0 12px;
    font-size: 28px;
  }
  .dp-solution__ttl>.main>.box>span{
    width: 60px;
    height: 60px;
    padding-bottom: 4px;
    font-size: 48px;
  }
  .dp-solution__ttl>.main>.end{
    margin: 32px 0 0 8px;
    font-size: 28px;
  }
  .dp-solution__txt{
    margin: 32px 0 0;
  }
  .dp-solution__deco{
    left: 35%;
    bottom: 150px;
  }
}
@media (max-width:560px) {
  .dp-solution__ttl>.main{
    align-items: center;
    row-gap: 12px;
  }
  .dp-solution__ttl>.main>.logo{
    width: 100%;
    margin-top: 0;
  }
  .dp-solution__ttl>.main>.ga{
    margin: 0 8px 0 0;
  }
  .dp-solution__ttl>.main>.box>span{
    width: 60px;
    height: 60px;
    padding-bottom: 4px;
    font-size: 48px;
  }
  .dp-solution__ttl>.main>.end{
    margin: 0 0 0 8px;
  }
}

/** ==================================================
* 5つのポイント
* ================================================ */
.dp-point{
  position: relative;
  padding: 123px 0 100px;
  border-bottom: 1px solid var(--dp-gray);
  background: var(--dp-noise), var(--dp-white-600);
}
.dp-point__inner{
  position: relative;
  width: var(--content-width-large);
  margin-inline: auto;
}
.dp-point__list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 84px;
}
.dp-point__list.-small{
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
  margin-top: 77px;
}
.dp-point-card{
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 8px;
  background-color: var(--color-white);
  box-shadow: var(--dp-shadow);
}
.dp-point-card__num{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -41px;
  left: 50%;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background-color: var(--dp-blue);
  color: var(--color-white);
  font-family: var(--font-din);
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.04em;
  transform: translateX(-50%);
}
.dp-point-card__media{
  position: relative;
  overflow: hidden;
  aspect-ratio: 684 / 260;
  border-radius: 8px 8px 0 0;
}
.dp-point-card.-small .dp-point-card__media{
  aspect-ratio: 445 / 260;
}
/* 画像は表示サイズ（大：684×260／小：445×260）の2倍で書き出し済み。枠いっぱいに表示 */
.dp-point-card__media>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dp-point-card__body{
  padding: 44px 41px 48px;
}
.dp-point-card__ttl{
  font-size: var(--font-40);
  font-weight: 700;
  line-height: 1;
}
.dp-point-card__ttl>span{
  display: inline-block;
  position: relative;
  isolation: isolate;
}
.dp-point-card__ttl>span::before{
  content: "";
  position: absolute;
  left: -0.5px;
  right: -0.5px;
  bottom: 8px;
  z-index: -1;
  height: 12px;
  background-color: var(--dp-yellow);
}
.dp-point-card__sub{
  margin-top: 32px;
  color: var(--dp-blue);
  font-size: var(--font-26);
  font-weight: 700;
  line-height: 1.5;
}
.dp-point-card__txt{
  margin-top: 20px;
  font-size: var(--font-17);
  line-height: 1.9;
}
/* 小カード（03〜05） */
.dp-point-card.-small .dp-point-card__num{
  top: -35px;
  width: 56px;
  height: 56px;
  font-size: 34px;
}
.dp-point-card.-small .dp-point-card__body{
  padding: 41px 27px 40px;
}
.dp-point-card.-small .dp-point-card__ttl{
  font-size: var(--font-38);
}
.dp-point-card.-small .dp-point-card__sub{
  margin-top: 32px;
  font-size: var(--font-22);
}
.dp-point-card.-small .dp-point-card__txt{
  margin-top: 18px;
  font-size: 16px;
}
@media (max-width:1200px) {
  .dp-point-card__body{
    padding: 40px 28px;
  }
  .dp-point-card.-small .dp-point-card__body{
    padding: 36px 20px;
  }
  .dp-point-card.-small .dp-point-card__ttl{
    font-size: 30px;
  }
  .dp-point-card.-small .dp-point-card__sub{
    font-size: 18px;
  }
}
@media (max-width:960px) {
  .dp-point{
    padding: 80px 0;
  }
  .dp-point__list,
  .dp-point__list.-small{
    grid-template-columns: 1fr;
    gap: 72px;
    max-width: 640px;
    margin: 100px auto 0;
  }
  /* 1列表示では01・02の画像の高さを03〜05（445:260）に揃える */
  .dp-point-card__media{
    aspect-ratio: 445 / 260;
  }
  .dp-point__list.-small{
    margin-top: 72px;
  }
  .dp-point-card.-small .dp-point-card__num{
    top: -41px;
    width: 64px;
    height: 64px;
    font-size: 40px;
  }
}
@media (max-width:767px) {
  .dp-point-card__body,
  .dp-point-card.-small .dp-point-card__body{
    padding: 32px 20px;
  }
  .dp-point-card__ttl,
  .dp-point-card.-small .dp-point-card__ttl{
    font-size: 30px;
  }
  .dp-point-card__ttl>span::before{
    bottom: 4px;
    height: 10px;
  }
  .dp-point-card__sub,
  .dp-point-card.-small .dp-point-card__sub{
    margin-top: 20px;
    font-size: 18px;
  }
  .dp-point-card__txt,
  .dp-point-card.-small .dp-point-card__txt{
    margin-top: 14px;
  }
}

/* デザイン性 */
.dp-design{
  position: relative;
  width: var(--content-width-box);
  max-width: 100%;
  margin: 70px auto 0;
  padding: 53px 55px 54px;
  border-radius: 8px;
  background-color: var(--color-white);
  box-shadow: var(--dp-shadow);
}
.dp-design__head{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dp-check-ttl{
  display: block;
  position: relative;
  width: 160px;
  aspect-ratio: 160 / 62;
}
.dp-check-ttl>img{
  position: absolute;
  max-width: none;
}
.dp-check-ttl>.c1{ left: 75.86%; top: 15.05%; width: 24.14%; height: 75.75%; }
.dp-check-ttl>.c2{ left: 84.99%; top: 8.57%;  width: 14.28%; height: 14.39%; }
.dp-check-ttl>.c3{ left: 0;      top: 0;      width: 70.1%;  height: 31.66%; }
.dp-check-ttl>.c4{ left: 0.03%;  top: 68.06%; width: 70.08%; height: 31.94%; }
.dp-check-ttl>.c5{ left: 1.87%;  top: 40.05%; width: 62.56%; height: 21.6%; }
.dp-design__head>.ttl{
  margin-top: 32px;
  font-size: var(--font-26);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}
.dp-design__head>.txt{
  margin-top: 25px;
  font-size: var(--font-17);
  line-height: 2;
}
.dp-design__head>.parts{
  width: min(100%, 600px);
  margin-top: 29px;
}
.dp-design__head>.parts>img{
  width: 100%;
}
.dp-design .dp-line-ttl{
  margin-top: 46px;
}
.dp-design .dp-line-ttl:nth-of-type(2){
  margin-top: 82px;
}
.dp-design__img{
  margin-top: 7px;
}
.dp-design__img>img{
  width: 100%;
}
.dp-design__note{
  margin-top: 15px;
  font-size: 16px;
  line-height: 2;
}
@media (max-width:767px) {
  .dp-design{
    margin-top: 56px;
    padding: 40px 16px;
  }
  .dp-design__head>.txt{
    text-align: left;
  }
  .dp-design .dp-line-ttl{
    gap: 16px;
  }
  .dp-design .dp-line-ttl:nth-of-type(2){
    margin-top: 48px;
  }
}

/** ==================================================
* 展示場
* ================================================ */
.dp-showroom{
  position: relative;
  padding: 112px 0 126px;
}
.dp-showroom__deco{
  position: absolute;
  top: 68px;
  left: 44.2%;
  width: 920px;
  opacity: 0.5;
  pointer-events: none;
}
.dp-showroom__deco>img{
  width: 100%;
}
.dp-showroom__inner{
  position: relative;
  width: var(--content-width-large);
  margin-inline: auto;
}
.dp-showroom__head{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dp-showroom__head>.sub{
  font-size: var(--font-29);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
}
.dp-showroom__head>.ttl{
  margin-top: 13px;
  color: var(--dp-blue);
  font-size: var(--dp-font-42);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.dp-showroom__head>.en-ttl{
  margin-top: 10px;
  color: var(--dp-blue-05);
  font-family: var(--font-din);
  font-size: var(--font-20);
  line-height: 1;
  letter-spacing: 0.02em;
}
.dp-showroom__head>.lead{
  margin-top: 43px;
  color: var(--dp-blue-03);
  font-size: var(--font-18);
  font-weight: 700;
  line-height: 1.8;
}
.dp-showroom__flx{
  display: flex;
  justify-content: space-between;
  gap: 60px;
  margin-top: 82px;
}
.dp-showroom__slider{
  flex-shrink: 0;
  width: 624px;
}
.dp-showroom__slider .main-slider{
  border: 1px solid #666;
}
.dp-showroom__slider .main-slider .splide__slide>img{
  width: 100%;
  aspect-ratio: 624 / 417;
  object-fit: cover;
}
.dp-showroom__slider .thumbnail-slider{
  margin-top: 31px;
}
.dp-showroom__slider .thumbnail-slider .splide__slide{
  border: 0 !important;
  opacity: 0.6;
  transition: opacity var(--transition-duration) var(--transition-timing-function);
}
.dp-showroom__slider .thumbnail-slider .splide__slide.is-active{
  opacity: 1;
}
.dp-showroom__slider .thumbnail-slider .splide__slide{
  aspect-ratio: 139 / 102;
  cursor: pointer;
}
/* Splide初期化前のサイズを初期化後（sub.js：perPage 4 / gap 8、767px以下は perPage 3 / gap 5）と揃え、
   読み込み途中のレイアウトのずれ（フォーム送信後のスクロール位置ずれの原因）を防ぐ */
.dp-showroom__slider .main-slider:not(.is-initialized) .splide__slide{
  width: 100%;
}
.dp-showroom__slider .thumbnail-slider:not(.is-initialized) .splide__slide{
  width: calc(25% - 6px);
  margin-right: 8px;
}
@media (max-width:767px) {
  .dp-showroom__slider .thumbnail-slider:not(.is-initialized) .splide__slide{
    width: calc((100% - 10px) / 3);
    margin-right: 5px;
  }
}
.dp-showroom__slider .thumbnail-slider .splide__slide>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* サムネイル送りボタン（旧版の仕様を継承） */
.dp-showroom__slider .splide__arrow{
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-gray);
  border-radius: 50%;
  background: var(--color-white);
  opacity: 1;
}
.dp-showroom__slider .splide__arrow svg{
  width: 12px;
  height: 12px;
  fill: var(--color-black);
}
.dp-showroom__slider .splide__arrow--prev{
  left: -1em;
}
.dp-showroom__slider .splide__arrow--next{
  right: -1em;
}
.dp-showroom__slider .splide__arrow:hover:not(:disabled){
  opacity: 1;
}
.dp-showroom__info{
  flex: 1;
  max-width: 670px;
}
.dp-showroom__check{
  position: relative;
  isolation: isolate;
  /* padding を使わず、リストの塊を背景（平行四辺形）の中央に配置。
     列幅は中身の幅（最大で背景の90%）にして、幅が変わっても余計な余白が出ないようにする */
  display: grid;
  grid-template-columns: fit-content(90%);
  justify-content: center;
  align-content: center;
  min-height: 218px;
}
.dp-showroom__check::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #dcf7ff;
  clip-path: polygon(2.985% 0, 100% 0, 97.015% 100%, 0 100%);
}
.dp-showroom__check>.item{
  position: relative;
  padding-left: 50px;
  color: var(--dp-blue-03);
  font-size: var(--font-18);
  font-weight: 700;
  line-height: 2.7;
}
.dp-showroom__check>.item::before,
.dp-showroom__check>.item::after{
  content: "";
  position: absolute;
  top: calc(1.35em - 18px);
  left: 0;
  width: 36px;
  height: 36px;
  background: url(../img/dotcon-plus/check-circle-l.svg) no-repeat center / 36px 36px;
}
.dp-showroom__check>.item::after{
  background: url(../img/dotcon-plus/check-l.svg) no-repeat center / 21.6px 14.4px;
}
.dp-showroom__subttl{
  margin-top: 62px;
  font-size: var(--font-26);
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}
.dp-showroom__table{
  margin-top: 35px;
  border-top: 1px dashed var(--dp-black-400);
}
.dp-showroom__table>.row{
  display: flex;
  align-items: center;
  min-height: 90px;
  border-bottom: 1px dashed var(--dp-black-400);
}
.dp-showroom__table dt{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 100%;
  max-width: 120px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  padding-left: 1em;
}
.dp-showroom__table dt>img{
  width: 26px;
  height: 26px;
}
.dp-showroom__table dt>img.-schedule{
  width: 23px;
  height: 23px;
  margin-inline: 3px 0;
}
.dp-showroom__table dd{
  padding: 10px 24px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.dp-showroom__table dd>.gray{
  margin-right: 1em;
  color: #666;
}
.dp-showroom__table dd>.map{
  color: var(--dp-blue);
  font-weight: 700;
  text-decoration: underline;
}
@media (hover: hover) {
  .dp-showroom__table dd>.map:hover{
    opacity: var(--transition-opacity);
  }
}
@media (max-width:1200px) {
  .dp-showroom__flx{
    gap: 40px;
  }
  .dp-showroom__slider{
    width: 46%;
  }
  .dp-showroom__table dt{
    width: 150px;
    padding-left: 16px;
  }
}
@media (max-width:960px) {
  .dp-showroom{
    padding: 80px 0;
  }
  .dp-showroom__deco{
    top: 40px;
    left: 30%;
    width: 90%;
  }
  .dp-showroom__flx{
    flex-direction: column;
    align-items: center;
    gap: 48px;
    margin-top: 48px;
  }
  .dp-showroom__slider{
    width: 100%;
    max-width: 624px;
  }
  .dp-showroom__info{
    width: 100%;
  }
}
@media (max-width:767px) {
  .dp-showroom__head>.lead{
    margin-top: 24px;
  }
  .dp-showroom__slider .thumbnail-slider{
    margin-top: 12px;
  }
  .dp-showroom__check{
    min-height: 200px;
  }
  .dp-showroom__check>.item{
    padding-left: 38px;
    line-height: 1.8;
  }
  .dp-showroom__check>.item+.item{
    margin-top: 10px;
  }
  .dp-showroom__check>.item::before,
  .dp-showroom__check>.item::after{
    top: calc(0.9em - 14px);
    width: 28px;
    height: 28px;
    background-size: 28px 28px;
  }
  .dp-showroom__check>.item::after{
    background-size: 16px 11px;
  }
  .dp-showroom__subttl{
    margin-top: 40px;
  }
  .dp-showroom__table{
    margin-top: 16px;
  }
  .dp-showroom__table>.row{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 0;
    padding: 16px 0;
  }
  .dp-showroom__table dt{
    width: auto;
    padding: 0;
  }
  .dp-showroom__table dd{
    padding: 0 0 0 36px;
  }
  .dp-showroom__table dd>.map{
    display: inline-block;
  }
}

/* 見学予約フォーム */
.dp-reserve{
  position: relative;
  width: var(--content-width-small);
  max-width: 100%;
  margin: 126px auto 0;
  padding: 79px var(--px-80) 81px;
  border-radius: 8px;
  background-color: var(--color-white);
  box-shadow: var(--dp-shadow);
}
.dp-reserve__ttl{
  font-size: var(--font-36);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: center;
}
.dp-reserve__sub{
  margin-top: 6px;
  color: var(--dp-blue-03);
  font-size: var(--font-20);
  font-weight: 700;
  line-height: 2.4;
  text-align: center;
}
.dp-reserve__form{
  margin-top: 29px;
}
.dp-form__row{
  display: flex;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid #d7ddbc;
}
.dp-form__row:first-child{
  padding-top: 0;
}
.dp-form__label{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  width: 223px;
  color: #231815;
  font-size: var(--font-18);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.01em;
}
.dp-form__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 24px;
  border-radius: 4px;
  background-color: var(--dp-red);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
}
.dp-form__badge.-any{
  background-color: #767676;
}
.dp-form__field{
  flex: 1;
  min-width: 0;
}
.dp-form__field input[type="text"],
.dp-form__field input[type="tel"],
.dp-form__field input[type="email"],
.dp-form__field textarea{
  width: 100%;
  height: 58px;
  padding: 0 16px;
  border: 1px solid #aaa7a1;
  border-radius: 4px;
  background-color: var(--dp-white-700);
  color: var(--dp-black);
  font-family: inherit;
  font-size: var(--font-18);
  line-height: 2;
  letter-spacing: 0.01em;
  appearance: none;
}
.dp-form__field textarea{
  display: block;
  height: 269px;
  padding: 12px 16px;
  resize: vertical;
}
.dp-form__field input::placeholder,
.dp-form__field textarea::placeholder{
  color: #857e7c;
}
.dp-form__field input:focus,
.dp-form__field textarea:focus{
  border-color: var(--dp-blue);
  outline: 2px solid rgba(26, 119, 199, 0.2);
}
/* MW WP Form 電話番号（3分割） */
.dp-form__field .mwform-tel-field{
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--dp-black);
  font-size: 16px;
  line-height: 1;
}
.dp-form__field .mwform-tel-field input[type="text"]{
  flex: 1;
  min-width: 0;
}
.dp-form__field .mwform-tel-field::before,
.dp-form__field .mwform-tel-field::after{
  content: none;
}
/* MW WP Form エラーメッセージ */
.dp-form__field .error{
  display: block;
  margin-top: 6px;
  color: var(--dp-red);
  font-size: 14px;
  line-height: 1.5;
}
/* MW WP Form 完了画面（管理画面の「完了画面メッセージ」が入る） */
.dp-reserve__form .mw_wp_form_complete{
  padding: var(--px-40) 1em;
  border-radius: 8px;
  background-color: var(--dp-white-700);
  font-size: var(--font-18);
  line-height: 2;
  text-align: center;
}
.dp-reserve__form .mw_wp_form_complete p+p{
  margin-top: 1em;
}
.dp-form__submit{
  margin-top: 47px;
}
.dp-form__submit input[type="submit"],
.dp-form__submit button{
  display: block;
  width: 100%;
  height: 70px;
  border: 0;
  border-radius: 999px;
  background: var(--dp-gradient);
  box-shadow: 0 6px 0 var(--dp-blue-03);
  color: var(--color-white);
  font-family: inherit;
  font-size: var(--font-22);
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  appearance: none;
  transition: transform var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function);
}
.dp-form__submit input[type="submit"]:disabled{
  cursor: default;
}
@media (hover: hover) {
  .dp-form__submit input[type="submit"]:not(:disabled):hover,
  .dp-form__submit button:hover{
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--dp-blue-03);
  }
}
.dp-reserve__note{
  margin-top: 34px;
  color: var(--dp-blue-03);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: center;
}
@media (max-width:960px) {
  .dp-reserve{
    margin-top: 80px;
    padding: 56px 6vw;
  }
}
@media (max-width:767px) {
  .dp-reserve{
    padding: 48px 16px;
  }
  .dp-reserve__form{
    margin-top: 20px;
  }
  .dp-form__row{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 20px 0;
  }
  .dp-form__label{
    width: auto;
    font-size: 16px;
  }
  .dp-form__field input[type="text"],
  .dp-form__field input[type="tel"],
  .dp-form__field input[type="email"],
  .dp-form__field textarea{
    height: 50px;
    font-size: 16px;
  }
  .dp-form__field textarea{
    height: 200px;
  }
  .dp-form__submit{
    margin-top: 32px;
  }
  .dp-form__submit input[type="submit"],
  .dp-form__submit button{
    height: 60px;
    font-size: 18px;
  }
  .dp-reserve__note{
    margin-top: 24px;
  }
}

/** ==================================================
* 施工事例
* ================================================ */
.dp-works{
  position: relative;
  padding: 97px 0 96px;
  border-block: 1px solid var(--dp-gray);
  background: var(--dp-noise), var(--dp-white-600);
}
.dp-works__inner{
  position: relative;
  width: var(--content-width-medium);
  margin-inline: auto;
}
.dp-works .category-tabs{
  display: flex;
  justify-content: center;
  gap: 8px;
  position: relative;
  margin-top: 48px;
}
.dp-works .category-tabs::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--dp-black);
}
.dp-works .tab-btn{
  position: relative;
  z-index: 1;
  width: 200px;
  height: 56px;
  border: 0;
  border-bottom: 1px solid var(--dp-black);
  border-radius: 4px 4px 0 0;
  background-color: var(--dp-gray);
  color: rgba(40, 39, 42, 0.5);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function);
}
.dp-works .tab-btn.active{
  z-index: 2;
  border: 1px solid var(--dp-black);
  border-bottom-color: var(--dp-white-600);
  background-color: var(--dp-white-600);
  color: var(--dp-black);
}
.dp-works .works-container{
  margin-top: 48px;
}
.dp-works__list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}
.dp-works__list>.item.tablet-only{
  display: none;
}
.dp-work-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dp-work-card>.media{
  position: relative;
  overflow: hidden;
}
.dp-work-card>.media>.image{
  width: 100%;
  aspect-ratio: 344 / 240;
  object-fit: cover;
  transition: transform 0.5s var(--transition-timing-function);
}
.dp-work-card>.media>.arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background-color: var(--color-white);
}
.dp-work-card>.media>.arrow>img{
  width: 16px;
  height: 16px;
}
.dp-work-card>.data{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dp-work-card>.data>.ttl>span{
  padding: 4px 8px;
  background-color: var(--dp-black);
  color: var(--color-white);
  font-size: var(--font-17);
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: -0.02em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.dp-work-card>.data>.txt{
  display: -webkit-box;
  overflow: hidden;
  color: var(--dp-black-400);
  font-size: var(--font-13);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: -0.02em;
  text-align: justify;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
@media (hover: hover) {
  .dp-work-card:hover>.media>.image{
    transform: scale(1.05);
  }
}
.dp-works__btn{
  display: flex;
  gap: 40px;
  margin-top: 32px;
}
@media (max-width:960px) {
  .dp-works{
    padding: 80px 0;
  }
  .dp-works__list{
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
  .dp-works__list>.item.tablet-only{
    display: block;
  }
}
@media (max-width:560px) {
  .dp-works .tab-btn{
    width: 50%;
  }
  .dp-works__list{
    grid-template-columns: 1fr;
  }
  .dp-works__list>.item.tablet-only{
    display: none;
  }
  .dp-works__btn{
    flex-direction: column;
    gap: 0;
    margin-top: 32px;
  }
}

/** ==================================================
* お客様の声
* ================================================ */
.dp-voice{
  position: relative;
  padding: 100px 0 128px;
}
.dp-voice__bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.dp-voice__bg>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dp-voice__inner{
  position: relative;
  width: var(--content-width-xsmall);
  margin-inline: auto;
}
.dp-voice__list{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 68px;
}
.dp-voice-card{
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px 48px 32px 40px;
  border-radius: 8px;
  background-color: var(--color-white);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}
.dp-voice-card>.icon{
  flex-shrink: 0;
  width: 96px;
}
.dp-voice-card>.icon>img{
  width: 100%;
}
.dp-voice-card>.content{
  flex: 1;
}
.dp-voice-card>.content>.ttl{
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--dp-black-400);
  color: var(--dp-blue);
  font-size: var(--font-20);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.dp-voice-card>.content>.txt{
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: -0.02em;
  text-align: justify;
}
.dp-voice-card>.content>.txt>span{
  font-size: var(--font-13);
}
@media (max-width:767px) {
  .dp-voice{
    padding: 80px 0;
  }
  .dp-voice__list{
    margin-top: 40px;
  }
  .dp-voice-card{
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 24px 20px;
  }
  .dp-voice-card>.icon{
    width: 72px;
    margin-inline: auto;
  }
}

/** ==================================================
* 受賞・評価
* ================================================ */
.dp-award{
  position: relative;
  padding: 93px 0 93px;
}
.dp-award__inner{
  position: relative;
  width: var(--content-width-medium);
  margin-inline: auto;
}
.dp-award__lead{
  margin-top: 46px;
  color: var(--dp-blue-03);
  font-size: var(--font-18);
  font-weight: 700;
  line-height: 2;
  text-align: center;
}
.dp-award__logos{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0 36px;
  position: relative;
  isolation: isolate;
  width: min(100%, 1017px);
  margin: 26px auto 0;
  padding: 23px 1em 20px;
  background-color: var(--color-white);
}
.dp-award__logos>.item{
  position: relative;
  overflow: hidden;
}
.dp-award__logos>.item.-gd.-left{
  width: 318px;
  aspect-ratio: 318.18 / 211.82;
}
.dp-award__logos>.item.-gd.-right{
  width: 341px;
  aspect-ratio: 340.91 / 210.91;
}
.dp-award__logos>.item.-gd>img{
  position: absolute;
  top: 0;
  height: 100%;
  max-width: none;
}
.dp-award__logos>.item.-gd.-left>img{
  left: 0;
  width: 214%;
}
.dp-award__logos>.item.-gd.-right>img{
  left: -95.15%;
  width: 199.22%;
}
.dp-award__logos>.item.-reddot{
  width: 278px;
  margin-top: 3px;
}
.dp-award__logos>.item.-reddot>img{
  width: 100%;
  aspect-ratio: 278 / 188;
  object-fit: cover;
}
.dp-award__review{
  width: min(100%, 600px);
  margin: 23px auto 0;
}
@media (max-width:960px) {
  .dp-award{
    padding: 80px 0;
  }
  .dp-award__logos{
    flex-wrap: wrap;
    gap: 16px;
  }
  .dp-award__logos>.item.-gd.-left,
  .dp-award__logos>.item.-gd.-right{
    width: calc(50% - 8px);
  }
  .dp-award__logos>.item.-reddot{
    width: 50%;
  }
}
@media (max-width:767px) {
  .dp-award__lead{
    text-align: left;
  }
}

/** ==================================================
* CTA
* ================================================ */
.dp-cta{
  position: relative;
  z-index: 1;
  margin-bottom: -47px;
  padding: 105px 0 101px;
  background-color: var(--dp-blue-02);
}
.dp-cta__bg{
  position: absolute;
  inset: 0;
  opacity: 0.75;
  pointer-events: none;
}
.dp-cta__bg>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 79%;
}
.dp-cta__inner{
  position: relative;
  width: var(--content-width);
  margin-inline: auto;
}
.dp-cta__flx{
  display: flex;
  justify-content: center;
  gap: 40px;
}
.dp-cta-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  max-width: 590px;
  min-height: 378px;
  padding: 42px 30px 40px;
  border-radius: 8px;
  background-color: var(--color-white);
  box-shadow: var(--dp-shadow);
}
.dp-cta-card__head{
  display: grid;
  grid-template-columns: 80px auto;
  grid-template-areas:
    "icon en"
    "icon ttl";
  align-items: center;
  column-gap: 22px;
}
.dp-cta-card__head>.icon{
  grid-area: icon;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background-color: var(--dp-blue);
}
.dp-cta-card__head>.icon>img{
  width: 34px;
  height: 34px;
}
.dp-cta-card.-mail .dp-cta-card__head>.icon>img{
  width: 37px;
  height: 37px;
  /* 封筒の絵がSVG枠内で上寄り（y:3〜27/37）のため、Figma同様に少し下げて見た目を中央に */
  translate: 0 12%;
}
.dp-cta-card__head>.en{
  grid-area: en;
  align-self: end;
  color: var(--dp-blue-05);
  font-family: var(--font-din);
  font-size: var(--font-20);
  line-height: 1;
  letter-spacing: 0.02em;
}
.dp-cta-card__head>.ttl{
  grid-area: ttl;
  align-self: start;
  margin-top: 6px;
  font-size: var(--font-26);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.dp-cta-card__txt{
  margin-top: 18px;
  color: #2a2323;
  font-size: 16px;
  line-height: 2;
  text-align: center;
}
.dp-cta-card.-mail .dp-cta-card__txt{
  margin-top: 30px;
}
.dp-cta-card__txt>b{
  font-weight: 700;
}
.dp-cta-card__tel{
  align-self: flex-start;
  margin: 12px 0 0 59px;
  padding: 0 0 1px;
  border-bottom: 1px solid #2a2323;
  font-family: var(--dp-font-tel);
  font-size: 60px;
  font-weight: 500;
  line-height: 1.2;
}
.dp-cta-card__time{
  align-self: flex-start;
  margin: 14px 0 0 69px;
  color: #292929;
  font-size: var(--font-15);
  line-height: 1.6;
}
.dp-cta-card__staff{
  position: absolute;
  top: 226px;
  left: 451px;
  width: 129px;
  height: 152px;
  overflow: hidden;
  pointer-events: none;
}
.dp-cta-card__staff>img{
  position: absolute;
  top: 0;
  left: -16px;
  width: 159px;
  max-width: none;
  transform: scaleX(-1);
}
.dp-btn.-cta{
  width: 320px;
  height: 60px;
  margin-top: 28px;
  padding: 0 19px 0 22px;
  box-shadow: 0 6px 0 var(--dp-blue-03);
  font-size: var(--font-18);
  letter-spacing: 0.02em;
}
.dp-btn.-cta>.dp-visit-icon{
  margin-top: 4px;
}
@media (hover: hover) {
  .dp-btn.-cta:hover{
    box-shadow: 0 2px 0 var(--dp-blue-03);
  }
}
.dp-cta-sns{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: min(100%, 1040px);
  min-height: 150px;
  margin: 40px auto 0;
  padding: 20px;
  border-radius: 8px;
  background-color: var(--color-white);
  box-shadow: var(--dp-shadow);
}
.dp-cta-sns>.txt{
  margin-right: 20px;
  color: #2a2323;
  font-size: var(--font-20);
  line-height: 1.4;
}
.dp-cta-sns>.link{
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: var(--font-22);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.dp-cta-sns>.link+.link{
  margin-left: 64px;
}
.dp-cta-sns>.link>img{
  width: 70px;
  height: 70px;
}
.dp-cta-sns>.link>.insta{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 999px;
  background-color: #cf2e92;
}
.dp-cta-sns>.link>.insta>img{
  width: 30px;
  height: 30px;
}
@media (hover: hover) {
  .dp-cta-sns>.link:hover{
    opacity: var(--transition-opacity);
  }
}
@media (max-width:1200px) {
  .dp-cta-card__tel{
    align-self: center;
    margin-left: 0;
    font-size: 48px;
  }
  .dp-cta-card__time{
    align-self: center;
    margin-left: 0;
  }
  .dp-cta-card__staff{
    display: none;
  }
}
@media (max-width:960px) {
  .dp-cta{
    padding: 80px 0;
  }
  .dp-cta__flx{
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .dp-cta-card{
    width: 100%;
    min-height: 0;
  }
  .dp-cta-sns{
    flex-wrap: wrap;
    margin-top: 24px;
  }
  .dp-cta-sns>.txt{
    width: 100%;
    margin: 0;
    text-align: center;
  }
  .dp-cta-sns>.link+.link{
    margin-left: 32px;
  }
}
@media (max-width:767px) {
  .dp-cta-card{
    padding: 32px 16px;
  }
  .dp-cta-card__head{
    grid-template-columns: 60px auto;
    column-gap: 14px;
  }
  .dp-cta-card__head>.icon{
    width: 60px;
    height: 60px;
  }
  .dp-cta-card__head>.icon>img{
    width: 28px;
    height: 28px;
  }
  .dp-cta-card__txt,
  .dp-cta-card.-mail .dp-cta-card__txt{
    margin-top: 16px;
    line-height: 1.8;
  }
  .dp-cta-card__tel{
    font-size: 40px;
  }
  .dp-btn.-cta{
    width: 100%;
    max-width: 320px;
  }
  .dp-cta-sns{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
  }
  .dp-cta-sns>.link+.link{
    margin-left: 0;
  }
  .dp-cta-sns>.link>img,
  .dp-cta-sns>.link>.insta{
    width: 50px;
    height: 50px;
  }
  .dp-cta-sns>.link>.insta>img{
    width: 22px;
    height: 22px;
  }
}

/** ==================================================
* footer
* ================================================ */
.dp-footer{
  position: relative;
  overflow: hidden;
  padding: 140px var(--px-80) 100px;
  color: var(--color-white);
}
.dp-footer__bg{
  position: absolute;
  inset: 0;
  display: flex;
}
.dp-footer__bg>img{
  width: 50%;
  height: 100%;
  object-fit: cover;
}
.dp-footer__bg::before,
.dp-footer__bg::after{
  content: "";
  position: absolute;
  inset: 0;
}
.dp-footer__bg::before{
  background-color: rgba(0, 0, 0, 0.8);
}
.dp-footer__bg::after{
  background: var(--dp-noise-dark);
}
.dp-footer__inner{
  position: relative;
}
.dp-footer__ttl{
  font-family: var(--dp-font-yu);
  font-size: var(--font-30);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.dp-footer__logo{
  display: inline-block;
  margin-top: 100px;
}
.dp-footer__txt{
  margin-top: 21px;
  font-size: var(--font-15);
  line-height: 1.8;
}
.dp-footer__nav{
  margin-top: 34px;
}
.dp-footer__nav>.list{
  display: flex;
  flex-wrap: wrap;
}
.dp-footer__nav>.list>.item{
  font-size: var(--font-15);
  font-weight: 700;
  line-height: 1.8;
}
.dp-footer__nav>.list>.item+.item::before{
  content: "/";
  margin: 0 10px;
  color: var(--dp-black-400);
}
.dp-footer__nav .link{
  transition: opacity var(--transition-duration) var(--transition-timing-function);
}
.dp-footer__copy{
  margin-top: 40px;
  color: var(--dp-gray);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -0.02em;
}
.dp-footer__copy>.link{
  margin-left: 2em;
  text-decoration: underline;
}
@media (hover: hover) {
  .dp-footer__nav .link:hover,
  .dp-footer__copy>.link:hover{
    opacity: var(--transition-opacity);
  }
}
@media (max-width:767px) {
  .dp-footer{
    min-height: 0;
    padding: 127px 0 60px;
  }
  .dp-footer__inner{
    width: var(--content-width);
    margin-inline: auto;
  }
  .dp-footer__bg>img{
    width: 100%;
  }
  .dp-footer__bg>img.right{
    display: none;
  }
  .dp-footer__logo{
    margin-top: 48px;
  }
  .dp-logo-ibuki.-footer{
    width: 180px;
  }
  .dp-footer__nav>.list{
    row-gap: 4px;
  }
  .dp-footer__copy>.link{
    display: inline-block;
    margin-left: 0;
  }
}