/*
Theme Name: シューティング
Version: 1.0
Author:Seiki Nishijima

  $Id: style.css,v1.0 $
*/
/*===========================================================================
-----------------------------------------------------------------------------
  共通 変数　ここから
-----------------------------------------------------------------------------
===========================================================================*/
:root {
  --color-moji: #777;
  --color-title: #222;
  --color-milk: #fff;

  --font-eiji: "Poppins", sans-serif;
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
  :root {
  }
}
/*===========================================================================
-----------------------------------------------------------------------------
  共通設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
html {
  -webkit-text-size-adjust: none;
  overscroll-behavior: none;
}
body {
  padding: 0 0 0 0;
  margin: 0 auto;
  text-align:center;
  background: var(--color-milk);
  color: var(--color-moji);
  font-size: 1.25vw;
}
#background {
  padding: 0 0 0 0;
  margin:0px auto;
  text-align: center;
  width: 100%;
  position: relative;
  overflow: hidden;
}
#background section {
  width: 80vw;
  max-width: 1000px;
  min-width: 800px;
  margin: auto;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
  body {
    font-size: 15px;
  }
}
/*-----------------------------------*/
#background img {
  vertical-align: middle;
  box-sizing: border-box;
  width: 100%;
  height: auto;
}
/*===========================================================================
-----------------------------------------------------------------------------
  共通ヘッダー・フッター設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
#background header ,
#background footer {
  margin: 3vw auto;
}
#background header h1 {
  text-align: center;
  font-weight: 500;
}
#background header h1 small {
  display: block;
  text-align: center;
  font-family: var(--font-eiji);
  font-weight: 800;
  font-size: 3vw;
  line-height: 1.8em;
  color: var(--color-title);
}
#background footer address {
  display: block;
  text-align: center;
  font-family: var(--font-eiji);
  font-weight: 500;
  font-style: normal;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
  #background header h1 small {
    font-size: 36px;
  }
}

/*------------------------------------
  操作・クレジット 設定　ここから
-------------------------------------*/
#background footer h3 {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--color-title);
}
#background footer ul {
  margin-bottom: 1em;
}


/*===========================================================================
-----------------------------------------------------------------------------
  ゲーム画面 設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
#background #game-container {
  display: block;
  width: 100%;
  padding-top: 75%;
  background: -moz-linear-gradient(top, #0ff, #cff);
  background: -webkit-linear-gradient(top, #0ff, #cff);
  background: linear-gradient(to bottom, #0ff, #cff);
  overflow: hidden;
  position: relative;
}
#background #game-container.stage2 {
  background: -moz-linear-gradient(top, #ff0, #ffe);
  background: -webkit-linear-gradient(top, #ff0, #ffe);
  background: linear-gradient(to bottom, #ff0, #ffe);
}
#background #game-container.stage3 {
  background: -moz-linear-gradient(top, #800, #ddd);
  background: -webkit-linear-gradient(top, #800, #ddd);
  background: linear-gradient(to bottom, #800, #ddd);
}
/*------------------------------------
  スコア 設定　ここから
-------------------------------------*/
#background #score-container {
  height: 1em;
  font-size: 1.6em;
  line-height: 1em;
  font-family: var(--font-eiji);
  font-weight: 800;
  color: var(--color-milk);
  position: absolute;
  top: 0.6em;
  right: 0.6em;
  z-index: 500;
  filter: drop-shadow(0.05em 0.05em 0 var(--color-moji));
}


/*===========================================================================

  プレイヤー 設定　ここから

===========================================================================*/
#background #player {
  width: 8%;
  padding-top: 6%;
  position: absolute;
  bottom: 2%;
  left: 47.5%;
  transition: all 0.05s ease;
  z-index: 200;
}
#background #player:before ,
#background #player:after {
  content: "";
  width: 50%;
  height: 100%;
  background: url(./player.png) no-repeat 0 0;
  background-size: auto 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.1s ease;
}
#background #player:after {
  background-position: 100% 0;
  left: auto;
  right: 0;
}
#background #player.left:before ,
#background #player.right:after {
  transform: scale(1.5,1);
}
#background #player.left:after ,
#background #player.right:before {
  transform: scale(0.5,1);
}

/*------------------------------------
  バレット 設定　ここから
-------------------------------------*/
#background .bullet {
  width: 2%;
  padding-top: 2%;
  border-radius: 50%;
  position: absolute;
  background: -moz-radial-gradient(#ff0, #f00);
  background: -webkit-radial-gradient(#ff0, #f00);
  background: radial-gradient(#ff0, #f00);
  transform: translateX(-50%);
  z-index: 100;
}


/*===========================================================================

  エネミー 設定　ここから

===========================================================================*/
#background .enemy {
  width: 8%;
  aspect-ratio: 1;
  position: absolute;
  animation-name: enemy-anime;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  z-index: 20;
  transition: all 0.3s ease;
}
@keyframes enemy-anime {
    0% { transform: scale(1,1); }
   50% { transform: scale(1, 0.9); }
  100% { transform: scale(1,1); }
}

#background .enemy:before ,
#background .enemy:after {
  content: "";
  width: 50%;
  height: 100%;
  background: url(./enemy.png) no-repeat 0 0;
  background-size: auto 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.2s ease;
  animation-name: enemy-anime-left;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
#background .enemy:after {
  background-position: 100% 0;
  left: auto;
  right: 0;
  animation-name: enemy-anime-right;
}
@keyframes enemy-anime-left {
    0% { transform: scale(1,1);  }
   25% { transform: scale(1.2,1);}
   50% { transform: scale(1,1);  }
   75% { transform: scale(0.8,1);}
  100% { transform: scale(1,1);  }
}
@keyframes enemy-anime-right {
    0% { transform: scale(1,1);  }
   25% { transform: scale(0.8,1);}
   50% { transform: scale(1,1);  }
   75% { transform: scale(1.2,1);}
  100% { transform: scale(1,1);  }
}
#background .enemy.explode:after {
  display: none;
}

