/*--------------*/
/*---- base ----*/
/*--------------*/
html {
  font-size: 62.5%;
}

body {
  font-size: 18px;
  font-family: 'Comfortaa', cursive, 'Noto Sans JP', sans-serif;
  line-height: 2;
  letter-spacing: .2em;
  color: #272727;
}

img {
  width: 100%;
  vertical-align: bottom;
}

a {
  text-decoration: none;
  color: #272727;
  cursor: pointer;
}

a:hover {
  opacity: .6;
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
}

.flex-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.section-container {
  position: relative;
  margin-left: auto;
  z-index: 2;
}

.section-wrapper {
  padding: 50px 4.74833%;
  background-color: #ffffff;
}

.section-wrapper.black {
  background-color: #4a4a4a;
}

.leftCircle {
  -webkit-mask-image: radial-gradient(circle at left 100px, transparent 12px, black 12px);
  mask-image: radial-gradient(circle at left 100px, transparent 12px, black 12px);
}

/*--------------*/
/*---- load ----*/
/*--------------*/
.load-logo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  z-index: 10;
  opacity: 1;
  -webkit-transition: 1s ease-in;
  -o-transition: 1s ease-in;
  transition: 1s ease-in;
}

.load-logo.showUp {
  width: 100vw;
  opacity: 0;
  -webkit-transition: 1s ease-in;
  -o-transition: 1s ease-in;
  transition: 1s ease-in;
}

