@charset "UTF-8";
/* *
 *
 *  variables
 *  変数
 *
 * */
/*--------------------------------------------------------------------------
   layout
---------------------------------------------------------------------------*/
/* @PC content width
-----------------------------------------------------------------*/
/* space
-----------------------------------------------------------------*/
/*--------------------------------------------------------------------------
   headerH
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
   breakpoint
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
  tranition
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
 font
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
   font-size
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
  line-height
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
  letter-spacing
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
   color
---------------------------------------------------------------------------*/
/* font color base */
/* *
 *
 *  mixin & function
 *  関数
 *
 * */
/*--------------------------------------------------------------------------
  media
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
   font-family
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
   txt-jp
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
  pseudo
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
  ico-font
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
  cf
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
  flexbox
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
  inline-style
---------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
  function px-to-vw
---------------------------------------------------------------------------*/
/* *
 *
 *  2021_spring_summer.css
 *
 *
 * */
.u-in, .u-out {
  transition: all 1ms linear;
}

.u-in {
  opacity: 1;
}

svg#lines {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
  pointer-events: none;
}

line {
  stroke-dasharray: 120%;
  animation: stroke-line 85s linear;
}
line.line01 {
  animation: stroke-line 85s linear;
}
line.line02 {
  animation: stroke-line 82s linear;
}
line.line03 {
  animation: stroke-line 80s linear;
}
line.line04 {
  animation: stroke-line 105s linear;
}
line.line05 {
  animation: stroke-line 89s linear;
}
line.line06 {
  animation: stroke-line 86s linear;
}
line.line07 {
  animation: stroke-line 75s linear;
}
line.line08 {
  animation: stroke-line 78s linear;
}
line.line09 {
  animation: stroke-line 95s linear;
}
line.line10 {
  animation: stroke-line 105s linear;
}

@keyframes stroke-line {
  0% {
    stroke-dashoffset: 120%;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}
.clone-credit-wrap {
  pointer-events: none;
}
.clone-credit-wrap .credit {
  z-index: 100001;
  opacity: 1 !important;
  pointer-events: none;
}

#content {
  opacity: 1 !important;
  position: relative;
}

.cursor {
  display: none;
}

.dev-pc body {
  cursor: none !important;
}
.dev-pc body a {
  cursor: none !important;
}
.dev-pc .cursor {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 35px;
  height: 32px;
  cursor: none;
  pointer-events: none;
  background: url("/assets/images/lookbook/2021_spring_summer/icon_cursor.png") no-repeat 50% 50%;
  background-size: 35px auto;
  z-index: 100005;
  opacity: 1;
}
.dev-pc .cursor._load {
  opacity: 0;
}
.dev-pc .cursor._on {
  width: 30px;
  height: 34px;
  background-image: url("/assets/images/lookbook/2021_spring_summer/icon_cursor_on.png");
  background-size: 30px auto;
}

#main {
  position: relative;
}
#main .back-archives {
  margin-top: 7.5%;
}

@media screen and (min-width: 2240px) {
  .lookbook-list {
    width: 100%;
    margin: 0;
  }
}
.dev-tb .lookbook-list__row .credit {
  width: 37.375vw;
  min-height: 21.53125vw;
}

.c-ttl-page {
  position: relative;
  margin-bottom: -5.3125vw;
  z-index: 10;
}

.credit {
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 20vw;
  height: 30vw;
  padding: 0.8125vw 1.0625vw 1.125vw;
  background: #fff;
  border: 1px solid #000;
  display: none;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.03em;
  transition: all 0ms ease;
  line-height: 1.2;
  opacity: 0;
}
.credit ul {
  margin-top: 20px;
}
.credit li + li {
  margin-top: 2px;
}
.credit li a {
  display: inline-block;
  position: relative;
  padding-right: 10px;
  border-bottom: solid 1px #000;
}
.credit li a:after {
  font-family: FontAwesome;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
}
.credit._active {
  opacity: 0;
  display: flex;
}

