@charset "utf-8";

/* ---------------------------------------------
Reset
--------------------------------------------- */
/* Modern browser */
*,
*::before,
*::after{box-sizing:border-box}
*{margin:0;padding:0;}
img,
picture,
video,
canvas,
svg{display:block;max-width:100%}
input,
button,
textarea,
select{font:inherit}
p,
h1,
h2,
h3,
h4,
h5,
h6{overflow-wrap:break-word}


/* addition */
img,
video {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
em {
  font-style: normal;
}
small {
  font-size: 70%;
}

ul,ol,li {
  padding: 0;
  list-style: none;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}


/* ---------------------------------------------
font
--------------------------------------------- */
html {
  font-family: 'Noto Sans JP', sans-serif;
}

html body,
table th,
table td {
  line-height: 1.6;
  color: #000;
  font-size: 3.4vw;
}
@media screen and (min-width:751px) {
  html body,
  table th,
  table td {
    font-size: 16px;
  }
}

strong, em {
  font-weight: 700;
}

.lp_page__class .font_Lexend {
  font-family: 'Lexend';
  font-size: 125%;
}


/* ---------------------------------------------
link
--------------------------------------------- */
a,
a:link,
a:visited
a:focus  {
  text-decoration: none;
  outline: none;
}


/* ---------------------------------------------
width
--------------------------------------------- */
.lp_page__wrapper {
  width: 100%;
  margin: 0 auto;
}

.contentsWrapper {
  width: 93.334%;
  margin: 0 auto;
}

#pageHeader,
#mainContents,
#pageFooter {
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width:751px) {
  #pageHeader,
  #mainContents,
  #pageFooter {
    width: 500px;
  }
}


/* ---------------------------------------------
cmn
--------------------------------------------- */
.lp_page__class .sec {
  margin: 0 auto;
}

.lp_page__class p {
  margin: 0;
}

.lp_page__class sup {
  font-size: 40%;
  vertical-align: super;
}

.lp_page__class .btn a,
.lp_page__class .btn a::after,
.lp_page__class .btn a::before {
  transition: all .2s;
}
.lp_page__class .btn a:hover {
  filter: saturate(130%);
}

.lp_page__class .btn.btnSt1 a::after {
  content: "";
  width: 2.4vw;
  height: 3.2vw;
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22svg3.svg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2017.66%2033.32%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23fff%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%203px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20id%3D%22_%22%20data-name%3D%22%20%22%20class%3D%22cls-1%22%20d%3D%22M1.5%2C1.5l14.66%2C15.13L1.5%2C31.82%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
  background-size: 100% auto;
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
}
@media screen and (min-width:751px) {
  .lp_page__class .btn.btnSt1 a::after {
    width: 10px;
    height: 21px;
  }
}
.lp_page__class .btn.btnSt1 a:hover::after {
  right: 6% !important;
}
.lp_page__class .btn.btnSt2 a:hover::before {
  background-position: center 35% !important;
}

.lp_page__class .red1 {
  color: #f78484;
}
.lp_page__class .blu1 {
  color: #00008a;
}

.lp_page__class .taC {
  text-align: center;
}
.lp_page__class .taR {
  text-align: right;
}

.lp_page__class .brPc {
  display: none;
}
@media screen and (min-width:751px) {
  .lp_page__class .brSp {
    display: none;
  }
  .lp_page__class .brPc {
    display: block;
  }
}

.lp_page__class .note small {
  font-size: 2.7vw;
  font-weight: 400;
  display: block;
}
@media screen and (min-width:751px) {
  .lp_page__class .note small {
    font-size: 18px;
  }
}
.lp_page__class .note1 small {
  padding-left: 1.2em;
  text-indent: -1.2em;
}
.lp_page__class .note2 small {
  padding-left: 2em;
  text-indent: -2em;
}

.lp_page__class .txt_sty1 {
  color: #fff;
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, 0 1px 1px #000, 0 -1px 1px #000, -1px 0 1px #000, 1px 0 1px #000, 2px 2px 1px #000, -2px -2px 1px #000, -2px 2px 1px #000, 2px -2px 1px #000, 0 2px 1px #000, 0 -2px 1px #000, -2px 0 1px #000, 2px 0 1px #000, 3px 3px 1px #000, -3px -3px 1px #000, -3px 3px 1px #000, 3px -3px 1px #000, 0 3px 1px #000, 0 -3px 1px #000, -3px 0 1px #000, 3px 0 1px #000;
}
.lp_page__class .txt_sty2 * {
  line-height: 1;
  background-color: #fff;
  display: inline !important;
}

