@charset "UTF-8";


/* home.php *******************************************************************/
.event_name {
	display: inline-block;
	width: 260px;
	margin: 0 auto;
	padding: 0.5em;
	color: #fff;
	font-size: 2em;
	font-weight: bold;
	letter-spacing: 4px;
	text-align: center;
	background-color: #3FA6FF;
	border: 8px solid #8ACFFF;
	border-radius: 50px;
}

.event_name a {
	text-decoration: none;
	color: #fff;
}

.lead .rightarea {
	width: 70%;
}

.lead .leftarea {
	width: 30%;
}

#totalArea {
	position: relative;
	color: #fff;
	background-color: #0DA867;
}
#totalArea:before {
	content: '';
	position: absolute;
	top: -18px;
	right: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 19px;
	background-image: url(../images/edge_01.png);
	background-repeat: repeat-x;
	background-position: center top;
}
#totalArea:after {
	content: '';
	position: absolute;
	bottom: -18px;
	right: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 19px;
	background-image: url(../images/edge_01.png);
	background-repeat: repeat-x;
	background-position: center top;
	transform: rotate(180deg);
}

#totalArea .blockcontents {
	padding: 40px 0;
}

#totalArea .lead {
	margin: 0 0 2em 0;
	font-size: 1.2em;
	text-align: center;
	letter-spacing: 2px;
}

#totalArea .period {
	font-size: 1.4em;
	color: #FFEC00;
	letter-spacing: 2px;
}

#menuArea {
	background-image: url(../images/bg_sky.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

#menuArea .blockcontents {
	padding: 40px 0 150px 0;
}

#menuArea .message_close {
	width: 600px;
	margin: 0 auto;
}
@media screen and (max-width: 479px) {
	#menuArea .message_close {
		width: 100%;
		margin: 0;
	}
}

#infoArea {
	position: relative;
	background-image: url(../images/bg_grass.png);
	background-position: center top;
}
#infoArea:before {
	content: '';
	position: absolute;
	top: -130px;
	right: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 150px;
	background-image: url(../images/edge_02.png);
	background-repeat: repeat-x;
	background-position: center top;
}

#infoArea .blockcontents {
	padding: 40px 0;
}

#infoArea .frame {
	box-sizing: border-box;
	min-height: 500px;
	padding: 0 0 0 140px;
	background-color: #fff;
	background-image: url(../images/kobaton_06.png);
	background-repeat: no-repeat;
	background-position: left 80px;
	background-size: 120px;
	border: 8px solid #009444;
	border-radius: 16px;
}
@media screen and (max-width: 479px) {
	#infoArea .frame {
		padding: 0;
		background-size: 50px;
		background-position: left 40px;
	}
}

#infoArea .frame .leftarea {
	padding: 32px;
}

#infoArea .frame .rightarea {
	padding: 32px;
}

@media screen and (max-width: 479px) {
	#infoArea h2 {
		margin-left: 40px;
	}
}


/* template-input.php *********************************************************/
#applicantArea {
	padding-bottom: 120px;
}

#questionArea {
	position: relative;
	background-image: url(../images/bg_grass.png);
	background-position: center top;
}
#questionArea:before {
	content: '';
	position: absolute;
	top: -130px;
	right: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 150px;
	background-image: url(../images/edge_02.png);
	background-repeat: repeat-x;
	background-position: center top;
}

#questionArea .blockcontents {
	padding: 40px 0;
}

table.applicant_info.confirm td {
	font-weight: bold;
}

/*
table.form_3column {
	width: 100%;
	border: none;
}

table.form_3column td {
	width: 33%;
	vertical-align: top;
}
@media screen and (max-width: 479px) {
	table.form_3column td {
		width: 100%;
	}
}

.form_3column .title {
	margin: 0 0 8px 0;
	font-size: smaller;
	font-weight: bold;
}
 */

.form_1column {
	margin: 40px 10px;
}

.form_1column .title {
	margin: 0 0 8px 0;
	font-size: smaller;
	font-weight: bold;
}

.form_1column textarea {
	box-sizing: border-box;
	margin: 10px 0;
	padding: 1em;
	border: none;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}

.fhp {
	width: 0;
	height: 0;
	opacity: 0;
}

.question_list .question {
	box-sizing: border-box;
	float: left;
	overflow: hidden;
	width: 220px;
	height: 540px;
	margin: 40px 10px;
	background-color: #fff;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 479px) {
	.question_list .question {
		float: none;
		margin: 40px auto;
	}
}

.question_list .fig {
	position: relative;
	width: 220px;
	height: 165px;
	overflow: hidden;
}

.question_list .fig img {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 220px;
    height: auto;
}

