/* =========================================================
   パールホワイトプロ トップページ専用CSS
   既存CSS(common.css等)と衝突しないよう、すべて .pwp-top- / .pwp-pr- /
   既存の共通パーツ（pr-track, col-track, pu-track, pu-slide, pu-dot, pu-btn,
   news-item, sns-card, media-grid, pr-cat-list, pr-cat-btn, ph）に限定。
   見出し（h2.en / .pwp-section-head / .pwp-section-head__sub）、ボタン
   （.pwp-btn-outline / .pwp-link-underline）は pwp-common.css 側の定義を
   そのまま利用するため、ここでは再定義しない。
   読み込み順: common.css → pwp-header.css → pwp-footer.css → pwp-common.css → pwp-top.css
   （トップページ（pages_top.html.liquid）でのみ読み込む） */

/* ---------- トップページ全体：既存テーマ(base.css)の .container から脱出 ----------
   base.css の .container は margin:auto + padding-left/right:15px + 画面幅ごとの
   width（〜767px:100%／768px:750px／992px:970px／1200px〜:1170px）を持つため、
   トップページの中身（#pwp-content）がその内側に置かれると、FIRST VIEW のような
   画面幅いっぱいの表示や、各セクションのmax-width（1440px/1320px等）が
   1170pxで天井打ちしてしまう。
   そこで #pwp-content 自体を calc(50% - 50vw) で画面幅いっぱいに脱出させ、
   各セクション側の独自の max-width + margin:0 auto（〇〇__in）で
   改めて中央寄せすることで、デザイン通りの幅を再現する。
   （このクラスは pwp-top.css だけで読み込まれるため、他ページの #pwp-content には影響しません） */
