@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 737px) {
  #sakusen45_cp {
    width: calc(100vw - 0.7%);
    margin: 0 calc(50% - 50vw);
    padding-bottom: 3rem;
    background-image: /* 1. 濃い赤色（#730000付近）ノイズSVG */ url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.45 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E"), /* 2. ストライプ背景 */ repeating-linear-gradient(180deg, #e60221, #e60221 5px, #730004 5px, #730004 10px);
    background-attachment: fixed;
    background-repeat: repeat, no-repeat;
    background-size: 200px 200px, cover;
    position: relative;
    z-index: 0;
  }
  #sakusen45_cp main {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 1rem;
    z-index: 100;
  }
  #sakusen45_cp .txt_area {
    width: calc(100vw - 0.7%);
    margin: 0 calc(50% - 50vw);
    background-color: rgba(0, 0, 0, 0.5);
    padding-bottom: 2rem;
  }
}
@media screen and (max-width:736px) {
  #sakusen45_cp {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    margin-top: -10px;
    padding-bottom: 1rem;
    background-image: /* 1. 濃い赤色（#730000付近）ノイズSVG */ url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.45 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"), /* 2. ストライプ背景 */ repeating-linear-gradient(180deg, #e60221, #e60221 4px, #730004 4px, #730004 8px);
    background-attachment: fixed;
    background-repeat: repeat, no-repeat;
    background-size: 200px 200px, cover;
    position: relative;
    z-index: 0;
  }
  #sakusen45_cp main {
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 1rem;
    z-index: 100;
  }
  #sakusen45_cp .txt_area {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    background-color: rgba(0, 0, 0, 0.5);
    padding-bottom: 1rem;
  }
}
/* --- 既存CSS調整 --- */
#sakusen45_cp .fix {
  clear: both;
}
#sakusen45_cp img {
  width: 100%;
  height: auto;
  display: block;
}
/* --- 2. コンテナ --- */
#sakusen45_cp .kv-wrapper {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center; /* 左右中央 */
  align-items: flex-start; /* ★重要：上揃えにする */
  overflow: hidden; /* バウンス時のはみ出し対策 */
}
/* --- 3. アニメーション対象 (picture) --- */
#sakusen45_cp .kv-anim-target {
  display: block;
  width: 100%;
  max-width: 1200px; /* PC最大幅 */
  /* 初期状態 */
  opacity: 1;
  visibility: visible;
  clip-path: circle(0% at 50% 50%); /* JS読み込み前も隠しておく */
}
/* --- 4. 画像のレスポンシブ対応 --- */
#sakusen45_cp .kv-anim-target img {
  width: 100%; /* 親要素に合わせる */
  height: auto; /* 高さは自動（アスペクト比維持） */
  display: block; /* 画像下の隙間消し */
}
#sakusen45_cp .sonota {
  max-width: 100%;
  margin: 0 auto;
  padding: 3rem 4rem;
  background-color: rgba(248, 248, 248, 0.9);
}
#sakusen45_cp h1 {
  font-weight: 800;
  font-style: normal;
  text-align: center;
  font-size: clamp(1.9rem, 0.948rem + 2.07vw, 2.5rem);
  line-height: 1.3;
  color: #fff;
  padding: .5rem 0;
  text-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
  letter-spacing: 0.08em;
}
#sakusen45_cp h1 > span {
  font-size: 130%;
}
#sakusen45_cp h1 .sub {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-size: 60%;
  color: #ffed03;
  letter-spacing: 0em;
  font-feature-settings: "halt";
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
}
#sakusen45_cp .lead {
  text-align: center;
  font-size: clamp(1rem, 0.684rem + 0.69vw, 1.2rem);
  font-weight: 600;
  color: #fff;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
}
#sakusen45_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) {
  #sakusen45_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);
  }
}
#sakusen45_cp .box {
  background-color: #faebd7;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
  /* 背景を固定 */
  background-attachment: fixed;
  background-repeat: repeat;
  background-size: 200px 200px; /* ノイズの細かさ */
  padding: 4rem;
  margin-top: 4rem;
  border-radius: 40px;
  border: #4f2c06 solid 8px;
  position: relative;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
