@charset "utf-8";

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
  --text-color: #343F41;
  --primary-color: #009DFF;
  --secondary-color: #FFBC56;
  --background-color: #F5FBFF;
  --gradient-color: linear-gradient(#009DFF, #00C493);
  --border-color: #002946;
  --box-shadow: 0 4px 20px rgba(0 0 0 / 10%);
  --easing: cubic-bezier(0.33, 1, 0.68, 1);
}

html {
  font-size: 0.0694444444444444vw;
}
@media (width < 768px) {
  html {
    font-size: 0.2777777777777778vw;
  }
}
body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--text-color);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  -webkit-text-size-adjust: none;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-size: 100%;
  font-weight: 500;
	line-height: 1.5;
}
p {
	margin: 0;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
ol {
	margin: 0;
	padding: 0 0 0 28px;
}
dl,dt,dd {
	margin: 0;
	padding: 0;
}
figure {
	margin: 0;
	padding: 0;
}
a,
.a {
	color: var(--text-color);
  text-decoration: none;
	cursor: pointer;
  transition: .2s var(--easing);
}
a img {
	border: none;
}
img {
  height: auto;
  max-width: 100%;
	border: 0;
	vertical-align: middle;
}
sup {
  display: inline-block;
	font-size: 0.8em;
}
em {
  font-style: normal;
}
table {
	border-collapse: collapse;
}
main {
	display: block;
}
@media (width < 768px) {
}



/* ---------------- fix */
html {
  overflow-y: scroll;
}
body.-fix {
  position: fixed;
  width: 100%;
}



/* ---------------- layout */
main section {
  position: relative;
  padding: 120px 0 240px;
}
.l-container {
  max-width: 1272px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (width < 768px) {
  main section {
    padding: 60px 0 100px;
  }
  .l-container {
    padding: 0 24px;
  }
}



/* ---------------- general */
.-mobile {
  display: none;
}
@media (width < 768px) {
  .-pc {
    display: none;
  }
  .-mobile {
    display: block;
  }
}

/* en */
.-en {
  font-family: "Montserrat", sans-serif;
}

/* btn */
.-btn {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 70px;
  max-width: 300px;
  padding: 0 24px;
  background: #FF6200;
  border-radius: 120px;
  box-shadow: var(--box-shadow);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}
.-btn::before {
  content: '';
  position: absolute;
  bottom: 240%;
  left: 0;
  width: 100%;
  height: 300%;
  background: #fff;
  transform: skewY(-20deg);
  scale: 1.1;
  transition: .2s var(--easing);
}
.-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #FF6200;
  border-radius: 120px;
}
.-btn .label {
  flex: 1;
  position: relative;
}
.-btn .arw {
  overflow: hidden;
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  width: 32px;
  background: #fff;
  border-radius: 50%;
}
.-btn .arw::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1741 / 1341;
  width: 17.41px;
  background: url("/special/assets/img/josys/arw_btn_orange.svg") no-repeat center center / contain;
  translate: -50% -50%;
  transition: .2s var(--easing);
}
.-btn .arw::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1741 / 1341;
  width: 17.41px;
  background: url("/special/assets/img/josys/arw_btn_white.svg") no-repeat center center / contain;
  translate: -50% -50%;
  margin-left: -32px;
  transition: .2s var(--easing);
}
/* hover */
.-btn:hover {
  color: #FF6200;
}
.-btn:hover::before {
  bottom: -100%;
}
.-btn:hover .arw {
  background: #FF6200;
}
.-btn:hover .arw::before {
  margin-left: 32px;
}
.-btn:hover .arw::after {
  margin-left: 0;
}
@media (width < 768px) {
  .-btn {
    height: 60px;
    max-width: 240px;
    font-size: 18px;
  }
}

/* inquiry */
.-btn.-inquiry {
  background: var(--primary-color);
}
.-btn.-inquiry::after {
  border-color: var(--primary-color);
}
.-btn.-inquiry .arw::before {
  background-image: url("/special/assets/img/josys/arw_btn_blue.svg");
}
/* hover */
.-btn.-inquiry:hover {
  color: var(--primary-color);
}
.-btn.-inquiry:hover .arw {
  background: var(--primary-color);
}

/* fix */
.fix-download {
  position: fixed;
  z-index: 10;
  top: 160px;
  right: 0;
  translate: 120% 0;
  transition: .2s var(--easing);
}
.fix-download.-active {
  translate: 0 0;
}
.fix-download .-btn {
  display: block;
  height: auto;
  padding: 16px 0 24px;
  border-radius: 4px 0 0 4px;
  font-size: 15px;
  line-height: 56px;
  writing-mode: vertical-rl;
}
.fix-download .-btn::after {
  border-radius: 4px 0 0 4px;
}
@media (width < 768px) {
  .fix-download .-btn {
    padding: 16px 0;
    line-height: 32px;
  }
}

/* motion */
.js-action.-motion {
  opacity: 0;
  translate: 0 40px;
  transition: .4s var(--easing);
}
.js-action.-motion.-action {
  opacity: 1;
  translate: 0 0;
}



