/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
*= require wiki

/* IMPORT */
@import 'flag-icon';

/* 全体への設定 */
:root {
        --theme-back-color: navy;
        --theme-str-color: white;
}
html {
        font-family: sans-serif;
        max-width: 1000px;
        margin: auto;

         /*  ダブルタップによる拡大抑止 */
        touch-action: manipulation;
}

.container {
        max-width: 100%;
        min-height: 300px;
        margin-left: 4%;
        margin-right: 4%;
}

.box1 {
        padding-left: 2%;
}
.box1:after {
        content: "";
        display: block;
        clear: both;
}

.box2 {
        width: 100%;
        background-color: var(--theme-back-color);
}
.box2:after {
        content: "";
        display: block;
        clear: both;
}

.box {
        width: 100%;
}
.box:after {
        content: "";
        display: block;
        clear: both;
}
hr {
        margin-top: 16px;
        margin-bottom: 16px;
}

/* 文字を少し小さく */
.small {
  font-size: 10px;
}
.small12 {
  font-size: 12px;
}
.small14 {
  font-size: 14px;
}
.normal {
  font-size: 17px;
}
/* 文字を大きく */
.big {
  font-size: 24px;
}

/* Size Style */
.w20 {
        width: 20px;
}
.w25p {
        width: 25%;
}

/* スマホの拡大対策 */
body, input, textarea, select {
  font-size: 17px;
}


/* h1のデザイン */
h1 {
        font-family: serif;
        margin-top: 0;
        margin-bottom: 10px;
}
h1 a {
        color: black;
        text-decoration: none;
}
h1 a:active {
        color: black;
}
h1 a:visited {
        color: black;
}

/* hタグの行間 */
h2 {
        margin-top: 10px;
        margin-bottom: 10px;
}
h3 {
        margin-top: 10px;
        margin-bottom: -5px;
}


/* 上部ナビゲーション */
.menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
}

.menu li {
        float: left;
        text-align: center;
        width: 20%;
		

	background-color: #ddd;
}

.menu li a {
        display: block;
        padding: 15px;
        text-decoration: none;
        width: auto;

        color: black;
        font-size: 17px;
}

.menu li a:hover {
        background-color: #eee;
        color: black;
}

.menu ul:after {
        content: "";
        display: block;
        clear: both;
}

a {
        text-decoration: none;
}

.title {
  text-align: center;
}
.sub_title {
  margin-top: -1%;
}

.right {
  text-align: right;
}
.left {
  text-align: left;
}
.center {
  text-align: center;
}

/* FONT COLORS */
.red {
        color: red;
}
.blue {
        color: blue;
}
.yellow {
        color: yellow;
}
.green {
        color: green;
}
.cyan {
        color: cyan;
}
.p_title {
        color: white;
        background-color: slateblue;
}


/* ALERT NOTICE COLOR */
#alert {
  color: red;
}
#notice {
  color: green;
}

/* Table */
table {
        border-spacing: 0;
        border-collapse: collapse;
        max-width: 100%;
        width: 100%;
        margin: auto;
        margin-top: 15px;
}
th, td {
        padding: 2px;
        border: solid 1px black;
        text-align: center;
}

.td_link {
  width: 100%;
  height: 100%;
  display: block;
}
.td_link:hover {
  background-color: #ddd;
}

.stick_cell {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        left: 0;
        background: white;
        z-index: 1;
}

/* Sheet Table */
table.sheet {
        display: block;
        overflow-x: scroll;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
}

/* Contact Page */
.out_link {
        color: blue;
        text-decoration: none;
}
input#title, input#email {
        width: 80%;
}
textarea#message {
        width: 90%;
        min-height: 100px;
}
.big_td {
        font-size: 1.2em;
}


/* Button Design */
.btn-blue {
        padding: 0.3em 1em;
        text-decoration: none;
        color: #67c5ff;
        border: solid 2px blue;
        border-radius: 3px;
        transition: .1s;
}
.btn-blue:hover {
        background: #67c5ff;
        color: white;
}

a:link, a:visited, a:hover, a:active {
  color: blue;
}

