/* =====================================================
   Reset / Scroll
===================================================== */
html, body { 
margin: 0; 
overflow-x: hidden;
}

/* 1本スクロール＆横はみ出しの安定抑制 */
html{
  overflow-x: clip;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}
body { overflow: visible; }

/* =====================================================
   Gate（初回スクロールまで main 以外を非表示）
===================================================== */
body.gate-closed { overflow-y: hidden; }
body.gate-closed #fit-screen > :not(#fit-root) { display: none; }
body.gate-closed .back-to-top,
body.gate-closed .jump-to-all { display: none; } /* 2箇所にあった重複を集約 */

/* =====================================================
   Layout Wrapper
===================================================== */
#fit-screen{
  --stack-gap: 16px;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: var(--stack-gap);
}
#fit-root{
  position: relative;
  width: var(--scaledW, 1200px);
  height: var(--scaledH, 800px);
  transform-origin: top center;
  margin-bottom: var(--stack-gap);
}

/* =====================================================
   Hero
===================================================== */
.container{
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  margin-bottom: 0;
  height: 300px;
}
.link-with-line{
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  cursor: pointer;
  color: #0f172a;
  margin-right: 50px;
}
.link-with-line a{
  font-family: "Yu Mincho", "Hiragino Mincho Pro", serif;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: rgba(100,100,100,1.00);
  text-decoration: none;
  font-size: 25px;
  font-weight: 300;
  letter-spacing: 0.2em;
  line-height: 1;
}
/* 線 */
.link-with-line .line{
  width: 1px;
  height: var(--base);
  color: rgba(100,100,100,1.00);
  background: currentColor;
  border-radius: 2px;
  transition: height .25s ease;
}
/* ホバー時 */
.link-with-line:hover[data-expanded="false"] .line{
  height: calc(var(--base) + 50px);
}
/* クリック時 */
.link-with-line[data-expanded="true"] .line{
  height: calc(var(--base) + 300px);
  transition: height .35s ease;
}

.container .logo { margin-left: 50px; }
.container .line1 { display: flex; align-items: flex-start; margin-left: 20px; }
.container .line2 { display: flex; align-items: center; margin-left: 80px; }
.container .line1 p,
.container .line2 p {
  font-family: "Yu Mincho", "Hiragino Mincho Pro", serif;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: rgba(100,100,100,1.00);
  font-size: 30px;
  font-weight: 550;
  letter-spacing: 0.3em;
  margin: 0;
}
.botom { display: flex; }
.top   { display: flex; }