/* ---------------- head-group */
.p-head-group {
  margin-bottom: 64px;
}
.p-head-group .shoulder {
  width: fit-content;
  margin: 0 auto;
  background: var(--gradient-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.p-head-group h2 {
  font-size: 64px;
  font-weight: 900;
  text-align: center;
  line-height: 1.5;
}
.p-head-group .lead {
  margin-top: 24px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
@media (width < 768px) {
  .p-head-group .shoulder {
    margin-bottom: 8px;
    font-size: 20px;
  }
  .p-head-group h2 {
    font-size: 40px;
  }
  .p-head-group .lead {
    font-size: 18px;
  }
}



/* ---------------- header */
header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
}
header .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  position: relative;
  max-width: 1344px;
  margin: 0 auto;
  padding: 26px 16px;
}
header .logo {
  position: relative;
  z-index: 10;
}
header .logo img {
  width: auto;
  height: 40px;
}
header nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
header .nav {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 40px;
  padding: 0 40px;
  background: linear-gradient(90deg, rgba(255 255 255 / 60%), rgba(255 255 255 / 80%));
  border: 1px solid #fff;
  border-radius: 24px;
}
header .nav .a {
  font-weight: 700;
}
header .nav .a:hover {
  opacity: .6;
}
header .btn-download {
  border-radius: 32px;
  box-shadow: var(--box-shadow);
}
header .btn-download .-btn {
  justify-content: center;
  height: 40px;
  max-width: 200px;
  border-radius: 32px;
  font-size: 16px;
}
header .btn-download .-btn .arw {
  display: none;
}
@media (width < 1180px) {
  header .logo a::after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/special/assets/img/josys/logo_white.svg") no-repeat center center / contain;
    transition: .2s var(--easing);
  }
  header .btn-nav {
    position: absolute;
    z-index: 10;
    top: 24px;
    right: 16px;
  }
  header .btn-nav .a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    aspect-ratio: 1 / 1;
    width: 44px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--box-shadow);
  }
  header .btn-nav .a::before {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 8px;
    transition: .2s var(--easing);
  }
  header .btn-nav .a::after {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 8px;
    transition: .2s var(--easing);
  }
  header .nav-group {
    opacity: 0;
    visibility: hidden;
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 122px 0 64px;
    background: var(--primary-color);
    transition: .2s var(--easing);
  }
  header nav {
    display: block;
    max-width: 312px;
    margin: 0 auto;
    padding: 48px 36px 56px;
    background: linear-gradient(90deg, rgba(255 255 255 / 60%), rgba(255 255 255 / 80%));
    border: 1px solid #fff;
    border-radius: 24px;
  }
  header .nav {
    display: block;
    width: fit-content;
    height: auto;
    margin: 0 auto;
    background: none;
    border: none;
  }
  header .nav li + li {
    margin-top: 24px;
  }
  header .btn-download {
    margin: 40px auto 0;
  }
  header .btn-download .-btn {
    width: 100%;
    height: 60px;
    max-width: 240px;
    font-size: 18px;
    text-align: center;
  }
}
@media (width < 768px) {
  header .wrap {
    padding: 18px 16px;
  }
  header .logo img {
    height: 32px;
  }
  header .btn-nav {
    top: 16px;
  }
  header .nav .a {
    font-size: 16px;
  }
}

/* open */
header.-open .logo img {
  opacity: 0;
}
header.-open .logo a::after {
  opacity: 1;
}
header.-open .nav-group {
  opacity: 1;
  visibility: visible;
}
header.-open .btn-nav .a::before,
header.-open .btn-nav .a::after {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  rotate: -45deg;
}
header.-open .btn-nav .a::after {
  rotate: 45deg;
}



