@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;
  padding: 4rem auto;
}

.inner-box {
  width: 100%;
  margin: 0auto;
  padding: 2rem 2rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .inner-box {
    padding: 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;*/
}

@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;
}

.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;
}

img {
  vertical-align: bottom;
}

#top h1 {
  padding: 0px 0;
  overflow: hidden;
}
#top h1 img {
  margin-left: clamp(-6.25rem, -0.1506979695rem - 12.6903553299vw, -3.125rem);
  max-height: none;
  width: clamp(21.875rem, 1.0548857868rem + 88.8324873096vw, 43.75rem);
}
@media screen and (min-width: 768px) {
  #top h1 img {
    width: clamp(50rem, 27.6972157773rem + 46.403712297vw, 62.5rem);
    margin-left: 0;
    height: auto;
  }
}
@media screen and (min-width: 768px) {
  #top h1 {
    padding: 50px 20px 0px;
  }
}

.container__image {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(0.625rem, -1.1595812183rem + 7.614213198vw, 2.5rem);
}
@media screen and (min-width: 768px) {
  .container__image {
    padding: 2rem 2rem;
  }
}

.container__howto {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 2rem 2rem;
}

.bg-white {
  margin-top: -1px;
  background-color: #fff;
  position: relative;
  z-index: 2;
}

.tag-wrapper {
  background-size: auto auto;
  background-color: rgb(230, 66, 144);
  background-image: repeating-linear-gradient(116deg, transparent, transparent 20px, rgb(230, 81, 152) 20px, rgb(230, 81, 152) 40px);
}
@media screen and (max-width: 375px) {
  .tag-wrapper {
    background-image: repeating-linear-gradient(116deg, transparent, transparent 25px, rgb(230, 81, 152) 25px, rgb(230, 81, 152) 50px);
  }
}
.tag-wrapper {
  padding: 10px 0;
}
@media screen and (min-width: 768px) {
  .tag-wrapper {
    padding: 20px 0;
  }
}
.tag-wrapper .tag {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  letter-spacing: 0.05em;
  line-height: 1;
  gap: 10px;
  color: #fff;
  font-size: clamp(0.875rem, 0.5180837563rem + 1.5228426396vw, 1.25rem);
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .tag-wrapper .tag {
    font-size: clamp(1.25rem, 0.5809164733rem + 1.3921113689vw, 1.625rem);
  }
}
.tag-wrapper .tag span {
  position: relative;
  top: -2px;
  line-height: 1;
  width: clamp(0.625rem, 0.0301395939rem + 2.538071066vw, 1.25rem);
  display: block;
}

.howto-cloud {
  position: relative;
  z-index: 2;
  background-image: url("../img/howto-cloud-bg.png");
  background-position: bottom center;
  background-repeat: repeat-x;
  height: clamp(7.5rem, 3.9308375635rem + 15.2284263959vw, 11.25rem);
  background-size: clamp(25rem, 13.1027918782rem + 50.7614213198vw, 37.5rem);
}
@media screen and (min-width: 768px) {
  .howto-cloud {
    background-size: clamp(37.5rem, 4.0458236659rem + 69.6055684455vw, 56.25rem);
    height: clamp(11.25rem, 0.0986078886rem + 23.2018561485vw, 17.5rem);
  }
}

.howto-kirby-img {
  width: clamp(18.75rem, 6.8527918782rem + 50.7614213198vw, 31.25rem);
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .howto-kirby-img {
    width: clamp(31.25rem, 8.9472157773rem + 46.403712297vw, 43.75rem);
  }
}
.howto-kirby-img img {
  width: 100%;
}

.howto-step {
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .howto-step {
    margin-bottom: 50px;
  }
}
.howto-step p {
  font-weight: 900;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  text-align: left;
  line-height: 1.3;
  padding: 20px 0px;
  color: #76322e;
  font-size: clamp(1.125rem, 0.7680837563rem + 1.5228426396vw, 1.5rem);
}
@media screen and (min-width: 768px) {
  .howto-step p {
    font-size: clamp(1.5rem, 0.8309164733rem + 1.3921113689vw, 1.875rem);
  }
}

.contents__bg {
  display: block;
  background-image: url("../img/contents-bg.png");
  background-position: center;
  background-size: 150px auto;
  background-repeat: repeat;
  padding: clamp(1.875rem, -1.0993020305rem + 12.6903553299vw, 5rem) 0 0;
}
@media screen and (min-width: 768px) {
  .contents__bg {
    padding: 80px 0 0;
    display: block;
    background-image: url("../img/contents-bg.png");
    background-position: center;
    background-size: 450px auto;
  }
}

