@charset "UTF-8";

/* 陰はあっち */
/* 角丸はこっち */

/* ============================================ */
/* z-indexはいまこうなってる                    */
/* -------------------------------------------- */
	/* -2147483647から2147483647 */
	/* ヘッダ		7000 */
	/* ドロワー		8000 */
	/* 拡大画面の黒	9000 */
	/* 拡大画面		9001 */
/* ============================================ */

/* ============================================ */
/* PCとモバイルとで表示を切り替えるもの         */
/* -------------------------------------------- */
.switch_pc { display: none !important; }
.switch_mobile { display: block !important; }

/* ============================================ */
/* フォント関係                                 */
/* サイズと位置修飾系以外はbasisのほうへ        */
/* -------------------------------------------- */
/* htmlに指定した値が1remになる */
html{
	font-size:16px; /*最初は単なる絶対値指定でやってた */
	font-size: 6.25%;/* 16pxに6.25%を掛けると1pxになるよ！ */
	font-size: 50%;/* 16pxに6.25%を掛けると1pxになるよ！ */
	font-size: calc(16vw / 800);	/*相対化してみようと思ったが、うまくいかんようだ */
	font-size: 100%;	/*これだと主要ブラウザで16pxだそうだ*/

}
/* bodyだけは、クロムのバグに対応するためにemを使用する */
body {
	font-size:1em;
}
/* -------------------------------------------- */
/* 本文 */
.myFrame{
	line-height:1.5;
	font-size: 22px;	/* PC版では16に 1.5em;*/
	font-size:1.75rem;
	font-size:1rem;
}
/* -------------------------------------------- */
/* ヘッダー関連 */
h2{
	font-size: 28px;	/* PC版では20に 1.5em;*/
	font-size:1.75rem;
	font-size:0.9rem;
}
h3{
    font-size: 1.2em;	/* webkitが勝手にやってる */
	font-size: 28px;	/* PC版では20に 1.5em;*/
	font-size:1rem;

}
/* -------------------------------------------- */
/* ボタン表面の文字 */
.btn_0 p, .btn_1 p{
	font-size:28px;	/*PC版では24pxに戻して 2.5em;*/
	font-size:0.8rem;
	line-height: 120%;
	white-space: nowrap;
}
/* ナビゲーションドロワーのはちょっとでかいんで とおもったがタブレットだと小さすぎ*/
header .btn_1 p{
	font-size:0.5rem;
	font-size:0.8rem;
}
/* -------------------------------------------- */
/* コンテンツカード関連 */
/* newとかの添え字 */
.card_content .soeji{
	font-size:20px;
	font-size:0.7rem;
}
/* タイトル */
.card_content .title{
	font-size:26px;		/*ＰＣ版では22に戻して;*/
	font-size:0.7rem;
	line-height:1.7;	/*数字で書くと倍数 1.5*/
}
.card_content .media{
	font-size:22px;	/*PC版では18pxに*/
	font-size:0.6rem;
}
.card_content .genre{
	font-size:22px;	/*PC版では18pxに*/
	font-size:0.6rem;
}
/* -------------------------------------------- */
/* コンテンツカード関連2 */
/* タイトル */
.dangumi2 .card_content .title{
	font-size:26px;		/*ＰＣ版では22に戻して;*/
	font-size:0.9rem;
	line-height:1.7;	/*数字で書くと倍数 1.5*/
}
.dangumi2 .card_content .commentary{
	font-size:0.7rem;
}
/* -------------------------------------------- */
/* フッター */
footer > aside{
	font-size:1vw;	/* vwでも指定できるなぁ でも挙動はヘン */
}
footer > section > div h2{
	font-size:0.65em;
	font-size:0.4rem;
	font-size:0.7rem;	/*0.6が最小かもiphone*/
	line-height:1.5;	/*数字だと倍率*/
}
footer > section > div{
	font-size:0.65em;
	font-size:0.7rem;	/*0.6が最小かもiphone*/
	line-height:1.5;	/*数字だと倍率*/
}
/* -------------------------------------------- */
/* ○○さんとリンクしました系 */
.linkList{
	font-size:0.5rem;
	font-size:0.8rem;
}
/* ○○を受賞しました */
.reward{
	font-size:0.5rem;
	font-size:0.8rem;
}
/* ============================================ */
/* 汎用品                                       */
/* 下に書いた物の方が優先されるので、ここに書く */
/* -------------------------------------------- */
.btn_0 p, .btn_1 p{
	position: absolute;
	margin:0;
	padding:0;
	width:90%;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	text-align:center;
/*	background:#ff0000;*/
}
/*	ボタン。幅や配置については、下で上書きして調節せい */
.btn_0{
	box-shadow: 5px 5px 12px rgba(0,0,0,0.3);
	box-shadow: 0.625vw 0.625vw 1.5vw rgba(0,0,0,0.3);
	border-radius: 6px;
	border-radius: 0.75vw;
	height:80px;
	height:10vw;
}
.btn_1{
	box-shadow: 5px 5px 12px rgba(0,0,0,1.0);
	box-shadow: 0.625vw 0.625vw 1.5vw rgba(0,0,0,0.3);
	border-radius: 12px;
	border-radius: 1.5vw;
	height:80px;
	height:10vw;
}
/* ヘッダ */
/* 通常の黒枠ヘッダ */
h2{
/*	height:calc(56vw / 8); あえて指定せず２行に対応 */
	overflow:hidden;
	line-height:1.4rem;	/* ボタンの高さ */
	width:65%;
	padding:0.2rem 0.5rem;	/*上下　左右*/
	border-radius:calc(10vw / 8);
	text-align:center;
	margin:auto;
	margin-bottom:1rem;
}
/*	商品紹介ページのキャッチフレーズ */
.catchphrase{
	width:82%;

}
/* 通常の黒文字ヘッダ */
h3{
	width:80%;
/*	height:calc(56vw / 8); あえて指定せず２行に対応 */
	line-height:1.5rem;
	padding:0;
	text-align:left;
	margin:0 auto 0.2rem auto;　	/*上　右　下　左 */
}
/*	セクション2 */
section{
	margin:0;
	padding:0;
	width:100%;
/*	background:#ff00ff;*/
}
/* セクション3 */
section > section{
	margin:0;
	padding:0;
	width:100%;
/*	background:#ffff00;	*/
}
.myFrame{
	margin:auto;
	margin-bottom:40px;
	margin-bottom:5vw;
	margin-bottom:2rem;
	width:85%;
	width:90%;
	padding:16px 10px 16px 20px;	/*上　右　下　左 */
	padding:2vw 1.25vw 2vw 2.5vw;	/*上　右　下　左 */
	border-radius: 8px;;
	border-radius: 1vw;;
}
/* -------------------------------------------- */
/* スペーサ類 */
.spacer_16{
	margin:0;
	padding:0;
	height:calc(16vw / 8);
/*	background:#FF0000;*/
}
.spacer_32{
	margin:0;
	padding:0;
	height:calc(32vw / 8);
/*	background:#FF0000;*/
}
.spacer_64{
	margin:0;
	padding:0;
	height:calc(64vw / 8);
/*	background:#FF0000;*/
}
/* -------------------------------------------- */
/* youtube ユーチューブ */
iframe{
	display:block;	/*これやらない場合にはdivで囲んでtext-align:center */
	width:80vw;
	height:calc(80vw * 0.75);	/* 16:9動画なら*0.5625になる*/
	margin:auto;
	margin-bottom:8vw;
}
/* ============================================ */
/* ヘッダー                                     */
/* デジメスとナビゲーションドロワーはここに入る */
/* -------------------------------------------- */
/* ヘッダ部分の全体。headerタグ                 */
header {
	position: fixed;            /* ヘッダーの固定 */
	width:100%;
	font-size:0;	/* 中のインラインブロック要素の隙間を消すため */
	z-index: 9990;	/*これを忘れてたんだよアホ！！ 数字がでかいほど手前。9*/
	z-index: 7000;	/*これを忘れてたんだよアホ！！ 数字がでかいほど手前。値はいちばん上にまとめる9*/
	box-shadow: 0px 4px 20px rgba(0,0,0,0.6);	/* アルファだけ少数で最大1 */
	box-shadow: 0px 2px 10px rgba(0,0,0,0.6);	/* アルファだけ少数で最大1 */
	box-shadow: 0px 0.5vw 2.5vw rgba(0,0,0,0.6);	/* アルファだけ少数で最大1 */
}
header:before{
  content:'';
  display:block;
	padding-bottom:12%;	/*96の場合*/
	padding-bottom:13%;	/*104の場合*/
}
#container_head{
	position:absolute;
	top:0;
	width:100%;
	height:100%;