/* ---------------- footer */
footer {
  padding: 64px 0;
  background: linear-gradient(135deg, #009DFF, #4BCFCD);
  color: #fff;
}
footer .wrap {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
}
footer .copyright {
  font-size: 12px;
}
@media (width < 768px) {
  footer {
    padding: 40px 0;
  }
  footer .wrap {
    display: block;
    max-width: 175px;
    margin: 0 auto;
  }
  footer .logo {
    max-width: 175px;
    margin: 0 auto;
  }
  footer .copyright {
    margin-top: 24px;
    text-align: center;
  }
}



/* ---------------- hero */
section.hero {
  padding: 0;
  background: url("/special/assets/img/josys/bg_hero.png") center center / cover #E3F3FE;
}
@media (width < 768px) {
  section.hero {
    background: #E3F3FE;
  }
  .hero-image {
    padding-bottom: 48rem;
  }
  .hero-image img {
    width: 100%;
  }
}

/* p-hero */
.p-hero {
  width: fit-content;
  margin-left: 116rem;
  padding: 166rem 0 102rem;
  text-align: center;
}
.p-hero .shoulder {
  width: 460rem;
  margin: 0 auto 6rem;
}
.p-hero .shoulder img {
  width: 100%;
}
.p-hero h1 {
  font-size: 72rem;
  font-weight: 900;
  line-height: 1.5;
}
.p-hero h1 em {
  color: var(--primary-color);
}
.p-hero h1 span {
  letter-spacing: -0.05em;
}
.p-hero .btns {
  width: 300rem;
  margin: 40rem auto 0;
}
.p-hero .btns li + li {
  margin-top: 24rem;
}
.p-hero .btns .-btn {
  width: 300rem;
  height: 70rem;
  max-width: none;
  padding: 0 24rem;
  border-radius: 120rem;
  font-size: 24rem;
  text-align: left;
}
.p-hero .btns .-btn .arw {
  width: 32rem;
}
.p-hero .btns .-btn .arw::before,
.p-hero .btns .-btn .arw::after {
  width: 17.41rem;
}
@media (width < 768px) {
  .p-hero {
    margin: 0 auto;
    padding: 100rem 0 24rem;
  }
  .p-hero .shoulder {
    width: 280rem;
  }
  .p-hero h1 {
    font-size: 48rem;
    line-height: 1.3;
  }
  .p-hero .btns {
    width: 240rem;
    margin-top: 24rem;
  }
  .p-hero .btns .-btn {
    width: 240rem;
    height: 60rem;
    padding: 0 24rem;
    font-size: 18rem;
  }
  .p-hero .btns .-btn .arw {
    width: 24rem;
  }
  .p-hero .btns .-btn .arw::before,
  .p-hero .btns .-btn .arw::after {
    width: 13.41rem;
  }
}


/* ---------------- logos */
section.logos {
  padding: 37px 0 48px;
}
.logos-head {
  position: absolute;
  z-index: 1;
  top: -64px;
  left: 50%;
  width: fit-content;
  padding: 13px 32px;
  background: #fff;
  border: 4px solid var(--primary-color);
  border-radius: 16px;
  text-align: center;
  white-space: nowrap;
  translate: -50% 0;
}
.logos-head::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  aspect-ratio: 24 / 18;
  height: 18px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--primary-color);
  translate: -50% 0;
}
.logos-head::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  aspect-ratio: 24 / 18;
  height: 11px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #fff;
  translate: -50% -1px;
}
.logos-head .shoulder {
  width: fit-content;
  margin: 0 auto;
  background: linear-gradient(90deg, #004DAD, #00C493);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.logos-head .head {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
@media (width < 1024px) {
  .logos-head {
    top: 0;
    translate: -50% -50%;
  }
}
@media (width < 767px) {
  section.logos {
    padding: 48px 0;
  }
  .logos-head {
    padding: 8px 24px;
  }
  .logos-head .head {
    font-size: 18px;
  }
}

/* p-logos */
.p-logos {
  overflow: hidden;
}
.p-logos .wrap {
  width: 20000px;
}
.p-logos .items {
  display: flex;
  width: fit-content;
  animation: logos 56s linear infinite;
}
.p-logos .items img {
  width: auto;
  height: 200px;
}
@media (width < 767px) {
  .p-logos .items img {
    height: 100px;
  }
}

@keyframes logos {
  0% {
    translate: 0 0;
  }
  100% {
    translate: -50% 0;
  }
}



/* ---------------- about */
section.about {
  background: url("/special/assets/img/josys/bg_about.svg") no-repeat left bottom var(--background-color);
}
@media (width < 768px) {
  section.about {
    background-size: 640px;
  }
}

/* p-about */
.p-about {
  max-width: 792px;
  margin: 0 auto;
}
.p-about figure {
  position: relative;
}
.p-about figure::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 24px;
  left: -12px;
  width: 100%;
  height: 100%;
  background: var(--gradient-color);
  border-radius: 40px;
}
.p-about figure img {
  position: relative;
  z-index: 1;
  border-radius: 40px;
}
.p-about .body {
  max-width: 664px;
  margin: 48px auto 0;
  font-size: 20px;
}
.p-about .body p + p {
  margin-top: 24px;
}
.p-about .body em {
  color: var(--primary-color);
  font-weight: 700;
}
@media (width < 768px) {
  .p-about figure::after {
    top: 16px;
    left: -8px;
    border-radius: 24px;
  }
  .p-about figure img {
    border-radius: 24px;
  }
  .p-about .body {
    margin-top: 40px;
    padding: 0 24px;
    font-size: 18px;
  }
}



/* ---------------- concerns */
section.concerns::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url("/special/assets/img/josys/bg_type_01.svg") repeat-x center bottom;
  translate: 0 -100%;
}
@media (width < 767px) {
  section.concerns::before {
    height: 40px;
    background-size: auto 100%;
  }
}

