@charset "utf-8";
/* ==========================================================================
   1. 共通変数 & リセット・基本設定
   ========================================================================== */ :root {
  --retro-bg: #fcf8e8;
  --retro-red: #e40228;
  --retro-mustard: #ffeb04;
  --retro-text: #333;
  --sp-break: 736px;
  --pc-width: 1200px;
}
/* 既存要素の初期化（リセット） */
#zoryo45_cp .fix {
  clear: both;
}
#zoryo45_cp img {
  width: 100%;
  height: auto;
  display: block;
}
#zoryo45_cp :is(h1, h2, h3, h4, h5, p, figure, ul, li, dl, dt, dd) {
  margin: 0;
  padding: 0;
  list-style: none;
}
#zoryo45_cp :is(a:link, a:visited, a:hover, a:active, a:focus) {
  text-decoration: none;
}
#zoryo45_cp [hidden] {
  display: none !important;
}
/* ==========================================================================
   2. 全体コンテナ & レイアウトベース
   ========================================================================== */
/* キャンペーンエリア全体 */
/* ==========================================================================
   2. 全体コンテナ & レイアウトベース
   ========================================================================== */
/* キャンペーンエリア全体 */
#zoryo45_cp {
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 100vh;
  
  /* 1. ベースカラー（黒グラデがない分、少し暗めの渋いエンジ色に調整） */
  background-color: #8c000b; /* 明るすぎる場合は #750009 などの調整もおすすめ */
  
  /* 2. 背景画像（ザラザラ感を生み出すSVGノイズのみ） */
  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.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");
  
  /* 3. 配置・サイズ設定（1層だけなので指定も超シンプル） */
  background-repeat: repeat;
  background-size: 150px 150px;
}
/* メインコンテンツ枠 */
#zoryo45_cp main {
  margin: 0 auto;
  padding-bottom: 1rem;
  z-index: 100;
}
/* テキストエリア（半透明の背景） */
#zoryo45_cp .txt_area {
  background-color: rgba(0, 0, 0, 0.5);
}
/* --- レスポンシブ（全体レイアウト） --- */
@media screen and (min-width: 737px) {
  #zoryo45_cp {
    width: calc(100vw - 0.7%);
    margin: 0 calc(50% - 50vw);
    padding-bottom: 3rem;
  }
  #zoryo45_cp main {
    max-width: 1200px;
  }
  #zoryo45_cp .txt_area {
    width: calc(100vw - 0.7%);
    margin: 0 calc(50% - 50vw);
    padding-bottom: 2rem;
  }
  #zoryo45_cp .ly-pc-none {
    display: none;
  }
}
@media screen and (max-width: 736px) {
  #zoryo45_cp {
    width: 100vw;
    margin: -10px calc(50% - 50vw) 0;
    padding-bottom: 1rem;
  }
  #zoryo45_cp main {
    max-width: 100%;
  }
  #zoryo45_cp .txt_area {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding-bottom: 1rem;
  }
  #zoryo45_cp .ly-sp-none {
    display: none;
  }
}
/* ==========================================================================
   3. タイポグラフィ（見出し・リード文）
   ========================================================================== */
/* メインタイトル (H1) */
#zoryo45_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.04em;
}
#zoryo45_cp h1 > span {
  font-size: 130%;
}
#zoryo45_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);
}
/* リード文 */
#zoryo45_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);
  padding: 0 .8rem;
}
#zoryo45_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) {
  #zoryo45_cp .leadS {
    text-align: left;
    margin: 5px 15px;
  }
}
/* テキストエリア内サブリード */
#zoryo45_cp .txt_area .leadSa {
  background-color: #ffed03;
  color: #000;
  margin-top: 15px;
}
@media screen and (min-width: 737px) {
  #zoryo45_cp .txt_area .leadSa {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    padding: .5rem;
  }
}
@media screen and (max-width: 736px) {
  #zoryo45_cp .txt_area .leadSa {
    text-align: left;
    font-size: 0.8rem;
    font-weight: 500;
    margin: 15px 0 5px;
    padding: .8rem;
  }
}
/* 注記・その他 */
#zoryo45_cp .aten {
  text-align: center;
  margin: 1.5rem 0 1.3rem;
  font-size: clamp(0.85rem, 0.613rem + 0.52vw, 1rem);
}
#zoryo45_cp .other {
  text-align: left;
  line-height: 1.6rem;
  font-size: clamp(0.85rem, 0.613rem + 0.52vw, 1rem);
}
/* ==========================================================================
   4. キービジュアル (KV) アニメーション設定
   ========================================================================== */
