@charset "UTF-8";
/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
button, hr, input {
  overflow: visible;
}

progress, sub, sup {
  vertical-align: baseline;
}

[type=checkbox], [type=radio], legend {
  box-sizing: border-box;
  padding: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

details, main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, select {
  text-transform: none;
}

[type=button], [type=reset], [type=submit], button {
  -webkit-appearance: button;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
  outline: ButtonText dotted 1px;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

[hidden], template {
  display: none;
}

/* base */
*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  font-family: "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Meiryo", "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  font-size: 3vw;
  line-height: 1.6666666667;
  color: #382F2D;
  font-weight: 400;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (min-width: 768px) {
  html, body {
    font-size: 13px;
  }
}
@media screen and (min-width: 940px) {
  html, body {
    font-size: 14px;
  }
}
@media screen and (min-width: 1110px) {
  html, body {
    font-size: 16px;
  }
}
@media screen and (min-width: 1280px) {
  html, body {
    font-size: 18px;
  }
}

html {
  background-color: #fff;
}

body {
  background-color: #fff;
  height: 100%;
  position: relative;
  width: 100%;
}

main {
  position: relative;
}

h1, h2, h3, h4, h5, h6, p, figure {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

a {
  color: #1A3964;
  -webkit-transition: color 0.15s linear 0s;
  -moz-transition: color 0.15s linear 0s;
  -ms-transition: color 0.15s linear 0s;
  -o-transition: color 0.15s linear 0s;
  transition: color 0.15s linear 0s;
}
a:hover {
  color: #4881cf;
}

picture {
  display: block;
}
picture > img {
  display: block;
  height: auto;
  width: 100%;
}

* {
  letter-spacing: calc(var(--ls) * -0.01em);
}

/* --------------------
  basic-classes
-------------------- */
.cmn-content-width {
  margin-left: auto;
  margin-right: auto;
  width: 94.3333vw;
}
@media screen and (min-width: 768px) {
  .cmn-content-width {
    width: 728px;
  }
}
@media screen and (min-width: 940px) {
  .cmn-content-width {
    width: 900px;
  }
}
@media screen and (min-width: 1110px) {
  .cmn-content-width {
    width: 1070px;
  }
}
@media screen and (min-width: 1280px) {
  .cmn-content-width {
    width: 1240px;
  }
}

.cmn-content-width-md {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .cmn-content-width-md {
    width: 728px;
  }
}
@media screen and (min-width: 940px) {
  .cmn-content-width-md {
    width: 900px;
  }
}
@media screen and (min-width: 1110px) {
  .cmn-content-width-md {
    width: 1070px;
  }
}
@media screen and (min-width: 1280px) {
  .cmn-content-width-md {
    width: 1240px;
  }
}

/* --------------------
  utility-classes
-------------------- */
.bold {
  font-weight: 600;
}

.sr-only {
  display: none;
}

@media screen and (min-width: 375px) {
  .xs-only {
    display: none;
  }
}

@media screen and (max-width: 374px) {
  .ssm-only {
    display: none;
  }
}
@media screen and (min-width: 600px) {
  .ssm-only {
    display: none;
  }
}

@media screen and (max-width: 599px) {
  .sm-only {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .sm-only {
    display: none;
  }
}

@media screen and (min-width: 600px) {
  .xs-ssm {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .xs-sm, .sp-only {
    display: none;
  }
}

@media screen and (max-width: 599px) {
  .sm-xxl, .sm-over {
    display: none;
  }
}

@media screen and (min-width: 940px) {
  .xs-md {
    display: none;
  }
}

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

.no-bullet {
  list-style: none;
  padding: 0;
}

.no-margin {
  margin: 0;
}

/*===== header
要素サイズはsp/pcそれぞれ固定...と思ったけど
メインビジュアルが被るのでムリだと判明!!
"ある程度までは" vw基準にすることにする... =====*/
header {
  align-items: start;
  display: grid;
  grid-template-areas: "logo title";
  grid-template-columns: 28.3333333333vw 1fr;
  grid-template-rows: auto;
  height: 8.8333333333vw;
  left: 0;
  margin: 0 auto;
  padding-left: 2.8333333333vw;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
}
@media screen and (min-width: 600px) {
  header {
    grid-template-columns: 170px 1fr;
    height: 53px;
  }
}
@media screen and (min-width: 768px) {
  header {
    grid-template-columns: 29.8684210526vw 1fr;
    height: 5.2631578947vw;
    padding: 0 30px;
    width: 100%;
  }
}
@media screen and (min-width: 1110px) {
  header {
    grid-template-columns: 454px 1fr;
    height: 80px;
  }
}
header .mflogo {
  grid-area: logo;
  height: 100%;
  padding-top: 1.6666666667vw;
  width: 100%;
}
@media screen and (min-width: 600px) {
  header .mflogo {
    padding-top: 10px;
  }
}
@media screen and (min-width: 768px) {
  header .mflogo {
    padding-top: 1.3157894737vw;
  }
}
@media screen and (min-width: 1110px) {
  header .mflogo {
    padding-top: 20px;
  }
}
header .mflogo > a {
  background: url(../img/maxfro-logo-sp@2x.png) 0 0/contain no-repeat;
  display: block;
  height: 100%;
  width: 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  header .mflogo > a {
    background-image: url(../img/maxflo-logo-pc@2x.png);
  }
}

.page__title {
  border: 1px solid #707070;
  border-radius: 0.8571428571em;
  font-size: 0.7777777778rem;
  grid-area: title;
  line-height: 1.4285714286em;
  margin-top: 1.4285714286em;
  padding-bottom: 0.1428571429em;
  text-align: center;
  width: 8.5714285714em;
}
@media screen and (min-width: 600px) {
  .page__title {
    font-size: 14px;
  }
}
@media screen and (min-width: 768px) {
  .page__title {
    border-radius: 3.2222222222em;
    font-size: 1.1842105263vw;
    line-height: 1.4444444444em;
    margin-top: 2em;
    width: 8.3888888889em;
  }
}
@media screen and (min-width: 1110px) {
  .page__title {
    border-radius: 58px;
    font-size: 18px;
    line-height: 26px;
    margin-top: 36px;
    width: 151px;
  }
}

/*===== footer (すべて固定値) =====*/
footer {
  background-color: #fff;
  border-top: 3px solid #1A3964;
  padding-bottom: 22px;
  padding-top: 38px;
}
footer .brand {
  height: 86px;
  margin: 0 auto 33px;
  width: 284px;
}
footer .brand > a {
  background: url(../img/maxfro-logo-sp@2x.png) 50% 0/contain no-repeat;
  display: block;
  height: 100%;
  width: 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
footer address {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.6666666667;
  text-align: center;
}
footer .colophon {
  font-size: 10px;
  font-weight: 600;
  margin-top: 39px;
  text-align: center;
}

/*===== .mainv__sect (vw基準) =====*/
.mainv__sect {
  height: 136.6666666667vw;
  overflow: hidden;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .mainv__sect {
    height: 66.0526315789vw;
  }
}

.mainv__body {
  height: 100%;
  position: relative;
  width: 100%;
}
.mainv__body .body-img {
  padding-top: 34.1666666667vw;
}
@media screen and (min-width: 768px) {
  .mainv__body .body-img {
    padding-top: 3.2236842105vw;
  }
}
.mainv__body .body-covers {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.mainv__body .body-covers .upper, .mainv__body .body-covers .lower {
  left: 0;
  position: absolute;
  width: 100%;
}
.mainv__body .body-covers .upper > img, .mainv__body .body-covers .lower > img {
  position: relative;
}
.mainv__body .body-covers .upper {
  top: 10.5vw;
}
@media screen and (min-width: 768px) {
  .mainv__body .body-covers .upper {
    top: -3.4210526316vw;
  }
}
.mainv__body .body-covers .lower {
  top: 118.6666666667vw;
}
@media screen and (min-width: 768px) {
  .mainv__body .body-covers .lower {
    top: 53.8815789474vw;
  }
}
.mainv__body h2 {
  background: url(../img/mainv-title-sp@2x.png) 0 0/contain no-repeat;
  height: 31.6666666667vw;
  left: 6.1666666667vw;
  position: absolute;
  top: 18.1666666667vw;
  width: 86.8333333333vw;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .mainv__body h2 {
    background-image: url(../img/mainv-title-pc@2x.png);
    height: 15vw;
    left: 9.2105263158vw;
    top: 34.7368421053vw;
    width: 42.3684210526vw;
  }
}

.mainv__deco {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}
.mainv__deco .deco-line {
  height: auto;
  position: absolute;
}
.mainv__deco .deco-line.line1 {
  left: 72vw;
  top: -2.1666666667vw;
  width: 71.8333333333vw;
}
@media screen and (min-width: 768px) {
  .mainv__deco .deco-line.line1 {
    left: 73.4868421053vw;
    top: -0.9868421053vw;
    width: 28.4868421053vw;
  }
}
.mainv__deco .deco-line.line2 {
  left: 64.5vw;
  top: 5.1666666667vw;
  width: 49.8333333333vw;
}
@media screen and (min-width: 768px) {
  .mainv__deco .deco-line.line2 {
    left: 65.2631578947vw;
    top: 1.9078947368vw;
    width: 19.6710526316vw;
  }
}
.mainv__deco .deco-line.line3 {
  left: -23.1666666667vw;
  top: 118.5vw;
  width: 75.8333333333vw;
}
@media screen and (min-width: 768px) {
  .mainv__deco .deco-line.line3 {
    left: -2.2368421053vw;
    top: 54.8684210526vw;
    width: 49.2105263158vw;
  }
}
.mainv__deco .deco-line.line4 {
  left: -14.6666666667vw;
  top: 123.6666666667vw;
  width: 98.1666666667vw;
}
@media screen and (min-width: 768px) {
  .mainv__deco .deco-line.line4 {
    left: 11.9078947368vw;
    top: 57.3684210526vw;
    width: 63.6184210526vw;
  }
}
.mainv__deco .deco-line.line5 {
  display: none;
}
@media screen and (min-width: 768px) {
  .mainv__deco .deco-line.line5 {
    display: block;
    left: 74.8684210526vw;
    top: 61.1842105263vw;
    width: 35.2631578947vw;
  }
}

.intro__sect {
  background: url(../img/intro-bg-dots-sp.svg) 0 100%/contain no-repeat, url(../img/intro-bg-sp@2x.jpg) left 0 bottom 16.1666666667vw/contain no-repeat;
  height: 145.1666666667vw;
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 768px) {
  .intro__sect {
    background-image: url(../img/intro-bg-dots-pc.svg), url(../img/intro-bg-pc@2x.jpg);
    background-position: 0 100%, 0 8.2236842105vw;
    height: 80.1315789474vw;
  }
}

.intro__body {
  color: #1a3964;
  line-height: 1.8;
  font-size: 1.1111111111rem;
  font-weight: 700;
  padding-top: 2.15em;
  position: relative;
  text-align: center;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .intro__body {
    font-size: 1.5789473684vw;
    line-height: 1.5;
    padding-top: 1em;
  }
}
.intro__body p + p {
  margin-top: 1.8em;
}
@media screen and (min-width: 768px) {
  .intro__body p + p {
    margin-top: 1.5em;
  }
}

.intro__deco {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.intro__deco .deco-line.line1 {
  display: none;
  position: absolute;
}
@media screen and (min-width: 768px) {
  .intro__deco .deco-line.line1 {
    display: block;
    left: -1.7763157895vw;
    height: auto;
    top: 10.7894736842vw;
    width: 26.3815789474vw;
  }
}

.intro__img {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}
.intro__img picture {
  border-radius: 50%;
  height: 21vw;
  outline: #fff solid 0.6666666667vw;
  overflow: hidden;
  position: absolute;
  width: 21vw;
}
@media screen and (min-width: 768px) {
  .intro__img picture {
    height: 15vw;
    outline-width: 0.2631578947vw;
    width: 15vw;
  }
}
.intro__img .img1 {
  bottom: 72vw;
  right: -2.1666666667vw;
}
@media screen and (min-width: 768px) {
  .intro__img .img1 {
    bottom: 51.3157894737vw;
    right: 12.0394736842vw;
  }
}
.intro__img .img2 {
  bottom: 61.5vw;
  left: -0.5vw;
}
@media screen and (min-width: 768px) {
  .intro__img .img2 {
    left: 14.6052631579vw;
    bottom: 43.8815789474vw;
  }
}
.intro__img .img3 {
  bottom: 35.1666666667vw;
  right: -1.1666666667vw;
}
@media screen and (min-width: 768px) {
  .intro__img .img3 {
    bottom: 25.0657894737vw;
    right: 12.8289473684vw;
  }
}
.intro__img .img4 {
  left: 30.1666666667vw;
  bottom: 18.8333333333vw;
}
@media screen and (min-width: 768px) {
  .intro__img .img4 {
    left: 34.0131578947vw;
    bottom: 12.8289473684vw;
  }
}

/*===== .numbe__sect =====*/
.numbe__sect {
  margin-top: -2.6666666667vw;
  padding-bottom: 3.3333333333vw;
}
@media screen and (min-width: 768px) {
  .numbe__sect {
    margin-top: -4.3333333333rem;
    padding-bottom: 0;
  }
}

.numbe__head {
  min-height: 62.8333333333vw;
  overflow: hidden;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .numbe__head {
    min-height: 18.2222222222rem;
  }
}
.numbe__head .head-deco {
  height: 100%;
  position: absolute;
  width: 100%;
}
.numbe__head .head-deco .deco-line {
  display: block;
  height: auto;
  position: absolute;
}
.numbe__head .head-deco .line1 {
  left: -11.5vw;
  top: 0;
  width: 47.3333333333vw;
}
@media screen and (min-width: 768px) {
  .numbe__head .head-deco .line1 {
    left: calc(50% - 46.6666666667rem);
    top: 6.6666666667rem;
    width: 24.0555555556rem;
  }
}
.numbe__head .head-deco .line2 {
  left: -12.6666666667vw;
  top: 6.6666666667vw;
  width: 34.3333333333vw;
}
@media screen and (min-width: 768px) {
  .numbe__head .head-deco .line2 {
    left: calc(50% - 49.3333333333rem);
    top: 10.1111111111rem;
    width: 16.6111111111rem;
  }
}
.numbe__head .head-deco .line3 {
  right: -18.3333333333vw;
  top: 47.8333333333vw;
  width: 48vw;
}
@media screen and (min-width: 768px) {
  .numbe__head .head-deco .line3 {
    right: calc(50% - 55.1111111111rem);
    top: 11.8888888889rem;
    width: 32.6111111111rem;
  }
}
.numbe__head .head-deco .line4 {
  right: -19vw;
  top: 53.3333333333vw;
  width: 26.3333333333vw;
}
@media screen and (min-width: 768px) {
  .numbe__head .head-deco .line4 {
    right: calc(50% - 55.5rem);
    top: 15.4444444444rem;
    width: 17.8333333333rem;
  }
}
.numbe__head .head-content {
  background: url(../img/numbe-title-bg.svg) 50% 3.0555555556rem/13.3333333333rem auto no-repeat;
  padding-bottom: 1.6666666667rem;
  padding-top: 6.8888888889rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .numbe__head .head-content {
    background-position: 50% 0;
    padding-top: 3.7777777778rem;
  }
}
.numbe__head .head-content .slidein-title {
  background: url(../img/numbe-title@2x.png) 50% 0/contain no-repeat;
  height: 1.7777777778rem;
  margin-bottom: 1.4444444444rem;
  width: 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .numbe__head .head-content .slidein-title {
    height: 1.8333333333rem;
    margin-bottom: 1.5555555556rem;
  }
}
.numbe__head .head-content p {
  font-size: 1.2222222222rem;
  font-weight: bold;
  line-height: 1.4545454545;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .numbe__main {
    display: grid;
    gap: 1.1111111111rem 1.4444444444rem;
    grid-template-areas: "data1 data3" "data2 data3" "data4 data5" "data6 data6" "data7 data8" "data9 data10" "data11 data12" "data13 data14";
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, max(13.3333333333rem, auto));
  }
}
@media screen and (min-width: 1280px) {
  .numbe__main {
    gap: 1.6666666667rem 2.2222222222rem;
  }
}
.numbe__main .main-data {
  background-color: #e0faff;
  background-repeat: no-repeat;
  border-radius: 0.6666666667em;
  color: #1a3964;
  display: flex;
  flex-direction: column;
  font-size: 1.6666666667rem;
  font-weight: 700;
  justify-content: space-between;
  line-height: 1.9166666667;
  margin: 0;
  min-height: 8em;
  padding: 1.1666666667em 0.6666666667em 0.5em;
}
@media screen and (min-width: 768px) {
  .numbe__main .main-data {
    padding-left: 1em;
    padding-right: 1em;
  }
}
.numbe__main .main-data.bg-tr {
  background-position: right 7% top 1.3888888889rem;
}
.numbe__main .main-data.bg-tl {
  background-position: left 7% top 1.3888888889rem;
}
.numbe__main .main-data.bg-br {
  background-position: right 7% bottom 1.3888888889rem;
}
.numbe__main .main-data.bg-bl {
  background-position: left 7% bottom 1.3888888889rem;
}
.numbe__main .main-data + .main-data {
  margin-top: 1em;
}
@media screen and (min-width: 768px) {
  .numbe__main .main-data + .main-data {
    margin-top: 0;
  }
}
.numbe__main .main-data > dt {
  line-height: 1;
  color: #0091b1;
}
.numbe__main .main-data > dt .small {
  font-size: 0.6666666667em;
}
.numbe__main .main-data > dd {
  line-height: 1.5333333333;
  margin: 0;
}
.numbe__main .main-data > dd .num {
  display: inline-block;
  font-family: "Hind", "Arial", "Helvetica", "Trebuchet MS", "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Meiryo", "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  font-size: 3.2em;
  line-height: 1;
}
.numbe__main .main-data > dd .unit {
  display: inline-block;
  font-size: 1.2em;
  margin-left: 0.1944444444em;
}
.numbe__main .main-data > dd .small {
  font-size: 0.6666666667em;
}
.numbe__main .main-data.data1 {
  background-image: url(../img/numbe-data1-fig@2x.png);
  background-size: 3.3em auto;
  grid-area: data1;
}
.numbe__main .main-data.data2 {
  background-image: url(../img/numbe-data2-fig@2x.png);
  background-size: 2.5em auto;
  grid-area: data2;
}
.numbe__main .main-data.data3 {
  grid-area: data3;
}
.numbe__main .main-data.data3 > dd {
  padding-top: 0.8666666667em;
  position: relative;
}
@media screen and (min-width: 768px) {
  .numbe__main .main-data.data3 > dd {
    padding-top: 0;
  }
}
.numbe__main .main-data.data3 ul {
  background: url(../img/numbe-data3-fig.svg) 0.9em 2.1333333333em/11.2em auto no-repeat;
  height: 12.4666666667em;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .numbe__main .main-data.data3 ul {
    height: 12.2em;
    background-position: 0 1.8em;
  }
}
@media screen and (min-width: 940px) {
  .numbe__main .main-data.data3 ul {
    height: 12.3666666667em;
    background-position: 0.9em 2.1333333333em;
  }
}
@media screen and (min-width: 1110px) {
  .numbe__main .main-data.data3 ul {
    width: calc(100% - 10px);
    margin: 0 auto;
  }
}
@media screen and (min-width: 1280px) {
  .numbe__main .main-data.data3 ul {
    width: calc(100% - 20px);
    margin: 0 auto;
  }
}
.numbe__main .main-data.data3 ul > li {
  position: absolute;
}
.numbe__main .main-data.data3 ul > li .label {
  display: block;
  font-size: 0.8333333333em;
  line-height: 1;
  padding-bottom: 0.15em;
}
@media screen and (min-width: 768px) {
  .numbe__main .main-data.data3 ul > li .label {
    background-color: #e0faff;
    font-size: 0.7106666667em;
    outline: 3px solid #e0faff;
  }
}
@media screen and (min-width: 940px) {
  .numbe__main .main-data.data3 ul > li .label {
    font-size: 0.8666666667em;
  }
}
.numbe__main .main-data.data3 ul > li .num {
  font-size: 2.2666666667em;
}
@media screen and (min-width: 768px) {
  .numbe__main .main-data.data3 ul > li .num {
    font-size: 1.8586666667em;
  }
}
@media screen and (min-width: 940px) {
  .numbe__main .main-data.data3 ul > li .num {
    font-size: 2.2666666667em;
  }
}
.numbe__main .main-data.data3 ul > li .unit {
  font-size: 0.9333333333em;
}
@media screen and (min-width: 768px) {
  .numbe__main .main-data.data3 ul > li .unit {
    font-size: 0.82em;
  }
}
@media screen and (min-width: 940px) {
  .numbe__main .main-data.data3 ul > li .unit {
    font-size: 1em;
  }
}
.numbe__main .main-data.data3 ul > li.ofc1 {
  left: 1.6333333333em;
  top: 0;
}
.numbe__main .main-data.data3 ul > li.ofc2 {
  left: 10.9666666667em;
  top: 0;
}
@media screen and (min-width: 768px) {
  .numbe__main .main-data.data3 ul > li.ofc2 {
    left: 10.1333333333em;
  }
}
@media screen and (min-width: 940px) {
  .numbe__main .main-data.data3 ul > li.ofc2 {
    left: 10.9666666667em;
  }
}
.numbe__main .main-data.data3 ul > li.ofc3 {
  left: 0;
  top: 4.3em;
  top: 4.2em;
}
.numbe__main .main-data.data3 ul > li.ofc4 {
  left: 12.2em;
  top: 4.2em;
}
@media screen and (min-width: 768px) {
  .numbe__main .main-data.data3 ul > li.ofc4 {
    left: 11.2666666667em;
    top: 4.2em;
  }
}
@media screen and (min-width: 940px) {
  .numbe__main .main-data.data3 ul > li.ofc4 {
    left: 12.2em;
    top: 4.2em;
  }
}
.numbe__main .main-data.data3 ul > li.ofc5 {
  left: 12.2em;
  top: 8.5em;
}
@media screen and (min-width: 768px) {
  .numbe__main .main-data.data3 ul > li.ofc5 {
    left: 10.2333333333em;
    top: 8.5em;
  }
}
@media screen and (min-width: 940px) {
  .numbe__main .main-data.data3 ul > li.ofc5 {
    left: 11.8em;
    top: 8.7666666667em;
  }
}
@media screen and (min-width: 1110px) {
  .numbe__main .main-data.data3 ul > li.ofc5 {
    left: 12.2em;
    top: 8.5em;
  }
}
.numbe__main .main-data.data4 {
  background-image: url(../img/numbe-data4-fig@2x.png);
  background-size: 3.9333333333em auto;
  grid-area: data4;
}
.numbe__main .main-data.data4 ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.numbe__main .main-data.data4 ul > li {
  flex: 0 0 50%;
}
.numbe__main .main-data.data4 ul > li .label {
  display: block;
  font-size: 0.8666666667em;
  line-height: 1;
  margin-bottom: 0.25em;
}
.numbe__main .main-data.data4 ul > li .num {
  font-size: 2.4em;
}
.numbe__main .main-data.data4 ul > li .unit {
  font-size: 1em;
}
.numbe__main .main-data.data5 {
  background-image: url(../img/numbe-data5-fig@2x.png);
  background-size: 3.6em auto;
  grid-area: data5;
}
.numbe__main .main-data.data6 {
  background-image: url(../img/numbe-data6-fig@2x.png);
  background-position: right 3.25% top 1.3888888889rem;
  background-size: 3.3em auto;
  padding-bottom: 1.1666666667em;
  grid-area: data6;
}
.numbe__main .main-data.data6 > dd {
  font-size: 0.8em;
  line-height: 1.9166666667;
  padding-top: 3.2em;
}
.numbe__main .main-data.data6 > dd .small {
  font-size: 0.8333333333em;
}
.numbe__main .main-data.data7 {
  background-image: url(../img/numbe-data7-fig@2x.png);
  background-size: 3.1666666667em auto;
  grid-area: data7;
}
.numbe__main .main-data.data8 {
  background-image: url(../img/numbe-data8-fig@2x.png);
  background-size: 3.2333333333em auto;
  grid-area: data8;
}
.numbe__main .main-data.data9 {
  background-image: url(../img/numbe-data9-fig@2x.png);
  background-size: 2.9333333333em auto;
  grid-area: data9;
}
.numbe__main .main-data.data9 ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0 0 0 5.6666666667em;
}
.numbe__main .main-data.data9 ul > li .label {
  display: block;
  font-size: 0.8666666667em;
  line-height: 1;
  margin-bottom: 0.25em;
}
.numbe__main .main-data.data9 ul > li .num {
  font-size: 2.4em;
}
.numbe__main .main-data.data9 ul > li .unit {
  font-size: 1em;
}
.numbe__main .main-data.data9 ul > li .txt {
  font-size: 1.2em;
  line-height: 1;
}
.numbe__main .main-data.data10 {
  background-image: url(../img/numbe-data10-fig@2x.png);
  background-size: 3.1333333333em auto;
  grid-area: data10;
}
.numbe__main .main-data.data11 {
  background-image: url(../img/numbe-data11-fig@2x.png);
  background-size: 3.1em auto;
  grid-area: data11;
}
.numbe__main .main-data.data12 {
  background-image: url(../img/numbe-data12-fig@2x.png);
  background-size: 3.0333333333em auto;
  grid-area: data12;
}
.numbe__main .main-data.data13 {
  background-image: url(../img/numbe-data13-fig@2x.png);
  background-size: 3.1333333333em auto;
  grid-area: data13;
  padding-bottom: 1.1666666667em;
}
.numbe__main .main-data.data14 {
  background-image: url(../img/numbe-data14-fig@2x.png);
  background-size: 3em auto;
  grid-area: data14;
  padding-bottom: 1.1666666667em;
}

/*===== 4. recru__sect =====*/
.recru__sect {
  background: url(../img/recru-head-bg-sp.svg) 0 0/contain no-repeat;
  overflow: hidden;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .recru__sect {
    background: url(../img/recru-head-bg-pc.svg) 50% 0/92rem auto no-repeat;
    margin-top: -7.7222222222rem;
  }
}

.recru__head {
  height: 25.4444444444rem;
  padding-top: 6.9444444444rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .recru__head {
    height: 34.8333333333rem;
    padding-top: 15.5555555556rem;
  }
}
.recru__head h2 {
  height: 15.5555555556rem;
  background: url(../img/recru-title-bg.svg) 50% 0/contain no-repeat;
  padding-top: 4.5555555556rem;
  text-align: center;
}
.recru__head h2 span {
  display: block;
}
.recru__head h2 .year {
  font-size: 1.2222222222rem;
  margin-bottom: 1.3636363636em;
}
.recru__head h2 .title {
  background: url(../img/recru-title.svg) 50% 0/contain no-repeat;
  height: 1.8333333333rem;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.recru__deco {
  left: 24.4444444444rem;
  height: 4rem;
  position: absolute;
  top: 1.4444444444rem;
  width: 18.1666666667rem;
}
@media screen and (min-width: 768px) {
  .recru__deco {
    height: 5.8333333333rem;
    left: calc(50% + 17.6111111111rem);
    top: 11.1666666667rem;
    width: 26.7777777778rem;
  }
}
.recru__deco .deco-line {
  height: 100%;
  position: absolute;
  width: 100%;
}
.recru__deco .line1 {
  left: 1.7777777778rem;
  top: 0;
  width: 16.2777777778rem;
}
@media screen and (min-width: 768px) {
  .recru__deco .line1 {
    left: 2.6666666667rem;
    width: 24.0555555556rem;
  }
}
.recru__deco .line2 {
  left: 0;
  top: 2.3333333333rem;
  width: 11.2777777778rem;
}
@media screen and (min-width: 768px) {
  .recru__deco .line2 {
    top: 3.4444444444rem;
    width: 16.6111111111rem;
  }
}

/*----- recru__part common -----*/
.recru__part .part-head h3 {
  background: url(../img/recru-part-head-bg.svg) 50% 0/auto 3.8888888889rem no-repeat;
  font-size: 1.6666666667rem;
  height: 3.6em;
  padding-top: 2.5333333333em;
  text-align: center;
}

/*----- 4-1. 募集職種 recru__part.types -----*/
.recru__part.types {
  margin-top: -0.5rem;
}
@media screen and (min-width: 768px) {
  .recru__part.types {
    margin-top: -1.2777777778rem;
  }
}
@media screen and (min-width: 768px) {
  .recru__part.types .part-main {
    align-items: center;
    display: grid;
    gap: 0 6.3333333333rem;
    grid-template-columns: repeat(2, 0.5fr);
    grid-template-rows: auto;
    margin-top: 1.1111111111rem;
  }
}
@media screen and (min-width: 768px) {
  .recru__part.types .col-left, .recru__part.types .col-right {
    display: flex;
    flex-direction: column;
    gap: 1.6666666667rem;
  }
}
.recru__part.types article {
  background: url(../img/recru-part-types-post-bg.svg) 0 0/7.1111111111rem auto no-repeat;
  margin-top: 1.6666666667rem;
}
@media screen and (min-width: 768px) {
  .recru__part.types article {
    margin-top: 0;
  }
}
.recru__part.types article h4 {
    font-size: 1.4444444444rem;
    font-weight: 500;
    margin-bottom: 0.5769230769em;
    padding-left: 1.1538461538em;
    padding-top: 1.8461538462em;
    
    /* added */
    letter-spacing:0.3em;

}
.recru__part.types article .body {
  background-color: #fff;
  border: 1px solid #33DBFF;
  border-radius: 1.1111111111em;
  margin-left: 4.6111111111em;
  padding: 1.6666666667em 1.0555555556em;
  text-align: justify;
}

/*----- 4-2. 応募要領 recru__part.guide -----*/
.recru__part.guide {
  background: url(../img/recru-part-guide-bg-sp.svg) 0 0/contain no-repeat;
  margin-top: 0.9444444444rem;
  padding-top: 4.3888888889rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .recru__part.guide {
    background: url(../img/recru-part-guide-bg-pc.svg) calc(50vw + 15.1666666667rem) 0/26.6666666667rem auto no-repeat;
    margin-top: -2.5555555556rem;
    padding-top: 7rem;
  }
}
.recru__part.guide .part-head {
  margin-bottom: 2.8888888889rem;
}
@media screen and (min-width: 768px) {
  .recru__part.guide .part-head {
    margin-bottom: 2.6666666667rem;
  }
}
.recru__part.guide .part-main {
  margin-top: 0;
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .recru__part.guide .part-main {
    align-items: start;
    display: grid;
    gap: 20px 23px;
    grid-template-columns: 11.1111111111rem 1fr;
  }
}
.recru__part.guide .part-main dt {
  background-color: #FFE781;
  border-radius: 1.1111111111em;
  font-size: 1rem;
  font-weight: 700;
  line-height: 2.2222222222;
  text-align: center;
  width: 11.1111111111em;
}
.recru__part.guide .part-main dd {
  font-size: 0.8888888889em;
  font-weight: 500;
  line-height: 1.875;
  margin-left: 1.25em;
  padding-top: 0.5em;
  padding-right: 1.25em;
}
@media screen and (min-width: 768px) {
  .recru__part.guide .part-main dd {
    margin-left: 0;
  }
}
.recru__part.guide .part-main dd + dt {
  margin-top: 1.3888888889em;
}
@media screen and (min-width: 768px) {
  .recru__part.guide .part-main dd + dt {
    margin-top: 0;
  }
}
.recru__part.guide .part-main dd > a.lg {
  font-size: 1.25em;
}
.recru__part.guide .part-main dd > ul {
  margin-top: 0;
  margin-bottom: 1.125em;
  padding-left: 1.15em;
}
.recru__part.guide .part-main dd > ul .arrow {
  display: inline-block;
  margin-left: 1em;
}
.recru__part.guide .part-main dd .note {
  font-size: 0.8125em;
  line-height: 1.5384615385;
}

/*----- 4-3. 待遇 recru__part.treat (4-4. welfaも含む) -----*/
.recru__part.treat {
  margin-top: 4rem;
  background: url(../img/recru-part-treat-bg-sp.svg) 0 0/contain no-repeat;
}
@media screen and (min-width: 768px) {
  .recru__part.treat {
    background: url(../img/recru-part-treat-bg-pc.svg) 50% 0/86.2222222222rem auto no-repeat;
    margin-top: -6.7222222222rem;
  }
}
.recru__part.treat .part-head {
  padding-top: 0.4444444444rem;
  margin-bottom: 2.1111111111rem;
}
@media screen and (min-width: 768px) {
  .recru__part.treat .part-head {
    padding-top: 10.7777777778rem;
  }
}
.recru__part.treat .tablish-ul .label, .recru__part.treat .tablish-ul .data {
  display: inline-block;
}
.recru__part.treat .tablish-ul .label {
  width: 7em;
}

.cmn-tablish-dl {
  border-top: 1px solid #BBD4C4;
  font-size: 0.9444444444rem;
  font-weight: 400;
  line-height: 1.5294117647;
  margin-block: 0;
}
@media screen and (min-width: 768px) {
  .cmn-tablish-dl {
    display: grid;
    grid-template-columns: 15.5555555556rem 1fr;
    grid-template-rows: auto;
  }
}
.cmn-tablish-dl > dt, .cmn-tablish-dl > dd {
  border-bottom: 1px solid #BBD4C4;
  padding: 1em 1.1764705882em;
}
.cmn-tablish-dl > dt {
  background-color: #FFFEE0;
}
.cmn-tablish-dl > dd {
  background-color: #FAFAFA;
  margin-left: 0;
}
.cmn-tablish-dl > dd > ul {
  margin: 0;
  padding-left: 1.15em;
}
.cmn-tablish-dl > dd > dl {
  margin-block: 0;
}
.cmn-tablish-dl > dd > dl > dd {
  margin-left: 0;
}

/*----- 4-4. 福利厚生 recru__part.welfa -----*/
.recru__part.welfa {
  margin-top: 4.4444444444rem;
}
@media screen and (min-width: 768px) {
  .recru__part.welfa {
    margin-top: 3.3333333333rem;
  }
}
.recru__part.welfa .part-head {
  margin-bottom: 2.1111111111rem;
}

/*===== actio__sect =====*/
.actio__sect {
  background: linear-gradient(#fff, #EFFCFF);
  margin-top: 1.6666666667rem;
  overflow: hidden;
  padding-bottom: 6.1111111111rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .actio__sect {
    background: url(../img/actio-bg-pc.svg) left 50% bottom -2.5rem/89rem auto no-repeat, linear-gradient(#fff, #EFFCFF);
    margin-top: 2rem;
    padding-bottom: 8.0555555556rem;
  }
}
.actio__sect .cmn-content-width {
  padding-top: 8.7222222222rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .actio__sect .cmn-content-width {
    padding-top: 7.6111111111rem;
  }
}
.actio__sect .gradi-button {
  background-color: #3375FF;
  border-radius: 1.1111111111rem;
  box-shadow: 2px 4px 0px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.actio__sect .gradi-button .gradient {
  background: linear-gradient(#33DBFF, #3375FF);
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  transition: width 0.2s ease-in-out;
  width: 100%;
  z-index: 1;
}
.actio__sect .gradi-button .link {
  align-items: center;
  color: white;
  display: flex;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
  width: 100%;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .actio__sect .gradi-button .link:hover ~ .gradient {
    width: 0;
  }
}

.actio__entry .gradi-button {
  width: 28.8888888889rem;
}
@media screen and (min-width: 768px) {
  .actio__entry .gradi-button {
    width: 35.5555555556rem;
  }
}
.actio__entry .gradi-button .link {
  font-size: 1.3888888889rem;
  line-height: 1.6;
  padding: 0.8em 0;
}
@media screen and (min-width: 768px) {
  .actio__entry .gradi-button .link {
    font-size: 1.6666666667rem;
    line-height: 1.6;
    padding: 0.9em 0;
  }
}

.actio__osite {
  background-color: #D4F2FB;
  border-radius: 2px;
  color: #1A3964;
  margin: 7.2222222222rem auto 0;
  padding: 2.4444444444rem 1.5555555556rem 3rem;
}
@media screen and (min-width: 768px) {
  .actio__osite {
    margin-top: 6.6666666667rem;
    padding: 2.2222222222rem 1.5555555556rem 2.7222222222rem;
    width: 35.5555555556rem;
  }
}
.actio__osite h2 {
  font-size: 1rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .actio__osite h2 {
    font-size: 1.2222222222rem;
  }
}
.actio__osite ul {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9444444444em;
  gap: 0.6470588235em 1.2941176471em;
  justify-content: center;
  line-height: 1.9411764706;
  list-style: none;
  margin: 1.1764705882em 0 3em;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .actio__osite ul {
    font-size: 0.8888888889rem;
    gap: 0.625em 1.25em;
    line-height: 1.75;
    margin: 1.375em 0 1.9375em;
  }
}
.actio__osite ul li {
  border: 1px solid #000;
  border-radius: 1em;
  flex: 0 0 auto;
  min-width: 7.5294117647em;
  padding: 0 1.6470588235em;
  text-align: center;
}
.actio__osite .gradi-button {
  background-color: #08408E;
  width: 24.3333333333rem;
}
.actio__osite .gradi-button .gradient {
  background: linear-gradient(#0D76DE, #08408E);
}
.actio__osite .gradi-button .link {
  font-size: 1.2222222222rem;
  line-height: 1.6363636364;
  padding: 0.4090909091em 0;
}

.actio__deco {
  height: 100%;
  position: absolute;
  width: 100%;
}
.actio__deco .deco-line {
  display: block;
  height: auto;
  position: absolute;
}
.actio__deco .line1, .actio__deco .line3, .actio__deco .line4, .actio__deco .line5, .actio__deco .line8, .actio__deco .line9, .actio__deco .line10 {
  display: none;
}
@media screen and (min-width: 768px) {
  .actio__deco .line1, .actio__deco .line3, .actio__deco .line4, .actio__deco .line5, .actio__deco .line8, .actio__deco .line9, .actio__deco .line10 {
    display: block;
  }
}
.actio__deco .line1 {
  left: calc(50% - 54.1666666667rem);
  top: 0;
  width: 19.8888888889rem;
}
.actio__deco .line2 {
  left: -21.2222222222rem;
  top: 1.1666666667rem;
  width: 23.0555555556rem;
}
@media screen and (min-width: 768px) {
  .actio__deco .line2 {
    left: calc(50% - 36.4444444444rem);
    top: 1.1666666667rem;
    width: 23.0555555556rem;
  }
}
.actio__deco .line3 {
  left: calc(50% - 50.5rem);
  top: 3.9444444444rem;
  width: 32.6111111111rem;
}
.actio__deco .line4 {
  left: calc(50% - 42.8888888889rem);
  top: 8.8888888889rem;
  width: 12.8333333333rem;
}
.actio__deco .line5 {
  left: calc(50% + 27rem);
  top: 9.4444444444rem;
  width: 16.5555555556rem;
}
.actio__deco .line6 {
  left: 13.7222222222rem;
  top: 17.7777777778rem;
  width: 24.5rem;
}
@media screen and (min-width: 768px) {
  .actio__deco .line6 {
    left: calc(50% - 1.5555555556rem);
    top: 17.7777777778rem;
    width: 24.5rem;
  }
}
.actio__deco .line7 {
  left: 21.8333333333rem;
  top: 18rem;
  width: 50.3888888889rem;
}
@media screen and (min-width: 768px) {
  .actio__deco .line7 {
    left: calc(50% + 6.6111111111rem);
    top: 18rem;
    width: 50.3888888889rem;
  }
}
.actio__deco .line8 {
  left: calc(50% + 21.7777777778rem);
  top: 22.3888888889rem;
  width: 31.2777777778rem;
}
.actio__deco .line9 {
  left: calc(50% - 36.7222222222rem);
  top: 39rem;
  width: 14.5rem;
}
.actio__deco .line10 {
  left: calc(50% - 45.5rem);
  top: 41.1111111111rem;
  width: 20.9444444444rem;
}

/*===== animations =====*/
.mainv__body .body-covers .upper {
  transform: translateY(10vw);
}
@media screen and (min-width: 768px) {
  .mainv__body .body-covers .upper {
    transform: translateY(3.9473684211vw);
  }
}
.mainv__body .body-covers .lower {
  transform: translateY(-10vw);
}
@media screen and (min-width: 768px) {
  .mainv__body .body-covers .lower {
    transform: translateY(-3.9473684211vw);
  }
}
.mainv__body .body-covers.active .upper {
  animation: anm-body-cover-upper-sp 0.5s linear 0s 1 normal both;
}
@media screen and (min-width: 768px) {
  .mainv__body .body-covers.active .upper {
    animation-name: anm-body-cover-upper-pc;
  }
}
.mainv__body .body-covers.active .lower {
  animation: anm-body-cover-lower-sp 0.5s linear 0s 1 normal both;
}
@media screen and (min-width: 768px) {
  .mainv__body .body-covers.active .lower {
    animation-name: anm-body-cover-lower-pc;
  }
}

@keyframes anm-body-cover-upper-sp {
  0% {
    transform: translateY(10vw);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes anm-body-cover-lower-sp {
  0% {
    transform: translateY(-10vw);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes anm-body-cover-upper-pc {
  0% {
    transform: translateY(3.9473684211vw);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes anm-body-cover-lower-pc {
  0% {
    transform: translateY(-3.9473684211vw);
  }
  100% {
    transform: translateY(0px);
  }
}
.mainv__body h2 {
  opacity: 0;
  transition: opacity 1.5s ease-in 0.75s;
}
.mainv__body h2.active {
  opacity: 1;
}

.deco-line {
  opacity: 0;
  transform: translate(-16.6666666667vw, 1.1666666667vw);
  transition: transform 1s ease-out, opacity 1s linear;
  transition-delay: calc(var(--d) * 0.45s);
}
@media screen and (min-width: 768px) {
  .deco-line {
    transform: translate(-6.5789473684vw, 0.4605263158vw);
  }
}
.deco-line.active {
  opacity: 1;
  transform: translate(0, 0);
}

.intro__img > picture {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: transform 1s ease-out, opacity 0.75s linear;
  transition-delay: calc(var(--d) * 0.35s);
}
.intro__img > picture.active {
  opacity: 1;
  transform: translateY(0);
}

.slidein-title {
  opacity: 0;
  transform: translateY(1rem);
  transition: transform 1s ease-out, opacity 0.75s linear;
  transition-delay: 0.25s;
}
.slidein-title.active {
  opacity: 1;
  transform: translateY(0);
}
/*# sourceMappingURL=style.css.map */

/* added */
.hap_logo{
    display:flex;
    justify-content:center;
    align-items: center;
    width:100%;
    margin:10px auto 0 auto;
}
.hap_logo p{
    text-align:left;
    font-size:1em;
}
.hap_logo img{
    width:60px;
    height:auto;
    margin-right:10px;
}