@charset "utf-8";
/* CSS Document */
.clearfix {zoom:1;}
.clearfix:after{content: ""; display: block; clear: both;}
img{border: none;}
a:focus{outline: none;}
body{font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; background-color:#f7f7f7; font-size: 13px;}
h5{font-size:30px;margin: 0.3em 0 0.5em 0; line-height:130%;}
header{margin-bottom:3em;}
#pageall{width:1050px; margin:0 auto 2em auto; font-size:18px; height: 60vh}
#pageall .left-box{flex-basis: 27%; padding-right:2em;}
#pageall{flex-basis: 73%;}

header{background: linear-gradient(#00c57c,#07a362); color:#ffffff;}
header #container{display: flex; width:1050px; margin:0 auto; padding:2em 0; align-items: center;}
header #container .title{flex-grow: 2; font-size:38px; font-family: "ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif; line-height:130%;}
header #container dl{text-align:right; flex-grow: 1; font-size:13px; line-height:160%;}
header #container dt{margin-bottom:0.3rem; letter-spacing: 1px;}
header #container dd.botton{text-decoration: none; background-image: linear-gradient(#fff,#f5f8fa); border: 1px solid #e6ecf0; border-radius: 4px; color: #393e42; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; padding:0.5rem 1.5rem; position: relative;}
header #container dd.botton:hover {background-color: #e6ecf0; background-image: linear-gradient(#fff,#e6ecf0); border-color: #e6ecf0;}
header #container dd.teisu{margin-top:0.5rem; font-size:15px;}
h1{font-size:25px; padding:2rem; padding: 0.5em; color: #010101; background: #eaffec; border-bottom: solid 3px #00a361; margin-bottom:0.5rem;}

menu{margin-bottom:1rem; width:95%; margin:0 auto 1rem auto;}
menu dl{display:flex; justify-content: space-between; align-items: center;}
menu dt{letter-spacing:1px;}
menu dt span{font-size:26px; color:#00a361;}
#pageall .banner{display:flex; justify-content: flex-end; margin-bottom:1rem;}
#pageall .banner a{position:relative; display:block; padding:0.8rem; width:30%; background-color:#00a361; color:#ffffff; text-decoration:none; font-size:17px;}
#pageall .banner a:after{font-family: "Font Awesome 5 Free"; content: "\f105"; font-weight:700; position: absolute; right:5%;}
#pageall .district{padding:1rem 0; width:95%; margin:0 auto; display:flex; justify-content: space-between;}
#pageall .district dl{display:flex;}
#pageall .district dt{background-color:#00a361; color:#ffffff; padding:0.5rem 1rem;}
#pageall .district dd{background-color:#ffffff; color:#00a361; padding:0.5rem 1rem;}

.pagewrap{display:flex;}
.pagewrap div.left-contents{width:20%; margin-right:1rem;}
.pagewrap div.left-contents ul{padding:0 1rem;}
.pagewrap div.left-contents li{margin-bottom:0.5rem;}
.pagewrap div.left-contents li a{display:block; padding:1rem 0; text-align:center; border:2px solid #06a967; background-color:#ffffff; color:#06a967; border-radius: 4px;}
.pagewrap div.right-contents{width:80%;}



#contents01{margin-bottom:3rem;}
#contents01 .profile{display:flex; align-items: center; margin-bottom:0.5rem; background-color: #ffffff;}
#contents01 .profile p.result{padding-right:0.3rem;}
#contents01 .profile p.result img{vertical-align:top;}
#contents01 .profile .detail{display:flex; align-items: center; background-color:#ffffff; padding:0.5rem 2rem 0.5rem 0.8rem; width:100%;}
#contents01 .profile .detail div.number{margin-right:1rem;}

#contents01 .profile p.photo{margin-right:2rem;}
#contents01 .profile p.photo img{height:90px; vertical-align:top;}
#contents01 .profile dl{display:flex; align-items: center; width:63%; justify-content: space-between;}
#contents01 .profile dl dt{font-size:30px; color:#00a361; width:50%;}
#contents01 .profile dl dd{font-size:23px; width:30%;}
#contents01 .profile p.vote{font-size:32px; margin-left: auto; letter-spacing:1px;}

#contents02{margin-bottom:3rem;}
#contents02 .profile{display:flex; align-items: center; margin-bottom:0.5rem;}
#contents02 .profile p.result{padding-right:0.3rem;}
#contents02 .profile p.result img{vertical-align:top;}
#contents02 .profile p.number{padding-right:1rem; margin-right:1rem; border-right:1px solid #dddddd; width: 3%; text-align: center;}
#contents02 .profile .detail{display:flex; align-items: center; background-color:#ffffff; padding:0.5rem 2rem 0.5rem 0.8rem; width:100%;}
#contents02 .profile:nth-child(odd) .detail{ background-color:#f2f7ff;}
#contents02 .profile dl{display:flex; align-items: center; width:50%;}
#contents02 .profile dl dt{width:60%; font-size:30px; color:#00a361;}
#contents02 .profile dl dd{width:20%; font-size:23px;}
#contents02 .profile p.vote{font-size:32px; margin-left: auto;}


#contents03{display:flex; justify-content: space-between; flex-wrap: wrap;}
#contents03 .detail{width: calc(95% / 2); justify-content: space-between; margin-bottom: 2.5rem;}
#contents03 .detail h2{font-size: 20px; padding: 2rem; padding: 0.5em; color: #010101; background: #eaffec; border-bottom: solid 3px #06a967; margin-bottom: 1.5rem; display:flex; justify-content: space-between;}
#contents03 .detail > dl{display:flex; margin-bottom: 1rem; padding: 0 0.5em;}
#contents03 .detail > dl > dt{margin-right:0.5rem;}
#contents03 .number > ul > li{background-color:#ffffff; display:flex; justify-content: space-between; padding:0.5rem; margin-bottom:8px;}
#contents03 .number dl{display:flex; width: 70%; justify-content: space-between; align-items: center;}
#contents03 .number dt{font-size: 20px; color: #00a361; width:44%;}
#contents03 .number dd{font-size:16px; width:28%;}
#contents01 .profile .detail p.number{margin-right: 1.5rem; width: 3%;}

@media screen and (max-width: 768px){
body{font-size:13px;}
#pageall{width:100%;}
.pagewrap{flex-direction: column;}
.pagewrap div.right-contents{width:100%;}
.pagewrap div.left-contents{width:100%; margin-bottom:1rem;}
.pagewrap div.left-contents ul{display:flex; width:90%; margin:0 auto; flex-wrap: wrap; justify-content: space-between; }
.pagewrap div.left-contents li{width: calc(100% / 3 - 5px); font-size:85%;}
.pagewrap div.left-contents a{padding: 0.5rem 0 !important;}

#container{width:100% !important; flex-direction: column; align-items:normal !important; padding: 1em 0 !important;}
header #container dl{margin-right:2%;}
header #container dd{padding: 0.4rem 0.8rem;}
header #container .title{margin-left:3%; font-size:19px; margin-bottom: 0.3rem;}
#pageall .banner{margin-right:2%;}
#pageall .banner a{width:50%; font-size:14px;}
#contents01 .profile{align-items:normal;}
#contents01 .profile .detail{padding:0.5rem 0.8rem 0.5rem 0.5rem;}
#contents01 .profile dl{width:65%; justify-content: space-between;}
#contents01 .profile dl dt{font-size:18px; width:50%;}
#contents01 .profile dl dd{font-size:14px; width:none;}
#contents01 .profile p.vote{font-size:18px;}
#contents01 .profile p.photo{margin-right:0.5rem; display:none;}
#contents01 .profile p.photo img{height:80px;}
#contents02 .profile{align-items:normal;}
#contents02 .profile .detail{padding:0.5rem 0.8rem;}
#contents02 .profile dl{width:65%;}
#contents02 .profile dl dt{font-size:18px; width: 55%;}

#contents02 .profile dl dd{font-size:12px;}
#contents02 .profile p.vote{font-size:18px;}
#contents03{flex-direction: column;}
#contents03 .number dt {width:50%;}
#contents03 .detail{width:100%;}
}