@charset "UTF-8";

/*---------------------------------------------------------------*\
$toast notification
\*---------------------------------------------------------------*/

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid #e0e0e0;
  max-width: 400px;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
}

.toast.hidden {
  display: none;
}

.toast-content {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  gap: 12px;
}

.toast-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.toast-message h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.toast-message p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}

.toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.toast-close:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .toast {
    left: 20px;
    right: 20px;
    max-width: none;
    transform: translateY(-100%);
  }

  .toast.show {
    transform: translateY(0);
  }
}

/*---------------------------------------------------------------*\
$contact button
\*---------------------------------------------------------------*/

#contact_button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10;
  border-radius: 10px;
  width: 265px;
  height: 100px;
  background: linear-gradient(95deg, rgba(19, 198, 255, 0.85) 0%, rgba(41, 152, 255, 0.85) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#contact_button .close {
  position: absolute;
  border: solid 1px #0096d7;
  background-color: #fff;
  z-index: 2;
  top: -4px;
  left: -4px;
  width: 24px;
  height: 24px;
}

#contact_button .icon_close {
  width: 8px;
  fill: #0096d7;
}

#contact_button .contact_button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: relative;
  height: 100%;
}

.graphic_contact {
  position: absolute;
  right: 2px;
  bottom: 0;
  width: 100px;
}

#contact_button .title_contact {
  font-size: 16px;
}

#contact_button .subtitle_contact {
  font-size: 11px;
  margin: 8px 0 0 0;
}

#contact_button.hidden {
  display: none;
}


@media screen and (max-width: 600px) {

  #contact_button {
    display: none;
  }
}




/* splide */
.splideClients {
  position: relative;
  margin: 32px 0 56px;
  padding: 64px 0;
  overflow: hidden !important;
}

.splideClients .splide__slide {
  padding: 24px 0;
  border-radius: 5px;
}

.splideClients .splide__slide img {
  height: auto;
  width: 140px;
}


@media screen and (max-width: 750px) {

  /* client logos */
  .splideClients .splide__slide {
    padding: 16px 0;
  }

  .splideClients .splide__slide img {
    width: 110px;
  }
}


@media screen and (max-width: 600px) {

  /* client logos */
  .splideClients {
    margin: 0px 0 56px;
  }
}





/* texts effect */
.c01, .c02 {
  position: relative;
  overflow: hidden;
  width: fit-content;
  color: transparent;
  font-size: 28px;

  &::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0%;
    right: 100%;
    bottom: 0%;
    left: 0%;
    background-color: #fff;
  }

  &.active {
    animation-name: kf_c01a;
    animation-duration: 0s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;

    &::before {
      animation-name: kf_c01b;
      animation-duration: 1s;
      animation-fill-mode: forwards;
    }
  }
}

@keyframes kf_c01a {
  100% {
    color: #fff;
  }
}

@keyframes kf_c01b {
  50% {
    left: 0%;
    right: 0%;
  }

  100% {
    left: 100%;
    right: 0%;
  }
}


@media screen and (max-width: 600px) {

  .c01, .c02 {
    font-size: 22px;
  }
}






/*---------------------------------------------------------------*\
$frame
\*---------------------------------------------------------------*/

.frame {
  width: 90%;
  position: relative;
  max-width: 400px;
  height: calc((100% - 56px));
  backdrop-filter: blur(10px);
  margin: 100% auto 0;
  overflow: hidden;
  z-index: 1;
  border-radius: 40px 40px 0 0;
  border: solid #fff;
  border-width: 8px 8px 0;
  transition: all 1s;
}

.frame_slidInUp {
  margin: 56px auto 0 !important;
}



/*---------------------------------------------------------------*\
$scene 01
\*---------------------------------------------------------------*/

#scene_01 {
  position: relative;
  height: 100%;
  top: 0;
}

/* scene_01 - obj_01 */
#scene_01 .obj_01 {
  gap: 8px;
  position: absolute;
  top: 9%;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
  z-index: 10000;
}

/* scene_01 - obj_02 */
#scene_01 .obj_02 {
  width: 86%;
  height: fit-content;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  opacity: 0;
}

#scene_01 .obj_02.fade_in {
  opacity: 1;
  transition: all 0.5s;
}

#scene_01 .obj_02 .fukidashi {
  width: 220px;
  position: relative;
  margin: 0 auto;
  height: 56px;
  font-size: 22px;
}

#scene_01 .obj_02 .fukidashi:after {
  width: 20px;
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  margin: auto;
  content: '';
  display: block;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  background: linear-gradient(45deg, #fff, #fff);
}

#scene_01 .obj_02 .shop {
  width: 140px;
  margin: 28px auto 0;
}

#scene_01 .obj_02.s1_obj_02_slideUp {
  top: -150px;
  opacity: 1;
  transform: scale(.65);
  transform-origin: top center;
  transition: all 1s;
}

/* scene_01 - obj_03 */
#scene_01 .obj_03 {
  width: 80%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  opacity: 0;
  bottom: -200px;
}

#scene_01 .obj_03.s1_obj_03_fadeInUP {
  bottom: 40px;
  opacity: 1;
  transition: all 1s;
}

#scene_01 .obj_03 .arrow {
  width: 26px;
  margin: 12px auto;
}

#scene_01 .obj_03 .wrap_merchandise {
  height: 92px;
  gap: 20px;
  background-color: #E3EBD2;
  position: relative;
}

#scene_01 .obj_03 .wrap_merchandise:after {
  width: 20px;
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  margin: auto;
  content: '';
  display: block;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  background: linear-gradient(45deg, #E3EBD2, #E3EBD2);
}

#scene_01 .obj_03 .merchandise {
  width: 56px;
}

#scene_01 .obj_03 .logo_shopify {
  width: 100px;
  margin: 0 auto;
  padding: 24px 0 0 0;
}

#scene_01 .obj_03 .title_shopify {
  font-size: 16px;
  margin: 8px 0 0 0;
  padding: 0 0 24px 0;
}

#scene_01.scene_01_fadeOutUP {
  top: -100%;
  transition: all 1s;
}


