/******************************************************************************
	    デフォルト設定
*******************************************************************************/
/* HTML5の新要素を非サポートブラウザにブロック要素として定義 */
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
html {
	height: 100vh;
	font-size: 62.5%; /* 10pxをベースとし各要素は1.○rem（=px）で指定） */
}
body {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
    background-color: none;
	font-family: "Helvetica Neue","Segoe UI","Hiragino Kaku Gothic ProN W3",Meiryo,arial,sans-serif;
	font-size: 14px; /* IE8以前対応 */
	font-size: 1.4rem;
	line-height: 1.5;
	color:#545454;
	overflow-y:hidden; /* FireFoxのスクロールバー対策 */
	-webkit-text-size-adjust: none; /* iOSを横にした場合の文字拡大の対応 */
}
/******************************************************************************
	    基本設定
*******************************************************************************/
/* ゲームパッドのボタン設定 */
#gamepadRemapping {
    display: none;
    justify-content: center;
    align-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 97;
}
#gamepadRemappingBg {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.7;
    z-index: 98;
}
#gamepadRemappingInner {
    display: block;
    width: 352px;
    height: 320px;
    box-sizing: border-box;
    padding: 20px 20px;
    margin: 0;
    background-color: transparent;
    /*box-shadow: 0 0 20px #fff;*/
    border-radius: 8px;
    z-index: 99;
}
#gamepadRemappingInner p {
    font-weight: 700;
    text-align: center;
}
#gamepadRemappingInner p span {
    width: 100%;
    font-size: 1.0rem;
    position: absolute;
    bottom: -18px;
    left: 0;
}
#gamepadRemappingInner #remapTitle {
    text-align: left;
    margin: 0 0 10px;
    color: #efefef;
}
#btnFC {
    display: none;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 24px;
    margin: 0;
    background-color: #eee;
    border: 1px solid #666;
    border-radius: 5px;
    font-size: 1.1rem;
    position: absolute;
    top: 20px;
    right: 173px;
    cursor: pointer;
}
#presetSelect {
    display: block;
    width: 150px;
    height: 25px;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
select option {
    font-size: 2.0rem;
}
#rmGamepad {
    width: 310px;
    height: 210px;
    border: 1px solid #fff;
    border-radius: 2px;
    position: relative;
    margin: 0 0 10px;
}
#rmGamepad p {
    display: block;
    border: 1px solid #efefef;
    position: absolute;
    margin: 0;
    color: #efefef;
}
#rmGamepad #rmGamepadId {
    border: none;
    width: 200px;
    height: 45px;
    padding: 0;
    top: 10px;
    left:10px;
    font-size: 1.0rem;
    text-align: left;
    overflow: hidden;
}
#rmGamepad #rmPressKeyInfo {
    border: none;
    width: 40px;
    /*max-width: 100px;*/
    height: 30px;
    padding: 5px;
    border: 1px solid #efefef;
    border-radius: 2px;
    top: 70px;
    left:135px;
    font-size: 1.0rem;
    /*word-break: break-all;*/
}
#rmDirUp {
    width: 30px;
    height: 30px;
    border-radius: 4px 4px 0 0;
    top: 50px;
    left: 41px;
}
#rmDirUp:after {
    content: "\025b2";
    display: flex;
    justify-content: center;
    width: 30px;
    height: 32px;
    font-size: 1.2rem;
    padding: 0;
}
#rmDirDown {
    width: 30px;
    height: 30px;
    border-radius: 0 0 4px 4px;
    top: 112px;
    left: 41px;
}
#rmDirDown:after {
    content: "\025bc";
    display: flex;
    justify-content: center;
    align-items: end;
    width: 30px;
    height: 28px;
    font-size: 1.2rem;
}
#rmDirLeft {
    width: 30px;
    height: 30px;
    border-radius: 4px 0 0 4px;
    top: 81px;
    left: 10px;
}
#rmDirLeft:after {
    content: "\025c0";
    display: flex;
    justify-content: left;
    align-items: center;
    width: 26px;
    height: 30px;
    font-size: 1.2rem;
    padding: 0 0 2px;
    margin: 0 0 0 5px;
}
#rmDirRight {
    width: 30px;
    height: 30px;
    border-radius: 0 4px 4px 0;
    top: 81px;
    left: 72px;
}
#rmDirRight:after {
    content: "\025b6";
    display: flex;
    justify-content: right;
    align-items: center;
    width: 26px;
    height: 28px;
    padding: 0 0 3px;
    font-size: 1.2rem;
}
#rmSelect {
    width: 45px;
    height: 20px;
    border-radius: 10px 4px 4px 10px;
    top: 145px;
    left: 110px;
}
#rmSelect:after {
    content: 'SELECT';
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 18px;
    font-size: 0.9rem;
}
#rmStart {
    width: 45px;
    height: 20px;
    border-radius: 4px 10px 10px 4px;
    top: 145px;
    left: 165px;
}
#rmStart:after {
    content: 'START';
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 18px;
    font-size: 0.9rem;
}
#rmB {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    top: 100px;
    left: 220px;
}
#rmB:after {
    content: 'B';
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
}
#rmA {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    top: 60px;
    left: 260px;
}
#rmA:after {
    content: 'A';
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
}
#rmPowerSwitch {
    width: 30px;
    height: 25px;
    background: transparent url("../image/ic_power.png") no-repeat center center;
    background-size: 16px 16px;
    border-radius: 4px;
    top: 10px;
    left: 220px;
}
#rmSetting {
    width: 30px;
    height: 25px;
    background: transparent url("../image/ic_gear.png") no-repeat center center;
    background-size: 16px 16px;
    border-radius: 4px;
    top: 10px;
    left: 270px;
}
#rmCapture {
    width: 24px;
    height: 24px;
    background: transparent url("../image/ic_capture.png") no-repeat center center;
    background-size: 16px 16px;
    border-radius: 2px;
    top: 160px;
    left: 10px;
}
#rmScreenshot {
    width: 24px;
    height: 24px;
    background: transparent url("../image/ic_screenshot.png") no-repeat center center;
    background-size: 16px 16px;
    border-radius: 2px;
    top: 160px;
    left: 276px;
}
#rmGamepad .pushNow,
#rmGamepad .assignNow {
        border: 1px solid #9ffff3;
    box-shadow: 0px 0px 10px 0px rgba(159, 255, 243);
}

