/* MEN'S ECLAT 2026-10-27：クララビューティクリニック高崎院「メンズ美容総合」と同じ構成・文字サイズ（院長指示）。
   文字サイズ・太さ・行間は 2026-10-27 に先方ページを 390px／1280px で実測した値。色はメンズエクラの白と水色（mens.css の変数）。
   トップ・ニキビ跡・料金の3ページで共用。mens.css の後に読み込む。 */

.mens.hub {
  background: var(--white);
  font-size: 16px;
  line-height: 1.8;
}

.mens.hub section[data-section] {
  padding: 72px 0;
}

.mens .h-tint {
  background: var(--offwhite);
}

.mens .h-ice {
  background: var(--ice);
}

/* ---- 章の見出し（英字ラベル・見出し・補足） ---- */
.mens .h-head {
  margin-bottom: 36px;
  text-align: center;
}

.mens .h-en {
  color: var(--gold-ink);
  font-family: var(--latin);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.18em;
}

.mens .h-heading {
  margin-top: 6px;
  color: var(--navy-ink);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.mens .h-sub {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
}

.mens .h-text > p + p {
  margin-top: 1em;
}

.mens .h-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

/* ---- ファーストビュー ---- */
.mens.hub section.h-mv {
  padding: 0;
}

.mens .h-mv__visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--ice);
}

.mens .h-mv__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}

.mens .h-mv__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(242, 248, 251, 0.82) 0%, rgba(242, 248, 251, 0.5) 42%, rgba(242, 248, 251, 0) 64%);
}

.mens .h-mv__visual .slot__caption {
  z-index: 2;
}

.mens .h-mv__text {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  width: 66%;
  padding-left: 20px;
  transform: translateY(-50%);
}

/* 顔が中央寄りの写真（ニキビ跡ページ）は、スマホで文字を左半分に収めて顔に重ねない */
.mens .h-mv--narrow .h-mv__text {
  width: 52%;
  padding-left: 16px;
}

.mens .h-mv--narrow .h-mv__visual::after {
  background: linear-gradient(90deg, rgba(242, 248, 251, 0.92) 0%, rgba(242, 248, 251, 0.75) 44%, rgba(242, 248, 251, 0) 60%);
}

.mens .h-mv__en {
  color: var(--gold-ink);
  font-family: var(--latin);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
}

.mens h1.h-mv__title {
  margin-top: 6px;
  color: var(--navy-ink);
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.mens .h-mv__lead {
  margin-top: 10px;
  color: var(--navy-ink);
  font-size: 13.3px;
  font-weight: 700;
  line-height: 1.8;
}

.mens .h-mv__desc {
  padding: 24px 0 36px;
  background: var(--ice);
}

.mens .h-mv__desc p {
  font-size: 16px;
  line-height: 1.9;
}

.mens .h-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 12px;
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid var(--gold);
  background: var(--white);
  color: var(--navy-ink);
  text-align: center;
}

.mens .h-offer strong {
  font-family: var(--latin);
  font-size: 30px;
  line-height: 1.2;
}

.mens .h-offer small {
  width: 100%;
  color: var(--muted);
  font-size: 12px;
}

.mens .h-mv__desc .cta-group,
.mens .h-contact .cta-group {
  margin-top: 22px;
}

/* ---- お悩み ---- */
.mens .h-check {
  display: grid;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  list-style: none;
}

.mens .h-check li {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.mens .h-check li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--gold-ink);
  border-radius: 3px;
  background: var(--white);
}