.container {
  max-width: 1000px;
  width: 90%;
  margin: 0 auto 30px;
  padding: 0 20px;
  border-radius: 1.3rem;
}
@media screen and (min-width: 768px) {
  .container {
    margin: 0 auto 50px;
    border-radius: 3rem;
  }
}
.container.border-pink {
  border: none;
  border: solid 4px var(--keyColor);
  background-color: #fff;
  -webkit-box-shadow: 4px 4px 0 0 var(--keyColor);
          box-shadow: 4px 4px 0 0 var(--keyColor);
}
.container.green-bg {
  -webkit-box-shadow: 8px 8px 0 0 rgb(255, 136, 178);
          box-shadow: 8px 8px 0 0 rgb(255, 136, 178);
  border: none;
  background-size: auto auto;
  background-color: rgb(189, 226, 234);
  background-image: repeating-linear-gradient(125deg, transparent, transparent 43px, rgb(179, 222, 229) 43px, rgb(179, 222, 229) 86px);
  padding: 5px;
}
@media screen and (min-width: 768px) {
  .container.green-bg {
    padding: 10px;
  }
}
.container.product {
  -webkit-box-shadow: 8px 8px 0 0 rgb(255, 136, 178);
          box-shadow: 8px 8px 0 0 rgb(255, 136, 178);
  background-color: #f7ccda;
  background-image: radial-gradient(#f8dbe6 32%, transparent 32%), radial-gradient(#f8dbe6 32%, transparent 32%);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  padding: 0px 20px 40px;
}
@media screen and (min-width: 768px) {
  .container.product {
    padding: 0px 20px 30px;
  }
}

.contents-img {
  width: 100%;
  padding: 0px 0px 10px;
}
@media screen and (min-width: 768px) {
  .contents-img {
    padding: 20px;
  }
}
.contents-img img {
  width: 100%;
}

.white-line {
  border: 2px solid #fff;
  border-radius: 15px;
  padding: 10px;
}
@media screen and (min-width: 768px) {
  .white-line {
    border-radius: 2.4rem;
    padding: 20px;
  }
}
.white-line .star {
  background-image: url("../img/star.svg"), url("../img/star.svg"), url("../img/star.svg"), url("../img/star.svg");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  background-size: clamp(0.9375rem, 0.3426395939rem + 2.538071066vw, 1.5625rem), clamp(0.9375rem, 0.3426395939rem + 2.538071066vw, 1.5625rem), clamp(0.9375rem, 0.3426395939rem + 2.538071066vw, 1.5625rem), clamp(0.9375rem, 0.3426395939rem + 2.538071066vw, 1.5625rem);
}
@media screen and (min-width: 768px) {
  .white-line .star {
    background-size: clamp(1.5625rem, 0.4473607889rem + 2.3201856148vw, 2.1875rem), clamp(1.5625rem, 0.4473607889rem + 2.3201856148vw, 2.1875rem), clamp(1.5625rem, 0.4473607889rem + 2.3201856148vw, 2.1875rem), clamp(1.5625rem, 0.4473607889rem + 2.3201856148vw, 2.1875rem);
    background-position: left top, right top, left bottom, right bottom;
  }
}

.section-heading {
  font-size: clamp(1.5rem, 1.0241116751rem + 2.0304568528vw, 2rem);
  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;
  padding: 20px 0px;
}
@media screen and (min-width: 768px) {
  .section-heading {
    padding: 30px 0px;
    font-size: 3rem;
  }
}
.section-heading.howto-heading {
  color: #fff;
}

.labels {
  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: left;
}

.kirby-1 {
  position: absolute;
  top: clamp(-1.875rem, 0.7352088167rem - 3.4802784223vw, -0.9375rem);
  left: clamp(-2.5rem, 1.1595812183rem - 7.614213198vw, -0.625rem);
  width: clamp(4.375rem, 1.9955583756rem + 10.152284264vw, 6.875rem);
}
@media screen and (min-width: 768px) {
  .kirby-1 {
    width: clamp(6.875rem, 2.4144431555rem + 9.2807424594vw, 9.375rem);
    left: clamp(-4.375rem, 2.5855568445rem - 9.2807424594vw, -1.875rem);
  }
}

.kirby-2 {
  position: absolute;
  top: clamp(40rem, 22.7490482234rem + 73.6040609137vw, 58.125rem);
}
@media screen and (max-width: 375px) {
  .kirby-2 {
    top: 650px;
  }
}
.kirby-2 {
  right: clamp(-1.25rem, -0.0301395939rem - 2.538071066vw, -0.625rem);
  width: clamp(5rem, 1.4308375635rem + 15.2284263959vw, 8.75rem);
}
@media screen and (min-width: 768px) {
  .kirby-2 {
    top: clamp(28.75rem, 18.7137470998rem + 20.8816705336vw, 34.375rem);
    width: clamp(7.5rem, 4.1545823666rem + 6.9605568445vw, 9.375rem);
    right: clamp(-3.75rem, 3.2105568445rem - 9.2807424594vw, -1.25rem);
  }
}

.hero {
  display: block;
  background-image: url("../img/fv-bg.png");
  background-position: center;
  background-size: cover;
  background-repeat: none;
}
#howto .block {
  position: relative;
  margin-bottom: 25px;
}
@media screen and (min-width: 768px) {
  #howto .block {
    margin-bottom: 50px;
  }
}

.howto {
  position: relative;
  overflow: hidden;
  background-color: #e85388;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1725490196) 23%, transparent 23%), radial-gradient(rgba(255, 255, 255, 0.1725490196) 23%, transparent 23%);
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
}

.circle-bg-outer {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.1176470588);
  border-radius: 50%;
  width: 300%;
  height: 100%;
  display: block;
  top: 10%;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  z-index: 1;
}

.circle-bg-inner {
  display: block;
  position: relative;
  top: 10%;
  background-color: rgba(255, 255, 255, 0.1176470588);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
}

.howtoplay-img {
  border: 5px solid #fff;
  border-radius: 2.8rem;
  background-color: #fff;
}
.howtoplay-img img {
  border-radius: 2.5rem;
  border: 5px solid var(--keyColor);
}

.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;
  }
}

@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;
}
@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%;
  padding: 0px 10px 20px 10px;
}
.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;
  font-size: 1rem;
  padding: 0 10px;
}
@media screen and (min-width: 768px) {
  .product__wrapper .text dl {
    font-size: 1.5rem;
    -ms-grid-columns: 1.5fr 1fr;
    grid-template-columns: 1.5fr 1fr;
  }
}

.warning-img {
  max-width: clamp(12.5rem, -3.1119489559rem + 32.4825986079vw, 21.25rem);
  margin: 0 auto;
}