/* .p-concerns */
.p-concerns .concerns-group {
  position: relative;
  aspect-ratio: 1208 / 898;
  width: min(1208rem, 1208px);
  margin: 0 auto;
}
.p-concerns .concerns-group figure {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  aspect-ratio: 1 / 1;
  width: min(583rem, 583px);
  translate: -50% 0;
}
.p-concerns .concerns-group ul li {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 2;
  aspect-ratio: 376 / 360;
  width: min(376rem, 376px);
  padding: 40px;
  font-size: 20px;
  font-weight: 700;
  transition: .4s var(--easing);
}
.p-concerns .concerns-group.-action ul li {
  opacity: 1;
}
.p-concerns .concerns-group ul li span {
  display: block;
  max-width: 248px;
}
.p-concerns .concerns-group ul li.bubble01 {
  top: min(136rem, 136px);
  left: 0;
  background: url("/special/assets/img/josys/concerns_bubble_01.svg") no-repeat center center / contain;
}
.p-concerns .concerns-group ul li.bubble02 {
  top: 0;
  left: 50%;
  background: url("/special/assets/img/josys/concerns_bubble_02.svg") no-repeat center center / contain;
  translate: -50% 0;
  transition-delay: .1s;
}
.p-concerns .concerns-group ul li.bubble03 {
  top: min(100rem, 100px);
  right: 0;
  background: url("/special/assets/img/josys/concerns_bubble_03.svg") no-repeat center center / contain;
  transition-delay: .2s;
}
.p-concerns .concerns-group ul li.bubble04 {
  top: min(520rem, 520px);
  left: 0;
  background: url("/special/assets/img/josys/concerns_bubble_04.svg") no-repeat center center / contain;
  transition-delay: .3s;
}
.p-concerns .concerns-group ul li.bubble05 {
  top: min(524rem, 524px);
  right: 0;
  background: url("/special/assets/img/josys/concerns_bubble_05.svg") no-repeat center center / contain;
  transition-delay: .4s;
}
@media (width < 1024px) {
  .p-concerns .concerns-group {
    aspect-ratio: auto;
    width: auto;
  }
  .p-concerns .concerns-group ul li + li {
    margin-top: 24px;
  }
  .p-concerns .concerns-group ul li {
    display: grid;
    grid-template-columns: 41px 1fr;
    align-items: start;
    gap: 16px;
    position: static;
    aspect-ratio: auto;
    width: auto;
    padding: 28px 24px;
    background: linear-gradient(225deg, #BBE1FE, #D8FFF9) !important;
    border-radius: 24px;
    font-size: 16px;
    translate: 0 0 !important;
  }
  .p-concerns .concerns-group ul li::before {
    content: '';
    aspect-ratio: 41 / 50;
    width: 41px;
    background: url("/special/assets/img/josys/ico_concerns.svg") no-repeat center center / contain;
  }
  .p-concerns .concerns-group ul li span {
    max-width: none;
  }
  .p-concerns .concerns-group figure {
    position: static;
    width: auto;
    max-width: 264px;
    margin: 24px auto 0;
    translate: 0 0;
  }
}

.p-concerns .result-group {
  background: var(--primary-color);
  border-radius: 40px;
  color: #fff;
}
.p-concerns .result-group {
  position: relative;
  margin-top: 120px;
  padding: 64px 64px 0 105px;
  background: var(--primary-color);
  border-radius: 40px;
  color: #fff;
}
.p-concerns .result-group::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 50%;
  aspect-ratio: 58 / 80;
  height: 80px;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  background: var(--primary-color);
  translate: -50% -100%;
}
.p-concerns .result-group .head {
  margin-bottom: 40px;
  font-size: 48px;
  font-weight: 900;
  line-height: 1.5;
}
.p-concerns .result-group .head::before {
  content: '';
  display: inline-block;
  aspect-ratio: 350 / 64;
  height: 64px;
  margin-right: 8px;
  background: url("/special/assets/img/josys/logo_white.svg") no-repeat center center / contain;
  translate: 0 4px;
}
.p-concerns .result-group .head em {
  color: #F5FF4B;
}
.p-concerns .result-group .head .-en {
  font-size: 50px;
  font-weight: 700;
}
.p-concerns .result-group .body {
  display: flex;
  align-items: end;
  gap: 48px;
  font-size: 24px;
  line-height: 2;
}
.p-concerns .result-group .txt {
  flex: 1;
  padding: 0 0 72px 16px;
}
.p-concerns .result-group .txt p + p {
  margin-top: 24px;
}
.p-concerns .result-group .txt em {
  color: #F5FF4B;
  font-size: 32px;
  font-weight: 700;
}
.p-concerns .result-group figure {
  width: 352px;
}
@media (width < 1024px) {
  .p-concerns .result-group {
    padding: 48px 40px 0;
  }
  .p-concerns .result-group .body {
    display: block;
  }
  .p-concerns .result-group .txt {
    padding: 0;
  }
  .p-concerns .result-group figure {
    margin-left: auto;
    margin-top: 40px;
  }
}
@media (width < 767px) {
  .p-concerns .result-group {
    margin-top: 88px;
    padding: 48px 24px 0;
  }
  .p-concerns .result-group::before {
    height: 48px;
  }
  .p-concerns .result-group .head {
    margin-bottom: 40px;
    font-size: 26px;
  }
  .p-concerns .result-group .head .-en {
    font-size: 28px;
  }
  .p-concerns .result-group .head::before {
    height: 42px;
  }
  .p-concerns .result-group .body {
    font-size: 18px;
  }
  .p-concerns .result-group .body em {
    font-size: 20px;
  }
  .p-concerns .result-group figure {
    width: auto;
    max-width: 352px;
  }
}



/* ---------------- service */
section.service {
  background: var(--background-color);
}
section.service::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url("/special/assets/img/josys/bg_type_02.svg") repeat-x center bottom;
  translate: 0 -100%;
}
@media (width < 767px) {
  section.service::before {
    height: 40px;
    background-size: auto 100%;
  }
}

/* p-service */
.p-service .items .item + .item {
  margin-top: 88px;
}
.p-service .items .item {
  display: flex;
  gap: 40px;
  align-items: start;
}
.p-service .items figure {
  position: relative;
  width: 56.95%;
}
.p-service .items figure::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 24px;
  left: -12px;
  width: 100%;
  height: 100%;
  background: var(--gradient-color);
  border-radius: 40px;
}
.p-service .items figure img {
  position: relative;
  border-radius: 40px;
}
.p-service .items .body-group {
  flex: 1;
}
.p-service .items .head-group {
  margin-bottom: 32px;
  color: var(--primary-color);
}
.p-service .items .head-group .num {
  margin-bottom: 16px;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
}
.p-service .items .head-group .head {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.5;
}
.p-service .items .body p:not(.note) {
  font-size: 20px;
  font-weight: 700;
}
.p-service .items .body p + ul {
  margin-top: 16px;
}
.p-service .items .body ul li + li {
  margin-top: 4px;
}
.p-service .items .body ul li {
  position: relative;
  padding-left: 16px;
}
.p-service .items .body ul li::before {
  content: '';
  position: absolute;
  top: calc((1em * 1.8) / 2);
  left: 0;
  aspect-ratio: 1 / 1;
  width: 8px;
  background: var(--primary-color);
  border-radius: 50%;
  translate: 0 -50%;
}
.p-service .items .body .note {
  margin-top: 24px;
  padding: 8px 16px;
  background: #fff;
  border-radius: 8px;
  color: var(--primary-color);
  font-weight: 700;
}
.p-service .items .body .note .min {
  font-size: 13px;
}
@media (width < 1024px) {
  .p-service .items .item {
    display: block;
    max-width: 688px;
    margin: 0 auto;
  }
  .p-service .items .item figure {
    width: auto;
    margin-bottom: 48px;
  }
}
@media (width < 1024px) {
  .p-service .items .item + .item {
    margin-top: 64px;
  }
  .p-service .items .item figure {
    margin-bottom: 40px;
  }
  .p-service .items .item figure::before {
    top: 16px;
    left: -8px;
    border-radius: 24px;
  }
  .p-service .items .item figure img {
    border-radius: 24px;
  }
  .p-service .items .head-group .num {
    margin-bottom: 8px;
    font-size: 48px;
  }
  .p-service .items .head-group .head {
    font-size: 28px;
  }
  .p-service .items .body p:not(.note) {
    font-size: 18px;
  }
}