#btnRemap {
    display: flex;
    justify-content: flex-start;
    width: 280px;
    margin: 0 auto;
    position: relative;
}
#btnRemapAssign,
#btnRemapSkip,
#btnRemapRegister {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 32px;
    margin: 0;
    background-color: #eee;
    border: 1px solid #666;
    border-radius: 5px;
    font-size: 1.1rem;
}
#btnRemapAssign {
    width: 70px;
    margin: 0 10px 0 0;
}
#btnRemapSkip {margin: 0 50px 0 0;}
#btnRemapAssign:hover,
#btnRemapSkip:hover,
#btnRemapRegister:hover {
    cursor: pointer;
}
#gameBody {
    display: flex;
    justify-content: center;
    position :relative;
    width: 100%;
    max-width: 1366px; /* iPad PRo横*/
    height: 100%;
    padding: 20px 0 0; /* iPhoneSE 透明ツールバーが重なる分の余白 */
    margin: 0 auto;
    box-sizing: border-box;
    user-select: none;
    -moz-user-select:none; /* Firefox */
    -webkit-user-select:none; /* Google Chrome , Safari */
    touch-action: none; /* スマホでのタッチズームを不可 */
}
.android #gameBody {
    padding: 10px 0 0; /* android ツールバーが重ならない分を調整 */
}
#gameContainer {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 677px; /* iPhone8,SE高さ +10px */
    padding: 0;
    margin: 0 auto;
}
/* ゲーム画面枠 */
#gameScreen {
    position: relative;
    width: 320px; /* iPhoneSE（初代）画面横320px対応 */
    height: 320px;
    padding: 0;
    margin: 0 auto 5px;
    background-color: #000;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    overflow-x: hidden; /* ゲーム画面横352pxのうち左右16pxを非表示 */
}
/* ゲーム画面 */
#sysCanvas, #canvas {
    transform-origin: top left;
    position: absolute;
    top: 0px;
    left: -16px; /* ゲーム画面横352pxのうち左右16pxを非表示 */
    display: block;
    width: 352px;
    height: 320px;
    pointer-events: none;
}
#sysCanvas {z-index: 2;}
#canvas {z-index: 1;}
/* ゲームパッド */
#gamePad {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: #ddd;
    background-color: transparent;
    z-index: 50;
    opacity: 1.0;
}
#gamePad p {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /* Androidでタップ時に要素のハイライトを透明にする */
}
/* ヘッダー*/
#header {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 5px 0 0; 
    position: absolute;
    top: 0;
    left: 0;
}
/* ゲームロゴ(240×120px) */
#gameLogo {
    display: block;
    position: relative;
    width: 120px;
    height: 60px;
    margin: 0 auto;
    background: transparent url("../../game/image/gamelogo.png") no-repeat center center;    
    background-size: 120px 60px;
}
/* PICOMINIロゴ */
#brandLogo_p {
    display: block;
    position: absolute;
    bottom: 10px;
    left: calc((100% - 94px) / 2);
}
#brandLogo_l {display: none;}
.picomini {
    display: block;
    width: 94px;
    height: 14px;
    margin: 0 auto 5px;
    background: transparent url("../image/picomini.png") no-repeat center center;    
    background-size: 94px 14px;
    opacity: 0.7;
}
#picomini_p {display: block;}
#picomini_l {display: none;}
.powerLamp {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    padding: 0;
    margin: 0 auto;
    background-color: #aaa;
}
#powerLamp_p {display: block;}
#powerLamp_l {display: none;}

/* キャラ画像（グループ） */
#charImage {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 5px;
    margin: 0;
    opacity: 0.8;
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 50;
}
/* キャラ画像1 */
#charImage1 {
    display: block;
    width: 48px;
    height: 48px;
    background: transparent url("../../game/image/charImage1.png") no-repeat left top;
    background-size: 48px 48px;
    margin: 0;
}
/* キャラ画像2 */
#charImage2 {
    display: block;
    width: 48px;
    height: 48px;
    background: transparent url("../../game/image/charImage2.png") no-repeat left top;
    background-size: 48px 48px;
    margin: 0;
}
/* キャプチャー（録画）&スクリーンショットボタン */
#btnCapture, #btnScreenshot {
    display: block;
    width: 24px;
    height: 24px;
    background-color: #aaa;
    border: 1px solid #666;
    border-radius: 2px;
    padding: 0;
    position: absolute;
    bottom: 10px;
    z-index: 51;
    mix-blend-mode: hard-light;
    opacity: 0.8;
}
/* キャプチャー（録画）ボタン */
#btnCapture {
    left: 10px;
}
/* スクリーンショットボタン */
#btnScreenshot {
    right: 10px;
}
/* キャプチャー（録画）ボタン */
#btnCapture:before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: transparent url("../image/ic_capture_b.png") no-repeat center center;
    background-size: 16px 16px;
}
/* スクリーンショットボタン */
#btnScreenshot:before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: transparent url("../image/ic_screenshot_b.png") no-repeat center center;
    background-size: 16px 16px;
}
/* システムボタン */
#systemBtn {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    height: 30px;
    margin: 0;
    position: absolute;
    top: -40px;
    right: 0;
    z-index: 51;
}
#systemBtn p {
    display: block;
    width: 48px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 1px solid #666;
    background-image: linear-gradient(#666 0%, #999 100%);
    border-bottom: solid 2px #666;
    border-radius: 8px;
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(90, 90, 90, 0.19);
    color: #fff;
}
#systemBtn p span {
    display: block;
    width: 48px;
    height: 28px;
}
#systemBtn .pushButton {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
    border-bottom: solid 1px #666;
}
#systemBtn .pushButton span {
    background-position: center top 5px;
}
/* POWERボタン */
#btnPower span {
    background: transparent url("../image/ic_power.png") no-repeat center center;
    background-size: 16px 16px;
    opacity: 0.8;
}
/* 設定ボタン */
#btnSetting span {
    background: transparent url("../image/ic_gear.png") no-repeat center center;
    background-size: 16px 16px;
    opacity: 0.9;
}
/* 機能ボタン */
#function {
    display: flex;
    justify-content: space-between;
    position: relative;
    height: 40px;
    margin: 0 5px 5px;
    z-index: 52; /* システムボタン（POWER・設定）より上（重なるケース有） */
}
#function p {
    display: block;
    width: 74px;
    height: 32px;
    margin: 0;
    line-height: 32px;
    font-size: 1.4rem;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(90, 90, 90, 0.19);
}
#function .pushButton {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
    border-bottom: none;
    line-height: 30px;
}
/* 「START」ボタン */
#btnStart {
    border-radius: 8px 16px 16px 8px;
}
#btnStart:after {
    content: "START";
}
/* 「SELECT」ボタン */
#btnSelect {
    border-radius: 16px 8px 8px 16px;
}
#btnSelect:after {
    content: "SELECT";
}
/* コントローラー（方向ボタン&アクションボタン） */
#controller {
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 5px;
    opacity: 0.8;
    position: relative;
    z-index: 51;
}
/* 方向ボタン */
#directionBtn {
    position: relative;
    width: 148px;
    height: 148px;
}
/* スティックボタン（押下感知用・透明） */
#btnStick {
    width: 148px;
    height: 148px;
    margin: 0;
    border-radius: 74px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: transparent;
    z-index: 59;
}
/* 方向ボタン（ベースデザイン） */
#btnBase {
    width: 146px;
    height: 146px;
    border: 1px solid #333;
    margin: 0;
    border-radius: 73px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: linear-gradient(#333 0%, #666 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(90, 90, 90, 0.19);
    border-bottom: solid 2px #454545;
    z-index: 52;
}
/*  方向中央 */
#btnCenter {
    width: 50px;
    height: 42px;
    margin: 0;
    position: absolute;
    top: 55px;
    left: 50px;
    border: none;
    box-shadow: none;
    background-image: linear-gradient(#444 0%, #555 100%);
    z-index: 55;
}
#btnCenter:before,
#btnCenter:after {
    content: "";
    display: block;
    width: 2px;
    height: 2px;
    margin: 0;
    background-color: #aaa;
    position: absolute;
    z-index: 56;
}
#btnCenter:before {
    top: -2px;
    left: 1px;
}
#btnCenter:after {
    top: -2px;
    right: 1px;
}
/*（〇）*/
#btnCenter span {
    display: block;
    width: 50px;
    height: 42px;
    margin: 0;
}
#btnCenter span:after {
    display: block;
    width: 18px;
    height: 18px;
    background: transparent url("../image/ic_pico2man.png") no-repeat center center;
    background-size: 16px 16px;
    /*content: "\025cb";*/
    content: "";
    font-size: 1.9rem;
    line-height: 1.0;
    color: #999;
    position: absolute;
    top: 9px;
    left: 15px;
}
/* 「上&下」ボタン */
#btnUpDown {
    width: 44px;
    height: 134px;
    margin: 0;
    position: absolute;
    top: 5px;
    left: 51px;
    border: 2px solid #333;
    border-bottom: none;
    border-radius: 8px;
    background-image: linear-gradient(#333 0%, #666 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(90, 90, 90, 0.19);
    border-bottom: solid 2px #454545;
    z-index: 54;
}
#btnUpDown:before,
#btnUpDown:after,
#btnLeftRight:before,
#btnLeftRight:after {
    content: "\025bd";
    line-height: 1.0;
    position: absolute;
    font-size: 1.8rem;
    color: #999;
    opacity: 0.9;
}
#btnUpDown:before {
    top: 6px;
    left: 12px;
    transform: rotate(-180deg);
}
#btnUpDown:after {
    bottom: 6px;
    left: 12px;
    transform: rotate(0deg);
}
#btnLeftRight:before {
    top: 12px;
    left: 5px;
    transform: rotate(90deg);
}
#btnLeftRight:after {
    top: 12px;
    Right: 5px;
    transform: rotate(0deg);
}

