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

/*----------------------
base
-----------------------*/
html {
  /*overflow: auto;*/
}

body {
  /*overflow: hidden;*/
  width: 100%;
  margin: 0;
  color: #000;
  font-family: 'Noto Sans JP', sans-serif, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  width: 100%;
}

img {
  vertical-align: bottom;
  padding: 0;
  margin: 0;
  border: none;
	width:100%;
}

ol,
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

@media screen and (max-width: 768px) {
	.pc {
	  display: none;
	}

	.sp {
	  display: block;
	}
}

a{
	transition-duration: 0.3s;
}

a:hover{
  opacity: 0.6;
}

/*----------------------
mainvisual
-----------------------*/
#mainvisual{
	width:100%;
  min-width: 915px;
	margin:0 auto;
	position:relative;
}

#mainvisual #top_bar{
	width:100%;
	background-color:#fd6e00;
}

#mainvisual #top_bar ul{
	width:80%;
	margin:0 auto;
  justify-content: start;
  align-items: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding:5px 0;
	font-weight:700;
}

#mainvisual #top_bar ul li:nth-child(1){
	width:100px;
	margin-right:20px;
}

#mainvisual #top_bar ul li:nth-child(2){
	width:calc(100% - 120px);
	color:#fff;
}

#mainvisual #top_bar ul li:nth-child(2) a{
	color:#fff;
	text-decoration:none;
}

#mainvisual .container{
	width:100%;
  min-width: 915px;
	margin:0 auto;
	position:relative;
	background: url("../img/bg.png") no-repeat left top #fffeef;
	background-size:50% auto;
}

#mainvisual .container ul{
	width:100%;
	margin:0 auto;
  justify-content: start;
  align-items: stretch;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

#mainvisual .container ul li{
	width:50%;
	position:relative;
}

#mainvisual .container ul li:nth-child(1) p{
	width:20%;
	padding:9% 0 0 5%;
}

#mainvisual .container ul li:nth-child(1) h1{
	width:68%;
	margin:auto;
	margin-top:-3%;
}

#mainvisual .container ul li:nth-child(1) h2{
	width:66%;
	margin:auto;
	padding-top:3%;
}

#mainvisual .container ul li:nth-child(1) h3{
	width:74%;
	margin:auto;
	padding-top:5%;
}

@media screen and (max-width: 768px) {
	#mainvisual{
	  min-width: 100%;
	}

	#mainvisual #top_bar ul{
		width:96%;
		padding:1% 0;
	}

	#mainvisual #top_bar ul li:nth-child(1){
		width:14%;
		margin-right:2%;
	}

	#mainvisual #top_bar ul li:nth-child(2){
		width:84%;
		font-size:2.0vw;
	}

	#mainvisual .container{
	  min-width: 100%;
		background: url("../img/bg.png") no-repeat center top #fffeef;
		background-size:100% auto;
	}

	#mainvisual .container ul li{
		width:100%;
	}

	#mainvisual .container ul li:nth-child(1) p{
		width:20%;
		padding:4% 0 0 3%;
	}

	#mainvisual .container ul li:nth-child(1) h1{
		width:76%;
		margin:auto;
		margin-top:-2%;
	}

	#mainvisual .container ul li:nth-child(1) h2{
		width:70%;
		margin:auto;
		padding-top:3%;
	}

	#mainvisual .container ul li:nth-child(1) h3{
		width:80%;
		margin:auto;
		padding-top:5%;
	}

	#mainvisual .container ul li:nth-child(1){
		padding-bottom:6%;
	}
}

/*----------------------
present
-----------------------*/
#present{
	width:100%;
  min-width: 915px;
	margin:0 auto;
	position:relative;
	background: url("../img/present_bg.png");
	padding-bottom:60px;
}

.wrapper{
	width: 915px;
	margin:0 auto;
	position:relative;
}

#present h2{
	width:795px;
	margin:0 auto;
	padding-top:50px;
}

#present h3{
	width:620px;
	margin:0 auto;
	padding-top:20px;
}

