@charset "UTF-8";
/*フッターを稼働させるために必要*/
#header {
  display: none; }

.headerMa {
  display: none; }

html {
  scroll-behavior: smooth;
  background: #000; }

body {
  font-family: "Montserrat", sans-serif !important;
  font-style: normal;
  overflow-x: visible; }

header.sp_menu {
  display: none; }

.sp_menu_logo {
  display: none; }

/* ローダー全体 */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* 通常ブラウザ用 */
  background: #000;
  /* 背景色 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  color: #c5ff36;
  font-family: sans-serif;
  transition: transform 1s ease, opacity 1s cubic-bezier(0.59, 0.14, 0.75, 0.53);
  opacity: 1;
  /* 初期は表示 */
  padding-top: env(safe-area-inset-top);
  /* safariの上下メニュー部分の隙間をなくすのに必要*/
  padding-bottom: env(safe-area-inset-bottom); }

#loader img {
  width: 20%;
  margin: 0 0 3% 0; }

#loader svg {
  width: 20%;
  height: auto;
  margin-bottom: 0%; }

/* バーの外枠 */
.loader-content {
  width: 60%;
  max-width: 800px;
  text-align: center; }

/* プログレスバー */
#progress-bar {
  width: 0%;
  height: 1px;
  background: #c5ff36;
  transition: width 0.2s ease;
  margin-bottom: 20px; }

/* 数字 */
#progress-text {
  font-size: 14px;
  font-weight: bold;
  color: #c5ff36; }

/* 完了時に上へスライド＋フェードアウト */
#loader.slide-up {
  transform: translateY(-100%);
  opacity: 0; }

/******* ヘッダーのスタイル ********/
header {
  position: fixed;
  width: 50%;
  height: 60px;
  background: none;
  padding: 20px 60px;
  box-sizing: border-box;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  display: flex;
  justify-content: space-between;
  z-index: 9999;
  font-size: calc(100vw / 120);
  text-align: center;
  mix-blend-mode: difference !important; }

header .nav .menu {
  display: flex; }

header div {
  width: 33%; }

header a {
  color: #fff;
  font-weight: 600;
  scroll-behavior: smooth; }

header img {
  width: 75%; }

.c-txt.line {
  padding-bottom: 5px;
  position: relative; }

.c-txt.line::before {
  background: #c5ff36;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: 0.5s cubic-bezier(0.5, 1, 0.89, 1); }

.c-txt.line:hover::before {
  transform-origin: left top;
  transform: scale(1, 1); }

.c-txt.line.dark-mode::before {
  background: #2c2b2b; }

.video-wrapper {
  position: relative;
  height: 0vh; }

.parallax-bg {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden; }

video {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 177.77777778vh;
  height: 56.25vw;
  min-height: 100%;
  min-width: 100%; }

.logo_wrap {
  text-align: center;
  width: 100vw;
  margin: 45vh auto 45vh auto;
  mix-blend-mode: difference; }

img#logo_under {
  margin: 2% 0 0 0; }

img#logo_top {
  width: 30vw; }

img#logo_under {
  width: 15vw;
  display: block;
  margin: 1% auto 0 auto; }

#logo_top,
#logo_under {
  position: relative;
  transition: transform 0.8s ease, opacity 0.8s ease; }

/* フェードアウト用クラス */
.fade-out-right {
  transform: translateX(-500px);
  opacity: 0; }

.fade-out-left {
  transform: translateX(500px);
  opacity: 0; }

#concept {
  width: 100%;
  height: 80vh;
  overflow: hidden;
  padding: 0% 0%;
  background: #fff;
  position: relative;
  opacity: 0;
  transform: translateY(50px);
  /* 下から少し持ち上がる */
  transition: opacity 1.2s ease, transform 1.2s ease; }

#concept img {
  width: 100%; }

div#coneept_text {
  position: absolute;
  z-index: 9999;
  border: 0px solid red;
  left: 65%;
  top: 25%;
  color: #2c2b2b; }

#concept h2 {
  font-size: calc(100vw / 120);
  font-weight: 400;
  line-height: 240%;
  /*font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";*/
  font-feature-settings: "palt";
  font-family: "Noto Sans JP", sans-serif; }

#concept.show {
  opacity: 1;
  transform: translateY(0); }

img.thumbnail {
  max-width: none !important; }

section#new_arrivals {
  width: 100%;
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
  padding: 3% 1% 5% 1%; }

section#new_arrivals h2 {
  font-size: 150%; }

div#new_item_wrap {
  display: flex;
  flex-wrap: wrap; }

