/* Common Components / Message / Forms / Service / Pricing / Sliders
 * レスポンシブ指定は各セクションの直後。ファイルの読み込み順はfunctions.phpで管理。
 */

/* =========================================
   MESSAGE SECTION
========================================= */

.message-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-surface-beige);
  padding: 0;
}

/* 黒カーブ背景 */
.message-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--message-curve-bg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 400%;
  z-index: -2;
}

/* コンパス */
.message-section::after {
  content: "";
  position: absolute;
  top: 52px;
  right: max(20px, calc((100vw - 1200px) / 2 - 90px));
  width: min(28vw, 520px);
  aspect-ratio: 1 / 1;
  background-image: var(--message-compass-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.20;
  pointer-events: none;
  z-index: -1;
}

.message-section__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 680px;
  padding: 56px 40px 48px;
}

.message-section__figure {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34.5%;
  max-width: 410px;
  z-index: 2;
}

.message-section__person img {
  display: block;
  width: 100%;
  height: auto;
}

/* 名札：見た目は全ブレークポイント共通。
   各メディアクエリでは位置・幅・余白（--message-profile-padding）のみ上書きする */
.message-section__profile {
  position: absolute;
  top: 145px;
  left: 40px;
  z-index: var(--message-profile-z);

  width: fit-content;
  max-width: none;
  padding: var(--message-profile-padding);

  background: var(--message-profile-bg);
  color: var(--message-profile-color);
  border-radius: var(--message-profile-radius);
  text-align: center;
}

.message-section__company {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.08rem + 0.35vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: 0.08em;
  margin-bottom: 0.65em;
  position: relative;
  padding-bottom: 0.8em;
}

.message-section__company::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 144, 42, 1) 0%, rgba(235, 210, 160, 1) 55%, rgba(201, 144, 42, 0.8) 100%);
}

.message-section__position,
.message-section__name {
  display: inline-block;
  vertical-align: baseline;
}

.message-section__position {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 0.88rem + 0.15vw, 1.05rem);
  letter-spacing: 0.08em;
  margin-right: 0.8em;
}

.message-section__name {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 0.872rem + 1.43vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.message-section__content {
  z-index: 2;
  width: calc(100% - 430px);
  margin-left: auto;
  padding-top: clamp(9.375rem, 4.664rem + 10.75vw, 11.25rem);
}

.message-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
  color: var(--color-red);
  font-family: var(--font-en);
  font-size: 2rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.message-section__eyebrow::after {
  content: "";
  width: 88px;
  height: 2px;
  background: var(--color-red);
  opacity: 0.85;
}

.message-section__eyebrow span {
  font-size: clamp(1.9rem, 1.35rem + 0.35vw, 2.2rem);
}

.message-section__title {
  font-family: var(--font-serif);
  color: var(--color-text-strong);
  font-weight: 500;
  font-size: clamp(2.35rem, 1.5rem + 1.3vw, 4.1rem);
  line-height: 1.55;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}

.message-section__title span {
  color: var(--color-red);
}

.message-section__lead {
  max-width: 770px;
  color: var(--color-base);
  font-size: clamp(1rem, 0.93rem + 0.1vw, 1.06rem);
  line-height: 2;
  letter-spacing: 0.05em;
  margin-bottom: 28px;
}

.message-flow {
  width: 100%;
}

.message-flow__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 100px;
  align-items: center;
}

.message-flow__item {
  position: relative;
  min-width: 0;
  text-align: center;
}

.message-flow__number {
    font-family: var(--font-en);
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--color-gold);
    position: absolute;
    top: -20px;
    left: -20px;
	z-index: 2;
}

.message-flow__image {
  width: 100%;
  max-width: 200px;
  padding: 10px;
  margin: 0 auto 10px;
  background: rgba(var(--color-white-rgb), 1.0);
  position: relative;
}

.message-flow__image::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -64px;
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-left: 28px solid rgba(var(--color-blue-rgb), 0.6);
  transform: translateY(-50%);
  z-index: 2;
}

.message-flow__item:last-child .message-flow__image::after {
  content: none;
}

/* Swiper本体のデフォルト overflow:hidden を解除
   （カードの box-shadow が Swiper コンテナ端で切れてしまうのを防ぐ。
   works-slider 等ほかの Swiper インスタンスに影響しないよう .message-flow__swiper に限定） */
.message-flow__swiper.swiper {
  overflow: visible !important;
}

/* Swiper化した制作の流れカード：ページネーションドット（980px以下のスワイプ表示時のみ表示） */
.message-flow__pagination {
  display: none;
}

@media screen and (max-width: 980px) {
  .message-flow__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    position: relative;
  }

  .message-flow__pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    background: rgba(var(--color-blue-rgb), 0.22);
    opacity: 1;
    border-radius: 999px;
    transition: width 0.25s ease, background 0.25s ease;
  }

  .message-flow__pagination .swiper-pagination-bullet-active {
    width: 24px;
    background: var(--color-blue);
  }
}

.message-flow__image img {
  display: block;
  width: 100%;
  height: auto;
}

.message-flow__body {
  padding: 0 0.25em;
}

.message-flow__title {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-blue);
}

.message-flow__text {
  margin: 0;
  font-size: clamp(0.8125rem, 0.75rem + 0.21vw, 0.9375rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--color-base);
}

/* =========================================
   MESSAGE SECTION PC調整版
   1200px以上
========================================= */

@media screen and (min-width: 1200px) {

  .message-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--color-surface-beige);
min-height: calc(100vh - 80px);
    /* HEROとの被りを避ける */
    margin-top: 0;
  }

  /* 黒カーブ・金エッジ */
  .message-section::before {
    content: "";
    position: absolute;
 top: clamp(-30px, calc(50px - 4.1667vw), 0px);
left: clamp(34.375rem, 12.292rem + 29.44vw, 47.625rem);
    width: min(2560px, 100vw);
    height: 100%;
    background-image: var(--message-curve-bg);
    background-repeat: no-repeat;
    background-position: center -70px;
    background-size: 100% auto;

    transform: translateX(-50%);
    z-index: -2;
    pointer-events: none;
  }

  /* 方位磁石 */
  .message-section::after {
    content: "";
    position: absolute;
    top: 92px;
    right: -80px;
    width: 480px;
    aspect-ratio: 1 / 1;
    background-image: var(--message-compass-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0.18;
    pointer-events: none;
    z-index: -1;
  }

  .message-section__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 660px;
    padding: 40px 0px 40px;
  }

  /* 人物エリア */
  /*
    1920〜1200pxの間はサイズ固定。
    右端はテキスト列(68%)から常に40pxの隙間を確保し、
    はみ出た左側(左肩側)は画面外に切れてOKな仕様。
    頭の高さがMESSAGE行と揃うよう幅433pxで逆算。
  */
  .message-section__figure {
    position: absolute;
    left: auto;
    right: calc(68% + 40px);
	bottom: -250px;
    width: 433px;
    max-width: none;
    z-index: 2;
  }

  .message-section__person img {
    display: block;
    width: 100%;
    height: auto;
  }

  .message-section__profile {
    top: auto;
    bottom: 100px;
    left: clamp(-100px, calc(300px - 20.8333vw), 50px);
    white-space: nowrap;
    --message-profile-padding: 1em 2em;
  }

  .message-section__company {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    position: relative;
  }

  .message-section__company::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(201, 144, 42, 1) 0%,
      rgba(235, 210, 160, 1) 55%,
      rgba(201, 144, 42, 0.8) 100%
    );
  }

  .message-section__position {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    margin-right: 0.8em;
  }

  .message-section__name {
    display: inline-block;
        font-family: var(--font-serif);
        font-size: 1.5rem;
        font-weight: 500;
        letter-spacing: 0.06em;
        line-height: 1.2;
  }

  /*
    右側本文
    人物を小さくしたぶん、本文を少し左に寄せる
  */
  .message-section__content {
    position: relative;
    z-index: 2;

    width: calc(100% - 32%);
    margin-left: auto;

    /*
      カーブを上にした分、本文も少し上げる
    */
    padding-top: 60px;
  }

  .message-section__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size:36px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    margin-bottom: 20px;
	text-align: center;
  }

  .message-section__title span {
    color: var(--color-red);
  }

  .message-section__lead {
    max-width: 760px;
    font-size: 1rem;
    line-height: 2;
    margin:0 auto 40px;
	text-align: center;
  }

}

