@charset "utf-8";
/* ===================================================================
 style info : コンテンツエリア関係 他

fonts
 10px = 77%     11px = 85%     12px = 93%     13px = 100%
 14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
 18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
 22px = 167%    23px = 174%    24px = 182%    25px = 189%
 26px = 197%
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&display=swap');

/*----------------------------------------------------
  共通
----------------------------------------------------*/
/* スクロールバーの有無によるズレ対策 */
html {
  overflow-y: scroll;
}

body {
  font-family: 'Zen Kaku Gothic Antique', "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #333;
  line-height: 1;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

input, textarea {
  font-family: 'Zen Kaku Gothic Antique', "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}


/* リンク
----------------------------------------------------*/
a {
  text-decoration: none;
}

a:link {
}

a:visited {
}

a:hover {
}

a:active {
}

/* 
----------------------------------------------------*/
  .pc_parts{
    display: block;
  }

  .sp_parts{
    display: none;
  }


  * {
    box-sizing: border-box;
  }

  body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      position: relative;
      font-feature-settings: "palt";
      text-align: justify;
  }

/*  body {
      overflow: hidden;
      background: url(../img/bg.jpg) center top no-repeat;
      background-attachment: fixed;
      background-size: cover;
  }*/

  body:after {
    content: "";
    display: block;
      position: fixed;
      width: 100vw;
      height: 100vh;
      left: 0;
      top: 0;
      overflow: hidden;
      background: url(../img/bg.jpg) center top no-repeat;
      background-size: cover;
      z-index: -1;
  }

/* --- ローディング画面全体 --- */
  #loading {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #F99F2E; /* キャンペーンカラーのオレンジ */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 1s ease, z-index 0s, pointer-events 0s;
  }

  /* --- 中央の白い円 --- */
  .logo-circle {
      position: relative;
      width: 0;
      height: 0;
      background-color: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
      box-shadow: 0 10px 40px rgba(0,0,0,0.05);
      
      transform-origin: center center;
      
      /* 1. 登場アニメーション（0から250pxへ） */
      animation: circleAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  /* JSで activeクラスがついたら全画面に拡大 */
  .logo-circle.active {
      /* 2. 全画面に拡大するアニメーションを実行 */
      animation: expandCircleFull 1s ease-in-out forwards;
  }

  /* JSで activeクラスがついたらロゴも同時に巨大化させる */
  .logo-circle.active .moo-logo {
      animation: expandLogoFull 1s ease-in-out forwards;
  }

  /* --- 牛のロゴ画像 --- */
  .moo-logo {
      width: 175px; 
      height: auto;
      opacity: 0;
      transform: scale(0.8);
      /* 最初に出現するときのポップするアニメーション */
      animation: logoPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;

  }

  /* --- アニメーションの定義群 --- */

  /* 登場：0から直径250pxの円にする */
  @keyframes circleAppear {
      to { 
          width: 250px;
          height: 250px;
      }
  }

  /* ロゴの出現 */
  @keyframes logoPop {
      to {
          opacity: 1;
          transform: scale(1);
      }
  }

  /* 白い円の拡大：実寸で巨大化させてSafariのボケを完全に防ぐ */
  @keyframes expandCircleFull {
      0% {
          width: 250px;
          height: 250px;
      }
      100% {
          width: 300vmax;
          height: 300vmax;
          border-radius: 300vmax;
          opacity: 1;
      }
  }

  /* 【修正箇所】ロゴの拡大 */
  @keyframes expandLogoFull {
      0% {
          /* 開始時は元のサイズ（175px） */
          width: 175px;
          /* ★【追加】直前のロゴポップ完了時の見え方（不透明・等倍）をガチッと固定する */
          opacity: 1;
          transform: scale(1);
      }
      100% {
          /* 最終的に画面幅を大きくはみ出す超巨大サイズへ（絶対にボケません） */
          width: 250vmax;
          opacity: 1;
          /* ★【追加】念のため終了時も100%の状態を維持 */
          transform: scale(1);
      }
  }

#loading.fade-out {
    opacity: 0;
    
    /* ★【追加】透明度と一緒に「ぼかし」を最大 20px までかける */
    /* この filter の変化も、下の transition-delay と duration によって制御されます */
    filter: blur(20px);
    
    pointer-events: none;
    z-index: -9999;
    
    /* トランジション設定の整理 */
    /* 1. 全体的に一拍（0.4秒）待ってから変化を開始させる */
    transition-delay: 0.4s, 1.4s, 1.4s;
    /* (↑ filter の分をカンマで区切って増やすこともできますが、
       プロパティを 'all' または 'opacity, filter' にまとめる方がシンプルです。
       ここでは全プロパティ共通の待ち時間として 0.4s を設定) */

    /* 2. 透明度（opacity）とぼかし（filter）は 1秒 かけて変化させる、他は 0秒（一瞬） */
    transition-duration: 1s, 0s, 0s;
    
    /* ★【超重要】transition の対象プロパティを明示する（または 'all' にする）
       現在の `#loading` 元設定にある transition（1s ease）が filter にも適用されるようにします。
       もし `#loading` 元設定が opacity だけしか対象にしていない場合は、
       以下のように 'all' に上書きして filter もアニメーションするようにします。 */
    transition-property: all;
}

main{
  display: flex;
  justify-content: center;
}

  #main-content {
      /*opacity: 0;*/
      text-align: center;
      transition: opacity 0.8s ease;
      position: relative;
      z-index: 1; /* ローディングの裏に配置 */
  }
  
  #main-content.visible {
      opacity: 1;
  }

  .hero-image {
      max-width: 800px;
      width: 100%;
      border-radius: 20px;
  }

#fv {
    height: 100dvh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100vw;
    background-color: #F99F2D;

    /* --- 1. すり抜け対策 --- */
    pointer-events: auto; 
    
    /* --- 2. ぼかしの負荷軽減ブレンド --- */
    isolation: isolate;

    /* --- 3. GPUアクセラレーションの強化版（3Dレイヤー化） --- */
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1); 

    /* --- 4. ブラウザに先読みさせる --- */
    will-change: opacity, filter; 

    /* --- 5. ぼかし処理の負荷を下げる（Safari対策含む） --- */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000;
    -webkit-perspective: 1000;

    /* --- 6. 輪郭計算を端折らせるための初期値（JSで上書きされるベース） --- */
    filter: blur(0px) contrast(1); 
}



div.logo{
  padding: max(1.6vmin, 16px);;
  position: absolute;
  left: max(2vmin, 20px);
  top: max(2vmin, 20px);
  background-color: #fff;
  border-radius: max(1vmin, 10px);
}

div.logo img{
  width: max(9vmin, 90px);;
}

.swiper-ir {
  width: 100%;
  overflow: hidden;
  padding: 0 10%;
  box-sizing: border-box;
  position: relative;
}

.swiper-wrapper {
  transition-timing-function: linear !important;
  will-change: transform;
  display: flex;
}

.swiper-slide {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: auto;
  display: flex;
}

#fv .swiper-slide {
  gap: 20px;
}

#fv .swiper-slide img{
  width: max(50vmin, 400px);
  border-radius: max(1vmin, 10px)
}

