:root {
  --surface: #ffffff;
  --surface-variant: #f2f4f6;
  --on-surface: #473a2b;

  --primary: #34ac77;
  --primary-variant: #219662;
  --primary-container: #edfff6;
  --on-primary-container: #1c8d5b;
  --on-primary-highlight: #fff155;

  --secondary: #93813b;
  --secondary-container: #f8ecc8;

  --tertiary: #df514c;
  --quaternary: #3496ac;

  --border: #a7dbbe;
}

:root {
  --scale-2: min(100vw / 375 * 1, 2px);
  --scale-4: min(100vw / 375 * 2, 4px);
  --scale-8: min(100vw / 375 * 4, 8px);
  --scale-13: min(100vw / 375 * 12, 13px);
  --scale-16: min(100vw / 375 * 14, 16px);
  --scale-18: min(100vw / 375 * 16, 18px);
  --scale-20: min(100vw / 375 * 17, 20px);
  --scale-24: min(100vw / 375 * 18, 24px);
  --scale-32: min(100vw / 375 * 23, 32px);
  --scale-40: min(100vw / 375 * 28, 40px);
  --scale-48: min(100vw / 375 * 32, 48px);
  --scale-56: min(100vw / 375 * 36, 56px);
  --scale-64: min(100vw / 375 * 38, 64px);
  --scale-80: min(100vw / 375 * 40, 80px);
  --scale-120: min(100vw / 375 * 64, 120px);
  --scale-160: min(100vw / 375 * 96, 160px);
  --scale-240: min(100vw / 375 * 120, 240px);
  --scale-320: min(100vw / 375 * 160, 320px);
  --scale-400: min(100vw / 375 * 200, 400px);
}

:root {
  /* === コンテンツ最大幅（固定px）=== */
  --content-width-full: 100vw;
  --content-width-m: 1080px;
  --content-width-s: 960px;
  --content-width-xs: 800px;
  --content-width-xxs: 640px;

  /* === レイアウト間隔（スケール変数参照）=== */
  --column-gap: var(--scale-40, 40px);
  --row-gap: var(--scale-56, 56px);
  --padding-block: var(--scale-80, 80px);
  --padding-inline: var(--scale-32, 32px);
  --card-gap: var(--scale-24, 24px);
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "palt";
  position: relative;
  color: var(--on-surface, #473a2b);
}

img,
iframe {
  max-width: 100%;
}

h2,
h3 {
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  font-style: normal;
  font-weight: 800;
  line-height: 140%; /* 67.2px */
}

h2 {
  font-size: var(--scale-48, 48px);
  letter-spacing: calc(1em / 48 * 2);
  text-align: center;
}

h3 {
  font-size: var(--scale-32, 32px);
}

.c-button {
  display: flex;
  max-width: var(--scale-320, 320px);
  padding: var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--scale-8, 8px);
  flex: 1 0 0;
  border-radius: 1000px;
  border: var(--scale-2) solid var(--surface);
  background: var(
    --Linear,
    linear-gradient(90deg, #e45f00 0%, #f89700 51.44%, #f3b200 100%)
  );
  color: var(--surface);
  text-align: center;
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 30px */
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
}
.c-button:before,
.c-button:after {
  content: "";
  display: block;
  width: var(--scale-20, 20px);
  aspect-ratio: 1/1;
}
.c-button:after {
  background: url(../images/icon_arrow.svg) center center / contain no-repeat;
}

@media screen and (max-width: 768px) {
  .only-pc {
    display: none;
  }
}

@media not screen and (max-width: 768px) {
  .only-sp {
    display: none;
  }
}

span {
  display: inline-block;
}
span.highlight {
  display: inline;
}

/*============================
header
============================*/

header {
  display: flex;
  padding: var(--scale-8, 8px) var(--padding-inline, 40px);
  gap: var(--scale-16, 16px);
  align-items: center;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--surface);
  z-index: 1000;
}
header h1 a img {
  height: auto;
  width: 100%;
  max-width: var(--scale-320, 320px);
  flex: 1 0 0;
}
header nav {
  flex: 1 0 auto;
  justify-items: right;
}
header nav ul li a.c-button {
  height: 100%;
  font-size: var(--scale-16, 16px);
}

