@charset "utf-8";

/*----------------------------------------
common
----------------------------------------*/
:root {
  --fs-xl: clamp(48px, 3.6458vw, 70px);
  --fs-l:  clamp(30px, 2.1875vw, 42px);
  --fs-m:  clamp(18px, 1.3125vw, 25.2px);
  --fs-ms: clamp(16px, 1.1666vw, 22.4px);
  --fs-s:  clamp(14px, 1.0208vw, 19.6px);
  --fs-xs: clamp(12px, 0.875vw, 16.8px);
  --fs-cap: clamp(8px, 0.5833vw, 11.2px);
}
/* タブレット帯だけ拡大 */
@media screen and (min-width: 601px) and (max-width: 820px) {
  :root {
    --fs-xl: clamp(48px, 11.707vw, 96px);
    --fs-l:  clamp(30px, 7.317vw, 60px);
    --fs-m:  clamp(18px, 4.390vw, 36px);
    --fs-ms: clamp(16px, 3.902vw, 32px);
    --fs-s:  clamp(14px, 3.415vw, 28px);
    --fs-xs: clamp(12px, 2.927vw, 24px);
    --fs-cap: clamp(8px, 0.8333vw, 16px);
  }
}
/* 小さいSPだけ個別調整 */
@media screen and (max-width: 395px) {
  :root {
    --fs-xl: 36px;
  }
}

.main {
  width: min(600px, 100%);
  margin: 0 auto;
  min-height: 100vh;
  background: #fff;
  position: relative;
  z-index: 2;
  overflow:hidden;
}
.side {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 1;
}
.side-left {
  left: 0;
  right: calc(50% + 300px);
}
.side-right {
  left: calc(50% + 300px);
  right: 0;
}
.side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 1400px) {
/*
  .main { width:70%; max-width:820px; }
  .side { width:15%; }
*/
  .main,.side { width:33.333%; }
  .side-left { right:auto; }
  .side-left img { object-fit:contain; transform: scale(1.2); }
  .side-right { left:auto; }
}

@media screen and (min-width: 601px) and (max-width: 820px) {
  .obi-tx {
    --cut: clamp(8px, 1.951vw, 16px);
  }
}
@media screen and (max-width: 820px) {
  .side { display: none; }
  .main { width: 100%; }
}


#mv { width:100%; max-width:600px; margin:0 auto; container-type: inline-size; }
#mv .mv-area { position:relative; width:100%; height: clamp(820px, 151.8333cqw, 911px); overflow: hidden; }
#mv .movie { width:100%; height:100%; opacity:1; transition: opacity .8s ease; }
#mv .movie video { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
#mv .is-movie-finished .movie { opacity:0; pointer-events: none; }
#mv .mv-area .mv-img {
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  transform:translateY(-50%);
  opacity: 0;
  transition: opacity 1.6s ease;
}
#mv .mv-area.is-movie-finished .mv-img { opacity: 1; }
#mv .mv-area .mv-logo {
  position:absolute;
  top:5%;
  left:50%;
  transform:translateX(-50%);
  width:clamp(170px,12.3958cqw,238px);
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay:0.8s;
}
#mv .mv-area.is-movie-finished .mv-logo { opacity: 1; }
#mv .mv-area .mv-copy {
  position:absolute;
  bottom:7%;
  left:50%;
  transform:translateX(-50%);
  width:clamp(65px,12.5cqw,75px);
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay:1s;
}
#mv .mv-area.is-movie-finished .mv-copy { opacity: 1; }
#mv .top { position:relative; z-index:10; margin-top: clamp(-135px, -22.5cqw, -95px); transform:scale(1.01); }
#mv .top:before {
  content:"";
  display:block;
  width:100%;
  height: clamp(47px, 7.8125cqw, 66px);
  position:absolute;
  top:25%;
  left:0;
  background:#fff;
  z-index:-1;
}
#mv .top .cap {
  position:absolute;
  top:12%;
  left: 0;
  width:100%;
  text-align:center;
  font-size:clamp(12px, 2.8cqw, 16.8px);
  opacity:1;
  transition: opacity .5s ease;
}
#mv .top .cap.is-hidden { opacity: 0; pointer-events: none; }
#mv .top .cow {
  position:absolute;
  bottom:clamp(-49px,-2.552vw,-35px);
  right:clamp(-21px,-1.09375vw,-15px);
  width:clamp(90px,6.5625vw,126px);
}
@media screen and (max-width:1400px){
  #mv .top .cap { display:none; }
}
@media screen and (min-width: 601px) and (max-width: 820px) {
  #mv { max-width:820px; }
  #mv .mv-area { height: clamp(820px, 151.8333cqw, 1245px); }
  #mv .mv-area .mv-logo { width: clamp(170px, 41.4634cqw, 340px); }
  #mv .mv-area .mv-copy { width: clamp(65px, 12.195cqw, 100px); }
  #mv .top { margin-top: clamp(-190px, -23.1707cqw, -95px); }
  #mv .top:before { height: clamp(47px, 17.0732cqw, 140px); }
  #mv .top .cap { font-size:2.9cqw; top:11%; }
  #mv .top .cow { width: clamp(90px, 21.9512cqw, 180px); right: -7%; bottom: -6%; }
}
@media screen and (max-width:600px){
  #mv { max-width:600px; }
  #mv .mv-area { height: clamp(760px, 151.8333cqw, 911px); }
  #mv .top { margin-top: clamp(-120px, -20cqw, -80px); }
  #mv .top:before { display:none; }
  #mv .top .cap { top:9%; }
  #mv .top .cow { right: -7%; bottom: -6%; }
}
@media screen and (max-width:460px){
  #mv .mv-area { height: auto; aspect-ratio: 9 / 16; }
  #mv .top { margin-top:-24cqw; }
  #mv .top .cap { display: none; }
}

