/* ==========================================
 Section
============================================*/
.section {
  padding-block: var(--sz-48);
}

/* heading */
.section-heading {
  color: var(--color-primary);
  font-size: var(--sz-40);
  font-weight: 900;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.02em;
  position: relative;
}

.section-heading:not(.--no-caption)::before {
  content: "";
  display: block;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--size);
  margin-inline: auto;
}

@media screen and (min-width: 992px) {
  .section {
    padding-block: var(--sz-80);
  }
}
/* ==========================================
 FV
============================================*/
.fv {
  background: url(../images/fv@2x.webp) no-repeat top left/contain;
  aspect-ratio: 750/982;
}

.fv__cta {
  display: none;
}

@media screen and (min-width: 992px) {
  .fv {
    background-image: url(../images/fv.webp);
    aspect-ratio: 1920/1000;
    position: relative;
  }
  .fv__cta {
    display: block;
    translate: 0 var(--sz-769);
    width: -moz-fit-content;
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sz-20);
  }
}
/* ==========================================
 Question
============================================*/
.question {
  background-color: var(--color-water);
}

.question__heading {
  margin-bottom: var(--sz-32);
}

.question__heading::before {
  background-image: url(../images/txt-title-question@2x.webp);
  --size: var(--sz-132);
  aspect-ratio: 132/42;
  margin-bottom: var(--sz-16);
}

.question__bubbles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sz-272) var(--sz-24);
  background: url(../images/pic-question@2x.webp) no-repeat top 59% center/var(--sz-670);
}

.question__bubble {
  background: url(../images/pic-bubble-left@2x.webp) no-repeat top left/cover;
  aspect-ratio: 327/302;
  width: var(--sz-327);
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.01em;
  text-align: center;
}

.question__bubble.--reverse {
  background-image: url(../images/pic-bubble-right@2x.webp);
  aspect-ratio: 330/302;
  width: var(--sz-330);
}

.question__bubble:nth-child(odd) {
  padding-right: 0.5em;
}

.question__bubble:nth-child(even) {
  margin-top: var(--sz-32);
  padding-left: 0.5em;
}

/* question2 */
.question__lead {
  color: var(--color-primary);
  background-color: #fff;
  margin-bottom: var(--sz-16);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 0.4em;
  padding-bottom: 1.2em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.6em), calc(50% + 0.6em) calc(100% - 0.6em), 50% 100%, calc(50% - 0.6em) calc(100% - 0.6em), 0 calc(100% - 0.6em));
}

.question__banner {
  font-size: var(--sz-40);
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.05em;
  --mb-p: var(--sz-32);
  position: relative;
  margin-bottom: var(--sz-48);
}

.question__banner::before,
.question__banner::after {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: calc(-1 * var(--sz-32));
}

.question__banner::before {
  background-image: url(../images/pic-question-model1@2x.webp);
  width: var(--sz-100);
  aspect-ratio: 100/270;
  left: 0;
}

.question__banner::after {
  background-image: url(../images/pic-question-model2@2x.webp);
  width: var(--sz-78);
  aspect-ratio: 78/270;
  right: 0;
}

.question__banner p:last-child {
  margin-bottom: 0;
  color: var(--color-primary);
  background-color: var(--color-yellow);
  font-size: var(--sz-56);
  font-weight: 900;
  line-height: 1.07em;
  letter-spacing: 0.02em;
  padding: 0.22em 1em 0.26em;
  border-radius: 100vh;
}

