@charset "UTF-8";
/**
 * product-kr400.css — KR-400｜スタンダードモデル（固定ページ slug: product-kr400）
 *
 * Figma  : ケンネット様_イヤホンガイド／下層ページ under（node 492:4687 ／ 1440×3076）
 * inspect: figma-dump/inspect/under/product_kr400.txt
 * カンプ : figma-dump/screenshots/under/product_kr400.png（等倍 1440px）
 * HTML   : page-product-kr400.php ／ template-parts/under/kr400/{detail,links,contact}.php
 *
 * 1rem = 10px（common.css の html{font-size:62.5%}）。
 * 寸法はカンプ幅 1440px 基準の可変指定で、clamp の vw 値 ＝ 実測px ÷ 14.4。
 * clamp の下限は SP カンプが無いため当方設計（上限の6〜7割・本文系は 1.4rem 止まり）。
 * ブレイクポイントは max-width の単独指定（下の帯へ継承させる）。
 * 固定値を使うのは (1) コンテナの最大幅 (2) 1px 罫線 (3) 固定でないと整わない場合 の3つだけで、
 * その都度理由をコメントに書いている。
 *
 * 既存クラスをそのまま使い、ここでは再定義しないもの
 *   .page-title / .page-title__title … common.css 1117〜1133行（冒頭の赤グラデ帯）
 *   .bread（kennet_breadcrumb 経由）  … common.css 1150行
 *   .btn--4                          … common.css 869〜884行（白ボタン・影・hover の赤枠）
 *   .ar / .ar--2 / .ar--white        … common.css 725〜777行
 *   CSS 変数                          … common.css 16〜49行
 * ページ独自の色は増やしていない（カンプに出る色は既存変数で全部足りる）。
 *
 * 目次
 *   1. 内容枠
 *   2. detail（製品写真＋説明＋スペック表＋パンフレットボタン）
 *   3. links（灰帯の関連リンク2本＋製品一覧へ戻る）
 *   4. contact（CONTACT 帯）
 *   5. 1023px 以下
 *   6. 768px 以下
 */


/* ============================================================
   1. 内容枠

   common.css の .section__inner は max-width 1200 の内側に左右 padding を持つため、
   1440px 表示のとき内容幅が 1121px になり、カンプの内容幅 1200px と食い違う。
   そこで .bread / .footer__inner と同じ「1200 の内容＋外側に左右余白」方式にする
   （common.css 1151行の .bread が前例。1ページ目の .wgd-inner と同じ式）。
   ============================================================ */
.krd-inner {
  max-width: calc(var(--sectionWidth) + 8rem); /* 1200 + 80 = 1280。コンテナの最大幅は固定値で持つ */
  margin-inline: auto;
  padding-inline: clamp(2rem, 2.75vw, 4rem); /* 1440px で 39.6px ≒ カンプの左右余白 40px */
}


/* ============================================================
   2. detail（製品写真＋説明＋スペック表＋パンフレットボタン）
   ログ: FRAME wrap [120,382,1320,1980] layout=HORIZONTAL pad=(0,0,50,0) gap=50
         左カラム 390 ／ 右カラム 760
   セクションの上余白はカンプでは 0（パンくずブロックの下余白 40px が間隔を作っている）。
   1ページ目の .wgd-feature と同じ扱いにして、ここでは上余白を持たない。
   ============================================================ */
.krd-detail {
  padding-bottom: clamp(3rem, 3.47vw, 5rem); /* ログ wrap pad-bottom 50 */
}

.krd-detail__wrap {
  display: grid;
  /* 1200 の内容幅に対し 390 : 50 : 760。左カラムを % で持つと gap を引いた残りが
     そのまま右カラムになり、1440px でカンプどおり 390 / 760 に一致する。 */
  grid-template-columns: 32.5% 1fr;
  gap: clamp(2.4rem, 3.47vw, 5rem); /* ログ gap 50 */
  align-items: start;
}