#sakusen45_cp .box.is-visible {
  opacity: 1;
  transform: translateY(0);
}
#sakusen45_cp .box::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border: 2px solid #4f2c06;
  border-radius: 28px;
  pointer-events: none;
}
#sakusen45_cp .box h2 {
  font-family: "Noto Serif JP", serif;
  width: 400px;
  height: 60px;
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%); /* 左右中央揃え */
  background-color: #4f2c06;
  clip-path: polygon(15px 0, calc(100% - 15px) 0, /* 上辺 */ 100% 15px, 100% calc(100% - 15px), /* 右辺 */ calc(100% - 15px) 100%, 15px 100%, /* 下辺 */ 0 calc(100% - 15px), 0 15px /* 左辺 */
    );
  padding: 0 .5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  z-index: 10;
}
#sakusen45_cp .box h2::before, #sakusen45_cp .box h2::after {
  content: "◎";
  margin: 0 .7rem;
  font-size: 1.2rem;
}
/* スマホ対応（400pxだと画面からはみ出る可能性があるため） */
@media screen and (max-width: 736px) {
  #sakusen45_cp .box h2 {
    width: 80%; /* 幅を％指定に */
    font-size: 1.1rem;
    height: 45px;
    top: -28px;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  }
  #sakusen45_cp .box h2::before, #sakusen45_cp .box h2::after {
    content: "◎";
    margin: 0 .5rem;
    font-size: 0.9rem;
  }
}
#sakusen45_cp h2 {
  font-weight: 800;
  font-style: normal;
  text-align: center;
  font-size: clamp(1.9rem, 0.948rem + 2.07vw, 2.5rem);
  line-height: 1.3;
  padding: 0 0 1.5rem;
  letter-spacing: 0.08em;
}
/* --- 今回の追加CSS --- */ :root {
  --retro-bg: #fcf8e8;
  --retro-red: #e40228;
  --retro-blue: e60221b;
  --retro-mustard: #ffeb04;
  --retro-text: #333;
  --sp-break: 736px;
  --pc-width: 1200px;
}
/*#sakusen45_cp * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}*/
#sakusen45_cp .container {
  max-width: var(--pc-width);
  margin: 0 auto;
  padding: 40px 20px;
}
/* タブナビゲーション */
#sakusen45_cp .tab-list {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* ★ ボタン同士の上下のガタつきを防止 */
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 0;
  position: relative;
  z-index: 2;
}

/* 1. ボタンの基本スタイル（非アクティブ） */
#sakusen45_cp .tab-button {
  box-sizing: border-box; /* ★ 枠線が削れるのを防ぐ念のための指定 */
  background: #ccc;
  border: 2px solid #4f2c06;
  padding: 15px 30px;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  border-radius: 50px;
  transition: all 0.2s ease;
  position: relative;
  flex: 1;
  font-feature-settings: "halt";
  
  /* ▼ 修正：top:2pxを削除し、transformを0にして高さを揃える */
  transform: translate(0, 0); 
  box-shadow: 5px 5px 0px rgba(106, 59, 7, 0.3);
  background-clip: padding-box;
}

#sakusen45_cp .tab-button::after {
  content: "▼";
  margin-left: .5rem;
}

/* 2. マウスオーバー時（:focusを消してクリック後の跳ね上がりを防止） */
#sakusen45_cp .tab-button:hover {
  background-color: var(--retro-mustard);
  outline: none;
  transform: translate(2px, 2px);
  /* 動いた分だけ影を小さくすると、自然な立体感が出ます */
  box-shadow: 3px 3px 0px rgba(106, 59, 7, 0.3);
}