/* 「左&右」ボタン */
#btnLeftRight {
    width: 134px;
    height: 44px;
    margin: 0;
    position: absolute;
    top: 51px;
    left: 5px;
    border: 2px solid #333;
    border-bottom: none;
    border-radius: 8px;
    background-image: linear-gradient(#444 0%, #555 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(90, 90, 90, 0.19);
    border-bottom: solid 2px #454545;
    z-index: 53;
}
#btnLeftRight:after {transform: rotate(-90deg);}

/* 「上ボタン」押下時 */
.pushUp #btnBase {
    top: -1px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 2px rgba(0, 0, 0, 0.19);
}
.pushUp #btnUpDown {
    top: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 2px rgba(90, 90, 90, 0.19);
}
.pushUp #btnLeftRight {
    top: 50px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 2px rgba(90, 90, 90, 0.19);
}
.pushUp #btnCenter {top: 53px; height: 43px;}
.pushUp #btnCenter:before,
.pushUp #btnCenter:after {height: 1px; top: -1px;}

/* 「下」ボタン押下時 */
.pushDown #btnBase{
    top: 1px;
    box-shadow: inset 0 3px 0 rgba(255,255,255,0.5), 0 1px 1px rgba(0, 0, 0, 0.19);
}
.pushDown #btnUpDown {
    top: 6px;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(90, 90, 90, 0.19);
}
.pushDown #btnLeftRight {
    top: 52px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(90, 90, 90, 0.19);
}
.pushDown #btnCenter {top: 56px;}

/* 「左」ボタン押下時 */
.pushLeft #btnBase{
    left: -1px;
    box-shadow: inset -2px 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
}
.pushLeft #btnUpDown {
    left: 50px;
    box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(90, 90, 90, 0.19);
}
.pushLeft #btnLeftRight {
    left: 4px;
    box-shadow: inset -2px 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(90, 90, 90, 0.19);
}
.pushLeft #btnCenter {left: 49px;}

/* 「右」ボタン押下時 */
.pushRight #btnBase{
    left: 1px;
    box-shadow: inset 2px 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
}
.pushRight #btnUpDown {
    left: 52px;
    box-shadow: inset 1px 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(90, 90, 90, 0.19);
}
.pushRight #btnLeftRight {
    left: 6px;
    box-shadow: inset 2px 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(90, 90, 90, 0.19);
}
.pushRight #btnCenter {left: 51px;}

/* 「左上」ボタン押下時 */
.pushLeftUp #btnBase {
    top: -1px;
    left: -1px;
    box-shadow: inset -2px 1px 0 rgba(255,255,255,0.5), 0 3px 2px rgba(0, 0, 0, 0.19);
}
.pushLeftUp #btnUpDown {
    top: 4px;
    left: 50px;
    box-shadow: inset -1px 1px 0 rgba(255, 255, 255, 0.5), 0 3px 2px rgba(90, 90, 90, 0.19);
}
.pushLeftUp #btnLeftRight {
    top: 50px;
    left: 4px;
    box-shadow: inset -2px 1px 0 rgba(255,255,255,0.5), 0 3px 2px rgba(90, 90, 90, 0.19);
}
.pushLeftUp #btnCenter {top: 53px; left: 49px; height: 43px;}
.pushLeftUp #btnCenter:before {top: -1px; height: 1px;}
.pushLeftUp #btnCenter:after {
    width: 3px;
    height: 1px;
    top: -1px;
}

/* 「左下」ボタン押下時 */
.pushLeftDown #btnBase {
    top: 1px;
    left: -1px;
    box-shadow: inset -2px 3px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(0, 0, 0, 0.19);
}
.pushLeftDown #btnUpDown {
    top: 6px;
    left: 50px;
    box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(90, 90, 90, 0.19);
}
.pushLeftDown #btnLeftRight {
    top: 52px;
    left: 4px;
    box-shadow: inset -2px 2px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(90, 90, 90, 0.19);
}
.pushLeftDown #btnCenter {top: 56px; left: 49px;}

/* 「右上」ボタン押下時 */
.pushRightUp #btnBase {
    top: -1px;
    left: 1px;
    box-shadow: inset 2px 1px 0 rgba(255,255,255,0.5), 0 3px 2px rgba(0, 0, 0, 0.19);
}
.pushRightUp #btnUpDown {
    top: 4px;
    left: 52px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5), 0 3px 2px rgba(90, 90, 90, 0.19);
}
.pushRightUp #btnLeftRight {
    top: 50px;
    left: 6px;
    box-shadow: inset 2px 1px 0 rgba(255,255,255,0.5), 0 3px 2px rgba(90, 90, 90, 0.19);
}
.pushRightUp #btnCenter {top: 53px; left: 51px; height: 43px;}
.pushRightUp #btnCenter:before {
    width: 3px;
    height: 1px;
    top: -1px;
}
.pushRightUp #btnCenter:after {height: 1px; top: -1px;}

/* 「右下」ボタン押下時 */
.pushRightDown #btnBase {
    top: 1px;
    left: 1px;
    box-shadow: inset 2px 3px 0 rgba(255,255,255,0.5), 0 1px 1px rgba(0, 0, 0, 0.19);
}
.pushRightDown #btnUpDown {
    top: 6px;
    left: 52px;
    box-shadow: inset 1px 3px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(90, 90, 90, 0.19);
}
.pushRightDown #btnLeftRight {
    top: 52px;
    left: 6px;
    box-shadow: inset 2px 2px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(90, 90, 90, 0.19);
}
.pushRightDown #btnCenter {top: 56px; left: 51px;}

