@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

/* 基本 */
html {
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
p,
dl,
dd {
  margin: 0;
}

body {
  margin: 0;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  color: var(--cool-navy);
  position: relative;
}

body::before {
  background: radial-gradient(34% 40% at 82% 18%, rgba(61, 139, 255, 0.55), transparent 70%),
    radial-gradient(30% 38% at 95% 70%, rgba(21, 96, 232, 0.4), transparent 70%),
    radial-gradient(30% 40% at 45% 95%, rgba(150, 168, 200, 0.5), transparent 70%);
  animation: soft-blobs-a 13s ease-in-out infinite alternate;
  animation-duration: 22s;
}

body::after {
  background: radial-gradient(32% 40% at 15% 25%, rgba(214, 224, 242, 0.9), transparent 70%),
    radial-gradient(28% 38% at 30% 75%, rgba(120, 170, 255, 0.35), transparent 70%),
    radial-gradient(24% 34% at 65% 10%, rgba(255, 255, 255, 0.7), transparent 70%);
  animation: soft-blobs-b 17s ease-in-out infinite alternate;
  animation-duration: 28s;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  filter: blur(40px);
  opacity: calc(1 - (var(--bg-t) * 0.5 + var(--bg-s) * 0.4));
}

* {
  box-sizing: border-box;
  font-family: "Noto Sans JP",sans-serif;
}

main {
  background: radial-gradient(34% 17% at 88% 22%, rgba(86,138,240,.40), transparent 72%),
  radial-gradient(32% 16% at 8% 50%, rgba(120,168,255,.36), transparent 72%),
  radial-gradient(34% 17% at 90% 78%, rgba(96,146,240,.32), transparent 72%);
  background-color: #eef3ff;
  background-size: 100% 2000px;
  background-repeat: repeat-y;
}

html,
body {
  background: #eef3ff;
  overflow-x: clip;
}

:root {
  --color-blue-dark: #1a3d8f;
  --color-blue: #085CC8;
  --color-blue-mid: #2f6fd6;
  --color-blue-light: #eaf2ff;
  --color-blue-pale: #f2f7ff;
  --color-orange-light: #ffb655;
  --color-text: #333;
  --color-text-sub: #555555;
  --color-border: #d9e3f5;
  --color-bg: #ffffff;
  --bg-blue-grade: linear-gradient(90deg, #004AA9, #28A5F8);
  --font-base: "Zen Kaku Gothic New", sans-serif;
  --max-width: 1160px;
  --mamoru-navy: #0a2a6e;
  --mamoru-blue: #0b4cb5;
  --mamoru-blue-bright: #1f8bea;
  --color-orange: #0b4cb5;
  --bg-orange-grade: linear-gradient(180deg, #fff94d, #ffd500);
  --cool-navy: #07183f;
  --cool-blue-deep: #0b3a99;
  --cool-blue: #1560e8;
  --cool-blue-light: #3d8bff;
  --cool-gray: #eceff4;
  --cool-gray-mid: #d4dae4;
  --cool-slate: #4a5568;
  --slant: 56px;
  --b1: #1d4ba8;
  --b2: #153a8c;
  --ink: #0d2354;
  --pale: #eaf1ff;
  --cool-accent: #f5a04a;
  --mamoru-yellow: #f5a04a;
  --mamoru-yellow-deep: #ee7a3a;
  --y: #f5a04a;
}

/* 共通パーツ（ボタン・吹き出し・背景の飾り・表示アニメーション） */
.container,
.hero__inner,
.concerns__inner,
.solution__inner,
.estimate__inner,
.reasons__inner,
.plans__inner,
.about__inner,
.representative__inner,
.form__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.btn {
  display: inline-block;
  text-align: center;
  border-radius: 50px;
  transition: all 0.2s ease;
}

.btn--cta {
  padding: 18px 40px;
  font-size: 24px;
}

.btn--wide {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.btn--anime {
  overflow: hidden;
  position: relative;
}

.fadeIn.is-active {
  opacity: 1;
}

.btn:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 12px rgba(21, 96, 232, 0.3);
}

.btn--anime::after {
  content: '';
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  transform: skewX(-15deg);
  width: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 75%);
  animation: 3s 0s shine linear infinite;
}

.bg-blue {
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  filter: blur(36px);
  opacity: calc(var(--bg-t) * 0.55 + var(--bg-s) * 0.45);
  background: radial-gradient(36% 44% at 78% 24%, rgba(21, 96, 232, 0.85), transparent 70%),
    radial-gradient(32% 42% at 92% 78%, rgba(11, 58, 153, 0.75), transparent 70%),
    radial-gradient(30% 40% at 30% 85%, rgba(61, 139, 255, 0.7), transparent 70%),
    radial-gradient(26% 34% at 12% 20%, rgba(61, 139, 255, 0.55), transparent 70%);
  animation: soft-blobs-b 14s ease-in-out infinite alternate-reverse;
  animation-duration: 24s;
}

.fadeIn {
  transform: none;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fig-pose {
  position: absolute;
  max-width: none;
  pointer-events: none;
  z-index: 2;
}

.reasons__title,
.reasons__title-main,
.reasons__item-title,
.plans__title {
  color: var(--ink);
}

.fig-say,
.fig-bubble {
  color: var(--ink);
}

body::before,
body::after,
.bg-blue {
  display: none;
}

.fig-bubble,
.fig-say {
  letter-spacing: .02em;
}

.fig-bubble {
  position: absolute;
  z-index: 3;
  white-space: nowrap;
  padding: 12px 20px;
  line-height: 1.55;
}

.fig-bubble::after,
.fig-say::after,
.fig-bubble::before,
.fig-say::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 0 solid transparent;
}

.fig-bubble::before {
  right: 26px;
  bottom: -17px;
  border-top: 17px solid #2459b8;
  border-left: 17px solid transparent;
}

.fig-char__img {
  height: 100%;
  max-width: none;
}

html.js-anim .anim-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease,transform .8s cubic-bezier(.22,.8,.3,1);
}

html.js-anim .anim-up.is-in {
  opacity: 1;
  transform: none;
}

html.js-anim .concerns__list li.anim-up:nth-child(2),
html.js-anim .solution__card:nth-child(2),
html.js-anim .estimate__step:nth-child(2),
html.js-anim .about__card:nth-child(2) {
  transition-delay: .12s;
}

html.js-anim .concerns__list li.anim-up:nth-child(3),
html.js-anim .solution__card:nth-child(3),
html.js-anim .estimate__step:nth-child(3),
html.js-anim .about__card:nth-child(3) {
  transition-delay: .24s;
}

html.js-anim .anim-pop {
  opacity: 0;
  transform: translateY(70px) scale(.92);
  transition: opacity .45s ease,transform .75s cubic-bezier(.34,1.56,.64,1);
}

html.js-anim .anim-pop.is-in {
  opacity: 1;
  transform: none;
}

html.js-anim .anim-bubble {
  opacity: 0;
  transform: scale(.6);
  transform-origin: 80% 100%;
  transition: opacity .3s ease .55s,transform .45s cubic-bezier(.34,1.56,.64,1) .55s;
}

html.js-anim .anim-bubble.is-in {
  opacity: 1;
  transform: none;
}

html.js-anim .fig-char.is-in .fig-bubble--char {
  opacity: 1;
  transform: none;
}

.fig-bubble--char::before {
  right: auto;
  left: 50%;
  margin-left: -11px;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
}

html.js-anim .fig-bubble--char {
  transform-origin: 50% 100%;
}

.fig-bubble--char {
  left: 47%;
  width: 190px;
  margin-left: -95px;
  white-space: normal;
  top: -78px;
  line-height: 1.5;
  padding: 10px 12px;
}

.concerns,
.solution,
.estimate,
.reasons,
.plans,
.agency,
.about,
.representative,
.form {
  position: relative;
}

.deco {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 520px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.deco--l {
  left: 0;
}

.deco--r {
  right: 0;
}

.deco::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 2px solid rgba(21,96,232,.16);
  background: radial-gradient(circle, rgba(21,96,232,.20) 0, rgba(21,96,232,.07) 45%, transparent 70%);
}

.deco::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 130px;
  background: radial-gradient(rgba(21,96,232,.22) 1.6px, transparent 1.8px) 0 0/18px 18px;
}

.deco--l::before {
  left: -150px;
  top: 40%;
}

.deco--l::after {
  left: 40px;
  top: 60px;
}

.deco--r::before {
  right: -150px;
  top: 22%;
}

.deco--r::after {
  right: 40px;
  bottom: 70px;
}

.dc {
  position: absolute;
}

.dc-ring {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 14px solid rgba(21,96,232,.10);
  animation: dc-float 7s ease-in-out infinite;
}

.dc-stripe {
  width: 150px;
  height: 40px;
  border-radius: 999px;
  background: repeating-linear-gradient(-45deg,rgba(21,96,232,.20) 0 4px,transparent 4px 11px);
  transform: rotate(-20deg);
  animation: dc-sway 6s ease-in-out infinite;
}

.deco--l .dc-ring {
  left: 60px;
  bottom: 14%;
}

.deco--l .dc-dot {
  left: 150px;
  top: 28%;
}

.deco--l .dc-stripe {
  left: -20px;
  top: 62%;
}

.deco--l .dc-plus {
  left: 220px;
  top: 12%;
}

.deco--l .dc-ring2 {
  left: 30px;
  top: 20%;
}

.deco--r .dc-ring {
  right: 70px;
  top: 10%;
}

.deco--r .dc-dot {
  right: 170px;
  bottom: 22%;
}

.deco--r .dc-stripe {
  right: -10px;
  top: 52%;
}

.deco--r .dc-plus {
  right: 230px;
  top: 30%;
}

.deco--r .dc-ring2 {
  right: 40px;
  bottom: 10%;
}

html.js-anim .fadeIn.anim-up {
  transform: none;
}

.dc-plus {
  width: 26px;
  height: 26px;
  background: linear-gradient(#1560e8,#1560e8) center/100% 5px no-repeat,
  linear-gradient(#1560e8,#1560e8) center/5px 100% no-repeat;
  border-radius: 2px;
  transform: rotate(15deg);
  opacity: .4;
  animation: dc-spin 6s linear infinite;
}

.fig-bubble.fig-bubble--solution,
.fig-bubble.fig-bubble--agency,
.fig-bubble.fig-bubble--about,
.fig-bubble.fig-bubble--form,
.fig-bubble.fig-bubble--char {
  border: 2px solid #2459b8;
  border-radius: 18px;
  background: #fff;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(29,75,168,.14);
}

.fig-bubble.fig-bubble--solution::before,
.fig-bubble.fig-bubble--agency::before,
.fig-bubble.fig-bubble--about::before,
.fig-bubble.fig-bubble--form::before,
.fig-bubble.fig-bubble--char::before {
  display: none;
}

.fig-bubble.fig-bubble--solution::after,
.fig-bubble.fig-bubble--agency::after,
.fig-bubble.fig-bubble--about::after,
.fig-bubble.fig-bubble--form::after,
.fig-bubble.fig-bubble--char::after {
  width: 14px;
  height: 14px;
  background: #fff;
  border: 0 solid #2459b8;
  transform: rotate(45deg);
}

.fig-bubble.fig-bubble--agency::after,
.fig-bubble.fig-bubble--about::after,
.fig-bubble.fig-bubble--char::after {
  bottom: -8px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-radius: 0 0 3px 0;
}

.fig-bubble.fig-bubble--char::after {
  left: calc(50% - 7px);
}

html.js-anim .solution__card.anim-up,
html.js-anim .estimate__step.anim-up,
html.js-anim .plans__card.anim-up,
html.js-anim .options__card.anim-up,
html.js-anim .about__card.anim-up {
  opacity: 0;
  transform: translateY(30px) scale(.6);
  transform-origin: 50% 80%;
  transition: opacity .3s ease,transform .6s cubic-bezier(.34,1.7,.64,1);
}

html.js-anim .solution__card.anim-up.is-in,
html.js-anim .estimate__step.anim-up.is-in,
html.js-anim .plans__card.anim-up.is-in,
html.js-anim .options__card.anim-up.is-in,
html.js-anim .about__card.anim-up.is-in {
  opacity: 1;
  transform: none;
}

html.js-anim .solution__card:nth-child(1),
html.js-anim .estimate__step:nth-child(1),
html.js-anim .plans__card:nth-child(1),
html.js-anim .options__card:nth-child(1),
html.js-anim .about__card:nth-child(1) {
  transition-delay: .05s;
}

html.js-anim .solution__card:nth-child(2),
html.js-anim .estimate__step:nth-child(2),
html.js-anim .plans__card:nth-child(2),
html.js-anim .options__card:nth-child(2),
html.js-anim .about__card:nth-child(2) {
  transition-delay: .25s;
}

html.js-anim .solution__card:nth-child(3),
html.js-anim .estimate__step:nth-child(3),
html.js-anim .plans__card:nth-child(3),
html.js-anim .about__card:nth-child(3) {
  transition-delay: .45s;
}

.btn--header,
.btn--cta,
.mv__btn,
.hero7__btn {
  background: linear-gradient(180deg,#f4b04c 0%,#f08f3f 50%,#ee6f35 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(238,111,53,.32);
  font-weight: 900;
}

.dc-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  opacity: .75;
  animation: dc-float 5s ease-in-out infinite;
  background: #f5a04a;
  box-shadow: 0 0 0 8px rgba(245,160,74,.18);
}

.dc-ring2 {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border-style: dashed;
  border-color: rgba(245,140,60,.55);
  animation: dc-float 5s ease-in-out infinite,dc-spin 10s linear infinite;
}

/* ヘッダー */
.header {
  position: fixed;
  width: 100%;
  z-index: 100;
  transition: background .35s ease,box-shadow .35s ease,transform .35s ease;
}

.header__logo {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  width: 150px;
}

.btn--header,
.btn--cta {
  letter-spacing: 0.04em;
}

.header.is-scrolled {
  animation: hd-drop .4s cubic-bezier(.22,.8,.3,1);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset,0 6px 24px rgba(13,35,84,.08);
  border-bottom: 1px solid rgba(255,255,255,.6);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px max(20px,calc(50% - 645px)) 14px max(20px,calc(50% - 573px));
}

.header__logo-icon {
  height: 30px;
}

.btn--header {
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 26px 0 32px;
  font-size: 17px;
}

.hd-arrow {
  height: 16px;
  flex: none;
}

/* ファーストビュー */
.mv__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.mv__dots button.is-active {
  width: 54px;
  background: #fff;
}

.hero7__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero7__title span {
  display: block;
}

.hero7 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg,#4d8bf6 0%,#2b66e8 45%,#1a50d4 100%);
}

.hero7::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(103deg,#f7faff 0%,#f2f6ff 52%,rgba(240,245,255,.75) 58%,rgba(240,245,255,0) 66%);
}

.hero7__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(118deg,rgba(255,255,255,.08) 0 2px,transparent 2px 54px);
  mask: linear-gradient(90deg,transparent 55%,#000 72%);
  animation: h7-lines 14s linear infinite;
}

.hero7__bg::after {
  content: "";
  position: absolute;
  left: -10%;
  bottom: -20%;
  width: 60%;
  height: 70%;
  background: linear-gradient(118deg,transparent 40%,rgba(160,195,255,.18) 50%,transparent 60%);
}

.hero7__secbar b {
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
  font-size: 17px;
}

.hero7__secbar span:last-child {
  font-weight: 500;
  border-left: 1px solid rgba(255,255,255,.4);
  margin-left: 6px;
  padding-left: 16px;
}

.hero7__shield {
  flex: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 28'><path d='M13 1 2 5v8c0 7 4.8 11.8 11 14 6.2-2.2 11-7 11-14V5z' fill='%23fff'/><path d='m8 14 3.5 3.5L18.5 10' fill='none' stroke='%231d4ba8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  width: 26px;
  height: 28px;
}

.hero7__title-sub {
  letter-spacing: .01em;
  font-size: 44px;
  line-height: 1.2;
}

.hero7__title-main {
  font-size: 77px;
  line-height: 1.15;
  margin-top: 5px;
  margin-left: -4px;
  color: #1a4fd6;
}

.hero7__title-accent {
  font-size: 52px;
  line-height: 1.2;
  margin-top: 11px;
}

.hero7__lead strong {
  font-size: 1.18em;
  color: #1a5ae6;
}

.hero7__badges li {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  line-height: 1.45;
  height: 77px;
  border-radius: 12px;
  font-weight: 700;
  color: #24324f;
  box-shadow: 0 8px 22px rgba(29,75,168,.10);
}

.hero7__badges b {
  color: #1a5ae6;
}

.hero7__badges svg {
  flex: none;
}

.hero7__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  height: 78px;
  padding: 0 60px;
  font-size: 28px;
  gap: 16px;
  letter-spacing: .02em;
}