/* bg */
.lp_page__class .bgSt1 {
  padding: 2em 0 1em;
  background-color: #ffcfcf;
  position: relative;
}
.lp_page__class .bgSt1::after {
  content: "";
  width: 100%;
  height: 19.7333vw;
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22bg.svg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201210%20148%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23ffcfcf%3B%20fill-rule%3A%20evenodd%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20id%3D%22_%E3%82%B7%E3%82%A7%E3%82%A4%E3%83%97_1%22%20data-name%3D%22%E3%82%B7%E3%82%A7%E3%82%A4%E3%83%97%201%22%20class%3D%22cls-1%22%20d%3D%22M1177.95%2C134.09c-29.88-10.65-61.84-14.56-93.48-11.42-21.41%2C2.2-42.13%2C8.52-63.49%2C11.03-32%2C3.65-64.43.07-94.79-10.47-22.03-7.82-42.13-19.99-64.2-27.73-27.95-9.55-57.62-13.33-87.14-11.11-23.7%2C1.97-46.53%2C9.35-70.14%2C11.81-30.12%2C3.04-60.56-.28-89.27-9.72-22.55-7.57-42.95-19.96-65.26-28.07-29.31-10.66-63.39-14.61-94.48-11.21-18.78%2C2.05-37.02%2C7.3-55.67%2C10.02-32.67%2C4.74-66.01%2C1.9-97.36-8.28-23.01-7.59-43.65-20.27-66.32-28.42-29.9-10.52-61.82-14.35-93.42-11.21-19.75%2C2.06-38.87%2C7.67-58.51%2C10.37-28.21%2C3.8-56.91%2C2.05-84.42-5.16V0h1210v148c-10.64-4.7-21.08-9.93-32.05-13.91Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center top;
  background-size: 162vw 100%;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
}
@media screen and (min-width:751px) {
  .lp_page__class .bgSt1::after {
    height: 100px;
    background-size: 1215px 100%;
  }
}
.lp_page__class .bgSt2 {
  margin-bottom: 0;
  padding-bottom: 21.3333vw;
  position: relative;
}
@media screen and (min-width:751px) {
  .lp_page__class .bgSt2 {
    padding-bottom: 90px;
  }
}
.lp_page__class .bgSt2::after {
  content: "";
  width: 100%;
  height: 19.7333vw;
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22bg.svg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201210%20148%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23ffcfcf%3B%20fill-rule%3A%20evenodd%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20id%3D%22_%E3%82%B7%E3%82%A7%E3%82%A4%E3%83%97_1%22%20data-name%3D%22%E3%82%B7%E3%82%A7%E3%82%A4%E3%83%97%201%22%20class%3D%22cls-1%22%20d%3D%22M1210%2C0v148H0v-14.52c27.51-7.21%2C56.21-8.96%2C84.42-5.16%2C19.64%2C2.69%2C38.76%2C8.31%2C58.51%2C10.37%2C31.6%2C3.14%2C63.52-.69%2C93.42-11.21%2C22.67-8.15%2C43.31-20.84%2C66.32-28.42%2C31.34-10.18%2C64.69-13.02%2C97.36-8.28%2C18.66%2C2.72%2C36.9%2C7.97%2C55.67%2C10.02%2C31.09%2C3.4%2C65.18-.55%2C94.48-11.21%2C22.31-8.12%2C42.71-20.51%2C65.26-28.07%2C28.7-9.45%2C59.14-12.76%2C89.27-9.72%2C23.61%2C2.46%2C46.44%2C9.84%2C70.14%2C11.81%2C29.52%2C2.22%2C59.19-1.57%2C87.14-11.11%2C22.06-7.74%2C42.17-19.91%2C64.2-27.73%2C30.37-10.54%2C62.79-14.12%2C94.79-10.47%2C21.36%2C2.51%2C42.08%2C8.84%2C63.49%2C11.03%2C31.64%2C3.13%2C63.59-.77%2C93.48-11.42%2C10.97-3.98%2C21.41-9.21%2C32.05-13.91Z%22%2F%3E%3C%2Fsvg%3E') no-repeat bottom center;
  background-size: 162vw 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
@media screen and (min-width:751px) {
  .lp_page__class .bgSt2::after {
    height: 100px;
    background-size: 1215px 100%;
  }
}
.lp_page__class .bgSt3 {
  position: relative;
}
.lp_page__class .bgSt3::after {
  content: "";
  width: 100%;
  height: 19.7333vw;
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22bg.svg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201210%20148%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23ffcfcf%3B%20fill-rule%3A%20evenodd%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20id%3D%22_%E3%82%B7%E3%82%A7%E3%82%A4%E3%83%97_1%22%20data-name%3D%22%E3%82%B7%E3%82%A7%E3%82%A4%E3%83%97%201%22%20class%3D%22cls-1%22%20d%3D%22M0%2C148V0h1210v14.52c-27.51%2C7.21-56.21%2C8.96-84.42%2C5.16-19.64-2.69-38.76-8.31-58.51-10.37-31.6-3.14-63.52.69-93.42%2C11.21-22.67%2C8.15-43.31%2C20.84-66.32%2C28.42-31.34%2C10.18-64.69%2C13.02-97.36%2C8.28-18.66-2.72-36.9-7.97-55.67-10.02-31.09-3.4-65.18.55-94.48%2C11.21-22.31%2C8.12-42.71%2C20.51-65.26%2C28.07-28.7%2C9.45-59.14%2C12.76-89.27%2C9.72-23.61-2.46-46.44-9.84-70.14-11.81-29.52-2.22-59.19%2C1.57-87.14%2C11.11-22.06%2C7.74-42.17%2C19.91-64.2%2C27.73-30.37%2C10.54-62.79%2C14.12-94.79%2C10.47-21.36-2.51-42.08-8.84-63.49-11.03-31.64-3.13-63.59.77-93.48%2C11.42-10.97%2C3.98-21.41%2C9.21-32.05%2C13.91Z%22%2F%3E%3C%2Fsvg%3E') no-repeat bottom center;
  background-size: 162vw 100%;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  z-index: 2;
}
@media screen and (min-width:751px) {
  .lp_page__class .bgSt3::after {
    height: 108px;
    background-size: 1215px 100%;
  }
}
.lp_page__class .bgSt4 {
  margin-bottom: 0;
  padding-bottom: 19.3333vw;
  position: relative;
}
@media screen and (min-width:751px) {
  .lp_page__class .bgSt4 {
    padding-bottom: 145px;
  }
}
.lp_page__class .bgSt4::after {
  content: "";
  width: 100%;
  height: 19.7333vw;
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22bg.svg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201210%20148%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23f6f6f6%3B%20fill-rule%3A%20evenodd%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20id%3D%22_%E3%82%B7%E3%82%A7%E3%82%A4%E3%83%97_1%22%20data-name%3D%22%E3%82%B7%E3%82%A7%E3%82%A4%E3%83%97%201%22%20class%3D%22cls-1%22%20d%3D%22M0%2C148V0h1210v14.52c-27.51%2C7.21-56.21%2C8.96-84.42%2C5.16-19.64-2.69-38.76-8.31-58.51-10.37-31.6-3.14-63.52.69-93.42%2C11.21-22.67%2C8.15-43.31%2C20.84-66.32%2C28.42-31.34%2C10.18-64.69%2C13.02-97.36%2C8.28-18.66-2.72-36.9-7.97-55.67-10.02-31.09-3.4-65.18.55-94.48%2C11.21-22.31%2C8.12-42.71%2C20.51-65.26%2C28.07-28.7%2C9.45-59.14%2C12.76-89.27%2C9.72-23.61-2.46-46.44-9.84-70.14-11.81-29.52-2.22-59.19%2C1.57-87.14%2C11.11-22.06%2C7.74-42.17%2C19.91-64.2%2C27.73-30.37%2C10.54-62.79%2C14.12-94.79%2C10.47-21.36-2.51-42.08-8.84-63.49-11.03-31.64-3.13-63.59.77-93.48%2C11.42-10.97%2C3.98-21.41%2C9.21-32.05%2C13.91Z%22%2F%3E%3C%2Fsvg%3E') no-repeat top center;
  background-size: 162vw 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
@media screen and (min-width:751px) {
  .lp_page__class .bgSt4::after {
    height: 148px;
    background-size: 1215px 100%;
  }
}

/* cta */
.lp_page__class .cta1 {
  padding-top: 32vw;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  position: relative;
  z-index: 2;
}
@media screen and (min-width:751px) {
  .lp_page__class .cta1 {
    padding-top: 140px;
  }
}
.webp .lp_page__class .cta1 {
  background-image: url(../images/cta1_bg1.webp);
}
.no-webp .lp_page__class .cta1 {
  background-image: url(../images/cta1_bg1.png);
} 
.lp_page__class .cta .cta1_btnArea {
  margin-bottom: 3em;
  position: relative;
}
.lp_page__class .cta .cta1_btnArea .btn {
  position: relative;
  z-index: 2;
}
.lp_page__class .cta .cta1_btnArea .ctaBtnSt1 {
  width: 82.667%;
  margin: 0 auto;
  text-align: center;
  line-height: 1.2;
  letter-spacing: .05em;
  font-size: 4.8vw;
  font-weight: 700;
}
@media screen and (min-width:751px) {
  .lp_page__class .cta .cta1_btnArea .ctaBtnSt1 {
    font-size: 25px;
  }
}
.lp_page__class .cta .cta1_btnArea .ctaBtnSt1 a {
  padding: .5em 0;
  color: #fff;
  border-radius: 3em;
  display: block;
  position: relative;
  background-color: #3b4043;
  border-radius: 5em;
  display: block;
  box-shadow: 0 1.3333vw 0 0 #000;
}
@media screen and (min-width:751px) {
  .lp_page__class .cta .cta1_btnArea .ctaBtnSt1 a {
    box-shadow: 0 7px 0 0 #000;
  }
}
.lp_page__class .cta1 .cta1_btnArea1 .ctaBtnSt1 a {
  background-color: #06c755;
  box-shadow: 0 1.3333vw 0 0 #04a145;
}
@media screen and (min-width:751px) {
  .lp_page__class .cta1 .cta1_btnArea1 .ctaBtnSt1 a {
    background-color: #06c755;
    box-shadow: 0 7px 0 0 #04a145;
  }
}
.lp_page__class .cta1 .cta1_btnArea1 .ttlArea {
  width: 57.334%;
  position: absolute;
  bottom: 60%;
  left: 0;
  z-index: 1;
}
.lp_page__class .cta1 .cta1_btnArea2 {
  margin-bottom: 1em;
}
.lp_page__class .cta1 .cta1_btnArea3 {
  margin-bottom: .5em;
}


/* ---------------------------------------------
#pageHeader
--------------------------------------------- */
#pageHeader {
  padding: 3.5999vw 0 2.5333vw;
  background-color: #000;
  position: relative;
  z-index: 1;
}
@media screen and (min-width:751px) {
  #pageHeader {
    padding: 27px 0 19px;
  }
}
#pageHeader .logo {
  width: 14.934%;
  margin: 0 auto;
}