.pwp-top-content {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---------- 既存CSSの a:link/a:visited{color:#333} 対策（トップページ全体） ----------
   既存テーマに `a:link, a:visited { color:#333; }` のような、タグ+疑似クラスの
   指定（詳細度 0,1,1）があり、クラスのみの指定（詳細度 0,1,0）はこれに負けてしまう
   （#pwp-content や #main の有無に関わらず、この詳細度差だけで負ける）。
   .pwp-btn-outline は pwp-common.css 側で #main 配下を想定した対策がされているが、
   トップページでは #main の外に置かれる可能性があるため、同じ詳細度（タグ+クラス+
   疑似クラス）でここでも明示的に上書きしておく。 */
a.pwp-btn-outline:link,
a.pwp-btn-outline:visited,
a.pwp-btn-outline:focus { color: #FFFFFF; }
a.pwp-btn-outline:hover { color: var(--pwp-navy); }
a.pwp-link-underline:link,
a.pwp-link-underline:visited,
a.pwp-link-underline:focus { color: var(--pwp-navy); }
a.pwp-link-underline:hover { color: var(--pwp-blue); }

/* ---------- 1) FIRST VIEW ----------
   キャッチコピーごと1枚の画像にしたため、テキスト重ね用のCSSは廃止。
   画像の縦横比をそのまま生かすため、高さ固定＋object-fit:coverではなく
   width:100% / height:auto（画像の比率に追従）にしている。
   PC画像とSP画像でアスペクト比が違っていても、それぞれの比率で表示される。
   実データ（top_fv_sm.jpg 750×300／比率2.5:1）だと、375px幅で高さ約150px、
   640px幅で約256pxと、画像自体がすでに横長＝低い形なので、下記のような
   固定heightでの上下トリミングは基本的に不要（かえって横が切れてしまう）。
   それでも「もう少し低くしたい」場合だけ、下のコメントアウトを有効にして
   max-heightの値を調整してください（object-positionで残したい部分を指定）。 */
.pwp-top-fv { position: relative; overflow: hidden; }
.pwp-top-fv__media { display: block; width: 100%; line-height: 0; }
.pwp-top-fv__img { display: block; width: 100%; height: auto; }
/*
@media (max-width: 640px) {
  .pwp-top-fv__media { max-height: 130px; overflow: hidden; }
  .pwp-top-fv__img { height: 130px; object-fit: cover; object-position: center; }
}
*/
/* 画像内の文言と同じ内容を持つ、視覚的には隠すh1（SEO/読み上げ用） */
.pwp-top-fv__h1-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---------- 2) PICK UP ---------- */
.pwp-top-pickup { background: #FFFFFF; padding: 32px 0 72px; }
.pwp-top-pickup__in { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.pwp-top-pickup__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  cursor: grab;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pwp-top-pickup__track::-webkit-scrollbar { display: none; }
.pwp-top-pickup__track:active { cursor: grabbing; }
.pwp-top-pickup__slide { flex: 0 0 calc(50% - 12px); scroll-snap-align: start; aspect-ratio: 676/560; position: relative; }
.pwp-top-pickup__slide,
.pwp-top-pickup__slide img { -webkit-user-drag: none; user-drag: none; }
.pwp-top-pickup__media { position: absolute; inset: 0; display: block; }
.pwp-top-pickup__img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.pwp-top-pickup__controls { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; }
.pwp-top-pickup__btn {
  width: 52px; height: 52px; border: 1px solid #B9D0DE; background: #FFFFFF; color: #12304F;
  display: flex; align-items: center; justify-content: center;
}
.pwp-top-pickup__dots { display: flex; gap: 4px; }
.pwp-top-pickup__dot {
  width: 44px; height: 44px; background: none; border: none;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.pwp-top-pickup__dot-bar { display: block; width: 32px; height: 3px; background: #C9DCE7; }
.pwp-top-pickup__dot-bar--active { background: #0B7F6F; }
@media (max-width: 640px) {
  .pwp-top-pickup { padding: 12px 0 36px; }
  .pwp-top-pickup__in { padding: 0; }
  .pwp-top-pickup__controls { padding: 0 20px; }
  .pwp-top-pickup__slide { flex: 0 0 100%; aspect-ratio: 750/680; }
  .pwp-top-pickup__btn { width: 44px; height: 44px; }
}

/* ---------- 3) ABOUT ---------- */
.pwp-top-about { background: #F2F8FB; padding: 112px 0; }
.pwp-top-about__in {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 64px; align-items: center;
}
.pwp-top-about__img { aspect-ratio: 4/5; width: 100%; height: auto; object-fit: cover; display: block; }
.pwp-top-about__text { display: flex; flex-direction: column; gap: 24px; }
.pwp-top-about__head { align-items: flex-start; text-align: left; gap: 6px; }
.pwp-top-about__lead {
  margin: 8px 0 0;
  font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
  font-size: 26px; line-height: 1.7; letter-spacing: .06em;
}
.pwp-top-about__body { margin: 0; font-size: 15px; line-height: 2.1; color: #2E4560; }
.pwp-top-about__cta { align-self: flex-start; margin-top: 8px; }
@media (max-width: 640px) {
  .pwp-top-about { padding-top: 0; }
  .pwp-top-about__in { padding: 0; gap: 32px; }
  .pwp-top-about__text { padding: 0 32px; }
}

/* ---------- 4) PRODUCTS ---------- */
.pwp-top-products { background: #E6F0FA; padding: 104px 0; }
.pwp-top-products__in { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.pwp-top-products__head { margin-bottom: 40px; }
.pwp-top-products__track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 8px; margin: 0 -4px; cursor: grab; touch-action: pan-x pan-y;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pwp-top-products__track::-webkit-scrollbar { display: none; }
.pwp-top-products__track:active { cursor: grabbing; }
.pwp-top-products__nav { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 8px; }
.pwp-top-products__btn {
  width: 44px; height: 44px; border: 1px solid #B9D0DE; background: #FFFFFF; color: #12304F;
  display: flex; align-items: center; justify-content: center;
}
.pwp-top-products__cats { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.pr-cat-btn { height: 48px; padding: 0 28px; font-size: 14px; letter-spacing: .1em; display: flex; align-items: center; }
@media (max-width: 640px) {
  .pr-cat-list { justify-content: flex-start; }
  .pr-cat-btn { flex: 0 0 calc(50% - 4px); height: 40px; padding: 0 8px; font-size: 12px; justify-content: center; }
}

/* ---- PRODUCTS カード（イチオシ／新着／セールを統合したカルーセル用） ---- */
.pwp-pr-card {
  flex: 0 0 auto;
  width: clamp(188px, 18.5vw, 232px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  text-decoration: none;
}
/* 既存CSSの a:link/a:visited{color:#333} 等（タグ+疑似クラスの詳細度）がクラスのみの
   指定に勝ってしまうため、同じ形（タグ+クラス+疑似クラス）で明示的に上書きする。 */
a.pwp-pr-card:link,
a.pwp-pr-card:visited,
a.pwp-pr-card:focus { color: var(--pwp-navy); }
a.pwp-pr-card:hover { color: var(--pwp-blue); }
.pwp-pr-thumb {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: #FFFFFF;
  overflow: hidden;
}
.pwp-pr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pwp-pr-cat { font-size: 12px; letter-spacing: .14em; color: var(--pwp-blue); }
.pwp-pr-name { font-size: 16px; font-weight: 500; line-height: 1.6; }
.pwp-pr-desc { font-size: 13px; line-height: 1.6; color: var(--pwp-muted); }
@media (max-width: 640px) {
  .pwp-pr-card { width: 168px; }
  .pwp-top-products__track { margin-right: -32px; }
}

/* ---------- 5) WHERE TO BUY ---------- */
.pwp-top-where { background: #FFFFFF; padding: 104px 0; }
.pwp-top-where__in { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; gap: 40px; }
.pwp-top-where__card { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); background: #EEF5FB; }
.pwp-top-where__card-img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; border: none; }
.pwp-top-where__card-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.pwp-top-where__card-title { font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.pwp-top-where__card-desc { font-size: 14px; line-height: 1.9; color: #2E4560; }
.pwp-top-where__card-cta { align-self: flex-start; height: 40px; padding: 0 20px; font-size: 13px; letter-spacing: .12em; margin-top: 6px; }
.pwp-top-where__ec { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
/* 枠内の縦の余白を少しゆったりめに（高さではなく上下paddingで確保） */
.pwp-top-where__ec-logo {
  flex: 1 1 130px; min-width: 120px; display: flex; align-items: center; justify-content: center;
  padding: 24px 12px; background: #FFFFFF; border: 1px solid #D9E7EF; text-align: center;
}
.pwp-top-where__ec-logo img { max-height: 28px; max-width: 110px; width: auto; height: auto; display: block; }
/* PCでは「公式通販」の文字と特典アイコン3点を横1列に並べる。各アイコンの下に
   説明文字を改行して置く（アイコン＋ラベルの組み方はPC/SP共通）。
   SPでは「公式通販」の文字とアイコン行を縦積みに戻す（下のmedia query側）。 */
.pwp-top-where__official {
  flex: 2.2 1 320px; min-width: 300px; display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; gap: 24px; padding: 24px 28px; background: #1F5FA8;
  text-decoration: none;
}
/* 既存CSSの a:link/a:visited{color:#333} 等（タグ+疑似クラスの詳細度）がクラスのみの
   指定に勝ってしまうため、同じ形（タグ+クラス+疑似クラス）で明示的に上書きする。 */
a.pwp-top-where__official:link,
a.pwp-top-where__official:visited,
a.pwp-top-where__official:hover,
a.pwp-top-where__official:focus { color: #FFFFFF; }
/* サイト本文と同じゴシック体を明示指定（無指定だと周辺の明朝系の指定を
   引き継いでしまう場合があるため） */
.pwp-top-where__official-title {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: .06em; color: #FFFFFF; flex: 0 0 auto; white-space: nowrap;
}
/* 特典アイコン3点（会員プレゼント／定期割引／ポイントプログラム）。
   アイコンの下に説明文字を改行して置く（スマホ版と同じ組み方）。 */
.pwp-top-where__official-perks { display: flex; gap: 18px; flex: 0 1 auto; }
.pwp-top-where__official-perk {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}
.pwp-top-where__official-perk svg { flex: 0 0 auto; width: 20px; height: 20px; }
.pwp-top-where__official-perk span {
  font-size: 10px; line-height: 1.3; letter-spacing: .02em; color: #FFFFFF; white-space: nowrap;
}
@media (max-width: 640px) {
  .pwp-top-where__official {
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 10px; padding: 20px 20px;
  }
  .pwp-top-where__official-perks { flex-wrap: wrap; gap: 10px; width: 100%; }
  .pwp-top-where__official-perk { flex: 1 1 0; }
  .pwp-top-where__official-perk span { font-size: 9px; white-space: normal; }
}
@media (max-width: 640px) {
  .pwp-top-where { padding: 64px 0; }
  .pwp-top-where__in { gap: 24px; }
  .pwp-top-where__card-img { min-height: 140px; }
  .pwp-top-where__card-body { padding: 24px 24px; gap: 10px; }
  .pwp-top-where__card-desc { line-height: 1.5; }
}

/* ---------- 6) DENTAL COLUMN ---------- */
.pwp-top-column { background: #F2F8FB; padding: 104px 0; }
.pwp-top-column__in { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.pwp-top-column__head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.pwp-top-column__head { align-items: flex-start; text-align: left; gap: 6px; }
.pwp-top-column__wrap { position: relative; }
.pwp-top-column__track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 8px; margin: 0 -4px; cursor: grab; touch-action: pan-x pan-y;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pwp-top-column__track::-webkit-scrollbar { display: none; }
.pwp-top-column__track:active { cursor: grabbing; }
.pwp-top-column__card {
  flex: 0 0 auto; width: 345px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none;
}
a.pwp-top-column__card:link,
a.pwp-top-column__card:visited,
a.pwp-top-column__card:focus { color: var(--pwp-navy); }
a.pwp-top-column__card:hover { color: var(--pwp-blue); }
.pwp-top-column__thumb {
  aspect-ratio: 16/10;
  width: 100%;
  background: var(--pwp-tile-bg);
  overflow: hidden;
}
.pwp-top-column__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pwp-top-column__title { font-size: 13px; font-weight: 500; line-height: 1.6; }
.pwp-top-column__nav { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; }
.pwp-top-column__btn {
  width: 44px; height: 44px; border: 1px solid #B9D0DE; background: #FFFFFF; color: #12304F;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 640px) {
  .pwp-top-column__track { gap: 12px; margin-right: -32px; }
  .pwp-top-column__card { width: clamp(120px, 35vw, 145px); }
}

/* ---------- 6.5) MEDIA ---------- */
.pwp-top-media { background: #FFFFFF; padding: 88px 0; }
.pwp-top-media__in { max-width: 1320px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.pwp-top-media__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; width: 100%; max-width: 1200px; }
.pwp-top-media__item { display: flex; flex-direction: column; gap: 16px; text-decoration: none; }
a.pwp-top-media__item:link,
a.pwp-top-media__item:visited,
a.pwp-top-media__item:focus { color: var(--pwp-navy); }
a.pwp-top-media__item:hover { color: var(--pwp-blue); }
.pwp-top-media__logo { aspect-ratio: 3/2; width: 100%; object-fit: contain; display: block; }
.pwp-top-media__title { font-size: 15px; font-weight: 500; line-height: 1.7; text-align: center; }
@media (max-width: 640px) {
  .pwp-top-media__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ---------- 7) NEWS ---------- */
.pwp-top-news { background: #F2F8FB; padding: 104px 0; }
.pwp-top-news__in { max-width: 1100px; margin: 0 auto; padding: 0 32px; display: flex; flex-wrap: wrap; gap: 48px; }
.pwp-top-news__head { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; }
.pwp-top-news__more { align-self: flex-start; margin-top: 24px; }
.pwp-top-news__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #D3E3EC; flex: 999 1 560px; min-width: 0; }
.pwp-top-news__item-wrap { border-bottom: 1px solid #D3E3EC; }
.pwp-top-news__item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 24px 4px;
  text-decoration: none; transition: background .15s ease;
}
a.pwp-top-news__item:link,
a.pwp-top-news__item:visited,
a.pwp-top-news__item:hover,
a.pwp-top-news__item:focus { color: var(--pwp-navy); }
a.pwp-top-news__item:hover { background: #F8FBFD; }
.pwp-top-news__date { font-size: 15px; letter-spacing: .06em; color: #4F6274; }
.pwp-top-news__badge { font-size: 11px; letter-spacing: .12em; color: #FFFFFF; background: var(--pwp-emerald); padding: 3px 10px; }
.pwp-top-news__title { font-size: 15px; flex: 1 1 280px; }

/* ---------- 8) FOLLOW US（Instagram投稿カルーセル） ----------
   ロゴカード形式をやめ、公式Instagramの投稿サムネイルを1行で自動的に
   横スクロールさせる「マーキー」形式に変更（草花木果 等の実装を参考）。
   CSSのアニメーション（@keyframes pwp-insta-scroll）で動かす
   classic marqueeテクニック：.pwp-top-insta__track の中身を実データ
   （10枚）＋複製セット（10枚）の合計20枚にしておき、translateX(-50%)
   でちょうど実データ分だけ動かすことで、継ぎ目が見えない無限ループに
   見せている。複製セットはHTML側には書かず、下部JSの initInstaLoop()
   がページ読込時に自動生成する（更新時はHTML側の実データ10件だけ直せばOK）。
   PCはマウスオーバーで一時停止、スマホは常に流れ続ける。
   LINE/TikTokのリンクはトップページには置かず、フッターのみに表示。 */
.pwp-top-insta { background: #E8F5F2; padding: 88px 0; overflow: hidden; }
.pwp-top-insta__in { max-width: 1120px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.pwp-top-insta__track-wrap { width: 100%; overflow: hidden; }
.pwp-top-insta__track {
  display: flex; align-items: center; gap: 14px; width: max-content; list-style: none; margin: 0; padding: 0;
  animation: pwp-insta-scroll 60s linear infinite;
}
.pwp-top-insta__track-wrap:hover .pwp-top-insta__track { animation-play-state: paused; }
.pwp-top-insta__item { flex: 0 0 auto; }
.pwp-top-insta__link { display: block; width: 150px; height: 150px; overflow: hidden; position: relative; }
.pwp-top-insta__link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.pwp-top-insta__link:hover img { transform: scale(1.06); }
@keyframes pwp-insta-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .pwp-top-insta { padding: 56px 0; }
  .pwp-top-insta__in { gap: 28px; }
  .pwp-top-insta__track { gap: 8px; animation-duration: 42s; }
  .pwp-top-insta__link { width: 104px; height: 104px; }
}

/* ---------- 9) SERVICE（公式オンラインショップのご案内） ----------
   Instagramセクションの下に追加。
   上段：会員登録特典・送料無料・メルマガ特典をアイコン＋短文で横並び表示
   （.pwp-top-service__perks）。背景はセクション全体と同じ白で、帯状の
   色ボックスにはせず、アイコン＋テキストだけを白地にのせている。
   下段：4つのリンク（ショッピングガイド／お得な定期お届け便／よくある質問／
   デンタルコラム）を正方形画像＋キャプションで並べるグリッド
   （.pwp-top-service__links）。PCは4列・スマホは2列（auto-fitではなく
   repeat()で列数を固定し、中間幅でも必ず指定列数になるようにしている）。
   セクション全体の背景は白。アイコン3点（top_serviceicon01〜03.png）・
   リンク画像4点（top_service_01〜04.jpg）はいずれも支給済みの実画像。 */
.pwp-top-service { background: #FFFFFF; padding: 88px 0; }
.pwp-top-service__in { max-width: 1120px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; align-items: center; gap: 48px; }

.pwp-top-service__perks {
  width: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.pwp-top-service__perk {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 0 16px;
}
.pwp-top-service__perk-icon { width: 26px; height: 26px; object-fit: contain; display: block; }
.pwp-top-service__perk-text { font-size: 13px; line-height: 1.7; color: var(--pwp-navy); letter-spacing: .02em; }

.pwp-top-service__links { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pwp-top-service__link-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
a.pwp-top-service__link-card:link,
a.pwp-top-service__link-card:visited,
a.pwp-top-service__link-card:focus { color: var(--pwp-navy); }
a.pwp-top-service__link-card:hover .pwp-top-service__link-img img { transform: scale(1.04); }
.pwp-top-service__link-img { aspect-ratio: 1 / 1; width: 100%; overflow: hidden; background: var(--pwp-tile-bg); }
.pwp-top-service__link-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.pwp-top-service__link-label { font-size: 12px; line-height: 1.6; text-align: center; letter-spacing: .02em; }

@media (max-width: 640px) {
  .pwp-top-service { padding: 56px 0; }
  .pwp-top-service__in { gap: 32px; }
  .pwp-top-service__perk { padding: 0 6px; gap: 8px; }
  .pwp-top-service__perk-icon { width: 20px; height: 20px; }
  .pwp-top-service__perk-text { font-size: 11px; line-height: 1.6; }
  .pwp-top-service__links { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}