#story {
  width:100%;
  max-width:600px;
  margin:0 auto;
  container-type:inline-size;
  padding-top:3cqw;
}

.story-stage {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
}

.story-left,
.story-right {
  display:flex;
  flex-direction:column;
  min-width:0;
}

.story-left { align-items:flex-start; }
.story-right { align-items:flex-end; }

#story img {
  display:block;
  max-width:none;
  height:auto;
}

#story .tx { position:absolute; }
#story .tx img { width:100%; }


/* =========================
LEFT
========================= */

/* 北海道 */
.sl01 { position:relative; z-index:2; transform:translateX(3.5cqw); }
.sl01 > img { width:67.6667cqw; }

/* 牛 */
.sl02 { position:relative; z-index:2; margin-top:7cqw; transform:translateX(-23.3333cqw); }
.sl02 > img { width:93.3333cqw; }
.sl02 .tx.tx01 { width:12.5%; right:-7%; top:13%; }
.sl02 .tx.tx02 { width:20%; right:5.5714%; bottom:-9.575%; }

/* 朝焼け */
.sl03 { position:relative; z-index:4; margin-top:4.6667cqw; transform:translateX(-12.8333cqw); }
.sl03 > img { width:32.6667cqw; }
.sl03 .tx { width:13%; right:-15%; bottom:-9%; }

/* 土・牧草 */
.sl04 { position:relative; z-index:3; margin-top:7cqw; transform:translateX(-22.1667cqw); }
.sl04 > img { width:67.6667cqw; }
.sl04 .tx { width:48%; right:4%; bottom:-13%; }


/* =========================
RIGHT
========================= */

/* 生乳 */
.sr01 { position:relative; z-index:5; transform:translate(-35%,-18%); }
.sr01 > img { width:21cqw; }

/* 湖 */
.sr02 { position:relative; z-index:4; margin-top:-7cqw; transform:translateX(37.3333cqw); }
.sr02 > img { width:64.1667cqw; }

/* 牛舎 */
.sr03 { position:relative; z-index:3; margin-top:9.3333cqw; transform:translateX(37.3333cqw); }
.sr03 > img { width:60.6667cqw; }

/* トラクター */
.sr04 { position:relative; z-index:3; margin-top:9.3333cqw; transform:translateX(12.8333cqw); }
.sr04 > img { width:49cqw; }
.sr04 .tx { width:62%; left:-8%; bottom:-13%; }


/* =========================
CENTER MILK
========================= */

.s-milk { position:absolute; top:87%; left:50%; z-index:6; transform:translate(-50%,-50%); }
.s-milk > img { width:49cqw; }


/* =========================
PRODUCT
========================= */

.s-item { position:relative; width:100%; }
.s-item > img { width:100%; max-width:100%; }
.s-item .cow { width:35%; position:absolute; left:-7%; top:17%; }
.s-item .catch { width:58%; margin:-7% auto 0; position:relative; z-index:1; }


/* =========================
TABLET
========================= */

@media screen and (min-width:601px) and (max-width:820px) {
  #story { max-width:820px; padding-top:8cqw; }
}


