body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size:16px;
  line-height:1.75;
  letter-spacing:0.1em;
}

.section-page {
    margin-top: 0px;
}

main {
    max-width: 1440px;
    margin: 0 auto;
    color: #454A69;
}
/* ラッパー（角丸のカード風、背景はお好みで） */
.main-visual{
  margin-top: 20px;
  margin-bottom: 40px;           /* 下に余白を追加 */
}
.main-visual__wrap{
  position: relative;             /* 絶対配置の基準 */
  margin: 0 auto;
  background: #fff;               /* 任意：角丸の外側を白に */
  border-radius: 20px;
}

/* メイン画像（右端に揃える） */
.main-visual__main{
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
  margin-left: auto;  /* 右端に揃える */
  margin-right: 0;
}

/* 右上アクション（ヘッダー内に配置） */
.main-visual__actions{
  display: flex;             /* 横並びにする */
  align-items: center;
  gap: 16px;                  /* 電話とボタンの間隔 */
  z-index: 5;
}

.main-visual__tel{ 
    display:block; 
    width: 236px;
}

.tel-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #e9eff4;        /* 薄いグレー背景 */
  border-radius: 10px;        /* 角丸 */
  padding: 7px 20px;
  max-width: 300px;
}

.tel-box__icon {
  width: 36px;
  height: 36px;
}

