@charset "UTF-8";
/*///////////////////
ハンバーガーメニュー
//////////////////*/

/* ボタン外側 */
.openbtn {
  position:relative;
  cursor: pointer;
  width: 80px;
  height: 50px;
  border-radius: 5px;
  z-index: 9999;
}

/* ボタン内側 */
.openbtn .openbtn-area{
  transration: all .4s;
}

.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 8px;
    height: 1px;
    border-radius: 2px;
	  background: #020202;
  	width: 50%;
  }


.openbtn span:nth-of-type(1) {
	top:12px;
}

.openbtn span:nth-of-type(2) {
	top:22px;
}

.openbtn span:nth-of-type(3) {
	top:32px;
}

/*activeクラスが付与されると
線と周りのエリアが回転して×になる*/

.openbtn.active .openbtn-area{
	transform: rotateY(-360deg);
  z-index: 9999;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-135deg);
    width: 40%;

}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;

}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(135deg);
    width: 40%;

}

/*JSを使いfixedクラスが付与された際の設定*/
.header.fixed{
	position: fixed;
  z-index: 999;
  top:0;
  left:0;
}

/* ドロワーメニュー */
.g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	  top:0;
    right: -120%;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:#ffffff;
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
.g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
.g-nav.panelactive .g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
.g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

.g-nav li{
	list-style: none;
    text-align: center;
}

.g-nav li a{
	color: #333;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

.site {
  z-index: 999;
}

/* スライダー */
.slider {
  width: 80%;
  height: 50vh;
  margin-top: 30px;
  margin-bottom: 10px;
  border-radius: 10px;
}



/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1.1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

.fadeRight2{
animation-name:fadeRightAnime;
animation-duration:8.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*左エリア*/
.fixed-area{
  width: 50%;
  text-align: center;
}

/*右エリア*/
.container{
	/*横半分50%にする*/
	width:50%;
}

.main-area {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
  margin: 0 20px 0 20px;
  align-items: center;
}

/* Profileリンク */
.blog a {
  text-decoration: none;
  color: black;
}

.blog a:hover {
  color: black;
  font-weight: lighter;
}

/* Adressエリア */
/*.adress-area {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
  margin: 0 20px 0 20px;
  align-items: center;
} */

/* フッター */
.footer {
  padding: 70px 0;
  background-color: #ffffff;
  color: #707070;
  font-size: 13px;
}

.footer-container {
  display: grid;
  gap: 50px;
  justify-items: center;
}

.footer-menu a {
  text-decoration: none;
  color: #707070;
}

.footer-sns {
  display: flex;
  gap: 24px;
  font-size: 24px;
}

.footer-sns a {
  display: grid;
  place-items: center;
  width: 36px;
  aspect-ratio: 1 / 1;
  background-color: #8cc8f0;
  color: #ffffff;
  clip-path: circle(50%);
  text-decoration: none;
}

@supports not (aspect-ratio: 1 / 1){
  .footer-sns a {
    height: 36px;
  }
}

.footer-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/*768px以下*/

@media screen and (max-width:768px){
.main-area{
	display: block;/*display:flex;を解除*/
}
.fixed-area{
 	position:relative!important;/*position stickyを解除*/
	width:100%;/*横幅を100%にして1列に見せる*/
	height: 35vh;/*縦幅を100vh⇒40vh　※任意の高さに設定可能*/
}
.container{
	width:90%;/*横幅を100%にして1列に見せる*/
}

.about-title img {
  width: 80%;
  height: auto;
}

.profile-text-area {
  background-image: url(../img/Hand_coding_sp.gif);
  background-position: bottom right;
  background-size: auto;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255,0.5);
  background-blend-mode: lighten;

}

.works-title img {
  width: 80%;
  height: auto;
}

.work-text-area {
  background-image: url(../img/People_talking_sp.gif);
  background-position: center left;
  background-size: auto;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255,0.5);
  background-blend-mode: lighten;

}

.contact img {
  width: 80%;
  height: auto;
}

input[type="text"],
input[type="email"],
textarea {
  max-width: 100%;
}

/*.adress-area{
	display: block;
} */

}

@media screen and (min-width:768px){
  .image img {
    width: 50%;
    height: auto;
    border-radius: 10px;
  }

  .image {
    text-align: center;
    margin: 50px 20px 50px 0;
  }

  .profile-text-area {
    background-image: url(../img/Hand_coding.gif);
    background-position: right;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .work-text-area {
    background-image: url(../img/People_talking.gif);
    background-position: right;
    background-size: contain;
    background-repeat: no-repeat;
  }

.skills-container {
  grid-template-columns: repeat(2, 1fr);
}

.contact-text-area, .form-area {
  width: 80%;
  margin: 0 auto;
  max-width: 600px;
}

.footer-container {
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  gap: 20px;
}

.footer-container > .footer-sns {
  grid-column: 2;
  grid-row: 1 / 4;
}

}