@charset "UTF-8";

.mobileOnly {display: none;}
.pcOnly {display: block;}

html, body {height: 100%; width: 100%; padding: 0; margin: 0;}

/* iPad 右切れ解消*/
@media screen and (min-width: 768px) {body {min-width: 980px;}}
body {overflow-x: hidden;}

body {position: relative;}
#main {width: 100%; margin-top: 0;}
#main a {text-decoration: none;}
section,
.lead { font-size: 18px; line-height: 2;}
#contents {margin-bottom: 50px;}

#hNav {z-index: 9; position: relative; top: 0px; margin: 0 0px; padding: 0; height: 39px; background: #FFFFFF;}
#hNav h1,
#hNav ul {margin-top: 1px;}
#hWrap {width: 875px; margin: 0 auto;}

section h1 {font-weight: 100; text-align: center; font-size: 45px; color: #191919;}
section h2 {font-weight: 100; text-align: center; font-size: 30px; color: #191919;}
section h3 {font-weight: 100; text-align: center; font-size: 25px; color: #191919;}

#siteName a {width: 85px;}

.relatedLink {margin: 20px 0; text-align: right;}
.relatedLink a {display: inline-block; background: url(/valentine2014/img/arrow_right.png) no-repeat 14px 50% #fff; border: 1px solid #ccc; padding: 7px 18px 7px 28px; text-decoration: none;}
.relatedLink.white a {display: inline-block; background: url(/valentine2014/img/arrow_right_white.png) no-repeat 14px 50%; border: 1px solid #fff; padding: 7px 18px 7px 28px; text-decoration: none; color: #fff;}
.relatedLink a:hover,
.relatedLink.white a:hover {border: 1px solid #7F0019; color: #7F0019;}

#intro {width: 100%; margin: 0 auto; min-height: 480px; position: relative;}
.wrapper {width: 880px; margin: 0 auto; }

.lead {margin-bottom: 30px;}
.annotation {color: #999; color: #666; font-size: 13px; margin-top: 10px}
.section {margin-bottom: 30px; padding: 20px 0;}
.section h2 {margin-bottom: 20px;}
.section h3 {margin-bottom: 20px;}

#intro p {width: 880px; margin: 0 auto;}

#intro02 {padding: 0 0;}
#event01 {margin: 0px 0 50px 0;}
#event01 h3 a {text-decoration: underline;}

#event02,
#shoppingpoint,
#wrapItem,
#stamp {margin: 0 0;}

#intro,
#shoppingpoint{margin-bottom: 0;}


#intro {background: url(/ie/campaign/140801/img/main.jpg) no-repeat 0 0; width: 100%; height: auto; background-size: 100%; background-position: center; background-size: cover; height: 100%; width: 100%; min-height: 400px; margin-bottom: 10px;}
#intro h1 {position: relative; color: #fff; padding: 40px 0; text-align: center;}
#intro h1 .title {font-size: 60px; line-height: 2;}
#intro h1 .title img {width: 980px; height: auto;}
#intro h1 .sub {display: block; font-size: 25px;}


#event02.section {margin-bottom: 0; padding-bottom: 0;}
#event02 .wrapper {margin-bottom: 10px;}
#event02 .yokoku {background: none repeat scroll 0% 0% #7F0019; border-radius: 3px; padding: 2px 10px; color: #FFF; font-size: 60%; }

#eventList {margin-top: 40px;}
#eventList ul {margin: 20px 0; font-size: 14px; line-height: 1.6;}
#eventList li {float: left; width: 290px; margin-bottom: 20px;}
#eventList a {font-weight: bold; font-size: 120%;}
#eventList img {vertical-align: middle;}
#eventList h3 {margin-top: 50px; margin-bottom: 50px;}


#taishin {background: #f1f2f2;}
#taishin img {float: left; margin-right: 20px; height: 150px; width: 150px;}
#taishin span {float: left; margin-right: 20px; width: 250px; font-size: 16px; line-height: 1.8;}


#taishin:after,
#event02 ul:after { content: ""; clear: both; display: block;}


#shoppingpoint img {width: 880px; margin: 0 auto 0;}
#annotation {font-size: 14px; line-height: 1.6; margin-top: 10px;}

.section p.title {padding-top: 10px; font-size: 15px;}

#sns {margin: 40px 0 0 30px;}
#sns li {float: left; margin-right: 10px; margin-top: -7px;}
#sns li.tw {width: 100px;}
#sns li.fb iframe {width: 115px !important;}
#pageEnd {margin-top: 0;}

#event01 h2 {position: relative;}
#event01 h2 img {width: 50px; position: absolute; top: 5px; left: 0;}
#event01 p {margin-bottom: 20px;}
#event01 li p {margin-bottom: 0;}
#event01 iframe {margin: 0 auto;}


@media only screen and (max-width : 767px){
	.annotation {line-height: 1.2;}
	#intro p {width: 90%; margin: 0 auto;}
	
	#intro02 {padding: 0 0 0 0;}
	
	#hWrap {width: 100%; margin: 0 auto;}
	
	h1 {font-size: 22px;}
	h2 {font-size: 18px;}
	
	#intro {width: 100%; min-height: 100px;}
	.wrapper {width: 90%; margin: 0 auto;}
	#intro h1 {width: 100%; position: relative; min-height: 140px; color: #fff;}
	#intro h1 .title {top: 30px; left: 20px; font-size: 25px; width: 100%; font-weight: 100; line-height: 1.4;}
	#intro h1 .sub {top: 30px; left: 20px; font-size: 16px; width: 100%; font-weight: 100;}
	#intro h1 .title img {width: 95%;}
	#shoppingpoint img {width: 100%;}
	#event01 h2 img {top: 0;}
	.relatedLink a {font-size: 14px;}

	#sns {margin: 40px 0 0 5px;}

	#main {margin: 0;}
	body #main h1 {font-size: 21px; line-height: 1.4; padding: 0 0 10px 0; margin: 0 auto; font-weight: bold;}
	body #main h2 {font-size: 18px; line-height: 1.4; padding: 0 0 20px 0; margin: 0 auto;}
	body #main h3 {font-size: 15px; line-height: 1.4; padding: 0 0 0px 0; margin: 0 auto;}
	body #main #intro h1 {background: url(/ie/campaign/140801/img/main.jpg) no-repeat 0 0; width: 100%; height: auto; background-size: 100%; background-position: center; padding-top: 20px; padding-bottom: 0;}
	.lead { font-size: 16px; line-height: 1.8;}
	.section {margin-bottom: 0px; padding: 20px 0px;}
	#taishin img {float: left; margin-right: 0px; margin-bottom: 10px; height: 150px; width: 150px;}
	#taishin span {float: left; margin-right: 0px; margin-bottom: 20px; width: 100%; font-size: 16px; line-height: 1.8;}
	#event02, #shoppingpoint, #wrapItem, #stamp {margin: 0 0px;}
}