@charset "UTF-8";
/* CSS Document */

/***
* collection.css
*/

@media only print, only screen and (min-width: 18.75em){

.sp section ul,
.sp section .material .materialLine,
.sp section .material h5,
.sp section .material p,
.sp section .material a,
.sp section .material .materialImgSub{
/*  display: none;*/
}

#fw19 #navCollectionSp > a,
#fw19 #navCollection19FwSp > a,
#ss20_01 #navCollectionSp > a,
#ss20_02 #navCollectionSp > a,
#ss20_01 #navCollection20SsSp > a,
#ss20_02 #navCollection20SsSp > a,
#ss20_01 #nav20ss01Sp a,
#ss20_02 #nav20ss02Sp a{
  text-decoration: underline;
}

.sp section .materialTtl h4{
  margin-bottom: 20px;
}

.sp section.active ul,
.sp section.active .material .materialLine,
.sp section.active .material h5,
.sp section.active .material p,
.sp section.active .material a,
.sp section.active .material .materialImgSub{
  display: block;
}

.sp section.active .materialTtl h4{
  margin-bottom: 9px;
}

.sp section .material{
  width: calc(100% - 60px);
  margin: 0 auto 60px;
  padding: 40px 0 60px;
  background: #fff;
  border-top: 0.5px solid #000;
  border-bottom: 0.5px solid #000;
  cursor: pointer;
}

.btnReadMore{
  width: 56px;
  margin: 0 0 30px;
  display: block;
}

#navCollectionSp li{
  display: block;
}

/* main */
#main{
  width: 100%;
  padding: 40px 0 60px;
}

#mainVisual{
  width: 100%;
  margin: 0 auto 60px;
}

#mainVisual .itemCredit{
  margin: 0;
  padding: 10px 15px 0;
}

#lookListSp li{
  margin-bottom: 60px;
  padding: 0 15px;
}

#lookListSp li div{
  margin-bottom: 10px;
}

.look{
  margin-top: 0;
  padding-top: 220px;
  border-bottom: 0.5px solid #000;
}

.look#cashmere{
  border-bottom: none !important;
}

#pullDown ol{
  width: 100%;
}

#pullDown ol li:last-child{
  border-bottom: none;
}

.itemCredit{
  padding-top: 0;
  font-size: 3vw;
  line-height: 1.8;
  letter-spacing: 0.02em;
  font-family: 'NeueHaasGroteskText W01', Helvetica, Arial, "sans-serif";
}

.itemCredit dd{
  display: inline-block;
}

.itemCredit .itemNameStrong{
  font-family: 'NHaasGroteskTXW01-65Md', Helvetica, Arial, "sans-serif";
}

.itemCredit .itemNum{
  margin-left: 5px;
  font-size: 2vw;
  font-family: 'NeueHaasGroteskText W01', Helvetica, Arial, "sans-serif";
}

.itemNum span{
  padding: 0 2px;
}

.itemCredit .itemOnline{
  margin: -20px 0 0 0.6em;
  font-size: 2.188vw;
  border-bottom: 1px solid #000;
  font-family: 'NeueHaasGroteskText W01', Helvetica, Arial, "sans-serif";
}

.itemCredit a{
  margin-right: 6px;
  display: inline-block;
  text-decoration: none;
}

.look li div div{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.look li div div.alignTop{
  align-items:flex-start;
}

.look li div div.alignCenter{
  align-items: center;
}

.halfLookL{
  float: left;
  margin-bottom: 0;
}

.imgLook{
  width: 100%;
}

.imgZoom{
  width: 100%;
}

.halfRPa{
  width: 465px;
  float: right;
  margin-bottom: 0;
}

/* material */

.look li div div div{
  display: block;
}

.material{
  width: calc(100% - 60px);
  margin: 0 auto;
  padding: 40px 0 20px;
  background: #fff;
  border-top: 0.5px solid #000;
  cursor: pointer;
}

.materialNum{
  width: 48px;
  font-size: 15px;
  float: left;
  font-family: 'NeueHaasGroteskText W01', Helvetica, Arial, "sans-serif";
}

.materialNum span{
  padding: 0 6px 0 5px;
  font-family: 'NHaasGroteskTXW01-65Md', Helvetica, Arial, "sans-serif";
}

.materialTtl{
  width: auto;
  margin:-2px 0 0;
  float: left;
  font-size: 17px;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.materialTtl h4{
  margin-bottom: 9px;
  font-family: 'NHaasGroteskTXW01-65Md', Helvetica, Arial, "sans-serif";
  position: relative;
}

.materialLine{
  width: 11px;
  height: 1px;
  margin: 0 0 11px 48px;
  background: #000;
}

.material h5{
  margin: 0 0 30px 48px;
  font-size: 15px;
  font-family: 'NeueHaasGroteskText W01', Helvetica, Arial, "sans-serif";
}

.materialImg{
  margin-bottom: 25px;
}

.material p{
  width: 100%;
  margin:0 0 25px;
  font-size: 10px;
  line-height: 2;
  letter-spacing: 0.02em;
  text-align: left;
  font-family: a-otf-gothic-bbb-pr6n, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.material a{
  padding-right:30px;
  font-size: 10px;
  letter-spacing: 0.02em;
  background: url("../../_common/img/icon_arrow.svg") right center no-repeat;
  -webkit-background-size: 20px auto;
  background-size: 20px auto;
}

/* topLinks */

#topLinks,
#topLinksSp{
  width: 100%;
  height: 100%;
  margin-top: 40px;
}

#topLinksA,
#topLinksASp{
  width: 100%;
  float: none;
  position: relative;
  display: block;
}

#topLinksB,
#topLinksBSp{
  width: 100%;
  float: none;
  position: relative;
  display: block;
}

