@charset "UTF-8";

p{font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;}
h1,h2,h3,h4,li{font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;}

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

html, body {height: 100%; width: 100%; padding: 0; margin: 0;}
p {font-size:16px; line-height: 2;}

/* 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 !important;}
section,
.lead { line-height: 2;}
/*#contents {margin-bottom: 50px;}*/

section {padding: 40px 15px 20px 15px;}
section#performance1,
section#shoppingpoint {padding-bottom: 0;}
section#eventImg {padding-top: 0;}
section#talkevent {padding-bottom: 60px;}
section#performance1,
section#performance3,
section#performance4 {max-width: 750px; margin: 0px auto;}

section h1, section h2, section h3 {text-align: center; font-weight: bold; color: #191919; font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif; margin: 10px auto;}
section h1 {font-size: 2.4em;}
section h2 {font-size: 2em;}
section h3 {font-size: 1.8em;}

#siteName a {width: 125px;}

.relatedLink {font-size:14px; margin: 20px 0; text-align: right;}
.relatedLink a {display: inline-block; background: url(/ie/campaign/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;}

/*.wrapper_campaign {width: 880px; margin: 0 auto; }*/
.wrapper_campaign {max-width: 1024px; margin: 0 auto; }
/*.wrapper_campaign {
	width: 100% !important; min-width: 1024px; margin: 0 auto;}*/

.lead {margin-bottom: 0px;}
.annotation, 
.annotation li {color: #666; line-height: 1.8em;}

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

#event,
#shoppingpoint {margin: 0 0;}

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

section#intro {padding: 0;}
#intro {width: 100%; margin: 0 auto; min-height: 480px; position: relative;}
#intro {background: url(/ie/campaign/150723/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;}
#intro h1 {position: relative; color: #fff; padding: 10px 0 0 0; margin: 0 auto; text-align: center;}
#intro h1 .title {font-size: 60px; line-height: 2;}
#intro h1 .title img {width: 880px; height: auto;}
#intro h1 .sub {display: block; font-size: 25px;}

section#catalog.section p {font-size:14px;}

#event {background: #F7F7F7;}
#event.section {padding: 1px 0px 0px; margin-top: 40px;}
#event .wrapper_campaign {margin: 40px auto;}
#event ul:after { content: ""; clear: both; display: block;}
#event .shoulderIcon,
#shoppingpoint .shoulderIcon,
#talkevent .shoulderIcon {background: none repeat scroll 0% 0% #7F0019; border-radius: 3px; padding: 2px 10px; color: #FFF; font-size: 60%; vertical-align: bottom;}

#performance4 a:link {text-decoration: underline !important;}

#performance2 figure a:hover h3,
#performance2 figure a:hover p,
#column figure a:hover p {color: #7F0019;}

#performance2 figure a:hover img,
#talkevent figure a:hover img,
#column figure a:hover img {
-webkit-transition: 0;
   -moz-transition: 0;
     -o-transition: 0;
        transition: 0;
filter: alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
}

#eventList {padding-bottom: 1px;}
#eventList ul {margin: 20px 0; font-size: 14px; line-height: 1.6;}
#eventList li {float: left; width: 33%; margin-bottom: 20px;}
#eventList a {font-size: 16px;}
#eventList img {vertical-align: middle;}
#eventList h3 {margin-top: 50px; margin-bottom: 50px;}

/*#shoppingpoint h1 {text-align: left; margin: 10px 0;}*/
#shoppingpoint hgroup h1.pt500 {float: left; width: 30%; text-align: right;}
#shoppingpoint hgroup h1.present {float: right; width: 66%; text-align: left;}
#shoppingpoint hgroup:after {content: ""; clear: both; display: block;}
#shoppingpoint ul.col3 {margin-top: 20px;}

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

#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;}


table{width:100%; margin:13px auto;}
table, th, td{font-size: 16px; border:1px #333 solid; border-collapse:collapse; text-align:center; line-height:1.5; padding: 5px; margin-top: 20px !important;}
th, td {}
th.new, td.new {background: #fff676; font-weight: bold;}
table span.sub{font-weight: normal; font-size: 14px;}

ul.col4 {margin-right: -20px; letter-spacing: -.40em; margin-top: 20px;}
.col4 li {display: inline-block; letter-spacing: normal; margin: 0 20px 10px 0; vertical-align: top; width: 22.7%; padding-top: 0px;}
.col4 figure img {width: 100%; height: auto; float: none; margin-bottom: 10px;}
.col4 h3 {font-size: 20px; font-weight: bold; font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif; margin-bottom: 10px;}
#main .col4 p {font-size: 14px; line-height: 20px;}

ul.col3 {margin-right: -20px; letter-spacing: -.40em; margin-top: 20px;}
.col3 li {display: inline-block; letter-spacing: normal; margin: 0 20px 20px 0; vertical-align: top; width: 31.1%; padding-top: 0px;}
.col3 figure img {width: 100%; height: auto; float: none; margin-bottom: 10px;}
.col3 p {font-size: 14px; line-height: 20px;}

p.thum_title_tx {font-size: 16px; font-weight: bold; margin: 0px;/* min-height: 30px;*/ padding: 15px 0px 10px;}
p.thum_title_txG {font-size: 14px; margin: 0px; padding: 15px 0px 10px;}

.col2_1 img,
.col2_2 img,
.col2_3 > img {width: 45%; height: auto; float: left; margin-right: 20px;}

img.navddbg  {width: 6px !important; height: 9px !important; margin-bottom: 2px !important; float: none; margin-right: 0;}


/* Bootstrap */
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}

.font-size-32px {font-size: 32px;}
.font-size-24px {font-size: 24px;}
.font-size-20px {font-size: 20px;}
.font-size-18px {font-size: 18px;}
.font-size-16px {font-size: 16px;}
.font-size-14px {font-size: 14px;}
.font-size-13px {font-size: 13px;}
.font-size-12px {font-size: 12px;}
.font-size-11px {font-size: 11px;}

.max-width-800px {max-width: 800px; margin: 20px auto 40px;}

.dl-horizontal dt {float: left; width: 20%; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis;}
.dl-horizontal dd {margin-left: 24%;}

.frame-bordered {border: 1px solid #ddd; padding: 15px 30px; box-sizing: border-box; border-radius: 8px; margin-top: 30px; margin-bottom: 30px;}


/* masonry */
.box {
	width: 30%;
	margin: 0 2% 2% 0;
	height: auto; 
	background: #f7f7f7;
	color: #333;
	border-radius: 5px;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
	padding: 15px;
	box-sizing: border-box;
}

.box img {width: 100%; display: block;}

a .box:hover {background: #ddd; color: #7f0019;}
a .box:hover h1 {color: #333;}
.box h1 {font-size: 1.2em;}
.box p.detail {font-size: 14px; margin: 5px 0 10px; line-height: 1.5;}

/* clearfix */
#eventList ul:after,
.wrapper_campaign:after,
section:after,
figure:after {content: ""; clear: both; display: block;}


@media only screen and (max-width : 767px){
	a:link, a:visited {font-size: 14px;}
	.annotation {line-height: 1.6;}
	#intro p {width: 90%; margin: 0 auto;}

	#hWrap {width: 100%; margin: 0 auto;}

	#main {margin: 0;}
	section,
	.lead { line-height: 1;}

	section h1 {font-size: 20px; margin: 10px auto;}
	section h2 {font-size: 18px; margin: 10px auto;}
	section h3 {font-size: 16px; margin: 10px auto;}
	#performance2 h3 {font-size: 20px;}

	#intro {width: 100%; min-height: 100px; padding-bottom: 5px;}
	.wrapper_campaign {width: 90% !important; 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: 94%;}
	#eventList ul {line-height: 1;}
	#eventList li {width: 100%;}
	#eventList a {font-size: 14px;}

	.relatedLink a {font-size: 14px;}
	#shoppingpoint h1 {text-align: center; margin: 10px auto;}
	#shoppingpoint ul.col3 {margin-top: 0px;}

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

	body #main #intro h1 {background: url(/ie/campaign/150723/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: 14px; line-height: 22px;}
	.section {margin-bottom: 0px; padding: 20px 0px;}
	#shoppingpoint.section {margin-bottom: 0px; padding: 10px 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;}
	#event, #shoppingpoint, #wrapItem, #stamp {margin: 0 0px;}

	/*ul.col3 {display: block; width: 100%;}1カラムにする時*/
	/*.col3 li {display: block; width: 100%;}1カラムにする時*/
	.col3 li,
	.col4 li {display: inline-block; letter-spacing: normal; margin: 30px 3% 0 0; vertical-align: top; width: 46%;}
	.col2_1 img,
	.col2_2 img,
	.col2_3 > img {width: 100%; float: none;}

	#column .col3 li {display: inline-block; letter-spacing: normal; margin: 0px 3% 0 0; vertical-align: top; width: 46%;}

	.frame-bordered {border: 1px solid #ddd; padding: 15px 15px; box-sizing: border-box; border-radius: 8px; margin-top: 30px; margin-bottom: 30px;}

	table {width: 100%;}
	img {vertical-align: middle !important;}
	.gmap {background-color: #F7F7F7 !important;}
}