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

.annotation {color: #999;}
.asterisk {padding-left: 1em; text-indent: -1em;}

#main {display: block; overflow: hidden; width: 100%; margin: 0 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;}

.wrapper {display: block; overflow: hidden; width: 80%; margin: 0 auto; box-sizing: border-box; max-width: 1024px; 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: "Microsoft JhengHei","Helvetica","Lucida Grande",sans-serif;}
.price del {display: inline-block; color: #999;}
.price del:after {content: "→";}
.price ins {display: inline-block; color: #7f0019;}
del, ins {text-decoration: none;}
.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 {font-size: 2.5em; margin-top: 180px;}
#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;}

.img-circle {border-radius: 50%;}

#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.col6 {margin-right: -20px; letter-spacing: -.40em;}
.col6 li {display: inline-block; letter-spacing: normal; margin: 0 14px 10px 0; vertical-align: top; width: 15%;}
.col6 figure img {width: 100%; height: auto; float: none;}

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

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

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

.point li {margin: 0.8em 0 0 1em; text-indent: -1em; font-size: 14px;}

dl {margin-top: 0; margin-bottom: 30px;}
dt {font-weight: bold; margin-bottom: 5px;}
dd {margin-bottom: 15px; margin-left: 0;}
dl .position {font-weight: normal;}

.relatedLink {display: block; margin: 20px 0 30px;}
.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;}

#insideStore {margin-bottom: 80px;}

#mainVisual {width: 100%; margin: 0 auto; overflow: hidden; position: relative; line-height: 0;}

#mvPanel {width: 20000px; height: auto; overflow: hidden; position: relative;}
#mvPanel li {float: left; text-align: center;}
#mvPanel img {width: 100%; height: 100%;}
/*
.flipsnap li {opacity: .4; -webkit-transition: all .8s ease;}
.flipsnap li.current {opacity: 1;}
*/
.pointer {text-align: center; margin-top: 20px;}
.pointer span {width: 15px; height: 15px; margin: 0 5px; border-radius: 50%; display: block; text-indent: -9999px; background: #ccc; display: inline-block; cursor: pointer;}
.pointer .current {background: #666;}

.viewport {position: relative;}

.controls div {position: absolute; text-indent: -9999px; cursor: pointer;}
#mainVisual .prev {width: 38px; height: 110px; left: 0; top: 50%; margin-top: -55px; background: url(/img/feature/arrow_left.png) no-repeat 10px 20px rgba(255,255,255,.7); border-radius: 0 5px 5px 0; padding: 10px 10px; background-size: 28px 90px;}
#mainVisual .next {width: 38px; height: 110px; right: 0; top: 50%; margin-top: -55px; background: url(/img/feature/arrow_right.png) no-repeat 15px 20px rgba(255,255,255,.7); border-radius: 5px 0 0 5px; padding: 10px 10px; background-size: 28px 90px;}

#mainVisual .prev.disabled,
#mainVisual .next.disabled {display: none;}

.map iframe {width: 100%;}

aside.share {border: none; text-align: center; margin-top: 30px; background: #fff; padding: 20px 0; line-height: 2;}
aside.share a {display: inline-block; margin-right: 20px;}
aside.share a:last-child {margin-right: 0;}
aside.share span {display: inline-block; margin-right: 20px; color: #999; font-size: small;}
aside.share img {vertical-align: bottom;}

/* 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-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;}

/* photoswipe */
.photoswipe-gallery.col2, .photoswipe-gallery.col3 {margin-right: -20px; letter-spacing: -.40em;}
.photoswipe-gallery.col2 span {display: inline-block; letter-spacing: normal; margin: 0 20px 10px 0; vertical-align: top; width: 46%; cursor: zoom-in;}
.photoswipe-gallery.col3 span {display: inline-block; letter-spacing: normal; margin: 0 20px 10px 0; vertical-align: top; width: 30%; cursor: zoom-in;}
.photoswipe-gallery.col2 span img, .photoswipe-gallery.col3 span img {width: 100%; height: auto; float: none;}
.pswp__share-tooltip a.pswp__share--download {display: none;}
.pswp__caption {text-align: center;}
.pswp__caption__center {display: inline-block; max-width: 728px;}
.pswp__caption__center a {color: #ccc;}
.pswp__caption__center li.not a {pointer-events: none;}
.pswp__caption__center ul {margin: 0;}

/* 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 */
.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;}
	ul.col4, ul.col6 {margin-right: -10px;}
	.wrapper {width: 90%;}
	.wrapper .wrapper {width: 100%;}
	.col2_1 img,
	.col2_2 img,
	.col2_3 > img {width: 100%; float: none;}
	.col2_3  .itemList ul,
	.col3 li, .col2 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;}
	.col4 li {display: inline-block; letter-spacing: normal; margin: 0 3% 10px 0; vertical-align: top; width: 47%;}
	ul.col3, ul.col2 {display: block; width: 100%;}
	.col3 li, .col2 li {display: block; width: 100%;}
	.col6 li {margin: 0 3% 10px 0; vertical-align: top; width: 47%;}
	aside h3 {margin-top: 10px;}
	
	.col2_3 .itemList li:after {content: ""; clear: both; display: block;}
	
	.controls .prev,
	.controls .next {display: none;}
	
	/* photoswipe */
	.photoswipe-gallery.col3, .photoswipe-gallery.col2 {display: block; width: 100%;}
	.photoswipe-gallery.col3 span,
	.photoswipe-gallery.col2 span {width: 47%; margin: 0 3% 10px 0; vertical-align: top; display: inline-block;}
	
	#container {padding: 2% 0 2% 3%;}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	p.lead {line-height: 1.6;}
	.wrapper {width: 90%;}
	.wrapper .wrapper {width: 100%;}
	.col6 li {margin: 0 20px 10px 0; vertical-align: top; width: 30%;}
}

@media screen and (min-width: 415px) and (max-width: 800px) {
	.box {width: 45%;}
}

@media screen and (max-width: 414px){
	#container {padding: 2% 0 2% 3%;}
	.box {width: 93%; margin: 0 2.5% 2.5% 0;}
}