.topLinksImg{
  width: 81.25vw;
  margin: 0 auto 9.37vw;
  display: block;
  position: relative;
}

#topLinksA .topLinksImg,
#topLinksASp .topLinksImg{
  right: 0;
}

#topLinksB .topLinksImg,
#topLinksBSp .topLinksImg{
  left: 0;
}

#topLinksASp img,
#topLinksBSp img{
  opacity: 0.3;
  filter: blur(1vw);
  transform: translateZ(0);
  transition-duration: 0.8s;
}

#topLinksASp.active img,
#topLinksBSp.active img{
  opacity: 1;
  filter: blur(0);
}

#topLinks h2,
#topLinksSp a h2{
  width: 100%;
  position: absolute;
  top: 50%;
  margin-top: -1vw;
  left: 0;
  text-align: center;
  font-size: 5.625vw;
  letter-spacing: 0.04em;
  opacity: 1;
	transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-webkit-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

#topLinks h2.active,
#topLinksSp a.active h2{
  opacity: 0;
	transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-webkit-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

}

@media only print, only screen and (min-width: 768px){

.itemCredit{
  padding-top: 10px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-family: 'NeueHaasGroteskText W01', Helvetica, Arial, "sans-serif";
}

.itemCredit .itemNum{
  margin-left: 5px;
  font-size: 10px;
  font-family: 'NeueHaasGroteskText W01', Helvetica, Arial, "sans-serif";
}

.itemNum span{
  padding: 0 2px;
}

.itemCredit .itemOnline{
  margin-left: 0.6em;
  font-size: 13px;
  border-bottom: 1px solid #000;
  font-family: 'NeueHaasGroteskText W01', Helvetica, Arial, "sans-serif";
}

}

@media only print, only screen and (min-width: 1000px){

#fw19 #navCollection > a,
#fw19 #navCollection19Fw > a,
#ss20_01 #navCollection > a,
#ss20_02 #navCollection > a,
#ss20_01 #navCollection20Ss > a,
#ss20_02 #navCollection20Ss > a,
#ss20_01 #nav20ss01 a,
#ss20_02 #nav20ss02 a{
  text-decoration: underline;
}

#alpaca,
#organicCotton,
#organicWool,
#cashmere{
  display: block !important;
}

#navCollection li{
  display: block;
}

.btnReadMore{
  width: 56px;
  margin: 0 0 0;
  display: block;
}

/* main */
#main{
  width: 100%;
  padding: 140px 0 120px;
}

#mainVisual{
  width: 720px;
  margin: 0 auto 120px;
}

#mainVisual .itemCredit{
  margin: 0;
  padding: 10px 0 0 0;
}

.look{
  margin-top: 0;
  padding-top: 220px;
  border-bottom: 0.5px solid #000;
}

.look#cashmere{
  border-bottom: none !important;
}

#pullDown ol{
  width: 100%;
  padding: 0;
}

#pullDown ol li:last-child{
  border-bottom: none;
}

.look li{
  margin: 0 auto 220px;
}

.look li.w360{
  max-width: 360px;
}

.look li.w440{
  max-width: 440px;
}

.look li.w520{
  max-width: 520px;
}

.look li.w850{
  max-width: 850px;
}

.look li.w950{
  max-width: 950px;
}

.look li.w980{
  max-width: 980px;
}

.look li.w990{
  max-width: 990px;
}

.look li.w1010{
  max-width: 1010px;
}

