@charset "utf-8";
.u-pb10 {
  padding-bottom: 10px;
}
.u-pb15 {
  padding-bottom: 15px;
}
.u-pb20 {
  padding-bottom: clamp(10px, var(--px-20), 20px);
}
.u-pb30 {
  padding-bottom: clamp(15px, var(--px-30), 30px);
}
.u-pb40 {
  padding-bottom: clamp(20px, var(--px-40), 40px);
}
.u-pb50 {
  padding-bottom: clamp(25px, var(--px-50), 50px);
}
.u-pb60 {
  padding-bottom: clamp(30px, var(--px-60), 60px);
}
.u-pb70 {
  padding-bottom: clamp(30px, var(--px-70), 70px);
}
.u-pb80 {
  padding-bottom: clamp(40px, var(--px-80), 80px);
}
.u-pb90 {
  padding-bottom: clamp(40px, var(--px-90), 90px);
}
.u-pb100 {
  padding-bottom: clamp(50px, var(--px-100), 100px);
}
.u-pb120 {
  padding-bottom: clamp(50px, var(--px-120), 120px);
}
.u-mb10 {
  margin-bottom: 10px;
}
.u-mb15 {
  margin-bottom: 15px;
}
.u-mb20 {
  margin-bottom: clamp(10px, var(--px-20), 20px);
}
.u-mb30 {
  margin-bottom: clamp(15px, var(--px-30), 30px);
}
.u-mb40 {
  margin-bottom: clamp(20px, var(--px-40), 40px);
}
.u-mb50 {
  margin-bottom: clamp(25px, var(--px-50), 50px);
}
.u-mb60 {
  margin-bottom: clamp(30px, var(--px-60), 60px);
}
.u-mb70 {
  margin-bottom: clamp(30px, var(--px-70), 70px);
}
.u-mb80 {
  margin-bottom: clamp(40px, var(--px-80), 80px);
}
.u-mb90 {
  margin-bottom: clamp(40px, var(--px-90), 90px);
}
.u-mb100 {
  margin-bottom: clamp(50px, var(--px-100), 100px);
}
.u-mb120 {
  margin-bottom: clamp(50px, var(--px-120), 120px);
}

/* =========================================================
   事務所案内ページ（page-company.php）
   ========================================================= */
.p-company {
  padding-bottom: clamp(50px, var(--px-120), 120px);
}

