/* ============================================================================
   hc.css … ヘルプセンター（support の各ページ）の見た目。担当: Support。
             色は frame.css の --sp-* / --hc-*、上の帯・下の帯・引き出しは bar.css。

   形の決まり（2026-10-01）:
     中身の最大幅 1400px（.hc-container）。記事の本文の列は 832px。
     角: カード・板・札・主なボタン 16 / 行・検索欄・小さなボタン 8 / 入力欄 6 / タグ 100。
     影は休んでいる時は無し。押せる物は浮く（--hc-lift）。ガラス・ぼかしは使わない。
     字: 帯の h1 40/48/700、節の h2 32/48/700、カードの h3 24/32/700、記事の本文 18/28（行の高さ 1.6）。
     赤は使わない（注意は金・紺の囲み）。字は端末の字だけ。

   StarPocket の絵柄:
     ポケット … 下の角を大きく丸めた袋の形（角 16 16 40 40 など）＋ 口の少し下に縫い目の点線（2px dashed）。
     星空   … 帯・板の飾りは小さな 4 つ角の星と点（BrandSvg の #stars。--st1 金 / --st2 薄紫 / --st3 点 / --st4 青緑）。
     金の線 … 明るい板の区切り・横長のカードの左の線・引き出しの縁は金（--hc-gold）。
     名札   … 札・小さな見出しは点線の枠の名札の形。
   ========================================================================== */

/* ---- 土台 ------------------------------------------------------------------ */

.hc-full .sp-main {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--hc-ink);
}

.hc-full .sp-main a {
  color: inherit;
  text-decoration: none;
}

.hc-full .sp-main :focus-visible {
  outline: 2px solid var(--hc-focus);
  outline-offset: 2px;
}

.hc-full .sp-main h1,
.hc-full .sp-main h2,
.hc-full .sp-main h3,
.hc-full .sp-main h4 {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: -.02em;
}

.hc-page {
  padding-bottom: 64px;
}

.hc .i.ext {
  width: 16px;
  height: 16px;
}

/* 状態の点（サーバーの状況・受付番号の状況） */
.dot {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sp-300);
}

.dot.ok { background: var(--hc-teal); }
.dot.wait { background: var(--hc-gold); }
.dot.off { background: var(--sp-300); }

/* ---- ボタン ------------------------------------------------------------------ */

.btn-s,
.btn-c,
.btn-o,
.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--font);
  text-align: center;
}

.btn-s {
  position: relative;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 16px;
  background: var(--hc-gold);
  color: var(--hc-gold-ink) !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: .03em;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.btn-s::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), var(--hc-gold-h) 40%, transparent);
  opacity: 0;
  transition: opacity .2s;
}

.btn-s:hover {
  transform: translateY(-2px);
  box-shadow: var(--hc-lift);
}

.btn-s:hover::before {
  opacity: 1;
}

.btn-s:active {
  transform: translateY(0) scale(.98);
  box-shadow: none;
}

.btn-s .i,
.btn-c .i,
.btn-o .i,
.btn-sm .i {
  width: 18px;
  height: 18px;
}

.btn-c {
  min-height: 40px;
  padding: 6px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--hc-gold);
  color: var(--hc-gold-ink) !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: .03em;
  transition: background-color .2s;
}

.btn-c:hover {
  background: var(--hc-gold-h);
}

.btn-c:active {
  transform: scale(.98);
}

.btn-o {
  min-height: 40px;
  padding: 6px 16px;
  border: 2px solid var(--hc-ink);
  border-radius: 8px;
  color: var(--hc-ink) !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  white-space: normal;
  transition: background-color .2s;
}

.btn-o:hover {
  background: var(--hc-s2);
}

.btn-sm {
  min-height: 36px;
  padding: 4px 14px;
  border: 2px solid var(--hc-ink);
  border-radius: 8px;
  background: transparent;
  color: var(--hc-ink) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  transition: background-color .2s;
}

.btn-sm:hover {
  background: var(--hc-card-in);
}

.btn-sm[aria-current="page"] {
  border-color: var(--hc-gold);
  background: var(--hc-gold);
  color: var(--hc-gold-ink) !important;
}

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.lead {
  max-width: 820px;
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 28px;
  color: var(--hc-ink-2);
  text-wrap: pretty;
}

/* ---- 暗い見出し帯 ---------------------------------------------------------------- */

.hc-hero {
  position: relative;
  background: var(--hc-band);
  color: var(--hc-on-dark);
  overflow: hidden;
  --hc-focus: var(--hc-gold);
}

.hc-hero--product {
  background: var(--sp-850);
}

/* 星空（#stars）。暗い地の上の色が既定。明るい板では下で色を替える */
.stars {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  --st1: #F7C548;
  --st2: rgba(169, 174, 211, .55);
  --st3: rgba(169, 174, 211, .45);
  --st4: #2EC4B6;
}

.stars svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hc-hero .stars {
  top: 0;
  right: 0;
  height: 100%;
  width: min(960px, 70%);
}

/* 題と検索欄の後ろは星を薄くする */
.hc-hero .stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--hc-band) 0%, color-mix(in srgb, var(--hc-band) 55%, transparent) 30%, transparent 55%);
}

