/** Shopify CDN: Minification failed

Line 16:8 Unexpected "<"

**/
@charset "utf-8";
/* CSS Document */

/* ====== 既存スタイル（元ファイルの内容をベースにしつつ追記） ====== */
body {
  margin: 0;
  padding: 0;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Helvetica, "sans-serif";
}

.outfit-<uniquifier> {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

#splash {
  position: fixed;
  top: -5%;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  animation: splashAnim 2.5s forwards;
}

#splash img{ width: 40vw; }
@media (min-width: 768px) { #splash img{ width: 15vw; } }

@keyframes splashAnim {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

.fade-items { position: relative; width: 100%; max-width: 100%; overflow: hidden; }
.slide { height: 100%; }
.slide a { display: block; width: 100%; height: 100%; text-decoration: none; color: black; }
.slide img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateX(30px);
  transition: opacity 0.7s ease, transform 0.7s ease; display: block;
}
.slick-active img { opacity: 1; transform: translateX(0); }
.slide p { display: none; }

/* ドットインジケーター */
.slick-dots {
  position: absolute !important;
  bottom: 0; left: 50%; transform: translateX(-50%);
  display: flex !important; justify-content: center; align-items: center; gap: 40px; z-index: 2;
}
.slick-dots li { margin: 0; padding: 0; list-style: none; }
.slick-dots li button {
  position: relative; display: block; width: 50px; height: 8px; background: rgba(100, 100, 100, 0.5);
  border: none; cursor: pointer; padding: 0; overflow: hidden; opacity: 0.6;
}
.slick-dots li.slick-active button { opacity: 1; }
.slick-dots li button::after {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; background: #333; width: 0%; transition: width 0s;
}
.slick-dots li button.progressing::after { transition: width 2.5s linear; width: 100%; }
.slick-dots li button:before { content: none !important; }

/* スライド内リンクがクリックできない問題対策 */
.slick-slide { pointer-events: none; }
.slick-current { pointer-events: auto; }
.slick-dotted.slick-slider{ margin-bottom: 0px; }

/* ====== ハンバーガー ====== */
#nav_toggle { position: absolute; top: 1em; right: 1em; z-index: 20; }
#nav_toggle div { position: relative; display: block; top: 4px; width: 28px; height: 28px; z-index: 100; }
#nav_toggle span { position: absolute; display: block; width: 100%; height: 3px; background: #000; transition: 0.5s ease-in-out; }
#nav_toggle span:nth-child(1) { top:0px; }
#nav_toggle span:nth-child(2) { top:12px; }
.open #nav_toggle span:nth-child(1) { top: 6px; transform: rotate(135deg); background: #fff; }
.open #nav_toggle span:nth-child(2) { top: 6px; transform: rotate(-135deg); background: #fff; }

/* ====== ナビ本体 ====== */
nav {
  position: absolute;
  padding: 3%;
  width: 94%;
  opacity: 0;
  z-index: 0;
  transform: scale(0.85);
  transition: 0.5s;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.add_nav { display: block; opacity: 1; z-index: 10; transform: scale(1); transition: 0.5s; pointer-events: auto; }

/* ルートメニュー */
nav ul { list-style-type: none; padding: 1em 0 0 0; margin: 0; }
nav ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.15); position: relative; }
nav ul li:last-child { border: none; }
nav ul li a {
  padding: 1em 0; display: block; text-decoration: none; font-size: 1.250em;
  font-weight: 300; color: #fff; transition: 0.5s;
}
nav ul li a:hover { padding: 1.0em 1.0em; opacity: 0.5; transition: 0.5s; }

/* ====== サブメニュー（右からスライド） ====== */
nav li.has-sub { overflow: hidden; } /* コンテナの外に出ないように */
nav li.has-sub > .submenu {
  position: absolute;
  top: 0;
  left: 100%; /* ルート項目の右側から開始 */
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  transform: translateX(0); /* オフセットの基準 */
  translate: 0 0; /* for compatibility */
  transition: transform 0.35s ease;
  display: block;
  pointer-events: none;
  opacity: 0;
}

/* 開いたときに、右からフルオーバーレイのように見せる */
nav li.has-sub.submenu-open > .submenu {
  transform: translateX(-100%); /* 左へ100%動かして、ちょうど親liを覆う */
  pointer-events: auto;
  opacity: 1;
}

/* サブメニュー内の見た目 */
nav li.has-sub > .submenu li { border-bottom: 1px solid rgba(255,255,255,0.15); }
nav li.has-sub > .submenu li a {
  color: #fff;
  padding: 1em 0;
  display: block;
  font-size: 1.1em;
}
nav li.has-sub > .submenu li:last-child { border: none; }

/* サブメニュー上部のヘッダー行（戻る） */
.submenu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.75em 0;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.submenu-header span {
  color: #fff;
  font-size: 1.0em;
  opacity: 0.9;
}
.submenu-back {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.7);
  color: #fff;
  padding: 0.4em 0.75em;
  font-size: 0.95em;
  border-radius: 6px;
}

/* ====== ヘッダー固定表示 ====== */
#head_menu{
  position: fixed; top: 0; left: 0; width: 100%;
  margin: 0; padding: 0; z-index: 20;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0); /* 常に独立レイヤー化 */
  
  /*スクロールしたらヘッドメニューが表示（200）*/
  transform: translateY(-100%); transition: transform 0.3s ease;


  
}
#head_menu.show { transform: translateY(0); }