@media screen and (min-width: 992px) {
  .question {
    padding-bottom: 0;
  }
  .question__heading {
    margin-bottom: var(--sz-40);
  }
  .question__heading::before {
    background-image: url(../images/txt-title-question.webp);
    --size: var(--sz-127);
    aspect-ratio: 127/42;
    margin-bottom: var(--sz-16);
  }
  .question__bubbles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sz-272) var(--sz-24);
    background: url(../images/pic-question.webp) no-repeat top center/100%;
    aspect-ratio: 1500/484;
    position: relative;
  }
  .question__bubble {
    font-size: var(--sz-24);
    font-weight: 600;
    line-height: 1.66;
    background: url(../images/pic-bubble-left.webp) no-repeat top left/contain;
    aspect-ratio: 249/223;
    width: var(--sz-249);
    letter-spacing: 0.02em;
    position: absolute;
  }
  .question__bubble.--reverse {
    background-image: url(../images/pic-bubble-right.webp);
    aspect-ratio: 242/222;
    width: var(--sz-242);
  }
  .question__bubble:nth-child(even) {
    margin-top: 0;
  }
  .question__bubble:nth-child(1) {
    top: -3%;
    left: 16%;
  }
  .question__bubble:nth-child(2) {
    top: 37%;
    left: 57.5%;
  }
  .question__bubble:nth-child(3) {
    top: 39%;
    left: 26%;
  }
  .question__bubble:nth-child(4) {
    top: -3%;
    left: 67.5%;
  }
  /* question2 */
  .question__lead {
    font-size: var(--sz-24);
    letter-spacing: 0.02em;
    padding: var(--sz-16) var(--sz-40) var(--sz-28);
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    margin-bottom: var(--sz-24);
  }
  .question__banner {
    font-size: var(--sz-32);
    line-height: 1.125;
    letter-spacing: 0.02em;
    --mb-p: var(--sz-24);
    margin-bottom: var(--sz-24);
  }
  .question__banner::before {
    background-image: url(../images/pic-question-model1.webp);
    width: var(--sz-112);
    aspect-ratio: 112/307;
    left: var(--sz-80);
  }
  .question__banner::after {
    background-image: url(../images/pic-question-model2.webp);
    width: var(--sz-89);
    aspect-ratio: 89/307;
    right: var(--sz-80);
  }
}
/* ==========================================
 Achievements
============================================*/
.achievements__heading {
  margin-bottom: var(--sz-32);
}

.achievements__heading::before {
  background-image: url(../images/txt-title-achievements@2x.webp);
  --size: var(--sz-208);
  aspect-ratio: 208/42;
}

.achievements__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sz-32) var(--sz-48);
}

.achievements__item {
  flex: 0 0 calc((100% - 3 * var(--sz-48)) / 4);
}

@media screen and (min-width: 992px) {
  .achievements__heading {
    margin-bottom: var(--sz-40);
  }
  .achievements__heading::before {
    background-image: url(../images/txt-title-achievements.webp);
    --size: var(--sz-210);
    aspect-ratio: 210/42;
  }
  .achievements__list {
    gap: var(--sz-40) var(--sz-80);
  }
  .achievements__item {
    flex: 0 0 calc((100% - 3 * var(--sz-80)) / 4);
  }
}
/* ==========================================
 Voice
============================================*/
.voice {
  background-color: var(--color-water);
  padding-top: var(--sz-64);
}

.voice__heading {
  margin-bottom: var(--sz-48);
}

.voice__heading::before {
  background-image: url(../images/txt-title-voice@2x.webp);
  --size: var(--sz-80);
  aspect-ratio: 80/42;
}

.voice__heading > span {
  font-size: var(--sz-32);
  font-weight: 600;
  --color: var(--color-primary);
  margin-bottom: 0.25em;
}

.voice__list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-32);
}

.voice__item {
  background-color: #fff;
  border-radius: var(--sz-16);
  padding: var(--sz-48) var(--sz-20);
}

.voice__avator {
  width: var(--sz-264);
  margin-inline: auto;
  margin-bottom: var(--sz-16);
}

.voice__name {
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: var(--sz-32);
}

.voice__desc {
  line-height: 2;
  letter-spacing: 0.02em;
}

