html { scroll-behavior: smooth; }

body{
  margin:0;
  background:#1c1854;
  color:#fff;
  padding-top:64px;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
}

/* アンカーで飛んだ時に見出しが隠れない */
section { scroll-margin-top: 76px; }


/* 余白や横スクロールの予防 */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ヒーローバナーを横いっぱいに */
.hero-banner picture,
.hero-banner img {
  display: block;
  width: 100%;
  height: auto; /* 画像比率を維持 */
}

/* （任意）背景色が必要なら */
.hero-banner {
  background: #1c1854;
}
/* ========== About 3 Columns ========== */
:root{
  --container: 1200px;
  --gap: 40px;
}

.about-3col{
  background: #1c1854;
  color: #fff;
  padding: clamp(36px, 5vw, 72px) 16px;  /* 上下余白も合わせる */
}


.about-3col .about-container{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  align-items: start;
}

/* 小見出し “ABOUT” */
.about-label{
  margin: 0 0 8px;
  letter-spacing: .15em;
  font-size: 12px;
  font-weight: 700;
  opacity: .8;
}

/* ロゴ画像 */
.about-logo{
  display:block;
  max-width: 220px;     /* ロゴの最大幅。必要に応じて調整 */
  height:auto;
  margin: 6px 0 14px;
}

/* 本文 */
.about-text{
  line-height: 1.9;
  font-size: 16px;
  margin: 0;
}

/* ③ 右カラムの画像 */
.about-visual img{
  width:100%;
  height:auto;          /* そのままの比率で表示 */
  display:block;
  border-radius: 6px;   /* 角丸が不要なら削除 */
}

/* タブレット：2カラムに */
@media (max-width: 1024px){
  .about-3col .about-container{
    grid-template-columns: 1fr 1fr;
  }
  /* 画像を3番目に回す（読み順維持） */
  .about-visual{ order: 3; }
}

/* スマホ：1カラムに */
@media (max-width: 767px){
  .about-3col .about-container{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .about-logo{ max-width: 180px; }
  .about-text{ font-size: 15px; }
}

/* ========== Product Section ========== */
.product-section {
  background: #1c1854;
  padding: clamp(32px, 5vw, 60px) 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center; 
}

.product-title img {
  max-width: 800px;
  width: 100%;
  height: auto;
  margin: 0 auto 40px;
  display: block;
}

/* lineup 全体を真ん中の箱にする */
#lineup .product-section{
  display: block;
  max-width: 1200px;
  margin: 0 auto 80px;
  padding: clamp(32px, 5vw, 60px) 16px;  /* 元の余白を維持したいならこれ */
}


/* タイトル画像を中央揃え */
.product-title{
  text-align: center;
  margin-bottom: 32px;
}

/* 商品カードグリッド */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  gap: 32px 40px;
  justify-content: center;
}

/* 各カード */
.product-card {
  width: 100%;
  max-width: 320px;  
  margin: 0 auto;
  background: #fff;
  border: 2px solid #000;
  border-radius: 10px;
  padding: 20px 16px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
}

.product-card img {
  width: 100%;
  height: clamp(200px, 24vw, 280px);
  object-fit: contain;
  margin-bottom: 16px;
}

.product-card h3 {
  color: #000;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* ボタン */
.product-card .btn {
  background: #65b957;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 24px;
  border-radius: 6px;
  border: 2px solid #000;
  transition: background 0.2s ease;
}

.product-card .btn:hover {
  background: #aeca5b;
}

/* タブレット：2列 */
@media (max-width: 1024px){
  .product-grid{ grid-template-columns: repeat(2, 340px); }
}

/* スマホ */
@media (max-width: 767px){
  .product-title img { 
    margin-bottom: 24px; 
  }

  .product-card { 
    padding:0 12px 20px; 
    max-width: 300px; 
    margin: 0 auto; 
  }

  .product-card img{
    width: 100%;
    height: auto;
    margin: 12px 0 16px;
  }

  .product-card h3 { 
    font-size: 15px;
    margin: 0 0 16px;
  }

  .product-grid { 
    grid-template-columns: 1fr; 
  }

  #lineup .product-section {
    padding: 24px 12px;
  }
}


/* ========== Shoplist Simple Button ========== */
.shoplist-section {
  background: #1c1854;
  text-align: center;
  padding: 60px 0;
}

