@charset "utf-8";
/* CSS Document */


/* ==========================
    lp-wrap
========================== */

.lp-wrap {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  text-align: center;

  /* wrap画像制御 */
  /* overflow: hidden; */
  font-family: inherit;
}

/*--------------------------
        lp-wrap画像制御
---------------------------*/

.lp-wrap img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* FS側の「�Eージ幁E�E左右余白」をLP部だけ無効匁E*/
.fs-l-pageMain,
.fs-l-main {
  padding: 0;
}

/* html,
body {
  overflow-x: clip;
} */

/* 右側だけ白くなる�Eを防止 */

/* セクション共送E*/




.lp--h2 {
  margin-block-start: clamp(24px, 5vw, 40px);
}

/* ===== フォント�E見�Eし�E本斁E��小さくなる問題�E直接対処�E�E===== */
.lp--h1 {
  font-size: clamp(24px, 5.6vw, 44px);
  line-height: 1.15;
}

.lp--h2 {
  font-size: clamp(20px, 3.8vw, 28px);
  line-height: 1.25;
}

.lp--h3 {
  font-size: clamp(18px, 3.4vw, 22px);
  line-height: 1.35;
}

.lp--h4,
.lp--h5,
.section-txt,
.campaign-card__text p {
  font-size: 16px;
}

/* 小見�Eしを読みめE��く強調 */
.lp--h4 {
  font-size: clamp(18px, 3.8vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  margin-block: clamp(16px, 4vw, 28px);
}

.fs-l-main .lp-wrap p {
  font-size: 16px;
  line-height: 1.6;
}

.lp-deliver--box p strong {
  font-size: clamp(20px, 3.8vw, 28px);
}

/* ===== MVの“上に詰まる”対策：�EチE��ーぶん余白確保（忁E��に応じて�E�E*/
.section-mv {
  padding-block-start: clamp(12px, 5vw, 40px);
}

/* ===========================
   futureshop用のリセチE��スニ�EチE��
   =========================== */

/* 見�EぁEタイチE*/
.fs-l-main .lp-wrap {
  font-size: 16px;
  line-height: 1.6;
  color: #222;
}

.fs-l-main .lp-wrap h2.lp--h2,
.fs-l-main .lp-wrap .lp--h2 {
  font-weight: 700;
  font-size: clamp(20px, 4.8vw, 26px);
  line-height: 1.3;
  text-align: center;
  margin-bottom: 32px;
}

.fs-l-main .lp-wrap h3.lp--h3,
.fs-l-main .lp-wrap .lp--h3 {
  font-weight: 700;
  font-size: clamp(18px, 4.2vw, 20px);
  line-height: 1.35;
  text-align: center;
  display: block;
  margin: 80px auto 24px;
}


/* 検証で対応した物追訁E*/

.fs-l-main .fs-l-pageMain {
  padding-top: 0;
}

.fs-body-custom .fs-l-pageMain {
  padding: 0 0 0;
}

/* ==========================
    共通要素
========================== */

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #333;
  line-height: 1.6;
  width: 100%;
  min-height: 100vh;
  top: 0;
  left: 0;
  position: relative;
  z-index: 0;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}




/*--------------------------
        吁E��クション 共送E
---------------------------*/

.fs-l-main .lp--container {
  max-width: 100%;
  width: 100%;
  padding-bottom: 24px;
  padding-top: 24px;
  position: relative;
}

.fs-l-main .lp-section {
  width: 100%;
  max-width: clamp(320px, 92vw, 800px);
  margin: 64px auto;
  padding: 24px;
  /* margin-inline: auto;
  margin-block: clamp(40px, 8vw, 80px);
  padding-inline: clamp(16px, 4vw, 32px);
  padding-block: clamp(24px, 6vw, 48px); */
}

.fs-l-main .lp-section--inner {
  margin-bottom: 64px;
}

.fs-l-main .lp-section--inner p {
  margin-bottom: 8px;
}

.lp-ttl-img {
  width: 150px;
  margin: 0 auto 32px;
}

.lp-ttl-img02 {
  width: 250px;
  margin: 0 auto 32px;
}



/* マウス有端末のみhover発火 */
@media (hover:hover) {

  a img:hover,
  a p:hover,
  a figcaption:hover,
  footer a:hover {
    opacity: .5;
    transition: opacity .3s;
  }
}

a figcaption:hover,
footer a:hover {
  color: #fff;
}

