@charset "UTF-8";
:root {
  --scale: 0.0694444444vw;
  --max: 1;
}
@media screen and (max-width: 767px) {
  :root {
    --scale: 0.2666666667vw;
    --max: 10;
  }
}

/* リセットCSS
===================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  line-height: 1.6;
  font-weight: 500;
  background: #fff;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, button, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

li, dd {
  list-style-type: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

img {
  border: none;
  vertical-align: bottom;
  width: 100%;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}
@media (hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}

input, select {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: #fff;
}

/*------------------------------
common
------------------------------*/
body {
  word-break: break-all;
  color: #183029;
  font-family: "Noto Sans JP", sans-serif;
}
body.is-active {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow-y: scroll; /* スクロールバー補完 */
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
       text-size-adjust: none;
}

main {
  background: #fdf7ef;
  overflow: hidden;
}

/* スマホ用の表示の時はis-pcは非表示 */
@media (max-width: 767px) {
  .pc {
    display: none !important;
  }
}
/* PC用の表示の時はis-spは非表示 */
@media (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
/* コンテンツ幅
------------------------------*/
.inner {
  margin-inline: auto;
  width: clamp(0px, calc(1280 * var(--scale)), calc(1280px * var(--max)));
  max-width: 1280px;
}
@media screen and (max-width: 767px) {
  .inner {
    width: clamp(0px, calc(340 * var(--scale)), calc(340px * var(--max)));
  }
}

@media (min-width: 768px) {
  .u-inner-1200 {
    width: clamp(0px, calc(1200 * var(--scale)), calc(1200px * var(--max)));
    max-width: 1200px;
  }
}

/* セクションタイトル
------------------------------*/
.c-section-title {
  position: relative;
  --accent-color: #087348;
}
.c-section-title--wh {
  --accent-color: #fff;
  color: #fff;
}

.c-section-title__en {
  display: inline-block;
  font-size: clamp(0px, calc(13 * var(--scale)), calc(13px * var(--max)));
  font-weight: 800;
  color: var(--accent-color);
  letter-spacing: 0.2em;
  position: relative;
  padding: 0 3em;
}
.c-section-title__en::before {
  content: "";
  width: 2.1em;
  height: 1px;
  background: var(--accent-color);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.c-section-title__en::after {
  content: "";
  width: 2.1em;
  height: 1px;
  background: var(--accent-color);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .c-section-title__en {
    font-size: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  }
}

.c-section-title__ja {
  margin-top: 0.75em;
  display: block;
  font-size: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max)));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.c-section-title__ja strong {
  font-size: clamp(0px, calc(42 * var(--scale)), calc(42px * var(--max)));
}
.c-section-title__ja .underline {
  display: inline-block;
  background: linear-gradient(transparent 70%, #ffff00 40%);
}
.c-section-title__ja .num {
  font-size: clamp(0px, calc(66 * var(--scale)), calc(66px * var(--max)));
  font-family: "Outfit", sans-serif;
  color: #fe6c41;
  line-height: 1;
}
.c-section-title__ja .yellow {
  color: #ffff00;
}
.c-section-title__ja .orange {
  color: #fe6c41;
}
@media (max-width: 767px) {
  .c-section-title__ja {
    font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
    line-height: 1.4;
  }
  .c-section-title__ja strong {
    font-size: clamp(0px, calc(26 * var(--scale)), calc(26px * var(--max)));
  }
  .c-section-title__ja .num {
    font-size: clamp(0px, calc(56 * var(--scale)), calc(56px * var(--max)));
  }
}

/* リード文
------------------------------*/
.c-lead {
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  margin-top: 1.3em;
  color: #63736D;
}
@media (max-width: 767px) {
  .c-lead {
    font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  }
}

/* テキスト位置
------------------------------*/
.u-text-center {
  text-align: center;
}

/* テキスト色
------------------------------*/
.u-text-wh {
  color: #fff;
}

@media (max-width: 767px) {
  [style*="--ufzsp"][style][style] {
    font-size: clamp(0px, var(--ufzsp) * var(--scale), var(--ufzsp) * var(--max) * 1px);
  }
}
main {
  margin-top: clamp(0px, calc(76.6 * var(--scale)), calc(76.6px * var(--max)));
}
@media (max-width: 767px) {
  main {
    margin-top: clamp(0px, calc(64 * var(--scale)), calc(64px * var(--max)));
  }
}

/*------------------------------
header
------------------------------*/
header {
  padding: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max))) 0 clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
  padding: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max))) 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  width: 100%;
  background: #fff;
}
@media (max-width: 767px) {
  header {
    padding: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max))) 0;
  }
}

.header__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 0 clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 600;
  line-height: 1.6;
  color: #63736d;
}
.header__logo img {
  width: clamp(0px, calc(168 * var(--scale)), calc(168px * var(--max)));
}
@media (max-width: 767px) {
  .header__logo span {
    display: none;
  }
  .header__logo img {
    width: clamp(0px, calc(120 * var(--scale)), calc(120px * var(--max)));
  }
}

.header__contact {
  display: flex;
  align-items: center;
  gap: 0 0.5em;
  background: #fe6c41;
  font-size: clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max)));
  font-weight: 800;
  line-height: 1.4;
  color: #fff;
  border-radius: 999px;
  padding: 0.7em 1.5em;
  box-shadow: 3px 4px 4px rgba(51, 51, 51, 0.17);
}
.header__contact::before {
  display: inline-block;
  content: "";
  position: relative;
  background: url(../img/icon-play.png) no-repeat center center/contain;
  width: 1.9em;
  aspect-ratio: 58/48;
}
@media (min-width: 768px) {
  .header__contact .c-pre-text {
    font-size: clamp(0px, calc(13 * var(--scale)), calc(13px * var(--max)));
  }
}
@media (max-width: 767px) {
  .header__contact {
    display: none;
  }
}

.drawer-icon {
  z-index: 300;
  display: none;
  transition: transform 0.5s ease 0s;
  cursor: pointer;
}
@media (max-width: 767px) {
  .drawer-icon {
    display: block;
  }
}
.drawer-icon.is-active .drawer-icon__bars {
  background: #fff;
}
.drawer-icon.is-active .drawer-icon__bar1 {
  transform: translateX(-50%) rotate(-45deg);
  top: 19px;
  background: #009245;
}
.drawer-icon.is-active .drawer-icon__bar2 {
  display: none;
}
.drawer-icon.is-active .drawer-icon__bar3 {
  transform: translateX(-50%) rotate(45deg);
  top: 19px;
  background: #009245;
}

.drawer-icon__bars {
  width: 40px;
  height: 40px;
  background: #009245;
  border-radius: 50%;
  position: relative;
  z-index: 400;
}

.drawer-icon__bar1,
.drawer-icon__bar2,
.drawer-icon__bar3 {
  position: absolute;
  width: 18px;
  height: 2px;
  background: #fff;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.drawer-icon__bar1 {
  top: 13px;
  transition: transform 0.3s;
}

.drawer-icon__bar2 {
  top: 19px;
}

.drawer-icon__bar3 {
  top: 25px;
  transition: transform 0.3s;
}

.drawer-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background: #009245;
  padding: clamp(0px, calc(125 * var(--scale)), calc(125px * var(--max))) clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max)));
  z-index: 299;
  transform: translateX(105%);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* scroll伝番防止 */
}
.drawer-content.is-active {
  transform: translateX(0);
}

.drawer-menu li a {
  display: inline-block;
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 800;
  line-height: 2;
  color: #fff;
  font-family: "Outfit", sans-serif;
  letter-spacing: 0.2em;
}

.drawer-contact {
  margin-top: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  width: 13.6em;
  display: flex;
  align-items: center;
  gap: 0 0.9em;
  background: #fff;
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 800;
  line-height: 1.4;
  border-radius: 999px;
  padding: 0.7em;
  box-shadow: 3px 4px 4px rgba(51, 51, 51, 0.17);
}
.drawer-contact::before {
  display: inline-block;
  content: "";
  position: relative;
  background: url(../img/icon-play_circle.png) no-repeat center center/contain;
  width: 2em;
  aspect-ratio: 1/1;
}

/*------------------------------
fv
------------------------------*/
.fv__wrap {
  position: relative;
  background: #fff;
}
.fv__wrap .fv__img {
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(86%);
  aspect-ratio: 1666/1752;
  width: clamp(0px, calc(831 * var(--scale)), calc(831px * var(--max)));
  z-index: 2;
}
@media (max-width: 767px) {
  .fv__wrap .fv__img {
    display: none;
  }
}

.fv {
  background: url(../img/fv-bg.png) no-repeat center center/cover;
  padding: clamp(0px, calc(79 * var(--scale)), calc(79px * var(--max))) 0 clamp(0px, calc(97 * var(--scale)), calc(97px * var(--max)));
  position: relative;
}
@media (max-width: 767px) {
  .fv {
    background: url(../img/fv-bg_sp.png) no-repeat center center/cover;
    padding: clamp(0px, calc(34 * var(--scale)), calc(34px * var(--max))) 0 clamp(0px, calc(0 * var(--scale)), calc(0px * var(--max)));
    position: relative;
  }
  .fv::after {
    display: none;
  }
}

.fv__content {
  width: calc(434 / 1280 * 100%);
  margin-left: clamp(0px, calc(43 * var(--scale)), calc(43px * var(--max)));
}
@media (max-width: 767px) {
  .fv__content {
    width: 100%;
    margin-left: 0;
    position: relative;
  }
  .fv__content .fv__img02 {
    position: absolute;
    transform: unset;
    width: 104%;
    aspect-ratio: 714/977;
    right: 1%;
    top: 0%;
  }
}

@media (max-width: 767px) {
  .fv__body {
    width: clamp(0px, calc(195 * var(--scale)), calc(195px * var(--max)));
    margin-left: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  }
}