/*	background:#ffff00;*/
}
/* -------------------------------------------- */
/* ヘッダーの３つ割                             */
#container_head>.left{
	display:inline-block;
	vertical-align: top;	/*毒消し*/
	width:11%;
	width:10%;	/* 80/800 */
	height:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
	border-bottom: solid 2px #000000;
	background:#ff0000;
	background:none;
}
#container_head>.center{
	display:inline-block;
	vertical-align: top;	/*毒消し*/
	width:73%;
	width:74%;	/* 592/800 */
	height:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
	border-bottom: solid 2px #000000;
/*	background:#ffff00;*/
}
#container_head>.right{
	display:inline-block;
	vertical-align: top;	/*毒消し*/
	width:16%;	/* 128/800 */
	height:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
	border-bottom: solid 4px #000000;
/*	background:#ff00ff;*/
}
/* ============================================ */
/* エンブレム                                   */
/* 箱の中に画像を直接置いてある */
/* -------------------------------------------- */
#container_head>.left>img{
	width:63.6%;
	width:calc(56vw / 8);
	object-fit: contain;	/*これで縦横比が整合するようだ*/
	margin-top:calc(24vw / 8);
	margin-left:calc(16vw / 8);
}
/* ============================================ */
/* デジメス                                     */
/* -------------------------------------------- */
/* アニメコンテナに直接指定してみよう */
#anim_container_digimes{
	width:calc(584vw / 8);
	height:calc(72vw / 8);
	margin-left;0;
	margin-top:calc(16vw / 8);
	background:#ffff00;
	background:none;
}