/* タチE��端末ではhover相当�E見た目を無効匁E*/
@media (hover:none) {

  a img,
  a p,
  a figcaption,
  footer a {
    opacity: 1;
    /* 念のため明示 */
  }

  a figcaption,
  footer a {
    color: #fff;
  }
}


/*--------------------------
        吁E��クション 背景�E�E��ォントカラー
        ※セクション毎で、�E体幁E��背景表示
---------------------------*/

.lp-bg1 {
  background-image: url("https://edinter.itembox.design/item/campaign/christmas/2025christmas_cp/img/bg_01.jpg");
  background-size: cover;
  color: #fff;
}

.lp-bg2 {
  background-color: rgba(230, 219, 169, 0.6);
  background-size: cover;
  position: relative;
}

.lp-bg3 {
  background-image: url(https://edinter.itembox.design/item/campaign/christmas/2025christmas_cp/img/bg-check.jpg);
  background-repeat: repeat;
  color: #fff;
}

.lp-bg4 {
  background-color: rgba(230, 219, 169, 0.6);
  background-size: cover;
}

.lp-bg5 {
  background-image: url(https://edinter.itembox.design/item/campaign/christmas/2025christmas_cp/img/bg-check.jpg);
  background-repeat: repeat;
  color: #fff;
}

.lp-bg6 {
  /* background-image: url("/img/bg_03.jpg"); */
  background-color: #84122a;
  background-image: url("https://edinter.itembox.design/item/campaign/christmas/2025christmas_cp/img/bg-star.png");
  background-repeat: repeat;
  color: #fff;
}

.lp-bg7 {
  background-color: rgba(230, 219, 169, 0.6);
  background-size: cover;
}

.lp-bg8 {
  background-color: #00415a;
  background-size: cover;
  color: #fff;
}

/* PCのみ背景固定、SPでは通常スクロール */
@media (hover:hover) {
  .lp-bg--fixed {
    background-attachment: fixed;
  }
}

@media (hover:none) {
  .lp-bg--fixed {
    background-attachment: scroll;
  }
}


/*-----------------------
    リンクボタン設訁E
-----------------------*/

/* 共通�Eタン */
.lp-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  inline-size: 100%;
  max-inline-size: 320px;
  margin-inline: auto;

  /* min-width: 160px; */
  /* ↁEこれで横幁E��全ボタン同じになめE*/
  min-height: 48px;
  /* 高さの基準（忁E��なめE52 E6px�E�E*/

  padding: .75rem 1rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: clamp(14px, 3.6vw, 16px);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .3s, color .3s, border-color .3s;
  box-sizing: border-box;

}

/* セクションチE�Eマで見た目を�E替�E�親で修飾する�E�E*/

/* MVセクション�E�メインビジュアル�E�E*/
.lp-section--mv .lp-btn {
  border-color: #ff4040;
  background-color: #ff4040;
  color: #fff;
  max-inline-size: 200px;
}

.lp-section--mv .lp-btn:hover {
  background-color: #fff;
  color: #ff4040;
}

/* BlOCK3 #campaign　ボタン */

#campaign .lp-btn {
  border: 2px solid #84122a;
  background: #84122a;
  color: #fff;
  max-width: 180px;
  margin: 0 auto 16px;
  /* font-size: 0.8rem; */
}

#campaign .lp-btn:hover {
  color: #84122a;
  background: #fff;
}

/* BLOCK 04　#column */

#column .lp-btn {
  border: 2px solid #005349;
  background: #005349;
  color: #fff;
  max-width: 280px;
}

#column .lp-btn:hover {
  color: #005349;
  background: #fff;
}

#column .lp--h3 {
  margin-top: 16px;
}

/* ===== コラム冁E�E余白�E�Emgとh3が離れ過ぎ！E===== */
/* .column-point-sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vw, 12px);
  margin-block-end: .25rem;
} */

.column-point-sec h3 {
  margin: 0 auto 24px;
}

.link-service {
  margin-top: 32px;
}



/* BLOCK 06 #products */

#products .lp-btn {
  background: #005349;
  color: #fff;
  border: 2px solid #005349;
  max-width: 220px;
  margin: 20px auto 0;
  padding: 14px 20px;
  /* font-size: .9rem; */
}

#products .lp-btn:hover {
  background: #fff;
  color: #005349;
}

/* BLOCK 07 #deliver */

