*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role="list"],ol[role="list"]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* html {
  visibility: hidden;
}
html.wf-active {
  visibility: visible;
} */

body, a, p{
  font-family: "yu-mincho-pr6n", sans-serif;
  color: #000;
  font-size: clamp(14px, 1.15vw, 32px);
  text-decoration: none;
  letter-spacing: 0.01rem;
  line-height: 2.2;
}
body{
  position: relative;
  -webkit-overflow-scrolling: touch;
}
ul{
  padding: 0;
}
li{
  list-style: none;
}
img{
  width: 100%;
}

.pc{
  display: block;
}
.sp{
  display: none;
}
.flex-box{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.slide-box{
  overflow: hidden;
}
/* アニメーション */
.zoomin{
  animation: zoomin 1.4s linear 0.1s 1 normal both;
  opacity: 0;
}
@keyframes zoomin{
  0% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.fadeout{
  animation: fadeout 0.8s linear 2.8s 1 normal both;
  opacity: 0;
}
@keyframes fadeout{
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.header-fadein{
  animation-name: header-fadein;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-delay: 9s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes header-fadein{
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadein{
  opacity: 0;
}
.header-fade,
.fadein.active{
  animation-name: fade;
  animation-duration: 1.4s;
  animation-timing-function: ease-in;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fade{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.zoomin-left{
  opacity: 0;
  transform: scale(1.2) translateX(-10%);
}
.zoomin-left.active{
  opacity: 1;
  transform: scale(1) translateX(0);
  transition: opacity 2350ms cubic-bezier(0.25, 0.46, 0.45, 0.94),transform 3000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-delay: 1s;
}
.zoomin-right{
  opacity: 0;
  transform: scale(1.2) translateX(10%);
}
.zoomin-right.active{
  opacity: 1;
  transform: scale(1) translateX(0);
  transition: opacity 2350ms cubic-bezier(0.25, 0.46, 0.45, 0.94),transform 3000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-delay: 1s;
}
.zoomin-fade{
  opacity: 0;
  transform: scale(1.2);
}
.zoomin-fade.active{
  opacity: 1;
  transform: scale(1);
  transition: opacity 2350ms cubic-bezier(0.25, 0.46, 0.45, 0.94),transform 3000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-delay: 1s;
}

.slideleft{
  opacity: 0;
}
.slideleft.active{
  animation: slideleft;
  animation-duration: 1.3s;
  animation-timing-function: ease-out;
  animation-delay: 0.4s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes slideleft{
  0% {
    opacity: 0;
    transform: translateX(-8%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

span.smoothText{
  overflow: hidden;
  display: block;
}
span.smoothTextTrigger{
  transition: 2.4s ease-in-out;
  transform: translate3d(0,100px,0) skewY(0deg);
  transition-delay: -1s;
  transform-origin: left;
  display: block;
  opacity: 0;
}
span.smoothTextTrigger.active{
    transform: translate3d(0,0,0) skewY(0deg);
    opacity: 1;
}
.fadeUp-box{
  overflow: hidden;
}
.fadeUp{
  animation: fadeinUp;
  animation-duration: 2.4s;
  animation-timing-function: ease-out;
  animation-delay: 0.6s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 2;
}
span.smoothText02{
  overflow: hidden;
  display: block;
}
span.smoothTextTrigger02{
  transition: 1.6s ease-in-out;
  transform: translate3d(0,100%,0) skewY(40deg);
  transition-delay: -1s;
  transform-origin: left;
  display: block;
}
span.smoothTextTrigger02.active{
    transform: translate3d(0,0,0) skewY(0);
}
/* ヘッダー */
#header{
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}
#header .dummy{
  width: 100%;
  opacity: 0.6;
}
#header .photo-wrapper img{
  position: absolute;
}
#header .photo-wrapper .photo01{
  bottom: 9.5%;
  left: 0;
  width: calc(472 / 2560 * 100%);
  animation-delay: 0.1s;
}
#header .photo-wrapper .photo02{
  top: 0;
  left: 14.5%;
  width: calc(728 / 2560 * 100%);
  animation-delay: 1s;
}
#header .photo-wrapper .photo03{
  bottom: 0;
  left: 33%;
  width: calc(449 / 2560 * 100%);
  animation-delay: 0.6s;
}
#header .photo-wrapper .photo04{
  top: 20.8%;
  left: 46.9%;
  width: calc(698 / 2560 * 100%);
  animation-delay: 1.3s;
}
#header .photo-wrapper .photo05{
  top: 8.5%;
  right: 4.5%;
  width: calc(388 / 2560 * 100%);
  animation-delay: 0.3s;
}
#header .photo-wrapper .photo06{
  bottom: 4.75%;
  right: 5.1%;
  width: calc(469 / 2560 * 100%);
  animation-delay: 0.8s;
}
#header .photo07{
  animation-delay: 3.8s;
}
#header .logo{
  position: absolute;
  top: 43%;
  left: 59%;
  width: 23%;
  z-index: 5;
  animation-delay: 4.4s;
}
/* リード */
.lead{
  position: relative;
  margin: 100px auto 180px;
  text-align: center;
}
.lead .slow-logo{
  width: 14%;
  margin: 0 auto 1%;
}
.lead .text{
  margin-bottom: 40px;
  letter-spacing: 0.1rem;
}
/* スクロール */
.lead .scroll{
  position: relative;
  width: 2%;
  margin: 0 auto;
}
.lead .scroll::before {
  content: '';
  position: absolute;
  bottom: -110px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100px;
  background: rgba(0, 0, 0, .2);
  z-index: 1;
}
.lead .scroll::after {
  content: '';
  position: absolute;
  bottom: -110px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100px;
  background: #000;
  animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite;
  z-index: 1;
}
@keyframes sdl{
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
/* scene:title-aera */
.scene{
  position: relative;
}
#scene2, #scene3{
  margin-top: 100px;
}
.scene .title-area{
  position: relative;
  margin-bottom: 50px;
}
.scene .title-box{
  align-items: flex-end;
  position: absolute;
  top: 25%;
  left: 15.75%;
}
#scene2 .title-box,
#scene3 .title-box{
  top: 19%;
  left: 15.75%;
}
.scene .title{
  width: auto;
  height: 3vw;
}
.scene .title.active{
  animation-duration: 1s;
  animation-delay: 0s;
}
/* .scene .color-inner{
  overflow: hidden;
} */
.scene .title-color{
  width: auto;
}
.scene .color{
  width: auto;
  height: 1.9vw;
  margin-left: 2vw;
  margin-bottom: 0.05rem;
}
.scene .color.active{
  animation-duration: 1s;
  animation-delay: 0s;
}
.scene .text{
  margin: 0 auto 100px;
  text-align: center;
  letter-spacing: 0.1rem;
  animation-delay: 0.6s;
}
/* アイテムエリア */
.item-block{
  position: relative;
  margin-bottom: 60px;
  overflow: hidden;
}
.item-block .photo-area{
  overflow: hidden;
}
/* リンクエリア */
.text-area01 .link-area{
 margin: 20px 4% 0 auto;
}
.text-area02 .link-area{
  margin: 20px auto 0;
}
.remodal .flex-box-reverse .link-area{
  margin: 0 0 0 auto;
}
.remodal .link-area .item{
  text-align: left;
}
.link-area{
  width: 20vw;
  min-width: 320px;
}
.link-area a,
.link-area .comingsoon{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  line-height: 1;
  margin-bottom: 0.6em;
  transition: 0.6s ease-in-out;
  z-index: 1;
}
.link-area a:hover{
  opacity: 0.6;
  transition: 0.6s ease-in-out;
}
.link-area .mainitem-area{
  border-bottom: 1px solid #808080;
}
.link-area .mainitem-area .item{
  font-size: clamp(16px, 1vw, 27px);
}
.link-area .item{
 width: 100%;
 font-family: "adobe-garamond-pro", serif;
 letter-spacing: 0.1rem;
 font-size: clamp(14px, 0.9vw, 25px);
 line-height: 1;
}
.link-area .price{
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  font-size: clamp(14px,0.9vw, 25px);
  font-family: YuMincho, 'Yu Mincho', serif;
  white-space: nowrap;
  letter-spacing: 0.08rem;
  line-height: 1;
}
.link-area .price span{
  display: block;
  margin: 0 0.5em 0.1em;
  font-size: clamp(10px,0.6vw, 34px);
}
.link-area .size-l::before{
  content: url(../img/size-l.svg);
  position: absolute;
  top: 50%;
  left: -1.3em;
  transform: translateY(-50%);
  width: 0.8em;
  height: 0.8em;
}
.link-area .size-s::before{
  content: url(../img/size-s.svg);
  position: absolute;
  top: 50%;
  left: -1.3em;
  transform: translateY(-50%);
  width: 0.8em;
  height: 0.8em;
}
.link-area .price-space::before{
  left: -1.9em;
}
.link-area .detail{
  margin-bottom: 0.15em;
  border-bottom: 1px solid #000;
  font-family: "Arial", "メイリオ", Arial, sans-serif;
  font-size: clamp(10px,0.6vw, 17px);
  line-height: 0.8;
}
.link-area .comingsoon .detail{
  white-space: nowrap;
}
/* アコーディオン */
.accordion .toggle{
  display: none;
}
.accordion .option{
  margin-top: -1px;
}
.accordion .accordion-btn,
.accordion .text-area{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
}
.accordion .accordion-btn{
  position: relative;
  display: block;
  margin-bottom: 4%;
  font-size: clamp(16px,0.8vw,24px);
  cursor:pointer;
  transition: all 0.6s;
}
.accordion .accordion-btn::before,
.accordion .accordion-btn::after{
  content: "";
  display: block;
  width: 5%;
  height: 2px;
  background: #303e5b;
  position: absolute;
  left: 35%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.6s;
}
.accordion .accordion-btn::before{
  transform: translate(-50%, -50%) rotate(90deg);
}
.accordion .text-area{
  margin-top: -1px;
  max-height: 0;
  overflow: hidden;
}
.accordion .text-area p,
.toggle:checked + .accordion-btn + .text-area{
  max-height: 500px;
  transition: all 1.5s;
}
.toggle:checked + .accordion-btn::before{
  transform: translate(-50%, -50%) rotate(0deg);
}
/* scene1-1 */
#scene1-1{
  width: calc(1160 / 2560 *100%);
  margin-top: 17%;
}
/* scene1-2 */
#scene1-2{
  width: calc(1380 / 2560 *100%);
}
#scene1-2 .link-area{
  margin: -6.5% 20% 0 auto;
}
/* scene1-３ */
#scene1-3{
  width: calc(1360 / 2560 *100%);
  margin-top: 8%;
}
#scene1-3 .link-area{
  margin: -4% 12% 0 auto;
}
/* scene1-4 */
#scene1-4{
    width: calc(1180 / 2560 *100%);
}
#scene1-4 .link-area{
  margin: 20px 22% 0 auto;
}
/* scene1-5 */
#scene1-5{
  width: calc(1160 / 2560 *100%);
  margin-top: 15%;
}
#scene1-5 .link-area{
  margin: 20px 1% 0 auto;
}
/* scene1-6 */
#scene1-6{
  width: calc(1380 / 2560 *100%);
}
#scene1-6 .link-area{
  margin: -7% 18% 0 auto;
}
/* scene2-1 */
#scene2-1{
  width: calc(1210 / 2560 *100%);
}
#scene2-1 .text-area01 .link-area{
  margin-right: 3%;
}
/* scene2-2 */
#scene2-2{
  width: calc(1330 / 2560 *100%);
  margin-top: 9%;
}
#scene2-2 .link-area{
  margin: -5% 18% 0 auto;
}
/* scene2-3 */
#scene2-3{
  margin: 3% auto 6%;
}
#scene2-3 .photo-area{
  width: calc(1963 / 2560 * 100%);
  margin: 0 auto;
}
#scene2-3 .link-area{
  justify-content: flex-end;
  width: auto;
  margin: 20px 11.75% 0 auto;
}
#scene2-3 .link-area .mainitem-area,
#scene2-3 .link-area .text-area{
  width: 20vw;
  min-width: 320px;
  border: none;
  margin-left: 4%;
}
/* scene2-4 */
#scene2-4{
  width: calc(1360 / 2560 *100%);
  margin-top: 6%;
}
#scene2-4 .link-area{
  margin: -7% 5% 0 auto;
}
/* scene2-5 */
#scene2-5{
  width: calc(1180 / 2560 *100%);
}
#scene2-5 .text-area01 .link-area{
  margin-right: 0;
}
/* scene2-6*/
#scene2-6{
  width: calc(1200 / 2560 *100%);
  margin: 3% 15% 6% auto;
}
#scene2-6 .link-area{
  margin: -5.5% 1% 0 auto;
}
/* scene3-1 */
#scene3-1{
  width: calc(1380 / 2560 *100%);
}
#scene3-1 .text-area01 .link-area{
  margin-right: 6%;
}
/* scene3-2 */
#scene3-2{
  width: calc(1160 / 2560 *100%);
  margin-top: 18%;
}
#scene3-2 .link-area{
  margin: 20px 20% 0 auto;
}
/* scene3-3 */
#scene3-3{
  width: calc(1150 / 2560 *100%);
}
#scene3-3 .link-area{
  margin: 20px 4% 0 auto;
}
/* scene3-4 */
#scene3-4{
  width: calc(1390 / 2560 *100%);
  margin-top: 7%;
}
#scene3-4 .link-area{
  margin: -4% 18% 0 auto;
}
/* scene3-5 */
#scene3-5{
  width: calc(1270 / 2560 *100%);
}
#scene3-5 .link-area{
  margin-right: 4%;
}
/* scene3-6 */
#scene3-6{
  width: calc(1270 / 2560 *100%);
  margin-top: 12%;
}
#scene3-6 .link-area{
  margin-right: 20%;
}
/* クレジット */
.credit{
  margin: 60px auto 100px;
  text-align: center;
}
.credit p{
  font-family: adobe-garamond-pro, serif;
  font-size: 12px;
}
/*banner-block*/
.banner-block{
  width: 36%;
  margin: 100px auto 40px;
  position: relative;
}
.banner-block .c-btn01{
  margin: 0 auto 2% auto;
  border: 1px solid #000;
  transition: .3s;
  display: block;
}
.banner-block .flex-box{
  margin-top: 30px;
}
.banner-block .flex-box .c-btn01{
  width: 48%;
  margin: inherit;
}
/* ページトップボタン */
#pagetop{
  position: fixed;
  right: 15px;
  bottom: 20px;
  width: 35px;
  z-index: 99;
}
/* フッター */
.footer{
  letter-spacing: 0.3em;
  position: relative;
  text-align: center;
  padding: 0 0 30px 0;
}
.footer img{
  transition: .3s;
}
.footer img:hover{
  opacity: 0.6;
  transition: .3s;
}
.footer_sns {
  margin: 26px 0 0;
}
.footer_sns .instagram{
  display: block;
  width: 2.5%;
  min-width: 36px;
  margin: 0 auto 2%;
  opacity: 1;
  transition: .3s;
}
.f-ow{
  width: 120px;
  margin: 25px auto 0 auto;
}
.footer_copyright{
  font-family: "Helvetica",serif;
  font-size: 10px;
  letter-spacing: 0.02em;
  margin: 34px 0 0;
}
@media screen and (max-width:766px){
  body, a, p{
    font-size: 0.95rem;
  }
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  .flex-box{
    flex-direction: column;
  }
  .flex-box-reverse{
    flex-direction: column-reverse;
  }
  span.smoothTextTrigger02 {
    transition: 1.2s;
    transform: translate3d(0,180%,0) skewY(10deg);
  }
  .zoomin-right.active,
  .zoomin-left.active,
  .zoomin-fade.active{
    transition-delay: 0.6s;
  }

  /* ヘッダー */
  #header .dummy{
    opacity: 0.5;
  }
  #header .photo-wrapper .photo01{
    width: calc(770 / 1280 * 100%);
    top: 3%;
    left: 0;
  }
  #header .photo-wrapper .photo02{
    width: calc(590 / 1280 * 100%);
    top: auto;
    left: 0;
    bottom: 0;
  }
  #header .photo-wrapper .photo03{
    width: calc(357 / 1280 * 100%);
    top: auto;
    bottom: 25%;
    left: 30%;
  }
  #header .photo-wrapper .photo04{
    width: calc(392 / 1280 * 100%);
    top: 0;
    right: 0;
    left: auto;
  }
  #header .photo-wrapper .photo05{
    width: calc(632 / 1280 * 100%);
    top: 27.5%;
    right: 0;
    left: auto;
  }
  #header .photo-wrapper .photo06{
    width: calc(479 / 1280 * 100%);
    bottom: 0;
    right: 0;
  }
  #header .logo{
    top: auto;
    bottom: 9%;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    animation-duration: 1s;
    animation-delay: 3s;
  }
  /* リード */
  .lead{
    margin: 6% auto 26%;
  }
  .lead .slow-logo{
    width: 34%;
    margin: 10% auto 6%;
  }
  .lead p{
    text-align: center;
  }
  /* スクロール */
  .lead .scroll{
    width: 8.5%;
  }
  .lead .scroll::before,
  .lead .scroll::after{
    bottom: -84px;
    height: 80px;
  }
  /* リンクエリア */
  .link-area{
    width: 84% !important;
    margin: 6% auto 0 !important;
    min-width: inherit;
  }
  .link-area a{
    align-items: center;
  }
  .link-area .item{
    font-size: 1rem;
  }
  .link-area .price{
    font-size: 0.9rem;
  }
  .link-area .price span, .link-area .detail{
    font-size: 0.65rem;
  }
  .link-area .detail{
    margin-bottom: -0.25em;
  }
  /* アコーディオン */
  .accordion .accordion-btn::before, .accordion .accordion-btn::after{
    width: 4%;
    height: 1px;
    left: 7.2em;
    top: 48%;
  }
  /* scene */
  #scene2, #scene3{
    margin-top: 10%;
  }
  .scene .title-area{
    margin-bottom: 8%;
  }
  .scene .title-box,
  #scene2 .title-box,
  #scene3 .title-box{
    flex-direction: row;
    left: 8%;
    width: calc(100% - 15.75%);
    justify-content: flex-start;
    margin: auto;
  }
  .scene .title{
    height: 6vw;
    padding-right: 2%;
  }
  .scene .title-color{
    flex-shrink: 1;
    width: 100%;
  }
  .scene-inner{
    width: auto;
  }
  .scene .color{
    height: 4vw;
    margin-bottom: 0;
  }
  .scene .text{
    margin-bottom: 8%;
    line-height: 1.8;
  }
  .item-block{
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 8% !important;
  }
  #scene1-1 .photo-area{
    width: 90%;
  }
  #scene1-4 .photo-area{
    width: 90%;
    margin-right: 0;
    margin-left: auto;
  }
  #scene1-5 .photo-area{
    width: 92%;
    margin-right: 0;
    margin-left: auto;
  }
  #scene1-6 .photo-area{
    width: 92%;
  }
  #scene2-1 .photo-area{
    width: 95%;
  }
  #scene2-2 .photo-area{
    width: 95%;
    margin-left: auto;
    margin-right: 0;
  }
  #scene2-3 .photo-area{
    width: 100%;
  }
  #scene2-3 .link-area{
    justify-content: space-between;
  }
  #scene2-3 .link-area .mainitem-area{
    border-bottom: 1px solid #808080;
  }
  #scene2-3 .link-area .mainitem-area, #scene2-3 .link-area .text-area{
    width: 100%;
    min-width: auto;
    margin: auto;
  }
  #scene2-4 .photo-area{
    width: 92%;
    margin-right: 0;
    margin-left: auto;
  }
  #scene2-5 .photo-area{
    width: 92%;
  }
  #scene2-6 .photo-area{
    width: 92%;
    margin-left: 0;
  }
  #scene3-1 .photo-area{
    width: 89%;
    margin-right: 0;
    margin-left: auto;
  }
  #scene3-2 .photo-area{
    width: 100%;
  }
  #scene3-3 .photo-area{
    width: 90%;
    margin-left: 0;
  }
  #scene3-4 .photo-area{
    width: 100%;
  }
  #scene3-5 .photo-area{
    width: 93%;
  }
  #scene3-6 .photo-area{
    width: 100%;
  }
  /* クレジット */
  .credit{
    margin: 10% auto 0;
  }
  /* バナー */
  .banner-block{
    width: 76%;
    margin: 10% auto 14%;
  }
  .banner-block .flex-box {
    margin: 0;
    flex-direction: row;
  }
  /* ページトップボタン */
  #pagetop{
    position: fixed;
    right: 0;
    bottom: 0;
    width: 10%;
    z-index: 99;
  }
  /* フッター */
  .footer{
    padding-bottom: 10px;
  }
  .footer_sns{
    margin: 0 auto;
  }
  .block-bg{
    padding: 0;
    width: 100%;
  }


}