@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;}

#ContentWrap{
    background:#dad0ca;
    padding:20px 0;
}

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

main{
    background:#fff;
    width:1080px;
    margin:0 auto;
    padding:20px 0;
    color:#4a3e39;
}

header {text-align:center;}
header p{
    padding:30px 0;
    font-size:3rem;
    line-height:1.5;
}

section{
    width:1000px;
    margin:0 auto;
    padding:2em 0;
}

/* YouTube */
#YouTube{
    width:860px;
    height:484px;
    margin:0 auto 30px;
}


/* 投票期間 */
#Date{
    width:980px;
    margin:0 auto;
}
#Date #JacketBox{
    display:flex;
    flex-wrap:wrap;
    margin-bottom:30px;
}
#Date #JacketBox li {list-style:none;}
#Date #JacketBox li:first-of-type{
    background:#ccc;
    width:250px;
    height:250px;
    margin-right:10px;
}
#Date #JacketBox li:last-of-type{
    width:calc(100% - 260px);
    font-size:3rem;
    line-height:1.5;
}

#DateBox{
    position:relative;
    background:#917073;
    padding:8px 1em;
    font-size:32px;
    color:#fff;
    text-align:center;
}
#DateBox::before{
    content:"";
    display:block;
    position:absolute;
    top:8px;
    left:-23px;
    width:60px;
    height:2px;
    border-top:4px solid #9297b0;
    transform:rotate(-45deg);
}
#DateBox::after{
    content:"";
    display:block;
    position:absolute;
    bottom:8px;
    right:-23px;
    width:60px;
    height:2px;
    border-top:4px solid #bba255;
    transform:rotate(-45deg);
}
#Date .Attention{
    width:80%;
    margin:20px auto 0;
}
#Date .Attention li{
    font-size:1.8rem;
    line-height:1.5;
    list-style:none;
}
#Date .Attention li::before {content:"※";}


/* 投票 */
#VoidWrap{
    width:980px;
    margin:0 auto 30px;
}
#VoidWrap ul{
    display:flex;
    flex-wrap:wrap;
    margin-bottom:20px;
}
#VoidWrap li{
    text-align:center;
    list-style:none;
}
#VoidWrap li .VoidImg{
    height:250px;
}
#VoidWrap li .VoidImg img{
    max-height:250px;
    border:1px solid #999;
    box-sizing:border-box;
}
#VoidWrap li .Pledge{
    display:table-cell;
    width:758px;
    height:250px;
    font-size:2.6em;
    text-align:center;
    vertical-align:middle;
    border:1px solid #999;
    border-left:none;
    box-sizing:border-box;
}
#VoidWrap li .Pledge span{
    display:block;
    background:#4a3e39;
    width:90%;
    margin:0 auto 20px;
    padding:6px 0;
    color:#fff;
}
#VoidWrap ul:first-of-type .Pledge {background:#ffebd6;}
#VoidWrap ul:nth-of-type(2) .Pledge {background:#d2e2fb;}
#VoidWrap ul:last-of-type .Pledge {background:#ffc6cd;}

#VoidWrap .Pledge > div{
    display:flex;
    flex-wrap:wrap;
    width:90%;
    margin:30px auto 0;
}
#VoidWrap .SerialBtn{
    width:48%;
    margin-right:2%;
    line-height:1.4;
}
#VoidWrap .SerialBtn a{
    display:block;
    background:#98b993;
    width:100%;
    padding:8px 0;
    font-size:1.5rem;
    color:#fff;
    text-decoration:none;
    border-radius:2px;
}
#VoidWrap .SerialBtn a::before{
    content:">>";
    margin-right:4px;
    position:relative;
    top:10px;
}
#VoidWrap form{
    width:48%;
    margin-left:2%;

}
#VoidWrap li input{
    display:block;
    width:100%;
    padding:15px 0;
    font-size:1.6rem;
}
#VoidWrap .SerialBtn a:hover, #VoidWrap li input#submit:hover{
    opacity:0.7;
    transition:0.5s;
}


/* URADOLとは */
#About{
    width:980px;
    margin:0 auto 30px;
}
#AboutBox{
    position:relative;
    background:#9297b0;
    margin-bottom:10px;
    padding:8px 1em;
    font-size:3.2rem;
    color:#fff;
    text-align:center;
}
#AboutBox::before{
    content:"";
    display:block;
    position:absolute;
    top:8px;
    left:-23px;
    width:60px;
    height:2px;
    border-top:4px solid #bba255;
    transform:rotate(-45deg);
}
#AboutBox::after{
    content:"";
    display:block;
    position:absolute;
    bottom:8px;
    right:-23px;
    width:60px;
    height:2px;
    border-top:4px solid #917073;
    transform:rotate(-45deg);
}
#About p{
    width:900px;
    margin:0 auto 1em;
    font-size:1.8rem;
    line-height:1.5;
}
#About p span {margin-left:-3px;}

#LinkBox{
    width:800px;
    margin:0 auto 20px;
}
#LinkBox ul{
    display:flex;
    flex-wrap:wrap;
    width:80%;
    margin:0 auto;
}
#LinkBox ul li{
    width:calc(100% / 2 - 40px);
    margin:0 20px;
    font-size:1.6rem;
    text-align:center;
    list-style:none;
}
#LinkBox ul li:first-of-type a{
    display:block;
    background:#dad0ca;
    width:100%;
    padding:16px 0;
    color:#000;
    text-decoration:none;
}
#LinkBox ul li:last-of-type a{
    display:block;
    background:#0096ef;
    width:100%;
    padding:16px 0;
    color:#fff;
    text-decoration:none;
}

