@charset "UTF-8";
html,
body {
  margin: 0;
  height: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "M PLUS Rounded 1c", sans-serif;
}

body {
  background: url("../images/bg.jpg") center center/cover no-repeat fixed;
}

.side-left,
.side-right,
.menuBox {
  transform: none;
}

.layout {
  display: flex;
  justify-content: center;
  height: 100vh;
}

/* 左右固定 */
.side {
  display: none;
}

.lestLinkBox {
  display: none;
}

.side-left {
  position: fixed;
  left: 0;
  top: 0;
  width: max(0px, (100% - 600px) / 2);
  height: 100vh;
}

.side-right {
  display: none;
  position: fixed;
  right: 0;
  top: 0;
  width: max(0px, (100% - 600px) / 2);
  height: 100vh;
}

/* 中央のみスクロール */
.center {
  width: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.SPtopadLinkButton {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 180px;
  height: 40px;
  background-color: #FBF9F8;
  border: 1px solid #8594D4;
  color: #8594D4;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-family: "Noto Sans JP", sans-serif;
  padding: 0.5em 1.25em;
  top: 5px;
  left: 5px;
}
.SPtopadLinkButton.adLinkArrow {
  padding-right: 2em;
}
.SPtopadLinkButton.adLinkArrow:after {
  content: "";
  display: block;
  border-top: solid 3px #8594D4;
  border-right: solid 3px #8594D4;
  width: 8px;
  height: 8px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1em;
  transform: rotate(45deg);
  transition: border 0.3s;
}
.SPtopadLinkButton:hover {
  background-color: #8594D4;
  color: #FBF9F8;
}
.SPtopadLinkButton:hover.adLinkArrow:after {
  border-top: solid 3px #FBF9F8;
  border-right: solid 3px #FBF9F8;
}

.backWhite {
  position: relative;
}

.backWhite::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/bg02.png") repeat-y top center;
  background-size: 100% auto;
  z-index: 2;
  pointer-events: none;
}

.about > *,
.recommend > *,
.start > *,
.type > * {
  position: relative;
  z-index: 3;
}

.backGray {
  position: relative;
}

.backGray::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/bg03.png") repeat-y top center;
  background-size: 100% auto;
  z-index: 2;
  pointer-events: none;
}

.method > * {
  position: relative;
  z-index: 3;
}

.about {
  position: relative;
  background-color: #F2DAFF;
  padding-top: 70px;
  padding-bottom: 70px;
}

.aboutImg01 {
  position: absolute;
  top: 290px;
  right: 0px;
}

.aboutImg02 {
  position: absolute;
  top: 305px;
  left: 5px;
}

.aboutImg03 {
  position: absolute;
  bottom: 5px;
  right: 19px;
}

.aboutTextBox {
  padding: 17px 17px;
  margin: 0 10px;
  background-color: #FEF1FB;
  border: 1px solid #8594D4;
  color: #6B6B6B;
  border-radius: 25px;
  font-size: 15px;
  font-weight: 500;
  transform: rotateZ(0.03deg);
}

.aboutText {
  font-size: 14px;
  text-align: center;
  color: #404040;
  transform: rotateZ(0.03deg);
}

.aboutUnderBar {
  background: linear-gradient(transparent 65%, rgba(133, 148, 212, 0.6) 72%);
  line-height: 1.8;
}

.aboutTitleImg {
  width: 335px;
  height: auto;
  margin: auto;
}

.aboutBoxImg {
  width: 270px;
  height: auto;
  margin: auto;
}

.dot-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dot-list li {
  position: relative;
  padding-left: 0.8em;
}

.dot-list li::before {
  content: "・";
  position: absolute;
  left: 0;
}

.recommend {
  position: relative;
  background-color: #FEDCE6;
  padding-top: 70px;
  padding-bottom: 50px;
}

.recommendTitleImg {
  width: 300px;
  height: auto;
  margin: auto;
}