@media screen and (max-width: 480px) {

  /* scene_01 - obj_01 */
  #scene_01 .obj_01 .wrap_effect {
    top: 7%;
  }

  /* scene_01 - obj_02 */
  #scene_01 .obj_02.s1_obj_02_slideUp {
    top: -160px;
    transform: scale(.8);
    transform-origin: top center;
    width: 200px;
  }

  #scene_01 .obj_02 .shop {
    width: 90px;
  }

  #scene_01 .obj_02 .fukidashi {
    width: 200px;
    font-size: min(6vw, 18px);
    height: 44px;
  }

  #scene_01 .obj_02 .fukidashi:after {
    width: 16px;
    bottom: -12px;
  }

  /* scene_01 - obj_03 */
  #scene_01 .obj_03 .arrow {
    width: 22px;
  }

  #scene_01 .obj_03 .wrap_merchandise {
    height: 80px;
  }

  #scene_01 .obj_03 .merchandise {
    width: 52px;
  }

  #scene_01 .obj_03 .logo_shopify {
    width: 80px;
  }

  /* last logo */
  .scene_logo {
    width: 160px;
  }
}


@media screen and (max-width: 380px) {

  /* scene_01 - obj_02 */
  #scene_01 .obj_02.s1_obj_02_slideUp {
    top: -145px;
    transform: scale(.7);
  }

  /* scene_01 - obj_03 */
  #scene_01 .obj_03 .arrow {
    width: 16px;
  }

  #scene_01 .obj_03 .merchandise {
    width: 40px;
  }

  #scene_01 .obj_03 .logo_shopify {
    width: 64px;
  }
}



/*---------------------------------------------------------------*\
$scene 05
\*---------------------------------------------------------------*/

#scene_05 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 1s;
  gap: 56px;
  padding: 200px 0 0 0;
}

#scene_05.scene_05_fadeIn {
  opacity: 1;
}

#scene_05 #each_advantage_01,
#scene_05 #each_advantage_02,
#scene_05 #each_advantage_03 {
  transition: opacity .5s, transform .5s;
  gap: 16px;
  opacity: 0;
}

#scene_05 #each_advantage_01.opacity_1,
#scene_05 #each_advantage_02.opacity_1,
#scene_05 #each_advantage_03.opacity_1 {
  opacity: 1;
}

#scene_05 .graphic_advantage {
  width: auto;
  height: 64px;
  margin: 0 auto;
}

#scene_05 .subject {
  font-size: 26px;
}

/* scene_05 - obj_13 */
#scene_05 .obj_13 {
  gap: 8px;
  position: absolute;
  top: 9%;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
}


@media screen and (max-width: 480px) {

  #scene_05 {
    gap: 40px;
    padding: 140px 0 0 0;
  }

  #scene_05 .graphic_advantage {
    width: 52px;
  }

  #scene_05 .subject {
    font-size: 19px;
  }

  #scene_05 #each_advantage_01,
  #scene_05 #each_advantage_02,
  #scene_05 #each_advantage_03 {
    gap: 4px;
  }
}



/*---------------------------------------------------------------*\
$scene 02
\*---------------------------------------------------------------*/

#scene_02 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  transition: all 1s;
}

#scene_02.scene_02_slideInUP {
  top: 0;
}

#scene_02.scene_02_slideOutUP {
  top: -100%;
}

/* scene_02 - obj_04 */
#scene_02 .obj_04 {
  gap: 8px;
  position: absolute;
  top: 9%;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
}

/* scene_02 - obj_05 */
#scene_02 .obj_05 {
  margin: 180px 0 0 0;
  width: 90%;
}


@media screen and (max-width: 480px) {

  #scene_02 .obj_05 {
    margin: 140px 0 0 0;
  }
}



/*---------------------------------------------------------------*\
$scene 03
\*---------------------------------------------------------------*/

#scene_03 {
  position: absolute;
  height: 100vh;
  width: 100%;
  top: 100%;
  opacity: 1;
  transition: all 1s;
}

#scene_03.scene_03_slideInUP {
  top: 0;
}

/* scene_03 - obj_09 */
#scene_03 .obj_09 {
  gap: 8px;
  position: absolute;
  top: 9%;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
}

/* scene_03 - obj_10 */
#scene_03 .obj_10 {
  margin: 170px auto 0;
  width: 78%;
  animation: 5s fuwa infinite;
}

@keyframes fuwa {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(30px);
  }
}

/* scene_03 - obj_11 */
#scene_03 .obj_11 {
  position: relative;
  width: 80%;
  margin: 16px auto 0px;
  font-size: 17px;
  padding: 20px 32px;
  opacity: 0;
  scale: .5;
  border-radius: 80px;
  transition: opacity 1.3s, transform .2s;
  transform: scale(1);
  box-shadow: 0px 10px 32px rgb(0 0 0 / 40%);
}

#scene_03 .obj_11.active {
  opacity: 1;
  scale: 1;
}

#scene_03 .obj_11.scaling {
  transform: scale(.8);
}

/* scene_03 - fadeOut */
#scene_03.scene_03_fadeOut {
  opacity: 0;
}


@media screen and (max-width: 480px) {

  /* scene_03 - obj_10 */
  #scene_03 .obj_10 {
    width: 70%;
    margin: 150px auto 0;
  }

  /* scene_03 - obj_11 */
  #scene_03 .obj_11 {
    font-size: 14px;
    padding: 18px 32px;
  }
}



/*---------------------------------------------------------------*\
$scene_04 - kuji画面
\*---------------------------------------------------------------*/

#scene_04 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity 1s;
}

#scene_04.scene_04_fadeOut {
  opacity: 0;
}

