/* @group ClearFix */
.clearfix:after {
  content:" ";
  display:block;
  clear:both;
}

html {
/* overflow-yプロパティは、ボックスの範囲内に内容が収まらない場合に、はみ出た要素の上下の表示方法を指定する際に使用 */
overflow-y: scroll;
/* iPhoneやAndroidのブラウザーは、縦向き(Portrate mode)と横向き (Landscape mode)の文字サイズを自動調整する機能 */
-webkit-text-size-adjust: 100%;
font-size: 62.5%;
/* scroll-behavior: smooth; */
}

body {
  margin: 0 auto;
  font-family:"Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 1.5rem;
  background-color: #FFF;
  color: #000000;
  line-height: 1.8;
  overflow: hidden;
}

main {
  /* min-height: calc(100vh - 12.6rem); */
}

h2 {
  font-size: 2rem;
  letter-spacing: 0.2rem;
  font-weight: bold;
}

h3 {
  font-size: 2rem;
  letter-spacing: 0.15rem;
}

.br-sp {
  display: inline-block;
}

.br-pc {
  display: none;
}

.br-miniSP {
  display: none;
}

.icon_arrow::before {
  font-family: 'Font Awesome 5 free';
  font-weight: 900;
  font-size: 2.5rem;
  content: '\f062';
}

.none-sp {
  display: none;
}

.space {
  margin-top: 10rem;
}

.linktext {
  color: #005BAB;
  text-decoration: underline;
}

.linkarea {
  display: flex;
  width: 100%;
}

.dotline-dog {
  display: block;
  width: 27rem;
  height: auto;
  margin: 0 auto;
}

.dotline-mini {
  display: block;
  width: 10rem;
  height: auto;
  margin: 0 auto;
}

.kazari {
  display: block;
  width: 20rem;
  height: auto;
  margin: 0 auto;
  margin-top: 3rem;
}

.kaiten {
  animation: rotate-anime 1.5s linear 1;
}
@keyframes rotate-anime {
  0%  {transform: rotateY(0);}
  100%  {transform: rotateY(360deg);}
}

/* ボタンここから */

.btnkaku {
  margin-bottom: 4rem;
}

.btnkaku a, .btnmaru a, .btnmaru-pink a, .btnmaru-blue a, .btnmaru-orange a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  padding: 2rem 2.8rem;
  transition: 0.2s ease-in-out;
  font-size: 1.6rem;
  font-weight: bold;
  background-color: #E8F1FC;
  border-radius: 8px;
  border: solid 2px #000000;
  border-bottom: solid 0.7rem #000000;
}

.btnmaru a, .btnmaru-pink a, .btnmaru-blue a, .btnmaru-orange a {
  display: flex;
  align-items: end;
  padding: 1rem 0;
  background-color: #FFF;
  text-align: center;
  border-radius: 50px;
}

.btnmaru a {
  margin-bottom: 4rem;
}

.btnmaru-pink a, .btnmaru-blue a, .btnmaru-orange a {
  margin-bottom: 4rem;
  font-size: 1.8rem;
  letter-spacing: 0.1rem;
  color: #FFF;
}

.btnmaru-pink a {
  background-color: #EF317B;
}

.btnmaru-blue a {
  background-color: #00A2D3;
}

.btnmaru-orange a {
  background-color: #f49a02;
}

.btntext-strong {
  font-size: 1.85rem;
  margin-left: 0.2rem;
}

.icon-newopen::before {
  font-family: "Font Awesome 6 Free";
  content: '\f08e';
  font-weight: 900;
  font-size: 1.6rem;
  margin-left: 0.5rem;
}

/* ヘッダここから */

.headerarea {
  background-image: url("../images/back_img_sp_toppage.png");
  margin-bottom: 4rem;
  width: 100%;
  padding-bottom: 12%;
  background-size: cover;
  position: relative;
}

.logocontents {
  margin: 0 auto;
  padding-top: 2.9rem;
  width: 21.6rem;
}

