@charset "utf-8";
:root {
  --bg-color: #e94479; /* 背景色 */
  --text-color: #390504; /* 文字色 */
  --cream: #fdd000;
  --melon: #99ca89;
  --amann: #bbd4ef;
  --cream-line: #fdd000;
  --melon-line: #99ca89;
  --amann-line: #bbd4ef;
}
div#chocobread_cp .sr-only {
  display: none;
}
div#chocobread_cp dl > div {
  display: flex;
  gap: 10px
}
div#chocobread_cp dt {
  font-weight: 600;
  flex-shrink: 0;
  flex-basis: 5em; /* ★追加：dtの幅を「約文字分」に固定する */
}
div#chocobread_cp img {
  width: 100%;
  height: auto;
}
div#chocobread_cp p, h3, dl, ul, li, .list_unit {
  color: #3E0304;
}
div#chocobread_cp svg {
  shape-rendering: geometricPrecision;
}
div#chocobread_cp .fix {
  clear: both;
}
/* =========================================
   商品セクションのレイアウト（PC・共通）
========================================= */
div#chocobread_cp article {
  width: 100%;
}
.product_section {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}
.product_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  color: var(--text-color);
}
.product_list.product_list_top {
  grid-template-columns: repeat(2, calc((100% - 60px) / 3));
  justify-content: center;
}
.product_item {
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product_img {
  margin: 0;
  padding: 0px;
  border: 2px solid;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.product_img img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  display: block;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.product_info {
  padding: 0 15px 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.cream-line {
  border-color: var(--cream);
}
.melon-line {
  border-color: var(--melon);
}
.amann-line {
  border-color: var(--amann);
}
.cream {
  background-color: var(--cream);
}
.melon {
  background-color: var(--melon);
}
.amann {
  background-color: var(--amann);
}
/* テキスト要素の装飾 */
.release_date {
  display: inline-block;
  padding: 8px 20px 0;
  margin-left: -20px;
  margin-top: -28px;
  border-radius: 0 8px 0px 0;
  font-size: clamp(0.85rem, 0.771rem + 0.17vw, 1rem);
  margin-bottom: 8px;
  font-weight: 500;
  align-self: flex-start;
  font-feature-settings: "halt";
}
.product_name {
  font-size: clamp(1.2rem, 1.121rem + 0.17vw, 1.25rem);
  font-weight: 600;
  margin: 5px 0;
  line-height: 1.4;
}
.price {
  font-size: 1.1rem;
  font-weight: bold;
  text-align: right;
  margin-bottom: 1px;
  border-bottom: 1px dashed #e94479;
  padding-bottom: 10px;
}
.description {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 10px 0 5px;
}
.note {
  font-size: 0.75rem;
  margin: 0;
  line-height: 1.4;
  /*margin-top: auto;*/
}
/* =========================================
   こだわりポイント枠
========================================= */
.point_box {
  margin: 5px 0 10px; /* 上下の要素との余白 */
  padding: 10px 10px;
  border: 1px dashed #e94479; /* チョコレート色の破線 */
  border-radius: 8px;
  /* 背景を少しだけ白く透かして、親要素の背景色に馴染ませつつ読みやすくする */
  background-color: rgba(255, 255, 255, 0.6);
}
.point_tit {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background-color: #4b0606; /* 見出しの背景をチョコ色に */
  padding: 4px 12px;
  border-radius: 20px; /* 少し丸みを帯びたバッジ風 */
  margin-bottom: 8px;
}
.point_txt {
  /* description(0.95rem)より小さいサイズに設定 */
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-color);
  margin: 0;
}
/*===============================================

●pc.css 画面の横幅が737px以上


===============================================*/
@media screen and (min-width: 737px) {
  div#chocobread_cp {
    width: calc(100vw - 0.7%);
    margin: 0 calc(50% - 50vw);
    padding-bottom: 30px;
    background-color: var(--bg-color);
    overflow: hidden;
  }
  div#chocobread_cp section {
    padding: 0 15px;
	  box-sizing: border-box;
  }
  div#chocobread_cp .fs-L {
    font-size: 102%;
  }
  div#chocobread_cp .m5 {
    padding: 0 5px;
  }
  div#chocobread_cp main {
    max-width: 1200px;
    margin: 0 auto;
  }
}
div#chocobread_cp .tit_area {
  width: 100%;
  margin: 3rem auto 2rem;
  padding: 24px 30px;
  background-color: #4a0908;
  text-align: center;
  /*border-radius: 6px;*/
  box-shadow:
    inset 9px 9px 0px rgba(255, 255, 255, 0.15), /* 左上のツヤ（ハイライト） */ inset -10px -10px 0px rgba(0, 0, 0, 0.3), /* 右下の影（厚み） */ 5px 5px 7px rgba(0, 0, 0, 0.3); /* 全体の落とし影 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}
#chocobread_cp .tit_area h1 {
  font-family: "Kaisei Decol", serif;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  font-size: clamp(1.8rem, 1.007rem + 1.72vw, 2.8rem);
  color: #fff8f0;
  line-height: 1;
  margin-bottom: 1.2rem;
  text-shadow: 2px 3px 0px rgba(255, 255, 255, 1);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  font-feature-settings: "halt";
}
div#chocobread_cp .lead {
  font-size: clamp(0.95rem, 0.712rem + 0.52vw, 1.1rem);
  font-weight: 500;
  color: #fff8f0;
}
/* --- 共通・PC用 --- */
div#chocobread_cp .tit_bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%; /* PC版での全体の幅（好みに合わせて調整してください） */
  margin: 3rem auto 2rem;
}
/* 左右の3本線の装飾（自動で伸び縮みします） */
div#chocobread_cp .tit_bg::before, div#chocobread_cp .tit_bg::after {
  content: "";
  flex-grow: 1;
  height: 21px;
  background-image: repeating-linear-gradient(180deg, rgba(253, 208, 0, 1), rgba(253, 208, 0, 1) 33%, rgba(153, 202, 137, 1) 34%, rgba(153, 202, 137, 1) 66%, rgba(187, 212, 239, 1) 67%, rgba(187, 212, 239, 1));
}
div#chocobread_cp .tit_h2 {
  padding: 0 1.5rem; /* テキストと線の隙間 */
  background-color: var(--bg-color);
  color: #3E0304;
  font-size: 2rem;
  font-family: "Kaisei Decol", serif;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  line-height: 1.4; /* テキストが2行になった時の行間 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  font-feature-settings: "halt";
}
.youtube {
  position: relative;
  width: 93%;
  margin: 1rem auto 1rem;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
  overflow: hidden;
  margin-top: 0px;
}
.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
div#chocobread_cp .aten {
  width: 1400px;
  text-align: right;
  font-size: 0.85rem;
  margin-top: 30px;
  margin-bottom: -40px;
}
/* ====================================
   ▼ SPレイアウト (736px以下) ▼
   ==================================== */
