@charset "UTF-8";
/* ==========================================================
   LINE導線（2026-10 追加）
   - .qoala-mv-badges  … 実績バッジ
   - .qoala-mv-visual  … PC・スマホ画像＋吹き出し
   - .qoala-line-box   … LINE連携ボックス
   - .qoala-line-float … 右下の追従ボタン（Code Snippets で出力）
   ========================================================== */

:root {
  --qoala-line-green: #06c755;
  --qoala-line-green-dark: #05a647;
  --qoala-ink: #272727;
}

.qoala-line-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--qoala-line-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath fill='%23fff' d='M28 11c-10.5 0-19 6.8-19 15.2 0 7.5 6.7 13.8 15.8 15 .6.1 1.5.4 1.7.9.2.5.1 1.2 0 1.7l-.3 1.6c-.1.5-.4 1.9 1.7 1 2-.8 11-6.5 15-11.1C45.7 32.2 47 29.4 47 26.2 47 17.8 38.5 11 28 11z'/%3E%3Ctext x='28' y='30.5' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='900' font-size='10.5' fill='%2306c755'%3ELINE%3C/text%3E%3C/svg%3E") center / 100% no-repeat;
}

.qoala-line-icon--white {
  width: 26px;
  height: 26px;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath fill='%23fff' d='M28 7C16.4 7 7 14.6 7 24c0 8.4 7.4 15.4 17.5 16.7.7.2 1.6.5 1.9 1 .2.6.1 1.4 0 1.9l-.3 1.8c-.1.6-.4 2.1 1.9 1.1 2.2-.9 12.2-7.2 16.6-12.3C47.6 31.2 49 28 49 24 49 14.6 39.6 7 28 7z'/%3E%3Ctext x='28' y='28.5' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='900' font-size='11.5' fill='%2306c755'%3ELINE%3C/text%3E%3C/svg%3E");
}

/* ---------- 実績バッジ ---------- */
/* --badge（メダルの直径）を基準に、文字や縁の大きさを比率で決める */
.qoala-mv-badges {
  --badge: 118px;
  display: flex;
  gap: 14px;
  margin: 0;
  padding: calc(var(--badge) * .25) 0 0; /* 王冠が上にはみ出す分 */
  list-style: none;
}

.qoala-badge {
  position: relative;
  flex-shrink: 0;
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--qoala-ink);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 50% 50%, #ffe7a3 0, #ffd27a 40%, #f6b456 72%, #e99a3b 100%);
  box-shadow:
    inset 0 0 0 calc(var(--badge) * .025) #f2a744,
    inset 0 0 0 calc(var(--badge) * .05) rgba(255, 244, 205, .7),
    0 calc(var(--badge) * .037) calc(var(--badge) * .083) rgba(0, 0, 0, .22);
}

.qoala-badge__crown {
  position: absolute;
  top: -24.5%;
  left: 19%;
  width: 62%;
  height: auto;
}

.qoala-badge__label {
  font-size: calc(var(--badge) * .117);
  letter-spacing: .02em;
  white-space: nowrap;
}
.qoala-badge:nth-child(3) .qoala-badge__label { font-size: calc(var(--badge) * .105); }

.qoala-badge__value {
  display: flex;
  align-items: baseline;
  margin-top: calc(var(--badge) * .05);
  white-space: nowrap;
}
.qoala-badge__num {
  font-family: "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: calc(var(--badge) * .349);
  letter-spacing: -.02em;
}
/* 「30万」のように漢字を含む数字は少し小さく */
.qoala-badge:nth-child(3) .qoala-badge__num { font-size: calc(var(--badge) * .294); }
.qoala-badge__unit {
  margin-left: calc(var(--badge) * .014);
  font-size: calc(var(--badge) * .138);
}
.qoala-badge__sub {
  margin-top: calc(var(--badge) * .032);
  font-size: calc(var(--badge) * .119);
}

/* ---------- PC・スマホ画像＋吹き出し ---------- */
.qoala-mv-visual {
  position: relative;
}

.qoala-mv-visual__img {
  display: block;
  width: 100%;
  height: auto;
}