/* stripe animation */
.stripe_animation {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stripe_animation div {
  width: calc((100%)/6);
  height: 100%;
  animation: animation01 0.7s cubic-bezier(0.5, 0.1, 0.2, 0.7) forwards;
  transform-origin: top;
  opacity: 0;
}

.stripe_animation div:nth-child(1) {
  background-color: #D62545;
  animation-delay: 0.5s;
}

.stripe_animation div:nth-child(2) {
  background-color: #D62545;
  animation-delay: 0.4s;
}

.stripe_animation div:nth-child(3) {
  background-color: #D62545;
  animation-delay: 0.3s;
}

.stripe_animation div:nth-child(4) {
  background-color: #D62545;
  animation-delay: 0.2s;
}

.stripe_animation div:nth-child(5) {
  background-color: #D62545;
  animation-delay: 0.1s;
}

.stripe_animation div:nth-child(6) {
  background-color: #D62545;
}

@keyframes animation01 {
  0% {
    transform: scale3d(1, 0, 0);
    opacity: 1;
  }

  100% {
    transform: scale3d(2, 1, 1);
    opacity: 1;
  }
}

/* main background */
#main_background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  overflow: hidden !important;
}

#main_background.active {
  opacity: 1;
}

/* stripe */
#stripe {
  opacity: 0;
  transition: all 1.3s;
  scale: 3;
  position: relative;
  z-index: 0;
}

#stripe.active {
  opacity: 1;
  scale: 1;
}

.stripe_1 {
  height: 100%;
  background: linear-gradient(-45deg, #D62545 25%, #BF223C 25%, #BF223C 50%, #D62545 50%, #D62545 75%, #BF223C 75%, #BF223C);
  background-size: 50px 50px;
  animation: anime_stripe_1 .5s infinite linear;
}

@keyframes anime_stripe_1 {
  0% {
    background-position-y: 0;
  }

  100% {
    background-position-y: -50px;
  }
}

/* main content */
#object {
  height: fit-content;
  position: absolute;
  top: 0px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  opacity: 0;
  z-index: 10;
  transition: all 2.5s;
  gap: 56px;
}

.opacity_1 {
  opacity: 1 !important;
}

/* text */
#scene_04 .obj_12 {
  gap: 8px;
  position: relative;
}


@media screen and (max-width: 480px) {

  /* main content */
  #object {
    gap: 40px;
  }
}



/*---------------------------------------------------------------*\
$最終フェーズ
\*---------------------------------------------------------------*/

/* logo */
.scene_logo {
  width: 260px;
  height: fit-content;
  position: absolute;
  z-index: 1;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  transition: all 1s;
}

.scene_logo.logo_fadeIn {
  opacity: 1;
}


@media screen and (max-width: 480px) {

  .scene_logo {
    width: 160px;
  }
}



/*---------------------------------------------------------------*\
$heading
\*---------------------------------------------------------------*/

.wrap_heading {
  width: 100%;
  max-width: calc((1600px + 8%));
  padding: 0 4%;
  gap: 12px;
  margin: 0 auto;
}

.heading {
  font-size: 42px;
}

.subtitle {
  font-size: 140px;
  letter-spacing: -6px;
}


@media screen and (max-width: 1080px) {

  #merrit .wrap_headline,
  #profits .wrap_headline {
    flex-direction: column;
    align-items: flex-start;
  }
}


@media screen and (max-width: 860px) {

  .heading {
    font-size: 32px;
  }

  .subtitle {
    font-size: 120px;
    letter-spacing: -5px;
  }
}


@media screen and (max-width: 600px) {

  .wrap_heading {
    gap: 4px;
  }

  .heading {
    font-size: 17px;
  }

  .subtitle {
    font-size: 80px;
    letter-spacing: -3px;
  }
}


@media screen and (max-width: 480px) {

  .heading {
    font-size: 17px;
  }

  .subtitle {
    font-size: 52px;
    letter-spacing: -2px;
  }
}



/*---------------------------------------------------------------*\
$body
\*---------------------------------------------------------------*/

body {
  position: relative;
  background-color: #A52036;
  -webkit-transition: opacity .8s ease;
  transition: opacity .8s ease;
}



/*---------------------------------------------------------------*\
$parallax
\*---------------------------------------------------------------*/

.wrap_parallax {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.inner_content {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: auto;
  height: 1080px;
}

.visual_business {
  background-image: url('../img/background_fv.png');
}

.visual_casework {
  background-image: url('../img/background_casework.png');
}


@media screen and (max-width: 600px) {

  .inner_content {
    height: 780px;
  }
}



/*---------------------------------------------------------------*\
$firstview
\*---------------------------------------------------------------*/

#firstview {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: auto;
  border: solid 30px #A52036;
}

#firstview .corner_radius {
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 64px;
  aspect-ratio: 1/1;
}

#firstview .corner_radius.left_top {
  background-image: url('../img/corner_radius_left_top.svg');
  top: 0;
  left: 0;
  z-index: 2;
}

#firstview .corner_radius.left_bottom {
  background-image: url('../img/corner_radius_left_bottom.svg');
  bottom: 0;
  left: 0;
  z-index: 2;
}

#firstview .corner_radius.right_bottom {
  background-image: url('../img/corner_radius_right_bottom.svg');
  bottom: 0;
  right: 0;
  z-index: 2;
}

/* motion */
#firstview .motion {
  width: 40%;
  min-width: 460px;
  height: calc(100% - 60px);
  margin-left: 30px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  border-radius: 40px;
}

/* info */
#firstview .info {
  width: 100%;
  gap: 32px;
}

#firstview .logo {
  width: 400px;
  margin: 0 auto;
}

#firstview .tagline {
  font-size: 36px;
}

#firstview .badges {
  gap: 12px;
}

#firstview .each_badge {
  position: relative;
  width: 13.5vw;
  max-width: 180px;
  aspect-ratio: 1 / 1;
}

#firstview .each_badge:after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  width: 100%;
  aspect-ratio: 1/1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation-duration: 100s;
  animation-timing-function: linear;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-name: Background1
}

#firstview .each_badge .subject {
  position: relative;
  z-index: 2;
  font-size: 20px;
}

#firstview .badge_01:after {
  background-image: url('../img/badge_fv_red.svg');
}

#firstview .badge_02:after {
  background-image: url('../img/badge_fv_blue.svg');
}

#firstview .badge_03:after {
  background-image: url('../img/badge_fv_gold.svg');
}

