@charset "UTF-8";

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {  margin:0; padding:0;  border:0;  outline:0;  background:transparent;}
ol li{
	padding-bottom: 25px;
}

body, html {
	text-align: center; 
	font-family: 'meiryo', 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic Medium', Meiryo, sans-serif;
	font-size: 62.5%;
	padding: 0;
	margin: 0;
	width:100%;
}
body{
	font-size:1.6rem;
	line-height:1.6em;
	color: #000000;
}
body { 
	position: relative;
	animation: fadeIn 1s ease-in 0s 1 normal; 
	-webkit-animation: fadeIn 1s ease-in 0s 1 normal;
}
body{
	background-color: #ffffff;
}

header{
	width: 100%; 
	margin: 0 auto; 
	overflow: visible; 
}

img{
	max-width:100%; 
	margin: 0 auto;
	height: auto;
	display: block;
}

.pc { display:block; }
.sp { display:none; }

@media only screen and (max-width : 767px){
  .pc { display:none; }
  .sp { display:block; }
}

/*キャンペーントップ画像*/
.header{
	width:100%; 
	background-color: #003C81;
}
.header img{
	width: 90%;
	padding: 4% 1% 0; 
}

@media only screen and (min-width: 1200px) {
    .header {
		width: 70%;
		margin: auto;
    }
  }


/*キャンペーンメイン画像*/
.campaign_image{
	margin: auto;
	width:100%; 
}

.campaign_image img{
	width: 100%;
}

@media only screen and (min-width: 1200px) {
    .campaign_image {
      width: 70%;
      margin: auto;
    }
  }


/*キャンペーン応募方法*/
.howto div{
	margin:auto; 
	width:100%; 
	background-color: #003C81;
}
.howto img{
	width: 90%;
	padding: 20px 0;
}
@media only screen and (min-width: 1200px) {
	.howto div{
		margin:auto;
		padding: 50px 0; 
		width:70%; 
	}
}



/*キャンペーン詳細*/
.notice{ 
	width: 95%; 
	margin: 10px auto; 
	text-align: left; 
}

@media only screen and (min-width: 1200px) {
	.notice{
		width: 70%;
		margin: 30px auto;
		padding-top: 30px; 
		padding-bottom: 20px; 
	}
}


.notice .main_notice{
	text-align: center; 
	font-size: 150%; 
	color: #003C81; 
	margin:5% auto 1%; 
	padding: 10px; 
}
@media only screen and (min-width: 1200px) {
	.notice .main_notice{
		width: 70%;
		font-size: 200%;
	}
}
@media only screen and (min-width: 2000px) {
	.notice .main_notice{
		width: 70%;
		font-size: 350%;
	}
}

.notice .sub_notice{
	font-weight: bold;
	padding-top: 20px;
	font-size: 110%;
}
@media only screen and (min-width: 1200px) {
	.notice .sub_notice{
		font-size: 130%;
		line-height: 100%;
	}
}
@media only screen and (min-width: 2000px) {
	.notice .sub_notice{
		font-size: 200%;
		line-height: 100%;
	}
}

.notice .notice_text{
	padding: 20px;
	font-size: 80%;
}
@media only screen and (min-width: 1200px) {
	.notice .notice_text{
		font-size: 100%;
		line-height: 120%;
	}
}
@media only screen and (min-width: 2000px) {
	.notice .notice_text{
		font-size: 160%;
		line-height: 150%;
	}
}


@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


footer{width:100%; color: #fff; padding:30px 0; text-align: center;background: #003C81;height:auto;}
footer a,
footer a:hover{color: #fff;}
footer img{max-width:300px}
footer div{font-size: 12px; max-width: 500px; margin: 0 auto; width: 90%;}
footer div p{text-align: center}
.company{display: flex;flex-wrap: wrap;width: 90%;max-width: 400px;margin: 0 auto;}
.company li{width: 400px; list-style: none;}