@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;}
header p img {width:80%;}

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 30px;
}
#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);
}


/* 投票 */
#VoidWrap{
    width:1000px;
    margin:0 auto 30px;
}
#VoidWrap ul{
    display:flex;
    flex-wrap:wrap;
}
#VoidWrap li{
    width:calc(100% / 3 - 20px);
    margin:0 10px;
    text-align:center;
    list-style:none;
}
#VoidWrap li .VoidImg img{
    width:100%;
    border:1px solid #999;
    box-sizing:border-box;
}
#VoidWrap li .CharaName{
    margin:0.4em 0;
    padding:0.2em 0;
    font-size:2em;
}
#VoidWrap li:first-child .CharaName {background:#ffebd6;}
#VoidWrap li:nth-child(2) .CharaName {background:#d2e2fb;}
#VoidWrap li:last-child .CharaName {background:#ffc6cd;}
#VoidWrap li .CharaTxt{
    padding:0 0 0.4em;
    font-size:1.5rem;
    line-height:1.4;
}
#VoidWrap li input{
    width:100%;
    padding:12px 0;
    font-size:1.6rem;
}

#VoidWrap #AttentionWrap{
    width:50%;
    margin:30px auto 0;
    border:2px solid #4a3e39;
    box-sizing:border-box;
}
#VoidWrap #AttentionWrap p{
    background:#4a3e39;
    padding:8px 0;
    font-size:1.5rem;
    color:#fff;
    text-align:center;
}
#VoidWrap #AttentionWrap ul{
    display:block;
    padding:1em;
    font-size:1.4rem;
    box-sizing:border-box;
}
#VoidWrap #AttentionWrap ul li{
    width:100%;
    margin-bottom:0.4em;
    text-align:left;
}
#VoidWrap #AttentionWrap ul li::before {content:"・";}
#VoidWrap #AttentionWrap ul li:last-of-type {margin-bottom:0;}



/* 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 {padding:20px 0;}
header p img {width:80%;}

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;
}
#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);
}


/* 投票 */
#VoidWrap{
    width:100%;
    margin:0 0 20px;
}
#VoidWrap ul{
}
#VoidWrap li{
    width:calc(100% - 20px);
    margin:0 10px;
    text-align:center;
    list-style:none;
}
#VoidWrap li .VoidImg img{
    width:100%;
    border:1px solid #999;
    box-sizing:border-box;
}
#VoidWrap li .CharaName{
    margin:0.4em 0;
    padding:0.2em 0;
    font-size:2em;
}
#VoidWrap li:first-child .CharaName {background:#ffebd6;}
#VoidWrap li:nth-child(2) .CharaName {background:#d2e2fb;}
#VoidWrap li:last-child .CharaName {background:#ffc6cd;}
#VoidWrap li .CharaTxt{
    padding:0 0 0.4em;
    font-size:1.5rem;
    line-height:1.4;
}
#VoidWrap li input{
    width:100%;
    margin-bottom:50px;
    padding:15px 0;
    font-size:1.6rem;
}

#VoidWrap #AttentionWrap{
    width:94%;
    margin:0 auto;
    border:2px solid #4a3e39;
    box-sizing:border-box;
}
#VoidWrap #AttentionWrap p{
    background:#4a3e39;
    padding:8px 0;
    font-size:1.5rem;
    color:#fff;
    text-align:center;
}
#VoidWrap #AttentionWrap ul{
    display:block;
    padding:1em 0;
    font-size:1.4rem;
    box-sizing:border-box;
}
#VoidWrap #AttentionWrap ul li{
    width:100%;
    margin-bottom:0.4em;
    text-align:left;
}
#VoidWrap #AttentionWrap ul li::before {content:"・";}
#VoidWrap #AttentionWrap ul li:last-of-type {margin-bottom:0;}



/* 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;
}


}