/* ============================================================
   style.css 構成
   ============================================================
   1. ベース（全サイズ共通）
   2. レイアウト（wrapper, full-bg, lp__stack）
   3. TOP画像（top-layer, top-item）
   4. MENUボタン（開閉で close 表示）
   5. 商品エリア（item-layer > item-content + item-text）
   6. ショップリンク（shop-links）
   7. フッター
   8. PC用 @media (min-width: 768px) で 4〜7 を上書き
   ============================================================ */

/* =========================
   1. ベース（全サイズ共通）
========================= */
* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* 横はみ出し防止 */
  position: relative;
  /* 実機SPでフォントを完全統一（Webフォント Noto Sans JP を最優先） */
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden; /* 横はみ出し防止 */
  position: relative;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: pan-y; /* 実機SPで縦スクロールを確実に */
}


/* =========================
   SP（デフォルト）※固定幅・伸縮なし
========================= */
body {
  background-color: #f8ccc4;
  position: relative;
}
.full-bg {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;   /* SP幅より狭いとき横スクロール可能に */
  overflow-y: visible;
}

/* bg_rogo：pc-bg と同じ扱い。SPでは非表示、PC（768px〜）で表示 */
.full-bg-rogo-wrap {
  display: none;
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  z-index: 0;
}
.full-bg-rogo {
  width: 20vw;
  max-width: 500px;
  min-width: 400px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* SP：幅100% */
.wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 375px;   /* SP基準幅より狭くしない→上にあがるのを止める */
  margin: 0 auto;
  padding: 0;
  padding-top: 1px;   /* マージンコラプス防止 */
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: visible;
}

.lp {
  position: relative;  /* MENUボタン（absolute）の基準 */
}

/* 画像共通 */
 
.section-img,
.lp__stack img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* top-item（top_item.png）は変数でサイズ指定 */
.lp__stack img.top-item,
.top-layer img.top-item {

  height: auto !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}

/* 画像の重なり（SP） */
/* 「直下の要素同士」なら何でもOK */