/* =====================================================
   Entrance Animations
===================================================== */
body.preload .line1,
body.preload .line2,
body.preload .logo,
body.preload .botom .link-with-line .link,
body.preload .botom .link-with-line .line{
  opacity: 0;
  transform: translateY(-20px);
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(0); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-down { animation: fadeDown 1s ease forwards; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.slide-down { animation: slideDown .5s ease forwards; animation-delay: 0.1s; }

/* 丸の初回ペイント抑制と共通トランジション（重複統合） */
body.preload .orange,
body.preload .blue,
body.preload .red { opacity: 0; transform: translateY(-20px); }
.orange, .blue, .red {
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}

/* タイトル横の丸：ふわっと浮き出る（拡大＋ぼかし解除） */
.title-orange,
.title-red,
.title-blue{
  opacity: 0;
  transform: scale(.92);       /* ← ほんの少し小さく */
  filter: blur(6px);           /* ← ぼかして奥にある感じ */
  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.22,.61,.36,1),
    filter .6s ease;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  transform-origin: center;
}

.title-orange.is-visible,
.title-red.is-visible,
.title-blue.is-visible{
  opacity: 1;
  transform: scale(1);         /* ← 等倍に “ふわっ” と */
  filter: blur(0);             /* ← くっきり表示 */
}

/* 任意：少し待ってから浮き出す（遅延） */
.title-orange,
.title-red,
.title-blue{
  transition-delay: .5s;      /* ここで待ち時間を調整（例：.15s〜.5s） */
}

/* =====================================================
   Buttons
===================================================== */
.buttons {
  grid-column: 1 / -1;
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 100px;
}
.button {
  all: unset;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 20px;
  color: rgba(100,100,100,1.00);
  font-weight: 200;
  text-align: center;
  width: 120px;
  border: 1px solid rgba(100,100,100,1.00);
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 0.3s ease;
}
.button::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 100%;
  background: rgba(100,100,100,1.00);
  z-index: -1;
  transition: width 0.3s ease;
}
.button:hover { color: #fff; }
.button:hover::before { width: 100%; }

/* =====================================================
   Grid (Bottom)
===================================================== */
.all {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  gap: 20px;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
}
.product {
  width: 300px;
  height: 300px;
  background-color: rgba(100,100,100,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: opacity 0.3s ease;
}
/* 並び替え移動（FLIP） */
.all .product{
  transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
  will-change: transform, opacity;
}
.orange { position: absolute; top: -40%; right: 10%; mix-blend-mode: multiply; }
.blue   { position: absolute; left: 40%; bottom: 0%; mix-blend-mode: multiply; }
.red    { position: absolute; right: 0%; bottom: -5%; mix-blend-mode: multiply; }
.sp-space { display: none; }

/* =====================================================
   Scroll Reveal (product / title-area / thum-box)
===================================================== */
.product{
  --reveal-distance: 28px;
  --stagger: 0ms;
  opacity: 0;
  transform: translateY(var(--reveal-distance)) scale(0.98);
  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--stagger);
  will-change: transform, opacity;
}
.product.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* title-area */
.title-area{
  --reveal-distance: 28px;
  opacity: 0;
  transform: translateY(var(--reveal-distance)) scale(0.98);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 100px;
}
.title-area.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.title{
  font-family: "Yu Mincho", "Hiragino Mincho Pro", serif;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: rgba(100,100,100,1.00);
  text-decoration: none;
  font-size: 35px;
  font-weight: 300;
  letter-spacing: 0.2em;
  line-height: 1;
  display: inline-block;
  align-self: flex-start;
  border-right: 1px solid rgba(100,100,100,1.00);
  padding-right: 20px;
}
.lead{
  font-family: "Yu Mincho", "Hiragino Mincho Pro", serif;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: rgba(100,100,100,1.00);
  text-decoration: none;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.2em;
  line-height: 2;
}

/* Thumbnails area */
.thum-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    align-content: flex-start;
    height: 500px;
    margin-top: -70px;
}
.thum-box {
  width: 250px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: opacity 0.3s ease;
  margin: 0 20px 200px;
  --reveal-distance: 24px;
  opacity: 0;
  transform: translateY(var(--reveal-distance)) scale(0.98);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}
.thum-box.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Thumbnail parts */
.thum-photo {
  height: 250px;
  width: auto;
  object-fit: contain;
  -webkit-box-reflect: below -5px linear-gradient(transparent 50%, rgba(0,0,0,0.2) 100%);
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));
  transition: transform .3s ease;  /* 拡大アニメ用 */
}
.thum-link {
  writing-mode: vertical-rl;
  position: absolute;
  font-size: 18px;
  color: rgba(100,100,100,1);
  border: 1px solid rgba(100,100,100,1);
  padding: 5px 0;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  left: 15px;
  bottom: 5px;
  z-index: 0;
  overflow: hidden;
}
.thum-link::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0;
  background: rgba(100,100,100,1.00);
  z-index: -1;
  transition: height .3s ease;
}
.thum-link:hover{ color: #fff; }
.thum-link:hover::before{ height: 100%; }

/* 隣接/has() の両対応で拡大 */
.thum-link:hover + .thum-photo{ transform: scale(1.05); }
.thum-box:has(.thum-link:hover) .thum-photo{ transform: scale(1.05); }

.new {
    position: absolute;
    top: -30px;
    left: 5px;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: rgba(180,0,0,1.00);
    display: grid;
    place-items: center;
    text-align: center;
    color: rgba(255,255,255,1.00);
    font-family: "Times New Roman", Times, serif;
    font-weight: 400;
    font-size: 20px;
}

/* =====================================================
   Product Link (unified)
===================================================== */
.product-link {
  font-family: "Yu Mincho", "Hiragino Mincho Pro", serif;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: rgba(100,100,100,1.00);
  text-decoration: none;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 5px;
  overflow: hidden;
  transition: color 0.3s ease, background-color 0.3s ease;
  position: absolute;
  left: 0%;
  z-index: 0;
  background-color: rgba(255,255,255,0.80);
  bottom: 0%;
}
.product-link::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 0;
  background: rgba(100,100,100,0.10);
  z-index: -1;
  transition: height 0.3s ease;
}
.product-link:hover::before{ height: 100%; background: rgba(100,100,100,0.10); }
.product-link:hover + .photo{
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* タイトル／キャッチ／スペック等 */
.thum-title {
  font-family: "Yu Mincho", "Hiragino Mincho Pro", serif;
  writing-mode: vertical-rl;
  position: absolute;
  top: 520px;
  transform: translateY(-50%);
  z-index: 2;
  margin: 0;
  font-size: 30px;
  color: rgba(100,100,100,1);
  letter-spacing: .08em;
  white-space: normal;
  display: block;
  height: 500px;
  text-align: left;
}
.thum-catch{
  font-family: "Yu Mincho", "Hiragino Mincho Pro", serif;
  writing-mode: vertical-rl;
  text-orientation: upright;
  position: absolute;
  top: 250px;
  transform: translateY(-50%);
  z-index: 2;
  margin: 0;
  font-size: 18px;
  color: rgba(100,100,100,1);
  letter-spacing: .05em;
  white-space: normal;
  height: 500px;
  text-align: left;
  font-weight: 500;
  right: -10px;
}

/* 大きい商品表示（共通） */
.productname{
  font-family: "Yu Mincho", "Hiragino Mincho Pro", serif;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: rgba(255,255,255,1.00);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1;
  position: absolute;
  top: -1%;
  right: -13%;
}
.product-caption,
.product-caption-big{
  font-family: "Yu Mincho", "Hiragino Mincho Pro", serif;
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: rgba(100,100,100,1.00);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
  position: absolute;
  bottom: auto;
  top: 15%;
}
.product-caption{ right: 12%; }
.product-caption-big{ right: 8%; }

.product-spec,
.product-spec-big{
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: rgba(100,100,100,1.00);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  position: absolute;
  top: 15%;
}
.product-spec{ left: 10%; }
.product-spec-big{ left: 4%; }

/* 商品写真 */
.photo {
  height: 70%;
  width: auto;
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.2));
  position: absolute;
}

