@charset "UTF-8";
/* CSS Document */

/*-----通常（PC向け）の記述-----*/
html, body {
  height: 100%; /* 親の高さを確保 */
  margin: 0;
  -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: 30px auto;
}

.fv {
  position: relative;
}

.sp-fv-image {
  display: none;
}

.time {
  position: absolute;
  width: 73%;
  bottom: 3%;
  left: 13%;
}

.set-popup {
  background: url("../img/background-01.jpg") center/cover no-repeat;
  margin-top: 8rem;
  position: relative;
  padding-top: 12rem;
}

.ultra-set {
  width: 70%;
  margin: auto;
  position: relative;
  top: -20rem;
  opacity: 0;
  transform: translateY(60px) scale(0.85);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ultra-set.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.usm-set,
.saiki-set,
.rito,
.ittetsu,
.liver {
  position: relative;
}

.inner {
  width: 63.2%;
  margin: auto;
}

.under {
  margin-top: 8rem;
}



.buybuttun {
  position: absolute;
  width: 58%;
  bottom: 0%;
  right: 20%;
}

.buybuttun2 {
  position: absolute;
  width: 58%;
  bottom: 4%;
  right: 21%;
}

.movie1 {
  background-image: url(../img/live.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15vw 0;
}

.youtube {
  width: 76%;
  aspect-ratio: 16 / 9;
  position: relative;
  margin-top: 29%;
}

/* iframeを親要素いっぱいに広げる */
.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.x-share img {
  width: 65%;
  margin: 5% auto 5% auto;
}

.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;
}

/* ラインナップアコーディオン */
.lineup-bery,
.lineup-milk,
.lineup-poteto,
.lineup-maccha,
.lineup-choco {
  position: relative;
  width: 63.2%;
  margin: auto;
}

/* 上画像をボタンの基準にする */
.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;
  padding-bottom: 80px;
}

/* 下画像：背景化（アコーディオンの高さにフィット） */
.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;
}

/* パネル（テキスト）＝前面。内容幅だけ中央寄せ */
.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; }
#acc-poteto .info-head { background: #d9b7e0; }
#acc-maccha .info-head { background: #d1dfb7; }
#acc-choco .info-head { background: #d5b8ad; }

/* 本文：白地に直置き（小箱/枠/角丸をやめる） */
.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;
}

/* フッター */
#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;
}

/* フローティングバナー */
.floating-banner {
  position: fixed; /* 追従 */
  z-index: 99999; /* 他の要素の下に隠れないように */
  bottom: 0; /* バナーの上下の位置 */
  text-align: center;
  width: 100%;
}

.pc-f {
  width: 250px;
  margin: 12px;
  position: fixed;
  bottom: 3%;
  right: 10px;
}

.sp-f {
  display: none;
}

.floating-banner:hover {
  opacity: .9; /* ホバーで少し透過 */
}

/*-----フェード----*/
.fade {
  transition: all 1000ms;
  opacity: 0;
  visibility: hidden;
  transform: translate(0px, 100px);
}

.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%;
}


/* ===============================
   タブレット・スマホ（768px以下）調整
   =============================== */