/*============================
#mv
============================*/
section#mv figure.only-pc img {
  height: min(100vw / 1280 * 560, 560px);
  width: 100%;
  object-fit: cover;
}
@media screen and (min-width: 1920px) {
  section#mv figure.only-pc img {
    height: calc(100vw / 1920 * 560);
  }
}
/*============================
.cta
============================*/
section.c-cta {
  display: flex;
  padding: var(--scale-40, 40px) var(--padding-inline, 40px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--scale-16, 16px);
  background: var(--primary-variant, #219662);
}
section.c-cta div.c-cta__subtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--scale-16, 16px);
  color: var(--surface, #fff);

  font-size: var(--scale-24, 24px);
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}
section.c-cta div.c-cta__subtitle figure.subtitle__image img {
  width: calc(1em / 24 * 40);
  height: auto;
}
section.c-cta div.c-cta__subtitle div.subtitle__text {
  word-break: auto-phrase;
  text-align: center;
}
section.c-cta div.c-cta__subtitle div.subtitle__text span.highlight {
  color: var(--on-primary-highlight, #fff155);
  font-weight: 800;
}
section.c-cta div.c-cta__body {
  width: 100%;
}
section.c-cta div.c-cta__body a.c-button {
  width: 100%;
  max-width: var(--content-width-xxs, 640px);
  margin-inline: auto;
}
/*============================
#benefit
============================*/
section#benefit {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 40px);
  flex-direction: column;
  align-items: center;
  gap: var(--column-gap, 40px);
  background: var(--secondary-container, #f8eec8);
}
section#benefit div.benefit__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-16, 16px);
}
section#benefit div.benefit__heading div.heading__subtitle {
  display: flex;
  padding: var(--scale-8, 8px) var(--scale-24, 24px);
  justify-content: center;
  align-items: center;
  border-radius: 1000px;
  background: var(--surface, #fff);
  color: var(--on-surface, #473a2b);
  text-align: center;
  word-break: auto-phrase;

  /* H3 */
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  font-size: var(--scale-32, 32px);
  font-style: normal;
  font-weight: 800;
  line-height: 140%; /* 44.8px */
}
section#benefit div.benefit__heading h2 {
  color: var(--on-surface, #473a2b);
}
section#benefit div.benefit__heading h2 span.highlight {
  color: var(--on-primary-container, #1c8d5b);
  font-size: var(--scale-64, 64px);
}
section#benefit div.benefit__heading div.heading__lead {
  align-self: stretch;
  color: var(--on-surface, #473a2b);
  text-align: center;
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 180%; /* 36px */
  word-break: auto-phrase;
}
section#benefit div.benefit__units {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--content-width-m, 1080px);
  gap: var(--scale-24, 24px);
}
@media screen and (max-width: 960px) {
  section#benefit div.benefit__units {
    grid-template-columns: repeat(1, 1fr);
    max-width: var(--content-width-xxs, 640px);
  }
}

section#benefit div.benefit__units div.units__unit {
  display: flex;
  padding: var(--scale-24, 24px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-32, 32px);
  flex: 1 1 auto;
  border-radius: var(--scale-16, 16px);
  background: var(--quaternary, #3496ac);
}
section#benefit div.benefit__units div.units__unit:nth-of-type(3n + 2) {
  background: var(--tertialy, #df514c);
}
section#benefit div.benefit__units div.units__unit:nth-of-type(3n + 3) {
  background: var(--secondary, #9f8930);
}

section#benefit div.benefit__units div.units__unit div.unit__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-24, 24px);
  align-self: stretch;
}

section#benefit
  div.benefit__units
  div.units__unit
  div.unit__heading
  figure
  img {
  width: var(--scale-120, 120px);
  aspect-ratio: 1/1;
}
section#benefit div.benefit__units div.units__unit div.unit__heading h3 {
  color: var(--surface, var(--surface));
}
section#benefit div.benefit__units div.units__unit div.unit__body {
  color: var(--surface, #fff);
  text-align: justify;
  font-size: var(--scale-18, 18px);
  font-style: normal;
  font-weight: 700;
  line-height: 180%; /* 32.4px */
  display: flex;
  flex-direction: column;
  gap: 1em;
}