/* ---------- MV（パンくず） ---------- */
.c-mv {
  position: relative;
  width: min(1380px, 95.83%);
  margin-inline: auto;
}
.c-mv__img img {
  display: block;
  width: 100%;
  height: clamp(220px, 34.79vw, 501px);
  object-fit: cover;
  border-radius: 30px;
  /* 右下を切り欠いて、その部分は body の背景が透けて見えるようにする
     （左上だけ大きな角丸 = Figma のブーリアン形状を SVG マスクで再現） */
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1380 501' preserveAspectRatio='none'><path d='M0 0 H1380 V330 A30 30 0 0 1 1350 360 H972 A44 44 0 0 0 928 404 V471 A30 30 0 0 1 898 501 H0 Z' fill='%23000'/></svg>")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1380 501' preserveAspectRatio='none'><path d='M0 0 H1380 V330 A30 30 0 0 1 1350 360 H972 A44 44 0 0 0 928 404 V471 A30 30 0 0 1 898 501 H0 Z' fill='%23000'/></svg>")
    center / 100% 100% no-repeat;
}
.c-mv__head {
  position: absolute;
  right: 0;
  bottom: 0;
  /* 切り欠きと同サイズ（452 / 1380 = 32.75%, 141 / 501 = 28.14%） */
  width: 32.75%;
  height: 28.14%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #483026;
}
.c-mv__ttl {
  font-family: var(--b-font-deco);
  font-weight: 700;
  font-size: clamp(22px, 2.22vw, 32px);
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.c-mv__bread {
  margin-top: clamp(10px, 1.4vw, 20px);
  font-size: clamp(13px, 1.11vw, 16px);
  letter-spacing: 0.125em;
}
.c-mv__bread a {
  color: inherit;
}

/* ---------- ご挨拶 ---------- */
.p-company-greeting {
  padding-top: clamp(50px, 6.9vw, 100px);
}
.p-company-greeting__inner {
  width: min(808px, 90%);
  margin-inline: auto;
  padding-bottom: clamp(30px, 4vw, 50px);
  border-bottom: 1px solid #c9c4bf;
}
.p-company-greeting__head {
  margin-bottom: clamp(28px, 4vw, 50px);
}
.p-company-greeting__en {
  display: inline-block;
  font-weight: 700;
  font-size: clamp(14px, 1.11vw, 16px);
  letter-spacing: 0.125em;
  color: #006f9b;
  padding-bottom: 6px;
  border-bottom: 1px solid #006f9b;
}
.p-company-greeting__ja {
  margin-top: 10px;
  font-family: var(--b-font-deco);
  font-weight: 700;
  font-size: clamp(22px, 1.94vw, 28px);
  letter-spacing: 0.21em;
  line-height: 1.6;
  color: #000;
}
.p-company-greeting__text {
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 2.5;
  letter-spacing: 0.125em;
  color: #000;
}
.p-company-greeting__sign {
  margin-top: clamp(24px, 2.7vw, 40px);
  text-align: right;
  font-size: clamp(14px, 1.11vw, 16px);
  letter-spacing: 0.125em;
}

/* ---------- 事務所概要 ---------- */
.p-company-overview {
  padding-top: clamp(40px, 5vw, 70px);
}
.p-company-overview__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.p-company-overview__ja {
  font-family: var(--b-font-deco);
  font-weight: 700;
  font-size: clamp(20px, 1.67vw, 24px);
  letter-spacing: 0.25em;
  line-height: 1.4;
  color: #000;
}
.p-company-overview__en {
  font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing: 0.125em;
  color: #000;
}
.p-company-overview__arrow {
  display: block;
  width: clamp(26px, 2.4vw, 34px);
  height: auto;
  margin-top: 10px;
  animation: company-arrow-bounce 1.4s ease-in-out infinite;
}
@keyframes company-arrow-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}
.p-company-overview__card {
  width: min(1100px, 92%);
  margin: clamp(30px, 4vw, 55px) auto 0;
  background: #fff;
  border-radius: 20px;
  padding: clamp(30px, 4.2vw, 60px) clamp(20px, 7.6vw, 110px);
  box-shadow: 0 6px 24px rgba(2, 44, 71, 0.06);
}
/* 事務所概要テーブル（dl）— ラベルセルと値セルが各自下線を持ち、
   間の 20px は線が途切れる。各行の下線は下端で揃う（grid stretch）。 */
.p-company-table {
  display: grid;
  grid-template-columns: 260px 1fr;
  column-gap: 20px;
}
.p-company-table dt,
.p-company-table dd {
  padding-block: 20px;
  border-bottom: 2px solid #4fb2cd;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 2;
  color: #022c47;
}
.p-company-table dt {
  font-family: var(--b-font-deco);
  font-weight: 500;
  text-align: center;
}
.p-company-table dd {
  padding-inline: 30px;
  font-weight: 400;
  letter-spacing: 0;
}
.p-company-table dd:first-of-type {
  font-weight: 500; /* 事務所名のみ Medium */
}

