/* ============================
  やべーべや雪像 LP（setsuzo.css）
  画像：/img/setsuzo/（JPEG）
  動画：/video/setsuzo_hero.mp4
  ページ：/lp/snowsculpture.html
============================ */

:root{
  --bg: #f6f7fb;
  --bg2:#eef2ff;
  --card:#ffffff;
  --text:#111;
  --muted:#555;
  --line:#e8e8ee;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 18px;
  --accent:#111;
  --accent2:#2f6bff;
  --gold:#c9a100;
  --silver:#777;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
}

img{max-width:100%;display:block;}

.sz-container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

/* =========================
   Hero video (ONLY ONE SET)
   iPhone Safari stable
========================= */
.sz-header{
  /* 通常ヘッダー用の背景は残すが、動画ヒーローでは見えなくなる */
  background:
    radial-gradient(1200px 600px at 20% 10%, #dbe7ff 0%, transparent 60%),
    radial-gradient(1200px 600px at 80% 0%, #ffe8d6 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 85%);
  padding:64px 0 34px;
}

.sz-hero-video{
  position: relative;
  overflow: hidden;
  color:#fff;
  background:#000;
  min-height: 520px;
  padding: 76px 0 40px;
}

/* 背景動画のラッパー */
.sz-hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* videoを親にぴったりフィット（iOSで崩れない） */
.sz-hero-media video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position: 50% 35%; /* 上寄せ：25〜45%で調整 */
  filter: brightness(1.45) contrast(1.08) saturate(1.08);
}

/* 暗幕（明るめ設定） */
.sz-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(900px 450px at 30% 20%, rgba(0,0,0,.12) 0%, rgba(0,0,0,.45) 70%),
    linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.08) 100%);
}

/* コンテンツは最前面 */
.sz-hero-content{
  position: relative;
  z-index: 2;
}

/* =========================
   Typography / UI
========================= */
.sz-kicker{
  display:inline-block;
  font-size:13px;
  letter-spacing:.08em;
  background:#fff;
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
}

/* ヒーローの「市民雪像制作」は黒文字＋白背景（読みやすく） */
.sz-hero-video .sz-kicker{
  color: #111;
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.15);
  text-shadow: none;
}

.sz-title{
  margin:14px 0 10px;
  font-size:40px;
  line-height:1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.sz-title span{
  color:var(--accent2);
}

.sz-lead{
  margin:0 0 18px;
  font-size:16px;
  color:rgba(255,255,255,.92);
  max-width: 44em;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.sz-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0 18px;
}

.sz-badge{
  background:#fff;
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
}

/* ヒーローのバッジは半透明 */
.sz-hero-video .sz-badge{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
  color: #fff;
  backdrop-filter: blur(6px);
}

.sz-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:14px 0 14px;
}

.sz-cta-center{
  justify-content:center;
}

.sz-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  border:1px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  will-change: transform;
}

.sz-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.sz-btn-primary{
  background:var(--accent);
  color:#fff;
}

.sz-btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--text);
}

/* ヒーローのゴーストボタン */
.sz-hero-video .sz-btn-ghost{
  border-color: rgba(255,255,255,.35);
  color: #fff;
  background: rgba(255,255,255,.08);
}

.sz-note{
  font-size:13px;
  color:var(--muted);
  margin:10px 0 0;
}

.sz-hero-video .sz-note{
  color: rgba(255,255,255,.86);
  max-width: 56em;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.sz-strong{
  font-weight:800;
}

/* =========================
   Sections
========================= */
.sz-section{
  padding:54px 0;
}

.sz-section-alt{
  background:linear-gradient(180deg, var(--bg2) 0%, #fff 100%);
}

.sz-h2{
  font-size:28px;
  margin:0 0 22px;
  text-align:center;
  color: var(--text);
}

.sz-h3{
  font-size:20px;
  margin:0 0 12px;
  color: var(--text);
}

/* Lists */
.sz-list{
  margin:0;
  padding-left:18px;
  color:var(--text);
}

.sz-list li{
  margin:8px 0;
}

/* Cards / grids */
.sz-grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
}

.sz-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
}

.sz-big{
  font-size:34px;
  font-weight:800;
  margin:4px 0 2px;
}

.sz-sub{
  margin:0;
  color:var(--muted);
}

/* Awards */
.sz-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
}

.sz-award{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:24px;
  text-align:center;
}

.sz-award-year{
  font-size:22px;
  font-weight:800;
  margin:0 0 10px;
}

.sz-award-rank{
  font-size:20px;
  font-weight:800;
  margin:0 0 6px;
}

.sz-gold{color:var(--gold);}
.sz-silver{color:var(--silver);}

