/*----------------------------------------service----------------------------------------*/
#service {
  padding: var(--content-padding) var(--side-padding) 0;
}

@media screen and (max-width: 768px) {
  #service {
    padding: var(--content-padding) 0 0;
  }
}

/********** about **********/
.about {
  position: relative;
  padding: 0 10%;
  margin: 0 auto calc(var(--content-margin) / 4);
}

.about:before,
.about:after {
  position: absolute;
  top: 40%;
  left: 0;
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  font-size: 12em;
  color: #d6d6d6;
  opacity: 0;
  transition: ease-in 1s 0s;
}

.about:before {
  content: "(";
  left: -0.2em;
}

.about.animated:before {
  opacity: 1;
  left: 0;
}

.about:after {
  content: ")";
  left: inherit;
  right: -0.2em;
}

.about.animated:after {
  opacity: 1;
  right: 0;
}

.about .img {
  width: 13%;
  margin: 0 10% 0 0;
  opacity: 0;
  transition: ease-in 1s 0s;
}

.about.animated .img {
  opacity: 1;
}

.about ul {}

.about ul li {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  opacity: 0;
  transition: ease-in 0.5s 0.5s;
  z-index: 0;
}

.about ul.animated li {
  opacity: 1;
}

.about ul li:nth-child(1) {
  transition: ease-in 0.5s 1s;
}

.about ul li:nth-child(2) {
  transition: ease-in 0.5s 1.1s;
}

.about ul li:nth-child(3) {
  transition: ease-in 0.5s 1.2s;
}

.about ul li:nth-child(4) {
  transition: ease-in 0.5s 1.3s;
}

.about ul li:nth-child(5) {
  transition: ease-in 0.5s 1.4s;
}

.about ul li p {
  position: relative;
  display: inline;
}

.about ul li .marker_yellow:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(transparent 20%, #ffff00 60%);
}

.about ul.animated li .marker_yellow:before {
  width: 100%;
}

.about ul li:nth-child(1) .marker_yellow:before {
  transition: ease-in 0.5s 1.2s;
}

.about ul li:nth-child(2) .marker_yellow:before {
  transition: ease-in 0.5s 1.3s;
}

.about ul li:nth-child(3) .marker_yellow:before {
  transition: ease-in 0.5s 1.4s;
}

.about ul li:nth-child(4) .marker_yellow:before {
  transition: ease-in 0.5s 1.5s;
}

.about ul li:nth-child(5) .marker_yellow:before {
  transition: ease-in 0.5s 1.6s;
}

.about .check {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0.4em 0.5em 0 0;
  border: 1px solid var(--gray-deep);
  vertical-align: -3px;
  opacity: 0.9;
}

.about .check:before {
  -webkit-transition: width 0.05s linear 1s;
  transition: width 0.05s linear 1s;
  -webkit-transition: opacity 0.05s linear 1s;
  transition: opacity 0.05s linear 1s;
  --rotation: 45deg;
  --translate-left: 3px;
  --translate-top: 3px;
}

.about .check:after {
  -webkit-transition: width 0.1s linear 1.05s;
  transition: width 0.1s linear 1.05s;
  -webkit-transition: opacity 0.1s linear 1.05s;
  transition: opacity 0.1s linear 1.05s;
  --rotation: -45deg;
  --translate-top: -1px;
  --translate-left: 14px;
}

.about .check:after,
.about .check:before {
  content: "";
  position: absolute;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  width: 0;
  border: 2px solid var(--main-blue);
  -webkit-transform: rotate(var(--rotation)) translateX(var(--translate-top)) translateY(var(--translate-left));
  transform: rotate(var(--rotation)) translateX(var(--translate-top)) translateY(var(--translate-left));
  border-radius: 1px;
  opacity: 0;
}

.about ul.animated li .check:before {
  width: 11px;
  opacity: 1;
}

.about ul.animated li .check:after {
  width: 18px;
  opacity: 1;
}

.about ul li:nth-child(1) .check:before {
  transition: ease-in 0.5s 1s;
}

.about ul li:nth-child(2) .check:before {
  transition: ease-in 0.5s 1.1s;
}

.about ul li:nth-child(3) .check:before {
  transition: ease-in 0.5s 1.2s;
}

.about ul li:nth-child(4) .check:before {
  transition: ease-in 0.5s 1.3s;
}

.about ul li:nth-child(5) .check:before {
  transition: ease-in 0.5s 1.4s;
}

.about ul li:nth-child(1) .check:before {
  transition: ease-in 0.5s 1.05s;
}

.about ul li:nth-child(2) .check:after {
  transition: ease-in 0.5s 1.15s;
}

.about ul li:nth-child(3) .check:after {
  transition: ease-in 0.5s 1.25s;
}

