@charset "UTF-8";
/* CSS Document */
/*-----通常（PC向け）の記述-----*/
html, body {
  height: 100%; /* 親の高さを確保 */
  margin: 0;
}

html, body {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  overflow-anchor: none;
}
body {
   font-family: 
  -apple-system,
  BlinkMacSystemFont,
  "Yu Gothic Medium",
  YuGothic,
  "游ゴシック体",
  "Noto Sans Japanese",
  "メイリオ",
  "Hiragino Kaku Gothic ProN",
  "MS PGothic",
  Osaka,
  sans-serif;
    overflow-x: hidden;
   
}
.wrapper {
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
    padding-bottom: 80px;
 
}
/* デスクトップ以上で最小幅を固定 */
@media (min-width: 1024px) {
  .wrapper {
    min-width: 1024px;
  }
}
.img1 {
  animation-name: fade;
  animation-duration: 2s;
  animation-iteration-count: 1;
}
.sp{
    display: none;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
img {
  width: 100%;  
  height: auto;      /* 縦は自動 = 比率保持 */
  display: block;    /* 余計な隙間対策 */
}
.headimg img {
  width: 40%;
  margin: auto;
}
@media (max-width: 768px) {
.headimg img {
  width: 60%;
  margin: auto;
}
  }  
.inner{
        width: 63.2%;
    margin: auto;
}

@media screen and (max-width: 768px) { /* スマホ用のブレイクポイントを指定 */
.inner{
        width: 100%;
    
}
}


@media (max-width: 768px) {
  .sp-image {
    width: 100%;
    height: 68vh;            /* ← 表示したい高さ。調整OK（例：250〜350px） */
    object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }
      .sp-image2 {
    width: 100%;
    height: 48vh;            /* ← 表示したい高さ。調整OK（例：250〜350px） */
    object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }
          .sp-image3 {
    width: 100%;
    height: 102vh;          /* ← 表示したい高さ。調整OK（例：250〜350px） */
    object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }
              .sp-image4 {
    width: 100%;
    height: 98vh;          /* ← 表示したい高さ。調整OK（例：250〜350px） */
    object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }

}


.rito-img {
  will-change: transform, width, left;
}

.rito-img {
  position: absolute;
  width: 46%;
  bottom: 77.2%;
  left: 27.5%;
  margin: 0;
  padding: 0;
}
@media (max-width: 768px) {
  .rito-img { 
    width: 65%;
    display: block;
    margin: 0 auto;  /* 中央寄せ */
    height: auto;    
      left: 18.5%;
  }
}




.rito {
  position: relative;
}
.ittetsu-img {
  will-change: transform, width, left;
}

.ittetsu-img {
  position: absolute;
  width: 35%;
  bottom: 75.4%;
  left: 32.5%;
  margin: 0;
  padding: 0;
}
@media (max-width: 768px) {
  .ittetsu-img { 
    width: 58%;
    display: block;
    margin: 0 auto;  /* 中央寄せ */
    height: auto;    
      left: 20.5%;
  }
}

.ittetsu {
  position: relative;
}
.buybuttun {
  position: absolute;
  width: 52%;
  bottom: 12%;
  right: 24%;
}
.buybuttun2 {
  position: absolute;
  width: 52%;
  bottom: 6%;
  right: 24%;
}
@media (max-width: 768px) {
  .buybuttun {
   position: absolute;
        width: 70%;
        bottom: 11%;
        right: 15%;
  }
    .buybuttun2 {
    position: absolute;
    width: 70%;
    bottom: 6%;
    right: 15%;
  }
}
/* スマホ全般 (〜480px) */
@media screen and (max-width: 480px) {
  .buybuttun {
   position: absolute;
        width: 90%;
        bottom: 11%;
        right: 5%;
  }
    .buybuttun2 {
    position: absolute;
    width: 90%;
    bottom: 6%;
    right: 5%;
  }
}


.movie1 {
  background-image: url(../img/img5.jpg);
  background-size: cover; /* 背景を全体にフィット */
  background-position: center; /* 背景の位置 */
  background-repeat: no-repeat;
  display: flex; /* 中央寄せ用 */
  justify-content: center; /* 横方向中央 */
  align-items: center; /* 縦方向中央 */
  padding: 27vw 0; /* 上下に余白を追加 */
}
.youtube {
  width: 67%;
  aspect-ratio: 16 / 9;
  position: relative;
  margin-top: 17%; /* PCでは少し下げる */
}
@media (max-width: 768px) {
  .youtube {
    width: 100%;
    margin-top: 28%; /* スマホでは少し控えめに */
  }
}
/* iframeを親要素いっぱいに広げる */
.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}


