#dev {
  position: absolute;
  size: 20px;
  top: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  max-width: 300px;
  height: 10%;
  min-height: 100px;
  padding: 30px;
  line-height: 20px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #000;
}
#dev .backStr {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99;
  display: inline-block;
  font-size: 20pt;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  transform: translate(-20%, -50%) rotate(350deg);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  list-style: none;
}

body {
  overflow-x: hidden;
}

.button a {
  display: inline-block;
  padding: 0 2em;
  overflow: nowrap;
  font-weight: bold;
  line-height: 2.5em;
  color: #460000;
  text-decoration: none;
  background-color: #FFD23B;
  border: none;
  border-radius: 2em;
}
.button a:hover {
  opacity: 0.6;
}

.webf-corp-m {
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.webf-corp-b {
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
}

#wrapper {
  margin-top: 93px;
}
@media screen and (max-width:400px) {
  #wrapper {
    margin-top: 56px;
  }
}

#scrollToTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background-color: #2788a5;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  z-index: 100;
}

#scrollToTopBtn:hover {
  background-color: #47a9bf;
}

#header {
  display: flex;
  position: fixed;
  top: 0;
  z-index: 100;
  justify-content: space-between;
  width: 100%;
  height: 93px;
  background-image: linear-gradient(0deg, rgb(245, 245, 245), rgb(216, 216, 216));
}
#header > * {
  margin: 16px 20px;
}
#header .logo {
  width: 218px;
  height: auto;
}
#header .links {
  line-height: 58px;
}
@media screen and (max-width:400px) {
  #header {
    font-size: 13px;
    height: 56px;
  }
  #header > * {
    margin: 5px;
  }
  #header .logo {
    width: 168px;
  }
  #header .links {
    line-height: 48px;
  }
}

#index h2 {
  text-align: center;
  font-size: 36px;
  width: 100%;
  height: auto;
  padding-bottom: 30px;
  margin: 0 auto;
  line-height: 1.2;
}
#index h3 {
  font-size: 24px;
}
@media screen and (max-width:400px) {
  #index h2 {
    font-size: 30px;
  }
  #index h3 {
    font-size: 21px;
  }
}

.section {
  max-width: 680px;
  padding: 50px 0;
  margin: 0 auto;
}
@media screen and (min-width:401px) and (max-width:699px) {
  .section {
    padding-right: 20px;
    padding-left: 20px;
  }
}
@media screen and (max-width:400px) {
  .section {
    padding: 30px 5px;
  }
}

img {
  width: 100%;
  height: auto;
}

#index1 h2.firstview {
  font-size: 38px;
  text-align: left;
  width: 100%;
  padding-bottom: 0;
  line-height: 1;
}
#index1 h2.firstview .line2 {
  font-size: 48px;
}
#index1 h2.firstview strong {
  font-size: 72px;
}
@media screen and (max-width:400px) {
  #index1 h2.firstview {
    font-size: 32px;
  }
  #index1 h2.firstview .line2 {
    font-size: 42px;
  }
  #index1 h2.firstview strong {
    font-size: 68px;
  }
}
#index1 .fbox {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
}
@media screen and (min-width:401px) and (max-width:699px) {
  #index1 .fbox {
    flex-flow: column;
    flex-direction: column-reverse;
  }
}
@media screen and (max-width:400px) {
  #index1 .fbox {
    flex-flow: column;
    flex-direction: column-reverse;
  }
}
#index1 .fbox .fblock {
  margin: 5px;
}
@media screen and (min-width:700px) {
  #index1 .fbox .texts {
    width: 60%;
  }
}
#index1 .fbox .texts .button {
  padding: 1em 0;
  text-align: center;
}
#index1 .fbox .texts .button a {
  margin: 0 auto;
}
@media screen and (min-width:700px) {
  #index1 .fbox .youtube {
    width: 40%;
  }
}
#index1 .fbox .youtube iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

#index2 {
  width: 100%;
  background-image: url("../images/index2-bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #fffced;
}
#index2 .text {
  margin: 20px 0;
}
#index2 .important {
  display: flex;
  align-items: center;
  border: 3px solid #999;
  border-radius: 10px;
  padding: 20px 30px 20px 5px;
  background: #f2f2f2;
}
#index2 .important img {
  width: 128px;
  height: auto;
  padding-right: 5px;
}
#index2 .important h3 {
  margin-bottom: 10px;
}
@media screen and (max-width:400px) {
  #index2 .important {
    flex-flow: column;
  }
  #index2 .important img {
    padding-right: 0;
    padding-bottom: 10px;
  }
  #index2 .important h3 {
    text-align: center;
  }
}

