@charset "UTF-8";
/* ============================================================
   ko-support（韓国語ページ）専用CSS
   共通CSSは変更せず、ko- クラス経由でこのページだけ上書きする
   ============================================================ */

/* ============================================================
   01. FV（.qhack-mv）
   ============================================================ */

/* 問い合わせ条件の注意書き */
.ko-mv__note {
  color: #313131;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

/* バッジ：韓国語は文字数が多く複数行になるので行間を詰める */
.ko-mv .qhack-mv__badge-label,
.ko-mv .qhack-mv__badge-value {
  line-height: 1.3;
}

/* 3つ目のバッジは3行構成。数字の前後の補足テキストを独立した行にする */
.ko-mv__badge-value-sub {
  display: block;
  font-size: 12px;
  letter-spacing: 0.3px;
}

/* PCはグリッドなので、注意書きの行を1つ足して組み直す */
@media screen and (min-width: 1025px) {
  .ko-mv__note {
    grid-column: 1;
    grid-row: 3;
    margin-top: -8px;
    margin-bottom: 8px;
  }
  .ko-mv .qhack-mv__badges {
    grid-column: 1;
    grid-row: 4;
  }
  .ko-mv .qhack-mv__image {
    grid-row: 1 / 5;
  }
}

/* タブレット以下はflex＋orderなので、CTAとバッジの間に差し込む */
@media screen and (max-width: 1024px) {
  .ko-mv__note {
    order: 4;
    width: 100%;
    margin-top: -8px;
  }
  .ko-mv .qhack-mv__badges {
    order: 5;
  }
  .ko-mv__badge-value-sub {
    font-size: 13px;
  }
}

@media screen and (max-width: 767px) {
  .ko-mv__note {
    font-size: 11px;
    line-height: 1.5;
  }
  .ko-mv__badge-value-sub {
    font-size: 10px;
  }
}

/* タイトルの改行はPC・タブレットだけ。SPは自然に折り返す */
@media screen and (max-width: 767px) {
  .ko-mv .qhack-mv__title br {
    display: none;
  }
}

/* ============================================================
   02. 出店代行セクション（.qhack-service-card-section）
   背景の白帯と margin-top を消して、余白はここで持つ。
   上は同じ白背景のFV（下 padding 80px）と続くので、PCは上を 40px に抑える
   ============================================================ */
.ko-service-card-section {
  background: transparent;
  margin-top: 0;
  padding: 40px 0 60px;
}

.ko-service-card {
  min-height: 0;
  padding: 48px 40px;
}

/* 見出しをh1にしたため、共通の #top h1 の装飾を打ち消して元のデザインに戻す */
#top .ko-service-card .qhack-service-card__title {
  color: #313131;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.2px;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 1024px) {
  .ko-service-card-section {
    padding: 48px 0;
  }
  .ko-service-card {
    padding: 40px 32px;
  }
}

@media screen and (max-width: 767px) {
  .ko-service-card-section {
    padding: 32px 0;
  }
  .ko-service-card {
    padding: 28px 20px;
  }
  #top .ko-service-card .qhack-service-card__title {
    font-size: 22px;
    letter-spacing: 0.8px;
  }
}

/* ============================================================
   03. 実績カード（.qhack-intro__ranking-*）
   カード枠は既存のまま。文章量が増えた中身だけ調整する
   ============================================================ */

/* 見出しの上に入るリード文 */
.ko-intro__ranking-lead {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.7px;
  margin-bottom: 8px;
}

.ko-intro__ranking .qhack-intro__ranking-item {
  gap: 20px;
  padding: 20px 24px;
}

.ko-intro__ranking .qhack-intro__ranking-item img {
  max-width: 110px;
}

.ko-intro__ranking .qhack-intro__ranking-item p {
  padding: 0 56px;
  font-size: 15px;
}

/* 左右の飾り（アチーブメントのカギカッコ）。
   本文の左右余白に収まるよう、元の 52×206px から縮める */
.ko-intro__ranking .qhack-intro__ranking-item p::before,
.ko-intro__ranking .qhack-intro__ranking-item p::after {
  width: 40px;
  height: 158px;
}

.ko-intro__ranking-category {
  display: block;
  color: #888;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.ko-intro__ranking-desc {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.ko-intro__ranking-stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 6px;
}