.voice__desc p:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 992px) {
  .voice {
    padding-top: var(--sz-80);
  }
  .voice__heading {
    margin-bottom: var(--sz-40);
  }
  .voice__heading::before {
    background-image: url(../images/txt-title-voice.webp);
    --size: var(--sz-78);
    aspect-ratio: 78/42;
    margin-bottom: var(--sz-24);
  }
  .voice__list {
    gap: var(--sz-30);
    flex-direction: row;
  }
  .voice__item {
    border-radius: var(--sz-8);
    padding: var(--sz-40) var(--sz-20);
    flex: 1;
  }
  .voice__avator {
    width: var(--sz-132);
    margin-bottom: var(--sz-8);
  }
  .voice__name {
    margin-bottom: var(--sz-24);
  }
}
/* ==========================================
 Worry
============================================*/
.worry {
  background: url(../images/bg-worry@2x.webp) no-repeat top left/100% 100%;
  position: relative;
  padding-top: var(--sz-60);
  padding-bottom: var(--sz-96);
}

.worry__lead {
  margin-bottom: var(--sz-30);
  position: relative;
  z-index: 1;
}

.worry__model {
  width: var(--sz-200);
  position: absolute;
  top: var(--sz-148);
  right: 0;
}

.worry__heading {
  color: #fff;
  margin-bottom: var(--sz-48);
}

.worry__heading > span {
  font-size: var(--sz-32);
  font-weight: 600;
}

.worry__list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-16);
  margin-bottom: var(--sz-48);
}

.worry__desc {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: 0;
}

@media screen and (min-width: 992px) {
  .worry {
    background-image: url(../images/bg-worry.webp);
    padding-bottom: var(--sz-180);
  }
  .worry__lead {
    width: var(--sz-1000);
    margin-inline: auto;
    margin-bottom: var(--sz-40);
  }
  .worry__model {
    width: var(--sz-343);
    top: var(--sz-80);
    right: 0;
  }
  .worry__heading {
    margin-bottom: var(--sz-40);
  }
  .worry__list {
    flex-direction: row;
    flex-wrap: wrap;
    width: var(--sz-1110);
    margin-inline: auto;
    gap: var(--sz-10);
    margin-bottom: var(--sz-40);
  }
  .worry__item {
    width: calc((100% - var(--sz-10)) / 2);
  }
  .worry__desc {
    font-size: var(--sz-24);
  }
}
/* ==========================================
 Reason
============================================*/
.reason {
  background: transparent linear-gradient(0deg, #ffe8d3 0%, #fff 100%);
}

.reason__lead {
  letter-spacing: 0.01em;
  text-align: center;
}

.reason__lead .side-slash {
  --color: var(--color-orange);
}

.reason__lead > span:last-child {
  display: block;
  margin-top: var(--sz-16);
}

.reason__lead > span:last-child span {
  font-size: var(--sz-40);
  font-weight: 900;
  display: inline-block;
  margin-inline: var(--sz-8);
}

.reason__lead > span:last-child span:last-child {
  margin-top: var(--sz-16);
}

.reason__heading {
  color: #fff;
  background: transparent linear-gradient(106deg, var(--color-yellow) 0%, var(--color-orange) 100%);
  padding: 0.1em;
  padding-bottom: 0.9em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.6em), calc(50% + 0.6em) calc(100% - 0.6em), 50% 100%, calc(50% - 0.6em) calc(100% - 0.6em), 0 calc(100% - 0.6em));
  margin-bottom: var(--sz-32);
}

.reason__heading > span {
  font-size: var(--sz-32);
  font-weight: 600;
  margin-right: 0.5em;
}

.reason__list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-32);
}

.reason__item {
  background-color: #fff;
  border-radius: var(--sz-16);
  border: var(--sz-4) solid var(--color-orange);
  padding: var(--sz-40) var(--sz-20);
}

.reason__label {
  color: var(--color-orange);
  font-size: var(--sz-40);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.02em;
  padding-left: var(--sz-108);
  background: url(../images/pic-reason-idx1@2x.webp) no-repeat center left/var(--sz-92);
  height: var(--sz-100);
  display: flex;
  align-items: center;
  margin-bottom: var(--sz-16);
}

.reason__item:nth-child(2) .reason__label {
  background-image: url(../images/pic-reason-idx2@2x.webp);
}

.reason__item:nth-child(3) .reason__label {
  background-image: url(../images/pic-reason-idx3@2x.webp);
}