.fv__catch {
  font-size: clamp(0px, calc(52 * var(--scale)), calc(52px * var(--max)));
  font-weight: 700;
  line-height: 1.2;
}
.fv__catch strong.md {
  font-size: clamp(0px, calc(62 * var(--scale)), calc(62px * var(--max)));
}
.fv__catch strong.lg {
  font-size: clamp(0px, calc(70 * var(--scale)), calc(70px * var(--max)));
  letter-spacing: 0.05em;
}
.fv__catch img {
  width: clamp(0px, calc(425 * var(--scale)), calc(425px * var(--max)));
}
@media (max-width: 767px) {
  .fv__catch {
    font-size: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
  }
  .fv__catch strong.md {
    font-size: clamp(0px, calc(28 * var(--scale)), calc(28px * var(--max)));
  }
  .fv__catch strong.lg {
    font-size: clamp(0px, calc(31 * var(--scale)), calc(31px * var(--max)));
  }
}

.fv__text {
  margin-top: 1.5em;
  font-size: clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max)));
  font-weight: 500;
  line-height: 1.6;
  color: #63736d;
}
@media (max-width: 767px) {
  .fv__text {
    margin-top: 0.8em;
    font-size: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
  }
}

.fv__cta {
  width: calc(365 / 434 * 100%);
  margin-top: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
}
@media (max-width: 767px) {
  .fv__cta {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    background: #fdf7ef;
    -webkit-clip-path: polygon(0 0, 100% 16%, 100% 90%, 0% 100%);
            clip-path: polygon(0 0, 100% 16%, 100% 90%, 0% 100%);
    padding: clamp(0px, calc(37 * var(--scale)), calc(37px * var(--max))) 0 clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
    margin-top: 57%;
    position: relative;
    z-index: 200;
  }
}

.fv__cta-lead {
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 600;
  line-height: 1.6;
  color: #63736d;
  text-align: center;
}
@media (max-width: 767px) {
  .fv__cta-lead {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  }
}

.fv__cta-btn {
  margin-top: 0.8em;
  display: flex;
  align-items: center;
  gap: 0 0.58em;
  background: #fe6c41;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  padding: 0.7em 1.2em;
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 800;
  line-height: 1.4;
  color: #fff;
}
.fv__cta-btn::after {
  display: inline-block;
  content: "";
  position: relative;
  background: url(../img/icon-arrow.png) no-repeat center center/contain;
  width: 1.25em;
  aspect-ratio: 60/60;
}
@media (max-width: 767px) {
  .fv__cta-btn {
    width: clamp(0px, calc(322 * var(--scale)), calc(322px * var(--max)));
    margin: 0 auto;
    margin-top: 0.5em;
    font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  }
}

.fv__note {
  font-size: clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max)));
  font-weight: 500;
  line-height: 1.6;
  color: #63736d;
  margin-top: 1.6em;
}
@media (max-width: 767px) {
  .fv__note {
    display: none;
  }
}

/*------------------------------
achievements
------------------------------*/
.achievements {
  padding: clamp(0px, calc(92 * var(--scale)), calc(92px * var(--max))) 0 clamp(0px, calc(77 * var(--scale)), calc(77px * var(--max)));
  position: relative;
}
.achievements::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(273.93deg, #00733b 9.98%, #00b656 94.5%);
  -webkit-clip-path: polygon(0 clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max))), 100% 0, 100% 100%, 0 calc(100% - clamp(0px, calc(27 * var(--scale)), calc(27px * var(--max)))));
          clip-path: polygon(0 clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max))), 100% 0, 100% 100%, 0 calc(100% - clamp(0px, calc(27 * var(--scale)), calc(27px * var(--max)))));
  width: 100%;
  aspect-ratio: 1460/277;
  max-height: 273px;
  z-index: 2;
}
.achievements::after {
  content: "";
  position: absolute;
  top: 5%;
  left: 0;
  background: #009245;
  -webkit-clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 87%);
          clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 87%);
  -webkit-clip-path: polygon(0 clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max))), 100% 0, 100% 100%, 0 calc(100% - clamp(0px, calc(36 * var(--scale)), calc(36px * var(--max)))));
          clip-path: polygon(0 clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max))), 100% 0, 100% 100%, 0 calc(100% - clamp(0px, calc(36 * var(--scale)), calc(36px * var(--max)))));
  width: 100%;
  aspect-ratio: 1440/277;
  max-height: 273px;
}
@media (min-width: 768px) {
  .achievements {
    margin-top: calc(clamp(0px, calc(115 * var(--scale)), calc(115px * var(--max))) * -1);
  }
}
@media (max-width: 767px) {
  .achievements {
    margin-top: calc(clamp(0px, calc(17 * var(--scale)), calc(17px * var(--max))) * -1);
    background: linear-gradient(273.93deg, #00733b 9.98%, #00b656 94.5%);
    -webkit-clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 96%);
            clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 96%);
    padding: clamp(0px, calc(79 * var(--scale)), calc(79px * var(--max))) 0 clamp(0px, calc(57 * var(--scale)), calc(57px * var(--max)));
  }
  .achievements::before {
    display: none;
  }
  .achievements::after {
    display: none;
  }
}

.achievements__list {
  display: flex;
  position: relative;
  z-index: 3;
  margin-left: clamp(0px, calc(54 * var(--scale)), calc(54px * var(--max)));
}
@media (max-width: 767px) {
  .achievements__list {
    margin-left: clamp(0px, calc(17 * var(--scale)), calc(17px * var(--max)));
    flex-direction: column;
    gap: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max))) 0;
  }
}

.achievements__item {
  display: flex;
  flex-direction: column;
  width: 33.3%;
  padding: 0 clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
}
.achievements__item:nth-child(n+2) {
  position: relative;
}
.achievements__item:nth-child(n+2)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(50%, -50%);
  background: #fff;
  width: 1px;
  aspect-ratio: 1/97;
}
@media (min-width: 768px) {
  .achievements__item:nth-child(1) {
    width: 31.6%;
    padding-right: 3%;
  }
  .achievements__item:nth-child(1) .achievements__body {
    margin-left: 7%;
  }
  .achievements__item:nth-child(2) {
    padding-left: 3.6%;
  }
  .achievements__item:nth-child(2) .achievements__body {
    margin-left: 5%;
  }
  .achievements__item:nth-child(2) .achievements__note {
    margin-right: 2.1em;
  }
  .achievements__item:nth-child(3) {
    padding-left: 4%;
    padding-right: 0;
  }
  .achievements__item:nth-child(3) .achievements__body {
    margin-left: 8%;
  }
  .achievements__item:nth-child(3) .achievements__body {
    gap: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  }
}
@media (max-width: 767px) {
  .achievements__item {
    width: 100%;
    padding: 0;
  }
  .achievements__item:nth-child(n+2)::before {
    display: none;
  }
}

.achievements__content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0 clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
}
@media (min-width: 768px) {
  .achievements__content {
    gap: 0;
  }
}

.achievements__icon {
  width: auto;
  height: clamp(0px, calc(56 * var(--scale)), calc(56px * var(--max)));
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 767px) {
  .achievements__icon {
    width: clamp(0px, calc(70 * var(--scale)), calc(70px * var(--max)));
    height: auto;
  }
}

.achievements__body {
  display: flex;
  align-items: center;
  gap: 0 clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  text-align: center;
}
@media (max-width: 767px) {
  .achievements__body {
    gap: 0 clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  }
}

.achievements__label {
  font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}
@media (max-width: 767px) {
  .achievements__label {
    font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  }
}

.achievements__value {
  display: flex;
  align-items: center;
  gap: 0 0.9em;
  font-size: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max)));
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  position: relative;
}
.achievements__value::before {
  content: "";
  position: absolute;
  background: var(--icon) no-repeat center center/contain;
}
.achievements__value--rank {
  --icon: url(../img/achievements-mark_1.png);
}
.achievements__value--rank::before {
  top: -0.2em;
  right: -0.2em;
  transform: translateY(-50%);
  width: 2.7em;
  aspect-ratio: 116/113;
}
.achievements__value--members {
  --icon: url(../img/achievements-mark_2.png);
}
.achievements__value--members::before {
  top: 0em;
  left: -0.3em;
  transform: translateY(-70%);
  width: 3.5em;
  aspect-ratio: 151/90;
}
.achievements__value--videos {
  --icon: url(../img/achievements-mark_3.png);
}
.achievements__value--videos::before {
  top: -0.8em;
  right: -0.4em;
  transform: translateY(-50%);
  width: 2.4em;
  aspect-ratio: 100/104;
}
.achievements__value strong {
  color: #ffff00;
  line-height: 1;
  font-weight: 700;
  font-family: "Outfit", sans-serif;
}
.achievements__value strong.md {
  font-size: clamp(0px, calc(57 * var(--scale)), calc(57px * var(--max)));
}
.achievements__value strong.lg {
  font-size: clamp(0px, calc(90 * var(--scale)), calc(90px * var(--max)));
}
@media (max-width: 767px) {
  .achievements__value {
    font-size: clamp(0px, calc(17 * var(--scale)), calc(17px * var(--max)));
  }
  .achievements__value strong.md {
    font-size: clamp(0px, calc(48 * var(--scale)), calc(48px * var(--max)));
  }
  .achievements__value strong.lg {
    font-size: clamp(0px, calc(72 * var(--scale)), calc(72px * var(--max)));
  }
  .achievements__value--videos {
    margin-left: -6%;
    gap: 0 clamp(0px, calc(5 * var(--scale)), calc(5px * var(--max)));
  }
  .achievements__value--videos::before {
    top: -0.1em;
    right: -0.7em;
  }
}

.achievements__note {
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
  text-align: right;
}
@media (max-width: 767px) {
  .achievements__note {
    text-align: left;
    font-size: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
    margin-left: 9em;
  }
}

/*------------------------------
support
------------------------------*/
.support {
  padding: clamp(0px, calc(73 * var(--scale)), calc(73px * var(--max))) 0 clamp(0px, calc(474 * var(--scale)), calc(474px * var(--max)));
  position: relative;
}
.support::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(35.91deg, #00733b 26.36%, #00b656 90.46%);
  -webkit-clip-path: polygon(0 0, 100% clamp(0px, calc(182 * var(--scale)), calc(182px * var(--max))), 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% clamp(0px, calc(182 * var(--scale)), calc(182px * var(--max))), 100% 100%, 0 100%);
  width: 100%;
  aspect-ratio: 1480/1660;
  max-height: 1602px;
}
@media (max-width: 767px) {
  .support {
    padding: clamp(0px, calc(64 * var(--scale)), calc(64px * var(--max))) 0 clamp(0px, calc(66 * var(--scale)), calc(66px * var(--max)));
  }
  .support::before {
    top: clamp(0px, calc(353 * var(--scale)), calc(353px * var(--max)));
    bottom: unset;
    aspect-ratio: unset;
    max-height: unset;
    height: 100%;
    -webkit-clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 100%);
  }
}

