@charset "UTF-8";

/******************************
Font20
******************************/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/******************************
Reset
******************************/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset,
input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset, img {
    border: 0
}

address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal
}

ol, ul {
    list-style: none
}

caption, th {
    text-align: left
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal
}

q:before, q:after {
    content: ""
}

abbr, acronym {
    border: 0
}
select, input, textarea, button {
    font: 99% Helvetica, Arial, clean, sans-serif
}

table {
    font-size: inherit;
    font: 100%
}

pre, code, kbd, samp, tt {
    font-family: monospace;
    * font-size: 108%;
    line-height: 100%
}

del, ins, var, article, aside, canvas, details, span, figure, footer,
header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    margin: 0;
    padding: 0
}

footer, header, hgroup, legend, nav, section, menu {
    display: block;
    zoom: 1
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: 700
}

del {
    text-decoration: line-through
}

body {
    -webkit-text-size-adjust: none
}

sup {
    vertical-align: text-top
}

sub {
    vertical-align: text-bottom
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit
}

input, textarea, select {
    * font-size: 100%
}

legend {
    color: #000
}

a {
    cursor: pointer;
    _cursor: hand;
    outline: none
}

embed, object {
    display: block;
    outline: none
}

object, a:focus {
    -moz-outline-style: none
}

q:before, q:after {
    content: ""
}

abbr, acronym {
    border: 0
}

/* clearfix */
.clearfix {
    * zoom: 1
}
.clearfix:before, .clearfix:after {
    display: table;
    content: "";
    line-height: 0
}
.clearfix:after {
    clear: both
}

/* display */
.visible-pc {
	display:  block;
}
.visible-sp {
	display: none;
}

/* link */
a {
    color: #aaa;
    text-decoration: none
}
a:hover {
    color: #fff
}


/******************************
Common
******************************/

/* Layout */
html,body {
    height: 100%;
}
body {
	font: 14px/1.8em 'Roboto','Noto Sans Japanese',"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic" , sans-serif;
	position: relative;
    background: #141118;
    line-height: 1.231;
    letter-spacing: 1px;
    overflow: hidden;
	outline: none;
	-webkit-text-size-adjust: none;
}
#wrapper {
    width: 100%;
    height: 100%;
	position:  relative;
	display:  none;
}

#contents .view-inner {
	width: 100%;
	height: 100vh;
}
#contents .photo {
	position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position:  50% 0;
    background-repeat: no-repeat;
    background-size: cover
}


.table {
	display:  table;
	width:  100%;
	height:  100%;
}
.table-inner {
	display:  table-cell;
	vertical-align:  middle;
}

/* ローディング */
#loading {
position: absolute;
top:  0;
left:  0;
display:  none;
width: 100%;
height: 100%;
}

.load-inner {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 2px solid #FFF;
  border-radius: 50%;
  animation: spin 0.75s infinite linear;
top:  50%;
left:  50%;
position:  absolute;
margin-top:  -1em;
margin-left:  -1em;

}
.load-inner::before,
.load-inner::after {
  left: -4px;
  top: -2px;
  display: none;
  position: absolute;
  content: '';
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
}


.load-inner,
.load-inner::before {
  display: inline-block;
  border-color: transparent;
  border-top-color: #FFF;
}
.load-inner::before {
  animation: spin 1.5s infinite ease;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
}
}


