@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap');
@import url('icon.css');

/*======================
 BASE
=======================*/
html{
height: 100%; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
font-size: 62.5%; /*-- ベースのフォントサイズを10pxに指定 各要素のフォントサイズ指定はremで --*/
}

body{
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
font-family: 'RocknRoll One', sans-serif;
font-size: 1.2em; /*-- bodyのフォントサイズを12pxに指定 --*/
display: flex; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
flex-direction: column; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
height: 100%; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
-webkit-text-size-adjust: 100%;
color: #444;
}

header, footer {
flex: 0 0 auto; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
}

.contents {
flex: 1 0 auto; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
}


/*======================
 COMMON
=======================*/
/*
 CLEARFIX
-----------------------*/
.clearfix:after {
content: "";
display: block;
clear: both;
}

/*
 ポップアップ表示の背景
---------------------------*/
.modal {
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 100;
display: none;
}


/*======================
 FOOTER
=======================*/
footer {
width: 100%;
font-size: 1.1rem;
text-align: center;
background: #F4F4F4;
padding: 20px 0 20px 0;
}


/*======================
 HEADER
=======================*/
header {
width: 100%;
height: 60px;
background: rgba(97, 193, 205, .8);
text-align: center;
color: #FFF;
position: relative;
}

header h1 {
line-height: 60px;
}

/*
 LOGO
-----------------------*/
.logo {
font-size: 1.4rem;
display: inline-block;
position: relative;
}

.logo:after {
font-family: 'mollkyno';
font-size: 2.6em;
content: "\e906";
position: absolute;
top: -13px; right: 0;
}


/*======================
 CONTENTS COMMON
=======================*/
.contents {
width: 100%;
}

/*
 BACKGROUND
-----------------------*/
.contents::before {
content: "";
display: block;
position: fixed;
top: 0; left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background: url(../img/img_bg01.png) repeat;
opacity: .2;
}

/*
 ARTICLE
-----------------------*/
.article {
width: 100%;
}

.article > .inner {
width: 94%;
margin: 0 auto 0;
padding: 30px 0 100px 0;
}

.page_lead {
font-size: 1.4rem;
line-height: 1.6em;
text-align: center;
margin: 30px 0 0;
}

.page_lead span {
color: #87CBBE;
}

/*
 テキストリンク
-----------------------*/
a {
text-decoration: none;
color: #61C1CD;
}

a:link,
a:visited {
text-decoration: none;
color: #61C1CD;
}

a:hover,
a:active {
text-decoration: none;
color: #61C1CD;
}

/*
 TITLE
-----------------------*/
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}

.page_ttl {
text-align: center;
}

.page_ttl > .ttl {
font-size: 2.0rem;
}

/*
 TEXT
-----------------------*/
.txt {
line-height: 1.4em;
}

.caption {
line-height: 1.6em;
display: none;
margin-left: 18px;
}

/*
 NOTES
-----------------------*/
.notes {
font-size: 1.2rem;
line-height: 1.4em;
margin: 8px 0 0;
padding-left: 1em;
text-indent: -1em;
}

.notes:before {
content: "※";
}

.notes.last {
margin: 30px 0 0;
}

/*
 BUTTONS
-----------------------*/
.page_links {
text-align: center;
width: 200px;
margin: 0 auto 0;
}

.page_links .item {
display: block;
cursor: pointer;
}

.page_links .item a {
display: block;
color: inherit;
width: 100%;
height: 100%;
border-radius: inherit;
text-decoration: none;
}

.btn_submit {
font-size: 1.8rem;
color: #FFF;
height: 60px;
line-height: 56px;
background: #F09DA7;
border-radius: 30px;
border-bottom: solid 3px #e37a87;
margin: 40px 0 0;
}

.btn_submit:link,
.btn_submit:visited {
background: #F8AFB8;
border-bottom: none;
transform: translateY(3px);
}

.btn_submit:hover,
.btn_submit:active {
background: #F8AFB8;
border-bottom: none;
transform: translateY(3px);
}

.btn_submit input {
font-size: 1.8rem;
width: 100%;
height: 100%;
display: block;
border-radius: inherit;
}

.btn_link {
font-size: 1.4rem;
color: #61C1CD;
height: 40px;
line-height: 36px;
background: #FFF;
border-radius: 20px;
margin: 10px 0 0;
border: solid 1px #61C1CD;
}

.btn_link:link,
.btn_link:visited {
opacity: .6;
}

.btn_link:hover,
.btn_link:active {
opacity: .6;
}

