/* ============================================
   軽バンジョブLP デザインカンプ A案
   トンマナ：ロゴ②(ネイビー×パープル)
   キーワード：スピード感・シャープ・上昇
============================================ */
:root {
  --navy: #1B1746;
  --navy-deep: #120F33;
  --purple: #7C24E8;
  --purple-light: #9440FF;
  --yellow: #FFD500;
  --bg-light: #F4F2FB;
  --text: #1B1746;
  --white: #fff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; vertical-align: middle; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }

body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  background: var(--white);
}

section { padding: 90px 40px; }

/* ---- 共通パーツ ---- */
.sec-title {
  text-align: center;
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 56px;
  position: relative;
}
.sec-title em {
  font-style: normal;
  color: var(--purple);
}
.sec-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, var(--purple), var(--purple-light));
  transform: skewX(-25deg);
}

.btn {
  display: inline-block;
  font-weight: 700;
  text-align: center;
  transition: opacity .2s;
}
.btn--cta {
  background: var(--yellow);
  color: var(--navy);
  border-radius: 6px;
  box-shadow: 0 4px 0 #C9A600;
  padding: 14px 36px;
  font-size: 16px;
}
.btn--l { padding: 20px 72px; font-size: 20px; }
.btn--header { padding: 10px 22px; font-size: 14px; }
.btn--kb-top {
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  white-space: nowrap;
}
.btn--header .btn--header__icon { display: none; }

mark {
  background: linear-gradient(transparent 55%, var(--yellow) 55%);
  color: inherit;
  font-weight: 700;
  padding: 0 2px;
}

/* 画像プレースホルダ */
.ph {
  background: repeating-linear-gradient(-45deg, #E9E5F5, #E9E5F5 12px, #F2EFFA 12px, #F2EFFA 24px);
  border: 2px dashed #B9A9E0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph span { color: #7A6BAF; font-size: 13px; font-weight: 600; }

/* ---- ヘッダー ---- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(27,23,70,.1);
}
.header__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px 24px;
}
.header__logo { display: flex; align-items: center; gap: 10px; }
.header__logo img { width: 48px; height: 48px; object-fit: contain; }
.header__logo-text { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: .02em; }
.header__nav { margin-left: auto; display: flex; gap: 26px; }
.header__nav a { font-size: 14px; font-weight: 600; color: var(--navy); }

/* ---- FV ---- */
.fv {
  background:
    linear-gradient(115deg, rgba(124,36,232,.55) 0%, rgba(124,36,232,0) 42%),
    linear-gradient(295deg, rgba(148,64,255,.4) 0%, rgba(148,64,255,0) 38%),
    var(--navy);
  color: var(--white);
  padding: 80px 40px 90px;
  position: relative;
  overflow: hidden;
}
.fv::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-60deg, rgba(255,255,255,.04) 0 2px, transparent 2px 90px);
}
.fv__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
  position: relative;
}
.fv__text { flex: 1.15; }
.fv__title {
  font-size: 54px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
  margin-bottom: 22px;
}
.fv__title-em {
  color: var(--yellow);
  font-size: 64px;
}
.fv__sub { font-size: 26px; margin-bottom: 30px; }
.fv__sub mark { font-size: 28px; color: var(--navy); background: var(--yellow); padding: 2px 10px; }
.fv__badges { display: flex; gap: 16px; margin-bottom: 36px; }
.fv__badge {
  background: var(--white);
  color: var(--navy);
  border-radius: 8px;
  padding: 12px 26px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-left: 6px solid var(--purple);
}
.fv__badge-label { font-size: 14px; font-weight: 700; }
.fv__badge-num { font-size: 32px; font-weight: 700; color: var(--purple); }
.fv__badge-num small { font-size: 15px; color: var(--navy); }
.fv__cta-lead { font-size: 17px; font-weight: 700; margin-bottom: 12px; }

.fv__visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
}
.fv__callout {
  background: var(--yellow);
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
  padding: 14px 12px;
  border-radius: 50%;
  min-width: 84px;
  transform: rotate(-6deg);
}
.fv__callout--2 { transform: rotate(6deg); align-self: flex-end; }

