p {line-height: 1.4;}
figure {margin: 0;}
ul {list-style: none; padding: 0; margin: 0;}

#main {display: block; overflow: hidden; width: 100%; margin: 0 auto 40px;}
#main h1,
#main h2 {text-align: center; max-width: 800px; margin: 0.67em auto;}
#main p {max-width: 800px; margin: 20px auto 40px;}
p.lead {line-height: 2; margin-bottom: 40px;}
.outsideWrap {display: block; overflow: hidden; width: 100%; padding: 0; margin: 0;}
.outsideWrap.gr {background-color: #f7f7f7;}
.annotation {font-size: 12px;}

.wrapper {display: block; overflow: hidden; width: 80%; margin: 0 auto; box-sizing: border-box; max-width: 980px; padding: 40px 0;}
.wrapper .wrapper {margin: 0 auto; padding: 20px 0 0; width: 100%;}

.price {font-size: 12px;}
.price .num {font-size: 14px; font-weight: bold; margin: 0 2px; font-family: "Helvetica","Lucida Grande","Hiragino Kaku Gothic Pro","�鉝�押�柴�舘�鉝�� Pro W6","嚗哨撲 嚗啜�氬�瑯����" ,sans-serif;}
.price a {display: block;}
.itemList a .name {text-decoration: underline; font-size: 13px;}
#main a:hover {color: #191919;}
figure img {width: 500px; height: 300px; margin-right: 20px; float: left;}

#topContents {padding: 0; margin: 0; position: relative;}
#topContents h1 {text-align: center; font-size: 2.5em; margin-top: 180px;}
#topContents h2,
#topContents .term {text-align: center;}

#topContents.ww {color: #fff;}
#topContents.ww .outsideWrap {
	width: 100%; height: 100%; display: block;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 100%);
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(0,0,0,0.5)), color-stop(40%,rgba(0,0,0,0.2)), color-stop(90%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0)));
	background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.2) 40%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.2) 40%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.2) 40%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.2) 40%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%);}

.itemList ul {margin-right: -20px; letter-spacing: -.40em;}
.itemList li {display: inline-block; letter-spacing: normal; margin: 0 20px 10px 0; vertical-align: top; width: 30%;}

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

#main .col2_1 p {max-width: 100%;}

.col2_2 .itemList li {margin-bottom: 5px; line-height: 1.2;}

.col2_3 .itemList li {margin: 0 20px 10px 0; display: inline-block; width: 14%; line-height: 1.2;}
.col2_3 .itemList .thumb {display: block; margin: 0 0 3px; float: none;}
.col2_3 .itemList .thumb img {width: 95px; height: auto; margin: 0; float: none;}
.col2_3 .itemList a {display: block;}

ul.col3 {margin-right: -20px; letter-spacing: -.40em;}
.col3 li {display: inline-block; letter-spacing: normal; margin: 0 20px 10px 0; vertical-align: top; width: 30%;}
.col3 figure img {width: 100%; height: auto; float: none;}

#main aside {border: 1px solid #ddd; padding: 30px; box-sizing: border-box; border-radius: 8px; margin-top: 30px;}
#main aside h1 {margin-top: 0; font-size: 1.5em; text-align: left; max-width: 1024px;}
#main aside p:last-child {margin-bottom: 0;}
#main aside h3 {margin-top: 0;}

.relatedLink {display: block; text-align: right; margin-top: 20px;}
.relatedLink a {display: inline-block; background: url(/img/common/arrow_right.png) no-repeat 14px 50%; border: 1px solid #ccc; padding: 10px 20px 10px 35px; text-decoration: none;}
.relatedLink a:hover {border: 1px solid #191919;}

.wideImage img {width: 100%; height: auto; vertical-align: bottom;}
.wideImage .wrapper {padding-top: 20px;}

/* clearfix */
.wrapper:after,
.row:after,
section:after,
figure:after {content: ""; clear: both; display: block;}


@media screen and (max-width : 767px){
	p.lead {line-height: 1.6;}
	.wrapper {width: 90%;}
	.wrapper .wrapper {width: 100%;}
	.col2_1 img,
	.col2_2 img,
	.col2_3 > img {width: 100%; float: none;}
	.col2_3  .itemList ul,
	ul.col3 {margin-right:0;}
	.col3 li {margin: 0;}
	.col2_3 .itemList li {display: block; width: 100%; padding: 10px 0; box-sizing: border-box;}
	.col2_3 .itemList .thumb img {width: 60px; float: left; margin-right: 10px;}
	.col2_2 .itemList li {display: block;}
	.col3 li {display: block; width: 100%;}
	aside h3 {margin-top: 10px;}

	.col2_3 .itemList li:after {content: ""; clear: both; display: block;}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	p.lead {line-height: 1.6;}
	.wrapper {width: 90%;}
	.wrapper .wrapper {width: 100%;}
}