@charset "utf-8";
/* CSS Document */ :root {
  --bg-color: #231816; /* 背景色 */
  --text-color: #fff; /* 文字色 */
  --plane: #94cbf1;
  --maccha: #99c648;
  --choco: #ee7d4b;
}
@media screen and (min-width: 737px) {
  #contents {
    position: relative;
    width: 100%;
    min-height: 1000px;
  }
  #contents::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("bg.webp");
    background-repeat: repeat;
    opacity: 0.5;
    z-index: -100;
  }
}
@media screen and (max-width:736px) {
  #contents {
    position: relative;
    width: 100%;
    height: 100%;
  }
  #contents::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("bg.webp");
    background-repeat: repeat;
    background-size: 24%;
    opacity: 0.5;
    z-index: -100;
  }
  footer {
    background: #fff;
    z-index: -2;
  }
}
div#trianglecheesecakes_cp mark {
  background-color: #ffdbb7;
  font-weight: 500;
}
div#trianglecheesecakes_cp .sr-only {
  display: none;
}
div#trianglecheesecakes_cp dl > div {
  display: flex;
  gap: 10px
}
div#trianglecheesecakes_cp dt {
  font-weight: 600;
  flex-shrink: 0;
  flex-basis: 4em; /* ★追加：dtの幅を「約文字分」に固定する */
}
div#trianglecheesecakes_cp img {
  width: 100%;
  height: auto;
}
div#trianglecheesecakes_cp p, h3, dl, ul, li, .list_unit {
  color: #313131;
}
div#trianglecheesecakes_cp .fix {
  clear: both;
}
/* =========================================
   商品セクションのレイアウト（PC・共通）
========================================= */
div#trianglecheesecakes_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 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product_img {
  margin: 0;
  padding: 0px;
  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;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
/* テキスト要素の装飾 */
div#trianglecheesecakes_cp .release_date {
  display: inline-block;
  background-color: #231816;
  color: #fff;
  padding: 3px 10px;
  font-size: clamp(0.85rem, 0.771rem + 0.17vw, 0.9rem);
  margin-bottom: 5px;
  font-weight: 500;
  align-self: flex-start;
  font-feature-settings: "halt";
}
div#trianglecheesecakes_cp .product_name {
  font-size: clamp(1.2rem, 1.121rem + 0.17vw, 1.25rem);
  font-weight: 600;
  margin: 5px 0;
  line-height: 1.4;
  color: #231816;
}
div#trianglecheesecakes_cp .price {
  font-size: 1.1rem;
  font-weight: bold;
  text-align: right;
  color: #231816;
}
div#trianglecheesecakes_cp .description {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 10px 0 5px;
  color: #231816;
}
.note {
  font-size: 0.75rem;
  margin: 0;
  line-height: 1.4;
  /*margin-top: auto;*/
}
.zigzag-line-top {
  width: 100%;
  height: 1px; /* ライン全体の高さ */
  position: relative;
  margin-top: 15px; /* 三角形が飛び出す分の余白 */
}
/* 三角形のラインを作る疑似要素（上側） */
.zigzag-line-top::after {
  content: "";
  position: absolute;
  top: -10px; /* 三角形の高さ分、上にずらす */
  left: 0;
  width: 100%;
  height: 10px; /* 三角形の高さ */
  /* グラデーションを組み合わせて上向きの三角形を作る */
  background-image:
    linear-gradient(45deg, #231816 25%, transparent 25%), linear-gradient(-45deg, #231816 25%, transparent 25%);
  background-size: 10px 10px; /* 横幅20px × 高さ20px で1マスの三角形 */
  background-repeat: repeat-x;
}
.plain::after {
  background-image:
    linear-gradient(45deg, #94cbf1 25%, transparent 25%), linear-gradient(-45deg, #94cbf1 25%, transparent 25%);
}
.maccha::after {
  background-image:
    linear-gradient(45deg, #99c648 25%, transparent 25%), linear-gradient(-45deg, #99c648 25%, transparent 25%);
}
.choco::after {
  background-image:
    linear-gradient(45deg, #ee7d4b 25%, transparent 25%), linear-gradient(-45deg, #ee7d4b 25%, transparent 25%);
}
/* =========================================
   こだわりポイント枠
========================================= */
.point_box {
  margin: 0 auto;
  padding: 10px 15px 13px;
  background-color: rgba(255, 255, 255, 0.5);
  border-left: 10px solid #231816; /* ワンポイントのあしらい */
  padding-left: 18px;
}
@media screen and (max-width:736px) {
  .point_box {
    margin: 0 auto;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-left: none;
    border-top: 7px solid #231816;
  }
}
.point_tit {
  display: inline-block;
  font-size: clamp(0.95rem, 0.712rem + 0.52vw, 1.1rem);
  font-weight: 700;
  color: #231816;
  margin-bottom: 5px;
}
.point_txt {
  font-size: clamp(0.8rem, 0.641rem + 0.34vw, 0.9rem);
  line-height: 1.7;
  color: var(--text-color);
  margin: 0;
}
/* =========================================
   見出し全体のレイアウト
========================================= */
.tit_triangle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* テキストと三角形の間の余白 */
  font-size: clamp(1.5rem, 0.707rem + 1.72vw, 2rem);
  color: #231816;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-feature-settings: "halt";
  margin-bottom: 2rem;
  padding-top: 1.5rem;
}
/* =========================================
   三角形のグループ設定
========================================= */
.tri_wrap {
  display: flex;
  align-items: center;
}
/* =========================================
   三角形 1つの基本設定
========================================= */
.tri {
  /* 幅20pxの正三角形を作るための高さ（20px × 約0.866 = 17.32px） */
  width: 20px;
  height: 17.32px;
}
@media screen and (max-width:736px) {
  .tri {
    width: 18px;
    height: 15.32px;
  }
}
/* ▼ ここがポイント！2個目以降を幅の半分（10px）だけ左にズラして噛み合わせる */
.tri:not(:first-child) {
  margin-left: -10px;
}
/* =========================================
   上向き・下向きの切り抜き（clip-path）
========================================= */
.tri_up {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.tri_down {
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
/* =========================================
   色の適用
========================================= */
.plane {
  background-color: var(--plane);
}
.maccha {
  background-color: var(--maccha);
}
.choco {
  background-color: var(--choco);
}
/*===============================================

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


===============================================*/
@media screen and (min-width: 737px) {
  div#trianglecheesecakes_cp {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 30px;
    overflow: hidden;
    z-index: 1;
  }
  div#trianglecheesecakes_cp .fs-L {
    font-size: 102%;
  }
  div#trianglecheesecakes_cp .m5 {
    padding: 0 5px;
  }
  div#trianglecheesecakes_cp main {
    max-width: 100%;
    margin: 0 auto;
    border: 30px solid #231816;
    border-width: 0px 30px 30px;
    padding: 0px;
  }
  div#trianglecheesecakes_cp .main_bg {
    margin: 0 30px;
    padding: 20px 0;
  }
  div#trianglecheesecakes_cp .tit_area {
    width: 100%;
    margin: 0 auto;
    padding: .5rem 0 2rem;
    text-align: center;
    background-color: var(--bg-color);
  }
  div#trianglecheesecakes_cp .tit_area h1 {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: var(--text-color);
    text-align: center;
    font-size: clamp(1.8rem, 1.007rem + 1.72vw, 2.8rem);
    line-height: 1;
    font-feature-settings: "halt";
    margin: 0.5rem 0 1rem;
  }
  div#trianglecheesecakes_cp .lead {
    font-size: clamp(0.95rem, 0.712rem + 0.52vw, 1.1rem);
    font-weight: 500;
    color: #fff;
  }