@keyframes Background1 {
  0% {
    border-width: 100px;
    transform: rotate(0deg);
    /* rotateZでZ軸(平面)の回転角度を指定 */
  }

  12.5% {
    border-width: 75px;
    transform: rotate(90deg);
    /* rotateZでZ軸(平面)の回転角度を指定 */
  }

  25% {
    border-width: 50px;
    transform: rotate(180deg);
    /* rotateZでZ軸(平面)の回転角度を指定 */
  }

  37.5% {
    border-width: 25px;
    transform: rotate(270deg);
    /* rotateZでZ軸(平面)の回転角度を指定 */
  }

  50% {
    border-width: 0px;
    transform: rotate(360deg);
    /* rotateZでZ軸(平面)の回転角度を指定 */
  }

  62.5% {
    border-width: 25px;
    transform: rotate(450deg);
    /* rotateZでZ軸(平面)の回転角度を指定 */
  }

  75% {
    border-width: 50px;
    transform: rotate(540deg);
    /* rotateZでZ軸(平面)の回転角度を指定 */
  }

  87.5% {
    border-width: 75px;
    transform: rotate(630deg);
    /* rotateZでZ軸(平面)の回転角度を指定 */
  }

  100% {
    border-width: 100px;
    transform: rotate(720deg);
    /* rotateZでZ軸(平面)の回転角度を指定 */
  }
}


@media screen and (max-height: 880px) {

  #firstview {
    height: 110vh;
  }
}


@media screen and (max-width: 1280px) {

  /* info */
  #firstview .logo {
    width: 31vw;
  }

  #firstview .tagline {
    font-size: 3.3vw;
    ;
  }

  #firstview .each_badge .subject {
    font-size: 1.6vw;
  }
}


@media screen and (max-width: 1080px) {

  #firstview {
    border: solid 20px #A52036;
  }

  /* info */
  #firstview .badges {
    gap: 8px;
  }
}


@media screen and (max-width: 960px) {

  #firstview {
    height: fit-content;
    flex-direction: column-reverse;
    padding: 80px 0 0;
    gap: 48px;
    border: solid 16px #A52036;
  }

  /* motion */
  #firstview .motion {
    height: 760px;
    width: 100%;
    min-width: inherit;
    border-radius: 0px;
    margin: 0;
  }

  /* info */
  #firstview .logo {
    width: 300px;
  }

  #firstview .tagline {
    font-size: min(4vw, 28px);
  }

  #firstview .each_badge {
    width: 26vw;
    max-width: 180px;
  }

  #firstview .each_badge .subject {
    font-size: min(2.8vw, 23px);
  }
}


@media screen and (max-width: 600px) {

  #firstview {
    height: auto;
    padding: 64px 0 0;
    border: solid 12px #A52036;
    border-bottom: solid 24px #a52036;
    gap: 32px;
  }

  #firstview .corner_radius {
    width: 32px;
  }

  /* motion */
  #firstview .frame {
    border-radius: 24px 24px 0 0;
    border-width: 4px 4px 0;
  }

  /* info */
  #firstview .info {
    gap: 24px;
  }

  #firstview .logo {
    width: min(45vw, 220px);
  }

  #firstview .tagline {
    font-size: 22px;
  }

  #firstview .each_badge .subject {
    font-size: 3.2vw;
  }
}


@media screen and (max-width: 480px) {

  /* motion */
  #firstview .motion {
    height: 700px;
  }
}


@media screen and (max-width: 380px) {

  /* motion */
  #firstview .motion {
    height: 620px;
  }
}


@media screen and (min-width: 1500px) {

  /* motion */
  #firstview .motion {
    width: 50%;
  }

  /* info */
  #firstview .badges {
    gap: 20px;
  }
}



/*---------------------------------------------------------------*\
$introduction
\*---------------------------------------------------------------*/

#introduction .content {
  width: 100%;
}

#introduction .upper_content {
  padding: 64px 4%;
  gap: 4px;
  position: relative;
}

#introduction .fukidashi {
  position: relative;
  z-index: 2;
  width: fit-content;
}

#introduction .headline {
  font-size: 77px;
  position: relative;
  z-index: 2;
  max-width: calc((1600px - 10%));
}

#introduction .middle_content {
  padding: 0 4%;
  max-width: 1600px;
  margin: 0 auto;
  gap: 40px;
}

#introduction .description {
  font-size: min(1.8vw, 23px);
  line-height: 2.4;
  padding: 72px 0;
  min-height: 300px;
  letter-spacing: 0.3px;
}

#introduction .wrap_graphic {
  width: 440px;
  height: 100%;
  position: relative;
  flex-shrink: 0;
}

#introduction .graphic {
  width: 100%;
  position: absolute;
  top: -66px;
  left: 0;
  right: 0;
  margin: auto;
}

#introduction .detail {
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  padding: 0 4%;
  gap: 40px;
  position: relative;
  z-index: 2;
}

#introduction .each_detail {
  position: sticky;
  top: 64px;
  width: 100%;
  padding: 24px;
  gap: 40px;
  box-shadow: 0px 20px 30px 0px rgba(226, 236, 249, 0.4);
}

#introduction .number {
  font-size: 15px;
}

#introduction .subject {
  font-size: 40px;
  margin: 8px 0 0 8px;
  gap: 16px;
}

#introduction .advantages {
  gap: 10px;
  width: 60%;
  flex-shrink: 0;
}

#introduction .each_advantage {
  padding: 20px 16px;
  gap: 12px;
}

#introduction .icon {
  width: 48px;
  aspect-ratio: 1/1;
  flex-shrink: 0;
}

#introduction .icon img {
  width: 100%;
}

#introduction .decolation {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background-image: url('../img/dots_blue_bottom_left.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100px;
  aspect-ratio: 1/1;
}


@media screen and (max-width: 1080px) {

  #introduction .wrap_graphic {
    width: 380px;
  }

  #introduction .graphic {
    top: -40px;
  }
}


@media screen and (max-width: 860px) {

  #introduction .fukidashi {
    width: min(30vw, 220px);
    min-width: 140px;
  }

  #introduction .headline {
    font-size: min(10vw, 60px);
  }

  #introduction .each_detail {
    flex-direction: column;
  }

  #introduction .advantages {
    width: 100%;
  }

  #introduction .decolation {
    display: none;
  }

  #introduction .description {
    font-size: 17px;
  }

  #introduction .wrap_graphic {
    max-width: 370px;
  }
}


