@charset "UTF-8";
.wrapper {
  overflow: hidden;
}

.inner {
  width: 78.125%;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .inner {
    width: 83.33%;
  }
}

@media only screen and (max-width: 768px) {
  .sp-inner {
    width: 83.33%;
    margin: 0 auto;
  }
}

.pc {
  display: block;
}
@media only screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media only screen and (max-width: 768px) {
  .sp {
    display: block;
  }
}

.hv-b {
  transition: all 0.5s;
}
.hv-b:hover {
  color: #0d92a8;
}

.bg_deco_tp {
  margin-bottom: -1px;
}

.bg_deco_bt {
  margin-top: -1px;
}

.linkbtn {
  text-align: center;
  margin-bottom: 3vw;
}
@media only screen and (max-width: 768px) {
  .linkbtn {
    margin-bottom: 6.5vw;
  }
}
.linkbtn p {
  display: inline-block;
  position: relative;
}
.linkbtn a {
  font-size: 1.56vw;
  font-weight: 400;
  display: block;
  border-radius: 9999px;
  background-color: #0d92a8;
  color: #fff;
  padding: 1.56vw 9vw;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 768px) {
  .linkbtn a {
    font-size: 3.9vw;
    padding: 6.6vw 0;
    width: 80vw;
  }
}
.linkbtn a span {
  position: absolute;
  display: block;
  top: 30%;
  right: 10%;
}
@media only screen and (max-width: 768px) {
  .linkbtn a span {
    font-size: 140%;
    top: 30%;
    right: 10%;
  }
}

header {
  margin-bottom: 3.9vw;
}
@media only screen and (max-width: 768px) {
  header {
    margin-bottom: 2.6vw;
  }
}

.intro picture {
  width: 88.75%;
  margin: 0 auto 2.73vw;
}
@media only screen and (max-width: 768px) {
  .intro picture {
    width: 100%;
    margin-bottom: 6.51vw;
  }
}

.intro-box_wrapper {
  margin: 4.6vw 0 5.2vw;
}

.intro-box .icon_count {
  position: absolute;
  top: -0.78vw;
  left: 2.3vw;
  width: 9.2vw;
}

.end_box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 14vw;
  height: 14vw;
}

@media only screen and (max-width: 768px) {

  .intro-box_wrapper {
    margin: 10vw 0;
  }

  .intro-box .icon_count {
    top: -7.6vw;
    left: 0;
    right: 0;
    margin: auto;
    width: 20vw;
  }
  
  .end_box {
    width: 150px;
    height: 150px;
  }

}

