@charset "UTF-8";
/*====================================================
////webフォント読み込み
====================================================*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/*====================================================
////画面サイズ
====================================================*/
html {
  font-size: 62.5%;
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
  html {
    font-size: 0.9090909091vw;
  }
}
/*====================================================
////アニメーション設定
====================================================*/
/*====================================================
////common
====================================================*/
/* ---------- カラーコード ----------*/
:root {
  --main-color: #0E7EAA;
  --sub-color01: #EF7989;
  --txt-color: #464646;
}

/* ---------- 基本設定 ----------*/
body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--txt-color);
}

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

a {
  transition: 0.3s;
}
a:hover {
  opacity: 0.8;
}

/* ---------- レスポンシブ切り替え ----------*/
.only-sp {
  display: block !important;
}
@media screen and (min-width: 768px) {
  .only-sp {
    display: none !important;
  }
}

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

/* ---------- layout ----------*/
.inner {
  width: 88.8%;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .inner {
    max-width: 102.3rem;
  }
}

.block.white {
  background-color: #fff;
}
.block.radius {
  border-radius: 3rem;
  -webkit-border-radius: 3rem;
  -moz-border-radius: 3rem;
  -ms-border-radius: 3rem;
  -o-border-radius: 3rem;
}
.block.shadow {
  box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.2);
}

/*====================================================
////header
====================================================*/
.header {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  box-shadow: 0 7px 5px rgba(0, 0, 0, 0.2);
  padding: 1.2rem 0;
  z-index: 9999;
}
.header__inner {
  width: 88.8%;
  margin: auto;
  position: relative;
}
.header__logo {
  position: relative;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.header__logo a {
  display: block;
  width: 54.0290909091%;
}
.header__logo figure {
  width: 3.5rem;
}
.header__btn {
  width: 3.5rem;
  height: 2.5rem;
  position: fixed;
  right: 1.5rem;
  top: 2rem;
}
.header__btn span {
  background-color: #0E7EAA;
  width: 3.1rem;
  height: 1px;
  position: absolute;
  transition: 0.3s;
}
.header__btn span:first-child {
  top: 0;
}
.header__btn span:nth-child(2) {
  top: 50%;
}
.header__btn span:last-child {
  bottom: 0;
}
.header__close {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2rem;
  width: 2rem;
  height: 2rem;
  z-index: 999;
}
.header__close span {
  background-color: #0E7EAA;
  width: 1.6rem;
  height: 1px;
  position: absolute;
}
.header__close span:first-child {
  transform: rotate(45deg);
  top: 50%;
}
.header__close span:last-child {
  transform: rotate(-45deg);
  top: 50%;
  bottom: auto;
}
.header__menu {
  width: 100vw;
  padding: 2rem 3rem 5rem 3rem;
  transform: translateY(-100vh);
  background-color: #fff;
  transition: 0.3s;
  position: absolute;
  left: -6.6%;
  box-shadow: 0 7px 5px rgba(0, 0, 0, 0.2);
  z-index: -1;
}
.header__menu.active {
  transform: translateY(0);
}
.header__menu li {
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.1875;
  font-weight: 600;
  padding: 1rem 0;
}

/*======================= PC =======================*/
@media screen and (min-width: 768px) {
  .header {
    padding: 1.2rem 0 1.5rem 0;
  }
  .header__inner {
    max-width: 136.6rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0 1.1%;
  }
  .header__logo a {
    width: 100%;
    max-width: 23.8487rem;
  }
  .header__logo figure {
    width: 3.5rem;
    margin-left: 3.4rem;
  }
  .header__menu {
    width: 100%;
    padding: 0;
    transform: translateY(0);
    background-color: transparent;
    position: static;
    left: auto;
    box-shadow: none;
    display: flex;
    gap: 3.5rem;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
  }
  .header__menu ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 3.2rem;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }
  .header__menu li {
    font-size: 1.6rem;
    line-height: 1.1875;
    font-weight: 600;
    padding: 1rem 0;
    white-space: nowrap;
  }
  .header__menu li a:hover {
    opacity: 0.7;
  }
  .header__contact {
    width: 100%;
  }
  .header__contact a {
    background: rgb(88, 193, 150);
    background: linear-gradient(90deg, rgb(88, 193, 150) 0%, rgb(0, 110, 237) 100%);
    color: #fff;
    font-size: 1.9rem;
    line-height: 1.1578947368;
    font-weight: 500;
    text-align: center;
    border-radius: 3rem;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    -ms-border-radius: 3rem;
    -o-border-radius: 3rem;
    padding: 0.8rem 5rem;
    white-space: nowrap;
  }
}
@media screen and (min-width: 768px) and (max-width: 1100px) {
  .header {
    width: 100%;
  }
  .header__inner {
    width: 100%;
  }
  .header__logo {
    width: 100%;
  }
}
/*====================================================
////footer
====================================================*/
.footer {
  background-color: #fff;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
  padding-bottom: 7rem;
}
.footer .inner {
  width: 93.3333333333%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.footer .inner .block {
  max-width: 14.5rem;
  padding-top: 2rem;
}
.footer .inner ul {
  margin-top: 2rem;
  font-size: 1.4rem;
  line-height: 1.6428571429;
}
.footer .inner .logo02 {
  width: 3.5rem;
  padding-top: 2rem;
}

/*======================= PC =======================*/
@media screen and (min-width: 768px) {
  footer {
    padding-bottom: 0;
  }
  footer .inner {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end !important;
    align-items: center;
    padding: 0;
    max-width: 102rem;
    margin: 0 auto;
    position: relative;
    gap: 3rem;
  }
  footer .inner figure {
    max-width: 23.8487rem;
    margin-top: 1rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  footer .inner .block {
    width: 50%;
  }
  footer .inner .block p {
    font-size: 1.2rem;
    line-height: 1.5;
    white-space: nowrap;
  }
  footer .inner ul {
    margin-top: 2rem;
    margin-left: 2rem;
    font-size: 1.4rem;
    line-height: 1.6428571429;
  }
  footer .inner ul li a {
    text-decoration: underline;
  }
  footer .inner .logo02 {
    width: 4.6rem !important;
    padding-top: 0 !important;
  }
}
/*====================================================
////Fixed contents
====================================================*/
.fix-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}
.fix-btn ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  align-items: stretch;
}
.fix-btn ul li {
  width: 50%;
  height: 5.2rem;
}
.fix-btn ul li a {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 1.8rem;
  line-height: 1.5555555556;
}
.fix-btn ul li:first-child a {
  background-image: linear-gradient(90deg, rgb(255, 193, 100), rgb(223, 91, 134));
  border-right: 1px solid #fff;
}
.fix-btn ul li:last-child a {
  background-image: linear-gradient(90deg, rgb(88, 193, 150), rgb(0, 110, 237));
}