.reason__desc {
  margin-bottom: var(--sz-16);
}

@media screen and (min-width: 992px) {
  .reason {
    padding-top: var(--sz-40);
  }
  .reason__lead {
    font-size: var(--sz-32);
    font-weight: 600;
    line-height: 1.875;
    letter-spacing: 0.02em;
    margin-bottom: var(--sz-40);
  }
  .reason__lead .side-slash {
    gap: var(--sz-16);
    font-size: var(--sz-40);
    font-weight: 900;
    line-height: 1.5;
  }
  .reason__lead .side-slash::before,
  .reason__lead .side-slash::after {
    width: var(--sz-4);
  }
  .reason__lead > span:last-child {
    margin-top: 0;
    line-height: 1.5;
  }
  .reason__heading {
    letter-spacing: 0.05em;
    margin-bottom: var(--sz-24);
    padding: 0.25em;
    padding-bottom: 1.05em;
  }
  .reason__heading > span {
    line-height: 1.875;
  }
  .reason__list {
    gap: var(--sz-24);
  }
  .reason__item {
    border-radius: var(--sz-8);
    padding: var(--sz-20) var(--sz-20);
    display: grid;
    grid-template-areas: "label image" "desc image";
    grid-template-columns: 1fr var(--sz-578);
    align-items: center;
    gap: 0 var(--sz-44);
  }
  .reason__label {
    grid-area: label;
    font-size: var(--sz-32);
    line-height: 1.125;
    background: url(../images/pic-reason-idx1.webp) no-repeat center left/var(--sz-72);
    padding-left: var(--sz-77);
    height: var(--sz-75);
    margin-bottom: var(--sz-16);
  }
  .reason__item:nth-child(2) .reason__label {
    background-image: url(../images/pic-reason-idx2.webp);
  }
  .reason__item:nth-child(3) .reason__label {
    background-image: url(../images/pic-reason-idx3.webp);
  }
  .reason__desc {
    grid-area: desc;
    margin-bottom: 0;
    line-height: 2;
    letter-spacing: 0.02em;
  }
  .reason__image {
    grid-area: image;
  }
}
/* ==========================================
 Quality
============================================*/
.quality {
  background: url(../images/bg-quality@2x.webp) no-repeat top left/100% 100%;
  padding-top: var(--sz-64);
  padding-bottom: 0;
}

.quality__upper {
  padding-bottom: var(--sz-48);
}

.quality__heading {
  margin-bottom: var(--sz-32);
}

.quality__heading::before {
  background-image: url(../images/txt-title-quality@2x.webp);
  --size: var(--sz-178);
  aspect-ratio: 178/42;
}

.quality__lead {
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  color: #fff;
  background-color: var(--color-primary);
  padding: 0.3em;
  padding-bottom: 1.1em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.5em), calc(50% + 0.7em) calc(100% - 0.5em), 50% 100%, calc(50% - 0.7em) calc(100% - 0.5em), 0 calc(100% - 0.5em));
  margin-bottom: var(--sz-48);
}

.quality__list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-48);
}

.quality__item {
  background-color: #fff;
  padding: var(--sz-20);
  position: relative;
}

.quality__item::before {
  content: "";
  background: url(../images/pic-quality-idx1@2x.webp) no-repeat center left/contain;
  aspect-ratio: 108/136;
  width: var(--sz-108);
  position: absolute;
  top: calc(-1 * var(--sz-10));
  left: var(--sz-10);
}

.quality__item:nth-child(2):before {
  background-image: url(../images/pic-quality-idx2@2x.webp);
}

.quality__item:nth-child(3):before {
  background-image: url(../images/pic-quality-idx3@2x.webp);
}

.quality__item:nth-child(4):before {
  background-image: url(../images/pic-quality-idx4@2x.webp);
}

.quality__label {
  color: var(--color-primary);
  font-size: var(--sz-40);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.05em;
  padding-left: var(--sz-104);
  min-height: 3em;
  margin-bottom: var(--sz-16);
}

.quality__image {
  margin-bottom: var(--sz-16);
}