@media (max-width: 768px) {
  .headimg img {
    width: 60%;
    margin: 30px auto; /* 全角スペースを修正 */
  }
  
  .time {
    bottom: 1%;
  }
  
  .sp-fv-image {
    display: block !important;
  }
  
  .set-popup {
    margin-top: 4rem;
    padding-top: 12rem;
  }
  
  .ultra-set {
    width: 80%;
    right: 0.7rem;
    top: -14.5rem;
  }
  
  .inner {
    width: 100%;
  }
  
  .sp-image {
    width: 100%;
    height: 96vh;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  
  .sp-image2 {
    width: 100%;
    height: 48vh;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  
  .sp-image3 {
    width: 100%;
    height: 102vh;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  
  .sp-image4 {
    width: 100%;
    height: 98vh;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  
  .rito-img { 
    width: 65%;
    display: block;
    margin: 0 auto;
    height: auto;    
    left: 18.5%;
  }
  
  .ittetsu-img { 
    width: 58%;
    display: block;
    margin: 0 auto;
    height: auto;    
    left: 20.5%;
  }
  
  .buybuttun {
    width: 70%;
    bottom: 11%;
    right: 15%;
  }
  
  .buybuttun2 {
    width: 70%;
    bottom: 6%;
    right: 15%;
  }
  
  .youtube {
    width: 93%;
    margin-top: 33%;
  }
  
  .x-share img {
    width: 90%;
    margin: 8% auto 8% auto;
  }
  
  .liver {
    display: block;
  }
  
  .lineup-bery,
  .lineup-milk,
  .lineup-poteto,
  .lineup-maccha,
  .lineup-choco {
    width: 100%;
  }
  
  .info-card { padding: 12px; }
  .info-section { margin-bottom: 14px; }
  .info-section > p,
  .info-section > .kv,
  .info-section > ul { padding: 12px 14px; }
  
  #a-fotter {
    width: 100%;
    padding: 25px 0;
    font-size: 1rem;
    margin-bottom: 20px;
  }
  
  .pc-image,
  .pc {
    display: none;
  }
  
  .sp-f {
    display: inline-block;
    width: 100%;
    margin-bottom: 0px;
  }
  
  .pc-f {
    display: none;
  }
  
  
}

/* ===============================
   iPhone SE・小型端末専用調整 (〜375px)
   =============================== */
@media screen and (max-width: 375px) {
  .sp-image { height: 96vh; }
  .sp-image2 { height: 60vh; }
  .sp-image3 { height: 120vh; }
  .sp-image4 { height: 114vh; }
}

/* ===============================
   スマホ全般（〜480px）追加調整
   =============================== */
@media screen and (max-width: 480px) {
  .buybuttun {
    width: 82%;
    bottom: 13%;
    right: 8.5%;
  }
  
  .buybuttun2 {
    width: 84%;
    bottom: 2%;
    right: 8.5%;
  }
  
  .movie1 {
    margin-top: 3rem;
  }
  
  .under {
    margin-top: 3rem;
  }
}

/* ===============================
   iPad mini 端末専用調整 (744px 〜 1023px)
   =============================== */
@media (min-width: 744px) and (max-width: 1023px) {
  .sp-image { height: 96vh; }
  .sp-image2 { height: 77vh; }
  .sp-image3 { height: 165vh; }
  .sp-image4 { height: 158vh; }
  
  .inner,
  .lineup-bery,
  .lineup-milk,
  .lineup-poteto,
  .lineup-maccha,
  .lineup-choco {
    width: 100%;
  }
  
  .pc {
    display: none;
  }
}

/* ===============================
   iPad Air 縦向き用調整 (820px 〜 1023px)
   =============================== */
@media screen and (min-width: 820px) and (max-width: 1023px) and (orientation: portrait) {
  .sp-image { height: 86vh; }
  .sp-image2 { height: 76vh; }
  .sp-image3 { height: 150vh; }
  .sp-image4 { height: 144vh; }
  
  .rito-img {
    width: 76%;
    bottom: 77.2%;
    left: 11.5%;
  }
  
  .buybuttun {
    width: 90%;
    bottom: 10%;
    right: 5%;
  }
  
  .buybuttun2 {
    width: 90%;
    bottom: 5%;
    right: 5%;
  }
  
  .ittetsu-img {
    width: 57%;
    bottom: 75.4%;
    left: 21.5%;
  }
  
  .youtube {
    width: 100%;
    margin-top: 30%;
  }
  
  .x-share img {
    width: 78%;
  }
  
  .liver {
    display: block;
  }
  
  .rito-liver {
    width: 99%;
    top: 19%;
    left: 4%;
  }
  
  .ittetsu-liver {
    width: 99%;
    bottom: 6.2%;
    left: 4%;
  }
}

/* ===============================
   iPad 第9世代：縦向き調整 (〜810px)
   =============================== */
@media (max-width: 810px) and (orientation: portrait) {
  .sp {
    display: block;
  }
  
  .rito-img {
    width: 70%;
    bottom: 77.2%;
    left: 15.5%;
  }
  
  .ittetsu-img {
    width: 54%;
    bottom: 75.4%;
    left: 24%;
  }
}

/* ===============================
   タブレット用フローティング非表示調整
   =============================== */
@media screen and (max-width: 990px) {
  .header_top_area {
    padding-left: 10px;
    padding-right: 14px;
  }
}