/* ====================
   共通設定
==================== */
img {
  width: 100%;
  /* height: auto;
  display: block; */
}

h2 .flex02 {
  align-items: flex-start;
  gap: 20px;
}

/* ====================
   ヘッダー
==================== */
header {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

header .video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-index-level-0);
}

header .video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

header .video-container .fv-catchcopy {
  position: absolute;
  bottom: 75px;
  left: 75px;
  width: 330px;
}

.sp-fv-image {
  display: none;
}

/* ロゴ・カートアイコン */
header .cart,
header .header-logo {
  position: fixed;
  z-index: var(--z-index-level-3);
}

header .cart {
  width: 30px;
  top: 34px;
  right: 100px;
}

header .header-logo {
  width: 60px;
  top: 25px;
  left: 40px;
}

/* ====================
   ハンバーガーメニュー
==================== */
.nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #09083d;
  display: none;
  transition: opacity 1s, visibility 0s linear 0.8s;
  /* .scroll02のz-indexが10なのでそれより上に設定 */
  z-index: var(--z-index-level-5);
}

.open .nav-wrapper {
  display: flex;
  opacity: 1;
  transition: opacity 1s, visibility 0s;
}

/* ナビゲーション */
nav {
  text-align: center;
}

nav .inner ul {
  margin: 0;
  padding: 0;
}

nav .inner ul li {
  margin: 20px 0;
}

nav .inner ul li a {
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  transition: color 0.3s;
}

nav .inner ul li a:hover {
  color: #e4e4e4;
}

/* トグルボタン */
.toggle_btn {
  position: fixed;
  top: 37px;
  right: 40px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: var(--z-index-level-5);
}

.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #fff;
  /* 初期色は白 */
  border-radius: 4px;
  transition: all 0.5s;
}

.toggle_btn span:nth-child(1) {
  top: 4px;
}

.toggle_btn span:nth-child(2) {
  top: 14px;
}

.toggle_btn span:nth-child(3) {
  bottom: 4px;
}

/* トグルボタンの開閉アニメーション */
.open .toggle_btn span:nth-child(1) {
  transform: translateY(10px) rotate(-315deg);
  background-color: #09083d;
  /* 開いたときに白から黒に変更 */
}

.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}

.open .toggle_btn span:nth-child(3) {
  transform: translateY(-10px) rotate(315deg);
  background-color: #09083d;
  /* 開いたときに白から黒に変更 */
}


/* マスク */
#mask {
  display: none;
  transition: all 0.5s;
}

.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.8;
  z-index: var(--z-index-level-2);
  cursor: pointer;
}

/* ====================
   メニュー内コンテンツ
==================== */
.image-slider {
  display: flex;
  width: 65%;
}

.menu-right {
  width: 30%;
  height: 100vh;
  background: #f2ebd1;
}

/* ナビエリア */
#navArea {
  position: relative;
  width: 100%;
}

#navArea a,
#navArea p {
  color: #09083d;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: 35px;
  display: flex;
  justify-content: flex-start;
}

#navArea a,
#navArea .menu-right .nav-icon-wrapper a {
  transition: .3s;
}

#navArea a:hover,
#navArea .menu-right .nav-icon-wrapper a img:hover {
  opacity: 0.5;
}

#navArea .cart {
  width: 20px;
}

#navArea .menu-shop {
  gap: 10px;
  position: absolute;
  right: 90px;
  top: 43px;
}

#navArea .menu-shop p {
  font-size: 17px;
  text-decoration: underline 1px;
  text-underline-offset: 7px;
  margin-top: 4px;
}

#navArea ul {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

#navArea .nav-under a {
  font-size: 18px;
}

#navArea nav {
  margin: 100px 0 0 60px;
}

#navArea .custom-line {
  margin-top: 25px;
  background-color: #09083d;
  width: 300px;
  height: 1px;
  border: none;
}

#navArea .nav-icon-wrapper {
  justify-content: flex-start;
  margin-top: 40px;
  width: 100%;
  gap: 15px;
}

#navArea .nav-icon-wrapper a img {
  width: 29px;
}

#navArea .menu-logo {
  width: 60px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}


/* ====================
   スライドアニメーション
==================== */
.swiper1 .swiper-slide {
  text-align: right;
}

.swiper-wrapper {
  transition-timing-function: linear;
}