/* =========================
SP
========================= */

@media screen and (max-width:600px) {
  #story { max-width:600px; padding-top:8cqw; }
}



.wave svg { display:block; width:100%; height:auto; fill:#89a7e7; margin-bottom:-2px; }
#lastcont { background:#89a7e7; padding:3.5cqw 0 11.666cqw; }
#lastcont .img-wrap { position:relative; }
#lastcont .hakkou img { width:33.8333cqw; margin-left:8.1666cqw; }
#lastcont .spoon img {
  width:93.333cqw;
  position:absolute;
  top:-23.333cqw;
  right:-23.333cqw;
}
#lastcont .gold img { width:74.666cqw; }
#lastcont .img-wrap .gold {
  position:absolute;
  bottom:-14cqw;
  right:-16.333cqw;
}
#lastcont .gold02 {
  margin-top:14cqw;
  margin-left:-11.666cqw;
}
#lastcont .lst-catch { width:72.897cqw; margin:14cqw auto 0; }
#lastcont .yogrut { width:74.532cqw; margin:17.35cqw auto 0; position:relative; }
#lastcont .nama {
  width:10.465cqw;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
#lastcont .lst { position:relative; margin-top:7cqw; }
#lastcont .lst p { width:78.271cqw; margin:0 auto; }
#lastcont .lst .f_item {  
  width:63.785cqw;
  position:absolute;
  top:0;
  right:9.333cqw;
}
#lastcont .lst .f_item .f_item01 { width:48.241cqw; margin-left:9.157cqw; }
#lastcont .lst .f_item .f_item02 { width:100%; margin-top:-6.5cqw; }



/*----------------------------------------
footer
----------------------------------------*/
#footer { margin-bottom:50px; }
#footer .warning {  }
#footer .warning-img { display:flex; flex-direction:column; width:clamp(180px,13.125vw,252px); margin:0 auto; }
#footer .warning img:first-child { width:43%; margin:0 auto -10px; }
#footer .warning p { text-align:center; font-size:var(--fs-s); margin-top:10px; }
#footer .bnr { width:85%; margin:5% auto; }
#footer .logo { width:100%; max-width:77px; margin:0 auto; }
@media screen and (min-width: 601px) and (max-width: 820px) {
  #footer .warning-img { width:clamp(180px,43.9024vw,360px); }
}





/* ========================================
   SCROLL ANIMATION
======================================== */

/* ----------------------------------------
   fade01
   シンプルなフェードイン
---------------------------------------- */
.fade01 {
  opacity:0;
  transition:opacity .8s ease;
}

.fade01.is-show {
  opacity:1;
}


/* ----------------------------------------
   fade02
   少しゆっくりしたフェード
---------------------------------------- */
.fade02 {
  opacity:0;
  transition:opacity 1.2s ease;
}

.fade02.is-show {
  opacity:1;
}


/* ----------------------------------------
   blur01
   ぼかし → 通常
   transformを使わないので位置を壊さない
---------------------------------------- */
.blur01 {
  opacity:0;
  filter:blur(12px);
  transition:
    opacity 1s ease,
    filter 1.2s ease;
}

.blur01.is-show {
  opacity:1;
  filter:blur(0);
}


/* ----------------------------------------
   zoom01
   親ではなく直下imgだけズーム
---------------------------------------- */
.zoom01 {
  opacity:0;
  transition:opacity .8s ease;
}

.zoom01 > img {
  transform:scale(.92);
  transition:transform 1.2s cubic-bezier(.22,1,.36,1);
}

.zoom01.is-show {
  opacity:1;
}

.zoom01.is-show > img {
  transform:scale(1);
}


/* ----------------------------------------
   zoom02
   少し弱め
---------------------------------------- */
.zoom02 {
  opacity:0;
  transition:opacity 1s ease;
}

.zoom02 > img {
  transform:scale(.96);
  transition:transform 1.4s cubic-bezier(.22,1,.36,1);
}

.zoom02.is-show {
  opacity:1;
}

.zoom02.is-show > img {
  transform:scale(1);
}


/* ----------------------------------------
   reveal01
   左 → 右
---------------------------------------- */
.reveal01 {
  opacity:0;
  clip-path:inset(0 100% 0 0);
  transition:
    opacity .2s ease,
    clip-path 1s cubic-bezier(.22,1,.36,1);
}

.reveal01.is-show {
  opacity:1;
  clip-path:inset(0 0 0 0);
}