.hc-hero--product .stars::after {
  background: linear-gradient(90deg, var(--sp-850) 0%, color-mix(in srgb, var(--sp-850) 55%, transparent) 30%, transparent 55%);
}

.hero-in {
  position: relative;
  padding-top: 32px;
  padding-bottom: 16px;
}

.hc-full .sp-main .hh1 {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 40px/48px var(--font-display);
  letter-spacing: -.02em;
  color: #FFFFFF;
  text-wrap: balance;
}

:root[lang="ja"] .hc-full .sp-main .hh1,
:root[lang="zh-CN"] .hc-full .sp-main .hh1 {
  font-family: var(--font);
}

.hh1-i {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 12px;
}

.hsearch {
  position: relative;
  width: min(700px, 100%);
  margin-top: 16px;
}

.hsearch input {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 8px 48px 8px 16px;
  border: 1px solid var(--sp-300);
  border-radius: 8px;
  background: transparent;
  color: #FFFFFF;
  font: 400 16px/24px var(--font);
  transition: background-color .2s, border-color .2s;
  -webkit-appearance: none;
  appearance: none;
}

.hsearch input::placeholder {
  color: var(--sp-300);
  opacity: 1;
}

.hsearch input:hover {
  background: var(--sp-800);
}

.hsearch input:focus {
  outline: none;
  border-color: var(--hc-gold);
  box-shadow: 0 0 0 1px var(--hc-gold);
}

.hsearch input::-webkit-search-cancel-button {
  filter: invert(1);
}

.sbtn {
  position: absolute;
  top: 8px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: #FFFFFF;
  cursor: pointer;
}

.chips {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}

/* 札は「縫い付けた名札」の形: 地は透かして、縫い目の点線の枠。押せそうな時は金の実線になる */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  max-width: 100%;
  padding: 0 16px;
  border: 2px dashed rgba(169, 174, 211, .6);
  border-radius: 10px;
  background: rgba(14, 16, 48, .35);
  color: #FFFFFF !important;
  font: 600 16px/24px var(--font);
  white-space: nowrap;
  transition: transform .2s ease-out, border-color .2s, background-color .2s;
}

.chip:hover {
  transform: translateY(-2px);
  border-style: solid;
  border-color: var(--hc-gold);
}

.chip .i {
  width: 20px;
  height: 20px;
}

.chip .cstar {
  width: 16px;
  height: 16px;
  color: var(--hc-gold);
}

.chip-me span {
  max-width: 14em;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- 節 --------------------------------------------------------------------- */

.hc-sec {
  padding-top: 40px;
}

.sec-h {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 24px;
}

.hc-full .sp-main .sec-h h2 {
  flex: 0 1 auto;
  font: 700 32px/48px var(--font);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.sec-h::after {
  content: "";
  order: 1;
  flex: 1 1 24px;
  height: 1px;
  background: var(--hc-s3);
}

.sec-link {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font: 600 16px/24px var(--font);
  color: var(--hc-link) !important;
}

.sec-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sec-link .i {
  width: 14px;
  height: 14px;
}

.sec-h .btn-sm {
  order: 2;
}

.hc-full .sp-main .sec-h3 h3 {
  font: 700 24px/32px var(--font);
}

/* ---- 記事カード ---------------------------------------------------------------- */

.rc-grid {
  display: grid;
  gap: 24px;
}

.rc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rc-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 記事のカード（お知らせ・あわせて読む）: ポケットの形。上に口の帯（濃い地）と縫い目の点線、
   分類は点線の名札。押せそうな時は少し浮いて、縫い目が金になる。光の輪・グラデーションの縁は使わない */
.rc {
  display: block;
  border-radius: 16px 16px 36px 36px;
  color: var(--hc-ink) !important;
  transition: transform .2s var(--hc-e-std);
}

a.rc:hover {
  transform: translateY(-4px);
}

.rc-g {
  display: block;
  height: 100%;
}

.rc-in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 205px;
  padding: 34px 22px 26px;
  border-radius: 16px 16px 36px 36px;
  background: linear-gradient(180deg, var(--hc-s3) 0 18px, var(--hc-s1) 18px);
}

.rc-4 .rc-in {
  min-height: 240px;
}

/* 口の少し下の縫い目 */
.rc-in::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 24px;
  border-top: 2px dashed var(--hc-frame);
  transition: border-color .15s linear;
}

a.rc:hover .rc-in::before {
  border-top-color: var(--hc-gold);
}

a.rc:focus-visible {
  outline: none;
}

a.rc:focus-visible .rc-in {
  outline: 3px solid var(--hc-focus);
  outline-offset: 3px;
}

.rc-e {
  align-self: flex-start;
  padding: 2px 8px;
  border: 1.5px dashed var(--hc-frame);
  border-radius: 8px;
  font: 600 13px/18px var(--font);
  color: var(--hc-ink-2);
}

.rc-t {
  font: 600 18px/24px var(--font);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.rc-p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 400 14px/22px var(--font);
  color: var(--hc-ink-2);
}

.rc-f {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.disc {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--hc-bg);
}

.disc .di {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 100px;
  background: var(--hc-prow);
  font: 500 14px/18px var(--font);
}

