/* いい歯の日週間（/iiha/）
   hachimandental.com/iiha/main.css を複製し、青系の色をオールスマイルのアクセントカラー #3a5b9b系に置き換えた（ゴールドはそのまま）。
   ほかの CSS とクラス名がぶつからないよう、全セレクタを .iiha の中に限定する */

.iiha {
  --iiha-navy: #3a5b9b;
  --iiha-blue: #3a5b9b;
  --iiha-gold: #cda53e;
  --iiha-btn-gold: #d7a030;
  --iiha-text: #333;
  --iiha-dots: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAL9SURBVHgB7d3hTdtAGMbx585NlXyDDcIGMAFlgsIGbMAILRvQDbJCJ4BOUDYgG4QPVEFN7avtmkhEIFI1d6fe+/99QhDFUh7es3O+8+u0pUUIe/qxOq0qHQenQzWaymmv/2PQvbzmLuhWlW7q0ejrvnP3QnburRcslstp5d5dhCacrwPd7o1nterL/clkLmTzasBdxfrl6nP7igv9ywGCrurJ6JKKzuPFgLuq9aqu2x+n2okwb9ScUM3p+c1fLB4eDncbbse1/zD+untvIalnFbz7yt1EJae2Drg/5z6uvitauE/akMfvjzgnp7EeovsLqujhdty0Wq4+CUn0FTwMzXdKqFF9wFAdX1/BlarkFeXb79ZCdG449y6UWjv71UxGB5yL4/J6XJ0qh3ZWrHqsPwpR+Uo6ViZBzQchKh+cyzf5EMTER2ReTZgqn6kQlf+bO0Q7l/PYRnihaL6/WZ9LzmMb0d7kcXPlMxeiais43CoXp3zHNsI3tb4pk3Yi/EaIyg1Lc+5yXNE249E+U5Vx+f4D9m6m9GaEGx+3CwvXfw/uP2jnrpSK0xXhpsGSncKtZ7K6D7wdNk8U9bvpsOiOcJN5NlXZDZtN/fNMUUJuw61XZwzNabHwvXAv3mzoK3k8OtrJhVd7QdWfcwk3i602n/k/i/LOta1+t6GbNeHXF4LN682AnzxtH/XD9lG3sX00DNtHnfxNPa7YPgoAAAAAAAAAAAAAAAAAAAAAAAAA/7GtN59ZU0qvRgLeUFqvRgIelNqrkYBV9iMrzD8vuvRejaYr2EKvRrMBW3nwm9kh2kqvRpMVbOnhqyYr2FKvRnMVbK1Xo70KNtar0VzA1no1mgvYWq9Ge0O0sV6N9gI21quR3oWFsxewsV6N9gI21qvRYAXb6tVoLmBrvRptTlUa6tVoroKt9WrkdmEi3C5MyFKvRpbssGSnTFZ6NZqeqrTQq5GF72Lhe/FK7tVIBW8orVcjAb+CXo0AAAAAAAAAAAAAAAAAAAAAAAAALPsNfSmu3OyJqrMAAAAASUVORK5CYII=");
  color: var(--iiha-text);
  overflow-x: hidden;
}

.iiha p {
  margin: 0;
}

/* サイト共通の CSS が見出しに付けている余白・太字・行の高さを打ち消す */
.iiha h1,
.iiha h2,
.iiha h3 {
  padding: 0;
  font-weight: 400;
}

.iiha img {
  vertical-align: top;
}

/* サイト共通の .pc は display: block なので、文中の span.pc（PC だけの空白）は行内に戻す */
@media (min-width: 768px) {
  .iiha span.pc {
    display: inline;
  }
}

/*---------------------
ボタン
-----------------------*/
.iiha .tel-button,
.iiha .reserve-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #fff;
  border-radius: 62px;
  box-shadow:
    0 4px 6px -1px #0000001a,
    0 2px 4px -1px #0000000f;
  font-family: var(--sans-serif);
  font-weight: 600;
  width: 100%;
  max-width: 410px;
  height: 84px;
  padding-left: 28px;
  padding-right: 20px;
}

.iiha .tel-button {
  background: var(--iiha-navy);
}

