@charset "UTF-8";
 
 /* すべてのページに適用される　*/
 
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

html {
	font-family: sans-serif;
}
html * {
	box-sizing: border-box;
}
body {
  margin: 0 0 0 0;
  background-color:rgb(255, 255, 255);
}

.wrapper {
	margin: 0 auto 0 auto;
	max-width: 960px;
}

/*グロナビ用のサンプルCSSコード */
header{ 
  width:100%;
  background-color:#ffffff;
  padding:0 10%;
  margin: 15px 0 15px 0;
  display:flex;  /*ロゴとulを横に並べる*/
  justify-content:space-between;  /*両端に配置*/
  align-items: center;  /*ロゴ、メニューの文字を垂直中央に並べる*/
  /*position:fixed;  /*ヘッダーの位置を固定*/
  /*top:0;  /*ヘッダーの位置を固定（上0）*/
  /*left:0; /*ヘッダーの位置を左固定（左０）*/
}
a {	
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  font-size: 20px;
}
ul.topbar {
  list-style: none;
  display: flex;
}
li {
  margin-left:40px;
  list-style:none;
}
a:hover{
  /*background: #94b4fa; （色を変える場合） */
  opacity:0.3;  /*（不透明度50％の場合）*/
}
/*　グローバルメニュー終了　*/

/*　PCでは表示させる　*/
@media screen and (min-width: 768px){
/*　追従するボタン　GooglePlayストア画像*/
  .fixed_btn{
    position: fixed; /* 追従させる為にfixedの値を記述します */
    z-index: 99999; /* 他の要素の下に隠れないように全面配置させます */
    background:rgb(207, 207, 207);
    opacity: 0.8;  /*半透明にする*/
    width: 20%;
    right: 0;
    border-radius: 20px;  /*角を丸くする*/
  }
  p.storemoji{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin: 5px 0 0 0;
    color: #000000;
  }
  .ggh:hover{
    opacity: 0.6;
  }
  /*　追従するボタン　GooglePlayストア画像　終了　*/

  /*　PCでは表示させない　*/
  .smartgg{
    display: none !important;
  }
  /*　PCでは表示させない終了　*/


}

/* スライダーはじめ */
.slideshow {
  width: 380px;
  height: 728px;
  overflow: hidden;
  position: relative;
  margin:0 auto;   /*画像を中央揃えにする*/
  /*transform: translate(50%,0%); 　画像を中央揃えにする*/
}
.slideshow img {
  width: 380px;
  height: 728px;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out; /* フェードアニメーション */
}
.slideshow img.active {
  opacity: 1; /* 表示する画像の透明度を変更 */
}
button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
}
button.prev {
  left: 10px; /* 左端に配置 */
}
button.next {
  right: 10px; /* 右端に配置 */
}
/* スライダー終了 */

/*　ボディーの内容　*/
h1{
  font-size: 30px;
  margin: 8px auto 0 auto;
  text-align: center;
  color:#ff8800;;
}
h2.midashi{
  font-size: 25px;
  margin: 8px auto 0 auto;
  color:#0044ff;
}
h3{
  font-size: 23px;
  margin: 8px auto 0 auto;
  color:rgb(255, 72, 0); 
}
hr {
  height: 1px;
  background-color: rgb(0, 0, 0);
  width: auto;
  border: none;
  margin: 0 auto 10px auto;
}
img {
	max-width: 100%;
  height: auto;
}

/*ゲーム紹介文を表示させる*/
p.sentence{
  text-align:left;
  font-size: 20px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  margin: 0 auto;
}
/*ゲーム画像を表示させる*/
ul.photo{
  display: flex;
  width: auto;
  margin: 0;
  padding: 0;
  justify-content:center;
  list-style: none;
}
ul.photo >li{
  display:flex;
  align-items: center;
  justify-content: center;
}
/*ゲーム画像を表示させる終了*/


/*　ゲームの内容　*/
.mds {
  text-align: center;
  font-size: 25px;
	color: rgb(0, 0, 0);
}
span.m-red {
  text-align:center;
  font-size:25px;
  font-weight: bold;
  color: rgb(255, 0, 0);
  margin: 0 auto;
}
/* PCでは改行させないで、モバイルの時に改行する位置を指定　*/
.sp_br {
  display: none;
}
/* PCで改行させ、モバイルの時に改行させない　位置を指定　*/
.p_br {
  display:block;
}

