@charset "UTF-8";

/* ---------- カラーパレット ---------- */
:root {
  --c-navy: #055176;
  --c-navy-d: #003954;
  --c-yellow: #ffe100;
  --c-blue: #369cd7;
  --c-bg: #e5f4fb;
  --c-bg-d: #dbecf6;
}

/* ============================================================
   企画脳レンタルサービス LP
   Figma「ブレスト貸し出しサービス」PC版 LP を忠実に再現
   ============================================================ */

/* ---------- リセット ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
img { display: block; border: 0; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { border: 0; background: none; cursor: pointer; font-family: inherit; }
input, textarea { font-family: inherit; }

html { scroll-behavior: smooth; }

/* 導入フローへのジャンプ時、CTAボタンの下（導入フロー見出し）あたりを上部に表示 */
#flow { scroll-margin-top: -170px; }

/* このサービスでできること：固定ナビバーに隠れないよう少し上に表示 */
#service { scroll-margin-top: 50px; }

/* ご活用プラン：固定ナビバーに隠れないよう若干下に表示 */
#plan { scroll-margin-top: 100px; }

body {
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  background: var(--c-bg-d);
  -webkit-font-smoothing: antialiased;
}

/* ---------- LP全体（1200px固定・絶対配置キャンバス） ---------- */
#lp {
  position: relative;
  width: 1200px;
  height: 11124px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--c-bg-d);
}

#lp section, #lp footer {
  position: absolute;
  left: 0;
  width: 1200px;
}

/* ============ 共通CTAボタン（黄色） ============ */
.bt {
  display: block;
  width: 426px;
  height: 80px;
  background: var(--c-yellow);
  border-radius: 180px;
  box-shadow: 0 6px 0 rgba(5, 81, 118, 0.5);
  transition: transform 0.15s;
}
.bt:hover { transform: translateY(2px); }
.bt__pill {
  position: absolute;
  left: 41px; top: 34px;
  width: 343px; height: 40px;
  background: #fff;
  border-radius: 70px;
}
.bt__sub {
  position: absolute;
  left: 44px; top: 4px;
  width: 333px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-navy-d);
  z-index: 1;
}
.bt__main {
  position: absolute;
  left: 26px; top: 36px;
  width: 384px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #2a86bb;
  line-height: 1;
  z-index: 1;
}
.bt__main b { font-size: 20px; font-weight: 700; color: var(--c-navy-d); }
.bt__num { font-size: 35px; letter-spacing: -4.2px; }
.bt__hour { font-size: 30px; letter-spacing: 1.5px; }
.bt__rental { font-size: 30px; }
.bt__arrow {
  position: absolute;
  left: 397px; top: 33px;
  width: 18px; height: 16px;
  transform: rotate(90deg);
  z-index: 1;
}

/* ============ HERO ============ */
.hero { top: 0; height: 777px; }

.hero__bg img { width: 1200px; height: 777px; }
.hero__bg { position: absolute; inset: 0; }

.hero__grad {
  position: absolute;
  left: 0; top: 0;
  width: 728px; height: 777px;
  background: linear-gradient(to left, rgba(229, 244, 251, 0), rgba(229, 244, 251, 0.54));
}
.hero__blur {
  position: absolute;
  left: 0; top: 463px;
  width: 681px; height: 152px;
  background: rgba(255, 255, 255, 0.81);
  filter: blur(22px);
}

/* ヘッダー（ロゴはヒーロー内に絶対配置のまま） */
.header__logo {
  position: absolute;
  left: 29px; top: 23px;
}
.header__logo img { width: 81px; height: 71px; }

/* ---------- 追従ナビバー（スクロール固定） ---------- */
.navbar {
  position: absolute;   /* 追従(フロート)せずFV上部に置く */
  left: 0; top: 0;
  width: 100%;
  z-index: 100;
  pointer-events: none;            /* バー外（左側の余白）はクリックを透過 */
}
.navbar__inner {
  position: relative;
  width: 1200px;
  height: 74px;
  margin: 0 auto;                  /* 1200px固定キャンバスに合わせて中央寄せ */
}
.navbar__pill {
  position: absolute;
  left: 375px; top: 22px;
  width: 826px; height: 52px;
  background: #fff;
  border-radius: 50px 0 0 70px;
  box-shadow: 0 2px 8px rgba(5, 81, 118, 0.15);
  pointer-events: auto;
}
.navbar__nav {
  position: absolute;
  left: 394px; top: 36px;
  display: flex;
  gap: 24px;
  pointer-events: auto;
}
.navbar__nav a {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 28px;
  white-space: nowrap;
}
.navbar__nav a:hover { opacity: 0.7; }