#deliver .lp-btn {
  background: #005349;
  color: #fff;
  border: 2px solid #005349;
  max-width: 400px;
  margin: 16px auto;
  padding: 0.5rem 0.5rem;
  white-space: normal;
  line-height: 1.6;
    font-size: clamp(11px, 3.6vw, 14px);
}

#deliver .lp-btn:hover {
  background: #fff;
  color: #005349;
}


/*--------------------------
        ヘッダー
---------------------------*/

/* === SPヘッダー�E�左:ハンバ�Eガー�E�中央:ロゴ�E�右:カート！E=== */
:root {
  --hdr-h: 56px;
}


/* 固定�EチE��ーの被り対筁E*/


.lp--spHeader {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--hdr-h);
  z-index: 1000;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(6px);
  padding: 6px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.lp--spHeader--btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lp--spHeader--btn svg {
  width: 24px;
  height: 24px;
  fill: #222;
}

.lp--spHeader--logo {
  justify-self: center;
}

.lp--spHeader--logo img {
  width: 50px;
}


/* === ドロワー === */
.lp--drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}

.lp--drawer--backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity .2s;
  z-index: 1200;
}

.lp--drawer--panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(80vw, 320px);
  max-width: 90%;
  background: rgba(255, 255, 255, .95);
  /* box-shadow: 2px 0 16px rgba(0, 0, 0, .15); */
  transform: translateX(-100%);
  transition: transform .2s ease;
  padding: 16px;
  z-index: 1210;
}

.lp--drawer.is-open {
  pointer-events: auto;
}

.lp--drawer.is-open .lp--drawer--panel {
  transform: translateX(0);
}

.lp--drawer.is-open .lp--drawer--backdrop {
  opacity: 1;
}

.lp--drawer--close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}

.lp--drawer--list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}

.lp--drawer--list li {
  border-bottom: 1px solid #eee;
}

.lp--drawer--list a {
  display: block;
  padding: 12px 2px;
  color: #222;
  text-decoration: none;
  font-weight: 700;
}

.lp--drawer--sublist {
  list-style: none;
  margin: 0 0 8px;
  padding: 0 0 8px 16px;
  border-top: 1px solid rgba(0, 0, 0, .05);
}

.lp--drawer--sublist li {
  border-bottom: none;
}

.lp--drawer--sublist a {
  font-weight: 500;
  font-size: 14px;
  padding: 6px 0;
  color: #005349;
}


/*--------------------------
   BLOCK 01 MV -ファーストビュー�E�Eero�E�E
---------------------------*/

.section-mv h1 {
  margin-bottom: 40px;
}

/* grid-3columns の間にスペ�Eスを�Eれる */
.grid-3columns+.grid-3columns {
  margin-top: 24px;
}


/*--------------------------
 BLOCK 02 概要E
---------------------------*/

.ornament {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.lp-bg2 h2.lp--h2 {
  margin: 64px;
}

/*--------------------------
 BLOCK 03 #campaign
---------------------------*/

#cp01,
#cp02,
#cp03 {
  margin-bottom: 40px;
}

/*--------------------------
 BLOCK 05 #service 
 ---------------------------*/

#service p {
  margin-top: 40px;
}

/*--------------------------
 BLOCK 06 #products 
---------------------------*/

.section-txt {
  margin-bottom: 16px;
  font-size: 16px;
}

#products h4.lp--h4 {
  margin-top: 64px;
  margin-bottom: 24px;
  /* font-size: 1.4rem; */
}

#products h3.lp--h3 {
  margin: clamp(48px, 8vw, 64px) auto clamp(16px, 4vw, 24px);
}

#products article {
  margin-bottom: clamp(40px, 8vw, 56px);

}

#products .lp-section--inner {
  margin-bottom: clamp(32px, 6vw, 48px);
}

#products .lp-products-nav {
  margin: 24px auto 56px;
  padding: 0 12px;
  max-width: 960px;
}

#products .lp-products-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
}

#products .lp-products-nav__item {
  flex: 1 1 240px;
  display: flex;
}

#products .lp-products-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
  border: 2px solid #005349;
  color: #005349;
  background: rgba(255, 255, 255, .95);
  font-weight: 700;
  font-size: clamp(14px, 3.4vw, 16px);
  text-decoration: none;
  transition: background-color .2s, color .2s;
}

#products .lp-products-nav__link:hover,
#products .lp-products-nav__link:focus-visible {
  background: #005349;
  color: #fff;
}