@media screen and (max-width: 760px) {

  #introduction .upper_content {
    padding: 64px 4% 32px;
  }

  #introduction .middle_content {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  #introduction .description {
    min-height: inherit;
    padding: 32px 0 0;
  }

  #introduction .wrap_graphic {
    width: 100%;
    height: 360px;
  }

  #introduction .graphic {
    top: 0;
  }
}


@media screen and (max-width: 600px) {

  #introduction .headline {
    font-size: min(10vw, 36px);
  }

  #introduction .subject {
    font-size: 24px;
  }

  #introduction .description {
    font-size: 15px;
  }

  #introduction .wrap_graphic {
    max-width: 280px;
    height: 270px;
    margin: 0 auto;
  }

  #introduction .graphic {
    width: 100%;
  }

  #introduction .detail {
    gap: 24px;
  }

  #introduction .each_detail {
    padding: 12px;
    gap: 24px;
  }

  #introduction .number {
    font-size: 11px;
  }

  #introduction .subject {
    gap: 8px;
  }

  #introduction .each_advantage {
    padding: 12px;
    gap: 8px;
  }

  #introduction .icon {
    width: 26px;
  }
}



/*---------------------------------------------------------------*\
$about
\*---------------------------------------------------------------*/

#about {
  width: 100%;
  max-width: calc((1600px + 8%));
  margin: 0 auto;
  padding: 150px 4% 0;
  gap: 80px;
}

#about .description {
  gap: 32px;
}

#about .main_sentence {
  gap: 32px;
}

#about .main_sentence .logo {
  gap: 10px;
}

#about .main_sentence span {
  font-size: 48px;
}

#about .main_sentence p {
  font-size: 40px;
  line-height: 1.6;
}

#about .sub_sentence {
  line-height: 2.2;
}

#about .graphic {
  padding: 64px;
}


@media screen and (max-width: 860px) {

  #about .main_sentence p {
    font-size: 32px;
  }

  /* graphic */
  #about .sub_sentence {
    font-size: 20px;
  }
}


@media screen and (max-width: 600px) {

  #about {
    padding: 100px 4% 0;
    gap: 40px;
  }

  #about .main_sentence {
    gap: 12px;
  }

  #about .description {
    gap: 24px;
  }

  #about .main_sentence .logo {
    width: 160px;
  }

  #about .main_sentence span {
    font-size: 28px;
  }

  #about .main_sentence p {
    font-size: 22px;
  }

  #about .sub_sentence {
    font-size: 15px;
  }

  /* graphic */
  #about .graphic {
    padding: 32px;
  }
}



/*---------------------------------------------------------------*\
$merrit
\*---------------------------------------------------------------*/

#merrit {
  padding: 150px 0 0;
  gap: 64px;
}

/* carousel */
#merrit .wrap_carousel {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#merrit .wrap_carousel:-webkit-scrollbar {
  display: none;
}

#merrit .carousel {
  display: flex;
  width: fit-content;
  padding: 0 4%;
  gap: 32px;
}

#merrit .carousel .each_slide {
  width: 680px;
  padding: 80px 40px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  position: relative;
}

#merrit .carousel .decolation {
  position: absolute;
  top: 20px;
  right: 20px;
  background-image: url('../img/dots_red_top_right.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 120px;
  aspect-ratio: 1/1;
  z-index: 1;
}

#merrit .carousel .job_title {
  font-size: 32px;
  line-height: 1.3;
  position: relative;
  z-index: 2;
}

#merrit .carousel .advantages {
  gap: 10px;
}

#merrit .carousel .each_advantage {
  padding: 20px;
  position: relative;
  gap: 12px;
  background-color: rgba(0, 0, 0, .13);
}

#merrit .carousel .icon {
  flex-shrink: 0;
  width: 48px;
}


@media screen and (max-width: 600px) {

  #merrit {
    padding: 100px 0 0;
    gap: 32px;
  }

  /* content */
  #merrit .carousel {
    gap: 20px;
  }

  #merrit .carousel .each_slide {
    width: 310px;
    gap: 24px;
    padding: 40px 16px 16px 16px;
  }

  #merrit .carousel .decolation {
    width: 64px;
    top: 14px;
    right: 14px;
  }

  #merrit .carousel .job_title {
    font-size: 22px;
  }

  #merrit .carousel .each_advantage {
    padding: 12px;
    gap: 8px;
  }

  #merrit .carousel .icon {
    width: 24px;
  }
}



/*---------------------------------------------------------------*\
$profits
\*---------------------------------------------------------------*/

#profits {
  padding: 100px 0 180px;
  gap: 64px;
}

/* content */
#profits .cases {
  max-width: calc((1600px + 8%));
  width: 100%;
  margin: 0 auto;
  padding: 0 4%;
  gap: 48px;
}

#profits .each_case {
  padding: 64px;
  gap: 56px;
}

#profits .info {
  width: 100%;
  gap: 32px;
}

#profits .subject {
  font-size: 36px;
}

#profits .figure {
  flex-shrink: 0;
  width: 420px;
}


@media screen and (min-width: 1500px) {

  #profits .figure {
    width: 520px;
  }
}


@media screen and (max-width: 1200px) {

  #profits .figure {
    width: 380px;
  }
}


@media screen and (max-width: 1080px) {

  #profits .each_case {
    flex-direction: column;
  }

  #profits .info {
    width: 100%;
  }
}


@media screen and (max-width: 600px) {

  #profits {
    padding: 100px 0;
    gap: 40px;
  }

  /* content */
  #profits .cases {
    gap: 24px;
  }

  #profits .each_case {
    padding: 40px 24px;
  }

  #profits .subject {
    font-size: 20px;
  }

  #profits .figure {
    width: 90%;
  }
}



/*---------------------------------------------------------------*\
$steps
\*---------------------------------------------------------------*/

#steps {
  padding: 100px 0 120px;
  border-radius: 0px 84px 0 0;
}

