@charset "utf-8";
/* ----------------------------------------------------

★全体共通css
-------------------------------------------------------

build:2018-07
lastupdate:2018-07
version:1.1
author:om

-------------------------------------------------------

★目次
01.reset
02.mainimg
03.vote
04.twitter
05.charm
06.campaign
07.footer
08.mode
09.management
---------------------------------------------------- */

/* ■01.reset
--------------------------------------------------- */
body,
div,p,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,code,
form,fieldset,legend,input,textarea,blockquote,
th,td,figure,figcaption
{
	margin:0;
	padding:0;
	-webkit-text-size-adjust: none;
	letter-spacing: 0.06em;
}

h1,h2,h3,h4,h5,h6{ font-weight: 300; line-height: 100%; }
li{ list-style:none; }
table{ border-collapse: collapse; border-spacing: 0; }

fieldset,img { border: 0; vertical-align: bottom; }

body,html{ overflow-x: hidden; }
body{
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	line-height: 1.7;
	color: #1a1a1a;
	font-weight: 400;
	font-size: 14px;
	}

.cf:after{content: ""; display: block; clear: both; }
.cf{ display: inline-block; }
.cf{ display: block; }

.indent1em{ padding-left: 1em; text-indent: -1em; }
.indent5em{ padding-left: 5em; text-indent: -5em; }

.pc{ display: inherit; }
.sp{ display: none; }

a:link{ text-decoration: none; }

/* ■02.mainimg
--------------------------------------------------- */

#mainimg{
	background: url(../img/mainimg_bg.jpg) no-repeat 50% 50%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position:relative;
	min-height: 630px;
}
#mainimg .innar{
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 630px;
}

#mainimg img{ width: 100%; }
#mainimg .innar h1{
	margin: auto;
	height: 80%;
	background: url(../img/mainimg_catch.png) no-repeat 50% 50% / auto 100%;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 1;
}
#mainimg .logo{
	width: 140px;
	height: 33px;
	position: absolute;
	top: 20px;
	left: 20px;
	margin: auto;
	z-index: 2;
}
#mainimg .logo:hover{ opacity: 0.8; }
#mainimg .scroll{
	width: 40px;
	height: 40px;
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
}
#mainimg .present{
	width: 270px;
	height: 270px;
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 2;
}
#mainimgsp{ display: none; }

/* thanks_t */
#mainimg.thanks_t{ background-image: url(../img/mainimg_thanks_t_bg.jpg); }
#mainimg.thanks_t .innar h1{ background-image: url(../img/mainimg_thanks_t.png); }
#mainimg.thanks_c{ background-image: url(../img/mainimg_thanks_c_bg.jpg); }
#mainimg.thanks_c .innar h1{ background-image: url(../img/mainimg_thanks_c.png); }

/* ■03.vote
--------------------------------------------------- */

.vote{
	background: url(../img/vote_number_bg.png) no-repeat top center,
		 url(../img/vote_bg.jpg) no-repeat bottom center;
	background-size: 100% auto;
	background-color: #fff;
	padding-top: 80px;
}
.vote .innar{
	max-width: 1000px;
	margin: auto;
	width: 90%;
}
.vote .innar img{ width: 100%; }
.vote h2{
	background: url(../img/vote_number_line.png) repeat-x 50% 50% / 3px auto;
	text-align: center;
	margin-top: 60px;
}
.vote h2 span{
	display: inline-block;
	font-size: 40px;
	text-align: center;
	color: #804a40;
	background: #fdfdfd;
	padding: 20px;
}
.vote #odometer{ display: block; }
.odometer.odometer-auto-theme, .odometer.odometer-theme-default{ font-family: inherit!important; }
.odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value{ text-align: center!important; }
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner{ text-align: center!important; }
.vote .num{ text-align: center; font-size: 160px; }
.vote .num span{
	font-family: 'Prata', serif;
	color: #804a40;
	letter-spacing: 0;
}