.about ul li:nth-child(4) .check:after {
  transition: ease-in 0.5s 1.35s;
}

.about ul li:nth-child(5) .check:after {
  transition: ease-in 0.5s 1.45s;
}

@keyframes wobble {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
  }

  40% {
    -webkit-transform: scale(1.1, 0.9) rotate(5deg);
    transform: scale(1.1, 0.9) rotate(5deg);
  }

  70% {
    -webkit-transform: scale(0.9, 1.1) rotate(-3deg);
    transform: scale(0.9, 1.1) rotate(-3deg);
  }

  80% {
    -webkit-transform: scale(1.05, 0.95) rotate(1deg);
    transform: scale(1.05, 0.95) rotate(1deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
  }
}

@media screen and (max-width: 768px) {
  .about {
    padding: 0 5%;
  }

  .about.animated:before,
  .about.animated:after {
    opacity: 0;
  }

  .about .img {
    margin: 0 0 2em;
  }

  .about ul {
    width: 90%;
    min-width: inherit;
  }

  .about ul.animated li .marker_yellow {}
}

@media screen and (max-width: 480px) {
  .about ul {
    width: 100%;
  }
}

/********** voice **********/
#voice {
  position: relative;
  padding: calc(var(--content-margin) / 2) 0;
  margin: calc(var(--content-margin)) auto 0;
  background: var(--gray-light);
}

#voice .triangle {
  position: absolute;
  top: -5em;
  left: 0;
  right: 0;
  margin: auto;
  width: 30%;
  max-width: 150px;
  height: 20vw;
  max-height: 100px;
  fill: var(--main-blue);
}

#voice .inner {
  width: 80%;
  max-width: 700px;
}

#voice .main .text {
  color: #504f4f;
  font-size: 1.125em;
}

#voice .main h2 {
  margin: 2em 0;
  text-align: center;
}

#voice .main h2 svg {
  fill: var(--main-blue);
}

#voice .main h2 svg:nth-child(2) {
  width: 50%;
  margin: 0 auto;
}

#voice ul.list {
  --list-num: 5;
  --list-gap: 1em;
  gap: var(--list-gap);
  margin: calc(var(--content-margin) / 2) auto;
}

#voice ul.list li {
  position: relative;
  width: calc((100% / var(--list-num)) - var(--list-gap) * (var(--list-num) - 1) / var(--list-num));
  background: var(--main-blue);
  padding: 3%;
  border-radius: 99px;
}

#voice ul.list li img {
  width: 65%;
  padding: 0px 0 33.47%;
  margin: 0 auto;
}

#voice ul.list li span {
  top: 75%;
  width: auto;
  color: #fff;
  font-size: min(1.5vw, 15px);
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  #voice {
    padding: calc(var(--content-margin) / 2) var(--side-padding);
  }

  #voice .inner {
    width: 100%;
  }

  #voice .main h2 {
    margin: 5em 0;
    text-align: center;
  }

  #voice ul.list {
    --list-num: 3;
  }

  #voice ul.list li span {
    font-size: 3vw;
  }
}

/********** detail **********/
#detail {}

#detail .proposal {
  background: var(--main-blue);
  padding: 2em;
  margin: 0 auto 2em;
}

#detail .proposal h3 {
  color: #fff;
  margin: 0 auto 1em;
  text-align: center;
}

#detail .proposal h3 span {
  font-size: 2em;
}

#detail .proposal p {
  color: #fff;
  line-height: 150%;
  text-align: center;
}

#detail .whole {
  --list-num: 2;
  --list-gap: 1em;
  gap: var(--list-gap);
}

#detail .whole .box {
  --num-width: 3em;
  width: calc((100% / var(--list-num)) - var(--list-gap) * (var(--list-num) - 1) / var(--list-num));
  padding: 2em;
  background: var(--gray);
  border-radius: 3px;
  overflow: hidden;
}

#detail .whole .box .num {
  position: relative;
  width: var(--num-width);
}

#detail .whole .box .num:after {
  content: "";
  position: absolute;
  top: -5em;
  right: 0em;
  width: 150px;
  height: 300px;
  transform: rotate(20deg);
  background: var(--brown);
  z-index: 0;
}

#detail .whole .box .num img {
  position: relative;
  z-index: 1;
}

#detail .whole .box .text {
  width: calc(100% - calc(var(--num-width) * 2));
}

#detail .whole .box .text h4 {
  color: var(--brown);
  margin: 0 auto 1em;
}

#detail .whole .box .text p {}

@media screen and (max-width: 768px) {
  #detail .whole {
    padding: 0 var(--side-padding);
  }

  #detail .whole .box {
    width: 85%;
  }

  #detail .whole .box .text {
    width: calc(100% - 7em);
  }

  #detail .whole .box .num {
    width: 4em;
  }
}