/* アクションボタン */
#actionBtn {
    position: relative;
    width: 148px;
    height: 148px;
    margin: 0;
    z-index: 51;
}
#actionBtn p {
    display: block;
    width: 74px;
    height: 74px;
    margin: 0;
    border-radius: 37px;
    line-height: 74px;
    text-decoration: none;
    font-size: 1.6rem;
    overflow: hidden;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(90, 90, 90, 0.19);
}
#actionBtn .pushButton {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
    border-bottom: none;
    line-height: 72px;
}
#actionBtn #btnA {
    position: absolute;
    top: 0;
    right: 0;
}
#actionBtn #btnA:after {
    content: "A";
    opacity: 0.9;
}
#actionBtn #btnB {
    position: absolute;
    top: 71px; /* bottom:0にすると押下時の影が逆になるため */
    left: 0;
}
#actionBtn #btnB:after {
    content: "B";
    opacity: 0.9;
}

#recTime {
    display: none;
    margin: 0;
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ff0000;
    z-index: 50;
}
#fps {
    display: none;
    width: 80px;
    height: 30px;
    margin: 0 0 5px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    z-index: 50;
}
#txLoading {
    display: block;
    width: 128px;
    height: 16px;
    background: url("../image/tx_loading.png") no-repeat left top;
    padding: 0;
    margin: 0;
    position: absolute;
    top: calc((100% - 128px) / 2);
    left: calc((100% - 128px) / 2);
    z-index: 50;
}
#loading {
    display: block;
    width: 128px;
    height: 16px;
    background: url("../image/sp_loading.png") no-repeat;
    background-size: 128px 208px;
    background-position: 0 0;
    padding: 0;
    margin: 0;
    position: absolute;
    top: calc((100% + 64px) / 2);
    left: calc((100% - 128px) / 2);
    z-index: 50;
}
#azarashiLoading {
    display: block;
    width: 64px;
    height: 64px;
    background: url("../image/sp_loading_azarashi.png") no-repeat;
    background-size: 64px 128px;
    background-position: 0 0;
    padding: 0;
    margin: 0;
    position: absolute;
    top: calc((100% - 64px) / 2);
    left: calc((100% - 224px) / 2);
    z-index: 50;
    animation: azarashi 0.25s step-start infinite;
}
@keyframes azarashi {
    0% {background-position: 0 0;}
    50% {background-position: 0 -64px;}
    100% {background-position: 0 0;}
}
/*******************************************************************************
    Media Queries（画面幅が352px以上）
*******************************************************************************/
@media only screen and (min-width: 352px) {
#gameScreen {
    /* ゲーム画面（横352px）を全表示 */
    width: 352px;
    overflow-x: auto;
}
#sysCanvas, #canvas {
    /* ゲーム画面（横352px）を全表示 */
    left: 0;
}

}
/*******************************************************************************
    Media Queries（画面幅が354px以上）かつ（画面向きが縦）
*******************************************************************************/
@media only screen and (min-width: 354px) and (orientation: portrait) {
#gameScreen {
    /* ゲーム画面枠（左右）を表示 */
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}

}
/*******************************************************************************
    Media Queries（画面高さが639px以下）かつ（画面向きが縦）※ Android（dp360×640) 内 ※ブラウザ表示対策620pxへ
*******************************************************************************/
@media only screen and (max-height: 625px) and (orientation: portrait) {
/* POWER・設定ボタン */
#systemBtn p {
    background-image: none;
    border: none;
    width: 36px;
    box-shadow: none;
}
#systemBtn p span {
    width: 36px;
}
#systemBtn .pushButton {
    background-image: none;
    box-shadow: none;
}
#systemBtn .pushButton span {
    background-position: center center;
}

}
/*******************************************************************************
    Media Queries（画面高さが592px以上）かつ（画面向きが縦）※Android（dp360×640) 上バー分差引
*******************************************************************************/
@media only screen and (min-height: 592px) and (orientation: portrait) {
.android #gameBody {
    padding: 10px 0 0;
}
#gameContainer {
    padding: 0;
}
#gamePad {
    padding: 0 0 25px;
}

}
/*******************************************************************************
    Media Queries（画面高さが640px以上）かつ（画面向きが縦）※Android（dp360×640)  ※ブラウザ表示対策625pxへ
*******************************************************************************/
@media only screen and (min-height: 625px) and (orientation: portrait) {
.android #gameBody {padding: 0;}
#gameBody {
    align-items: center;
}
#gamePad {
    padding: 0 0 65px;
}
#systemBtn {
    position: relative;
    width: calc(100% - 20px);
    top: auto;
    right: auto;
    margin: 0 10px 25px;
}
#function {
    width: 100%;
    justify-content: center;
    position: absolute;
    bottom: 10px;
    left: 0;
    margin: 0;
}
#function #btnSelect {
    margin: 0 5px 0 0;
}
#function #btnStart {
    margin: 0 0 0 5px;
}
#controller {
    margin: 0 10px;
}

}
/*******************************************************************************
    Media Queries（画面高さが667px以上（ステータスバー分20px差引））かつ（画面向きが縦）※iPhone 6・7・8・SE2  
*******************************************************************************/
@media only screen and (min-height: 647px) and (orientation: portrait) {
#gamePad {
    padding: 0 0 75px;
}
#function {
    bottom: 5px;
}

}
/*******************************************************************************
    Media Queries（画面高さが720px以上）かつ（画面向きが縦）※Android ※AQUOS Sense3 Basic  
*******************************************************************************/
@media only screen and (min-height: 720px) and (orientation: portrait) {

}
/*******************************************************************************
    Media Queries（画面高さが812px以上）かつ（画面向きが縦）※iPhone 13 mini/11 Pro/XS/X 
*******************************************************************************/
@media only screen and (min-height: 812px) and (orientation: portrait) {
#gameContainer {
    max-height: 720px;
}

}
/*******************************************************************************
    Media Queries（画面高さが960px以上）かつ（画面向きが縦）※Nexsus7 
*******************************************************************************/
@media only screen and (min-height: 960px) and (orientation: portrait) {
#gameContainer {
    max-height: 920px;
}

}
/*******************************************************************************
    Media Queries（画面幅が336px以上）かつ（画面向きが縦） ※Android 縦（640×360）縦横バーを差引
*******************************************************************************/
@media only screen and (min-width: 336px) and (orientation: portrait) {
    
}
/*******************************************************************************
    Media Queries（画面幅が360px以上）かつ（画面向きが縦）Android 縦
*******************************************************************************/
@media only screen and (min-width: 360px) and (orientation: portrait) {
#gameScreen {
    width: calc(100% - 8px); /* 画面枠8px差引 */
    height: auto;
    background-color: #000;
    border: 4px solid #666;
    border-radius: 2px;
}
#gameScreen:before {
    content: "";
    display: block;
    padding-top: 90.9%; /* 320 / 352 = 0.909 */
}
#sysCanvas, #canvas {
    width: 100%;
    height: 100%;
}
#charImage1 {
    width: 64px;
    height: 64px;
    background-size: 64px 64px;
}
#charImage2 {
    width: 64px;
    height: 64px;
    background-size: 64px 64px;
}
    
}    
/*******************************************************************************
    Media Queries（画面幅が375px以上）かつ（画面向きが縦） ※iPhone8,SE(2020) 縦 
*******************************************************************************/
@media only screen and (min-width: 375px) and (orientation: portrait) {
#gameScreen {
    width: calc(100% - 23px); /* 画面枠8px+余白15px差引 */
}
#gameLogo {
    width: 150px;
    height: 80px;
    background-size: 150px 80px;
}

}
/*******************************************************************************
    Media Queries（画面幅が414px以上）かつ（画面向きが縦）※iPhone8 Plus 縦
*******************************************************************************/
@media only screen and (min-width: 414px) and (orientation: portrait) {
#gameLogo {
    width: 168px; 
    height: 84px;
    background-size: 168px 84px;
}
#charImage1 {
    width: 96px;
    height: 96px;
    background-size: 96px 96px;
}
#charImage2 {
    width: 96px;
    height: 96px;
    background-size: 96px 96px;
}
#function {
    justify-content: space-between;
    width: calc(100% - 240px);
    margin: 0 120px;
}
#function #btnSelect {
    margin: 0;
}
#function #btnStart {
    margin: 0;
}

}
/*******************************************************************************
    Media Queries（画面幅が704px以上）かつ（画面高さが960px以上）かつ（画面向きが縦）
*******************************************************************************/
@media only screen and (min-width: 704px) and (min-height: 960px) and (orientation: portrait) {
#gameBody {
    padding: 20px 0 0;
}
#gameContainer {
    max-height: 960px;
}
#gameLogo {
    width: 240px;
    height: 120px;
    background-size: 240px 120px;
}
/* ゲーム画面サイズを拡大（scale=2） */
#gameScreen {
    width: calc(352px * 2);
    height: calc(320px * 2);
    border: 8px solid #666;
    border-radius: 4px;
    margin: 0 auto 20px;
}
#sysCanvas, #canvas {
    width: calc(352px * 2);
    height: calc(320px * 2);
}
#function {
    width: calc(100% - 240px);
    margin: 0 120px;
    top: 10px;
    bottom: auto;
    left: auto;
}
#controller {
    margin: 0 20px;
}

}
/*******************************************************************************
    以下、デバイス横向き用
*******************************************************************************/
/*******************************************************************************
    Media Queries（画面高さが320px以上）かつ（画面向きが横）
*******************************************************************************/
@media only screen and (min-height: 320px) and (orientation: landscape) {
#gameBody {
    padding: 0;
    align-items: center;
}
.android #gameBody {padding: 0;}

