/* 共通の土台と各セクションのレイアウト。 */
body:has(> .mg) {
  margin: initial;
}

.mg,
.mg *,
.mg *::before,
.mg *::after {
  box-sizing: border-box;
}

.mg {
  color-scheme: light;
  background: var(--mg-white);
  color: var(--mg-ink);
  font-family: var(--mg-font-maru);
  font-size: var(--mg-fs-body);
  font-weight: var(--mg-weight-normal);
  line-height: var(--mg-leading);
  letter-spacing: var(--mg-tracking);
  text-wrap: pretty;
  word-break: auto-phrase;
}

.mg :where(h1, h2, h3, h4, p, ul, figure) {
  margin: var(--mg-zero);
  padding: var(--mg-zero);
}

.mg img {
  display: block;
  max-width: var(--mg-full);
  height: auto;
}

.mg .mg-section {
  padding: var(--mg-sec-pad-y) var(--mg-sec-pad-x) var(--mg-sec-pad-y-bottom);
}

.mg .mg-sage {
  background: var(--mg-sage);
}

.mg .sec-head {
  text-align: left;
}

.mg .sec-head .en {
  color: var(--mg-brown-display);
  font-family: var(--mg-font-en);
  font-size: var(--mg-fs-en-title);
  font-weight: var(--mg-weight-medium);
  line-height: var(--mg-leading-en-title);
  letter-spacing: var(--mg-tracking);
}

.mg .sec-head .ja {
  margin-top: var(--mg-heading-gap);
  color: var(--mg-ink-soft);
  font-family: var(--mg-font-maru);
  font-size: var(--mg-fs-ja-sub);
  letter-spacing: var(--mg-tracking-head);
}

.mg .mg-sage .sec-head .en {
  color: var(--mg-brown-on-sage);
}

.mg .mg-sage .sec-head .ja {
  color: var(--mg-brown-on-sage);
}


.mg .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-cta-gap);
  max-width: var(--mg-full);
  padding: var(--mg-cta-pad-y) var(--mg-cta-pad-right) var(--mg-cta-pad-y) var(--mg-cta-pad-left);
  border-radius: var(--mg-radius-pill);
  background: var(--mg-cta);
  color: var(--mg-cta-text);
  font-size: var(--mg-fs-cta);
  font-weight: var(--mg-weight-medium);
  line-height: var(--mg-leading);
  letter-spacing: var(--mg-tracking-head);
  text-decoration: none;
  white-space: nowrap;
}

.mg .cta-btn .mark {
  display: grid;
  flex-shrink: var(--mg-zero);
  place-items: center;
  width: var(--mg-mark-size);
  height: var(--mg-mark-size);
  border: var(--mg-mark-ring-width) solid var(--mg-line-mark-ring);
  border-radius: var(--mg-radius-circle);
  background: var(--mg-line-mark);
  color: var(--mg-cta-text);
  font-size: var(--mg-fs-mark);
  font-weight: var(--mg-weight-medium);
  letter-spacing: var(--mg-zero);
}

.mg .cta-btn:focus-visible {
  outline: var(--mg-focus-width) solid var(--mg-ink);
  outline-offset: var(--mg-focus-offset);
}

.mg .vh {
  position: absolute;
  width: var(--mg-vh-size);
  height: var(--mg-vh-size);
  padding: var(--mg-zero);
  overflow: hidden;
  clip-path: inset(var(--mg-radius-circle));
  white-space: nowrap;
}

/* 760px = --mg-bp（CSS変数はメディア条件に使えない） */
@media (max-width: 760px) {
  .mg .mg-section {
    padding: var(--mg-sec-pad-y-sp) var(--mg-sec-pad-x-sp);
  }

  .mg .sec-head .en {
    font-size: var(--mg-fs-en-title-sp);
  }

  .mg br.pc {
    display: none;
  }

  .mg .cta-btn {
    padding: var(--mg-cta-pad-y-sp) var(--mg-cta-pad-right-sp) var(--mg-cta-pad-y-sp) var(--mg-cta-pad-left-sp);
    font-size: var(--mg-fs-cta-sp);
  }
}

/* ① TOP：見本のロゴ・CTAを一つのかたまりとして配置する。 */
.mg .lp-top {
  position: relative;
  aspect-ratio: var(--mg-top-ratio);
  background: url("img/top-bg.jpg") center / cover no-repeat;
}

.mg .lp-top .box {
  position: absolute;
  left: var(--mg-top-left);
  top: var(--mg-top-center);
  width: var(--mg-top-logo-w);
  transform: translateY(var(--mg-top-center-shift));
  text-align: center;
}