#fv .catch{
  width: max(59vmin, 590px);
  margin-bottom: max(82vmin, 660px);
  position: absolute;
  z-index: 2;
}

#fv .cp-logo{
  width: max(85vmin, 850px);
  position: absolute;
  z-index: 2;
  margin-top: max(63vmin, 530px);
}

#fv .anker{
  position: absolute;
  width: max(15vmin, 150px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
  right: max(4vmin, 40px);
  bottom: max(4vmin, 40px);
}

#fv .arrow {
    display: inline-block;
    position: absolute;
    width: max(5vmin, 50px);
    color: #fff;
    
    /* 滑らかさのための魔法の3行 */
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);

    /* アニメーション設定 */
    animation: bounce-arrow 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes bounce-arrow {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1, 1);
    animation-timing-function: ease-in; /* 着地は速く */
  }
  20% {
    /* ここまで地面: 少し潰れてパワーを溜める */
    transform: translate3d(0, max(0.4vmin, 6px), 0) scale(1.1, 0.8);
    animation-timing-function: ease-out; /* 飛び出しは勢いよく */
  }
  60% {
    /* 頂点: ふわっと止まる */
    transform: translate3d(0, min(-1vmin, -10px), 0) scale(0.9, 1.1);
    animation-timing-function: ease-in; /* 落ち始め */
  }
}

/* Circleも同様に滑らかに */
#fv .circle {
    display: inline-block;
    width: 100%;
    will-change: transform;
    /* linearの場合は10sくらいゆっくりだとカクつきが目立ちやすいのでGPU化が必須 */
    animation: rotate-circle 20s linear infinite;
}

@keyframes rotate-circle {
    from { transform: rotate(0deg) translateZ(0); }
    to { transform: rotate(360deg) translateZ(0); }
}

#detail .main-line {
  position: relative;
  top: 0;
  background-color: #fff;
  width: 33vw;
  padding-top: 60dvh;
}

#detail .left-line,
#detail .right-line{
    position: fixed;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top: 0;
    width: 33.5vw;
    z-index: 1;
    background: transparent;
}

#detail .left-line{
  left: 0;
}

#detail .left-line .adjust{
      display: flex;
    flex-direction: column;
    align-items: center;
}

#detail .left-line .cp-logo{
  width: max(39vmin, 290px);
}

#detail .left-line .cp-logo img{
  width: 100%;
}

div.cp-nav{
  display: flex;
  flex-direction: column;
  margin-top: max(4vmin, 40px);
}


div.cp-nav a{
  position: relative;
  overflow: hidden;
  display: flex;
  height: max(12vmin, 100px);
  align-items: flex-end;
}

/* ボタンの共通設定 */
div.cp-nav a div.btns {
  position: relative;
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  width: max(35vmin, 250px);
  height: max(9.6vmin, 86px);  /* 任意の高さ */
  background-color: #fff; /* 通常時の背景色 */

  border: max(0.3vmin, 3px) solid #333;
  border-radius: max(1.5vmin, 15px);    /* 角丸（長方形でも円形でも可） */
  color: #333;            /* 文字色 */
  text-decoration: none;
  font-weight: bold;
  overflow: hidden;       /* 内部で広がる背景をマスクする */
  z-index: 1;
  transition: color 0.4s ease, border-color 0.4s ease;
}

/* 中央から広がる背景の仕掛け (擬似要素) */
div.cp-nav a div.btns::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  
  /* ボタンを完全に覆うサイズ（幅の約1.5倍あれば確実） */
  width: max(50vmin, 500px); 
  height: max(50vmin, 500px);
  
  background-color: #333; /* デフォルトのホバー色 */
  border-radius: 50%;     /* 円形を維持 */
  
  /* 中央に配置しつつ、最初はサイズ0 */
  transform: translate(-50%, -50%) scale(0);
  /* 広がるスピードと滑らかさの指定 */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1; /* 文字の後ろに配置 */
}

/* ホバー時の動き */
div.cp-nav a:hover div.btns,
div.cp-nav a:hover div.btn1.btns .name span,
div.cp-nav a:hover div.btn2.btns .name span,
div.cp-nav a:hover div.btn3.btns .name span {
  color: #fff
}

div.cp-nav a:hover div.btns::before {
  transform: translate(-50%, -50%) scale(1); /* 円が最大まで広がる */
}

/* --- ボタンごとに色を変える場合の設定 --- */

div.cp-nav a div.btns .name{
  font-size: max(1.6vmin, 12px);
  line-height: max(2.4vmin, 18px);
  text-align: left;
  margin-left: max(11.6vmin, 90px);
  font-weight: 600;
  letter-spacing: 0.2px;
}

