@charset "Shift-JIS";

/*========================================================================
 *
 *    [file]      detail.css
 *    [version]   1.0
 *    [copyright] MAGASEEK
 *    [structure] 01. RESET
 *    [notes]
 *
 *========================================================================*/

.detail-cols { background: #fff; margin: 0 0 5%; padding: 4%; position: relative; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15); }
.detail-cols .detail-head { margin: 0; position: absolute; left: 54%; }
.detail-cols .detail-head .ico { min-height: 18px; }
.detail-cols .detail-head .ico span { width: 62px; margin-bottom: 3px; }
.detail-cols .detail-head h1 { font-size: 20px; margin: 12px 0; }
.detail-cols .detail-head .price { font-weight: bold; font-size: 16px; }
.detail-cols .detail-head .price span { font-size: 12px; }
.detail-cols .l-col { float: left; width: 50.6%; }
.detail-cols .l-col .image { border: 1px solid #eee; position: relative; }
.detail-cols .l-col .image .zoom { position: absolute; bottom: 1px; right: 1px; width: 29px; height: 26px; z-index: 99; }
.detail-cols .l-col .image #loader { background: url(../images/parts/loader.gif) no-repeat left top; display: none; width: 32px; height: 32px; position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -16px; }
.detail-cols .l-col .zashi, .detail-cols .l-col .other-image { margin: 15px 0 0; }
.detail-cols .l-col .zashi h3, .detail-cols .l-col .other-image h3 { margin-bottom: 10px; }
.detail-cols .l-col .other-image li { width: 72px; float: left; margin: 0 12px 12px 0; }
.detail-cols .l-col .image .prev, .detail-cols .l-col .image .next { display: none; }
.detail-cols .r-col { float: right; width: 46%; padding-top: 17.2%; }
.detail-cols .r-col .select-color-item, .detail-cols .r-col .select-size-item { margin-bottom: 30px; }
.detail-cols .r-col .select-color-item .ttl-color, .detail-cols .r-col .select-size-item .ttl-size { font-size: 14px; font-weight: bold; margin: 0 0 15px; }
.detail-cols .r-col .select-color-item li a, .detail-cols .r-col .select-size-item li { font-size: 14px; font-weight: bold; text-align: center; border: 3px solid #ccc; width: 55px; float: left; margin: 0 10px 10px 0; }
.detail-cols .r-col .select-color-item .item-soldout a, .detail-cols .r-col .select-size-item .item-soldout { background: #000; }
.detail-cols .r-col .select-color-item .item-soldout img, .detail-cols .r-col .select-size-item .item-soldout a { opacity: 0.9; filter: alpha(opacity=90); -ms-filter: "alpha( opacity=90)"; }
.detail-cols .r-col .select-color-item li a.selected, .detail-cols .r-col .select-size-item li.selected { border-color: #000; }
.detail-cols .r-col .select-size-item li { width: 55px; }
.detail-cols .r-col .select-size-item li a { text-decoration: none !important; display: block; padding: 5px 0 3px; background: #fff; }
#detail-tabs { margin-bottom: 20px; }
#detail-tabs .tab-cont .inner p { margin-bottom: 12px; }
#detail-tabs .tab-cont .inner strong { font-weight: bold; }

#detail-tabs .tab-cont .inner th, #detail-tabs .tab-cont .inner td { vertical-align: top; text-align: left; padding: 5px 0; }
#detail-tabs .tab-cont .inner th { font-weight: normal; width: 85px; }

.cart-area { margin-bottom: 20px; }
.cart-area form { position: relative; }
.option { margin-bottom: 10px;}
#stock-info { font-size: 14px; font-weight: bold; margin-top: 10px; }
#stock-info span {display: none;}
.point-info { margin: 0 0 20px; float: right; width: 70%; }
.point-info h3 { margin-bottom: 3px; }
.point-info p { font-size: 10px; line-height: 1.4; }
.cart-area form { margin-bottom: 10px; }
.cart-area .anchor { font-weight: bold; margin: 0 8px; float: left; }
/* .information { border: 1px solid #e0e0e0; background: #fafafa; margin-top: 10px; padding: 14px; }
.information h4 { font-weight: bold; font-size: 11px; color: #ec0d5c; margin-bottom: 10px; }
.information p { font-size: 10px; line-height: 1.4; } */
.sf #recommend h2 { width: 200px; }
.um .row { margin-bottom: 40px; padding: 40px 20px; }
#new-arrival, #ranking, #recommend { position: relative; }
#recommend .image { margin-bottom: 8px; border: 1px solid #d3d3d3; }
#recommend .itemlist li { width: 23.3%; float: left; margin-left: 2.2%; }
#recommend .itemlist li:first-child { margin-left: 0; }
#recommend .bx-controls { width: 100%; position: relative; margin-top: -120px; height: 200px; margin-top: -180px; }
#recommend .bx-controls-direction .bx-prev, #recommend .bx-controls-direction .bx-next { text-indent: -9999px; width: 22px; height: 43px; display: block; position: absolute; top: 0; }
#recommend .bx-controls-direction .bx-prev { background: url(../images/parts/btn-sprev.png) no-repeat left top; left: 0; margin-left: -20px; }
#recommend .bx-controls-direction .bx-next { background: url(../images/parts/btn-snext.png) no-repeat left top; right: 0; margin-right: -20px; }
#recommend .bx-controls-direction .disabled { display: none; }
.sale { font-weight: bold; }
.sale .price { color: #ca0823; }
.row { padding: 20px; }
.line-through { text-decoration: line-through; }
.load-cbox { height: auto; }
#zoom-gallery { max-width: 700px; min-height: 1150px; position: relative; overflow: auto; }
#gallery-vi { width: 700px; height: 840px; }
#gallery-vi li { position: absolute; }
#zoom-gallery .bx-wrapper { margin-bottom: 30px; }
#zoom-gallery .bx-prev, #zoom-gallery .bx-next { background: #575757 url(../images/common/detail-sprite.png) no-repeat left top; border-radius: 50%; width: 35px; height: 35px; position: absolute; top: 350px; z-index: 99; text-indent: -9999px; -moz-transition: .1s; -webkit-transition: .1s; -o-transition: .1s; }
#zoom-gallery .bx-prev { left: 10px; background-position: -24px 4px; }
#zoom-gallery .bx-prev:hover { background-position: -26px 4px; }
#zoom-gallery .bx-next { right: 10px; background-position: -52px 4px; }
#zoom-gallery .bx-next:hover { background-position: -50px 4px; }
#ext-pager h2 { font-family: 'Miso', Arial, sans-serif; font-size: 18px; font-weight: bold; letter-spacing: 2px; margin: 0 0 20px; }
#ext-pager .thumb  { margin: 10px 0 30px 20px; }
#ext-pager li { float: left; margin-right: 5px; max-width: 60px; }
#ext-pager li a, #ext-pager li a img { float: left; overflow: hidden; }
#ext-pager li a { display: block; border: 1px solid #eee;  }
#ext-pager li a img { margin: -1px; width: 60px; max-width: none; height: 100%; }
#ext-pager li a.active { border: 3px solid #000; }
#ext-pager li a.active img { margin: -3px; }
/*#ext-pager li { float: left; margin-right: 5px; max-width: 60px; }
#ext-pager li a { border: 1px solid #eee; }
#ext-pager li a, #ext-pager li a img { float: left; overflow: hidden; }
#ext-pager li a img { margin: -1px; max-width: none; }
#ext-pager li a.active { border-color: #000; border-width: 3px; width: 54px; }
#ext-pager li a.active img { margin: -3px; }*/
#social-btn li { float: left; margin: 10px 8px 0 0; }
#social-btn .btn-facebook, #social-btn .btn-twitter { width: 70px; overflow: hidden; }
#social-btn .btn-line { width: 88px; }
#social-btn .btn-mail a { display: block; }
#social-btn .btn-mail, #social-btn .btn-mail img { width: 54px; }
.linkbox_wrap {	display:none;}
.linkbox_wrap.enable {display:block;}
.linkbox_wrap .linkbox_bg {z-index:200;background:rgba(0,0,0,0.6);position:fixed;top:0;bottom:0;left:0;right:0;cursor:pointer;}
.linkbox_wrap h3 { font-size: 17px;padding: 5px;border-bottom: solid 1px #aaaaaa;margin-bottom: 15px;font-weight: bold;}
.linkbox {position:absolute;top:-1000px;left:50%;width:500px;height: 125px;margin-left:-295px;background:#ffffff;padding:30px;border-radius:8px;z-index:201;letter-spacing: .05em;}
.linkbox .close {float:right;cursor:pointer;margin: 5px;}
.linkbox .main {float:left;width:400px;}
.linkbox .main ul {overflow:hidden;}
.linkbox .main ul li {display:none;opacity:0;}
.linkbox .main ul li img {width:100%;}
.linkbox .main ul li.active {display:block;opacity:1;}
.linkbox .thumb {float:right;width:330px;}
.linkbox .thumb ul {clear:both;margin-right:-10px;}
.linkbox .thumb ul li {float:left;width:73px;border:1px solid #ececec;margin:0 10px 10px 0;}
.linkbox .thumb ul li img {width:100%;}
.linkbox .thumb ul li.active {border:1px solid #616161;}
.linkbox_wrap h3 {font-size: 20px; padding: 10px;}
.btn-area {margin: 30px 0 30px 0;}
.btn-01, .btn-02 {padding: 8px 20px;}

/*-----------------------------------------------------------------------
    TABLET
 -----------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
	.detail-cols .detail-head { position: static; margin: 4% 0; }
	.detail-cols .detail-head h1 { margin: 10px 0; }
	.detail-cols .l-col,
	.detail-cols .r-col { float: none; }
	.detail-cols .l-col { margin: auto; width: 100%; }
	.detail-cols .l-col .image { width: 60%; margin: auto; }
	.detail-cols .r-col { padding-top: 3%; width: 100%; }
	.detail-cols .l-col .image .zoom { display: none; }
	.detail-cols .l-col .image .prev,
	.detail-cols .l-col .image .next { display: block; position: absolute; top: 50%; margin-top: -25px; width: 26px; height: 51px; text-indent: -9999px; }
	.detail-cols .l-col .image .prev { background: url(../images/parts/btn-prev.png) no-repeat left top;  left: 0; }
	.detail-cols .l-col .image .next { background: url(../images/parts/btn-next.png) no-repeat left top;  right: 0; }
	.cart-area { text-align: center; }
	.point-info { float: none; }
	.point-info { text-align: left; clear: left; }
	.cart-area .anchor { margin-bottom: 20px; }
	#zoom-gallery .bx-prev, #zoom-gallery .bx-next { top: 24%; }
	#stock-info { position: static; display: inline-block; vertical-align: top; padding: 8px 0 0 10px; }
	#stock-info span { display: none; }
	.detail-cols .detail-head .ico span { /*width: 40px;*/ }
	.linkbox {position:absolute;top:-1000px;left:50%;width:78%;margin-left:-46.875%;z-index:101;background:#ffffff;padding: 10px 8% 25px;border-radius:8px;z-index:201;height: auto; }
	.linkbox .close {float:none;position:absolute;margin-bottom:10px;cursor:pointer;top:12px;right:12px;width:16px;margin:0;}
	.linkbox .close img {width:100%;}
	.linkbox .main {float:none;width:100%;margin-bottom:10px;}
	.linkbox .main ul {overflow:hidden;}
	.linkbox .main ul li {display:none;opacity:0;}
	.linkbox .main ul li img {width:100%;}
	.linkbox .main ul li.active {display:block;opacity:1;}
	.linkbox .thumb {float:none;width:100%;}
	.linkbox .thumb ul {clear:both;margin-right:-10px;}
	.linkbox .thumb ul li {float:left;width:16%;border:1px solid #ececec;margin:0 2% 6px 0;}
	.linkbox .thumb ul li img {width:100%;}
	.linkbox .thumb ul li.active {border:1px solid #616161;}
	.btn-01, .btn-02, .btn-03 {margin: 5px;}
	.btn-area {margin: 20px 0 0 0;}
}

/*-----------------------------------------------------------------------
    SMART PHONE(LANDSCAPE)
 -----------------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
	.detail-cols .l-col .other-image li { width: 37px; }
	#detail-photo .large { width: 292px; }
	.detail-cols .r-col .select-color-item li a, .detail-cols .r-col .select-color-item li img { width: 35px; }
	#zoom-gallery .bx-prev, #zoom-gallery .bx-next { top: 20%; }
	#recommend .bx-controls-direction .disabled { display: none; }
	.detail-cols .detail-head .ico span { margin-bottom: 6px; }
	#social-btn li { margin-right: 4px; }
	#social-btn .btn-line { margin-right: 0; }
}

/*-----------------------------------------------------------------------
    SMART PHONE(PORTRAIT)
 -----------------------------------------------------------------------*/
@media only screen and (max-width: 320px) {
	#zoom-gallery .bx-prev, #zoom-gallery .bx-next { top: 15%; }
}