section#benefit
  div.benefit__units
  div.units__unit
  div.unit__body
  p
  span.highlight {
  color: var(--on-primary-highlight, #fff155);
}

section#benefit
  div.benefit__units
  div.units__unit
  div.unit__heading
  h3
  span.small {
  font-size: var(--scale-24, 24px);
}

/*============================
#reason
============================*/
section#reason {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 40px);
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap, 56px);
  align-self: stretch;
  background: var(--primary);
}
section#reason h2 {
  color: var(--surface, #fff);
}
section#reason h2 span.highlight {
  color: var(--on-primary-highlight, #fff155);
  font-size: var(--scale-64, 64px);
}
section#reason div.reason__units {
  display: flex;
  max-width: var(--content-width-m, 1080px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--card-gap, 24px);
}
section#reason div.reason__units div.units__unit {
  display: flex;
  padding: var(--scale-32, 32px);
  align-items: flex-start;
  gap: var(--column-gap, 40px);
  align-self: stretch;
  border-radius: var(--scale-16, 16px);
  background: var(--surface, #fff);
}
section#reason div.reason__units div.units__unit:nth-of-type(2n) {
  flex-direction: row-reverse;
}

@media screen and (max-width: 768px) {
  section#reason div.reason__units {
    max-width: var(--content-width-xxs, 640px);
  }
  section#reason div.reason__units div.units__unit:nth-of-type(n) {
    flex-direction: column;
  }
}

section#reason div.reason__units div.units__unit figure.unit__image {
  flex: 1 1 calc(100% / 976 * 400);
}
section#reason div.reason__units div.units__unit figure.unit__image img {
  display: flex;
  width: 100%;
  height: auto;
  align-items: center;
  aspect-ratio: 400/266;
  border-radius: var(--scale-16, 16px);
}
section#reason div.reason__units div.units__unit div.unit__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-16, 16px);
  flex: 1 1 calc(100% / 976 * 576);
}

section#reason
  div.reason__units
  div.units__unit
  div.unit__text
  div.text__heading {
  display: flex;
  align-items: center;
  align-content: center;
  gap: var(--scale-16, 16px);
  align-self: stretch;
}

section#reason
  div.reason__units
  div.units__unit
  div.unit__text
  div.text__heading
  div.text__number {
  color: var(--on-primary-container, #1c8d5b);
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  font-size: var(--scale-56, 56px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 84px */
}

section#reason div.reason__units div.units__unit div.unit__text p {
  color: var(--on-surface, #473a2b);
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 200%; /* 40px */
}
section#reason
  div.reason__units
  div.units__unit
  div.unit__text
  p
  span.highlight {
  color: var(--tertiary, #df514c);
  font-weight: 800;
}
/*============================
#video
============================*/
section#video {
  display: flex;
  padding: var(--padding-block, 40px) var(--padding-inline, 28px);
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap, 36px);
  align-self: stretch;
  background: var(--secondary-container, #f8eec8);
}
section#video h2 {
  color: var(--on-primary-container, #1c8d5b);
}
section#video iframe {
  width: 100%;
  max-width: var(--content-width-xs, 800px);
  align-self: stretch;
  aspect-ratio: 16 / 9;
  border-radius: var(--scale-8, 8px);
  display: block;
  margin-inline: auto;
}
/*============================
#award
============================*/
section#award {
  display: flex;
  flex-direction: column;
  padding: var(--padding-inline, 40px) var(--padding-inline, 40px)
    var(--padding-black, 80px) var(--padding-inline, 40px);
  gap: var(--row-gap, 56px);
  justify-content: center;
  background: url(../images/award_back.png);
}
section#award div.award__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-16, 16px);
}
section#award div.award__heading img {
  width: var(--scale-160, 160px);
}
section#award div.award__units {
  display: flex;
  max-width: var(--content-width-m, 1080px);
  gap: var(--card-gap, 24px);
  margin-inline: auto;
}
section#award div.award__units div.untis__unit {
  display: flex;
  padding: var(--scale-20, 20px);
  flex-direction: column;
  align-items: center;
  gap: var(--card-gap, 24px);
  flex: 1 0 0;
  border-radius: var(--scale-8, 8px);
  border: var(--scale-4, 4px) solid #dacd96;
  background: var(--surface, #fff);
}

