/* ============================================
   軽バンジョブLP デザインカンプ B案
   トンマナ：ロゴ⑦(オレンジ×黒・手描き)
   キーワード：親しみ・あたたかさ・手描き感
============================================ */
:root {
  --ink: #262626;
  --orange: #F07C1E;
  --orange-deep: #D96A10;
  --orange-pale: #FFF3E5;
  --cream: #FFFBF4;
  --marker: #FFCF8A;
  --red: #E8503A;
  --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 Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.9;
  background: var(--cream);
}

section { padding: 90px 40px; }

/* ---- 共通パーツ ---- */
.sec-title {
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 56px;
}
.sec-title em {
  font-style: normal;
  color: var(--orange);
}
.sec-title::after {
  content: "";
  display: block;
  width: 120px;
  height: 6px;
  margin: 12px auto 0;
  background: var(--orange);
  border-radius: 6px 2px 6px 2px;
  transform: rotate(-1.2deg);
}

.btn {
  display: inline-block;
  font-weight: 800;
  text-align: center;
}
.btn--cta {
  background: var(--orange);
  color: var(--white);
  border-radius: 999px;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 13px 34px;
  font-size: 16px;
}
.btn--l { padding: 20px 68px; font-size: 20px; }
.btn--header { padding: 9px 20px; font-size: 13px; }
.btn--kb-top {
  background: var(--white);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 6px 18px;
  font-size: 13px;
  white-space: nowrap;
}
.btn--header .btn--header__icon { display: none; }

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