@media screen and (max-width:736px) {
  div#chocobread_cp {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 0 0 2rem;
    margin-top: -10px;
    background-color: var(--bg-color);
  }
  footer {
    background-color: #fff;
    z-index: -2;
  }
div#chocobread_cp .aten {
  width: 100%;
  text-align: right;
  font-size: 0.7rem;
  margin-top: 30px;
  margin-bottom: -40px
}	
  div#chocobread_cp .fs-L {
    font-size: 90%;
  }
  div#chocobread_cp main {
    max-width: 100%;
  }
  div#chocobread_cp .tit_area {
    width: 100%;
    margin: 3rem auto 2rem;
    padding: 24px 10px;
    box-sizing: border-box;
  }
  div#chocobread_cp .tit_bg {
    width: 95%; /* スマホでは幅を広げて、テキストの表示エリアを確保 */
    margin: 2rem auto 1.5rem;
  }
  div#chocobread_cp .tit_h2 {
    font-size: 1.5rem; /* スマホ用にフォントサイズを少し縮小 */
    padding: 0 0.8rem; /* テキストと線の隙間も少し狭める */
    margin: 1rem auto;
  }
  div#chocobread_cp .product_list {
    grid-template-columns: 1fr; /* スマホ: 1カラム */
    gap: 0px;
    margin-bottom: 0;
  }
  div#chocobread_cp section {
    padding: 0 15px;
  }
  .youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    margin-bottom: .5rem;
    height: 0;
    overflow: hidden;
    margin-top: 0px;
  }
  .youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
