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

/*-------------------------------
  Font Set - Color
-------------------------------*/


/*-------------------------------
  .index
-------------------------------*/
.mv{
	background: url(../images/index/mv.png) center top no-repeat;
	background-size: cover;
	width: 100%;
	height: 550px;
	position: relative;
}
.mv h1,
.mv p:first-child{
	background: url(../images/index/mv_ttl.png) center top no-repeat;
	width: 788px;
	height: 224px;
	position: absolute;
	top:30%;
	left: 50%;
	margin-left: -356px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.mv .date{
	background: url(../images/index/mv_day.svg) center top no-repeat;
  width: 440px;
  height: 130px;
  position: absolute;
  bottom: 10%;
  left: 50%;
  margin-left: -212px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-size: 100% auto;
}
.mv .date+p{
	width: 100%;
	padding: 30px 0;
	display: block;
	position: absolute;
	top: 73px;
	left: 0;
	color: #fff;
	font-style: italic;
	font-size: 38px;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	text-shadow: 1px 1px 30px #000;
}
section{
	padding:80px 0 90px;
	box-sizing: border-box;
}
section h2,
.campanies section h1{
	position: relative;
	color: #603813;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}
section h2:before,
section h2:after,
.campanies section h1:before,
.campanies section h1:after{
	content: "";
	background: url(../images/common/ttl_boder.svg) center top repeat-x;
	width: 340px;
	height: 10px;
	position: absolute;
	top: 10px;
}
.campanies section h2:before,
.campanies section h2:after{
	display: none;
}
section h2:before,
.campanies section h1:before{
	left:50%;
	margin-left: -550px;
}
section h2:after,
.campanies section h1:after{
	right: 50%;
	margin-right: -550px;
}
section h2 span,
.campanies section h1 span{
	background: center top no-repeat;
	width: 330px;
	height: 30px;
	display: block;
	margin: 0 auto 10px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
section .mainTxt{
	font-size: 20px;
	font-weight: bold;
	line-height: 2.5;
	text-align: center;
}
section .btn{
	width: 420px;
	margin: 70px auto 0;
}
section .btn a{
	height: 80px;
	border: solid 1px #000;
	display: block;
	position: relative;
	color: #000;
	font-size: 24px;
	line-height: 80px;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .3s;
	transition: all .3s;
}
section .btn a:after{
	content: "";
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-left: 15px solid #000;
	border-bottom: 10px solid transparent;
	position: absolute;
	right: 20px;
	top:50px;
	margin-top: -20px;
}
section .btn a:hover{
	background: #000;
	color: #FFF;
}
section .btn a:hover:after{
	border-left: 15px solid #FFF;
}
.con01 h2 span{
	background-image: url(../images/index/ttl_con01.svg);
}
.con01 h3{
	background: url(../images/index/con01_catch.svg) center top no-repeat;
	width: 770px;
	height: 100px;
	margin: 60px auto 0;
	text-align: center;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.con01 h3 img{
	width: 100%;
	max-width: 770px;
	margin: 0 auto;
}
.con01 h3+.mainTxt{
	margin-top: 65px;
}
.con02 h2 span{
	background-image: url(../images/index/ttl_con02.svg);
}
section .aboutList{
	max-width: 1100px;
	margin: 40px auto 0;
	display: block;
	letter-spacing: -.4em;
	text-align: left;
}
section .aboutList li{
	background: #efefef;
	width: 540px;
	height: 210px;
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
}
.campanies section .aboutList li{
	width: 100%;
}
.campanies section .aboutList li+li{
	margin-top: 20px;
}

section .aboutList li:nth-child(even){
	margin-left: 20px;
}
.campanies section .aboutList li:nth-child(even){
	margin-left: 0;
}
section .aboutList li:nth-child(n+3){
	margin-top: 20px;
}
section .aboutList li .imgArea{
	width: 200px;
	height: 210px;
	background: #FFF;
	float: left;
	border-width: 1px 0 1px 1px;
	border-color: #f2f2f2;
	border-style: solid;
	box-sizing: border-box;
	text-align: center;
}
section .aboutList li .imgArea img{
	width: 100%;
}
section .aboutList li .txtArea{
	width: 340px;
	height: 210px;
	float: left;
	padding: 20px;
	box-sizing: border-box;
	text-align: left;
}
.campanies section .aboutList li .txtArea{
	width: auto;
	margin-left: 200px;
	float: none;
}
section .aboutList li .txtArea h3,
section .aboutList li .txtArea h2{
	color: #00A99D;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.3;
}
section .aboutList li .txtArea h2{
	text-align: left;
}
section .aboutList li .txtArea p{
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.5;
}
.con02 .koutoukuArea{
	width: 1100px;
	border: 14px solid #00A99D;
	padding: 50px 26px;
	box-sizing: border-box;
	margin: 30px auto 0;
}
.con02 .koutoukuArea h3{
	display: block;
	padding-bottom: 15px;
	font-size: 24px;
	color: #00A99D;
	border-bottom:solid 2px #00A99D;
}
.con02 .koutoukuArea .aboutList li{
	background: none;
	width: 495px;
	height: 180px;
	display: inline-block;
	vertical-align: top;
}
.con02 .koutoukuArea .aboutList li+li{
	margin-left: 30px;
}

.con02 .koutoukuArea .aboutList li .imgArea{
	width: 220px;
	height: 180px;
	background: #FFF;
	float: left;
	border: none;
	box-sizing: border-box;
}

.con02 .koutoukuArea .aboutList li .txtArea{
	width: 275px;
	height: 180px;
	float: left;
	padding: 10px;
	box-sizing: border-box;
	text-align: left;
}
.con02 .koutoukuArea .aboutList li .txtArea h3{
	color: #00A99D;
	font-size: 24px;
	font-weight: bold;
	border: none;
}
.con02 .koutoukuArea .aboutList li .txtArea p{
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.5;
}
.con03 h2 span,
.campanies section h1 span{
	background-image: url(../images/index/ttl_con03.svg);
}
.con04 h2 span{
	background-image: url(../images/index/ttl_con04.svg);
}
.con03 .mainTxt,
.con04 .mainTxt,
.con05 .mainTxt,
.con06 .mainTxt{
	margin-top: 35px;
}
section .mainTxt+.mainTxt{
	margin-top:1em;
}
section .boothList{
	max-width: 1100px;
	margin: 40px auto 0;
	display: block;
	letter-spacing: -.4em;
	text-align: left;
}
section .boothList li{
	width: 200px;
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
}

section .boothList li:nth-child(5n+6){
	margin-left: 0;
}
section .boothList li:nth-child(n + 6){
	margin-top: 65px;
}
section .boothList li img{
	width: 100%;
}
section .boothList li p{
	margin-top: 10px;
	color: #000;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}
section .boothList li .cat{
	background: #F7931E;
	height: 25px;
	padding: 0 10px;
	box-sizing: border-box;
	display: block;
	color: #FFF;
	font-size: 16px;
	line-height: 25px;
	display: none;/*一時非表示処理*/
}
section .boothList li+li{
	margin-left: 25px;
}
section .contact{
	margin-top: 40px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}
section .contact+p{
	margin-top: 10px;
	font-size: 20px;
	font-weight: bold;
	line-height: 2;
	text-align: center;
}
section .contact+p span{
	font-size: 16px;
	text-align: center;
}
.con04 .aboutList li,
.con04 .aboutList li .imgArea,
.con04 .aboutList li .txtArea{
	height: auto;
}
.con05 h2 span{
	background-image: url(../images/index/ttl_con05.svg);
}
.con06 h2 span{
	background-image: url(../images/index/ttl_con06.svg);
}
section .figcaption{
	width: 1100px;
	margin: 40px auto 0;
	text-align: center;
}
section .figcaption img{
	width: 100%;
}
.con06 h3{
	margin-top: 150px;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
}

#form_body input,
#form_body button,
#form_body textarea,
#form_body select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
	border: none;
}
#form_body .con01 h2 span {
	width: 530px;
	height: 50px;
	background-image: url(../images/form/ttl_con01.png);
	background-size: 100% auto;
	position: relative;
	top: -5px;
	z-index: +1;
	background-position: top;
}

#form_body .con02 h2 span {
	width: 260px;
	height: 40px;
	background-image: url(../images/index/ttl_con03.svg);
	background-size: 100% auto;
	position: relative;
	top: -5px;
	z-index: +1;
	background-position: top;
}

#form_body .con02 h2 {
	margin-bottom: 40px;
}

#form_body .guidelinesTable {
	width: 900px;
	margin: 60px auto 0;
}
#form_body .guidelinesTable dl {
	font-size: 20px;
	padding: 10px;
	line-height: 1.4;
	display: table;
	border-top: 1px solid #999;
	width: 100%;
}
#form_body .guidelinesTable dl:last-child {
	border-bottom: 1px solid #999;
}
#form_body .guidelinesTable dt {
	font-weight: bold;
	display: table-cell;
	padding: 25px 50px 25px 0;
	width: 180px;
	box-sizing: border-box;
	border-right: 2px solid #29ABE2;
}
#form_body .guidelinesTable dd {
	display: table-cell;
	padding: 25px 0 25px 50px;
}
#form_body .form_ttl {
	font-size: 32px;
	text-align: center;
	color: #0071BC;
	max-width: 900px;
	margin: 0 auto 60px;
}
#form_body .form_ttl:before {
	display: none;
}
#form_body .form_ttl:after {
	right: auto;
	margin: auto;
	background: url(../images/common/ttl_boder.svg) center top repeat-x;
	width: 100%;
	height: 10px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -60px;
}
#form_body .form {
	width: 900px;
	margin: 40px auto 0;
	font-size: 20px;
	line-height: 1.4;
}
#form_body .form .form_row {
	margin-bottom: 20px;
	width: 100%;
	display: table;
}
#form_body .form .form_label {
	width: 300px;
	padding-right: 50px;
	box-sizing: border-box;
	display: table-cell;
	vertical-align: top;
	font-weight: bold;
	position: relative;
}
#form_body .form .form_label span.must {
	background-color: #f00;
	color: #fff;
	font-size: 14px;
	padding: 3px 5px;
	border-radius:2px;
	position: absolute;
	right: 20px;
}
#form_body .form .form_label span.attention {
	font-size: 16px;
	display: block;
	margin-top: 10px;
	font-weight: normal;
}
#form_body .form .form_parts {
	box-sizing: border-box;
	display: table-cell;
}