/* スクロールボタン */
.btnDownWrap {
	position:  absolute;
	bottom:  -100px;
	right:  30px;
	z-index: 900;
	transition: bottom 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
	-webkit-transition: bottom 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.btnDownWrap.active {
	bottom:  40px;
}
.btnDown,
.btnDown span {
	display: inline-block;
	width: 80px;
	height: 80px;
	transition: all .4s;
}
.btnDown {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius:  50%;
	background-color: rgba(0,0,0,0.7);
	cursor: pointer;
}
.btnDown:hover {
	background-color: rgba(0,0,0,0.7);
	transform: matrix(1.2,0.00,0.00,1.2,0,0);
	-webkit-transform: matrix(1.2,0.00,0.00,1.2,0,0);
}
.btnDown a {
	display:  block;
	width: 40px;
	height: 40px;
}
.btnDown span {
	position: absolute;
	top:  12px;
	width: 10px;
	height: 1px;
	background-color: #fff;
}
.btnDown span:nth-of-type(1) {
	left: 12px;
}
.btnDown span:nth-of-type(2) {
	right: 11px;
}

.btnDown span:nth-of-type(1) {
	transform: translateY(8px) rotate(45deg);
	-webkit-transform: translateY(8px) rotate(45deg);
}
.btnDown span:nth-of-type(2) {
	transform: translateY(8px) rotate(-45deg);
	-webkit-transform: translateY(8px) rotate(-45deg);
}

/* クローズ */
.btnClose,
.btnClose span {
	display: inline-block;
	width: 80px;
	height: 80px;
	transition: all .4s;
}
.btnClose {
	position:  absolute;
	top:  100px;
	right:  30px;
	width: 40px;
	height: 40px;
	background-color: rgba(0,0,0,1);
	border-radius:  50%;
	cursor: pointer;
}
.btnClose:hover {
	background-color: rgba(0,0,0,0.7);
	transform: matrix(1.2,0.00,0.00,1.2,0,0);
	-webkit-transform: matrix(1.2,0.00,0.00,1.2,0,0);
}

.btnClose span {
	position: absolute;
	top:  12px;
	width: 20px;
	height: 1px;
	background-color: #fff;
}
.btnClose span:nth-of-type(1) {
	left:  10px;
}
.btnClose span:nth-of-type(2) {
	right: 10px;
}

.btnClose span:nth-of-type(1) {
	transform: translateY(8px) rotate(45deg);
	-webkit-transform: translateY(8px) rotate(45deg);
}
.btnClose span:nth-of-type(2) {
	transform: translateY(8px) rotate(-45deg);
	-webkit-transform: translateY(8px) rotate(-45deg);
}

/* ハンバーガーボタン*/
.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .4s;
}
.menu-trigger {
	position: relative;
	width: 27px;
	height: 17px;
}
.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #fff;
}
#top .menu-trigger span {
	background-color: #000;
}
#top .active span {
	background-color: #FFF;
}

.menu-trigger span:nth-of-type(1) {
	top: 0;
}
.menu-trigger span:nth-of-type(2) {
	top: 8px;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}
.menu-trigger:not(.active):hover span:nth-of-type(2) {
	width: 70%;
}
.menu-trigger:not(.active):hover span:nth-of-type(3) {
	width: 35%;
}
.menu-trigger.active span:nth-of-type(1) {
	transform: translateY(8px) rotate(-45deg);
	-webkit-transform: translateY(8px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
	transform: translateY(-8px) rotate(45deg);
	-webkit-transform: translateY(-8px) rotate(45deg);
}

/* 画面遷移 */
.fadeOut {
	animation: fadeOut .5s cubic-bezier(.21,.77,.72,.94) both;
	-webkit-animation: fadeOut .5s cubic-bezier(.21,.77,.72,.94) both;
}
@-webkit-keyframes fadeOut { to { opacity: 0; -webkit-transform: matrix(1, 0, 0, 1, 0, -500); }}
@keyframes fadeOut { to { opacity: 0; -webkit-transform: matrix(1, 0, 0, 1, 0, -500); transform: matrix(1, 0, 0, 1, 0, -500); }}

.fadeIn {
	-webkit-animation: fadeIn .3s cubic-bezier(.21,.77,.72,.94) both;
	animation: fadeIn .3s cubic-bezier(.21,.77,.72,.94) both;
}
@-webkit-keyframes fadeIn { from { opacity: 1; -webkit-transform: matrix(1, 0, 0, 1, 0, 500); }}
@keyframes fadeIn { from { opacity: 1; -webkit-transform: matrix(1, 0, 0, 1, 0, 500); transform: matrix(1, 0, 0, 1, 0, 500); }}




/* header*/
#header {
	position:  fixed;
	width:  100%;
	height:  80px;
	background-color: #000;
	z-index:  900;
}
#menu {
	position:  fixed;
	top:  30px;
	right: 30px;
	z-index:  3000;
}
#header h1 {
text-align:  center;
}
#header h1 img {
	width:  160px;
	margin-top: 20px;
}
#header #top-nav {
	display:  none;
}
#header .grid .sns {
position:  absolute;
left:  30px;
top:  30px;
}
#header .grid .sns li {
float:  left;
margin-right:  30px;
opacity: 0.4;
}