.btn_link:first-child {
margin: 30px 0 0;
}

.btn_action {
font-size: 1.4rem;
color: #FFF;
display: inline-block;
height: 40px;
line-height: 36px;
margin: 10px 0 0;
padding: 0 10px;
background: #B5B7B6;
border-radius: 10px;
cursor: pointer;
}

.btn_action:link,
.btn_action:visited,
.btn_action:hover,
.btn_action:active {
background: #B5B7B6;
}


/*======================
 TOP PAGE
=======================*/
.logo_box {
text-align: center;
}

.top_logo {
color: #61C1CD;
display: inline-block;
font-size: 2.6rem;
margin: 60px auto 0;
position: relative;
}

.top_logo:after {
font-family: 'mollkyno';
font-size: 2.6em;
content: "\e906";
position: absolute;
font-weight: normal;
top: -0.65em; right: 0;
}


/*======================
 RULES
=======================*/
.point {
max-width: 400px;
width: 94%;
margin: 20px auto 0;
border: solid 4px #EEE;
border-radius: 8px;
padding: 16px 20px;
background: #FFF;
}

.point .ttl {
font-size: 1.6rem;
text-align: center;
color: #87CBBE;
}

.point_list {
margin: 16px 0 0;
}

.point_list .item {
font-size: 1.4rem;
line-height: 1.4em;
padding-left: 1em;
margin: 10px 0 0;
position: relative;
}

.point_list .item:first-child {
margin: 0 0 0;
}

.point_list .item i {
font-size: 1.6em;
color: #87CBBE;
position: absolute;
top: 50%; left: -10px;
transform: translateY(-50%);
}

.rules {
width: 94%;
margin: 20px auto 0;
}

.rules .lead {
font-size: 1.3rem;
line-height: 1.6em;
}

.rule_list {
margin-top: 30px;
}

.rule_list li {
font-size: 1.6rem;
color: #87CBBE;
}

.rule_list li ul li {
font-size: 1.3rem;
color: #444;
line-height: 1.4em;
position: relative;
padding-left: 14px;
margin-top: 8px;
}

.rule_list li ul li:before {
content: "";
display: inline-block;
background: #87CBBE;
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
top: 6px; left: 2px;
}


/*======================
 TOOLS
=======================*/
.tools {
width: 100%;
margin: 30px auto 0;
}

.tools > .item {
width: 100%;
margin: 40px 0 0 0;
}

.tools .item_name {
font-size: 1.4rem;
font-weight: bold;
color: #87CBBE;
text-align: center;
}

.tools .item_img {
width: 50%;
width: 50%;
padding-top: 50%;
background: #F2F2F2;
position: relative;
border-radius: 50%;
margin: 10px auto 0 auto;
}

.tools .item_img svg {
width: 100%;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}

.tools .item_dtl {
line-height: 1.4em;
width: 60%;
margin: 10px auto 0;
}


/*======================
 SETTING
=======================*/
/*
 行入れ替えの説明
-----------------------*/
.caption {
margin: 20px 0 0 14px;
}

.caption i {
color: #61C1CD;
margin-right: 4px;
}

/*
 設定用テーブル
-----------------------*/
.table_setup {
max-width: 640px;
width: 100%;
margin: 47px 0 0;
border-radius: 10px;
background: #F8EBD1;
overflow: hidden;
}

.table_setup th {
font-size: 1.1rem;
line-height: 1.3em;
vertical-align: middle;
padding: 8px 0;
}

.table_setup td {
font-size: 1.6rem;
line-height: 1.4em;
text-align: center;
vertical-align: middle;
}

.table_setup thead tr {
border-bottom: solid 1px #FFF;
}

.table_setup tbody tr {
border-bottom: solid 1px #FFF;
background: #F8EBD1;
}

.table_setup tbody tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}

.table_setup tbody tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}

.table_setup tbody .team_order {
width: 60px;
}

.table_setup tbody .team_name {
line-height: 1.3em;
padding: 14px 0;
text-align: left;
}

.table_setup tbody .btn_remove {
width: 40px;
}

.table_setup tbody .team_name input[type="text"] {
width: 90%;
}

.table_setup tbody .team_name input[type="text"]:focus {
border-bottom: 1px solid #E5086B;
}

/*
 チーム追加ボタン
-----------------------*/
#btn_add_team i {
font-size: 1.8rem;
margin-right: 4px;
vertical-align: middle;
}

#btn_add_team.disable {
background: #F2F2F2;
}