@media (max-width: 767px) {
  .support__header {
    text-align: center;
  }
}

.support__wrapper {
  margin-top: clamp(0px, calc(73 * var(--scale)), calc(73px * var(--max)));
}
@media (max-width: 767px) {
  .support__wrapper {
    position: relative;
    margin-top: clamp(0px, calc(29 * var(--scale)), calc(29px * var(--max)));
  }
}

@media (min-width: 768px) {
  .support__list {
    transform: translateX(-1.5%);
    position: relative;
  }
  .support__list::before {
    content: "";
    position: absolute;
    background: url(../img/dec01.svg) no-repeat center center/100%;
    aspect-ratio: 81/86;
    transform: translate(15%, -34%);
    width: 6%;
    right: 0%;
    top: 0%;
  }
}
@media (max-width: 767px) {
  .support__list {
    display: flex;
    flex-direction: column;
    gap: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) 0;
  }
}

.support__item {
  width: clamp(0px, calc(1175 * var(--scale)), calc(1175px * var(--max)));
  padding: clamp(0px, calc(82 * var(--scale)), calc(82px * var(--max))) clamp(0px, calc(89 * var(--scale)), calc(89px * var(--max))) clamp(0px, calc(66 * var(--scale)), calc(66px * var(--max)));
}
@media (min-width: 768px) {
  .support__item {
    position: relative;
  }
  .support__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    transform: skew(-8deg, -1deg);
    border-radius: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
    width: 99%;
    aspect-ratio: 1209/284;
  }
  .support__item:nth-child(2) {
    transform: translateX(7%);
  }
  .support__item:nth-child(3) {
    transform: translateX(14.5%);
  }
}
@media (max-width: 767px) {
  .support__item {
    width: 100%;
    padding: 0;
    background: #fff;
  }
}

.support__content {
  display: flex;
  align-items: center;
  gap: 0 clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max)));
}
@media (max-width: 767px) {
  .support__content {
    padding: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) clamp(0px, calc(13 * var(--scale)), calc(13px * var(--max)));
    align-items: flex-start;
    gap: 0 clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  }
}

.support__number {
  position: relative;
  font-size: clamp(0px, calc(64 * var(--scale)), calc(64px * var(--max)));
  font-weight: 800;
  font-family: "Outfit", sans-serif;
  color: #fe6c41;
}
@media (max-width: 767px) {
  .support__number {
    font-size: clamp(0px, calc(42 * var(--scale)), calc(42px * var(--max)));
  }
}

.support__body {
  flex: 1;
  position: relative;
}
.support__body::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) * -1);
  transform: translate(-50%, -50%);
  background: #23b86a;
  width: clamp(0px, calc(42 * var(--scale)), calc(42px * var(--max)));
  height: clamp(0px, calc(3 * var(--scale)), calc(3px * var(--max)));
}
@media (max-width: 767px) {
  .support__body::before {
    display: none;
  }
}

.support__heading {
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 800;
  line-height: 1.4;
}
@media (max-width: 767px) {
  .support__heading {
    font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  }
}

.support__text {
  margin-top: 0.5em;
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  color: #63736d;
}
@media (max-width: 767px) {
  .support__text {
    margin-top: 1em;
  }
}

@media (min-width: 768px) {
  .support__image {
    position: absolute;
    top: -3.5%;
    right: -0.8%;
    width: clamp(0px, calc(580 * var(--scale)), calc(580px * var(--max)));
    aspect-ratio: 590/284;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0 clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max))) clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max))) 0;
  }
}

.specialties {
  display: flex;
  align-items: center;
  gap: 0 clamp(0px, calc(29 * var(--scale)), calc(29px * var(--max)));
  position: relative;
  margin-top: clamp(0px, calc(91 * var(--scale)), calc(91px * var(--max)));
  margin-left: clamp(0px, calc(37 * var(--scale)), calc(37px * var(--max)));
}
@media (max-width: 767px) {
  .specialties {
    flex-direction: column;
    gap: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) 0;
    margin-left: 0;
    margin-top: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
  }
}

.specialties__heading {
  font-size: clamp(0px, calc(38 * var(--scale)), calc(38px * var(--max)));
  font-weight: 800;
  line-height: 1.2;
  color: #087348;
  background: #f9ff4e;
  padding: 0.4em 0.66em;
  text-align: center;
}
@media (max-width: 767px) {
  .specialties__heading {
    width: 100%;
    font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
    text-align: center;
    padding: 0.6em 0.66em;
  }
}

.specialties__content {
  color: #fff;
}

.specialties__text {
  margin-left: 0.7em;
  font-size: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max)));
  font-weight: 800;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .specialties__text {
    font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
    text-align: center;
    margin-left: 0;
  }
}

.specialties__list {
  display: flex;
  gap: 0 clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max)));
  margin-top: clamp(0px, calc(8 * var(--scale)), calc(8px * var(--max)));
  position: relative;
}
.specialties__list::after {
  content: "etc.";
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateX(196%);
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
}
@media (max-width: 767px) {
  .specialties__list {
    width: 94%;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: clamp(0px, calc(25 * var(--scale)), calc(25px * var(--max))) clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  }
  .specialties__list::after {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    text-align: center;
  }
}

@media (max-width: 767px) {
  .specialties__item {
    width: calc(33.3% - clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max))) * 2 / 3);
  }
}

.specialties__icon {
  width: clamp(0px, calc(100 * var(--scale)), calc(100px * var(--max)));
  -o-object-fit: contain;
     object-fit: contain;
}

.specialties__name {
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  margin-top: 0.4em;
}
@media (max-width: 767px) {
  .specialties__name {
    font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
    margin-top: 0.6em;
  }
}

/*------------------------------
cta
------------------------------*/
.cta {
  position: relative;
  padding: clamp(0px, calc(126 * var(--scale)), calc(126px * var(--max))) 0 clamp(0px, calc(140 * var(--scale)), calc(140px * var(--max)));
  margin-top: calc(clamp(0px, calc(365 * var(--scale)), calc(365px * var(--max))) * -1);
}
.cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #009245;
  -webkit-clip-path: polygon(0 0, 100% clamp(0px, calc(64 * var(--scale)), calc(64px * var(--max))), 100% calc(100% - clamp(0px, calc(64 * var(--scale)), calc(64px * var(--max)))), 0 100%);
          clip-path: polygon(0 0, 100% clamp(0px, calc(64 * var(--scale)), calc(64px * var(--max))), 100% calc(100% - clamp(0px, calc(64 * var(--scale)), calc(64px * var(--max)))), 0 100%);
  width: 100%;
  aspect-ratio: 1480/441;
}
.cta::after {
  content: "";
  position: absolute;
  bottom: -13%;
  left: 50%;
  transform: translateX(-79%);
  background: url(../img/cta-img.png) no-repeat center center/contain;
  width: clamp(0px, calc(915 * var(--scale)), calc(915px * var(--max)));
  aspect-ratio: 1804/1006;
}
@media (max-width: 767px) {
  .cta {
    margin-top: 0;
    padding: clamp(0px, calc(52 * var(--scale)), calc(52px * var(--max))) 0 clamp(0px, calc(247 * var(--scale)), calc(247px * var(--max)));
  }
  .cta::before {
    -webkit-clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
            clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
    height: 100%;
  }
  .cta::after {
    width: clamp(0px, calc(507 * var(--scale)), calc(507px * var(--max)));
    bottom: -10%;
    transform: translateX(-47%);
  }
}

.cta__body {
  width: calc(300 / 1280 * 100%);
  margin-left: auto;
  position: relative;
  z-index: 3;
  color: #fff;
  margin-right: clamp(0px, calc(204 * var(--scale)), calc(204px * var(--max)));
}
@media (max-width: 767px) {
  .cta__body {
    width: 100%;
    margin-left: clamp(0px, calc(7 * var(--scale)), calc(7px * var(--max)));
    margin-right: 0;
  }
}

.cta__heading {
  font-size: clamp(0px, calc(34 * var(--scale)), calc(34px * var(--max)));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
@media (max-width: 767px) {
  .cta__heading {
    font-size: clamp(0px, calc(26 * var(--scale)), calc(26px * var(--max)));
  }
}

.cta__lead {
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  margin-top: 0.28em;
}
@media (max-width: 767px) {
  .cta__lead {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  }
}

.cta__button {
  margin-top: 1.45em;
  display: flex;
  align-items: center;
  gap: 0 0.58em;
  background: #fff;
  border-radius: 999px;
  color: #183029;
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 700;
  padding: 0.58em;
  position: relative;
}
.cta__button::before {
  display: inline-block;
  content: "";
  position: relative;
  background: url(../img/icon-play_circle.png) no-repeat center center/contain;
  width: 2em;
  aspect-ratio: 1/1;
}
.cta__button::after {
  content: "";
  position: absolute;
  background: url(../img/dec02.svg) no-repeat center center/100%;
  aspect-ratio: 70/84;
  transform: translate(81%, -48%);
  width: 2.6em;
  right: 0%;
  top: 0%;
}
@media (max-width: 767px) {
  .cta__button {
    width: clamp(0px, calc(247 * var(--scale)), calc(247px * var(--max)));
    margin: 0 auto;
    margin-top: clamp(0px, calc(27 * var(--scale)), calc(27px * var(--max)));
    font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  }
  .cta__button::after {
    display: none;
  }
}

/*------------------------------
survey
------------------------------*/
.survey {
  position: relative;
  padding: clamp(0px, calc(115 * var(--scale)), calc(115px * var(--max))) 0 clamp(0px, calc(170 * var(--scale)), calc(170px * var(--max)));
  margin-top: calc(clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max))) * -1);
}
.survey::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffb8;
  -webkit-clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 90%);
          clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 90%);
  width: 100%;
  height: 100%;
}
.survey::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(61%);
  background: url(../img/survey-img.png) no-repeat center center/contain;
  width: clamp(0px, calc(449 * var(--scale)), calc(449px * var(--max)));
  aspect-ratio: 876/1172;
}
@media (max-width: 767px) {
  .survey {
    padding: clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max))) 0 clamp(0px, calc(130 * var(--scale)), calc(130px * var(--max)));
    margin-top: calc(clamp(0px, calc(27 * var(--scale)), calc(27px * var(--max))) * -1);
  }
  .survey::after {
    left: unset;
    bottom: calc(clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max))) * -1);
    right: calc(clamp(0px, calc(8 * var(--scale)), calc(8px * var(--max))) * -1);
    transform: unset;
    width: clamp(0px, calc(230 * var(--scale)), calc(230px * var(--max)));
  }
  .survey::before {
    aspect-ratio: 435/699;
    -webkit-clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 97%);
            clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 97%);
    min-height: 699px;
  }
}