.quality__desc {
  margin-bottom: 0;
}

.quality__lower {
  background-color: var(--color-dark);
  padding-block: var(--sz-32) var(--sz-190);
  position: relative;
}

.quality__copy {
  color: #fff;
  font-size: var(--sz-40);
  font-weight: 900;
  text-align: center;
  margin-bottom: 0;
}

.quality__copy > span:first-child {
  font-size: var(--sz-32);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--sz-16);
}

.quality__model {
  width: var(--sz-466);
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
}

@media screen and (min-width: 992px) {
  .quality {
    background-image: url(../images/bg-quality.webp);
    background-color: var(--color-water);
    padding-block: var(--sz-80) var(--sz-40);
    position: relative;
  }
  .quality__upper {
    padding-bottom: var(--sz-40);
  }
  .quality__heading {
    margin-bottom: var(--sz-16);
  }
  .quality__heading::before {
    background-image: url(../images/txt-title-quality.webp);
    --size: var(--sz-182);
    aspect-ratio: 182/42;
    margin-bottom: var(--sz-16);
  }
  .quality__lead {
    font-size: var(--sz-32);
    line-height: 1.875;
    letter-spacing: 0.02em;
    margin-bottom: var(--sz-34);
    padding-top: 0.2em;
    padding-bottom: 0.9em;
  }
  .quality__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sz-50) var(--sz-40);
  }
  .quality__item {
    padding: var(--sz-20);
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
  }
  .quality__item::before {
    background-image: url(../images/pic-quality-idx1.webp);
    aspect-ratio: 94/118;
    width: var(--sz-94);
  }
  .quality__item:nth-child(2):before {
    background-image: url(../images/pic-quality-idx2.webp);
  }
  .quality__item:nth-child(3):before {
    background-image: url(../images/pic-quality-idx3.webp);
  }
  .quality__item:nth-child(4):before {
    background-image: url(../images/pic-quality-idx4.webp);
  }
  .quality__label {
    font-size: var(--sz-32);
    letter-spacing: 0.02em;
    padding-left: var(--sz-93);
    min-height: 3em;
    margin-bottom: var(--sz-24);
  }
  .quality__image {
    margin-bottom: var(--sz-24);
  }
  .quality__desc {
    line-height: 2;
    letter-spacing: 0.02em;
    min-height: 10em;
  }
  .quality__lower {
    padding-block: var(--sz-40) var(--sz-40);
    position: static;
  }
  .quality__copy {
    font-size: var(--sz-40);
    letter-spacing: 0.05em;
  }
  .quality__copy > span:first-child {
    line-height: 1.875;
    margin-bottom: var(--sz-8);
  }
  .quality__model {
    width: var(--sz-605);
    bottom: 0;
    left: unset;
    right: 0;
    translate: unset;
  }
}
/* ==========================================
 Greeting
============================================*/
.greeting {
  background: url(../images/bg-greeting@2x.webp) no-repeat top left/100% 100%;
  padding-top: var(--sz-64);
}

.greeting__heading {
  margin-bottom: var(--sz-32);
}

.greeting__heading::before {
  background-image: url(../images/txt-title-greeting@2x.webp);
  --size: var(--sz-128);
  aspect-ratio: 128/46;
}

.greeting__row {
  display: flex;
  flex-direction: column;
  gap: var(--sz-32);
}

.greeting__image {
  margin-bottom: var(--sz-20);
}

.greeting__caption {
  font-weight: bold;
  letter-spacing: 0.01em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sz-16);
}

.greeting__name {
  width: var(--sz-192);
}

.greeting__desc {
  letter-spacing: 0.01em;
  --mb-p: 1.5em;
}

