@charset "utf-8"; /* ========================================================================== 下層ページ用スタイル。受入済み styles.css への追加のみ（上書きなし）。 ADDITIVE ONLY. このファイルは既存セレクタを一つも再定義しない。 すべて `lp-` 接頭辞を持つ新しいクラスで、TOP には一切影響しない （TOP はこのファイルを読み込みもしない — villa_lp_assets() を参照）。 下層ページのレイアウトの大半は、親テーマで受け入れ済みの部品を そのまま使う: .sec / .sec-in.split / .col / .fig-main / .stack2 / .pano / .duo / .trio / .quad / .gal / .know / .kc / .faq / .pull / .src / .villa / .art / .art-next / .bc / .art-head / .glink / .hair / .sec-orn / .sec-ghost。10ページが同じサイトに見えるのは、 同じ部品でできているからであって、真似ているからではない。 ここで新しく定義するのは、TOP に存在しない7つの型だけ: .lp-hero 写真で始まるページ見出し（深緑プレート） .lp-green 任意の .sec を深緑バンドにする修飾子 .lp-steps 番号つきの手順（見学の流れ・お迎えまで） .lp-time 年表・段階（歩み） .lp-facts 事実の定義リスト（敷地・所在地・犬種標準の数値） .lp-grid 写真ギャラリーのマソンリー（JSなし） .lp-qgroup よくあるご質問のグループ見出し 使う色はトークンだけ: --ivory / --ivory-2 / --green / --green-d / --gold / --gold-d / --gold-l / --gold-h。新しい色は導入しない。 装飾は細い金の罫と直角のブラケットのみ。植物装飾・額縁は使わない。 ========================================================================== */ /* ==================================================== 1. PHOTO PAGE HEAD == 全幅の写真の下端に、深緑のプレートが左寄りで重なる非対称の見出し。 写真の右下にアイボリーの余白が残るので、10ページが同じ中央寄せの 見出しで始まることがない。 */ .lp-hero{ position:relative; background:var(--ivory); padding-bottom:clamp(30px,2.8vw,56px); } .lp-hero-media{background:var(--green-d);line-height:0} .lp-hero-media img{ display:block;width:100%; height:clamp(300px,38vw,560px); object-fit:cover;object-position:50% 44%; } .lp-hero-plate{ position:relative;z-index:2; width:min(50em,calc(100% - 2 * var(--gut))); margin-block:clamp(-132px,-10vw,-88px) 0; margin-inline:var(--gut) auto; padding:clamp(30px,2.6vw,48px) clamp(26px,2.4vw,46px) clamp(28px,2.5vw,44px); background:linear-gradient(180deg,rgba(9,37,28,.965),rgba(6,26,19,.985)); border:1px solid rgba(176,139,46,.55); box-shadow:0 22px 48px rgba(10,6,0,.34); } /* 直角のブラケット2つ。画像ではなく擬似要素なので追加リクエストは0。 */ .lp-hero-plate::before, .lp-hero-plate::after{ content:"";position:absolute;width:22px;height:22px;pointer-events:none; border-color:var(--gold);border-style:solid; } .lp-hero-plate::before{top:9px;left:9px;border-width:1px 0 0 1px} .lp-hero-plate::after{bottom:9px;right:9px;border-width:0 1px 1px 0} /* 'art' 変種 — 文字が焼き込まれた作品版はトリミングしない。 画像は自分の比率のまま全体を出し、プレートは右下へ。使用する3枚 （oyadog1 / staffdog / arinomama）はいずれも文字が左上にあるので、 右下のプレートが文字に重なることはない。重なりは下端 20〜30px だけ。 */ .lp-hero-art .lp-hero-media img{height:auto;object-fit:contain} .lp-hero-art .lp-hero-plate{ margin-block:clamp(-30px,-2.4vw,-18px) 0; margin-inline:auto var(--gut); } .lp-hero-kicker{ font-family:var(--jp-s);font-weight:700; font-size:clamp(15px,1.02vw,17px);letter-spacing:.14em; color:var(--gold-l); } .lp-hero-h1{ margin-top:clamp(12px,1.1vw,18px); font-family:var(--jp);font-weight:700; font-size:clamp(30px,3.1vw,52px);line-height:1.34;letter-spacing:.035em; color:var(--gold-h);text-shadow:0 1px 3px rgba(0,0,0,.4); word-break:auto-phrase;line-break:strict; } .lp-hero .hair{margin-block:clamp(18px,1.5vw,26px) clamp(18px,1.6vw,26px)} .lp-hero-lead{ font-family:var(--jp);font-size:clamp(18px,1.22vw,20.5px);line-height:1.92; letter-spacing:.05em;color:#DEE9E2;max-width:var(--measure); } /* ======================================================= 2. DARK BAND ==== .sec-hist と同じ深緑のグラデーション。TOP の HERITAGE バンドと 同じ見え方になるので、下層でも「同じサイトの濃い帯」として読める。 */ .sec.lp-green{background:linear-gradient(180deg,var(--green) 0%,var(--green-d) 100%)} .sec.lp-green .sec-ghost{color:rgba(232,210,148,.05)} @supports (-webkit-text-stroke:1px red){ .sec.lp-green .sec-ghost{color:transparent;-webkit-text-stroke:1px rgba(232,210,148,.16)} } .sec.lp-green .sec-orn::before{color:var(--gold-l)} .sec.lp-green .sec-orn::after{color:#C9B686} .sec.lp-green .sub-link a{color:var(--gold-l);border-bottom-color:rgba(232,210,148,.6)} /* ==================================================== 3. NUMBERED STEPS == 見学の流れ / お迎えまでの流れ。
    なので順序は文書構造として持ち、 番号は counter で描く（DOM に数字テキストを二重に置かない）。 */ .lp-steps{ display:grid;gap:clamp(16px,1.4vw,24px); margin-top:clamp(30px,2.6vw,46px);counter-reset:lpstep; max-width:calc(var(--measure) + 8em); } .lp-steps>li{ position:relative;list-style:none; padding:clamp(22px,1.9vw,32px) clamp(22px,1.9vw,34px) clamp(20px,1.8vw,28px) clamp(70px,5.6vw,102px); background:linear-gradient(180deg,#FFFDF6 0%,#F6EFDD 100%); border:1px solid rgba(176,139,46,.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); } .lp-steps>li::before{ counter-increment:lpstep;content:counter(lpstep,decimal-leading-zero); position:absolute;left:clamp(22px,1.9vw,34px);top:clamp(20px,1.75vw,30px); font-family:var(--la);font-weight:700;line-height:1; font-size:clamp(23px,1.9vw,32px);letter-spacing:.06em;color:var(--gold-d); } .lp-steps h3{ font-family:var(--jp);font-weight:700; font-size:clamp(19px,1.32vw,23px);line-height:1.55;letter-spacing:.045em; color:#17231D;word-break:auto-phrase; } .lp-steps p{ margin-top:clamp(10px,.9vw,15px); font-family:var(--jp);font-size:clamp(17px,1.14vw,19px);line-height:1.9; letter-spacing:.05em;color:#2E3F37; } .lp-green .lp-steps>li{ background:rgba(255,255,255,.045); border-color:rgba(176,139,46,.45);box-shadow:none; } .lp-green .lp-steps>li::before{color:var(--gold-l)} .lp-green .lp-steps h3{color:var(--gold-h);text-shadow:0 1px 3px rgba(0,0,0,.35)} .lp-green .lp-steps p{color:#DEE9E2} /* ======================================================== 4. TIMELINE ==== dt に短い語、dd に説明。金の細い罫で区切るだけで、点や線の イラストは描かない。 */ .lp-time{margin-top:clamp(28px,2.4vw,44px);max-width:calc(var(--measure) + 8em)} .lp-time>div{ display:grid;grid-template-columns:minmax(0,12em) minmax(0,1fr); gap:clamp(14px,1.4vw,32px); padding:clamp(22px,1.9vw,32px) 0; border-top:1px solid rgba(176,139,46,.42); } .lp-time>div:last-child{border-bottom:1px solid rgba(176,139,46,.42)} .lp-time dt{ font-family:var(--la);font-weight:700;line-height:1.3; font-size:clamp(17px,1.24vw,21px);letter-spacing:.09em;color:var(--gold-d); } .lp-time dt em{ display:block;margin-top:6px;font-style:normal; font-family:var(--jp-s);font-weight:700;font-size:clamp(15px,1.0vw,16.5px); letter-spacing:.1em;color:#6E5A2A; } .lp-time dd{ font-family:var(--jp);font-size:clamp(17px,1.16vw,19.5px);line-height:1.9; letter-spacing:.05em;color:#2E3F37; } .lp-green .lp-time>div{border-color:rgba(232,210,148,.34)} .lp-green .lp-time dt{color:var(--gold-l)} .lp-green .lp-time dt em{color:#C9B686} .lp-green .lp-time dd{color:#DEE9E2} /* =========================================================== 5. FACTS ==== 数値と所在地。2列で、値は本文より一段大きく置く。 */ .lp-facts{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(26px,2.6vw,56px); margin-top:clamp(28px,2.4vw,44px); max-width:calc(var(--measure) + 8em); } .lp-facts>div{ padding:clamp(18px,1.5vw,26px) 0; border-top:1px solid rgba(176,139,46,.42); } .lp-facts dt{ font-family:var(--jp-s);font-weight:700; font-size:clamp(15px,1.0vw,16.5px);letter-spacing:.12em;color:#7D6129; } .lp-facts dd{ margin-top:clamp(8px,.7vw,12px); font-family:var(--jp);font-size:clamp(17px,1.18vw,20px);line-height:1.8; letter-spacing:.045em;color:#2E3F37; } .lp-facts dd b{font-weight:700;color:#17231D} .lp-green .lp-facts>div{border-color:rgba(232,210,148,.34)} .lp-green .lp-facts dt{color:var(--gold-l)} .lp-green .lp-facts dd,.lp-green .lp-facts dd b{color:#DEE9E2} /* ========================================================= 6. GALLERY ==== CSS columns のマソンリー。JavaScript を使わないので、スクリプトを 切っても写真は全部そのまま並ぶ。写真は自分の比率のまま出す （object-fit:cover を使わない = 犬が切れない）。 */ .lp-grid{ columns:3;column-gap:clamp(13px,1.2vw,20px); margin-top:clamp(30px,2.6vw,46px); } .lp-grid figure{ break-inside:avoid;margin:0 0 clamp(13px,1.2vw,20px); background:var(--green-d);border:1px solid rgba(176,139,46,.45); } .lp-grid img{display:block;width:100%;height:auto} .lp-grid figcaption{ padding:clamp(11px,.95vw,16px) clamp(13px,1.1vw,18px); font-family:var(--jp);font-size:clamp(16px,1.0vw,17px);line-height:1.7; letter-spacing:.04em;color:#DCE7E0; } /* ==================================================== 7. FAQ GROUPING ==== .faq（TOP と同じ dl）を4つのまとまりに分けるための見出しだけ。 dl そのものの見た目は親テーマのまま。 */ .lp-qgroup{margin-top:clamp(52px,4.6vw,86px)} .lp-qgroup:first-of-type{margin-top:clamp(26px,2.2vw,38px)} .lp-qgroup-h{ font-family:var(--jp);font-weight:700; font-size:clamp(22px,1.7vw,28px);line-height:1.5;letter-spacing:.05em;color:#17231D; margin-bottom:clamp(6px,.6vw,12px); } /* .faq dd is display:flex, so the answer gets its own flex item and the follow-up link sits inside it as a block. min-width:0 lets the item shrink to the column instead of forcing the row wider. */ .lp-qa-a{min-width:0} .lp-qa-more{display:block;margin-top:clamp(12px,1.0vw,18px)} .lp-qa-more a{ font-family:var(--jp);font-weight:700;font-size:clamp(16px,1.04vw,17.5px); letter-spacing:.05em;color:#5E4712; display:inline-block;padding:13px 0 10px; border-bottom:1px solid rgba(176,139,46,.7); } /* ------------------------------------------------------- TAP TARGETS ----- WCAG 2.5.8 (AA) asks for 44px. Three link styles inherited from the TOP sit between 30 and 38px, and the lower pages lean on all three far more heavily than the TOP does. These rules raise the HIT AREA only — the type size, colour, rule and position are unchanged, and every rule is scoped to .lp so the accepted TOP renders byte-identically. .art .cite is deliberately left alone: it is an inline citation inside a sentence of running copy (the WCAG 2.5.8 "Inline" exception), and the parent stylesheet already documents why raising it would swallow the lines above and below it. */ .lp .sub-link a{padding:12px 0 11px} .lp .kc-link{padding:13px 0 10px} .lp .lp-next-direct a{padding:12px 4px} /* 電話・LINE・メールは連絡そのものの導線。所在地表の中でも 44px を確保する。 */ .lp-facts dd a{display:inline-block;padding:9px 0} /* ==================================================== 8. SMALL PIECES ==== */ /* 出典・補足の小さな注記。本文と混ざらないよう左に金の罫を置く。 */ .lp-note a{ color:var(--gold-d);font-weight:700;text-decoration:none; border-bottom:1px solid rgba(176,139,46,.6); } .lp-green .lp-note a{color:var(--gold-l);border-bottom-color:rgba(232,210,148,.6)} .lp-note{ margin-top:clamp(26px,2.2vw,38px); padding:clamp(16px,1.3vw,22px) clamp(18px,1.5vw,26px); border-left:3px solid rgba(176,139,46,.7); background:rgba(237,228,205,.4); font-family:var(--jp-s);font-size:clamp(16px,1.02vw,17px);line-height:1.86; letter-spacing:.035em;color:#4E5C56; max-width:calc(var(--measure) + 4em); } .lp-green .lp-note{background:rgba(255,255,255,.05);color:#CBD9D1} /* 記事幅の導入文。.art-in と同じ measure に揃える。 R4M1 · この要素は .sec-in でもあるため、親テーマの .sec-in{padding-inline:var(--gut)} を受け取る。--gut は max(--pad, (100vw - 1760px)/2) で、box-sizing は border-box。 自分で max-width を持つ中央寄せカラムがそのまま --gut を抱えると、 広い画面で両者が食い合う: 1920px → gut 80px ×2 / 800px 上限 → 本文 640px 2400px → gut 320px ×2 / 800px 上限 → 本文 160px（約9文字） 2560px → gut 400px ×2 / 800px 上限 → 本文 0px（1文字ずつ改行） 親テーマの .sec-in.narrow は同じ理由で既に --pad に切り替えてある （styles.css の section shell を参照）。ここも同じ扱いにする。 --gut == --pad となる 1760px 以下では、この指定で描画は変わらない。 */ .sec-in.lp-intro{ max-width:calc(var(--measure) + 8em + 2 * var(--pad)); padding-inline:var(--pad); margin-inline:auto; } /* .sec-in を伴わない .lp-intro は存在しないが、単独で使われた場合も 読み幅は同じであるべきなので、上限だけは据え置く。 */ .lp-intro{max-width:calc(var(--measure) + 8em);margin-inline:auto} /* 閉じの直接連絡行。CTA ボタンの下、電話・LINE・メールの一行。 */ .lp-next-direct{ margin-top:clamp(24px,2.0vw,34px); font-family:var(--jp-s);font-size:clamp(16px,1.04vw,17.5px);line-height:2.0; letter-spacing:.04em;color:#4E5C56; } .lp-next-direct a{ display:inline-block;padding:10px 4px;color:#5E4712; border-bottom:1px solid rgba(176,139,46,.6); } .lp-next-direct span{padding:0 4px;color:var(--gold)} /* ギャラリー・親犬ページのスライダー見出しの下に置く注記 */ .lp-galnote a,.lp-terms a{ color:var(--gold-d);font-weight:700;text-decoration:none; border-bottom:1px solid rgba(176,139,46,.6); } .lp-green .lp-galnote a,.lp-green .lp-terms a{ color:var(--gold-l);border-bottom-color:rgba(232,210,148,.6); } .lp-galnote{ margin-top:clamp(14px,1.2vw,20px); font-family:var(--jp-s);font-size:clamp(16px,1.02vw,17px);line-height:1.86; letter-spacing:.035em;color:#5A6862;max-width:var(--measure); } .lp-green .lp-galnote{color:#BFD0C7} /* ================================================= 9. R4D COMPONENTS ===== 本番から移設した6ページ（/026 /about /aboutgolden /contact /movie /topics）が必要とするものだけ。既存の .lp- 部品で足りるところは 何も足していない。 */ /* ------------------------------------------------------ 記事リスト ----- /026.html の1件。動画・見出し・日付・本文で1つのまとまり。 .jr-list（TOP の日付リスト）とは別物: あちらは行、こちらは記事。 */ .lp-post{ max-width:calc(var(--measure) + 10em);margin-inline:auto; padding-block:clamp(38px,3.4vw,64px); border-top:1px solid var(--orn-l); } /* The first entry follows the section intro directly, so it drops the rule but NOT the space — at padding-top:0 the date landed 12px under the last line of the intro paragraph and the two read as one block. */ .lp-post:first-of-type{border-top:0;padding-top:clamp(30px,2.6vw,48px)} .lp-post-date{ font-family:var(--la);font-size:clamp(14px,1.0vw,16px); letter-spacing:.2em;color:var(--gold-d); } .lp-post-date i{font-style:normal;padding:0 3px;opacity:.6} .lp-post h2{ margin-top:clamp(8px,.7vw,12px); font-family:var(--jp);font-weight:700; font-size:clamp(22px,1.7vw,30px);line-height:1.5;letter-spacing:.04em; color:var(--ink);word-break:auto-phrase;line-break:strict; } /* 記事の permalink が移行済みの entry は、本番の index と同じく見出しが リンクになる（content/026.php）。未移行の entry は素のテキストのまま。 */ .lp-post h2 a{ color:inherit;text-decoration:none; border-bottom:1px solid rgba(176,139,46,.55); transition:border-color .2s ease,color .2s ease; } .lp-post h2 a:hover,.lp-post h2 a:focus-visible{color:#5E4712;border-color:var(--gold)} /* 見出しを持たない 6 件の entry だけが使う、記事ページへの導線。見出しリンク と同じ役割なので同じ金の下罫を使い、本文の一部に見えないよう小さく置く。 */ .lp-post-more{margin-top:clamp(16px,1.3vw,22px)} .lp-post-more a{ font-family:var(--jp);font-size:clamp(15px,1vw,16px);letter-spacing:.05em; color:#5E4712;text-decoration:none;display:inline-block;padding:10px 0 9px; border-bottom:1px solid rgba(176,139,46,.55); transition:border-color .2s ease,color .2s ease; } .lp-post-more a:hover,.lp-post-more a:focus-visible{border-color:var(--gold)} .lp-post .vid{margin-top:clamp(20px,1.8vw,32px)} .lp-post-body{margin-top:clamp(20px,1.8vw,32px)} .lp-post-body p{ font-family:var(--jp);font-size:clamp(17px,1.12vw,19px);line-height:2.0; letter-spacing:.045em;color:#33403A;margin-top:1.1em; } .lp-post-body p:first-child{margin-top:0} /* 1本だけの動画は本文幅で。2本並べる .vids は親テーマ側の定義のまま。 */ .vids.vids-one{grid-template-columns:1fr;max-width:calc(var(--measure) + 10em); margin-inline:auto;padding-inline:0} /* ------------------------------------------------- 連絡チャネル ------- /contact.html。3つの手段を横並びにして、どれも同じ重みで見せる。 タップ領域は 44px ではなくカード全体。 */ .lp-ch{ display:grid;grid-template-columns:repeat(3,1fr); gap:var(--seam);background:var(--gold); margin-top:clamp(30px,2.6vw,50px); } .lp-ch a{ display:flex;flex-direction:column;gap:10px; padding:clamp(26px,2.3vw,40px) clamp(20px,1.8vw,32px); background:var(--ivory-2);text-decoration:none; transition:background .18s ease; } .lp-ch a:hover,.lp-ch a:focus-visible{background:#FFFDF6} /* R4M1 · 三つのカードの優先順位。電話が PRIMARY、LINE が SECONDARY、 メールが TERTIARY。面と上罫の強さだけで段を付け、文字組みと余白は 三枚とも同じままにしてある（読み比べられる並びを崩さないため）。 */ .lp-ch a.lp-ch-1{ background:linear-gradient(180deg,#FCF6E2 0%,#F6ECCF 100%); box-shadow:inset 0 4px 0 0 var(--gold-d); } .lp-ch a.lp-ch-1:hover,.lp-ch a.lp-ch-1:focus-visible{background:#FFFBEC} .lp-ch a.lp-ch-2{box-shadow:inset 0 2px 0 0 rgba(176,139,46,.55)} .lp-ch a.lp-ch-3{box-shadow:inset 0 1px 0 0 rgba(176,139,46,.28)} .lp-ch a.lp-ch-1 .lp-ch-k{color:#7E5F1C;font-weight:700} .lp-ch-k{ font-family:var(--la);font-size:clamp(13px,.95vw,15px); letter-spacing:.22em;color:var(--gold-d); } .lp-ch-t{ font-family:var(--jp);font-weight:700; font-size:clamp(20px,1.5vw,26px);letter-spacing:.05em;color:var(--ink); } .lp-ch-p{ font-family:var(--jp);font-size:clamp(16px,1.03vw,17.5px);line-height:1.85; letter-spacing:.04em;color:#4A5A52;margin-top:auto;padding-top:8px; } /* --------------------------------------------------- 規約・方針 ------- /contact.html の個人情報保護方針、/about.html の特商法表記。 本文より一段小さく、番号付きで読ませる。 */ .lp-terms{ max-width:calc(var(--measure) + 4em); margin-top:clamp(24px,2.1vw,38px); counter-reset:lpterm; } .lp-terms>li{ position:relative;padding:0 0 0 2.6em;margin-top:1.05em; font-family:var(--jp);font-size:clamp(16px,1.05vw,17.5px);line-height:1.95; letter-spacing:.04em;color:#3B4842; } .lp-terms>li::before{ counter-increment:lpterm;content:counter(lpterm) "."; position:absolute;left:0;top:0; font-family:var(--la);color:var(--gold-d);letter-spacing:.06em; } .lp-green .lp-terms>li{color:#D6E3DC} .lp-green .lp-terms>li::before{color:var(--gold-l)} /* ------------------------------------------------------ 地図の枠 ------- クリックするまで third-party へは1リクエストも出さない。 JS が無ければただの外部リンクとして機能する。 */ /* Same treatment as the .yt video facade in the accepted stylesheet: a dark plate inside a champagne-gold border. A pale beige rectangle in the middle of the emerald band read as an element that had failed to load. */ .lp-embed{ position:relative;margin-top:clamp(24px,2.1vw,38px); aspect-ratio:16/9;overflow:hidden; background: var(--crest-f) center/clamp(150px,15vw,240px) no-repeat, linear-gradient(180deg,#0A2A20,#04140F); border:3px solid transparent; background-origin:border-box; box-shadow:0 0 0 1px rgba(232,210,148,.55) inset; } .lp-embed.is-live{background:#04140F} .lp-embed>iframe{width:100%;height:100%;display:block} .lp-embed-open{ position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:10px;text-decoration:none; } .lp-embed-lab{ font-family:var(--jp);font-weight:700;font-size:clamp(17px,1.15vw,19.5px); letter-spacing:.14em;text-indent:.14em;color:var(--gold-h); padding:11px clamp(18px,1.4vw,26px); background:rgba(8,34,26,.88);border:1px solid rgba(232,210,148,.6); } .lp-embed-note{ font-family:var(--jp);font-size:clamp(15px,1.0vw,16.5px); letter-spacing:.04em;color:#BFD0C7; } /* --------------------------------------------------- 更新の見出し ----- /topics.html の日付つき項目。リンク先が未移設のものは を持たない ので、リンクではなく項目そのものにスタイルを当てている。 */ .lp-updates{ max-width:calc(var(--measure) + 6em);margin-top:clamp(26px,2.3vw,42px); border-top:1px solid var(--orn-l); } .lp-updates>li{ padding:clamp(18px,1.5vw,26px) 0;border-bottom:1px solid var(--orn-l); } .lp-updates a{display:block;text-decoration:none} .lp-up-date{ font-family:var(--la);font-size:clamp(13px,.95vw,15px); letter-spacing:.2em;color:var(--gold-d); } .lp-up-date i{font-style:normal;padding:0 3px;opacity:.6} .lp-up-t{ display:block;margin-top:6px; font-family:var(--jp);font-weight:700; font-size:clamp(17px,1.2vw,21px);line-height:1.6;letter-spacing:.04em; color:var(--ink); } .lp-updates a:hover .lp-up-t,.lp-updates a:focus-visible .lp-up-t{color:var(--gold-d)} .lp-up-p{ margin-top:8px;font-family:var(--jp); font-size:clamp(16px,1.03vw,17.5px);line-height:1.9;letter-spacing:.04em; color:#4A5A52; } /* On the emerald band the ivory palette above is invisible — the title in --ink on --green-d is roughly 1.2:1. Every colour flips. */ .lp-green .lp-updates{border-top-color:rgba(232,210,148,.34)} .lp-green .lp-updates>li{border-bottom-color:rgba(232,210,148,.34)} .lp-green .lp-up-date{color:var(--gold-l)} .lp-green .lp-up-t{color:var(--gold-h)} .lp-green .lp-up-p{color:#CCDCD3} .lp-green .lp-updates a:hover .lp-up-t, .lp-green .lp-updates a:focus-visible .lp-up-t{color:#FFFFFF} /* ======================================================== RESPONSIVE ===== */ @media (max-width:1199px){ .lp-grid{columns:2} .lp-ch{grid-template-columns:1fr 1fr} .lp-ch a:first-child{grid-column:1 / -1} .lp-hero-plate{width:calc(100% - 2 * var(--gut))} } @media (max-width:699px){ /* 写真 → プレート の縦積み。プレートは画像に重ねない: 390px で重ねると写真がほぼ帯になり、被写体が読めなくなる。 */ .lp-hero{padding-bottom:clamp(22px,5vw,34px)} .lp-hero-media img{height:clamp(210px,54vw,320px)} .lp-hero-plate{ width:calc(100% - 2 * var(--pad)); margin-block:clamp(-40px,-7vw,-26px) 0; margin-inline:var(--pad); padding:24px 20px 22px; } /* 作品版は 390px でも全体を出す。プレートは重ねない。 */ .lp-hero-art .lp-hero-media img{height:auto} .lp-hero-art .lp-hero-plate{margin-block:clamp(-18px,-4vw,-10px) 0;margin-inline:var(--pad)} .lp-hero-h1{font-size:30px} .lp-hero-lead{font-size:18px} .lp-hero-kicker{font-size:15px} .lp-steps>li{padding:20px 18px 18px 62px} .lp-steps>li::before{left:18px;top:19px;font-size:24px} .lp-steps h3{font-size:20px} .lp-steps p{font-size:18px} .lp-time>div{grid-template-columns:1fr;gap:8px;padding:20px 0} .lp-time dt{font-size:18px} .lp-time dd{font-size:18px} .lp-facts{grid-template-columns:1fr;gap:0} .lp-facts dd{font-size:18px} .lp-grid{columns:1;margin-top:26px} .lp-grid figcaption{font-size:16px} .lp-qgroup-h{font-size:22px} .lp-note{font-size:16px;padding:16px 16px} .lp-next-direct{font-size:16px} .lp-next-direct a{display:block;padding:12px 0} .lp-next-direct span{display:none} .lp-galnote{font-size:16px} /* ---- R4D ---- */ .lp-ch{grid-template-columns:1fr} .lp-post h2{font-size:22px} .lp-post-body p{font-size:17px} .lp-terms>li{font-size:16px;padding-left:2.2em} .lp-embed{aspect-ratio:4/3} .lp-up-t{font-size:18px} .lp-up-p{font-size:16px} } /* ═══════════════════════════════════ contact enquiry form (R4J) ═══════════ Additive only. Every selector below is new; nothing above is redefined, so every other lower page keeps serving the bytes R4I accepted. ------------------------------------------------------------------------ */ .lp-form-wrap{max-width:720px;margin-inline:auto} /* The honeypot. Off-screen rather than display:none — a bot that skips hidden fields is exactly the bot this is trying to catch — and paired with aria-hidden + tabindex="-1" in the markup so no keyboard or screen reader user can reach it. */ .lp-form-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .lp-field{margin-top:clamp(18px,1.6vw,26px)} .lp-field>label{ display:block;margin-bottom:8px; font-family:var(--jp);font-weight:700;font-size:clamp(15px,1vw,16.5px); letter-spacing:.06em;color:#3F3A2C} .lp-req{ display:inline-block;margin-left:.6em;padding:2px 8px; font-size:12px;font-weight:700;letter-spacing:.08em; color:#6B2020;background:rgba(150,40,40,.09); border:1px solid rgba(150,40,40,.22)} .lp-field input[type=text], .lp-field input[type=email], .lp-field input[type=tel], .lp-field textarea{ display:block;width:100%;box-sizing:border-box; /* 16px is the floor: below it, iOS Safari zooms the page on focus and the visitor is left scrolled sideways in the middle of a conversion form. */ font-family:var(--jp);font-size:16px;line-height:1.7;color:#2E2A1E; padding:13px 14px;min-height:48px; background:#FFFEFA;border:1px solid rgba(120,100,50,.34);border-radius:0; -webkit-appearance:none;appearance:none} .lp-field textarea{min-height:170px;resize:vertical} .lp-field input:focus-visible, .lp-field textarea:focus-visible, .lp-form-send:focus-visible{ outline:2px solid var(--gold-d);outline-offset:2px; border-color:var(--gold-d);background:#fff} .lp-field-note{ margin-top:8px;font-family:var(--jp);font-size:14px;line-height:1.75; color:#6A6152} /* The consent row: the box and its label sit on one line, and the whole label is the hit area. */ /* The consent row. The checkbox is 28px, and the label beside it is a hit area of its own with at least 44px of height, so the pair is comfortable on a phone without a 44px box dominating the layout. */ .lp-field-check{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .lp-field-check input[type=checkbox]{ flex:none;width:28px;height:28px;margin:0;accent-color:#5E4712;cursor:pointer} .lp-field-check>label{ flex:1 1 15rem;margin:0; display:flex;align-items:center;min-height:44px;cursor:pointer; font-family:var(--jp);font-weight:400;font-size:15.5px;line-height:1.7; color:#3F3A2C} .lp-field-check>label a{color:#5E4712;border-bottom:1px solid rgba(120,100,50,.5)} .lp-field-check .lp-form-err{flex:1 1 100%} /* Error and success. Colour is never the only signal: each carries its own words, and the field keeps its message beside it. */ .lp-form-err{ margin-top:8px;font-family:var(--jp);font-size:14.5px;line-height:1.7; font-weight:700;color:#8C2020} .lp-form-err-top{ margin:0 0 clamp(16px,1.4vw,22px);padding:14px 16px;font-size:15.5px; background:rgba(150,40,40,.07);border-left:3px solid #8C2020} .lp-field.is-err input, .lp-field.is-err textarea{border-color:#8C2020;background:#FFFBFA} .lp-form-ok{ margin:0 0 clamp(18px,1.6vw,26px);padding:16px 18px; font-family:var(--jp);font-size:16px;line-height:1.85;color:#1A4E38; background:rgba(26,80,57,.07);border-left:3px solid #1A5039} /*