@charset "utf-8";

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(//use.fontawesome.com/releases/v5.0.6/css/all.css);

/*
	font-family:"FontAwesome";
	font-family:"Font Awesome 5 Free";
*/


/*========================================
 Base
========================================*/
html {font-size:62.5%;}
body {font-size:1.2rem;}

body {background:linear-gradient(to right, #fdec32, #fdec32 50%, #e70117 50%, #e70117);}
.ColorRed {color:#e70117;}

/* PC */
@media screen and (min-width: 641px) {
.spOnly {display:none;}

#contentArea{
    background:#fff;
    width:1080px;
    margin:0 auto;
    text-align:center;
}

.InfoArea{
    width:900px;
    margin:20px auto 0;
    padding-top:1em;
    font-size:1.8rem;
    line-height:1.5;
    border:4px solid #000;
    box-shadow:6px 6px #000;
}
.InfoArea p {margin-bottom:1em;}

#Tit {font-size:2.4rem;}
form{
    overflow:hidden;
    margin:0 auto 30px;
    padding:20px;
    font-size:1.8rem;
}
.FormBox{
    background:#fff;
    overflow:hidden;
    width:1000px;
    margin:30px auto;
    padding-top:20px;
}
.formTit{
    width:100%;
    margin:0 auto 2rem;
    padding:10px 0;
    font-size:3.4rem;
    color:#000;
    letter-spacing:2px;
    text-shadow:
        2px 2px #fff, -2px -2px #fff, 2px 0 #fff, -2px 0 #fff,0 2px #fff, 0 -2px #fff, 2px -2px #fff, -2px 2px #fff,
        1px 2px #fff, -1px 2px #fff, 1px -2px #fff, -1px -2px #fff, 2px 1px #fff, -2px 1px #fff, 2px -1px #fff, -2px -1px #fff;
}
label{
    float:left;
    width:calc(100% / 3 - 20px);
    margin:0 10px 20px;
    line-height:1.8;
}
label img{
    width:100%;
    border:1px solid #777;
    box-sizing:border-box;
}
label p{
    margin:0;
    font-size:1.3rem;
    line-height:1.2;
}
label p span {background:linear-gradient(transparent 60%, #ff6 60%);}
.SubmitBtn{
    background:#fdec32;
    width:600px;
    margin:0 auto;
    padding:4px 2em;
    font-size:2.6rem;
    color:#e70117;
    border:2px solid #000;
    border-bottom:6px solid #e70117;
    transition:0.4s;
}
.SubmitBtn:hover {background:#ccc;}


/* 投票後ページ */
#VotingWrap{
    background:#fff;
    width:1080px;
    margin:0 auto;
    padding:20px 0;
    font-size:1.6rem;
    text-align:center;
}
.ThankyouTxt{
    background:#e70117;
    width:800px;
    margin:0 auto 36px;
    padding:8px 0;
    font-size:3.4rem;
    font-weight:bold;
    color:#fff;
}
#WallPaper {text-align:center;}
#WallPaper p {margin:1em 0 3em;}
#WallPaper img {max-width:300px;}
.FairInfo{
    width:800px;
    margin:0 auto 20px;
    padding:1em;
    font-size:2.4rem;
    line-height:1.5;
    border:4px solid #000;
    box-shadow:6px 6px #000;
}
.FairInfoBtn{
    margin:24px 0;
}
.FairInfoBtn a{
    display:block;
    background:#e70117;
    width:600px;
    margin:0 auto;
    padding:8px 0;
    font-size:2.4rem;
    font-weight:bold;
    color:#fff;
    border:2px solid #000;
    text-decoration:none;
    transition:0.4s;
}
.FairInfoBtn a:hover{
    background:#ccc;
    color:#000;
}

input[type="radio"] {margin-right:3px;}


/* 色紙 */
#ShikishiBox {margin-bottom:60px;}
#ShikishiBox.InfoArea p.ItemTit{
    background:#e70117;
    width:96%;
    margin:0 auto 14px;
    font-size:3rem;
    color:#fff;
}
#ShikishiBox ul{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:8px;
}
#ShikishiBox li{
    width:calc(100% / 3 - 40px);
    margin:0 20px 10px;
    list-style:none;
}
#ShikishiBox li img {width:100%;}
#ShikishiBox p span{
    display:inline-block;
    background:#000;
    margin:0 0.2em 0 1.5em;
    padding:4px 0.5em;
    color:#fff;
    line-height:1;
}
#ShikishiBox p span:first-of-type {margin-left:0;}
#OnlineBtn{
    width:70%;
    margin:40px auto;
}
#OnlineBtn a{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e70117;
    padding:6px 2em;
    font-size:2.4rem;
    font-weight:bold;
    color:#fff;
    border-radius:30px;
    text-decoration:none;
    transition:0.4s;
}
#OnlineBtn a::before{
    content:">";
    margin-right:8px;
}
#OnlineBtn a:hover{
    background:#000;
}