/*
 チーム削除ボタン
-----------------------*/
#team_table .btn_remove i {
font-size: 2.4rem;
color: #AAA;
opacity: 0.2;
}


/*======================
 SCORE
=======================*/
/*
 現在のゲーム・ターンの表示
-----------------------*/
.current_game {
font-size: 2.2rem;
text-align: center;
}

.current_game span {
font-size: 3.2rem;
color: #87CBBE;
margin-right: .1em;
vertical-align: bottom;
}

.current_turn {
text-align: center;
}

.current_turn div {
font-size: 1.6rem;
display: inline-block;
height: 40px;
line-height: 38px;
background: #FFF;
border: solid 1px #C9BB9E;
border-radius: 30px;
margin: 10px auto 0;
text-align: center;
padding: 0 30px 0;
}

.current_turn div span {
font-size: 2.4rem;
color: #87CBBE;
margin-left: .2em;
vertical-align: bottom;
}

/*
 スコア表示用テーブル
-----------------------*/
.howto_txt {
font-size: 1.1rem;
line-height: 1.3em;
margin: 40px 0 0;
}

.howto_txt i {
color: #61C1CD;
font-size: 2.0rem;
margin-right: 2px;
vertical-align: middle;
}

.view_table {
max-width: 640px;
width: 100%;
margin: 8px 0 0;
border-radius: 10px;
background: #F8EBD1;
}

.view_table th,
.view_table td {
text-align: center;
vertical-align: middle;
}

.view_table thead tr {
border-bottom: solid 1px #FFF;
}

.view_table thead th {
font-size: 1.2rem;
line-height: 1.2em;
padding: 10px 0;
}

.view_table thead th.total_point {
font-size: 1.0rem;
position: relative;
}

.view_table tbody tr {
border-bottom: solid 1px #FFF;
}

.view_table tbody tr:last-child {
border-bottom: none;
}

.view_table tbody .team_name {
font-size: 1.4rem;
line-height: 1.4em;
text-align: left;
padding: 10px 0 10px 12px;
}

.view_table tbody .turn_point {
color: #61C1CD;
width: 66px;
font-size: 2.8rem;
line-height: 1.4em;
padding: 8px 0 8px;
}

.btn_input {
font-size: 2.8rem;
color: #61C1CD;
display: inline-block;
background: #FFF;
width: 50px;
height: 50px;
line-height: 46px;
border-bottom: solid 2px #C9BB9E;
border-radius: 25px;
cursor: pointer;
}

.btn_input:hover {
border-bottom: 0;
transform: translateY(3px);
}

.view_table tbody .miss_count {
width: 14px;
padding: 10px 5px 10px 0;
}

.view_table tbody .miss_count span {
font-size: 1.4rem;
color: #DDD;
display: block;
line-height: 1.3em;
}

.view_table tbody .miss_count span.counted {
color: #F09DA7;
}

.view_table tbody .game_point {
width: 56px;
font-size: 2.6rem;
line-height: 1.4em;
padding: 10px 0 10px;
}

.view_table tbody .total_point {
width: 50px;
font-size: 1.6rem;
line-height: 1.4em;
padding: 10px 8px 10px 0;
position: relative;
}

.view_table tbody .total_point .prev_total_point {
font-size: 1.1rem;
position: absolute;
bottom: 5px; right: 5px;
}

.view_table tbody .total_point .prev_total_point:before {
content: "/ ";
}

.view_table tbody .total_point .wins {
font-size: 1.0rem;
color: #61C1CD;
position: absolute;
top: 1px; right: 3px;
}

.help {
color: #FFF;
width: 14px;
height: 14px;
line-height: 14px;
background: #61C1CD;
border-radius: 50%;
position: absolute;
top: 2px; right: 2px;
}

.help:hover {
background: #69D4E1;
}

.tooltips {
font-size: 1.0rem;
color: #444;
display: block;
width: 100px;
padding: 6px 4px 6px 6px;
text-align: left;
z-index: 1000;
background: #E6F7F9;
position: absolute;
bottom: 18px; right: 0;
border-radius: 4px;
}

/*
 ポイント入力ボタン
---------------------------*/
.input_modal {
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 100;
display: none;
}

.input_unit {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background-color: #FFF;
padding: 30px;
border-radius: 10px;
text-align: center;
z-index: 101;
}

.input_unit .lead {
font-size: 1.3rem;
line-height: 1.3em;
}

.input_unit .buttons {
width: 182px;
margin: 20px auto 0;
border-radius: 10px;
}