#zoryo45_cp .kv-wrapper {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 上揃え */
  overflow: hidden;
}
#zoryo45_cp .kv-anim-target {
  display: block;
  width: 100%;
  max-width: 1200px;
  opacity: 1;
  visibility: visible;
}
#zoryo45_cp .kv-anim-target img {
  width: 100%;
  height: auto;
  display: block;
}
/* ==========================================================================
   5. コンテンツエリア（飾りボックス、その他）
   ========================================================================== */
#zoryo45_cp .sonota {
  max-width: 100%;
  margin: 0 auto;
  padding: 3rem 4rem;
  background-color: rgba(248, 248, 248, 0.9);
}
/* メイン飾りのボックス */
#zoryo45_cp .box {
  background-color: #f0f0f0;
  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;
  position: relative;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  box-shadow: 0px 0px 20px rgba(152, 152, 152, 0.8);
}
#zoryo45_cp .box.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* ボックスの内線飾り */
#zoryo45_cp .box::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
/* ボックスのタイトル (H2) */
#zoryo45_cp .box h2 {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-weight: 900; /* とにかく太く！ */
  background-color: #000;
  padding: 0 .5rem;
  line-height: 1;
  display: flex;
  justify-content: center;
  color: #fff;
  z-index: 10;
}
#zoryo45_cp .box h2::before, #zoryo45_cp .box h2::after {
  content: "■";
}
/* 一般的なH2設定 */
#zoryo45_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;
}
/* --- レスポンシブ（ボックス） --- */
@media screen and (min-width: 737px) {
  #zoryo45_cp .box .box-inner {
    padding: 3rem 4rem;
  }
  #zoryo45_cp .box {
    margin-top: 4rem;
    border: #000 solid 8px;
  }
  #zoryo45_cp .box::after {
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    border-radius: 28px;
  }
  #zoryo45_cp .box h2 {
    padding: .7rem 0 1rem;
    font-size: 1.6rem;
  }
  #zoryo45_cp .box h2::before, #zoryo45_cp .box h2::after {
    margin: 0 .7rem;
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 736px) {
  #zoryo45_cp .box .box-inner {
    padding: 1.5rem 1rem 1.05rem;
  }
  #zoryo45_cp .box {
    border: #000 solid 4px;
    margin: 30px 10px 0px;
  }
  #zoryo45_cp .box::after {
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border-radius: 14px;
    border-width: 1px;
  }
  #zoryo45_cp .box h2 {
    font-size: 1.1rem;
    padding: .5rem 0 .7rem;
  }
  #zoryo45_cp .box h2::before, #zoryo45_cp .box h2::after {
    margin: 0 .5rem;
    font-size: 0.9rem;
  }
}
/* ==========================================================================
   6. タブナビゲーション
   ========================================================================== */
#zoryo45_cp .container {
  max-width: var(--pc-width);
  margin: 0 auto;
  padding: 40px 20px;
}
#zoryo45_cp .tab-list {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 上下ガタつき防止 */
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
/* タブボタン基本 */
#zoryo45_cp .tab-button {
  box-sizing: border-box;
  background: #ccc;
  border: 3px solid #000;
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex: 1;
  font-feature-settings: "halt";
  transform: translate(0, 0);
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 1);
  background-clip: padding-box;
}
#zoryo45_cp .tab-button::after {
  content: "▼";
  margin-left: .5rem;
}
#zoryo45_cp .tab-button:hover {
  background-color: var(--retro-mustard);
  outline: none;
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
}
#zoryo45_cp .tab-button[aria-selected="true"] {
  background-color: var(--retro-red);
  color: #fff;
  transform: translate(0, 0);
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 1);
}
#zoryo45_cp .tab-date {
  font-weight: normal;
  margin-left: 5px;
}
/* --- レスポンシブ（タブ） --- */
@media screen and (min-width: 737px) {
  #zoryo45_cp .tab-button {
    padding: 15px 30px;
    font-size: 1.2rem;
  }
  #zoryo45_cp .tab-date {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 736px) {
  #zoryo45_cp .tab-button {
    padding: 10px;
    font-size: 1rem;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 1);
  }
  #zoryo45_cp .tab-date {
    font-size: 0.75rem;
  }
}
/* ==========================================================================
   7. 商品グリッド & 商品カード
   ========================================================================== */