.survey__content {
  display: flex;
  gap: 0 clamp(0px, calc(27 * var(--scale)), calc(27px * var(--max)));
  position: relative;
  margin-left: clamp(0px, calc(92 * var(--scale)), calc(92px * var(--max)));
}
.survey__content::before {
  content: "";
  position: absolute;
  background: url(../img/dec03.svg) no-repeat center center/100%;
  aspect-ratio: 107/111;
  transform: translate(-50%, -50%);
  width: 9%;
  left: 80%;
  top: 0%;
}
@media (max-width: 767px) {
  .survey__content {
    margin-left: 0;
    flex-direction: column-reverse;
    gap: clamp(0px, calc(34 * var(--scale)), calc(34px * var(--max))) 0;
  }
}

.survey__chart {
  width: clamp(0px, calc(304 * var(--scale)), calc(304px * var(--max)));
}
@media (max-width: 767px) {
  .survey__chart {
    width: clamp(0px, calc(194 * var(--scale)), calc(194px * var(--max)));
    transform: translateX(4%);
  }
}

.survey__body {
  text-align: center;
}
@media (min-width: 768px) {
  .survey__body strong {
    padding-left: 0.5em;
    text-indent: 0;
    text-align: left;
    display: block;
  }
}
@media (max-width: 767px) {
  .survey__body strong {
    padding-left: 1.9em;
    text-indent: 0;
    text-align: left;
    display: block;
  }
}

.survey__text {
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  margin-top: 1em;
}
@media (max-width: 767px) {
  .survey__text {
    font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  }
}

.survey__note {
  font-size: clamp(0px, calc(13 * var(--scale)), calc(13px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  margin-top: 1.54em;
}
@media (max-width: 767px) {
  .survey__note {
    font-size: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  }
}

/*------------------------------
reason
------------------------------*/
.reason {
  position: relative;
  padding: clamp(0px, calc(160 * var(--scale)), calc(160px * var(--max))) 0 clamp(0px, calc(120 * var(--scale)), calc(120px * var(--max)));
  margin-top: calc(clamp(0px, calc(109 * var(--scale)), calc(109px * var(--max))) * -1);
}
.reason::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #fdf7ef;
  -webkit-clip-path: polygon(0 0, 100% 13%, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 13%, 100% 100%, 0 100%);
  width: 100%;
  aspect-ratio: 1493/554;
  max-height: 554px;
}
@media (max-width: 767px) {
  .reason {
    margin-top: 0;
    padding: clamp(0px, calc(61 * var(--scale)), calc(61px * var(--max))) 0 clamp(0px, calc(72 * var(--scale)), calc(72px * var(--max)));
  }
  .reason::before {
    aspect-ratio: 435/699;
    -webkit-clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 100%);
  }
}

.reason__list {
  margin-top: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
  display: flex;
  gap: 0 clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
  position: relative;
}
@media (max-width: 767px) {
  .reason__list {
    flex-direction: column;
    gap: clamp(0px, calc(13 * var(--scale)), calc(13px * var(--max))) 0;
    margin-top: 12%;
  }
}

.reason__item {
  border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  background: #fff;
  border: 1px solid #dbe9e2;
  box-shadow: 5px 20px 30px rgba(219, 184, 137, 0.2);
}

.reason__image {
  border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) 0 0;
}
@media (max-width: 767px) {
  .reason__image {
    aspect-ratio: 333/230;
  }
}

.reason__body {
  padding: clamp(0px, calc(28 * var(--scale)), calc(28px * var(--max)));
}
@media (max-width: 767px) {
  .reason__body {
    padding: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  }
}

.reason__header {
  display: flex;
  align-items: center;
  gap: 0 clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
}
@media (max-width: 767px) {
  .reason__header {
    gap: 0 clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  }
}

.reason__number {
  font-size: clamp(0px, calc(44 * var(--scale)), calc(44px * var(--max)));
  font-weight: 800;
  line-height: 1.6;
  color: #fe6c41;
  font-family: "Outfit", sans-serif;
}

.reason__heading {
  font-size: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max)));
  font-weight: 800;
  line-height: 1.4;
  position: relative;
}
.reason__heading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1em;
  transform: translate(-50%, -50%);
  background: #23b86a;
  width: 1em;
  height: 1px;
}
@media (max-width: 767px) {
  .reason__heading {
    margin-top: -0.5em;
  }
  .reason__heading::before {
    display: none;
  }
}

.reason__description {
  margin-top: 1em;
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  color: #63736d;
}
@media (max-width: 767px) {
  .reason__description {
    margin-left: 4.3em;
    margin-top: 0;
  }
}

/*------------------------------
renewal
------------------------------*/
.renewal {
  position: relative;
}
.renewal::before, .renewal::after {
  content: "";
  position: absolute;
  -webkit-mask: url(../img/dec05.svg) center/clamp(0px, calc(28 * var(--scale)), calc(28px * var(--max))) auto repeat-x;
          mask: url(../img/dec05.svg) center/clamp(0px, calc(28 * var(--scale)), calc(28px * var(--max))) auto repeat-x;
  max-height: 38px;
  aspect-ratio: 1440/38;
  width: 100%;
}
.renewal::before {
  top: 1.6vw; /*  */
  left: 50%;
  z-index: 2;
  background: #FDF7EF;
  transform: translate(-50%, 0%) rotate(-1.85deg);
}
.renewal::after {
  bottom: 1.6vw; /*  */
  left: 50%;
  background: url(../img/img-hole_bottom.png) repeat-x center center/100%;
  width: 100%;
  background: #009245;
  transform: translate(-50%, 70%) rotate(1.85deg);
}
@media (max-width: 767px) {
  .renewal::before, .renewal::after {
    max-height: unset;
    aspect-ratio: 375/30;
    -webkit-mask-size: clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max))) auto;
            mask-size: clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max))) auto;
  }
  .renewal::before {
    transform: translate(-50%, -30%) rotate(-1.85deg);
  }
  .renewal::after {
    transform: translate(-50%, 70%) rotate(1.85deg);
  }
}

.renewal__container {
  background: linear-gradient(280.88deg, #00733b 1.27%, #00b656 99.93%);
  -webkit-clip-path: polygon(0 clamp(0px, calc(47 * var(--scale)), calc(47px * var(--max))), 100% 0, 100% 100%, 0 97%);
          clip-path: polygon(0 clamp(0px, calc(47 * var(--scale)), calc(47px * var(--max))), 100% 0, 100% 100%, 0 97%);
  padding: clamp(0px, calc(150 * var(--scale)), calc(150px * var(--max))) 0;
  -webkit-clip-path: polygon(0 3.2638888889vw, 100% 0, 100% 100%, 0 97%);
          clip-path: polygon(0 3.2638888889vw, 100% 0, 100% 100%, 0 97%);
  -webkit-clip-path: polygon(0 3.2638888889vw, 100% 0, 100% 100%, 0 calc(100% - 3.2638888889vw));
          clip-path: polygon(0 3.2638888889vw, 100% 0, 100% 100%, 0 calc(100% - 3.2638888889vw));
  padding: 10.4166666667vw 0;
}
@media (max-width: 767px) {
  .renewal__container {
    padding-top: 19%;
    padding-bottom: 19%;
  }
}

.renewal__header {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}
.renewal__header::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(100%, -50%);
  background: url(../img/renewal-title-img.png) no-repeat center center/contain;
  width: clamp(0px, calc(123 * var(--scale)), calc(123px * var(--max)));
  aspect-ratio: 248/223;
}
@media (max-width: 767px) {
  .renewal__header {
    margin: 0 auto;
    text-align: center;
  }
  .renewal__header::after {
    display: none;
  }
}

.comparison {
  margin-top: calc(clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) * -1);
  margin-left: clamp(0px, calc(26 * var(--scale)), calc(26px * var(--max)));
  display: flex;
  gap: 0 clamp(0px, calc(197 * var(--scale)), calc(197px * var(--max)));
}
@media (max-width: 767px) {
  .comparison {
    flex-direction: column;
    gap: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) 0;
    margin-left: 0;
    margin-top: 5%;
  }
}

.comparison__item {
  display: flex;
  align-items: center;
  gap: 0 clamp(0px, calc(53 * var(--scale)), calc(53px * var(--max)));
}
.comparison__item--after {
  position: relative;
}
.comparison__item--after::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(clamp(0px, calc(27 * var(--scale)), calc(27px * var(--max))) * -1);
  transform: translate(-100%, -110%);
  background: url(../img/comparison-arrow.png) no-repeat center center/contain;
  width: clamp(0px, calc(131 * var(--scale)), calc(131px * var(--max)));
  aspect-ratio: 262/84;
}
.comparison__item--after .comparison__body {
  margin-top: clamp(0px, calc(37 * var(--scale)), calc(37px * var(--max)));
}
.comparison__item--after .comparison__image {
  width: clamp(0px, calc(302 * var(--scale)), calc(302px * var(--max)));
  transform: translate(calc(clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max))) * -1), calc(clamp(0px, calc(64 * var(--scale)), calc(64px * var(--max))) * -1)) scale(1.1);
}
.comparison__item--after .comparison__label strong {
  font-size: clamp(0px, calc(44 * var(--scale)), calc(44px * var(--max)));
}
.comparison__item--after .comparison__label strong::after {
  width: 120%;
}
@media (max-width: 767px) {
  .comparison__item--before {
    padding-left: 3%;
    gap: clamp(0px, calc(27 * var(--scale)), calc(27px * var(--max)));
  }
  .comparison__item--before .comparison__image {
    width: clamp(0px, calc(120 * var(--scale)), calc(120px * var(--max)));
    aspect-ratio: 120/165;
    -o-object-position: top center;
       object-position: top center;
    -o-object-fit: cover;
       object-fit: cover;
    transform: translateY(10%);
  }
  .comparison__item--after {
    flex-direction: column;
    align-items: unset;
    padding: 0 3%;
  }
  .comparison__item--after .comparison__body {
    margin-top: 0;
    position: relative;
  }
  .comparison__item--after .comparison__body::before {
    content: "";
    position: absolute;
    background: url(../img/comparison-arrow.png) no-repeat center center/100%;
    aspect-ratio: 262/84;
    transform: translate(-50%, 60%) rotate(118deg);
    width: 33%;
    left: 86%;
    top: 0%;
  }
  .comparison__item--after .comparison__label {
    padding-bottom: clamp(0px, calc(384 * var(--scale)), calc(384px * var(--max)));
  }
  .comparison__item--after .comparison__label strong {
    font-size: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max)));
  }
  .comparison__item--after .comparison__image {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 16%);
    width: clamp(0px, calc(315 * var(--scale)), calc(315px * var(--max)));
  }
}

