@charset "utf-8";
@import url(sanitize.css);
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;700&display=swap');

/* タブレット･PC用レイアウト --画面幅 600px 以上 */
@media screen and (min-width: 600px) {
}

/* 全体 */
body {
  color: #555;
}

p {
  line-height: 1.6em;
}

em {
  font-weight: bold;
}

/* リンク */
@media (hover: hover) {
  /* hover指定できるPCを想定したスタイル */
  a {
    text-decoration: none;
    transition: color 0.2s;/* ホバー時色が変わるまでの時間 */
    color: #555;
  }

  a:link {
    color: #555;
  }
  a:visited {
    color: #555;
  }
  a:hover {
    color: #e3acae;
    position:relative;top:2px ;left:2px;
  }

  a:active {
    color: #e3acae;
  }

  /* リンク 画像の場合 */
  .image_link{
    display:block;
  }
  .image_link img{
    transition:0.2s;
    display:block;
    width:100%;
  }
  .image_link:hover img{
    opacity:0.6;/* 透明度60% */
  }
}


@media (hover: none) {
/* hoverが使えないタッチ端末を想定した装飾 */
  a {
    text-decoration: none;
    color: #555;
  }
  a:link {
    color: #555;
  }
  a:visited {
    color: #555;
  }
  a:active{
    color: #e3acae;
  }
    /* リンク 画像の場合 */
  .image_link{
    display:block;
  }
  .image_link img{
    transition:0.2s;
    display:block;
    width:100%;
  }
  .image_link:active img{
    opacity:0.6;/* 透明度60% */
  }
}


/* ヘッダー */
#header {
/* 参考
  https://qiita.com/7note/items/6bcadabe1667919bc26c
  https://b-risk.jp/blog/2023/03/sticky/
*/
  width:100%;/* 幅いっぱいを指定 */
  height:70px;
  position: sticky; /* ウィンドウを基準に画面にフロート */
  top: 0; /* 上下の固定位置を上から0pxにする */
  padding: 0; /* ヘッダー内の余白を指定 */
  box-sizing: border-box; /* padding分を含んで幅を100%にするため */
  display: flex; /* 中の要素を横並びにする */
  align-items: center; /* 中の要素を縦軸の中央に並べる */
  background-color: #ace3c6;
  z-index: 0;
}

  .container_header {
    display: flex;/* 中の要素を横並びにする */
    align-items: baseline;/* 中の要素を文字のベースラインをそろえて並べる */
  }

    .container_header .nav .menu {
        display: flex;/* 中の要素を横並びにする */
        margin-left: 10px;
      }

      .container_header .nav .menu li {
        list-style: none; /* リストの点を消す */
        margin-left: 20px;
        font-family: 'Gabarito', sans-serif;
        font-weight: bold;
      }


  /* SP用レイアウト --画面幅 600px 未満 */
  @media screen and (max-width: 599px) {

    /* ヘッダー */
    #header {
      width: 100%;
      height: auto;
      align-items: center;
      padding:0; /* ヘッダー内の余白を指定 */
      line-height: 0;
      }

      .container_header {
        width: 100%;
        flex-direction: column;
        align-items: center;
      }

      .container_header .nav .menu {
        display: flex; /* 中の要素を横並びにする */
        margin: 2% auto 12%;/* 上 左右 下 */
      }

      .container_header .nav .menu li {
        margin:0 auto;
      }

      .container_header .nav .menu li + li {
        margin-left: 20px;
      }
  }


/* サイト名 */
h1 {
  padding: 40px;
  font-size: 28px;
  color: azure;
  font-family: 'Gabarito', sans-serif;
  font-weight: bold;
}
  /* SP用 */
  @media screen and (max-width: 599px) {
    h1 {
    padding: 4% 0;
    }
  }


/* ヘッダー以下の領域 */
#wrap {
  width: 90%;
  margin: 15px 30px;
}
  /* SP用 */
  @media screen and (max-width: 599px) {
    #wrap {
      width: 90%;
      margin: 0 auto;/* ブロック要素 中央寄せ */
      }
    }


/* 項目ごとの領域 */
.contents {
  margin: 40px 0px 0px;/* 上 左右 下 */
  padding: 10px 20px 25px;/* 上 左右 下 */
  background-color: #f7fffb;
}


/* 見出し 項目トップ */
h2 {
  font-size: 22px;
  margin-bottom: 1.5em;
  font-family: 'Gabarito', sans-serif;
}

h3 {
  font-size: 16px;
  margin-top: 1.5em;
}

h4 {
  font-size: 15px;
  font-weight: normal;
}


/* ポートフォリオ配置領域 */
.grid {
  display: grid;
  grid-template-columns:repeat(3, 1fr);
  justify-items: space-evenly;/* 縦軸 すべてのアイテムを等間隔に配置 */
  align-content: space-evenly;/* 横軸 すべてのアイテムを等間隔に配置 */
  gap: 20px;
}

  .grid .card {
    list-style: none; /* リストの点を消す */
    padding: 5% 5% 20%;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.2);/* 影をつける */
  }

    /* 画像サイズ */
    .grid .card img {
      width: 100%;
      height: 100%;
      border: 1px solid #e8e8e8;
    }

  /* SP用 */
  @media screen and (max-width: 599px) {
    .grid {
      display: flex;
      flex-direction: column;
      height: auto;
      width: 100%;
      margin-bottom: 10px;
      padding: 15px;
    }
    .grid .card {
      padding: 5% 5% 20%;
    }
  }


/* ポートフォリオ展示ページ */
.container {
  margin: 30px 15px;
  padding: 10px;
}

  .container img {
    width: 100%;
    height: 100%;
  }

  .container p {
    font-size: 14px;
    line-height: 1.8em;
    margin-bottom: 2em;
  }

  /* SP用 */
  @media screen and (max-width: 599px) {
    .container {
      margin: 30px auto;
      padding: 0;
    }
  }


/* About部分 */
/* 参照：
http://www.02320.net/description-list-css-decoration/ */
.profile {
  width: 80%;
  line-height: 1.6em;
}
.profile dt {
  margin-top: 1.5em;
  padding: 0.4em 1em 0.3em;
  background-color: #ace3c6;
  font-size: 95%;
}
.profile dd {
  padding: 0.5em 1em;
  margin-left: 0;
  border-width: 0;
  border-style: none solid solid;
}
  /* SP用 */
  @media screen and (max-width: 599px) {
    .profile {
      width: 100%;
    }
  }


/* リンクテキストの右に外部リンクアイコン */
/* 参考：https://www.ipentec.com/document/css-show-icon-after-anchor-link */
.target__b:after {
  margin: 0 0.5rem 0 0.2rem;/* 上右下左 */
  padding: 0 0 0 0.2rem;/* 上右下左 */
  display: inline-block;
  width: 1rem;
  content:url('../target_b.svg');
}


/* フッダー */
#footer {
  margin-top: 50px;
  margin-bottom: 10px;
  text-align: right;
}