.logoImg-sp {
  display: block;
  width: 21.6rem;
  height: auto;
}

.logoImg-pc {
  display: none;
}

.mainimgblock {
  padding: 2.5rem 2.5rem 0;
  position: relative;
}

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

.dot-pic-01,.dot-pic-02, .dot-pic-03, .dot-pic-04, .dot-pic-05 {
  width: 6rem;
  height: auto;
  position: absolute;
}

.dot-pic-01 {
  bottom: 6rem;
  left: 1rem;
}

.dot-pic-02 {
  width: 5rem;
  bottom: 2.5rem;
  left: 6rem;
}

.dot-pic-03 {
  bottom: 4.5rem;
  left: 12rem;
}

.dot-pic-04 {
  width: 7rem;
  bottom: 6rem;
  right: 10rem;
}

.dot-pic-05 {
  width: 10rem;
  bottom: 2rem;
  right: 2rem;
}

.dot-pic-01,.dot-pic-02, .dot-pic-03, .dot-pic-07 {
  /* アニメーションの名前 */
  animation-name:UpDown;
  /* アニメーションの１回分の長さ */
  animation-duration: 0.8s;
  /* アニメーションの回数 */
  animation-iteration-count: 4;
  /* アニメーションの進行具合 */
  animation-timing-function: ease-in-out;
  /* アニメーション再生の向き */
  animation-direction: alternate;
}
  /* アニメーションの設定 */
@keyframes UpDown{
  /* 開始地点 */
  0%{
  /* Y軸0px */
  transform: translateY(0);
  }
  /* 終了地点 */
  100%{
  /* Y軸50px */
  transform: translateY(1.5rem);
  }
}

.dot-pic-04 {
    /*⬇︎⬇︎2秒ごとに画像が動くようになっている*/
  animation: fluffy1 2s ease 2; 
}
  @keyframes fluffy1 {
  0% {
    transform: translateY(0); }
  5% {
    transform: translateY(0); }
  10% {
    transform: translateY(0); }
  20% {
    transform: translateY(-10px); }
  25% {
    transform: translateY(0); }
  30% {
    transform: translateY(-10px); }
  50% {
    transform: translateY(0); }
  100% {
    transform: translateY(0); } 
}

.dot-pic-05, .dot-pic-06 {
  animation: yureru-js 0.6s 4;
}
@keyframes yureru-js {
  0% {
    transform: translate(2px, 2px);
  }
  25% {
    transform: translate(2px, -2px);
  }
  50% {
    transform: translate(-2px, -2px);
  }
  75% {
    transform: translate(-2px, 2px);
  }
  100% {
    transform: translate(2px, 2px);
  }
}

/* メインコンテンツ　共通部ここから */

.mainarea {
  padding: 0 2.5rem;
}

.midashiblock {
  margin-bottom: 4rem;
  text-align: center;
}