.comparison__body {
  white-space: nowrap;
}

.comparison__label {
  display: flex;
  align-items: center;
  gap: 0 0.8em;
  font-size: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
  font-weight: 800;
  line-height: 1.6;
  color: #ffff00;
}
.comparison__label strong {
  font-size: clamp(0px, calc(34 * var(--scale)), calc(34px * var(--max)));
  font-family: "Outfit", sans-serif;
  position: relative;
}
.comparison__label strong::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background: url(../img/img-underline.png) no-repeat center center/contain;
  width: 100%;
  aspect-ratio: 363/25;
}
@media (max-width: 767px) {
  .comparison__label {
    font-size: clamp(0px, calc(9 * var(--scale)), calc(9px * var(--max)));
  }
}

.comparison__text {
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  margin-top: 0.3em;
}
@media (max-width: 767px) {
  .comparison__text {
    font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  }
}

.comparison__image {
  width: clamp(0px, calc(183 * var(--scale)), calc(183px * var(--max)));
}
@media (max-width: 767px) {
  .comparison__image {
    width: clamp(0px, calc(123 * var(--scale)), calc(123px * var(--max)));
  }
}

.renewal__content {
  margin-top: -1%;
}
@media (max-width: 767px) {
  .renewal__content {
    margin-top: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
  }
}

.renewal__list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
}
@media (max-width: 767px) {
  .renewal__list {
    flex-direction: column;
    gap: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max))) 0;
  }
}

.renewal__item {
  width: calc(33.3% - clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max))) * 2 / 3);
  border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  background: #fff;
  padding: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max)));
  position: relative;
  display: flex;
  align-items: center;
  gap: 0 clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
}
@media (max-width: 767px) {
  .renewal__item {
    width: 100%;
    padding: 6% 9%;
  }
}

.renewal__label {
  position: absolute;
  top: clamp(0px, calc(11 * var(--scale)), calc(11px * var(--max)));
  right: 4%;
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 800;
  line-height: 1.4;
  color: #fff;
  background: #fe6c41;
  border-radius: 999px;
  padding: 0.2em 0.5em;
}
@media (max-width: 767px) {
  .renewal__label {
    right: unset;
    left: 4%;
  }
}

.renewal__icon {
  width: clamp(0px, calc(68 * var(--scale)), calc(68px * var(--max)));
}

.renewal__heading {
  font-size: clamp(0px, calc(17 * var(--scale)), calc(17px * var(--max)));
  font-weight: 700;
  line-height: 1.6;
}
.renewal__heading .large {
  font-size: clamp(0px, calc(22 * var(--scale)), calc(22px * var(--max)));
}
.renewal__heading strong {
  display: inline-block;
  background: linear-gradient(transparent 60%, #ffff00 60%);
}

.renewal__text {
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 500;
  line-height: 1.8;
  color: #63736d;
  margin-top: 0.5em;
}
@media (max-width: 767px) {
  .renewal__text {
    margin-top: 0.7em;
  }
}

.renewal__update {
  margin-top: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  background: #ffe9cb;
  border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  padding: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max))) clamp(0px, calc(44 * var(--scale)), calc(44px * var(--max)));
  position: relative;
}
.renewal__update .renewal__label {
  top: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  right: clamp(0px, calc(22 * var(--scale)), calc(22px * var(--max)));
}
@media (max-width: 767px) {
  .renewal__update {
    padding: 14% 6% 5%;
  }
  .renewal__update .renewal__label {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    left: 6%;
  }
}

/*------------------------------
service
------------------------------*/
.service {
  padding: clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max))) 0 clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
}
@media (max-width: 767px) {
  .service {
    padding-top: 11%;
    padding-bottom: 12%;
  }
}

.service__header {
  text-align: center;
}
.service__header h2 {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.service__header h2::before {
  content: "";
  position: absolute;
  background: url(../img/dec06.svg) no-repeat center center/100%;
  aspect-ratio: 45/48;
  width: 3.1em;
  left: -5.4em;
  top: 1.9em;
}
.service__header h2::after {
  content: "";
  position: absolute;
  background: url(../img/dec07.svg) no-repeat center center/100%;
  aspect-ratio: 57/64;
  width: 3.4em;
  right: -5.2em;
  top: 1.5em;
}
@media (max-width: 767px) {
  .service__header h2::before, .service__header h2::after {
    display: none;
  }
  .service__header > p {
    font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  }
}

.service__content {
  margin-top: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 clamp(0px, calc(78 * var(--scale)), calc(78px * var(--max)));
}
@media (max-width: 767px) {
  .service__content {
    flex-direction: column;
    gap: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max))) 0;
    margin-top: 17%;
  }
}

.service__list {
  display: flex;
  flex-direction: column;
  gap: clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max))) 0;
  transform: translateY(calc(clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max))) * -1));
}
@media (max-width: 767px) {
  .service__list {
    gap: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) 0;
  }
}

.service__item {
  display: flex;
  align-items: center;
  gap: 0 clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
}
@media (max-width: 767px) {
  .service__item {
    width: 100%;
  }
}

.service__icon {
  width: clamp(0px, calc(90 * var(--scale)), calc(90px * var(--max)));
}
@media (max-width: 767px) {
  .service__icon {
    width: clamp(0px, calc(92 * var(--scale)), calc(92px * var(--max)));
  }
}

.service__name {
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 700;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .service__name {
    font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  }
}

.service__text {
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  color: #63736d;
}

.service__image {
  width: clamp(0px, calc(278 * var(--scale)), calc(278px * var(--max)));
  transform: translateX(calc(clamp(0px, calc(26 * var(--scale)), calc(26px * var(--max))) * -1));
}
@media (max-width: 767px) {
  .service__image {
    display: none;
  }
}

/*------------------------------
category
------------------------------*/
.category {
  padding: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max))) 0 clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
}
@media (max-width: 767px) {
  .category {
    background: linear-gradient(298.6deg, #00733b 3.4%, #00b656 96.62%);
    padding: clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max))) 0 clamp(0px, calc(0 * var(--scale)), calc(0px * var(--max)));
  }
}

@media (max-width: 767px) {
  .category__inner {
    width: 100%;
  }
}

.category__content {
  background: linear-gradient(298.6deg, #00733b 3.4%, #00b656 96.62%);
  box-shadow: 5px 20px 30px rgba(219, 184, 137, 0.2);
  border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) 0 0;
  padding: clamp(0px, calc(97 * var(--scale)), calc(97px * var(--max))) clamp(0px, calc(210 * var(--scale)), calc(210px * var(--max))) clamp(0px, calc(73 * var(--scale)), calc(73px * var(--max)));
  text-align: center;
}
.category__content h2 {
  position: relative;
}
.category__content h2::before {
  content: "";
  position: absolute;
  background: url(../img/dec08.svg) no-repeat center center/100%;
  aspect-ratio: 100/117;
  transform: translate(264%, -20%);
  width: 13%;
  left: 50%;
  top: 50%;
}
@media (max-width: 767px) {
  .category__content {
    background: unset;
    padding: 0;
  }
  .category__content h2 span:nth-child(n+2) {
    font-size: clamp(0px, calc(26 * var(--scale)), calc(26px * var(--max)));
    letter-spacing: 0.04em;
  }
}

.category__list {
  margin-top: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
}
@media (max-width: 767px) {
  .category__list {
    gap: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
  }
}

.category__item {
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 700;
  line-height: 1.6;
  color: #009245;
  padding: 0.6em 0.8em;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0.278em;
}
.category__item--other {
  background: unset;
  color: #fff;
}
@media (max-width: 767px) {
  .category__item {
    padding: 0.5em 0.8em;
  }
  .category__item--other {
    display: none;
  }
}

.category__note {
  margin-top: clamp(0px, calc(37 * var(--scale)), calc(37px * var(--max)));
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  color: #fff;
}

.category__button {
  width: 14em;
  margin: 0 auto;
  margin-top: 1.7em;
  display: flex;
  align-items: center;
  gap: 0 0.58em;
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 700;
  line-height: 1.3333333333;
  padding: 0.6em 1em;
  border-radius: 999px;
  border: 1px solid #009245;
  background: #fff;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.category__button::before {
  display: inline-block;
  content: "";
  position: relative;
  background: url(../img/icon-list.png) no-repeat center center/contain;
  width: 2em;
  aspect-ratio: 1/1;
}
@media (max-width: 767px) {
  .category__button {
    font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
    margin-top: 2.1em;
    padding: 0.8em 0em;
    padding-left: 1.3em;
    width: 15em;
  }
  .category__button::before {
    width: 2.4em;
  }
}

