@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
@import url("https://use.typekit.net/fiq4cqs.css");
@import url("https://use.typekit.net/zrb8lxx.css");

.l-container {
  width: 100%;
}

.feature {
  width: 100%;
  margin: 0 auto;
}
.feature *,
.feature a {
  color: #000;
}



.hdr {
  text-align: center;
  padding: 50px 0 63px;
}

.hdr-text-top {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  letter-spacing: 0.1em;
}

.hdr h1 {
  font-family: ambroise-firmin-std, serif;
  font-size: 71px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.08em;
}
.hdr h1 span {
  font-size: 38px;
  display: block;
  letter-spacing: 0.26em;
}


/* =========================================================
LINE UP
========================================================= */
.line-up {
  text-align: center;
  overflow: hidden;
  background: #d3d1c7;
  padding: 43px 0 80px;
  margin: 0 0 120px;
}

.line-up .slick-slider * {
  outline: none;
}


.line-up h2 {
  font-family: ambroise-firmin-std, serif;
  font-size: 40px;
  font-weight: 300;
  letter-spacing: 0.1em;
  margin: 0 0 37px;
}

.line-up-list {
  width: 912px;
  margin: 0 auto;
}
.line-up-list .slick-slide {
  margin: 0 12px;
}

.line-up-list a span {
  display: inline-block;
  background: #fff;
}
.line-up-btn {
  width: 160px;
  margin: 46px auto 0;
}
.line-up-btn a {
  display: block;
  height: 32px;
  font-family: ambroise-firmin-std, serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 32px;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  border: 1px solid  #000;
}
.line-up-btn a:hover {
  opacity: .6;
}


