@charaset "utf-8";

/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin: 0;padding: 0;border: 0;list-style: none;font-style: normal;}
table{border-collapse:separate; border-spacing:0;}
caption, th, td{text-align:left; font-weight:400;}
a img{border:none;}

/* box-sizingでサイズを統一管理 */
div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,form,input,textarea,button,table,tr,th,td,article,aside,footer,header,hgroup,nav,section,img,a,p{
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}

/* clearfix ----------- */
.clearfix:after{content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden;}
.clearfix{display: inline-block;min-height:1%; /* for IE 7*/} 
* html .clearfix{height: 1%;}/* IE Mac */
.clearfix{display:block;}
iframe.twitter-share-button {width: 110px!important;}
iframe[src*="www.facebook.com/plugins/like.php"]{width:115px !important;}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: top;
}


html {
	image-rendering: -webkit-optimize-contrast;
}

/*################################################################################*/

body{
	background-image:url("../img/arch_pink.png");
	background-position:center top;
	background-repeat:no-repeat;
	background-size:100%;
}

body::after {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-3;
	width:100%;
	height:100vh;
	background-image:url(../img/bg_pink.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	background-size:auto;
}


h2{
	background-color: var(--purple);
	color: #fff;
	padding: 2%;
	width: 106%;
	margin-left: -3%;
	margin-bottom: 1em;
}

.coution{
	margin: 3em auto;
	display: block;
	border: 3px double #c00;
	padding: 2%;
	max-width: 800px;
	color: #c00;
	text-align: left;
	font-size: 90%;
}

#wrapper {
	margin:auto;
	width: 100%;
	max-width: 1300px;
}

a {color: #071d2d;}
a:hover {color: #1b91ff;}

.txtCutNone{display:none;}

/* ヘッダー ---------------------- */
#header {
	text-align: center;
	overflow: hidden;
	background-image: url(img/tex_border.jpg);
	padding-top: 10%;
}

#header img{
	width:60%;
	max-width: 500px;
}

/* フッター ---------------------- */
footer {
}

/* 全共通部分 ---------------------- */
.main {
	height:auto;
	overflow: hidden;
	margin:0 auto 5em;
	padding: 0 1em 5em;
	text-align: center;
	background-color: var(--milk);
	border-radius: 20px;
	border: solid 2px var(--purple);
}

/* 「投票する」などのフォームボタン */
.formInput {
	width: 15em;
	padding: 1em;
	background-color:#35838d;
	border-radius: 5px;
	color:#fff;
	font-weight:bold;
	border:#fff solid 2px;
	cursor: pointer;
}

.formInput:hover {
	background-color: #333;
}

/* フォームボタン（投票済みの場合） */
#IPerror{
	border: 2px solid #9E0B0D;
	background-color:#C52B2D;
	display: inline-block;
	padding: 10px 20px;
	border-radius: 5px;
	color:#fff;
}




/* 投票画面 ********************************************************************************* */

/* 〆切日記載箇所 */
#index #limitDay{
	color: #fff;
	background-color:var(--lPink);
	padding: 0.5em 1em;
	letter-spacing: 0.1em;
	margin:1em auto;
}

#index #limitDay span{
	border-bottom: 1px dashed var(--white);
	display: block;
}


/*---------------------------------------------------------
 サムネイル（キャラ選択）一覧
---------------------------------------------------------*/
#index #objAll{
	width: 100%;
	max-width: 1200px;
	margin:auto;
	text-align: center;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.5em;
	padding-bottom:1em;
}

/* 1キャラ分 */
#index #objAll .obj {
	font-size: 100%;
	cursor: pointer;
	text-align:center;
	border:solid 2px var(--brown);
}

#index #objAll .obj img{
	width:100%;
}

/* ラジオボタンのデフォルトマージンをclear */
#index #objAll input {
	margin-left:0px;
	margin-top:0px;
	vertical-align: baseline;
}