.question_list .fig-co2 {
	box-sizing: border-box;
	position: absolute;
	left: 0;
	right: 0;
	width: 80%;
	height: auto;
	margin: 0 auto;
	padding: 48px 0;
	text-align: center;
	color: #000;
	bottom: -25%;
	background-image: url(../images/fig-co2.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	opacity: 0.7;
	z-index: 10;
}
.question_list .fig-co2_anim {
	animation-name: co2gone;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-play-state: paused;
}
@keyframes co2gone {
	30% {
		bottom: 15%;
		opacity: 1;
		filter: blur(0);
	}

	100% {
		bottom: 0%;
		opacity: 0;
		scale: 0%;
		filter: blur(20px);
		scale: 300%;
		transform-origin: 50% 70%;
	}
}
/*
@keyframes co2gone {
	30% {
		bottom: 15%;
		opacity: 1;
		filter: blur(0);
	}

	100% {
		bottom: 20%;
		opacity: 0;
		scale: 0%;
		filter: blur(20px);
		scale: 0%;
		transform-origin: 50% 70%;
	}
}
 */
/*
@keyframes co2gone {
	50% {
		bottom: -25%;
		opacity: 1;
	}

	100% {
		bottom: 100%;
		opacity: 0;
	}
}
 */
.fin {
	scale: 0%;
}

.question_list .balloon rt {
	color: #fff;
}

.question_list .body {
	height: 210px;
	padding: 0.5em 1em 0 1em;
	letter-spacing: 1px;
	background-color: #fcfcfc;
	overflow: hidden;
}

.question_list .body.done {
	background-image: url(../images/stamp.png);
	background-position: 115px 70px;
	background-size: 120px 120px;
	background-repeat: no-repeat;
}

.question_list .body.done.bluestamp {
	background-image: url(../images/bluestamp.png);
}

.question_list .body p {
	padding: 4px 0;
	line-height: 1.4em;
}

.balloon {
	position: relative;
	display: inline-block;
	margin: 10px 0;
	padding: 12px;
	color: #fff;
	font-size: smaller;
	letter-spacing: 1px;
	border-radius: 30px;
	background: #ff9158;
}

.balloon:before {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	border: 8px solid transparent;
	border-top: 8px solid #ff9158;
	transform: translateX(-50%);
}

.question_list .done_list button {
	display: block;
	margin: 18px auto;
	width: 80%;
	padding: 0.5em;
	text-align: center;
	border: none;
	border-radius: 40px;
}

.question_list .done_list button.done {
	color: #fff;
	background-color: #3FA6FF;
}

.question_list .done_list button.done rt {
	color: #fff;
}

.question_list .label {
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	padding: 4px 8px;
	font-size: 0.6em;
	letter-spacing: 2px;
	background-color: #379CFF;
	border-radius: 0 0 4px 0;
}

.question_list .powersaving {
	box-sizing: border-box;
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 16px;
	margin: 4px;
	background-image: url(../images/icon_plug.png);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}


/* template-confirm.php *******************************************************/
.error_message {
	min-height: 500px;
}

.confirm_list {
	margin: 40px 0;
}

.confirm_list .confirm {
	margin: 0 0 16px 0;
	padding: 1em;
	background-color: #ddd;
	border-radius: 8px;
}

.confirm_list .confirm.done {
	background-color: #fff;
	border-radius: 8px;
	background-image: url(../images/stamp_opacity50.png);
	background-position: right center;
	background-size: 80px;
	background-repeat: no-repeat;
}

.confirm_list .confirm.done.bluestamp {
	background-image: url(../images/bluestamp_opacity50.png);
}

.ttl_message {
	margin: 40px 0;
	letter-spacing: 2px;
}

.comment {
	margin: 0 0 16px 0;
	padding: 1em;
	background-color: #fff;
	border-radius: 8px;
}


/* template-submit.php ********************************************************/
#rankArea {
	position: relative;
	width: 100%;
	margin: 0;
	padding-bottom: 40px;
	text-align: center;
}

#rankArea .preheight {
	height: 110px;
}

#rankArea #starArea {
	display: none;
	position: relative;
	width: 100%;
}

#rankArea #star {
	position: relative;
	margin: 0 auto;
}
@media screen and (max-width: 479px) {
	#star {
		width: 100%;
	}
}

#rankArea #radiation {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: none;
	transform: translate(-50%, -50%) scale(2);
}
#rankArea .radiation_anim {
	animation-name: radiationrotate;
	animation-duration: 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}
@keyframes radiationrotate {
	100% {
		transform: translate(-50%, -50%) scale(2) rotate(360deg);
	}
}

#rankArea #audience img {
	position: relative;
	margin: 40px auto;
}

#rankArea #rank_is {
	width: 400px;
	margin: 40px 0 0 200px;
	text-align: left;
	font-size: 1.8em;
	letter-spacing: 2px;
}
@media screen and (max-width: 479px) {
	#rankArea #rank_is {
		width: 100%;
		margin: 40px 0 0 0;
	}
}