@media screen and (max-width: 768px) {
  section#award div.award__units {
    flex-direction: column;
    max-width: var(--content-width-xxs, 640px);
  }
}

section#award div.award__units div.untis__unit figure.unit__image img {
  width: 100%;
  aspect-ratio: 488/308.21;
  object-fit: cover;
  border-radius: var(--scale-8, 8px);
}

section#award div.award__units div.untis__unit div.unit__name {
  display: flex;
  align-items: flex-start;
  gap: var(--scale-16, 16px);
  width: 100%;
}

section#award
  div.award__container
  div.award__units
  div.untis__unit
  div.unit__name
  figure.name__icon
  img {
  height: var(--row-gap, 56px);
  aspect-ratio: 47.76/56;
}

section#award div.award__units div.untis__unit div.unit__name h3 {
  color: #a68d2c;
  display: grid;
  grid-template-columns: auto auto 1fr;
}

section#award
  div.award__units
  div.untis__unit
  div.unit__name
  h3
  div.name__furigana {
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 16px */
  display: contents;
  text-align: center;
}

section#award
  div.award__units
  div.untis__unit
  div.unit__name
  h3
  div.name__kanji {
  color: #a68d2c;
  text-align: center;
  display: contents;
}

section#award div.award__units div.untis__unit div.unit__description {
  color: var(--on-surface, #473a2b);
  text-align: justify;
  font-size: var(--scale-18, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: 180%; /* 32.4px */
}
section#award div.award__more {
  display: flex;
  flex-direction: column;
  gap: var(--scale-16, 16px);
}
section#award div.award__more div.more__title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--scale-14, 14px);
  align-self: stretch;
  text-align: center;
}

section#award div.award__more div.more__title figure img {
  width: var(--scale-56, 56px);
  aspect-ratio: 56/99.24;
}
section#award div.award__more div.more__title h3 {
  color: var(--tertialy, #df514c);
}
section#award div.award__more div.more__description {
  font-size: var(--scale-18, 18px);
  font-weight: 500;
  line-height: 180%; /* 32.4px */
  text-align: center;
}

/*============================
#testimonial
============================*/
section#testimonial {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 40px);
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap, 56px);
  align-self: stretch;
}
section#testimonial h2 {
  color: var(--on-primary-container, #1c8d5b);
}
section#testimonial div.testimonial__units {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--content-width-m, 1080px);
  gap: var(--card-gap, 24px);
  margin-inline: auto;
}

section#testimonial div.testimonial__units div.units__unit {
  display: grid;
  grid-template-columns: 1fr;
  padding: var(--scale-20, 20px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-16, 16px);
  background: var(--secondary-container, #f8eec8);
  border-radius: var(--scale-16, 16px);
}

section#testimonial
  div.testimonial__units
  div.units__unit
  figure.unit__image
  img {
  width: var(--scale-160, 160px);
  aspect-ratio: 160/193.61;
  margin-inline: auto;
  display: block;
}
section#testimonial div.testimonial__units div.units__unit h3 {
  color: var(--on-primary-container, #1c8d5b);
  text-align: center;
  font-size: var(--scale-24, 24px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 36px */
}

section#testimonial div.testimonial__units div.units__unit div.unit__text {
  color: var(--on-surface, #473a2b);
  text-align: justify;
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 27.2px */
}

section#testimonial
  div.testimonial__units
  div.units__unit
  div.unit__text
  span.highlight {
  color: var(--tertialy, #df514c);
  font-weight: 700;
}
section#testimonial div.testimonial__units div.units__unit div.unit__name {
  color: var(--on-surface, #473a2b);
  text-align: right;
  font-size: var(--scale-13, 13px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 19.5px */
}
@media screen and (max-width: 960px) {
  section#testimonial div.testimonial__units {
    grid-template-columns: repeat(1, 1fr);
    max-width: var(--content-width-xxs, 640px);
  }
  section#testimonial div.testimonial__units div.units__unit {
    grid-template-columns: auto 1fr;
  }
  section#testimonial div.testimonial__units div.units__unit h3 {
    grid-column: 2 / 3;
    text-align: left;
  }
  section#testimonial div.testimonial__units div.units__unit div.unit__text {
    grid-column: 1 / 3;
  }
  section#testimonial div.testimonial__units div.units__unit div.unit__name {
    grid-column: 1 / 3;
  }
}