/* heading */
#steps .headline {
  width: 100%;
  max-width: calc((1600px + 8%));
  padding: 0 5%;
  font-size: 44px;
  margin: 0 auto;
}

/* content */
#steps .steps {
  width: 100%;
  max-width: calc((1600px + 8%));
  padding: 0 4%;
  gap: 24px;
  margin: 64px auto 0;
}

#steps .arrow {
  width: 36px;
  margin-left: calc((240px - 18px));
}


#steps .each_step {
  gap: 40px;
  position: relative;
}

#steps .badge {
  position: absolute;
  top: -10px;
  left: -10px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 110px;
  aspect-ratio: 1/1;
}

#steps .step_01 {
  background-image: url('../img/badge_step_01.svg');
}

#steps .step_02 {
  background-image: url('../img/badge_step_02.svg');
}

#steps .step_03 {
  background-image: url('../img/badge_step_03.svg');
}

#steps .step_04 {
  background-image: url('../img/badge_step_04.svg');
}

#steps .subject {
  gap: 16px;
  width: 480px;
  height: 220px;
  flex-shrink: 0;
}

#steps .icon {
  width: 64px;
}

#steps .text {
  font-size: 26px;
}

#steps .info {
  gap: 32px;
}

#steps .description {
  width: 100%;
}

#steps .list {
  gap: 16px;
}


@media screen and (max-width: 1280px) {

  #steps .subject {
    width: 350px;
  }

  #steps .arrow {
    margin-left: calc((190px - 18px));
  }
}


@media screen and (max-width: 1080px) {

  #steps .headline {
    text-align: left;
  }
}


@media screen and (max-width: 960px) {

  #steps .subject {
    width: 300px;
  }

  #steps .arrow {
    margin-left: calc((150px - 18px));
  }
}


@media screen and (max-width: 860px) {

  #steps .subject {
    width: 100%;
    gap: 10px;
  }

  #steps .arrow {
    margin-left: calc((50% - 12px));
    width: 24px;
  }

  #steps .each_step {
    flex-direction: column;
  }
}


@media screen and (max-width: 600px) {

  #steps {
    padding: 64px 0 80px;
  }

  #steps .headline {
    font-size: 26px;
  }

  #steps .steps {
    gap: 32px;
    margin: 40px 0 0 0;
  }

  #steps .each_step {
    gap: 16px;
  }

  #steps .subject {
    height: 110px;
  }

  #steps .badge {
    width: 64px;
    top: -4px;
    left: -4px;
  }

  #steps .icon {
    width: 42px;
  }

  #steps .text {
    font-size: 16px;
  }
}


/*---------------------------------------------------------------*\
$features
\*---------------------------------------------------------------*/

#features {
  margin: 100px 0 0 0;
}

#features .wrap {
  width: 100%;
  max-width: calc((1600px + 8%));
  margin: 80px auto 0;
  gap: 24px;
  padding: 0 4%;
}

#features .each_feature {
  width: calc((100% - 48px)/3);
  padding: 20px;
  gap: 20px;
}

#features .subject {
  font-size: 26px;
}

#features .description {
  font-size: 19px;
}


@media screen and (max-width: 1280px) {

  #features .each_feature {
    width: calc((100% - 48px)/2);
  }
}


@media screen and (max-width: 600px) {

  #features .wrap {
    margin: 40px auto 0;
  }

  #features .each_feature {
    width: calc((100%)/1);
    gap: 14px;
    position: sticky;
    top: 48px;
    padding: 16px;
  }

  #features .subject {
    font-size: 18px;
  }

  #features .description {
    font-size: 14px;
  }
}



/*---------------------------------------------------------------*\
$design
\*---------------------------------------------------------------*/

#design {
  padding: 150px 0 0;
  gap: 64px;
}

/* heading */
#design .wrap_heading {
  gap: 24px;
}

#design .headline {
  font-size: 44px;
}

#design .description {
  width: 80%;
}

/* carousel */
#design .wrap_carousel {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#design .wrap_carousel:-webkit-scrollbar {
  display: none;
}

#design .carousel {
  display: flex;
  width: fit-content;
  padding: 0 4%;
  gap: 48px;
}

#design .carousel .fukidashi {
  padding: 16px 0;
  width: 100%;
  font-size: 19px;
  position: relative;
}

#design .carousel .fukidashi:after {
  display: block;
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: -15px;
  margin: auto;
  height: 16px;
  aspect-ratio: 2;
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  background: linear-gradient(45deg, #111, #111);
}

#design .carousel .each_slide {
  width: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  position: relative;
}

#design .carousel .screenshot {
  border-radius: 20px;
}


@media screen and (min-width: 1724px) {

  #design .carousel .each_slide {
    width: calc((100%)/4);
  }
}


@media screen and (max-width: 600px) {

  #design {
    padding: 100px 0 0;
    gap: 32px;
  }

  /* heading */
  #design .headline {
    font-size: 26px;
  }

  #design .description {
    width: 100%;
  }


  /* content */
  #design .carousel {
    gap: 40px;
  }

  #design .carousel .fukidashi {
    font-size: 15px;
    padding: 12px 0;
  }

  #design .carousel .fukidashi:after {
    bottom: -9px;
    height: 10px;
  }

  #design .carousel .each_slide {
    width: 300px;
  }

  #design .carousel .screenshot {
    border-radius: 12px;
  }
}


/*---------------------------------------------------------------*\
$casework
\*---------------------------------------------------------------*/

#casework {
  padding: 150px 0 0;
}

/* upper content */
#casework .upper_content {
  height: 320px;
  padding: 0 0 64px 0;
  position: relative;
  margin: 56px 0 0 0;
}

#casework .topic {
  font-size: 48px;
  padding: 0 4%;
  width: 100%;
  gap: 4px;
  position: relative;
  z-index: 1;
}

/* middle_content */
#casework .detail {
  width: 96%;
  padding: 4%;
  border-radius: 32px 0 0 32px;
  gap: 36px;
  position: relative;
  z-index: 2;
  margin: -94px 0 0 auto;
}

#casework .each_detail {
  gap: 16px;
}