/* ---------- MAP ---------- */
.p-company-map {
  margin-top: clamp(45px, 6.25vw, 90px);
}
.p-company-map__frame {
  width: min(1080px, 92%);
  height: clamp(220px, 20.8vw, 300px);
  margin-inline: auto;
}
.p-company-map__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- SP ---------- */
@media screen and (max-width: 680px) {
  .c-mv {
    width: 100%;
    padding-inline: 10px;
  }
  .c-mv__img img {
    object-position: left;
  }
  /* SP は切り欠きを横 60%（828 / 1380）まで広げる */
  .c-mv__img img {
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1380 501' preserveAspectRatio='none'><path d='M0 0 H1380 V307 A30 30 0 0 1 1350 337 H596 A44 44 0 0 0 552 381 V471 A30 30 0 0 1 522 501 H0 Z' fill='%23000'/></svg>")
      center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1380 501' preserveAspectRatio='none'><path d='M0 0 H1380 V307 A30 30 0 0 1 1350 337 H596 A44 44 0 0 0 552 381 V471 A30 30 0 0 1 522 501 H0 Z' fill='%23000'/></svg>")
      center / 100% 100% no-repeat;
  }
  .c-mv__head {
    width: 60%;
    height: 32.73%;
  }
  .c-mv__bread {
    margin-top: 0;
  }
  .p-company-greeting__text br {
    display: none;
  }
  .p-company-overview__card {
    padding: 24px 18px;
  }
  .p-company-table {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .p-company-table dt {
    padding: 16px 0 2px;
    text-align: left;
    border-bottom: none;
    color: #006f9b;
  }
  .p-company-table dd {
    padding: 0 0 16px;
  }
}

/* =========================================================
   報酬の目安ページ（page-price.php）
   ========================================================= */
.p-price {
  padding-bottom: clamp(50px, var(--px-120), 120px);
}

/* ---------- 報酬について（ご挨拶と同形） ---------- */
.p-price-intro {
  padding-top: clamp(50px, 6.9vw, 100px);
}
.p-price-intro__inner {
  width: min(806px, 90%);
  margin-inline: auto;
  padding-bottom: clamp(30px, 4vw, 50px);
  border-bottom: 1px solid #c9c4bf;
}
.p-price-intro__head {
  margin-bottom: clamp(28px, 4vw, 50px);
}
.p-price-intro__en {
  display: inline-block;
  font-weight: 700;
  font-size: clamp(14px, 1.11vw, 16px);
  letter-spacing: 0.125em;
  color: #006f9b;
  padding-bottom: 6px;
  border-bottom: 1px solid #006f9b;
}
.p-price-intro__ja {
  margin-top: 10px;
  font-family: var(--b-font-deco);
  font-weight: 700;
  font-size: clamp(22px, 1.94vw, 28px);
  letter-spacing: 0.21em;
  line-height: 1.6;
  color: #000;
}
.p-price-intro__text {
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 2.5;
  letter-spacing: 0.125em;
  color: #000;
}

/* ---------- 料金表 見出し（事務所概要と同形） ---------- */
.p-price-fee {
  padding-top: clamp(40px, 5vw, 70px);
}
.p-price-fee__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.p-price-fee__ja {
  font-family: var(--b-font-deco);
  font-weight: 700;
  font-size: clamp(20px, 1.67vw, 24px);
  letter-spacing: 0.25em;
  line-height: 1.4;
  color: #000;
}
.p-price-fee__en {
  font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing: 0.125em;
  color: #000;
}
.p-price-fee__arrow {
  display: block;
  width: clamp(26px, 2.4vw, 34px);
  height: auto;
  margin-top: 10px;
  animation: company-arrow-bounce 1.4s ease-in-out infinite;
}

/* ---------- カテゴリ（pill 見出し＋価格リスト） ---------- */
.p-price-cat {
  width: min(743px, 92%);
  margin: clamp(40px, 5vw, 80px) auto 0;
}
.p-price-cat__ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 8px 20px;
  background: #fff;
  border: 3px solid #006f9b;
  border-radius: 50px;
  font-family: var(--b-font-deco);
  font-weight: 700;
  font-size: clamp(19px, 1.67vw, 24px);
  letter-spacing: 0.083em;
  text-align: center;
  color: #000;
}
.p-price-cat__list {
  margin-top: clamp(18px, 2.5vw, 30px);
  padding-inline: clamp(8px, 1.1vw, 16px);
}