/* even */
.p-service .items .item:nth-child(even) {
  flex-direction: row-reverse;
}
.p-service .items .item:nth-child(even) figure::before {
  left: 12px;
}
@media (width < 1024px) {
  .p-service .items .item:nth-child(even) figure::before {
    left: 8px;
  }
}

/* p-btn-download */
.p-service + .p-btn-download {
  margin-top: 140px;
}
.p-btn-download > .a {
  display: block;
  position: relative;
  padding: 48px 40px 56px 480px;
  background: linear-gradient(225deg, #009DFF, #00C493);
  border-radius: 320px;
  box-shadow: var(--box-shadow);
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.75;
}
.p-btn-download figure {
  position: absolute;
  top: -32px;
  left: 64px;
  max-width: 349px;
}
.p-btn-download .btn {
  margin-top: 24px;
}
.p-btn-download .btn .-btn {
  max-width: 416px;
  padding-left: 40px;
}
.p-btn-download .btn .-btn::after {
  border-color: #fff;
}
.p-btn-download > .a:hover .btn .-btn {
  color: #FF6200;
}
.p-btn-download > .a:hover .btn .-btn::before {
  bottom: -100%;
}
.p-btn-download > .a:hover .btn .-btn .arw {
  background: #FF6200;
}
.p-btn-download > .a:hover .btn .-btn .arw::before {
  margin-left: 32px;
}
.p-btn-download > .a:hover .btn .-btn .arw::after {
  margin-left: 0;
}
@media (width < 1024px) {
  .p-service + .p-btn-download {
    margin-top: 104px;
  }
  .p-btn-download > .a > * {
    position: relative;
  }
  .p-btn-download > .a {
    position: relative;
    padding: 0 40px 56px;
    background: none;
    box-shadow: none;
  }
  .p-btn-download > .a::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
    background: linear-gradient(225deg, #009DFF, #00C493);
    border-radius: 40px;
    box-shadow: var(--box-shadow);
  }
  .p-btn-download figure {
    position: relative;
    top: 0;
    left: 0;
    margin: 0 auto 32px;
  }
  .p-btn-download .btn .-btn {
    margin: 0 auto;
  }
}
@media (width < 768px) {
  .p-btn-download > .a {
    padding: 0 24px 32px;
    font-size: 22px;
  }
  .p-btn-download .copy {
    text-align: center;
  }
  .p-btn-download .btn .-btn {
    height: 70px;
    padding: 0 16px 0 20px;
    font-size: 17px;
  }
  .p-btn-download .btn .-btn .arw {
    width: 24px;
  }
  .p-btn-download .btn .-btn .arw::before,
  .p-btn-download .btn .-btn .arw::after {
    width: 13.41px;
  }
}



/* ---------------- reason */
section.reason::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url("/special/assets/img/josys/bg_type_01.svg") repeat-x center bottom;
  translate: 0 -100%;
}
section.reason::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 141px;
  left: 0;
  aspect-ratio: 428 / 600;
  width: 428px;
  background: url("/special/assets/img/josys/bg_obj_01.svg") no-repeat center center / contain;
}
section.reason > * {
  position: relative;
  z-index: 1;
}
@media (width < 768px) {
  section.reason::before {
    height: 40px;
    background-size: auto 100%;
  }
  section.reason::after {
    width: 240px;
  }
}

/* p-reason */
.p-reason .items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 72px 64px;
  max-width: 1000px;
  margin: 0 auto;
}
.p-reason .items .img {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 272px;
  margin: 0 auto 28px;
}
.p-reason .items .img::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 4px;
  left: -12px;
  width: 100%;
  height: 100%;
  background: var(--gradient-color);
  border-radius: 50%;
}
.p-reason .items .img figure {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(225deg, #96DCFF, #6FCCF2);
}
.p-reason .items .head {
  margin-bottom: 24px;
  color: var(--primary-color);
  font-size: 28px;
  font-weight: 900;
  text-align: center;
}
.p-reason .items .item:nth-child(2) .img::before {
  top: -4px;
  left: 12px;
}
.p-reason .items .item:nth-child(3) .img::before {
  top: 12px;
  left: 4px;
}
.p-reason .items .item:nth-child(4) .img::before {
  top: -4px;
  left: -12px;
}
@media (width < 1024px) {
  .p-reason .items {
    gap: 72px 40px;
  }
}
@media (width < 768px) {
  .p-reason .items {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .p-reason .items .img {
    max-width: 240px;
    margin-bottom: 24px;
  }
  .p-reason .items .img img {
    max-width: 160px;
  }
  .p-reason .items .head {
    margin-bottom: 16px;
    font-size: 20px;
  }
}



/* ---------------- plan */
section.plan {
  background: #E3F3FE;
}
section.plan::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 59px;
  background: url("/special/assets/img/josys/bg_type_03.svg") repeat-x center bottom;
  translate: 0 -100%;
}
section.plan::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 141px;
  right: 0;
  aspect-ratio: 428 / 600;
  width: 428px;
  background: url("/special/assets/img/josys/bg_obj_02.svg") no-repeat center center / contain;
}
section.plan > * {
  position: relative;
  z-index: 1;
}
@media (width < 768px) {
  section.plan::before {
    height: 40px;
    background-size: auto 100%;
  }
  section.plan::after {
    width: 240px;
  }
}