div.cp-nav a div.btns .arrow { 
  border-radius:100%;
  width:max(2.8vmin, 20px);
  height:max(2.8vmin, 20px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: max(2.2vmin, 12px);
  transition: .2s;
  color: #fff;
}

div.cp-nav a div.btns .arrow svg{
  width: max(1.2vmin, 10px);
  /*transform: rotate(-90deg);*/
}

div.cp-nav a div.btn1::before,
div.cp-nav a div.btns.btn1 .arrow{ background-color: #C0672D; } 
div.cp-nav a div.btn1{ border-color: #C0672D; }
div.cp-nav a:hover div.btns.btn1 .arrow{ color: #C0672D; } 
div.cp-nav a div.btn1.btns .name span{
  font-size: max(3vmin, 20px);
  font-weight: 900;
  color: #C0672D;
}


div.cp-nav a div.btn2::before,
div.cp-nav a div.btns.btn2 .arrow { background-color: #5CC34F; } /* 緑系 */
div.cp-nav a div.btn2 { border-color: #5CC34F; }
div.cp-nav a:hover div.btns.btn2 .arrow{ color: #5CC34F; } 
div.cp-nav a div.btn2.btns .name span{
  font-size: max(2.2vmin, 14px);
  font-weight: 700;
  color: #5CC34F;
}

div.cp-nav a div.btn3::before,
div.cp-nav a div.btns.btn3 .arrow { background-color: #7BA6C9; } /* 青系 */
div.cp-nav a div.btn3 { border-color: #7BA6C9; }
div.cp-nav a:hover div.btns.btn3 .arrow{ color: #7BA6C9; } 
div.cp-nav a div.btn3.btns .name span{
  font-size: max(2.4vmin, 16px);
  font-weight: 900;
  color: #7BA6C9;
}

div.cp-nav a:hover div.btns .arrow{
  right: max(1.2vmin, 12px);
  background-color: #fff;
}

div.cp-nav a img.ico{
  position: absolute;
  width: max(7.6vmin, 66px);
  bottom: min(-0.8vmin, -8px);
  z-index: 3;
  transition: .2s;
  left: max(2.6vmin, 20px);
}

div.cp-nav a:hover img.ico{
  bottom: 0px;
}

div.pg-nav{
  width: max(32vmin, 300px);
  box-sizing: border-box;
  padding: max(7vmin, 60px) max(3vmin, 20px);
  background-color: #F99F2D;
  border-radius: max(3.5vmin, 35px);
  display: flex;
  flex-direction: column;
}

div.pg-nav .menu{
  width: max(11.6vmin, 116px);
  margin-bottom: max(4.4vmin, 44px);
}

div.pg-nav a{
  position: relative;     /* 親要素として基準にする */
  display: flex;
  align-items: center;    /* baselineよりcenterの方が線を引きやすいです */
  color: #fff;
  font-size: max(1.8vmin, 16px);
  text-decoration: none;
  width: fit-content;     /* 矢印から文字末尾までの幅に限定 */
  padding-bottom: max(0.8vmin, 8px);    /* 線を表示する隙間を作る */
}

div.pg-nav a+a{
  margin-top: max(2.2vmin, 20px);
}

/* アンダーラインの実装 */
div.pg-nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;               /* 矢印（.arrow）の左端からスタート */
  width: 100%;           /* 文字の末尾まで */
  height: 1px;         /* 線の太さ */
  background-color: #fff;

  transform: scaleX(0);
  transform-origin: left;  /* 左端を起点に */
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ホバー時に線を伸ばす */
div.pg-nav a:hover::after {
  transform: scaleX(1);
}

div.pg-nav .arrow { 
  flex-shrink: 0;         /* 矢印が潰れないように */
  border-radius: 100%;
  width: max(2.4vmin, 24px);
  height: max(2.4vmin, 24px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .2s;
  color: #000;
  background-color: #fff;
  margin-right: max(1vmin, 10px);     /* 動画に近い感覚に調整 */
}

div.pg-nav a:hover .arrow{
  background-color: #fbc175;
  color: #fff;
}

div.pg-nav .arrow svg{
  width: max(1vmin, 8px);
  /*transform: rotate(-90deg);*/
}

div.pg-nav .name {
  margin: 0;             /* 余計な余白をリセット */
}

#detail .right-line{
  right: 0;
}

#detail .main-line .slogan .lines img{
  width: max(130vw, 2136px);
}

#detail .main-line .recipe .lines img{
  width: max(82vw, 1120px);
}

#detail .main-line .lines.l3 img{
  width: max(83vw, 1180px);
}

#detail .main-line .slogan{
  padding-bottom: max(7.2vw, 84px);
}

#detail .main-line .slogan .inner{
  padding: 0 max(1.8vw, 40px);
  margin-bottom: max(4.8vw, 60px);
}

#detail .main-line .slogan h2{
  font-size: max(3.2vw, 42px);
  font-weight: 900;
  line-height: max(4.4vw, 62px);
  text-align: left;
  color: #F99F2D;
  letter-spacing: 4px;
}

#detail .main-line .slogan .txt-box{
  font-size: max(1.2vw, 16px);
  line-height: max(2.4vw, 30px);
  text-align: left;
  margin-top: max(3vw, 34px);
}

#detail .main-line .txt-box p+p{
  margin-top: max(3.6vw, 40px);
}

#detail .main-line .or-box{
  background-color: #F99F2D;
}

#detail .main-line .process .inner{
  padding: 0 max(1.8vw, 40px) 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

#detail .main-line .process .inner.type1{
  padding: max(6.6vw, 80px) max(1.8vw, 40px) max(9vw, 124px);
}

#detail .main-line .process .inner.type1 .items{
  position: absolute;
}

#detail .main-line .process .inner.type2{
  margin-top: max(1.8vw, 20px);
}

#detail .main-line .process .inner.type3{
  padding-top: max(2.6vw, 50px);
  padding-bottom: max(3.8vw, 50px);
}

#detail .main-line .process .inner.type4{
  padding-top: max(2.6vw, 50px);
  padding-bottom: max(3.8vw, 50px);
}

#detail .main-line .process .inner.type4 .top.base{
  width: calc(100% + max(1.48vw, 10px));
  margin-left: min(-0.74vw, -10px);
  margin-bottom: -2px;
  position: relative;
  z-index: 9;
}

#detail .main-line .process #explain .inner.type4 .prize-method{
  margin-top: 0;
  border-radius: 0 0 max(1.1vw, 10px) max(1.1vw, 10px);
}

#detail .main-line .process .inner.type1 .items.it01{
  left: min(-2.2vw, -30px);
  top: min(-1.7vw, -10px);
  width: max(9.4vw, 150px);
}

#detail .main-line .process .inner.type1 .items.it02{
  right: min(-1.8vw, -20px);
  top: min(-1.4vw, -10px);
  width: max(9.4vw, 150px);
}

#detail .main-line .process .inner.type1 .items.it03{
  left: min(-1.4vw, -10px);
  bottom: 0;
  width: max(9.8vw, 150px);
}

#detail .main-line .process .inner.type1 .items.it04{
  right: min(-1.4vw, -10px);
  bottom: 0;
  width: max(8vw, 100px);
}

#detail .main-line .process .inner.type1 .signboard{
  width: 100%;
}

#detail .main-line .process .inner .txt-box{
  font-size: max(1.2vw, 16px);
  line-height: max(2.4vw, 30px);
  color: #fff;
  text-align: left;
  margin-top: max(2vw, 26px);
}

#detail .main-line .process .inner .threetimes{
  margin-bottom: max(1.2vw, 16px);
  width: 98%;
  margin-left: 1%;
}

#detail .main-line .process .inner .course{
  position: relative;
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

#detail .main-line .process .inner .course a{
  position: absolute;
  display: flex;
  width: 86%;
  background-color: #000;
  color: #fff;
  padding: max(1.3vw, 19px) 0;
  font-size: max(1.2vw, 16px);
  line-height: 1;
  justify-content: center;
  align-items: center;
  border-radius: max(1.9vw, 18px);
  bottom: max(3.8vw, 50px);
  transition: .2s;
  font-weight: 500;
}

#detail .main-line .process .inner .course a:hover{
  background-color: #eaeaea;
  color: #000;
}

#detail .main-line .process .inner .course a .arrow{
  border-radius: 100%;
  width: max(2.2vw, 30px);
  height: max(2.2vw, 30px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .2s;
  color: #000;
  background-color: #fff;
  position: absolute;
  right: max(1.6vw, 22px);
}

#detail .main-line .process .inner .course a:hover .arrow{
  background-color: #000;
  color: #fff;
  right: max(1.2vw, 16px);
}


#detail .main-line .process .inner .course a .arrow svg{
  width: max(0.7vw, 10px);
  /*transform: rotate(-90deg);*/
}

#detail .main-line .process .inner .course+.course{
  margin-top: max(2.4vw, 30px);;
}

#detail .main-line .process .inner .base{
  width: 100%;
}

#detail .main-line .process .tab-ui ul{
  display: flex;
  justify-content: center;
  gap:max(0.44vw, 10px);
  margin-top: max(3.8vw, 50px);
}

#detail .main-line .process .tab-ui ul li{
  width: calc(100%/3 - max(0.64vw, 13.3px));
  border-radius: max(0.44vw, 10px) max(0.44vw, 10px) 0 0;
}

#detail .main-line .process .tab-ui ul li a{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: max(1.4vw, 18px);
  line-height: max(1.8vw, 24px);
  padding-top: max(1.9vw, 18px);
  padding-bottom: max(2.6vw, 36px);
  position: relative;
}

#detail .main-line .process .tab-ui ul li a img{
  height: max(2.6vw, 34px);
  margin-bottom: max(0.8vw, 14px);
}