/* 画像プレースホルダ */
.ph {
  background: repeating-linear-gradient(-45deg, #FBEFDF, #FBEFDF 12px, #FFF7EB 12px, #FFF7EB 24px);
  border: 2px dashed #E0A96B;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph span { color: #B9834A; font-size: 13px; font-weight: 700; }

/* ---- ヘッダー ---- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 3px solid var(--ink);
}
.header__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 8px 24px;
}
.header__logo { display: flex; align-items: center; gap: 10px; }
.header__logo img { width: 50px; height: 50px; object-fit: contain; }
.header__logo-text { font-size: 20px; font-weight: 800; letter-spacing: .04em; }
.header__nav { margin-left: auto; display: flex; gap: 26px; }
.header__nav a { font-size: 14px; font-weight: 700; }

/* ---- FV ---- */
.fv {
  background:
    radial-gradient(circle at 8% 18%, rgba(240,124,30,.14) 0 46px, transparent 47px),
    radial-gradient(circle at 94% 78%, rgba(240,124,30,.14) 0 60px, transparent 61px),
    radial-gradient(circle at 88% 12%, rgba(240,124,30,.1) 0 30px, transparent 31px),
    var(--cream);
  padding: 84px 40px 96px;
  position: relative;
  overflow: hidden;
}
.fv__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}
.fv__text { flex: 1.15; }
.fv__title {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 22px;
}
.fv__title-em {
  color: var(--orange);
  font-size: 62px;
  text-decoration: underline wavy var(--orange) 4px;
  text-underline-offset: 10px;
}
.fv__sub { font-size: 25px; margin-bottom: 30px; }
.fv__sub mark { font-size: 27px; }
.fv__badges { display: flex; gap: 18px; margin-bottom: 36px; }
.fv__badge {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 18px 6px 18px 6px;
  padding: 12px 24px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  transform: rotate(-1deg);
}
.fv__badge + .fv__badge { transform: rotate(1deg); }
.fv__badge-label { font-size: 14px; font-weight: 800; }
.fv__badge-num { font-size: 32px; font-weight: 800; color: var(--orange); }
.fv__badge-num small { font-size: 15px; color: var(--ink); }
.fv__cta-lead { font-size: 17px; font-weight: 800; margin-bottom: 12px; }

.fv__visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.fv__callout {
  background: var(--white);
  border: 3px solid var(--orange);
  color: var(--orange-deep);
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
  padding: 16px 10px;
  border-radius: 50% 45% 50% 45%;
  min-width: 88px;
  transform: rotate(-5deg);
}
.fv__callout--2 { transform: rotate(5deg); align-self: flex-end; }

.phone {
  width: 260px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 30px;
  padding: 10px 10px 14px;
  box-shadow: 8px 8px 0 rgba(240,124,30,.25);
}
.phone__notch {
  width: 90px; height: 8px;
  background: #E8E0D2;
  border-radius: 4px;
  margin: 4px auto 8px;
}
.phone__screen {
  background: var(--orange-pale);
  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: 12px;
  max-width: 86%;
}
.chat--bot { background: var(--white); border: 1.5px solid #E4CBA6; align-self: flex-start; border-top-left-radius: 3px; }
.chat--user { background: var(--orange); color: var(--white); align-self: flex-end; border-top-right-radius: 3px; font-weight: 700; }
.chat__choices { display: flex; gap: 6px; margin-top: 6px; }
.chat__choices span {
  border: 1.5px solid var(--orange);
  color: var(--orange-deep);
  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(--white);
  border: 3px solid var(--ink);
  border-radius: 24px 10px 24px 10px;
  text-align: center;
  padding: 32px 20px 28px;
  position: relative;
  box-shadow: 6px 6px 0 var(--marker);
}
.about__title { font-size: 34px; font-weight: 800; margin-bottom: 8px; }
.about__title::first-letter { color: var(--orange); }
.about__sub { font-size: 18px; font-weight: 800; color: var(--orange-deep); }
.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(--cream);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 34px 36px;
}
.about__num {
  font-size: 42px;
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
  border-bottom: 4px dotted var(--orange);
  padding-bottom: 6px;
}
.about__item-text { flex: 1; }
.about__item-text h3 { font-size: 21px; font-weight: 800; margin-bottom: 10px; }
.about__item-text h3 em { font-style: normal; color: var(--orange-deep); background: linear-gradient(transparent 60%, var(--marker) 60%); }
.about__item-text p { font-size: 15px; }
.ph--about { width: 220px; height: 150px; flex-shrink: 0; }

/* ---- 導入事例 ---- */
.case { background: var(--orange-pale); }
.case__card {
  max-width: 880px;
  margin: 0 auto;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 24px;
  padding: 44px 48px;
  box-shadow: 8px 8px 0 rgba(240,124,30,.3);
}
.case__company { text-align: center; font-size: 22px; font-weight: 800; margin-bottom: 28px; }
.case__compare { display: flex; align-items: stretch; gap: 20px; justify-content: center; }
.case__col {
  flex: 1;
  border-radius: 18px;
  padding: 24px 28px;
  text-align: center;
}
.case__col--before { background: #F2EEE6; color: #6E675B; }
.case__col--after { background: var(--orange); color: var(--white); }
.case__col-head { font-weight: 800; 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: 800; }
.case__col--after dd strong { font-size: 30px; color: #FFE9A8; }
.case__arrow {
  width: 0; height: 0;
  align-self: center;
  border: 18px solid transparent;
  border-left: 26px solid var(--orange);
  border-right: 0;
}
.case__result {
  text-align: center;
  margin-top: 30px;
  font-size: 30px;
  font-weight: 800;
}
.case__result strong {
  color: var(--orange);
  font-size: 44px;
  text-decoration: underline wavy var(--orange) 3px;
  text-underline-offset: 8px;
}

/* ---- 悩み ---- */
.nayami { background: var(--white); }
.nayami__list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
.nayami__row { display: flex; align-items: center; justify-content: center; gap: 34px; }
.nayami__row--rev { flex-direction: row-reverse; }
.nayami__photo {
  width: 148px; height: 148px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--ink);
  background: var(--white);
}
.bubble {
  position: relative;
  flex: 1;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 32px;
  padding: 22px 40px;
  font-size: 17px;
  text-align: center;
}
.bubble strong { color: var(--red); font-size: 19px; }
.nayami__row .bubble { transform: rotate(-.4deg); }
.nayami__row--rev .bubble { transform: rotate(.4deg); }
/* 吹き出しのしっぽ（写真側へ向ける） */
.bubble::before, .bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  border-style: solid;
}
.nayami__row:not(.nayami__row--rev) .bubble::before {
  right: -18px; margin-top: -12px;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent var(--ink);
}
.nayami__row:not(.nayami__row--rev) .bubble::after {
  right: -13px; margin-top: -9px;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent var(--cream);
}
.nayami__row--rev .bubble::before {
  left: -18px; margin-top: -12px;
  border-width: 12px 18px 12px 0;
  border-color: transparent var(--ink) transparent transparent;
}
.nayami__row--rev .bubble::after {
  left: -13px; margin-top: -9px;
  border-width: 9px 14px 9px 0;
  border-color: transparent var(--cream) transparent transparent;
}

/* ---- 解決策 ---- */
.kaiketsu { background: var(--orange-pale); }
.kaiketsu__title em { font-size: 44px; }
.kaiketsu__list { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.kaiketsu__item {
  display: flex;
  align-items: center;
  gap: 48px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 24px;
  padding: 36px 40px;
}
.kaiketsu__item--rev { flex-direction: row-reverse; }
.kaiketsu__text { flex: 1.2; }
.kaiketsu__text h3 {
  font-size: 23px;
  font-weight: 800;
  margin-bottom: 14px;
  line-height: 1.5;
  background: linear-gradient(transparent 65%, var(--marker) 65%);
  display: inline;
}
.kaiketsu__text p { font-size: 15px; margin-top: 14px; }
.ph--kaiketsu { width: 300px; height: 195px; flex-shrink: 0; }

/* ---- なぜLINE ---- */
.whyline {
  background:
    radial-gradient(rgba(240,124,30,.12) 2px, transparent 2.5px),
    var(--cream);
  background-size: 30px 30px;
  text-align: center;
}
.whyline__tag {
  display: inline-block;
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
  border-radius: 999px;
  padding: 8px 30px;
  margin-bottom: 26px;
}
.whyline__title { font-size: 29px; font-weight: 800; 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: 2px solid var(--ink);
  border-radius: 20px;
  padding: 28px 30px 20px;
  flex: 1.2;
}
.whyline__chart-title {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  font-weight: 800;
  font-size: 15px;
  border-radius: 999px;
  padding: 6px 22px;
  margin-bottom: 22px;
}
.bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  height: 200px;
}
.bar {
  width: 44px;
  height: var(--h);
  background: #EBDDC8;
  border-radius: 8px 8px 0 0;
  position: relative;
}
.bar--main { background: var(--orange); }
.bar__num {
  position: absolute;
  top: -24px; left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 800;
}
.bar--main .bar__num { color: var(--orange-deep); 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: #999; }
.whyline__stats { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.stat {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 22px 26px;
}
.stat__label { font-size: 14px; font-weight: 800; color: #6E675B; margin-bottom: 4px; }
.stat__num { font-size: 20px; font-weight: 800; }
.stat__num strong { font-size: 46px; color: var(--orange); }
.whyline__note { font-size: 14px; text-align: left; }

/* ---- インタビュー ---- */
.interview { background: var(--white); }
.interview__lead { text-align: center; font-size: 18px; font-weight: 800; margin: -36px 0 48px; }
.interview__cards {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.interview__card {
  border: 2px solid var(--ink);
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 6px 6px 0 var(--orange-pale);
}
.ph--interview { height: 200px; border-radius: 0; border: none; border-bottom: 2px dashed #E0A96B; }
.interview__body { padding: 26px 28px 30px; }
.interview__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12px;
  color: #6E675B;
  margin-bottom: 12px;
}
.interview__title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 18px;
  line-height: 1.6;
  background: linear-gradient(transparent 65%, var(--marker) 65%);
  display: inline-block;
}
.interview__label {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 16px;
  margin-bottom: 8px;
}
.interview__label--before { background: #F2EEE6; color: #6E675B; }
.interview__label--after { background: var(--orange); color: var(--white); }
.interview__body ul { margin-bottom: 16px; }
.interview__body li {
  font-size: 14px;
  padding-left: 18px;
  position: relative;
}
.interview__body li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 8px;
  background: var(--orange);
  border-radius: 50%;
}

/* ---- サービス内容 ---- */
.service { background: var(--orange-pale); }
.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: 2px solid var(--ink);
  border-radius: 20px;
  padding: 34px 28px;
  text-align: center;
}
.service__card:nth-child(1) { transform: rotate(-.6deg); }
.service__card:nth-child(3) { transform: rotate(.6deg); }
.service__icon { width: 64px; margin: 0 auto 18px; color: var(--orange); }
.service__card h3 { font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.service__card p { font-size: 14px; text-align: left; }
.service__banner {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
}
.service__banner strong {
  color: var(--orange-deep);
  font-size: 32px;
  background: linear-gradient(transparent 60%, var(--marker) 60%);
}

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

/* ---- CTAバンド ---- */
.cta-band {
  background: var(--orange);
  text-align: center;
  color: var(--white);
  padding: 70px 40px;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.cta-band__lead { font-size: 26px; font-weight: 800; margin-bottom: 24px; }
.cta-band .btn--cta { background: var(--white); color: var(--orange-deep); }

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

/* ---- サポート体制 ---- */
.support { background: var(--white); }
.support__list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.support__item {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 18px;
  display: flex;
  gap: 26px;
  align-items: center;
  padding: 28px 36px;
}
.support__num {
  font-size: 38px;
  font-weight: 800;
  color: var(--orange);
  border-bottom: 4px dotted var(--orange);
}
.support__text h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.support__text p { font-size: 14px; }

/* ---- 媒体 ---- */
.media { background: var(--orange-pale); }
.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: 800;
  font-size: 16px;
  line-height: 1.4;
  border-bottom: 4px dotted var(--orange);
  padding-bottom: 10px;
  margin-bottom: 16px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ph--media { height: 300px; background-color: var(--white); }

/* ---- FAQ ---- */
.faq { background: var(--cream); }
.faq__list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.faq__item {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
}
.faq__q {
  font-weight: 800;
  font-size: 16px;
  padding: 18px 56px 18px 24px;
  position: relative;
  display: flex;
  gap: 12px;
}
.faq__q span { color: var(--orange); font-size: 18px; }
.faq__toggle {
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 20px;
  color: var(--orange);
}
.faq__a {
  background: var(--orange-pale);
  border-top: 2px dashed #E0A96B;
  padding: 18px 24px;
  display: flex;
  gap: 12px;
  font-size: 15px;
}
.faq__a span { color: var(--orange-deep); font-weight: 800; font-size: 18px; }

/* ---- お問い合わせ ---- */
.contact {
  background:
    radial-gradient(circle at 6% 12%, rgba(255,255,255,.16) 0 44px, transparent 45px),
    radial-gradient(circle at 94% 86%, rgba(255,255,255,.16) 0 56px, transparent 57px),
    var(--orange);
  color: var(--white);
  border-top: 3px solid var(--ink);
}
.contact__title { text-align: center; font-size: 30px; font-weight: 800; 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: 800; display: flex; flex-direction: column; gap: 6px; }
.contact__form input,
.contact__form textarea {
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
}
.contact__recaptcha {
  background: #F0F0F0;
  color: #666;
  font-size: 12px;
  border-radius: 6px;
  width: 200px;
  padding: 18px 14px;
  border: 1px solid #CCC;
}
.contact__form .btn { margin: 10px auto 0; background: var(--white); color: var(--orange-deep); }

/* ---- フッター ---- */
.footer { background: var(--ink); color: #D9D2C6; 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; }
.footer__logo img { height: 52px; width: auto; object-fit: contain; background: var(--white); border-radius: 12px; padding: 4px 12px; }
.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,.2);
  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: 25px; margin-bottom: 36px; }
  .sec-title::after { width: 90px; }

  .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: 8px 25px; 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: 34px; margin-bottom: 16px; }
  .fv__title-em { font-size: 42px; text-underline-offset: 7px; }
  .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: 12px 8px; }

  .about { padding-top: 64px; }
  .about__head { padding: 22px 16px 18px; }
  .about__title { font-size: 23px; }
  .about__sub { font-size: 13px; }
  .about__body { gap: 24px; }
  .about__item { flex-direction: column; padding: 24px 20px; gap: 14px; }
  .about__num { font-size: 32px; }
  .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(--orange);
    border-bottom: 0;
  }
  .case__result { font-size: 22px; margin-top: 22px; }
  .case__result strong { font-size: 32px; }

  .nayami__list { gap: 24px; }
  .nayami__row { gap: 14px; }
  .nayami__photo { width: 72px; height: 72px; }
  .bubble { padding: 14px 10px; font-size: 15px; flex: 1; text-align: left; }
  .bubble strong { font-size: 16px; }

  .kaiketsu__title { font-size: 25px; }
  .kaiketsu__title em { font-size: 30px; }
  .kaiketsu__list { gap: 24px; }
  .kaiketsu__item, .kaiketsu__item--rev { flex-direction: column; gap: 18px; padding: 24px 20px; }
  .kaiketsu__text h3 { font-size: 18px; }
  .ph--kaiketsu { width: 100%; height: 190px; }

  .whyline__title { font-size: 19px; }
  .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: 16px; }

  .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: 28px; }
  .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; }
  .fv__callout { min-width: 78px; font-size: 11px; }
}