/* ============================================ */
/* ナビゲーションドロワー                       */
/* -------------------------------------------- */
/* たぶん無意味な階層 ナビゲーションドロワーdiv 絵面はラベルボタンの方につけます*/
#navigationDrawer {
/*	display: inline-block;/*inline-blockにします*/*/
	margin:0;
	padding:0;
	margin-left: auto;
	width:100%;	/* 128px; これだと、広い画面で問題が出る*/
	height:100%;
	font-size:0;	/* 中のインラインブロック要素の隙間を消すため */
}
/* -------------------------------------------- */
/* 非表示にするクラス */
.ndHide {
	display:none;
}
/* -------------------------------------------- */
/* ラベル：ハンバーガーアイコンボタン */
#ndLabelOpen {
	display: block;
	width:100%;
	height:100%;
	background: #2F2F2F;
	border-left: solid 1px #000000;
	box-sizing:border-box;
	cursor: pointer;
	text-align:center;
}
/* -------------------------------------------- */
/*ハンバーガーアイコンをCSSだけで表現*/
/* CSSの疑似要素beforeとafterに、それぞれ絵面をつけ、span本体とあわせて３つの四角にする */
/* absoluteで配置するためには、その親要素がrelativeでないといけないというクソ仕様 */
/* よってネストする */
#ndLabelOpen div{
	position:relative;
	width:100%;
	height:100%;
}
#ndLabelOpen span, #ndLabelOpen span:before, #ndLabelOpen span:after {
	position: absolute;
	content: '';
	display: block;
	width: 50px;/*長さ*/
	height:8px;/*線の太さ*/
	width: 6.2vw;/*長さ*/
	height:1vw;/*線の太さ*/
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	border-radius: 3px; 
	border-radius: 0.375vw;
	background: #30F080;
	background: #64f0a8;	/*サイドを堕とした*/
}
#ndLabelOpen span:before {
	-ms-transform: translate(-50%,180%);
	-webkit-transform : translate(-50%,180%);
	transform : translate(-50%,180%);
}
#ndLabelOpen span:after {
	-ms-transform: translate(-50%,-280%);
	-webkit-transform : translate(-50%,-280%);
	transform : translate(-50%,-280%);
}
/* -------------------------------------------- */
/*閉じる用の薄黒カバー*/
/* これを押したら閉じる理由は、こいつがinputのlabelだからか。*/
#ndLabelCloseShade {
	display: none; 
	position: fixed;
	z-index: 9998;
	z-index: 8000;/*最前面に*/
	top: 0;/*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background: #30F080;
	background: #64f0a8;	/*サイドを堕とした*/
	opacity: 0;
	transition: .3s ease-in-out;
}
/* -------------------------------------------- */
/* メインのチェックボックスにチェックが入ったときの薄黒カバーの挙動 */
/*チェックが入ったらもろもろ表示*/
#ndCheckBox:checked ~ #ndLabelCloseShade {
  display: block;/*カバーを表示*/
  opacity: .5;
}
/* -------------------------------------------- */
/* ナビゲーションドロワー本体 */
#nav-content {
	display: block;
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;/*最前面に*/
	z-index: 9000;/*最前面に*/
	width: 40%;/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 40%;/*最大幅（調整してください）*/
	height: 100%;
	background: #2F2F2F;	/*#202020;*/
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(250%);	/* これ、自分の幅の50パーセントって意味なんだろうクソ仕様 */
	transform: translateX(250%);/*左に隠しておく こっちが反映されるのかねぇ*/
}
/* -------------------------------------------- */
/* メインのチェックボックスにチェックが入ったときのメニュー本体の挙動 */
#ndCheckBox:checked ~ #nav-content {
  -webkit-transform: translateX(150%);
  transform: translateX(150%);/*中身を表示（右へスライド）*/
  box-shadow: -6px 0 25px rgba(0,0,0,.15);
  box-shadow: -0.75vw 0 3.125vw rgba(0,0,0,.15);
}
/* -------------------------------------------- */
/* ラベル：ドロワーにつけるクローズボタン */
#ndLabelCloseBtn {
	display: block;
	width:40vw;
	height: 13vw;
	margin-left: auto;
	background: #2F2F2F;
	border-bottom: solid 2px #000000;
	border-left: solid 1px #000000;
  -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
	cursor: pointer;
	text-align:right;
	box-shadow: 0px 2px 20px rgba(0,0,0,0.6);	/* アルファだけ少数で最大1 */
	box-shadow: 0px 0.25vw 2.5vw rgba(0,0,0,0.8);	/* アルファだけ少数で最大1 */
}
/* -------------------------------------------- */
/*	クローズボタンに描くバッテン　ハンバーガーと同じ仕組み */
#ndLabelCloseBtn div{
	position:relative;
	width:100%;
	height:100%;
}
#ndLabelCloseBtn span{
	position: absolute;
	content: '';
	display: block;
    /* 大きさの設定(全体ではなく、線1本の大きさ) */
	width: 60px;
    height: 12px;
	width: 7.5vw;
    height: 1.5vw;
    /* 色の設定 */
    background-color: #30F080;
    background-color: #64f0a8;	/*サイドを堕とした*/
	/* 位置調整 */
  //  margin: 30px auto;
	top: 45%;
	//left: 70%;
	right:12%;
	/* 45度回転 */
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: translate(-50%,-50%),rotate(45deg);
	border-radius: 3px;
	border-radius: 0.375vw;
}
#ndLabelCloseBtn span:after{
	/* :afterをblockとして表示する */
	content: "";
    display: block;
	/* 大きさの設定(親要素=#batsuと全く同じ) */
    width: 100%;
    height: 100%;
	/* 色の設定(親要素と同じ) */
    background-color: inherit;
    /* まわす */
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	border-radius: 3px;
	border-radius: 0.375vw;
}
/* -------------------------------------------- */
/* ドロワーに載っけるナビボタン */
#nav-content .btn_1{
	position:relative;
	margin:0 16 0 32;	/*上　右　下　左 */
	margin:0 calc(16vw / 8) 0 calc(32vw / 8);	/*上　右　下　左 */
}