/* ---- 困ったとき（明るいポケットの板） ----------------------------------------------------- */

/* 明るい地・紺の字。下の角を大きく丸めたポケットの形で、内側に縫い目の点線。区切りは金の線 */
.hc-tools {
  position: relative;
  margin-top: 40px;
  padding: 28px 40px 40px;
  border-radius: 16px 16px 40px 40px;
  background: var(--hc-s1);
  color: var(--hc-ink);
  overflow: hidden;
  isolation: isolate;
}

.hc-tools::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 2px dashed var(--hc-frame);
  border-radius: 10px 10px 32px 32px;
  pointer-events: none;
}

.hc-tools .stars {
  z-index: -1;
  top: 0;
  right: 0;
  width: min(560px, 60%);
  height: 150px;
  --st1: var(--hc-gold);
  --st2: var(--hc-frame);
  --st3: var(--hc-frame);
  --st4: var(--hc-teal);
}

.tools-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.hc-full .sp-main .tools-h h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 32px/48px var(--font);
  color: var(--hc-ink);
}

.tstar {
  width: 26px !important;
  height: 26px !important;
  color: var(--hc-gold);
}

.hc-tools hr {
  height: 3px;
  margin: 20px 0 24px;
  border: 0;
  border-radius: 3px;
  background: var(--hc-gold);
}

.tools-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.tools-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hc-full .sp-main .tools-col h3 {
  margin: 0 0 16px;
  font: 700 18px/30px var(--font);
  letter-spacing: -.03em;
  color: var(--hc-ink);
}

.trows {
  display: grid;
  gap: 8px;
}

.trow {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--hc-s3);
  border-radius: 8px;
  background: var(--hc-prow);
  color: var(--hc-ink) !important;
  font: 500 16px/24px var(--font);
  transition: background-color .15s, border-color .15s;
}

.trow:hover {
  border-color: var(--hc-gold);
  background: var(--hc-prow-h);
}

.trow .pg {
  width: 22px;
  height: 22px;
  color: var(--hc-ink-2);
}

.trow .arr {
  margin-left: auto;
  color: var(--hc-ink-2);
  transition: transform .15s, color .15s;
}

.trow:hover .arr {
  color: var(--hc-ink);
  transform: translateX(2px);
}

/* ---- ヘルプ（カード 3 枚。ポケットの形と縫い目） ---------------------------------------------- */

.tcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 24px 32px;
  border-radius: 16px 16px 32px 32px;
  background: var(--hc-s1);
}

.tcard::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 12px;
  border-top: 2px dashed var(--hc-frame);
}

.tcard .g {
  width: 40px;
  height: 40px;
  color: var(--hc-ink);
}

.hc-full .sp-main .tcard h3 {
  font: 700 24px/32px var(--font);
}

.tcard p {
  margin: 0 0 8px;
  color: var(--hc-ink-2);
}

.tcard .btn-s {
  align-self: flex-start;
  margin-top: auto;
}

/* ---- 作っているもの（ポケットの形のカード） ------------------------------------------------ */

/* 袋（.pk-body）は下の角を大きく丸め、口の帯（濃い色）と縫い目の点線。
   その後ろから製品のアイコン（PocketRoles）かマスコットの星（StarPocket Client）がのぞき、
   押せそうな時は少し上に出てくる。絵はうちの物だけ */
.pks {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.pk {
  position: relative;
  display: block;
  flex: none;
  width: 247px;
  height: 300px;
  isolation: isolate;
}

.pk-peek {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 0;
  width: 112px;
  height: 112px;
  margin-left: -56px;
  transition: transform .3s var(--hc-e-std);
}

.pk-icon {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 26px;
  transform: rotate(-6deg);
  box-shadow: 0 6px 16px rgba(14, 16, 48, .25);
}

.pk-hoshi {
  display: block;
  width: 124px;
  height: 121px;
  margin: -6px 0 0 -6px;
  transform: rotate(-8deg);
}

.pk-spark {
  position: absolute;
  top: -10px;
  right: -22px;
  width: 26px;
  height: 26px;
  color: var(--hc-gold);
  transform: scale(.7);
  opacity: .8;
  transition: transform .3s var(--hc-e-std), opacity .3s;
}

.pk-cl .pk-spark {
  color: var(--hc-teal);
}

.pk-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 196px;
  padding: 0 16px 34px;
  border-radius: 18px 18px 64px 64px;
  background: linear-gradient(180deg, var(--pk-hem) 0 30px, var(--pk-bg) 30px);
  color: var(--pk-ink) !important;
  text-align: center;
  transition: transform .3s var(--hc-e-std), box-shadow .3s;
}

/* 口の少し下の縫い目 */
.pk-body::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 42px;
  border-top: 3px dashed var(--pk-stitch);
}

/* 袋の縁にそった縫い目（下の丸みにそって） */
.pk-body::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 52px;
  bottom: 10px;
  border: 2px dashed var(--pk-stitch);
  border-top: 0;
  border-radius: 0 0 56px 56px;
  opacity: .7;
}

.pk-pr {
  --pk-bg: #1E2257;
  --pk-hem: #141845;
  --pk-ink: #FFFFFF;
  --pk-stitch: rgba(169, 174, 211, .7);
}