#form_body .form .form_parts textarea {
	background-color: #E6E6E6;
}
#form_body .form .form_parts input {
	background-color: #E6E6E6;
}
#form_body .form .form_parts input,
#form_body .form .form_parts button,
#form_body .form .form_parts textarea,
#form_body .form .form_parts select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
	border: none;
	font-size: 20px;
	line-height: 1.4;
	padding: 5px 10px;
	width: 100%;
}
#form_body .form .form_parts input[type="checkbox"] {
	display: none;
}
#form_body .form .form_parts .parts_check {
	margin-left: 10px;
	cursor: pointer;
}
#form_body .form .form_parts .parts_check+.parts_check {
	margin-left: 25px;
}
#form_body .form .form_parts .parts_check span {
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 1px solid #333;
	margin-right: 10px;
	position: relative;
}
#form_body .form .form_parts .parts_check input[type="checkbox"]:checked+span:before {
	content: "";
	display: block;
	position: absolute;
	width: 15px;
	height: 5px;
	position: absolute;
	border-left: 2px solid #0071BC;
	border-bottom: 2px solid #0071BC;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#form_body .form .btn_wrap {
	position: relative;
}
#form_body .form .btn_submit {
	width: 420px;
	font-size: 24px;
	height: 80px;
	line-height: 80px;
	border: 1px solid #ccc;
	text-align: center;
	margin: 70px auto 0;
	display: block;
	transition: background-color .3s ease;
	cursor: pointer;
}
#form_body .form .btn_back {
	width: 150px;
	font-size: 14px;
	height: 40px;
	line-height: 40px;
	margin: 0;
	display: block;
	cursor: pointer;
	position: absolute;
	text-align: left;
	padding: 2px 4px;
	background: transparent;
}
#form_body .form .btn_submit:hover {
	background: #000;
	color: #fff;
}
#form_body .form .btn_back:hover {
	text-decoration: underline;
}
#form_body .form .form_text {
	text-align: center;
	font-size: 20px;
	margin-top: 50px;
}
#form_body .form .form_text.complete {
	text-align: center;
	margin: 80px 0;
	line-height: 2;
}
#form_body .form .error {
	color: red;
	font-size: 16px;
	margin-top: 5px;
	margin-left: 5px;
}
/*アスペクト比が1より小さく(以下しか取れないため便宜上9/10とする)（つまり縦長）幅が414以上、
　もしくはアスペクト比が1以上（つまり横長）幅が736以上（iPhone6Plusより大きいデバイス）*/
@media screen and (max-aspect-ratio: 9/10) and (min-width: 415px),screen and (min-aspect-ratio: 1/1) and (min-width: 737px){
}
/*アスペクト比が1より小さく(以下しか取れないため便宜上9/10とする)（つまり縦長）幅が413以下、
　もしくはアスペクト比が1以上（つまり横長）幅が735以下（iPhone6Plusより小さいデバイス）*/
@media screen and (max-aspect-ratio: 9/10) and (max-width: 414px),screen and (min-aspect-ratio: 1/1) and (max-width: 736px){
	.mv{
		width: 100%;
		height: 80vh;
	}
	.mv h1,
	.mv p:first-child{
		background-size: contain;
		width: 100%;
		height: 100px;
		position: absolute;
		top:30%;
		left: 0;
		margin-left: 0;
	}
	.mv .date{
		background-size: 100%;
		width: 100%;
		height: 130px;
		position: absolute;
		left: 0;
		margin-left: 0;
	}
	.mv .date+p{
		padding: 15px 0;
		top: 20%;
		font-size: 20px;

	}
	section{
		padding:40px 15px 50px;
	}
	section h2,
	.campanies section h1{
		font-size: 14px;
	}
	section h2:before,
	.campanies section h1:before{
		display: none;
	}
	section h2:after,
	.campanies section h1:after{
		background-size: contain;
		width: 250px;
		height: 5px;
		position: absolute;
		top: auto;
		bottom: -20px;
	}
	section h2:after,
	.campanies section h1:after{
		right: 50%;
		margin-right:-125px;
	}
	section h2 span,
	.campanies section h1 span{
		background-size: contain;
		width: 100%;
		height: 25px;
	}
	section .mainTxt{
		font-size: 16px;
		line-height: 1.6;
		text-align: left;
	}
	section .btn{
		width: 100%;
		margin: 60px auto 0;
	}
	section .btn a{
		height: 60px;
		font-size: 15px;
		line-height: 60px;
	}
	section .btn a:after{
		margin-top: -28px;
	}
	section .btn a:hover{
		opacity: 1;
	}
	.con01 h2 span{
		background-image: url(../images/index/ttl_con01.svg);
	}
	.con01 h3{
		background: url(../images/index/sp/con01_catch.svg) center top no-repeat;
		background-size: contain;
		width: 100%;
		height: 90px;
		margin: 60px auto 0;
	}
	.con01 h3+.mainTxt{
		margin-top: 40px;
	}
	section .aboutList li{
		width: 100%;
		height: auto;
		display: block;
	}
	section .aboutList li:nth-child(even){
		margin-left: 0;
	}
	section .aboutList li+li{
		margin-top: 20px;
	}
	section .aboutList li .imgArea{
		width: 100%;
		height: auto;
		float: none;
	}
	section .boothList li img{
		width: 70%;
		height: auto;
	}
	section .aboutList li .txtArea{
		width: 100%;
		height: auto;
		float: none;
	}
	.campanies section .aboutList li .txtArea{
		margin-left: 0;
	}
	section .aboutList li .txtArea h3,
	section .aboutList li .txtArea h2{
		font-size: 20px;
	}
	section .aboutList li .txtArea p{
		margin-top: 10px;
		font-size: 14px;
		line-height: 1.5;
	}
	.con02 .koutoukuArea{
		width: 100%;
		border: 5px solid #8cc63f;
		padding: 30px 20px;
	}
	.con02 .koutoukuArea h3{
		display: block;
		padding-bottom: 15px;
		font-size: 18px;
		color: #00A99D;
		border-bottom:solid 2px #00A99D;
	}
	.con02 .koutoukuArea .aboutList li{
		width: 100%;
		height: auto;
		display: block;
	}
	.con02 .koutoukuArea .aboutList li+li{
		margin:20px 0 0 0;
	}
	.con02 .koutoukuArea .aboutList li .imgArea{
		width: 100%;
		height: auto;
		float: none;
	}
	.con02 .koutoukuArea .aboutList li .txtArea{
		width: 100%;
		height: auto;
		float: none;
		padding: 20px;
	}
	.con02 .koutoukuArea .aboutList li .txtArea h3{
		font-size: 18px;
	}
	.con02 .koutoukuArea .aboutList li .txtArea p{
		margin-top: 10px;
		font-size: 14px;
	}
	.con03 .mainTxt,
	.con04 .mainTxt,
	.con05 .mainTxt,
	.con06 .mainTxt{
		margin-top: 40px;
	}
	section .boothList li{
		width: 100%;
		display: block;
		text-align: center;
	}
	section .boothList li+li{
		margin: 50px 0 0 0;
	}
	section .figcaption{
		width: 100%;
	}
	section .boothList li:nth-child(n + 6){
		margin-top: 50px;
	}
	section .boothList li .cat{
		display: inline-block;
		display: none;/*一時非表示処理*/
	}
	section .contact{
		margin-top: 40px;
		font-size: 24px;
		font-weight: bold;
		text-align: center;
	}
	section .contact+p{
		margin-top: 10px;
		font-size: 20px;
		font-weight: bold;
		line-height: 2;
		text-align: center;
	}
	section .contact+p span{
		font-size: 16px;
		text-align: center;
	}
	.con04 .aboutList li{
		height: auto;
	}
	.con04 .aboutList li .imgArea{
		height: auto;
	}
	.con04 .aboutList li .txtArea{
		height: auto;
	}
	.con05 h2 span{
		background-image: url(../images/index/ttl_con05.svg);
	}
	.con06 h2 span{
		background-image: url(../images/index/ttl_con06.svg);
	}
	section .figcaption{
		margin-top: 40px;
		text-align: center;
	}
	.con06 h3{
		margin-top: 150px;
		font-size: 40px;
		font-weight: bold;
		text-align: center;
	}
	#form_body .con01 h2 span {
		width: 95%;
		height: 40px;
	}
	
	#form_body .con02 h2 span {
		width: 95%;
		height: 40px;
	}

	#form_body .guidelinesTable {
		width: 100%;
		margin: 45px auto 0;
	}
	#form_body .guidelinesTable dl {
		font-size: 16px;
		display: block;
		width: 100%;
		padding: 0;
	}
	#form_body .guidelinesTable dt {
		font-size: 18px;
		font-weight: bold;
		display: block;
		padding: 8px 0;
		width: 100%;
		border-right: none;
		/* border-bottom: 1px solid #29ABE2; */
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#form_body .guidelinesTable dd {
		font-size: 14px;
		display: block;
		padding: 5px 0 30px;
		width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#form_body .form_ttl {
		font-size: 24px;
		width: 100%;
		margin: 0 auto 45px;
	}
	#form_body .form_ttl:before {
		display: none;
	}
	#form_body .form_ttl:after {
		width: 100%;
		height: 10px;
		bottom: -30px;
	}
	#form_body .form {
		width: 100%;
		margin: 30px auto 0;
		font-size: 16px;
		line-height: 1.4;
	}
	#form_body .form .form_row {
		margin-bottom: 30px;
		width: 100%;
		display: block;
	}
	#form_body .form .form_label {
		width: 100%;
		font-size: 16px;
		padding-right: 0;
		display: block;
	}
	#form_body .form .form_label span.must {
		font-size: 12px;
		padding: 3px 5px;
		position: static;
		margin-left: 10px;
	}
	#form_body .form .form_label span.attention {
		font-size: 14px;
		display: block;
	}
	#form_body .form .form_parts {
		display: block;
		margin-top: 15px;
	}

	#form_body .form .form_parts input,
	#form_body .form .form_parts button,
	#form_body .form .form_parts textarea,
	#form_body .form .form_parts select {
		font-size: 14px;
		width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#form_body .form .form_parts input[type="checkbox"] {
		display: none;
	}
	#form_body .form .form_parts .parts_check {
		margin-left: 10px;
		cursor: pointer;
	}
	#form_body .form .form_parts .parts_check+.parts_check {
		margin-left: 15px;
	}
	#form_body .form .form_parts .parts_check span {
		display: inline-block;
		width: 15px;
		height: 15px;
		border: 1px solid #333;
		margin-right: 10px;
		position: relative;
	}
	#form_body .form .btn_submit {
		width: 100%;
		font-size: 18px;
		height: 60px;
		line-height: 60px;
		margin: 40px auto 0;
	}
	#form_body .form .btn_submit:hover {
		background: #fff;
		color: #000;
	}
	#form_body .form .form_text {
		text-align: center;
		font-size: 16px;
		margin-top: 50px;
	}

}


