/* ═══ 配布物の見せ方（v1.4・2026-09-26 TAKURO「画像の見せ方や文字の見せ方を本家に合わせたい」）═══
   本家＝Minecraft マーケットプレイスの商品ページ（例：ドラゴンファイア ライト アドオン）を実測して写した。
     左＝大きい絵（16:9）＋右に縦に小さい絵（選んでいる1枚は黄色の枠 #FFC42B＋内側に黒い3pxの影）
     右＝商品カード（濃い灰色 #262423・四辺に4pxの段差の影）／名前は大きく白／値段は黄色／黄色の大きいボタン
     下＝「詳細」＝説明（最初は数行だけ・緑の「さらに表示」）とタグの2枚
   スマホ（本家の実測 390px）＝大きい絵の下に小さい絵が横一列（正方形）、その下に商品カード。
   ★マイクラの書体（MinecraftTen）は Mojang の物なので使わない。名前と値段はサイトのドット書体（DotGothic16）。
   ★コイン（マインコイン）の絵も使わない。値段は「無料」の字だけ。 */
/* 色は :root に置く（「詳細」の箱は .pdp の外にあるので、.pdp に置くと届かない） */
:root{
  --pdp-bg:#262423; --pdp-bg2:#171615; --pdp-edge:#3d3938;
  --pdp-gold:#ffc42b; --pdp-gold-hi:#ffd953; --pdp-gold-lo:#db9f21; --pdp-ink:#071927;
  --pdp-tx:#ede5e2; --pdp-sub:#aba09c; --pdp-green:#86d562;
}
.pdp{
  --tw:5.95rem;                              /* 横の小さい絵の幅（本家 95px / 1440px） */
  display:grid;grid-template-columns:minmax(0,755fr) minmax(0,525fr);gap:1.5rem;align-items:start;
  margin:0 auto;text-align:left;
}
/* 本家の段差の影（上と左＝明るい縁・下と右＝黒） */
.pdp-bevel{
  background:var(--pdp-bg);
  box-shadow:inset 0 -4px 0 #000, inset -4px 0 0 var(--pdp-edge), inset 4px 0 0 #000, inset 0 4px 0 var(--pdp-edge);
}

/* ★紙の板を本家くらいの幅に広げる（2026-09-26 TAKURO「本家サイトぐらい、横に大きく映したい」＝まずダウンロードの段だけ
   → 2026-09-27「ダウンロードのセクションに合わせて、他のセクション全ての横幅を変えて」＝全部の段を同じ幅に）。
   本家は 1440px の画面で中身が 1304px・大きい絵が 586px。
   おとなの方へ（夜の段）は紙の板が無いので、中身の左右の端を紙の板の中身の端にそろえる。 */
.sec[data-sky] > .wrap,
.adults > .wrap{width:min(1400px,calc(100% - 2 * var(--gut)));max-width:none;   /* .wrap の 1120px の上限も外す */
  padding-left:clamp(18px,2.8vw,40px);padding-right:clamp(18px,2.8vw,40px)}
/* 見出しの新しいアイコン（ロゴ）＝写真なのでドット絵の拡大（pixelated）にしない */
.sec-h .ttl img.ttl-logo{width:44px;height:44px;image-rendering:auto;border-radius:6px}
.pdp-pills img.logo{image-rendering:auto;border-radius:3px}

