:root {
  --orange: #EA580C;
  --orange-deep: #C2410C;
  --orange-bright: #FB923C;
  --orange-pale: #FFF7ED;
  --orange-light: #FFEDD5;
  --marker: #FFD9B3;
  --black: #111111;
  --card-dark: #1F1F1F;
  --white: #FFFFFF;
  --ink: #1A1A1A;
  --gray: #6B7280;
  --num: 'Archivo', sans-serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.8;
  font-size: 16px;
  padding-bottom: 75px
}
a {
  text-decoration: none;
  color: inherit
}
.rv {
  opacity: 0;
  transform: translateY(200px);
  transition: opacity .7s, transform .7s
}
.rv.on {
  opacity: 1;
  transform: none
}
@keyframes shine {
  0% {
    left: -80%
  }
  45%, 100% {
    left: 130%
  }
}
@media (prefers-reduced-motion:reduce) {
  .rv {
    opacity: 1;
    transform: none;
    transition: none
  }
  #hero .btn::after, #midcta .btn::after, #contact .btn::after, #fixbar .btn::after {
    animation: none
  }
}
.pc {
  display: block;
}
.sp {
  display: none;
}
@media (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
/* ==================== #header ==================== */
#header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #F0E6DC
}
#header .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px
}
#header .hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px
}
#header .logo {
  font-weight: 900;
  font-size: 19px
}
#header .logo span {
  color: var(--orange)
}
#header .hd-btn {
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 22px;
  border-radius: 999px
}
/* ==================== #hero ==================== */
#hero {
  background: url("../images/aio/mv.png")no-repeat 0 0;
  background-size: contain;
  aspect-ratio: 1920 / 832;
  width: 100%;
  height: auto;
  position: relative;
}
#hero .btn {
  display: inline-block;
  background: linear-gradient(180deg, var(--orange-bright), var(--orange));
  color: #fff;
  font-weight: 900;
  font-size: 1.09vw;
  padding: 20px 64px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(234, 88, 12, .45), inset 0 -4px 0 rgba(0, 0, 0, .15);
  overflow: hidden;
  transition: transform .15s;
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
#hero .btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  animation: shine 2.8s infinite
}
#hero .btn .ar {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
    height: 0;
    border-style: solid;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #ffffff;
    border-right: 0;
}
@media (max-width: 1080px) {
	#hero {
  background: url("../images/aio/mv_tb.png")no-repeat 0 0;
  background-size: contain;
  aspect-ratio: 1080 / 615;
  width: 100%;
  height: auto;
  position: relative;
}
	#hero .btn {
		    font-size: 1.85vw;
    padding: 12px 64px;
	}
}
@media (max-width: 768px) {
  #hero {
    background: url("../images/aio/mv_sp.png")no-repeat 0 0;
    background-size: contain;
    aspect-ratio: 375 / 715;
    width: 100%;
    height: auto;
  }
  #hero .btn {
    display: inline-block;
    padding: 10px 10px;
    bottom: 4%;
    left: 50%;
    width: 80%;
    font-size: 18px;
  }
}
/* ==================== #problem==================== */
#problem {
  background: #FFFBF5;
  padding: 76px 0 88px
}
#problem .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px
}
#problem .center {
  text-align: center
}
#problem h2 {
  font-weight: 900;
  font-size: 42px;
  line-height: 1.4;
  margin-bottom: 16px
}
#problem .yell {
  font-weight: 700;
  font-size: 21px;
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px
}
#problem .yell::before, #problem .yell::after {
  content: "";
  width: 2px;
  height: 1.3em;
  background: var(--orange)
}
#problem .yell::before {
  transform: rotate(-28deg)
}
#problem .yell::after {
  transform: rotate(28deg)
}
#problem .pain-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 36px
}
#problem .pain-item {
  background: #fff;
  border-radius: 14px;
  padding: 20px 24px 20px 55px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
  font-weight: 700;
  font-size: 22px;
  line-height: 32px;
  color: #4C4C4C;
  position: relative;
}
#problem .pain-item::before {
  content: "";
  background: url("../images/aio/check-icon.svg")no-repeat 0 0;
  background-size: contain;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 24px;
  left: 24px;
}
#problem .pain-item span {
  color: #EA580C;
}
#problem .pain-arrow {
  display: inline-block;
  max-width: 400px;
  width: 100%;
  height: 100px;
  background: linear-gradient(0deg, #ff6d21 0%, #fffbf5 100%);
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  position: relative;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}
#problem .pain-close {
  text-align: center;
  margin-top: 30px;
  font-weight: 900;
  font-size: clamp(20px, 3.2vw, 30px);
  line-height: 1.6
}
#problem .mk {
  background: linear-gradient(transparent 62%, var(--marker) 62%);
  padding: 0 2px
}
#problem .or {
  color: var(--orange);
  font-size: 45px;
}
@media (max-width: 768px) {
  #problem h2 {
    font-size: 34px;
  }
  #problem .pain-arrow {
    height: 60px;
  }
  #problem .or {
    color: var(--orange);
    font-size: 28px;
  }
	#problem .pain-item {
		font-size: 20px;
    line-height: 28px;
	}
}
/* ==================== #about==================== */
#about {
  padding: 88px 0
}
#about .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px
}
#about .center {
  text-align: center
}
#about h2 {
  font-weight: 900;
  font-size: 49px;
  line-height: 1.4;
  margin-bottom: 50px
}
#about .lead {
  color: #6E6E6E;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
}
#about .or {
  color: var(--orange)
}
#about .yell {
  font-weight: 700;
  font-size: 27px;
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px
}
#about .yell::before, #about .yell::after {
  content: "";
  width: 2px;
  height: 1.3em;
  background: var(--orange)
}
#about .yell::before {
  transform: rotate(-28deg)
}
#about .yell::after {
  transform: rotate(28deg)
}
#about .cards3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px
}
#about .def-card {
  background: #fff;
  border: 2px solid var(--orange-light);
  border-radius: 18px;
  padding: 20px 26px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .05)
}
#about .def-tag {
  font-family: var(--num);
  font-weight: 900;
  font-size: 43px;
  color: var(--orange)
}
#about .def-jp {
  font-size: 15px;
  color: var(--gray);
  margin-bottom: 14px;
  font-weight: 700
}
#about .def-card p {
  font-size: 16px;
  text-align: left
}
#about .pyramid {
  margin: 52px auto 0;
  width: 100%;
}
#about .pyramid img {
  width: 100%;
  margin: 0 auto;
}
#about .pyramid p {
  color: black;
  font-size: 27px;
  font-family: Noto Sans JP;
  font-weight: 400;
  line-height: 45px;
  text-align: center;
  margin-top: 20px;
}
#about .pyramid p span {
  color: #EA580C;
  font-size: 32px;
  font-weight: 700;
  line-height: 45px;
}
@media (max-width: 768px) {
  #about .yell {
    font-size: 20px;
  }
  #about .yell::before, #about .yell::after {
    height: 1em;
  }
  #about h2 {
    font-size: 30px;
  }
  #about .lead {
    text-align: left;
	      font-size: 16px;
  }
  #about .def-tag {
    font-size: 36px;
  }
  #about .pyramid p {
    font-size: 20px;
    text-align: left;
    line-height: 30px;
  }
  #about .pyramid p span {
    font-size: 23px;
        line-height: 30px;
  }
}
/* ==================== #why==================== */
#why {
  background: #262626;
  color: #fff;
  padding: 88px 0
}
#why .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px
}
#why .center {
  text-align: center
}
#why h2 {
  font-weight: 900;
  font-size: 42px;
  line-height: 1.4;
  margin-bottom: 16px;
  color: #fff
}
#why h2 span {
  color: #FF610F;
  font-size: 53px;
  font-weight: 900;
}
#why .lead {
  color: #DEDEDE;
  font-size: 18px;
}
#why .yell {
  font-weight: 700;
  font-size: 24px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px
}
#why .yell::before, #why .yell::after {
  content: "";
  width: 2px;
  height: 1.3em;
  background: #fff
}
#why .yell::before {
  transform: rotate(-28deg)
}
#why .yell::after {
  transform: rotate(28deg)
}
#why .why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 42px
}
#why .why-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  border: 2px solid #EA580C;
}
#why .why-card h3 {
  color: #000000;
  margin-bottom: 15px;
  font-size: 25px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.50px;
  display: flex;
  align-items: center;
  gap: 12px;
}
#why .why-num {
  font-family: var(--num);
  font-weight: 900;
  color: var(--orange-bright);
  font-size: 24px
}
#why .why-card p {
  color: #3B3B3B;
  line-height: 24px;
}
@media (max-width: 768px) {
  #why .yell {
    font-size: 20px;
  }
  #why h2 {
    font-size: 32px;
  }
  #why h2 span {
    font-size: 42px;
  }
  #why .why-card h3 {
    font-size: 22px;
    align-items: flex-start;
  }
  #why .why-num {
    font-size: 20px;
	  margin-bottom: 5px;
  }
	#why .yell::before, #why .yell::after {
		height: 1em;
	}
	#why .lead {
    font-size: 17px;
}
}
/* ==================== #midcta==================== */
#midcta {
  background: linear-gradient(135deg, #FF9A3B 0%, #EF5C20 100%);
  color: #fff;
  text-align: center;
  padding: 64px 0
}
#midcta .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px
}
#midcta h2 {
  font-weight: 900;
  font-size: 43px;
  line-height: 1.4;
  margin-bottom: 16px;
  color: #fff
}
#midcta .yell {
  font-weight: 700;
  font-size: 21px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px
}
#midcta .yell::before, #midcta .yell::after {
  content: "";
  width: 2px;
  height: 1.3em;
  background: #fff
}
#midcta .yell::before {
  transform: rotate(-28deg)
}
#midcta .yell::after {
  transform: rotate(28deg)
}
#midcta .btn {
  position: relative;
  display: inline-block;
  background: #fff;
  color: var(--orange);
  font-weight: 900;
  font-size: 24px;
  padding: 20px 64px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3), inset 0 -4px 0 rgba(0, 0, 0, .08);
  overflow: hidden;
  transition: transform .15s;
  margin-top: 8px
}
#midcta .btn:hover {
  transform: translateY(-2px) scale(1.02)
}
#midcta .btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  animation: shine 2.8s infinite
}
#midcta .btn .ar {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
      width: 0;
    height: 0;
    border-style: solid;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #ea580c;
    border-right: 0;
}
@media (max-width: 768px) {
  #midcta h2 {
    font-size: 32px;
  }
  #midcta .btn {
    padding: 15px 15px;
    font-size: 20px;
    width: 100%;
  }
	#midcta .yell {
		    font-size: 19px;
	}
}
/* ==================== #service==================== */
#service {
  padding: 88px 0
}
#service .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px
}
#service .center {
  text-align: center
}
#service h2 {
  font-weight: 900;
  font-size: 49px;
  line-height: 1.4;
  margin-bottom: 16px
}
#service .lead {
  font-size: 20px;
  color: #484848;
}
#service .lead .or {
  color: var(--orange)
}
#service .yell {
  font-weight: 700;
  font-size: 24px;
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px
}
#service .yell::before, #service .yell::after {
  content: "";
  width: 2px;
  height: 1.3em;
  background: var(--orange)
}
#service .yell::before {
  transform: rotate(-28deg)
}
#service .yell::after {
  transform: rotate(28deg)
}
#service .svc-block {
  margin-top: 48px
}
#service .svc-label {
  display: inline-block;
  background: var(--black);
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  padding: 7px 20px;
  border-radius: 6px;
  margin-bottom: 18px
}
#service .svc-label.orb {
  background: var(--orange)
}
#service .svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}
#service .svc-grid.g2 {
  grid-template-columns: repeat(2, 1fr)
}
#service .svc-card {
  background: #FFF7ED;
  border-radius: 10px;
  padding: 26px;
  border: 2px solid #6C6C6C;
}
#service .svc-card h4 {
  color: #EE5100;
  font-size: 24.50px;
  font-weight: 700;
  line-height: 29.70px;
  margin-bottom: 10px
}
#service .svc-card ul {
  list-style: none;
}
#service .svc-card li {
  position: relative;
  margin-bottom: 6px;
  text-indent: 0em;
  padding-left: 1em;
}
#service .svc-card li::before {
  content: "";
  background: var(--orange);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  top: 12px;
  display: inline-block;
  position: absolute;
  top: 12px;
  left: 0;
}
#service .svc-card p {
  color: #313131;
  line-height: 25px;
}
#service .svc-foot {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink)
}
#service .svc-foot span {
  display: inline-block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--gray);
  margin-left: 6px
}
@media (max-width: 768px) {
  #service .yell {
    font-size: 21px;
  }
  #service h2 {
    font-size: 37px;
  }
  #service .svc-label {
    font-size: 19px;
    padding: 2px 20px;
  }
  #service .svc-card {
    padding: 20px;
  }
  #service .svc-card h4 {
    font-size: 22px;
  }
	#service .lead {
		font-size: 18px;
    line-height: 27px;
	}
}
/* ==================== #results==================== */
#results {
  background: var(--orange-pale);
  padding: 88px 0
}
#results .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px
}
#results .center {
  text-align: center
}
#results h2 {
  font-weight: 900;
  font-size: 44px;
  line-height: 1.4;
  margin-bottom: 16px
}
#results .lead {
  color: #404040;
  font-size: 18px;
}
#results .yell {
  font-weight: 700;
  font-size: 22px;
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px
}
#results .yell::before, #results .yell::after {
  content: "";
  width: 2px;
  height: 1.3em;
  background: var(--orange)
}
#results .yell::before {
  transform: rotate(-28deg)
}
#results .yell::after {
  transform: rotate(28deg)
}
#results .res-sub {
  text-align: center;
  font-weight: 900;
  font-size: 38px;
  color: var(--orange);
  margin: 44px 0 26px
}
#results .res-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start
}
#results .rv.on {
  width: 50%;
}
#results .res-h {
  font-weight: 900;
  font-size: 25px;
  margin-bottom: 16px;
  border-left: 3px solid var(--orange);
  padding-left: 14px
}
#results .rank {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border-radius: 12px;
  padding: 13px 20px;
  margin-bottom: 9px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06)
}
#results .rank:not(:nth-child(2)) {
  width: 90%;
}
#results .rank.first {
  background: var(--orange);
  color: #fff;
  transform: scale(1.03);
  box-shadow: 0 8px 22px rgba(234, 88, 12, .4);
  width: 95%;
}
#results .rank-num {
  font-family: var(--num);
  font-weight: 900;
  font-size: 25px;
  color: var(--orange);
  min-width: 62px
}
#results .rank.first .rank-num {
  color: #fff;
  font-size: 29px
}
#results .rank.first .rank-kw {
  font-weight: 700;
  font-size: 27px;
}
#results .rank-kw:not(:first-child) {
  font-size: 19px;
  font-weight: 700;
}
#results .res-note {
  font-size: 12px;
  color: var(--gray);
  margin-top: 10px
}
#results .res-note.center {
      text-align: center;
    margin: 20px 0 50px;
}
#results .chart-card {
  background: #fff;
  border: 1px solid var(--orange-light);
  border-radius: 16px;
  padding: 24px 24px 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06)
}
#results .chart-card img {
  width: 100%;
}
#results .ai-proof {
  margin-top: 80px;
  width: 100% !important;
  border-bottom: 1px solid #F6DDCF;
  padding-bottom: 60px;
  margin-bottom: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#results .ai-proof .txt-area {
  width: 38.53%;
}
#results .ai-proof .kakunin {
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 5px;
}
#results .ai-proof .goku {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
}
#results .ai-proof .img-area {
  width: 59.16%;
}
#results .ai-proof .img-area img {
  width: 100%;
}
#results .cases2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
#results .case {
  background: #fff;
  border-radius: 16px;
  padding: 26px 28px;
  margin-bottom: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
  border: 2px solid var(--orange-light);
  width: 100% !important;
}
#results .case-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
#results .case-name {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 22px;
}
#results .case-period {
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  background: var(--orange-light);
  border-radius: 999px;
  padding: 4px 14px;
}
#results .ba {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
#results .ba .before {
  font-family: var(--num);
  font-weight: 700;
  font-size: 22px;
  color: var(--gray);
}
#results .ba .arrow {
  color: var(--orange);
  font-weight: 900;
  font-size: 26px;
}
#results .ba .after {
  font-family: var(--num);
  font-weight: 900;
  font-size: 38px;
  color: var(--orange);
  line-height: 1;
}
#results .ba .after.text-type {
	    font-size: 25px;
    line-height: 37px;
}
#results .txt-s {
    font-size: 13px;
    line-height: 23px;
}
#results .ba .after small {
  font-size: 15px;
  font-family: var(--body);
  font-weight: 700;
  color: var(--ink);
}
#results .ba .mult {
  margin-left: auto;
  background: var(--orange);
  color: #fff;
  border-radius: 12px;
  padding: 8px 18px;
  font-family: var(--num);
  font-weight: 900;
  font-size: 26px;
  box-shadow: 0 6px 16px rgba(234, 88, 12, #results .35);
}
#results .ba .mult small {
  font-size: 14px;
  font-family: var(--disp);
}
#results .res-note {
  font-size: 12px;
  color: var(--gray);
  margin-top: 10px;
}
@media (max-width: 768px) {
  #results .yell {
    font-size: 20px;
  }
  #results h2 {
    font-size: 37px;
  }
  #results .res-sub {
    font-size: 30px;
  }
  #results .rv.on {
    width: 100%;
  }
  #results .rv.on:first-child {
    margin-bottom: 50px;
  }
  #results .res-h {
    font-size: 20px;
  }
  #results .rank.first .rank-kw {
    font-size: 22px;
  }
  #results .rank-kw:not(:first-child) {
    font-size: 17px;
  }
  #results .rank.first .rank-num {
    font-size: 24px;
  }
  #results .rank {
    padding: 8px 20px;
    gap: 0px;
  }
  #results .rank-num {
    font-size: 22px;
  }
  #results .rank.first {
    width: 100%;
  }
  #results .rank:not(:nth-child(2)) {
    width: 95%;
  }
  #results .ai-proof {
    margin-top: 50px;
    display: block;
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
  #results .ai-proof .txt-area {
    width: 100%;
  }
  #results .ai-proof .img-area {
    width: 100%;
    margin-top: 5px;
  }
  #results .ai-proof .kakunin {
    font-size: 19px;
  }
  #results .ai-proof .goku {
    font-size: 17px;
  }
  #results .ba .mult {
    margin-left: inherit;
  }
  #results .case {
    margin-bottom: 0 !important;
  }
}
/* ==================== #process==================== */
#process {
  padding: 88px 0
}
#process .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px
}
#process .center {
  text-align: center
}
#process h2 {
  font-weight: 900;
  font-size: 42px;
  line-height: 1.4;
  margin-bottom: 16px
}
#process .lead {
  color: #414141;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}