.lookbook-list__row {
  height: 56.25vw;
  transition: none;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.lookbook-list__row .item a:before {
  content: none;
}
.lookbook-list__row a {
  display: block;
  position: relative;
}
.lookbook-list__row a:after {
  content: "";
  display: block;
  clear: both;
}
.lookbook-list__row .item {
  position: relative;
  z-index: 10;
}
.lookbook-list__row .item.active {
  z-index: 15;
}
.lookbook-list__row .credit-wrap {
  position: relative;
}
.lookbook-list__row .item {
  transition: all 1ms linear;
  opacity: 1;
}
.lookbook-list__row .item .img {
  transition: none;
}
.lookbook-list__row.u-in .item {
  opacity: 1;
}
.lookbook-list__row .bg {
  position: absolute;
}
.lookbook-list__row .lookbook-list .item + .item.pos-c {
  float: none;
}
@keyframes bgRotate {
  0% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  100% {
    transform: rotate(360deg) translate(-50%, -50%);
  }
}
@keyframes bgRotate2 {
  0% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  100% {
    transform: rotate(-360deg) translate(-50%, -50%);
  }
}
.lookbook-list__row > .text, .lookbook-list__row > .list_inner .text {
  position: absolute;
  transform: rotate(-90deg) translateY(100%);
  font-size: 14px;
  line-height: 1;
}
.lookbook-list__row--section01 .inner {
  position: relative;
  margin: -167px auto 0 !important;
  width: 93.75%;
}
.lookbook-list__row--section01 .item-wrap {
  position: relative;
}
.lookbook-list__row--section01 .item-wrap a {
  display: block;
}
.lookbook-list__row--section01 .item-wrap .item {
  position: absolute;
}
.lookbook-list__row--section01 .item-wrap .item:first-child {
  z-index: 11;
}
.lookbook-list__row--section01 .item-wrap .item .text {
  display: block;
  float: right;
  font-size: 14px;
  white-space: nowrap;
}
.lookbook-list__row--section01 .item-wrap .item.item01 {
  width: 4.13%;
  top: 7.8%;
  left: 6.66%;
}
.lookbook-list__row--section01 .item-wrap .item.item02 {
  width: 8%;
  top: 41.25%;
  left: 27.33%;
}
.lookbook-list__row--section01 .item-wrap .item.item03 {
  width: 8%;
  top: 55.82%;
  left: 16%;
}
.lookbook-list__row--section01 .item-wrap .item.item03 {
  width: 8%;
  top: 55.82%;
  left: 16%;
}
.lookbook-list__row--section01 .item-wrap .item.item04 {
  width: 4%;
  top: 62.58%;
  left: 8.66%;
}
.lookbook-list__row--section01 .item-wrap .item.item05 {
  width: 3%;
  top: 75.64%;
  right: 34.33%;
}
.lookbook-list__row--section01 .item-wrap .item.item06 {
  width: 2.66%;
  top: 8.27%;
  right: 20.66%;
}
.lookbook-list__row--section01 .item-wrap .item.item07 {
  width: 2.4%;
  top: 12.35%;
  right: 2.93%;
}
.lookbook-list__row--section01 .item-wrap .item.item08 {
  width: 10%;
  top: 25.29%;
  right: 8.66%;
}
.lookbook-list__row--section01 .item-wrap .item.item09 {
  width: 7.33%;
  top: 60.83%;
  right: 16%;
}
.lookbook-list__row--section01 .item-wrap .item.item10 {
  width: 3%;
  top: 76.57%;
  right: 9.66%;
}
.lookbook-list__row--section02 {
  margin-top: 5%;
}
.lookbook-list__row--section02 .text {
  top: 50%;
  right: 23%;
  transform: rotate(-90deg) translateY(0%);
}
.lookbook-list__row--section02 .item-wrap:nth-child(2) {
  width: 60%;
  position: relative;
  float: left;
  margin-left: 12.5%;
}
.lookbook-list__row--section02 .item-wrap:nth-child(2) .item {
  transition-delay: 300ms;
  transition-property: opacity;
}
.lookbook-list__row--section02 .item-wrap:nth-child(2) .item01 {
  width: 62.5%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.lookbook-list__row--section02 .item-wrap:nth-child(2) .item02 {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.lookbook-list__row--section02 .item-wrap:nth-child(3) {
  width: 15.62%;
  float: left;
  margin-left: 5%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.lookbook-list__row--section02 .item-wrap:nth-child(3) .item {
  transition-delay: 600ms;
  transition-property: opacity;
}
.lookbook-list__row--section03 {
  height: auto;
  position: relative;
  margin-top: 5.62%;
}
.lookbook-list__row--section03 .text {
  top: 50%;
  right: 89.56%;
}
.lookbook-list__row--section03 .item-wrap {
  width: 88.12%;
  margin-left: 10.62%;
}
.lookbook-list__row--section04 {
  height: auto;
  margin-top: 7.18%;
}
.lookbook-list__row--section04 .text {
  top: 50%;
  right: 90.81%;
}
.lookbook-list__row--section04 .item-wrap:nth-child(2) {
  width: 46.87%;
  float: left;
  margin-left: 9.37%;
}
.lookbook-list__row--section04 .item-wrap:nth-child(2) .item {
  transition-delay: 200ms;
  transition-property: opacity;
}
.lookbook-list__row--section04 .item-wrap:nth-child(3) {
  width: 38.12%;
  float: right;
  margin-top: 2.81%;
  margin-right: 3.12%;
}
.lookbook-list__row--section04 .item-wrap:nth-child(3) .item {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  transition-delay: 500ms;
  transition-property: opacity;
  font-size: 0;
}
.lookbook-list__row--section04 .item-wrap:nth-child(3) .item img {
  display: inline-block;
  width: 49.18%;
}
.lookbook-list__row--section04 .item-wrap:nth-child(3) .item img:nth-child(1) {
  margin-right: 1.63%;
}
.lookbook-list__row--section04 .item-wrap:nth-child(3) .item img:nth-child(3) {
  position: absolute;
  right: 0;
  opacity: 0;
  transition: 1200ms;
}
.lookbook-list__row--section04 .item-wrap:nth-child(4) {
  width: 24.37%;
  height: 43.32%;
  clear: right;
  float: right;
  margin-top: 20%;
  margin-right: 12.5%;
  position: relative;
}
.lookbook-list__row--section04 .item-wrap:nth-child(4) .item {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition-delay: 800ms;
  transition-property: opacity;
}
.lookbook-list__row--section04 .item-wrap:nth-child(4) .item.item08 {
  z-index: 11;
}
.lookbook-list__row--section04 .item-wrap:nth-child(4) .horizontal {
  width: 66.66%;
}
.lookbook-list__row--section04.u-in .item-wrap:nth-child(3) .item01 img:nth-child(3) {
  opacity: 1;
  transition-delay: 1200ms;
  transition-property: opacity;
}
.lookbook-list__row--section05 {
  height: auto;
  margin-top: 3.75%;
}
.lookbook-list__row--section05 .text {
  top: 50%;
  right: 85.18%;
  z-index: 100;
  position: absolute;
  transform: rotate(-90deg) translateY(200%);
  font-size: 14px;
  line-height: 1;
}
.lookbook-list__row--section05 .item-wrap:nth-child(1) {
  width: 100%;
  position: relative;
}
.lookbook-list__row--section05 .item-wrap:nth-child(1) .item01 {
  width: 70%;
  position: relative;
  margin: 0 auto;
  float: none;
  transition-delay: 600ms;
  transition-property: opacity;
}
.lookbook-list__row--section05 .item-wrap:nth-child(1) .item02 {
  width: 48.75%;
  position: absolute;
  top: 20.23%;
  left: 5.62%;
  overflow: hidden;
  background: #fff;
  transition-delay: 200ms;
  transition-property: opacity;
}
.lookbook-list__row--section05 .item-wrap:nth-child(1) .item02 .bg-img {
  opacity: 0;
}
.lookbook-list__row--section05 .item-wrap:nth-child(1) .item02 .grad {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  margin-top: -50%;
  transform-origin: 8% 8%;
  animation: bgRotate 6s linear infinite;
}
.lookbook-list__row--section05 .item-wrap:nth-child(1) .item02 .grad.red {
  top: 5.9%;
  left: 39.82%;
  width: 160.25%;
}
.lookbook-list__row--section05 .item-wrap:nth-child(1) .item02 .grad.white {
  top: 4.87%;
  left: 106.15%;
  width: 194.87%;
  animation: bgRotate 3s linear infinite;
}
.lookbook-list__row--section05 .item-wrap:nth-child(1) .item02 .grad.blue {
  width: 150%;
  top: 8.28%;
  left: -8.46%;
  animation: bgRotate2 4s linear infinite;
}
.lookbook-list__row--section05 .item-wrap:nth-child(1) .item02 .grad.yellow {
  width: 289.74%;
  top: 112.98%;
  left: -20.89%;
  transform-origin: 2% 2%;
  animation: bgRotate 4s linear infinite;
}
.lookbook-list__row--section05 .item-wrap:nth-child(1) .item02 .grad.orange {
  width: 263.97%;
  top: 89.88%;
  left: 94.48%;
}
.lookbook-list__row--section05 .item-wrap:nth-child(2) {
  width: 34.31%;
  margin-top: 1.87%;
  margin-left: 65%;
}
.lookbook-list__row--section05 .item-wrap:nth-child(2) .item {
  transition-delay: 800ms;
  transition-property: opacity;
}
.lookbook-list__row--section06 {
  height: auto;
}
.lookbook-list__row--section06 .inner {
  margin-top: -15.62%;
}
.lookbook-list__row--section06 .inner:after {
  content: "";
  display: block;
  clear: both;
}
.lookbook-list__row--section06 .list_inner .text {
  top: 45.19%;
  right: 92.06%;
  z-index: 100;
  transform: rotate(-90deg) translateY(250%);
}
.lookbook-list__row--section06 .item-wrap {
  float: left;
}
.lookbook-list__row--section06 .item-wrap:nth-child(2) {
  width: 36.25%;
  position: relative;
  margin-top: -15.62%;
  margin-left: 8.12%;
}
.lookbook-list__row--section06 .item-wrap:nth-child(2) .item {
  transition-delay: 200ms;
  transition-property: opacity;
}
.lookbook-list__row--section06 .item-wrap:nth-child(2) .item01 {
  position: absolute;
  width: 51.72%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.lookbook-list__row--section06 .item-wrap:nth-child(2) .item02 {
  float: none;
}
.lookbook-list__row--section06 .item-wrap:nth-child(3) {
  width: 31.25%;
  position: relative;
  margin-top: 5.63%;
  margin-left: 15.62%;
}
.lookbook-list__row--section06 .item-wrap:nth-child(3) .item {
  transition-delay: 500ms;
  transition-property: opacity;
}
.lookbook-list__row--section06 .item-wrap:nth-child(3) .item01 {
  width: 84%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.lookbook-list__row--section06 .item-wrap:nth-child(3) .item02 {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.lookbook-list__row--section06 .item-wrap:nth-child(3) .item02 .bg-img {
  opacity: 0;
}
.lookbook-list__row--section06 .item-wrap:nth-child(3) .item02 .grad {
  position: absolute;
  border-radius: 50%;
  transform-origin: 5% 5%;
  animation: bgRotate 8s linear infinite;
}
.lookbook-list__row--section06 .item-wrap:nth-child(3) .item02 .red {
  width: 144%;
  top: 95.93%;
  left: 112%;
  transform-origin: 3% 3%;
  animation: bgRotate2 10s linear infinite;
}
.lookbook-list__row--section06 .item-wrap:nth-child(3) .item02 .brown {
  width: 153.4%;
  top: 91.86%;
  left: 37.6%;
  animation: bgRotate2 5s linear infinite;
}
.lookbook-list__row--section06 .item-wrap:nth-child(3) .item02 .blue {
  width: 164%;
  top: 4.65%;
  left: 7.6%;
  animation: bgRotate 7s linear infinite;
}
.lookbook-list__row--section06 .item-wrap:nth-child(3) .item02 .beige {
  width: 120.8%;
  top: 9.3%;
  left: 72.6%;
  animation: bgRotate 6s linear infinite;
}
.lookbook-list__row--section07 {
  margin-top: 4.37%;
}
.lookbook-list__row--section07 .text {
  top: 50%;
  right: 75.18%;
  z-index: 100;
  transform: rotate(-90deg) translateY(50%);
}
.lookbook-list__row--section07 .item-wrap {
  float: left;
}
.lookbook-list__row--section07 .item-wrap:nth-child(2) {
  width: 37.5%;
  margin-left: 25%;
}
.lookbook-list__row--section07 .item-wrap:nth-child(2) .item {
  transition-delay: 500ms;
  transition-property: opacity;
}
.lookbook-list__row--section07 .item-wrap:nth-child(3) {
  width: 26.25%;
  margin-top: -11%;
  margin-left: 8.12%;
}
.lookbook-list__row--section07 .item-wrap:nth-child(3) .item {
  transition-delay: 200ms;
  transition-property: opacity;
}
.lookbook-list__row--section08 {
  margin-top: 2.5%;
  position: relative;
}
.lookbook-list__row--section08 .text {
  top: 49.25%;
  right: 39.56%;
  transform: rotate(-90deg) translateY(250%);
  z-index: 100;
}
.lookbook-list__row--section08 .item-wrap {
  float: left;
}
.lookbook-list__row--section08 .item-wrap:nth-child(2) {
  width: 42.5%;
  margin-left: 9.37%;
}
.lookbook-list__row--section08 .item-wrap:nth-child(2) .item {
  transition-delay: 200ms;
  transition-property: opacity;
}
.lookbook-list__row--section08 .item-wrap:nth-child(3) {
  width: 30%;
  margin-top: 7.5%;
  margin-left: 8.75%;
}
.lookbook-list__row--section08 .item-wrap:nth-child(3) .item {
  transition-delay: 500ms;
  transition-property: opacity;
}
.lookbook-list__row--section09 {
  height: auto;
  padding-top: 3.7%;
}
.lookbook-list__row--section09 .text {
  top: 43.25%;
  right: 68.93%;
  z-index: 100;
  transform: rotate(-90deg) translateY(270%);
}
.lookbook-list__row--section09 .item-wrap:nth-child(2) {
  z-index: 10;
}
.lookbook-list__row--section09 .item-wrap:nth-child(2) .item {
  float: none;
}
.lookbook-list__row--section09 .item-wrap:nth-child(2) .item01 {
  width: 67.5%;
  padding-top: 3.75%;
  margin-left: 31.25%;
  z-index: 11;
  transition-delay: 800ms;
  transition-property: opacity;
}
.lookbook-list__row--section09 .item-wrap:nth-child(2) .item02 {
  width: 18.75%;
  bottom: -31.94%;
  margin-top: -13.75%;
  left: 14.37%;
  transition-delay: 500ms;
  transition-property: opacity;
}
.lookbook-list__row--section09 .item-wrap:nth-child(2) .item03 {
  width: 12.5%;
  position: absolute;
  top: 0;
  left: 21.87%;
  overflow: hidden;
  background: #fff;
  transition-delay: 200ms;
  transition-property: opacity;
}
.lookbook-list__row--section09 .item-wrap:nth-child(2) .item03 .bg-img {
  opacity: 0;
}
.lookbook-list__row--section09 .item-wrap:nth-child(2) .item03 .grad {
  position: absolute;
  border-radius: 50%;
  transform-origin: 3% 3%;
  animation: bgRotate 8s linear infinite;
}
.lookbook-list__row--section09 .item-wrap:nth-child(2) .item03 .grad.red {
  width: 141.5%;
  top: 13.5%;
  left: 104.9%;
  animation: bgRotate 10s linear infinite;
}
.lookbook-list__row--section09 .item-wrap:nth-child(2) .item03 .grad.purple {
  width: 127%;
  top: 2.5%;
  left: 60%;
  animation: bgRotate 6s linear infinite;
}
.lookbook-list__row--section09 .item-wrap:nth-child(2) .item03 .grad.beige {
  width: 188%;
  top: 25%;
  left: 21.5%;
  transform-origin: 4% 4%;
  animation: bgRotate2 5s linear infinite;
}
.lookbook-list__row--section09 .item-wrap:nth-child(2) .item03 .grad.blue {
  width: 136.5%;
  top: 41%;
  right: 73%;
  animation: bgRotate 5s linear infinite;
}
.lookbook-list__row--section09 .item-wrap:nth-child(2) .item03 .grad.black {
  width: 196.5%;
  top: 89.5%;
  left: 16%;
  animation: bgRotate2 9s linear infinite;
}
.lookbook-list__row--section09 .item-wrap:nth-child(2) .item03 .grad.blue2 {
  width: 209.5%;
  top: 76.5%;
  left: 89%;
  animation: bgRotate 6s linear infinite;
}
.lookbook-list__row--section10 {
  height: auto;
  margin-top: 9.37%;
}
.lookbook-list__row--section10 .text {
  top: 50%;
  right: 68.93%;
  z-index: 100;
  transform: rotate(-90deg) translateY(390%);
}
.lookbook-list__row--section10 .item-wrap {
  width: 37.5%;
  float: none;
  margin: 0 auto;
}
.lookbook-list__row--section11 {
  height: auto;
  margin-top: 17.5%;
}
.lookbook-list__row--section11 .item-wrap {
  width: 31.87%;
  float: none;
  margin: 0 auto;
}