.graph{ display: table; width: 100%; }
.graph > div{
	font-family: 'Prata', serif;
	display: table-cell;
	padding: 20px 20px 00px;
	font-size: 250%;
	line-height: 80px;
	vertical-align: middle;
}
.graph div span{ font-size: 200%; letter-spacing: 0; }
.graph .c{ background: #ffec00; text-align: left; }
.graph .t{ background: #f76f01; text-align: right; }

.graph .w1{ width: 1%; }
.graph .w2{ width: 2%; }
.graph .w3{ width: 3%; }
.graph .w4{ width: 4%; }
.graph .w5{ width: 5%; }
.graph .w6{ width: 6%; }
.graph .w7{ width: 7%; }
.graph .w8{ width: 8%; }
.graph .w9{ width: 9%; }
.graph .w10{ width: 10%; }
.graph .w11{ width: 11%; }
.graph .w12{ width: 12%; }
.graph .w13{ width: 12%; }
.graph .w14{ width: 14%; }
.graph .w15{ width: 15%; }
.graph .w16{ width: 16%; }
.graph .w17{ width: 17%; }
.graph .w18{ width: 18%; }
.graph .w19{ width: 19%; }
.graph .w20{ width: 20%; }
.graph .w21{ width: 21%; }
.graph .w22{ width: 22%; }
.graph .w23{ width: 23%; }
.graph .w24{ width: 24%; }
.graph .w25{ width: 25%; }
.graph .w26{ width: 26%; }
.graph .w27{ width: 27%; }
.graph .w28{ width: 28%; }
.graph .w29{ width: 29%; }
.graph .w30{ width: 30%; }
.graph .w31{ width: 31%; }
.graph .w32{ width: 32%; }
.graph .w33{ width: 33%; }
.graph .w34{ width: 34%; }
.graph .w35{ width: 35%; }
.graph .w36{ width: 36%; }
.graph .w37{ width: 37%; }
.graph .w38{ width: 38%; }
.graph .w39{ width: 39%; }
.graph .w40{ width: 40%; }
.graph .w41{ width: 41%; }
.graph .w42{ width: 42%; }
.graph .w43{ width: 43%; }
.graph .w44{ width: 44%; }
.graph .w45{ width: 45%; }
.graph .w46{ width: 46%; }
.graph .w47{ width: 47%; }
.graph .w48{ width: 48%; }
.graph .w49{ width: 49%; }
.graph .w50{ width: 50%; }
.graph .w51{ width: 51%; }
.graph .w52{ width: 52%; }
.graph .w53{ width: 53%; }
.graph .w54{ width: 54%; }
.graph .w55{ width: 55%; }
.graph .w56{ width: 56%; }
.graph .w57{ width: 57%; }
.graph .w58{ width: 58%; }
.graph .w59{ width: 59%; }
.graph .w60{ width: 60%; }
.graph .w61{ width: 61%; }
.graph .w62{ width: 62%; }
.graph .w63{ width: 63%; }
.graph .w64{ width: 64%; }
.graph .w65{ width: 65%; }
.graph .w66{ width: 66%; }
.graph .w67{ width: 67%; }
.graph .w68{ width: 68%; }
.graph .w69{ width: 69%; }
.graph .w70{ width: 70%; }
.graph .w71{ width: 71%; }
.graph .w72{ width: 72%; }
.graph .w73{ width: 73%; }
.graph .w74{ width: 74%; }
.graph .w75{ width: 75%; }
.graph .w76{ width: 76%; }
.graph .w77{ width: 77%; }
.graph .w78{ width: 78%; }
.graph .w79{ width: 79%; }
.graph .w80{ width: 80%; }
.graph .w81{ width: 81%; }
.graph .w82{ width: 82%; }
.graph .w83{ width: 83%; }
.graph .w84{ width: 84%; }
.graph .w85{ width: 85%; }
.graph .w86{ width: 86%; }
.graph .w87{ width: 87%; }
.graph .w88{ width: 88%; }
.graph .w89{ width: 89%; }
.graph .w90{ width: 90%; }
.graph .w91{ width: 91%; }
.graph .w92{ width: 92%; }
.graph .w93{ width: 93%; }
.graph .w94{ width: 94%; }
.graph .w95{ width: 95%; }
.graph .w96{ width: 96%; }
.graph .w97{ width: 97%; }
.graph .w98{ width: 98%; }
.graph .w99{ width: 99%; }


.pudding_set{ margin-top: 100px; }
.pudding_set .inn {
	width: 48%;
	display: inline-block;
	position: relative;
}
.pudding_set .inn.c { float: left; }
.pudding_set .inn.t { float: right; }
.pudding_set h3 {
	position: absolute;
	max-width: 95%;
	margin: auto;
	left: 0;
	right: 0;
	top: -60px;
}
.pudding_set .whbox {
	background: #fff;
	box-shadow: 0 0 3px rgba(0,0,0,0.4);
	padding: 50px 30px 20px;
}
.pudding_set .whbox .whbox__innar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.pudding_set .item { width: 35%; }
.pudding_set .item__text { width: 65%; text-align: right; }
.pudding_set ul li{
	background: url(../img/item_g.png) no-repeat left top 10px / 5px auto;
	padding-left: 15px;
	display: block;
	text-align: left;
	margin-left: 28px;
}
.pudding_set ul li .small{ font-size: 80%; }
.pudding_set .whbox > ul{ margin-bottom: 10px; }
.pudding_set .whbox > ul li{ margin-left: 0; }
.pudding_set .item__text ul{ display: none; }
.pudding_set li.greentea { background-image: url(../img/item_g.png); }
.pudding_set li.monbran { background-image: url(../img/item_m.png); }
.pudding_set li.panmpukin { background-image: url(../img/item_e.png); }

.pudding_set .num {
	text-align: right;
	font-size: 200%;
	vertical-align: middle;
}
.pudding_set .num span{ font-size: 200%; }
.vote_btn{
	margin-top: 20px;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	text-shadow: 2px 2px 0px rgba(0,0,0,0.3);
	color: #fff;
	background: #e5004f;
	border-radius: 4px;
	border-bottom: solid 5px #a10037;
	-webkit-transition: .4s;
	transition: .4s;
	padding: 10px;
	display: block;
	cursor: pointer;
}
.vote_btn a.disabled{ pointer-events: none; }

.comment { padding: 80px 0; }
.voice{ padding: 20px 0; }
.voice .fl{ display: inline; float: left; }
.voice .fl .icon{ margin-right: 40px; }
.voice .fr{ display: inline; float: right; }
.voice .fr .icon{ display: inline-block; float: right; margin-left: 40px; }
.voice .icon a{ display: block; }
.voice .icon a:hover{ opacity: 0.8; }

.comment_innar{ display: flex; align-items: center; }

.voice .icon { max-width: 190px; }
.voice .box {
	background: #fff;
	border-radius: 4px;
	position: relative;
}
.num02 .box{ max-width: 550px; }
.num03 .box{ max-width: 550px; }
.num04 .box p{ padding: 45px 40px; }
.voice .fl .box::before,
.voice .fr .box::after{
	content: "";
	position: absolute;
	border: 15px solid transparent;
}
.voice .fl .box::before{
	bottom: 40%;
	left: -30px;
	border-right: 15px solid #fff;
}
.voice .fr .box::after{
	bottom: 40%;
	right: -30px;
	border-left: 15px solid #fff;
}
.voice p { padding: 30px 40px; font-size: 19px; }
.voice p span{ color: #f22069; font-weight: bold; }
.vote .last { background: url(../img/vote_last_bg.gif) repeat; }
.vote .last .innar { padding: 40px 0; }
.vote .last li {
	display: inline-block;
	width: 18%;
	float: left;
	margin-top: 3%;
}
.vote .last li:nth-child(2) { width: 60%; margin: 0 2% }
.vote .last li a{ display: block; }
.vote .last li a:hover{ opacity: 0.8; }

/* ■04.twitter
--------------------------------------------------- */

.twitter{
	background: url(../img/twitter_bg.png) no-repeat 50% bottom / cover;
	background-attachment: fixed;
	padding: 50px 0;
}
.twitter .box{
	max-width: 1000px;
	margin: auto;
	display: table;
	width: 90%;
}
.twitter .box .y{
	background: #fdec18;
	display: table-cell;
	width: 50%;
	padding: 30px;
}
.twitter .box .t{
	background: #f76f01;
	display: table-cell;
	width: 50%;
	padding: 30px;
}
.twitter h1{ max-width: 420px; margin: 0 auto 30px; }
.twitter .box h2{ margin: 0 auto 30px; }
.twitter .box h2 a{ display: block; }
.twitter .box h2 a:hover{ opacity: 0.7; }
.twitter .box .y h2{ max-width: 287px; }
.twitter .box .t h2{ max-width: 380px; }
.twitter img{ width: 100%; }

.twitter .capture{ overflow-y: scroll; height: 500px; }
.twitter .vote_btn{ font-size: 16px; }
.twitter .vote_btn a{ color: #fff; }

/* ■05.charm
--------------------------------------------------- */

.charm{ padding: 70px 0; }
.charm img{ width: 100%;}
.charm .tit h1{ margin: auto; padding: 10px 0; width: 90%; }
.charm .innar{
	max-width: 1000px;
	margin: auto;
	width: 90%;
	background: #fff;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.charm .point_box{ padding: 40px; }
.charm .box{ margin-bottom: 40px; }
.charm .box .fl{ float: left; }
.charm .box .fr{ float: right; }
.charm .box .txt{ display: inline-block; width: 65%; }
.charm .box .pho{ display: inline-block; width: 30%; }
.charm .box h2:after{content: ""; display: block; clear: both; }
.charm .box h2{ display: inline-block; }
.charm .box h2{ display: block; }
.charm .box h2{
	border-bottom: double 5px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	font-size: 36px;
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	font-weight: normal;
	line-height: 42px;
	display: table;
	width: 100%;
}
.charm .box h2 .num{
	width: 70px;
	display: table-cell;
	padding-right: 20px;
	vertical-align: middle;
}
.charm .box h2 .tit_txt{ display: table-cell; vertical-align: bottom; }
.tit_txt span{ font-size: 80%; }
.charm .box p{ font-size: 16px; }
.charm .vote_btn{
	max-width: 700px;
	margin: 30px auto;
	width: 85%;
}
/* u */
.charm.u{ background: #fdec18; }
.charm.u .tit{ background: url(../img/charm_u_bg.gif) repeat; }
.charm.u .tit h1{ max-width: 692px; }
.charm.u .box h2{ border-color: #d7d17f; }

/* t */
.charm.t{ background: #f76f01; }
.charm.t .tit{ background: url(../img/charm_t_bg.gif) repeat; }
.charm.t .tit h1{ max-width: 772px; }
.charm.t .box h2{ border-color: #bfa49f; }

/* ■06.campaign
--------------------------------------------------- */

.campaign .innar{
	max-width: 1000px;
	margin: 0 auto 50px;
	width: 90%;
}
.campaign h1{
	color: #804a40;
	font-size: 40px;
	font-weight: normal;
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	text-align: center;
	padding: 30px 0;
	border-top: solid 1px #804a40;
	border-bottom: solid 1px #804a40;
	max-width: 1000px;
	margin: 80px auto 40px;
}
.campaign .innar h2{
	background: #804a40;
	color: #fff;
	padding: 15px;
	padding-left: 60px;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 30px;
	margin-top: 40px;
}
.campaign .innar h2:nth-child(1){ background: #804a40 url(../img/campaign_num01.gif) no-repeat left top / auto 100%; }
.campaign .innar h2:nth-child(3){ background: #804a40 url(../img/campaign_num02.gif) no-repeat left top / auto 100%; }
.campaign .innar h3{
	background: #fff1cc;
	color: #976d00;
	padding: 15px 20px;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 20px;
	margin-top: 30px;
}
.campaign table{ border-top: solid 1px #d9d7d5; margin: 20px 0; }
.campaign th{
	color: #bd8800;
	vertical-align: text-bottom;
	padding: 25px;
	text-align: left;
	border-bottom: solid 1px #d9d7d5;
	width: 20%;
}
.campaign td{ padding: 25px; border-bottom: solid 1px #d9d7d5; }
.campaign table a{
	color: #cc533d;
	-webkit-transition: .4s;
	transition: .4s;
}
.campaign table a:hover{ color: #e5004f; }

.campaign .pop{ max-width: 423px; margin: 30px auto; }
.campaign .pop img{ width: 100%; }

.campaign .rule{ background: #fbf9f2; padding: 50px 0; }
.campaign .rule .box{
	background: #fff;
	border: solid 1px #d1b768;
	max-width: 920px;
	margin: 30px auto;
	width: 80%;
	padding: 40px;
}
.campaign .rule .box h2{
	color: #1f0000;
	font-weight: 600;
	text-align: center;
	display: block;
	margin: 0 auto 30px;
}
.campaign .rule .box h2 span{ border-bottom: solid 2px #1f0000; }
.campaign .rule .box dl{ margin-bottom: 2px; }
.campaign .rule .box dt{
	background: #b9921b url(../img/arrow_wh_bottom.png) no-repeat right 10px center / 12px auto;
	color: #fff;
	padding: 10px;
}
.campaign .rule .box dt.active{ background-image: url(../img/arrow_wh_top.png); }
.campaign .rule .box dd{
	border: solid 1px #b9921b;
	padding: 15px;
	display: none;
}
.campaign .rule .box dl.num1 dd{ display: block; }
.campaign .rule .list li{ list-style: disc; margin-left: 15px; }
.campaign a{
	color: #bd8800;
	-webkit-transition: .4s;
	transition: .4s;
}
.campaign a:hover{ color: #e5004f; }

.tweet_innar{
	max-width: 1000px;
	margin: auto;
	width: 90%;
	text-align: center;
}
.tweet_innar img{ width: 100%; }
.tweet_btn{
	max-width: 270px;
	margin: 20px auto 10px;
	-webkit-transition: .4s;
	transition: .4s;
}
.tweet_btn:hover{ opacity: 0.8; }
.tweet_txt a{ color: #4dacee; text-decoration: underline; }

/* thanks */

.top_btn{
    position: absolute;
    width: 50%;
    max-width: 140px;
    top: 20px;
    right: 20px;
}
.top_btn a{
    display: block;
    position: relative;
	color: #804a40;
    font-size: .875rem;
    line-height: 1;
    padding-left: 1.5em;
    transition: .4s;
}
.top_btn a::after {
    content: "";
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../img/scroll.png) no-repeat center / cover;
    transform: rotate(-90deg);
}
.top_btn a:hover{
    color: #e5004f;
}

/* ■07.footer
--------------------------------------------------- */

footer{ font-size: 90%; color: #fff; background: #3a1800; }
footer .innar{
	max-width: 1000px;
	margin: auto;
	width: 90%;
	padding: 10px 0;
}
footer .sitem { float: left; }
footer .sitem a{ color: #fff; }
footer .sitem a:hover{ text-decoration: underline; }
footer address{ font-style: normal; text-align: right; }


/* ■08.mode
--------------------------------------------------- */

.fade-in {
	transition: opacity 0.7s;
	-moz-transition: opacity 0.7s;
	-webkit-transition: opacity 0.7s;
	-o-transition: opacity 0.7s;
}

/* ■09.management
--------------------------------------------------- */


.management{
	background: url(../img/mainimg_bg.jpg) no-repeat 50% 50% / cover;
	background-attachment: fixed;
}
.management .innar{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: 10px;
	padding: 50px;
	width: 750px;
}
.management h1{
	text-align: center;
	font-size: 40px;
	font-weight: 600;
	color: #976d00;
	margin-bottom: 20px;
}
.management .block{ display: table; width: 100%; }
.management .box{
	display: table-cell;
	width: 50%;
	text-align: center;
	padding: 20px 20px 0;

}
.management .box h2{ margin-bottom: 20px;}
.management .box h2 img{ width: 100%; }

.management .vote_input{
	background: #f2f2f2;
	border-radius: 3px;
	border: solid 1px #ccc;
	padding: 10px 5%;
	width: 90%;
	font-size: 120%;
}
.management .vote_btn{ font-size: 20px;}




/* ■02.横幅1300px以上（PC用）スクロールバー対策で+20pxを指定する
--------------------------------------------------- */
@media screen and (min-width:1320px) {
/* ▼PC用================================================================== */

	.pudding_set .whbox > ul{ display: none; }
	.pudding_set .item__text ul{ display: block; }
	
/* ▲PC用================================================================== */
}


/* ■03.横幅768px以上、1299px以下（Tab用）スクロールバー対策で+20pxを指定する
--------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:1319px) {
/* ▼Tab用================================================================= */
	
	/* ■02.mainimg
	--------------------------------------------------- */
	#mainimg{ display: block; }
	#mainimgsp{ display: none; }
	#mainimg .innar h1{ height: 70%; }
	
	
	/* ■03.vote
	--------------------------------------------------- */
	
	.pudding_set .whbox > ul{ display: block; }
	.pudding_set .item__text ul{ display: none; }
	.voice p { padding: 30px 40px; font-size: 16px; }
	.num04 .box p{ padding: 30px 40px; }

	/* ■04.twitter
	--------------------------------------------------- */

	.twitter .capture{ overflow-y: scroll; height: 400px; }
	
/* ▲Tab用================================================================= */
}


/* ■04.横幅480px以上、767px以下（SP横用）
--------------------------------------------------- */
@media screen and (min-width:480px) and (max-width:767px) {
/* ▼SP横用================================================================ */

/*
	.pc{ display: none; }
	.sp{ display: inherit; }
*/
	
	/* ■02.mainimg
	--------------------------------------------------- */
	#mainimg{ display: block; }
	#mainimgsp{ display: none; }

	#mainimg .innar h1{ height: 34%; }
	#mainimg .present{
		width: 170px;
		height: 170px;
		top: 10px;
		right: 10px;
	}
	
	/* ■03.vote
	--------------------------------------------------- */
	.vote{ padding-top: 40px; background-size: 180% auto , auto 100%; }
	.pudding_set { margin-top: 30px; }
	.pudding_set .inn { margin-top: 50px; }
	.pudding_set h3{ top: -30px; }
	.pudding_set .num{ font-size: 100%; }
	.vote_btn{ font-size: 20px; }
	.graph > div{ font-size: 120%; line-height: 50px; }
	.pudding_set .whbox > ul{ display: block; }
	.pudding_set .item__text ul{ display: none; }
	.vote .num{ text-align: center; font-size: 80px; }
	.pudding_set .num{ font-size: 100%; }
	.voice .icon { width: 25%; margin-top: 10px; }
	.voice .box { width: 55%;}

	.num01 .box,
	.num02 .box,
	.num03 .box,
	.num04 .box{ max-width: inherit }
	.voice p, .num04 .box p { padding: 20px 20px; font-size: 14px; }
	
	/* ■04.twitter
	--------------------------------------------------- */
	.twitter .box .y,
	.twitter .box .t{ padding: 30px 20px; }
	.twitter .capture{ overflow-y: scroll; height: 200px; }
	
	/* ■05.charm
	--------------------------------------------------- */
	.charm{ padding: 40px 0; }
	.charm .box .fl,
	.charm .box .fr{ float: none; }
	.charm .box h2{ font-size: 26px; }
	.charm .box .txt{ display: block; width: auto; }
	.charm .box .pho{ display: block; width: 50%; margin: 20px auto 0; }

	/* ■06.campaign
	--------------------------------------------------- */
	.campaign h1{
		font-size: 20px;
		text-align: center;
		padding: 20px 0;
		margin: 40px auto 30px;
		width: 90%;
	}
	.campaign .innar h2{ margin: 30px 0 20px; font-size: 16px; }


	/* ■09.management
	--------------------------------------------------- */
	.management .innar{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
		border-radius: 10px;
		padding: 50px 5%;
		width: 85%;
	}
	.management h1{ font-size: 24px; }
	.management .vote_input{ font-size: 100%; }
	
/* ▲SP横用================================================================ */
}


/* ■05.横幅479px以下（SP縦用）
--------------------------------------------------- */
@media screen and (min-width:0px) and (max-width:479px) {
/* ▼SP縦用用================================================================ */
	
	.pc{ display: none; }
	.sp{ display: inherit; }
	
	/* ■02.mainimg
	--------------------------------------------------- */
	#mainimg{ display: none; }
	#mainimgsp{ display: block; }
	#mainimgsp .logo{
		width: 18%;
		position: absolute;
		left: 10px;
	}
	#mainimgsp img{ width: 100%; }
	
	/* ■03.vote
	--------------------------------------------------- */
	.vote{
		padding-top: 40px;
		background-size: 180% auto , auto 100%;
	}
	.vote h2{ margin-top: 30px; }
	.vote h2 span{ font-size: 20px; padding: 0 20px; }
	.pudding_set .inn {
		width: auto;
		display: block;
		margin-top: 70px;
	}
	.pudding_set .inn.c { float: none; }
	.pudding_set .inn.t { float: none; }
	.vote .num{ font-size: 65px; }
	.pudding_set h3{ top: -30px; }
	.pudding_set .whbox > ul{ display: block; margin-bottom: 10px; }
	.pudding_set .item__text ul{ display: none; }
	.pudding_set .item{ display: block; width: 60%; margin: auto; }
	.pudding_set .num{
		display: block;
		width: auto;
		float: none;
		text-align: center;
		font-size: 20px;
	}
	
	.vote_btn{ font-size: 20px; line-height: 26px; }
	
	.graph > div{
		font-size: 130%;
		line-height: 50px;
		padding: 10px 10px 0;
	}
	.pudding_set{ margin-top: 70px; }
	.voice p, .num04 .box p { padding: 15px 15px; font-size: 12px; }
	.comment{ padding: 30px 0; }
	.voice { padding: 10px 0; }
	.voice .icon { max-width: 80px; }
	.voice .fl .icon{ margin-right: 20px; }
	.voice .fr .icon{ margin-left: 20px; }
	.voice .icon { width: 20%; margin-top: 20px; }
	.voice .box { width: 70%;}
	.num01 .box,
	.num02 .box,
	.num03 .box,
	.num04 .box{ max-width: inherit; }
	/*
	.num01 .box{ max-width: 186px; }
	.num02 .box{ max-width: 150px; }
	.num03 .box{ max-width: 180px; }
	.num04 .box{ max-width: 200px; }
	*/
	
	.vote .last li{ display: none; }
	.vote .last li:nth-child(2){
		display: block;
		width: auto;
		margin: auto;
	}

	/* ■04.twitter
	--------------------------------------------------- */
	
	.twitter{ background-attachment: inherit; padding: 30px 0; }
	.twitter h1{ width: 70%; }
	.twitter .box h2{ margin-bottom: 10px; width: 85%; }
	.twitter .box{ display: block; }
	.twitter .box .y{
		display: block;
		width: auto;
		margin-bottom: 30px;
		padding: 20px;
	}
	.twitter .box .t{
		display: block;
		width: auto;
		padding: 20px;
	}
	.twitter .capture{ overflow-y: scroll; height: 300px; }
	.pudding_set .whbox > ul li{ font-size: 13px; }

	/* ■05.charm
	--------------------------------------------------- */
	.charm{ padding: 40px 0; }
	.charm .point_box{ padding: 20px; }
	.charm .box .fl,
	.charm .box .fr{ float: none; }
	.charm .box .txt{ display: block; width: auto; }
	.charm .box .pho{ display: block; width: 50%; margin: 20px auto 0; }
	.charm .vote_btn{ margin-bottom: 0; }
	.charm .box h2{ font-size: 20px; line-height: 26px;text-align: center;}
	.charm .box h2 .num{
		width: 40px;
		display: block;
		float: none;
		margin: auto;
		margin-bottom: 15px;
	}
	.charm .box h2 .tit_txt{ display: block; }
	.charm .box p{ font-size: 14px; }

	/* ■06.campaign
	--------------------------------------------------- */

	.campaign h1{
		font-size: 20px;
		text-align: left;
		padding: 20px 0;
		margin: 40px auto 30px;
		width: 90%;
	}
	.campaign .innar h2{ margin: 30px 0 20px; font-size: 16px; }
	
	.campaign tr{ display: block; }
	.campaign th{
		width: auto;
		display: block;
		border-bottom: none;
		padding: 15px 15px 0;
	}
	.campaign td{
		width: auto;
		display: block;
		padding: 15px;
	}
	.campaign .rule{ padding: 30px 0; }
	.campaign .rule .box{ padding: 20px; width: 80%; }
	.campaign .rule .box h2{ font-size: 16px; margin-bottom: 20px; }
    /* thanks */
    .top_btn { 
        top: 10px;
        right: 10px;
        max-width: 125px;
    }
    .top_btn a{ font-size: .75rem; }
    .top_btn a::after { width: 13px; height: 13px; }

	/* ■07.footer
	--------------------------------------------------- */
	footer .sitem{ float: none; text-align: center; }
	footer address{ text-align: center; margin-top: 10px; }

	
	/* ■09.management
	--------------------------------------------------- */
	.management .innar{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
		border-radius: 10px;
		padding: 50px 8%;
		width: 75%;
	}
	.management h1{ font-size: 20px; }
	.management .block{ display: block; }
	.management .box{ display: block; width: auto; }
	.management .box.c{ margin-bottom: 10px; }
	.management .vote_input{ font-size: 100%; }
	.management .vote_btn{ margin-top: 10px; }

/* ▲SP縦用用================================================================ */
}