@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400..900&family=Noto+Sans+JP:wght@100..900&display=swap');

/* メモ
font-family: "Noto Sans JP", sans-serif;
font-weight: 100～900;

font-family: "Maven Pro", sans-serif;
font-weight: 400～900;
*/

/* 変数 */
:root {
  --main-bgColor: #D4D4D4;
  --main-minWidth: 1000px;
  --main-maxWidth: 1200px;
  --main-padding: 40px;
}

/* 全ての要素 */
* {
  color: #333333;
  text-decoration: none;
  list-style-type: none;
}

/* body */
body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

/* header */
header {
  background-color: rgba(62, 84, 124, 0.9);
  position: fixed;
  z-index: 9999;
  width: 100vw;
}

.header_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  min-width: var(--main-minWidth);
  max-width: var(--main-maxWidth);
  margin: auto;
  font-family: "Maven Pro", sans-serif;

  h1 {
    color: white;
    font-size: 36px;
    font-weight: 600;
  }

  ul {
    display: flex;
  }

  li {
    color: white;
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
    margin-right: 20px;
    position: relative;
  }

  li:last-child {
    margin-right: 0;
  }

  li::after {
    position: absolute;
    bottom: 0;
    content: "";
    display: block;
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    width: 0%;
    transition: all 0.3s ease;
  }

  li:hover::after {
    width: 100%;
  }

  a {
    opacity: 1;
    transition: opacity 1s;
  }

  a:hover {
    opacity: 0.7;
  }
}

/* section */
.contents_wrapper {
  min-height: 100vh;
}

/* top */
.top {
  background-image: url(../img/top.jpg);
  background-size: cover;
  background-position: 50% 50%;
}

.contents_top {
  display: flex;
  align-items: center;
  justify-content: right;

  .wrap {
    padding: var(--main-padding);
  }

  h1 {
    color: white;
    font-size: 36px;
    font-weight: 600;
    padding-bottom: 10px;
    animation: backInRight 1s 1;
  }

  p {
    color: white;
    font-size: 20px;
    animation: backInRight 1s 1 2s;
    animation-fill-mode: both;
  }
}

/* profile */
.profile {
  background-color: var(--main-bgColor);
}

.contents_profile {
  display: flex;
  align-items: center;

  h2 {
    flex: 1;
    color: white;
    font-size: 36px;
    font-weight: 600;
    padding-left: var(--main-padding);
  }

  .box_profile {
    flex: 5;
    background-color: rgba(255, 255, 255, 0.8);
    padding: var(--main-padding);
    margin: 10vh 0;
    display: flex;

    figure {
      width: 150px;
      height: 150px;
      margin-right: 40px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .introduce {
      width: calc(100% - 190px);
      padding-right: var(--main-padding);

      .box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        .left {
          flex: 1;
          padding-right: 40px;

          h3 {
            display: none;
          }

          dt {
            font-size: 40px;
            font-weight: 600;
            margin-bottom: 10px;
          }
        }

        .right {
          flex: 2;

          p {
            font-size: 0.8rem;
            margin-bottom: 0.4rem;
          }
        }
      }

      .skill,
      .interest {
        margin-bottom: 20px;

        h3 {
          font-size: 1.2rem;
          font-weight: 600;
          margin-bottom: 5px;
        }

        table {
          border-collapse: collapse;
          width: 100%;
        }

        tr {
          line-height: 2;
        }

        th, td {
          border: 1px solid var(--main-bgColor);
        }

        td {
          font-size: 0.9rem;
          padding: 0 5px;
        }

        tr:nth-child(odd) th {
          background-color: #AFAFAF;
        }

        tr:nth-child(even) th {
          background-color: var(--main-bgColor);
        }

        .rank {
          text-align: center;
          width: 200px;
        }
      }

      .interest {
        margin-bottom: 0;

        li {
          font-size: 0.9rem;
          list-style-type: disc;
        }
      }
    }
  }
}