/* ===============================================
   KVエリア共通レイアウト（PC・SP共通）
=============================================== */
/* ▼ タイトルと背景（フルスクリーン）のエリア */
.kv_tit_area {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}
.bg_choco_img {
  width: 100%;
  height: auto;
  display: block;
}
/* ▼ 変更：タイトルが背景からはみ出さないようにする指定 */
.kv_tit_area .tit {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  /* 背景の領域に対して、左右上下に少し余裕を持たせた枠を作る */
  width: 90%;
  height: 80%; /* 背景の高さの80%までしか広がらないように制限 */
  /* 枠の中で画像をど真ん中に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.kv_tit_area .tit img {
  width: 100%;
  height: 100%; /* 親要素（.tit）の高さを基準にする */
  /* ▼ ここがポイント！縦横比を保ったまま、枠からはみ出さないように自動縮小する */
  object-fit: contain;
}
/* ▼ 商品（item01〜03）を配置するエリア */
.kv_items_area {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.kv_items_area img {
  width: 100%;
  height: auto;
  display: block;
}
/* ===============================================
   ● pc.css 画面の横幅が737px以上
=============================================== */
@media screen and (min-width: 737px) {
  .kv_tit_area .tit {
    max-width: 1200px;
    margin: 0 auto;
  }
  /* アイテムエリアの高さ（比率）を確保 */
  .kv_items_area {
    max-width: 1200px;
    aspect-ratio: 1200 / 350; /* ★PC時の商品の高さに合わせて数値を調整してください */
    margin-top: -40px; /* 背景と商品の間の余白 */
  }
  /* --- 子要素の絶対配置 --- */
  .item01 {
    position: absolute;
    top: 0;
    width: 35.41%;
    left: 0;
    z-index: 11;
  }
  .item02 {
    position: absolute;
    top: 0%;
    width: 31.66%;
    left: 36%;
    z-index: 11;
  }
  .item03 {
    position: absolute;
    top: 0;
    width: 32.91%;
    right: 0;
    z-index: 11;
  }
}
/* ====================================
   ▼ SPレイアウト (736px以下) ▼
==================================== */
@media screen and (max-width:736px) {
  .kv_tit_area .tit {
    width: 100%;
    max-width: 1040px;
    margin: -10px auto;
  }
  /* アイテムエリアの高さ（比率）を確保 */
  .kv_items_area {
    max-width: 1040px;
    aspect-ratio: 1040 / 680;
    margin-top: -20px;
    margin-bottom: -40px;
  }
  /* --- 子要素の絶対配置 --- */
  .item01 {
    position: absolute;
    top: 0%;
    width: 55.76%;
    left: 0%;
    z-index: 11;
  }
  .item02 {
    position: absolute;
    top: 0%;
    width: 41.53%;
    right: 0%;
    z-index: 11;
  }
  .item03 {
    position: absolute;
    top: 48%;
    width: 57.01%;
    left: 18%;
    z-index: 11;
  }
}
/* =========================================
   スクロールアニメーション（ふわっと現れる）
========================================= */
.js-fade {
  opacity: 0;
  transform: translateY(30px); /* 30px下から */
  transition: opacity 0.8s ease, transform 0.8s ease; /* 0.8秒かけて変化 */
}
/* JSでこのクラスが付与されると表示される */
.js-fade.is-active {
  opacity: 1;
  transform: translateY(0);
}
/* =========================================
   KV アニメーション設定（完全版）
========================================= */
/* =========================================
   1. 初期状態（読み込み完了まで見えない状態にしておく）
========================================= */
/* ① 背景チョコ */
.bg_choco_img {
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, rgba(0, 0, 0, 0) 60%);
  mask-image: linear-gradient(to bottom, #000 40%, rgba(0, 0, 0, 0) 60%);
  -webkit-mask-size: 100% 250%;
  mask-size: 100% 250%;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  opacity: 0;
}
/* ② タイトル */
.kv_tit_area .tit {
  clip-path: inset(0 50% 0 50%);
  opacity: 0;
}
/* ③ 商品（item01〜03） */
.item01, .item02, .item03 {
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
}
/* =========================================
   2. アニメーションの実行（JSで .is-loaded が付与されたら一斉に開始）
========================================= */
/* ① 背景チョコ */
.is-loaded .bg_choco_img {
  animation: dropChoco 2.0s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* ② タイトル（チョコがある程度見えてから 1.0秒後 に開始） */
.is-loaded .kv_tit_area .tit {
  animation: expandTit 1.2s ease-out 1.0s forwards;
}
/* ③ 商品（タイトルが広がる頃に順次開始） */
.is-loaded .item01 {
  animation: powanPop 0.8s ease-out 1.8s forwards;
}
.is-loaded .item02 {
  animation: powanPop 0.8s ease-out 2.1s forwards;
}
.is-loaded .item03 {
  animation: powanPop 0.8s ease-out 2.4s forwards;
}
/* =========================================
   3. アニメーションの動き（キーフレーム）
========================================= */
@keyframes dropChoco {
  0% {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    opacity: 0;
  }
  100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    opacity: 1;
  }
}
@keyframes expandTit {
  0% {
    clip-path: inset(0 50% 0 50%);
    opacity: 0;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes powanPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}