/* 結果発表 */
#Result{
    width:1000px;
    margin:20px auto 40px;
}
#ResultTit {margin-bottom:20px;}
.ResultTxt{
    margin:40px auto;
    padding:1em 0;
    font-size:2.2rem;
    line-height:1.6;
}
.ResultTxt2{
    display:inline-block;
    background:#e70117;
    margin:20px auto 0;
    padding:10px 1.7em;
    font-size:2.2rem;
    color:#fff;
    line-height:1;
}
#reWrap{
    display:flex;
    flex-wrap:wrap;
}
.reBox{
    width:calc(100% / 3 - 20px);
    margin:0 10px 20px;
    padding:10px;
    box-sizing:border-box;
}
.CharaName{
    margin-bottom:12px;
    font-size:3.2rem;
    font-weight:bold;
    color:#fff;
    letter-spacing:2px;
    text-shadow:2px 2px #000, 2px -2px #000, -2px -2px #000, -2px 2px #000, 2px 0 #000, 0 2px #000, -2px 0 #000, 0 -2px #000;
}
.CharaTit{
    background:#fff;
    margin-bottom:10px;
    padding:4px 0;
    font-size:1.8rem;
}
.CharaImg {width:100%;}
.CharaImg img{
    width:100%;
    border:5px solid #fff;
    box-sizing:border-box;
}

.Font3 {font-size:3rem;}

}


#izuku .formTit {background:url(../images/img_drop.png) center top no-repeat #61b4a7;}
#bakugo .formTit {background:url(../images/img_drop.png) center top no-repeat #f18101;}
#ochaco .formTit {background:url(../images/img_drop.png) center top no-repeat #e64e7f;}
#might .formTit {background:url(../images/img_drop.png) center top no-repeat #f0ee44;}
#iida .formTit {background:url(../images/img_drop.png) center top no-repeat #3352a4;}
#todoroki .formTit {background:url(../images/img_drop.png) center top no-repeat #53c3f1;}

#re_izuku {background:url(../images/chara/izuku_bg.jpg);}
#re_katsuki {background:url(../images/chara/katsuki_bg.jpg);}
#re_ochaco {background:url(../images/chara/ochaco_bg.jpg);}
#re_tenya {background:url(../images/chara/tenya_bg.jpg);}
#re_shoto {background:url(../images/chara/shoto_bg.jpg);}
#re_allmight {background:url(../images/chara/allmight_bg.jpg);}




/* スマホ */
@media screen and (max-width: 640px) {
.pcOnly {display:none;}
#contentArea{
    background:#fff;
    width:94%;
    margin:0 auto;
    text-align:center;
}
#contentArea header img {width:100%;}
.InfoArea{
    width:90%;
    margin:20px auto 0;
    padding:1em 1em 0;
    font-size:1.5rem;
    line-height:1.5;
    text-align:left;
    border:4px solid #000;
    box-shadow:6px 6px #000;
    box-sizing:border-box;
}
.InfoArea p {margin-bottom:1em;}

#Tit {font-size:2rem;}
form{
    overflow:hidden;
    margin:0 0 30px;
    padding:0 20px 20px;
    font-size:1.8rem;
    box-sizing:border-box;
}
.FormBox{
    background:#fff;
    overflow:hidden;
    width:100%;
    margin:30px auto;
}

#izuku.FormBox {border:3px solid #61b4a7;}
#bakugo.FormBox {border:3px solid #f18101;}
#ochaco.FormBox {border:3px solid #e64e7f;}
#might.FormBox {border:3px solid #f0ee44;}
#iida.FormBox {border:3px solid #3352a4;}
#todoroki.FormBox {border:3px solid #53c3f1;}