.shoplist-button {
  display: inline-block;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  padding: 14px 60px;
  transition: all 0.3s ease;
}

/* hover時に軽く反転 */
.shoplist-button:hover {
  background: #fff;
  color: #1c1854;
}

/* ========== Hero Item ========== */
.hero-item{
  background:#1c1854;
  color:#fff;
  padding: clamp(36px,5vw,72px) 16px;

  /* 個体差の微調整ノブ（必要に応じて inline-style で上書き可） */
  --ch-scale: 1; 
  --ch-x: 0px; 
  --ch-bottom: -6px;
}

.hero-item__inner{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  overflow: visible;
}

.hero-item__title{
  font-size: clamp(18px,2.2vw,24px);
  line-height: 1.6;
  margin: 0 0 16px;
}

/* スライダー（正方形×横スクロール） */
.hero-item__gallery{
  position: relative;
  margin: 0 auto 24px;
  width: min(100%, 700px);
}
.hero-item__slides{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 2px solid #000;
}

.hero-item__slides img{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  scroll-snap-align: center;
  border: none;
  border-radius: 8px;
  -webkit-user-drag: none;  /* iOS Safari で画像をドラッグできなくする */
  user-select: none;        /* 長押しで選択状態にしない */
}

/* スクロールバー非表示 */
.hero-item__slides::-webkit-scrollbar{ display:none; }
.hero-item__slides{ scrollbar-width:none; }

/* 矢印（シンプルな矢印のみ） */
.hero-item__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  border: none;
  background: none;
  color: #000;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  transition: opacity .2s ease;
}
.hero-item__nav:hover{ opacity:.6; }
.hero-item__nav.is-prev{ left: 10px; }
.hero-item__nav.is-next{ right: 10px; }

/* 説明文 */
.hero-item__desc{
  margin: 18px auto 0;
  max-width: 720px;
  line-height: 1.9;
  font-size: 14px;
  opacity: .95;
}

/* キャラ共通 */
.hero-item__chara{
  position: absolute;
  bottom: var(--ch-bottom,40px);
  pointer-events: none;
  opacity: 0;
  height: min(78vh, 640px);
  transform: translateX(var(--ch-x)) scale(var(--ch-scale));
  animation: charaFade .8s ease .2s forwards; /* 初期はフェードのみ */
}
@keyframes charaFade{ to{ opacity:1; } }

/* 左から登場 */
.hero-item__chara.left{
  left: clamp(-480px, -22vw, -200px);
  transform: translateX(-40px) scale(var(--ch-scale));
  animation: charaInLeft .8s ease .2s forwards;
}
@keyframes charaInLeft{
  to{ opacity:1; transform: translateX(0) scale(var(--ch-scale)); }
}

/* 右から登場 */
.hero-item__chara.right{
  right: clamp(-480px, -22vw, -200px);
  transform: translateX(40px) scale(var(--ch-scale));
  animation: charaInRight .8s ease .2s forwards;
}
@keyframes charaInRight{
  to{ opacity:1; transform: translateX(0) scale(var(--ch-scale)); }
}

/* もっと外側に出すオプション */
.hero-item__chara.push-left  { left:  clamp(-520px, -24vw, -220px); }
.hero-item__chara.push-right { right: clamp(-520px, -24vw, -220px); }
.hero-item__chara.push-left-xl  { left:  clamp(-580px, -26vw, -260px); }
.hero-item__chara.push-right-xl { right: clamp(-580px, -26vw, -260px); }

/* SPはキャラ非表示（共通） */
@media (max-width: 1024px){
  .hero-item__chara{ display:none; }
  .hero-item__nav.is-prev{ left: 4px; }
  .hero-item__nav.is-next{ right: 4px; }
}