.mens .h-check li::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 7px;
  width: 6px;
  height: 10px;
  border: solid var(--gold-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.mens .h-trouble__note {
  margin-top: 36px;
  color: var(--gold-ink);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* ---- 相談パネル ---- */
.mens.hub section.h-contact {
  padding: 0;
  background: var(--navy);
  color: var(--white);
}

.mens .h-contact__media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.mens .h-contact__panel {
  padding: 48px 0 56px;
  text-align: center;
}

.mens .h-contact .h-en {
  color: var(--gold-soft);
}

.mens .h-contact__title {
  margin-top: 8px;
  color: var(--white);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
}

.mens .h-contact__text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.9;
}

/* ---- 院長メッセージ ---- */
.mens .h-message__layout {
  display: grid;
  gap: 28px;
}

.mens .h-message__catch {
  color: var(--navy-ink);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
}

.mens .h-message__text {
  margin-top: 16px;
}

.mens .h-message__text p + p {
  margin-top: 1em;
}

.mens .h-message__sign {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.8;
}

.mens .h-message__sign strong {
  display: block;
  color: var(--navy-ink);
  font-family: var(--serif);
  font-size: 20px;
}

.mens .h-message__image img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ---- 流れ：1枚のパネルに、番号の丸を線でつないで並べる（スマホは縦、PCは横） ---- */
.mens .h-steps {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 18px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(23, 56, 77, 0.06);
  list-style: none;
}

.mens .h-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 14px;
  padding: 16px 0;
}

.mens .h-step + .h-step {
  border-top: 1px dashed var(--line);
}

/* 丸と丸をつなぐ縦線 */
.mens .h-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 64px;
  bottom: -16px;
  left: 23px;
  width: 2px;
  background: var(--gold-soft);
}

.mens .h-step__num {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold-ink);
  color: var(--white);
  font-family: var(--latin);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.mens .h-step__num small {
  font-size: 8px;
  letter-spacing: 0.08em;
}