/* p-plan */
.p-plan {
  max-width: 1000px;
  margin: 0 auto;
}
.p-plan .standard-group {
  position: relative;
  padding: 48px 40px 56px;
  background: #fff;
  border-radius: 40px;
}
.p-plan .standard-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 245 / 140;
  width: 245px;
  background: url("/special/assets/img/josys/plan_label_01.svg") no-repeat left top / contain;
}
.p-plan .standard-group > .wrap {
  max-width: 664px;
  margin: 0 auto;
}
.p-plan .head-group {
  text-align: center;
}
.p-plan .head-group .head {
  color: var(--primary-color);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.5;
}
.p-plan .head-group .shoulder {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 24px;
  font-weight: 700;
}
.p-plan .head-group .shoulder::before,
.p-plan .head-group .shoulder::after {
  content: '';
  width: 60px;
  height: 1px;
  background: var(--text-color);
}
.p-plan .head-group .shoulder .num {
  font-size: 26px;
}
.p-plan .body-group {
  font-size: 28px;
  text-align: center;
}
.p-plan .body-group .num {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
}
.p-plan .option-group {
  position: relative;
  margin-top: 24px;
  padding: 24px 24px 32px;
  background: #E3F3FE;
  border-radius: 16px;
}
.p-plan .option-group::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 40px;
  aspect-ratio: 1 / 1;
  width: 64px;
  background: url("/special/assets/img/josys/ico_plus.svg") no-repeat center center / contain;
  translate: 0 -50%;
}
.p-plan .option-group .head-group .head {
  font-size: 24px;
}
.p-plan .option-group .head-group .shoulder {
  font-size: 22px;
}
.p-plan .option-group .head-group .shoulder .num {
  font-size: 24px;
}
.p-plan .option-group .body-group {
  font-size: 22px;
}
.p-plan .option-group .body-group .num {
  font-size: 48px;
}
.p-plan ul.note {
  margin-top: 24px;
}
.p-plan ul.note li + li {
  margin-top: 4px;
}
.p-plan ul.note li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
}
.p-plan ul.note li::before {
  content: '';
  position: absolute;
  top: calc((1em * 1.8) / 2);
  left: 0;
  aspect-ratio: 1 / 1;
  width: 8px;
  background: var(--primary-color);
  border-radius: 50%;
  translate: 0 -50%;
}
@media (width < 768px) {
  .p-plan .standard-group {
    padding: 116px 24px 40px;
  }
  .p-plan .standard-group::before {
    width: 176px;
  }
  .p-plan .head-group .head {
    font-size: 24px;
  }
  .p-plan .head-group .shoulder {
    font-size: 16px;
  }
  .p-plan .head-group .shoulder::before,
  .p-plan .head-group .shoulder::after {
    width: 40px;
  }
  .p-plan .body-group {
    font-size: 18px;
  }
  .p-plan .body-group .num {
    font-size: 40px;
  }
  .p-plan .option-group {
    padding: 80px 24px 32px;
  }
  .p-plan .option-group::before {
    top: 16px;
    left: 50%;
    width: 40px;
    translate: -50% 0;
  }
  .p-plan .option-group .head-group .head {
    font-size: 20px;
  }
  .p-plan .option-group .head-group .shoulder {
    font-size: 15px;
  }
  .p-plan .option-group .body-group {
    font-size: 16px;
  }
  .p-plan .option-group .body-group .num {
    font-size: 32px;
  }
  .p-plan ul.note li {
    font-size: 12px;
  }
}

.p-plan .trial-group {
  margin-top: 64px;
}
.p-plan .copy-group {
  max-width: 790px;
  margin: 0 auto 40px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.p-plan .copy-group .hr {
  position: relative;
  height: 20px;
  border: 4px solid var(--primary-color);
  border-top: none;
  border-radius: 0 0 20px 20px;
}
.p-plan .copy-group .hr::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  aspect-ratio: 24 / 18;
  height: 18px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--primary-color);
  translate: -50% 0;
}
.p-plan .copy-group .hr::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  aspect-ratio: 24 / 18;
  height: 11px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #E3F3FE;
  translate: -50% -1px;
}
.p-plan .trial-group .box {
  position: relative;
  padding: 48px 40px 56px;
  background: #fff;
  border-radius: 40px;
}
.p-plan .trial-group .box::after {
  content: '';
  position: absolute;
  top: -32px;
  left: -32px;
  aspect-ratio: 1 / 1;
  width: 208px;
  background: url("/special/assets/img/josys/plan_label_02.svg") no-repeat center center / contain;
}
@media (width < 768px) {
  .p-plan .copy-group {
    font-size: 16px;
  }
  .p-plan .trial-group .box {
    padding: 40px 24px;
  }
  .p-plan .trial-group .box::after {
    top: -24px;
    left: -16px;
    width: 90px;
  }
}

.p-plan + .p-btn-download {
  margin-top: 140px;
}
@media (width < 768px) {
  .p-plan + .p-btn-download {
    margin-top: 104px;
  }
}



/* ---------------- faq */
section.faq > * {
  position: relative;
  z-index: 1;
}
section.faq::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 59px;
  background: url("/special/assets/img/josys/bg_type_04.svg") repeat-x center bottom;
  translate: 0 -100%;
}
section.faq::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 141px;
  left: 0;
  aspect-ratio: 428 / 600;
  width: 428px;
  background: url("/special/assets/img/josys/bg_obj_01.svg") no-repeat center center / contain;
}
@media (width < 768px) {
  section.faq::before {
    height: 40px;
    background-size: auto 100%;
  }
  section.faq::after {
    width: 240px;
  }
}

