@charset "Shift-JIS";

/*e-amusementサイトテンプレート*/
header,footer,header#id_nav_menu_1{position:relative !important;}
header#id_nav_menu_1{background-color:#fff;}
#wrapper{position:relative !important; }
header#id_nav_menu_1{z-index:10 !important;}
footer{z-index:2 !important;}

/*
================================================================================================================
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%; height:100%; overflow-wrap:break-word; scroll-behavior: smooth;}
body{
min-width:320px !important;
margin:0 auto;
font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
overflow-x:hidden;}

a{outline:none;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
a img{transition:opacity .3s ease;}
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:700; font-style:normal;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}

a img{transition:opacity .3s ease;}

input{outline:0; border:none;}
input[type="submit"]{cursor:pointer;}

/*
================================================================================================================
MAIN
================================================================================================================
*/
#main{
position:relative;
color:#000;
background: none;
line-height:180%;
font-size:14px;
z-index:2;}
#main::after{
display:block;
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;}
#main::before{
display: block;
content: "";
position: fixed;
top: 0;
left: 0;
-webkit-transform: translate3d(0, 0, -1px);
transform: translate3d(0, 0, -1px);
width: 100%;
height: 100vh;
background:url("/game/mfc/ac/event/vote_pro2022/img/special/bg_vote_pro2022.jpg") fixed #ffdd76;
-webkit-background-size: cover;}

