@charset "UTF-8";

:root {
  --main: #0F8B67;
  --sub: #D06882;
  --cta: #06C655;
  --bg: #F4F6F3;
  --text: #404244;
  --white: #FFFFFF;
  --font-size: clamp(12px, 3.8vw, 16px);
  --bold: bold;
  --content-width: 430px;
  --content-inner-width: 370px;
  --header-height: 78px;
  --shadow: 0 4px 4px #00000040;
  --font-sans-serif: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  --font18: clamp(16px, 4.5vw, 18px);
  --font20: clamp(16px, 5vw, 20px);
  --font22: clamp(16px, 5.5vw, 22px);
  --font24: clamp(16px, 6vw, 24px);
  --font26: clamp(16px, 6.5vw, 26px);
  --font28: clamp(16px, 7vw, 28px);
  --font30: clamp(16px, 7.5vw, 30px);
  --font32: clamp(16px, 8vw, 32px);
  --font34: clamp(16px, 8.5vw, 34px);
  --font36: clamp(16px, 8.8vw, 36px);
  --font42: clamp(16px, 10.8vw, 42px);
}

* { margin: 0; padding: 0; box-sizing: border-box;}
html { scroll-padding-top: var(--header-height);}
body {
  font-family: var(--font-sans-serif);
  color: var(--text);
  font-size: var(--font-size);
  font-weight: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
}
body.active { height: 100vh; overflow: hidden;}
ul, ol { list-style-type: none;}
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; word-break: auto-phrase;}
a { color: var(--text); text-decoration: none;}
a, a::before, a::after, a:hover, a:hover:before, a:hover:after { transition: all 0.5s ease;}
a:hover { opacity: 0.6;}
mark { background-color: transparent; color: inherit;}
em, small { font-style: inherit; font-size: inherit; font-weight: inherit;}
.color { color: var(--sub);}
.line { text-decoration: underline;}
.italic { font-style: italic;}
strong { font-style: inherit; font-size: inherit; font-weight: var(--bold);}
img { width: 100%; height: auto; vertical-align: bottom;}
iframe { width: 100%; vertical-align: bottom;}
.wrapper {
  width: 100%;
  max-width: var(--content-width);
  min-width: 320px;
  padding-bottom: 64px; /* footer-ctaの高さ */
  margin: auto;
  overflow: hidden;
  box-shadow: 0 2px 14px -2px #00000040;
}
section { padding: 40px 0;}
.section-inner { width: 90%; max-width: var(--content-inner-width); margin: auto;}
.section-title { font-size: var(--font20); font-weight: var(--bold); text-align: center; margin-bottom: 32px;}
.section-title em { font-size: 140%;}

.cta-link { text-align: center;}
.cta-link-head {
  display: flex;
  column-gap: 6px;
  align-items: center;
  justify-content: center;
  font-size: min( 3.59vw, 14px);
  font-weight: var(--bold);
  position: relative;
}
.cta-link-head::before,
.cta-link-head::after {
  content: "";
  width: 1px;
  height: 14px;
  background-color: var(--text);
}
.cta-link-head::before { transform: rotate(-20deg); left: -6px;}
.cta-link-head::after { transform: rotate(20deg); right: -6px;}
.cta-link-btn {
  display: flex;
  align-items: center;
  max-width: max-content;
  background-color: var(--cta);
  color: var(--white);
  font-weight: var(--bold);
  line-height: 1;
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 14px 17px;
  margin: 0 auto 10px;
}
.cta-link-btn::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../img/arrow.png) no-repeat;
  background-size: contain;
  margin-left: 8px;
}
.cta-link-text { font-size: 14px;}