/* ============ A案の修正をBトンマナで移植 (2026-07-04) ============ */

/* 全ボタンをピル型(既にピル) / PC・SP出し分け */
.pc { display: inline; }

/* FV: 3エリアの左右端揃え・イメージ高さ揃え */
.fv__sub { margin-bottom: 24px; }
.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__inner { align-items: stretch; }
.fv__visual { align-items: stretch; }
.ph--fv { width: 100%; max-width: 460px; height: auto; }

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

/* 導入事例: 写真/従来/導入後を1段・結果は下段センター */
.case__grid { display: flex; gap: 24px; align-items: center; margin-bottom: 8px; }
.ph--case { width: 240px; height: auto; align-self: stretch; min-height: 220px; flex-shrink: 0; }
.case__compare { 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向け吹き出し・右2ブロック高さ揃え・補足文直下センター */
.whyline__chart { text-align: left; }
.whyline__chart-title {
  display: block;
  width: fit-content;
  position: relative;
  margin: 0 0 34px 10px;
}
.whyline__chart-title::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 34px;
  border: 9px solid transparent;
  border-top: 12px solid var(--orange);
  border-bottom: 0;
}
.bars__note { text-align: center; }
.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 { text-align: center; margin-top: 30px; font-size: 16px; }

/* サービス内容: カード上部イメージ・バナー全文マーカー下線 */
.ph--service { width: 100%; height: 150px; margin-bottom: 18px; }
.service__banner-line {
  background: linear-gradient(transparent 60%, var(--marker) 60%);
  padding: 0 4px;
}
.service__banner strong { background: none; }

