@font-face { 
  /* ① ここにfont-familyで指定したい名前を書く*/
  font-family: "mobo";
  src: url("/assets/font/MOBO.otf") format("truetype")
}

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');



html{
  scroll-behavior: smooth;
}

body {
  text-align: center;
  color: rgb(53, 54, 63);
  margin: 0;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
}


.skill-bar {
  padding: 6px;
  text-align: left;
  font-weight: bold;
  color: white;
  border-radius: 4px;
  margin: 16px 0;

  display: flex;
  justify-content: space-between;
  box-shadow: 3px 3px 2px rgb(0 0 0 / 10%);
  font-size: 14px;
}

.skill-bar-backend {
  background-color: gray;
  background: linear-gradient(270deg,#b993d6,#8ca6db);
}

.skill-bar-db {
  background: linear-gradient(270deg,#87c58b,#7fcac6);
}

.skill-bar-cloud {
  background: linear-gradient(270deg,#93a4d1,#5489d8);
}

.skill-bar-frontend {
  background: linear-gradient(270deg,#f8c7ab,#fcbdc5);
}

.skill-bar-design {
  background: linear-gradient(270deg,#fdaeae,#ff92a0);
}

.per100 {
  width: calc(100% - 12px);
}

.per95 {
  width: calc(95% - 12px);
}

.per90 {
  width: calc(90% - 12px);
}

.per85 {
  width: calc(85% - 12px);
}

.per80 {
  width: calc(80% - 12px);
}

.per70 {
  width: calc(70% - 12px);
}

.per60 {
  width: calc(60% - 12px);
}

.per50 {
  width: calc(50% - 12px);
}

.per30 {
  width: calc(30% - 12px);
}

@media screen and (min-width: 520px) {
  .pc {
  }
  
  .mobile {
    display: none;
  }

  .top {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .title-wrapper {
    position: relative;
    width: 450px;
    height: 300px;
    font-family: "mobo"; 
  }

  .logo {
    width: 200px;
    height: 200px;
    margin-bottom: 32px;

    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
    animation: fadeIn 2.5s linear 0s 1 normal;
  }

  .title {
    width: 450px;
    height: 70px;
    font-size: 70px;
    position: absolute;

    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
    animation: fadeIn 2.5s linear 0s 1 normal;
  }

  .title-shine {
    width: 450px;
    height: 70px;
    position: absolute;
    background-image: linear-gradient(
      70deg,
      rgb(211, 209, 209, 0.3)  45%, 
      #fff 50%,
      rgb(211, 209, 209, 0.3) 55% 
    );
    background-size: 500% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: shine 4s infinite;
  }

  #nav-pc {
    position: fixed;
    top: 0;
    opacity: 0;
    font-family: "mobo";
    z-index: 10;

    -webkit-animation: fadeIn 3s ease 0s 1 forwards;
    animation: fadeIn 2.5s linear 3s 1 forwards;
  }

  #nav-title {
    font-family: 'mobo';
    font-size: 36px;
    margin: 24px 0;
    opacity: 0;
  }

  .nav-contents {
    position: relative;
    margin: 60px 0 0 100px;
    text-align: left;
  }

  .nav-content {
    padding: 16px 24px;
    font-size: 20px;
  }

  .arrow {
    position: absolute;
    height: 350px;
    border-left: 3px solid rgb(53, 54, 63);
  }

  .arrow::after {
    content: '';
    display:  inline-block;
    height: 50px;
    border-left: 3px solid rgb(53, 54, 63);
    transform: rotate(-45deg);
    bottom: -6px;
    left: -20px;
    position: absolute;
  }

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

  .section-title {
    font-size: 30px;
    font-family: 'mobo';  
  }

  /* Company */
  .company {
    height: 100vh;
    min-height: 500px;
    padding: 0 250px;
  }

  .company-table {
    margin: 60px 24px;
  }

  .company-table td {
    padding: 24px;
    text-align: left;
  }

  .company-title {
    padding: 24px;
    width: 100px;
  }

  /* Service */
  .service {
    height: 100vh;
    min-height: 500px;
    padding: 0 250px;
  }

  .service-description {
    margin: 60px 0;
    line-height: 28px;
  }

  .service-contents {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 16px;
  }

  .service-contents > div {
    margin: 0 16px;
    width: 33%;
  }

  .service-content-title {
    font-weight: bold;
    font-size: 20px;
    margin: 16px 0;
  }

  .service-content-description {
    line-height: 28px;
  }


  .skill {
    height: 100vh;
  }

  .skill-description {
    margin: 50px 0;
  }

  .skills {
    width: 70vw;
    max-width: 700px;
  }

  /* Philosophy */
  .philosophy {
    height: 100vh;
    min-height: 500px;
    padding: 0 250px;
  }

  .philosophy-description {
    margin: 60px 0;
    line-height: 28px;
  }

  /* Contact */
  .contact {
    height: 100vh;
    min-height: 500px;
    padding: 0 250px;
  }

  /***追従するトップへ戻るボタン***/
  #page-top {
    position: fixed;
    font-size: 20px;
    right: 50px;
    bottom: 32px;
    height: 100px;
    text-decoration: none;
    font-weight: bold;
    line-height: 1.5rem;
    border-right: solid 3px;
    text-align: end;

    display: flex;
    align-items: flex-end;
    opacity: 0;
  }

  #page-top > div {
  margin-right: 8px;
  margin-bottom: 8px;
  font-family: 'mobo';
  }

  #page-top::before {
    content: "";
    display: block;
    position: absolute;
    top: 13px;
    right: -38px;
    width: 20px;
    height: 20px;
    border-left: solid 3px;
    transform: rotate(135deg);
    transform-origin: left top;
  }
  /***トップへ戻るボタンここまで***/

  .gradation-left-top {
    position: fixed;
    height: 40vh;
    width: 40vh;
    /* background: linear-gradient(to top right, rgba(67, 142, 255, 0.5), white); */
    background:linear-gradient(-45deg, transparent 20%, #ffffff 50%, #679cffad);
    z-index: -1;
  }
  
  .gradation-right-bottom {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 40vh;
    width: 40vh;
    /* background: linear-gradient(to top right, rgba(67, 142, 255, 0.5), white); */
    background:linear-gradient(135deg, transparent 50%, #ffffff 20%, #679cffad);
    z-index: -1;
  }

  .icon-contact img{
    margin-top: 60px;
    margin-bottom: 16px;
    width: 50px;
  }
  
}

@media screen and (max-width: 519px) {
  body {
    font-size: 14px;
  }
  
  .pc {
    display: none !important;
  }

  .top {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .title-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    font-family: "mobo"; 
  }

  .logo {
    width: 120px;
    height: 120px;
    margin-bottom: 24px;

    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
    animation: fadeIn 2.5s linear 0s 1 normal;
  }

  .title {
    width: 100%;
    height: 70px;
    font-size: 40px;
    position: absolute;

    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
    animation: fadeIn 2.5s linear 0s 1 normal;
  }

  .title-shine {
    width: 100%;
    height: 40px;
    position: absolute;
    background-image: linear-gradient(
      70deg,
      rgb(211, 209, 209, 0.3)  45%, 
      #fff 50%,
      rgb(211, 209, 209, 0.3) 55% 
    );
    background-size: 500% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: shine 4s infinite;
  }

  #nav-mobile {
    margin: 0;
    font-family: arial;
    animation: bugfix infinite 1s;
    -webkit-animation: bugfix infinite 1s;

    opacity: 0;
    -webkit-animation: fadeIn 1s linear 1s 1 forwards;
    animation: fadeIn 1s linear 1s 1 forwards;
  }

  #nav-title {
    font-family: 'mobo';
    font-size: 28px;
    margin: 24px 0;

    -webkit-animation: fadeIn 1.5s ease 0s 1 forwards;
    animation: fadeIn 2.5s linear 0s 1 forwards;
  }

  .nav-contents {
    position: relative;
    margin: 60px 0 0 100px;
    text-align: left;
  }

  .nav-content {
    padding: 16px 24px;
    font-size: 20px;
  }

  .arrow {
    position: absolute;
    height: 350px;
    border-left: 3px solid rgb(53, 54, 63);
  }

  .arrow::after {
    content: '';
    display:  inline-block;
    height: 50px;
    border-left: 3px solid rgb(53, 54, 63);
    transform: rotate(-45deg);
    bottom: -6px;
    left: -20px;
    position: absolute;
  }

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

  .section-title {
    font-size: 30px;
    font-family: 'mobo';  
  }

  /* Company */
  .company {
    min-height: 100vh;
    padding: 0 24px;
  }

  .company-table {
    margin: 60px 24px;
  }

  .company-table td {
    padding: 16px 0;
    text-align: left;
  }

  .company-title {
    padding-right: 24px;
    width: 100px;
  }

  /* Service */
  .service {
    min-height: 1200px;
    padding: 8px 24px;
  }

  .service-description {
    margin: 60px 0;
    line-height: 34px;
  }

  .service-contents > div {
    margin: 50px 16px;
  }

  .service-content-title {
    font-weight: bold;
    font-size: 20px;
    margin: 16px 0;
  }

  .service-content-description {
    line-height: 28px;
  }

  .skill {
    min-height: 1000px;
    padding: 8px 24px;
  }

  .skill-description {
    margin: 50px 0;
  }
  
  .skills {
    width: calc(100vw - 68px);
    padding-top: 50px;
  }

  /* Philosophy */
  .philosophy {
    height: 100vh;
    min-height: 500px;
    padding: 0 24px;
  }

  .philosophy-description {
    margin: 60px 0;
    line-height: 28px;
  }

  /* Contact */
  .contact {
    height: 90vh;
    min-height: 500px;
    padding: 0 24px;
  }

  /***追従するトップへ戻るボタン***/
  #page-top-mobile {
    position: fixed;
    width: 20px;
    height: 20px;
    right: 24px;
    bottom: 24px;
    opacity: 0;
    border-left: 3px solid rgb(53, 54, 63);
    border-top: 3px solid rgb(53, 54, 63);
    transform: rotate(45deg);
  }
  /***トップへ戻るボタンここまで***/

  .gradation-left-top {
    position: fixed;
    height: 50vw;
    width: 50vw;
    background:linear-gradient(-45deg, transparent 20%, #ffffff 50%, #679cffad);
    z-index: -1;
  }
  
  .gradation-right-bottom {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 50vw;
    width: 50vw;
    background:linear-gradient(135deg, transparent 50%, #ffffff 20%, #679cffad);
    z-index: -1;
  }

  .icon-contact img{
    margin-top: 60px;
    margin-bottom: 16px;
    width: 40px;
  }
}

a {
  text-decoration: none;
}

a,a:hover,a:visited{
  color: inherit;
}

footer {
  height: 80px;
  font-family: 'mobo';
  line-height: 30px;
}


/* アニメーション */
@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}


@keyframes shine {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.fade {
  opacity: 1;
  -webkit-animation: fadeIn 1s ease 0s 1 forwards;
  animation: fadeIn 1s linear 0s 1 forwards;
}

.fadeout {
  opacity: 0;
  -webkit-animation: fadeIn 1.5s ease 0s 1 forwards;
  animation: fadeIn 2.5s linear 0s 1 forwards;
}