@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 737px) {
  #contents {
    width: 100%;
    min-height: 1000px;
    background-image: linear-gradient(180deg, rgba(0, 118, 212, 1), rgba(0, 201, 248, 1) 70%, rgba(80, 219, 246, 1));
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
  }
}
@media screen and (max-width:736px) {
  #contents::before {
    background-image: linear-gradient(180deg, rgba(0, 118, 212, 1), rgba(0, 201, 248, 1) 70%, rgba(80, 219, 246, 1));
    background-size: cover;
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background-position: bottom;
    z-index: -100;
    width: 100%;
    height: 100vh;
  }
  footer {
    background: #fff;
    z-index: -2;
  }
}
@media screen and (min-width: 737px) {
  #motchiribread_cp {
    width: calc(100vw - 0.7%);
    margin: 0 calc(50% - 50vw);
  }
  #motchiribread_cp main {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 1rem;
    z-index: 100;
  }
  /* 親要素を可変＆比率固定にする */
  #motchiribread_cp .kv_area {
    position: relative;
    max-width: 1300px;
    width: 100%; /* 画面幅に合わせて縮小させる */
    margin: 0 auto;
    aspect-ratio: 1300 / 630; /* heightの代わりにアスペクト比で高さを維持 */
  }
  /* KV内の画像が枠に合わせて可変するように設定 */
  #motchiribread_cp .kv_area img {
    width: 100%;
    height: auto;
    display: block;
  }
  /* --- 子要素の絶対配置 --- */
  .kv_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  /* pxから％に変換 （例: 222px / 1300px * 100 = 約17.07%） */
  .donut {
    position: absolute;
    top: 0;
    width: 17.07%; /* 元222px */
    left: 23.07%; /* 元300px */
  }
  .an {
    position: absolute;
    top: 0;
    width: 16.69%; /* 元217px */
    left: 41%; /* 元533px */
  }
  .pizza {
    position: absolute;
    top: 0;
    width: 16.84%; /* 元219px */
    left: 58.61%; /* 元762px */
  }
  .tit {
    position: absolute;
    top: 13%;
    width: 75.61%;
    left: 11%;
  }
  #motchiribread_cp .txt_area {
    width: 100%;
    padding: 1rem 0;
    background-color: rgba(255, 250, 240, 1);
    background-image: linear-gradient(180deg, rgba(255, 254, 253, 1), rgba(253, 224, 168, 1) 100%, rgba(253, 236, 201, 1) 80%);
  }
}
@media screen and (max-width:736px) {
  #motchiribread_cp {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    margin-top: -10px;
  }
  #motchiribread_cp main {
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 1rem;
    z-index: 100;
  }
  /* 親要素を可変＆比率固定にする */
  #motchiribread_cp .kv_area {
    position: relative;
    max-width: 1040px;
    width: 100%; /* 画面幅に合わせて縮小させる */
    margin: 0 auto;
    aspect-ratio: 1040 / 1040; /* heightの代わりにアスペクト比で高さを維持 */
  }
  /* KV内の画像が枠に合わせて可変するように設定 */
  #motchiribread_cp .kv_area img {
    width: 100%;
    height: auto;
    display: block;
  }
  /* --- 子要素の絶対配置 --- */
  .kv_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  /* pxから％に変換 （例: 222px / 1300px * 100 = 約17.07%） */
  .donut {
    position: absolute;
    top: 2.5%;
    width: 21.34%; /* 元222px */
    left: 15.5%; /* 元300px */
  }
  .an {
    position: absolute;
    top: 2.5%;
    width: 20.86%; /* 元217px */
    left: 38%; /* 元533px */
  }
  .pizza {
    position: absolute;
    top: 2.5%;
    width: 21.05%; /* 元219px */
    left: 60%; /* 元762px */
  }
  .tit {
    position: absolute;
    top: 12%;
    width: 94.51%;
    left: 3%; /* 元300px */
  }
  #motchiribread_cp .txt_area {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    background-image: linear-gradient(180deg, rgba(255, 254, 253, 1), rgba(253, 224, 168, 1) 100%, rgba(253, 236, 201, 1) 80%);
    padding: 1.2rem 0;
  }
}
/* --- 既存CSS調整 --- */
#motchiribread_cp .fix {
  clear: both;
}
#motchiribread_cp img {
  width: 100%;
  height: auto;
  display: block;
}
#motchiribread_cp .h1_tit {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-style: normal;
  text-align: center;
  font-size: clamp(1.8rem, 1.007rem + 1.72vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 15px;
  color: #873A20;
}
#motchiribread_cp .h1_tit > span {
  font-size: 130%;
}
#motchiribread_cp .h1_tit .sub {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-style: normal;
  text-align: center;
  font-size: clamp(1rem, 0.683rem + 0.69vw, 1.2rem);
  color: #873A20;
  letter-spacing: 0em;
  font-feature-settings: "halt";
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
}
#motchiribread_cp .h2_tit {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-style: normal;
  text-align: center;
  font-size: clamp(1.8rem, 1.007rem + 1.72vw, 2.3rem);
  line-height: 1;
  margin-bottom: 15px;
  color: #fff;
  margin: 2rem 0;
  text-shadow: 3px 3px 3px #007AB3, -3px -3px 3px #007AB3, -3px 3px 3px #007AB3, 3px -3px 3px #007AB3, 3px 0px 3px #007AB3, -3px -0px 3px #007AB3, 0px 3px 3px #007AB3, 0px -3px 3px #007AB3;
}
#motchiribread_cp .h2_tit::before, .h2_tit::after {
  content: "～";
  margin: 0 10px;
  font-weight: normal;
}
#motchiribread_cp .lead {
  text-align: center;
  font-size: clamp(0.9rem, 0.424rem + 1.03vw, 1.2rem);
  font-weight: 500;
  color: #333;
  margin: 0;
  line-height: normal;
}
#motchiribread_cp .leadS {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
  margin-top: 5px;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
}
@media screen and (max-width: 736px) {
  #motchiribread_cp .leadS {
    text-align: left;
    font-size: 0.8rem;
    font-weight: 500;
    color: #fff;
    margin: 5px 15px;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
  }
}
#motchiribread_cp .sonota {
  background-color: #fff;
  border-radius: 40px;
  max-width: 100%;
  margin: 0 auto;
  padding: 30px;
  box-shadow: -10px -10px 20px #79cbed inset;
}
/* =========================================
   商品セクションのレイアウト（PC・共通）
========================================= */
#motchiribread_cp article {
  width: 100%;
}
.product_section {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}
.product_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC: 3カラム等分 */
  gap: 30px; /* アイテム間の余白 */
}
/* 白い箱のスタイル */
.product_item {
  background-color: #ffffff;
  border-radius: 30px;
  overflow: hidden; /* 画像が角丸をはみ出さないように */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* ほんのり影をつける */
  display: flex;
  flex-direction: column;
}
.donut-box {
  box-shadow: -10px -10px 20px #dba17b inset;
}
.an-box {
  box-shadow: -10px -10px 20px #f4b3c2 inset;
}
.pizza-box {
  box-shadow: -10px -10px 20px #f8bb59 inset;
}
.product_img {
  margin: 0;
  padding: 0px;
}
.product_img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.product_info {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
/* テキスト要素の装飾 */
.release_date {
  display: inline-block;
  background-color: #873A20;
  color: #fff;
  padding: 3px 14px;
  margin-left: -20px;
  margin-top: -13px;
  border-radius: 0 50px 50px 0;
  font-size: clamp(0.85rem, 0.771rem + 0.17vw, 0.9rem);
  margin-bottom: 8px;
  align-self: flex-start;
}
.product_name {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(1.2rem, 1.121rem + 0.17vw, 1.25rem);
  font-weight: 720;
  color: #873A20;
  margin: 0 0 10px;
  line-height: 1.4;
}
.price {
  font-size: 1.1rem;
  font-weight: bold;
  color: #873A20;
  text-align: right;
  margin-bottom: 15px;
  border-bottom: 4px dotted #dad0ca;
  padding-bottom: 15px;
}
.description {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.6;
  margin: 14px 0 5px;
}
.note {
  font-size: 0.75rem;
  color: #666;
  margin: 0;
  line-height: 1.4;
  /*margin-top: auto;*/
}
.note::before {
  content: "※";
}
/* =========================================
   スマホ用レイアウト（736px以下）
========================================= */
@media screen and (max-width: 736px) {
  .product_list {
    grid-template-columns: 1fr; /* スマホ: 1カラム */
    gap: 0px;
  }
  .product_item {
    border-radius: 20px;
  }
  #motchiribread_cp section {
    padding: 0 15px;
  }
  #motchiribread_cp .sonota {
    background-color: #fff;
    border-radius: 20px;
    max-width: 100%;
    margin: 0 15px;
    padding: 20px;
    box-shadow: -5px -5px 10px #79cbed inset;
  }
}
/* =========================================
   スクロールアニメーション（ふわっと現れる）
========================================= */
.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);
}
/* =========================================
   アニメーションのキーフレーム定義
========================================= */
/* ①〜③：「ぽよん」と現れるアニメーション */
@keyframes poyon {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.15); /* 一度本来より少し大きくなる */
    opacity: 1;
  }
  75% {
    transform: scale(0.9); /* 少し縮む（バウンド） */
  }
  100% {
    transform: scale(1); /* 元のサイズに落ち着く */
    opacity: 1;
  }
}
/* ④：横に伸びて「パン！」と弾けるアニメーション（もっちり感） */
@keyframes stretchPop {
  0% {
    transform: scaleX(0) scaleY(0); /* 見えない状態からスタート */
    opacity: 0;
  }
  40% {
    transform: scaleX(1.3) scaleY(0.7); /* 横に大きく伸び、縦は少し潰れる */
    opacity: 1;
  }
  70% {
    transform: scaleX(0.85) scaleY(1.1); /* 反動で縦に少し伸びる */
  }
  85% {
    transform: scaleX(1.05) scaleY(0.95); /* もう一度軽く横へ */
  }
  100% {
    transform: scaleX(1) scaleY(1); /* ピタッと止まる */
    opacity: 1;
  }
}
/* =========================================
   各要素へのアニメーション適用（時間差設定）
========================================= */
/* animation-fill-mode: both; をつけることで、開始時間まで要素を非表示にしておけます */
.donut {
  animation: poyon 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.2s both; /* 0.2秒後に開始 */
}
.an {
  animation: poyon 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.6s both; /* 0.4秒後に開始 */
}
.pizza {
  animation: poyon 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1s both; /* 0.6秒後に開始 */
}
.tit {
  transform-origin: center center; /* 中心を基準にアニメーションさせる */
  animation: stretchPop 0.8s ease-out 1.7s both; /* 1.0秒後（3つが出揃った後）に開始 */
}