@charset "UTF-8";
/*------------------------------------------------------------
	カラー
------------------------------------------------------------*/
/* 制作実績の制作区分ラベル。一覧で見分けやすいよう区分ごとに色を変える。
   白文字を載せるため、いずれも読みやすい濃さに合わせている */
/*------------------------------------------------------------
	フォント
------------------------------------------------------------*/
/*------------------------------------------------------------
	ブレイクポイント
	デザイン幅：PC 1512px / SP 375px　1rem = 10px
------------------------------------------------------------*/
/* タブレット：SPデザイン(375px)を1rem=15pxまで比例拡大し、
   563px以上はコンテンツ列(37.5rem=562px)を中央寄せする境界 */
/* Works / Process セクションのドット地紋
   （Figma実測：#eaeaea・直径2px・5px間隔。テクスチャなので画面幅で変えずpx固定） */
/* タブレット（SPレイアウトを中央寄せする幅） */
/*------------------------------------------------------------
	mainVisual
------------------------------------------------------------*/
.mainVisual {
  position: relative;
  height: 97.1rem;
  overflow: hidden;
  background-color: #f8f8f8;
  /* 全体にかかるノイズテクスチャ */
}
.mainVisual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/common/bg_noise.webp) no-repeat center center/cover;
  mix-blend-mode: soft-light;
  opacity: 0.1;
  pointer-events: none;
}
.mainVisual {
  /* コピー・キービジュアルはデザイン幅1512pxの枠を中央寄せして
     大画面でも要素同士の距離を保つ（背景の斜め帯だけ画面幅いっぱいに伸ばす） */
}
.mainVisual .inner {
  position: relative;
  z-index: 2;
  width: 151.2rem;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
}