/* Share Button */
/* Copy from https://codepen.io/Unknown/pen/kcowe */
.social {
  margin: 50px auto;
}
.twitter {
  background-color: #008DDE;
  box-shadow: 0 4px 0 #0078BD;
  
  display: inline;
  position: relative;
  font-family: Arial;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: white;
  border-radius: 5px;
  padding: 14px 80px;
}
.twitter:active {
  top: 2px;
  box-shadow: 0 2px 0 #0078BD;
}
.twitter:hover {
  background-color: #1397D8;
}

/* Color Team Cell */
.win_pick_table {
        max-width: 256px;
}
.table_60 {
        max-width: 60%;
}
.table_80 {
        max-width: 80%;
}
th.hda {
        font-size: 12px;
}
.eng_team_cell {
        width: 54px;
}
.pick_cell {
        padding: 0;
        width: 44px;
        cursor: pointer;
}
td .sport_flg_2 {
        width: 10%;
        font-color: red;
}
.score_cell {
        padding: 0;
        width: 44px;
        white-space: nowrap;
}
.size70per {
        font-size: 70%;
}
.user_name_cell {
        font-size: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}
.nowrap {
        white-space: nowrap;
}

/* Win Picks */
.win {
        background-color: yellow;
}
.lose {
        background-color: lightgray;
}

/* Game Results */
.game_results_table {
        max-width: 320px;
}
.game_results_table_soccer {
        max-width: 80%;
}

/* Hinatazaka46 Penlight Colors */
/* 1期 */
.mao {
        color: red;
        background-color: orange;
}
.mao_re {
        color: orange;
        background-color: red;
}
.kumiten {
        color: #4BF;
        background-color: purple;
}
.kumiten_re {
        color: purple;
        background-color: #4BF;
}
.kyonko {
        color: white;
        background-color: black;
}
.kyonko_re {
        color: black;
        background-color: white;
}
.ushio {
        color: yellow;
        background-color: purple;
}
.ushio_re {
        color: purple;
        background-color: yellow;
}
.katoshi {
        color: white;
        background-color: blue;
}
.katoshi_re {
        color: blue;
        background-color: white;
}
.meimei {
        color: black;
        background-color: lightpink;
}
.meimei_re {
        color: lightpink;
        background-color: black;
}
.manafi {
        color: white;
        background-color: pink;
}
.manafi_re {
        color: pink;
        background-color: white;
}
.aya {
        color: white;
        background-color: mediumspringgreen;
}
.aya_re {
        color: mediumspringgreen;
        background-color: white;
}
.miipan {
        color: black;
        background-color: yellow;
}
.miipan_re {
        color: yellow;
        background-color: black;
}
.kage {
        color: white;
        background-color: red;
}
.kage_re {
        color: red;
        background-color: white;
}
.memi {
        color: black;
        background-color: palegreen;
}
.memi_re {
        color: palegreen;
        background-color: black;
}
/* 2期 */
.manamo {
        color: red;
        background-color: lightpink;
}
.manamo_re {
        color: lightpink;
        background-color: red;
}
.konoka {
        color: palegreen;
        background-color: lightpink;
}
.konoka_re {
        color: lightpink;
        background-color: palegreen;
}
.bemiho {
        color: white;
        background-color: #4BF;
}
.bemiho_re {
        color: #4BF;
        background-color: white;
}
.suzu {
        color: white;
        background-color: purple;
}
.suzu_re {
        color: purple;
        background-color: white;
}
.nibu {
        color: black;
        background-color: orange;
}
.nibu_re {
        color: orange;
        background-color: black;
}
.kawata {
        color: yellow;
        background-color: lightpink;
}
.kawata_re {
        color: lightpink;
        background-color: yellow;
}
.kosakana {
        color: white;
        background-color: darkviolet;
}
.kosakana_re {
        color: darkviolet;
        background-color: white;
}
.osushi {
        color: #4BF;
        background-color: yellow;
}
.osushi_re {
        color: yellow;
        background-color: #4BF;
}
.hiyotan {
        color: white;
        background-color: orange;
}
.hiyotan_re {
        color: orange;
        background-color: white;
}
/* 3期 */
.hinano {
        color: mediumspringgreen;
        background-color: red;
}
.hinano_re {
        color: red;
        background-color: mediumspringgreen;
}
.mikunin {
        color: green;
        background-color: purple;
}
.mikunin_re {
        color: purple;
        background-color: green;
}
.marimoto {
        color: orange;
        background-color: blue;
}
.marimoto_re {
        color: blue;
        background-color: orange;
}
.paru {
        color: palegreen;
        background-color: yellow;
}
.paru_re {
        color: yellow;
        background-color: palegreen;
}
/* 4期 */
.tamaki {
        color: lightpink;
        background-color: orange;
}
.tamaki_re {
        color: orange;
        background-color: lightpink;
}
.kishiho {
        color: yellow;
        background-color: white;
}
.kishiho_re {
        color: white;
        background-color: yellow;
}
.koni {
        color: purple;
        background-color: blue;
}
.koni_re {
        color: blue;
        background-color: purple;
}
.rio {
        color: palegreen;
        background-color: orange;
}
.rio_re {
        color: orange;
        background-color: palegreen;
}
.syoge {
        color: orange;
        background-color: red;
}
.syoge_re {
        color: red;
        background-color: orange;
}
.kirarin {
        color: yellow;
        background-color: red;
}
.kirarin_re {
        color: red;
        background-color: yellow;
}
.hiraho {
        color: #4BF;
        background-color: orange;
}
.hiraho_re {
        color: orange;
        background-color: #4BF;
}
.mitsuki {
        color: blue;
        background-color: yellow;
}
.mitsuki_re {
        color: yellow;
        background-color: blue;
}
.kahorin {
        color: lightpink;
        background-color: blue;
}
.kahorin_re {
        color: blue;
        background-color: lightpink;
}
.sumile {
        color: darkviolet;
        background-color: red;
}
.sumile_re {
        color: red;
        background-color: darkviolet;
}
.haruharu {
        color: white;
        background-color: mediumspringgreen;
}
.haruharu_re {
        color: mediumspringgreen;
        background-color: white;
}
.rinashi {
        color: purple;
        background-color: pink;
}
.rinashi_re {
        color: pink;
        background-color: purple;
}