/* top page */
#top #header .grid {
display:  none;
}
#top #header {
height:  100%;
background:  none;
}
#top #header .grid {
padding: 40px;
width:  100%;
position:  absolute;
opacity: 0;
top:  50%;
left:  -100%;
height:  180px;
background-color:  #000;
margin-top:  -90px;
z-index:  600;
text-align:  center;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: left 0.1s cubic-bezier(.09,.68,.61,.95),opacity 0.4s cubic-bezier(.09,.68,.61,.95);
transition: left 0.1s cubic-bezier(.09,.68,.61,.95),opacity 0.4s cubic-bezier(.09,.68,.61,.95);
}
#top #header .grid .inner {
opacity: 0;
-webkit-transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
#top #header .grid .sns {
/*display:  none;*/
top:45px;
left:  40px;
}
#top #header #top-nav {
display: block;
}

#top.slide-topNav-on #header .grid {
left:  0;
opacity: 1;
}
#top.slide-topNav-on #header .grid .inner {
left:  0;
opacity: 1;
}

#top #header h1 img {
width:  250px;
margin:  0 auto;
}
#top #contents .photo {
top: 0;
}


/* gnav */
#gnav {
display:  table;
position:  absolute;
top: 0;
left:  -100%;
z-index: 2000;
width:  100%;
height:  100%;
background-color: rgba(0,0,0,0.9);
opacity: 0;
 -webkit-transition: left 0.2s cubic-bezier(.09,.68,.61,.95),opacity 0.3s cubic-bezier(.09,.68,.61,.95);
  transition: left 0.2s cubic-bezier(.09,.68,.61,.95),opacity 0.3s cubic-bezier(.09,.68,.61,.95);
}
#gnav .inner {
opacity: 0;
-webkit-transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;

}
body.slide-nav-on #gnav {
left:  0;
opacity: 1;
}
body.slide-nav-on #gnav .inner {
opacity: 1;
}




#gnav.active {
display:  table;
}
#gnav a {
color:  #999;
font-weight: 100;

transition: .2s;
}
#gnav a:hover {
color:  #FFF;
}

#gnav .brand-logo {
margin:  0 0 80px;
text-align:  center;
}
#gnav .brand-logo img {
margin:  0 auto;
width: 200px;
}
#gnav .inner {
display:  table-cell;
vertical-align:  middle;
}
#gnav li span.date {
display: block;
font-size: 10px;
color:  #FFF;
text-align: center;
margin-top:  5px;
font-style:  italic;
}


#top-nav li span.date {
display: block;
font-size: 10px;
color:  #FFF;
text-align: center;
margin-top:  5px;
font-style:  italic;
}


#top-nav ul {
display: table;
margin:  20px auto 0;
}
#top-nav li {
display: table-cell;
padding:  0 20px;
}
#top-nav li a {
font-weight: 100;
font-family: 'Roboto', sans-serif;
}
#top-nav li {
position: relative;

}
#top-nav li  span.icon {
text-align:  center;
color:  #FFF;

display:  inline-block;
font-size:  16px;
vertical-align: middle;
margin-right:  5px;
}


#gnav #local-nav {
text-align:  center;
margin:  0 0 40px;
}

#gnav #local-nav a {
font-size:  20px;
}
#gnav #local-nav ul.pulldown-menu {
margin:  20px auto 0;
display: none;


}
#gnav #local-nav ul.pulldown-menu li {
display:  inline-block;
padding:  0 20px;
margin:  0;
opacity: 0;

}
#gnav #local-nav ul.pulldown-menu li a {
font-size:  12px;
}