.recommendTextBox {
  padding: 17px 17px;
  margin: 0 10px;
  background-color: #FDF6F4;
  border: 1px solid #F08BB4;
  color: #6B6B6B;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  transform: rotateZ(0.03deg);
}

.recommendImg {
  width: 370px;
  height: auto;
  margin: auto;
}

.recommendText {
  font-size: 13px;
  text-align: center;
  color: #404040;
  transform: rotateZ(0.03deg);
}

.recommendImg01 {
  position: absolute;
  bottom: 45px;
  left: -5px;
}

.recommendImg02 {
  position: absolute;
  bottom: 5px;
  right: 0px;
}

.recommendUnderBar {
  background: linear-gradient(transparent 65%, rgba(240, 139, 180, 0.6) 72%);
  line-height: 1.8;
}

.start {
  position: relative;
  background-color: #FAF4C3;
  padding-top: 70px;
  padding-bottom: 65px;
}

.startTitleImg {
  width: 335px;
  height: auto;
  margin: auto;
}

.startTextBox {
  padding: 20px 5px;
  margin: 0 10px;
  background-color: #FFFEEA;
  border: 1px solid #F9A476;
  color: #6B6B6B;
  border-radius: 25px;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
  transform: rotateZ(0.03deg);
}

.startImg01 {
  position: absolute;
  bottom: 65px;
  right: -10px;
}

.startImg02 {
  position: absolute;
  bottom: 35px;
  left: 0;
}

.startText {
  font-size: 14px;
  text-align: center;
  color: #404040;
  transform: rotateZ(0.03deg);
}

.startUnderBar {
  background: linear-gradient(transparent 65%, rgba(249, 164, 118, 0.6) 72%);
  line-height: 1.8;
}

.type {
  position: relative;
  background-color: #DAE8F4;
  padding-top: 95px;
  padding-bottom: 86px;
}

.typeTitleImg {
  width: 140px;
  height: auto;
  margin: auto;
}

.typeImg01 {
  position: absolute;
  top: 37px;
  left: 2px;
}

.typeImg02 {
  position: absolute;
  top: 77px;
  right: 15px;
}

.typeText {
  font-size: 14px;
  text-align: center;
  color: #404040;
  transform: rotateZ(0.03deg);
}

.typeUnderBar {
  background: linear-gradient(transparent 65%, rgba(146, 177, 237, 0.6) 72%);
  line-height: 1.8;
}

.adCardList {
  display: grid;
  grid-template-columns: repeat(2, 180px);
  gap: 20px 12px;
  justify-content: center;
}

.adCard {
  width: 180px;
  height: 170px;
  display: flex;
  flex-direction: column;
  background: #EEF2FF;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: 0.3s;
}

.adCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.adImgArea {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
}

.adCardImg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.adCard span {
  height: 47px;
  background: #7BA1E8;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
}

.adCard span::after {
  content: "";
  display: block;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  width: 8px;
  height: 8px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.8em;
  transform: rotate(45deg);
  transition: border 0.3s;
}

.adOtherLink {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 200px;
  height: 45px;
  border: 1px solid #698FD7;
  border-radius: 50px;
  background-color: #D4DAFF;
  color: #698FD7;
  margin: auto;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
}
.adOtherLink p {
  font-weight: bold;
}
.adOtherLink.OtherArrow {
  padding-right: 0.6em;
  position: relative;
}
.adOtherLink.OtherArrow:after {
  content: "";
  display: block;
  border-top: solid 3px #698FD7;
  border-right: solid 3px #698FD7;
  width: 8px;
  height: 8px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1em;
  transform: rotate(45deg);
  transition: border 0.3s;
}
.adOtherLink:hover {
  background-color: #698FD7;
  color: #D4DAFF;
}
.adOtherLink:hover.OtherArrow:after {
  border-top: solid 3px #D4DAFF;
  border-right: solid 3px #D4DAFF;
}

.method {
  background-color: #D9D9D9;
  padding-top: 70px;
  padding-bottom: 20px;
  font-family: "Noto Sans JP", sans-serif;
}

.methodTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 35px;
  background-color: #F372A6;
  border: 0.8px solid #6D6D6D;
  border-radius: 15px;
  margin: auto;
}
.methodTitle img {
  width: 200px;
}

.methodStepFlow {
  background-color: #FBF9F8;
  border: 0.5px solid #6D6D6D;
  border-radius: 20px;
  padding: 45px 10px;
  margin: 0 16px;
}

.methodStepItem {
  counter-reset: methodStep;
}

.methodStep {
  position: relative;
  padding-left: 52px;
  padding-bottom: 32px;
}

.methodStep:last-child {
  padding-bottom: 0;
}

.methodStep::before {
  counter-increment: methodStep;
  content: counter(methodStep);
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FBF9F8;
  border: 2px solid #6D6D6D;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 15px;
  z-index: 1;
}

.methodStep:last-child::after {
  display: none;
}

.methodStep h2 {
  margin: 0 0 12px;
  font-size: 19px;
}

.methodUnderBar {
  background: linear-gradient(transparent 65%, rgba(243, 114, 166, 0.6) 72%);
  line-height: 1.8;
}

.methodStep p {
  font-size: 16.5px;
  position: relative;
  left: -15px;
  margin: 0;
}

.methodStep ul {
  font-size: 16.5px;
  position: relative;
  left: -15px;
}

.methodStep::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 42px;
  width: 2px;
  height: calc(100% - 12px);
  background: repeating-linear-gradient(to bottom, #727272 0, #727272 6px, transparent 6px, transparent 12px);
}

.methodStepOrenge {
  color: #E45429;
}

.methodStepMediumOrenge {
  color: #E45429;
  font-weight: 500;
}

.methodCheck {
  padding: 30px 20px;
}

.methodCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.methodText {
  font-size: 16.5px;
}

.methodStepBoder {
  border-top: 1px solid #999999;
  position: relative;
  left: -20px;
}

.methodTitleImg {
  width: 240px;
  margin: auto;
}

.methodTitleImg2 {
  margin: auto;
}

.methodContactLink {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 300px;
  height: 60px;
  border: 1px solid #6D6D6D;
  border-radius: 50px;
  background-color: #F0F0F0;
  color: #404040;
  margin: auto;
  font-size: 16px;
  font-weight: bold;
  font-family: "Noto Sans JP", sans-serif;
}
.methodContactLink.methodArrow {
  padding-right: 0.6em;
  position: relative;
}
.methodContactLink.methodArrow:after {
  content: "";
  display: block;
  border-top: solid 3px #404040;
  border-right: solid 3px #404040;
  width: 8px;
  height: 8px;
  margin: auto;
  position: absolute;
  top: 1px;
  bottom: 0;
  right: 1em;
  transform: rotate(45deg);
  transition: border 0.3s;
}
.methodContactLink:hover {
  background-color: #404040;
  color: #F0F0F0;
}
.methodContactLink:hover.methodArrow:after {
  border-top: solid 3px #F0F0F0;
  border-right: solid 3px #F0F0F0;
}

.methodArea {
  margin-left: 40px;
  margin-right: 12px;
}

.methodPDFLink {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 300px;
  height: 60px;
  border: 1px solid #E45429;
  border-radius: 50px;
  background-color: #FBF9F8;
  color: #E45429;
  margin: auto;
  font-size: 16px;
  font-weight: bold;
  font-family: "Noto Sans JP", sans-serif;
}
.methodPDFLink.methodPdf {
  padding-right: 2em;
  position: relative;
}
.methodPDFLink.methodPdf:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.5em;
  margin: auto;
  width: 33px;
  height: 33px;
  background: url("../images/icon-pdf.png") no-repeat center center;
  background-size: contain;
}
.methodPDFLink:hover {
  background-color: #E45429;
  color: #FBF9F8;
}

