@charset "UTF-8";
/* CSS Document */
/*　ブレークポイント */
/* 背景画像　テキスト消去*/
/* フレックス*/
/* CSS Document */
/* 
===================== 1.Universal reset ==========================
*/
.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

.clear {
  clear: both;
}

img {
  width: 100%;
  border: none;
  margin: 0 auto;
  padding: 0;
  height: auto;
  user-select: none; /*選択禁止*/
  -moz-user-select: none; /*選択禁止*/
  -webkit-user-select: none; /*選択禁止*/
  -ms-user-select: none; /*選択禁止*/
}

/* 
===================== 2.Body and base setting ====================
*/
body {
  font-family: "メイリオ", "Lucida Grande", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", sans-serif;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

#wrap {
  background-image: url(../img/bg.jpg);
  background-size: 380px;
  background-repeat: repeat;
  background-position: top center;
}

@media screen and (max-width: 767px) {
  #wrap {
    background-size: 50%;
  }
}
/*#wrap::before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background-image: url(../img/bg.jpg); 
	background-size:contain;
	background-repeat: repeat;
	background-position: top center;
	}
	@media only screen and (max-width:1920px){
		#wrap::before{
			background-size:cover;
		}
	}*/
a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: “alpha(opacity=80) ”;
}

.container {
  width: 90%;
  height: auto;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.contents {
  margin: 4rem auto;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .contents {
    margin: 2rem auto;
  }
}
.inner-box {
  width: 100%;
  margin: 2rem auto;
  padding: 0 2rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .inner-box {
    margin: 1rem auto;
    padding: 0 1rem;
  }
}
.__BoxBlue {
  border-radius: 3rem;
  border: solid 5px #2b71b8;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
}

@media screen and (max-width: 767px) {
  .__BoxBlue {
    border-radius: 6vw;
  }
}
.flexBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /*flex-wrap:nowrap;
  justify-content:space-between;*/
}

.flexBox img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 500px;
}

/*---------Animation--------*/
/* 画面外にいる状態 */
.fadein {
  opacity: 0.1;
  -webkit-transform: translate(0, 50px);
          transform: translate(0, 50px);
  -webkit-transition: all 500ms;
  transition: all 500ms;
}

/* 画面内に入った状態 */
.fadein.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.fadein.scrollin picture {
  line-height: 0;
}

/* 
===================== 3.Content setting ====================
*/
/* ---Top---*/
#top {
  width: 100%;
}

#top .flexBox {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media screen and (max-width: 767px) {
  #top .flexBox {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
h1 {
  margin: 0 0 -1px;
  padding: 0;
  line-height: 0;
  background-size: 1800px;
  background-repeat: repeat-x;
  background-position: bottom center;
}

@media screen and (max-width: 767px) {
  h1 {
    background-size: 240%;
  }
}
h1 img {
  /*width: 100%;
  max-width:1920px;*/
  width: auto;
  max-width: 100%;
  max-height: 100vh;
}

@media only screen and (max-width: 640px) {
  h1 img {
    width: 100%;
    max-width: none;
    max-height: none;
  }
}
.info {
  padding: 2rem 0 1rem;
  background: rgb(255, 255, 255);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), color-stop(15%, rgb(255, 255, 255)), color-stop(15%, rgb(235, 110, 160)), to(rgb(235, 110, 160)));
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 15%, rgb(235, 110, 160) 15%, rgb(235, 110, 160) 100%);
}

@media screen and (max-width: 767px) {
  .info {
    padding: 1.5rem 0 0.5rem;
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), color-stop(10%, rgb(255, 255, 255)), color-stop(10%, rgb(235, 110, 160)), to(rgb(235, 110, 160)));
    background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 10%, rgb(235, 110, 160) 10%, rgb(235, 110, 160) 100%);
  }
}
.info img {
  padding: 0 1rem 0 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .info img {
    padding: 0;
  }
}
/* ----- Movie ----- */
.movie-box {
  width: 100%;
  max-width: 480px;
  margin: 4rem auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media screen and (max-width: 767px) {
  .movie-box {
    margin: 2rem auto 0;
  }
}
.movie-item {
  position: relative;
  width: 100%;
  padding-top: 173%; /*56.25%*/
  border: solid 5px #2b71b8;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /*border-radius:1rem;
  box-shadow:5px 5px 0px #00000050;*/
}

.movie-item iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  /*border-radius:.8rem;*/
}

/* --- image --- */
#image .contents {
  margin: 0.5rem auto 2rem;
}

#image .inner-box {
  margin: 0 auto;
  padding: 0;
}

#image .inner-box img {
  border: solid 5px #2b71b8;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.box_price {
  margin: 4rem auto;
  padding: 3rem 3rem 2rem;
  text-align: left;
  /*border-radius: 6vw;
  border:solid 5px #2b71b8;
  box-sizing:border-box;
  background-color:#fff;
  box-shadow:5px 5px 0px #00000050;*/
}

