@charset "UTF-8";
.intro {
  background-color: var(--bgcolor-deep-blue);
  color: var(--color-white);
  text-align: center;
  padding-bottom: 80px;
  position: relative;
  margin-top: -2px;
  font-size: 16px;
}
@media screen and (max-width: 800px) {
  .intro {
    padding: calc(40 * var(--xd-px));
    padding-top: calc(10 * var(--xd-px));
    font-size: calc(28 * var(--xd-px));
    text-align: left;
  }
}

.flow {
  background-image: url(../global-img/bg_gray.png);
  background-size: 30px;
  padding-bottom: 82px;
  padding-top: 80px;
}
@media screen and (max-width: 800px) {
  .flow {
    padding-bottom: calc(57 * var(--xd-px));
    background-size: calc(30 * var(--xd-px));
    padding-top: calc(80 * var(--xd-px));
  }
}
.flow .flow-inner {
  width: min(840px, 100%);
  margin: auto;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner {
    width: calc(710 * var(--xd-px));
  }
}
.flow .flow-inner .overview {
  padding: 20px;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 40px;
  background-color: var(--color-white);
  border: 2px solid var(--color-bgwhite-textblack);
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .overview {
    padding: calc(20 * var(--xd-px));
    margin-top: calc(40 * var(--xd-px));
    margin-bottom: calc(53 * var(--xd-px));
  }
}
.flow .flow-inner .overview .overview-text {
  font-size: 16px;
  line-height: 1.625;
  text-align: center;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .overview .overview-text {
    margin: 0 calc(10 * var(--xd-px));
    text-align: left;
    font-size: calc(28 * var(--xd-px));
    line-height: 1.5;
  }
}
.flow .flow-inner .overview .overview-img {
  width: 100%;
  margin-top: 20px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .overview .overview-img {
    margin-top: calc(20 * var(--xd-px));
  }
}
.flow .flow-inner .flow-box {
  overflow: hidden;
}
.flow .flow-inner .flow-box .super {
  text-align: center;
  margin-bottom: 12px;
  font-size: 20px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-box .super {
    margin-bottom: calc(20 * var(--xd-px));
    font-size: calc(28 * var(--xd-px));
  }
}
.flow .flow-inner .flow-box .super::before {
  content: "＼　";
  font-weight: var(--fontweight-extrabold);
}
.flow .flow-inner .flow-box .super::after {
  content: "　／";
  font-weight: var(--fontweight-extrabold);
}
.flow .flow-inner .flow-box .content {
  background: var(--color-white);
  border: 2px solid var(--color-bgwhite-textblack);
}
.flow .flow-inner .flow-box .content .flow-title {
  display: flex;
  height: 70px;
  font-size: 20px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-box .content .flow-title {
    font-size: calc(30 * var(--xd-px));
    height: calc(122 * var(--xd-px));
  }
}
.flow .flow-inner .flow-box .content .flow-title .side-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--color-bgwhite-textblack);
  color: var(--color-white);
  font-weight: var(--fontweight-extrabold);
  width: 140px;
  height: 100%;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-box .content .flow-title .side-label {
    width: calc(150 * var(--xd-px));
  }
}
.flow .flow-inner .flow-box .content .flow-title .side-label span {
  font-size: 14px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-box .content .flow-title .side-label span {
    font-size: calc(20 * var(--xd-px));
  }
}
.flow .flow-inner .flow-box .content .flow-title .highlight {
  display: flex;
  align-items: center;
  background: #FFDF04;
  font-weight: bold;
  padding: 10px 40px;
  margin-bottom: 20px;
  width: 100%;
  height: 100%;
  color: var(--color-bggray-textblack);
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-box .content .flow-title .highlight {
    padding: calc(16 * var(--xd-px));
    margin-bottom: calc(20 * var(--xd-px));
  }
}
.flow .flow-inner .flow-box .content .flow-main {
  padding: 20px 0;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-box .content .flow-main {
    padding: calc(20 * var(--xd-px)) 0;
  }
}
.flow .flow-inner .flow-box .content .flow-main .fin {
  font-size: 16px;
  line-height: 1.625;
  margin-top: 20px;
  padding: 0 20px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-box .content .flow-main .fin {
    font-size: calc(28 * var(--xd-px));
    line-height: 1.5;
    margin-top: calc(20 * var(--xd-px));
    padding: 0 calc(20 * var(--xd-px));
  }
}
.flow .flow-inner .flow-box .content .flow-main .image {
  padding: 0 20px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-box .content .flow-main .image {
    padding: 0 calc(20 * var(--xd-px));
  }
}
.flow .flow-inner .flow-box .content .explanation {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-box .content .explanation {
    gap: calc(10 * var(--xd-px));
    row-gap: calc(20 * var(--xd-px));
    margin-bottom: calc(20 * var(--xd-px));
    flex-wrap: wrap;
  }
}
.flow .flow-inner .flow-box .content .explanation img {
  display: block;
  width: 26px;
  height: 26px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-box .content .explanation img {
    width: calc(26 * var(--xd-px));
    height: calc(26 * var(--xd-px));
  }
}
.flow .flow-inner .flow-box .content .explanation div {
  background: var(--bgcolor-lightgray);
  padding: 16px;
  border-radius: 16px;
  text-align: center;
  font-weight: var(--fontweight-extrabold);
  font-size: 20px;
  color: var(--color-bggray-textblack);
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-box .content .explanation div {
    padding: calc(16 * var(--xd-px));
    border-radius: calc(16 * var(--xd-px));
    font-size: calc(29 * var(--xd-px));
    min-width: calc(230 * var(--xd-px));
  }
}
.flow .flow-inner .flow-box .content .explanation span {
  font-size: 14px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-box .content .explanation span {
    font-size: calc(20 * var(--xd-px));
  }
}
.flow .flow-inner .flow-triangle {
  color: var(--color-bgwhite-textblack);
  margin: 40px auto;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-triangle {
    margin: calc(40 * var(--xd-px)) auto;
  }
}
.flow .flow-inner .flow-plus {
  width: 36px;
  margin: 8px auto;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-plus {
    width: calc(36 * var(--xd-px));
    margin: calc(10 * var(--xd-px)) auto;
  }
}
.flow .flow-inner .flow-plus img {
  width: 100%;
}
.flow .flow-inner .flow-x3 {
  width: 78px;
  margin: 20px auto;
  margin-bottom: 12px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-x3 {
    width: calc(79 * var(--xd-px));
    margin: calc(20 * var(--xd-px)) auto;
    margin-bottom: calc(12 * var(--xd-px));
  }
}
.flow .flow-inner .flow-x3 img {
  width: 100%;
}
.flow .flow-inner .flow-x3-caption {
  font-size: 16px;
  color: var(--color-bgwhite-textblack);
  text-align: center;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .flow-x3-caption {
    font-size: calc(20 * var(--xd-px));
  }
}
.flow .flow-inner .tool {
  background-color: #D8EEFF;
  border: 2px solid var(--color-bgwhite-textblack);
  margin-top: 40px;
  padding: 40px 0;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .tool {
    padding: calc(30 * var(--xd-px));
    margin-top: calc(30 * var(--xd-px));
  }
}
.flow .flow-inner .tool .tool-about {
  text-align: center;
  font-size: 24px;
  font-weight: var(--fontweight-extrabold);
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .tool .tool-about {
    font-size: calc(30 * var(--xd-px));
  }
}
.flow .flow-inner .tool .tool-list {
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  justify-content: space-evenly;
  margin-top: 40px;
  margin-bottom: 40px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .tool .tool-list {
    margin-top: calc(30 * var(--xd-px));
    margin-bottom: calc(30 * var(--xd-px));
  }
}
.flow .flow-inner .tool .tool-list-title {
  font-size: 18px;
  font-weight: var(--fontweight-extrabold);
  text-align: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .tool .tool-list-title {
    font-size: calc(16 * var(--xd-px));
    margin-bottom: calc(17 * var(--xd-px));
  }
}
.flow .flow-inner .tool .tool-list-caption {
  font-size: 14px;
  line-height: 1.4285714286;
  text-align: center;
  margin-top: 12px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .tool .tool-list-caption {
    font-size: calc(12 * var(--xd-px));
    line-height: 1.6666666667;
    margin-top: calc(12 * var(--xd-px));
  }
}
.flow .flow-inner .tool .tool-list .tool-list1, .flow .flow-inner .tool .tool-list .tool-list2, .flow .flow-inner .tool .tool-list .tool-list3 {
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 20px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .tool .tool-list .tool-list1, .flow .flow-inner .tool .tool-list .tool-list2, .flow .flow-inner .tool .tool-list .tool-list3 {
    border-radius: 0;
    padding: calc(14 * var(--xd-px));
  }
}
.flow .flow-inner .tool .tool-list .tool-list1-img {
  width: 98px;
  margin: auto;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .tool .tool-list .tool-list1-img {
    width: calc(78 * var(--xd-px));
  }
}
.flow .flow-inner .tool .tool-list .tool-list2-img-wrapper {
  display: flex;
  gap: 21px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .tool .tool-list .tool-list2-img-wrapper {
    gap: calc(12 * var(--xd-px));
  }
}
.flow .flow-inner .tool .tool-list .tool-list2-1, .flow .flow-inner .tool .tool-list .tool-list2-2 {
  width: -moz-fit-content;
  width: fit-content;
}
.flow .flow-inner .tool .tool-list .tool-list2-1-img {
  width: 140px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .tool .tool-list .tool-list2-1-img {
    width: calc(118 * var(--xd-px));
  }
}
.flow .flow-inner .tool .tool-list .tool-list2-2-img {
  width: 172px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .tool .tool-list .tool-list2-2-img {
    width: calc(145 * var(--xd-px));
  }
}
.flow .flow-inner .tool .tool-list .tool-list3-img {
  width: 140px;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .tool .tool-list .tool-list3-img {
    width: calc(120 * var(--xd-px));
  }
}
.flow .flow-inner .tool .tool-caution {
  font-size: 16px;
  line-height: 1.625;
  width: 651px;
  margin: auto;
}
@media screen and (max-width: 800px) {
  .flow .flow-inner .tool .tool-caution {
    font-size: calc(20 * var(--xd-px));
    line-height: 1.5;
    width: auto;
  }
}