/* ---------------------------------------------
#mainContents
--------------------------------------------- */
#mainContents {
  position: relative;
  z-index: 2;
}


/* contentHeader */
#mainContents .contentHeader {
  position: relative;
}
#mainContents .contentHeader::before {
  content: "";
  width: 100%;
  height: 94.6666vw;
  background-repeat: no-repeat;
  background-position: center top;
  position: absolute;
  background-size: 100% auto;
  top: -2.1333vw;
  left: 0;
  z-index: 2;
}
@media screen and (min-width:751px) {
  #mainContents .contentHeader::before {
    height: 710px;
    top: -16px;
  }
}
.webp #mainContents .contentHeader::before {
  background-image: url(../images/pageHeader_img2.webp);
}
.no-webp #mainContents .contentHeader::before {
  background-image: url(../images/pageHeader_img2.png);
}
#mainContents .contentHeader #hero {
  position: relative;
  z-index: 1;
}
#mainContents .contentHeader #hero .pageTitle {
}
#mainContents .contentHeader #hero .figVideo {
  width: 100%;
  margin: 0;
  position: relative;
  z-index: 10;
}


/* nav */
#mainContents .navSt1 {
  padding: 1em 0 0;
  position: relative;
  z-index: 2;
}
#mainContents .navSt1 .ttlArea {
  margin: 0 auto 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}