#gameContainer {
    height: auto;
    padding: 0;
}
#gameScreen {
    /* ゲーム画面枠（左右）を表示 */
    border: none;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    margin: 0 auto;
}

}
/*******************************************************************************
    Media Queries（画面高さが322px以上）かつ（画面向きが横）
*******************************************************************************/
@media only screen and (min-height: 322px) and (orientation: landscape) {
#gameScreen {
    /* ゲーム画面枠 */
    border: 1px solid #666;
}

}
/*******************************************************************************
    Media Queries（画面高さが328px以上）かつ（画面向きが横）
*******************************************************************************/
@media only screen and (min-height: 328px) and (orientation: landscape) {
#gameScreen {
    /* ゲーム画面枠 */
    border: 4px solid #666;
    border-radius: 2px;
}

}
/*******************************************************************************
    Media Queries（画面幅が568px以上）かつ（画面高さが320px以上）かつ（画面向きが横）※初代iPhoneSE 横
*******************************************************************************/
@media only screen and (min-width: 568px) and (min-height: 320px) and (orientation: landscape) {
#gamePad {
    position: absolute;
    top: calc((100% - 320px) /2);
    height: 320px;
}
#header {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 5px 0;
    margin: 0 0 10px;
}
#gameLogo {
    width: 96px;
    height: 48px;
    background-size: 96px 48px;
    margin: 0;
}
/* PICOMINIロゴ */
#brandLogo_p {display: none;}
#brandLogo_l {
    display: flex;
    width: 101px;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row-reverse;
    padding: 35px 0 0;
}
#picomini_p {display: none;}
#picomini_l {
    display: block;
    margin: 0;
}
#powerLamp_p {display: none;}
#powerLamp_l {
    display: block;
    margin: 0 1px 0 0;
}
#systemBtn {
    width: 105px;
    top: 5px;
    right: 2px;
}
#charImage{
    /* 画面幅W = 画面高さ100vh - 横縦比率1.1（352/320） */
    /* 画面幅1/2Wpx +調整15px */
    width: calc(50% - (50vh * 1.1 + 0px));
    height: 164px;
    bottom: 40px;
    left: auto;
    right: 0px;
    justify-content: flex-start;
    align-items: flex-start;
}
#charImage1 {
    margin: 0 auto auto 0;
}
#charImage2 {
    margin: auto 0 0 auto;
}
#function {
    margin: 0 25px 20px;
}
#controller {
    margin: 0 5px;
}

}    
/*******************************************************************************
    Media Queries（画面幅が592px以上）かつ（画面高さが335px以上）かつ（画面向きが横）※Android（640×360）縦横バーを差引
*******************************************************************************/
@media only screen and (min-width: 592px) and (min-height: 335px) and (orientation: landscape) {
#header {
    padding: 0 5px;
}
#brandLogo_l {
    width: 110px;
}
#powerLamp_l {
    margin: 0 5px 0 0;
}
#systemBtn {
    width: 110px;
    top: 0px;
    right: 5px;
}
#function {
    margin: 0 35px 25px;
}
#btnCapture, #btnScreenshot {
    bottom: 0px;
}

}
/*******************************************************************************
    Media Queries（画面幅が640px以上）かつ（画面高さが335px以上）かつ（画面向きが横）※Android 横
*******************************************************************************/
@media only screen and (min-width: 640px) and (min-height: 335px) and (orientation: landscape) {
#gameLogo {
    width: 120px;
    height: 60px;
    background-size: 120px 60px;
    margin: 0 0 0 5px;
}
#brandLogo_l {
    width: 120px;
    padding: 40px 0 0;
}
#systemBtn {
    width: 120px;
    top: 0px;
}

}   
/*******************************************************************************
    Media Queries（画面幅が668px以上）かつ（画面高さが360px以上）かつ（画面向きが横）
*******************************************************************************/
@media only screen and (min-width: 688px) and (min-height: 335px) and (orientation: landscape) {
#header {
    width: auto;
    padding: 0;
    /* 画面幅W = 画面高さ100vh - 横縦比率1.1（352/320） */
    /* 画面幅Wpx +ゲームロゴ136×2px +余白20px */
    margin: 0 calc((100% - (100vh * 1.1 + 292px)) / 2) 15px;
}
/* PICOMINIロゴ */
#brandLogo_l {
    width: 130px;
    padding: 45px 0 0;
}
#systemBtn {
    /* 画面幅W = 画面高さ100vh - 横縦比率1.1（352/320） */
    /* 画面幅Wpx +ゲームロゴ120×2px +余白20px */
    right: calc((100% - (100vh * 1.1 + 260px)) / 2);
}
#function {
    /* 画面幅W = 画面高さ100vh - 横縦比率1.1（352/320） */
    /* 画面幅Wpx +SELECT76px +START76px +余白20px */
    margin: 0 calc((100% - (100vh * 1.1 + 172px)) / 2) 25px;
}
#controller {
    /* 画面幅W = 画面高さ100vh - 横縦比率1.1（352/320） */
    /* 画面幅Wpx +十字キー148px +ABボタン148px */
    margin: 0 calc((100% - (100vh * 1.1 + 296px)) / 2);
}
#charImage {
    width: 148px;
    /* 画面幅W = 画面高さ100vh - 横縦比率1.1（352/320） */
    /* 画面幅Wpx +ABボタン148px */
    right: calc(50% - (50vh * 1.1 + 148px));
    bottom: 25px;
}
    
}
/*******************************************************************************
    Media Queries（画面幅が748px以上）かつ（画面高さが360px以上）かつ（画面向きが横）※Android（748 ×360 Xperia AceⅢ）縦横バー差引
*******************************************************************************/
@media only screen and (min-width: 725px) and (min-height: 335px) and (orientation: landscape) {
.android #gameBody {
    padding: 0 10px;
}
#gameLogo {
    width: 136px;
    height: 68px;
    background-size: 136px 68px;
    margin: 0;
}
/* PICOMINIロゴ */
#brandLogo_l {
    width: 130px;
}
#charImage1 {
    width: 64px;
    height: 64px;
    background-size: 64px 64px;
    bottom: 40%;
    right: 12%;
}
#charImage2 {
    width: 64px;
    height: 64px;
    background-size: 64px 64px;
    bottom: 5%;
}

}
/*******************************************************************************
    Media Queries（画面幅が667px以上）かつ（画面高さが375px以上）かつ（画面向きが横）※iPhone8,SE(2020) 
*******************************************************************************/
@media only screen and (min-width: 667px) and (min-height: 375px) and (orientation: landscape) {
#header {
    margin-bottom: 15px;
}
#gameLogo {
    width: 136px;
    height: 68px;
    background-size: 136px 68px;
    margin: 0;
}
/* PICOMINIロゴ */
#brandLogo_l {
    padding: 45px 0 0;
}
#charImage {
    width: 148px;
    right: 0;
    bottom: 25px;
}
#charImage1 {
    width: 64px;
    height: 64px;
    background-size: 64px 64px;
    bottom: 40%;
    right: 12%;
}
#charImage2 {
    width: 64px;
    height: 64px;
    background-size: 64px 64px;
    bottom: 5%;
}
#systemBtn {
    /* 画面幅W = 画面高さ100vh - 横縦比率1.1（352/320） */
    /* 画面幅Wpx +ゲームロゴ120×2px +調整余白-10px */
    right: calc((100% - (100vh * 1.1 + 230px)) / 2);
}
#btnPower,
#btnPower span {
    width: 48px;
}
#function {
    margin-bottom: 20px;
    /*margin: 0 60px 20px;*/
}

}
/*******************************************************************************
    Media Queries（画面幅が736px以上）かつ（画面高さが414px以上）かつ（画面向きが横）※iPhone8 Plus 横
*******************************************************************************/
@media only screen and (min-width: 736px) and (min-height: 414px)  and (orientation: landscape) {
#header {
    padding: 0 10px;
    margin-bottom: 20px;
}
/* PICOMINIロゴ */
#brandLogo_l {
    width: 120px;
}
#systemBtn {
    width: 125px;
    /*right: 20px;*/
    /* 画面幅W = 画面高さ100vh - 横縦比率1.1（352/320） */
    /* 画面幅Wpx +ゲームロゴ125×2px +余白20px */
    right: calc((100% - (100vh * 1.1 + 270px)) / 2);
}
#function {
    margin-bottom: 25px;
}
#controller {
    /* 画面幅W = 画面高さ100vh - 横縦比率1.1（352/320） */
    /* 画面幅Wpx +十字キー148px +ABボタン148px +調整余白-20px */
    margin: 0 calc((100% - (100vh * 1.1 + 276px)) / 2);
}
#footer {
    margin: 0 10px 0 0;
}

}
/*******************************************************************************
    Media Queries（画面幅が756px以上）かつ（画面高さが414px以上）かつ（画面向きが横）※iPhone8 Plus 横より大
*******************************************************************************/
@media only screen and (min-width: 756px) and (min-height: 414px)  and (orientation: landscape) {
#controller {
    /* 画面幅W = 画面高さ100vh - 横縦比率1.1（352/320） */
    /* 画面幅Wpx +十字キー148px +ABボタン148px +調整余白-0px */
    margin: 0 calc((100% - (100vh * 1.1 + 296px)) / 2);
}    

}
/*******************************************************************************
    Media Queries（画面幅が676px以上）かつ（画面高さが368px以上）かつ（画面向きが横）
    ※画面幅 676px = canvas幅352px+左操作幅148px+右操作幅148px+左右余白20px
    ※画面高さ 348px = canvas高さ320px+枠8px+上下余白20px
*******************************************************************************/
@media only screen and (min-width: 676px) and (min-height: 348px) and (orientation: landscape) {
#gameScreen {
    /* 画面高さ100vh - 横縦比率1.1（352/320）- 枠8px余白20px */
    width: calc(100vh * 1.1 - 28px);
    height: auto;
}
#gameScreen:before {
    content: "";
    display: block;
    padding-top: 90.9%; /* 320 / 352 = 0.909 */
}
#sysCanvas, #canvas {
    width: 100%;
    height: 100%;
}
    
}    
/*******************************************************************************
    Media Queries（画面幅が812px以上）かつ（画面高さが375px以上）かつ（画面向きが横）※iPhone 13 mini/11 Pro/XS/X 横
*******************************************************************************/
@media only screen and (min-width: 812px) and (min-height: 375px) and (orientation: landscape) {
#gameBody {
    /* iPhoneX以降のノッチ&ホームバー分のセーフエリア対応 */
    padding-left: calc(env(safe-area-inset-left));
    padding-right: calc(env(safe-area-inset-right));
}
#brandLogo_l {
    width: 130px;
}
#systemBtn {
    width: 130px;
    /* 画面幅W = 画面高さ100vh - 横縦比率1.1（352/320） */
    /* 画面幅Wpx +ゲームロゴ130×2px +調整余白+20px */
    right: calc((100% - (100vh * 1.1 + 280px)) / 2);
}
#charImage {
    width: 148px;
    /* 画面幅W = 画面高さ100vh - 横縦比率1.1（352/320） */
    /* 画面幅Wpx +ABボタン148px */
    right: calc(50% - (50vh * 1.1 + 148px));
    bottom: 25px;
}

}
/*******************************************************************************
    Media Queries（画面幅が1024px以上）かつ（画面高さが680px以上）かつ（画面向きが横）※iPad 横
    ※高さ680px（scale2のコンテンツ横+バーの高さ）
*******************************************************************************/
@media only screen and (min-width: 1024px) and (min-height: 680px) and (orientation: landscape) {
#gameBody {
    padding: 0;
}    
#gameContainer {
    margin: 0;
}
#charImage {
    right: 0;
}
/* ゲーム画面サイズを拡大（scale=2） */
#gameScreen {
    width: calc(352px * 2);
    height: calc(320px * 2);
    border: 8px solid #666;
    border-radius: 4px;
}
#sysCanvas, #canvas {
    width: calc(352px * 2);
    height: calc(320px * 2);
}
#header {
    margin: 0 0 20px;
}
#systemBtn {
    right: 20px;
}
#function {
    margin: 0 65px 25px;
}
#controller {
    margin: 0;
}
/* ボタン設定画面サイズを拡大（scale=2よりやや小さく） */
#gamepadRemappingInner {
    transform: scale(1.9);}
}
/*******************************************************************************
    Media Queries（画面幅が1180px以上）かつ（画面高さが800px以上）かつ（画面向きが横）※iPad Air,Lenovo tab M8 横
*******************************************************************************/
@media only screen and (min-width: 1180px) and (min-height: 800px) and (orientation: landscape) {
#gameContainer {
    margin: 0 calc((100% - (720px + 296px + 60px)) / 2);
}

}    
/*******************************************************************************
    Media Queries ※各ボタンの幅&高さを2倍
    （画面幅が1024px以上）かつ（画面高さが1366px以上）かつ（画面向きが縦）※iPad Pro 縦
    （画面幅が1366px以上）かつ（画面高さが680px以上）かつ（画面向きが横）※iPad Pro 横
*******************************************************************************/
@media only screen and (min-width: 1024px) and (min-height: 1366px) and (orientation: portrait),
only screen and (min-width: 1366px) and (min-height: 680px) and (orientation: landscape) {
#header {
    margin: 0 0 40px;
}
/* ゲームロゴ */
#gameLogo {
    width: 280px;
    height: 140px;
    background-size: 280px 140px;
}
/* PICOMINIロゴ */
#brandLogo_l {
    width: calc(125px * 2);
    padding: 90px 0 0;
}
#picomini_p, 
#picomini_l {
    width: 188px;
    height: 28px;
    background-size: 188px 28px;
}
/* POWERランプ */
#powerLamp_p,
#powerLamp_l {
    width: calc(8px * 2);
    height: calc(8px * 2);
    border-radius: 16px;
}
/* キャラ画像 */
#charImage1 {
    width: 128px;
    height: 128px;
    background-size: 128px 128px;
}
#charImage2 {
    width: 128px;
    height: 128px;
    background-size: 128px 128px;
}
/* キャプチャー（録画）&スクリーンショットボタン */
#btnCapture, #btnScreenshot {
    width: calc(24px * 2);
    height: calc(24px * 2);
    border: 2px solid #666;
    border-radius: 4px;
}
#btnCapture:before, #btnScreenshot:before {
    width: calc(24px * 2);
    height: calc(24px * 2);
    background-size: calc(16px * 2) calc(16px * 2);
}
/* システムボタン */
#systemBtn {
    width: calc(125px * 2);
    height: calc(30px * 2);
    top: 0px;
}
#systemBtn p {
    width: calc(48px * 2);
    height: calc(28px * 2);
    border-radius: calc(8px * 2);
}
#systemBtn p span {
    width: calc(48px * 2);
    height: calc(28px * 2);
}
#systemBtn .pushButton span {
    background-position: center top 10px;
}
/* POWERボタン */
#btnPower span {
    background-size: 32px 32px;
}
/* 設定ボタン */
#btnSetting span {
    background-size: 32px 32px;
}