/* 斜めの帯・背景グラフィック
------------------------------------------------------------*/
.mainVisual .bgBox {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.mainVisual .bgBox .line {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mainVisual .bgBox .line span {
  display: block;
  position: relative;
  transform: rotate(-39deg);
}
.mainVisual .bgBox .line span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/common/bg_noise.webp) no-repeat center center/cover;
  mix-blend-mode: overlay;
  opacity: 0.1;
}
.mainVisual .bgBox {
  /* 表示されている帯 */
}
.mainVisual .bgBox .line01 {
  left: -20.5rem;
  top: 5.175rem;
  width: 38.9536rem;
  height: 32.8282rem;
}
.mainVisual .bgBox .line01 span {
  width: 46.237rem;
  height: 4.8rem;
  background: linear-gradient(90deg, #db3333 9.615%, rgba(219, 51, 51, 0) 100%);
}
.mainVisual .bgBox .line02 {
  left: 19.9rem;
  top: -10.493rem;
  width: 16.0464rem;
  height: 13.2081rem;
}
.mainVisual .bgBox .line02 span {
  width: 20rem;
  height: 0.8rem;
  background: linear-gradient(90deg, rgba(219, 51, 51, 0) 0%, #db3333 100%);
}
.mainVisual .bgBox {
  /* 読み込み時に流れる帯（Figma上は非表示・動き用の要素） */
}
.mainVisual .bgBox .line03,
.mainVisual .bgBox .line04,
.mainVisual .bgBox .line05,
.mainVisual .bgBox .line06,
.mainVisual .bgBox .line07,
.mainVisual .bgBox .line08,
.mainVisual .bgBox .line09 {
  opacity: 0;
}
.mainVisual .bgBox .line03 {
  left: 27.3rem;
  top: 75.7rem;
  width: 53.3494rem;
  height: 43.4155rem;
}
.mainVisual .bgBox .line03 span {
  width: 68rem;
  height: 0.8rem;
  background: linear-gradient(90deg, #db3333 0%, rgba(219, 51, 51, 0) 100%);
}
.mainVisual .bgBox .line04 {
  left: 6.1rem;
  top: 81.3rem;
  width: 56.3101rem;
  height: 46.0806rem;
}
.mainVisual .bgBox .line04 span {
  width: 71rem;
  height: 1.8rem;
  background: linear-gradient(90deg, #db3333 0%, rgba(219, 51, 51, 0) 100%);
}
.mainVisual .bgBox .line05 {
  right: 5.11rem;
  top: 18.6rem;
  width: 104.7943rem;
  height: 85.6634rem;
}
.mainVisual .bgBox .line05 span {
  width: 132.4158rem;
  height: 3rem;
  background: linear-gradient(90deg, rgba(219, 51, 51, 0) 0%, rgba(219, 51, 51, 0.8) 50%, rgba(219, 51, 51, 0) 100%);
}
.mainVisual .bgBox .line06 {
  right: -1.09rem;
  top: 7rem;
  width: 74.8298rem;
  height: 61.9336rem;
}
.mainVisual .bgBox .line06 span {
  width: 92.2391rem;
  height: 5rem;
  background: linear-gradient(90deg, rgba(219, 51, 51, 0) 0%, #db3333 100%);
}
.mainVisual .bgBox .line07 {
  right: 20.97rem;
  top: 14.4rem;
  width: 34.2324rem;
  height: 29.0585rem;
}
.mainVisual .bgBox .line07 span {
  width: 40rem;
  height: 5rem;
  background: linear-gradient(90deg, #db3333 0%, rgba(219, 51, 51, 0) 100%);
}
.mainVisual .bgBox .line08 {
  right: -13.05rem;
  top: 8.1rem;
  width: 53.3494rem;
  height: 43.4155rem;
}
.mainVisual .bgBox .line08 span {
  width: 68rem;
  height: 0.8rem;
  background: linear-gradient(90deg, rgba(219, 51, 51, 0) 40%, #db3333 100%);
}
.mainVisual .bgBox .line09 {
  right: 5.82rem;
  top: 7.984rem;
  width: 55.6808rem;
  height: 45.3035rem;
}
.mainVisual .bgBox .line09 span {
  width: 71rem;
  height: 0.8rem;
  background: linear-gradient(90deg, rgba(219, 51, 51, 0) 0%, #db3333 100%);
}
.mainVisual .bgBox .line09 span::after {
  opacity: 0.05;
}
.mainVisual .bgBox {
  /* 背景グラフィック */
}
.mainVisual .bgBox .img01 {
  position: absolute;
  left: 0;
  top: 0;
  width: 20.0182rem;
  height: 16.2rem;
}
.mainVisual .bgBox .img02 {
  position: absolute;
  right: -0.3005rem;
  top: 21.9rem;
  width: 92.8005rem;
  height: 75.1rem;
  transform: rotate(180deg);
}
.mainVisual .bgBox .img03 {
  position: absolute;
  right: -0.3rem;
  top: 48.6rem;
  width: 59.8rem;
  height: 48.4rem;
  transform: rotate(180deg);
  mix-blend-mode: multiply;
}
.mainVisual .bgBox .img01 img,
.mainVisual .bgBox .img02 img,
.mainVisual .bgBox .img03 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 読み込み時の動き
	赤い斜めの帯が左下→右上に順番に走り、キービジュアルがフェードイン
------------------------------------------------------------*/
@keyframes fvLineIn {
  0% {
    opacity: 0;
    transform: translate(-77.7rem, 62.9rem);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes fvLineThrough {
  0% {
    opacity: 0;
    transform: translate(-77.7rem, 62.9rem);
  }
  25% {
    opacity: 1;
  }
  65% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(46.62rem, -37.74rem);
  }
}
@keyframes fvFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.mainVisual .bgBox .line {
  opacity: 0;
}

.mainVisual .kv {
  opacity: 0;
}

.mainVisual.on .bgBox .line01 {
  animation: fvLineIn 1.4s cubic-bezier(0.16, 0.84, 0.44, 1) 0.2s forwards;
}
.mainVisual.on .bgBox .line02 {
  animation: fvLineIn 1.4s cubic-bezier(0.16, 0.84, 0.44, 1) 0.35s forwards;
}
.mainVisual.on .bgBox .line05 {
  animation: fvLineThrough 1.8s cubic-bezier(0.16, 0.84, 0.44, 1) 0s forwards;
}
.mainVisual.on .bgBox .line06 {
  animation: fvLineThrough 1.8s cubic-bezier(0.16, 0.84, 0.44, 1) 0.1s forwards;
}
.mainVisual.on .bgBox .line09 {
  animation: fvLineThrough 1.8s cubic-bezier(0.16, 0.84, 0.44, 1) 0.2s forwards;
}
.mainVisual.on .bgBox .line08 {
  animation: fvLineThrough 1.8s cubic-bezier(0.16, 0.84, 0.44, 1) 0.3s forwards;
}
.mainVisual.on .bgBox .line07 {
  animation: fvLineThrough 1.8s cubic-bezier(0.16, 0.84, 0.44, 1) 0.4s forwards;
}
.mainVisual.on .bgBox .line03 {
  animation: fvLineThrough 1.8s cubic-bezier(0.16, 0.84, 0.44, 1) 0.5s forwards;
}
.mainVisual.on .bgBox .line04 {
  animation: fvLineThrough 1.8s cubic-bezier(0.16, 0.84, 0.44, 1) 0.6s forwards;
}
.mainVisual.on .kv {
  animation: fvFadeIn 1.2s ease-out 0.5s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .mainVisual .bgBox .line01,
  .mainVisual .bgBox .line02,
  .mainVisual .kv {
    opacity: 1;
  }
  .mainVisual.on .bgBox .line,
  .mainVisual.on .kv {
    animation: none;
  }
}
/* キービジュアル
------------------------------------------------------------*/
.mainVisual .kv {
  position: absolute;
  right: 0;
  top: 5.8rem;
  z-index: 2;
  width: 107.3rem;
  height: 85.9rem;
}
.mainVisual .kv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 1.5rem 3rem rgba(0, 0, 0, 0.1));
}

/* テキストエリア
------------------------------------------------------------*/
.mainVisual .textBox {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.mainVisual .textBox .ttl01 {
  position: absolute;
  left: 9.8rem;
  top: 24.5rem;
  transform: translateY(-100%);
  font-weight: 900;
  font-size: 5.2rem;
  line-height: 3.3rem;
  letter-spacing: 0.104rem;
  white-space: nowrap;
}
.mainVisual .textBox .ttl02 span {
  position: absolute;
  display: block;
  font-weight: 900;
  white-space: nowrap;
  text-align: center;
}
.mainVisual .textBox .ttl02 .quoteL {
  left: 11.95rem;
  top: 27.4rem;
  transform: translateX(-50%);
  color: #db3333;
  font-size: 10rem;
  line-height: 7rem;
  letter-spacing: 0.8rem;
}
.mainVisual .textBox .ttl02 .honki {
  left: 26.15rem;
  top: 28.6rem;
  transform: translateX(-50%);
  color: #db3333;
  font-size: 11.2rem;
  line-height: 7rem;
  letter-spacing: 0.896rem;
}
.mainVisual .textBox .ttl02 .quoteR {
  left: 39.95rem;
  top: 27.4rem;
  transform: translateX(-50%);
  color: #db3333;
  font-size: 10rem;
  line-height: 7rem;
  letter-spacing: 0.4rem;
}
.mainVisual .textBox .ttl02 .de {
  left: 40.3rem;
  top: 37rem;
  transform: translateY(-100%);
  width: 4rem;
  font-size: 6.2rem;
  line-height: 5rem;
  letter-spacing: 1.116rem;
  text-align: left;
}
.mainVisual .textBox .ttl02 .tsukuru {
  left: 46.6rem;
  top: 32.4rem;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 11.4rem;
  line-height: 5rem;
  letter-spacing: -0.684rem;
  text-align: left;
}
.mainVisual .textBox .ttl02 .tsukuru i {
  font-style: normal;
}
.mainVisual .textBox .ttl02 .tsukuru i:nth-of-type(1) {
  letter-spacing: -2.28rem;
}
.mainVisual .textBox .ttl02 .tsukuru i:nth-of-type(2) {
  letter-spacing: -3.42rem;
}
.mainVisual .textBox .ttl02 .tsukuru i:nth-of-type(3) {
  letter-spacing: -1.14rem;
}
.mainVisual .textBox {
  /* 帯コピー */
}
.mainVisual .textBox .bar {
  position: absolute;
  left: 10rem;
  top: 40rem;
  width: 68rem;
  height: 3.6rem;
  border-radius: 0.4rem;
  background-color: #383838;
}
.mainVisual .textBox .barTxt {
  position: absolute;
  left: 18.6rem;
  width: 50.8rem; /* デザイン上 186〜694px */
  top: 41.75rem;
  transform: translateY(-50%);
  color: #fff;
  font-weight: 900;
  font-size: 1.8rem;
  line-height: 3.3rem;
  letter-spacing: 1.08rem;
  text-align: center;
  white-space: nowrap;
}
.mainVisual .textBox {
  /* リード文 */
}
.mainVisual .textBox .lead {
  position: absolute;
  left: 10rem;
  top: 46.4rem;
  white-space: nowrap;
}
.mainVisual .textBox .lead p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: normal;
  letter-spacing: 0.09rem;
}
.mainVisual .textBox .lead .big,
.mainVisual .textBox .lead .big2 {
  font-size: 3rem;
}
.mainVisual .textBox .lead .num {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 3.2rem;
  letter-spacing: 0.416rem;
}
.mainVisual .textBox {
  /* リード文の傍点 */
}
.mainVisual .textBox .dots {
  position: absolute;
  left: 10.9rem;
  top: 45.7rem;
  width: 10.4rem;
  height: 0.5rem;
  display: flex;
  justify-content: space-between;
}
.mainVisual .textBox .dots span {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #db3333;
}

/* 強み（月桂冠）
------------------------------------------------------------*/
.mainVisual .strength {
  position: absolute;
  left: 10rem;
  top: 55.1rem;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
}
.mainVisual .strength > li {
  width: 16.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}
.mainVisual .strength .crown {
  display: block;
  width: 6.216rem;
  height: 2.8rem;
}
.mainVisual .strength .body {
  position: relative;
  width: 16.8rem;
  height: 7.8993rem;
}
.mainVisual .strength .laurel {
  position: absolute;
  top: 0;
  width: 4.1942rem;
  height: 7.8993rem;
}
.mainVisual .strength .laurelL {
  left: 0;
}
.mainVisual .strength .laurelR {
  left: 12.606rem;
  transform: scaleX(-1);
}
.mainVisual .strength .txt {
  position: absolute;
  display: block;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}
.mainVisual .strength {
  /* 01 解約率0% */
}
.mainVisual .strength .item01 .body {
  height: 8.0493rem;
}
.mainVisual .strength .item01 .laurel {
  top: 0.15rem;
}
.mainVisual .strength .item01 .txt01 {
  left: 4.7rem;
  top: 0;
  font-size: 2.2rem;
  letter-spacing: 0.176rem;
}
.mainVisual .strength .item01 .txt02 {
  left: 5.2rem;
  top: 3.2rem;
  letter-spacing: 0.48rem;
  color: #db3333;
}
.mainVisual .strength .item01 .txt02 em {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 5.5rem;
  line-height: 5rem;
}
.mainVisual .strength .item01 .txt02 small {
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 5rem;
  color: #383838;
}
.mainVisual .strength {
  /* 02 歯科業界特化 */
}
.mainVisual .strength .item02 .txt01 {
  left: 2.9rem;
  top: 0.35rem;
  width: 10.7rem;
  letter-spacing: 0.176rem;
  white-space: normal;
}
.mainVisual .strength .item02 .txt01 .row01 {
  display: block;
  margin-bottom: -0.5rem;
  color: #db3333;
  white-space: nowrap;
}
.mainVisual .strength .item02 .txt01 .row01 .big {
  font-size: 3rem;
}
.mainVisual .strength .item02 .txt01 .row01 .small {
  font-size: 2rem;
  color: #383838;
}
.mainVisual .strength .item02 .txt01 .row02 {
  display: block;
  font-size: 2.2rem;
}
.mainVisual .strength {
  /* 03 1エリア1医院限定 */
}
.mainVisual .strength .item03 .txt01 {
  left: 3.8rem;
  top: 0.6rem;
}
.mainVisual .strength .item03 .txt01 .row01 {
  display: block;
  margin-bottom: -0.2rem;
  letter-spacing: 0.176rem;
}
.mainVisual .strength .item03 .txt01 .row01 .num {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 3.3rem;
  letter-spacing: 0.275rem;
}
.mainVisual .strength .item03 .txt01 .row01 .unit {
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 3.3rem;
  letter-spacing: 0.056rem;
}
.mainVisual .strength .item03 .txt01 .row02 {
  display: block;
  color: #db3333;
  letter-spacing: 0.48rem;
}
.mainVisual .strength .item03 .txt01 .row02 .num {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 3.5rem;
  line-height: 1.8rem;
  letter-spacing: 0.28rem;
}
.mainVisual .strength .item03 .txt01 .row02 .unit {
  font-size: 1.8rem;
  line-height: 1.8rem;
}
.mainVisual .strength .item03 .txt01 .row02 .gray {
  font-size: 1.8rem;
  line-height: 1.8rem;
  color: #383838;
}
.mainVisual .strength {
  /* 04 全国対応 */
}
.mainVisual .strength .item04 .txt01 {
  left: 4.55rem;
  top: 0.05rem;
  color: #db3333;
  font-size: 3.5rem;
  letter-spacing: 0.28rem;
}
.mainVisual .strength .item04 .txt02 {
  left: 5.9rem;
  top: 4.25rem;
  font-size: 2.2rem;
  letter-spacing: 0.176rem;
}

/* ボタン
------------------------------------------------------------*/
.mainVisual .fvBtn {
  position: absolute;
  left: 10rem;
  top: 70.8rem;
  z-index: 3;
}
.mainVisual .fvBtn a {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  padding: 1.4rem 3rem 1.4rem 2rem;
  border-radius: 5rem;
  background-color: #db3333;
  color: #fff;
}
.mainVisual .fvBtn a:link, .mainVisual .fvBtn a:visited, .mainVisual .fvBtn a:hover {
  color: #fff;
}
@media (hover: hover) {
  .mainVisual .fvBtn a:hover {
    opacity: 0.75;
  }
}
.mainVisual .fvBtn .icon {
  display: block;
  width: 5rem;
  height: 5rem;
}
.mainVisual .fvBtn .txt {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: normal;
  letter-spacing: 0.176rem;
}
.mainVisual .fvBtn {
  /* 「＞」：横5px × 縦10px・線幅2pxの山形 */
}
.mainVisual .fvBtn .arrow {
  display: block;
  width: 0.707rem;
  height: 0.707rem;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  box-sizing: content-box;
}

/*------------------------------------------------------------
	about　私たちGossaがホームページ制作にかける想い
	※デザイン上 y970〜2250（高さ1280px）の絶対配置レイアウト
------------------------------------------------------------*/
.about {
  position: relative;
  height: 128rem;
  color: #fff;
  background-color: #474747;
  overflow: hidden;
  /* 背景写真（輝度合成15%）
     ※about_bg.webp は書き出し時点でalphaに15%が焼き込まれているため、
       ここで opacity を重ねると約2%になり写真がほぼ見えなくなる */
}
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/index/about_bg.webp) no-repeat center center/cover;
  mix-blend-mode: luminosity;
}
.about p, .about h2 {
  position: absolute;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}
.about em {
  font-style: normal;
  background-color: #db3333;
}
.about {
  /* 見出し */
}
.about .headBox {
  position: absolute;
  left: 50%;
  top: 10.204rem;
  transform: translateX(calc(-50% - 1.048rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  height: 20.3302rem;
  padding: 3.5rem 0;
}
.about .headBox .sub {
  position: static;
  display: flex;
  align-items: flex-end;
  gap: 2.2rem;
  font-size: 2.7rem;
  white-space: nowrap;
}
.about .headBox .sub .logo {
  display: block;
  width: 21.225rem;
  height: 3.9244rem;
}
.about .headBox .ttl {
  position: static;
  letter-spacing: 0.408rem;
  white-space: nowrap;
}
.about .headBox .ttl .big,
.about .headBox .ttl .mid,
.about .headBox .ttl .mid2 {
  font-size: 5.1rem;
}
.about .headBox .ttl .small {
  font-size: 3.1rem;
  letter-spacing: 0.248rem;
}
.about {
  /* 見出し下の手書き線 */
}
.about .line {
  position: absolute;
  left: 50%;
  top: 23.691rem;
  margin-left: -38.6rem;
  width: 77.5429rem;
  height: 7.0204rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about .line > span {
  position: relative;
  display: block;
  width: 77.4562rem;
  height: 3.9049rem;
  transform: rotate(-2.31deg) skewX(-0.11deg);
}
.about .line img {
  position: absolute;
  left: -0.1549rem;
  top: -0.617rem;
  width: 77.6563rem;
  height: 4.5739rem;
  max-width: none;
}
.about {
  /* テキスト */
}
.about .txt01,
.about .txt03,
.about .txt06 {
  left: 50%;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.about .txt01 {
  top: 30.509rem;
  transform: translateX(calc(-50% + 0.3rem));
  gap: 0.6rem;
  font-size: 2.2rem;
}
.about .txt01 em {
  padding: 0.3rem 1rem;
  font-size: 2.5rem;
}
.about .txt01 .comma {
  letter-spacing: -0.112rem;
}
.about .txt02 {
  left: 50%;
  top: 35.739rem;
  width: 74.8rem;
  margin-left: -37.1rem;
  font-size: 2.2rem;
}
.about {
  /* 赤いマーカーを2つに分けて、SPでは2行・PCでは1本の帯として繋げる */
}
.about .txt03 {
  top: 47.533rem;
  transform: translateX(calc(-50% + 0.3rem));
  font-size: 2.2rem;
}
.about .txt03 .row {
  display: flex;
  align-items: center;
}
.about .txt03 .lead {
  margin-right: 0.4rem;
}
.about .txt03 .last {
  margin-left: 0.4rem;
}
.about .txt03 em {
  padding: 0.3rem 0;
  font-size: 2.5rem;
}
.about .txt04 {
  left: 50%;
  top: 52.865rem;
  width: 76.7rem;
  margin-left: -38rem;
  font-size: 2.2rem;
}
.about .txt05 {
  left: 50%;
  top: 103.218rem;
  width: 72.5rem;
  margin-left: -35.9rem;
  font-size: 2.5rem;
}
.about .txt06 {
  top: 108.55rem;
  transform: translateX(calc(-50% + 0.3rem));
  font-size: 2.5rem;
}
.about .txt06 .row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.about .txt06 em {
  padding: 0.3rem 0;
  font-size: 3.5rem;
}
.about {
  /* 画像ボックス */
}
.about .imgBox {
  position: absolute;
  left: 50%;
  top: 66.915rem;
  margin-left: -53.5rem;
  width: 107.6rem;
  height: 32.7138rem;
  border: 0.8rem solid #383838;
  border-radius: 0.8rem;
  background-color: rgba(255, 255, 255, 0.9);
}
.about .imgBox .item {
  position: absolute;
}
.about .imgBox .item p {
  position: absolute;
  left: 0;
  color: #383838;
  font-size: 2.7rem;
  line-height: 3.5rem;
  letter-spacing: 0.135rem;
  white-space: nowrap;
}
.about .imgBox .photo {
  display: block;
  position: absolute;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.about .imgBox .photo img {
  position: absolute;
  max-width: none;
}
.about .imgBox .item01 {
  left: 18.8rem;
  top: 2.069rem;
  width: 24.3rem;
}
.about .imgBox .item01 .photo {
  left: 1.225rem;
  top: 0;
  width: 23rem;
  height: 17.2rem;
}
.about .imgBox .item01 .photo img {
  left: -45.9%;
  top: -101.45%;
  width: 201.21%;
  height: 201.24%;
}
.about .imgBox .item01 p {
  top: 20.309rem;
  width: 24.3rem;
}
.about .imgBox .item02 {
  left: 65.2rem;
  top: 3.449rem;
  width: 23.6rem;
}
.about .imgBox .item02 .photo {
  left: 0;
  top: 0;
  width: 23rem;
  height: 14.1953rem;
}
.about .imgBox .item02 .photo img {
  left: -30.02%;
  top: 0;
  width: 161.94%;
  height: 196.02%;
}
.about .imgBox .item02 p {
  left: 0.15rem;
  top: 17.698rem;
  width: 23.6rem;
}
.about .imgBox .arrow {
  position: absolute;
  left: 48.8rem;
  top: 8.717rem;
  width: 10.7rem;
  height: 13.024rem;
}

/*------------------------------------------------------------
	redArea　赤背景エリア（デザイン上 y2250〜8350）
------------------------------------------------------------*/
.redArea {
  position: relative;
  padding: 19.7rem 0 16rem;
  background-color: #db3333;
  /* 上端にかかる装飾グラフィック */
}
.redArea .areaDeco {
  position: absolute;
  left: 50%;
  top: -6rem;
  margin-left: -13.2rem;
  width: 58.5189rem;
  height: 48rem;
}
.redArea > .data,
.redArea > .works01 {
  position: relative;
  z-index: 1;
}

/*------------------------------------------------------------
	data　数字で見るGossa
------------------------------------------------------------*/
.data .headLine01 {
  margin-bottom: 7rem;
}
.data {
  /* 6枚のカードを段違いに配置（デザインの絶対座標どおり） */
}
.data .dataList {
  position: relative;
  height: 161.9rem;
}
.data .item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 5.5rem;
  border-radius: 0.8rem;
  background-color: #fff;
}
.data .item01 {
  left: 0;
  top: 0;
  width: 52.412rem;
  height: 44.3rem;
}
.data .item02 {
  left: 54.726rem;
  top: 0;
  width: 62.8742rem;
  height: 52.2rem;
  gap: 2rem;
}
.data .item03 {
  left: 0;
  top: 47.2rem;
  width: 52.412rem;
  height: 59.7rem;
  gap: 3rem;
}
.data .item04 {
  left: 54.826rem;
  top: 54.3rem;
  width: 62.7737rem;
  height: 52.6rem;
  gap: 2.7rem;
}
.data .item05 {
  left: 65.792rem;
  top: 109.1rem;
  width: 51.8084rem;
  height: 52.8rem;
  gap: 4rem;
}
.data .item06 {
  left: 0;
  top: 109.3rem;
  width: 62.9748rem;
  height: 52.6rem;
  gap: 2.7rem;
}
.data {
  /* 数値まわり */
}
.data .numBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}
.data .item01 .numBox {
  width: 15.8rem;
  margin-bottom: -1rem;
}
.data .item02 .numBox,
.data .item04 .numBox {
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
}
.data .item02 .numBox {
  width: 15.8rem;
}
.data .numBox .ttl {
  font-weight: 700;
  font-size: 4rem;
  line-height: 7rem;
  letter-spacing: 0.32rem;
}
.data .item01 .numBox .ttl,
.data .item01 .numBox .fig {
  width: 100%;
}
.data .numBox .fig {
  letter-spacing: 0.8rem;
}
.data .numBox .fig em {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 8rem;
  line-height: 7rem;
  color: #db3333;
}
.data .numBox .fig small {
  font-weight: 700;
  font-size: 5rem;
  line-height: 7rem;
}
.data {
  /* 03：50%増 */
}
.data .item03 .numBox .fig .sp2 {
  letter-spacing: 0.64rem;
}
.data .item03 .numBox .fig .sub {
  font-size: 4.5rem;
}
.data {
  /* 05：1エリア／1医院限定 */
}
.data .item05 .numBox .ttl {
  letter-spacing: 0.32rem;
}
.data .item05 .numBox .ttl .num {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 6rem;
  line-height: 7rem;
  letter-spacing: 0.78rem;
}
.data .item05 .numBox .fig small {
  font-size: 4.8rem;
}
.data {
  /* 06：24時間以内に */
}
.data .item06 .numBox .fig .sp2 {
  letter-spacing: 0.56rem;
}
.data .item06 .numBox .fig small {
  font-size: 4rem;
}
.data .item06 .numBox .fig .sub {
  font-size: 3.5rem;
}
.data {
  /* イラスト＋説明文 */
}
.data .body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}
.data .body .img {
  display: block;
}
.data .body p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 3rem;
  letter-spacing: 0.11rem;
  text-align: center;
  white-space: nowrap;
}
.data .item01 .body .img {
  width: 25rem;
  height: 13.7158rem;
}
.data .item02 .body .img {
  width: 25rem;
  height: 24.2rem;
}
.data .item03 .body .img {
  width: 38.424rem;
  height: 22.4rem;
}
.data .item04 .body .img {
  width: 31.8985rem;
  height: 20.5693rem;
}
.data .item05 .body .img {
  width: 37.4447rem;
  height: 15.9221rem;
}
.data .item05 .body p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.1rem;
  line-height: normal;
  letter-spacing: 0.105rem;
}
.data .item06 .body .img {
  width: 25.4532rem;
  height: 16.2rem;
}

/*------------------------------------------------------------
	mainVisual（SP）　デザイン幅375px・高さ791px
------------------------------------------------------------*/
@media all and (max-width: 896px) {
  .mainVisual {
    height: 82.8rem;
    background-color: #fff;
  }
  .mainVisual::after {
    content: none;
  }
  .mainVisual .inner {
    width: 100%;
  }
  /* 背景の斜め帯：残る2本＋淡い形は書き出した画像で表現し、
     読み込み時に流れる帯（line05〜08）だけKVの裏で動かす */
  .mainVisual .bgBox {
    background: url(../img/index/sp_fv_bg.webp) no-repeat left -0.1rem top 33.2rem;
    background-size: 37.5rem 30.7rem;
  }
  .mainVisual .bgBox .line,
  .mainVisual .bgBox .img01,
  .mainVisual .bgBox .img02,
  .mainVisual .bgBox .img03 {
    display: none;
  }
  .mainVisual .bgBox .line05,
  .mainVisual .bgBox .line06,
  .mainVisual .bgBox .line07,
  .mainVisual .bgBox .line08 {
    display: flex;
    right: auto;
  }
  .mainVisual .bgBox .line05 {
    left: -8rem;
    top: 40rem;
    width: 40rem;
    height: 32.8rem;
  }
  .mainVisual .bgBox .line05 span {
    width: 42rem;
    height: 1rem;
  }
  .mainVisual .bgBox .line06 {
    left: 4rem;
    top: 33rem;
    width: 32rem;
    height: 26.2rem;
  }
  .mainVisual .bgBox .line06 span {
    width: 34rem;
    height: 1.6rem;
  }
  .mainVisual .bgBox .line07 {
    left: -12rem;
    top: 48rem;
    width: 36rem;
    height: 29.5rem;
  }
  .mainVisual .bgBox .line07 span {
    width: 38rem;
    height: 0.7rem;
  }
  .mainVisual .bgBox .line08 {
    left: 12rem;
    top: 44rem;
    width: 28rem;
    height: 23rem;
  }
  .mainVisual .bgBox .line08 span {
    width: 30rem;
    height: 1.2rem;
  }
  /* キービジュアル（「1医院ずつ〜」の直下に配置） */
  .mainVisual .kv {
    left: 50%;
    right: auto;
    top: 35.4rem;
    width: 29.9rem;
    height: 26.2rem;
    margin-left: 0.1rem;
    transform: translateX(-50%);
    overflow: hidden;
    box-shadow: 0 0.6016rem 1.2033rem rgba(0, 0, 0, 0.1);
  }
  .mainVisual .kv img {
    position: absolute;
    left: -48.73%;
    top: -27.76%;
    width: 148.82%;
    height: 136.25%;
    max-width: none;
    filter: none;
  }
  /* コピー */
  .mainVisual .textBox .ttl01 {
    left: 2.7rem;
    top: 12.1rem;
    font-size: 2.6rem;
    line-height: 3.3rem;
    letter-spacing: 0.052rem;
  }
  .mainVisual .textBox .ttl02 .quoteL {
    left: 3.1rem;
    top: 10.5rem;
    font-size: 4rem;
    letter-spacing: 0.32rem;
  }
  .mainVisual .textBox .ttl02 .honki {
    left: 9.95rem;
    top: 11.6rem;
    font-size: 5.3rem;
    letter-spacing: 0.424rem;
  }
  .mainVisual .textBox .ttl02 .quoteR {
    left: 16.5rem;
    top: 10.5rem;
    font-size: 4rem;
    letter-spacing: 0.16rem;
  }
  .mainVisual .textBox .ttl02 .de {
    left: 17.1rem;
    top: 18.7rem;
    font-size: 3rem;
    letter-spacing: 0.54rem;
  }
  .mainVisual .textBox .ttl02 .tsukuru {
    left: 20.1rem;
    top: 15.4rem;
    font-size: 5.3rem;
    letter-spacing: -0.318rem;
  }
  .mainVisual .textBox .ttl02 .tsukuru i:nth-of-type(1) {
    letter-spacing: -1.06rem;
  }
  .mainVisual .textBox .ttl02 .tsukuru i:nth-of-type(2) {
    letter-spacing: -1.59rem;
  }
  .mainVisual .textBox .ttl02 .tsukuru i:nth-of-type(3) {
    letter-spacing: -0.53rem;
  }
  .mainVisual .textBox .bar {
    left: 2rem;
    top: 19.5rem;
    width: 33.5rem;
    height: 2.6rem;
  }
  .mainVisual .textBox .barTxt {
    left: 50%;
    width: auto;
    top: 20.85rem;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    letter-spacing: 0.66rem;
  }
  .mainVisual .textBox .lead {
    left: 2.5rem;
    top: 24.2rem;
  }
  .mainVisual .textBox .lead p {
    letter-spacing: 0.09rem;
  }
  .mainVisual .textBox .lead p:first-child {
    font-size: 1.3rem;
  }
  .mainVisual .textBox .lead p + p {
    margin-top: 1px;
    font-size: 1.4rem;
    letter-spacing: 0.07rem;
  }
  .mainVisual .textBox .lead .big {
    font-size: 1.9rem;
  }
  .mainVisual .textBox .lead .big2 {
    font-size: 1.9rem;
    letter-spacing: 0.171rem;
  }
  .mainVisual .textBox .lead .num {
    font-size: 2.4rem;
    letter-spacing: 0.312rem;
  }
  .mainVisual .textBox .dots {
    left: 3.086rem;
    top: 23.7rem;
    width: 6.2rem;
  }
  /* 強み（月桂冠） */
  .mainVisual .strength {
    left: 50%;
    top: 66.4rem;
    transform: translateX(-50%);
    align-items: center;
  }
  .mainVisual .strength > li {
    width: auto;
    height: 7rem;
  }
  .mainVisual .strength .crown {
    width: 4.816rem;
    height: 2rem;
  }
  .mainVisual .strength .body,
  .mainVisual .strength .item01 .body {
    width: 8.4995rem;
    height: 4.9506rem;
  }
  .mainVisual .strength .laurel,
  .mainVisual .strength .item01 .laurel {
    top: 0;
    width: 2.6285rem;
    height: 4.9506rem;
  }
  .mainVisual .strength .laurelR {
    left: 5.871rem;
  }
  .mainVisual .strength {
    /* 01 解約率0% */
  }
  .mainVisual .strength .item01 .txt01 {
    left: 2.6rem;
    top: 0.099rem;
    width: 3.375rem;
    font-size: 1rem;
    letter-spacing: 0.08rem;
    white-space: normal;
  }
  .mainVisual .strength .item01 .txt02 {
    left: 2.6rem;
    top: 1.299rem;
    letter-spacing: 0.3rem;
  }
  .mainVisual .strength .item01 .txt02 em {
    font-size: 2.8rem;
    line-height: 3rem;
  }
  .mainVisual .strength .item01 .txt02 small {
    font-size: 1.7rem;
    line-height: 3rem;
  }
  .mainVisual .strength {
    /* 02 歯科業界特化 */
  }
  .mainVisual .strength .item02 .txt01 {
    left: 0;
    top: 0;
    width: 8.4995rem;
    letter-spacing: 0;
  }
  .mainVisual .strength .item02 .txt01 .row01 {
    position: absolute;
    left: 1.6rem;
    top: 0.599rem;
    margin-bottom: 0;
    letter-spacing: 0.25rem;
  }
  .mainVisual .strength .item02 .txt01 .row01 .big {
    font-size: 1.6rem;
    line-height: 2rem;
  }
  .mainVisual .strength .item02 .txt01 .row01 .small {
    font-size: 1rem;
    line-height: 2rem;
    letter-spacing: 0.08rem;
  }
  .mainVisual .strength .item02 .txt01 .row02 {
    position: absolute;
    left: 3.2rem;
    top: 2.699rem;
    font-size: 1rem;
    letter-spacing: 0.08rem;
  }
  .mainVisual .strength {
    /* 03 1エリア1医院限定 */
  }
  .mainVisual .strength .item03 .txt01 {
    left: 0;
    top: 0;
    width: 8.4995rem;
  }
  .mainVisual .strength .item03 .txt01 .row01 {
    position: absolute;
    left: 2.3rem;
    top: 0.45rem;
    margin-bottom: 0;
    letter-spacing: 0.08rem;
  }
  .mainVisual .strength .item03 .txt01 .row01 .num {
    font-size: 1.4rem;
    line-height: 1.4rem;
    letter-spacing: 0;
  }
  .mainVisual .strength .item03 .txt01 .row01 .unit {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4rem;
    letter-spacing: 0;
  }
  .mainVisual .strength .item03 .txt01 .row02 {
    position: absolute;
    left: 1.9rem;
    top: 2.2rem;
    letter-spacing: 0.15rem;
  }
  .mainVisual .strength .item03 .txt01 .row02 .num {
    font-size: 1.9rem;
    line-height: 2rem;
    letter-spacing: 0;
  }
  .mainVisual .strength .item03 .txt01 .row02 .unit,
  .mainVisual .strength .item03 .txt01 .row02 .gray {
    font-size: 1rem;
    line-height: 2rem;
  }
  .mainVisual .strength {
    /* 04 全国対応 */
  }
  .mainVisual .strength .item04 .txt01 {
    left: 2.5rem;
    top: 0.599rem;
    font-size: 1.6rem;
    line-height: 2rem;
    letter-spacing: 0.128rem;
  }
  .mainVisual .strength .item04 .txt02 {
    left: 3.2rem;
    top: 2.699rem;
    font-size: 1rem;
    letter-spacing: 0.08rem;
  }
  /* ボタン */
  .mainVisual .fvBtn {
    left: 2rem;
    top: 75.8rem;
    width: 33.5rem;
  }
  .mainVisual .fvBtn a {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 0.7rem 3rem 0.7rem 2rem;
  }
  .mainVisual .fvBtn .icon {
    width: 3rem;
    height: 3rem;
  }
  .mainVisual .fvBtn .txt {
    font-size: 1.5rem;
    letter-spacing: 0.12rem;
  }
}
/*------------------------------------------------------------
	about（SP）　デザイン幅375px・高さ908px
------------------------------------------------------------*/
@media all and (max-width: 896px) {
  .about {
    height: auto;
    padding: 6rem 0.85rem 5.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* PCの絶対配置を解除して縦積みにする */
  .about .headBox,
  .about .txt01,
  .about .txt02,
  .about .txt03,
  .about .txt04,
  .about .txt05,
  .about .txt06,
  .about .imgBox {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    margin-left: 0;
    transform: none;
  }
  /* 見出し */
  .about .headBox {
    position: static;
    width: 100%;
    height: 12.1rem;
    margin-bottom: 3rem;
    padding: 0;
    gap: 1.4rem;
    transform: none;
  }
  .about .headBox .sub {
    gap: 1rem;
    font-size: 1.8rem;
    line-height: 2rem;
  }
  .about .headBox .sub .logo {
    width: 16.225rem;
    height: 3rem;
  }
  .about .headBox .ttl {
    line-height: 3.4rem;
    letter-spacing: 0.408rem;
    white-space: normal;
  }
  .about .headBox .ttl .big {
    font-size: 2.5rem;
  }
  .about .headBox .ttl .small {
    font-size: 2rem;
    letter-spacing: 0.16rem;
  }
  .about .headBox .ttl .mid,
  .about .headBox .ttl .mid2 {
    font-size: 2.3rem;
  }
  .about .headBox .ttl .mid2 {
    letter-spacing: 0.299rem;
  }
  /* 見出し下の手書き線
     （混在フォントサイズで行ボックスがFigmaより8px高く描画されるため、
     線もその分下げてテキスト下端との重なり量をデザインに合わせる） */
  .about .line {
    left: 50%;
    top: 16.6rem;
    margin-left: 0;
    transform: translateX(-50%);
    width: 26.9703rem;
    height: 3.5976rem;
  }
  .about .line > span {
    width: 26.896rem;
    height: 2.23rem;
    transform: rotate(-2.92deg) skewX(-0.11deg);
  }
  .about .line img {
    left: -0.1049rem;
    top: -0.2549rem;
    width: 27.027rem;
    height: 2.49408rem;
  }
  /* テキスト */
  .about .txt01,
  .about .txt02,
  .about .txt03 {
    margin-bottom: 0.5rem;
  }
  .about .txt01 {
    gap: 0.3rem;
    font-size: 1.5rem;
  }
  .about .txt01 em {
    padding: 1px 0.7rem;
    font-size: 2rem;
  }
  .about .txt01 .comma {
    letter-spacing: -0.105rem;
  }
  .about .txt02,
  .about .txt04 {
    font-size: 1.5rem;
    line-height: 2.5rem;
  }
  .about .txt03 {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    width: 33.2rem;
    font-size: 1.5rem;
  }
  .about .txt03 .row01 {
    width: 100%;
  }
  .about .txt03 .last {
    margin-left: 0.4rem;
  }
  .about .txt03 em {
    padding: 0.3rem 0.6rem;
    font-size: 2rem;
  }
  .about .txt04 {
    margin-bottom: 4.5rem;
  }
  .about .txt05 {
    margin-bottom: 0.5rem;
    width: 27.9rem;
    font-size: 1.5rem;
    line-height: 2.5rem;
  }
  .about .txt06 {
    flex-direction: column;
    align-items: center;
    width: 27.9rem;
    font-size: 1.5rem;
  }
  .about .txt06 .row {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .about .txt06 em {
    font-size: 2rem;
  }
  /* 画像ボックス */
  .about .imgBox {
    position: static;
    width: 33.6rem;
    height: 14.5rem;
    margin: 0 0 2.5rem;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-width: 0.6rem;
  }
  .about .imgBox .item {
    position: static;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  .about .imgBox .item01 {
    height: 11.6rem;
  }
  .about .imgBox .item02 {
    height: 11.568rem;
  }
  /* トリミングの基準になるので relative のままにする */
  .about .imgBox .photo {
    position: relative;
    left: auto;
    top: auto;
    width: 10rem;
  }
  .about .imgBox .item01 .photo {
    width: 10rem;
    height: 7.5rem;
  }
  .about .imgBox .item02 .photo {
    width: 10rem;
    height: 6.2rem;
  }
  .about .imgBox .item p {
    position: static;
    width: auto;
    font-size: 1.2rem;
    line-height: 1.8rem;
    letter-spacing: 0.06rem;
  }
  .about .imgBox .arrow {
    position: static;
    width: 3.4rem;
    height: 6.1rem;
  }
}
/*------------------------------------------------------------
	redArea / data（SP）　デザイン幅375px
------------------------------------------------------------*/
@media all and (max-width: 896px) {
  .redArea {
    padding: 6rem 0 5.2rem;
  }
  .redArea .areaDeco {
    left: 15.942rem;
    top: -2.6rem;
    margin-left: 0;
    width: 20.1159rem;
    height: 16.5rem;
  }
  .data .headLine01 {
    margin-bottom: 3.5rem;
  }
  /* 2列グリッド */
  .data .dataList {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .data .item {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: 29.5rem;
    padding: 2rem 0;
    gap: 1.5rem;
  }
  .data .item01,
  .data .item02 {
    gap: 0;
  }
  /* 数値まわり */
  .data .item01 .numBox {
    width: auto;
    margin-bottom: -1rem;
  }
  .data .item02 .numBox {
    width: auto;
    align-items: flex-end;
    gap: 0.5rem;
  }
  .data .item04 .numBox {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .data .numBox .ttl {
    font-size: 1.5rem;
    line-height: 3rem;
    letter-spacing: 0.12rem;
  }
  .data .item01 .numBox .ttl {
    font-size: 2rem;
    line-height: 3rem;
    letter-spacing: 0.16rem;
  }
  .data .item02 .numBox .ttl {
    line-height: 4rem;
  }
  /* 文字サイズが混在するため、字間は各文字サイズに対する割合で指定 */
  .data .numBox .fig {
    letter-spacing: 0.08em;
  }
  .data .numBox .fig em {
    font-size: 4rem;
    line-height: 3rem;
  }
  .data .numBox .fig small {
    font-size: 1.5rem;
    line-height: 3rem;
  }
  .data .item01 .numBox .fig em {
    line-height: 4rem;
  }
  .data .item01 .numBox .fig small {
    font-size: 2.5rem;
    line-height: 4rem;
  }
  .data .item02 .numBox .fig em {
    line-height: 5rem;
  }
  .data .item02 .numBox .fig small {
    line-height: 2rem;
  }
  .data .item03 .numBox .fig .sp2 {
    letter-spacing: 0.32rem;
  }
  .data .item03 .numBox .fig .sub {
    font-size: 1.5rem;
  }
  .data .item05 .numBox .ttl .num {
    font-size: 3rem;
    line-height: 3rem;
    letter-spacing: 0.39rem;
  }
  .data .item05 .numBox .fig small {
    font-size: 1.5rem;
  }
  .data .item06 .numBox .fig em {
    line-height: 4rem;
  }
  .data .item06 .numBox .fig small {
    font-size: 1.5rem;
    line-height: 4rem;
  }
  .data .item06 .numBox .fig .sp2 {
    letter-spacing: 0.28rem;
  }
  .data .item06 .numBox .fig .sub {
    font-size: 1.5rem;
  }
  .data .item06 .numBox .ttl {
    line-height: 2rem;
  }
  /* イラスト＋説明文 */
  .data .body {
    width: auto;
    gap: 2rem;
  }
  .data .item01 .body,
  .data .item02 .body {
    gap: 3rem;
  }
  .data .item06 .body {
    gap: 1.3rem;
  }
  .data .body p,
  .data .item05 .body p {
    font-size: 1.3rem;
    line-height: 2.2rem;
    letter-spacing: 0.065rem;
  }
  .data .item04 .body p {
    letter-spacing: 0;
  }
  .data .item05 .body p {
    font-family: "Zen Kaku Gothic New", sans-serif;
    line-height: normal;
  }
  .data .item01 .body .img {
    width: 13rem;
    height: 7.1322rem;
  }
  .data .item02 .body .img {
    width: 10.4rem;
    height: 10.1rem;
  }
  .data .item03 .body .img {
    width: 13.5rem;
    height: 7.8701rem;
  }
  .data .item04 .body .img {
    width: 13.5rem;
    height: 8.7053rem;
  }
  .data .item05 .body .img {
    width: 13.5rem;
    height: 5.7404rem;
  }
  .data .item06 .body .img {
    width: 13.5rem;
    height: 8.5922rem;
  }
}
/*------------------------------------------------------------
	works01 / works02　共通の白カードブロック
------------------------------------------------------------*/
.works01,
.works02 {
  margin-top: 16rem;
}
.works01 .ttlBox,
.works02 .ttlBox {
  height: 28.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5rem;
}
.works01,
.works02 {
  /* 黄色の帯（テキストは.inで1ブロックに包む。.band直下に
     インラインを並べるとflexで分割されて崩れる） */
}
.works01 .band,
.works02 .band {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.5rem 0;
  border-radius: 0.8rem;
  background-color: #ecd16c;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}
.works01 .band .in,
.works02 .band .in {
  display: block;
}
.works01 .band em,
.works02 .band em {
  font-style: normal;
  font-weight: 900;
  font-size: 2.9rem;
  color: #db3333;
}
.works01 .list,
.works02 .list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.works01 .row,
.works02 .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.works01 .item,
.works02 .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 5.5rem;
  border-radius: 0.8rem;
  background-color: #fff;
}
.works01 .item01,
.works02 .item01 {
  flex-direction: row;
  gap: 2rem;
  width: 100%;
  height: 36.3rem;
}
.works01 .item01 .textBox,
.works02 .item01 .textBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}
.works01 .item01 .img,
.works02 .item01 .img {
  display: block;
  flex-shrink: 0;
  width: 28.0001rem;
  height: 24.6401rem;
}
.works01 .item02,
.works02 .item02 {
  width: 57.6rem;
  height: 48.7rem;
  gap: 3rem;
}
.works01 .item03,
.works02 .item03 {
  width: 57.7rem;
  height: 48.7rem;
  gap: 2rem;
}
.works01 .item04,
.works02 .item04 {
  width: 41.5rem;
  height: 55.8rem;
  gap: 3rem;
}
.works01 .item05,
.works02 .item05 {
  width: 73.8rem;
  height: 55.8rem;
  gap: 2rem;
}
.works01,
.works02 {
  /* 数値まわり */
}
.works01 .numBox,
.works02 .numBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}
.works01 .numBox .ttl,
.works02 .numBox .ttl {
  font-weight: 700;
  font-size: 4rem;
  line-height: 7rem;
  letter-spacing: 0.32rem;
}
.works01 .numBox .fig em,
.works02 .numBox .fig em {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 8rem;
  line-height: 7rem;
  color: #db3333;
}
.works01 .numBox .fig small,
.works02 .numBox .fig small {
  font-weight: 700;
  font-size: 4rem;
  line-height: 7rem;
}
.works01 .numBox .fig strong,
.works02 .numBox .fig strong {
  font-weight: 900;
  font-size: 6rem;
  line-height: 7rem;
  color: #db3333;
}
.works01 .item01 .numBox .fig,
.works02 .item01 .numBox .fig {
  letter-spacing: 0.8rem;
}
.works01 .item01 .numBox .fig .sp2,
.works02 .item01 .numBox .fig .sp2 {
  letter-spacing: 0.64rem;
}
.works01 .item02 .numBox .fig small,
.works02 .item02 .numBox .fig small {
  font-size: 5rem;
}
.works01,
.works02 {
  /* 追加料金なし：横並び */
}
.works01 .item03 .numBox,
.works02 .item03 .numBox {
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 1.2rem;
}
.works01,
.works02 {
  /* イラスト＋説明文 */
}
.works01 .body,
.works02 .body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
.works01 .item03 .body,
.works01 .item05 .body,
.works02 .item03 .body,
.works02 .item05 .body {
  width: 100%;
  gap: 3rem;
}
.works01 .item05 .body,
.works02 .item05 .body {
  gap: 2rem;
}
.works01 .body .img,
.works02 .body .img {
  display: block;
}
.works01 .item02 .body .img,
.works02 .item02 .body .img {
  width: 15.6272rem;
  height: 19.111rem;
}
.works01 .item03 .body .img,
.works02 .item03 .body .img {
  width: 28.1729rem;
  height: 22.6049rem;
}
.works01 .item05 .body .img,
.works02 .item05 .body .img {
  width: 39.4rem;
  height: 23.3349rem;
}
.works01 .txt,
.works01 .txt p,
.works02 .txt,
.works02 .txt p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 3rem;
  letter-spacing: 0.11rem;
  text-align: center;
  white-space: nowrap;
}
.works01 .item02 .txt p,
.works02 .item02 .txt p {
  line-height: normal;
}
.works01 .item04 .txt,
.works02 .item04 .txt {
  line-height: normal;
}
.works01,
.works02 {
  /* ページ数制限なし：サイト画像を重ねて配置 */
}
.works01 .siteList,
.works02 .siteList {
  position: relative;
  display: block;
  width: 33rem;
  height: 14.3996rem;
}
.works01 .siteList img,
.works02 .siteList img {
  position: absolute;
  width: 14.0489rem;
  height: 10.7736rem;
}
.works01 .siteList .site01,
.works02 .siteList .site01 {
  left: 0;
  top: 0;
}
.works01 .siteList .site02,
.works02 .siteList .site02 {
  left: 18.951rem;
  top: 0;
}
.works01 .siteList .site03,
.works02 .siteList .site03 {
  left: 2.145rem;
  top: 1.702rem;
}
.works01 .siteList .site04,
.works02 .siteList .site04 {
  left: 16.807rem;
  top: 1.628rem;
}
.works01 .siteList .site05,
.works02 .siteList .site05 {
  left: 8.579rem;
  top: 3.626rem;
}

/*------------------------------------------------------------
	works01 / works02（SP）共通
------------------------------------------------------------*/
@media all and (max-width: 896px) {
  .works01,
  .works02 {
    margin-top: 6rem;
  }
  .works01 .ttlBox,
  .works02 .ttlBox {
    height: auto;
    gap: 2.5rem;
  }
  .works01 .band,
  .works02 .band {
    flex: none;
    padding: 0.8rem 0;
    font-size: 1.5rem;
    line-height: 2.2rem;
  }
  .works01 .band em,
  .works02 .band em {
    font-size: 1.8rem;
  }
  .works01 .list,
  .works02 .list {
    margin-top: 2rem;
    gap: 1.5rem;
  }
  .works01 .item,
  .works02 .item {
    padding: 2rem 5.5rem;
  }
  .works01,
  .works02 {
    /* 制作数100件以上 */
  }
  .works01 .item01,
  .works02 .item01 {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 20.2rem;
    padding: 0;
  }
  .works01 .item01 .textBox,
  .works02 .item01 .textBox {
    align-items: flex-start;
    gap: 1.5rem;
    text-align: left;
  }
  .works01 .item01 .img,
  .works02 .item01 .img {
    align-self: flex-start;
    width: 9.0001rem;
    height: 7.9201rem;
  }
  .works01 .item01 .numBox,
  .works02 .item01 .numBox {
    align-items: flex-start;
  }
  .works01 .item01 .txt,
  .works02 .item01 .txt {
    text-align: left;
  }
  .works01,
  .works02 {
    /* 2列に並ぶカード */
  }
  .works01 .item02,
  .works01 .item03,
  .works01 .item04,
  .works01 .item05,
  .works02 .item02,
  .works02 .item03,
  .works02 .item04,
  .works02 .item05 {
    width: 16rem;
    height: 29.5rem;
  }
  .works01 .item02,
  .works02 .item02 {
    gap: 2rem;
  }
  .works01 .item03,
  .works02 .item03 {
    gap: 0;
  }
  .works01 .item04,
  .works02 .item04 {
    gap: 3rem;
  }
  .works01 .item05,
  .works02 .item05 {
    gap: 1.5rem;
  }
  .works01,
  .works02 {
    /* 数値まわり */
  }
  .works01 .numBox .ttl,
  .works02 .numBox .ttl {
    font-size: 2rem;
    line-height: 3rem;
    letter-spacing: 0.16rem;
  }
  .works01 .item03 .numBox .ttl,
  .works02 .item03 .numBox .ttl {
    line-height: 2rem;
  }
  .works01 .item04 .numBox .ttl,
  .works02 .item04 .numBox .ttl {
    font-size: 1.8rem;
    line-height: 2rem;
    letter-spacing: 0.144rem;
  }
  .works01 .item05 .numBox .ttl,
  .works02 .item05 .numBox .ttl {
    font-size: 1.4rem;
    line-height: 2rem;
    letter-spacing: 0.112rem;
  }
  .works01 .numBox .fig em,
  .works02 .numBox .fig em {
    font-size: 4rem;
    line-height: 4rem;
  }
  .works01 .numBox .fig small,
  .works02 .numBox .fig small {
    font-size: 1.8rem;
    line-height: 4rem;
  }
  .works01 .numBox .fig strong,
  .works02 .numBox .fig strong {
    font-size: 2.5rem;
    line-height: 4rem;
  }
  .works01 .item01 .numBox .fig,
  .works02 .item01 .numBox .fig {
    letter-spacing: 0.08em;
  }
  .works01 .item01 .numBox .fig .sp2,
  .works02 .item01 .numBox .fig .sp2 {
    letter-spacing: 0.32rem;
  }
  .works01 .item02 .numBox .fig em,
  .works02 .item02 .numBox .fig em {
    line-height: 3rem;
  }
  .works01 .item02 .numBox .fig small,
  .works02 .item02 .numBox .fig small {
    font-size: 1.8rem;
    line-height: 2rem;
  }
  .works01 .item03 .numBox,
  .works02 .item03 .numBox {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .works01,
  .works02 {
    /* イラスト＋説明文 */
  }
  .works01 .body,
  .works01 .item03 .body,
  .works01 .item05 .body,
  .works02 .body,
  .works02 .item03 .body,
  .works02 .item05 .body {
    gap: 1.5rem;
  }
  .works01 .item02 .body .img,
  .works02 .item02 .body .img {
    width: 8.5rem;
    height: 10.3949rem;
  }
  .works01 .item03 .body .img,
  .works02 .item03 .body .img {
    width: 10.5rem;
    height: 8.4249rem;
  }
  .works01 .item05 .body .img,
  .works02 .item05 .body .img {
    width: 13.5rem;
    height: 7.9954rem;
  }
  .works01 .txt,
  .works01 .txt p,
  .works02 .txt,
  .works02 .txt p {
    font-size: 1.3rem;
    line-height: 2.2rem;
    letter-spacing: 0.065rem;
  }
  .works01 .item04 .txt,
  .works02 .item04 .txt {
    line-height: 2.2rem;
  }
  .works01,
  .works02 {
    /* サイト画像の重なり */
  }
  .works01 .siteList,
  .works02 .siteList {
    width: 13.5rem;
    height: 5.8913rem;
  }
  .works01 .siteList img,
  .works02 .siteList img {
    width: 5.7474rem;
    height: 4.4074rem;
  }
  .works01 .siteList .site02,
  .works02 .siteList .site02 {
    left: 7.753rem;
  }
  .works01 .siteList .site03,
  .works02 .siteList .site03 {
    left: 0.877rem;
    top: 0.696rem;
  }
  .works01 .siteList .site04,
  .works02 .siteList .site04 {
    left: 6.875rem;
    top: 0.666rem;
  }
  .works01 .siteList .site05,
  .works02 .siteList .site05 {
    left: 3.51rem;
    top: 1.484rem;
  }
}
/*------------------------------------------------------------
	works02　Web Marketing／WEBマーケティング・集患
------------------------------------------------------------*/
.works02 .band {
  line-height: 3.5rem;
  letter-spacing: 0.11rem;
}
.works02 .band .l2 {
  font-size: 2.4rem;
  letter-spacing: 0;
}
.works02 .band .num {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 3.9rem;
  letter-spacing: 0.702rem;
  color: #db3333;
}
.works02 .band .unit {
  font-style: normal;
  font-size: 2.4rem;
  color: #db3333;
}
.works02 .list {
  gap: 3rem;
}
.works02 .row01 {
  gap: 2.3rem;
  justify-content: flex-start;
}
.works02 .row02 {
  gap: 2.4rem;
  justify-content: flex-start;
}
.works02 .item {
  border-radius: 1rem;
}
.works02 .item01 {
  flex-direction: column;
  width: 73.8rem;
  height: 55.8rem;
  gap: 2rem;
}
.works02 .item01 .img {
  width: 41.2rem;
  height: 26.049rem;
}
.works02 .item02 {
  width: 41.5rem;
  height: 55.8rem;
  gap: 3rem;
}
.works02 .item02 .body .img {
  width: 25rem;
  height: 21.0291rem;
}
.works02 .item02 .body .txt {
  width: 33rem;
  line-height: normal;
  white-space: normal;
}
.works02 {
  /* 顧客売り上げ（横並び） */
}
.works02 .item03 {
  flex-direction: row;
  gap: 2rem;
  width: 100%;
  height: 36.3rem;
}
.works02 .item03 .textBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.works02 .item04 {
  width: 57.6rem;
  height: 55.9rem;
  gap: 3rem;
}
.works02 .item04 .body .img {
  width: 20rem;
  height: 22.8rem;
  overflow: hidden;
}
.works02 .item04 .txt p {
  line-height: normal;
}
.works02 .item05 {
  width: 57.6rem;
  height: 55.9rem;
  gap: 2rem;
}
.works02 .item05 .numBox {
  align-items: center;
}
.works02 .item05 .body {
  gap: 3rem;
}
.works02 .item05 .body .img {
  width: 23.8075rem;
  height: 22.35rem;
}
.works02 .item05 .txt {
  line-height: 3rem;
}
.works02 .item05 .txt .s2 {
  font-size: 1.6rem;
}
.works02 {
  /* 数値まわり */
}
.works02 .numBox .fig small {
  font-size: 5rem;
}
.works02 .item01 .numBox .fig .sp2 {
  letter-spacing: 0.56rem;
}
.works02 .item02 .numBox .fig {
  letter-spacing: 0.64rem;
}
.works02 .item02 .numBox .fig small {
  letter-spacing: 0.4rem;
}
.works02 .item03 .numBox .fig {
  letter-spacing: 0.8rem;
}
.works02 .item03 .numBox .fig small {
  font-size: 4rem;
}
.works02 .item03 .numBox .fig .sp2 {
  letter-spacing: 0.64rem;
}
.works02 {
  /* イラストの重なり（顧客売り上げ） */
}
.works02 .clusterList {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 28.2013rem;
  height: 23.2456rem;
}
.works02 .clusterList img {
  position: absolute;
}
.works02 .clusterList .c01 {
  left: 5.605rem;
  top: 0.17rem;
  width: 12.7353rem;
  height: 12.7516rem;
}
.works02 .clusterList .c02 {
  left: 0;
  top: 0.688rem;
  width: 10.292rem;
  height: 5.7203rem;
}
.works02 .clusterList .c03 {
  left: 15.137rem;
  top: 6.995rem;
  width: 13.0643rem;
  height: 16.2506rem;
}
.works02 .clusterList .c04 {
  left: 12.614rem;
  top: 0;
  width: 8.1421rem;
  height: 5.3262rem;
}

/*------------------------------------------------------------
	works02（SP）
------------------------------------------------------------*/
@media all and (max-width: 896px) {
  .works02 .band {
    line-height: 2.2rem;
    letter-spacing: 0;
  }
  .works02 .band .l2 {
    font-size: 1.5rem;
  }
  .works02 .band .sp2 {
    letter-spacing: 0.21rem;
  }
  .works02 .band .num {
    font-size: 2.9rem;
    line-height: 2.7rem;
    letter-spacing: 0.232rem;
  }
  .works02 .band .unit {
    font-size: 1.8rem;
    line-height: 2.7rem;
  }
  .works02 .list {
    gap: 1.5rem;
  }
  .works02 .row01,
  .works02 .row02 {
    gap: 1.5rem;
  }
  .works02 .item01,
  .works02 .item02,
  .works02 .item04,
  .works02 .item05 {
    width: 16rem;
    height: 29.5rem;
  }
  .works02 .item01 {
    gap: 2rem;
  }
  .works02 {
    /* works01 の item01（横並びカード）用の左寄せ指定を打ち消して中央寄せに戻す */
  }
  .works02 .item01 .numBox {
    align-items: center;
  }
  .works02 .item01 .img {
    align-self: center;
    width: 13.5rem;
    height: 8.5355rem;
  }
  .works02 .item01 .txt {
    line-height: 2rem;
    text-align: center;
  }
  .works02 .item02 {
    gap: 0.5rem;
  }
  .works02 .item02 .body {
    gap: 1.5rem;
  }
  .works02 .item02 .body .img {
    width: 11.1224rem;
    height: 9.3557rem;
  }
  .works02 .item02 .body .txt {
    width: auto;
    font-size: 1.2rem;
    line-height: 2.2rem;
    letter-spacing: 0.06rem;
    white-space: nowrap;
  }
  .works02 {
    /* 自費率6割：PCの5rem指定を打ち消す */
  }
  .works02 .item02 .numBox .fig em {
    line-height: 4.3rem;
  }
  .works02 .item02 .numBox .fig small {
    font-size: 1.5rem;
    line-height: 3rem;
    letter-spacing: 0.12rem;
  }
  .works02 {
    /* 顧客売り上げ：万〜・億円はSPでは15px */
  }
  .works02 .item03 .numBox .fig small {
    font-size: 1.5rem;
  }
  .works02 {
    /* 顧客売り上げ（イラストはカード右下に重ねる） */
  }
  .works02 .item03 {
    position: relative;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    height: 20rem;
    padding: 3rem 0;
  }
  .works02 .item03 .clusterList {
    position: absolute;
    right: 0.8rem;
    bottom: 3rem;
  }
  .works02 {
    /* 法人化率・SEO の2枚は中身が高さ29.5remをほぼ埋めて上下の余白が消えるため、
       高さを内容に合わせ（2枚は stretch で揃える）上下に余白を確保する */
  }
  .works02 .row02 {
    align-items: stretch;
  }
  .works02 .item04,
  .works02 .item05 {
    height: auto;
    min-height: 29.5rem;
    padding: 2.5rem 1rem;
  }
  .works02 .item04 {
    gap: 0.5rem;
  }
  .works02 .item04 .body {
    gap: 0.5rem;
  }
  .works02 .item04 .body .img {
    width: 6.8739rem;
    height: 7.8526rem;
  }
  .works02 .item04 .txt p {
    line-height: 2.2rem;
  }
  .works02 .item05 {
    gap: 0.5rem;
  }
  .works02 .item05 .body {
    gap: 1.5rem;
  }
  .works02 .item05 .body .img {
    width: 6.5rem;
    height: 6.1021rem;
  }
  .works02 .item05 .txt {
    line-height: 2rem;
  }
  .works02 .item05 .txt .s2 {
    font-size: 1rem;
  }
  .works02 {
    /* 数値まわり */
  }
  .works02 .numBox .ttl {
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: 0.12rem;
  }
  .works02 .item02 .numBox .ttl,
  .works02 .item03 .numBox .ttl {
    font-size: 1.8rem;
    letter-spacing: 0.144rem;
  }
  .works02 .item05 .numBox .ttl {
    font-size: 1.4rem;
    letter-spacing: 0.112rem;
    /* SPでは「SEO」を1行に独立させ、item04の「法人化率」と同じ大きさに
       （カード高さ29.5rem内に収まるよう行送りは2.2rem） */
  }
  .works02 .item05 .numBox .ttl .en {
    font-size: 1.8rem;
    line-height: 2.2rem;
    letter-spacing: 0.144rem;
  }
  .works02 .numBox .fig em {
    line-height: 4.2rem;
  }
  .works02 .numBox .fig small {
    font-size: 1.5rem;
    line-height: 4.2rem;
  }
  .works02 .item01 .numBox .fig .sp2 {
    letter-spacing: 0.28rem;
  }
  .works02 .item03 .numBox .fig {
    /* PCの 0.8rem（Figmaの絶対px）だと「8000」「1.2」が離れて見えるため、
       他カード（1.5〜2倍 など）と同じ 0.128rem に揃える */
    letter-spacing: 0.128rem;
  }
  .works02 .item03 .numBox .fig em {
    font-size: 3.5rem;
    line-height: 4.3rem;
  }
  .works02 .item03 .numBox .fig small {
    line-height: 4.3rem;
  }
  .works02 .item03 .numBox .fig .sp2 {
    letter-spacing: 0.128rem;
  }
  .works02 {
    /* イラストの重なり */
  }
  .works02 .clusterList {
    width: 10.0292rem;
    height: 8.2673rem;
  }
  .works02 .clusterList .c01 {
    left: 1.993rem;
    top: 0.061rem;
    width: 4.5292rem;
    height: 4.535rem;
  }
  .works02 .clusterList .c02 {
    left: 0;
    top: 0.245rem;
    width: 3.6603rem;
    height: 2.0344rem;
  }
  .works02 .clusterList .c03 {
    left: 5.383rem;
    top: 2.488rem;
    width: 4.6462rem;
    height: 5.7793rem;
  }
  .works02 .clusterList .c04 {
    left: 4.486rem;
    top: 0;
    width: 2.8957rem;
    height: 1.8943rem;
  }
}
/*------------------------------------------------------------
	services　サービス一覧
------------------------------------------------------------*/
.services {
  padding: 12rem 0;
  background-color: #fff;
  /* Figmaはセクション固定高2200px（中身1855px＋上下センター） */
}
@media all and (min-width: 897px) {
  .services {
    display: flex;
    align-items: center;
    height: 220rem;
    padding: 0;
  }
}
.services .inner {
  width: 117.7rem;
  max-width: 100%;
  margin: 0 auto;
}
.services {
  /* 見出し */
}
.services .ttlBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4.5rem;
  width: 104.6rem;
  max-width: 100%;
}
.services .lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
  width: 100%;
}
.services .lead .ttl {
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 4.5rem;
  letter-spacing: 0.17rem;
  color: #db3333;
  white-space: nowrap;
}
.services .lead .txt {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 3rem;
  letter-spacing: 0.11rem;
}
.services {
  /* 大きい2枚のカード */
}
.services .mainList {
  margin-top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.services .item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 39.2rem;
  border: 2.5px solid #383838;
  border-radius: 0.8rem;
  background-color: #fff;
}
.services .item01 {
  padding-left: 5rem;
}
.services .item02 {
  flex-direction: row-reverse;
  width: 115rem;
  margin-left: 2.6rem;
  padding-right: 5rem;
}
.services .item .textBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}
.services .item .head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 46.4rem;
}
.services .item .head h3 {
  width: 100%;
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 5.5rem;
  letter-spacing: 0.28rem;
}
.services .tagList {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.services .tagList li {
  padding: 0.3rem 1rem;
  border-radius: 0.3rem;
  background-color: #ecd16c;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 3rem;
  letter-spacing: 0.144rem;
  white-space: nowrap;
}
.services .item .textBox p {
  width: 57rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.5rem;
  letter-spacing: 0.09rem;
}
.services .item .img {
  display: block;
  flex-shrink: 0;
  width: 50rem;
  height: 100%;
  /* 枠の角丸に収める（外側0.8rem − 線幅2.5px が枠線の内側カーブ）。
     指定しないと画像の四角い角が枠線を上塗りして枠が途切れて見える */
  overflow: hidden;
  border-radius: 0 calc(0.8rem - 2.5px) calc(0.8rem - 2.5px) 0;
}
.services {
  /* item02は画像が左側（row-reverse）なので角丸も左側に */
}
.services .item02 .img {
  border-radius: calc(0.8rem - 2.5px) 0 0 calc(0.8rem - 2.5px);
}
.services {
  /* SPだけトリミングの違う画像に差し替えるため picture で囲っている */
}
.services .item .img picture {
  display: block;
  width: 100%;
  height: 100%;
}
.services .item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.services {
  /* 斜めの赤バッジ */
}
.services .badge {
  position: absolute;
  display: block;
}
.services .badge .in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 4rem;
  background-color: #db3333;
  transform: skewX(-13.69deg) scaleY(0.97);
}
.services .badge .txt {
  display: block;
  transform: skewX(13.69deg);
  color: #fff;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.services .badge .s1 {
  font-size: 2.7rem;
  line-height: normal;
}
.services .badge .s2 {
  font-size: 3.7rem;
  line-height: normal;
}
.services .item01 .badge {
  left: 81.2rem;
  top: 30rem;
}
.services .item02 .badge {
  left: -2.6rem;
  top: 30.1rem;
}
.services {
  /* 小さいカード */
}
.services .subList {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem 1.9rem;
}
.services .subList li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 3rem 1.5rem;
  border: 2.5px solid #383838;
  border-radius: 0.8rem;
  background-color: #fff;
}
.services .subList .head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 15rem;
}
.services .subList .icon {
  display: block;
  width: 10rem;
  height: 10rem;
}
.services .subList .icon.meo {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #383838;
  overflow: hidden;
}
.services .subList .icon.meo img {
  width: 6rem;
  height: 4.5886rem;
}
.services .subList h3 {
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 3rem;
  letter-spacing: 0.184rem;
  white-space: nowrap;
}
.services .subList li p {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.5rem;
  letter-spacing: 0.09rem;
  text-align: justify;
}

/*------------------------------------------------------------
	services（SP）
------------------------------------------------------------*/
@media all and (max-width: 896px) {
  .services {
    padding: 6rem 0;
  }
  .services .inner {
    width: auto;
    padding: 0 2rem;
  }
  .services .ttlBox {
    width: auto;
    gap: 2rem;
  }
  .services .lead .ttl {
    font-size: 2.2rem;
    line-height: 3rem;
    letter-spacing: 0.11rem;
  }
  .services .lead .txt {
    font-size: 1.5rem;
    line-height: 3rem;
    letter-spacing: 0.075rem;
  }
  .services {
    /* 大きいカード：画像を上に */
  }
  .services .mainList {
    margin-top: 3rem;
    gap: 3rem;
  }
  .services .item {
    flex-direction: column-reverse;
    align-items: flex-start;
    height: auto;
    padding: 0 0 2rem;
    border-width: 2px;
    gap: 1.5rem;
  }
  .services .item02 {
    width: auto;
    margin-left: 0;
    padding: 0 0 2rem;
  }
  .services .item .img {
    width: 100%;
    height: 20rem;
    /* SPは画像がカード上部（枠線2px）なので上2角を枠の内側カーブに合わせる */
    border-radius: calc(0.8rem - 2px) calc(0.8rem - 2px) 0 0;
  }
  .services .item .textBox {
    gap: 2rem;
    width: 100%;
    padding: 0 1.5rem;
  }
  .services .item .head {
    width: 100%;
  }
  .services .item .head h3 {
    font-size: 2.5rem;
    line-height: 4.5rem;
    letter-spacing: 0.2rem;
  }
  .services .tagList li {
    font-size: 1.3rem;
    letter-spacing: 0.104rem;
  }
  .services .item .textBox p {
    width: 100%;
    font-size: 1.3rem;
    line-height: 2.2rem;
    letter-spacing: 0.065rem;
  }
  .services {
    /* バッジ */
  }
  .services .badge .in {
    padding: 1rem 2rem;
    align-items: flex-end;
  }
  .services .badge .s1 {
    font-size: 1.8rem;
    line-height: 2rem;
  }
  .services .badge .s2 {
    font-size: 2.2rem;
  }
  .services {
    /* デザイン実測：バッジは両端とも斜めのままカード枠の外へはみ出す。
       .in をボックスいっぱいに広げて skew するので
       width＝平行四辺形の水平幅、left＝高さ中央での左端になる */
  }
  .services .badge .in {
    display: flex;
    width: 100%;
    height: 100%;
    transform: skewX(-13.69deg);
  }
  .services .item01 .badge {
    left: 14.1rem;
    top: 11.3rem;
    width: 19.7rem;
    height: 7.6rem;
  }
  .services .item02 .badge {
    left: -0.5rem;
    top: 11.1rem;
    width: 21.7rem;
    height: 7.6rem;
  }
  .services .item02 .badge .s1 {
    font-size: 1.6rem;
  }
  .services {
    /* 小さいカード：2列 */
  }
  .services .subList {
    margin-top: 3rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .services .subList li {
    gap: 1.5rem;
    padding: 2rem 1rem;
  }
  .services .subList .head {
    gap: 0.8rem;
    width: auto;
  }
  .services .subList .icon {
    width: 8rem;
    height: 8rem;
  }
  .services .subList .icon.meo img {
    width: 5.1rem;
    height: 3.9003rem;
  }
  .services .subList h3 {
    font-size: 1.8rem;
    letter-spacing: 0.144rem;
  }
  .services .subList li p {
    font-size: 1.3rem;
    line-height: 2.2rem;
    letter-spacing: 0.065rem;
  }
}
/*------------------------------------------------------------
	works　制作実績
------------------------------------------------------------*/
.works {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4rem;
  height: 95rem;
  padding: 12rem 0;
  border-top: 3px solid #383838;
  border-bottom: 3px solid #383838;
  overflow: hidden;
  background-color: #fff;
  background-image: radial-gradient(#eaeaea 1px, transparent 1px);
  background-size: 5px 5px;
  background-position: 0 0;
  /* 左下の装飾画像 */
}
.works .bgImg {
  position: absolute;
  left: calc(50% - 69.9rem);
  top: 55.1rem;
  z-index: 0;
  display: block;
  width: 41.3rem;
  height: 39.3rem;
  overflow: hidden;
}
.works .bgImg img {
  position: absolute;
  left: -0.06%;
  top: 0;
  width: 100.12%;
  height: 116.79%;
  max-width: none;
}
.works .ttlBox {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5.4rem;
}
.works .ttlBox .headLine01 {
  gap: 2.4rem;
}
.works .ttlBox .headLine01 .txtBox {
  width: auto;
  white-space: nowrap;
}
.works .list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.works .row {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.works .item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 制作区分＋医院名2行がちょうど収まる余白にしている */
  gap: 1rem;
  width: 38.4rem;
  height: 34rem;
  padding-bottom: 1.5rem;
  border: 2px solid #383838;
  border-radius: 0.8rem 0.8rem 0 0.8rem;
  background-color: #fff;
}
.works .item .img {
  display: block;
  flex-shrink: 0;
  width: 100%;
  height: 22rem;
  /* 枠線の内側カーブ（外側半径 − 線幅）に合わせる。
     外側と同じ半径にすると角で枠線に食い込み、線が途切れて見える */
  border-radius: calc(0.8rem - 2px) calc(0.8rem - 2px) 0 0;
  overflow: hidden;
}
.works .item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works {
  /* アイキャッチ未設定のときのロゴ */
}
.works .item .img .noImg {
  padding: 5rem;
  background-color: #e9e9e9;
  object-fit: contain;
}
.works .item .textBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 0 2rem;
  overflow: hidden;
}
.works {
  /* 新規開業は赤（既定）。制作実績一覧と色を揃える */
}
.works .item .tag {
  padding: 0.3rem 0.7rem;
  background-color: #db3333;
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.1rem;
  letter-spacing: 0.128rem;
  white-space: nowrap;
}
.works .item .tag.isRenewal {
  background-color: #1f6fb2;
}
.works .item .tag.isSpecial {
  background-color: #178040;
}
.works .item .name {
  /* カードの高さが決まっているので、長い医院名は2行までに収める */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: 100%;
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 3rem;
  letter-spacing: 0.176rem;
}
.works {
  /* 右下の折れ角 */
}
.works .item .corner {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: block;
  width: 2rem;
  height: 2rem;
}

/*------------------------------------------------------------
	works（SP）
------------------------------------------------------------*/
@media all and (max-width: 896px) {
  .works {
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    height: auto;
    padding: 9rem 2rem 6rem;
    border-width: 2px;
  }
  .works .bgImg {
    display: none;
  }
  .works .ttlBox {
    display: contents;
  }
  .works .ttlBox .headLine01 {
    gap: 2rem;
    align-self: flex-start;
  }
  .works .list {
    gap: 1.5rem;
    width: 100%;
  }
  .works .row {
    gap: 1.5rem;
    justify-content: space-between;
    /* 高さは中身に合わせつつ、隣のカードとは揃える */
    align-items: stretch;
  }
  .works .item {
    width: 16rem;
    height: auto;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .works .item .img {
    height: 9rem;
  }
  .works {
    /* PCと同じ余白だと画像の高さを食い潰してロゴが見えなくなる */
  }
  .works .item .img .noImg {
    padding: 2rem;
  }
  .works .item .textBox {
    padding: 0 1rem;
  }
  .works .item .tag {
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: 0.08rem;
  }
  .works .item .name {
    /* SPはカードの高さが可変なので行数を制限しない */
    -webkit-line-clamp: none;
    font-size: 1.3rem;
    line-height: 2.2rem;
    letter-spacing: 0;
  }
  .works .item .corner {
    width: 1rem;
    height: 1rem;
  }
  .works {
    /* ボタンはカードの下 */
  }
  .works .comBtn01 {
    order: 3;
    margin-top: 1rem;
  }
  .works .comBtn01 a {
    padding: 1rem 1.5rem 1rem 2rem;
    gap: 1.5rem;
  }
  .works .comBtn01 .txt {
    font-size: 1.5rem;
    letter-spacing: 0.12rem;
  }
}
/*------------------------------------------------------------
	price　料金プラン
------------------------------------------------------------*/
.price {
  position: relative;
  padding: 14.5rem 0 15.5rem;
  overflow: hidden;
  /* Figmaはセクション固定高1600px（コンテンツ上端はセクション上端+145px） */
}
@media all and (min-width: 897px) {
  .price {
    height: 160rem;
    padding-bottom: 0;
  }
}
.price .bg {
  position: absolute;
  z-index: 0;
  display: block;
  width: 62.9rem;
  height: 77.4rem;
}
.price .bg01 {
  left: calc(50% - 107.3rem);
  top: 0;
}
.price .bg02 {
  left: calc(50% + 42.1rem);
  top: 82.6rem;
  transform: rotate(180deg);
}
.price .content {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;
}
.price .ttlBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.5rem;
}
.price .ttlBox .headLine01 .txtBox {
  width: auto;
  white-space: nowrap;
}
.price .lead {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 3rem;
  letter-spacing: 0.11rem;
  white-space: nowrap;
}
.price {
  /* 料金表 */
}
.price .priceBox {
  width: 100%;
  padding: 4rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.3rem;
  border: 2px solid #383838;
  border-radius: 0.8rem;
  background-color: #fff;
}
.price .block {
  width: 100%;
  padding: 0 5rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.price .bar {
  width: 100%;
  background-color: #383838;
  color: #fff;
  font-weight: 700;
  font-size: 3rem;
  line-height: 7rem;
  letter-spacing: 0.24rem;
  text-align: center;
}
.price .inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
  width: 100%;
}
.price .rowList {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.price .rowList li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.price .rowList .name {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background-color: #ede1b4;
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 3.5rem;
  letter-spacing: 0.224rem;
  white-space: nowrap;
}
.price .block:first-child .rowList .name {
  width: 15rem;
}
.price .block:nth-child(2) .rowList li:first-child .name,
.price .block:nth-child(3) .rowList .name {
  font-size: 2.5rem;
  letter-spacing: 0.2rem;
}
.price .rowList .fee {
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.2rem;
  text-align: right;
  white-space: nowrap;
}
.price .rowList .fee em {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 4.5rem;
  line-height: 2.5rem;
}
.price .rowList .fee small {
  font-size: 2.5rem;
  line-height: 2.5rem;
}
.price .rowList .fee .sub {
  font-size: 1.6rem;
  line-height: 2.5rem;
}
.price .rowList .fee .sub em {
  font-size: 1.6rem;
}
.price .block:first-child .rowList .fee {
  letter-spacing: 0.32rem;
}
.price .block:first-child .rowList .fee em {
  line-height: 7rem;
}
.price .block:first-child .rowList .fee small {
  line-height: 7rem;
}
.price .note {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.5rem;
  letter-spacing: 0.128rem;
  text-align: right;
  white-space: nowrap;
}
.price .tagList {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.price .tagList li {
  padding: 0.5rem 1.5rem;
  background-color: #db3333;
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.5rem;
  letter-spacing: 0.128rem;
  white-space: nowrap;
}
.price .otherTxt {
  width: 100%;
  padding: 0 1rem;
  text-align: center;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: normal;
}
.price .otherTxt .em {
  font-size: 2.7rem;
  color: #db3333;
}

/*------------------------------------------------------------
	price（SP）
------------------------------------------------------------*/
@media all and (max-width: 896px) {
  .price {
    padding: 6rem 0;
  }
  .price .bg {
    display: none;
  }
  .price .content {
    gap: 2.5rem;
  }
  .price .ttlBox {
    gap: 2rem;
  }
  .price .lead {
    font-size: 1.5rem;
    line-height: 2.2rem;
    letter-spacing: 0.075rem;
    text-align: center;
  }
  .price .priceBox {
    gap: 1.9rem;
    border-radius: 1rem;
  }
  .price .block {
    padding: 0 2.5rem;
    gap: 1.5rem;
  }
  .price .bar {
    font-size: 2rem;
    line-height: 4rem;
    letter-spacing: 0.16rem;
  }
  .price .rowList .name {
    padding: 1rem;
    font-size: 1.7rem;
    line-height: 2.2rem;
    letter-spacing: 0.136rem;
    text-align: center;
  }
  .price .block:first-child .rowList .name {
    width: auto;
  }
  .price .block:nth-child(2) .rowList li:first-child .name,
  .price .block:nth-child(3) .rowList .name {
    font-size: 1.7rem;
    letter-spacing: 0.136rem;
  }
  .price .rowList .fee {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .price .rowList .fee em {
    font-size: 3rem;
    line-height: 2rem;
  }
  .price .rowList .fee small {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .price .rowList .fee .sub {
    font-size: 1rem;
    line-height: 2rem;
  }
  .price .rowList .fee .sub em {
    font-size: 1rem;
  }
  .price .block:first-child .rowList .fee em,
  .price .block:first-child .rowList .fee small {
    line-height: 4rem;
  }
  .price .note {
    font-size: 1rem;
    line-height: 2rem;
    letter-spacing: 0.08rem;
  }
  .price {
    /* タグは2行に折り返し */
  }
  .price .tagList {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  .price .tagList li {
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    line-height: 1.8rem;
    letter-spacing: 0.096rem;
  }
  .price .inner.right {
    gap: 0.5rem;
  }
  .price .otherTxt {
    padding: 0;
    font-size: 1.5rem;
    line-height: 2.7rem;
  }
  .price .otherTxt .em {
    font-size: 2rem;
    line-height: 2.7rem;
  }
}
/*------------------------------------------------------------
	process　制作の流れ
------------------------------------------------------------*/
.process {
  padding: 12rem 0;
  background-color: #fff;
  background-image: radial-gradient(#eaeaea 1px, transparent 1px);
  background-size: 5px 5px;
  background-position: 0 0;
  /* Figmaはセクション固定高2100px（中身は上下センター） */
}
@media all and (min-width: 897px) {
  .process {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 210rem;
    padding: 0;
  }
}
.process .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4.5rem;
}
.process .headLine01 .txtBox {
  white-space: nowrap;
}
.process {
  /* ステップ一覧 */
}
.process .stepList {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.process {
  /* 丸を貫く縦線 */
}
.process .stepList::before {
  content: "";
  position: absolute;
  left: 7.3rem;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 4px;
  background-color: #383838;
}
.process .stepList > li {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
  border: 2px solid #383838;
  border-radius: 0.8rem;
  background-color: #fff;
}
.process .stepList .num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15rem;
  height: 15rem;
  padding: 1rem;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 3rem;
  letter-spacing: 0.15rem;
  color: #fff;
  /* 150px枠の中央に100pxの黒丸 */
  background: radial-gradient(circle 5rem at 50% 50%, #383838 0 100%, transparent 0);
}
.process .stepList .textBox {
  flex: 1 0 0;
  min-width: 0;
  padding: 0.8rem 2rem 2.4rem 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.process .stepList h3 {
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 7rem;
  letter-spacing: 0.28rem;
  color: #db3333;
}
.process .stepList h3 .small {
  font-size: 2rem;
}
.process .stepList h3 .sp2 {
  letter-spacing: 0.735rem;
}
.process .stepList h3 .sp3 {
  letter-spacing: 0.455rem;
}
.process .stepList .textBox p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 3rem;
  letter-spacing: 0.16rem;
}
.process {
  /* ステップ1のみボタン付き */
}
.process .stepList .first .textBox {
  align-items: center;
  gap: 3rem;
  padding: 2.4rem 2rem 3.2rem 0;
}
.process .stepList .first .head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.process .stepList .btnList {
  display: flex;
  align-items: center;
  gap: 10rem;
}
.process .stepList .btnList a {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.4rem 3rem 1.4rem 2rem;
  border-radius: 5rem;
  color: #fff;
}
.process .stepList .btnList a:link, .process .stepList .btnList a:visited, .process .stepList .btnList a:hover {
  color: #fff;
}
@media (hover: hover) {
  .process .stepList .btnList a:hover {
    opacity: 0.75;
  }
}
.process .stepList .btnList .contact a {
  background-color: #db3333;
}
.process .stepList .btnList .line a {
  justify-content: space-between;
  gap: 2rem;
  width: 36.6rem;
  background-color: #41c15d;
}
.process .stepList .btnList .icon {
  display: block;
  width: 6rem;
  height: 6rem;
}
.process .stepList .btnList .txt {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: normal;
  letter-spacing: 0.176rem;
  white-space: nowrap;
}
.process .stepList .btnList .arrow {
  display: block;
  width: 0.707rem;
  height: 0.707rem;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  box-sizing: content-box;
}

/*------------------------------------------------------------
	faq　よくある質問
------------------------------------------------------------*/
.faq {
  position: relative;
  padding: 16rem 1rem;
  overflow: hidden;
  /* Figmaキャンバス上はFAQフレームとBlogが約50px重なっているため、下だけ詰めて間隔を合わせる */
}
@media all and (min-width: 897px) {
  .faq {
    padding-bottom: 11rem;
  }
}
.faq .bg {
  position: absolute;
  z-index: 0;
  display: block;
  width: 62.9rem;
  height: 69.0697rem;
}
.faq .bg01 {
  left: calc(50% - 113.1rem);
  top: 0;
}
.faq .bg02 {
  left: calc(50% + 37.9rem);
  top: 141.53rem;
  transform: rotate(180deg);
}
.faq .inner {
  position: relative;
  z-index: 1;
  width: 117.9rem;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;
}
.faq .headLine01 .txtBox {
  width: auto;
  white-space: nowrap;
}
.faq .faqList {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.faq .group {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.faq .group h3 {
  font-weight: 700;
  font-size: 3rem;
  line-height: normal;
  letter-spacing: 0.15rem;
}
.faq .qaList {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.faq .qaList > li {
  border: 2px solid #383838;
  border-radius: 0.8rem;
  background-color: #fff;
  overflow: hidden;
}
.faq .qBtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 3rem;
  background-color: #fff;
  text-align: left;
}
.faq .qBox {
  display: flex;
  align-items: center;
  gap: 2.7rem;
}
.faq .qBtn .mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  padding-bottom: 0.5rem;
  color: #db3333;
  font-weight: 700;
  font-size: 4rem;
  line-height: 3rem;
  letter-spacing: 0.32rem;
}
.faq .qBtn .txt {
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 3rem;
  letter-spacing: 0.224rem;
}
.faq .qBtn .icon {
  flex-shrink: 0;
  width: 5rem;
  font-weight: 700;
  font-size: 3rem;
  line-height: 3rem;
  letter-spacing: 0.24rem;
  text-align: center;
}
.faq .answer {
  display: none;
}
.faq .answerIn {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  padding: 1rem 3rem;
  background-color: #f2f2f2;
  border-radius: 0 0 8px 8px;
}
.faq .answerIn .figBox {
  position: relative;
  flex-shrink: 0;
  width: 11.8rem;
  height: 12.8rem;
}
.faq .answerIn .cat {
  position: absolute;
  left: 0;
  bottom: -1rem;
  width: 6.5rem;
  height: auto;
}
.faq .answerIn .cat.cat02 {
  width: 7rem;
}
.faq .answerIn .mark {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  padding-bottom: 0.5rem;
  background-color: #db3333;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 3rem;
  line-height: 3rem;
  letter-spacing: 0.24rem;
}
.faq {
  /* 吹き出しのしっぽ。底辺を円の内側に潜り込ませ、先端を左下（猫の方向）へ出す */
}
.faq .answerIn .mark::after {
  content: "";
  position: absolute;
  left: 0.03rem;
  top: 3.58rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.3rem 0.5rem 0 0.5rem;
  border-color: #db3333 transparent transparent transparent;
  transform: rotate(48.68deg);
}
.faq .answerIn .txt {
  flex: 1;
  font-weight: 500;
  font-size: 2.5rem;
  line-height: normal;
}

/*------------------------------------------------------------
	blog　ブログ
------------------------------------------------------------*/
.blog {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6.5rem;
  height: 96rem;
  padding: 12rem 0;
  border-top: 3px solid #383838;
  border-bottom: 3px solid #383838;
}
.blog .blogList {
  display: grid;
  grid-template-columns: repeat(2, 38.4rem);
  gap: 3rem;
}
.blog .blogList a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 日付＋タイトル2行がちょうど収まる余白にしている */
  gap: 1rem;
  height: 34rem;
  padding-bottom: 1.5rem;
  border: 2px solid #383838;
  border-radius: 0.5rem 0.5rem 0 0.5rem;
  background-color: #fff;
}
@media (hover: hover) {
  .blog .blogList a:hover {
    opacity: 0.75;
  }
}
.blog .blogList .img {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  height: 22rem;
  /* アイキャッチ有りの画像は縮まないので、ロゴのダミー側も縮ませない。
     縮ませると記事によって画像の高さが変わってしまう */
  flex-shrink: 0;
  border-bottom: 2px solid #383838;
  /* 枠線の内側カーブ（外側半径 − 線幅）に合わせる */
  border-radius: calc(0.5rem - 2px) calc(0.5rem - 2px) 0 0;
  background-color: #e9e9e9;
}
.blog {
  /* アイキャッチが設定されている記事はロゴの代わりに画像を敷く */
}
.blog .blogList .img.hasImg {
  gap: 0;
}
.blog .blogList .img.hasImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog .blogList .img .mark {
  display: block;
  width: 6.0957rem;
  height: 5rem;
}
.blog .blogList .logoTxt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 24.3722rem;
}
.blog .blogList .lead {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: normal;
  letter-spacing: 0.08rem;
}
.blog .blogList .name {
  display: block;
  width: 16.2253rem;
}
.blog .blogList .textBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 0 2rem;
  overflow: hidden;
}
.blog .blogList .date {
  padding: 0.3rem 0.7rem;
  background-color: #db3333;
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.1rem;
  letter-spacing: 0.128rem;
}
.blog .blogList .ttl {
  /* カードの高さが決まっているので、長いタイトルは2行までに収める */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: 100%;
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 3rem;
  letter-spacing: 0.176rem;
}
.blog .blogList .corner {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: block;
  width: 2rem;
  height: 2rem;
}
.blog {
  /* 右側のテキスト */
}
.blog .ttlBox {
  width: 32rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5.4rem;
}
.blog .ttlBox .headLine01 .txtBox {
  width: auto;
  white-space: nowrap;
}
.blog .blog .headLine01 {
  gap: 3rem;
}
.blog .ttlBox .textBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}
.blog .catch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.blog .catch span {
  padding: 0.5rem 1rem;
  background-color: #383838;
  color: #fff;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: normal;
}
.blog .ttlBox .txt {
  font-weight: 700;
  font-size: 2rem;
  line-height: 3rem;
  letter-spacing: 0.1rem;
}

/*------------------------------------------------------------
	contact　お問い合わせ
	※ボタンの li にも .contact を使っているため要素セレクタで限定する
------------------------------------------------------------*/
section.contact {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 84rem;
  padding: 6rem 1rem;
  overflow: hidden;
}
section.contact .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
section.contact .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.contact .bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
}
section.contact .box {
  position: relative;
  z-index: 1;
  width: 117.6rem;
  max-width: 100%;
  padding: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4.5rem;
  border-radius: 0.8rem;
  background-color: rgba(219, 51, 51, 0.85);
}
section.contact .headLine01 .txtBox {
  width: auto;
  white-space: nowrap;
}
section.contact .textBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
  color: #fff;
}
section.contact .textBox .catch {
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 4.5rem;
  letter-spacing: 0.17rem;
}
section.contact .textBox .txt {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 4rem;
  letter-spacing: 0.11rem;
}
section.contact .btnList {
  display: flex;
  align-items: center;
  gap: 10rem;
}
section.contact .btnList a {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.4rem 3rem 1.4rem 2rem;
  border-radius: 5rem;
}
@media (hover: hover) {
  section.contact .btnList a:hover {
    opacity: 0.75;
  }
}
section.contact .btnList .contactBtn a {
  background-color: #fff;
  color: #db3333;
}
section.contact .btnList .contactBtn a:link, section.contact .btnList .contactBtn a:visited, section.contact .btnList .contactBtn a:hover {
  color: #db3333;
}
section.contact .btnList .line a {
  justify-content: space-between;
  gap: 2rem;
  width: 36.6rem;
  background-color: #41c15d;
  color: #fff;
}
section.contact .btnList .line a:link, section.contact .btnList .line a:visited, section.contact .btnList .line a:hover {
  color: #fff;
}
section.contact .btnList .icon {
  display: block;
  width: 6rem;
  height: 6rem;
}
section.contact .btnList .txt {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: normal;
  letter-spacing: 0.176rem;
  white-space: nowrap;
}
section.contact .btnList .arrow {
  display: block;
  width: 0.707rem;
  height: 0.707rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  box-sizing: content-box;
}

/*------------------------------------------------------------
	process / faq / blog / contact / footer（SP）
------------------------------------------------------------*/
@media all and (max-width: 896px) {
  /* process */
  .process {
    padding: 6rem 0;
  }
  .process .content {
    gap: 2.5rem;
  }
  .process .stepList {
    gap: 2rem;
  }
  .process .stepList::before {
    left: 3.5rem;
  }
  .process .stepList > li {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    padding: 2rem 1rem;
    border-radius: 0.5rem;
  }
  .process .stepList .num {
    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    padding: 0;
    font-size: 2.2rem;
    line-height: 4rem;
    letter-spacing: 0.11rem;
    white-space: nowrap;
    background: #383838;
    border-radius: 50%;
  }
  .process .stepList .textBox {
    width: 100%;
    padding: 0;
    gap: 1.5rem;
  }
  .process .stepList h3 {
    font-size: 2rem;
    line-height: 3rem;
    letter-spacing: 0.16rem;
  }
  .process .stepList h3 .small {
    font-size: 1.5rem;
    line-height: 3rem;
  }
  .process .stepList h3 .sp2,
  .process .stepList h3 .sp3 {
    letter-spacing: 0.16rem;
  }
  .process .stepList .textBox p {
    font-size: 1.5rem;
    line-height: 2.2rem;
    letter-spacing: 0.12rem;
  }
  .process .stepList .first .textBox {
    align-items: flex-start;
    gap: 1.5rem;
    padding: 0;
  }
  .process .stepList .btnList {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    width: 100%;
    padding-top: 1.5rem;
  }
  .process .stepList .btnList a {
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1.5rem 0.7rem 1rem;
  }
  .process .stepList .btnList .line a {
    gap: 1rem;
    width: 100%;
  }
  .process .stepList .btnList .icon {
    width: 3rem;
    height: 3rem;
  }
  .process .stepList .btnList .txt {
    font-size: 1.5rem;
    letter-spacing: 0.12rem;
  }
  /* faq */
  .faq {
    padding: 6rem 1rem;
  }
  .faq .bg {
    display: none;
  }
  .faq .inner {
    width: 33.5rem;
    gap: 2.5rem;
  }
  .faq .faqList {
    gap: 3.2rem;
  }
  .faq .group {
    gap: 2rem;
  }
  .faq .group h3 {
    font-size: 2rem;
    letter-spacing: 0.1rem;
  }
  .faq .qaList {
    gap: 2rem;
  }
  .faq .qaList > li {
    border-radius: 0.5rem;
  }
  .faq .qBtn {
    align-items: flex-start;
    padding: 1rem;
  }
  .faq .qBox {
    gap: 1rem;
  }
  .faq .qBtn .mark {
    width: 3rem;
    height: 3rem;
    font-size: 2.4rem;
    line-height: 2.4rem;
    letter-spacing: 0.192rem;
  }
  .faq .qBtn .txt {
    font-size: 1.5rem;
    line-height: 2.4rem;
    letter-spacing: 0.12rem;
  }
  .faq .qBtn .icon {
    width: 3rem;
    font-size: 2.4rem;
    line-height: 2.4rem;
  }
  .faq .answerIn {
    align-items: flex-start;
    padding: 1rem 1.5rem;
  }
  .faq .answerIn .figBox {
    width: 9.3rem;
    height: 11.1rem;
  }
  .faq .answerIn .cat {
    width: 5.5rem;
  }
  .faq .answerIn .cat.cat02 {
    width: 6.5rem;
  }
  .faq .answerIn .mark {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 2rem;
    line-height: 3rem;
    letter-spacing: 0.16rem;
  }
  .faq .answerIn .mark::after {
    top: 2.51rem;
    left: 0.02rem;
    border-width: 0.91rem 0.35rem 0 0.35rem;
  }
  .faq .answerIn .txt {
    font-size: 1.5rem;
  }
  /* blog */
  .blog {
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 3rem;
    height: auto;
    padding: 6rem 2rem;
    border-width: 2px;
  }
  .blog .ttlBox {
    width: 100%;
    gap: 3rem;
  }
  .blog .ttlBox .textBox {
    gap: 2rem;
  }
  .blog .catch {
    flex-direction: row;
    gap: 0;
    padding: 0.5rem 1rem;
    background-color: #383838;
  }
  .blog .catch span {
    padding: 0;
    background: none;
    font-size: 1.8rem;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .blog .ttlBox .txt {
    font-size: 1.5rem;
    line-height: 2.2rem;
    letter-spacing: 0.075rem;
  }
  .blog .blogList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    width: 100%;
  }
  .blog .blogList a {
    /* タイトル2行分（4.4rem）が入る高さ */
    height: 19rem;
    border-radius: 0.8rem 0.8rem 0 0.8rem;
  }
  .blog .blogList .img {
    height: 9rem;
    gap: 0.4rem;
    /* 枠線（外側0.8rem・線幅2px）の内側カーブに合わせて角の途切れを防ぐ */
    border-radius: calc(0.8rem - 2px) calc(0.8rem - 2px) 0 0;
  }
  .blog .blogList .img .mark {
    width: 2.9957rem;
    height: 2.4572rem;
  }
  .blog .blogList .logoTxt {
    width: auto;
    gap: 0.6rem;
  }
  .blog .blogList .lead {
    font-size: 0.8rem;
    letter-spacing: 0.04rem;
  }
  .blog .blogList .name {
    width: 9.2252rem;
  }
  .blog .blogList .textBox {
    padding: 0 1rem;
  }
  .blog .blogList .date {
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: 0.08rem;
  }
  .blog .blogList .ttl {
    font-size: 1.3rem;
    line-height: 2.2rem;
    letter-spacing: 0.104rem;
  }
  .blog .blogList .corner {
    width: 1rem;
    height: 1rem;
  }
  /* contact */
  section.contact {
    height: auto;
    padding: 6rem 1rem;
  }
  section.contact .bg::after {
    background-color: rgba(0, 0, 0, 0.4);
  }
  section.contact .box {
    width: 33.5rem;
    padding: 2.5rem 2.4rem 4rem;
    gap: 2.5rem;
  }
  section.contact .textBox .catch {
    font-size: 2.1rem;
    line-height: 3rem;
    letter-spacing: 0.105rem;
  }
  section.contact .textBox .txt {
    font-size: 1.5rem;
    line-height: 2.5rem;
    letter-spacing: 0.075rem;
  }
  section.contact .btnList {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
  }
  section.contact .btnList a {
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 3rem 0.7rem 2rem;
  }
  section.contact .btnList .line a {
    gap: 1rem;
    width: 100%;
  }
  section.contact .btnList .icon {
    width: 3rem;
    height: 3rem;
  }
  section.contact .btnList .txt {
    font-size: 1.5rem;
    letter-spacing: 0.12rem;
  }
}
/*------------------------------------------------------------
	タブレット（563px〜896px）
	SPレイアウトを 1rem = 15px まで拡大した上で、
	コンテンツ列（37.5rem＝562px）を中央寄せする。
	セクションの背景色・背景画像は画面幅いっぱいのまま保つ
------------------------------------------------------------*/
@media all and (min-width: 563px) and (max-width: 896px) {
  /* コンテンツ列を中央寄せ（絶対配置の基準になる箱も含む） */
  .mainVisual .inner,
  .data .content,
  .works01 .content,
  .works02 .content,
  .services .inner,
  .price .content,
  .process .content,
  .blog .listBox,
  .blog .ttlBox,
  .about .imgBox {
    width: 37.5rem;
    margin-left: auto;
    margin-right: auto;
  }
  /* Works は .ttlBox が display: contents のため、
     セクションの左右パディングでコンテンツ列に合わせる */
  section.works {
    padding-left: calc((100% - 33.5rem) / 2);
    padding-right: calc((100% - 33.5rem) / 2);
  }
  /* ファーストビュー：背景画像と流れる帯もコンテンツ列に合わせる */
  .mainVisual .bgBox {
    background-position: 50% 33.2rem;
  }
  .mainVisual .bgBox .line05 {
    left: calc(50% - 26.75rem);
  }
  .mainVisual .bgBox .line06 {
    left: calc(50% - 14.75rem);
  }
  .mainVisual .bgBox .line07 {
    left: calc(50% - 30.75rem);
  }
  .mainVisual .bgBox .line08 {
    left: calc(50% - 6.75rem);
  }
}