@charset "UTF-8";

/* CLEARFIX */
#nav,
#intro ul,
.thisItems,
#album #photoList,
#album #photoList ul {zoom: 1;}
#nav:after,
#intro ul:after,
.thisItems:after,
#album #photoList:after,
#album #photoList ul:after {content: "."; display: block; visibility: hidden; clear: both; height: 0; font-size: 0; line-height: 0;}

html {min-height: 100%;}

a {text-decoration: none; color: #333;}
img {vertical-align: bottom;}
h1, h2 {font-weight: normal;}
button {outline: 0;}

body#index {background: url(/wool2014/img/background.jpg) no-repeat center center; background-size: cover;}

#nav {background-color: rgba(255,255,255,0.65); padding: 20px;}
#nav:after {content: ""; display: block; clear: both;}
#nav #brandLogo {float: right;}
#nav #brandLogo a {display: block; line-height: 1;}
#nav #brandLogo img {width: 80px;}
#nav ul:after {content: ""; display: block; clear: both;}
#nav ul {padding: 0; margin: 0;}
#nav li {float: left; margin-right: 20px; font-size: 14px; list-style: none;}
#lookbook #nav,
#album #nav {position: fixed; z-index: 1; right: 0; left: 0;}

#index #main {text-align: center;}
#index #main h1 {font-size: 40px; margin: 60px 0 20px; opacity: .7;}
#index #main h1 img {width: 333px;} #index #main h2 {font-size: 18px; margin: 0 0 60px;}
#index #main .lead {font-size: 16px; margin-bottom: 60px; color: #777;}
#index #main ul {margin: 0; padding: 0;}
#index #main li {margin-bottom: 30px; list-style: none;}
#index #main a {display: inline-block;}

#index #main .lookbookLink a {font-size: 14px; background: rgba(0,0,0,.3); border-radius: 18px; color: #fff; line-height: 1; padding: 12px 28px 10px; letter-spacing: .1em;}
#index #main .lookbookLink a:hover {background: rgba(0,0,0,.5);}
#index #main .albumLink a {background-size: 9px auto; padding-right: 20px;}

#sns {float: left; width: 80px;}
#sns .fb_btnImg {height: 25px; margin-right: 15px;}
#sns .tw_btnImg {height: 25px;}

footer {position: fixed; bottom: 20px; left: 20px; right: 20px;}
#copyright {color: #fff; float: right; margin: 0; line-height: 25px; font-size: 10px;}
#lookbook #copyright {color: #191919; font-size: 16px;}

#lookbook #main {width: 700px; padding-top: 60px; margin: 0 auto;} 
#lookbook .viewport {position: relative;}
#lookbook .info {position: fixed; top: 70px; left: 5%; display: block; z-index: 10; font-family: "helvetica", "arial", sans-serif;}
#lookbook .number {position: relative; border: 1px solid #d6d9dc; background: url(/wool2014/img/slash_line.png) no-repeat 15px 25px; display: block; width: 58px; height: 65px;}
#lookbook .number .current {position: absolute; left: 10px; top: 12px; display: block; width: 32px; font-size: 130%; line-height: 1.1;}
#lookbook .number .all {position: absolute; left: 33px; top: 41px; display: block; width: 32px; font-size: 91%; line-height: 1.1;}
#lookbook .controls button[disabled]{display: none;}
#lookbook .controls .prev {position: fixed; top: 25%; left: 0; display: block; border: 0; background: url(/wool2014/img/arrow_left.png) no-repeat 50% 50%; width: 200px; height: 50%; text-indent: -9999px; background-size: 30px auto;}
#lookbook .controls .next {position: fixed; top: 25%; right: 0; display: block; border: 0; background: url(/wool2014/img/arrow_right.png) no-repeat 50% 50%; width: 200px; height: 50%; text-indent: -9999px; background-size: 30px auto;}

#album #main {padding-top: 40px;}
#album iframe {width: 100% !important;}

#album .mainImage {width: 100%;}

#album header {
background-position: center -65px;
background-repeat: no-repeat;
background-color: #000;
background-size: 100%;
margin-top: 20px;
position: relative;
padding: 80px 0 0;
-webkit-transform: translateZ(0);
min-height: 350px;
}
#album p.lead {text-align: center;}
#album #photoList {text-align: center;}
#album #photoList img {margin: 5px; vertical-align: top;}
#album #photoList .portrait {width: 25%;}
#album #photoList .landscape {width: 51%;}
#album #photoList .portrait img,
#album #photoList .landscape img {width: 100%;}
#album #photoList ul {padding: 0;}
#album #photoList li {list-style: none; display: inline-block; margin: 0 5px 5px;}