.category__gallery {
  display: flex;
  border-radius: 0 0 clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  overflow: hidden;
}
.category__gallery img {
  width: 25%;
}
@media (max-width: 767px) {
  .category__gallery {
    flex-wrap: wrap;
    margin-top: 11%;
    border-radius: 0;
  }
  .category__gallery img {
    width: 50%;
    aspect-ratio: 187/150;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

/*------------------------------
lecturer
------------------------------*/
.lecturer {
  padding: clamp(0px, calc(90 * var(--scale)), calc(90px * var(--max))) 0 clamp(0px, calc(120 * var(--scale)), calc(120px * var(--max)));
  background: #fff;
}
@media (max-width: 767px) {
  .lecturer {
    padding-top: 14%;
    padding-bottom: 16%;
  }
}

@media (max-width: 767px) {
  .lecturer__header {
    text-align: center;
  }
  .lecturer__header h2 span:nth-child(n+2) {
    margin-top: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
    margin-bottom: -0.4em;
  }
}

.lecturer__cards {
  margin-top: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
}
@media (max-width: 767px) {
  .lecturer__cards {
    flex-direction: column;
    gap: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max))) 0;
  }
  .lecturer__cards:not(.act) .lecturer__card:nth-child(n+4) {
    display: none;
  }
}

.lecturer__card {
  width: calc(33.3% - clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max))) * 2 / 3);
  border: 1px solid #dbe9e2;
  border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  box-shadow: 5px 20px 30px rgba(219, 184, 137, 0.2);
}
@media (max-width: 767px) {
  .lecturer__card {
    width: 100%;
    display: flex;
  }
  .lecturer__card > picture {
    width: 36%;
  }
}

@media (max-width: 767px) {
  .lecturer__more {
    cursor: pointer;
    color: #087348;
    font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
    font-weight: 800;
    position: relative;
    border: 1px solid #087348;
    border-radius: clamp(0px, calc(999 * var(--scale)), calc(999px * var(--max)));
    width: 10.3em;
    margin: 9% auto 0;
    padding: 1.1em 0;
    padding-left: 3.7em;
  }
  .lecturer__more span {
    position: absolute;
    top: 50%;
    left: 23%;
    transform: translate(-50%, -50%);
  }
  .lecturer__more span::before, .lecturer__more span::after {
    content: "";
    position: absolute;
    background: #087348;
    aspect-ratio: 2.5/17.5;
    transform: translate(-50%, -50%);
    width: clamp(0px, calc(2.5 * var(--scale)), calc(2.5px * var(--max)));
    left: 50%;
    top: 50%;
    border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  }
  .lecturer__more span::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

.lecturer__photo {
  border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) 0 0;
}
@media (max-width: 767px) {
  .lecturer__photo {
    border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) 0 0 clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  }
}

.lecturer__body {
  padding: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  display: flex;
  gap: 0 clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
}
@media (max-width: 767px) {
  .lecturer__body {
    width: 64%;
    flex-direction: column;
    gap: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  }
}

.lecturer__tags {
  display: flex;
  flex-direction: column;
  gap: clamp(0px, calc(6 * var(--scale)), calc(6px * var(--max))) 0;
}
.lecturer__tags li {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
  font-weight: 800;
  line-height: 1.4;
  color: #087348;
  padding: 0.6em 1em;
  background: #e9f8f0;
  border-radius: 999px;
}
.lecturer__tags li.dark {
  color: #064d35;
}

.lecturer__name {
  display: flex;
  align-items: baseline;
  gap: 0 0.5em;
  font-size: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
  font-weight: 900;
  line-height: 1.6;
  color: #63736d;
}
.lecturer__name strong {
  font-size: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max)));
  font-weight: 700;
  color: #183029;
}

.lecturer__detail {
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 400;
  line-height: 1.8;
  color: #63736d;
}
@media (max-width: 767px) {
  .lecturer__detail {
    font-size: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
  }
}

.lecturer__note {
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  color: #63736d;
  text-align: center;
  margin-top: 2.8em;
}
@media (max-width: 767px) {
  .lecturer__note {
    font-size: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
    margin-top: 3.9em;
  }
}

.lecturer__button {
  width: calc(350 / 1280 * 100%);
  margin: 0 auto;
  margin-top: 1.67em;
  display: flex;
  align-items: center;
  gap: 0 0.58em;
  background: #fe6c41;
  border-radius: 999px;
  box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.17);
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 700;
  line-height: 1.3333333333;
  padding: 0.58em 1.1em;
  color: #fff;
}
.lecturer__button::before {
  display: inline-block;
  content: "";
  position: relative;
  background: url(../img/icon-person.png) no-repeat center center/contain;
  width: 2.6em;
  aspect-ratio: 1/1;
}
@media (max-width: 767px) {
  .lecturer__button {
    justify-content: center;
    width: clamp(0px, calc(314 * var(--scale)), calc(314px * var(--max)));
    font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
    padding: 0.98em 1.1em;
    margin-top: 2.1em;
  }
}

/*------------------------------
voice
------------------------------*/
.voice {
  padding: clamp(0px, calc(120 * var(--scale)), calc(120px * var(--max))) 0 clamp(0px, calc(120 * var(--scale)), calc(120px * var(--max)));
}
@media (max-width: 767px) {
  .voice {
    padding-top: 14%;
    padding-bottom: 14%;
  }
}

.voice__header {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.voice__header::before {
  content: "";
  position: absolute;
  top: -11%;
  left: -6%;
  transform: translateX(-100%);
  background: url(../img/use-header-icon.png) no-repeat center center/contain;
  width: clamp(0px, calc(120 * var(--scale)), calc(120px * var(--max)));
  aspect-ratio: 240/179;
}
@media (max-width: 767px) {
  .voice__header::before {
    display: none;
  }
}

.voice__list {
  margin-top: clamp(0px, calc(64 * var(--scale)), calc(64px * var(--max)));
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0px, calc(31 * var(--scale)), calc(31px * var(--max)));
}
@media (max-width: 767px) {
  .voice__list {
    flex-direction: column;
    gap: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max))) 0;
    margin-top: 11%;
  }
}

.voice__item {
  width: calc(30.4% - clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max))) * 2 / 3);
  display: flex;
  align-items: flex-start;
  gap: 0 clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
}
@media (max-width: 767px) {
  .voice__item {
    width: 100%;
  }
}

.voice__icon {
  width: clamp(0px, calc(112 * var(--scale)), calc(112px * var(--max)));
}
@media (max-width: 767px) {
  .voice__icon {
    width: clamp(0px, calc(63 * var(--scale)), calc(63px * var(--max)));
  }
}

@media (max-width: 767px) {
  .voice__body {
    position: relative;
  }
}

.voice__heading {
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 700;
  line-height: 1.6;
}
.voice__heading strong {
  display: inline-block;
  background: linear-gradient(transparent 70%, #ffff00 40%);
}

.voice__profile {
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  color: #63736d;
  margin-top: 0.7em;
}
@media (max-width: 767px) {
  .voice__profile {
    padding-right: 6.5em;
  }
}

.voice__feature {
  display: inline-block;
  font-size: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
  font-weight: 800;
  line-height: 1.4;
  color: #fff;
  border-radius: 999px;
  background: #009245;
  padding: 0.6em 1em;
  margin-top: 0.6em;
}
@media (max-width: 767px) {
  .voice__feature {
    position: absolute;
    bottom: 0;
    right: 0;
    bottom: 0.8em;
    right: 0.3em;
  }
}

/*------------------------------
use
------------------------------*/
.use {
  padding: clamp(0px, calc(0 * var(--scale)), calc(0px * var(--max))) 0 clamp(0px, calc(120 * var(--scale)), calc(120px * var(--max)));
  position: relative;
}
.use::before {
  content: "";
  position: absolute;
  top: 1.6vw;
  left: 50%;
  background: url(../img/img-hole_top.png) repeat-x center center/100%;
  width: 100%;
  aspect-ratio: 1440/38;
  z-index: 2;
  max-height: 38px;
  -webkit-mask: url(../img/dec05.svg) center/clamp(0px, calc(28 * var(--scale)), calc(28px * var(--max))) auto repeat-x;
          mask: url(../img/dec05.svg) center/clamp(0px, calc(28 * var(--scale)), calc(28px * var(--max))) auto repeat-x;
  background: #FDF7EF;
  max-height: 38px;
  transform: translate(-50%, 0%) rotate(-1.85deg);
  z-index: 10;
}
@media (max-width: 767px) {
  .use::before {
    max-height: unset;
    aspect-ratio: 375/30;
    -webkit-mask-size: clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max))) auto;
            mask-size: clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max))) auto;
    transform: translate(-50%, -30%) rotate(-1.85deg);
  }
}

.use__container {
  background: linear-gradient(280.88deg, #00733b 1.27%, #00b656 99.93%);
  -webkit-clip-path: polygon(0 5%, 100% 1%, 100% 100%, 0 96%);
          clip-path: polygon(0 5%, 100% 1%, 100% 100%, 0 96%);
  padding: clamp(0px, calc(123 * var(--scale)), calc(123px * var(--max))) 0 clamp(0px, calc(142 * var(--scale)), calc(142px * var(--max)));
  -webkit-clip-path: polygon(0 3.2638888889vw, 100% 0, 100% 100%, 0 calc(100% - 3.4722222222vw));
          clip-path: polygon(0 3.2638888889vw, 100% 0, 100% 100%, 0 calc(100% - 3.4722222222vw));
  padding: 8.5416666667vw 0 9.8611111111vw;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .use__container {
    padding-top: 18%;
    padding-bottom: 21%;
    overflow: hidden;
  }
}

.use__header {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  position: relative;
}
.use__header::before {
  content: "";
  position: absolute;
  background: url(../img/dec09.svg) no-repeat center center/100%;
  aspect-ratio: 125/105;
  transform: translate(278%, -40%);
  width: 20%;
  left: 50%;
  top: 50%;
}
@media (max-width: 767px) {
  .use__header::before {
    display: none;
  }
}

@media (min-width: 768px) {
  .use__cards {
    width: calc(1080 / 1280 * 100%);
    margin: 0 auto;
    margin-top: clamp(0px, calc(58 * var(--scale)), calc(58px * var(--max)));
    display: flex;
    gap: 0 clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
  }
}

.use__card {
  width: calc(50% - clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max))) / 2);
  border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  background: #fff;
  box-shadow: 0 15px 30px rgba(1, 90, 54, 0.3);
}
@media (max-width: 767px) {
  .use__card {
    width: 100%;
    height: auto;
  }
}

.use__visual {
  position: relative;
}
@media (max-width: 767px) {
  .use__visual {
    aspect-ratio: 275/224;
    overflow: hidden;
  }
}