.iiha .reserve-button {
  background: var(--iiha-btn-gold);
}

.iiha .reserve-button.is-large {
  width: clamp(280px, 42vw, 410px);
  height: clamp(60px, 8vw, 84px);
}

.iiha .btn-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  line-height: 1.3;
}

.iiha .btn-subtext {
  font-size: 13px;
  letter-spacing: 0.1em;
}

.iiha .reserve-button.is-large .btn-subtext {
  font-size: clamp(11px, 1.5vw, 15px);
}

.iiha .btn-maintext {
  font-size: 22px;
  letter-spacing: 0.04em;
}

.iiha .tel-button .btn-maintext {
  font-size: 30px;
  white-space: nowrap;
}

.iiha .reserve-button.is-large .btn-maintext {
  font-size: clamp(16px, 2vw, 22px);
}

.iiha .reserve-button > svg {
  flex-shrink: 0;
  width: auto;
}

.iiha .tel-button .btn-maintext svg {
  height: 0.85em;
  width: auto;
  margin-right: 4px;
  vertical-align: -0.05em;
}

.iiha .tel-button .btn-text-container {
  padding-left: 28px;
}

.iiha .reserve-button > svg {
  height: 36px;
}

.iiha .reserve-button.is-large .btn-icon {
  height: clamp(28px, 3.4vw, 40px);
}

.iiha .arrow-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  border: 1px solid #fff;
  flex-shrink: 0;
}

.iiha .arrow-circle svg {
  width: 7px;
  height: 9px;
  margin-left: 2px;
}

@media (max-width: 767px) {
  .iiha .tel-button,
  .iiha .reserve-button {
    max-width: 300px;
    height: 68px;
    padding-left: 20px;
    padding-right: 14px;
  }

  .iiha .btn-subtext {
    font-size: 11px;
  }

  .iiha .btn-maintext {
    font-size: 18px;
  }

  .iiha .tel-button .btn-maintext {
    font-size: 24px;
  }

  .iiha .tel-button .btn-text-container {
    padding-left: 20px;
  }

  .iiha .reserve-button > svg {
    height: 30px;
  }
}

/*---------------------
ヒーロー
-----------------------*/
.iiha .hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f5f9fc;
}

.iiha .hero-bg {
  display: block;
  object-fit: cover;
  object-position: center;
}

/* 「11月8日は、いい歯の日」 */
.iiha .hero-tag {
  position: relative;
  /* MV の文字は、文字ごとの左右の余白を詰めたうえで少しだけ字間をあける（理想の字間） */
  font-feature-settings: "palt";
  letter-spacing: 0.03em;
  display: inline-block;
  border: 2px solid var(--iiha-gold);
  border-radius: 9999px;
  background: #fff;
  font-family: var(--serif);
  line-height: 1.4;
  white-space: nowrap;
}

/* 左上の光の線（3本） */
.iiha .hero-tag::before {
  content: "";
  position: absolute;
  left: -1.03em;
  top: -0.81em;
  width: 1.31em;
  height: 1.34em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 43' fill='none' stroke='%23cda53e' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 39L21 41'/%3E%3Cpath d='M9 16L30 31'/%3E%3Cpath d='M31 2L40 19'/%3E%3C/svg%3E") no-repeat center / contain;
}

.iiha .hero-tag-dark {
  color: var(--iiha-text);
  font-size: 0.9em;
}

/* 「11」「8」は「月」「日は、」より大きい（「いい歯の日」の 1.17 倍） */
.iiha .hero-tag-num {
  font-size: 1.3em;
  line-height: 1;
}

.iiha .hero-tag-gold {
  color: var(--iiha-gold);
}

.iiha .headline {
  margin: 0;
  font-family: var(--serif);
  line-height: 1;
  color: #333;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
  white-space: nowrap;
}