#detail .main-line .process .tab-ui ul li a svg{
  width: max(1vw, 14px);
  bottom: max(1vw, 14px);
  transition: .2s;
  position: absolute;
}

#detail .main-line .process .tab-ui ul li a:hover svg{
  bottom: max(0.8vw, 10px);
}

#detail .main-line .process #explain .box {
  display: none;
  /* アニメーション中のチラつき防止 */
  will-change: opacity, transform; 
}

/* activeがついた時 */
#detail .main-line .process #explain .box.active {
  display: flex;
  /* 下から上に浮かび上がりながらフェードイン */
  animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* アニメーションの定義 */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px); /* 30px下から開始 */
  }
  100% {
    opacity: 1;
    transform: translateY(0);    /* 元の位置へ */
  }
}

/* 各背景色はそのまま維持 */
#detail .main-line .process #explain .sns,
#detail .main-line .process .tab-ui ul li.cp-01
 { background-color: #C0672D; }
#detail .main-line .process #explain .markets,
#detail .main-line .process .tab-ui ul li.cp-02
 { background-color: #5CC34F; }
#detail .main-line .process #explain .restaurant,
#detail .main-line .process .tab-ui ul li.cp-03
 { background-color: #7BA6CA; }

#detail .main-line .process #explain .prize-method{
  background-color: #fff;
  padding: max(1.6vw, 22px) max(1.6vw, 22px) max(3vw, 34px);
  border-radius: max(1.1vw, 10px);
  margin-top: max(2.2vw, 30px);
}

#detail .main-line .process #explain .prize-method h4{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: max(1.8vw, 24px);
  margin-bottom: max(1.4vw, 20px);
}

#detail .main-line .process #explain .prize-method h4 p{
  position: absolute;
}

#detail .main-line .process #explain .prize-list{
  display: flex;
  flex-direction: column;
  gap: max(1.8vw, 20px);
}

/*#detail .main-line .process #explain .prize-slide{
  display: flex;
}*/

#detail .main-line .process #explain .prize-list li{
  padding: 0 max(1.4vw, 20px) max(2vw, 26px);
  border-radius: max(1.1vw, 10px);
  border: max(0.2vw, 2px) solid #363F6F;
}

#detail .main-line .process #explain .prize-slide .swiper-slide{
  padding: 0 max(1.2vw, 20px) max(2vw, 26px);
}

#detail .main-line .process #explain .prize-slide .swiper-slide img{
  width: 100%;
}

#detail .main-line .process #explain .prize-list h5,
#detail .main-line .process #explain .prize-slide h6{
  margin-bottom: max(2.2vw, 30px);
}

#detail .main-line .process #explain .prize-slide h6{
  width: 100%;
}

#detail .main-line .process #explain .prize-list .prize-img,
#detail .main-line .process #explain .prize-slide .prize-img{
  overflow: hidden;
  border-radius: max(0.4vw, 4px);
  margin-bottom: max(1.8vw, 24px);
}

.swiper-button-next img{
  transform: scaleX(-1);
}

#detail .main-line .process #explain .prize-slide .txt-box{
  margin-top: unset;
}

#detail .main-line .process #explain .txt-box{
  font-size: max(1vw, 16px);
  line-height: max(1.8vw, 26px);
  text-align: left;
  color: #000;
  font-weight: 500;
  word-break: break-all;
}

#detail .main-line .process #explain .txt-box.bl{
  font-weight: 700;
}

#detail .main-line .process #explain h5.course{
  margin-bottom: max(2.6vw, 36px);
}

#detail .main-line .process #explain .prize-list .txt-box .note,
#detail .main-line .process #explain .prize-slide .txt-box .note{
  font-size: max(0.96vw, 14px);
  margin-top: max(0.7vw, 16px);
  line-height: max(1.6vw, 20px);
}

/* Swiper全体のサイズ設定 */
.prize-slide {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    max-width: calc(30vw - max(1.8vw, 40px) - max(1.6vw, 22px) - max(0.7vw, 16px));
}

/* 各スライド内のレイアウト */
.prize-slide .swiper-slide {
    display: flex;
    flex-direction: column;
        align-items: flex-start;
    text-align: center;
    box-sizing: border-box;

  }

/* 画像のレスポンシブ対応 */
.prize-slide img.base {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ナビゲーションボタンの色調整（お好みで） */
.prize-slide .swiper-button-next,
.prize-slide .swiper-button-prev {
    width: max(2.2vw, 30px);
    height: max(2.2vw, 30px);
    top: max(16vw, 210px);
}

/* スクロールバーのレール（背景の細い線） */
.prize-slide .swiper-scrollbar {
  height: max(0.5vw, 5px)!important;    /* レールの太さ */
  background: #D8D8D8;       /* レールの色 */
  position: relative;
  bottom: 0;
  width: 72%;
      border-radius: 0;
}

/* スクロールバーのつまみ（動くドット部分） */
.prize-slide .swiper-scrollbar-drag {
  height: max(0.5vw, 5px) !important;   /* ドットの大きさ */
  background: #363F6F;          /* ドットの色 */
  top: 0px;                 /* レールの中央に合わせる調整（(12px-2px)/2） */
  cursor: grab;
      border-radius: 0;
}

.prize-slide .scl-area{
  display: flex;
  margin-bottom: max(4.2vw, 70px);
  align-items: center;
  padding: 0 5.6%;
}

.prize-slide .scl-area.adjust{
  margin-bottom: 0;
}

.prize-slide .scl-area img{
  width: 24%;
  margin-right: 4%;
}

/* ドラッグ中のスタイル */
.prize-slide .swiper-scrollbar-drag:active {
  cursor: grabbing;
  background: #000;
}

.swiper-button-next svg,.swiper-button-prev svg{
  display: none;
}

.aco{
  margin-top: max(2.2vw, 36px);
}

.aco dt {
  cursor: pointer;
  display: flex;
  position: relative;
      align-items: center;
    justify-content: flex-end;
}

.aco dd+dt{
  margin-top: max(3vw, 52px);
}

.aco dt .aco-arrow{
  position: absolute;
  width: max(2.6vw, 34px);
  transition: .2s;
  margin-bottom: max(0.96vw, 14px);
}

.aco dt.is-open .aco-arrow{
  transform: rotate(180deg);
}

.aco dd {
  margin: 0;
  display: grid; /* Gridを使用 */
  grid-template-rows: 0fr; /* 初期状態は高さ0 */
  transition: grid-template-rows 0.3s ease-out; /* アニメーション速度 */
  overflow: hidden;
}

/* 開いた状態 */
.aco dd.is-open {
  grid-template-rows: 1fr; /* 中身の高さ分だけ広がる */
}

/* 内側の要素 */
.aco-content {
  min-height: 0;
}

.aco-inner{
  padding-top: max(2.2vw, 30px);
}

.aco-inner .txt-box{
  padding: 0 max(0.8vw, 8px);
}

.aco-inner .txt-box.x{
  padding-bottom: max(2.2vw, 30px);
  margin-bottom: max(2.2vw, 30px);
  border-bottom: max(0.1vw, 1px) solid #707070;
}

.aco-inner .txt-box h5{
  background-color: #EDEBDA;
  line-height: 1;
  font-size: max(1vw, 16px);
  padding: max(0.8vw, 10px);
  text-align: center;
  margin-bottom: max(1vw, 16px);
}

.aco-inner .txt-box>p{
  margin-bottom: max(2.2vw, 30px);
}

.aco-inner .smp{
  width: calc(100% - max(3.8vw, 50px));
}

.aco-inner .sns-btns{
  display: flex;
  gap: max(1.8vw, 18px);
  justify-content: center;
  margin-top: max(1.6vw, 20px);
}

.aco-inner .sns-btns li{
  width: calc(50% - max(0.9vw, 9px));
}

.aco-inner .sns-btns .icon{
  width: max(3.9vw, 55px);
}

.aco-inner .sns-btns p{
  margin: max(0.96vw, 14px) auto max(1.8vw, 24px);
  line-height: 1;
  font-size: max(1vw, 16px);
}

.aco-inner .sns-btn{
  height: max(3.8vw, 52px);
  border-radius: max(1.1vw, 10px);
  background-color: #586AC9;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: max(0.92vw, 13px);
}

.aco-inner a{
  display: flex;
  position: relative;
  width: 100%;
  background-color: #000;
  color: #fff;
  padding: max(1.3vw, 19px) 0;
  font-size: max(1.2vw, 16px);
  line-height: 1;
  justify-content: center;
  align-items: center;
  border-radius: max(1.9vw, 18px);
  transition: .2s;
}

.aco-inner a:hover{
  background-color: #eaeaea;
  color: #000;
}

.aco-inner a .arrow{
  border-radius: 100%;
  width: max(2.2vw, 30px);
  height: max(2.2vw, 30px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .2s;
  color: #000;
  background-color: #fff;
  position: absolute;
  right: max(1.6vw, 22px);
  margin-top: unset !important;
}

.aco-inner a:hover .arrow{
  background-color: #000;
  color: #fff;
  right: max(1.2vw, 16px);
}


.aco-inner a .arrow svg{
  width: max(0.7vw, 10px);
  /*transform: rotate(-90deg);*/
}

#detail .main-line .process #explain .terms{
  margin-top: max(2.8vw, 40px);
}

#detail .main-line .process #explain .terms h4{
  font-size: max(1.6vw, 20px);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d9e3ec;
  color: #363F6F;
  padding: max(0.96vw, 14px);
  margin-bottom: max(1.6vw, 20px);
}