.use__image {
  border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) 0 0;
}
@media (max-width: 767px) {
  .use__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.use__info {
  position: absolute;
  bottom: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  left: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  color: #fff;
}

.use__name {
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 700;
  line-height: 1.6;
}

.use__profile {
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
}

.use__body {
  padding: clamp(0px, calc(34 * var(--scale)), calc(34px * var(--max))) clamp(0px, calc(42 * var(--scale)), calc(42px * var(--max))) clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
}

.use__schedule {
  display: flex;
  flex-direction: column;
  gap: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max))) 0;
  padding-left: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
  position: relative;
}
@media (max-width: 767px) {
  .use__schedule {
    padding-left: 14%;
    gap: clamp(0px, calc(25 * var(--scale)), calc(25px * var(--max)));
  }
}

.use__schedule-item {
  position: relative;
}
.use__schedule-item:not(:last-child)::before {
  content: "";
  position: absolute;
  background: #D5F2E2;
  width: clamp(0px, calc(3 * var(--scale)), calc(3px * var(--max)));
  height: calc(100% + clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max))));
  left: calc(clamp(0px, calc(22.8 * var(--scale)), calc(22.8px * var(--max))) * -1);
  top: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
}

.use__time {
  font-size: clamp(0px, calc(22 * var(--scale)), calc(22px * var(--max)));
  font-weight: 800;
  color: #fe6c41;
  font-family: "Outfit", sans-serif;
  position: relative;
}
.use__time::before {
  content: "";
  position: absolute;
  background: #23B86A;
  aspect-ratio: 1/1;
  border-radius: 50%;
  transform: translate(0%, -50%);
  width: 0.3em;
  left: -1.1em;
  top: 50%;
}

.use__scene {
  display: flex;
  align-items: center;
  gap: 0 clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  margin-top: clamp(0px, calc(6 * var(--scale)), calc(6px * var(--max)));
}

.use__scene-icon {
  width: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
}

.use__scene-text {
  font-size: clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max)));
  font-weight: 700;
  line-height: 1.6;
}

.use__text {
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  color: #63736d;
  margin-top: 0.5em;
}

@media (min-width: 768px) {
  .useSwiper .swiper-wrapper {
    height: auto;
  }
  .useSwiper .swiper-slide {
    flex-shrink: unset;
  }
}
@media (max-width: 767px) {
  .useSwiper {
    margin-top: 12%;
  }
  .useSwiper .swiper-pagination[class][class] {
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    position: relative;
    top: unset;
    left: unset;
    margin-top: 12%;
    gap: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
    display: flex;
    justify-content: center;
  }
  .useSwiper .swiper-pagination[class][class].swiper-pagination-lock {
    display: none;
  }
  .useSwiper .swiper-pagination-bullet[class][class] {
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    width: unset;
    height: unset;
    margin: 0;
    opacity: 1;
    width: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
    aspect-ratio: 1/1;
    border-radius: 50%;
    opacity: 0.5;
    background: #fff;
  }
  .useSwiper .swiper-pagination-bullet[class][class].swiper-pagination-bullet-active {
    opacity: 1;
  }
}

/*------------------------------
benefit 
------------------------------*/
.benefit {
  padding: clamp(0px, calc(130 * var(--scale)), calc(130px * var(--max))) 0 clamp(0px, calc(100 * var(--scale)), calc(100px * var(--max)));
  background: #fff;
  margin-top: calc(clamp(0px, calc(169 * var(--scale)), calc(169px * var(--max))) * -1);
  position: relative;
}
.benefit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  -webkit-clip-path: polygon(0 0, 100% 13%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
  width: 100%;
  aspect-ratio: 1493/554;
  max-height: 554px;
}
@media (max-width: 767px) {
  .benefit {
    padding-bottom: 17%;
  }
}

.benefit__header {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.benefit__header::before {
  content: "";
  position: absolute;
  background: url(../img/dec10.svg) no-repeat center center/100%;
  aspect-ratio: 125/93;
  transform: translate(-286%, -40%);
  width: 36%;
  left: 50%;
  top: 50%;
}
@media (max-width: 767px) {
  .benefit__header::before {
    display: none;
  }
}

.benefit__content {
  margin-top: clamp(0px, calc(47 * var(--scale)), calc(47px * var(--max)));
  position: relative;
}
@media (max-width: 767px) {
  .benefit__content {
    margin-top: 11%;
  }
}

.benefit__cards {
  width: calc(1080 / 1280 * 100%);
  margin: 0 auto;
  display: flex;
  gap: 0 clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
}
@media (max-width: 767px) {
  .benefit__cards {
    width: 100%;
    flex-direction: column;
    gap: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
  }
}

.benefit__card {
  width: calc(50% - clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) / 2);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  border: 3px solid #019245;
  border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
}
@media (max-width: 767px) {
  .benefit__card {
    width: 100%;
  }
}

.benefit__label {
  display: block;
  font-size: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
  font-weight: 800;
  line-height: 1.6;
  color: #fff;
  text-align: center;
  font-family: "Outfit", sans-serif;
  padding: 0.25em 0;
  border-radius: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max))) clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max))) 0 0;
  background: #019245;
}

.benefit__body {
  padding: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
}
@media (max-width: 767px) {
  .benefit__body {
    padding: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) 5%;
  }
}

.benefit__name {
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.benefit__text {
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  color: #63736d;
  margin-top: 1.25em;
}

.benefit__tags {
  display: flex;
  justify-content: center;
  gap: 0 clamp(0px, calc(8 * var(--scale)), calc(8px * var(--max)));
  margin-top: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
}
.benefit__tags li {
  font-size: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
  font-weight: 800;
  line-height: 1.4;
  color: var(--text-color);
  background: var(--bg-color);
  padding: 0.8em 1em;
  border-radius: 999px;
}
.benefit__tags li.green {
  --text-color: $color-green;
  --bg-color: #e9f8f0;
}
.benefit__tags li.yellow {
  --text-color: #064d35;
  --bg-color: #f9ff4e;
}

.benefit__button {
  width: 18.3em;
  max-width: 100%;
  margin: 0 auto;
  margin-top: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
  display: flex;
  align-items: center;
  gap: 0 0.58em;
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 700;
  line-height: 1.3333333333;
  color: #fff;
  background: #fe6c41;
  box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.17);
  border-radius: 999px;
  padding: 1.2em;
}
.benefit__button::before {
  display: inline-block;
  content: "";
  position: relative;
  transform: rotate(-90deg);
  background: url(../img/icon-arrow.png) no-repeat center center/contain;
  width: 1.2em;
  aspect-ratio: 1/1;
}
@media (max-width: 767px) {
  .benefit__button {
    font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
    padding: 0.75em 1.4em;
    width: 16em;
  }
}

/*------------------------------
plan
------------------------------*/
.plan {
  padding: clamp(0px, calc(100 * var(--scale)), calc(100px * var(--max))) 0;
}
@media (max-width: 767px) {
  .plan {
    padding-bottom: clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max)));
    padding-top: 15%;
  }
}

.plan__header {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.plan__header::before {
  content: "";
  position: absolute;
  background: url(../img/dec11.svg) no-repeat center center/100%;
  aspect-ratio: 114/133;
  transform: translate(287%, -60%);
  width: 20%;
  left: 50%;
  top: 50%;
}
@media (max-width: 767px) {
  .plan__header::before {
    display: none;
  }
}

.plan__content {
  margin-top: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
}

.plan__cards {
  display: flex;
  gap: 0 clamp(0px, calc(25 * var(--scale)), calc(25px * var(--max)));
}
@media (max-width: 767px) {
  .plan__cards {
    flex-direction: column;
    gap: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max))) 0;
  }
}

.plan__card {
  width: calc(25% - clamp(0px, calc(25 * var(--scale)), calc(25px * var(--max))) * 3 / 4);
  box-shadow: 5px 20px 30px rgba(219, 184, 137, 0.2);
  border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  background: #fff;
  padding: clamp(0px, calc(34 * var(--scale)), calc(34px * var(--max))) clamp(0px, calc(25 * var(--scale)), calc(25px * var(--max)));
  --text-color: #087348;
  --border-color: #087348;
  --bg-color: #fff;
  --shadow: none;
}
.plan__card--recommend {
  border: 3px solid #fe6c41;
  position: relative;
  --text-color: #fff;
  --border-color: #fe6c41;
  --bg-color: #fe6c41;
  --shadow: 3px 6px 6px rgba(0, 0, 0, 0.17);
}
@media (max-width: 767px) {
  .plan__card {
    width: 100%;
    padding: 4% 8%;
  }
  .plan__card--recommend {
    margin-top: 3%;
    padding: 9% 7%;
  }
}

.plan__label {
  width: calc(254 / 301 * 100%);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 900;
  line-height: 1.6;
  text-align: center;
  background: #f9ff4e;
  padding: 0.5em 0;
  border-radius: 999px;
}
@media (max-width: 767px) {
  .plan__label {
    width: clamp(0px, calc(250 * var(--scale)), calc(250px * var(--max)));
  }
}

@media (max-width: 767px) {
  .plan__name-wrap {
    display: flex;
    gap: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  }
}

.plan__name {
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.plan__period {
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  color: #63736d;
  text-align: center;
  margin-top: 0.6em;
}

.plan__price {
  color: #087348;
  font-size: clamp(0px, calc(11 * var(--scale)), calc(11px * var(--max)));
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
}
.plan__price strong {
  font-size: clamp(0px, calc(48 * var(--scale)), calc(48px * var(--max)));
  color: #087348;
  font-family: "Outfit", sans-serif;
}
@media (max-width: 767px) {
  .plan__price {
    line-height: 1.2;
  }
}

.plan__saving {
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 800;
  line-height: 1.6;
  color: #087348;
  text-align: center;
}

.plan__features {
  display: flex;
  flex-direction: column;
  gap: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max))) 0;
  margin-top: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
}
.plan__features li {
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  color: #63736d;
  padding-left: 2.4em;
  position: relative;
}
.plan__features li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url(../img/icon-check.png) no-repeat center center/contain;
  width: 1.7em;
  aspect-ratio: 1/1;
}
@media (max-width: 767px) {
  .plan__features {
    display: none;
  }
}