.iiha .headline-gold {
  font-size: 1.39em;
  line-height: 1;
  background: linear-gradient(170deg, #e4c77a 20%, #c3982f 60%, #a77d1c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.iiha .goldbadge {
  position: absolute;
  height: auto;
}

.iiha .headline-wave {
  display: block;
  max-width: none;
  height: auto;
}

.iiha .hero-lead {
  font-family: var(--serif);
  font-feature-settings: "palt";
  color: #444;
  white-space: nowrap;
}

/* 11/2(月)日～7(土)日 */
.iiha .hero-date {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: Arial, var(--sans-serif);
  font-weight: 700;
  color: #333;
  line-height: 1;
  white-space: nowrap;
}

/* 数字の「11」は「2」の上端にそろえる */
.iiha .hero-date-month {
  font-size: 0.62em;
  align-self: flex-start;
  margin: 0.08em 0 0;
  letter-spacing: 0.02em;
}

.iiha .hero-date-slash {
  /* 細い線（約 1px）で、縦から 24.5° 傾ける。上は「11」の上端、下は「2」の下端まで */
  align-self: stretch;
  width: 1px;
  background: #333;
  transform: rotate(24.5deg);
  margin: 0.085em 0.2em 0.105em 0.15em;
}

.iiha .hero-date-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.445em;
  line-height: 1;
  /* 「日」の下端を数字の下端（ベースライン）にそろえる。Arial は行の下に 0.154em の余白があるので、その分上げる */
  margin: 0 0.08em 0.27em 0.08em;
}

.iiha .hero-date-day:last-child {
  margin-right: 0;
}

.iiha .hero-date-day span {
  font-size: 0.56em;
  font-weight: 400;
  margin-bottom: 0.12em;
}

.iiha .hero-date-wave {
  font-size: 0.58em;
  margin: 0 0.04em 0.06em 0;
}

/* PC：デザイン（幅 1920px・ヒーロー高さ 575px）と同じ配置のまま、画面幅に比例して拡大・縮小する。
   --u はデザイン上の 1px。幅 1920px より狭い画面ではデザインの原寸（1px）のまま縮めない。
   写真は左右を 40% の位置で切り取る。文字の列（デザインの x=593px が中心）も写真と同じだけ左へずらし、
   人物との位置関係を保つ。ただし左端からはみ出さないよう、列の左端を画面の左端から 12px 以上あける */
@media (min-width: 768px) {
  .iiha .hero-section {
    --u: max(100vw / 1920, 1px);
    height: calc(575 * var(--u));
  }

  .iiha .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: 40% center;
  }

  /* 写真（2913×858）の表示幅は 1952 * --u。40% の位置で切り取るので、デザインの x は 0.4 * (1952u - 100vw) だけ左へずれる。
     593u - 0.4 * (1952u - 100vw) = 40vw - 187.8u。列の左半分（タイトル 272u）が画面に収まる位置より左には寄せない */
  .iiha .hero-content {
    position: absolute;
    z-index: 1;
    top: 0;
    left: max(calc(272 * var(--u) + 12px), calc(40vw - 187.8 * var(--u)));
  }

  .iiha .hero-content > * {
    position: absolute;
    left: 0;
    transform: translateX(-50%);
  }

  .iiha .hero-tag {
    top: calc(50 * var(--u));
    padding: calc(2 * var(--u)) 1.15em calc(3 * var(--u));
    font-size: calc(33 * var(--u));
  }

  .iiha .headline-wrapper {
    top: calc(105 * var(--u));
  }

  .iiha .headline {
    font-size: calc(73 * var(--u));
  }

  /* タイトルの右端に、丸の左端をそろえる */
  .iiha .goldbadge {
    left: 100%;
    top: calc(-88 * var(--u));
    width: calc(151 * var(--u));
  }

  .iiha .headline-wave {
    top: calc(204 * var(--u));
    left: calc(10 * var(--u));
    width: calc(564 * var(--u));
  }

  .iiha .hero-lead {
    top: calc(252 * var(--u));
    left: calc(-11 * var(--u));
    font-size: calc(33 * var(--u));
    line-height: calc(40 * var(--u));
    letter-spacing: 0.02em;
    text-align: center;
  }

  .iiha .hero-date {
    top: calc(346 * var(--u));
    font-size: calc(81 * var(--u));
  }

  .iiha .cta-container {
    top: calc(438 * var(--u));
  }

  .iiha .reserve-button.is-large {
    width: calc(408 * var(--u));
    height: calc(82 * var(--u));
    padding: 0 calc(22 * var(--u)) 0 calc(32 * var(--u));
  }

  .iiha .reserve-button.is-large .btn-subtext {
    font-size: calc(15 * var(--u));
  }

  .iiha .reserve-button.is-large .btn-maintext {
    font-size: calc(24 * var(--u));
  }

  .iiha .reserve-button.is-large .btn-icon {
    height: calc(36 * var(--u));
  }

  .iiha .reserve-button.is-large .arrow-circle {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
  }
}