.ko-intro__ranking-stat-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.ko-intro__ranking-stat-unit {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.ko-intro__ranking .qhack-intro__ranking-number {
  font-size: 32px;
  line-height: 1.1;
}

.ko-intro__ranking .qhack-intro__ranking-date {
  margin-top: 0;
}

/* タブレット：2列だと1枚あたりが狭いので1列にする */
@media screen and (max-width: 1024px) {
  .ko-intro__ranking {
    grid-template-columns: 1fr;
  }
}

/* スマホは画像が上・テキストが下の縦積み */
@media screen and (max-width: 767px) {
  .ko-intro__ranking-lead {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .ko-intro__ranking .qhack-intro__ranking-item img {
    max-width: 160px;
  }
  .ko-intro__ranking .qhack-intro__ranking-item p {
    padding: 0 40px;
    font-size: 14px;
  }
  .ko-intro__ranking .qhack-intro__ranking-item p::before,
  .ko-intro__ranking .qhack-intro__ranking-item p::after {
    width: 28px;
    height: 110px;
  }
  .ko-intro__ranking-category {
    font-size: 12px;
  }
  .ko-intro__ranking-desc {
    font-size: 13px;
  }
  .ko-intro__ranking-stat-label {
    font-size: 13px;
  }
  .ko-intro__ranking-stat-unit {
    font-size: 13px;
  }
  .ko-intro__ranking .qhack-intro__ranking-number {
    font-size: 26px;
  }
}

/* 実績カードと注釈（※実際の運用データ〜）の間が詰まっているので空ける */
.ko-intro__ranking-note {
  margin-top: 24px;
}

@media screen and (max-width: 1024px) {
  .ko-intro__ranking-note {
    margin-top: 20px;
  }
}

@media screen and (max-width: 767px) {
  .ko-intro__ranking-note {
    margin-top: 16px;
  }
}

/* ============================================================
   04. 課題セクション（.qhack-consulting-problem）
   ============================================================ */

/* 上の会社紹介との間に帯が入って背景が3段階に見えるので margin を消す。
   共通の下 padding（200px）はイラストのはみ出し用。
   ここでは締めの1文がイラストの下に来て最後の要素になるので、通常の余白に戻す */
.ko-consulting-problem {
  margin-top: 0;
  padding-bottom: 80px;
}

@media screen and (max-width: 1024px) {
  .ko-consulting-problem {
    padding-bottom: 60px;
  }
}

@media screen and (max-width: 767px) {
  .ko-consulting-problem {
    padding-bottom: 48px;
  }
}

/* カード下の締めの1文。
   イラストがカード下端からはみ出しているので、
   その下に来るよう上の余白を大きめに取る */
.ko-consulting-problem__note {
  width: 100%;
  color: #313131;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.8px;
  margin: 178px 0 0;
}

@media screen and (max-width: 1024px) {
  .ko-consulting-problem__note {
    font-size: 18px;
    margin-top: 145px;
  }
}

@media screen and (max-width: 767px) {
  .ko-consulting-problem__note {
    font-size: 14px;
    margin-top: 120px;
    padding: 0 16px;
  }
}

/* ============================================================
   04-2. 5つの支援（.qhack-consulting-strength）
   ============================================================ */

/* 共通の section { margin-top: 80px } で、グレーの課題セクションとの間に
   白い帯が入り見出しの上が空きすぎるので、margin を消して padding で持つ */
.ko-consulting-strength {
  margin-top: 0;
  padding-top: 80px;
}

@media screen and (max-width: 1024px) {
  .ko-consulting-strength {
    padding-top: 60px;
  }
}

@media screen and (max-width: 767px) {
  .ko-consulting-strength {
    padding-top: 48px;
  }
}

/* 見出しの改行はPC・タブレットだけ。SPは自然に折り返す */
@media screen and (max-width: 767px) {
  .ko-consulting-strength .qhack-consulting-strength__title br {
    display: none;
  }
}

/* ============================================================
   05. CTA（.qhack-cta-section）ボタン下の注意書きボックス
   ============================================================ */
.ko-cta-section__note {
  width: 100%;
  padding: 12px 20px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #f5f5f5;
  color: #313131;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

/* 共通の margin-top: 40px が上のセクションの下 padding と足し算になるので消す */
.ko-cta {
  margin-top: 0;
}

/* 韓国語の見出しは長いので、SPでは共通（18px）より小さくする */
@media screen and (max-width: 767px) {
  .ko-cta .qhack-cta-section__title {
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {
  .ko-cta-section__note {
    padding: 10px 14px;
    font-size: 11px;
    line-height: 1.5;
    text-align: left;
  }
}

/* ============================================================
   06. 他社との違い（.qhack-feature-diff）
   Q-HACK列の「○」を「◎」と同じ大きさにする
   ============================================================ */
.ko-feature-diff__symbol--circle-lg {
  font-size: 44px;
}

/* CTA直後。共通の section { margin-top: 80px } と上 padding が足し算になり
   見出しの上が空きすぎるので、margin を消して padding で持つ */
.ko-feature-diff {
  margin-top: 0;
  padding-top: 80px;
}

@media screen and (max-width: 1024px) {
  .ko-feature-diff {
    padding-top: 60px;
  }
}

@media screen and (max-width: 767px) {
  .ko-feature-diff {
    padding-top: 48px;
  }
}

/* ============================================================
   07. 支援範囲一覧（.qhack-support）一覧の下に置く補足文
   ============================================================ */
.ko-support__note {
  color: #313131;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.7px;
  margin: 60px 0 0;
}

@media screen and (max-width: 1024px) {
  .ko-support__note {
    font-size: 16px;
    margin-top: 40px;
  }
}

@media screen and (max-width: 767px) {
  .ko-support__note {
    font-size: 14px;
    margin-top: 30px;
    padding: 0 16px;
  }
}

/* 上の「他社との違い」と同じ白背景が続き、
   その下 padding（80px）と足し算で間延びするので、上の余白を詰める */
.ko-support {
  padding-top: 40px;
}

/* ============================================================
   08. お客様の声（.qhack-voice）
   カードが1枚だけなので、スライダーを止めて横幅を広げる
   ============================================================ */
.ko-voice .qhack-voice__slider {
  margin-bottom: 0;
}

.ko-voice .qhack-voice__slider-track {
  justify-content: center;
}

.ko-voice .qhack-voice__slide {
  flex: 0 1 auto;
  width: 100%;
  max-width: 880px;
}

.ko-voice .qhack-voice__card {
  width: 100%;
  max-width: 880px;
  min-height: 0;
  padding: 48px 56px;
}

@media screen and (max-width: 1024px) {
  .ko-voice .qhack-voice__slide,
  .ko-voice .qhack-voice__card {
    max-width: 680px;
  }
  .ko-voice .qhack-voice__card {
    padding: 40px;
  }
}

@media screen and (max-width: 767px) {
  .ko-voice .qhack-voice__slide,
  .ko-voice .qhack-voice__card {
    max-width: 100%;
  }
}

/* ============================================================
   08-2. 料金プラン例（.qhack-consulting-plan）
   グレーのお客様の声の直後。共通は margin-top 80px（白帯）＋上 padding 20px で、
   背景の切り替わりと見出しの位置がずれるので、margin を消して padding で持つ
   ============================================================ */
.ko-plan {
  margin-top: 0;
  padding-top: 100px;
}

@media screen and (max-width: 1024px) {
  .ko-plan {
    padding-top: 80px;
  }
}

@media screen and (max-width: 767px) {
  .ko-plan {
    padding-top: 60px;
  }
}

/* ============================================================
   09. 無料相談・お問い合わせ（.qhack-contact）
   韓国語ラベルは長いので項目名を185pxに広げ、入力欄の幅を調整する
   ============================================================ */

/* ページ最後のセクション。フッターまでが空きすぎるので、
   SWELLのコンテンツラッパー（.l-content）の下マージンを消し、
   下 padding も共通（PC 120px / SP 80px）より詰める。
   .l-content は header.php 側の出力でクラスを足せないので、:has() で このページだけに絞る */
.l-content:has(.ko-contact) {
  margin-bottom: 0;
}

.ko-contact {
  padding-bottom: 100px;
}

@media screen and (max-width: 1024px) {
  .ko-contact {
    padding-bottom: 80px;
  }
}

@media screen and (max-width: 767px) {
  .ko-contact {
    padding-bottom: 60px;
  }
}

@media screen and (min-width: 768px) {
  .ko-contact .qhack-contact-form__label {
    width: auto;
    flex-shrink: 0;
  }

  .ko-contact .qhack-contact-form__label-text {
    width: 185px;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-height: 1.5;
  }

  .ko-contact .qhack-contact-form__badge {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .ko-contact .qhack-contact-form__input {
    flex: 1;
    min-width: 0;
    max-width: none;
  }
}

/* ============================================================
   10. ご支援の流れ（.qhack-flow）
   上の「料金プラン例」と同じ白背景が続き、
   その下 padding（100px）と足し算で間延びするので、上の余白を詰める
   ============================================================ */
.ko-flow {
  padding-top: 20px;
}

/* ============================================================
   11. よくある質問（.qhack-faq）
   SPの背景画像は共通で background-size: 100% auto（上寄せ）。
   韓国語は回答が長くセクションが縦に伸びるので、画像が途中で切れる。
   セクション全体を覆うように cover にする
   ============================================================ */
@media screen and (max-width: 767px) {
  .ko-faq::before {
    background-size: cover;
    background-position: center top;
  }
}