@charset "UTF-8";

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.mobileOnly {display: none;}
.pcOnly {display: block;}
@media only screen and (max-width : 480px){
  .mobileOnly {display: block;}
  .pcOnly {display: none;}
}

body {background: #fff; color: #333; line-height: 1.6; font-family: -apple-system, "Helvetica", sans-serif;
-webkit-font-smoothing: antialiased;}
figure {margin: 0; width: 100%;}
img {vertical-align: top;}
/*article * {position: relative;}*/
a {color: #333;}

article section h1 {font-family: Helvetica, Meiryo, sans-serif;}
article header p {font-family: Helvetica, Meiryo, sans-serif;}
html[lang="ja-JP"] article section h1 {font-family: Helvetica, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;}
html[lang="ja-JP"] article header p {font-family: Helvetica, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;}

.price {font-size: 11px; margin-left: 5px;}
.price .num {font-size: 14px; font-weight: bold; margin: 0 2px; font-family: "Helvetica","Lucida Grande", sans-serif;}

li .itemName {color: #666; font-size: 13px;}
li a .itemname {color: #333;}

nav.control {z-index: 10; position: absolute; height: 100%; width: 100%;}
nav .prev {position: absolute; left: 0; top: 0; height: 100%; width: 50%; text-indent: -9999px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="30"><line x1="15" y1="0" x2="0" y2="15" stroke="#666" stroke-width="1"/><line x1="15" y1="30" x2="0" y2="15" stroke="#666" stroke-width="1"/></svg>') no-repeat 5% center;}
nav .next {position: absolute; right: 0; top: 0; height: 100%; width: 50%; text-indent: -9999px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="30"><line x1="0" y1="0" x2="15" y2="15" stroke="#666" stroke-width="1"/><line x1="0" y1="30" x2="15" y2="15" stroke="#666" stroke-width="1"/></svg>') no-repeat 95% center;}

.ua-ie nav .prev {position: absolute; left: 0; top: 0; height: 100%; width: 50%; text-indent: -9999px; background: url('/img/garment/coordinate/common/arrow-left.png') no-repeat 5% center; background-size: 25px auto; opacity: .6;}
.ua-ie nav .next {position: absolute; right: 0; top: 0; height: 100%; width: 50%; text-indent: -9999px; background: url('/img/garment/coordinate/common/arrow-right.png') no-repeat 95% center; background-size: 25px auto; opacity: .6;}

nav.control a {display: block; height: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0);}
nav img {width: 100%;}
nav .prev a:hover {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="30"><line x1="15" y1="0" x2="0" y2="15" stroke="#999" stroke-width="1"/><line x1="15" y1="30" x2="0" y2="15" stroke="#999" stroke-width="1"/></svg>') no-repeat 5% center;}
nav .next a:hover {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="30"><line x1="0" y1="0" x2="15" y2="15" stroke="#999" stroke-width="1"/><line x1="0" y1="30" x2="15" y2="15" stroke="#999" stroke-width="1"/></svg>')no-repeat 95% center;}
@media only screen and (max-width: 767px){
  nav .prev {position: absolute; left: 0; top: 0; height: 100%; width: 50%; text-indent: -9999px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="16"><line x1="8" y1="0" x2="0" y2="8" stroke="#666" stroke-width="1"/><line x1="8" y1="16" x2="0" y2="8" stroke="#666" stroke-width="1"/></svg>') no-repeat 5% center;}
  nav .next {position: absolute; right: 0; top: 0; height: 100%; width: 50%; text-indent: -9999px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="16"><line x1="0" y1="0" x2="8" y2="8" stroke="#666" stroke-width="1"/><line x1="0" y1="16" x2="8" y2="8" stroke="#666" stroke-width="1"/></svg>') no-repeat 95% center;}
  nav .prev a:hover {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="16"><line x1="8" y1="0" x2="0" y2="8" stroke="#999" stroke-width="1"/><line x1="8" y1="16" x2="0" y2="8" stroke="#999" stroke-width="1"/></svg>') no-repeat 5% center;}
  nav .next a:hover {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="16"><line x1="0" y1="0" x2="8" y2="8" stroke="#999" stroke-width="1"/><line x1="0" y1="16" x2="8" y2="8" stroke="#999" stroke-width="1"/></svg>')no-repeat 95% center;}
}



header.siteHeader {position: relative; max-width: 1024px; margin: 20px auto 40px; padding: 0 20px;}
header.siteHeader h1 {line-height: 1; font-size: 18px; display: inline-block; margin: 0;}
header.siteHeader h1 a,
#home a {display: inline-block;}
#home {line-height: 1; position: absolute; top: 2px; right: 20px;}
#home a img {width: 90px;}
.jp #home a img {width: 110px;}
@media only screen and (max-width : 480px){
    header.siteHeader h1 {line-height: 1.2;}
}
@media only screen and (max-width : 320px){
    header.siteHeader h1 {font-size: 14px; line-height: 1.2;}
}

article header {position: relative; margin: 0 auto 30px; overflow: hidden; max-height: 800px;}
article header img {width: 100%;}
article header h1 {position: absolute; max-width: 90%; left: 5%; top: 5%; padding: 0; box-sizing: content-box;}

@media only screen and (max-width: 768px){
  article header {position: relative; max-width: 960px;}
  article header img {width: 150%; margin-left: -25%;}
}

article header p {position: absolute; bottom: 2%; left: 2%; padding: 1%; display: inline-block; background: rgba(255,255,255,.75); font-weight: bold; font-size: 18px; margin: 0 2% 0 0;
}

@media only screen and (max-width: 768px){
  article header p {bottom: 15px; left: 15px; margin-right: 15px; font-size: 16px;}
}

article p {font-size: 13px;}
@media only screen and (max-width: 768px){
  article p {font-size: 12px;}
}

article section {margin-bottom: 100px;}
@media only screen and (max-width: 768px){
  article section {margin-bottom: 40px;}
}

article section .wrap {/*max-width: 1026px; */ margin: 0 auto; padding: 0 2%;}
article section img {width: 100%; height: auto;}
@media only screen and (max-width: 768px){
  article section {overflow: hidden;}
 }

article section h1 {margin: 1em 0; font-size: 15px; line-height: 1;}

.lead {margin-bottom: 0;}
.lead p {font-size: 12px; line-height: 2; margin: 0 auto 30px; width: 90%; max-width: 400px;}
.lead br {display: none;}

.wrapper:after, .row:after, section:after, figure:after,
.remodal-wrapper ul.itemList li:after {content: ""; clear: both; display: block;}
.remodal-wrapper article p {padding: 0 20px; font-size: 14px;}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin: 0 auto 20px;
}

/*article > nav ul {max-width: 320px; margin-bottom: 40px}
article > nav li {width: 22%; margin: 0 4% 0 0; height: auto; text-align: center; color: #000; font-size: 13px; line-height: 1;}
.jp article > nav li {width: 18%; max-width: 300px; margin-right: 4%;}
.jp article > nav li:last-child {width: 30%;}

article > nav li:nth-child(4) {margin-right: 0;}
article > nav li a {color: #333; display: block; padding: 10px 6px;}
article > nav li.current a {border-bottom: 2px solid #999;}
@media only screen and (max-width: 768px){
  article > nav ul {padding: 0 20px;}
}*/
article > nav ul {max-width: 240px; margin-bottom: 40px}
article > nav li {margin: 0 4% 0 0; height: auto; text-align: center; color: #000; font-size: 13px; line-height: 1;}

/*2 categoly*/
.ca article > nav ul,
.th article > nav ul,
.in article > nav ul,
.ae article > nav ul,
.ae-en article > nav ul,
.kw article > nav ul,
.kw-en article > nav ul,
.sa article > nav ul,
.bh article > nav ul,
.my article > nav ul {max-width: 120px;}

/*3 categoly*/
.us article > nav ul,
.hk article > nav ul,
.hk-en article > nav ul,
.sg article > nav ul,
.uk article > nav ul,
.fr article > nav ul,
.it article > nav ul,
.de article > nav ul,
.de-en article > nav ul,
.es article > nav ul,
.pt article > nav ul,
.au article > nav ul {width: 155px;}

article > nav li:last-child {margin-right: 0;}
article > nav li a {color: #333; display: block; padding: 10px 6px;}
article > nav li.current a {border-bottom: 2px solid #999;}
@media only screen and (max-width: 768px){
  article > nav ul {padding: 0 20px; max-width: 280px;}
}

div.coordinateWrap section.coordinate {width: 100%; margin: 0 auto 80px;}
.coordinate .wrap .grid > div {float: left; width: 50%; height: auto; padding: 0; margin-bottom: 0; position: relative; border-right: 8px solid #fff; border-bottom: 8px solid #fff; background: #333; box-sizing: border-box;}
.coordinate .wrap .grid > div:nth-child(9n+2),
.coordinate .wrap .grid > div:nth-child(9n+3),
.coordinate .wrap .grid > div:nth-child(9n+4),
.coordinate .wrap .grid > div:nth-child(9n+5),
.coordinate .wrap .grid > div:nth-child(9n+6),
.coordinate .wrap .grid > div:nth-child(9n+7),
.coordinate .wrap .grid > div:nth-child(9n+8),
.coordinate .wrap .grid > div:nth-child(9n+9),
.coordinate .wrap .grid > div:nth-child(9n+10) {width: 25%; height: auto;}
/*.coordinate .wrap .grid > div:nth-child(9n+10) {float: right;}*/
.coordinate .wrap .grid > div:nth-child(18n+1) {float: left;}
.coordinate .wrap .grid > div:nth-child(9n+1),
.coordinate .wrap .grid > div:nth-child(9n+6) {clear: both;}
.coordinate .wrap .grid div.coordinateNum {position: absolute; z-index: 10; color: #666; font-size: 12px; top: 10px; left: 10px; line-height: 1; border: 0;}
.remodal .coordinateNum  {top: auto; right: auto; left: auto;}
div.grid {
    display: block;
    clear: both;
    margin-bottom: 40px;
}

.coordinate .wrap h2 {
    text-align: center;
    font-size: 1em;
}
.coordinate .wrap .grid:after {content: ""; clear: both; display: block;}

@media only screen and (max-width: 768px){
  .coordinate .wrap .grid > div {border-right: 2px solid #fff; border-bottom: 3px solid #fff; background: none;}
  .coordinate .wrap .grid > div:nth-child(9n+1) {width: 50%;}
  .coordinate .wrap .grid > div:nth-child(9n+2) {width: 50%;}
  .coordinate .wrap .grid > div:nth-child(9n+3) {width: 100%;}
  .coordinate .wrap .grid > div:nth-child(9n+4) {width: 66.6%;}
  .coordinate .wrap .grid > div:nth-child(9n+5) {width: 33.3%;}
  .coordinate .wrap .grid > div:nth-child(9n+6) {width: 33.3%;}

  .coordinate .wrap .grid > div:nth-child(9n+7) {width: 50%;}
  .coordinate .wrap .grid > div:nth-child(9n+8) {width: 50%;}
  .coordinate .wrap .grid > div:nth-child(9n+9) {width: 100%;}
  .coordinate .wrap .grid > div:nth-child(9n+1),
  .coordinate .wrap .grid > div:nth-child(9n+6) {clear: none;}
  .coordinate .wrap .grid > div:nth-child(9n+10) {float: left;}
}

.remodal-wrapper ul.itemList li {list-style: none; padding: 10px 20px; box-sizing: border-box;}

.remodal-wrapper ul.itemList {padding: 0; text-align: left;}
.remodal-wrapper .itemList img {width: 70px; float: left; margin-right: 10px; vertical-align: middle;}
.remodal-wrapper .itemList a {display: block;}
.remodal-wrapper .itemList .price {display: block;}
.remodal-wrapper .itemList .release {font-size: 12px; color: #666;}
.remodal-wrapper ul.itemList li a .itemName {text-decoration: underline;}

figure .detailImage {position: relative; float: left; width: 65%;}
figcaption {float: right; width: 35%; margin-top: 100px;}
@media only screen and (max-width: 768px){
  figure .detailImage,
  figcaption {float: none; width: 100%; margin-top: 0;}
}

figure .belong {position: absolute; top: 20px; right: 20px; z-index: 20; margin: 0; font-size: 16px;}
figure .number {font-size: 16px; line-height: 1; color: #666;}



.detail section.coordinate {width: 70%; max-width: 800px; margin: 0 auto;}
.detail .coordinate figure .detailImage {position: relative;}
.detailImage img {width: 100%;}
.detail .coordinate figure .belong {
  position: absolute; top: 20px; left: 20px; width: 65px; height: 65px; padding: 10px; border: 1px solid #333; margin: 0; font-weight: normal; line-height: 1; font-size: 1.6em; display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;}
.detail .coordinate figure .belong .title,
.detail .coordinate figure .coordinateNum {color: #333; padding: 0; line-height: 1.5;}
.detail .coordinate figure .number {display: block; text-align: center; line-height: 1; color: #333; font-size: 14px;}
.detail article section .wrap {max-width: 100%; margin: 40px auto 0; padding: 0;}
@media only screen and (max-width: 768px){
  .detail section.coordinate {width: 100%; max-width: 600px;}
  .detail article section .wrap {padding: 0 20px;}
}

.detail .otherCoordinates {position: relative;}
.detail .otherCoordinates p {font-size: 13px;}

span.size {position: absolute; bottom: 20px; right: 20px; font-size: 10px; color: #333; text-align: right;}

nav.footerNav {max-width: 480px; margin: 40px auto; text-align: center;}
nav.footerNav li {display: block; width: 100%;}
nav.footerNav li a {font-size: 13px; text-decoration: none; color: #67affd;}

.coordinate #otherDayLink.wrap {margin-top: 80px;}
.coordinate #otherDayLink.wrap li {width: 23.5%; height: auto; margin: 0 2% 2% 0;}
.coordinate #otherDayLink.wrap li:nth-child(4n) {margin-right: 0;}
.coordinate #otherDayLink.wrap li:before {display: none;}
.coordinate #otherDayLink.wrap li a {display: block;}
.coordinate #otherDayLink.wrap li.current a {background: #000; pointer-events: none;}
.coordinate #otherDayLink.wrap li.current a img {opacity: .6;}
@media only screen and (max-width: 768px){
  .coordinate #otherDayLink.wrap li {width: 48%; height: auto; margin: 0 4% 4% 0;}
  .coordinate #otherDayLink.wrap li:nth-child(2n) {margin-right: 0;}
}

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

aside.share {text-align: center; border: 0; padding: 0;}
aside.share a {display: inline-block; padding: 5px 10px;}
aside.share span {display: inline-block; color: #999; font-size: 11px; margin-right: 5px;}
aside.share img {vertical-align: middle; opacity: .4;}
aside.share img.tw_btnImg {width: 26px; padding-right: 0;}
aside.share img.fbBtn {width: 20px; padding-right: 0;}

footer {background: none;}
footer #copyright {text-align: center;}
footer .copyright {float: none;}

.detailImage img:nth-of-type(2){
    position: absolute;
    left: 0;
    top: 0;}

body.men .detailImage img:nth-of-type(2),
body.women .detailImage img:nth-of-type(2) {
  display: none;
}

body.men .detailImage img,
body.women .detailImage img {
  opacity: 0;
  animation-duration: .5s;
  animation-name: fade-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: .5s;
  -webkit-animation-name: fade-out;
  -webkit-animation-timing-function: ease-out;
}

body.men .detailImage img.visible,
body.women .detailImage img.visible {
  opacity: 1;
  animation-name: fade-in;
  -webkit-animation-name: fade-in;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

@media only screen and (max-width: 768px){
  body.men .detailImage img.visible,
  body.women .detailImage img.visible {border-radius: 0;}
}

/*
body.cn div.coordinateWrap section.coordinate .setItem:after {content: "※部分商品中国无销售"; position: absolute; bottom: 20px; right: 20px; font-size: 11px; line-height: 1;}
body.sg figure p,
body.my figure p {padding: 0 20px; color: #666;}
body.cn aside.share img {width: 24px;}
*/
.remodal-wrapper article p.annotation {font-size: 12px; color: #666;}