.mg .lp-top .logo img {
  width: var(--mg-full);
  margin: var(--mg-top-logo-trim-start) var(--mg-zero) var(--mg-top-logo-trim-end);
}

.mg .lp-top .cta-btn {
  margin-top: var(--mg-top-cta-gap);
  padding: var(--mg-top-cta-pad-y) var(--mg-top-cta-pad-right) var(--mg-top-cta-pad-y) var(--mg-top-cta-pad-left);
  font-size: var(--mg-fs-cta-top);
}

.mg .lp-top .cta-btn .mark {
  width: var(--mg-top-mark-size);
  height: var(--mg-top-mark-size);
  font-size: var(--mg-top-fs-mark);
}

/* 760px = --mg-bp（CSS変数はメディア条件に使えない） */
@media (max-width: 760px) {
  /* ① TOP（SP・A案 11/10）：写真とロゴ・ボタンを上下に分ける。 */
  .mg .lp-top {
    aspect-ratio: auto;
    background-image: none;
    background-color: var(--mg-sage);
    padding-bottom: var(--mg-top-a-pad-bottom);
  }

  .mg .lp-top::before {
    content: "";
    display: block;
    aspect-ratio: var(--mg-top-a-photo-ratio);
    background: url("img/top-bg.jpg") var(--mg-top-a-bg-x) center / cover no-repeat;
  }

  .mg .lp-top .box {
    position: static;
    transform: none;
    width: var(--mg-top-a-logo-w);
    margin: var(--mg-top-a-photo-gap) auto var(--mg-zero);
  }

  .mg .lp-top .cta-btn {
    margin-top: var(--mg-top-a-cta-gap);
  }
}

/* ② プロフィール：原稿・改行・配置は見本に合わせる。 */
.mg .lp-profile {
  display: grid;
  grid-template-columns: var(--mg-profile-columns);
  background: var(--mg-white);
  font-size: var(--mg-profile-base-size);
  line-height: normal;
}

.mg .lp-profile .text {
  display: flex;
  justify-content: center;
  padding: var(--mg-profile-pad-top) var(--mg-profile-pad-right) var(--mg-profile-pad-bottom) var(--mg-sec-pad-x);
}

.mg .lp-profile .inner {
  max-width: var(--mg-measure);
  text-wrap: pretty;
  word-break: auto-phrase;
}

.mg .lp-profile .photo {
  position: relative;
  min-height: var(--mg-full);
}

.mg .lp-profile .photo img {
  position: absolute;
  inset: var(--mg-zero);
  width: var(--mg-full);
  height: var(--mg-full);
  object-fit: cover;
  object-position: var(--mg-profile-photo-position);
}

.mg .lp-profile .photo::after {
  content: "";
  position: absolute;
  inset: var(--mg-zero);
  background: linear-gradient(var(--mg-profile-fade-angle), var(--mg-profile-fade) var(--mg-zero), var(--mg-profile-fade-clear) var(--mg-profile-fade-end));
}

.mg .lp-profile p {
  margin-bottom: var(--mg-profile-paragraph-gap);
  font-size: var(--mg-fs-body);
  line-height: var(--mg-leading);
  letter-spacing: var(--mg-tracking);
}

.mg .lp-profile .who {
  margin-bottom: var(--mg-profile-label-gap);
  color: var(--mg-brown);
  font-family: var(--mg-font-mincho);
  font-size: var(--mg-profile-label-size);
  letter-spacing: var(--mg-profile-label-tracking);
}

.mg .lp-profile .name {
  margin-bottom: var(--mg-profile-name-gap);
  font-family: var(--mg-font-mincho);
  font-size: var(--mg-profile-name-size);
  font-weight: var(--mg-weight-medium);
  letter-spacing: var(--mg-profile-name-tracking);
}

.mg .lp-profile p.motto {
  color: var(--mg-brown);
  font-family: var(--mg-font-mincho);
  font-size: var(--mg-profile-motto-size);
  letter-spacing: var(--mg-profile-motto-tracking);
}

/* 760px = --mg-bp（CSS変数はメディア条件に使えない） */
@media (max-width: 760px) {
  .mg .lp-profile {
    grid-template-columns: var(--mg-profile-single-column);
  }

  .mg .lp-profile .photo {
    order: var(--mg-profile-photo-order-sp);
    aspect-ratio: var(--mg-profile-photo-ratio-sp);
    min-height: var(--mg-zero);
  }

  .mg .lp-profile .photo::after {
    display: none;
  }

  .mg .lp-profile .text {
    padding: var(--mg-profile-pad-y-sp) var(--mg-sec-pad-x-sp);
  }

  .mg .lp-profile p {
    font-size: var(--mg-profile-body-size-sp);
  }
}