.hero7__btn-ico {
  flex: none;
  height: 30px;
}

.hero7__btn-arrow {
  position: absolute;
  right: 58px;
  height: 24px;
}

.hero7__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.h7-s {
  position: absolute;
  opacity: 0;
  transform: skewX(-28deg);
  background: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 100%);
  animation-duration: 6s;
  animation-timing-function: linear;
  animation: h7-streak2 6.5s linear infinite;
}

.h7-s--1 {
  left: calc(50% + 560px);
  top: 50px;
  width: 34px;
  height: 270px;
  --o: .45;
  animation-delay: 0s;
}

.h7-s--2 {
  left: calc(50% + 250px);
  top: 110px;
  width: 22px;
  height: 210px;
  --o: .5;
  animation-delay: -2.6s;
}

.h7-s--3 {
  left: calc(50% + 640px);
  top: 300px;
  width: 8px;
  height: 190px;
  --o: .6;
  animation-delay: -1.3s;
}

.h7-s--4 {
  left: calc(50% + 470px);
  top: 380px;
  width: 6px;
  height: 150px;
  --o: .55;
  animation-delay: -4s;
}

.h7-s--5 {
  left: calc(50% + 150px);
  top: 410px;
  width: 8px;
  height: 170px;
  --o: .45;
  animation-delay: -5.2s;
}

.hero7::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(238,243,255,0) 0%,rgba(238,243,255,.55) 50%,#eef3ff 100%);
}

.hero7__deco {
  width: max(0px,calc(50% - 560px));
}

.hero7__deco::before {
  left: auto;
  right: -60px;
  top: 46%;
}

.hero7__deco::after {
  left: auto;
  right: 30px;
  top: 120px;
}

.hero7__deco .dc-ring {
  left: auto;
  right: 60px;
  bottom: 12%;
}

.hero7__deco .dc-dot {
  left: auto;
  right: 150px;
  top: 30%;
}

.hero7__deco .dc-stripe {
  left: auto;
  right: 20px;
  top: 64%;
}

.hero7__deco .dc-plus {
  left: auto;
  right: 220px;
  top: 16%;
}

.hero7__deco .dc-ring2 {
  left: auto;
  right: 40px;
  top: 24%;
}

.hero7__price-top.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.hero7__stats {
  display: none;
}

.ha-board {
  --p: calc(100cqw / 720);
  position: absolute;
  inset: 0;
}

.ha-board>* {
  position: absolute;
}

.ha-circle {
  left: calc(var(--p)*170);
  top: calc(var(--p)*90);
  width: calc(var(--p)*470);
  height: calc(var(--p)*470);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,rgba(255,255,255,.55),rgba(190,214,255,.34) 62%,rgba(190,214,255,.12));
  animation: ha-float 7s ease-in-out infinite;
}

.ha-poses {
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.ha-pose {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease,visibility .7s;
}

.ha-pose.is-active {
  opacity: 1;
  visibility: visible;
}

.ha-pose .ha-mamoru {
  position: absolute;
  bottom: calc(var(--p)*150);
  height: calc(var(--p)*600);
  max-width: none;
}

.ha-pose[data-w="270"] .ha-mamoru {
  left: calc(var(--p)*250);
}

.ha-pose[data-w="334"] .ha-mamoru {
  left: calc(var(--p)*214);
}

.ha-pose[data-w="360"] .ha-mamoru {
  left: calc(var(--p)*200);
}

.ha-bubble {
  position: absolute;
  padding: calc(var(--p)*9) calc(var(--p)*18);
  border: calc(var(--p)*2) solid #2459b8;
  border-radius: calc(var(--p)*16);
  background: #fff;
  color: #0b1f4d;
  font-size: calc(var(--p)*17);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 calc(var(--p)*8) calc(var(--p)*18) rgba(29,75,168,.22);
  z-index: 9;
}

.ha-bubble::after {
  content: "";
  position: absolute;
  left: calc(var(--p)*-9);
  top: calc(100% - 2em);
  width: calc(var(--p)*14);
  height: calc(var(--p)*14);
  background: #fff;
  border-left: calc(var(--p)*2) solid #2459b8;
  border-bottom: calc(var(--p)*2) solid #2459b8;
  transform: rotate(45deg);
  border-radius: 0 0 0 calc(var(--p)*3);
}

.ha-pose.is-active .ha-bubble {
  animation: ha-pop .5s cubic-bezier(.3,1.5,.5,1) both;
}

.ha-medal {
  left: calc(var(--p)*-10);
  top: calc(var(--p)*10);
  height: calc(var(--p)*240);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%,#fffbe3 0%,#ffe27a 42%,#ffb62e 82%,#ff9a1c 100%);
  box-shadow: inset 0 0 0 calc(var(--p)*5) rgba(255,255,255,.85),0 calc(var(--p)*10) calc(var(--p)*24) rgba(7,24,63,.32);
  z-index: 4;
}

.ha-medal img {
  height: 100%;
  filter: hue-rotate(185deg) saturate(2.3) brightness(.92) contrast(1.15);
  mix-blend-mode: multiply;
}

.ha-old,
.ha-new {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1.15;
  color: #0b1f4d;
}

.ha-old {
  left: calc(var(--p)*24);
  top: calc(var(--p)*420);
  width: calc(var(--p)*300);
  height: calc(var(--p)*72);
  border-radius: calc(var(--p)*40);
  background: #fff;
  box-shadow: inset 0 0 0 calc(var(--p)*3) #d5dbe6,0 calc(var(--p)*8) calc(var(--p)*20) rgba(7,24,63,.25);
  z-index: 5;
}

.ha-old small {
  position: absolute;
  left: calc(var(--p)*28);
  top: calc(var(--p)*-14);
  padding: calc(var(--p)*4) calc(var(--p)*26);
  border-radius: 999px;
  background: #d8dde6;
  font-size: calc(var(--p)*16);
  font-weight: 900;
}

.ha-old span {
  font-size: calc(var(--p)*16);
  font-weight: 900;
}

.ha-old b {
  font-size: calc(var(--p)*28);
}

.ha-new small {
  position: absolute;
  left: calc(var(--p)*22);
  top: calc(var(--p)*-20);
  padding: calc(var(--p)*7) calc(var(--p)*30);
  border-radius: 999px;
  background: #1560e8;
  color: #fff;
  font-size: calc(var(--p)*21);
  font-weight: 900;
  box-shadow: 0 calc(var(--p)*4) calc(var(--p)*10) rgba(7,24,63,.3);
}

.ha-new span {
  font-size: calc(var(--p)*20);
  font-weight: 900;
}

.ha-new b {
  font-size: calc(var(--p)*52);
  color: #ff8c0a;
  letter-spacing: -.02em;
  text-shadow: 0 calc(var(--p)*3) 0 rgba(255,140,10,.22);
}

.ha-arrow {
  left: calc(var(--p)*36);
  top: calc(var(--p)*494);
  width: calc(var(--p)*78);
  height: calc(var(--p)*80);
  z-index: 7;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 62'><path d='M10 2C6 30 18 48 40 50' fill='none' stroke='%23f5a04a' stroke-width='8' stroke-linecap='round'/><path d='M36 34l22 16-22 12z' fill='%23f5a04a' stroke='%23f5a04a' stroke-width='3' stroke-linejoin='round'/></svg>") no-repeat center/contain;
}

.ha-banner {
  left: calc(var(--p)*20);
  top: calc(var(--p)*640);
  width: calc(var(--p)*680);
  height: calc(var(--p)*150);
  z-index: 8;
  color: #fff;
}

.ha-banner::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--p)*48);
  bottom: 0;
  border-radius: calc(var(--p)*18);
  background: linear-gradient(180deg,#ffb23a 0%,#ffa12e 45%,#ff7f42 100%);
  transform: skewX(-8deg);
  box-shadow: 0 calc(var(--p)*10) calc(var(--p)*26) rgba(7,24,63,.32),inset 0 calc(var(--p)*3) 0 rgba(255,255,255,.45);
}

.ha-banner>* {
  position: absolute;
}

.ha-banner__top {
  left: 0;
  right: 0;
  top: calc(var(--p)*-4);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(var(--p)*6);
  line-height: 1;
  white-space: nowrap;
}

.ha-banner__top span {
  font-size: calc(var(--p)*46);
  font-weight: 900;
  -webkit-text-stroke: calc(var(--p)*9) #e07a0a;
  paint-order: stroke fill;
  text-shadow: 0 calc(var(--p)*3) 0 #d97a0a;
}

.ha-banner__top b {
  position: relative;
  font-size: calc(var(--p)*88);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .9;
  background: linear-gradient(180deg,#fffbe6 0%,#fff08a 40%,#ffd23a 100%);
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: calc(var(--p)*6) #e07a0a;
  paint-order: stroke fill;
  filter: drop-shadow(0 calc(var(--p)*4) 0 #d46f08) drop-shadow(0 calc(var(--p)*8) calc(var(--p)*8) rgba(150,70,0,.28));
}

.ha-banner__top b::after {
  content: attr(data-t);
  position: absolute;
  left: 0;
  background: linear-gradient(180deg,#fffdf0 0%,#fff08a 34%,#ffd23a 72%,#ffb92e 100%);
  background-clip: text;
  -webkit-text-stroke: calc(var(--p)*2) #ffe35a;
}

.ha-banner__sub {
  left: 0;
  right: 0;
  bottom: calc(var(--p)*14);
  text-align: center;
  font-size: calc(var(--p)*44);
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: calc(var(--p)*9) #e07a0a;
  paint-order: stroke fill;
  text-shadow: 0 calc(var(--p)*3) 0 #d97a0a;
}

.ha-star {
  fill: #fff;
  filter: drop-shadow(0 0 calc(var(--p)*6) rgba(255,214,90,.95));
  animation: ha-twinkle 2.4s ease-in-out infinite;
}

.ha-star--1 {
  left: calc(var(--p)*-14);
  top: calc(var(--p)*4);
  height: calc(var(--p)*50);
}

.ha-star--2 {
  right: calc(var(--p)*50);
  top: calc(var(--p)*-30);
  height: calc(var(--p)*44);
  animation-delay: .7s;
}

.ha-star--3 {
  right: calc(var(--p)*6);
  bottom: calc(var(--p)*-14);
  height: calc(var(--p)*36);
  animation-delay: 1.3s;
}

.ha-star--4 {
  left: calc(var(--p)*96);
  top: calc(var(--p)*30);
  height: calc(var(--p)*22);
  animation-delay: .4s;
}

.ha-star--5 {
  right: calc(var(--p)*60);
  bottom: calc(var(--p)*8);
  height: calc(var(--p)*20);
  animation-delay: 1s;
}

.ha-coins {
  right: calc(var(--p)*-22);
  top: calc(var(--p)*-8);
  width: calc(var(--p)*84);
  filter: drop-shadow(0 calc(var(--p)*5) calc(var(--p)*7) rgba(120,60,0,.35));
  animation: ha-bob 3.2s ease-in-out infinite;
}

.ha-burst {
  bottom: calc(var(--p)*14);
  width: calc(var(--p)*44);
  height: calc(var(--p)*44);
}

.ha-burst--l {
  left: calc(var(--p)*176);
}

.ha-burst--r {
  right: calc(var(--p)*176);
}

.ha-burst b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--p)*5);
  height: calc(var(--p)*20);
  margin: calc(var(--p)*-10) 0 0 calc(var(--p)*-2.5);
  border-radius: 999px;
  background: #fff;
}

.ha-burst--l b:nth-child(1) {
  transform: rotate(-118deg) translateY(calc(var(--p)*-20));
}

.ha-burst--l b:nth-child(2) {
  transform: rotate(-90deg) translateY(calc(var(--p)*-20));
}

.ha-burst--l b:nth-child(3) {
  transform: rotate(-62deg) translateY(calc(var(--p)*-20));
}

.ha-burst--r b:nth-child(1) {
  transform: rotate(118deg) translateY(calc(var(--p)*-20));
}

.ha-burst--r b:nth-child(2) {
  transform: rotate(90deg) translateY(calc(var(--p)*-20));
}

.ha-burst--r b:nth-child(3) {
  transform: rotate(62deg) translateY(calc(var(--p)*-20));
}