#mainContents .navSt1 .ttlArea::before,
#mainContents .navSt1 .ttlArea::after {
  content: "";
  width: 4.6666vw;
  height: 4vw;
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22nav_arrow1.svg%22%20data-name%3D%22nav%20arrow1.svg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2034.06%2029.53%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill-rule%3A%20evenodd%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20id%3D%22_%22%20data-name%3D%22%20%22%20class%3D%22cls-1%22%20d%3D%22M17.03%2C29.53L0%2C0h34.06l-17.03%2C29.53Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
  background-size: 100% auto;
  display: block;
}
@media screen and (min-width:751px) {
  #mainContents .navSt1 .ttlArea::before,
  #mainContents .navSt1 .ttlArea::after {
    width: 25px;
    height: 30px;
  }
}
#mainContents .navSt1 .ttlArea .ttl {
  width: 57.334%;
  margin: 0 .7em;
}
#mainContents .navSt1 .navList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#mainContents .navSt1 .navList {
  padding-bottom: 2.5em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}
#mainContents .navSt1 .navList li {
  width: 48.572%;
  margin-bottom: 3em;
  padding: 3.3333vw 0 6.6666vw;
  border: .8vw solid #3b4043;
  border-radius: .53333vw;
  background: url();
  background-repeat: repeat;
  background-position: center;
  background-size: 3.0666vw auto;
  position: relative;
}
@media screen and (min-width:751px) {
  #mainContents .navSt1 .navList li {
    padding: 15px 0 40px;
    border-width: 6px;
    border-radius: 4px;
    background-size: 23px auto;
  }
}
.webp #mainContents .navSt1 .navList li {
  background-image: url(../images/nav_bg1.webp);
}
.no-webp #mainContents .navSt1 .navList li {
  background-image: url(../images/nav_bg1.jpg);
}
#mainContents .navSt1 .navList li .ttl {
  margin: 0 auto .3em;
  text-align: center;
  line-height: 1.5;
  font-size: 4vw;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
@media screen and (min-width:751px) {
  #mainContents .navSt1 .navList li .ttl {
    font-size: 21px;
  }
}
#mainContents .navSt1 .navList li .ttl .logo {
  line-height: 0;
}
#mainContents .navSt1 .navList li .name {
  width: 97.561%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