.x-share img{
    width: 50%;
    margin: 8% auto 8% auto;
}
@media (max-width: 768px) {
.x-share img{
    width: 90%;
    margin: 8% auto 8% auto;
  }
}


.liver {
  position: relative;
}

.rito-liver {
  position: absolute;
  width: 65%;
    top: 18%;
    left: 18%;
  margin: 0;
  padding: 0;
    
}


.ittetsu-liver {
  position: absolute;
     width: 65%;
    bottom: 10.2%;
  left: 18%;
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
    
.liver {
  display: block;
}

  }





/* ラインナップアコーディオン */
.lineup-bery { position: relative; 

    width: 63.2%;
    margin: auto;
}
.lineup-milk { position: relative; 

    width: 63.2%;
    margin: auto;
}
.lineup-poteto { position: relative; 

    width: 63.2%;
    margin: auto;
}
.lineup-maccha { position: relative; 

    width: 63.2%;
    margin: auto;
}
.lineup-choco { position: relative; 

    width: 63.2%;
    margin: auto;
}
/* スマートフォン表示（768px以下） */
@media screen and (max-width: 768px) {
  .lineup-bery,
  .lineup-milk,
  .lineup-poteto,
  .lineup-maccha,
  .lineup-choco {
    width: 100%;
  }
}


/* 上画像をボタンの基準にする */
.top-wrap { position: relative; }

/* 上画像 */
.top-image { width: 100%; height: auto; display: block; }

/* ボタン（上画像の中に配置） */
.item-button{
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 5;      /* パネルより前 */
  width: 80%;
}
.item-button img{ width: 100%; height:auto; display:block; }

/* アコーディオン（JSで max-height を可変） */
.accordion{
  width:100%;
  max-height:0;
  opacity:0;
  overflow:hidden;                 /* はみ出し隠す */
  transition:max-height .45s ease, opacity .2s linear;
  position:relative;               /* 絶対配置の基準にする */
  z-index:1;
}
.accordion.is-open{ opacity:1; }

/* 下画像：背景化（アコーディオンの高さにフィット） */
.bottom-image{
  position:absolute;
  inset:0;                         /* top/right/bottom/left:0 */
  width:100%;
  height:100% !important;          /* height:auto を打ち消す */
  object-fit:cover;                /* 余分はトリミング */
  object-position:center top;      /* 見せたい位置で調整可 */
  z-index:0;
  pointer-events:none;
  user-select:none;
}
.accordion.is-open {
  opacity: 1;
padding-bottom: 80px; /* ← 下に余白を追加。お好みで20〜60pxなど調整 */
}

/* パネル（テキスト）＝前面。内容幅だけ中央寄せ */
.panel{
  position:relative;
  z-index:1;
  width: 80%;
  max-width: 900px;
  margin: 0 auto;
}

/* パネル内の画像だけフィット */
.panel img { display:block; max-width:100%; width:100%; height:auto; }


/* 外枠：白地＋細い枠、影ほぼナシ、角丸小さめ */
.info-card{
  background: #fff;
  border: 1px solid #3b1e1e;   /* 細い濃いめの枠 */

}

/* セクションの器は透明・余白だけ（=小箱は廃止） */
.info-section{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 10px;
}

/* 見出し帯：フラットなピンク、左寄せ、角丸なし */
.info-head{
  background: #f3d0d7;         /* 見出しのピンク帯 */
  color: #000;                  /* 黒寄りの文字色 */
  font-weight: 900;
  text-align: left;             /* ← 左寄せ */
  padding: 12px 16px;
  margin: 0;
 
  border-radius: 0;             
  font-size: clamp(15px, 2.6vw, 24px);
}
.info-head small{
  font-weight: 400;
  opacity: .8;
  margin-left: .4em;
}

#acc-milk .info-head{
  background: #f7eac8;         /* 見出しの帯 */
  color: #000;                  /* 黒寄りの文字色 */
  font-weight: 900;
  text-align: left;             /* ← 左寄せ */
  padding: 12px 16px;
  margin: 0;
 
  border-radius: 0;             
  font-size: clamp(15px, 2.6vw, 24px);
}