/* ----------------------------------------
   reveal02
   右 → 左
---------------------------------------- */
.reveal02 {
  opacity:0;
  clip-path:inset(0 0 0 100%);
  transition:
    opacity .2s ease,
    clip-path 1s cubic-bezier(.22,1,.36,1);
}

.reveal02.is-show {
  opacity:1;
  clip-path:inset(0 0 0 0);
}


/* ----------------------------------------
   reveal03
   下 → 上
---------------------------------------- */
.reveal03 {
  opacity:0;
  clip-path:inset(100% 0 0 0);
  transition:
    opacity .2s ease,
    clip-path 1s cubic-bezier(.22,1,.36,1);
}

.reveal03.is-show {
  opacity:1;
  clip-path:inset(0 0 0 0);
}

/* 右から入る */
.slide-right {
  opacity:0;
  transition:opacity .8s ease;
}

.slide-right > img {
  transform:translateX(60px);
  transition:transform 1s cubic-bezier(.22,1,.36,1);
}

.slide-right.is-show {
  opacity:1;
}

.slide-right.is-show > img {
  transform:translateX(0);
}


/* 左から入る */
.slide-left {
  opacity:0;
  transition:opacity .8s ease;
}

.slide-left > img {
  transform:translateX(-60px);
  transition:transform 1s cubic-bezier(.22,1,.36,1);
}

.slide-left.is-show {
  opacity:1;
}

.slide-left.is-show > img {
  transform:translateX(0);
}

.reveal-last {
  position:relative;
}

/* wave初期状態 */
.reveal-last .wave {
  overflow:hidden;
}

.reveal-last .wave svg {
  display:block;
  width:100%;
  height:auto;
  opacity:0;
  transform:translateY(100%);
  transition:
    opacity .3s ease,
    transform 1s cubic-bezier(.22,1,.36,1);
  will-change:transform, opacity;
}

/* last-secにis-showが付いたらwaveをせり上げる */
.reveal-last.is-show .wave svg {
  opacity:1;
  transform:translateY(0);
}

/* 下の青背景 */
.reveal-last #lastcont {
  visibility:hidden;
}

.reveal-last.is-show #lastcont {
  visibility:visible;
}

/* ----------------------------------------
   SVGテキスト用
---------------------------------------- */
.tx-fade {
  opacity:0;
  filter:blur(4px);
  transition:
    opacity .7s ease,
    filter .8s ease;
}

.tx-fade.is-show {
  opacity:1;
  filter:blur(0);
}


/* ========================================
   DELAY
======================================== */

.delay01 { transition-delay:.1s; }
.delay02 { transition-delay:.2s; }
.delay03 { transition-delay:.3s; }
.delay04 { transition-delay:.4s; }
.delay05 { transition-delay:.5s; }


/* zoom系のimgにもdelayを反映 */
.zoom01.delay01 > img,
.zoom02.delay01 > img { transition-delay:.1s; }

.zoom01.delay02 > img,
.zoom02.delay02 > img { transition-delay:.2s; }

.zoom01.delay03 > img,
.zoom02.delay03 > img { transition-delay:.3s; }

.zoom01.delay04 > img,
.zoom02.delay04 > img { transition-delay:.4s; }

.zoom01.delay05 > img,
.zoom02.delay05 > img { transition-delay:.5s; }


/* ========================================
   常時ゆっくり動かすもの
======================================== */

/* 親位置を壊さないようimgだけ */
.float01.is-show > img {
  animation:float01 5s ease-in-out infinite;
}

@keyframes float01 {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}


/* ----------------------------------------
   動きを減らす設定
---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fade01,
  .fade02,
  .blur01,
  .zoom01,
  .zoom02,
  .reveal01,
  .reveal02,
  .reveal03,
  .tx-fade {
    opacity:1;
    filter:none;
    clip-path:none;
    transition:none;
  }

  .zoom01 > img,
  .zoom02 > img {
    transform:none;
    transition:none;
  }

  .float01.is-show > img {
    animation:none;
  }
}


.story-float.is-show > img {
  animation:storyFloat 6s ease-in-out 1.2s infinite;
}
@keyframes storyFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}
.story-breathe.is-show > img {
  animation:storyBreathe 8s ease-in-out 1.2s infinite;
}
@keyframes storyBreathe {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.025); }
}
.milk-float.is-show > img {
  animation:milkFloat 4.5s ease-in-out 1s infinite;
}
@keyframes milkFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-10px); }
}