#casework .subject {
  font-size: 28px;
}

#casework .situation {
  padding: 32px;
}

#casework .number {
  width: fit-content;
  padding: 8px 16px;
}


@media screen and (max-width: 1280px) {

  /* middle content */
  #casework .summary {
    width: 280px;
  }
}


@media screen and (max-width: 960px) {

  /* middle content */
  #casework .summary {
    width: 250px;
  }
}


@media screen and (max-width: 860px) {

  /* upper content */
  #casework .topic {
    font-size: 40px;
    padding: 0 32px;
  }
}


@media screen and (max-width: 600px) {

  #casework {
    padding: 100px 0 0;
  }

  /* upper content */
  #casework .upper_content {
    height: auto;
    margin: 40px 0 0 0;
  }

  #casework .topic {
    padding: 32px 6% 16px;
    font-size: 24px;
    border-radius: 32px 32px 0 0;
  }

  #casework .topic .number {
    font-size: 13px;
  }

  /* middle content */
  #casework .middle_content {
    flex-direction: column-reverse;
  }

  #casework .detail {
    width: 92%;
    padding: 32px 20px 20px;
    margin: -56px auto 0;
    border-radius: 20px;
  }

  #casework .subject {
    font-size: 18px;
  }

  #casework .situation {
    padding: 16px;
  }
}



/*---------------------------------------------------------------*\
$voices
\*---------------------------------------------------------------*/

#voices {
  padding: 150px 0 0;
  position: relative;
}

/* content */
#voices .wrap_content {
  position: relative;
}

/* background */
#voices .wrap_background {
  height: 720px;
  margin: 56px 0 0 0;
  position: relative;
  z-index: 0;
}

#voices .left_background {
  width: 100%;
  position: relative;
  border-radius: 0 40px 40px 0;
}

#voices .right_blank {
  max-width: 400px;
  width: 10%;
  flex-shrink: 0;
}

/* content */
#voices .content {
  position: absolute;
  padding: 0 0 0 4%;
  width: 100%;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  gap: 56px;
}

#voices .content .profile {
  gap: 16px;
  position: relative;
}

#voices .content .profile:after {
  display: block;
  content: '';
  position: absolute;
  top: calc((130px - 20px));
  right: -58px;
  height: 40px;
  aspect-ratio: cos(30deg);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  background: linear-gradient(45deg, #fff, #fff);
}

#voices .content .thumbnail {
  width: 260px;
  aspect-ratio: 1/1;
  flex-shrink: 0;
  border: solid 6px #fff;
}

#voices .content .info {
  gap: 8px;
}

#voices .content .name {
  font-size: 40px;
}

#voices .content .company,
#voices .content .post {
  font-size: 17px;
}

#voices .content .fukidashi {
  width: 100%;
  padding: 80px;
  gap: 24px;
  border-radius: 32px 0 0 32px;
  position: relative;
}


@media screen and (max-width: 1280px) {

  /* backgorund */
  #voices .right_blank {
    width: 16%;
  }
}


@media screen and (max-width: 960px) {

  /* content */
  #voices .content .fukidashi {
    padding: 48px;
  }
}


@media screen and (max-width: 860px) {

  /* background */
  #voices .wrap_background {
    height: 820px;
  }

  /* content */
  #voices .content .thumbnail {
    width: 200px;
  }

  #voices .content .profile:after {
    top: calc((100px - 16px));
    height: 32px;
  }
}


@media screen and (max-width: 600px) {

  #voices {
    padding: 100px 0 0;
  }

  /* backgorund */
  #voices .wrap_background {
    height: 620px;
    margin: 40px 0 0 0;
  }

  #voices .left_background {
    border-radius: 0 20px 20px 0;
  }

  #voices .right_blank {
    width: 8%;
  }

  /* content */
  #voices .content {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5%;
    padding: 0 0 0 6%;
  }

  #voices .content .profile {
    flex-direction: row;
    gap: 14px;
  }

  #voices .content .profile:after {
    width: 26px;
    height: 18px;
    top: inherit;
    bottom: -32px;
    left: calc((60px - 13px));
    right: 0;
    aspect-ratio: 1 / cos(30deg);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(45deg, #fff, #fff);
  }

  #voices .content .thumbnail {
    width: 120px;
    border: solid 3px #fff;
  }

  #voices .content .info {
    align-items: flex-start;
    justify-content: center;
  }

  #voices .content .name {
    font-size: 24px;
  }

  #voices .content .company,
  #voices .content .post {
    font-size: 11px;
  }

  #voices .content .fukidashi {
    padding: 24px;
    border-radius: 16px 0 0 16px;
  }
}



/*---------------------------------------------------------------*\
$faq
\*---------------------------------------------------------------*/

#faq {
  padding: 150px 0 0;
}

#faq .accordion {
  width: 100%;
  max-width: calc((1600px + 8%));
  padding: 80px 4% 0;
  margin: 0 auto;
  gap: 24px;
}

#faq .accordion_item {
  cursor: pointer;
}

#faq .accordion__title {
  position: relative;
  font-weight: bold;
  padding: 40px 80px 40px 40px;
  cursor: pointer;
}

#faq .accordion__title:before,
#faq .accordion__title:after {
  content: "";
  position: absolute;
  right: 40px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: #13C6FF;
  width: 20px;
  height: 4px;
  transition: all 0.3s;
  border-radius: 8px;
}

#faq .accordion__title:after {
  transform: rotate(90deg);
}

#faq .accordion__content {
  display: none;
  cursor: pointer;
  padding: 0 40px 40px 40px;
}

#faq .accordion__content.is-open {
  display: block;
}

#faq .accordion_item.is-active .accordion__title::before {
  transform: rotate(180deg);
}

#faq .accordion_item.is-active .accordion__title::after {
  transform: rotate(180deg);
  opacity: 0;
}

.js-accordion-trigger {
  pointer-events: none;
}

.accordion__title {
  pointer-events: auto;
}