#gnav #local-nav li {
margin:  0 0 30px;
}
#gnav #brand-nav {
margin:  0 0 60px;
}
#gnav #brand-nav ul {
display:  table;
margin:   0 auto;
}
#gnav #brand-nav li {
display:  table-cell;
padding:  0 20px;
}
#gnav #brand-nav li img {
height:  30px;
}
#gnav footer {
width:  100%;
text-align:  center;
}
#gnav footer #sub-nav {
padding:  0 40px;
margin:  0 0 40px;
}
#gnav footer #sub-nav li {
display:  inline-block;
margin:  0 10px;
}
#gnav footer #native-link {
margin:  0 0 40px;

}
#gnav footer #native-link a {
background:  url(../img/icon_flag_fr.png) no-repeat left center;
background-size: 22px 14px;
padding:  0 0 0 30px;
}
#gnav footer #copyright {
font-size:  10px;
font-weight: 100;
color:  #999;
}


/* Layout */

#contents {
width:  100%;
min-height: 100vh;
/*overflow:  hidden;*/
position:  absolute;
top:  0;
}

/* catalog */
#catalog .view1 {
padding-top:  80px;
height: 100%;
}
#catalog .view1 ul {
display:  table;
height:  100vh;
width:  100%;
}
#catalog .view1 ul li {
display: table-cell;
width:  33.333333%;
height:  100%;
position: relative;
overflow:  hidden;
}
#catalog .bg-scale {
width:  100%;
height:  100%;
    /*background-position: 0 50%; */
    background-repeat: no-repeat;
 -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -ms-transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#catalog .bg-scale:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
 opacity: .8;

}
#catalog .view1 h2 {
font-size:  120px;
margin:  0;
font-family: 'Roboto', sans-serif;
color:  #FFF;
font-weight: 300;
position:  absolute;
top:  50%;
z-index:  100;
text-align:  center;
width:  100%;
margin-top:  -.5em;

}

#catalog .view1 ul li a {
display:  block;
width:  100%;
height:  100%;
color:  #000;
}
#catalog .view1 ul li span.fnt-w {
	color:  #FFF;
}
#catalog .view1 ul li a span {
	position:  absolute;
	bottom: 100px;
	display:  block;
	text-align:  center;
	width:  100%;
	font-size:  50px;
	font-family: 'Roboto', sans-serif;
	font-weight:  100;
}



#catalog .view2  {
text-align:  center;
/*margin-top:  80px;*/
}
#catalog .view2 h2 {
font-size:  120px;
margin:  0 0 80px;
font-family: 'Roboto', sans-serif;
color:  #FFF;
font-weight: 300;
}
#catalog .view2.apr2017 h2 {
font-size:  70px;
color:  #000;
margin:  0 0 40px;

}

#catalog .view2 h3 {
font-size:  60px;
font-family: 'Roboto', sans-serif;
font-weight:  300;
}
#catalog .view2 h3 span {
font-size:  40px;
}

#catalog .view2 .table-inner.image {
width:  50%;
    background-position: 50% 0;
    background-repeat: no-repeat;
 -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;


}
#catalog .view2 .table-inner.text {
width:  50%;
}
#catalog .itemList {
width:  100%;
height: 100%;
background-color:  rgba(0,0,0,0.9);
position:  absolute;
top:  0;
left:  0;
display: table;
display:  none;
}
#catalog .itemList .inner {
width:  100%;
height:  330px;
display:  table-cell;
vertical-align:  middle;
position: absolute;
top:  50%;

margin-top:  -155px;
padding:  0 80px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 100;

}
#catalog .itemList li {
width:  14.285714%;
float:  left;
padding:  0 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color:  #FFF;
}
#catalog .itemList li a {
display:  block;
opacity: 1;
transition: all 0.4s cubic-bezier(0.550,0.085,0.680,0.530) 0s;

}
#catalog .itemList li a:hover {
opacity: 0.6;
}

#catalog .itemList li p.name {
margin:  10px 0;
}