.comingsoon {
	text-align: center;
	width: 1100px;
	margin: 45px auto 0;
}
.comingsoon img {
	width: 100%;
	height: auto;
}
.noticeText {
	margin-top: 50px;
	font-size: 26px;
  font-weight: bold;
  line-height: 2.5;
  text-align: center;
}
@media screen and (max-aspect-ratio: 9/10) and (max-width: 414px),screen and (min-aspect-ratio: 1/1) and (max-width: 736px){
	.comingsoon {
		width: 100%;
	}
	.noticeText {
		margin-top: 35px;
		font-size: 16px;
	  line-height: 2;
	  text-align: left;
	}
}

/*-------------------------------
  ECO BOOTH / ACTIVITY
-------------------------------*/

.eco_box, .activity_box{
    height: auto!important;
}

.eco_img, .activity_img {
    width: auto!important;
    height: 200px!important;
}

.eco_txtArea{
    width: 540px!important;
    height: 400px!important;
}

.activity_txtArea {
    width: 540px!important;
    height: 260px!important;
}

p.eco_price, p.activity_price{
	font-weight: bold;
}

section .eco_list li {
    width: 248px!important;
}

section .eco_list li+li {
    margin-left: 35px!important;
}


/*アスペクト比が1より小さく(以下しか取れないため便宜上9/10とする)（つまり縦長）幅が413以下、
　もしくはアスペクト比が1以上（つまり横長）幅が735以下（iPhone6Plusより小さいデバイス）*/
@media screen and (max-aspect-ratio: 9/10) and (max-width: 414px),screen and (min-aspect-ratio: 1/1) and (max-width: 736px){
	
.eco_txtArea, .activity_txtArea {
    width: 100%!important;
    height: auto!important;
    float: none;
}

.eco_img, .activity_img {
    height: auto!important;
}

section .eco_list li {
    width: auto!important;
}

section .eco_list li+li {
    margin-left: 0!important;
}

}