.input_unit .buttons div {
font-size: 1.8rem;
color: #FFF;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
background: #87cbbe;
border-bottom: solid 2px #77b4a8;
float: left;
border-radius: 10px;
margin: 1px 1px 0 0;
cursor: pointer;
}

.input_unit .buttons div:nth-child(3n) {
margin: 1px 0 0 0;
}

.input_unit .buttons div:hover {
background: #90d9cb;
transform: translateY(2px);
border-right: none;
border-bottom: none;
}

.input_unit .buttons div:last-child {
width: 100%;
}

/*
 タイトル画面に戻るボタン
-----------------------*/
.btn_return {
font-size: 1.8rem;
text-align: center;
position: absolute;
top: 11px; left: 10px;
background: rgba(255,255,255,.7);
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
}

/*
 スコア一覧のメニュー
---------------------------*/
.btn_open_score_menu {
font-size: 2.2rem;
text-align: center;
position: absolute;
top: 11px; right: 10px;
background: rgba(255,255,255,.7);
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
}

.score_menu {
display: none;
overflow-y: auto;
padding: 14px;
background: #F2F2F2;
border-radius: 0 0 0 20px;
position: absolute;
top: 60px; right: 0;
z-index: 99;
}

.score_menu .ttl {
font-size: 1.4rem;
}

/*
 ゲームごとのスコア表示・非表示ボタン
---------------------------*/
.btn_show_score {
font-size: 1.2rem;
text-align: center;
color: #FFF;
display: block;
height: 30px;
line-height: 30px;
margin: 10px 0 0;
padding: 0 10px;
background: #B5B7B6;
border-radius: 4px;
cursor: pointer;
}

.btn_close_score {
font-size: 3.2rem;
color: #F09DA7;
position: absolute;
top: -8px ; right: -8px;
cursor: pointer;
}

.btn_close_score:after {
content: "";
display: block;
width: 30px;
height: 30px;
background: #FFF;
border-radius: 50%;
position: absolute;
top: 1px ; right: 1px;
z-index: -1;
}

/*
 スコア一覧表
---------------------------*/
.score {
display: none;
max-width: 640px;
width: 90%;
background-color: #FFF;
padding: 30px;
border-radius: 10px;
text-align: left;
position: absolute;
top: 26px; left: 50%;
transform: translateX(-50%);
z-index: 200;
}

.score .game_name {
font-size: 1.4rem;
text-align: center;
}

.score_table_outer {
margin: 14px 0 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

.score_table {
table-layout: fixed;
border-bottom: solid 1px #EEE;
}

.score_table th,
.score_table td {
background: #FFF;
padding: 10px;
text-align: center;
vertical-align: middle;
}

.score_table tbody tr:nth-child(even) td {
background: #F2F2F2;
border-right: solid 1px #FFF;
}

.score_table tbody tr:nth-child(even) td:last-child {
border-right: solid 1px #EEE;
}

.score_table .game_point {
width: 66px;
font-size: 1.4rem;
border-right: solid 1px #EEE;
}

.score_table .turn {
width: 50px;
font-size: 1.4rem;
border-right: solid 1px #EEE;
}

.score_table thead .game_point,
.score_table thead .turn {
font-size: 1.0rem;
font-weight: normal;
color: #FFF;
background: #87CBBE;
white-space: nowrap;
}

.score_table thead .game_point {
background: #61C1CD;
}

.score_table .team_name {
width: 100px;
background: #DDD;
border-right: solid 1px #EEE;
position: -webkit-sticky;
position: sticky;
left: 0;
}

.score_table tbody .team_name {
text-align: left;
background: #F8EBD1;
border-top: solid 1px #FFF;
line-height: 1.4em;
}

.score_table tbody .team_name i {
font-size: 1.0rem;
color: #61C1CD;
position: absolute;
top: 3px; right: 3px;
}


/*
 入力完了ボタン
---------------------------*/
.overlay {
pointer-events: none;
opacity: .6;
}

.bottom_nav {
max-width: 600px;
width: 80%;
text-align: center;
margin: 20px auto 0;
position: relative;
}

.btn_completed input[type="checkbox"] {
display: none;
}

.btn_completed label {
display: none;
font-size: 1.6rem;
color: #FFF;
width: 100%;
height: 60px;
line-height: 60px;
background: #61C1CD;
border-radius: 30px;
border-bottom: solid 4px #4FA3AE;
z-index: 2;
position: absolute;
top: 0; left: 0;
cursor: pointer;
}

/*.btn_check_completed {
width: 100%;
margin: 0 auto;
cursor: pointer;
}*/

#check_ok {
display: none;
font-size: 1.6rem;
color: #FFF;
width: calc(100% - 130px);
height: 60px;
line-height: 60px;
background: #61C1CD;
border-radius: 30px;
border-bottom: solid 4px #4FA3AE;
position: absolute;
top: 0; right: 0;
cursor: pointer;
}

