/* BEAM NIGHT v5 — 2026-09-08 昼。層＝第一興商トップ（社長㉔）。中身＝「リースの問い合わせを受ける集客の入口」（社長㉕・設計書§8-6）。 v4からの変更: ヒーロー右のロゴと見出しを大きく／電話と「無料で相談する」を常に見える所に／各段の末尾に相談への入口／フォーム／画面下の固定バー／写真は実店舗のコマと切り抜き商品／気持ち派手に（色を濃く・MOVIEは黒地）。 部品・色・イラストは写さない。ピル型・比較枠は使わない。 */ :root{--pink:#ff2d95;--violet:#a23bff;--amber:#ffb300;--ink:#111;--gray:#666;--line:#d9d9de;--red:#c8102e;--cta:#e6007e} *{box-sizing:border-box} html{scroll-behavior:auto} body{margin:0;background:#fff;color:var(--ink);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;font-size:14px;line-height:1.8;padding-bottom:64px} a{color:var(--ink)} img{max-width:100%;height:auto;display:block} table{border-collapse:collapse} .wrap{width:1200px;max-width:100%;margin:0 auto;padding:0 24px} h1,h2,h3{margin:0;font-weight:700} .en{font-family:"Arial Black","Arial","Helvetica",sans-serif;font-weight:900;letter-spacing:.02em} .small{font-size:12px;color:var(--gray)} /* 「※仮」の札は廃止（社長 9/8「仮の金額とか、余計なものが残ってる」）。金額だけを出す。 */ /* buttons (角ばった) */ .btn{display:inline-block;border:2px solid var(--ink);padding:10px 24px;font-weight:700;text-decoration:none;font-size:14px;line-height:1.4;color:var(--ink);background:#fff} .btn:hover{background:var(--ink);color:#fff} .btn.cta{background:var(--cta);border-color:var(--cta);color:#fff} .btn.cta:hover{background:#b8005f;border-color:#b8005f} .btn.big{font-size:17px;padding:14px 30px} /* header */ .hdr{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)} .hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:78px} .hdr .logo img{height:48px;width:auto} .hdr nav{display:flex;gap:18px;font-size:13px;font-weight:700;flex:1;justify-content:center;flex-wrap:wrap} .hdr nav a{text-decoration:none;color:var(--ink);white-space:nowrap} .hdr nav a:hover{color:var(--pink)} .hdr .call{display:flex;align-items:center;gap:12px} .hdr .call .tel{text-align:right;line-height:1.25} .hdr .call .tel .n{font-size:20px;font-weight:900;letter-spacing:.02em} .hdr .call .tel .h{font-size:11px;color:var(--gray)} .hdr .call .btn{padding:9px 16px;font-size:13px} @media (max-width:1000px){.hdr .wrap{height:auto;padding:8px 16px;flex-wrap:wrap}.hdr nav{order:3;width:100%;gap:10px;font-size:12px}.hdr .call .tel{display:none}} /* 黄色い「準備中」の帯は廃止（社長 9/8「準備中ていうのもいらない。問い合わせだけ全部封じておいてもらえれば問題ない」）。 この .prep という名前が にも当たり、ページ全体をクリーム色に塗って左右16px押し込んでいた。 */ /* hero */ .hero{position:relative;overflow:hidden;background:linear-gradient(112deg,#ffc9e4 0%,#e3c8ff 34%,#c9e4ff 58%,#ffe4a8 100%)} .hero::before{content:"";position:absolute;inset:-25% -10%;pointer-events:none;background: linear-gradient(72deg,transparent 40%,rgba(255,45,149,.45) 41%,transparent 46%), linear-gradient(66deg,transparent 52%,rgba(162,59,255,.42) 53%,transparent 58%), linear-gradient(80deg,transparent 64%,rgba(255,179,0,.5) 65%,transparent 70%), linear-gradient(60deg,transparent 22%,rgba(255,255,255,.55) 23%,transparent 26%)} .hero .wrap{position:relative;display:grid;grid-template-columns:500px minmax(0,1fr);gap:28px;padding-top:26px;padding-bottom:0;align-items:end} .hero .prod{position:relative;height:440px} .hero .prod img{position:absolute;bottom:0;width:auto;filter:drop-shadow(0 18px 20px rgba(60,20,90,.32))} .hero .prod .p1{left:0;height:400px} .hero .prod .p2{left:225px;height:290px} .hero .prod .p3{left:352px;height:215px} .hero .cap{align-self:center;padding:10px 0 30px} .hero .cap .logo{width:100%;max-width:640px;height:auto} .hero .cap .l1{font-size:40px;font-weight:900;line-height:1.3;margin-top:8px;letter-spacing:.01em} .hero .cap .l2{font-size:16px;color:#222;margin-top:8px;line-height:1.7} .hero .cap .l2 b{color:var(--red);font-size:18px} .hero .cap .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .hero .cap .tel{margin-top:12px;font-size:13px} .hero .cap .tel b{font-size:22px;font-weight:900;margin-right:8px} .circles{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding:22px 0 30px} .circles a{text-decoration:none;color:var(--ink);text-align:center;font-size:13px;font-weight:700;line-height:1.5} .circles .ph{width:150px;height:150px;border-radius:50%;overflow:hidden;margin:0 auto 8px;border:4px solid #fff;box-shadow:0 8px 22px rgba(60,20,90,.28);background:#000} .circles .ph img{width:100%;height:100%;object-fit:cover} .circles a:hover .ph{border-color:var(--pink)} @media (max-width:1000px){.hero .wrap{grid-template-columns:1fr}.hero .prod{height:300px}.hero .prod .p1{height:280px}.hero .prod .p2{left:180px;height:210px}.hero .prod .p3{left:300px;height:160px}.hero .cap .l1{font-size:28px}.circles{grid-template-columns:repeat(3,1fr)}.circles .ph{width:120px;height:120px}} /* consider block */ .consider .wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:34px;padding:42px 24px 36px;align-items:start} .consider .lab{font-size:12px;color:var(--red);letter-spacing:.2em;font-weight:700} .consider h1{font-size:32px;color:var(--red);margin:4px 0 10px;line-height:1.35} .consider .br{font-size:15px;color:#333;margin:0 0 4px} .steps{list-style:none;margin:16px 0 0;padding:0;counter-reset:s} .steps li{position:relative;padding:8px 0 8px 46px;border-top:1px solid var(--line);font-size:15px;counter-increment:s} .steps li:last-child{border-bottom:1px solid var(--line)} .steps li::before{content:counter(s);position:absolute;left:0;top:8px;width:32px;height:32px;background:var(--ink);color:#fff;font-weight:900;text-align:center;line-height:32px;font-family:"Arial Black",Arial,sans-serif} .steps li b{margin-right:6px} .consider .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .consider .side{border:2px solid var(--ink);padding:18px 20px;font-size:13px} .consider .side .t{font-weight:700;font-size:14px;margin-bottom:4px} .consider .side .num{font-size:30px;font-weight:900;letter-spacing:.02em;line-height:1.2} .consider .side p{margin:0 0 4px} .consider .side .btn{margin-top:10px;display:block;text-align:center} @media (max-width:900px){.consider .wrap{grid-template-columns:1fr}} /* news bar */ .news .wrap{padding:0 24px 40px} .news .box{display:grid;grid-template-columns:120px minmax(0,1fr);border:1px solid #333} .news .lab{background:#222;color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;letter-spacing:.1em} .news ul{list-style:none;margin:0;padding:14px 22px} .news li{display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px;font-size:13px;padding:4px 0} .news li .d{color:var(--gray)} @media (max-width:700px){.news .box{grid-template-columns:1fr}} /* big english section headings */ .sec{padding:54px 0 44px} .sec.alt{background:#f5f5f7} .sec.dark{background:#0b0a10;color:#fff} .sec.dark a{color:#fff} .sech{display:flex;justify-content:flex-end;align-items:baseline;gap:18px;border-top:1px solid currentColor;padding-top:12px;margin-bottom:28px} .sech .en{font-size:64px;line-height:1;background:linear-gradient(90deg,var(--pink),var(--violet) 60%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent} .sec.dark .sech .en{background:linear-gradient(90deg,#ff5fb0,#c07bff 60%,#ffcf4d);-webkit-background-clip:text;background-clip:text} .sech .ja{font-size:13px;color:var(--gray)} .sec.dark .sech .ja{color:#bbb} @media (max-width:700px){.sech .en{font-size:40px}} .secfoot{margin-top:26px;padding-top:18px;border-top:1px dotted #999;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;font-size:14px} .sec.dark .secfoot{border-top-color:#444} /* movie */ .movie .grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:26px;align-items:start} .movie figure{margin:0} .movie video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;background:#000} .movie .reels video{aspect-ratio:9/16} .movie figcaption{font-size:13px;font-weight:700;text-align:center;margin-top:10px} .movie .reels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .movie .reels figcaption{font-size:11px;font-weight:400;color:#ccc} .movie .spec{margin-top:14px;font-size:14px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center} .movie .spec b{font-size:20px;color:#ffcf4d} @media (max-width:900px){.movie .grid{grid-template-columns:1fr}} /* service: staggered blocks with real photos / product composite */ .service .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 26px} .service .b{text-decoration:none;color:var(--ink)} .service .b:nth-child(2){margin-top:50px} .service .b:nth-child(3){margin-top:100px} .service .b:nth-child(4){margin-top:150px} .service .b .ph{aspect-ratio:4/3;overflow:hidden;background:#000;position:relative} .service .b .ph img{width:100%;height:100%;object-fit:cover} .service .b .ph.grad{background:linear-gradient(112deg,#ffc9e4,#e3c8ff 45%,#ffe4a8);display:flex;align-items:flex-end;justify-content:center;gap:6px;padding:10px 10px 0} .service .b .ph.grad img{width:auto;height:88%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(60,20,90,.3))} .service .b .ph.logo{background:#0b0a10;display:flex;align-items:center;justify-content:center;padding:20px} .service .b .ph.logo img{width:80%;height:auto;object-fit:contain} .service .b .t{font-size:17px;font-weight:700;text-align:center;margin:14px 0 4px} .service .b .s{font-size:12px;color:var(--gray);text-align:center;margin:0} .service .b .go{display:block;width:max-content;margin:12px auto 0;border:1px solid var(--ink);padding:5px 18px;font-size:12px} .service .b:hover .go{background:var(--ink);color:#fff} @media (max-width:900px){.service .grid{grid-template-columns:1fr 1fr}.service .b{margin-top:0!important}} @media (max-width:560px){.service .grid{grid-template-columns:1fr}} /* pick up */ .pick .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start} .pick .plan{border:1px solid var(--line);background:#fff;padding:10px} .pick .plan svg{width:100%;height:auto;display:block} .pick .cap{font-size:13px;margin:8px 0 0} .photos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px} .photos figure{margin:0} .photos img{width:100%;aspect-ratio:3/4;object-fit:cover} .photos img.wide{aspect-ratio:3/4} .photos figcaption{font-size:11px;color:var(--gray);margin-top:4px} @media (max-width:900px){.pick .grid{grid-template-columns:1fr}.photos{grid-template-columns:1fr 1fr}} /* detail sections */ .detail h2{font-size:24px;padding-left:16px;margin:0 0 18px;line-height:1.3;position:relative} .detail h2::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:6px;background:linear-gradient(180deg,var(--pink),var(--violet),var(--amber))} .detail h2 small{font-size:12px;color:var(--gray);font-weight:400;margin-left:10px} .detail .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start} @media (max-width:900px){.detail .two{grid-template-columns:1fr}} table.p{width:100%;font-size:13px} table.p th{background:#f5f5f7;border:1px solid var(--line);padding:8px 12px;text-align:left;font-weight:700} table.p td{border:1px solid var(--line);padding:8px 12px} table.p td.r{text-align:right;white-space:nowrap;font-weight:700} .sim{border:2px solid var(--ink);background:#fff;padding:18px 22px} .sim .t{font-weight:900;font-size:16px;margin-bottom:8px} .sim table{width:100%;font-size:14px} .sim td{padding:7px 4px;border-bottom:1px dotted #bbb} .sim select{font-size:15px;padding:4px 8px} .sim .tot{font-size:30px;font-weight:900;color:var(--red);text-align:right;line-height:1.2} .sim .acts{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center} .co{width:100%;font-size:13px} .co th{width:170px;background:#f5f5f7;border:1px solid var(--line);padding:8px 12px;text-align:left} .co td{border:1px solid var(--line);padding:8px 12px} .eq{width:100%;font-size:13px} .eq th{background:#f5f5f7;border:1px solid var(--line);padding:6px 12px;text-align:left} .eq td{border:1px solid var(--line);padding:6px 12px;white-space:nowrap;width:90px} .faq dt{font-weight:700;margin-top:12px} .faq dd{margin:2px 0 0} .gyo{font-size:13px;line-height:2.2} .gyo span{display:inline-block;border:1px solid var(--ink);padding:0 10px;margin:0 8px 6px 0} /* contact form */ .contact .grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start} @media (max-width:900px){.contact .grid{grid-template-columns:1fr}} .form{border:2px solid var(--ink);padding:20px 24px;background:#fff} .form .t{font-weight:900;font-size:18px;margin-bottom:4px} .form .s{font-size:12px;color:var(--gray);margin:0 0 14px} .form label{display:block;font-size:13px;font-weight:700;margin:12px 0 4px} .form label span{color:var(--red);font-weight:400;font-size:11px;margin-left:6px} .form input[type=text],.form input[type=tel],.form input[type=email],.form select,.form textarea{width:100%;font-size:15px;padding:9px 10px;border:1px solid #999;background:#fff;font-family:inherit} .form textarea{min-height:120px} .form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:560px){.form .row{grid-template-columns:1fr}} .form .chk{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;font-weight:400} .form .chk label{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400} .form .send{margin-top:18px} .form .note{font-size:11px;color:var(--gray);margin-top:8px} .ways .w{border-top:1px solid var(--line);padding:14px 0} .ways .w:first-child{border-top:0;padding-top:0} .ways .w .t{font-weight:700;font-size:14px} .ways .w .n{font-size:30px;font-weight:900;line-height:1.2} .ways .w p{margin:2px 0 0;font-size:13px} /* footer */ .ftr{border-top:1px solid var(--ink);margin-top:40px} .ftr .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:28px 24px 20px;align-items:start} .ftr .logo img{height:40px;width:auto} .ftr .ad{font-size:12px;color:var(--gray);margin-top:8px} .ftr .links{font-size:12px;display:flex;flex-wrap:wrap;gap:6px 18px} .ftr .links a{text-decoration:none} .ftr .copy{font-size:11px;color:var(--gray);text-align:center;padding:10px 0 18px;border-top:1px solid var(--line)} @media (max-width:700px){.ftr .wrap{grid-template-columns:1fr}} .pagetop{text-align:right;font-size:12px;padding:4px 24px} /* fixed bottom bar */ .fixbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(11,10,16,.96);border-top:2px solid var(--pink);display:flex;justify-content:center;gap:10px;padding:8px 12px} .fixbar a{text-decoration:none;font-weight:700;font-size:14px;padding:9px 18px;color:#fff;border:1px solid #666;white-space:nowrap} .fixbar a.cta{background:var(--cta);border-color:var(--cta)} .fixbar a b{font-size:16px} @media (max-width:560px){.fixbar a{font-size:12px;padding:8px 10px}.fixbar a b{font-size:13px}} /* catalog page */ .cat .line{margin-bottom:26px} .cat .line h2{font-size:18px;padding-left:12px;margin:0 0 10px;position:relative} .cat .line h2::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:5px;background:linear-gradient(180deg,var(--pink),var(--violet))} .cat .line h2 small{font-size:12px;color:var(--gray);font-weight:400;margin-left:10px} .cat .line .img{float:left;width:150px;height:110px;object-fit:contain;background:#f5f5f7;margin:0 14px 8px 0;border:1px solid var(--line)} .cat .line::after{content:"";display:block;clear:both} .catnav{font-size:12px;line-height:2.2;margin:0 0 22px;border:1px solid var(--line);background:#fafafc;padding:8px 14px} .catnav a{display:inline-block;margin-right:14px;white-space:nowrap} /* v5-2 窓口3つ（電話なし）: LINE ボタン */ .btn.line{background:#06c755;border-color:#06c755;color:#fff} .btn.line:hover{background:#04a344;border-color:#04a344} .btn.line small,.fixbar a.line small{font-size:10px;margin-left:4px;font-weight:400} .fixbar a.line{background:#06c755;border-color:#06c755} /* v5-3 AIの動線（社長㉙）: 「AIに相談する」ボタン */ .btn.ai{background:#fff;border-color:#a23bff;color:#5a1a9a} .btn.ai:hover{background:#a23bff;border-color:#a23bff;color:#fff} .fixbar a.ai{background:#a23bff;border-color:#a23bff} .hero .cap .tel a{font-weight:700} .hdr nav{gap:14px;font-size:12px} .hdr .call{gap:8px} .hdr .call .btn{padding:8px 12px;font-size:12px;white-space:nowrap} .hdr .call .btn small{font-size:9px;margin-left:3px} /* ワンアクション開通（社長㉛）: html.bn-prep ＝準備中／html.bn-open ＝開通。切り替えは bn-open.js の1行（switch.py） ★クラス名に bn- を付けた理由＝以前の `prep` は黄色い帯の `.prep` と衝突して を塗っていた（9/8）。 ★準備中の見せ方を変えた（社長 9/8）＝灰色のボタンに「（準備中）」と書くのをやめ、 問い合わせの導線そのものを出さない。開通すると一斉に現れる。 */ html.bn-open .only-prep{display:none!important} html.bn-prep .only-open{display:none!important} html.bn-prep .gate{display:none!important} .hdr nav{gap:12px} /* ============================================================================ v6 スマホ版（2026-09-08 夕） 社長「スマホ版の方が全然スマホ版用になってないんだけど ひどいクオリティだよ」 v5までは「段組みを1列にする」だけで、寸法は机上のままだった。実測した中身： ・横に80pxはみ出していた（390px幅の画面に455pxの中身）＝横スクロールが出ていた 犯人＝ヘッダーの3ボタン／円形写真（120px固定×3列）／ヒーローの絶対配置画像／下の固定バー ・入力欄が全部15px以下 → iOSが入力時に画面を勝手に拡大してレイアウトが崩れる ・ナビの押し所が高さ22px（指で押せない） ・縦動画3本が3列固定 → 1本110pxの豆粒 ここから下はそれを直すためだけの記述。机上（768px以上）には一切影響しない。 ============================================================================ */ /* ============================================================================ v7 ページを割る（社長 9/8「ほかのサイトは商品ページがあるからページ数がある。 でもこのムービングのリースは本当ペラ一だよね」） 1枚だった機材一覧を「入口(catalog.html) ＋ 系統ごとの11ページ(eq-*.html)」に割った。 ============================================================================ */ .crumb{font-size:12px;color:var(--gray);margin:0 0 16px;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px} .crumb a{color:var(--gray);text-decoration:none} .crumb a:hover{color:var(--pink)} .crumb a::after{content:"›";margin-left:6px;color:#bbb} .crumb span{color:var(--ink);font-weight:700} .lead{font-size:14px;color:#333;margin:0 0 22px;max-width:760px} /* ============================================================================ v9 記事ページの「メリハリ」（社長 9/8夜「使っている映像が暗くて意味わからない。 エンターテインメント性が欲しい。書いてある内容は全然いいけど、メリハリがなくて ページがワクワクしない」） 直す前＝白地に黒文字と表が並ぶだけ＝説明書の見た目。**照明屋の記事なのに光が無かった**。 考え方＝①暗い動画をやめて、光が分かる実写を大きく出す ②白と黒を交互にしてリズムを作る ③言葉で説明していた所を絵に置き換える。部品は既存（.sec.dark / .photos / .sech）に合わせる。 ============================================================================ */ /* 全幅の実写＋短いキャプション。章の頭に置いて「見せてから説明する」 */ .shot{margin:26px 0 8px;position:relative} .shot img{width:100%;height:auto;display:block;background:#000} .shot figcaption{font-size:12px;color:var(--gray);margin-top:7px} .sec.dark .shot figcaption{color:#9a9aa6} /* 光の写真を3枚並べて比べる（ビーム／スポット／ウォッシュ） */ .trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0 6px} .trio figure{margin:0} .trio img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#000} .trio .t{font-size:15px;font-weight:900;margin:9px 0 3px} .trio .s{font-size:12.5px;line-height:1.7;color:var(--gray)} .sec.dark .trio .s{color:#b9b9c4} /* 記事の中の「黒い帯」。ここだけ地が黒くなるので、白い節との間に段差が出る */ .band{background:#0b0a10;color:#fff;margin:34px 0;padding:30px 0} .band .inner{width:1200px;max-width:100%;margin:0 auto;padding:0 24px} .band h3{color:#fff;border:0;padding:0;margin:0 0 12px} .band p{color:#e2e2ea} .band b{color:#ffcf4d} /* 数字を大きく見せる（1.5° / 10m先で26cm / 269機種）。説明文に埋もれさせない */ .figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0} .figs div{border-top:3px solid var(--pink);padding-top:12px} .figs .n{font-family:"Arial Black",Arial,sans-serif;font-size:34px;line-height:1.05;letter-spacing:-.01em} .figs .u{font-size:13px;font-weight:700;margin-top:5px} .figs .d{font-size:12px;color:var(--gray);margin-top:5px;line-height:1.6} .band .figs div{border-top-color:var(--amber)} .band .figs .d{color:#a8a8b4} /* 記事の導入文。本文より一段大きくして、つかみにする */ .hook{font-size:17px;line-height:1.9;font-weight:700;margin:0 0 20px} @media (max-width:767px){ .trio{grid-template-columns:1fr;gap:18px} .figs{grid-template-columns:1fr;gap:14px} .figs .n{font-size:30px} .band{margin:26px -16px;padding:24px 0} .band .inner{padding:0 16px} .hook{font-size:15.5px} .shot{margin:20px -16px 8px} .shot figcaption{padding:0 16px} } /* 機材一覧の入口 */ .eqlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .eqrow{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center; text-decoration:none;color:var(--ink);border:1px solid var(--line);padding:12px;background:#fff} .eqrow:hover{border-color:var(--ink)} .eqrow .no{position:absolute;left:12px;top:12px;z-index:1;background:var(--ink);color:#fff; font:900 10px/1 "Arial Black",Arial,sans-serif;padding:4px 5px;letter-spacing:.04em} .eqrow img{width:104px;height:78px;object-fit:cover;background:#f5f5f7} .eqrow .tx{display:block;min-width:0} .eqrow .tx b{display:block;font-size:15px;line-height:1.4} .eqrow .tx small{display:block;font-size:11px;color:var(--gray);margin-top:3px;letter-spacing:.04em} .eqrow .tx em{display:block;font-style:normal;font-size:12px;color:#555;margin-top:6px;line-height:1.6} /* 系統ページ */ .eqpage .line h2{margin-top:0} .eqnav{display:flex;justify-content:space-between;gap:14px;margin-top:28px;padding-top:16px; border-top:1px solid var(--line);font-size:13px;font-weight:700} .eqnav a{text-decoration:none} .eqnav .nx{margin-left:auto;text-align:right} .eqacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} /* 開閉ボタン（メニュー）。机上では出さない */ .navtgl{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .navbtn{display:none} /* 暗い背景用のロゴ（机上のヘッダーは白地なので出さない） */ .lg-dark{display:none} /* ============================================================================ v8 机上のヒーローも実写に（社長 9/8「気持ちさ pc版のさ ヒーロー画像がダサいと思うんだよね それ以外はいいんだけど」） 直す前＝淡いピンク〜水色〜クリームのグラデに、切り抜き商品と巨大ロゴを浮かせていた。 クラブ・ホストクラブ向けの商売と地の色が噛み合っていない（スマホで実写に替えて社長のOKが出た形を机上にも）。 ★横長の画面に横長の動画なので、スマホで踏んだ「極端に拡大されて紫の壁」にはならない。 触るのはヒーローの地と文字色だけ。並び・丸写真・その下の節は今までどおり。 ============================================================================ */ .hero{background:#0b0a10} .hero::before{display:none} /* 斜めの光の筋は写真の邪魔になるので消す */ .mhero{display:block;position:absolute;inset:0;z-index:0;overflow:hidden} /* ★軽くぼかす。ぼかさないと店内のシャンデリアや天井の器具が切り抜き商品と混ざって、 どれが売り物なのか分からない絵になる（実機で見比べて決めた）。 scale(1.03) は、ぼかしで端がにじんで縁が透けるのを隠すための逃げ。 */ .mhero video{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block; filter:blur(3px) saturate(.9);transform:scale(1.03)} .mhero::after{content:"";position:absolute;inset:0;background: linear-gradient(90deg,rgba(8,7,12,.42) 0%,rgba(8,7,12,.70) 44%,rgba(8,7,12,.88) 100%), linear-gradient(180deg,rgba(8,7,12,.50) 0%,rgba(8,7,12,.10) 34%,rgba(8,7,12,.92) 100%)} .hero .wrap{position:relative;z-index:1;padding-top:44px} .hero .cap .logo{max-width:520px;filter:drop-shadow(0 6px 22px rgba(0,0,0,.75))} /* ロゴは白地用（黒文字）→暗い地用（白文字）に差し替える。★ヘッダーは白地のままなのでヒーローの中だけ */ .hero .cap .lg-light{display:none} .hero .cap .lg-dark{display:block} .hero .cap .l1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.6)} .hero .cap .l2{color:#e9e9f0;text-shadow:0 1px 12px rgba(0,0,0,.55)} .hero .cap .l2 b{color:#ffcf4d} /* 赤は暗い地では沈む */ .hero .cap .tel{color:#c2c2cc} .hero .cap .tel a{color:#fff} .hero .cap .acts .btn{border-color:#fff;color:#fff;background:transparent} .hero .cap .acts .btn:hover{background:#fff;color:var(--ink)} .hero .cap .acts .btn.cta{background:var(--cta);border-color:var(--cta);color:#fff} /* ★機材は黒い。暗い映像の上に置くと溶けるので、後ろに柔らかい灯りを1つ当てる（照明屋なので筋が通る）。 ::before は .prod の最初の子として、切り抜き3枚より下に描かれる。 */ .hero .prod::before{content:"";position:absolute;left:-8%;right:0;bottom:-6%;height:92%;pointer-events:none; background:radial-gradient(58% 58% at 40% 60%,rgba(255,255,255,.28) 0%,rgba(162,59,255,.16) 46%,transparent 72%)} .hero .prod img{filter:drop-shadow(0 0 24px rgba(255,255,255,.22)) drop-shadow(0 18px 24px rgba(0,0,0,.78))} .circles a{color:#fff} .circles .ph{border-color:rgba(255,255,255,.9);box-shadow:0 10px 26px rgba(0,0,0,.55)} .hero .small{color:#b9b9c4} @media (max-width:767px){ /* ---- 土台 ---- */ body{font-size:15px;line-height:1.8;padding-bottom:78px;-webkit-text-size-adjust:100%} .wrap{padding:0 16px} .btn{padding:13px 18px;font-size:14px} /* 高さ46px＝指で押せる */ .btn.big{padding:15px 20px;font-size:15px} .small{font-size:12px;line-height:1.7} /* ---- ヘッダー（社長 9/8「メニューのボックスもダサいし 上にこの白いのもダサい」）---- 白い帯とボタンの箱をやめ、黒地にしてヒーローの写真へそのまま繋げる。 ロゴは白文字版に差し替え。メニューは三本線だけ（文字も枠も無し）。 3つのCTAは下の固定バーが持っているので出さない。 */ .hdr{background:#0b0a10;border-bottom:0} .hdr .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0;height:auto;padding:11px 16px} .hdr .logo img{height:25px} .hdr .call{display:none} .navbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px; margin-right:-11px;padding:0;border:0;background:transparent;cursor:pointer; -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} .navbtn .bars{position:relative;width:21px;height:2px;background:#fff;transition:background .12s} .navbtn .bars::before,.navbtn .bars::after{content:"";position:absolute;left:0;width:21px;height:2px;background:#fff;transition:transform .12s} .navbtn .bars::before{top:-6px} .navbtn .bars::after{top:6px} .navtgl:checked ~ .navbtn .bars{background:transparent} .navtgl:checked ~ .navbtn .bars::before{transform:translateY(6px) rotate(45deg)} .navtgl:checked ~ .navbtn .bars::after{transform:translateY(-6px) rotate(-45deg)} .navtgl:focus-visible ~ .navbtn{outline:2px solid var(--pink);outline-offset:1px} /* ★元CSSの .hdr nav{flex:1} が生きていると flex-basis:0 になって width:100% が効かない。 flex を上書きして「1行まるごと」にする */ .hdr nav{order:3;flex:0 0 100%;width:100%;display:none;flex-direction:column;flex-wrap:nowrap;gap:0; font-size:15px;margin-top:10px;border-top:1px solid rgba(255,255,255,.16); max-height:calc(100vh - 120px);overflow-y:auto} .navtgl:checked ~ nav{display:flex} .hdr nav a{padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.12);line-height:1.4;color:#fff} .hdr nav a:hover{color:var(--pink)} /* ---- 準備中の帯 ---- */ .prep{font-size:11.5px;text-align:left;padding:7px 16px;line-height:1.65} /* ================= スマホ専用のトップ画 ================= 社長 9/8夕「専用のトップページというかトップ画像というか何か欲しい。これだと昔のガラケーのサイトみたい」 直す前＝淡いグラデの上に商品の切り抜き3枚とロゴと文字を縦に積んだだけ＝部品の羅列。 直した後＝導入店舗の実写（ムービングライト12台が点いている動画）を全面に敷き、その上に ロゴ→見出し→値段→ボタンを重ね、商品の切り抜きは一番下に置く。文字は白。 ※机上（768px以上）も 9/8夜に同じ考え方へ揃えた（上の v8 のかたまり）。ここはスマホ側だけ。 */ .hero{background:#0b0a10} .hero::before{display:none} /* 光の筋は写真の邪魔になるので消す */ /* ★動画は「きっちり切った1枚の絵」として置き、文字は重ねない（社長 9/8夕 「動画がそこの要は中途半端になっている、収まりが悪い」）。 文字が写真の途中に乗り、写真の下端も曖昧に溶けていたのが原因だった。 いまは 写真＝上／文字＝下 とはっきり分ける。 ※ inset:0 で縦長に伸ばすと横長の動画が極端に拡大されて紫の壁になる。高さは必ず決める。 */ .mhero{display:block;position:relative;height:auto;overflow:hidden;background:#000} .mhero video{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 42%;display:block; filter:none;transform:none} /* ★机上のぼかしを引き継がせない。スマホは写真をそのまま1枚の絵として見せる */ .mhero::after{display:none} /* ★机上用に足した暗幕。スマホは写真を「1枚の絵」として出すので掛けない（社長OK済みの形を変えない） */ .hero .prod::before{display:none} /* 同上。スマホは商品を黒地の上に並べるので灯りは要らない */ .hero .wrap{position:relative;z-index:1;gap:0;padding-top:0} /* 並び順：文字が先、商品の切り抜きは下。どちらも黒地の上に置く */ .hero .cap{order:1;padding:20px 0 0} .hero .prod{order:2;height:auto;display:flex;align-items:flex-end;justify-content:center;gap:2%;padding-top:10px} .hero .prod img{position:static;height:auto;left:auto;bottom:auto; filter:drop-shadow(0 12px 22px rgba(0,0,0,.75))} /* ★height:auto を各クラスにも書く。 すぐ上の `.hero .prod img{height:auto}` は詳細度で負けていて、 @media(max-width:1000px) の `.hero .prod .p1{height:280px}` が生きたままだった。 幅は44%/33%/25%、高さは280/210/160px と**両方**決まってしまい、 スマホで商品写真が縦に15〜22%潰れていた（2026-09-09 実測で判明。以前からの不具合）。 */ .hero .prod .p1{width:44%;max-width:200px;height:auto} .hero .prod .p2{width:33%;height:auto} .hero .prod .p3{width:25%;height:auto} /* 暗い背景に合わせて色を入れ替える */ .lg-light{display:none} .lg-dark{display:block} .hero .cap .logo{width:auto;max-width:248px} .hero .cap .l1{font-size:30px;line-height:1.3;margin-top:12px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.65)} .hero .cap .l2{font-size:13.5px;margin-top:9px;line-height:1.75;color:#e9e9f0;text-shadow:0 1px 10px rgba(0,0,0,.6)} .hero .cap .l2 b{font-size:15px;color:#ffcf4d} /* 赤は暗い地では沈む。ブランドの琥珀に */ .hero .cap .acts{gap:8px;margin-top:15px} .hero .cap .acts .btn{flex:1 1 100%;text-align:center;border-color:#fff;color:#fff;background:transparent} .hero .cap .acts .btn.cta{background:var(--cta);border-color:var(--cta);color:#fff} .hero .cap .tel{font-size:12px;line-height:1.7;margin-top:11px;color:#c2c2cc} .hero .cap .tel a{color:#fff} .hero .small{color:#b9b9c4} .circles a{color:#fff} .circles .ph{border-color:rgba(255,255,255,.9);box-shadow:0 8px 22px rgba(0,0,0,.55)} /* ---- 丸写真：固定120pxをやめて画面幅で割る。5枚なので下段2枚は中央に ---- */ .circles{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 10px;padding:14px 0 24px} .circles a{flex:0 0 calc(33.333% - 7px);font-size:12px;line-height:1.45} .circles .ph{width:auto;max-width:104px;height:auto;aspect-ratio:1/1;border-width:3px;margin-bottom:7px} .circles .small{font-size:10.5px;line-height:1.4} /* 「4,800円〜／」で切れないよう1行に収まる寸法まで落とす */ /* ---- お考えの方へ ---- */ .consider .wrap{padding:26px 16px 28px;gap:20px} .consider h1{font-size:27px;line-height:1.35;margin:5px 0 10px} .consider .br{font-size:14px} .steps li{font-size:14px;padding:10px 0 10px 42px} .steps li::before{width:28px;height:28px;line-height:28px;font-size:13px;top:10px} .consider .acts{gap:8px} .consider .acts .btn{flex:1 1 100%;text-align:center} .consider .side{padding:18px 16px;border:0;background:#f4f4f7;margin:0 -16px;width:calc(100% + 32px)} .consider .side .num{font-size:24px} /* ---- NEWS：日付の100px固定をやめて上下に ---- */ .news .wrap{padding:0 16px 28px} .news .box{border:0} .news .lab{padding:7px 0;font-size:13px} .news ul{border:1px solid var(--line);border-top:0} .news ul{padding:12px 14px} .news li{grid-template-columns:1fr;gap:2px;padding:6px 0;font-size:13px} /* ---- 大見出し・節 ---- */ .sec{padding:36px 0 30px} /* 大見出しは英字を大きく1行占有させ、日本語はその下に。右寄せのまま詰めると 日本語が2行に折れて英字とぶつかる（機材一覧で実際にぶつかった） */ .sech{flex-direction:column;align-items:flex-start;gap:2px;padding-top:10px;margin-bottom:18px} .sech .en{font-size:48px;letter-spacing:-.01em} /* 34px→48px。ここが小さいと版面が平らになる */ .sech .ja{font-size:12px} /* 系統ページの諸元表は列幅を固定して、長い型番・単位で横にはみ出さないようにする */ .eqpage table.p{table-layout:fixed;width:100%} .eqpage table.p th:first-child,.eqpage table.p td:first-child{width:38%} .eqpage table.p td,.eqpage table.p th{word-break:break-word;overflow-wrap:anywhere} .secfoot{margin-top:18px;padding-top:14px;gap:10px;font-size:13px} .secfoot .btn{width:100%;text-align:center} /* ---- 動画：縦動画3本は横スクロールで大きく見せる ---- */ .movie .grid{gap:18px} .movie .grid > figure{margin:0 -16px;width:calc(100% + 32px)} .movie .grid > figure figcaption{padding:0 16px} .movie .reels{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px} .movie figcaption{font-size:12px;margin-top:8px} .movie .reels{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:thin} .movie .reels figure{flex:0 0 60%;scroll-snap-align:start} .movie .reels figcaption{font-size:11px} .movie .spec{font-size:13px;gap:6px 16px;margin-top:12px} .movie .spec b{font-size:18px} /* ---- 表 ---- */ table.p{font-size:12.5px} table.p th,table.p td{padding:7px 8px} /* ★料金表の「台数」列だけを折り返さない。`.detail table.p td:nth-child(2)` と広く書くと 機材ページの「主要諸元」列（同じ2列目）にも当たって83px横にはみ出す（9/8 実測） */ #price table.p td:nth-child(2){white-space:nowrap;text-align:center} .co{font-size:12.5px} .co th{width:104px;padding:8px;font-size:12px} .co td{padding:8px} .eq{font-size:11.5px} .eq th{padding:6px 6px;font-size:11.5px;line-height:1.5} .eq td{padding:6px 4px;width:54px;font-size:11.5px} /* ---- シミュレーター：selectを16pxに（15pxだとiOSが勝手に拡大する） ---- */ .sim{padding:18px 16px;border:0;border-top:3px solid var(--ink);background:#fff;margin:0 -16px;width:calc(100% + 32px)} .sim .t{font-size:15px} .sim table{font-size:13.5px} .sim td{padding:8px 2px} .sim select{font-size:16px;padding:7px 8px;min-height:42px} .sim .tot{font-size:26px;white-space:nowrap} /* 「62,000円／月」を折り返さない */ .sim .acts{gap:8px} .sim .acts .btn{width:100%;text-align:center} /* ---- 導入例 ---- */ .pick .grid{gap:20px} /* 写真は左右の余白を突き抜けさせる。文章は16px内に収まったままにして交互にする */ .photos{grid-template-columns:1fr 1fr;gap:2px;margin:20px -16px 0;width:calc(100% + 32px)} .photos figcaption{padding:0 4px} .photos figcaption{font-size:11px;line-height:1.5} /* ---- もっと知る ---- */ .service .grid{gap:26px 14px} .service .b .t{font-size:16px;margin:10px 0 4px} .service .b .go{padding:9px 18px} /* 商品3枚の並びが左右にはみ出して切れていたので、幅で割る */ .service .b .ph.grad{gap:4px;padding:10px 8px 0} .service .b .ph.grad img{width:31%;height:auto;max-height:88%;object-fit:contain} /* 値段を「4,800円〜／」で切らない */ .nb{white-space:nowrap} /* ---- 詳細の節 ---- */ .detail h2{font-size:23px;padding-left:12px;margin-bottom:14px} .detail h2 small{display:block;margin-left:0;margin-top:3px;font-size:11.5px} .detail .two{gap:22px} .faq dt,.faq dd{font-size:14px} .faq dt{margin-top:14px} .gyo{font-size:12.5px;line-height:2.1} .gyo span{padding:0 8px;margin:0 6px 6px 0} /* ---- 問い合わせフォーム：入力欄を16pxに（★これが無いとiOSが拡大して崩れる） ---- */ .contact .grid{gap:24px} .form{padding:16px 14px} .form .t{font-size:16px} .form label{font-size:13px;margin:12px 0 5px} .form .row{grid-template-columns:1fr;gap:0} .form input[type=text],.form input[type=tel],.form input[type=email], .form select,.form textarea{font-size:16px;padding:11px 10px} .form input[type=file]{font-size:13px;width:100%;padding:8px 0} .form textarea{min-height:110px} .form .chk{font-size:14px;gap:4px 14px} .form .chk label{min-height:36px} .form .chk input[type=checkbox]{width:19px;height:19px} .form .send .btn{width:100%;text-align:center} .ways .w .n{font-size:24px} .ways .w p{font-size:12.5px} /* ---- 足元 ---- */ .ftr .wrap{padding:22px 16px 14px;gap:12px} .ftr .logo img{height:30px} .ftr .ad{font-size:11.5px;line-height:1.7} .ftr .links{gap:0;font-size:13px} .ftr .links a{display:block;width:100%;padding:11px 0;border-top:1px solid var(--line)} .pagetop{padding:4px 16px} .pagetop a{display:inline-block;padding:9px 0;font-size:13px} /* ---- 下の固定バー：3つを等分にして、はみ出しを止める ---- */ .fixbar{gap:6px;padding:7px 8px;padding-bottom:calc(7px + env(safe-area-inset-bottom,0px))} .fixbar a{flex:1 1 0;min-width:0;font-size:12px;line-height:1.3;padding:9px 4px; text-align:center;white-space:normal;display:flex;flex-direction:column; align-items:center;justify-content:center;min-height:44px} .fixbar a b{font-size:13px} .fixbar a.line small,.fixbar a small{font-size:10px;margin-left:0} /* ---- 機材一覧の入口（11系統）：左右を突き抜ける一覧にする ---- */ .crumb{font-size:11.5px;margin:0 0 12px} .lead{font-size:13.5px;margin:0 0 18px} .eqlist{grid-template-columns:1fr;gap:0;margin:0 -16px;width:calc(100% + 32px)} .eqrow{border:0;border-top:1px solid var(--line);padding:13px 16px;gap:13px} .eqrow:last-child{border-bottom:1px solid var(--line)} .eqrow .no{left:16px;top:13px} .eqrow img{width:88px;height:66px} .eqrow .tx b{font-size:14.5px} .eqrow .tx em{font-size:11.5px;margin-top:4px} .eqnav{font-size:12.5px;gap:10px;margin-top:24px} .eqacts{gap:8px;margin-top:20px} .eqacts .btn{width:100%;text-align:center} /* ---- 機材一覧のページ ---- */ .cat .line{margin-bottom:20px} .cat .line h2{font-size:16px;padding-left:10px} .cat .line .img{width:112px;height:84px;margin:0 10px 6px 0} /* 目次は横並びだと1件が画面幅いっぱいになるので、縦の一覧にする。 （margin-right が最後の1件の右に残って13px横スクロールが出ていた） */ .catnav{display:flex;flex-direction:column;font-size:12.5px;line-height:1.5;padding:2px 12px} .catnav a{display:block;margin-right:0;padding:13px 0;white-space:normal;border-top:1px solid var(--line)} .catnav a:first-child{border-top:0} } /* 360〜400px（iPhone SE・小さめのAndroid）でさらに詰める */ @media (max-width:400px){ .hero .cap .l1{font-size:23px} .hero .cap .logo{max-width:210px} .circles a{font-size:11.5px} .circles .ph{max-width:96px} table.p{font-size:12px} table.p th,table.p td{padding:6px 6px} .eq th,.eq td{font-size:11px;padding:5px 4px} .eq td{width:48px} .co th{width:92px;font-size:11.5px} .fixbar a{font-size:11.5px;padding:9px 2px} .sech .en{font-size:30px} }