/*------------------------------------
  エネミーカラー 設定　ここから
-------------------------------------*/
#background .stage1 .enemy {
  filter: hue-rotate(0deg);
}
#background .stage2 .enemy {
  filter: hue-rotate(180deg);
}
#background .stage3 .enemy {
  filter: hue-rotate(100deg);
}
/*------------------------------------
  エネミーバレット 設定　ここから
-------------------------------------*/
#background .enemyBullet {
  width: 1.4%;
  padding-top: 1.4%;
  border-radius: 50%;
  position: absolute;
  background: -moz-radial-gradient(#ff0, #088);
  background: -webkit-radial-gradient(#ff0, #088);
  background: radial-gradient(#ff0, #088);
  transform: translateX(-50%);
  z-index: 100;
}

/*===========================================================================

  バリケード設定　ここから

===========================================================================*/
#background .barricade-block {
  display: block;
  position: absolute;
  box-sizing: border-box;/*
  border: 3px solid #841;
  border-top-color: #fdb;
  border-left-color: #fdb;*/
  border: 3px solid #433;
  border-radius: 4px;
  background: -moz-linear-gradient(40deg, #da2 26%, #c83 26%);
  background: -webkit-linear-gradient(40deg, #da2 26%, #c83 26%);
  background: linear-gradient(130deg, #da2 26%, #c83 26%);
}

/*===========================================================================

  アニメーションエフェクト 設定　ここから

===========================================================================*/
/*------------------------------------
  撃破アニメ 設定　ここから
-------------------------------------*/
#background .explode {
  transform: scale(1,1) !important;
}
#background .explode:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(./explode.png) no-repeat 50% 50%;
  background-size: cover;
  animation: explode-anime 0.3s ease-out;
  z-index: 400;
}
@keyframes explode-anime {
    0% { transform: scale(1); opacity: 1; }
   50% { transform: scale(1.5); opacity: 0.7; }
  100% { transform: scale(0); opacity: 0; }
}
/*------------------------------------
  被弾アニメ 設定　ここから
-------------------------------------*/
#background .damage {
  animation: damage-anime 0.2s infinite;
}
@keyframes damage-anime {
    0% { opacity: 1; }
   50% { opacity: 0.2; }
  100% { opacity: 1; }
}
/*===========================================================================
-----------------------------------------------------------------------------
  ステージ画面 設定　ここから
-----------------------------------------------------------------------------
===========================================================================*/
/*------------------------------------
  スタート画面 設定　ここから
-------------------------------------*/
#background .screen-container {
  display: none;
  position: static;
}
#background .stageScreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--color-title);
  color: var(--color-milk);
  z-index: 700;
}
#background .stageScreen > h2 {
  display: flex;
  font-family: var(--font-eiji);
  font-size: 3vw;
  font-weight: 800;
  line-height: 1.8em;
  margin-bottom: 0.5em;
}
#background .stageScreen > h2 em {
  margin: auto 0.2em;
  text-shadow:
    0.01em 0.01em 0 var(--color-moji),
    0.02em 0.02em 0 var(--color-moji),
    0.03em 0.03em 0 var(--color-moji),
    0.04em 0.04em 0 var(--color-moji),
    0.05em 0.05em 0 var(--color-moji),
    0.06em 0.06em 0 var(--color-moji),
    0.08em 0.08em 0 var(--color-moji);
}
#background .stageScreen > h2:before ,
#background .stageScreen > h2:after {
  content: "";
  display: block;
  width: 1.25em;
  height: 1.25em;
  background: url(./enemy.png) no-repeat 50% 50%;
  background-size: contain;
  margin: auto 0;
}
#background .stageScreen > h2:before {
  width: 1.5em;
  height: 1.5em;
  background-image: url(./player.png);
  transform: rotate(180deg);
}
#background .stageScreen p {
  font-family: var(--font-eiji);
  font-weight: 800;
  font-size: 1.4em;
}
#background .stageScreen p > span {
  font-size: 1.2em;
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1600px) {
  #background .stageScreen > h2 {
    font-size: 4vw;
  }
}
/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
  #background .stageScreen > h2 {
    font-size: 40px;
  }
}
/*------------------------------------
  ステージクリア画面 設定　ここから
-------------------------------------*/



/*===========================================================================

  設定　ここから

===========================================================================*/


/*------------------------------------
  設定　ここから
-------------------------------------*/

/*-----------------------------------*/

/** 小さい画面用分岐 **/
@media screen and (max-width: 1200px) {
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
}