/* ============================================================ ミセテクサービスページ専用CSS ============================================================ 移植元: /root/work/miseteku-lp/css/style.css 読み込み: functions/miseteku.php が is_page_template('page-service-miseteku.php') で条件付き enqueue（共有の main.css は触らない＝他ページに影響しない）前提: body に `renewal`（旧コーポレートCSSの無効化）・`service-detail`（c-btnのホバー）・ `miseteku`（下記のブランド変数スコープ）が付いていること。これらは page-service-miseteku.php の $pageinfo['navigation'] が出力する。 ============================================================ */ :root { --color-primary: #1A508E; --color-accent: #EA5405; --color-bg-sub: #EFF5F7; --color-text-heading: #204659; --color-text-caption: #6A7280; } /* 実テーマ(landi_renewal)のサービス別ブランド変数。テーマ側は .landi / .tateteku / .yobikomu の3つしか定義しておらず（:rootのフォールバック無し）、ミセテク用のスコープが存在しない。未定義のままだと .p-landi-footer { background-color: var(--cta-color) } 等が初期値になり背景色が出ない。に対してここで定義しておく。将来テーマ本体へ取り込む際は、このブロックを src/scss/main.scss の .yobikomu{…} の隣へ移すだけでよい。 */ .miseteku { --primary-color: #1A508E; /* design/PC/section09.png のCTA帯実測 rgb(26,80,142) */ --cta-color: #1A508E; /* ★要デザイン確認: 他サービスは primary より鮮やかな色を当てている（landi #bd4d3f→#d03a1c / tateteku #46a26f→#00a349 / yobikomu #d06f44→#e56a32） */ --hover-color: #2C6BB5; } /* ============================================================ 共通 ============================================================ */ .js-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .js-reveal.is-in { opacity: 1; transform: none; } /* ============================================================ 最終CTA（.p-landi-footer）のミセテク固有調整 ============================================================ */ /* テーマは .p-landi-footer__kv の width だけをサービスごとに出し分ける作り（既定=landi 80rem / .tateteku 73rem / .yobikomu 63rem）。ミセテクの端末モック images/img_service.png は landi のKVより透明余白が少ない密なトリミングなので、既定の80remでは大きすぎる。 design/PC/section09.png の実測（帯幅に対して約43.6% ＝ 1440pxで約628px）に合わせて 63rem にする。top（12rem）はテーマ既定のまま。 */ .miseteku .p-landi-footer__kv { width: 63rem; } @media (max-width: 1023px) { .miseteku .p-landi-footer__kv { width: 85%; } .miseteku .p-landi-footer { margin-top: 22rem; } } /* ============================================================ Hero（MV） ============================================================ */ .p-mv { background: var(--color-primary); color: #fff; } /* PC: デザインカンプのSVGをそのまま全幅表示 */ .p-mv__image { display: block; width: 100%; height: auto; } /* PC: ヘッダー行のぶんMVを下げ、その帯は白のまま見せる（ヨビコムと同じ見え方）。テーマの .p-service-detail__fv が padding-top:var(--header-height) で作っているのと同じ考え方で、空いた帯には #renewal-wrap の白背景（テーマ側）が出る。 background-clip:content-box が無いと padding 部分まで濃紺で塗られ、ヘッダーがMVに重なって濃紺ロゴが見えなくなる。 --header-height は :root の 7rem。5rem は .l-header.is-fixed スコープなのでスクロールしてもここは動かない（＝MVがガタつかない）。 SP（1023px以下）は元から白帯＋MVが下に来ているので触らない。 ★角丸は .p-mv 自身ではなく子要素 .p-mv__frame に付ける。同じ要素に padding-top（ヘッダー分の余白）と border-radius を両方つけると、角丸のアーチが上部paddingの透明領域内で収まりきってしまい、実際に色が塗られる部分（content-box）の上端は真四角に見えてしまうため（ヨビコム等は外側 .fv（ヘッダー余白用）と内側 .fv-inner（角丸カード）を別要素に分けることでこれを避けている。ここでも同じ構造にする）。 */ @media (min-width: 1024px) { .p-mv { padding-top: var(--header-height); background-clip: content-box; /* ★PCでは .p-mv 自体の背景を白にする。 var(--color-primary)（濃紺）のままだと、.p-mv__frame の外側の余白（margin-inline）が画像とほぼ同じ濃紺色になってしまい、余白も角丸の切り欠きも「色が同じで見えない」状態になる（実テーマの .p-service-detail__fv も背景を持たず、白地に色付きの fv-inner が浮かぶ見え方にすることで角丸・余白を視認できるようにしている）。 SP は .p-mv__copy 自体が濃紺背景の中に乗るデザインのため、この上書きはしない。 */ background: #fff; } .p-mv__frame { /* 実テーマの .p-service-detail__fv-inner（margin-inline:3rem; border-radius:20px）と同じ見え方にする。ヨビコム等の fv-inner はさらに内側に padding（4.41vw等）を取っているが、あちらは「背景（渦模様）」と「前景のUIモックアップ」が別レイヤーで、paddingは前景の配置にのみ効く。ミセテクの mv_pc.webp は背景と前景（カード・スマホ）が1枚に合成済みの写真のため、同じ padding を足すと写真自体の余白＋CSSのpaddingが二重になり、余白過多に見えてしまう。よって内側 padding は付けず、画像はカード内側いっぱいまでベタ張りにする。 */ margin-inline: 3rem; border-radius: 20px; overflow: hidden; /* border-radius+overflow:hidden の角丸クリップに、画像の端が1px程度はみ出て見える描画崩れ（Chromiumのサブピクセル処理でまれに起きる）への対策。独立した合成レイヤーにしてクリップをやり直させることで解消する。 */ transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(#fff, #000); mask-image: radial-gradient(#fff, #000); } } /* PCではテキストを視覚的に隠す（display:noneにせず、SEO・読み上げ用にDOMへ残す） */ @media (min-width: 1024px) { .p-mv__copy { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } } .p-mv__title { font-size: 40px; font-weight: 700; line-height: 1.6; color: #fff; } /* 見出しの強調部分に傍点。ランディPROのSPメインビジュアルと同じ表現 */ .p-mv__title-em { font-style: normal; /* 傍点の見た目のせいで文字が細く見えることがあるため、太さを明示して保険をかける */ font-weight: 700; -webkit-text-emphasis: filled dot #fff; text-emphasis: filled dot #fff; -webkit-text-emphasis-position: over; text-emphasis-position: over; } .p-mv__lead { margin-top: 24px; font-size: 16px; line-height: 1.8; color: #fff; max-width: 440px; } .p-mv__badges { display: flex; gap: 20px; margin-top: 40px; flex-wrap: wrap; } .p-mv__badge { width: 144px; height: 144px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 12px; line-height: 1.5; padding: 12px; } .p-mv__badge b { display: block; font-size: 18px; margin: 4px 0; } /* 端末モックの画像はSP専用 */ .p-mv__device { display: none; } /* SP: SVGはPC専用比率(1374×557)なので非表示にし、HTMLテキスト版のヒーローを表示する。並び順は見出し → ロゴ → 3つの丸 → リード（order で制御。DOM順は見出し → ロゴ → リード → 丸のままにして読み上げ順を自然に保つ） */ @media (max-width: 1023px) { .p-mv { padding: 40px 0 0; overflow: hidden; /* リボン装飾(MV_ribon.png)は敷かず、単色の濃紺背景にする。セクションの外側に余白を作って角丸で浮かせる（ヨビコムのSP MVと同じ見え方）。ページ背景色（白）がそのまま余白に透けるので、ここに背景色を追加する必要はない */ margin: 0 16px; border-radius: 20px; } .p-mv__image { display: none; } .p-mv__copy { display: flex; flex-direction: column; align-items: center; text-align: center; } .p-mv__title { order: 1; font-size: 30px; /* 傍点（.p-mv__title-em）が行間に入るため、やや広めの行送りにする */ line-height: 1.65; } .p-mv__badges { order: 3; width: 100%; margin-top: 26px; gap: 8px; flex-wrap: nowrap; justify-content: center; } .p-mv__badge { /* 3つを横一列に。円のサイズはコンテナ幅に追従させる */ flex: 1 1 0; width: auto; height: auto; max-width: 116px; aspect-ratio: 1 / 1; border-width: 1px; /* 円の内側に収める。円弧に文字が触れないよう小さめに振る */ padding: 6px; font-size: 9.5px; line-height: 1.35; } .p-mv__badge b { font-size: 14px; margin: 2px 0; } .p-mv__lead { order: 4; margin-top: 26px; max-width: none; font-size: 13px; line-height: 1.85; } .p-mv__device { display: block; width: 100%; height: auto; margin-top: 24px; } } /* ============================================================ 悩みあるある ============================================================ */ /* セクション本体・カード一覧は実テーマの .p-service-detail__trouble* / .c-col.col3 のクラス名をそのまま使用。見出しのタイポグラフィは実テーマCSSの有無に依存させず、DESIGN.md記載の値をここで明示する。背景色は次セクション（.p-circle）と揃え、カード見出し内の強調色は他サービスの色(u-txt-green)ではなくミセテク独自のアクセントカラーを使う。 */ .p-problems { background: var(--color-bg-sub); /* MV直下の余白。design/PC/Page_full.png の実測では MV下端から「お客さんとの初回接点で」まで86pxあり、その余白の色は #EFF5F7（＝このセクションの背景色）だった。よって .p-mv の padding-bottom（濃紺になる）ではなく、こちら側の上余白で取る */ padding-top: 80px; /* 実テーマの .p-service-detail__trouble は、絶対配置される trouble-solution画像のために padding-bottom:47.4rem を確保しているが、ミセテクでは「その他大勢の1枚」を別セクション(.p-circle)として実装しているため不要。余分な白い余白が出ないよう打ち消す。次セクション(.p-circle)側のpadding-top(64px)をセクション間の余白として使うため、ここは0にする */ padding-bottom: 0 !important; } .p-service-detail__trouble-card-list { /* 実テーマは margin-bottom:10rem(100px) を持つが、ミセテクでは「その他大勢の1枚」を別セクションにしているため不要。余白は次セクション(.p-circle)のpadding-topに一本化する */ margin-bottom: 0 !important; } @media (max-width: 1023px) { .p-problems { padding-bottom: 0 !important; } } .p-service-detail__section-title { margin-bottom: 30px; } .p-service-detail__section-title.center { text-align: center; } .p-service-detail__section-title-small { display: inline-block; font-family: "YakuHanJP", "line_bold", sans-serif; font-size: 16px; margin-bottom: 10px; color: var(--color-text-heading); } .p-service-detail__section-title-large { font-family: "YakuHanJP", "line_bold", sans-serif; font-size: 36px; line-height: 1.3; color: var(--color-text-heading); } @media (max-width: 1023px) { .p-service-detail__section-title-small { font-size: 12px; } .p-service-detail__section-title-large { font-size: 28px; } } .p-problems__title-mark { color: var(--color-primary); } .u-txt-primary { color: var(--color-primary); } .p-service-detail__trouble-card { display: flex; flex-direction: column; } .p-service-detail__trouble-card-image { /* 実テーマは画像をposition:absolute; left:50%; translate:-50% 0 で中央寄せし、カードごとに異なるbottom/widthをnth-of-typeで指定しているが、ランディ独自の画像サイズに合わせた値なのでミセテクの画像ではカードごとに高さがバラつき、 translateだけはposition:staticにしても残ってしまい左右にずれる。 position/translateとも打ち消してカード内に収め、flexのmargin-top:autoで 3枚とも下端で揃える */ position: static !important; translate: none !important; left: auto !important; margin-top: auto; width: 100% !important; max-width: 100%; } /* ============================================================ その他大勢の1枚 ============================================================ */ .p-circle { background: var(--color-bg-sub); /* padding-bottom は 0。円の下端を下部のとんがり（clip-path）で切り落とすため */ padding: 64px 0 0; overflow: hidden; /* 下のとんがり（中央に頂点）。角度は変更しないこと */ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 50% 100%, 0 calc(100% - 100px)); } .p-circle__inner { position: relative; max-width: 1200px; margin: 0 auto; /* circle_pc.webp は「円の外接矩形＝キャンバス(比1.902)」という構造のため、キャンバスをそのまま置くと円が全部見えてしまう。高さを 1787 → 1450（約81%）に詰めて下端をトリミングし、残った下端を .p-circle の clip-path（とんがり）で斜めに切る */ aspect-ratio: 3398 / 1450; overflow: hidden; } .p-circle__visual { display: block; width: 100%; height: auto; } /* 画像内テキストのSEO用テキスト。display:none は使わずクリップで視覚的に隠す */ .p-circle__copy { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (max-width: 1023px) { .p-circle { padding-top: 40px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 50% 100%, 0 calc(100% - 48px)); } .p-circle__inner { /* SP専用アセット circle_sp.webp（比1.297、写真4枚を円周りに近づけて再レイアウト済み）を使う。以前はPC用アセットを流用し、画面幅に収めるか写真をはみ出させるかの二択でどちらも見づらかったが、専用アセットにしたことでその制約が無くなった */ max-width: none; width: 100%; aspect-ratio: 3915 / 3018; } } /* ============================================================ 88%ドーナツ ============================================================ */ .p-donut { background: #fff; padding: 64px 0; text-align: center; } .p-donut__eyebrow { font-size: 16px; font-weight: 700; color: var(--color-text-heading); } .p-donut__title { font-size: 32px; font-weight: 700; color: var(--color-text-heading); margin-top: 20px; line-height: 1.4; } .p-donut__sub { font-size: 18px; font-weight: 700; color: var(--color-text-heading); margin-top: 32px; } .p-donut__chart-wrap { position: relative; width: 260px; height: 260px; margin: 24px auto 0; } .p-donut__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: var(--color-accent); } .p-donut__num small { font-size: 18px; margin-left: 2px; } .p-donut__source { font-size: 12px; color: var(--color-text-caption); margin-top: 32px; } .p-donut__lead { max-width: 800px; margin: 32px auto 0; font-size: 15px; line-height: 1.9; color: var(--color-text-caption); } /* ============================================================ 会話（吹き出し） ============================================================ */ .p-talk { background: #fff; padding: 48px 0; } /* 会話2・会話3。背景を --color-bg-sub にし、次のセクション（濃紺の .p-feat / .p-teal）とのつなぎ目を「その他大勢の1枚」(.p-circle) と同じとんがりにする。 .p-circle は直後が白セクションかつbody背景も白なので clip-path だけで成立するが、ここは直後が濃紺なので、clipで抜けた左右がbody背景の白のまま残ってしまう。負の margin-bottom で次セクションに重ね、z-index で前面に出すことで抜けた部分から次セクションの濃紺が見えるようにする */ .p-talk--pointed { position: relative; z-index: 1; background: var(--color-bg-sub); /* 48px(下余白) + 100px(とんがりの高さ) */ padding-bottom: 148px; margin-bottom: -100px; /* 下のとんがり。.p-circle と同じ仕様（角度を変えないこと） */ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 50% 100%, 0 calc(100% - 100px)); } /* 直前が白の .p-curve のときだけ、上端を白から薄青へグラデーションでつないで境目をぼかす。 2つ目の .p-talk--pointed は直前の .p-cost が同じ薄青なので、この指定は当たらない（当ててしまうと本来無いはずの白帯が出る） */ .p-curve + .p-talk--pointed { background: linear-gradient( to bottom, #fff 0, var(--color-bg-sub) 160px ); } /* とんがりが次セクションに100px食い込む分、次セクションの上余白を足して見出しが隠れないようにする（.p-feat / .p-teal はどちらも padding-top:72px） */ .p-talk--pointed + .p-feat, .p-talk--pointed + .p-teal { padding-top: calc(72px + 100px); } @media (max-width: 1023px) { .p-talk--pointed { padding-bottom: 96px; margin-bottom: -48px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 50% 100%, 0 calc(100% - 48px)); } .p-talk--pointed + .p-feat, .p-talk--pointed + .p-teal { padding-top: calc(72px + 48px); } } .p-talk--bg { position: relative; /* 背景イラストをそのまま出さず、薄い色を載せた下地を敷く。上下は白セクションと繋がるよう白に寄せ、中間だけ淡く色を置く */ background-image: linear-gradient( to bottom, #ffffff 0%, #edf4f8 32%, #f4fafb 74%, #ffffff 100% ); /* イラストが元比率のまま収まる高さ + 上側の余白を確保 */ --p-talk-bg-w: 100%; --p-talk-bg-h: calc(100vw * 955 / 4080); /* イラスト帯の分だけ確保する。余白を足して帯より背を高くすると吹き出しが帯の上に逃げてしまい「背景の上に乗っかる」見え方にならない */ min-height: var(--p-talk-bg-h); /* ::before を z-index:-1 で敷くため、セクション内で独立した重なり文脈を作る */ isolation: isolate; } /* 背景イラストは擬似要素に分離する。イラスト上端の直線的な境目を消すには mask が必要だが、セクション本体に mask を掛けると吹き出しのテキストまで一緒に薄くなるため、イラスト専用のレイヤーを作ってそこにだけ mask を適用する */ .p-talk--bg::before { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: var(--p-talk-bg-h); z-index: -1; pointer-events: none; background-image: url(../images/service/miseteku/img_bg.png); background-repeat: no-repeat; /* background-size: cover だと 4080×955 の横長イラストが縦に合わせて拡大され、家の屋根が上下で切れてしまう（Figmaでは街並み全体が見えている）。幅いっぱい・高さは元比率のまま（auto）で下端に敷く */ background-position: center bottom; background-size: var(--p-talk-bg-w) auto; /* 吹き出しを引き立てるための加工。 opacity で線画を薄くし、multiply で下地のグラデーション色を線に乗せる（素のグレー線ではなく、下地に馴染んだ淡い青灰色の線になる） */ opacity: 0.42; mix-blend-mode: multiply; /* img_bg.png は屋根が画像の上端で切れているため、そのまま敷くとイラスト上端に横一直線の境目が出る。上へ向かって透明になるマスクで境目をぼかす */ -webkit-mask-image: linear-gradient(to top, #000 0%, #000 34%, rgba(0, 0, 0, 0) 92%); mask-image: linear-gradient(to top, #000 0%, #000 34%, rgba(0, 0, 0, 0) 92%); } @media (max-width: 1023px) { .p-talk--bg { /* SPは幅100%だとイラストが90px程度の細い帯になって何も読み取れないため、 240%に拡大して中央を見せる（左右は画面外にはみ出す） */ --p-talk-bg-w: 240%; --p-talk-bg-h: calc(100vw * 955 / 4080 * 2.4); } } .p-talk .c-grid-inner { max-width: 900px; display: flex; flex-direction: column; gap: 24px; } .p-talk__row { display: flex; align-items: flex-start; gap: 16px; } .p-talk__row--right { flex-direction: row-reverse; } .p-talk__avatar { flex: 0 0 auto; width: 84px; text-align: center; } .p-talk__avatar-img { width: 52px; height: 52px; /* 画像自体が円形デザイン（透明余白あり）なので、背景色・object-fit・border-radiusは付けず画像だけを表示する */ } /* img_chara_chat.svg はドロップシャドウ用の余白が大きく、可視円がキャンバス98pxのうち57px（58%）・中心も約4%上寄りのため、 52px指定だと可視円が約30pxしか描かれない（client_img.pngは可視領域99%）。可視円がちょうど52pxで見えるまで拡大し、負のマージンでレイアウト上の占有サイズは52pxに保つ（可視円の中心もスロット中央へ補正）。 */ .p-talk__avatar-img--mascot { width: 94px; height: 94px; /* 実テーマの img{max-width:100%} が親(.p-talk__avatar, width:84px)基準で効いてしまい、 94px指定なのに84pxへ横だけクランプされ、丸が縦長に潰れて見えていた。 max-width:none で打ち消す */ max-width: none; margin: -17px -21px -25px; } .p-talk__avatar-label { display: block; font-size: 11px; font-weight: 700; margin-top: 6px; color: var(--color-text-heading); white-space: nowrap; } /* 吹き出しはFigma同様に白＋影で浮かせ、アバター側を指すしっぽを付ける。会話1は背景イラストの上、会話2・3は --color-bg-sub の地の上に乗る */ .p-talk__bubble { position: relative; background: #fff; border-radius: 16px; padding: 18px 22px; font-size: 15px; line-height: 1.7; color: var(--color-text-heading); max-width: 620px; box-shadow: 0 10px 24px rgba(32, 70, 89, 0.10), 0 2px 6px rgba(32, 70, 89, 0.05); } .p-talk__bubble::before { content: ""; position: absolute; top: 20px; left: -9px; width: 18px; height: 18px; background: #fff; clip-path: polygon(0 50%, 100% 0, 100% 100%); } .p-talk__row--right .p-talk__bubble::before { left: auto; right: -9px; clip-path: polygon(100% 50%, 0 0, 0 100%); } /* ============================================================ 忘却曲線 ============================================================ */ .p-curve { background: #fff; padding: 64px 0; } .p-curve .c-grid-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; } .p-curve__label { font-size: 14px; font-weight: 700; color: var(--color-text-heading); } .p-curve__title { font-size: 28px; font-weight: 700; color: var(--color-text-heading); margin: 16px 0 20px; line-height: 1.5; } .p-curve__text { font-size: 15px; line-height: 1.9; color: var(--color-text-caption); } .p-curve__legend { display: flex; gap: 24px; font-size: 13px; color: var(--color-text-caption); margin-bottom: 8px; } .p-curve__legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; } .p-curve__chart { width: 100%; } .p-curve__note { font-size: 12px; color: var(--color-text-caption); text-align: center; margin-top: 16px; line-height: 1.7; } @media (max-width: 1023px) { .p-curve .c-grid-inner { grid-template-columns: 1fr; } } /* ============================================================ 機能（青セクション）＋機能デモ＋中CTA ============================================================ */ .p-feat { background: var(--color-primary); color: #fff; padding: 72px 0; /* ヘッダー・フッターの「機能」リンク（#feature）の着地点。固定ヘッダーに見出しが潜らないよう、テーマが #caption に使っているのと同じ式でオフセットする。直前の .p-talk--pointed が100px食い込む分は padding-top 側で吸収済み */ scroll-margin-top: calc(var(--header-height) + 3rem); } .p-feat__title { text-align: center; font-size: 28px; font-weight: 700; line-height: 1.6; } .p-feat__title-mark { color: var(--color-accent); } .p-feat__layout { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center; margin-top: 48px; } .p-feat__col { display: flex; flex-direction: column; gap: 24px; } .p-feat__item { background: rgba(255, 255, 255, 0.08); border: 1px solid transparent; border-radius: 16px; padding: 24px; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s; } .p-feat__item.is-active { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); transform: translateY(-2px); } /* アイコンは廃止し、そのぶんタイトルを大きく見せる。 1200px以上ではカラム幅が固定（.c-grid-inner の 1100px）なので 22px で意図した位置に改行できるが、 1024〜1199px はカラムが狭く、固定22pxだと文の途中で折り返してしまう。 vw で追従させて最小16pxまで落とす */ .p-feat__item-title { font-size: clamp(16px, 1.5vw, 22px); font-weight: 700; line-height: 1.45; color: rgba(255, 255, 255, 0.55); transition: color 0.3s; } .p-feat__item.is-active .p-feat__item-title { color: #fff; } .p-feat__item-body { font-size: 13px; color: rgba(255, 255, 255, 0.4); margin-top: 10px; line-height: 1.7; transition: color 0.3s; } .p-feat__item.is-active .p-feat__item-body { color: rgba(255, 255, 255, 0.85); } .p-feat__phone { display: flex; justify-content: center; } /* ドットインジケーターはSP専用（モック準拠）。PCでは出さない */ .p-feat__dots { display: none; } /* 端末モック（images/demo_mobile.png・1440×2560・画面部分が透明なPNG）。 PIL で実測した画面（透明領域）の位置は 1440×2560 に対して x 237〜1188（幅952）/ y 190〜2277（高さ2088）。これを % に直して .p-demo__frame を重ねている。透明な余白を含む画像なので、実際に見えるスマホの幅は指定幅の約76%になる。 */ .p-demo__device { position: relative; width: min(392px, 80vw); aspect-ratio: 1440 / 2560; flex: 0 0 auto; } .p-demo__bezel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } .p-demo__frame { position: absolute; /* 画面の実測値は left 16.39% / top 7.30% / width 66.18% / height 81.72% だが、ぴったりに合わせると端で1px背景が透けるので、少し外側へ食み出させている。画面の外側はベゼルが不透明なので食み出し分は隠れる。ただし四隅は端末シルエットの角丸より外に出てしまうため border-radius が必須。 */ left: 15.2%; top: 6.4%; width: 68.2%; height: 83.6%; border-radius: 13% / 6%; background: #fff; overflow: hidden; z-index: 1; } .p-demo__image { display: block; width: 100%; height: auto; will-change: transform; } .p-feat__cta { text-align: center; margin-top: 56px; } .p-feat__cta-title { font-size: 18px; font-weight: 700; margin-bottom: 24px; } .p-feat__cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } @media (max-width: 1023px) { /* ============================================================ SPの機能デモ: スティッキー・スクロール連動（モック「ミセテク LP モバイル機能紹介」準拠）デモを上部に sticky で固定し、その下を4枚のパネルが流れる。パネルがフォーカス位置に来ると、そのパネルがアクティブになりデモ内の画面もその機能へ切り替わる（js/main.js が担当）。 DOM順は col(0,1) → phone → col(2,3) なので、 col を display:contents にして4枚を1本の縦列に流し、 phone だけ order:-1 で先頭に出す（HTMLの並びは変えない）。 ============================================================ */ .p-feat__layout { display: flex; flex-direction: column; align-items: stretch; gap: 20px; margin-top: 32px; /* パネルの連番（01〜04）用 */ counter-reset: p-feat-item; } .p-feat__col { display: contents; } .p-feat__phone { order: -1; position: sticky; top: 12px; z-index: 2; /* sticky で固定されている間、下のパネルが端末画像の透明な余白から透けて見えないようセクション色で塗る */ background: var(--color-primary); padding-bottom: 12px; } .p-demo__device { /* 固定したデモの下にパネル1枚分（約234px）の高さが必ず残るサイズにする。端末画像の比率は 1440/2560 なので高さ = 幅×1.778。 31vh を上限に入れることで、画面が短い端末（iPhone SE 667px 等）でもデモが画面の55%程度に収まり、パネルが1枚見える */ width: min(300px, 68vw, 31vh); } /* 右端のドットインジケーター */ .p-feat__dots { display: flex; flex-direction: column; gap: 8px; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); } .p-feat__dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); transition: height 0.3s, background-color 0.3s; } .p-feat__dot.is-active { height: 22px; background: var(--color-accent); } /* パネル。アクティブはモック通りアクセントカラーの枠線で示す */ .p-feat__item { position: relative; counter-increment: p-feat-item; background: rgba(255, 255, 255, 0.06); padding: 20px; } .p-feat__item.is-active { background: rgba(255, 255, 255, 0.14); border-color: var(--color-accent); box-shadow: none; transform: none; } /* 右上の連番（01〜04）。data-panel は0始まりなのでCSSカウンタで採番する */ .p-feat__item::after { content: counter(p-feat-item, decimal-leading-zero); position: absolute; top: 14px; right: 16px; font-family: "tt_norms_normal", sans-serif; font-size: 11px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.35); transition: color 0.3s; } .p-feat__item.is-active::after { color: var(--color-accent); } .p-feat__icon { width: 34px; height: 34px; margin-bottom: 12px; } } /* ============================================================ 紙名刺 vs デジタル名刺コスト比較 ============================================================ */ .p-calc { background: #fff; padding: 96px 0; } .p-calc .c-grid-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; } .p-calc__label { font-size: 14px; font-weight: 700; color: var(--color-text-caption); } .p-calc__title { font-size: 28px; font-weight: 700; color: var(--color-text-heading); margin: 16px 0 20px; line-height: 1.5; } .p-calc__text { font-size: 15px; line-height: 1.9; color: var(--color-text-caption); } .p-calc__vs-row { display: flex; align-items: center; justify-content: center; gap: 20px; } .p-calc__vs-card { flex: 1; background: #fff; border-radius: 20px; padding: 28px 24px; border: 1px solid #eef1f5; box-shadow: 0 10px 30px rgba(26, 80, 142, 0.12); } .p-calc__vs-card.is-highlight { border: 2px solid var(--color-primary); } .p-calc__vs-card-title { text-align: center; font-size: 16px; font-weight: 700; color: var(--color-text-heading); margin-bottom: 16px; } .p-calc__vs-card-cost { text-align: center; font-size: 15px; font-weight: 700; color: var(--color-text-heading); background: var(--color-bg-sub); border-radius: 10px; padding: 10px; margin-bottom: 16px; } .p-calc__vs-card.is-highlight .p-calc__vs-card-cost { background: var(--color-primary); color: #fff; } .p-calc__vs-card-list { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--color-text-caption); line-height: 2; } .p-calc__vs-sep { flex: 0 0 auto; font-size: 16px; font-weight: 700; color: var(--color-text-caption); } .p-calc__vs-note { font-size: 12px; color: var(--color-text-caption); margin-top: 20px; line-height: 1.7; } /* ＼〜／のオレンジ強調。タイトルの上に置く。 .p-cost__callout と全く同じ見た目なのでここで共通定義する。実測値は design/PC/section08.png（p-calc）/ section07.png（p-cost）より。 */ .p-calc__callout, .p-cost__callout { display: flex; width: fit-content; align-items: center; gap: 13px; margin-bottom: 12px; color: var(--color-accent); font-size: 20px; font-weight: 700; line-height: 1; white-space: nowrap; } /* 斜線は 2.6×34px を ±29° 回転（実測: 見た目 18×30px・線幅2.6px・垂直から29°）。回転はレイアウトに影響しないため、左右に 8px の padding を持たせてレイアウト幅を回転後の見た目の幅（約18.3px）と揃える。こうすると gap / margin に実測値をそのまま書けて、バッジの左端もタイトル・ラベルの左端と揃う。padding は塗らないので背景を content-box にクリップする。 */ .p-calc__callout::before, .p-calc__callout::after, .p-cost__callout::before, .p-cost__callout::after { content: ""; width: 2.6px; height: 34px; padding: 0 8px; background: currentColor; background-clip: content-box; } .p-calc__callout::before, .p-cost__callout::before { rotate: -29deg; } .p-calc__callout::after, .p-cost__callout::after { rotate: 29deg; } @media (max-width: 1023px) { .p-calc .c-grid-inner { grid-template-columns: 1fr; } .p-calc__vs-row { flex-direction: column; } } /* ============================================================ 隠れコスト ============================================================ */ .p-cost { background: var(--color-bg-sub); padding: 96px 0; } .p-cost .c-grid-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; } .p-cost__title { font-size: 22px; font-weight: 700; color: var(--color-text-heading); margin-bottom: 28px; } .p-cost__title-mark { color: var(--color-accent); } .p-cost__bar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .p-cost__bar-label { width: 100px; flex: 0 0 100px; font-size: 13px; font-weight: 700; color: var(--color-text-heading); } .p-cost__bar-row.is-miseteku .p-cost__bar-label { color: var(--color-primary); } .p-cost__bar { flex: 1; display: flex; height: 44px; border-radius: 8px; overflow: hidden; } .p-cost__bar-segment { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; width: 0; transition: width 1.1s ease; white-space: nowrap; } .p-cost__bar-segment.is-1 { background: color-mix(in srgb, var(--color-text-caption), white 35%); } .p-cost__bar-segment.is-2 { background: var(--color-text-caption); } .p-cost__bar-segment.is-3 { background: var(--color-text-heading); } .p-cost__bar-segment.is-primary { background: var(--color-primary); border-radius: 8px; } /* .p-cost__callout の見た目は .p-calc__callout と共通定義（上の「紙名刺 vs デジタル名刺」参照） */ .p-cost__note { font-size: 12px; color: var(--color-text-caption); /* 直前の .p-cost__bar-row（margin-bottom:16px）と相殺されるので実測の30pxを指定する */ margin-top: 30px; } .p-cost__lead-label { font-size: 14px; font-weight: 700; color: var(--color-text-caption); } .p-cost__heading { font-size: 28px; font-weight: 700; color: var(--color-text-heading); margin: 16px 0 20px; line-height: 1.5; } .p-cost__text { font-size: 15px; line-height: 1.9; color: var(--color-text-caption); } @media (max-width: 1023px) { .p-cost .c-grid-inner { grid-template-columns: 1fr; } /* グリッド項目の min-width:auto を切る。これが無いと、バーのラベルが縮まない最小幅として効いてしまい、1カラムでも列がビューポート幅を超える */ .p-cost .c-grid-inner > * { min-width: 0; } /* SPは「投資額は、使われ方次第で変えられる」を先に読ませ、その根拠のグラフを後に置く（PCの左右並びとは逆順） */ .p-cost .c-grid-inner > :nth-child(1) { order: 2; } .p-cost .c-grid-inner > :nth-child(2) { order: 1; margin-bottom: 40px; } /* 横棒グラフ: ラベル用の100px列を廃してバーの上に置き、バーに横幅を全部使わせる。これでセグメントの文字が収まる */ .p-cost__bar-row { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 24px; } .p-cost__bar-label { width: auto; flex: none; } /* 親が縦並びになると .p-cost__bar の flex:1（flex-basis:0%）が横幅ではなく高さに効いてバーが潰れるので、flex を切って高さを指定し直す */ .p-cost__bar { flex: none; width: 100%; height: 48px; } .p-cost__bar-segment { /* nowrap のままだと極小画面で必ずあふれる。折り返しを許して逃げ道を作る */ white-space: normal; text-align: center; line-height: 1.25; padding: 0 4px; font-size: 10px; } } /* ============================================================ ティール（最大の商談チャンス） ============================================================ */ .p-teal { background: var(--color-primary); color: #fff; padding: 72px 0; text-align: center; } .p-teal__eyebrow { font-size: 14px; color: rgba(255, 255, 255, 0.75); margin-bottom: 16px; } .p-teal__title { font-size: 24px; font-weight: 700; line-height: 1.7; max-width: 900px; margin: 0 auto; } .p-teal__title-mark { color: var(--color-accent); } .p-teal__visual { margin: 40px auto; max-width: 640px; } .p-teal__visual img { width: 100%; height: auto; } .p-teal__lead { max-width: 760px; margin: 0 auto; font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, 0.85); } .p-teal__cta-heading { font-size: 17px; font-weight: 700; margin-top: 40px; } .p-teal__buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } /* 濃紺セクション（.p-feat / .p-teal）のCTA2本は、最終CTA（.p-landi-footer__btns）と同じ見た目に揃える。縦積みレイアウト自体はテーマの .c-btn:has(.c-btn__lead) が作るので、ここで書くのは寸法と配色だけでよい。rem で書いているのはテーマ側の .p-landi-footer__btns に合わせるため（1600px以上の html{font-size:12.5px} に追従させる） */ .p-feat__cta-buttons .c-btn, .p-teal__buttons .c-btn { width: 30rem; height: 11rem; gap: 0.5rem; box-sizing: border-box; border-color: #fff; } .p-feat__cta-buttons .c-btn__lead, .p-teal__buttons .c-btn__lead { font-size: 1.2rem; font-weight: normal; } .p-feat__cta-buttons .c-btn__txt, .p-teal__buttons .c-btn__txt { font-size: 2.2rem; font-weight: bold; } /* 白ベタの「お問い合わせする」。文字色はミセテクの濃紺 */ .p-feat__cta-buttons .c-btn.contact, .p-teal__buttons .c-btn.contact { background-color: #fff; color: var(--color-primary); border-color: #fff; } /* 枠線ボタンのホバー: 白ベタ＋文字 #204659。ホバーの実体は .c-btn の3つのカスタムプロパティなので変数の上書きで足りる（テーマ側の background-color:var(--hov-bg-color)!important とは競合しない） */ .p-feat__cta-buttons .c-btn:not(.contact), .p-teal__buttons .c-btn:not(.contact) { --hov-bg-color: #fff; --hov-color: var(--color-text-heading); --hov-border-color: #fff; } @media (hover: hover) { /* 白ベタボタンのホバーは最終CTAと同じく文字を白に。テーマ既定の --hov-color(#498989) のままだと濃色地に緑文字で読めない */ .p-feat__cta-buttons .c-btn.contact:hover, .p-teal__buttons .c-btn.contact:hover { color: #fff; } } /* SP: 2本を縦積みにして全幅に。寸法は最終CTAのSP指定（8rem）に合わせる */ @media (max-width: 1023px) { .p-feat__cta-buttons, .p-teal__buttons { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; } .p-feat__cta-buttons .c-btn, .p-teal__buttons .c-btn { width: 100%; height: 8rem; } /* __txt は 2.2rem のまま（最終CTAもSPで下げていない） */ .p-feat__cta-buttons .c-btn__lead, .p-teal__buttons .c-btn__lead { font-size: 1rem; } } /* ============================================================ ミセテクで実現できること ============================================================ */ .p-deliver { background: linear-gradient(180deg, #fff 0%, #eef3f5 100%); padding: 64px 0; } .p-deliver__title { text-align: center; font-size: 28px; font-weight: 700; color: var(--color-text-heading); border-top: 1px solid #e3e9f0; /* 下の線は .p-deliver__row の border-top が担う。ここで border-bottom も引くと2本になるので引かない */ padding: 36px 0; } .p-deliver__row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 48px 0; border-top: 1px solid #e3e9f0; } .p-deliver__row.is-reverse .p-deliver__text { order: 2; } .p-deliver__num { font-size: 40px; font-weight: 700; color: var(--color-text-caption); line-height: 1; } .p-deliver__label { font-size: 13px; font-weight: 700; color: var(--color-text-caption); margin-top: 8px; } .p-deliver__heading { font-size: 20px; font-weight: 700; color: var(--color-text-heading); line-height: 1.5; margin-top: 8px; } .p-deliver__body { font-size: 14px; line-height: 1.9; color: var(--color-text-caption); margin-top: 12px; } .p-deliver__image img { width: 100%; max-width: 420px; height: auto; margin: 0 auto; display: block; } @media (max-width: 1023px) { .p-deliver__row, .p-deliver__row.is-reverse .p-deliver__text { grid-template-columns: 1fr; order: 0; } } /* ============================================================ CTA（ご相談 / 資料請求） ============================================================ */ /* images/img_cta.png（1440×556）の実測値をもとに組んでいる。帯556px / 上端〜CONTACT 約106px / ボタン下端〜下端約106px / コンテンツ幅 1312px（左右64px） / カラム間 129px / ボタン 592×83px */ .p-contact-cards { background: var(--color-primary); color: #fff; padding: 104px 64px; } .p-contact-cards__inner { max-width: 1312px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 128px; } .p-contact-cards__item { display: flex; flex-direction: column; } .p-contact-cards__eyebrow { font-family: "tt_norms_normal", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 20px; } .p-contact-cards__title { font-family: "YakuHanJP", "line_bold", sans-serif; font-size: 32px; line-height: 1.3; } .p-contact-cards__text { margin-top: 48px; /* 本文とボタンの最小間隔。ボタン側の padding では .c-btn の padding:0 に負けるので、間隔は本文の margin-bottom で確保する */ margin-bottom: 32px; font-size: 14px; line-height: 1.8; } /* 配色・角丸・ホバーはテーマの .c-btn.white に任せ、サイズと文字色だけ上書きする。テーマの .full-width は margin-inline:4rem を持ち本文と左右が揃わないので使わない。文字色はデザイン実測でメインカラー(#1A508E＝帯と同色)だったため上書きする（.c-btn.white 既定は #204659） */ .p-contact-cards__btn.c-btn { /* テーマの .c-btn.white は --hov-bg-color / --hov-border-color を #004e5d にハードコードしており、ミセテクの --hover-color を一切参照しない（.c-btn.contact / .c-btn.document には .service-detail 経由の上書きがあるが、 .white バリアントにはそれが無いため）。ここでミセテクLP側から上書きする。 */ --hov-bg-color: var(--hover-color); --hov-border-color: var(--hover-color); display: block; /* 左右カラムで本文の行数が違ってもボタンの位置を揃える */ margin-top: auto; width: 100%; height: 83px; padding: 0; /* .c-btn は border:2px を持つので border-box にして実測値どおり 592×83 にする */ box-sizing: border-box; font-size: 20px; color: var(--color-primary); } /* 上の color 指定（詳細度0,2,0）がテーマのホバー指定（.c-btn:hover ＝ 0,1,0）に勝ってしまい、ホバーで濃色地になっても文字が濃紺のままだった。アイコンは stroke:currentColor なので文字色を白にすれば一緒に白くなる */ @media (hover: hover) { .p-contact-cards__btn.c-btn:hover { color: #fff; } } .p-contact-cards__btn .c-btn__inner { height: 100%; gap: 8px; } .p-contact-cards__icon { flex: 0 0 auto; width: 24px; height: 24px; } @media (max-width: 1023px) { .p-contact-cards { padding: 64px 20px; } .p-contact-cards__inner { grid-template-columns: 1fr; gap: 56px; } .p-contact-cards__title { font-size: 24px; } .p-contact-cards__text { margin-top: 24px; margin-bottom: 24px; } .p-contact-cards__btn.c-btn { height: 64px; font-size: 16px; } .p-contact-cards__icon { width: 20px; height: 20px; } } /* SP: 直後の「お気軽にお問い合わせください」見出しとの余白が広すぎる件の対策。実テーマは h2.c-sp-section-separate に対して「.c-ttl__wrapper の margin-top:5.2rem（52px）」+「.c-ttl__wrapper の padding-top:var(--h2-padding-top)（SPで6rem=60px）」+ 上に薄い区切り線(:before/:after) を足す作りになっている。これは「白背景の内容セクション同士の区切り」を想定した余白で、ヨビコム側の元実装（事例一覧→この見出し、白同士の接続）ではちょうどよい。しかしミセテクでは直前が色付き全幅ブロック(.p-contact-cards) のため、色の切り替わり自体が既に十分な区切りになっており、このテーマ既定の余白がそのまま加算されると合計約176pxの間延びした空白になる。ここだけ、MV直下（.p-mv→.p-problems）と同じ80pxの余白に揃え、区切り線も消す。 */ @media (max-width: 1023px) { /* .c-section{padding-top:15rem} は SP で :not(:first-child) の場合のみ 0 に打ち消される作りだが、ミセテクはこの .p-service-detail__contact を専用の .c-grid-inner でラップしているため :first-child に該当してしまい、 150px超のpadding-topが残ってしまう（ヨビコム側は同じ祖先内で他の要素と並んでいるため :not(:first-child) が効き 0px になっている）。ここで明示的に打ち消し、余白は .c-ttl__wrapper 側の80pxだけに一本化する。 */ .p-contact-cards + .c-grid-inner .p-service-detail__contact { padding-top: 0; } .p-contact-cards + .c-grid-inner .c-ttl__wrapper { margin-top: 0; padding-top: 80px; } .p-contact-cards + .c-grid-inner .c-ttl__wrapper:before, .p-contact-cards + .c-grid-inner .c-ttl__wrapper:after { display: none; } } /* ============================================================ 比較表 ============================================================ */ .p-comparison-table { position: relative; /* コンテンツ幅はテーマ標準の 110rem(1100px) に合わせる */ max-width: 1140px; margin: 0 auto; padding: 96px 20px; } /* 見出しは .p-service-detail__section-title* を流用するので専用の指定は持たない。テーブルまでの間に「おすすめ！」が入るぶん、下余白を広めに取る */ .p-comparison-table .p-service-detail__section-title { margin-bottom: 64px; } .p-comparison-table__table { width: 100%; /* 角丸を効かせるため collapse は使わない */ border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; } .p-comparison-table__table th:nth-child(1) { width: 18%; } .p-comparison-table__table th:nth-child(2), .p-comparison-table__table th:nth-child(3) { width: 25%; } .p-comparison-table__table th:nth-child(4) { width: 32%; } .p-comparison-table__table th, .p-comparison-table__table td { /* 罫線は引かず、行の地色（ゼブラ）で区切りを見せる */ border: 0; padding: 18px 20px; text-align: left; vertical-align: middle; line-height: 1.6; } .p-comparison-table__table thead th { font-family: "YakuHanJP", "line_bold", sans-serif; font-weight: 700; color: var(--color-text-heading); padding-bottom: 16px; } .p-comparison-table__table tbody th { font-family: "YakuHanJP", "line_bold", sans-serif; font-weight: 700; color: var(--color-text-heading); } /* 行のゼブラ */ .p-comparison-table__table tbody tr:nth-child(odd) th, .p-comparison-table__table tbody tr:nth-child(odd) td { background: var(--color-bg-sub); } .p-comparison-table__table tbody tr:nth-child(even) th, .p-comparison-table__table tbody tr:nth-child(even) td { background: #F7FAFB; } /* ミセテク列（4列目）＝ハイライト。ゼブラのセレクタと詳細度を揃えて（0,2,3）後勝ちにするため、 tbody 側は `tbody tr td:last-child` の形にしている */ .p-comparison-table__table thead th:last-child, .p-comparison-table__table tbody tr td:last-child { background: var(--color-primary); color: #fff; } /* ハイライト列も1行おきにわずかに明度を変え、左側のゼブラと行のリズムを合わせる（横方向に目で追いやすくするため） */ .p-comparison-table__table tbody tr:nth-child(even) td:last-child { background: color-mix(in srgb, var(--color-primary) 93%, #fff); } .p-comparison-table__table thead th:last-child { border-radius: 10px 10px 0 0; } .p-comparison-table__table tbody tr:last-child td:last-child { border-radius: 0 0 10px 10px; } /* 「おすすめ！」。ミセテク列の見出しセルを基準に真上へ置く */ .p-comparison-table__table thead th:last-child { position: relative; } .p-comparison-table__badge { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; white-space: nowrap; font-family: "YakuHanJP", "line_bold", sans-serif; font-size: 16px; font-weight: 700; /* 斜線は currentColor なので、この1行で文字と斜線の両方がオレンジになる */ color: var(--color-accent); } /* ＼おすすめ！／の斜線 */ .p-comparison-table__badge::before, .p-comparison-table__badge::after { content: ""; width: 2px; height: 18px; border-radius: 1px; background: currentColor; } .p-comparison-table__badge::before { rotate: -20deg; } .p-comparison-table__badge::after { rotate: 20deg; } .icon { display: inline-block; margin-right: 8px; font-weight: bold; color: var(--color-text-heading); } /* ミセテク列の記号は白文字に */ .p-comparison-table__table tbody tr td:last-child .icon { color: #fff; } @media (max-width: 1023px) { .p-comparison-table { padding: 64px 16px; } .p-comparison-table .p-service-detail__section-title { margin-bottom: 48px; } .p-comparison-table__table { font-size: 11px; } .p-comparison-table__table th, .p-comparison-table__table td { padding: 10px 8px; } .p-comparison-table__table th:nth-child(1) { width: 20%; } .p-comparison-table__table th:nth-child(2), .p-comparison-table__table th:nth-child(3) { width: 24%; } .p-comparison-table__table th:nth-child(4) { width: 32%; } .p-comparison-table__badge { font-size: 12px; gap: 8px; } .p-comparison-table__badge::before, .p-comparison-table__badge::after { height: 14px; } .icon { margin-right: 4px; } } /* ============================================================ ヘッダーロゴのサイズ調整 ============================================================ */ /* 以前は「描画高さを約42pxにする」ため width:20.9rem に広げていたが、ランディPRO（override無し、既定の15.4remのまま）と比べて明らかに大きく見えるため撤回。ランディPROに合わせてテーマ既定（15.4rem/PC、10rem/SP）に戻す。 */