#present .step{
	width:100%;
	margin:70px auto 0;
	border:3px solid #dbd386;
	border-radius:20px;
	box-sizing: border-box;
	background-color:#fff;
}

#present .step h4{
	width:200px;
	margin:-30px auto 0;
}

#present .step ul.step1{
	width:530px;
	margin:0 auto;
  justify-content: space-between;
  align-items: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding:20px 0;
}

#present .step ul.step1 li:nth-child(1){
	font-size:20px;
	color:#503220;
	font-weight:700;
	text-align:center;
}

#present .step ul.step1 li:nth-child(2) a{
	display:block;
	width:240px;
	font-size:14px;
	color:#fff;
	font-weight:700;
	text-align:center;
	text-decoration:none;
	border-radius:10px;
	line-height:1.4;
	padding:5px 0;
	background: url("../img/twitter_icon.png") no-repeat 15px 50% #1d9bf0;
	background-size:20px auto;
}

#present .step p{
	font-size:20px;
	color:#503220;
	font-weight:700;
	text-align:center;
	padding-top:20px;
}

#present .step p span{
	font-size:16px;
}

#present .step ul.step2{
	width:860px;
	margin:0 auto;
  justify-content: space-between;
  align-items: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding:30px 0 40px;
}

#present .step ul.step2 li{
	width:24%;
}

#present .step ul.step2 li a{
	display:block;
	text-decoration:none;
	position:relative;
}

#present .step ul.step2 li .hashtag{
	font-size:20px;
	letter-spacing:1px;
	color:#fff;
	font-weight:700;
	text-align:center;
	padding:2px 0 3px;
	position:relative;
}

#present .step ul.step2 li .hashtag:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 15px;
	margin: auto;
	vertical-align: middle;
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#present .step ul.step2 li:nth-child(1) .hashtag{
	background-color:#ea6300;
}

#present .step ul.step2 li:nth-child(2) .hashtag{
	background-color:#fc9c05;
}

#present .step ul.step2 li:nth-child(3) .hashtag{
	background-color:#aa5217;
}

#present .step ul.step2 li:nth-child(4) .hashtag{
	background-color:#e5b907;
}


@media screen and (max-width: 768px) {
	#present{
	  min-width: 100%;
		padding-bottom:6%;
	}

	.wrapper{
		width: 92%;
	}

	#present h2{
		width:100%;
		padding-top:7%;
	}

	#present h3{
		width:90%;
		margin:0 auto;
		padding-top:5%;
	}

	#present .step{
		width:100%;
		margin:10% auto 0;
	}

	#present .step h4{
		width:32%;
		margin:-4vw auto 0;
	}

	#present .step ul.step1{
		width:70%;
		padding:5% 0;
	}

	#present .step ul.step1 li:nth-child(1){
		width:100%;
		font-size:3.6vw;
		text-align:center;
		margin-bottom:5%;
	}

	#present .step ul.step1 li:nth-child(2){
		width:100%;
	}

	#present .step ul.step1 li:nth-child(2) a{
		display:block;
		width:100%;
		font-size:3.2vw;
		line-height:1.4;
		padding:2% 0;
		background: url("../img/twitter_icon.png") no-repeat 10% 50% #1d9bf0;
		background-size:8% auto;
	}

	#present .step p{
		font-size:3.6vw;
		padding-top:4%;
	}

	#present .step p span{
		font-size:3.0vw;
	}

	#present .step ul.step2{
		width:92%;
		padding:3% 0 1%;
	}

	#present .step ul.step2 li{
		width:48%;
		margin-bottom:4%;
	}

	#present .step ul.step2 li .hashtag{
		font-size:3.0vw;
		padding:1% 0 2%;
		position:relative;
	}

}

/*----------------------
history
-----------------------*/
#history{
	width:100%;
  min-width: 915px;
	margin:0 auto;
	position:relative;
	background: url("../img/photo.png") no-repeat center 70px #fffeef;
	padding:80px 0 60px;
}

#history .history_block{
	width:100%;
	position:relative;
	margin:0 auto;
	box-sizing: border-box;
	background-color:#fff;
}