.head_logo{ width: 35vw; padding: 0.5em 0 0 0.5em; }
@media (min-width: 768px) { .head_logo{ width: 15vw; } }
.head_logo img{ width: 100%; }
.icon_favorite{ width: 30px; height: 32px; position: absolute; top: 12px; right: 100px; }
.icon_bag{ width: 30px; height: 32px; position: absolute; top: 12px; right: 58px; }

.container { position: relative; background: #fff; }
#content { opacity: 0; transition: opacity 1s ease; }
#content.visible { opacity: 1; }
.add_container { filter: blur(8px); transition: 0.5s; }

.main_logo{ width: 40%; margin: 0 auto; padding: 70vw 0 70vw; }
@media (min-width: 768px) {.main_logo{ width: 15%; padding: 22vw 0 22vw; } }
.main_logo img{ width: 100%; }

.theme_wrap{ margin-top: 10vw; width: 100%; }
.section_head{ text-align: center; font-size: 1.1em; margin: 5vw 0 0; padding: 2vw; font-family: impact , "Anton"; letter-spacing: 0.01em; }
@media (min-width: 768px) { .section_head{ font-size: 1.8em; } }
p.sub_theme{ text-align: center; margin:0; font-family: impact , "Anton"; letter-spacing: 0.01em; font-size: 0.8em; padding-top: 0.2em;}
@media (min-width: 768px) { p.sub_theme{ font-size: 1.2em; } }
.grid { display: grid; grid-template-columns: 1fr 1fr; width: 100%; column-gap: 1px; }
.grid .cell { width: 100%; }
.grid img { width: 100%; object-fit: cover; display: block; }

.category_bt_wrapper {
  width: 900px;
  margin: 4em auto 4em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em 6em;
}
.bar a{
  display: flex;
  width: 100%;
  height: 2em;
  background: #000;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  letter-spacing: 0.6px;
  user-select: none;
  font-family: impact , "Anton";
  letter-spacing: 0.01em;
  text-decoration: none;
}
@media (max-width: 768px) {
  .category_bt_wrapper {
    width: 90%;
    margin: 3em auto 5em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em 1em;
    padding: 0 5%;
  }
  .bar a{
    width: 100%;
    font-size: 13px;
  }
}

.about_nostalvia{ width: 80%; margin: 0 auto; font-size: 0.9em; }
@media (min-width: 768px) { .about_nostalvia{ width: 900px; } }
.read-more-button {
  display: none; text-align: center; width: 40vw; margin: 5% auto; padding: 2%;
  border: 2px solid #000; color: #000; font-size: 0.8em; font-weight: bold; letter-spacing: 4px;
  text-transform: uppercase; text-decoration: none; transition: background-color 0.3s, color 0.3s;
  overflow: hidden; white-space: nowrap;
}
@media (min-width: 768px) { .read-more-button{ width: 20vw; } }

.terms_of_service{ clear: both; text-align: center; padding: 8vw 0 8vw; margin-top: 8vw; }
.terms_of_service div{ padding: 2vw 0 0; }
.terms_of_service a{ text-decoration: none; color: #000000; font-size: 0.9em; }


/* == added for slide-left root & slide-in-right sub == */
/* ==== 2枚パネルでの横スライドアニメーション ==== */
nav {
  position: absolute;
  padding: 0;           /* パネルが全面を使うため0に */
  width: 100%;
  opacity: 0;
  z-index: 0;
  transform: scale(0.85);
  transition: 0.5s;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.add_nav { display: block; opacity: 1; z-index: 10; transform: scale(1); transition: 0.5s; pointer-events: auto; }

.menu-frame{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 60vh; /* メニュー面積を確保。必要に応じて調整 */
  overflow: hidden;
  padding: 3%;
}

/* 2枚のパネル */
.panel{
  position: absolute;
  top: 0;
  left: 0;
  width: 94%;
  height: 100%;
  padding: 1em 0 0 0;
  transition: transform 0.35s ease;
  font-family: impact , "Anton";
}

/* ルート（初期: 0, サブ表示時: -100% 左へ） */
.panel-root{
  transform: translateX(0%);
}
.add_nav.view-sub .panel-root{
  transform: translateX(-100%);
}

/* サブ（初期: +100% 右、サブ表示時: 0） */
.panel-sub{
  background: rgba(0,0,0,0.01);
  transform: translateX(100%);
  padding-left: 1em;
}
.add_nav.view-sub .panel-sub{
  transform: translateX(0%);
}

/* ルートリストのスタイル（既存を踏襲） */
.root-menu{ list-style: none; margin: 0; padding: 1em 0 0 1em; }
.root-menu > li{ border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.root-menu > li:last-child{ border: none; }
.root-menu > li > a{
  padding: 1em 0; display: block; text-decoration: none; font-size: 1.250em;
  font-weight: 300; color: #fff; transition: 0.5s;
}
.root-menu > li > a:hover{ padding: 1.0em 1.0em; opacity: 0.5; transition: 0.5s; }

/* サブメニューの見た目 */
.submenu-header{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.75em 0;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.submenu-title{ color: #fff; font-size: 1.0em; opacity: 0.9; }
.submenu-back{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.7);
  color: #fff;
  padding: 0.4em 0.75em;
  font-size: 0.95em;
  border-radius: 6px;
}
.subwrap{ list-style: none; margin: 0; padding: 0; }
.subwrap li{ border-bottom: 1px solid rgba(255,255,255,0.15); }
.subwrap li:last-child{ border: none; }
.subwrap a{ color: #fff; padding: 1em 0; display: block; font-size: 1.1em; text-decoration: none; }

/* テンプレートは画面に出さない */
.submenu-template{ display: none; }