@charset "utf-8";
/*共通 設定
---------------------------------------------------------*/
:root {
  --color-sub: #00889a;
  --color-gray: #F8F8F8;
  --fontEn: 'Roboto', sans-serif;
}
.fontEn{
    font-family: var(--fontEn);
    font-weight: 700;
    line-height: .8;
    letter-spacing: .05em;
}
.bgGray{
  background-color: var(--color-gray);
}
a:hover{
  color: var(--color-sub);
}

/*header
---------------------------------------------------------*/
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
}
.header_nav {
  max-width: 192rem;
  margin: 0 auto;
  font-size: 1.8rem;
  letter-spacing: .1em;
  text-align: right;
}
#header .header_nav ul{
  position: relative;
  padding: 1.2rem 3.2rem;
  transition: .2s;
}
#header .header_nav ul::before{
    transition: .2s;
    content: "";
  width: 50vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
    border-radius: 0 0 0 .5rem;
}
#header.scrollClass .header_nav ul::before{
  background-color: #fff;
  box-shadow: 0 .2rem 0.5rem rgba(0, 0, 0, 0.2);
}
.header_nav ul{
  gap: 3rem;
  justify-content: flex-end;
  display: inline-flex;
}


/*top
---------------------------------------------------------*/
.p_top_mv{
  height: 59.6rem;
  background-color: #F2EDE7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.p_top_mv__box{
  position: relative;
  z-index: 2;
  text-align: center;
}
.p_top_mv__box h1{
  color: #4D4A47;
  text-shadow: .3rem .4rem .2rem rgba(0,0,0,.15);
  font-size: 10rem;
  margin-bottom: 1rem;
  letter-spacing: .05em;
}
.p_top_mv__box h2{
  font-size: 3.3rem;
}
.js-text span{
    opacity: 0;
}
.active .js-text span{
    animation: text_color 1s forwards linear;
}
@keyframes text_color {
  0%   { opacity:0 }
  50%  { opacity:1; color: #6d6359; }
  100% { opacity:1 }
}

.p_top_mv__img{
  width: 192rem;
  height: 100%;
  position: absolute;
}
.p_top_mv__img figure{
  position: absolute;
  z-index: 1;
}
.p_top_mv__img figure._01{
  width: 8.48%;
  left: 0.00%;
  top: -11.74%;
}
.p_top_mv__img figure._02{
  width: 9.95%;
  left: 4.64%;
  top: 27.85%;
}
.p_top_mv__img figure._03{
  width: 6.44%;
  left: -2.40%;
  top: 67.95%;
}
.p_top_mv__img figure._04{
  width: 4.37%;
  left: 19.32%;
  top: 5.03%;
}
.p_top_mv__img figure._05{
  width: 3.13%;
  left: 27.14%;
  top: 35.74%;
}
.p_top_mv__img figure._06{
  width: 4.64%;
  left: 16.01%;
  top: 65.81%;
}
.p_top_mv__img figure._07{
  width: 6.73%;
  left: 29.69%;
  top: 74.83%;
}
.p_top_mv__img figure._08{
  width: 3.59%;
  left: 39.43%;
  top: 1.57%;
}
.p_top_mv__img figure._09{
  width: 3.13%;
  left: 58.49%;
  top: 10.62%;
  transform: rotate(40deg);
}
.p_top_mv__img figure._10{
  width: 3.75%;
  left: 69.74%;
  top: 44.46%;
  transform: rotate(37deg);
}
.p_top_mv__img figure._11{
  width: 2.86%;
  left: 52.24%;
  top: 82.00%;
  transform: rotate(45deg);
}
.p_top_mv__img figure._12{
  width: 5.14%;
  left: 66.98%;
  top: 74.66%;
}
.p_top_mv__img figure._13{
  width: 9.27%;
  left: 74.64%;
  top: 3.02%;
  transform: rotate(49deg);
}
.p_top_mv__img figure._14{
  width: 5.73%;
  left: 96.77%;
  top: 3.02%;
}
.p_top_mv__img figure._15{
  width: 4.04%;
  left: 88.76%;
  top: 37.59%;
  transform: rotate(-15deg);
}
.p_top_mv__img figure._16{
  width: 6.61%;
  left: 79.65%;
  top: 63.62%;
}
.p_top_mv__img figure._17{
  width: 6.07%;
  left: 96.35%;
  top: 69.08%;
}

.p_top_mv__img figure {
  opacity: 0;
  transition: opacity .8s ease;
  animation: yrLoop 20s linear infinite;
  --dx: 0rem; /* X方向の移動量 */
  --dy: 0rem; /* Y方向の移動量 */
}
.p_top_mv__img figure._reverse{
  animation-direction: reverse;
}
.p_top_mv__img figure._yLoop{
  animation: yLoop 4s linear infinite;
}
.js-scroll.active .p_top_mv__img figure {
  opacity: 1;
}

@keyframes yrLoop {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  25% {
    transform: translate(var(--dx), var(--dy)) rotate(90deg);
  }
  50% {
    transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)) rotate(180deg);
  }
  75% {
    transform: translate(var(--dx), var(--dy)) rotate(270deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}
@keyframes yLoop {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3rem);
  }
  100% {
    transform: translateY(0);
  }
}

