@charset "UTF-8";

/* ==========================================================================
   1. 基本リセットと共通変数
   ========================================================================== */
:root {
    --cube-red: #eb1c24;        /* コーポレート・緊急・割引レッド */
    --cube-mint: #4DB6AC;       /* アクセント・マイクロCVカラー */
    --text-main: #333333;       /* メインテキスト */
    --text-sub: #666666;        /* サブテキスト */
    --bg-outside: #f5f2ee;      /* 筐体の外側の背景色 */
    --bg-inside: #ffffff;       /* 筐体の内側の背景色 */
    --border-color: #e8e5e2;
}

html {
    font-size: 62.5%;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    color: var(--text-main);
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    -webkit-font-smoothing: antialiased;

    /* 格子外の背景：SYOKUTSU明朝体ロゴ（45度右肩上がり・16px連続表示） */
    background-color: var(--bg-outside);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><text x='110' y='110' font-family='Georgia, \"Times New Roman\", \"Hiragino Mincho ProN\", serif' font-size='16' font-weight='600' fill='%23e4ded8' opacity='0.7' text-anchor='middle' dominant-baseline='central' transform='rotate(-45 110 110)'>SYOKUTSU</text></svg>");
    background-repeat: repeat;
}

/* ==========================================================================
   2. ビューポート＆オンボーディング格子（筐体全体の高さ・固定制限）
   ========================================================================== */
.cube-lp-viewport {
   width: 100%;
    height: 100vh;          /* 100vhで縦幅を完全に固定 */
    height: -webkit-fill-available; /* iOSのツールバー対策 */
    display: flex;
    flex-direction: column; 
    justify-content: space-between; /* 上下にパーツを綺麗に配分 */
    align-items: center;
    padding: 8px 12px 4px 12px; /* 隙間を極限まで詰め、セーフエリアを確保 */
    box-sizing: border-box;
    overflow: hidden;
}

/* オンボーディングの格子枠（縦のレイアウトを Flexbox で厳密に固定） */
.cube-onboarding-frame {
    width: 100%;
    max-width: 480px; 
    height: calc(100vh - 80px); 
    background-color: var(--bg-inside);
    border-radius: 20px;    /* 画面を広く使うため少し角丸をシャープに */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column; 
    overflow: hidden;       
    position: relative;
}

/*■レスポンシブル*/ 
@media screen and (max-width: 1025px) 
{
	/* ==========================================================================
   2. ビューポート＆オンボーディング格子（フッター縮小に伴う高さの限界拡張）
   ========================================================================== */
.cube-lp-viewport {
    width: 100%;
    height: 100vh;          
    height: -webkit-fill-available; 
    display: flex;
    flex-direction: column; 
    justify-content: space-between; 
    align-items: center;
    padding: 8px 12px 4px 12px; /* 上下の無駄な隙間をさらに詰めて画面を広く使う */
    box-sizing: border-box;
    overflow: hidden;
}

/* オンボーディングの格子枠 */
.cube-onboarding-frame {
    width: 100%;
    max-width: 480px; 
    /* 💡【重要】フッターをスリム化した分、引き算を 80px → 52px に減少！
       これにより、スマホ画面内で格子全体の縦幅が物理的に大きく拡張されます */
    height: calc(100vh - 52px); 
    
    /* 大画面PCでも不自然に間延びしない最大高さの制限はガチッと維持 */
    max-height: 740px;
    
    background-color: var(--bg-inside);
    border-radius: 20px;    
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column; 
    overflow: hidden;       
    position: relative;
}
	
}

/* ==========================================================================
   3. 上部常駐ヘッダーバー
   ========================================================================== */
.ob-header-bar {
    flex-shrink: 0; /* 絶対に縮ませない（常駐固定） */
    padding: 16px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 20;
}