/* p-faq */
.p-faq {
  max-width: 1000px;
  margin: 0 auto;
}
.p-faq .items .item + .item {
  margin-top: 40px;
}
.p-faq .items .item {
  padding: 24px 64px;
  background: var(--primary-color);
  border-radius: 24px;
  box-shadow: var(--box-shadow);
}
.p-faq .items .faq-q {
  display: grid;
  grid-template-columns: 60px 1fr 36px;
  gap: 16px;
  align-items: center;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
.p-faq .items .faq-q::before {
  content: '';
  display: block;
  aspect-ratio: 1 / 1;
  background: url("/special/assets/img/josys/ico_faq.svg") no-repeat center center / contain;
}
.p-faq .items .faq-q::after {
  content: '';
  display: block;
  aspect-ratio: 20 / 36;
  background: url("/special/assets/img/josys/arw_faq.svg") no-repeat center center / contain;
  transition: .2s var(--easing);
}
.p-faq .items .faq-q.-on::after {
  rotate: -180deg;
}
.p-faq .items .faq-a {
  display: none;
  padding: 16px 0 8px;
}
.p-faq .items .faq-a .box {
  padding: 32px 32px 40px;
  background: #fff;
  border-radius: 12px;
}
@media (width < 768px) {
  .p-faq .items .item + .item {
    margin-top: 24px;
  }
  .p-faq .items .item {
    padding: 24px;
  }
  .p-faq .items .faq-q {
    grid-template-columns: 40px 1fr 24px;
    font-size: 20px;
  }
  .p-faq .items .faq-a {
    padding: 16px 0 0;
  }
  .p-faq .items .faq-a .box {
    padding: 24px;
  }
}



/* ---------------- download */
section.download {
  background: url("/special/assets/img/josys/bg_download.svg") no-repeat right bottom #E3F3FE;
}
section.download::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 59px;
  background: url("/special/assets/img/josys/bg_type_03.svg") repeat-x center bottom;
  translate: 0 -100%;
}
@media (width < 768px) {
  section.download {
    background-size: 640px;
  }
  section.download::before {
    height: 40px;
    background-size: auto 100%;
  }
}

/* p-download */
.p-download .wrap {
  display: grid;
  grid-template-columns: 51.69% 1fr;
  gap: 32px;
}
.p-download .container {
  padding: 56px;
  overflow: hidden;
  background: #fff;
  border-radius: 24px;
}
.p-download .copy {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  color: var(--primary-color);
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  line-height: 1.5;
}
.p-download .copy::before,
.p-download .copy::after {
  content: '';
  display: block;
  aspect-ratio: 253 / 480;
  width: 25.3px;
  background: url("/special/assets/img/josys/download_copy_01.svg") no-repeat center center / contain;
  rotate: -10deg;
}
.p-download .copy::after {
  scale: -1 1;
  rotate: 10deg;
}
.p-download .copy .txt {
  flex: 1;
}
.p-download figure {
  margin-bottom: 40px;
}
.p-download .head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.p-download .head::after {
  content: '';
  height: 1px;
  background: var(--primary-color);
}
.p-download ul li + li {
  margin-top: 4px;
}
.p-download ul li {
  position: relative;
  padding-left: 16px;
}
.p-download ul li::before {
  content: '';
  position: absolute;
  top: calc((1em * 1.8) / 2);
  left: 0;
  aspect-ratio: 1 / 1;
  width: 8px;
  background: var(--primary-color);
  border-radius: 50%;
  translate: 0 -50%;
}
.p-download ul .min {
  font-size: 13px;
}
@media (width < 1024px) {
  .p-download .wrap {
    grid-template-columns: 1fr;
  }
}
@media (width < 768px) {
  .p-download .wrap {
    gap: 24px;
  }
  .p-download .container {
    padding: 24px 24px 32px;
  }
  .p-download figure {
    margin-bottom: 24px;
  }
  .p-download .container.form {
    padding: 24px 16px 32px;
  }
  .p-download .copy {
    font-size: 18px;
  }
  .p-download .head {
    margin-bottom: 16px;
  }
}

