@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap');

html {
  scroll-padding-top: 80px;
  scroll-behavior: smooth;
}

body{
    color: #E2E8F0;
    height: auto;
}

/* 初期状態：透明で20px下に配置 */
.animate-target {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 画面内に入った時の状態 */
.animate-target.is-active {
  opacity: 1;
  transform: translateY(0);
}


/* 星空の背景のスタイル */
.stars {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(0deg, #174663, #131c3a, #0a0f17);
  overflow: hidden;
  height: auto;
}

/* 星のスタイル */
.star{
  position: absolute;
  display: block;
  background-color: #E2E8F0;
  border-radius: 50%;
  box-shadow: 0 0 4px 2px rgba(#E2E8F0, 0.2);
  opacity: 0;
  animation: twinkle 5s infinite;
}

/* 星がキラキラ光るアニメーション */
@keyframes twinkle {
  0% {
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

.title__wrap{
  text-shadow: 0 0 10px rgba(226, 232, 240, 0.25),0 0 25px rgba(226, 232, 240, 0.15);  
}

.maintitle__tb{
  display: none;
}


/* scroll */
.scrollbar{
  position: absolute;
  top: 19%;
  left: 50%;
  transform: trnslateX(-50%);
}

.scrollbar::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100px;
  background: #E2E8F0;
}

.scrollbar::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E2E8F0;
  animation: circlemove 3s ease-in-out infinite,
    cirlemovehide 3s ease-out infinite;
}

@keyframes circlemove {
  0% {
    bottom: 95px;
  }
  100% {
    bottom: 0px;
  }
}

@keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

.works{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  margin: 10em 0 0;
}

.works__wrap{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  margin: 40em 0 18em;
}

.works__menu{
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 4em auto 0;
}

.works__list{
  cursor: pointer;
  width: 28%;
  height: auto;
  margin: 0 0 4em;
  z-index: 10;
}

.works__list img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform .6s ease;
}

.works__list:hover img {
  display: block;
  transform: scale(1.1);
}

.fullscreen{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.inline__title{
  font-size: 2rem;
  font-style: italic;
  text-align: center;
  letter-spacing: 0.2rem;
  margin: 3em 0;
}

.inline__column{
  width: 65%;
  margin: 3em auto 1em;
  display: flex;
  justify-content: space-between;
}

.mt-5{
  margin-top: 5em;
}

.inline__column-img{
  width: 30%;
  height: auto;
}

.inline__column-img2{
  width: 60%;
  height: auto;
} 

.inline__img-box{
  width: 65%;
  margin: 3em auto;
  display: flex;
  align-items: flex-start;
}

.inline__img{
  width: 65%;
  height: auto;
  margin: 0 auto;
}

.inline__img2{
  width: 40%;
  height: auto;
  margin: 0 auto;
}

.inline__img3{
  width: 45%;
  height: auto;
  margin: 0 auto;
}

.inline__img4{
  width: 20%;
  height: auto;
  margin: 0 auto;
}

.inline__img img,.inline__column-img img,.inline__column-img2 img,.inline__img2 img,.inline__img3 img,.inline__img4 img{
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.inline__sub{
  text-align: right;
  font-size: 0.7rem;
  margin: 0.1em 0 0;
}

.inline__info{
  display: flex;
}

.inline__info-text{
  margin-left: 2em;
}

.inline__paragraph{
  margin: 2.5em 0 0;
}

 .inline__button{
  margin: 2em auto 4em;
  width: 65%;
  display: flex;
  align-items: flex-end;
}

.inline__button_text:hover{
  background: rgb(19, 28, 58,0.15);
  border-color: #131c3a;
  box-shadow: 0 0 10px rgb(19, 28, 58,0.3);
}

.inline__button_text a{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #131c3a; 
  text-decoration: none;
}

.inline__button_text a:visited{
  color: #131c3a; 
  text-decoration: none;
}

.contact__wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4em 0 15em;
}

footer{
  font-size: 0.8rem;
  height: 80px;
  line-height: 80px;
  text-align: center;
  margin: 8em 0 0;
}


/* to top */
.page-top{
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 1.8rem;
  bottom: 1.25rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  border: 0;
  background: none;
  transition: .2s;
}

.page-top p{
  writing-mode: vertical-rl;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
  height: 4rem;
  margin: 0;
  letter-spacing: 5px;
  text-align: right;
  color: #E2E8F0;
}

.page-top p:before {
  content: "";
  position: absolute;
  top: 2px;
  right: -5px;
  width: 2px;
  height: 1.25rem;
  background: #E2E8F0;
  transform: skewX(-150deg);
}

.page-top p:after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: 0;
  width: 2px;
  height: 4rem;
  background: #E2E8F0;
}

.is-active {
  opacity: 1;
  visibility: visible;
}


/*PC・画面サイズが1024px以上のとき*/
@media screen and (min-width:1081px){
.maintitle{
  margin: 5em 0 0;
  font-size: 3rem;
  text-align: center;
  font-family: "Tangerine", cursive;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.13em;
}

.subtitle{
  font-size: 2.5rem;
  margin: 1em 0;
  text-align: center;
  font-family: "Tangerine", cursive;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.12em;
}

/*menu*/
.menu{
    height: 20px;
    position: fixed;
    right: 50px;
    top: 50px;
    width: 30px;
    z-index: 120;
}

.menu__line{
    background: #E2E8F0;
    display: block;
    height: 2px;
    position: absolute;
    transition:transform .3s;
    width: 100%;
}

.menu__line--center{
    top: 9px;
}

.menu__line--bottom{
    bottom: 0;
}

.menu__line--top.active{
    top: 8px;
    transform: rotate(45deg);
    background: #E2E8F0;
}

.menu__line--center.active{
    transform:scaleX(0);
}

.menu__line--bottom.active{
    bottom: 10px;
    transform: rotate(135deg);
    background: #E2E8F0;
}

/*gnav*/
.gnav{
    background: rgba(0,0,0,0.8);
    display: none;
    height: 100%;
    position: fixed;
    top:0;
    width: 100%;
    z-index:110;
}

.gnav__wrap{
    align-items:center;
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
}

.gnav__menu__item{
    margin: 40px 0;
    text-align: center;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: italic;
}

.gnav__menu__item a{
    color: #E2E8F0;
    font-size: 2em;
    font-weight: bold;
    padding: 40px;
    text-decoration: none;
    transition: .5s;
}

.gnav__menu__item a:hover{
    color: #F3E5AB;
}

.title{
  font-size: 3rem;
  text-align: center;
  font-family: "Tangerine", cursive;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.15em;
  color: #F3E5AB;
  text-shadow: 0 0  8px rgba(243, 229, 171, 0.4),0 0 20px rgba(243, 229, 171, 0.2);
}

.button{
  margin:0 auto;
  width: 80%;
  display: flex;
  align-items: flex-end;
}

.button_text{
  margin-left: auto;
  display: inline-block;
  padding: 12px 36px; 
  border: 2px solid rgba(226, 201, 129, 0.6);
  backdrop-filter: blur(4px);
  border-radius: 30px; 
  font-size: 1.3rem;
  letter-spacing: 0.15em;
  transition: all 0.3s ease;
}

.button_text:hover{
  background: rgba(226, 201, 129, 0.15);
  border-color: #e2c981;
  box-shadow: 0 0 10px rgba(226, 201, 129, 0.3);
}

.button_text a{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #e2c981; 
  text-decoration: none;
}

.button_text a:visited{
  color: #e2c981; 
  text-decoration: none;
}

.works__label{
  text-align: left;
  margin: 1em 0 0.9em;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

.works__title{
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}


/* プロフォール */
.profile__wrap{
  width: 60%;
  display: flex;
  justify-content: space-between;
  margin: 4rem auto 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.profile__left{
  width: 40%;
  display: flex;
  flex-direction: column;
}

.profile_icon{
  width: 70%;
  height: auto;
  z-index: 10;
}

.profile_icon img{
  display: block;
  width: 100%;
  height: auto;
}

.profile__name-small{
  font-size: 0.8rem;
  margin: 0.8em 0 0.5em;
}

.profile__name{
  font-size: 1.3rem;
}

.profile__name-sp{
  display: none;
}

.profile__right{
  width: 80%;
  margin-top:2rem;
}

.profile__paragraph-title{
  font-size: 1.4rem;
  line-height: 150%;
  letter-spacing: 0.18em;
}

.profile__paragraph-subtitle{
  font-size: 1.2rem;
  line-height: 150%;
  letter-spacing: 0.18em;
}

.profile__paragraph{
  font-size: 1rem;
  line-height: 175%;
  margin: 2em 0 0;
}

/* スキル */
.skills__wrap{
  width: 60%;
  margin: 6rem auto 18rem;
}

.skills__title{
  font-family: "Tangerine", cursive;
  font-weight: 700;
  font-style: normal;
  font-size: 2.4rem;
  letter-spacing: 0.18em;
}

.skills__subtitle{
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  margin: 0.8em 0 1.5em;
}

.skills__menu{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.skills__list{
  width: 11%;
  height: auto;
}

.skills__list img{
  width: 100%;
  height: auto;
}

.skills__label{
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  margin: 2.5em 0 0.5em;
}

.skills__text{
  font-size: 1rem;
  line-height: 150%;
}


/* ワークス */
.works__list-sp{
  display: none;
}

/* モーダル */
.inline__text{
  width: 65%;
  margin: 1em auto 0;
  font-size: 1rem;
  letter-spacing: 0.05em;
  line-height: 175%;
}

.inline__button_text{
  margin-left: auto;
  display: inline-block;
  padding: 12px 36px; 
  border: 2px solid rgb(19, 28, 58,0.6);
  backdrop-filter: blur(4px);
  border-radius: 30px; 
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}

/* contact */
.contact{
  width: 60%;
  margin: 0 auto;
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.contact__text{
  font-size: 1.1rem;
  line-height: 175%;
  text-align: left;
}
}



/*TB*/
@media screen and (min-width:600px) and (max-width:1080px) {
    .maintitle{
      display: none;
    }

    .maintitle__tb{
      display: block;
      margin: 5em 0 0;
      font-size: 3rem;
      text-align: center;
      font-family: "Tangerine", cursive;
      font-weight: 700;
      font-style: normal;
      letter-spacing: 0.13em;
      line-height: 110%;
    }

    .subtitle{
      font-size: 2rem;
      margin: 1.5em 0;
      text-align: center;
      font-family: "Tangerine", cursive;
      font-weight: 500;
      font-style: normal;
      letter-spacing: 0.12em;
    }

    /*menu*/
    .menu{
        height: 20px;
        position: fixed;
        right: 50px;
        top: 50px;
        width: 30px;
        z-index: 120;
    }

    .menu__line{
      background: #E2E8F0;
        display: block;
        height: 2px;
        position: absolute;
        transition:transform .3s;
        width: 100%;
    }

    .menu__line--center{
        top: 9px;
    }

    .menu__line--bottom{
        bottom: 0;
    }

    .menu__line--top.active{
        top: 8px;
        transform: rotate(45deg);
        background: #E2E8F0;
    }

    .menu__line--center.active{
        transform:scaleX(0);
    }

    .menu__line--bottom.active{
        bottom: 10px;
        transform: rotate(135deg);
        background: #E2E8F0;
    }

/*gnav*/
.gnav{
    background: rgba(0,0,0,0.8);
    display: none;
    height: 100%;
    position: fixed;
    top:0;
    width: 100%;
    z-index:110;
}

.gnav__wrap{
    align-items:center;
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
}

.gnav__menu__item{
    margin: 40px 0;
    text-align: center;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: italic;
}

.gnav__menu__item a{
    color: #E2E8F0;
    font-size: 2em;
    font-weight: bold;
    padding: 40px;
    text-decoration: none;
    transition: .5s;
}

.gnav__menu__item a:hover{
    color: #F3E5AB;
}

    .title{
      font-size: 3rem;
      text-align: center;
      font-family: "Tangerine", cursive;
      font-weight: 700;
      font-style: normal;
      letter-spacing: 0.15em;
      color: #F3E5AB;
      text-shadow: 0 0  8px rgba(243, 229, 171, 0.4),0 0 20px rgba(243, 229, 171, 0.2);
    }

    /* view works btn */
    .button{
      margin:0 auto;
      width: 80%;
      display: flex;
      align-items: flex-end;
    }

    .button_text{
      margin-left: auto;
      display: inline-block;
      padding: 12px 36px; 
      border: 2px solid rgba(226, 201, 129, 0.6);
      backdrop-filter: blur(4px);
      border-radius: 30px; 
      font-size: 0.9rem;
      letter-spacing: 0.15em;
      transition: all 0.3s ease;
    }

    .button_text:hover{
      background: rgba(226, 201, 129, 0.15);
      border-color: #e2c981;
      box-shadow: 0 0 10px rgba(226, 201, 129, 0.3);
    }

    .button_text a{
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-weight: 500;
      font-style: normal;
      color: #e2c981; 
      text-decoration: none;
    }

    .button_text a:visited{
      color: #e2c981; 
      text-decoration: none;
    }

    /* ワークス */
    .works__list-sp{
      display: none;
    }

    .works__label{
      text-align: left;
      margin: 1em 0 0.9em;
      font-size: 0.6rem;
      letter-spacing: 0.1em;
    }

    .works__title{
      font-size: 0.8rem;
      letter-spacing: 0.1em;
    }

    /* プロフィール */
    .profile__wrap{
      width: 70%;
      display: flex;
      justify-content: space-between;
      margin: 4rem auto 0;
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-weight: 500;
      font-style: normal;
    }

    .profile__left{
      width: 40%;
      display: flex;
     flex-direction: column;
    } 

    .profile_icon{
      width: 80%;
      height: auto;
      z-index: 10;
    }

    .profile_icon img{
      display: block;
      width: 100%;
      height: auto;
    }

    .profile__name-small{
      font-size: 0.7rem;
      margin: 0.8em 0 0.5em;
    }

    .profile__name{
      font-size: 1rem;
    }

    .profile__name-sp{
      display: none;
    }

    .profile__right{
      width: 80%;
      margin-top:2rem;
    }

    .profile__paragraph-title{
      font-size: 1.2rem;
      line-height: 150%;
      letter-spacing: 0.18em;
    }

    .profile__paragraph-subtitle{
      font-size: 1rem;
      line-height: 150%;
      letter-spacing: 0.18em;
    }

    .profile__paragraph{
      font-size: 0.8rem;
      line-height: 175%;
      margin: 2em 0 0;
    }

    /* スキル */
    .skills__wrap{
      width: 60%;
      margin: 6rem auto 18rem;
    }

    .skills__title{
      font-family: "Tangerine", cursive;
      font-weight: 700;
      font-style: normal;
      font-size: 2rem;
      letter-spacing: 0.18em;
    }

    .skills__subtitle{
      font-size: 1rem;
      letter-spacing: 0.1rem;
      margin: 0.7em 0 1em;
    }

    .skills__menu{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .skills__list{
      width: 11%;
      height: auto;
    }

    .skills__list img{
      width: 100%;
      height: auto;
    }

    .skills__label{
      font-size: 1rem;
      letter-spacing: 0.1rem;
      margin: 2.5em 0 0.5em;
    }

    .skills__text{
      font-size: 0.8rem;
      line-height: 150%;
    }

    /* inline */
    .inline__title{
      font-size: 1.3rem;
      font-style: italic;
      text-align: center;
      letter-spacing: 0.2rem;
      margin: 3em 0;
    }

    .inline__text{
      width: 65%;
      margin: 1em auto 0;
      font-size: 0.8rem;
      letter-spacing: 0.05em;
      line-height: 175%;
    }

    .inline__button_text{
      margin-left: auto;
      display: inline-block;
      padding: 12px 28px; 
      border: 2px solid rgb(19, 28, 58,0.6);
      backdrop-filter: blur(4px);
      border-radius: 30px; 
      font-size: 1rem;
      letter-spacing: 0.1em;
      transition: all 0.3s ease;
    }

    .inline__column-tb{
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .inline__column-img-tb{
      width: 60%;
      height: auto;
      margin-bottom: 1.3rem;
    }

    .inline__column-img-tb2{
      width: 90%;
      height: auto;
    }

    .inline__column-img-tb img,.inline__column-img-tb2 img{
      width: 100%;
      height: auto;
    }

    .contact{
      width: 80%;
      margin: 0 auto;
      text-align: center;
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-weight: 500;
      font-style: normal;
    }

    .contact__wrap{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 4em 0 15em;
    }

    .contact__text{
      font-size: 0.8rem;
      line-height: 175%;
      text-align: left;
    }
}



/*SP*/
@media screen and (max-width:599px){
    body{
        color: #ffdfdf;
    }

    /*menu*/
    .menu{
        height: 20px;
        position: fixed;
        right: 35px;
        top: 35px;
        width: 30px;
        z-index: 200;
    }

    .menu__line{
      background: #E2E8F0;
      display: block;
      height: 2px;
      position: absolute;
      transition:transform .3s;
      width: 100%;
    }

    .menu__line--center{
        top: 9px;
    }

    .menu__line--bottom{
        bottom: 0;
    }

    .menu__line--top.active{
        top: 8px;
        transform: rotate(45deg);
        background: #E2E8F0;
    }

    .menu__line--center.active{
      transform:scaleX(0);
    }

    .menu__line--bottom.active{
        bottom: 10px;
        transform: rotate(135deg);
        background: #E2E8F0;
    }

    /*gnav*/
    .gnav{
        background: rgba(0,0,0,0.8);
        display: none;
        height: 100%;
        position: fixed;
        top:0;
        width: 100%;
        z-index:130;
    }

    .gnav__wrap{
        align-items:center;
        display: flex;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .gnav__menu__item{
        margin: 40px 0;
        text-align: center;
        font-family: "Shippori Mincho", serif;
        font-weight: 400;
        font-style: italic;
    }

    .gnav__menu__item a{
        color: #E2E8F0;
        font-size: 2em;
        font-weight: bold;
        padding: 40px;
        text-decoration: none;
        transition: .5s;
    }

    .gnav__menu__item a:hover{
        color: #F3E5AB;
    }

    .maintitle{
      display: none;
    }

    .maintitle__tb{
      display: block;
      margin: 5em 0 0;
      font-size: 2rem;
      text-align: center;
      font-family: "Tangerine", cursive;
      font-weight: 700;
      font-style: normal;
      letter-spacing: 0.13em;
      line-height: 110%;
    }

    .subtitle{
      font-size: 2rem;
      margin: 1.5em 0;
      text-align: center;
      font-family: "Tangerine", cursive;
      font-weight: 500;
      font-style: normal;
      letter-spacing: 0.12em;
    }

    .scrollbar{
      position: absolute;
      top: 15%;
      left: 50%;
      transform: trnslateX(-50%);
    }

    .scrollbar::after{
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 1px;
      height: 70px;
      background: #E2E8F0;
    }

    .scrollbar::before{
      content: "";
      position: absolute;
      bottom: 0;
      left: -4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #E2E8F0;
      animation: circlemove 3s ease-in-out infinite,
      cirlemovehide 3s ease-out infinite;
    }

    @keyframes circlemove {
      0% {
        bottom: 95px;
      }
      100% {
        bottom: 0px;
      }
    }

    @keyframes cirlemovehide {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      80% {
        opacity: 0.9;
      }
      100% {
        opacity: 0;
      }
    }

    .title{
      font-size: 2rem;
      text-align: center;
      font-family: "Tangerine", cursive;
      font-weight: 700;
      font-style: normal;
      letter-spacing: 0.15em;
      color: #F3E5AB;
      text-shadow: 0 0  8px rgba(243, 229, 171, 0.4),0 0 20px rgba(243, 229, 171, 0.2);
    }

    /* home-works */
    .works__wrap{
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-weight: 500;
      font-style: normal;
      margin: 28em 0 18em;
    }

    /* view works and mail btn */
    .button{
      margin:0 auto;
      width: 80%;
      display: flex;
      align-items: flex-end;
    }

    .button_text{
      margin-left: auto;
      display: inline-block;
      padding: 12px 28px; 
      border: 2px solid rgba(226, 201, 129, 0.6);
      backdrop-filter: blur(4px);
      border-radius: 30px; 
      font-size: 0.7rem;
      letter-spacing: 0.15em;
      transition: all 0.3s ease;
    }

    .button_text:hover{
      background: rgba(226, 201, 129, 0.15);
      border-color: #e2c981;
      box-shadow: 0 0 10px rgba(226, 201, 129, 0.3);
    }

    .button_text a{
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-weight: 500;
      font-style: normal;
      color: #e2c981; 
      text-decoration: none;
    }

    .button_text a:visited{
      color: #e2c981; 
      text-decoration: none;
    }

    .works__label{
      text-align: left;
      margin: 1em 0 0.9em;
      font-size: 0.6rem;
      letter-spacing: 0.1em;
    }

    .works__title{
      font-size: 0.8rem;
      letter-spacing: 0.1em;
    }


    /* プロフィール */
    .profile__wrap{
      width: 68%;
      display: flex;
      justify-content: space-between;
      margin: 4rem auto 0;
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-weight: 500;
      font-style: normal;
    }

    .profile__left{
      width: 40%;
      display: flex;
     flex-direction: column;
    } 

    .profile_icon{
      width: 80%;
      height: auto;
      z-index: 10;
    }

    .profile_icon img{
      display: block;
      width: 100%;
      height: auto;
    }

    .profile__name-small{
      font-size: 0.4rem;
      margin: 0.8em 0 0.5em;
    }

    .profile__name{
      display: none;
    }

    .profile__name-sp{
      display: block;
      font-size: 0.9rem;
    }

    .profile__right{
      width: 80%;
      margin-top:2rem;
    }

    .profile__paragraph-title{
      font-size: 0.9rem;
      line-height: 150%;
      letter-spacing: 0.18em;
    }

    .profile__paragraph-subtitle{
      font-size: 0.6rem;
      line-height: 150%;
      letter-spacing: 0.18em;
    }

    .profile__paragraph{
      font-size: 0.55rem;
      line-height: 175%;
      margin: 2em 0 0;
    }

    /* スキル */
    .skills__wrap{
      width: 68%;
      margin: 6rem auto 10rem;
    }

    .skills__title{
      font-family: "Tangerine", cursive;
      font-weight: 700;
      font-style: normal;
      font-size: 1.5rem;
      letter-spacing: 0.18em;
    }

    .skills__subtitle{
      font-size: 0.7rem;
      letter-spacing: 0.1rem;
      margin: 0.6em 0 1.3em;
    }

    .skills__menu{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .skills__list{
      width: 11%;
      height: auto;
    }

    .skills__list img{
      width: 100%;
      height: auto;
    }

    .skills__label{
      font-size: 0.8rem;
      letter-spacing: 0.1rem;
      margin: 2.5em 0 0.5em;
    }

    .skills__text{
      font-size: 0.6rem;
      line-height: 150%;
    }



    /* ワークス */
    .works__menu-sp{
      width: 80%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin: 4em auto 0;
    }

    .works__list{
      cursor: default;
      width: 45%;
      height: auto;
      margin: 0 0 4.5em;
      z-index: 10;
    }


    /* inline */
    .inline__title{
      font-size: 1.3rem;
      font-style: italic;
      text-align: center;
      letter-spacing: 0.2rem;
      margin: 3em 0;
    }

    .inline__text{
      width: 65%;
      margin: 1em auto 0;
      font-size: 0.8rem;
      letter-spacing: 0.05em;
      line-height: 175%;
    }

    .inline__button_text{
      margin-left: auto;
      display: inline-block;
      padding: 12px 28px; 
      border: 2px solid rgb(19, 28, 58,0.6);
      backdrop-filter: blur(4px);
      border-radius: 30px; 
      font-size: 1rem;
      letter-spacing: 0.1em;
      transition: all 0.3s ease;
    }

    .inline__column-tb{
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .inline__column-img-tb{
      width: 60%;
      height: auto;
      margin-bottom: 1.3rem;
    }

    .inline__column-img-tb2{
      width: 90%;
      height: auto;
    }

    .inline__column-img-tb img,.inline__column-img-tb2 img{
      width: 100%;
      height: auto;
    }

    .inline__paragraph{
      font-size: 0.8em;
      margin: 2.5em 0 0;
    }

    /* contact */
    .contact{
      width: 70%;
      margin: 0 auto;
      text-align: center;
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-weight: 500;
      font-style: normal;
    }

    .contact__wrap{
      display: block;
      margin: 3em 0;
    }

    .contact__text{
      font-size: 0.6rem;
      line-height: 175%;
      text-align: center;
      margin-bottom: 2rem;
    }

    footer{
      font-size: 0.5rem;
      height: 80px;
      line-height: 80px;
      text-align: center;
      margin: 8em 0 0;
    }


    /* to top */
    .page-top{
      position: fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      right: 1.8rem;
      bottom: 1.25rem;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      border: 0;
      background: none;
      transition: .2s;
    }

    .page-top p{
      writing-mode: vertical-rl;
      text-decoration: none;
      text-transform: uppercase;
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-weight: 700;
      font-style: normal;
      height: 3rem;
      margin: 0;
      letter-spacing: 5px;
      text-align: right;
      color: #E2E8F0;
    }

    .page-top p:before {
      content: "";
      position: absolute;
      top: 2px;
      right: -5px;
      width: 2px;
      height: 1.25rem;
      background: #E2E8F0;
      transform: skewX(-150deg);
    }

    .page-top p:after {
      content: "";
      position: absolute;
      bottom: 0px;
      right: 0;
      width: 2px;
      height: 3rem;
      background: #E2E8F0;
    }
  
    .is-active {
      opacity: 1;
      visibility: visible;
    }

}