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

/* --- 1. スコープ化・ベース設定 --- */
  html {
    scroll-behavior: smooth;
  }

  .lfw-wrapper {
    width: 100%;
    background-color: #111111;
    margin: 0;
    padding: 0;
  }

  .lfw-container {
    position: relative;
    box-sizing: border-box;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px 100px;
    background-color: #111111;
    color: #f5f5f5;
    font-family: "Georgia", "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
  }

  .lfw-container *,
  .lfw-container *::before,
  .lfw-container *::after {
    box-sizing: border-box;
  }

  /* --- 2. ヘッダー・DM風フレーム＆タイポグラフィ --- */
  .lfw-header {
    text-align: center;
    margin-bottom: 32px;
    position: relative;
    padding: 24px 16px;
    border: 1px solid #332d21;
    background: radial-gradient(circle, #1a1a1a 0%, #111111 100%);
  }

  .lfw-header::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid #c5a059;
    pointer-events: none;
    opacity: 0.6;
  }

  .lfw-badge-wrap {
    margin-bottom: 12px;
  }

  .lfw-badge {
    display: inline-block;
    background: linear-gradient(135deg, #d4af37 0%, #a37c27 100%);
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 16px;
    letter-spacing: 0.15em;
    font-family: sans-serif;
  }

  .lfw-title-en {
    font-family: "Times New Roman", "Georgia", serif;
    font-style: italic;
    font-size: 17px;
    color: #c5a059;
    letter-spacing: 0.2em;
    margin: 0 0 4px 0;
  }

  .lfw-title {
    font-size: 26px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 16px 0;
    letter-spacing: 0.08em;
	line-height: 1.6;
  }

  /* 特典オファーボックス */
  .lfw-offer-box {
    border: 1px solid #c5a059;
    background-color: rgba(197, 160, 89, 0.08);
    padding: 18px 16px;
    max-width: 650px;
    margin: 0 auto;
  }

  .lfw-offer-text {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.6;
    letter-spacing: 0.05em;
  }

  .lfw-offer-highlight {
    color: #d4af37;
    font-size: 21px;
    font-weight: bold;
    border-bottom: 1px solid #d4af37;
    padding-bottom: 2px;
  }

  .lfw-tax {
    font-size: 12px;
    font-weight: normal;
    display: inline-block;
    margin: 0 1px;
    vertical-align: baseline;
  }

  .lfw-offer-sub {
    font-size: 14px;
    color: #cccccc;
    margin: 10px 0 0 0;
    font-family: sans-serif;
    font-weight: 500;
  }

  /* --- 3. インデックスナビ --- */
  .lfw-index-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 32px 0 40px;
  }

  .lfw-index-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    text-decoration: none;
    transition: all 0.3s ease;
    line-height: 1.3;
    border: 1px solid #c5a059;
    background-color: #1a1a1a;
  }

  .lfw-index-btn--limited {
    background: linear-gradient(135deg, #2a2418 0%, #14120e 100%);
    border-color: #d4af37;
  }

  .lfw-index-btn--limited:hover {
    background: #382f1f;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
  }

  .lfw-index-btn--standard {
    background-color: #181818;
    border-color: #555555;
  }

  .lfw-index-btn--standard:hover {
    border-color: #999999;
    background-color: #222222;
  }

  .lfw-index-btn-main {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.05em;
  }

  .lfw-index-btn-sub {
    font-size: 11px;
    color: #d4af37;
    margin-top: 4px;
    font-family: sans-serif;
    font-weight: 500;
  }

  .lfw-index-btn--standard .lfw-index-btn-sub {
    color: #aaaaaa;
  }

  /* --- 4. セクションスタイル --- */
  .lfw-section {
    margin-bottom: 56px;
    padding-top: 10px;
    scroll-margin-top: 70px;
  }

  .lfw-sec-header {
    text-align: center;
    margin-bottom: 16px;
    position: relative;
  }

  .lfw-sec-header::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background-color: #c5a059;
    margin: 12px auto 0;
  }

  .lfw-sec-suben {
    font-family: "Times New Roman", serif;
    font-style: italic;
    font-size: 15px;
    color: #c5a059;
    letter-spacing: 0.15em;
    display: block;
    margin-bottom: 8px;
  }

  .lfw-sec-title {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 8px 0;
    letter-spacing: 0.08em;
  }

  .lfw-sec-desc {
    font-size: 15px;
    color: #cccccc;
    margin: 10px 0 0 0;
    font-family: sans-serif;
    line-height: 1.5;
	font-weight: 500;
  }

  /* 操作ヒント（各グリッド上部に配置） */
  .lfw-grid-hint {
    text-align: right;
    font-size: 12px;
    color: #aaaaaa;
    margin-bottom: 10px;
    font-family: sans-serif;
    font-weight: 500;
  }

  .lfw-hint-pc { display: inline; }
  .lfw-hint-sp { display: none; }

  /* --- 5. グリッド＆生地カード --- */
  .lfw-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
  }

  .lfw-card {
    background-color: #181818;
    border: 1px solid #333333;
    padding: 6px;
    transition: border-color 0.3s ease, transform 0.3s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
  }

  .lfw-card:hover {
    border-color: #c5a059;
  }

  .lfw-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .lfw-card-img:hover {
    opacity: 0.85;
  }

  /* 画像下テキストエリア */
  .lfw-card-info {
  margin-top: 8px;
  padding: 2px 4px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-grow: 1;
}

/* 1行目：品番（強調） */
.lfw-card-num {
  font-size: 15px;
  font-weight: bold;
  color: #c5a059;
  letter-spacing: 0.05em;
  font-family: sans-serif;
  line-height: 1.2;
  margin-bottom: 4px;
}