/* =========================================
   PC 1199px〜981px
========================================= */
@media screen and (max-width: 1199px) and (min-width: 981px) {

.message-section::before {
background-size: contain;
    top: 0px;
    left: 0px;
}

  .message-section::after {
    top: 46px;
    right: 14px;
    width: 350px;
    opacity: 0.18;
  }

  .message-section__inner {
    min-height: 620px;
   padding: 0px 80px 40px 0px;
  }

  .message-section__figure {
    width: 28%;
    max-width: 290px;
	left:10%;
    top: 30px;
    bottom: auto;
    aspect-ratio: 433 / 780;
    overflow: hidden;
  }

  .message-section__profile {
    top: min(calc(14.14px + 37.35vw), 406.13px);
    left: 50px;
    white-space: nowrap;
    --message-profile-padding: 6px 11px;
  }

  .message-section__company {
    font-size: 14px;
  }

  .message-section__position {
    font-size: 11px;
  }

  .message-section__name {
    font-size: 18px;
  }

  .message-section__content {
  position: relative;
    padding-top: 128px;
  }

  .message-section__title {
    font-size: clamp(2.6rem, 1.8rem + 1vw, 3.3rem);
  }

  .message-section__lead {
    font-size: 1rem;
    line-height: 1.95;
  }

  .message-flow__list {
    display: flex;
    align-items: stretch;
    gap: 24px;
  }

  .message-flow__item {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    align-self: stretch;
  }

  .message-flow__body {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .message-flow__text {
    flex: 1;
  }

  /* この幅の矢印と .message-flow__image の位置は
     後方の FRONT PAGE セクションで .message-flow__item:not(:last-child)::after として定義 */

}

/* =========================================
   通常タブレット 980px〜701px
========================================= */
@media screen and (max-width: 980px) and (min-width: 701px) {

  .message-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--message-curve-bg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 150%;
    z-index: -2;
}

  .message-section::after {
    top: 38px;
    right: 4px;
    width: 260px;
    opacity: 0.16;
  }

  .message-section__inner {
    min-height: auto;
    padding: 0px 80px 40px 0px;
  }

  .message-section__figure {
    left: 0px;
    top: 40px;
    bottom: auto;
    width: 40%;
    max-width: none;
    aspect-ratio: none;
    height: calc(573.05px - 10.029vw);
    overflow: hidden;
  }

  .message-section__profile {
    top: calc(449.16px - 7.16vw);
    left: 10px;
    max-width: 170px;
    white-space: nowrap;
    --message-profile-padding: 4px 8px;
  }

  .message-section__company {
    font-size: 12px;
  }

  .message-section__position {
    font-size: 9px;
  }

  .message-section__name {
    font-size: 14px;
  }

  .message-section__content {
  position: relative;
    width: 52%;
	padding-top: 140px;
  }

  .message-section__title {
    font-size: clamp(1.438rem, 0.024rem + 3.23vw, 2rem);
    line-height: 1.55;
  }

  .message-section__lead {
    font-size: 0.98rem;
    line-height: 1.9;
  }

  /* 制作の流れカード：レイアウト（幅・はみ出し量）は後方の
     「標準タブレット：980px〜701px」ブロック（.message-flow の breakout 指定）が担当するため、
     ここでは message-section 側（写真・名札・テキスト）のみ扱う */
}

/* =========================================
   大きなスマホ 700px〜481px
========================================= */
@media screen and (max-width: 700px) and (min-width: 481px) {
  /* セクション全体を覆う黒カーブは使わず、写真ブロック自身に背景として持たせる */
  .message-section::before {
    content: none;
  }

  .message-section::after {
    top: auto;
    right: -10px;
    bottom: 150px;
    width: 220px;
    opacity: 0.14;
  }

  /* テキスト → 写真(黒カーブ) → カード の順に縦積みにするため、
     .message-section__inner を flex column にして各要素を order で並べ替える */
  .message-section__inner {
    display: flex;
    flex-direction: column;
    padding: 28px 20px 32px;
    min-height: 0;
  }

  /* content 自体は箱を持たせず、中の子要素を直接 inner の flex アイテムにする */
  .message-section__content {
    display: contents;
  }

  .message-section .section__eyebrow {
    order: 1;
    margin-bottom: 20px;
  }

  .message-section__title {
    order: 1;
    font-size: clamp(2.2rem, 1.5rem + 1.8vw, 2.85rem);
    line-height: 1.65;
    margin-bottom: 20px;
  }

  .message-section__lead {
    order: 1;
    font-size: 1rem;
    line-height: 1.95;
    margin-bottom: 0;
  }

  /* 写真：スマホ専用の合成済み画像（人物＋黒カーブ背景が最初から入っている）を
     フル幅で画面端まで伸ばして、そのまま表示する */
  .message-section__figure {
    order: 2;
    position: relative;
    left: auto;
    top: clamp(-5.0rem, -8.995rem + 9.13vw, -5rem);
    bottom: auto;
    width: calc(100% + 40px);
    max-width: none;
    margin: 28px -20px 0;
    aspect-ratio: 866 / 807;
    height: auto;
    overflow: hidden;
    z-index: 1;
    background: none;
  }

  .message-section__person {
    padding-top: 0;
    height: 100%;
  }

  .message-section__person img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin-left: 0;
    object-fit: cover;
    display: block;
  }

  /* 名札：写真右側の黒い余白の上に、暗い箱を重ねて配置する。
     margin-bottom は詰めて、カードとの間を写真の下でなく名札の見た目の下端基準に近づける */
  .message-section__profile {
    order: 3;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    align-self: flex-end;
    margin: -39% 6% 0 0;
    width: auto;
    max-width: 250px;
    --message-profile-padding: 14px 18px;
  }

  .message-flow {
    order: 4;
    width: calc(100% + 22px);
    margin-top: 28px;
    margin-right: -22px;
    overflow: visible;
  }

  .message-flow__item {
    padding: 60px 20px 20px;
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: 0 10px 24px rgba(var(--color-blue-rgb), 0.08);
    /* カード全体を90%程度に縮小（Swiperのslide自体のtransformに勝つようimportant） */
    transform: scale(0.90) !important;
    transform-origin: top center;
  }

  .message-flow__number {
    /* 画像の上に重ねて中央配置 */
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%) !important;
    font-size: 3.4rem;
    text-align: center;
  }

  .message-flow__image {
    max-width: 230px;
    margin-bottom: 18px;
  }

  /* 矢印（三角形）を画像の縦中央・右隅に */
  .message-flow__image::after {
    right: clamp(-7.813rem, 6.601rem + -47.95vw, -14.375rem);
  }

  .message-flow__title {
    font-size: 1.25rem;
  }

  .message-flow__text {
    font-size: 0.95rem;
    line-height: 1.9;
  }

  .button-center-wrap {
    order: 5;
  }
}