/* ③ OUR PROBLEM */
.mg .lp-problem {
  background: var(--mg-cream);
  padding: var(--mg-sec-pad-y) var(--mg-problem-pad-x) var(--mg-problem-pad-bottom);
  font-size: var(--mg-problem-base-size);
  line-height: normal;
}
.mg .lp-problem .body {
  display: grid;
  grid-template-columns: var(--mg-problem-columns);
  align-items: center;
  margin-top: var(--mg-problem-body-gap);
}
.mg .lp-problem .illust img {
  width: var(--mg-full);
  max-width: var(--mg-problem-illust-max);
  margin: var(--mg-zero) auto;
}
.mg .lp-problem .copy { display: flex; justify-content: center; }
.mg .lp-problem .inner {
  max-width: var(--mg-measure);
  font-size: var(--mg-fs-body);
  line-height: var(--mg-leading);
  letter-spacing: var(--mg-tracking);
  text-wrap: pretty;
  word-break: auto-phrase;
}
.mg .lp-problem .q {
  font-family: var(--mg-font-mincho);
  font-weight: var(--mg-weight-medium);
  font-size: var(--mg-problem-question-size);
  letter-spacing: var(--mg-problem-question-tracking);
  line-height: var(--mg-problem-question-leading);
  margin-bottom: var(--mg-problem-question-gap);
}
.mg .lp-problem .lead { margin-bottom: var(--mg-problem-lead-gap); }
.mg .lp-problem ul {
  list-style: none;
  margin: var(--mg-zero) var(--mg-zero) var(--mg-problem-check-gap);
  padding: var(--mg-problem-check-pad-y) var(--mg-problem-check-pad-x);
  background: var(--mg-card-check);
  border-radius: var(--mg-radius-faq);
}
.mg .lp-problem li { padding-left: var(--mg-problem-check-indent); position: relative; }
.mg .lp-problem li::before {
  content: "✓";
  position: absolute;
  left: var(--mg-zero);
  color: var(--mg-brown);
}
.mg .lp-problem .turn {
  font-family: var(--mg-font-mincho);
  font-weight: var(--mg-weight-medium);
  font-size: var(--mg-problem-turn-size);
  letter-spacing: var(--mg-problem-question-tracking);
  margin-bottom: var(--mg-problem-turn-gap);
}
.mg .lp-problem .note2 { margin-bottom: var(--mg-problem-note-gap); }
.mg .lp-problem .end {
  font-family: var(--mg-font-mincho);
  color: var(--mg-brown);
  font-size: var(--mg-problem-end-size);
  letter-spacing: var(--mg-problem-end-tracking);
}
/* ④⑦ 共通の写真の帯。 */
.mg .lp-band {
  position: relative;
  min-height: var(--mg-band-h);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: url("img/band-water.jpg") center bottom / cover no-repeat;
}
.mg .lp-band::before {
  content: "";
  position: absolute;
  inset: var(--mg-zero);
  background: var(--mg-band-veil);
}
.mg .lp-band .band-copy {
  position: relative;
  color: var(--mg-on-photo);
  font-family: var(--mg-font-maru);
  font-weight: var(--mg-weight-medium);
  font-size: var(--mg-fs-band);
  line-height: var(--mg-band-leading);
  letter-spacing: var(--mg-band-tracking);
  text-shadow: var(--mg-zero) var(--mg-band-shadow-y) var(--mg-band-shadow-blur) var(--mg-band-text-shadow);
}
.mg .lp-band .band-copy span { display: block; }
/* 760px = --mg-bp（CSS変数はメディア条件に使えない） */
@media (max-width: 760px) {
  .mg .lp-problem {
    padding: var(--mg-sec-pad-y-sp) var(--mg-sec-pad-x-sp) var(--mg-problem-pad-bottom-sp);
  }
  .mg .lp-problem .body {
    grid-template-columns: var(--mg-problem-single-column);
    margin-top: var(--mg-problem-body-gap-sp);
  }
  .mg .lp-problem .illust img { max-width: var(--mg-problem-illust-max-sp); }
  .mg .lp-problem .q { font-size: var(--mg-problem-question-size-sp); }
  .mg .lp-band { min-height: var(--mg-band-h-sp); }
  .mg .lp-band .band-copy {
    font-size: var(--mg-fs-band-sp);
    letter-spacing: var(--mg-tracking-head);
  }
}

/* 指定された語句を途中で折り返さない。 */
.mg .nw { white-space: nowrap; }