/*======================= PC =======================*/
/*FV
----------------------------------------------------*/
.fv {
  margin-top: 6rem;
  background-image: url(../img/fv_bg.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 55% 100%;
  height: 60rem;
  padding: 2.5rem 0;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
}
.fv .inner {
  height: 100%;
}
.fv__txt--top {
  font-size: 1.9rem;
  line-height: 1.3157894737;
  font-weight: 500;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  justify-content: flex-start;
  align-items: center;
}
.fv__txt--top span {
  display: block;
}
.fv__txt--top .span01 {
  background-color: var(--sub-color01);
  color: #fff;
  width: fit-content;
  padding: 0.8rem 2rem;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}
.fv__txt--top .span02 {
  margin-top: 0.5rem;
}
.fv__txt h1 {
  position: relative;
  font-size: 4.6rem;
  line-height: 0.9130434783;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--main-color);
  margin-top: 2rem;
}
.fv__txt h1 .color {
  color: var(--sub-color01);
}
.fv__txt h1 .span01 {
  font-size: 3rem;
}
.fv__txt h1 .span02 {
  font-size: 1.8rem;
  line-height: 1.1666666667;
  font-weight: 600;
  letter-spacing: 0em;
  position: absolute;
  width: 100%;
  left: 0;
  top: 6rem;
}
.fv__txt h1 .span03 {
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.025em;
}
.fv__txt h1 .span04 {
  font-size: 8.5rem;
  line-height: 1.1176470588;
  letter-spacing: 0.025em;
}
.fv__txt h1 .span05 {
  font-size: 4.8rem;
  letter-spacing: 0.025em;
}
.fv__txt--bt {
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 500;
  margin-top: 3rem;
}
.fv__img {
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  margin: 5.5rem auto 0 auto;
}
.fv__img img {
  display: block;
  width: calc((100% - 3rem) / 2);
}
.fv__bg {
  position: absolute;
  right: -4rem;
  bottom: 30%;
  width: 74.9333333333%;
  z-index: -1;
}
.fv__bg img {
  width: 100%;
}

/*======================= PC =======================*/
@media screen and (min-width: 768px) {
  .fv {
    background-image: url(../img/fv_bg.png);
    background-size: contain;
    background-position: top right;
    height: auto;
    padding: 7rem 0 3rem 0;
  }
  .fv .inner {
    max-width: 102rem;
    position: relative;
  }
  .fv__txt--top {
    font-size: 2.9rem;
    line-height: 1.4482758621;
    gap: 3.5rem;
  }
  .fv__txt--top span {
    display: block;
  }
  .fv__txt--top .span01 {
    padding: 1rem 2rem;
    margin-top: 1.5rem;
  }
  .fv__txt--top .span02 {
    margin-top: 0.5rem;
    font-size: 2.8rem;
    line-height: 1.25;
  }
  .fv__txt h1 {
    font-size: 6.8rem;
    line-height: 1.4264705882;
    letter-spacing: 0.1em;
    margin-top: 1rem;
  }
  .fv__txt h1 .span01 {
    font-size: 4.5rem;
    line-height: 2.1555555556;
    font-weight: 500;
    letter-spacing: 0em;
  }
  .fv__txt h1 .span02 {
    font-size: 2.7rem;
    line-height: 1.1481481481;
    letter-spacing: 0em;
    left: 0;
    top: 11.5rem;
  }
  .fv__txt h1 .span03 {
    font-size: 6.6rem;
    line-height: 0.803030303;
    font-weight: 500;
    letter-spacing: 0.025em;
  }
  .fv__txt h1 .span04 {
    font-size: 12.4rem;
    line-height: 0.8064516129;
    letter-spacing: 0.025em;
  }
  .fv__txt h1 .span05 {
    font-size: 7rem;
    letter-spacing: 0.025em;
  }
  .fv__txt--bt {
    font-size: 1.8rem;
    line-height: 1.4444444444;
    margin-top: 2rem;
  }
  .fv__btn {
    margin-top: 3rem;
  }
  .fv__btn--01 a {
    background: rgb(255, 193, 0);
    background: linear-gradient(-40.3013deg, rgb(255, 193, 0) 0%, rgb(223, 91, 134) 100%);
  }
  .fv__btn--02 a {
    background: rgb(88, 193, 150);
    background: linear-gradient(-40.3013deg, rgb(88, 193, 150) 0%, rgb(0, 110, 237) 100%);
  }
  .fv__btn div a {
    border-radius: 3rem;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    -ms-border-radius: 3rem;
    -o-border-radius: 3rem;
    color: #fff;
    display: block;
    width: 31rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    margin-bottom: 2rem;
    font-size: 2rem;
    line-height: 1.4;
    font-weight: 700;
    box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2);
  }
  .fv__img {
    position: absolute;
    right: -2.5rem;
    bottom: 0;
    margin: 5.5rem auto 0 auto;
    max-width: 57rem;
    gap: 0;
  }
  .fv__img img {
    display: block;
    width: calc((100% - 3rem) / 2);
  }
  .fv__bg {
    position: absolute;
    right: 0;
    top: 15%;
    width: 46.9rem;
  }
  .fv__bg img {
    width: 100%;
  }
}
/* 水道料の値上げが深刻化
----------------------------------------------------*/
.sec01 {
  background-color: #BDC4C6;
  padding: 5.2rem 0 4.7rem 0;
}
.sec01__block {
  position: relative;
}
.sec01__block--head {
  padding: 2.5rem 2.5rem 0 2.5rem;
}
.sec01__block--head h2 {
  font-size: 3rem;
  line-height: 1.5333333333;
  font-weight: 700;
  color: var(--main-color);
  width: fit-content;
  margin: 0 0 0 auto;
}
.sec01__block--head p {
  font-size: 1.6rem;
  line-height: 1.75;
  font-weight: 400;
  margin-top: 1rem;
}
.sec01__block--body {
  margin-top: 1rem;
  padding: 0 1.5rem 1.2rem 1rem;
}
.sec01__block--body h3 {
  font-size: 2.2rem;
  line-height: 2.9545454545;
  font-weight: 700;
  text-align: center;
  color: var(--main-color);
}
.sec01__block--body ul li {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: center;
  align-items: center;
  margin-top: -1.7rem;
}
.sec01__block--body ul li figure {
  width: 65%;
}
.sec01__block--body ul li p {
  font-size: 1.4rem;
  line-height: 1.7857142857;
  width: 70%;
  margin-top: -1rem;
}
.sec01__img {
  position: absolute;
  width: 20.8292792793%;
  top: 2rem;
  left: -0.8rem;
}

