@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playwrite+US+Trad:wght@100..400&display=swap");
.container-l {
  max-width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .container-l {
    max-width: 800px;
    padding-left: 40px;
    padding-right: 40px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media screen and (min-width: 1081px) {
  .container-l {
    max-width: 1100px;
    padding-left: 40px;
    padding-right: 40px;
    margin-right: auto;
    margin-left: auto;
  }
}

.container-m {
  max-width: 100%;
  padding-left: 32px;
  padding-right: 32px;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .container-m {
    max-width: 800px;
    padding-left: 120px;
    padding-right: 120px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media screen and (min-width: 1081px) {
  .container-m {
    max-width: 1100px;
    padding-left: 120px;
    padding-right: 120px;
    margin-right: auto;
    margin-left: auto;
  }
}

.container-s {
  max-width: 100%;
  padding-left: 48px;
  padding-right: 48px;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .container-s {
    max-width: 800px;
    padding-left: 160px;
    padding-right: 160px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media screen and (min-width: 1081px) {
  .container-s {
    max-width: 1100px;
    padding-left: 120px;
    padding-right: 120px;
    margin-right: auto;
    margin-left: auto;
  }
}

.speech {
  position: absolute;
  z-index: 2;
  font-weight: 600;
  font-size: 14px;
}
.speech__inner {
  position: relative;
  padding: 8px 16px;
  background-color: #6571bf;
  border-radius: 8px;
  color: #ffffff;
}
.speech__inner::after {
  content: "";
  position: absolute;
  height: 8px;
  width: 8px;
  -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
          clip-path: polygon(0 0, 50% 100%, 100% 0);
  background-color: #6571bf;
  bottom: -8px;
  right: 16px;
}

.marker {
  background: #ffd4f3;
  background: linear-gradient(270deg, #ffe0f6 0%, #c8dbfc 100%);
  padding: 0 2px;
  margin: 0 2px;
}

.check {
  width: 14px;
  margin-right: 4px;
}
@media screen and (min-width: 1081px) {
  .check {
    width: 16px;
    margin-right: 8px;
  }
}

.section__title {
  text-align: center;
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 48px;
}
@media screen and (min-width: 1081px) {
  .section__title {
    margin-bottom: 72px;
    padding-bottom: 24px;
  }
}
.section__title:after {
  content: "";
  position: absolute;
  height: 3px;
  width: 48px;
  background: rgb(255, 105, 107);
  background: linear-gradient(45deg, rgb(255, 105, 107) 0%, rgb(234, 195, 0) 100%);
  transform: translateX(-50%);
  left: 50%;
  bottom: 0;
}

.section__title-en {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  padding-bottom: 8px;
}
@media screen and (min-width: 1081px) {
  .section__title-en {
    padding-bottom: 16px;
  }
}

.section__title-main {
  font-size: 24px;
  font-weight: 700;
}
@media screen and (min-width: 1081px) {
  .section__title-main {
    font-size: 32px;
  }
}

.list-item {
  font-size: 14px;
  position: relative;
  padding-left: 1em;
}
@media screen and (min-width: 1081px) {
  .list-item {
    font-size: 16px;
  }
}
.list-item:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 1px;
  background-color: #333;
  left: 0;
  top: 10px;
}
@media screen and (min-width: 1081px) {
  .list-item:before {
    width: 8px;
    height: 2px;
    top: 14px;
  }
}

.section__heading {
  padding-bottom: 4px;
}
.section__heading.center-left {
  text-align: center;
}
.section__heading.center-left .section__heading-inner {
  text-align: left;
}
.section__heading-inner {
  display: inline-block;
}
.section__heading-text {
  display: inline;
  text-align: left;
  border-bottom: 2px solid;
  line-height: 2;
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 4px;
}
@media screen and (min-width: 768px) {
  .section__heading-text {
    font-size: 20px;
  }
}
@media screen and (min-width: 1081px) {
  .section__heading-text {
    padding-bottom: 8px;
  }
}
.section__heading .strong {
  font-size: 20px;
  font-weight: 600;
  padding-left: 2px;
  padding-right: 2px;
}
@media screen and (min-width: 768px) {
  .section__heading .strong {
    font-size: 32px;
  }
}

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

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
}

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

ol,
ul {
  list-style: none;
  list-style-type: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

*:focus {
  outline: none;
}

.header {
  padding: 16px;
  width: 100%;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
}
.header__inner {
  max-width: 1100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .header__inner {
    padding: 0 40px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
.header__logo {
  max-width: 120px;
}
.header__nav {
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  background-color: #ff696b;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.3s ease-out;
}
.header__nav-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 1001;
  position: relative;
}
.header__nav-line {
  width: 32px;
  height: 2px;
  background-color: #333;
  transition: all 0.3s ease-in-out;
  position: absolute;
}
.header__nav-line:nth-child(1) {
  transform: translateY(-4px);
}
.header__nav-line:nth-child(2) {
  transform: translateY(4px);
}
.header__nav-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100vh;
  justify-content: center;
}
@media screen and (min-width: 1081px) {
  .header__nav-list {
    padding-bottom: 80px;
  }
}
.header__nav-item {
  text-align: center;
}
.header__nav-link {
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}
.header__nav-link:before {
  content: "";
  position: absolute;
  width: 0%;
  height: 1px;
  background-color: #ffffff;
  bottom: 0;
  transform-origin: left center;
  transition: all 0.3s;
}
.header__nav-link:hover:before {
  width: 100%;
}
.header.menu-open .header__nav {
  opacity: 1;
  visibility: visible;
}
.header.menu-open .header__nav-btn .header__nav-line {
  background-color: #ffffff;
}
.header.menu-open .header__nav-btn .header__nav-line:nth-child(1) {
  transform: rotate(25deg);
}
.header.menu-open .header__nav-btn .header__nav-line:nth-child(2) {
  transform: rotate(-25deg);
}
.header__nav-bottom {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: 100%;
  text-align: center;
  font-size: 10px;
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  bottom: 64px;
}
@media screen and (min-width: 768px) {
  .header__nav-bottom {
    bottom: 80px;
  }
}
.header__icons {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.header__icons-item {
  width: 56px;
}

.fv {
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 677px;
  background-image: url(../img/fv__sp.jpg);
  background-size: cover;
  position: relative;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .fv {
    background-position: center center;
  }
}
@media screen and (min-width: 1081px) {
  .fv {
    background-image: url(../img/fv__pc.jpg);
  }
}
.fv__main {
  padding-top: 104px;
  display: grid;
  gap: 24px;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .fv__main {
    padding-top: 200px;
  }
}
@media screen and (min-width: 1081px) {
  .fv__main {
    padding-top: 160px;
  }
}
.fv__wrap {
  max-width: 100%;
  padding-left: 32px;
  padding-right: 32px;
}
@media screen and (min-width: 1081px) {
  .fv__wrap {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
}
.fv__subtitle {
  font-size: 24px;
  font-weight: 700;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .fv__subtitle {
    font-size: 28px;
  }
}
@media screen and (min-width: 1081px) {
  .fv__subtitle {
    font-size: 40px;
  }
}
.fv__color {
  font-weight: 800;
  background: rgb(255, 105, 107);
  background: linear-gradient(45deg, rgb(255, 105, 107) 0%, rgb(234, 195, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fv__description {
  font-size: 12px;
  line-height: 1.7;
  font-weight: 500;
}
.fv__bottom {
  position: absolute;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  align-items: center;
  width: calc(100% - 64px);
}
@media screen and (min-width: 768px) {
  .fv__bottom {
    max-width: 400px;
    bottom: 80px;
  }
}
.fv__stats {
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fv__stats-item {
  width: 104px;
  height: 104px;
  border-radius: 1000px;
  background: rgb(255, 105, 107);
  background: linear-gradient(45deg, rgb(255, 105, 107) 0%, rgb(234, 195, 0) 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .fv__stats-item {
    width: 144px;
    height: 144px;
  }
}
.fv__stats-item:after {
  content: "";
  position: absolute;
  width: 104px;
  height: 104px;
  border-radius: 1000px;
  top: 4px;
  left: 4px;
  border: 2px solid #ffffff;
}
@media screen and (min-width: 768px) {
  .fv__stats-item:after {
    width: 144px;
    height: 144px;
  }
}
.fv__stats-title {
  font-size: 11px;
  font-weight: 900;
  margin-top: 6px;
  margin-bottom: 6px;
}
@media screen and (min-width: 768px) {
  .fv__stats-title {
    font-size: 16px;
    font-weight: 600;
  }
}
.fv__stats-value {
  font-family: "Open Sans", sans-serif;
  letter-spacing: 0;
}
.fv__stats-num {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .fv__stats-num {
    font-size: 56px;
  }
}
.fv__stats-label {
  font-weight: 800;
  font-size: 20px;
  margin-left: -4px;
}
@media screen and (min-width: 768px) {
  .fv__stats-label {
    font-size: 32px;
    margin-left: 0;
  }
}
.fv__stats-speech {
  left: -32px;
  top: -24px;
}
@media screen and (min-width: 768px) {
  .fv__stats-speech {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    top: -20px;
  }
}
.fv__stats-speech--inner {
  font-size: 14px;
}
.fv__stats-cross {
  width: 24px;
  height: 24px;
  position: relative;
}
.fv__stats-line {
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: #ffffff;
  top: 50%;
  left: 2px;
}
.fv__stats-line:nth-last-child(1) {
  transform: rotate(45deg);
}
.fv__stats-line:nth-last-child(2) {
  transform: rotate(-45deg);
}
.fv__cta {
  display: grid !important;
  max-width: calc(100% - 32px);
  margin-left: auto;
  margin-right: auto;
  gap: 4px;
  animation: buttonPress 2s infinite ease;
}
.fv__cta-subtitle {
  font-size: 16px;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  .fv__cta {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
}

@keyframes buttonPress {
  0% {
    transform: translateY(0px);
    box-shadow: 0 8px 0 #000;
  }
  100% {
    transform: translateY(8px);
    box-shadow: none;
  }
}
.demand {
  padding-top: 32px;
  padding-bottom: 32px;
  background-image: url(../img/demands__sp.jpg);
  background-size: cover;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .demand {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media screen and (min-width: 1081px) {
  .demand {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}
.demand__wrap {
  display: grid;
  gap: 16px;
}

.demand__text {
  color: #ffffff;
  line-height: 1.6;
}
@media screen and (min-width: 1081px) {
  .demand__text {
    font-size: 18px;
  }
}
.demand__text .marker {
  color: #333;
  margin-left: 4px;
  margin-right: 4px;
  font-weight: 600;
}
@media screen and (min-width: 1081px) {
  .demand__text .marker {
    font-size: 20px;
  }
}

.challenges {
  padding: 48px 0 48px;
  background-color: #cfcfcf;
  position: relative;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .challenges {
    padding: 80px 0 80px;
  }
}
@media screen and (min-width: 1081px) {
  .challenges {
    padding: 120px 0 120px;
  }
}
.challenges::before {
  content: "";
  position: absolute;
  height: 96px;
  width: 100%;
  -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
          clip-path: polygon(0 0, 50% 100%, 100% 0);
  background-color: #cfcfcf;
  left: 0;
  bottom: -95px;
}
@media screen and (min-width: 1081px) {
  .challenges::before {
    height: 120px;
    bottom: -119px;
  }
}
.challenges__wrap {
  text-align: center;
}
.challenges__top {
  padding: 0 16px;
}
.challenges__title {
  font-size: 20px;
  margin-bottom: 40px;
  font-weight: 600;
  position: relative;
  display: inline-block;
  text-align: left;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .challenges__title {
    margin-bottom: 56px;
  }
}
@media screen and (min-width: 1081px) {
  .challenges__title {
    font-size: 28px;
    margin-bottom: 72px;
    line-height: 1.8;
    padding-top: 0;
  }
}
.challenges__title:before {
  content: "";
  position: absolute;
  width: 40px;
  height: 56px;
  top: 0px;
  left: -56px;
  background-image: url(../img/cry.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (min-width: 1081px) {
  .challenges__title:before {
    top: 0px;
    left: -72px;
    width: 64px;
    height: 64px;
  }
}
.challenges__title:after {
  content: "";
  position: absolute;
  width: 40px;
  height: 56px;
  bottom: 0px;
  right: -56px;
  background-image: url(../img/cry.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (min-width: 1081px) {
  .challenges__title:after {
    width: 64px;
    height: 64px;
    right: -72px;
  }
}
.challenges__strongs {
  margin-top: 10px;
  font-weight: 600;
}
.challenges__strongs .strong {
  position: relative;
  font-size: 32px;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  .challenges__strongs .strong {
    font-size: 56px;
  }
}
.challenges__strongs .strong:nth-last-child(1) {
  margin-right: 4px;
}
.challenges__strongs .strong::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #6571bf;
  border-radius: 50%;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}
.challenges__list {
  display: grid;
  gap: 32px;
}
@media screen and (min-width: 1081px) {
  .challenges__list {
    gap: 32px;
  }
}
.challenges__item-text {
  padding: 16px;
  border-radius: 8px;
  background-color: #ffffff;
  position: relative;
  font-size: 14px;
  height: calc(2.7em + 32px);
  display: grid;
  align-items: center;
}
@media screen and (min-width: 1081px) {
  .challenges__item-text {
    font-size: 18px;
  }
}
.challenges__item-text::after {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
          clip-path: polygon(0 0, 50% 100%, 100% 0);
  background-color: #ffffff;
  bottom: -10px;
}
@media screen and (min-width: 768px) {
  .challenges__item {
    width: 40%;
    font-size: 16px;
  }
  .challenges__item:nth-child(odd) {
    margin-left: 10%;
  }
  .challenges__item:nth-child(even) {
    margin-left: 50%;
    margin-top: -80px;
  }
  .challenges__item:nth-child(3) {
    margin-top: -80px;
  }
}
.challenges__item-img {
  display: flex;
  margin: 28px 16px 0;
}
.challenges__item-img img {
  width: 80px;
  height: 80px;
}
@media screen and (min-width: 768px) {
  .challenges__item-img img {
    width: 160px;
    height: 160px;
  }
}
.challenges__item:nth-child(odd) .challenges__item-text::after {
  left: 51px;
}
@media screen and (min-width: 768px) {
  .challenges__item:nth-child(odd) .challenges__item-text::after {
    left: 92px;
  }
}
.challenges__item:nth-child(odd) .challenges__item-img {
  flex-direction: row;
}
.challenges__item:nth-child(even) .challenges__item-text::after {
  right: 51px;
}
@media screen and (min-width: 768px) {
  .challenges__item:nth-child(even) .challenges__item-text::after {
    right: 92px;
  }
}
.challenges__item:nth-child(even) .challenges__item-img {
  flex-direction: row-reverse;
}
.challenges__bottom {
  background-image: url(../img/challenge.jpg);
  width: 100%;
  height: 200px;
  background-size: cover;
  margin-top: 40px;
  border-radius: 8px;
  position: relative;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .challenges__bottom {
    margin-top: 56px;
  }
}
@media screen and (min-width: 1081px) {
  .challenges__bottom {
    height: 320px;
    margin-top: 120px;
  }
}
.challenges__bottom:before {
  content: "";
  position: absolute;
  width: 80px;
  height: 96px;
  background-image: url(../img/mixedup.png);
  background-repeat: no-repeat;
  background-size: contain;
  top: -48px;
  left: 48px;
}
@media screen and (min-width: 1081px) {
  .challenges__bottom:before {
    width: 160px;
    height: 180px;
    left: 160px;
    top: -72px;
  }
}

.solution {
  background-color: #eeeeee;
  padding-top: 96px;
  padding-bottom: 48px;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .solution {
    padding-top: 120px;
    padding-bottom: 80px;
  }
}
@media screen and (min-width: 1081px) {
  .solution {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

.solution__wrap {
  margin-top: 24px;
  padding: 24px 16px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 8px solid #6571bf;
  border-radius: 16px;
}
@media screen and (min-width: 768px) {
  .solution__wrap {
    margin-top: 80px;
    padding: 48px 32px;
    max-width: 480px;
    margin-right: auto;
    margin-left: auto;
  }
}

.solution__title {
  font-size: 18px;
  margin-bottom: 28px;
}
@media screen and (min-width: 1081px) {
  .solution__title {
    font-size: 24px;
    margin-bottom: 48px;
  }
}

.solution__speech {
  display: inline-block;
  margin-bottom: 16px;
}

.solution__heading {
  margin-bottom: 32px;
}
.solution__heading-last {
  padding-top: 4px;
  display: inline-block;
  font-weight: 600;
}

.solution__list {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
}
@media screen and (min-width: 1081px) {
  .solution__list {
    margin-bottom: 48px;
    gap: 20px;
  }
}
.solution__list .check {
  display: inline-block;
}

.solution__item {
  font-size: 14px;
  display: flex;
  flex-shrink: 1;
}
@media screen and (min-width: 1081px) {
  .solution__item {
    font-size: 16px;
  }
}

.solution__appeal {
  font-weight: 600;
}
@media screen and (min-width: 1081px) {
  .solution__appeal {
    font-size: 20px;
  }
}

.campaign {
  width: 100%;
  padding-top: 48px;
  padding-bottom: 48px;
  background: rgb(255, 105, 107);
  background: linear-gradient(45deg, rgb(255, 105, 107) 0%, rgb(234, 195, 0) 100%);
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .campaign {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media screen and (min-width: 1081px) {
  .campaign {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}
.campaign__long {
  padding-bottom: 80px;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .campaign__long {
    padding-bottom: 120px;
  }
}
@media screen and (min-width: 1081px) {
  .campaign__long {
    padding-bottom: 160px;
  }
}
.campaign__heading {
  text-align: center;
  margin-bottom: 72px;
}
.campaign__heading-inner {
  font-size: 24px;
  font-weight: 800;
  position: relative;
  background: rgb(255, 105, 107);
  background: linear-gradient(45deg, rgb(255, 105, 107) 0%, rgb(234, 195, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (min-width: 1081px) {
  .campaign__heading-inner {
    font-size: 32px;
  }
}
.campaign__heading-inner::before, .campaign__heading-inner::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  top: 4px;
}
@media screen and (min-width: 1081px) {
  .campaign__heading-inner::before, .campaign__heading-inner::after {
    width: 32px;
    height: 32px;
  }
}
.campaign__heading-inner::before {
  background-image: url(../img/w.png);
  left: -24px;
}
@media screen and (min-width: 1081px) {
  .campaign__heading-inner::before {
    left: -32px;
  }
}
.campaign__heading-inner::after {
  background-image: url(../img/w2.png);
  right: -20px;
}
@media screen and (min-width: 1081px) {
  .campaign__heading-inner::after {
    right: -32px;
  }
}
.campaign__wrap {
  background-color: #ffffff;
  padding: 32px 16px;
  border-radius: 8px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 1081px) {
  .campaign__wrap {
    padding: 32px 48px;
  }
}
.campaign__offer {
  margin-bottom: 16px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: flex-end;
}
.campaign__offer .speech {
  top: -48px;
}
.campaign__ja {
  margin-right: 4px;
  padding-bottom: 4px;
}
.campaign__price {
  font-family: "Open Sans", sans-serif;
}
.campaign__num {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}
.campaign-label {
  font-size: 24px;
  font-weight: 800;
  margin-left: -4px;
}
.campaign__button {
  background-color: #444;
  padding: 12px 16px;
  width: 100%;
  border-radius: 8px;
  color: #ffffff;
  text-align: center;
  display: inline-block;
  position: relative;
  transition: all 0.1s ease;
  transform: translateY(-8px);
  box-shadow: 0 8px 0 #000;
  transform-origin: center top;
}
.campaign__button:hover {
  transform: translateY(0);
  box-shadow: none;
}
.campaign__title {
  font-weight: 600;
  font-size: 16px;
}
@media screen and (min-width: 1081px) {
  .campaign__title {
    font-size: 20px;
  }
}
.campaign__arrow {
  max-width: 48px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
}
@media screen and (min-width: 1081px) {
  .campaign__arrow {
    max-width: 62px;
  }
}

.reasons {
  padding-top: 16px;
  position: relative;
  padding-bottom: 120px;
  background-color: #fafafa;
}
@media screen and (min-width: 1081px) {
  .reasons {
    padding-top: 24px;
    padding-bottom: 200px;
  }
}
.reasons:before {
  content: "";
  position: absolute;
  width: 144px;
  height: 144px;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  top: -40px;
  background-color: #fafafa;
}
@media screen and (min-width: 1081px) {
  .reasons:before {
    width: 280px;
    height: 280px;
    top: -72px;
  }
}
.reasons__wrap {
  position: relative;
  z-index: 1;
}
.reasons__img {
  width: 100%;
  height: 144px;
  border-radius: 8px;
  background-size: cover;
  position: relative;
}
@media screen and (min-width: 1081px) {
  .reasons__img {
    grid-area: img;
    height: 240px;
    width: 560px;
  }
}
@media screen and (min-width: 1081px) {
  .reasons__item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    grid-template-areas: "img content";
    align-items: center;
  }
}
.reasons__item .reasons__text-box {
  grid-area: content;
}
@media screen and (min-width: 1081px) {
  .reasons__item:nth-child(even) {
    grid-template-areas: "content img";
  }
}
.reasons__item:nth-child(1) .reasons__img {
  background-image: url(../img/reason1.jpg);
}
.reasons__item:nth-child(2) .reasons__img {
  background-image: url(../img/reason2.jpg);
}
.reasons__item:nth-child(3) .reasons__img {
  background-image: url(../img/reason3.jpg);
}
.reasons__item:nth-child(4) .reasons__img {
  background-image: url(../img/reason4.jpg);
}

.reasons__list {
  display: grid;
  gap: 48px;
}
@media screen and (min-width: 1081px) {
  .reasons__list {
    gap: 72px;
  }
}

.reasons__subtitle {
  font-family: "Playwrite US Trad", cursive;
  background: rgb(255, 105, 107);
  background: linear-gradient(45deg, rgb(255, 105, 107) 0%, rgb(234, 195, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 24px;
  position: absolute;
  left: 8px;
  top: -24px;
}
@media screen and (min-width: 1081px) {
  .reasons__subtitle {
    font-size: 40px;
    top: -40px;
    padding-right: 12px;
    left: 16px;
  }
}

.reasons__title {
  font-weight: 600;
}
@media screen and (min-width: 1081px) {
  .reasons__title {
    font-size: 24px;
  }
}

.reasons__desc {
  font-size: 14px;
}
@media screen and (min-width: 1081px) {
  .reasons__desc {
    font-size: 16px;
  }
}

.reasons__text-box {
  gap: 8px;
  display: grid;
  margin-top: 16px;
}
@media screen and (min-width: 1081px) {
  .reasons__text-box {
    grid-auto-rows: minmax(min-content, max-content);
    gap: 16px;
  }
}

.reasons__caption {
  display: block;
  font-size: 10px;
  margin-top: 8px;
}
@media screen and (min-width: 1081px) {
  .reasons__caption {
    font-size: 14px;
    margin-top: 12px;
  }
}

.skills {
  position: relative;
  padding-top: 56px;
  padding-bottom: 56px;
  background: #ffd4f3;
  background: linear-gradient(180deg, #ffe0f6 0%, #c8dbfc 100%);
}
@media screen and (min-width: 1081px) {
  .skills {
    padding-top: 80px;
    padding-bottom: 120px;
  }
}
.skills:before {
  content: "";
  position: absolute;
  top: -88px;
  left: 0;
  width: 100%;
  height: 88px;
  background-image: url(../img/section-hr.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
@media screen and (min-width: 1081px) {
  .skills:before {
    height: 160px;
    top: -160px;
  }
}
.skills__detail {
  font-size: 16px;
  font-weight: 600;
  display: inline;
  color: #6571bf;
}
@media screen and (min-width: 1081px) {
  .skills__detail {
    font-size: 18px;
  }
}

.skills__title {
  font-size: 24px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 1081px) {
  .skills__title {
    font-size: 32px;
  }
}

.skills__box {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}
@media screen and (min-width: 1081px) {
  .skills__box {
    gap: 32px;
    margin-top: 48px;
  }
}

.skills__category {
  padding: 16px;
  border-radius: 8px;
  background-color: #ffffff;
  display: grid;
  gap: 16px;
}
@media screen and (min-width: 1081px) {
  .skills__category {
    padding: 24px 32px;
  }
}

.skills__category-title {
  font-weight: 600;
  font-size: 18px;
}
@media screen and (min-width: 1081px) {
  .skills__category-title {
    font-size: 20px;
  }
}

.skills__list {
  display: grid;
  gap: 8px;
}

.voices {
  padding-top: 32px;
  padding-bottom: 48px;
  background-color: #eeeeee;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .voices {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media screen and (min-width: 1081px) {
  .voices {
    padding-top: 80px;
    padding-bottom: 120px;
  }
}
.voices__wrap {
  display: grid;
  gap: 32px;
}

@media screen and (min-width: 1081px) {
  .voices__item {
    width: 70%;
  }
}
.voices__item:nth-child(odd) .voices__text::after {
  left: 96px;
}
@media screen and (min-width: 1081px) {
  .voices__item:nth-child(even) {
    margin-left: 30%;
  }
}
.voices__item:nth-child(even) .voices__text::after {
  right: 96px;
}
.voices__item:nth-child(even) .voices__subtitle {
  text-align: right;
}
.voices__item:nth-child(even) .voices__profile {
  flex-direction: row-reverse;
}

.voices__subtitle {
  margin-bottom: 8px;
}
.voices__subtitle-inner {
  background: rgb(255, 105, 107);
  background: linear-gradient(45deg, rgb(255, 105, 107) 0%, rgb(234, 195, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
}
@media screen and (min-width: 1081px) {
  .voices__subtitle-inner {
    font-size: 28px;
  }
}

.voices__quote {
  font-weight: 800;
  margin-bottom: 24px;
}
@media screen and (min-width: 1081px) {
  .voices__quote {
    font-size: 24px;
  }
}

.voices__text {
  padding: 16px;
  background-color: #ffffff;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 28px;
  position: relative;
  line-height: 2;
}
.voices__text .strong {
  background: #ffd4f3;
  background: linear-gradient(270deg, #ffe0f6 0%, #c8dbfc 100%);
  padding: 0 2px;
  margin: 0 2px;
}
@media screen and (min-width: 1081px) {
  .voices__text {
    font-size: 16px;
    padding: 24px;
  }
}
.voices__text:after {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background-color: #ffffff;
  bottom: -10px;
}

.voices__profile {
  display: flex;
  gap: 16px;
  align-items: center;
}
@media screen and (min-width: 1081px) {
  .voices__profile {
    gap: 24px;
  }
}

.voices__portrait {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}
@media screen and (min-width: 1081px) {
  .voices__portrait {
    width: 200px;
    height: 200px;
  }
}

.voices__author-name {
  margin-bottom: 8px;
  font-size: 14px;
}
@media screen and (min-width: 1081px) {
  .voices__author-name {
    font-size: 16px;
  }
}
.voices__author-type {
  background: rgb(255, 105, 107);
  background: linear-gradient(45deg, rgb(255, 105, 107) 0%, rgb(234, 195, 0) 100%);
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
}
@media screen and (min-width: 1081px) {
  .voices__author-type {
    font-size: 14px;
  }
}

.voices__appeal-top {
  margin-bottom: 48px;
}
@media screen and (min-width: 1081px) {
  .voices__appeal-top {
    margin-bottom: 72px;
  }
}
.voices__appeal-bottom {
  margin-top: 48px;
}
@media screen and (min-width: 1081px) {
  .voices__appeal-bottom {
    margin-top: 72px;
  }
}

.plans {
  padding-top: 48px;
  padding-bottom: 56px;
  background-color: #eeeeee;
}
@media screen and (min-width: 1081px) {
  .plans {
    padding-top: 80px;
    padding-bottom: 120px;
  }
}
.plans .border {
  border-bottom: 1px solid;
  font-weight: bold;
  padding: 3px 0;
  line-height: 1.7;
}

.plan-1 .plans__box {
  background-color: #fcf6f6;
}
.plan-1 .plans__name-inner {
  color: #6571bf;
  border: 1px solid;
  border-radius: 100px;
}

.plan-2 .plans__box {
  background: #ffd4f3;
  background: linear-gradient(180deg, #ffe0f6 0%, #c8dbfc 100%);
}
.plan-2 .plans__name-inner {
  color: #ffffff;
  border-radius: 100px;
  background-color: #6571bf;
}

.plans__box {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: 10px;
  padding: 16px;
  flex-grow: 1;
}
@media screen and (min-width: 1081px) {
  .plans__box {
    padding: 24px;
  }
}

.plans__wrap {
  display: grid;
  gap: 24px;
}
@media screen and (min-width: 1081px) {
  .plans__wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

.plans__item {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 24px 16px 32px;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1081px) {
  .plans__item {
    padding: 32px 24px 40px;
  }
}

.plans__name {
  text-align: center;
  margin-bottom: 24px;
}
@media screen and (min-width: 1081px) {
  .plans__name {
    font-size: 20px;
  }
}
.plans__name-inner {
  display: inline-block;
  padding: 4px 16px;
  font-weight: 600;
}

.plans__price {
  display: flex;
  font-weight: 600;
  font-size: 14px;
  gap: 8px;
  align-items: center;
  color: #6571bf;
}
.plans__price .num {
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  font-size: 28px;
}
@media screen and (min-width: 1081px) {
  .plans__price .num {
    font-size: 32px;
  }
}
.plans__price .month {
  font-weight: 600;
  width: 40px;
  text-align: center;
  border: 2px solid;
  height: 24px;
  line-height: 20px;
}
.plans__price .tax {
  font-size: 12px;
}

.plans__features {
  display: grid;
  gap: 8px;
}
@media screen and (min-width: 1081px) {
  .plans__features {
    gap: 12px;
  }
}

.plans__feature {
  display: flex;
  font-size: 14px;
}
@media screen and (min-width: 1081px) {
  .plans__feature {
    font-size: 16px;
  }
}
.plans__feature .check {
  width: 14px;
}

.plans__common {
  position: relative;
  display: grid;
  gap: 16px;
  margin-top: 24px;
  padding: 16px;
  background-color: #cfcfcf;
  overflow: hidden;
  border-radius: 8px;
}
@media screen and (min-width: 1081px) {
  .plans__common {
    padding: 24px;
    gap: 24px;
    margin-top: 32px;
  }
}

.plans__common-title {
  font-weight: 600;
}
@media screen and (min-width: 1081px) {
  .plans__common-title {
    font-size: 20px;
  }
}

.plans__common-list {
  display: grid;
  gap: 8px;
}
.plans__common-list .list-item::before {
  background-color: #6571bf;
}

.faq {
  padding-top: 32px;
  padding-bottom: 48px;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .faq {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media screen and (min-width: 1081px) {
  .faq {
    padding-top: 80px;
    padding-bottom: 120px;
  }
}

.faq__list {
  display: grid;
  gap: 16px;
}

.faq__item {
  border-radius: 8px;
  background: #ffd4f3;
  background: linear-gradient(90deg, #ffe0f6 0%, #c8dbfc 100%);
  padding: 16px;
}
.faq__item.show .faq__answer {
  height: auto;
  opacity: 1;
  margin-top: 16px;
}
.faq__item.show .faq__btn-line:nth-child(2) {
  transform: translate(-50%, -50%) rotate(0);
}

.faq__title {
  display: grid;
  gap: 12px;
  align-items: center;
  grid-template-columns: 28px auto;
}

.faq__btn {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid;
  cursor: pointer;
}

.faq__btn-line {
  position: absolute;
  height: 1px;
  width: 12px;
  background-color: #333;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s;
}
.faq__btn-line:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%);
}
.faq__btn-line:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.faq__question {
  font-weight: 600;
}
@media screen and (min-width: 1081px) {
  .faq__question {
    font-size: 18px;
  }
}

.faq__answer {
  font-size: 14px;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out;
  line-height: 1.6;
}
@media screen and (min-width: 1081px) {
  .faq__answer {
    font-size: 16px;
  }
}

.footer {
  padding-top: 24px;
  padding-bottom: 24px;
  background-color: #eeeeee;
}
@media screen and (min-width: 1081px) {
  .footer {
    padding-top: 56px;
    padding-bottom: 32px;
  }
}

.footer__logo {
  width: 120px;
}

.footer__list {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  margin-top: 16px;
}
@media screen and (min-width: 1081px) {
  .footer__list {
    margin-top: 24px;
    margin-bottom: 24px;
  }
}

.footer__item {
  font-size: 12px;
}

.copyright {
  font-size: 10px;
  font-family: "Open Sans", sans-serif;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.05em;
}/*# sourceMappingURL=style.css.map */