.pk-cl {
  --pk-bg: #2EC4B6;
  --pk-hem: #128C7E;
  --pk-ink: #0E1030;
  --pk-stitch: rgba(14, 16, 48, .45);
}

.pk-word {
  position: relative;
  font: 900 18px/1.15 var(--font-display);
  letter-spacing: .02em;
}

.pk-sub {
  position: relative;
  font: 600 13px/18px var(--font);
  opacity: .85;
}

.pk:hover .pk-peek {
  transform: translateY(-14px);
}

.pk:hover .pk-spark {
  transform: scale(1.1) rotate(20deg);
  opacity: 1;
}

.pk:hover .pk-body {
  transform: translateY(-2px);
  box-shadow: var(--hc-lift);
}

.pk:focus-visible {
  outline: none;
}

.pk:focus-visible .pk-body {
  outline: 3px solid var(--hc-focus);
  outline-offset: 3px;
}

/* ---- サーバーの状況 --------------------------------------------------------------- */

/* 白い地。上の区切りは縫い目の点線。札は 3 枚並びの名札（点線の枠・下の角が丸いポケット）で、
   上にアイコンの小さな板、真ん中に名前、下に「動いています ●」か「開く ↗」 */
.hc-status {
  padding-block: 48px 40px;
  border-top: 2px dashed var(--hc-line);
  background: var(--hc-bg);
}

.hc-full .sp-main .hc-status .sec-h h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.srows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.srow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "ic ic"
    "sn sn"
    "st mk";
  align-items: center;
  gap: 8px;
  padding: 18px 20px 22px;
  border: 2px dashed var(--hc-frame);
  border-radius: 14px 14px 32px 32px;
  background: var(--hc-s1);
  color: var(--hc-ink) !important;
  transition: border-color .15s linear, transform .2s var(--hc-e-std);
}

a.srow:hover {
  border-style: solid;
  border-color: var(--hc-gold);
  transform: translateY(-2px);
}

.srow > .i:first-child {
  grid-area: ic;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 12px;
  background: var(--hc-bg);
  color: var(--hc-ink);
}

.srow .sn {
  grid-area: sn;
  font: 700 18px/26px var(--font);
}

.srow .st {
  grid-area: st;
  font: 500 14px/20px var(--font);
  color: var(--hc-ink-2);
}

.srow .dot,
.srow .i.ext {
  grid-area: mk;
  justify-self: end;
}

.snote {
  max-width: 900px;
  margin: 16px 0 0;
  font: 400 14px/22px var(--font);
  color: var(--hc-ink-2);
}

/* ---- 最後の節（困ったら問い合わせ） ------------------------------------------------------- */

.blade {
  background: var(--hc-bg);
}

.hc-status + .blade {
  background: var(--hc-bg);
}

.blade-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 378px;
  padding-block: 56px;
  text-align: center;
}

.hc-full .sp-main .blade h2 {
  font: 700 32px/48px var(--font);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.blade p {
  max-width: 560px;
  margin: 8px 0 0;
  font: 500 18px/28px var(--font);
  color: var(--hc-ink-2);
  text-wrap: pretty;
}

/* お問い合わせのカード: 明るい青緑のポケット。口の下に縫い目、ポケットの口からマスコット「ほし」がのぞく */
.cc {
  position: relative;
  display: block;
  width: min(480px, 100%);
  margin-top: 88px;
  color: var(--hc-ink) !important;
  text-align: left;
  isolation: isolate;
}

.cc-hoshi {
  position: absolute;
  top: -62px;
  right: 44px;
  z-index: 0;
  width: 88px;
  height: 86px;
  transform: rotate(8deg);
  transition: transform .3s var(--hc-e-std);
}

.cc-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 140px;
  padding: 40px 28px 30px;
  border-radius: 16px 16px 48px 48px;
  background: var(--hc-ci-bg);
  box-shadow: inset 0 0 0 2px var(--hc-ci-bar);
  transition: transform .3s var(--hc-e-std);
}

.cc-body::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 14px;
  border-top: 2px dashed var(--hc-ci-bar);
}

.cc-tx {
  flex: 1 1 auto;
  min-width: 0;
}

.cc b {
  display: block;
  font: 700 18px/30px var(--font);
  letter-spacing: -.03em;
}

.cc-tx span {
  display: block;
  font: 400 16px/24px var(--font);
  color: var(--hc-ink-2);
}

.cc-arr {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--hc-ink);
  transition: transform .3s var(--hc-e-std);
}

.cc:hover .cc-hoshi {
  transform: translateY(-10px) rotate(0deg);
}

.cc:hover .cc-body {
  transform: translateY(-4px);
}

.cc:hover .cc-arr {
  transform: translateX(4px);
}

.cc:focus-visible {
  outline: none;
}

.cc:focus-visible .cc-body {
  outline: 3px solid var(--hc-focus);
  outline-offset: 3px;
}

/* ---- 導入・起動・不具合: タブ ---------------------------------------------------------- */

/* 選ばれたタブは白い札に金の下線（暗い表示では一段明るい紺に金の下線） */
.hc-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 8px;
  border-radius: 12px;
  background: var(--hc-s2);
}