.new_item {
  width: 20%;
  padding: 0 5px 3% 0;
  display: inline-block; }

.new_item img {
  padding: 20% 0%; }

.image {
  overflow: hidden;
  padding: 5% 0;
  border: 0px solid #b7b7b7;
  background: #fff; }

.image div {
  transition: all .3s ease-in-out; }

.image img {
  width: 100%;
  vertical-align: middle; }

.image div:hover {
  transform: scale(1.1); }

figure.image:hover img {
  transform: scale(1.1); }

p.name {
  margin: 3% 0 0 0; }

p.kakaku {
  font-size: 90%;
  margin: 4% 0 0 0; }

figure.image:hover {
  border: 0px solid #c5ff36; }

figure.image:hover + .info p {
  color: #ADF400; }

.thmbnail_wrap {
  position: relative; }

/*.hover_images {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: #f2f2f2;
    z-index: 10;
    white-space: nowrap;
    width: 100%;
}*/
.hover_images {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease, visibility 0.5s ease; }

.hover_images img {
  width: 20%;
  padding: 0;
  border: 1px solid #f2f2f2; }

.new_item:hover .hover_images {
  opacity: 1;
  visibility: visible;
  z-index: 9; }

.info {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 1; }

.new_item:hover .info {
  z-index: -1; }

#new_arrivals picture {
  display: initial; }

section#category {
  background: #000;
  padding: 5% 0 6% 0;
  text-align: center;
  max-width: 100vw;
  overflow-x: hidden; }

section#category h2 {
  color: #fff;
  font-size: 250%;
  margin: 0 0 1% 0;
  letter-spacing: 7px; }

div#category_wrap {
  display: flex;
  flex-direction: column;
  align-items: center; }

section#category a {
  color: #fff;
  font-size: 150%;
  font-weight: bold;
  width: fit-content;
  z-index: 1;
  margin: 0 0 0.5% 0;
  letter-spacing: 7px; }

section#category a:hover,
section#category a:hover span.itemcouter {
  color: #000; }

span.itemcouter {
  color: #fff;
  font-size: 60%;
  letter-spacing: 3px; }

span.itemcouter:before {
  content: "〔";
  letter-spacing: 3px; }

span.itemcouter:after {
  content: "〕"; }

.c-txt2.line2 {
  padding-bottom: 0px;
  position: relative; }

.c-txt2.line2::before {
  background: #c5ff36;
  content: '';
  width: 120%;
  height: -webkit-fill-available;
  position: absolute;
  left: -10%;
  bottom: 0%;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: 0.5s cubic-bezier(0.5, 1, 0.89, 1);
  z-index: -1; }

.c-txt2.line2:hover::before {
  transform-origin: left top;
  transform: scale(1, 1); }

.c-txt2.line2.dark-mode::before {
  background: #2c2b2b; }

section#collection {
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  text-align: center; }

section#collection div {
  width: 50%; }

#top_font,
#under_font {
  display: block;
  /* 縦並びにする */
  margin: 0 auto;
  /* 中央寄せ */
  font-family: "Montserrat", sans-serif !important;
  font-weight: bold;
  line-height: 100%; }

section#collection .heading #top_font {
  font-size: 3vw;
  letter-spacing: 8px;
  padding: 0px 0px 0 1%; }

section#collection .heading #under_font {
  font-size: 1.5vw;
  /* COLLECTION のサイズ */ }

.heading {
  text-align: center;
  display: inline-block;
  cursor: pointer; }

section#collection p {
  /* background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
   background-image: linear-gradient(60deg,rgba(0, 0, 0, 1) 30%, rgba(197, 255, 54, 1) 50%, rgba(0, 0, 0, 1) 70%);
   background-size: 200%;
   animation: gradation 5s infinite linear;*/ }

@keyframes gradation {
  0% {
    background-position: 0% 0%; }
  50% {
    background-position: 100% 0%; }
  100% {
    background-position: 0% 0%; } }
/* 通常色 */
#collection a p.anim_text {
  transition: color 0.3s ease; }

/* aタグにhoverした時だけ、子の両方に色を反映 */
#collection a:hover p.anim_text {
  color: #c5ff36; }

#collection .collectionImg {
  width: 100%;
  overflow: hidden; }

#collection .collectionImg a {
  display: block;
  transition: all .3s ease-in-out; }

#collection .collectionImg img {
  width: 100%;
  vertical-align: middle; }

#collection .collectionImg a:hover {
  transform: scale(1.1); }

.heading:hover + .coll_img a {
  transform: scale(1.1); }