.contents {
  background-color: #8ED6FF;
  padding: 80px 0;
}
@media screen and (max-width: 800px) {
  .contents {
    padding: calc(80 * var(--xd-px)) calc(20 * var(--xd-px));
  }
}
.contents .content-list {
  width: min(840px, 100%);
  margin: 0 auto;
}
.contents .content-list-tab {
  background-color: #D90000;
  border-radius: 20px 20px 0 0;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  font-weight: var(--fontweight-extrabold);
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 18px;
  color: var(--color-white);
  margin-left: 30px;
}
@media screen and (max-width: 800px) {
  .contents .content-list-tab {
    border-radius: calc(20 * var(--xd-px)) calc(20 * var(--xd-px)) 0 0;
    height: calc(80 * var(--xd-px));
    line-height: calc(80 * var(--xd-px));
    font-size: calc(24 * var(--xd-px));
    padding: 0 calc(18 * var(--xd-px));
    margin-left: calc(25 * var(--xd-px));
  }
}
.contents .content-list-main {
  border-radius: 20px;
  border: 2px solid var(--color-bgwhite-textblack);
  background-color: var(--bgcolor-lightblue);
  padding: 40px 60px;
  padding-top: 0;
}
@media screen and (max-width: 800px) {
  .contents .content-list-main {
    border-radius: calc(20 * var(--xd-px));
    padding: calc(42 * var(--xd-px)) calc(20 * var(--xd-px));
    padding-top: 0;
  }
}
.contents .content-list-main .lupe {
  width: 351px;
  margin-bottom: 14px;
  margin-top: 40px;
}
@media screen and (max-width: 800px) {
  .contents .content-list-main .lupe {
    width: calc(439 * var(--xd-px));
    margin-bottom: calc(14 * var(--xd-px));
    margin-top: calc(40 * var(--xd-px));
  }
}
.contents .content-list-main .detail {
  background-color: var(--color-white);
  padding: 20px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.625;
}
@media screen and (max-width: 800px) {
  .contents .content-list-main .detail {
    padding: calc(20 * var(--xd-px));
    border-radius: calc(16 * var(--xd-px));
    font-size: calc(28 * var(--xd-px));
    line-height: 1.5;
  }
}
.contents .content-list-main .detail ul li {
  padding-top: 10px;
}
.contents .content-list-main .detail ul li:nth-child(1) {
  padding-top: 0;
}
.contents .content-list-main p {
  font-size: 14px;
  margin-top: 8px;
}
@media screen and (max-width: 800px) {
  .contents .content-list-main p {
    font-size: calc(20 * var(--xd-px));
    margin-top: calc(6 * var(--xd-px));
  }
}
.contents .blue-box {
  margin: 0 auto;
  margin-top: 40px;
}
@media screen and (max-width: 800px) {
  .contents .blue-box {
    margin-top: calc(40 * var(--xd-px));
  }
}

