@charset "utf-8";


@import url('https://fonts.googleapis.com/css?family=Lato:700|Noto+Sans+JP:500&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ol, ul {
  list-style: none;
}
img {
  vertical-align: top;
  font-size: 0;
  line-height: 0;
}





/* -----------------------------------------------
  contents
----------------------------------------------- */
#Cont{
	width:100% !important;
	line-height: 1.4;
}
#Cont img {
	width: 100%;
	vertical-align: top;
}

#campaign_end{
	line-height: 1.6;
	background-color:#004ea2;
	color:#fff100;
	text-align: center;
}
.campaign_parent{
	background: #fff url(../images/) center top;
}

@media screen and (min-width: 641px) {
	.isSP{
		display: none;
	}
	#Cont .inner {
		max-width: 960px;
		margin: 0 auto;
		position: relative;
	}
	section h2{
		padding:6.25% 0 4.166%;
		width:40%;
		margin:auto;
	}
	#campaign_end{
		font-size: 26px;
	}
	#campaign_end .inner{
		padding:0.6em;
	}
	.campaign_parent{
		padding-bottom: 24px;
	}
}
@media screen and (max-width: 640px) {
	.isPC{
		display: none;
	}
	#campaign_end .inner{
		padding:1em 0;
		font-size:3.75vw;
		font-weight:bold;
	}

	section h2{
		padding:11.875% 0 6%;
		width:60%;
		margin:auto;
	}
	section h3{
		width:75.333%;
		margin: auto;
	}
	.campaign_parent{
		margin-bottom:3.125%;
	}
}

/* -----------------------------------------------
  campaign_head
----------------------------------------------- */

#campaign_head{
	width:100%;
	background-size: cover;
}

#campaign_head .content{
	position: relative;
	overflow: hidden;
}
#campaign_head .content>*{
	position: absolute;
}
#campaign_head .content::after{
	content:'';
	display:block;width:100%;height:100%;
	position: relative;

}

#head_term{
	width:100%;
	background: #00A6BE;
	background-size: contain;
}

@media screen and (min-width: 641px) {

	#campaign_head>.inner{
		width:100%;
		max-width: 100%;;
		background: #fff url(../images/top_pc.png) no-repeat center top;
		background-size: cover;
	}
	#campaign_head .content{
		max-width: 960px;
		margin: 0 auto;
	}

	#campaign_head .content::after{
		padding-bottom:50%;
		max-height:480px;
	}
	#campaign_head h1, #campaign_head p{
		width:66.562%;
		margin:2.604% 0 0 33.437%;
		z-index: 1;
		text-indent: 100%;
		color: transparent;
		font-size: 0;
	}

	#campaign_head .can{
		margin:-0.8% 0 0 -0.73%;
		width:49.166%;height:100%;
	}
	#campaign_head .can .ratio{
		position: absolute;
		width:14.218%;
		bottom:0;right:0;
		margin:0 19.49% 1.72% 0;
	}
	#campaign_head .legal_icon{
		width:6.875%;
		bottom:0;right:0;
		margin:0 1.45% 1.04% 0;
		z-index:6;
	}

	#head_term .inner{
		max-height:66px;
	}
	#head_term img{
		margin:auto;
		padding:1.25% 0;
	}
}
@media screen and (min-width: 2001px) {
	#campaign_head {
		background-size: cover;
	}
	
}

@media screen and (max-width: 640px) {

	#campaign_head>.inner{
		position: relative;
		background: #fff url(../images/top_sp.png) no-repeat center top;
		background-size:contain;
	}

    #campaign_head h1, #campaign_head p{
        width:66.562%;
        margin:2.604% 0 0 33.437%;
        z-index: 1;
        text-indent: 100%;
        color: transparent;
        font-size: 0;
    }
	#campaign_head .content::after{
		/** 416/650 **/
		padding-bottom: 64.84375%;
	}
	#campaign_head h1{
		top:0;left:0;
		margin:1.25% 0 0 6.718%;
		width:84.843%;
		z-index:2;
	}
	#campaign_head .can{
		bottom:0;left:0;
		width:70.781%;
		margin:0 0 0 14.687%;
	}
	#campaign_head .can .ratio{
		position: absolute;
		width:19.362%;
		bottom:0;right:0;
		margin:0 9.56% 3.09% 0;
	}
	#campaign_head .txt{
		bottom:0;
		margin:0 0 11.875% 3.125%;
		width:93.281%;
		z-index:5;
	}
	
	#campaign_head .legal_icon{
		width:10.3125%;
		margin:0 3.4375% 1.5625% 0;
		bottom:0;right:0;
		z-index:6;
	}
	#head_term .inner{
		width: 94.531%;
		padding:2.5% 0;
		margin:auto;
	}
}