/* 機能ボタン */
#function {
    height: calc(40px * 2);
    margin: 0 90px 40px;
}
#function p {
    width: calc(74px * 2);
    height: calc(32px * 2);
    line-height: calc(32px * 2);
    font-size: 2.8rem;
}
#function .pushButton {
    line-height: calc(30px * 2);
}
#function #btnSelect {border-radius: 32px 16px 16px 32px;}
#function #btnStart {border-radius: 16px 32px 32px 16px;}

/* コントローラー（方向ボタン&アクションボタン） */
#controller {
    height: calc(150px * 2);
}
/* 方向ボタン */
#directionBtn {
    width: calc(148px * 2);
    height: calc(148px * 2);
}
/* スティックボタン（押下感知用・透明） */
#btnStick {
    width: calc(148px * 2);
    height: calc(148px * 2);
    border-radius: calc(74px * 2);
}
/* 方向ボタン（ベースデザイン） */
#btnBase {
    width: calc(146px * 2);
    height: calc(146px * 2);
    border-radius: calc(73px * 2);
}
/*  方向中央 */
#btnCenter {
    width: calc(50px * 2);
    height: calc(42px * 2);
    /*top: calc(55px * 2);*/
    top: 108px;
    left: calc(50px * 2);
}
#btnCenter:before,
#btnCenter:after {
    width: 2px;
    height: 2px;
}
#btnCenter:before {
    top: -4px;
    left: -2px;
}
#btnCenter:after {
    top: calc(-2px * 2);
    right: calc(1px * 2);
}
/*（〇）*/
#btnCenter span {
    width: calc(50px * 2);
    height: calc(42px * 2);
}
#btnCenter span:after {
    width: calc(18px * 2);
    height: calc(18px * 2);
    background-size: 36px 36px;
    font-size: 3.8rem;
    top: calc(9px * 2);
    left: calc(15px * 2);
}
/* 「上&下」ボタン */
#btnUpDown {
    width: calc(44px * 2);
    height: calc(134px * 2);
    top: calc(5px * 2);
    left: calc(51px * 2);
    border-radius: calc(8px * 2);
}
#btnUpDown:before,
#btnUpDown:after,
#btnLeftRight:before,
#btnLeftRight:after {
    font-size: 3.9rem;
}
#btnUpDown:before {
    top: calc(6px * 2);
    left: calc(12px * 2);
}
#btnUpDown:after {
    bottom: calc(6px * 2);
    left: calc(12px * 2);
}
#btnLeftRight:before {
    top: calc(12px * 2);
    left: calc(5px * 2);
}
#btnLeftRight:after {
    top: calc(12px * 2);
    Right: calc(5px * 2);
}
/* 「左&右」ボタン */
#btnLeftRight {
    width: calc(134px * 2);
    height: calc(44px * 2);
    top: calc(51px * 2);
    left: calc(5px * 2);
    border-radius: calc(8px * 2);
}
/* 「上ボタン」押下時 */
.pushUp #btnBase {
    top: calc(-1px * 2);
}
.pushUp #btnUpDown {
    top: calc(4px * 2);
}
.pushUp #btnLeftRight {
    top: calc(50px * 2);
}
.pushUp #btnCenter {
    height: 83px;
    top: 104px; height: calc(43px * 2);
}
.pushUp #btnCenter:before,
.pushUp #btnCenter:after {display: none;}
.pushUp #btnCenter span:after {
    top: 20px;
}