/* -------------------------------------------- */
/* ソーシャルメディア関連 */
#nav-content .social_area{
	position:relative;
	margin:0 16 0 32;	/*上　右　下　左 */
	margin:0 calc(16vw / 8) 0 calc(32vw / 8);	/*上　右　下　左 */
	background:#ff0000;
	background:none;
}
.social_area .btn_0{
	width:30%;
}
.social_area .btn_0 p{
	position:relative;
	font-size:1.7rem;
	color:#55acee;
}

/* ============================================ */
/* メインコンテンツ                             */
/* ゲームカードの段組とか                       */
/* -------------------------------------------- */
/*	メインコンテンツ */
#main{
	width:100%;
	margin-top:calc(40vw / 8);
	margin:0;					/*上　右　下　左 */
}
/* -------------------------------------------- */
/* ヘッダの陰に隠れる部分のスペーサ             */
#spacer_header{
	display:block;
	width:100%;
	height:calc(104vw / 8);
}
/* フッタの陰に隠れる部分のスペーサ             */
/* 高さは、フッタに設定した高さと整合するように */
#spacer_footer{
	width:100%;
	height:calc(330vw / 8);
	height:calc(500vw / 8);
}
/* ============================================ */
/* メインを横３つのカラムに分ける               */
/* -------------------------------------------- */
#column_left{
	display:none;
}
#column_center{
}
#column_right{
	display:none;
}
/* ============================================ */
/* 段組１：スマホ２段ＰＣ３段                   */
/* -------------------------------------------- */
.dangumi{
	width:98%;
	margin: auto;	/* 普通のブロック要素はマージンで中央寄せる */
/*	background:#00ff00;*/
}
/*	奇数の段 */
.dangumi .dan:nth-child(2n+1) {
	float:left;
	width:50%;
	height:232px;
	height:29vw;
/*	background:#0000ff;*/
	text-align:center;
}
/*	偶数の段 */
.dangumi .dan:nth-child(2n) {
/*	position:relative;*/	/*でないと下をセンタリングできない これやるとむちゃくちゃになる*/
	height:232px;
	height:29vw;
/*	background:#ffff00;*/
	text-align:center;
}
/* 偶数段に疑似要素をつけて回り込みを解除 */
.dangumi .dan:nth-child(2n):after {
   content: "";
   clear: both;
   display: block;
}
/* 最後の段はフロートさせない */
.dangumi .dan:last-child{
	float:none;
}
/* 最後の要素に疑似要素をつけて回り込みを解除 */
.dangumi .dan:last-child:after {
   content: "";
   clear: both;
   display: block;
}
/* -------------------------------------------- */
/* コンテンツカード */
.card_content{
	display:inline-block;
	position:static;
	width:45vw;
	height:24vw;
	box-shadow: 0.625vw 0.625vw 1.5vw rgba(0,0,0,0.3);
	border-radius: 0.75vw;
	text-align:left;	/*これで下位の要素を制御する*/
	line-height:0;	/*これがないと下位の要素の隙間がずれる*/
}
/* 画像をカード上に絶対値指定するためのラッパー */
.card_content .iconWrapper_smartphone,
.card_content .iconWrapper_arcade,
.card_content .iconWrapper_cellphone,
.card_content .iconWrapper_laptop,
.card_content .iconWrapper_desktop{
	display:inline-block;
	position:relative;
	vertical-align:top; /*ずれなくなるおまじない！！！*/
	width:18vw;
	height:20vw;
	margin-left:1vw;
	margin-top:2vw;
/*	background:#ffff00;*/
}
/* 機体の画像 */
.dangumi .card_content .kyoutai{
	width:100%;
	height:100%;
}
/*	画面の画像*/
.iconWrapper_smartphone .kyoutai_screen{
	display:inline-block;
	position:absolute;
	width:  8vw;
	height:12vw;
	left:   5vw;
	top:    4vw;
}
/*	画面の画像*/
.iconWrapper_arcade .kyoutai_screen{
	overflow:hidden;
	display:inline-block;
	position:absolute;
	width: calc(88vw / 8);
	height:calc(66vw / 8);
	left:  calc(27vw / 8);
	top:   calc(28vw / 8);
}
/*	画面の画像*/
.iconWrapper_cellphone .kyoutai_screen{
	overflow:hidden;
	display:inline-block;
	position:absolute;
	width: calc(60vw / 8);
	height:calc(60vw / 8);
	left:  calc(42vw / 8);
	top:   calc(33vw / 8);
}
/*	画面の画像*/
.iconWrapper_laptop .kyoutai_screen{
	overflow:hidden;
	display:inline-block;
	position:absolute;
	width: calc(100vw / 8);
	height:calc( 75vw / 8);
	left:  calc( 22vw / 8);
	top:   calc( 50vw / 8);
}
/*	画面の画像*/
.iconWrapper_desktop .kyoutai_screen{
	overflow:hidden;
	display:inline-block;
	position:absolute;
	width: calc(80vw / 8);
	height:calc(60vw / 8);
	left:  calc(10vw / 8);
	top:   calc(61vw / 8);
}
/* newとかの添え字 */
.card_content .soeji{
	position:absolute;
	top: -10px;
	top: -1.25vw;
	left: 0;
	width:8rem;
}
/* ゲームタイトル */
.card_content .title{
	display:inline-block;
	vertical-align:top; /*ずれなくなるおまじない！！！*/
	margin:0;
	padding:0;
	width:192px;
	height:92px;
	margin-left:152px;
	margin-top:-160px;

	width:24vw;
	height:11.5vw;
	margin-left:19vw;
	margin-top:-20vw;

	text-align:center;
	overlap:hidden;
/*	background:#00FF00; */
}
.card_content .media{
	display:inline-block;
	vertical-align:top; /*ずれなくなるおまじない！！！*/
	margin:0;
	padding:0;
	width:calc(192vw / 8);
	height:calc(32vw / 8);
	margin-top:calc(-68vw / 8);
	margin-left:calc(152vw / 8);
	line-height: calc(32vw / 8);	/*領域の高さに*/
	text-align:center;
/*	background:#00FFFF; */
}
.card_content .genre{
	display:inline-block;
	vertical-align:top; /*ずれなくなるおまじない！！！*/
	margin:0;
	padding:0;
	width:calc(192vw / 8);
	height:calc(32vw / 8);
	margin-left:calc(152vw / 8);
	margin-top:calc(-36vw / 8);
	text-align:center;
	line-height: calc(32vw / 8);	/*領域の高さ*/
/*	background:#00FF00; */
}
/* -------------------------------------------- */
/* コンテンツカード おすすめシリーズ用 */
#osusume{
	height:29vw;
}
#osusume .card_content{
	position:relative;
	width:40vw;
	height:28vw;
	text-align:center;
	vertical-align:center;
}
#osusume .card_content img{
	position:absolute;
	height:90%;
	object-fit: contain;