.greeting__desc p:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 992px) {
  .with-arrow::before {
    width: var(--sz-18);
    height: var(--sz-22);
    translate: var(--sz-40) -50%;
  }
  .greeting {
    background-image: url(../images/bg-greeting.webp);
    padding-top: var(--sz-80);
  }
  .greeting__heading {
    margin-bottom: var(--sz-40);
  }
  .greeting__heading::before {
    background-image: url(../images/txt-title-greeting.webp);
    --size: var(--sz-128);
    aspect-ratio: 128/42;
    margin-bottom: var(--sz-16);
  }
  .greeting__row {
    flex-direction: row;
    gap: var(--sz-40);
  }
  .greeting__figure {
    width: var(--sz-445);
  }
  .greeting__image {
    margin-bottom: var(--sz-16);
  }
  .greeting__caption {
    font-size: var(--sz-24);
    font-weight: 800;
    letter-spacing: 0.02em;
  }
  .greeting__name {
    width: var(--sz-145);
  }
  .greeting__desc {
    line-height: 2;
    --mb-p: 2em;
  }
}
/* ==========================================
 Flow
============================================*/
.flow {
  padding-top: var(--sz-64);
}

.flow__heading {
  margin-bottom: var(--sz-24);
}

.flow__heading::before {
  background-image: url(../images/txt-title-flow@2x.webp);
  --size: var(--sz-68);
  aspect-ratio: 68/42;
}

.flow__list {
  display: flex;
  flex-direction: column;
  --gap: var(--sz-48);
  gap: var(--gap);
}

.flow__item {
  background-color: var(--color-water);
  padding: var(--sz-48) var(--sz-20);
  position: relative;
}

.flow__item:not(:first-child)::before {
  content: "";
  width: 100%;
  height: var(--gap);
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  background-color: inherit;
  clip-path: polygon(0 0, 50% calc(100% - 2px), 100% 0, 100% 100%, 0 100%);
}

.flow__item:not(:last-child)::after {
  content: "";
  width: 100%;
  height: var(--gap);
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  background-color: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 2px, 50% 100%, 0 2px);
}

.flow__item:nth-child(even) {
  background-color: var(--color-water2);
}

.flow__index {
  font-family: var(--font-barlow);
  font-size: var(--sz-40);
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #fff;
  background-color: var(--color-primary);
  padding: 0.2em;
  border-radius: 100vh;
  margin-bottom: var(--sz-32);
}

.flow__index > span {
  margin-left: 0.3em;
  font-size: 110%;
}

.flow__image {
  width: var(--sz-520);
  margin-inline: auto;
  margin-bottom: var(--sz-16);
}

.flow__label {
  font-size: var(--sz-40);
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.05em;
  margin-bottom: var(--sz-16);
}

.flow__desc {
  letter-spacing: 0.01em;
  --mb-p: 0.5em;
}

.flow__desc p:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 992px) {
  .flow {
    padding-top: var(--sz-80);
  }
  .flow__heading {
    margin-bottom: var(--sz-40);
  }
  .flow__heading::before {
    background-image: url(../images/txt-title-flow.webp);
    --size: var(--sz-71);
    aspect-ratio: 71/42;
    margin-bottom: var(--sz-16);
  }
  .flow__list {
    display: grid;
    grid-template-columns: repeat(4, auto);
    --gap: var(--sz-60);
  }
  .flow__item {
    display: grid;
    grid-template-rows: subgrid;
    align-items: center;
    grid-row: span 4;
    gap: 0;
    padding: var(--sz-40) var(--sz-40);
  }
  .flow__item:not(:first-child)::before {
    width: var(--gap);
    height: 100%;
    top: 0;
    left: unset;
    right: calc(100% - 1px);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, calc(100% - 2px) 50%);
  }
  .flow__item:not(:last-child)::after {
    width: var(--gap);
    height: 100%;
    top: 0;
    left: calc(100% - 1px);
    clip-path: polygon(0 0, 2px 0, 100% 50%, 2px 100%, 0 100%);
  }
  .flow__index {
    font-size: var(--sz-24);
    margin-bottom: var(--sz-16);
    width: var(--sz-200);
    height: var(--sz-48);
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .flow__image {
    width: 100%;
  }
  .flow__label {
    font-size: var(--sz-24);
    letter-spacing: 0.02em;
  }
  .flow__desc {
    align-self: flex-start;
    line-height: 2;
    letter-spacing: 0.02em;
  }
}
/* ==========================================
 QA
============================================*/
.qa {
  background-color: #fff;
  padding-top: var(--sz-64);
}