.hc-tabs [role="tab"] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  border-radius: 8px;
  color: var(--hc-ink-2) !important;
  font: 700 20px/28px var(--font);
  text-align: center;
  transition: background-color .15s, color .15s, box-shadow .15s;
}

.hc-tabs [role="tab"]:hover {
  background: var(--hc-s3);
  color: var(--hc-ink) !important;
}

.hc-tabs [role="tab"][aria-selected="true"] {
  background: var(--hc-prow);
  color: var(--hc-ink) !important;
  box-shadow: inset 0 -4px 0 var(--hc-gold), 0 1px 3px rgba(14, 16, 48, .12);
}

.hc-panel {
  padding-top: 40px;
}

.hc-pair {
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.hc-pair + .hc-pair {
  margin-top: 40px;
}

.pair-art {
  width: 430px;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--sp-800);
}

.pair-art .art {
  display: block;
  width: 100%;
  height: 100%;
}

.hc-full .sp-main .pair-tx h3 {
  margin-bottom: 8px;
  font: 700 24px/32px var(--font);
}

.pair-tx p {
  margin: 0 0 16px;
  color: var(--hc-ink-2);
  text-wrap: pretty;
}

/* 明るい横長のカード: 紺の字、左に金の線、内側に縫い目の点線。マスコットはポケットに入ったまま */
.hc-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  padding: 18px 24px 18px 22px;
  border-left: 6px solid var(--hc-gold);
  border-radius: 8px 16px 16px 8px;
  background: var(--hc-s1);
  color: var(--hc-ink);
  isolation: isolate;
}

.hc-banner::before {
  content: "";
  position: absolute;
  inset: 7px 7px 7px 6px;
  z-index: -1;
  border: 2px dashed var(--hc-frame);
  border-radius: 6px 12px 12px 6px;
  pointer-events: none;
}

.bn-m {
  flex: none;
  width: 64px;
  height: 66px;
}

.bn-tx {
  flex: 1 1 auto;
  min-width: 0;
}

.hc-full .sp-main .bn-tx h3 {
  font: 700 24px/32px var(--font);
  color: var(--hc-ink);
}

.bn-tx p {
  margin: 0;
  font: 500 18px/28px var(--font);
  color: var(--hc-ink-2);
}

.hc-banner .btn-c {
  flex: none;
}

/* あわせて読む（メモのカード 3 枚）: 白い地に縫い目の点線の枠、下の角が丸いポケット。
   右上に金の小さな星、下の右に「読む →」（金の下線の文字。枠のボタンにはしない） */
.deep {
  margin-top: 40px;
}

.gcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 20px;
  border: 2px dashed var(--hc-frame);
  border-radius: 12px 12px 32px 32px;
  background: var(--hc-bg);
}

.gk-star {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 18px;
  height: 18px;
  color: var(--hc-gold);
}

.hc-full .sp-main .gcard h3,
.hc-full .sp-main .gcard h4 {
  padding-right: 24px;
  font: 700 18px/26px var(--font);
}

.gcard p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 8px;
  font: 400 14px/22px var(--font);
  color: var(--hc-ink-2);
}

.gk-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-end;
  margin-top: auto;
  padding: 4px 2px;
  border-bottom: 3px solid var(--hc-gold);
  font: 700 16px/22px var(--font);
  color: var(--hc-ink) !important;
}

.gk-go .i {
  width: 16px;
  height: 16px;
  transition: transform .2s var(--hc-e-std);
}

.gk-go:hover .i {
  transform: translateX(3px);
}

/* ---- 入室制限・異議申し立て ----------------------------------------------------------- */

.tq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  margin-top: 40px;
  padding: 32px;
  border-radius: 16px;
  background: var(--hc-panel);
}

.hc-full .sp-main .tq h2 {
  font: 700 32px/48px var(--font);
}

.tq p {
  margin: 8px 0 0;
  font: 400 20px/32px var(--font);
  color: var(--hc-ink-2);
}

.tq-cards {
  display: grid;
  grid-template-columns: repeat(2, 254px);
  gap: 24px;
}

.scard,
.self {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px;
  border-radius: 16px;
  background: var(--hc-card);
}

.spark {
  width: 36px;
  height: 36px;
}

.hc-full .sp-main .scard h3,
.hc-full .sp-main .self h3 {
  font: 600 24px/32px var(--font);
}

.scard p,
.self p {
  margin: 0;
  color: var(--hc-ink-2);
}

.scard .btn-s,
.self .btn-s {
  align-self: flex-start;
  min-height: 40px;
  margin-top: auto;
  font-size: 16px;
  line-height: 24px;
}

.scards {
  display: grid;
  gap: 24px;
}

.scards-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scards .scard {
  background: var(--hc-s1);
}

.lgs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.lg {
  padding: 24px;
  border-radius: 16px;
  background: var(--hc-panel);
}

.hc-full .sp-main .lg h3 {
  margin-bottom: 16px;
  font: 700 24px/32px var(--font);
}

.lrows,
.lg-rows {
  display: grid;
  gap: 8px;
}

.lg-rows {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lrow {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--hc-prow);
  color: var(--hc-link) !important;
  font: 700 18px/24px var(--font);
  transition: background-color .15s;
}