#mainContents .navSt1 .navList li .btnArea {
  width: 60.98%;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -55%);
}
#mainContents .navSt1 .navList li .btnArea::before,
#mainContents .navSt1 .navList li .btnArea .btn {
  width: 100%;
  height: 9.3333vw;
  border-radius: .8vw;
}
@media screen and (min-width:751px) {
  #mainContents .navSt1 .navList li .btnArea::before,
  #mainContents .navSt1 .navList li .btnArea .btn {
    height: 55px;
    border-radius: 6px;
  }
}
#mainContents .navSt1 .navList li .btnArea::before {
  content: "";
  background-color: #fff100;
  position: absolute;
  top: .9333vw;
  left: .8vw;
  z-index: 1;
}
@media screen and (min-width:751px) {
  #mainContents .navSt1 .navList li .btnArea::before {
    top: 5px;
    left: 4px;
  }
}
#mainContents .navSt1 .navList li .btnArea .btn {
  background-color: #000;
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .1s;
  cursor: pointer;
}
#mainContents .navSt1 .navList li .btnArea .btn:hover {
  top: .9333vw;
  left: .8vw;
}
@media screen and (min-width:751px) {
  #mainContents .navSt1 .navList li .btnArea .btn:hover {
    top: 5px;
    left: 4px;
  }
}
#mainContents .navSt1 .navList li .btnArea .btn .txt {
  width: 31%;
  margin: 0;
  position: relative;
  z-index: 2;
  display: block;
}
#mainContents .navTop .navList::before {
  content: "";
  width: 9.3333vw;
  height: 6.8vw;
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%20data-name%3D%22%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2086.67%2062.36%22%3E%20%3Cpath%20d%3D%22M1.9%2C0c9.28%2C24.32%2C38.36%2C46.6%2C84.77%2C40.29C44.94%2C53.12%2C3.84%2C40.6%2C1.9%2C0Z%22%2F%3E%20%3Cpath%20d%3D%22M0%2C39.75c4.73%2C14.28%2C20.29%2C21.93%2C29.87%2C20.19-16.82%2C6.75-28.87-.77-29.87-20.19Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
  background-size: 100% auto;
  position: absolute;
  bottom: 0;
  left: 3%;
}
@media screen and (min-width:751px) {
  #mainContents .navTop .navList::before {
    width: 50px;
    height: 51px;
  }
}
#mainContents .navSt1.nav2 .navList {
  padding-bottom: 0;
}
#mainContents .navSt1.nav2 li {
  margin-bottom: 2.6666vw;
  padding: 0;
}
@media screen and (min-width:751px) {
  #mainContents .navSt1.nav2 li {
    margin-bottom: 20px;
  }
}
#mainContents .navSt1.nav2 li a {
  padding: 3.3333vw 0 2.66666vw;
  display: block;
  position: relative;
}
@media screen and (min-width:751px) {
  #mainContents .navSt1.nav2 li a {
    padding: 15px 0 10px;
  }
}
#mainContents .navSt1.nav2 li a::after {
  content: "";
  width: 3.7333vw;
  height: 3.7333vw;
  background-color: #000;
  position: absolute;
  right: 0;
  bottom: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
@media screen and (min-width:751px) {
  #mainContents .navSt1.nav2 li a::after {
    width: 28px;
    height: 28px;
  }
}
#mainContents .navSt1.nav2 li a:hover {
  background-color: rgba(255, 241, 0, .1);
}


/* tab */
#mainContents .tabLayout .tabs .tab {
  cursor: pointer;
}
#mainContents .tabLayout .tabContents,
#mainContents .tabLayout .tabContents2 {
  position: relative;
}
#mainContents .tabLayout .tabContents .tabContent,
#mainContents .tabLayout .tabContents2 .tabContent {
  position: absolute;
  top: 0;
  left: 30px;
  z-index: -1;
  opacity: 0;
  transition: all .3s;
}
#mainContents .tabLayout .tabContents2 .tabContent {
  display: none;
}
#mainContents .tabLayout .tabContents .tabContent.active,
#mainContents .tabLayout .tabContents2 .tabContent.active {
  display: block;
  position: relative;
  left: 0;
  z-index: 10;
  opacity: 1;
}



/* contents */
#mainContents #sec1 {
  padding-top: 21.3333vw;
  background-color: #f6f6f6;
  position: relative;
  z-index: 1;
}
@media screen and (min-width:751px) {
  #mainContents #sec1 {
    padding-top: 110px;
  }
}
#mainContents #sec1 .mangaSec {
  margin-bottom: 3em;
  position: relative;
  border: .5333vw solid #3b4043;
  border-bottom-width: 1.3333vw;
  border-radius: 2.6666vw 2.6666vw 0 0;
  overflow: hidden;
}
@media screen and (min-width:751px) {
  #mainContents #sec1 .mangaSec {
    border: 4px solid #3b4043;
    border-bottom-width: 10px;
    border-radius: 20px 20px 0 0;
  }
}
#mainContents #sec1 .mangaSec::after {
  content: '';
  width: 100%;
  height: 24.9333vw;
  background-color: #3b4043;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