.spadLinkButton {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 180px;
  height: 40px;
  background-color: #FBF9F8;
  border: 1px solid #8594D4;
  color: #8594D4;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-family: "Noto Sans JP", sans-serif;
  padding: 0.5em 1.25em;
  margin-top: 145px;
  margin-left: 20px;
}
.spadLinkButton.adLinkArrow {
  padding-right: 2em;
  position: relative;
}
.spadLinkButton.adLinkArrow:after {
  content: "";
  display: block;
  border-top: solid 3px #8594D4;
  border-right: solid 3px #8594D4;
  width: 8px;
  height: 8px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1em;
  transform: rotate(45deg);
  transition: border 0.3s;
}
.spadLinkButton:hover {
  background-color: #8594D4;
  color: #FBF9F8;
}
.spadLinkButton:hover.adLinkArrow:after {
  border-top: solid 3px #FBF9F8;
  border-right: solid 3px #FBF9F8;
}

.Copyright {
  position: relative;
  background-color: #BDBDBD;
  font-size: 15px;
  text-align: center;
  padding: 20px;
}

.pageTop {
  position: absolute;
  bottom: 105px;
  right: 20px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background-color: #FBF9F8;
  border: 1px solid #F372A6;
  color: #F372A6;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  z-index: 1000;
  transition: 0.3s;
}
.pageTop:hover {
  background-color: #F372A6;
  color: #FBF9F8;
}
.pageTop:hover .pageTopArrow {
  border-color: #FBF9F8;
}

.pageTopArrow {
  border-top: solid 3px #F372A6;
  border-right: solid 3px #F372A6;
  width: 8px;
  height: 8px;
  transform: rotate(-45deg);
  transition: border 0.3s;
}

.pageTopText {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
}

.adLinkBox {
  margin: 0 auto;
  margin-top: 60px;
}

.adLinkButton {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 240px;
  height: 40px;
  background-color: #FFF4FE;
  border: 1px solid #8594D4;
  color: #8594D4;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-family: "Noto Sans JP", sans-serif;
  padding: 0.5em 1.25em;
  font-size: 12px;
}
.adLinkButton.adLinkArrow {
  padding-right: 2em;
  position: relative;
}
.adLinkButton.adLinkArrow:after {
  content: "";
  display: block;
  border-top: solid 3px #8594D4;
  border-right: solid 3px #8594D4;
  width: 8px;
  height: 8px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1em;
  transform: rotate(45deg);
  transition: border 0.3s;
}
.adLinkButton:hover {
  background-color: #8594D4;
  color: #FFF4FE;
}
.adLinkButton:hover.adLinkArrow:after {
  border-top: solid 3px #FFF4FE;
  border-right: solid 3px #FFF4FE;
}

.menuBox {
  position: absolute;
  bottom: 25vh;
  right: 30px;
}

.menuBoxStepItem {
  counter-reset: menuBox;
}

.menuBoxStep {
  position: relative;
  padding-left: 43px;
  padding-bottom: 30px;
  padding-top: 5px;
}

.menuBoxStep:last-child {
  padding-bottom: 0;
}

.menuBoxStep::before {
  counter-increment: menuBox;
  content: counter(menuBox);
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #8594D4;
  border: 1px solid #8594D4;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
  z-index: 1;
}

.menuBoxStep:last-child::after {
  display: none;
}

.menuBoxStep::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 25.5px;
  width: 0;
  height: calc(100% - 11px);
  border-left: 2px dashed #8594D4;
}

.MENUimg {
  width: 55px;
}

.MENUimg01 {
  width: 204px;
}

.MENUimg02 {
  width: 179px;
}

.MENUimg03 {
  width: 147px;
}

.MENUimg04 {
  width: 69px;
}

.MENUimg05 {
  width: 144px;
}

.SP {
  display: block;
}

.PC {
  display: none;
}