#process .yell {
  font-weight: 700;
  font-size: 23px;
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px
}
#process .yell::before, #process .yell::after {
  content: "";
  width: 2px;
  height: 1.3em;
  background: var(--orange)
}
#process .yell::before {
  transform: rotate(-28deg)
}
#process .yell::after {
  transform: rotate(28deg)
}
#process .steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 44px
}
#process .step {
  background: var(--orange-pale);
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  position: relative
}
#process .step-no {
  color: #EA580C;
  font-size: 16px;
  font-weight: 900;
  line-height: 23.40px;
}
#process .step h4 {
  color: #1A1A1A;
  font-size: 24px;
  font-weight: 700;
  line-height: 34.20px;
  letter-spacing: 1.20px;
  margin-bottom: 15px;
}
#process .step p {
  color: #3B3B3B;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.30px;
}
#process .step:not(:last-child)::after {
  content: "▶";
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--orange);
  font-size: 13px
}
@media (max-width: 768px) {
  #process .yell {
    font-size: 21px;
  }
  #process h2 {
    font-size: 37px;
	      margin-bottom: 25px;
  }
  #process .step {
    padding: 20px 15px;
  }
  #process .step-no {
    font-size: 14px;
  }
  #process .step h4 {
    font-size: 20px;
  }
	#process .step p {
    text-align: left;
    font-size: 15px;
	}
	#process .lead {
		    font-size: 16px;
    text-align: left;
	}
	#process .steps {
		    margin-top: 25px;
	}
}
/* ==================== #pricing==================== */
#pricing {
  background: var(--black) radial-gradient(circle at 15% 90%, rgba(234, 88, 12, .3), transparent 45%);
  color: #fff;
  padding: 88px 0
}
#pricing .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px
}
#pricing .center {
  text-align: center
}
#pricing h2 {
  font-weight: 900;
  font-size: 42px;
  line-height: 1.4;
  margin-bottom: 16px;
  color: #fff
}
#pricing .lead {
  color: #E0E0E0;
  font-size: 18px;
}
#pricing .yell {
  font-weight: 700;
  font-size: 21px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px
}
#pricing .yell::before, #pricing .yell::after {
  content: "";
  width: 2px;
  height: 1.3em;
  background: #fff
}
#pricing .yell::before {
  transform: rotate(-28deg)
}
#pricing .yell::after {
  transform: rotate(28deg)
}
#pricing .plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 80px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  align-items: stretch
}
#pricing .plan {
  background: #fff;
  color: var(--ink);
  border-radius: 22px;
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45)
}
#pricing .plan-head {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 20px;
  font-weight: 900;
  font-size: 34px;
  border-radius: 22px 22px 0 0
}
#pricing .plan.rec .plan-head {
  background: var(--orange)
}
#pricing .plan.rec {
  transform: scale(1.05);
  border: 3px solid var(--orange);
  z-index: 1
}
#pricing .ribbon {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #EA580C;
  font-size: 20px;
  font-weight: 900;
  line-height: 25.20px;
  letter-spacing: 1.60px;
  padding: 7px 28px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