/* チェックボックス選択中 */
#index #objAll .obj.selected {
	border:solid 3px var(--brown);
	background-color: var(--brown);
	color: #fff;
}

#index #objAll .name{
	padding: 0.5em 0;
	display: inline-block;
	vertical-align: baseline;
}


/*---------------------------------------------------------
 投稿フォーム部分
---------------------------------------------------------*/
#index #input{
}

#index #input h1 {
	width:100%;
	font-weight: bold;
	color: #FFF;
	letter-spacing: 3px;
	background: #000;
	padding-top: 7px;
	padding-bottom: 7px;
	margin:30px 0;
	font-size: 120%;
	background-color:var(--brown);
}

/* コメント入力フォーム */
#index #comment {
	margin-bottom:2em;
}

/* フォームデザイン */
#index #comment .formTextarea {
	width:90%;
	max-width:600px;
	height:200px;
	padding:10px;
	border-radius: 5px;
	border:var(--brown) solid 1px;
	font-size:100%;
	margin-bottom: 1em;
}


/* フォームデザイン */
form{
}



/* 確認、エラー、完了画面　共通 ********************************************************************************* */
#preview,#complete,#close {
	padding: 3%;
}

.borderBox {
	width: 100%;
	margin: auto;
	padding: 3%;
    color:var(--brown);
}



/* 確認画面 ********************************************************************************* */
#preview .box {
	border: 4px double var(--brown);
	margin-bottom: 70px;
	padding: 30px;
	line-height: 1.5;
    
}
#preview dt,#preview dd{
	border: 1px solid var(--brown);
	padding: 10px 15px;
	margin-bottom: 5px;
	min-height:25px;
}
#preview dt {
	float: left;
	color: #FFF;
	width: 10em;
	background-color: var(--brown);
	padding: 0.5em;
	font-weight: bold;
}
#preview dd {
	margin-left: 10em;
	text-align: left;
	word-break: break-all;
	padding: 0.5em 1em;
}




/* エラー部分（確認画面内） ********************************************************************************* */
#preview #Error {
	border: 4px double #ff5c89;
	padding: 30px;
	font-weight: bold;
	margin-bottom: 40px;
	background-color: #fff;
	color: #5c272a;
	text-align: left;
	max-width: 800px;
	margin: 2% auto;
}
#preview #Error ul {margin-left: 10px;}
#preview #Error li {
	list-style: circle;
	line-height: 1.2;
	margin-bottom: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
}




/* 投票完了画面 ********************************************************************************* */
#complete h1,#close h1{
	margin: 1em auto 0;
}
#complete p,#close p{
	padding-bottom: 60px;
}

.tweetTxt{
	width: 100%;
	max-width: 600px;
	resize: none;
	background-color: none;
	background-image: url(img/tex_bg.jpg);
	border: 2px solid #5c272a;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	border-radius: 10px;
	margin: auto;
}


/*######################################################################
メディアクエリ
######################################################################*/
/**********************************************************************/
@media screen and (max-width: 800px) {
/**********************************************************************/
.txtCutNone{display:block;}
	
body{
	background-image:url("../img/arch_pink_smp.png");
}
	
#header {
	padding-top: 20%;
}
	
#wrapper {
	padding: 1em;
}
	
.main {
	padding: 0 1em 5em;
	border-radius: 10px;
}
	
h2{
	padding:5% 2%;
	transform: none;
	width: 110%;
	margin-left: -5%;
}
	
h1{
	transform: none;
	font-size: 150%;
}
	
#index #objAll{
	grid-template-columns: repeat(3, 1fr);
}
	
.formInput {
	display: block;
	margin: auto;
}
	
#preview dt {
	float: none;
	display: block;
	width: 100%;
	margin-bottom: 0;
}
#preview dd {
	display: block;
	width: 100%;
	margin-left: 0;
	margin-bottom: 1em;
}


	
/**********************************************************************/
@media screen and (max-width: 480px) {
/**********************************************************************/
#index #comment .formTextarea {
	max-width:inherit;
}
	
/**********************************************************************/
}