/* 流れ: 右向き矢印連結・◯型イメージ */
.flow__step { overflow: visible; }
.flow__head { border-radius: 15px 15px 0 0; }
.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(--orange);
  border-right: 0;
}
.ph--flow {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 14px;
}

/* サポート体制: 右にイメージ */
.ph--support { width: 190px; height: 120px; flex-shrink: 0; margin-left: auto; }

/* 配信先: 実画像 */
.media__img { width: 100%; display: block; border-radius: 14px; border: 2px solid var(--ink); }

/* 生成画像の共通スタイル(Bは手描き枠) */
.imgph {
  object-fit: cover;
  display: block;
  border: 2px solid var(--ink);
  border-radius: 16px;
}
img.ph--fv { border-radius: 22px; box-shadow: 6px 6px 0 rgba(240,124,30,.25); }
img.ph--interview { width: 100%; border-radius: 0; border: none; border-bottom: 2px dashed #E0A96B; }
img.ph--flow { border-radius: 50%; }

/* ---- SP調整(A案同期) ---- */
@media (max-width: 767px) {
  .pc { display: none; }
  .fv__badges { gap: 10px; }
  .fv__visual { width: 100%; }
  .ph--fv { width: 100%; max-width: 100%; height: 320px; }
  .case__grid { flex-direction: column; gap: 18px; margin-bottom: 14px; }
  .ph--case { width: 100%; height: 200px; align-self: auto; min-height: 0; }
  .case__result { font-size: 22px; }
  .case__result strong { font-size: 32px; }
  .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(--orange);
    border-bottom: 0;
  }
  .support__item { flex-wrap: wrap; }
  .ph--support { width: 100%; height: 110px; margin: 0; }
  .ph--flow { width: 84px; height: 84px; }
}
@media (max-width: 767px) {
  .fv__badge { padding: 8px 12px; }
  .fv__badge-num { font-size: 22px; white-space: nowrap; }
}