#pricing .plan-price {
  text-align: center;
  padding: 28px 20px 8px
}
#pricing .plan-price .l {
  color: #313131;
  font-size: 20px;
  font-weight: 700;
}
#pricing .plan-price .v {
  color: #EA580C;
  font-size: 72px;
  font-family: Barlow;
  font-weight: 700;
  line-height: 67.20px;
}
#pricing .plan-price .v small {
  color: #1A1A1A;
  font-size: 27px;
  font-weight: 900;
  line-height: 23.10px;
}
#pricing .plan-price .u {
  font-size: 13px;
  color: var(--gray);
  font-weight: normal;
}
#pricing .plan-body {
  padding: 0 35px 25px;
  flex: 1
}
#pricing .plan-body li {
  list-style: none;
  font-size: 15.5px;
  font-weight: 700;
  padding: 12px 0 12px 2.1em;
  position: relative;
  border-bottom: 1px dashed #EDE4DA
}
#pricing .plan-body li::before {
  content: "";
  background: url("../images/aio/check-icon.svg")no-repeat 0 0;
  background-size: contain;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 16px;
  left: 0;
}
#pricing .plan-body li span.comment {
  display: block;
  color: #1A1A1A;
  font-size: 14.50px;
  font-weight: 400;
  line-height: 21.90px;
}
#pricing .plan-body li span.kome {
  font-size: 12px;
}
#pricing .plan-body li.plus {
  color: var(--orange)
}
#pricing .plan-fit {
  margin: 0 34px 30px;
  background: var(--orange-pale);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 13.5px
}
#pricing .plan-fit b {
  color: var(--orange)
}
#pricing .plans-note {
  text-align: center;
  color: #fff;
  font-size: 13px;
  margin-top: 30px
}
@media (max-width: 768px) {
  #pricing .plans {
    margin-top: 60px;
  }
  #pricing .yell {
    font-size: 19px;
  }
  #pricing h2 {
    font-size: 37px;
  }
  #pricing .plan-head {
    font-size: 29px;
  }
}
/* ==================== #faq==================== */
#faq {
  padding: 88px 0
}
#faq .wrap {
  max-width: 990px;
  width: 100%;
  margin: 0 auto;
}
#faq .center {
  text-align: center
}
#faq h2 {
  font-weight: 900;
  font-size: 42px;
  line-height: 1.4;
  margin-bottom: 16px
}
#faq .yell {
  font-weight: 700;
  font-size: 23px;
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px
}
#faq .yell::before, #faq .yell::after {
  content: "";
  width: 2px;
  height: 1.3em;
  background: var(--orange)
}
#faq .yell::before {
  transform: rotate(-28deg)
}
#faq .yell::after {
  transform: rotate(28deg)
}
#faq .faq-item {
  border-bottom: 1px solid #EDE4DA;
  padding: 20px 4px
}
#faq .faq-item summary {
  font-weight: 700;
  font-size: 19px;
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 14px;
  align-items: baseline
}
#faq .faq-item summary::before {
  content: "Q";
  font-family: var(--num);
  font-weight: 900;
  color: #fff;
  background: var(--orange);
  border-radius: 6px;
  padding: 1px 9px;
  font-size: 14px
}
#faq .faq-a {
  margin-top: 12px;
  padding-left: 2.4em;
  color: #282828;
  font-size: 14.5px
}
@media (max-width: 768px) {
  #faq .yell {
    font-size: 19px;
	  margin-bottom: 1px;
  }
  #faq h2 {
    font-size: 35px;
  }
  #faq .wrap {
    padding: 0 15px;
  }
	#faq .yell::before, #faq .yell::after {
    height: 1em;
	}
	#faq .faq-item summary {
		font-size: 17px;
    line-height: 27px;
		    gap: 9px;
	}
	#faq .faq-item summary::before {
		padding: 1px 7px;
	}
}
/* ==================== #contact==================== */
#contact {
  background: linear-gradient(135deg, #FF9A3B 0%, #EF5C20 100%);
  color: #fff;
  text-align: center;
  padding: 80px 0
}
#contact .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px
}
#contact h2 {
  font-weight: 900;
  font-size: 45px;
  line-height: 1.4;
  margin-bottom: 16px;
  color: #fff
}
#contact p {
  color: #FFFEFD;
  font-size: 18px;
  font-weight: 500;
  line-height: 28.80px;
  margin-bottom: 20px;
}
#contact .yell {
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px
}
#contact .yell::before, #contact .yell::after {
  content: "";
  width: 2px;
  height: 1.3em;
  background: #fff
}
#contact .yell::before {
  transform: rotate(-28deg)
}
#contact .yell::after {
  transform: rotate(28deg)
}
#contact .btn {
  position: relative;
  display: inline-block;
  background: #fff;
  color: var(--orange);
  font-weight: 900;
  font-size: 27px;
  padding: 20px 64px;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35), inset 0 -4px 0 rgba(0, 0, 0, .08);
  overflow: hidden;
  transition: transform .15s
}
#contact .btn:hover {
  transform: translateY(-2px) scale(1.02)
}
#contact .btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  animation: shine 2.8s infinite
}
#contact .btn .ar {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--num)
}
#contact .step3 {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap
}
#contact .s3 {
  background: rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 13.5px;
  font-weight: 700
}
#contact .s3 b {
  font-family: var(--num);
  margin-right: 6px
}
@media (max-width: 768px) {
	#contact {
        padding: 45px 0;
    }
	#contact .yell {
		font-size: 18px;
	}
	#contact .yell::before, #contact .yell::after {;
    height: 1em;
	}
	#contact h2 {
    font-size: 34px;
		    margin-bottom: 30px;
	}
	#contact p {
    color: #FFFEFD;
    font-size: 16px;
    line-height: 26px;
    text-align: left;
	}
	#contact .btn {
		padding: 10px;
		width: 100%;
		font-size: 20px;
	}
}
/* ==================== #footer ==================== */
#footer {
  background: var(--black);
  color: #9CA3AF;
  font-size: 13px;
  padding: 26px 0;
  text-align: center
}
#footer .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px
}
#footer b {
  color: #fff;
  font-family: var(--disp)
}
/* ==================== #fixbar�E�追従CTA�E�E==================== */
#fixbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(17, 17, 17, .96);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .3)
}
#fixbar .t {
  color: #fff;
  font-weight: 700;
  font-size: 14px
}
#fixbar .t b {
  color: var(--orange-bright)
}
#fixbar .btn {
  position: relative;
  display: inline-block;
  background: linear-gradient(180deg, var(--orange-bright), var(--orange));
  color: #fff;
  font-weight: 900;
  padding: 12px 36px;
  font-size: 15px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(234, 88, 12, .45), inset 0 -4px 0 rgba(0, 0, 0, .15);
  transition: transform .15s
}
#fixbar .btn:hover {
  transform: translateY(-2px) scale(1.02)
}
/* ==================== ==================== */
@media (max-width:860px) {
  #hero {
    padding: 70px 0 72px
  }
  #problem, #about, #why, #service, #results, #process, #pricing, #faq {
    padding: 60px 0
  }
  #contact {
    padding: 72px 0
  }
  #midcta {
    padding: 52px 0
  }
  #problem .pain-list {
    grid-template-columns: 1fr
  }
  #about .cards3 {
    grid-template-columns: 1fr
  }
  #why .why-grid {
    grid-template-columns: 1fr
  }
  #service .svc-grid, #service .svc-grid.g2 {
    grid-template-columns: 1fr
  }
  #results .res-grid, #results .cases2 {
    grid-template-columns: 1fr
  }
  #pricing .plans {
    grid-template-columns: 1fr;
    gap: 40px
  }
  #pricing .plan.rec {
    transform: none
  }
  #process .steps {
    grid-template-columns: repeat(2, 1fr)
  }
  #process .step::after {
    display: none
  }
  #hero .hero-badges {
    flex-wrap: wrap;
    gap: 12px
  }
  #hero .hbadge {
    width: 108px;
    height: 108px
  }
  #hero .hbadge .v {
    font-size: 24px
  }
  #fixbar .t {
    display: none
  }
}
#pagetop {
  position: fixed;
  bottom: 110px;
  right: 20px;
  z-index: 10;
	width: 82px;
	height: 82px;
}
#pagetop  img {
	width: 100%;
}
@media (max-width: 768px) {
	#pagetop {
    position: fixed;
    bottom: 40px;
    right: -10px;
    z-index: 10;
  }
  #pagetop img {
    width: 40px;
  }
}