@media (min-width: 768px){
  .side {
    display: block;
    flex: 1;
    position: sticky;
    top: 0;
    height: 100vh;
  }
  .lestLinkBox {
    display: block;
  }
  .side-right {
    display: none;
  }
  .center {
    width: 480px;
    min-width: 480px;
    max-width: 480px;
  }
  .SPtopadLinkButton {
    display: none;
  }
  .about {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .aboutImg01 {
    top: 355px;
    right: 5px;
    zoom: 0.8;
  }
  .aboutImg02 {
    top: 410px;
    left: 22px;
    zoom: 0.8;
  }
  .aboutImg03 {
    bottom: 20px;
    right: 35px;
    zoom: 0.8;
  }
  .aboutTextBox {
    font-size: 15px;
    margin: 0 20px;
  }
  .aboutText {
    font-size: 15px;
  }
  .aboutTitleImg {
    width: 345px;
  }
  .aboutBoxImg {
    width: 250px;
  }
  .recommend {
    padding-top: 90px;
    padding-bottom: 70px;
  }
  .recommendTitleImg {
    width: 305px;
  }
  .recommendTextBox {
    font-size: 15px;
    margin: 0 20px;
  }
  .recommendImg {
    width: 400px;
  }
  .recommendText {
    font-size: 13px;
  }
  .recommendImg01 {
    bottom: 100px;
    left: 5px;
    zoom: 0.8;
  }
  .recommendImg02 {
    bottom: 40px;
    right: 5px;
    zoom: 0.8;
  }
  .start {
    padding-top: 90px;
    padding-bottom: 62px;
  }
  .startTitleImg {
    width: 400px;
  }
  .startTextBox {
    padding: 17px 8px;
    font-size: 14px;
    margin: 0 20px;
  }
  .startImg01 {
    bottom: 110px;
    right: 0;
    zoom: 0.8;
  }
  .startImg02 {
    bottom: 55px;
    left: 5px;
    zoom: 0.8;
  }
  .startText {
    font-size: 13px;
  }
  .type {
    padding-top: 80px;
    padding-bottom: 64px;
  }
  .typeTitleImg {
    width: 120px;
  }
  .typeImg01 {
    top: 45px;
    left: 15px;
    zoom: 0.8;
  }
  .typeImg02 {
    top: 85px;
    right: 15px;
    zoom: 0.8;
  }
  .typeText {
    font-size: 13px;
  }
  .adCardList {
    grid-template-columns: repeat(2, 196px);
  }
  .adCard {
    width: 196px;
    height: 171px;
  }
  .adCard span {
    height: 46px;
    font-size: 15px;
  }
  .adOtherLink {
    width: 240px;
    height: 48px;
    font-size: 15px;
  }
  .method {
    padding-top: 125px;
    padding-bottom: 170px;
  }
  .methodStepFlow {
    padding: 35px 8px;
  }
  .methodStep h2 {
    font-size: 17px;
  }
  .methodStep p {
    font-size: 15px;
  }
  .methodStep ul {
    font-size: 15px;
  }
  .methodCenter {
    font-size: 19px;
  }
  .methodText {
    font-size: 14.5px;
  }
  .methodContactLink {
    font-size: 15.5px;
    width: 320px;
    height: 56px;
  }
  .methodContactLink.methodArrow:after {
    top: 0;
  }
  .methodPDFLink {
    font-size: 15.5px;
    width: 320px;
    height: 56px;
  }
  .spadLinkButton {
    display: none;
  }
  .pageTop {
    bottom: 85px;
    width: 74px;
    height: 74px;
  }
  .pageTopText {
    font-size: 15px;
  }
  .SP {
    display: none;
  }
  .PC {
    display: block;
  }
}

@media (min-width: 1200px){
  .lestLinkBox {
    display: none;
  }
  .side-right {
    display: block;
  }
  .pageTop {
    right: calc(50% - 215px - 5px);
  }
  .adLinkBox {
    margin-top: 265px;
    margin-left: 35px;
  }
  .menuBox {
    bottom: 18vh;
  }
}

/*# sourceMappingURL=index.css.map*/