@media (max-width: 767px) {
  /* 写真の上に重なる文字・バッジが隠れないよう、SP は写真を static にする */
  .iiha .hero-bg {
    width: 100%;
    height: auto;
    aspect-ratio: 585 / 653;
  }

  /* SP の画像（mv_bg_sp）は写真の下に文字用の淡い背景（高さの約 1/3）まで含む。
     文字を写真の下端から少し重なる位置まで引き上げる */
  .iiha .hero-container {
    margin-top: calc(-36.4vw - 24px);
    padding: 0 16px 56px;
  }

  .iiha .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }

  .iiha .hero-tag {
    z-index: 1;
    padding: 2px 1.2em 4px;
    font-size: 18px;
  }

  .iiha .headline {
    font-size: 43.5px;
    line-height: 1.15;
    letter-spacing: 0.02em;
  }

  /* SP はバッジを写真（.hero-section）の左上に置く */
  .iiha .goldbadge {
    z-index: 1;
    top: 8px;
    left: 8px;
    width: 96px;
  }

  /* 波線はタイトルの文字にかからない位置（文字の下端から少しあける） */
  .iiha .headline-wave {
    width: calc(100% + 20px);
    margin-top: -10px;
  }

  /* 波線のすぐ下に置く。SP は文字ごとの余白を詰めない（理想の幅） */
  .iiha .hero-lead {
    margin-top: -20.5px;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    font-feature-settings: normal;
  }

  .iiha .hero-date {
    font-size: 61px;
    margin: 4px 0 12px;
  }

  .iiha .cta-container {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .iiha .reserve-button.is-large {
    width: 100%;
    max-width: 306px;
    height: 70px;
  }

  .iiha .reserve-button.is-large .btn-subtext {
    font-size: 13px;
  }

  .iiha .reserve-button.is-large .btn-maintext {
    font-size: 22px;
  }
}

/*---------------------
about（ケアグッズプレゼント）
-----------------------*/
.iiha .about-section {
  width: 100%;
  /* 上の余白は、先頭のパンくずの下（.breadcrumbs の margin-bottom）でとる */
  padding: 0 clamp(20px, 5vw, 48px) clamp(64px, 7vw, 112px);
  background-image: var(--iiha-dots);
  background-size: 18px 18px;
}

.iiha .about-section > .breadcrumbs {
  margin-bottom: clamp(24px, 4vw, 64px);
}

.iiha .about-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  max-width: 1024px;
  gap: clamp(40px, 6vw, 80px);
}

.iiha .about-title {
  text-align: center;
  margin: 0;
  font-family: var(--serif);
  line-height: 1.5;
  /* 大小の文字の大きさは「地域の皆さまと…」（.message-title）とそろえる：小 41px・大 48px（SP は 25px・28px） */
  font-size: clamp(26px, 4.4vw, 41px);
  color: #444;
  letter-spacing: 0;
  /* 文字ごとの左右の余白を詰める（理想の字間） */
  font-feature-settings: "palt";
}

.iiha .about-title .is-large {
  font-size: 1.17em;
}

.iiha .about-title .is-blue {
  color: var(--iiha-navy);
}

.iiha .about-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 80px);
}

.iiha .about-text {
  flex: 1 1 auto;
  max-width: 440px;
  line-height: 2.2;
  font-size: clamp(14px, 1.4vw, 15px);
  letter-spacing: 0.08em;
}

.iiha .about-text strong {
  color: var(--iiha-gold);
  font-size: 1.15em;
  font-weight: 600;
}

.iiha .about-image-wrapper {
  flex-shrink: 0;
  width: clamp(240px, 44%, 453px);
  aspect-ratio: 680 / 469;
}

