@charset "UTF-8";

.lpFont {
  font-family: "Martian Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.lpFont2 {
  font-family: "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
#glbMenu .logoSct {
  display: none;
}
.asTit {
  padding: 3em 0 2em;
}
.artclArea {
  width: 100%;
  /* background: #fff; */
  margin: 22.2% 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: 22.4%;
    width: min(75%, 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: left;
  margin: 0.5em auto 0;
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
}
.creditLists.taR {
  text-align: right;
  align-items: flex-end;
}
.creditLists.taR .creditList {
  text-align: right;
}
.creditLists.pdn2 {
  padding: 0 2em;
}

.creditLists.flex {
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
  margin: 0.8em 0 0;
}
.creditLists li {
  font-size: min(1.2vw, 14px);
  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.8em 0 0;
}
.creditLists li {
}

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

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

#mainArea .mainImg {
  max-width: 100%;
  width: 86%;
  padding: 0;
  margin: 0 auto;
  height: auto;
}
#mainArea .mainImg a,
#mainArea .mainImg picture {
  width: 100%;
  height: 100%;
}
#mainArea .mainImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#mainArea .logoImg {
  position: absolute;
  bottom: 8%;
  left: 0;
  width: 65%;
  right: 0;
  margin: 0 auto;
}
#mainArea .logoImg svg {
  fill: #ff0000;
}
#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;
}
.contsArea .areaBlk {
  width: min(100%, 1440px);
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  #mainArea {
    width: 65%;
    height: auto;
  }

  #mainArea .mainImg {
  }

  #mainArea .logoImg {
  }
  #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;
  }
  .creditLists {
    margin: 1.5em 0 0;
  }
  .creditLists li {
    font-size: min(1.2vw, 18px);
  }
}

.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 {
}
.set03 {
}
.set04 {
}
#p1 {
  width: 61.5%;
  margin: 0 0 0 18.5%;
}
#p2 {
  width: 42%;
  margin: 8% 8% 0 auto;
}
#p3 {
  width: 72%;
  margin: 12% auto 0;
}
#p4 {
  width: 51.5%;
  margin: 8% auto 0 0;
}
#p5 {
  margin: 18% auto 0;
}
#p6 {
  width: 86%;
  margin: 5% auto 0;
}
#p7 {
  width: 49.5%;
  margin: 15% 0 0 5%;
}
#p7_1 {
  width: 37%;
  margin: 71% 5% 0 auto;
}
#p8 {
  width: 89%;
  margin: 11% auto 0;
}
#p9 {
  width: 34.8%;
  margin: 15% 50% 0 15%;
}
#p10 {
  width: 69%;
  margin: 13% 0 0 auto;
}
#p11 {
  width: 49%;
  margin: 16% auto 13.2% 15.5%;
}
#p12 {
  width: 52.5%;
  margin: 0 auto 0 0;
}
#p12_1 {
  width: 45%;
  margin: 0 0 0 auto;
}
#p13 {
  width: 76%;
  margin: 24.5% auto 0;
}
#p14 {
  width: 80%;
  margin: 15% 0 0 auto;
}
#p15 {
  width: 60.5%;
  margin: 23% auto 0 0;
}
#p15_1 {
  width: 29.5%;
  margin: 94% 6% 0 auto;
}
#p16 {
  width: 53.4%;
  margin: 15% auto 0 30.5%;
}

@media screen and (min-width: 768px) {
  #p1 {
    width: 61.9%;
    margin: 0 0 0 18.5%;
  }
  #p2 {
    width: 42%;
    margin: 8.4% 8% 0 auto;
  }
  #p3 {
    width: 72%;
    margin: 14% auto 0;
  }
  #p4 {
    width: 51.5%;
    margin: 8% auto 0 0;
  }
  #p5 {
    margin: 18% auto 0;
    width: 86%;
  }
  #p6 {
    width: 86%;
    margin: 7.5% auto 0;
  }
  #p7 {
    width: 49.5%;
    margin: 15% 0 0 5%;
  }
  #p7_1 {
    width: 37%;
    margin: 71% 5% 0 auto;
  }
  #p8 {
    width: 89%;
    margin: 11% auto 0;
  }
  #p9 {
    width: 34.8%;
    margin: 15% 50% 0 15%;
  }
  #p10 {
    width: 69%;
    margin: 13% 0 0 auto;
  }
  #p11 {
    width: 49%;
    margin: 16% auto 13.2% 15.5%;
  }
  #p12 {
    width: 52.5%;
    margin: 0 auto 0 0;
  }
  #p12_1 {
    width: 45%;
    margin: 0 0 0 auto;
  }
  #p13 {
    width: 76%;
    margin: 24.5% auto 0;
  }
  #p14 {
    width: 80%;
    margin: 15% 0 0 auto;
  }
  #p15 {
    width: 60.5%;
    margin: 23% auto 0 0;
  }
  #p15_1 {
    width: 29.5%;
    margin: 94% 6% 0 auto;
  }
  #p16 {
    width: 53.4%;
    margin: 15% auto 0 30.5%;
  }
}

.ctlgFtrArea {
  width: 100%;
  position: relative;
  z-index: 100;
  background: none;
  padding: 5% 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: 0 auto 0;
    width: 100%;
    padding: 0 6.5% 8%;
    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;
  background: #e2dcd3;
}

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

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