@charset "utf-8";
#itemList_wrap { display: block; } /* 商品一覧表示 */
.header_area { width: 1024px; margin: 0 auto; }

/* ヘッダー
====================================================*/
#categorylp_header{
  margin:0px;
  padding:0px;
}

/* 終了アテンション
====================================================*/
.attention_area,
.etrlp_attention {
  border: solid 1px;
  max-width: 800px;
  margin: auto;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  background-color: #fffccb;
  padding: 1rem;
}

/* 背景
====================================================*/
.etr_contents_bg {
  width: 100%;
  margin: auto;
  background-image: url("https://www.eitarosouhonpo.co.jp/pic-labo/hw26_bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* アイコン
====================================================*/
.etr_iconarea {
  min-height: 70px;
}
.etr_iconarea ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-start;
  font-size: 12px;
}

.item_op_e  { width:100; background-color:#043459; color:#fff; padding:5px; text-align:center; display:inline-block; }
.item_op_ae { background-color:#c9004c; color:#fff; padding:5px; text-align:center; display:inline-block; }
.item_op_ne { background-color:#c3464b; color:#fff; padding:5px; text-align:center; display:inline-block; }
.item_op_tp { background-color:#1d2088; color:#fff; padding:5px; text-align:center; display:inline-block; }
.item_op_ke { background-color:#785134; color:#fff; padding:5px; text-align:center; display:inline-block; }
.item_op1   { background-color:#9a0a0a; color:#fff; padding:5px; text-align:center; display:inline-block; } /* 季節限定 */
.item_op2   { background-color:#ff0c00; color:#fff; padding:5px; text-align:center; display:inline-block; } /* 送料無料 */
.item_op3   { background-color:#00a0ff; color:#fff; padding:5px; text-align:center; display:inline-block; } /* オンライン限定 */
.item_op4   { background-color:#d03551; color:#fff; padding:5px; text-align:center; display:inline-block; } /* 早割対象 */
.item_op5   { background-color:#008402; color:#fff; padding:5px; text-align:center; display:inline-block; } /* 熨斗限定 */
.item_op6   { background-color:#9a0a0a; color:#fff; padding:5px; text-align:center; display:inline-block; } /* 季節限定商品 */

/* 装飾
====================================================*/
.stripe-backgroundtitle {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5rem;
}
p.stripe-backgroundtitle_text { font-size: 2rem; line-height: 1.5rem; color: #ad8f00; }
span.stripe-backgroundtitle_textsmall { font-size: 1.1rem; }
a.etr_catbtn img { max-width: 500px; width: 100%; }
.etr_lpread img { max-width: 500px; width: 100%; display: block; margin: 1rem auto; }
.ctgy_titlearea img { max-width: 350px; width: 100%; margin-bottom: 1rem; }
.etr_lplinkbnr img { margin-bottom: 3rem; }

/* 旧タイトルエリア（未使用の場合は削除可）
====================================================*/
.titlearea { position: relative; width: 100%; margin-top: 3rem; }
.titlearea .titlearea_bg { width: 100%; display: block; }
.titlearea .titlearea_img {
  position: absolute; top: 20%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 500px; width: 100%;
}

/* ページ内遷移
====================================================*/
.pagelinkarea { display: flex; gap: 0 20px; justify-content: center; margin-bottom: 3rem; }
.pagelinkarea img { max-width: 240px; width: 100%; }

/* 商品カード（旧 etr_card 系）
====================================================*/
.contents_area { width: 100%; margin: auto; text-align: center; }
.etr_container { max-width: 1024px; margin: 0 auto; width: 100%; margin-bottom: 3rem; }
.etr_grid { display:grid; align-items:stretch; gap: var(--gap-pc); background:#fff; border-radius:10px; }
.etr_card {
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit; overflow:hidden;
  transition: opacity .2s ease, transform .06s ease;
  will-change: opacity;
}
.etr_card:hover { opacity: 0.85; cursor: pointer; }
.etr_card:focus-visible { outline: 2px solid #aaa; outline-offset: 2px; }
.etr_card__img:hover, .etr_card__body:hover, .etr_btnlike:hover { opacity: 1 !important; transition: none !important; }
a.etr_card { text-decoration: none; padding: 5px; background: #fff; }
p.etr_card__desc { text-align: left; }
.etr_card__img img { display: block; width: 100%; margin: auto; }
h3.etr_card__title {
  min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
  font-size: 1.1rem; padding: initial; font-weight: 100;
}
.etr_card__body { display:flex; flex-direction:column; gap:12px; padding:16px 0 0 0; flex:1; }
.etr_card__title { font-size:1rem; line-height:1.5; font-weight:700; margin:0; }
.etr_card__desc { font-size:13px; line-height:1.7; margin:0; }
.etr_card__meta { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-direction:column; }
.etr_price { font-size: 1.05rem; font-weight: 700; }
.etr_btnlike {
  display:inline-block; padding:1rem 0; background:#9a0a0a; color:#fff;
  font-weight:700; white-space:nowrap; width:100%; text-align:center;
}
a.etr_card-1col { display:flex; flex-direction:row; align-items:stretch; justify-content:center; padding:5px; gap:10px; }
a.etr_card-1col img { max-width: 560px; width: 100%; margin: initial; }
a.etr_card-1col .etr_card__body { width: 60%; flex: inherit; padding: inherit; }
a.etr_card-1col:hover { text-decoration: none; cursor: pointer; }
a.etr_card-1col p.etr_card__desc:hover { opacity: 0.4; }
a.etr_card:hover .etr_card__desc { opacity: 0.4; }

.etr_grid--2col { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; background:transparent; }
.etr_grid--2col figure.etr_card__img { max-width: 300px; width: 100%; margin: auto; }
.etr_grid--3col { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; background:transparent; }
.etr_grid--4col { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; background:transparent; }
.etr_grid--4colfirst2 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; background:transparent; }
.etr_grid--4colfirst2 > .etr_card:first-child { grid-column: span 2; }
.etr_grid--4colfirst2 > .etr_card:first-child .etr_card__img { width: 60%; margin: auto; }
.etr_grid--4collast2 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; background:transparent; }
.etr_grid--4collast2 > .etr_card:last-child { grid-column: span 2; }
.etr_grid--4collast2 > .etr_card:last-child .etr_card__img { width: 60%; margin: auto; }

/* LPカード（etrlp_ 系）
====================================================*/
.etrlp_sectionnav {
  max-width: 900px; margin: 40px auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}

a.etrlp_card,
a.etr_card {
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}
a.etrlp_card:hover,
a.etr_card:hover {
  opacity: 0.7;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 123, 117, 0.2);
  transform: translateY(-2px);
}
a.etr_catbtn {
  display: block;
  width: fit-content;      /* ← 追加：中身（画像）の幅に合わせる */
  margin: 0 auto;          /* ← 追加：text-align centerの代わりに自身を中央寄せ */
  text-align: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: relative;
  z-index: 3;
}
a.etr_catbtn:hover {
  transform: translateX(2px);
  opacity: 0.85;
  cursor: pointer;
}

.etrlp_img { display: block; margin: 0 auto; }

img.etrlp_title {
  max-width: 100%;
  width: 400px;
  display: block;
  margin: auto;
  margin-bottom: 1rem;
  padding-top: 1rem;
  object-fit: contain;
  z-index: 1;
}

a.etrlp_card {
  text-decoration: none;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.etrlp_card img { width: 100%; height: auto; display: block; }

.etrlp_grid--1col { display:grid; grid-template-columns:1fr; background:transparent; }
.etrlp_grid--2col { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); background:transparent; }
.etrlp_grid--3col { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); background:transparent; }
.etrlp_grid--4col { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); background:transparent; }
.etrlp_grid--4colfirst2 { display:grid; grid-template-columns:repeat(4,1fr); background:transparent; }
.etrlp_grid--4colfirst2 > .etrlp_card:first-child { grid-column: span 2; }
.etrlp_grid--4collast2 { display:grid; grid-template-columns:repeat(4,1fr); background:transparent; }
.etrlp_grid--4collast2 > .etrlp_card:last-child { grid-column: span 2; }

/* 売り切れ
====================================================*/
a.etrlp_card.etr_soldout { position: relative; pointer-events: none; }
.etrlp_card__etr_soldout-text {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; font-size: 1.2rem; font-weight: bold;
  z-index: 3; white-space: nowrap;
}
a.etrlp_card.etr_soldout:after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.45); z-index: 2;
}

/* ============================================================
   ハロウィン特集2026 背景・リード・浮遊アイテム
   ------------------------------------------------------------
   ・.etrlp_cont_bg にページ全体の背景画像
   ・.etrlp_bg_overlay は画面に固定される装飾オーバーレイ
   ・.etrlp_read はリード（キービジュアル）エリア。中の
     .etrlp_read_bg を絶対配置にして背景の上に重ねている
   ・.etrlp_gif_layer / .etrlp_float_item は、スクロールで
     おばけ・キャンディが左右斜めから出現しそのまま留まる演出
   ============================================================ */
.etrlp_cont_bg {
  position: relative; /* .etrlp_bg_overlay を絶対配置するための基準 */
  z-index: 0;
  width: 100%;
  margin: auto;
  background-image: url("https://www.eitarosouhonpo.co.jp/pic-labo/hw26_bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
overflow: hidden;  
  
}
.etrlp_bg_overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url("https://www.eitarosouhonpo.co.jp/pic-labo/hw26_bg_overlay.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed; /* 画面に固定される */
  pointer-events: none;
  z-index: -1;

}

.etrlp_read {
  position: relative; /* .etrlp_read_bg / .etrlp_gif_layer を絶対配置するための基準 */
  z-index: 2;
  min-height: 500px; /* hw26_read_bg.pngの縦横比に合わせて調整してください */
  
}
.etrlp_read_bg {
  position: absolute;
  top: 0; left: 0;
    padding: 10px 0 60px 0;

  width: 100%; height: 100%;
  background-image: url("https://www.eitarosouhonpo.co.jp/pic-labo/hw26_read_bg.png");
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 中のimgがはみ出さないようにガード */
}
.etrlp_read .etrlp_read_bg img {
  max-width: 800px;
  width: 90%;
  height: auto;
  max-height: 90%; /* .etrlp_read の高さを超えないように制限 */
  object-fit: contain;
  display: block;
  margin: 0;
}

.etrlp_read_bg img {
  position: relative;
  z-index: 3; /* .etrlp_gif_layer の z-index:2 より大きい値 */
}

.etrlp_container {
  position: relative;
  z-index: 1; /* 背景オーバーレイより手前 */
  max-width: 1024px;
  margin: 0 auto;
  width: 100%;
  margin-bottom: 3rem;
}

.etrlp_grid {
  position: relative;
  z-index: 10; /* 浮遊アイテムより必ず手前に来るようにする */
  display: grid;
  align-items: stretch;
  gap: 20px;
  border-radius: 10px;
}

.etrlp_gif_layer {
  position: relative;
  z-index: 2; /* 背景オーバーレイ(z-index:0)より上、カード(z-index:10)より下 */
  pointer-events: none;
}

.etrlp_float_item {
  position: absolute;
  opacity: 0;

  transform:
    translate(var(--dx), var(--dy))
    rotate(var(--rot));

  transition:
    transform 1s ease,
    opacity 1s ease;
}

.etrlp_float_item.is-play {
  opacity: 1;
  transform:
    translate(0, 0)
    rotate(0deg);
}

/* リードのおばけは個別サイズ指定 */
.etrlp_float_item.ghost1 { width: 160px; }
.etrlp_float_item.ghost2 { width: 190px; }
.etrlp_float_item.ghost3 { width: 400px; }

/* コマ送り風の斜め移動アニメーション（カクカク強め） */
@keyframes etrlpFloatIn {
  0%   { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(0deg); }
  20%  { opacity: 1; transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6)) rotate(var(--rot)); }
  45%  { transform: translate(calc(var(--dx) * 0.28), calc(var(--dy) * 0.28)) rotate(calc(var(--rot) * -0.8)); }
  70%  { transform: translate(calc(var(--dx) * 0.1), calc(var(--dy) * 0.1)) rotate(calc(var(--rot) * 0.4)); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}
.etrlp_float_item.is-play {
  animation: etrlpFloatIn 2.2s steps(3, end) forwards; /* steps数を減らすほどカクつきが強まる */
}

@keyframes candyArcLeftDown {
  0% {
    opacity: 0;
    transform: translate(-320px, -220px) rotate(-8deg);
  }

  18% {
    opacity: 1;
    transform: translate(-300px, -165px) rotate(-6deg);
  }

  40% {
    transform: translate(-245px, -95px) rotate(-2deg);
  }

  62% {
    transform: translate(-155px, -42px) rotate(3deg);
  }

  82% {
    transform: translate(-65px, -12px) rotate(5deg);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes candyArcRightDown {
  0% {
    opacity: 0;
    transform: translate(320px, -220px) rotate(8deg);
  }

  18% {
    opacity: 1;
    transform: translate(300px, -165px) rotate(6deg);
  }

  40% {
    transform: translate(245px, -95px) rotate(2deg);
  }

  62% {
    transform: translate(155px, -42px) rotate(-3deg);
  }

  82% {
    transform: translate(65px, -12px) rotate(-5deg);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
}

.etrlp_float_item.candy-left.is-play {
  animation: candyArcLeftDown 2.4s cubic-bezier(.22,.61,.36,1) forwards;
}

.etrlp_float_item.candy-right.is-play {
  animation: candyArcRightDown 2.4s cubic-bezier(.22,.61,.36,1) forwards;
}

.etr_hw_obake {
  max-width: 1024px; /* .etrlp_container と同じコンテンツ幅に制限 */
  width: 100%;
  margin: 0 auto;     /* コンテンツ幅の中で中央寄せ（＝両端がetrlp_containerと揃う） */
  text-align: right;  /* その中で画像だけ右寄せ */
  z-index: 1;
}
.etr_hw_obake img {
  max-width: 200px;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .etrlp_float_item { animation: none; opacity: 1; transform: none; }
}