.midashicontents {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.midashi {
  width: 14rem;
}

.midashi-text {
  padding-bottom: 2.2rem;
  line-height: 0;
}

.midashi-subtext {
  margin-bottom: 3rem;
  font-weight: bold;
  text-align: center;
}

.infotext {
  margin-top: 3rem;
}

.subimgblock {
  position: relative;
  margin-top: 3rem;
}

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

.dot-pic-06,.dot-pic-07 {
  height: auto;
  position: absolute;
}

.dot-pic-06 {
  width: 9.5rem;
  left: 0rem;
}

.dot-pic-07 {
  width: 8rem;
  right: 1rem;
  bottom: 1rem;
}

.datablock {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.datacontents {
  margin-bottom: 1rem;
}

.infodata {
  display: flex;
}

.infodata-title {
  width: 20%;
  font-weight: bold;
}

.infodata-text {
  width: 80%;
}

/* ゲームここから */

.gamebtnblock {
  margin-top: 4rem;
  margin-bottom: 6rem;
}

/* QAここから */

.QAarea {
  margin:  0 -2.5rem;
  padding: 4rem 2.5rem 5rem;
  background-color: #F2FAFC;
}

.QAblock {
  padding-top: 2rem;
}

.QAcontents {
  background-color: #FFF;
}

.question {
  margin-top: 2.5rem;
  display: flex;
  padding: 1.8rem 1rem ;
  font-weight: bold;
  cursor : pointer;
}

.answer {
  padding: 0 1.1rem 1.8rem;
  display: none;
}

.QAmark {
  width: 4%;
}

.Qtext {
  width: 91%;
}

.Atext {
  width: 96%;
}

.icon-plus, .icon-minus {
  width: 5%;
}

.icon-plus::before {
  font-family: "Font Awesome 6 Free";
  content: '\2b';
  font-weight: 900;
  font-size: 1.6rem;
  margin-left: 0.7rem;
  color: #FF2983;
}

.icon-minus::before {
  font-family: "Font Awesome 6 Free";
  content: '\f068';
  font-weight: 900;
  font-size: 1.6rem;
  margin-left: 0.7rem;
  color: #FF2983;
}

/* 問い合わせここから */

.toiawasearea {
  margin-top: 6rem;
  margin-bottom: 7rem;
}

.yobikake {
  display: flex;
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 2rem;
}

.yobikake-text {
  margin: 0 1rem;
}

/* フッタここから */

.etopiaarea {
  background-image: url("../images/back_img_sp_footer.png");
  background-size: 100% auto;
  margin-bottom: 5rem;
  padding: 4rem 2.5rem 0;
  height: 22.2rem;
}

.etopiacontents {
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}

.etopialogo {
  margin-bottom: 1.5rem;
  width: 25rem;
  height: 2.3rem;
}

.linktext-etopia {
  display: block;
  margin-bottom: 2rem;
  font-size: 1.6rem;
  color: #005BAB;
  text-decoration: underline;
}

.snscontents {
  display: flex;
  justify-content: space-around;
  max-width: 40rem;
  margin: 0 auto;
}

.icon-sns a {
  display: block;
  width: fit-content;
  width: 5.3rem;
}

.iconImg {
  width: 5.3rem;
  height: 5.3rem;
}

.cwcontents {
  text-align: center;
}

.footertext {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: #707070;
}

/* ゲーム紹介ページここから */

.headerarea-sub {
  background-image: url("../images/back_img_sp_toppage.png");
  margin-bottom: 4rem;
  width: 100%;
  height: auto;
  padding-bottom: 9%;
  background-size: cover;
}

.gameinfoarea {
  margin-bottom: 3rem;
}

.red-text {
  margin-bottom: 1rem;
  color: #C90404;
  font-weight: bold;
}

.red-text::before {
  font-family: "Font Awesome 6 Free";
  content: '\f05a';
  font-weight: 900;
  font-size: 1.6rem;
  color: #C90404;
  margin-right: 0.5rem;
}


.gamedataarea {
  margin:  0 -2.5rem;
  padding: 1rem 2.5rem 5rem;
  background-color: #F2FAFC;
}

.gamepage-midashi {
  margin-top: 1rem;
  margin-bottom: 5rem;
  font-size: 1.8rem;
  text-align: center;
}

.gameblock {
  width: auto;
  margin-bottom: 6rem;
  padding: 2rem 1.75rem;
  background-color: #fff;
  border-radius: 8px;
  border: solid 2px #000000;
  border-bottom: solid 0.7rem #000000;
}

.gametitle {
  text-align: center;
  margin-bottom: 2rem;
  font-weight: bold;
}

.ssImg {
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
}

.dotline-long {
  display: block;
  width: 70%;
  margin-bottom: 2rem;
}

.nickname {
  font-weight: bold;
  margin-bottom: 1rem;
}

.gaiyou {
  margin-bottom: 1rem;
}

.operation {
  font-weight: bold;
}

.operation::before {
  font-family: "Font Awesome 6 Free";
  content: '\f11b';
  font-weight: 900;
  font-size: 1.8rem;
  margin-right: 0.5rem;
}

.operation-text {
  margin-bottom: 2rem;
}

.hitokoto {
  font-weight: bold;
}

.hitokoto::before {
  font-family: "Font Awesome 6 Free";
  content: '\f4ad';
  font-weight: 900;
  font-size: 1.8rem;
  display: inline-block;
  transform: scaleX(-1);
  color: #EF317B;
  margin-right: 0.7rem;
}

.hitokoto-comment {
  margin-bottom: 2rem;
}

.playinfo {
  display: flex;
  flex-direction: column;
}

.play-title {
  margin-bottom: 0.8rem;
  font-weight: bold;
}

.playlink {
  color: #005BAB;
  text-decoration: underline;
}

.playlink::after {
  font-family: "Font Awesome 6 Free";
  content: '\f08e';
  font-weight: 900;
  font-size: 1.6rem;
  margin-left: 0.1rem;
}

.btnmaru.hokagame {
  margin-top: 6rem;
  margin-bottom: -2rem;
}

.btnmaru.hokagame a {
  background-color: #E8F1FC;
}

/* 画面サイズが340px以下のとき */
@media screen and (max-width: 340px){

  h2 {
    font-size: 1.9rem;
  }
}

/* 画面サイズが375px以下のとき */
@media screen and (max-width: 375px){

  .btnkaku.togame a {
    padding: 2rem 0.3rem;
    font-size: 1.5rem;
  }

  .question {
    padding: 1rem;
  }

  .QAmark {
    width: 7%;
  }

  .Qtext {
    width: 86%;
  }

  .icon-plus, .icon-minus {
    width: 7%;
  }
}

/* タブレット以上 */
@media print, screen and (min-width: 744px) {

}

/* ノートPC以上 */
@media print, screen and (min-width: 1080px) {

  body {
    font-size: 1.8rem;
  }

  main {
    max-width: 77.4rem;
    margin: 0 auto;
  }

  h2 {
    font-size: 2.6rem;
  }

  h3 {
    font-size: 2.2rem;
  }

  .br-sp {
    display: none;
  }

  .br-pc {
    display: block;
  }

  .headerarea {
    background-image: url("../images/back_img_pc_toppage.png");
    margin-bottom: 4rem;
    width: 100%;
    padding-bottom: 6%;
    background-size: cover;
    position: relative;
  }
  
  .logocontents {
    margin: 0 auto;
    padding-top: 5rem;
    width: 55.8rem;
    height: auto;
  }
    
  .logoImg-sp {
    display: none;
  }
  
  .logoImg-pc {
    display: block;
    width: 55.8rem;
    height: auto;
  }
  
  .mainimgblock {
    max-width: 77.4rem;
    margin: 0 auto;
  }
  
  .dot-pic-01 {
    width: 12rem;
    bottom: 10rem;
    left: 9rem;
  }
  
  .dot-pic-02 {
    width: 10rem;
    bottom: 3.5rem;
    left: 20.5rem;
  }
  
  .dot-pic-03 {
    width: 12rem;
    bottom: 8rem;
    left: 31rem;
  }
  
  .dot-pic-04 {
    width: 14rem;
    bottom: 10rem;
    right: 27rem;
  }
  
  .dot-pic-05 {
    width: 20rem;
    bottom: 3rem;
    right: 9rem;
  }

  .dot-pic-06 {
    width: 19rem;
    left: 0rem;
  }
  
  .dot-pic-07 {
    width: 16rem;
    right: 1rem;
    bottom: 1rem;
  }

  .midashi {
    width: 20rem;
    height: auto;
  }

  .subimgblock {
    margin-top: 5rem;
  }

  .midashi-text {
    padding-bottom: 2.8rem;
    line-height: 0;
  }

  .midashi-subtext {
    font-size: 2.0rem;
  }

  .dotline-dog {
    width: 42rem;
    height: auto;
  }

  .dotline-mini {
    width: 17.7rem;
    height: auto;
  }

  .dotline-long {
    width: 62%;
    margin-bottom: 3rem;
  }

  .kazari {
    width: 36rem;
    height: auto;
    margin-top: 4rem;
  }

  .anchorbtns {
    display: flex;
    justify-content: space-between;
  }

  .btnkaku.togame, .btnkaku.toQA {
    width: 46%;
  }

  .btnkaku a:hover, .btnmaru a:hover, .btnmaru-pink a:hover, .btnmaru-blue a:hover, .btnmaru-orange a:hover  {
    border-bottom: solid 0.3rem #000000;
    transform: translateY(0.4rem);
  }

  .btnmaru a, .btnmaru-pink a, .btnmaru-blue a, .btnmaru-orange a {
    margin-bottom: 5rem;
    padding: 2rem 0;
    font-size: 1.9rem;
  }

  .infotext {
    margin-top: 5rem;
    text-align: center;
  }

  .datablock {
    margin-top: 6rem;
    margin-bottom: 7rem;
  }

  .QAarea {
    margin-top: 10rem;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-bottom: 8rem;
  }

  .QAblock {
    padding-top: 2rem;
  }

  .question {
    margin-top: 3.5rem;
    display: flex;
    padding: 1.8rem 1rem ;
    font-weight: bold;
    cursor : pointer;
  }
  
  .answer {
    padding: 0 1.1rem 1.8rem;
    display: none;
  }

  .wrapper-blue {
    max-width: 72.4rem;
    margin: 0 auto;
  }

  .toiawasearea {
    margin-top: 8rem;
    margin-bottom: 10rem;
  }

  .etopiaarea {
    background-image: url("../images/back_img_pc_footer.png");
    margin-bottom: 10rem;
    padding-top: 8.8rem;
    height: 34.1rem;
  }

  .etopialogo {
    margin-bottom: 1.5rem;
    width: 37.5rem;
    height: 3.4rem;
  }

  /* ゲーム紹介ページここから */

  .headerarea-sub {
    background-image: url("../images/back_img_pc_toppage.png");
    margin-bottom: 4rem;
    width: 100%;
    height: auto;
    padding-bottom: 5%;
  }

  .gamedataarea {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .gamepage-midashi {
    margin-top: 1rem;
    margin-bottom: 5rem;
    font-size: 2.2rem;
  }

  .gameblock {
    width: auto;
    margin-bottom: 9rem;
    padding: 3rem 3.75rem;
    border-radius: 8px;
    border-bottom: solid 0.9rem #000000;
  }

  .gametitle {
    margin-bottom: 2rem;
  }

  .ssImg {
    margin-bottom: 3rem;
  }

  .nickname {
    margin-bottom: 2rem;
  }
  
  .gaiyou {
    margin-bottom: 2rem;
  }
  
  .operation {
    font-weight: bold;
  }
  
  .operation::before {
    margin-right: 0.7rem;
  }
  
  .operation-text {
    margin-bottom: 3rem;
  }
  
  .hitokoto {
    font-weight: bold;
  }
  
  .hitokoto::before {
    margin-right: 1rem;
  }
  
  .hitokoto-comment {
    margin-bottom: 3rem;
  }

  .playinfo {
    flex-direction: inherit;
    justify-content: center;
  }

  .play-title {
    margin-bottom: 0rem;
    margin-right: 3rem;
  }
  
  .playlink {
    color: #005BAB;
    text-decoration: underline;
  }
  
  .playlink::after {
    font-size: 1.8rem;
    margin-left: 0.4rem;
  }
}

/* デスクトップPC想定 */
@media print, screen and (min-width: 1255px) {
  .br-sp,.br-sp_sv {
    display: none;
  }
}

/* 大きなデスクトップPC想定 */
@media print, screen and (min-width: 1800px) {
}