@charset "UTF-8";

/* =========================
  Reset / Base
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
}

ul,
ol {
  list-style: none;
}

body {
  font-family: Meiryo, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  line-height: 1;
  -webkit-text-size-adjust: 100%;
}

/* =========================
  Layout
========================= */
.contents-bg {
  background-color: #f9f4e9;
  transition: background-color 0.6s ease;
}

.contents-bg.bg-cool-active {
  background-color: #edf5f8;
}

.contents-bg.bg-peach-active {
  background-color: #fdeeef;
}

#contents {
  max-width: 1056px;
  margin: 0 auto;
  font-size: 0;
}

.content_body.main_v {
  position: relative;
  max-width: 1056px;
  width: 100%;
  margin: 0 auto;
}

.content_body img {
  vertical-align: bottom;
}

.section-bg-warm { background-color: #f9f4e9; }
.section-bg-cool  { background-color: #edf5f8; }

/* =========================
  Main Visual 共通
========================= */
.main_v {
  position: relative;
  overflow: visible;
}

/* =========================
  上部固定バナー
========================= */
.shaveice-fix-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  width: 100%;
  max-width: 1056px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.shaveice-fix-banner.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.shaveice-fix-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.shaveice-fix-banner .banner-pc { display: block; }
.shaveice-fix-banner .banner-sp { display: none; }

@media (max-width: 767px) {
  .shaveice-fix-banner .banner-pc { display: none; }
  .shaveice-fix-banner .banner-sp { display: block; }
}

/* =========================
  Section01: slide-clip
========================= */
.slide-clip {
  overflow: hidden;
}

/* =========================
  Section01: ice スライドイン
  ※ transform を持つ祖先は stacking context を生成するため
     ice-shadow は ice-wrap の外（section直下）に配置し
     mix-blend-mode を背景色に届かせる
========================= */
.ice-wrap {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  transform: translateX(80px);
  transition: transform 1.4s cubic-bezier(0.22, 0.8, 0.36, 1);
}

.ice-from-left {
  transform: translateX(-80px);
}

.ice-wrap.ice-active {
  transform: translateX(0);
}

.ice-wrap .ice-item {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.ice-wrap.ice-active .ice-item {
  opacity: 1;
}

/* shadow は section 直下に配置（transform 祖先なし） */
.ice-shadow-fixed {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.ice-shadow-fixed.ice-shadow-active {
  opacity: 1;
}

/* =========================
  Section01: fukidashi
========================= */
.fukidashi-item {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.fukidashi-item.fuki-active:not(.fuki-pachi) {
  opacity: 1;
}

.fuki-pachi {
  transform: scale(0.3) rotate(-20deg);
  transform-origin: 50% 50%;
  transition: none;
}

.fuki-pachi.fuki-active {
  animation: pachiPop 0.7s cubic-bezier(0.22, 1.6, 0.36, 1) 0.3s forwards;
}

@keyframes pachiPop {
  0%   { opacity: 0; transform: scale(0.3)  rotate(-20deg); }
  50%  { opacity: 1; transform: scale(1.18) rotate(6deg);   }
  70%  {             transform: scale(0.92) rotate(-4deg);  }
  85%  {             transform: scale(1.07) rotate(2deg);   }
  100% { opacity: 1; transform: scale(1)    rotate(0deg);   }
}

/* =========================
  アンカーターゲット
========================= */
.anchor-target {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}

.anchor-cold-noodles {
  scroll-margin-top: 0;
}

/* =========================
  spec（各セクション共通）
========================= */
.spec-always {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 4;
  opacity: 1;
}

/* =========================
  オーバーレイ共通（blur / noodle ラッパー）
========================= */
.overlay-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* =========================
  Section03: blur フェードアウト
========================= */
.blur-overlay {
  z-index: 2;
  opacity: 1;
  transition: opacity 1.2s ease;
}

.blur-overlay.blur-hide {
  opacity: 0;
}

#section03 .spec-always {
  z-index: 3;
  height: auto;
  object-fit: unset;
}

/* =========================
  Section04: noodle フェードイン
  ※ mix-blend-mode のため opacity はラッパーに持たせず子要素で管理
========================= */
.noodle-fadein {
  height: auto;
  object-fit: unset;
}

.noodle-fadein .noodle-item,
.noodle-fadein .noodle-shadow {
  opacity: 0;
  transition: opacity 2.4s ease;
}

.noodle-fadein.noodle-active .noodle-item,
.noodle-fadein.noodle-active .noodle-shadow {
  opacity: 1;
}

#section04 .spec-always {
  z-index: 3;
  height: auto;
  object-fit: unset;
}

/* =========================
  Section05: noodle 上昇フェードイン
========================= */
.noodle-rise {
  height: auto;
  object-fit: unset;
}

.noodle-rise .noodle-item,
.noodle-rise .noodle-shadow {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.0s ease, transform 1.0s cubic-bezier(0.15, 0.5, 0.4, 1);
}

.noodle-rise.noodle-active .noodle-item,
.noodle-rise.noodle-active .noodle-shadow {
  opacity: 1;
  transform: translateY(0);
}

#section05 .spec-always {
  z-index: 3;
  height: auto;
  object-fit: unset;
}


/* =========================
  Section03: peach 背景色
========================= */
.section-bg-peach { background-color: #fdeeef; }

/* =========================
  Section03: peach スライドイン
  ice-wrap / ice-shadow-fixed と同じ仕組みを peach 用として定義
========================= */
.peach-wrap {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  transform: translateX(80px);
  transition: transform 1.4s cubic-bezier(0.22, 0.8, 0.36, 1);
}

.peach-from-left {
  transform: translateX(-80px);
}

.peach-wrap.peach-active {
  transform: translateX(0);
}

.peach-wrap .peach-item {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.peach-wrap .peach-shadow {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.peach-wrap.peach-active .peach-item,
.peach-wrap.peach-active .peach-shadow {
  opacity: 1;
}

.noodle-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: unset;
}

.noodle-wrap .noodle-item {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}

.noodle-wrap .noodle-shadow {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: multiply;
  pointer-events: none;
}