@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Martian+Mono:wght@100..800&family=Oswald&display=swap");

.lpFont {
  font-family: "Martian Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.lpFont2 {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
#glbMenu .logoSct {
  display: none;
}
.asTit {
  padding: 3em 0 2em;
}
.artclArea {
  width: 100%;
  background: #fff;
  margin: 32% auto 0;
  position: relative;
}
.artclArea .readArea {
  width: 92%;
  margin: 0 auto 0;
}
.artclArea .readArea .imgObj {
}
.ctlgSet {
  margin: 0 auto;
  position: relative;
}
.ctlgSet .csTxtBlk {
  margin: 1em 0 0;
}
.btnLine.bkBtn {
  margin-bottom: 12em;
  width: 50%;
}

.dblSet.spDbl {
  width: 50%;
}

.creditTxt {
  display: none;
}

.clWh li {
  color: #fff;
}

picture {
  line-height: 1;
  display: block;
}
@media screen and (max-width: 960px) {
}
@media screen and (min-width: 641px) {
  .contsArea {
    padding: 0;
  }
}
@media screen and (min-width: 768px) {
  .artclArea {
    padding: 0;
    margin-top: 14.5%;
    width: min(100%, 1200px);
  }
  .artclArea .readArea {
    width: min(93%, 1400px);
  }
  .artclArea .readArea .imgObj {
  }

  .sglSet {
    width: 100%;
  }
  .sglSet .csImgBlk {
    width: 50%;
    margin: 0 auto;
  }
  .sglSet.wideAcv .csImgBlk {
    width: 100%;
    margin: 0 auto;
  }
  .dblSet {
    width: 50%;
  }
  .btnLine.bkBtn {
    width: 100%;
  }
}
@media screen and (min-width: 1281px) {
}

.slideIn {
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* #mainArea .mainImg {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 100%;
} */

.catalogArea p {
  /* font-family: "Oswald", sans-serif; */
  /* font-optical-sizing: auto; */
  /* font-weight: 400; */
  /* font-style: normal; */
}
.creditSet {
  width: 90%;
  margin: 1.5rem auto 0;
}
.creditSet p {
  /* color: #b7b7b7; */
  /* font-weight: 600; */
  /* letter-spacing: 0; */
  /* line-height: 1.5; */
}

.artclArea .imgSet {
  margin: 0 auto;
  font-size: 0;
  line-height: 0;
  width: 100%;
  position: relative;
}
.artclArea .imgSet .imgObj {
  margin: 0 auto;
  width: 100%;
}
.artclArea .imgSet a {
  display: block;
}
.artclArea .imgSet a:hover {
  opacity: 1;
}
.creditLists {
  text-align: center;
  margin: 0.5em auto 0;
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
}
.creditLists.flex {
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
  margin: 0.8em 0 0;
}
.creditLists li {
  font-size: min(2.6vw, 1.2rem);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.creditLists li + li {
}
.creditLists li a {
  pointer-events: none;
}
.nowloading .spinner {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  transform: translate(0, -50%);
}
.spinner {
}
.spinner svg {
  width: 85vw;
  height: 29vw;
  max-height: 185px;
  max-width: 584px;
}

.mainImg {
  width: 100%;
  margin: 0 auto;
  /* max-width: 800px; */
  position: relative;
}

.creditLists {
  flex-flow: column;
  align-items: flex-start;
  margin: 0;
}
.creditLists li {
}

.ctlgSet {
  width: 100%;
  line-height: 1;
}

#mainArea {
  width: 100%;
  margin: 0 auto 0;
  padding: 0;
  height: 100svh;
  line-height: 1;
}

#mainArea .mainImg {
  max-width: 100%;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  height: 100%;
}
#mainArea .mainImg a,
#mainArea .mainImg picture {
  width: 100%;
  height: 100%;
}
#mainArea .mainImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#mainArea .logoImg {
  position: absolute;
  top: 3%;
  left: 4%;
  width: 94%;
  transform: rotate(-2deg);
}
#mainArea .conceptObj {
  position: absolute;
  bottom: 1.8%;
  color: #fff;
  transform: rotate(0deg);
  transform-origin: left bottom;
  right: 3.8%;
  font-size: 0.98rem;
  font-size: clamp(10px, 2.667vw, 20px);
  z-index: 10;
  writing-mode: sideways-lr;
  text-align: left;
  line-height: 1.375;
  letter-spacing: -0.013em;
  font-feature-settings: "palt";
  white-space: pre-line;
}
@media screen and (min-width: 768px) {
  #mainArea {
    height: auto;
  }

  #mainArea .mainImg {
  }

  #mainArea .logoImg {
    transform: rotate(0deg);
    width: auto;
    top: 3.5%;
    height: 87%;
    left: 0.5%;
  }
  #mainArea .logoImg picture,
  #mainArea .logoImg img {
    /* width: 100%; */
    /* height: 100%; */
    object-fit: cover;
    width: auto;
    height: 100%;
  }
  #mainArea .conceptObj {
    writing-mode: inherit;
    transform-origin: left top;
    bottom: 10%;
    right: 0;
    width: 46%;
    font-size: clamp(10px, 1.111vw, 16px);
    font-weight: 200;
  }
}