/* ⑤ ABOUT COMMUNITY */
.mg .lp-about {
  background: var(--mg-sage);
  padding: var(--mg-sec-pad-y) var(--mg-about-pad-x) var(--mg-sec-pad-y-bottom);
  font-size: var(--mg-about-base-size);
  line-height: normal;
}
.mg .lp-about .lead-h {
  font-family: var(--mg-font-mincho);
  font-weight: var(--mg-weight-medium);
  text-align: center;
  font-size: var(--mg-fs-lead);
  line-height: var(--mg-about-lead-leading);
  letter-spacing: var(--mg-tracking-head);
  color: var(--mg-ink);
  margin: var(--mg-about-lead-top) var(--mg-zero) var(--mg-about-lead-bottom);
}
.mg .lp-about .lead-h em { font-style: normal; color: var(--mg-brown-on-sage); }
.mg .lp-about .pillars {
  display: grid;
  grid-template-columns: var(--mg-about-columns);
  gap: var(--mg-about-pillar-gap);
  max-width: var(--mg-about-pillars-max);
  margin: var(--mg-zero) auto;
}
.mg .lp-about .pillar { text-align: center; }
.mg .lp-about .pillar img {
  width: var(--mg-about-icon-size);
  height: var(--mg-about-icon-size);
  margin: var(--mg-zero) auto var(--mg-about-icon-gap);
}
.mg .lp-about .pillar p {
  font-size: var(--mg-fs-small);
  line-height: var(--mg-leading);
  letter-spacing: var(--mg-about-copy-tracking);
  color: var(--mg-ink-on-sage);
  text-wrap: pretty;
  word-break: auto-phrase;
}
.mg .lp-about .concept {
  font-family: var(--mg-font-mincho);
  font-weight: var(--mg-weight-medium);
  text-align: center;
  color: var(--mg-brown-on-sage);
  font-size: var(--mg-fs-lead);
  letter-spacing: var(--mg-about-concept-tracking);
  margin: var(--mg-about-concept-top) var(--mg-zero) var(--mg-about-concept-bottom);
}
.mg .lp-about .msg {
  text-align: center;
  font-size: var(--mg-fs-body);
  line-height: var(--mg-about-message-leading);
  letter-spacing: var(--mg-about-copy-tracking);
  color: var(--mg-ink-on-sage);
}
/* 760px = --mg-bp（CSS変数はメディア条件に使えない） */
@media (max-width: 760px) {
  .mg .lp-about {
    padding: var(--mg-sec-pad-y-sp) var(--mg-sec-pad-x-sp) var(--mg-about-pad-bottom-sp);
  }
  .mg .lp-about .lead-h {
    font-size: var(--mg-fs-lead-sp);
    margin: var(--mg-about-lead-gap-sp) var(--mg-zero);
  }
  .mg .lp-about .pillars {
    grid-template-columns: var(--mg-about-single-column);
    gap: var(--mg-about-pillar-gap-sp);
  }
  .mg .lp-about .pillar img {
    width: var(--mg-about-icon-size-sp);
    height: var(--mg-about-icon-size-sp);
  }
  .mg .lp-about .concept {
    font-size: var(--mg-about-concept-size-sp);
    letter-spacing: var(--mg-about-concept-tracking-sp);
    margin-top: var(--mg-about-concept-top-sp);
  }
}