.intro-box {
  width: 82.57%;
  margin: 0 auto;
  background-image: url(../images/bg_01.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .intro-box {
    background-image: url("../images/bg_01_center_sp.png");
    background-size: contain;
    background-repeat: repeat-y;
    width: 100%;
  }
}
.intro-box picture {
  width: 38%;
  margin: 0 auto 1.56vw;
  padding-top: 3vw;
}

.intro-box2 picture {
  width: 50%;
}

@media only screen and (max-width: 768px) {
  .intro-box picture {
    padding-top: 45px;
    width: 55.7%;
    margin: 0 auto 1.9vw;
  }
}
.intro-txt01 {
  margin-bottom: 1.56vw;
  font-size: 2.34vw;
  font-feature-settings: "palt";
  color: #0d92a8;
  font-weight: bold;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 768px) {
  .intro-txt01 {
    font-size: 4.94vw;
    margin-bottom: 2.2vw;
  }
}
.intro-txt01 span.s-txt {
  font-size: 1.71vw;
}
@media only screen and (max-width: 768px) {
  .intro-txt01 span.s-txt {
    font-size: 4.16vw;
  }
}
.intro-txt01 .rotate {
  display: inline-block;
  transform: rotate(10deg);
}
.intro-txt02 {
  letter-spacing: 0.1em;
}
.intro-time {
  justify-content: center;
  padding-bottom: 3.9vw;
  color: #0d92a8;
  font-size: 1.875vw;
  font-weight: bold;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .intro-time {
    flex-direction: column;
    align-items: center;
    font-size: 4.55vw;
    font-weight: 400;
  }
}
.intro-time-icon {
  width: 5%;
  height: 100%;
  margin-right: 1rem;
}
@media only screen and (max-width: 768px) {
  .intro-time-icon {
    width: 16.25%;
    margin-bottom: 2.2vw;
    margin-top: 0;
    margin-right: 0;
  }
}

.hair-bg {
  padding-top: 5.46vw;
  padding-bottom: 7.8vw;
  background-image: url("../images/bg_02.jpg"), url("../images/bg_03.jpg");
  background-repeat: no-repeat;
  background-position: top left, top right;
  background-size: 50%;
  margin-bottom: 7.8vw;
}
@media only screen and (max-width: 768px) {
  .hair-bg {
    padding-top: 0;
    background-image: none;
    margin-bottom: 2.4vw;
  }
}

.hair picture {
  width: 50.9%;
  margin: 0 auto 4.68vw;
}
@media only screen and (max-width: 768px) {
  .hair picture {
    width: 67.4%;
    padding-top: 12.3vw;
    margin: 0 auto 10.4vw;
  }
}
.hair-sec01 {
  justify-content: center;
  flex-wrap: nowrap;
  gap: 7.8vw;
}
@media only screen and (max-width: 768px) {
  .hair-sec01 {
    flex-direction: column;
    gap: 0;
  }
}
.hair-box01 {
  width: 45.2%;
}
@media only screen and (max-width: 768px) {
  .hair-box01 {
    background-image: url("../images/bg_02_sp.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
}
.hair-box01 .hair-type {
  position: absolute;
  top: 70%;
  left: -15%;
  width: 36%;
}
@media only screen and (max-width: 768px) {
  .hair-box01 .hair-type {
    width: 45%;
    left: -9%;
  }
}
.hair-box02 {
  width: 45.2%;
}
@media only screen and (max-width: 768px) {
  .hair-box02 {
    background-image: url("../images/bg_03_sp.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
}
.hair-box02 .hair-type {
  position: absolute;
  top: 70%;
  right: -17%;
  width: 36%;
}
@media only screen and (max-width: 768px) {
  .hair-box02 .hair-type {
    width: 45%;
    right: -12%;
  }
}
@media only screen and (max-width: 768px) {
  .hair-box02 .hair-h2 {
    padding-top: 13vw;
  }
}
.hair-h2 {
  width: 71.7%;
  margin: 0 auto 2.73vw;
}
@media only screen and (max-width: 768px) {
  .hair-h2 {
    width: 67.3%;
    margin: 0 auto 8.4vw;
  }
}
.hair-img {
  position: relative;
  margin-bottom: 2.34vw;
}
@media only screen and (max-width: 768px) {
  .hair-img {
    width: 74.6%;
    margin: 0 auto 6.5vw;
  }
}
.hair-arrow {
  width: 7.7%;
  margin: 0 auto 2.34vw;
}
@media only screen and (max-width: 768px) {
  .hair-arrow {
    margin-bottom: 6.5vw;
    width: 9.1vw;
  }
}
.hair-txt {
  color: #fff;
  line-height: 2.25;
  letter-spacing: 0.1em;
  margin-bottom: 4.46vw;
  font-size: 1.56vw;
}
@media only screen and (max-width: 768px) {
  .hair-txt {
    font-size: 4.16vw;
    margin-bottom: 10.4vw;
  }
}
.hair-reco {
  width: 63.1%;
  margin: 0 auto 1.56vw;
}
@media only screen and (max-width: 768px) {
  .hair-reco {
    width: 67.1875%;
    margin: 0 auto 3.9vw;
  }
}
.hair-reco-list {
  color: #fff;
  margin-bottom: 7.37vw;
}
@media only screen and (max-width: 900px) {
  .hair-reco-list {
    margin-bottom: 5.37vw;
  }
}
@media only screen and (max-width: 768px) {
  .hair-reco-list {
    margin-bottom: 13vw;
  }
}
.hair-reco-item:first-child {
  background-image: linear-gradient(to right, #fff, #fff 2px, transparent 2px, transparent 8px), linear-gradient(to left, #fff, #fff 2px, transparent 2px, transparent 8px);
  background-size: 8px 2px, 8px 2px;
  background-position: left top, right bottom;
  background-repeat: repeat-x, repeat-x;
}
@media only screen and (max-width: 768px) {
  .hair-reco-item:first-child {
    background-image: linear-gradient(to right, #fff, #fff 2px, transparent 2px, transparent 8px), linear-gradient(to left, #fff, #fff 2px, transparent 2px, transparent 8px);
    background-size: 8px 2px, 8px 2px;
  }
}
.hair-reco-item {
  padding: 1.95vw 0;
  background-image: linear-gradient(to left, #fff, #fff 2px, transparent 2px, transparent 8px);
  background-size: 8px 2px;
  background-position: right bottom;
  background-repeat: repeat-x;
  font-size: 1.875vw;
  padding-left: 5px;
  white-space: nowrap;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 768px) {
  .hair-reco-item {
    font-size: 4.8vw;
    padding: 3.9vw 0;
    background-image: linear-gradient(to left, #fff, #fff 2px, transparent 2px, transparent 8px);
    background-size: 8px 2px;
  }
}
.hair-reco-item::before {
  content: "";
  display: inline-block;
  width: 1.5vw;
  height: 1.5vw;
  background-image: url("../images/icon_08.png");
  background-size: cover;
  margin-right: 5px;
}
@media only screen and (max-width: 768px) {
  .hair-reco-item::before {
    width: 3.5vw;
    height: 3.5vw;
  }
}
.hair-sec02 {
  background-image: url("../images/bg_04_center.png");
  background-repeat: repeat-y;
  background-size: contain;
}
@media only screen and (max-width: 768px) {
  .hair-sec02 {
    background-image: none;
    border: 1px solid #0d92a8;
    margin-top: 5.2vw;
    padding: 0;
    width: 114%;
    margin-left: -7%;
    margin-right: -7%;
    padding-bottom: 14.3vw;
  }
}
.hair-sec02 picture {
  width: 73.6%;
  margin: 0 auto 3vw;
}
@media only screen and (max-width: 768px) {
  .hair-sec02 picture {
    width: 80%;
    margin-bottom: 7.8vw;
  }
}
.hair-sec02-txt {
  font-size: 1.7vw;
  line-height: 1.59;
  letter-spacing: 0.1em;
  margin-bottom: 3.9vw;
}
@media only screen and (max-width: 768px) {
  .hair-sec02-txt {
    font-size: 4.1vw;
    margin-bottom: 10.4vw;
  }
}
.hair-sec02-list {
  margin-bottom: 5.46vw;
  justify-content: center;
  gap: 2.34vw;
  padding-top: 9vw;
  padding-bottom: 1vw;
}
.hair-sec02-item {
  width: 22%;
}
.hair-sec02 .slide-item {
  width: 280px;
  margin: 0 auto;
}
.hair-link {
  text-align: center;
  font-size: 1.56vw;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 768px) {
  .hair-link {
    margin: 4.4vw auto 11vw;
    margin-top: 4.2vw;
    font-size: 4.1vw;
    line-height: 1.875;
  }
}
.hair-link a {
  position: relative;
  display: inline-block;
  color: #0d92a8;
  text-decoration: none;
}
.hair-link a::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #0d92a8;
  transform: scale(1, 1);
  transform-origin: left top;
  transition: transform 0.5s;
}
@media only screen and (max-width: 768px) {
  .hair-link a::after {
    bottom: 10%;
  }
}
.hair-link a:hover::after {
  transform-origin: right top;
  transform: scale(0, 1);
}

.app {
  padding-bottom: 5.46vw;
}
@media only screen and (max-width: 768px) {
  .app {
    padding-bottom: 9.1vw;
  }
}
.app picture {
  width: 90%;
  margin: 0 auto 5.4vw;
}
@media only screen and (max-width: 768px) {
  .app picture {
    width: 100%;
    margin: 0 auto 10vw;
  }
}
.app-box {
  width: 90%;
  padding: 3.5vw 4vw 3.5vw 5vw;
  border: 1px solid #0d92a8;
  border-radius: 15px;
  position: relative;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .app-box {
    width: 100%;
    padding: 6.5vw 3.55vw;
  }
}
.app .insta {
  margin-bottom: 1vw;
}
@media only screen and (max-width: 768px) {
  .app .insta {
    margin-bottom: 8.2vw;
  }
}
.app-icon {
  position: absolute;
  width: 10.5%;
  top: -6.5%;
  left: -5%;
}
@media only screen and (max-width: 768px) {
  .app-icon {
    width: 23.5%;
    top: -2.8%;
    left: -9.5%;
  }
}
.app-h2 {
  color: #0d92a8;
  font-size: 1.4vw;
}
@media only screen and (max-width: 768px) {
  .app-h2 {
    text-align: center;
    font-size: 4.42vw;
    margin-bottom: 5.2vw;
  }
}
.app table th {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: normal;
}
@media only screen and (max-width: 768px) {
  .app table th {
    width: 19vw;
    gap: 0;
  }
}
.app table th img {
  width: 1.56vw;
}
@media only screen and (max-width: 768px) {
  .app table th img {
    width: 3.5vw;
  }
}
.app table td a {
  border-bottom: 1px solid #0d92a8;
  padding-bottom: 3px;
  color: #0d92a8;
  font-weight: bold;
}

.app table td em {
  font-style: normal;
  color: #0d92a8;
  font-weight: bold;
}

.app table td ul.note li {
  text-indent: -1em;
  padding-left: 1em;
}

.app table td .step_img {
  padding-left: 7vw;
  display: flex;
  align-items: center;
}

.app table td .step_img > div {
  display: flex;
}

.app table td .step_img figure {
  margin-right: 1.17vw;
  width: 14vw;
}

.app table td .step_img_text li {
  margin: 0.8vw 1.2vw;
  padding: 0.7vw 1.4vw;
  color: #0d92a8;
  border: 1px solid #0d92a8;
  border-radius: 5px;
  position: relative;
}

@media only screen and (min-width: 767px) {

  .app table td .step_img_text li:after,
  .app table td .step_img_text li:before {
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:55%;
  }
  
  .app table td .step_img_text li:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-width:5px;
    border-bottom-width:5px;
    border-left-width:8px;
    border-right-width:8px;
    margin-top: -5px;
    border-right-color:#FFFFFF;
  }
  
  .app table td .step_img_text li:before {
    border-color: rgba(13, 146, 168, 0);
    border-top-width:6px;
    border-bottom-width:6px;
    border-left-width:9px;
    border-right-width:9px;
    margin-top: -6px;
    margin-right: 1px;
    border-right-color:#0D92A8;
  }

}

@media only screen and (max-width: 768px) {

  .app table td ul.note {
    margin-bottom: 2.56vw;
  }
  
  .app table td ul.note li {
    text-indent: 0;
    padding-left: 0;
  }
  
  .app table td .step_img {
    padding: 0;
    display: block;
  }
  
  .app table td .step_img > div {
    margin-bottom: 2vw;
  }
  
  .app table td .step_img figure {
    margin-right: 4vw;
    width: calc(50% - 2vw);
  }

  .app table td .step_img figure:last-child {
    margin: 0;
  }
  
  .app table td .step_img_text li {
    margin: 4.6vw 0 0;
    padding: 2.6vw 0;
    border-radius: 1.8vw;
    text-align: center;
  }

  .app table td .step_img_text li:after,
  .app table td .step_img_text li:before {
      border: solid transparent;
      content:'';
      height:0;
      width:0;
      pointer-events:none;
      position:absolute;
      bottom:100%;
      left:50%;
  }
  
  .app table td .step_img_text li:after {
      border-color: rgba(255, 255, 255, 0);
      border-top-width:8px;
      border-bottom-width:8px;
      border-left-width:5px;
      border-right-width:5px;
      margin-left: -5px;
      border-bottom-color:#FFFFFF;
  }

  .app table td .step_img_text li:before {
      border-color: rgba(13, 146, 168, 0);
      border-top-width:9px;
      border-bottom-width:9px;
      border-left-width:6px;
      border-right-width:6px;
      margin-left: -6px;
      margin-bottom: 1px;
      border-bottom-color:#0D92A8;
  }

}

.app table th,
.app table td {
  font-size: 1.4vw;
  padding: 1.2vw 0.5vw;
}
@media only screen and (max-width: 768px) {
  .app table th,
.app table td {
    font-size: 4.1vw;
  }
}

.terms {
  padding-bottom: 5.46vw;
}
.terms picture {
  width: 90%;
  margin: 0 auto 2.73vw;
}
@media only screen and (max-width: 768px) {
  .terms picture {
    width: 100%;
    margin: 0 auto 5.2vw;
  }
}
.terms-txt {
  width: 90%;
  font-size: 1.4vw;
  line-height: 1.5;
  margin: 0 auto 3.9vw;
}
@media only screen and (max-width: 768px) {
  .terms-txt {
    font-size: 4.1vw;
    margin: 0 auto 8.4vw;
    width: 100%;
  }
}
.terms-box {
  width: 90%;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .terms-box {
    width: 100%;
  }
}
.terms-box dt,
.terms-box dd {
  font-size: 1.4vw;
}
@media only screen and (max-width: 768px) {
  .terms-box dt,
.terms-box dd {
    font-size: 4.1vw;
  }
}
.terms-box dt {
  border-bottom: 1px solid #808080;
  padding-bottom: 1.1vw;
  margin-bottom: 2.34vw;
}
.terms-box dd {
  margin-bottom: 3.9vw;
}
.terms-box ul {
  padding-left: 1.56vw;
}
@media only screen and (max-width: 768px) {
  .terms-box ul {
    padding-left: 4.1vw;
  }
}
.terms-box li {
  position: relative;
  display: block;
}
.terms .cer::before {
  content: "●";
  position: absolute;
  top: 0;
  left: -1.56vw;
}
@media only screen and (max-width: 768px) {
  .terms .cer::before {
    left: -4.2vw;
  }
}
.terms .kome::before {
  content: "※";
  position: absolute;
  top: 0;
  left: -1.56vw;
}
@media only screen and (max-width: 768px) {
  .terms .kome::before {
    left: -4.2vw;
  }
}
.terms .num::before {
  position: absolute;
  top: 0;
  left: -1.56vw;
}
@media only screen and (max-width: 768px) {
  .terms .num::before {
    left: -4.2vw;
  }
}
.terms .num01::before {
  content: "①";
}
.terms .num02::before {
  content: "②";
}
.terms .num03::before {
  content: "③";
}
.terms .num04::before {
  content: "④";
}
.terms .num05::before {
  content: "⑤";
}
.terms .num06::before {
  content: "⑥";
}
.terms .num07::before {
  content: "⑦";
}
.terms .num08::before {
  content: "⑧";
}
.terms .num09::before {
  content: "⑨";
}
.terms .num10::before {
  content: "⑩";
}
.terms .num11::before {
  content: "⑪";
}

.footer {
  background-color: #e5f2f5;
  padding: 5.46vw 0 3.9vw;
}
@media only screen and (max-width: 768px) {
  .footer {
    padding: 9.1vw 0 3.9vw;
  }
}
.footer .linkbtn {
  margin-bottom: 3.9vw;
}
.footer-flex {
  justify-content: center;
  gap: 1.56vw;
}
@media only screen and (max-width: 768px) {
  .footer-flex {
    gap: 5.2vw;
  }
}
.footer-l, .footer-r {
  width: 6.6%;
  margin-bottom: 4.68vw;
}
@media only screen and (max-width: 768px) {
  .footer-l, .footer-r {
    width: 22.6%;
    margin-bottom: 9.1vw;
  }
}
.footer small {
  display: block;
  text-align: center;
  margin: 0 auto;
  font-size: 1.4vw;
}
@media only screen and (max-width: 768px) {
  .footer small {
    font-size: 3.9vw;
  }
}
@media only screen and (max-width: 575px) {
  .footer small {
    font-size: 12px;
  }
}
.footer-logo {
  width: 8.4%;
  margin: 0 auto 3.9vw;
}
@media only screen and (max-width: 768px) {
  .footer-logo {
    width: 21.4%;
    margin: 0 auto 6.5vw;
  }
}

.bx-wrapper {
  width: 90%;
  margin: 0 auto;
}

.bx-wrapper .bx-pager.bx-default-pager a {
  background: #fff;
  border: 1px solid #0d92a8;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #0d92a8;
  border: 1px solid #0d92a8;
}

.bx-wrapper .bx-next {
  right: 25%;
}
@media only screen and (max-width: 900px) {
  .bx-wrapper .bx-next {
    right: 24%;
  }
}
@media only screen and (max-width: 768px) {
  .bx-wrapper .bx-next {
    right: 0;
  }
}

.bx-wrapper .bx-prev {
  left: 25%;
}
@media only screen and (max-width: 900px) {
  .bx-wrapper .bx-prev {
    left: 24%;
  }
}
@media only screen and (max-width: 768px) {
  .bx-wrapper .bx-prev {
    left: 0;
  }
}

.bx-wrapper .bx-controls-direction a.bx-prev {
  top: 19.85vw;
  background-position: center;
}
@media only screen and (max-width: 900px) {
  .bx-wrapper .bx-controls-direction a.bx-prev {
    top: 19.85vw;
  }
}
@media only screen and (max-width: 768px) {
  .bx-wrapper .bx-controls-direction a.bx-prev {
    top: 108%;
  }
}
@media only screen and (max-width: 575px) {
  .bx-wrapper .bx-controls-direction a.bx-prev {
    top: 71.5vw;
  }
}
@media only screen and (max-width: 375px) {
  .bx-wrapper .bx-controls-direction a.bx-prev {
    top: 110.5%;
  }
}

.bx-wrapper .bx-controls-direction a.bx-next {
  top: 19.85vw;
  background-position: center;
}
@media only screen and (max-width: 900px) {
  .bx-wrapper .bx-controls-direction a.bx-next {
    top: 19.85vw;
  }
}
@media only screen and (max-width: 768px) {
  .bx-wrapper .bx-controls-direction a.bx-next {
    top: 108%;
  }
}
@media only screen and (max-width: 575px) {
  .bx-wrapper .bx-controls-direction a.bx-next {
    top: 71.5vw;
  }
}
@media only screen and (max-width: 375px) {
  .bx-wrapper .bx-controls-direction a.bx-next {
    top: 110.5%;
  }
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  bottom: -4vw;
}
@media only screen and (max-width: 768px) {
  .bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    bottom: -7.5vw;
  }
}

.bx-wrapper .bx-pager.bx-default-pager a {
  width: 1.17vw;
  height: 1.17vw;
  border-radius: 999px;
}
@media only screen and (max-width: 768px) {
  .bx-wrapper .bx-pager.bx-default-pager a {
    width: 2.6vw;
    height: 2.6vw;
  }
}

.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  z-index: 9999;
  width: 3.9vw;
  height: 3.9vw;
  margin-top: -16px;
  text-indent: -9999px;
  outline: 0;
}
@media only screen and (max-width: 768px) {
  .bx-wrapper .bx-controls-direction a {
    width: 7vw;
    height: 7vw;
  }
}
/*# sourceMappingURL=style.css.map */

.result_box {
  margin-bottom: 9.4vw;
  padding: 2.344vw;
  background: #ddeef1;
  position: relative;
}

.result_box_inner {
  padding: 10.1vw 0 4.2vw;
  background: url(../images/result_back.png);
}

.result_box .icon_count {
  position: absolute;
  top: -1.17vw;
  left: 0;
  right: 0;
  margin: auto;
  width: 13.3vw;
}

.result_box_inner > h2 {
  text-align: center;
  margin-bottom: 1.9vw;
  font-size: 2.6vw;
  font-feature-settings: "palt";
  color: #0d92a8;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.result_box_inner > h3 {
  text-align: center;
}

.result_box_inner h3.title_result {
  margin: 0 auto 7.2vw;
  width: 24.2vw;
}

@media only screen and (max-width: 768px) {

  .result.inner {
    width: calc(100% - 5.2vw);
  }

  .result_box {
    margin-bottom: 13vw;
    padding: 3.9vw;
  }
  
  .result_box_inner {
    padding: 15.5vw 0 4.2vw;
    background: url(../images/result_back.png);
    background-size: 83px auto;
  }
  
  .result_box .icon_count {
    top: -2.34vw;
    width: 25.6vw;
  }
  
  .result_box_inner > h2 {
    margin-bottom: 2.4vw;
    font-size: 4.4vw;
  }
  
  .result_box_inner h3.title_result {
    margin: 0 auto 11vw;
    width: 50.8vw;
  }

}

.result_graph {
  margin: 7.4vw 0 8.6vw;
}

.result_graph ul {
  margin: 0 auto 2.1vw 12vw;
  display: flex;
  width: 52vw;
  justify-content: space-between;
}

.result_graph li.result_kami {
  margin-top: 8.3vw;
}

.result_graph li.result_hada h4 {
  width: 25.4vw;
}

.result_graph li.result_kami h4 {
  width: 19.7vw;
}

.result_graph li.result_hada figure {
  width: 24vw;
  margin: 0 auto;
}

.result_graph li.result_kami figure {
  width: 17vw;
  margin: 0 auto;
}

.result_graph .result_graph_img {
  margin: 0 auto;
  width: 58.3vw;
}

@media only screen and (max-width: 768px) {

  .result_graph {
    margin: 0 0 12.3vw;
  }
  
  .result_graph ul {
    margin: 0 auto 3vw;
    width: calc(100% - 8vw);
    justify-content: space-between;
  }

  .result_graph li.result_hada {
    width: 64%;   
  }

  .result_graph li.result_kami {
    width: 38%;   
  }
  
  .result_graph li.result_kami {
    margin-top: 9.8vw;
  }
  
  .result_graph li.result_hada h4,
  .result_graph li.result_kami h4 {
    width: 100%;
  }

  .result_graph li.result_kami h4 {
    margin-bottom: 1.3vw;
  }
  
  .result_graph li.result_hada figure {
    width: 72%;
  }
  
  .result_graph li.result_kami figure {
    width: 100%;
  }
  
  .result_graph .result_graph_img {
    margin: 0 auto;
    width: calc(100% - 7vw);
  }

}

.result_box_inner h3.title_comment {
  margin: 0 auto 3.9vw;
  width: 46.8vw;
}

.result_comment {
  margin: 4.1vw auto 0;
  width: 55.5vw;
}

.result_comment li {
  margin-bottom: 4.7vw;
  display: flex;
}

.result_comment li h4 {
  width: 13.8vw;
}

.result_comment li p {
  color: #fff;
  font-size: 1.7vw;
  line-height: 1.8;
  width: 33.6vw;
  height: 14.7vw;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.result_comment li p br.sp {
  display: none;
}

.result_comment li:nth-child(even) {
  margin-left: 6.6vw;
}

.result_comment li:nth-child(even) h4 {
  order: 2;
}

.result_comment li:nth-child(even) p {
  order: 1;
}

.result_comment li:nth-child(odd) p {
  margin-left: 1.2vw;
  background: url(../images/comment_hada_pc.png) no-repeat;
  background-size: 33.6vw auto;
}

.result_comment li:nth-child(even) p{
  margin-right: 1.2vw;
  background: url(../images/comment_kami_pc.png) no-repeat;
  background-size: 33.6vw auto;
}

.result_comment li:nth-child(1) h4 {
  background: url(../images/comment_user1.png) no-repeat right 4.8vw;
  background-size: 8.2vw auto;
}

.result_comment li:nth-child(2) h4 {
  background: url(../images/comment_user2.png) no-repeat 0 4.8vw;
  background-size: 8.2vw auto;
}

.result_comment li:nth-child(3) h4 {
  background: url(../images/comment_user3.png) no-repeat right 4.8vw;
  background-size: 8.2vw auto;
}

.result_comment li:nth-child(4) h4 {
  background: url(../images/comment_user4.png) no-repeat 0 4.8vw;
  background-size: 8.2vw auto;
}

@media only screen and (max-width: 768px) {

  .result_box_inner h3.title_comment {
    margin: 0 auto 5.2vw;
    width: 69vw;
  }
  
  .result_comment {
    margin: 0 auto;
    width: 75.5vw;
  }
  
  .result_comment li {
    margin-bottom: 3.7vw;
    display: flex;
  }
  
  .result_comment li h4 {
    margin-top: 7vw;
    width: 26vw;
  }
  
  .result_comment li p {
    font-size: 3.6vw;
    line-height: 1.5;
    width: 44.2vw;
    height: 44.2vw;
  }

  .result_comment li:nth-child(odd) p span {
    padding-left: 2vw;
  }

  .result_comment li:nth-child(even) p span {
    padding-right: 2vw;
  }

  .result_comment li p br.sp {
    display: block;
  }

  .result_comment li:nth-child(even) {
    margin-left: 3vw;
  }
  
  .result_comment li:nth-child(odd) p {
    margin-left: 1.2vw;
    background: url(../images/comment_hada_sp.png) no-repeat;
    background-size: 100% auto;
  }
  
  .result_comment li:nth-child(even) p {
    margin-right: 1.2vw;
    background: url(../images/comment_kami_sp.png) no-repeat;
    background-size: 100% auto;
  }
  
  .result_comment li:nth-child(1) h4 {
    background: url(../images/comment_user1.png) no-repeat right 11vw;
    background-size: 17.3vw auto;
  }
  
  .result_comment li:nth-child(2) h4 {
    background: url(../images/comment_user2.png) no-repeat 0 11vw;
    background-size: 17.3vw auto;
  }
  
  .result_comment li:nth-child(3) h4 {
    background: url(../images/comment_user3.png) no-repeat right 11vw;
    background-size: 17.3vw auto;
  }
  
  .result_comment li:nth-child(4) h4 {
    background: url(../images/comment_user4.png) no-repeat 0 11vw;
    background-size: 17.3vw auto;
  }

}