/*============================
#process
============================*/
section#process {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 40px);
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap, 56px);
  align-self: stretch;
  background: var(--primary, #34ac77);
}
section#process h2 {
  color: var(--surface, #fff);
}
section#process h2 span.small {
  font-size: var(--scale-32, 32px);
}
section#process div.process__units {
  display: flex;
  max-width: var(--content-width-xs, 800px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-16, 16px);
  align-self: stretch;
  margin-inline: auto;
}
section#process div.process__units div.units__unit {
  display: flex;
  padding: var(--scale-20, 20px);
  justify-content: center;
  align-items: flex-start;
  gap: var(--scale-24, 24px);
  align-self: stretch;
  border-radius: var(--scale-8, 8px);
  background: var(--surface, #fff);
  position: relative;
}

@media screen and (max-width: 768px) {
  section#process div.process__units div.units__unit {
    flex-direction: column;
  }
}

section#process div.process__units div.units__unit div.unit__number {
  color: var(--surface, #fff);
  text-align: center;
  font-size: var(--scale-24, 24px);
  font-style: normal;
  font-weight: 800;
  line-height: 150%; /* 36px */
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;

  display: flex;
  height: calc(1em / 24 * 40);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;

  border-radius: 1000px;
  border: var(--scale-2, 2px) solid var(--on-surface, #473a2b);
  background: var(--on-surface, #473a2b);

  position: absolute;
  left: var(--scale-16, 16px);
  top: var(--scale-16, 16px);
}

section#process
  div.process__units
  div.units__unit:nth-of-type(2n)
  div.unit__number {
  background: var(--surface, #fff);
  color: var(--on-surface, #473a2b);
}

section#process div.process__units div.units__unit figure.unit__image {
  flex: 0 0 var(--scale-240, 240px);
}
section#process div.process__units div.units__unit figure.unit__image img {
  aspect-ratio: 16/9;
  border-radius: var(--scale-8, 8px);
}
section#process div.process__units div.units__unit div.unit__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-16, 16px);
  flex: 1 1 auto;
}
section#process div.process__units div.units__unit h3 {
  color: var(--on-primary-container, #1c8d5b);
}
section#process div.process__units div.units__unit div.text__description {
  color: var(--on-surface, #473a2b);
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 180%; /* 28.8px */
}

/*============================
#information
============================*/
section#information {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 40px);
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap, 56px);
  align-self: stretch;
  background: var(--secondary-container, #f8eec8);
}
section#information h2 {
  color: var(--on-primary-container, #1c8d5b);
}
section#information div.information__list {
  width: 100%;
  display: flex;
  max-width: var(--content-width-xs, 800px);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin-inline: auto;
}
section#information div.information__list dl {
  display: flex;
  padding: var(--scale-16, 16px) 0px;
  align-items: flex-start;
  gap: var(--scale-24, 24px);
  align-self: stretch;
  border-bottom: 1px solid var(--border, #a7dbbe);
}

section#information div.information__list dl:nth-last-of-type(1) {
  border-bottom: none;
}
section#information div.information__list dl dt {
  color: var(--surface, #fff);
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 36px */
  display: flex;
  min-width: 5em;
  padding: var(--scale-2, 2px) 0;
  justify-content: center;
  align-items: center;
  border-radius: var(--scale-2, 2px);
  background: var(--primary, #34ac77);
}
@media screen and (max-width: 768px) {
  section#information div.information__list dl {
    flex-direction: column;
    border-bottom: none;
  }
  section#information div.information__list dl dt {
    width: 100%;
  }
}