.c_enTtl{
  font-size: 5.5rem;
  margin-bottom: 7rem;
  text-align: center;
}
.p_top_profile__row {
  gap: 4.4rem;
}
.p_top_profile__row .img {
  max-width: 26rem;
  margin-inline: auto;
}
.p_top_profile__box {
  flex: 1;
}
.p_top_profile__box h3 {
  font-size: 2.2rem;
  padding-bottom: 2.8rem;
}
.p_top_profile__box h3 span{
  margin-left: 3rem;
}
.p_top_profile__box h4 {
  font-size: 1.8rem;
  margin-bottom: 0.6rem;
  font-feature-settings: "palt";
}

.c_list dt,
.c_list dd{
  border-bottom: .1rem solid #ccc;
  padding: 2rem 1rem;
  width: 34%;
}
.c_list dt:first-of-type,
.c_list dd:first-of-type{
  padding-top: 0;
}
.c_list dt{
  font-size: 1.7rem;
  font-weight: 600;
}
.c_list dt span{
  display: block;
  font-size: 85%;
  font-weight: 400;
}
.c_list dd{
  width: 66%;
  font-size: 1.7rem;
  padding-right: 0;
}
.c_list dd .ttl{
  margin-bottom: 0.4rem;
}
.c_list dd .txt{
  font-size: 1.5rem;
}
.c_list dd a{
  display: block;
  width: fit-content;
}
.c_list dd a + a{
  margin-top: .4rem
}
.c_list dd a::after{
  content: "";
  min-width: 1.6rem;
  aspect-ratio: 1;
  background: url("../img/icon_blank_black.svg") center no-repeat;
  background-size: contain;
  display: inline-block;
  margin-left: 0.6rem;
  vertical-align: -0.3rem;
}
.c_list dd a:hover::after{
  background-image: url("../img/icon_blank_sub.svg")
}
.p_top_profile .c_list dd a{
  font-size: 1.4rem;
  margin-top: 0.4rem;
}
.p_top_profile .c_list dd a::after{
  min-width: 1.4rem;
  vertical-align: -0.2rem;
}

.p_top_skills .c_enTtl{
  margin-bottom: 5rem;
}
.p_top_skills .lead{
  font-size: 1.7rem;
  line-height: 1.8;
  text-align: center;
}
.p_top_skills .c_list{
  margin-top: 5rem;
}
.p_top_skills .c_list dt,
.p_top_skills .c_list dd{
  align-content: center;
}
.p_top_skills .c_list dt{
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 2rem;
  width: 25%;
}
.p_top_skills .c_list dt::before{
  content: "";
  width: 4.2rem;
  height: auto;
  aspect-ratio: 1;
  background: url("../img/icon_html_css.svg") center no-repeat;
  background-size: contain;
  display: inline-block;
}
.p_top_skills .c_list dt._cms::before{
  background-image: url("../img/icon_wordpress.svg")
}
.p_top_skills .c_list dt._soft::before{
  background-image: url("../img/icon_figma.svg")
}
.p_top_skills .c_list dt._anime::before{
  background-image: url("../img/icon_gsap.svg")
}
.p_top_skills .c_list dd{
  width: 75%;
  font-size: 1.8rem;
}

.p_top_works__area:nth-of-type(n+2){
  margin-top: 11rem;
}
.p_top_works__area .img{
  gap: 4rem;
}
.p_top_works__area .img:nth-of-type(n+2){
  margin-top: 5rem;
}
.p_top_works__area .img .pc{
  width: 66.4%;
}
.p_top_works__area .img .sp{
  flex: 1;
}
.p_top_works__area .img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: .3rem .3rem 1rem rgba(0,0,0,.1);
}
.p_top_works__area .c_list{
  margin-top: 6rem;
}
.p_top_works__area .c_list dt{
  width: 20%;
  padding-left: 2rem;
}
.p_top_works__area .c_list dd{
  width: 80%;
  line-height: 1.8;
}




/*********************************/
/* タブレット用のスタイル記述 */
/*********************************/
@media screen and (max-width: 1300px) {
  html {
    font-size: .8vw;
  }
}

/*********************************/
/* スマートフォン用のスタイル記述 */
/*********************************/
@media screen and (max-width: 780px) {
/*全体レイアウト
---------------------------------------------------------*/
  html {
    font-size: 2.7777777vw;
  }
  body {
    font-size: 1.4rem;
    line-height: 1.5;
  }
  main > section {
    padding: 5rem 0;
  }

/*header
---------------------------------------------------------*/
  .header_nav {
    font-size: 1.6rem;
    letter-spacing: .05em;
  }
  #header .header_nav ul{
    padding: 0.8rem 1.6rem;
  }
  #header .header_nav ul::before{
      width: 100%;
  }
  .header_nav ul{
    gap: 1.6rem;
  }