@media screen and (min-width:751px) {
  #mainContents #sec1 .mangaSec::after {
    height: 187px;
  }
}
#mainContents #sec1 .mangaSec .ttlArea {
  padding: 2.1333vw 0 2.6666vw;
  background-color: #3b4043;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width:751px) {
  #mainContents #sec1 .mangaSec .ttlArea {
    padding: 16px 0 20px;
  }
}
.webp #mainContents #sec1 .mangaSec .ttlArea {
  background-image: url(../images/manga_sec_bg1.webp);
}
.no-webp #mainContents #sec1 .mangaSec .ttlArea {
  background-image: url(../images/manga_sec_bg1.jpg);
}
#mainContents #sec1 .mangaSec .ttlArea .name {
  width: 18.787%;
  margin-right: 1.5em;
}
#mainContents #sec1 .mangaSec .ttlArea .ttl {
  line-height: 1.1;
  color: #fff;
  font-size: 5.3333vw;
  font-weight: 700;
}
@media screen and (min-width:751px) {
  #mainContents #sec1 .mangaSec .ttlArea .ttl {
    font-size: 30px;
  }
}
#mainContents #sec1 .mangaSec .mangaCont p {
  margin-bottom: 1em;
}
#mainContents #sec1 .mangaSec .mangaCont p:last-child {
  margin-bottom: 0;
}
#mainContents #sec1 .mangaSec .mangaCont {
  background-color: #fff;
}


#mainContents #sec2 {
  position: relative;
  z-index: 2;
}
#mainContents #sec2 .bg {
  padding: 12.6666vw 0 4vw;
  background-color: #ffcfcf;
}
@media screen and (min-width:751px) {
  #mainContents #sec2 .bg {
    padding: 55px 0 30px;
  }
}
#mainContents #sec2 .isAhamo {
  margin-bottom: .3em;
  padding-top: 17.3333vw;
  text-align: center;
  background-color: #fff5f5;
  border: 1.3333vw solid #000;
  position: relative;
}
@media screen and (min-width:751px) {
  #mainContents #sec2 .isAhamo {
    padding-top: 90px;
    border: 10px solid #000;
  }
}
#mainContents #sec2 .isAhamo .secTtl {
  width: 64.412%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -45%);
  z-index: 2;
}
#mainContents #sec2 .isAhamo .isAhamoList {
  margin-bottom: 2em;
  text-align: left;
  display: inline-block;
}
#mainContents #sec2 .isAhamo .isAhamoList li {
  padding-left: 1.5em;
  font-size: 4.2666vw;
  font-weight: 600;
  position: relative;
}
@media screen and (min-width:751px) {
  #mainContents #sec2 .isAhamo .isAhamoList li {
    font-size: 21px;
  }
}
#mainContents #sec2 .isAhamo .isAhamoList li::before {
  content: "";
  width: 5.2vw;
  height: 5.0666vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
@media screen and (min-width:751px) {
  #mainContents #sec2 .isAhamo .isAhamoList li::before {
    width: 25px;
    height: 25px;
  }
}
.webp #mainContents #sec2 .isAhamo .isAhamoList li::before {
  background-image: url(../images/sec2_arrow1.webp);
}
.no-webp #mainContents #sec2 .isAhamo .isAhamoList li::before {
  background-image: url(../images/sec2_arrow1.png);
}
#mainContents #sec2 .isAhamo .txtArea {
  height: 47.1999vw;
  background: url(../images/sec2_bg1.png) no-repeat center;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width:751px) {
  #mainContents #sec2 .isAhamo .txtArea {
    height: 234px;
  }
}