.plan__button {
  margin-top: 0.56em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 0.78em;
  width: 100%;
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 800;
  line-height: 1.4;
  padding: 0.78em 1.3em;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  box-shadow: var(--shadow);
  background: var(--bg-color);
}
.plan__button::after {
  display: inline-block;
  content: "";
  position: relative;
  transform: rotate(-90deg);
  -webkit-mask-image: url(../img/icon-arrow.png);
          mask-image: url(../img/icon-arrow.png);
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--text-color);
  width: 1.67em;
  aspect-ratio: 1/1;
}
@media (max-width: 767px) {
  .plan__button {
    display: none;
  }
}

.plan__button02 {
  width: calc(350 / 1280 * 100%);
  margin: 0 auto;
  margin-top: 1.67em;
  display: flex;
  align-items: center;
  gap: 0 0.58em;
  background: #fe6c41;
  border-radius: 999px;
  box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.17);
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 700;
  line-height: 1.3333333333;
  padding: 0.58em 1.1em;
  color: #fff;
}
.plan__button02::before {
  display: inline-block;
  content: "";
  position: relative;
  background: url(../img/icon-person.png) no-repeat center center/contain;
  width: 2.6em;
  aspect-ratio: 1/1;
}
@media (max-width: 767px) {
  .plan__button02 {
    justify-content: center;
    font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
    padding: 0.7em 0;
    margin-top: 0.7em;
    width: 14.3em;
  }
  .plan__button02::before {
    content: "";
    background: url(../img/icon-play.png) no-repeat center center/100%;
    aspect-ratio: 58/48;
    width: 2em;
  }
}

.plan__corporate {
  margin-top: clamp(0px, calc(36 * var(--scale)), calc(36px * var(--max)));
  background: linear-gradient(270.88deg, #00733b 4.73%, #00b656 101.8%);
  box-shadow: 5px 20px 30px rgba(219, 184, 137, 0.2);
  border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  padding: clamp(0px, calc(45 * var(--scale)), calc(45px * var(--max))) clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
  display: flex;
  align-items: center;
  gap: 0 clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
}
@media (max-width: 767px) {
  .plan__corporate {
    padding: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
    flex-direction: column;
    gap: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max))) 0;
  }
}

.plan__corporate-label {
  font-size: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
  font-weight: 800;
  line-height: 1.4;
  color: #009245;
  background: #f9ff4e;
  padding: 0.7em 1em;
  border-radius: 999px;
}

.plan__corporate-body {
  flex: 1;
}
@media (max-width: 767px) {
  .plan__corporate-body {
    text-align: center;
  }
}

.plan__corporate-title {
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
}
@media (max-width: 767px) {
  .plan__corporate-title {
    font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  }
}

.plan__corporate-text {
  font-size: clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
  margin-top: 0.5em;
}

.plan__corporate-button {
  display: flex;
  align-items: center;
  gap: 0 0.9em;
  font-size: clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max)));
  font-weight: 800;
  line-height: 1.4;
  background: #fff;
  padding: 1em 2em;
  border-radius: 999px;
}
.plan__corporate-button::after {
  display: inline-block;
  content: "";
  position: relative;
  transform: rotate(-90deg);
  -webkit-mask-image: url(../img/icon-arrow.png);
          mask-image: url(../img/icon-arrow.png);
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: #087348;
  width: 2em;
  aspect-ratio: 1/1;
}
@media (max-width: 767px) {
  .plan__corporate-button {
    background: #fff;
    padding: 0.7em 1.4em;
    margin-top: 4%;
    font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  }
}

.plan__note {
  font-size: clamp(0px, calc(11 * var(--scale)), calc(11px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  color: #63736d;
  margin-top: 3.6em;
}
@media (max-width: 767px) {
  .plan__note {
    text-align: center;
    margin-top: 3.6em;
    font-size: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  }
}

@media (min-width: 768px) {
  .plan__point {
    display: none;
  }
}
@media (max-width: 767px) {
  .plan__point {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
    font-weight: 500;
    color: #087348;
    background: #FAF3E8;
    max-width: 100%;
    min-width: clamp(0px, calc(146 * var(--scale)), calc(146px * var(--max)));
    border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 2% auto 0;
    padding: 0.65em 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/*------------------------------
trial
------------------------------*/
.trial {
  background: url(../img/trial-bg.png) no-repeat center center/100%;
  padding: clamp(0px, calc(98 * var(--scale)), calc(98px * var(--max))) 0;
  -webkit-clip-path: polygon(0 clamp(0px, calc(47 * var(--scale)), calc(47px * var(--max))), 100% 0, 100% 100%, 0 calc(100% - clamp(0px, calc(50 * var(--scale)), calc(50px * var(--max)))));
          clip-path: polygon(0 clamp(0px, calc(47 * var(--scale)), calc(47px * var(--max))), 100% 0, 100% 100%, 0 calc(100% - clamp(0px, calc(50 * var(--scale)), calc(50px * var(--max)))));
}
@media (max-width: 767px) {
  .trial {
    background: url(../img/trial-bg_sp.png) no-repeat center center/cover;
    padding: clamp(0px, calc(280 * var(--scale)), calc(280px * var(--max))) 0 clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max)));
    position: relative;
    -webkit-clip-path: unset;
            clip-path: unset;
  }
  .trial::after {
    content: "";
    position: absolute;
    top: calc(clamp(0px, calc(25 * var(--scale)), calc(25px * var(--max))) * -1);
    left: 50%;
    transform: translateX(-50%);
    background: url(../img/trial-ing.png) no-repeat center center/contain;
    width: clamp(0px, calc(229 * var(--scale)), calc(229px * var(--max)));
    aspect-ratio: 458/996;
  }
}

.trial__content {
  width: calc(647 / 1280 * 100%);
  margin-left: auto;
  margin-right: clamp(0px, calc(17 * var(--scale)), calc(17px * var(--max)));
  background: linear-gradient(292.3deg, #00733b -1.49%, #00b656 101.77%);
  border-radius: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  padding: clamp(0px, calc(42 * var(--scale)), calc(42px * var(--max))) clamp(0px, calc(50 * var(--scale)), calc(50px * var(--max))) clamp(0px, calc(50 * var(--scale)), calc(50px * var(--max)));
  text-align: center;
  position: relative;
}
.trial__content::before {
  content: "";
  position: absolute;
  background: url(../img/trial_02.png) no-repeat center center/100%;
  aspect-ratio: 1462/1068;
  transform: translate(-50%, -55%);
  width: 113%;
  left: -45%;
  top: 50%;
}
.trial__content::after {
  content: "";
  position: absolute;
  background: url(../img/trial_01.png) no-repeat center center/100%;
  aspect-ratio: 458/938;
  transform: translate(-50%, -37%);
  width: 36%;
  left: -34%;
  top: 50%;
}
.trial__content h2 strong {
  line-height: 1.4;
}
@media (max-width: 767px) {
  .trial__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(0px, calc(50 * var(--scale)), calc(50px * var(--max))) clamp(0px, calc(33 * var(--scale)), calc(33px * var(--max)));
    margin-right: 0;
  }
  .trial__content::before {
    display: none;
  }
}

.trial__button {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  margin-top: 3%;
  display: flex;
  align-items: center;
  gap: 0 0.58em;
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 700;
  line-height: 1.3333333333;
  background: #fff;
  padding: 0.68em 1.08em;
  border-radius: 999px;
  position: relative;
}
.trial__button::before {
  display: inline-block;
  content: "";
  position: relative;
  background: url(../img/icon-play_circle.png) no-repeat center center/contain;
  width: 2em;
  aspect-ratio: 1/1;
}
.trial__button::after {
  content: "";
  position: absolute;
  top: 18%;
  right: -9%;
  transform: translate(50%, -50%);
  background: url(../img/trial-btn-mark.png) no-repeat center center/contain;
  width: 3em;
  aspect-ratio: 140/167;
}
@media (max-width: 767px) {
  .trial__button {
    margin-top: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max)));
    font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
    padding: 0.98em 1.48em;
  }
  .trial__button::after {
    display: none;
  }
}

/*------------------------------
footer
------------------------------*/
footer {
  margin-top: calc(clamp(0px, calc(50 * var(--scale)), calc(50px * var(--max))) * -1);
  padding: clamp(0px, calc(84 * var(--scale)), calc(84px * var(--max))) 0 clamp(0px, calc(100 * var(--scale)), calc(100px * var(--max)));
  background: #fff;
}
@media (max-width: 767px) {
  footer {
    padding: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) 0;
    margin-top: 0;
  }
}

.footer__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .footer__content {
    flex-direction: column;
    justify-content: center;
    gap: 20px 0;
  }
}

.footer__logo {
  width: clamp(0px, calc(132 * var(--scale)), calc(132px * var(--max)));
}

.footer__copyright {
  font-size: clamp(0px, calc(9 * var(--scale)), calc(9px * var(--max)));
  font-weight: 400;
  line-height: 1.6;
  color: #000;
}

/* 上　右下。 */
.c-clip01 {
  -webkit-clip-path: polygon(0 0, 100% clamp(0px, calc(36 * var(--scale)), calc(36px * var(--max))), 100% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% clamp(0px, calc(36 * var(--scale)), calc(36px * var(--max))), 100% 100%, 0% 100%);
}
@media (max-width: 767px) {
  .c-clip01 {
    -webkit-clip-path: polygon(0 0, 100% clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max))), 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max))), 100% 100%, 0% 100%);
  }
}

[id]:not([id=""]) {
  scroll-margin-top: clamp(0px, calc(76.6 * var(--scale)), calc(76.6px * var(--max)));
}
@media (max-width: 767px) {
  [id]:not([id=""]) {
    scroll-margin-top: clamp(0px, calc(64 * var(--scale)), calc(64px * var(--max)));
  }
}

.c-pre {
  background: gray;
  opacity: 0.7;
  pointer-events: none;
  position: relative;
  border-color: gray;
}

.c-pre-text {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0%);
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
@media (max-width: 767px) {
  .c-pre-text {
    font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  }
}

@media (max-width: 767px) {
  .c-pre01 {
    margin-bottom: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  }
}

.c-pre02 .c-pre-text {
  color: gray;
}
/*# sourceMappingURL=style.css.map */