/*--------------------------
 BLOCK 07 #deliver 
 ---------------------------*/

.lp-deliver--box {
  margin: 24px auto;
  border: 1px solid #000;
  background-color: #84122a;
  color: #fff;
  padding: 16px 24px;
  width: 80%;
}

.lp-deliver--box p {
  text-align: center;
}

.lp-deliver02 p {
  margin: 24px auto;
}




/*--------------------------
 BLOCK 08　リンク色、E
---------------------------*/


/*--------------------------
        グリチE��　3 columns
---------------------------*/

.lp-bg8 .grid-3columns .card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.lp-bg8 .grid-3columns .card-link:visited,
.lp-bg8 .grid-3columns .card-link:hover,
.lp-bg8 .grid-3columns .card-link:focus-visible {
  color: inherit;
}

.grid-3columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 可変幁E��等�E */
  gap: 16px;
  margin: 0 auto;
}

.grid-3columns li {
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  /* border: 1px solid #ddd; */
  /* padding: 16px; */
  /* background-color: #fff; */
  /* border-radius: 8px; */
  /* 下記追加　坁E��にするため */
  /* display: flex;
    flex-direction: column;
    justify-content: space-between; */
}

.grid-3columns img {
  max-width: 100%;
  height: auto;
  /* margin-bottom: 12px; */
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 5px;
}



/*--------------------------
      啁E��カーチE グリチE��　上段1枚　下段�E�～３枚
---------------------------*/

/* ====== products 変則グリチE���E�E列ÁE段の亜種�E�E====== */
.lp-grid-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* 基本カード体裁E*/
.lp-grid-products .card {
  /* background: rgba(255, 255, 255, .6); */
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  margin-bottom: 24px;
}

/* 画像がバラつく場合に備えて “面 Eを揃える */
.lp-grid-products .card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  aspect-ratio: 1/1;
  /* 忁E��に応じて 1/1 めE3/4 へ */
  object-fit: cover;
}

/* 上段ワイド！Eが上段で左右2列に跨る！E*/
.lp-grid-products.layout--topWide .card--L {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.lp-grid-products.layout--topWide .card--S1 {
  grid-column: 1;
  grid-row: 2;
}

.lp-grid-products.layout--topWide .card--S2 {
  grid-column: 2;
  grid-row: 2;
}

#luckybag .lp-grid-products.layout--topWide .card--L {
  grid-column: 1 / -1;
}

#luckybag .lp-grid-products.layout--topWide .card--S1,
#luckybag .lp-grid-products.layout--topWide .card--S2 {
  grid-column: auto;
  grid-row: auto;
}

/* グリチE��冁E��裁調整 */

.lp-grid-products h5.lp--h5 {
  margin: 16px auto;
  /* font-size: 1.1rem; */
}




/*--------------------------
        グリチE��　2columns
---------------------------*/

.grid-2columns {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  box-sizing: border-box;
}

/* .fs-l-main .lp-wrap .grid-2columns h3.lp--h3 {
  font-size: 0.8rem;
} */

.grid-2columns li {
  max-width: 100%;
  overflow: hidden;
  /* border: 1px solid #ddd; */
  /* padding: 16px; */
  /* background-color: #fff; */
  /* border-radius: 8px; */
  text-align: center;
  box-sizing: border-box;
  /* 下記追加　坁E��にするため */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid-2columns img {
  max-width: 100%;
  height: auto;
  /* margin-bottom: 12px; */
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 5px;
}


/*--------------------------
 フッター 
 ---------------------------*/

footer ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}

footer li {
  font-size: clamp(14px, 3.6vw, 16px);
  color: #fff;
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer a:visited {
  color: #fff;
}

footer .ftr-logo {
  margin: 32px auto;
}

footer .ftr-logo--geni {
  width: 100px;
}

footer .lp-ftr--container {
  padding-top: 24px;
  padding-bottom: 40px;
  background-color: #84122a;
  color: #fff;
}

footer p small {
  text-align: center;
  font-size: 14px;
}


/*--------------------------
 トップへ戻る�Eタン
 ---------------------------*/

#page_top {
  width: 80px;
  height: 80px;
  position: fixed;
  right: -80px;
  transition: right .3s;
  bottom: 24px;
  opacity: 1.0;
  z-index: 30;
}

#page_top.is-visible {
  right: 24px;
}