@media screen and (max-width: 767px) {
  .box_price {
    margin: 2rem auto;
    padding: 1.5rem 1.5rem 1rem;
  }
}
.pr_photo {
  width: 45%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  float: left;
  vertical-align: middle;
}

.pr_photo img {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .pr_photo {
    width: 100%;
    float: none;
  }
}
.pr_txt {
  width: 50%;
  margin: 0 auto;
  float: right;
}

.pr_txt table {
  width: 100%;
  border: none;
}

.pr_txt th {
  width: 30%;
  line-height: 1.2rem;
}

.pr_txt td {
  border-spacing: 0;
  font-weight: bold;
  line-height: 1.5em;
  padding: 0.5rem 0;
}

@media screen and (max-width: 767px) {
  .pr_txt {
    width: 100%;
    float: none;
    padding: 0;
    font-size: 0.9rem;
  }
  .pr_txt th {
    width: 28%;
    font-size: 0.8rem;
  }
}
.font_s {
  font-size: 80% !important;
}

.pr_features {
  margin: 1rem auto 0;
}

@media screen and (max-width: 767px) {
  .pr_features {
    font-size: 0.9rem;
  }
}
.pr_features h2 {
  margin: 0 auto;
  padding: 0;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
  border-bottom: 2px solid;
  display: block;
}

.pr_features h2:before {
  /*content: '●';
        padding:0 1% 0 0; 
        vertical-align: middle;*/
}

@media screen and (max-width: 767px) {
  .pr_features h2 {
    font-size: 1.1rem;
  }
}
/* ----- Btn ----- */
.btn {
  width: 80%;
  /*max-width: 600px;*/
  margin: 0rem auto 2rem !important;
  position: relative;
  display: inline-block;
}

@media screen and (max-width: 767px) {
  .btn {
    width: 95%;
    margin: 0 auto 0 !important;
  }
}
.btn span {
  display: block;
  font-size: clamp(0.9rem, 2vw, 1.5rem);
  margin-top: 0.3rem;
}

@media screen and (max-width: 767px) {
  .btn span {
    margin-top: 0.2rem;
  }
}
.btn span:after {
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  font-weight: bold;
  padding: 0;
  top: 50%;
  right: 5%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  position: absolute;
}

.btn a {
  display: block;
  padding: 3% 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-weight: bold;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .btn a {
    padding: 0.8rem 1.5rem;
  }
}
.btn__future {
  /*background: #1e130d;*/
  background-size: auto auto;
  background-color: rgb(223, 57, 122);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 15px, rgb(213, 48, 112) 15px, rgb(213, 48, 112) 30px);
  border: solid 5px #fff;
  border-radius: 2rem;
  -webkit-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.2509803922);
          box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.2509803922);
}

@media screen and (max-width: 767px) {
  .btn__future {
    border: solid 4px #fff;
    border-radius: 5vw;
  }
}
.btn__future:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: “alpha(opacity=80) ”;
}

.btn__future a {
  color: #fff;
}

/*		.btn__future a:before{
			background: #ff9800;
		}*/
.btn__future span:after {
  /*color: #ff9800;*/
}

/* ----- Copyright ----- */
.copyright {
  margin: 1rem auto -1px;
  padding: 2rem 0 6rem;
  color: #000;
}

@media screen and (max-width: 767px) {
  .copyright {
    font-size: 0.9rem;
    padding: 1.5rem 0 3rem;
  }
}
.copyright p {
  width: 90%;
  margin: auto;
}

/*---------PageTop--------*/
.pagetop {
  width: 22%;
  max-width: 100px;
  z-index: 9999;
  position: fixed;
  bottom: 0px;
  right: 20px;
  opacity: 0;
}

.pagetop img {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .pagetop {
    right: 10px;
  }
}
/* ----- LinkList ----- */
/*#linkList {
	padding: 2rem 0;
	}
	@media screen and (max-width:767px){
		#linkList {
			padding: 2rem 0;
		}
	}*/
/*===============================================
スマホ・タブレット  画面横幅767pxまで
===============================================*/
@media screen and (max-width: 767px) {
  /* 
  ===================== 1.Universal reset ==========================
  */
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
  /* 
  ===================== 2.Body and base setting ====================
  */
} /* /@media */
/* CSS Document */
:root {
  --keyColor: #eb6ea0;
  --keyColor-2: #e6186e;
}

#wrap {
  overflow-x: hidden;
}

#top h1 {
  padding: 0px 0;
}
@media screen and (min-width: 768px) {
  #top h1 {
    padding: 50px 20px 0px;
  }
}

.section-heading {
  font-size: 2.5rem;
  color: var(--keyColor-2);
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  text-align: center;
  line-height: 1.3;
  margin: 20px 0px;
}
@media screen and (min-width: 768px) {
  .section-heading {
    margin: 30px 0px;
    font-size: 3rem;
  }
}

.howtoplay-img {
  width: 90%;
  margin: 0 auto;
}

