@charset "UFT-8";


/*カーソル合わせたときの色*/
a:link {
  color: #707070;}
a:visited {
  color:#4E4C4C ;
}
a:hover {
  color: #007F89;
}
a: active {
  color: #007F89;
}
a{
  text-decoration: none;
}
a{
  transition: color 0.5s;
}

main {
  height:85vh;
}
/*上固定バー　背景*/
.page_header {
  position: fixed;
  top: 0;
  width: 85%;
  right: 0;
  height: 150px;
  background: white;
}

/*上ナビゲーション*/

.container_main_nav {

  position:fixed;
  top: 2vh;
  width:76%;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background-color:;
}
.container_main_tag {
  width:90%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.container_snsandlag_tag {
  width:10%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.nav_label {
  font-size: 20px;
  line-height: 1.5;
  color: #707070;
  font-family: "source-han-sans-japanese", sans-serif;
 font-weight: 700;
 font-style: normal;
}

/*カーソル合わせたときの色*/
.nav_label:link {
  color: #707070;}
.nav_label:visited {
  color:#4E4C4C ;
}
.nav_label:hover {
  color: #007F89;
}
.nav_label: active {
  color: #007F89;
}
.nav_label{
  text-decoration: none;
}
.nav_label{
  transition: color 0.5s;
}

/*title*/

.title{
  list-style: none;
  position: fixed;
  top: 0;
  left: 0;
}
.title p{
  margin: 0em 0px;
}
.title_base {
 font-size: 20px;
 font-family: "source-han-sans-japanese", sans-serif;
font-weight: 700;
font-style: normal;
}

.title_color {
 font-size: 20px;
 color:#007F89;
 font-family: "source-han-sans-japanese", sans-serif;
font-weight: 700;
font-style: normal;
}


/*横スクロール*/
.scroll__wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 0 0.5rem;
    height: 85vh;
    width:auto;
    top:10vh;
}
.scroll__wrapper::-webkit-scrollbar {
    height: 10px;
}
.scroll__wrapper::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}
.scroll__wrapper::-webkit-scrollbar-button {
    display: none;
}
.scroll__wrapper::-webkit-scrollbar-track-piece:start, .scroll__wrapper::-webkit-scrollbar-track-piece:end {
    background-color: transparent;
}
.scroll__wrapper__list {
    display: flex;
    gap: 1rem;
}
.scroll__wrapper__list::after {
    content: "";
    width: 150px;
    display: block;
    position: relative;
    flex: 0 0 auto;
}
.scroll__wrapper__list__item {
    color: #000;
    width: auto;
    flex: 0 0 auto;
    border-radius: 0.5rem;
    background-color: white;

    display: flex;
    flex-direction: column;
}
.scroll__wrapper__list__item img {
  position: relative;
    object-fit: scale-down;
    height: 70vh;
    width: auto;
}
.scroll__wrapper__list__item h3 {
  font-size: 20px;
  line-height: 0;
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: 700;
  font-style: normal;
  }
.scroll__wrapper__list__item p {
  font-size: 12px;
  line-height: 0;
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: 700;
  font-style: normal;
  }

  /*footer*/
  footer {
  height: 10vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  }
  footer p {
   color: #707070;
    font-size: 15px;
  }

  /*MOBILE SIZE*/
  @media (max-width: 900px) {
    /*titleの大きさ変更*/
  .page_header {
      height: 20vh;
    }
  .title {
    display: flex;
    flex-direction: row;
  }
  .title_color {
     font-size: 15px;
   }
  .title_base {
     font-size: 15px;
    }
      /*見出しの写真の大きさ変更*/
    .document_container {
      width: 70%;
      left:0;
  }
    /*ナビゲーションの大きさや位置変更*/
  .nav_label {
    font-size: 10px;
  }
  .container_main_nav {
    width: 90%;
    right:5%;
  }
  .page_header {
      width: 100%
    }

    .container_main_tag {
      width:90%;
      justify-content: space-around;
      position:fixed;
      top: 15vh;
    }

    .container_snsandlag_tag {
      position:fixed;
      right: 0;
      width:30%;
      display: flex;
      justify-content: space-around;
    }
  .scroll__wrapper {
      height: 75vh;
      top:20vh;
  }
  .scroll__wrapper__list__item img {
      height: 60vh;
  }
  .scroll__wrapper__list__item h3 {/*ドローイングタイトル_フォント_サイズ変更*/
    font-size: 15px;
    }

footer {/*フッター_サイズ変更*/
padding: 1px 0;
}
footer p {
  font-size: 10px;
}
}