/* ⑥ COMMUNITY ACTIVITY */
.mg .lp-act {
  background: var(--mg-cream);
  padding: var(--mg-sec-pad-y) var(--mg-sec-pad-x) var(--mg-act-pad-bottom);
  font-size: var(--mg-act-base-size);
  line-height: normal;
}
.mg .lp-act .h-c {
  font-family: var(--mg-font-mincho);
  font-weight: var(--mg-weight-medium);
  text-align: center;
  font-size: var(--mg-fs-lead);
  line-height: var(--mg-act-heading-leading);
  letter-spacing: var(--mg-act-heading-tracking);
  color: var(--mg-ink-soft);
  margin: var(--mg-act-heading-top) var(--mg-zero) var(--mg-act-heading-bottom);
}
.mg .lp-act .h-c em { font-style: normal; color: var(--mg-brown-display); }
.mg .lp-act .h-c .step {
  font-family: var(--mg-font-en);
  font-variant-numeric: lining-nums;
  color: var(--mg-brown-display);
  font-size: var(--mg-act-step-size);
  letter-spacing: var(--mg-act-step-tracking);
  line-height: var(--mg-act-step-leading);
  margin-left: var(--mg-act-step-left);
}
.mg .lp-act .h-c.h-step { margin-top: var(--mg-act-step-top); }
.mg .lp-act .cards {
  display: grid;
  grid-template-columns: var(--mg-act-card-columns);
  gap: var(--mg-act-card-gap);
  max-width: var(--mg-act-cards-max);
  margin: var(--mg-zero) auto;
}
.mg .lp-act .card { text-align: center; }
.mg .lp-act .card h4 {
  font-family: var(--mg-font-mincho);
  font-weight: var(--mg-weight-medium);
  color: var(--mg-brown-display);
  font-size: var(--mg-act-card-title-size);
  letter-spacing: var(--mg-act-card-title-tracking);
  margin-bottom: var(--mg-act-card-title-gap);
}
.mg .lp-act .card .desc {
  color: var(--mg-ink-soft);
  font-size: var(--mg-act-description-size);
  line-height: var(--mg-leading);
  letter-spacing: var(--mg-act-copy-tracking);
  margin-bottom: var(--mg-act-description-gap);
}
.mg .lp-act .card ul {
  list-style: none;
  display: inline-block;
  text-align: left;
  font-size: var(--mg-fs-small);
  line-height: var(--mg-act-check-leading);
  letter-spacing: var(--mg-tracking);
}
.mg .lp-act .card li { padding-left: var(--mg-act-check-indent); position: relative; }
.mg .lp-act .card li::before {
  content: "✓";
  position: absolute;
  left: var(--mg-zero);
  color: var(--mg-brown);
}
.mg .lp-act .card img {
  width: var(--mg-full);
  max-width: var(--mg-act-card-image-max);
  margin: var(--mg-act-card-image-top) auto var(--mg-zero);
}
.mg .lp-act .two {
  display: grid;
  grid-template-columns: var(--mg-act-side-column) var(--mg-loop-size) var(--mg-act-side-column);
  gap: var(--mg-act-two-gap);
  align-items: stretch;
  max-width: var(--mg-act-two-max);
  margin: var(--mg-zero) auto;
}
.mg .lp-act .col { display: flex; flex-direction: column; }
.mg .lp-act .col .items {
  flex: var(--mg-act-items-flex);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--mg-act-item-gap);
  width: var(--mg-full);
  max-width: var(--mg-act-items-max);
  margin: var(--mg-zero) auto;
}
.mg .lp-act .col .head { text-align: center; margin-bottom: var(--mg-act-head-gap); }
.mg .lp-act .col .head img {
  height: var(--mg-act-head-image-height);
  width: auto;
  margin: var(--mg-zero) auto var(--mg-act-head-image-gap);
}
.mg .lp-act .col .head .nm {
  font-family: var(--mg-font-en);
  font-weight: var(--mg-weight-medium);
  font-size: var(--mg-act-name-size);
  letter-spacing: var(--mg-act-name-tracking);
  color: var(--mg-ink);
}
.mg .lp-act .col .head .sub {
  font-size: var(--mg-act-sub-size);
  letter-spacing: var(--mg-act-card-title-tracking);
  color: var(--mg-ink-soft);
}
.mg .lp-act .item {
  display: grid;
  grid-template-columns: var(--mg-act-item-icon-column) var(--mg-act-side-column);
  gap: var(--mg-act-item-icon-gap);
  align-items: start;
}
.mg .lp-act .item img {
  width: var(--mg-act-item-icon-size);
  height: var(--mg-act-item-icon-size);
  object-fit: contain;
}
.mg .lp-act .item b {
  display: block;
  font-weight: var(--mg-weight-medium);
  color: var(--mg-brown);
  font-size: var(--mg-act-item-title-size);
  letter-spacing: var(--mg-tracking-head);
}
.mg .lp-act .item > div > span {
  display: block;
  font-size: var(--mg-act-item-description-size);
  line-height: var(--mg-act-item-leading);
  letter-spacing: var(--mg-tracking);
  color: var(--mg-ink-item);
}
.mg .lp-act .loop {
  position: relative;
  align-self: center;
  width: var(--mg-loop-size);
  height: var(--mg-loop-size);
  margin: var(--mg-zero) auto;
}
.mg .lp-act .loop svg { position: absolute; inset: var(--mg-zero); color: var(--mg-loop); }
.mg .lp-act .loop svg g[stroke] { stroke-width: var(--mg-act-loop-stroke); }
.mg .lp-act .loop p {
  position: absolute;
  inset: var(--mg-zero);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--mg-font-mincho);
  font-size: var(--mg-fs-loop);
  line-height: var(--mg-act-item-leading);
  letter-spacing: var(--mg-tracking-head);
}
/* 760px = --mg-bp（CSS変数はメディア条件に使えない） */
@media (max-width: 760px) {
  .mg .lp-act {
    padding: var(--mg-sec-pad-y-sp) var(--mg-sec-pad-x-sp) var(--mg-act-pad-bottom-sp);
  }
  .mg .lp-act .h-c {
    font-size: var(--mg-act-heading-size-sp);
    margin: var(--mg-act-heading-gap-sp) var(--mg-zero);
  }
  .mg .lp-act .cards { grid-template-columns: var(--mg-act-side-column); gap: var(--mg-act-cards-gap-sp); }
  .mg .lp-act .two { grid-template-columns: var(--mg-act-side-column); gap: var(--mg-act-two-gap-sp); }
  .mg .lp-act .loop { width: var(--mg-loop-size-sp); height: var(--mg-loop-size-sp); }
  .mg .lp-act .loop p { font-size: var(--mg-fs-loop-sp); }
}