.labels {
  position: relative;
  top: clamp(0.9375rem, -0.7352088167rem + 3.4802784223vw, 1.875rem);
  color: var(--keyColor-2);
  left: clamp(0.3125rem, -0.5797906091rem + 3.807106599vw, 1.25rem);
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  text-align: left;
  font-size: clamp(1.25rem, 0.4171954315rem + 3.5532994924vw, 2.125rem);
}
@media screen and (min-width: 768px) {
  .labels {
    font-size: clamp(2.1875rem, 0.5147911833rem + 3.4802784223vw, 3.125rem);
    left: clamp(1.25rem, 0.1348607889rem + 2.3201856148vw, 1.875rem);
  }
}

.kirby-1 {
  position: absolute;
  bottom: -30px;
  left: clamp(-3.125rem, -1.1732233503rem - 4.0609137056vw, -2.125rem);
  width: clamp(4.375rem, 2.5904187817rem + 7.614213198vw, 6.25rem);
}
@media screen and (min-width: 768px) {
  .kirby-1 {
    bottom: -30px;
    width: clamp(6.875rem, 0.1841647332rem + 13.9211136891vw, 10.625rem);
    left: clamp(-5.625rem, -0.4045823666rem - 6.9605568445vw, -3.75rem);
  }
}
@media screen and (min-width: 1200px) {
  .kirby-1 {
    left: -130px;
  }
}

.kirby-2 {
  position: absolute;
  top: 55%;
  right: clamp(-2.5rem, 0.305678934rem - 5.8375634518vw, -1.0625rem);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: clamp(5rem, 1.4308375635rem + 15.2284263959vw, 8.75rem);
}
@media screen and (min-width: 768px) {
  .kirby-2 {
    width: clamp(8.75rem, 2.0591647332rem + 13.9211136891vw, 12.5rem);
    right: clamp(-3.75rem, 3.2105568445rem - 9.2807424594vw, -1.25rem);
  }
}
@media screen and (min-width: 1200px) {
  .kirby-2 {
    right: -100px;
    width: 220px;
  }
}

.hero {
  display: block;
  background-image: url("../img/hero-bg.png");
  background-position: center;
  background-size: cover;
  background-repeat: repeat-x;
  border-bottom: 15px solid var(--keyColor);
}
@media screen and (min-width: 768px) {
  .hero {
    border-bottom: 28px solid var(--keyColor);
  }
}

#howto .block {
  position: relative;
  margin-bottom: 25px;
}
@media screen and (min-width: 768px) {
  #howto .block {
    margin-bottom: 50px;
  }
}

.howto-text {
  font-size: 1.1rem;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  text-align: left;
  line-height: 1.3;
  background-repeat: no-repeat;
  margin-bottom: 15px;
  padding-left: 45px;
}
@media screen and (min-width: 768px) {
  .howto-text {
    font-size: 1.5rem;
    margin-bottom: 25px;
    padding-left: 60px;
  }
}
.howto-text.first {
  display: block;
  background-image: url("../img/star-1.svg");
  background-position: left top;
  background-size: 35px;
}
@media screen and (min-width: 768px) {
  .howto-text.first {
    display: block;
    background-image: url("../img/star-1.svg");
    background-position: left center;
    background-size: 50px;
  }
}
.howto-text.second {
  display: block;
  background-image: url("../img/star-2.svg");
  background-position: left top;
  background-size: 35px;
}
@media screen and (min-width: 768px) {
  .howto-text.second {
    display: block;
    background-image: url("../img/star-2.svg");
    background-position: left center;
    background-size: 50px;
  }
}

.product__box {
  border-radius: 3rem;
  border: solid 5px #ffea00;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  display: block;
  background-image: url("../img/product-bg.png");
  background-position: center;
  background-size: 15px 15px;
  background-repeat: repeat;
}

@media screen and (max-width: 767px) {
  .product__box {
    border-radius: 6vw;
  }
}
.product__wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 2rem;
  text-align: left;
  font-size: 1.2rem;
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .product__wrapper {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
.product__wrapper p {
  font-size: 1.2rem;
}
.product__wrapper .item {
  width: 100%;
}
.product__wrapper .text {
  width: 100%;
}
.product__wrapper .text dl {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 20px;
}

.footer-warning {
  background-repeat: repeat-x;
  height: clamp(18.75rem, 7.5986078886rem + 23.2018561485vw, 25rem);
  position: relative;
  display: block;
  background-image: url("../img/footer-cloud.png");
  background-position: bottom center;
  background-size: clamp(50rem, -5.7569605568rem + 116.0092807425vw, 81.25rem);
}

.warning-img {
  max-width: clamp(12.5rem, -3.1119489559rem + 32.4825986079vw, 21.25rem);
  margin: 0 auto;
  position: absolute;
  top: 63%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
@media screen and (min-width: 768px) {
  .warning-img {
    top: 60%;
  }
}