@charset "UTF-8";
/* ==========================================================================
futureshop トップページ用「イベント告知ポップアップ」スタイル
--------------------------------------------------------------------------
アップロード先：ファイル管理 item/css/event-popup.css
読み込み：
セット：event-popup.js（このCSSを先に読み込んでおくこと）
■ 動作
・読み込み後 1秒（JS側 delaySec）で画面下部中央からふわっと浮き上がります
・画面全体は覆いません。背面のページはそのままスクロール・操作できます
・カード全体がリンク。×ボタン／Escキーで閉じられます
■ 他の固定要素との位置関係（2026-09 時点）
・チャットウィジェット #ino-chat-widget … 画面左下（bottom:20px / left:20px）
・固定カートボタン .ino-fc … 画面右下（商品ページのみ）
→ 本ポップアップは左右中央に出すため、どちらとも重なりません。
高さを変えたいときは下の --ino-ep-bottom だけ触ってください。
■ 重なり順（z-index）について ★重要
スマホ用CSS（fs_itou_sp.css）で .fs-l-footer に z-index: 9999 が付いています。
ポップアップの z-index がこれより小さいと、フッターまでスクロールした時点で
ポップアップがフッターの下に隠れて見えなくなります（スマホで表示されない原因）。
そのため --ino-ep-z はサイト内の最大値 999999 より大きい値にしています。
チャットウィジェット（2147483647）より下なので、チャットは常に前面のままです。
■ 注意
・セレクタはすべて .ino-ep 配下に限定しています（サイト側への影響なし）
・rem は使わず px 指定（サイト側の html { font-size } の影響を受けない）
========================================================================== */
/* --------------------------------------------------------------------------
▼ デザイン変数（色はサイト既存のトーン＝cart-float-button.css に合わせています）
-------------------------------------------------------------------------- */
.ino-ep {
--ino-ep-main: #E2962D; /* メインカラー（オレンジ） */
--ino-ep-main-dark: #C27E1D; /* ホバー時 */
--ino-ep-text: #4A4636; /* 文字色 */
--ino-ep-sub: #8C8570; /* 補助文字色 */
--ino-ep-bg: #FFFFFF; /* カード背景 */
--ino-ep-border: #E4E0D6; /* 罫線 */
--ino-ep-radius: 14px;
/* ▼ 表示位置とサイズ（PC）
左右は画面中央そろえ。高さ（下からの距離）だけ --ino-ep-bottom で調整します */
--ino-ep-bottom: 24px; /* 画面下からの距離 */
--ino-ep-side: 10px; /* スマホ時の左右の余白 */
--ino-ep-width: 380px; /* カードの横幅 */
--ino-ep-thumb: 116px; /* サムネイルの幅 */
/* サムネイルの収め方
contain = 画像全体を表示（文字入りのバナー画像向け。上下に余白が出ます）
cover = 枠いっぱいに表示（写真向け。上下左右がトリミングされます） */
--ino-ep-thumb-fit: contain;
--ino-ep-thumb-bg: #F7F5EF; /* 余白部分の色 */
/* ▼ 重なり順
サイト側の最大値（.fs-l-header などの 999999）より上、
チャットウィジェット（2147483647）より下 */
--ino-ep-z: 1000000;
/* ▼ アニメーション（表示前の位置）
横中央そろえの translateX(-50%) も一緒に持たせています。
スマホ・is-center のときは下で上書きします */
--ino-ep-tf: translate(-50%, 28px);
position: fixed;
left: 50%; /* 画面中央そろえ（transform の -50% とセット） */
right: auto;
bottom: var(--ino-ep-bottom);
top: auto;
width: var(--ino-ep-width);
max-width: calc(100vw - 20px);
z-index: var(--ino-ep-z);
font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
color: var(--ino-ep-text);
line-height: 1.5;
text-align: left;
-webkit-font-smoothing: antialiased;
/* 初期状態は非表示。JS が .is-visible を付けて出します */
opacity: 0;
visibility: hidden;
pointer-events: none; /* 隠れている間は背面のページを操作できるように */
transform: var(--ino-ep-tf);
transition: opacity .38s ease, transform .38s cubic-bezier(0.16, 1, 0.3, 1), visibility .38s;
}
.ino-ep.is-visible {
--ino-ep-tf: translate(-50%, 0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.ino-ep,
.ino-ep *,
.ino-ep *::before,
.ino-ep *::after { box-sizing: border-box; }
/* サイト側CSSの流入でレイアウトが崩れないよう、最低限だけリセット
※ 詳細度を下の .ino-ep__* 各指定と同じ (0,1,0) に揃えています。
ここを .ino-ep span のような書き方にすると詳細度が勝ってしまい、
各パーツの padding / margin が全部打ち消されて崩れます。 */
.ino-ep__wrap *,
.ino-ep__wrap *::before,
.ino-ep__wrap *::after { margin: 0; padding: 0; }
/* --------------------------------------------------------------------------
カード本体（ なので中の はすべて display 指定が必要）
-------------------------------------------------------------------------- */
.ino-ep__wrap { position: relative; }
.ino-ep__card {
display: flex;
align-items: stretch;
overflow: hidden;
background: var(--ino-ep-bg);
border: 1px solid var(--ino-ep-border);
border-radius: var(--ino-ep-radius);
box-shadow: 0 10px 30px rgba(74, 70, 54, 0.22);
text-decoration: none;
color: var(--ino-ep-text);
transition: box-shadow .25s ease, transform .25s ease;
}
.ino-ep__card:hover,
.ino-ep__card:focus-visible {
text-decoration: none;
color: var(--ino-ep-text);
box-shadow: 0 14px 34px rgba(74, 70, 54, 0.3);
transform: translateY(-2px);
}
/* サムネイル ------------------------------------------------------------- */
.ino-ep__thumb {
display: block;
flex: 0 0 var(--ino-ep-thumb);
width: var(--ino-ep-thumb);
align-self: stretch;
background: var(--ino-ep-thumb-bg); /* 画像読込前のちらつき防止も兼ねる */
overflow: hidden;
}
.ino-ep__thumb img {
display: block;
width: 100%;
height: 100%;
min-height: var(--ino-ep-thumb);
/* width/height 属性の原寸（1000px）のまま表示されて崩れないようにする */
object-fit: var(--ino-ep-thumb-fit);
object-position: center;
border: none;
border-radius: 0;
}
/* テキスト側 ------------------------------------------------------------- */
.ino-ep__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0; /* 長いテキストではみ出さないための指定 */
padding: 12px 14px 12px 13px;
}
.ino-ep__titleRow {
display: flex;
align-items: center;
gap: 8px;
}
.ino-ep__title {
display: block;
font-size: 15px;
font-weight: 700;
line-height: 1.35;
letter-spacing: .01em;
color: var(--ino-ep-main-dark);
}
/* タイトル横の飾り罫（中身が空の ） */
.ino-ep__titleLine {
display: block;
flex: 1 1 auto;
min-width: 12px;
height: 1px;
background: var(--ino-ep-border);
}
.ino-ep__desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; /* 長文でもカードが伸びすぎないように4行まで */
overflow: hidden;
margin-top: 7px;
font-size: 11.5px;
line-height: 1.6;
color: var(--ino-ep-sub);
}
.ino-ep__btnRow {
display: flex;
justify-content: flex-end;
margin-top: auto; /* 常にカード下端に寄せる */
padding-top: 10px;
}
.ino-ep__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 18px;
border-radius: 999px;
background: var(--ino-ep-main);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
white-space: nowrap;
transition: background-color .25s ease;
}
.ino-ep__card:hover .ino-ep__btn,
.ino-ep__card:focus-visible .ino-ep__btn { background: var(--ino-ep-main-dark); }
/* 閉じるボタン ----------------------------------------------------------- */
.ino-ep__close {
position: absolute;
top: -10px;
right: -10px;
width: 30px;
height: 30px;
appearance: none;
-webkit-appearance: none;
padding: 0;
border: 1px solid var(--ino-ep-border);
border-radius: 50%;
background: var(--ino-ep-bg);
box-shadow: 0 2px 8px rgba(74, 70, 54, 0.22);
color: var(--ino-ep-sub);
font-size: 17px;
line-height: 1;
cursor: pointer;
transition: color .2s ease, background-color .2s ease;
}
.ino-ep__close:hover {
color: var(--ino-ep-text);
background: #F7F5EF;
}
/* キーボード操作時のフォーカス表示 */
.ino-ep__card:focus-visible,
.ino-ep__close:focus-visible {
outline: 2px solid var(--ino-ep-main);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
【任意】上下も画面中央に出す場合（