/* ============ ver.2 (2026-07-08 FB / A_ロゴ②_ver.2と同等のアクション実装) ============ */

/* LP全体を手書き風Webフォントに(実装=Google Fonts「Yusei Magic」) */
body, button, input, textarea {
  font-family: "Yusei Magic", "Klee One", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
}

/* FVシーケンス(テキスト・CTAがスッスッと出る) */
.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; }

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

/* スクロール連動リビール(スッスッスッ) */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* FAQ開閉 */
.faq__q { cursor: pointer; user-select: none; }
.faq__item .faq__a {
  display: flex;
  overflow: hidden;
  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; }

/* ボタン ホバーアニメーション(B案は手描きハンコ風の影) */
.btn--cta { transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; will-change: transform; }
.btn--cta:hover { transform: translate(-2px, -3px); box-shadow: 7px 8px 0 var(--ink); filter: brightness(1.04); }
.btn--cta:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.cta-band .btn--cta:hover, .cta-band .btn--cta:active { box-shadow: 7px 8px 0 rgba(0,0,0,.35); }

/* グラフ: 下からグーッと伸びる(少ない方から順に) */
.bars .bar { height: 0; transition: height .9s cubic-bezier(.22,.75,.25,1); }
.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; }

/* 静的表示(カンプ撮影・reduced-motion)ではアニメーション無効=完了状態 */
.static .fv-seq, .static .reveal, .static .header--seq { transition: none !important; }
.static .bars .bar { height: var(--h); transition: none; }
.static .bars .bar__num { opacity: 1; transition: none; }
.static .fv__logo-sp { opacity: 1; transform: none; transition: none; }