section#information div.information__list dl dd {
  color: var(--on-surface, #473a2b);
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 40.8px */
}
section#information div.information__list dl dd a {
  color: var(--primary-variant, #219662);
  text-decoration-line: underline;
}
section#information div.information__list dl dd a img {
  vertical-align: middle;
  margin-left: 0.2em;
}
section#information div.information__orientation {
  width: 100%;
  display: flex;
  max-width: var(--content-width-s, 960px);
  padding: var(--scale-56, 56px) var(--padding-inline, 40px);
  flex-direction: column;
  gap: var(--scale-32, 32px);
  align-self: stretch;
  margin-inline: auto;
  border-radius: var(--scale-16, 16px);
  border: var(--scale-8, 8px) solid var(--border, #a7dbbe);
  background: var(--surface, #fff);
}
section#information div.information__orientation h3 {
  color: var(--on-primary-container, #1c8d5b);
  text-align: center;
}

/*============================
#message
============================*/
section#message {
  display: flex;
  padding: var(--padding-inline, 40px);
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap, 56px);
  align-self: stretch;
  background: url(../images/message_back.jpg) center center / cover no-repeat;
}
section#message div.message__container {
  display: flex;
  max-width: var(--content-width-m, 1080px);
  padding: var(--padding-inline, 40px);
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap, 56px);
  align-self: stretch;
  border-radius: var(--scale-16, 16px);
  background: rgba(255, 255, 255, 0.9);
  margin-inline: auto;
}
section#message div.message__container h2 {
  color: var(--on-primary-container, #1c8d5b);
}
section#message div.message__container div.message__body {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: var(--column-gap, 40px);
  align-self: stretch;
}

section#message div.message__container div.message__body figure.body__image {
  flex: 1 1 50%;
}

section#message
  div.message__container
  div.message__body
  figure.body__image
  img {
  border-radius: var(--scale-8, 8px);
}

section#message div.message__container div.message__body div.body__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--scale-20, 20px);
  flex: 1 1 50%;
  color: var(--on-surface, #473a2b);
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 27.2px */
}

section#message
  div.message__container
  div.message__body
  div.body__text
  p
  span.highlight {
  color: var(--tertialy, #df514c);
  font-weight: 700;
}
section#message div.message__container div.profile {
  display: flex;
  padding: var(--scale-24, 24px);
  align-items: flex-start;
  align-content: flex-start;
  gap: var(--scale-24, 24px);
  align-self: stretch;
  border-radius: var(--scale-8, 8px);
  background: var(--primary, #34ac77);
}
section#message div.message__container div.profile div.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--scale-24, 24px);
  flex: 1 1 640px;
}
section#message div.message__container div.profile div.text h3 {
  color: var(--surface, #fff);
}
section#message div.message__container div.profile div.text ul {
  color: var(--surface, #fff);
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 500;
  list-style-type: disc;
  margin-left: 1.5em;
  line-height: 170%; /* 27.2px */
}
section#message div.message__container div.profile div.text ul li {
  margin-bottom: 0.5em;
}
section#message div.message__container div.profile figure.image {
  flex: 1 1 240px;
}
section#message div.message__container div.profile figure.image img {
  border-radius: var(--scale-8, 8px);
}

@media screen and (max-width: 768px) {
  section#message div.message__container {
    max-width: var(--content-width-xxs, 640px);
  }

  section#message div.message__container div.message__body {
    flex-direction: column;
  }
  section#message
    div.message__container
    div.message__body
    figure.body__image
    img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: top;
  }
  section#message div.message__container div.profile {
    flex-direction: column;
  }
  section#message div.message__container div.profile figure.image img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
  }
  section#message div.message__container div.profile div.text {
    flex: 1 1 auto;
  }
}