/* =========================================
   通常スマホ 480px〜351px
========================================= */
@media screen and (max-width: 480px) and (min-width: 351px) {
  .message-section::before {
    content: none;
  }

  .message-section::after {
    top: auto;
    right: -34px;
    bottom: 170px;
    width: 190px;
    opacity: 0.12;
  }

  .message-section__inner {
    display: flex;
    flex-direction: column;
    padding: 24px 16px 28px;
    min-height: 0;
  }

  .message-section__content {
    display: contents;
  }

  .message-section .section__eyebrow {
    order: 1;
    gap: 12px;
    margin-bottom: 18px;
  }

  .message-section .section__eyebrow::after {
    width: 64px;
  }

  .message-section__title {
    order: 1;
    font-size: clamp(1.95rem, 1.6rem + 1.2vw, 2.35rem);
    line-height: 1.7;
    margin-bottom: 16px;
  }

  .message-section__lead {
    order: 1;
    font-size: 0.96rem;
    line-height: 1.95;
    margin-bottom: 0;
  }

  .message-section__figure {
    order: 2;
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: calc(100% + 32px);
    max-width: none;
    margin: 24px -16px 0;
    aspect-ratio: 866 / 807;
    height: auto;
    overflow: hidden;
    z-index: 1;
    background: none;
  }

  .message-section__person {
    padding-top: 0;
    height: 100%;
  }

  .message-section__person img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin-left: 0;
    object-fit: cover;
    display: block;
  }

  .message-section__profile {
    order: 3;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    align-self: flex-end;
    margin: -39% 5% 0 0;
    width: 180px;
    --message-profile-padding: 12px 16px;
  }

  .message-section__name {
    font-family: var(--font-serif);
    font-size: clamp(1.313rem, 0.802rem + 2.33vw, 1.5rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
  }

  .message-section__company {
    font-size: 1rem;
  }

  .message-section__position {
    margin: 0 0 0.2em;
    font-size: 0.84rem;
  }

  .message-flow {
    order: 4;
    width: calc(100% + 22px);
    margin-top: 24px;
    margin-right: -22px;
    overflow: visible;
  }

  .message-flow__item {
    padding: 48px 18px 20px;
    border-radius: 18px;
    background: var(--color-white);
    box-shadow: 0 10px 24px rgba(var(--color-blue-rgb), 0.08);
    /* カード全体を90%程度に縮小（Swiperのslide自体のtransformに勝つようimportant） */
    transform: scale(0.9) !important;
    transform-origin: top center;
  }

  .message-flow__number {
    /* 画像の上に重ねて中央配置 */
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%) !important;
    font-size: 3.4rem;
    text-align: center;
  }

  .message-flow__image {
    max-width: 230px;
    margin-bottom: 18px;
  }

  /* 矢印（三角形）をカードとカードの隙間の中央に、少し重なるように配置 */
  .message-flow__image::after {
    right: calc(126.43px - 43.49vw);
  }

  .message-flow__title {
    font-size: 1.25rem;
  }

  .message-flow__text {
    font-size: 0.95rem;
    line-height: 1.9;
  }

  .button-center-wrap {
    order: 5;
  }
}

/* =========================================
   小さなスマホ 350px〜320px
========================================= */
@media screen and (max-width: 350px) {
  .message-section::before {
    content: none;
  }

  .message-section::after {
    top: auto;
    right: -36px;
    bottom: 158px;
    width: 168px;
    opacity: 0.12;
  }

  .message-section__inner {
    display: flex;
    flex-direction: column;
    padding: 20px 10px 24px;
    min-height: 0;
  }

  .message-section__content {
    display: contents;
  }

  .message-section .section__eyebrow {
    order: 1;
    gap: 10px;
    margin-bottom: 14px;
  }

  .message-section .section__eyebrow::after {
    width: 48px;
  }

  .message-section .section__eyebrow span {
    font-size: 1.45rem;
  }

  .message-section__title {
    order: 1;
    font-size: 1.7rem;
    line-height: 1.75;
    margin-bottom: 14px;
  }

  .message-section__lead {
    order: 1;
    font-size: 0.92rem;
    line-height: 1.9;
    margin-bottom: 0;
  }

  /* 写真：スマホ専用の合成済み画像（人物＋黒カーブ背景が最初から入っている）を
     フル幅で画面端まで伸ばして、そのまま表示する */
  .message-section__figure {
    order: 2;
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: calc(100% + 20px);
    max-width: none;
    margin: 22px -10px 0;
    aspect-ratio: 866 / 807;
    height: auto;
    overflow: hidden;
    z-index: 1;
    background: none;
  }

  .message-section__person {
    padding-top: 0;
    height: 100%;
  }

  .message-section__person img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin-left: 0;
    object-fit: cover;
    display: block;
  }

  /* 名札：写真右側の黒い余白の上に、暗い箱を重ねて配置する */
  .message-section__profile {
    order: 3;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    align-self: flex-end;
    margin: -39% 4% 0 0;
    width: auto;
    max-width: 168px;
    --message-profile-padding: 10px 14px;
  }

  .message-section__company {
    font-size: 0.85rem;
    margin-bottom: 0.55em;
  }

  .message-section__position {
    font-size: 0.72rem;
    margin: 0 0 0.15em;
  }

  .message-section__name {
    font-size: 18px;
  }

  .message-flow {
    order: 4;
    width: calc(100% + 16px);
    margin-top: 22px;
    margin-right: -16px;
    overflow: visible;
  }

  .message-flow__item {
    padding: 44px 14px 20px;
    border-radius: 18px;
    background: var(--color-white);
    box-shadow: 0 10px 24px rgba(var(--color-blue-rgb), 0.08);
    text-align: center;
    /* カード全体を90%程度に縮小（Swiperのslide自体のtransformに勝つようimportant） */
    transform: scale(0.9) !important;
    transform-origin: top center;
  }

  .message-flow__number {
    /* 画像の上に重ねて中央配置 */
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%) !important;
    font-size: 3rem;
    line-height: 1;
    text-align: center;
  }

  .message-flow__image {
    width: 100%;
    max-width: 190px;
    margin: 0 auto 16px;
  }

  /* 矢印（三角形）をカードとカードの隙間の中央に、少し重なるように配置 */
  .message-flow__image::after {
    right: calc(103.8px - 43.49vw);
  }

  .message-flow__body {
    padding: 0;
  }

  .message-flow__title {
    margin: 0 0 10px;
    font-size: 1.12rem;
    line-height: 1.45;
    text-align: center;
  }

  .message-flow__text {
    font-size: 0.88rem;
    line-height: 1.8;
    text-align: left;
  }

  .button-center-wrap {
    order: 5;
  }
}

/* 制作の流れカードのレイアウトは、700px〜481px／480px〜351px／350px以下の
   各専用ブロック（Swiper化済み）がそれぞれ担当するため、ここでの共通上書きは廃止 */

/* =========================================
   Contact Form 7
   お問い合わせフォーム
========================================= */