/********** flow **********/
#flow {
  margin: calc(var(--content-margin)) auto 0;
  background: var(--gray-light);
  padding: calc(var(--content-margin) / 2) 0;
}

#flow .title {
  position: relative;
  width: 200px;
  padding: 5em 0em 10em;
  margin: -10em 0 0;
}

#flow h2 {
  /* top: calc(-1 * var(--content-margin) / 1.5);
  left: var(--side-padding); */
}

#flow .flow {}

#flow .flow .box {
  position: relative;
  width: 80%;
  background: #fff;
  padding: 2em 5em;
  margin: 0 auto calc(var(--content-margin) / 3);
}

#flow .flow .box span.img {
  position: absolute;
  top: 50%;
  left: -0.3em;
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  font-size: 3em;
  font-family: dnp-shuei-nshogomincho-std, sans-serif;
  color: var(--main-blue);
}

#flow .flow .box .text {}

#flow .flow .box .text h3 {
  color: var(--brown);
  font-weight: 500;
  margin: 0 auto 0.5em;
}

#flow .flow .box .text p {}

#flow .character {
  width: 30%;
  max-width: 200px;
  margin: calc(var(--content-margin) / 1) auto calc(var(--content-margin) / 3);
}

#flow .bracket {
  position: relative;
  width: 80%;
  max-width: 500px;
  color: var(--main-blue);
  font-size: 1.2em;
  padding: 2em 3em;
  margin: auto;
}

#flow .bracket:before,
#flow .bracket:after {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
}

#flow .bracket:before {
  border-left: solid 2px var(--main-blue);
  border-top: solid 2px var(--main-blue);
  top: 0;
  left: 0;
}

#flow .bracket:after {
  border-right: solid 2px var(--main-blue);
  border-bottom: solid 2px var(--main-blue);
  bottom: 0;
  right: 0;
}

@media screen and (max-width: 768px) {
  #flow h2 {
    top: calc(-1 * var(--content-margin) / 2);
  }

  #flow .flow .box {
    width: 80%;
    padding: 2em 2em;
  }

  #flow .title {
    margin: -5em 0 0;
    padding: 5em 0em 2em;
  }
}

/********** example **********/
#example {
  margin: calc(var(--content-margin)) auto 0;
}

#example .title .text {
  position: relative;
  width: 200px;
  padding: 10em 0em;
}

#example .title h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 768px) {
  #example .title .text {
    margin: 100px 0 0;
    padding: 5em 0em 2em;
  }
}

/********** promise **********/
#promise {
  /* margin: calc(var(--content-margin)) auto 0; */
  padding: 0 var(--side-padding) var(--content-padding);
  border-top: 0px solid var(--gray-deep);
}

#promise .title {}

#promise .title .text {
  position: relative;
  width: 200px;
  padding: 10em 0em;
}

#promise .title h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#promise .title p {
  font-size: 1.2em;
  color: var(--main-blue);
  padding: 0 0 0 5em;
}

#promise .box {
  padding: calc(var(--content-margin) / 4) 0;
  margin: 0 0 calc(var(--content-margin) / 4);
  border-top: 1px solid var(--gray-deep);
  border-bottom: 1px solid var(--gray-deep);
}

#promise .box .title {
  width: 270px;
  font-size: 1.2em;
  font-weight: 500;
  line-height: 200%;
}

#promise .box .title span {
  font-size: 2em;
  color: var(--main-blue);
}

#promise .box .text {
  width: calc(100% - 2em - 270px);
  margin: 0 0 0 2em;
  padding: 0 0 0 2em;
  border-left: 1px solid var(--gray-deep);
}

#promise .privacy {}

#promise .privacy img {
  width: 60px;
  margin: 0 1em 0 0;
}

#promise .privacy p {
  width: calc(100% - 60px - 1em);
}

@media screen and (max-width: 768px) {
  #promise .title h2 {
    position: relative;
    top: inherit;
    left: 1em;
    -ms-transform: inherit;
    -webkit-transform: inherit;
    transform: inherit;
  }

  #promise .title .text {
    margin: 100px 0 0;
    padding: 5em 0em 2em;
  }

  #promise .title p {
    width: 100%;
    padding: 5em 5%;
  }

  #promise .box {
    padding: calc(var(--content-margin) / 4) 5%;
  }

  #promise .box .title {
    width: 100%;
    margin: 0 auto 1em;
  }

  #promise .box .text {
    width: 100%;
    margin: 0;
    padding: 0;
    border-left: 0px solid var(--gray-deep);
  }

  #promise .privacy {
    padding: 0 5%;
  }
}