@media screen and (max-width:640px){#main{font-size:13px;}}
@media screen and (max-width:480px){#main{font-size:12px;}}

#main-inner{
position:relative;
width:100%;
max-width:980px;
padding:20px;
margin:0 auto;
z-index:3;}

@media screen and (min-width:981px){#main-inner{min-height:calc(100vh - 177px);}}
@media screen and (max-width:980px){#main-inner{min-height:calc(100vh - 225px);}}

@media screen and (max-width:640px){#main-inner{padding:20px;}}
@media screen and (max-width:480px){#main-inner{padding:20px 10px;}}

/*
========================
リストスタイル
========================
*/
.small{font-size:12px;}
@media screen and (max-width:400px){.small{font-size:11px;}}

ul.dot li,ul.ast li,span.dot,span.ast,ul.num li{display:block; position:relative; padding-left:18px;}
ul.dot li::before,ul.ast li::before,span.dot::before,span.ast::before,ul.num li::before{display:block; position:absolute; top:0; left:0;}
ul.dot > li::before,span.dot::before{content:"・";}
ul.ast > li::before,span.ast::before{content:"※";}
ul.num li:first-child::before{content:"①";}
ul.num li:nth-child(2)::before{content:"②";}
ul.num li:nth-child(3)::before{content:"③";}
ul.num li:nth-child(4)::before{content:"④";}
ul.num li:nth-child(5)::before{content:"⑤";}

.red{color:#d92b26; font-weight:bold;}
strong.red{display:block; text-align:center; font-size:15px; color:#fff; background:#d92b26; border-radius:5px; padding:5px; margin:20px auto;}

/*
========================
見出し
========================
*/
#main h1,#main h2,#main h3,.link-btn,.small-btn,#end,.parallel_btn a{color:#fff; text-align:center;}
#main h1,#main h2,#main h3,.link-btn,.apply-btn,#end,.parallel_btn a{
font-family:'Noto Sans JP', sans-serif;
letter-spacing:2px;
text-shadow:2px 2px 0 #000 , -2px -2px 0 #000 , 2px -2px 0 #000 , -2px 2px 0 #000 ,
            1px 1px 0 #000 , -1px -1px 0 #000 , -1px 1px 0 #000 , 1px -1px 0 #000 ,
            0 2px 0 #000 , 2px 0 0 #000 , 0 -2px 0 #000 , -2px 0 0 #000 ,
            0 3px 1px #000 , 0 4px 1px #000 , 0 5px 1px #000 ,
            -1px 3px 1px #000 , -1px 4px 1px #000 , -1px 5px 1px #000 ,
            1px 3px 1px #000 , 1px 4px 1px #000 , 1px 5px 1px #000;}
#main h3,#date,.step > .inner p.text,.small-btn,#mf li:last-child{font-family:'Noto Sans JP', sans-serif; letter-spacing:1px;}

#main h1{font-size:18px; line-height:200%;letter-spacing: 0.05em;}
#main h2{
display:block;
font-size:24px;
border-top:4px solid #ff9d04;
border-bottom:4px solid #ff9d04;
margin:20px auto;}
#main h2 > span{
display:block;
background-color:#fffbd2;
padding:10px 10px 15px;
border-top:4px solid #feef60;
border-bottom:4px solid #feef60;}
#main h3{background:#8c6b24; max-width:600px; font-size:16px; line-height:150%; padding:10px; border-radius:30px; margin:50px auto 20px;}

@media screen and (max-width:670px){
#top h3{text-align:left;}
#main h1 br,#top h3 br{display:none;}
#main h2{font-size:20px;}
#main h3{padding:10px 20px;}}
@media screen and (max-width:480px){
#main h1{font-size:16px; line-height:160%;}
#main h2{font-size:18px;}
#main h3{font-size:13px;}}

/*
========================
AC導線
========================
*/
a#ac-link{display:block; width:100%; max-width:480px; background:#fff; margin:10px auto;}
a#ac-link img{width:100%;}
a#ac-link:hover img{opacity:.6;}

/*
================================================================================================================
リンクボタン
================================================================================================================
*/
.link-btn + h2,
.step + .link-btn{margin:40px auto 20px !important;}

.link-btn{
display:block;
position:relative;
width:100%;
max-width:480px;
font-size:18px;
border:1px solid #000;
box-shadow:0 5px 2px rgba(0,0,0,.3);
margin:20px auto;}

.link-btn > span{
display:block;
position:relative;
background-color:#ff6400;
border:2px solid #fff3a2;
box-shadow:inset 0 0 5px rgba(0,0,0,.3);
padding:15px 0 20px;
transition:background .2s ease;}
.link-btn:hover > span{background-color:#d92b26;}
@media screen and (max-width:420px){
.link-btn{font-size:14px;}
.link-btn > span{padding:10px 0 15px;}}

/*TOPキャンペーン導線用*/
.link-btn.long{max-width:100%; border-radius:40px;}
.link-btn.long > span{border-radius:40px; letter-spacing:0;}
.link-btn.long > span::before,
.link-btn.long > span::after{display:block; content:""; position:absolute; transition:right .2s ease;}
.link-btn.long > span::before{top:calc(50% - 20px); right:20px; width:40px; height:40px; background:#fff; border-radius:50%;}
.link-btn.long > span::after{
top:calc(50% - 10px);
right:30px;
width:0;
height:0;
border-style:solid;
border-width:10px 0 10px 15px;
border-color:transparent transparent transparent #d92b26;}
.link-btn.long:hover > span::before{right:15px;}
.link-btn.long:hover > span::after{right:25px;}
@media screen and (max-width:670px){
.link-btn.long{text-align:left;}
.link-btn.long > span{padding:15px 60px 20px 20px;}}

/*応募する*/
.step .link-btn{width:260px; box-shadow:none; border-radius:10px;}
.step .link-btn > span{background:#ff7800; cursor:pointer; border-radius:10px;}
.step .link-btn:hover > span{background:#ffba00;}

/*非アクティブ*/
.link-btn.none{filter:grayscale(100%); pointer-events:none; opacity:.5;}

/*小サイズ*/
.small-btn{
display:block;
width:100%;
max-width:320px;
background-color:#5a779a;
font-size:16px;
border-radius:40px;
border:1px solid #000;
padding:5px;
margin:20px auto;
transition:background .2s ease;}
.small-btn:hover{background-color:#d92b26;}
@media screen and (max-width:370px){.small-btn{font-size:14px;}}

/*
================================================================================================================
概要
================================================================================================================
*/
#top{text-align:center;}
#top > p:first-of-type{margin:20px auto 40px;}
#top > p:first-of-type img{width:90%; max-width:500px;}
@media screen and (max-width:540px){#top > p:first-of-type{margin:10px auto;}}

/*終了*/
#end{
display:block;
width:100%;
font-size:18px;
border:1px solid #000;
box-shadow:0 5px 2px rgba(0,0,0,.3);
margin:20px auto 40px;}
#end > span{
display:block;
background-color:#d92b26;
border:2px solid #fff3a2;
box-shadow:inset 0 0 5px rgba(0,0,0,.3);
padding:15px 0 20px;}
@media screen and (max-width:480px){#end{margin:20px auto;}}
@media screen and (max-width:370px){#end{font-size:16px;}}

/*
================================================================================================================
日付
================================================================================================================
*/
#date{background-color:#fff; border-radius:20px; border:2px solid #ff9d04; padding:0 10px; margin:40px auto; max-width:800px;}

ul.date{display:flex; position:relative; align-items:center; justify-content:center; padding:20px 0;}
ul.date + ul.date{border-top:1px solid #ff6400;}

ul.date li{position:relative; z-index:3;}
ul.date li:first-child{color:#fff; background-color:#ff6000; font-weight:700; border-radius:5px; padding:0 10px;}
ul.date li:not(:first-child){color:#000; font-size:30px; font-weight:900;}
ul.date li:not(:first-child) span{font-size:20px; font-weight:700;}
ul.date li:nth-child(2){margin:0 40px 0 10px;}
ul.date li:nth-child(3)::before{
display:block;
content:"";
position:absolute;
left:-25px;
top:5px;
width:0;
height:0;
border-style:solid;
border-width:10px 0 10px 15px;
border-color:transparent transparent transparent #ff6000;}

@media screen and (max-width:800px){
ul.date{padding:60px 0 20px;}
ul.date li:first-child{position:absolute; width:200px; top:10px; left:calc(50% - 100px);}}
@media screen and (max-width:650px){
ul.date li:not(:first-child){font-size:22px;}
ul.date li:not(:first-child) span{font-size:15px;}
ul.date li:nth-child(2){margin:0 20px 0 0;}
ul.date li:nth-child(3)::before{top:7px; left:-15px; border-width:5px 0 5px 10px;}}
@media screen and (max-width:540px){
#date{margin:20px auto;}
ul.date{flex-wrap:wrap;}
ul.date li:not(:first-child){width:100%; text-align:center;}
ul.date li:nth-child(2){margin:0;}
ul.date li:nth-child(3)::before{left:calc(50% - 90px);}}
@media screen and (max-width:370px){
ul.date{width:100%; padding:50px 0 10px;}
ul.date::before,ul.date::after{transform:skew(0deg);}
ul.date::after{left:0;}}

/*期間1つのみ表示*/
@media screen and (max-width:800px){ul.date.single{padding:40px 0 10px !important;}}

/*
================================================================================================================
応募方法
================================================================================================================
*/
.step{ background-color:#fff; /*background-image:url(../img/bg02.png);*/ margin:20px auto 0; border:2px solid #feef60;}

.step > .inner{ padding:20px 0; max-width:800px; margin:0 auto;}
@media screen and (max-width:880px){.step > .inner{ padding:15px;}}

.step > .inner ul a{color:#ff6000; text-decoration:underline;}
.step > .inner ul a:hover{text-decoration:none;}

.step > .inner p.text{ color:#ed0002; font-size:20px; font-weight:bold; margin:0 auto 10px; line-height:1.8;}
@media screen and (max-width:640px){.step > .inner p.text{font-size:16px;}}
@media screen and (max-width:480px){.step > .inner p.text{font-size:14px;}}

.step > .inner p.text > a{color:#f00; text-decoration:underline; transition:color .2s ease;}
.step > .inner p.text > a:hover{color:#00583f; text-decoration:none;}

.step > .inner p > em{display:inline-block; color:#d92b26; font-size:18px; font-weight:900; border-bottom:3px double #d92b26; padding:0; margin-bottom:5px;}
.step > .inner p > em > span{font-size:32px;}
@media screen and (max-width:640px){.step > .inner p > em{font-size:14px;}.step > .inner p > em > span{font-size:28px;}}
@media screen and (max-width:480px){.step > .inner p > em > span{font-size:24px;}}

.step > .inner > b{display:block; color:#fff; background-color:#d92b26; text-align:center; border-radius:5px; padding:5px;}

.step > .inner .step_img{width:100%; max-width:600px; display:block; margin:10px auto 0;}


p.epass{width:90%; max-width:218px; text-align:center; font-weight:bold; margin:0 auto;}
p.epass img{width:100%;}

p.none{text-align:center;}
p.none::before{display:none !important;}

/*エラー用*/
#error > a{color:#5a779a; text-decoration:underline;}
#error > a:hover{text-decoration:none;}


.step > .inner .double_img{
 display: flex;
 justify-content: space-between;
 margin-bottom: 10px;}
.step > .inner .double_img img{ width: calc( (100% - 2px) / 2);}
.step > .inner .double_img img:first-child{ margin-right: 2px;}
@media screen and (max-width:480px){
.step > .inner .double_img{ display: block; margin: 0;}
.step > .inner .double_img img{ width: 100%;}
}

/*
================================================================================================================
応募ページ/固定表示
================================================================================================================
*/
#epass{
position:relative;
width:100%;
background-color:#fff;
text-align:center;
font-size:15px;
font-weight:bold;
padding:10px;
border-bottom:1px solid #000;
margin:0 auto;
z-index:4;}
#epass > span{display:inline-block; color:#fff; background-color:#5a779a; font-weight:normal; border-radius:3px; padding:0 10px; margin-left:10px;}

/*
================================================================================================================
チェックボックス
================================================================================================================
*/
input[type="checkbox"]{display:none !important; border:0 !important; margin:0 !important;}

.input-checkbox{
position:relative;
width:260px;
color:#000;
font-size:16px;
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
line-height:30px;
letter-spacing:2px;
padding:0 0 0 40px;
margin:20px auto 0;
z-index:5;}

.input-checkbox label{display:inline-block; cursor:pointer;}

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

.input-checkbox label:before{
top:0;
left:0;
width:30px;
height:30px;
background-color:#fff;
border:2px solid #444;
border-radius:5px;
opacity:.5;}

.input-checkbox label:after{
top:-4px;
left:10px;
width:10px;
height:30px;
border-right:4px solid transparent;
border-bottom:4px solid transparent;
transform:rotate(45deg);
transition:border-bottom-color,border-right-color .2s ease;}

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

@media screen and (max-width:480px){
.input-checkbox{width:230px; font-size:14px; line-height:24px; padding:0 0 0 30px;}
.input-checkbox label:before{width:24px; height:24px;}
.input-checkbox label:after{top:-8px;}}

/*
================================================================================================================
選択
================================================================================================================
*/
#play{margin:0 auto 100px;}

#play > .cat{
position:relative;
background:#fff;
border-radius:20px;
border:3px solid #00583f;
padding:20px 10px 40px 160px;
margin:0 auto;}
#play > .cat > *{position:relative; z-index:3;}
#play > .cat > a{display:block;}
#play > .cat + .cat{margin-top:50px;}

/*筐体装飾*/
#play > .cat::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-repeat:no-repeat;
background-position:left 10px top 10px;
background-size:130px auto;
pointer-events:none;}
#play > .cat:nth-child(1)::before{background-image:url(/game/mfc/ac/event/gw_2023_campaign/img/cabinet.png);}
#play > .cat:nth-child(2)::before{background-image:url(/game/mfc/ac/event/gw_2023_campaign/img/cabinet_hg.png);}
#play > .cat:nth-child(3)::before{background-image:url(/game/mfc/ac/event/gw_2023_campaign/img/knst.png);}

#play > .cat > p{color:#00583f; font-family:'Noto Sans JP', sans-serif; font-weight:900; font-size:22px; line-height:150%; margin:0 auto;}

/*非ログイン*/
#play.no-login > .cat{padding:30px 10px 30px 160px;}
#play.no-login > .cat + .cat{margin-top:30px;}
#play.no-login > .cat::before{background-position:left 10px center !important;}

@media screen and (max-width:640px){
#play > .cat{padding:20px 10px 40px 120px;}
#play > .cat::before{background-size:100px auto;}
#play > .cat > p{font-size:16px;}
#play.no-login > .cat{padding:20px 10px 20px 120px;}
#play.no-login > .cat + .cat{margin-top:20px;}}

@media screen and (max-width:480px){
#play > .cat + .cat{margin-top:30px;}}

@media screen and (max-width:400px){
#play > .cat{padding:20px 10px 30px 100px;}
#play > .cat::before{background-size:80px auto;}
#play > .cat > p{font-size:14px;}
#play.no-login > .cat{padding:20px 10px 20px 100px;}}

/*
========================
応募するボタン
========================
*/
a.apply-btn{
position:absolute !important;
right:10px;
bottom:-30px;
width:80%;
max-width:200px;
color:#fff;
background:#d92b26;
font-family:'Noto Sans JP', sans-serif;
font-weight:700;
font-size:18px;
text-align:left;
border-radius:40px;
border:2px solid #000;
padding:10px 0 15px;
margin:20px 0 0 auto;
transition:background .2s ease;}
a.apply-btn:hover{background:#ffba00;}

a.apply-btn p::before{content:"応募する";}
a.apply-btn p{padding:0 50px;}

/*装飾*/
a.apply-btn::before,
a.apply-btn::after{display:block; content:""; position:absolute; transition:all .2s ease;}
a.apply-btn::before{top:calc(50% - 15px); right:20px; width:30px; height:30px; background:#fff; border-radius:50%;}
a.apply-btn::after{
top:calc(50% - 8px);
right:28px;
width:0;
height:0;
border-style:solid;
border-width:8px 0 8px 12px;
border-color:transparent transparent transparent #d92b26;}
a.apply-btn:hover::before{right:15px;}
a.apply-btn:hover::after{right:23px; border-color:transparent transparent transparent #ffba00;}

/*非アクティブ-応募不可*/
.apply-btn.none{background:#888; pointer-events:none; text-align:center; border:2px solid #666;}
.apply-btn.none::before,.apply-btn.none::after{display:none;}
.apply-btn.none p{opacity:.3; padding:0;}

/*非アクティブ-応募済*/
.apply-btn.done{background:#00a8ff; pointer-events:none; text-align:center; border:2px solid #000a6e}
.apply-btn.done::before,.apply-btn.done::after{display:none;}
.apply-btn.done p{padding:0;}
.apply-btn.done p::before{content:"応募済";}

@media screen and (max-width:480px){
a.apply-btn{max-width:160px; bottom:-20px; font-size:16px; padding:5px 0 10px;}
a.apply-btn p{padding:0 40px 0 35px;}
a.apply-btn::before{top:calc(50% - 13px); right:15px; width:26px; height:26px;}
a.apply-btn::after{right:20px;}
a.apply-btn:hover::before{right:10px;}
a.apply-btn:hover::after{right:15px;}}

/*
========================
テキストリンク
========================
*/
a.mfc-link{position:relative; padding-left:15px; margin:10px auto 0; transition:color .2s ease;}
a.mfc-link:hover{color:#d92b26; text-decoration:underline;}
a.mfc-link + a.mfc-link{margin-top:5px;}
a.mfc-link::before{
display:block;
content:"";
position:absolute;
top:calc(50% - 6px);
left:0;
width:0;
height:0;
border-style:solid;
border-width:6px 0 6px 10px;
border-color:transparent transparent transparent #d92b26;}

/*
========================
リンクバナー
========================
*/
.banner{text-align:center;}
.banner img{
width:100%;
max-width:700px;
transition: 0.3s;}
.banner img:hover{opacity: 0.7;}

/*
========================
非ログイン時
========================
*/
#notice{
background:#fff;
border:3px solid #d92b26;
border-radius:20px;
text-align:center;
padding:20px;
margin:0 auto 30px;}
#notice a{display:block; max-width:200px; color:#fff; background:#d92b26; padding:5px 0; margin:10px auto 0; transition:background .2s ease;}
#notice a:hover{background:#00583f;}
@media screen and (max-width:740px){
#notice.error{text-align:left;}
#notice.error br.br-sp{display:none;}}

/*
========================
投票選抜戦追加
========================
*/
#top{position:relative;}
#top > .top_link img{
position:absolute;
display:inline-block;
width:20%;
min-width:100px;
top:40%;
right:0;}
#top > .top_link img:hover{opacity:0.8;}
@media screen and (max-width:768px){
#top > .top_link img{top:55%;}}
@media screen and (max-width:600px){
#top > .top_link img{top:70%;}
#top > p:first-of-type{margin:10px auto 50px;}}


.step.arrow{
position:relative;
margin-bottom:30px;}
.step.arrow::after{
position:absolute;
content:'';
display:block;
bottom:-22px;
right:calc(50% - 10px);
width:0;
height:0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 15px solid #d92b26;
border-bottom: 0;}

.step > .inner .detail {
background:#fff6d5;
margin-top:15px;
padding:20px;
border-radius:8px;}

.step > .inner .detail dt{
background:#fff;
padding:5px 15px;
color:#ff6000;
font-weight:bold;
font-size:18px;
border-radius:20px;
border-bottom:2px solid #ff9d00;}
.step > .inner .detail dd{
margin:10px 0 20px;
padding:0 15px;
font-size:15px;}
.step > .inner .detail dd:last-child{margin:10px 0 0;}
.step > .inner a.link-text{color:#ff6400;text-decoration:underline;}
.step > .inner a.link-text:hover{color:#ff9d04;text-decoration:none;}

.step > .inner .notice-text{text-align:center;font-size:14px;}

@media screen and (max-width:480px){
.step > .inner .detail {padding:10px;}}

.step > .inner .detail table{
max-width:600px;
margin:20px auto;}

.step > .inner .detail table th{color: #ff6000;}
.step > .inner .detail table th,
.step > .inner .detail table td{
border: solid 2px #ff9d04;
padding:8px;
font-size:16px;
font-weight:bold;}

ul.three-list{
max-width:800px;
margin:20px auto 0;}

ul.three-list li{
list-style: none;
width: calc( (100% - 16px) / 3);
display: inline-block;
text-align:center;}
ul.three-list img{
width:100%;}
.step > .inner ul.three-list a{
text-decoration:none;
color:#fff;}
.step ul.three-list .link-btn{width:100%;}

@media screen and (max-width:480px){
.step .link-btn > span {font-size: 12px;letter-spacing: 0.05em;}}

ul.get-ticket{
margin:20px auto;
max-width:600px;
display:flex;
flex-wrap: wrap;
justify-content: space-between;}

ul.get-ticket li{
background:#fff6d5;
list-style: none;
width:calc( (100% - 16px) / 3);
text-align:center;
border-radius:8px;
margin-bottom:6px;
padding:8px;}

.step > .inner ul.get-ticket li a{
display:block;
background: #ff7800;
color:#fff;
font-weight:bold;
text-decoration:none;
max-width:150px;
margin: 5px auto;
padding: 2px 0;
border-radius: 6px;
border-bottom: 3px solid #d2691e;
transition:background .2s ease;
}
.step > .inner ul.get-ticket li a:hover{
background:#ffba00;
border-bottom: 1px solid #d2691e;
margin-top:7px;
}
ul.get-ticket b{
display: block;
min-height: 40px;
}
ul.get-ticket b span{
background:#fff;
color:darkorange;
padding: 0 8px;
border-radius: 12px;
border: solid 1px orange;
}
ul.get-ticket li img{
display:block;
width:100%;
max-width:120px;
margin:0 auto;}
@media screen and (max-width:480px){
ul.get-ticket li{width:calc( (100% - 8px) / 2);}}

ul.parallel_btn{
max-width:700px;
margin:50px auto;
display:flex;
flex-wrap:wrap;
justify-content:space-between;}

ul.parallel_btn li{
width:calc( (100% - 16px) / 2);
border:solid 1px #000;
border-radius:10px;}

ul.parallel_btn a{
transition:background .2s ease;
display:block;
background:#ff7800;
padding:10px;
border-radius:10px;
border: 2px solid #fff3a2;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .3);
text-align:center;}
ul.parallel_btn a:hover{background:#ffba00;}
ul.parallel_btn li img{
width:100%;
max-width:200px;
display:block;
margin:0 auto;}
ul.parallel_btn a.none{
border-radius:10px;
border: 2px solid #999;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .3);
filter:grayscale(100%); pointer-events:none; opacity:.5;}

@media screen and (max-width:480px){
ul.parallel_btn{margin:40px auto;}
ul.parallel_btn li{width:calc( (100% - 8px) / 2);}}

ul.parallel_btn b{
background: #cc0033;
padding: 3px 30px;
border-radius: 6px;
text-shadow: none;}
ul.parallel_btn b.yokoku{background: purple;}
ul.parallel_btn b.end{background: #666;}