.contact-section__form {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.cf7,
.contact-form {
  width: 100%;
}

/* .cf7__list / __row / __label / __field は
   「定義リスト型テーブル」セクションに集約済み */

.cf7__label-text {
  display: inline-block;
}

/* 必須・任意ラベル */
.cf7__required,
.cf7__optional {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  color: var(--color-white);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.cf7__required {
  background: var(--color-red);
}

.cf7__optional {
  background: var(--color-text-weak);
}

/* 入力欄 */
.cf7 input[type="text"],
.cf7 input[type="email"],
.cf7 input[type="tel"],
.cf7 input[type="url"],
.cf7 input[type="number"],
.cf7 select,
.cf7 textarea {
  width: 100%;
  min-height: 52px;

  padding: 12px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-base);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.cf7 textarea {
  min-height: 220px;
  resize: vertical;
}

.cf7 input::placeholder,
.cf7 textarea::placeholder {
  color: var(--color-text-weak);
}

/* 文字数カウンター（お問い合わせ内容） */
.cf7__counter {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--color-text-weak);
  text-align: right;
}

.cf7__counter-current {
  font-weight: 700;
}

.cf7__counter.is-near {
  color: var(--color-gold);
}

.cf7__counter.is-max {
  color: var(--color-red);
}

.cf7 input:focus,
.cf7 select:focus,
.cf7 textarea:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(var(--color-blue-rgb), 0.12);
  background: var(--color-white);
}

/* 郵便番号 */
.cf7__zip {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 260px;
}

.cf7__zip-mark {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--color-blue);
}

/* 住所 */
.cf7__address {
  display: grid;
  gap: 12px;
}

/* チェックボックス */
.cf7 .wpcf7-checkbox {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.cf7 .wpcf7-list-item {
  display: block;
  margin: 0;
}

.cf7 .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
  cursor: pointer;
  line-height: 1.7;
}

.cf7 input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.35em;
  accent-color: var(--color-blue);
}

.cf7 .wpcf7-list-item-label {
  display: inline-block;
}

/* プライバシーポリシー */
.cf7__privacy {
  display: grid;
  gap: 10px;
}

.cf7__privacy-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.cf7__privacy-text a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cf7__privacy-text a:hover {
  color: var(--color-gold);
}

/* エラー・補足メッセージ */
.cf7 .wpcf7-not-valid-tip {
  margin-top: 8px;
  color: var(--color-red);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
}

.cf7 .wpcf7-response-output {
  margin: 32px 0 0;
  padding: 18px 22px;
  border-radius: 10px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* ボタン */
.cf7__button-wrapper {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 40px;
}

.cf7__button-submit-wrap {
  display: contents;
}

.cf7__button {

  appearance: none;
  min-width: 220px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.cf7__button--reset {
  background: var(--color-white);
  border-color: var(--color-border-strong);
  color: var(--color-ink-mute);
}

.cf7__button--submit,
.cf7 input[type="submit"].cf7__button--submit {
  background: var(--color-blue);
  color: var(--color-white);
}

.cf7__button:hover {
  transform: translateY(-2px);
  opacity: 0.88;
}

.cf7 .wpcf7-spinner {
  margin-left: 12px;
}

.contact-form--confirm .cf7__label {
  align-items: center;
}

.contact-form--confirm .cf7__confirm-value {
  min-height: 68px;
  display: flex;
  align-items: center;
  color: var(--color-base);
  font-weight: 500;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.contact-form--confirm .cf7__confirm-message {
  display: block;
  white-space: pre-wrap;
  line-height: 2;
}

.contact-form--confirm .cf7__button-wrapper {
  margin-top: 40px;
}

.contact-form--confirm .wpcf7-form-control-wrap {
  width: 100%;
}

/* previousタグで生成される戻るボタン対策 */
.contact-form--confirm input[type="button"].cf7__button--reset,
.contact-form--confirm input[type="submit"].cf7__button--submit {
  appearance: none;
}

/* =========================================
   700px以下
========================================= */

@media screen and (max-width: 700px) {
  .contact-section__form {
    max-width: 100%;
  }

  /* .cf7__row / __label / __field の700px指定は
     「定義リスト型テーブル」セクションに集約済み */

  .cf7 input[type="text"],
  .cf7 input[type="email"],
  .cf7 input[type="tel"],
  .cf7 input[type="url"],
  .cf7 input[type="number"],
  .cf7 select,
  .cf7 textarea {
    min-height: 54px;
    font-size: 16px;
  }

  .cf7 textarea {
    min-height: 200px;
  }

  .cf7 .wpcf7-checkbox {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cf7__button-wrapper {
    flex-direction: column-reverse;
    gap: 12px;
    margin-top: 32px;
  }

  .cf7__button {
    width: 100%;
    min-width: 0;
  }

    .contact-form--confirm .cf7__confirm-value {
    min-height: auto;
    display: block;
  }
}

/* =========================================
   480px以下
========================================= */

@media screen and (max-width: 480px) {
  /* padding は「定義リスト型テーブル」セクションに集約済み */

  .cf7__label {
    gap: 8px;
  }

  .cf7__required,
  .cf7__optional {
    min-width: 38px;
    padding: 0.22em 0.6em;
    font-size: 12px;
  }

  .cf7__zip {
    max-width: 100%;
  }
}

/* =========================================
   Service Mega Grid
   サービスカテゴリ一覧
========================================= */

.service-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.service-mega-grid .mega-menu-item {
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid var(--color-grey);
}

.service-mega-grid .mega-cat-link {
  display: block;
}

/* ul / li にclassを追加 */
.mega-post-list__list {
  list-style: none;
  padding: 0;
  margin: 10px 20px 20px;
}

.mega-post-list__item {
  font-size: 12px;
  margin-bottom: 4px;
  line-height: 1.4;
  text-align: left;
}

.mega-post-list__item a {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
  text-decoration: none;
}

.service-mega-grid .mega-cat-link .mega-img img {
    width: 100%;
    height: 330px;
    object-fit: cover;
	}

.mega-post-list__item a::before {
  content: "-";
  margin-right: 0.5em;
}

.mega-post-list__item a:hover {
  text-decoration: underline;
  opacity: 0.7;
}

/* 700px以下は1カラム */
@media screen and (max-width: 700px) {
  .service-mega-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ========================================
   制作実績スライダー  works-slider
======================================== */
.works-slider {
  position: relative;
  width: 100%;
  max-width: 1920px;
}

.works-slider__wrap {
  position: relative;
  width: 100%;
  padding-left: 80px;
    padding-right: 80px;
}
.works-slider__swiper {
  width: 100%;
  overflow: hidden;
}
.works-slider__swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}
.works-slider__slide {
  flex-shrink: 0;
  height: auto;
  display: flex;
}
.works-slider__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  background: var(--color-white);
  color: inherit;
  text-decoration: none;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(var(--color-blue-rgb), 0.10);
  border: 1px solid var(--color-grey);
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}
.works-slider__card:hover {
  transform: translateY(-8px); /* ホバーでジャンプ */
  box-shadow: 0 12px 36px rgba(var(--color-blue-rgb), 0.16);
  border-color: var(--color-red); /* 赤色のボーダーになる */
  opacity: 1;
}
.works-slider__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: var(--color-surface-beige);
  flex-shrink: 0;
}
.works-slider__image img,
.works-slider__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.works-slider__card:hover .works-slider__image img {
  transform: scale(1.05);
}
.works-slider__noimage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: var(--color-text-weak);
  letter-spacing: 0.05em;
  background: var(--color-surface-beige);
}
.works-slider__body {
  flex: 1;
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.works-slider__client {
  margin: 0;
  font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
  line-height: 1.55;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--color-blue);
}
.works-slider__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}
.works-slider__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.works-slider__tag--industry {
  background: rgba(var(--color-blue-rgb), 0.08);
  color: var(--color-blue);
}
.works-slider__tag--type {
  background: rgba(230, 0, 18, 0.08);
  color: var(--color-red);
}
.works-slider__arrow {
  position: absolute;
  top: calc(50% - 22px);
  z-index: 5;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-blue);
  box-shadow: 0 4px 16px rgba(var(--color-blue-rgb), 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  font-size: 16px;
}
.works-slider__arrow:hover {
  background: var(--color-blue);
  color: var(--color-white);
}
.works-slider__arrow--prev {
  left: 8px;
}
.works-slider__arrow--next {
  right: 8px;
}
.works-slider__pagination {
  position: absolute !important;
  bottom: -20px !important; /* 矢印の下にドットを配置 */
  left: 0;
  right: 0;
}
.works-slider__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 !important;
  background: rgba(var(--color-blue-rgb), 0.22);
  opacity: 1;
  border-radius: 999px;
  transition: width 0.25s ease, background 0.25s ease;
}
.works-slider__pagination .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--color-blue);
}