/*　中央揃え */
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
/* ============================================ */
/* 段組２：スマホ１段ＰＣ２段                   */
/* これは単に垂直に並べるだけ                   */
/* -------------------------------------------- */
.dangumi2{
	width:100%;
	margin: auto;	/* 普通のブロック要素はマージンで中央寄せる */
}
/*	段 */
.dangumi2 .dan {
	display:block;
	position:relative;
	width:100%;
	height:200px;
	height:25vw;
}
/* -------------------------------------------- */
/* コンテンツカード横長 */
.dangumi2 .dan .card_content{
	display:block;
	position:relative;
	margin:auto;
	width:calc(752vw / 8);
	height:calc(160vw / 8);

	box-shadow: 5px 5px 12px rgba(0,0,0,0.3);
	border-radius: 6px;

	box-shadow: 0.625vw 0.625vw 1.5vw rgba(0,0,0,0.3);
	border-radius: 0.75vw;

	text-align:left;	/*これで下位の要素を制御する*/
	line-height:0;	/*これがないと下位の要素の隙間がずれる*/
}
/* 文字とかと並べるためのイメージのラッパー */
.dangumi2 .dan .card_content .iconWrapper_square{	/* カード上に絶対値指定するためのラッパー */
	display:inline-block;
	position:relative;
	vertical-align:top; /*ずれなくなるおまじない！！！*/
	width: calc(128vw / 8);
	height:calc(128vw / 8);
	margin-left:calc(16vw / 8);
	margin-top: calc(16vw / 8);
	background:#ff0000;
	background:none;
}
/* 画像:スマホ用の正方形アイコンとか。筐体画像とか*/
/* 正方形じゃないやつは、フィッティングされる */
.dangumi2 .dan .card_content img{
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	object-fit: contain;
}
/* newとかの添え字 */
.dangumi2 .dan .card_content .soeji{
	position:absolute;
	top: 1vw;
	left: 1vw;
}