.look li.w1044{
  max-width: 1044px;
}

.look li.w1080{
  max-width: 1080px;
}

.look li.w1100{
  max-width: 1100px;
}

.itemCredit{
  padding: 10px 0 20px;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-family: 'NeueHaasGroteskText W01', Helvetica, Arial, "sans-serif";
}

.itemCredit dd{
  display: inline-block;
}

.itemCredit .itemNameStrong{
  font-family: 'NHaasGroteskTXW01-65Md', Helvetica, Arial, "sans-serif";
}

.itemCredit .itemNum{
  margin-left: 5px;
  font-size: 10px;
  font-family: 'NeueHaasGroteskText W01', Helvetica, Arial, "sans-serif";
}

.itemNum span{
  padding: 0 2px;
}

.itemCredit .itemOnline{
  margin-left: 0.6em;
  font-size: 13px;
  border-bottom: 1px solid #000;
  font-family: 'NeueHaasGroteskText W01', Helvetica, Arial, "sans-serif";
}

.itemCredit a{
  margin-right: 6px;
  display: inline-block;
}

.look li div div{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.look li div div.alignTop{
  align-items:flex-start;
}

.look li div div.alignCenter{
  align-items: center;
}

.halfLookL{
  float: left;
  margin-bottom: 0;
}

.imgLook{
  width: 520px;
}

.w1080 .imgLook{
  width: 650px;
}

.imgZoom{
  width: 360px;
}

.halfRPa{
  width: 465px;
  float: right;
  margin-bottom: 0;
}

/* material */

.look li div div div{
  display: block;
}

.material{
  width: 190px;
  margin: 0;
  padding: 40px 100px 40px 40px;
  background: #fff;
  border: 0.5px solid #000;
  cursor: pointer;
}

.materialNum{
  width: 48px;
  font-size: 15px;
  float: left;
  font-family: 'NeueHaasGroteskText W01', Helvetica, Arial, "sans-serif";
}

.materialNum span{
  padding: 0 6px 0 5px;
  font-family: 'NHaasGroteskTXW01-65Md', Helvetica, Arial, "sans-serif";
}

.materialTtl{
  width: 140px;
  margin:-2px 0 0;
  float: left;
  font-size: 17px;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.materialTtl h4{
  margin-bottom: 9px;
  font-family: 'NHaasGroteskTXW01-65Md', Helvetica, Arial, "sans-serif";
  position: relative;
}

.materialLine{
  width: 11px;
  height: 1px;
  margin: 0 0 11px 48px;
  background: #000;
}

.material h5{
  margin: 0 0 25px 48px;
  font-size: 15px;
  font-family: 'NeueHaasGroteskText W01', Helvetica, Arial, "sans-serif";
}

.material .materialImg{
  margin-bottom: 15px;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.material:hover .materialImg{
  filter: grayscale(1);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.material p{
  width: 300px;
  margin:-4px 0 20px -15px;
  font-size: 10px;
  transform: scale(0.9);
  line-height: 2;
  letter-spacing: 0;
  text-align: left;
  font-family: a-otf-gothic-bbb-pr6n, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.material a{
  padding-right:30px;
  font-size: 10px;
  letter-spacing: 0.02em;
  background: url("../../_common/img/icon_arrow.svg") right center no-repeat;
  -webkit-background-size: 20px auto;
  background-size: 20px auto;
}

/* topLinks */

#topLinksA{
  width: 50%;
  height: calc(100vh - 120px);
  float: left;
  position: relative;
  display: block;
}

#topLinksB{
  width: 50%;
  height: calc(100vh - 120px);
  float: right;
  position: relative;
  display: block;
}

.topLinksImg{
  width: 300px;
  margin: 0 auto;
  display: block;
  position: relative;
  top: 50%;
  margin-top: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  overflow: hidden;
}

#topLinksA .topLinksImg{
  right: -8vw;
}

#topLinksB .topLinksImg{
  left: -8vw;
}

#topLinks a img{
  opacity: 0.3;
  filter: blur(1vw);
  transform: translateZ(0);
  transition-duration: 0.8s;
}

#topLinks a:hover img{
  opacity: 1;
  filter: blur(0);
  transition-duration: 0.8s;
}

#topLinks .active img{
  opacity: 1;
  filter: blur(0);
}

#topLinks h2{
  width: 100%;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  left: 0;
  text-align: center;
  font-size: 18px;
  letter-spacing: 0.04em;
  opacity: 1;
	transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-webkit-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

#topLinks a:hover h2,
#topLinks .active h2{
  opacity: 0;
  margin-top: -1vw;
	transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-webkit-transition: all 800ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

}