/* ⑦は④の.lp-bandをそのまま再利用。 */
/* ⑧ MEMBER VOICE */
.mg .lp-voice {
  background: var(--mg-sage);
  padding: var(--mg-sec-pad-y) var(--mg-sec-pad-x) var(--mg-sec-pad-y-bottom);
  font-size: var(--mg-voice-base-size);
  line-height: normal;
}
.mg .lp-voice .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--mg-voice-card-gap);
  max-width: var(--mg-voice-cards-max);
  margin: var(--mg-voice-cards-top) auto var(--mg-zero);
}
.mg .lp-voice .card {
  width: var(--mg-voice-card-width);
  min-width: var(--mg-voice-card-min);
  background: var(--mg-card);
  border-radius: var(--mg-radius-card);
  padding: var(--mg-voice-card-pad-top) var(--mg-voice-card-pad-x) var(--mg-voice-card-pad-bottom);
  text-align: center;
}
.mg .lp-voice .card img {
  width: var(--mg-voice-avatar-size);
  height: var(--mg-voice-avatar-size);
  border-radius: var(--mg-radius-circle);
  object-fit: cover;
  margin: var(--mg-zero) auto var(--mg-voice-avatar-gap);
}
.mg .lp-voice .attr {
  font-weight: var(--mg-weight-medium);
  font-size: var(--mg-voice-attribute-size);
  letter-spacing: var(--mg-voice-attribute-tracking);
}
.mg .lp-voice .area {
  font-size: var(--mg-voice-area-size);
  color: var(--mg-ink-on-sage);
  letter-spacing: var(--mg-tracking-head);
  margin: var(--mg-voice-area-top) var(--mg-zero) var(--mg-voice-area-bottom);
}
.mg .lp-voice .card p.v {
  font-size: var(--mg-fs-small);
  line-height: var(--mg-leading);
  letter-spacing: var(--mg-voice-copy-tracking);
  text-align: left;
  text-wrap: pretty;
  word-break: auto-phrase;
}
.mg .lp-voice .card p.v + p.v { margin-top: var(--mg-voice-paragraph-gap); }
/* 760px = --mg-bp（CSS変数はメディア条件に使えない） */
@media (max-width: 760px) {
  .mg .lp-voice {
    padding: var(--mg-sec-pad-y-sp) var(--mg-sec-pad-x-sp) var(--mg-voice-pad-bottom-sp);
  }
  .mg .lp-voice .cards {
    gap: var(--mg-voice-card-gap-sp);
    margin-top: var(--mg-voice-cards-top-sp);
  }
  .mg .lp-voice .card { width: var(--mg-full); }
}