.phone {
  width: 260px;
  background: var(--white);
  border-radius: 28px;
  padding: 10px 10px 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.phone__notch {
  width: 90px; height: 8px;
  background: #D8D8E4;
  border-radius: 4px;
  margin: 4px auto 8px;
}
.phone__screen {
  background: #EAE6F7;
  border-radius: 18px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat {
  font-size: 11px;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 10px;
  max-width: 86%;
}
.chat--bot { background: var(--white); color: var(--text); align-self: flex-start; border-top-left-radius: 2px; }
.chat--user { background: var(--purple); color: var(--white); align-self: flex-end; border-top-right-radius: 2px; font-weight: 700; }
.chat__choices { display: flex; gap: 6px; margin-top: 6px; }
.chat__choices span {
  border: 1px solid var(--purple);
  color: var(--purple);
  border-radius: 20px;
  padding: 2px 12px;
  font-weight: 700;
}

/* ---- 自社サービス紹介 ---- */
.about { background: var(--white); padding-top: 100px; }
.about__head {
  max-width: 760px;
  margin: 0 auto 60px;
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 34px 20px 30px;
  border-radius: 10px;
  position: relative;
}
.about__head::after {
  content: "";
  position: absolute;
  bottom: -14px; left: 50%;
  transform: translateX(-50%);
  border: 14px solid transparent;
  border-top-color: var(--navy);
  border-bottom: 0;
}
.about__title { font-size: 34px; font-weight: 700; margin-bottom: 8px; }
.about__sub { font-size: 18px; font-weight: 700; color: #D9CCF5; }
.about__body { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
.about__item {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  background: var(--bg-light);
  border-radius: 10px;
  padding: 34px 36px;
  border-left: 8px solid var(--purple);
}
.about__num {
  font-size: 44px;
  font-weight: 700;
  color: var(--purple);
  line-height: 1;
  font-style: italic;
}
.about__item-text { flex: 1; }
.about__item-text h3 { font-size: 21px; font-weight: 700; margin-bottom: 10px; }
.about__item-text h3 em { font-style: normal; color: var(--purple); }
.about__item-text p { font-size: 15px; }
.ph--about { width: 220px; height: 150px; flex-shrink: 0; }

/* ---- 導入事例 ---- */
.case { background: var(--navy); }
.case .sec-title { color: var(--white); }
.case .sec-title em { color: var(--yellow); }
.case .sec-title::after { background: var(--yellow); }
.case__card {
  max-width: 880px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 12px;
  padding: 44px 48px;
}
.case__company { text-align: center; font-size: 22px; font-weight: 700; margin-bottom: 28px; }
.case__compare { display: flex; align-items: stretch; gap: 20px; justify-content: center; }
.case__col {
  flex: 1;
  border-radius: 10px;
  padding: 24px 28px;
  text-align: center;
}
.case__col--before { background: #EFEFF3; color: #55536E; }
.case__col--after { background: linear-gradient(135deg, var(--purple), var(--purple-light)); color: var(--white); }
.case__col-head { font-weight: 700; font-size: 17px; margin-bottom: 14px; }
.case__col dl { margin-bottom: 10px; }
.case__col dt { font-size: 13px; }
.case__col dd { font-size: 22px; font-weight: 700; }
.case__col--after dd strong { font-size: 30px; color: var(--yellow); }
.case__arrow {
  width: 0; height: 0;
  align-self: center;
  border: 18px solid transparent;
  border-left: 26px solid var(--purple);
  border-right: 0;
}
.case__result {
  text-align: center;
  margin-top: 30px;
  font-size: 30px;
  font-weight: 700;
}
.case__result strong { color: var(--purple); font-size: 44px; }

/* ---- 悩み ---- */
.nayami { background: var(--bg-light); }
.nayami__list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.bubble {
  background: var(--white);
  border-radius: 40px;
  padding: 22px 40px;
  font-size: 17px;
  box-shadow: 0 4px 14px rgba(27,23,70,.08);
  position: relative;
}
.bubble strong { color: #E8244B; font-size: 19px; }
.bubble:nth-child(odd)  { align-self: flex-start; }
.bubble:nth-child(even) { align-self: flex-end; }

/* ---- 解決策 ---- */
.kaiketsu { background: var(--white); }
.kaiketsu__title em { font-size: 46px; }
.kaiketsu__list { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px; }
.kaiketsu__item { display: flex; align-items: center; gap: 48px; }
.kaiketsu__item--rev { flex-direction: row-reverse; }
.kaiketsu__text { flex: 1.2; }
.kaiketsu__text h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 14px;
  line-height: 1.5;
  border-bottom: 3px solid var(--yellow);
  padding-bottom: 10px;
}
.kaiketsu__text p { font-size: 15px; }
.ph--kaiketsu { width: 330px; height: 210px; flex-shrink: 0; }

/* ---- なぜLINE ---- */
.whyline {
  background:
    linear-gradient(rgba(124,36,232,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,36,232,.05) 1px, transparent 1px),
    var(--bg-light);
  background-size: 28px 28px;
  text-align: center;
}
.whyline__tag {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  border-radius: 30px;
  padding: 8px 30px;
  margin-bottom: 26px;
}
.whyline__title { font-size: 30px; font-weight: 700; margin-bottom: 20px; }
.whyline__lead { font-size: 15px; margin-bottom: 44px; }
.whyline__grid {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  gap: 36px;
  align-items: stretch;
  justify-content: center;
}
.whyline__chart {
  background: var(--white);
  border-radius: 12px;
  padding: 28px 30px 20px;
  flex: 1.2;
  box-shadow: 0 6px 18px rgba(27,23,70,.08);
}
.whyline__chart-title {
  display: inline-block;
  background: var(--purple);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  border-radius: 6px;
  padding: 6px 20px;
  margin-bottom: 22px;
}
.bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  height: 200px;
}
.bar {
  width: 44px;
  height: var(--h);
  background: #CFC6E8;
  border-radius: 4px 4px 0 0;
  position: relative;
}
.bar--main { background: linear-gradient(180deg, var(--purple-light), var(--purple)); }
.bar__num {
  position: absolute;
  top: -24px; left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 700;
}
.bar--main .bar__num { color: var(--purple); font-size: 14px; }
.bar__label {
  position: absolute;
  bottom: -24px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  white-space: nowrap;
}
.bars__note { margin-top: 34px; font-size: 11px; color: #888; }
.whyline__stats { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.stat {
  background: var(--white);
  border-radius: 12px;
  padding: 22px 26px;
  box-shadow: 0 6px 18px rgba(27,23,70,.08);
  border-top: 5px solid var(--purple);
}
.stat__label { font-size: 14px; font-weight: 700; color: #55536E; margin-bottom: 4px; }
.stat__num { font-size: 20px; font-weight: 700; }
.stat__num strong { font-size: 46px; color: var(--purple); font-weight: 700; }
.whyline__note { font-size: 14px; text-align: left; }

/* ---- インタビュー ---- */
.interview { background: var(--white); }
.interview__lead { text-align: center; font-size: 18px; font-weight: 700; margin: -36px 0 48px; }
.interview__cards {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.interview__card {
  border: 1px solid #E3DFF2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(27,23,70,.08);
}
.ph--interview { height: 200px; border-radius: 0; border: none; border-bottom: 2px dashed #B9A9E0; }
.interview__body { padding: 26px 28px 30px; }
.interview__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12px;
  color: #55536E;
  margin-bottom: 12px;
}
.interview__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 18px;
  line-height: 1.5;
}
.interview__label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  border-radius: 4px;
  padding: 3px 14px;
  margin-bottom: 8px;
}
.interview__label--before { background: #EFEFF3; color: #55536E; }
.interview__label--after { background: var(--purple); color: var(--white); }
.interview__body ul { margin-bottom: 16px; }
.interview__body li {
  font-size: 14px;
  padding-left: 16px;
  position: relative;
}
.interview__body li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 7px; height: 7px;
  background: var(--purple);
  transform: rotate(45deg);
}

/* ---- サービス内容 ---- */
.service { background: var(--bg-light); }
.service__cards {
  max-width: 1020px;
  margin: 0 auto 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.service__card {
  background: var(--white);
  border-radius: 12px;
  padding: 34px 28px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(27,23,70,.08);
  border-top: 6px solid var(--purple);
}
.service__icon { width: 64px; margin: 0 auto 18px; color: var(--purple); }
.service__card h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.service__card p { font-size: 14px; text-align: left; }
.service__banner {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
}
.service__banner strong {
  color: var(--purple);
  font-size: 32px;
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
}

/* ---- 料金プラン ---- */
.price { background: var(--white); }
.price__card {
  max-width: 560px;
  margin: 0 auto 40px;
  background: var(--navy);
  color: var(--white);
  border-radius: 12px;
  text-align: center;
  padding: 36px 20px 42px;
  position: relative;
  overflow: hidden;
}
.price__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-60deg, rgba(255,255,255,.05) 0 2px, transparent 2px 60px);
}
.price__label { font-size: 20px; font-weight: 700; margin-bottom: 6px; position: relative; }
.price__num { position: relative; }
.price__num mark {
  font-size: 62px;
  font-weight: 700;
  background: linear-gradient(transparent 70%, var(--purple) 70%);
  color: var(--yellow);
}
.price__num small { font-size: 24px; color: var(--white); }
.price__services { max-width: 880px; margin: 0 auto; border: 2px solid var(--navy); border-radius: 12px; overflow: hidden; }
.price__services-head {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  padding: 14px;
}
.price__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  padding: 30px 36px;
}
.price__list li {
  border: 1px solid #D9D3EC;
  border-radius: 6px;
  padding: 12px 18px 12px 46px;
  font-weight: 700;
  font-size: 15px;
  position: relative;
  background: var(--white);
}
.price__list li::before {
  content: "";
  position: absolute;
  left: 16px; top: 50%;
  width: 14px; height: 8px;
  border-left: 3px solid var(--purple);
  border-bottom: 3px solid var(--purple);
  transform: translateY(-70%) rotate(-45deg);
}

/* ---- CTAバンド ---- */
.cta-band {
  background: linear-gradient(115deg, var(--purple) 0%, var(--navy) 70%);
  text-align: center;
  color: var(--white);
  padding: 70px 40px;
}
.cta-band__lead { font-size: 26px; font-weight: 700; margin-bottom: 24px; }

/* ---- 流れ ---- */
.flow { background: var(--white); }
.flow__steps {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.flow__step {
  border: 2px solid var(--navy);
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  padding-bottom: 22px;
  position: relative;
}
.flow__num {
  position: absolute;
  top: 6px; left: 12px;
  font-size: 26px;
  font-weight: 700;
  font-style: italic;
  color: var(--yellow);
  z-index: 1;
}
.flow__head {
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: 17px;
  padding: 14px 10px;
  margin-bottom: 20px;
}
.flow__icon { width: 56px; margin: 0 auto 14px; color: var(--purple); }
.flow__text { font-size: 13px; text-align: left; padding: 0 18px; }

/* ---- サポート体制 ---- */
.support { background: var(--bg-light); }
.support__list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.support__item {
  background: var(--white);
  border-radius: 10px;
  display: flex;
  gap: 26px;
  align-items: center;
  padding: 28px 36px;
  box-shadow: 0 4px 14px rgba(27,23,70,.07);
  border-left: 8px solid var(--purple);
}
.support__num { font-size: 40px; font-weight: 700; font-style: italic; color: var(--purple); }
.support__text h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.support__text p { font-size: 14px; }

/* ---- 媒体 ---- */
.media { background: var(--white); }
.media__grid {
  max-width: 1020px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.media__item { text-align: center; }
.media__name {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  border-bottom: 3px solid var(--purple);
  padding-bottom: 10px;
  margin-bottom: 16px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ph--media { height: 300px; }

/* ---- FAQ ---- */
.faq { background: var(--bg-light); }
.faq__list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.faq__item {
  background: var(--navy);
  color: var(--white);
  border-radius: 8px;
  overflow: hidden;
}
.faq__q {
  font-weight: 700;
  font-size: 16px;
  padding: 18px 56px 18px 24px;
  position: relative;
  display: flex;
  gap: 12px;
}
.faq__q span { color: var(--yellow); font-size: 18px; }
.faq__toggle {
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 20px;
}
.faq__a {
  background: var(--white);
  color: var(--text);
  padding: 18px 24px;
  display: flex;
  gap: 12px;
  font-size: 15px;
}
.faq__a span { color: var(--purple); font-weight: 700; font-size: 18px; }

/* ---- お問い合わせ ---- */
.contact {
  background:
    linear-gradient(115deg, rgba(124,36,232,.5) 0%, rgba(124,36,232,0) 45%),
    var(--navy);
  color: var(--white);
}
.contact__title { text-align: center; font-size: 30px; font-weight: 700; margin-bottom: 40px; }
.contact__form {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact__form label { font-size: 13px; font-weight: 700; display: flex; flex-direction: column; gap: 6px; }
.contact__form input,
.contact__form textarea {
  border: none;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
}
.contact__recaptcha {
  background: #F0F0F0;
  color: #666;
  font-size: 12px;
  border-radius: 4px;
  width: 200px;
  padding: 18px 14px;
  border: 1px solid #CCC;
}
.contact__form .btn { margin: 10px auto 0; }

/* ---- フッター ---- */
.footer { background: var(--navy-deep); color: #C9C5E2; padding: 56px 40px 0; }
.footer__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 40px;
}
.footer__logo { display: flex; align-items: center; gap: 10px; }
.footer__logo img { width: 52px; height: 52px; object-fit: contain; background: var(--white); border-radius: 8px; padding: 2px; }
.footer__logo span { font-size: 18px; font-weight: 700; color: var(--white); }
.footer__links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.footer__address { font-style: normal; font-size: 13px; text-align: right; }
.footer__copy {
  text-align: center;
  font-size: 12px;
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 18px 0;
}

.sp { display: none; }

/* ============ SP (〜767px) ============ */
@media (max-width: 767px) {
  body { font-size: 14px; line-height: 1.8; }
  section { padding: 56px 20px; }
  .sp { display: inline; }
  .sec-title { font-size: 26px; margin-bottom: 36px; }

  .header__inner { padding: 8px 14px; gap: 12px; }
  .header__logo img { width: 38px; height: 38px; }
  .header__logo-text { font-size: 16px; }
  .header__nav { display: none; }
  .btn--kb-top { margin-left: auto; padding: 6px 10px; font-size: 11px; }
  .btn--header { padding: 9px 28px; font-size: 12px; }
  .btn--header .btn--header__text { display: none; }
  .btn--header .btn--header__icon { display: block; }

  .fv { padding: 48px 20px 60px; }
  .fv__inner { flex-direction: column; gap: 44px; }
  .fv__text { text-align: center; }
  .fv__title { font-size: 36px; margin-bottom: 16px; }
  .fv__title-em { font-size: 44px; }
  .fv__sub { font-size: 18px; margin-bottom: 22px; }
  .fv__sub mark { font-size: 19px; }
  .fv__badges { justify-content: center; gap: 10px; margin-bottom: 26px; }
  .fv__badge { padding: 10px 16px; gap: 6px; }
  .fv__badge-label { font-size: 12px; }
  .fv__badge-num { font-size: 24px; }
  .fv__cta-lead { font-size: 15px; }
  .btn--l { padding: 16px 40px; font-size: 17px; }
  .fv__visual { gap: 8px; }
  .phone { width: 220px; }
  .fv__callout { min-width: 68px; font-size: 12px; padding: 10px 8px; }

  .about { padding-top: 64px; }
  .about__head { padding: 24px 16px 20px; }
  .about__title { font-size: 24px; }
  .about__sub { font-size: 14px; }
  .about__body { gap: 24px; }
  .about__item { flex-direction: column; padding: 24px 20px; gap: 14px; }
  .about__num { font-size: 34px; }
  .about__item-text h3 { font-size: 18px; }
  .ph--about { width: 100%; height: 160px; }

  .case__card { padding: 28px 20px; }
  .case__company { font-size: 18px; }
  .case__compare { flex-direction: column; gap: 12px; }
  .case__arrow {
    align-self: center;
    border: 16px solid transparent;
    border-top: 22px solid var(--purple);
    border-bottom: 0;
  }
  .case__result { font-size: 22px; margin-top: 22px; }
  .case__result strong { font-size: 32px; }

  .bubble { padding: 16px 24px; font-size: 15px; }
  .bubble strong { font-size: 16px; }
  .bubble:nth-child(odd), .bubble:nth-child(even) { align-self: stretch; }

  .kaiketsu__title { font-size: 26px; }
  .kaiketsu__title em { font-size: 32px; }
  .kaiketsu__list { gap: 40px; }
  .kaiketsu__item, .kaiketsu__item--rev { flex-direction: column; gap: 18px; }
  .kaiketsu__text h3 { font-size: 19px; }
  .ph--kaiketsu { width: 100%; height: 190px; }

  .whyline__title { font-size: 20px; }
  .whyline__grid { flex-direction: column; gap: 20px; }
  .bars { gap: 8px; height: 160px; }
  .bar { width: 34px; }
  .bar__label { font-size: 9px; }

  .interview__lead { margin: -20px 0 30px; font-size: 15px; }
  .interview__cards { grid-template-columns: 1fr; gap: 24px; }
  .interview__body { padding: 20px 18px 24px; }
  .interview__title { font-size: 17px; }

  .service__cards { grid-template-columns: 1fr; gap: 18px; margin-bottom: 30px; }
  .service__banner { font-size: 18px; }
  .service__banner strong { font-size: 22px; }

  .price__card { padding: 26px 16px 30px; }
  .price__num mark { font-size: 44px; }
  .price__num small { font-size: 18px; }
  .price__services-head { font-size: 16px; }
  .price__list { grid-template-columns: 1fr; gap: 10px; padding: 20px 18px; }

  .cta-band { padding: 48px 20px; }
  .cta-band__lead { font-size: 19px; }

  .flow__steps { grid-template-columns: 1fr; gap: 16px; }

  .support__item { padding: 20px 18px; gap: 16px; }
  .support__num { font-size: 30px; }
  .support__text h3 { font-size: 17px; }

  .media__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .media__name { font-size: 13px; min-height: 48px; }
  .ph--media { height: 210px; }

  .faq__q { font-size: 14px; padding: 14px 40px 14px 16px; }
  .faq__a { font-size: 14px; padding: 14px 16px; }

  .contact__title { font-size: 20px; }

  .footer { padding: 40px 20px 0; }
  .footer__inner { flex-direction: column; align-items: center; gap: 20px; text-align: center; }
  .footer__address { text-align: center; }
}

/* SP微調整 */
@media (max-width: 767px) {
  .fv__badge-label { white-space: nowrap; }
  .contact__title { font-size: 17px; white-space: nowrap; }
  .cta-band__lead { font-size: 17px; white-space: nowrap; }
  .fv__cta-lead { white-space: nowrap; }
}
@media (max-width: 767px) {
  .fv__title { font-size: 31px; }
  .fv__title-em { font-size: 38px; }
  .fv__badge { padding: 8px 12px; }
  .fv__badge-num { font-size: 22px; white-space: nowrap; }
}

/* ============ 修正対応 (2026-07-03 FB) ============ */

/* FV: 3エリアの左右端を揃える */
.fv__sub { margin-bottom: 24px; }
.fv__sub mark {
  display: block;
  text-align: center;
  padding: 8px 10px;
  background: var(--yellow);
}
.fv__badges { display: flex; gap: 16px; }
.fv__badge { flex: 1; justify-content: center; }
.fv .btn--l { display: block; width: 100%; }
.fv__cta-lead { text-align: center; }
.fv__cta-lead .thin { font-weight: 300; }

/* FV右カラム: 画像イメージエリア */
.ph--fv {
  width: 100%;
  max-width: 460px;
  height: 440px;
  text-align: center;
  line-height: 1.8;
}

/* 導入事例: 社員写真エリア追加レイアウト */
.case__grid { display: flex; gap: 30px; align-items: center; }
.ph--case { width: 280px; height: 250px; flex-shrink: 0; text-align: center; line-height: 1.8; }
.case__data { flex: 1; min-width: 0; }
.case__col { padding: 20px 16px; }
.case__col dd { font-size: 19px; }
.case__col--after dd strong { font-size: 26px; }
.case__result { font-size: 26px; margin-top: 24px; }
.case__result strong { font-size: 38px; }

/* なぜLINE: グラフ見出しを9,700向けの吹き出しに */
.whyline__chart { text-align: left; }
.whyline__chart-title {
  display: block;
  width: fit-content;
  position: relative;
  margin: 0 0 34px 10px;
  border-radius: 8px;
}
.whyline__chart-title::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 34px;
  border: 9px solid transparent;
  border-top: 12px solid var(--purple);
  border-bottom: 0;
}
.bars__note { text-align: center; }

/* サービス内容: カード上部を画像イメージに */
.ph--service { width: 100%; height: 150px; margin-bottom: 18px; }

/* サービスバナー: ＼／削除・全文に黄マーカー下線 */
.service__banner-line {
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
  padding: 0 4px;
}
.service__banner strong { background: none; }

/* 料金プラン: 白ベースに変更 */
.price__card {
  background: var(--white);
  color: var(--navy);
  border: 3px solid var(--navy);
  box-shadow: 0 8px 22px rgba(27,23,70,.12);
}
.price__card::before { display: none; }
.price__num mark {
  background: linear-gradient(transparent 70%, var(--yellow) 70%);
  color: var(--purple);
}
.price__num small { color: var(--navy); }

/* 導入までの流れ: 右向き矢印で連結 */
.flow__steps { overflow: visible; }
.flow__step { background: var(--white); }
.flow__step:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  border: 12px solid transparent;
  border-left: 15px solid var(--purple);
  border-right: 0;
}

/* サポート体制: 画像イメージエリア追加 */
.ph--support { width: 190px; height: 120px; flex-shrink: 0; margin-left: auto; }

/* 配信先: 参考LP画像を流用 */
.media__img { width: 100%; display: block; }

/* ---- 上記修正のSP調整 ---- */
@media (max-width: 767px) {
  .fv__badges { gap: 10px; }
  .ph--fv { height: 340px; }
  .case__grid { flex-direction: column; gap: 18px; }
  .ph--case { width: 100%; height: 200px; }
  .case__data { width: 100%; }
  .whyline__chart-title { font-size: 13px; }
  .ph--service { height: 130px; }
  .flow__step:not(:first-child)::before {
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
    border: 12px solid transparent;
    border-top: 15px solid var(--purple);
    border-bottom: 0;
  }
  .support__item { flex-wrap: wrap; }
  .ph--support { width: 100%; height: 110px; margin: 0; }
}
/* 流れ: 矢印がoverflowで消える対策 */
.flow__step { overflow: visible; }
.flow__head { border-radius: 8px 8px 0 0; }
@media (max-width: 767px) {
  .fv__visual { width: 100%; }
  .ph--fv { width: 100%; max-width: 100%; height: 320px; }
}

/* ============ 追加修正 (2026-07-04 FB) ============ */

/* 全ボタンをピル型に */
.btn--cta { border-radius: 999px; }

/* FVタイトル: 幅をボタン(カラム幅)に揃える(両端揃え) */
.fv__title {
  font-size: 58px;
  text-align: justify;
  text-align-last: justify;
}
.fv__title-em { font-size: 66px; }

/* 訴求帯: 1つ前(インライン黄マーカー)に戻す */
.fv__sub { text-align: left; }
.fv__sub mark {
  display: inline;
  text-align: inherit;
  padding: 2px 10px;
}

/* FVイメージ: 左カラムと同じ高さに */
.fv__inner { align-items: stretch; }
.fv__visual { align-items: stretch; }
.ph--fv { height: auto; max-width: 460px; }

/* 導入事例: 写真/従来/導入後を1段に、結果は下段センター */
.case__grid { gap: 24px; margin-bottom: 8px; }
.ph--case { width: 240px; height: auto; align-self: stretch; min-height: 220px; }
.case__compare { flex: 1; min-width: 0; }

/* なぜLINE: 補足文はブロック直下センター */
.whyline__note { text-align: center; margin-top: 30px; font-size: 14px; }

/* 流れ: アイコンを◯型画像イメージに */
.ph--flow {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 14px;
}

/* ---- 上記修正のSP調整 ---- */
@media (max-width: 767px) {
  .fv__title { font-size: 32px; }
  .fv__title-em { font-size: 38px; }
  .fv__sub { text-align: center; }
  .ph--fv { height: 320px; }
  .case__grid { margin-bottom: 14px; }
  .ph--case { width: 100%; height: 200px; align-self: auto; min-height: 0; }
  .ph--flow { width: 84px; height: 84px; }
}

/* ============ 追加修正2 (2026-07-04 FB) ============ */

/* FV訴求帯: 背景透明・文字黄色 */
.fv__sub mark {
  background: transparent;
  color: var(--yellow);
  padding: 0;
}

/* なぜLINE: 右カラム2ブロックの合計高さをグラフと揃える */
.whyline__grid { align-items: stretch; }
.whyline__stats { justify-content: space-between; }
.whyline__stats .stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 補足文をやや大きく */
.whyline__note { font-size: 16px; }

/* すべての ＼／ を細く */
.cta-band__lead .thin,
.contact__title .thin { font-weight: 300; }

/* PC/SP出し分け用 */
.pc { display: inline; }

/* PCのみ: FVタイトルの字間を2行目と同じに(両端揃え解除) */
@media (min-width: 768px) {
  .fv__title {
    text-align: left;
    text-align-last: auto;
    letter-spacing: .01em;
  }
}
@media (max-width: 767px) {
  .pc { display: none; }
}

/* 生成画像の共通スタイル */
.imgph {
  object-fit: cover;
  display: block;
  border: none;
  border-radius: 8px;
}
img.ph--fv { border-radius: 12px; }
img.ph--interview { width: 100%; border-radius: 0; }
img.ph--flow { border-radius: 50%; }
img.ph--case { object-fit: cover; }

/* ============ ver.2 (2026-07-08 FB) ============ */

/* FV: 白基調(ストーリーボード指定) */
.fv {
  background:
    linear-gradient(115deg, rgba(2,149,217,0) 0%, rgba(124,36,232,.06) 100%),
    var(--white);
  color: var(--navy);
}
.fv::before {
  background: repeating-linear-gradient(-60deg, rgba(124,36,232,.04) 0 2px, transparent 2px 90px);
}
.fv__title-em { color: var(--purple); }
.fv__sub mark {
  color: var(--navy);
  background: linear-gradient(transparent 55%, var(--yellow) 55%);
  padding: 2px 6px;
}
.fv__badge {
  border: 2px solid #E5DCF5;
  border-left: 6px solid var(--purple);
  box-shadow: 0 6px 16px rgba(27,23,70,.08);
}

/* FV: ロゴアニメーション動画 */
.fv__movie {
  width: 100%;
  max-width: 560px;
  display: block;
  align-self: center;
}

/* FVシーケンス(テキストがスッスッと出る)
   初期非表示はJSが動く環境(.js)のみ。アプリ内ビューア等JS無効環境では最初から表示 */
.js .fv-seq {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .55s ease, transform .55s ease;
}
.fv-seq.in { opacity: 1; transform: translateY(0); }
a.fv-seq { display: block; }

/* ヘッダーが下りてくる */
.js .header--seq {
  transform: translateY(-100%);
  transition: transform .5s ease;
}
.header--seq.in { transform: translateY(0); }

/* スクロール連動リビール(スッスッスッ)
   revealはHTML直書きが3箇所(about__item)あるため.jsスコープ必須 */
.js .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* タイプライター */
.about__title { font-size: 29px; line-height: 1.6; min-height: 1.6em; }
.typewriter.typing::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--yellow);
  animation: caret-blink .8s step-end infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.about__sub { font-size: 17px; }

/* 解決策見出し: 社名部分は同サイズで色のみ強調 */
.kaiketsu__title em { font-size: inherit; }

/* ---- ver.2 SP調整 ---- */
@media (max-width: 767px) {
  .fv__movie { max-width: 100%; }
  .about__title { font-size: 19px; }
  .about__sub { font-size: 14px; }
  .sec-title { line-height: 1.6; }
}
/* 静的表示(カンプ撮影・reduced-motion)ではアニメーション無効 */
.static .fv-seq, .static .reveal, .static .header--seq { transition: none !important; }

/* ============ ver.2b (2026-07-08 FB第2弾) ============ */

/* FV: 動画を右側に大きく、テキストがその左前面に重なるレイアウト */
.fv { min-height: 640px; display: flex; align-items: center; }
.fv__inner {
  display: block;
  position: relative;
  width: 100%;
  max-width: 1200px;
  min-height: 520px;
}
.fv__text {
  position: relative;
  z-index: 1;
  max-width: 600px;
  padding: 30px 0;
}
.fv__visual {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 68%;
  max-width: 1000px;
  z-index: 0;
  display: block;
}
.fv__movie { width: 100%; max-width: none; }
.fv__logo-sp { display: none; }

/* FAQ開閉 (JS無効環境では全回答を開いた状態で表示) */
.faq__q { cursor: pointer; user-select: none; }
.faq__item .faq__a {
  display: flex;
  overflow: hidden;
}
.js .faq__item .faq__a {
  max-height: 0;
  opacity: 0;
  transition: max-height .45s ease, opacity .35s ease;
}
.faq__item.open .faq__a { max-height: 320px; opacity: 1; }
.static .faq__a { transition: none; }

/* ボタン ホバーアニメーション */
.btn--cta {
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  will-change: transform;
}
.btn--cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 #C9A600, 0 14px 26px rgba(27,23,70,.22);
  filter: brightness(1.04);
}
.btn--cta:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #C9A600;
  filter: brightness(.98);
}

/* グラフ: 下からグーッと伸びる(少ない方から順に)
   JS無効環境では.barの基本ルール(height:var(--h))で完了状態表示 */
.js .bars .bar {
  height: 0;
  transition: height .9s cubic-bezier(.22,.75,.25,1);
}
.js .bars .bar__num { opacity: 0; transition: opacity .35s ease; }
.bars.in .bar { height: var(--h); }
.bars.in .bar__num { opacity: 1; }
.bars .bar:nth-child(6) { transition-delay: 0s; }
.bars .bar:nth-child(5) { transition-delay: .14s; }
.bars .bar:nth-child(4) { transition-delay: .28s; }
.bars .bar:nth-child(3) { transition-delay: .42s; }
.bars .bar:nth-child(2) { transition-delay: .56s; }
.bars .bar:nth-child(1) { transition-delay: .7s; }
.bars.in .bar:nth-child(6) .bar__num { transition-delay: .55s; }
.bars.in .bar:nth-child(5) .bar__num { transition-delay: .69s; }
.bars.in .bar:nth-child(4) .bar__num { transition-delay: .83s; }
.bars.in .bar:nth-child(3) .bar__num { transition-delay: .97s; }
.bars.in .bar:nth-child(2) .bar__num { transition-delay: 1.11s; }
.bars.in .bar:nth-child(1) .bar__num { transition-delay: 1.25s; }

/* 静的表示ではすべて完了状態 */
.static .bars .bar { height: var(--h); transition: none; }
.static .bars .bar__num { opacity: 1; transition: none; }

/* ---- ver.2b SP調整 ---- */
@media (max-width: 767px) {
  .fv { min-height: 0; display: block; }
  .fv__inner { min-height: 0; }
  .fv__text { max-width: none; padding: 0; }
  .fv__visual {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 40px;
  }
  .fv__movie { display: none; }
  .fv__logo-sp { display: block; width: 88%; margin: 0 auto; }
}
/* 動画/ポスターの薄グレー背景を白地に馴染ませる */
.fv__movie { mix-blend-mode: multiply; }

/* ============ ver.2c: FVを添付モック準拠に大型化 ============ */
@media (min-width: 768px) {
  .fv { min-height: 810px; padding: 40px 0; }
  .fv__inner {
    max-width: none;
    min-height: 730px;
    padding: 0 0 0 84px;
    display: flex;
    align-items: center;
  }
  .fv__text { max-width: 660px; padding: 0; }
  .fv__title { font-size: 68px; margin-bottom: 28px; }
  .fv__title-em { font-size: 80px; }
  .fv__sub { font-size: 27px; margin-bottom: 30px; }
  .fv__sub mark { font-size: 28px; }
  .fv__badges { gap: 20px; margin-bottom: 40px; }
  .fv__badge { padding: 16px 26px; }
  .fv__badge-label { font-size: 16px; }
  .fv__badge-num { font-size: 40px; }
  .fv__badge-num small { font-size: 17px; }
  .fv__cta-lead { font-size: 19px; margin-bottom: 14px; }
  .fv .btn--l { padding: 25px 72px; font-size: 23px; }
  .fv__visual {
    right: 0;
    width: 53%;
    max-width: none;
  }
}

/* SP: logo_spがスッと出る(テキストは即時表示) */
@media (max-width: 767px) {
  .fv__logo-sp {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .fv__logo-sp.in { opacity: 1; transform: none; }
}
.static .fv__logo-sp { opacity: 1; transform: none; transition: none; }

/* タイプライター開始前はテキスト非表示(枠サイズは確保) */
.tw-wait { visibility: hidden; }
.about__head { min-height: 174px; }
@media (max-width: 767px) {
  .about__head { min-height: 210px; }
}
/* 動画素材の薄グレー地を白へ(ロゴ色への影響は微小) */
.fv__movie { filter: brightness(1.05); }
/* FV背景を完全な白に(動画と完全に一体化・モック準拠) */
.fv { background: var(--white); }
.fv::before { display: none; }

/* ============ ver.2d: レイアウト2準拠(動画=ヒーロー全面16:9背景) ============ */
@media (min-width: 768px) {
  .fv {
    padding: 0;
    min-height: 0;
    aspect-ratio: 16 / 9;
    display: block;
    position: relative;
  }
  .fv__inner {
    position: relative;
    height: 100%;
    min-height: 0;
    max-width: none;
    display: flex;
    align-items: center;
    padding: 0 0 0 84px;
  }
  .fv__visual {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    transform: none;
    z-index: 0;
  }
  .fv__movie {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .fv__text {
    position: relative;
    z-index: 1;
    max-width: 640px;
  }
  .fv__title { font-size: 72px; }
  .fv__title-em { font-size: 84px; }
}
@media (min-width: 768px) {
  .fv__title { font-size: 63px; }
  .fv__title-em { font-size: 74px; }
}
/* レイアウト微調整: 動画に左右余白 / テキスト右端=画面センター */
@media (min-width: 768px) {
  .fv__visual { padding: 0 64px; }
  .fv__movie { object-fit: contain; }
  .fv__text { width: calc(50% - 84px); max-width: none; }
}
@media (min-width: 768px) {
  /* サイズは据え置き。ブロック全体を右へ42pxずらして右端＝画面センターに合わせる
     (内容箱基準の50%計算で右端が常に42px手前に来るため、その分を平行移動) */
  .fv__text { flex: 0 0 calc(50% - 84px); width: auto; max-width: calc(50% - 84px); margin-left: 42px; }
}

/* ============ ver.2e: FV要素サイズを承認済みA案の元サイズへ戻す ============
   ver.2c/2dで大型化したタイトル・バッジ・ボタンを承認時サイズに復元。
   変えるのは配置(レイアウト2準拠)のみ、要素サイズは元のまま */
@media (min-width: 768px) {
  .fv__title { font-size: 58px; margin-bottom: 22px; }
  .fv__title-em { font-size: 66px; }
  .fv__sub { font-size: 26px; margin-bottom: 30px; }
  .fv__sub mark { font-size: 28px; }
  .fv__badges { gap: 16px; margin-bottom: 36px; }
  .fv__badge { padding: 12px 26px; }
  .fv__badge-label { font-size: 14px; }
  .fv__badge-num { font-size: 32px; }
  .fv__badge-num small { font-size: 15px; }
  .fv__cta-lead { font-size: 17px; margin-bottom: 12px; }
  .fv .btn--l { padding: 20px 72px; font-size: 20px; }
}

/* ============ ver.2f: テキスト位置を元のA_ロゴ②案ヒーローと完全同一へ ============
   元A案 = inner幅1120を中央寄せ・テキスト列はflex1.15(実測567px・160px開始)。
   動画はinnerの外側基準(.fv)で全面のまま変えない */
@media (min-width: 768px) {
  .fv__inner {
    position: static;      /* .fv__visualの絶対配置基準を.fvへ移す(動画サイズ不変) */
    max-width: 1120px;
    margin: 0 auto;
    padding: 0;
  }
  .fv__text {
    /* 元A案のテキスト列幅 = (1120 - gap60) × 1.15/2.15 ≒ 567px */
    flex: 0 0 calc((100% - 60px) * 1.15 / 2.15);
    width: auto;
    max-width: none;
    margin-left: 0;
  }
}

/* ============ ver.2g: 動画を一回り小さく・ヒーローの上下余白を圧縮 ============ */
@media (min-width: 768px) {
  .fv { aspect-ratio: auto; height: 660px; }
  .fv__visual { padding: 0 120px; }
}
/* ver.2h: 動画をもう少し大きく(高さ制約で決まるため高さを+40) */
@media (min-width: 768px) {
  .fv { height: 700px; }
  .fv__visual { padding: 0 90px; }
}
/* ver.2i: 動画をさらに大きく */
@media (min-width: 768px) {
  .fv { height: 740px; }
  .fv__visual { padding: 0 70px; }
}

/* ============ ver.2j: SPのみ修正 ============ */
@media (max-width: 767px) {
  /* とは?見出しブロック: テキストを上下センターに(タイプライター確保枠min-height内) */
  .about__head {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ============ ver.3 (2026-07-09 FB) ============ */
/* ヘッダー: 横型ロゴ(テキスト削除済み) */
.header__logo img { width: auto; height: 44px; object-fit: contain; }
@media (max-width: 767px) {
  .header__logo img { width: auto; height: 34px; }
}
/* サービス画像: 現在の横幅のまま縦横比1:1 */
img.ph--service { height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
/* 全体フォント: Google Fonts「LINE Seed JP」 */
body, button, input, textarea {
  font-family: "LINE Seed JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

/* ページ内リンク: スムーススクロール(sticky header分のオフセット付き) */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* HubSpotフォーム: 置き場所のみ提供(装飾・サイズ介入は一切しない) */
.hs-form-frame { max-width: 760px; margin: 0 auto; }

/* ============ ver.3: SPヒーローも動画化 ============
   spfvmovie001.mp4(9:16縦・8秒)を全面に敷き、最終フレーム=ロゴ下部/上部空白。
   上部空白にタイトル〜CTAが前面レイヤーで乗る */
@media (max-width: 767px) {
  .fv {
    position: relative;
    background: var(--white);
    display: block;
    padding: 40px 20px 0;
    min-height: calc(100vw * 16 / 9);
    overflow: hidden;
  }
  /* 動画の絶対配置基準を.fvにするため、innerはstaticに(テキスト側を前面レイヤーに) */
  .fv__inner { position: static; }
  .fv__text { position: relative; z-index: 1; }
  .fv__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    padding: 0;
    width: auto;
    display: block;
  }
  .fv__movie-sp,
  img.fv__movie-sp {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }
  .fv__logo-sp { display: none !important; }
}
@media (min-width: 768px) {
  .fv__movie-sp { display: none; }
}

/* ============ ver.4 (2026-07-13 FB) ============
   課題セクション: 各吹き出しに「話している人物」の実写写真を追加。
   吹き出しは余白側(写真側)にしっぽを付け、人物が悩みを話している構図に */
.nayami__item { display: flex; align-items: center; gap: 32px; }
.nayami__item:nth-child(odd)  { align-self: flex-start; }
.nayami__item:nth-child(even) { align-self: flex-end; flex-direction: row-reverse; }
/* 新レイアウトでは吹き出し自体のalign-selfは無効化 */
.nayami__list .bubble:nth-child(odd),
.nayami__list .bubble:nth-child(even) { align-self: auto; }
.nayami__photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 4px solid var(--white);
  box-shadow: 0 4px 14px rgba(27,23,70,.14);
}
/* 吹き出しのしっぽ(写真側へ向ける) */
.nayami__item .bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 11px solid transparent;
}
.nayami__item:nth-child(odd) .bubble::after {
  left: 100%;
  border-left: 20px solid var(--white);
  border-right: 0;
}
.nayami__item:nth-child(even) .bubble::after {
  right: 100%;
  border-right: 20px solid var(--white);
  border-left: 0;
}
@media (max-width: 767px) {
  .nayami__item { gap: 14px; align-items: center; }
  .nayami__item:nth-child(odd), .nayami__item:nth-child(even) { align-self: stretch; }
  .nayami__item .bubble { flex: 1; text-align: center; }
  .nayami__photo { width: 84px; height: 84px; border-width: 3px; }
  .nayami__item .bubble::after { border-width: 8px; }
  .nayami__item:nth-child(odd) .bubble::after  { border-left-width: 14px; }
  .nayami__item:nth-child(even) .bubble::after { border-right-width: 14px; }
}

/* ver.4: フッターロゴを横型に差し替え(テキスト削除) */
.footer__logo img {
  width: auto;
  height: 46px;
  object-fit: contain;
  background: var(--white);
  border-radius: 8px;
  padding: 4px 12px;
}

/* ver.4: 課題セクションのグリッド揃え(PC)
   各行をリスト幅いっぱいに広げ、吹き出し左端/写真位置を全行で揃える */
@media (min-width: 768px) {
  .nayami__item:nth-child(odd),
  .nayami__item:nth-child(even) { align-self: stretch; }
  .nayami__item { justify-content: space-between; }
  .nayami__item .bubble { flex: 1; text-align: center; }
}

/* ver.4: SPの課題テキストは左揃え固定(PCは中央揃えのまま) */
@media (max-width: 767px) {
  .nayami__item .bubble { text-align: left; }
}

/* ver.4: 課題吹き出しの三角の位置ズレ修正(PC)
   transform+50%のサブピクセル座標で三角が浮く/ずれて見えるため、
   計算位置(整数px)で固定し、付け根を1px食い込ませて隙間を消す */
@media (min-width: 768px) {
  .nayami__item .bubble::after {
    top: calc(50% - 11px);
    transform: none;
  }
  .nayami__item:nth-child(odd) .bubble::after  { left: calc(100% - 1px); }
  .nayami__item:nth-child(even) .bubble::after { right: calc(100% - 1px); }
}

/* ============ ver.5 (2026-07-15 FB) ============
   SPヒーロー動画の配置変更：ver.3の「縦動画を全面背景に敷く」方式をやめ、
   通常フローで「＼ まずはお気軽にご相談ください！ ／」の直上
   (料金バッジとCTAリードの間)に配置。HTML側で.fv__movie-spを.fv__text内へ移動済み。
   PC版は変更なし */
@media (max-width: 767px) {
  /* 全面背景用の高さ確保(16:9 min-height)を解除し、通常フローの高さに */
  .fv { min-height: 0; padding: 40px 20px 48px; }
  /* PC動画しか入っていない.fv__visualはSPでは非表示 */
  .fv__visual { display: none; }
  .fv__movie-sp,
  img.fv__movie-sp {
    display: block;
    width: 100%;
    height: auto;
    /* 縦動画(720x1280)はアニメーションが下部に集中しているため下部のみ表示。
       ロゴ最終フレーム=774〜1176行のため3/2・92%で上下パディング約38pxに詰める */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center 92%;
    /* 動画素材の右端/下端の暗い縁を除去しつつ角丸カード化 */
    clip-path: inset(1px 1.4% round 14px);
    margin: 0 0 22px;
  }
}

/* ============ ver.6 (2026-07-16 FB) ============
   【新常識】01〜03の画像: 220x150のcover枠で横長素材(1056x520)の
   両サイドが見切れていたため、素材の縦横比のまま全体表示に変更 */
img.ph--about { width: 300px; height: auto; }
@media (max-width: 767px) {
  img.ph--about { width: 100%; height: auto; }
}

/* 【新常識】右の画像: about__item(align-items:flex-start)内で上下中央に */
img.ph--about { align-self: center; }

/* ============ ver.4 (2026-07-23) TOPリンク導線 ============ */
/* CTAバンド: CTA+求人TOPリンクをまとめて左右センター(SPは縦積み) */
.cta-band__btns { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn--kb-body {
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 14px 30px;
  font-size: 16px;
}
@media (max-width: 767px) {
  .cta-band__btns { flex-direction: column; gap: 14px; }
  .btn--kb-body { padding: 12px 24px; font-size: 14px; }
}

/* ============ LINE無料相談CTA追加 (2026-08-07 / B案と同仕様) ============ */
/* LINEボタン: 緑はB案で採用した #00B44B。黄CTAの押し込み影(#C9A600)と同じ構造で
   濃緑(#008D3B)の影+ホバー/アクティブを黄CTAと同挙動に */
.btn--cta.btn--line { background: #00B44B; color: var(--white); box-shadow: 0 4px 0 #008D3B; }
.btn--cta.btn--line:hover { box-shadow: 0 7px 0 #008D3B, 0 14px 26px rgba(27,23,70,.22); }
.btn--cta.btn--line:active { box-shadow: 0 2px 0 #008D3B; }

/* ヘッダー: CTAを2つ横並びに。従来1つ分の幅に近づくよう各ボタンを縮小し、
   増えた幅ぶんナビ等の余白を圧縮してPCで1行に収める */
.header__cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.btn--header { padding: 10px 12px; font-size: 11px; white-space: nowrap; }
.header__inner { gap: 20px; }
.header__nav { gap: 18px; }
.header__nav a { white-space: nowrap; }

/* FV: CTA2つを横並び(等幅)。文字が収まるようサイズを調整 */
.fv__cta-btns { display: flex; gap: 14px; }
.fv__cta-btns .btn--l { flex: 1; padding: 20px 10px; font-size: 17px; white-space: nowrap; }

/* CTAバンド: 上段=CTA2つ横並び / 下段=求人リンクの2列構成 */
.cta-band__btns { flex-direction: column; gap: 20px; }
.cta-band__row { display: flex; justify-content: center; align-items: center; gap: 20px; }

/* LINEロゴ(ico_line.png)をボタンテキスト前に全体表示(トリミングなし) */
.line-mark {
  width: auto;
  height: 1.6em;
  margin-right: 8px;
  vertical-align: -0.45em;
}
.btn--header .line-mark { height: 1.5em; margin-right: 6px; vertical-align: -0.42em; }

/* 求人リンクボタン(ヘッダー/CTAバンド)にもCTAと同様のホバーアニメーション
   (白ピルは押し込み影がないため浮き上がり+ソフトシャドウで表現) */
.btn--kb-top, .btn--kb-body {
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  will-change: transform;
}
.btn--kb-top:hover, .btn--kb-body:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(27,23,70,.18); filter: brightness(1.02); }
.btn--kb-top:active, .btn--kb-body:active { transform: translateY(1px); box-shadow: none; }

@media (max-width: 767px) {
  /* SPヘッダーはテキスト非表示・アイコンのみのため2つ並びでも収まる */
  .header__cta { gap: 6px; }
  .btn--header { padding: 8px 16px; font-size: 12px; }
  /* SPの緑CTAはico_line.png全体を縮小表示(トリミングなし)。
     縦長になる分paddingを詰めて隣のメールボタンと高さを揃える */
  .btn--header .btn--header__icon--line {
    width: auto;
    height: 22px;
    border-radius: 4px;
  }
  .btn--header.btn--line { padding: 6px 14px; }
  /* SPは横幅が足りないため縦積み */
  .fv__cta-btns { flex-direction: column; gap: 12px; }
  .fv__cta-btns .btn--l { white-space: normal; padding: 16px 10px; }
  /* CTAバンド上段もSPは縦積み */
  .cta-band__row { flex-direction: column; gap: 14px; width: 100%; }
  .cta-band__row .btn--l { display: block; width: 100%; }
}