#detail .main-line .process #explain .terms .sec-cap{
  font-weight: 600;
  font-size: max(0.9vw, 14px);
}

#detail .main-line .process #explain .terms .sec-cap.type1{
  font-size: max(0.98vw, 16px);
  line-height: 1.6;
}

#detail .main-line .process #explain .terms .sec-cap.type2{
  padding-bottom: max(0.8vw, 10px);
  border-bottom: max(0.1vw, 1px) solid #E2E2E2;
  font-size: max(0.98vw, 16px);
}

#detail .main-line .process #explain .terms .sec-cap.type3{
  margin-bottom: max(0.4vw, 6px);
}

#detail .main-line .process #explain .terms .sec-cap.type4{
  font-size: max(0.98vw, 16px);
  padding: 2%;
  background-color: #efefef;
  text-align: center;
  box-sizing: border-box;
}

#detail .main-line .process #explain .terms .sec-cap.type3+.terms-inner-block{
  margin-top: max(0.8vw, 10px);
}

#detail .main-line .process #explain .terms .mb{
  margin-bottom: max(1.6vw, 20px);
}

#detail .main-line .process #explain .terms .terms-block+.terms-block{
  margin-top: max(1.6vw, 20px);
}

#detail .main-line .process #explain .terms .terms-outer-block+.terms-outer-block{
  margin-top: max(1.2vw, 16px);
}

#detail .main-line .process #explain .terms .terms-inner-block+.terms-inner-block{
  margin-top: max(0.9vw, 10px);
}

#detail .main-line .process #explain .terms .terms-txt {
    height: max(22vw, 280px);
    overflow: auto;
    font-size: max(0.96vw, 14px);
    font-weight: 500;
    line-height: max(1.6vw, 20px);
    padding-right: max(1.6vw, 20px);
    text-align: left;
}


#detail .main-line .process #explain .terms .terms-txt p.txts+p.txts,
#detail .main-line .process #explain .terms .terms-txt .adjust{
  margin-top: max(0.8vw, 15px);
}

#detail .main-line .process #explain .terms .terms-txt .indent {
    padding-left: max(0.96vw, 14px);
    text-indent: min(-0.96vw, -14px);
}

#detail .main-line .process #explain .terms .terms-txt .adjust p{
  display: flex;
  align-items: flex-start;
  text-indent: initial;
}

#detail .main-line .process #explain .terms .terms-txt .adjust a{
  word-wrap: break-word
}

#detail .main-line .process #explain .terms .terms-txt .adjust.type1 p span{
  min-width: 26%;
  padding: 2%;
  background-color: #efefef;
  text-align: center;
}

#detail .main-line .process #explain .terms .terms-txt .adjust.type1 b{
  padding-left: 2%;
  box-sizing: border-box;
  width: 72%;
}

#detail .main-line .process #explain .terms .terms-txt .adjust.type2 p span{
  min-width: 20%;
}

#detail .main-line .process #explain .terms .terms-txt .adjust.type2 b{
  padding-left: 2%;
  box-sizing: border-box;
  width: 80%;
}

#detail .main-line .process #explain .terms .terms-txt .adjust.type3 p span{
  min-width: 20%;
}

#detail .main-line .process #explain .terms .terms-txt .adjust.type3 b{
  padding-left: 2%;
  box-sizing: border-box;
  width: 80%;
}

#detail .main-line .process #explain .terms .terms-txt .note{
  font-size: 90%;
}

#detail .main-line .process #explain .terms .base{
  margin-bottom: max(2.6vw, 50px);
}

#detail .main-line .process #explain .tc{
  text-align: center;
}

#detail .main-line .outlo{
  background: url(../img/bg_outlo.jpg) center top repeat;
  background-size: 50%;
  padding-top: max(4.4vw, 60px);
  padding-bottom: max(4.7vw, 68px);
}

#detail .main-line .outlo .recipe h3,
#detail .main-line .outlo .more{
  padding: 0 max(1.8vw, 40px);
  margin-bottom: max(2.6vw, 40px);
}

#detail .main-line .outlo .txt-box{
  font-size: max(1.2vw, 16px);
  line-height: max(2.4vw, 30px);
  text-align: left;
  margin-top: max(3vw, 34px);
}

#detail .main-line .outlo .recipe .txt-box{
  padding: 0 max(2.6vw, 50px);
}

#detail .main-line .outlo .recipe a{
  display: flex;
  width: 86%;
  background-color: #84542E;
  color: #fff;
  padding: max(1.3vw, 19px) 0;
  font-size: max(1.2vw, 16px);
  line-height: 1;
  justify-content: center;
  align-items: center;
  border-radius: max(1.9vw, 18px);
  transition: .2s;
  position: relative;
  margin: max(3.8vw, 60px) auto max(4.4vw, 78px);
}

#detail .main-line .outlo .recipe a p+p{
  margin-top: unset;
}

