@charset "UTF-8";

/*.new{
	display: none !important;
}*/
*{
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-weight: normal;
	font-family: sans-serif;
}
body{
	background: linear-gradient(rgba(8, 89, 169, 1) 20%, rgba(255, 255, 255, 0.9) 50%);
	min-height: 100vh;
}
header{
	/*background-color: #163593;*/
	color: #FFF;
	text-align: center;
}

h1,main{
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
}
main{
	/*background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.9)), url("images/ntpgroup_logo.png");*/

}
footer{
	text-align: center;
}

h1,h2{
	text-align: center;
}
h2{
	padding: 1em 0;
}
h1 img
,h2 img{
	width: 100%;
	max-width: 800px;
}
h2 img{
	/*filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));*/
	border-radius: 5em;
	background-color: #FFFFFF;
	box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
}
a{
	color: #FFF;
}

header h1{
	position: relative;
}
header h1 span{
	/*position: absolute;
	bottom: 0;
	left: 0; right: 0;*/
	display: block;
	font-family: 'Coda', cursive;
	
	font-size: 6.5em;
	margin-top: -0.5em;
}

.productIcons{
	margin: 2rem 0;
	padding: 0;
	font-size: 0;
	text-align: center;
}
.productIcons li{
	margin: 0;
	padding: 0;
	display: inline-block;
	text-align: center;
	width: calc(100% / 8);
	margin-bottom: 1rem;
	position: relative;
}
.productIcons li.new::before{
	content: '';
	display: block;
	width: 30%;
	height: 30%;
	position: absolute;
	top: -10%;
	right: 0;
	background: url(./images/icon_new.png) no-repeat center center;
	background-size: contain;
}
.productIcons li img{
	width: 90%;
	background-color: #163593;
	border-radius: 50%;
	/*box-shadow: 0 0 10px 5px rgba(0,0,0,0.5);*/
}

#detail{
	margin: 1em;
	padding: 1em 0;
	background-color: rgba(18, 132, 200, 0.8);
	color: #FFF;
	box-shadow: 0 0 10px 5px rgba(0,0,0,0.5);
	border-radius: 1em;
	text-align: center;
	line-height: 2em;
	font-size: 1.2em;
}
#detail .endMessage{
	display: inline;
	background: linear-gradient(transparent 70%, #e5732a 0%);
	font-weight: bold;
}
#detail summary{
	text-decoration: underline;
	background-color: #0160af;
	padding: 0.5em;
	border-radius: 0.5em;
}
#detail dl dt
,#detail dl dd{
	padding: 1em;
}
#detail dl dt{
	background-color: #163593;
	color: #FFFFFF;

}
#detail dl dd table{
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}
#detail dl dd details{
	margin: 0.5em;
	padding: 0.5em;
	border: solid 1px #333;
	border-radius: 0.5em;
}
#detail dl dd details p{
	text-align: center;
	margin: 1em;
	padding: 1em 0;
	background-color: #163593;
	border-radius: 1em;
}
#detail dl dd table.product{
	max-width: 700px;
}
#detail dl dd table.product th
,#detail dl dd table.product td{
	padding: 1em;
}
#detail dl dd table.product th{
	text-align: right;
	
	position: relative;
}
#detail dl dd table.product .new th::before{
	content: '';
	display: block;
	width: 3em;
	height: 3em;
	position: absolute;
	top: 0;
	left: calc(50% + 2em);
	background: url(./images/icon_new.png) no-repeat center center;
	background-size: contain;
}

#detail dl dd table.product td{
	text-align: left;
}
#detail dl dd table.product img{
	width: 8em;
	background-color: #163593;
	border-radius: 50%;
}
#detail dl dd table.list{
	max-width: 800px;
	border-collapse: collapse;
}
#detail dl dd table.list tr{
	border-bottom: dotted 1px #CCC;
}
#detail dl dd table.list th{
	min-width: 10em;
}
#detail dl dd table.list th
,#detail dl dd table.list td{
	padding: 0.5em;
}