/* JSでクラス付与したときのスタイル */
.hovered-text a p.anim_text {
  color: #c5ff36 !important; }

.hovered-img a {
  transform: scale(1.1); }

section#catalog {
  width: 100vw;
  padding: 7% 0 15% 0;
  background: #000;
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow: hidden; }

section#catalog img {
  width: 100%; }

section#catalog h2 {
  font-size: 300%;
  color: #fff;
  padding: 0% 0 5% 0; }

div#card_area {
  display: flex;
  height: inherit;
  width: 100vw;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center; }

.btn_box {
  width: 20%;
  margin: 0 5%; }

.btn {
  color: #c5ff36;
  font-size: 600%;
  display: block;
  border-radius: 20px;
  border: 0px solid #c5ff36;
  box-shadow: 0 0 5px #c5ff36, inset 0 0 0px #c5ff36, 0 0 0px #c5ff36, 0 0 0px #c5ff36, 0 0 0px #c5ff36, 0 0 20px #c5ff36, 0 0 40px #c5ff36, inset 0 0 0px #c5ff36;
  position: relative; }

.btn:before {
  content: "";
  position: absolute;
  background: #c5ff36;
  top: 98%;
  left: 0;
  width: 100%;
  height: 30%;
  transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
  filter: blur(1em);
  opacity: 0.6; }

.btn:hover {
  box-shadow: 0 0 2px #c5ff36, inset 0 0 0px #c5ff36, 0 0 0px #c5ff36, 0 0 0px #c5ff36, 0 0 0px #c5ff36, 0 0 20px #c5ff36, 0 0 20px #c5ff36, inset 0 0 0px #c5ff36; }

.btn:hover:before {
  opacity: 0.3; }

/*アニメーション*/
.animation,
.animation:before {
  transition: all 0.3s ease; }

.btn_box p {
  color: #fff;
  padding: 4% 0 0 0;
  font-size: 150%;
  letter-spacing: 5px; }

section#insta {
  padding: 15% 0 20% 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }

.insta_head_wrap {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 3% 0 0 0;
  transition: width 0.3s ease;
  width: 100%; }

.insta_head_wrap a {
  display: flex;
  width: 35%; }

.insta_head {
  width: 50%; }

.insta_head h1 {
  font-size: 300%;
  transition: width 0.3s ease;
  color: #fff; }

.insta_head {
  width: 50%; }

.insta_caption p {
  font-size: 180%;
  color: #fff;
  margin: 5% 0 0 0; }

.insta_head .arrow {
  position: relative;
  display: inline-block;
  width: 65%;
  height: 1px;
  background-color: #fff;
  margin: 0 0 15px 0;
  transition: width 0.3s ease; }

.insta_head .arrow::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 20px;
  height: 1px;
  border-radius: 9999px;
  background-color: #fff;
  transform: rotate(45deg);
  transform-origin: calc(100% - 0.5px) 50%; }