/* キャッチ */
.hero__band {
  position: absolute;
  left: 86px; top: 162px;
  width: 337px; height: 34px;
  background: var(--c-navy);
}
.hero__band span {
  position: absolute;
  left: 29px; top: 2px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.hero__title {
  position: absolute;
  left: 86px; top: 202px;
  width: 434px; height: 68px;
  background: #fff;
}
.hero__title-txt {
  position: absolute;
  left: 26px; top: 12px;
  font-size: 35px;
  font-weight: 900;
  color: #298fcb;
  white-space: nowrap;
}
.hero__title-dots {
  position: absolute;
  left: 39px; top: 10px;
  width: 80px; height: 8px;
}
.hero__glow {
  position: absolute;
  left: 0; top: 354px;
  width: 744px; height: 103px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__glow div {
  width: 742px; height: 51px;
  background: rgba(42, 134, 187, 0.3);
  filter: blur(32.5px);
  transform: rotate(-4deg);
}
.hero__catch {
  position: absolute;
  left: 66px; top: 311px;
  width: 764px; height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__catch img {
  width: 762px; 
  transform: rotate(-2deg);
}
.hero__catch-sub {
  position: absolute;
  left: 290px; top: 389px;
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 4px 10px #005e94;
  white-space: nowrap;
  margin-top: 20px;
}
.hero__lead {
  position: absolute;
  left: 97px; top: 489px;
  font-size: 18px;
  font-weight: 500;
  color: var(--c-navy);
  line-height: 27px;
  white-space: nowrap;
}
.hero__bt { position: absolute; left: 134px; top: 649px; }
.hero__badge { position: absolute; width: 160px; height: 187px; }
.hero__badge--1 { left: 745px; top: 547px; }
.hero__badge--2 { left: 924px; top: 547px; }

/* ============ 企画の壁 ============ */
.problems {
  top: 777px; height: 982px;
  background: var(--c-bg);
}
.problems__dots {
  position: absolute;
  left: 345px; top: 77px;
  width: 145px; height: 8px;
  z-index: 1;
}
.problems__bar {
  position: absolute;
  left: 177px; top: 131px;
  width: 845px; height: 14px;
  background: var(--c-yellow);
}
.problems__title {
  position: absolute;
  left: 189px; top: 78px;
  width: 818px;
  text-align: center;
  font-size: 36px;
  font-weight: 900;
  color: var(--c-navy-d);
  line-height: 1.512;
  white-space: nowrap;
  z-index: 1;
}
.problems__title span { font-size: 46px; }
.problems__card { position: absolute; height: 320px; width: auto; }
.problems__card--1 { left: 100px; top: 185px; }
.problems__card--2 { left: 640px; top: 185px; }
.problems__card--3 { left: 100px; top: 560px; }
.problems__card--4 { left: 640px; top: 560px; }

/* ============ 解決提案 ============ */
.solution { top: 1759px; height: 936px; background: var(--c-bg); }

.solution__wave {
  position: absolute;
  left: 0; top: -16px;
  width: 1200px; height: 952px;
}
.solution__curl {
  position: absolute;
  left: 522px; top: -18px;
  width: 157px; height: 50px;
}
.solution__exclaim {
  position: absolute;
  left: 239px; top: 38px;
  width: 112px; height: 179px;
}
.solution__title {
  position: absolute;
  left: 291px; top: 89px;
  width: 618px;
  text-align: center;
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  line-height: 1.5;
  white-space: nowrap;
}
.solution__title span { font-size: 42px; color: var(--c-yellow); }

.solution__panel {
  position: absolute;
  left: 42px; top: 236px;
  width: 693px; height: 428px;
  background: rgba(218, 238, 255, 0.13);
}
.solution__photo {
  position: absolute;
  left: 645px; top: 258px;
  width: 517px; height: 422px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 10px 10px 0 rgba(5, 81, 118, 0.5);
}
.solution__band {
  position: absolute;
  left: 61px; top: 286px;
  width: 624px; height: 60px;
  background: #fff;
}
.solution__hl {
  position: absolute;
  left: 257px; top: 312px;
  width: 128px; height: 12px;
  background: var(--c-yellow);
}
.solution__h3 {
  position: absolute;
  left: 94px; top: 294px;
  width: 603px;
  font-size: 30px;
  font-weight: 700;
  color: var(--c-navy-d);
}
.solution__sub {
  position: absolute;
  left: 83px; top: 377px;
  width: 562px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}
.solution__body {
  position: absolute;
  left: 96px; top: 423px;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  line-height: 29px;
}
.solution__bt { position: absolute; left: 387px; top: 731px; }

/* ============ このサービスでできること ============ */
.services {
  top: 2695px; height: 834px;
  background: var(--c-bg);
}
.services__title {
  position: absolute;
  left: 382px; top: 57px;
  width: 432px;
  text-align: center;
  font-size: 36px;
  font-weight: 900;
  color: var(--c-navy-d);
  white-space: nowrap;
}
.services__row {
  position: absolute;
  left: 0;
  width: 100%; height: 143px;
}
.services__flag {
  position: absolute;
  left: 161px; top: 4px;
  width: 121px; height: 143px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.services__flag img {
  width: 102px; height: 128px;
  transform: rotate(-9deg);
}
.services__num {
  position: absolute;
  left: 185px; top: 33px;
  font-family: "Roboto Mono", monospace;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-yellow);
  text-align: center;
  z-index: 3;
}
.services__bar {
  position: absolute;
  left: 186px; top: 24px;
  width: 830px; height: 62px;
  background: #f5f5f5;
  box-shadow: 0 2px 0 rgba(71, 164, 213, 0.2);
}
.services__hl {
  position: absolute;
  top: 53px;
  height: 11px;
  background: var(--c-yellow);
  z-index: 1;
}
.services__h3 {
  position: absolute;
  left: 286px; top: 34px;
  font-size: 30px;
  font-weight: 700;
  color: var(--c-navy-d);
  letter-spacing: 3px;
  white-space: nowrap;
  z-index: 2;
}
.services__desc {
  position: absolute;
  left: 287px; top: 96px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-navy);
  white-space: nowrap;
}

/* ============ ３つのご活用プラン ============ */
.plans {
  top: 3529px; height: 691px;
  background: var(--c-bg);
}
.plans__bg {
  position: absolute;
  left: 0; top: 0;
  width: 1155px; height: 691px;
  background: var(--c-blue);
  border-radius: 0 40px 40px 0;
}
.plans__band {
  position: absolute;
  left: 59px; top: 200px;
  width: 1141px; height: 313px;
  background: #fff;
  border-radius: 40px 0 0 40px;
}
.plans__title {
  position: absolute;
  left: 93px; top: 68px;
  font-size: 36px;
  font-weight: 900;
  color: var(--c-yellow);
  white-space: nowrap;
}
.plans__sub {
  position: absolute;
  left: 84px; top: 141px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.plan-card {
  position: absolute;
  top: 198px;
  width: 351px; height: 284px;
}
.plan-card__bg {
  position: absolute;
  left: 44px; top: 32px;
  width: 306px; height: 251px;
  background: #e0f4ff;
  border-radius: 10px;
  box-shadow: 2px 2px 0 rgba(39, 142, 201, 0.2);
}
.plan-card__tag {
  position: absolute;
  left: 99px; top: 56px;
  height: 42px;
  background: #fff;
}
.plan-card__tag--2 { top: 103px; }
.plan-card__badge {
  position: absolute;
  left: 0; top: 0;
  width: 115px; height: 113px;
}
.plan-card__badge img {
  position: absolute;
  left: 10px; top: 11px;
  width: 94px; height: 91px;
  transform: rotate(15deg);
}
.plan-card__plan {
  position: absolute;
  left: 33px; top: 25px;
  font-size: 18px;
  font-weight: 900;
  color: var(--c-navy);
}
.plan-card__no {
  position: absolute;
  left: 40px; top: 42px;
  font-size: 33px;
  font-weight: 900;
  color: var(--c-navy);
  line-height: 1;
}
.plan-card__h3 {
  position: absolute;
  left: 112px; top: 55px;
  width: 197px;
  font-size: 30px;
  font-weight: 900;
  color: var(--c-navy-d);
  line-height: 45px;
}
.plan-card__line {
  position: absolute;
  left: 58px; top: 162px;
  width: 276px; height: 2px;
}
.plan-card__desc {
  position: absolute;
  left: 79px; top: 171px;
  width: 240px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 32px;
}
.plans__bt { position: absolute; left: 387px; top: 560px; }

/* ============ なぜ謎解きイベントの会社が？ ============ */
.why {
  top: 4220px; height: 591px;
  background: var(--c-bg);
  overflow: hidden;
}
.why__bg {
  position: absolute;
  left: 0; top: -225px;
  width: 1200px; height: 816px;
}
.why__hl {
  position: absolute;
  left: 172px; top: 121px;
  width: 368px; height: 17px;
  background: var(--c-yellow);
}
.why__title {
  position: absolute;
  left: 91px; top: 91px;
  font-size: 36px;
  font-weight: 900;
  color: var(--c-navy-d);
  line-height: 1.45;
  white-space: nowrap;
}
.why__title span { font-size: 46px; }
.why__body, .why__body2 {
  position: absolute;
  left: 95px;
  font-size: 25px;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 50px;
}
.why__body p, .why__body2 p { white-space: pre; }
.why__body { top: 259px; }
.why__body2 { top: 361px; }
.why__box {
  position: absolute;
  left: 265px; top: 314px;
  width: 138px; height: 38px;
  background: #fff;
}
.why__hand {
  position: absolute;
  left: 262px; top: 308px;
  width: 141px; height: 50px;
}
.why__badge {
  position: absolute;
  width: 202px; height: 237px;
}
.why__badge--1 { left: 678px; top: 216px; }
.why__badge--2 { left: 905px; top: 216px; }

/* ============ 掲載メディア実績 ============ */
.media {
  top: 6017px; height: 670px;
  z-index: 0;
}
.media__bg {
  position: absolute;
  left: 0; top: 0;
  width: 1200px; height: 670px;
}
.media__title {
  position: absolute;
  left: 408px; top: 234px;
  width: 382px;
  text-align: center;
  font-size: 30px;
  font-weight: 900;
  color: #fff;
}
.media__box {
  position: absolute;
  left: 95px; top: 301px;
  width: 1010px; height: 268px;
}
.media__banner {
  position: absolute;
  left: 269px; top: 335px;
  width: 660px; height: 198px;
}

/* ============ イベント実績 ============ */
.events {
  top: 4811px; height: 1321px;
  z-index: 1;
}
.events__bg {
  position: absolute;
  left: 0; top: 0;
  width: 1200px; height: 1321px;
}
.events__title {
  position: absolute;
  left: 153px; top: 90px;
  width: 862px;
  text-align: center;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
}
.event-card {
  position: absolute;
  width: 313px; height: 520px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 2px 2px 0 rgba(5, 81, 118, 0.5);
}
.event-card__img {
  position: absolute;
  left: 20px; top: 20px;
  width: 272px; height: 389px;
  border-radius: 15px;
  object-fit: cover;
}
.event-card__txt {
  position: absolute;
  font-size: 17px;
  font-weight: 500;
  color: var(--c-navy);
  line-height: 1.45;
}
.event-card__num {
  position: absolute;
  font-family: "Roboto Mono", monospace;
  font-size: 76px;
  font-weight: 700;
  color: var(--c-yellow);
  line-height: 93px;
  text-shadow: 4px 4px 0 var(--c-blue);
  z-index: 2;
}

/* ============ 活用イメージ ============ */
.usage { top: 6687px; height: 595px; }

.usage__scoop {
  position: absolute;
  left: 0; top: 0;
  width: 108px; height: 108px;
  background: #7cc7f4;
}
.usage__scoop div {
  width: 108px; height: 108px;
  background: var(--c-bg-d);
  border-radius: 90px 0 0 0;
}
.usage__scoop2 {
  position: absolute;
  left: 0; top: 487px;
  width: 108px; height: 108px;
  background: var(--c-blue);
}
.usage__scoop2 div {
  width: 108px; height: 108px;
  background: var(--c-bg-d);
  border-radius: 0 0 0 90px;
}
.usage__title {
  position: absolute;
  left: 95px; top: 94px;
  font-size: 36px;
  font-weight: 900;
  color: var(--c-navy-d);
  white-space: nowrap;
}
.usage__photo {
  position: absolute;
  left: 375px; top: 98px;
  width: 825px; height: 417px;
  border-radius: 40px 0 0 40px;
  object-fit: cover;
}
.usage__panel {
  position: absolute;
  left: 85px; top: 169px;
  width: 696px; height: 290px;
  background: #eef8fd;
}
.usage__list {
  position: absolute;
  left: 130px; top: 197px;
  width: 640px;
  font-size: 20px;
  font-weight: 500;
  color: var(--c-navy);
  line-height: 34px;
}
.usage__etc {
  position: absolute;
  left: 703px; top: 408px;
  font-size: 17px;
  font-weight: 500;
  color: var(--c-navy);
  line-height: 42px;
}

/* ============ 導入フロー（青波エリア） ============ */
.flowwave { top: 7282px; height: 1010px; }

.flowwave__bg {
  position: absolute;
  left: 0; top: 0;
  width: 1200px; height: 1010px;
}
.flowwave__pill {
  position: absolute;
  left: 167px; top: -37px;
  width: 866px; height: 79px;
  background: #fff;
  border-radius: 20px;
}
.flowwave__hl {
  position: absolute;
  left: 262px; top: 2px;
  width: 160px; height: 8px;
  background: var(--c-yellow);
}
.flowwave__callout {
  position: absolute;
  left: 261px; top: -18px;
  width: 689px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  color: var(--c-navy);
  letter-spacing: 1.5px;
  line-height: 1;
  white-space: nowrap;
}
.flowwave__callout b { font-weight: 900; }
.flowwave__callout .s27 { font-size: 27px; }
.flowwave__callout .s28 { font-size: 28px; letter-spacing: 0.56px; }
.flowwave__callout .bang { letter-spacing: -10.5px; }
.flowwave__slash {
  position: absolute;
  top: 4px;
  width: 49px; height: 3px;
}
.flowwave__slash--l { left: 222px; transform: rotate(61.86deg); }
.flowwave__slash--r { left: 957px; transform: rotate(-61.86deg); }
.flowwave__curl {
  position: absolute;
  left: 522px; top: 41px;
  width: 157px; height: 50px;
}
.flowwave__bt { position: absolute; left: 387px; top: 105px; }

.flowwave__panel {
  position: absolute;
  left: 0; top: 256px;
  width: 1142px; height: 464px;
}
.flow__title {
  position: absolute;
  left: 95px; top: 289px;
  font-size: 36px;
  font-weight: 900;
  color: var(--c-navy-d);
  white-space: nowrap;
}
.step-card {
  position: absolute;
  top: 416px;
  width: 298px; height: 251px;
  background: #d7eefb;
  border-radius: 10px;
  box-shadow: 2px 2px 0 rgba(39, 142, 201, 0.2);
}
.step-card__tag {
  position: absolute;
  top: 48px;
  height: 42px;
  background: #fff;
}
.step-card__h3 {
  position: absolute;
  top: 47px;
  font-size: 30px;
  font-weight: 900;
  color: var(--c-navy-d);
  line-height: 45px;
  white-space: nowrap;
}
.step-card__line {
  position: absolute;
  top: 130px;
  width: 276px; height: 2px;
}
.step-card__desc {
  position: absolute;
  top: 155px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 35px;
}
.step-card__desc .s17 { font-size: 17px; letter-spacing: -0.5px; }
.step-badge {
  position: absolute;
  top: 351px;
  width: 115px; height: 113px;
}
.step-badge img {
  position: absolute;
  left: 10px; top: 11px;
  width: 94px; height: 91px;
  transform: rotate(15deg);
}
.step-badge__step {
  position: absolute;
  left: 34px; top: 25px;
  font-size: 18px;
  font-weight: 900;
  color: var(--c-navy);
}
.step-badge__no {
  position: absolute;
  left: 40px; top: 42px;
  font-size: 33px;
  font-weight: 900;
  color: var(--c-navy);
  line-height: 1;
}
.flow__arrow {
  position: absolute;
  top: 528px;
  width: 30px; height: 27px;
  transform: rotate(90deg);
}
.flowwave__order {
  position: absolute;
  left: 309px; top: 751px;
  width: 582px;
  text-align: center;
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  line-height: 1.6;
  white-space: nowrap;
}
.flowwave__order span { font-size: 42px; color: var(--c-yellow); }

/* ============ FAQ ============ */
.faq { top: 8292px; height: 1007px; }

.faq__title {
  position: absolute;
  left: 75px; top: 19px;
  font-size: 40px;
  font-weight: 900;
  color: var(--c-navy-d);
}
.faq__item {
  position: absolute;
  left: 0;
  width: 100%; height: 158px;
}
.faq__bar {
  position: absolute;
  left: 93px; top: 6px;
  width: 1006px; height: 62px;
  background: #f5f5f5;
  box-shadow: 0 2px 0 rgba(71, 164, 213, 0.2);
}
.faq__q, .faq__a {
  position: absolute;
  font-family: "Inter", sans-serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 58px;
  z-index: 1;
  margin-top: 10px;
}
.faq__q { left: 103px; top: 0; color: var(--c-blue); }
.faq__a { left: 105px; top: 82px; color: var(--c-navy-d); }
.faq__question {
  position: absolute;
  left: 183px; top: 19px;
  font-size: 25px;
  font-weight: 700;
  color: var(--c-navy-d);
  white-space: nowrap;
  z-index: 1;
}
.faq__answer {
  position: absolute;
  left: 182px; top: 88px;
  font-size: 21px;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 35px;
}

/* ============ CTA＋お問い合わせ ============ */
.contact {
  top: 9299px; height: 1558px;
  background: var(--c-blue);
  border-radius: 90px 90px 0 0;
}
.contact__cta {
  position: absolute;
  left: 115px; top: 64px;
  width: 970px;
  text-align: center;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
}
.contact__cta .l1 { font-size: 36px; line-height: 60px; }
.contact__cta .l2 { font-size: 36px; line-height: 71px; }
.contact__cta .l3 { font-size: 36px; line-height: 70px; }
.contact__cta .y46 { font-size: 46px; color: var(--c-yellow); }
.contact__cta .y30 { font-size: 56px; color: var(--c-yellow); letter-spacing: -0.1em; }

.contact__box {
  position: absolute;
  left: 115px; top: 365px;
  width: 972px; height: 1136px;
}
.contact__title {
  position: absolute;
  left: 169px; top: 411px;
  width: 862px;
  text-align: center;
  font-size: 36px;
  font-weight: 900;
  color: var(--c-navy);
}
.contact__sub {
  position: absolute;
  left: 374px; top: 497px;
  width: 450px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 27px;
}
.contact__form {
  position: absolute;
  left: 186px; top: 593px;
  width: 828px; height: 843px;
  background: rgba(229, 244, 251, 0.5);
  border-radius: 15px;
}

/* ---- MW WP Form 出力用（本番フォーム装飾。元デザインの見た目を踏襲し自然配置） ---- */
/* MW WP Form は .contact__form 内に form__row を縦並びで出力する */
.contact__form .mw_wp_form { padding: 30px 113px; }
.contact__form form { width: 100%; }

/* 完了画面メッセージ（送信後の「お問い合わせいただきありがとうございます…」）。
   完了画面でのみ付く .mw_wp_form_complete に限定し、入力画面のラベル等には影響させない。
   PC枠/SP枠どちらに出ても効くよう両方を指定。 */
.contact__form .mw_wp_form_complete,
.sp-contact__form .mw_wp_form_complete {
  font-size: 20px;
  line-height: 1.95;
}

/* 各行 */
.contact__form .form__row { margin-bottom: 22px; }
.contact__form .form__row:last-of-type { margin-bottom: 0; }

/* ラベル行（項目名＋必須バッジ） */
.contact__form .form__head {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.contact__form .form__head__main {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 27px;
}
/* 赤い「必須」バッジ */
.contact__form .form__head__must {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  width: 47px; height: 19px;
  border: 1px solid #d66464;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  color: #d66464;
  line-height: 1;
}

/* テキスト入力（会社名・お名前・メール・電話） */
.contact__form .input {
  display: block;
  width: 100%;
  height: 51px;
  background: #fff;
  border: 1px solid var(--c-navy);
  border-radius: 5px;
  font-size: 18px;
  color: var(--c-navy);
  padding: 0 14px;
  box-sizing: border-box;
  outline: none;
}
.contact__form .input::placeholder { color: #b9c4cb; }

/* お問い合わせ内容（textarea） */
.contact__form .input--textarea {
  height: 167px;
  padding: 12px 14px;
  resize: none;
  line-height: 1.6;
}

/* ご用件（セレクトボックス） */
.contact__form .selectbox {
  display: block;
  width: 100%;
  height: 51px;
  background: #fff;
  border: 1px solid var(--c-navy);
  border-radius: 5px;
  font-size: 18px;
  color: var(--c-navy);
  padding: 0 38px 0 14px;
  box-sizing: border-box;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* ▼アイコン（インラインSVG） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M6 8L0 0h12z' fill='%23055176'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.contact__form .selectbox::-ms-expand { display: none; }

/* エラー表示 */
.contact__form .form__row { position: relative; }
.contact__form .error { position: absolute; left: 2px; bottom: -20px; margin: 0; color: #d66464; font-size: 13px; line-height: 1; display: block; white-space: nowrap; }
.contact__form .is-error .input,
.contact__form .is-error .selectbox { border-color: #d66464; background: #fae8e4; }

/* 送信ボタン（MW WP Form は <button> の中に textarea[name=mwform_button-*] を出力する） */
.contact__form .mw_wp_form button[type="submit"],
.contact__form button {
  display: block; margin: 36px auto 0;
  width: 426px; height: 82px; padding: 0;
  background: url("../../img/add/kikaku-brain/sp/bt.png") no-repeat center / 100% 100%;
  border: 0; box-shadow: none; border-radius: 0; cursor: pointer;
  position: relative; font-size: 0; color: transparent;
}
.contact__form button:hover { transform: translateY(2px); }
/* ボタン内の textarea を「送信する」ラベルとして整形 */
.contact__form button textarea,
.contact__form .input-btn { width: 100%; height: 100%; background: transparent; border: 0; resize: none; overflow: hidden; font-size: 0; color: transparent; cursor: pointer; }


/* --- MW WP Form 実出力の取りこぼし補強（クラス無し要素・input型submit対応） --- */
.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"] {
  display: block; width: 100%; height: 51px;
  background: #fff; border: 1px solid var(--c-navy); border-radius: 5px;
  font-size: 18px; color: var(--c-navy); padding: 0 14px; box-sizing: border-box; outline: none;
}
.contact__form select {
  display: block; width: 100%; height: 51px;
  background: #fff; border: 1px solid var(--c-navy); border-radius: 5px;
  font-size: 18px; color: var(--c-navy); padding: 0 38px 0 14px; box-sizing: border-box;
  outline: none; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 49%, var(--c-navy) 50%), linear-gradient(135deg, var(--c-navy) 50%, transparent 51%);
  background-position: calc(100% - 22px) 50%, calc(100% - 14px) 50%;
  background-size: 8px 8px, 8px 8px; background-repeat: no-repeat;
}
.contact__form textarea {
  display: block; width: 100%; height: 167px;
  background: #fff; border: 1px solid var(--c-navy); border-radius: 5px;
  font-size: 18px; color: var(--c-navy); padding: 12px 14px; box-sizing: border-box;
  outline: none; resize: none; line-height: 1.6;
}
.contact__form textarea::placeholder { color: #b9c4cb; }
.contact__form input[type="submit"] {
  display: block; margin: 36px auto 0;
  width: 426px; height: 82px; padding: 0;
  background: url("../../img/add/kikaku-brain/sp/bt.png") no-repeat center / 100% 100%;
  border: 0; box-shadow: none; border-radius: 0; cursor: pointer;
  font-size: 0; color: transparent;
}
.contact__form input[type="submit"]:hover { transform: translateY(2px); }

/* ============ フッター ============ */
.footer {
  top: 10857px; height: 267px;
  background: #fff;
}
.footer__logo { position: absolute; }
.footer__logo--1 { left: 848px; top: 82px; width: 120px; height: 105px; }
.footer__logo--2 { left: 998px; top: 81px; width: 154px; height: 108px; }
.footer__copy {
  position: absolute;
  left: 829px; top: 214px;
  font-size: 15px;
  font-weight: 500;
  color: #000;
}

/* ============================================================
   SP（スマホ）版　※画面幅 1024px 以下で表示
   Figma 375pxアートボードを忠実複製（絶対配置）→ 画面幅にscaleで拡大
   - PC版(#lp / .navbar)はそのまま隠す
   - .sp-wrap：viewport幅・高さ算出・はみ出し隠す
   - .sp-lp：375px固定キャンバス。transform:scaleで画面幅にフィット
   - 全要素はFigmaのlocal座標(left/top/width)をpxそのまま転記
   ============================================================ */

/* PC幅ではSP非表示（既定） */
.sp-wrap { display: none; }

@media (max-width: 1024px) {

  /* PC版を隠す（DOMはそのまま） */
  #lp, .navbar { display: none !important; }

  body { background: #dbecf6; overflow-x: hidden; }

  /* === スケール機構（750px基準で画面幅にフィット） ===
     ・.sp-lp（750px枠）を画面幅へ scale(100vw/750)
     ・中の .sp-canvas は元の375pxキャンバスを scale(2) で750pxに引き伸ばす
     → 375座標を一切触らず「750px基準」の密度（要素が小さく間延びしない）を実現。
       squaremazeの viewport width=750 と同じ見た目になる。 */
  .sp-wrap {
    display: block;
    width: 100%;
    /* 高さ = 750枠の実高(13921*2) * 倍率(100vw/750) = 13921*2/750*100vw */
    height: calc(28680px * (100vw / 750px));
    overflow: hidden;
    background: #dbecf6;
  }
  .sp-lp {
    position: relative;
    width: 750px;
    height: 28680px;
    transform-origin: top left;
    transform: scale(calc(100vw / 750px));
    background: #dbecf6;
    font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    color: #055176;
    overflow: hidden;
  }
  /* 元の375pxキャンバス（全要素はこの中・375座標のまま）を2倍に */
  .sp-canvas {
    position: absolute;
    left: 0; top: 0;
    width: 375px;
    height: 14340px;
    transform-origin: top left;
    transform: scale(2);
  }

  .sp-lp * { box-sizing: border-box; }
  .sp-lp .e { position: absolute; }          /* 全配置要素の基底 */
  /* 配置ボックス直下のimgは枠いっぱい（cover） */
  .sp-lp img.e,
  .sp-lp .e > img,
  .sp-lp .sp-ev__img > img,
  .sp-lp .sp-solution__photo > img,
  .sp-lp .sp-pr__img > img,
  .sp-lp .sp-svc__flag > img {
    display: block; width: 100%; height: 100%; object-fit: cover;
  }
  /* イラスト・ロゴ・旗・バッジは contain */
  .sp-lp .sp-pr__img > img,
  .sp-lp .sp-svc__flag > img,
  .sp-lp .sp-header__logo > img,
  .sp-lp .sp-hero__badge1 > img,
  .sp-lp .sp-hero__badge2 > img,
  .sp-lp .sp-why__m1 > img,
  .sp-lp .sp-why__m2 > img {
    object-fit: contain;
  }

  /* ---- 共通テキスト基底 ---- */
  .sp-lp .t { position: absolute; line-height: 1.5; white-space: pre-line; }

  /* =========================================================
     共通：黄CTAボタン bt（302×55）
     ========================================================= */
  .sp-bt { position: absolute; width: 302px; height: 55px; left: 37px; }
  .sp-bt__pill {
    position: absolute; inset: 0;
    background: #ffe100; border-radius: 180px;
    box-shadow: 0 4px 0 rgba(5,81,118,.5);
  }
  .sp-bt__wpill {
    position: absolute; left: 19px; top: 21px;
    width: 262px; height: 30px; background: #fff; border-radius: 70px;
  }
  .sp-bt__sub {
    position: absolute; left: 28px; width: 255px;
    text-align: center; font-size: 16px; font-weight: 700; color: #003954;
  }
  .sp-bt__main {
    position: absolute; left: 12px; top: 22px; width: 281px;
    text-align: center; color: #2a86bb; font-weight: 900; line-height: 1;
  }
  .sp-bt__main b { font-size: 15px; color: #003954; font-weight: 700; }
  .sp-bt__main .n { font-size: 28px; letter-spacing: -3px; }
  .sp-bt__main .u { font-size: 22px; }
  .sp-bt__arrow {
    position: absolute; left: 286px; top: 20px;
    width: 0; height: 0;
    border-left: 11px solid #003954;
    border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  }

  /* =========================================================
     ① HERO（0→600）
     ========================================================= */
  .sp-hero__bg { left: 0; top: 0; width: 375px; height: 600px; }
  .sp-hero__bg img { object-position: 70% center; }
  .sp-hero__grad {            /* 左→右 水色 */
    left: 0; top: 0; width: 375px; height: 600px;
    background: linear-gradient(90deg, rgba(229,244,251,.54), rgba(229,244,251,0));
  }
  .sp-hero__grad2 {           /* 上部 下→上 */
    left: 0; top: 0; width: 375px; height: 205px;
    background: linear-gradient(0deg, rgba(229,244,251,0) 4%, rgba(119,194,230,.54) 74%);
  }
  .sp-hero__blur {            /* 左上 白ぼかし */
    left: 3px; top: 30px; width: 240px; height: 195px;
    background: rgba(255,255,255,.51); filter: blur(22px);
  }
  /* ヘッダー */
  .sp-header__logo { left: 13px; top: 14px; width: 68px; height: 59px; }
  .sp-header__menu {
    left: 324px; top: 23px; width: 36px; height: 23px;
    background: none; border: 0; padding: 0;
  }
  .sp-header__menu span {
    position: absolute; left: 0; width: 36px; height: 3px;
    background: #fff; border-radius: 2px; box-shadow: 0 1px 2px rgba(5,81,118,.3);
  }
  .sp-header__menu span:nth-child(1){ top: 0; }
  .sp-header__menu span:nth-child(2){ top: 10px; }
  .sp-header__menu span:nth-child(3){ top: 20px; }
  /* 帯「イベント制作のプロ ハレガケ」 */
  .sp-hero__band { left: 24px; top: 92px; width: 225px; height: 21px; background: #055176; }
  .sp-hero__band span {
    position: absolute; left: 6px; top: 1px; width: 219px; height: 15px;
    font-size: 16px; font-weight: 700; color: #fff; line-height: 1; white-space: nowrap;
  }
  /* タイトル帯「企画脳レンタルサービス」 */
  .sp-hero__title { left: 24px; top: 116px; width: 296px; height: 37px; background: #fff; }
  .sp-hero__title span {
    position: absolute; left: 5px; top: -2px; width: 291px;
    font-size: 26px; font-weight: 900; color: #298fcb; line-height: 36px; white-space: nowrap;
  }
  /* キャッチ画像「なんか面白いことしたい！」 */
  .sp-hero__catch { left: 8px; top: 180px; width: 344px; height: 40px; transform: rotate(-3deg); transform-origin: left center; }
  /* 「に、プロの仕掛けを」 */
  .sp-hero__catchsub {
    left: 30px; top: 217px; width: 232px;
    font-size: 22px; font-weight: 900; color: #fff;
    text-shadow: 0 2px 7px #005e94, 0 0 4px #005e94; line-height: 1.4;
  }
  /* 本文 */
  .sp-hero__lead {
    left: 31px; top: 290px; width: 319px;
    font-size: 16px; font-weight: 500; color: #055176; line-height: 25px;
    text-shadow: 0 0 9px #fff, 0 0 9px #fff;
  }
  /* バッジ2枚 */
  .sp-hero__badge1 { left: 88px; top: 400px; width: 100px; height: 100px; }
  .sp-hero__badge2 { left: 188px; top: 400px; width: 100px; height: 100px; }
  /* CTA（HEROのbtは絶対座標 y527） */
  .sp-bt--hero { top: 527px; }

  /* =========================================================
     ② 企画の壁（600→2259）
     ベース#dbecf6 の上に、白い雲ブロブ(#e5f4fb)を敷いてその上にコンテンツ
     ========================================================= */
  .sp-problems { left: 0; top: 600px; width: 375px; height: 1720px; background: #dbecf6; overflow: hidden; }
  /* 白い雲ブロブ（不定形を大きな角丸で近似。ほぼ白の #f2f9fd） */
  /* 各悩みの白い雲形背景（Figma書き出し problem-cloud-1..4.png。イラスト中心に配置） */
  .sp-lp .sp-problems > .sp-problems__cloud { position: absolute; z-index: 0; object-fit: fill; display: block; }
  .sp-lp .sp-problems > .sp-problems__cloud--1 { left: 29px; top: 213px; width: 347px; height: 319px; }
  .sp-lp .sp-problems > .sp-problems__cloud--2 { left: 2px; top: 596px; width: 360px; height: 298px; }
  .sp-lp .sp-problems > .sp-problems__cloud--3 { left: 25px; top: 944px; width: 352px; height: 322px; }
  .sp-lp .sp-problems > .sp-problems__cloud--4 { top: 1334px; width: 362px; height: 328px; }
  /* 見出し上の青ドット（4つ） */
  .sp-problems__dots {
    position: absolute; left: 144px; top: 50px; width: 134px; height: 8px; z-index: 2;
    display: flex; justify-content: space-between; align-items: center;
  }
  .sp-problems__dots span { width: 8px; height: 8px; border-radius: 50%; background: #369cd7; }
  .sp-problems__title {
    left: 11px; top: 52px; width: 361px; height: 102px; z-index: 2;
    text-align: center; font-weight: 900; color: #003954; line-height: 1.55;
  }
  .sp-problems__title .b { font-size: 30px; }
  .sp-problems__title .mk { font-size: 40px; }   /* インライン下線は廃止、黄帯で表現 */
  /* 黄マーカー帯 2本（見出し1行目・2行目の背後に重なる）Figma 137:12 / 133:288 */
  .sp-problems__mark { position: absolute; height: 14px; background: #ffe100; z-index: 1; }
  .sp-problems__mark--1 { left: 11px; top: 92px; width: 350px; }
  .sp-problems__mark--2 { left: 24px; top: 136px; width: 329px; }
  .sp-problems .sp-pr__t, .sp-problems .sp-pr__img { z-index: 2; }
  /* 各悩み（テキスト＋イラスト）：localY基準を 600 引いてセクション内に */
  .sp-pr { position: absolute; }
  .sp-pr__t { position: absolute; font-size: 17px; font-weight: 500; color: #055176; line-height: 1.65; white-space: pre-line; }
  .sp-pr__t b { font-weight: 900; }
  .sp-pr__img { position: absolute; }
  /* 1 */
  .sp-pr1 .sp-pr__t  { left: 25px; top: 234px; width: 277px; }
  .sp-pr1 .sp-pr__img{ left: 44px; top: 303px; width: 316px; height: 182px; }
  /* 2 */
  .sp-pr2 .sp-pr__t  { left: 25px; top: 570px; width: 331px; }
  .sp-pr2 .sp-pr__img{ left: 38px; top: 715px; width: 288px; height: 195px; }
  /* 3 */
  .sp-pr3 .sp-pr__t  { left: 25px; top: 980px; width: 327px; }
  .sp-pr3 .sp-pr__img{ left: 58px; top: 1055px; width: 286px; height: 205px; }
  /* 4 */
  .sp-pr4 .sp-pr__t  { left: 25px; top: 1322px; width: 325px; }
  .sp-pr4 .sp-pr__img{ left: 11px; top: 1448px; width: 352px; height: 165px; }

  /* =========================================================
     ③ 解決提案（2426→3080）青グラデ板＋下辺波形
     ========================================================= */
  /* 青パネル 133:263（local 2021→3234, h1212）。
     上辺は中央が盛り上がる弧（両肩が地色#dbecf6に下がる）＝Figma 133:265 の形。下辺は波。 */
  .sp-solution {
    left: 0; top: 2320px; width: 375px; height: 980px;
    background: linear-gradient(180deg, #278dc9, #3ca2dc);
    overflow: visible;
  }
  /* 上端中央の下向きVくぼみ（Figma 133:265）。上の#dbecf6が中央へ食い込む */
  .sp-solution__dip { position: absolute; left: 57.5px; top: -1px; width: 260px; height: 50px; background: #dbecf6; z-index: 1; clip-path: path("M0 0 C0.3 0 1.2 -0 1.81 0 C2.41 0 3.01 0 3.61 0 C4.21 0 4.81 0 5.42 0 C6.02 0 6.62 0 7.22 0 C7.82 0 8.43 0 9.03 0 C9.63 0 10.23 0 10.83 0 C11.44 0 12.04 0 12.64 0 C13.24 0.01 13.84 0.01 14.44 0.01 C15.05 0.01 15.65 0.01 16.25 0.01 C16.85 0.01 17.45 0.02 18.06 0.02 C18.66 0.02 19.26 0.02 19.86 0.03 C20.46 0.03 21.06 0.03 21.67 0.04 C22.27 0.04 22.87 0.05 23.47 0.05 C24.07 0.06 24.68 0.06 25.28 0.07 C25.88 0.08 26.48 0.08 27.08 0.09 C27.69 0.1 28.29 0.11 28.89 0.12 C29.49 0.13 30.09 0.14 30.69 0.15 C31.3 0.16 31.9 0.18 32.5 0.19 C33.1 0.21 33.7 0.22 34.31 0.24 C34.91 0.25 35.51 0.27 36.11 0.29 C36.71 0.31 37.31 0.33 37.92 0.35 C38.52 0.38 39.12 0.4 39.72 0.43 C40.32 0.45 40.93 0.48 41.53 0.51 C42.13 0.54 42.73 0.57 43.33 0.6 C43.94 0.64 44.54 0.67 45.14 0.71 C45.74 0.75 46.34 0.79 46.94 0.83 C47.55 0.88 48.15 0.92 48.75 0.97 C49.35 1.02 49.95 1.07 50.56 1.12 C51.16 1.17 51.76 1.23 52.36 1.29 C52.96 1.35 53.56 1.41 54.17 1.48 C54.77 1.54 55.37 1.61 55.97 1.68 C56.57 1.76 57.18 1.83 57.78 1.91 C58.38 1.99 58.98 2.07 59.58 2.16 C60.19 2.25 60.79 2.34 61.39 2.44 C61.99 2.53 62.59 2.63 63.19 2.74 C63.8 2.84 64.4 2.95 65 3.06 C65.6 3.18 66.2 3.29 66.81 3.42 C67.41 3.54 68.01 3.67 68.61 3.8 C69.21 3.94 69.81 4.07 70.42 4.22 C71.02 4.36 71.62 4.51 72.22 4.67 C72.82 4.82 73.43 4.98 74.03 5.15 C74.63 5.32 75.23 5.49 75.83 5.67 C76.44 5.85 77.04 6.04 77.64 6.23 C78.24 6.43 78.84 6.63 79.44 6.83 C80.05 7.04 80.65 7.26 81.25 7.48 C81.85 7.7 82.45 7.93 83.06 8.16 C83.66 8.4 84.26 8.64 84.86 8.9 C85.46 9.15 86.06 9.41 86.67 9.68 C87.27 9.95 87.87 10.23 88.47 10.51 C89.07 10.8 89.68 11.09 90.28 11.4 C90.88 11.7 91.48 12.01 92.08 12.34 C92.69 12.66 93.29 12.99 93.89 13.33 C94.49 13.67 95.09 14.02 95.69 14.39 C96.3 14.75 96.9 15.12 97.5 15.5 C98.1 15.89 98.7 16.28 99.31 16.68 C99.91 17.09 100.51 17.5 101.11 17.93 C101.71 18.36 102.31 18.8 102.92 19.25 C103.52 19.7 104.12 20.16 104.72 20.63 C105.32 21.11 105.93 21.59 106.53 22.09 C107.13 22.59 107.73 23.11 108.33 23.63 C108.94 24.16 109.54 24.69 110.14 25.25 C110.74 25.8 111.34 26.36 111.94 26.94 C112.55 27.52 113.15 28.11 113.75 28.72 C114.35 29.33 114.95 29.95 115.56 30.59 C116.16 31.23 116.76 31.88 117.36 32.55 C117.96 33.22 118.56 33.9 119.17 34.6 C119.77 35.3 120.37 36.01 120.97 36.74 C121.57 37.47 122.18 38.22 122.78 38.99 C123.38 39.75 123.98 40.53 124.58 41.33 C125.19 42.13 125.79 42.94 126.39 43.78 C126.99 44.61 127.79 45.76 128.19 46.33 C128.6 46.9 128.5 46.76 128.8 47.2 C129.1 47.64 129.6 49 130 49 C130.4 49 130.9 47.64 131.2 47.2 C131.5 46.76 131.4 46.9 131.81 46.33 C132.21 45.76 133.01 44.61 133.61 43.78 C134.21 42.94 134.81 42.13 135.42 41.33 C136.02 40.53 136.62 39.75 137.22 38.99 C137.82 38.22 138.43 37.47 139.03 36.74 C139.63 36.01 140.23 35.3 140.83 34.6 C141.44 33.9 142.04 33.22 142.64 32.55 C143.24 31.88 143.84 31.23 144.44 30.59 C145.05 29.95 145.65 29.33 146.25 28.72 C146.85 28.11 147.45 27.52 148.06 26.94 C148.66 26.36 149.26 25.8 149.86 25.25 C150.46 24.69 151.06 24.16 151.67 23.63 C152.27 23.11 152.87 22.59 153.47 22.09 C154.07 21.59 154.68 21.11 155.28 20.63 C155.88 20.16 156.48 19.7 157.08 19.25 C157.69 18.8 158.29 18.36 158.89 17.93 C159.49 17.5 160.09 17.09 160.69 16.68 C161.3 16.28 161.9 15.89 162.5 15.5 C163.1 15.12 163.7 14.75 164.31 14.39 C164.91 14.02 165.51 13.67 166.11 13.33 C166.71 12.99 167.31 12.66 167.92 12.34 C168.52 12.01 169.12 11.7 169.72 11.4 C170.32 11.09 170.93 10.8 171.53 10.51 C172.13 10.23 172.73 9.95 173.33 9.68 C173.94 9.41 174.54 9.15 175.14 8.9 C175.74 8.64 176.34 8.4 176.94 8.16 C177.55 7.93 178.15 7.7 178.75 7.48 C179.35 7.26 179.95 7.04 180.56 6.83 C181.16 6.63 181.76 6.43 182.36 6.23 C182.96 6.04 183.56 5.85 184.17 5.67 C184.77 5.49 185.37 5.32 185.97 5.15 C186.57 4.98 187.18 4.82 187.78 4.67 C188.38 4.51 188.98 4.36 189.58 4.22 C190.19 4.07 190.79 3.94 191.39 3.8 C191.99 3.67 192.59 3.54 193.19 3.42 C193.8 3.29 194.4 3.18 195 3.06 C195.6 2.95 196.2 2.84 196.81 2.74 C197.41 2.63 198.01 2.53 198.61 2.44 C199.21 2.34 199.81 2.25 200.42 2.16 C201.02 2.07 201.62 1.99 202.22 1.91 C202.82 1.83 203.43 1.76 204.03 1.68 C204.63 1.61 205.23 1.54 205.83 1.48 C206.44 1.41 207.04 1.35 207.64 1.29 C208.24 1.23 208.84 1.17 209.44 1.12 C210.05 1.07 210.65 1.02 211.25 0.97 C211.85 0.92 212.45 0.88 213.06 0.83 C213.66 0.79 214.26 0.75 214.86 0.71 C215.46 0.67 216.06 0.64 216.67 0.6 C217.27 0.57 217.87 0.54 218.47 0.51 C219.07 0.48 219.68 0.45 220.28 0.43 C220.88 0.4 221.48 0.38 222.08 0.35 C222.69 0.33 223.29 0.31 223.89 0.29 C224.49 0.27 225.09 0.25 225.69 0.24 C226.3 0.22 226.9 0.21 227.5 0.19 C228.1 0.18 228.7 0.16 229.31 0.15 C229.91 0.14 230.51 0.13 231.11 0.12 C231.71 0.11 232.31 0.1 232.92 0.09 C233.52 0.08 234.12 0.08 234.72 0.07 C235.32 0.06 235.93 0.06 236.53 0.05 C237.13 0.05 237.73 0.04 238.33 0.04 C238.94 0.03 239.54 0.03 240.14 0.03 C240.74 0.02 241.34 0.02 241.94 0.02 C242.55 0.02 243.15 0.01 243.75 0.01 C244.35 0.01 244.95 0.01 245.56 0.01 C246.16 0.01 246.76 0.01 247.36 0 C247.96 0 248.56 0 249.17 0 C249.77 0 250.37 0 250.97 0 C251.57 0 252.18 0 252.78 0 C253.38 0 253.98 0 254.58 0 C255.19 0 255.79 0 256.39 0 C256.99 0 257.59 0 258.19 0 C258.8 -0 259.7 0 260 0 Z"); }
  /* 下辺波（Figma書き出し画像 solution-wave.png を下端に重ねる） */
  .sp-lp .sp-solution > .sp-solution__wave { position: absolute; left: 0; top: 975px; width: 375px; height: 64px; object-fit: fill; z-index: 2; display: block; }
  /* 背景の「！」装飾（133:309 local x4 y2244 → section x4 y223, w111 h178）薄い白 */
  .sp-solution__excl {
    position: absolute; left: 8px; top: 44px; width: 96px; height: 166px;
    z-index: 0; opacity: .18; transform: rotate(-14deg);
  }
  .sp-solution__excl::before {            /* 棒（上太→下細・丸キャップ） */
    content: ""; position: absolute; left: 30px; top: 0;
    width: 45px; height: 120px; background: #fff;
    clip-path: path("M4 14 C4 4 11 0 22.5 0 C34 0 41 4 41 14 C40 50 37 80 35 104 C34 113 29 118 22.5 118 C16 118 11 113 10 104 C8 80 5 50 4 14 Z");
  }
  .sp-solution__excl::after {             /* 点 */
    content: ""; position: absolute; left: 37px; top: 132px;
    width: 30px; height: 30px; background: #fff; border-radius: 50%;
  }
  /* 「その悩み、発想不足ではなく『外部視点の不足』かもしれません。」(133:310 local2277→ 256) */
  .sp-solution__lead {
    z-index: 1;
    left: 26px; top: 77px; width: 324px;
    text-align: center; color: #fff; font-weight: 900; line-height: 1.5;
  }
  .sp-solution__lead .b { font-size: 24px; }
  .sp-solution__lead .y { font-size: 30px; color: #ffe100; }
  .sp-solution__photo {
    left: 13px; top: 226px; width: 349px; height: 198px;
    border-radius: 10px; box-shadow: 5px 5px 0 rgba(5,81,118,.5); overflow: hidden;
    z-index: 1;
  }
  /* 「社内にない「企画脳」を、必要なときだけ。」白帯2本＋黄マーカー（写真下端に重なる） */
  .sp-solution__h3wrap { position: absolute; left: 16px; top: 376px; width: 293px; height: 31px; background: #fff; z-index: 2; }
  .sp-solution__h3wrap2 { position: absolute; left: 16px; top: 411px; width: 191px; height: 31px; background: #fff; z-index: 2; }
  .sp-solution__mk { position: absolute; left: 154px; top: 399px; width: 94px; height: 8px; background: #ffe100; z-index: 3; }
  .sp-solution__h3 {
    left: 21px; top: 373px; width: 318px; z-index: 4;
    font-size: 24px; font-weight: 700; color: #003954; line-height: 35px;
  }
  /* 本文パネル（#DAEEFF をうっすら敷く。133:302 local2656→ section635, h424） */
  .sp-solution__panel {
    position: absolute; left: 11px; top: 456px; width: 354px; height: 424px;
    background: rgba(218, 238, 255, .14);   /* #DAEEFF を薄く */
    border-radius: 10px; z-index: 0;
  }
  .sp-solution__sub {
    left: 21px; top: 484px; width: 344px; z-index: 1;
    font-size: 20px; font-weight: 900; color: #fff; line-height: 1.5;
  }
  .sp-lp .sp-solution__body {
    left: 18px; top: 566px; width: 339px; z-index: 1;
    font-size: 16px; font-weight: 500; color: #fff; line-height: 2;   /* 行間を広く（≒2）※.t(1.5)に勝つよう.sp-lp付き */
  }
  /* CTAボタン（137:16 local3108→ section1087） */
  .sp-bt--solution { top: 908px; }

  /* =========================================================
     ④ サービスでできること（3285→3845）フラット
     ========================================================= */
  .sp-services { left: 0; top: 3405px; width: 375px; height: 560px; background: #dbecf6; }
  .sp-services__title {
    left: 83px; top: 0; width: 210px;
    text-align: center; font-size: 30px; font-weight: 900; color: #003954; line-height: 1.4;
  }
  .sp-svc { position: absolute; }
  /* 重なり順: バー(0) → 黄マーカー(1) → 説明文 → 見出し(2) → 旗(3) → 番号(4) */
  .sp-svc__bar { position: absolute; left: 21px; width: 341px; background: #f5f5f5; box-shadow: 0 2px 0 rgba(71,164,213,.2); border-radius: 4px; z-index: 0; }
  /* 旗：Figma 75×88、画像は -9° 傾けて刺さる（design_context: -rotate-9） */
  .sp-svc__flag { position: absolute; left: 4px; width: 80px; height: 94px; z-index: 3; }
  .sp-svc__flag img {
    object-fit: contain; object-position: top left;
    transform: rotate(-9deg); transform-origin: center;
  }
  .sp-svc__num { position: absolute; left: 23px; width: 30px; height: 29px; z-index: 4; font-family: "Roboto Mono", monospace; font-size: 22px; font-weight: 700; color: #ffe100; text-align: center; }
  .sp-svc__h3 { position: absolute; left: 78px; width: 290px; z-index: 2; font-size: 22px; font-weight: 700; color: #003954; line-height: 1.2; white-space: pre-line; }
  /* 黄色マーカー（見出し語下の蛍光ペン。バーの上・見出しの下＝z1） */
  .sp-svc__mk { position: absolute; height: 7px; background: #ffe100; z-index: 1; }
  .sp-svc__d { position: absolute; left: 77px; width: 290px; z-index: 1; font-size: 16px; font-weight: 700; color: #055176; line-height: 1.5; }
  /* 01 (sectionローカル: bar y116) */
  .sp-svc1 .sp-svc__bar{ top: 131px; height: 38px; }
  .sp-svc1 .sp-svc__flag{ top: 116px; left: 10px;}
  .sp-svc1 .sp-svc__num{ top: 130px; }
  .sp-svc1 .sp-svc__h3{ top: 133px; left: 88px;}
  .sp-svc1 .sp-svc__mk{ left: 154px; top: 151px; width: 109px; }
  .sp-svc1 .sp-svc__d{ top: 172px; width: 280px; }
  /* 02 */
  .sp-svc2 .sp-svc__bar{ top: 242px; height: 39px; }
  .sp-svc2 .sp-svc__flag{ top: 227px; left: 10px;}
  .sp-svc2 .sp-svc__num{ top: 242px; }
  .sp-svc2 .sp-svc__h3{ top: 245px; left: 88px;}
  .sp-svc2 .sp-svc__mk{ left: 177px; top: 266px; width: 86px; }
  .sp-svc2 .sp-svc__d{ top: 286px; width: 260px; }
  /* 03 */
  .sp-svc3 .sp-svc__bar{ top: 353px; height: 38px; }
  .sp-svc3 .sp-svc__flag{ top: 338px; left: 10px;}
  .sp-svc3 .sp-svc__num{ top: 353px; }
  .sp-svc3 .sp-svc__h3{ top: 354px; left: 88px;}
  .sp-svc3 .sp-svc__mk{ left: 82px; top: 376px; width: 164px; }
  .sp-svc3 .sp-svc__d{ top: 397px; width: 280px; }
  /* 04 */
  .sp-svc4 .sp-svc__bar{ top: 464px; height: 67px; }
  .sp-svc4 .sp-svc__flag{ top: 449px; left: 10px;}
  .sp-svc4 .sp-svc__num{ top: 464px; }
  .sp-svc4 .sp-svc__h3{ top: 466px;left: 88px; line-height: 1.4; }
  .sp-svc4 .sp-svc__mk{ left: 82px; top: 488px; width: 141px; }
  .sp-svc4 .sp-svc__d{ top: 552px; width: 262px; }

  /* =========================================================
     ⑤ ３つのご活用プラン（3992→4995）ベタ青 #369cd7
     ========================================================= */
  .sp-plans { left: 0; top: 4032px; width: 375px; height: 1283px; background: #369cd7; border-radius: 0 50px 50px 0; isolation: isolate; }
  .sp-plans__title { left: 53px; top: 44px; width: 270px; text-align: center; font-size: 30px; font-weight: 900; color: #ffe100; line-height: 1.4; }
  .sp-plans__sub { left: 14px; top: 104px; width: 337px; text-align: center; font-size: 16px; font-weight: 700; color: #fff; line-height: 1.55; }
  /* プラン1〜3をまとめて囲む1枚の白パネル。左はカード外、右は画面端(375)まで。上下も伸ばす */
  .sp-plans__panel {
    position: absolute; left: 8px; top: 188px;
    width: 367px;            /* 8→375(画面右端)。左を広げ黄丸(左端17)が白パネル上に乗る */
    height: 955px;           /* 上を黄丸上(163)付近・下をplan3下(1003)＋40まで伸ばす ≒ 158→1045 */
    background: #fff; border-radius: 16px 0 0 16px;
    box-shadow: 0 3px 8px rgba(39,142,201,.15);
    z-index: 0;
  }
  /* カード=Rect20。card内ローカルで配置（badgeはカード左上に被さる） */
  /* カード本体は水色#e0f4ff。外側に白い角丸枠(box-shadowのspreadで白フレーム)＋その外に薄青影 */
  .sp-plan { position: absolute; left: 38px; width: 306px; height: 251px; background: #e0f4ff; border-radius: 10px; z-index: 1; }

  /* 見出し背後の白帯2本（Figma Rectangle23/24。タイトル各行の下敷き） */
  .sp-plan__b1 { position: absolute; left: 54px; top: 24px; width: 157px; height: 42px; background: #fff; z-index: 1; }
  .sp-plan__b2 { position: absolute; left: 54px; top: 71px; width: 205px; height: 42px; background: #fff; z-index: 1; }
  .sp-plan__badge { position: absolute; left: -21px; top: -33px; width: 94px; height: 91px; z-index: 3; }
  .sp-plan__badge .c { position: absolute; inset: 0; background: #ffe100; border-radius: 50%; }
  .sp-plan__badge .plan { position: absolute; left: 0; top: 26px; width: 94px; text-align: center; font-size: 14px; font-weight: 900; color: #055176; line-height: 1; }
  .sp-plan__badge .no { position: absolute; left: 0; top: 42px; width: 94px; text-align: center; font-size: 31px; font-weight: 900; color: #055176; line-height: 1; }
  .sp-plan__h3 { position: absolute; left: 68px; top: 23px; width: 235px; z-index: 2; font-size: 30px; font-weight: 900; color: #003954; line-height: 45px; white-space: pre-line; }
  .sp-plan__line { position: absolute; left: 13px; top: 126px; width: 276px; height: 1px; background: rgba(5,81,118,.4); z-index: 2; }
  .sp-plan__d { position: absolute; left: 30px; top: 145px; width: 272px; z-index: 2; font-size: 20px; font-weight: 700; color: #055176; line-height: 1.55; white-space: pre-line; }
  .sp-plan1 { top: 241px; }
  .sp-plan2 { top: 544px; }
  .sp-plan3 { top: 847px; }
  /* PLAN01は説明1行のため、区切り線下の領域で縦中央に配置 */
  .sp-plan1 .sp-plan__d { top: 165px; }
  /* カード02「月額」は2文字→白帯1を短く（Figma w95） */
  .sp-plan2 .sp-plan__b1 { width: 95px; }
  .sp-bt--plans { top: 1174px; }

  /* =========================================================
     ⑥ なぜ謎解き（5204→5676）付箋写真テクスチャ背景（133:177 image6）
     ========================================================= */
  .sp-why { left: 0; top: 5340px; width: 375px; height: 572px; background: #dbecf6; overflow: hidden; }
  /* 背景：薄い付箋写真テクスチャ（Figmaからhero-bg同様にDL→sp/why-bg.png） */
  /* 背景テクスチャをセクション全面に拡大（Figma image6=375×736, 不透明度35%） */
  /* 背景=Figma image6（375×736, object-cover, opacity35%）。幅100%固定で左右を切らない */
  .sp-why__bg { position: absolute; left: 0; top: 0; width: 375px; height: 736px; z-index: 0; opacity: .35; }
  .sp-why__bg img { width: 375px; height: 736px; object-fit: cover; object-position: top center; display: block; }
  .sp-why__title { position: absolute; left: 16px; top: 0; width: 350px; z-index: 1; text-align: center; font-weight: 900; color: #003954; line-height: 1.45; }
  .sp-why__title .b { font-size: 25px; }
  .sp-why__title .mk { font-size: 34px; }
  .sp-why__mk { position: absolute; left: 80px; top: 38px; width: 262px; height: 9px; background: #ffe100; z-index: 0; }
  .sp-why__m1 { position: absolute; left: 45px; top: 120px; width: 128px; height: 150px; z-index: 1; }
  .sp-why__m2 { position: absolute; left: 202px; top: 120px; width: 128px; height: 150px; z-index: 1; }
  /* 本文：Figmaは左寄せ・各行nowrap（折り返さない）。ブロックを中央寄りに配置 */
  .sp-why__body1 { position: absolute; left: 50px; top: 305px; width: 290px; z-index: 1; text-align: left; font-size: 16px; font-weight: 700; color: #055176; line-height: 30px; white-space: nowrap; }
  /* 「面白い」手書き画像：背後に白帯（Figma 133:181 Rectangle47） */
  .sp-why__hand { display: inline-block; position: relative; vertical-align: -6px; background: #fff; padding: 2px 3px; }
  .sp-why__hand img { display: block; width: 100px; height: auto; }
  .sp-why__body2 { position: absolute; left: 50px; top: 407px; width: 300px; z-index: 1; text-align: left; font-size: 16px; font-weight: 700; color: #055176; line-height: 30px; white-space: nowrap; }

  /* =========================================================
     ⑦ 実績（5771→8925）ベタ青 #369cd7 ＋下辺斜めカット
     ========================================================= */
  .sp-events { left: 0; top: 5855px; width: 375px; height: 3198px; background: #369cd7; }
  .sp-events__title { left: 5px; top: 44px; width: 364px; text-align: center; font-size: 30px; font-weight: 900; color: #fff; line-height: 1.4; }
  /* display:contents で子(__num/__card/__img/__t)を .sp-events 基準の絶対配置に */
  .sp-ev { display: contents; }
  .sp-ev__card { position: absolute; left: 45px; width: 281px; height: 467px; background: #fff; border-radius: 15px; box-shadow: 2px 2px 0 rgba(5,81,118,.5); z-index: 1; }
  .sp-ev__img { position: absolute; border-radius: 8px; overflow: hidden; z-index: 2; }
  .sp-ev__t { z-index: 2; }
  .sp-ev__num { z-index: 3; }
  .sp-ev__num { position: absolute; left: 18px; width: 84px; height: 84px; font-family: "Roboto Mono", monospace; font-size: 65px; font-weight: 700; color: #ffe100; text-shadow: 4px 4px 0 #369cd7; line-height: 84px; }
  .sp-ev__t { position: absolute; font-size: 16px; font-weight: 500; color: #055176; line-height: 1.6; text-align: left; white-space: pre-line; }
  .sp-ev5 .sp-ev__t { text-align: center; }   /* 05のみ中央寄せ（Figma） */
  /* 各カード（section内ローカルY = localY-5771） */
  .sp-ev1 .sp-ev__num{ top: 135px; } .sp-ev1 .sp-ev__card{ top: 191px; } .sp-ev1 .sp-ev__img{ left: 63px; top: 209px; width: 244px; height: 349px; } .sp-ev1 .sp-ev__t{ left: 59px; top: 572px; width: 268px; }
  .sp-ev2 .sp-ev__num{ top: 643px; } .sp-ev2 .sp-ev__card{ top: 699px; } .sp-ev2 .sp-ev__img{ left: 61px; top: 717px; width: 246px; height: 347px; } .sp-ev2 .sp-ev__t{ left: 58px; top: 1088px; width: 253px; }
  .sp-ev3 .sp-ev__num{ top: 1151px; } .sp-ev3 .sp-ev__card{ top: 1207px; } .sp-ev3 .sp-ev__img{ left: 63px; top: 1225px; width: 247px; height: 351px; } .sp-ev3 .sp-ev__t{ left: 96px; top: 1596px; width: 179px; }
  .sp-ev4 .sp-ev__num{ top: 1659px; } .sp-ev4 .sp-ev__card{ top: 1715px; } .sp-ev4 .sp-ev__img{ left: 61px; top: 1733px; width: 248px; height: 350px; } .sp-ev4 .sp-ev__t{ left: 85px; top: 2096px; width: 200px; }
  .sp-ev5 .sp-ev__num{ top: 2167px; } .sp-ev5 .sp-ev__card{ top: 2223px; } .sp-ev5 .sp-ev__img{ left: 60px; top: 2241px; width: 250px; height: 351px; } .sp-ev5 .sp-ev__t{ left: 101px; top: 2616px; width: 180px; }
  .sp-ev6 .sp-ev__num{ top: 2675px; } .sp-ev6 .sp-ev__card{ top: 2731px; } .sp-ev6 .sp-ev__img{ left: 59px; top: 2758px; width: 253px; height: 319px; } .sp-ev6 .sp-ev__t{ left: 84px; top: 3113px; width: 210px; }

  /* =========================================================
     ⑦.5 掲載メディア実績（events後・usage前。背景#7CC7F4）
     section: local 8910→9266 (h356)
     ========================================================= */
  .sp-media { left: 0; top: 8772px; width: 375px; height: 600px; background: #7cc7f4; border-radius: 0 0 50px 0; }
  /* 下端左：mediaが下に垂れるテーパー（左ほど縦に広く、右へ先細り。カールの上下反転） */
  .sp-media::after { content: ""; position: absolute; left: 0; bottom: -47px; width: 80px; height: 48px; background: #7cc7f4; clip-path: path("M0 48 C2 32 12 8 63 1 L0 0 Z"); }
  /* events(#369cd7)との境目を斜めに：media上部にevents色の斜めバンド */
  .sp-media::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 132px; background: #369cd7; clip-path: polygon(0 0, 100% 0, 100% 8px, 0 128px); z-index: 0; }
  .sp-media__title { position: absolute; left: 0; top: 320px; width: 375px; text-align: center; font-size: 26px; font-weight: 900; color: #fff; line-height: 1.4; }
  .sp-media__box { position: absolute; left: 8px; top: 380px; width: 359px; height: 142px; background: #fff; border-radius: 12px; box-shadow: 2px 2px 0 rgba(5,81,118,.15); }
  .sp-media__banner { position: absolute; left: 20px; top: 401px; width: 336px; height: 101px; }

  /* =========================================================
     ⑧ 活用イメージ（9266→10250）フラット
     ========================================================= */
  .sp-usage { left: 0; top: 9420px; width: 375px; height: 1025px; background: #dbecf6; }
 /* 下部の青背景板（Figma Rectangle66。白吹き出し＋CTA域を青#369cd7に。導入フローへ連続） */
  .sp-usage__bluebg { position: absolute; left: 0; top: 650px; width: 375px; height: 510px; background: #369cd7; border-radius: 0 70px 0 0; z-index: 0; }
  /* 左端：上にいくほど幅が狭くなる青のカール（根元約30px・凹カーブで先細り） */
  .sp-usage__bluebg::before { content: ""; position: absolute; left: 0; top: -47px; width: 80px; height: 48px; background: #369cd7; clip-path: path("M0 0 C2 16 12 40 63 47 L0 48 Z"); }
  .sp-usage__title { position: absolute; left: 93px; top: 0; width: 189px; text-align: center; font-size: 30px; font-weight: 900; color: #003954; line-height: 1.4; }
  /* 写真（ブレスト, 133:123 local9326→section60） */
  .sp-usage__photo { position: absolute; left: 13px; top: 60px; width: 362px; height: 218px; border-radius: 10px; overflow: hidden; }
  /* リスト文字枠（133:124 local9572→section306, bg #EEF8FD） */
  .sp-usage__box { position: absolute; left: 9px; top: 306px; width: 359px; height: 275px; background: #eef8fd; box-shadow: 2px 2px 8px rgba(5,81,118,.1); }
  .sp-usage__list { position: absolute; left: 22px; top: 335px; width: 331px; font-size: 16px; font-weight: 500; color: #055176; line-height: 30px; }
  /* 課題が曖昧…の白い吹き出し（Figma 133:126 白box w360 h88 section735）＋下三角＋黄マーカー＋左右装飾線 */
  .sp-usage__band { position: absolute; left: 8px; top: 735px; width: 360px; height: 88px; background: #fff; border-radius: 12px; box-shadow: 2px 2px 8px rgba(5,81,118,.12); z-index: 1; }
  .sp-usage__band::after {   /* 下向き三角の吹き出し尖り */
    content: ""; position: absolute; left: 50%; bottom: -14px; margin-left: -12px;
    width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 14px solid #fff;
  }
  .sp-usage__bandtxt { position: absolute; left: 0; top: 741px; width: 375px; text-align: center; font-size: 17px; font-weight: 700; color: #055176; line-height: 1.7; z-index: 2; }
  .sp-usage__bandtxt .b { font-size: 25px; font-weight: 900; }
  .sp-usage__bandmk { position: absolute; left: 63px; top: 770px; width: 130px; height: 8px; background: #ffe100; z-index: 2; }
  /* 左右の黒い装飾斜め線（Line2/Line3） */
  .sp-usage__deco { position: absolute; top: 785px; width: 51px; height: 3px; background: #003954; z-index: 2; }
  .sp-usage__deco--l { left: 10px; transform: rotate(62deg); }
  .sp-usage__deco--r { left: 320px; transform: rotate(-62deg); }
  /* CTAボタン（137:35 local10148→section882） */
  .sp-bt--usage { top: 882px; z-index: 2; }

  /* =========================================================
     ⑨ 導入フロー（10291→11294）ベタ青 #369cd7 ＋下辺波形
     ========================================================= */
  .sp-flow { left: 0; top: 10390px; width: 375px; height: 1426px; background: linear-gradient(180deg, #369cd7 70%, #3ca2dc); isolation: isolate; }
  /* STEP3枚をまとめて囲む白パネル（活用プランと同様。左は黄丸が乗る位置・右は画面端まで） */
  .sp-flow__panel { position: absolute; left: 0; top: 30px; width: 367px; height: 1130px; background: #fff; border-radius: 0 16px 16px 0; box-shadow: 0 3px 8px rgba(39,142,201,.15); z-index: 0; }
  /* 下辺波（solutionと同じFigma書き出し画像を下端に重ねる） */
  .sp-lp .sp-flow > .sp-flow__wave { position: absolute; left: 0; top: 1414px; width: 375px; height: 64px; object-fit: fill; z-index: 2; display: block; }
  .sp-flow__title { left: 0; top: 90px; width: 367px; text-align: center; font-size: 28px; font-weight: 900; color: #003954; line-height: 1.4; z-index: 2; }
  /* カード=Rect20。badgeはカード左上に被さる（カードより上にはみ出す） */
  .sp-step { position: absolute; left: 37px; width: 312px; height: 268px; background: #d7eefb; border-radius: 10px; box-shadow: 2px 2px 0 rgba(39,142,201,.2); z-index: 1; }
  .sp-step__badge { position: absolute; left: -50px; top: -40px; width: 115px; height: 113px; z-index: 2; }
  .sp-step__badge .c { position: absolute; left: 24px; top: 0; width: 91px; height: 91px; background: #ffe100; border-radius: 50%; }
  .sp-step__badge .step { position: absolute; left: 24px; top: 26px; width: 91px; text-align: center; font-size: 18px; font-weight: 900; color: #055176; line-height: 1; }
  .sp-step__badge .no { position: absolute; left: 24px; top: 42px; width: 91px; text-align: center; font-size: 31px; font-weight: 900; color: #055176; line-height: 1; }
  .sp-step__h3 { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; padding: 9px 22px; background: #fff; border-radius: 4px; box-shadow: 2px 2px 0 rgba(39,142,201,.18); font-size: 26px; font-weight: 900; color: #003954; line-height: 34px; text-align: center; white-space: nowrap; }
  .sp-step__line { position: absolute; left: 13px; top: 140px; width: 288px; height: 1px; background: rgba(5,81,118,.35); }
  .sp-step__d { position: absolute; left: 34px; top: 160px; width: 240px; font-size: 20px; font-weight: 700; color: #055176; line-height: 1.55; white-space: pre-line; }
  .sp-step__d .s { font-size: 17px; }
  /* 1行見出しは top47、2行見出し(step2)は top23 */
  .sp-step1 .sp-step__h3, .sp-step3 .sp-step__h3 { top: 56px; }
  .sp-step2 .sp-step__h3 { top: 40px; }
  /* STEP2は2行見出しのため区切り線・本文を下げる */
  .sp-step2 .sp-step__line { top: 158px; }
  .sp-step2 .sp-step__d { top: 178px; }
  .sp-step1 { top: 182px; }
  .sp-step2 { top: 520px; }
  .sp-step3 { top: 858px; }
  .sp-flow__arrow { position: absolute; left: 180px; width: 0; height: 0; border-top: 20px solid #ffe100; border-left: 16px solid transparent; border-right: 16px solid transparent; z-index: 2; }
  .sp-flow__arrow1 { top: 476px; }
  .sp-flow__arrow2 { top: 814px; }
  /* 制作依頼テキスト（Figma 133:87, STEP3下・青地。白＋黄強調） */
  .sp-flow__order { position: absolute; left: 30px; top: 1210px; width: 315px; z-index: 2; text-align: center; font-size: 20px; font-weight: 900; color: #fff; line-height: 1.7; white-space: pre-line; }
  .sp-flow__order .y { color: #ffe100; font-size: 28px; }

  /* =========================================================
     ⑩ FAQ（11643→12560）フラット
     ========================================================= */
  .sp-faq { left: 0; top: 11895px; width: 375px; height: 916px; background: #dbecf6; }
  .sp-faq__title { left: 0; top: 0; width: 375px; text-align: center; font-size: 34px; font-weight: 900; color: #003954; line-height: 1.4; }
  .sp-faqi { position: absolute; left: 7px; width: 359px; }
  .sp-faqi__bar { position: absolute; left: 0; width: 359px; height: 62px; background: #f5f5f5; box-shadow: 0 2px 0 rgba(71,164,213,.2); }
  .sp-faqi__q { position: absolute; width: 45px; height: 58px; font-family: "Inter", sans-serif; font-size: 40px; font-weight: 700; color: #369cd7; line-height: 58px; text-align: center; }
  .sp-faqi__a { position: absolute; width: 45px; height: 58px; font-family: "Inter", sans-serif; font-size: 40px; font-weight: 700; color: #003954; line-height: 58px; text-align: center; }
  .sp-faqi__qt { position: absolute; left: 45px; font-size: 20px; font-weight: 700; color: #003954; line-height: 1.45; }
  .sp-faqi__at { position: absolute; left: 45px; font-size: 16px; font-weight: 700; color: #055176; line-height: 30px; }
  /* section内ローカルY = localY-11643 */
  .sp-faq1 { top: 75px; } .sp-faq1 .sp-faqi__bar{ top: 0; } .sp-faq1 .sp-faqi__q{ top: 0; } .sp-faq1 .sp-faqi__qt{ top: 4px; width: 300px; } .sp-faq1 .sp-faqi__a{ top: 70px; } .sp-faq1 .sp-faqi__at{ top: 84px; width: 314px; }
  .sp-faq2 { top: 287px; } .sp-faq2 .sp-faqi__bar{ top: 0; } .sp-faq2 .sp-faqi__q{ top: 0; } .sp-faq2 .sp-faqi__qt{ top: 16px; width: 297px; } .sp-faq2 .sp-faqi__a{ top: 70px; } .sp-faq2 .sp-faqi__at{ top: 84px; width: 312px; }
  .sp-faq3 { top: 530px; } .sp-faq3 .sp-faqi__bar{ top: 0; } .sp-faq3 .sp-faqi__q{ top: 0; } .sp-faq3 .sp-faqi__qt{ top: 4px; width: 308px; } .sp-faq3 .sp-faqi__a{ top: 70px; } .sp-faq3 .sp-faqi__at{ top: 84px; width: 314px; }
  .sp-faq4 { top: 771px; } .sp-faq4 .sp-faqi__bar{ top: 0; } .sp-faq4 .sp-faqi__q{ top: 0; } .sp-faq4 .sp-faqi__qt{ top: 16px; width: 285px; } .sp-faq4 .sp-faqi__a{ top: 70px; } .sp-faq4 .sp-faqi__at{ top: 84px; width: 300px; }

  /* =========================================================
     ⑩.5 CTA＋お問い合わせ（FAQ後 12761→13741、青 #369cd7）
     ========================================================= */
  .sp-contact { left: 0; top: 12881px; width: 375px; height: 1221px; background: #369cd7; border-radius: 28px 28px 0 0; }
  .sp-contact__cta { position: absolute; left: 0; top: 60px; width: 375px; text-align: center; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.95; }
  .sp-contact__cta .y { color: #ffe100; }
  .sp-contact__cta .b { font-size: 21px; font-weight: 900; }
  .sp-contact__cta .n { font-size: 26px; font-weight: 900; }
  .sp-contact__box { position: absolute; left: 14px; top: 320px; width: 347px; background: #fff; border-radius: 14px; box-shadow: 0 3px 10px rgba(5,81,118,.18); padding: 40px; box-sizing: border-box; }
  .sp-contact__title { margin: 0 0 12px; text-align: center; font-size: 25px; font-weight: 900; color: #003954; }
  .sp-contact__sub { margin: 0 0 22px; text-align: center; font-size: 14px; font-weight: 700; color: #055176; line-height: 1.7; }
  .sp-contact__field { margin-bottom: 14px; text-align: left; }
  .sp-contact__label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 700; color: #055176; }
  .sp-contact__req { display: inline-block; margin-left: 8px; padding: 1px 6px; font-size: 11px; font-weight: 700; color: #e23b3b; border: 1px solid #e23b3b; border-radius: 3px; vertical-align: 1px; }
  .sp-contact__field input, .sp-contact__field textarea { display: block; width: 100%; box-sizing: border-box; border: 1px solid #9ec9e2; border-radius: 6px; background: #fff; padding: 10px 10px; font-size: 16px; color: #003954; font-family: inherit; }
  .sp-contact__field textarea { height: 120px; resize: vertical; }
  .sp-contact__send { display: block; margin: 28px auto 0; width: 244px; height: 47px; padding: 0; background: none; border: none; cursor: pointer; }
  .sp-contact__send img { display: block; width: 100%; height: 100%; }
  /* MW WP Form出力（PHP・WordPress上）にも同等の見た目を適用 */
  .sp-contact__form input[type="text"], .sp-contact__form input[type="email"], .sp-contact__form input[type="tel"], .sp-contact__form textarea { display: block; width: 100%; box-sizing: border-box; border: 1px solid #9ec9e2; border-radius: 6px; background: #fff; padding: 10px; font-size: 16px; color: #003954; font-family: inherit; margin: 6px 0 14px; }
  .sp-contact__form textarea { height: 120px; }
  .sp-contact__form .form__row { margin-bottom: 16px; }
  .sp-contact__form .form__head, .sp-contact__form .form__head__main { display: flex; align-items: center; font-size: 15px; font-weight: 700; color: #055176; }
  .sp-contact__form .form__head { margin-bottom: 6px; }
  .sp-contact__form .form__head__must { display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; padding: 1px 7px; border: 1px solid #d66464; border-radius: 4px; font-size: 11px; font-weight: 700; color: #d66464; line-height: 1.6; }
  .sp-contact__form select { display: block; width: 100%; height: 44px; box-sizing: border-box; border: 1px solid #9ec9e2; border-radius: 6px; background-color: #fff; padding: 0 32px 0 10px; font-size: 16px; color: #003954; font-family: inherit; margin: 6px 0 14px; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 49%, #055176 50%), linear-gradient(135deg, #055176 50%, transparent 51%); background-position: calc(100% - 18px) 50%, calc(100% - 11px) 50%; background-size: 7px 7px, 7px 7px; background-repeat: no-repeat; }
  .sp-contact__form .form__row { position: relative; }
  .sp-contact__form .error { position: absolute; left: 2px; bottom: -14px; margin: 0; color: #d66464; font-size: 11px; line-height: 1; display: block; white-space: nowrap; }
  .sp-contact__form input[type="submit"], .sp-contact__form button { display: block; margin: 28px auto 0; width: 244px; height: 47px; border: none; cursor: pointer; background: url("../../img/add/kikaku-brain/sp/bt.png") no-repeat center / 100% 100%; color: transparent; font-size: 0; }

  /* =========================================================
     フッター（12560→13921 の余白域に配置）
     ========================================================= */
  .sp-footer { position: absolute; left: 0; top: 14102px; width: 375px; height: 200px; text-align: center; background: #fff; }
  .sp-footer__logos { position: absolute; left: 0; top: 36px; width: 375px; display: flex; justify-content: center; align-items: center; gap: 20px; }
  .sp-footer__logos img { width: auto; height: 64px; }
  .sp-footer__copy { position: absolute; left: 0; top: 140px; width: 375px; text-align: center; font-size: 12px; font-weight: 500; color: #000; }

}


/* =========================================================
   SPハンバーガードロワー（参考: squaremaze。position:fixedのため
   transform配下の .sp-wrap の外に配置した要素に適用）
   ========================================================= */
.sp-drawer, .sp-drawer-overlay { display: none; }
.sp-drawer-locked { overflow: hidden; }
@media (max-width: 1024px) {
  .sp-drawer {
    display: block; position: fixed; top: 0; right: 0;
    width: 80%; min-width: 300px; max-width: none; height: 100%;
    background: #fff; z-index: 1200;
    transform: translateX(100%); transition: transform .35s ease;
    overflow-y: auto; box-shadow: -4px 0 20px rgba(5,81,118,.18);
  }
  .sp-drawer.is-open { transform: translateX(0); }
  .sp-drawer__inner { padding: 64px 26px 40px; }
  .sp-drawer__title { margin: 0 0 20px; font-size: clamp(22px, 6vw, 36px); font-weight: 900; color: #369cd7; letter-spacing: .15em; }
  .sp-drawer__list { list-style: none; margin: 0; padding: 0; }
  .sp-drawer__list li + li { border-top: 1px solid rgba(5,81,118,.12); }
  .sp-drawer__list a { display: block; padding: 18px 4px; color: #003954; font-size: clamp(16px, 4.5vw, 26px); font-weight: 700; text-decoration: none; }
  .sp-drawer__list a::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 12px; border-top: 3px solid #369cd7; border-right: 3px solid #369cd7; transform: rotate(45deg); }
  .sp-drawer__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; padding: 0; }
  .sp-drawer__close span { position: absolute; left: 6px; top: 19px; width: 28px; height: 3px; background: #003954; border-radius: 2px; }
  .sp-drawer__close span:first-child { transform: rotate(45deg); }
  .sp-drawer__close span:last-child { transform: rotate(-45deg); }
  .sp-drawer-overlay { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,57,84,.45); z-index: 1100; opacity: 0; pointer-events: none; transition: opacity .3s; }
  .sp-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
}