.lg-rows .lrow {
  background: var(--hc-s1);
}

.lrow:hover {
  background: var(--hc-prow-h);
}

.lrow .arr {
  margin-left: auto;
}

.two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 40px;
}

.hc-full .sp-main .h4 {
  margin-bottom: 16px;
  font: 700 18px/28px var(--font);
}

/* 番号付きの手順 */
.steps {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: s;
}

.steps li {
  position: relative;
  padding-left: 40px;
  counter-increment: s;
  /* メールアドレスなど長い英字が、せまい画面で横にはみ出さないように */
  overflow-wrap: anywhere;
}

.steps li::before {
  content: counter(s);
  position: absolute;
  top: 1px;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--hc-num);
  color: var(--hc-num-ink);
  font: 700 14px/26px var(--font);
  text-align: center;
}

.steps-lg {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 32px;
  font-size: 18px;
  line-height: 28px;
}

/* 囲み（info = 青緑 / note = 金 / warn = 紺。赤は使わない） */
.call {
  margin: 24px 0;
  padding: 20px;
  border-left: 5px solid var(--cbar);
  border-radius: 0 8px 8px 0;
  background: var(--cbg);
}

.call .ct {
  display: block;
  margin-bottom: 6px;
  font: 800 14px/20px var(--font);
  color: var(--cink);
}

.call p {
  margin: 0;
}

.call.info { --cbar: var(--hc-ci-bar); --cbg: var(--hc-ci-bg); --cink: var(--hc-ci-ink); }
.call.note { --cbar: var(--hc-cn-bar); --cbg: var(--hc-cn-bg); --cink: var(--hc-cn-ink); }
.call.warn { --cbar: var(--hc-cw-bar); --cbg: var(--hc-cw-bg); --cink: var(--hc-cw-ink); }

/* ---- 記事 ------------------------------------------------------------------------ */

/* 記事・コードの一覧の頭: 明るいポケットのふた（下の角を大きく丸め、内側の下に縫い目の点線）。
   中にパンくずと記事の検索。右に薄い星。暗い帯・真ん中の印・波の縁は使わない */
.ahead {
  position: relative;
  margin-inline: auto;
  max-width: 1480px;
  border-radius: 0 0 40px 40px;
  background: var(--hc-s1);
  overflow: hidden;
  isolation: isolate;
}

.ahead::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 12px;
  z-index: -1;
  border-top: 2px dashed var(--hc-frame);
  pointer-events: none;
}

.ahead .stars {
  z-index: -1;
  top: 0;
  right: 0;
  width: min(520px, 50%);
  height: 100%;
  --st1: var(--hc-gold);
  --st2: var(--hc-frame);
  --st3: var(--hc-frame);
  --st4: var(--hc-teal);
}

.arow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 28px 40px;
}

.arow nav {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.acrumb-star {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--hc-gold);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 500 12px/16px var(--font);
  letter-spacing: .04em;
  color: var(--hc-ink-2);
}

:root[lang="en"] .crumbs {
  text-transform: uppercase;
}

.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: .7;
}

.crumbs a:hover {
  color: var(--hc-ink);
  text-decoration: underline;
}

.asearch {
  position: relative;
  width: 400px;
  max-width: 100%;
}

.asearch input {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 48px 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--hc-s2);
  color: var(--hc-ink);
  font: 400 16px/24px var(--font);
  -webkit-appearance: none;
  appearance: none;
}

.asearch input:hover {
  background: var(--hc-s3);
}

.asearch input::placeholder {
  color: var(--hc-ink-2);
  opacity: 1;
}

.asearch .sbtn {
  top: 13px;
  right: 14px;
  color: var(--hc-ink);
}

/* ふたの中では白い欄に点線の枠（地と同じ色にならないように） */
.ahead .asearch input {
  background: var(--hc-bg);
  box-shadow: inset 0 0 0 2px var(--hc-frame);
}

.ahead .asearch input:hover {
  background: var(--hc-bg);
  box-shadow: inset 0 0 0 2px var(--hc-gold);
}

.hair {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--hc-line);
}

.acont {
  width: 100%;
  max-width: calc(832px + 2 * var(--hc-gut));
  margin-inline: auto;
  padding: 40px var(--hc-gut) 24px;
}

.hc-full .sp-main .acont h1 {
  font: 700 32px/48px var(--font);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.author .av {
  width: 40px;
  height: 40px;
  flex: none;
}

.author b {
  display: block;
  font: 600 18px/24px var(--font);
}

.author span {
  font: 400 14px/20px var(--font);
  color: var(--hc-ink-2);
}

.atags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 24px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--hc-s2);
  font: 500 14px/16px var(--font);
}