/*======================= PC =======================*/
@media screen and (min-width: 768px) {
  .sec01 {
    padding: 8.5rem 0 8.5rem 0;
  }
  .sec01__block--head {
    padding: 5.5rem 2.5rem 1rem 2.5rem;
  }
  .sec01__block--head h2 {
    font-size: 4rem;
    line-height: 1;
    margin: 0 auto 0 auto;
  }
  .sec01__block--head p {
    font-size: 1.8rem;
    line-height: 1.6666666667;
    margin: 3rem auto 0 25%;
    width: 62%;
  }
  .sec01__block--body {
    margin-top: 1rem;
    padding: 0 1.5rem 5rem 1rem;
  }
  .sec01__block--body h3 {
    font-size: 2.6rem;
    line-height: 2.5;
    font-weight: 700;
  }
  .sec01__block--body ul {
    width: 77%;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: center;
    align-items: flex-start;
  }
  .sec01__block--body ul li {
    display: block;
    margin-top: -1rem;
    width: 33.3333333333%;
  }
  .sec01__block--body ul li figure {
    width: 93%;
    margin: auto;
  }
  .sec01__block--body ul li figure img {
    width: 100%;
  }
  .sec01__block--body ul li p {
    font-size: 1.8rem;
    line-height: 1.6666666667;
    font-weight: 500;
    width: 80%;
    text-align: center;
    margin: -2rem auto 0 auto;
  }
  .sec01__img {
    width: 19%;
    top: -3.5rem;
    left: 4%;
  }
}
/* 節水器具JETが水道料値上げによる問題を解決します
----------------------------------------------------*/
.sec02 {
  background: rgb(106, 181, 248);
  background: linear-gradient(180deg, rgb(106, 181, 248) 0%, rgb(0, 188, 205) 100%);
  padding: 4rem 0 6rem 0;
}
.sec02 h2 {
  font-size: 3rem;
  line-height: 1.5333333333;
  font-weight: 700;
  text-align: center;
  color: #FFF100;
}
.sec02 .block {
  display: flex;
  flex-wrap: nowrap;
  gap: 6.8541012923%;
  justify-content: center;
  align-items: flex-start;
  width: 89%;
  margin: 1.5rem auto 0 2rem;
}
.sec02 .block .img01 {
  width: 18.188008233%;
}
.sec02 .block .img02 {
  width: 74.9578904747%;
  margin-top: 1.5rem;
}
.sec02 .lead {
  font-size: 1.6rem;
  line-height: 1.75;
  font-weight: 500;
  color: #fff;
}
.sec02 ul {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.sec02 ul li {
  color: #fff;
}
.sec02 ul li h3 {
  font-size: 2.2rem;
  line-height: 2.5;
  font-weight: 700;
  border-bottom: 1px solid #fff;
  padding-bottom: 0.2rem 0;
}
.sec02 ul li p {
  font-size: 1.4rem;
  line-height: 1.7857142857;
  margin-top: 0.8rem;
}
.sec02 ul li figure {
  filter: drop-shadow(7px 7px 10px rgba(0, 0, 0, 0.2));
  margin-top: 1.3rem;
}

/*======================= PC =======================*/
@media screen and (min-width: 768px) {
  .sec02 {
    padding: 6rem 0 12rem 0;
  }
  .sec02 h2 {
    font-size: 4rem;
    line-height: 1.475;
    font-weight: 700;
  }
  .sec02 .block {
    width: 90%;
    margin: 1.5rem auto 0 auto;
    gap: 3.2rem;
  }
  .sec02 .block .img01 {
    max-width: 9.52885rem;
  }
  .sec02 .block .img02 {
    max-width: 30rem;
    margin-top: 2.5rem;
  }
  .sec02 .lead {
    font-size: 1.8rem;
    line-height: 1.6666666667;
    margin-top: 1.5em;
    margin-left: -1rem;
  }
  .sec02 ul {
    margin-top: 6rem;
    flex-direction: row;
    gap: 6rem;
  }
  .sec02 ul li {
    width: calc((100% - 6rem) / 2);
  }
  .sec02 ul li h3 {
    font-size: 2.6rem;
    line-height: 2.2692307692;
    font-weight: 700;
  }
  .sec02 ul li p {
    font-size: 1.6rem;
    line-height: 1.625;
    margin-top: 1.6rem;
    min-height: 8rem;
    width: 97%;
  }
}
/* JETの特徴
----------------------------------------------------*/
.features {
  padding: 4.8rem 0;
  background-image: url(../img/sp/features_bg.jpg);
  background-repeat: no-repeat;
  background-position: 50% 62%;
  background-size: 100% auto;
}
.features .head h2 {
  text-align: center;
  color: var(--main-color);
  font-size: 2rem;
  line-height: 1.9;
  font-weight: 500;
}
.features .head h2 span {
  display: block;
  color: #fff;
  font-size: 3rem;
  line-height: 1.7;
  font-weight: 400;
  position: relative;
  margin-top: 0.5rem;
}
.features .head h2 span::before {
  content: "";
  background: rgb(106, 181, 248);
  background: linear-gradient(270deg, rgb(106, 181, 248) 0%, rgb(0, 188, 205) 100%);
  width: 22.1413rem;
  height: 4.7rem;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  transform: skewX(-20deg) translateX(-50%);
}
.features .head p {
  font-size: 1.6rem;
  line-height: 1.75;
  text-align: center;
  margin: 1.5rem auto 0 auto;
  width: 98%;
}
.features .intro {
  border-top: 1px solid #B5B5B6;
  border-bottom: 1px solid #B5B5B6;
  padding: 2.5rem 0 2rem 0;
  margin-top: 2.3rem;
}
.features .intro .block {
  padding: 0 0.5rem;
}
.features .intro .block h3 {
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 500;
  color: #fff;
  width: fit-content;
  padding: 0.6rem 1.2rem;
}
.features .intro .block:first-of-type {
  margin-bottom: 3rem;
}
.features .intro .block:first-of-type h3 {
  background-color: #898989;
}
.features .intro .block:last-of-type h3 {
  background-color: #0E7EAA;
}
.features .intro .block p {
  font-size: 1.4rem;
  line-height: 1.7857142857;
  margin-top: 1rem;
}
.features .intro .block.flex {
  display: flex;
  flex-wrap: nowrap;
}
.features .intro .block.flex .txt {
  width: 80%;
}
.features .intro .block.flex figure {
  width: 20%;
  margin-right: 2rem;
}
.features ul {
  padding: 3rem 0;
}
.features ul li {
  background-color: #fff;
  box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.2);
  padding-top: 2.4rem;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  overflow: hidden;
}
.features ul li h4 {
  font-size: 2rem;
  line-height: 1.35;
  font-weight: 500;
  text-align: center;
  color: var(--main-color);
}
.features ul li h4 span {
  display: block;
  font-size: 1.2rem;
  line-height: 2;
}
.features ul li:first-child {
  margin-bottom: 1rem;
}
.features ul li:first-child figure {
  margin-top: 3rem;
}
.features ul li:nth-child(2) {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
}
.features ul li:nth-child(2) figure {
  margin-top: 1rem;
}
.features ul li:nth-child(3) {
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
}
.features ul li:nth-child(3) figure {
  margin-top: 1rem;
}
.features ul li:last-child figure {
  margin-top: 2rem;
}