@media screen and (max-width: 1199px) {
  .works-slider__wrap {
    padding: 0 60px;
  }

  .works-slider__nav {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  /* スライダー全体をホバーした時に矢印とドットを表示 */
  .works-slider__wrap:hover .works-slider__nav {
    opacity: 1;
    visibility: visible;
  }

  /* 700px以下で矢印を消す既存コードを活かす場合、ドットだけは残すなら別途調整 */
  .works-slider__arrow {
    display: none;
  }
  .works-slider__wrap:hover .works-slider__pagination {
    opacity: 1;
    visibility: visible;
  }
}
@media screen and (max-width: 980px) {
  .works-slider {
    margin-top: 64px;
  }
  .works-slider__wrap {
    padding: 0 48px;
  }
  .works-slider__arrow {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}
@media screen and (max-width: 700px) {
  .works-slider {
    margin-top: 48px;
  }

  .works-slider__wrap {
    padding: 0 20px;
  }
  .works-slider__arrow {
    display: none;
  }
  .works-slider__card {
    border-radius: 5px;
  }
  .works-slider__body {
    padding: 12px 14px 16px;
  }
  .works-slider__client {
    font-size: 0.9375rem;
  }
  .works-slider__tag {
    font-size: 10px;
    padding: 4px 8px;
  }
}
@media screen and (max-width: 480px) {

  .works-slider__wrap {
    padding: 0 16px;
  }
}

/* =========================================
   Pricing Plan Section (共通料金プラン)
========================================= */
.pricing-plan-section {
  background: var(--color-white);
}

.pricing-plan__wrapper {
  margin: 0 auto;
}

/* --- カードレイアウト (PC: 3カラム) --- */
.pricing-plan__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch; /* すべてのカードの底を水平に揃える */
  margin-bottom: 40px;
}

.pricing-plan__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-grey);
  border-radius: 15px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  margin-top: 20px;
  margin-bottom: 0;
}

a.pricing-plan__card:hover {
  box-shadow: 0 10px 24px rgba(var(--color-blue-rgb), 0.12);
  transform: translateY(-4px);
}

/* 人気プランの強調 */
.pricing-plan__card.is-popular {
  border: 2px solid var(--color-blue);
  box-shadow: 0 12px 30px rgba(var(--color-blue-rgb), 0.1);
  margin-top: 0; /* マージンをなくすことで、上だけ飛び出させる */
  margin-bottom: 0;
  z-index: 2;
}

.pricing-plan__badge {
  position: absolute; /* 中のレイアウトを押し出さないように絶対配置 */
  top: -2px; /* 枠線にぴったり被せる */
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-blue);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 6px 0;
  border-radius: 0 0 10px 10px;
  width: 150px;
  letter-spacing: 0.1em;
  z-index: 3;
}

/* カード内部 */
.pricing-plan__card-inner {
  padding: 40px 24px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 人気プランの中身を下げて、他のカードとタイトル位置を水平に揃える */
.pricing-plan__card.is-popular .pricing-plan__card-inner {
  padding-top: 64px; /* 通常の40px + 飛び出し分24px */
}

.pricing-plan__name {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.5em;
}

/* 価格部分 */
.pricing-plan__price-wrap {
  text-align: center;
  margin-bottom: 20px;
  color: var(--color-blue);
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.pricing-plan__price-prefix {
  font-size: 0.85rem;
  font-weight: 600;
  margin-right: 4px;
}

.pricing-plan__price-num {
  font-family: var(--font-en);
  font-size: clamp(2.2rem, 1.8rem + 1vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
}

.pricing-plan__price-suffix {
  font-size: 1rem;
  font-weight: 600;
  margin-left: 4px;
}

.pricing-plan__price-suffix small {
  font-size: 0.75rem;
}

/* キャッチコピー */
.pricing-plan__copy {
  display: inline-flex;
  margin: 0 auto 24px;
  padding: 4px 20px;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  color: var(--color-gold);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

/* お試しプラン等（3の倍数番目）用の緑枠 */
.pricing-plan__card:nth-child(3n) .pricing-plan__copy {
  border-color: var(--color-green);
  color: var(--color-green);
}

/* 特徴リスト */
.pricing-plan__features {
  margin: 0;
  list-style: none;
}

.pricing-plan__features li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.pricing-plan__features li i {
  color: var(--color-gold);
  margin-top: 0.35em;
  margin-right: 10px;
  font-size: 14px;
  flex-shrink: 0;
}

/* ターゲット層 */
.pricing-plan__target {
  background: var(--color-surface-warm);
  padding: 14px 16px;
  font-weight: 700;
  text-align: center;
  border-top: 1px solid rgba(var(--color-black-rgb), 0.03);
  margin-top: auto;
  border-radius: 0 0 15px 15px;
}

.pricing-plan__card.is-popular .pricing-plan__target {
  background: var(--color-surface-cream);
}
.pricing-plan__card:nth-child(3n) .pricing-plan__target {
  background: var(--color-surface-green);
}

.shared-remarks {
  background: var(--color-surface);
  padding: 16px 24px;
  border-radius: 12px;
  margin-top: 24px; /* どのセクションでも使いやすいように少し余白を広げています */
}

.shared-remarks p {
  display: flex;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--color-base);
  margin: 0 0 4px;
}

.shared-remarks p:last-child {
  margin-bottom: 0;
}

.shared-remarks .remark-mark {
  flex-shrink: 0;
  margin-right: 0.5em;
}
/* =========================================
   レスポンシブ
========================================= */

/* タブレット (980px〜701px): 2カラム */
@media screen and (max-width: 980px) and (min-width: 701px) {
  .pricing-plan__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* タブレット時もマージンの関係性は維持 */
  .pricing-plan__card.is-popular {
    margin-top: 0;
    margin-bottom: 0;
  }
  .pricing-plan__card:nth-child(3) {
    grid-column: span 2;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* スマホ (700px以下): 1カラム・横スクロール */
@media screen and (max-width: 700px) {
  .pricing-plan__cards {
      gap: 20px;
	width: clamp(27.563rem, 11.227rem + 54.34vw, 35rem);
        margin: 0 auto;
        padding: 40px var(--container-padding-xs) 0;
  }
  }

  @media screen and (max-width: 480px) {

  .pricing-plan__cards {
	width: 100%;
	padding: 0;
  }
  }

  /* スクロールバーを非表示（iOS/Chrome） */
  .pricing-plan__cards::-webkit-scrollbar {
    display: none;
  }

  .pricing-plan__card {
    flex: 0 0 85%;
	}

/* =========================================
   ご利用の流れ (Usage Flow)
========================================= */
.usage-flow {
  width: 100%;
  overflow: hidden; /* 横揺れを完全に防止 */
}

.usage-flow__list {
  /* カウンターを初期化 */
  counter-reset: flow-counter;
  list-style: none;

  /* PC (1200px以上) は3カラムグリッド */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 100px; /* カード間の余白 */
  align-items: stretch;
}

.usage-flow__item {
  border: 1px solid var(--color-grey);
  position: relative;
  min-width: 0;
  counter-increment: flow-counter;
  border-radius: 15px;
  padding: 40px 0px 0;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
}

/* STEPバッジ */
.usage-flow__item::before {
  content: "STEP " counter(flow-counter, decimal-leading-zero);
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--color-white);
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  background: var(--color-gold);
  padding: 0.5rem 0.75rem;
  border-radius: 15px 0 0;
}

/* ★ 矢印のデザイン (PC標準設定) */
.usage-flow__item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -64px; /* gap(100px)の真ん中付近に配置 */
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-left: 28px solid rgba(var(--color-blue-rgb), 0.6);
  transform: translateY(-50%);
  z-index: 2;
  display: block;
}

/* 最後の項目の矢印は消す */
.usage-flow__item:last-child::after {
  display: none !important;
}

.usage-flow__image {
  width: 100%;
  max-width: 200px;
  padding: 10px;
  margin: 0 auto 10px;
  position: relative;
}

.usage-flow__image img {
  display: block;
  width: 100%;
  height: auto;
}

.usage-flow__body {
  padding: 0 20px 20px;
  flex: 1; /* 高さを揃える */
}

.usage-flow__title {
  margin: 0 0 10px;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-blue);
}

.usage-flow__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--color-base);
}

