html,
body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

ul {
  list-style: none;
}

body {
  line-height: 1;
}

.sp {
  display: none;
}

html,
body {
  height: auto;
}

body {
  position: relative;
}

/* 背景の紫位置を変える */
body::before {
  content: "";
  position: absolute;
  z-index: -10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 138.09vw;
  background: url("../images/purple_background-PC.webp") no-repeat;
  background-position: -4.2vw 43.4vw;
  background-size: 105.2vw auto;
  pointer-events: none;
  inset: 0;
}

@media (width <= 767px) {
  body::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 543.84vw;
    background: url("../images/purple_background-SP.webp") no-repeat;
    background-position: -10vw 92.8vw;
    background-size: 164.1vw auto;
    pointer-events: none;
    inset: 0;
  }
}

@media (width <= 767px) {
  .pc {
    display: none;
  }
}

.concept {
  padding-bottom: 7.4vw;
}

.concept__catch-en {
  display: flex;
  position: absolute;
  z-index: 3;
  flex-direction: column;
  gap: min(0.27vw, 4px);
}

.concept__catch-enLine {
  display: inline-block;
  position: relative;
  padding: 0 2.08vw 0 8.33vw;
  overflow: hidden;
  border-radius: 0 5px 5px 0;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: calc(5vw * var(--text-scale));
  font-weight: 700;
  line-height: 1.05;
}

.concept__catch-enLine::before,
.concept__catch-enLine::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  width: 50%;
  height: 100%;
  background: #826190;
}

.concept__catch-enLine::before {
  left: 0;
  transform: translateX(-100%);
  animation: slideInLeft 0.7s ease-out forwards;
}

.concept__catch-enLine::after {
  right: 0;
  transform: translateX(100%);
  animation: slideInRight 0.7s ease-out forwards;
}

.concept__catch-enLine.short::before,
.concept__catch-enLine.short::after {
  animation-delay: 0.5s;
}

@keyframes slideInLeft {
  to {
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  to {
    transform: translateX(0);
  }
}

.concept__catch-enLine.short {
  padding: 0 3.05vw 0 8.33vw;
}

.concept__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6.44vw;
  padding: 5vw 4.7vw 1.01vw 8.33vw;
}

.concept__copy {
  display: flex;
  flex-direction: column;
  gap: 1.1vw;
  padding-top: 11vw;
}

.concept__catch-ja {
  color: #826190;
  font-size: calc(3.88vw * var(--text-scale));
  font-weight: 700;
  line-height: 1.6;
}

.concept__lead {
  color: #000;
  font-size: calc(1.38vw * var(--text-scale));
  font-weight: 700;
  line-height: 1.7;
}

.concept__visual {
  position: relative;
  width: 48.5vw;
  height: 39vw;
}

.concept__img-kid {
  position: absolute;
  z-index: 1;
  top: -2.5vw;
  right: -3.7vw;
  width: 28.3vw;
  height: 41.8vw;
  object-fit: cover;
  object-position: center;
}

.concept__img-man {
  position: absolute;
  z-index: 2;
  right: 19.7vw;
  bottom: -0.3vw;
  width: 28.57vw;
  height: 37vw;
  object-fit: cover;
  object-position: center;
}

@media (width <= 767px) {
  .concept {
    padding-bottom: 16.37vw;
  }

  .concept__catch-en {
    gap: min(1.53vw, 6px);
  }

  .concept__catch-enLine {
    padding: 0 1.53vw 0 5.12vw;
    border-radius: 0 3px 3px 0;
    font-size: 7.17vw;
    line-height: 1.2;
  }

  .concept__catch-enLine.short {
    padding: 0 2.05vw 0 5.12vw;
  }

  .concept__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 3.84vw;
    padding: 25.12vw 5vw 1.01vw 5.12vw;
  }

  .concept__copy {
    gap: 4.1vw;
    padding-top: 0;
  }

  .concept__catch-ja {
    font-size: 8.2vw;
  }

  .concept__lead {
    font-size: 4.6vw;
  }

  .concept__visual {
    width: 92vw;
    height: 75vw;
    padding-left: 3vw;
  }

  .concept__img-kid {
    position: absolute;
    z-index: 1;
    top: -5vw;
    right: -7.3vw;
    width: 54vw;
    height: 78.5vw;
    object-fit: cover;
  }

  .concept__img-man {
    position: absolute;
    z-index: 2;
    right: 37.6vw;
    bottom: 1.3vw;
    width: 54.44vw;
    height: 70.49vw;
    object-fit: cover;
  }
}

.iwate {
  display: flex;
  width: 83.3vw;
  padding-bottom: 8.33vw;
  margin: 0 auto;
  border-radius: 5px;
}