/*======================= PC =======================*/
@media screen and (min-width: 768px) {
  .features {
    padding: 9.5rem 0;
    background-image: url(../img/features_bg.jpg);
    background-position: 50% 50%;
    background-size: 100% auto;
  }
  .features .head h2 {
    font-size: 2.4rem;
    line-height: 1.5833333333;
    font-weight: 500;
  }
  .features .head h2 span {
    font-size: 4rem;
    line-height: 1.475;
    font-weight: 700;
    margin-top: 1rem;
    z-index: 1;
    color: #fff;
    position: relative;
  }
  .features .head h2 span::before {
    content: "";
    background: rgb(106, 181, 248);
    background: linear-gradient(270deg, rgb(106, 181, 248) 0%, rgb(0, 188, 205) 100%);
    width: 25rem;
    height: 5.8rem;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
    transform: skewX(-20deg) translateX(-50%);
  }
  .features .head p {
    font-size: 1.8rem;
    line-height: 1.6666666667;
    margin: 3.5rem auto 0 auto;
    width: 100%;
  }
  .features .intro {
    border-top: 1px solid #B5B5B6;
    border-bottom: 1px solid #B5B5B6;
    padding: 3rem 5% 1rem 5%;
    margin: 4rem auto 0 auto;
    width: 93%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .features .intro .block {
    padding: 0 0.5rem;
  }
  .features .intro .block h3 {
    font-size: 2rem;
    line-height: 1;
    font-weight: 500;
    padding: 1.1rem 1.5rem;
  }
  .features .intro .block:first-of-type {
    margin-bottom: 3rem;
  }
  .features .intro .block p {
    font-size: 1.8rem;
    line-height: 1.6666666667;
    margin-top: 0;
  }
  .features .intro .block.flex {
    width: 54%;
  }
  .features .intro .block.flex .txt {
    width: 80%;
    order: 2;
  }
  .features .intro .block.flex figure {
    max-width: 6.73445rem;
    margin-right: 2rem;
    order: 1;
  }
  .features ul {
    padding: 3rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 5rem;
    justify-content: center;
    align-items: stretch;
    width: 92%;
    margin: 1.5rem auto 0 auto;
  }
  .features ul li {
    width: calc((100% - 5rem) / 2);
    box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.2);
    padding-top: 4.5rem;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .features ul li h4 {
    font-size: 2.6rem;
    line-height: 1.3846153846;
    font-weight: 700;
  }
  .features ul li h4 span {
    font-size: 1.7rem;
    line-height: 1.9411764706;
  }
  .features ul li figure {
    aspect-ratio: 442/218;
  }
  .features ul li figure img {
    object-fit: cover;
    object-position: 50% 50%;
    width: 100%;
    height: 100%;
  }
  .features ul li:first-child figure {
    margin-top: 5rem;
  }
  .features ul li:nth-child(2) figure {
    margin-top: 1rem;
  }
  .features ul li:nth-child(3) figure {
    margin-top: 1rem;
  }
  .features ul li:last-child figure {
    margin-top: 2rem;
  }
}
/* 他社製品比較
----------------------------------------------------*/
.comparison {
  padding: 5rem 0;
}
.comparison .inner {
  background-color: #fff;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  padding: 3rem 0;
}
.comparison h2 span {
  display: block;
  color: #fff;
  font-size: 3rem;
  line-height: 1.7;
  font-weight: 400;
  position: relative;
  margin-top: 0.5rem;
  z-index: 1;
  text-align: center;
}
.comparison h2 span::before {
  content: "";
  background: rgb(106, 181, 248);
  background: linear-gradient(270deg, rgb(106, 181, 248) 0%, rgb(0, 188, 205) 100%);
  width: 22.1413rem;
  height: 4.7rem;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  transform: skewX(-20deg) translateX(-50%);
}
.comparison .block {
  width: 92%;
}
.comparison .head {
  background-color: #EDEDED;
  width: 70%;
  margin: 0 0 0 auto;
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
  padding: 0.5rem 0;
}
.comparison dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.comparison dl dt,
.comparison dl dd {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 6.6rem;
  text-align: center;
}
.comparison dl dt {
  background-color: #E2E2E2;
  border: 1px solid #fff;
  font-size: 1.6rem;
  line-height: 1.375;
  font-weight: 500;
  width: 30%;
}
.comparison dl dd {
  width: 70%;
  font-size: 1.5rem;
  line-height: 1.3333333333;
  border-bottom: 1px solid #E2E2E2;
  padding: 1rem 0;
}
.comparison dl dd span {
  font-size: 1.8rem;
}
.comparison dl dd.column {
  display: block;
}
.comparison dl dd.column span {
  display: block !important;
  margin-bottom: 0.5rem;
}
.comparison .block01 {
  margin: 3rem auto 0 auto;
}
.comparison .block01 .head {
  background-color: #EDEDED;
}
.comparison .block01 dl dd span {
  font-size: 1.8rem;
}
.comparison .block02 {
  margin: 2.5rem auto 0 auto;
}
.comparison .block02 .head {
  background-color: #0E7EAA;
  color: #fff;
}
.comparison .block02 dl dd {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 400;
  background-color: #FFFEE3;
}
.comparison .block02 dl dd span {
  display: inline-block;
}
.comparison .block02 dl dd span.color {
  color: #EF7989;
}
.comparison .block02 dl dd span.fs-reg {
  font-size: 1.8rem;
  line-height: 1;
}
.comparison .block02 dl dd span.fs-mreg {
  font-size: 1.6rem;
  line-height: 1;
}
.comparison .block02 dl dd span.fs-lg {
  font-size: 3rem;
  line-height: 1;
  padding-bottom: 1rem;
}
.comparison .block02 dl dd span.fs-sm {
  font-size: 1.4rem;
  line-height: 1.2857142857;
}
.comparison .block02 dl dd span.bold {
  font-weight: 700;
}
.comparison .block02 dl dd span.s-bold {
  font-weight: 600;
}
.comparison .block02 dl dd span.block {
  display: block;
}

/*======================= PC =======================*/
@media screen and (min-width: 768px) {
  .comparison {
    background-image: url(../img/comparison_bg.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
    padding: 11.5rem 0 10rem 0;
  }
  .comparison .inner {
    padding: 3rem 0 7.5rem 0;
    border-radius: 3rem;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    -ms-border-radius: 3rem;
    -o-border-radius: 3rem;
  }
  .comparison h2 span {
    font-size: 4rem;
    line-height: 1.475;
    font-weight: 700;
    margin-top: 1rem;
  }
  .comparison h2 span::before {
    width: 29rem;
    height: 5.9rem;
  }
  .comparison .block {
    width: fit-content;
  }
  .comparison .head {
    width: 75%;
    margin: 0 0 0 auto;
    font-size: 2.4rem;
    line-height: 1.25;
    text-align: center;
    padding: 1rem 0;
  }
  .comparison .flex {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: center;
    align-items: stretch;
    margin: auto;
    padding: 0 4%;
  }
  .comparison dl {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }
  .comparison dl dt,
  .comparison dl dd {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 6.6rem;
    text-align: center;
  }
  .comparison dl dt {
    font-size: 1.8rem;
    line-height: 1.3333333333;
    font-weight: 600;
    width: 25%;
  }
  .comparison dl dd {
    width: 75%;
    font-size: 1.6rem;
    line-height: 1.3125;
    font-weight: 600;
    border-bottom: 1px solid #E2E2E2;
  }
  .comparison dl dd span {
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 700;
  }
  .comparison dl dd span.inline {
    display: inline !important;
  }
  .comparison dl dd.column {
    display: block;
  }
  .comparison dl dd.column span {
    display: block !important;
    text-align: center;
    margin-top: 0.5rem;
  }
  .comparison dl dd.column01 {
    padding: 1.9rem 0;
  }
  .comparison dl dd.column02 {
    padding: 1rem 0 1.1rem 0;
  }
  .comparison dl dd.pt {
    padding-top: 1rem;
  }
  .comparison .block01 {
    margin: 3.5rem auto 0 auto;
    width: 100%;
  }
  .comparison .block01 .head {
    background-color: #EDEDED;
  }
  .comparison .block01 dl dd span {
    font-size: 1.8rem;
  }
  .comparison .block02 {
    margin: 3.5rem auto 0 0;
    width: 80%;
  }
  .comparison .block02 .head {
    width: 100%;
    margin: 0 auto 0 0;
  }
  .comparison .block02 dl dd {
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 600;
    background-color: #FFFEE3;
    width: 100%;
  }
  .comparison .block02 dl dd.pb {
    padding-top: 2rem;
    padding-bottom: 1.4rem;
  }
  .comparison .block02 dl dd.pb .w-100 {
    width: 100%;
  }
  .comparison .block02 dl dd.column {
    padding-bottom: 1.8rem;
  }
  .comparison .block02 dl dd span {
    display: inline-block;
  }
  .comparison .block02 dl dd span.fs-reg {
    font-size: 1.8rem;
    line-height: 1;
  }
  .comparison .block02 dl dd span.fs-mreg {
    font-size: 1.6rem;
    line-height: 1;
  }
  .comparison .block02 dl dd span.fs-lg {
    font-size: 3rem;
    line-height: 1;
    padding-bottom: 1rem;
  }
  .comparison .block02 dl dd span.fs-sm {
    font-size: 1.4rem;
    line-height: 1.2857142857;
  }
  .comparison .block02 dl dd span.bold {
    font-weight: 700;
  }
  .comparison .block02 dl dd span.s-bold {
    font-weight: 600;
  }
  .comparison .block02 dl dd span.block {
    display: block;
  }
  .comparison .block02 dl dd span.left {
    text-align: left;
  }
}
/* JETが選ばれる理由
----------------------------------------------------*/
.reason {
  background: rgb(208, 236, 255);
  background: linear-gradient(-143deg, rgb(208, 236, 255) 0%, rgb(222, 255, 255) 100%);
  padding: 5.5rem 0 7rem 0;
}
.reason h2 {
  font-size: 3rem;
  line-height: 1.7;
  font-weight: 500;
}
.reason h2 span {
  display: block;
  color: var(--main-color);
  font-size: 3rem;
  line-height: 1.7;
  font-weight: 400;
  position: relative;
  margin: 0.5rem auto 0 auto;
  width: fit-content;
  z-index: 1;
}
.reason h2 span::after {
  content: "";
  background: #fff;
  width: 30rem;
  height: 4.7rem;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  transform: skewX(-20deg) translateX(-50%);
}
.reason ul {
  margin-top: 2rem;
}
.reason ul li {
  margin-bottom: 1.2rem;
}
.reason ul li .num {
  font-size: 1.8rem;
  line-height: 1.5555555556;
  font-weight: 600;
  color: #75CED7;
  text-align: center;
}
.reason ul li h3 {
  font-size: 2.3rem;
  line-height: 1.5652173913;
  font-weight: 700;
  color: #0E7EAA;
  text-align: center;
  border-bottom: 1px solid #fff;
  padding-bottom: 1rem;
}
.reason ul li p {
  font-size: 1.4rem;
  line-height: 1.7857142857;
  width: 91%;
  margin: 0.5rem auto 0 auto;
}
.reason ul li p span {
  font-size: 1.2rem;
  line-height: 1.8333333333;
}
.reason ul li figure {
  width: 91%;
  margin: 2rem auto 0 auto;
}
.reason ul li figure img {
  filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2));
}