.iiha .about-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  /* SP は文字ごとの余白を詰めず、字間を広めにする（理想の字間） */
  .iiha .about-title {
    font-size: 29px;
    letter-spacing: 0.12em;
    font-feature-settings: normal;
  }

  .iiha .about-title .is-large {
    font-size: 1.12em;
  }

  .iiha .about-content {
    flex-direction: column;
  }

  .iiha .about-text {
    order: 2;
    max-width: none;
    font-size: 14px;
  }

  .iiha .about-image-wrapper {
    order: 1;
    width: 100%;
  }
}

/*---------------------
info（期間・内容などの表）
-----------------------*/
.iiha .info-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 2.5px #00000040;
  background: #fff;
}

.iiha .info-row {
  display: flex;
  align-items: center;
  gap: 12px clamp(24px, 6vw, 112px);
  padding: clamp(28px, 3.2vw, 60px) clamp(16px, 3vw, 32px);
}

.iiha .info-row:nth-child(odd) {
  background: #f9fafc;
}

.iiha .info-label {
  text-align: center;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.6;
  width: clamp(160px, 20vw, 230px);
}

.iiha .info-value {
  flex: 1 1 auto;
  max-width: 420px;
  font-size: 16px;
  line-height: 1.6;
}

.iiha .clinic-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.iiha .clinic-name {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.6;
}

.iiha .clinic-address {
  font-size: 16px;
  line-height: 1.6;
}

.iiha .booking-buttons {
  flex: 1 1 auto;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px 0;
}

@media (max-width: 767px) {
  .iiha .info-row {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
  }

  .iiha .info-label {
    width: auto;
    font-size: 16px;
  }

  .iiha .info-value {
    font-size: 14px;
    text-align: left;
  }

  .iiha .info-row:first-child .info-value,
  .iiha .info-row:nth-child(3) .info-value {
    text-align: center;
  }

  .iiha .clinic-container {
    text-align: left;
  }

  .iiha .clinic-name {
    font-size: 17px;
  }

  .iiha .clinic-address {
    font-size: 14px;
  }

  .iiha .booking-buttons {
    width: 100%;
    align-items: center;
    gap: 24px;
    padding: 8px 0;
  }
}

/*---------------------
features（毎日のケアから始めましょう）
-----------------------*/
.iiha .features-section {
  width: 100%;
  background-color: #fff;
  padding: clamp(72px, 10vw, 112px) clamp(20px, 5vw, 48px) clamp(40px, 5vw, 80px);
}

.iiha .features-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  max-width: 1050px;
  gap: clamp(40px, 6vw, 64px);
}

.iiha .features-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3vw, 40px);
}

.iiha .features-title {
  text-align: center;
  margin: 0;
  font-family: var(--serif);
  line-height: 1.4;
  color: var(--iiha-navy);
  /* 大きい文字の大きさ。小さい文字（span span）とあわせて .message-title とそろえる：大 48px・小 41px（SP は 28px・25px） */
  font-size: clamp(30px, 5.2vw, 48px);
  letter-spacing: 0;
  /* 文字ごとの左右の余白を詰める（理想の字間） */
  font-feature-settings: "palt";
}

.iiha .features-title span span {
  font-size: 0.854em;
}

.iiha .features-subtitle {
  text-align: center;
  font-size: var(--font16);
  line-height: 2;
  letter-spacing: 0.08em;
}

.iiha .features-subtitle mark {
  /* 文字より背の高い帯にする（上に大きく、下と左右に少しはみ出す）。縦の padding は行の高さに影響しない */
  padding: 0.4em 0.1em 0.1em 0.35em;
  background: #c4cee1;
  color: inherit;
}

.iiha .features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5vw, 64px);
}

.iiha .features-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 64px);
}

.iiha .features-item:nth-child(odd) {
  flex-direction: row-reverse;
}

.iiha .features-img-wrapper {
  position: relative;
  flex-shrink: 0;
  width: clamp(240px, 45%, 470px);
  aspect-ratio: 470 / 400;
}

.iiha .features-img {
  position: relative;
  width: 94%;
  height: 94%;
  object-fit: cover;
  display: block;
}

.iiha .features-img-border {
  position: absolute;
  pointer-events: none;
  top: 30px;
  bottom: 0;
  left: 30px;
  right: 0;
  border: 2px solid var(--iiha-blue);
}