/* works */
.works {
  /* background-color: var(--main-bgColor); */
  background-image: url(../img/works.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-color: rgba(50, 50, 50, 0.5);
  background-blend-mode: darken;
}

.contents_works {
  display: flex;
  align-items: center;

  h2 {
    flex: 1;
    color: white;
    font-size: 36px;
    font-weight: 600;
    padding-left: var(--main-padding);
  }

  .box_works {
    flex: 5;
    background-color: rgba(255, 255, 255, 0.8);
    padding: var(--main-padding);
    margin: 10vh 0;
    display: flex;
    justify-content: space-evenly;

    .thumbbox {
      width: 265px;
      height: 200px;
      margin: 0 10px;
      cursor: pointer;

      :hover {
        opacity: 0.9;
        transition: all 0.3s ease;
      }

      .image {
        display: flex;
        flex-direction: column-reverse;

        img {
          width: 100%;
          height: 165px;
          object-fit: cover;
        }

        .img2 {
          background-color: white;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 165px;

          img {
            width: 80%;
            height: 80%;
            object-fit: contain;
          }
        }

        h3 {
          background-color: #737272;
          color: white;
          font-size: 1.1rem;
          font-weight: 500;
          text-align: center;
          line-height: calc(200px - 165px);
          border-radius: 0 0 20px 20px;
        }
      }
    }
  }
}

/* footer */
footer {
  background-color: var(--main-bgColor)
}

.footer_wrapper {
  min-width: var(--main-minWidth);
  max-width: var(--main-maxWidth);
  margin: auto;
  padding-bottom: 20px;

  h1 {
    color: white;
    font-size: 36px;
    font-weight: 600px;
    padding: 120px 0;
    text-align: center;
  }

  .sns {
    padding-bottom: 60px;

    ul {
      display: flex;
      justify-content: center;
      padding-left: 0;

      li:first-child {
        margin-right: 20px;
      }

      img {
        height: 40px;
      }
    }
  }

  small {
    color: white;
    font-size: 0.8rem;
    font-weight: 400;
    text-align: center;
    display: block;
  }

  a {
    opacity: 1;
    transition: opacity 0.5s;
  }

  a:hover {
    opacity: 0.5;
  }
}

/* スクロールアニメーション */
.box_profile, .box_works {
  opacity: 0;
}

.box_fade {
  animation: fadeInRight 1s 1 1s;
  animation-fill-mode: both;
}

.h2_anim {
  animation: headShake 1s 1 1s;
  animation-fill-mode: both;
}

/* contact */
.contents_contact {
  background-color: #d4d4d4;
  display: flex;
  align-items: center;

  h2 {
    flex: 1;
    color: white;
    font-size: 36px;
    font-weight: 600;
    padding-left: var(--main-padding);
  }

  form {
    flex: 5;
    padding: 40px;
    background: rgba(255, 255, 255, 0.5);
  }

  .form-inner {
    display: block;
    margin-bottom: 20px;
  }

  .form-label {
    font-weight: bold;
    margin-bottom: 10px;

    span {
      font-size: 0.8rem;
      font-weight: normal;
      background-color: red;
      color: white;
      padding: 0 10px;
    }
  }

  .form-input {
    width: 100%;

    input[type="text"],
    input[type="email"],
    textarea {
      width: 100%;
      height: 40px;
      font-size: 1.1rem;
      vertical-align: middle;
      background-color: #D0D298;
      border: none;
    }
  }

  .submit-box {
    display: flex;
    justify-content: flex-end;

    .btn {
      display: block;
      background-color: #333333;
      color: white;
      width: 200px;
      height: 40px;
      cursor: pointer;
      border: none;
    }

    .btn:hover {
      opacity: 0.7;
    }
  }
}

/* モーダルと背景の指定 */
.modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0,0,0,50%);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
}

/* モーダルの擬似要素の指定 */
.modal:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  margin-left: -0.2em;
}

/* クラスが追加された時の指定 */
.modal.is-active{
  opacity: 1;
  visibility: visible;
}

/* モーダル内側の指定 */
.modal-container{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 600px;
  width: 90%;
}

/* モーダルを閉じるボタンの指定 */
.modal-close{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  color: #fff;
  background: #000;
  border-radius: 50%;
  cursor: pointer;
}

/* モーダルのコンテンツ部分の指定 */
.modal-content{
  background: #fff;
  text-align: left;
  line-height: 1.8;
  padding: 20px;
}

/* モーダルのコンテンツ部分のテキストの指定 */
.modal-content p{
  margin: 1em 0;
}

.category {
  background-color: #3FB5E8;
  color: white;
  display: inline-block;
  min-width: 100px;
  padding: 0 10px ;
}

iframe {
  width: 100%;
}

.about {
  date, dd {
    font-size: 0.8rem;
  }

  dt {
    font-size: 1.2rem;
    font-weight: 600;
  }

  p {
    font-size: 0.9rem;
  }
}