#rankArea #rank_kobaton_frame {
	position: absolute;
	right: 200px;
	bottom: -60px;
	width: 152px;
	height: 200px;
	background-image: url(../images/kobaton_rankframe.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center top;
}
@media screen and (max-width: 479px) {
	#rankArea #rank_kobaton_frame {
		position: relative;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
}

#rankArea #rank_kobaton_frame .rank_number {
	display: none;
	position: absolute;
	top: 20px;
	left: 82px;
	width: 60px;
	line-height: 1em;
	text-align: center;
	font-size: 4em;
	font-weight: bold;
}

#resultArea {
	padding: 80px 0;
	background-image: url(../images/bg_curtain.png);
	background-position: center top;
}

#resultArea rt {
	color: #fff;
	letter-spacing: 0;
}

#resultArea .ttl_reduced .frame {
	background-color: #C39B62;
}

#summaryArea {
	position: relative;
	min-height: 300px;
	border-top: 10px solid #000;
	background-image: url(../images/bg_stage.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

#summaryArea #summary {
	box-sizing: border-box;
	position: absolute;
	top: -120px;
	left: 150px;
	width: 340px;
	padding: 16px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 16px;
}
@media screen and (max-width: 479px) {
	#summaryArea #summary {
		position: relative;
		top: 0px;
		right: 0;
		left: 0;
		width: 100%;
	}
}

#summaryArea #presenter {
	position: absolute;
	top: -110px;
	left: 520px;
	width: 300px;
}
@media screen and (max-width: 479px) {
	#summaryArea #presenter {
		position: relative;
		top: 0;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
}

#linkArea {
	position: relative;
	margin-top: 40px;
	background-color: #fff;
}

#getCertificateArea {
	margin-bottom: 40px;
}


/* reduced co2 : https://github.com/HubSpot/odometer **************************/
#totalArea rt {
	color: #fff;
	letter-spacing: 0;
}

.ttl_reduced {
	position: relative;
	width: 340px;
	margin: 0 auto 80px auto;
}

.ttl_reduced .frame {
	box-sizing: border-box;
	width: 260px;
	margin: 0 auto;
	padding: 32px 0;
	border: 8px solid #FFEC00;
	border-radius: 12px;
	color: #fff;
	text-align: center;
}

.ttl_reduced .caption {
	box-sizing: border-box;
	width: 260px;
	margin: 0 auto;
	padding: 8px 90px 0 0;
	font-weight: normal;
	line-height: 1.4em;
	letter-spacing: 1px;
}

.ttl_reduced h2 {
	margin: 0 0 16px 0;
	font-size: 1.4em;
	letter-spacing: 1px;
}

.ttl_reduced .value span.odometer {
	font-size: 1.5em;
	font-weight: bold;
}

.ttl_reduced .value span.unit {
	margin: 0 0 0 4px;
	font-size: 1em;
	font-weight: normal;
	vertical-align: -4px;
}

.ttl_reduced.gram img {
	position: absolute;
	bottom: -20px;
	left: 0;
	height: 120px;
}

.ttl_reduced.people img {
	position: absolute;
	bottom: -20px;
	right: 0;
	height: 120px;
}

.ttl_reduced.wood img {
	position: absolute;
	bottom: -20px;
	right: 0;
	height: 120px;
}

.ttl_reduced.ha img {
	position: absolute;
	bottom: -20px;
	right: 0;
	height: 100px;
}


/* page-list.php **************************************************************/
li.powersaving {
	position: relative;
	list-style-type: none;
}
li.powersaving:before {
	content: '';
	position: absolute;
	top: 0.2em;
	left: -1.2em;
	width: 1em;
	height: 1em;
	background-image: url(../images/icon_plug.png);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}


/* misc ***********************************************************************/
.anim_running {
	 animation-play-state: running !important;
}

.addtoany_shortcode {
	text-align: center;
}


/* page-dantaihokoku.php *****************************************************/
#contentsArea.dantaihokoku form .input {
	margin: 0 0 16px 0;
}

#contentsArea.dantaihokoku form .input label {
	display: block;
	margin: 0 0 4px 0;
	font-weight: bold;
}

#contentsArea.dantaihokoku form .input .notice {
	margin: 4px 0;
	color: #f00;
}

#contentsArea.dantaihokoku form dl dt {
	font-weight: bold;
}

#contentsArea.dantaihokoku form dl dd {
	color: #3FA6FF;
	font-size: larger;
}

#contentsArea.dantaihokoku form select {
	width: 100px;
	margin: 0 0 4px 0;
}

#contentsArea.dantaihokoku form input[name=classname] {
	width: 100px;
}