/*
#catalog　.swiper-container {
    width: 100%;
	padding-top:  80px;
	height:  100vh;
	background-color:  #FFF;
}
*/
#catalog #contents .photo {
	position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position:  50% 0;
    background-repeat: no-repeat;
    background-size: cover;
	height:  -webkit-calc(100vh - 80px);
height: -moz-calc(100vh - 80px);
height:  calc(100vh - 80px);

}




.swiper-container {
    width: 100%;
	height:  100vh;
	background-color:  #FFF;
}
.swiper-container img {
max-width:  100%;

}
    .swiper-slide {
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;

    }
.swiper-button-next {
 right: 20px;
}
.swiper-button-prev {
 left: 20px;
}
.swiper-button-next,
.swiper-button-prev {
background:  none;
width:  50px;
height:  50px;
text-align:  center;
margin-top:  -25px;
border-radius:  50%;
background-color:  #FFF;

transform-origin: center center; 
transition: all 0.3s cubic-bezier(0.550,0.085,0.680,0.530) 0s;
-webkit-transform-origin: center center; 
-webkit-transition: all 0.3s cubic-bezier(0.550,0.085,0.680,0.530) 0s;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
transform: matrix(1.4,0.00,0.00,1.4,0,0);
-webkit-transform: matrix(1.4,0.00,0.00,1.4,0,0);
background-color:  #eee;
}
.swiper-button-next img,
.swiper-button-prev img {
position:  absolute;
top:  50%;
left:  50%;
margin: -3px 0 0 -10px;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
display: none;

}


/* zoomer */
.zoomer_wrapper {
  border: none;
  border-radius: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  width: 100%;

}
.zoomer {
background-color:  #FFF;
background-image: none;

}
.zoomer .zoomer-holder {
	box-shadow: none;
	margin-top:  40px;
}

.zoomer-custom-controls-wrap {
width:  100%;
position: absolute;
left: 0;
bottom: 70px;
text-align: center;
}

.zoomer-custom-controls {
background: rgba(0, 0, 0, 0.8);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
border-radius: 3px;
padding: 5px;
display:  inline-block;
}
.zoomer-custom-controls span {
	border-radius: 3px;
	color: #fff;
	float: left;
	cursor: pointer; display: block; font-size: 20px;height: 30px; line-height: 30px; margin: 0; text-align: center;
	padding:  0 10px;

	}
.zoomer-custom-controls span:hover { background: #000; }
.zoomer-custom-controls span.zoomer-custom-zoom-out {
margin-top:  -2px;
}
.zoomer-custom-controls span.view-item {
font-size:  12px;
font-family: 'Roboto', sans-serif;
}
span.view-close {
font-size:  12px;
font-family: 'Roboto', sans-serif;
font-weight:  100;
border-radius: 50%;
color: #fff;
cursor: pointer; 
display: block;
width:  80px;
height: 80px;
line-height: 80px;
text-align: center;
position:  absolute;
bottom:  -120px;
left:  50%;
margin-left:  -40px;
background: rgba(51, 51, 51, 1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
transform-origin: center center; 
transition: all 0.3s cubic-bezier(0.550,0.085,0.680,0.530) 0s;
-webkit-transform-origin: center center; 
-webkit-transition: all 0.3s cubic-bezier(0.550,0.085,0.680,0.530) 0s;

}

span.view-close:hover {
transform: matrix(1.2,0.00,0.00,1.2,0,0);
-webkit-transform: matrix(1.2,0.00,0.00,1.2,0,0);
background-color:  rgba(51, 51, 51, .5);

}


/* lookbook */
#lookbook .view1 {
padding-top:  80px;
height: 100%;
}
#lookbook .view1 ul {
display:  table;
height:  100vh;
width:  100%;
}
#lookbook .view1 ul li {
display: table-cell;
width:  3.333333%;
height:  100%;
position: relative;
overflow:  hidden;
}
#lookbook .bg-scale {
width:  100%;
height:  100%;
    background-position: 50% 0;
    background-repeat: no-repeat;
 -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -ms-transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#lookbook .bg-scale:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
 opacity: .8;

}
#lookbook .view1 h2 {
font-size:  120px;
margin:  0;
font-family: 'Roboto', sans-serif;
color:  #FFF;
font-weight: 300;
position:  absolute;
top:  50%;
z-index:  100;
text-align:  center;
width:  100%;
margin-top:  -.5em;

}