.hero7__inner {
  position: relative;
  z-index: 1;
  align-items: flex-start;
  padding: 89px 20px 0 max(20px,calc(50% - 573px));
  display: flex;
  flex-direction: column;
}

.hero7__body {
  flex: none;
  position: relative;
  z-index: 2;
  display: contents;
}

.hero7__title {
  font-weight: 900;
  line-height: 1.12;
  color: #0b1f4d;
  letter-spacing: -.01em;
  order: 1;
}

.hero7__lead {
  margin: 7px 0 0;
  font-size: 23px;
  font-weight: 700;
  color: #24324f;
  letter-spacing: .01em;
  order: 2;
}

.ha-visual {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 22px auto 0;
  aspect-ratio: 720/790;
  z-index: 2;
  order: 3;
}

.hero7__secbar {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  color: #fff;
  height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  background: linear-gradient(100deg,#1c55d8,#2d6cf0);
  box-shadow: 0 6px 16px rgba(29,85,216,.25);
  order: 4;
  margin-top: 16px;
}

.hero7__cta {
  position: relative;
  margin: 0 auto 0 74px;
  order: 5;
  width: 100%;
  max-width: 560px;
  margin-top: 46px;
  align-self: center;
}

.hero7__badges {
  display: grid;
  margin-bottom: 22px;
  order: 6;
  margin-top: 26px;
}

.hero7__tag {
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  font-weight: 900;
  white-space: nowrap;
  z-index: 2;
  top: -22px;
  color: #0b1f4d;
  font-size: 17px;
  animation: tag-hop 3s ease-in-out infinite;
}

.hero7__tag::before {
  content: "＼ ";
}

.hero7__tag::after {
  content: " ／";
}

.ha-new {
  left: calc(var(--p)*150);
  top: calc(var(--p)*520);
  width: calc(var(--p)*380);
  height: calc(var(--p)*118);
  padding: 0 0 calc(var(--p)*14);
  border-radius: calc(var(--p)*56);
  background: #fff;
  z-index: 6;
  box-shadow: inset 0 0 0 calc(var(--p)*5) #1560e8,0 0 0 calc(var(--p)*5) rgba(245,160,74,.9),0 calc(var(--p)*14) calc(var(--p)*30) rgba(7,24,63,.4);
}

.hero7__title-main em {
  font-style: inherit;
  background: linear-gradient(transparent 74%,#ffd23f 74% 90%,transparent 90%);
}

.hero7__tag b {
  font-size: 1.2em;
  color: #ffb25a;
}

/* お悩み */
.concerns__body {
  padding-bottom: 60px;
}

.concerns__title {
  text-align: center;
  font-size: 42px;
  font-weight: 800;
  padding: 0 20px;
  margin-bottom: 20px;
}

.concerns__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.concerns::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 50%;
  width: 160px;
  height: 45px;
  background: #ebebeb;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 2;
  display: none;
}

.concerns__title strong {
  font-size: 52px;
  background: url(../images/concerns_head_parts.svg) no-repeat center top 2px / 116px auto;
  padding-top: 10px;
  color: var(--cool-blue);
}

html.js-anim .concerns__list li.anim-up:nth-child(4) {
  transition-delay: .36s;
}

html.js-anim .concerns__list li.anim-up {
  transform: translateX(-60px);
}

html.js-anim .concerns__list li.anim-up.is-in {
  transform: none;
}

.concerns__img {
  flex: none;
  max-width: 270px;
  margin: 0 auto;
}

.concern-art {
  position: relative;
  aspect-ratio: 1422/1106;
  margin-top: 10px;
}

.concern-art::before {
  content: "";
  position: absolute;
  left: 12%;
  top: 3%;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%,#fff 0%,#e4eeff 58%,#cfe0ff 100%);
  box-shadow: 0 0 0 10px rgba(255,255,255,.55);
  z-index: 0;
}

.concern-art__man {
  position: relative;
  width: 100%;
  z-index: 1;
}

.concern-art__q {
  position: absolute;
  transform-origin: 50% 90%;
  will-change: transform;
  z-index: 1;
}

.concern-art__q--1 {
  left: 26.3%;
  top: 2.7%;
  width: 8.65%;
  animation: concern-sway-1 2.6s ease-in-out infinite;
}

.concern-art__q--2 {
  left: 34.6%;
  top: 7.6%;
  width: 7.75%;
  animation: concern-sway-2 3.1s ease-in-out infinite .5s;
}

.concern-art::after {
  content: "";
  position: absolute;
  right: 4%;
  top: 8%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .85;
  z-index: 0;
  background: #ffb874;
}

.concerns__list li {
  display: flex;
  gap: 10px;
  align-items: center;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 36px 36px;
  border: 2px solid #1d4ba8;
  border-radius: 999px;
  padding: 16px 28px 16px 68px;
  box-shadow: 0 6px 0 rgba(29,75,168,.2);
  color: #0d2354;
  font-weight: 900;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle cx='20' cy='20' r='18' fill='%231d4ba8'/><path d='m12 20.5 5.5 5.5L28.5 14' fill='none' stroke='%23ffb25a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* 解決 */
.solution__inner {
  text-align: center;
}

.solution__kicker {
  font-size: 40px;
  font-weight: 700;
}

.solution__card-icon {
  height: 200px;
  margin: 0 auto;
  object-fit: contain;
}

.solution__card-title {
  text-align: center;
  font-size: 20px;
  color: var(--color-blue-dark);
  margin-top: 14px;
}

.solution__card-text {
  margin-top: 5px;
  font-weight: 500;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.8;
}

.solution__title-mark {
  position: relative;
  z-index: 2;
  color: var(--cool-blue);
}

.solution {
  padding-top: 90px;
}

.solution__title br {
  display: block;
  content: "";
}

.solution__title {
  font-size: 58px;
  width: fit-content;
  margin: 0 auto;
  padding: 0 10px;
  line-height: 1.35;
}

.solution__mamoru {
  object-fit: cover;
  object-position: top;
  position: absolute;
  max-width: none;
  right: 3%;
  height: 300px;
  z-index: 1;
  top: 40px;
}

html.js-anim .solution__mamoru.anim-pop {
  opacity: 1;
  transform: translateY(190px);
  transition: transform .9s cubic-bezier(.34,1.56,.64,1) .1s;
}

html.js-anim .solution__mamoru.anim-pop.is-in {
  transform: none;
}

html.js-anim .fig-bubble--solution.anim-bubble {
  transition-delay: .85s;
}

.fig-bubble--solution {
  z-index: 4;
  right: calc(3% + 70px);
  top: -48px;
}

.solution__card {
  background: linear-gradient(180deg,#f4f8ff,#fff);
  border: 2px solid #cfe0fb;
  border-radius: 20px;
  padding: 22px 18px 24px;
  box-shadow: 0 10px 24px rgba(29,75,168,.12);
}

.solution__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: left;
  gap: 22px;
  margin-top: 34px;
}

.fig-bubble.fig-bubble--solution::after {
  left: 72%;
  right: auto;
  top: auto;
  bottom: -8px;
  border-top-width: 0;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-radius: 0 0 3px 0;
}

.solution__security {
  border-radius: 50px;
  font-weight: 900;
  padding: 8px 22px;
  background: linear-gradient(180deg,#f4b04c,#ee6f35);
  box-shadow: 0 4px 10px rgba(160,60,0,.18);
}

.solution__title-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: -10px;
  width: 110%;
  height: 20px;
  background: url(../images/line_yellow.png) no-repeat center center / 100% auto;
  background-blend-mode: multiply;
  filter: saturate(1.8) brightness(1.02);
}

.solution__panel-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-weight: 700;
  border-radius: 50px;
  white-space: nowrap;
  font-size: 24px;
  width: 100%;
  max-width: 510px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
  padding: 16px 30px;
  top: -58px;
  box-shadow: 0 10px 24px rgba(21,96,232,.28);
  background: linear-gradient(100deg,#3d8bff 0%,#1560e8 100%);
}

/* 無料査定の流れ */
.estimate__inner {
  text-align: center;
}

.estimate__title {
  font-size: 40px;
}

.estimate__title br {
  display: none;
}

.estimate__catch {
  font-size: 76px;
  font-weight: 700;
  margin-top: 14px;
  line-height: 1.6;
}

.estimate__catch span::before {
  content: "";
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2037%2067%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20.698%200.961196L36.7219%2056.2004C37.068%2057.3933%2035.3611%2058.0225%2034.8501%2056.8905L12.0471%206.37866C11.849%205.93991%2011.9916%205.42231%2012.3865%205.14696L19.1656%200.419541C19.7271%200.0279449%2020.5073%200.303696%2020.698%200.961196Z%22%20fill%3D%22%23085CC8%22%2F%3E%3Cpath%20d%3D%22M7.70568%2021.7999L31.7354%2060.9461C32.3839%2062.0025%2030.9108%2063.0617%2030.1159%2062.1105L1.71637%2028.1314C1.40469%2027.7585%201.40626%2027.2155%201.7201%2026.8444L6.08988%2021.6773C6.52969%2021.1572%207.34937%2021.2194%207.70568%2021.7999Z%22%20fill%3D%22%23085CC8%22%2F%3E%3C%2Fsvg%3E')
              no-repeat center center / contain;
  width: 37px;
  height: 66px;
  position: absolute;
  top: 60%;
  left: -56px;
  transform: translateY(-50%);
}

.estimate__catch span::after {
  content: "";
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2037%2067%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3026%200.961196L0.278668%2056.2004C-0.0673639%2057.3933%201.63945%2058.0225%202.1505%2056.8905L24.9535%206.37866C25.1516%205.93991%2025.009%205.42231%2024.6141%205.14696L17.835%200.419541C17.2734%200.0279449%2016.4933%200.303696%2016.3026%200.961196Z%22%20fill%3D%22%23085CC8%22%2F%3E%3Cpath%20d%3D%22M29.2951%2021.7999L5.26544%2060.9461C4.61694%2062.0025%206.09002%2063.0617%206.88497%2062.1105L35.2845%2028.1314C35.5961%2027.7585%2035.5946%2027.2155%2035.2807%2026.8444L30.911%2021.6773C30.4711%2021.1572%2029.6515%2021.2194%2029.2951%2021.7999Z%22%20fill%3D%22%23085CC8%22%2F%3E%3C%2Fsvg%3E')
              no-repeat center center / contain;
  width: 37px;
  height: 66px;
  position: absolute;
  top: 60%;
  right: -42px;
  transform: translateY(-50%);
}

.estimate__sub {
  font-size: 36px;
  font-weight: 700;
  margin-top: 14px;
}

.estimate__flow {
  margin: 50px auto 0;
  max-width: 910px;
}

.estimate__flow-title::before {
  left: 0;
  transform: scaleX(-1);
}

.estimate__flow-title::after {
  right: 0;
}

.estimate__steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 56px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.estimate__step + .estimate__step::before {
  content: "";
  background: #90B7EA;
  width: 34px;
  height: 80px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  position: absolute;
  top: 50%;
  left: -44px;
  transform: translateY(-50%);
}

.estimate__step-icon {
  height: 80px;
  margin: 12px auto;
}

.estimate__step-text {
  font-weight: 500;
  line-height: 1.5;
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.estimate {
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 110px;
  color: var(--ink);
  margin-top: 40px;
}

.estimate::before {
  content: "";
  position: absolute;
  inset: -30% -10%;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 60px);
  pointer-events: none;
  display: none;
  animation: cool-estimate 24s linear infinite;
}

.estimate__flow-title {
  font-size: 28px;
  position: relative;
  padding: 0 40px;
  color: var(--b1);
}

.estimate__flow-title::before,
.estimate__flow-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 150px);
  height: 4px;
  background: var(--b1);
}

.estimate__step {
  border: 1px solid var(--color-border);
  padding: 24px;
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(29,75,168,.14);
}

.estimate__step-label {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--b1);
}