.tel-box__text {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.tel-box__label {
  font-size: 14px;
  font-weight: 700;
  color: #555c75;   /* グレー文字 */
}

.tel-box__number {
  font-size: 20px;
  font-weight: 800;
  color: #454a69;   /* 濃いグレー */
}

/* 画像サイズは任意で微調整 */

.main-visual__cta-top img{
    display:block;
    width: 228px;
}
/* 上部CTAの高さを電話に合わせる */

/* ヘッダー部分の高さを内部要素に合わせる */
.main-visual__header{
  position: relative;
  height: 90px;  /* 電話番号画像の高さに合わせて調整 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}

/* 左上ロゴ：メイン画像の左上にずらして表示 */
.main-visual__logo{
  position: absolute;
  top: 20px;                    /* メイン画像の上端から20px下 */
  left: 20px;                   /* メイン画像の左端から20px右 */
  width: 373px;
  height: auto;
  z-index: 3;                   /* メイン画像より上に表示 */
}

/* 左下ボタン（重ね配置） */
.main-visual__cta-bottom{
  position: absolute;
  left: 15%;
  bottom: 3%;
  z-index: 2;
}
.main-visual__cta-bottom img{
  display:block;
  width: 363px;    /* お好みで調整（soudan_button.pngの実寸に合わせてもOK） */
}

/* ===== 既存のあなたのCSSはそのまま活かす ===== */

/* === SP用レイアウト（max:440px）=== */
@media (max-width: 768px) {
  body {
    margin: 0;
    font-size:14px;
    line-height:1.75;
    letter-spacing:0.1em;
  }

  main {
    max-width: 100%;
    width: 100%;    
  }

  /* ヘッダー：左右のパディング */
  .main-visual__header {
    padding: 10px 14px;
    gap: 12px;
    height: auto;
  }

  /* 電話ボックスはSPでは非表示（デザインに無い） */
  .main-visual__header .tel-box { 
    display: none;
  }

  /* ロゴの大きさ（行高さに合わせて控えめに） */
  .main-visual__logo {
    position: static;        /* 固定配置を解除して通常フローへ */
    width: 146px;
    height: auto;
    display: block;
  }

  /* 右上のボタンは画像そのまま縮小 */
  .main-visual__cta-top img {
    width: 170px;
    height: auto;
    display: block;
  }

  /* メイン枠：左 24px の内側余白、角丸＋影 */
  .main-visual__wrap {
    margin: 0px auto 24px;
    padding-left: 24px;             /* ← 指定どおり */
    border-radius: 20px;
    background: #fff;
    max-width: 100%;               /* iPhone系の見え方安定用（任意） */
  }

  /* メイン画像：左余白を差し引いてフィット */
  .main-visual__wrap picture,
  .main-visual__main {
    display: block;
    margin-left: auto;              /* 右側に寄せる（デザイン通り） */
    height: auto;
  }

  /* 下の重ねボタン：中央寄せ、下に少し余白 */
  .main-visual__cta-bottom {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    z-index: 2;
  }
  .main-visual__cta-bottom img {
    width: 260px;
    height: auto;
    display: block;
  }

  /* セクションの上下余白を少し詰める */
  .main-visual { 
    margin-top: 0px;
    margin-bottom: 24px;
  }
}


/* セクション全体 */
.concern {
  background: #E1E5E8;   /* グレー背景 */
  position: relative;
}

/* 下に▽を追加 */
.concern::after {
  content: '';
  position: absolute;
  bottom: -60px;                    /* 高さ分だけ下に出す */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 100px solid transparent;   /* 左辺：長くする */
  border-right: 100px solid transparent;  /* 右辺：長くする */
  border-top: 60px solid #E1E5E8;         /* 高さを高くする（背景色と同じ） */
}


/* 内側コンテナ */
.concern__inner {
  margin: 0 auto;
  position: relative;
  height: 468px;                  /* 固定の高さを設定 */
  display: flex;
  align-items: center;
  justify-content: center;        /* 中央に配置 */
  background-image: url('https://www.mirapro.net/assets/images/wheel_chair.jpg');
  background-size: contain;       /* 背景画像全体を表示 */
  background-position: 80px center;    /* 左に80px余白をつけて中央に配置 */
  background-repeat: no-repeat;
}

/* 車椅子画像 */
.concern__image {
  height: 100%;                   /* 親要素の高さに合わせる */
  display: flex;
  align-items: center;
}
.concern__image img {
  height: 100%;                   /* 親要素の高さに合わせる */
  width: auto;
  display: block;
  opacity: 0.9;                   /* 薄めにしたい場合（任意） */
}

/* 中央のテキスト部分 */
.concern__content {
  text-align: center;
}
.concern__title {
  font-size: 40px;
  font-weight: 700;
  margin: 0;
}
.concern__lead {
  font-size:24px;
  font-weight: 700;
  margin-bottom: 40px;
}

/* 吹き出し風カード */
.concern__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 1000px;             /* コンテナの最大幅を制限 */
  margin: 0 auto;                /* 中央揃え */
}
.concern__cards li {
  background: #fff;
  padding: 16px 24px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  flex: 0 0 auto;                /* コンテンツに応じて幅を自動調整 */
  max-width: calc(50% - 10px);   /* 最大幅を制限して1行に2つ配置 */
  gap: 5px;                     /* アイコンと文字の間隔 */
  display: flex;
  align-items: center;           /* アイコンと文字を縦中央揃え */
  text-align: left;
}
.concern__cards li:nth-child(3) {
  flex: 0 0 auto;                /* 3番目のカードもコンテンツに応じて幅を自動調整 */
  max-width: calc(50% - 10px);   /* 最大幅を制限 */
}
.concern__cards li img {
  width: 65px;                   /* アイコンサイズを調整 */
  flex-shrink: 0;                /* アイコンサイズを固定 */
}

.blue {
    color: #2B6EFF;
}

@media (max-width: 768px) {
/* ===== SP: 440px以下 ===== */
  .concern {                       /* セクションの上下余白 */
    padding: 24px 0;
    background: none;
  }

  .concern__inner {
    /* 画像の上にテキストとカードを重ねる一枚板 */
    height: auto;                  /* 固定高さは外す */
    padding: 24px;                 /* 画像指示どおり：内側余白24px */
    background-image: url('https://www.mirapro.net/assets/images/wheel_chair.jpg');
    background-size: cover;        /* 画面幅に合わせてトリミング */
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
  }

  .concern__content{
    position: relative;            /* ::beforeの上に置く */
    z-index: 1;
    text-align: center;
  }

  /* 見出しサイズ指定（ご要望） */
  .concern__title{
    font-size: 30px;               /* 「お悩み」 */
    font-weight: 700;
    margin: 0 0 8px;
  }
  .concern__lead{
    font-size: 20px;               /* 「このような課題はありませんか？」 */
    font-weight: 700;
    margin: 0 0 18px;
  }

  /* カードは縦積み・1列 */
  .concern__cards{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0;
    margin: 0;
  }
  .concern__cards li{
    max-width: none;
    padding: 12px 14px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(0,0,0,.08);
    font-size: 16px;
    font-weight: 700;
    color: #394157;
    white-space: normal;           /* 折り返し許可 */
    text-align: left;
  }
  .concern__cards li:nth-child(3) {
    max-width: none;
  }
  .concern__cards li img{
    width: 36px; height: auto;
    display: block;
    opacity: .9;
  }

  /* 強調の青（リンク風の色味） */
  .concern__cards .blue{
    color: #2f6fff;
  }

  /* セクション下の▽はSPで小さく */
  .concern::after { content: none; }

  .concern__inner {
    position: relative;          /* 基準にする */
    padding: 24px;               /* 画像の左右パディング */
  }
  .concern__inner::after {
    content: '';
    position: absolute;
    left: 0px;                  /* ← 画像の左端に合わせる */
    right: 0px;                 /* ← 画像の右端に合わせる */
    bottom: -60px;               /* 三角の高さ分だけ下に出す */
    height: 60px;                /* 三角の高さ */
    background: #E1E5E8;         /* セクション背景と同色 */
    clip-path: polygon(0 0, 50% 100%, 100% 0); /* 横幅いっぱいの▽ */
  }
}

/* セクション全体 */
.benefits{
  padding: 56px 0 72px;
  position: relative;
}
.benefits__inner{
  max-width: 83%; /* 画像の雰囲気に合わせて広め */
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* 見出し */
.benefits__title{
  position: relative;
  text-align:center;
  margin: 36px 0 60px;
  font-size: 30px;
  font-weight: 800;
  background: url('https://www.mirapro.net/assets/images/background/caresweet.png') no-repeat center center;
  background-size: 80% auto;
  background-position: center bottom;
  line-height: 1;
  min-height: 130px;             /* 背景画像の高さを確保 */
  display: flex;
  align-items: flex-end;         /* 文字を下部分に配置 */
  justify-content: center;
  border-radius: 10px;
}
.benefits__title-small{
  display:block;
  font-size: 12px;
  color:#8693a4;
  letter-spacing: .2em;
  margin-bottom: 6px;
}

/* カードリスト */
.benefits__cards{
  list-style:none;
  padding:0; margin:0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* 1カード */
.benefit{
  background:#fff;
  border-radius: 25px;
  overflow: hidden;
  border: 3px solid #f7c9d7;               /* 薄いピンクの縁 */
  box-shadow: 0 8px 18px rgba(255, 112, 155, .15); /* ピンク寄りの影 */
  transition: transform .2s ease, box-shadow .2s ease;
  max-width: 380px;
  height: 100%;                            /* カードの高さを統一 */
  display: flex;
  flex-direction: column;
}

.benefit__media img{
  width:100%;
  height:auto;
  display:block;
}

/* 本文（アイコン＋テキスト） */
.benefit__body{
  display:flex;
  align-items:center;           /* 縦方向で中央揃えに変更 */
  gap: 14px;
  padding: 8px 12px 8px;
  flex: 1;                      /* 残りの高さを埋める */
  min-height: 60px;             /* 最小高さを削減 */
}
.benefit__icon{
  width: 107px;
  height: auto;
  flex-shrink:0;
}
.benefit__text{
  margin:0;
  line-height:1.6;
  color:#334;
  font-weight:700;
  font-size: 20px;
}
.benefit__text .accent{
  color:#ff3d86;               /* 強調ピンク */
  font-weight:700;
}

/* ============ SP (～440px) ============ */
@media (max-width: 768px){
  .benefits{
    padding: 28px 0 40px;
  }
  .benefits__inner{
    max-width: 100%;
    padding: 0 14px;
  }

  .benefits__title{
    margin: 8px 0 20px;
    font-size: 20px;
    min-height: 88px;
    line-height: 1.25;
    background-size: 100% auto; /* 背景ロゴを縮小 */
    border-radius: 8px;
    padding-bottom: 0;
  }
  .benefits__title ruby rt{
    font-size: 11px;
    letter-spacing: .12em;
    margin-bottom: 4px;
  }

  .benefits__cards{
    /* SP版では1列に配置して中央寄せ */
    grid-template-columns: 1fr;
    gap: 22px;
    justify-items: center;
  }

  .benefit{
    border-radius: 18px;
    border-width: 2px;
    max-width: none;
    box-shadow: 0 6px 14px rgba(255,112,155,.12);
  }

  .benefit__body{
    gap: 10px;
    padding: 12px 14px 14px;
    min-height: auto;
  }
  .benefit__icon{
    width: 64px;
  }
  .benefit__text{
    font-size: 16px;
    line-height: 1.55;
  }
}

/* ===== Section base ===== */
.value-benefits{
  position: relative;
  padding: 0 0 71px;
  /* 左から右へのグラデーション */
  background: linear-gradient(to right, #FFDAE8, #FFEED9);
}

.value-benefits__inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* ===== Watermark “Benefit” ===== */
.value-benefits__wm{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -6px;                      /* 見出しの上に薄く被る感じ */
  font-size: clamp(72px, 18vw, 180px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(255, 183, 197, .35);
  user-select: none;
  white-space: nowrap;
}

/* ===== Title ===== */
.value-benefits__title{
  position: relative;
  z-index: 1;
  margin: 0 0 90px;
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  background: url('https://www.mirapro.net/assets/images/background/benefit.png') no-repeat center center;
  background-size: 50% auto;
  background-position: center bottom;
  line-height: 1;
  min-height: 230px;             /* 背景画像の高さを確保 */
  display: flex;
  align-items: flex-end;         /* 文字を下部分に配置 */
  justify-content: center;
  border-radius: 10px;
}

/* ===== Cards (image-only blocks) ===== */
.value-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

/* カードの入れ物（角丸＋影、内側は画像） */
.value-card{
  margin: 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #f0dbe3; /* 薄いピンクの縁 */
  box-shadow: 0 10px 24px rgba(255, 112, 155, .15);
}
.value-card > img{
  display: block;
  width: 100%;
  height: auto;
}

:root{
  --pink:#ff6fa3;
  --pink-soft:#ffd7e6;
  --navy:#2a2f45;
  --ink:#495266;
  --brand-grad:linear-gradient(90deg,#ffd5e2 0%, #ffd9bd 100%);
}

.b01{
  padding: 24px 0 32px;
  background: #fff;
  position: relative;
}
.b01::before{ left:0; }
.b01::after{ right:0; }

.b01__card{
  max-width: 1200px;
  margin: 0 auto 40px;  /* 下マージンを追加 */
  background:#fff;
  border-radius:18px;
  box-shadow: 0 12px 30px rgba(255,112,155,.15);
  padding: 28px clamp(20px, 4vw, 40px);
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 0 80px;
  border:1px solid #f3e4ea;

  grid-template-areas:
    "header header"
    "left   right";
}

/* ヘッダー部分 */
.b01__header{
  display: flex;
  align-items: center;  /* flex-end から center に変更 */
  gap: 40px;  /* 16px から 24px に増加 */
  grid-column: 1 / -1;  /* 全幅を占める */
  grid-area: header; 
}

/* 左カラム（文字列） */
.b01__left{
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 縦方向で中央揃え */
  padding-left: 30px;
  grid-area: left;
}
.b01__no{
  flex-shrink: 0;
  display: inline-block;
}
.b01__no img{
  display: block;
  width: 200px;
  height: auto;
}
.b01__title{
  position: relative;
  z-index:1;
  margin: 0;
  font-size: 35px;
  line-height: 1.4;
  font-weight: 800;
  display:inline-block;
  background-image: linear-gradient(to right, #FF9EC8, #FFEB85);
  background-repeat: no-repeat;
  background-position: 0 100%;  /* 下側に配置 */
  background-size: 100% 0.4em;  /* 太めの下線として扱う */
  box-decoration-break: clone;  /* 複数行でも適用 */
  -webkit-box-decoration-break: clone;
}
.b01__sub{
  color: #FF3F91;
  font-weight: 800;
  margin: 0 0 20px;
  font-size: 24px;
}
.b01__sub span{
  border-bottom: 3px solid #FF3F91;
}

.b01__desc{
  color: var(--ink);
  margin: 0;
  line-height: 1.9;
  font-size: 16px;
  font-weight: 700;
}

/* 右カラム（グラフ画像） */
.b01__right{
  display: flex;
  align-items: center;  /* 縦方向で中央揃え */
  justify-content: center;
  grid-area: right;
}
.b01__chart{
  margin:0;
  position: relative;
  border-radius:12px;
  padding: 16px 16px 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 260px;
}
.b01__chart img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:8px;
}
.b01__note{
  position:absolute;
  left: 12px; bottom: 10px;
  margin:0;
  font-size: 12px;
  color:#7b8794;
}

/* 引用/注釈ボックス（左カラムの下に表示） */
.b01__ref{
  margin-top: 14px;
  padding: 12px 14px;
  background: #f3f6f9;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #454A69;
  font-weight: 500;
}

.b01__ref span.source a {
  text-decoration: none;
  color: #5a6475;
  font-size: 12px;
}

/* =========================
   SP（～440px）レイアウト
   ========================= */
@media (max-width: 768px){
    /* セクション余白・内側余白 */
    .value-benefits{
      padding: 24px 0 40px;
      background: linear-gradient(to right, #FFDAE8, #FFEED9);
    }
    .value-benefits__inner{
      max-width: 100%;
      padding: 0 14px;
    }

    /* 見出し */
    .value-benefits__title{
      margin: 6px 0 20px;
      font-size: 24px;
      line-height: 1;
      min-height: 120px;
      background-size: 350px auto;
      background-position: center bottom;
      border-radius: 8px;
      padding-bottom: 0;
    }


    .b01__card{
      margin: 100px 0 20px;     /* 上に余白を多めにとって番号がはみ出せるように */
      position: relative;       /* .b01__no の絶対配置基準にする */
      padding: 32px 16px 18px;  /* 上に余白を追加して本文が番号に重ならないように */
      grid-template-columns: 1fr;
      grid-template-areas:
      "header"
      "left"
      "right";
    }

    .b01__header{
      position: relative;
      display: block;
      min-height: auto;
    }

    .b01__no{
      position: absolute;
      top: -100px;
      left: 20px;
      z-index: 0;
      pointer-events: none;
    }

    .b01__no img{
      width: 200px; /* 以前の見た目に合わせて固定でもOK */
    }

    .b01__title{
      position: relative;
      z-index: 1;     /* 番号の上に載せる */
      margin: 0;
      font-size: 26px;
      line-height: 1.35;
      display: inline;
      background-image: linear-gradient(to right, #FF9EC8, #FFEB85);
      background-repeat: no-repeat;
      background-position: 0 100%;  /* 下側に配置 */
      background-size: 100% 0.4em;  /* 太めの下線として扱う */
      box-decoration-break: clone;  /* 複数行でも適用 */
      -webkit-box-decoration-break: clone;
    }
    .b01__title-mark{
      background: linear-gradient(to right, #FF9EC8, #FFEB85);
      border-radius: 4px;
      padding: 0 0.2em;        /* 両端に少し余白 */
      box-decoration-break: clone; /* ← 複数行にまたがっても背景を繰り返す */
      -webkit-box-decoration-break: clone; /* Safari対応 */
    }

    /* 左カラム（本文） */
    .b01__left{
      padding: 0;              /* 左余白をリセット */
    }
    .b01__sub{
      margin: 20px 0 20px;
      font-size: 20px;
    }
    .b01__sub span{
      border-bottom-width: 2px;
    }
    .b01__desc{
      font-size: 14px;
      line-height: 1.75;
      font-weight: 500;
      margin: 0;
    }
    .sp-none {
      display: none;
    }

    /* 右カラム（グラフ） */
    .b01__right{
      justify-content: center;
      align-items: center;
    }
    .b01__chart{
      min-height: 180px;
      padding: 10px 10px 16px;
      border-radius: 10px;
    }
    .b01__chart img{
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
    }
    .b01__note{
      font-size: 11px;
      left: 10px; bottom: 8px;
    }

    /* 参照ボックス */
    .b01__ref{
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 12px;
      line-height: 1.6;
    }
    .b01__ref span.source a{
      font-size: 11px;
    }
}

.pc-none {
  display: none;
}


:root{
  --ink:#263045;
  --muted:#6b7484;
  --pink-bg:#fde4ec;
  --card-shadow: 0 10px 24px rgba(20,20,20,.06), 0 2px 6px rgba(20,20,20,.05);
  --maxw:1120px;
}

/* セクション全体 */
.service{
  background:#fff;
  padding: 48px 0 0px;
  position:relative;
  max-width: 83%;
  margin: 0 auto;
}
.service__inner{
  position: relative;
}

/* 実見出し＆リード */
.service__title{
  background: url('https://www.mirapro.net/assets/images/background/service.png') no-repeat center center;
  background-position: center bottom;
  background-size: 50% auto;
  line-height: 1;
  min-height: 200px;             /* 背景画像の高さを確保 */
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  display: flex;
  align-items: flex-end;         /* 文字を下部分に配置 */
  justify-content: center;
}
.service__lead{
  text-align:center;
  margin: 40px auto 80px;
  font-weight: 700;
  font-size: 20px;
}

/* ピンク角丸ボックス */
.service__box{
  background: var(--pink-bg);
  border-radius: 16px;
  box-shadow: 0 2px 0 rgba(255,255,255,.7) inset;
  padding-bottom: 20px;
}
.service__box-title{
  padding: 30px 0 30px 0;
  margin: 0;
  text-align:center;
  font-weight: 800;
  font-size: 24px;  /* 文字サイズを小さく */
  text-decoration: underline;            /* 下線を追加 */
  text-decoration-color: var(--ink);    /* 下線の色を指定 */
}

/* グリッド */
.service__grid{
  list-style:none; padding:0; margin:0;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 0 40px;
}

/* 追加メッセージ */
.service__message{
  text-align: center;
  margin: 20px 0 20px 0;
  font-size: 20px;
  font-weight: 700;
}

/* カード */
.svc-card{
  width: auto;
  margin: 0 0 20px 0;
}

.svc-card__figure{
  margin:0;
  background:#fff;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.svc-card__figure img{
  width:100%; height:auto; display:block;
  aspect-ratio: 4/3;             /* 画像比率をそろえる */
  object-fit: cover;
}
.svc-card__figure figcaption{
  text-align:center;
  padding: 18px 8px;
  font-weight:700;
  color:#425066;
  font-size: 14px;
}

@media (max-width: 768px){
  .service{
    max-width: 100%;
    width: 100%;
  }
  .service__inner{
    padding: 0 14px 0;
  }

 /* 見出し（背景画像つき） */
 .service__title{
    font-size: 30px;
    min-height: 110px;               /* 背景ロゴ分の高さ */
    background-size: 350px auto;     /* ロゴ縮小 */
    background-position: center bottom;
    align-items: flex-end;
    padding-bottom: 6px;
  }

  /* リード */
  .service__lead{
    font-size: 14px;
    line-height: 1.9;
    margin: 16px auto 20px;
    padding: 0 6px;
  }

  /* ピンク角丸ボックス */
  .service__box{
    border-radius: 14px;
    padding-bottom: 14px;
  }
  .service__box-title{
    font-size: 20px;                 /* 見本に合わせ小さめ */
    padding: 20px 0 20px;
    margin: 0 0 0;
    text-underline-offset: 3px;
  }

  /* ===== グリッド：可変列数 ===== */
  .service__grid{
    padding: 0 10px;                 /* ボックス内の左右余白 */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;                       /* 行間/列間 */
  }

  /* カードサイズ */
  .svc-card{
    width: 100%;                     /* グリッドに合わせて可変 */
    margin: 0;                       /* 余白はgridで管理 */
  }

  /* カードの中身 */
  .svc-card__figure{
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
  }
  .svc-card__figure img{
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    width: 100%;
    height: auto;
  }
  .svc-card__figure figcaption{
    font-size: 10px;
    padding: 10px 6px;
  }

  /* 追加メッセージ */
  .service__message{
    font-size: 14px;
    margin: 30px 0 16px;
  }
}

:root{
  --ink:#2b3042;
  --muted:#6f7b8f;
  --peach:#fde6d6;
  --peach-deep:#f7d3b4;
  --lemon:#fff7d7;
  --blue:#2b6eff;
  --blue-grad:linear-gradient(180deg,#4f8cff 0%, #2b6eff 100%);
  --card-shadow:0 12px 28px rgba(20,20,20,.08);
  --radius:16px;
  --max:1440px;
}

/* ===== 共通 ===== */
.sec-title{
  text-align:center;
  margin: 6px 0 18px;
  font-size: 24px;
  font-weight: 700;
}

.sec-title span {
  border-bottom: 3px solid;
}

/* ===== 料金ボックス ===== */
.pricing{
  padding:24px 0;
  /* section を前提にしない */
  display:block;
}
.pricing__box{
  margin: 50px auto;
  background: var(--peach);
  border-radius: var(--radius);
  padding: 22px 26px 26px;
}
.pricing__row{
  display:flex;
  align-items:center;
  gap: 18px;
  justify-content:center;
  flex-wrap: wrap;
}

.pricing__chips{
  display:flex;
  flex-direction: column; /* 縦並びに */
  align-items:center;
  gap:10px;
}
.chip{
  background:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-weight:700;
  color:#5b6475;
  border: 3px solid #5b6475;
}

.arrow-pc{
  font-size: 24px;
  color:#c8bdbd;
}
.arrow-sp{ display:none; } /* SP用は既定で非表示 */

.pricecard{
  display:flex;
  align-items:center;
  gap: 16px;
  background:#fff;
  border-radius: 12px;
  padding: 12px 18px;
  border:1px solid rgba(0,0,0,.06);
}
.pricecard__label{
  font-size: 16px;
  font-weight: 700;
  line-height:1.4;
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center;
}
.badge{
  display:inline-block;
  align-self: flex-end; /* 親の右端に寄せる */
  background:#ff5a8f;
  color:#fff;
  padding:2px 8px;
  border-radius:6px;
  font-size:19px;
  font-weight: 700;
  margin-top:2px;
}
.pricecard__price{
  font-weight:900;
  font-size: 48px;
  color:#ff367e;
  letter-spacing:.02em;
}
.pricecard__price > span:first-child{font-size:.8em; margin-right:2px;}
.pricecard__tilde{margin-left:2px; font-size:.8em; color:#ff367e;}
.note{
  text-align:center;
  color:var(--muted);
  font-size:12px;
  margin:10px 0 0;
}

/* ===== ポイントボックス ===== */
.points{
  padding:28px 0;
  display:block;
}
.points__box{
  max-width: var(--max);
  margin: 0 auto;
  background: var(--lemon);
  border-radius: var(--radius);
  padding: 26px 22px;
  display:grid;
  grid-template-columns: 0.9fr 1.7fr;
  gap: 22px;
}
.points__note {
  text-align: right;
}
.button__box {
  display: flex;
  align-items: center;     /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
  height: 250px;          /* 画面全体の高さを確保 */
}
.button__link img{
  width: 373px;
}

.points__media{
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.points__media img{
  width: 337px; height: auto; display:block; object-fit: cover;
}

.points__content{align-self:center;}
.points__title{
  margin:0 0 14px;
  font-weight:700;
  font-size: 24px;
}

.points__title div {
  display: inline;
  border-bottom: 3px solid #3e485c;
}

.point{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  margin-bottom: 20px; /* ポイントごとの間隔を広げる */
  background: #fff;    /* 背景色を白に */
  border-radius: 8px;
  padding: 10px;       /* 白背景がカードっぽく見えるよう余白追加 */
}

.point__head{
  display: flex;
  align-items: center;  /* pillを縦中央に */
  justify-content: center;
}

.pill{
  display: inline-flex;        /* インライン要素としてflexに */
  align-items: center;         /* 縦方向を中央揃え */
  gap: 6px;                    /* アイコンと文字の間隔 */
  background: var(--blue-grad);
  color:#fff;
  padding:10px 14px;
  border-radius: 999px;
  font-size:20px;
  font-weight: 700;
}

.point__body{
  border-radius:10px;
  padding:12px 14px;
  line-height:1.7;
  font-weight: 700;
  font-size: 20px;
}

.point__body small{
  color:#7a8598;
  font-size: 14px;
  font-weight: normal;
}

/* ===== CTA ===== */
.cta-wrap{
  display:flex; justify-content:center; padding: 26px 0 10px;
}
.cta-btn{
  display:inline-flex; align-items:center; gap:10px;
  background: linear-gradient(90deg,#ff7a59, #ff4ea1);
  color:#fff; text-decoration:none;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 800;
  font-size: clamp(16px,1.8vw,18px);
  box-shadow: 0 14px 28px rgba(255, 78, 161, .3);
}
.cta-btn__icon{font-size:1.2em}

/* セクション全体 */
.voices {
  position: relative;
  padding: 48px 0 0px;
  background: linear-gradient(to right, #FFDAE8, #FFEED9);
}

.voices__inner {
  max-width: 83%;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* =========================
   SP（～440px）レイアウト
   ========================= */
   @media (max-width: 768px){
    /* ボックス全体 */
    .pricing__box{
      margin: 24px 14px;
      padding: 18px 14px 16px;
      border-radius: 18px;
      background: var(--peach);
    }

    /* タイトル（下線＆中央） */
    .pricing__box .sec-title{
      margin: 0 0 20px;
      text-align: center;
      font-size: 20px;
      line-height: 1.2;
    }
    .pricing__box .sec-title > span{
      text-decoration: underline;
      text-underline-offset: 4px;
      border-bottom: 1px solid var(--navy);
    }

    /* 並び：縦一列に */
    .pricing__row{
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    /* チップ：横並びのまま少し小さく */
    .pricing__chips{
      flex-direction: row;
      gap: 10px;
    }
    .chip{
      padding: 6px 14px;
      font-size: 14px;
      border-width: 2px;
    }

    .arrow-pc{ display:none; }
    .arrow-sp{
      display:inline-block;
      font-size: 18px;      /* 画像に近いサイズ感 */
      color:#c8bdbd;
      line-height:1;
      margin: 2px 0 6px;    /* 上下に少し余白 */
    }

    /* 価格カード：中央寄せ＆影を強めに */
    .pricecard{
      width: 92%;
      max-width: 360px;
      justify-content: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 14px;
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: 0 10px 22px rgba(255,112,155,.18);
    }

    /* ラベル側 */
    .pricecard__label{
      font-size: 14px;
      line-height: 1.3;
      align-items: flex-start;
    }
    .badge{
      margin-top: 4px;
      align-self: flex-end;    /* 左寄せ */
      padding: 2px 8px;
      font-size: 16px;
      border-radius: 6px;
    }

    /* 価格表記 */
    .pricecard__price{
      font-size: 42px;           /* 視認性重視で大きめ */
      letter-spacing: .01em;
      color: #ff367e;
      line-height: 1;
    }
    .pricecard__price > span:first-child{ /* ¥ */
      font-size: .8em;
      margin-right: 2px;
    }
    .pricecard__tilde{           /* 〜 */
      font-size: .8em;
      margin-left: 2px;
    }

    /* 注意書き */
    .note{
      margin: 12px 0 0;
      font-size: 12px;
      line-height: 1.6;
      text-align: left;
      color: var(--muted);
    }

    /* レモン色の箱：1カラム & 余白調整 */
    .points{ padding: 18px 0; }
    .points__box{
      display: grid;
      grid-template-areas:
        "content"
        "media";                                  /* 並び順を明示 */
      grid-template-columns: none;                 /* 1列に */
      padding: 16px 14px;
      border-radius: 18px;
      max-width: 100%;
      margin: 24px 14px 0;
    }

    /* タイトルの小さな帯 */
    .points__title{
      margin: 0 0 15px;
      text-align: center;
      font-size: 16px;
      line-height: 1.3;
      font-weight: 800;
    }
    .points__title > div{
      display: inline-block;
      padding: 8px 12px;
    }

    /* ポイントカード（白い角丸＋影） */
    .point{
      background: #fff;
      border-radius: 12px;
      padding: 14px;
      box-shadow: 0 6px 16px rgba(255,112,155,.12);
      grid-template-columns: none;
      gap: 0;
    }

    /* 青いピル見出し */
    .point__head{ 
      margin: 0 0 10px;
      align-items: flex-start;
      justify-content: flex-start;
    }
    .pill{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: #2f7ed9;
      color: #fff;
      border-radius: 999px;
      font-weight: 700;
      font-size: 20px;
    }
    .point__icon{
      width: 18px; height: auto; display: block;
      filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
    }

    /* 本文 */
    .point__body{
      font-size: 20px;
      line-height: 1.8;
      font-weight: 700;
      padding: 0px 14px;
    }
    .point__body small{
      display: block;
      margin-top: 8px;
      font-size: 12px;
      color: #7a8798;
      font-weight: 500;
      line-height: 1.6;
    }

    /* 下部の注意書き（※注） */
    .points__note{
      margin-top: 6px;
      text-align: left;
    }
    .points__note small{
      font-size: 12px;
      color: #7a8798;
      line-height: 1.6;
    }

    /* 画像：ピンクの円背景に重ねる（下で半円が見える感じ） */
    .points__media{
      order: 2;                        /* 内容の後ろに来るように（HTML順そのままでも行指定でOK） */
      justify-self: center;
      width: 320px;
      height: 250px;
      margin: 6px auto 0;
      position: relative;
      overflow: hidden;
    }
    .points__media img{
      width: 100%;
      height: auto;
      display: block;
      position: absolute;
      left: 0; right: 0;
      bottom: -6px;                    /* ほんの少し下へはみ出す */
      margin: auto;
    }

    /* “相談してみる” ボタンを中央に */
    .button__box{
      text-align: center;
      margin: 14px 0 0;
      height: 150px;
    }
    .button__box .button__link img{
      width: 88%;
      max-width: 360px;
      height: auto;
      display: inline-block;
    }
}


/* 見出し */
.voices__title {
  position: relative;
  z-index: 1;
  margin: 32px 0 28px;
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  background: url('https://www.mirapro.net/assets/images/background/voice.png') no-repeat center center;
  background-size: 385px auto;
  line-height: 1;
  min-height: 160px;
  padding: 20px;
  display: flex;
  align-items: flex-end;         /* 文字を下部分に配置 */
  justify-content: center;
  padding-bottom: 30px;          /* 下側の余白を追加 */
  border-radius: 10px;
}

/* flex レイアウト */
.voices__list {
  display: flex;
  flex-direction: column; /* ← 常に縦並び */
  gap: 32px;              /* カード間の余白 */
}

/* 各カード */
.voice {
  flex: 1 1 480px;       /* 最小幅 480px で折り返す */
  background: #fff;
  border-radius: 16px;
  padding: 22px 60px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
  display: flex;
  flex-direction: column;
}

/* 見出し部分 */
.voice__head {
  display: flex;
  justify-content: center;   /* 横方向中央 */
  align-items: center;
  gap: 10px;
  background: #2e335f;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 700;
  margin: 30px 0;
}
.voice__icon {
  width: 95px;
  height: auto;
}
.voice__heading {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
}

/* 本文部分 */
.voice__body {
  display: flex;
  gap: 5%;
  flex: 1;
}
.voice__media {
  width: 35%;
}
.voice__media img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 6px;
}
.voice__caption {
  font-size: 12px;
  color: #555;
  text-align: center;
}
.voice__text {
  flex: 1;
  line-height: 2;
}
.voice__text .voice__highlight {
  background-color: #FFCEDC;
  font-weight: 800;
}
.voice__text .voice__title {
  margin-bottom: 50px;
}
.voice__text .voice__title span {
  font-size: 24px;
  color: #FF3F91;
  border-bottom: 3px solid #FF3F91;
  font-weight: 700;
}

.voice__text p {
  margin: 0 0 10px;
  line-height: 1.7;
}

/* CTA */
.voices__cta {
  text-align: center;
  margin-top: 40px;
}
.btn--primary {
  display: inline-block;
  background: #ff3d86;
  color: #fff;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.btn--primary:hover {
  background: #e23377;
}

@media (max-width: 768px){
  .voices {
    max-width: 100%;
    width: 100%;
    padding: 0;
  }
  .voice {
    padding: 22px 24px;
  }
  .voices__inner{
    max-width: 100%;
    padding: 0 14px;
  }

  .voices__title{
    font-size: 30px;
    background-size: 330px auto;
    background-position: center bottom;
    min-height: 160px;
    line-height: 1;
    padding: 0;
  }

  .voice__heading {
    font-size: 20px;
  }

  /* ヘッダー（濃紺の帯） */
  .voice__head{
    margin: 8px 0 14px;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
  }

  /* 本文は縦並びに */
  .voice__body{
    flex-direction: column;   /* ← ここがキモ */
    gap: 14px;
  }

  /* 写真とキャプション */
  .voice__media{
    width: 100%;
  }
  .voice__media img{
    width: 90%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 0 auto 6px;
  }
  .voice__caption{
    font-size: 12px;
    line-height: 1.5;
    color: #666;
    text-align: center;
  }

  /* タイトル＆本文 */
  .voice__text{ line-height: 1.8; }
  .voice__text .voice__title{
    margin: 6px 0 12px;
  }
  .voice__text .voice__title span{
    font-size: 18px;
    color: #e83e8c;
    font-weight: 800;
    border-bottom: 2px solid #e83e8c;  /* 太め下線に */
    display: inline;
  }
  .voice__text p{
    font-size: 14px;
    line-height: 1.9;
    margin: 0 0 10px;
  }

  /* マーカー強調（改行しても綺麗に） */
  .voice__text .voice__highlight{
    background: #FFCEDC;
    padding: .05em .12em;
    border-radius: 2px;
    font-weight: 800;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  /* CTA余白（ある場合） */
  .voices__cta{ margin-top: 20px; }
}



/* 親を横並びに */
.necessity {
  display: flex;
  align-items: flex-start; /* 上端を揃える */
  gap: 24px;              /* 画像と本文の間隔 */
  margin: 0;
}

.necessity__inner {
  max-width: 83%;
  margin: 0 auto;
}

.necessity__box {
  display: flex;
  justify-content: center;
  gap: 40px;              /* 画像と本文の間隔 */
  margin: 40px 0;
}

.necessity__title {
  position: relative;
  z-index: 1;
  margin: 32px 0 28px;
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  background: url('https://www.mirapro.net/assets/images/background/necessity.png') no-repeat center center;
  background-size: 645px auto;
  background-position: center bottom;
  line-height: 1;
  padding: 20px;
  min-height: 200px;             /* 背景画像の高さを確保 */
  display: flex;
  align-items: flex-end;         /* 文字を下部分に配置 */
  justify-content: center;
  padding-bottom: 30px;          /* 下側の余白を追加 */
  border-radius: 10px;
}
.necessity__title span.necessity__highlight {
  font-weight: 700;
  font-size: 50px;
  color: #FF3F91;
  line-height: 1;
}

/* 左側の画像 */
.necessity__img {
  flex: 0 0 40%;   /* 幅40%固定 */
}
.necessity__img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 右側の本文 */
.necessity__content {
  flex: 1; /* 残りの幅を占有 */
  line-height: 2;
}
.necessity__sub_title {
  margin-bottom: 40px;
}
.necessity__sub_title span {
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid;
}
span.necessity__highlight {
  font-weight: 700;
  color: #FF3F91;
}

/* =========================
   SP（～440px） Necessity
   ========================= */
@media (max-width: 768px){

    /* セクション内側余白 */
    .necessity__inner{
      max-width: 100%;
      padding: 0 24px;
    }

    /* 見出し（背景ロゴを小さく、文字もSPサイズ） */
    .necessity__title{
      margin: 12px 0 10px;
      font-size: 24px;
      line-height: 1;
      min-height: 120px;
      background-size: 360px auto;        /* ウォーターマーク縮小 */
      background-position: center bottom;
      border-radius: 8px;
      padding: 0 0 25px;
    }
    .necessity__title span.necessity__highlight{
      font-size: 28px;                     /* タイトル内「美容」を少し大きく */
      color: #e83e8c;
      font-weight: 700;
      line-height: 1;
    }

    /* レイアウト：画像→本文の縦並び */
    .necessity__box{
      display: flex;               /* 横並びを解除して縦積みに */
      flex-direction: column;      /* 上→下の並び */
      margin: 12px 0 18px;
    }

    /* 画像 */
    .necessity__img{
      width: 100%;
      margin: 0 auto 12px;
      order: 2;
    }
    .necessity__img img{
      width: 100%;
      height: auto;
      border-radius: 10px;
      display: block;
    }

    /* 本文 */
    .necessity__content{
      line-height: 1.9;
      font-size: 14px;
      order: 1;
    }
    .necessity__content p{
      margin: 0 0 12px;
    }

    .necessity__sub_title {
      margin: 40px 0;
    }

    /* サブタイトル（下線つき） */
    .necessity__sub_title span{
      display: inline;
      font-size: 20px;
      font-weight: 700;
      border-bottom: 2px solid #333;
      padding-bottom: 2px;
      text-align: center;
    }

    /* 本文中の強調は「マーカー風」 */
    .necessity__content .necessity__highlight{
      color: #FF3F91;
      font-weight: 800;
      padding: .05em .14em;
      border-radius: 2px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
}

/* セクション */
.faq {
  background: #edf3f6; /* 画像の淡いグレー青 */
  padding: 64px 0 0;
  position: relative;
}
.faq__inner {
  max-width: 920px;
  margin: 0 auto;
  position: relative;
}

/* 見出し */
.faq__title {
  position: relative;
  z-index: 1;
  margin: 32px 0 28px;
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  background: url('https://www.mirapro.net/assets/images/background/faq.png') no-repeat center center;
  background-size: 180px auto;
  background-position: center bottom;
  line-height: 1;
  padding: 20px;
  min-height: 200px;             /* 背景画像の高さを確保 */
  display: flex;
  align-items: flex-end;         /* 文字を下部分に配置 */
  justify-content: center;
  padding-bottom: 30px;          /* 下側の余白を追加 */
  border-radius: 10px;
}

.faq__content {
  display: flex;
  justify-content: center; /* 横方向の中央寄せ */
}

/* リスト全体 */
.faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px; /* QA ブロック間隔 */
  width: 720px;
}

/* 各アイテム */
.faq__item {
  background: transparent; /* 行ごとに透明（質問だけ白枠） */
}

/* Q 行 */
.faq__qline {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 500;
}

/* A 行 */
.faq__aline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  padding: 20px 0px 15px 20px;  /* 上を少し詰める */
}

/* バッジ（Q/A頭の丸） */
.faq__badge {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-weight: 800;
  color: #fff;
  flex: 0 0 28px;
}
.faq__badge--q { background: #4c83ff; }
.faq__badge--a { background: #ff5a8f; }

/* テキスト */
.faq__question,
.faq__answer {
  margin: 0;
  line-height: 1.8;
  font-size: 15px;
  padding: 0 60px 0 6px;
}

/* CTA */
.faq__cta {
  text-align: center;
  margin-top: 28px;
}
.btn--primary {
  display: inline-block;
  background: #ff3d86;
  color: #fff;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(255,61,134,.28);
  transition: transform .06s ease, background .2s ease;
}
.btn--primary:hover { background: #e23377; transform: translateY(-1px); }

@media (max-width: 768px){
  .faq {
    padding: 0;
  }
  .faq__title{
    margin: 0 0 28px;
    min-height: 120px;
  }

  .faq__content {
    margin: 0 24px;
  }

  .faq__qline {
    font-size: 16px;
  }

  .faq__aline {
    font-size: 14px;
  }

  .faq__question, .faq__answer {
    padding: 0 20px 0 6px;
  }
}


.company {
  max-width: 1440px;
}
.company__inner {
  max-width: 83%;
  margin: 80px auto;
  border: 3px solid #f7c600;   /* 黄色枠 */
  border-radius: 16px;
  padding: 40px;
  background: #fff;
}
.company__title {
  font-size: 30px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 10px;
  color: #2a2f46;
}

/* 外枠 */
.company__box {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

/* 左：画像 */
.company__media {
  flex: 0 0 40%;
  position: relative;
}
.company__media img {
  width: 470px;
  border-radius: 10px;
  display: block;
}
.company__logo {
  position: absolute;
  top: 14px;
  left: 0;
  background: #ffc800;
  padding: 6px 14px;
  border-radius: 0 6px 6px 0;
}
.company__logo img {
  height: 24px;
  display: block;
}

/* 右：本文 */
.company__content {
  flex: 1;
  color: #2a2f46;
  background-image: url('https://www.mirapro.net/assets/images/background/company_content.png');
  background-size: 262px auto;
  background-repeat: no-repeat;
  background-position: right bottom; /* 右下に配置 */
  margin: 0 40px;
  border-radius: 10px;
}
.company__label {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 0px;
}
.company__heading {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 16px;
}
.company__heading span {
  border-bottom: 3px solid;
}
.company__lead {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 16px;
}
.company__content p {
  line-height: 1.8;
}

/* =========================
   SP（～440px） Company
   ========================= */
@media (max-width: 768px){
    .company{ max-width: 100%; }

    /* 黄色枠ボックス */
    .company__inner{
      max-width: 100%;
      margin: 24px 24px;
      padding: 16px;
      border: 3px solid #f7c600;
      border-radius: 18px;
      background: #fff;
    }

    /* 見出し */
    .company__title{
      text-align: center;
      font-size: 30px;
      line-height: 1.25;
      font-weight: 700;
      color: #2a2f46;
      margin: 23px 0 20px;
    }

    /* レイアウト：縦積み */
    .company__box{
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* 画像：全幅＋角丸＋軽い影 */
    .company__media{
      flex: none;
      width: 100%;
      position: relative;
    }
    .company__media img{
      width: 100%;
      height: auto;
      display: block;
      border-radius: 12px;
      box-shadow: 0 8px 18px rgba(0,0,0,.06);
    }
    /* （任意）ロゴプレートを載せる場合 */
    .company__logo{
      position: absolute;
      right: 10px;
      top: 10px;
      left: auto;
      background: #ffc800;
      padding: 6px 10px;
      border-radius: 10px;
    }
    .company__logo img{ height: 20px; display: block; }

    /* 本文：行間広め＆背景飾りは小さめに */
    .company__content{
      margin: 0;                            /* PCの左右マージンをリセット */
      color: #2a2f46;
      background-size: 250px auto;          /* 右下の飾りを縮小 */
      background-position: right bottom;
      border-radius: 10px;
    }

    .company__label{
      font-size: 16px;
      font-weight: 700;
      margin: 2px 0 6px;
    }
    .company__heading span{
      font-size: 20px;
      font-weight: 700;
      margin: 0 0 10px;
      border-bottom: 3px solid var(--navy);
    }
    .company__lead{
      font-size: 14px;
      line-height: 1.9;
      font-weight: 700;
      margin: 0 0 10px;
    }
    .company__content p{
      font-size: 14px;
      line-height: 1.9;
      margin: 0 0 10px;
    }
}

/* ===== Contact Section ===== */
.contact{
  position: relative;
  background: #ffffff;
  max-width: 1440px;
  margin-bottom: 80px;
}

/* 背景ウォーターマーク「Contact」 */

.contact__inner{
  max-width: 83%;
  margin: 0 auto;
  padding: 0 22px;
}

/* 見出し・サブ見出し */
.contact__title{
  position: relative;
  z-index: 1;
  margin: 32px 0 0;
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  background: url('https://www.mirapro.net/assets/images/background/contact.png') no-repeat center center;
  background-size: 566px auto;
  background-position: center bottom;
  padding: 0;
  min-height: 200px;             /* 背景画像の高さを確保 */
  display: flex;
  align-items: flex-end;         /* 文字を下部分に配置 */
  justify-content: center;
  border-radius: 10px;
  line-height: 1;           /* 行間のズレをなくす */
}

.contact__subtitle{
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin: 28px 0 60px 0;
}

/* 2カラムの箱 */
.contact__box{
  display: grid;
  grid-template-columns: 1fr 1.1fr; /* 左：画像 / 右：フォーム */
  gap: clamp(18px, 3.2vw, 36px);
  align-items: start;
}

/* 左側：画像＋重ね背景 */
.contact__img{
  display: grid;
  gap: 14px;
  justify-items: start;
}
.contact__img > div:first-child{ /* 画像ラッパ */
  position: relative;
  display: inline-block;
  border-radius: 14px;
  overflow: hidden;
  z-index: 0;
}

.contact__img img{
  display: block;
  width: clamp(280px, 36vw, 420px);
  height: auto;
  border-radius: 14px;
}

.contact__text{
  color:#454A69;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.9;
}

/* 右側：フォームカード */
.contact__content > div{
  background: #eef3f6;     /* 薄いブルーグレー */
  border-radius: 18px;
  padding: 60px;
  border: 1px solid rgba(0,0,0,.06);
}

/* 汎用フォームスタイル（CF7/生フォーム問わず適用しやすい） */
.contact__content input[type="text"],
.contact__content input[type="email"],
.contact__content input[type="tel"],
.contact__content select,
.contact__content textarea{
  width: 100%;
  font-size: 14px;
  color: #2f3a4d;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  max-height: 60px;
  padding: 20px 20px;
  outline: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.03);
  transition: border-color .15s ease, box-shadow .15s ease;
  margin-top: 6px;
}
.contact__content textarea{ min-height: 120px; resize: vertical; }

.contact__content input:focus,
.contact__content select:focus,
.contact__content textarea:focus{
  border-color: #7aa7ff;
  box-shadow: 0 0 0 3px rgba(122,167,255,.18);
}

/* ラベルとフィールドの並び */
.contact__content .field{
  margin-bottom: 14px;
}
.contact__content .label{
  display:block;
  color:#5c6780;
  font-weight: 700;
  font-size: 16px;
}

.contact__content .required{
  margin-left: 10px;
  color:#ff4e7a;
  font-size: 12px;
}

.contact__content .btn-submit__box {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 送信ボタン */
.contact__content .btn-submit{
  display: inline-block;
  width: 316px;
  height: 70px;
  text-align: center;
  background: #2e335f;
  color: #fff;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .05em;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(46,51,95,.18);
  transition: transform .06s ease, background .2s ease;
  margin-top: 50px;
}
.contact__content .btn-submit:hover{
  background:#262a50;
  transform: translateY(-1px);
}

/* 注意書き等 */
.contact__content .note{
  color:#707b90;
  font-size: 12px;
  margin-top: 10px;
  text-align: left;
}

.contact__content .note a {
  text-decoration: none;
  color: var(--navy);
}

/* =========================
   SP（～440px） Contact
   ========================= */
@media (max-width: 768px){

  .contact{ 
    margin-bottom: 32px; 
  }

  .contact__inner{
    max-width: 100%;
    padding: 0 14px;
  }

  /* 見出し（背景ロゴを小さく） */
  .contact__title{
    margin: 14px 0 6px;
    font-size: 30px;
    min-height: 120px;
    background-size: 320px auto;
    background-position: center bottom;
    border-radius: 0;
    line-height: 1;
    padding-bottom: 0;
  }

  /* サブ見出し */
  .contact__subtitle{
    font-size: 20px;
    line-height: 1.9;
    margin: 32px 0 20px;
    padding: 0 4px;
  }

  /* 2カラム → 1カラム */
  .contact__box{
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }

  /* 画像＋重ね紙 */
  .contact__img{
    justify-items: center;
    gap: 10px;
  }
  .contact__img img{
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
  }

  .contact__text{
    text-align: center;
    font-size: 14px;
    line-height: 1.8;
    margin-top: 0;
  }

  /* フォームカード */
  .contact__content > div{
    padding: 27px 24px;
    border-radius: 16px;
  }

  /* ラベル／フィールド */
  .contact__content .field{ margin-bottom: 24px; }
  .contact__content .label{
    font-size: 14px;
    margin-bottom: 4px;
  }
  .contact__content .required{
    font-size: 11px;
    margin-left: 6px;
  }

  /* 入力UI（タップしやすく） */
  .contact__content input[type="text"],
  .contact__content input[type="email"],
  .contact__content input[type="tel"],
  .contact__content select,
  .contact__content textarea{
    height: 60px;
    font-size: 14px;          /* モバイルで拡大防止 */
    border-radius: 10px;
    max-height: none;
  }
  .contact__content textarea{ min-height: 120px; }

  /* 送信ボタン */
  .contact__content .btn-submit__box{ margin-top: 10px; }
  .contact__content .btn-submit{
    width: 88%;
    max-width: 360px;
    height: 56px;
    font-size: 18px;
    margin-top: 10px;
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(46,51,95,.18);
  }

  /* 注意書き */
  .contact__content .note{
    font-size: 12px;
    margin-top: 8px;
    text-align: left;
  }
}



/* フッター */

.footer {
  background: #2e335f; /* 濃紺背景 */
  color: #fff;
  padding: 40px 20px 28px;
  text-align: center;
}

.footer__logo img {
  max-width: 280px; /* caresweet画像サイズ調整 */
  height: auto;
  margin: 0 auto 20px;
  display: block;
}

.footer__sns {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-bottom: 20px;
}
.footer__sns img {
  width: 30px;
  height: 30px;
  display: block;
  transition: opacity .2s ease;
}
.footer__sns img:hover {
  opacity: 0.75;
}

.footer__copy p {
  font-size: 12px;
  margin: 2px 0;
  color: #ddd;
}

.footer__copy a {
  color: #ddd;
  text-decoration: none;
}

/* フォーム上部のエラーメッセージ一覧を非表示 */
.screen-reader-response {
  display: none !important;
}

.wpcf7-not-valid-tip {
  color: #ff4e7a;
}

/* すべての input/textarea の placeholder を薄く */
input::placeholder,
textarea::placeholder {
  color: #ccc; /* 薄いグレー */
  opacity: 1;  /* ブラウザによっては薄くなるので強制的に不透明に */
}

.wpcf7-validation-errors {
  margin: 50px 0 0;
  font-weight: 700;
  color: #ff4e7a;
  text-align: center;
}

.wpcf7-mail-sent-ok {
  margin: 50px 0 0;
  font-weight: 700;
  text-align: center;
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6em 1.2em;
  background: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* デフォルトでは余白なし */
.btn-submit .btn-spinner {
  display: none;
  margin-right: 0;
}

/* 送信中だけスピナーを出して余白を付ける */
.btn-submit.loading .btn-spinner {
  display: inline-block;
  margin-right: 8px;   /* ← この値で間隔調整 */
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}