#index3 .part {
  padding-bottom: 40px;
}
#index3 .monetize {
  text-align: center;
}
#index3 .monetize img {
  max-width: 480px;
}
#index3 .plans {
  display: flex;
}
#index3 .plans .ninjaboys {
  width: 60%;
}
#index3 .plans .planimage {
  width: 40%;
}
#index3 .plans img.boy {
  width: 64px;
  height: auto;
}
#index3 .plans p {
  display: flex;
  align-items: center;
}
#index3 .plans p span {
  margin: 0 5px;
}
@media screen and (max-width:400px) {
  #index3 .plans {
    flex-flow: column;
  }
  #index3 .plans .ninjaboys,
  #index3 .plans .planimage {
    width: 100%;
  }
  #index3 .plans .ninjaboys {
    padding-bottom: 10px;
  }
}
#index3 .important {
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
}
#index3 .important span {
  background-color: #FCFFAD;
}
#index3 .osusume {
  padding-top: 40px;
}
#index3 .osusume h4 {
  font-size: 24px;
}
#index3 .osusume h4 span {
  position: relative;
  background-color: #fff;
  z-index: 2;
}
#index3 .osusume h4::after {
  display: block;
  position: relative;
  top: -0.5em;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #000;
  z-index: 1;
}
#index3 .business {
  height: 150px;
  position: relative;
  top: -40px;
}
@media screen and (max-width:400px) {
  #index3 .business {
    top: -10px;
  }
}
#index3 .business-swiper .swiper-wrapper {
  transition-timing-function: linear;
}
#index3 .business-swiper .swiper-wrapper .swiper-slide .business1 {
  background: url("../images/business1.jpg");
}
#index3 .business-swiper .swiper-wrapper .swiper-slide .business2 {
  background: url("../images/business2.jpg");
}
#index3 .business-swiper .swiper-wrapper .swiper-slide .business3 {
  background: url("../images/business3.jpg");
}
#index3 .business-swiper .swiper-wrapper .swiper-slide .business4 {
  background: url("../images/business4.jpg");
}
#index3 .business-swiper .swiper-wrapper .swiper-slide .business5 {
  background: url("../images/business5.jpg");
}
#index3 .business-swiper .swiper-wrapper .swiper-slide .business6 {
  background: url("../images/business6.jpg");
}
#index3 .business-swiper .swiper-wrapper .swiper-slide .business7 {
  background: url("../images/business7.jpg");
}
#index3 .business-swiper .swiper-wrapper .swiper-slide .item {
  aspect-ratio: 1/1;
  background-size: contain;
}

#index4 {
  background-image: url("../images/boy-robo-bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#index4 .block {
  display: flex;
  align-items: center;
}
#index4 .block .text {
  width: 70%;
  line-height: 1.8em;
}
#index4 .block .myswiper {
  width: 30%;
  position: relative;
}
#index4 .block .myswiper .swiper-pagination {
  bottom: -30px !important;
}
#index4 .block .myswiper .swiper-pagination-bullet {
  background-color: #999;
}
@media screen and (min-width:401px) and (max-width:699px) {
  #index4 .block .text,
  #index4 .block .myswiper {
    width: 50%;
  }
}
@media screen and (max-width:400px) {
  #index4 .block {
    flex-flow: column;
  }
  #index4 .block .text,
  #index4 .block .myswiper {
    width: 100%;
  }
  #index4 .block .text {
    padding-bottom: 10px;
  }
  #index4 .block .myswiper {
    padding-right: 10px;
    padding-left: 10px;
  }
}

#index5 {
  text-align: center;
}
#index5 h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
#index5 h3 img {
  width: 64px;
  height: auto;
  margin: 0 5px;
}
#index5 h3 .small {
  font-size: 0.5em;
  vertical-align: super;
  padding-bottom: 1.5em;
}
#index5 .annotation {
  text-align: left;
  margin-top: 10px;
  font-size: 0.8em;
}
#index5 .func-divide {
  font-size: 54px;
  font-weight: bold;
}
#index5 .func {
  border: 5px solid;
  border-radius: 16px;
  padding: 5px 10px;
}
#index5 .func .items img {
  width: 96px;
  height: auto;
}
@media screen and (max-width:400px) {
  #index5 .func .items img {
    width: 64px;
  }
}
#index5 .basic {
  border-color: #e8e8e8;
}
#index5 .upg {
  border-color: #F573D2;
}

#index6 .part {
  display: flex;
  align-items: center;
}
#index6 .part * {
  margin: 0 5px;
}
#index6 .part img {
  width: 30%;
  height: auto;
}
#index6 .part p {
  width: 70%;
  line-height: 1.8em;
}
@media screen and (max-width:400px) {
  #index6 .part {
    flex-flow: column;
  }
  #index6 .part img, #index6 .part p {
    width: 100%;
  }
}
#index6 .button {
  text-align: center;
  margin-top: 30px;
}
#index6 .button a {
  margin: 0 auto;
}

.displaynone {
  display: none !important;
}

.swiper .swiper-container {
  position: relative;
  overflow: hidden;
}
.swiper .swiper-container.visible {
  overflow: visible;
}
.swiper .carousel-wrapper {
  position: relative;
}
.swiper .item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background-color: #ccc;
}

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