@charset "UTF-8";
section.carriro01 {
  padding-bottom: 6em;
}
section.carriro01 .container > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 4em;
}
section.carriro01 .container > div:first-child > div:first-child {
  width: 45%;
}
section.carriro01 .container > div:first-child > figure {
  width: 50%;
}
section.carriro01 .container > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1em;
  justify-content: start; /* 左寄せ */
  margin-bottom: 3em;
}
section.carriro01 .container > ul li {
  width: 200px;
  padding: 1em;
  text-align: center;
  background-color: #F6F6F6;
}
section.carriro02 {
  padding-bottom: 6em;
}
section.carriro02 .container > h2 + p {
  padding-bottom: 3em;
}
section.carriro02 .container > div {
  width: calc(100% - 200px);
  background-color: #31B1B0;
  padding: 40px;
  border-radius: 0.8em;
  color: white;
  position: relative;
}
section.carriro02 .container > div::before {
  content: "";
  display: block;
  position: absolute;
  right: -200px;
  top: 0;
  width: 120px;
  aspect-ratio: 250/672;
  background: url(../images/pages/flow/img02.png) no-repeat center center;
  background-size: contain;
}
section.carriro02 .container > div > div:not(:last-child) {
  padding-bottom: 2em;
}
section.carriro02 .container > div > div h3 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 0.3em;
}
section.carriro02 .container > div > div h3 > span {
  display: inline-block;
  font-weight: 700;
}
section.carriro02 .container > div > div h3 > span:first-child {
  color: #EDEE00;
  border: 1px solid #EDEE00;
  padding: 0 0.3em;
  margin-right: 0.5em;
  border-radius: 0.2em;
  font-size: 150%;
}
section.carriro02 .container > div > div h3 > span:last-child {
  font-size: 200%;
}
section.carriro02 .container > div > div h3:last-of-type > p {
  line-height: 1.4;
}
section.carriro02 .container > div > div h3:last-of-type > p span {
  display: block;
}
section.carriro02 .container > div > div h3:last-of-type > p span:first-child {
  font-size: 115%;
}
section.carriro02 .container > div > div h3:last-of-type > p span:last-child {
  font-size: 200%;
}
section.carriro02 .container > div > div > p.s {
  font-size: 85%;
}
section.carriro02 .container > div > div ul li {
  padding-left: 1em;
  position: relative;
}
section.carriro02 .container > div > div ul li::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  display: block;
  position: absolute;
  left: 0;
  top: 0.6em;
  background-color: #EDEE00;
  border-radius: 50%;
}
section.carriro03 {
  padding-bottom: 4em;
}
section.carriro03 .container > p {
  padding-bottom: 2em;
}
section.carriro03 .container table {
  border-collapse: collapse;
  border-top: 1px solid #EEEEEE;
  border-left: 1px solid #EEEEEE;
}
section.carriro03 .container table td {
  border-bottom: 1px solid #EEEEEE;
  border-right: 1px solid #EEEEEE;
  border-top: 1px solid #EEEEEE;
  border-left: 1px solid #EEEEEE;
  padding: 0.8em 1em;
}
section.carriro03 .container table tr:first-child td {
  font-weight: 700;
}
section.carriro03 .container table tr:first-child td:first-child {
  background-color: #31B1B0;
  color: white;
}
section.carriro03 .container table tr:not(:first-child) td:first-child {
  font-size: 115%;
  font-weight: 700;
  background-color: #F5FFFF;
}
section.carriro03 .container table tr:not(:first-child) td:first-child span:first-child {
  padding-right: 0.5em;
}
section.carriro03 .container table tr:not(:first-child) td:first-child span:last-child {
  color: #31B1B0;
}
section.carriro03 .container table tr:not(:first-child) td:not(:first-child) span:first-child {
  display: none;
}
section.carriro03 .container table tr:not(:first-child) td:last-child {
  background-color: #f6f6f6;
}
section.carriro04 {
  padding: 4em 0 6em 0;
  background-color: #31B1B0;
}
section.carriro04 .container > div {
  display: flex;
  justify-content: space-between;
}
section.carriro04 .container > div > div {
  width: 47%;
  padding: 30px;
  background-color: white;
  border-radius: 0.8em;
  display: flex;
  flex-direction: column;
}
section.carriro04 .container > div > div h4 {
  font-weight: 700;
  font-size: 115%;
  padding-bottom: 0.8em;
}
section.carriro04 .container > div > div h3 {
  font-size: 180%;
  color: #31B1B0;
  font-weight: 700;
  padding-bottom: 0.5em;
}
section.carriro04 .container > div > div h3 + p {
  padding-bottom: 1em;
}
section.carriro04 .container > div > div img {
  width: 100%;
  height: auto;
  margin-bottom: 1.5em;
}
section.carriro04 .container > div > div > p:last-child {
  margin-top: auto;
}
section.carriro04 .container > div > div:last-child img {
  width: 80%;
  margin: 0 auto 1.5em auto;
}
section.wp01, section.basic01 {
  padding-bottom: 6em;
}
section.wp01 .container, section.basic01 .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
section.wp01 .container > div, section.basic01 .container > div {
  width: 48%;
}
section.wp01 .container > div ul, section.basic01 .container > div ul {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
  margin-bottom: 2em;
}
section.wp01 .container > div ul li, section.basic01 .container > div ul li {
  background-color: #31B1B0;
  width: 100%;
  text-align: center;
  color: white;
  font-weight: 700;
  padding: 0.3em 0;
  border-radius: 0.4em;
}
section.wp01 .container > div p, section.basic01 .container > div p {
  width: 80%;
}
section.wp01 .container > img, section.basic01 .container > img {
  width: 48%;
}
section.basic01 .container > div p {
  width: 100%;
}
section.wp02, section.basic02 {
  padding-bottom: 8em;
}
section.wp02 .container > div, section.basic02 .container > div {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 1.6em;
       column-gap: 1.6em;
}
section.wp02 .container > div > div, section.basic02 .container > div > div {
  width: 31.5%;
  display: flex;
  flex-direction: column;
  padding: 1.6em;
  border: 1px solid #DFDFDF;
  border-radius: 0.8em;
}
section.wp02 .container > div > div h4, section.basic02 .container > div > div h4 {
  font-size: 120%;
  font-weight: 700;
  padding-bottom: 1em;
}
section.wp02 .container > div > div img, section.basic02 .container > div > div img {
  width: 100%;
  height: auto;
  margin-bottom: 1.4em;
}
section.wp02 .container > div > div p::before, section.basic02 .container > div > div p::before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  display: block;
  margin: 0 auto 1em auto;
  background: url(../svgs/arrow07.svg) no-repeat center center;
  background-size: contain;
}
section.basic02 .container > div > div p:first-of-type span {
  display: none;
}
section.basic02 .container > div > div p:last-of-type::before {
  content: none;
}
section.wp03, section.basic03 {
  padding-bottom: 8em;
}
section.wp03 .container > div, section.basic03 .container > div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 1.6em;
}
section.wp03 .container > div > div, section.basic03 .container > div > div {
  width: 49%;
  padding: 1.6em;
  border: 1px solid #DFDFDF;
  border-radius: 0.8em;
}
section.wp03 .container > div > div h4, section.basic03 .container > div > div h4 {
  font-size: 120%;
  font-weight: 700;
  padding-bottom: 1em;
}
section.wp03 .container > div > div h4::before, section.basic03 .container > div > div h4::before {
  content: "";
  display: inline-block;
  margin-right: 0.5em;
  width: 1.2em;
  height: 1.2em;
  background: url(../svgs/icon09.svg) no-repeat center center;
  background-size: contain;
  transform: translateY(0.2em);
}
section.wp03 .container > div > div img, section.basic03 .container > div > div img {
  width: 100%;
  height: auto;
  margin-bottom: 1.6em;
}
section.wp04, section.basic04 {
  padding-bottom: 8em;
}
section.wp04 .container figure.wp-block-table, section.basic04 .container figure.wp-block-table {
  padding-bottom: 1.5em;
}
section.wp04 .container figure.wp-block-table table, section.basic04 .container figure.wp-block-table table {
  border-left: none;
  border-top: 1px solid #EEEEEE;
}
section.wp04 .container figure.wp-block-table table td, section.basic04 .container figure.wp-block-table table td {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #EEEEEE;
  padding: 1em 0;
}
section.wp04 .container figure.wp-block-table table td:first-child, section.basic04 .container figure.wp-block-table table td:first-child {
  padding-left: 1em;
  width: 25%;
  vertical-align: top;
  font-weight: 700;
}
section.wp04 .container > p:last-child, section.basic04 .container > p:last-child {
  font-size: 85%;
}
section.wp05, section.basic05 {
  padding: 4em 0;
  background-color: #F6F6F6;
}
section.wp05 .container, section.basic05 .container {
  background-color: #31B1B0;
  padding: 40px 50px;
  border-radius: 0.5em;
}
section.wp05 .container h3, section.basic05 .container h3 {
  font-size: 200%;
  font-weight: 700;
  text-align: center;
  padding-bottom: 1em;
  color: white;
}
section.wp05 .container > p, section.basic05 .container > p {
  color: white;
  padding-bottom: 1.5em;
}
section.wp05 .container > div, section.basic05 .container > div {
  display: flex;
  justify-content: space-between;
}
section.wp05 .container > div > p, section.basic05 .container > div > p {
  width: 48%;
}

