/* ＜基礎土台＞ページ設定 ------------------------------------------- */ /* マージン・パディング [上][右][下][左] */ @charset "utf-8"; *{ margin: 0; padding: 0; } html{ height: 100%; } body{ /* [L0]最下層 背景色変更可 */ -webkit-text-size-adjust:100%; /* 文字サイズ固定 */ -webkit-user-select:none; /* テキスト選択を無効化 */ -webkit-touch-callout:none; /* 長押しメニューを無効化 */ text-size-adjust:100%; user-select:none; touch-callout:none; margin:0; padding:0; width:100%; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro,sans-serif; font-size:100%; color:#fff; background-color:darkgreen; } /* ＜親要素＞構成枠設定 センタリング自動 ------------------------ */ .container{ /* 画面枠組み コンテンツ運用枠 */ top:50%; left:50%; transform:translate(-50%, -50%); width:100%; max-width:800px; min-width:256px; aspect-ratio: 320/480; /* wh比:2/3 */ position: absolute; container-type: inline-size; padding:0; line-height: normal; background-color:transparent; z-index:0; } /* ＜表示：横長＞ＰＣ窓（幅 > 高さ） */ @media(min-aspect-ratio:3/4){ .container{ width: 320px; }} /* PC */ /* ＜表示：縦長＞スマホ（高さ > 幅）フォントサイズ調整 （枠組み：スマホベース）*/ @media(max-aspect-ratio:3/4) and (min-width: 256px){ .container{ width: 90%; font-size:100%; }} /* スマホ */ @media(max-aspect-ratio:3/4) and (min-width: 390px){ .container{ width: 90%; font-size:120%; }} /* スマホ */ @media(max-aspect-ratio:3/4) and (min-width: 700px){ .container{ width: 85%; font-size:180%; }} /* タブレット */ @media(max-aspect-ratio:3/4) and (min-width: 800px){ .container{ width: 85%; font-size:220%; }} /* タブレット */ /* ＜子要素＞ブロック単位 コンテンツ --------------------------- */ div[ class*="layer" ]{ width:100%; margin:0; top:0; left:0; padding:0; position:absolute; background-color:none; } /* [L1](上)演出背景画像(下)タップ入力タイル */ div.layer1{ height:100%; background-color:transparent; z-index: 1; } /* [L2]半透明フィルター(枠) */ div.layer2{ height:calc(7/15*100%); z-index: 2; } /* [L20]ABC３パネル(枠) */ div.layer20{ height:calc(7/15*100%); z-index:20; } /* [L30]ナナセグ(枠) */ div.layer30{ height:calc(7/15*100%); z-index:30; } /* [L35]回転抽選Ｂ(枠) */ div.layer35{ height:calc(7/15*100%); z-index:35; } /* [L40]回転抽選Ａ(枠) */ div.layer40{ height:calc(7/15*100%); z-index:40; } /* [L50]バード示唆(枠) */ div.layer50{ height:calc(7/15*100%); z-index:50; } /* [L60]回転抽選確率表示(枠) */ div.layer60{ height:100%; z-index:60; } /* [L70]選択キャスト(枠) */ div.layer70{ height:calc(7/15*100%); z-index:70; } /* [L80]獲得通知画像(枠) */ div.layer80{ height:calc(7/15*100%); z-index:80; } /* [L90]ゲーム説明・画像(枠) */ div.layer90{ height:calc(7/15*100%); z-index:90; } /* [L95]ゲーム説明・テキストメッセージ(枠) */ div.layer95{ height:calc(7/15*100%); z-index:95; } /* [L100]スコアボード */ div.layer100{ height:auto; z-index:100; } /* [L110]滞在モード */ div.layer110{ height:auto; z-index:110; } /* [L115]ミニパネル２　カウンタ ー */ div.layer115{ height:auto; top: 8%; z-index:115; } /* [L120]ミニパネル１　回転抽選Ａ */ div.layer120{ height:auto; top: 8%; opacity:0.6; z-index:120; } /* [L125]小窓確率表示 */ div.layer125{ height:auto; top:40%; z-index:150; } /* [L130]小役履歴 */ div.layer130{ height:auto; top:38%; z-index:130; } /* [L200](最上層)説明画面など */ div.layer200{ height:100%; z-index:200; } /* [L1000](最上層)説明画面など */ div.layer1000{ height:100%; z-index:1000; } /* コンテンツ レイヤー下位 センタリング自動 ------------- */ div[ class*="event-" ]{ /* イベント共通設定 */ top:50%; left:50%; transform:translate(-50%, -50%); position:absolute; margin:0; padding:0; background-color: transparent; color: #fff; } /* L20 ABC３パネル */ div.event-3panel{ width: 90%; } /* L30 ナナセグ */ div.event-7seg{ width:50%; padding:24px; border-radius:0.5em; background-color:black; } /* L35 / L40 回転抽選 */ div.event-rotate{ width: 90%; } /* L50 バード示唆 */ div.event-bird{ width: 20%; } /* L60 回転抽選確率通知 */ div.event-notice60{ width:90%;padding:2px;top:60%;border-radius:0.5em; background-color:black; } /* L60 通知内枠 */ .notice60{ padding:9px; border-radius: 0.5em; border: solid 3px #fff; background-color: black; text-align:center; line-height: 132%; color: #fff; } /* L70 選択キャスト */ div.event-cast{ width: 40%; } /* L80 獲得通知 */ div.event-notice{ width:85%; padding:15px 24px; border-radius:0.5em; background-color:black; } /* L90 ゲーム説明・画像 */ div.event-img{ width: 55%; } /* L95 / L1000 ゲーム説明・テキストメッセージ */ div.event-text{ width:90%; padding:9px 5px; border-radius: 0.5em; border: solid 3px #fff; background-color: rgba(0,0,0,0.7); line-height: 132%; color: #fff; } /* L125 選択抽選確率通知 */ div.event-notice125{ width:90%;padding:9px 5px; border-radius: 0.5em; border: solid 3px #fff; background-color: black; text-align:center; line-height: 132%; color: #fff; } /* プレイ画面 フレーム 大枠 ----------------------------- */ div.block-frame{ margin:0; display: block; background-color: transparent; line-height 0; /* 行間を削除 */ } div.flex-frame{ /* 子要素を柔軟に左寄せで並べられる */ margin:0; display:flex; flex-wrap:wrap; justify-content:flex-start; background-color: transparent; line-height:0; /* 行間を削除 */ } div.flex-frame-right{ /* 子要素を柔軟に右寄せで並べられる */ margin:0; display:flex; flex-wrap:wrap; justify-content:flex-end; background-color: transparent; line-height:0; /* 行間を削除 */ } /* プレイ画面 フレーム 下位分割 ------------------------- */ div[ class*="size-" ]{ margin:0; padding:0; background-color:none; } div.size-001{ width: 1%; } /* 1/100 */ div.size-002{ width: 2%; } /* 1/50 */ div.size-004{ width: 4%; } /* 1/25 */ div.size-005{ width: 5%; } /* 1/20 */ div.size-008{ width: 8%; } /* 1/12.5 */ div.size-010{ width: 10%; } /* 1/10 */ div.size-020{ width: 20%; } /* 1/5 */ div.size-025{ width: 25%; } /* 1/4 */ div.size-030{ width: 30%; } /* 3/10 */ div.size-040{ width: 40%; } /* 2/5 */ div.size-045{ width: 45%; } /* 9/20 */ div.size-050{ width: 50%; } /* 1/2 */ div.size-100{ width:100%; } /* 1/1 */ /* コンテンツ 下位 --------------------------------- */ img { display:block; margin:0; width:100%; height:auto; } /* 画像は必ず親要素の横幅にフィットし、比率を保ったまま綺麗に表示 */ span.aqua{ color: Aqua; } span.yellow{ color: Yellow; } span.green{ color: Lime; } span.red{ color: Tomato; } span.pink{ color: HotPink; } span.brown{ color: Chocolate; } span.large{ font-size: 1.3em; } span.max-large{ font-size: 1.5em; }