/*============================
#faq
============================*/
section#faq {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 40px);
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap, 56px);
  align-self: stretch;
}
section#faq h2 {
  color: var(--on-primary-container, #1c8d5b);
}
section#faq div.faq__list {
  display: flex;
  max-width: var(--content-width-xs, 800px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--row-gap, 56px);
  align-self: stretch;
  margin-inline: auto;
}
section#faq div.faq__list dl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-16);
  align-self: stretch;
}
section#faq div.faq__list dl dt {
  gap: var(--scale-16, 16px);
  align-self: stretch;
  position: relative;
  padding-left: calc(var(--scale-40, 40px));
  color: var(--on-surface, #473a2b);
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 36px */
}
section#faq div.faq__list dl dt:before {
  content: "";
  width: var(--scale-32, 32px);
  aspect-ratio: 1/1;
  background: url(../images/faq_q.svg) center center / contain no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}
section#faq div.faq__list dl dd {
  padding: var(--scale-16, 16px) var(--scale-16, 16px) var(--scale-16, 16px)
    calc(var(--scale-32, 32px) + var(--scale-24, 24px));
  border-radius: var(--scale-8, 8px);
  background: var(--primary-container, #edfff6);
  position: relative;
  color: var(--on-surface, #473a2b);
  font-size: var(--scale-18, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: 180%; /* 36px */
  width: 100%;
}
section#faq div.faq__list dl dd:before {
  content: "";
  width: var(--scale-32, 32px);
  aspect-ratio: 1/1;
  background: url(../images/faq_a.svg) center center / contain no-repeat;
  position: absolute;
  left: var(--scale-16, 16px);
  top: var(--scale-16, 16px);
}

/*============================
#contact
============================*/
section#contact {
  display: flex;
  padding: var(--padding-inline, 40px);
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  background: var(--primary, #34ac77);
}
section#contact div.contact__container {
  display: flex;
  max-width: var(--content-width-xs, 800px);
  padding: var(--scale-56, 56px) var(--padding-inline, 40px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-40, 40px);
  align-self: stretch;
  border-radius: var(--scale-13, 13px);
  background: var(--primary-container, #edfff6);
  margin-inline: auto;
  width: 100%;
}
section#contact div.contact__container h2 {
  color: var(--on-primary-container, #1c8d5b);
}
section#contact div.contact__container div.contact__text {
  color: var(--on-surface, #473a2b);
/*  text-align: center;*/
  font-size: var(--scale-18, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: 200%; /* 36px */
}
section#contact div.contact__container div.contact__text span.highlight {
  color: var(--tertiary, #df514c);
  font-weight: 700;
}
section#contact div.contact__container form.contact__form {
  width: 100%;
  max-width: var(--content-width-xxs, 640px);
  display: flex;
  gap: var(--scale-40, 40px);
  flex-direction: column;
  align-items: center;
}
section#contact div.contact__container form.contact__form div.form__item {
  width: 100%;
}
section#contact
  div.contact__container
  form.contact__form
  div.form__item
  :is(input[type="email"], input[type="text"]) {
  display: flex;
  padding: var(--scale-20, 20px);
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: var(--scale-8, 8px);
  border: 1px solid #a6a09c;
  background: var(--surface, #fff);
  width: 100%;
}

section#contact div.contact__container form.contact__form div.form__submit {
  width: 100%;
}

section#contact
  div.contact__container
  form.contact__form
  div.form__submit
  button.c-button {
  max-width: var(--scale-400, 400px);
  width: 100%;
  margin-inline: auto;
}

@media screen and (max-width: 800px) {
  section#contact div.contact__container br.pc {
    display: none;
  }
}
/*============================
#contact-form
============================*/
section#contact-form {
  display: flex;
  padding: var(--padding-inline, 40px);
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  background: var(--secondary-container, #f8eec8);
}
section#contact-form
  div.contact__container
  form.contact__form
  div.form__item
  :is(input[type="email"], input[type="text"]) {
  display: flex;
  padding: var(--scale-20, 20px);
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: var(--scale-8, 8px);
  border: 1px solid #a6a09c;
  background: var(--surface, #fff);
  width: 100%;
}

section#contact-form div.contact__container form.contact__form div.form__submit {
  width: 100%;
}