/* 2行目：名称（折り返し対応） */
.lfw-card-name {
  font-size: 13px;
  color: #dddddd;
  font-family: sans-serif;
  line-height: 1.35;
  word-break: break-word;
  font-weight: 500;
}


  .lfw-back-top {
    text-align: right;
    margin-top: 24px;
  }

  .lfw-back-link {
  display: inline-block;
  font-size: 13px;
  color: #c5a059 !important;
  text-decoration: underline;
  cursor: pointer;
  font-family: sans-serif;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 6px 12px;
  transition: all 0.2s ease;
}

  .lfw-back-link:hover {
  color: #ffffff !important;
  background-color: rgba(197, 160, 89, 0.2);
  border-radius: 4px;
  text-decoration: underline;
}

  /* --- 6. 追従CTA --- */
  .lfw-floating-cta {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 420px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .lfw-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1f2833 0%, #0d131a 100%);
    color: #ffffff !important;
    text-align: center;
    text-decoration: none;
    padding: 12px 20px;
    border: 1px solid #c5a059;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 10px rgba(197, 160, 89, 0.2);
    transition: all 0.3s ease;
  }

  .lfw-btn:hover {
    background: linear-gradient(135deg, #2a3645 0%, #141c26 100%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.8), 0 0 15px rgba(197, 160, 89, 0.4);
  }

  .lfw-btn-sub {
    font-size: 11px;
    font-weight: 500;
    color: #d4af37;
    line-height: 1.3;
    margin-bottom: 4px;
    display: block;
    font-family: sans-serif;
    letter-spacing: 0.05em;
  }

  .lfw-btn-main {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3;
    display: block;
    letter-spacing: 0.08em;
  }

  /* レスポンシブ設定 */
  @media (min-width: 769px) {
    .lfw-floating-cta {
      bottom: 24px;
      top: auto;
    }
  }

  @media (max-width: 768px) {
    .lfw-container {
      padding: 24px 12px 80px;
    }

    .lfw-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
	  
	.lfw-card-num {
    font-size: 13px;
    margin-bottom: 2px;
  }
  
  .lfw-card-name {
    font-size: 12px;
  }

    .lfw-card-code {
      font-size: 11px;
      margin: 6px 0 2px;
    }

    .lfw-title { font-size: 21px; }
    .lfw-sec-title { font-size: 20px; }

    .lfw-floating-cta {
      top: 12px;
      bottom: auto;
    }

    .lfw-grid-hint { text-align: center; }
    .lfw-hint-pc { display: none; }
    .lfw-hint-sp { display: inline; }

    .lfw-btn-sub { font-size: 10px; }
    .lfw-btn-main { font-size: 14px; }

    .lfw-index-nav {
      gap: 8px;
    }
    .lfw-index-btn {
      padding: 10px 8px;
      flex: 1;
    }
    .lfw-index-btn-main { font-size: 12.5px; }
  }

  .lfw-floating-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .lfw-floating-cta.is-stuck {
    position: absolute;
    top: auto;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* --- 7. 画像拡大モーダル --- */
  .lfw-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .lfw-modal.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .lfw-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
  }

  .lfw-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 85vh;
    z-index: 100001;
  }

  .lfw-modal-img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border: 1px solid #c5a059;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  }

  .lfw-modal-close {
    position: absolute;
    top: -44px;
    right: 0;
    background: transparent;
    border: none;
    color: #c5a059;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
  }


.lfw-sp-br {
  display: none;
}

/* スマホ表示時（768px以下）のみ改行を有効化 */
@media (max-width: 768px) {
  .lfw-sp-br {
    display: inline;
  }
}


/* =========================================================
   ① ベース（PC・iPad用：769px以上）
   ========================================================= */
.lfw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.lfw-card-num {
  font-size: 13px;
  font-weight: bold;
  color: #c5a059;
  line-height: 1.2;
  margin-bottom: 4px;
}

.lfw-card-name {
  font-size: 11.5px;
  color: #dddddd;
  line-height: 1.35;
  word-break: break-word;
}

/* 操作ヒント・改行の切り替え */
.lfw-hint-pc { display: inline; }
.lfw-hint-sp { display: none; }
.lfw-sp-br   { display: none; } /* スマホ専用改行はPCでは無効 */


/* =========================================================
   ② 通常〜大きめスマホ用（376px 〜 768px）
   ※ iPhone 16 Pro (402px), iPhone 15, Pixel など
   ========================================================= */
@media (max-width: 768px) {
  .lfw-grid {
    grid-template-columns: repeat(2, 1fr); /* 2列表示 */
    gap: 12px;
  }

  .lfw-card-info {
    padding: 4px 2px 6px;
  }

  .lfw-card-num {
    font-size: 12px;
    margin-bottom: 3px;
  }

  .lfw-card-name {
    font-size: 10.5px;
    line-height: 1.3;
  }

  /* 操作ヒント・改行の切り替え */
  .lfw-hint-pc { display: none; }
  .lfw-hint-sp { display: inline; }
  .lfw-sp-br   { display: inline; } /* スマホ専用改行を有効化 */
}


/* =========================================================
   ③ 小さめスマホ用（375px以下）
   ※ iPhone SE, iPhone 13 mini など
   ========================================================= */
@media (max-width: 375px) {
  .lfw-grid {
    gap: 8px; /* 隙間を詰めてカード幅を広く確保 */
  }

  .lfw-card {
    padding: 4px; /* カード外枠のパディングを軽量化 */
  }

  .lfw-card-num {
    font-size: 11px;
  }

  .lfw-card-name {
    font-size: 9.5px; /* 画面幅が狭くても綺麗に収まる調整 */
    line-height: 1.25;
  }
}