/* 下部キャッチコピー */
.usage_flow_catch {
  background: var(--color-surface-cream);
  padding: 14px 16px;
  font-weight: 700;
  text-align: center;
  border-top: 1px solid rgba(var(--color-black-rgb), 0.03);
  margin-top: auto;
  border-radius: 0 0 15px 15px;
}

/* 偶数番目の色変更 */
.usage-flow__item:nth-child(even) .usage_flow_catch {
  background: rgb(238, 248, 238);
}

/* =========================================
   レスポンシブ: 1199px以下（横スクロール化）
========================================= */
@media screen and (max-width: 1199px) {
  .usage-flow__list {
    display: flex; /* グリッドを解除して横一列にする */
    overflow-x: auto;
    overflow-y: hidden;
    gap: 48px; /* ★矢印が収まるようにカード間の隙間を確保 */
    padding-bottom: 20px; /* スクロールバーと影用の余白 */

    /* スワイプ時にピタッと止める設定 */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    /* スクロールバー非表示 */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .usage-flow__list::-webkit-scrollbar {
    display: none;
  }

  .usage-flow__item {
    box-shadow: 0 8px 24px rgba(var(--color-blue-rgb), 0.08);
  }

  /* ★ タブレット時の矢印サイズ・位置調整 */
  .usage-flow__item::after {
    right: -38px;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 24px solid rgba(var(--color-blue-rgb), 0.6);
  }
}

/* =========================================
   レスポンシブ: タブレット (701px 〜 1199px)
========================================= */
@media screen and (min-width: 701px) and (max-width: 1199px) {
  .usage-flow__item {
    /* 画面幅から余白(48px)を引いて2等分し、画面内にピッタリ2枚収める */
    flex: 0 0 calc((100% - 48px) / 2);
    min-width: calc((100% - 48px) / 2);
    scroll-snap-align: start; /* 左端でピタッとスナップさせる */
  }
}

/* =========================================
   レスポンシブ: スマホ (700px以下)
========================================= */
@media screen and (max-width: 700px) {
  .usage-flow__list {
    gap: 36px; /* ★スマホ用の矢印スペース */
  }

  .usage-flow__item {
    /* メインの1枚 ＋ 次のカードの端っこをチラ見せさせる（82%） */
    flex: 0 0 82%;
    min-width: 82%;
    scroll-snap-align: start;
  }

  /* ★ スマホ時の矢印サイズ・位置調整 */
  .usage-flow__item::after {
    right: -27px;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 18px solid rgba(var(--color-blue-rgb), 0.6);
  }

  .usage-flow__title {
    font-size: 1.1rem;
  }

  .usage-flow__text {
    font-size: 0.9rem;
  }
}
/* =========================================
   共通：備考欄（ぶら下がりインデント）
========================================= */
.shared-remarks {
  background: var(--color-surface);
  padding: 16px 24px;
  border-radius: 12px;
  margin-top: 24px;
}

.shared-remarks p {
  display: flex;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--color-base);
  margin: 0 0 4px;
}

.shared-remarks p:last-child {
  margin-bottom: 0;
}

.shared-remarks .remark-mark {
  flex-shrink: 0;
  margin-right: 0.5em;
}

/* =========================================
   Selling Policy Section (制作ポリシー・動画版)
========================================= */
.selling-policy {
 position: relative;
    width: 100%;
    max-width: 1920px;
	min-height: 480px;
    margin: 20px auto 0;
    padding: 0px;
    color: var(--color-base);
    overflow: hidden;
    background: var(--color-white);
}

/* 左側ビジュアル（PC時は絶対配置） */
.selling-policy__visual {
  position: absolute;
  left: 0;
  top: 0;
  width: 60%;
  height: 100%;
  z-index: 1;
}

.selling-policy__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center; /* 動画内の人物・画面を残すため右側基準でトリミング */
}

/* 動画と右側の白背景をなじませるグラデーション（右端が白） */
.selling-policy__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
background: linear-gradient(
  105deg,
  rgba(var(--color-white-rgb), 0) 0%,
  rgba(var(--color-white-rgb), 0) 42%,
  rgba(var(--color-white-rgb), 0.2) 54%,
  rgba(var(--color-white-rgb), 0.5) 65%,
  rgba(var(--color-white-rgb), 1) 80%,
  rgba(var(--color-white-rgb), 1) 100%
);
}

.selling-policy__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-right: 80px;
  display: flex;
  justify-content: flex-end; /* テキストを右側に寄せる */
}

/* 右側テキストエリア */
.selling-policy__head {
  width: 55%;
  padding: 60px 0px;
}

/* 上部のアイブロウ */
.selling-policy__eyebrow {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  font-weight: 700;
  color: var(--color-blue);
  margin-bottom: 12px;
  letter-spacing: 0.08em;
}

/* 下部の金色のコンセプトテキスト */
.selling-policy__concept {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;

    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;

    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-gold);
    letter-spacing: 0.08em;

    border-top: 1px solid var(--color-gold);
    border-bottom: 1px solid var(--color-gold);
    padding: 0.25em;

    line-height: 1.8;
    text-align: left;
    overflow-wrap: anywhere;
}

@media screen and (max-width: 700px) {
.selling-policy__inner {
  padding-right: 80px;
}

.selling-policy__concept {
  font-size: clamp(1.313rem, 1.155rem + 0.79vw, 1.5rem);
  line-height: 1.5;
  padding: 0.75em 0.25em;
}

}