/* ---------- 価格アイテム ---------- */
.p-price-item {
  padding-top: clamp(16px, 2vw, 26px);
}
.p-price-item__main {
  padding-bottom: clamp(8px, 1vw, 12px);
  border-bottom: 1px solid #cfccc7;
}
.p-price-item__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: clamp(10px, 1.4vw, 20px);
}
.p-price-item__name {
  display: inline-block;
  font-family: var(--b-font-deco);
  font-weight: 500;
  font-size: clamp(16px, 1.39vw, 20px);
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: #000;
}
.p-price-item__name::first-letter {
  font-size: 1.2em; /* 先頭1文字を 24px 相当に */
}
.p-price-item__price {
  flex-shrink: 0;
  font-weight: 500;
  font-size: clamp(16px, 1.39vw, 20px);
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: #000;
}
.p-price-item__sub {
  margin-top: 4px;
  font-size: clamp(13px, 1.11vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.125em;
  color: #000;
}
.p-price-item__note {
  margin-top: clamp(8px, 1vw, 12px);
  font-size: clamp(13px, 1.11vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.125em;
  color: #000;
}
.p-price-fee__foot {
  margin-top: clamp(22px, 3vw, 40px);
  text-align: center;
  font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing: 0.125em;
  color: #000;
}

/* ---------- SP ---------- */
@media screen and (max-width: 680px) {
  .p-price-intro__text br {
    display: none;
  }
  .p-price-item__head {
    flex-wrap: wrap;
  }
  .p-price-item__price {
    margin-left: auto;
  }
}

/* =========================================================
   共通：pill 見出し（白地・青ボーダー・角丸50px）
   ========================================================= */
.c-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(743px, 92%);
  margin-inline: auto;
  min-height: 60px;
  padding: 10px 24px;
  background: #fff;
  border: 3px solid #006f9b;
  border-radius: 50px;
  font-family: var(--b-font-deco);
  font-weight: 700;
  font-size: clamp(18px, 1.67vw, 24px);
  letter-spacing: 0.083em;
  text-align: center;
  color: #000;
}

/* =========================================================
   その他法律業務ページ（page-other.php）
   ========================================================= */
.p-other {
  padding-bottom: clamp(50px, var(--px-120), 120px);
}

/* ---------- リード ---------- */
.p-other-lead {
  padding-top: clamp(50px, 6.9vw, 100px);
  text-align: center;
}
.p-other-lead__text {
  font-family: var(--b-font-deco);
  font-weight: 700;
  font-size: clamp(17px, 1.67vw, 24px);
  line-height: 2.1;
  letter-spacing: 0.083em;
  color: #000;
}
.p-other-lead__arrow {
  display: inline-block;
  width: clamp(26px, 2.4vw, 34px);
  height: auto;
  margin-top: clamp(20px, 2.5vw, 36px);
  animation: company-arrow-bounce 1.4s ease-in-out infinite;
}

/* ---------- About 見出し（EN + 番号 + 下線 / JA） ---------- */
.c-en-head {
  margin-bottom: clamp(20px, 2.5vw, 30px);
}
.c-en-head__en {
  display: inline-block;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.125em;
  color: #006f9b;
  padding-bottom: 6px;
  border-bottom: 1px solid #006f9b;
}
.c-en-head__num {
  font-size: 20px;
}
.c-en-head__ja {
  margin-top: 12px;
  font-family: var(--b-font-deco);
  font-weight: 700;
  font-size: clamp(22px, 1.94vw, 28px);
  letter-spacing: 0.21em;
  line-height: 1.6;
  color: #000;
}

/* ---------- About 本文（テキスト＋画像） ---------- */
.p-other-about {
  width: min(966px, 90%);
  margin: clamp(40px, 6vw, 80px) auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(30px, 4vw, 60px);
}
.p-other-about__body {
  flex: 1;
  min-width: 0;
}
.p-other-about__text {
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 2.5;
  letter-spacing: 0.125em;
  color: #000;
}
.p-other-about__text u {
  text-underline-offset: 0.2em;
}
.p-other-about__img {
  flex-shrink: 0;
  width: clamp(240px, 24vw, 345px);
}
.p-other-about__img img {
  width: 100%;
  border-radius: 20px;
}
.p-other-about--full {
  display: block;
}

/* ---------- サービス（pill + リスト） ---------- */
.p-other-service {
  padding-top: clamp(40px, 6vw, 80px);
}
.p-other-numlist {
  width: min(1000px, 90%);
  margin: clamp(24px, 3vw, 40px) auto 0;
}
.p-other-numlist li {
  display: flex;
  gap: clamp(8px, 1vw, 14px);
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 2.5;
  letter-spacing: 0.125em;
  color: #000;
}
.p-other-numlist__num {
  flex-shrink: 0;
  font-weight: 700;
  font-size: clamp(16px, 1.39vw, 20px);
  line-height: 2;
  color: #000;
}

/* ---------- 箇条書き ---------- */
.p-other-bullets {
  width: fit-content;
  max-width: 90%;
  margin: clamp(24px, 3vw, 40px) auto 0;
}
.p-other-bullets__list li {
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 2.2;
  letter-spacing: 0.125em;
  color: #000;
}
.p-other-bullets__list li::before {
  content: "●";
  margin-right: 0.6em;
  font-size: 0.8em;
}
.p-other-bullets__note {
  margin-top: clamp(16px, 2vw, 28px);
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 2.2;
  letter-spacing: 0.125em;
  color: #000;
}

/* ---------- SP ---------- */
@media screen and (max-width: 680px) {
  .p-other-lead__text br,
  .p-other-about__text br {
    display: none;
  }
  .p-other-about {
    flex-direction: column;
    align-items: stretch;
  }
  .p-other-about__img {
    width: 100%;
    max-width: 345px;
    margin-inline: auto;
  }
}

/* =========================================================
   相続について ページ（page-inheritance.php）
   ========================================================= */
.p-inheritance {
  padding-bottom: clamp(50px, var(--px-120), 120px);
}

/* ---------- 共通：導入カード（黒枠・装飾スパークル）。--fill で薄青塗り ---------- */
.c-intro-card {
  width: min(1087px, 92%);
  margin: clamp(40px, 6vw, 80px) auto 0;
  padding: clamp(34px, 4.4vw, 56px) clamp(24px, 5.5vw, 80px);
  background: #fff;
  border: 3px solid #000;
  border-radius: 30px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}
.c-intro-card--fill {
  background: #e9faff;
}
.c-intro-card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 40px);
}
.c-intro-card__deco {
  flex-shrink: 0;
  width: clamp(32px, 3.8vw, 55px);
  height: auto;
}
.c-intro-card__lead {
  font-family: var(--b-font-deco);
  font-weight: 700;
  font-size: clamp(17px, 1.67vw, 24px);
  line-height: 2.1;
  letter-spacing: 0.083em;
  text-align: center;
  color: #000;
}
.c-intro-card__text {
  margin-top: clamp(20px, 3vw, 36px);
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 2.8;
  letter-spacing: 0.125em;
  color: #000;
}