/* SATORI */
#satori__custom_form {
	color: #343F41;
}
#satori__custom_form a {
	color: #009DFF;
}
#satori__custom_form .satori__input_group {
	margin-bottom: 24px;
}
#satori__custom_form .satori__input_group label {
	padding-bottom: 8px;
	color: #343F41;
	font-weight: 700;
}
#satori__custom_form .satori__require {
	margin-left: 20px;
	padding: 0 8px;
	background: #DD0000;
	color: #fff;
	font-size: 12px;
	line-height: 20px;
}
#satori__custom_form .satori__error_messages {
	color: #DD0000;
	font-size: 12px;
}
#satori__custom_form input[type="text"],
#satori__custom_form input[type="email"],
#satori__custom_form input[type="tel"] {
	height: 40px;
	padding: 0 20px;
	border: 1px solid #CDD7D9;
	border-radius: 5px;
	background: #fff;
	box-shadow: none;
}
#satori__custom_form textarea {
	height: 149px;
	padding: 16px 20px;
	border: 1px solid #CDD7D9;
	border-radius: 5px;
	background: #fff;
	vertical-align: top;
	box-shadow: none;
}
#satori__custom_form  input[type="text"]:focus-visible,
#satori__custom_form  input[type="email"]:focus-visible,
#satori__custom_form  input[type="tel"]:focus-visible,
#satori__custom_form textarea:focus-visible {
	outline: -webkit-focus-ring-color auto 1px;
}
#satori__privacy_policy_agreement_wrapper {
	margin-top: 32px;
}
#satori__privacy_policy_agreement_wrapper .satori__input_group {
	margin-top: 14px;
	border-bottom: none;
}
#satori__privacy_policy_agreement_wrapper .satori__input_group label {
	padding: 0;
	background-color: transparent;
	color: #343F41;
}
#satori__custom_form .satori__submit_group {
	margin-top: 32px;
}
#satori__custom_form .satori__btn {
	width: 100%;
	max-width: 262px;
	padding: 0;
	background: #4BCFCD;
	border-radius: 30px;
	border: 1px solid transparent;
	box-shadow: 0 3px 8px rgba(75, 207, 205, 0.5);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	line-height: 60px;
	outline: none;
	transition: all 0.2s ease;
}
#satori__custom_form .satori__btn:hover {
	opacity: 1;
	background: #31b9b7;
}
#satori__custom_form .satori__custom_form > .satori__input_group {
  margin-bottom: 16px;
  padding: 0;
}
#satori__custom_form .satori__horiz_group {
  margin-bottom: 16px;
  padding: 0;
}
#satori__custom_form .satori__horiz_group .satori__input_group {
  margin: 0;
  padding: 0;
}
#satori__custom_form .satori__horiz_group .satori__input_group + .satori__input_group {
  margin-left: 24px;
}
#satori__custom_form .satori__require {
  margin-left: 8px;
  padding: 0 16px;
  background: #E85656;
  border-radius: 24px;
  line-height: 24px;
}
#satori__custom_form .satori__system_notes {
  font-size: 14px;
}
#satori__custom_form input[type="text"],
#satori__custom_form input[type="email"],
#satori__custom_form input[type="tel"],
#satori__custom_form textarea {
  background: #FAFAFA;
  border-color: #D8D8D8;
}
#satori__privacy_policy_agreement_wrapper {
  margin-top: 16px;
}
#satori__privacy_policy_agreement_wrapper .satori__message {
  padding: 0;
  font-size: 14px;
}
#satori__privacy_policy_agreement_wrapper .satori__input_group {
  margin: 16px 0 24px;
  padding: 0;
  font-size: 14px;
}
@media (width < 768px) {
  #satori__custom_form p,
  #satori__custom_form .satori__input_group label {
    font-size: 14px;
  }
  #satori__custom_form .satori__system_notes {
    display: block;
    margin-top: 5px;
  }
  #satori__custom_form input[type="text"],
  #satori__custom_form input[type="email"],
  #satori__custom_form input[type="tel"],
  #satori__custom_form textarea {
    font-size: 16px;
  }
  #satori__custom_form .satori__btn {
    font-size: 14px;
    line-height: 48px;
  }
  #satori__privacy_policy_agreement_wrapper {
    margin: 0;
  }
  #satori__privacy_policy_agreement_wrapper .satori__input_group {
    padding: 0;
  }
  #satori__privacy_policy_agreement_wrapper .satori__input_group input {
    margin-right: 4px;
  }
  #satori__privacy_policy_agreement_wrapper .satori__input_group label {
    display: inline-flex;
  }
}

/* サンクスページ */
section.thanks {
  background: url("/special/assets/img/josys/bg_download.svg") no-repeat right bottom #E3F3FE;
  padding: 160px 0 120px;
}
section.thanks::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 59px;
  background: url("/special/assets/img/josys/bg_type_03.svg") repeat-x center bottom;
  translate: 0 -100%;
}
@media (width < 768px) {
  section.thanks {
    background-size: 640px;
  }
  section.thanks::before {
    height: 40px;
    background-size: auto 100%;
  }
}
section.thanks .p-btn-download {
  margin-top: 100px;
}
section.thanks .p-btn-download > .a {
  display: block;
  position: relative;
  padding: 48px 40px 56px 480px;
  background: linear-gradient(225deg, #009DFF, #00C493);
  border-radius: 320px;
  box-shadow: var(--box-shadow);
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.75;
}
section.thanks .p-btn-download .btn {
  margin-top: 24px;
  text-align: center;
}
section.thanks .p-btn-download .btn .-btn {
  max-width: 416px;
  padding-left: 40px;
  display: inline-flex;
  text-align: left;
}
section.thanks .p-btn-download .btn .-btn::after {
  border-color: #fff;
}
section.thanks .p-btn-download > .a:hover .btn .-btn {
  color: #FF6200;
}
section.thanks .p-btn-download > .a:hover .btn .-btn::before {
  bottom: -100%;
}
section.thanks .p-btn-download > .a:hover .btn .-btn .arw {
  background: #FF6200;
}
section.thanks .p-btn-download > .a:hover .btn .-btn .arw::before {
  margin-left: 32px;
}
section.thanks .p-btn-download > .a:hover .btn .-btn .arw::after {
  margin-left: 0;
}
section.thanks .txtCenter {
  text-align: center;
  margin-top: 60px;
}
section.thanks .txtCenter a {
  color: #009DFF;
}
@media (width < 1024px) {
  .p-service + section.thanks .p-btn-download {
    margin-top: 104px;
  }
  section.thanks .p-btn-download > .a > * {
    position: relative;
  }
  section.thanks .p-btn-download > .a {
    position: relative;
    padding: 0 40px 56px;
    background: none;
    box-shadow: none;
  }
  section.thanks .p-btn-download > .a::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
    background: linear-gradient(225deg, #009DFF, #00C493);
    border-radius: 40px;
    box-shadow: var(--box-shadow);
  }
  section.thanks .p-btn-download .btn .-btn {
    margin: 0 auto;
  }
}
@media (width < 768px) {
  section.thanks {
    padding: 120px 0 40px;
  }
  section.thanks .p-btn-download {
    margin-top: 60px;
  }
  section.thanks .p-btn-download > .a {
    padding: 0 24px 32px;
    font-size: 22px;
  }
  section.thanks .p-btn-download .btn .-btn {
    height: 70px;
    padding: 0 16px 0 20px;
    font-size: 17px;
  }
  section.thanks .p-btn-download .btn .-btn .arw {
    width: 24px;
  }
  section.thanks .p-btn-download .btn .-btn .arw::before,
  section.thanks .p-btn-download .btn .-btn .arw::after {
    width: 13.41px;
  }
  section.thanks .txtCenter {
    margin-top: 40px;
  }
}