.estimate__cta-row {
  margin-top: 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fig-char--estimate {
  position: absolute;
  bottom: 0;
  z-index: 2;
  right: calc((100% - 100vw) / 2 + 1vw);
  height: min(560px, calc((100vw - 930px) / 2 * 1.5));
}

.estimate__catch span::before,
.estimate__catch span::after {
  opacity: .9;
}

.estimate__cta-row::before {
  content: "";
  background: url(../images/search.png) no-repeat center center / contain;
  width: 100px;
  height: 110px;
  position: absolute;
  z-index: 2;
  transform-origin: 70% 70%;
  left: calc(50% - 298px);
  animation-duration: 5s;
  animation: loupe-smooth 3.2s ease-in-out infinite alternate;
}

.estimate__catch span {
  position: relative;
  padding: 0 6px;
  background: linear-gradient(transparent 62%,#ffd23f 62% 92%,transparent 92%);
}

/* 選ばれる3つの理由 */
.reasons__title {
  text-align: center;
}

.reasons__title-main {
  font-size: 32px;
  line-height: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 6px;
  letter-spacing: 0.05em;
}

.reasons__title-icon {
  width: 250px;
  margin-right: 10px;
}

.reasons__title-main span {
  color: var(--color-orange);
}

.reasons__list {
  grid-template-columns: repeat(3, 1fr);
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 76px auto 0;
}

.reasons__item-image {
  flex: 0 0 45%;
  position: relative;
}

.reasons__item-image img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.reasons__item-body {
  flex: 1;
  position: relative;
  z-index: 1;
}

.reasons__item-title {
  margin-top: 10px;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.reasons__item-text {
  margin-top: 7px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.reasons__points {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
}

.reasons__item-note {
  margin-top: 14px;
  font-size: 12px;
  text-align: right;
  color: var(--color-text);
}

.reasons__item {
  display: flex;
  align-items: stretch;
  border: 1px solid #bcd3ef;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 16px 40px rgba(7, 24, 63, 0.08);
}

.reasons__item-number {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  border-bottom: 2px solid var(--color-blue);
  color: var(--cool-blue);
}

.reasons__point {
  border: 1px solid #b9d3f0;
  border-radius: 999px;
  background: #fff;
  text-align: center;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cool-blue-deep);
  border-color: var(--cool-gray-mid);
}

html.js-anim .reasons__item .reasons__item-image {
  opacity: 0;
  transform: translateX(-50px) scale(.96);
  transition: opacity .8s ease .1s,transform .9s cubic-bezier(.22,.8,.3,1) .1s;
}

html.js-anim .reasons__item:nth-child(even) .reasons__item-image {
  transform: translateX(50px) scale(.96);
}

html.js-anim .reasons__item .reasons__item-number,
html.js-anim .reasons__item .reasons__item-title,
html.js-anim .reasons__item .reasons__item-text {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease,transform .7s ease;
}

html.js-anim .reasons__item .reasons__item-number {
  transition-delay: .35s;
}

html.js-anim .reasons__item .reasons__item-title {
  transition-delay: .45s;
}

html.js-anim .reasons__item .reasons__item-text {
  transition-delay: .55s;
}

html.js-anim .reasons__item .reasons__point {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1);
}

html.js-anim .reasons__item .reasons__point:nth-child(1) {
  transition-delay: .7s;
}

html.js-anim .reasons__item .reasons__point:nth-child(2) {
  transition-delay: .8s;
}

html.js-anim .reasons__item .reasons__point:nth-child(3) {
  transition-delay: .9s;
}

html.js-anim .reasons__item .reasons__point:nth-child(4) {
  transition-delay: 1s;
}

html.js-anim .reasons__item.is-in .reasons__item-image,
html.js-anim .reasons__item.is-in .reasons__item-number,
html.js-anim .reasons__item.is-in .reasons__item-title,
html.js-anim .reasons__item.is-in .reasons__item-text,
html.js-anim .reasons__item.is-in .reasons__point {
  opacity: 1;
  transform: none;
}

.reasons {
  padding: 90px 0 100px;
  padding-top: 44px;
}

.reasons__item:nth-child(2) .reasons__item-image img {
  object-position: left top;
}

.reasons__title-main strong {
  font-size: 68px;
}

/* 管理画面（アプリ） */
.adash {
  position: relative;
  background: linear-gradient(180deg,rgba(232,242,255,0),rgba(221,236,255,.75) 14%,rgba(221,236,255,.75) 86%,rgba(232,242,255,0));
  overflow-x: clip;
}

.adash__inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
  container-type: inline-size;
}

.adash__title {
  margin-top: 16px;
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .01em;
  color: #0b2a6b;
}

.adash__lead {
  margin-top: 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
  color: #2b3a5c;
}

.adash__lead .pc-br {
  display: none;
}

.adash__stage {
  --p: calc(100cqw / 420);
  position: relative;
  margin-top: 22px;
}

.adash__app {
  background: #fff;
  border-radius: calc(var(--p)*14);
  box-shadow: 0 calc(var(--p)*18) calc(var(--p)*40) rgba(11,58,153,.22),0 0 0 calc(var(--p)*3) rgba(255,255,255,.9);
  overflow: hidden;
  color: #0b1f4d;
  font-size: calc(var(--p)*13);
  line-height: 1.4;
}

.ad-bar {
  display: flex;
  gap: calc(var(--p)*7);
  align-items: center;
  height: calc(var(--p)*28);
  padding: 0 calc(var(--p)*14);
  background: #f1f5fc;
}

.ad-bar i {
  width: calc(var(--p)*10);
  height: calc(var(--p)*10);
  border-radius: 50%;
  background: #ff5f57;
}

.ad-bar i:nth-child(2) {
  background: #febc2e;
}

.ad-bar i:nth-child(3) {
  background: #28c840;
}

.ad-head {
  padding: calc(var(--p)*10) calc(var(--p)*16) 0;
  background: #fff;
  border-bottom: 1px solid #e6edf8;
}

.ad-head__top {
  display: flex;
  align-items: center;
  gap: calc(var(--p)*10);
}

.ad-logo {
  display: flex;
  flex-direction: column;
  gap: calc(var(--p)*1);
}

.ad-logo small {
  font-size: calc(var(--p)*8.5);
  font-weight: 900;
  color: #1560e8;
  line-height: 1;
}

.ad-logo img {
  height: calc(var(--p)*24);
}

.ad-head__tool {
  align-self: flex-end;
  font-size: calc(var(--p)*11);
  color: #7a89a8;
}

.ad-head__co {
  margin-left: auto;
  font-size: calc(var(--p)*11);
  color: #5a6a8c;
}

.ad-nav {
  display: flex;
  gap: calc(var(--p)*16);
  margin-top: calc(var(--p)*8);
  overflow: hidden;
  white-space: nowrap;
  font-size: calc(var(--p)*12.5);
  font-weight: 500;
  color: #1a2a4a;
  mask-image: linear-gradient(90deg,#000 88%,transparent);
}

.ad-nav li {
  flex: none;
  padding: calc(var(--p)*6) 0 calc(var(--p)*8);
}

.ad-nav .is-on {
  font-weight: 700;
  color: #1560e8;
  box-shadow: inset 0 calc(var(--p)*-3) 0 #1560e8;
}

.ad-nav em {
  display: inline-grid;
  place-items: center;
  min-width: calc(var(--p)*15);
  height: calc(var(--p)*15);
  margin-left: calc(var(--p)*4);
  padding: 0 calc(var(--p)*3);
  border-radius: 999px;
  background: #d8453a;
  color: #fff;
  font-style: normal;
  font-size: calc(var(--p)*10);
  font-weight: 700;
}

.ad-main {
  padding: calc(var(--p)*14) calc(var(--p)*14) calc(var(--p)*16);
  background: #f4f7fc;
}

.ad-title {
  font-size: calc(var(--p)*17);
  font-weight: 900;
}

.ad-cards {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: calc(var(--p)*10);
  margin-top: calc(var(--p)*10);
}

.ad-card {
  padding: calc(var(--p)*11) calc(var(--p)*12);
  background: #fff;
  border: 1px solid #e3eaf6;
  border-radius: calc(var(--p)*10);
}

.ad-card small {
  display: block;
  min-height: calc(var(--p)*10.5*1.3*2);
  font-size: calc(var(--p)*10.5);
  color: #6a7a9a;
  line-height: 1.3;
}

.ad-card b {
  display: block;
  margin-top: calc(var(--p)*6);
  font-size: calc(var(--p)*21);
  font-weight: 900;
  line-height: 1.1;
}

.ad-card .ad-red {
  color: #c0392b;
}

.ad-card .ad-ok {
  display: flex;
  align-items: center;
  gap: calc(var(--p)*6);
  font-size: calc(var(--p)*13);
}

.ad-ok i {
  width: calc(var(--p)*11);
  height: calc(var(--p)*11);
  border-radius: 50%;
  background: #2fa63d;
}

.ad-card .ad-card__sub {
  min-height: 0;
  margin-top: calc(var(--p)*4);
}

.ad-list {
  margin-top: calc(var(--p)*10);
  padding: calc(var(--p)*12) calc(var(--p)*14) calc(var(--p)*4);
  background: #fff;
  border: 1px solid #e3eaf6;
  border-radius: calc(var(--p)*10);
}

.ad-list__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--p)*8);
  margin-bottom: calc(var(--p)*4);
}

.ad-list__h b {
  font-size: calc(var(--p)*14);
  font-weight: 900;
}

.ad-btn {
  padding: calc(var(--p)*6) calc(var(--p)*11);
  border-radius: calc(var(--p)*6);
  background: #2459b8;
  color: #fff;
  font-size: calc(var(--p)*10.5);
  font-weight: 700;
  white-space: nowrap;
}

.ad-row {
  display: grid;
  gap: calc(var(--p)*5);
  padding: calc(var(--p)*10) 0;
  border-top: 1px solid #e6edf8;
}

.ad-row__t {
  font-size: calc(var(--p)*12.5);
  color: #1d4ba8;
}

.ad-row__m {
  display: flex;
  align-items: center;
  gap: calc(var(--p)*6);
  font-size: calc(var(--p)*11);
  color: #5a6a8c;
}

.ad-row__m time {
  margin-left: auto;
}

.ad-chip {
  padding: calc(var(--p)*2) calc(var(--p)*8);
  border-radius: 999px;
  background: #eef1f6;
  color: #3a4a70;
  font-style: normal;
  font-size: calc(var(--p)*10.5);
  font-weight: 500;
}

.ad-chip--prog {
  background: #e1ecff;
  color: #1d4ba8;
}

.ad-chip--new {
  background: #fff1df;
  color: #b45f06;
}

.ad-chip--wait {
  background: #f0e6fb;
  color: #7a3fb0;
}

.adash__stage .ad-main {
  padding-bottom: calc(var(--p)*100);
}

.adash__char {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--p)*108);
  overflow: hidden;
  z-index: 3;
  border-radius: 0 0 calc(var(--p)*14) calc(var(--p)*14);
  pointer-events: none;
}

.adash__char-img {
  position: absolute;
  right: calc(var(--p)*14);
  bottom: calc(var(--p)*-76);
  width: calc(var(--p)*114);
  max-width: none;
  filter: drop-shadow(0 calc(var(--p)*6) calc(var(--p)*10) rgba(7,24,63,.2));
}

.adash__say {
  position: absolute;
  right: calc(var(--p)*14 + var(--p)*114 + 10px);
  top: calc(var(--p)*14);
  padding: 8px 14px;
  border: 2px solid #2459b8;
  border-radius: 14px;
  background: #fff;
  color: #0b1f4d;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(29,75,168,.16);
}

.adash__say::after {
  content: "";
  position: absolute;
  right: -8px;
  top: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border: solid #2459b8;
  border-width: 2px 2px 0 0;
  border-radius: 0 3px 0 0;
  background: #fff;
  transform: rotate(45deg);
}

.adash__feats {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.adash__feats li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(29,75,168,.12);
}

.adash__fi {
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(145deg,#f3f7ff,#e3edff);
  box-shadow: inset 0 0 0 1px #d6e3fb;
}

.adash__fi svg {
  height: 42px;
}

.adash__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}

.adash__note {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: #2b3a5c;
}

.adash__cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  font-size: 18px;
  padding: 18px 28px;
}

html.js-anim .adash__char.anim-peek .adash__char-img {
  transform: translateY(160px) scale(.96);
  transition: transform .9s cubic-bezier(.34,1.56,.64,1) .15s;
}

html.js-anim .adash__char.anim-peek.is-in .adash__char-img {
  transform: none;
}

html.js-anim .adash__say.anim-bubble {
  transition: opacity .25s ease 1s,transform .45s cubic-bezier(.34,1.56,.64,1) 1s;
  transform-origin: 100% 50%;
}

.adash__title span {
  display: inline-block;
  color: #1560e8;
  padding: 0 4px;
  background: linear-gradient(transparent 72%,#ffd23f 72% 92%,transparent 92%);
}

.adash__feats b {
  font-size: 21px;
  font-weight: 900;
  color: #0b2a6b;
  background: linear-gradient(transparent 80%,#ffd23f 80% 94%,transparent 94%);
}

.adash__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
  padding: 7px 22px;
  border-radius: 999px;
  color: #0b2a6b;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 6px 14px rgba(255,200,40,.3);
  background: linear-gradient(#ffe27a,#ffd23f);
  position: relative;
}

.adash__kicker i {
  position: absolute;
  top: -16px;
  width: 26px;
  height: 26px;
}

.adash__kicker i:first-child {
  left: -4px;
}

.adash__kicker i:last-child {
  right: -4px;
}

.adash__kicker i::before,
.adash__kicker i::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 14px;
  border-radius: 3px;
  background: #ffd23f;
}

.adash__kicker i:first-child::before {
  left: 3px;
  top: 7px;
  transform: rotate(-45deg);
}

.adash__kicker i:first-child::after {
  left: 14px;
  top: 1px;
  transform: rotate(-12deg);
}

.adash__kicker i:last-child::before {
  right: 3px;
  top: 7px;
  transform: rotate(45deg);
}

.adash__kicker i:last-child::after {
  right: 14px;
  top: 1px;
  transform: rotate(12deg);
}

/* 料金プラン */
.plans::before {
  content: "";
  background: url(../images/plan_bg01.png) no-repeat center center / contain;
  width: 500px;
  height: 500px;
  position: absolute;
  top: 0;
  left: -100px;
  z-index: -1;
}

.plans::after {
  content: "";
  background: url(../images/plan_bg02.png) no-repeat center center / contain;
  width: 500px;
  height: 500px;
  position: absolute;
  bottom: 0;
  right: -160px;
  z-index: -1;
}

.plans__title {
  text-align: center;
  font-size: 40px;
  padding-top: 40px;
  background: url(../images/section_head_parts.svg) no-repeat center top / 110px auto;
}

.plans__list {
  display: flex;
  gap: 20px;
  margin-top: 45px;
  flex-wrap: wrap;
  justify-content: center;
}

.plans__card {
  border: 2px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.11);
  flex: 1;
}

