/* ============================================================
doukouban.com — サイト共通CSS（site.css）
index.html のインラインCSSから共通部分を抽出したもの。
赤 #E60012 は「名乗りの赤」。面で使わず、要所にだけ効かせる。
使い方: 下層ページの で
トップ(index.html)は従来どおりインラインCSSのまま（触らない）。
============================================================ */
/* ---------- カラートークン / タイポ基盤 ---------- */
:root{
--red:#E60012;
--red-deep:#C4000F;
--ink:#141414;
--ink-soft:#3c3c3c;
--gray:#767470;
--gray-light:#a3a19c;
--line:#e7e4de;
--bg:#ffffff;
--bg-off:#faf9f6;
--warm:#fff6e2;
--font: -apple-system, "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}
/* ---------- リセット / ベース ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html, body{ overflow-x:clip; }
body{
font-family:var(--font);
color:var(--ink);
background:var(--bg);
line-height:2;
font-size:16px;
letter-spacing:.02em;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img, svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul, ol{ list-style:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }
/* 固定ヘッダー分のアンカーずれ防止 */
[id]{ scroll-margin-top:88px; }
/* ---------- コンテナ ---------- */
.container{
max-width:1120px;
margin-inline:auto;
padding-inline:clamp(20px, 5vw, 40px);
}
/* ---------- accessibility ---------- */
.skip-link{
position:absolute; left:-9999px; top:0;
background:var(--ink); color:#fff; padding:10px 20px; z-index:200;
}
.skip-link:focus{ left:0; }
/* ---------- reveal（JS有効時のみ隠す） ---------- */
html.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
html.js .reveal.in{ opacity:1; transform:none; }
html.js .reveal.d1{ transition-delay:.08s; }
html.js .reveal.d2{ transition-delay:.16s; }
html.js .reveal.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
html.js .reveal{ opacity:1; transform:none; transition:none; }
}
/* ---------- ボタン ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.6em;
font-weight:700; letter-spacing:.06em; line-height:1;
border-radius:6px; transition:all .2s ease; white-space:nowrap;
}
.btn-primary{
background:var(--red); color:#fff;
padding:18px 36px; font-size:15px;
box-shadow:0 2px 10px rgba(230,0,18,.18);
}
.btn-primary:hover{ background:var(--red-deep); transform:translateY(-1px); box-shadow:0 6px 18px rgba(230,0,18,.24); }
.btn-primary .arw{ transition:transform .2s ease; }
.btn-primary:hover .arw{ transform:translateX(3px); }
.btn-ghost{
border:1.5px solid var(--ink); color:var(--ink);
padding:17px 34px; font-size:15px; background:transparent;
}
.btn-ghost:hover{ background:var(--ink); color:#fff; }
.btn-lg{ padding:22px 52px; font-size:17px; border-radius:8px; }
.btn-header{ padding:12px 22px; font-size:13.5px; flex:none; }
/* ---------- テキストリンク ---------- */
.tlink{
display:inline-flex; align-items:center; gap:.5em; flex-wrap:wrap;
color:var(--red); font-weight:700; font-size:14.5px; letter-spacing:.05em;
line-height:1.8;
}
.tlink .arw{ transition:transform .2s ease; }
.tlink:hover .arw{ transform:translateX(4px); }
.tlink .note{ color:var(--gray-light); font-weight:400; font-size:12px; }
/* ---------- セクション共通 ---------- */
section{ padding-block:clamp(60px, 8vw, 100px); }
.sec-head{ margin-bottom:clamp(32px, 5vw, 52px); }
.sec-label{
display:flex; align-items:center; gap:12px;
margin-bottom:22px;
}
.sec-label .dots{ flex:none; }
.sec-label .en{
font-size:11px; font-weight:700; letter-spacing:.24em;
color:var(--red);
}
.sec-label .jp{
font-size:12.5px; font-weight:600; letter-spacing:.14em;
color:var(--gray);
}
.sec-label .rule{ flex:1; height:1px; background:var(--line); max-width:120px; }
h2{
font-size:clamp(24px, 3.4vw, 36px);
font-weight:700; line-height:1.55; letter-spacing:.03em;
font-feature-settings:"palt";
}
.sec-lead{
margin-top:20px; color:var(--ink-soft);
font-size:clamp(14.5px, 1.4vw, 16px);
max-width:40em;
}
.band-off{ background:var(--bg-off); }
.band-ink{ background:var(--ink); color:#fff; }
.band-ink .sec-label .jp{ color:var(--gray-light); }
.band-ink .sec-label .rule{ background:#333; }
.band-ink .sec-lead{ color:#c9c8c4; }
/* ---------- 最上部の赤ルール ---------- */
.brand-rule{ height:4px; background:var(--red); }
/* ---------- ヘッダー ---------- */
.site-header{
position:sticky; top:0; z-index:100;
background:rgba(255,255,255,.94);
-webkit-backdrop-filter:blur(10px) saturate(1.1);
backdrop-filter:blur(10px) saturate(1.1);
border-bottom:1px solid var(--line);
}
.header-inner{
display:flex; align-items:center; gap:28px;
height:68px;
}
.logo{ display:flex; align-items:center; flex:none; }
.logo svg, .logo img{ height:32px; width:auto; }
.gnav{ display:flex; gap:26px; margin-left:auto; }
.gnav a{
font-size:14px; font-weight:600; letter-spacing:.06em; color:var(--ink-soft);
position:relative; padding-block:6px;
}
.gnav a::after{
content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
background:var(--red); transform:scaleX(0); transform-origin:left;
transition:transform .2s ease;
}
.gnav a:hover{ color:var(--ink); }
.gnav a:hover::after{ transform:scaleX(1); }
.gnav a[aria-current="page"]{ color:var(--ink); }
.gnav a[aria-current="page"]::after{ transform:scaleX(1); }
@media (max-width: 960px){
.gnav{ display:none; }
.btn-header{ margin-left:auto; }
}
/* ---------- パンくず（下層ページ用） ---------- */
.breadcrumb{ padding-top:18px; }
.breadcrumb ol{
display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px;
font-size:12px; letter-spacing:.05em; color:var(--gray-light); line-height:1.9;
}
.breadcrumb li{ display:flex; align-items:center; gap:10px; }
.breadcrumb li + li::before{ content:"›"; color:var(--gray-light); }
.breadcrumb a{ color:var(--gray); transition:color .2s ease; }
.breadcrumb a:hover{ color:var(--red); }
.breadcrumb [aria-current="page"]{ color:var(--ink-soft); font-weight:600; }
/* ---------- ページヘッド（下層ページのタイトル部） ---------- */
.page-head{ padding-block:clamp(40px, 6vw, 72px) clamp(16px, 3vw, 28px); }
.page-head .sec-label{ margin-bottom:18px; }
.page-title{
font-size:clamp(28px, 4vw, 44px);
font-weight:800; line-height:1.45; letter-spacing:.02em;
font-feature-settings:"palt";
}
.page-lead{
margin-top:18px; color:var(--ink-soft);
font-size:clamp(14.5px, 1.4vw, 16px); max-width:40em;
}
/* ---------- 補足ノート（赤ドット付き） ---------- */
.cta-note{
display:flex; align-items:flex-start; gap:9px;
margin-top:16px; font-size:13px; color:var(--gray); line-height:1.9;
max-width:36em;
}
.cta-note::before{
content:""; width:7px; height:7px; border-radius:50%;
background:var(--red); flex:none; margin-top:9px;
}
/* ---------- 実写写真カード / ギャラリー ---------- */
.photo-card{
margin:0; background:#fff; border:1px solid var(--line); border-radius:14px;
overflow:hidden; display:flex; flex-direction:column;
}
.photo-card img{
width:100%; max-width:100%; display:block;
flex:1 1 auto; object-fit:cover; min-height:240px; max-height:520px;
}
.photo-card figcaption{
display:flex; align-items:flex-start; gap:9px;
padding:14px 20px 16px;
font-size:12.5px; color:var(--gray); line-height:1.8;
border-top:1px solid var(--line);
}
.photo-card figcaption::before{
content:""; width:6px; height:6px; border-radius:50%;
background:var(--red); flex:none; margin-top:8px;
}
.works-head{ margin-top:clamp(40px, 6vw, 64px); margin-bottom:22px; }
.works-gallery{
display:grid; grid-template-columns:repeat(2, 1fr);
gap:clamp(16px, 2vw, 24px);
}
.works-gallery .photo-card img{
aspect-ratio:1 / 1; flex:none; min-height:0; max-height:none;
}
@media (max-width: 700px){
.works-gallery{ grid-template-columns:1fr; }
}
/* ---------- 3カラムカード（番号付き・立場別など） ---------- */
.roles-grid{
display:grid; grid-template-columns:repeat(3, 1fr);
gap:clamp(16px, 2vw, 24px);
}
.role-card{
background:#fff; border:1px solid var(--line); border-radius:12px;
padding:clamp(26px, 3vw, 36px);
display:flex; flex-direction:column;
transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.role-card:hover{
border-color:#d8d4cc; transform:translateY(-3px);
box-shadow:0 14px 34px -18px rgba(20,20,20,.18);
}
.role-num{
font-size:12px; font-weight:800; letter-spacing:.22em; color:var(--gray-light);
display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.role-num::after{ content:""; flex:1; height:1px; background:var(--line); }
.role-card h3{
font-size:18.5px; font-weight:700; letter-spacing:.04em; line-height:1.6;
font-feature-settings:"palt";
}
.role-card p{
font-size:14px; color:var(--ink-soft); margin-top:14px; line-height:1.95;
flex:1;
}
.role-card .tlink{ margin-top:24px; }
@media (max-width: 860px){
.roles-grid{ grid-template-columns:1fr; }
}
/* ---------- 4カラム小カード（仕様など・白地） ---------- */
.spec-grid{
display:grid; grid-template-columns:repeat(4, 1fr);
gap:clamp(14px, 1.8vw, 20px);
}
.spec-card{
background:#fff; border:1px solid var(--line); border-radius:10px;
padding:24px 22px;
transition:border-color .2s ease, transform .2s ease;
}
.spec-card:hover{ border-color:#d8d4cc; transform:translateY(-2px); }
.spec-card h4{
font-size:15.5px; font-weight:700; letter-spacing:.05em;
display:flex; align-items:center; gap:9px;
}
.spec-card h4::before{
content:""; width:7px; height:7px; border-radius:50%; background:var(--red); flex:none;
}
.spec-card p{ font-size:12.5px; color:var(--gray); margin-top:10px; line-height:1.85; }
.spec-note{
margin-top:32px; font-size:12.5px; color:var(--gray);
padding-left:16px; border-left:2px solid var(--line); line-height:1.9;
}
@media (max-width: 900px){
.spec-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 420px){
.spec-grid{ grid-template-columns:1fr; }
}
/* ---------- 4カラム特長カード（オフ地・帯の上で使う） ---------- */
.feature-grid{
display:grid; grid-template-columns:repeat(4, 1fr);
gap:clamp(14px, 2vw, 22px);
}
.feature{
background:var(--bg-off); border-radius:10px;
padding:24px 22px;
}
.feature h4{
font-size:15.5px; font-weight:700; letter-spacing:.04em;
display:flex; align-items:center; gap:9px;
font-feature-settings:"palt";
}
.feature h4::before{
content:""; width:8px; height:8px; border-radius:50%;
background:var(--red); flex:none;
}
.feature p{ font-size:13px; color:var(--gray); margin-top:10px; line-height:1.85; }
@media (max-width: 900px){
.feature-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 480px){
.feature-grid{ grid-template-columns:1fr; }
}
/* ---------- 図解カード（白地・SVG図＋凡例） ---------- */
.diagram-card{
background:#fff; border:1px solid var(--line); border-radius:14px;
padding:clamp(22px, 3.4vw, 44px);
}
.diagram-card svg{ width:100%; height:auto; }
.diagram-legend{
display:grid; grid-template-columns:repeat(3, 1fr);
gap:14px 26px; margin-top:clamp(20px, 3vw, 30px);
}
.diagram-legend li{
display:flex; gap:12px; align-items:flex-start;
font-size:13.5px; line-height:1.85; color:var(--ink-soft);
}
.diagram-legend .num{
flex:none; width:24px; height:24px; margin-top:3px;
border:1.5px solid var(--red); color:var(--red); border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
font-size:12px; font-weight:800;
}
.diagram-legend b{ display:block; color:var(--ink); font-size:14px; }
@media (max-width: 760px){
.diagram-legend{ grid-template-columns:1fr; }
}
.motif-note{
display:flex; align-items:center; gap:12px;
margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
font-size:12.5px; color:var(--gray); line-height:1.8;
}
.motif-note svg{ width:26px; height:26px; flex:none; border-radius:6px; }
/* ---------- 価格ボックス＋価格式 ---------- */
.pricing-box{
background:#fff; border:1px solid var(--line); border-top:3px solid var(--red);
border-radius:14px;
padding:clamp(30px, 5vw, 56px);
}
.pricing-inner{
display:grid; grid-template-columns:1.1fr .9fr;
gap:clamp(30px, 4vw, 60px); align-items:center;
}
.pricing-copy p{
font-size:14.5px; color:var(--ink-soft); margin-top:18px;
}
.pricing-copy .tlink{ margin-top:26px; }
.formula{
background:var(--bg-off); border-radius:12px;
padding:clamp(24px, 3vw, 36px);
}
.formula-title{
font-size:11.5px; font-weight:800; letter-spacing:.22em; color:var(--gray);
margin-bottom:18px;
}
.formula-row{
display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.formula-row .term{
background:#fff; border:1px solid var(--line); border-radius:6px;
font-size:13.5px; font-weight:700; letter-spacing:.06em;
padding:9px 15px;
display:inline-flex; align-items:center; gap:8px;
}
.formula-row .term::before{
content:""; width:6px; height:6px; border-radius:50%; background:var(--red);
}
.formula-row .op{ color:var(--gray-light); font-weight:700; font-size:14px; }
.formula-row .eq{
color:var(--ink); font-weight:800; font-size:14.5px; letter-spacing:.08em;
margin-right:4px;
}
.formula-note{ font-size:11.5px; color:var(--gray); margin-top:16px; line-height:1.8; }
@media (max-width: 860px){
.pricing-inner{ grid-template-columns:1fr; }
}
/* ---------- ダーク帯（band-ink上の2カラム＋フローレール） ---------- */
.dealer-grid{
display:grid; grid-template-columns:1.15fr .85fr;
gap:clamp(36px, 5vw, 72px); align-items:center;
}
.dealer-copy p{ font-size:14.5px; color:#c9c8c4; margin-top:18px; max-width:36em; }
.dealer-list{ margin-top:28px; display:grid; gap:14px; }
.dealer-list li{
display:flex; gap:13px; align-items:flex-start;
font-size:14.5px; font-weight:600; color:#f0efec; line-height:1.8;
}
.dealer-list li::before{
content:""; width:8px; height:8px; border-radius:50%; background:var(--red);
flex:none; margin-top:12px;
}
.dealer-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; align-items:center; }
.dealer-cta .tlink{ color:#fff; }
.dealer-cta .tlink .note{ color:#8b8b8b; }
.dealer-visual{
border:1px solid #2c2c2c; border-radius:14px;
padding:clamp(26px, 3vw, 40px);
background:linear-gradient(160deg, #1b1b1b 0%, #141414 70%);
}
.dealer-visual .flow{ display:grid; gap:0; }
.flow-step{
display:flex; gap:16px; align-items:flex-start;
}
.flow-rail{
display:flex; flex-direction:column; align-items:center; flex:none; width:22px;
}
.flow-dot{ border-radius:50%; background:var(--red); flex:none; }
.flow-step:nth-child(1) .flow-dot{ width:8px; height:8px; margin-top:9px; }
.flow-step:nth-child(2) .flow-dot{ width:12px; height:12px; margin-top:7px; }
.flow-step:nth-child(3) .flow-dot{ width:16px; height:16px; margin-top:5px; }
.flow-line{ width:1px; flex:1; background:#333; min-height:26px; }
.flow-body{ padding-bottom:22px; }
.flow-step:last-child .flow-body{ padding-bottom:0; }
.flow-body b{ display:block; font-size:15px; letter-spacing:.05em; color:#fff; }
.flow-body span{ display:block; font-size:12.5px; color:#9b9a96; margin-top:4px; line-height:1.8; }
@media (max-width: 860px){
.dealer-grid{ grid-template-columns:1fr; }
}
/* ---------- 会社ファクト（上ボーダー型） ---------- */
.company-grid{
display:grid; grid-template-columns:repeat(3, 1fr);
gap:clamp(16px, 2vw, 24px); margin-top:8px;
}
.fact{
border-top:2px solid var(--ink);
padding-top:22px;
position:relative;
}
.fact::before{
content:""; position:absolute; top:-2px; left:0; width:44px; height:2px;
background:var(--red);
}
.fact .fact-label{
font-size:11.5px; font-weight:800; letter-spacing:.2em; color:var(--gray);
}
.fact .fact-value{
font-size:clamp(20px, 2.2vw, 25px); font-weight:800; letter-spacing:.03em;
margin-top:10px; line-height:1.5; font-feature-settings:"palt";
}
.fact .fact-value small{ font-size:.62em; font-weight:700; color:var(--ink-soft); }
.fact p{ font-size:13px; color:var(--gray); margin-top:10px; line-height:1.85; }
.company-note{
margin-top:32px; font-size:14px; color:var(--ink-soft);
max-width:44em;
}
@media (max-width: 780px){
.company-grid{ grid-template-columns:1fr; }
}
/* ---------- 末尾CTA（全ページ共通） ---------- */
.final-cta{ text-align:center; }
.final-cta h2{ font-size:clamp(26px, 3.8vw, 40px); }
.final-cta .sec-lead{ margin-inline:auto; }
.final-cta-btn{ margin-top:38px; }
.cta-assure{
margin-top:16px; font-size:13px; color:var(--gray); letter-spacing:.04em;
}
.final-tel{
margin-top:34px;
display:flex; flex-direction:column; align-items:center; gap:4px;
}
.final-tel .tel-label{
font-size:12px; font-weight:700; letter-spacing:.18em; color:var(--gray);
}
.final-tel a{
font-size:clamp(24px, 3.4vw, 32px); font-weight:800; letter-spacing:.05em;
color:var(--ink); transition:color .2s ease;
}
.final-tel a:hover{ color:var(--red); }
.final-tel .tel-note{ font-size:12.5px; color:var(--gray); }
.dots-divider{
display:flex; justify-content:center; align-items:center; gap:14px;
margin-bottom:44px;
}
/* ---------- フッター ---------- */
.site-footer{
background:var(--ink); color:#d9d8d4;
padding-block:clamp(56px, 7vw, 84px) 0;
}
.footer-grid{
display:grid; grid-template-columns:1.4fr 1fr 1fr;
gap:clamp(36px, 5vw, 64px);
padding-bottom:clamp(44px, 5vw, 64px);
}
.footer-brand .logo-white svg,
.footer-brand .logo-white img{ height:30px; width:auto; }
.footer-brand .tagline{
font-size:12.5px; color:#9b9a96; margin-top:18px; letter-spacing:.06em;
}
.footer-brand address{
font-style:normal; font-size:13px; color:#b5b4b0; margin-top:22px; line-height:2.1;
}
.footer-brand address b{ color:#fff; font-size:13.5px; letter-spacing:.05em; }
.footer-col h5{
font-size:11.5px; font-weight:800; letter-spacing:.22em; color:#8b8a86;
margin-bottom:20px;
}
.footer-col h5 + ul + h5{ margin-top:32px; }
.footer-col ul{ display:grid; gap:12px; }
.footer-col a{
font-size:13.5px; color:#cfcecb; letter-spacing:.04em;
display:inline-flex; align-items:center; gap:9px;
transition:color .2s ease;
}
.footer-col a::before{
content:""; width:5px; height:5px; border-radius:50%; background:var(--red); flex:none;
}
.footer-col a:hover{ color:#fff; }
.footer-bottom{
border-top:1px solid #2a2a2a;
padding-block:24px;
display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.footer-bottom small{ font-size:11.5px; color:#8b8a86; letter-spacing:.08em; }
@media (max-width: 820px){
.footer-grid{ grid-template-columns:1fr; gap:40px; }
}
/* ============================================================
汎用プレースホルダ：一般的な導光板の均一面発光イメージ
（実写がMarkから届いたら ![]()
に差し替える。RGB/装飾エッジは表現しない）
============================================================ */
.lgp-ph{
position:relative; width:100%; height:100%;
min-height:220px;
display:flex; align-items:center; justify-content:center;
border-radius:14px; overflow:hidden;
background:
radial-gradient(120% 100% at 50% 38%, #ffffff 0%, #fdf7ea 46%, #efe9dc 100%);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
/* 均一発光する薄板本体（面で光る＝一般的な導光板） */
.lgp-ph::before{
content:""; position:absolute; inset:14% 16%;
border-radius:8px;
background:
radial-gradient(130% 120% at 50% 40%, #ffffff 0%, #fffdf6 55%, #fdf3df 100%);
box-shadow:
0 0 34px 6px rgba(255,247,225,.9),
inset 0 0 0 1px rgba(0,0,0,.06);
}
/* 中央キャプション */
.lgp-ph__note{
position:relative; z-index:1;
font-size:12px; letter-spacing:.06em; font-weight:600;
color:var(--gray); background:rgba(255,255,255,.7);
padding:6px 14px; border-radius:999px;
backdrop-filter:saturate(1.1);
}
.lgp-ph__note::before{
content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
background:var(--red); margin-right:8px; vertical-align:middle;
}
/* アスペクト比のバリエーション（枠に高さが無いコンテナ向け） */
.lgp-ph--43{ aspect-ratio:4/3; height:auto; }
.lgp-ph--45{ aspect-ratio:4/5; height:auto; }
.lgp-ph--169{ aspect-ratio:16/9; height:auto; }
.lgp-ph--square{ aspect-ratio:1/1; height:auto; }
/* 濃色カード内に置く場合の反転 */
.lgp-ph--dark{
background:radial-gradient(120% 100% at 50% 38%, #2a2c31 0%, #17181c 70%, #101114 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.lgp-ph--dark .lgp-ph__note{ color:#c9c7c2; background:rgba(255,255,255,.08); }
@media (prefers-reduced-motion: no-preference){
.lgp-ph::before{ animation:lgpBreath 6s ease-in-out infinite; }
}
@keyframes lgpBreath{ 0%,100%{ opacity:.92 } 50%{ opacity:1 } }
/* ---------- 製作イメージの枠に写真を入れたとき ---------- */
.lgp-ph--filled{ background:#101114; }
.lgp-ph--filled::before{ display:none; } /* 疑似の発光板は消す */
.lgp-ph--filled img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover; display:block;
}
.lgp-ph__cap{
position:absolute; right:8px; bottom:7px; z-index:2;
font-size:10.5px; letter-spacing:.04em; line-height:1;
color:rgba(255,255,255,.86); background:rgba(0,0,0,.42);
padding:4px 9px; border-radius:999px;
-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}