#history .block1{
	border:2px solid #fd6e00;
	margin-bottom:70px;
}

#history .block1 h2{
	width:470px;
	margin:-30px auto 0;
}

#history .block2{
	border:2px solid #fcae00;
}

#history .block2 h2{
	width:270px;
	margin:-30px auto 0;
}

#history p.lead{
	color:#5b2a1b;
	font-weight:700;
	font-size:16px;
	padding:20px 0;
	width:850px;
	margin:0 auto;
	line-height:1.8;
}

#history .block1 p{
	text-align:center;
}

#history .block1 p span{
	color:#fd6e00;
}

#history .example{
	background-color:#fffeef;
	font-weight:700;
	font-size:16px;
	padding:10px 0;
	width:850px;
	margin:20px auto 30px;
	line-height:1.8;
	position:relative;
}

#history .example p{
	color:#5b2a1b;
	font-weight:700;
	font-size:14px;
	text-align:left;
	margin-left:100px;
}

#history .example p:before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: #e44f30;
	margin-left: -8px;
	margin-right: 5px;
}

#history .example p.co-2:before {
	background-color: #f1b51b;
}

#history .example p.co-3:before {
	background-color: #a2ca2f;
}

#history .example p span {
	color: #e91c2c;
}

.abs{
	width:30px;
	position:absolute;
	left:50px;
	top:0;
	bottom:0;
	margin:auto;
}

#history .block2 .pc{
	width:850px;
	margin:0 auto 30px;
}

@media screen and (max-width: 768px) {
	#history{
	  min-width: 100%;
		padding:8% 0 6%;
		background-image:none;
	}

	#history .block1{
		margin-bottom:7%;
	}

	#history .block1 h2{
		width:52%;
		margin:-3vw auto 0;
	}

	#history .block2 h2{
		width:30%;
		margin:-3vw auto 0;
	}

	#history p.lead{
		font-size:2.2vw;
		padding:3% 0;
		width:94%;
	}

	#history .block1 p{
		text-align:left;
	}

	#history .example{
		font-size:2.2vw;
		padding:2% 0;
		width:94%;
		margin:2% auto 3%;
		line-height:1.8;
		position:relative;
	}

	#history .example p{
		font-size:1.8vw;
		margin-left:3.5%;
	}

	#history .example p:before {
		content: "";
		display: inline-block;
		width: 10px;
		height: 10px;
		background-color: #e44f30;
		margin-left: -8px;
		margin-right: 5px;
	}

	#history .example .sp{
		width:14%;
		padding:0 0 1% 2%;
	}

	#history .block2 .sp{
		width:50%;
		margin:2% auto 5%;
	}
}

/*----------------------
prize
-----------------------*/
#prize{
	width:100%;
  min-width: 915px;
	margin:0 auto;
	position:relative;
	background-color:#fff;
	background: url("../img/line.png") repeat-x left top;
}

#prize_inner{
	background: url("../img/line.png") repeat-x left bottom;
}

#prize .lead p{
	color:#5b2a1b;
	font-weight:700;
	font-size:16px;
	text-align:center;
	padding-top:50px;
}

#prize .lead h2{
	color:#5b2a1b;
	font-weight:900;
	font-size:28px;
	text-align:center;
	padding-top:20px;
}

#prize .lead h2 span{
	color:#f22020;
}

#prize h3{
	width:410px;
	margin:50px auto 25px;
}

#prize ul{
	width:880px;
	margin:0 auto;
	padding-bottom:60px;
  justify-content: space-between;
  align-items: stretch;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

#prize ul li{
	width:270px;
	border:3px solid #e8e8e8;
	border-radius:20px;
	box-sizing: border-box;
}
#prize ul li .prize_img{
	width:210px;
	margin:0 auto;
	padding:20px 0;
}

#prize ul li a {
  text-decoration: none;
}
#prize ul li a:hover {
  text-decoration: underline;
}

#prize ul li p{
	width:240px;
	margin:0 auto;
	color:#503220;
	font-weight:700;
	font-size:16px;
}