.qa__heading {
  margin-bottom: var(--sz-32);
}

.qa__heading::before {
  background-image: url(../images/txt-title-qa@2x.webp);
  --size: var(--sz-64);
  aspect-ratio: 64/42;
}

.qa__list {
  display: flex;
  flex-direction: column;
  gap: var(--sz-32);
}

.qa__item {
  border: var(--sz-2) solid var(--color-primary);
}

.qa__question {
  background: var(--color-primary) url(../images/icon-q@2x.webp) no-repeat top 0.625em left 0.625em/var(--sz-40);
  color: #fff;
  letter-spacing: 0.01em;
  padding: 0.5em;
  padding-inline: 2.375em 2.125em;
  position: relative;
  cursor: pointer;
}

.qa__question::after {
  content: "";
  background: url(../images/icon-plus@2x.webp) no-repeat top left/contain;
  position: absolute;
  top: 50%;
  right: 0.625em;
  translate: 0 -50%;
  width: var(--sz-40);
  aspect-ratio: 40/40;
}

:where(.open) > .qa__question::after {
  background-image: url(../images/icon-minus@2x.webp);
  aspect-ratio: 40/6;
}

.qa__answer {
  display: none;
  background: #fff url(../images/icon-a@2x.webp) no-repeat top 0.625em left 0.625em/var(--sz-40);
  letter-spacing: 0.01em;
  padding: 0.5em;
  padding-left: 2.125em;
}

@media screen and (min-width: 992px) {
  .qa {
    padding-top: var(--sz-80);
  }
  .qa__heading {
    margin-bottom: var(--sz-40);
  }
  .qa__heading::before {
    background-image: url(../images/txt-title-qa.webp);
    --size: var(--sz-64);
    aspect-ratio: 64/42;
    margin-bottom: var(--sz-16);
  }
  .qa__list {
    gap: var(--sz-24);
  }
  .qa__question {
    font-size: var(--sz-24);
    background: var(--color-primary) url(../images/icon-q.webp) no-repeat top var(--sz-13) left var(--sz-40)/var(--sz-42);
    letter-spacing: 0.02em;
    padding: var(--sz-16) var(--sz-96) var(--sz-16) var(--sz-96);
    position: relative;
    cursor: pointer;
  }
  .qa__question::after {
    background-image: url(../images/icon-plus.webp);
    width: var(--sz-32);
    aspect-ratio: 32/32;
    right: var(--sz-40);
  }
  :where(.open) > .qa__question::after {
    background-image: url(../images/icon-minus.webp);
    aspect-ratio: 32/4;
  }
  .qa__answer {
    font-size: var(--sz-24);
    background: #fff url(../images/icon-a.webp) no-repeat top var(--sz-13) left var(--sz-40)/var(--sz-42);
    letter-spacing: 0.02em;
    padding: var(--sz-16) var(--sz-40) var(--sz-16) var(--sz-96);
  }
}
/* ==========================================
 Contact
============================================*/
.contact__heading {
  margin-bottom: var(--sz-32);
}

.contact__heading::before {
  background-image: url(../images/txt-title-contact@2x.webp);
  --size: var(--sz-112);
  aspect-ratio: 112/42;
}

.contact__lead {
  margin-bottom: var(--sz-48);
}

.contact__form {
  padding-bottom: var(--sz-72);
}

/* button */
.btn-contact {
  color: #fff;
  background-color: var(--color-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-blue);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-blue);
  border-radius: 100vh;
  font-size: var(--sz-48);
  font-weight: 900;
  line-height: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--sz-16);
  padding: 0.813em 1em;
  box-shadow: var(--sz-8) var(--sz-8) 0 var(--color-dark);
  letter-spacing: 0.08em;
  width: 100%;
}

.btn-contact:hover,
.btn-contact:focus,
.btn-contact:active {
  box-shadow: none;
  translate: 0 var(--sz-8);
}