/* ⑨ FAQ：detailsの標準動作でキーボードからも開閉する。 */
.mg .lp-faq {
  background: var(--mg-sage);
  padding: var(--mg-sec-pad-y) var(--mg-sec-pad-x) var(--mg-sec-pad-y-bottom);
  font-size: var(--mg-faq-base-size);
  line-height: normal;
}
.mg .lp-faq .list {
  max-width: var(--mg-faq-list-max);
  margin: var(--mg-faq-list-top) auto var(--mg-zero);
  display: grid;
  gap: var(--mg-faq-list-gap);
}
.mg .lp-faq details {
  background: var(--mg-card-faq);
  border: var(--mg-faq-border-width) solid var(--mg-faq-border);
  border-radius: var(--mg-radius-faq);
}
.mg .lp-faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: var(--mg-faq-number-column-pc) var(--mg-faq-text-column) var(--mg-faq-arrow-column);
  column-gap: var(--mg-faq-number-gap);
  align-items: center;
  padding: var(--mg-faq-summary-pad-y) var(--mg-faq-summary-pad-x);
  font-weight: var(--mg-weight-medium);
  font-size: var(--mg-faq-question-size);
  letter-spacing: var(--mg-tracking);
  line-height: var(--mg-faq-question-leading);
  border-radius: inherit;
}
.mg .lp-faq summary::-webkit-details-marker { display: none; }
.mg .lp-faq summary:focus-visible {
  outline: var(--mg-focus-width) solid var(--mg-ink);
  outline-offset: var(--mg-faq-focus-inset);
  border-radius: var(--mg-radius-faq);
}
.mg .lp-faq summary .q {
  font-family: var(--mg-font-en);
  font-size: var(--mg-faq-number-size);
  color: var(--mg-brown-on-sage);
  font-variant-numeric: lining-nums;
}
.mg .lp-faq summary .chev {
  width: var(--mg-faq-arrow-size);
  height: var(--mg-faq-arrow-size);
  border-right: var(--mg-faq-arrow-border) solid var(--mg-ink-item);
  border-bottom: var(--mg-faq-arrow-border) solid var(--mg-ink-item);
  transform: rotate(var(--mg-faq-arrow-angle));
  justify-self: end;
}
.mg .lp-faq .a {
  padding: var(--mg-faq-answer-padding);
  padding-left: var(--mg-faq-answer-left-pc);
  font-size: var(--mg-fs-small);
  line-height: var(--mg-leading);
  letter-spacing: var(--mg-faq-answer-tracking);
  text-wrap: pretty;
  word-break: auto-phrase;
}
/* ⑩ LINE：①と同じ.cta-btnをHTMLに直接記述。ホバー・フォーカスは末尾の動きの定義を使う。 */
.mg .lp-line {
  background: var(--mg-cream);
  padding: var(--mg-line-pad-top) var(--mg-sec-pad-x) var(--mg-line-pad-bottom);
  text-align: center;
  font-size: var(--mg-line-base-size);
  line-height: normal;
}
.mg .lp-line .en {
  font-family: var(--mg-font-en);
  font-weight: var(--mg-weight-medium);
  color: var(--mg-brown-display);
  font-size: var(--mg-fs-en-title);
  letter-spacing: var(--mg-line-en-tracking);
}
.mg .lp-line .ttl {
  font-family: var(--mg-font-mincho);
  font-weight: var(--mg-weight-medium);
  font-size: var(--mg-line-title-size);
  letter-spacing: var(--mg-tracking-head);
  margin: var(--mg-line-title-top) var(--mg-zero) var(--mg-line-title-bottom);
}
.mg .lp-line .msg {
  font-size: var(--mg-fs-body);
  line-height: var(--mg-line-message-leading);
  letter-spacing: var(--mg-tracking);
  max-width: var(--mg-line-message-max);
  margin: var(--mg-zero) auto var(--mg-line-message-bottom);
  text-wrap: pretty;
  word-break: auto-phrase;
}
.mg .lp-line .id {
  font-size: var(--mg-line-id-size);
  color: var(--mg-ink-soft);
  letter-spacing: var(--mg-line-id-tracking);
  margin-top: var(--mg-line-id-top);
}
/* 760px = --mg-bp（CSS変数はメディア条件に使えない） */
@media (max-width: 760px) {
  .mg .lp-faq {
    padding: var(--mg-sec-pad-y-sp) var(--mg-sec-pad-x-sp) var(--mg-faq-pad-bottom-sp);
  }
  .mg .lp-faq summary {
    grid-template-columns: var(--mg-faq-number-column-sp) var(--mg-faq-text-column) var(--mg-faq-arrow-column);
    padding: var(--mg-faq-summary-pad-y-sp) var(--mg-faq-summary-pad-x-sp);
    font-size: var(--mg-faq-question-size-sp);
  }
  .mg .lp-faq .a { padding: var(--mg-faq-answer-padding-sp); }
  .mg .lp-line {
    padding: var(--mg-line-pad-top-sp) var(--mg-sec-pad-x-sp) var(--mg-line-pad-bottom-sp);
  }
  .mg .lp-line .en { font-size: var(--mg-line-en-size-sp); }
  .mg .lp-line .ttl { font-size: var(--mg-line-title-size-sp); }
}