.pill .pi {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.abody {
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.abody p {
  margin: 0 0 24px;
}

.abody ul {
  margin: 0 0 24px;
  padding-left: 1.4em;
}

.abody li {
  margin-bottom: 8px;
}

.abody .steps {
  font-size: 18px;
}

.hc-full .sp-main .ah2 {
  margin: 40px 0 16px;
  font: 800 22px/30px var(--font);
  letter-spacing: .01em;
  scroll-margin-top: 104px;
}

.hc-full .sp-main .ah3 {
  margin: 28px 0 12px;
  font: 800 18px/26px var(--font);
  scroll-margin-top: 104px;
}

.abody .call p {
  font-size: 17px;
  line-height: 1.6;
}

.alink {
  color: var(--hc-link) !important;
  font-weight: 600;
  text-decoration: underline !important;
  text-decoration-color: var(--hc-link-u) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;
}

.alink:hover {
  text-decoration-color: var(--hc-gold) !important;
}

.abody code,
.codes-page code {
  padding: .1em .4em;
  border-radius: 6px;
  background: var(--hc-s2);
  font-family: var(--mono);
  font-size: .88em;
}

.acode {
  margin: 0 0 24px;
  padding: 16px 20px;
  border-radius: 8px;
  background: var(--hc-band);
  color: var(--hc-on-dark);
  font: 400 15px/1.6 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.acode code {
  padding: 0;
  background: none;
  color: inherit;
}

.acodes .codes {
  columns: 1;
}

.solved {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 40px;
  padding: 24px;
  border-radius: 16px;
  background: var(--hc-s1);
}

.hc-full .sp-main .solved h2 {
  flex: 1 1 220px;
  font: 700 18px/28px var(--font);
}

.solved-out {
  flex-basis: 100%;
  margin: 0;
  color: var(--hc-ink-2);
}

/* ---- エラーコード ----------------------------------------------------------------- */

.alead {
  margin: 16px 0 4px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--hc-ink-2);
}

.ameta {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--hc-ink-2);
}

.codes {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 24px;
}

.codes li {
  break-inside: avoid;
  margin-bottom: 6px;
}

.codes a {
  display: inline-block;
  font: 600 16px/24px var(--font);
  color: var(--hc-link) !important;
  text-decoration: underline;
  text-decoration-color: var(--hc-link-u);
  text-underline-offset: 4px;
}

.codes a b {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
}

.cgroup {
  margin-top: 16px;
}

.code {
  padding: 20px 0;
  border-top: 1px solid var(--hc-line);
  scroll-margin-top: 96px;
}

.hc-full .sp-main .code h3 {
  font: 700 20px/28px var(--font);
}

.cc-code {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 10px;
  border-radius: 8px;
  background: var(--hc-band);
  color: var(--hc-on-dark);
  font: 700 16px/24px var(--mono);
  letter-spacing: .04em;
}

.code:target {
  background: var(--hc-cn-bg);
  box-shadow: 0 0 0 12px var(--hc-cn-bg);
  border-radius: 4px;
}

.code p {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.6;
}

.code .howto b {
  color: var(--hc-ink);
}

.totop {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--hc-ink-2) !important;
  text-decoration: underline !important;
}

/* ---- 検索 ------------------------------------------------------------------------- */

.scount {
  margin: 32px 0 0;
  font: 400 16px/24px var(--font);
  color: var(--hc-ink-2);
}

.slay {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
  padding-top: 24px;
}

.filters summary {
  margin-bottom: 12px;
  font: 700 18px/28px var(--font);
  cursor: default;
  list-style: none;
}

.filters summary::-webkit-details-marker {
  display: none;
}

.filters fieldset {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.fr {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  cursor: pointer;
}

.fr input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--hc-ink);
}

.results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.results li {
  padding: 16px 0;
  border-bottom: 1px solid var(--hc-line);
}

.results li:first-child {
  padding-top: 0;
}

.rt {
  font: 600 18px/24px var(--font);
  color: var(--hc-link) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--hc-link-u) !important;
  text-underline-offset: 4px;
}

.rx {
  margin: 8px 0;
  font: 400 14px/22px var(--font);
  color: var(--hc-ink-2);
  overflow-wrap: anywhere;
}

.rx mark {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--hc-cn-bg);
  color: var(--hc-ink);
}

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

/* ---- 暗い表示: 選ばれたタブの影を消す（金の下線だけ）。紺のポケットは地と同じ色になるので一段明るく ---- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hc-tabs [role="tab"][aria-selected="true"] {
    box-shadow: inset 0 -4px 0 var(--hc-gold);
  }

  :root:not([data-theme="light"]) .pk-pr {
    --pk-bg: #2F3680;
    --pk-hem: #0E1030;
  }
}

:root[data-theme="dark"] .hc-tabs [role="tab"][aria-selected="true"] {
  box-shadow: inset 0 -4px 0 var(--hc-gold);
}

:root[data-theme="dark"] .pk-pr {
  --pk-bg: #2F3680;
  --pk-hem: #0E1030;
}

/* ---- 画面がせまい時 ------------------------------------------------------------------ */