/* FV: 背景は#FFFBF5一色(指定)。動画開始前は無地 */
.fv { background: #FFFBF5; }
.fv__logo-sp { display: none; }

/* FV PC: 動画=ヒーロー中央contain(A_ロゴ②_ver.2と同じ構成)、テキスト位置は元B案のまま */
@media (min-width: 768px) {
  .fv { padding: 0; height: 740px; position: relative; overflow: hidden; }
  .fv__inner {
    position: static;
    height: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
  }
  .fv__visual {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    padding: 0 70px;
    z-index: 0;
    display: block;
  }
  .fv__movie {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: brightness(1.012); /* 動画素材の地色(#FDF7F3)を背景#FFFBF5に馴染ませる */
  }
  .fv__text {
    position: relative;
    z-index: 1;
    flex: 0 0 calc((100% - 60px) * 1.15 / 2.15);
  }
}

/* FV SP: 動画の代わりにlogo_sp.png(スッと出る) */
@media (max-width: 767px) {
  .fv__movie { display: none; }
  .fv__logo-sp {
    display: block;
    width: 82%;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .fv__logo-sp.in { opacity: 1; transform: none; }
}
/* SPロゴの白地は画像側で#FFFBF5に置換済み(mix-blend-modeはheadless描画が壊れるため不使用) */

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

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

/* ============ ver.3: SPヒーローも動画化 ============
   sp_video_b.mp4(縦)を全面に敷き、最終フレーム=ロゴ下部/上部空白。
   上部空白にタイトル〜CTAが前面レイヤーで乗る */
@media (max-width: 767px) {
  .fv {
    position: relative;
    background: #FFFBF5;
    display: block;
    padding: 40px 20px 0;
    min-height: calc(100vw * 16 / 9 + 70px); /* Bのロゴは高めに出るためテキストとの間隔を確保 */
    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.5 (2026-07-15 FB): SPヒーロー動画を「＼ まずはお気軽にご相談ください！ ／」直上へ ============
   ver.3の「縦動画を全面背景に敷きテキストを前面に重ねる」方式をやめ、
   動画を通常フローで料金バッジとCTAリードの間に配置。
   HTML側で .fv__movie-sp を .fv__visual から .fv__text 内(CTAリード直前)へ移動済み。PC版は変更なし */
@media (max-width: 767px) {
  .fv {
    min-height: 0;
    padding: 40px 20px 56px;
    overflow: visible;
  }
  .fv__visual { display: none; }
  .fv__movie-sp,
  img.fv__movie-sp {
    display: block;
    width: 100%;
    /* FB「動画上の余白を取りすぎ」: ロゴ実体=742〜1261行(posterから計測)。
       表示範囲704〜1280行(上パディング38px・下は動画フレーム末尾で頭打ち19px)
       = 元aspect-ratio:5/4。再生中との切替をアニメーションさせるためheightで指定 */
    height: calc((100vw - 40px) * 576 / 720);
    object-fit: cover;
    object-position: center 100%;
    clip-path: inset(1px 1.4% round 14px); /* 動画端の暗い縁を除去+角丸カード化 */
    margin: 0 0 18px;
    transition: height .7s ease, transform .7s ease;
  }
  /* FB「再生中は動画が切れる」: アニメーション可動域=551〜1263行(全フレーム計測)のため、
     再生中は513〜1280行(上パディング38px)を表示し、ロゴ定着(script.jsのrunSeq)で
     .settledが付いて上記のタイト表示へ滑らかに縮む。object-positionは両状態とも
     下端アンカー(100%)なのでheightの変化だけで切替できる。
     FB「再生中に動画下部のテキスト(ロゴ)が画面下に隠れる」: 再生中は動画を画面の
     縦中央へ移動して全体を見せる(ヒーローのテキストは定着まで透明なので重なりは映らない)。
     549px=フロー上の動画中心(上のテキストブロック371px+再生中高さ357px÷2)。
     min(…, 0px)で画面が縦に長い場合も自然位置より下へは動かさない。
     定着時はtransform:none+タイト高さへ同時トランジションで所定位置に収まる */
  video.fv__movie-sp:not(.settled) {
    height: calc((100vw - 40px) * 767 / 720);
    transform: translateY(min(calc(50vh - 549px), 0px));
  }

}

/* FB「インタビュー見出しのオレンジ下線が2行目にしか出ない」(PC/SP共通):
   inline-blockに1枚のグラデ背景だと折返し時に帯がボックス全体の下部にしか出ない。
   emタイル化(background-size:100% 1.6em)は実機で行ボックス高と合わずズレたため、
   内側spanのインライン背景で行ごとに描く方式に変更(帯は各行のテキスト幅に
   ぴったり付き、行末の「〜なりました。」で終わる) */
.interview__title {
  background: none;
}
.interview__title > span {
  background: linear-gradient(transparent 65%, var(--marker) 65%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ============ ver.6 (2026-07-16 FB) ============ */
/* とは？01〜03画像: 両サイド見切れ解消。元画像(1056x520)の縦横比のまま全体表示
   (従来の220x150 coverは左右約27%がクロップされていた。幅305pxだと見出しが
   PCで折り返すため、見出し1行を維持できる250pxに設定)。
   align-self:center=カード(.about__item)に対し上下中央配置(親はflex-start) */
img.ph--about { width: 250px; height: auto; align-self: center; }
@media (max-width: 767px) {
  img.ph--about { width: 100%; height: auto; }
}

/* ============ 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(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 12px 30px;
  font-size: 16px;
}
@media (max-width: 767px) {
  .cta-band__btns { flex-direction: column; gap: 14px; }
  .btn--kb-body { padding: 11px 24px; font-size: 14px; }
}

/* ============ LINE無料相談CTA追加 (2026-08-07) ============ */
/* ヘッダー: CTAを2つ横並びに。従来1つ分の幅に近づくよう各ボタンを縮小 */
.header__cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.btn--header { padding: 9px 12px; font-size: 11px; white-space: nowrap; }

/* LINEボタン: 緑(LINE緑の色相のまま、--orange #F07C1E と同じLab明度・彩度に調整。
   CTAバンドの白背景指定より後置で優先) */
.btn--cta.btn--line { background: #00B44B; color: var(--white); }

/* 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ボタンは白背景・緑文字(帯のオレンジに合わせた反転配色) */
.cta-band .btn--line { background: var(--white); color: #00B44B; }

/* 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と同じハンコ風ホバーアニメーション
   (基準の影3pxに合わせてホバー時の影は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: translate(-2px, -3px); box-shadow: 6px 7px 0 var(--ink); filter: brightness(1.04); }
.btn--kb-top:active, .btn--kb-body:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }

/* 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; }

@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%; }
}