#acc-poteto .info-head{
  background: #d9b7e0;         /* 見出しの帯 */
  color: #000;                  /* 黒寄りの文字色 */
  font-weight: 900;
  text-align: left;             /* ← 左寄せ */
  padding: 12px 16px;
  margin: 0;
 
  border-radius: 0;             
  font-size: clamp(15px, 2.6vw, 24px);
}
#acc-maccha .info-head{
  background: #d1dfb7;         /* 見出しの帯 */
  color: #000;                  /* 黒寄りの文字色 */
  font-weight: 900;
  text-align: left;             /* ← 左寄せ */
  padding: 12px 16px;
  margin: 0;
 
  border-radius: 0;             
  font-size: clamp(15px, 2.6vw, 24px);
}

#acc-choco .info-head{
  background: #d5b8ad;         /* 見出しの帯 */
  color: #000;                  /* 黒寄りの文字色 */
  font-weight: 900;
  text-align: left;             /* ← 左寄せ */
  padding: 12px 16px;
  margin: 0;
 
  border-radius: 0;             
  font-size: clamp(15px, 2.6vw, 24px);
}

/* 本文：白地に直置き（小箱/枠/角丸をやめる） */
.info-section > p,
.info-section > .kv,
.info-section > ul{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 1rem 2rem;
  margin: 0;
  color: #111;
  font-size: clamp(14px, 2.3vw, 23px);
  line-height: 1.9;
    text-align: left;
}

/* 規格成分：左右2カラム、下線だけで区切る */
.kv{ display: block; }
.kv > div{
  display: grid;
  grid-template-columns: 1fr auto;  /* 名称 | 数値 */
  gap: 12px;
  padding: 10px 0;
 
}
.kv > div:last-child{ border-bottom: 0; }
.kv dt{ margin: 0;  }
.kv dd{ margin: 0; text-align: right; min-width: 4em; }

/* 箇条書き：ゆったりめに */
.bullet{ padding: 0 0 0 1.2em; }
.bullet li{ margin: .45em 0; }

/* 数値の並びをきれいに */
.mono{ font-variant-numeric: tabular-nums; letter-spacing: .02em; }

sub {
  vertical-align: baseline; /* 通常のベースラインに戻す */
  position: relative;
  top: 0.1em;
    font-size: 0.7em;
}

@media (max-width: 768px) {
  .info-card{ padding: 12px; }
  .info-section{ margin-bottom: 14px; }
  .info-section > p,
  .info-section > .kv,
  .info-section > ul{ padding: 12px 14px; }
}

/* フッター */
#a-fotter {
  width: 63.2%;
  margin-right:auto;
    margin-left: auto;
  background-color: #fff;
  color: #000;
  text-align: center;
  padding: 25px 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  border: 1px solid #ddd;
  box-sizing: border-box;
    margin-bottom: 10%;
   
}
@media (max-width: 768px) {
    #a-fotter {
  width: 100%;
 
  padding: 25px 0;
 font-size: 1rem;
        margin-bottom: 20px;
   
}
}

/* ===============================
   iPhone SE・小型端末専用調整
   =============================== */
@media screen and (max-width: 375px) {
    .sp-image {
                height: 78vh;
        object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }
        .sp-image2 {
                height: 60vh;
            object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }
     .sp-image3 {
                height: 120vh;
         object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }
     .sp-image4 {
                height: 114vh;
         object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }
       
        .pc{
        display: none;
    }
}


/* ===============================
   iPad mini 端末専用調整
   =============================== */