/* ── 左：切り替えて見る絵 ──（本家：一段暗い #171615 の板に、右上が明るく左下が黒い段差の影） */
.pdp-media{display:grid;grid-template-columns:minmax(0,1fr) var(--tw);gap:1.625rem;padding:1.5rem;
  background:var(--pdp-bg2);box-shadow:inset 4px -4px 0 rgba(255,255,255,.1), inset -4px 4px 0 #000}
.pdp-main{position:relative;overflow:hidden;aspect-ratio:16/9;background:#111;outline:none;touch-action:pan-y}
.pdp-main:focus-visible{box-shadow:0 0 0 2px var(--pdp-gold)}
.pdp-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.43,.195,.02,1);will-change:transform}
.pdp-slide{flex:0 0 100%;margin:0;height:100%}
.pdp-slide img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
/* 何枚目か（右下に小さく）。本家には無いが、スマホで絵が切り替わったことが分かるように */
.pdp-count{position:absolute;right:.6rem;bottom:.5rem;font-family:var(--pix);font-size:.8rem;line-height:1;
  color:#fff;background:rgba(0,0,0,.55);padding:.3rem .5rem;pointer-events:none}
/* 小さい絵の列＝大きい絵の高さにぴったり5段（本家も5枚で高さがそろう） */
.pdp-thumbs{display:grid;grid-template-rows:repeat(5,minmax(0,1fr));gap:1rem;min-height:0;
  contain:size}                              /* 高さは大きい絵に合わせる（小さい絵の側から押し広げない） */
.pdp-thumb{display:block;width:100%;height:100%;min-height:0;padding:1px;border:2px solid transparent;
  background:#f0f0f0;cursor:pointer;overflow:hidden;position:relative}
.pdp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-thumb:hover{border-color:rgba(255,196,43,.55)}
/* 本家：2pxの黄色の枠＋内側に黒の影（絵との間に1pxの黒が見える） */
.pdp-thumb.is-on{border-color:var(--pdp-gold);background:#000;box-shadow:inset -3px -3px 0 #000, inset 3px 3px 0 #000}
.pdp-thumb:focus-visible{outline:2px solid #fff;outline-offset:1px}
/* ★v1.5（2026-10-18）：小さい絵が5枚より多い時＝見えるのは5段のまま・はみ出した分は列の中で縦に送る（本家も枚数が多いと送る） */
.pdp-thumbs{display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#555 transparent}
.pdp-thumb{flex:0 0 calc((100% - 4rem) / 5);height:auto}
/* ★v1.5：動画（CM）＝絵と同じ板に。押しても次の絵へ進まない（pdp.js）・小さい絵には再生の印 */
.pdp-slide video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.pdp-play{position:absolute;left:50%;top:50%;width:2.4rem;height:2.4rem;margin:-1.2rem 0 0 -1.2rem;border-radius:50%;
  background:rgba(0,0,0,.6);box-shadow:0 0 0 2px #fff;pointer-events:none}
.pdp-play::after{content:"";position:absolute;left:52%;top:50%;transform:translate(-40%,-50%);
  border-style:solid;border-width:.55rem 0 .55rem .9rem;border-color:transparent transparent transparent #fff}

/* ── 右：商品カード ── */
.pdp-sku{display:flex;flex-direction:column;gap:1rem}
.pdp-card{padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.pdp-name{margin:0;font-family:var(--pix);font-weight:400;color:#fff;font-size:3rem;line-height:1.05;letter-spacing:.02em}
.pdp-name small{display:block;font-size:.42em;letter-spacing:.06em;color:var(--pdp-sub);margin-top:.35rem}
.pdp-by{margin:0;font-size:1rem;line-height:1.5;color:var(--pdp-sub)}
.pdp-by a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.pdp-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:.9rem 0;
  border-top:1px solid var(--pdp-edge);border-bottom:1px solid var(--pdp-edge)}
.pdp-pills li{display:flex;align-items:center;gap:.4rem;background:rgba(0,0,0,.3);border-bottom:1px solid var(--pdp-edge);
  padding:.35rem .55rem .35rem .45rem;font-size:.875rem;line-height:1.25;color:#fff}
.pdp-pills img{width:18px;height:18px;image-rendering:pixelated}
.pdp-price{margin:0;font-family:var(--pix);font-size:1.9rem;line-height:1;color:var(--pdp-gold)}
/* 黄色の大きいボタン（本家：上6pxが明るく・下6pxが暗い・2pxの濃い縁・右に矢じり） */
.pdp-get{display:flex;align-items:center;justify-content:center;gap:1rem;min-height:3.2rem;
  padding:.8rem 1rem .8rem 1.75rem;background:var(--pdp-gold);border:2px solid var(--pdp-bg);
  box-shadow:inset 0 -6px 0 var(--pdp-gold-lo), inset 0 6px 0 var(--pdp-gold-hi);
  color:var(--pdp-ink);font-weight:800;font-size:1.125rem;letter-spacing:.03em;line-height:1.2;text-decoration:none}
.pdp-get:hover{background:var(--pdp-gold-hi)}
.pdp-get i{font-style:normal;font-size:1.3em;line-height:1;margin-top:-.1em}
.pdp-meta{margin:0;font-size:.85rem;line-height:1.8;color:var(--ink2)}
.pdp-meta b{color:var(--ink)}
.pdp-spawn{display:inline-block;font-family:var(--pix);font-size:.85rem;color:var(--pdp-tx);
  border:1px solid var(--pdp-edge);padding:.15rem .6rem}

/* ── 下：詳細（説明・タグ）── */
.pdp-h{margin:2.2rem 0 .9rem;font-family:var(--pix);font-weight:400;font-size:1.5rem;color:var(--ink);letter-spacing:.02em}
.pdp-detail{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.pdp-box{background:var(--pdp-bg2);padding:1.5rem;
  box-shadow:inset 4px -4px 0 rgba(255,255,255,.1), inset -4px 4px 0 #000}
.pdp-box h4{margin:0;font-size:.875rem;font-weight:700;letter-spacing:.08em;color:#fff;line-height:1.5}
.pdp-box h4 + .pdp-tags{margin-top:.2rem}
.pdp-box .pdp-tags + h4{margin-top:.9rem}
.pdp-box-h{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.pdp-more{font:inherit;font-family:var(--pix);font-size:.875rem;color:var(--pdp-green);background:none;border:0;
  padding:.4rem .5rem;margin:-.4rem -.5rem;cursor:pointer;white-space:nowrap}
.pdp-more i{font-style:normal;display:inline-block;transition:transform .2s}
.pdp-desc.is-open .pdp-more i{transform:rotate(180deg)}
.pdp-desc-body{margin-top:.6rem;color:var(--pdp-tx);font-size:1rem;line-height:1.75;
  max-height:5.25em;overflow:hidden;position:relative}
.pdp-desc-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2em;
  background:linear-gradient(rgba(23,22,21,0),var(--pdp-bg2));pointer-events:none}
.pdp-desc.is-open .pdp-desc-body{max-height:none}
.pdp-desc.is-open .pdp-desc-body::after{display:none}
.pdp-desc-body p{margin:0 0 .8em}
.pdp-desc-body p:last-child{margin-bottom:0}
.pdp-desc-body b{color:#fff}
.pdp-desc-body a{color:var(--pdp-green)}
.pdp-tags{display:flex;flex-wrap:wrap;gap:.5rem;padding:.8rem 0 0}
.pdp-tags li{background:rgba(255,255,255,.1);padding:.25rem .55rem;font-size:.875rem;line-height:1.5;color:#fff}

/* ── アイテムを見る（本家：横長の帯を左右の矢印とドラッグで動かす・高さ 338px・矢印は幅 50px）── */
.pdp-pano{display:flex;height:21rem;margin-top:.2rem}
.pdp-pano-btn{flex:0 0 50px;border:0;cursor:pointer;color:#fff;background:var(--pdp-edge);
  box-shadow:inset 4px -4px 0 rgba(0,0,0,.3), inset -4px 4px 0 rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.pdp-pano-btn i{font-style:normal}
.pdp-pano-btn:hover:not(:disabled){background:#4d4846}
.pdp-pano-btn:disabled{cursor:default;color:rgba(255,255,255,.3)}
.pdp-pano-btn:focus-visible{outline:2px solid #6fa8ff;outline-offset:-4px}
.pdp-pano-view{flex:1 1 auto;min-width:0;margin:4px 0;overflow-x:auto;overflow-y:hidden;background:#1d1b1a;
  box-shadow:0 4px 0 #2b2827, 0 -4px 0 #000;scrollbar-width:none;cursor:grab;outline:none;overscroll-behavior-x:contain}
.pdp-pano-view::-webkit-scrollbar{display:none}
.pdp-pano-view.is-drag{cursor:grabbing}
.pdp-pano-strip{display:flex;align-items:stretch;gap:2.6rem;height:100%;padding:1.4rem 2.4rem 1.1rem;width:max-content}
.pdp-pano figure{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.7rem}
/* 絵の大きさ＝HTML の --h（画面での高さ・保存は2倍の細かさ）。1ブロックの物は同じ倍率＝大きさの違いがそのまま見える */
.pdp-pano img{display:block;width:auto;height:var(--h,auto);max-height:15rem;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.pdp-pano img.pix{image-rendering:pixelated}      /* フォン＝持ち物のドット絵 */
/* 暗い板の上で紺や黒の機器（水車など）が沈むので、足もとに淡い光だまりを敷く */
.pdp-pano figure{background:radial-gradient(ellipse 46% 30% at 50% 68%,rgba(255,236,200,.11),rgba(255,236,200,0) 100%)}   /* 光だまりは箱の中で消えきる大きさ（箱の端に四角い縁が見えた） */
.pdp-pano figcaption{font-size:.8rem;line-height:1.3;color:var(--pdp-tx);white-space:nowrap;letter-spacing:.02em}
.pdp-pano-note{margin:.7rem 0 0;font-size:.85rem;color:var(--ink2)}

/* ★公開前に埋める所（下書きだけの印）。公開する前に全部消すこと＝ tools で数えられるよう class を1つにしている */
.todo{background:#ffe16b;color:#5a3d00;font-weight:700;padding:0 .35em;border-radius:3px;font-size:.92em}

/* ── スマホ（本家 390px の実測：絵の下に小さい絵が横一列・正方形）── */
@media (max-width:759.98px){
  .pdp{grid-template-columns:1fr;gap:1rem}
  .pdp-media{grid-template-columns:1fr;gap:1rem;padding:1.5rem}
  .pdp-thumbs{grid-template-rows:none;grid-template-columns:repeat(5,minmax(0,1fr));gap:.9rem;contain:none}
  .pdp-thumb{aspect-ratio:1/1;height:auto}
  /* ★v1.5：スマホは横一列（5つ見えて、残りは横に送る） */
  .pdp-thumbs{flex-direction:row;overflow-x:auto;overflow-y:hidden}
  .pdp-thumb{flex:0 0 calc((100% - 3.6rem) / 5)}
  .pdp-name{font-size:2.6rem}
  .pdp-detail{grid-template-columns:1fr}
  .pdp-pano{height:15rem}
  .pdp-pano-btn{flex-basis:34px;font-size:1.1rem}
  .pdp-pano-strip{gap:1.6rem;padding:1rem 1.4rem .8rem}
  .pdp-pano img{height:calc(var(--h,160px) * .62);max-height:9.5rem}
}

/* ── 攻略本（メイン）と取扱説明書（その下・控えめ）──（2026-09-26 v1.4 から攻略本がメイン） */
.guide.guide-main{border:2px solid var(--gold)}
.guide.guide-sub{margin-top:.7rem;grid-template-columns:1fr auto;background:rgba(255,255,255,.55);box-shadow:none;
  border:1px solid var(--line);padding:.8rem 1.2rem}
.guide.guide-sub .g-tx b{font-size:1.05rem}
.guide.guide-sub .g-dl{background:#5b574c;box-shadow:0 3px 0 #2f2d27;font-size:.95rem}
.guide.guide-sub .g-dl:hover{background:#6e6a5d}
@media(max-width:640px){ .guide.guide-sub{grid-template-columns:1fr;text-align:center} }

/* 「これから作るもの」が1つになった（エネクラクエストは v1.4 で配る）＝左に寄せず真ん中に */
.soon.one{grid-template-columns:minmax(0,28rem);justify-content:center}

/* ★2026-11-04 夜 TAKURO「アドオンとワールドのダウンロードを近い距離にしたい」→ 2 案の見本から「案A（小さなカード）」
   アドオンの画面＝黄色いボタンの下に「いっしょに使う 敦賀と美浜（ワールド）」／ワールドの画面＝黄色いボタンの上に「先に入れる エネクラ（アドオン）」
   （HTML は v1.6_下書き/site/build_site_v16.py の _also_card）。枠と色は右の列のガイドブックの箱（map.css の .sku-books）とそろえる */
.sku-also{margin:1rem 0 .2rem;background:var(--card);border:2px solid var(--ink);border-radius:4px;box-shadow:0 3px 0 var(--ink);overflow:hidden}
.sku-also.sa-first{margin:0 0 .9rem}
.sa-top{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;padding:10px 12px;text-decoration:none;color:inherit}
.sa-top:hover{background:var(--card-hi)}
.sa-top img{width:96px;height:54px;object-fit:cover;display:block;border:1px solid var(--ink);image-rendering:auto}
.sa-top span{min-width:0;line-height:1.35}
.sa-top em{display:inline-block;font-style:normal;font-size:.72rem;line-height:1.5;padding:0 6px;margin-bottom:3px;background:var(--ink);color:var(--pdp-gold)}
.sa-top b{display:block;font-family:var(--pix);font-weight:400;font-size:.95rem;word-break:keep-all;overflow-wrap:anywhere}
.sa-top small{display:block;font-size:.74rem;color:var(--sub);margin-top:2px}
.sa-top small .sa-nw{display:block;white-space:nowrap}   /* 「36MB ／ 無料」は次の行に（スマホで「無／料」「遊ぶ場／所」に割れた） */
.sa-get{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:0 12px 12px;padding:.55rem .8rem;background:#fff;border:2px solid var(--ink);color:var(--ink);font-weight:800;font-size:.95rem;text-decoration:none}
.sa-get:hover{background:var(--card-hi)}
.sa-get i{font-style:normal;font-size:1.2em;line-height:1}