で、
base.css の .box-center（1000px）のままだった。他のセクションと同じ 1100px に揃える。
.box-sp はこのページ内で6箇所使われているので、まとめて効かせている。 */
.box-center.box-sp{
max-width: var(--ls-content-w);
}
.ls-mindbox{
/* 本番の円3つは75%（=750px / 容器1000px）。カード1の見出しを1行に
収めるため少し広げてある。見出しの各寸法はこの幅を基準にした比率。 */
max-width: 78%;
margin: 0 auto;
}
/* --- 見出し「さらに3つの安心が研究を支える」 ---------------------------------
旧: solution_mind_h3.png / _sp.png
本番を直接レンダリングして実測（PC=vw1400 / SP=vw520）。
PC の基準容器は .mind-box の 750px（本番の円3枚の左右いっぱい x325-1074）。
こちらの .ls-mindbox は 858px（1100 × 78%）なので、比率で置き直してある。
● PC（1行・左右に横線）実測値は本番の px、括弧内が 750px に対する比率
横線 111px（14.8%）× 1px・#474747 左 x326-436 / 右 x963-1073
横線↔マーカー 41px（5.47%）
黄マーカー x478-768 幅291（38.8%）高18
さらに 字送り 21.5px → font 28.7px
3つの安心が 字送り 34.5px → font 36.3px（4.84%）… マーカーはここまで
研究を支える 字送り 24.5px → font 26.8px マーカーの右端に密着
全幅 748px ≒ 容器いっぱい
● SP（横線が上・2行）実測値は vw520 の px
横線 x41-478 幅438（84.2vw%）1px
黄マーカー x51-465 幅415（79.8vw%）高27
さらに 字送り 28.5px → font 38px
3つの安心が 字送り 48px → font 50.5px（9.71vw）
研究を支える 字送り 33px → font 34.7px（6.67vw）2行目・中央
※ 本番は画像なので vw740 では 435px までしか伸びない（原寸で頭打ち）。
実機幅では流動なので、こちらも上限を付けて同じ振る舞いにしてある。
-------------------------------------------------------------------------- */
/* base.css の `.solution-mind{background:white}` には padding-top も border も
無いので、**先頭の子（見出し）の margin-top がそのまま外へ抜ける**。
SP で見出しに margin-top:2.1vw を入れているため、白い箱ごと 11px 押し下げられ、
上の CTA ボタン行との間に .lab-wrapper の #F0F2F0 がグレーの帯として見えていた
（2026-07-31 先方指摘）。BFC を作ればマージンが内側に収まり、
**見出しの位置は動かさずに白地だけがそこまで届く**。
.solution-item で同じ手を使っている（記録 15-18 と同じ話）。 */
.solution-mind{
display: flow-root;
}
/* セレクタを h3.ls-mind__head（詳細度 0,1,1）にしてあるのは、base.css:10533 の
`.solution-mind h3{margin-bottom:40px}`（0,1,1）に負けないため。
クラス1つ（0,1,0）だと margin-bottom を 40px 固定に奪われる。
**クラス1つに戻してはいけない。** */
h3.ls-mind__head{
display: flex;
align-items: center;
justify-content: center;
gap: 5.47%; /* 横線↔マーカー 41px ÷ 750px */
/* 本番の「見出しの下端→番号の上端」は42px。base.css の 40px をそのまま使うと
24px 相当まで詰まる（本番の見出しは
![]()
、こちらはテキストで行ボックスの
下が余分に出るため）。実測して 61px 相当＝容器858pxの7.1%にしてある。 */
margin: 0 0 7.1%;
font-family: var(--ls-font-gothic);
font-feature-settings: "palt" 1;
font-weight: 700;
color: var(--ls-black);
text-align: center;
}
/* 左右の横線。文字の長さが変わっても中央揃えが崩れないよう、
幅を固定した flex の子として置く。 */
.ls-mind__head::before,
.ls-mind__head::after{
content: "";
flex: 0 0 14.8%; /* 111px ÷ 750px */
height: 1px;
background-color: #474747;
}
/* マーカーと「研究を支える」は本番では密着している。
flex の gap を間に挟ませないため、2つをこの1つにまとめて包む。 */
.ls-mind__head-text{
display: inline-block;
white-space: nowrap;
}
/* 黄色マーカーは「さらに」＋「3つの安心が」の2つをまとめて覆う。
文字サイズが違うので、外側の
に背景を敷いて中で切り替える。 */
.ls-mind__head-mark{
display: inline-block;
padding: 0 .3em; /* 本番のマーカーは文字の外に約.4em。実測で詰めた値 */
background-image: linear-gradient(var(--ls-yellow), var(--ls-yellow));
background-repeat: no-repeat;
background-size: 100% .46em; /* 帯 16px ÷ 36.3px */
background-position: 0 88%;
/* 36.3px ÷ 750px = 4.84%。容器は 1100 × 78% なので 1100 換算で 3.77%。
容器が viewport 追従になる 1100px 未満では 78% × 4.84% = 3.77vw。 */
font-size: clamp(20px, 3.77vw, calc(var(--ls-content-w) * .0377));
line-height: 1.2;
}
.ls-mind__head-sm{
font-size: .71em; /* 本番の字送り21.5pxに合わせた実測値 */
}
.ls-mind__head-md{
font-size: clamp(15px, 2.59vw, calc(var(--ls-content-w) * .0259)); /* 本番の字送り24.5pxに合わせた実測値 */
}
@media screen and (max-width: 768px){
/* SP は本番と同じく「横線が上・文字は2行」。 */
h3.ls-mind__head{
display: block;
/* 本番の隙間（vw520 実測）：上のボタン→罫線 52px、2行目→番号バッジ 41px。
px 固定だと実機幅で詰まるので vw で持つ。 */
margin: 2.1vw 0 12.7vw;
}
.ls-mind__head::before{
display: block;
width: 100%; /* 本番 438px。.ls-mind__head の SP 幅（84.6vw%）と一致する */
max-width: 460px; /* 本番の画像が原寸で止まる幅に合わせる */
margin: 0 auto 7.7vw; /* 本番の罫線→1行目の上端 46px ÷ 520 */
}
.ls-mind__head::after{
display: none;
}
.ls-mind__head-text{
display: block;
}
.ls-mind__head-mark{
padding: 0 .35em; /* 本番のマーカー幅413pxに合わせた実測値 */
font-size: min(9.71vw, 53px);
background-size: 100% .53em; /* 帯 27px ÷ 50.5px */
}
.ls-mind__head-sm{
font-size: .75em; /* 38 ÷ 50.5 */
}
.ls-mind__head-md{
display: block;
margin-top: 2.3vw; /* 本番の行間（1行目の下端→2行目の上端）19px ÷ 520 */
font-size: min(6.33vw, 34px); /* 本番の2行目の描画幅182pxに合わせた実測値 */
}
}
.ls-mind{
display: flex;
align-items: stretch;
/* カード1の見出し「研究倫理委員会申請にも安心」(13字) が
1行に収まる内寸を確保するため、隙間を詰めてカードを広げてある。
3% だと内寸215pxで必要幅とちょうど同じになり、書体差で3行に折れる。 */
gap: 2.4%;
margin: 0;
padding: 0;
list-style: none;
}
.ls-mind__card{
position: relative;
flex: 1 1 0;
display: flex;
flex-direction: column;
margin: 0;
padding: 2.6em .9em 1.5em; /* 上はバッジの逃げ。左右は見出しの折り返し防止で詰めてある */
background-color: #E1F2FC;
border-radius: 12px;
list-style: none;
text-align: center;
font-size: 18px; /* 実測の字送り16.4px ÷ palt 0.92 */
}
/* 番号バッジ。カードの上端に半分かぶせる（円のときと同じ見え方） */
.ls-mind__num{
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
width: 41px;
height: 41px;
border-radius: 50%;
background-color: #002B69;
color: #fff;
font-size: 20px;
font-weight: 700;
line-height: 41px;
text-align: center;
}
/* 「研究倫理委員会申請」は先方が検索に拾わせたいキーワード。
の中に置いてあるので、見出しレベルのテキストとして渡る。 */
.ls-mind__title{
margin: 0;
font-family: var(--ls-font-gothic);
font-feature-settings: "palt" 1;
font-weight: 700;
line-height: 1.45; /* 行送り26px ÷ 18px */
/* カード1の「研究倫理委員会申請にも安心」は13字。palt 込みでも内寸ぎりぎりなので、
環境ごとの書体差で折り返さないよう気持ち詰めてある（見た目には出ない量）。 */
letter-spacing: -.02em;
color: #003D82;
font-size: 1em;
}
.ls-mind__note{
margin: .9em 0 0;
font-family: var(--ls-font-gothic);
font-feature-settings: "palt" 1;
font-weight: 500;
line-height: 1.5;
color: #003D82;
font-size: .78em; /* 14px 相当 */
}
/* Pマーク・YouVoロゴ。認証マーク／ロゴなので改変不可、画像のまま。
★ 幅は必ず「長さ（em）」で指定すること。**% にすると Firefox で消える。**
この SVG は viewBox しか持たない。`width:100%` ＋ `height:auto` だと
Firefox は高さを 0 と計算し、画像が表示されなくなる
（Chrome は viewBox から比率を補うので出てしまい、気付きにくい）。
![]()
に width/height 属性を足しても % のままでは直らないことを確認済み。
.ls-plan__icon も同じ理由で em 指定にしてある。
★ 高さ・max-width を ![]()
に指定しても効かない。
base.css:311 の `#Contents img{ display:block; max-width:100%; height:auto }`
は ID セレクタ（詳細度 1,0,1）で、クラス1つ＋要素（0,1,1）では勝てない。
幅（width）だけは向こうが指定していないので効く。 */
.ls-mind__fig{
margin: 1em auto 0;
}
.ls-mind__fig img{
margin: 0 auto;
}
/* カード内寸240px に対して Pマーク149px（62%）／YouVo 173px（72%）。
カードの font-size（PC 18px）基準の em なので、幅に追従して縮む。 */
.ls-mind__fig--pmark img{ width: 8.3em; aspect-ratio: 108.43 / 108.9; }
.ls-mind__fig--youvo img{ width: 9.6em; aspect-ratio: 227.73 / 72.42; }
/* ボタンはカードの一番下に揃える（カードの高さが違っても下端が並ぶ） */
.ls-mind__btn{
margin: 1.2em 0 0;
padding-top: 0;
}
.ls-mind__card > .ls-mind__btn{
margin-top: auto;
padding-top: 1.2em;
}
/* ---- 3つの安心 SP 指定 ----
base.css は元から縦積み（.mind-box ul{display:block} / li{max-width:90%}）。
.mind-box を外したのでここで書き直す。 */
@media screen and (max-width: 768px){
.ls-mindbox{
max-width: 92%; /* base.css の SP 値と同じ */
}
.ls-mind{
display: block;
}
.ls-mind__card{
max-width: 90%;
margin: 0 auto;
font-size: clamp(15px, 4.4vw, 22px);
}
/* 番号バッジはカードの上端に半分かぶるので、その分だけ隙間が食われる。
base.css の 30px（円のときの値）だと、バッジの上に 9px しか残らず
前のカードとくっついて見える。
本番（vw520）は 円の隙間56px・バッジのはみ出し23px ＝ バッジの上 33px。
こちらはバッジが 2.53em（≒21px @vw375）はみ出すので 2.75em にしてある。 */
.ls-mind__card + .ls-mind__card{
margin-top: 2.75em;
}
.ls-mind__num{
width: 2.3em;
height: 2.3em;
line-height: 2.3em;
font-size: 1.1em;
}
/* SP はカードの font-size が変わる（clamp 15〜22px）ので、
PC と同じ「内寸の62% / 72%」になるよう em を取り直す。 */
.ls-mind__fig--pmark img{ width: 10.7em; }
.ls-mind__fig--youvo img{ width: 12.4em; }
}
/* ---- 3つの安心 ここまで ---- */
/* ==========================================================================
CTA ボタン行 .ls-btnrow
「お見積り・お問い合わせ」＋「TEL」の2つ並び。
ページ内に複数回出てくるので、これ1つで使い回す。
使い方（既存の .solution-btn-box の中で使う）:
アイコンのインライン SVG は FV と同じものを入れる。
実測（公開ページのスクリーンショットから逆算）
行の幅 770px 固定（base.css:10508 .solution-btn-box{max-width:770px}）
ボタン 素材 685×127 が 377px 表示 ＝ 0.5504 倍
本体（ピル）は 650×93 → 357.7×51.2
隙間 2%（15.4px）
文字 素材の字送り 36px × 0.5504 ＝ 19.8px
※ FV のボタン行（.ls-fv__actions）は 649px 幅で文字 16.7px。
こちらは行が広いぶん大きい。同じ .ls-btn を使うが寸法は別物。
========================================================================== */
/* セレクタを ul.ls-btnrow（詳細度 0,1,1）にしてあるのは、
base.css:10515 の `.solution-btn-box ul{display:flex; gap:2%}`（0,1,1）に
負けないため。クラス1つ（0,1,0）だと gap を 2% に奪われ、隙間が半分になる。 */
ul.ls-btnrow{
display: flex;
justify-content: center;
align-items: stretch;
/* base.css の gap:2%（15.4px）は「画像どうし」の隙間。
素材PNGはピルの左右に18px/17px の透明余白を持っているので、
見た目のピルどうしの隙間は 34.6px になる。CSSボタンには余白が無いぶん
ここで足しておかないと、ボタンが太く・隙間が狭くなる。 */
gap: 4.49%; /* 34.6px ÷ 770px */
max-width: 770px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.ls-btnrow > li{
flex: 0 0 46.45%; /* ピル 357.7px ÷ 770px */
margin: 0;
padding: 0;
list-style: none;
}
/* 行幅が 770px 固定なので文字サイズも固定でよい。
769px まで折り返さないことを確認済み（内寸377 に対し実測313）。
20.67px は「素材の字送り 36px × 0.5504」ではなく、**本番のレンダリングと
こちらのレンダリングで文字のインク幅を突き合わせて**決めた値。
字送りから出した 19.8px だと、書体が違うぶん描画幅が 204px にしかならず、
本番の 213px より 4.2% 狭かった（2026-07-31 に測り直して修正）。
文字を大きくするとピルも高くなるので、縦パディングを .63em → .584em に
詰めて高さ 51px を保っている（1.3em × 文字 ＋ 上下パディング = 2.468em）。
単独で置く「お見積り・お問い合わせ」（.contact_box）も本番では CTA 行と
同寸（357×51）なので、同じ値をここでまとめて当てている。 */
.ls-btnrow .ls-btn,
.solution-contact .contact_box .ls-btn{
font-size: 20.67px;
padding-top: .584em;
padding-bottom: .584em;
}
.ls-btnrow .ls-btn{
width: 100%;
}
/* .contact_box は base.css:10733 で display:inline-block。中身が画像1枚から
ボタン1つに変わっただけなので、幅はボタン側で持つ。 */
/* 素材PNG（btn_01.png 685×127）はピルの上に 10px・下に 24px の透明余白を持つ。
表示倍率 0.5504 で 5.5px / 13.2px。CSSボタンにはこの余白が無いので、
マージンで足さないと前後のアキが詰まる（.ls-btnrow の gap と同じ話）。 */
.solution-contact .contact_box .ls-btn{
width: 357.7px;
margin: .27em 0 1.02em;
}
/* ==========================================================================
カード内の「詳しくはこちら」ボタン .ls-btn-more
旧: solution_02_btn.png / solution_03_btn.png
実測（solution_02_btn.png 324×56）
本体 324×56 #D7361A 角丸なし
文字 x 52-246（幅195・7字なので字送り27.9） y13-41 白
▶ x274-287（14×24） 右端から36px＝11.1%
表示サイズは base.css で決まっている:
.solution_02-list ul li{ max-width:min(208px,32%) } カード
.solution_02-list .btn{ max-width:90%; margin:0 auto } ボタンの器
→ 208 × 90% = 187px 固定。字送り 27.9 × (187/324) = 16.1px なので
文字サイズは 16px 固定でよい（可変にする理由がない）。
========================================================================== */
.ls-btn-more{
display: block;
position: relative;
/* 元デザインは文字がやや左寄り（文字の中心が本体の中心より 7.5px 左）。
左右のパディングを非対称にして寄せる。
solution_02（7字「詳しくはこちら」）と solution_03（8字「サンプルはこちら」）は
**文字の中心が同じ位置**なので、同じ値で両方に対応できる。
ただし 8字ぶんの幅（約132px）が入る内寸を残すこと。 */
padding: .5em 2.15em .5em .8em;
background-color: #D7361A;
color: #fff;
font-family: var(--ls-font-gothic);
font-weight: 700;
font-size: 16px;
line-height: 1;
text-align: center;
text-decoration: none;
transition: opacity .2s;
}
.ls-btn-more:link,
.ls-btn-more:visited{ color: #fff; }
/* base.css の .solution_02-list a:hover{opacity:.7} と同じ挙動 */
.ls-btn-more:hover{ opacity: .7; }
/* 画像ボタンでは出せなかったフォーカスリング */
.ls-btn-more:focus-visible{
outline: 3px solid var(--ls-ink);
outline-offset: 2px;
}
/* ▶ は塗りつぶしの三角。border で作ると角丸も影も付かず軽い */
.ls-btn-more::after{
content: "";
position: absolute;
top: 50%;
right: 11.1%; /* 36px ÷ 324px */
transform: translateY(-50%);
border-left: .5em solid currentColor; /* 14 ÷ 27.9 */
border-top: .43em solid transparent; /* 24 ÷ 27.9 ÷ 2 */
border-bottom: .43em solid transparent;
}
/* ==========================================================================
共通ボタン .ls-btn
btn_01.png / btn_02.png / btn_06.png の置き換え。
ページ内で使い回すため FV セクションからは独立させてある。
※ 先方は「ボタンは画像のまま」の想定。差し戻す場合はこのブロックごと外し、
HTML 側のコメントアウトしてある旧マークアップに戻せばよい。
実測（btn_01.png 685×127・PC では 289px 表示 ＝ 0.422 倍）
本体 650×93 → 274×39 角丸は完全なピル
影 本体の 7px 下 → CSS 3px
アイコン 45×34 → 19×14
文字 字送り 36 → 15.2px
山括弧 16×24 → 7×10 右端から 70px(29.5px) 内側
========================================================================== */
.ls-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6em;
position: relative;
box-sizing: border-box;
padding: .63em 2.2em .63em 1.4em; /* 本体の高さ 39px ÷ 文字 15.2px = 2.57em に合わせた値 */
border-radius: 999px;
box-shadow: 0 3px 0 var(--ls-shadow);
font-family: var(--ls-font-gothic);
font-feature-settings: "palt" 1;
font-weight: 700;
line-height: 1.3;
color: #fff;
text-decoration: none;
text-align: center;
letter-spacing: .02em;
transition: opacity .2s, transform .2s, box-shadow .2s;
}
.ls-btn:link,
.ls-btn:visited{ color: #fff; }
/* 既存の a:hover{opacity:.8} と同じ挙動に、押し込みを足す */
.ls-btn:hover,
.ls-btn:focus-visible{
opacity: .8;
transform: translateY(2px);
box-shadow: 0 1px 0 var(--ls-shadow);
}
/* 画像ボタンでは出せなかったフォーカスリング。
キーボード操作時に現在位置が見えないのは CV 直結のボタンで実害になる。 */
.ls-btn:focus-visible{
outline: 3px solid var(--ls-ink);
outline-offset: 2px;
}
/* 右端の山括弧。
素材では**ピルの右端から 41px 内側**（btn_01.png の x582-597 / ピル右端 667 を
0.5504 倍した値と一致）。1.1em だと 23px にしかならず、本番より 17px 外に
出ていた（2026-07-31 に本番と並べて測り直して修正）。 */
.ls-btn::after{
content: "";
position: absolute;
top: 50%;
right: 1.98em; /* 41px ÷ 20.67px */
width: .38em;
height: .38em;
border-top: .11em solid currentColor;
border-right: .11em solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
.ls-btn__icon{
flex: none;
color: currentColor;
}
/* アイコンは実測の縦横比をそのまま持たせる（封筒 45×34 / 電話 34×57 / 矢印 18×27） */
.ls-btn--contact .ls-btn__icon{ width: 1.25em; height: .94em; }
.ls-btn--tel .ls-btn__icon{ width: .78em; height: 1.32em; }
.ls-btn--dl .ls-btn__icon{ width: .92em; height: 1.38em; }
.ls-btn--contact{ background-color: var(--ls-orange); }
.ls-btn--tel { background-color: var(--ls-btn-blue); }
/* 資料ダウンロードだけ山括弧が無く、アイコンが文字の右に付く。
実測（btn_06.png 342×64・PC では 376px 表示 ＝ 1.0994 倍）
ピル 326×47 → 358.4×51.7 文字 216 → 237.5（字送り 19.8px）
矢印 18×27 → 19.8×29.7 文字→矢印 14 → 15.4
**高さを決めているのは行ボックスではなく矢印**（1.38em＝29.7px ＞ 1.3em＝27.95px）。
縦パディングは (51.7 - 29.7) ÷ 2 ＝ 11px ＝ .512em。 */
.ls-btn--dl{
background-color: var(--ls-btn-navy);
padding: .512em 1.4em;
gap: .716em; /* 文字→矢印 15.4px ÷ 21.5px */
}
.ls-btn--dl::after{ content: none; }
/* 単独で置く資料ダウンロードボタン（FV の上と、ページ最下部の2か所）。
FV 内の SP 用ボタン（.ls-fv__actions）とは寸法が別なので、
.ls-btn--dl そのものではなく置き場所側で指定する。 */
.shiryo-btn .ls-btn,
.shiryo-btn-center .ls-btn{
width: 358.4px;
font-size: 21.5px; /* 本番の描画幅 237.5px に合わせた実測値 */
/* 素材PNG（342×64）はピルの上に 5px・下に 12px の透明余白を持つ（表示倍率
1.0994 で 5.5px / 13.2px）。CSSボタンには無いので前後をマージンで埋める。 */
margin: .26em 0 .61em;
}
/* base.css の .box-center は 1000px のままなので、他のセクションと同じ
1100px に揃える。**これを入れないと上のボタンだけ右端が 50px 内側で止まる**
（.shiryo-btn は text-align:right で、FV の右端と揃わなくなる）。 */
.box-center.shiryo-btn,
.box-center.shiryo-btn-center{
max-width: var(--ls-content-w);
}
@media screen and (max-width: 768px){
/* SP は素材の表示幅が変わる（base.css:11136 で max-width:73.7%）。
ピル 365.3px ＝ 70.25vw、文字 21.9px ＝ 4.21vw（vw520 実測）。 */
.shiryo-btn-center .ls-btn{
width: 70.25vw;
font-size: 4.21vw;
}
}
/* 「実績」の下の取引実績ボタン。旧 solution_04_btn.png。
寸法は CTA 行のボタンと同じ（本番 PC 356×51 / SP 362×51＝69.6vw）。
ただし**山括弧が文字のすぐ隣**にあり、CTA のように右端固定ではない。
::after の position を static に戻して flex の並びに入れる。 */
.ls-btn--work{
width: 356px;
padding: .577em 1.4em; /* 本体の高さ 51px */
gap: .66em; /* 文字→山括弧 20px */
background-color: #003899;
font-size: 20.8px;
}
.ls-btn--work::after{
position: static;
transform: rotate(45deg);
}
@media screen and (max-width: 768px){
.ls-btn--work{
width: max(69.6vw, 262px); /* CTA 行と同じ。理由は ul.ls-btnrow のコメント参照 */
font-size: clamp(16px, 4.04vw, 21px);
}
}
/* 電話番号は読ませたい情報なので少し大きく、桁を揃える */
.ls-btn--tel .ls-btn__num{
font-size: 1.2em;
line-height: 1; /* 1.3 のままだと行ボックスが伸びて青ボタンだけ 4px 高くなる */
letter-spacing: .06em;
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
FV / ボタン — SP 指定
base.css がこのページで使っているブレークポイント（max-width:768px）に合わせる。
※ base.css 側は 768px、HTML の は min-width:768px で、
ちょうど 768px のときだけ PC 画像 + SP レイアウトになる既存の不整合がある。
FV は を廃止するのでこの箇所では解消する。
素材は title_sp.png（750×508）。PC とは別のレイアウトで、文字が意図的に大きい。
vw 係数 = 画像 px ÷ 7.5
吹き出し y 0 - 103 塗り x 62 - 693
大見出し 2行組 y 120-203 / 217-281 字送り 70px 行送り 78px
リード文 4行組 y 336-466 字送り 24px 行送り 36px
========================================================================== */
@media screen and (max-width: 768px){
.ls-fv{
padding-bottom: 7%;
}
/* SP はウェッジがより深く食い込む（title_sp.png 実測） */
.ls-fv__wedge--tl{ clip-path: polygon(0 0, 26% 0, 0 62%); }
.ls-fv__wedge--bl{ clip-path: polygon(0 38%, 27% 100%, 0 100%); }
.ls-fv__wedge--tr{ clip-path: polygon(100% 0, 74% 0, 100% 62%); }
.ls-fv__wedge--br{ clip-path: polygon(100% 38%, 73% 100%, 100% 100%); }
/* キャラクターの基準をここに移す。
SP ではボタンが画像エリアの外（下）に出るデザインなので、
キャラはリード文の下端に付かないとボタンと衝突する。 */
.ls-fv__inner{
position: relative;
max-width: 100%;
padding-bottom: 2%;
}
/* SP は時計が塗りの中へ 1.67em も食い込む（PC は 0.91em）。
そのぶん右パディングを大きく取らないと白い下地円が「。」を隠す。 */
.ls-fv__catch{
padding: .5em 1.85em .5em .55em;
font-size: clamp(13px, 5.73vw, 43px);
}
.ls-fv__catch::after{
left: 1.3em;
}
/* SP は塗りが広く、時計は塗りの中へ深く入る（PC は逆に大きくはみ出す） */
.ls-fv__clock{
margin-left: -1.6em; /* 2.22em - 0.62em(はみ出し量) */
}
/* SP の素材は PC ほど字を詰めていない。
実測で 研究室（漢字）は全角送り 39.6px、サポートサービス（カナ）は
その 0.85 倍＝palt そのままの値だった。PC用の letter-spacing を
引き継ぐと見出しだけ 12〜18% 小さくなるので、ここで打ち消す。 */
.ls-fv .ls-fv__title{
margin-top: .6em;
letter-spacing: 0;
font-size: clamp(24px, 10.56vw, 79px);
}
/* リード文は 4 行組。左右のキャラの間に収める */
.ls-fv__lead{
margin-top: 1.4em;
padding: 0 15%;
line-height: 1.5; /* 36px ÷ 24px */
font-size: clamp(11px, 3.2vw, 24px);
}
/* SP のキャラは PC より大きく使われている（元画像実測）。
PC で確定した「箱に対する絵の比率」から逆算した値。 */
.ls-fv__chara--l{ left: 6%; width: 18.3%; }
.ls-fv__chara--r{ right: 3.9%; width: 19.5%; }
/* ボタンは縦積み。タップ領域を確保する
（既存 base.css の SP 指定 max-width:80% / margin:0 auto に揃える） */
.ls-fv__actions{
display: block;
max-width: 80%;
margin: 6% auto 0;
}
.ls-fv__actions > li + li{
margin-top: 3.5%;
}
.ls-fv__actions .ls-btn{
display: flex;
font-size: clamp(16px, 3.6vw, 18px); /* PC と同じく 16px を下限にする */
}
/* CTA ボタン行も SP では縦積み（本番サイトと同じ）。
※ セレクタは必ず ul.ls-btnrow（0,1,1）にすること。メディアクエリは詳細度を
上げないので、.ls-btnrow（0,1,0）だと PC 側の ul.ls-btnrow{display:flex}
に負けて横並びのままになる。 */
ul.ls-btnrow{
display: block;
/* 本番実測（幅520pxで確認）：ピル幅362px＝画面の69.6%、左右の余白79px。
box-sizing が content-box なので padding は max-width の外側に付く。
69.6% ＋ padding 2% で左右79pxになり、本番とぴったり重なる。
下限262px は「お見積り・お問い合わせ」が16pxで1行に収まる幅。実測で
ピル258px（vw370）までは1行、250px（vw360）で2行に折れた。
本番はボタンが画像なので折り返さないが、こちらはテキストなので効く。
vw377px 以上では 69.6vw が勝つので、実機幅では本番と同じ比率になる。
★ % ではなく vw にしてあるのは、この行がページ内で**親の違う2か所**に
出てくるため。ソリューション3の下は .solution-item（SPで画面幅いっぱい）、
プランの下は .box-sp（91.9vw%）の中にあるので、% だと後者だけ
362px→333px と細くなる。本番はどちらも362pxで同じ。 */
max-width: max(69.6vw, 262px);
padding: 4% 2%;
}
.ls-btnrow > li{
flex: none;
}
.ls-btnrow > li + li{
margin-top: 5.5%; /* 本番のピル間 20px ÷ 362px */
}
.ls-btnrow .ls-btn,
.solution-contact .contact_box .ls-btn{
/* 下限16pxはタップ領域の確保。上限21pxは本番のピル幅362px時の描画幅
（PC の 20.67px × 362 ÷ 357）。 */
font-size: clamp(16px, 4.03vw, 21px);
}
.ls-btnrow .ls-btn{
display: flex;
}
/* .contact_box も SP のピルは CTA 行と同じ 362×51（本番実測）。
base.css:11127 の `.contact_box{max-width:92%}` はそのまま効かせる。
★ ここを display:flex にしてはいけない。行ボックスが消えて上のリード文との
アキが 7px 詰まる。inline-flex のまま親の text-align:center で中央に置き、
PC 側の上下マージンをそのまま使う。 */
.solution-contact .contact_box .ls-btn{
width: max(69.6vw, 262px); /* CTA 行と同じ。理由は ul.ls-btnrow のコメント参照 */
}
}
/* ---- FV ここまで ---- */
/* ==========================================================================
4. ご要望・ご予算に応じた 部分的なご利用・組み合わせが可能（10項目）
--------------------------------------------------------------------------
旧: solution_plan_h3.png / _sp.png（見出し）
solution-plan-list.png（PC は10項目が1枚絵）
solution-plan_01〜10_sp.png（SP は10枚）
→ すべてテキスト＋アイコンSVG（solution_icon_01〜10.svg）に置き換え。
本番を直接レンダリングして実測（PC=vw1400 / SP=vw520）。
PC の基準容器は .box-center の 1000px。こちらは 1100px なので倍率 1.1。
● 帯 y5448-5724（高277）x200-1199（幅1000）＝容器いっぱい・#C8DCE4
上下の余白 40 / 39
● カード body 140×90・間隔7・ピッチ147・行間18・5列×2行
行全体 728（容器の72.8%）
● 見出し 容器の75%（750px）＝「3つの安心」の見出しと同じ版面
1行目 字送り22 / 2行目 字送り27.6・黄マーカー451×16
横線 112px（版面の14.93%）
カードの形（本番実測）: 角丸の下 1/4 が右へ「放物線」でずれる吹き出し。
左辺 x = 31 × ((y-64)/25)^2 … 実測と±1px で一致
右辺 x = 140 + 19 × ((y-64)/23)^2
先頭は左の凹みが無く、末尾はしっぽが無い。計3種類。
========================================================================== */
.ls-plan{
background-color: #C8DCE4;
padding: 4% 0 3.9%; /* 40 / 39 ÷ 1000 */
margin-bottom: 4.6%; /* 帯の下端→CTAボタンの上端 46px ÷ 1000 */
}
.ls-plan__list{
display: flex;
flex-wrap: wrap;
column-gap: .96%; /* 7 ÷ 728 */
row-gap: 1.2em; /* 18 ÷ 15 */
width: 72.8%; /* 728 ÷ 1000 */
margin: 0 auto;
padding: 0;
list-style: none;
font-size: clamp(11px, 1.5vw, calc(var(--ls-content-w) * .015));
}
.ls-plan__item{
position: relative;
flex: 0 0 19.23%; /* 140 ÷ 728 */
display: flex;
align-items: center;
justify-content: center;
gap: 1.05em; /* アイコンと文字の間。本番は項目ごとに13〜24pxとばらつくのでその平均 */
height: 6em; /* 90 ÷ 15 */
margin: 0;
padding: 0;
list-style: none;
}
/* カードの白い形。しっぽが右へはみ出すので、本体より広い擬似要素に
SVG を敷いて描く（背景なので中身のレイアウトには影響しない）。 */
.ls-plan__item::before{
content: "";
position: absolute;
inset: 0 -14.3% 0 0; /* しっぽ 20px ÷ 140px */
z-index: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M6 0H134A6 6 0 0 1 140 6V64Q140 76 157 86Q160 88.5 154 89H31Q0 76.5 0 64V6A6 6 0 0 1 6 0Z'/%3E%3C/svg%3E");
}
.ls-plan__item:first-child::before{ /* 左の凹みが無い */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M6 0H134A6 6 0 0 1 140 6V64Q140 76 157 86Q160 88.5 154 89H6A6 6 0 0 1 0 83V6A6 6 0 0 1 6 0Z'/%3E%3C/svg%3E");
}
/* しっぽが無いのは最後の1枚だけ。5枚目（研究倫理審査・承認）は行の右端だが、
次の行へ流れが続くのでしっぽが付く（本番も同じ）。 */
.ls-plan__item:last-child::before{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M6 0H134A6 6 0 0 1 140 6V83A6 6 0 0 1 134 89H31Q0 76.5 0 64V6A6 6 0 0 1 6 0Z'/%3E%3C/svg%3E");
}
.ls-plan__icon,
.ls-plan__label{
position: relative;
z-index: 1;
}
.ls-plan__icon{
display: block;
flex: none;
}
/* アイコンは書き出し原寸（viewBox）を一律の倍率で置く。
SVG に width/height 属性が無いので、1つずつ指定しないと大きさが決まらない。 */
/* 01 */ .ls-plan__icon--01{ width: 1.838em; height: 2.676em; }
/* 02 */ .ls-plan__icon--02{ width: 2.428em; height: 2.473em; }
/* 03 */ .ls-plan__icon--03{ width: 2.043em; height: 2.320em; }
/* 04 */ .ls-plan__icon--04{ width: 2.076em; height: 2.687em; }
/* 05 */ .ls-plan__icon--05{ width: 2.078em; height: 2.078em; }
/* 06 */ .ls-plan__icon--06{ width: 2.630em; height: 2.630em; }
/* 07 */ .ls-plan__icon--07{ width: 1.618em; height: 2.167em; }
/* 08 */ .ls-plan__icon--08{ width: 2.532em; height: 2.369em; }
/* 09 */ .ls-plan__icon--09{ width: 2.213em; height: 2.208em; }
/* 10 */ .ls-plan__icon--10{ width: 2.555em; height: 2.764em; }
.ls-plan__label{
font-family: var(--ls-font-gothic);
font-feature-settings: "palt" 1;
font-weight: 700;
/* 本番は画像なので書体の字幅が違う。実測で本番の描画幅に合わせた値。 */
font-size: 1.07em;
line-height: 1.2;
color: var(--ls-ink);
text-align: center;
white-space: nowrap;
}
/* --- 見出し ------------------------------------------------------------- */
.ls-planhead{
width: 75%; /* 750 ÷ 1000 */
margin: 0 auto .7%; /* 2行目の下端→帯の上端 49px */
padding: 0;
font-family: var(--ls-font-gothic);
font-feature-settings: "palt" 1;
font-weight: 700;
color: var(--ls-black);
text-align: center;
}
.ls-planhead__lead{
display: block;
margin-bottom: .5em; /* 1行目と2行目の間 19px */
font-size: clamp(14px, 2.4vw, calc(var(--ls-content-w) * .024));
line-height: 1.2;
}
.ls-planhead__row{
display: flex;
align-items: center;
justify-content: center;
gap: 4.8%; /* 横線↔マーカー 36 ÷ 750 */
}
.ls-planhead__row::before,
.ls-planhead__row::after{
content: "";
flex: 0 0 14.93%; /* 112 ÷ 750 */
height: 1px;
background-color: #474747;
}
.ls-planhead__mark{
display: inline-block;
background-image: linear-gradient(var(--ls-yellow), var(--ls-yellow));
background-repeat: no-repeat;
background-size: 100% .55em; /* 帯 16px ÷ 29px */
background-position: 0 88%;
font-size: clamp(16px, 2.81vw, calc(var(--ls-content-w) * .0281)); /* 本番の描画幅434pxに合わせた実測値 */
line-height: 1.2;
white-space: nowrap;
}
/* マーカー2つは1つの flex アイテムにまとめる。直接 flex の子にすると
横線用の gap が文字の途中にも入り、黄色い帯が2つに割れる。 */
.ls-planhead__text{
display: inline-block;
white-space: nowrap;
}
/* マーカーは2つの span をまたいで1本に見せる。外側だけ余白を持たせる。 */
.ls-planhead__mark:first-child{ padding-left: .2em; }
.ls-planhead__mark:last-child { padding-right: .35em; }
.ls-br-pc{ display: inline; }
@media screen and (max-width: 768px){
.ls-br-pc{ display: none; }
/* --- 帯とカード（本番 vw520 実測）------------------------------------
帯 x21-498（91.9vw%）＝ .box-sp いっぱい・上下の余白40
カード 440×113・1枚ずつ縦積み・間隔52・下向きのしっぽ38
アイコン 中心が左から60px（カード幅の13.6%）・原寸の1.52倍
文字 中心が左から256px（カード幅の58.2%）・字送り31
------------------------------------------------------------------ */
.ls-plan{
padding: 7.7vw 0 10.4vw; /* 上40 / 下54 ÷ 520 */
/* 帯の下端→CTAボタンの上端 45px。ul.ls-btnrow の padding-top 4%（19px）が
すでに効いているので、その差分だけを持たせる。 */
margin-bottom: 5vw;
}
.ls-plan__list{
display: block;
width: 92%; /* 440 ÷ 478 */
font-size: clamp(13px, 5.85vw, 34px);
}
.ls-plan__item{
display: block;
width: 100%;
height: 3.62em; /* 110 ÷ 30.4 */
}
.ls-plan__item + .ls-plan__item{
margin-top: 1.71em; /* 52 ÷ 30.4 */
}
/* しっぽは下向き。カードの下に 38px（高さの33.6%）はみ出す。 */
.ls-plan__item::before{
inset: 0 0 -33.6% 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 151' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M18 0H422A18 18 0 0 1 440 18V95A18 18 0 0 1 422 113H292C280 118 268 128 264 141C263 147 262 151 260 151C258 151 257 147 256 141C252 128 240 118 228 113H18A18 18 0 0 1 0 95V18A18 18 0 0 1 18 0Z'/%3E%3C/svg%3E");
}
/* 1枚目は PC 側で :first-child（詳細度 0,2,1）に別の形を当てているので、
ここも同じ詳細度で上書きしないと PC の「右向きのしっぽ」が残る。
メディアクエリは詳細度を上げない。 */
.ls-plan__item:first-child::before{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 151' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M18 0H422A18 18 0 0 1 440 18V95A18 18 0 0 1 422 113H292C280 118 268 128 264 141C263 147 262 151 260 151C258 151 257 147 256 141C252 128 240 118 228 113H18A18 18 0 0 1 0 95V18A18 18 0 0 1 18 0Z'/%3E%3C/svg%3E");
}
.ls-plan__item:last-child::before{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 151' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M18 0H422A18 18 0 0 1 440 18V95A18 18 0 0 1 422 113H18A18 18 0 0 1 0 95V18A18 18 0 0 1 18 0Z'/%3E%3C/svg%3E");
}
/* アイコンと文字は本番の位置に合わせて絶対配置する。
横並びの中央揃えだと、項目ごとに文字の長さが違うぶん左右にぶれる。 */
.ls-plan__icon{
position: absolute;
top: 50%;
left: 13.6%; /* 60 ÷ 440 */
transform: translate(-50%, -50%);
font-size: .895em; /* アイコンだけ倍率が違う（原寸の1.52倍） */
}
.ls-plan__label{
position: absolute;
top: 50%;
left: 58.2%; /* 256 ÷ 440 */
transform: translate(-50%, -50%);
width: max-content;
}
/* --- 見出し（横線が上・マーカーは2行）-------------------------------- */
.ls-planhead{
width: 100%;
margin: 0 auto;
}
.ls-planhead::before{
content: "";
display: block;
width: 74.5%; /* 356 ÷ 478 */
height: 2px;
margin: 0 auto 8.8vw; /* 罫線→1行目 46px ÷ 520 */
background-color: #3F3F3F;
}
.ls-planhead__lead{
margin-bottom: .5em;
font-size: clamp(14px, 5.03vw, 29px); /* 本番の描画幅261pxに合わせた実測値 */
}
.ls-planhead__row{
display: block;
}
.ls-planhead__row::before,
.ls-planhead__row::after{
content: none;
}
.ls-planhead__text{
display: block;
}
/* :first-child / :last-child（詳細度 0,2,0）で左右に余白を付けているので、
ここもセレクタを合わせないと padding を消せない。 */
.ls-planhead__mark,
.ls-planhead__mark:first-child,
.ls-planhead__mark:last-child{
display: block;
width: 70.3%; /* 336 ÷ 478 */
margin: 0 auto;
padding: 0;
font-size: clamp(18px, 7.74vw, 45px); /* 本番の描画幅290/317pxに合わせた実測値 */
text-align: center;
}
}
/* ---- ご要望・ご予算 ここまで ---- */
/* ==========================================================================
5. ご利用事例紹介（8ステップ）
--------------------------------------------------------------------------
旧: solution_case.png / solution_case_sp.png（どちらも alt が空だった）
→ テキスト＋アイコンSVG（solution_use_icon_01〜08.svg）に置き換え。
見出し「ご利用事例紹介」とリード文は元からテキストなので触っていない。
本番実測（PC=vw1400・容器1000 / SP=vw520）
● PC カード 163×191・4列・隙間33・行間32・行全体750（容器の75%）
STEP 上から36 / アイコン中心 89.5 / キャプション中心 145
つなぎ棒 31×9・#D8D8D8・上から95
● SP カード 358×89（68.8vw%）・縦積み・間隔31
アイコン中心 (x+41, y+45) / 文字は x+86 から左揃え
つなぎ棒は縦 10×29・カード中央
========================================================================== */
.ls-case{
display: flex;
flex-wrap: wrap;
column-gap: 4.4%; /* 33 ÷ 750 */
row-gap: 1.88em; /* 32 ÷ 17 */
/* 幅は base.css:10672 の `.solution-case .case_box{max-width:75%}` が
すでに 750px（SP は 358px）にしてくれている。ここで 75% を重ねない。 */
margin: 0;
padding: 0;
list-style: none;
font-size: clamp(12px, 1.7vw, calc(var(--ls-content-w) * .017));
text-align: center;
}
.ls-case__item{
position: relative;
/* 4列。21.73% を直接書くと丸め誤差で合計が 100% を超えて3列に落ちるので、
隙間を引いた残りを4等分する形にしておく。 */
flex: 0 0 calc((100% - 13.2%) / 4);
height: 11.24em; /* 191 ÷ 17 */
margin: 0;
padding: 0;
background-color: #E1F2FC;
list-style: none;
}
/* つなぎ棒。行の右端（4枚目・8枚目）には付けない。 */
.ls-case__item:not(:nth-child(4n))::after{
content: "";
position: absolute;
top: 5.59em; /* 95 ÷ 17 */
left: calc(100% + 1px);
width: 1.82em; /* 31 ÷ 17 */
height: .53em; /* 9 ÷ 17 */
transform: translateY(-50%);
background-color: #D8D8D8;
}
.ls-case__no{
position: absolute;
top: 2.12em; /* 36 ÷ 17 */
left: 0;
right: 0;
font-family: var(--ls-font-gothic);
font-size: .94em; /* 16 ÷ 17 */
line-height: 1;
color: var(--ls-ink);
}
.ls-case__fig{
position: absolute;
top: 5.26em; /* アイコンの中心 89.5 ÷ 17 */
left: 0;
right: 0;
display: flex;
justify-content: center;
transform: translateY(-50%);
}
/* アイコンは書き出し原寸（viewBox）を一律の倍率で置く。
幅は必ず長さ（em）で指定すること（% だと Firefox で消える → 15-19）。 */
.ls-case__icon{
display: block;
}
/* 01 */ .ls-case__icon--01{ width: 3.924em; height: 3.150em; }
/* 02 */ .ls-case__icon--02{ width: 2.281em; height: 2.590em; }
/* 03 */ .ls-case__icon--03{ width: 2.672em; height: 2.722em; }
/* 04 */ .ls-case__icon--04{ width: 2.194em; height: 2.219em; }
/* 05 */ .ls-case__icon--05{ width: 2.371em; height: 3.069em; }
/* 06 */ .ls-case__icon--06{ width: 3.050em; height: 2.394em; }
/* 07 */ .ls-case__icon--07{ width: 2.481em; height: 2.321em; }
/* 08 */ .ls-case__icon--08{ width: 2.591em; height: 2.591em; }
.ls-case__label{
position: absolute;
top: 8.53em; /* キャプションの中心 145 ÷ 17 */
left: 0;
right: 0;
transform: translateY(-50%);
font-family: var(--ls-font-gothic);
font-feature-settings: "palt" 1;
font-weight: 700;
line-height: 1.24; /* 行送り21 ÷ 17 */
color: var(--ls-ink);
}
@media screen and (max-width: 768px){
/* SP は縦積み。アイコンが左、文字が右の2段。 */
.ls-case{
display: block;
font-size: clamp(14px, 3.94vw, 24px);
text-align: left;
}
.ls-case__item{
height: 4.34em; /* 89 ÷ 20.5 */
}
.ls-case__item + .ls-case__item{
margin-top: 1.51em; /* 31 ÷ 20.5 */
}
/* つなぎ棒は縦向きでカードの真下・中央 */
.ls-case__item:not(:nth-child(4n))::after,
.ls-case__item:not(:last-child)::after{
content: "";
top: 100%;
left: 50%;
width: .49em; /* 10 ÷ 20.5 */
height: 1.41em; /* 29 ÷ 20.5 */
transform: translateX(-50%);
}
.ls-case__item:last-child::after{
content: none;
}
.ls-case__fig{
top: 50%;
left: 11.45%; /* アイコンの中心 41 ÷ 358 */
right: auto;
transform: translate(-50%, -50%);
}
/* SP はアイコンの基準倍率が違う（原寸の0.97倍）。
さらに本番の SP 画像は**アイコンごとに倍率がバラバラ**（0.72〜0.98倍）で、
幅の広い1・2・6番だけ小さく描かれている。見た目を合わせるため個別に指定する。
（PC 側は一律 0.94 倍で揃っているので、そちらは共通のまま） */
.ls-case__icon{
font-size: .855em;
}
.ls-case__icon--01{ font-size: .634em; } /* 本番 0.72倍 */
.ls-case__icon--02{ font-size: .811em; } /* 本番 0.92倍 */
.ls-case__icon--06{ font-size: .732em; } /* 本番 0.83倍 */
.ls-case__no{
top: 1.02em; /* 21 ÷ 20.5 */
left: 24%; /* 86 ÷ 358 */
right: auto;
transform: none;
font-size: .93em;
}
.ls-case__label{
top: 2.39em; /* 49 ÷ 20.5 */
left: 24%;
right: auto;
transform: none;
white-space: nowrap;
}
}
/* ---- ご利用事例紹介 ここまで ---- */
/* ==========================================================================
6. 料金一覧（9項目）
--------------------------------------------------------------------------
旧: solution_price.png（754×326）/ solution_price_sp.png（231×960）
→ テキスト化。見出し 料金一覧
は元からテキストなので触っていない。
PC は 754px の素材を 750px（.price_box の 75% × 容器1000）で
ほぼ等倍表示していたので、素材の px がそのまま設計値になる。
SP 素材はカードの寸法が PC と1px違いで同一。表示だけ 1.5532 倍
（69vw ÷ 231px）に拡大されていた。
→ **カードの中身は全部 em で持ち、PC と SP で font-size だけ差し替える。**
カードの設計値（素材の実測 px）
カード 230.33 × 88 ／ 角丸5 ／ 枠線 #5EADD4（被覆率で1.25px相当）
白い上段 y 1 - 47（47） 水色の帯 y 48 - 87（40）
列 3列・列間31（753 に対して 4.117%）
行間 PC 31〜32 ／ SP 21
文字（素材の実測インク幅から Yu Gothic で逆算。すべて palt 前提）
品名 20.0px ＝ 1em （ウェイトは下の .ls-price__name を参照）
金額の数字 26.8px ＝ 1.34em （太字）
単位・円〜 15.0〜15.6px ＝ .78em / .75em（太字）
ベースライン 単位・数字・円〜 の3つとも y=76 で揃っている
========================================================================== */
.ls-price{
display: flex;
flex-wrap: wrap;
column-gap: 4.117%; /* 列間 31 ÷ 753 */
row-gap: 1.575em; /* 行間 31.5 ÷ 20 */
/* 幅は base.css:10698 の `.solution-price .price_box{max-width:75%}` が
すでに 750px（SP は 69vw）にしてくれている。ここで 75% を重ねない。 */
margin: 0;
font-family: var(--ls-font-gothic);
font-feature-settings: "palt" 1;
font-size: clamp(13px, 2vw, calc(var(--ls-content-w) * .02)); /* 品名 20px ÷ 容器1000 */
line-height: 1;
color: var(--ls-black);
}
/* base.css:155 の `dl,dt,dd,p,div{line-height:1.5em}` は **単位付き**なので、
子要素は「親の px」をそのまま継承する（比率では継承されない）。
帯の中で 26.8px の数字が 20px 由来の行送りを引き継いでしまうため、
カードの各要素で line-height を明示しておくこと。 */
.ls-price__item{
box-sizing: border-box;
/* 3列。30.59% を直接書くと丸め誤差で合計が 100% を超えて2列に落ちるので、
隙間を引いた残りを3等分する形にしておく（ご利用事例と同じ理由）。 */
flex: 0 0 calc((100% - 8.234%) / 3);
display: flex;
flex-direction: column;
height: 4.4em; /* 88 ÷ 20 */
/* 素材の枠線は被覆率で 1.25px。px 固定にすると SP（1.55倍表示）で細くなるので
em で持たせて、どの幅でも素材と同じ太さになるようにしてある。 */
border: .06em solid var(--ls-price-blue);
border-radius: .25em; /* 5 ÷ 20 */
background-color: #fff;
overflow: hidden; /* 帯の下2角を角丸で切り落とす */
line-height: 1;
}
/* --- 白い上段：品名 ------------------------------------------------------ */
.ls-price__name{
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 素材の品名は幾何中心より 2.8px ほど下に置かれている（手で置いた版面）。
justify-content:center と併用した padding-top は **半分だけ**効くので、
下げたい量の2倍を入れる。級数を変える2枚は em の基準が変わるため、
同じ px になるよう個別に指定し直すこと（下の2つ）。 */
padding: .46em .25em 0;
/* 素材の品名の太さは W500 と W700 のちょうど中間（塗り面積比の実測で
素材 .309 ／ W400 .194 ／ W500 .241 ／ W700 .370）。
W500 は Windows では「游ゴシック Medium」に解決されて近いが、
Hiragino Kaku Gothic ProN は W3/W6 しか持たないため **mac では W400 に落ちる**。
どの環境でも同じ太さで出る 700 を採る（差は +20% で、W500 の -22% と同程度）。 */
font-weight: 700;
line-height: 1.2;
text-align: center;
}
/* 素材では長い品名だけ級数を落として1行に収めている（実測）。
ここを 1em のままにすると、この2枚だけ 4〜8% 大きくなる。
この2枚は素材の版面も標準の1行組と違う位置なので、padding も個別に持つ。 */
.ls-price__name--narrow{ font-size: .93em; padding-top: .19em; } /* 質問紙ブラッシュアップ 18.45px */
.ls-price__name--multi { font-size: .96em; padding-top: .23em; } /* Webサイト制作 19.14px */
.ls-price__note{
display: block;
font-size: .82em; /* 15.7 ÷ 19.14 */
line-height: 1.22; /* 1行目からの送り 19px */
}
/* --- 水色の帯：価格 ------------------------------------------------------ */
.ls-price__fee{
box-sizing: border-box;
flex: 0 0 2em; /* 帯の高さ 40 ÷ 20 */
display: flex;
/* 単位・数字・円〜 は素材でもベースラインが揃っている。
baseline 揃えはクロス方向の先頭に寄るので、位置は padding-top で決める。 */
align-items: baseline;
justify-content: center;
gap: .65em; /* 単位と数字の間 13 ÷ 20 */
padding-top: .48em; /* ベースラインを素材の y=76（帯の上端から28）へ */
margin: 0;
background-color: var(--ls-price-blue);
color: #fff;
font-weight: 700;
line-height: 1;
}
.ls-price__unit{
font-size: .78em; /* 15.6 ÷ 20 */
line-height: 1;
}
.ls-price__amount{
font-size: 1.34em; /* 26.8 ÷ 20 */
line-height: 1;
}
/* 「円〜」だけは数字より小さく、単位ラベルと同じ級数（素材の実測） */
.ls-price__yen{
font-size: .56em; /* 15.0 ÷ 26.8 */
}
@media screen and (max-width: 768px){
/* SP は1列。カードの中身は em なので font-size だけ差し替えれば
素材（69vw に拡大表示）と同じ比率になる。
20px ÷ 230.33px × 69vw = 5.99vw */
.ls-price{
display: block;
font-size: clamp(14px, 5.99vw, 46px);
}
.ls-price__item + .ls-price__item{
margin-top: 1.05em; /* カード間 21 ÷ 20 */
}
}
/* ---- 料金一覧 ここまで ---- */