/* ⑪ MEGURUの中身としてのフッター。親サイトのfooterとは分ける。 */
.mg .lp-foot { font-size: var(--mg-foot-base-size); line-height: normal; }
.mg .lp-foot .band {
  position: relative;
  height: var(--mg-foot-band-h);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--mg-foot-background);
}
.mg .lp-foot .band .logo { width: var(--mg-foot-logo-width); }
.mg .lp-foot .band .logo img {
  width: var(--mg-full);
  margin: var(--mg-top-logo-trim-start) var(--mg-zero) var(--mg-top-logo-trim-end);
}
.mg .lp-foot .photos {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--mg-zero);
  margin-top: var(--mg-foot-photo-overlap);
  padding: var(--mg-zero) var(--mg-foot-photo-pad-x);
}
.mg .lp-foot .photos img {
  object-fit: cover;
  box-shadow: var(--mg-zero) var(--mg-foot-shadow-y) var(--mg-foot-shadow-blur) var(--mg-photo-shadow);
}
.mg .lp-foot .photos .s {
  width: var(--mg-foot-photo-small-width);
  aspect-ratio: var(--mg-foot-photo-ratio);
  margin-bottom: var(--mg-foot-photo-small-bottom);
}
.mg .lp-foot .photos .l { width: var(--mg-foot-photo-large-width); aspect-ratio: var(--mg-foot-photo-ratio); }
.mg .lp-foot .photos .m {
  width: var(--mg-foot-photo-medium-width);
  aspect-ratio: var(--mg-foot-photo-ratio);
  margin-bottom: var(--mg-foot-photo-medium-bottom);
}
.mg .lp-foot .bar {
  background: var(--mg-bar);
  padding: var(--mg-foot-bar-top) var(--mg-sec-pad-x) var(--mg-foot-bar-bottom);
  text-align: center;
}
.mg .lp-foot .sns {
  display: flex;
  justify-content: center;
  gap: var(--mg-foot-sns-gap);
  margin-bottom: var(--mg-foot-sns-gap);
}
.mg .lp-foot .sns a {
  width: var(--mg-foot-sns-size);
  height: var(--mg-foot-sns-size);
  border-radius: var(--mg-radius-circle);
  border: var(--mg-foot-sns-border-width) solid var(--mg-sns-border);
  display: grid;
  place-items: center;
  color: var(--mg-ink);
  text-decoration: none;
  font-size: var(--mg-foot-sns-font-size);
  font-weight: var(--mg-weight-medium);
}
.mg .lp-foot .sns a:focus-visible {
  outline: var(--mg-focus-width) solid var(--mg-ink);
  outline-offset: var(--mg-focus-offset);
}
.mg .lp-foot .copy {
  font-size: var(--mg-foot-copy-size);
  letter-spacing: var(--mg-tracking-head);
  color: var(--mg-ink-soft);
}
/* 760px = --mg-bp（CSS変数はメディア条件に使えない） */
@media (max-width: 760px) {
  .mg .lp-foot .band { height: var(--mg-foot-band-h-sp); }
  .mg .lp-foot .photos { margin-top: var(--mg-foot-photo-overlap-sp); padding: var(--mg-zero); }
  .mg .lp-foot .photos .s { display: none; }
  .mg .lp-foot .photos .l { width: var(--mg-foot-photo-large-width-sp); }
  .mg .lp-foot .photos .m {
    width: var(--mg-foot-photo-medium-width-sp);
    margin-bottom: var(--mg-foot-photo-medium-bottom-sp);
  }
}

/* M: JSが準備できた場合だけフェード対象を隠す。①TOPには対象を付けない。 */
.mg [data-fade] {
  opacity: var(--mg-fade-visible);
  transform: translateY(var(--mg-zero));
  transition: opacity var(--mg-dur-fade) var(--mg-ease), transform var(--mg-dur-fade) var(--mg-ease);
}
html.js .mg [data-fade]:not(.is-visible) {
  opacity: var(--mg-zero);
  transform: translateY(var(--mg-fade-distance));
}
.mg .cta-btn {
  transition: background-color var(--mg-dur-hover) var(--mg-ease), transform var(--mg-dur-hover) var(--mg-ease);
}
.mg .cta-btn:is(:hover, :focus-visible) {
  background-color: var(--mg-cta-hover);
  transform: translateY(var(--mg-cta-hover-rise));
}
.mg .lp-faq summary .chev { transition: transform var(--mg-dur-hover) var(--mg-ease); }
.mg .lp-faq details[open] summary .chev { transform: rotate(var(--mg-faq-arrow-open-angle)); }
.mg .lp-band { background-attachment: fixed; }
/* 760px = --mg-bp（CSS変数はメディア条件に使えない） */
@media (max-width: 760px) {
  .mg .lp-band { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .mg [data-fade],
  html.js .mg [data-fade]:not(.is-visible) {
    opacity: var(--mg-fade-visible);
    transform: none;
    transition: none;
  }
  .mg .cta-btn { transition: none; }
  .mg .cta-btn:is(:hover, :focus-visible) { transform: none; }
  .mg .lp-faq summary .chev { transition: none; }
  .mg .lp-band { background-attachment: scroll; }
}