.insta_head_wrap:hover .insta_caption p,
.insta_head_wrap:hover .insta_head h1 {
  color: #c5ff36; }

.insta_head_wrap:hover .arrow {
  width: 95%;
  background-color: #c5ff36; }

.insta_head_wrap:hover .insta_head .arrow::before {
  background-color: #c5ff36; }

.photo_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 10%;
  /* background: aliceblue; */
  width: 80%; }

.instagram-wrapper {
  display: block;
  width: 400px;
  aspect-ratio: 1 / 1;
  overflow: hidden; }

.instagram-wrapper iframe {
  transform: scale(1.25);
  position: absolute;
  top: -100px; }

@media (min-width: 1600px) and (max-width: 2000px) {
  .photo_area {
    padding: 0 10%;
    width: 100%; } }
@media (min-width: 1200px) and (max-width: 1600px) {
  .photo_area {
    padding: 0 0%;
    width: 100%; } }
/* スマホ基準（360〜430px） */
@media (max-width: 480px) {
  html {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; }

  a {
    scroll-behavior: smooth; }

  header#pc_menu {
    display: none; }

  .sp_menu_logo {
    display: block;
    position: fixed;
    top: 0;
    width: 40%;
    padding: 5% 0 0 5%;
    mix-blend-mode: difference;
    z-index: 9999; }

  header {
    padding: 0;
    width: 100%; }

  header div {
    width: 100%; }

  .sp_menu {
    display: block !important;
    /* height: fit-content; */
    /* background-color: white; */
    /* width: 100%; */
    z-index: 1000;
    mix-blend-mode: initial !important; }

  .header-inner {
    padding: 0 0%; }

  /* ---------------------------------------------- */
  /* ハンバーガーメニュー */
  /* ------------------------- */
  #header-hamburger {
    /* 見た目のCSS */
    /* background: #6faa3c;*/
    cursor: pointer;
    width: 50px;
    aspect-ratio: 1/1;
    margin-left: auto;
    /* ボタンがハンバーガーウィンドウの下に隠れないようにする指定 */
    position: relative;
    z-index: 10; }

  /* ----------------- */
  /* 三本線 */
  /* ----------------- */
  #header-hamburger span {
    /* 見た目のCSS */
    display: inline-block;
    background: #323232;
    width: 50%;
    height: 2px;
    /* バーガー線の太さ */
    /*アニメーションの設定*/
    transition: all .4s;
    position: absolute;
    left: 50%;
    /* バーガー線の位置 */
    transform: translateX(-50%); }

  /* １本目 */
  /* ２本目 */
  /* ３本目 */
  #header-hamburger span:nth-of-type(1) {
    top: 30%; }

  #header-hamburger span:nth-of-type(2) {
    top: 50%; }

  #header-hamburger span:nth-of-type(3) {
    top: 70%; }

  /*activeクラスが付与されると線が回転して×になる*/
  #header-hamburger.active span:nth-of-type(1) {
    top: 50%;
    left: 25%;
    transform: rotate(-45deg);
    width: 50%; }

  #header-hamburger.active span:nth-of-type(2) {
    opacity: 0; }

  #header-hamburger.active span:nth-of-type(3) {
    top: 50%;
    left: 25%;
    transform: rotate(45deg);
    width: 50%; }

  /* ----------------------------------------------- */
  /* メニューウィンドウ */
  /* -------------------------- */
  ul.hamburger-window__nav-list {
    background: rgba(255, 255, 255, 0.9);
    font-size: 450%; }

  #hamburger-window {
    transition: 0.3s;
    text-align: center;
    /* 初期状態は非表示 */
    visibility: hidden;
    position: fixed;
    top: 50px;
    right: -100vw;
    z-index: 1;
    /* 画面いっぱいに表示されるサイズに設定 */
    width: 100%;
    height: 100vh;
    /* 画面からはみ出したらスクロール可能にする */
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none; }

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

  #hamburger-window.open {
    visibility: visible;
    right: 0; }

  .hamburger-window__link {
    display: block;
    margin: 0 auto;
    width: 100%; }

  .hamburger-window__link p {
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px; }

  .hamburger-window__link:first-child .acordion-btn {
    border-top: 1px solid #ccc; }

  /* ----------------------------------
  アコーディオン部分
  --------------------- */
  .acordion-menu-wrapper {
    width: 100%; }

  .acordion-btn {
    display: flex;
    align-items: center;
    padding-left: 5%; }

  .acordion-btn::after {
    /* fontawesomeアイコンを表示 */
    content: '+';
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    display: inline-block;
    position: absolute;
    right: 5%;
    width: 10px;
    aspect-ratio: 1/1;
    color: #333; }

  .acordion-btn.is-open::after {
    /* fontawesomeアイコンを表示 */
    content: '-'; }

  .hamburger-window__link {
    border-top: 1px solid #ccc; }

  .hamburger-window__title,
  .hamburger-window__link > a {
    color: #333; }

  .hamburger-window__link > a {
    display: block;
    text-align: left;
    padding-left: 5%;
    position: relative; }

  .acordion > .acordion__item {
    position: relative;
    text-align: left;
    width: 100%;
    /*background-color: #fff;*/
    /* 閉じている状態 */
    border-top: 0 #ccc solid;
    line-height: 0;
    /* 閉じるアニメーション */
    transition: border-top 0.1s ease-out; }

  .acordion.is-open > .acordion__item {
    /*background-color: #fff;*/
    /* 開いている状態 */
    border-top: 1px #ccc solid;
    /* 開くアニメーション */
    transition: border-top 0.1s ease-out; }

  .acordion.is-open > .acordion__item:first-child {
    border-top: none; }

  .acordion > .acordion__item > .acordion__link {
    color: #333;
    display: block;
    padding-left: 7%;
    /* 閉じている状態 */
    padding-top: 0;
    padding-bottom: 0;
    line-height: 0;
    opacity: 0;
    visibility: hidden;
    /* 閉じるアニメーション */
    transition: padding-top .3s ease-out, padding-bottom .3s ease-out, line-height .3s ease-out, opacity .1s linear, visibility .1s linear; }

  .acordion.is-open > .acordion__item > .acordion__link {
    display: block;
    font-weight: 500;
    padding: 2% 0 2% 10%;
    line-height: 1.5;
    opacity: 1;
    visibility: visible;
    /* 開くアニメーション */
    transition: padding-top .3s ease-out, padding-bottom .3s ease-out, line-height .3s ease-out, opacity .1s linear, visibility .1s linear; }

  a.acordion-btn.is-open {
    border-bottom: 1px #ccc solid; }

  #loader svg {
    width: 40%; }

  .logo_wrap {
    width: 100vw;
    overflow-x: hidden; }

  .logo_wrap {
    transform: scale(1); }

  img#logo_top {
    width: 50%; }

  img#logo_under {
    width: 25%;
    display: block;
    margin: 2% auto 0 auto; }

  #concept {
    height: auto;
    max-width: 300%; }

  div#coneept_text {
    left: 20%;
    top: 20%;
    mix-blend-mode: difference; }

  #concept h2 {
    font-size: calc(100vw / 30);
    color: #ffffff !important; }

  #concept img {
    width: 300%;
    max-width: 300%;
    margin: 0 0 0 -30%; }

  section#new_arrivals {
    padding: 15% 2% 15% 2%; }

  .new_item {
    width: 50%;
    padding: 0 1% 23% 1%; }

  .info {
    font-size: 60%;
    top: 100%; }

  .hover_images,
  .info {
    opacity: 1;
    visibility: visible; }

  .new_item:hover .info {
    z-index: 1; }

  section#category {
    padding: 15% 0 15% 0; }

  div#category_wrap {
    font-size: 60%; }

  section#category h2 {
    font-size: 200%; }

  section#category a {
    margin: 0 0 3.5% 0; }

  /*.c-txt2.line2::before {
      background: #000000;
      width: 0%;
  }
   section#category a:hover, section#category a:hover span.itemcouter {
      color: $ye;
  }  */
  .c-txt2.line2::before {
    height: 25px; }

  section#collection {
    flex-direction: column-reverse;
    padding: 20% 5% 30% 5%; }

  section#collection div {
    width: 100%; }

  .coll_img.hovered-img {
    margin: 15% 0 0 0; }

  section#collection .heading #top_font {
    font-size: 10vw;
    letter-spacing: 2px;
    padding: 0px 0px 0 1%; }

  section#collection .heading #under_font {
    font-size: 5vw; }

  section#catalog {
    padding: 20% 0 5% 0; }

  section#catalog h2 {
    font-size: 200%;
    padding: 0% 0 15% 0; }

  div#card_area {
    flex-direction: column; }

  .btn_box {
    width: 60%;
    margin: 0 0px 40% 0; }

  .photo_area {
    padding: 0px 0%;
    width: 100%; }

  .instagram-wrapper {
    width: 40vw; }

  .insta_head_wrap a {
    width: 100%;
    padding: 0 0 0 15%; }

  .insta_head .arrow {
    width: 75%; }

  .insta_head h1 {
    font-size: 170%; }

  .insta_caption p {
    font-size: 100%; } }