.iiha .features-item:nth-child(even) .features-img {
  margin-left: auto;
}

.iiha .features-item:nth-child(even) .features-img-border {
  left: 0;
  right: 30px;
}

.iiha .features-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  max-width: 480px;
  gap: clamp(12px, 1.4vw, 20px);
}

.iiha .features-item:nth-child(even) .features-content {
  max-width: 470px;
}

.iiha .features-item-title {
  margin: 0;
  color: #3e3f3f;
  font-family: var(--serif);
  /* 本文（16px）に対して小さくなりすぎないよう、幅 1100px 前後でも 26px 前後にする */
  font-size: clamp(22px, 2.4vw, 27px);
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.iiha .features-item-body {
  font-size: var(--font16);
  line-height: 2;
  letter-spacing: 0.08em;
}

@media (max-width: 767px) {
  /* 改行は「お口の健康を守る／ために毎日のケアから／始めましょう」（index.html の br.sp） */
  .iiha .features-title {
    font-size: 36.5px;
  }

  .iiha .features-title span span {
    font-size: 0.893em;
  }

  .iiha .features-subtitle {
    text-align: left;
    font-size: 16px;
  }

  .iiha .features-item,
  .iiha .features-item:nth-child(odd) {
    flex-direction: column;
    align-items: stretch;
  }

  .iiha .features-img-wrapper {
    width: 82%;
    margin: 0 auto;
  }

  .iiha .features-img-border {
    top: 16px;
    left: 4%;
    right: -4%;
    bottom: -16px;
  }

  .iiha .features-item:nth-child(even) .features-img-border {
    left: -4%;
    right: 4%;
  }

  .iiha .features-item-title {
    font-size: 22px;
    margin-top: 16px;
    text-align: center;
  }

  .iiha .features-item-body {
    font-size: 14px;
    text-align: justify;
  }
}

/*---------------------
concern（気になることはありませんか？）
-----------------------*/
.iiha .concern-section {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: clamp(24px, 5vw, 96px);
  padding: clamp(56px, 4.5vw, 72px) clamp(20px, 5vw, 48px) clamp(64px, 6vw, 96px);
  background: #e5eaf2;
}

/* 左上から右下へ斜めに横切る白い帯 */
.iiha .concern-section::before {
  content: "";
  position: absolute;
  left: -400px;
  top: -90px;
  width: calc(160vw + 400px);
  height: 280px;
  background: #fff;
  /* 帯の下辺が、左端でセクション上端から 190px 下を通る（幅 280px、デザインの傾き 1:2） */
  transform-origin: 400px 100%;
  transform: rotate(26.6deg);
}

.iiha .concern-container {
  position: relative;
  margin: 0 auto;
  max-width: 1300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.iiha .concern-label {
  font-size: 18px;
  letter-spacing: 0.15em;
  color: var(--iiha-navy);
}

.iiha .concern-title {
  margin: 4px 0 0;
  text-align: center;
  font-family: var(--serif);
  /* 下の説明文（15px）との比率をデザインに合わせ、PC では 38px のまま縮めない */
  font-size: clamp(30px, 4.2vw, 38px);
  line-height: 1.5;
  color: #444;
  letter-spacing: 0.04em;
  /* 文字ごとの左右の余白を詰めたうえで、少しだけ字間をあける（理想の字間） */
  font-feature-settings: "palt";
}

.iiha .concern-desc {
  margin-top: clamp(24px, 3vw, 40px);
  text-align: center;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.08em;
  color: #444;
}

.iiha .concern-list {
  list-style: none;
  margin: clamp(40px, 4.5vw, 64px) 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
}

.iiha .concern-item {
  position: relative;
  /* 番号・名前の文字はカードの幅に比例させる（cqi） */
  container-type: inline-size;
  flex: 0 0 calc((100% - 96px) / 3);
  max-width: 400px;
  aspect-ratio: 593 / 502;
}

/* 画像（step0N.webp）は角を斜めに落とした写真と、下の白い文字欄まで含めたカード全体。青い線だけ CSS で重ねる */
.iiha .concern-item img {
  width: 100%;
  height: 100%;
  display: block;
}

.iiha .concern-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 593 502' fill='none' stroke='%233a5b9b' stroke-width='3'%3E%3Cpath d='M0 179L93 81'/%3E%3Cpath d='M485 348L587 245'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}

.iiha .concern-num {
  position: absolute;
  /* 左上の青い線に重ならないよう、角に寄せる */
  left: 2cqi;
  top: -1.2cqi;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 11.5cqi;
  line-height: 1.2;
  color: #a6b5d2;
}

/* 画像下部の白い欄（高さ 152/502）に文字を置く */
.iiha .concern-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30.3%;
  display: grid;
  place-content: center;
  padding: 0 12px;
  text-align: center;
  font-family: var(--serif);
  font-size: 5.9cqi;
  line-height: 1.5;
  color: var(--iiha-navy);
}

.iiha .concern-message {
  margin-top: clamp(48px, 6vw, 88px);
  width: 100%;
  max-width: 886px;
  padding: 18px 24px;
  border-radius: 9999px;
  background: var(--iiha-navy);
  color: #fff;
  text-align: center;
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

@media (max-width: 1023px) {
  .iiha .concern-list {
    gap: 32px;
  }

  .iiha .concern-item {
    flex-basis: calc((100% - 32px) / 2);
  }
}

@media (max-width: 767px) {
  .iiha .concern-section::before {
    /* SP は見出しの下（カードの裏）を通す */
    top: 440px;
    width: 200vw;
    height: 36vw;
  }

  .iiha .concern-label {
    font-size: 14px;
  }

  .iiha .concern-title {
    font-size: 30px;
  }

  .iiha .concern-desc {
    text-align: left;
    font-size: 14px;
  }

  .iiha .concern-list {
    gap: 32px;
  }

  /* SP は画像下部の白い文字欄（高さ 152/502）を 112 まで詰める（下の白い部分を隠す）。
     青い線（::before）は画像と同じ比率のまま上端にそろえ、ずれないようにする */
  .iiha .concern-item {
    flex-basis: 100%;
    aspect-ratio: 593 / 462;
    overflow: hidden;
  }

  .iiha .concern-item img {
    height: auto;
  }

  .iiha .concern-item::before {
    inset: 0 0 auto;
    aspect-ratio: 593 / 502;
  }

  .iiha .concern-num {
    font-size: 36px;
  }

  .iiha .concern-name {
    height: 24.2%;
    font-size: 17px;
  }

  .iiha .concern-message {
    border-radius: 48px;
    padding: 18px 16px;
  }
}

/*---------------------
メッセージ
-----------------------*/
.iiha .message-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: clamp(64px, 7vw, 132px) clamp(20px, 5vw, 80px) clamp(64px, 5.5vw, 106px);
}

.iiha .message-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 写真を明るく見せる白の半透明（cta_bg も白みを帯びた画像だが、理想に合わせてさらに薄く重ねる） */
.iiha .message-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.3);
}

.iiha .message-container {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  max-width: 1024px;
}

.iiha .message-box {
  border-radius: 4px;
  width: 100%;
  background: #ffffffd9;
  padding: clamp(32px, 3vw, 48px) clamp(20px, 4vw, 64px);
}

.iiha .message-title {
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-family: var(--serif);
  line-height: 1.5;
  text-align: center;
  /* 小さい方の文字の大きさ。大きい文字（.is-large）は 48px。PC では幅 930px まで縮めない */
  font-size: clamp(26px, 4.4vw, 41px);
  color: #3e3f3f;
  letter-spacing: 0;
  /* 文字ごとの左右の余白を詰める（理想の字間） */
  font-feature-settings: "palt";
}

.iiha .message-title .is-large {
  font-size: 1.17em;
}

.iiha .message-title .is-blue {
  color: var(--iiha-navy);
}

.iiha .message-body {
  text-align: center;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.08em;
}

@media (max-width: 767px) {
  .iiha .message-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .iiha .message-box {
    padding: 32px 16px;
  }

  .iiha .message-title {
    font-size: 25px;
  }

  .iiha .message-title .is-large {
    font-size: 1.12em;
  }

  .iiha .message-body {
    text-align: left;
    font-size: 14px;
  }
}