/*======================= PC =======================*/
@media screen and (min-width: 768px) {
  .reason {
    padding: 10rem 0 11.5rem 0;
  }
  .reason h2 span {
    font-size: 4rem;
    line-height: 1.475;
    font-weight: 700;
    margin-top: 1rem;
  }
  .reason h2 span::after {
    width: 39rem;
    height: 5.9rem;
  }
  .reason ul {
    margin-top: 6.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 3.5rem;
    justify-content: center;
    align-items: stretch;
  }
  .reason ul li {
    width: calc((100% - 7rem) / 3);
    margin-bottom: 0;
  }
  .reason ul li .num {
    font-size: 1.8rem;
    line-height: 1.5555555556;
    font-weight: 700;
  }
  .reason ul li h3 {
    font-size: 2.6rem;
    line-height: 1.3846153846;
    font-weight: 700;
    padding-bottom: 1rem;
  }
  .reason ul li p {
    font-size: 1.8rem;
    line-height: 1.6666666667;
    width: 96%;
    margin: 0.5rem auto 0 2rem;
  }
  .reason ul li p span {
    font-size: 1.4rem;
    line-height: 1.7142857143;
    display: block;
  }
  .reason ul li figure {
    width: 91%;
    margin: 2rem auto 0 auto;
  }
  .reason ul li figure img {
    filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2));
  }
  .reason ul li:first-child p, .reason ul li:nth-child(2) p, .reason ul li:nth-child(3) p {
    min-height: 8.5rem;
  }
}
/* 導入事例
----------------------------------------------------*/
.case {
  background: rgb(208, 236, 255);
  background: linear-gradient(143deg, rgb(208, 236, 255) 0%, rgb(222, 255, 255) 100%);
  padding: 6.2rem 0 4rem 0;
}
.case__head {
  background-color: #fff;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
  padding: 1.2rem 0 4rem 0;
}
.case__head h2 {
  font-size: 3rem;
  line-height: 1.9666666667;
  font-weight: 500;
  text-align: center;
  color: var(--main-color);
}
.case__head p {
  font-size: 1.6rem;
  line-height: 1.625;
  text-align: center;
}
.case ul {
  margin-top: 1rem;
}
.case ul li {
  background-color: #fff;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
  overflow: hidden;
  padding-bottom: 1rem;
  filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2));
  margin-bottom: 0.9rem;
}
.case ul li h3 {
  background-color: #0E7EAA;
  color: #fff;
  padding: 0.8rem 0;
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.3888888889;
  font-weight: 600;
}
.case ul li h3 span {
  font-size: 1.1rem;
  line-height: 2.2727272727;
  font-weight: 400;
  display: block;
}
.case ul li figure {
  width: 100%;
  aspect-ratio: 909/421;
}
.case ul li figure img {
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100%;
}
.case ul li .flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  width: 85%;
  margin: 0.5rem auto 0 auto;
}
.case ul li .flex .block {
  font-size: 1.1rem;
  line-height: 1.8181818182;
}
.case ul li .flex .block span {
  color: #EF7989;
  font-size: 1.9rem;
  line-height: 1.1578947368;
  font-weight: 600;
  display: block;
}

