/* HALL WORKS（仮称）— パチンコ販促グラフィック * * ⚠️このファイルは**そのままWordPressテーマの style.css に移せる**ように書いてある。 * ⚠️色は参考サイトから画素を測って取った値。推測で置くと色相がずれる（実際にずれた）。 * ⚠️ダークモードには追従させない。参考サイトは白×ピンクの明るい一色で固定。 */ /* ⚠️参考サイトに合わせ、**明るい配色で固定**する。 端末のダークモードに追従させない（追従させたら真逆の見え方になった）。 🔴色は参考画像から**画素を測って**取った（2026-08-23）。推測で置いたら色相がずれた。 メイン #F36087（珊瑚寄り）／ CONTACT #F15A87 ／ ボタン #F8638C ／ チップ #ED6382 淡ピンク #FCD0DF ／ 地 #FEFEFE（ほぼ純白）／ 文字の黒 #0B0B0A */ :root{ /* ⚠️ヘッダーの高さはここだけで決める（2026-09-18）。 これを変えたら、メニューの開始位置と飛び先の余白も自動で付いてくる。 別々に書いていたため、ヘッダーを62pxに縮めたときメニューだけ78pxのままになり、 すき間から背景が見えていた（タクヤ指摘）。 */ --head-h:96px; --ink:#0B0B0A; --ink-2:#3F3A3D; --ink-3:#6E656A; /* 🔴薄すぎたので濃くした（比3.0→5.5） */ --paper:#FFFFFF; --ground:#FEFEFE; --line:#F0E7EA; --pink:#F36087; --pink-deep:#E04A72; --pink-pale:#FCD0DF; --pink-mist:#FEF2F5; /* 🔴2026-08-23：3色目。coral pink の定番の相手（classic and professional）。 ⚠️役割で分ける。ネイビー＝構造（見出し・番号・フッター）、 ピンク＝行動（ボタン・リンク・CTA）。混ぜると押す場所が分からなくなる。 */ --navy:#1B2A4A; --navy-2:#2C4270; --navy-pale:#F4F6FB; --shadow:0 22px 50px -34px rgba(60,20,45,.34); --max:1400px; --jp:"Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic","Noto Sans JP",sans-serif; --en:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",sans-serif; } *{box-sizing:border-box;} body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--jp); line-height:1.95; font-size:19px; -webkit-font-smoothing:antialiased;} .wrap{max-width:var(--max); margin:0 auto; padding:0 40px;} h1,h2,h3{margin:0; line-height:1.25; font-weight:800; text-wrap:balance;} p{margin:0;} a{color:inherit; text-decoration:none;} /* ── ヘッダー ───────────────────────── */ header{position:sticky; top:0; z-index:60; background:var(--paper);} /* 🔴2026-08-23：ヘッダーも**横100%**（タクヤ指示）。 中身に幅の上限をかけず、ロゴを左端・CONTACTを右端まで持っていく。 ⚠️本文側（.wrap）は読みやすさのため上限1400pxのままにする。 */ .head-inner{width:100%; padding:0 40px;} /* 🔴2026-09-17：スマホは左右も詰める（40px→20px） */ @media (max-width:640px){ .head-inner{padding:0 20px;} } /* 🔴2026-08-23：**絶対配置をやめた**（タクヤ指摘「ずれてる」）。 CONTACTを position:absolute で浮かせ、ナビを margin-right:230px で よけていたので、画面幅が変わるとずれた。ふつうの flex 並びにする。 */ .head{display:flex; align-items:center; gap:34px; height:var(--head-h);} .brand{display:flex; align-items:center; gap:11px;} .brand .name{font-family:var(--en); font-size:21px; font-weight:800; letter-spacing:.07em;} .brand .sub{font-size:14px; letter-spacing:.2em; color:var(--ink-3); margin-top:2px;} nav{display:flex; gap:30px; margin-left:auto;} /* 🔴2026-08-23：押せる高さが34pxしかなかった（目安44px）。 上下に余白を足して稼ぐ。下線の位置は変わらない。 */ nav a{font-family:var(--en); font-size:16.5px; font-weight:700; letter-spacing:.09em; padding:13px 0 11px; border-bottom:2px solid transparent;} nav a[aria-current]{border-color:var(--pink); color:var(--pink);} /* 🔴2026-08-27：影を外し、上下を詰める（タクヤ指示）。 */ .head-cta{background:var(--pink); color:#fff; border-radius:14px; padding:9px 26px; text-align:center; line-height:1.35; flex:0 0 auto;} .head-cta b{display:flex; align-items:center; justify-content:center; gap:7px; font-family:var(--en); font-size:17.5px; letter-spacing:.09em;} .head-cta span{font-size:14px; opacity:.95;} /* ── ヒーロー（横いっぱい） ─────────────── ⚠️2026-08-23：POSTER DESIGN のパネルは削除（タクヤ指示）。 メインは画面の**横100%**を使い、キャラを画面の右端まで寄せる。 */ .hero{ position:relative; width:100%; overflow:hidden; padding:72px 0 96px; background:radial-gradient(1100px 620px at 78% 42%, var(--pink-mist), transparent 68%), var(--paper); } .hero-inner{max-width:var(--max); margin:0 auto; padding:0 40px; position:relative; z-index:4;} /* ⚠️文字を大きくしたら訴求3点が2段に折れて間延びした。 キャラは右46vwなので、コピー側はもう少し広げてよい。 */ /* ⚠️キャラを大きく・左に寄せたぶん、コピー側は詰める。 ⚠️大見出しの上限も下げないと PROMOTION が入りきらない。 */ .hero-copy{max-width:min(44%,600px);} /* 🔴2026-08-23：ここを **h1** にした（それまで見出しが全部h2で、h1が無かった）。 見た目は変えず、文書構造だけ直す。 */ .hero-copy .lead-jp{font-size:35px; font-weight:800; line-height:1.5;} .display{font-family:var(--en); font-weight:800; letter-spacing:-.012em; margin:18px 0 30px;} /* ⚠️台の中なので vw は使えない。1440pxのときの実値に固定する。 */ .display span{display:block; font-size:84px; line-height:1.02;} .display .l2{color:var(--pink);} .hero-copy .desc{font-size:20.5px; color:var(--ink-2); line-height:2;} .tri{display:flex; gap:32px; margin:44px 0; flex-wrap:nowrap;} .tri > div{flex:1 1 0; min-width:0;} .tri svg{display:block; margin-bottom:8px;} .tri b{display:block; font-size:16.5px; line-height:1.6;} .tri span{display:block; font-size:15px; color:var(--ink-3); line-height:1.6;} .btns{display:flex; gap:12px; flex-wrap:wrap;} .btn{display:inline-flex; align-items:center; gap:12px; border-radius:999px; padding:20px 40px; font-size:18px; font-weight:800; letter-spacing:.05em; border:1.5px solid transparent; cursor:pointer;} .btn-fill{background:var(--pink); color:#fff; box-shadow:0 14px 30px -18px rgba(243,96,135,.9);} .btn-line{border-color:var(--line); background:var(--paper); color:var(--ink);} /* キャラは wrap ではなく **画面の右端** に貼る */ /* 🔴2026-08-23：キャラをもっと左へ（タクヤ指示）。 ⚠️左に寄せるとコピーに被るので、コピー側の幅も合わせて詰める。 */ /* ⚠️2026-08-23：キャラを大見出しの直後へ移した（スマホで文字より先に 出ていたため）。基準が .hero → .hero-inner に変わるので、 右の位置は測り直した値。PCの見た目は変えない。 */ .hero-char{position:absolute; right:4.7%; bottom:-215px; width:780px; z-index:2; pointer-events:none;} .hero-char img{display:block; width:100%; height:auto;} /* ⚠️2026-09-18以降は未使用。index.html から要素ごと外してある（タクヤ指示）。 指定は6か所に散っているので、消すなら全部まとめて消すこと。 */ .hero-dots{position:absolute; right:2%; bottom:6%; width:340px; height:44%; z-index:1; background-image:radial-gradient(var(--pink) 1.5px,transparent 1.6px); background-size:13px 13px; opacity:.2;} /* ── 共通 ───────────────────────────── */ /* 🔴2026-08-23：地は**白と淡ピンクの2種類だけ**にする。 #FFFFFF と #FEFEFE を交互にしていたが、見分けが付かず意味が無かった。 淡ピンクを使うのは WORKS・ABOUT・CONTACT の3か所だけ。 */ .band{background:var(--pink-mist); padding:140px 0;} /* 🔴2026-08-23：全幅の濃いネイビーは**急に出てきて主張が強すぎた**（タクヤ指摘）。 淡いネイビー地に変える。濃いネイビーはフッターだけに残す。 */ .band-soft{background:var(--navy-pale); padding:140px 0;} .band-soft .fnum{background:var(--navy); color:#fff;} .band-soft .flow-row::before{background:#D6DCE8;} .ground{background:var(--ground); padding:56px 0 0;} /* ⚠️.card-big は使わなくなった（枠の二重をやめたため）。定義だけ残す。 */ .card-head{position:relative; display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; padding:44px 0 22px; margin-bottom:48px; border-bottom:1px solid var(--line);} .card-head::before{content:""; position:absolute; left:0; top:0; width:34px; height:4px; background:var(--pink); border-radius:2px;} .card-head h2{font-family:var(--en); font-size:36px; letter-spacing:.09em; color:var(--navy);} .chips{display:flex; gap:9px; flex-wrap:wrap;} .chip{font-size:15px; font-weight:700; padding:9px 19px; border-radius:999px; border:1px solid var(--line); color:var(--ink-3);} .chip.on{background:var(--pink); border-color:var(--pink); color:#fff;} .more{margin-left:auto; display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:999px; padding:9px 18px; font-family:var(--en); font-size:15px; font-weight:800; letter-spacing:.08em;} /* 🔴2026-08-23：**作品が小さかった**（タクヤ指示「大きく見せたい」）。 6列 → 3列。枚数は6点のまま2段になり、1点あたりの面積が約4倍になる。 ⚠️作品そのものが商品なので、ここは大きく見せる方を取る。 ⚠️スマホは1列（2列だとポスターの文字が読めない）。 */ /* 🔴2026-08-23：作品は4点（タクヤ指示）。PCは1段に4つ並べる。 ⚠️3列だと2段目が1つだけになって収まりが悪い。 */ .work-row{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start;} /* 🔴偶数番目を下げて、視線が横一直線に流れないようにする。 ⚠️スマホ（2列）では下げない。段がずれて読みにくくなる。 */ @media (min-width:1101px){ .work:nth-child(even){ margin-top:52px; } } .work .ph{aspect-ratio:.72; border-radius:9px; display:grid; place-items:center; gap:4px; text-align:center; border:1px solid var(--line); color:var(--ink-3); background:repeating-linear-gradient(135deg,var(--pink-mist) 0 11px,#fff 11px 22px);} .work .ph em{font-style:normal; font-size:17px; letter-spacing:.06em;} .work .ph small{font-size:15px;} .work b{display:block; font-size:19px; margin-top:14px;} /* ⚠️.tags は削除した（絞り込みを外したので分類の行き先が無い） */ .tag{font-size:14.5px; padding:6px 13px; border-radius:4px; background:var(--pink-mist); color:var(--ink-3);} .bottom{display:grid; grid-template-columns:1.15fr 1fr; gap:64px; padding:72px 0 0;} /* 🔴2026-08-23：見出しを作り直す。 ピンクの短い罫 → 日本語ラベル → 大きな英字 → 端まで伸びる細線。 ⚠️日本語ラベル（span）は DOM では英字の後ろにあるので、位置で上に出す。 */ /* ⚠️2026-08-23：ラベル(16〜43)と英字(30〜73)が**全節で重なっていた**。 ピンクの罫→ラベル→英字が縦に並ぶよう、位置と上余白を取り直す。 */ .sec-h{position:relative; padding:44px 0 22px; margin-bottom:48px; border-bottom:1px solid var(--line);} .sec-h::before{content:""; position:absolute; left:0; top:0; width:34px; height:4px; background:var(--pink); border-radius:2px;} /* 🔴2026-09-18：WORKSは36px、COLUMNは34pxで2pxズレていた（タクヤ指摘）。 同じ並びの節タイトルなので36pxに揃える。 ⚠️#info（タブの中）の6つは別に26px/22pxを当てているので影響しない。 あちらはタブの見出しと二重になるため、わざと小さくしてある。 */ .sec-h h2{font-family:var(--en); font-size:36px; letter-spacing:.09em; color:var(--navy);} /* ⚠️2026-08-23：ここを .sec-h span にしていたため、h2の中に作った **1文字ずつの span まで全部** position:absolute になり、 見出しが高さ0になって消えた。**直下の span だけ**に限定する。 */ .sec-h > span{position:absolute; left:0; top:12px; line-height:1.6; font-size:14px; letter-spacing:.14em; font-weight:700; color:var(--pink);} .svc-row{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;} /* 🔴2026-08-23：SERVICEは**並列**なので、対等に見える枠付きカードにする。 FLOW（順番がある）とは作りを変える。 */ /* 🔴2026-08-23：1画面に2つ入るほど小さかった（タクヤ指摘）。 余白と文字を上げて、節1つが画面1つぶんの重さになるようにする。 */ .svc{text-align:center; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:54px 20px 46px;} .svc .ic{display:grid; place-items:center; height:78px;} .svc .ic svg{width:64px; height:64px;} .svc b{display:block; font-size:18px; margin-top:16px;} .svc span{display:block; font-size:15px; color:var(--ink-3); line-height:1.75; margin-top:8px;} /* 🔴2026-08-23：FLOWは**順番がある**ので、番号とつなぐ線で見せる。 ⚠️線は番号の中心の高さ（22px）に引く。番号の大きさを変えたらここも直す。 */ .flow-row{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:34px; position:relative;} .flow-row::before{ content:""; position:absolute; left:0; right:0; top:30px; height:2px; background:var(--pink-pale); z-index:0;} .fstep{position:relative; z-index:1; text-align:center;} .fnum{display:grid; place-items:center; width:60px; height:60px; margin:0 auto; border-radius:999px; background:var(--navy); color:#fff; font-family:var(--en); font-size:20px; font-weight:800; letter-spacing:.04em;} .fstep b{display:block; font-size:20px; margin-top:22px;} .ftxt{display:block; font-size:16px; color:var(--ink-3); line-height:1.85; margin-top:10px;} .plain{padding:96px 0;} /* 🔴2026-09-18：140→96（タクヤ指示で余白を詰める） */ table{width:100%; border-collapse:collapse; font-size:18px;} caption{text-align:left; font-size:15px; color:var(--ink-3); padding-bottom:10px;} th,td{padding:17px 16px; border-bottom:1px solid var(--line); text-align:left;} .price th{font-weight:700; color:var(--navy); width:56%;} .price td{text-align:right; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap;} /* 🔴2026-08-31：料金表を作り直した（基本料金／チラシ／オプションの3組）。 ⚠️基本料金の3行は**すべて同額**。何が含まれるかが見えないと表の意味が無いので、 品目の下に対応媒体を小さく添えている。ここを消さないこと。 */ .price th span{display:block; font-weight:500; font-size:14.5px; color:var(--ink-3); margin-top:5px; line-height:1.7; letter-spacing:0;} .price .price-grp th{padding:22px 16px 9px; border-bottom:0; font-family:var(--en); font-size:14px; letter-spacing:.16em; color:var(--pink-deep); font-weight:800; width:auto;} .price .price-grp:first-child th{padding-top:4px;} .about th{width:30%; font-weight:700; color:var(--navy-2); font-size:16.5px;} .about td{font-weight:600;} .table-scroll{overflow-x:auto;} .note{font-size:15px; color:var(--ink-3); margin-top:13px; line-height:1.9;} details{border-bottom:1px solid var(--line); padding:22px 2px;} /* 🔴2026-08-23：押せる高さが29pxしかなかった。上下に余白を足す。 */ /* 🔴2026-08-23：**押すと開くと分からない**と言われた（タクヤ）。 ・右端に ＋／− を出す ・触れると背景がうっすら色づく（押せると分かる） ・上に「タップすると答えが開きます」と書く ⚠️印は ::after。左の "Q" は ::before で既に使っている。 */ summary{cursor:pointer; font-weight:700; font-size:18px; list-style:none; display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:10px; transition:background .15s;} /* ⚠️FAQの地が淡ピンクになったので、触れた時は白にしないと分からない。 */ summary:hover{background:var(--paper);} summary::after{ content:"＋"; margin-left:auto; flex:0 0 auto; width:32px; height:32px; border-radius:999px; background:var(--pink); color:#fff; font-size:16px; font-weight:800; display:grid; place-items:center; line-height:1;} details[open] summary::after{content:"−";} .faq-hint{font-size:15px; color:var(--ink-3); margin-bottom:14px;} summary::-webkit-details-marker{display:none;} summary::before{content:"Q"; color:var(--pink); font-weight:800;} details p{margin-top:10px; padding:0 14px 8px 40px; color:var(--ink-2); font-size:17.5px;} /* ── CONTACT（同じページ内。左キャラ・右フォーム） ── */ /* 🔴2026-08-23：キャラの下に節の余白96pxが残り、フォーム側が間延びして見えた。 **下の余白を0にして、キャラの下端＝節の下端**にする（タクヤ選択C）。 ⚠️スマホは縦積みで事情が違うので、下のスマホ用ブロックで64pxに戻している。 */ .contact{background:var(--pink-mist); padding:96px 0 0; position:relative; z-index:1;} /* 🔴2026-08-23：**フォームを左**にした（タクヤ指示）。 日本語は左から読むので、目的（送信）が先に目に入る。 キャラはヒーローと同じく右側に置いて、上下で位置が揃う。 */ /* 🔴2026-08-23：align-items:end のせいで、右の文章がフォームの下端に 引っ張られて**下に沈んでいた**（タクヤ指摘）。 文章は上から始め、キャラだけを下に落とす。 */ /* 🔴2026-08-23：キャラが小さかった（タクヤ指示）。 右の列を広げ（.82fr → .95fr）、キャラを列いっぱいまで大きくする。 ⚠️はみ出させると横スクロールが出るので、幅は100%までに収める。 */ /* 🔴2026-08-23：CONTACTのキャラをもっと大きく（タクヤ指示）。 右の列を広げてから、キャラを列いっぱいまで伸ばす。 */ /* 🔴2026-08-23：フォームをもう少し左へ広げる（タクヤ指示）。 この節だけ左右の余白を詰めて、フォーム側の列も広げる。 */ .contact .wrap{max-width:1480px; padding:0 28px;} .contact-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:52px; align-items:stretch;} .contact-left{order:2; display:flex; flex-direction:column;} .contact-left .contact-char{margin-top:auto;} .form{order:1;} /* 🔴2026-08-23：「 で始まる行は**字面の左に余白が入る**ため、 下の説明文より約12px右にずれて見えていた（タクヤ指摘）。 text-indent で始め括弧のぶんだけ引き戻して、左端を揃える。 ⚠️数値を変えるときは、下の .sub / .bubble と左端が揃うか必ず見ること。 */ .contact-left .msg{font-size:clamp(24px,2.9vw,34px); font-weight:900; line-height:1.55; letter-spacing:.01em; margin-bottom:14px; /* ⚠️-0.55em では引き戻しすぎた（文字が18px左に出た）。 「 の字面は箱の中で約0.35em右から始まるので、その分だけ戻す。 */ /* ⚠️2026-08-23：文が「 で始まらなくなったので、字下げの引き戻しは外す。 残すと1行目だけ17px左にずれる。 */ text-indent:0;} /* 🔴2026-08-27：縁取りは文字がつぶれる（タクヤ指摘）。 900を持つ Noto Sans JP に差し替える。読み込みは index.html の head。 ⚠️読めなかった時は下の var(--jp) に落ちるだけ。表示は壊れない。 */ .contact-left .msg{font-family:"Noto Sans JP",var(--jp); -webkit-text-stroke:0; font-weight:900;} .contact-left .msg em{font-style:normal; color:var(--pink);} .contact-left .sub{font-size:17.5px; color:var(--ink-2); line-height:1.95;} /* 🔴2026-08-27：吹き出し（しっぽ付き）をやめ、白い帯だけにする（タクヤ指示）。 ⚠️上下の余白17pxは白が分厚く見えた。9pxに詰める。 */ .bubble{display:inline-block; background:var(--paper); color:var(--pink-deep); font-size:21px; font-weight:800; line-height:1.55; padding:9px 22px; border-radius:12px; position:relative; margin-top:22px; box-shadow:none;} .bubble::after{display:none;} /* 🔴2026-08-23：はみ出しは**フッターに被せてよい**（タクヤ指示）。 被せるので、重ね順を上にしておく。 */ /* 🔴2026-08-23：フッターへの被せをやめ、節の中に収める（タクヤ指摘）。 */ .contact-char{width:min(100%,620px); margin:18px 0 0 auto; position:relative; z-index:2;} .contact-char img{width:100%; height:auto; display:block;} /* ⚠️2026-08-23：隣のキャラの高さに合わせて箱が引き伸ばされ、 注記の下に**192pxの空白**ができていた。中身の高さで止める。 */ .form{background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:40px; align-self:start;} .frow{display:grid; grid-template-columns:1fr 1fr; gap:20px;} .field{margin-bottom:20px;} .field label{display:block; font-size:16px; font-weight:700; margin-bottom:8px;} .req{color:#fff; background:var(--pink-deep); font-size:14px; padding:4px 9px; border-radius:4px; margin-left:7px; vertical-align:1px;} .any{color:var(--ink-3); background:var(--pink-mist); font-size:14px; padding:4px 9px; border-radius:4px; margin-left:6px; vertical-align:1px;} .field input,.field textarea,.field select{width:100%; font:inherit; font-size:18px; padding:16px 18px; border-radius:9px; border:1px solid var(--line); background:var(--paper); color:var(--ink);} /* 🔴2026-08-23：相談内容の枠が浅すぎた（タクヤ指示）。110 → 220px。 */ .field textarea{min-height:180px; resize:vertical;} .field input:focus,.field textarea:focus,.field select:focus{ outline:2px solid var(--pink); outline-offset:1px; border-color:transparent;} .form .btn-fill{width:100%; justify-content:center; margin-top:6px;} /* 🔴2026-08-31：送信の結果を出す場所。 ⚠️見えない欄(.hp)は display:none にしない。**画面読み上げにも隠す**必要はあるが、 display:none だと埋めない機械が増えて罠にならない。画面の外へ出す。 */ .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;} .form-msg{margin:14px 0 0; font-size:15.5px; line-height:1.8; min-height:1px;} .form-msg.is-ok{color:#1B7A4A; font-weight:700;} .form-msg.is-ng{color:#C0392B; font-weight:700;} .form-msg.is-wait{color:var(--ink-3);} .privacy{font-size:14.5px; color:var(--ink-3); margin-top:12px; line-height:1.75;} /* 🔴フッターをネイビーで締める。今まで白のまま終わっていて、 ページの終わりが分からなかった。 */ footer{background:var(--navy); color:#fff; padding:30px 0;} /* タブレットもフッターの字は小さく（2026-09-18） */ @media (max-width:1100px){ .foot, .foot *{font-size:13px; line-height:1.7;} } .foot{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:15px; color:rgba(255,255,255,.82);} /* ⚠️2026-08-23：確認用の帯（.prov）は**本番想定にするため削除**した。 */ @media (max-width:1100px){ nav{display:none;} .work-row{grid-template-columns:repeat(2,1fr); gap:24px;} .hero-dots{display:none;} .hero-copy{max-width:none;} .tri{flex-wrap:wrap;} .bottom{grid-template-columns:1fr; gap:36px;} /* 狭い画面では、あいさつ文→フォーム→キャラ の順に戻す */ .contact-grid{grid-template-columns:1fr; gap:26px; align-items:stretch;} .contact-left{order:1;} .form{order:2;} .contact-char{margin-bottom:-20px;} } @media (max-width:640px){ .work-row{grid-template-columns:1fr;} /* 🔴2026-08-23：2列だと1枚が狭く、名前と説明が折れて読みにくい（タクヤ指示）。 スマホは**横長に1枚ずつ**並べ、アイコンを左に置く。 */ .svc-row{grid-template-columns:1fr; gap:14px;} .svc{display:grid; grid-template-columns:64px 1fr; grid-template-rows:auto auto; column-gap:18px; align-items:center; text-align:left; padding:22px 22px;} /* ⚠️アイコンを2行ぶんにまたがせないと、説明文がアイコンの下に回り込む （実際そうなっていた）。 */ .svc .ic{height:auto; grid-row:1 / span 2; align-self:center;} .svc .ic svg{width:52px; height:52px;} .svc b{margin-top:0; font-size:17px;} .svc span{margin-top:4px; font-size:14.5px;} .flow-row{flex-wrap:wrap;} .fstep{flex:0 0 46%;} .arrow{display:none;} .tri{gap:18px;} .frow{grid-template-columns:1fr;} /* 🔴2026-08-23：幅360pxで .head-cta が画面外に出て**横スクロールが出た**。 左右の余白を詰め、副題とロゴ副題を隠して収める。 */ .wrap,.head-inner{padding:0 20px;} /* 🔴2026-09-17 タクヤ指示「ロゴを少し小さく・白い部分を狭く」。 78px → 62px。⚠️触る指の的（44px）は確保する。 ⚠️高さは --head-h で持つ。ここで直接 height を書かない。 */ :root{--head-h:62px;} .head{gap:14px;} .head-cta{padding:11px 15px; border-radius:12px;} .head-cta span{display:none;} .brand .sub{display:none;} .plain,.contact{padding:44px 0;} } /* ── COLUMN（記事） ───────────────────── 🔴2026-08-23追加。検索から人を連れてくる受け皿。 */ .col-row{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;} .col{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:26px 26px 22px; box-shadow:var(--shadow);} .col-tag{display:inline-block; font-size:14px; font-weight:800; color:#fff; background:var(--pink); border-radius:999px; padding:5px 14px;} .col h3{font-size:19px; line-height:1.6; margin:14px 0 10px;} .col p{font-size:15.5px; color:var(--ink-2); line-height:1.85;} .col-date{font-size:14px; color:var(--ink-3); margin-top:16px;} @media (max-width:1100px){ .col-row{grid-template-columns:1fr;} } /* ── 料金の説明（表の代わり） ───────────────── */ .lead-p{font-size:21px; line-height:1.95; margin-bottom:30px;} .price-note{background:var(--pink-mist); border-radius:16px; padding:32px 34px;} .pn-t{font-size:17px; font-weight:800; color:var(--pink-deep); margin-bottom:14px;} .pn-list{margin:0; padding-left:1.3em; font-size:17.5px; line-height:2.1;} .pn-list li{margin-bottom:4px;} .pn-f{font-size:16px; color:var(--ink-2); margin-top:18px;} @media (max-width:640px){ .lead-p{font-size:19px;} .price-note{padding:24px 22px;} .pn-list{font-size:16.5px;} .band{padding:64px 0;} } /* ── スマホ専用の作り込み（2026-08-23） ───────── 測った事実：スマホの全長が13,237pxあった（PCは7,956px）。 長さの原因はWORKSを1列で6点出していたこと。 ⚠️1点の大きさは落とさない（「大きく見せたい」を守る）。点数を絞る。 */ .works-more-sp{display:none;} /* 🔴2026-08-23：順に浮かび上がる。 ⚠️**JSが動いている時だけ**隠す（body.js）。動かなければ最初から全部見える。 ⚠️「動きを減らす」設定の人には出さない。 */ body.js .reveal{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);} body.js .reveal.is-in{opacity:1; transform:none;} @media (prefers-reduced-motion:reduce){ body.js .reveal{opacity:1; transform:none; transition:none;} } @media (max-width:760px){ /* ① WORKSは3点まで。続きはボタンから */ .work:nth-child(n+4){display:none;} .works-more-sp{display:block; margin-top:30px; text-align:center;} .works-more-sp .btn{width:100%; justify-content:center;} .card-head .more{display:none;} /* 上下に同じボタンは要らない */ /* ② ABOUTの表を縦積みに。30%幅の見出し列があると右が2〜3文字で折れる */ .about, .about tbody, .about tr, .about th, .about td{display:block; width:auto;} .about tr{padding:18px 0; border-bottom:1px solid var(--line);} .about th{padding:0 0 6px; border:0; font-size:15px; color:var(--ink-3);} .about td{padding:0; border:0; font-size:17px;} /* ③ FLOWはスマホでは縦に並べ、線も縦にする */ .flow-row{grid-template-columns:1fr; gap:0;} .flow-row::before{left:30px; right:auto; top:30px; bottom:34px; height:auto; width:2px;} .fstep{text-align:left; display:grid; grid-template-columns:60px 1fr; grid-template-rows:auto auto; column-gap:18px; padding:18px 0;} .fnum{grid-row:1 / span 2; align-self:start;} .fstep b{margin-top:6px;} .ftxt{margin-top:2px;} /* ④ ヒーローを詰める */ .hero{padding:34px 0 48px;} .hero-copy .lead-jp{font-size:25px;} .display span{line-height:1.04;} /* ⚠️3列だと1項目87px幅で、文字が5〜6行に折れて読めなかった。 スマホは**縦1列＋アイコン左**にする。 */ /* 🔴2026-09-17 タクヤ指摘「ヒーローと同じくらい大きい」。 実測：3つで233px（ヒーロー全体572pxの41%）を占めていた。 1行を78px → 56px に詰める（余白・アイコン・行間を落とす）。 ⚠️文字は小さくしすぎない。タクヤは3回「まだ小さい」と言っている。 見出しは据え置き、説明文だけ0.5px落として行間で詰める。 */ /* 🔴2026-09-18「まだ大きいかも」。61px → 50px まで詰める（当初78px）。 ⚠️見出しは16→15pxまで。これ以上はタクヤの「まだ小さい」に戻る。 */ .tri{display:grid; grid-template-columns:1fr; gap:0; margin:14px 0 18px;} .tri > div{max-width:none; display:grid; grid-template-columns:22px 1fr; column-gap:10px; align-items:start; padding:7px 0; border-bottom:1px solid var(--line);} .tri > div:first-child{border-top:1px solid var(--line);} .tri svg{margin-bottom:0; width:19px; height:19px; grid-row:1 / span 2;} .tri b{font-size:15px; line-height:1.35;} .tri b br{display:none;} .tri span{font-size:13px; margin-top:0; line-height:1.4; color:var(--ink-3);} /* ③ ボタンが 310x77px と大きすぎた（目安44〜56px） */ .btns{gap:10px;} .btns .btn{width:100%; justify-content:center;} .btn{padding:16px 24px; font-size:16px; gap:8px;} .works-more-sp .btn{padding:16px 20px;} .sp-bar .btn{padding:15px 20px; font-size:16px;} } /* ── スマホのメニューと下部固定帯（2026-08-23） ───────── */ .burger{display:none; width:48px; height:48px; margin-left:auto; padding:0; background:none; border:0; cursor:pointer; flex:0 0 auto;} .burger span{display:block; width:26px; height:2px; margin:6px auto; background:var(--ink); border-radius:2px; transition:transform .2s, opacity .2s;} body.nav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg);} body.nav-open .burger span:nth-child(2){opacity:0;} body.nav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg);} /* ⚠️引き出しは**画面に覆いかぶせる**（本文の流れに入れると、 ヘッダーが伸びてページの高さが変わり、項目が画面に収まらない）。 ヘッダーの高さ78px分だけ下げ、中身が長ければ中でスクロールさせる。 */ .spnav{display:none; position:fixed; left:0; right:0; top:var(--head-h); bottom:0; z-index:65; overflow-y:auto; -webkit-overflow-scrolling:touch; border-top:1px solid var(--line); background:var(--paper); padding:8px 20px calc(28px + env(safe-area-inset-bottom));} .spnav a{display:block; padding:18px 4px; border-bottom:1px solid var(--line); font-family:var(--en); font-size:19px; font-weight:800; letter-spacing:.07em; color:var(--navy);} /* 🔴2026-08-27：改行しない（タクヤ指示）。block をやめて横に並べる。 */ .spnav a span{display:inline; font-family:var(--jp); font-size:14px; font-weight:600; letter-spacing:0; color:var(--ink-3); margin:0 0 0 12px;} .spnav .spnav-cta{margin-top:18px; border:0; text-align:center; background:var(--pink); color:#fff !important; border-radius:999px; font-family:var(--jp); font-size:17px; padding:18px;} .spnav .spnav-cta span{display:none;} body.nav-open{overflow:hidden;} .sp-bar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:70; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(8px); border-top:1px solid var(--line); transition:transform .25s;} .sp-bar .btn{width:100%; justify-content:center;} .sp-bar.is-hidden{transform:translateY(110%);} @media (max-width:1100px){ .burger{display:block;} .spnav{display:block;} .spnav[hidden]{display:none;} } @media (max-width:760px){ /* ① 制作実績はスマホでも2列。3点までの制限は外す */ .work-row{grid-template-columns:repeat(2,1fr) !important; gap:16px;} .work:nth-child(n+4){display:block;} .works-more-sp{display:block; margin-top:26px;} .work .ph em{font-size:14px;} .work .ph small{font-size:12.5px;} .work b{font-size:15px;} .tag{font-size:12.5px; padding:4px 9px;} /* ヘッダーはロゴとメニューだけにする（下に固定帯があるので重複を避ける） */ .head-cta{display:none;} .sp-bar{display:block;} body{padding-bottom:86px;} } /* ── 下層ページ（記事一覧・記事） 2026-08-23 ───────── */ .wrap-narrow{max-width:820px; margin:0 auto; padding:0 40px;} .page-head{padding:56px 0 34px;} .crumb{font-size:14px; color:var(--ink-3); margin-bottom:24px;} .crumb a{color:var(--ink-3); text-decoration:underline;} .crumb span{margin:0 4px;} .page-head h1{font-family:var(--en); font-size:34px; letter-spacing:.09em; color:var(--navy);} .art-head h1{font-family:var(--jp); font-size:clamp(26px,3.4vw,40px); line-height:1.45; color:var(--ink); margin:16px 0 12px; letter-spacing:.01em;} .art-meta{font-size:14.5px; color:var(--ink-3);} .article{padding:8px 0 80px;} .art-lead{font-size:19px; line-height:2.05; padding:24px 26px; border-radius:14px; background:var(--pink-mist); margin-bottom:48px;} .article h2{font-size:26px; line-height:1.5; margin:56px 0 20px; padding-left:16px; border-left:5px solid var(--navy); color:var(--navy);} .article p{font-size:18px; line-height:2.1; margin-bottom:22px;} .art-list{font-size:18px; line-height:2.05; padding-left:1.4em; margin:0 0 26px;} .art-list li{margin-bottom:8px;} .art-note{font-size:16.5px; color:var(--ink-2); background:var(--pink-mist); border-radius:12px; padding:18px 22px;} .art-table{width:100%; border-collapse:collapse; font-size:16.5px;} .art-table th{background:var(--navy-pale); color:var(--navy); font-weight:800; font-size:15.5px; padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; width:44%;} .art-table td{padding:16px; border-bottom:1px solid var(--line); vertical-align:top;} .art-warn{border:2px solid var(--pink); border-radius:14px; padding:24px 26px; margin:48px 0;} .art-warn b{display:block; color:var(--pink-deep); margin-bottom:10px; font-size:17px;} .art-warn p{font-size:16.5px; line-height:1.95; margin:0;} .art-src{font-size:15.5px; line-height:1.95; padding-left:1.3em;} .art-src a{text-decoration:underline;} .art-cta{margin-top:56px; background:var(--pink-mist); border-radius:16px; padding:32px 30px;} .art-cta p{font-size:17.5px; margin-bottom:20px;} .col h3 a{text-decoration:none;} .col h3 a:hover{color:var(--pink-deep); text-decoration:underline;} @media (max-width:760px){ .wrap-narrow{padding:0 20px;} .page-head{padding:36px 0 22px;} .article h2{font-size:22px; margin:44px 0 16px;} .article p, .art-list{font-size:17px;} .art-lead{font-size:17.5px; padding:20px 20px;} .art-table th{width:38%; font-size:14.5px;} .art-table td{font-size:15.5px;} } /* ── ④ ホバー（2026-08-23） ───────────────── ⚠️「動きを減らす」設定の人には出さない。下でまとめて止める。 */ .btn{transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, background-color .22s, border-color .22s, color .22s;} /* 🔴2026-08-28：ホバーは**浮かせず、色を入れ替える**（タクヤ指示）。 ピンクの面 → 白、文字 → 黒。押せることが色で分かる。 ⚠️白い背景の上に置くと、白くした瞬間ボタンが消える。 枠線を内側の影で足して形を残す（border だと幅が増えて文字がずれる）。 */ .btn-fill:hover, .head-cta:hover, .spnav .spnav-cta:hover, .spbar-btn:hover{ background:#fff; color:var(--ink); box-shadow:inset 0 0 0 2px var(--pink), 0 10px 24px -16px rgba(243,96,135,.7); transform:none; } .head-cta:hover span{opacity:.8;} .btn-line:hover{border-color:var(--pink); color:var(--pink-deep);} .head-cta{transition:background-color .22s, color .22s, box-shadow .22s;} .spnav .spnav-cta, .spbar-btn{transition:background-color .22s, color .22s, box-shadow .22s;} nav a{transition:color .2s, border-color .2s;} nav a:hover{color:var(--pink); border-color:var(--pink-pale);} .more{transition:border-color .2s, color .2s, transform .2s;} .more:hover{border-color:var(--pink); color:var(--pink-deep); transform:translateX(3px);} .work .ph{transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;} .work:hover .ph{transform:translateY(-8px); box-shadow:0 26px 44px -26px rgba(60,20,45,.5);} /* ⚠️2026-08-23：SERVICEは押せない項目なので、ホバーで浮かせない。 浮くと「リンクだ」と思わせてしまう（タクヤ指摘）。 */ .col{transition:transform .3s, box-shadow .3s;} .col:hover{transform:translateY(-6px); box-shadow:0 26px 46px -26px rgba(60,20,45,.42);} .crumb a, .art-src a{transition:color .2s;} .crumb a:hover, .art-src a:hover{color:var(--pink-deep);} .field input, .field textarea, .field select{transition:border-color .2s, box-shadow .2s;} .field input:hover, .field textarea:hover, .field select:hover{border-color:var(--pink-pale);} /* ── ⑤ 出現のしかたを、見出しと本文で変える ───── 本文 … 下から浮かぶ（今まで通り） 見出し … **左から拭うように出す**＋ピンクの罫が横に伸びる ⚠️同じ動きばかりだと単調に見える。役割で分ける。 */ body.js .sec-h.reveal, body.js .card-head.reveal, body.js .art-head.reveal{ opacity:1; transform:none;} /* 🔴2026-08-23：ふわっと出すだけでは誰でもできる動きに見える（タクヤ指摘）。 英字の見出しは**1文字ずつ下からせり上がる**。マスクで切って動かす。 ⚠️文字はJSで1文字ずつ包む。読み上げ用に aria-label を元の文字列で残す。 */ .sec-h h2 .ch, .card-head h2 .ch{display:inline-block; overflow:hidden; vertical-align:bottom;} .sec-h h2 .ch i, .card-head h2 .ch i{display:inline-block; font-style:normal;} body.js .sec-h.reveal h2 .ch i, body.js .card-head.reveal h2 .ch i{ transform:translateY(112%); transition:transform .72s cubic-bezier(.16,.84,.28,1);} body.js .sec-h.reveal.is-in h2 .ch i, body.js .card-head.reveal.is-in h2 .ch i{ transform:none;} /* 日本語の長い見出しは1文字ずつだと落ち着かないので、行ごとに拭う */ body.js .art-head.reveal h1{clip-path:inset(0 100% 0 0); transition:clip-path .85s cubic-bezier(.16,.84,.28,1);} body.js .art-head.reveal.is-in h1{clip-path:inset(0 0 0 0);} body.js .sec-h.reveal > span, body.js .art-head.reveal .col-tag{ opacity:0; transform:translateY(8px); transition:opacity .6s .18s, transform .6s .18s;} body.js .sec-h.reveal.is-in > span, body.js .art-head.reveal.is-in .col-tag{ opacity:1; transform:none;} body.js .sec-h.reveal::before, body.js .card-head.reveal::before{ transform:scaleX(0); transform-origin:left center; transition:transform .6s cubic-bezier(.16,.84,.28,1);} body.js .sec-h.reveal.is-in::before, body.js .card-head.reveal.is-in::before{ transform:scaleX(1);} @media (prefers-reduced-motion:reduce){ *, *::before, *::after{transition:none !important; animation:none !important;} body.js .sec-h.reveal h2, body.js .card-head.reveal h2, body.js .art-head.reveal h1{clip-path:none;} body.js .sec-h.reveal > span, body.js .art-head.reveal .col-tag{opacity:1; transform:none;} body.js .sec-h.reveal::before, body.js .card-head.reveal::before{transform:none;} .btn:hover, .svc:hover, .col:hover, .work:hover .ph{transform:none;} } /* 🔴2026-08-23：節が0.6〜0.7画面しかなく軽かった（タクヤ指摘）。 余白で水増しせず、**リード文を足して**重さを付ける。 */ .sec-lead{font-size:19px; line-height:2.05; color:var(--ink-2); max-width:46em; margin:-16px 0 52px;} @media (max-width:760px){ .sec-lead{font-size:17px; margin:-8px 0 36px;} } /* ── ② 作品はピンクの幕が引いて現れる ───────── ⚠️ふわっと出すのと差を付けるため、幕方式にする。 */ .work .ph{position:relative; overflow:hidden;} .work .ph::after{content:""; position:absolute; inset:0; background:var(--pink); transform-origin:right center;} body.js .work.reveal{opacity:1; transform:none;} body.js .work.reveal .ph::after{transform:scaleX(1); transition:transform .85s cubic-bezier(.72,0,.16,1);} body.js .work.reveal.is-in .ph::after{transform:scaleX(0);} /* ── ④ FLOWのつなぐ線が左から引かれる ───────── */ body.js .flow-row.reveal{opacity:1; transform:none;} body.js .flow-row.reveal::before{transform:scaleX(0); transform-origin:left center; transition:transform 1.1s cubic-bezier(.16,.84,.28,1) .15s;} body.js .flow-row.reveal.is-in::before{transform:scaleX(1);} @media (max-width:760px){ body.js .flow-row.reveal::before{transform:scaleY(0); transform-origin:center top;} body.js .flow-row.reveal.is-in::before{transform:scaleY(1);} } /* ── ③ ヒーローは順番に入る ────────────── ⚠️ここには動きが**一つも入っていなかった**。最初に見る場所なのに無反応だった。 */ body.js .hero .lead-jp, body.js .hero .display .l1, body.js .hero .display .l2, body.js .hero .desc, body.js .hero .tri, body.js .hero .btns{ opacity:0; transform:translateY(26px); transition:opacity .85s cubic-bezier(.16,.84,.28,1), transform .85s cubic-bezier(.16,.84,.28,1);} body.js .hero .hero-char{opacity:0; transform:translateX(46px) scale(1.03); transition:opacity 1s cubic-bezier(.16,.84,.28,1), transform 1s cubic-bezier(.16,.84,.28,1);} body.js .hero.hero-in .lead-jp, body.js .hero.hero-in .display .l1, body.js .hero.hero-in .display .l2, body.js .hero.hero-in .desc, body.js .hero.hero-in .tri, body.js .hero.hero-in .btns, body.js .hero.hero-in .hero-char{opacity:1; transform:none;} body.js .hero .lead-jp{transition-delay:.05s;} body.js .hero .hero-char{transition-delay:.12s;} body.js .hero .display .l1{transition-delay:.18s;} body.js .hero .display .l2{transition-delay:.28s;} body.js .hero .desc{transition-delay:.40s;} body.js .hero .tri{transition-delay:.50s;} body.js .hero .btns{transition-delay:.60s;} /* ── ⑤ 抜けていた所を埋める ────────────── 料金表の行・入力欄・記事の中身は対象に入っていなかった。 */ body.js .price tbody tr.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s, transform .6s;} body.js .price tbody tr.reveal.is-in{opacity:1; transform:none;} @media (prefers-reduced-motion:reduce){ body.js .sec-h.reveal h2 .ch i, body.js .card-head.reveal h2 .ch i{transform:none;} body.js .work.reveal .ph::after{display:none;} body.js .flow-row.reveal::before{transform:none;} body.js .hero .lead-jp, body.js .hero .display .l1, body.js .hero .display .l2, body.js .hero .desc, body.js .hero .tri, body.js .hero .btns, body.js .hero .hero-char{opacity:1; transform:none;} body.js .price tbody tr.reveal{opacity:1; transform:none;} } /* 🔴2026-08-23：後半に動きが入っていない場所があった（タクヤ指摘）。 ABOUTの表は行ごと、CONTACTは文章・吹き出し・キャラ、フッターも対象に足す。 */ body.js .about tbody tr.reveal{opacity:0; transform:translateY(12px); transition:opacity .55s, transform .55s;} body.js .about tbody tr.reveal.is-in{opacity:1; transform:none;} body.js .contact-char.reveal{opacity:0; transform:translateY(28px) scale(.98); transition:opacity .9s cubic-bezier(.16,.84,.28,1), transform .9s cubic-bezier(.16,.84,.28,1);} body.js .contact-char.reveal.is-in{opacity:1; transform:none;} body.js .bubble.reveal{opacity:0; transform:translateY(10px) scale(.94); transform-origin:left bottom; transition:opacity .5s .12s, transform .5s cubic-bezier(.2,1.4,.4,1) .12s;} body.js .bubble.reveal.is-in{opacity:1; transform:none;} @media (prefers-reduced-motion:reduce){ body.js .about tbody tr.reveal, body.js .contact-char.reveal, body.js .bubble.reveal{opacity:1; transform:none;} } /* ⚠️「いつまでに何点」が途中で折れて読みにくかった。ここだけ折らない。 */ .nb{white-space:nowrap;} /* ── スマホの文字組みを整える（2026-08-23） ───────────── 測った事実：大きさが15種類あり、1行が12〜18字しかなかった。 ⚠️0.5px差は見分けられない＝階層ではなく散らかり。7段階に絞る。 ⚠️本文を19→17pxにするのは「小さくする」ためではなく、 **1行の字数を20字前後に増やして読みやすくする**ため。 ⚠️入力欄は16px以上を守る（下回るとiPhoneが勝手に拡大する）。 */ @media (max-width:760px){ body{font-size:17px; line-height:1.9;} /* 38 … いちばん大きい見出し */ .display span{font-size:40px; line-height:1.06;} /* 28 … 節の見出し */ .sec-h h2, .card-head h2{font-size:28px;} .page-head h1{font-size:28px;} /* 22 … リード */ .hero-copy .lead-jp{font-size:22px; line-height:1.5;} .contact-left .msg{font-size:24px; line-height:1.5;} .art-head h1{font-size:24px; line-height:1.5;} /* 17 … 本文 */ .hero-copy .desc, .sec-lead, .contact-left .sub, .price th, .price td, .about td, table, details p, .article p, .art-list, .art-lead{font-size:17px;} summary{font-size:17px;} .bubble{font-size:16px;} .col h3{font-size:18px; line-height:1.6;} /* 16 … 副文 */ .tri b, .svc b, .fstep b, .field label, .btn, .spnav .spnav-cta, .sp-bar .btn{font-size:16px;} /* ⚠️15.5と15は見分けが付かないので15に寄せる。役割が違う21(ロゴ)・ 20(FLOWの番号)・19(記事見出し)は残す。 */ .col p, .about th, .art-note, .art-warn p{font-size:15px;} .col h3{font-size:19px;} /* ⚠️FAQの答えは左に40pxの字下げがあり、1行14字まで減っていた。 スマホでは字下げを詰めて、1行20字前後を確保する。 */ details p{padding:0 4px 8px 26px;} .article h2{font-size:21px;} /* 14 … 補足 */ .tri span, .svc span, .ftxt, .note, caption, .col-date, .privacy, .foot, .crumb, .art-meta, .art-src{font-size:14px;} /* 12.5 … ラベル */ .sec-h > span, .col-tag, .req, .any, .brand .sub, .work .ph small{font-size:12.5px;} .work .ph em{font-size:14px;} .work b{font-size:15px;} /* 節の上下余白を揃える（band-soft にPCの140pxが残っていた） */ /* 🔴2026-09-18：64→48（タクヤ指示で余白を詰める。PCと同じ約3割減） ⚠️WORKSの上だけは別指定（10px）。作品を最初の画面に入れるための値なので触らない。 */ .plain, .band, .band-soft, .contact{padding:48px 0;} .ground{padding:40px 0 0;} .sec-h{padding:28px 0 16px; margin-bottom:24px;} /* 2026-09-18：見出し周りも詰める */ .card-head{padding:38px 0 18px; margin-bottom:32px;} .sec-h > span{top:10px;} /* ⑤ 入力欄はスマホではさらに低く */ .field textarea{min-height:160px;} /* ② フッター下の白い空白（86px）をフッター側に移す。 固定バーはフッターの余白に重なるだけになる。 */ body{padding-bottom:0;} /* 🔴2026-09-18 タクヤ指示「フッターの下の空白」。 下の余白は固定バーに隠れないための逃げ。バーの実測は83pxなので、 26+86=112px は取りすぎだった。83+10=93px に詰める。 ⚠️バーの高さを変えたら、ここも一緒に直すこと。 */ footer{padding:22px 0 calc(10px + 83px);} /* 🔴2026-09-18 タクヤ指示。スマホ・タブレットのフッターの字を小さく。 15px → 12.5px。⚠️本文の19pxとは役割が違う（署名と著作権表記）ので、 ここだけは小さくしてよい。 */ .foot, .foot *{font-size:12.5px; line-height:1.7;} /* バーが引っ込んでいるときは逃げが要らない（空白に見えるだけ） */ body.bar-off footer{padding-bottom:22px;} } /* ── PARTNERSHIP（継続してのご依頼） 2026-08-23 ───────── ⚠️SERVICEと同じカードにしない。左のピンクの太い罫で別の作りにする。 */ .pt-row{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;} /* ⚠️節の地が白になったので、カードは淡ピンクにしないと消える。 */ .pt{background:var(--pink-mist); border-radius:14px; padding:30px 28px; border-left:6px solid var(--pink);} .pt b{display:block; font-size:19px; color:var(--navy); line-height:1.5;} .pt span{display:block; font-size:16px; color:var(--ink-2); line-height:1.95; margin-top:12px;} @media (max-width:1100px){ .pt-row{grid-template-columns:1fr; gap:16px;} } @media (max-width:760px){ .pt{padding:24px 22px; border-left-width:5px;} .pt b{font-size:17px;} .pt span{font-size:15px; margin-top:8px;} } /* ── ヒーローの幅ごとの見え方（2026-08-23 総当たりで作り直し） ────── 幅を22段階で測ったところ、**761〜1100px でキャラが320pxまで縮んで 中央に置かれ**、広い画面なのに間延びしていた。 区切りが1100pxと760pxの2段で、その間がスマホ用のままだったため。 ⚠️区切りを **901px の1本**にまとめる。中途半端な幅を残さない。 */ @media (min-width:901px){ /* 🔴2026-08-27：もう少し下へ（タクヤ指示）。 */ /* 🔴2026-08-27：少し大きく・少し下に（タクヤ指示）。 */ .hero-char{position:absolute; right:4.7%; bottom:-215px; width:780px; margin:0; z-index:2;} .hero-copy{max-width:min(46%,620px);} .hero-dots{display:block;} } @media (max-width:767px){ .hero{padding:0; overflow:hidden;} .hero-copy{max-width:none;} /* 🔴2026-08-27：キャラは**右上に小さく**（タクヤ指示）。 ⚠️絶対配置だと文字をよけないので PROMOTION に被った。float にする。 float なら、キャラの高さを過ぎた行から幅いっぱいに戻る。 */ /* 🔴2026-08-27：文字と被ってよいので大きくする（タクヤ指示）。 回り込みをやめて絶対配置に戻す。 */ .hero-char{position:absolute; right:-28px; top:-20px; bottom:auto; float:none; width:230px; margin:0; z-index:0;} .hero-dots{display:none;} .display span{font-size:40px;} } /* ── 実機で見て見つけた不具合の修正（2026-08-23） ───────── ① 飛び先の見出しが**固定ヘッダーの下に隠れていた**。 1024pxで SERVICE、768pxで FLOW の見出しが消えていた（スクショで確認）。 ⚠️ヘッダーの高さ（PC96px／スマホ78px）＋余白ぶんだけ手前で止める。 */ [id]{scroll-margin-top:calc(var(--head-h) + 16px);} /* ② FLOWが768pxで4列のまま。1項目170px幅で説明が3〜4行に折れていた。 */ @media (max-width:900px) and (min-width:761px){ .flow-row{grid-template-columns:repeat(2,1fr); row-gap:44px;} /* 2列にすると横線が段をまたいでしまうので、線は消して番号だけで見せる */ .flow-row::before{display:none;} } /* ③ CONTACTのキャラが768pxで幅620px・高さ740pxまで膨らんでいた。 縦積みになると1列の幅いっぱいに広がるため。フォームより先に巨大な絵が出る。 */ @media (max-width:1100px){ .contact-char{width:min(58%,340px); margin:14px 0 0 auto;} } /* ④ 「← 記事一覧へ戻る」は移動のためのリンク。当たり判定を広げる。 */ .art-back{margin-top:40px;} .art-back a{display:inline-flex; align-items:center; min-height:46px; padding:0 18px 0 4px; border-radius:999px; text-decoration:underline;} .art-back a:hover{color:var(--pink-deep); background:var(--pink-mist); text-decoration:none;} /* 🔴2026-08-23：実績の写真が入った枠。 ⚠️斜線の仮置きと違い、地も余白も要らない。画像で埋める。 */ .work .ph.is-photo{background:none; border-color:var(--line); padding:0;} /* 🔴2026-08-30：作品はぜんぶ**紙の比 1:√2**にそろえる（タクヤ指示）。 A判もB判も比は同じなので、A1でもB1でもこの1つでそろう。 ⚠️前は枠が .72 で cover だったため、上下がそれぞれ0.79%（元画像で10px） 落ちていた（6点すべて）。枠と画像を同じ比にしたので今は切れない。 ⚠️**新しい作品もこの比に整えてから置くこと。** 比が違うまま入れると cover が黙って切る。 整え方：中央から数px切るだけ。潰さない（normalize_works.py と同じやり方）。 ⚠️「掲載予定」の枠は .ph のまま（aspect-ratio:.72）。中身が文字なので触らない。 */ .work .ph.is-photo{aspect-ratio:1 / 1.41421;} .work .ph.is-photo img{width:100%; height:100%; object-fit:cover; display:block;} /* ③ 答えが開くときの軽い動き（2026-08-23） ⚠️
の高さは素では動かせないので、**中身の見え方**で動きを作る。 ⚠️「動きを減らす」設定の人には出さない。 */ details[open] > p{animation:faqOpen .3s cubic-bezier(.2,.7,.2,1);} @keyframes faqOpen{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;} } /* ＋／− の印も回して、開閉が分かるようにする */ summary::after{transition:transform .3s cubic-bezier(.2,.7,.2,1);} details[open] summary::after{transform:rotate(180deg);} @media (prefers-reduced-motion:reduce){ details[open] > p{animation:none;} summary::after, details[open] summary::after{transition:none; transform:none;} } /* ① いま見ている節のリンク（引き出しメニュー側） */ .spnav a[aria-current]{color:var(--pink);} .spnav a[aria-current] span{color:var(--pink-deep);} /* ── 右下に固定するバナー（2026-08-26） ───────────── ⚠️スマホは下部固定バーと場所が重なるので出さない。 ⚠️本文の上に乗るので、閉じられるようにしてある。 */ .fixbanner{position:fixed; right:20px; bottom:20px; z-index:65; /* 🔴2026-08-27：角丸を緩く（タクヤ指示）。 ⚠️画像そのものにも角丸が焼き込まれているので、 CSS側が小さいと二重に見える。画像の丸みに寄せる。 */ width:230px; border-radius:5px; overflow:hidden; box-shadow:0 18px 40px -18px rgba(20,16,26,.55); transition:transform .25s, box-shadow .25s;} .fixbanner:hover{transform:translateY(-3px); box-shadow:0 24px 48px -18px rgba(20,16,26,.6);} .fixbanner img{display:block; width:100%; height:auto;} .fixbanner__x{position:absolute; right:6px; top:6px; width:26px; height:26px; border:0; border-radius:999px; cursor:pointer; line-height:1; background:rgba(0,0,0,.55); color:#fff; font-size:16px; display:grid; place-items:center;} .fixbanner__x:hover{background:rgba(0,0,0,.8);} @media (max-width:1100px){ .fixbanner{width:190px;} } @media (max-width:760px){ .fixbanner{display:none;} } @media (prefers-reduced-motion:reduce){ .fixbanner:hover{transform:none;} } /* ── タブでまとめたエリア（2026-08-26） ───────────── PRICE / SERVICE / FLOW / PARTNERSHIP / ABOUT / FAQ を1か所に。 ⚠️タブは6つ。スマホでは横に溢れるので横スクロールにする。 ⚠️隠れているタブの中身にも出現アニメの対象がある。 表示に切り替えた時に出す（JS側で処理）。 */ .tabs{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:44px; border-bottom:1px solid var(--line); scrollbar-width:none;} .tabs::-webkit-scrollbar{display:none;} .tabs__b{flex:0 0 auto; border:0; background:none; cursor:pointer; padding:14px 22px 16px; border-bottom:3px solid transparent; text-align:left; color:var(--ink-3); transition:color .2s, border-color .2s;} .tabs__b b{display:block; font-family:var(--en); font-size:17px; letter-spacing:.08em; line-height:1.3;} .tabs__b span{display:block; font-size:12.5px; margin-top:3px;} .tabs__b:hover{color:var(--navy);} .tabs__b.is-on{color:var(--navy); border-bottom-color:var(--pink);} .tabs__b.is-on span{color:var(--pink);} .tabs__b:focus-visible{outline:2px solid var(--pink); outline-offset:2px;} /* 🔴2026-08-31：761〜900px で ABOUT のタブが画面の外に出ていた。 横スクロールでは届くが、切れていることに気づけない。 ⚠️この幅だけ左右の余白と字間を詰めて、6つとも収める。 */ @media (min-width:761px) and (max-width:980px){ .tabs{gap:2px;} .tabs__b{padding:14px 10px 16px;} .tabs__b b{font-size:15px; letter-spacing:.03em;} .tabs__b span{font-size:11.5px;} } .pane[hidden]{display:none;} /* ⚠️まとめたので、中の見出しは重複して大きすぎる。少し抑える */ #info .sec-h{padding-top:0; border-bottom:0; margin-bottom:26px;} #info .sec-h::before{display:none;} #info .sec-h h2{font-size:26px;} #info .sec-h > span{position:static; display:block; margin-bottom:6px;} @media (max-width:760px){ /* 🔴2026-08-27：横スクロールだと「まだ続く」と分からず、 切れているようにしか見えない（タクヤ指摘）。折り返して全部見せる。 */ /* 🔴2026-09-18 タクヤ指示「ここきれいに並べたい」。 ⚠️折り返し（flex-wrap）はやめる。最後の行の札だけ伸びて、 幅が68〜280pxまでバラついていた（実測）。折り返し位置も 画面幅で変わっていた（320=3/2/1、390=3/3、430=4/2）。 ⚠️2列にする理由：3列だと320pxで1枠92pxしか取れず 「PARTNERSHIP」が入らない。 ⚠️下線（選択中の印）は枠いっぱいに出す。中央寄せだと選択位置が分かりにくい。 */ .tabs{display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:visible; margin-bottom:26px; padding-bottom:0; border-bottom:1px solid var(--line);} .tabs__b{padding:11px 10px 10px; text-align:center; border-top:1px solid var(--line); border-bottom:3px solid transparent; min-height:52px;} /* ⚠️2026-09-18：上の2つの線を消していたが、.tabs に border-top が無いので 二重にはならなかった。PRICE と FLOW の上だけ線が無い状態になっていた（タクヤ指摘）。 全部に引く。 */ /* 左の列だけ右に仕切りを入れる */ .tabs__b:nth-child(odd){border-right:1px solid var(--line);} .tabs__b b{font-size:14px; letter-spacing:.04em;} .tabs__b span{font-size:12px; margin-top:1px;} #info .sec-h h2{font-size:22px;} } /* ── ヒーローをまるごと拡大縮小（2026-08-26） ───────────── 文字も画像も位置関係を保ったまま、全体が同じ比率で変わる。 ⚠️901px以上だけ。900px以下で同じことをすると、17pxの文字が5px以下になる。 */ /* ⚠️901pxまで縮めると本文が11.9pxになって読めない（実測）。 切り替えを **1120px** にする。ここで本文14.8px・見出し59pxを保てる。 */ @media (min-width:768px){ .hero{padding:0; overflow:hidden;} .hero-stage{width:1440px; transform-origin:top left; padding:72px 0 96px; position:relative;} /* 台の中は「幅1440pxの画面」として組む＝今までと同じ見え方 */ .hero-inner{max-width:1400px; margin:0 auto; padding:0 40px;} } /* ── 帯ごとの「台」（2026-08-26） ─────────────────── PC 1440 / タブレット 1024 / スマホ 390 を基準に組み、台ごと拡大縮小する。 ⚠️**台の中で vw を使わない。** vw は本物の画面幅を指すので、 拡大縮小と二重にかかって組み方が崩れる。すべて固定pxにする。 */ /* タブレット：768〜1119px（基準1024px・横並び） */ @media (min-width:768px) and (max-width:1119px){ /* ⚠️基準1024だと帯の下端(768px)で本文が11.6pxになった（実測）。 基準を896に下げ、文字を上げる。下端でも本文14.6pxを保てる。 */ .hero-stage{width:896px; padding:52px 0 64px;} .hero-inner{max-width:896px; padding:0 36px;} .hero-copy{max-width:462px;} .hero-copy .lead-jp{font-size:29px;} .display span{font-size:64px; line-height:1.02;} /* ⚠️22文字。折り返さないよう、枠(462px)に収まる大きさにする。 20px×22 = 440px < 462px。これ以上大きくすると2行になる。 */ .hero-copy .desc{font-size:18px;} /* 🔴2026-08-27：もっと下へ（タクヤ指示）。 ⚠️基準は .hero-inner（文章の箱）。ヒーロー全体ではない。 bottom を増やすと上へ動いて頭が切れる。下げるには**負の値**にする。 */ /* 🔴2026-08-27：もっと上・少し大きく（タクヤ指示）。 ⚠️基準は .hero-inner。bottom を**増やす**と上へ動く。 */ /* 🔴2026-08-27：もう少し下へ（タクヤ指示）。下げるには**負の値**を増やす。 */ .hero-char{position:absolute; right:1%; bottom:-44px; width:492px; margin:0;} /* 🔴2026-08-27：3項目に角丸の白背景（タクヤ指示・タブレットだけ）。 ⚠️余白を足すと中身の幅が減る。gapを22→14に詰めて取り返す。 枠462 −(14×2) ＝434 ÷3 ＝144.7、内側は 144.7−24 ＝120.7px。 */ /* ⚠️カードの帯はキャラの縦56〜79%にあたり、そこは**スカートが一番広がる**位置。 枠いっぱい(462px)だと絵に約90px食い込む。400pxに詰めて食い込みを30px程度にする。 ⚠️さらに**文字側に重ね順が無かった**（スマホには入れてあったがタブレットは抜けていた）。 絶対配置のキャラが上に描かれ、3つ目の文字が隠れていた。 */ .tri{display:flex; flex-wrap:nowrap; gap:14px; margin:30px 0; max-width:400px; position:relative; z-index:1;} .tri > div{flex:1 1 0; min-width:0; display:block; border:0; background:var(--paper); border-radius:12px; padding:14px 12px; box-shadow:0 6px 18px -12px rgba(20,16,26,.35);} .tri > div:first-child{border-top:0;} .tri svg{width:26px; height:26px; margin-bottom:8px; grid-row:auto;} .tri b{font-size:13.5px;} .tri b br{display:inline;} .tri span{font-size:12px;} /* ⚠️実測 223+248+12=483px。コピー幅420pxに入らず折り返していた。 折り返しを禁止し、余白と文字を詰めて収める。 */ .btns{display:flex; gap:10px; flex-wrap:nowrap;} .btns .btn{width:auto; padding:13px 18px; font-size:15px; white-space:nowrap; gap:8px;} .hero-dots{display:block; right:1%; bottom:6%; width:260px; height:44%;} } /* スマホ：767px以下（基準390px・縦積み） */ @media (max-width:767px){ .hero-stage{width:390px; padding:28px 0 40px;} .hero-inner{max-width:390px; padding:0 20px;} .hero-copy{max-width:none;} .hero-copy .lead-jp{font-size:22px; line-height:1.5;} .display span{font-size:40px; line-height:1.06;} .hero-copy .desc{font-size:17px;} /* 🔴2026-08-27：右上に小さく（float で回り込ませる）。 */ /* 🔴2026-08-27：文字と被ってよいので大きくする（タクヤ指示）。 回り込みをやめて絶対配置に戻す。 */ .hero-char{position:absolute; right:-28px; top:-20px; bottom:auto; float:none; width:230px; margin:0; z-index:0;} .hero-dots{display:none;} .btns .btn{width:100%; justify-content:center; font-size:16px;} } /* ── スマホ：キャラを右上に置いたことに伴う調整（2026-08-27） ────── ⚠️キャラ150pxが右上に乗るので、リードはその左に収める。 ⚠️大見出しと説明文はキャラより下なので、幅いっぱい使ってよい。 */ @media (max-width:767px){ .hero-inner{position:relative;} .hero-copy .lead-jp{font-size:21px; line-height:1.5;} .display{margin:14px 0 22px;} .hero-copy .desc{margin-top:0;} } /* ⚠️回り込みを 3点・ボタンまで引きずらない。ここで切る。 */ @media (max-width:767px){ .tri{clear:both;} } /* ⚠️キャラの左に「PROMOTION」を収めるため、見出しを35pxにする。 40pxのままだと42pxはみ出してキャラに被る（実測）。 */ @media (max-width:767px){ .display span{font-size:35px; line-height:1.08;} } /* ── スマホ：キャラを文字の後ろに敷く（2026-08-27） ───────── ⚠️絶対配置の要素は、静的な兄弟の**上**に描かれる。 文字側にも重ね順を与えないと、キャラが文字を隠す。 ⚠️見出しは40pxに戻す（回り込みの制約が無くなったため）。 */ @media (max-width:767px){ .hero-inner{position:relative;} .hero-copy .lead-jp, .hero-copy .display, .hero-copy .desc, .hero-copy .tri, .hero-copy .btns{position:relative; z-index:1;} .display span{font-size:40px; line-height:1.06;} .hero-copy .lead-jp{font-size:22px;} .tri{clear:none;} } /* ── 🔴2026-08-27：台の拡大縮小の基点（重大） ───────────── PCの指定にしか transform-origin を書いていなかった。 既定値は「中心」なので、スマホとタブレットは**中心から**縮んでいた。 結果： 360px端末 台が 15〜375 に来て、左33px・右3px と左右が食い違う 430px端末 上へずれて**ヒーローの上が切れる** ⚠️基点は全帯で top left。ここを外すと位置が全部ずれる。 */ .hero-stage{transform-origin:top left;} /* ── スマホ：説明文を小さく／キャラを3点の手前で止める（2026-08-27） */ @media (max-width:767px){ .hero-copy .desc{font-size:14px; line-height:1.85;} /* 🔴2026-08-27：もう少し大きく、もう少し左へ（タクヤ指示）。 ⚠️大きくすると3点に近づくので、上へずらして逃がす。 */ .hero-char{width:215px; top:-18px; right:4px;} } /* ── 🔴2026-08-27：スマホでキャラの上に白を敷く（タクヤ選択A） ────── 文字とキャラが重なって読めなくなっていた。 ⚠️キャラ(z-index 0)と文字(z-index 1)の**間**の重ね順は作れないので、 キャラの内側に白のグラデーションを重ねる。 描く順が 絵 → 白 → 文字 になり、絵の大きさを変えずに読めるようになる。 ⚠️左（文字がある側）を濃く、右（絵を見せたい側）を透明に。 */ @media (max-width:767px){ .hero-char{position:absolute;} /* 🔴2026-08-27：キャラにかける白は廃止（タクヤ指示）。 */ } /* ⚠️キャラを215pxに大きくしたら3点に23px被った（実測）。 キャラを上へ逃がすと帽子が切れるので、**3点の側を下げて**間を作る。 */ @media (max-width:767px){ /* ⚠️文字を小さくすると3点が上がってキャラに被る。実測13px。 文字サイズを変えるたびにここも見直すこと。 */ .tri{margin-top:92px;} } /* ── 🔴2026-08-27：スマホのヒーロー（タクヤ指示） ───────────── ・文字をひと回り小さく ・WORKSと相談のボタンを横並びに ⚠️台の中なので固定px。横並びは幅350pxに2つ入れるため、余白と文字を詰める。 */ @media (max-width:767px){ .hero-copy .lead-jp{font-size:20px;} .display span{font-size:35px; line-height:1.08;} .hero-copy .desc{font-size:13px; line-height:1.85;} .btns{display:flex; flex-wrap:nowrap; gap:10px;} .btns .btn{flex:1 1 0; width:auto; min-width:0; padding:14px 8px; font-size:13px; gap:6px; white-space:nowrap; justify-content:center;} } /* ── 🔴2026-08-27：スマホのヒーローの文字を小さく（タクヤ指示） ────── ⚠️小さくすると3点が上がってキャラに被る。間隔も一緒に見直す。 */ @media (max-width:767px){ .hero-copy .lead-jp{font-size:18px;} .display span{font-size:31px; line-height:1.08;} .hero-copy .desc{font-size:12px; line-height:1.85;} .tri{margin-top:104px;} } /* ── 🔴2026-08-27：スマホのヒーロー仕上げ（タクヤ指示） ───────── ・説明文はスマホだけ「魅力を、」で改行する ・説明文の下の空白を削る。キャラの下は切ってよい ⚠️白を消したうえに間隔も詰めるので、キャラが3点まで届く。 高さを抑えて下を切る。ただし真横にスパッと切ると壊れて見えるので、 **下端をぼかして消す**（mask）。 */ .br-sp{display:none;} @media (max-width:767px){ .br-sp{display:inline;} /* 🔴2026-08-27：下のぼかしを無くす（タクヤ指示）。まっすぐ切る。 */ /* 🔴2026-08-28：切る位置をもう少し下へ（タクヤ指示）196→225px。 ⚠️実測で225pxが3項目に当たらない上限（390px幅で下端293 / 3項目の上292）。 これ以上下げると3項目に重なる。 */ .hero-char{height:225px; overflow:hidden; -webkit-mask-image:none; mask-image:none;} .tri{margin-top:22px;} } /* 🔴2026-08-27：スマホのキャラを少し上へ（タクヤ指示）。 */ @media (max-width:767px){ .hero-char{top:-38px;} } /* ── 🔴2026-08-27：引き出しメニューのフェード（タクヤ指示） ────── ⚠️[hidden] で display を切り替えているので transition は効かない。 **表示された瞬間に走る animation** を使う。 ⚠️「動きを減らす」設定の人には出さない。 */ .spnav{animation:spnavIn .3s cubic-bezier(.2,.7,.2,1);} @keyframes spnavIn{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:none;} } .spnav a{animation:spnavItem .42s cubic-bezier(.2,.7,.2,1) both;} @keyframes spnavItem{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;} } .spnav a:nth-of-type(1){animation-delay:.04s;} .spnav a:nth-of-type(2){animation-delay:.08s;} .spnav a:nth-of-type(3){animation-delay:.12s;} .spnav a:nth-of-type(4){animation-delay:.16s;} .spnav a:nth-of-type(5){animation-delay:.20s;} .spnav a:nth-of-type(6){animation-delay:.24s;} .spnav a:nth-of-type(7){animation-delay:.28s;} .spnav a:nth-of-type(8){animation-delay:.32s;} /* ── 🔴2026-08-27：下部固定バーの見た目 ───────────────── ⚠️触る所は44px以上を保つ。 */ .spbar-btn{display:flex; align-items:center; gap:12px; padding:11px 16px; border-radius:999px; min-height:52px; background:var(--pink); color:#fff; text-decoration:none; box-shadow:0 14px 28px -16px rgba(243,96,135,.95); transition:background-color .22s, color .22s, box-shadow .22s;} .spbar-btn svg{flex:0 0 auto; opacity:.95;} .spbar-txt{flex:1 1 auto; min-width:0; line-height:1.25;} .spbar-txt b{display:block; font-size:16px; font-weight:800; letter-spacing:.02em;} .spbar-txt small{display:block; font-size:11.5px; opacity:.9; margin-top:2px;} .spbar-arw{flex:0 0 auto; font-size:17px; opacity:.95;} @media (prefers-reduced-motion:reduce){ .spnav, .spnav a{animation:none;} .spbar-btn:hover{box-shadow:inset 0 0 0 2px var(--pink);} } /* ── 🔴2026-08-27：スマホの微調整（タクヤ指示）─────────── ⚠️文字の大きさは上の「16/14に揃える」指定より**後ろ**に置く。 先に書くと打ち消される（.tri b は 0,1,1 で同じ強さ）。 */ .price-cta{margin-top:30px;} /* 🔴2026-08-27：タブレットも中央に（タクヤ指示）。767→1100に広げた。 */ @media (max-width:1100px){ /* ② 料金表の下のボタンを中央に。.btn は inline-flex なので親で寄せる */ .price-cta{text-align:center;} } @media (max-width:767px){ /* ③ 3点（訴求力／入稿データ／短納期）の文字を小さく */ /* 🔴2026-09-18 タクヤ指示「もう少し小さくていい」。 14/12.5 → 13/12。あわせて印と行の余白も詰め、3行ぶんの背を縮める。 ⚠️説明文は12pxで止める。これ以下は点検で「小さすぎる文字」に出る。 */ /* 🔴2026-09-18（2回目）タクヤ指示「もう少し小さくていい」。13/12 → 12/11。 */ /* 🔴2026-09-19 タクヤ指示「ここは少し大きくしていい」。12/11 → 13/12（一段戻す）。 */ .tri b{font-size:13px; line-height:1.35;} .tri span{font-size:12px; line-height:1.4;} .tri svg{width:16px; height:16px;} .tri > div{grid-template-columns:17px 1fr; column-gap:8px; padding:4px 0;} } /* ── 🔴2026-08-27：引き出しメニュー中は下の固定バーを隠す（タクヤ指示） 同じ「ご相談・お見積り」が二重に出て重なっていた。 */ body.nav-open .sp-bar{display:none;} /* ── 🔴2026-08-27：スマホ ヒーローの説明文をもう少し上へ（タクヤ指示） */ @media (max-width:767px){ .hero-copy .desc{margin-top:-10px;} } /* ── 🔴2026-08-27：CONTACT もヒーローと同じ「1枚の絵」方式（タクヤ指示） スマホ・タブレットは 左に文章／右にキャラ を台に載せ、台ごと縮める。 ⚠️基点は top left。既定の「中心」だと左右にずれる（ヒーローで踏んだ罠）。 ⚠️台の中では vw を使わない。画面幅を参照するので倍率と二重にかかる。 ⚠️1101px以上は今までどおり2段組み。台は素通しにする。 */ .contact-stage{transform-origin:top left;} @media (min-width:1101px){ /* 元の見え方を保つ：縦に積んで、キャラを下端へ寄せる */ .contact-stage{display:flex; flex-direction:column; flex:1 1 auto;} /* 🔴2026-08-27：CONTACT下の空白をなくす（タクヤ指示）。 列の高さがキャラ(785px)で決まり、フォーム(703px)の下に空白が出ていた。 ⚠️上限はJSでフォームの高さから逆算して入れる（文章量で変わるため）。 足は切れてよい（タクヤ了承）。 */ /* 🔴2026-08-27：少し大きく・少し上へ（タクヤ指示）。 ⚠️下寄せ(margin-top:auto)のままだと、大きくしても下に伸びるだけで上へ行かない。 絶対配置にして、起点（top）をJSで「文章の下端−40px」に置く。 ⚠️切るのは clip-path。**下と左だけ**切り、上と右は外に出せるようにする （overflow:hidden だと頭が切れる）。 ⚠️幅は列より30px広げ、フォームとの隙間(52px)の中へ寄せる。はみ出さない。 */ /* 🔴2026-08-27：キャラはフッターの線で切る（タクヤ指示）。 ⚠️clip-path は**見た目を切るだけで、はみ出しはページの高さに残る**。 そのためフッターの下に177pxの空白が出ていた（実測）。 節に overflow:hidden を掛けると、見た目も高さも節の下端で止まる。 */ .contact{overflow:hidden;} .contact-left{position:relative;} /* 🔴2026-08-27：吹き出しをキャラより手前に（タクヤ指示）。 ⚠️絶対配置のキャラは静的な兄弟より手前に描かれる。 文章側にも重ね順を与えないと隠れる。 */ .contact-copy{position:relative; z-index:1;} .contact-left .contact-char{z-index:0;} /* ⚠️right を負にすると画面の右端(28px)を越えて横スクロールが出た。 右端は列に合わせたまま、**左へ広げる**（フォームとの隙間52pxの中）。 */ .contact-left .contact-char{position:absolute; right:0; bottom:auto; width:calc(100% + 30px); max-width:none; margin:0; overflow:visible;} } /* 🔴2026-08-27：CONTACTの下に少し空白を戻す（タクヤ指示）。 */ @media (min-width:1101px){ .contact{padding-bottom:44px;} } /* ⚠️grid の 1fr は min-content より小さくならない。 台に幅を入れると列がそこまで広がり、空き幅を測り間違える（768pxで実際に起きた）。 */ .contact-grid > *{min-width:0;} @media (max-width:1100px){ /* ⚠️キャラを絶対配置にすると台の高さに数えられず、下のフォームに被る。 **flexで横並び**にして、高さは「文章とキャラの高い方」に任せる。 */ /* ⚠️flex-shrink:0 が要る。箱に高さを入れるので、 既定(1)のままだと台が押し縮められて中身が切れる。 */ .contact-stage{display:flex; align-items:flex-start; flex-shrink:0;} .contact-copy{position:relative; z-index:1; flex:0 0 auto;} /* ⚠️.contact-left .contact-char（0,2,0）で margin-top:auto が入っている。 同じ強さで書かないと打ち消せない。 */ /* ⚠️**flexの子は position:static でも z-index が効く**（仕様）。 キャラに z-index:2 が入っているので、そのままだと文章より手前に来て 吹き出しの「！」を隠していた。文章を手前にする。 */ .contact-left .contact-char{position:static; margin:0; flex:0 0 auto; z-index:0;} } /* タブレット（基準840px＝896px画面の中身幅）。470+40+330=840 */ @media (min-width:768px) and (max-width:1100px){ .contact-stage{width:840px;} .contact-copy{width:470px;} /* 🔴2026-08-27：文字の下に空白が出るので、キャラの下を切る（タクヤ指示）。 ⚠️文章は倍率なしで約200px。240pxにすると余りは40px前後に収まる。 元画像は330px幅で418px高なので、下から178pxを落とす。 */ /* 🔴2026-08-27：大きくして、エリアの下端で消えるようにする（タクヤ指示）。 ⚠️絶対配置にすると台の高さに数えられない。**台に overflow:hidden が必須**。 無いと下のフォームに被る（前回そうなった）。 ⚠️台の高さは文章だけで決まる。キャラはそこからはみ出したぶんが切れる。 */ /* ⚠️overflow:hidden だと上も切れて帽子が欠ける。 clip-path で**下と左だけ**切る（上と右は外に出せる）。 */ .contact-stage{overflow:visible; clip-path:inset(-2000px -2000px 0 0);} /* 🔴2026-08-27：もう少し上へ（タクヤ指示）。上は切れないので頭は出たまま。 */ .contact-left .contact-char{position:absolute; right:0; top:-40px; width:420px; height:auto; margin:0; overflow:visible;} /* 🔴2026-08-27：3つの文を大きく（タクヤ指示）。 ⚠️元の指定は clamp(24px,2.9vw,34px)。**台の中で vw を使うと倍率と二重にかかる**。 タブレット帯は px で固定する。 */ /* 🔴2026-08-27：さらに大きく（タクヤ指示）。 ⚠️見出しは11文字。文章幅470pxなので 470÷11＝42px まで1行に収まる。 */ .contact-left .msg{font-size:34px; line-height:1.5; margin-bottom:18px;} .contact-left .sub{font-size:21px; line-height:1.9;} .bubble{font-size:22px;} } /* スマホ（基準334px＝390px画面の中身幅） ⚠️334pxに並べると文章が細くなる。ヒーローと同じく**少し重ねて**、 文章を手前に置く。200-26+160=334 */ @media (max-width:767px){ .contact-stage{width:334px;} /* 🔴2026-08-27：見出しを1行にする（タクヤ指示）。 ⚠️「お見積りは、無料です。」は11文字。1行に収めるには 文章幅÷11 が上限。 210÷11＝19.09 なので19px。広げたぶんキャラを150pxに詰める （210−26＋150＝334で台幅ちょうど）。 */ .contact-copy{width:210px;} /* ⚠️Noto Sans JP(900) は今までのフォントより字幅が広い。 19pxだと210pxの枠に入らず2行になった（実測）。18pxで幅200px＝1行。 */ .contact-left .msg{font-size:18px; line-height:1.45; margin-bottom:10px;} /* ⚠️13pxだと5行になり、最後が「ん。」の2文字だけになる（実測）。 12.6pxで4行に収まり、最終行も15文字残る。 */ .contact-left .sub{font-size:12.6px; line-height:1.8;} /* ⚠️15文字。文章幅200pxの中身(172px)には入らず2行に折れていた。 1行に固定する。右へ少しはみ出すが、キャラの下端より下なので当たらない。 */ /* 🔴2026-08-27：吹き出しをやめてただの文字に／上に詰める（タクヤ指示）。 */ /* ⚠️12.5px×15文字＝188px。左右の余白を13pxにして 214px に収める （文章幅210pxを4pxだけ出るが、キャラの下端より下なので当たらない）。 */ .bubble{font-size:12.5px; white-space:nowrap; margin-top:6px; padding:5px 12px;} /* 🔴2026-08-27：大きくして、エリアの下端で消えるようにする（タクヤ指示）。 タブレットと同じ作り。⚠️絶対配置なので台の overflow:hidden が要る。 */ /* ⚠️切り取りは下と左だけ。右に出しても切れないようにする。 */ .contact-stage{overflow:visible; clip-path:inset(-2000px -2000px 0 0);} /* 🔴2026-08-27：少し右へ（タクヤ指示）。左右28pxの余白の中に収める。 */ /* ⚠️右へのはみ出しは**倍率で拡大される**。767pxでは倍率2.13倍になり、 -14px が 30px に膨らんで画面余白28pxを超え、横スクロールが出た（実測）。 -12px なら最大でも25.5pxで収まる。 */ .contact-left .contact-char{position:absolute; right:-12px; top:0; width:175px; height:auto; margin:0; overflow:visible;} } /* ── 🔴2026-08-27：スマホ・タブレットの調整（タクヤ指示）───────── */ @media (max-width:1100px){ /* ① しっぽ（吹き出しの三角）は消す。⚠️白い背景は残す（タクヤ指示 その4）。 */ .bubble{background:var(--paper); box-shadow:none; padding:7px 16px; border-radius:10px; margin-top:10px;} .bubble::after{display:none;} /* ② 入力欄の縦を低くする ⚠️文字は16px未満にしない。**iOSが勝手に画面を拡大する**。 低くするのは padding と min-height で行う。 */ .field input,.field textarea,.field select{font-size:16px; padding:10px 14px;} .field{margin-bottom:14px;} .field label{margin-bottom:5px;} .field textarea{min-height:120px;} .frow{gap:14px;} .form{padding:26px;} } /* ⚠️760px帯の .field textarea{min-height:160px} を上書きする（後勝ち） */ @media (max-width:760px){ .field textarea{min-height:110px;} } /* ── 🔴2026-08-27：CONTACTに着いたら右下バナーを引っ込める（タクヤ指示） */ .fixbanner{opacity:1; transition:transform .25s, box-shadow .25s, opacity .25s;} .fixbanner.is-hidden{opacity:0; transform:translateY(14px); pointer-events:none;} @media (prefers-reduced-motion:reduce){ .fixbanner.is-hidden{transform:none;} } /* ── 🔴2026-08-27：リンクを押したら滑って移動する（タクヤ指示） ⚠️見出しが固定ヘッダーに隠れないよう、[id] の scroll-margin-top は上で指定済み。 */ html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} } /* ── 🔴2026-08-27：引き出しメニューを閉じる時のフェード（タクヤ指示） ⚠️開く時の .spnav{animation:spnavIn} を上書きするため、 クラス2つ分（0,2,0）で強さを勝たせている。 */ .spnav.is-closing{animation:spnavOut .22s cubic-bezier(.4,0,1,1) both;} .spnav.is-closing a{animation:none;} @keyframes spnavOut{ from{opacity:1; transform:none;} to{opacity:0; transform:translateY(-10px);} } @media (prefers-reduced-motion:reduce){ .spnav.is-closing{animation:none;} } /* ── 🔴2026-08-27：PCのヒーローを詰めて、ボタンを最初の画面に入れる（タクヤ指示） ＋3項目に角丸の白カード（タブレットと同じ見た目）。 ⚠️台の中なので px で固定する。vw は台の倍率と二重にかかる。 ⚠️白カードは上下14pxぶん背が伸びる。詰める量はそれも見込んである。 ⚠️ここは1120px以上だけ。タブレット(768〜1119)は別に指定済み。 */ @media (min-width:1120px){ .hero-stage{padding:24px 0 48px;} .hero-copy .lead-jp{font-size:30px; line-height:1.45;} .display{margin:6px 0 14px;} .display span{font-size:74px; line-height:1.02;} .hero-copy .desc{font-size:19px; line-height:1.7;} /* ⚠️絶対配置のキャラは静的な兄弟より手前に描かれる。 カードに重ね順を与えないと、右のカードが隠れる（タブレットで実際に起きた）。 */ .tri{gap:20px; margin:18px 0; position:relative; z-index:1;} .tri > div{background:var(--paper); border-radius:12px; padding:14px 14px; box-shadow:0 6px 18px -12px rgba(20,16,26,.35);} .tri svg{margin-bottom:6px;} /* 🔴2026-08-27：太字の見出しはPCでは1行にする（タクヤ指示）。 ⚠️一番長いのは「入稿までしっかり対応」の10文字。 カード内側は 189−28＝161px なので、15px×10＝150px で収まる。 ⚠️
はタブレット用。PCでは消す。 */ .tri b{font-size:15px; line-height:1.55;} .tri b br{display:none;} .tri span{font-size:14px; line-height:1.55;} .btn{padding:16px 32px; font-size:17px;} /* 🔴2026-08-27：キャラをもっと下へ（タクヤ指示）。 ⚠️基準は .hero-inner（文章の箱）。bottom を**増やすと上へ**動く。 下げるには負の値を大きくする。 */ /* 🔴2026-08-28：少し大きく・右へ（タクヤ指示）。 ⚠️right を小さくすると右へ動く。.hero は overflow:hidden なので 右に出たぶんは切れる（意図どおり）。 */ .hero-char{bottom:-440px; width:850px; right:1.5%;} } /* ── 🔴2026-08-27：記事ページの本文幅を広げる（タクヤ選択：C案） 820 → 980px（本文740 → 900px）。 ⚠️1101px以上だけ。タブレット・スマホは今までどおり。 */ @media (min-width:1101px){ .wrap-narrow{max-width:980px;} } /* ── 🔴2026-08-28：パンくずの作り直し（タクヤ指摘「いろいろおかしい」） ⚠️原因：.crumb は