@charset "utf-8";
/* CSS Document */
@import url("https://use.typekit.net/buk2sns.css");
/*ブラウザクリア*/
body {
  margin: 0px;
}

ul {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
}

p {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h2 {
  display: block;
  font-size: 0em;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
figure {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
/*ブラウザクリア*/

#Wr26ss {
  width: 100%;
  background: #fff;
  text-align: center;
  margin: 0 auto;
  font-size: 1em;
  overflow: hidden;
  font-family: ltc-bodoni-175, serif;
  font-weight: 400;
  font-style: normal;
  color: #000;
}

#Wr26ss .inner {
  width: 90%;
  max-width: 1200px;
  text-align: center;
  margin: 0 auto;
  font-size: 1em;
  padding-bottom: 0px;
  overflow: hidden;
  padding-top: 0px;
}
#Wr26ss a:hover {
  opacity: 0.5;
  transition: 0.6s;
}

#Wr26ss img {
  max-width: 100%;
  width: 100%;
}

/***** main *****/
#main {
  margin: 0 auto;
  width: 100%;
  position: relative;
  background-image: url(../image/main_pc.jpg);
  background-size: cover;
  background-position: bottom;
  height: calc(100vh - 80px);
}
#main img {
  position: absolute;
  display: block;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 24%;
  max-width: 500px;
}
/***** main *****/

/***** lead *****/
#lead {
  width: 90%;
  height: calc(100vh - 80px);
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

#lead p {
  font-size: 1.1rem;
  line-height: 2;
  text-align: center;
}
#lead p.en {
  line-height: 2;
  font-size: 90%;
}
#lead p.ja {
  font-size: 100%;
  line-height: 2.4;
  margin-bottom: 40px;
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
}
/***** lead *****/

/***** movie *****/
#movie {
  width: 100%;
  margin: 0px auto 200px;
}
#movie .video {
  width: 80%;
  max-width: 980px;
  aspect-ratio: 16/9;
  margin: 0 auto;
}
#movie .video iframe {
  width: 100%;
  height: 100%;
}
/***** movie *****/

/***** photo *****/
#photo {
  width: 100%;
  margin: 0px auto;
}
#photo img {
  display: block;
}
#photo .flex {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
}
#photo .image {
  margin: 0px auto;
  display: block;
  width: 100%;
}

#photo .photo__box {
  width: auto;
  margin: 120px auto;
}
#photo .photo__box .back__black {
  background: #000;
  width: 100%;
}

#photo .photo__box.secA {
  width: 90%;
  display: flex;
  margin: 0 auto 0 0;
}
#photo .photo__box.secB {
  width: 45%;
}
#photo .photo__box.secC {
  width: 100%;
}
#photo .photo__box.secD {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#photo .photo__box.secE {
  width: 45%;
}
#photo .photo__box.secF {
  width: 100%;
}
#photo .photo__box.secG {
  width: 90%;
  display: flex;
  align-items: center;
  margin: 0 0 0 auto;
}
#photo .photo__box.secH {
  width: 100%;
}
#photo .photo__box.secJ {
  width: 40%;
}
#photo .photo__box.secK {
  width: 90%;
}
#photo .photo__box.secM {
  width: 100%;
  display: flex;
}

/********** photo個別 **********/
#photo .photo__box.secA .p01 {
  width: 45%;
  margin: 0 auto 0 0;
}
#photo .photo__box.secA .p02 {
  width: 35%;
  margin-top: 3%;
}
#photo .photo__box.secC .p04 {
  width: 70%;
  margin: 0 auto 0 0;
}
#photo .photo__box.secD .p05,
#photo .photo__box.secD .p06 {
  width: 50%;
}
#photo .photo__box.secF .p08 {
  width: 70%;
  margin: 0 0 0 auto;
}
#photo .photo__box.secG .p09 {
  width: 35%;
}
#photo .photo__box.secG .p10 {
  width: 45%;
  margin: 0 auto 0 0;
}
#photo .photo__box.secH .p11 {
  width: 50%;
}
#photo .photo__box.secI .p12 {
  width: 100%;
}
#photo .photo__box.secL .p15 {
  width: 65%;
  margin: 0 auto 0 0;
}
#photo .photo__box.secL .p16 {
  width: 50%;
  margin: -16% 0 0 auto;
}
/********** photo個別 **********/

#photo .item-area {
  margin-top: 16px;
  display: inline-block;
}
#photo .item-area a.buy {
  font-family: ltc-bodoni-175, serif;
  font-weight: 400;
  font-style: italic;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
}
#photo .item-area a.buy::before {
  content: "◼︎";
  display: block;
  font-style: normal;
}
#photo .item-area a.buy span {
  font-style: normal;
  font-size: 105%;
  display: block;
  margin-left: 24px;
  margin-bottom: 2px;
}
#photo .item-area a.buy:hover {
  background: #000;
  color: #fff;
  opacity: 1;
}