/* =========================================
   レスポンシブ (980px以下で縦積みカラム)
========================================= */
@media screen and (max-width: 1199px) {
  .selling-policy {
    padding: 20px 0 0;
	margin: 0 auto;
  }

  .selling-policy__visual {
    position: relative;
    width: 100%;
    height: 380px;
  }

  .selling-policy__video {
    object-position: center 20%;
  }

  /* 縦積みの場合は、グラデーションを下方向（下が白）に変更して自然に繋げる */
  .selling-policy__visual::before {
    background: linear-gradient(
      180deg,
      rgba(var(--color-white-rgb), 0) 0%,
      rgba(var(--color-white-rgb), 0) 60%,
      rgba(var(--color-white-rgb), 1) 100%
    );
  }

  .selling-policy__inner {
    justify-content: center;
	width: clamp(33.75rem, 7.357rem + 60.24vw, 52.5rem);
	        padding-right: 0px;
			padding-top: 40px;
  }

  .selling-policy__head {
    width: 100%;
    padding-left: 0;
    padding-top: 0;
  }
}

/* =========================================
   レスポンシブ (700px以下)
========================================= */
@media screen and (max-width: 700px) {
  .selling-policy__visual {
    height: 300px;
  }

    .selling-policy__inner {
  width: clamp(27.563rem, 11.227rem + 54.34vw, 35rem);
  margin: 0 auto;
    padding: 40px var(--container-padding-xs) 0;
  }
}

/* =========================================
   レスポンシブ (480px以下)
========================================= */
@media screen and (max-width: 480px) {
  .selling-policy {
    padding: 20px 0 0;
  }
  .selling-policy__inner {
  width: 100%;
  }
  .selling-policy__visual {
    height: 240px;
  }
}
/* =========================================
   Trouble Section (お悩み・ご相談セクション)
========================================= */

.trouble {
background-image: url("../images/trouble-bg.webp");
background-position: center center;
background-size: contain;
}

.trouble__inner {
  padding-right: 80px;
}

@media screen and (max-width: 700px) {
.trouble__inner {
   padding-right: var(--container-padding-sp);
}
}

/* --- タイトル周り --- */
.trouble__title {
  /* display: flex; と align-items などを削除し、ベースラインのズレを解消 */
  margin-bottom: var(--space-40);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.5; /* ルビがあるので少し余裕を持たせる */
}

@media screen and (max-width: 980px) {
.trouble__title{
   font-size: clamp(1.5rem, 0.563rem + 2.14vw, 1.875rem);
}
}

/* タイトル両端の水色斜線（\ /） */
.trouble__title::before,
.trouble__title::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1.2em;
  background-color: var(--color-blue);
  border-radius: 2px;
  vertical-align: middle; /* 追加：テキストの縦中央に合わせる */
}
.trouble__title::before {
  transform: rotate(-25deg);
  margin-right: 16px; /* 追加：gapの代わりに余白を設ける */
}
.trouble__title::after {
  transform: rotate(25deg);
  margin-left: 16px; /* 追加：gapの代わりに余白を設ける */
}

@media screen and (max-width: 700px) {

  .trouble__title {
    position: relative;

    /* h2を横いっぱいではなく、文字幅にする */
    display: table;
    margin-left: auto;
    margin-right: auto;

    /* 左右の斜線分＋文字から1em離す余白 */
    padding-left: calc(1em + 3px);
    padding-right: calc(1em + 3px);

    font-size: clamp(1.5rem, 1.143rem + 1.79vw, 1.875rem);
    line-height: 1.5;
    text-align: center;
  }

  .trouble__title::before,
  .trouble__title::after {
    content: "";
    position: absolute;
    top: 50%;

    width: 3px;

    /* 2行になったタイトル全体の高さに合わせる */
    height: calc(100% - 0.2em);

    background-color: var(--color-blue);
    border-radius: 5px;
  }

  .trouble__title::before {
    left: 0;
    transform: translateY(-50%) rotate(-25deg);
  }

  .trouble__title::after {
    right: 0;
    transform: translateY(-50%) rotate(25deg);
  }
}

@media screen and (max-width: 480px) {
    .trouble__title {
        padding-left: calc(1em + 10px);
        padding-right: calc(1em + 10px);
		font-size: clamp(1.25rem, 0.75rem + 2.5vw, 1.5rem);
    }

	    .trouble__title::before, .trouble__title::after {
        top: 60%;
        height: calc(100% - 2em);
    }
}

/* 「悩みなら」の上のドットルビ */
.trouble__title-dot {
  -webkit-text-emphasis: filled dot var(--color-blue);
  text-emphasis: filled dot var(--color-blue);
}

/* --- カードリスト（グリッドレイアウト） --- */
.trouble__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-20);
}

/* --- カード本体 --- */
.trouble__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-grey);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(var(--color-black-rgb), 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

/* ホバー時のカード浮き上がりアニメーション */
.trouble__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(var(--color-blue-rgb), 0.12);
}