#prize ul li span{
	display:block;
	width:240px;
	margin:5px auto 0;
	font-size:14px;
	padding-bottom:10px;
  color: #000;
}

@media screen and (max-width: 768px) {
	#prize{
	  min-width: 100%;
	}

	#prize .lead p{
		font-size:3.6vw;
		padding-top:8%;
		line-height:1.4;
	}

	#prize .wrapper{
		width: 100%;
	}

	#prize .lead h2{
		font-size:4.8vw;
		padding-top:2%;
	}

	#prize h3{
		width:58%;
		margin:5% auto 2%;
	}

	#prize ul{
		width:92%;
		padding-bottom:6%;
		margin-top:5%;
	}

	#prize ul li{
		width:100%;
		margin-bottom:5%;
		position:relative;
	}

	#prize ul li .prize_img{
		width:26%;
		padding:0;
		position:absolute;
		left:3%;
		top:9%;
	}

	#prize ul li p{
		width:60%;
		margin:0;
		font-size:3.2vw;
		padding:3% 0 2% 34%;
	}

	#prize ul li span{
		width:60%;
		margin:0;
		font-size:2.4vw;
		padding:0 0 10% 34%;
	}

	#prize ul li:nth-child(2) span{
		padding-bottom:13%;
	}

}

/*----------------------
requirement
-----------------------*/
#requirement{
	width:100%;
  min-width: 915px;
	margin:0 auto;
	position:relative;
	background: url("../img/present_bg.png");
	padding-bottom:60px;
}

#requirement a{
	color:#f22020;
}

#requirement .wrapper{
	box-sizing: border-box;
	border:2px solid #aa5217;
	background-color:#fff;
	font-size:16px;
	color:#503220;
}

#requirement #requirement_inner{
  display: none;
	padding:30px;
}

#requirement .wrapper h2{
	background-color:#aa5217;
	color:#fff;
	text-align:center;
	font-weight:700;
	font-size:28px;
	padding:5px 0;
}
#requirement .wrapper h2.title{
  cursor: pointer;
  position: relative;
}
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #fff;

}
.title::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);

}
.title::after{
    top:48%;
    left: 15px;
    transform: rotate(90deg);

}
.title.close::before{
	transform: rotate(45deg);
}

.title.close::after{
	transform: rotate(-45deg);
}


#requirement .wrapper h3{
	margin-top:30px;
}

ul.num {
  counter-reset: count 0;
	padding-left:1em;
}

ul.num li:before {
  content: counter(count) ". ";
  counter-increment: count 1;
	margin-left:-1em;
}

ul.circle {
	padding-left:1em;
}

ul.circle li:before {
  content: "●";
	margin-left:-1em;
}

ul.caution {
	padding-left:2em;
}

ul.caution li:before {
  content: "※";
	margin-left:-1em;
}

ul.dot {
	padding-left:1em;
}

ul.dot li:before {
  content: "・";
	margin-left:-1em;
}

@media screen and (max-width: 768px) {
	#requirement{
	  min-width: 100%;
		padding-bottom:6%;
	}

	#requirement .wrapper{
		font-size:2.4vw;
	}

	#requirement #requirement_inner{
		padding:4%;
	}

	#requirement .wrapper h2{
		font-size:4.0vw;
		padding:1% 0;
	}

	#requirement .wrapper h3{
		margin-top:5%;
	}
}

/*----------------------
footer
-----------------------*/
footer{
	width:100%;
  min-width: 915px;
	margin:0 auto;
	position:relative;
	background-color:#fff;
	padding:10px 0;
}

footer ul{
	width: 915px;
	margin:0 auto;
  justify-content: space-between;
  align-items: stretch;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

footer ul a{
	color:#000;
	text-decoration:none;
	position:relative;
	padding-left:15px;
}

footer ul a:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	vertical-align: middle;
	width: 6px;
	height: 6px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

@media screen and (max-width: 768px) {
	footer{
	  min-width: 100%;
		padding:2% 0;
	}

	footer ul{
		width: 94%;
		font-size:2.6vw;
	}
}