#navArea .swiper img {
  max-width: 65%;
}

.scroll02 {
  position: absolute;
  bottom: 1%;
  left: 445px;
  z-index: var(--z-index-level-4);
}

.scroll02::after {
  content: '';
  display: inline-block;
  position: absolute;
  background-color: #cca03e;
  right: 50%;
  bottom: -115px;
  width: 1px;
  height: 150px;
  animation: scroll02 2.5s infinite;
}

@keyframes scroll02 {
  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%;
  }
}





/* ====================
   concept
==================== */

.a-concept-area {
  padding: 16% 0;
  background: linear-gradient(175deg, rgb(85, 36, 93) 0%, rgba(0, 25, 72, 1) 80%, #09083d);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.a-concept-container {
  display: inline-block;
  max-width: min(720px, 50%);
  position: relative;
}

.a-concept-area .secTitleJp {
  display: inline-block;
  margin-top: 36px;
  margin-bottom: 50px;
}

.a-concept-area .a-concept-text-box p {
  margin-bottom: clamp(20px, calc(-14px + 4.5vw), 50px);
}

.a-concept-area .a-concept-text-box p:last-child {
  margin-bottom: 10px;
}

.a-concept-area .more-btn {
  justify-self: flex-end;
  margin-right: 18%;
}

.a-img-window {
  position: absolute;
  width: clamp(150px, calc(14.605vw + 37.687px), 248px);
  top: clamp(-137px, calc(-12.966vw + 49.706px), -50px);
  right: clamp(-240px, calc(-19.374vw + 38.987px), -110px);
}

.a-img-lamp {
  position: absolute;
  width: clamp(124px, calc(11.326vw + 36.9px), 200px);
  bottom: 40px;
  left: clamp(-320px, calc(-23.845vw + 23.368px), -160px);
}

.a-img-book {
  position: absolute;
  width: clamp(200px, calc(14.903vw + 85.395px), 300px);
  bottom: clamp(-320px, calc(-20.864vw - 19.553px), -180px);
  right: clamp(0px, calc(2.981vw - 22.921px), 20px);
}

.a-img-lantern {
  width: 50%;
  margin-top: clamp(300px, calc(38.748vw + 2.027px), 560px);
}



/* ====================
   feature
==================== */

.feature-area {
  padding: 0 10%;
  margin: 5% auto 0;
  max-width: 1440px;
  position: relative;
}

.section-heading {
  margin-bottom: 5%;
}

.feature-area p,
.feature-area h3,
.feature-area span {
  color: #09083d;
}

.feature-area p {
  line-height: 2;
}

.feature-area h2 span {
  color: #fcfcfc;
}

.feature-area ul {
  overflow-x: scroll;
  justify-content: flex-start;
  gap: 10%;
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
}

.feature-area ul::-webkit-scrollbar {
  /*スクロールバー非表示（Chrome・Safari）*/
  display: none;
}

.feature-area .section-heading-wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2%;
}

.feature-area .section-heading-wrap .scroll p {
  color: #cca03e;
}

.feature-area .feature-img-wrap {
  position: relative;
  overflow: hidden;
}

.feature-area .feature-img-wrap img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-duration: 0.6s;
}

.feature-area .feature-img-wrap img:hover {
  transform: scale(1.1, 1.1);
  opacity: 0.8;
}

.feature-area .more-btn a {
  font-weight: 800;
}



/* scroll line animation */

.feature-area .scroll {
  position: absolute;
  font-size: 13px;
  top: 65px;
  right: 30%;
}

.feature-area .scroll::after {
  content: '';
  display: inline-block;
  position: absolute;
  background-color: #cca03e;
  width: 22vw;
  max-width: 316px;
  height: 1px;
  animation: scroll 2.5s infinite;
}

@keyframes scroll {
  0% {
    transform: scaleX(0);
    transform-origin: 0 50%;
    /* 左端を基準に */
  }

  100% {
    transform: scaleX(1);
    transform-origin: 0 50%;
    /* 左端を基準に */
  }
}





.feature-area h2>div {
  justify-content: flex-start;
}

.feature-area ul li {
  min-width: 100%;
  max-width: 1080px;
  max-height: 735px;
  background: #f2ebd1;
  padding: 6%;
  border-radius: 20px;
  position: relative;
  gap: 7%;
}

/* .feature-area ul li:nth-child(2) {
  margin-top: 100px;
} */

