/* ===== 特集「アルバムの写真が、動き出すまで」 ===== */
/* 製品ページへ移植するときは、この1枚と <main class="omoide"> をまるごと持っていけばよい */
.omoide{--a:#c62a3c;--g:#8a8a84;--ln:#e6e4e0;--bg:#faf9f7;--ink:#232320;
  max-width:860px;margin:0 auto;padding:0 20px 80px;
  font-family:"Noto Sans JP","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN",
  "BIZ UDPGothic",Meiryo,sans-serif;color:var(--ink);line-height:1.9;
  font-size:16px;-webkit-text-size-adjust:100%}
.omoide *{box-sizing:border-box}
.omoide img,.omoide video{display:block;width:100%;height:auto}

.omoide .om-head{padding:46px 0 10px;text-align:center}
.omoide .om-tag{display:inline-block;padding:7px 18px;border-radius:999px;
  background:var(--a);color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em}
.omoide h1{margin:18px 0 14px;font-size:30px;line-height:1.55;font-weight:700}
.omoide .om-lead{font-size:17px;line-height:2;color:#3c3c38;text-align:left;
  max-width:700px;margin:0 auto}
.omoide .om-lead b{color:#111}

.omoide .om-stage{margin:30px 0 0;background:#14140f;border-radius:8px;padding:10px}
.omoide .om-stage video{border-radius:4px}
.omoide figure{margin:34px 0 0}
.omoide figcaption{margin-top:10px;font-size:14px;line-height:1.85;color:#5a5a54}
.omoide figcaption b{color:#111}

.omoide section{margin:64px 0 0;padding-top:8px}
.omoide h2{margin:0 0 10px;font-size:24px;line-height:1.55;font-weight:700;
  padding-left:14px;border-left:6px solid var(--a)}
.omoide h3{margin:44px 0 8px;font-size:19px;line-height:1.6;font-weight:700}
.omoide h3 .n{display:inline-block;min-width:2.1em;color:var(--a);font-size:15px;
  letter-spacing:.06em}
.omoide p{margin:0 0 14px}
.omoide .om-note{font-size:14px;color:#6a6a64}

/* 写真と映像の対 */
.omoide .om-pair{display:grid;grid-template-columns:minmax(0,34%) 26px minmax(0,1fr);
  gap:0 14px;align-items:center;margin:26px 0 0}
.omoide .om-pair .ar{align-self:center;color:var(--a);font-size:24px;text-align:center;
  line-height:1}
.omoide .om-pair img{border-radius:3px;box-shadow:0 2px 10px rgba(0,0,0,.14)}
.omoide .om-pair .lb{grid-column:1/-1;margin-top:10px;font-size:14px;color:#5a5a54}

/* 白黒→カラー */
.omoide .om-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;margin:24px 0 0}
.omoide .om-grid figure{margin:0}
.omoide .om-grid img{border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.omoide .om-grid figcaption{margin-top:8px;font-size:13px}

/* 画面写真 */
.omoide .om-shot{background:#0e1013;border:1px solid #24272c;border-radius:6px;padding:8px}
.omoide .om-shot img{border-radius:3px}

/* 覚え書き */
.omoide .om-tip{margin:20px 0 0;padding:18px 20px;background:#fff8e6;
  border:1px solid #f0dba8;border-radius:6px;font-size:15px;line-height:1.9}
.omoide .om-tip b{color:#8a6100}
.omoide .om-tip p:last-child{margin-bottom:0}
.omoide .om-warn{background:#fdf3f3;border-color:#f0c8c8}
.omoide .om-warn b{color:#a3283a}
.omoide .om-quote{margin:14px 0;padding:14px 16px;background:#f4f3f0;
  border-left:4px solid #cfcdc7;border-radius:0 4px 4px 0;
  font-size:15px;line-height:1.95;white-space:pre-wrap}

/* 購入 */
.omoide .om-buy{margin:28px 0 0;border:2px solid var(--a);border-radius:8px;
  background:#fff;padding:22px 22px 20px;text-align:center}
.omoide .om-buy .role{font-size:14px;font-weight:700;color:var(--a)}
.omoide .om-buy .nm{margin-top:4px;font-size:18px;font-weight:700}
.omoide .om-buy .was{font-size:14px;color:#8a8a84}
.omoide .om-buy .was s{color:#8a8a84}
.omoide .om-buy .now{margin-top:2px}
.omoide .om-buy .now .lbl{font-size:15px;color:var(--a);font-weight:700}
.omoide .om-buy .now .yen{font-size:30px;color:var(--a);font-weight:700;padding-left:6px}
.omoide .om-buy .now .off{font-size:15px;color:var(--a);font-weight:700;padding-left:6px}
.omoide .om-buy .lim{margin-top:8px;font-size:13px;color:var(--a);font-weight:700}
.omoide .om-buy .spec{margin-top:8px;font-size:13px;color:#6a6a64}
.omoide .om-btn{display:block;margin:14px auto 0;max-width:420px;padding:15px 10px;
  border-radius:6px;background:var(--a);color:#fff;font-size:17px;font-weight:700;
  text-decoration:none;letter-spacing:.02em}
.omoide .om-btn:hover{opacity:.88;color:#fff}

.omoide .om-end{margin:56px 0 0;padding:22px;background:var(--bg);
  border:1px solid var(--ln);border-radius:8px;font-size:14px;line-height:1.95;color:#5a5a54}

@media (max-width:640px){
  .omoide{font-size:15px;padding:0 14px 60px}
  .omoide h1{font-size:23px}
  .omoide h2{font-size:20px}
  .omoide h3{font-size:17px}
  .omoide .om-lead{font-size:16px}
  .omoide .om-pair{grid-template-columns:1fr;gap:10px}
  .omoide .om-pair .ar{transform:rotate(90deg);margin:2px 0}
}

/* 原稿（そのまま貼れるようにする） */
.omoide .om-pr{margin:22px 0 0;border:1px solid var(--ln);border-radius:6px;
  background:#fbfbf9;overflow:hidden}
.omoide .om-pr-h{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:11px 14px;background:#efeee9;border-bottom:1px solid var(--ln);
  font-size:14px;font-weight:700;color:#3c3c38}
.omoide .om-copy{flex:none;padding:6px 14px;border:1px solid #c9c7c1;border-radius:4px;
  background:#fff;color:#5a5a54;font-size:12px;font-weight:700;cursor:pointer;
  font-family:inherit;line-height:1.4}
.omoide .om-copy:hover{background:#f3f2ef}
.omoide .om-pr-sub{padding:12px 14px 0;font-size:12px;font-weight:700;
  letter-spacing:.06em;color:var(--g)}
.omoide .om-pr-b{margin:8px 0 0;padding:0 14px 14px;font-size:13.5px;line-height:1.85;
  color:#2b2b28;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
  font-family:"SFMono-Regular",Consolas,"BIZ UDGothic",Menlo,monospace}
.omoide .om-pr-sub + .om-pr-b{margin-top:4px}
@media (max-width:640px){
  .omoide .om-pr-b{font-size:12.5px;line-height:1.8}
  .omoide .om-pr-h{font-size:13px}
}

/* ロゴの帯（移植先では、その製品ページのヘッダーに差し替える） */
.om-bar{border-bottom:1px solid #e6e4e0;background:#fff}
.om-bar a{display:inline-block;padding:14px 20px;line-height:0}
.om-bar img{display:block;width:150px;height:21px}

/* ページ冒頭のヒーロー */
.omoide .om-hero{margin:0 -20px;background:#14140f}
.omoide .om-hero img{width:100%;height:auto}
.omoide .om-head{padding:26px 0 10px}

/* 白黒画像のダウンロード */
.omoide .om-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;margin:22px 0 0}
.omoide .om-dl a{display:block;text-decoration:none;color:inherit;
  border:1px solid var(--ln);border-radius:6px;background:#fff;overflow:hidden}
.omoide .om-dl a:hover{border-color:var(--a);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.omoide .om-dl img{aspect-ratio:3/4;object-fit:cover}
.omoide .om-dl span{display:block;padding:9px 10px;font-size:13px;font-weight:700;
  line-height:1.5;color:#3c3c38}
.omoide .om-dl i{display:block;margin-top:2px;font-style:normal;font-size:11px;
  font-weight:400;color:var(--g)}
.omoide .om-dl a::after{content:"クリックで保存";display:block;padding:0 10px 9px;
  font-size:11px;color:var(--a);font-weight:700}

/* ほかの特集 */
.omoide .om-more{margin:60px 0 0}
.omoide .om-more ul{margin:14px 0 0;padding:0;list-style:none}
.omoide .om-more li + li{margin-top:10px}
.omoide .om-more a{display:block;padding:16px 18px;border:1px solid var(--ln);
  border-radius:6px;background:#fff;text-decoration:none;color:var(--ink);
  font-size:16px;font-weight:700;line-height:1.6}
.omoide .om-more a:hover{border-color:var(--a);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.omoide .om-more a span{display:block;margin-top:4px;font-size:13px;font-weight:400;
  color:#6a6a64}

@media (max-width:640px){
  .omoide .om-hero{margin:0 -14px}
  .om-bar a{padding:11px 14px}
  .omoide .om-dl{grid-template-columns:repeat(2,1fr)}
}

/* 追随する購入の誘導（読んでいる手順に合わせて中身が変わる） */
.om-float{position:fixed;right:24px;bottom:24px;width:264px;z-index:60;
  background:#fff;border:1px solid #e6e4e0;border-radius:8px;
  box-shadow:0 6px 26px rgba(0,0,0,.18);padding:16px 16px 14px;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s,transform .25s,visibility .25s;
  font-family:"Noto Sans JP","ヒラギノ角ゴ ProN",Meiryo,sans-serif}
.om-float.is-on{opacity:1;visibility:visible;transform:none}
.om-float p{margin:0}
.om-float .cl{position:absolute;top:4px;right:6px;border:0;background:none;
  color:#a8a6a0;font-size:20px;line-height:1;cursor:pointer;padding:4px 6px}
.om-float .cl:hover{color:#6a6a64}
.om-float .lead{font-size:12px;font-weight:700;color:#c62a3c;letter-spacing:.04em}
.om-float .nm{margin-top:4px;font-size:14px;font-weight:700;line-height:1.5;color:#232320}
.om-float .pr{margin-top:6px;line-height:1.3}
.om-float .pr .was{font-size:12px;color:#8a8a84;text-decoration:line-through}
.om-float .pr strong{display:inline-block;padding-left:6px;font-size:22px;color:#c62a3c}
.om-float .note{margin-top:4px;font-size:11px;color:#8a8a84}
.om-float .btn{display:block;margin-top:11px;padding:11px 8px;border-radius:5px;
  background:#c62a3c;color:#fff;font-size:14px;font-weight:700;text-align:center;
  text-decoration:none}
.om-float .btn:hover{opacity:.88;color:#fff}
@media (max-width:820px){
  .om-float{right:10px;left:10px;bottom:10px;width:auto;display:flex;
    align-items:center;gap:12px;padding:11px 12px}
  .om-float .bd{flex:1;min-width:0}
  .om-float .nm{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .om-float .note,.om-float .lead{display:none}
  .om-float .pr strong{font-size:19px}
  .om-float .btn{flex:none;margin-top:0;padding:11px 16px;font-size:13px}
  .om-float .cl{position:static;order:9}
}

/* 映像の中の場面 */
.omoide .om-cuts{margin:30px 0 0}
.omoide .om-cuts .t{margin:0 0 12px;font-size:15px;font-weight:700;color:#3c3c38;
  padding-left:11px;border-left:4px solid var(--a)}
.omoide .om-cuts .g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.omoide .om-cuts figure{margin:0}
.omoide .om-cuts img{border-radius:3px}
.omoide .om-cuts figcaption{margin-top:6px;font-size:12.5px;line-height:1.6;color:#5a5a54}
.omoide .om-cuts .n{margin:14px 0 0;font-size:14px;color:#5a5a54}
@media (max-width:640px){ .omoide .om-cuts .g{grid-template-columns:repeat(2,1fr);gap:9px} }

/* 動画への誘導。1枚めの絵が続くので、動画だと気づかれないことがある */
.omoide .om-cue{display:flex;align-items:center;justify-content:center;gap:12px;
  margin:32px 0 12px;padding:16px 20px;border-radius:8px;background:#fdf1f2;
  border:1px dashed var(--a);color:var(--a);font-size:19px;font-weight:700;
  letter-spacing:.02em;line-height:1.5;text-align:center}
.omoide .om-cue::after{content:"▼";font-size:14px;line-height:1}
.omoide .om-stage video{cursor:pointer}
.omoide .om-note{font-size:14px;color:#6a6a64;text-align:center}

/* 読み終わったあとの戻り口 */
.omoide .om-again{margin:44px 0 0;text-align:center}
.omoide .om-again a{display:inline-block;padding:12px 26px;border:1px solid var(--ln);
  border-radius:999px;background:#fff;color:var(--ink);font-size:15px;font-weight:700;
  text-decoration:none}
.omoide .om-again a:hover{border-color:var(--a);color:var(--a)}
.omoide .om-again a::before{content:"▶ ";font-size:12px;color:var(--a)}
@media (max-width:640px){ .omoide .om-cue{font-size:16px;padding:13px 14px;gap:8px} }