/* -----------------------------------------------------------------------------
 * 左カラム（製品写真）
 * ログ: img 390×632 ＋ gap20 ＋ 小さい写真 120×194 ×2（間 10）
 * 支給素材 kr400_01.jpg は左カラム全体 390×846 を2倍で書き出した1枚で、
 * 小さい写真の枠線まで画像に含まれている（PNG実測：枠は #EAEAEA 相当の1px）。
 * 切り出しは支給されていないため1枚のまま置き、幅に合わせて等倍で縮む形にする。
 * -------------------------------------------------------------------------- */
.krd-detail__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* -----------------------------------------------------------------------------
 * 右カラム（テキスト）
 * ログの各ブロックは「本文＋下余白」の形なので、下余白は padding / margin で持つ。
 * -------------------------------------------------------------------------- */
.krd-detail__body {
  min-width: 0; /* グリッドの子は既定で「中身より狭くならない」。スペック表が列幅を押し広げないようにする */
}

.krd-detail__title {
  padding-bottom: clamp(.8rem, .69vw, 1rem); /* ログ txt pad-bottom 10 */
  color: var(--color_main);
  font-size: clamp(1.8rem, 1.67vw, 2.4rem); /* ログ 24px */
  font-weight: 900;
  line-height: 1.4; /* ログ lh33.6 ÷ 24px */
  letter-spacing: .05em;
}

.krd-detail__lead {
  padding-bottom: clamp(1.6rem, 1.39vw, 2rem); /* ログ txt pad-bottom 20 */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* ログ 16px */
  font-weight: 500;
  line-height: 1.4; /* ログ lh22.4 ÷ 16px */
  letter-spacing: .05em;
}