/* --- アイコン --- */
.trouble__icon {
  /* 伸び縮みを完全に禁止し、サイズを固定する強い指定 */
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  min-width: 30px; /* 念押しの縮小防止 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
}
.trouble__icon::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f058";
  color: var(--color-blue);
  font-size: 30px;
  line-height: 1;
  display: block;
  letter-spacing: 0;
  font-style: normal;
}

/* --- テキストエリア --- */
.trouble__text-wrap {
  flex-grow: 1;
}

.trouble__item-desc {
  font-weight: 700;
  color: var(--color-base);
  line-height: 1.7;
  font-size: 1rem;
}

/* --- 下部訴求エリア --- */
.trouble__footer {
  text-align: center;
  margin-top: var(--space-40);
}

.trouble__remarks {
  font-size: var(--font14-size);
  color: var(--color-base);
  margin-bottom: 12px;
  line-height: 1.8;
}

.trouble__consult {
  font-size: var(--font18-size);
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.05em;
}

/* =========================================
   レスポンシブ調整
========================================= */

/* タブレット (980px以下): 2カラムへ */
@media screen and (max-width: 980px) {
  .trouble__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 480px) {
    .trouble__list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
/* =========================================
   Merit Section (ユニゾンに依頼するメリット)
========================================= */
.merit-section {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 60px auto;
  display: flex;
  overflow: hidden;
}

/* 左側 48% */
.merit-section__inner {
  width: 55%;
  /* 既存の1200pxコンテナの中央配置と左端を揃える計算式 */
  padding-left: max(var(--container-padding-pc), calc((100vw - var(--width-pc)) / 2));
  position: relative;
  z-index: 2;
}

/* POINTリスト */
.merit-section__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.merit-section__item {
  display: flex;
  align-items: center;
  background: var(--color-white);
  border: 1px solid var(--color-grey);
  border-radius: 10px;
  padding: 20px 24px;
  box-shadow: 0 4px 15px rgba(var(--color-blue-rgb), 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.merit-section__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(var(--color-blue-rgb), 0.08);
}

/* アイコンバッジ（二重枠線の再現） */
.merit-section__item-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-white);
  flex-shrink: 0;
  margin-right: 24px;
  border: 2px solid var(--color-white); /* 内側の白枠 */
  outline: 2px solid var(--color-gold);
  font-weight: 700;
}

.merit-section__item-badge-text {
  font-size: 18px;
  font-family: var(--font-en);
  line-height: 0.8;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.merit-section__item-badge-num {
  font-size: 30px;
  font-family: var(--font-en);
  line-height: 0.8;
}

.merit-section__item-body {
  flex-grow: 1;
}

.merit-section__item-title {
  font-size: 1.3125rem;;
  font-weight: 700;
  color: var(--color-blue);
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.merit-section__item-desc {
  font-size: 1rem;
  color: var(--color-base);
}

/* --- 右側 50%：画像エリア --- */
.merit-section__visual {
  position: absolute;
  right: 0;
  top: 0;
  width: 42%;
  height: 100%;
  z-index: 1;
}

/* 自動的に切り抜かれる形を設定 */
.merit-section__visual-inner {
  width: 100%;
  height: 100%;
  /* 上側の角丸を小さめ、下側の角丸を大きめにすることでなめらかなカーブを作ります */
  border-top-left-radius: 120px;
  border-bottom-left-radius: 250px;
  overflow: hidden;
}

.merit-section__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
 object-position: center center;
  /* ▼▼ ここからアニメーション用の追記 ▼▼ */
  transform: scale(1.4); /* JSの初期値と合わせる（読み込み時のカクつき防止） */
  transform-origin: center center; /* ズームの基準点を中央に設定 */
  will-change: transform; /* ブラウザにアニメーションを事前通知して動作を軽くする */
}

/* =========================================
   レスポンシブ
========================================= */
@media screen and (max-width: 1199px) {

.merit-section {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0px auto 60px;
  padding: 0;
  flex-direction: column;
  overflow: hidden;
}

.merit-section__visual {
order: 1;
  width: 100%;
  height: 420px;
   position: relative;
}

  .merit-section__inner {
  order: 2;
  width: clamp(33.75rem, 7.357rem + 60.24vw, 52.5rem);
    padding-left: 0px;
    padding-right: 0px;
	padding-top: 40px;
	margin: 0 auto;
	 border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
  }
  .merit-section__visual-inner {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

}

/* タブレット（縦積みに変更） */
@media screen and (max-width: 980px) {

  .merit-section__visual {
    width: 100%;
    height: 450px;
    right: auto;
    top: auto;
  }

}

/* スマホ */
@media screen and (max-width: 700px) {

  .merit-section__inner {
     width: clamp(27.563rem, 11.227rem + 54.34vw, 35rem);
  margin: 0 auto;
    padding: 40px var(--container-padding-xs) 0;
  }

  .merit-section__item {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px;
  }

   .merit-section__item-badge {
    margin-right: auto;
	margin-left: auto;
    margin-bottom: 10px;
  }

  .merit-section__visual {
    height: 350px;
  }
}

/* 小さいスマホ */
@media screen and (max-width: 480px) {
  .merit-section__inner {
    width: 100%;
  }

  .merit-section__visual {
    height: 280px;
  }

}

/* =========================================
   Product Section (制作できるもの)
========================================= */

.product-section {
  background-color: var(--color-skyblue);
}

/* グリッドレイアウト（PC基本は3カラム） */
.product-section__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* カード本体 */
.product-section__card {
  background: var(--color-white);
  border: 1px solid var(--color-grey);
  border-radius: 10px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ホバーアクション：ジャンプしてボーダーが赤色になる */
.product-section__card:hover {
  transform: translateY(-8px);
  border-color: var(--color-red);
  box-shadow: 0 12px 24px rgba(var(--color-black-rgb), 0.08);
}

.product-section__card-title {
   font-size: 21px;
  font-weight: 700;
  color: var(--color-blue);
  margin: 0 auto 24px;
  letter-spacing: 0.05em;
  display: block;
  width: fit-content;
  max-width: 100%;
  text-align: left;
  line-height: 1.6;
}

@media screen and (max-width: 980px) {
.product-section__card-title {
   font-size: clamp(1.313rem, 1.222rem + 0.45vw, 1.5rem);
   }
}

.product-section__card-image {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.product-section__card-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 画像なし (NO IMAGE) の場合の表示 */
.product-section__noimage {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-weak);
  font-family: var(--font-en);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}

.product-section__card-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-base);
  margin: 0;
  width: 100%;
  text-align: left;
}

/* --- 価格表示エリア --- */
.product-section__card-price-wrap {
  width: 100%;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-section__price-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

/* オレンジ色の長方形ラベル */
.product-section__price-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 1em;
  border: 1px solid var(--color-orange);
  color: var(--color-orange);
  font-size: 0.9rem;
  white-space: nowrap;
  line-height: 1em;
}

.product-section__price-amount {
  display: flex;
  align-items: baseline;
  color: var(--color-base);
}

/* 数字と「〜」はオレンジ色 */
.product-section__price-amount .num,
.product-section__price-amount .unit,
.product-section__price-amount .tilde {
  color: var(--color-orange);
}

/* 数字フォントとサイズ */
.product-section__price-amount .num {
  font-family: var(--font-en);
  font-size: clamp(1.8rem, 1.5rem + 1vw, 2rem);
  line-height: 1;
  padding-top: 4px;
}

/* 「円」は小さめ */
.product-section__price-amount .unit {
  font-size: 1.2rem;
  font-weight: 700;
  margin-left: 4px;
}

/* 「〜」のフォント指定 */
.product-section__price-amount .tilde {
  margin: 0 2px;
}

/* 「（税別）」は円より90%のサイズ */
.product-section__price-amount .tax {
  font-size: 0.7em;
  color: var(--color-base);
}

.product-section__price-amount .text-value {
  font-size: 0.9rem;
}

/* =========================================
   レスポンシブ
========================================= */

/* 980px〜701px: 2カラム */
@media screen and (max-width: 1199px) {
  .product-section__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 980px) {

  .product-section__price-item {
  flex-direction: column;
   margin-bottom: 1rem;
   gap:4px;
}
}

/* 700px以下: 1カラム */
@media screen and (max-width: 700px) {
  .product-section {
    padding: 60px 0;
  }

  .product-section__cards {
    grid-template-columns: 1fr;
    gap: 20px;
	width: clamp(27.563rem, 11.227rem + 54.34vw, 35rem);
        margin: 0 auto;
        padding: 40px var(--container-padding-xs) 0;
  }

  .product-section__card {
    padding: 24px 20px;
  }

}

@media screen and (max-width: 480px) {

  .product-section__cards {
  width: 100%;
  padding: 40px 0 0;
  }

}

/* --- カード内 備考 --- */
.product-section__card-remarks {
  width: 100%;
  margin-top: 20px;
}

.product-section__card-remarks-title {
  background-color: var(--color-grey);
  border-radius: 5px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-base);
  padding: 4px 0;
  margin-bottom: 12px;
}

/* item-list のカード内微調整（既存の ul.item-list を維持しつつ余白を詰める） */
.product-section__card-remarks .item-list {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
}
.product-section__card-remarks .item-list li {
  margin-bottom: 0.25em;
  color: var(--color-base);
}

/* --- カード全体下部 備考 --- */
.product-section__shared-remarks-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background-color: var(--color-surface-warm); /* 薄めのオレンジ背景 */
  border: 1px solid #fbe6cf;
  border-radius: 8px;
  padding: 20px 24px;
  margin-top: 40px;
}

/* 画像に合わせた「！」アイコン */
.product-section__shared-remarks-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: var(--color-blue);
  color: var(--color-white);
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}

.product-section__shared-remarks-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 自動「※」付与 ＆ ぶら下がりインデント */
.product-section__shared-remarks-item {
  position: relative;
  margin: 0;
  padding-left: 1em; /* ※の幅（全角1文字分）だけ左に余白をとる */
  text-indent: -1em; /* 1行目だけ1文字分左に戻す */
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-base);
}

.product-section__shared-remarks-item::before {
  content: "※";
  /* text-indentにより自動で指定位置に収まるため、特別な配置指定は不要 */
}

/* 700px以下のスマホ時微調整 */
@media screen and (max-width: 700px) {
  .product-section__shared-remarks-box {
    padding: 16px;
    gap: 12px;
  }
}