/*　ゲーム情報　*/
p{
  font-size:30px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  margin: 0 auto;
}
ul.text{
  font-size:18px;
  font-weight: bold;
  color: rgb(0, 0, 0);
  margin: 0 auto;
}
/*　ゲーム情報　終了　*/

/*　注意文　*/
p.note{
  text-align:left;
  font-size: 15px;
  margin: 0 auto 10px auto;
  color: #FF3300;
}

/*　商品紹介部分　*/
.flex {
  display: flex; /*横並び*/
}
.flex .image {
  width: 15%; /*画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.flex .text {
  font-size: 18px;
  margin: 0 0 0 20px;
  padding: 0;
}
/*　商品紹介部分 終了　*/

/*　フッター前の線　*/
hr.end {
  height: 5px;
  background-color: rgb(0, 0, 0);
  width: auto;
  border: none;
}

/* フッター内容 */
.footermenu{
  display: flex;  /*横並びにする*/
  justify-content: center;  /*左によってしまうので中央に寄せる*/
  margin: 15px 0 5px 0;
}
ul.footer {
  list-style: none;
  display: flex;
}
a.footersub{
  font-size: 13px;
  font-weight: normal;
  color: #000000;
  margin: 0 10px;
}
.copyright{
  text-align: center;
  font-size: 12px;
  color: #000000;
}
/*　リンクしている文字アンダーバー（青）を消す*/
a {	
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  font-size: 20px;
}
a:hover{
  /*background: #94b4fa; （色を変える場合） */
  opacity:0.3;  /*（不透明度50％の場合）*/
}
/*　フッター内容　終了　*/


/***追従するトップへ戻るボタン***/
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #3fefee;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/***トップへ戻るボタンここまで***/


/* スマートフォン向けCSS 767px以下になると表示が下のように変わる */
@media screen and (max-width: 767px) {
  /*全体　-ナビゲーション- */
  .wrapper {
	margin: 0;
  overflow:hidden;
  }
  .logo {
	margin: 0;
  }
  .logo img {
	width: 200px;
  }
  
  header{
    flex-direction: column; /*縦に並べる*/
    padding:1% 2%;  /* ロゴ上下に4%の余白　左右に2%の余白*/
    align-items: center;  /*ロゴ、メニューの文字を垂直中央に並べる */
    justify-content:space-between;  /*両端に配置*/
  }
  /* スマホではPC上で表示させた画面2つの紹介を表示させない*/
  .gweb{
    display: none;
  }

  /*ナビメニュー*/
  nav,ul{
    width:100%;   /*　nav,ulの横幅を100％*/
    justify-content: center;  /*左によってしまうので中央に寄せる*/
    margin:0;
    padding:0;
    align-items: center;  /*ロゴ、メニューの文字を垂直中央に並べる */
  }
  li{
    margin:0;
    padding:8px;
  }

  /*文章をスマホだと改行するためのもの*/
  .sp_br {
    display: block;
  }
  /*文章をスマホだと改行させないもの*/
  .p_br {
    display: none;
  }

 /*画像　スマホだと縦に一つ表示するためのもの*/
  .photo{
    width: 100%;
    margin: 0;
    display: block;
    text-align: center;
  }
  .gp {
    margin: 0;
    width: 80%;
    justify-content: center;
  }
  .mds {
    text-align: center;
    font-size: 20px;
    color: rgb(0, 0, 0);
  }
  span.m-red {
    text-align:center;
    font-size:20px;
    font-weight: bold;
    color: rgb(255, 0, 0);
    margin: 0 auto;
  }

  /*　スマホではフローティングバナーは非表示にする　*/
  .fixed_btn{
    display: none !important;
  }

  /* フッター内容 */
  .footermenu{
   display: flex;  /*横並びにする*/
   justify-content: center;  /*左によってしまうので中央に寄せる*/
   margin: 15px 0 5px 0;
  }
  ul.footer {
   list-style: none;
   display: flex;
   flex-direction:column;
  }
  a.footersub{
   font-size: 13px;
   font-weight: normal;
   color: #000000;
   margin: 0 10px;
  }
  .copyright{
   text-align: center;
   font-size: 12px;
   color: #000000;
  }
  /*　フッター内容　終了　*/
}