#detail .main-line .outlo .recipe a:hover{
  background-color: #eaeaea;
  color: #000;
}

#detail .main-line .outlo .recipe a .arrow{
  border-radius: 100%;
  width: max(2.2vw, 30px);
  height: max(2.2vw, 30px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .2s;
  color: #84542E;
  background-color: #fff;
  position: absolute;
  right: max(1.6vw, 22px);
}

#detail .main-line .outlo .recipe a:hover .arrow{
  background-color: #84542E;
  color: #fff;
  right: max(1.2vw, 16px);
}


#detail .main-line .outlo .recipe a .arrow svg{
  width: max(0.7vw, 10px);
  /*transform: rotate(-90deg);*/
}

#detail .main-line .outlo .about{
  padding: max(2.6vw, 50px) max(1.9vw, 25px) 0;
  margin-top: max(3.8vw, 60px);
}

#detail .main-line .outlo .about .box{
  position: relative;
  display: flex;
  background-color: #fff;
  border-radius: max(1.6vw, 20px);
      flex-direction: column;
    align-items: center;
  padding: max(4.5vw, 78px) max(2.2vw, 30px) max(2.6vw, 44px);
}

#detail .main-line .outlo .about .box .more{
  position: absolute;
  top: min(-3.2vw, -50px);
  width: max(15vw, 182px);
  z-index: 1;
}

#detail .main-line .outlo .about .box .more img{
  width: 100%;
}

#detail .main-line .outlo .about .box h3{
  font-size: max(1.8vw, 24px);
  line-height: max(2.8vw, 36px);
  text-align: center;
  font-weight: 900;
  position: relative;
  z-index: 2;
}

#detail .main-line .outlo .about .box ul{
  position: relative;
  z-index: 3;
}

#detail .main-line .outlo .about .box li+li,
#detail .main-line .outlo .about .box ul{
  border-top: max(0.1vw, 1px) solid #eaeaea;
}

#detail .main-line .outlo .about .box ul{
  border-bottom: max(0.1vw, 1px) solid #eaeaea;
  margin-top: max(2.2vw, 36px);
}

#detail .main-line .outlo .about .box li a{
  display: flex;
  align-items: center;
  padding: max(1.6vw, 25px) 0;
}

#detail .main-line .outlo .about .box li img.base{
  width: 100%;
}

#detail .main-line .outlo .about .box li a .arrow{
  border-radius: 100%;
  width: max(2vw, 24px);
  height: max(2vw, 24px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .2s;
  color: #fff;
  background-color: #84542E;
  position: absolute;
  right: 0;
}

#detail .main-line .outlo .about .box li a:hover .arrow{
  background-color: #eaeaea;
  color: #000;
}


#detail .main-line .outlo .about .box li a .arrow svg{
  width: max(0.7vw, 10px);
  /*transform: rotate(-90deg);*/
}

#detail .main-line .store{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: max(1.6vw, 36px) max(0.8vw, 18px);
  margin-top: max(1.6vw, 36px);
}

#detail .main-line .store li{
  position: relative;
  overflow: hidden;
}

#detail .main-line .markets .coming-soon{
  position: relative;
}

#detail .main-line .markets .coming-soon:before{
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  content: "COMING SOON!";
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.96);
  color: #000;
  font-size: max(1.1vw, 14px);
  justify-content: center;
  align-items: center;
  z-index: 99;
  font-weight: 900;
}

#detail .main-line .store li.coming-soon:before{
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  content: "COMING SOON!";
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.96);
  color: #000;
  font-size: max(1.1vw, 14px);
  justify-content: center;
  align-items: center;
  z-index: 99;
  font-weight: 900;
}

#detail .main-line .stores{
  border: max(0.1vw, 1px) solid #E2E2E2;
  border-radius: max(1.1vw, 10px);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: max(0.9vw, 18px);
  width: 100%;
  height: max(8vw, 80px);
}

#detail .main-line .stores img{
  height: 60%;
  width: auto !important;
}

#detail .main-line .stores.type2 img{
  height: 30%;
  width: auto !important;
}

#detail .main-line .stores.type3 img{
  height: 15%;
  width: auto !important;
}

#detail .main-line .store a{
  display: flex;
  position: relative;
  width: 100%;
  background-color: #FFDB49;
  color: #000;
  padding: max(1.3vw, 19px) 0;
  font-size: max(1.1vw, 14px);
  line-height: 1;
  justify-content: center;
  align-items: center;
  border-radius: max(1.9vw, 18px);
  transition: .2s;
}

#detail .main-line .store a:hover{
  background-color: #eaeaea;
  color: #000;
}

#detail .main-line .store a.modal .arrow{
  border-radius: 100%;
  width: max(1.2vw, 16px);
  height: max(1.2vw, 16px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .2s;
  color: #000;
  background-color: #fff;
  position: absolute;
  right: max(0.7vw, 14px);
  margin-top: unset;
}

#detail .main-line .store a.modal:hover .arrow{
  background-color: #000;
  color: #fff;
  right: max(0.2vw, 8px);
}


#detail .main-line .store a.modal .arrow svg{
  width: max(0.5vw, 10px);
  /*transform: rotate(-90deg);*/
}

#detail .main-line .store a.blank .arrow{
  border-radius: 100%;
  width: max(1.2vw, 16px);
  height: max(1.2vw, 16px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .2s;
  color: #000;
  position: absolute;
  right: max(0.7vw, 14px);
  margin-top: unset;
}

#detail .main-line .store a.blank .arrow svg{
  width: 80%;
}

fotter{
  background-color: #414141;
  padding: max(4.8vw, 60px) max(3.2vw, 48px) max(7.2vw, 84px);
  display: flex;
      flex-direction: column;
      color: #fff;
}

fotter a{
  color: #fff;
  transition: .2s;
}

fotter .f-n a:hover,
fotter .follow a:hover{
  opacity: 0.6;
}



fotter .logo{
  width: max(15vw, 182px);
  display: flex;
  margin: 0 auto max(3.2vw, 50px);
}

fotter .logo img{
  width: 100%;
}

fotter .f-n{
  grid-template-columns: repeat(2, 1fr);
  display: grid;
  gap: max(0.6vw, 10px) 0;
  padding-bottom: max(3.2vw, 50px);
  border-bottom: max(0.1vw, 1px) solid #707070;
  margin-bottom: max(3.2vw, 50px);
}

fotter .f-n li{
  text-align: left;
}

fotter .f-n img{
  width: 100%;
}

fotter .follow{
  display: flex;
  align-items: center;
  justify-content: center;
}

fotter .follow dd{
  width: max(8vw, 100px);
}

fotter .follow dd img{
  width: 100%;
}

fotter .follow dt{
  display: flex;
  margin-left: max(3.2vw, 46px);
  gap: max(1.6vw, 26px);
}

fotter .follow dt a{
  width: max(1.4vw, 22px);
}

fotter .follow dt a img{
  width: 100%;
}

fotter .copyright{
  font-size: max(0.8vw, 14px);
  font-weight: 500;
  margin-top: max(4.4vw, 68px);
  font-weight: 300;
}

.menu-btn,
.close-btn,
#detail .right-line .logo,
.sp-navi{
  display: none;
}