/*///////////////////////////////////////////////////// SP end */
/* タブレット横 / 小型PC */
@media (min-width: 768px) and (max-width: 1034px) {
  html {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; }

  a {
    scroll-behavior: smooth; }

  header {
    width: 80%;
    font-size: calc(100vw / 70); }

  .logo_wrap {
    width: 100vw;
    overflow-x: hidden; }

  .logo_wrap {
    transform: scale(1); }

  img#logo_top {
    width: 50%; }

  img#logo_under {
    width: 25%;
    display: block;
    margin: 2% auto 0 auto; }

  #concept {
    height: 65vh; }

  div#coneept_text {
    left: 30%;
    top: 20%;
    mix-blend-mode: difference; }

  #concept h2 {
    font-size: calc(100vw / 50);
    font-weight: 800;
    color: #fff; }

  img.thumbnail {
    width: 220% !important;
    max-width: 220% !important;
    margin: 0 0 0 -20%; }

  .new_item {
    width: 33%; }

  .c-txt2.line2::before {
    height: 40px; }

  .btn_box {
    width: 50%; }

  .photo_area {
    padding: 0 0%;
    width: 100%; }

  .instagram-wrapper {
    width: 250px; }

  .insta_head_wrap a {
    width: 75%; } }
/*///////////////////////////////////////////////////// タブレット end */
/* タブレット縦 */
@media (min-width: 481px) and (max-width: 767px) {
  /* 小型タブレット・横向きスマホ */ }