ではなくの直下にある。実測：body > section が14個、main.site-main > section は0個。つまりこれらのページには整頓が一度も届いていなかった。角丸6種（12/14/16/18/40px/50%）・影1種・文字サイズ18種が残存。ここで body > section 側にも同じ規則を当てる。 ========================================================= */ /* --- 角丸ゼロ・影ゼロ --- */ body > section *, body > section *::before, body > section *::after{box-shadow:none!important;border-radius:0!important} body > section .seal, body > section .fac-ic, body > section .ovid-play, body > section .khz-check, body > section .lp-ic{border-radius:50%!important} /* --- 文字色を暗い地の階調に寄せる --- */ body > section{--tx:#E2D8E8;--soft:#E2D8E8;--soft-2:#E2D8E8;--mut:#A99DB4} body > section p,body > section li,body > section dd,body > section .h-r{color:#E2D8E8} body > section small,body > section .from, body > section .note,body > section .lp-note{color:#A99DB4} html body > section .head .eng,html body > section .intro-head .eng, html body > section .eng{color:#C89A63} html body > section .head h2,html body > section h2{color:#fff} /* --- 見出しをトップと同じ寸法に --- */ body > section .head .eng,body > section .intro-head .eng{font-size:.76rem;letter-spacing:.26em;margin-bottom:12px} body > section .head .disp-s,body > section .intro-head .disp-s{display:none} body > section .head h2,body > section .intro-head h2{font-size:1.7rem;line-height:1.62} @media(max-width:900px){ body > section .head h2,body > section .intro-head h2{font-size:1.42rem} } /* --- セクション余白をトップと同じ1本に --- `body > section` は型2個（0,0,2）で、ページCSSの `.lp-gallery{padding:72px 0}` （クラス1個 = 0,1,0）に負ける。クラスは型より強いため、!important で決める。 */ body > section{padding-top:112px!important;padding-bottom:112px!important} body > section.ph,body > section.showcase{padding-top:0!important;padding-bottom:0!important} body > section.cta2{padding-top:112px!important;padding-bottom:112px!important} @media(max-width:900px){ body > section{padding-top:76px!important;padding-bottom:76px!important} body > section.ph,body > section.showcase{padding-top:0!important;padding-bottom:0!important} body > section.cta2{padding-top:76px!important;padding-bottom:76px!important} } /* 角丸の取りこぼし（.choose のプランカードなど） */ body > section .hcard,body > section .hcard-tag, body > section .lp-card,body > section .lp-item{border-radius:0!important} /* ========================================================= 25. /oiran/ のプランカードを白カードに統一トップは白カード、/oiran/ は暗い半透明パネルで、同じ2プランを 2つの見た目で見せていた。実測すると /oiran/ のカードは rgba(42,24,82,.5) が地(#2A1852)と合成されて「地と同じ色」になり、面が背景に同化して金の細罫だけで存在している状態だった。プランカードは最も押してほしい要素なので、地から明確に浮く白に揃える。白い面の階調はトップと同じ（#FBF6FA の上で全て4.5:1以上）：見出し #2A1E2E / 本文 #5E4E62 / 補助 #6E6076 ラベル金 #8A6438 / 価格・行動 #8E0C26 ========================================================= */ body > section .hcard{ background:#FBF6FA!important; border:1px solid transparent!important; overflow:hidden;transition:transform .35s} body > section .hcard:hover{transform:translateY(-4px)} body > section .hcard-b{padding:24px 26px 26px} html body > section .hcard-kicker{color:#8A6438!important; font-family:'Cormorant Garamond','Zen Kaku Gothic New',sans-serif; font-weight:600;font-size:.74rem;letter-spacing:.22em} html body > section .hcard-b h3{color:#2A1E2E!important;font-size:1.22rem;line-height:1.5; margin:10px 0 12px!important} html body > section .hcard-b > p{color:#5E4E62!important;text-shadow:none!important} /* 仕様リスト：暗い地の白文字だったので墨の階調へ。区切りは罫線1本 */ html body > section .hcard .pspec li{border-bottom:1px solid rgba(42,30,46,.12)} html body > section .hcard .pspec li span{color:#6E6076!important} html body > section .hcard .pspec li b{color:#2A1E2E!important} /* 価格：白地なので深紅。2.6rem は白地では大きすぎるので少し下げる */ html body > section .hcard-b .pprice{color:#8E0C26!important;font-size:2.1rem!important} html body > section .hcard-b .pprice span{color:#8E0C26!important} html body > section .hcard-b .pprice em{color:#6E6076!important} /* ボタン：白地に白ボタンでは沈むので深紅の塗りに */ html body > section .hcard .book.full{ background:#B01030!important;color:#fff!important; border:0!important;border-radius:0!important; padding:15px 20px!important;font-size:.78rem!important;letter-spacing:.14em} html body > section .hcard .book.full:hover{background:#C8153A!important} /* 「人気No.1」の札。白地の上なので深紅の塗りで浮かせる */ html body > section .hcard-tag{background:#8E0C26!important;color:#fff!important} @media(max-width:900px){ html body > section .hcard-b .pprice{font-size:1.8rem!important} } /* ========================================================= 26. /oiran/ に残るピンクと、光源の数・下線とホバーに旧マゼンタ #E82090 / #FF62A6 が残っていた。 :hover は画面の実測に出てこないので、CSSを直接洗い出して対応。・光源（ぼかした円）はトップで2箇所に絞ったが、この種のページには手が入っていなかった。 ========================================================= */ /* --- 下線・リンク色 --- */ html body > section .lp-good-note a, html body > section .lp-access a,html body > section .lp-acc a, html body > section .lp-faq-note a, html body > section .hubintro-link a{ color:#C89A63!important;border-bottom-color:rgba(200,154,99,.42)!important} html body > section .lp-good-note a:hover, html body > section .lp-access a:hover,html body > section .lp-acc a:hover, html body > section .lp-faq-note a:hover, html body > section .hubintro-link a:hover{ color:#E0BE92!important;border-bottom-color:#E0BE92!important} /* --- ホバー：ピンクの発光をやめる --- */ body > section .link-card:hover{ border-color:rgba(200,154,99,.62)!important;box-shadow:none!important} /* 動画の再生ボタン。マゼンタ → 深紅 */ body > section .ovid-play{background:#B01030!important} body > section .ovid-fr.lite:hover .ovid-play{background:#C8153A!important} /* 「料金に含まれるもの」の丸印 */ body > section .lp-inc-list li::before{ background:#C89A63!important;box-shadow:0 0 0 4px rgba(200,154,99,.16)!important} /* --- 光源を減らす ------------------------------------------------ トップと同じ考え方で、ページ内に2箇所まで。上寄りと下寄りに1つずつ残し、間に連続するものは消す。 */ body > section::before{display:none!important} /* ★ この一括 display:none は「光源」を消すためのもので、あとから作った .galleryband の覆いまで消していた（実測 content:normal）。覆いは装飾ではなく文字を読ませるための層なので除外する。 */ body > section.galleryband .gb-veil{display:block!important} /* ========================================================= 27. アメニティを補足の重みに落とす「パウダールームの化粧品ブランド」は補足情報だが、 112pxの余白を持つ独立セクション＋カード（面＋枠）＋280pxの写真で、プランや流れと同格に見えていた。面と枠をやめて罫線1本の帯にし、写真も小さくする。 ========================================================= */ body > section.khz-amenity-sec, main.site-main > section.khz-amenity-sec{ padding-top:52px!important;padding-bottom:52px!important} .khz-amenity{ background:none!important;border:0!important; border-top:1px solid rgba(242,232,242,.13)!important; border-bottom:1px solid rgba(242,232,242,.13)!important; padding:26px 0!important;gap:22px!important; max-width:900px} .khz-amenity-img{flex:0 0 150px!important;max-width:150px!important; border:0!important;border-radius:0!important} .khz-amenity-tag{font-family:'Cormorant Garamond','Zen Kaku Gothic New',sans-serif!important; font-style:normal!important;font-weight:600; font-size:.68rem!important;letter-spacing:.24em;text-transform:uppercase; color:#A99DB4!important;margin-bottom:8px} .khz-amenity-txt h3{font-family:'Zen Kaku Gothic New',sans-serif!important; font-weight:600!important;font-size:.92rem!important;line-height:1.7; letter-spacing:.04em;color:#E2D8E8!important;margin:0 0 8px!important} .khz-amenity-txt p{font-size:.8rem!important;line-height:1.9;color:#A99DB4!important} @media(max-width:700px){ body > section.khz-amenity-sec, main.site-main > section.khz-amenity-sec{padding-top:40px!important;padding-bottom:40px!important} .khz-amenity{gap:16px!important;padding:20px 0!important} .khz-amenity-img{flex:0 0 110px!important;max-width:110px!important} } /* ========================================================= 28. 各セクションの出口リンク（.sec-exit） LPは予約が完結するページではないので、どのセクションからも次のページへ行けるようにする。実測で「外部リンク0」の行き止まりが5セクション・2,934px（全体の27%）あった。 ========================================================= */ .sec-exit{margin:30px 0 0;text-align:left; /* リンクが2本になる節（「含まれるもの」→スタンダード／本格）があるので、縦積みできるようにしておく。1本のときの見え方は変わらない。 */ display:flex;flex-direction:column;align-items:flex-start;gap:12px} .sec-exit a{display:inline-flex;align-items:center;gap:8px; font-family:var(--jp);font-size:.82rem;font-weight:600;letter-spacing:.06em; color:#C89A63;text-decoration:none; border-bottom:1px solid rgba(200,154,99,.42);padding-bottom:4px; transition:color .3s,border-color .3s} .sec-exit a:hover{color:#E0BE92;border-color:#E0BE92} .sec-exit a i{font-style:normal;transition:transform .3s} .sec-exit a:hover i{transform:translateX(3px)} /* hubintro：散文をやめて要点2行にした箇条書き */ .hub-pts{list-style:none;margin:14px 0 0;padding:0} .hub-pts li{position:relative;padding-left:18px;margin-bottom:8px; font-family:var(--jp);font-size:.84rem;line-height:1.9;color:#E2D8E8} .hub-pts li::before{content:"";position:absolute;left:0;top:.72em; width:6px;height:6px;background:#C89A63} /* ========================================================= 29. LP の中央寄せをやめ、文字サイズを整理・中央寄せはこのページ全体の癖だった（7セクション）。サイトの他ページは左寄せなので揃える。ただし .cta2 は全ページ共通の部品なので中央のまま。・.choose だけで文字サイズが11種類あり、 11.52 / 11.84 / 12.16 のように差が見えない値が並んでいた。見える差だけを残して段を減らす。 ========================================================= */ body > section .choose-note, body > section .lp-inc-note, body > section .lp-gal-note, body > section .lp-flow-note, body > section .lp-faq-note, body > section .ovid-lead, body > section .lp-acc-in, body > section .lp-good-note, body > section .sec-exit{text-align:left!important} /* 流れのカードも左寄せに（番号だけは行頭に置く） */ body > section .lp-flow-item, body > section .lp-flow-item h3, body > section .lp-flow-item p{text-align:left!important} /* 文字サイズを段に寄せる（差の見えない値を統合） */ body > section .choose-note, body > section .lp-flow-note, body > section .lp-inc-note{font-size:.79rem!important;line-height:1.95} body > section .hcard-kicker{font-size:.74rem!important} body > section .lp-inc-list li{font-size:.85rem!important} body > section .ovid-lead{font-size:.85rem!important;line-height:1.95} body > section .lp-acc-in{font-size:.85rem!important} /* 注記は補助色に。本文と同じ濃さだと注記に見えない */ body > section .choose-note, body > section .lp-flow-note, body > section .lp-inc-note, body > section .lp-good-note{color:#A99DB4!important} /* ========================================================= 30. 内容ブロックの左端を見出しに揃える中央寄せをやめた結果、見出し・注記・出口リンクは左端(40px)に来たのに、内容ブロックだけが max-width＋margin:auto で中央に浮いたままだった（実測左180 / 220 / 250px）。結果、1セクション内に左端が2つある状態になっていた。読みやすい幅（max-width）は保ったまま、margin-left を 0 にして左端を1本に揃える。 ========================================================= */ body > section .lp-inc-list, body > section .lp-faq-list, body > section .ovid-lead, body > section .lp-flow-list, body > section .lp-acc-in, body > section .lp-good-grid{margin-left:0!important;margin-right:auto!important} /* 幅に余裕がある一覧は container いっぱいまで使う */ body > section .lp-inc-list{max-width:none!important} body > section .lp-faq-list{max-width:900px!important} body > section .ovid-lead{max-width:44em!important} /* --- /oiran/ のアクセスに地図を追加 -------------------------------- トップの .acc-map と同じ扱い（左に地図、右に情報）。以前は「地図を見る →」のリンクだけで、住所を読んでも位置が掴めなかった。 */ .lp-acc-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:stretch} .lp-acc-map-embed{position:relative;isolation:isolate;overflow:hidden;min-height:340px} .lp-acc-map-embed iframe{width:100%;height:100%;min-height:340px;border:0;display:block; filter:saturate(.82) contrast(1.03)} /* トップの地図と同じ色かぶせ（紫→赤金の2色） */ .lp-acc-map-embed::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(140deg,#7A34C0 0%,#C89A63 100%); mix-blend-mode:color;opacity:.40} .lp-acc-wrap .lp-acc-in{margin:0!important} @media(max-width:900px){ .lp-acc-wrap{grid-template-columns:1fr;gap:26px} .lp-acc-map-embed{min-height:240px} .lp-acc-map-embed iframe{min-height:240px} } /* ========================================================= 31. FAQ 回答内リンクの二重線／流れの説明文の寄せ・回答内のリンクに text-decoration:underline と border-bottom が両方乗っていて、線が2本描かれていた。サイトの下線は border-bottom に統一しているので、 text-decoration の方を落とす。色も本文の白から赤金へ。・.lp-flow のカード内の説明文が中央寄せのまま残っていた。 ========================================================= */ body > section .lp-faq a, body > section .lp-faq-item a{ text-decoration:none!important; color:#C89A63!important; border-bottom:1px solid rgba(200,154,99,.42)!important; padding-bottom:2px} body > section .lp-faq a:hover, body > section .lp-faq-item a:hover{ color:#E0BE92!important;border-bottom-color:#E0BE92!important} /* 流れのカード。カード本体はクラスの無い

なので、 .lp-flow 配下の li と中身をまとめて左寄せにする。 */ /* ※ .lp-flow はセクション自身。`section .lp-flow`（子孫）では当たらない。 `section.lp-flow`（同一要素）と書くこと。 */ body > section.lp-flow li, body > section.lp-flow li *, body > section.lp-flow .lp-flow-steps{text-align:left!important} /* カップルLP固有セクションの中央寄せ解除（/oiran/ と同じ扱い） */ body > section.cpl-pair, body > section.cpl-pair *, body > section.couple .cpl-role, body > section .cpl-shots-grid, body > section .cpl-shots-grid *{text-align:left!important} /* ギャラリーに統合した「撮れる写真」の3項目 */ .cpl-shots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:34px 0 0; padding-top:26px;border-top:1px solid rgba(242,232,242,.13)} .cpl-shots-grid h3{font-family:var(--min);font-weight:600;font-size:1rem;letter-spacing:.06em; color:#fff;margin:0 0 8px} .cpl-shots-grid p{font-family:var(--jp);font-size:.8rem;line-height:1.9;color:#E2D8E8;margin:0} @media(max-width:760px){ .cpl-shots-grid{grid-template-columns:1fr;gap:18px} } /* ギャラリーへの導線を3本に分けたので、縦に並べて等間隔に */ .lp-gal-note{display:flex;flex-direction:column;align-items:flex-start;gap:12px; margin-top:30px!important} .lp-gal-note a{display:inline-flex;align-items:center;gap:8px; font-family:var(--jp);font-size:.82rem;font-weight:600;letter-spacing:.06em; color:#C89A63!important;text-decoration:none!important; border-bottom:1px solid rgba(200,154,99,.42)!important;padding-bottom:4px; transition:color .3s,border-color .3s} .lp-gal-note a:hover{color:#E0BE92!important;border-bottom-color:#E0BE92!important} .lp-gal-note a i{font-style:normal;transition:transform .3s} .lp-gal-note a:hover i{transform:translateX(3px)} /* ========================================================= 32. 男性撮影（.addon）を白カードに揃える女性プラン（.hcard）は白カード、男性撮影（.addon）は rgba(255,255,255,.055) の暗いカードで、同じ「選ぶ」行為なのに見た目が別物だった。白カードの階調に統一する。見出し #2A1E2E / 本文 #5E4E62 / 補助 #6E6076 ラベル金 #8A6438 / 価格・行動 #8E0C26 ========================================================= */ body > section .addon{ background:#FBF6FA!important; border:1px solid transparent!important; overflow:hidden;transition:transform .35s} body > section .addon:hover{transform:translateY(-4px)} body > section .addon-b{padding:24px 26px 26px} /* .hcard-b と同値に */ html body > section .addon-b h3{color:#2A1E2E!important;font-size:1.22rem;line-height:1.5;margin:0 0 10px!important} /* .hcard-b h3 と同値 */ html body > section .addon-b p{color:#5E4E62!important;font-size:.8rem!important;line-height:1.9;text-shadow:none!important} html body > section .addon .addon-price, html body > section .addon [class*="price"]{color:#8E0C26!important} html body > section .addon [class*="price"] small, html body > section .addon em{color:#6E6076!important} html body > section .addon .eng, html body > section .addon [class*="kicker"], html body > section .addon [class*="role"]{color:#8A6438!important} html body > section .addon dl,html body > section .addon dt,html body > section .addon dd, html body > section .addon li,html body > section .addon span{color:#5E4E62} html body > section .addon dt{color:#6E6076!important} html body > section .addon dd b,html body > section .addon b{color:#2A1E2E!important} html body > section .addon .book{ background:#B01030!important;color:#fff!important;border:0!important;border-radius:0!important; padding:14px 20px!important;font-size:.78rem!important;letter-spacing:.14em} html body > section .addon .book:hover{background:#C8153A!important} /* 罫線は白地用の暗い線に */ html body > section .addon dl>div,html body > section .addon li{ border-bottom-color:rgba(42,30,46,.12)!important} /* --- 白カード上のコントラスト不足を潰す --------------------------- 実測で7件が 4.5:1 未満だった。原因は「暗い地の前提で決めた色」が白カードの中に持ち込まれていること：赤金 #C89A63 → 白地では 2.4:1（暗い地では十分だが白地では不足）白の半透明 .82/.90 → 白地では 1.0〜1.1:1（ほぼ読めない）白い面の中は白地用の階調（濃金 #8A6438 / 補助 #6E6076 / 深紅 #8E0C26）に置き換える。 */ /* ★ .hcard-price（カップルページの金額）は白カードの上で color:#fff のままだった＝実質不可視。白カードの行動色（深紅）へ。数字より小さい注記は補助色。 */ html body > section .hcard .hcard-price{color:#8E0C26!important} html body > section .hcard .hcard-price small{color:#6E6076!important} html body > section .hcard .hcard-price .from{color:#8A6438!important} html body > section .hcard .from, html body > section .addon .from{color:#8A6438!important} html body > section .hcard small, html body > section .hcard .pprice small, html body > section .hcard .pprice em, html body > section .addon small{color:#6E6076!important} html body > section .addon .addon-link, html body > section .hcard .addon-link{color:#8E0C26!important; border-bottom-color:rgba(142,12,38,.42)!important} html body > section .addon .addon-link:hover{color:#B01030!important;border-bottom-color:#B01030!important} /* .cpl-role は白カードの中ではなく暗い地の上のラベル。暗い地用の金で。 */ html body > section .cpl-role{color:#C89A63!important} html body > section .hcard em, html body > section .addon em{color:#8E0C26!important} /* 白カード内の矢印が赤金（2.5:1）だった。行動色の深紅へ */ html body > section .hcard em, html body > section .addon em{color:#8E0C26!important} /* ★訂正：.lp-good-grid と .link-card は白カードではなく暗い地の上にある。深紅を当てていたため矢印が 1.5:1 で見えていなかった（実測8箇所）。暗い地の導線と同じ赤金にする。 */ html body > section .lp-good-grid em, html body > section .link-card em{color:#C89A63!important} /* カップルページのギャラリーは4列×2段。写真8枚に対して5列だと 5＋3 に割れて、 2段目の右側が空く。列数を写真の枚数で割り切れる4にする。 ★ .lp-gal-grid（全LP共通のクラス）に当てていたため /oiran/ など写真6枚のページまで4列になり、2段目が 4＋2 で欠けていた。カップル専用の .cpl-gal-grid に限定する。 */ body > section .cpl-gal-grid{grid-template-columns:repeat(4,1fr)!important} @media(max-width:900px){ body > section .cpl-gal-grid{grid-template-columns:repeat(2,1fr)!important} } /* ========================================================= 33. 男性撮影のカード幅を女性プランに揃える実測：女性 .hcard-grid = 545px×2 / gap 30px（幅1120）男性 .addon-grid-2 = 409px×2 / gap 22px（max-width:840px）同じ白カードなのに男性側だけ一回り小さく、対等な選択肢に見えなかった。 ========================================================= */ body > section .addon-grid-2{ max-width:none!important; grid-template-columns:1fr 1fr!important; gap:30px!important} @media(max-width:900px){ body > section .addon-grid-2{grid-template-columns:1fr!important;gap:22px!important}} /* ========================================================= 34. ふりがな（ルビ）「洒落」はしゃらくと読ませたいが、しゃれとも読める。ページごとに画面上の初出1か所だけを置いている。・ルビ自体は装飾ではなく読みの補助なので、本文色をそのまま継承し不透明度で落とす（別色を足すと配色ルールが1つ増える）。・ruby は行の上に高さを足すので、見出しが上にずれないよう line-height を持つ要素の中では ruby だけ line-height を詰める。 ========================================================= */ ruby{ruby-position:over;ruby-align:center} rt{ font-family:var(--jp); /* 実測：.46em を12.6pxの注記に当てると 5.8px まで落ちて読めなかった。下限を置く */ font-size:max(9px,.5em); font-weight:400; letter-spacing:.04em; line-height:1; /* 不透明度で落とすと 4.2:1 まで下がった。サイズ差だけで従属は伝わるので色は親のまま＝本文と同じコントラストを保つ */ color:inherit; text-shadow:none} /* 行間を食わせないための保険（ruby 対応ブラウザは自動で確保する） */ ruby{line-height:1.1} /* ========================================================= 35. 「二人の装い」カード内の導線（.cpl-pair-link）節の末尾に1本だけ .sec-exit を置いていたが、女性の装い・男性の装いのどちらの続きなのか分からなかった。各カードの中に、そのカードの続きへ送るリンクを1本ずつ置く。 .cpl-pair-card は暗い地なので、他の暗い地の導線（.sec-exit / .addon-link）と同じ赤金の下線つきテキストで揃える。 ========================================================= */ body > section .cpl-pair-card{display:flex;flex-direction:column} body > section .cpl-pair-card p{margin-bottom:18px} html body > section .cpl-pair-link{ margin-top:auto;align-self:flex-start; color:#C89A63!important;font-size:.82rem;letter-spacing:.04em; text-decoration:none!important; border-bottom:1px solid rgba(200,154,99,.42); padding-bottom:3px;transition:color .3s,border-color .3s} html body > section .cpl-pair-link:hover{ color:#E3BE8C!important;border-bottom-color:#E3BE8C} html body > section .cpl-pair-link i{ font-style:normal;margin-left:6px;display:inline-block;transition:transform .3s} html body > section .cpl-pair-link:hover i{transform:translateX(3px)} /* ========================================================= 36. /first-time/ をテーマの語彙に合わせるこのページだけ掃除が届いていなかった。原因は入れ物が
で、7-c・11 の掃除が対象にしている main.site-main / body > section のどちらにも該当しないこと。実測（1280px）：角丸6種51箇所・影4箇所・背景グラデーション5種。 /oiran/ は角丸0・影0・背景は紫2色の交互。 ========================================================= */ /* --- 36-a 角丸と影をゼロに（11 と同じ扱い） --- */ main.ft-main *{box-shadow:none!important;border-radius:0!important} main.ft-main .ft-step-no{border-radius:50%!important} /* 番号の丸だけは丸のまま */ main.ft-main .ft-mini li::before{border-radius:50%!important} /* --- 36-b 背景を紫の交互に（7-c と同じ規則） --- grad-night / rose / ocean / sunset / blue の5種は赤・青・橙まで混ざっていて、他ページと地続きに見えなかった。 */ /* HEROの文字域が #17102C。その直下の目次バーを同色にしたらHEROと一続きに見えたので、目次バーを明るい側（#2A1852）にして交互の一員に組み込み、本文は #17102C から始める。 HERO(暗) → 目次(明) → 1節(暗) → 2節(明) … と最後まで途切れない。 */ main.ft-main > section:nth-of-type(odd){background:#17102C!important;background-image:none!important} main.ft-main > section:nth-of-type(even){background:#2A1852!important;background-image:none!important} main.ft-main > section::before, main.ft-main > section::after{background-image:none!important} /* --- 36-c 見出しまわりを /oiran/ と同じ寸法に ----------------------- 実測の差： h2の下線 /first-time/ にだけ在る（/oiran/ の h2::after は content:none） .eng 11.52px ↔ 12.16px .head の下 34px ↔ 42px 節の上下 74px ↔ 112px 一度この下線を金の細罫に置き換えたが、そもそも他ページに無い装飾なので消す。 */ main.ft-main .ft-sec .head h2::after{content:none!important} main.ft-main .ft-sec .head h2{display:block!important;position:static!important} main.ft-main .ft-sec .head{margin-bottom:42px!important} main.ft-main .ft-sec .head .eng{font-size:.76rem!important} main.ft-main .ft-sec{padding:112px 0!important} @media(max-width:900px){main.ft-main .ft-sec{padding:78px 0!important}} /* --- 36-d カードの面を /oiran/ と同じにする ------------------------- 実測の差： /oiran/ 地=透明枠=rgba(255,255,255,.16) 余白 26px 24px /first-time/ 地=白5.5% 枠=金28% 余白 24px 22px 面に色を敷いていたぶん、同じカードでも別物に見えていた。 */ main.ft-main .ft-card, main.ft-main .ft-info-item, main.ft-main .ft-step, main.ft-main .ft-mini, main.ft-main .ft-reassure, main.ft-main .ft-table-wrap, main.ft-main .ft-links a{ background:transparent!important; border:1px solid rgba(255,255,255,.16)!important} main.ft-main .ft-card, main.ft-main .ft-info-item, main.ft-main .ft-reassure{padding:26px 24px!important} main.ft-main .ft-mini{padding:26px 24px!important} main.ft-main .ft-card:hover, main.ft-main .ft-links a:hover{ background:rgba(255,255,255,.05)!important; border-color:rgba(255,255,255,.32)!important} /* --- FAQ。/oiran/ は枠のない「区切り線＋＋印」の形。同じにする --- */ main.ft-main .ft-q{ background:transparent!important;border:0!important; border-bottom:1px solid rgba(255,255,255,.36)!important} main.ft-main .ft-q summary{ padding:16px 28px 16px 0!important;font-size:.88rem!important} main.ft-main .ft-q summary::after{ content:"+"!important;position:absolute;right:8px;top:50%;transform:translateY(-50%); width:auto!important;height:auto!important;border:0!important;background:none!important; font-family:var(--cor);font-size:1.45rem;color:#fff;line-height:1} main.ft-main .ft-q[open] summary::after{content:"−"!important} main.ft-main .ft-a{padding:0 28px 18px 0!important} main.ft-main .ft-faq{display:block!important;border-top:1px solid rgba(255,255,255,.36)} /* --- 差し込んだ写真の枠も /oiran/ のギャラリーと同じ白の細罫に --- */ main.ft-main .ft-gallery figure, main.ft-main .ft-accent{border:1px solid rgba(255,255,255,.14)!important;background:transparent!important} /* --- 36-e 桃色のアクセントを赤金／深紅へ（配色ルールに合わせる） --- */ main.ft-main .ft-h3, main.ft-main .ft-step h3, main.ft-main .ft-amenity-tag{color:#C89A63!important} main.ft-main .ft-step-no{ background:#8E0C26!important;color:#fff!important;border:0!important} /* ★訂正：.ft-reassure-tag はもともと枠のない金の斜体ラベルだった。チップ（.ft-choose-tag / .ft-cat）と一緒に枠を付けてしまい、 padding が0のまま1pxの枠だけが付いて文字がはみ出して見えていた。ラベルは枠なしに戻し、枠を付けるのはチップだけにする。 */ main.ft-main .ft-reassure-tag{ background:transparent!important;color:#C89A63!important;border:0!important} main.ft-main .ft-choose-tag, main.ft-main .ft-cat{ background:transparent!important;color:#C89A63!important; border:1px solid rgba(200,154,99,.45)!important; padding:4px 10px!important} main.ft-main .ft-mini li::before{background:#C89A63!important;width:5px!important;height:5px!important} /* --- 36-f ボタン。ピル型（999px）をやめ、他ページの .book と同じ角ゼロに --- */ .ft-hero .ft-btn{ border-radius:0!important;min-height:0!important; padding:15px 30px!important;font-size:.8rem!important;letter-spacing:.14em!important; transform:none!important} .ft-hero .ft-btn--primary{background:#B01030!important;color:#fff!important;border:0!important} .ft-hero .ft-btn--primary:hover{background:#C8153A!important;transform:none!important;box-shadow:none!important} .ft-hero .ft-btn--ghost{background:transparent!important;color:#E2D8E8!important; border:1px solid rgba(200,154,99,.55)!important} .ft-hero .ft-btn--ghost:hover{background:rgba(200,154,99,.14)!important} /* --- 36-g 目次ナビも同じ語彙に --- */ .ft-quick{background:#2A1852!important; border-top:1px solid rgba(200,154,99,.28)!important; border-bottom:1px solid rgba(200,154,99,.28)!important} .ft-quick a{ background:transparent!important;border:0!important;border-radius:0!important; /* #A99DB4（6:1）は暗くて拾いにくく、下線も透明でリンクに見えなかった。本文と同じ明るさにし、常時下線を出してリンクだと分かるようにする。 */ color:#E2D8E8!important; border-bottom:1px solid rgba(200,154,99,.45)!important; padding-bottom:3px!important;transition:color .3s,border-color .3s} .ft-quick a:hover{color:#C89A63!important;border-bottom-color:#C89A63!important; background:transparent!important} /* 現在地。色も下線も透明のままで、どこを読んでいるか分からなかった */ .ft-quick a.is-active{color:#C89A63!important;border-bottom-color:#C89A63!important} /* --- 36-h 文字の階段と色を、他ページと同じ段数に落とす ----------------- 実測（1280px）で16段あり、うち 18.56/18.4/18.24、16.96/16.64、 14.72/14.4、13.92/13.76/13.44/13.12 は見分けがつかない差だった。役割ごとに1つずつに絞る。節見出し h2 27.2px（/oiran/ と同値）面の見出し .ft-h3 17.6px（金）／カード内 h3 16.8px（白）本文 14.08px … 読ませるページなので /oiran/ の 13.44px より一段大きく残す注記・ラベル 12.64px 色は暗い地の階調（白／#E2D8E8／#A99DB4／#C89A63）だけにする。 */ main.ft-main .head h2{font-size:1.7rem!important} main.ft-main .head .disp-s{color:#fff!important} main.ft-main .head .h-r{font-size:.84rem!important;color:#E2D8E8!important} main.ft-main .ft-h3{font-size:1.1rem!important;color:#C89A63!important} main.ft-main .ft-card h3, main.ft-main .ft-step h3, main.ft-main .ft-reassure h3{font-size:1.05rem!important} main.ft-main .ft-card h3, main.ft-main .ft-reassure h3{color:#fff!important} main.ft-main .ft-q summary{color:#fff!important} /* サイズは 36-d 側（/oiran/ と同じ .88rem）に任せる */ main.ft-main .ft-card p, main.ft-main .ft-info-item p, main.ft-main .ft-step p, main.ft-main .ft-reassure p, main.ft-main .ft-mini li, main.ft-main .ft-a p, main.ft-main .ft-table tbody td{font-size:.88rem!important;color:#E2D8E8!important;line-height:1.95!important} main.ft-main .ft-table thead th{font-size:.82rem!important;color:#fff!important} main.ft-main .ft-note{font-size:.79rem!important;color:#A99DB4!important} main.ft-main .ft-reassure-tag, main.ft-main .ft-cat{font-size:.76rem!important} main.ft-main b{color:#fff!important;font-size:inherit!important} /* 太字だけ 14.72px と本文より大きかった */ /* 手順の番号。/oiran/ は Cormorant の金の数字なので、丸を外して合わせる */ main.ft-main .ft-step-no{ position:static!important;width:auto!important;height:auto!important; display:block!important;background:transparent!important;border-radius:0!important; font-family:var(--cor)!important;font-size:1.8rem!important;color:#C89A63!important; line-height:1!important;margin-bottom:10px} main.ft-main .ft-step{padding:24px 22px 22px!important} /* --- 36-i 本文に差し込む写真 ------------------------------------ 文字だけのページになっていたので、節の区切りに作例写真を置く。もともと ft-photo-1〜6 と .ft-accent / .ft-gallery の指定はあったがテンプレートから参照されておらず、使われていなかった。 */ main.ft-main .ft-accent{ margin:26px 0 0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden} /* 遅延読込の img に height:auto だけだと、読み込むまで高さ0で場所を取らず画面がガタつく。高さを先に確定させ、はみ出す分は object-fit で切る。 */ main.ft-main .ft-accent img{ width:100%!important;height:clamp(190px,30vw,340px)!important; max-height:none!important;object-fit:cover!important; /* 30% だと元画像（1200×800）の上から131pxを隠す。3枚とも被写体の頭は上から0〜35pxの位置にあるため、顔が切れていた。既定を上寄りにし、写真ごとに --pos で微調整できるようにする。 */ object-position:center var(--pos,4%)} main.ft-main .ft-gallery{gap:14px;margin-top:26px} main.ft-main .ft-figcap{ margin:10px 0 0;font-size:.76rem;letter-spacing:.04em;color:#A99DB4} /* --- 36-j 読みやすさの手当て ---------------------------------------- 実測（PC 1280px）で3点あった。 ① 1行65字：「女性のお客様に、安心を。」の本文が幅1070pxいっぱい ② 1行54字：FAQの答えが幅1092pxいっぱい日本語は35〜45字/行が読みやすいとされる。字送りで上限を決める。 ③ 「もっと楽しむコツ」が4枚/3列で最終行に2枠空く（5枚から4枚に減らしたときに私が作った割り切れなさ。2列にする） */ main.ft-main .ft-reassure p, main.ft-main .ft-a p, main.ft-main .ft-mini li, main.ft-main .ft-figcap, main.ft-main .ft-note{max-width:42em} main.ft-main #tips .ft-cards{grid-template-columns:repeat(2,1fr)!important} @media(max-width:760px){main.ft-main #tips .ft-cards{grid-template-columns:1fr!important}} /* 料金表が4列で幅1118pxまで伸び、内容が薄く散っていた */ main.ft-main .ft-table-wrap{max-width:860px} /* 4ステップを4列に並べると1枚222pxで、本文が10〜13字/行の縦長になっていた。（/oiran/ の流れは3ステップ3列で約350px・26字/行） 4枚なので2列にすれば割り切れ、幅も551pxまで戻る。 */ main.ft-main .ft-flow{grid-template-columns:repeat(2,1fr)!important} @media(max-width:760px){main.ft-main .ft-flow{grid-template-columns:1fr!important}} /* スマホで写真3枚が2列になり、最終行に1枠空いていた。3枚なので1列に落とす。 */ @media(max-width:900px){ main.ft-main .ft-gallery{grid-template-columns:1fr!important} } /* ========================================================= 37. カードは濃い地（全ページ共通の規則）一度 12・32 章で白カードに寄せたが、写真の下に白い面が入ると写真 → 白 → 暗い地と横縞になり、ページの流れが切れる。 /oiran/ で見比べたうえで、全ページ濃い地に統一する。白に寄せた元々の理由は「小さい文字が半透明の白だった」こと。濃い地でもそこは直す＝階調はすべて不透明にする。見出し #fff / 本文 #E2D8E8 / 補助 #A99DB4 / 金額・ラベル #C89A63 行動（ボタン・札）は深紅のまま面と枠は .tier（スタンダードのプランカード）と同じ値に揃える。ホバーの枠は白ではなく赤金にする。白い線はこのサイトの語彙になく、「反応した」ことをサイト自身の色で示す方が地続きになる。 ========================================================= */ body > section .hcard, body > section .addon, body > section .plan, .mp-card{ background:rgba(16,5,20,.42)!important; border:1px solid rgba(255,255,255,.18)!important; overflow:hidden;transition:transform .35s,background .35s,border-color .35s} body > section .hcard:hover, body > section .addon:hover, body > section .plan:hover, .mp-card:hover{ transform:translateY(-4px); background:rgba(16,5,20,.55)!important; border-color:rgba(200,154,99,.55)!important; box-shadow:none!important} /* --- 見出しとラベル --- */ html body > section .hcard-kicker, .plan-info .eng, .mp-chip{color:#C89A63!important} html body > section .hcard-b h3, html body > section .addon-b h3, .plan-info h3, .mp-body h3{color:#fff!important} html body > section .hcard-b > p, html body > section .addon-b p, .plan-info p, .mp-body p{color:#E2D8E8!important;text-shadow:none!important} /* --- 仕様リスト・定義リスト --- */ html body > section .hcard .pspec li, html body > section .addon dl>div, html body > section .addon li, .plan-spec li, .plan-time{border-bottom-color:rgba(255,255,255,.14)!important} html body > section .hcard .pspec li span, html body > section .addon dt, html body > section .addon span, .plan-spec li span, .plan-time{color:#A99DB4!important} /* ★ .addon の
は「男性の着付け1着」のように項目と値が1文で入っている。 .hcard の項目値と違って分かれていないので、まとめて補助色にすると内容そのものが薄くなる（実測6.9:1／13.44px）。カードの主内容なので本文色に。 */ html body > section .addon li{color:#E2D8E8!important} html body > section .hcard .pspec li b, html body > section .addon dd b, html body > section .addon b, .plan-spec li b, .plan-time b{color:#fff!important} /* --- 金額。見出し（白）と色で区別できるよう赤金 --- */ html body > section .hcard-b .pprice, html body > section .hcard-b .pprice span, html body > section .hcard .hcard-price, html body > section .addon .addon-price, html body > section .addon [class*="price"], .plan-foot .price{color:#C89A63!important} /* 金額に添える「おひとり様あたり」。.addon span の旧ルール（濃灰）に負けないよう明示。 */ html body > section .addon .addon-per{color:#C89A63!important} html body > section .hcard-b .pprice em, html body > section .hcard .from, html body > section .hcard small, html body > section .hcard .pprice small, html body > section .hcard .hcard-price small, html body > section .addon small, html body > section .addon em, html body > section .addon .from, .plan-foot .price .from, .plan-foot .price small{color:#A99DB4!important} /* --- 行動：ボタン・札・カード内リンクは深紅／赤金のまま --- */ html body > section .hcard .book.full, html body > section .addon .book{ background:#B01030!important;color:#fff!important; border:0!important;border-radius:0!important; padding:15px 20px!important;font-size:.78rem!important;letter-spacing:.14em} html body > section .hcard .book.full:hover, html body > section .addon .book:hover{background:#C8153A!important} html body > section .hcard-tag, .plan-tag{background:#8E0C26!important;color:#fff!important} html body > section .addon .addon-link, html body > section .hcard .addon-link, .plan-foot .link{color:#C89A63!important; border-bottom-color:rgba(200,154,99,.42)!important} html body > section .addon .addon-link:hover{color:#E3BE8C!important;border-bottom-color:#E3BE8C!important} html body > section .hcard em, html body > section .addon em{color:#C89A63!important} /* --- 37-b トップページ側の上書き ----------------------------------- トップのカード文字色は main.site-main を付けた指定で決まっており（.plan h3 / .plan p / .plan-time / .eng など）、上の共通規則より詳細度が高い。地だけ暗くなって文字が墨のまま残る＝読めなくなるので、同じ詳細度で暗い地用の階調に置き換える。ブログカードも同じ「カード」なので合わせる。 */ main.site-main .plan, main.site-main .mp-card, main.site-main .blog-card{ background:rgba(16,5,20,.42)!important; border:1px solid rgba(255,255,255,.18)!important} main.site-main .plan:hover, main.site-main .mp-card:hover, main.site-main .blog-card:hover{ background:rgba(16,5,20,.55)!important; border-color:rgba(200,154,99,.55)!important;box-shadow:none!important} main.site-main .plan h3, main.site-main .mp-card h3, main.site-main .blog-card h3{color:#fff!important} main.site-main .plan p, main.site-main .plan li, main.site-main .mp-card p, main.site-main .mp-card li, main.site-main .blog-card p, main.site-main .blog-card li, main.site-main .blog-ex{color:#E2D8E8!important} main.site-main .plan small, main.site-main .plan .from, main.site-main .mp-card small, main.site-main .mp-card .from, main.site-main .blog-card small, main.site-main .blog-card .from, main.site-main .plan .plan-time{color:#A99DB4!important} main.site-main .plan .plan-time b{color:#fff!important} html body main.site-main .plan-info .eng, html body main.site-main .mp-card .eng, html body main.site-main .blog-card .eng{color:#C89A63!important} main.site-main .mp-card .go, main.site-main .blog-card .go, main.site-main .plan .go, main.site-main .plan .link{color:#C89A63!important} /* 仕様チップ（着付け／ヘアメイク…）は .incl の中の span だった。白地の小片だったので枠だけの表現に */ main.site-main .plan .incl span, main.site-main .plan-spec li, main.site-main .plan-spec span{color:#A99DB4!important; border-color:rgba(255,255,255,.22)!important;background:transparent!important} /* ブログの日付。白地前提の深紅で 2.7:1 だった */ main.site-main .blog-card .date{color:#C89A63!important} /* --- 37-c 白カード時代の取り残し ------------------------------------ .from（#8A6438）と .addon-price の small（#6E6076）は白地用の色で、暗い地では 3.3:1 だった。12・32章の該当指定より後ろで打ち消す。 */ html body > section .hcard .from, html body > section .hcard .hcard-price .from, html body > section .addon .from, html body > section .addon .eng, html body > section .addon [class*="kicker"]{color:#A99DB4!important} html body > section .addon .addon-price small, html body > section .addon [class*="price"] small{color:#A99DB4!important} /* --- 37-d -webkit-text-fill-color の取り残し ------------------------- .plan-foot .price には color と一緒に -webkit-text-fill-color:#8E0C26 が指定されている。text-fill-color は color より優先して描画色になるため、 color を赤金にしても実際は深紅のまま表示されていた。（私の計測が color しか見ておらず、「赤は残っていない」と誤って報告した箇所） */ main.site-main .plan-foot .price, main.site-main .plan .price, main.site-main .mp-card .price{ color:#C89A63!important;-webkit-text-fill-color:#C89A63!important} main.site-main .plan-foot .price small, main.site-main .plan-foot .price .from, main.site-main .plan .price small, main.site-main .plan .price .from{ color:#A99DB4!important;-webkit-text-fill-color:#A99DB4!important} /* ========================================================= 38. /oiran/standard/ 系に残っていた旧ルールの一掃実測（/oiran/standard/）で見つかったもの：・札の色が3種 .tier-tag #B4315C（桃寄り）／#B01030（深紅）／#5A3A7A（紫）同じ「札」なのに色が3つあり、意味の違いではなく旧配色の名残だった。行動色ではないので、白カードの札と同じ深紅に統一する。・桃色の文字が2種 .req #FFC0DD ／ .imp-cancel li b #FF8FB4 ・半透明の白が5種 .68 / .70 / .78 / .80 / .92 / .94 小さい文字ほど薄くなる作りで、階調が読めない。不透明な階調に置き換える。・面（カード）の地が5種 rgba(255,255,255,.04) / .05 / rgba(16,5,20,.42) / rgba(18,6,22,.28) / rgba(23,16,44,.5) 枠も rgba(198,168,222,.16)（薄紫）と rgba(200,154,99,.28)（金）と白18%が混在。カードは37章で決めた1組（地 rgba(16,5,20,.42) ／枠白18%）に寄せる。 ========================================================= */ /* --- 38-a 札・番号 --- */ .tier-tag,.tier-tag.alt,.tier-tag.alt2,.tier-tag.alt3, .store-cur{ background:#8E0C26!important;color:#fff!important;border:0!important} /* --- 38-b 桃色の文字 --- */ .req{color:#C89A63!important} .imp-cancel li b,.imp-cancel b{color:#C89A63!important} .imp-list li::before,.imp-list a{color:#C89A63!important} .imp-cancel h3,.opt-sub{border-left-color:#C89A63!important} .booth-renew{color:#A99DB4!important;background:transparent!important} /* --- 38-c 半透明の白を不透明の階調へ --- */ body > section .tier-name span, body > section .tier-price small, body > section .tier-spec b, body > section .head .h-r, body > section .crumbs a, body > section .crumbs li{color:#E2D8E8!important} body > section .tier-spec b, body > section .tier-price small, body > section .tier-name span{color:#A99DB4!important} .cut-notice p,.imp-cancel > p{color:#E2D8E8!important} /* --- 38-d カードの面と枠を1組に --- */ body > section .booth, body > section .opt-card, body > section .opt-group, body > section .print-item, body > section .imp-cancel, body > section .rec-inline, body > section .common-band, body > section .cut-notice{ background:rgba(16,5,20,.42)!important; border:1px solid rgba(255,255,255,.18)!important} /* 注意帯だけは「読ませる」目的なので左の金の縦線を残す */ body > section .cut-notice{border-left:3px solid #C89A63!important} /* キャンセル料の行。黒の半透明だったので他の内側リストと同じ扱いに */ body > section .imp-cancel li{background:rgba(255,255,255,.05)!important} /* --- 38-e 見出し上の飾り英字（.disp-s）------------------------------ /oiran/ など整頓済みのページでは白。ここだけ薄紫 #CDB9DE で、同じ役割の文字に2色ある状態だった。 */ body > section .head .disp-s, body > section .disp-s{color:#fff!important} /* --- 38-f 文字サイズの階段を詰める ---------------------------------- 実測29段。うち下の組は見分けがつかない差だった。 14.88 / 14.72 / 14.4 → 14.4 13.92 / 13.76 / 13.6 → 13.76 11.2 / 10.88 / 10.56 / 10.24 / 9.92 → 10.56（札・単位・注記）役割の違うものは残し、同じ役割で数値だけ違うものを揃える。 */ body > section .tn-h, body > section .rec-h, body > section .cb-h{font-size:.9rem!important} /* 14.4px */ body > section .opt-per, body > section .addon-per, body > section .og-sub, body > section .addon-price small, body > section .tier-price small, body > section .tier-name span, body > section .print-item small, body > section .opt-card small{font-size:.66rem!important} /* 10.56px */ body > section .imp-note, body > section .booth-renew, body > section .addon-note{font-size:.78rem!important} /* 12.48px */ /* --- 38-g 単独のオプション（.opt-solo）------------------------------ 1枚だけを4列グリッドに入れると1/4幅の孤立したカードになる。写真を左、内容を右に置いた横長の1枚にして、意図した形に見せる。 */ body > section .opt-solo{grid-template-columns:1fr!important} @media(min-width:761px){ body > section .opt-solo .opt-card{ display:grid;grid-template-columns:minmax(0,300px) 1fr;align-items:stretch} body > section .opt-solo .opt-img{height:100%} body > section .opt-solo .opt-img img{width:100%;height:100%;object-fit:cover} body > section .opt-solo .opt-cb{padding:24px 26px;display:flex;flex-direction:column;justify-content:center} } /* ========================================================= 39. ギャラリー帯の背景（.galleryband）もとは紫→マゼンタ→桃のグラデーションで、7-c の交互ルール（!important）に打ち消されて単色の紫になっていた。作例写真を敷いて、暗い覆いを重ねる。交互ルールと同じ詳細度（0,1,2）なので、後ろに置いたこちらが勝つ。 ========================================================= */ body > section.galleryband{ position:relative;isolation:isolate; background-color:#17102C!important; background-image:var(--gb-bg,none)!important; background-size:cover!important; background-position:center!important; background-repeat:no-repeat!important; background-attachment:scroll!important; /* 覆い（.gb-veil）は inset:0 ＝ padding box までしか届かないので、 border-box に写真を描くと上下1pxの罫線部分だけ写真が素で出る。写真を padding box までに留めて、罫線は地の色の上に描く。 */ background-clip:padding-box!important} /* 暗い覆い。写真の明暗に関わらず文字のコントラストを保つ。 ★ 当初 ::before で作ったが、この環境では擬似要素が生成されなかった（content が normal のまま。1091行の一括 display:none を除外しても変わらず）。 CTA の .cta2-veil と同じく実要素にして確実に描く。 */ body > section.galleryband .gb-veil{ position:absolute;inset:0;z-index:0;pointer-events:none; /* 覆いの濃さは「写真がいちばん明るい場合」を基準に決める。 .84 なら白い部分でも合成後 rgb(53,48,63) 相当になり、金の英字 #C89A63 で 4.7:1、白文字で 12:1 を確保できる。 */ background:linear-gradient(90deg,rgba(15,8,28,.90) 0%,rgba(15,8,28,.84) 100%)} body > section.galleryband > *{position:relative;z-index:1} /* 上下の細罫で、前後の節との境目を作る */ body > section.galleryband{ border-top:1px solid rgba(200,154,99,.28); border-bottom:1px solid rgba(200,154,99,.28)} /* --- 39-b 注意書きの中のリンク --------------------------------------- .tier-notes / .imp-list の本文リンクが白・下線なしで、リンクだと分からなかった（実測 color:#fff / text-decoration:none）。本文中の導線は赤金＋細い下線、というサイト共通の形に合わせる。 */ html body > section .tier-notes a, html body > section .imp-list a, html body > section .imp-cancel a, html body > section .cut-notice a{ color:#C89A63!important;text-decoration:none!important; border-bottom:1px solid rgba(200,154,99,.45)!important; padding-bottom:1px;transition:color .3s,border-color .3s} html body > section .tier-notes a:hover, html body > section .imp-list a:hover, html body > section .imp-cancel a:hover, html body > section .cut-notice a:hover{ color:#E0BE92!important;border-bottom-color:#E0BE92!important} /* --- 39-c 「写真データ・フォトグッズ」の税込表記 ---------------------- 実測：ここだけ 9.92px。他の税込表記は 10.56px で、しかも隣の金額が 16.32px と大きいため差が開いて読みにくかった。サイズを他と揃え、色も一段明るい補助色にする。 */ body > section .opt-group dd span{ font-size:.66rem!important; /* 10.56px。他の税込表記と同値 */ color:#C3B7CC!important} /* ========================================================= 40. プランカード下の余白と、税込表記の見え方 ① 窮屈さ（実測 PC 1280px）プランカード下端 → 注意帯 48px 注意帯下端 → 注意ボックス 26px 節の下は82pxあるのに、ブロック同士が26〜48pxで詰まっていた。注意帯・注意ボックスとも中の padding も16px/20pxと薄い。 ② 税込表記 10.56px は小さすぎ、色も4種（#A99DB4 / #E2D8E8 / #C3B7CC）に割れていた。隣の金額が24〜33pxあるので、差が開いて余計に読みにくい。 1つの扱いに揃え、一段大きくする。 ========================================================= */ /* --- 40-a ブロック間の余白 --- */ body > section .cut-notice{ margin-top:40px!important;padding:22px 26px!important} body > section .tier-notes{ margin-top:44px!important;padding:28px 32px!important} body > section .tier-grid{margin-bottom:4px} /* --- 40-b 税込表記を1つの扱いに --- */ body > section .tier-price small, body > section .addon-price small, body > section .opt-p small, body > section .opt-group dd span, body > section .print-item small, body > section .hcard-price small, body > section .pprice small, body > section .price small{ font-size:.72rem!important; /* 11.52px。10.56px から一段上げる */ color:#C9BFD2!important; /* 暗い地で 9.9:1 */ font-family:var(--jp)!important; letter-spacing:.02em!important; margin-left:6px!important} /* 37-c の .addon small（#A99DB4）が 40-b より前にあり、カップル撮影の税込だけ揃っていなかった。最後に上書きする。 */ html body > section .addon .addon-price small, html body > section .addon [class*="price"] small{color:#C9BFD2!important;font-size:.72rem!important} /* ========================================================= 41. 見出し・金額の行の高さ実測：.tier-name 25.6px / 行の高さ 49.92px（1.95倍） .tier-price 32px / 行の高さ 62.4px（1.95倍）本文と同じ行間が当たっており、1行しかない要素なのに文字の上下に24〜30pxの余白が入って間延びしていた。（margin は12px。見た目の隙間の大半は行の高さ由来） ========================================================= */ body > section .tier-name, body > section .hcard-b h3, body > section .addon-b h3, main.site-main .plan-info h3, main.site-main .mp-body h3{line-height:1.35!important} body > section .tier-price, body > section .hcard-price, body > section .pprice, body > section .addon-price, body > section .opt-p, main.site-main .plan-foot .price{line-height:1.2!important} /* 単位・税込は親の行の高さを継ぐと浮くので、こちらも詰める */ body > section .tier-price small, body > section .hcard-price small, body > section .pprice small, body > section .addon-price small, body > section .opt-p small, main.site-main .plan-foot .price small, main.site-main .plan-foot .price .from{line-height:1.4!important} /* ========================================================= 42. 金額と税込を1行に収める実測：カード幅359px（内側309px）に対し、金額32px＋税込11.52px が入りきらず2行に折り返していた。（税込を10.56→11.52pxに上げたことで幅が足りなくなった）税込表記の大きさは保ちたいので、金額側を少し落として1行に収める。 ========================================================= */ body > section .tier-price{ font-size:1.8rem!important; /* 32px → 28.8px */ white-space:nowrap!important} body > section .tier-price small{ white-space:nowrap!important;margin-left:5px!important} @media(max-width:900px){ body > section .tier-price{font-size:1.7rem!important} } /* ========================================================= 43. 本文中リンクの体裁を1つに実測（/en/oiran/standard/）で3通りが混在していた。 .tier-notes a / .imp-list a … 赤金＋ border-bottom 1px ← これに揃える .addon-link / .opt-cb p a … 赤金＋ text-decoration:underline .couple-more a … 白＋ border-bottom 1px このサイトの下線は border-bottom に統一しているので、 text-decoration の方を落とし、色は赤金にそろえる。 ========================================================= */ html body > section .addon-link, html body > section .opt-cb p a, html body > section .opt-card p a, html body > section .opt-group dt a, html body > section .opt-group dd a{ color:#C89A63!important; text-decoration:none!important; border-bottom:1px solid rgba(200,154,99,.45)!important; padding-bottom:1px;transition:color .3s,border-color .3s} html body > section .addon-link:hover, html body > section .opt-cb p a:hover, html body > section .opt-card p a:hover, html body > section .opt-group dt a:hover, html body > section .opt-group dd a:hover{ color:#E0BE92!important;border-bottom-color:#E0BE92!important} /* ========================================================= 44. ラテン文字のページの組版（en / fr / es）実測（/en/oiran/standard/）で分かっていたこと：・英文の見出し34箇所が Shippori Mincho（和文明朝）・英文の本文142箇所・4,764字が Zen Kaku Gothic New（和文ゴシック）どちらもラテン文字は「かなと並べるため」の設計で、英語だけを組むと字幅と字間のリズムが英語の組版にならない・本文 12.5〜14.1px・行間1.95倍・1行最大111字行間1.95倍は日本語の設定。英語では行が離れすぎて段落に見えない見出し Marcellus ／本文 Hanken Grotesk に差し替え、同時に英語の読みやすさの目安（本文15〜16px・行間1.5〜1.7倍・ 1行45〜75字）に寄せる。日本語ページには一切影響しない。 ========================================================= */ html[lang^="en"], html[lang^="fr"], html[lang^="es"]{ /* 嵐山店と同じ組み合わせ。見出し・プラン名・ラテン装飾 … Marcellus（ローマ碑文風のセリフ）本文・ボタン … Hanken Grotesk Marcellus はウェイトが400のみ。太字指定は効かないので使わない。 */ --lat-serif:'Marcellus', Georgia, serif; --lat-sans:'Hanken Grotesk', system-ui, sans-serif; } /* --- 44-a 本文まわり --- */ html[lang^="en"] body, html[lang^="fr"] body, html[lang^="es"] body{ font-family:var(--lat-sans); font-size:15px; line-height:1.7} html[lang^="en"] p, html[lang^="fr"] p, html[lang^="es"] p, html[lang^="en"] li, html[lang^="fr"] li, html[lang^="es"] li, html[lang^="en"] dd, html[lang^="fr"] dd, html[lang^="es"] dd, html[lang^="en"] dt, html[lang^="fr"] dt, html[lang^="es"] dt, html[lang^="en"] td, html[lang^="fr"] td, html[lang^="es"] td, html[lang^="en"] th, html[lang^="fr"] th, html[lang^="es"] th, html[lang^="en"] summary, html[lang^="fr"] summary, html[lang^="es"] summary, html[lang^="en"] span, html[lang^="fr"] span, html[lang^="es"] span, html[lang^="en"] a, html[lang^="fr"] a, html[lang^="es"] a, html[lang^="en"] b, html[lang^="fr"] b, html[lang^="es"] b{ font-family:var(--lat-sans)} /* 本文の大きさと行間。日本語の 13〜14px / 1.95倍から英語向けに */ html[lang^="en"] body > section p, html[lang^="en"] body > section li, html[lang^="en"] body > section dd, html[lang^="fr"] body > section p, html[lang^="fr"] body > section li, html[lang^="es"] body > section p, html[lang^="es"] body > section li{ font-size:.94rem!important; /* 15px 相当 */ line-height:1.7!important} /* ★撤回：p に一律で max-width を掛けると、中央寄せの箱（.couple-more）や枠いっぱいに広げたい注意帯まで幅が縮み、箱と文字の幅が食い違って「箱は広いのに文字が左半分だけ」という崩れになった。行長は文字ではなく箱の幅で決める（45-h）。 */ /* --- 44-b 見出し --- */ html[lang^="en"] h1, html[lang^="en"] h2, html[lang^="en"] h3, html[lang^="en"] h4, html[lang^="fr"] h1, html[lang^="fr"] h2, html[lang^="fr"] h3, html[lang^="fr"] h4, html[lang^="es"] h1, html[lang^="es"] h2, html[lang^="es"] h3, html[lang^="es"] h4, html[lang^="en"] .ph-title, html[lang^="en"] .tier-name, html[lang^="fr"] .ph-title, html[lang^="es"] .ph-title{ font-family:var(--lat-serif)!important; font-weight:500!important; letter-spacing:-.005em!important; line-height:1.25!important} /* --- 44-c 金額は見出しと同じセリフで（数字の表情を揃える） --- */ html[lang^="en"] .tier-price, html[lang^="en"] .ph-price, html[lang^="en"] .hcard-price, html[lang^="en"] .pprice, html[lang^="en"] .addon-price, html[lang^="en"] .opt-p, html[lang^="fr"] .ph-price, html[lang^="es"] .ph-price{ font-family:var(--lat-serif)!important;font-weight:500!important} html[lang^="en"] .tier-price small, html[lang^="en"] .ph-price small, html[lang^="en"] .hcard-price small, html[lang^="en"] .addon-price small, html[lang^="en"] .opt-p small{font-family:var(--lat-sans)!important} /* --- 44-d 小さな大文字ラベル -------------------------------------- Cormorant は x-height が低く線が細い。10.9px・字送り0.32em では単語として読めず模様になっていた。サンセリフに変え、字送りも詰める。 */ html[lang^="en"] .eng, html[lang^="fr"] .eng, html[lang^="es"] .eng, html[lang^="en"] .hcard-kicker, html[lang^="en"] .cpl-role, html[lang^="en"] .book, html[lang^="en"] .ghost, html[lang^="en"] .cta2-btn, html[lang^="en"] .cta2-tag{ font-family:var(--lat-sans)!important; font-size:.8rem!important; /* 12.8px */ letter-spacing:.16em!important; font-weight:600!important} /* 飾りの大きな英字（44-h で碑文体に上書きする） */ html[lang^="en"] .disp-s, html[lang^="fr"] .disp-s, html[lang^="es"] .disp-s{ font-family:var(--lat-serif)!important;font-style:italic!important;font-weight:400!important} /* --- 44-e 取りこぼし -------------------------------------------------- 実測で和文書体が19箇所残っていた。役割ごとに振り分ける。セリフ（見出し扱い）… .cta2-copy / .rec-h / .tn-h / .booth-en サンセリフ（本文扱い）… .ph-tag / .ph-incl li / .ph-price small / .cta2-sub / .cta2-note / dd の税込あわせて 1行85〜88字あった箇条書きに上限を設ける（推奨45〜75字）。 */ html[lang^="en"] .cta2-copy, html[lang^="en"] .rec-h, html[lang^="en"] .tn-h, html[lang^="en"] .booth-en, html[lang^="en"] .cpl-pair-card h3, html[lang^="fr"] .cta2-copy, html[lang^="es"] .cta2-copy{ font-family:var(--lat-serif)!important;font-weight:500!important;line-height:1.3!important} html[lang^="en"] .ph-tag, html[lang^="fr"] .ph-tag, html[lang^="es"] .ph-tag, html[lang^="en"] .ph-incl li, html[lang^="en"] .ph-price small, html[lang^="en"] .ph-price span, html[lang^="en"] .cta2-sub, html[lang^="en"] .cta2-note, html[lang^="en"] .lp-trust, html[lang^="en"] dd span, html[lang^="en"] dt, html[lang^="fr"] .cta2-sub, html[lang^="fr"] .cta2-note, html[lang^="es"] .cta2-sub, html[lang^="es"] .cta2-note{ font-family:var(--lat-sans)!important} html[lang^="en"] .ph-tag{line-height:1.6!important} /* （文字側の行長制限は 45-h で箱側に移した） */ /* --- 44-f HERO と行長の詰め ------------------------------------------ ・HERO の .ph-tag / .ph-price small / .ph-incl li は hero2.css 側の詳細度（.ph.ph--g .ph-tag など）が高く、44-e では届かなかった。・max-width:68ch が 83字/行になった。ch は「0」の字幅で、小文字の平均幅より広いため字数は ch 値より多くなる。58ch に詰める。 */ html[lang^="en"] .ph.ph--g .ph-tag, html[lang^="en"] .ph.ph--g .ph-price small, html[lang^="en"] .ph.ph--g .ph-price span, html[lang^="en"] .ph.ph--g .ph-incl li, html[lang^="en"] .ph.ph--g .lp-trust, html[lang^="en"] .ph.ph--g .crumbs a, html[lang^="en"] .ph.ph--g .crumbs li, html[lang^="en"] body > section .opt-group dd span, html[lang^="fr"] .ph.ph--g .ph-tag, html[lang^="es"] .ph.ph--g .ph-tag{ font-family:var(--lat-sans)!important} html[lang^="en"] .ph.ph--g .ph-price{font-family:var(--lat-serif)!important} html[lang^="en"] .ph.ph--g .ph-tag{line-height:1.6!important} /* （同上） */ /* --- 44-g 書体を替えたことで生じた折り返し ---------------------------- ラテン書体は和文書体より字幅が広いため、和文で1行だった箇所が英語ページで折り返した。実測で出たもの： .opt-p 「+¥3,850(tax incl.)」が229px幅で2行（金額20px＋税込11.52px） .tier-name「Sumire Violet」が309px幅で2行金額は途中で折り返してはいけない種類の文字列なので nowrap を効かせ、入りきらない分は金額側を落とす。 */ html[lang^="en"] .opt-p, html[lang^="fr"] .opt-p, html[lang^="es"] .opt-p{ white-space:nowrap!important;font-size:1.05rem!important} /* 20px → 16.8px */ html[lang^="en"] .opt-p small{white-space:nowrap!important;margin-left:5px!important} html[lang^="en"] .tier-name{white-space:nowrap!important} html[lang^="en"] .tier-name span{margin-left:8px} /* ブースの見出しは「和名＋英名」の2要素。英語ページでは英名が主なので、和名を小さく前置きにして3行を2行に収める */ html[lang^="en"] .booth h3{line-height:1.35!important} html[lang^="en"] .booth-en{display:block!important;font-size:.8rem!important; color:#A99DB4!important;letter-spacing:.1em;margin-top:2px} /* --- 44-h Marcellus / Hanken Grotesk 向けの調整 ------------------------ ・Marcellus はウェイトが400のみ。font-weight で太らせられないので、見出しの強さは大きさと字送りで作る。・碑文体は大文字の造形が主役なので、小さなラベルはむしろ得意。方向4（ディドネ）では小さい見出しをサンセリフに逃がしていたが、 Marcellus は横線が細すぎないため見出しに使える。・本文とボタンは Hanken Grotesk。 */ html[lang^="en"] h1, html[lang^="en"] h2, html[lang^="en"] h3, html[lang^="en"] .ph-title, html[lang^="en"] .tier-name, html[lang^="en"] .cta2-copy, html[lang^="en"] .cpl-pair-card h3, html[lang^="en"] .booth h3, html[lang^="en"] .rec-h, html[lang^="en"] .tn-h, html[lang^="en"] .imp-cancel h3, html[lang^="fr"] h1, html[lang^="fr"] h2, html[lang^="fr"] h3, html[lang^="fr"] .ph-title, html[lang^="es"] h1, html[lang^="es"] h2, html[lang^="es"] h3, html[lang^="es"] .ph-title{ font-family:var(--lat-serif)!important; font-weight:400!important; letter-spacing:.015em!important} /* 小見出し（16px前後）は情報の粒。サンセリフで締める */ html[lang^="en"] h4, html[lang^="en"] .opt-cb h4, html[lang^="en"] .opt-group h4, html[lang^="fr"] h4, html[lang^="es"] h4{ font-family:var(--lat-sans)!important;font-weight:600!important;letter-spacing:.01em!important} /* 金額。大きいものは碑文体、小さいものはサンセリフ */ html[lang^="en"] .tier-price, html[lang^="en"] .ph-price, html[lang^="en"] .hcard-price, html[lang^="en"] .pprice, html[lang^="en"] .addon-price{ font-family:var(--lat-serif)!important;font-weight:400!important} html[lang^="en"] .opt-p, html[lang^="fr"] .opt-p, html[lang^="es"] .opt-p{ font-family:var(--lat-sans)!important;font-weight:600!important} /* ラテン装飾（飾りの大きな英字・小さな大文字ラベル）も碑文体 */ html[lang^="en"] .disp-s, html[lang^="fr"] .disp-s, html[lang^="es"] .disp-s{ font-family:var(--lat-serif)!important;font-style:normal!important;font-weight:400!important} html[lang^="en"] .eng, html[lang^="fr"] .eng, html[lang^="es"] .eng, html[lang^="en"] .hcard-kicker, html[lang^="en"] .cpl-role, html[lang^="en"] .cta2-tag{ font-family:var(--lat-serif)!important;font-weight:400!important;letter-spacing:.2em!important} /* ボタンは本文と同じサンセリフ（押す場所は読みやすさ優先） */ html[lang^="en"] .book, html[lang^="en"] .ghost, html[lang^="en"] .cta2-btn, html[lang^="fr"] .book, html[lang^="es"] .book{ font-family:var(--lat-sans)!important;font-weight:600!important;letter-spacing:.14em!important} /* --- 44-i 擬似的な太字を止める -------------------------------------- Marcellus はウェイトが400のみ。600や800を指定すると、ブラウザが文字を機械的に太らせた「擬似ボールド」を描く。碑文体の細部が潰れるので、明示的に400へ戻す。（hero2.css の .ph.ph--g .ph-title{font-weight:600!important} が 44-h より詳細度が高く、そちらが勝っていた） */ html[lang^="en"] .ph.ph--g .ph-title, html[lang^="fr"] .ph.ph--g .ph-title, html[lang^="es"] .ph.ph--g .ph-title, html[lang^="en"] .ph-title, html[lang^="en"] h1, html[lang^="en"] .head h2, html[lang^="en"] .tier-name, html[lang^="en"] .disp-s, html[lang^="en"] .eng, html[lang^="en"] .tier-price, html[lang^="en"] .ph-price, html[lang^="en"] .cta2-copy{ font-weight:400!important; -webkit-font-smoothing:antialiased} /* ========================================================= 45. 枠付きリンクと、数字の書体 ① .couple-more a は枠で囲んだボタン型のリンク。 43章で本文中のリンク（赤金＋下線）と一緒に扱ってしまい、 padding-bottom:1px が足されて上16px／下5pxの不均等になっていた。実測：箱247×38、文字185×17、余白上16 下5 左31 右31。枠付きなので下線は不要。上下の余白を揃え、他の枠付き（.ghost）と同じ厚みにする。 ② 数字の書体が場所で割れていた（実測 /en/oiran/standard/）。 .tier-price / .ph-price … Marcellus .addon-price b / .opt-p / .opt-group dd … Hanken Grotesk 同じ「金額」が2書体になっていた。規則：¥のつく金額と装飾の数字は Marcellus、文章の中の数字は本文と同じ Hanken Grotesk。 ========================================================= */ /* --- 45-a 枠付きリンク --- */ html body > section .couple-more a{ color:#E2D8E8!important; text-decoration:none!important; border:1px solid rgba(200,154,99,.55)!important; border-radius:0!important; padding:12px 26px!important; line-height:1.4!important; transition:color .3s,border-color .3s,background .3s} html body > section .couple-more a:hover{ color:#C89A63!important;border-color:#C89A63!important; background:rgba(200,154,99,.1)!important} /* --- 45-b 金額と装飾の数字は Marcellus に統一 --- */ html[lang^="en"] .tier-price, html[lang^="en"] .ph-price, html[lang^="en"] .hcard-price, html[lang^="en"] .pprice, html[lang^="en"] .addon-price, html[lang^="en"] .addon-price b, html[lang^="en"] .opt-p, html[lang^="en"] .opt-group dd, html[lang^="en"] .lp-fn, html[lang^="en"] .ft-step-no, html[lang^="fr"] .ph-price, html[lang^="fr"] .opt-p, html[lang^="es"] .ph-price, html[lang^="es"] .opt-p{ font-family:var(--lat-serif)!important;font-weight:400!important} /* 「(tax incl.)」など金額に添える言葉は本文と同じ書体のまま */ html[lang^="en"] .tier-price small, html[lang^="en"] .ph-price small, html[lang^="en"] .ph-price span, html[lang^="en"] .addon-price small, html[lang^="en"] .opt-p small, html[lang^="en"] .opt-group dd span, html[lang^="en"] .hcard-price small, html[lang^="en"] .hcard-price .from{ font-family:var(--lat-sans)!important;font-weight:400!important} /* --- 45-c 「女性プラン＋◯円」の行 ----------------------------------- 英語では「Women’s plan +¥11,550 (tax incl.) × people」と語数が多く、金額24pxのままだと305px幅に収まらず折り返していた（/en/oiran/authentic/）。同じ部品が standard では1行・authentic では2行と、ページ間で割れる。金額を一段落として揃える。 */ html[lang^="en"] .addon-price b, html[lang^="fr"] .addon-price b, html[lang^="es"] .addon-price b{font-size:1.25rem!important} /* 24px → 20px */ /* --- 45-d 太夫ページの取りこぼし -------------------------------------- /en/tayu/ は独自クラスが多く、44章の一括指定から漏れていた。 .typrice em … 和文明朝のまま（税込の注記） .colcard-t … 和文明朝のまま（コラムの見出し） .tyname span … 和名。英語ページでは補助なので小さく添える */ html[lang^="en"] .typrice em, html[lang^="en"] .typrice small, html[lang^="en"] .ty-note, html[lang^="en"] .tybox-note{ font-family:var(--lat-sans)!important;font-style:normal!important} html[lang^="en"] .colcard-t, html[lang^="en"] .tyname, html[lang^="en"] .ty-lead, html[lang^="en"] .tybox-name{ font-family:var(--lat-serif)!important;font-weight:400!important} html[lang^="en"] .typrice, html[lang^="en"] .tybox-price{ font-family:var(--lat-serif)!important;font-weight:400!important} html[lang^="en"] .tyname span{font-family:var(--lat-sans)!important; font-size:.72rem!important;color:#A99DB4!important;letter-spacing:.06em} /* --- 45-e 英語トップ（/en/）の取りこぼし ------------------------------ トップは独自クラスが多く、44章の一括指定（h1〜h4 / p / li / .eng 等）から漏れていた。実測で34箇所が和文書体のまま。 Cormorant … .disp .cap .from .mk .date .mp-new Zen Kaku … .price small / .hero-price small / .go / .by / .sub 金額・装飾は Marcellus、言葉は Hanken Grotesk に振り分ける。 .price のが display:block で2行になっていたので同じ行に戻す（「from ¥10,450 (tax incl.)」で1行）。 */ html[lang^="en"] .disp, html[lang^="en"] .cap, html[lang^="en"] .mk, html[lang^="en"] .mp-new, html[lang^="en"] .hero-price, html[lang^="en"] .price, html[lang^="fr"] .disp, html[lang^="fr"] .price, html[lang^="es"] .disp, html[lang^="es"] .price{ font-family:var(--lat-serif)!important;font-weight:400!important} html[lang^="en"] .price .from, html[lang^="en"] .price small, html[lang^="en"] .hero-price small, html[lang^="en"] .go, html[lang^="en"] .by, html[lang^="en"] .sub, html[lang^="en"] .date, html[lang^="fr"] .price small, html[lang^="es"] .price small{ font-family:var(--lat-sans)!important;font-weight:400!important} /* from を金額と同じ行へ（block だと金額と2段になる） */ html[lang^="en"] .price .from, html[lang^="fr"] .price .from, html[lang^="es"] .price .from{ display:inline!important;margin-right:6px!important;margin-bottom:0!important} /* --- 45-f 各プランページの金額クラス ---------------------------------- ページごとに金額のクラス名が違い、45-b の一覧から漏れていた。 .pb-price（洒落）／.cp-price（お子様）／.sc-price（季節の花） .pr-price（ピンクリボン）／.pc-price（特別プラン一覧） .opt-group dd 以外の
に入る金額 */ html[lang^="en"] .pb-price, html[lang^="en"] .cp-price, html[lang^="en"] .sc-price, html[lang^="en"] .pr-price, html[lang^="en"] .pc-price, html[lang^="en"] .ty-price, html[lang^="en"] dl dd, html[lang^="fr"] .pc-price, html[lang^="es"] .pc-price{ font-family:var(--lat-serif)!important;font-weight:400!important} /* dd の中の言葉（税込など）は本文書体に戻す */ html[lang^="en"] dl dd span, html[lang^="en"] dl dd small, html[lang^="en"] dl dd a, html[lang^="en"] dl dd b{ font-family:var(--lat-sans)!important} /* 住所・営業時間など、金額でない dd は本文書体のまま */ html[lang^="en"] .lp-acc dd, html[lang^="en"] .acc-info dd, html[lang^="en"] .ainfo-dl dd{font-family:var(--lat-sans)!important} /* --- 45-g プラン名に添える補助ラベル ---------------------------------- 日本語では「菫〈すみれ〉」のように読みを小さく添える作りだが、英語では「Kokochiru / Main plan」のように別語になり、横に並べると折り返して2行目が中途半端な位置で始まる。 .booth-en / .tyname span と同じく、下に小さく置く形に揃える。 */ html[lang^="en"] .cp-name span, html[lang^="en"] .pb-name span, html[lang^="en"] .sc-name span, html[lang^="en"] .pr-name span, html[lang^="en"] .pc-body h3 span{ display:block!important; font-family:var(--lat-sans)!important; font-size:.72rem!important; color:#A99DB4!important; letter-spacing:.06em!important; margin:2px 0 0!important} /* ========================================================= 45-h 行長は「箱の幅」で決める英語の行長を45〜75字に収めるため、文字に max-width を掛けたのが誤り。箱（注意帯・注意ボックス・中央寄せリンク）は日本語版の幅のままなので、箱は広いのに文字は左半分だけ、という食い違いが出た。日本語ページと同じ「箱いっぱいに文字が入る」状態を保ったまま行長を短くするには、箱そのものを狭める。 ========================================================= */ /* 実測：760pxで85字/行になった（英語の推奨は45〜75字）。 660pxまで狭めると約73字。箱と文字は一致したまま行長だけ短くなる。 */ /* 文字は箱いっぱいに */ html[lang^="en"] .cut-notice p, html[lang^="en"] .imp-list li, html[lang^="en"] .tier-notes li, html[lang^="en"] .imp-cancel > p, html[lang^="en"] body > section p{max-width:none} /* --- 45-i 幅いっぱいに伸びる注記・リード ------------------------------ 実測で 86〜121字/行になっていた器を絞る（英語の推奨は45〜75字）。 .pr-fine（ピンクリボンの寄付に関する注記）… 1120px で121字/行 .head の .reveal（節のリード文）… 700px で86字/行日本語ページと同じ「器いっぱいに文字」を保ったまま、器の幅で調整する。 */ /* --- 45-j アクセスページの経路説明 ------------------------------------ .acs-steps li / .acs-rnote が幅1018〜1066pxまで伸び、 79〜116字/行になっていた（英語の推奨は45〜75字）。経路の手順は読み下す文章なので、器を絞る。 */ /* --- 45-k /en/about/ の取りこぼし ------------------------------------- .astance-lead が和文明朝のまま。節直下の
が幅1120pxまで伸びて136字/行になっていた。 */ html[lang^="en"] .astance-lead, html[lang^="en"] .acraft-lead, html[lang^="en"] .ainfo-lead, html[lang^="en"] .vb-lead{ font-family:var(--lat-serif)!important;font-weight:400!important} /* --- 45-l 予約ページ --------------------------------------------------- .rv-note li / .rv-contact-lead / .rv-mailnote が 87〜96字/行だった。 */ /* --- 45-m 規約・案内などの文書ページ ---------------------------------- .doc-body は器が広く、英語だと105字/行になる（25件中13件が78字超）。規約は最も読み下しにくい種類の文章なので、器を絞る。 */ /* --- 45-n フランス語・スペイン語のLP（.zlp-*）-------------------------- /fr/ /es/ は page-lp.css の別テンプレート（.zlp-*）で、器が 820〜1040px と広く、実測で93〜145字/行になっていた。英語ページと同じ考え方で、器の幅で行長を決める。 */ /* 残っていた Cormorant のラベル */ html[lang^="fr"] .lb, html[lang^="es"] .lb{ font-family:var(--lat-serif)!important;font-weight:400!important} /* ========================================================= HERO の無いページ：パンくずが固定ヘッダーに潜らないようにする・1160px以下のヘッダーは言語帯を含めて実測95px。・一方、各ページCSSは狭い画面で本文セクションの上余白を112px→76pxに詰めているため、パンくずの上端(76px)がヘッダーの下端(95px)より上に来て 19px ぶん隠れていた（/reserve/ /guests/ /reserve/form/ /gallery/配下）。・HERO のあるページは body.khz-hero が付くので対象外。 .doc-wrap 系（利用規約など）は main で余白150pxのため元から問題なし。 ========================================================= */ @media(max-width:1160px){ /* .ph（写真なしHERO を含む）は自前で上余白を持つので除外する */ body:not(.khz-hero) > section:first-of-type:not(.ph){padding-top:118px!important} } /* 見出しを .ph--g.w-slim に出した文書ページ（利用規約・プライバシー・特商法・ご予約後のご案内）。 .doc-wrap の 150px は見出しを内側に持っていた頃の値なので、段の基準に戻す。 */ .ph + .doc-wrap{padding-top:112px} @media(max-width:1160px){ .ph + .doc-wrap{padding-top:76px} } /* ========================================================= 最終検品で残っていた、パレット外の色の始末・#FFE3A6（薄金）… 本文リンク8箇所。金は #C89A63 の一色にする・#FF8FB4（桃） … 廓詞コラムの見出し語・#C7DEF4（淡青）… 洒落プランのブース注記・rgba(120,170,240,…)（青）… 社会貢献チップの枠 ========================================================= */ .store a,.choose-note a,.cb-booth a,.gi-planlink a,.glb-planlink, .gd-idx.light,.sk-gallery .head .eng, .ca-gloss dt{color:#C89A63!important} .csr-chips span{border-color:rgba(200,154,99,.35)!important} /* ========================================================= 記事・一覧の中の角丸と影をゼロにブログ一覧／カテゴリー一覧／記事／コラム記事は main.doc-wrap ・ main.ca-wrap で、 body > section にも main.site-main にも該当しないため、これまでの角丸ゼロ化が届いていなかった（36-a の main.ft-main と同じ事情）。実測：カード・サイドの箱・チップ・検索窓など 6種18箇所の角丸が残っていた。 ========================================================= */ main.doc-wrap *,main.ca-wrap *{box-shadow:none!important;border-radius:0!important} /* 44-a. サイドバーの上端が本文の書き出しとずれる問題 .doc-wrap / .ca-wrap の overflow:hidden は、削除した ::before の光源ぼかしをはみ出させないための名残り。これが position:sticky の基準になるスクロールポートを作ってしまい、.doc-side / .blog-side が本文より 76px 下から始まっていた。（実測：本文 top=629 に対しサイドバー top=705。overflow を外すと両方 629 で一致）しかもこの箱自体はスクロールしないので、sticky の追従も効いていなかった。 overflow-x:clip はスクロールポートを作らないため、横はみ出しの防止だけが残る。 */ main.doc-wrap,main.ca-wrap{overflow-y:visible!important;overflow-x:clip!important} /* 45-a. 「女性のお客様に、安心を。」の枠が全幅なのに中身が左半分しかない 1行65字あったのを 42em に詰めた（上の 44 番）結果、枠は幅1120pxのまま本文だけ591pxになり、右に529pxの空白ができていた。枠を細くすると .ft-info の全幅の箱と幅が揃わなくなるので、枠は全幅のまま、ラベル＋見出しを左、本文を右に置いて横を使い切る。本文の1行の長さ（42em）は変えない。 */ @media(min-width:901px){ main.ft-main .ft-reassure{ display:grid; /* em はグリッドの親（16px）基準で解決されるため 42em＝672px になり、本文の 42em（14.08px基準＝591px）より広くなって1行48字に伸びていた。段落の字送りで決めた幅を px で直に指定する。 */ grid-template-columns:minmax(0,1fr) minmax(0,591px); column-gap:40px;align-items:start} main.ft-main .ft-reassure .ft-reassure-tag{grid-column:1;grid-row:1;margin-bottom:8px} main.ft-main .ft-reassure h3{grid-column:1;grid-row:2;margin:0} main.ft-main .ft-reassure p{grid-column:2;grid-row:1 / span 2;max-width:none} }