.l-logo {
  font-size: 4rem;
  background-color: #dfdfdf;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/*--------------*/
/*--- header ---*/
/*--------------*/
.header {
  width: 220px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgb(192, 189, 189, .99995);
  z-index: 3;
}

.header-wrapper {
  padding: 16px 6px 10px 10px;
}

.fa-w-16 {
  width: 25px;
  height: 25px;
}

/* .header-title {
  height: auto;
} */
.header-title a {
  font-size: 1.8rem;
  display: inline-block;
}

.header-span {
  vertical-align: 18%;
}

/*--------------*/
/*----- fv -----*/
/*--------------*/
.fv {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.fv-wrapper {
  width: 100vw;
  height: 100vh;
}

.fv-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.fv-title {
  position: absolute;
  top: 45%;
  left: 30%;
  color: #ffffff;
}

.fv-copy {
  font-size: 5rem;
}

.fv-subCopy {
  font-size: 2.6rem;
}

.fv-copy,
.fv-subCopy {
  line-height: 1.8;
  letter-spacing: .3em;
}

/*--------------*/
/*-- sideNav ---*/
/*--------------*/
.container {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.sideNav {
  position: relative;
  padding: 0 80px 0 5vw;
  margin-top: 1000px;
  z-index: 1;
}

.mainLeft {
  width: 22%;
  min-width: 220px;
}

.sideNav-list {
  width: 120px;
}

.sideNav-item {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #272727;
}

.sideNav-item:last-of-type {
  margin-bottom: 0;
}

.sideNav-item a {
  font-weight: bold;
}

.sideNav-item.now a {
  color: #ff0000;
}

/*--------------*/
/*-- concept ---*/
/*--------------*/
.mainRight {
  width: 78%;
  margin-bottom: 100vh;
}

.fvBottom {
  margin-top: 82vh;
  position: relative;
  margin-left: auto;
  z-index: 2;
}

.leftCircle-mb {
  -webkit-mask-image: radial-gradient(circle at left 100px, transparent 12px, black 12px);
  mask-image: radial-gradient(circle at left 100px, transparent 12px, black 12px);
}

.fvBottom-copy {
  font-size: 4.5rem;
  font-size: clamp(3rem, 4.411vw, 4.5rem);
  text-align: right;
  margin-bottom: 50px;
  line-height: 1.4;
}

.section-title {
  font-size: 5rem;
  font-size: clamp(3.5rem, 4.902vw, 5rem);
  font-weight: bold;
  padding-left: 80px;
  margin-bottom: 60px;
}

.section-title span {
  display: inline-block;
  width: 150px;
  height: 4px;
  vertical-align: middle;
  margin-left: 30px;
  background-color: #272727;
}

.concept-text {
  width: 55%;
  margin: 30px auto;
}

/*--------------*/
/*-- profile ---*/
/*--------------*/
.section-title.black {
  color: #ffffff;
}

.section-title.black span {
  background-color: #ffffff;
}

.profileFlex {
  padding: 50px 10px 140px;
}

.profile-img {
  width: 50%;
  position: relative;
}

.profile-img::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 90%;
  background-color: #333;
  bottom: -50px;
  right: -50px;
  z-index: -1;
}

.profile-img::after {
  content: "";
  position: absolute;
  width: 90%;
  height: 90%;
  background-color: #35353570;
  bottom: -100px;
  right: -100px;
  z-index: -2;
}

.profile-area {
  width: 50%;
  padding-left: 30px;
}

.profile-text {
  color: #ffffff;
}

/*--------------*/
/*--- skill ----*/
/*--------------*/
.skill-inner {
  width: 100%;
}

.flex-box.wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.skill-imgArea {
  width: calc(100% / 3);
}

.skill-img img {
  display: block;
}

/*--------------*/
/*--- about ----*/
/*--------------*/
.about-lead {
  text-align: center;
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 450px;
}

.about-contents {
  max-width: 1200px;
  padding-left: 30px;
}

.contents-wrapper {
  margin-bottom: 600px;
}

.background {
  position: fixed;
  top: 250px;
  right: 80px;
  width: 35%;
  z-index: -1;
  opacity: 0;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.show .background {
  opacity: 1;
}

.about-bg01,
.about-bg02,
.about-bg03,
.about-bg04,
.about-bg05,
.about-bg06 {
  opacity: 0;
  -webkit-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s;
}

.about-bg01.is-show,
.about-bg02.is-show,
.about-bg03.is-show,
.about-bg04.is-show,
.about-bg05.is-show,
.about-bg06.is-show {
  opacity: 1;
  -webkit-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s;
}

.about-bg01::before {
  position: absolute;
  content: "";
  bottom: -140px;
  left: -50px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: rgba(126, 126, 126, 0.2);
  z-index: 0;
}

.about-bg01::after {
  position: absolute;
  content: "";
  top: -100px;
  right: -30px;
  width: 250px;
  height: 250px;
  background-color: rgba(150, 183, 239, 0.06);
  z-index: -1;
}

.about-bg02::before {
  position: absolute;
  content: "";
  bottom: -60px;
  left: -50px;
  border-right: 230px solid transparent;
  border-bottom: 398px solid rgba(126, 126, 126, 0.2);
  border-left: 230px solid transparent;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 0;
}

.about-bg02::after {
  position: absolute;
  content: "";
  top: -100px;
  right: -30px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: rgba(150, 183, 239, 0.06);
  z-index: -1;
}

.about-bg03::before {
  position: absolute;
  content: "";
  bottom: -115px;
  left: -50px;
  width: 400px;
  height: 400px;
  background-color: rgba(126, 126, 126, 0.2);
  z-index: 0;
}

.about-bg03::after {
  position: absolute;
  content: "";
  top: -150px;
  right: -10px;
  border-right: 140px solid transparent;
  border-bottom: 242px solid rgba(150, 183, 239, 0.06);
  border-left: 140px solid transparent;
  -webkit-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
  z-index: -1;
}

.about-bg04::before {
  position: absolute;
  content: "";
  bottom: -140px;
  left: -50px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: rgba(126, 126, 126, 0.2);
  z-index: 0;
}

.about-bg04::after {
  position: absolute;
  content: "";
  top: -100px;
  right: -30px;
  width: 250px;
  height: 250px;
  background-color: rgba(150, 183, 239, 0.06);
  z-index: -1;
}

.about-bg05::before {
  position: absolute;
  content: "";
  bottom: -60px;
  left: -50px;
  border-right: 230px solid transparent;
  border-bottom: 398px solid rgba(126, 126, 126, 0.2);
  border-left: 230px solid transparent;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 0;
}

.about-bg05::after {
  position: absolute;
  content: "";
  top: -100px;
  right: -30px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: rgba(150, 183, 239, 0.06);
  z-index: -1;
}

.about-bg06::before {
  position: absolute;
  content: "";
  bottom: -140px;
  left: -50px;
  width: 400px;
  height: 400px;
  background-color: rgba(126, 126, 126, 0.2);
  z-index: 0;
}

.about-bg06::after {
  position: absolute;
  content: "";
  top: -150px;
  right: -10px;
  border-right: 140px solid transparent;
  border-bottom: 242px solid rgba(150, 183, 239, 0.06);
  border-left: 140px solid transparent;
  -webkit-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
  z-index: -1;
}

.about-textBox {
  width: 40%;
  color: #ffffff;
}

.textBox-num {
  margin-bottom: 30px;
}

.textBox-num span {
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: #fff;
  vertical-align: middle;
  margin-left: 20px;
}

.textBox-title {
  font-size: 2.5rem;
  margin-bottom: 30px;
}

.textBox-copy {
  font-size: 1.6rem;
  margin-bottom: 50px;
}

.link-btn {
  width: 150px;
  height: 40px;
  background-color: #dfdede;
  border-radius: 2px;
  line-height: 40px;
  text-align: center;
}

.about-listArea {
  padding-bottom: 100px;
}

.about-listTitle {
  font-size: 2.5rem;
  text-align: center;
  color: #ffffff;
  margin-bottom: 60px;
}

.about-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.card-item {
  width: 280px;
  margin-bottom: 30px;
  margin-right: 10px;
  margin-left: 10px;
}

.card-imgArea {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
}

.card-img {
  height: 100%;
  background-position: center center;
  background-size: cover;
  transform: scale(1);
  transition: .2s;
}

.card-img:hover {
  transform: scale(1.02);
}

.card-img.left {
  background-position: 20% center;
}

.card-text {
  font-size: 1.5rem;
  color: #ffffff;
}

/*--------------*/
/*-- contact ---*/
/*--------------*/
.contact {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  margin-top: 5px;
  opacity: 0;
  background-color: rgb(192, 189, 189);
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.contact-inner {
  padding-top: 50px;
  padding-bottom: 30px;
}

.contact-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.contact-wrapper {
  position: relative;
  margin-left: auto;
  width: 77.77777778%;
  padding-right: 100px;
  padding-left: 100px;
  text-align: center;
}

.titleMb {
  margin-bottom: 0;
}

.contact-title {
  font-size: 2rem;
  margin-bottom: 50px;
}

.contact-lead {
  font-size: 1.6rem;
}

.contactBtn {
  width: 200px;
  display: block;
  margin: 40px auto;
}

.contactBtn::before {
  font-family: "Font Awesome 5 Free";
  content: '\f0e0';
  font-weight: 600;
  padding-right: 10px;
}

.contact-space {
  border: 1px dashed #27272775;
  width: 1px;
  height: 150px;
  margin: 0 auto 30px;
}

/*--------------*/
/*--- footer ---*/
/*--------------*/
footer {
  width: 77.77777778%;
  margin-left: auto;
  border-top: 1px solid #9f9f9f;
}

.footer-area {
  display: block;
  text-align: center;
  padding: 20px;
}

/*----------------*/
/*-- responsive --*/
/*----------------*/
@media screen and (max-width:1020px) {

  /* header */
  .header {
    width: 120px;
    line-height: 1.4;
  }

  .header-wrapper {
    padding-top: 29px;
    padding-bottom: 29px;
  }

  .header-br {
    padding-left: 8px;
  }

  /* fv */
  .fv-title {
    top: 35%;
  }

  /* mainRight */
  .fvBottom-copy {
    margin-bottom: 20px;
    white-space: nowrap;
  }

  /* concept */
  .section-title span {
    width: 80px;
  }

  .concept-text {
    margin: 0;
    width: 100%;
    font-size: 1.4rem;
  }

  /* profile */
  .flex-box.profileFlex {
    display: block;
    padding-bottom: 100px;
  }

  .profile-img {
    width: 75%;
    margin-bottom: 140px;
  }

  .profile-area {
    padding-left: 0;
    width: 100%;
    font-size: 1.4rem;
  }

  /* skill */
  .skill-imgArea {
    width: calc(100% / 2);
  }

  /* about */
  .about-lead {
    font-size: clamp(2rem, 2.941vw, 3rem);
    margin-bottom: 400px;
  }

  .about-contents {
    padding-left: 2.94117%;
  }

  .about-textBox {
    width: 70%;
  }

  .textBox-title {
    font-size: 2rem;
  }

  .textBox-copy {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 768px) {
  .l-logo {
    font-size: 2.5rem;
  }

  .about-contents {
    padding-left: 0;
  }

  .about-bg01::after {
    width: 210px;
    height: 210px;
    top: -140px;
  }

  .about-bg01::before {
    bottom: -165px;
    left: -96px;
  }

  .about-bg02::after {
    top: -120px;
  }

  .about-bg03::after {
    top: -215px;
    right: -22px;
  }

  .about-bg03::before {
    left: -95px;
  }
}

@media screen and (max-width: 414px) {
  .load-logo {
    height: 100vh;
  }

  .l-logo {
    font-size: 2rem;
  }

  /* header */
  .header {
    width: 90px;
  }

  .header-wrapper {
    padding: 23px 5px 16px;
  }

  .fa-w-16 {
    width: 16px;
    height: 16px;
  }

  .header-span {
    font-size: 1.3rem;
  }

  /* fv */
  .fv-img {
    background-position: left;
  }

  .fv-title {
    top: 38%;
    left: 16%;
  }

  .fv-copy {
    font-size: 2.3rem;
  }

  .fv-subCopy {
    font-size: 1.8rem;
  }

  /* sideNav */
  .sideNav {
    padding: 0 3vw;
    margin-top: 790px;
  }

  .mainLeft {
    min-width: 90px;
  }

  .sideNav-list {
    width: 60px;
  }

  .sideNav-item {
    padding-bottom: 3px;
  }

  .sideNav-item a {
    font-size: 1.3rem;
    letter-spacing: 0;
  }

  /* mainRight */
  .mainRight {
    overflow: hidden;
  }

  .fvBottom {
    margin-top: 88vh;
  }

  .section-wrapper.top {
    padding-top: 30px;
  }

  .fvBottom-copy {
    font-size: 1.7rem;
    letter-spacing: 0;
    text-align: center;
  }

  /* concept */
  .section-title {
    font-size: 2.5rem;
    padding-left: 32px;
    margin-bottom: 40px;
    letter-spacing: 0;
  }

  .section-title span {
    width: 40px;
    margin-left: 16px;
  }

  .leftCircle-mb {
    -webkit-mask-image: radial-gradient(circle at left 76px, transparent 12px, black 12px);
    mask-image: radial-gradient(circle at left 76px, transparent 12px, black 12px);
  }

  .concept-text {
    letter-spacing: .1em;
    line-height: 1.8;
  }

  /* profile */
  .section-title.black {
    margin-top: 24px;
  }

  .profile-img::before {
    bottom: -30px;
    right: -30px;
  }

  .profile-img::after {
    bottom: -60px;
    right: -60px;
  }

  /* skill */
  .section-wrapper.white.leftCircle {
    padding-top: 76px;
  }

  /* about */
  .about-lead {
    margin-bottom: 330px;
  }

  .background {
    width: 45%;
    right: 10%;
    top: 285px;
  }

  .about-textBox {
    width: 100%;
  }

  .textBox-title {
    font-size: 1.8rem;
  }

  .textBox-copy {
    font-size: 1.3rem;
    margin-bottom: 20px;
  }

  .link-btn a {
    font-size: 1.4rem;
  }

  .about-bg01::before {
    width: 270px;
    height: 270px;
    bottom: -110px;
    left: -77px;
  }

  .about-bg01::after {
    right: -6px;
    width: 200px;
    height: 200px;
    top: -130px;
  }

  .about-bg02::before {
    bottom: -72px;
    left: -33px;
    border-right: 140px solid transparent;
    border-bottom: 250px solid rgba(126, 126, 126, 0.2);
    border-left: 140px solid transparent;
  }

  .about-bg02::after {
    top: -90px;
    right: -14px;
    width: 220px;
    height: 220px;
  }

  .about-bg03::before {
    bottom: -100px;
    left: -67px;
    width: 255px;
    height: 255px;
  }

  .about-bg03::after {
    top: -180px;
  }

  .about-bg04::before {
    bottom: -170px;
    left: -16px;
    width: 380px;
    height: 380px;
  }

  .about-bg04::after {
    top: -110px;
    right: -100px;
    width: 250px;
    height: 250px;
  }

  .about-bg05::before {
    left: -6px;
    bottom: -120px;
  }

  .about-bg05::after {
    top: -98px;
    right: -65px;
    width: 270px;
    height: 270px;
  }

  .about-bg06::before {
    left: 18px;
    width: 300px;
    height: 300px;
  }

  .about-listTitle {
    font-size: 2rem;
  }

  .card-text {
    font-size: 1.3rem;
  }

  .about-listArea {
    padding-bottom: 50px;
  }

  /* contact */
  .contact-inner {
    padding-top: 0;
    padding-bottom: 20px;
  }

  .contact-wrapper {
    width: 70%;
    padding-right: 20px;
    padding-left: 0;
    text-align: initial;
  }

  .contact-title {
    margin-bottom: 20px;
  }

  .contact-lead {
    font-size: 1.3rem;
  }

  .contactBtn {
    width: 90%;
    font-size: 1.6rem;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0;
  }

  .contact-space {
    height: 70px;
    margin-bottom: 20px;
  }

  .topBack {
    display: block;
    text-align: center;
  }

  footer {
    width: 70%;
  }

  .footer-area {
    font-size: 1.1rem;
    padding: 20px 0;
  }
}

/*-----------------*/
/*- fadeAnimation -*/
/*-----------------*/
.scrollAnime {
  opacity: 0;
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.delay {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

/*2.上下の動きを指定*/
.upDown {
  -webkit-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  transform: translateY(-100px);
}

.downUp {
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  transform: translateY(100px);
}

.slide-right {
  -webkit-transform: translateX(100px);
  -ms-transform: translateX(100px);
  transform: translateX(100px);
}

.slide-left {
  -webkit-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
}