#zoryo45_cp article {
  width: 96%;
  margin: 0 auto;
  display: block;
  min-height: 100px;
  float: left;
  box-sizing: border-box;
}
#zoryo45_cp .product-grid {
  display: grid;
  margin-bottom: 25px;
}
/* 商品カード基本（アニメーション・影） */
#zoryo45_cp .product-card {
  position: relative;
  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;
}
#zoryo45_cp .product-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* 八角形の「茶色い外枠」 */
#zoryo45_cp .product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: -2;
  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);
}
/* 八角形の「白い背景」 */
#zoryo45_cp .product-card::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background-color: #fff;
  z-index: -1;
  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);
}
/* カード内パーツ */
#zoryo45_cp .product-image {
  width: 100%;
  object-fit: cover;
  margin-bottom: 15px;
  background-color: #eee;
}
#zoryo45_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;
}
#zoryo45_cp .product-name {
  font-size: clamp(1.1rem, 0.784rem + 0.69vw, 1.3rem);
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.4;
}
#zoryo45_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;
}
#zoryo45_cp .product-desc {
  font-size: clamp(0.95rem, 0.871rem + 0.17vw, 1rem);
}
#zoryo45_cp .product-note {
  font-size: 0.8rem;
  color: #595959;
  margin-top: 5px;
}
/* --- レスポンシブ（商品エリア） --- */
@media screen and (min-width: 737px) {
  #zoryo45_cp .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 10px;
  }
  #zoryo45_cp .product-card {
    padding: 20px;
    filter: drop-shadow(0px 0px 3px rgba(114, 30, 32, 1));
  }
}
@media screen and (max-width: 736px) {
  #zoryo45_cp article {
    width: 100%;
  }
  #zoryo45_cp .product-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  #zoryo45_cp .product-card {
    padding: 15px;
    filter: drop-shadow(0px 0px 3px rgba(114, 30, 32, 1));
  }
}
/* ==========================================================================
   8. ジャンプボタン & YouTube埋め込み
   ========================================================================== */
/* ジャンプボタンエリア */
#zoryo45_cp .jump-area {
  display: flex;
  justify-content: flex-end;
}
#zoryo45_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;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 10;
}
#zoryo45_cp .jump-btn::after {
  content: "▲";
  font-weight: bold;
  font-size: 0.8em;
}
#zoryo45_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;
}
/* YouTube動画レスポンシブ枠 */
#zoryo45_cp .youtube {
  position: relative;
  padding-bottom: 56.25%; /* 16:9比率 */
  height: 0;
  overflow: hidden;
  margin-top: 0px;
}
#zoryo45_cp .youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* --- レスポンシブ（ボタン・動画） --- */
@media screen and (min-width: 737px) {
  #zoryo45_cp .jump-area {
    padding-top: 20px;
  }
  #zoryo45_cp .youtube {
    width: 93%;
    margin: 1rem auto;
  }
}
@media screen and (max-width: 736px) {
  #zoryo45_cp .jump-area {
    padding-top: 0px;
    padding-bottom: 20px;
  }
  #zoryo45_cp .jump-btn {
    width: 100%;
    justify-content: center;
  }
  #zoryo45_cp .youtube {
    margin-bottom: .5rem;
  }
}
/* ==========================================================================
   9. キャンペーンエリア
   ========================================================================== */
#zoryo45_cp .box ul .campaign {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  flex-direction: row;
}
#zoryo45_cp .box ul .campaign:nth-of-type(2n) {
  margin-top: 2rem;
}
#zoryo45_cp .box ul .campaign .ph {
  width: calc(100% / 2);
}
#zoryo45_cp .box ul .campaign .text {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: calc(100% / 2);
}
#zoryo45_cp .box ul .campaign .text.x_cp {
  width: 100%
}
#zoryo45_cp .box ul .campaign .text dl .campaign_date {
  display: flex;
  font-size: .94rem;
  font-weight: 600;
}
#zoryo45_cp .box ul .campaign .text .campaign_notes {
  font-size: 0.85em; /* 文字を少し小さく */
  line-height: 1.5; /* 行間を少し狭めてまとまり感を出す */
  text-indent: -1em; /* 「※」がある場合に2行目以降を1文字下げる設定 */
  padding-left: 1em;
}
#zoryo45_cp .box ul .campaign .text .campaign_notes.fp_cp {
  padding-left: 1.5em;
  text-indent: 0;
}
#zoryo45_cp .box ul .campaign .text .campaign_notes.fp_cp li {
  list-style-type: disc !important;
}
#zoryo45_cp .text .icon_blank img {
  width: 13px;
}
#zoryo45_cp .text a.ly-mod-btn.ly-bg-white span {
  top: 37%;
}
@media screen and (max-width: 736px) {
  #zoryo45_cp .box ul .campaign {
    flex-direction: column;
    gap: 1rem;
  }
  #zoryo45_cp .box ul .campaign .ph {
    width: 100%;
  }
  #zoryo45_cp .box ul .campaign .text {
    gap: .4rem;
    width: 100%;
  }
  #zoryo45_cp .box ul .campaign .text dl .campaign_date.x_cp {
    display: block;
  }
}