.mens .h-step__title {
  color: var(--navy-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.mens .h-step__desc {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.75;
}

/* ニキビ跡のタイプ：流れと同じ1枚のパネル。スマホは図＋文の行、PCは横並び */
.mens .h-typelist {
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 18px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(23, 56, 77, 0.06);
  list-style: none;
}

.mens .h-typeitem {
  display: grid;
  grid-template-columns: 112px 1fr;
  column-gap: 14px;
  align-items: start;
  padding: 16px 0;
}

.mens .h-typeitem + .h-typeitem {
  border-top: 1px dashed var(--line);
}

.mens .h-typeitem__img {
  width: 112px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 60%;
  border-radius: 8px;
}

.mens .h-typeitem__title {
  color: var(--navy-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.mens .h-typeitem__desc {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.75;
}

/* 凹みの3タイプ（断面図つき） */
.mens .h-types {
  display: grid;
  gap: 14px;
  list-style: none;
}

.mens .h-type {
  overflow: hidden;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(23, 56, 77, 0.06);
}

.mens .h-type__img {
  background: var(--offwhite);
}

.mens .h-type__img img {
  aspect-ratio: 12 / 5;
  object-fit: cover;
  object-position: 50% 60%;
}

.mens .h-type h3 {
  padding: 14px 18px 0;
  font-size: 18px;
}

.mens .h-type p {
  padding: 6px 18px 18px;
  font-size: 14px;
  line-height: 1.8;
}

.mens .h-types + .h-reasons {
  margin-top: 14px;
  gap: 14px;
}

.mens .h-types + .h-reasons .h-reason {
  padding: 16px 18px;
}

.mens .h-types + .h-reasons .h-reason h3 {
  margin-top: 0;
  font-size: 17px;
}

.mens .h-types + .h-reasons .h-reason p {
  margin-top: 6px;
  font-size: 14px;
}

/* ---- メニュー一覧カード ---- */
.mens .h-menuGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}

.mens .h-menuCard {
  position: relative;
  display: block;
  height: 100%;
  min-height: 170px;
  padding: 12px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(23, 56, 77, 0.08);
  text-decoration: none;
}

.mens .h-menuCard__num {
  display: block;
  color: var(--gold-ink);
  font-family: var(--latin);
  font-size: 50px;
  font-weight: 700;
  line-height: 1.4;
}

.mens .h-menuCard::after {
  content: "";
  position: absolute;
  top: 34px;
  right: 16px;
  border: 7px solid transparent;
  border-left: 9px solid var(--gold-ink);
}

.mens .h-menuCard__title {
  display: block;
  margin-top: 10px;
  color: var(--navy-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.mens .h-menuCard__sub {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}

/* ---- メニュー詳細 ---- */
.mens .h-service {
  margin-top: 28px;
  padding: 40px 18px 36px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(23, 56, 77, 0.08);
  scroll-margin-top: 80px;
}

.mens .h-service__intro {
  text-align: center;
}

.mens .h-service__num {
  color: var(--navy-ink);
  font-family: var(--latin);
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

.mens .h-service__title {
  margin-top: 10px;
  color: var(--gold-ink);
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.mens .h-service__sub {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
}

.mens .h-service__catch {
  margin-top: 28px;
  color: var(--navy-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.mens .h-service__copy {
  margin-top: 14px;
}

.mens .h-service__copy p + p {
  margin-top: 1em;
}

.mens .h-service__image {
  position: relative;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 6px;
}

.mens .h-service__image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.mens .h-features {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  padding: 18px 16px;
  border-radius: 6px;
  background: var(--offwhite);
  list-style: none;
}

.mens .h-features li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}

.mens .h-features li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--gold-ink);
  border-radius: 2px;
  background: var(--white);
}

.mens .h-features li::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid var(--gold-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 料金表：スマホは施術名の行の下に金額（クララと同じ）、PCは左右 */
.mens .h-price {
  width: 100%;
  margin-top: 24px;
  border-collapse: collapse;
  border: 1px solid var(--line);
  font-size: 16px;
}

.mens .h-price caption {
  padding-bottom: 8px;
  color: var(--navy-ink);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}

.mens .h-price th,
.mens .h-price td {
  display: block;
  padding: 12px 14px;
  line-height: 1.8;
}

.mens .h-price th {
  background: var(--offwhite);
  font-weight: 500;
  text-align: left;
}

.mens .h-price th small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.mens .h-price td {
  font-weight: 700;
  text-align: right;
}

.mens .h-price__cell {
  display: block;
}

.mens .h-price__cell small {
  margin-right: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.mens .h-price__cell--best {
  color: var(--gold-ink);
  font-size: 18px;
}

.mens .h-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  min-height: 58px;
  margin: 28px auto 0;
  padding: 12px 40px 12px 20px;
  border: 1px solid var(--gold-ink);
  border-radius: 4px;
  color: var(--gold-ink);
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  position: relative;
}

.mens .h-more::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 7px;
  height: 7px;
  border: solid var(--gold-ink);
  border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(45deg);
}

/* ---- 選ばれる理由 ---- */
.mens .h-reasons {
  display: grid;
  gap: 18px;
  list-style: none;
}

.mens .h-reason {
  padding: 26px 22px;
  background: var(--white);
  border-top: 3px solid var(--gold);
}

.mens .h-reason__num {
  color: var(--gold-ink);
  font-family: var(--latin);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.mens .h-reason__num small {
  margin-right: 6px;
  font-size: 18px;
}

.mens .h-reason h3 {
  margin-top: 14px;
  font-size: 20px;
  line-height: 1.6;
}

.mens .h-reason p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.8;
}

/* ---- よくある質問（クララと同じく開いたまま） ---- */
.mens .h-faq {
  display: grid;
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
}

.mens .h-faq dt {
  padding: 16px;
  background: var(--gold-ink);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
}

.mens .h-faq dd {
  padding: 18px 16px;
  background: var(--white);
  font-size: 13px;
  line-height: 1.9;
}

/* ---- お客様の声 ---- */
.mens .h-voice {
  display: grid;
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
  list-style: none;
}

.mens .h-voice li {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  font-size: 16px;
}

.mens .h-voice small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

/* ---- リスク・受けられない方 ---- */
.mens .h-risk {
  max-width: 860px;
  margin: 0 auto;
}

.mens .h-risk h3 {
  margin-top: 28px;
  font-size: 18px;
}

.mens .h-risk ul {
  margin-top: 10px;
  padding-left: 1.2em;
  font-size: 15px;
}

/* ---- アクセス ---- */
.mens .h-access {
  display: grid;
  gap: 24px;
}

.mens .h-access__name {
  color: var(--navy-ink);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
}

.mens .h-access dl {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 8px 12px;
  margin-top: 14px;
  font-size: 15px;
}

.mens .h-access dt {
  font-weight: 700;
}

/* ページ最下部の注意事項（院長指示：注意書きは途中に書かず、最後にいちばん小さい文字で） */
.mens .h-footer {
  padding: 24px 0 32px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.8;
}

.mens .h-footer .wrap {
  max-width: 860px;
}

.mens .h-footer p + p {
  margin-top: 6px;
}

.mens .h-footer__title {
  font-weight: 700;
}

/* 治療カード（ニキビ跡ページ）：横にスワイプするカルーセル。スマホは1枚＋次の端、PCは3枚 */
.mens .h-carousel {
  position: relative;
}

.mens .h-cards {
  display: flex;
  gap: 14px;
  margin: 0 calc(-1 * var(--side));
  padding: 4px var(--side) 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--side);
  scrollbar-width: none;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

.mens .h-cards::-webkit-scrollbar {
  display: none;
}

.mens .h-cards > .h-card {
  flex: 0 0 84%;
  scroll-snap-align: start;
}

.mens .h-carousel__btn {
  position: absolute;
  z-index: 2;
  top: 26%;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(23, 56, 77, 0.18);
  cursor: pointer;
}

.mens .h-carousel__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border: solid var(--gold-ink);
  border-width: 2px 2px 0 0;
  transform: translate(-65%, -50%) rotate(45deg);
}

.mens .h-carousel__btn--prev {
  left: -6px;
}

.mens .h-carousel__btn--prev::after {
  transform: translate(-35%, -50%) rotate(-135deg);
}

.mens .h-carousel__btn--next {
  right: -6px;
}

.mens .h-carousel__btn:disabled {
  opacity: 0;
  pointer-events: none;
}

.mens .h-carousel__btn:focus-visible {
  outline: 3px solid var(--gold-ink);
  outline-offset: 2px;
}

.mens .h-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.mens .h-carousel__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gold-soft);
  cursor: pointer;
}

.mens .h-carousel__dots button.is-active {
  width: 22px;
  border-radius: 4px;
  background: var(--gold-ink);
}

.mens .h-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(23, 56, 77, 0.08);
  scroll-margin-top: 80px;
}

.mens .h-card__image {
  position: relative;
}

.mens .h-card__image img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.mens .h-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 18px 20px;
}

.mens .h-card__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.mens .h-card__num {
  color: var(--gold-ink);
  font-family: var(--latin);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.mens .h-card__name {
  color: var(--navy-ink);
  font-size: 20px;
  font-weight: 700;
}

.mens .h-card__sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mens .h-card__lead {
  margin-top: 10px;
  color: var(--navy-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.mens .h-card__text {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.8;
}

.mens .h-card__dt {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.mens .h-price--card {
  margin-top: 12px;
  font-size: 14px;
}

.mens .h-price--card th,
.mens .h-price--card td {
  display: table-cell;
  padding: 8px 10px;
  vertical-align: middle;
}

.mens .h-price--card th {
  width: 50%;
}

.mens .h-price--card td span {
  white-space: nowrap;
}

.mens .h-price--card .h-price__cell--best {
  font-size: 16px;
}

.mens .h-card__more {
  margin-top: auto;
  padding-top: 14px;
  color: var(--gold-ink);
  font-size: 14px;
  font-weight: 700;
}

.mens .h-card__more::after {
  content: " ›";
}

.mens .h-combos {
  margin-top: 24px;
  padding: 20px 18px;
  border-radius: 10px;
  background: var(--white);
}

.mens .h-combos__title {
  color: var(--navy-ink);
  font-size: 16px;
  font-weight: 700;
}

.mens .h-combos .h-features {
  margin-top: 10px;
}

.mens #treatments .cta-group {
  margin-top: 28px;
}

@media (min-width: 768px) {
  .mens.hub section[data-section] {
    padding: 104px 0;
  }

  .mens .h-head {
    margin-bottom: 48px;
  }

  .mens .h-en {
    font-size: 18px;
  }

  .mens .h-heading {
    font-size: 36px;
  }

  .mens .h-sub {
    font-size: 16px;
  }

  .mens .h-mv__visual {
    aspect-ratio: auto;
    height: min(64vw, 720px);
  }

  .mens .h-mv__visual img {
    object-position: 70% 45%;
  }

  .mens .h-mv__text {
    width: 58%;
    padding-left: max(40px, calc((100vw - var(--max)) / 2 + 20px));
  }

  .mens .h-mv--narrow .h-mv__text {
    width: 58%;
    padding-left: max(40px, calc((100vw - var(--max)) / 2 + 20px));
  }

  .mens .h-mv__en {
    font-size: 14px;
  }

  .mens h1.h-mv__title {
    margin-top: 14px;
    font-size: 64px;
    letter-spacing: 0.04em;
  }

  .mens .h-mv__lead {
    margin-top: 18px;
    font-size: 26px;
  }

  .mens .h-mv__desc {
    padding: 40px 0 56px;
  }

  .mens .h-mv__desc p {
    font-size: 16px;
  }

  .mens .h-mv__desc .wrap {
    max-width: 860px;
  }

  .mens .h-check {
    grid-template-columns: repeat(2, auto);
    gap: 18px 48px;
  }

  .mens .h-check li {
    font-size: 18px;
  }

  .mens .h-trouble__note {
    font-size: 25px;
  }

  .mens .h-contact__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .mens .h-contact__media img {
    height: 100%;
    aspect-ratio: auto;
  }

  .mens .h-contact__panel {
    padding: 72px 40px;
  }

  .mens .h-contact__title {
    font-size: 32px;
  }

  .mens .h-message__layout {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
    gap: 56px;
  }

  .mens .h-message__catch {
    font-size: 26px;
  }

  .mens .h-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 28px 24px;
  }

  .mens .h-step {
    grid-template-columns: 1fr;
    align-content: start;
    justify-items: center;
    padding: 0 14px;
    text-align: center;
  }

  .mens .h-step + .h-step {
    border-top: 0;
  }

  /* PCは丸と丸を横線でつなぐ */
  .mens .h-step:not(:last-child)::after {
    top: 27px;
    bottom: auto;
    left: calc(50% + 34px);
    width: calc(100% - 68px);
    height: 2px;
  }

  .mens .h-step__num {
    grid-row: auto;
    width: 56px;
    height: 56px;
    font-size: 22px;
  }

  .mens .h-step__title {
    margin-top: 12px;
  }

  .mens .h-step__desc {
    text-align: left;
  }

  .mens .h-types {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .mens .h-typelist {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 24px 20px;
  }

  .mens .h-typeitem {
    grid-template-columns: 1fr;
    align-content: start;
    row-gap: 12px;
    padding: 0 12px;
  }

  .mens .h-typeitem + .h-typeitem {
    border-top: 0;
    border-left: 1px dashed var(--line);
  }

  .mens .h-typeitem__img {
    width: 100%;
  }

  .mens .h-menuGrid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .mens .h-menuCard {
    padding: 14px 14px 18px;
  }

  .mens .h-service {
    margin-top: 40px;
    padding: 64px 64px 56px;
  }

  .mens .h-service__title {
    font-size: 34px;
  }

  .mens .h-service__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 32px;
  }

  .mens .h-service__body .h-service__catch {
    margin-top: 0;
  }

  .mens .h-service__body .h-service__image {
    margin-top: 0;
  }

  .mens .h-price th,
  .mens .h-price td {
    display: table-cell;
    padding: 16px 18px;
    vertical-align: middle;
  }

  .mens .h-price th {
    width: 60%;
  }

  .mens .h-price tr + tr > * {
    border-top: 1px solid var(--line);
  }

  .mens .h-reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mens .h-cards {
    gap: 22px;
    margin: 0;
    padding: 4px 0 18px;
    scroll-padding: 0;
  }

  .mens .h-cards > .h-card {
    flex-basis: calc((100% - 44px) / 3);
  }

  .mens .h-carousel__btn {
    top: 22%;
    width: 46px;
    height: 46px;
  }

  .mens .h-carousel__btn--prev {
    left: -22px;
  }

  .mens .h-carousel__btn--next {
    right: -22px;
  }

  .mens .h-footer {
    font-size: 11px;
  }

  .mens .h-reasons > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .mens .h-faq dt {
    padding: 16px 22px;
    font-size: 15px;
  }

  .mens .h-faq dd {
    padding: 18px 22px;
    font-size: 16px;
  }

  .mens .h-access {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
  }
}

/* ---- 「エクラアクネスカープログラムとは？」の中に症例を置く（2026-10-28 院長「プログラムでこうなりますって」「縦のままもう少し小さく」） ---- */
.mens .case-feature {
  background: transparent;
}

.mens .case-feature__lead {
  margin-bottom: 12px;
  color: var(--navy-ink);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.mens .case-feature .case-ba {
  max-width: 300px;
}

.mens .case-feature .case-more,
.mens .case-feature .case-tabs {
  max-width: 420px;
}

.mens .case-feature .case-more__toggle {
  padding: 6px 14px;
  font-size: 12px;
}

@media (min-width: 768px) {
  .mens .case-feature__lead {
    font-size: 18px;
  }

  .mens .case-feature .case-ba {
    max-width: 340px;
  }
}

/* 「エクラアクネスカープログラム」を含む長い見出しは、スマホで1行に収まる大きさにする */
@media (max-width: 767px) {
  .mens .h-heading--long {
    font-size: 22px;
  }
}

/* ---- 選ばれる理由・プログラムのPOINTをコンパクトに（2026-10-28 院長「もう少しコンパクトなデザインに」）
   番号を左の細い列にまとめ、見出しと説明を右に並べる ---- */
.mens .h-reasons {
  gap: 10px;
}

.mens .h-reason {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border-top: 0;
  border-left: 3px solid var(--gold);
}

/* 「.h-reason p」より強く指定しないと番号まで本文の大きさになる */
.mens .h-reason p.h-reason__num {
  grid-row: span 2;
  margin-top: 0;
  font-size: 22px;
  line-height: 1;
  text-align: center;
}

.mens .h-reason__num small {
  display: block;
  margin: 0 0 4px;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.mens .h-reason h3 {
  margin-top: 0;
  font-size: 15px;
  line-height: 1.55;
}

.mens .h-reason p {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.75;
}

@media (min-width: 768px) {
  .mens .h-reasons {
    gap: 12px;
  }

  .mens .h-reason {
    padding: 16px 20px;
  }

  .mens .h-reason h3 {
    font-size: 16px;
  }

  .mens .h-reason p {
    font-size: 14px;
  }
}

/* 「エクラアクネスカープログラムとは？」は見出しのすぐ下に症例を続ける */
.mens #about-program .h-head {
  margin-bottom: 24px;
}

/* ---- 章の背景写真（2026-10-28 院長「YOUR SKINと同様に、背景画像をそれぞれ必要なところに配置」）
   写真の上に白い膜を敷いて文字を読ませる。人物は写真の片側35%に置いてあり、PCでは写真を高さに合わせてその側に寄せ、
   空いた所は写真の端と同じ色で埋める。--right / --left は人物のいる側。--ice は膜を薄い水色にして隣の章と区別する ---- */
.mens.hub section.h-photo {
  position: relative;
  background-color: #e2eff5;
  background-repeat: no-repeat;
  background-size: cover;
}

.mens .h-photo--right {
  background-position: 80% center;
}

.mens .h-photo--left {
  background-position: 20% center;
}

.mens .h-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(246, 250, 252, 0.86);
}

.mens .h-photo--ice::before {
  background: rgba(226, 240, 248, 0.86);
}

.mens .h-photo > .wrap {
  position: relative;
}

/* background-color は人物と反対側の写真の端の色（PCで空いた所を埋める） */
.mens.hub section.h-photo--trouble-mirror {
  background-color: #e2eff5;
  background-image: url("img/trouble-bg.jpg");
}

.mens.hub section.h-photo--trouble-phone {
  background-color: #dcecfa;
  background-image: url("img/trouble-bg-phone.jpg");
}

.mens.hub section.h-photo--about {
  background-color: #eef8fd;
  background-image: url("img/bg-about.jpg");
}

.mens.hub section.h-photo--reasons {
  background-color: #e5f4f9;
  background-image: url("img/bg-reasons.jpg");
}

.mens.hub section.h-photo--flow {
  background-color: #d6e4eb;
  background-image: url("img/bg-flow.jpg");
}

@media (min-width: 768px) {
  .mens.hub section.h-photo {
    background-size: auto 100%;
  }

  .mens .h-photo--right {
    background-position: right center;
  }

  .mens .h-photo--left {
    background-position: left center;
  }

  .mens .h-photo--right::before {
    background: linear-gradient(90deg, rgba(246, 250, 252, 0.9) 0%, rgba(246, 250, 252, 0.86) 60%, rgba(246, 250, 252, 0.35) 100%);
  }

  .mens .h-photo--left::before {
    background: linear-gradient(270deg, rgba(246, 250, 252, 0.9) 0%, rgba(246, 250, 252, 0.86) 60%, rgba(246, 250, 252, 0.35) 100%);
  }

  .mens .h-photo--ice.h-photo--right::before {
    background: linear-gradient(90deg, rgba(226, 240, 248, 0.92) 0%, rgba(226, 240, 248, 0.86) 60%, rgba(226, 240, 248, 0.35) 100%);
  }

  .mens .h-photo--ice.h-photo--left::before {
    background: linear-gradient(270deg, rgba(226, 240, 248, 0.92) 0%, rgba(226, 240, 248, 0.86) 60%, rgba(226, 240, 248, 0.35) 100%);
  }
}

/* ---- 喜びの声（2026-10-28 院長「院長メッセージの上」「アートメイクスクールの声みたいな感じに」）
   白いカード＋左の線、丸い画像と職業・年齢、吹き出しの声 ---- */
.mens .v-list {
  display: grid;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
  list-style: none;
}

.mens .v-list li {
  padding: 14px 16px 16px;
  border-left: 4px solid var(--gold);
  background: var(--white);
  box-shadow: 0 6px 18px rgba(23, 56, 77, 0.08);
}

.mens .v-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 丸いイメージ画像（2026-10-28 院長「イメージ画像入れていいよ」） */
.mens .v-av {
  flex: none;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--ice);
}

.mens .v-av img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mens .v-who b {
  display: block;
  color: var(--navy-ink);
  font-size: 15px;
  line-height: 1.35;
}

.mens .v-who span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mens .v-voice {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef6fa;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.75;
}

.mens .v-voice::before {
  content: "「";
}

.mens .v-voice::after {
  content: "」";
}

@media (min-width: 768px) {
  .mens .v-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 1000px;
  }

  .mens .v-list li {
    padding: 18px 20px 20px;
  }
}