@charset "utf-8";

/*
リセットCSS
================================================ */
*, ::before, ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}



/*
モバイルファースト
================================================ */

/*
TOPページ
================================================ */
.top-page-container {
  width: 100dvw;
  height: 100dvh;
}

.top-area {
  width: inherit;
  height: 90dvh;
  background-image: url(../image/top-bg-pattern.png);
  background-size: 20px 20px;
  position: relative;
}

.whiteblanc {
  width: inherit;
  height: 20px;
  background-color: white;
  position: absolute;
  z-index: 5;
}
.whiteblanc-top {
  top: 0;
  left: 0;
}
.whiteblanc-bottom {
  bottom: 0;
  left: 0;
}

.nami-top {
  width: inherit;
  height: 60px;
  background-image: url(../image/nami-top.png);
  background-repeat: repeat-x;
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 10;
}
.nami-bottom {
  width: inherit;
  height: 40px;
  background-image: url(../image/nami-bottom.png);
  background-repeat: repeat-x;
  position: absolute;
  bottom: 16px;
  left: 0;
  z-index: 10;
}

.top-title {
  width: inherit;
  /* height: 220px; */
  height: clamp(9.375rem, 7.143rem + 9.52vw, 10rem);
  /* background-image: url(../image/top-title.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; */
  position: absolute;
  /* top: 15dvh; */
  /* top: 150px; */
  top: clamp(8.125rem, 3.661rem + 19.05vw, 9.375rem);
  left: 0;
  z-index: 5;
}
.top-title img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.top-title-sp {
  display: block;
}
.top-title-pc {
  display: none;
  /* visibility: hidden; */
}

.top-text {
  /* width: 300px; */
  width: clamp(15.625rem, 66.67vw, 18.75rem);
  /* height: 160px; */
  height: clamp(6.875rem, -8.75rem + 66.67vw, 10rem);
  background-color: white;
  border: 2px solid #3d3d3d;
  border-radius: 15px;
  box-shadow: 5px 5px 2px rgb(61 61 61 / 1);
  position: absolute;
  /* top: 49dvh; */
  /* top: 440px; */
  top: clamp(19.375rem, -11.875rem + 133.33vw, 28.125rem);
  left: 4dvw;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
}
.top-text h2 {
  /* font-size: 18px; */
  font-size: clamp(0.875rem, -0.018rem + 3.81vw, 1.125rem);
  /* text-align: center; */
  /* margin-top: 20px; */
  margin-top: clamp(1rem, -0.25rem + 5.33vw, 1.25rem);
}
.top-text h2:nth-of-type(2) span:nth-of-type(1) {
  color: rgb(255 240 105);
  letter-spacing: 0.25rem;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000,
  -1px 1px 0 #000, 1px -1px 0 #000,
  0px 1px 0 #000, 0px -1px 0 #000,
  1px 0 0 #000, -1px 0 0 #000,
  2.5px 2px 0 rgb(0 0 0 / 1);
  border: 1px solid black;
  border-radius: 20px;
  padding: 5px 35px 5px;
  font-weight: 900;
}
.top-text h2:nth-of-type(2), .top-text h2:nth-of-type(3) {
  /* margin-top: 10px; */
  margin-top: clamp(0.5rem, -0.125rem + 2.67vw, 0.625rem);
}
.top-text h2:nth-of-type(2) span:nth-of-type(2) {
  display: none;
}
.top-text h2:nth-of-type(3) span:nth-of-type(2) {
  background: url(../image/wave-skyblue.png) bottom repeat-x;
  background-size: 10px;
}


.start-button-area {
  width: 100%;
  height: auto;
  position: absolute;
  /* top: 73dvh; */
  top: 71dvh;
  left: 0;
  z-index: 25;
  display: flex;
  justify-content: center;
  align-items: center;
}
.start-button-area button {
  width: 38dvw;
  background-color: rgb(255 240 105);
  color: rgb(79 182 255);
  /* font-size: 18px; */
  font-size: clamp(0.875rem, -0.018rem + 3.81vw, 1.125rem);
  /* text-shadow: 1px 1px 0px white; */
  text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF,
  -1px 1px 0 #FFF, 1px -1px 0 #FFF,
  0px 1px 0 #FFF, 0px -1px 0 #FFF,
  1px 0 0 #FFF, -1px 0 0 #FFF;
  line-height: 2.5;
  /* padding: 5px 25px; */
  border: 2.5px solid #3d3d3d;
  border-radius: 9999px;
  box-shadow: 2px 2px 2px rgb(61 61 61 / 1);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
}
.start-button-area button:hover {
  cursor: pointer;
}