.plans__card-head {
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 14px 10px;
  font-size: 20px;
  height: 90px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plans__card--static .plans__card-head {
  background: #1698c9;
}

.plans__card--wp .plans__card-head {
  background: #3F7CC7;
}

.plans__card--app .plans__card-head {
  background: #2f9e8f;
}

.plans__card--ec .plans__card-head {
  background: #f39325;
}

.plans__card-body {
  padding: 18px 16px 22px;
}

.plans__price {
  text-align: center;
  color: var(--color-text);
}

.plans__price-label {
  font-weight: 700;
}

.plans__features {
  margin: 14px auto 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 194px;
  padding-top: 13px;
  border-top: 1px solid #E4E4E4;
}

.plans__features li {
  position: relative;
  padding-left: 20px;
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2017%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.5%205.04346L5.84372%209.64239L14.7249%201.49987%22%20stroke%3D%22%23085CC8%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E')
              no-repeat top 8px left / 15px auto;
}

.plans__note {
  text-align: right;
  font-size: 15px;
  color: var(--color-text-sub);
  margin-top: 5px;
}

.plans__title-accent {
  color: var(--cool-blue);
}

.plans {
  padding: 72px 0 100px;
  overflow: hidden;
  padding-top: 90px;
}

html.js-anim .plans__card:nth-child(4) {
  transition-delay: .65s;
}

.plans__price-label:first-child {
  display: block;
  font-size: 15px;
  line-height: 1.2;
  margin-bottom: 4px;
}

.plans__price-value {
  font-weight: 800;
  margin: 0 2px;
  line-height: 1;
  font-size: 34px;
  letter-spacing: -.02em;
}

.plans__price-label:last-child {
  font-size: 15px;
}

/* オプション */
.options__title {
  text-align: center;
  font-size: 24px;
  color: var(--color-blue-dark);
  margin: 60px auto 0;
  position: relative;
  width: fit-content;
}

.options__title::before,
.options__title::after {
  content: "";
  background: url(../images/option_parts.svg) no-repeat center center / contain;
  width: 73px;
  height: 13px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.options__title::before {
  right: -73px;
}

.options__title::after {
  left: -85px;
}

.options__title br {
  display: none;
}

.options__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 45px;
}

.options__card {
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.options__card--pv {
  border: 2px solid #C4E1F3;
}

.options__card--strategy {
  border: 2px solid #B9DAAA;
}

.options__card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  justify-content: center;
  padding: 12px;
}

.options__card--pv .options__card-title {
  background: #C4E1F3;
}

.options__card--strategy .options__card-title {
  background: #B9DAAA;
}

.options__card-icon {
  height: 38px;
  border-radius: 50%;
}

.options__card-list {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  max-width: 410px;
  margin: 0 auto;
  width: 100%;
}

.options__card-list li {
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  padding: 12px 0;
  border-bottom: 1px solid #CEDAE0;
}

.options__card-list li:last-child {
  border-bottom: none;
}

.options__card-note {
  margin: 0 27px 26px;
  font-weight: 700;
  font-size: 15px;
  border-radius: 8px;
  padding: 14px;
  flex-grow: 1;
}

.options__card--pv .options__card-note {
  border: 1px solid #C4E1F3;
  background: #F3F9FF;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}

.options__card--strategy .options__card-note {
  border: 1px solid #B9DAAA;
  background: #EBF5E8;
}

.options__card-badge {
  font-weight: 700;
  border-radius: 8px;
  padding: 0 0 5px;
  color: #FF6C22;
  font-size: 18px;
}

.options__card-tag {
  background: #FF6C22;
  color: #fff;
  font-size: 15px;
  padding: 3px 14px;
  border-radius: 4px;
  margin-right: 8px;
  white-space: nowrap;
}

/* 代理店・制作会社の方へ */
.agency {
  padding: 20px 20px 60px;
}

.agency__panel {
  max-width: var(--max-width);
  margin: 0 auto;
  border: 7px solid var(--color-blue);
  border-radius: 20px;
  background: repeating-linear-gradient(130deg, #f5f9ff, #f5f9ff 20px, #eef4ff 20px, #eef4ff 40px);
  padding: 65px 70px 66px;
  display: flex;
  gap: 60px;
  align-items: stretch;
}

.agency__img {
  flex: 1;
}

.agency__image {
  width: 100%;
  border-radius: 12px;
  align-self: center;
}

.agency__btn {
  margin-top: 34px;
  text-align: center;
}

.agency__body {
  flex: 1;
  min-width: 0;
}

.agency__title::before {
  content: "";
  position: absolute;
  top: 57%;
  left: 0;
  width: 3px;
  height: 36px;
  transform: translateY(-50%);
  background: var(--color-blue);
}

.agency__lead {
  font-size: 26px;
  font-weight: 700;
  margin-top: 20px;
  line-height: 1.5;
}

.agency__text {
  margin-top: 14px;
  font-weight: 500;
}

.agency__contact {
  font-weight: 700;
}

.agency__panel,
.agency__body {
  position: relative;
}

.agency__title {
  font-size: 40px;
  line-height: 1.4;
  padding-left: 30px;
  position: relative;
  color: var(--b1);
}

.agency__lead,
.agency__text,
.agency__contact {
  color: var(--ink);
}

.fig-pose--agency {
  top: -200px;
  height: 260px;
  right: 10px;
}

.fig-bubble--agency {
  top: -275px;
  right: -10px;
}

.fig-bubble.fig-bubble--agency::after {
  left: 70%;
}

/* 共通パーツ（ボタン・吹き出し・背景の飾り・表示アニメーション） */
.concerns__list,
.solution__panel,
.reasons__item,
.plans__card,
.options__card,
.agency__panel,
.company,
.form__box,
.form__line {
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
}

.concerns__inner,
.solution__inner,
.estimate__inner,
.reasons__inner,
.plans__inner,
.agency__panel,
.about__head,
.about__content,
.representative__inner,
.company,
.form__inner {
  position: relative;
  z-index: 1;
}

/* お悩み */
.concerns__list {
  flex: 1;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: 700;
  background: transparent;
  padding: 24px 0;
  gap: 14px;
}

/* 解決 */
.solution__panel {
  margin-top: 70px;
  border: 2px solid var(--color-blue);
  border-radius: 16px;
  padding: 56px 64px;
  border-color: var(--cool-blue);
  box-shadow: 0 20px 50px rgba(7, 24, 63, 0.08);
  position: relative;
  z-index: 3;
  background: #fbfcff;
  backdrop-filter: none;
}

/* オートプロジェクトについて */
.about::before {
  content: "";
  position: absolute;
  top: 270px;
  left: -87px;
  width: 500px;
  height: 500px;
  background: url(../images/about_bg01.png) no-repeat center center / contain;
  z-index: 0;
  mix-blend-mode: multiply;
}

.about::after {
  content: "";
  position: absolute;
  top: 570px;
  right: -30px;
  width: 300px;
  height: 300px;
  background: url(../images/about_bg02.png) no-repeat center center / contain;
  z-index: 0;
  mix-blend-mode: multiply;
}

.about__inner {
  max-width: 1000px;
}

.about__kicker {
  font-size: 48px;
  padding-top: 35px;
  background: url(../images/section_head_parts.svg) no-repeat top left / 100px auto;
}

.about__content {
  margin-top: -30px;
}

.about__list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.about__card-icon {
  height: 126px;
  margin: 0 auto;
}

.about__card-title {
  font-size: 18px;
  margin-top: 16px;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  line-height: 1.5;
  color: var(--color-blue-dark);
}

.about {
  padding: 60px 0;
  color: var(--ink);
}

.about__title {
  font-size: 27px;
  margin-top: 8px;
  color: var(--b1);
}

.about__card {
  padding: 30px 16px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(30, 70, 160, 0.08);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
}

.about__banner {
  margin-top: 40px;
  text-align: center;
  padding: 10px;
  font-size: 30px;
  background: linear-gradient(100deg,#2459b8,var(--b1));
  color: #fff;
  border-radius: 14px;
  font-weight: 900;
}

.about__head {
  background: #F1F9FF url(../images/about_heading.png) no-repeat center right / contain;
  padding: 100px 0;
  background-color: transparent;
}

.fig-pose--about {
  right: 4%;
  height: 360px;
}

/* 代表挨拶 */
.representative {
  padding: 74px 0 100px;
}

.representative__title {
  font-size: 38px;
  text-align: center;
  color: var(--color-blue-dark);
}

.representative__content {
  display: flex;
  gap: 64px;
  margin: 46px auto 0;
  max-width: 1000px;
}

.representative__profile {
  flex: 0 0 250px;
  max-width: 250px;
  text-align: center;
}

.representative__photo {
  border-radius: 50%;
  background: #eaf2ff;
}

.representative__name {
  margin-top: 14px;
  font-weight: 700;
}

.representative__name strong {
  font-size: 22px;
}

.representative__message {
  flex: 1;
  min-width: 0;
}

.representative__message-title {
  font-size: 28px;
  margin-bottom: 16px;
  color: var(--color-blue-dark);
  letter-spacing: 0.05em;
}

.representative__message p {
  font-size: 17px;
  color: var(--color-text);
  margin-bottom: 14px;
  font-weight: 500;
}

/* 会社概要 */
.company {
  margin-top: 50px;
  border-radius: 16px;
  padding: 42px 72px;
  display: flex;
  gap: 80px;
  box-shadow: 0 3px 10px rgba(8, 92, 200, 0.2);
}

.company__title {
  flex: 0 0 200px;
  font-size: 30px;
  color: var(--color-blue);
  border-right: 1px solid #A0BACE;
}

.company__table {
  flex: 1;
  min-width: 0;
}

.company__row {
  display: flex;
  gap: 30px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.company__row:last-child {
  border-bottom: none;
}

.company__row dt {
  flex: 0 0 140px;
  font-weight: 700;
  color: var(--color-blue);
}

.company__row dd {
  flex: 1;
  font-weight: 500;
  color: var(--color-text);
}

/* 無料査定フォーム */
.form {
  padding: 100px 0 120px;
}

.form__title {
  text-align: center;
  font-size: 46px;
}

.form__required-note {
  font-weight: 500;
}

.form__body {
  max-width: 750px;
}

.form__textarea {
  min-height: 120px;
  resize: vertical;
}

.form__pv-options {
  flex: 1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.form__pv-options .mwform-radio-field {
  position: relative;
}

.form__pv-options input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.form__file {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.form__file .mwform-file-delete {
  cursor: pointer;
  color: var(--color-text-sub);
  font-size: 20px;
}

.form__body .btn--cta {
  margin-top: 30px;
  border: none;
  cursor: pointer;
}

.form__line-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
}

.form__line-title span {
  color: #06c755;
  font-size: 32px;
}

.form__line-text {
  margin-top: 2px;
  font-size: 15px;
  color: var(--color-text);
}

.form__line-qr {
  max-width: 150px;
  margin: 20px auto 0;
}

.form__line-btn {
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin-top: 18px;
  padding: 6px 20px;
  background: #06c755;
  border-radius: 6px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  display: none;
  transition: opacity 0.3s;
}

.form__line-btn:hover {
  opacity: 0.8;
}

.form__line-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.form__or {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 850px;
  margin: 30px auto 0;
  font-size: 15px;
  color: var(--color-text);
}

.form__or::before,
.form__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #b5b5b5;
}

.form__box .form__body {
  margin-top: 24px;
}

.form__line {
  max-width: 850px;
  margin: 40px auto 0;
  padding: 24px 20px 26px;
  border: 2px solid #4cc764;
  border-radius: 8px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.fig-pose--form {
  z-index: 3;
  left: calc(50% + 230px);
  top: -60px;
  height: 230px;
}

.fig-bubble--form {
  top: -70px;
}

.form__box {
  max-width: 850px;
  margin: 30px auto 0;
  padding: 40px 50px 50px;
  border: 2px solid #cfdcf5;
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(29,75,168,.10);
  position: relative;
  overflow: hidden;
}

.form__box::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: linear-gradient(90deg,#0b2a6b,#2f6fe0);
}

.form__box-title {
  text-align: center;
  color: #0b1f4d;
  font-size: 26px;
  font-weight: 900;
  margin-top: 6px;
}

.form__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 0 60px;
  position: relative;
  border-bottom: 1px dashed #dbe5f7;
  padding: 20px 0;
}

.form__label {
  color: #0b1f4d;
  font-weight: 900;
}

.form__label--required::before {
  content: "必須";
  display: inline-block;
  background: #e0453b;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 5px;
  margin-right: 8px;
  vertical-align: 2px;
  letter-spacing: .04em;
}

.form__input,
.form__textarea {
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  border: 2px solid #cfdcf5;
  border-radius: 12px;
  padding: 14px 18px;
  background: #f8fbff;
  transition: border-color .2s,box-shadow .2s,background .2s;
}

.form__input:focus,
.form__textarea:focus {
  outline: 0;
  border-color: #2f6fe0;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(47,111,224,.15);
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: #a9b6d0;
}

.form__pv-options .mwform-radio-field-text {
  display: inline-block;
  border-radius: 50px;
  font-weight: 700;
  color: var(--color-text-sub);
  cursor: pointer;
  border: 2px solid #cfdcf5;
  background: #f8fbff;
  padding: 8px 22px;
  transition: all .2s;
}

.form__pv-options .mwform-radio-field-text:hover {
  border-color: #2f6fe0;
}

.form__pv-options input[type="radio"]:checked + .mwform-radio-field-text {
  border: 2px solid #2f6fe0;
  background: #2f6fe0;
  color: #fff;
  box-shadow: 0 6px 14px rgba(47,111,224,.3);
}

.form__file input[type="file"] {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  border: 2px dashed #b9cbef;
  border-radius: 12px;
  background: #f8fbff;
  padding: 12px 16px;
}

.form__required-dot {
  color: #e0453b;
  font-size: 0;
  margin-right: 6px;
}

.form__required-dot::before {
  content: "必須";
  display: inline-block;
  background: #e0453b;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 5px;
  vertical-align: 1px;
}

.form__box .form__required-note {
  margin-top: 8px;
  text-align: center;
  color: #4a5a7a;
  font-size: 13px;
}

.form__file input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: #2f6fe0;
  color: #fff;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
}

html.js-anim .form .anim-up,
html.js-anim .form .anim-pop,
html.js-anim .form .anim-bubble {
  transform: scale(.86);
  transition: opacity .3s ease,transform .55s cubic-bezier(.34,1.56,.64,1);
}

html.js-anim .form .anim-up.is-in,
html.js-anim .form .anim-pop.is-in,
html.js-anim .form .anim-bubble.is-in {
  transform: none;
}

/* フッター */
.footer {
  text-align: center;
  padding: 22px 20px;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: 500;
  background: var(--cool-navy);
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1700px) {
  /* ファーストビュー */
  .hero7__deco {
    display: none;
  }
}

@media (max-width: 1023px) {
  /* 解決 */
  .solution__mamoru {
    height: 240px;
  }

  /* 無料査定の流れ */
  .fig-char--estimate {
    display: none;
  }

  /* 選ばれる3つの理由 */
  .reasons__point {
    font-size: 14px;
  }

  /* 料金プラン */
  .plans__list {
    gap: 10px;
  }

  .plans__card-head {
    font-size: 16px;
  }

  /* オートプロジェクトについて */
  .about__head {
    padding: 70px 0;
  }

  .about__kicker {
    font-size: 40px;
    padding-top: 20px;
  }
}

@media (max-width: 1000px) {
  /* 選ばれる3つの理由 */
  .reasons__list {
    max-width: 500px;
  }

  .reasons__item-body {
    padding: 0px 20px 20px;
  }

  .reasons__item {
    flex-direction: column;
  }

  .reasons__item-title {
    font-size: 16px;
  }

  .reasons__point {
    padding: 7px 10px;
  }
}

@media (max-width: 900px) {
  /* 共通パーツ（ボタン・吹き出し・背景の飾り・表示アニメーション） */
  .btn--cta {
    font-size: 19px;
    padding: 14px 30px;
    width: fit-content;
  }

  /* お悩み */
  .concerns__title {
    font-size: 25px;
  }

  .concerns__title strong {
    font-size: 42px;
    background-size: 90px;
  }

  .concerns__list {
    font-size: 17px;
  }

  /* 解決 */
  .solution__kicker {
    font-size: 33px;
  }

  .solution__title {
    font-size: 44px;
  }

  .solution__card-title {
    font-size: 16px;
  }

  .solution__panel {
    padding: 46px 34px;
  }

  /* 無料査定の流れ */
  .estimate__title {
    font-size: 28px;
  }

  .estimate__catch {
    font-size: 50px;
  }

  .estimate__sub {
    font-size: 28px;
  }

  .estimate__flow {
    margin: 30px auto 0;
  }

  .estimate__flow-title {
    font-size: 25px;
  }

  /* 代理店・制作会社の方へ */
  .agency__panel {
    flex-direction: column-reverse;
  }

  /* オートプロジェクトについて */
  .about__kicker {
    font-size: 32px;
  }

  .about__title {
    font-size: 20px;
  }

  /* 会社概要 */
  .company {
    gap: 40px;
    padding: 42px;
  }

  .company__title {
    flex: 0 0 170px;
  }

  .company__row dt {
    flex: 0 0 90px;
  }

  /* 無料査定フォーム */
  .form__body .btn--cta {
    width: 100%;
    max-width: 300px;
  }

  .fig-pose--form {
    left: auto;
  }
}

@media (max-width: 767px) {
  /* 基本 */
  :root {
    --slant: 28px;
  }

  /* 共通パーツ（ボタン・吹き出し・背景の飾り・表示アニメーション） */
  .fig-bubble {
    position: relative;
    display: table;
    margin: 0 auto 18px;
  }

  .deco {
    width: 260px;
  }

  .deco::before {
    width: 220px;
    height: 220px;
  }

  .dc-stripe,
  .dc-ring {
    display: none;
  }

  .fig-bubble--solution,
  .fig-bubble--agency,
  .fig-bubble--about,
  .fig-bubble--form {
    top: auto;
    right: auto;
    margin: 0 auto 12px;
    font-size: 13px;
    padding: 8px 16px;
  }

  .fig-bubble--solution::before,
  .fig-bubble--agency::before,
  .fig-bubble--about::before,
  .fig-bubble--form::before {
    left: 50%;
    right: auto;
    bottom: -12px;
    margin: 0 0 0 -9px;
    border-top: 12px solid #2459b8;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 0;
  }

  .solution__mamoru,
  .fig-pose--agency,
  .fig-pose--about,
  .fig-pose--form {
    position: relative;
    inset: auto;
    margin: 0 auto 8px;
    height: 170px;
  }

  html.js-anim .fig-bubble.anim-bubble:not(.is-in) {
    opacity: 0;
    transform: scale(.6);
  }

  html.js-anim .fig-bubble.anim-bubble {
    transform-origin: 50% 100%;
    transition: opacity .3s ease .55s,transform .45s cubic-bezier(.34,1.56,.64,1) .55s;
  }

  .concerns,
  .solution,
  .estimate,
  .reasons,
  .adash,
  .plans,
  .representative,
  .form {
    margin-top: 0;
    padding-top: 56px;
  }

  .deco--l .dc-plus {
    left: 10px;
  }

  .deco--r .dc-plus {
    right: 10px;
  }

  .agency__panel .fig-bubble.fig-bubble--agency::after,
  .about>.fig-bubble.fig-bubble--about::after,
  .form__inner>.fig-bubble.fig-bubble--form::after {
    left: auto;
    right: -8px;
    top: calc(50% - 7px);
    bottom: auto;
    border-width: 2px 2px 0 0;
    border-radius: 0 3px 0 0;
  }

  .fig-bubble--char {
    margin-left: -95px;
  }

  /* ヘッダー */
  .header__logo {
    width: 120px;
  }

  .header__logo-icon {
    height: 24px;
  }

  .hd-arrow {
    height: 12px;
  }

  .btn--header {
    height: 40px;
    gap: 6px;
    font-size: min(13px,3.4vw);
    padding: 0 min(14px,3.6vw) 0 min(18px,4.6vw);
  }

  /* ファーストビュー */
  .hero7__bg::before {
    mask: linear-gradient(180deg,transparent 45%,#000 75%);
  }

  .hero7__body {
    max-width: 683px;
    margin: 0 auto;
  }

  .hero7__shield {
    width: 20px;
    height: 22px;
  }

  .hero7__btn-ico {
    height: 20px;
  }

  .hero7__bg::after {
    display: none;
  }

  .h7-s--1 {
    left: 78%;
    bottom: 230px;
    width: 22px;
    height: 150px;
    --o: .8;
  }

  .h7-s--2 {
    left: 12%;
    bottom: 260px;
    width: 16px;
    height: 120px;
    --o: .7;
  }

  .h7-s--3 {
    left: 90%;
    bottom: 130px;
    width: 9px;
    height: 100px;
    --o: .85;
  }

  .h7-s--4 {
    left: 30%;
    bottom: 150px;
    width: 8px;
    height: 90px;
    --o: .8;
  }

  .h7-s--5 {
    left: 62%;
    bottom: 90px;
    width: 9px;
    height: 100px;
    --o: .7;
  }

  .hero7__btn {
    height: 58px;
    font-size: min(17px,4.6vw);
    padding: 0 min(40px,9vw);
    gap: min(8px,2vw);
  }

  .hero7__btn-arrow {
    height: 18px;
    right: min(18px,4vw);
  }

  .hero7__title-sub {
    font-size: min(23px,6.2vw);
  }

  .hero7__title-main {
    margin-top: 2px;
    font-size: min(42px,11.2vw);
  }

  .hero7__title-accent {
    margin-top: 6px;
    font-size: min(27px,7.2vw);
  }

  .hero7__secbar span:last-child {
    font-size: 11px;
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
    display: none;
  }

  .hero7__title {
    text-align: center;
  }

  .hero7__lead {
    text-align: center;
    margin: 6px 0 0;
    font-size: min(14px,3.5vw);
  }

  .hero7__badges svg {
    width: 26px;
    height: 26px;
  }

  .hero7__secbar b {
    font-size: min(15px,4vw);
  }

  .hero7__stats svg {
    flex: none;
    width: 30px;
    height: 26px;
    color: #0b2a6b;
  }

  .hero7__stats-crown {
    fill: #2f6fe0;
  }

  .hero7__stats b {
    font-size: min(17px,4.6vw);
    color: #1a4fd6;
  }

  .hero7__stats em {
    font-style: normal;
    font-weight: 900;
    font-size: min(13px,3.5vw);
    margin-left: 2px;
  }

  .hero7__stats li {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(29,75,168,.12);
    font-size: min(12.5px,3.4vw);
    font-weight: 700;
    line-height: 1.35;
    color: #0b1f4d;
    padding: 9px 10px;
  }

  .hero7__secbar {
    height: auto;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 5px 14px;
  }

  .hero7__badges li {
    flex-direction: column;
    gap: 4px;
    height: auto;
    text-align: center;
    font-size: min(11.5px,3.1vw);
    line-height: 1.4;
    padding: 8px 4px;
  }

  .h7-s {
    top: auto;
    display: none;
  }

  .hero7__cta {
    margin: 46px 0 0;
    z-index: 2;
  }

  .hero7::before {
    background: linear-gradient(180deg,#f7faff 0%,#f2f6ff 52%,rgba(240,245,255,0) 78%);
    display: none;
  }

  .hero7 {
    background: radial-gradient(circle at 0% 22%, rgba(61,139,255,.34) 0, rgba(61,139,255,.12) 100px, transparent 180px),
    radial-gradient(circle at 100% 12%, rgba(21,96,232,.28) 0, rgba(21,96,232,.10) 90px, transparent 170px),
    linear-gradient(180deg,#f6f9ff 0%,#eef4ff 100%);
  }

  .hero7__inner {
    align-items: stretch;
    padding: 56px 16px 22px;
    padding-top: 74px;
    padding-bottom: 6px;
  }

  .hero7::after {
    height: 60px;
  }

  .hero7__badges {
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin: 26px 0 0;
    display: none;
  }

  .hero7__stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    order: 5;
    margin-top: 14px;
  }

  .hero7__stats li:first-child b {
    display: block;
  }

  .hero7__deco .dc-plus {
    right: 10px;
  }

  .ha-visual {
    overflow-x: clip;
  }

  .ha-bubble {
    font-size: max(13px,calc(var(--p)*17));
    padding: .4em .9em;
    left: calc(var(--p)*440);
    top: calc(var(--p)*-16);
  }

  /* お悩み */
  .concerns__title strong {
    font-size: 30px;
    background-size: 68px;
    padding-top: 6px;
  }

  .concerns__inner {
    flex-direction: column;
    gap: 0;
  }

  .concerns__body {
    display: contents;
  }

  .concerns__list {
    font-size: 14px;
    order: 3;
    margin-top: -20px;
  }

  .concerns__list li {
    font-size: 15px;
  }

  .concerns__img {
    order: 2;
  }

  .concerns__title {
    order: 1;
    font-size: min(20px,5.4vw);
  }

  .concerns {
    padding-top: 53px;
  }

  /* 解決 */
  .solution__kicker {
    font-size: 24px;
  }

  .solution__title {
    font-size: 34px;
    margin-top: 8px;
  }

  .solution__title-mark::before {
    bottom: -3px;
    left: -2px;
  }

  .solution__cards {
    grid-template-columns: 1fr;
  }

  .solution__card-icon {
    height: 140px;
  }

  .solution__card-title {
    margin-top: 6px;
    font-size: 18px;
  }

  .solution__security {
    font-size: 14px;
  }

  .solution__panel-label {
    font-size: 16px;
    max-width: 300px;
    top: -54px;
  }

  .solution {
    padding-top: 32px;
  }

  .solution__panel {
    padding: 30px;
    max-width: 500px;
    margin: 60px auto 0;
    margin-top: 92px;
  }

  .fig-bubble.fig-bubble--solution {
    font-size: 16px;
    padding: 10px 18px;
  }

  .fig-bubble.fig-bubble--solution::after {
    left: calc(50% - 7px);
  }

  /* 無料査定の流れ */
  .estimate__title {
    font-size: 22px;
    line-height: 1.5;
  }

  .estimate__title br {
    display: block;
  }

  .estimate__catch {
    font-size: 32px;
    padding: 10px 0;
    margin-top: 8px;
  }

  .estimate__catch span::before {
    width: 22px;
    height: 46px;
    left: -30px;
  }

  .estimate__catch span::after {
    width: 22px;
    height: 46px;
    right: -22px;
  }

  .estimate__sub {
    font-size: 18px;
    margin-top: 8px;
  }

  .estimate__flow {
    margin-top: 36px;
  }

  .estimate__flow-title {
    font-size: 18px;
    padding: 0 20px;
  }

  .estimate__flow-title::before,
  .estimate__flow-title::after {
    width: calc(50% - 100px);
  }

  .estimate__steps {
    flex-direction: column;
    max-width: 260px;
    margin: 26px auto 0;
  }

  .estimate__step {
    max-width: 100%;
  }

  .estimate__step + .estimate__step::before {
    transform: translate(-50%, 0) rotate(90deg);
    top: -67px;
    left: 50%;
  }

  .estimate__cta-row {
    margin: 30px auto 0;
    width: fit-content;
  }

  .estimate__cta-row::before {
    width: 60px;
    height: 70px;
    top: 10px;
  }

  /* 選ばれる3つの理由 */
  .reasons__title-icon {
    width: 170px;
    margin-right: 5px;
  }

  .reasons__title-main {
    flex-wrap: wrap;
    font-size: 24px;
    max-width: 335px;
    margin: 0 auto;
  }

  .reasons__title-main span {
    flex: 1;
    font-size: 34px;
  }

  .reasons__title-main strong {
    font-size: 48px;
  }

  .reasons__item-image {
    max-width: 100%;
  }

  .reasons__list {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  /* 料金プラン */
  .plans::before {
    width: 330px;
    height: 330px;
  }

  .plans::after {
    bottom: auto;
    top: 600px;
  }

  .plans__title {
    font-size: 24px;
  }

  .plans__list {
    margin: 48px auto 0;
  }

  .plans__card {
    max-width: 290px;
    width: 290px;
    flex: none;
  }

  .plans__features {
    max-width: 240px;
  }

  /* オプション */
  .options__title {
    font-size: 18px;
    line-height: 1.4;
  }

  .options__title br {
    display: block;
  }

  .options__title::before,
  .options__title::after {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2047%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2013L21%200H0L10.5%2013Z%22%20fill%3D%22%23C4E1F3%22%2F%3E%3Cpath%20d%3D%22M36%2013L47%200H25L36%2013Z%22%20fill%3D%22%23C4E1F3%22%2F%3E%3C%2Fsvg%3E');
    width: 50px;
  }

  .options__title::before {
    right: -43px;
  }

  .options__title::after {
    left: -45px;
  }

  .options__list {
    grid-template-columns: 1fr;
  }

  .options__card-title {
    font-size: 18px;
  }

  .options__card-icon {
    height: 32px;
  }

  .options__card-list li {
    font-size: 16px;
  }

  .options__card--pv .options__card-note {
    font-size: 16px;
  }

  .options__card-badge {
    font-size: 16px;
  }

  .options__card-tag {
    display: block;
    width: fit-content;
    margin: 0 0 5px;
    font-size: 14px;
    padding: 2px 9px;
  }

  .options__card-note {
    margin: 0 20px 20px;
    line-height: 1.4;
    font-weight: 400;
  }

  /* 代理店・制作会社の方へ */
  .agency {
    margin-top: 0;
    padding: 43px 16px 0;
  }

  .agency__image {
    display: none;
  }

  .agency__btn {
    margin-top: 0;
  }

  .agency__btn .btn {
    padding: 12px;
  }

  .agency__title {
    font-size: 24px;
    padding-left: 16px;
  }

  .agency__title::before {
    height: 28px;
  }

  .agency__lead {
    font-size: 16px;
  }

  .agency__text {
    font-size: 14px;
  }

  .agency__panel {
    padding: 36px 24px;
    gap: 24px;
    border-radius: 40px;
    border: 5px solid var(--color-blue);
    margin-top: 84px;
  }

  .agency__body {
    position: static;
  }

  .agency__panel .fig-pose--agency {
    position: absolute;
    top: -76px;
    right: 18px;
    margin: 0;
    height: 150px;
    z-index: 4;
  }

  .agency__panel .fig-bubble--agency {
    position: absolute;
    top: -70px;
    right: 132px;
    margin: 0;
    z-index: 5;
  }

  /* 共通パーツ（ボタン・吹き出し・背景の飾り・表示アニメーション） */
  .estimate__cta-row .btn--cta,
  .agency__btn .btn--cta,
  .btn--cta.btn--wide {
    font-size: min(18px,4.8vw);
    padding-left: min(24px,5vw);
    padding-right: min(24px,5vw);
  }

  /* 代理店・制作会社の方へ */
  .agency__btn .btn--cta,
  .agency__body .btn--cta {
    font-size: min(15px,4vw);
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
  }

  /* オートプロジェクトについて */
  .about::before {
    width: 270px;
    height: 270px;
    left: auto;
    right: -110px;
    top: 170px;
  }

  .about__inner {
    max-width: 600px;
  }

  .about__title {
    font-size: 16px;
    margin-top: 2px;
  }

  .about__content {
    flex-direction: column;
  }

  .about__list {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
  }

  .about__card {
    flex-direction: row;
    text-align: left;
    gap: 0 18px;
    align-items: center;
    padding: 17px 20px;
  }

  .about__card-icon {
    height: 76px;
  }

  .about__card-title {
    display: block;
    font-size: 16px;
    margin-top: 0;
  }

  .about {
    display: grid;
    column-gap: 8px;
    margin-top: 0;
    padding: 28px 16px 0;
    row-gap: 0;
    grid-template-columns: 1.3fr .7fr;
    align-items: end;
  }

  .about>.about__head {
    grid-column: 1 / -1;
    grid-row: 3;
    background: none;
    padding-top: 6px;
    padding-bottom: 16px;
  }

  .about__kicker {
    font-size: 22px;
    padding-top: 26px;
  }

  .about>.about__content {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 0;
  }

  .about::after {
    background: url(../images/about_heading.png) no-repeat center/contain;
    position: static;
    width: auto;
    top: auto;
    right: auto;
    mix-blend-mode: normal;
    z-index: 1;
    grid-column: 1 / -1;
    grid-row: 1 / 3;
    align-self: stretch;
    justify-self: stretch;
    height: auto;
    min-height: 112px;
    margin: -6px -16px 0 -16px;
    background-position: 50% 40%;
    background-size: cover;
    mask-image: linear-gradient(to right,transparent 0,#000 26%,#000 74%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 24%,#000 64%,transparent 100%);
    mask-composite: intersect;
  }

  .about>.fig-bubble--about {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    justify-self: end;
    margin: 18px -22px 0 0;
    font-size: 14px;
    padding: 9px 14px;
    border-radius: 12px;
  }

  .about>.fig-pose--about {
    margin: 0;
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    height: 140px;
    justify-self: end;
    margin-right: -6px;
  }

  .about__banner {
    font-size: 24px;
    line-height: 1.4;
    padding: 18px 22px;
  }

  /* 共通パーツ（ボタン・吹き出し・背景の飾り・表示アニメーション） */
  .concerns,
  .solution,
  .estimate,
  .reasons,
  .adash,
  .plans,
  .agency,
  .about,
  .representative {
    padding-bottom: 0;
  }

  /* 代表挨拶 */
  .representative__title {
    font-size: 24px;
  }

  .representative__profile {
    max-width: 240px;
  }

  .representative__photo {
    width: 160px;
    margin: 0 auto;
  }

  .representative__message-title {
    line-height: 1.4;
    font-size: 22px;
  }

  .representative__message p {
    font-size: 16px;
  }

  .representative__content {
    flex-direction: column;
    align-items: center;
    margin-top: 32px;
    gap: 28px;
  }

  .representative .deco--l .dc-ring2 {
    top: 8%;
  }

  .representative .deco--l .dc-dot {
    left: 14px;
    top: 384px;
  }

  /* 会社概要 */
  .company {
    flex-direction: column;
    padding: 24px;
    margin-top: 30px;
    gap: 0;
  }

  .company__title {
    font-size: 24px;
    flex: none;
    border-right: none;
    border-bottom: 1px solid #A0BACE;
    padding-bottom: 10px;
  }

  .company__row {
    flex-direction: column;
    gap: 6px;
  }

  .company__row dt {
    flex: none;
    font-size: 14px;
  }

  .company__row dd {
    font-size: 14px;
  }

  /* 無料査定フォーム */
  .form__row {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }

  .form__label {
    text-align: left;
  }

  .form__label br {
    display: none;
  }

  .form__line-title {
    font-size: 18px;
  }

  .form__line-title span {
    font-size: 24px;
  }

  .form__line-text {
    font-size: 12px;
  }

  .form__line-qr {
    display: none;
  }

  .form__line-btn {
    display: inline-flex;
    margin-top: 10px;
    padding: 9px 15px;
    font-size: 14px;
  }

  .form__line-icon {
    width: 20px;
    height: 20px;
  }

  .form__or {
    margin-top: 20px;
    gap: 12px;
    font-size: 13px;
  }

  .form__box .form__body {
    margin-top: 16px;
  }

  .form__inner>.fig-bubble--form::before {
    left: auto;
    right: 34px;
    margin: 0;
  }

  .form__title {
    text-align: left;
    font-size: min(26px,6.6vw);
    padding-right: 104px;
  }

  .form__box {
    margin-top: 20px;
    border-radius: 18px;
    padding: 30px 18px 36px;
  }

  .form__label--required::before {
    font-size: 10px;
    padding: 3px 6px;
  }

  .form__file {
    gap: 6px;
  }

  .form__file input[type="file"] {
    padding: 10px 8px;
    font-size: 12px;
  }

  .form__file .mwform-file-delete {
    font-size: 16px;
    flex: none;
  }

  .form__line {
    padding: 16px 15px 18px;
    margin-top: 76px;
  }

  .form__inner>.fig-pose--form {
    position: absolute;
    margin: 0;
    top: 28px;
    right: 10px;
    height: 160px;
  }

  .form__inner>.fig-bubble--form {
    position: absolute;
    margin: 0;
    font-size: 12px;
    padding: 6px 12px;
    display: block;
    top: 70px;
    right: 116px;
    z-index: 4;
  }

  .form__line-title,
  .form__line-text {
    padding-right: 70px;
  }
}

@media (min-width: 768px) {
  /* 共通パーツ（ボタン・吹き出し・背景の飾り・表示アニメーション） */
  .hero7,
  .header__inner {
    zoom: var(--hz,1);
  }

  .sp-only {
    display: none;
  }

  /* ヘッダー */
  .header__inner {
    padding-left: max(calc(50% - 690px),clamp(32px,calc(64px - (100vw - 1200px) * .1333),64px));
    padding-right: max(32px,calc(50% - 690px));
  }

  /* ファーストビュー */
  .hero7__secbar span:last-child {
    font-size: 12px;
  }

  .hero7__badges li {
    font-size: 15.5px;
    gap: 8px;
    padding: 0 6px;
  }

  .hero7__badges svg {
    height: 36px;
  }

  .hero7__slide.is-active {
    opacity: 1;
    visibility: visible;
  }

  .hero7__slide[data-slide="1"]:not(.is-active) {
    opacity: 0;
    visibility: hidden;
  }

  .hero7__inner {
    display: block;
    padding-left: max(calc(50% - 690px),clamp(32px,calc(64px - (100vw - 1200px) * .1333),64px));
    padding-bottom: 40px;
    min-height: 700px;
  }

  .hero7 {
    min-height: 700px;
  }

  .hero7__body {
    padding-top: 30px;
    width: 600px;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    zoom: 1.08;
  }

  .hero7__title,
  .hero7__lead,
  .hero7__cta,
  .hero7__badges,
  .hero7__secbar {
    order: 0;
  }

  .hero7__badges {
    grid-template-columns: 186px 218px 176px;
    gap: 10px;
    margin-top: 17px;
  }

  .hero7__secbar {
    margin-top: 0;
    margin-bottom: 54px;
  }

  .hero7__cta {
    margin-left: 40px;
    width: 520px;
    max-width: none;
    align-self: auto;
    margin-top: auto;
  }

  .ha-visual {
    position: absolute;
    right: max(32px,calc(50% - 690px));
    bottom: 40px;
    width: clamp(648px,45vw,710px);
    max-width: none;
    margin: 0;
    aspect-ratio: 720/660;
  }

  .hero7__tag {
    top: -26px;
    font-size: 18px;
  }

  .ha-circle {
    left: calc(var(--p)*130);
    top: calc(var(--p)*50);
  }

  .ha-pose[data-w="270"] .ha-mamoru {
    left: calc(var(--p)*162);
  }

  .ha-pose[data-w="334"] .ha-mamoru {
    left: calc(var(--p)*130);
  }

  .ha-pose[data-w="360"] .ha-mamoru {
    left: calc(var(--p)*117);
  }

  .ha-pose .ha-mamoru {
    bottom: calc(var(--p)*50);
    height: calc(var(--p)*566);
    transform: scale(var(--mk,1));
    transform-origin: 50% 100%;
  }

  .ha-bubble {
    left: calc(var(--p)*370);
    top: calc(var(--p)*20);
  }

  .ha-medal {
    transform: translate(calc(var(--p) * (1 - var(--mk,1)) * 120),calc(var(--p) * (1 - var(--mk,1)) * 70)) scale(calc(1 - (var(--mk,1) - 1) * .45));
    transform-origin: 0 0;
    left: calc(var(--p)*16);
    top: calc(var(--p)*16);
    height: calc(var(--p)*204);
  }

  .ha-old {
    left: calc(var(--p)*466);
    top: calc(var(--p)*296);
    width: calc(var(--p)*254);
  }

  .ha-arrow {
    left: calc(var(--p)*560);
    top: calc(var(--p)*352);
    width: calc(var(--p)*44);
    height: calc(var(--p)*44);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><path d='M14 2h16v18h10L22 40 4 20h10z' fill='%23ffe53d' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/></svg>") no-repeat center/contain;
    filter: drop-shadow(0 calc(var(--p)*3) calc(var(--p)*5) rgba(7,24,63,.4));
  }

  .ha-new {
    left: calc(var(--p)*396);
    top: calc(var(--p)*404);
    width: calc(var(--p)*324);
  }

  .ha-banner {
    left: calc(var(--p)*110);
    top: auto;
    bottom: 0;
    width: calc(var(--p)*500);
    height: calc(var(--p)*136);
  }

  .ha-banner::before {
    top: calc(var(--p)*34);
  }

  .ha-banner__top span {
    font-size: calc(var(--p)*32);
  }

  .ha-banner__sub {
    font-size: calc(var(--p)*30);
    bottom: calc(var(--p)*12);
  }

  .ha-burst--l {
    left: calc(var(--p)*116);
  }

  .ha-burst--r {
    right: calc(var(--p)*116);
  }

  .ha-burst {
    bottom: calc(var(--p)*4);
  }

  /* お悩み */
  .concerns {
    padding-top: 24px;
  }

  .concerns__img {
    flex: 0 0 clamp(200px,33%,350px);
    max-width: 350px;
  }

  .concerns__inner {
    gap: 20px;
  }

  .concerns__body {
    min-width: 0;
    flex: 1 1 auto;
  }

  .concerns__title {
    padding: 0;
  }

  /* 選ばれる3つの理由 */
  .reasons__list {
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    max-width: 1000px;
  }

  .reasons__item {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
  }

  .reasons__item-image {
    flex: none;
  }

  .reasons__item-body {
    padding: 0 14px 18px;
  }

  .reasons__item-number {
    font-size: 16px;
  }

  .reasons__item-title {
    font-size: 14px;
    margin-top: 6px;
  }

  .reasons__item-text {
    font-size: 12.5px;
  }

  .reasons__points {
    gap: 6px;
  }

  .reasons__point {
    font-size: 11.5px;
    padding: 6px 8px;
  }

  /* 管理画面（アプリ） */
  html.js-anim .adash__say.anim-bubble {
    transform-origin: 50% 100%;
  }

  .adash {
    padding: 64px 0 72px;
  }

  .adash__inner {
    padding: 0 24px;
  }

  .adash__kicker {
    padding: 9px 32px;
    font-size: 20px;
  }

  .adash__title {
    margin-top: 22px;
    font-size: 44px;
  }

  .adash__lead {
    margin-top: 14px;
    text-align: center;
    font-size: 20px;
  }

  .adash__lead .pc-br {
    display: inline;
  }

  .adash__stage {
    --p: calc(100cqw / 1000);
    display: flex;
    align-items: stretch;
    margin-top: calc(var(--p)*50);
    padding-bottom: calc(var(--p)*10);
  }

  .adash__app {
    flex: none;
    width: calc(var(--p)*668);
    border-radius: calc(var(--p)*18);
    font-size: calc(var(--p)*15);
  }

  .ad-bar {
    height: calc(var(--p)*34);
    padding: 0 calc(var(--p)*18);
  }

  .ad-bar i {
    width: calc(var(--p)*12);
    height: calc(var(--p)*12);
  }

  .ad-head {
    padding: calc(var(--p)*14) calc(var(--p)*24) 0;
  }

  .ad-logo small {
    font-size: calc(var(--p)*11);
  }

  .ad-logo img {
    height: calc(var(--p)*34);
  }

  .ad-head__tool,
  .ad-head__co {
    font-size: calc(var(--p)*14);
  }

  .ad-nav {
    gap: calc(var(--p)*26);
    margin-top: calc(var(--p)*10);
    font-size: calc(var(--p)*15);
    mask-image: none;
  }

  .ad-nav li {
    padding: calc(var(--p)*8) 0 calc(var(--p)*10);
  }

  .ad-nav em {
    min-width: calc(var(--p)*19);
    height: calc(var(--p)*19);
    font-size: calc(var(--p)*12);
  }

  .ad-main {
    padding: calc(var(--p)*22) calc(var(--p)*24) calc(var(--p)*26);
  }

  .ad-title {
    font-size: calc(var(--p)*22);
  }

  .ad-cards {
    grid-template-columns: repeat(4,1fr);
    gap: calc(var(--p)*12);
    margin-top: calc(var(--p)*14);
  }

  .ad-card {
    padding: calc(var(--p)*14) calc(var(--p)*14);
  }

  .ad-card small {
    min-height: calc(var(--p)*12*1.3*2);
    font-size: calc(var(--p)*12);
  }

  .ad-card b {
    font-size: calc(var(--p)*27);
  }

  .ad-card .ad-ok {
    font-size: calc(var(--p)*18);
  }

  .ad-ok i {
    width: calc(var(--p)*14);
    height: calc(var(--p)*14);
  }

  .ad-list {
    margin-top: calc(var(--p)*14);
    padding: calc(var(--p)*16) calc(var(--p)*20) calc(var(--p)*6);
  }

  .ad-list__h b {
    font-size: calc(var(--p)*18);
  }

  .ad-btn {
    padding: calc(var(--p)*8) calc(var(--p)*16);
    font-size: calc(var(--p)*13);
  }

  .ad-row {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: calc(var(--p)*16);
    padding: calc(var(--p)*13) 0;
  }

  .ad-row__t {
    font-size: calc(var(--p)*15);
  }

  .ad-row__m {
    font-size: calc(var(--p)*14);
    gap: calc(var(--p)*8);
  }

  .ad-chip {
    padding: calc(var(--p)*3) calc(var(--p)*11);
    font-size: calc(var(--p)*12.5);
  }

  .adash__stage .ad-main {
    padding-bottom: calc(var(--p)*26);
  }

  .adash__char {
    position: relative;
    height: auto;
    flex: 1 1 auto;
    align-self: stretch;
    overflow: visible;
    border-radius: 0;
    pointer-events: auto;
  }

  .adash__char-img {
    right: calc(var(--p)*4);
    bottom: 0;
    width: auto;
    height: 82%;
  }

  .adash__say {
    right: calc(var(--p)*34);
    top: auto;
    bottom: calc(82% + var(--p)*10);
    padding: 12px 22px;
    border-radius: 18px;
    font-size: 18px;
    box-shadow: 0 8px 18px rgba(29,75,168,.18);
  }

  .adash__say::after {
    left: calc(50% - 7px);
    right: auto;
    top: auto;
    bottom: -8px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 3px 0;
  }

  .adash__feats {
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 30px;
  }

  .adash__feats li {
    justify-content: center;
    padding: 22px 18px;
  }

  .adash__fi {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .adash__fi svg {
    height: 44px;
  }

  .adash__feats b {
    font-size: 20px;
  }

  .adash__cta {
    gap: 16px;
    margin-top: 38px;
  }

  .adash__note {
    font-size: 15px;
  }

  .adash__cta .btn {
    width: auto;
    font-size: 24px;
    padding: 22px 52px;
  }

  /* 料金プラン */
  .plans__price-value {
    font-size: min(34px,2.9vw);
  }

  .plans__price {
    white-space: nowrap;
  }

  .plans__price-label:last-child {
    font-size: min(18px,1.6vw);
    margin-left: 2px;
  }

  /* オートプロジェクトについて */
  .about {
    padding-top: 24px;
  }

  .fig-pose--about {
    top: -12px;
  }

  .fig-bubble.fig-bubble--about::after {
    right: -8px;
    top: calc(50% - 7px);
    bottom: auto;
    border-width: 0;
    border-top-width: 2px;
    border-right-width: 2px;
    border-radius: 0 3px 0 0;
  }

  .fig-bubble.fig-bubble--about {
    right: calc(4% + 200px);
    top: 48px;
  }

  .about__head {
    padding-top: 64px;
    background-image: none;
  }

  .about__head::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    aspect-ratio: 1069 / 712;
    max-width: 64%;
    background: url(../images/about_heading.png) no-repeat center / 100% 100%;
    z-index: 0;
    pointer-events: none;
    mask-image: linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 78%,transparent 100%);
    mask-composite: intersect;
  }

  .about__head>.about__inner {
    position: relative;
    z-index: 1;
  }

  /* 無料査定フォーム */
  .fig-bubble--form::before {
    right: -17px;
    top: 58%;
    bottom: auto;
    margin: -11px 0 0 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 17px solid #2459b8;
  }

  .form {
    padding-top: 64px;
  }

  .form__line {
    margin-top: 20px;
  }

  .fig-bubble.fig-bubble--form::after {
    right: -8px;
    top: calc(50% - 7px);
    border-top-width: 2px;
    border-right-width: 2px;
    border-radius: 0 3px 0 0;
  }

  .form__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: left;
  }

  .form__label--required::before {
    order: 2;
    margin-right: 0;
    flex: none;
  }
}

@media (min-width: 901px) {
  /* 無料査定フォーム */
  .fig-bubble--form {
    left: calc(50% + 66px);
  }
}

@media (min-width: 1024px) {
  /* 共通パーツ（ボタン・吹き出し・背景の飾り・表示アニメーション） */
  .concerns,
  .solution,
  .estimate,
  .reasons,
  .plans,
  .agency,
  .about,
  .representative,
  .form {
    zoom: var(--sz,1);
  }

  .fig-bubble--char {
    width: 210px;
    margin-left: -105px;
    left: 50%;
    top: -72px;
  }

  /* ファーストビュー */
  .ha-arrow {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><path d='M14 2h16v18h10L22 40 4 20h10z' fill='%23f5a04a' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/></svg>");
  }

  /* お悩み */
  .concerns__inner {
    gap: 12px;
  }

  .concerns__img {
    flex: 0 0 396px;
    max-width: 396px;
  }

  /* 無料査定の流れ */
  .fig-char--estimate {
    left: calc(50% + 458px);
    right: auto;
    bottom: -60px;
    height: 440px;
  }

  /* 選ばれる3つの理由 */
  .reasons__list {
    flex-direction: column;
    gap: 26px;
    max-width: 1200px;
  }

  .reasons__item {
    flex: none;
    flex-direction: row;
  }

  .reasons__item-image {
    flex: 0 0 45%;
  }

  .reasons__item-image img {
    position: absolute;
  }

  .reasons__item-body {
    padding: 26px 36px 34px 40px;
  }

  .reasons__item-number {
    font-size: 22px;
  }

  .reasons__item-title {
    font-size: 26px;
    margin-top: 10px;
  }

  .reasons__points {
    gap: 7px;
  }

  .reasons__point {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(3em + 16px);
    font-size: 18px;
    line-height: 1.5;
    padding: 8px 20px;
    word-break: auto-phrase;
  }

  .reasons__item-text {
    font-size: 18px;
    word-break: auto-phrase;
  }

  .reasons__title-main {
    font-size: 40px;
  }

  .reasons__title-main strong {
    font-size: 84px;
  }

  .reasons__title-icon {
    width: 300px;
  }

  /* 管理画面（アプリ） */
  .adash {
    padding: 84px 0 92px;
  }

  .adash__title {
    font-size: 56px;
  }

  /* オートプロジェクトについて */
  .about__title {
    font-size: 40px;
  }

  /* 代表挨拶 */
  .representative__title {
    font-size: 40px;
  }
}

@media (min-width: 1440px) {
  /* ファーストビュー */
  .hero7__inner {
    padding-top: 70px;
    padding-bottom: 36px;
  }

  .ha-visual {
    bottom: 45px;
  }

  .ha-medal {
    height: calc(var(--p)*190);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* 共通パーツ（ボタン・吹き出し・背景の飾り・表示アニメーション） */
  .fig-bubble--char {
    left: auto;
    right: calc(100% - 28px);
    top: -12px;
    margin: 0;
    width: max-content;
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 13px;
  }

  /* 無料査定の流れ */
  .estimate__cta-row {
    margin-top: 92px;
  }

  .fig-char--estimate {
    display: block;
    left: calc(50% + 236px);
    right: auto;
    bottom: -84px;
    height: 214px;
  }

  /* 代理店・制作会社の方へ */
  .agency__panel .fig-bubble--agency {
    top: -150px;
    right: 200px;
  }

  .agency__panel .fig-bubble.fig-bubble--agency::after,
  .fig-bubble.fig-bubble--char::after {
    left: auto;
    right: -8px;
    top: calc(50% - 7px);
    bottom: auto;
    border-width: 2px 2px 0 0;
    border-radius: 0 3px 0 0;
  }

  /* オートプロジェクトについて */
  .about>.fig-pose--about {
    top: 20px;
    height: 216px;
    right: 44px;
  }

  .about>.fig-bubble--about {
    top: -36px;
    right: 40px;
  }

  .about>.fig-bubble.fig-bubble--about::after {
    right: 80px;
    top: auto;
    bottom: -8px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 3px 0;
  }

  /* 無料査定フォーム */
  .fig-pose--form {
    right: 48px;
    height: 220px;
    top: -80px;
  }

  .fig-bubble--form {
    right: 196px;
    top: -56px;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  /* 管理画面（アプリ） */
  .adash__feats {
    margin-top: 56px;
    row-gap: 44px;
  }

  .adash__feats li {
    flex-direction: column;
    gap: 10px;
    padding: 0 12px 20px;
    text-align: center;
  }

  .adash__fi {
    margin-top: -32px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #d6e3fb,0 6px 14px rgba(29,75,168,.14);
  }

  .adash__feats b {
    font-size: 18px;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 基本 */
  body::before,
  body::after {
    animation: none;
  }

  /* 共通パーツ（ボタン・吹き出し・背景の飾り・表示アニメーション） */
  .mv__mamoru,
  .solution__mamoru,
  .estimate__image--mamoru,
  .mv__medal {
    animation: none;
  }

  .dc {
    animation: none;
  }

  .dc-plus,
  .dc-ring2,
  .dc-stripe {
    animation: none;
  }

  /* ヘッダー */
  .header.is-scrolled {
    animation: none;
  }

  /* ファーストビュー */
  .bg-blue,
  .mv__mamoru {
    animation: none;
  }

  .hero7__bg::before {
    animation: none;
  }

  .h7-s {
    animation: none;
    opacity: var(--o);
  }

  .ha-pose,
  .ha-pose.is-active .ha-bubble {
    transition: none;
    animation: none;
  }

  .ha-star,
  .ha-coins {
    animation: none;
  }

  /* お悩み */
  .concern-art__q {
    animation: none;
  }

  .ha-circle {
    animation: none;
  }
}

/* アニメーション */
@keyframes shine {
	20% {
		left: 100%;
	}
	100% {
		left: 100%;
	}
}

@keyframes mamoru-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes mamoru-swing {
  0%, 100% { rotate: -8deg; }
  50% { rotate: -3deg; }
}

@keyframes cool-stripes {
  to {
    background-position: 0 0, 92px 0, 0 0;
  }
}

@keyframes cool-sweep {
  0% { left: 40%; opacity: 0; }
  20% { opacity: 1; }
  60% { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

@keyframes cool-estimate {
  to { transform: translateX(60px); }
}

@keyframes soft-blobs {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -3%, 0) scale(1.02); }
}

@keyframes soft-blobs-a {
  0%   { transform: translate3d(-6%, 4%, 0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(5%, -6%, 0) scale(1.12) rotate(4deg); }
  100% { transform: translate3d(-3%, 7%, 0) scale(1.05) rotate(-3deg); }
}

@keyframes soft-blobs-b {
  0%   { transform: translate3d(6%, -4%, 0) scale(1.08); }
  50%  { transform: translate3d(-5%, 6%, 0) scale(1); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

@keyframes mamoru-float-soft {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@keyframes loupe-swing{0%,100%{translate:0 0;rotate:0deg}25%{translate:-10px -2px;rotate:-8deg}75%{translate:10px 2px;rotate:6deg}}

@keyframes dc-float{0%,100%{translate:0 0}50%{translate:0 -12px}}

@keyframes dc-spin{to{rotate:360deg}}

@keyframes dc-sway{0%,100%{translate:0 0}50%{translate:14px 0}}

@keyframes hd-drop{from{transform:translateY(-100%)}to{transform:none}}

@keyframes medal-sway{0%,100%{translate:0 0}50%{translate:0 -7px}}

@keyframes loupe-smooth{from{translate:-9px -2px;rotate:-7deg}to{translate:9px 2px;rotate:7deg}}

@keyframes h7-streak{0%{opacity:0;translate:-46px 110px}20%{opacity:var(--o)}80%{opacity:var(--o)}100%{opacity:0;translate:46px -110px}}

@keyframes h7-lines{from{background-position:0 0}to{background-position:-108px -208px}}

@keyframes h7-streak2{0%{opacity:0;translate:-30px 60px}20%{opacity:var(--o)}80%{opacity:var(--o)}100%{opacity:0;translate:30px -60px}}

@keyframes tag-hop{0%,60%,100%{translate:0 0}70%{translate:0 -6px}80%{translate:0 0}88%{translate:0 -3px}}

@keyframes ha-float{0%,100%{translate:0 0}50%{translate:0 calc(100cqw / 120)}}

@keyframes ha-pop{from{scale:.7;opacity:0}to{scale:1;opacity:1}}

@keyframes ha-twinkle{0%,100%{opacity:.35;transform:scale(.55) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(18deg)}}

@keyframes ha-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--p)*-6))}}

@keyframes concern-sway-1{0%,100%{transform:rotate(-9deg) translateY(2%)}50%{transform:rotate(9deg) translateY(-6%)}}

@keyframes concern-sway-2{0%,100%{transform:rotate(8deg) translateY(-4%)}50%{transform:rotate(-8deg) translateY(4%)}}

/* ================= フォームのエラー表示・完了画面（MW WP Form） =================
   デザインの静的版には入力画面しかないため、旧ページ（hoshu_meijin_assets）から移した */

/* バリデーションエラー（MW WP Formが項目直後に出力する span.error） */
.form__body .error {
  display: block;
  flex-basis: 100%;
  width: 100%;
  margin-top: 6px;
  color: #e0453b;
  font-size: 14px;
  font-weight: 700;
  position: absolute;
  bottom: -7px;
  left: 240px;
}

.form__error-summary {
  max-width: 750px;
  margin: 30px auto 0;
  padding: 14px 20px;
  border: 1px solid #e0453b;
  border-radius: 8px;
  background: #fdf1f0;
  color: #e0453b;
  font-size: 15px;
  font-weight: 700;
}
.form__error-summary p + p {
  margin-top: 6px;
}

.form__complete {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}
.form__complete-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--color-blue);
}
.form__complete-lead {
  margin-top: 30px;
  font-size: 18px;
  font-weight: 500;
}
.form__complete-box {
  margin-top: 40px;
  padding: 30px 80px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-align: left;
}
.form__complete-box-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-blue-dark);
  text-align: center;
}
.form__complete-steps {
  margin-top: 20px;
  margin-bottom: 0;
  padding-left: 0;
}
.form__complete-steps li {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px dashed var(--color-border);
}
.form__complete-steps li:first-child {
  border-top: none;
}
.form__complete-step-label {
  flex: none;
  font-weight: 700;
  color: var(--color-orange);
}
.form__complete-note {
  margin-top: 30px;
  font-size: 14px;
  color: var(--color-text-sub);
}
.form__complete .btn--cta {
  margin-top: 40px;
}

@media (max-width: 767px) {
  .form__body .error {
    bottom: -10px;
    left: 0;
  }
  .form__complete-title {
    font-size: 24px;
  }
  .form__complete-lead {
    font-size: 15px;
    text-align: left;
  }
  .form__complete-lead br {
    display: none;
  }
  .form__complete-box {
    padding: 20px;
  }
  .form__complete-box-title {
    font-size: 17px;
  }
  .form__complete-steps li {
    flex-direction: column;
    gap: 2px;
    font-size: 15px;
  }
  .form__complete-note {
    text-align: left;
  }
}