/* 画像をカード上に絶対値指定するためのラッパー*/
/* 段組2向けに、縦128に縮小、および、全体の形状を正方形にする */
/* 修正部分以外は、上の段組１向けのやつを継承 */
.dangumi2 .card_content .iconWrapper_smartphone,
.dangumi2 .card_content .iconWrapper_arcade,
.dangumi2 .card_content .iconWrapper_cellphone,
.dangumi2 .card_content .iconWrapper_laptop,
.dangumi2 .card_content .iconWrapper_desktop{
	display:inline-block;
	width:calc( 128vw / 8);
	height:calc(128vw / 8);
	margin-left:calc(16vw / 8);
	margin-top:calc( 16vw / 8);
	background:#ff0000;
	background:none;
}
/*	画面の画像*/
.dangumi2 .card_content .iconWrapper_smartphone .kyoutai_screen{
	width: calc( 64vw * 128 / 160 / 8);
	height:calc( 96vw * 128 / 160 / 8);
	left:  calc( 48vw * 128 / 160 / 8);
	top:   calc( 32vw * 128 / 160 / 8);
}
.dangumi2 .card_content .iconWrapper_arcade .kyoutai_screen{
	width: calc( 88vw * 128 / 160 / 8);
	height:calc( 66vw * 128 / 160 / 8);
	left:  calc( 36vw * 128 / 160 / 8);
	top:   calc( 27vw * 128 / 160 / 8);
}
.dangumi2 .card_content .iconWrapper_cellphone .kyoutai_screen{
	width: calc( 60vw * 128 / 160 / 8);
	height:calc( 60vw * 128 / 160 / 8);
	left:  calc( 50vw * 128 / 160 / 8);
	top:   calc( 33vw * 128 / 160 / 8);
}
.dangumi2 .card_content .iconWrapper_laptop .kyoutai_screen{
	width: calc(100vw * 128 / 160 / 8);
	height:calc( 75vw * 128 / 160 / 8);
	left:  calc( 30vw * 128 / 160 / 8);
	top:   calc( 50vw * 128 / 160 / 8);
}
.dangumi2 .card_content .iconWrapper_desktop .kyoutai_screen{
	width: calc( 80vw * 128 / 160 / 8);
	height:calc( 60vw * 128 / 160 / 8);
	left:  calc( 18vw * 128 / 160 / 8);
	top:   calc( 61vw * 128 / 160 / 8);
}
.dangumi2 .dan .card_content .title{
	display:inline-block;
	vertical-align:top; /*ずれなくなるおまじない！！！*/
	margin:0;
	padding:0;
	width:calc(568vw / 8);
	height:calc(48vw / 8);
	line-height: calc(48vw / 8);	/*領域の高さに*/
	margin-left:calc(168vw / 8);
	margin-left:calc(176vw / 8);
	margin-top:calc(-144vw / 8);
	margin-top:calc(-128vw / 8);
	text-align:left;
	background:#00FF00;
	background:none;
}
.dangumi2 .dan .card_content .commentary{
	display:inline-block;
	vertical-align:top; /*ずれなくなるおまじない！！！*/
	margin:0;
	padding:0;
	width:calc(568vw / 8);
	height:calc(70vw / 8);
	margin-left:calc(176vw / 8);
	margin-left:calc(184vw / 8);
	margin-top:calc(-102vw / 8);
	margin-top:calc(-90vw / 8);
	margin-top:calc(-74vw / 8);
	line-height: calc(35vw / 8);	/*領域の高さに*/
	text-align:left;
	background:#00FFFF;
	background:none;
}
/* ============================================ */
/* 段組３：スマホ１段ＰＣ３段                   */
/* -------------------------------------------- */
.dangumi3{
	width:100%;
	margin: auto;	/* 普通のブロック要素はマージンで中央寄せる */
}
/*	段 */
.dangumi3 .dan {
	display:block;
	position:relative;
	width:100%;
	height:200px;
	height:25vw;
}
/* -------------------------------------------- */
/* コンテンツカード */
.dangumi3 .dan .card_content{
	line-height:0;	/*これがないと下位の要素の隙間がずれる*/
	width:82%;
	height:calc(180vw / 8);
	border-radius: 1.5vw;
	box-shadow: 0.625vw 0.625vw 1.5vw rgba(0,0,0,0.3);
	display:block;
	position:relative;
	margin:auto;
	text-align:left;	/*これで下位の要素を制御する*/
}
/* 文言 */
.dangumi3 .dan .card_content>div{
	display:inline-block;
	vertical-align:top;
	line-height:2rem;
	margin-top:1%;
	margin-left:4%;
    font-weight: bold;	/* webkitが勝手にやってる */
	font-size:1rem;
	background:#ffff00;
	background:none;
}
/* マーク */
.dangumi3 .dan .card_content span{
	font-size:1.5rem;
    font-weight: normal;
	margin-right:0.5rem;
	background:#ff0000;
	background:none;
}