/* アコーディオンボックス　CSSのみ！ */
.acbox{
        width: auto;
        font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
        margin:0 10px; /* ボックス全体の位置調整 */
}

.acbox label{
        width: auto;
        font-size: 16px; /* ラベルの文字サイズ */
        // font-weight: bold;
        text-align: center;
        background: #4BF; /* ラベルの背景色 */
        position: relative;
        display: block;
        padding:8px;
        border-radius: 4px; /* ラベルの角の丸み */
        cursor: pointer;
        color: #fff;
}

.acbox label:hover{
        background: #4BF; /* ラベルにマウスを乗せた時の背景色 */
}

.acbox input{
        display: none;
}

.acbox label:after{
        color: #fff;
        content:"▼"; /* ラベルのアイコン */
        position: absolute;
        top: 50%;
        right: 15px;
        margin-top: -14px;
}

.acbox input:checked ~ label::after {
        content:"▲"; /* ラベルをクリックした後のアイコン */
}

.acbox div{
        height: 0px;
        overflow: hidden;
        opacity: 0;
        transition: 0.15s; /* 開閉スピードの設定 */
}

.acbox input:checked ~ div{
        height: auto;
        padding: 4px; /* 開いた部分の枠内の余白 */
        border-radius: 0px;
        background: #fff; /* 開いた部分の背景色 */
        opacity: 1;
}

.acbox input:checked ~ label {
        background: #4BF; /* クリック後のラベルの背景色 */
}

.acbox-under{
        font-size: 15px; /* 開いた部分の文字サイズ */
        // color: #555555; /* 開いた部分の文字色 */
}


/* Image Generate */
#nickname, #song, #reason {
	font-size: 200%;
	font-weight: bold;
}
#reason {
	height: 100%;
}

@media (max-width: 768px) {
	#nickname, #song {
		font-size: 80%;
	}
	#reason {
		font-size: 80%;
		height: 60%;
	}
}