.header {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px min(4.2vw, 16px);
}
.header-logo img { width: 60px;}
.header-link {
  background-color: var(--cta);
  font-weight: var(--bold);
  line-height: 1;
  text-align: center;
  padding: 6px min(5.13vw, 20px);
  border-radius: 30px;
  border: 1px solid var(--white);
  box-shadow: var(--shadow);
}
.header-link-head {
  display: flex;
  column-gap: 2px;
  align-items: center;
  background-color: var(--white);
  color: var(--main);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 10px;
  margin-bottom: 2px;
}
.header-link-head::before,
.header-link-head::after {
  content: "";
  width: 1px;
  height: 14px;
  background-color: var(--main);
}
.header-link-head::before { transform: rotate(-20deg); left: -6px;}
.header-link-head::after { transform: rotate(20deg); right: -6px;}
.header-link-text { display: flex; justify-content: center; color: var(--white); font-size: var(--font18); padding: 2px 0;}
.header-link-text::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../img/arrow.png) no-repeat;
  background-size: contain;
  margin-left: 4px;
}

.fv-head-title {
  background: linear-gradient(90deg, #D06882 0%, #E1839B 50%, #D06882 100%);
  color: var(--white);
  font-size: var(--font26);
  font-weight: var(--bold);
  font-style: italic;
  line-height: 40px;
  text-align: center;
  padding: 5px;
}
.fv-head-title span { font-size: 88.5%;}
.fv-head-text { padding: 10px; font-size: var(--font20); font-weight: var(--bold); text-align: center;}
.fv-head-text mark {
  display: inline-block;
  background-color: var(--main);
  color: var(--white);
  font-size: 17px;
  padding: 4px 10px;
  border-radius: 2px;
  margin: 0 3px 6px;
}
.fv-head-text .text { font-style: italic; letter-spacing: 0.04em; line-height: 1.2;}
.fv-head::after {
  content: "";
  display: block;
  aspect-ratio: 390 / 279;
  background: url(../img/first-view.webp) no-repeat;
  background-size: cover;
}
.no-webp .fv-head::after { background-image: url(../img/first-view.jpg);}
.fv-main { display: flex; justify-content: space-between; margin: -50px 0 30px;}
.fv-main-text { width: 75%; max-width: 276px; font-weight: var(--bold);}
.fv-main-text1 {
  background-color: var(--white);
  font-size: min(3.85vw, 15px);
  line-height: 1.2;
  font-style: italic;
  padding: 3px 12px 3px 22px;
  border: 1px solid var(--text);
  border-left: none;
  margin-bottom: 5px;
}
.fv-main-text2 {
  color: var(--white);
  font-size: var(--font32);
  line-height: 1;
  font-style: italic;
  padding-bottom: 4px;
}
.fv-main-text2 p {
  max-width: max-content;
  background-color: var(--main);
  margin-bottom: 6px;
  padding: 4px 10px 4px 16px;
}
.fv-main-text2 span { font-size: 78.6%;}
.fv-main-text3 {
  font-size: min( 3.59vw, 14px);
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--text);
  padding: 6px 0 6px 16px;
  margin-bottom: 4px;
}
.fv-main-point {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 25%;
  max-width: 98px;
  padding-right: 8px;
}
.fv-main-point .point {
  background-color: var(--sub);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: min(2.6vw, 11px);
  font-weight: var(--bold);
  text-align: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  padding: 6px;
  position: relative;
}
.fv-main-point .point em { display: inline-block; font-size: 160%; margin-top: -0.2em;}
.fv-main-point .point::after {
  content: "";
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  background: url(../img/fv-point.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.fv-foot { margin-bottom: 30px;}

.section-invite { background-color: var(--bg); border-radius: 0 50px 0 0; padding-bottom: 90px;}
.invite-title {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  position: relative;
}
.invite-title::before,
.invite-title::after {
  content: "";
  width: 35px;
  height: 70px;
}
.invite-title::before { background: url(../img/invite-title-l.png) no-repeat; background-size: contain;}
.invite-title::after { background: url(../img/invite-title-r.png) no-repeat; background-size: contain;}
.invite-title em { display: block;}
.invite-box {
  background-color: var(--white);
  padding: 30px 10px;
  border: 1px solid var(--text);
  box-shadow: var(--shadow);
  position: relative;
}
.invite-box::before {
  content: "";
  width: 91px;
  height: 1px;
  background-color: var(--white);
  position: absolute;
  left: 18px;
  top: -1px;
}
.invite-box::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-bottom: 15px solid var(--text);
  border-left: 15px solid transparent;
  position: absolute;
  bottom: 0;
  right: 0;
}
.invite-list-head { width: 91px; margin-bottom: -12px; position: absolute; left: 18px; top: -12px;}
.invite-list-item {
  font-weight: var(--bold);
  border-bottom: 1px solid #BFBCBC;
  padding: 10px 0;
  position: relative;
  padding-left: 22px;
}
.invite-list-item::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url(../img/invite-item.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 14px;
  left: 0;
}

.benefit-title {
  max-width: max-content;
  background-color: var(--main);
  color: var(--white);
  font-size: var(--font24);
  font-weight: var(--bold);
  line-height: 1;
  text-align: center;
  padding: 8px 24px;
  border-radius: 20px;
  margin: 64px auto 20px;
  position: relative;
}
.benefit-title::before {
  content: "";
  display: block;
  width: 6px;
  height: 34px;
  background: url(../img/dot.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  right: 0;
  top: -52px;
  margin: auto;
}
.benefit-title::after {
  content: "";
  display: block;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  border: 1px solid var(--main);
  border-radius: calc(1em + 8px + 6px);
  position: absolute;
  top: -6px;
  left: -6px;
}
.benefit-title span { font-size: var(--font20);}
.benefit-box1 { margin-bottom: 30px;}
.benefit-item1 {
  background-color: var(--white);
  font-size: var(--font18);
  font-weight: var(--bold);
  line-height: 1;
  text-align: center;
  border: 1px solid var(--main);
  box-shadow: 3px 4px 0 #0F8B6733;
  padding: 10px;
  margin-bottom: 12px;
}
.benefit-box2 { display: flex; column-gap: 50px; justify-content: center; margin-bottom: 30px; position: relative;}
.benefit-box2::before,
.benefit-box2::after {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  background-color: var(--sub);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.benefit-box2::before { transform: rotate(45deg);}
.benefit-box2::after { transform: rotate(-45deg);}
.benefit-item2 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background-color: var(--sub);
  color: var(--white);
  font-size: var(--font20);
  font-weight: var(--bold);
  text-align: center;
  border-radius: 50%;
}
.benefit-bottom { border: 1px solid var(--main); border-radius: 2px; padding: 8px;}
.benefit-bottom-text {
  background-color: var(--white);
  font-weight: var(--bold);
  text-align: center;
  border: 1px solid var(--main);
  padding: 8px;
  border-radius: 2px;
}
.benefit-bottom-text mark {
  display: inline-block;
  background-color: var(--main);
  color: var(--white);
  font-size: var(--font18);
  line-height: 1;
  padding: 4px 10px;
  margin: 0 2px 10px;
}
.benefit-bottom-text em { display: inline-block; font-size: var(--font28); font-style: italic; margin-top: 4px;}

.section-interview {
  background: url(../img/interview-bg.png) no-repeat;
  background-size: cover;
  border-radius: 50px 0 0 0;
  padding-bottom: 90px;
  margin-top: -50px;
}
.interview-title {
  background: url(../img/interview-title.png) no-repeat;
  background-size: 100% 100%;
  letter-spacing: -0.04em;
  padding: 30px 0 8px;
  position: relative;
}
.interview-title mark {
  background-color: var(--main);
  color: var(--white);
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  padding: 2px 10px;
  border-radius: 10px;
  position: absolute;
  top: 10px;
  left: 10px;
}
.interview-item { margin-top: 30px;}
.interview-item iframe { height: min(48.4vw, 208px);}

.section-reason {
  background-color: var(--main);
  color: var(--white);
  border-radius: 0 50px 0 0;
  margin-top: -50px;
}
.reason-title { line-height: 1.2;}
.reason-title mark {
  display: inline-block;
  background-color: var(--white);
  color: var(--main);
  transform: skewX(-15deg);
  padding: 0 4px;
  margin-right: 4px;
}
.reason-title .space { letter-spacing: 0.02em;}

.reason-head { width: 140px; margin: 0 auto 16px;}
.reason-item + .reason-item { margin-top: 40px;}
.reason-item-inner::before {
  content: "";
  display: block;
  aspect-ratio: 370 / 240;
  background-repeat: no-repeat;
  background-size: cover;
}
.reason-item-content { background-color: var(--white); color: var(--text); padding: 16px 5% 20px;}
.reason-item:nth-child(odd) { margin-left: 5%;}
.reason-item:nth-child(odd) .reason-head { padding-right: 5.2%;}
.reason-item:nth-child(odd) .reason-item-inner::before { border-radius: 30px 0 0 0;}
.reason-item:nth-child(odd) .reason-item-content { border-radius: 0 0 0 30px;}
.reason-item:nth-child(even) { margin-right: 5%;}
.reason-item:nth-child(even) .reason-head { padding-left: 5.2%;}
.reason-item:nth-child(even) .reason-item-inner::before { border-radius: 0 30px 0 0;}
.reason-item:nth-child(even) .reason-item-content { border-radius: 0 0 30px 0;}
.reason-item:nth-child(1) .reason-item-inner::before { background-image: url(../img/reason-img1.webp);}
.reason-item:nth-child(2) .reason-item-inner::before { background-image: url(../img/reason-img2.webp);}
.reason-item:nth-child(3) .reason-item-inner::before { background-image: url(../img/reason-img3.webp);}
.reason-item:nth-child(4) .reason-item-inner::before { background-image: url(../img/reason-img4.webp);}
.reason-item:nth-child(5) .reason-item-inner::before { background-image: url(../img/reason-img5.webp);}
.no-webp .reason-item:nth-child(1) .reason-item-inner::before { background-image: url(../img/reason-img1.jpg);}
.no-webp .reason-item:nth-child(2) .reason-item-inner::before { background-image: url(../img/reason-img2.jpg);}
.no-webp .reason-item:nth-child(3) .reason-item-inner::before { background-image: url(../img/reason-img3.jpg);}
.no-webp .reason-item:nth-child(4) .reason-item-inner::before { background-image: url(../img/reason-img4.jpg);}
.no-webp .reason-item:nth-child(5) .reason-item-inner::before { background-image: url(../img/reason-img5.jpg);}
.reason-item-title {
  max-width: 330px;
  font-size: var(--font22);
  font-weight: var(--bold);
  text-align: center;
  border-bottom: 1px solid var(--text);
  padding-bottom: 12px;
  margin: 0 auto 12px;
}
.reason-item-text { max-width: 330px; margin: auto;}
.reason-item-text p + p { margin-top: 1em;}
.reason-item-text ul { padding: 20px 10px;}
.reason-item-text li::before { content: "・";}
.reason-item-text a {
  max-width: max-content;
  display: flex;
  align-items: center;
  color: var(--sub);
  border-bottom: 1px solid var(--sub);
  margin: auto;
}
.reason-item-text a::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--sub);
  -webkit-mask-image: url("../img/arrow.png");
  -webkit-mask-size: 100%;
  margin-left: 4px;
}
.section-cta { padding-top: 0;}
.cta-head {
  background: linear-gradient(90deg, #D06882 0%, #E1839B 50%, #D06882 100%);
  color: var(--white);
  font-size: var(--font26);
  font-weight: var(--bold);
  font-style: italic;
  line-height: 40px;
  text-align: center;
  padding: 10px;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1;
}
.cta-head span { font-size: 88.5%;}
.cta-main::before {
  content: "";
  display: block;
  aspect-ratio: 390 / 240;
  background: url(../img/cta.webp) no-repeat;
  background-size: cover;
}
.no-webp .cta-main::before { background-image: url(../img/cta.jpg);}
.cta-main-inner {
  width: 95%;
  max-width: 370px;
  background-color: var(--bg);
  border: 1px solid var(--main);
  box-shadow: var(--shadow);
  padding: 30px 3% 10px;
  margin: -10px auto 30px;
  position: relative;
}
.cta-main-text {
  max-width: max-content;
  background-color: var(--main);
  color: var(--white);
  font-size: min(4vw, 18px);
  font-weight: var(--bold);
  border: 1px solid var(--white);
  transform: rotate(-1deg) skewX(-10deg);;
  padding: 0 16px;
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  margin: auto;
}
.cta-point-item { padding: 4px 0 4px 65px; position: relative;}
.cta-point-item + .cta-point-item { border-top: 1px solid var(--text);}
.cta-point-item::before {
  content: "";
  display: block;
  width: 51px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 8px;
  left: 0;
}
.cta-point-item:nth-child(1):before { background-image: url(../img/point01.png);}
.cta-point-item:nth-child(2):before { background-image: url(../img/point02.png);}
.cta-point-item:nth-child(3):before { background-image: url(../img/point03.png);}
.cta-point-item:nth-child(4):before { background-image: url(../img/point04.png);}
.cta-point-item em { font-weight: var(--bold);}

.section-about { background: url(../img/about-bg.webp) no-repeat; background-size: cover; padding-bottom: 0;}
.no-webp .section-about { background-image: url(../img/about-bg.jpg);}
.section-about::after {
  content: "";
  display: block;
  aspect-ratio: 390 / 190;
  background: url(../img/about-bottom.webp) no-repeat;
  background-size: cover;
  margin-top: 40px;
}
.no-webp .section-about::after { background-image: url(../img/about-bottom.jpg);}
.about-title {
  max-width: max-content;
  background-color: var(--white);
  font-size: var(--font24);
  line-height: 1;
  text-align: left;
  border: 1px solid var(--text);
  border-left: none;
  padding: 5px 5%;
  border-radius: 0 18px 18px 0;
}
.about-content-title {max-width: 350px; margin: 0 auto 20px;}
.about-text { max-width: 350px; margin: auto;}
.about-text p + p { margin-top: 1.5em;}

.section-shop { padding-top: 60px;}
.shop-title {
  max-width: max-content;
  font-size: var(--font18);
  line-height: 1;
  border: 1px solid var(--main);
  border-radius: 20px;
  padding: 8px 20px;
  margin-left: auto;
  margin-right: auto;
}
.shop-item img { aspect-ratio: 350 / 280; object-fit: cover;}
.shop-item-head {
  max-width: max-content;
  background-color: var(--main);
  color: var(--white);
  border-radius: 2px;
  padding: 0 6px;
  margin: 6px 0;
}
.section-shop .splide { padding-bottom: 24px;}
.section-shop .splide__arrow {
  width: 30px;
  height: 30px;
  background: var(--main) url(../img/arrow.png) no-repeat center center;
  background-size: 18px;
  border-radius: 2px;
  opacity: 1;
}
.section-shop .splide__arrow svg { display: none;}
.section-shop .splide__arrow--prev { top: 36%; left: -15px; transform: rotate(180deg); transform-origin: center 25%;}
.section-shop .splide__arrow--next { top: 36%; right: -15px;}
.section-shop .splide__pagination { bottom: 0;}
.section-shop .splide__pagination__page { background-color: #D9E7E3; opacity: 1; margin: 0 3px;}
.section-shop .splide__pagination__page.is-active { background-color: var(--main); transform: scale(1);}

.section-training .section-inner { width: 95%;}
.training-title {
  max-width: max-content;
  background-color: var(--main);
  color: var(--white);
  font-style: italic;
  border-radius: 10px 10px 0 0;
  margin-bottom: -2px;
  padding: 2px 16px;
}
.training-box {
  border: 2px solid var(--main);
  border-radius: 0 10px 10px 10px;
  padding: 20px 4.8%;
}
.training-list { margin-bottom: 10px;}
.training-list-item {
  display: flex;
  align-items: center;
  min-height: 60px;
  font-size: var(--font20);
  font-weight: var(--bold);
  word-break: keep-all;
  border-bottom: 1px solid var(--text);
  padding: 10px 0;
  padding-left: 56px;
  position: relative;
}
.training-list-item::before {
  content: "";
  display: block;
  width: 40px;
  height: 46px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.training-list-item:nth-child(1):before { background-image: url(../img/training-icon1.png);}
.training-list-item:nth-child(2):before { background-image: url(../img/training-icon2.png);}
.training-list-item:nth-child(3):before { background-image: url(../img/training-icon3.png);}
.training-list-item:nth-child(4):before { background-image: url(../img/training-icon4.png);}
.training-banner {
  background-color: var(--sub);
  color: var(--white);
  font-size: var(--font20);
  font-weight: var(--bold);
  font-style: italic;
  text-align: center;
  padding: 10px;
  margin-bottom: 20px;
}

.school-title {
  font-size: var(--font22);
  font-style: italic;
  border: 2px solid var(--sub);
  border-radius: 10px;
  margin-left: -5px;
  margin-right: -5px;
}
.school-title span {
  display: block;
  background-color: var(--sub);
  color: var(--white);
  font-size: min(3.59vw, 14px);
  font-style: normal;
  border-radius: 8px 8px 0 0;
}
.school-content p + p { margin-top: 1em;}
.school-content em { font-weight: var(--bold);}

.section-recruit { background: var(--bg) url(../img/recruit-bg.png) no-repeat top left; background-size: 100%;}
.recruit-title {
  max-width: max-content;
  font-size: var(--font24);
  font-style: italic;
  border-bottom: 1px solid var(--main);
  margin-left: auto;
  margin-right: auto;
  padding-right: 4px;
}
.recruit-head {
  display: flex;
  align-items: center;
  background-color: var(--main);
  color: var(--white);
  font-weight: var(--bold);
  padding: 8px 3%;
}
.recruit-head::before {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background-color: var(--white);
  margin-right: 8px;
}
.recruit-content { padding: 3% 16px;}
.recruit-content li { padding-left: 16px; position: relative;}
.recruit-content li::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--main);
  position: absolute;
  top: 9px;
  left: 0;
}
.recruit-content li + li { margin-top: 10px;}

.section-flow .section-inner { width: 95%;}
.flow-title { font-size: var(--font24); font-style: italic;}
.flow-item { font-size: 14px; padding-top: 10px; padding-left: 50px; margin-bottom: 16px; position: relative;}
.flow-item::before {
  content: "";
  display: block;
  width: 40px;
  height: 41px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
}
.flow-item:nth-child(1):before { background-image: url(../img/step01.png);}
.flow-item:nth-child(2):before { background-image: url(../img/step02.png);}
.flow-item:nth-child(3):before { background-image: url(../img/step03.png);}
.flow-item:nth-child(4):before { background-image: url(../img/step04.png);}
.flow-item::after {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% - 49px);
  background-color: var(--text);
  position: absolute;
  left: 20px;
  bottom: 0;
  margin: auto;
}
.flow-head { font-size: var(--font18); font-weight: var(--bold); margin-bottom: 8px;}
.flow-item .cta-link { margin: 10px -20px 0;}