/* -----------------------------------------------
  campaign_method
----------------------------------------------- */
#campaign_method li{
	background: #9CD5DE;
	/*box-sizing: border-box;*/
}
#campaign_method li.step1{
	width: 30%;
    margin-right: 3.2%;
}
#campaign_method li.step2{
    /*315px*/
    width: 30%;
    margin-right: 3.2%;
	padding: 0 1.51041% 2.604%;
}
#campaign_method li.step3{
    width: 30%;
}
#campaign_method li.step1 a{
	background: #9CD5DE;
}
#campaign_method li.step2 a img{
	width: 100%;
	margin: 3.81% auto 0;
	height: auto;
}
@media screen and (min-width: 641px) {

	#campaign_method ul{
		display: flex;
	}

	#campaign_method li{
		margin-right:1.9791%;
		position:relative;
	}

	#campaign_method li .title{
		width:29.3333%;
		margin:8% auto 6.6666%;
	}
	#campaign_method li.step2 .title{
		width: 27.9365%;
		margin-top: 7.6190%;
        margin-bottom: 6.3492%;
	}
	#campaign_method li .content{
		width:100%;
		margin:0 auto 0;
	}
	#campaign_method li.step1 a{
		display: block;
		width:90%;
		padding:6.29% 0;
		margin:6% auto 6%;
		border-radius: 6px;
	}
	#campaign_method li.step1 a img{
		width:93.7%;margin:auto;
	}
	#campaign_method li.step3{
		margin-right:0;
	}

}

@media screen and (max-width: 640px) {
	#campaign_method li.step1{
		width: 100%;
	}
	#campaign_method li.step3{
		width: 100%;
	}
	#campaign_method li.step2{
		width: 100%;
		padding: 4.33% 0 0;
	}
	#campaign_method li.step2 #hash_copy{
		width: 89%;
		display: block;
		margin: 0 auto;
	}
	#campaign_method li.step2 #hash_copy img{
		margin-top: 0;
	}
	#campaign_method ul{
		width:93.75%;
		margin:auto;
	}
	#campaign_method li{margin-bottom:3.125%;padding:4.33% 0 4.1528% 0;
		margin-right: 0;}
	#campaign_method li .title{
		margin:0 auto 4%;
		width:19.166%;
	}
	#campaign_method .content{
		width:100%; margin:0 auto ;
	}

	#campaign_method li.step1 a{
		display: block;
		width:69.166%;
		padding:5.33% 0;
		margin:6% auto 0;
		border-radius: 6px;
	}
	#campaign_method li.step1 a img{
		width:94.698%;margin:auto;
	}
	#campaign_method li:last-child{
		margin-bottom: 0;
	}
}

/* -----------------------------------------------
  campaign_prize
----------------------------------------------- */
#campaign_prize .prize{
}

@media screen and (min-width: 641px) {
	#campaign_prize .prize{

		position: relative;	}

	#campaign_prize .txt{
		width:72.395%;
		margin:0 auto 2.291%;
		padding-top:2.916%;
	}
	#campaign_prize .image{
		width:100%;
		margin-left:0;
		position: relative;
	}
	#campaign_prize .image .ratio{
		position: absolute;
		width:8.595%;
		bottom:0;right:0;
		margin: 0 -9.619% 1.719% 0;
	}
	
}
@media screen and (max-width: 640px) {

	#campaign_prize .prize{
		width: 93.75%;
		margin:auto;
		text-align: center;
	}
	#campaign_prize .txt{
		width:91.666%;margin:auto;
		padding-bottom:10%;
	}
	#campaign_prize .image{
		width:100%;
		margin:0 auto 0;
		position: relative;
	}
	#campaign_prize .image .ratio{
		width:13.379%;
		position: absolute;
		top:0;right: 0;
		margin:-6.33% 1.5% 0 0;
	}


}


