@charset "Shift-JIS";

/*
================================================================================================================
COMMON
================================================================================================================
*/
*{padding:0; margin:0; border:0;}
*, *:before, *:after{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;}

html{width:100%; max-width:2000px; height:100%; margin:0 auto;}
body{
width:100%;
min-width:320px !important;
height:100%;
background-color:#fff;
margin:0;
font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{display:none;}
a{outline:none;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
img{padding:0; margin:0; border:0; vertical-align:bottom;}
ul{margin:0; padding:0; border:0;}
li{list-style:none;}
strong,em,b{font-weight:bold; font-style:normal;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}
tr,td,th{border-collapse:collapse;}

/*clearfix*/
div:after,ul:after{content:""; display:block; clear:both; visibility:hidden; height:0;}

/*
================================================================================================================
COMMON
================================================================================================================
*/
div.txt{display:block; width:100%; color:#c00; font-size:13px; text-align:center; margin:20px auto;}
@media screen and (max-width:640px){div.txt{font-size:12px; font-weight:bold;}}

/*
================================================================================================================
ページベース(各ページ名で適宜idとclassを追加・変更してください)
================================================================================================================
*/
/*ページ全体*/
#base{
display:block;
position:relative;
width:100%;
max-width:2000px;
height:100%;
color:#000;
background-color:#fff;
background-image:url(../images/common/page/bg_w.png) , url(../images/common/page/bg01_w.png);
background-size:auto , auto;
background-position:center top , top;
background-repeat:no-repeat , repeat;
background-attachment:fixed , fixed;
margin:0 auto;
z-index:0;}
#base-inner{max-width:980px; background-color:rgba(255,255,255,0,6); margin:0 auto;}

@media screen and (min-width:1701px){#base-inner{width:100%; /*padding:250px 0 50px 0;*/ padding:160px 0 50px;}}
@media screen and (max-width:1700px){#base-inner{width:100%; /*padding:250px 0 50px 0;*/ padding:160px 0 50px;}}
@media screen and (max-width:1100px){#base-inner{width:96%;  /*padding:140px 0 30px 0;*/ padding:100px 0 30px 0;}}
@media screen and (max-width:480px){#base-inner{/*padding:100px 0 30px 0;*/ padding:60px 0 30px 0;}}

@media screen and (max-width:640px){
#base{background-size:1200px auto , auto;}}

/*ページ見出し*/
#page-title{
width:100%;
max-width:1200px;
height:46px;
color:#fff;
background-color:#fff;
background-image:url(../images/common/title/bg03.png) , url(../images/common/title/bg02.png) , url(../images/common/title/bg01.png) , url(../images/common/title/bg04.png);
background-repeat:no-repeat , no-repeat , repeat-x , no-repeat;
background-position:right , left , center , right;
font-size:22px;
font-weight:bold;
font-family:'Noto Sans JP', sans-serif;
text-shadow:0px 1px 1px #0084ff , 0px 2px 1px #0084ff , 1px 0px 1px #0084ff , 2px 0px 1px #0084ff,
0px 0px 5px #0084ff , 0px 0px 3px #0084ff , 0px 0px 3px #0084ff , 0px 0px 2px #0084ff;
border-radius:16px;
line-height:44px;
padding:0 0 0 20px;
margin:0 auto;}
#page-title.long br{display:none;}
#page-title span{font-size:18px;}

/*HOW TO PLAY e-amusement pass*/
#page-title.long.pass{font-size:18px;}
#page-title.long.pass span{font-size:16px;}

@media screen and (max-width:800px){
#page-title{
width:100%;
background-image:url(../images/common/title/bg03.png) , url(../images/common/title/bg02.png) , url(../images/common/title/bg01.png);
background-repeat:no-repeat , no-repeat , repeat-x;
background-position:right , left , center;
font-size:18px;
text-align:center;
padding:0;}}

@media screen and (max-width:640px){
#page-title{font-size:16px;}
#page-title span{font-size:13px;}

#page-title.long.pass{font-size:13px !important; line-height:16px; padding-top:6px;}
#page-title.long.pass span{font-size:12px;}
#page-title.long.pass br{display:block;}}

@media screen and (max-width:480px){
#page-title.long{font-size:15px !important;}}

@media screen and (max-width:370px){
#page-title{font-size:15px;}
#page-title span{font-size:12px;}

#page-title.long{font-size:13px !important; line-height:16px; padding-top:6px;}
#page-title.long br{display:block;}}

/*タブ内容非表示class*/
.no-show{display:none;}

/*
================================================================================================================
タブ切り替え用ボタン(2カラム)-SP/DP用
================================================================================================================
*/
#play-menu ul{display:flex; width:100%; margin:20px auto 10px;}
#play-menu ul li{
width:48%;
color:#fff;
background:rgba(51,51,51,0.7);
background:-moz-linear-gradient(top, rgba(51,51,51,0.7) 0%, rgba(0,0,0,0.8) 100%);
background:-webkit-linear-gradient(top, rgba(51,51,51,0.7) 0%,rgba(0,0,0,0.8) 100%);
background:linear-gradient(to bottom, rgba(51,51,51,0.7) 0%,rgba(0,0,0,0.8) 100%);
font-size:16px;
font-weight:bold;
text-align:center;
text-shadow:1px 1px 2px rgba(0,0,0,0.5);
border-radius:10px;
border:1px solid #000;
padding:15px 0;}
#play-menu ul li:first-child{margin-right:2%;}
#play-menu ul li:last-child{margin-left:2%;}
#play-menu ul li:hover{cursor:pointer;}

/*blue*/
#play-menu ul li:first-child:hover,
#play-menu ul li:first-child.tab-select{
background:#0cc0ff;
background:-moz-linear-gradient(top, #0cc0ff 0%, #65fcfe 100%);
background:-webkit-linear-gradient(top, #0cc0ff 0%,#65fcfe 100%);
background:linear-gradient(to bottom, #0cc0ff 0%,#65fcfe 100%);
border:1px solid #006ba2;}

/*yellow*/
#play-menu ul li:last-child:hover,
#play-menu ul li:last-child.tab-select{
background:#ffb502;
background:-moz-linear-gradient(top, #ffb502 0%, #ffe858 100%);
background:-webkit-linear-gradient(top, #ffb502 0%,#ffe858 100%);
background:linear-gradient(to bottom, #ffb502 0%,#ffe858 100%);
border:1px solid #a87300;}

@media screen and (max-width:640px){
#play-menu ul{margin:20px auto 0;}
#play-menu ul li{font-size:14px;}}

@media screen and (max-width:480px){
#play-menu ul li{padding:10px 0;}}

/*
================================================================================================================
タブ切り替え用ボタン(3カラム)-行脚王RANKING用
================================================================================================================
*/
#visit-rank-menu ul{display:flex; width:100%;}
#visit-rank-menu ul li{
width:32%;
color:#fff;
background:rgba(51,51,51,0.7);
background:-moz-linear-gradient(top, rgba(51,51,51,0.7) 0%, rgba(0,0,0,0.8) 100%);
background:-webkit-linear-gradient(top, rgba(51,51,51,0.7) 0%,rgba(0,0,0,0.8) 100%);
background:linear-gradient(to bottom, rgba(51,51,51,0.7) 0%,rgba(0,0,0,0.8) 100%);
font-size:16px;
font-weight:bold;
text-align:center;
text-shadow:1px 1px 2px rgba(0,0,0,0.5);
border-radius:10px;
border:1px solid #000;
margin:20px 0;
padding:15px 0;}
#visit-rank-menu ul li:first-child{margin-right:2%;}
#visit-rank-menu ul li:last-child{margin-left:2%;}
#visit-rank-menu ul li:hover{cursor:pointer;}

/*blue*/
#visit-rank-menu ul li:first-child:hover,
#visit-rank-menu ul li:first-child.tab-select{
background:#0cc0ff;
background:-moz-linear-gradient(top, #0cc0ff 0%, #65fcfe 100%);
background:-webkit-linear-gradient(top, #0cc0ff 0%,#65fcfe 100%);
background:linear-gradient(to bottom, #0cc0ff 0%,#65fcfe 100%);
border:1px solid #006ba2;}

/*yellow*/
#visit-rank-menu ul li:nth-child(2):hover,
#visit-rank-menu ul li:nth-child(2).tab-select{
background:#ffb502;
background:-moz-linear-gradient(top, #ffb502 0%, #ffe858 100%);
background:-webkit-linear-gradient(top, #ffb502 0%,#ffe858 100%);
background:linear-gradient(to bottom, #ffb502 0%,#ffe858 100%);
border:1px solid #a87300;}

/*pink*/
#visit-rank-menu ul li:last-child:hover,
#visit-rank-menu ul li:last-child.tab-select{
background:#ff38dc;
background:-moz-linear-gradient(top, #ff38dc 0%, #ffa4ff 100%);
background:-webkit-linear-gradient(top, #ff38dc 0%,#ffa4ff 100%);
background:linear-gradient(to bottom, #ff38dc 0%,#ffa4ff 100%);
border:1px solid #aa0058;}

@media screen and (max-width:480px){
#visit-rank-menu ul li{font-size:13px; padding:10px 0;}}

/*
================================================================================================================
タブ切り替え用ボタン(6カラム)-楽曲シリーズ用（IIDX27難易度変更で修正）
================================================================================================================
*/
#series-menu ul{display:flex; width:100%;}
#series-menu ul li{
color:#fff;
background:rgba(51,51,51,0.7);
background:-moz-linear-gradient(top, rgba(51,51,51,0.7) 0%, rgba(0,0,0,0.8) 100%);
background:-webkit-linear-gradient(top, rgba(51,51,51,0.7) 0%,rgba(0,0,0,0.8) 100%);
background:linear-gradient(to bottom, rgba(51,51,51,0.7) 0%,rgba(0,0,0,0.8) 100%);
font-size:16px;
font-weight:bold;
text-align:center;
text-shadow:1px 1px 2px rgba(0,0,0,0.5);
border-radius:5px;
border:1px solid #000;
padding:15px 0;}
#series-menu ul li:hover{cursor:pointer;}

/*beginner*/
#series-menu ul li:first-child:hover,
#series-menu ul li:first-child.tab-select{
background:#79d100;
background:-moz-linear-gradient(top, #79d100 0%, #93ff00 100%);
background:-webkit-linear-gradient(top, #79d100 0%,#93ff00 100%);
background:linear-gradient(to bottom, #79d100 0%,#93ff00 100%);
border:1px solid #79d100;}

/*normal*/
#series-menu ul li:nth-child(2):hover,
#series-menu ul li:nth-child(2).tab-select{
background:#86cfff;
background:-moz-linear-gradient(top, #20a8ff 0%, #86cfff 100%);
background:-webkit-linear-gradient(top, #20a8ff 0%,#86cfff 100%);
background:linear-gradient(to bottom, #20a8ff 0%,#86cfff 100%);
border:1px solid #20a8ff;}

/*hyper*/
#series-menu ul li:nth-child(3):hover,
#series-menu ul li:nth-child(3).tab-select{
background:#ffb746;
background:-moz-linear-gradient(top, #ff7800 0%, #ffb746 100%);
background:-webkit-linear-gradient(top, #ff7800 0%,#ffb746 100%);
background:linear-gradient(to bottom, #ff7800 0%,#ffb746 100%);
border:1px solid #ff7800;}

/*another*/
#series-menu ul li:nth-child(4):hover,
#series-menu ul li:nth-child(4).tab-select{
background:#fa5758;
background:-moz-linear-gradient(top, #ff0000 0%, #fa5758 100%);
background:-webkit-linear-gradient(top, #ff0000 0%,#fa5758 100%);
background:linear-gradient(to bottom, #ff0000 0%,#fa5758 100%);
border:1px solid #ff0000;}

/*leggendaria*/
#series-menu ul li:nth-child(5):hover,
#series-menu ul li:nth-child(5).tab-select{
background:#ce00d6;
background:-moz-linear-gradient(top, #ce00d6 0%, #f500ff 100%);
background:-webkit-linear-gradient(top, #ce00d6 0%,#f500ff 100%);
background:linear-gradient(to bottom, #ce00d6 0%,#f500ff 100%);
border:1px solid #ce00d6;}

/*all*/
#series-menu ul li:last-child:hover,
#series-menu ul li:last-child.tab-select{
background:#fff400;
background:-moz-linear-gradient(top, #ffcc00 0%, #fff400 100%);
background:-webkit-linear-gradient(top, #ffcc00 0%,#fff400 100%);
background:linear-gradient(to bottom, #ffcc00 0%,#fff400 100%);
border:1px solid #ffcc00;}

@media screen and (min-width:801px){
#series-menu ul li{flex:1; margin:20px 0.5% 10px 0;}
#series-menu ul li:last-child{margin:20px 0 10px;}}

@media screen and (max-width:800px){
#series-menu ul{flex-wrap:wrap;}
#series-menu ul li{width:33%; font-size:13px; margin:10px 0.5% 0 0;}

#series-menu ul li:nth-child(3),
#series-menu ul li:last-child{margin:10px 0 0;}}

@media screen and (max-width:480px){
#series-menu ul li{padding:10px 0;}}

@media screen and (max-width:320px){
#series-menu ul li{font-size:11px;}}

/*
================================================================================================================
ページネーション仮
================================================================================================================
*/
.page-navi{display:block; position:relative; width:100%; margin:10px auto; max-width:980px;}
.page-navi table{width:100%; text-align:center; max-width:980px;}
.page-navi table td:first-child{width:10%;}
.page-navi table td:nth-child(2){width:80%;}
.page-navi table td:last-child{width:10%;}

.page-navi table a{display:block; width:100%; color:#444; font-weight:bold;}
.page-navi table a:hover{text-decoration:underline; color:#0066cc;}

.page-navi table .navi-prev,
.page-navi table .navi-next{
width:100%;
color:#777;
background-color:rgba(255,255,255,0.8);
font-size:13px;
text-align:center;
border:2px solid #444;
padding:5px;}

.page-navi table .navi-page{
width:90%;
max-width:800px;
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
display:box;
-ms-flex-wrap:wrap;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
justify-content:center;
margin:0 5%;}

.page-navi table .navi-page .num{
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
display:box;
font-size:13px;
text-align:center;
white-space:nowrap;
border:2px solid #444;
margin:4px;
padding:5px 10px;}

.page-navi table .navi-page .num:not(a){color:#777; background-color:rgba(255,255,255,0.8);}

@media screen and (max-width:799px){
.page-navi table td:first-child{display:none; width:0;}
.page-navi table td:nth-child(2){width:100%;}
.page-navi table td:last-child{display:none; width:0;}
.page-navi table .navi-prev,
.page-navi table .navi-next{display:none;}}

/*NEXT PREVのみ*/
.next-prev{display:block; position:relative; width:100%; margin:10px auto; background-color:transparent;}
.next-prev table{width:100%; text-align:center; background-color:transparent; border:none !important;}
.next-prev table td:first-child{width:50% !important; background-color:transparent;}
.next-prev table td:last-child{width:50% !important; background-color:transparent;}

.next-prev table .navi-prev,
.next-prev table .navi-next{
width:40% !important;
color:#777;
background-color:rgba(255,255,255,0.8);
font-size:13px;
text-align:center;
border:2px solid #444;
padding:5px;}

.next-prev table .navi-prev{margin-right:60%;}
.next-prev table .navi-next{margin-left:60%;}
.next-prev table .navi-prev a,
.next-prev table .navi-next a{display:block; color:#000; font-weight:bold; padding:5px 0;}
.next-prev table .navi-prev a:hover,
.next-prev table .navi-next a:hover{text-decoration:underline; color:#0066cc;}

@media screen and (max-width:480px){
.next-prev table .navi-prev,
.next-prev table .navi-next{width:90%!important;}
.next-prev table .navi-prev{margin-right:10%!important;}
.next-prev table .navi-next{margin-left:10%!important;}}

/*
================================================================================================================
ページネーション スクロールタイプ仮
================================================================================================================
*/
.page-scroll{display:block; position:relative; width:100%; margin:10px auto;}
.page-scroll:after{visibility:hidden; display:block; content: " "; clear:both; height:0;}

.page-scroll .page-navi a{text-decoration:none;}
.page-scroll .page-navi a:hover{cursor:pointer;}

.page-scroll .page-num,
.page-scroll .page-navi,
.page-scroll .page-navi .page-first,
.page-scroll .page-navi .page-prev{float:left;}
.page-scroll .page-navi .page-next,
.page-scroll .page-navi .page-last{float:right;}

/*ページ送りボタン*/
.page-scroll .page-navi{width:10%; margin:0 auto;}
.page-scroll .page-navi .page-first,
.page-scroll .page-navi .page-prev,
.page-scroll .page-navi .page-next,
.page-scroll .page-navi .page-last{
background:#fafafa;
background:-moz-linear-gradient(top, #fafafa 0%, #eeeeee 50%, #e0e0e0 51%, #f9f9f9 100%);
background:-webkit-linear-gradient(top, #fafafa 0%,#eeeeee 50%,#e0e0e0 51%,#f9f9f9 100%);
background:linear-gradient(to bottom, #fafafa 0%,#eeeeee 50%,#e0e0e0 51%,#f9f9f9 100%);
text-align:center;
margin:0;}
.page-scroll .page-navi .page-first,
.page-scroll .page-navi .page-last{width:45%;}
.page-scroll .page-navi .page-prev,
.page-scroll .page-navi .page-next{width:30%;}
.page-scroll .page-navi .page-prev{margin:0 15% 0 5%;}
.page-scroll .page-navi .page-next{margin:0 5% 0 15%;}
.page-scroll .page-navi a{display:block; color:#222; border:2px solid #222; padding:3px 0;}
.page-scroll .page-navi a:hover{color:#c8281e; border:2px solid #c8281e;}

/*スクロールパーツ-ページ数*/
.page-scroll .page-num .page-amount{width:100%; color:#fff; font-size:12px; font-weight:bold; text-align:center;}

@media screen and (min-width:800px){
/*スクロールパーツ*/
.page-scroll .page-num{
display:block;
position:relative;
width:80%;
height:20px;
background:#5d5c5c;
background:-moz-linear-gradient(top, #5d5c5c 0%, #464646 45%, #3e3d3d 50%, #313030 100%);
background:-webkit-linear-gradient(top, #5d5c5c 0%,#464646 45%,#3e3d3d 50%,#313030 100%);
background:linear-gradient(to bottom, #5d5c5c 0%,#464646 45%,#3e3d3d 50%,#313030 100%);
border:1px solid #000;
border-radius:10px;
margin-top:8px;}

/*スクロールパーツ-可動パーツ*/
.page-scroll .page-num .scroll-tab{
display:block;
position:absolute;
top:0;
left:0;
/*width:0%;*/
width:10%;
height:18px;
background:#d2281e;
background:-moz-linear-gradient(top, #d2281e 0%, #c7281e 50%, #9e2018 51%, #d2251c 100%);
background:-webkit-linear-gradient(top, #d2281e 0%,#c7281e 50%,#9e2018 51%,#d2251c 100%);
background:linear-gradient(to bottom, #d2281e 0%,#c7281e 50%,#9e2018 51%,#d2251c 100%);
border:1px solid #320a09;
border-radius:8px;}
/*.page-scroll .page-num .scroll-tab:hover{cursor:pointer;}*/}

@media screen and (max-width:799px){
.page-scroll .page-navi{width:45%;}
.page-scroll .page-num{width:10%;}
.page-scroll .page-navi .page-first,
.page-scroll .page-navi .page-last{width:45%;}
.page-scroll .page-navi .page-prev,
.page-scroll .page-navi .page-next{width:30%;}
.page-scroll .page-navi .page-prev{margin:0 15% 0 5%;}
.page-scroll .page-navi .page-next{margin:0 5% 0 15%;}
.page-scroll .page-num .page-amount{color:#000 !important; font-size:14px; margin-top:8px;}}

@media screen and (max-width:980px){
.page-scroll .page-navi{width:20% !important;}
.page-scroll .page-num{width:60% !important;}}

@media screen and (max-width:480px){
.page-scroll .page-navi{width:40% !important;}
.page-scroll .page-num{width:20% !important; font-size:11px !important;}
.page-scroll .page-num .page-amount{font-size:11px !important;}}

/*
================================================================================================================
カテゴリ名
================================================================================================================
*/
.title-blue,
.title-skyblue,
.title-red,
.title-pink,
.title-green,
.title-orange,
.title-yellow,
.title-gold,
.title-bronze{
color:#fff;
text-align:center;
font-weight:bold;
text-shadow:1px 1px 2px rgba(0,0,0,0.5);
padding:8px 0;}

.title-blue,
.title-skyblue{
background:#0cc0ff;
background:-moz-linear-gradient(top, #0cc0ff 0%, #65fcfe 100%);
background:-webkit-linear-gradient(top, #0cc0ff 0%,#65fcfe 100%);
background:linear-gradient(to bottom, #0cc0ff 0%,#65fcfe 100%);
border:1px solid #006ba2;}

.title-red,
.title-pink{
background:#ff38dc;
background:-moz-linear-gradient(top, #ff38dc 0%, #ffa4ff 100%);
background:-webkit-linear-gradient(top, #ff38dc 0%,#ffa4ff 100%);
background:linear-gradient(to bottom, #ff38dc 0%,#ffa4ff 100%);
border:1px solid #aa0058;}

.title-green{
background:#146446;
background:-moz-linear-gradient(top, #146446 0%, #0c412d 100%);
background:-webkit-linear-gradient(top, #146446 0%,#0c412d 100%);
background:linear-gradient(to bottom, #146446 0%,#0c412d 100%);}

.title-orange{
background:#ff7902;
background:-moz-linear-gradient(top, #ff7902 0%, #ffb544 100%);
background:-webkit-linear-gradient(top, #ff7902 0%,#ffb544 100%);
background:linear-gradient(to bottom, #ff7902 0%,#ffb544 100%);}

.title-yellow,
.title-gold,
.title-bronze{
background:#ffb502;
background:-moz-linear-gradient(top, #ffb502 0%, #ffe858 100%);
background:-webkit-linear-gradient(top, #ffb502 0%,#ffe858 100%);
background:linear-gradient(to bottom, #ffb502 0%,#ffe858 100%);
border:1px solid #a87300;}

.title-orange br{display:none;}

@media screen and (max-width:640px){
.title-blue,
.title-skyblue,
.title-red,
.title-pink,
.title-green,
.title-orange,
.title-yellow,
.title-gold,
.title-bronze{font-size:15px;}}

@media screen and (max-width:480px){
.title-blue,
.title-skyblue,
.title-red,
.title-pink,
.title-green,
.title-orange,
.title-yellow,
.title-gold,
.title-bronze{font-size:13px; padding:5px 0;}
.title-orange br{display:block;}}

/*
================================================================================================================
フォーム用 ラジオボタン
================================================================================================================
*/
#base select{
min-height:30px;
-webkit-appearance:none !important;
-moz-appearance:none !important;
appearance:none !important;
background-image:url(/game/2dx/27/images/common/select.png);
background-size:20px;
background-repeat:no-repeat;
background-position:right 5px center;
background-color:#fff;
border:1px solid #000;
font-size:13px;
letter-spacing:2px;
padding:0 5px;}
#base select::-ms-expand{display:none;}

#base input[type="submit"]{
display:block;
min-height:30px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;}

#base input[type="submit"],
#base input[type="text"]{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;}

#base input[type="text"]{display:block; min-height:30px; border:1px solid #000; padding:5px; }

/*共通*/
input[type="radio"]{display:none !important; border:0 !important; margin:0 !important;}

.input-radio{
display:block;
position:relative;
padding:0 10px 0 22px;}

.input-radio label{
display:inline-block;
font-size:13px;
cursor:pointer;
padding-top:3px;}
.input-radio label:before{
top:4px;
left:0;
width:18px;
height:18px;
background-color:rgba(255,255,255,0.7);
border:1px solid #222;}

.input-radio label:after{
top:8px;
left:4px;
width:10px;
height:10px;
background-color:transparent;
transform:scale(0);}

.input-radio label:before,
.input-radio label:after{
content: "";
position:absolute;
display:inline-block;
border-radius:50%;
transition:transform .2s ease;}

.input-radio input[type="radio"]:checked + label:after{
background-color:#ff00f0;
transform:scale(1);}

@media screen and (min-width:800px){
.input-radio{float:left; width:40%; margin:0 5%;}
.input-radio:after{visibility:hidden; display:block; content: " "; clear:both; height:0;}}
@media screen and (max-width:799px){
#base select{font-size:12px !important; background-size:15px;}
.input-radio label{float:none; width:90%; margin:1% 5%; font-size:13px;}}

/*
================================================================================================================
プレーカスタマイズ 設定変更 チェックボックス
================================================================================================================
*/
input[type="checkbox"]{display:none !important; border:0 !important; margin:0 !important;}

.input-checkbox{
display:block;
position:relative;
padding:0 10px 0 22px;}

.input-checkbox label{
display:inline-block;
font-size:13px;
cursor:pointer;
padding-top:3px;}

.input-checkbox label:before{
top:4px;
left:0;
width:16px;
height:16px;
background-color:rgba(255,255,255,0.7);
border:1px solid #333;}

.input-checkbox label:before,
.input-checkbox label:after{
content:"";
position:absolute;
display:inline-block;
transition:transform .2s ease;}

.input-checkbox label:after{
top:5px;
left:4px;
width:8px;
height:17px;
margin-top:-5.5px;
border-right:3px solid transparent;
border-bottom:3px solid transparent;
border-radius:1.5px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
transition:border-bottom-color,border-right-color .2s ease;}

.input-checkbox input[type="checkbox"]:checked + label:after{border-color:#ff00f0;}

/*
================================================================================================================
ボタン
================================================================================================================
*/
/*マウスオフ*/
#base input[type="submit"].submit_btn,
#base div.submit_btn{
width:100%;
color:#fff;
background:#434343;
background:-moz-linear-gradient(top, #434343 0%, #060606 100%);
background:-webkit-linear-gradient(top, #434343 0%,#060606 100%);
background:linear-gradient(to bottom, #434343 0%,#060606 100%);
font-size:14px;
font-weight:bold;
text-align:center;
border-radius:10px;}
#base input[type="submit"].submit_btn{padding:10px 0;}

/*リンク装飾*/
#base div.submit_btn a{display:block; color:#fff; padding:10px 0;}

/*マウスオン*/
#base input[type="submit"].submit_btn:hover,
#base div.submit_btn a:hover{
cursor:pointer;
background:#ccc;
background:-moz-linear-gradient(top, #ccc 0%, #888 100%);
background:-webkit-linear-gradient(top, #ccc 0%,#888 100%);
background:linear-gradient(to bottom, #ccc 0%,#888 100%);
border-radius:10px;}

@media screen and (max-width:480px){
#base input[type="submit"].submit_btn,
#base div.submit_btn a{font-size:12px; padding:8px 0;}}

/*
================================================================================================================
戻るボタン
================================================================================================================
*/
.back-btn{width:30%; margin:0 auto;}
.back-btn div{
float:left;
width:100%;
background:#434343;
background:-moz-linear-gradient(top, #434343 0%, #060606 100%);
background:-webkit-linear-gradient(top, #434343 0%,#060606 100%);
background:linear-gradient(to bottom, #434343 0%,#060606 100%);
font-size:16px;
font-weight:bold;
text-align:center;
border-radius:10px;
margin:0 1%;}
.back-btn div a{
display:block;
width:100%;
color:#fff;
padding:15px 0;}
.back-btn div a:hover{
background:#ccc;
background:-moz-linear-gradient(top, #ccc 0%, #888 100%);
background:-webkit-linear-gradient(top, #ccc 0%,#888 100%);
background:linear-gradient(to bottom, #ccc 0%,#888 100%);
border-radius:10px;}
@media screen and (max-width:480px){
.back-btn{width:100% !important; margin:0 auto;}
.back-btn div a{padding:10px 0;}}

/*
================================================================================================================
TOPに戻るボタン
================================================================================================================
*/
#page-top{
position:fixed;
bottom:20px;
right:20px;
width:100px;
height:100px;}
#page-top a{
display:block;
width:100px;
height:100px;
background-image:url(../images/common/page/top_off.png);}
#page-top a:hover {
background-image:url(../images/common/page/top_on.png);}

@media screen and (max-width:1100px){
#page-top{visibility:hidden;}}