#photo .item-area a.buy.cs {
  opacity: 0.3;
  pointer-events: none;
}
/***** photo *****/

/***** bottom *****/
#bottom {
  display: block;
  margin: 80px auto 120px;
}
#bottom a.btn_os {
  background: #000;
  color: #fff;
  padding: 12px 48px;
  font-weight: bold;
  font-size: 1rem;
}
/***** bottom *****/

/*****fade*****/
.fade {
  opacity: 0;
  transition: 2s ease;
}
.fade.is-show {
  opacity: 1;
}
.fade--up {
  transform: translateY(40px);
}
.fade--up.is-show {
  transform: translateY(0);
}

.fade--curtain-right {
  clip-path: inset(0 100% 0 0);
}
.fade--curtain-right.is-show {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.6s ease;
}
/* 左→右 */
.fade--curtain-left {
  clip-path: inset(0 0 0 100%);
}
.fade--curtain-left.is-show {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.6s ease;
}

/* 上→下 */
.fade--curtain-top {
  clip-path: inset(100% 0 0 0);
}
.fade--curtain-top.is-show {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.6s ease;
}

/* 下→上 */
.fade--curtain-bottom {
  clip-path: inset(0 0 100% 0);
}
.fade--curtain-bottom.is-show {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.6s ease;
}

.fade--scale-in {
  transform: scale(0.8);
}
.fade--scale-in.is-show {
  transform: scale(1);
}

.fade--scale-out {
  transform: scale(1.2);
}
.fade--scale-out.is-show {
  transform: scale(1);
}
/*****fade*****/

/********オーダー**********/
.order1 {
  order: 1;
}
.order2 {
  order: 2;
}
/********オーダー**********/

.pc {
  display: block !important;
}
.sp {
  display: none !important;
}
@media only screen and (max-width: 750px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }

  /***** main *****/
  #main {
    background-image: url(../image/main_sp.jpg);
    height: calc(100vh - 56px);
  }
  #main img {
    width: 55%;
  }
  /***** main *****/

  /***** lead *****/
  #lead {
    width: 80%;
    height: auto;
    margin: 80px auto;
  }
  #lead p {
    font-size: 1rem;
  }
  #lead p.en {
    font-size: 3vw;
  }
  #lead p.ja {
    font-size: 3vw;
    margin-bottom: 40px;
  }
  /***** lead *****/

  /***** movie *****/
  #movie {
    margin: 0px auto 120px;
  }
  #movie .video {
    width: 70%;
    aspect-ratio: 9/16;
    margin: 0 auto;
  }
  /***** movie *****/

  /***** photo *****/
  #photo {
    width: 100%;
  }
  #photo .photo__box {
    margin: 80px auto;
  }

  #photo .photo__box.secA {
    width: 90%;
    display: block;
    margin: 0 auto;
  }
  #photo .photo__box.secB {
    width: 45%;
  }
  #photo .photo__box.secD {
    width: 100%;
  }
  #photo .photo__box.secE {
    width: 45%;
  }
  #photo .photo__box.secG {
    width: 90%;
    flex-wrap: wrap;
    margin: 0 auto;
  }
  #photo .photo__box.secH {
    width: 100%;
  }
  #photo .photo__box.secJ {
    width: 64%;
  }
  #photo .photo__box.secK {
    width: 85%;
  }

  /********** photo個別 **********/
  #photo .photo__box.secA .p01 {
    width: 55%;
    margin: 0 auto 40px;
  }
  #photo .photo__box.secA .p02 {
    width: 90%;
    margin-top: 0;
  }
  #photo .photo__box.secC .p04 {
    width: 80%;
    margin: 0 auto 0 0;
  }
  #photo .photo__box.secF .p08 {
    width: 80%;
  }
  #photo .photo__box.secG .p09 {
    width: 50%;
  }
  #photo .photo__box.secG .p10 {
    width: 80%;
    margin: 40px auto 0;
  }
  #photo .photo__box.secH .p11 {
    width: 50%;
  }
  #photo .photo__box.secI .p12 {
    width: 100%;
  }
  /********** photo個別 **********/

  #photo .item-area {
    margin-top: 16px;
  }
  #photo .item-area a.buy {
    font-size: 3vw;
  }
  #photo .item-area a.buy span {
    margin-left: 24px;
    margin-bottom: 2px;
  }
  /***** photo *****/

  /***** bottom *****/
  #bottom {
    margin: 80px auto 80px;
  }
  #bottom a.btn_os {
    padding: 12px 52px;
    font-size: 80%;
  }
  /***** bottom *****/
}