/* モーダル全体のレイヤー */
.modal-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;       /* 修正：非表示の時は存在を完全に消す */
  pointer-events: none;     /* 修正：下の要素を触れるようにする */
  z-index: -9999;
  transition: opacity 0.4s ease, visibility 0.4s, z-index 0s 0.4s;
}

/* activeクラスがついたら表示 */
.modal-layer.active {
  opacity: 1;
  visibility: visible;      /* 修正：表示する */
  pointer-events: auto;     /* 修正：モーダル内は触れるようにする */
  z-index: 10000;
  transition: opacity 0.4s ease, visibility 0s, z-index 0s;
}

/* 背景のオーバーレイ（黒い半透明） */
.modal-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

/* 中央の白いコンテンツボックス */
.modal-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(30px);
  width: 31vw;
  background: #fff;
  padding: max(1.8vw, 20px);
  border-radius: max(0.9vw, 10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);

  max-height: 90dvh;
  overflow: auto;
}

.modal-layer.active .modal-container {
  transform: translate(-50%, -50%) translateY(0);
}

/*.modal-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
  color: #333;
}*/

a.modal-close-btn{
  display: flex;
  position: relative;
  width: 90%;
  background-color: #000;
  color: #fff;
  padding: max(1.3vw, 19px) 0;
  font-size: max(1.2vw, 16px);
  line-height: 1;
  justify-content: center;
  align-items: center;
  border-radius: max(1.9vw, 18px);
  transition: .2s;
  margin: max(2.2vw, 30px) 5% 0;
}

a.modal-close-btn:hover{
  background-color: #eaeaea;
  color: #000;
}

a.modal-close-btn .arrow{
  border-radius: 100%;
  width: max(2.2vw, 30px);
  height: max(2.2vw, 30px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .2s;
  color: #000;
  background-color: #fff;
  position: absolute;
  right: max(1.6vw, 22px);
  margin-top: unset !important;
}

a.modal-close-btn:hover .arrow{
  background-color: #000;
  color: #fff;
}


a.modal-close-btn .arrow svg{
  width: max(0.7vw, 10px);
  transform: rotate(-90deg);
}

.modal-top{
  font-size: max(1.2vw, 16px);
  line-height: max(2vw, 26px);
}

.modal-logo{
    border: max(0.1vw, 1px) solid #E2E2E2;
    border-radius: max(1.1vw, 10px);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: max(1.2vw, 24px);
    width: 100%;
    height: max(11vw, 110px);
}

.modal-logo img{
  height: 60%;
}

.modal-top .names{
  font-size: max(1.4vw, 18px);
}

.modal-content .txts{
  font-size: max(1.2vw, 16px);
  line-height: max(2.2vw, 26px);
  text-align: left;
  margin-top: max(1.2vw, 16px);
  font-weight: 500;
}

.modal-content h5+.txts{
  margin-top: unset;
}

.modal-content .txts+.base{
  margin-top: max(1vw, 18px);;
}

.modal-content h5{
  margin-top: max(2.2vw, 30px);
  line-height: 1;
  font-size: max(1.2vw, 16px);
  display: flex;
  padding-bottom: max(1vw, 12px);
  border-bottom: max(0.1vw, 1px) solid #868686;
  margin-bottom: max(1vw, 18px);
}

.modal-content h5:before{
  content: "";
  display: block;
  width: max(0.2vw, 4px);
  background-color: #FFDB49;
  margin-right: max(0.6vw, 10px);
}

.modal-content .aco{
  border: max(0.2vw, 2px) solid #FFDB49;
  border-radius: max(1.1vw, 10px);
  overflow: hidden;
}

.modal-content .aco dt{
  background-color: #FFDB49;
  position: relative;
  display: flex;
  height: max(4.9vw, 66px);
    justify-content: flex-start;
    align-items: center;
    padding-left: max(2vw, 26px);
    font-size: max(1.6vw, 20px);
    color: #363F6F;
}

.modal-content .aco dt .aco-arrow{
  margin-bottom: unset;
  right: max(1.8vw, 20px);
}

.modal-content .aco .aco-inner{
  padding-left: max(2vw, 26px);
  padding-right: max(2vw, 26px);
  padding-bottom: max(2.2vw, 30px);
}

.modal-content .aco .aco-inner .base{
  width: 100%;
}

.modal-content .links{
  border: max(0.2vw, 2px) solid #CBCBCB;
  border-radius: max(1vmin, 10px);
  overflow: hidden;
  height: max(4.8vw, 70px);
  display: flex;
  color: #000;
  position: relative;
      align-items: center;
    justify-content: center;
    margin-top: max(1.8vw, 24px);
    font-size: max(0.96vw, 14px);
}

.modal-content .links span{
  height: 100%;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.modal-content .links img{
  height: 70%;
  margin-right: max(0.5vw, 6px);
}

.modal-content .links .arrow{
  border-radius: 100%;
  width: max(1.2vw, 16px);
  height: max(1.2vw, 16px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .2s;
  color: #000;
  position: absolute;
  right: max(1.2vw, 22px);
  margin-top: unset;
}

.modal-content .links .arrow svg{
  width: 80%;
}

/* --- 1. 初期状態：透明、下、そして「ぼかし」を最大 20px までかけておく --- */
.feed-block .items {
    opacity: 0;
    transform: translateY(50px);
    
    /* ★【追加】初期状態は 20px ボカしておく */
    filter: blur(20px);
    
    /* スムーズさの設定（filter もアニメーションの対象に含める） */
    /* ease-out で最初はボケ具合がパッと減り、最後はじわっとクッキリする心地いい動きに */
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1s cubic-bezier(0.25, 1, 0.5, 1),
                filter 1s ease-out; /* filter の変化を1秒に設定 */
}

/* --- 2. 発動時：親に .is-active がついたら元の位置へ、クッキリさせる --- */
.feed-block.is-active .items {
    opacity: 1;
    transform: translateY(0);
    
    /* ★【追加】ぼかしをゼロにする（クッキリさせる） */
    filter: blur(0);
}

/* --- 3. 【ポイント】1〜4番目まで時間差（ディレイ）を作る --- */
/* ★【重要】filter の遅延も同時に処理されるように transition-property を「all」にするか、
   元の transition-delay を全 property に適用するように設定します。
   ここでは一番シンプルな「all」でディレイを一括管理する方法で記述します。 */

.feed-block.is-active .it01,
.feed-block.is-active .it02,
.feed-block.is-active .it03,
.feed-block.is-active .it04 {
    /* これらすべてのトランジション（opacity, transform, filter）は同じ時間差で開始されます */
    transition-property: all; 
}

/* ディレイの設定（既存の 0.4秒刻みを維持） */
.feed-block.is-active .it01 {
    transition-delay: 0s;
}
.feed-block.is-active .it02 {
    transition-delay: 0.4s;
}
.feed-block.is-active .it03 {
    transition-delay: 0.8s;
}
.feed-block.is-active .it04 {
    transition-delay: 1.2s;
}


/* --- 1. 初期状態：3つのコース共通（透明・下・ぼかし） --- */
.inner.type2 .course {
    opacity: 0;
    transform: translateY(50px);
    
    /* 1秒かけてじわっとクッキリ現れる設定 */
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- 2. 各コースが画面中央に到達した時（JSでクラスがついた時） --- */
.inner.type2 .course.is-active {
    opacity: 1;
    transform: translateY(0);
}

@media (max-height: 830px) {
  #fv .swiper-slide img{
    width: max(40vmin, 260px);
  }

  #fv .catch{
    width: max(59vmin, 490px);
    margin-bottom: max(66vmin, 460px);
  }

  #fv .cp-logo{
    width: max(85vmin, 680px);
    margin-top: max(53vmin, 400px);
  }

  #fv .anker{
    width: max(15vmin, 50px);
  }

  #fv .arrow {
      width: max(5vmin, 30px);
  }
}