/* =====================================================
   Anchor offset
===================================================== */
#choice, #try, #noscent, #gift { scroll-margin-top: 100px; }
#all { scroll-margin-top: 50px; }

/* =====================================================
   Fixed Buttons（共通化）
===================================================== */
.back-to-top,
.jump-to-all{
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 1000;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Yu Mincho", "Hiragino Mincho Pro", serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: rgba(100,100,100,1);
  text-decoration: none;

  border-right: 1px solid rgba(100,100,100,1);
  border-bottom: 1px solid rgba(100,100,100,1);
  border-top: 1px solid rgba(100,100,100,1);
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(4px);
  padding: 10px 10px 10px 6px;

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;

  overflow: hidden;
  isolation: isolate;

  --fill-duration: .35s;
  --fill-ease: cubic-bezier(.22,.61,.36,1);
}
.back-to-top.is-visible,
.jump-to-all.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top::before, .jump-to-all::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: rgba(100,100,100,1);
  transition: height var(--fill-duration) var(--fill-ease);
}
.back-to-top:is(:hover, :focus-visible)::before,
.jump-to-all:is(:hover, :focus-visible)::before{ height: 100%; }
.back-to-top::after, .jump-to-all::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: inherit;
  text-orientation: inherit;
  font: inherit;
  letter-spacing: inherit;
  color: #fff;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--fill-duration) var(--fill-ease);
  pointer-events: none;
}
.back-to-top:is(:hover, :focus-visible)::after,
.jump-to-all:is(:hover, :focus-visible)::after{
  clip-path: inset(0 0 0 0);
}
.back-to-top:hover, .jump-to-all:hover{ color: inherit; background: rgba(255,255,255,0.65); }
.back-to-top:focus-visible, .jump-to-all:focus-visible{ outline: 2px solid #333; outline-offset: 2px; }

/* 位置だけ差分：ALLはTOPの少し上 */
.back-to-top{ transform: translateY(-50%); }
.jump-to-all{ transform: translateY(calc(-50% - 86px)); }

/* スクロール中だけ出る2ボタンのラッパー */
.float-nav{
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 1000;
}
/* ゲート中はラッパーごと非表示（上の gate 規則と整合） */
body.gate-closed .float-nav{ display: none; }

/* ラッパー内に入るので位置指定は不要に（競合回避） */
.float-nav .back-to-top,
.float-nav .jump-to-all{
  position: relative;
  left: auto; top: auto; transform: none;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.float-nav .back-to-top.is-visible,
.float-nav .jump-to-all.is-visible{
  opacity: 1; pointer-events: auto; transform: none;
}

/* 既存の固定ボタンの位置指定を無効化（競合回避） */
.back-to-top{
  top: auto !important;
  left: auto !important;
  transform: none !important;
}
.jump-to-all{
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

/* =====================================================
   花ふぜい Swiper（縦書き対応・5枚演出）
===================================================== */

.hfz-swiper{
    width: 100%;
    max-width: 1200px;
    margin-top: -50px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 40px;
    padding: 20px 0;
    height: 500px;
	overflow: hidden;
}
.hfz-swiper .swiper-wrapper{ align-items: flex-start; }
.hfz-swiper .swiper-slide{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
  transform: scale(.2);
  opacity: .2;
  will-change: transform, opacity, filter;
  height: 250px;
  position: relative;
  margin-bottom: 0;
}
.hfz-swiper .swiper-slide img{
  max-width: auto;   /* コンテナ内に収める */
  height: 250px; 
  object-fit: contain;
  -webkit-box-reflect: below -5px linear-gradient(transparent 50%, rgba(0,0,0,0.3) 100%);
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));
  transition: transform .35s ease;
  transform-origin: center top;
}

/* 文字とリンク（デフォルトは非表示） */
.hfz-swiper .slide-meta{
  display: none;
  align-items: center;
  gap: .5rem;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Yu Mincho", "Hiragino Mincho Pro", serif;
  position: absolute;
  width: 250px;
  height: 250px;
}
.hfz-swiper .slide-title{
  writing-mode: vertical-rl;
  position: absolute;
  right: auto;
  transform: translateY(-50%);
  z-index: 2;
  margin: 0 50px;
  font-size: 30px;
  color: rgba(100,100,100,1);
  letter-spacing: .08em;
  white-space: normal;
  display: block;
  text-align: left;
  height: 250px;
  top: 400px;
}
.hfz-swiper .slide-catch{
  writing-mode: vertical-rl;
  text-orientation: upright;
  position: absolute;
  right: -10px;
  top: 150px;
  transform: translateY(-50%);
  z-index: 2;
  margin: 0;
  font-size: 18px;
  color: rgba(100,100,100,1);
  letter-spacing: .05em;
  white-space: normal;
  height: 300px;
  text-align: left;
  font-weight: 500;
}
.hfz-swiper .slide-link{
  font-size: 18px;
  color: rgba(100,100,100,1);
  border: 1px solid rgba(100,100,100,1);
  padding: 5px 0;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
  position: absolute;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  left: 10px;
  bottom: 0;
}
.hfz-swiper .slide-link::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0;
  background: rgba(100,100,100,1);
  z-index: -1;
  transition: height .3s ease;
}
.hfz-swiper .slide-link:hover{ color: #fff; background: none !important; } /* 重複競合を1行に集約 */
.hfz-swiper .slide-link:hover::before{ height: 100%; }

/* :has() でホバーしたスライドだけ拡大 */
.hfz-swiper .swiper-slide:has(.slide-link:hover) img{ transform: scale(1.05); }

/* 中央スライドのみ原寸＆文字/リンク表示 */
.hfz-swiper .swiper-slide-active{ transform: scale(1); opacity: 1; }
.hfz-swiper .swiper-slide-active .slide-meta{ display: flex; }

/* 矢印（PC） */
.hfz-swiper .swiper-button-prev,
.hfz-swiper .swiper-button-next{
  color: rgba(100,100,100,1);
  top: auto;
  bottom: 150px;
  transform: translateY(0);
  width: auto;
  height: auto;
  padding: 6px 12px;
  border: 1px solid rgba(100,100,100,1);
  font-family: "Yu Mincho","Hiragino Mincho Pro",serif;
  font-size: 18px;
  transition: all 0.4s ease;
}
/* 位置（PC） */
.hfz-swiper .swiper-button-prev{
  position: absolute;
  left: 50%;
  transform: translateX(-100%);
  margin-left: -40px;
}

.hfz-swiper .swiper-button-next{
position: absolute;
right: 50%;
transform: translateX(100%);
margin-right: -40px;
}

/* デフォルト矢印を無効化 */
.hfz-swiper .swiper-button-prev::after,
.hfz-swiper .swiper-button-next::after{ content: none !important; }

/* 文字を出す */
.hfz-swiper .swiper-button-prev::before { content: "←重めの香り"; }
.hfz-swiper .swiper-button-next::before { content: "軽めの香り→"; }

/* 下のSwiperだけ文言変更 */
.hfz-swiper[data-initial="2"] .swiper-button-prev::before  { content: "←低価格"; }
.hfz-swiper[data-initial="2"] .swiper-button-next::before  { content: "高価格→"; }

/* 右から左に反転（次へボタン） */
.hfz-swiper .swiper-button-next{
  background: linear-gradient(to left, rgba(255,255,255,1) 50%, rgba(100,100,100,1) 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  color: rgba(100,100,100,1);
}
.hfz-swiper .swiper-button-next:hover{
  background-position: left bottom;
  color: #fff;
}
/* 左から右に反転（前へボタン） */
.hfz-swiper .swiper-button-prev{
  background: linear-gradient(to right, rgba(255,255,255,1) 50%, rgba(100,100,100,1) 50%);
  background-size: 200% 100%;
  background-position: left bottom;
  color: rgba(100,100,100,1);
}
.hfz-swiper .swiper-button-prev:hover{
  background-position: right bottom;
  color: #fff;
}

/* =====================================================
   Footer
===================================================== */
.footer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100px;
  gap: 10px;
  word-break: keep-all;
  overflow-wrap: break-word;
  background-color: rgba(255,255,255,0.80);
  margin-top: 50px;
}
.footer-container { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-section { flex: 1 1 200px; min-width: 200px; justify-content: center; }
.footer-copy{
  font-size: 14px;
  color: rgba(100,100,100,1);
  text-align: right;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 300;
}
.footer a{
  color: rgba(100,100,100,1);
  text-decoration: none;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 300;
}

/* =====================================================
   Filter dim (優先順位を最後に維持)
===================================================== */
.product.dimmed,
.product.is-visible.dimmed{ opacity: 0; }
.title-orange {
    position: relative;
    right: -100px;
    top: -150px;
    mix-blend-mode: multiply;
}
.title-red {
    position: relative;
    right: -120px;
    top: -100px;
    mix-blend-mode: multiply;
}
.title-blue {
    position: relative;
    right: -100px;
    top: -120px;
    mix-blend-mode: multiply;
}
.triangle-new {
    position: absolute;
    top: -20px;
    left: 0px;
    width: 80px;
    height: 60px;
    clip-path: polygon(0 0, 0 100%, 100% 0);
    background-color: rgba(180,0,0,1.00);
    color: rgba(255,255,255,1.00);
    font-family: "Times New Roman", Times, serif;
    font-weight: 400;
    padding-top: 5px;
    padding-left: 5px;
    font-size: 20px;
}

/* =====================================================
   Reduced Motion（重複まとめ）
===================================================== */
@media (prefers-reduced-motion: reduce){
  .all .product,
  .product,
  .thum-box { transition: none !important; transform: none !important; }
  .fade-down, .slide-down { animation: none !important; }
}

/* =====================================================
   Mobile（完全統合）
===================================================== */
@media (max-width: 600px){
  /* ヒーロー周り（縦積み） */
  .container{
    flex-direction: column;
    align-items: center;
    height: auto;
    width: 90vw;               /* 画面の90% */
    max-width: 90vw;
    transform-origin: top center;
    transform: translateX(-50%) scale(var(--inv-scale, 1));
  }
	
  .top { order: -1; margin-bottom: 30px; }
  .botom{
    order: 1;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
    height: auto;
  }

.link-with-line a{
  font-size: 20px;
}
	
  .link-with-line {
    margin-right: 0;
    margin-left: 10px;
}
	
.link-with-line[data-expanded="true"] .line{
  height: calc(var(--base) + 50px);
  transition: height .35s ease;
}
	
  .container .logo { margin-left: 0; margin-right: 20px; }
  .container .line1,
  .container .line2 { margin-left: 0; margin-top: 10px; }

  /* 丸の位置（装飾） */
  .orange {
    position: absolute;
    top: -10%;
    margin-bottom: 0;
    width: 35%;
    height: auto;
}
  .blue   { position: absolute; left: 0%; top: 0%; width: 35%; height: auto; }
  .red    { position: absolute; top: 50%; width: 35%; height: auto; }

.hfz-swiper{
    margin-top: -100px;
    margin-bottom: 0px;
}
	
.buttons {
  margin-top: -100px;
}
	
.button {
  width: 140px;
}

  /* 固定ボタン：画面左下に2段 */
  .back-to-top,
  .jump-to-all{
    top: auto;
    left: 12px;
  }
  .jump-to-all{ bottom: 5px; transform: none; }
  .back-to-top{ bottom: 0px; transform: none; }

  /* タイル／サムネ周りの間合い */
  .buttons { margin-top: 70px; }
  .title-area { margin-top: 0px; }
	
  .sp-space{
    height: 550px;
    display: inline-block;
  }

  .lead { margin-right: -20px; }
#top #fit-screen #fit-root {
    margin-bottom: 700px;
}
.container {
    height: 300px;
}

#choice, #try, #noscent, #gift { scroll-margin-top: 100px; }
#all { scroll-margin-top: -20px; }
}