/* 「下」ボタン押下時 */
.pushDown #btnBase{
    top: calc(1px * 2);
}
.pushDown #btnUpDown {
    top: calc(6px * 2);
}
.pushDown #btnLeftRight {
    top: calc(52px * 2);
}
.pushDown #btnCenter {top: 110px;}

/* 「左」ボタン押下時 */
.pushLeft #btnBase{
    left: calc(-1px * 2);
}
.pushLeft #btnUpDown {
    left: calc(50px * 2);
}
.pushLeft #btnLeftRight {
    left: calc(4px * 2);
}
.pushLeft #btnCenter {
    height: 86px;
    top: 106px;
    left: calc(49px * 2);
}
.pushLeft #btnCenter:before {display: none;}
.pushLeft #btnCenter:after {
    top: -2px;
    right: 6px;
}
.pushLeft #btnCenter span:after {
    top: 20px;
}
/* 「右」ボタン押下時 */
.pushRight #btnBase{
    left: calc(1px * 2);
}
.pushRight #btnUpDown {
    left: calc(52px * 2);
}
.pushRight #btnLeftRight {
    left: calc(6px * 2);
}
.pushRight #btnCenter {
    height: 86px;
    top: 106px;
    left: calc(51px * 2);
}
.pushRight #btnCenter:before {
    top: -2px;
    left: 2px;
}
.pushRight #btnCenter:after {display: none;}
.pushRight #btnCenter span:after {
    top: 20px;
}