@media (max-height: 680px) {
  div.cp-nav{
    display: flex;
    flex-direction: column;
    margin-top: 0;
    margin-bottom: min(-3vmin, -50px);
  }
}

@media screen and (min-width: 751px) and (max-width: 1279px) and (min-height: 681px),
 (orientation: landscape) and (min-width: 751px) and (max-width: 1200px) and (max-height: 681px){
.left-line .adjust ,#detail .right-line{
    transform: scale(0.8);
    transition: .2s;
  }

  #detail .left-line, #detail .right-line{
    width: 31vw;;
  }

  #detail .main-line{
    width: 38vw;
  }
}

@media (orientation: portrait) and (max-width: 1120px), screen and (max-width: 750px) {

  .sp-navi{
    position: fixed;
    display: flex;
    z-index: 10;
    width: 100%;
    bottom: -100px;
    left: 0;

    transition: bottom 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }

.sp-navi.is-show {
    bottom: 0;
}

  .sp-navi li{
    width: 33.3333%;

  }

  .sp-navi li a{
    width: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    line-height: 1;
    padding: 10px 0;
  }

  .sp-navi li img{
    height: 20px;
    margin-bottom: 12px;
  }

  .sp-navi li.sns{
    background-color: #c1682d;
  }

  .sp-navi li.markets{
    background-color: #5bc34e;
  }

  .sp-navi li.restaurant{
    background-color: #7ba7ca;
  }

  .menu-btn,
  .close-btn{
  position: fixed;
  display: block;
  z-index: 99;
  width: 40px;
    right: 15px;
    top: 15px;
}

.menu-btn img,
.close-btn img{
  width: 100% !important;
}

#detail .right-line .logo{
  display: block;
}
  div.logo{
    width: 82px;
    padding: 8px 10px;
    left: 15px;
    top: 15px;
  }

  div.logo img{
    width: 100%;
  }

  #detail .left-line{
    display: none;
  }

  #detail .right-line{
    opacity: 0;
    pointer-events: none;
    width: 100vw;
    z-index: 100;
    transition: .2s;
    background-color: #F99F2E;
  }


  .open #detail .right-line{
    opacity: 1;
    pointer-events: auto;
  }

  main{
    flex-direction: column;
  }

  #fv{
    position: relative;
    padding-top: 110px;
    padding-bottom: 120px;
    height: unset;
    opacity: 1 !important;
    filter: blur(0) !important;
    z-index: 9;
  }

  #fv .catch{
    width: 90%;
    position: relative;
    margin-bottom: 20px;
  }

  #fv .cp-logo{
    width: 90%;
    margin-top: unset;
    bottom: 70px;
  }

  #fv .anker{
    width: 70px;
    right: 15px;
    bottom: 15px;
  }

  #fv .arrow{
    width: 22px;
  }

  #detail .main-line{
    width: 100vw;
    padding-top: 60px;
    overflow: hidden;
  }

  #detail .main-line .slogan h2{
  font-size: 10vw;
  line-height: 1.4;
  }

  #detail .main-line .slogan .txt-box{
            font-size: 4vw;
        line-height: 2;
  }

  #detail .main-line .process .inner.type1 .items.it01,
  #detail .main-line .process .inner.type1 .items.it03{
    width: 120px;
  }

  #detail .main-line .process .inner.type1 .items.it02{
    width: 110px;
  }

  #detail .main-line .process .inner.type1 .items.it04{
    width: 72px;
  }

  #detail .main-line .process .inner.type1{
    padding-left: 30px;
    padding-right: 30px;
  }

  #detail .main-line .process .inner{
    padding-left: 20px;
    padding-right: 20px;
  }

  #detail .main-line .process .inner .course a{
    border-radius: 28px;
    bottom: 30px;
  }

  .aco-inner a,
  #detail .main-line .outlo .recipe a,
  #detail .main-line .store a{
    bottom: unset;
    border-radius: 28px;
  }

  #detail .main-line .outlo .recipe a{
    margin-top: 30px;
  }

  #detail .main-line .process .inner .course a .arrow,
  .aco-inner a .arrow,
  #detail .main-line .outlo .recipe a .arrow,
  #detail .main-line .outlo .about .box li a .arrow,
  #detail .main-line .store a .arrow{
    width: 24px;
    height: 24px;
  }

  #detail .main-line .process .inner .course a .arrow svg,
  .aco-inner a .arrow svg,
  #detail .main-line .outlo .recipe a .arrow svg,
  #detail .main-line .outlo .about .box li a .arrow svg,
  #detail .main-line .store a .arrow svg{
    width: 10px;
  }

  #detail .main-line .process .tab-ui ul li a img{
    margin-bottom: 8px;
    height: 26px;
  }

  #detail .main-line .process .tab-ui ul li a{
    font-size: 14px;
    line-height: 1.4;
    padding-bottom: 30px;
  }

  #detail .main-line .process .tab-ui ul li{
    width: calc(100%/3 - max(0.64vw, 6px));
  }

  #detail .main-line .process .tab-ui ul{
    gap: 5px;
  }

  .aco-inner .sns-btn{
    font-size: 12px;
  }

  #detail .main-line .outlo .recipe .txt-box{
    padding-left: 40px;
    padding-right: 40px;
  }

  #detail .main-line .outlo .about .box h3{
    font-size: 20px;
  }

  #fv .swiper-slide img{
    width: 280px;
  }

  #fv .swiper-slide{
    gap: 15px;
  }

  #detail .main-line .outlo .about .box{
    padding-top: 40px;
  }

  #detail .main-line .outlo .about .box .more{
    top: -40px;
  }

  .prize-slide{
        max-width: calc(100vw - 90px);
  }

  #detail .main-line .process #explain .txt-box,
  #detail .main-line .process #explain .txt-box p{
    font-size: 14px !important;
  }

  #detail .main-line .process .inner.type4 .top.base{
    width: calc(100% + 18px);
    margin-left: -9px;
  }

   #detail .main-line .store a .arrow{
    width: 20px;
    height: 20px;
    right: 10px;
   }

  #detail .main-line .store a{
    font-size: 12px;
  }

  #detail .main-line .process #explain .prize-slide .swiper-slide{
    padding-left: 10px;
    padding-right: 10px;
  }

  .prize-slide .swiper-button-next, .prize-slide .swiper-button-prev{
    top: 54vw;
  }

  fotter .follow dt {
    margin-left: 24px;
    gap: 12px;
}

fotter .copyright{
  font-size: 10px;
}

.modal-container{
  width: 90vw;
}


}