#page_top a {
  position: relative;
  display: block;
  width: 60px;
  height: 40px;
  text-decoration: none;
}

#page_top a::before {
  font-weight: 900;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -3px;
  bottom: 0;
  right: 0;
  left: -1px;
  margin: auto;
  text-align: center;
}


/* トップへ戻る�Eタン end */


/*--------------------------
 タブ�E替
 ---------------------------*/

/* タブ�E土台�E��Eタン列＋�E容を同一グリチE��上に配置 */
.tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* 4個�Eとき、E個ならrepeat(5,1fr) */
  gap: 8px;
}

/* ボタン�E�ラベル�E��E1行目に並べめE*/
.tab_class {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 .5rem;
  border-radius: 30px;
  border: 1px solid #fff;
  background: #84122A;
  color: #fff;
  line-height: 1;
  font-size: clamp(14px, 3.6vw, 16px);
}

/* 年齢タブ用チE�EチE*/
.tabs--age .tab_class {
  white-space: nowrap;
}

/* 金額タブ用チE�EチE*/
.tabs--budget .tab_class {
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .tabs--budget .tab_class {
    height: 80px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

input[name="age_tab"] {
  display: none;
}

input[name="budget_tab"] {
  display: none;
}

input[name="tab_name"] {
  display: none;
}

/* 表示中ボタンの見た目 */
input[type="radio"] {
  display: none
}

input[type="radio"]:checked+.tab_class {
  background: #fff;
  color: #005349;
  border-color: #fff;
}

/* コンチE��チE�E常に2行目・フル幁E��表示刁E��のみ�E�E*/
.content_class {
  grid-column: 1 / -1;
  grid-row: 2;
  display: none;
  padding: 30px 10px;
}

input[type="radio"]:checked+.tab_class+.content_class {
  display: block;
}


/*--------------------------
 チE��バイダー 
 ---------------------------*/

/* .lp--containerが親で、position: relative;に設定済み */

.custom-shape-divider-01 {
  position: absolute;
  left: 0;
  right: 0;
  top: -38px;
  /* ↁESVGの高さぶんだけ持ち上げめE*/
  height: 38px;
  /* ↁE好きな高さに調整可 */
  line-height: 0;
  z-index: 10;
  /* コンチE��チE��り丁E*/
  pointer-events: none;
  /* クリチE��邪魔しなぁE*/

}

.custom-shape-divider-01 svg {
  display: block;
  width: 100%;
  height: 100%;

  /* position: relative;
    display: block;
    width: calc(138% + 1.3px);
    height: 38px; */
}

.custom-shape-divider-01 .shape-fill {
  fill: rgba(230, 219, 169, 0.6);
}



/* ///////////////////////////////////////////////////////////////////////////
スマ�E表示
/////////////////////////////////////////////////////////////////////////// */


@media screen and (max-width: 768px) {

  .fs-l-main .lp-wrap .lp-section {
    margin: 32px auto;
    padding: 4px;
  }

  .lp-section--inner {
    margin-bottom: 48px;
  }

  /* BLOCK 02 概要E*/

  .ornament {
    width: 100%;
  }

  /* BLOCK 07 #deliver */
  .lp-deliver--box {
    width: 95%;
  }


  /* BLOCK 06 #products */

  /* グリチE��　啁E��カーチE SP表示は�E��E、パチE��ングなぁE*/

  .lp-grid-products {
    grid-template-columns: 1fr;
  }

  .lp-grid-products.layout--topWide .card--L,
  .lp-grid-products.layout--topWide .card--S1,
  .lp-grid-products.layout--topWide .card--S2 {
    grid-column: 1;
    grid-row: auto;
  }

  .lp-grid-products .card {
    padding: 0;
  }

  /* BLOCK 07 #deliver */

  .lp-deliver02 .lp-btn {
    font-size: 10px;
  }

  /* BLOCK 08　リンク色、E*/

  .recommendColumn_sec p {
    font-size: clamp(14px, 3.6vw, 16px);
  }

  .card-link {
    display: block;
    text-decoration: none;
    color: inherit
  }

  .card-link .card figcaption {
    margin-top: 8px;
    line-height: 1.5;
  }

  /* フッター */
  footer .lp-ftr--sp {
    /* display: flex;
        justify-content: space-between; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }

  footer ul {
    flex-direction: column;
    color: #fff;
  }

}


/* ===== カード本体（高さは変数で一括管琁E��E===== */
.campaign-card {
  /* --card-h: 350px; */
  /* ↁE高さを揃えたぁE��き�Eここだけ変更 */
  position: relative;
  max-width: 740px;
  margin: 40px auto 0;
  border-radius: 30px;
  background: #fff;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
  /* height: var(--card-h); */
  overflow: visible;
  /* ↁEここめEvisible に�E�タグを�EらなぁE��E*/
  isolation: isolate;
  /* z-indexの安定化�E�推奨�E�E*/
}

/* Gridレイアウト：上段=lead�E�E列またぎ�E�E 下段=media + content */
.campaign-card__inner {
  position: relative;
  height: 100%;
  overflow: hidden;
  /* 1) 汎用�E�中身を隠ぁE*/
  border-radius: 30px;
  /* 同じ角丸でマスク */
  background: #fff;
  /* 柁E��け防止 */
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "media   lead"
    "media  content";
  gap: clamp(12px, 2.6vw, 16px);
  padding: 24px;
  box-sizing: border-box;
}

.campaign-card__lead {
  grid-area: lead;
  text-align: center;
}

.campaign-card__lead p {
  font-size: clamp(18px, 2.8vw, 22px);
  line-height: 1.35;
  margin: 0 0 8px;
  color: #912;
}

.campaign-card__media {
  grid-area: media;
  align-self: end;
}

.campaign-card__content {
  grid-area: content;
  display: flex;
  flex-direction: column;
}

/* 画像�E縦横比を保って収める（余白が�Eても�Eり抜かなぁE��E*/
.campaign-card__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  /* 任意：均一に見せたい場吁E*/
}

.campaign-card__text {
  margin: 0 0 12px;
  color: #333;
  line-height: 1.7;

  /* 行数で収めて高さを揃える�E�忁E��に応じて調整�E�E*/
  /* display: -webkit-box; */
  /* -webkit-line-clamp: 4; */
  /* ↁE行数を揃えるポインチE*/
  /* -webkit-box-orient: vertical; */
  overflow: hidden;
}

.campaign-card__text p {
  margin-bottom: 8px;
}

.campaign-card__text a {
  color: #005349;
  text-decoration: underline;
  font-weight: 700;
}

.campaign-card__text a:hover,
.campaign-card__text a:focus-visible {
  color: #84122a;
}


/* �L�����y�[���I���\�� */
/* Campaign ended overlay */
.campaign-card.is-ended {
  filter: grayscale(1);
}

.campaign-card.is-ended::before {
  content: "\30AD\30E3\30F3\30DA\30FC\30F3\7D42\4E86";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.78);
  color: #333;
  font-weight: 700;
  font-size: clamp(16px, 3.4vw, 20px);
  z-index: 3;
  border-radius: inherit;
}

.campaign-card.is-ended .campaign-card__inner {
  pointer-events: none;
}

/* タグ�E�会員様限定！E*/
.member-badge {
  position: absolute;
  left: -30px;
  top: -24px;
  z-index: 2;
}

.member-badge img {
  width: 80%;
  height: auto;
  display: block;
}


/* ===== レスポンシチE===== */
@media (max-width: 500px) {
  .campaign-card {
    /* --card-h: 500px; */
    margin-top: 40px;
  }

  .campaign-card__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "lead"
      "media"
      "content";
    gap: 12px;
    padding: 40px 16px 16px;
    margin-top: 120px;
  }

  .campaign-card__media img {
    width: 70%;
  }

  .campaign-card__lead {
    margin-top: 40px;
  }

  .member-badge {
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
  }
}


/* ==============================
   アクセシビリチE��補助
============================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* フォーカス可視性を�E示�E�キーボ�Eド操作�E見やすさ�E�E*/

a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}
/* �R������̃|�C���g�摜��PC�\���̂ݏk�� */
@media screen and (min-width: 769px) {
  #column img[src*='point02-img.png'] {
    width: 60%;
    max-width: 60%;
    margin-inline: auto;
  }

  #column img[src*='point04-img.png'] {
    width: 80%;
    max-width: 80%;
    margin-inline: auto;
  }
}








#staff .lp-grid-products.layout--topWide .card--L {
  grid-column: 1 / -1;
}

#staff .lp-grid-products.layout--topWide .card--S1,
#staff .lp-grid-products.layout--topWide .card--S2 {
  grid-column: auto;
  grid-row: auto;
}