#mainContents #sec3 {
  margin-bottom: -3em;
  position: relative;
  z-index: 1;
}
#mainContents #sec3 .bg {
  padding: 22.6666vw 0 1px;
  background-color: #f6f6f6;
}
@media screen and (min-width:751px) {
  #mainContents #sec3 .bg {
    padding-top: 130px;
  }
}
#mainContents #sec3 .secTtl {
  margin-bottom: 16vw;
  text-align: center;
  font-size: 5.3333vw;
  font-weight: 900;
}
@media screen and (min-width:751px) {
  #mainContents #sec3 .secTtl {
    margin-bottom: 90px;
    font-size: 25px;
  }
}
#mainContents #sec3 .steps .step {
  margin-bottom: 10.6666vw;
  padding-top: 2.6666vw;
  position: relative;
}
@media screen and (min-width:751px) {
  #mainContents #sec3 .steps .step {
    margin-bottom: 50px;
    padding-top: 20px;
  }
}
#mainContents #sec3 .steps .step::before,
#mainContents #sec3 .steps .step::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#mainContents #sec3 .steps .step::before {
  width: 100%;
  height: 32.6666vw;
  background-color: #000;
  z-index: 1;
  clip-path: polygon(4.6666vw 1.6vw, 100% 0, calc(100% - 4.6666vw) 100%, 0 100%);
}
@media screen and (min-width:751px) {
  #mainContents #sec3 .steps .step::before {
    height: 165px;
    clip-path: polygon(35px 12px, 100% 0, calc(100% - 35px) 100%, 0 100%);
  }
}
#mainContents #sec3 .steps .step::after {
  width: 90.5333vw;
  height: 30.2666vw;
  background: url(../images/sec3_bg2.svg) no-repeat right 40px bottom 40px #fff;
  z-index: 2;
  clip-path: polygon(5.4666vw 2.2666vw, 100% 0, calc(100% - 4vw) calc(100% - 2.6666vw), 0 100%);
}
@media screen and (min-width:751px) {
  #mainContents #sec3 .steps .step::after {
    width: 97.143%;
    height: 143%;
    clip-path: polygon(41px 17px, 100% 0, calc(100% - 30px) calc(100% - 20px), 0 100%);
  }
}
#mainContents #sec3 .steps .step .ttl {
  width: 32.8vw;
  height: 17.7333vw;
  font-size: 5.3333vw;
  font-weight: 900;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -85%);
}
@media screen and (min-width:751px) {
  #mainContents #sec3 .steps .step .ttl {
    width: 35%;
    height: 103px;
    font-size: 20px;
  }
}
.webp #mainContents #sec3 .steps .step .ttl {
  background-image: url(../images/sec3_cloud1.webp);
}
.no-webp #mainContents #sec3 .steps .step .ttl {
  background-image: url(../images/sec3_cloud1.png);
}
#mainContents #sec3 .steps .step .step_inner {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
#mainContents #sec3 .steps .step .figImg {
  width: 20%;
  margin-right: 1em;
  position: relative;
}
#mainContents #sec3 .steps .step1 .figImg::before {
  content: "";
  width: 10.6666vw;
  height: 13.3333vw;
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22svg2.svg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2079.31%2099.52%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23f89090%3B%20fill-rule%3A%20evenodd%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20id%3D%22deco%22%20class%3D%22cls-1%22%20d%3D%22M0%2C29.29L18.13%2C0l22.57%2C39.96%2C9.59-15.49%2C29.02%2C75.05-32.92-43.16-7.3%2C11.78L0%2C29.29Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
  background-size: 100% auto;
  position: absolute;
  bottom: calc(85% + .6666vw);
  left: -4vw;
}
@media screen and (min-width:751px) {
  #mainContents #sec3 .steps .step1 .figImg::before {
    width: 60%;
    height: 100px;
    bottom: calc(100% + 5px);
    left: -25px;
  }
}
#mainContents #sec3 .steps .step .txtArea {
  line-height: 1.4;
  font-size: 4.2666vw;
  font-weight: 600;
}
@media screen and (min-width:751px) {
  #mainContents #sec3 .steps .step .txtArea {
    font-size: 20px;
  }
}
#mainContents #sec3 .steps .step .txtArea .sub {
  font-size: 80%;
}
#mainContents #sec3 .steps .next {
  margin-bottom: 16.2666vw;
  text-align: center;
  position: relative;
}
@media screen and (min-width:751px) {
  #mainContents #sec3 .steps .next {
    margin-bottom: 91px;
  }
}
#mainContents #sec3 .steps .next span,
#mainContents #sec3 .steps .next span::before,
#mainContents #sec3 .steps .next span::after {
  width: 1.6vw;
  height: 1.6vw;
  margin: 0 auto;
  background-color: #ccc;
  border-radius: 50%;
  display: block;
  position: relative;
}
@media screen and (min-width:751px) {
  #mainContents #sec3 .steps .next span,
  #mainContents #sec3 .steps .next span::before,
  #mainContents #sec3 .steps .next span::after {
    width: 9px;
    height: 9px;
  }
}
#mainContents #sec3 .steps .next span {
  margin: 5px  auto;
}
#mainContents #sec3 .steps .next span::before,
#mainContents #sec3 .steps .next span::after {
  content: "";
  position: absolute;
  left: 0;
}
#mainContents #sec3 .steps .next span::before {
  bottom: calc(100% + .5333vw);
}
@media screen and (min-width:751px) {
  #mainContents #sec3 .steps .next span::before {
    bottom: calc(100% + 4px);
  }
}
#mainContents #sec3 .steps .next span::after {
  top: calc(100% + .5333vw);
}
@media screen and (min-width:751px) {
  #mainContents #sec3 .steps .next span::after {
    top: calc(100% + 4px);
  }
}