.imgTxtBlk {
  display: flex;
  flex-flow: wrap;
  align-items: flex-start;
}
.imgTxtBlk .creditBlk {
  position: fixed;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  background: #fff;
  padding: 1em 1em 3em;
  z-index: 10;
}
.imgTxtBlk.is-active .creditBlk {
  opacity: 1;
  pointer-events: auto;
}
.imgTxtBlk .creditBlk .creditSet {
  display: flex;
  flex-flow: row;
  text-align: left;
  width: 100%;
  margin: 0;
  align-items: flex-start;
}
.imgTxtBlk .creditBlk .creditSet + .creditSet {
  margin: 0.5em 0 0;
}
.imgTxtBlk .creditBlk .creditSet .creditTtl {
  width: 4.4em;
  font-size: min(2.6vw, 1.2rem);
  line-height: 1.6;
}
.imgTxtBlk .creditBlk .creditSet .creditLists {
  width: 85%;
}
.imgTxtBlk .creditBlk .creditList {
  text-align: left;
}
.imgTxtBlk .creditBlk .creditList .price {
  position: relative;
}
.imgTxtBlk .creditBlk .creditList .price::before {
  content: "";
  width: 100%;
  position: absolute;
  bottom: 0.1em;
  border-bottom: 1px solid;
  left: 0;
}
.imgTxtBlk .creditBlk .creditList + .creditList {
}

.imgTxtBlk .creditBlk .creditSet .creditList {
}
.imgTxtBlk .creditBlk .creditSet .creditList + .creditList {
}
@media screen and (min-width: 768px) {
  .imgTxtBlk .creditBlk {
    background: none;
    bottom: 2%;
    left: 2%;
  }
  .imgTxtBlk.is-active .creditBlk {
    opacity: 1;
    pointer-events: auto;
  }
}

.set01 {
}
.set02 {
  margin: 4% auto 0;
}
.set03 {
  margin: 24% auto 0;
}
.set04 {
  margin: 3.5% auto 0;
}
.set05 {
  margin: 32% auto 0;
}
.set06 {
  margin: 16% auto 0;
}
.set07 {
  margin: 17% auto 0;
}
.set08 {
  margin: 16% auto 0;
}
.set09 {
  margin: 31.5% auto 0;
}
.set10 {
  margin: 16% auto 0;
}
#p1 {
  width: 69%;
  margin: 0 0 0 4%;
}
#p2 {
  width: 92%;
  margin: 3.5% auto 0;
}
#p3 {
  width: 92%;
}
#p4 {
  width: 61%;
  margin: 5% 4% 0 auto;
}
#p5 {
  width: 76.5%;
  margin: 0 auto 0 4%;
}
#p6 {
  width: 53.8%;
  margin: 0 4% 0 auto;
}
#p7 {
  width: 92%;
  margin: 4% auto 0;
}
#p8 {
  width: 92%;
}
#p9 {
  width: 76.5%;
  margin: 0 auto 0 4%;
}
#p10 {
  width: 54%;
  margin: 0 4% 0 auto;
}
#p11 {
  width: 76%;
  margin: 4% 4% 0 auto;
}
#p12 {
  width: 92%;
  margin: 4% auto 0;
}

#p13 {
  width: 61.5%;
  margin: 0 4% 0 auto;
}

#p14 {
  margin: 5% auto 0 4%;
  width: 76.5%;
}

#p15 {
  width: 92%;
}

#p16 {
  width: 61%;
  margin: 0 auto 0 4%;
}

#p17 {
  width: 84%;
  margin: 4.2% 4% 0 auto;
}