.feature-area .text-box {
  font-size: 14px;
  margin: 9% 0 4%;
}

.feature-area h3 .feature-subtitle-number {
  font-size: clamp(12px, calc(7.5px + 0.6vw), 16px);
}

.feature-area .feature-subtitle-wrap {
  gap: 20px;
  align-items: flex-start;
}

/* 左上の数字 */
.feature-area .feature-label {
  font-size: clamp(45px, calc(5px + 5.2vw), 80px);
  font-family: "Bodoni Moda", serif;
  font-weight: 700;
  font-optical-sizing: auto;
  font-style: normal;
  position: absolute;
  top: 21%;
  right: 10%;
  color: #cca03e;
}


.feature-area ul li:nth-child(2) .feature-label {
  right: 28%;
}

.feature-area ul li:nth-child(3) .feature-label {
  right: 21%;
}

.feature-area ul li:nth-child(4) .feature-label {
  right: 16%;
}

.feature-area ul li:nth-child(5) .feature-label {
  right: 13%;
}




.feature-area .feature-label .label-top {
  color: #09083d;
}

.feature-area h3 {
  font-size: clamp(18px, calc(6.6px + 1.4vw), 28px);
}

.feature-area .feature-number {
  font-size: 5vw;
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: Italic;
  margin-left: -10px;
}

.feature-area .feature-number-large {
  font-size: 14vw;
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: Italic;
  margin-right: -10px;
}

.feature-number-slash {
  font-size: 5vw;
  font-weight: 300;
  font-family: "Bodoni Moda", serif;
  display: inline-block;
  transform: rotate(10deg);
}

.feature-area .number-box {
  position: absolute;
  top: -9%;
  left: 2%;
  transform: translate(-9%, 1%);
}

.feature-img {
  width: 60%;
}

.feature-text {
  width: 36%;
  margin-top: 150px;
}

.feature-area .more-btn {
  text-align: center;
  margin-left: 40%;
}


/* ====================
   product
==================== */
.product-area {
  margin: 10% auto;
  padding: 0 18%;
  max-width: 1440px;
}

.product-area .section-heading {
  margin-bottom: 8%;
}

.product-area .tab-buttons {
  text-align: left;
  margin-bottom: 5%;
}

.product-area>div {
  text-align: center;
}

.product-area ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4%;
}

.product-area ul li {
  position: relative;
  width: 22%;
  height: auto;
  margin-bottom: 8%;
}

.product-img-wrap {
  overflow: hidden;
}

.product-img-wrap img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-duration: 0.5s;
}

.product-img-wrap img:hover {
  transform: scale(1.1, 1.1);
  opacity: 0.8;
}

.product-area ul li p {
  margin-top: 10px;
}


/* ここから */

.tab-buttons button {
  background: none;
  border: none;
  cursor: pointer;
  transition: .3s;
  color: #fcfcfc;
}

.tab-buttons button:first-child {
  margin-right: 1em;
}

/* .tab-buttons button:hover {
  background: #f0f8ff;
} */

.tab-buttons button.active {
  border-bottom: 1px solid #cca03e;
  color: #cca03e;
}

.tab-contents .content {
  display: none;
  padding: 20px 0;
  animation: fadeIn 0.8s ease-in-out;
}