/* 「左上」ボタン押下時 */
.pushLeftUp #btnBase {
    top: calc(-1px * 2);
    left: calc(-1px * 2);
}
.pushLeftUp #btnUpDown {
    top: calc(4px * 2);
    left: calc(50px * 2);
}
.pushLeftUp #btnLeftRight {
    top: calc(50px * 2);
    left: calc(4px * 2);
}
.pushLeftUp #btnCenter {top: 104px; left: calc(49px * 2); height: calc(43px * 2);}
.pushLeftUp #btnCenter:before {
    display: none;
    top: calc(-1px * 2); height: calc(1px * 2);
}
.pushLeftUp #btnCenter:after {
    width: calc(3px * 2);
    height: 1px;
    top: calc(-1px * 2);
    right: 3px;
}

/* 「左下」ボタン押下時 */
.pushLeftDown #btnBase {
    top: calc(1px * 2);
    left: calc(-1px * 2);
}
.pushLeftDown #btnUpDown {
    top: calc(6px * 2);
    left: calc(50px * 2);
}
.pushLeftDown #btnLeftRight {
    top: calc(52px * 2);
    left: calc(4px * 2);
}
.pushLeftDown #btnCenter {
    height: 85px;
    top: 109px;
    left: calc(49px * 2);
}
.pushLeftDown #btnCenter:before {display: none;}
.pushLeftDown #btnCenter:after {top: -3px;}
.pushLeftDown #btnCenter span:after {
    top: 19px;
}

/* 「右上」ボタン押下時 */
.pushRightUp #btnBase {
    top: calc(-1px * 2);
    left: calc(1px * 2);
}
.pushRightUp #btnUpDown {
    top: calc(4px * 2);
    left: calc(52px * 2);
}
.pushRightUp #btnLeftRight {
    top: calc(50px * 2);
    left: calc(6px * 2);
}
.pushRightUp #btnCenter {
    top: 104px;
    left: calc(51px * 2);
    height: calc(43px * 2);
}
.pushRightUp #btnCenter:before {
    width: 5px;
    height: 1px;
    top: -2px;
    left: 0px;
}
.pushRightUp #btnCenter:after {height: calc(1px * 2); top: calc(-1px * 2);}

/* 「右下」ボタン押下時 */
.pushRightDown #btnBase {
    top: calc(1px * 2);
    left: calc(1px * 2);
}
.pushRightDown #btnUpDown {
    top: calc(6px * 2);
    left: calc(52px * 2);
}
.pushRightDown #btnLeftRight {
    top: calc(52px * 2);
    left: calc(6px * 2);
}
.pushRightDown #btnCenter {
    height: 85px;
    top: 109px;
    left: calc(51px * 2);
}
.pushRightDown #btnCenter:before {top: -3px;}
.pushRightDown #btnCenter:after {display: none;}
.pushRightDown #btnCenter span:after {
    top: 19px;
}

/* アクションボタン */
#actionBtn {
    width: calc(148px * 2);
    height: calc(148px * 2);
}
#actionBtn p {
    width: calc(74px * 2);
    height: calc(74px * 2);
    border-radius: calc(37px * 2);
    line-height: calc(74px * 2);
    font-size: 3.2rem;
}
#actionBtn #btnB {
    top: calc(71px * 2);
}
#actionBtn .pushButton {
    line-height: calc(72px * 2);
}
#loading {
    width: calc(128px * 2);
    height: calc(16px * 2);
    background-size: 256px 416px;
    top: calc((100% + 128px) / 2);
    left: calc((100% - 256px) / 2);
}
#txLoading {
    width: calc(128px * 2);
    height: calc(16px * 2);
    background-size: 256px 32px;
    top: calc((100% - 256px) / 2);
    left: calc((100% - 256px) / 2);
}
#azarashiLoading {
    width: calc(64px * 2);
    height: calc(64px * 2);
    background-size: 128px 256px;
    top: calc((100% - 128px) / 2);
    left: calc((100% - 416px) / 2);
    animation: azarashi 0.25s step-start infinite;
}
@keyframes azarashi {
    0% {background-position: 0 0;}
    50% {background-position: 0 -128px;}
    100% {background-position: 0 0;}
}

}
/*******************************************************************************
    Media Queries（画面幅が1024px以上）かつ（画面高さが1366px以上）かつ（画面向きが縦）※iPad Pro 縦
*******************************************************************************/
@media only screen and (min-width: 1024px) and (min-height: 1366px) and (orientation: portrait) {
#gameContainer {
    max-height: 1300px;
}
#brandLogo_p {
    left: calc((100% - 188px) / 2);
}
#systemBtn {
    width: calc(100% - 120px);
    margin: 0 60px 120px;
    top: 0;
}
#function {
    width: calc(100% - 320px);
    margin: 0 160px;
    top: 80px;
}

}
/*******************************************************************************
    Media Queries（画面幅が1366px以上）かつ（画面高さが680px以上）かつ（画面向きが横）※iPad Pro 横
*******************************************************************************/
@media only screen and (min-width: 1366px) and (min-height: 680px) and (orientation: landscape) {
#gameContainer {
    margin: 0 calc((100% - (720px + 560px + 60px)) / 2);
}
#gamePad {
    height: 640px;
    top: calc((100% - 640px) /2);
}
#powerLamp_l {
    margin: 0 10px 0 0;
}
/* キャラ画像 */
#charImage {
    width: 296px;
    height: 336px;
}

}    
/*******************************************************************************
    Media Queries（ブラウザ表示の場合）
*******************************************************************************/
@media only screen and (display-mode: Browser) {
#gameBody {
    padding: 10px 0 0;
    align-items: start;
}

}
/*******************************************************************************
    Media Queries（画面向きが縦）かつ（ブラウザ表示）  
*******************************************************************************/
@media only screen and (orientation: portrait) and (display-mode: Browser) {
#gameContainer {
    max-height: calc(100svh - 10px); /* iOSは15.4以降 */
}
    
}
/*******************************************************************************
    Media Queries（画面向きが横）かつ（ブラウザ表示） 
*******************************************************************************/
@media only screen and (orientation: landscape) and (display-mode: Browser) {
#gameBody {
    align-items: center;
}
.android #gameBody {
    align-items: start;
}
    
}
/*******************************************************************************
    Media Queries（画面高さが300px以上）かつ（画面向きが横）かつ（ブラウザ表示）※ブラウザ表示対策のため558pxへ  
*******************************************************************************/
@media only screen and (min-height: 300px) and (orientation: landscape) and (display-mode: Browser) {

}