/* バッジ */
.dangumi3 .dan .card_content>img{
	display:block;
	position: absolute;
	top: 100%;
	left: 100%;
}
.dangumi3 .dan:first-child img{
	height:65%;
	-ms-transform: translate(-102%,-100%);
	-webkit-transform : translate(-102%,-100%);
	transform : translate(-102%,-100%);
}
.dangumi3 .dan:nth-child(2) img{
	height:48%;
	-ms-transform: translate(-110%,-110%);
	-webkit-transform : translate(-110%,-110%);
	transform : translate(-110%,-120%);
}
.dangumi3 .dan:nth-child(3) img{
	height:46%;
	-ms-transform: translate(-105%,-120%);
	-webkit-transform : translate(-105%,-120%);
	transform : translate(-105%,-120%);
}
/* ============================================ */
/* 段組４：スマホ１段ＰＣ１段                   */
/* -------------------------------------------- */
.dangumi4{
	width:100%;
	margin: auto;	/* 普通のブロック要素はマージンで中央寄せる */
}
.dangumi4 .dan {
	display:block;
	position:relative;

	width:99%;
	height:30vw;
}
/* -------------------------------------------- */
/* コンテンツカード */
.dangumi4 .dan .card_content{
	line-height:0;	/*これがないと下位の要素の隙間がずれる*/
	width:100%;
	height:90%;
	border-radius: 1.5vw;
	box-shadow: 0.625vw 0.625vw 1.5vw rgba(0,0,0,0.3);
	display:block;
	position:relative;
	margin:auto;
	text-align:left;	/*これで下位の要素を制御する*/
}
.dangumi4 .dan .card_content div:first-child{
	display:block;
	position:absolute;
	width:40%;
	height:100%;
	margin-left:0;
	margin-top:0;
	background:#ff0000;
	background:none;
}
.dangumi4 .dan .card_content div:nth-child(2){
	display:block;
	position:absolute;
	width:60%;
	height:100%;
	margin-left:40%;
	margin-top:0;
	background:#0000ff;
	background:none;
}
.dangumi4 img{
	width:100%;
	margin-top:2rem;
	object-fit: contain;	/*これで縦横比が整合するようだ なくてもいけてる*/
}
.dangumi4 .title{
	display:inline-block;
	vertical-align:top; /*ずれなくなるおまじない！！！*/
	margin:0;
	margin-left:5%;
	width:95%;
	height:1rem;
	margin-top:0;
	text-align:left;
	background:#00FF00;
	background:none;
}
.dangumi4 .commentary{
	display:inline-block;
	vertical-align:top; /*ずれなくなるおまじない！！！*/
	margin:0;
	margin-left:3%;
	margin-top:3%;
	text-align:left;
	background:#ffff00;
	background:none;
	font-size:0.8rem;
	line-height:1.2;	/*数字だと倍率*/
}
/* ============================================ */
/*	下端のサブナビゲーション                    */
/* -------------------------------------------- */
#subnavi{
	width:98%;
	margin: auto;	/* 普通のブロック要素はマージンで中央寄せる */
/*	height:600px;*/
/*	background:#00ff00;*/
}
/* 奇数の段 */
#subnavi .dan_subnavi:nth-child(2n+1){
	float:left;
	width:50%;
	height:calc(112vw / 8);
/*	background:#0000ff;*/
	text-align:center;
}
/* 偶数の段 */
#subnavi .dan_subnavi:nth-child(2n){
/*	position:relative;*/	/*でないと下をセンタリングできない これやるとむちゃくちゃになる*/
	height:calc(112vw / 8);
/*	background:#ffff00;*/
	text-align:center;
}
/* 偶数段に疑似要素をつけて回り込みを解除 */
#subnavi .dan_subnavi:nth-child(2n):after{
   content: "";
   clear: both;
   display: block;
}
/* 最後の段はフロートさせない */
#subnavi .dan_subnavi:last-child{
	float:none;
}
/* 最後の段に疑似要素をつけて回り込みを解除 */
#subnavi .dan_subnavi:last-child:after{
   content: "";
   clear: both;
   display: block;
}
#subnavi .btn_0{
	display:inline-block;
	position:relative;	/*文字をabsoluteで中央に寄せるため*/
	width:calc(360vw / 8);
}
/* ソーシャルメディア関連 */
#subnavi .social_area{
	display:inline-block;
	width:calc(360vw / 8);
	text-align:left;
}
#subnavi .social_area .btn_0{
	display:inline-block;
	position:relative;	/*文字をabsoluteで中央に寄せるため*/
	width:calc(80vw / 8);
}
#subnavi .social_area .btn_0 p{
	font-size:1.5rem;
	color:#55acee;
}
/* ============================================ */
/* フッター                                     */
/* -------------------------------------------- */
/* フッタを下に吸着させるために全体をrelativeで包む */
#container_adjustFoot{
position: relative;.
width: 100%;
height: auto !important;
height: 100%;
min-height: 100%;
}
/* -------------------------------------------- */
/* フッタ全体の高さは、下のasideとdivの高さの和に */
/* なおかつ、上の方のスペーサspacer_footerに同じ値を入れて */
footer{
	position: absolute;
	bottom: 0;
	height:calc(330vw / 8);
	height:calc(500vw / 8);
/*	background:#ff0000; */
}
footer > aside{
	width:auto;
	height:calc(30vw / 8);
	margin:0;
	padding:0 calc(50vw / 8);
	text-align:right;
/*	background:#FCFCFB;*/
}
footer > section > div h2{
	width:auto;
	height:auto;
	margin:0;
	padding-left:0;
	padding-bottom:5px;
	padding-bottom:calc(5vw / 8);
	text-align:left;
	background:#C2C2BE;
}
footer > section > div{
	bottom:0;
	width:auto;
	height:calc(300vw / 8);
	height:calc(470vw / 8);
	margin-bottom:0;
	margin:0;
	padding:10px 30px;
	padding:calc(10vw / 8) calc(30vw / 8);
	text-align:left;
	background:#C2C2BE;
	overflow:hidden;
}
/* ============================================ */