#lookbook .view1 ul li a {
display:  block;
width:  100%;
height:  100%;
color:  #000;
}
#lookbook .view1 ul li span.fnt-w {
	color:  #FFF;
}
#lookbook .view1 ul li a span {
	position:  absolute;
	bottom: 100px;
	display:  block;
	text-align:  center;
	width:  100%;
	font-size:  50px;
	font-family: 'Roboto', sans-serif;
	font-weight:  100;
}

/* 詳細 */
#lookbook .swiper-slide {
opacity:  0.4;
}
#lookbook .swiper-slide-active {
opacity: 1;
}

#lookbook .swiper-slide {
        width: 38.611111%;
}
#lookbook .swiper-slide:nth-child(1) {
        width: 100%;
    }


#lookbook .view2 {
padding-top:  80px;
display: table;
width:  100%;
height:  100%;
position: relative;
}
#lookbook .view2 .title {
width:  44.444444%;
height:  100%;
display:  table-cell;
vertical-align:  middle;
padding:  0 40px;

}
#lookbook .view2 .image {
width:  66.666666%;
height:  100%;
display:  table-cell;
    background-position: 0 0;
    background-repeat: no-repeat;
 -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
}
#lookbook .view2 h2 {
font-size:  48px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
margin:  -80px 0 40px;
}
#lookbook .view2 h3 {
font-size:  70px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
#lookbook .view2 p.date {
font-size:  30px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
margin:  40px 0 0;
}
#lookbook .view2 .slide-image {
width:  100%;
height:  100%;
background-position: 50% 0;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;

height:  -webkit-calc(100vh - 80px);
height: -moz-calc(100vh - 80px);
height:  calc(100vh - 80px);

}
#lookbook .view2 .itemList {
position:  absolute;
top:  0;
left:  0;
width:  100%;
height:  100%;
display: table;
color:  #FFF;
z-index: 100;
text-align: center;
background-color: rgba(0, 0, 0, 0.8);
display:  none;
opacity: 0;
-webkit-transition: all .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}
#lookbook .view2 .itemList.active {
display: table;
opacity: 1;
}
#lookbook .view2 .itemList .inner {
display:  table-cell;
vertical-align:  middle;
height:  100vh;
}
#lookbook .view2 .itemList li {
margin:  0 0 20px;
line-height:  2em;
}
#lookbook .view2 .itemList a.toOnline {
display: inline-block;
width:  190px;
height:  60px;
margin-left:  -115px;
line-height:  60px;
background: rgba(0, 0, 0, 1);
color:  #FFF;
padding:  0 20px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size:  14px;
position: absolute;
bottom: 120px;
-webkit-transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -ms-transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#lookbook .view2 .itemList a.toOnline:hover {
background:  #222;

}





#lookbook .view2  span.view-item {
	border-radius: 3px;
	color: #fff;
	float: left;
	cursor: pointer;
	height: 40px;
	line-height: 40px;
	margin: 0 0 0 -46px; 
	text-align: center;
	padding:  0 10px;
	background: rgba(0, 0, 0, 0.8);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	text-align:  center;
	position:  absolute;
	bottom:  -100px;
	left:  50%;
	transition: bottom 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
	-webkit-transition: bottom 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#lookbook .swiper-slide-active  span.view-item {
bottom:   10%;
}

#lookbook .view2  span.view-item:hover {
background: rgba(0, 0, 0, 1);
}

/* about */
body#about {
overflow:  auto;
}

#about .view1.photo {
background-position:  0 80px;
}
#about .view1 h2 {
font-size:  120px;
margin:  0;
font-family: 'Roboto', sans-serif;
font-weight: 300;