/* 3. アクティブ時（初期状態と同じ高さ・同じ影をキープ） */
#sakusen45_cp .tab-button[aria-selected="true"] {
  background-color: var(--retro-red);
  color: #fff;
  
  /* ▼ 修正：位置も影も変更しないことで、ズレや線の削れを完全に防ぐ */
  transform: translate(0, 0);
  box-shadow: 5px 5px 0px rgba(106, 59, 7, 0.3);
}
#sakusen45_cp .tab-date {
  /*display: block;*/
  font-size: 0.9rem;
  margin-left: 5px;
  font-weight: normal;
}
#sakusen45_cp .aten {
  text-align: center;
  margin: 1.5rem 0 1.3rem;
  font-size: clamp(0.85rem, 0.613rem + 0.52vw, 1rem);
}
#sakusen45_cp .other {
  text-align: left;
  margin-bottom: 1.25rem;
  line-height: 1.6rem;
  font-size: clamp(0.85rem, 0.613rem + 0.52vw, 1rem);
}
/* 商品グリッド */
#sakusen45_cp article {
  width: 94%;
  margin: 0 auto;
  display: block;
}
#sakusen45_cp .product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 10px;
  margin-bottom: 40px;
}
/* 商品カード（アニメーション ＋ 八角形） */
#sakusen45_cp .product-card {
  position: relative;
  /* padddingは20pxのまま（16pxの切り落としでも十分内側に収まります） */
  padding: 20px;
  /* 八角形の形に合わせて落ちる影（そのまま） */
  filter: drop-shadow(8px 8px 0px rgba(106, 59, 7, 0.3));
  /* --- アニメーション設定（そのまま） --- */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 1;
}
/* --- スマホ対応に追加 --- */
@media (max-width: 736px) {
  #sakusen45_cp .product-card {
    padding: 15px;
    /* 八角形の形に合わせて落ちる影（そのまま） */
    filter: drop-shadow(6px 6px 0px rgba(106, 59, 7, 0.3));
    /* --- アニメーション設定（そのまま） --- */
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1;
  }
}
/* ▼ 修正：八角形の「茶色い線（外枠）」を作る疑似要素 ▼ */
#sakusen45_cp .product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #4f2c06; /* 線の色 */
  z-index: -2;
  /* ▼ 変更：四隅を16pxずつ切り落とす ▼ */
  clip-path: polygon(14px 0, calc(100% - 14px) 0, /* 上辺 */ 100% 14px, 100% calc(100% - 14px), /* 右辺 */ calc(100% - 14px) 100%, 14px 100%, /* 下辺 */ 0 calc(100% - 14px), 0 14px /* 左辺 */
    );
}
/* ▼ 修正：八角形の「白い背景（内側）」を作る疑似要素 ▼ */
#sakusen45_cp .product-card::after {
  content: "";
  position: absolute;
  /* 上下左右を2pxずつ内側に縮める（これが2pxの線として見えます） */
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background-color: #fff;
  z-index: -1;
  /* ▼ 変更：外枠(16px)に合わせて切り落とし幅も少しだけ(15pxに)微調整 ▼ */
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
}
#sakusen45_cp .product-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
#sakusen45_cp .product-image {
  width: 100%;
  object-fit: cover;
  /*border: 1px solid #ccc;*/
  margin-bottom: 15px;
  background-color: #eee;
}
#sakusen45_cp .product-date {
  display: inline-block;
  font-weight: bold;
  border: 2px solid var(--retro-red);
  color: var(--retro-red);
  padding: 2px 15px;
  border-radius: 50px;
  font-size: clamp(0.85rem, 0.771rem + 0.17vw, 0.9rem);
  margin-bottom: 8px;
}
#sakusen45_cp .product-name {
  font-size: clamp(1.1rem, 0.784rem + 0.69vw, 1.3rem);
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.4;
}
#sakusen45_cp .product-price {
  font-size: clamp(1rem, 0.684rem + 0.69vw, 1.2rem);
  font-weight: bold;
  text-align: right;
  margin-bottom: 15px;
  border-bottom: 2px dotted rgba(106, 59, 7, 0.3);
  ;
  padding-bottom: 5px;
}
#sakusen45_cp .product-desc {
  font-size: clamp(0.95rem, 0.871rem + 0.17vw, 1rem);
}
#sakusen45_cp .product-note {
  font-size: 0.8rem;
  color: #666;
  margin-top: 5px;
}
/* ジャンプボタン */
#sakusen45_cp .jump-area {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 20px;
}
/* レスポンシブ */
@media (max-width: 736px) {
  #sakusen45_cp .jump-area {
    margin-top: 20px;
    padding-top: 0px;
    padding-bottom: 20px;
  }
}
#sakusen45_cp .jump-btn {
  background-color: var(--retro-mustard);
  border: none;
  padding: 15px 30px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  border-radius: 50px;
  box-shadow: 4px 4px 0px rgba(106, 59, 7, 0.3);
  transition: all 0.3s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 10; /* 前面に */
}
#sakusen45_cp .jump-btn:hover {
  background-color: var(--retro-red);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px rgba(106, 59, 7, 0.3);
  color: #fff;
}
#sakusen45_cp .jump-btn::after {
  content: "▲";
  font-weight: bold;
  font-size: 0.8em;
}
#sakusen45_cp [hidden] {
  display: none !important;
}
/* レスポンシブ */
@media (max-width: 736px) {
  #sakusen45_cp .box {
    border: #4f2c06 solid 4px;
    border-radius: 20px;
    margin: 50px 10px 0px;
    padding: 2.5rem 1.05rem 1rem 1.05rem;
  }
  #sakusen45_cp .box::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border: 1px solid #4f2c06;
    border-radius: 14px;
  }
  #sakusen45_cp .product-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  #sakusen45_cp .tab-button {
    padding: 10px;
    font-size: 1rem;
  }
  #sakusen45_cp .tab-date {
    font-size: 0.75rem;
  }
  #sakusen45_cp .jump-btn {
    width: 100%;
    justify-content: center;
  }
}
/* PC/SP切り替えレイアウト */
@media screen and (min-width:737px) {
  #sakusen45_cp .youtube {
    position: relative;
    width: 93%;
    margin: 1rem auto 1rem;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    margin-top: 0px;
  }
  #sakusen45_cp .youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width:736px) {
  #sakusen45_cp .tab-button {
    border-radius: 14px;
    box-shadow: 4px 4px 0px rgba(106, 59, 7, 0.3);
  }
  #sakusen45_cp .product-card {
    border-radius: 10px;
  }
  #sakusen45_cp .youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    margin-bottom: .5rem;
    height: 0;
    overflow: hidden;
    margin-top: 0px;
  }
  #sakusen45_cp .youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}