/* 「レンタル：可／購入：可」の灰色帯（ログ Frame 226 fill #F6F6F6 pad(5,10,5,10)） */
.krd-detail__avail {
  margin-bottom: clamp(1.6rem, 1.39vw, 2rem); /* ログ txt pad-bottom 20 */
  padding: .5rem clamp(.8rem, .69vw, 1rem); /* 上下5px は固定：縮めても1px しか動かず行の高さだけ乱れるため */
  background: var(--color_light);
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* ログ 16px */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* 赤枠の2ブロック（特徴／オススメ使用シーン）
   ログ Frame 104 stroke=1px #B80003 INSIDE pad=(10,10,10,10)・中は gap 0 */
.krd-detail__points {
  margin-bottom: clamp(1.6rem, 1.39vw, 2rem); /* ログ 2つ目の txt pad-bottom 20 */
}

.krd-detail__point {
  /* 固定：ログの内側余白 10 から枠線 1px 分を引いた値。Figma の stroke は枠内（INSIDE）なので
     引かないと箱の高さが 62 ではなく 64 になる（common.css 977行 .sub-head__text と同じ扱い）。 */
  padding: .9rem;
  border: 1px solid var(--color_main); /* 固定：1px 罫線 */
}

.krd-detail__point + .krd-detail__point {
  margin-top: clamp(.8rem, .69vw, 1rem); /* ログ 1つ目の txt pad-bottom 10 */
}

.krd-detail__point-label {
  color: var(--color_main);
  font-size: 1.4rem; /* ログ 14px。本文の最小サイズのため可変にしない（1ページ目 40_price.css と同じ扱い） */
  font-weight: 700;
  line-height: 1.4; /* ログ lh19.6 ÷ 14px */
  letter-spacing: .05em;
}

.krd-detail__point-text {
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* ログ 16px */
  font-weight: 500;
  line-height: 1.4; /* ログ lh22.4 ÷ 16px */
  letter-spacing: .05em;
}

/* -----------------------------------------------------------------------------
 * スペック表
 * ログ: FRAME tabel fill=#EAEAEA pad=1 gap=1（＝1px の罫線を面と隙間で作っている）
 *       th 200×（54〜142）fill #F6F6F6・16px 700 中央 ／ td 559 幅・fill #FFFFFF・16px 500 左
 *       セルの内側余白は上下左右とも 16
 * PNG実測: 罫線 #EAEAEA・左 x560 / th と td の境 x761 / 右 x1321 / 1行目の下 y729。
 *          行の高さは中身の行数で決まる（1行 54・2行 76・備考 142）ので固定しない。
 * -------------------------------------------------------------------------- */
.krd-spec {
  width: 100%;
  border: 1px solid var(--color_line); /* 固定：1px 罫線 */
  border-collapse: collapse;
  table-layout: fixed;
}

.krd-spec__th,
.krd-spec__td {
  padding: clamp(1.2rem, 1.11vw, 1.6rem); /* ログ pad 16 */
  border: 1px solid var(--color_line); /* 固定：1px 罫線 */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* ログ 16px */
  line-height: 1.4; /* ログ lh22.4 ÷ 16px */
  letter-spacing: .05em;
  vertical-align: middle;
  /* 「約40mm(W)×83mm(H)×12mm(D)」は途中に区切れる位置が無い1かたまり（244px）で、
     455px より狭い画面ではセルからはみ出して横スクロールが出る。入りきらない時だけ折る。 */
  overflow-wrap: break-word;
}

.krd-spec__th {
  width: 26.32%; /* 右カラム 760 に対する th 200 の比率 */
  /* 見出しは列の中で中央そろえなので左右の余白は見えない。カンプどおり 16px にすると
     1440px で「メーカー希望小売価格」（10文字 × 16.8px ＝ 168px）が中身の幅 168px と
     ちょうど同じになって端数で2行に割れるため、左右だけ 10px にして1行に収める。
     列の幅 200px は変えていないので見た目はカンプと同じ。 */
  padding-inline: clamp(.8rem, .69vw, 1rem);
  background: var(--color_light);
  color: var(--color_dark);
  font-weight: 700;
  text-align: center;
}

.krd-spec__td {
  background: #fff;
  color: var(--color_dark);
  font-weight: 500;
  text-align: left;
}

/* -----------------------------------------------------------------------------
 * パンフレットを見る（PDF）
 * ログ: FRAME btn 320×60・白地・影 0 5px 20px #591E1B@0.1・pad=(20,30,20,20)
 *       文字 16px 700・左端から 20 ／ blank_link 18×18・ボタン右端から 12
 * 白地・影・hover は common.css の .btn--4 と同じものなので .btn--4 に相乗りし、
 * 実寸の違い（320×60・矢印ではなく右端のアイコン）だけここで上書きする。
 * -------------------------------------------------------------------------- */
.krd-detail__pdf {
  margin-top: clamp(2.4rem, 2.78vw, 4rem); /* ログ list pad-bottom 40 */
}

.btn--4.krd-pdf {
  display: flex;
  justify-content: space-between;
  width: clamp(28rem, 22.22vw, 32rem); /* ログ 320px。ボタンは図形なので幅を明示する */
  height: clamp(5rem, 4.17vw, 6rem); /* ログ 60px。.btn--4 と同じく高さで合わせる */
  margin-inline: auto; /* カンプでは右カラム 760 の中央（x780〜1100） */
  padding: 0 1.2rem 0 2rem; /* ログ 文字左20 ／ アイコン右12 */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* ログ 16px */
}

/* カンプの blank_link（別タブを示す 18×18 の赤いアイコン ／ Figma node 647:3790）。
   2026-08-14 に確定版ファイルから書き出して実装（kr400_blank.svg）。 */
.krd-pdf__blank {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  background-image: url("../images/kr400/kr400_blank.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.8rem 1.8rem;
}


/* ============================================================
   3. links（灰帯の関連リンク2本＋製品一覧へ戻る）
   ログ: FRAME btn（灰帯）[120,1980,1320,2142] fill=#F6F6F6 pad=(45,0,45,0) gap=30
         INSTANCE btn4 280×72 ×2（白地・影・pad 30・矢印は右8px）
         FRAME btn_area [120,2142,1320,2334] pad=(40,0,100,0)
         INSTANCE btn4 185×52（pad 左40・右20・矢印は左10px で左向き）
   ============================================================ */
.krd-links__band {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.6rem, 2.08vw, 3rem); /* ログ gap 30 */
  padding-block: clamp(3rem, 3.13vw, 4.5rem); /* ログ pad 上下45 */
  padding-inline: clamp(1.6rem, 2.08vw, 3rem); /* 当方設計：カンプは左右0だが、幅が縮んだときにボタンが帯の端に付かないようにする */
  background: var(--color_light);
}

.btn--4.krd-links__btn {
  width: clamp(24rem, 19.44vw, 28rem); /* ログ 280px。ボタンは図形なので幅を明示する */
  height: clamp(6rem, 5vw, 7.2rem); /* ログ 72px */
  padding: 0 clamp(1.6rem, 2.08vw, 3rem); /* ログ pad 30。矢印は .btn--4 既定の「右8px 絶対配置」のまま */
}

.krd-links__foot {
  padding-block: clamp(2.4rem, 2.78vw, 4rem) clamp(6rem, 6.94vw, 10rem); /* ログ btn_area pad(40,0,100,0) */
}

/* 「製品一覧へ戻る」はカンプの実寸が btn4 の既定（185×52・16px）と同じなので
   .btn--4 のままにし、内側の余白と矢印の向きだけ変える。 */
.btn--4.krd-links__back {
  padding: 0 2rem 0 4rem; /* ログ pad 左40・右20 */
}

.krd-links__back .ar--2 {
  right: auto;
  left: 1rem; /* ログ 矢印はボタン左端から10px */
  /* common.css の .ar--2 は右向きしか無いため 180度回して左向きにする（common.css は触らない） */
  transform: translateY(-50%) rotate(180deg);
}


/* ============================================================
   4. contact（CONTACT 帯）
   ログ: INSTANCE contact [0,2334,1440,2760] pad=(80,276,80,276) gap=100
         左 title-wrap 300 ／ 右 wrap 600（ボタン 600×120 ×2・間 20）
   トップの CONTACT 帯とまったく同じ形なので、数値は top.css 1935〜2100行から転記し、
   宣言ごとに転記元の行を書いてある。top.css はトップ限定読み込みで本ページでは効かないため、
   クラスを krd-contact__* に置き替えて持ち直している（1ページ目 _wgd/70_contact.css と同じやり方）。
   固定値だった文字サイズは、この帯だけ段差で切り替わらないよう clamp に直した
   （上限＝top.css の PC 値／下限＝top.css の SP 値 2320〜2375行）。
   ============================================================ */
.krd-contact {
  /* 上下は top.css 1936行と同値（ログ pad(80,…,80,…) の上下）。
     左右は .section__inner を使わない取り決めのためここで持つ（値は .krd-inner と同じ）。 */
  padding-block: 8rem;
  padding-inline: clamp(2rem, 2.75vw, 4rem);
  background: var(--gradient); /* ログ cta_gr。top.css 1937行は同じ値を直書き */
  color: #fff;
}

.krd-contact__inner {
  display: flex;
  align-items: center;
  gap: clamp(4rem, 6.94vw, 10rem); /* top.css 1944行 10rem。1024px 付近で右カラムを潰さないよう縮む側にした */
  max-width: 100rem; /* top.css 1945行。ログの実配置 220〜1220px */
  min-height: 26.6rem; /* top.css 1946行。ログ title-wrap 266px（426 − 上下 padding 160） */
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
 * 左カラム（top.css 1950〜2025行の転記）
 * -------------------------------------------------------------------------- */
.krd-contact__intro {
  flex: 0 0 30rem; /* top.css 1951行 */
  align-self: stretch; /* top.css 1952行。カンプは左カラムだけ上寄せ（266px 枠の上端から始まる） */
}

.krd-contact__label {
  display: flex; /* top.css 1956行 */
  align-items: center;
  gap: .4rem; /* ログ 丸マーク右端234 → 文字左端238 */
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.krd-contact__label-mark {
  flex: 0 0 1.4rem; /* top.css 1966行。ログ Ellipse 14×14・stroke 3px INSIDE */
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid #fff;
  border-radius: 50%;
}

.krd-contact__title {
  font-family: var(--font_eng); /* top.css 1975行は "Roboto", sans-serif 直書き。変数の中身は同じ */
  font-size: clamp(4.4rem, 4.17vw, 6rem); /* 上限 top.css 1976行 6rem ／ 下限 同 2337行 4.4rem */
  font-weight: 700;
  line-height: 1.4; /* ログ lh 84 */
  letter-spacing: 0; /* top.css 1979行。CONTACT だけ字間を空けない */
}

.krd-contact__point {
  display: block; /* top.css 1983行。ログ point 68×4 */
  width: 6.8rem;
  height: .4rem;
  margin: 2rem 0;
  background: #fff;
}

.krd-contact__tel-label {
  font-size: 1.5rem; /* top.css 1991行 */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.krd-contact__tel {
  display: flex; /* top.css 1998行 */
  align-items: center;
  gap: .4rem;
}

.krd-contact__tel-icon {
  flex: 0 0 3.2rem; /* top.css 2003行。ログ icon 32×32 */
  width: 3.2rem;
  height: 3.2rem;
}

.krd-contact__tel a {
  font-family: var(--font_eng); /* top.css 2009行 */
  font-size: clamp(2.8rem, 2.36vw, 3.4rem); /* 上限 top.css 2010行 3.4rem ／ 下限 同 2341行 2.8rem */
  font-weight: 700;
  line-height: 1.4; /* ログ lh 47.6 */
  letter-spacing: .05em;
  text-decoration: none;
}

.krd-contact__hours {
  margin-top: .8rem; /* top.css 2018行。ログ gap 8 */
  padding: .7rem; /* top.css 2019行。ログ 34px = border 1px + 7px + 本文 18.2px + 7px + border 1px */
  border: 1px solid var(--color_line); /* top.css 2020行は #EAEAEA 直書き */
  font-size: clamp(1.2rem, .9vw, 1.3rem); /* 上限 top.css 2021行 1.3rem ／ 下限 同 2345行 1.2rem */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* -----------------------------------------------------------------------------
 * 右カラム（ボタン2本・top.css 2029〜2100行の転記）
 * -------------------------------------------------------------------------- */
.krd-contact__btns {
  display: flex; /* top.css 2030行 */
  flex-direction: column;
  flex: 0 1 60rem; /* ログ ボタン 600px。1024px 付近では縮む側にする */
  gap: 2rem; /* ログ ボタン間 20 */
  min-width: 0;
}

.krd-contact__btn {
  position: relative; /* top.css 2037行 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem; /* top.css 2041行。ログ 120px */
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3); /* ログ DROP_SHADOW(0,10 r=30 #860D08@0.3)・top.css 2042行と同値 */
  text-decoration: none;
  transition: var(--transition, all .3s ease);
}

.krd-contact__btn--rental {
  background: var(--color_main_dark); /* ログ fill #7C0002（top.css 2047行は直書き） */
  color: #fff;
}

.krd-contact__btn--inquiry {
  background: #fff;
  color: var(--color_main); /* ログ #B80003 */
}

/* hover はフローティング CTA（common.css 1716行）と同じ語彙。白地は内側 2px の赤枠、
   濃い赤地はその白枠版。box-shadow は1プロパティなので既存の外影を併記して維持する。
   2026-08-20 CEO 指示により opacity: .85 から変更（薄くなるだけで分からなかったため）。 */
.krd-contact__btn--rental:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px #fff;
}

.krd-contact__btn--inquiry:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px var(--color_main);
}

.krd-contact__btn-icon {
  position: absolute; /* top.css 2061行。ログ 64×64・ボタン左端から40px */
  top: 50%;
  left: 4rem;
  width: 6.4rem;
  height: 6.4rem;
  transform: translateY(-50%);
}

.krd-contact__btn-txt {
  display: flex; /* top.css 2069行 */
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.krd-contact__btn-main {
  font-size: clamp(1.7rem, 1.67vw, 2.4rem); /* 上限 top.css 2078行 2.4rem ／ 下限 同 2360行 1.7rem */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

.krd-contact__btn-sub {
  font-size: clamp(1.3rem, 1.04vw, 1.5rem); /* 上限 top.css 2085行 1.5rem ／ 下限 同 2367行 1.3rem */
  font-weight: 700;
  line-height: 1.4; /* top.css は PC 1・SP 1.4。折り返しが出る幅があるので 1.4 で通す */
  letter-spacing: .05em;
}

.krd-contact__btn .ar,
.krd-contact__btn .ar--white {
  position: absolute; /* top.css 2093行。ログ 24×24・ボタン右端から20px */
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}


/* ============================================================
   5. 1023px 以下（SP カンプ無し・当方設計）
   ============================================================ */
@media (max-width: 1023px) {

  /* contact ---------------------------------------------------------------
     2カラムのままだと 900px あたりで右カラムが 490px を切り、ボタンの中の
     小さい行（最長「レンタル・購入・デモ機などのご相談はこちら」＝13px で 287px）が
     左のアイコン（左40px＋64px）に重なる。重なる前に縦積みへ落とす。 */
  .krd-contact__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 4rem;
    min-height: 0;
  }

  /* 縦積みでは左右いっぱいに広げず、カンプのボタン幅 600px にそろえて中央に置く
     （営業時間の枠だけが横いっぱいに伸びて間延びするのを防ぐ） */
  .krd-contact__intro,
  .krd-contact__btns {
    flex: 0 0 auto;
    width: 100%;
    max-width: 60rem;
    margin-inline: auto;
  }
}


/* ============================================================
   6. 768px 以下（SP カンプ無し・当方設計。contact は top.css 2320〜2375行が手本）
   ============================================================ */
@media (max-width: 768px) {

  /* detail ---------------------------------------------------------------
     2カラムのままだと右カラムが 460px を切り、スペック表の見出し列が 120px 以下になって
     「メーカー希望小売価格」が3行に割れる。写真を上、説明と表を下の1カラムにする。 */
  .krd-detail__wrap {
    grid-template-columns: 1fr;
  }

  .krd-detail__media {
    max-width: 39rem; /* 固定：カンプの左カラム 390px。これ以上引き伸ばさない */
    margin-inline: auto;
  }

  /* 見出し列は 375px で「（送信・受信）」が2行に割れない比率まで広げ、
     余白を詰めて本文側の幅を確保する（375px で見出し 100px・本文 194px）。 */
  .krd-spec__th {
    width: 36%;
  }

  .krd-spec__th,
  .krd-spec__td {
    padding-block: 1rem; /* 固定：これ以上縮めると罫線と文字が近づきすぎる */
  }

  .krd-spec__td {
    padding-inline: 1rem;
  }

  /* links ----------------------------------------------------------------
     横2本のままだと 375px でボタンが 143px になり、16px の文字（134px）と
     左右の余白（60px）が入らない。縦積みにして幅を保つ。 */
  .krd-links__band {
    flex-direction: column;
    align-items: center;
  }

  /* contact（top.css 2320〜2375行の SP を転記） --------------------------- */
  .krd-contact {
    padding-block: 6rem; /* top.css 2321行 */
  }

  .krd-contact__inner {
    gap: 4rem; /* top.css 2327行 */
  }

  .krd-contact__btn {
    height: auto; /* top.css 2350行 */
    min-height: 10rem;
    padding: 2rem 4.4rem 2rem 8.8rem;
  }

  .krd-contact__btn-icon {
    left: 1.6rem; /* top.css 2356行 */
    width: 5.6rem;
    height: 5.6rem;
  }

  .krd-contact__btn .ar,
  .krd-contact__btn .ar--white {
    right: 1.2rem; /* top.css 2373行 */
  }
}