/* YouTube解説用（.lf-guide の中だけに効く）
   正本：LF動画/tools/lfvideo/web/lf-guide.css。テンプレ（tpl_cat3.htm）の「YouTube解説用」の style ブロックはここから写す
   HTML は make-web（lfvideo web <slug>）が出す class 名の形。値は ceiling-fan の手直し版（2026-10-16、インライン直書き）と同じ
   サイトの CSS が ol の番号・リストの点・b の太字・summary の三角を消すので、ここで .lf-guide を付けて指定し直す
   テンプレは Shift_JIS で処理されるので、このファイルにも Shift_JIS に無い文字を入れない */

/* ---- 共通・古い形（paragraphs だけの章。まだ新しい形にしていないページ用に残す） ---- */
.Exp-container img { height: auto; }
.lf-guide__toc { margin: 0 0 30px; padding: 0 0 0 20px; }
.lf-guide__toc li { list-style-type: disc; line-height: 2; letter-spacing: 0.08em; font-size: 14px; }
.lf-guide__toc a { color: #007cb6; }
.lf-guide .Exp-item_text a { color: #007cb6; }
.lf-guide .Exp-item_text { margin-bottom: 22px; }
.lf-guide .Exp-space-h3 { margin-top: 44px; }
.lf-guide img + .Exp-item_text { margin-top: 24px; }
.lf-guide .toc-min ul { flex-direction: column; gap: 4px; }
.lf-guide .toc-min li { flex: 1 1 100%; }
.lf-guide a.lf-video__jump { display: block; width: 100%; padding: 15px 0 0; border: 0; background: none; color: #007cb6; text-decoration: none; cursor: pointer; }
.lf-guide a.lf-video__jump:hover { color: #005a85; }
.lf-guide__byline { margin: 0 0 16px; font-size: 12px; line-height: 1.6; color: #767676; letter-spacing: .04em; }

/* ---- 目次（サイトの JS が #mokuji に組み立てる。点を消して行を詰める） ---- */
.lf-guide #mokuji ul { list-style: none !important; padding-left: 0 !important; margin: 0; }
.lf-guide #mokuji li { list-style: none !important; padding: 1px 0; line-height: 1.6; }

/* ---- 導入文の注意書き・改行させない所 ---- */
.lf-guide .lf-intro-note { display: block; margin-top: 8px; font-size: 13px; color: #6d655d; }
.lf-guide .lf-nowrap { white-space: nowrap; }

/* ---- 1. 写真（下に重ねるキャプション） ---- */
.lf-guide .lf-photo { position: relative; margin: 0 0 22px; }
.lf-guide .lf-photo img { width: 100%; height: auto; display: block; }
.lf-guide .lf-photo__cap { position: absolute; left: 10px; bottom: 8px; font-size: 12px; color: #fff; background: rgba(0,0,0,.55); padding: 3px 8px; border-radius: 3px; line-height: 1.5; }

/* ---- 2. 一行の答え ---- */
.lf-guide .lf-answer { margin: 0 0 26px; padding: 16px 18px; background: #faf7f2; border-left: 4px solid #9a6a2f; }
.lf-guide .lf-answer__label { margin: 0 0 4px; font-size: 12px; font-weight: bold; color: #9a6a2f; letter-spacing: .1em; }
.lf-guide .lf-answer__text { margin: 0; font-size: 15px; font-weight: bold; line-height: 1.7; }

/* ---- 3. 動く短い映像（無音ループ）と、説明の行 ---- */
.lf-guide .lf-loop { width: 100%; height: auto; display: block; border-radius: 6px; }
.lf-guide .lf-cap,
.lf-guide .lf-links { font-size: 13px; color: #6d655d; margin: 8px 0 26px; line-height: 1.7; }

/* ---- 4. コツ（番号の丸。サイトが ol の番号を消すので counter で出す） ---- */
.lf-guide ol.lf-tips { margin: 0 0 28px; padding: 0; list-style: none; counter-reset: lf-tip; }
.lf-guide ol.lf-tips > li { list-style: none; position: relative; font-size: 14px; line-height: 1.7; padding: 11px 0 11px 36px; margin: 0; border-bottom: 1px dashed #e4ddd3; counter-increment: lf-tip; }
.lf-guide ol.lf-tips > li::before { content: counter(lf-tip); position: absolute; left: 0; top: 11px; width: 24px; height: 24px; border-radius: 50%; background: #2b2622; color: #fff; font-size: 13px; text-align: center; line-height: 24px; font-weight: bold; }

/* ---- 5. 図解（タップで拡大） ---- */
.lf-guide a.lf-diagram { display: block; }

/* ---- 6. 補足（たたむ。summary は三角を出すため list-item） ---- */
.lf-guide details.lf-more { border: 1px solid #e4ddd3; border-radius: 6px; padding: 0 16px; margin: 4px 0 20px; }
.lf-guide details.lf-more > summary { display: list-item; font-size: 14px; font-weight: bold; padding: 12px 0; cursor: pointer; }
.lf-guide details.lf-more > ul { margin: 0 0 6px; padding: 0; list-style: none; }
.lf-guide details.lf-more > ul > li { list-style: none; font-size: 14px; line-height: 1.7; margin: 0 0 10px; }
.lf-guide details.lf-more > ul > li > b { display: block; font-weight: bold; }

/* ---- 商品一覧への一言（14px の 1 段落） ---- */
.lf-guide .lf-note { font-size: 14px; line-height: 1.7; margin: 0 0 24px; }

/* ---- 7. 動画ボタン（濃い茶の角丸。上の古い a.lf-video__jump の青い文字リンクより強く指定） ---- */
.lf-guide a.lf-video__jump.lf-btn { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; background: #332b25; color: #fff; text-decoration: none; font-weight: bold; font-size: 14px; padding: 13px 20px; border-radius: 999px; margin: 8px 0 56px; line-height: 1.4; }
.lf-guide a.lf-video__jump.lf-btn:hover { color: #fff; }
.lf-guide a.lf-video__jump.lf-btn svg { flex: none; }
.lf-guide .lf-btn__time { font-weight: normal; font-size: 12px; opacity: .75; }

/* ---- スマホで章の中身を少し内側へ（使うときだけ。章を <div class="lf-ch"> で包む） ---- */
@media (max-width: 767px) {
  .lf-guide .lf-ch { padding: 0 10px; }
}

/* ==== 動画ブロック（.lf-video）と動画モーダル（2026-10-16 テンプレの style から移した。値はそのまま） ==== */
.lf-video {
  max-width: 700px;
  margin: 34px 0 42px;
}

.lf-video__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.lf-video__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 16 / 9;
  background: #eee;
}

.lf-video__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.lf-video__trigger:hover .lf-video__thumb img {
  transform: scale(1.02);
}

.lf-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  transform: translate(-50%,-50%);
}

.lf-video__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%,-50%);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid #333;
}

.lf-video__title {
  display: block;
  margin-top: 14px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
}

.lf-video__meta {
  display: block;
  margin-top: 3px;
  color: #888;
  font-size: 13px;
}


/* modal */
.lf-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lf-video-modal.is-open {
  display: flex;
}

.lf-video-modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
}

.lf-video-modal__content {
  position: relative;
  z-index: 1;
  width: min(960px, 94vw);
}

.lf-video-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.lf-video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lf-video-modal__close {
  position: absolute;
  right: -6px;
  top: -48px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 767px) {
  .lf-video {
    max-width: none;
    margin: 26px 0 34px;
  }

  .lf-video__title {
    font-size: 15px;
  }

  .lf-video__play {
    width: 54px;
    height: 54px;
  }

  .lf-video-modal {
    padding: 14px;
  }
}

/* スマホではサイトの CSS が見出しと本文に左右 10px の余白を付ける（product-category_v2.css @media max-width:768px）。解説者の行もそろえる（2026-10-20） */
@media (max-width: 768px) {
  .lf-guide .lf-guide__byline { padding: 0 10px; }
}