/* =========================
   TOP画像レイヤー
   top_item.png のサイズ: --top-item-sp-size / --top-item-width で調整（goodpoint_item と同じ要領）
   PC時はSP幅基準の倍率で拡大
========================= */
.top-layer {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  opacity: 0;
  transform: translateY(60px);
  -webkit-transform: translateY(60px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
  --top-item-sp-size: 10vw;   /* SP時の top_item.png の幅・ここでサイズ調整 */
  --top-item-width: var(--top-item-sp-size);  /* SP時はこのまま。PCで倍率かける */
}

.top-layer.is-active {
  opacity: 1;
  transform: translateY(0);
  -webkit-transform: translateY(0);
}

.top-layer img:first-child {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.top-layer img.top-item {

  height: auto !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}

/* =========================
   SURUREロゴ（SP）・TOPに戻るリンク
   位置: top / left を変える（大きく→下/右へ）
   サイズ: width / padding / scale を変える
========================= */
.top-surure-link {
  position: fixed;   /* スクロールしても常に表示 */
  top: 15px;
  left: 27px;
  z-index: 10000;
  padding: 8px;
  transform: scale(0.4) translateX(-60px);
  transform-origin: top left;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  display: block;
  width: 80px;
  height: auto;
  text-decoration: none;
  cursor: pointer;
  line-height: 0;
  box-sizing: content-box;
  
}
.top-surure-link.is-active {
  opacity: 1;
  transform: scale(0.4) translateX(0);
}
.top-surure-link:hover {
  opacity: 0.9;
}
.top-surure-link .top-surure {
  display: block;
  width: 80px;
  height: auto;
  max-width: 80px;
  object-fit: contain;
  box-sizing: content-box;
  filter: drop-shadow(0 0px 1.5px rgb(255, 255, 255));
}

/* =========================
   4. MENUボタン（文字で表示）
   =========================
   - 通常：「MENU」文字（ピンク系）
   - メニュー開いたとき：「close」文字（紫）に切り替え（JSで .is-open を付与）
   - lp の内側の右上に配置（.lp が position: relative のためその右上）
   - スクロールしても常に表示（position: fixed）
   ========================= */
.top-menu-btn {
  position: fixed;   /* スクロールしても常に表示 */
  top: 8px;
  right: 15px;
  width: 90px;
  height: auto;
  min-height: 44px;
  padding: 6px 14px;
  z-index: 10001 !important;
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  transition: opacity 0.3s ease, transform 0.6s ease;
  transform: scale(1) translateX(40px);
  transform-origin: top right;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.top-menu-btn-menu {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e64290;   /* ピンク系 */
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.08em;
  box-sizing: border-box;
  text-shadow: 0 0px 3px rgb(255, 255, 255);
}
.top-menu-btn-close {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  color: #594397;  /* むらさき */
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 0.05em;
  box-sizing: border-box;
  text-shadow: none;
}

/* 背景に応じてヘッダー（MENU・スルレ）の見た目を変える場合：body[data-header-section="セクション名"] で上書き
   例：白っぽいエリアでは影を強く、暗いエリアでは MENU を白文字に
   body[data-header-section="concept"] .top-menu-btn { background: rgba(0,0,0,0.2); }
   body[data-header-section="concept"] .top-menu-btn .top-menu-btn-menu { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
   body[data-header-section="item"] .top-surure-link .top-surure { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
   セクション名: top / concept / goodpoint / howto / item / footer（JSで付与） */

/* メニュー開いているとき：MENUを隠し close を表示（同様に lp の右上） */
.top-menu-btn.is-open .top-menu-btn-menu { display: none !important; }
.top-menu-btn.is-open .top-menu-btn-close { display: flex !important; }

/* 表示時（スライドイン後） */
.top-menu-btn.is-active {
  opacity: 1;
  transform: scale(1) translateX(0);
}
.top-menu-btn:hover { opacity: 0.8; }

.top-item {
  position: absolute;
  bottom: 50vw;
  right: 40px;
  width: 80%;
  max-width: var(--top-item-width) !important;
  
  flex-shrink: 0 !important;
  object-fit: contain !important;
  z-index: 10;
  opacity: 0;
  transform: translateY(50px) rotate(1deg);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.top-item.is-active {
  opacity: 1;
  transform: translateY(0) rotate(10deg);
}

@media (min-width: 768px) {
  /* SURUREロゴ（PC）・TOPに戻るリンク */
  .top-surure-link {
    top: 15px;
    left: calc(15vw + 35px);
    width: 100px;
    padding: 20px;
  }
  .top-surure-link .top-surure {
    width: 100px;
    max-width: 100px;
  }
  .top-surure-link.is-active {
    transform: scale(0.5) translateX(0);
  }
  
  /* MENUボタン（PC）・fixed のため wrapper 右端に合わせる */
  .top-menu-btn {
    right: max(15px, calc(15vw + 15px));
  }
  
  .top-layer img.top-item {
    width: var(--top-item-width) !important;
    min-width: var(--top-item-width) !important;
    max-width: var(--top-item-width) !important;
    height: auto !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
  }

  .top-menu-btn-menu {
    font-size: 25px;
    top: 15px;
    right: 25px;
  }
  .top-menu-btn-close {
    font-size: 25px;
    top: 15px;
    right: 25px;
  }
  
  /* top_item.png（PC）・揺れてるitemを少し小さく */
  .top-layer {
    --top-item-width: 65px;
  }
  
  .top-item {
    bottom: 330px !important;
    right: 70px !important;
 
    height: auto !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    position: absolute !important;
    opacity: 0 !important;
    transform: translateX(100px) translateY(50px) rotate(10deg) !important;
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer;
  }
  
  .top-item.is-active {
    opacity: 1 !important;
    transform: translateX(0) translateY(0) rotate(6deg) !important;
    animation: float-item-pc 3s ease-in-out infinite 0.8s !important;
  }
  
  .top-item.is-active:hover {
    animation: none !important;
    transform: translateY(-15px) rotate(5deg) scale(1.1) !important;
    filter: drop-shadow(12px 12px 0px #c8badb);
  }
  
  @keyframes float-item-pc {
    0%, 100% {
      transform: translateX(0) translateY(0) rotate(6deg) !important;
    }
    25% {
      transform: translateX(-5px) translateY(-20px) rotate(7deg) !important;
    }
    50% {
      transform: translateX(0) translateY(-30px) rotate(8deg) !important;
    }
    75% {
      transform: translateX(5px) translateY(-20px) rotate(7deg) !important;
    }
  }
}


/* =========================
   .lp__stack の重なり（上にずらして重ねる）
   =========================
   子の並び: 1=top-layer, 2=menu-overlay, 3=concept.png, 4=goodpoint, 5=howto, 6=item-layer...
   共通: * + * で 2番目以降すべてに適用
   個別: nth-child(N) で上書き
   ========================= */
.lp__stack > * + * {
  margin-top: -20vw;
}

/* 2枚目の画像（concept.png）※SPの重なりは弱め */
.lp__stack > *:nth-child(3) {
  margin-top: -42% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block;
  box-sizing: border-box;
}

/* SP：HOW TO USE の重なりを少し下げる（5番目＝howto-layer） */
@media (max-width: 767px) {
  .lp__stack > *:nth-child(5) {
    margin-top: -12vw !important;
  }
}

/* SP：一番最後のページ（footer-layer）の重なりを浅く */
.lp__stack > *:last-child {
  margin-top: -13vw !important;
}



/* =========================
   スライド演出（実機SPでも確実に動くよう -webkit- と will-change を指定）
========================= */
.slide-in {
  opacity: 0;
  transform: translateX(60px);
  -webkit-transform: translateX(60px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
  will-change: transform, opacity;
}

.slide-in.is-active {
  opacity: 1;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  will-change: auto;
}




/* =========================
   PC（768px〜）
========================= */

.pc-bg {
  display: none;
}

.pc-bg-layer {
  position: absolute;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 60%;
  pointer-events: none;
}

.pc-bg-1 {
  background-image: url("../img/bg_1.png");
  background-position: left top;
}

.pc-bg-2 {
  background-image: url("../img/bg_2.png");
  background-position: left bottom;
}

.pc-bg-3 {
  background-image: url("../img/bg_3.png");
  background-position: right top;
}

.pc-bg-4 {
  background-image: url("../img/bg_4.png");
  background-position: right center;
}


@media (min-width: 768px) {
 .pc-bg {
    display: block;
    position: fixed;
    inset: 0;
    background: url("../img/PC_bac.png") no-repeat left top / cover;
    z-index: -1;
    overflow: hidden;
  }
  
  .pc-bg-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 10%;
  }
  
  @keyframes float-bg-1 {
    0%, 100% {
      background-position: 8% 80%;
    }
    50% {
      background-position: 8% 75%;
    }
  }
  
  @keyframes float-bg-2 {
    0%, 100% {
      background-position: 19% 15%;
    }
    50% {
      background-position: 19% 20%;
    }
  }
  
  @keyframes float-bg-3 {
    0%, 100% {
      background-position: 95% 17%;
    }
    50% {
      background-position: 95% 12%;
    }
  }
  
  @keyframes float-bg-4 {
    0%, 100% {
      background-position: 95% 90%;
    }
    50% {
      background-position: 95% 85%;
    }
  }
  
  /* 背景で揺れているやつ（少し小さく） */
  .pc-bg-1 {
    background-image: url("../img/bg_1.png");
    background-position: 8% 80%;
    z-index: 1;
    background-size: 9%;
    animation: float-bg-1 6s ease-in-out infinite;
  }
  
  .pc-bg-2 {
    background-image: url("../img/bg_2.png");
    background-position: 19% 15%;
    z-index: 2;
    background-size: 8.5%;
    animation: float-bg-2 8s ease-in-out infinite;
  }
  
  .pc-bg-3 {
    background-image: url("../img/bg_3.png");
    background-position: 95% 17%;
    background-size: 7.5%;
    z-index: 3;
    animation: float-bg-3 7s ease-in-out infinite;
  }
  
  .pc-bg-4 {
    background-image: url("../img/bg_4.png");
    background-position: 95% 90%;
    background-size: 8.5%;
    z-index: 4;
    animation: float-bg-4 9s ease-in-out infinite;
  }

  html {
    overflow-x: hidden !important;
  }

  body {
    overflow-x: hidden !important;
  }

  /* PC幅に応じてスケール（モニターが大きいほど大きく：650px付近で1、975pxで1.5、最小0.5） */
  .full-bg {
    --pc-scale: max(0.5, min(1.5, calc((100vw - 48px) / 650)));
    width: 100%;
    min-width: 0;
    margin-left: 0;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* PC：bg_rogo を表示、幅に応じて伸縮し --pc-scale で比例拡大 */
  .full-bg-rogo-wrap {
    display: flex;
    left: 20vw;
    transform: translateY(-50%) scale(var(--pc-scale));
    transform-origin: left center;
  }
  .full-bg-rogo {
    width: min(18vw, 220px);
    max-width: 500px;
    min-width: 30vw;
  }

  /* =========================
     【PC】wrapper：幅を 70vw に固定。--pc-scale でモニターに比例して全体を拡大
     ========================= */
  .wrapper {
    width: 70vw;
    min-width: 0;
    max-width: min(700px, calc(100vw - 48px));
    margin-left: auto;
    margin-right: 15vw;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    transform: scale(var(--pc-scale));
    transform-origin: 0 0;
  }
  
  .lp__stack {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* PC版：top-layer（画面幅の伸縮で top.png が欠けないように） */
  .top-layer {


 
    overflow: visible;   /* 伸縮時のはみ出しを切らない */
  }
  
  .top-layer img:first-child {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;   /* 縦横比を保ち全体が入るように（欠けない） */
    object-position: center top !important;
  }
  
  /* PC版：top-item（--top-item-width は上で SPの1.5倍 に設定済み） */
  .lp__stack img.top-item,
  .top-layer img.top-item {
    width: var(--top-item-width) !important;
    min-width: var(--top-item-width) !important;
    max-width: var(--top-item-width) !important;
    height: auto !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
  }
  
  .item-layer {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    max-width: 100%;
  }
  
  .shop-links {
    max-width: 100%;
    left: 50%;
    top: 58%;
    transform: translateX(-50%);
  }
  
  .shop-links-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    margin-top: -20px;
    margin-left: 0;
    text-align: center;
  }

  /* =========================
     PC：重なりをそれぞれ調整（ここで変更）
     =========================
     子の並び: 1=top-layer, 2=menu-overlay, 3=concept, 4=goodpoint, 5=howto, 6=item-layer, 7=footer
     数値を大きく（-120px など）→ 重なり強め / 小さく（-40px など）→ 重なり弱め
     ========================= */
  .lp__stack {
    --pc-stack-base: -80px;      /* 2番目以降のデフォルト */
    --pc-stack-concept: -38%;   /* 3: concept.png（%は親幅基準）※少し下げ気味 */
    --pc-stack-goodpoint: -80px; /* 4: goodpoint-layer */
    --pc-stack-howto: -80px;     /* 5: howto-layer */
    --pc-stack-item: -80px;      /* 6: item-layer */
    --pc-stack-footer: -80px;    /* 7: footer-layer */
  }

  .lp__stack > * + * {
    margin-top: var(--pc-stack-base);
  }

  .lp__stack > *:nth-child(3) { /* concept.png */
    margin-top: var(--pc-stack-concept) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .lp__stack > *:nth-child(4) { /* goodpoint-layer */
    margin-top: var(--pc-stack-goodpoint) !important;
  }
  .lp__stack > *:nth-child(5) { /* howto-layer */
    margin-top: var(--pc-stack-howto) !important;
  }
  .lp__stack > *:nth-child(6) { /* item-layer */
    margin-top: var(--pc-stack-item) !important;
  }
  .lp__stack > *:nth-child(7),
  .lp__stack > *:last-child { /* footer-layer */
    margin-top: var(--pc-stack-footer) !important;
  }

  .lp__stack > *:nth-child(3) img {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* PC右寄り（上で既に定義済み）*/

.shop-links {
  padding: 0;
  width: auto;
  max-width: 100%;
  transform: translateX(-50%);
  overflow: visible;
}

.shop-links-inner {
  transform: none;
  transform-origin: top center;
  bottom: 100px;
  width: auto;
  max-width: 100%;
  overflow: visible;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

  .shop-links .shop-label {
    width: 100%;
    max-width: 100%;
    min-width: 400px;
    font-size: 24px !important;
    padding: 18px 40px;
    margin: 30px;
    box-sizing: border-box;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, filter 0.3s ease;
  }
  
  .shop-links .shop-label:hover {
    opacity: 0.9;
    transform: translateY(-10px) scale(1.15);
    background-color: #f0f0f0;
    filter: drop-shadow(12px 12px 0px #c8badb);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, filter 0.3s ease;
  }
  
}


/* =========================
   goodpoint-layer
   goodpoint_item.png のサイズ: --goodpoint-item-width / --goodpoint-sp-width で調整
   PC時はSP幅を基準にする（開いている画面がPCでも表示はSP幅ベース）
========================= */
.goodpoint-layer {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  --goodpoint-sp-width: 375px;   /* SP基準幅（この幅を基準にPC時のサイズを算出） */
  --goodpoint-item-width: 80%;  /* SP時: ビューポート幅の80%。PC時は下でSP幅基準に上書き */
}

.goodpoint-bg {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;
}

/* =========================
   goodpoint-item（goodpoint_item.png）：サイズ・位置調整
   サイズ: .goodpoint-layer の --goodpoint-item-width を変更
   位置: top / left を変更（50% = 中央）
========================= */
.goodpoint-item {
  position: absolute !important;
  top: 47% !important;   /* 縦位置（大きく→下、小さく→上） */
  left: 50% !important;  /* 横位置（大きく→右、小さく→左） */
  transform: translate(-50%, -50%) translateY(50px) !important;
  width: var(--goodpoint-item-width) !important;
  max-width: none !important;
  height: auto !important;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.goodpoint-item.is-active {
  opacity: 1 !important;
  transform: translate(-50%, -50%) translateY(0) !important;
}

.goodpoint-layer img.goodpoint-item {
  width: var(--goodpoint-item-width) !important;
  max-width: none !important;
  height: auto !important;
}

/* ------------------------------------------------------------
   5. 商品エリア（item-layer）
   ------------------------------------------------------------
   HTML: .item-layer > img(iitem.png) + .item-content + .item-text + .shop-links
   ------------------------------------------------------------ */
.item-layer {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.item-layer img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   位置調整ガイド（item-row / item-inner）
   ------------------------------------------------------------
   【上下】.item-row / .item-inner の top を変える
   【左右】left を変える（0 のままなら中央）
   【間隔】gap を変える（例: 24px → 40px で離す）
   ------------------------------------------------------------ */
.item-row,
.item-inner {
  position: absolute;
  left: 0;
  top: 3%;           /* ← 上下：数値を大きくすると下へ */
  width: 100%;
  height: 70%;        /* 使う高さ（残りは shop-links 用） */
  display: flex;
  flex-direction: row;
  justify-content: center;  /* 横中央 */
  align-items: center;      /* 縦中央 */
  gap: 24px;          /* ← 商品とテキストの間隔（px で変更可） */
  pointer-events: none;
}
.item-row > *,
.item-inner > * {
  pointer-events: auto;
}

/* 商品画像ボックス（白い角丸） */
.item-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 170px;
  height: 170px;
  aspect-ratio: 1;
  background: #ffffff;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.item-content.is-active {
  opacity: 1;
}

.item-product-img {
  width: 12px !important;
  max-width: none !important;
  height: auto !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}

.item-content img.item-product-img {
  width: 30px !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain !important;
}

/* 商品テキスト（スルレ・前髪フィット・価格） */
.item-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  color: #594397;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.item-text.is-active {
  opacity: 1;
}

/* slide-in 用（横並びでは transform オフセット不要） */
.item-title {
  font-size: 20px;
  font-weight: bold;
  color: #594397;
  white-space: nowrap;
}

.item-subtitle {
  font-size: 16px;
  font-weight: bold;
  color: #594397;
  white-space: nowrap;
}

.item-price {
  font-size: 18px;
  font-weight: bold;
  color: #594397;
  line-height: 1.5;
}

.item-volume {
  font-size: 12px;
  font-weight: bold;

}

.item-tax {
  font-size: 12px;
  font-weight: bold;
}

/* 【PC】商品エリア：item-row / item-inner で位置・間隔を調整 */
@media (min-width: 768px) {
  .item-row,
  .item-inner {
    top: 2%;
    gap: 32px;
  }

  .item-content {
    width: 270px;
    height: 270px;
    padding: 12px;
    border-radius: 12px;
  }
  
  .item-product-img {
    width: 75px !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
  }
  
  .item-content img.item-product-img {
    width: 50px !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
  }
  
  .item-text {
    gap: 8px;
    align-items: flex-start;
  }
  
  /* goodpoint-item（PC）・対象をSP幅に固定（80vwだとPC画面幅で大きくなるため、SP幅基準の値に） */
  .goodpoint-layer {
    --goodpoint-item-width: calc(var(--goodpoint-sp-width) * 1.5);  /* SP幅の1.5倍：PCでコンテンツが大きく見えるため、同じ比率で拡大するとバランスが良い */
  }
  .goodpoint-item {
    width: var(--goodpoint-item-width) !important;
    max-width: none !important;
    top: 50% !important;
    left: 50% !important;
  }
  .goodpoint-layer img.goodpoint-item {
    width: var(--goodpoint-item-width) !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
  }
  
  .item-title {
    font-size: 28px;
  }
  
  .item-subtitle {
    font-size: 22px;
  }
  
  .item-price {
    font-size: 25px;
  }
  
  .item-volume {
    font-size: 16px;
  }
  
  .item-tax {
    font-size: 14px;
  }
}


.shop-label {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ffffff;
  color: #594397;
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 0.2em;
  padding: 14px 20px;
  margin: 15px;
  border-radius: 12px; /* ← ピル型の決め手 */
  text-decoration: none;
  white-space: nowrap;   /* ← 絶対改行させない */
  box-sizing: border-box;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, filter 0.3s ease;
}

/* SPのみ：アイテムページのリンクボタン3つを少し小さく */
@media (max-width: 767px) {
  .shop-label {
    font-size: 16px;
    padding: 13px 16px;
    margin: 17px;
    border-radius: 10px;
  }
}

.shop-label:hover {
  opacity: 0.9;
  transform: translateY(-8px) scale(1.1);
  background-color: #f0f0f0;
  filter: drop-shadow(12px 12px 0px #c8badb);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, filter 0.3s ease;
}
.shop-links {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translateX(-50%) translateY(60px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.shop-links.is-active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.shop-links-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  margin: 20px auto;
  max-width: 100%;
  padding: 40px;
  box-sizing: border-box;
  overflow: visible;
}

@media (max-width: 767px) {
  .shop-links-inner {
    width: 80%;
    padding: px;
    margin: 20px auto;
  }
}

/* PC用：ベースより後に書いて効かせる */
@media (min-width: 768px) {
  .shop-links {
    top: 55%;
  }
  .shop-links-inner {
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    max-width: 500px;
  }
  .shop-links .shop-label {
    min-width: 300px;
  }
}

/* =========================
   フッターリンク
========================= */
.footer-layer {
  position: relative;
  width: 100%;
}

.footer-layer img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.footer-logo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(0.77) translateY(60px);
  width: auto;
  max-width: 50px;
  height: auto;
  z-index: 15;
  margin-top: 60px ;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.footer-logo.is-active {
  opacity: 1;
  transform: translateX(-50%) scale(0.77) translateY(0);
}

.footer-links {
  position: absolute;
  top: 60%;
  left: 0;
  transform: translateY(-50%) translateY(60px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 40px;
  padding-left: 56px; /* 左寄せのまま少し右にずらす */
  z-index: 10;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.footer-links.is-active {
  opacity: 1;
  transform: translateY(-50%) translateY(0);
}

.footer-link {
  color: #594397;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.footer-link:hover {
  opacity: 0.8;
  transform: translateX(5px);
  color: #7a6ba8;
}

.footer-company {
  margin-top: 10px;
  color: #594397;
  font-size: 12px;
  line-height: 2;

}

.footer-company div {
  color: #594397;
}

.footer-company-link {
  color: #594397;
  text-decoration: none;
}
.footer-company-link:hover {
  text-decoration: underline;
}

/* お問合せ番号：SPでタップして発信できる */
.footer-tel {
  color: #594397;
  text-decoration: none;
}
.footer-tel:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .footer-links {
    gap: 14px;
    padding: 0px 80px;
    padding-left: 100px; /* PCも少し右にずらす */
  }
  
  .footer-link {
    font-size: 27px;
  }
  
  .footer-company {
    font-size: 18px;
    margin-top: 15px;
  
  }
  
  .footer-logo {
    transform: translateX(-50%) scale(0.77) translateY(60px);
    max-width: 50px;
    margin-top: 100px;
  }
  
  .footer-logo.is-active {
    transform: translateX(-50%) scale(0.77) translateY(0);
  }
}

/* =========================
   フッターコピーライト
========================= */
.footer-copyright {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  text-align: center;
  color: #594397;
  font-size: 12px;
  font-weight: bold;
  padding: 20px 0;
  width: 100%;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.footer-copyright.is-active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (min-width: 768px) {
  .footer-copyright {
    font-size: 20px;
    padding: 20px 0;
  }
  /* PC：コピーライトが消えやすいため、フッター表示時は常に表示（is-active に依存しない） */
  .footer-layer .footer-copyright {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* =========================
   メニューオーバーレイ（SP：上からスライド）
========================= */
.menu-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  background: #f8ccc4 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 0.35s ease-out;
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
}

/* SPのみ：メニューを中央寄りの少し上に（画面サイズで変わるよう vh 使用） */
@media (max-width: 767px) {
  .menu-overlay {
    align-items: center;
    justify-content: center;
  }
  .menu-content {
    transform: translateY(-10vh); /* 中央から 10vh 上＝画面サイズに応じて位置が変わる */
  }
}

.menu-overlay.is-open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

@media (min-width: 768px) {
  /* PC：wrapper幅のまま左端1mm隙間だけ消す（左に7pxはみ出し・右端はそのまま） */
  .menu-overlay {
    left: calc(85vw - min(70vw, 700px, calc(100vw - 48px)) - 25px) !important;
    right: auto !important;
    width: calc(min(70vw, 700px, calc(100vw - 48px)) + 25px) !important;
    height: 100vh !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s ease-out;
    transform: translateY(-100%);
    visibility: hidden;
    pointer-events: none;
  }
  .menu-overlay.is-open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
}

/* メニュー表示中は背面のスクロールを無効化（SP/PC共通） */
html.menu-open,
body.menu-open {
  overflow: hidden !important;
  height: 100% !important;
  position: fixed !important;
  width: 100% !important;
}

/* SP：position: fixed をやめ overflow のみ＋幅固定でずれ防止 */
@media (max-width: 767px) {
  html.menu-open,
  body.menu-open {
    position: relative !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
}
/* SURUREロゴは常に表示（メニュー開閉時も表示・SP/PC共通） */
body.menu-open .top-surure-link {
  display: block !important;
}

.menu-content {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 40px 30px;
  box-sizing: border-box;
}

.menu-header {
  display: none !important; /* 紫色のMENUテキストを非表示 */
}

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 55px;
  align-items: center;
}

.menu-link {
  font-size: 32px;
  font-weight: bold;
  color: #594397;
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.menu-link:hover {
  opacity: 0.8;
  transform: translateX(10px);
  color: #7a6ba8;
}

.menu-shop {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-shop-title {
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  color: #594397;
  margin-bottom: 20px;
}

.menu-shop-links {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  
}

.menu-shop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #594397;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 30px;
  margin: 18px;
  border-radius: 12px;
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, filter 0.3s ease;
  width: 200px;
  letter-spacing: 0.1em;
  box-sizing: border-box;
}

.menu-shop-btn:hover {
  opacity: 0.95;
  transform: translateY(-8px) scale(1.1);
  background-color: #7a6ba8;
  filter: drop-shadow(12px 12px 0px #c8badb);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, filter 0.3s ease;
}

/* SPのみ：メニュー内容を少し小さく */
@media (max-width: 767px) {
  .menu-content {
    padding: 50px 24px 40px;
  }
  .menu-nav {
    gap: 12px;
    margin-bottom: 36px;
  }
  .menu-link {
    font-size: 26px;
  }
  .menu-shop-title {
    font-size: 15px;
    margin-bottom: 14px;
  }
  .menu-shop-btn {
    font-size: 14px;
    padding: 10px 24px;
    margin: 12px;
    width: 180px;
  }
}

@media (min-width: 768px) {
 
  
  .menu-header {
    font-size: 18px;
  }
  
  .menu-link {
    font-size: 32px;
  }
  
  .menu-shop-title {
    font-size: 18px;
  }
  
  .menu-shop-btn {
    font-size: 16px;
    padding: 12px 30px;
    width: 200px;
    letter-spacing: 0.1em;
  }
}