.tab-contents .content.active {
  display: flex;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



/* ====================
   case
==================== */
.case-area {
  margin: 0 auto;
  padding: 0 15%;
  max-width: 1440px;
}

.case-area .section-heading {
  margin-bottom: 35%;
}

.case-area-left {
  width: 50%;
  align-items: flex-start;
}

.case-area-right {
  width: 50%;
  height: auto;
}

.case-area-right img {
  position: static;
  width: 100%;
  height: 100%;
}

.case-area h2 {
  margin-bottom: -25px;
}

.case-area p {
  font-size: clamp(12px, calc(7.5px + 0.6vw), 16px);
}

.case-area .more-btn {
  margin-top: 5%;
  width: 100%;
  text-align: right;
  margin-left: -30%;
}


/* ====================
   news
==================== */

.news-area,
.access-area {
  margin: 20% auto;
  padding: 0 10%;
  max-width: 1440px;
}

.news-area .section-heading {
  margin-bottom: -150px;
}

.news-area ul {
  width: 100%;
  gap: 9%;
}

.news-area ul li {
  width: 285px;
}

.news-area ul li a {
  gap: 20px;
}

.news-area ul li a .news-date {
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
}

.news-area ul li:nth-child(2) {
  margin-top: 200px;
}

.news-area ul li:nth-child(3) {
  margin-top: 400px;
}


.news-area ul li .news-img-wrap {
  position: relative;
  overflow: hidden;
}

.news-area ul li .news-img-wrap img {
  position: static;
  width: 100%;
  height: 100%;
  max-width: 500px;
  object-fit: cover;
  transition-duration: 0.5s;
}

.news-area ul li .news-img-wrap img:hover {
  transform: scale(1.1, 1.1);
  opacity: 0.8;
}


/* ====================
   access
==================== */
.access-area {
  padding: 0 6%;
  display: flex;
  justify-content: flex-end;
}

.access-area .section-heading {
  margin-bottom: 13%;
}

.access-area-left {
  /* width: 40%; */
  align-self: end;
  margin-bottom: -210px;
  padding-left: 10%;
}

.access-area-right {
  width: 60%;
  margin-left: auto;
}

.access-area-right img {
  position: static;
  width: 100%;
  height: 100%;
}

.access-area .info-item {
  line-height: 3.5;
  font-size: clamp(12px, calc(7.5px + 0.6vw), 16px);
}

.access-area .info-item .info:nth-child(3) .detail {
  line-height: 2;
}

.access-area .label {
  display: inline-block;
  width: 83px;
  text-align: right;
  margin-right: 15px;
}

.access-area .more-btn {
  text-align: center;
  margin: 5% 0 0 7%;
}

.access-area .info-container .info-item .info:nth-child(3) {
  justify-content: flex-start;
  align-items: baseline;
  margin-left: 4px;
}

.access-area-wrap {
  position: relative;
}

.access-area-left {
  position: absolute;
  bottom: 0;
  left: 0;
}


/* ====================
   footer
==================== */

.scroll03 {
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.scroll03::after {
  content: '';
  display: inline-block;
  position: absolute;
  background-color: #cca03e;
  right: 50%;
  bottom: -115px;
  width: 1px;
  height: 200px;
  animation: scroll03 2.5s infinite;
}

@keyframes scroll03 {
  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%;
  }
}

.footer-catchcopy {
  width: 50%;
  padding: 25% 5%;
  margin-left: auto;
}

footer {
  position: relative;
  height: 500px;
  padding-top: 3%;
  background: rgb(243, 211, 171);
  background: linear-gradient(0deg, rgba(243, 211, 171, 1) 0%, rgba(198, 199, 198, 1) 20%, rgba(151, 157, 195, 1) 40%, rgba(118, 134, 169, 1) 65%, rgba(118, 134, 169, 1) 100%);
  color: #09083d;
  /* border-top-left-radius: 1000px 200px; */
  /* border-top-right-radius: 1000px 200px; */
}

footer span,
footer address {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(12px, calc(7.5px + 0.6vw), 16px);
}

footer nav {
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
  font-weight: 300;
  font-style: normal;
}

footer a {
  color: #09083d;
}

footer hr {
  height: 1px;
  width: 300px;
  background-color: #09083d;
  border: none;
}

footer .footer-logo {
  width: 60px;
}

footer .insta-icon,
footer .X-icon {
  width: 25px;
}

footer .map-pin {
  width: 20px;
}

footer .footer-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin: 100px auto; */
  max-width: 1440px;
}

footer .footer-left {
  display: flex;
  gap: 18%;
  margin-top: 100px;
  margin-left: 8%;
}

footer .footer-left .flex02 {
  justify-content: end;
}

footer .label {
  display: inline-block;
  width: 83px;
  text-align: right;
  margin-right: 1em;
}

footer .footer-left-info {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

footer address span,
footer .info-item .info:nth-child(1) {
  display: inline-block;
  margin-bottom: 8px;
}

footer .footer-right {
  position: absolute;
  bottom: 20%;
  right: 10%;
}

footer .footer-right .icon {
  gap: 25px;
  margin-bottom: 40px;
}

footer .footer-right ul:nth-child(1) {
  font-size: 22px;
}

footer .footer-right ul {
  gap: 8%;
}

footer .footer-right hr {
  margin: 14px 0;
}

footer .copyright {
  margin-top: 5px;
  line-height: 1;
}