#LinkBox ul li a:hover{
    opacity:0.7;
    transition:0.5s;
}
#LinkBox ul li a::before{
    content:">>";
    margin-right:6px;
}


/* Footer */
footer .copyright{
    padding:20px 0;
    font-size:1.6rem;
    text-align:center;
}

}

/* スマホ */
@media screen and (max-width: 640px) {
.pcOnly {display:none;}
img {width:100%;}

main{
    background:#fff;
    width:96%;
    margin:0 auto;
    padding:20px 0 0;
    color:#4a3e39;
}

header {text-align:center;}
header p{
    width:88%;
    margin:0 auto;
    padding:20px 0;
    font-size:1.5rem;
    line-height:1.5;
}

section{
    width:100%;
    margin:0;
    padding:2em 0;
}

/* YouTube */
#YouTube{
    width:98%;
    margin:0 auto 20px;
}
#YouTube iframe{
    width:100%;
    height:auto;
}


/* 投票期間 */
#Date{
    width:90%;
    margin:0 auto;
}
#Date #JacketBox {margin-bottom:14px;}
#Date #JacketBox li {list-style:none;}
#Date #JacketBox li:first-of-type{
    background:#ccc;
    width:250px;
    height:250px;
    margin:0 auto 10px;
}
#Date #JacketBox li:last-of-type{
    margin-bottom:30px;
    font-size:1.5rem;
    line-height:1.5;
}

#DateBox{
    position:relative;
    background:#917073;
    padding:6px 1em;
    font-size:1.8rem;
    color:#fff;
    text-align:center;
    line-height:1.4;
}
#DateBox::before{
    content:"";
    display:block;
    position:absolute;
    top:8px;
    left:-23px;
    width:60px;
    height:2px;
    border-top:4px solid #9297b0;
    transform:rotate(-45deg);
}
#DateBox::after{
    content:"";
    display:block;
    position:absolute;
    bottom:8px;
    right:-23px;
    width:60px;
    height:2px;
    border-top:4px solid #bba255;
    transform:rotate(-45deg);
}
#Date .Attention{
    width:100%;
    margin:20px 0 0;
}
#Date .Attention li{
    font-size:1.5rem;
    line-height:1.5;
    list-style:none;
}
#Date .Attention li::before {content:"※";}


/* 投票 */
#VoidWrap{
    width:100%;
    margin:0;
}
#VoidWrap ul {margin-bottom:50px;}
#VoidWrap ul:last-of-type {margin-bottom:20px;}
#VoidWrap li{
    width:calc(100% - 20px);
    margin:0 10px;
    text-align:center;
    list-style:none;
}
#VoidWrap li .VoidImg img{
    width:100%;
    vertical-align:bottom;
    border:1px solid #999;
    box-sizing:border-box;
}
#VoidWrap li .Pledge{
    width:100%;
    padding:10px 0;
    font-size:1.5em;
    text-align:center;
    vertical-align:middle;
    border:1px solid #999;
    border-top:none;
    box-sizing:border-box;
}
#VoidWrap li .Pledge span{
    display:block;
    background:#4a3e39;
    width:90%;
    margin:0 auto 10px;
    padding:6px 0;
    color:#fff;
}
#VoidWrap ul:first-of-type .Pledge {background:#ffebd6;}
#VoidWrap ul:nth-of-type(2) .Pledge {background:#d2e2fb;}
#VoidWrap ul:last-of-type .Pledge {background:#ffc6cd;}

#VoidWrap .SerialBtn{
    width:86%;
    margin:20px auto 0;
    line-height:1.4;
}
#VoidWrap .SerialBtn a{
    display:block;
    background:#98b993;
    width:100%;
    margin-bottom:20px;
    padding:14px 0;
    font-size:1.6rem;
    color:#fff;
    text-decoration:none;
    border:1px solid #999;
    border-radius:2px;
    box-sizing:border-box;
}
#VoidWrap .SerialBtn a::before{
    content:">>";
    margin-right:4px;
}
#VoidWrap li input{
    width:86%;
    margin:0 auto;
    padding:12px 0;
    font-size:1.6rem;
}


/* URADOLとは */
#About{
    width:90%;
    margin:0 auto 20px;
}
#AboutBox{
    position:relative;
    background:#9297b0;
    margin-bottom:10px;
    padding:8px 1em;
    font-size:1.8rem;
    color:#fff;
    text-align:center;
}
#AboutBox::before{
    content:"";
    display:block;
    position:absolute;
    top:8px;
    left:-23px;
    width:60px;
    height:2px;
    border-top:4px solid #bba255;
    transform:rotate(-45deg);
}
#AboutBox::after{
    content:"";
    display:block;
    position:absolute;
    bottom:8px;
    right:-23px;
    width:60px;
    height:2px;
    border-top:4px solid #917073;
    transform:rotate(-45deg);
}
#About p{
    width:100%;
    margin:0 auto 1em;
    font-size:1.4rem;
    line-height:1.5;
}
#About p span {margin-left:-3px;}

#LinkBox{
    width:90%;
    margin:0 auto;
}
#LinkBox ul{
    width:90%;
    margin:0 auto;
    padding:20px 0;
}
#LinkBox ul li{
    margin:0 10px;
    font-size:1.5rem;
    text-align:center;
    list-style:none;
}
#LinkBox ul li:first-of-type a{
    display:block;
    background:#dad0ca;
    width:100%;
    margin-bottom:20px;
    padding:16px 0;
    color:#000;
    text-decoration:none;
}
#LinkBox ul li:last-of-type a{
    display:block;
    background:#0096ef;
    width:100%;
    padding:16px 0;
    color:#fff;
    text-decoration:none;
}


/* Footer */
footer .copyright{
    font-size:1.4rem;
    text-align:center;
}


}