@charset "utf-8";
/* ================================================================== */
/* ==============================COMMON============================== */
/* ================================================================== */
:root {
  --primary-Black: #252525;
  --primary-White: #fff;
  --primary-Blue: #30D5C8;
  --contentWidth: 84%;
  --contentPadding: 4.2%;
}

html {
  font-size: 62.5%;
  background-color: var(--primary-White, #fff);
}

body {
  font-family: "M PLUS 1p", "Roboto", sans-serif;
  font-weight: 400;
  line-height: normal;
  font-style: normal;
  font-optical-sizing: auto;
  color: var(--primary-Black, #252525);
}

img {
  max-width: 100%;
  height: auto;
}
main {
  margin: 320px auto 0;
}
/* ===================================================================== */
/* ============================== tilte css ============================ */
/* ===================================================================== */
.topics {
  text-align: center;
  font-family: "M PLUS 1p";
  font-size: 3rem;
  font-weight: 800;
}

.topics--comp {
  font-size: 2.5rem;
  line-height: normal;
}


.topics__sub {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Roboto;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 6.4px;
}

.topics__sub::after {
  display: flex;
  content: "";
  margin-left: 0px;
  width: 30px;
  height: 5px;
  background-color: var(--primary-Blue);
}

.topics__sub::before {
  display: flex;
  content: "";
  margin-right: 9px;
  width: 30px;
  height: 5px;
  background-color: var(--primary-Blue);
}

.topics__sub--conme::after,
.topics__sub--conme::before,
.topics__sub--abu::after,
.topics__sub--abu::before {
  width: 15px;
}

.topics__sub--abu::after {
  margin-right: 2px;
}

.topics__sub--abu::before {
  margin-left: -3px;
}

.topics__sub--conme::after {
  width: 15px;
  margin-left: 0;
}

.topics__sub--conme::before {
  margin-right: 5px;
}

.topics__sub--conmp {
  font-size: 14px;
  letter-spacing: 2.1px;
  justify-content: space-between;
}

.topics__sub--conmp::after,
.topics__sub--conmp::before {
  width: 15px;
}


/* ===================================================================== */
/* ============================== btn css ============================ */
/* ===================================================================== */
.btn__txt--sub {
  display: flex;
  height: 20px;
  padding: 0 15px;
  align-items: center;
  gap: 10px;
  border-radius: 150px;
  border: 1px solid var(--primary-White);
  background: var(--primary-Black);
  box-shadow: 3px 3px 0 0 var(--primary-Black);
}

.btn__txt--demo {
  margin: 25px 100px 0;
}

.btn__txt {
  text-align: center;
  font-family: "M PLUS 1p";
  color: var(--primary-White);
  font-size: 1rem;
}

.btnImg {
  display: flex;
padding: 1.5px;
justify-content: center;
align-items: center;
border-radius: 2.5px;
background: var(--primary-Blue);
}

.btn__txt--sub img {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

.btn__box--conpri {
  padding: 0 20px;
  width: 230px;
  height: 30px;
}

.btn__box--send {
  height: 30px;
  padding: 0px 20px;
  width: 230px;
}

.btn__box--send:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.btnsubImg--send {
  padding: 3.5px!important;
}

/* ===================================================================== */
/* ====================== TOP page topabout hover ====================== */
.topWork__item:hover,
.Work__item:hover {
  border-radius: 10px;
  background: var(--primary-Black);
  color: var(--primary-White);
  transition: 0.5s;
}

.topWork__item:hover .btn__txt--sub,
.Work__item:hover .btn__txt--sub  {
border: 1px solid var(--primary-Black);
background: var(--primary-White);
box-shadow: 3px 3px 0 0 var(--primary-White);
transition: 0.5s;
}

.topWork__item:hover .btn__txt,
.Work__item:hover .btn__txt {
  color: var(--primary-Black);
  transition: 0.5s;

}

.topWork__item:hover .btn__txt,
.Work__item:hover .btn__txt {
  color: var(--primary-Black);
  transition: 0.5s;

}

.btn__txt--sub:hover {
  border: none;
  box-shadow: none !important;
  transition: 0.5s;
}

/* ============================================================================ */
.btn__txt--sub:hover,
.workDateilBtn__btnboxright:hover,
.workDateilBtn__btnboxleft:hover {
  border: none;
  box-shadow: none !important;
  transition: 0.5s;
}
/* ============================================================================ */

.btn__box {
display: flex;
width: 219px;
height: 30px;
padding: 0 20px;
justify-content: space-between;
align-items: center;
border-radius: 150px;
border: 1px solid var(--primary-White);
background: var(--primary-Black);
box-shadow: 3px 3px 0 0 var(--primary-Black);
}

.btn__boxtext {
  color: var(--primary-White);
  text-align: center;
  font-family: "M PLUS 1p";
  font-size: 1.6rem;
}

.btnsubImg {
  display: flex;
  /* padding: 3.5px; */
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  background: var(--primary-Blue);
}

.btnsubImg--work {
  padding: 2.5px;
}

.btnsubImg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

.hover {
width: 11px;
height: 13px;
}

.btn__box:hover {
  background-color: var(--primary-White);
  border: 1px solid var(--primary-Black);
  transition: 0.5s;
}

.btn__box:hover .btn__boxtext {
color: var(--primary-Black);
transition: 0.5s;
}

.btn__box:hover .btnsubImg {
color: var(--primary-Blue);
transition: 0.5s;
}

.btn__box:hover .hover {
color: var(--primary-Blue);
transition: 0.5s;
}

.btn__box--con {
  display: flex;
  width: 230px;
  height: 30px;
  padding: 0 20px;
  justify-content: space-between;
  align-items: center;
  border-radius: 150px;
  border: 1px solid var(--primary-Black);
  background: var(--primary-White);
  box-shadow: 3px 3px 0 0 var(--primary-White);
}

.btn__boxtext--con {
  color: var(--primary-Black);
  text-align: center;
  font-family: "M PLUS 1p";
  font-size: 1.6rem;
}

.btnsubImg--con {
  display: flex;
  width: 17px;
  height: 17px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 3px;
  background: var(--primary-Blue);
}

.btn__box--con:hover {
  background: var(--primary-Blue);
  box-shadow: none;
  transition: 0.5s;
}

.btn__box--con:hover .btnsubImg--con {
  background: var(--primary-Black);
  box-shadow: none;
  color: var(--primary-Blue);
  transition: 0.5s;
}


/* ===================================================================== */
/* ============================ サブタイトル ============================ */
.title__topicsSub {
  display: flex;
  padding-left: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  border-left: 5px solid var(--primary-Blue);
}

.topicsSub {
  text-align: right;
  font-family: "M PLUS 1p";
  font-size: 2.8rem;
  font-weight: 700;
}

.topicsSub__sub {
  text-align: center;
  font-family: Roboto;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 5.6px;
}

.topicsSub__sub--info {
  font-size: 1.2rem;
  letter-spacing: 0;
}

.topicsSub--info {
letter-spacing: 7.6px;
}

.topicsSub__sub--pro,
.topicsSub__sub--cre,
.topicsSub__sub--conp {
  letter-spacing: 2.4px;
}

.topicsSub--cre {
  letter-spacing: 8.4px;
}

.topicsSub__sub--re {
  letter-spacing: 8px;
}

/* ======================================================================== */
/* ================================ fadein ================================ */
/* ======================================================================== */
section:has(.is-visible) .title__topics,
section:has(.is-visible) .topIntroduction__contents,
section:has(.is-visible) .aboutWork__container,
section:has(.is-visible) .contact__container {
  opacity: 1;
  transform: none;
}

section:has(.is-visible) .about__container--who,
section:has(.is-visible) .about__container--stry,
section:has(.is-visible) .about__container--pre,
section:has(.is-visible) .about__container--skill {
  opacity: 1;
  transform: none;
}

section:has(.is-visible) .workDateil__contents--gaiyou,
section:has(.is-visible) .workDateil__container--over,
section:has(.is-visible) .workDateil__container--IA,
section:has(.is-visible) .workDateil__container--pro,
section:has(.is-visible) .workDateil__container--DP,
section:has(.is-visible) .workDateil__container--PC,
section:has(.is-visible) .workDateil__container--rev,
section:has(.is-visible) .workDateilBtn__contents {
  opacity: 1;
  transform: none;
}

section:has(.is-visible) .topIntroduction-info__contents,
section:has(.is-visible) .topWork__container,
section:has(.is-visible) .topAbout__container,
section:has(.is-visible) .Work__container,
section:has(.is-visible) .contactPriv__container {
  opacity: 1;
  transform: none;
}

.title__topics,
.topIntroduction__contents,
.topIntroduction-info__contents,
.topWork__container,
.topAbout__container,
.Work__container,
.about__container--who,
.about__container--stry,
.about__container--pre,
.about__container--skill,
.aboutWork__container,
.contact__container,
.contactPriv__container,
.workDateilBtn__contents,
.workDateil__contents--gaiyou,
.workDateil__container--over,
.workDateil__container--IA,
.workDateil__container--pro,
.workDateil__container--DP,
.workDateil__container--PC,
.workDateil__container--rev {
  opacity: 0;
  transform: translateY(1rem);
  transition: all 0.6s ease-out;
}

/* ===================================================================== */
/* ============================ サブミニタイトル ============================ */
.aboutPerspective__subtitle,
.aboutSkill__subtitle,
.workDateilCS__subtitle {
  font-family: "M PLUS 1p";
  font-size: 2.2rem;
  font-weight: 500;
}

.aboutPerspective__subtitle span,
.aboutSkill__subtitle span,
.workDateilCS__subtitle  span {
  color: var(--primary-Blue);
}

.aboutPerspective__subtitle--name,
.workDateilCS__subtitle--name {
  font-family: Roboto;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 1.4px;
}

.aboutPerspective__subtitle--text {
  font-family: Roboto;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 2.8px;
}

.aboutSkill__subtitle--desi {
font-family: Roboto;
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 7px;
}

.aboutSkill__subtitle--deops {
  font-family: Roboto;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 2.52px;
}

.topicsSub--pri {
  font-family: "M PLUS 1p";
  font-size: 2.4rem;
}

.topicsSub__sub--pri {
  letter-spacing: 6.4px;
}

.workDateilCS__subtitle--name {
  letter-spacing: 7px;
}
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
@media screen and (min-width: 769px) {
  .Scpr {
    display: none;
  }

  .btn__box--all {
    width: 315px;
    height: 50px;
    padding: 0 50px;
  }

  .btn__box--con,
  .btn__box--conpri,
  .btn__box--send  {
    width: 315px;
    height: 50px;
    padding: 0 50px;
  }

  .btn__boxtext {
    font-size: 2rem;
  }

  .btn__box--work {
    width: 360px;
    height: 50px;
    padding: 0 40px;
  }

  .btnsubImg {
    width: 23px;
    height: 23px;
  }

  .hover {
    width: 19px;
    height: 19px;
  }

  .topics__sub--tabe {
    letter-spacing: 6.4px!important;
    }


  .topics {
    font-size: 3.4rem;
  }

  .topics__sub {
    letter-spacing: 12px;
  }


.topics__sub::after {
  margin-left: 0px;
  width: 20px;
  }

.topics__sub::before {
  margin-right: 9px;
  width: 20px;
  }

  .btn__txt--sub {
    padding: 0 40px;
    height: 30px;
  }

  .btn__txt {
    font-size: 1.6rem;
  }

  .btn__txt--demo {
    margin: 25px auto 0;
  }

  .btn__txt--sub img {
    width: 11px;
    height: 11px
  }

  .btnImg {
    padding: 4.5px;
  }

  .btn__boxtext--con {
    font-size: 2rem;
  }

  .topics__sub--conmp {
  font-size: 1.6rem;;
  letter-spacing: 4.8px;
  justify-content: space-between;
}

.topics--comp {
  font-size: 3.4rem;
  line-height: normal;
}


}