#mobileMenu {display: none; position: absolute; top: 0; left: 0;}
#mobileMenu img {width: 15px; height: auto;}
#mobileMenu a {padding: 10px 20px; display: inline-block;}

.modal {width:100%; color: #ccc; display: none; position: relative; z-index: 9999;}
.modalBody {position: fixed; z-index: 1000; background: #000; width: 100%; left: 0; top: 0; height: 100%; padding: 0 10px; opacity: 0.85; filter: alpha(opacity=85);}
.modalBK {position: fixed; z-index: 999; height: 100%; width: 100%;}
.close {cursor: pointer; padding-left: 10px;}
.modal p {font-size:12px; text-align: justify; margin: 20px 0;}
.modalBody li {list-style: none;}
.modalBody li a {padding: 5px 0 13px 30px; display: inline-block; color: #ccc; font-size: 16px;}

.flipsnap .item .open {position: absolute; right: 5px; font-size: 14px; color: #fff; top: -5px; width: auto; height: 15px; padding: 15px; cursor: pointer; color: #191919; font-size: 12px;}
.flipsnap .item .open .text {margin-top: -5px;}
.flipsnap .item .open img {width: 12px; margin-right: 5px; margin-bottom: 2px; vertical-align: middle;}
.item .mobileOpen {display: none;}
.mask {display: none; position: absolute; width: 100%; background: rgba(0, 0, 0, .5); top: 0; width: 700px; height: 100%;}
.mask ul {float: left;}
.mask .close {position: absolute; right: 20px; top: 10px; color: #fff; font-size: 12px;}
.thisItems {padding: 45px 10px 20px 45px;}
.thisItems ul {padding-top: 2px; clear: both; margin: 0; padding-left: 15px;}
.thisItems li {width: auto; margin: 0 10px 0 0; text-align: left; padding-top: 8px; overflow: hidden; font-size: 14px; padding-bottom: 4px;}
.thisItems li a {color: #fff;}
.thisItems li a:hover {color: #999;}
.thisItems li.not a {pointer-events:none;}
.thisItems h4 {width: auto; height: auto; background: none; color: #fff; text-indent: 0; margin: 15px 15px 5px;}
.thisItems .annotation {font-size: 12px;}

.ie8Lead {display: none;}

/* IE8 */
html.ie8 .ie8Lead {display: block; text-align: center; margin-top: 50px;}
html.ie8 .ie8Lead h1 {font-size: 24px;}
html.ie8 #main, html.ie8 .modal, html.ie8 #mobileMenu, html.ie8 #navigation, html.ie8 .share {display: none;}
html.ie8 #brandLogo {height: 40px; text-align: center; margin-top: 40px;}
html.ie8 #brandLogo img {height: 40px;}
html.ie8 #copyright {color: #333; text-align: center; float: none; font-size: 14px; margin-top: 50px;}
html.ie8 #copyright small {font-size: 100%;}
html.ie8 body#index {background: none;}

@media only screen and (min-device-width: 768px) and (max-device-width : 1024px){
	#lookbook #main {padding: 15px 10px 0 10px; margin-top: 0;}
	#nav ul {display: none;}
	#mobileMenu {display: block;}
	#lookbook .number {border: 1px solid #999;}
	#lookbook .controls {display: none;}
	#lookbook #nav {background-color: rgba(255,255,255,0);}
	#lookbook #main {padding: 0; width: auto;}
	#lookbook .info {bottom: 40px; top: auto; right: 5%; left: auto;}
	.thisItems {padding: 10px 10px 20px 10px;}
	.item .open {display: none;}
	#lookbook .viewport .item .mobileOpen {position: absolute; left: 15px; font-size: 16px; color: #fff; bottom: 0; width: auto; height: 15px; padding: 15px; cursor: pointer; color: #191919; display: block;}
	#lookbook .viewport .item .mobileOpen img {width: 8px; height: auto; margin-right: 5px; margin-bottom: 4px; vertical-align: middle;}
	#album header {min-height: 320px;}
	.mask {display: none; position: absolute; width: 100%; background: rgba(0, 0, 0, .5); bottom: 0; top: auto; height: auto;}
	.mask ul {float: left;}
	.mask .close {display: none;}
}

@media only screen and (max-width : 767px){

	#nav ul {display: none;}
	#mobileMenu {display: block;}

	#nav #brandLogo img {width: 70px; height: auto;}

	#index #main h1 {font-size: 10px; margin: 20px 0;}	
	#index #main h1 img {width: 240px; height: 100%;}
	#index #main h2 {color: #191919; font-size: 14px; margin-bottom: 20px;}
	#index #main .lead {color: #191919; font-size: 12px;}
	#index #main .lead .date {font-size: 10px;}
	#index #main ul {margin-top: 15px;}
	
	.mask {display: none; position: absolute; width: 100%; background: rgba(0, 0, 0, .5); bottom: 0; top: auto; height: auto;}
	.mask ul {float: left;}
	.mask .close {display: none;}
	.thisItems {padding: 10px; width: 290px;}
	.thisItems li {padding-bottom: 0;}
	.thisItems h4 {font-size: 14px; float: left; margin: 5px 0 0;}
	.thisItems ul {padding-left: 0;}
	.thisItems li {font-size: 12px; padding-top: 5px;}
	.thisItems li:first-child {padding-top: 0;}
	.item .open {display: none;}
	#lookbook .viewport .item .mobileOpen {position: absolute; left: 15px; color: #fff; bottom: -5px; width: auto; height: 15px; padding: 15px; cursor: pointer; color: #191919; font-size: 12px; display: block;}
	#lookbook .viewport .item .mobileOpen img {width: 6px; height: auto; margin-right: 5px; margin-bottom: 4px; vertical-align: middle;}
	.thisItems .annotation {font-size: 10px; display: inline-block;}

	#album header {background-position: center -20px; background-size: 130%; min-height: 130px;}
	#album #photoList {text-align: left;}
	#album p.lead {text-align: left; margin: 10px;}
	#album #photoList ul {margin: 0 5px 0;}
	#album #photoList li {margin: 5px;}
	#album #photoList li.portrait {width: 45%;}
	#album #photoList li.landscape {width: 95%;}
	#album #photoList img {margin: 0;}
	#album #photoList .portrait img {width: 100%; height: auto;}
	#album #photoList .landscape img {width: 100%; height: auto;}
	#album #photoList li:nth-child(n+13) {display: none;}
	
	#lookbook .controls {display: none;}
	#lookbook #nav {background-color: rgba(255,255,255,0);}
	#lookbook #main {padding: 0; width: auto;}
	
	body#lookbook .info {bottom: 20px; top: auto; right: 5%; left: auto;}
	#lookbook .number {border: 1px solid #999;}
	
	#lookbook .viewport {overflow:hidden; width:320px;}	 
	.flipsnap {overflow:hidden;width:3600%;}
	 
	#lookbook .viewport .item {
	    float:left;
/*	    width:auto;
	    height:100%; */
	    width: 100%;
	    height: 100%;
	    position: relative;
	    overflow: hidden;
	    text-align: center;
	    }
	 
	#lookbook .viewport .item img {
/*	    width:auto;
	    height:100%; */
	    width: 345px;
	    height: 460px;
	    margin-left: -12px;
	    }

}