z-index:  100;
text-align:  center;


}
#about #contents .photo {
top:  0;
overflow: inherit;
}
#about .table {
padding-top:  80px;
}
#about .tableInner {
display:  table-cell;
vertical-align:  middle;
}
.aboutBox {
background-color:  #FFF;
display: table;
font-size:  14px;
line-height:  2em;
font-family: 'Roboto', sans-serif;
}
.aboutBox > div {
display:  table-cell;
vertical-align: top;
}
.aboutBox > div.box1 {
width:  26.388888%;
}
.aboutBox > div.box1 img {
width:  100%;
vertical-align: bottom;
}
.aboutBox > div.box2 {
padding:  150px 50px 0;
}
.aboutBox > div.box2 th {
font-size:  24px;
line-height:  2em;
vertical-align:  top;
padding:  0 50px 140px;
}
.aboutBox > div.box2 td {
width:  50%;
padding:  0 50px 120px;
vertical-align:  top;
}
.aboutBox .logo {
text-align:  right;
margin-top:  100px;
padding-right:  50px;
}
.aboutBox .logo img {
display:  inline;
width:  280px;
}

/* shop */

#shop .table  {
}
#shop .table > div {
display: table-cell;
width:  50%;
height:  100vh;
}
#shop #shopInfo {
background-color:  #FFF;
padding:  0 80px;
vertical-align:  middle;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}
#shop #shopInfo {
font-size: 14px;
}
#shop #shopInfo h2,
#shop #shopInfo h3{
font-size:  48px;
margin:  0 0 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;

}
#shop .selectBox {
margin:  0 0 80px;

}
#shop .toOnline {
height:  200px;
}
#shop .toOnline p {
background-color:  #f7f7f7;
height:  100px;
line-height:  100px;
font-weight: 100;
font-family: 'Roboto', sans-serif;
font-size:  30px;
font-style: italic;
padding:  0 40px;
}
#shop .toOnline p a {
color:  #000;
display: inline-block;
padding-left:  160px;
background-image: url(../img/logo_online_store.png);
   background-position: left center;
    background-repeat: no-repeat;
    background-size: 100px 38px;

}
#shop .toOnline p a:hover {
color:  #CCC;
}
#shop select {
/*初期化 */
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
margin: 0;
background: none transparent;
vertical-align: middle;
font-size: inherit;
color: inherit;
box-sizing: content-box;
display:  inline-block;
padding:  5px 40px;
border:  1px solid #e1e1e1;
height:  60px;

background: #f7f7f7  url(../img/icn_selectbox_pc.png) no-repeat center right 20px;
border:  1px solid #d4d4d4;
width:  300px;
}

#shop .shopList li {
float:  left;
margin-right:  20px;
margin-bottom:  20px;
}
#shop .shopList li:after {
content:  "/";
margin-left:  20px;
}
#shop .shopList li a {
color:  #000;
font-size:  14px;
}
#shop .shopList li a:hover {
color:  #CCC;
}
#shop .shopList li a.active {
font-weight:  bold;
}
#shop .shopDetail  {
margin-top:  60px;
}
#shop .shopDetail h4 {
font-size:  30px;
margin:  0 0 40px;
}
#shop .shopDetail th {
padding:  0 20px 30px 0;
}
#shop .shopDetail td {
padding:  0 0 30px 20px;
}
#shop .btn-back a img {
width:  50px;
display:  inline-block;
vertical-align:  middle;
}
#shop .btn-back a {
color:  #000;
display:  block;
font-family: 'Roboto', sans-serif;
font-style: italic;

transform-origin: center center; 
transition: all 0.2s ease-in-out 0s;
-webkit-transform-origin: center center; 
-webkit-transition: all 0.2s ease-in-out 0s;


}
#shop .btn-back a:hover {
transform: matrix(1,0.00,0.00,1,-5,0);
-webkit-transform: matrix(1,0.00,0.00,1,-5,0);

}


/* instagram */
body#instagram {
overflow: auto;
}
#instagram h2 {
font-size:  48px;
margin:  0 0 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
#instagram .table {
padding-top:  80px;
}

#instagram .left {
width:  50%;
display: table-cell;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}