.rule{
	height: 10em;
	overflow-y: scroll;
	padding: 0 2em;
	text-align: left;
	line-height: 1.5em;
	font-size: 0.8em;
}
.rule h3{
	margin-top: 1em;
}
.rule ol
,.rule ul{
	margin: 0 1em;
}
.rule ul{
	list-style-type: disc;
}
.rule table{
	border: solid 1px #FFF;
	border-collapse: collapse;
}
.rule table th
,.rule table td{
	border: solid 1px #FFF;
	padding: 0.5em;
}
.rule table th{
	width: 5em;
	text-align: center;
}

#entry{
	margin: 1em;
	text-align: center;
}
#entry a{
	display: inline-block;
	padding: 1em 2em;
	font-weight: bold;
	box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
	background-color: #163593;
	border: solid 1px #333;
	border-radius: 1em;
}
#entry a.ComingSoon{
	background-color: #666;
}
/*結果発表開始*/
.ideaResult{
	margin: 0 auto;
	box-sizing: border-box;
	width: 95%;
	max-width: 800px;
	border-radius: 10px;
	background: #419dd3;
	border: solid 5px #419dd3;
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.4));
	color: #444;
	margin-bottom: 2em;
}

.ideaResult p{
	text-align:center;
	padding-top:1em;
	font-weight:bold;
	width: 95%;
	margin: 0 auto;
	font-size: 17px;
}

h2.ideaResultTitle{
	font-weight: bold;
	font-size: 32px;
	color: #FFF;
	padding: 0.25em 0;
	border: none;
	height: 65px;
	box-sizing: border-box;
}
.ideaResultInner{
	background: #FFF;
	padding-bottom: 2em;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.ideaResult table{
	margin:0 auto;
	border-collapse:collapse;
	width: 90%;
}

.ideaResult table tr th{
	text-align: left;
	font-weight: bold;
	font-size: 20px;
}

.ideaResult table tbody tr{
	border-bottom: 1px solid #808080;
}

.ideaResult table tbody tr:nth-of-type(1){
	border-top: solid 2px #444;
}

.ideaResult table tbody tr:last-of-type{
	border-bottom: 2px solid #444;
}

.ideaResult table tr th:nth-of-type(1){
	width: 60%;
}

.ideaResult table tr th:nth-of-type(2){
	width: 40%;
}

.ideaResult table tr td{
	padding:0.5em 0;
	font-size: 19px;
}

.ribbon {
	display: inline-block;
	position: relative;
	height: 45px;
	text-align: center;
	box-sizing: border-box;
	left: 50%;
	transform: translateX(-50%);
	margin: 1.5em 0;
}

.ribbon:before,.ribbon:after{
	content: '';
	position: absolute;
	width: 10px;
	bottom: -10px;
	z-index: -2;
	border: 20px solid #c23a3a;
}

.ribbon:before {/*左側のリボン端*/
	left: -35px;
	border-left-color: transparent;
}

.ribbon:after {/*右側のリボン端*/
	right: -35px;
	border-right-color: transparent;
}

.ribbon h3 {
	display: inline-block;
	position: relative;
	margin: 0;
	width: 200px;
	line-height: 45px;
	font-size: 20px;
	color: #FFF;
	font-weight: bold;
	background: linear-gradient(to bottom, #d64b4b, #ab2c2c);
	box-shadow: 0 1.5px 2px rgb(0 0 0 / 25%);
}

.ribbon h3:before,.ribbon h3:after{
	position: absolute;
	content: '';
	top: 100%;
	border: none;
	border-bottom: solid 10px transparent;
}

.ribbon h3:before {
	left: 0;
	border-right: solid 15px #871616;/*左の折り返し部分*/
}
.ribbon h3:after {
	right: 0;
	border-left: solid 15px #871616;/*右の折り返し部分*/
}

/*結果発表終了*/

@media (max-width: 1024px) {
	header h1 span{
		font-size: 5em;
		margin-top: -0.5em;
	}
	#detail dl dd table.product th
	,#detail dl dd table.product td{
		display: block;
		text-align: center;
	}
	.productIcons li{
		width: calc(100% / 3);
	}
	#detail dl dd table.list th
	,#detail dl dd table.list td{
		display: block;
	}
	/*結果発表開始*/
	.ideaResult table thead{
		display:none;
	}
	.ideaResult table tr td{
		display:block;
		text-align:center;
	}
	.ideaResult table tr td:nth-of-type(1){
		font-weight:bold;
		padding: 0.5em 0 0 0;
	}
	/*結果発表終了*/
}