@media (max-width: 1199px) {
  .rc-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tq {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1023px) {
  .hc-tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 6px;
  }

  .hc-tabs::-webkit-scrollbar {
    display: none;
  }

  .hc-tabs [role="tab"] {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 24px;
    scroll-snap-align: start;
  }

  .tools-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 899px) {
  .rc-3,
  .rc-4 {
    display: flex;
    gap: 16px;
    margin-inline: calc(var(--hc-gut) * -1);
    padding-inline: var(--hc-gut);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--hc-gut);
    scrollbar-width: none;
  }

  .rc-3 .rc,
  .rc-4 .rc {
    flex: 0 0 min(303px, 82%);
    scroll-snap-align: start;
  }

  .tcards,
  .gcards,
  .srows,
  .lgs,
  .two,
  .scards-2,
  .lg-rows,
  .steps-lg {
    grid-template-columns: minmax(0, 1fr);
  }

  .hc-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .pair-art {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .slay {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .filters summary {
    cursor: pointer;
    list-style: revert;
  }

  .arow {
    flex-direction: column;
    align-items: stretch;
  }

  .asearch {
    width: 100%;
  }

  .codes {
    columns: 1;
  }
}

@media (max-width: 599px) {
  .hc-full .sp-main .hh1 {
    font-size: 32px;
    line-height: 40px;
  }

  .hero-in {
    padding-top: 24px;
  }

  /* 横に流せる札の列。scroll-padding が無いと、吸い付く位置が画面の端（余白 0）になる */
  .chips {
    margin-inline: calc(var(--hc-gut) * -1);
    padding-inline: var(--hc-gut);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--hc-gut);
    scrollbar-width: none;
  }

  .srow {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "ic sn mk"
      "ic st mk";
    gap: 0 12px;
    padding: 14px 16px 16px;
    border-radius: 12px 12px 24px 24px;
  }

  .ahead {
    border-radius: 0 0 28px 28px;
  }

  .arow {
    padding-block: 20px 34px;
  }

  .chips::-webkit-scrollbar {
    display: none;
  }

  .chip {
    flex: none;
    height: 42px;
    scroll-snap-align: start;
  }

  .hc-full .sp-main .sec-h h2,
  .hc-full .sp-main .tools-h h2,
  .hc-full .sp-main .blade h2,
  .hc-full .sp-main .tq h2 {
    font-size: 28px;
    line-height: 40px;
  }

  .hc-sec {
    padding-top: 32px;
  }

  .hc-tools {
    padding: 24px 20px 32px;
    border-radius: 16px 16px 32px 32px;
  }

  .hc-tools::before {
    inset: 7px;
    border-radius: 10px 10px 26px 26px;
  }

  /* せまい画面では題とボタンに星が重なるので出さない */
  .hc-tools .stars {
    display: none;
  }

  .hc-banner {
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 16px 16px 16px 16px;
  }

  .bn-m {
    width: 48px;
    height: 50px;
  }

  .bn-tx {
    flex-basis: calc(100% - 64px);
  }

  .hc-full .sp-main .bn-tx h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .bn-tx p {
    font-size: 16px;
    line-height: 24px;
  }

  .hc-banner .btn-c,
  .btn-s {
    width: 100%;
  }

  .tq {
    padding: 24px 16px;
  }

  .tq p {
    font-size: 18px;
    line-height: 28px;
  }

  .tq-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .pks {
    gap: 12px;
  }

  .pk {
    width: calc(50% - 6px);
    max-width: 200px;
    height: 236px;
  }

  .pk-peek {
    top: 14px;
    width: 84px;
    height: 84px;
    margin-left: -42px;
  }

  .pk-icon {
    width: 84px;
    height: 84px;
    border-radius: 20px;
  }

  .pk-hoshi {
    width: 94px;
    height: 92px;
    margin: -5px 0 0 -5px;
  }

  .pk-spark {
    right: -18px;
    width: 20px;
    height: 20px;
  }

  .pk-body {
    height: 158px;
    padding: 0 10px 26px;
    border-radius: 14px 14px 44px 44px;
    background: linear-gradient(180deg, var(--pk-hem) 0 24px, var(--pk-bg) 24px);
  }

  .pk-body::before {
    left: 12px;
    right: 12px;
    top: 34px;
  }

  .pk-body::after {
    left: 7px;
    right: 7px;
    top: 42px;
    bottom: 7px;
    border-radius: 0 0 38px 38px;
  }

  .pk-word {
    font-size: 13px;
    letter-spacing: 0;
  }

  .pk-sub {
    font-size: 12px;
    line-height: 16px;
  }

  .cc {
    margin-top: 72px;
  }

  .cc-hoshi {
    top: -52px;
    right: 28px;
    width: 72px;
    height: 70px;
  }

  .cc-body {
    padding: 36px 20px 26px;
  }

  .abody {
    font-size: 17px;
  }

  .hc-full .sp-main .acont h1 {
    font-size: 28px;
    line-height: 38px;
  }

  .lrow {
    min-height: 56px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-s,
  .chip,
  .cc-hoshi,
  .cc-body,
  .cc-arr,
  .pk-peek,
  .pk-spark,
  .pk-body,
  .rc,
  .srow,
  .gk-go .i,
  .trow .arr {
    transition: none !important;
  }

  .btn-s:hover,
  .chip:hover,
  .cc:hover .cc-hoshi,
  .cc:hover .cc-body,
  .cc:hover .cc-arr,
  .pk:hover .pk-peek,
  .pk:hover .pk-spark,
  .pk:hover .pk-body,
  a.rc:hover,
  a.srow:hover,
  .gk-go:hover .i,
  .trow:hover .arr {
    transform: none;
  }
}