#instagram .right {
width:  50%;
padding:  40px 80px 0;
display: table-cell;
vertical-align:  top;
background-color:  #FFF;
height:  -webkit-calc(100vh - 80px);
height: -moz-calc(100vh - 80px);
height:  calc(100vh - 80px);
}
#instagram .right ul {
margin: -5px;
}
#instagram .right li  {
width:  33.33333%;
float:  left;
padding:  5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#instagram .right li img {
width:  100%;
}

/* information */

#information #contents .view-inner {
background-color:  #FFF;
height:  100vh;
overflow: auto;
}
#information .view-inner .view1 {
width:  100%;
padding:  160px 40px 80px;
}
#information h2 {
font-size:  48px;
margin:  0 0 40px;
font-weight: 300;
text-align:  center;
}
#information .entry-wrap {
max-width: 900px;
margin: 0 auto;
}
#information .entry-box {
width:  50%;
padding:  40px;
float:  left;
display:  table;
}
#information .entry-box .image {
width: 40%;
float:  left;
}
#information .entry-box .image img {
width:  100%;
}
#information .entry-box .text {
width:  60%;
float: right;
padding-left:  40px;
}

#information .entry-box h3 {
font-size:  24px;
font-weight: 300;
line-height:  1.6em;
margin:  0 0 20px;
}
#information .entry-box p.date {
color:  #999;
margin:  0 0 10px;
}
#information .entry-box p {
color:  #999;
margin:  0 0 10px;
line-height:  2em;
font-size:  12px;
}
#information .pager {
text-align:  center;
margin-top:  80px;
}

#information .pager li {
display:  inline-block;
width:  20px;
margin:  0 20px;
}
#information .pager li a {
height:  30px;
line-height:  30px;
display:  block;
}
#information .pager img {
width:  100%;
vertical-align: middle;
}

#information .pager li a {
transform-origin: center center; 
transition: all 0.2s ease-in-out 0s;
-webkit-transform-origin: center center; 
-webkit-transition: all 0.2s ease-in-out 0s;


}
#information .pager li a.btnPrev:hover {
transform: matrix(1,0.00,0.00,1,-5,0);
-webkit-transform: matrix(1,0.00,0.00,1,-5,0);
}
#information .pager li a.btnNext:hover {
transform: matrix(1,0.00,0.00,1,-5,0);
-webkit-transform: matrix(1,0.00,0.00,1,5,0);
}


/* policy */
#policy h2 {
font-size:  48px;
margin:  0 0 40px;
font-weight: 300;
text-align:  center;
}
#policy p.lead-text {
margin:  0 0 40px;
padding:  0 20px;
line-height: 1.8em;
}
#policy p.credit {
text-align: right;
margin:  100px 0;
}
#policy .view-inner  {
background-color:  #FFF;
overflow:  auto;
padding:  120px 100px 0;
}
#policy .view-inner  dt {
font-size:  16px;
font-weight:  bold;
padding:  0 20px 10px;
border-bottom:  1px solid #CCC;
margin:  0 0 20px;
}
#policy .view-inner dd {
margin:  0 0 40px;
padding:  0 20px;
line-height: 1.8em;
}
#policy .view-inner dd p {
margin:  0 0 20px;
}
#policy .view-inner dd p em {
font-weight:  bold;
display:  block;
padding:  0 0 10px;
border-bottom:  1px dotted #CCC;
}
#policy .view-inner dd ul {
margin:  0 0 40px;
}
#policy .view-inner dd li {
margin:  0 0 10px;
}



@media (max-width: 1500px) {
#gnav .brand-logo {
margin:   0 0 40px;
}
#gnav #localNav li {margin:  0 0 30px;}

#gnav #localNav{margin:  0 0 60px;}
#gnav #localNav a {font-size: 20px;}
#lookbook .view1 ul li a span {
	font-size: 30px;
}


}

/* 後ほど修正  */
#information .entry-box {
width:  100%;
}
#information .entry-box .image {
width: 30%;
float: right;
padding-left:  40px;

}
#information .entry-box .text {
width:  70%;
float: left;
padding-left:  0px;
}
#information .entry-box .text a {
color:  #000;
text-decoration:  underline;
}
#information .entry-box .text a:hover {
color:  #000;
text-decoration: none;
}