.section-faq { background-color: var(--bg);}
.faq-title { font-size: var(--font24);}
.faq-title::before {
  content: attr(data-en);
  display: block;
  color: var(--main);
  font-size: var(--font-size);
}
.faq-item { background-color: var(--white); padding: 10px;}
.faq-item + .faq-item { margin-top: 16px;}
.faq-q {
  font-weight: var(--bold);
  padding: 0 20px 0 32px;
  position: relative;
  cursor: pointer;
}
.faq-q::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 5px solid var(--main);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  margin: auto;
}
.faq-q.open::after { transform: rotate(180deg);}
.faq-a {
  height: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.2;
  padding-left: 32px;
  position: relative;
  transition: all 0.3s ease;
}
.faq-a.open {
  border-top: 1px solid var(--text);
  padding-top: 8px;
  margin-top: 8px;
}
.faq-q::before, .faq-a::before {
  content: "";
  display: block;
  width: 20px;
  height: 21px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 2px;
  left: 0;
}
.faq-q::before { background-image: url(../img/faq-q.png);}
.faq-a::before { background-image: url(../img/faq-a.png); top: 10px;}

.footer-cta {
  width: var(--content-width);
  max-width: 100%;
  position: fixed;
  bottom: -64px;
  left: 0; right: 0;
  margin: auto;
  transition: all 0.5s ease;
  z-index: 10;
}
.footer-cta.view { bottom: 0; transition: all 0.5s ease;}
.footer-cta a {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cta);
  color: var(--white);
  font-weight: var(--bold);
}
.footer-cta a::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../img/arrow.png) no-repeat;
  background-size: contain;
  margin-left: 8px;
}