/*
Theme Name: forio
Description: ポートフォリオ用で作成されました。
Author: 佐藤
*/

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 1.4em;
  color: #333;
  background: linear-gradient(180deg, #eff1f4, #e1e6ea) no-repeat !important;
  font-family: reitam, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

a {
  display: block;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

.no-tablet {
  display: block;
}

.tablet {
  display: none;
}

/*header設定*/
#header {
  position: relative;
  /*h1の中央寄せ配置の起点とするためのrelative*/
  height: 91vh;
  /*高さを全画面にあわせる*/
}

#video-area {
  position: fixed;
  z-index: -1;
  /*最背面に設定*/
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}

#video {
  /*天地中央配置*/
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh;
  /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw;
  /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}

/*========= レイアウトのためのCSS ===============*/

#container {
  background: #fff;
  padding: 300px 0;
  text-align: center;
}

main {
  background: linear-gradient(180deg, #eff1f4, #e1e6ea) no-repeat !important;
  padding: 1em 0;
}

#main {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  line-height: 2em;
  color: #333;
}


.head_wrap {
  padding: 1.4em;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  background: linear-gradient(180deg, #eff1f4, #e1e6ea) no-repeat !important;
}

.wrap_menu ul {
  display: flex;
}

.wrap_menu ul li {
  padding: 0 1em;
}

.profile {
  padding: 2em 1em;
  text-align: center;
  margin: 0 auto;
}

.profile p {
  padding: 0.6em 0;
}

.profile div {
  font-size: 2.4em;
  font-weight: bold;
}

.profile_des {
  padding: 2em 0;
  letter-spacing: 0.2em;
}

.profile_des p {
  font-size: 2em;
  font-weight: bold;
  padding: 0.6em 0;
}

.profile_des div {
  padding: 0.5em 0;
}

.title_element {
  font-size: 2em;
  text-align: center;
  font-weight: bold;
  padding: 1em 0 0;
}

.work_wrap {
  display: flex;
  justify-content: space-between;
  padding: 1em;
}

.work_element {
  margin: 1em;
  flex: 1;
  box-shadow: 9px 8px 10px rgba(0, 0, 0, 0.21), 0 0 5px 0 #ffffff, -4px 0 5px 0 #ffffff, -4px -6px 15px #ffffff;
  border-radius: 0.6em;
}

.work_element:hover {
  transition: 0.3s;
  box-shadow: 16px 17px 10px rgba(0, 0, 0, 0.21), 0 0 5px 0 #ffffff, -4px 0 5px 0 #ffffff, -16px -16px 15px #ffffff;
}

.work_element a {
  padding: 1em;
}



.work_element img {
  width: 100%;
  border-radius: 0.6em;
}

.work_element div {
  font-size: 1em;
  padding: 0.4em 0;
  font-weight: bold;
}

.skill_wrap {
  display: flex;
  justify-content: space-evenly;
  padding: 1em;
}

.skill_element {
  padding: 0.6em;
  margin: 1em;
  box-shadow: 9px 8px 10px rgba(0, 0, 0, 0.21), 0 0 5px 0 #ffffff, -4px 0 5px 0 #ffffff, -4px -6px 15px #ffffff;
  border-radius: 1em;
  width: 30%;
}

.skill_element div {
  text-align: center;
  font-size: 1.4em;
  padding: 0.4em;
  font-weight: bold;
}

.skill_element img {
  width: 90%;
  border-radius: 1em;
  display: flex;
  margin: 0 auto;
}

.skill_element p {
  font-size: 0.8em;
  padding: 1em;
  line-height: 2em;
}

footer {
  padding: 3em 2em;
  background-color: #000;
  color: #fff;
  text-align: center;
}

.fade {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.5s, transform 1s;
}.fade.active {
	opacity: 1;
	transform: translateY(0px);
}

.page-top {
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  background-color: #A9A9A9;
}

.page-top:hover {
  background-color: #bbbbbb;
  transition: 0.3s;
}

.page-top a {
  display: block;
  padding: 1em 0;
  color: #737d6d;
}

.page-top a:hover {
  opacity: 0.8;
  transition: 0.3s;
}

.page-top .material-icons-outlined {
  vertical-align: bottom;
}

.sub-title {
  font-size: 2.4em;
  font-weight: bold;
  text-align: center;
  padding: 1em;
}

.sub-wrap {
  width: 80%;
  margin: 0 auto;
}

.sub-menu {
  padding: 0.8em 0;
}

.sub-menu div {
  font-size: 1.4em;
  font-weight: bold;
  padding: 0.4em 0;
}

.sub-menu p a {
  color: #76B6EA;
}

.sub-des img {
  width: 100%;
}

.sub-des p {
  padding: 0.4em 0;
}

.sub-des p {
  text-align: center;
}

.home {
  width: 20%;
  margin: 2em auto;
}

.home a {
  padding: 1em;
  font-weight: bold;
  border-radius: 1em;
  text-align: center;
  box-shadow: 9px 8px 10px rgba(0, 0, 0, 0.21), 0 0 5px 0 #ffffff, -4px 0 5px 0 #ffffff, -4px -6px 15px #ffffff;
}

.home a:hover {
  transition: 0.3s;
  box-shadow: 11px 9px 10px rgba(0, 0, 0, 0.21), 0 0 5px 0 #ffffff, -4px 0 5px 0 #ffffff, -8px -9px 15px #ffffff;
}

@media screen and (max-width: 1380px) {

  #main {
    width: 80%;
  }

  .skill_element {
    width: 40%;
  }

}

@media screen and (max-width: 1024px) {

  .no-tablet {
    display: none;
  }
  
  .tablet {
    display: block;
  }

  #main {
    width: 90%;
  }

  .skill_wrap {
    padding: 0;
  }

  .skill_element {
    width: 60%;
  }

  .title_element {
    padding: 1em 0 0.6em;
  }

  .work_wrap {
    padding: 0;
  }

  .work_element div {
    font-size: 0.8em;
  }

  .skill_element div {
    font-size: 1em;
  }

  .skill_element img {
    width: 50%;
  }

  .sub-wrap {
    width: 100%;
  }

  .home {
    width: 40%;
    margin: 1em auto 3em;
  }

  
}

@media screen and (max-width: 599px) {

  body {
    font-size: 1em;
  }

  .pc {
    display: none;
  }
  
  .sp {
    display: block;
  }

  .work_wrap {
    display: block;
    padding: 0;
  }

  article {
    padding: 0.6em;
  }

  .work_element {
    margin: 0 auto 2em;
  }

  .skill_wrap {
    display: block;
    padding: 0;
  }

  .skill_element {
    width: auto;
    margin: 0 auto 2em;
  }

  .skill_element p {
    font-size: 1em;
  }

  .sub-title {
    font-size: 1.8em;
  }

  .sub-des p {
    padding: 1em 0;
  }
  
}