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

/**
 * Base
 */

html, body { width:100%; height:100%; }
html { overflow-y:scroll; }
body {
	-webkit-text-size-adjust:100%;
		-ms-text-size-adjust:100%;
			text-size-adjust:100%;
	max-width:620px;
	margin: 0 auto;
}
p { line-height:1.5; color: #21316d;}

a, a:visited { color:#21316d; text-decoration:none; }
a:hover { color:#21316d; }

img {
	width: 100%;
}

header a:link { display:block; width:100%; height:100%;}

h1, h2, h3, h4, h5, h6 { font-weight:bold; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { vertical-align:top; }


/** Clearfix **/
#header:before, #header:after,
#contents:before, #contents:after,
#footer:before, #footer:after,
.clearfix:before, .clearfix:after { display:table; content:" "; }

#header:after,
#contents:after,
#footer:after,
.clearfix:after { clear:both; }


/** Text **/
.accentText { color:#FC499D; }

p.notice {
	padding-left:1em;
	text-indent:-1em;
}
p.notice span { padding-right:0.3em; }

/** Layout **/

#wrapper,
#header,
#contents,
#footer {
	margin:auto;
	position:relative;
}
#wrapper {
	/*min-width:320px;*/
	color:#333333;
	padding-bottom: 10px;
}
header { width: 100%;}
h1{
	margin:auto;
	text-align:center;
	padding:4px 0 38px;
}
h1 img{
	width:71%;
	height:auto;
}
h2 { text-align:center;}
h2 img{
	width:71%;
	height:auto;
}

p { margin-top:1%; margin-bottom:1%;}

header #campaignTitle { position:relative;}
header #campaignTitle h1{ padding: 40% 0 38px;}

#pepper_spoon { position:absolute; top:70%; left:0; width:auto; z-index:1000;}

#index_header { position:absolute; top:0; left:0;}
#index_header  img { width:100%;}

#lead { background:#f0f7f8; padding:4% 6%; text-align:center;}
#lead img { width:40%;}
#lead .text_box { text-align:left; margin-top:6%; margin-bottom:6%;}

#lead .lead_box { width:80%; margin:0 auto 6% auto;}

#lead .lead_text02 { text-align:center;}
#lead .lead_text02 img { width:60%; }

#lead .text_box ul li { padding-top:0%; position:relative; color:#21316d; padding:2% 6% 1% 3%;}
#lead .text_box ul li .list_item { position:absolute; left:0; top:10%;}

.attention { color:#c83535;}
.txtLL { font-size:130%;}
.txtXL { font-size:140%;}

#present { text-align:center;}
#present img { width:70%;}
#present h2{ padding:2% 4%;}

.present_item01 { text-align:center; margin-bottom:2%;}
.present_item01 img {width:96%;}


/* flow / outline  */
header #other { position:relative;}
header #other h1{ padding: 0% 0 38px;}
header #other #pepper_spoon { position:absolute; top:30%; left:0; width:auto;}

#pepper_spoon { position:absolute; top:70%; left:0; width:auto;}
#flow,#outline { background:#f0f7f8; padding:2% 6% 6% 6%; text-align:center; margin-bottom:6%;}

#flow .text_box,
#outline .text_box{ background:#fff; border-left:solid 1px #21316d;}

ul.flow_list { color:#21316d; z-index:1000; position:relative; top:0; border-top:solid 1px #21316d; border-right:solid 1px #21316d; background:#fff;}
ul.flow_list li, ul.outline_list li { padding:20% 6% 6% 6%; position:relative; text-align:left; border-bottom:solid 1px #21316d;}


ul.outline_list li { border-bottom:none;  padding:2% 6% 1% 6%;}
ul.outline_list li ul li{ padding-top:0%; position:relative;}
ul.outline_list li ul li .list_item { position:absolute; left:0; top:2%;}

ul.flow_list li .flow_no { position:absolute; top:6%; left:2%; width:17%;}
ul.flow_list li h3{ position:absolute; top:6%; left:20%; width:80%; font-size:140%; font-weight:normal;}
ul.flow_list li .img_flow01 {
	position: absolute;
	bottom: 45%;
	right: 33px;
	width: 40%;
}

ul.outline_list { padding-top:6%; padding-bottom:6%; color:#21316d; z-index:1000; margin-top:3%; position:relative; top:10%; border-top:solid 1px #21316d; border-right:solid 1px #21316d;border-bottom:solid 1px #21316d; background:#fff;}
ul.outline_list li h3 {font-size:140%; font-weight:normal; padding-bottom:2%;}

/*linkArea*/
.linkArea ul{}
.linkArea li {
	width: 100%;
	margin: 0 auto;
	background: url(../img/arrow_right.png) no-repeat #f0f7f8;
	background-size:4%;
	background-position:25%;
	border-bottom:#21316d solid 1px;
	padding:10px 0;
	color:#21316d;
	text-align:center;

}
.linkArea li:first-child {
	border-top:#21316d solid 1px;

}
.linkArea li a:link { display:block; width:100%; height:auto;}


/*btn*/
#btnArea{
	text-align:center;
	margin:auto;
	width:100%;
}
.btnEntry {
	width: 62%;
	margin: 31px auto 42px;
	height:auto;
}
.btnEntry img{
	width:100%;
	height:auto;
	display:block;
	margin:auto;
	text-align:center;
}
.btnEntry button {
	display: block;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}
.btnEntry p {
	width:72.7%;
	margin:auto;
	text-align:center;
}
ul li.btnEntry {
	width: 40%;
	display:inline-block;
}

/*footer*/
footer ul{
	text-align:center;
	padding-bottom:29px;
	margin:auto;
	text-align:center;
}
footer li.logo {
	display:inline-block;
	margin:auto;
	text-align:center;
	padding-right:6.25%;
	vertical-align:middle;

}
footer li.logo:first-child{
	width:13%;
}
footer li.logo:first-child img{
	height:auto;
	width:100%;
}
footer li.logo:nth-child(2){
	width:13%;
}
footer li.logo:nth-child(2) img{
	width:100%;
	height:auto;
}
footer li.logo:nth-child(3){
	width:14%;
}
footer li.logo:nth-child(3) img{
	width:100%;
	height:auto;
}
footer li.logo:nth-child(4){
	width:13%;
}
footer li.logo:nth-child(4) img{
	width:115%;
	height:auto;
}
footer li.logo:last-child{
	padding-right:0;
	width:11%;
}
footer li.logo:last-child img{
	width:100%;
	height:auto;
}
footer p.copy {
	text-align: center;
	font-size: 7px;
	padding: 16px 15px 20px;
	background-color:#000;
	color:#fff;
}

#sns_box { text-align:center; margin-bottom:20px;}
#sns_box img { width:10%; margin-left:2%; margin-right:2%;}