@media screen and (min-width: 768px) {
  .set01 {
  }
  .set02 {
    margin: 12.8% auto 0;
  }
  .set03 {
    margin: 17.5% auto 0;
  }
  .set04 {
    margin: 19.8% auto 0;
  }
  .set05 {
    margin: 18% auto 0;
  }
  .set06 {
    margin: 14.5% auto 0;
  }
  .set07 {
    margin: 17.5% auto 0;
  }
  .set08 {
    margin: 17.5% auto 0;
  }
  .set09 {
    margin: 19.8% auto 0;
  }
  .set10 {
    margin: 17.5% auto 0;
  }
  #p1 {
    width: 37.5%;
    margin: 0 0% 0 auto;
  }
  #p2 {
    width: 50.5%;
    margin: -16% 20% 0 0;
  }
  #p3 {
    width: 50%;
    margin: 0 0 0 auto;
  }
  #p4 {
    width: 33.2%;
    margin: -21% 50% 0 8%;
  }
  #p5 {
    width: 41.5%;
    margin: 0 auto 0 22%;
  }
  #p6 {
    width: 29.2%;
    margin: 0 5.5% 0 auto;
    order: 2;
  }
  #p7 {
    width: 50%;
    margin: 25% auto 0 8%;
    order: 1;
  }
  #p8 {
    width: 50%;
  }
  #p9 {
    width: 36%;
    margin: 0 5% 0 auto;
  }
  #p10 {
    width: 29.4%;
    margin: 0 4% 0 22.5%;
  }
  #p11 {
    width: 42%;
    margin: 28.5% 0% 0 auto;
  }
  #p12 {
    width: 50%;
    margin: 9% auto 0 16.5%;
  }

  #p13 {
    width: 33.2%;
    margin: 0 4% 0 6%;
  }

  #p14 {
    margin: 30% 5% 0 auto;
    width: 41.8%;
  }

  #p15 {
    width: 50%;
    margin: 0 0 0 24%;
  }

  #p16 {
    width: 33%;
    margin: 0 auto 0 8.2%;
  }

  #p17 {
    width: 45.5%;
    margin: 32.8% 0.5% 0 auto;
  }
}

.ctlgFtrArea {
  margin: 20% auto 0;
  width: 100%;
  position: relative;
  z-index: 100;
  background: #fff;
  padding: 20% 7.5%;
}
.ctlgFtrArea .ttlObj {
  width: 79%;
}
.ctlgFtrArea .stCreditBlk {
  text-align: left;
  margin: 6% auto 0;
  font-size: 1.7rem;
  letter-spacing: 0.03em;
  font-size: clamp(13px, 3.467vw, 16px);
}
.ctlgFtrArea .stCreditBlk dt {
  line-height: 1;
}
.ctlgFtrArea .stCreditBlk dd {
  line-height: 1.46;
  margin: 0.3em 0 0;
}
.ctlgFtrArea .stCreditBlk dd + dt {
  margin-top: 1.4em;
}

.ctlgFtrArea .flxSet {
}
.ctlgFtrArea .cpBlk {
  margin: 15% 0 0;
}
.ctlgFtrArea .cpBlk .shareBlk {
  width: 60%;
}
.ctlgFtrArea .cpBlk .shareBlk .logoSet {
  width: 100%;
}
.ctlgFtrArea .cpBlk .shareBlk .logoSet svg {
}
.ctlgFtrArea .cpBlk .shareBlk .snsBlk {
  margin: 9% auto 0;
}
.ctlgFtrArea .cpBlk .shareBlk .snsBlk .insta {
}
.ctlgFtrArea .cpBlk .shareBlk .snsBlk .insta a {
}
.ctlgFtrArea .cpBlk .shareBlk .snsBlk .insta a svg {
  width: 25px;
  height: 25px;
}
@media screen and (min-width: 768px) {
  .ctlgFtrArea {
    margin: 18.5% auto 0;
    width: 100%;
    padding: 0 6.5% 10%;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: flex-end;
  }
  .ctlgFtrArea .ttlObj {
    width: 380px;
  }
  .ctlgFtrArea .stCreditBlk {
    margin: 40px auto 0;
    font-size: 12px;
  }
  .ctlgFtrArea .stCreditBlk dt {
  }
  .ctlgFtrArea .stCreditBlk dd {
  }
  .ctlgFtrArea .stCreditBlk dd + dt {
  }
  .ctlgFtrArea .flxSet {
  }
  .ctlgFtrArea .cpBlk {
    margin: auto 0 0;
    width: 50%;
  }
  .ctlgFtrArea .cpBlk .shareBlk {
    width: 210px;
    margin: 0 0 0 auto;
  }
  .ctlgFtrArea .cpBlk .shareBlk .logoSet {
  }
  .ctlgFtrArea .cpBlk .shareBlk .logoSet svg {
  }
  .ctlgFtrArea .cpBlk .shareBlk .snsBlk {
  }
  .ctlgFtrArea .cpBlk .shareBlk .snsBlk .insta {
  }
  .ctlgFtrArea .cpBlk .shareBlk .snsBlk .insta a {
  }
  .ctlgFtrArea .cpBlk .shareBlk .snsBlk .insta a svg {
  }
}
.prev {
  pointer-events: none;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0.6;
  filter: hue-rotate(45deg);
}

.clrWh {
  color: #fff;
}

.contsArea {
  padding: 0;
  /* max-width: 1200px; */
  margin: 0 auto;
}

.contsArea .informationArea {
  background: #fff;
  margin: 0 auto;
  padding: 50px 0;
}

.js-fade {
  opacity: 1;
  transition: 0s;
}
.js-fade.active {
}
.imgTxtBlk .imgObj a:hover {
  opacity: 1;
}