.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%;
}	
}
/* ====================================
   ▼ SPレイアウト (736px以下) ▼
   ==================================== */
@media screen and (max-width:736px) {
  div#trianglecheesecakes_cp {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 0 0 2rem;
    margin-top: -10px;
  }
  footer {
    background-color: #fff;
    z-index: -2;
  }
  div#trianglecheesecakes_cp main {
    max-width: 100%;
    margin: 0 auto;
    border: 12px solid #231816;
    border-width: 0px 12px 12px;
    padding: 0px;
  }
  div#trianglecheesecakes_cp .main_bg {
    max-width: 100%;
    margin: 0 auto;
    padding: 12px;
  }
  div#trianglecheesecakes_cp .tit_area {
    width: 100%;
    margin: 0 auto;
    padding: 20px 10px;
    box-sizing: border-box;
    text-align: center;
    background-color: var(--bg-color);
  }
  div#trianglecheesecakes_cp .tit_area h1 {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: var(--text-color);
    text-align: center;
    font-size: clamp(1.8rem, 1.007rem + 1.72vw, 2.8rem);
    line-height: 1;
    font-feature-settings: "halt";
    margin: 0.5rem 0 1rem;
  }
  div#trianglecheesecakes_cp .lead {
    font-size: clamp(0.95rem, 0.712rem + 0.52vw, 1.1rem);
    font-weight: 500;
    color: #fff;
  }
  div#trianglecheesecakes_cp .product_list {
    grid-template-columns: 1fr; /* スマホ: 1カラム */
    gap: 0px;
    margin-bottom: 0;
  }
  div#trianglecheesecakes_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;
  max-width: 1200px;
  width: 100%; /* 画面幅に合わせて縮小させる */
  margin: 0 auto;
  aspect-ratio: 1200 / 630; /* heightの代わりにアスペクト比で高さを維持 */
}
/* KV内の画像が枠に合わせて可変するように設定 */
div#trianglecheesecakes_cp .kv_tit_area img {
  width: 100%;
  height: auto;
  display: block;
}
/* ===============================================
   ● pc.css 画面の横幅が737px以上
=============================================== */
@media screen and (min-width: 737px) {
  .kv_tit_area .tit {
    position: absolute;
    top: 7%;
    left: 0;
    right: 0;
    margin: auto;
    width: 78.08%;
    z-index: 10;
  }
  /* --- 子要素の絶対配置 --- */
  .item01 {
    position: absolute;
    bottom: 4.1%;
    width: 33.3333%;
    left: 0;
  }
  .item02 {
    position: absolute;
    bottom: 4.1%;
    width: 33.3333%;
    left: 33.33%;
  }
  .item03 {
    position: absolute;
    bottom: 4.1%;
    width: 33.34%;
    right: 0;
  }
  .logo {
    position: absolute;
    top: 6%;
    right: 1%;
    width: 6%;
    z-index: 10;
  }
  div#trianglecheesecakes_cp .aten p {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 100%;
    font-size: 0.8rem;
    padding-right: 5px;
    color: #fff;
    z-index: 10;
  }
}
/* ====================================
   ▼ SPレイアウト (736px以下) ▼
==================================== */
@media screen and (max-width:736px) {
  .kv_tit_area .tit {
    position: absolute;
    top: 15%;
    left: 0;
    right: 0;
    margin: auto;
    width: 94.23%;
    z-index: 10;
  }
  /* --- 子要素の絶対配置 --- */
  .item01 {
    position: absolute;
    bottom: 5.9%;
    width: 33.26%;
    left: 0%;
  }
  .item02 {
    position: absolute;
    bottom: 5.9%;
    width: 33.46%;
    left: 33.33%;
  }
  .item03 {
    position: absolute;
    bottom: 5.9%;
    width: 33.26%;
    right: 0;
  }
  .logo {
    position: absolute;
    top: 8%;
    right: 2%;
    width: 8.07%;
    z-index: 10;
  }
  div#trianglecheesecakes_cp .aten p {
    position: absolute;
    bottom: 0.5%;
    right: 0;
    max-width: 100%;
    font-size: 0.7rem;
    padding-right: 0px;
    color: #fff;
    z-index: 10;
  }
}
/* =========================================
   スクロールアニメーション（ふわっと現れる）
========================================= */
.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. 初期状態（読み込み完了まで隠す）
========================================= */
/* ① 商品（item01〜03）：上下50%をマスクして見えなくする */
.item01, .item02, .item03 {
  clip-path: inset(50% 0 50% 0);
  opacity: 0;
}
/* ② タイトル：透明にして、少し上に配置しておく */
.kv_tit_area .tit {
  opacity: 0;
  /* 最初は 60px 下 にセットしておく */
  transform: translate(0, 60px);
}
/* =========================================
   2. アニメーションの実行（JSで .is-loaded が付与されたら開始）
========================================= */
/* ① 商品が順に、中央から上下にマスクを解除して表示 */
.is-loaded .item01 {
  animation: openVertical 0.5s ease-in-out 0s forwards;
}
.is-loaded .item02 {
  /* item01の0.3秒後 */
  animation: openVertical 0.5s ease-in-out 0.5s forwards;
}
.is-loaded .item03 {
  /* item02の0.3秒後 */
  animation: openVertical 0.5s ease-in-out 1.0s forwards;
}
/* ② タイトルが、item03と同時（1.1s）にカクカクカクと現れる */
.is-loaded .kv_tit_area .tit {
  animation: kakuKakuTit 0.6s linear 1.7s forwards;
}
/* =========================================
   3. アニメーションの動き（キーフレーム）
========================================= */
/* 中央から上下に開くマスク */
@keyframes openVertical {
  0% {
    clip-path: inset(50% 0 50% 0);
    opacity: 0;
  }
  5% {
    opacity: 1; /* 開き始めた瞬間に画像を見せる */
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
/* 下から左右斜めにカクカク上がりながら現れる */
@keyframes kakuKakuTit {
  0% {
    opacity: 0;
    transform: translate(0, 60px) rotate(0deg);
  }
  /* 1回目：右斜め上へカクッ（少し右に傾く） */
  1% {
    opacity: 1;
    transform: translate(30px, 40px) rotate(4deg);
  }
  25% {
    transform: translate(30px, 40px) rotate(4deg);
  } /* 少し止める */
  /* 2回目：左斜め上へカクッ（少し左に傾く） */
  26% {
    transform: translate(-25px, 20px) rotate(-4deg);
  }
  50% {
    transform: translate(-25px, 20px) rotate(-4deg);
  } /* 少し止める */
  /* 3回目：右斜め上へカクッ（少し右に傾く） */
  51% {
    transform: translate(15px, 5px) rotate(2deg);
  }
  75% {
    transform: translate(15px, 5px) rotate(2deg);
  } /* 少し止める */
  /* 定位置（ど真ん中）へピタッと収まる */
  76% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}