/* -----------------------------------------------
  campaign_guideline
----------------------------------------------- */

#campaign_guideline{
    color: #000000;
	line-height:1.4;
}
#campaign_guideline .guideline{
			background: #E1F9FE;

}
#campaign_guideline a{
    color: #000000;
	text-decoration: underline;
    text-indent: 0;
    font-size: inherit;
}
#campaign_guideline dt{
	color:#c5031d;
	margin:1.5em 0 0.4em 0;

}

#campaign_guideline dd li{
	padding-left:1em;
	text-indent: -1em;
	margin-bottom:0.4em;
}
#campaign_guideline p{
	margin-bottom:0.4em;
}

#campaign_guideline .mail_img_txt{
	display: inline;
	width: 13.125em;
    vertical-align: sub;
}

@media screen and (min-width: 641px) {
	#campaign_guideline{
		font-size: 16px;
	}
	#campaign_guideline>.inner{
		padding-bottom:20px;
	}

	#campaign_guideline dl{
		padding:2% 6.25% 4%;
	}
	#campaign_guideline dt{
		font-size:16px;
	}
	
	#campaign_guideline .mail_img_txt.isPC{
		display: inline;
	}
	#campaign_guideline .mail_img_txt.isSP{
		display: none;
	}
}
@media screen and (max-width: 640px) {
	
	#campaign_guideline{
		font-size: 4vw;
		line-height: 1.4em;
	}

	#campaign_guideline .guideline{
		width:93.75%;margin:auto;
		box-sizing: border-box;
		padding:2.5% 0 6%;
	}
	#campaign_guideline>.inner{
		padding-bottom:3.125%;
	}
	#campaign_guideline .guideline dl{
		width:90%;margin:auto;
	}

	#campaign_guideline .mail_img_txt{
		width: 13.33em;
	}
	#campaign_guideline .mail_img_txt.isPC{
		display: none;
	}
	#campaign_guideline .mail_img_txt.isSP{
		display: inline;
	}
}

#legal .inner{
	text-align: right;
	padding-bottom:20px;
}
#legal img{display:inline;width:66px;}
@media screen and (max-width: 640px) {
	#legal .inner{
		width:93.75%;margin:auto;
		padding-bottom:6.25%;
		margin-bottom:3%;
	}

}
#hash_copy_data{
	width: 0;
	height: 0;
	font-size: 0;
	color: transparent;
	padding: 0;
	margin: 0;
	overflow: hidden;
	text-indent: 100%;
	background: transparent;
	position: absolute;
	top: 0;
	z-index: -10;
}

#footer{
  margin:50px 0 20px;
  overflow: hidden;
}
.btn-block{
  background: #00A6BE;
  padding:40px 20px;
  text-align: center;
}
.btn-block .footer-btn{
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  display: block;
  max-width: 480px;
  margin:0 auto 5px
}
.btn-block .footer-btn:hover{
  -webkit-transform: translateY(3px);
  -ms-transform: translateY(3px);
  transform: translateY(3px);
}
.copyright {
  text-align: center;
  font-size: 12px;
  margin: 20px 0 0;
  letter-spacing: .1em;
}
@media only screen and (max-width: 768px) {
  #footer{
    margin:20px 0 20px;
  }
  .btn-block{
    padding:0;
  }
  .copyright {
    font-size: 10px;
  }
}

#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 86px;
  z-index: 2;
  -webkit-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
#page-top:hover {
	-webkit-transform: translateY(-10px);
	-ms-transform: translateY(-10px);
	transform: translateY(-10px);
}

@media only screen and (max-width: 768px) {
  .inner {
    min-width: 320px;
  }
  .guidelineBlock .inner{
    padding:0 15px;
  }
  html {
    font-size: 13px;
  }
  #page-top {
    width: 50px;
    bottom: 5px;
    right: 5px;
  }
}





