.formTit{
    background:#666;
    width:100%;
    margin:0 0 1rem;
    padding:6px 0;
    font-size:2rem;
    color:#fff;
    box-sizing:border-box;
}
label{
    float:left;
    display:inline-block;
    width:calc(100% / 2 - 10px);
    margin:0 5px 20px;
    font-size:1.4rem;
    line-height:2;
}
label img{
    width:90%;
    border:1px solid #777;
    box-sizing:border-box;
}
label p{
    margin:0;
    font-size:1.2rem;
    line-height:1.2;
}
label p span {background:linear-gradient(transparent 60%, #ff6 60%);}
label input {margin:-2px 4px 0 0;}
.SubmitBtn{
    background:#fdec32;
    width:80%;
    margin:0 auto;
    padding:4px 2em;
    font-size:1.7rem;
    color:#e70117;
    border:2px solid #000;
    border-bottom:6px solid #e70117;
}


/* 投票後ページ */
#VotingWrap{
    background:#fff;
    width:100%;
    margin:0 auto;
    padding:20px 0;
    font-size:1.4rem;
    text-align:center;
}
.ThankyouTxt{
    background:#e70117;
    width:100%;
    margin:0 auto 36px;
    padding:8px 0;
    font-size:2rem;
    font-weight:bold;
    color:#fff;
}
#WallPaper {text-align:center;}
#WallPaper p {margin:1em 0 3em;}
#WallPaper img {width:90%;}
.FairInfo{
    width:94%;
    margin:0 auto;
    padding:1em;
    font-size:1.5rem;
    line-height:1.5;
    border:4px solid #000;
    box-shadow:6px 6px #000;
    box-sizing:border-box;
}
.FairInfoBtn{
    margin:24px 0;
}
.FairInfoBtn a{
    display:block;
    background:#e70117;
    width:100%;
    margin:0 auto;
    padding:8px 0;
    font-size:1.6rem;
    font-weight:bold;
    color:#fff;
    border:2px solid #000;
    text-decoration:none;
    transition:0.4s;
}
.FairInfo img{
    width:100%;
    margin:0;
}


#OnlineBtn{
    width:90%;
    margin:20px auto;
}
#OnlineBtn a{
    display:flex;
    align-items:center;
    background:#e70117;
    padding:6px 2em;
    font-size:1.6rem;
    font-weight:bold;
    color:#fff;
    border-radius:4px;
    text-decoration:none;
}
#OnlineBtn a::before{
    content:">";
    margin-right:8px;
}


/* 色紙 */
#ShikishiBox{
    margin-bottom:40px;
    padding:0.5em 0.5em 0;
    font-size:1.3rem;
}
#ShikishiBox.InfoArea p.ItemTit{
    background:#e70117;
    width:96%;
    margin:0 auto 14px;
    padding:2px 8px;
    font-size:1.5rem;
    color:#fff;
    line-height:1.3;
    box-sizing:border-box;
}
#ShikishiBox ul{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:8px;
}
#ShikishiBox li{
    width:calc(100% / 2 - 10px);
    margin:0 5px 5px;
    line-height:1;
    list-style:none;
}
#ShikishiBox li img {width:100%;}
#ShikishiBox p span{
    display:inline-block;
    background:#000;
    width:4em;
    margin:0 0.2em 4px 0;
    padding:4px 0.5em;
    color:#fff;
    text-align:center;
    line-height:1;
}


/* 結果発表 */
#Result{
    width:94%;
    margin:20px auto;
}
#ResultTit {margin:0 auto 20px;}
#ResultTit img {width:90%;}
.ResultTxt{
    width:98%;
    margin:20px auto 30px;
    padding:1em;
    font-size:1.4rem;
    line-height:1.5;
}
.ResultTxt2{
    display:inline-block;
    background:#e70117;
    margin:0 auto;
    padding:4px 8px;
    font-size:1.4rem;
    color:#fff;
    text-align:left;
    line-height:1.5;
    box-sizing:border-box;
}
#reWrap{
    display:flex;
    flex-wrap:wrap;
}
.reBox{
    width:100%;
    margin:0 0 20px;
    padding:10px;
    box-sizing:border-box;
}
.CharaName{
    margin-bottom:12px;
    font-size:2rem;
    font-weight:bold;
    color:#fff;
    letter-spacing:2px;
    text-shadow:2px 2px #000, 2px -2px #000, -2px -2px #000, -2px 2px #000, 2px 0 #000, 0 2px #000, -2px 0 #000, 0 -2px #000;
}
.CharaTit{
    background:#fff;
    margin-bottom:10px;
    padding:4px 0;
    font-size:1.6rem;
}
.CharaImg {width:100%;}
.CharaImg img{
    width:100%;
    border:5px solid #fff;
    box-sizing:border-box;
}

.Font3 {font-size:1.6rem;}


}