/*top
---------------------------------------------------------*/
  .p_top_mv{
    height: 40rem;
  }
  .p_top_mv__box h1{
    text-shadow: 0.2rem 0.3rem 0.2rem rgba(0,0,0,.15);
    font-size: 4.9rem;
    margin-bottom: 1rem;
  }
  .p_top_mv__box h2{
    font-size: 1.8rem;
  }
  .p_top_mv__img{
    width: 100%;
  }
  .p_top_mv__img figure._01{
    width: 16%;
    left: -4%;
    top: -2.74%;
  }
  .p_top_mv__img figure._02{
    width: 12.95%;
    left: 78%;
    top: 83.85%;
  }
  .p_top_mv__img figure._03{
    width: 12%;
    left: 1%;
    top: 34.95%;
  }
  .p_top_mv__img figure._04{
    left: 34%;
    top: 19.03%;
    display: none;
  }
  .p_top_mv__img figure._05{
    width: 10%;
    left: 82%;
    top: 29.74%;
    display: none;
  }
  .p_top_mv__img figure._06{
    width: 10%;
    left: 8%;
    top: 65.81%;
  }
  .p_top_mv__img figure._07{
    width: 15%;
    left: 20%;
    top: 80.83%;
  }
  .p_top_mv__img figure._08{
    width: 8%;
    left: 54%;
    top: 22.57%;
  }
  .p_top_mv__img figure._09{
    width: 10%;
    left: 24%;
    top: 13.62%;
  }
  .p_top_mv__img figure._10{
    width: 8.75%;
    left: 82%;
    top: 57.46%;
  }
  .p_top_mv__img figure._11{
    width: 8.86%;
    left: 51%;
    top: 72%;
  }
  .p_top_mv__img figure._12{
    width: 13%;
    left: 79%;
    top: 24.66%;
  }
  .p_top_mv__img figure._13{
    width: 6.27%;
    left: 61%;
    top: 18.02%;
    display: none;
  }
  .p_top_mv__img figure._14{
    width: 13%;
    left: 89%;
    top: 7%;
  }
  .p_top_mv__img figure._15{
    left: 63%;
    top: 67.59%;
    display: none;
  }
  .p_top_mv__img figure._16{
    left: 58%;
    top: 85.62%;
    display: none;
  }
  .p_top_mv__img figure._17{
    left: 69%;
    display: none;
  }
  .c_enTtl{
    font-size: 2.8rem;
    margin-bottom: 2rem!important;
  }
  .p_top_profile__row {
    gap: 3rem;
    flex-direction: column;
  }
  .p_top_profile__row .img{
    max-width: 20rem;
  }
  .p_top_profile__box h3 {
    font-size: 1.6rem;
    padding-bottom: 1.8rem;
  }
  .p_top_profile__box h3 span{
    margin-left: 1rem;
  }
  .p_top_profile__box h4 {
    font-size: 1.6rem;
    margin-bottom: 0;
  }
  .c_list dt,
  .c_list dd{
    padding: 1.4rem .4rem 1.6rem!important;
    width: 100%!important;
  }
  .c_list dt{
    font-size: 1.4rem!important;
    border-bottom: none;
    padding-bottom: 0!important;
  }
  .p_top_profile__box .c_list dt:first-of-type{
    padding-top: .8rem!important;
  }
  .c_list dt span{
    display: inline-block;
    margin-left: 1rem;
  }
  .c_list dd{
    font-size: 1.4rem!important;
    padding-top: 0.6rem!important;
  }
  .c_list dd .ttl{
    margin-bottom: 0.4rem;
    font-size: 1.4rem;
  }
  .c_list dd .txt{
    font-size: 1.3rem;
  }
  .c_list dd a{
    gap: .6rem;
  }
  .c_list dd a::after{
    min-width: 1.2rem;
  }
  .p_top_profile .c_list dd a{
    font-size: 1.3rem;
    overflow-wrap: anywhere;
    word-break: break-all;
  }
  .p_top_profile .c_list dd a::after{
    min-width: 1.2rem;
  }
  .p_top_skills .lead{
    font-size: 1.4rem;
    line-height: 1.6;
    text-align: left;
  }
  .p_top_skills .c_list{
    margin-top: 1rem;
  }
  .p_top_skills .c_list dt{
    gap: 1rem;
  }
  .p_top_skills .c_list dt::before{
    width: 2.2rem;
  }
  .p_top_works__area:nth-of-type(n+2){
    margin-top: 6rem;
  }
  .p_top_works__area .img{
    gap: 1rem;
  }
  .p_top_works__area .img:nth-of-type(n+2){
    margin-top: 1.6rem;
  }
  .p_top_works__area .img img{
    width: 100%;
    height: 100%;
    box-shadow: .3rem .3rem 1rem rgba(0,0,0,.1);
  }
  .p_top_works__area .c_list{
    margin-top: 2rem;
  }
  .p_top_works__area .c_list dd{
    line-height: 1.6;
  }

}