/* 吹き出し：背景に白文字＋手描き風の線（左右に2本ずつ） */
.qoala-mv-visual__bubble {
  margin: 0;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .04em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 90, 88, .35);
}
.qoala-mv-visual__bubble span {
  position: relative;
  display: inline-block;
  padding: 0 1.9em;
}
.qoala-mv-visual__bubble span::before,
.qoala-mv-visual__bubble span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.3em;
  height: 2.2em;
  margin-top: -1.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 44'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M3 3.5c2.6 6.4 6 15.6 10.4 26.8'/%3E%3Cpath d='M13.5 9.5c2 4.6 4.6 11.2 8 19.6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.qoala-mv-visual__bubble span::before { left: 0; }
.qoala-mv-visual__bubble span::after { right: 0; transform: scaleX(-1); }

/* ---------- LINE連携ボックス ---------- */
.qoala-line-box {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 480px;
  margin: -27% auto 0;
  padding: 16px 20px 18px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 72, 70, .18);
  color: var(--qoala-ink);
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
}

.qoala-line-box__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qoala-line-box__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.qoala-line-box__label {
  padding: 3px 9px;
  border-radius: 999px;
  background: #ff4d6d;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
}

.qoala-line-box__text {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.qoala-line-box__foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #d8e3e1;
}

.qoala-line-box__points {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
}
.qoala-line-box__points li {
  position: relative;
  padding-left: 20px;
}
.qoala-line-box__points li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  border-radius: 50%;
  background: var(--qoala-line-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.qoala-line-box__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 10px 40px;
  border-radius: 999px;
  background: var(--qoala-line-green);
  box-shadow: 0 4px 0 var(--qoala-line-green-dark);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.qoala-line-box__btn::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.qoala-line-box__btn:hover {
  color: #fff;
  opacity: .92;
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--qoala-line-green-dark);
}

/* ---------- 右下の追従ボタン ---------- */
.qoala-line-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 111110;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--qoala-line-green);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  text-decoration: none;
  transition: transform .25s, opacity .25s, visibility .25s;
}
/* LINE案内が画面内にある間は隠す（Code Snippets のスクリプトで付け外し） */
.qoala-line-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.9);
  pointer-events: none;
}
.qoala-line-float:hover {
  color: #fff;
  transform: scale(1.06);
}
.qoala-line-float__icon {
  width: 52px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 44'%3E%3Cpath fill='%23fff' d='M28 1C14.2 1 3 9.8 3 20.6c0 9.7 8.9 17.8 20.9 19.4.8.2 1.9.5 2.2 1.2.3.6.2 1.6.1 2.2l-.4 2.1c-.1.6-.5 2.4 2.1 1.3 2.6-1.1 14.4-8.5 19.7-14.5C51.3 28.2 53 24.6 53 20.6 53 9.8 41.8 1 28 1z'/%3E%3Ctext x='28' y='25' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='900' font-size='12.5' fill='%2306c755'%3ELINE%3C/text%3E%3C/svg%3E") center / contain no-repeat;
  font-size: 0;
}
.qoala-line-float__text {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* ==========================================================
   PC（1025px〜）：見出し・実績バッジ・LINE案内を左揃え、その右隣に製品画像
   ========================================================== */
@media (min-width: 1025px) {
  #lp-qoala-page .lp-qoala-page__mv__bg__content {
    align-items: center;
  }
  #lp-qoala-page .lp-qoala-page__mv__bg__content__left {
    margin-bottom: 0;
  }
  #lp-qoala-page .lp-qoala-page__mv__bg__content__left__inner {
    display: grid;
    grid-template-columns: minmax(330px, 370px) minmax(0, 1fr);
    grid-template-areas:
      "head   head"
      "badges visual"
      "box    visual";
    align-items: end;
    max-width: none;
    padding-right: 20px; /* フォームとの間を空ける */
  }
  #lp-qoala-page .lp-qoala-page__mv__bg__content__left__head {
    grid-area: head;
    margin: 0;
  }
  #lp-qoala-page .lp-qoala-page__mv__bg__content__left__head__text {
    text-align: left;
    padding: 0;
  }
  .qoala-mv-badges {
    grid-area: badges;
    --badge: clamp(98px, 8.2vw, 118px);
    margin-top: 4px;
  }
  .qoala-mv-visual {
    grid-area: visual;
    z-index: 1;
    margin-left: 12px; /* LINE案内と重ねず、両方を見せる */
  }
  .qoala-mv-visual__bubble {
    margin: 0 0 34px -10px; /* 製品画像から離し、右端の線がフォームにかからない位置に */
    font-size: clamp(15px, 1.35vw, 19px);
    transform: rotate(-12deg);
    transform-origin: left bottom;
  }
  .qoala-line-box {
    grid-area: box;
    max-width: none;
    margin: 18px 0 0;
    padding: 12px 16px 14px;
  }
  .qoala-line-box__foot { margin-top: 10px; padding-top: 10px; }
  .qoala-line-box__points { margin-bottom: 8px; font-size: 12.5px; gap: 4px 10px; }
  .qoala-line-box__head { gap: 12px; }
  .qoala-line-box__head .qoala-line-icon { width: 50px; height: 50px; border-radius: 12px; }
  .qoala-line-box__title { font-size: 18px; }
  .qoala-line-box__text { font-size: 13px; }
  .qoala-line-box__btn {
    min-height: 46px;
    padding: 8px 28px 8px 22px;
    font-size: 15px;
    white-space: nowrap; /* Webフォント読み込み前の代替フォントでも1行に保つ */
  }
  .qoala-line-box__btn::after { right: 16px; }
}