#mainContents #sec4 .linkBtn {
  width: 72vw;
  margin: 0 auto 4em;
}
@media screen and (min-width:751px) {
  #mainContents #sec4 .linkBtn {
    width: 72%;
  }
}
#mainContents #sec4 .linkBtn a {
  padding: 6vw 0;
  background-color: #000;
  border-radius: 2.6666vw;
  display: block;
  position: relative;
  box-shadow: 0 1.3333vw 0 0 #fff100;
}
@media screen and (min-width:751px) {
  #mainContents #sec4 .linkBtn a {
    padding: 35px 0;
    border-radius: 20px;
    box-shadow: 0 7px 0 0 #fff100;
  }
}
#mainContents #sec4 .linkBtn a::before {
  content: "";
  width: 8vw;
  height: 8vw;
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22svg4.svg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032.01%2018%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23fff%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%203px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20id%3D%22_%22%20data-name%3D%22%20%22%20class%3D%22cls-1%22%20d%3D%22M1.5%2C16.5L16.46%2C1.5l14.05%2C15%22%2F%3E%3C%2Fsvg%3E') no-repeat center #000;
  background-size: 4.2666vw auto;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -38%);
}
@media screen and (min-width:751px) {
  #mainContents #sec4 .linkBtn a::before {
    width: 50px;
    height: 50px;
    background-size: 22px auto;
  }
}
#mainContents #sec4 .linkBtn .txt {
  width: 48.334%;
  margin: 0 auto;
  display: block;
}
#mainContents #sec4 .ttlArea {
  margin-bottom: 2em;
}
#mainContents #sec4 .ttlArea .secTtl {
  width: 29.334%;
  margin: 0 auto;
}


#mainContents #sec5 {
  padding: 26.6666vw 0 1px;
  background-color: #f6f6f6;
}
@media screen and (min-width:751px) {
  #mainContents #sec5 {
    padding-top: 120px;
  }
}
#mainContents #sec5 .btnArea {
  text-align: center;
}
#mainContents #sec5 .btnArea .btn {
  width: 77.144%;
  margin: 0 auto;
  position: relative;
}
#mainContents #sec5 .btnArea .btn a {
  padding: .8em 0;
  color: #fff;
  font-size: 4.2666vw;
  font-weight: 700;
  background-color: #3b4043;
  border-radius: 2.6666vw;
  display: block;
}
@media screen and (min-width:751px) {
  #mainContents #sec5 .btnArea .btn a {
    font-size: 22px;
    border-radius: 20px;
  }
}


/* ---------------------------------------------
#pageFooter
--------------------------------------------- */
#pageFooter {
  padding: 2em 0 0;
  text-align: center;
  font-size: 3.4666vw;
  background-color: #f6f6f6;
}
@media screen and (min-width:751px) {
  #pageFooter {
    font-size: 16px;
  }
}
#pageFooter .name,
#pageFooter .add {
  color: #3b4043;
}
#pageFooter .name {
  font-weight: 600;
}
#pageFooter .add {
  margin-bottom: 1em;
}
#pageFooter .footerNav {
  margin: 0 0 2em;
  text-align: center;
}
#pageFooter .footerNav ul {
  display: flex;
  justify-content: center;
}
#pageFooter .footerNav ul li {
  margin: 0 1em;
  padding: 0;
}
#pageFooter .footerNav ul li a:link,
#pageFooter .footerNav ul li a:visited {
  color: #f78484;
  text-decoration: underline;
}
#pageFooter .footerNav ul li a:hover {
  text-decoration: none;
}
#pageFooter .copyright {
  padding: 1.5em 0 29.3333vw;
  font-size: 2vw;
  background-color: #fff;
}
@media screen and (min-width:751px) {
  #pageFooter .copyright {
    padding-bottom: 150px;
    font-size: 14px;
  }
}


/* ---------------------------------------------
floatingBtn
--------------------------------------------- */
.floatingBtn {
  width: 100%;
  margin: 0 auto;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
}
@media screen and (min-width:751px) {
  .floatingBtn {
    max-width: 500px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.floatingBtn .txtArea {
  position: relative;
  z-index: 1;
}
.floatingBtn .btn {
  width: 60%;
  text-align: center;
  position: absolute;
  top: 50%;
  right: 3%;
  z-index: 1;
  transform: translateY(-50%);
}
.floatingBtn .btn a {
  padding: .5em 0;
  color: #fff;
  font-size: 4.8vw;
  font-weight: 700;
  border-radius: 3em;
  display: block;
  position: relative;
  background-color: #06c755;
  border-radius: 5em;
  display: block;
  box-shadow: 0 1.3333vw 0 0 #04a145;
}
@media screen and (min-width:751px) {
  .floatingBtn .btn a {
    font-size: 22px;
    box-shadow: 0 7px 0 0 #04a145;
  }
}


/* ---------------------------------------------
content_bg
--------------------------------------------- */
.content_bg {
  display: none;
}
@media screen and (min-width:751px) {
  .content_bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    display: block;
  }
  .content_bg picture {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
  }
  .content_bg picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
}