/* ---------- 各セクション（Question / pill + 本文） ---------- */
.p-inheritance-sec {
  padding-top: clamp(40px, 6vw, 80px);
}
.p-inheritance-sec__inner {
  width: min(1005px, 90%);
  margin: clamp(24px, 3vw, 40px) auto 0;
}
.p-inheritance-sec__text {
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 2.5;
  letter-spacing: 0.125em;
  color: #000;
}

/* ---------- 薄青塗り・黒枠の pill ---------- */
.c-pill--fill {
  background: #e9faff;
  border-color: #000;
}

/* ---------- SP ---------- */
@media screen and (max-width: 680px) {
  .c-intro-card__lead br,
  .c-intro-card__text br,
  .p-inheritance-sec__text br {
    display: none;
  }
  .c-intro-card__deco {
    width: 28px;
  }
}

/* =========================================================
   共通：メディア（テキスト＋画像。--reverse で左右反転）
   ========================================================= */
.c-media {
  width: min(1064px, 92%);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(30px, 4vw, 60px);
}
.c-media--reverse {
  flex-direction: row-reverse;
}
.c-media__body {
  flex: 1;
  min-width: 0;
}
.c-media__text {
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 2.5;
  letter-spacing: 0.125em;
  color: #000;
}
.c-media__img {
  flex-shrink: 0;
  width: clamp(240px, 24vw, 345px);
}
.c-media__img img {
  width: 100%;
  border-radius: 20px;
}

/* =========================================================
   登記について ページ（page-registration.php）
   ========================================================= */
.p-registration {
  padding-bottom: clamp(50px, var(--px-120), 120px);
}
.p-registration-q {
  padding-top: clamp(40px, 6vw, 80px);
}
.p-registration-q__line {
  display: block;
  width: min(1063px, 92%);
  margin: clamp(30px, 4vw, 50px) auto 0;
  border-top: 1px solid #c9c4bf;
}

/* こんな時に必要です ボックス */
.p-registration-need {
  width: min(1064px, 92%);
  margin: clamp(28px, 3.5vw, 50px) auto 0;
  padding: clamp(24px, 3vw, 36px) clamp(20px, 5.8vw, 84px);
  background: #fff;
  border-radius: 10px;
}
.p-registration-need__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.5vw, 18px);
}
.p-registration-need__deco {
  flex-shrink: 0;
  width: clamp(18px, 1.8vw, 25px);
  height: auto;
}
.p-registration-need__title {
  font-family: var(--b-font-deco);
  font-weight: 700;
  font-size: clamp(17px, 1.39vw, 20px);
  letter-spacing: 0.125em;
  color: #000;
}
.p-registration-need__cols {
  margin-top: clamp(16px, 2vw, 26px);
  display: flex;
  gap: clamp(28px, 7.8vw, 112px);
}
.p-registration-need__col {
  flex: 1;
  min-width: 0;
}
.p-registration-need__col li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(8px, 1vw, 12px) 0;
  border-bottom: 1px solid #c9c4bf;
  font-size: clamp(13px, 1.11vw, 16px);
  letter-spacing: 0.125em;
  color: #000;
}
.p-registration-need__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.p-registration-need__more {
  margin-top: 8px;
  text-align: right;
  font-size: clamp(12px, 0.97vw, 14px);
  color: #000;
}

/* ---------- SP ---------- */
@media screen and (max-width: 680px) {
  .c-media,
  .c-media--reverse {
    flex-direction: column;
    align-items: stretch;
  }
  .c-media__img {
    width: 100%;
    max-width: 345px;
    margin-inline: auto;
  }
  .c-media__text br {
    display: none;
  }
  .p-registration-need__cols {
    flex-direction: column;
    gap: 0;
  }
}