@media screen and (max-width: 1280px) {
  section.wp05, section.basic05 {
    padding: 4em 3%;
  }
}
@media screen and (max-width: 900px) {
  section.carriro01 .container > div:first-child {
    display: block;
  }
  section.carriro01 .container > div:first-child > div:first-child {
    width: 100%;
    padding-bottom: 30px;
  }
  section.carriro01 .container > div:first-child > figure {
    width: 100%;
  }
  section.carriro02 .container > h2 {
    font-size: 6.6vw;
  }
  section.carriro02 .container > h2 + p {
    padding-right: 160px;
  }
  section.carriro02 .container > div {
    width: 100%;
    padding: 40px 3%;
  }
  section.carriro02 .container > div::before {
    top: -240px;
    right: 20px;
    z-index: -1;
  }
  section.carriro02 .container > div > div h3 {
    align-items: flex-start;
    line-height: 1.4;
  }
  section.carriro02 .container > div > div h3 span:first-child {
    transform: translateY(0.2em);
  }
  section.wp01 .container, section.basic01 .container {
    display: block;
  }
  section.wp01 .container > div, section.basic01 .container > div {
    width: 100%;
  }
  section.wp01 .container > div p, section.basic01 .container > div p {
    width: 100%;
    padding-bottom: 1em;
  }
  section.wp01 .container > img, section.basic01 .container > img {
    width: 80%;
    margin: 0 auto;
  }
  section.wp02 .container > div, section.basic02 .container > div {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 4%;
         column-gap: 4%;
    row-gap: 1.6em;
  }
  section.wp02 .container > div > div, section.basic02 .container > div > div {
    width: 48%;
  }
}
@media screen and (max-width: 768px) {
  section.carriro01 .container > ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 1em;
  }
  section.carriro01 .container > ul li {
    width: 47%;
    font-size: 3vw;
  }
  section.carriro02 .container > div > div h3 {
    font-size: 4vw;
  }
  section.carriro03 .container table {
    border: none;
  }
  section.carriro03 .container table td {
    display: block;
    border: none;
  }
  section.carriro03 .container table tr:first-child {
    display: none;
  }
  section.carriro03 .container table tr:not(:first-child) td:not(:first-child) span:first-child {
    display: block;
    font-size: 115%;
    font-weight: 700;
    padding-bottom: 0.5em;
  }
  section.carriro03 .container table tr:not(:first-child) td:last-child {
    margin-bottom: 1.6em;
  }
  section.carriro04 .container > div {
    display: block;
  }
  section.carriro04 .container > div > div {
    width: 100%;
  }
  section.carriro04 .container > div > div:first-child {
    margin-bottom: 1.6em;
  }
  section.basic01 .container > img {
    width: 100%;
  }
  section.wp04 .container figure.wp-block-table table td:first-child, section.basic04 .container figure.wp-block-table table td:first-child {
    width: 100%;
    white-space: nowrap;
  }
  section.wp04 .container figure.wp-block-table table td:last-child, section.basic04 .container figure.wp-block-table table td:last-child {
    padding-left: 1.8em;
  }
  section.wp05 .container, section.basic05 .container {
    padding: 40px 3%;
  }
  section.wp05 .container > div, section.basic05 .container > div {
    display: block;
  }
  section.wp05 .container > div p, section.basic05 .container > div p {
    width: 80%;
    margin: 0 auto;
  }
  section.wp05 .container > div p:first-child, section.basic05 .container > div p:first-child {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 640px) {
  section.wp02 .container > div, section.wp03 .container > div, section.basic02 .container > div, section.basic03 .container > div {
    display: block;
  }
  section.wp02 .container > div > div, section.wp03 .container > div > div, section.basic02 .container > div > div, section.basic03 .container > div > div {
    width: 100%;
  }
  section.wp02 .container > div > div:not(:last-child), section.wp03 .container > div > div:not(:last-child), section.basic02 .container > div > div:not(:last-child), section.basic03 .container > div > div:not(:last-child) {
    margin-bottom: 1.6em;
  }
}
@media screen and (max-width: 540px) {
  section.wp04 .container figure.wp-block-table table td, section.basic04 .container figure.wp-block-table table td {
    display: block;
  }
}
@media screen and (max-width: 480px) {
  section.wp05 .container > div p, section.basic05 .container > div p {
    width: 94%;
  }
}