@media (min-width: 744px) and (max-width: 1023px) {

    .sp-image {
                height: 96vh;
          object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }
        .sp-image2 {
                height: 77vh;
              object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }
     .sp-image3 {
                height: 165vh;
           object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }
     .sp-image4 {
                height: 158vh;
           object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }
    
    .inner {width:100%;
    }
        .pc{
        display: none;
    }
     .lineup-bery { position: relative; 

    width: 100%;
   
}
.lineup-milk { position: relative; 

    width: 100%;
}
.lineup-poteto { position: relative; 

    width: 100%;
}
.lineup-maccha { position: relative; 

    width: 100%;
    margin: auto;
}
.lineup-choco { position: relative; 

 width: 100%;
}
}
@media screen and (min-width: 820px) and (max-width: 1023px) and (orientation: portrait) {
      /* Air 縦向き用 */
     .sp-image {
                height: 86vh;
           object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }
    
        .sp-image2 {
                height: 76vh;
              object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }
     .sp-image3 {
                height: 150vh;
           object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }
     .sp-image4 {
                height: 144vh;
           object-fit: cover;      /* ← この1行で左右トリミング */
    object-position: center;/* ← 中央を見せる（左右均等にカット） */
    display: block;
  }
       
    .inner {width:100%;
    }

    .rito-img {
    
    width: 76%;
    bottom: 77.2%;
    left: 11.5%;
    
}
    .buybuttun {
    position: absolute;
    width: 90%;
    bottom: 10%;
    right: 5%;
}
        .buybuttun2 {
    position: absolute;
    width: 90%;
    bottom: 5%;
    right: 5%;
}
    .ittetsu-img {
    position: absolute;
    width: 57%;
    bottom: 75.4%;
    left: 21.5%;
   
}
    .youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    margin-top: 30%;
}
    .x-share img {
    width: 78%;
   
}
    .liver {
  display: block;
}
    .rito-liver {
    position: absolute;
        width: 99%;
    top: 19%;
    left: 4%;
    margin: 0;
    padding: 0;
}
    
    .ittetsu-liver {
    position: absolute;
    width: 99%;
    bottom: 6.2%;
    left: 4%;
    margin: 0;
    padding: 0;
}
    .lineup-bery { position: relative; 

    width: 100%;
   
}
.lineup-milk { position: relative; 

    width: 100%;
}
.lineup-poteto { position: relative; 

    width: 100%;
}
.lineup-maccha { position: relative; 

    width: 100%;
    margin: auto;
}
.lineup-choco { position: relative; 

 width: 100%;
}
    
    .pc{
        display: none;
    }
    .top-image {
    width: 100%;
    height: auto;
    display: block;
}
}

 /* iPad 第9世代：縦向き */
@media (max-width: 810px) and (orientation: portrait) {

    .sp{display: block;}
    .pc{
        display: none;
    }
        .rito-img {
        width: 70%;
        bottom: 77.2%;
        left: 15.5%;
    }
    .ittetsu-img {
   width: 54%;
    bottom: 75.4%;
    left: 24%;
}
}

/* =======================================

floating-banner

========================================== */
.floating-banner {
  position: fixed; /* 追従 */
  z-index: 99999; /* 他の要素の下に隠れないように */
  bottom: 0; /* バナーの上下の位置 */
  text-align: center;
  width: 100%;
}
.pc-f {
  width: 250px;
  margin: 12px;
  position: fixed;
  bottom: 15%;
  right: 10px;
}
.sp-f {
  display: none;
}
.floating-banner:hover {
  opacity: .9; /* ホバーで少し透過 */
}

/*-----スマホ向けの記述-----*/
@media screen and (max-width: 479px) { /*ウィンドウ幅が0～479pxの場合にCSSを適用*/
}
@media screen and (max-width: 990px) { /* タブレット用のブレイクポイントを指定 */
  .pc-f {
    display: none;
  }
  .sp-f {
    display: inline-block; /* 消していたスマホ用のバナーを表示させる */
    width: 100%;
    margin-bottom: 0px;
  }
  .header_top_area {
    padding-left: 10px;
    padding-right: 14px;
  }
}
@media (max-width: 768px) {/* スマホ用のブレイクポイントを指定 */
  .sp-f {
    display: inline-block; /* 消していたスマホ用のバナーを表示させる */
    width: 100%;
    margin-bottom: 0px;
  }
  
  .pc {
    display: none;
  }

    
  /* =======================================

floating-banner

========================================== */
  .floating-banner {
    position: fixed; /* 追従 */
    z-index: 99999; /* 他の要素の下に隠れないように */
    bottom: 0; /* バナーの上下の位置 */
    text-align: center;
    width: 100%;
  }
  .pc-f {
    width: 60px;
    margin: 12px;
    position: fixed;
    bottom: 84px;
    right: 10px;
  }
  .pc-f2 {
    width: 98px;
    margin: 12px;
    position: fixed;
    bottom: 10px;
    right: 0px;
  }
  .floating-banner:hover {
    opacity: .9; /* ホバーで少し透過 */
  }
}
/*-----フェード----*/
.fade {
  transition: all 1000ms;
  opacity: 0;
  visibility: hidden;
  transform: translate(0px, 20px);
}
.fadein {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
}
/*下からフェードイン*/
.fade-in-bottom {
  opacity: 0;
  animation-name: fadein-bottom;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
.fade-in-left {
  transform: translate(50px, 0);
	transition-duration: 1000ms;
	opacity: 0;
}

.fade-in-right {
  transform: translate(-50px, 0);
	transition-duration: 1000ms;
	opacity: 0;
}
.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

@keyframes fadein-bottom {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.formend {
  margin-bottom: 9%;
}