.iwate__img {
  display: block;
  width: 35.55vw;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.iwate__img.sp {
  display: none;
}

.iwate__body {
  display: flex;
  flex-direction: column;
  padding: 2.15vw 2.77vw 2.98vw;
  background-color: #fff;
  text-align: center;
}

.iwate__title {
  color: #826190;
  font-family: Poppins, sans-serif;
  font-size: calc(3.88vw * var(--text-scale));
  font-weight: 700;
  line-height: 1.8;
}

.iwate__contents {
  display: grid;
  gap: 1.5vw;
}

.iwate__heading {
  color: #000;
  font-family: Poppins, sans-serif;
  font-size: 1.75vw;
  font-weight: 700;
  line-height: 1.9;
}

.iwate__text {
  color: #000;
  font-family: Poppins, sans-serif;
  font-size: calc(1.2vw * var(--text-scale));
  font-weight: 500;
  line-height: 1.7;
  text-align: start;
}

@media (width <= 767px) {
  .iwate {
    flex-direction: column;
    width: 89.74vw;
    padding-bottom: 9.9vw;
  }

  .iwate__img.pc {
    display: none;
  }

  .iwate__img.sp {
    display: block;
    width: 89.74vw;
    height: 54.87vw;
  }

  .iwate__body {
    padding: min(2.05vw, 8px) 5.12vw 8.2vw;
  }

  .iwate__title {
    font-size: 8.2vw;
  }

  .iwate__contents {
    gap: 3vw;
  }

  .iwate__heading {
    font-size: 5.12vw;
    line-height: 1.78;
  }

  .iwate__text {
    font-size: 4.1vw;
    line-height: 1.59;
  }
}

.value {
  width: 83.3vw;
  padding-bottom: 8.8vw;
  margin: 0 auto;
}

.value__inner {
  display: flex;
  flex-direction: column;
  gap: 2.7vw;
  width: 100%;
}

.value__card {
  display: flex;
  padding: 3.88vw 0 3.88vw 3.88vw;
  background: #fff;
  border-radius: 20px;
}

.value__01 {
  gap: 8.54vw;
}

.value__02 {
  gap: 6.66vw;
}

.value__03 {
  gap: 2.9vw;
}

.value__img {
  display: block;
  width: 40.2vw;
  height: 28.26vw;
  border-radius: 5px;
  object-fit: cover;
  object-position: center;
}

.value__body {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
}

.value__num {
  padding-bottom: min(0.55vw, 8px);
  text-align: center;
}

.value__no {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.77vw;
  height: 2.77vw;
  background: #826190;
  border-radius: 999px;
  color: #fff;
  font-size: calc(1.38vw * var(--text-scale));
  font-weight: 500;
  line-height: 1.5;
}

.value__title {
  padding-bottom: 2.77vw;
  color: #282828;
  font-size: calc(3.75vw * var(--text-scale));
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.value__text {
  color: #282828;
  font-size: calc(1.38vw * var(--text-scale));
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}

.value__illust-01 {
  position: absolute;
  top: 17.8vw;
  left: 19vw;
  width: 13.8vw;
  height: auto;
  pointer-events: none;
}

.value__illust-02 {
  position: absolute;
  top: 18.8vw;
  right: -11.4vw;
  width: 8.99vw;
  height: auto;
  pointer-events: none;
}

.value__illust-03 {
  position: absolute;
  right: -7.4vw;
  bottom: -4vw;
  width: 7.88vw;
  height: auto;
  pointer-events: none;
}

@media (width <= 767px) {
  .value {
    width: 89.7vw;
    padding-bottom: 23.3vw;
  }

  .value__inner {
    gap: 6.15vw;
  }

  .value__card {
    display: flex;
    flex-direction: column;
    gap: 5.12vw;
    box-sizing: border-box;
    height: 115.89vw;
    padding: 5vw;
  }

  .value__body {
    position: relative;
    flex: 1;
    justify-content: flex-start;
  }

  .value__03 {
    padding-bottom: 8.7vw;
  }

  .value__img {
    width: 80vw;
    height: 59.48vw;
    border-radius: 3px;
    flex-shrink: 0;
  }

  .value__num {
    padding-bottom: min(2.05vw, 8px);
  }

  .value__no {
    width: 10.25vw;
    height: 10.25vw;
    font-size: 5.12vw;
  }

  .value__title {
    padding-bottom: 4.1vw;
    font-size: 8.2vw;
  }

  .value__text {
    font-size: 4.1vw;
  }

  .value__illust-01 {
    top: 32vw;
    left: 67vw;
    width: 21.59vw;
  }

  .value__illust-02 {
    top: 34vw;
    right: -8vw;
    width: 13.36vw;
  }

  .value__illust-03 {
    right: -7vw;
    bottom: -9vw;
    width: 12.2vw;
  }
}