.ob-progress-indicator {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.ob-progress-indicator .progress-dot {
    width: 8px;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ob-progress-indicator .progress-dot.active {
    background-color: var(--cube-mint);
    width: 20px;
    border-radius: 4px;
}

.ob-header-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ob-header-links .link-producer {
    font-size: 1.2rem;
    color: var(--text-sub);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid var(--text-sub);
}

.ob-header-links .btn-skip-reg {
    background-color: #f0f0f0;
    border: none;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 1.2rem;
    color: var(--text-main);
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.ob-header-links .btn-skip-reg:hover {
    background-color: #e0e0e0;
}

/* ==========================================================================
   4. コンテンツエリア（画像固定 ＆ テキストスクロールの2重Flex構造）
   ========================================================================== */
/* 格子の中央エリア全体（スクローラー枠自体も縦のFlexboxに変更） */
.ob-content-scroller {
   flex-grow: 1;           
    overflow: hidden; 
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}

/* スライド全体のコンテナ（アクティブなスライドのみ高さを100%保持） */
.ob-inner-content {
    width: 100%;
    height: 100%;
}

.ob-step-slide {
    display: none; 
    width: 100%;
    height: 100%;
    flex-direction: column; /* 内部を「画像（固定）」と「テキスト（スクロール）」に分離 */
}


/* ----------------------------------------------------------------------
   【修正・重要】画像をアスペクト比 1:1（正方形）で画面上部に完全固定
   ---------------------------------------------------------------------- */
.slide-media-wrapper {
    width: 100%;
    aspect-ratio: 1.91 / 1;    /* 1:1 から 1.91:1 に変更 */
    flex-shrink: 0;           /* 画像の範囲・横長形状を厳密に保持 */
    background-color: #ebdcd8;
    overflow: hidden;
    position: relative;
}

/* 1:1枠の中にきれいに画像をフィットさせる設定 */
.slide-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* 縦横比を維持したまま枠いっぱいに表示 */
    display: block;
}

/* ----------------------------------------------------------------------
   【修正・重要】画像の下のテキスト部分だけを独立してscrollさせる設定
   ---------------------------------------------------------------------- */
.ob-step-slide {
	position: relative;
	overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
}

.slide-headline {
    flex-shrink: 1;
    font-size: 1.6rem;
    line-height: 1.35;
    color: var(--text-main);
    font-weight: bold;
    margin: 0;
    padding: 12px 16px 6px 16px;
    text-align: center;
    background-color: #ffffff;
}

.slide-lead-text {
    flex-shrink: 1;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--cube-red);
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 0 16px 8px 16px;
    background-color: #ffffff;
}

.slide-body-text {
    flex-grow: 1;
    font-size: 1.45rem;
    line-height: 1.6;
    color: var(--text-sub);
    margin: 0;
    padding: 0 16px 20px 16px;
}

.reg-container {
    flex-grow: 1;
    overflow-y: auto;       
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.ob-step-slide.active {
    display: flex;
    flex-direction: column;
}

/* ----------------------------------------------------------------------
   【メディアクエリ：PC環境（481px以上）】
   見出し・リードは定位置にガチッと完全固定、本文だけを独立スクロール（案1ベース）
   ---------------------------------------------------------------------- */
@media screen and (min-width: 481px) {
    .ob-step-slide {
        overflow-y: hidden;    /* PC時はスライド全体のスクロールを禁止 */
    }

    .slide-headline {
        flex-shrink: 0;        /* PC時は絶対に縮まない・動かない */
        font-size: 1.8rem;     /* PC大画面で見栄えのするサイズに微調整 */
        padding: 16px 20px 8px 20px;
    }

    .slide-lead-text {
        flex-shrink: 0;        /* PC時は絶対に動かない */
        font-size: 1.35rem;
        padding: 0 20px 10px 20px;
    }

    .slide-body-text {
        overflow-y: auto;      /* PC時は本文のこの領域だけが独立して綺麗にスクロール */
        font-size: 1.55rem;
        padding: 0 20px 20px 20px;
    }
}

/* ==========================================================================
   【新設】画像内・動的プライスオーバーレイバッジ
   ========================================================================== */
.price-overlay-badge {
    position: absolute;
    bottom: 12px;           /* 画像の左下に配置 */
    left: 12px;
    background: rgba(235, 28, 36, 0.9); /* SYOKUTSUレッドをベースに視認性を確保 */
    backdrop-filter: blur(4px);         /* トレンドのすりガラス効果 */
    -webkit-backdrop-filter: blur(4px);
    padding: 8px 14px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 5;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 「特別会員レート」などのラベル */
.price-overlay-badge .price-label {
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

/* 金額を横並びにするボックス */
.price-overlay-badge .price-calc-box {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 元値の打ち消し線表示 */
.price-overlay-badge .price-old {
    font-size: 1.25rem;
    text-decoration: line-through;    /* 打ち消し線 */
    color: rgba(255, 255, 255, 0.7); /* 少し不透明度を下げて引き立てる */
}

/* ➔ 矢印記号 */
.price-overlay-badge .price-arrow {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
}

/* 割引後の新価格（ここがPHPで動的に切り替わります） */
.price-overlay-badge .price-current {
    font-size: 1.9rem;
    font-weight: 900;
    color: #ffffff;
    display: flex;
    align-items: baseline;
}

/* （税込）などの極小テキスト */
.price-overlay-badge .price-tax {
    font-size: 0.9rem;
    font-weight: normal;
    opacity: 0.8;
    margin-left: 1px;
}

/* ==========================================================================
   【新設】画像内・10度傾けたモダンな動的商品名（右上配置）
   ========================================================================== */
.product-overlay-title {
    position: absolute;
    top: 16px;              /* 画像の右上から一定の余白を保持 */
    right: 16px;
    text-align: right;
    z-index: 5;
    
    /* 【デザイン要件】右肩上がりに10度傾ける（反時計回りに10度回転） */
    transform: rotate(-10deg);
    transform-origin: right top; /* 右上を軸にして綺麗に傾ける */
    
    /* どんな背景色の上でも文字をクッキリ浮き立たせるモダンなドロップシャドウ */
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

/* 商品名の上の小さな補足（例：A5等級、特選、など） */
.product-overlay-title .prod-sub {
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--cube-red); /* ポイントで赤を入れて視線を集める */
    background-color: #ffffff; /* 文字単体が浮き立つように極小の白座布団 */
    padding: 1px 6px;
    border-radius: 4px;
    width: fit-content;
    margin-left: auto;     /* 右寄せ */
    margin-bottom: 2px;
}

/* メインの商品名（SYOKUTSUブランドのアイデンティティである明朝体を採用） */
.product-overlay-title .prod-main {
    margin: 0;
    padding: 0;
    font-family: "Georgia", "Times New Roman", "Hiragino Mincho ProN", serif;
    font-size: 2.2rem;       /* 存在感のある絶妙なサイズ */
    font-weight: 900;
    color: #ffffff;          /* ベタ塗りを避けたシャープな切り文字風ホワイト */
    line-height: 1.2;
    letter-spacing: 0.03em;
    
    /* 隠し味：文字の輪郭にうっすらと白を滲ませて視認性を限界まで引き上げる */
    text-shadow: 0 0 4px #ffffff, 0 0 1px #ffffff; 
}

/* （すき焼き用）などの用途テキスト */
.product-overlay-title .prod-use {
    font-size: 1.4rem;
    font-weight: 700;
}

/* ==========================================================================
   【新設】画像内・右下のさりげない注釈テキスト
   ========================================================================== */
.image-disclaimer {
    position: absolute;
    bottom: 6px;            /* 画像の右下すみに配置 */
    right: 12px;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;     /* 1rem以下の極小サイズで主張を抑える */
    font-weight: 500;
    color: #ffffff;
    letter-spacing: -0.02em; /* 文字間隔を少し詰めてスタイリッシュに */
    z-index: 5;
	width:40%;
	text-align:right;
    
    /* どんなお肉の背景色と重なっても最低限の読めるレベルを維持する陰影 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    pointer-events: none;   /* ユーザーのタップを透過させて操作を邪魔しない */
}

.image-disclaimer span{
	display:inline-block;
}

/* ==========================================================================
   5. 会員登録（Step 5）内部パーツのスタイリング
   ========================================================================== */
.reg-headline {
    font-size: 2.0rem;
    font-weight: bold;
    text-align: center;
    margin: 0 0 8px 0;
    color: var(--text-main);
}

.reg-sub-text {
    font-size: 1.3rem;
    color: var(--text-sub);
    text-align: center;
    line-height: 1.5;
    margin: 0 0 24px 0;
}

/* Googleワンタップエリア */
.social-login-area {
    position: relative;
    padding: 10px 0;
    margin-bottom: 24px;
}

.badge-recommend {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--cube-red);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 900;
    padding: 2px 12px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(235, 28, 36, 0.2);
    z-index: 2;
    white-space: nowrap;
}

.btn-google-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: var(--text-main);
    border: 2px solid #4285F4; 
    border-radius: 24px;
    padding: 14px 20px;
    font-size: 1.45rem;
    font-weight: bold;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(66,133,244,0.15);
    transition: background 0.2s;
}

.btn-google-login:active {
    background-color: #f5f5f5;
}

.google-icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

/* メールアコーディオンエリア */
.email-accordion-area {
    width: 100%;
    text-align: center;
}

.accordion-toggle-trigger {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-sub);
    cursor: pointer;
    font-weight: bold;
    text-decoration: underline;
    padding: 8px;
}

.email-form-fields {
    text-align: left;
    margin-top: 16px;
    background-color: #faf8f6;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
}

.email-form-fields .form-group {
    margin-bottom: 14px;
}

.email-form-fields label {
    display: block;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 6px;
    color: var(--text-main);
}

.email-form-fields input {
    width: 100%;
    padding: 12px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 1.4rem;
    box-sizing: border-box;
    background-color: #ffffff;
}

.email-form-fields input:focus {
    outline: none;
    border-color: var(--cube-mint);
}

.btn-email-submit {
    width: 100%;
    background-color: var(--text-main);
    color: #ffffff;
    border: none;
    padding: 14px;
    border-radius: 24px;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ==========================================================================
   6. 下部完全固定アクションボタン
   ========================================================================== */
.ob-footer-action {
    flex-shrink: 0; /* 絶対に縮ませない（常駐固定） */
    padding: 10px 16px;
    background-color: #ffffff;
    border-top: 1px solid var(--border-color);
    box-sizing: border-box;
    z-index: 20;
}

.btn-primary-action {
    width: 100%;
    background: linear-gradient(135deg, var(--cube-red), #c81018);
    color: #ffffff;
    border: none;
    padding: 11px 16px;
    border-radius: 28px;
    font-size: 1.45rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(235, 28, 36, 0.3);
    transition: transform 0.1s ease, opacity 0.2s;
    box-sizing: border-box;
    display: block;
    text-align: center;
}

.btn-primary-action:active {
    transform: scale(0.98);
    opacity: 0.95;
}

/* ==========================================================================
   7. 格子外・背景透過型中央寄せフッター
   ========================================================================== */
.cube-outside-footer {
    width: 100%;
    max-width: 480px;
	margin-top:5px;
    background: transparent;
    text-align: center;
    padding: 2px 0;         /* 縦を極限まで縮めて画面内に常駐 */
    box-sizing: border-box;
    flex-shrink: 0;
}

.cube-outside-footer .footer-nav-links {
    display: block;
    margin-bottom: 12px;
}

.cube-outside-footer .footer-nav-links a {
    display: inline-block;
    font-size: 1.1rem;
    color: #888076;         
    text-decoration: none;
    margin: 0 8px;          
    transition: color 0.2s;
    border-bottom: 1px solid rgba(136, 128, 118, 0.3);
    padding-bottom: 2px;
}

.cube-outside-footer .footer-nav-links a:hover {
    color: var(--text-main);
    border-bottom-color: var(--text-main);
}

.cube-outside-footer .footer-copyright {
    font-size: 1.1rem;
    color: #9c9388;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin: 0;
}

/*■レスポンシブル*/ 
@media screen and (max-width: 1025px) 
{
	/* ==========================================================================
   7. 格子外・背景透過型中央寄せフッター（PC・スマホ別サイズダウン出し分け）
   ========================================================================== */
.cube-outside-footer {
    width: 100%;
    max-width: 480px;
    margin-top: 2px;        /* 上の隙間を5pxから2pxへ極限まで縮小 */
    background: transparent;
    text-align: center;
    padding: 0;             /* paddingを完全にゼロ化 */
    box-sizing: border-box;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------------
   【基本設定：スマホ環境（480px以下）】フッターを極小・薄口にしてスペースを稼ぐ
   ---------------------------------------------------------------------- */
.cube-outside-footer .footer-nav-links {
    display: block;
    margin-bottom: 2px;     /* 下の隙間を12pxから2pxへ大幅に圧縮 */
}

.cube-outside-footer .footer-nav-links a {
    display: inline-block;
    font-size: 0.95rem;     /* 1.1rem → 0.95rem へサイズダウン */
    color: #9c9388;         /* 少し色を薄くして主張を抑える */
    text-decoration: none;
    margin: 0 6px;          
    border-bottom: 1px solid rgba(136, 128, 118, 0.2);
    padding-bottom: 1px;
}

/* 「Powered by Adpentas」のコピーライト部分 */
.cube-outside-footer .footer-copyright {
    font-size: 0.9rem;      /* 1.1rem → 0.9rem へ極小化してスペースを最優先 */
    color: #b0a79d;         /* 文字色をさらに背景に馴染む薄いグレーへ */
    font-weight: bold;
    letter-spacing: 0.03em;
    margin: 0;
    line-height: 1.1;
}
}

/* ==========================================================================
   【新設】長押し・ドラッグ対応型 フローティングバッジ
   ========================================================================== */
.floating-draggable-badge {
   position: fixed;
    width: 110px;
    background: rgba(51, 51, 51, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 99999;
    touch-action: none;
    user-select: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.1s;
    
    /* 初期状態で一瞬画面外にチラつくのを防ぐため、非表示にしておきJSで配置します */
    opacity: 0;
    top: 0;
    left: 0;
}

@media screen and (min-width: 481px) {
    .floating-draggable-badge {
        /* 画面中央（50%）から格子の半幅（240px）進み、さらに15px外側の位置にジャスト配置 */
        left: calc(50% + 240px + 15px);
        bottom: 90px;          /* 格子の底に近い位置に合わせる */
    }
}

/* つまんで動かせることを視覚的に伝える上部の三点リーダー型ハンドル */
.badge-drag-handle {
   width: 100%;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
}

.drag-guide-text {
    font-size: 0.85rem;        /* 主張しすぎない極小サイズ */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5); /* 目立たせない、馴染む半透明グレー */
    letter-spacing: 0.02em;
    transform: scale(0.9);     /* テキストをさらに引き締める */
}

/* ドラッグ中の視覚的フィードバック効果 */
.floating-draggable-badge.is-dragging {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    background: rgba(51, 51, 51, 0.95);
}

.floating-draggable-badge.is-dragging .drag-guide-text {
    color: rgba(255, 255, 255, 0.2); /* 動かしている最中は文字をさらに空気にする */
}

/* ボタンを縦に2つ並べるエリア */
.badge-action-buttons {
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 6px;
}

/* バッジ内：共通ボタン基礎スタイル */
.badge-action-buttons button {
    width: 100%;
    border: none;
    padding: 8px 4px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
}

/* 代表メッセージ起動側：SYOKUTSUミント */
.badge-action-buttons .badge-btn-msg {
    background-color: var(--cube-mint);
}

/* FAQ起動側：シックなセピアグレー */
.badge-action-buttons .badge-btn-faq {
    background-color: #66605a;
}

.badge-action-buttons button:active {
    opacity: 0.8;
}


/* ==========================================================================
   【ギミック用】FAQ右側スライドインドロワー・スタイル
   ========================================================================== */
.help-slide-container {
    position: fixed;
    top: 0;
    right: -100%; /* 初期状態は画面の右外側に完全に隠す */
    width: 100%;
    max-width: 440px; /* PCでもタブレット風のスマートな幅に固定 */
    height: 100%;
    background: #ffffff;
    box-shadow: -5px 0 25px rgba(0,0,0,0.15);
    z-index: 200000; /* ドラッグバッジ(99999)を上回る最前面に配置 */
    transition: right 0.32s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

/* JSでこのクラスがつくと画面内にヌルッと出現 */
.help-slide-container.active {
    right: 0;
}

.help-slide-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
    flex-shrink: 0;
}

.help-slide-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-main);
}

.help-slide-close {
    background: none;
    border: none;
    font-size: 2.6rem;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

/* FAQ内部の独立スクロール領域 */
.help-slide-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    font-size: 1.35rem;
    line-height: 1.6;
    color: var(--text-main);
}

/* ==========================================================================
   【ギミック用】代表メッセージ フルスクリーン・オーバーレイ・スタイル
   ========================================================================== */
.president-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* 背後を高級感のある重厚な黒で暗転 */
    backdrop-filter: blur(4px);            /* 周辺を淡くぼかすモダンエフェクト */
    -webkit-backdrop-filter: blur(4px);
    z-index: 300000;                       /* 最も前面 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 15px;
    box-sizing: border-box;
}

/* activeクラスでフルスクリーンフェードイン */
.president-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* メッセージボード筐体（1画面内に必ず美しく収まる Flexbox 2重構造） */
.president-board {
    position: relative;
    background-color: #ffffff;
    width: 100%;
    max-width: 440px;
    border-radius: 16px;
    padding: 24px 20px 16px 20px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.3);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: 80vh; /* どんな画面サイズのデバイスでも、必ず縦80%以内に収める */
    overflow: hidden;
    transform: translateY(15px);
    transition: transform 0.3s ease;
}

.president-overlay.active .president-board {
    transform: translateY(0);
}

/* 右上の閉じる(×)ボタン */
.president-close-x {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 2.4rem;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.president-title {
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px dashed #FF9E8F;
    color: var(--text-main);
    flex-shrink: 0;
}

/* 💡 長文テキストを綺麗に縦に流す独立スクロール指定 */
.president-scroll-text {
    font-size: 1.35rem;
    color: #444444;
    line-height: 1.7;
    margin-bottom: 12px;
    white-space: pre-wrap; /* 改行コードをそのまま反映 */
    overflow-y: auto;       /* はみ出た長文はこのエリアだけでスクロール */
    -webkit-overflow-scrolling: touch;
    flex-grow: 1;           /* スペースを限界まで使わせる */
    padding-right: 4px;     /* スクロールバーとの被り防止 */
}

/* プロファイル・サインエリアを下部にガチッと常駐固定（スクロールしても消えない） */
.president-profile-zone {
    display: block;
    width: 100%;
    border-top: 1px solid #eee;
    padding-top: 12px;
    flex-shrink: 0;
    background: #ffffff;
}

.president-meta-table {
    display: table;
    width: 100%;
}

.president-meta-cell-photo {
    display: table-cell;
    width: 60px;
    vertical-align: middle;
}

.president-meta-cell-info {
    display: table-cell;
    vertical-align: middle;
    padding-left: 12px;
}

/* 円形切り抜きの顔写真 */
.president-photo {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f0f0;
}

.president-post {
    font-size: 1.05rem;
    color: #888;
    margin: 0;
    font-weight: bold;
}

/* 手書きサインのプロポーション保持 */
.president-signature-img {
    height: 30px;
    object-fit: contain;
    display: block;
    margin-top: 2px;
}

/* ==========================================================================
   【新設】STEP 4 専用・商品複数カルーセル ＆ テキストオーバーレイ
   ========================================================================== */
.product-carousel-wrapper {
    position: relative;
    overflow: hidden;
}

/* 横並びのアイテムを格納する1枚の長い帯 */
.carousel-inner-box {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 1つの商品スライドの塊（必ず1.91:1の親枠1枚分の幅に固定） */
.carousel-item {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

/* 💡【重要】写真の上にグラデーションと文字を被せるオーバーレイ構造 */
.carousel-product-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 16px 14px 16px; /* 下部に向かって文字が沈み込まないバランス */
    box-sizing: border-box;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 2px;
    
    /* 映画の字幕のように、下から上にジワッと黒いシャドウを敷いて文字の視認性を100%にする */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
}

/* カルーセル内の商品名 */
.carousel-prod-name {
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* カルーセル内の金額計算ボックス */
.carousel-price-calc {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* カルーセル内：定価の打ち消し */
.carousel-price-calc .c-price-old {
    font-size: 1.15rem;
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.6);
}

/* カルーセル内：矢印記号 */
.carousel-price-calc .c-price-arrow {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
}

/* カルーセル内：動的割引価格（ここを際立たせる） */
.carousel-price-calc .c-price-current {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--cube-red); /* 割引赤を適用してフックにする */
    background: #ffffff;    /* 白座布団を極小で敷いて文字の輪郭を守る */
    padding: 0px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: baseline;
}

.carousel-price-calc .c-price-tax {
    font-size: 0.85rem;
    font-weight: normal;
    color: var(--text-main);
    margin-left: 1px;
}

/* ミニカルーセルドットインジケーター（画像の最上中央付近に浮遊常駐） */
.carousel-dots-indicator {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.carousel-dots-indicator .c-dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.carousel-dots-indicator .c-dot.active {
    background: #ffffff;
    width: 14px;
    border-radius: 3px;
}

/* ==========================================================================
   【新設】処理結果・通知用モーダルウィンドウ・スタイル
   ========================================================================== */
.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* ほんのり背景を暗転 */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 400000;                       /* 代表メッセージモーダルより前面 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* activeクラスがつくとふわっと中央に出現 */
.notification-overlay.active {
    opacity: 1;
    visibility: visible;
}

.notification-card {
    background: #ffffff;
    width: 100%;
    max-width: 340px;                     /* スマホにジャストなコンパクトサイズ */
    border-radius: 20px;
    padding: 24px 20px 16px 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    text-align: center;
    box-sizing: border-box;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.notification-overlay.active .notification-card {
    transform: scale(1);
}

/* ステータス丸アイコン */
.noti-status-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--cube-mint);
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px auto;
}

/* エラー時の赤アイコン用スタイル */
.noti-status-icon.error {
    background: var(--cube-red);
}

.noti-title {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--text-main);
    margin: 0 0 8px 0;
}

.noti-message {
    font-size: 1.3rem;
    color: var(--text-sub);
    line-height: 1.5;
    margin: 0 0 20px 0;
}

/* 5秒タイマーの視覚的なアニメーションバー（あると親切） */
.noti-timer-bar-wrap {
    width: 100%;
    height: 3px;
    background: #f0f0f0;
    border-radius: 2px;
    overflow: hidden;
}

.noti-timer-bar {
    width: 100%;
    height: 100%;
    background: var(--cube-mint);
    transform-origin: left center;
}

/* エラー時はタイマーバーも赤色に変える */
.noti-status-icon.error ~ .noti-timer-bar-wrap .noti-timer-bar {
    background: var(--cube-red);
}

/* active時に5秒かけてバーが100%から0%へスムーズに縮むアニメーション */
.notification-overlay.active .noti-timer-bar {
    animation: notiProgress 5s linear forwards;
}

@keyframes notiProgress {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}