/* ボタンをどこでも使えるように（product-cardと同デザイン） */
.btn{
  display:inline-block;
  margin-top: 10px;
  background:#65b957;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  padding:10px 24px;
  border-radius:6px;
  border:2px solid #000;
  transition:background .2s ease;
}
.btn:hover{ background:#aeca5b; }


/* ========== Novelty 修正版 ========== */
.novelty-section {
  background: #1c1854;
  color: #fff;
  padding: clamp(36px, 5vw, 72px) 16px;
  text-align: center;
}

.novelty-section .product-title img {
  margin: 0 auto 40px;
  display: block;
}

.novelty-section p,
.novelty-section figure {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* コンテンツ幅を他と合わせる */
.novelty-section .novelty-lead,
.novelty-section .novelty-note,
.novelty-section .novelty-image {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.novelty-lead {
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.9;
  margin-bottom: 20px;
  opacity: .95;
}

.novelty-image img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
  border:none;  
  margin-bottom: 18px;
}

.novelty-note {
  font-size: 12px;
  line-height: 1.8;
  opacity: .85;
}


/* ===== ハンバーガー＆メニュー共通 ===== */

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  box-shadow: none;
  z-index: 9999;  
}

.header-inner{
  display: flex;
  justify-content: flex-end; 
  align-items: center;
  padding: 14px 20px;
}

/* ロゴは不要なら非表示（必要なら消してOK） */
.header-logo{
  display: none;
}

/* ハンバーガーアイコン自体 */
.menu-toggle{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10001;
  margin-top: 18px; 
  margin-right: 14px; 
}

/* 三本線 */
.menu-toggle span{
  display: block;
  width: 100%;
  height: 3.5px;
  background: #ffffff;
  border-radius: 999px;
  transition: transform .2s ease, opacity .2s ease;
}

/* 開いたときのアニメ（好みで） */
.menu-toggle.active span:nth-child(1){
  transform: translateY(4px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2){
  opacity: 0;
}
.menu-toggle.active span:nth-child(3){
  transform: translateY(-4px) rotate(-45deg);
}


/* ドロップダウンメニュー本体 */
.site-nav{
  position: fixed;
  top: 52px;                /* 画面上から少し下に */
  right: 12px;
  padding: 16px 24px;
  border-radius: 16px;
  border: 2px solid #ffffff;
  background-color: #1c1854;   /* 完全不透明のネイビー */
  opacity: 1;                  /* 透明にしない */
  backdrop-filter: none;       /* ぼかし効果も不要ならオフ */
  z-index: 10000;              /* 黄色マットよりも前面 */
  display: none;               /* 初期状態では非表示 */
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.site-nav.active{
  display: block;
}

.site-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav li + li{
  margin-top: 12px;
}

.site-nav a{
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
}



/* リスト体裁 */
.site-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:14px; text-align:left;
}
.site-nav a{
  color:#fff !important; text-decoration:none;
  font-size:16px; letter-spacing:.02em;
  display:block; padding:4px 0;
}
.site-nav a:hover{ opacity:.75; }

/* bodyのスクロールを止める */
body.menu-open{ overflow:hidden; }

/* 既存の「PC時は横並び」ルールを無効化したい場合、上書きで潰す */
@media (min-width:1025px){
  .site-nav{ position:fixed; }     /* 念のため固定のまま */
  .site-nav ul{ flex-direction:column; gap:22px; }
}

/* 全hero-item共通の背景画像 */
.hero-item {
  position: relative;
  background: url("https://gigaplus.makeshop.jp/loward/lp/lp_bluelock/LP2/back1-min.jpg") center/cover no-repeat;
  overflow: hidden;
  color: #fff;
}

/* 半透明マット */
.hero-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(136, 191, 35, 0.6); /* デフォルト（黄緑） */
  z-index: 0;
}

/* コンテンツを上に表示 */
.hero-item__inner {
  position: relative;
  z-index: 1;
}

/* カラー別マット */
.hero-item.color-yellow::before { background-color: rgba(228, 193, 1, 0.6); }
.hero-item.color-red::before    { background-color: rgba(196, 12, 93, 0.6); }
.hero-item.color-orange::before { background-color: rgba(254, 171, 69, 0.6); }
.hero-item.color-blue::before   { background-color: rgba(1, 162, 153, 0.6); }
.hero-item.color-purple::before { background-color: rgba(117, 93, 242, 0.6); }


/* フッター */
.site-footer {
  color: #fff;
  text-align: center;
  padding: 28px 10px;
  font-size: 12px;
  line-height: 1.8;
}

.site-footer small {
  display: block;
  opacity: .9;
}

/* ===== SPではスライドを固定する ===== */
@media (max-width: 1024px){
  .hero-item__slides{
    overflow-x: hidden;        /* 横スクロール禁止 */
    scroll-snap-type: none;    /* スナップも無効 */
  }
}