@media screen and (min-width: 992px) {
  .contact__heading {
    margin-bottom: var(--sz-24);
  }
  .contact__heading::before {
    background-image: url(../images/txt-title-contact.webp);
    --size: var(--sz-112);
    aspect-ratio: 112/42;
    margin-bottom: var(--sz-16);
  }
  .contact__lead {
    line-height: 2;
    text-align: center;
    letter-spacing: 0.02em;
    margin-bottom: var(--sz-40);
  }
  .contact__form {
    padding-bottom: var(--sz-20);
  }
  /* button */
  .btn-contact {
    font-size: var(--sz-32);
    line-height: 1.5;
    padding: var(--sz-16) var(--sz-32);
    width: var(--sz-560);
  }
  .btn-contact .with-arrow::before {
    translate: var(--sz-68) -50%;
  }
}
/* ==========================================
 Column
============================================*/
.column {
  background-color: var(--color-primary);
}

.column__heading {
  margin-bottom: var(--sz-32);
  color: #fff;
  font-weight: bold;
}

.column__heading::before {
  background-image: url(../images/txt-title-column.webp);
  --size: var(--sz-112);
  aspect-ratio: 112/42;
}

.column__item {
  overflow: hidden;
  background-color: #fff;
}

.column__item > a {
  text-decoration: none;
  color: inherit;
}

.column__head {
  aspect-ratio: 335/140;
}

.column__image {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

.column__body {
  padding: var(--sz-16) var(--sz-20);
}

.column__title {
  font-size: var(--sz-32);
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin-bottom: var(--sz-16);
}

.column__date {
  font-size: var(--sz-28);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/** slider **/
.column {
  /* arrow */
  /* dots */
}
.column .slick-slide > div {
  padding-inline: var(--sz-15);
}
.column .slick-arrow {
  z-index: 1;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.column .slick-arrow::before {
  content: "";
  font-family: "Font Awesome 6 Free";
  font-size: var(--sz-50);
  font-weight: bold;
  opacity: 1;
  color: var(--color-dark);
}
.column .slick-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 90%;
  background-color: #fff;
  border-radius: 50%;
  translate: -50% -50%;
  z-index: -1;
}
.column .slick-prev {
  left: 0;
}
.column .slick-prev::before {
  content: "\f137";
}
.column .slick-next {
  right: 0;
}
.column .slick-next::before {
  content: "\f138";
}
.column .slick-dots li {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.column .slick-dots li button {
  padding: 0;
  width: var(--sz-20);
  height: var(--sz-20);
}
.column .slick-dots li button::before {
  color: #fff;
  line-height: 1;
  width: 100%;
  height: 100%;
  font-size: var(--sz-20);
  opacity: 1;
}
.column .slick-dots li.slick-active button:before {
  opacity: 1;
  color: var(--color-yellow);
}

@media screen and (min-width: 992px) {
  .column .inner-1200 {
    width: var(--sz-1610);
  }
  .column__heading {
    margin-bottom: var(--sz-41);
    font-size: var(--sz-32);
    line-height: 1.66;
  }
  .column__heading::before {
    background-image: url(../images/txt-title-column.webp);
    --size: var(--sz-112);
    aspect-ratio: 112/42;
    margin-bottom: var(--sz-16);
  }
  .column__head {
    aspect-ratio: 380/219;
  }
  .column__body {
    height: var(--sz-110);
  }
  .column__title {
    font-size: var(--sz-16);
    margin-bottom: var(--sz-8);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .column__date {
    font-size: var(--sz-14);
  }
  /** slider **/
  .column {
    /* arrow */
    /* dots */
  }
  .column .slick-arrow::before {
    font-size: var(--sz-56);
  }
  .column .slick-dotted.slick-slider {
    margin-bottom: var(--sz-56);
  }
  .column .slick-dots {
    bottom: calc(-1 * var(--sz-39));
  }
  .column .slick-dots li button {
    width: var(--sz-16);
    height: var(--sz-16);
  }
  .column .slick-dots li button::before {
    font-size: var(--sz-16);
  }
}