.moushikomi-wrapper {
  padding: 80px;
}
@media screen and (max-width: 800px) {
  .moushikomi-wrapper {
    padding: calc(80 * var(--xd-px)) calc(50 * var(--xd-px));
  }
}
.moushikomi-wrapper .moushikomi-text {
  color: var(--color-bgwhite-textblack);
  font-size: 18px;
  font-weight: var(--fontweight-extrabold);
  line-height: 2;
  margin: auto;
  margin-bottom: 50px;
}
@media screen and (max-width: 800px) {
  .moushikomi-wrapper .moushikomi-text {
    font-size: calc(24 * var(--xd-px));
    margin-bottom: calc(40 * var(--xd-px));
    line-height: 1.6666666667;
  }
}
.moushikomi-wrapper .moushikomi-button {
  padding: 0 20px;
  margin-bottom: 0;
  width: 400px;
}
@media screen and (max-width: 800px) {
  .moushikomi-wrapper .moushikomi-button {
    padding: 0;
    width: calc(600 * var(--xd-px));
  }
}
.moushikomi-wrapper .moushikomi-button-text {
  font-size: 20px;
}
@media screen and (max-width: 800px) {
  .moushikomi-wrapper .moushikomi-button-text {
    font-size: calc(28 * var(--xd-px));
  }
}/*# sourceMappingURL=index.css.map */