/* 1025〜1199px：左側に横並びの幅が足りないため、縦に並べる */
@media (min-width: 1025px) and (max-width: 1199px) {
  #lp-qoala-page .lp-qoala-page__mv__bg__content__left__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "badges" "visual" "box";
  }
  .qoala-mv-visual {
    width: 100%;
    max-width: 400px;
    margin: 16px 0 0;
  }
  .qoala-mv-visual__bubble {
    margin: 0 0 8px;
    transform: none;
  }
  .qoala-line-box {
    max-width: 420px;
  }
}

/* ==========================================================
   タブレット・スマホ（〜1024px）：縦に並べ、製品画像とLINE案内は重ねない
   ========================================================== */
@media (max-width: 1024px) {
  .qoala-mv-badges {
    --badge: min(26vw, 150px);
    justify-content: center;
    gap: min(3.5vw, 24px);
    margin: 4px 0 0;
  }
  .qoala-mv-visual {
    max-width: 560px;
    margin: 18px auto 0;
  }
  .qoala-mv-visual__bubble {
    margin-bottom: 22px;
    font-size: min(5.4vw, 28px);
  }
  .qoala-line-box {
    margin: 46px auto 24px;
  }
}

@media (max-width: 640px) {
  .qoala-line-box {
    padding: 16px 14px 16px;
    border-radius: 12px;
  }
  .qoala-line-box__head .qoala-line-icon {
    width: 46px;
    height: 46px;
    border-radius: 11px;
  }
  .qoala-line-icon--white {
    width: 22px;
    height: 22px;
  }
  .qoala-line-box__title { font-size: 17px; }
  .qoala-line-box__label { font-size: 11px; }
  .qoala-line-box__text { font-size: 12.5px; }
  /* 3項目を1行に収める（極端に狭い画面では折り返す） */
  .qoala-line-box__points {
    justify-content: space-between;
    gap: 4px 6px;
    font-size: min(12.5px, 3.3vw);
    letter-spacing: -.02em;
  }
  .qoala-line-box__points li { padding-left: 16px; white-space: nowrap; }
  .qoala-line-box__points li::before { width: 12px; height: 12px; margin-top: -6px; }
  .qoala-line-box__btn {
    gap: 6px;
    min-height: 50px;
    padding: 10px 26px 10px 18px;
    font-size: min(14px, 3.75vw);
    white-space: nowrap;
  }
  .qoala-line-box__btn::after { right: 14px; }
  /* 既存の下部固定バー（高さ約40px）の上に配置 */
  .qoala-line-float {
    right: 16px;
    bottom: 56px;
    width: 66px;
    height: 66px;
  }
  .qoala-line-float__icon {
    width: 34px;
    height: 26px;
  }
  .qoala-line-float__text { margin-top: 2px; font-size: 9.5px; }
}

/* 375px未満の狭いスマホ：説明文が「案件／・人材も」と崩れないよう少し詰める */
@media (max-width: 374px) {
  .qoala-line-box__head { gap: 10px; }
  .qoala-line-box__head .qoala-line-icon { width: 38px; height: 38px; border-radius: 9px; }
  .qoala-line-box__title { font-size: 15.5px; }
  .qoala-line-box__label { font-size: 10px; padding: 2px 7px; }
  .qoala-line-box__text { font-size: 11px; letter-spacing: -.02em; }
}