.sz-award-team{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

/* Gallery */
.sz-gallery{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  margin:10px 0 34px;
}

.sz-gallery{
  --gallery-width: 280px;   /* ← これが横幅の基準 */
  --gallery-height: 240px;  /* 高さ */
}

.sz-gallery img{
  width:100%;
  height: var(--gallery-height);
  object-fit: cover;
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}


.sz-gallery img:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,.20);
}

/* Steps */
.sz-steps{
  margin:0;
  padding-left:18px;
}

.sz-steps li{
  margin:12px 0;
}

/* FAQ */
.sz-faq{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
  margin:0;
}

.sz-faq dt{
  font-weight:800;
  margin-top:14px;
}

.sz-faq dt:first-child{margin-top:0;}

.sz-faq dd{
  margin:6px 0 0;
  color:var(--muted);
}

/* Bottom CTA */
.sz-bottom{
  padding:64px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f3ff 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* Footer */
.sz-footer{
  padding:22px 0;
  text-align:center;
  color:var(--muted);
}

.sz-footnote{
  margin:0;
  font-size:13px;
}

/* =========================
   Salon button color
========================= */
.sz-btn-secondary{
  background: var(--accent2);
  color:#fff;
}

/* =========================
   Responsive
========================= */
@media (max-width: 860px){
  .sz-title{font-size:32px;}
  .sz-grid2{grid-template-columns: 1fr;}
}

@media (max-width: 520px){
  .sz-title{font-size:28px;}
  .sz-btn{width:100%;}

  .sz-hero-video{
    min-height: 440px;
    padding: 60px 0 28px;
  }

  /* スマホは少し上寄せ強め */
  .sz-hero-media video{
    object-position: 50% 30%;
  }
}

/* 下部CTAのリード文は黒文字に戻す */
.sz-bottom .sz-lead{
  color: var(--text);
  text-shadow: none;
}

/* ===== Wear guide card（正解構成）===== */

.sz-wear-card{
  padding: 24px;
}

.sz-wear-inner{
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.sz-wear-text{
  flex: 1;
}

.sz-wear-fig{
  width: 360px;
  margin: 0;
}

.sz-wear-fig img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
}

/* スマホ */
@media (max-width: 860px){
  .sz-wear-inner{
    flex-direction: column;
    gap: 12px;
  }

  .sz-wear-fig{
    width: 100%;
  }
}

/* ===== Gallery: mobile swipe (full width + center snap) ===== */
@media (max-width: 860px){

  .sz-gallery{
    --gallery-width: 80vw;   /* 画面の8割 */
    --gallery-max: 360px;    /* 大きくなりすぎ防止 */
    --gallery-height: 240px;
  }

  .sz-gallery.sz-gallery-swipe{
    display: flex;
    gap: 16px;

    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);

    overflow-x: auto;
    padding: 18px 0 30px;   /* 影の逃げ道 */

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  /* 左右に余白レール（最初と最後も中央に） */
  .sz-gallery.sz-gallery-swipe::before,
  .sz-gallery.sz-gallery-swipe::after{
    content: "";
    flex: 0 0 calc((100vw - min(var(--gallery-width), var(--gallery-max))) / 2);
  }

  /* 写真カード */
  .sz-gallery.sz-gallery-swipe > img{
    flex: 0 0 var(--gallery-width);
    max-width: var(--gallery-max);
    height: var(--gallery-height);

    object-fit: cover;
    scroll-snap-align: center;

    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: 0 10px 26px rgba(0,0,0,.16);

    display: block;
  }

  .sz-gallery.sz-gallery-swipe::-webkit-scrollbar{
    height: 6px;
  }
}


/* ===== Awards: mobile swipe (full width + center snap + first/last centered) ===== */
@media (max-width: 860px){

  .sz-cards{
    display: flex;
    gap: 16px;

    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);

    overflow-x: auto;
    padding: 18px 0 30px;  /* ← 下を増やす（影が切れない） */

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  /* 左右に“実物の余白”を作る（これが決定打） */
  .sz-cards::before,
  .sz-cards::after{
    content: "";
    flex: 0 0 calc((100vw - min(80vw, 360px)) / 2);
  }

  .sz-award{
    flex: 0 0 80vw;               /* カード幅 */
    max-width: 360px;             /* 大きくなりすぎ防止 */
    scroll-snap-align: center;    /* 中央で止める */
    margin-bottom: 10px;   /* 影の逃げ */
  }

  .sz-cards::-webkit-scrollbar{
    height: 6px;
  }
}

/* ===== 実績セクションのフッターノート ===== */
.sz-award-note{
  margin: 24px auto 0;
  max-width: 720px;
  padding: 14px 20px;

  text-align: center;
  font-size: 13px;
  color: var(--muted);

  background: rgba(255,255,255,.75);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}


/* ===== 通常セクションのsz-leadは黒文字に戻す ===== */
.sz-section .sz-lead{
  color: var(--text);
  text-shadow: none;
}