/* =========================================================
各ブロック
========================================================= */
.styling {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

/*タイトル*/
.styling-title {
  display: inline-block;
}
.styling01 .styling-title,
.styling03 .styling-title,
.styling05 .styling-title,
.styling06 .styling-title {
  position: absolute;
}
.styling01 .styling-title {
  width: 300px;
  top: 218px;
  left: 578px;
}
.styling03 .styling-title {
  width: 260px;
  top: 377px;
  left: 588px;
}
.styling05 .styling-title {
  width: 340px;
  top: 786px;
  left: 543px;
}
.styling06 .styling-title {
  width: 320px;
  top: 208px;
  left: 73px;
}

.styling-title h2 {
  font-family: ambroise-firmin-std, serif;
  font-size: 54px;
  font-weight: 300;
  letter-spacing: -.01em;
}

.styling-title p {
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.1em;
  margin: 12px 0 0;
}




/* =========================================================
各コーデ
========================================================= */
.coord-list {
  letter-spacing: -.4em;
}

.coord {
  position: relative;
  display: inline-block;
  letter-spacing: normal;
  vertical-align: top;
  opacity: 0;
  transform: translateY(50px);
  transition: .8s;
}
.coord.in {
  opacity: 1;
  transform: translateY(0);
}

.coord09 {
  margin: 0 300px 72px 89px;
}
.coord10 {
  margin: 0 0 110px 461px;
}
.coord12 {
  margin: 50px 97px 133px 11px;
}
.coord11 {
  width: 400px;
  margin: -67px 0 0;
}
.coord13 {
  margin: 0 200px 60px 137px;
}
.coord14 {
  margin: 0 0 108px 418px;
}
.coord16 {
  margin: 49px 100px 0 4px;
}
.coord15 {
  width: 420px;
  margin: -54px 0 122px 0;
}
.coord17 {
  margin: 0 0 61px 274px;
}
.coord18 {
  margin: 0 0 120px 92px;
}
.coord19 {
  margin: 0 0 72px 466px;
}
.coord20 {
  margin: 0 60px 0 95px;
}
.coord21 {
  margin: 100px 0 110px;
}
.coord23 {
  margin: 49px 98px 97px 4px;
}
.coord22 {
  width: 420px;
  margin: -50px 0 0;
}

.coord > a {
  display: block;
}


.coord > p {
  font-size: 13px;
  line-height: 2;
  letter-spacing: .1em;
  margin: 25px 0 0;
}



/* =========================================================
各コーデ
========================================================= */
.items {
  width: 340px;
  margin: 4px 0 0;
}
.items li {
  display: inline-block;
  margin: 0 10px 0 0;
}
.items li a {
  font-family: quasimoda, sans-serif;
  letter-spacing: 0.09em;
  line-height: 2.1;
}
.items li a:hover span {
  text-decoration: underline;
}

.sale-price {
  color: #e51b00;
  margin: 0 0 0 5px;
}
.sale-price .off {
  font-size: 10px;
  color: inherit;
}

.coord09 .items {
  text-align: right;
  position: absolute;
  bottom: -6px;
  right: 400px;
}

.coord13 .items {
  width: 300px;
  text-align: right;
  position: absolute;
  bottom: -6px;
  right: 400px;
}

.coord19 .items,
.coord22 .items {
  margin: 24px 0 0;
}



/* =========================================================
ボタン
========================================================= */
.btn {
  width: 380px;
  border: 1px solid #000;
  margin: 0 auto 140px;
}
.btn a {
  height: 72px;
  display: block;
  background: #fff;
  font-family: ambroise-firmin-std, serif;
  font-size: 27px;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 72px;
  text-align: center;
  text-decoration: none;
}
.btn a:hover {
  opacity: .6;
}



/* =========================================================
四角
========================================================= */
/*共通*/
.square > a{
  position: relative;
}
.square > a::before,
.square > a::after,
.square > a span::before,
.square > a span::after {
  content: '';
  display: block;
  z-index: 2;
  position: absolute;
  transition: transform .3s;
}

/*左右*/
.square > a::before,
.square > a::after {
  width: 1px;
  height: 100%;
  background: #bfa67c;
  transform: scaleY(0);
}
.square > a::before {
  transform-origin: top;
  transition-delay: 1.9s;
}
.square > a::after {
  transform-origin: bottom;
  transition-delay: 1.3s;
}
/*上下*/
.square > a span::before,
.square > a span::after {
  width: 100%;
  height: 1px;
  background: #bfa67c;
  transform: scaleX(0);
}
.square > a span::before {
  transform-origin: right;
  transition-delay: 1s;
}
.square > a span::after {
  transform-origin: left;
  transition-delay: 1.6s;
}

/*右上*/
.square-right-top > a::before,
.square-right-top > a::after { top: -12px; }
.square-right-top > a span::before,
.square-right-top > a span::after { left: 12px; }
.square-right-top > a::before { left: 12px; }
.square-right-top > a::after { right: -12px; }
.square-right-top > a span::before { top: -12px; }
.square-right-top > a span::after { bottom: 12px; }

/*右下*/
.square-right-bottom > a::before,
.square-right-bottom > a::after { top: 12px; }
.square-right-bottom > a span::before,
.square-right-bottom > a span::after { left: 12px; }
.square-right-bottom > a::before { left: 12px; }
.square-right-bottom > a::after { right: -12px; }
.square-right-bottom > a span::before { top: 12px; }
.square-right-bottom > a span::after { bottom: -12px; }

/*左上*/
.square-left-top > a::before,
.square-left-top > a::after { top: -12px; }
.square-left-top > a span::before,
.square-left-top > a span::after { left: -12px; }
.square-left-top > a::before { left: -12px; }
.square-left-top > a::after { right: 12px; }
.square-left-top > a span::before { top: -12px; }
.square-left-top > a span::after { bottom: 12px; }

/*左下*/
.square-left-bottom > a::before,
.square-left-bottom > a::after { top: 12px; }
.square-left-bottom > a span::before,
.square-left-bottom > a span::after { left: -12px; }
.square-left-bottom > a::before { left: -12px; }
.square-left-bottom > a::after { right: 12px; }
.square-left-bottom > a span::before { top: 12px; }
.square-left-bottom > a span::after { bottom: -12px; }

/*アニメーション時*/
.animate.square > a::before {
  transform: scaleY(1);
  transform-origin: bottom;
}
.animate.square > a::after {
  transform: scaleX(1);
  transform-origin: top;
}
.animate.square > a span::before {
  transform: scaleX(1);
  transform-origin: left;
}
.animate.square > a span::after {
  transform: scaleX(1);
  transform-origin: right;
}




/* =========================================================
ブランドトップボタン(FW用)
========================================================= */
.brandtop {
  width: 990px;
  margin: 100px auto 50px;
}
.brandtop p {
  text-align: right;
}
.brandtop p a{
  padding: 0 15px 0 0;
  font-weight: bold;
  background: url(/res/p/img/common/icon_arrow_r.png) center right no-repeat;
}