/* ============================================ */
/* へなへなシリーズで作った汎用品               */
/* -------------------------------------------- */
/* 更新履歴のテーブル */
#updates{
	margin-left:-5%;
	width:105%;
	border-spacing:0.5rem;
	font-size:0.9rem;
}
#updates tr{
	line-height:1.5rem;
}
#updates td:nth-child(3n+1){
	width:25%;
	text-align:right;
	background:lightblue;
	background:none;
}
#updates td:nth-child(3n+2){
	width:11%;
	text-align:right;
	background:yellow;
	background:none;
}
#updates td:nth-child(3n+3){
	text-align:left;
	margin-left;20rem;
	background:lightgreen;
	background:none;
}
/* ============================================ */

/* ============================================ */
/* 会社案内のところで作った汎用品               */
/* -------------------------------------------- */
/* テキストリンクの丸ボタン的修飾 */
.textLink_A{
	display:inline-block;
	border-radius: 1rem;
	border-radius: 0.5rem;
	margin-top:0.5rem;
	padding:0.2rem 1rem;
	box-shadow: 0.3vw 0.3vw 0.8vw rgba(0,0,0,0.3);
}
.textLink_B{
	display:inline-block;
	border-radius: 1rem;
	border-radius: 0.5rem;
	margin-top:0.5rem;
	margin-right:0.2rem;
	padding:0.05rem 0.5rem;
	box-shadow: 0.2vw 0.2vw 0.5vw rgba(0,0,0,0.3);
}
/* -------------------------------------------- */
/* メッセンジャー風画面 */
.messenger{
	width:90%;
	margin:auto;
}
.yose_hidari{
	text-align:left;
}
.yose_migi{
	text-align:right;
	line-height:8rem;
}
.fukidashi_L{
	display:inline-block;
	padding:0.3rem 1rem;
	font-size:0.9rem;
	line-height:1.5rem;
	border-radius: 1rem;
	line-height:2rem;
	max-width:80%;
}
.fukidashi_R{
	margin-top:1rem;
	display:inline-block;
	padding:0.3rem 1rem;
	font-size:0.9rem;
	line-height:1.5rem;
	border-radius: 1rem;
	max-width:90%;
/*	border : solid 0.2vw #50b090; */
}
/* ============================================ */
/* 会社案内のところのテーブル                   */
/* モバイルとPCとで調整が必要。                 */
/* -------------------------------------------- */
/* 会社概要のところのテーブル */
#kaishagaiyou{

}
#kaishagaiyou tr{
	line-height:1.5rem;
}
#kaishagaiyou td{
	padding:0.3rem;
}

#kaishagaiyou td:nth-child(2n-1){
	color:#666666;
	padding-right:1rem;
	width:30%;
	text-align:right;
}
/* -------------------------------------------- */
/* 代表者略歴のところのテーブル1 */
#umedamasateru{

	margin-bottom:1.5rem;
}
#umedamasateru tr{
	line-height:1.5rem;
}
#umedamasateru th{
	text-align:left;
	margin-left;5%;
}
#umedamasateru td:nth-child(2n+1){
	width:30%;
	background:blue;
	background:none;
}
/* 代表者略歴のところのテーブル2 */
#sakuhinrireki{
/*	margin-left:8%; */
}
#sakuhinrireki tr{
	line-height:1.5rem;
}
#sakuhinrireki th{
	text-align:left;
	margin-left;5%;
}

#sakuhinrireki td:nth-child(3n+1){
	width:20%;
	background:blue;
	background:none;
}
#sakuhinrireki td:nth-child(3n+2){
	width:40%;
	background:blue;
	background:none;
}
/* -------------------------------------------- */
/* 連絡先のところのテーブル1 */
#renrakusaki{
	margin:auto;
	margin-top:1rem;
}
#renrakusaki tr{
	line-height:1.5rem;
}
#renrakusaki td:nth-child(2n+1){
	padding-right:1rem;
	text-align:right;
	background:blue;
	background:none;
}
/* ============================================ */

/* ============================================ */
/* モーダルウインドウ関連                       */
/* -------------------------------------------- */

/* 黒と並列すると、下になっちゃうので、黒の子要素にする */
.half_black img{
/*	display:block;　これダメ */
	margin-top: 5vh;
	width:90vw;
	object-fit: contain;	/*これで縦横比が整合するようだ*/
}

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

/* ============================================ */
/* スライダー関連                               */
/* -------------------------------------------- */
/* 個々のスライド項目 */
.slide {
	width: 30%;
}
/* ============================================ */



/* ============================================ */
/* 広告関連                                     */
/* -------------------------------------------- */
/* PCでは切るので、隙間はこいつが作らんとな */
#ad_center{
	margin-bottom:3rem;
}