/*======================= PC =======================*/
@media screen and (min-width: 768px) {
  .case {
    padding: 6.2rem 0 12rem 0;
  }
  .case__head {
    background-color: #fff;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    padding: 1.2rem 0 4rem 0;
  }
  .case__head h2 {
    font-size: 3rem;
    line-height: 1.9666666667;
    font-weight: 500;
    text-align: center;
    color: var(--main-color);
  }
  .case__head p {
    font-size: 1.6rem;
    line-height: 1.625;
    text-align: center;
  }
  .case ul {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem 4rem;
    justify-content: flex-start;
    align-items: stretch;
    width: 94%;
    margin: 5rem auto 0 auto;
  }
  .case ul li {
    width: calc((100% - 4rem) / 2);
    padding-bottom: 1rem;
    filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2));
    margin-bottom: 1rem;
  }
  .case ul li .head-flex {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .case ul li .head-flex h2 {
    font-size: 4rem;
    line-height: 1.475;
    font-weight: 700;
    color: var(--main-color);
    text-align: center;
  }
  .case ul li .head-flex p {
    font-size: 2.4rem;
    line-height: 1.6666666667;
    font-weight: 500;
    text-align: center;
  }
  .case ul li h3 {
    padding: 1.5rem 0 1.3rem 0;
    text-align: center;
    font-size: 2.4rem;
    line-height: 1.4166666667;
    font-weight: 600;
  }
  .case ul li h3 span {
    font-size: 1.3rem;
    line-height: 1.9230769231;
    font-weight: 400;
    display: block;
  }
  .case ul li figure {
    width: 100%;
    aspect-ratio: 909/421;
  }
  .case ul li figure img {
    object-fit: cover;
    object-position: 50% 50%;
    width: 100%;
    height: 100%;
  }
  .case ul li .flex {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 80%;
    margin: 0.5rem auto 0 auto;
  }
  .case ul li .flex .block {
    font-size: 1.4rem;
    line-height: 1.9285714286;
  }
  .case ul li .flex .block span {
    font-size: 2.6rem;
    line-height: 1.1923076923;
    font-weight: 600;
  }
}
/* CTA
----------------------------------------------------*/
.cta {
  padding: 2.5rem 0 2rem 0;
}
.cta .block {
  background: rgb(106, 181, 248);
  background: linear-gradient(0deg, rgb(106, 181, 248) 0%, rgb(0, 188, 205) 100%);
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
  padding: 3.2rem 0;
}
.cta .block h2 {
  color: #fff;
  font-size: 1.8rem;
  line-height: 1.8888888889;
  font-weight: 500;
  text-align: center;
}
.cta .block h2 span {
  display: block;
  font-size: 2.3rem;
  line-height: 1.4782608696;
  font-weight: 700;
}
.cta .block p {
  color: #fff;
  font-size: 1.8rem;
  line-height: 1.8888888889;
  font-weight: 500;
  text-align: left;
  margin-top: 2rem;
  padding: 0 2rem;
}
.cta .block p span {
  display: block;
  font-size: 1.2rem;
  line-height: 2.5;
  font-weight: 500;
}
.cta .block figure {
  width: 75%;
  margin: 1.6rem auto 0 auto;
}
.cta__btn a {
  background: rgb(255, 255, 0);
  background: linear-gradient(-40deg, rgb(255, 255, 0) 0%, rgb(255, 110, 0) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82.5825825826%;
  margin: 2rem auto 0 auto;
  padding: 1.2rem 0;
  font-size: 1.7rem;
  line-height: 1.4705882353;
  font-weight: 700;
  border-radius: 3rem;
  -webkit-border-radius: 3rem;
  -moz-border-radius: 3rem;
  -ms-border-radius: 3rem;
  -o-border-radius: 3rem;
  border: 1px solid #fff;
}
.cta__btn02 a {
  background: rgb(255, 193, 0);
  background: linear-gradient(40deg, rgb(255, 193, 0) 0%, rgb(223, 91, 134) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 93%;
  margin: 2rem auto 0 auto;
  padding: 1.5rem 0;
  font-size: 1.7rem;
  line-height: 1.4705882353;
  font-weight: 700;
  border-radius: 3rem;
  -webkit-border-radius: 3rem;
  -moz-border-radius: 3rem;
  -ms-border-radius: 3rem;
  -o-border-radius: 3rem;
  border: 1px solid #fff;
}
.cta .block02 {
  padding: 3rem 0 0 0;
}
.cta .block02 h2 {
  font-size: 2.8rem;
  line-height: 1.6428571429;
  font-weight: 700;
  text-align: center;
  color: var(--main-color);
}
.cta .block02 p {
  font-size: 1.6rem;
  line-height: 1.6875;
  margin-top: 1rem;
}
.cta .block02 figure {
  margin-top: 2.2rem;
}

/*======================= PC =======================*/
@media screen and (min-width: 768px) {
  .cta .inner {
    max-width: 132rem;
  }
  .cta {
    padding: 2.5rem 0 0 0;
  }
  .cta .block {
    padding: 9.5rem 11% 5rem 11.5%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 0;
  }
  .cta .block .txt {
    width: 100%;
  }
  .cta .block h2 {
    color: #fff;
    font-size: 2.2rem;
    line-height: 1.5454545455;
    font-weight: 500;
    text-align: left;
  }
  .cta .block h2 span {
    display: block;
    font-size: 3.6rem;
    line-height: 1.4444444444;
    font-weight: 700;
  }
  .cta .block p {
    color: #fff;
    font-size: 2.2rem;
    line-height: 1.5454545455;
    font-weight: 500;
    text-align: left;
    margin-top: 2rem;
  }
  .cta .block p span {
    display: block;
    font-size: 1.4rem;
    line-height: 2.2857142857;
    font-weight: 500;
  }
  .cta .block figure {
    width: 120%;
    margin: 1.6rem auto 0 auto;
  }
  .cta .block figure img {
    object-fit: cover;
    object-position: 50% 50%;
    width: 100%;
    height: 100%;
  }
  .cta__btn a {
    max-width: 31rem;
    margin: 3rem auto 0 0;
  }
  .cta__btn02 a {
    max-width: 31rem;
    margin: 4.5rem auto 0 10%;
    padding: 1.5rem 0;
    font-size: 1.7rem;
    line-height: 1.4705882353;
    font-weight: 700;
    border-radius: 3rem;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    -ms-border-radius: 3rem;
    -o-border-radius: 3rem;
    border: 1px solid #fff;
  }
  .cta .block02 {
    margin: 2.5rem auto 0 auto;
    padding: 0 0 4rem 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 12%;
    justify-content: space-between;
    align-items: center;
  }
  .cta .block02 .txt {
    order: 2;
    width: 100%;
  }
  .cta .block02 h2 {
    font-size: 4rem;
    line-height: 1.475;
    font-weight: 700;
    text-align: left;
    margin-top: 4rem;
  }
  .cta .block02 p {
    font-size: 1.6rem;
    line-height: 1.6875;
    margin-top: 2rem;
    width: 70%;
  }
  .cta .block02 figure {
    margin-top: 0;
    order: 1;
  }
}
/* 導入までの流れ
----------------------------------------------------*/
.flow {
  background-color: #F0F5F7;
  padding: 5rem 0;
}
.flow__head h2 {
  font-size: 3rem;
  line-height: 1.7;
  font-weight: 500;
}
.flow__head h2 span {
  display: block;
  color: #fff;
  font-size: 3rem;
  line-height: 1.7;
  font-weight: 400;
  position: relative;
  margin: 0.5rem auto 0 auto;
  width: fit-content;
  z-index: 1;
}
.flow__head h2 span::after {
  content: "";
  background: rgb(106, 181, 248);
  background: linear-gradient(270deg, rgb(106, 181, 248) 0%, rgb(0, 188, 205) 100%);
  width: 24rem;
  height: 4.7rem;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  transform: skewX(-20deg) translateX(-50%);
}
.flow__head p {
  font-size: 1.6rem;
  line-height: 1.6875;
  margin-top: 1.5rem;
  margin-left: 1rem;
  white-space: nowrap;
}
.flow ul {
  margin-top: 2rem;
}
.flow ul li {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  background-color: #fff;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2);
  padding: 0.3rem 3rem 2.5rem 3rem;
  position: relative;
  margin-bottom: 3rem;
}
.flow ul li .block {
  font-size: 2.3rem;
  line-height: 2;
  font-weight: 600;
  color: var(--main-color);
  width: 30%;
  text-align: center;
}
.flow ul li .block img {
  display: block;
  margin: auto;
}
.flow ul li .block p {
  margin-top: 0.5rem;
}
.flow ul li h3 {
  font-size: 1.6rem;
  line-height: 1.3125;
  font-weight: 600;
  width: calc(100% - 5rem - 30%);
  margin-top: 2rem;
}
.flow ul li::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 14px solid #0E7EAA;
  border-bottom: 0;
  position: absolute;
  bottom: -2.3rem;
  left: 50%;
  transform: translateX(-50%);
}
.flow ul li:first-child .block img {
  width: 50%;
}
.flow ul li:nth-child(2) .block img {
  width: 70%;
}
.flow ul li:nth-child(3) .block img {
  width: 50%;
}
.flow ul li:nth-child(4) .block img {
  width: 45%;
}
.flow ul li:nth-child(4)::after {
  content: none;
}

@media screen and (min-width: 768px) {
  .flow {
    padding: 7rem 0 10rem 0;
  }
  .flow__head h2 {
    font-size: 2.4rem;
    line-height: 1.5833333333;
    font-weight: 500;
  }
  .flow__head h2 span {
    font-size: 4rem;
    line-height: 1.475;
    font-weight: 700;
    margin-top: 1rem;
  }
  .flow__head h2 span::after {
    width: 32rem;
    height: 5.8rem;
  }
  .flow__head p {
    font-size: 1.6rem;
    line-height: 1.6875;
    margin-top: 1.5rem;
    margin-left: 1rem;
    text-align: center;
  }
  .flow ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 4.2rem;
    justify-content: center;
    align-items: stretch;
    width: 96%;
    margin: 3rem auto 0 auto;
  }
  .flow ul li {
    width: calc(100% - 3.15rem);
    display: block;
    padding: 0.5rem 0 1rem 0;
    margin-bottom: 0;
  }
  .flow ul li .block {
    font-size: 3rem;
    line-height: 1.5333333333;
    font-weight: 600;
    color: var(--main-color);
    width: 100%;
    margin: 0;
  }
  .flow ul li .block img {
    display: block;
    margin: auto;
  }
  .flow ul li .block p {
    margin-top: 0.5rem;
  }
  .flow ul li h3 {
    font-size: 1.8rem;
    line-height: 1.1666666667;
    font-weight: 600;
    width: 100%;
    margin-top: 1.5rem;
    text-align: center;
  }
  .flow ul li::after {
    top: 50%;
    bottom: auto;
    left: auto;
    right: -3rem;
    transform: translateY(-50%) rotate(-90deg);
  }
  .flow ul li:first-child h3 {
    margin-top: 3rem;
  }
  .flow ul li:first-child .block img {
    max-width: 5.30805rem;
    margin-top: 10%;
  }
  .flow ul li:nth-child(2) .block img {
    max-width: 8.86724rem;
    margin-top: 5%;
  }
  .flow ul li:nth-child(3) .block img {
    max-width: 7.05568rem;
    margin-top: 1%;
  }
  .flow ul li:nth-child(4) .block img {
    max-width: 5.19918rem;
  }
  .flow ul li:nth-child(4)::after {
    content: none;
  }
}
/* よくある質問
----------------------------------------------------*/
.qa {
  padding: 5rem 0;
  background: rgb(208, 236, 255);
  background: linear-gradient(-143deg, rgb(208, 236, 255) 0%, rgb(222, 255, 255) 100%);
}
.qa h2 {
  font-size: 3rem;
  line-height: 1.7;
  font-weight: 500;
}
.qa h2 span {
  display: block;
  color: #fff;
  font-size: 3rem;
  line-height: 1.7;
  font-weight: 400;
  position: relative;
  margin: 0.5rem auto 0 auto;
  width: fit-content;
  z-index: 1;
}
.qa h2 span::after {
  content: "";
  background: rgb(106, 181, 248);
  background: linear-gradient(270deg, rgb(106, 181, 248) 0%, rgb(0, 188, 205) 100%);
  width: 22rem;
  height: 4.7rem;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  transform: skewX(-20deg) translateX(-50%);
}
.qa .inner {
  background-color: #fff;
  border-radius: 3rem;
  -webkit-border-radius: 3rem;
  -moz-border-radius: 3rem;
  -ms-border-radius: 3rem;
  -o-border-radius: 3rem;
  padding: 1.5rem 1.5rem;
}
.qa dl {
  margin-top: 2rem;
}
.qa dl dt {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.8rem;
  line-height: 1.4444444444;
  font-weight: 700;
  color: var(--main-color);
  border-top: 2px solid #D8DDDD;
  padding: 1rem 3rem 1rem 0;
  position: relative;
}
.qa dl dt:first-child {
  border-top: none;
}
.qa dl dt span {
  font-size: 2.4rem;
  line-height: 2;
  font-weight: 700;
}
.qa dl dt::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 14px solid #8CCADD;
  border-bottom: 0;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s;
}
.qa dl dt.active::after {
  transform: rotate(180deg);
}
.qa dl dd {
  font-size: 1.4rem;
  line-height: 1.7857142857;
  font-weight: 500;
  padding: 0 0 1rem 0;
  width: 84%;
  margin: 0 0 0 auto;
  display: none;
}