#check_ng {
display: none;
font-size: 1.2rem;
width: 120px;
height: 60px;
line-height: 60px;
background: #DDD;
border-radius: 30px;
border-bottom: solid 4px #CCC;
position: absolute;
top: 0; left: 0;
cursor: pointer;
}

/*
 ゲーム終了ポップアップ
---------------------------*/
.game_ends_announce {
display: none;
max-width: 420px;
width: 90%;
background-color: #FFF;
border-radius: 10px;
text-align: center;
padding: 20px;
position: absolute;
top: 26px; left: 50%;
transform: translateX(-50%);
z-index: 200;
}

.game_ends_announce > .ttl {
font-size: 1.8rem;
line-height: 1.3em;
}

.winner {
border: solid 3px #D4F2F6;
border-radius: 10px;
padding: 14px;
margin: 24px 0 0;
position: relative;
}

.winner .ttl {
white-space: nowrap;
background: #FFF;
padding: 0 6px;
font-size: 1.4rem;
line-height: 1.3em;
position: absolute;
top: -12px; left: 50%;
transform: translate(-50%, 0);
}

.winner .ttl span {
color: #61C1CD;
}

.winner .team {
font-size: 1.6rem;
line-height: 1.4em;
}

.game_ends_announce > .inner > .ttl span {
font-size: 1.6rem;
color: #61C1CD;
}

.total_result_ttl {
font-size: 1.3rem;
color: #61C1CD;
margin-top: 20px;
}

.total_result {
width: 100%;
font-size: 1.2rem;
margin: 8px auto 0;
text-align: left;
}

.total_result tr:first-child {
border-top: solid 1px #CCC;
}

.total_result tr:last-child {
border-bottom: solid 1px #CCC;
}

.total_result tr:nth-child(even) {
background: #F2F2F2;
}

.total_result td {
padding: 8px 4px 8px 8px;
vertical-align: middle;
}

.total_result .team {
text-align: left;
line-height: 1.3em;
}

.total_result .total_point {
width: 60px;
white-space: nowrap;
text-align: right;
}

.total_result .wins {
width: 10px;
white-space: nowrap;
text-align: left;
padding: 8px 4px 8px 0;
}

.total_result .wins span {
color: #61C1CD;
font-size: 1.1rem;
}

.total_result .wins span i {
margin-right: 2px;
}


/*
 ゲーム中断アラート
---------------------------*/
.alerts_modal {
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 300;
display: none;
}

.alerts_box {
display: none;
max-width: 300px;
width: 90%;
background-color: #FFF;
border-radius: 10px;
text-align: center;
padding: 30px 20px;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 301;
}

.alerts_box p {
line-height: 1.6em;
}

/*
 アフィリエイト
---------------------------*/
.affiliate {
display: block;
text-align: center;
}

.affiliate table {
margin: 30px auto;
}

@media screen and (min-width: 415px) {
/*-- min-width: 415px //--*/

/*======================
 CONTENTS COMMON: 415px
=======================*/
/*
 article: 415px
-----------------------*/
.article > .inner {
max-width: 640px;
}

/*======================
 TOOLS: 415px
=======================*/
.tools > .item {
width: 30%;
float: left;
margin: 0 0 0 5%;
}

.tools > .item:first-child {
margin: 0 0 0 ;
}

.tools .item_img {
width: 80%;
width: 80%;
padding-top: 80%;
}

.tools .item_img svg {
width: 80%;
}

.tools .item_dtl {
width: 90%;
margin: 16px auto 0;
}

/*--// min-width: 415px --*/
}


@media screen and (min-width: 960px) {
/*-- min-width: 960px //--*/

body {
min-width: 960px;
}

/*======================
 FOOTER: 960px
=======================*/
footer > .inner {
width: 640px;
margin: 0 auto;
}

/*======================
 HEADER: 960px
=======================*/
header > .inner {
width: 640px;
height: 60px;
margin: 0 auto;
}

/*
 アフィリエイト
---------------------------*/
.affiliate {
display: flex;
justify-content: center;
}

.affiliate table {
width: 40%;
margin: 40px 10px!important;
}


/*--// min-width: 960px //--*/
}