@media screen and (max-width: 600px) {

  #faq {
    padding: 100px 0 0;
  }

  /* accordion */
  #faq .accordion {
    gap: 16px;
    padding: 40px 4% 0;
  }

  #faq .accordion__title {
    padding: 18px 50px 18px 18px;
  }


  #faq .accordion__title:before,
  #faq .accordion__title:after {
    width: 14px;
    height: 3px;
    right: 20px;
  }

  #faq .accordion__content {
    padding: 0 18px 18px 18px;
  }
}



/*---------------------------------------------------------------*\
$ask
\*---------------------------------------------------------------*/

#ask {
  overflow: hidden;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}



/*---------------------------------------------------------------*\
$core content
\*---------------------------------------------------------------*/

.wrapper_radius {
  border-collapse: separate;
  overflow: visible;
}

.core_content {
  width: 100%;
  border-bottom: solid 2px rgb(245, 251, 255);
}

/* content */
.content {
  width: calc((100% - 160px));
  transition: all 0.5s 0s ease;
  overflow: clip;
}



/*---------------------------------------------------------------*\
$contact
\*---------------------------------------------------------------*/

/* common */
#contact {
  padding: 200px 0 100px;
}

/* form */
#contact .form {
  width: 96%;
  margin: 56px auto 0 0;
  position: relative;
  border-radius: 0 12px 12px 0;
  padding: 64px 4%;
  background-color: #fff;
}

/* step */
#contact .form .step {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

#contact .form .notes>ul {
  gap: 20px;
}

#contact .form .note {
  gap: 4px;
}

#contact .form .note * {
  font-size: 15px;
  font-weight: 400 !important;
}

/* input */
#contact .form .form_input,
#contact .form .form_input_area {
  background-color: #fafafa;
  width: 100%;
  padding: 28px 20px;
  margin: 24px 0 0 0;
  border: none;
  border-radius: 8px;
}

#contact .form .form_input::placeholder,
#contact .form .form_input_area::placeholder {
  font-size: 18px;
}

#contact .form .form_input_area {
  height: 500px;
}

#contact .form .title_input {
  margin-right: 8px;
}

#contact .form .must {
  color: #C95858;
  font-size: 13px;
  font-weight: 580 !important;
  margin: 0 0 0 8px;
  border: solid 1px #C95858;
  padding: 3px;
  border-radius: 3px;
}

/* select */
#contact .form .form_select {
  margin: 16px 0 0 0;
  height: 64px;
  border: none;
  border-radius: 8px;
  color: #2a2a2a;
  background-color: #fafafa;
}

/* radio, checkbox */
#contact .form .radio,
#contact .form .checkbox {
  gap: 20px;
}

.wpcf7-radio,
.wpcf7-checkbox {
  display: flex;
  align-items: center;
  gap: 32px;
}

.wpcf7-radio .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.wpcf7-radio input,
.wpcf7-checkbox input {
  width: 28px;
  height: 28px;
  border: none;
}

/* buttons */
#contact .wrap_buttons {
  gap: 24px;
  margin: 80px 0 0 0;
}

#contact .wpcf7-submit,
#contact .form .button {
  width: 100%;
  height: 94px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: none;
  border-radius: 80px;
  color: #2a2a2a;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

#contact .wpcf7-submit {
  background-color: #13C6FF;
  color: #fff;
}

#contact .wpcf7-submit:hover {
  background-color: #13C6FF;
}

#contact .form .button {
  background-color: #f5f5f5;
}

#contact .form .button:hover {
  background-color: #2a2a2a;
  color: #fff;
}


@media screen and (max-width: 960px) {

  /* description & notes */
  #contact .form .wrap_description {
    width: 90%;
  }

  #contact .form .notes {
    max-width: inherit;
  }

  #contact .form .notes .subject_notes {
    font-size: 16px;
  }

  #contact .form .note * {
    font-size: 14px;
  }

  /* steps */
  #contact .form .steps .upload {
    flex-direction: column;
  }
}


@media screen and (max-width: 600px) {

  #contact {
    padding: 120px 0 80px;
  }

  #contact .form {
    padding: 40px 5% 64px;
    margin: 48px 0 0 0;
  }

  /* headline */
  #contact .form .headline {
    font-size: 26px;
  }

  /* description & notes */
  #contact .form .note * {
    font-size: 13px;
  }

  #contact .form .notes .subject_notes {
    gap: 6px;
  }

  #contact .form .notes .subject_notes .icon {
    width: 16px;
  }

  /* input */
  #contact .form .form_input,
  #contact .form .form_input_detail {
    margin: 16px 0 0 0;
    padding: 20px 16px;
  }

  #contact .form .form_input_area {
    padding: 12px;
  }

  #contact .form .form_input::placeholder,
  #contact .form .form_input_area::placeholder {
    font-size: 13px;
  }

  #contact .form .title_input {
    font-size: 15px;
  }

  #contact .form .form_select {
    height: 48px;
  }

  #contact .form .must {
    font-size: 11px;
  }

  /* radio, checkbox */
  .wpcf7-radio input,
  .wpcf7-checkbox input {
    width: 24px;
    height: 24px;
  }

  .wpcf7-radio .wpcf7-list-item,
  .wpcf7-checkbox .wpcf7-list-item {
    gap: 4px;
  }

  /* button */
  #contact .wrap_buttons {
    gap: 16px;
  }

  #contact .wpcf7-submit,
  #contact .form .button {
    width: 100%;
    height: 56px;
  }

  /* error message */
  .error-message {
    font-size: 11px !important;
  }
}



/*---------------------------------------------------------------*\
$confirmation - Step 02
\*---------------------------------------------------------------*/

#contact .form .step-2 {
  padding: 48px 0 0 0;
}

#contact .form .step-2 .wrap {
  gap: 32px;
}

#contact .step-2 .each_conf {
  gap: 12px;
}

#contact .step-2 .each_conf dt {
  font-size: 16px;
}

#contact .step-2 .border {
  border: solid 1px #eee;
}


@media screen and (max-width: 600px) {

  #contact .form .step-2 {
    padding: 80px 0 0 0;
  }

  #contact .form .step-2 .wrap {
    padding: 32px 24px 24px;
  }

  #contact .step-2 .each_conf dt {
    font-size: 13px;
  }
}