/*======================= PC =======================*/
@media screen and (min-width: 768px) {
  .qa {
    padding: 12.5rem 0;
  }
  .qa h2 {
    font-size: 2.4rem;
    line-height: 1.5833333333;
    font-weight: 500;
  }
  .qa h2 span {
    font-size: 4rem;
    line-height: 1.475;
    font-weight: 700;
    margin-top: 1rem;
  }
  .qa h2 span::after {
    width: 31rem;
    height: 5.8rem;
  }
  .qa .inner {
    padding: 5rem 1.5rem;
  }
  .qa dl {
    width: 80%;
    margin: 3rem auto 0 auto;
  }
  .qa dl dt {
    font-size: 2rem;
    line-height: 2.5;
    font-weight: 700;
    padding: 1rem 3rem 1rem 2rem;
  }
  .qa dl dt:first-child {
    border-top: none;
  }
  .qa dl dt span {
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
  }
  .qa dl dt::after {
    content: none;
  }
  .qa dl dt.active::after {
    transform: rotate(180deg);
  }
  .qa dl dd {
    font-size: 1.4rem;
    line-height: 1.7857142857;
    font-weight: 500;
    padding: 0 0 2.7rem 0;
    width: 91%;
    margin: -1rem 0 0 auto;
    display: block;
  }
}
/* 資料請求
----------------------------------------------------*/
.contact {
  padding: 3rem 0 5rem 0;
}
.contact h2 {
  font-size: 3rem;
  line-height: 1.7;
  font-weight: 500;
}
.contact h2 span {
  display: block;
  color: #fff;
  font-size: 3rem;
  line-height: 1.7;
  font-weight: 400;
  position: relative;
  margin: 0.5rem auto 0 auto;
  width: fit-content;
  z-index: 1;
}
.contact h2 span::after {
  content: "";
  background: rgb(106, 181, 248);
  background: linear-gradient(270deg, rgb(106, 181, 248) 0%, rgb(0, 188, 205) 100%);
  width: 17rem;
  height: 4.7rem;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  transform: skewX(-20deg) translateX(-50%);
}
.contact h2 + p {
  font-size: 1.4rem;
  line-height: 1.7142857143;
  margin-top: 3.5rem;
}
.contact .privacy-check {
  margin-top: 2.5rem;
  font-size: 1.6rem;
  line-height: 1.875;
  font-weight: 500;
}
.contact .privacy-check input[type=checkbox] {
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 0.3rem;
  -webkit-border-radius: 0.3rem;
  -moz-border-radius: 0.3rem;
  -ms-border-radius: 0.3rem;
  -o-border-radius: 0.3rem;
  margin-right: 1rem;
  border: 1px solid #B5B5B6;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-top: -0.5rem;
}
.contact .privacy-check input[type=checkbox]:checked:before {
  position: absolute;
  top: -3px;
  left: 6px;
  transform: rotate(50deg);
  width: 10px;
  height: 20px;
  border-right: 2px solid var(--main-color);
  border-bottom: 2px solid var(--main-color);
  content: "";
}
.contact .privacy-check label {
  padding-left: 0.5rem;
  display: inline-block;
}
.contact ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 4rem;
  width: 98%;
  margin: 3rem auto 0 auto;
}
.contact ul li {
  font-size: 1.6rem;
  line-height: 1.75;
  font-weight: 600;
}
.contact ul li input[type=checkbox] {
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 0.3rem;
  -webkit-border-radius: 0.3rem;
  -moz-border-radius: 0.3rem;
  -ms-border-radius: 0.3rem;
  -o-border-radius: 0.3rem;
  border: 1px solid #B5B5B6;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-top: -0.5rem;
}
.contact ul li input[type=checkbox]:checked:before {
  position: absolute;
  top: -3px;
  left: 6px;
  transform: rotate(50deg);
  width: 10px;
  height: 20px;
  border-right: 2px solid var(--main-color);
  border-bottom: 2px solid var(--main-color);
  content: "";
}
.contact ul li label {
  padding-left: 0.5rem;
  display: inline-block;
}
.contact .form-txt {
  border: 1px solid #B5B5B6;
  background-color: #fff;
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;
  padding: 1rem 1rem;
  width: 100%;
}
.contact dl {
  margin-top: 2rem;
}
.contact dl dt {
  font-size: 1.6rem;
  line-height: 1.75;
}
.contact dl dt span {
  background-color: var(--main-color);
  display: inline-block;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 400;
  padding: 0 0.8rem;
  margin-left: 0.7rem;
  margin-bottom: 0.5rem;
}
.contact dl dd {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}
.contact .submit-btn {
  width: 58%;
  margin: 4rem auto 0 auto;
  display: block;
  border-radius: 3rem;
  -webkit-border-radius: 3rem;
  -moz-border-radius: 3rem;
  -ms-border-radius: 3rem;
  -o-border-radius: 3rem;
  padding: 0.8rem 0;
  font-size: 1.8rem;
  line-height: 2;
  font-weight: 700;
  background: rgb(88, 193, 150);
  background: linear-gradient(90deg, rgb(88, 193, 150) 0%, rgb(0, 110, 237) 100%);
  color: #fff;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .contact {
    padding: 4.5rem 0 8.5rem 0;
  }
  .contact .inner {
    max-width: 88rem;
  }
  .contact h2 {
    font-size: 2.4rem;
    line-height: 1.5833333333;
    font-weight: 500;
  }
  .contact h2 span {
    font-size: 4rem;
    line-height: 1.475;
    font-weight: 700;
    margin-top: 1rem;
  }
  .contact h2 span::after {
    width: 25rem;
    height: 5.8rem;
  }
  .contact h2 + p {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-top: 2.5rem;
  }
  .contact .privacy-check {
    margin-top: 3.5rem;
    font-size: 1.6rem;
    line-height: 1.5;
  }
  .contact ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 4rem;
    width: 98%;
    margin: 6rem auto 0 auto;
  }
  .contact ul li input[type=checkbox] {
    position: relative;
    width: 25px;
    height: 25px;
    border-radius: 0.3rem;
    -webkit-border-radius: 0.3rem;
    -moz-border-radius: 0.3rem;
    -ms-border-radius: 0.3rem;
    -o-border-radius: 0.3rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-top: -0.5rem;
  }
  .contact ul li input[type=checkbox]:checked:before {
    position: absolute;
    top: 1px;
    left: 4px;
    transform: rotate(50deg);
    width: 10px;
    height: 16px;
    content: "";
  }
  .contact ul li label {
    padding-left: 0.5rem;
    display: inline-block;
  }
  .contact .form-txt {
    padding: 1.5rem;
    width: 100%;
  }
  .contact dl {
    margin-top: 3rem;
  }
  .contact dl dt {
    font-size: 1.6rem;
    line-height: 1.75;
    margin-bottom: 0.8rem;
  }
  .contact dl dt span {
    display: inline-block;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.75;
    padding: 0 0.5rem;
    margin-left: 0.7rem;
    margin-bottom: 0.5rem;
  }
  .contact dl dd {
    margin-top: 0.5rem;
    margin-bottom: 1.2rem;
  }
  .contact .submit-btn {
    width: 58%;
    max-width: 20rem;
    margin: 5rem auto 0 auto;
    display: block;
    border-radius: 3rem;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    -ms-border-radius: 3rem;
    -o-border-radius: 3rem;
    padding: 0.8rem 0;
    font-size: 1.8rem;
    line-height: 2;
  }
}
.form-complate {
  text-align: center;
  max-width: 104rem;
  margin: 15rem auto 0 auto;
  min-height: 70vh;
  font-size: 1.8rem;
  line-height: 2;
  font-weight: 500;
}
.form-complate__btn a {
  max-width: 32rem;
  margin: 4rem auto 0 auto;
  display: block;
  border-radius: 3rem;
  -webkit-border-radius: 3rem;
  -moz-border-radius: 3rem;
  -ms-border-radius: 3rem;
  -o-border-radius: 3rem;
  padding: 0.8rem 0;
  font-size: 1.8rem;
  line-height: 2;
  font-weight: 700;
  background: rgb(255, 255, 0);
  background: linear-gradient(-40deg, rgb(255, 255, 0) 0%, rgb(255, 110, 0) 100%);
  color: #fff;
  text-align: center;
}

.policy-error {
  display: none;
  color: #d00;
  margin-bottom: 10px;
  font-size: 14px;
}

fieldset:disabled {
  opacity: 0.5;
  cursor: pointer;
}/*# sourceMappingURL=style.css.map */