.smallpic-1-1 {
  /* width: 33dvw;
  height: 13dvh; */
  /* width: 120px; */
  /* height: 95px; */
  width: clamp(6.25rem, 1.786rem + 19.05vw, 7.5rem);
  height: clamp(4.688rem, 0.223rem + 19.05vw, 5.938rem);
  background-image: url(../image/smallpic-1-1.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  position: absolute;
  /* top: 80px; */
  top: clamp(4.375rem, 2.143rem + 9.52vw, 5rem);
  right: 0;
  z-index: 15;
}
.smallpic-1-2 {
  width: clamp(6.25rem, 1.786rem + 19.05vw, 7.5rem);
  height: clamp(4.688rem, 0.223rem + 19.05vw, 5.938rem);
  background-image: url(../image/smallpic-1-2.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  position: absolute;
  top: clamp(4.375rem, 2.143rem + 9.52vw, 5rem);
  right: 0;
  z-index: 20;
}
.smallpic-2-1 {
  /* width: 120px; */
  /* height: 95px; */
  width: clamp(6.25rem, 1.786rem + 19.05vw, 7.5rem);
  height: clamp(4.688rem, 0.223rem + 19.05vw, 5.938rem);
  background-image: url(../image/smallpic-2-1.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  position: absolute;
  /* top: 360px; */
  top: clamp(15.625rem, -11.161rem + 114.29vw, 23.125rem);
  left: 0;
  z-index: 15;
}
.smallpic-2-2 {
  /* width: 120px; */
  /* height: 95px; */
  width: clamp(6.25rem, 1.786rem + 19.05vw, 7.5rem);
  height: clamp(4.688rem, 0.223rem + 19.05vw, 5.938rem);
  background-image: url(../image/smallpic-2-2.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  position: absolute;
  /* top: 360px; */
  top: clamp(15.625rem, -11.161rem + 114.29vw, 23.125rem);
  left: 0;
  z-index: 20;
}
.smallpic-3-1 {
  /* width: 100px; */
  /* height: 120px; */
  width: clamp(5rem, 0.536rem + 19.05vw, 6.25rem);
  height: clamp(6.25rem, 1.786rem + 19.05vw, 7.5rem);
  background-image: url(../image/smallpic-3-1.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  position: absolute;
  /* top: 520px; */
  top: clamp(20.938rem, -20.357rem + 176.19vw, 32.5rem);
  right: 0;
  z-index: 15;
}
.smallpic-3-2 {
  /* width: 100px; */
  /* height: 120px; */
  width: clamp(5rem, 0.536rem + 19.05vw, 6.25rem);
  height: clamp(6.25rem, 1.786rem + 19.05vw, 7.5rem);
  background-image: url(../image/smallpic-3-2.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  position: absolute;
  /* top: 520px; */
  top: clamp(20.938rem, -20.357rem + 176.19vw, 32.5rem);
  right: 0;
  z-index: 20;
}
/* PC用 */
.smallpic-1-3 {
  display: none;
  width: clamp(8.125rem, 1.875rem + 26.67vw, 9.375rem);
  height: clamp(4.688rem, -1.563rem + 26.67vw, 5.938rem);
  background-image: url(../image/illust-01-pc.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  position: absolute;
  /* top: 60px; */
  top: clamp(3.75rem, 0.625rem + 13.33vw, 4.375rem);
  right: 0;
  z-index: 15;
}
.smallpic-2-3 {
  display: none;
  width: clamp(8.125rem, 1.875rem + 26.67vw, 9.375rem);
  height: clamp(4.688rem, -1.563rem + 26.67vw, 5.938rem);
  background-image: url(../image/illust-02-pc.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  position: absolute;
  /* top: 60px; */
  top: clamp(3.75rem, 0.625rem + 13.33vw, 4.375rem);
  right: 0;
  z-index: 15;
}
.smallpic-3-3 {
  display: none;
  width: clamp(8.125rem, 1.875rem + 26.67vw, 9.375rem);
  height: clamp(4.688rem, -1.563rem + 26.67vw, 5.938rem);
  background-image: url(../image/illust-03-pc.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  position: absolute;
  /* top: 60px; */
  top: clamp(3.75rem, 0.625rem + 13.33vw, 4.375rem);
  right: 0;
  z-index: 15;
}
.smallpic-4-3 {
  display: none;
  width: clamp(9.063rem, 2.813rem + 26.67vw, 10.313rem);
  height: clamp(5.625rem, -0.625rem + 26.67vw, 6.875rem);
  background-image: url(../image/illust-04-pc.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  position: absolute;
  /* top: 425px; */
  top: clamp(17.188rem, -29.688rem + 200vw, 26.563rem);
  right: 0;
  z-index: 15;
}


.bottom-area {
  position: relative;
}
.share-button {
  width: 50px;
  height: 50px;
  background-color: rgb(253 198 7);
  border: 1px solid black;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -10px;
  right: 30px;
  z-index: 10;
}
.share-button:hover {
  cursor: pointer;
}
.share-button i {
  font-size: 26px;
}
.share-button p {
  font-size: 12px;
}





/*
MAINページ
================================================ */

/**
 * keyvisual-wrapper
 **/
/* .keyvisual-wrapper {
  height: 844px;
  width: calc( 390px ); */
  /* background-color: mediumseagreen; */
/* } */

.keyvisual {
  height: 70dvh;
  width: 100dvw;
  position: relative;
}
.keyvisual::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 30px;
  background-image: url("../image/nami-under-sp.png");
  background-repeat: repeat-x;
  background-size: auto 30px;
}

.movie {
  height: inherit;
  width: inherit;
  position: absolute;
  overflow: hidden;
  z-index: -5;
}

.movie__video {
	object-fit: cover;
	height: 100%;
	width: 100%;
}


.content-wrapper {
  width: 360px;
  height: 50px;
  position: relative;
  top: calc(50% - 25px);
  left: calc(50% - 180px);
  /* transform: translate(-50%, -50%); */
  /* animation: bfrnda3 8s ease 0s forwards; */
}

.content {
  width: 360px;
  height: 50px;
  background-color: white;
  z-index: 0;
  display: flex;
	align-items: center;
	justify-content: center;
}
.content-shadow-l {
  width: 300px;
  height: 25px;
  position: relative;
  top: -40px;
  left: 10px;
  transform: rotate(-3deg);
  /* background-color: yellow; */
  z-index: -1;
  box-shadow: 0 15px 10px #000;

}
.content-shadow-r {
  width: 300px;
  height: 25px;
  position: relative;
  top: -65px;
  right: -50px;
  transform: rotate(3deg);
  /* background-color: blue; */
  z-index: -1;
  box-shadow: 0 15px 10px #000;
}


/* .content {
  width: 360px;
  height: 50px;
  position: relative;
  top: 50%;
  left: 50%; */
  /* transform: translate(-50%, -50%); */
  /* z-index: 10; */
  /* background-color: #f5f5f5;
  display: flex;
	align-items: center;
	justify-content: center; */

  /* 渦巻のために追加 */
  /* transform-origin: 0% 50%; */
  /* アニメーション */
  /* animation:bfrnda2 8s linear 0s infinite; */
/* }
.content:before,
.content:after {
  position: absolute;
  bottom: 15px;
  z-index: -1;
  width: 300px;
  height: 25px; */
  /* box-shadow: 横方向 縦方向 ぼかし 影色 */
  /* box-shadow: 0 15px 10px #777; */
  /* box-shadow: 0 15px 10px #000;
  background: transparent;
  content: '';
}
.content:before {
  left: 10px;
  transform: rotate(-3deg);
}
.content:after {
  right: 10px;
  transform: rotate(3deg);
} */

.content p {
  background-color: white;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
}

@keyframes bfrnda2 {
  0%, 10% {
    transform: rotate(0deg) translateX(0px) scale(1);
  }
  20% {
    transform: rotate(900deg) translateX(0px) scale(10);
  }
  60%, 80% {
    transform:rotate(2400deg) translateX(0px) scale(0.001);
  }
  100% {
    transform:rotate(330deg) translateX(0px) scale(1);
  }
}

@keyframes bfrnda3 {
  0%, 10% {
    transform: rotate(0deg) translateX(0px) scale(1);
  }
  100% {
    transform:rotate(5200deg) translateX(0px) scale(0.001);
  }
}


/**
 * inputarea
 **/
.inputarea {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.inputarea1-1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.inputarea1-2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}


/**
 * inputtext
 **/
.inputtext {
  margin-top: 12px;
  width: 80%;
  line-height: 3;
  border-radius: 25px;
  border: 2px solid #3d3d3d;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
}
.inputtext:focus {
  outline: 0;
  border-color: #5db0ff;
}


/**
 * inputbutton
 **/
.inputbutton {
  margin-top: 12px;
  padding: 6px;
  width: 130px;
  border: 2.5px solid #3d3d3d;
  border-radius: 25px;
  background-color: rgb(255 240 105);
  color: rgb(79 182 255);
  text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF,
  -1px 1px 0 #FFF, 1px -1px 0 #FFF,
  0px 1px 0 #FFF, 0px -1px 0 #FFF,
  1px 0 0 #FFF, -1px 0 0 #FFF;
  box-shadow: 2px 2px 2px rgb(61 61 61 / 1);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
}

.inputarea p:nth-of-type(1) {
  display: inline;
}

#bg-flush-effect {
  width: 40vw;
  margin-left: 10vw;;
}
p.selected-effect {
  margin-top: 24px;
  margin-left: 10vw;
  font-size: 12px;
  color: #3d3d3d;;
  align-self: flex-start;
}

.attention {
  margin-top: 12px;
  color: rgb(61 61 61 / 0.8);
  font-size: 12px;
  font-weight: 400;
}



/*
レスポンシブ（モバイル以上の画面幅）
================================================ */
@media (min-width: 800px) {

/*
res) TOPページ
================================================ */
  .top-title {
    /* height: 350px; */
    /* height: 27dvh; */
    height: clamp(16.875rem, 10.011rem + 13.56vw, 21.875rem);
    /* top: 150px; */
    /* top: 23dvh; */
    top: calc(23dvh - clamp(0rem, -6.864rem + 13.56vw, 5rem));
  }
  .top-title-sp {
    display: none;
  }
  .top-title-pc {
    display: block;
    /* visibility: visible; */
  }

  .top-text {
    /* width: 350px; */
    width: clamp(21.875rem, 9.004rem + 25.42vw, 31.25rem);
    /* height: 140px; */
    height: 14dvh;
    min-height: 130px;
    max-height: 140px;
    /* top: 500px; */
    top: 50dvh;
    /* left: clamp(14.063rem, -5.244rem + 38.14vw, 28.125rem); */
    left: 50%;
    transform: translateX(-50%);
  }
  .top-text h2 {
    font-size: 16px;
  }
  .top-text h2:nth-of-type(1) {
    align-self: flex-start;
    padding-left: 50px;
  }
  .top-text h2:nth-of-type(2) span:nth-of-type(1) {
    padding: 5px 10px 5px;
  }
  .top-text h2:nth-of-type(2) span:nth-of-type(2) {
    display: inline;
  }
  .top-text h2:nth-of-type(3) span:nth-of-type(1) {
    display: none;
  }

  .start-button-area {
    /* top: 700px; */
    top: 70dvh;
  }
  .start-button-area button {
    width: 20dvw;
  }

  .smallpic-1-1, .smallpic-1-2, .smallpic-2-1, .smallpic-2-2, .smallpic-3-1, .smallpic-3-2 {
    display: none;
  }
  .smallpic-1-3, .smallpic-2-3, .smallpic-3-3, .smallpic-4-3 {
    display: block;
  }
  /* 左上 */
  .smallpic-3-3 {
    /* width: 230px; */
    width: clamp(13.125rem, 11.409rem + 3.39vw, 14.375rem);
    /* height: 130px; */
    height: 13dvh;
    /* top: 150px; */
    top: 15dvh;
    left: calc(10px + clamp(0rem, -31.92rem + 46.43vw, 40.625rem) );
  }
  /* 左下 */
  .smallpic-2-3 {
    /* width: 200px; */
    width: clamp(11.25rem, 9.534rem + 3.39vw, 12.5rem);
    /* height: 160px; */
    height: 16dvh;
    /* top: 480px; */
    top: 48dvh;
    left: calc(30px + clamp(0rem, -31.92rem + 46.43vw, 40.625rem) );
  }
  /* 右上 */
  .smallpic-1-3 {
    /* width: 220px; */
    width: clamp(11.25rem, 7.818rem + 6.78vw, 13.75rem);
    /* height: 180px; */
    height: 18dvh;
    /* top: 130px; */
    top: 13dvh;
    right: calc( 15px + clamp(0rem, -31.92rem + 46.43vw, 40.625rem) );
  }
  /* 右下 */
  .smallpic-4-3 {
    width: 170px;
    /* height: 200px;  */
    height: 20dvh;
    /* top: 450px; */
    top: 45dvh;
    right: calc( 15px + clamp(0rem, -31.92rem + 46.43vw, 40.625rem) );
  }


/*
res) MAINページ
================================================ */
  .keyvisual-wrapper {
    height: 100dvh;
    width: 100dvw
  }

  .keyvisual {
    height: 80dvh;
    width: 100%;
  }
  .keyvisual::before {
    bottom: -10px;
    height: 48px;
    background-image: url("../image/nami-bottom-pc.png");
    background-size: auto 48px;
  }

  .content-wrapper {
    width: calc(100dvw / 3);
    top: calc(50% - 25px);
    left: calc(50dvw - 50dvw / 3);
  }
  .content {
    width: calc(100dvw / 3);
  }
  .content-shadow-l {
    width: calc(100dvw / 3 - 60px);
  }
  .content-shadow-r {
    width: calc(100dvw / 3 - 60px);
  }

  .inputarea1-1 {
    align-items: flex-start;
  }
  .inputarea1-2 {
    flex-direction: row;
    /* padding-top: 45px; */
    justify-content: center;
  }

  .inputtext {
    margin-top: 8px;
    margin-right: 36px;
    width: 40dvw;
  }
  .inputbutton {
    margin-top: 8px;
    /* margin-right: 36px; */
  }
  p.selected-effect{
    margin-left: 25vw;
  }
  #bg-flush-effect {
    width: 20vw;
    margin-top: 8px;
    margin-left: 25vw;
  }

}