section#contact-form
  div.contact__container
  form.contact__form
  div.form__submit
  button.c-button {
  max-width: var(--scale-400, 400px);
  width: 100%;
  margin-inline: auto;
}

/* */
/* プルダウンメニュー */
#contact-form select {
    height: 55px;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #BBC5CC;
    padding: 0 20px;
    line-height: 1;
    cursor: pointer;
    padding-right: 2em;
}
textarea, select {
    outline: none;
}

/* フォームの見出し */
#contact-form .form_l {
    margin-bottom: 12px;
    font-weight: 500;
}
#contact-form .form {
    margin-bottom: 30px;
}

#contact-form input[type=text], 
#contact-form input[type=tel], 
#contact-form input[type=mail] {
    height: 55px;
    width: 100% !important;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #BBC5CC;
    padding: 0 20px;
    line-height: 1;
}


/* ラジオボタン - original の o を消して自作のマルを使用 */
#contact-form .form_r.sex input[type=radio] {
    position: relative;
    display: none;
}

#contact-form .form_r.sex input[type=radio] + span::before {
    position: absolute;
    content: "";
    display: inline-block;
    width: 26px;
    height: 26px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid #bbc5cc;
    background-color: #fff;
}

#contact-form .form_r.sex input[type=radio]:checked + span::after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #4EA3D4;
}

#contact-form .form_r.sex input[type=radio] + span {
    position: relative;
    padding-left: 38px;
    cursor: pointer;
}

#contact-form .form_r.sex label:first-of-type {
    margin-right: 50px;
}
#contact-form .form_r.sex label {
    width: 100%;
}

#contact-form .form .select-wrap::after {
    position: absolute;
    pointer-events: none;
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    top: calc(50% - 4px);
    right: 20px;
    border-left: 2px solid #004273;
    border-bottom: 2px solid #004273;
    transform: translateX(-50%) rotate(-45deg);
}

#contact-form .form .select-wrap.birth {
    margin-right: 12px;
}

#contact-form .form .select-wrap {
    display: inline-block;
    position: relative;
}

#contact-form .form .req {
    color: #d00;
    font-size: 1.1rem;
    line-height: 1;
    border: 1px solid #d00;
    border-radius: 4px;
    padding: 0 8px 2px;
    margin-left: 14px;
    position: relative;
    top: -2px;
}

#contact-form textarea {
    height: 55px;
    width: 100% !important;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #BBC5CC;
    padding: 20px;
    line-height: 1.5;
    min-height: 268px;
}
#contact-form div#form-wrap{
    max-width: var(--content-width-xs, 800px);
    width: 100%;
}

section#contact-form .c-button::after {
  background: none !important;
}

@media screen and (max-width: 1024px) {
    #contact-form .form_l {
        margin-bottom: 10px;
    }
    #contact-form .form {
        margin-bottom: 20px;
    }
    #contact-form input[type=text], #contact-form input[type=tel], #contact-form input[type=mail] {
        padding: 10px;
        height: 50px;
    }
    #contact-form .form_r.how input[type=radio] + span::before,  #contact-form .form_r.sex input[type=radio] + span::before {
        width: 23px;
        height: 23px;
    }
    #contact-form .form_r.how input[type=radio]:checked + span::after,  #contact-form .form_r.sex input[type=radio]:checked + span::after {
        width: 13px;
        height: 13px;
        left: 5px;
    }
    #contact-form .form_r.how input[type=radio] + span,  #contact-form .form_r.sex input[type=radio] + span {
        padding-left: 30px;
    }
    #contact-form .form_r.sex label:first-of-type {
        margin-right: 45px;
    }
    #contact-form .form .select-wrap::after {
        right: 10px;
    }
    #contact-form .form .select-wrap.birth {
        margin-right: 8px;
    }
    #contact-form .form .req {
        font-size: 0.9rem;
        padding: 0 5px 2px;
        border-radius: 3.5px;
    }
}



/* */







footer {
  display: flex;
  padding: var(--scale-40, 40px) var(--padding-inline, 40px);
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background: var(--primary-variant, #219662);
  color: var(--surface, #fff);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-13, 13px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 19.5px */
}