/*ヘッダー*/
.header {
  margin: 0 auto 20px auto;
  display: flex;
  max-width: 900px;
  height: 60px;
  font-size: 16px;
  font-weight: normal;
  margin: auto;
  width: 100%;
  line-height: 60px;
}

.header a {
text-decoration: none;
}

.header a:hover{
  text-decoration: underline;
}

header{
  display: flex;
  margin: 0 0 40px 0;
}

/* フッター */
footer { 
  width: 100%;
  height: 60px;
  text-align: center;
  font-size: 11px;
  color: #3a3a3a;
  bottom: 0; 
}

/* 全体 */
html {
  height: 100%;
}

body {
  width: 95vw;
  min-height: 100%;
}

body,h1,h2,h3,h4 {
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  line-height: 1.75;
  font-size: 16px;
  font-weight: normal;
}

h1,h2,h3 {
  margin: 0;
}

/* 非表示h１ */
.none {
  display: none;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.contents{
  padding: 0 0 0 40px;
  width: -webkit-fill-available;
}

.contents ul{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  margin: 0;
  padding: 0;
  }

.contents li img{
    max-height: 252px;
    width: 356px;
    display:flex;
    object-fit: cover;
}

.contents ul li a{
  text-decoration: none;
}

.contents ul li a img:hover{
  opacity: .5;
}

.contents li{
  list-style: none;
  margin: 0 0 60px 0;
}

/* リンク */
a {
  color: black;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* テキスト */
.center{
  text-align: center;
}

.center h2 {
  margin: 16px 0;
}

/* グローバルナビ */
nav li{
  list-style: none;
  margin: 16px 0;
}

.menu {
  width: 120px;
  height: 500px;
  background-color: #D9D9D9;
}

.menu a {
  color: black;
  text-decoration: none;
}

.menu a:hover {
  text-decoration: underline;
}

.select{
  font-weight: bold;
  font-style: italic;
}

/*トップ*/
.top {
  margin:40px 0;
  width: inherit;
}

.top img{
  margin: 0 0 40px;
  max-width: 101%;
}

.news_lists {
  border-top: #3a3a3a solid;
  margin: 0;
  padding: 16px;
}

.news_lists:last-child {
  border-bottom: #3a3a3a solid;
}

/* CV */
.aboutme h2 {
  margin: 60px 0 0;
}

.sub-title {
  font-weight: bold;
  color: #6a6a6a;
}

.sub-title:first-child{
  margin: 0;
}

/* 画像リスト表示ページ */
.list_img {
  margin: 16px 0;
}

.list_img h3 {
  margin: 0;
}

/* リスト表示ページ */
.contents .ArtWorksLists {
  display: block;
}

.ArtWorksLists li{
  margin: 16px 0;
}

.ArtWorksLists li a:hover{
  text-decoration: underline;
}

/* 作品ページ */
.works img{
  width: 100%;
  height: auto;
  padding: 40px 0 8px;
}

.works img:first-child{
  padding: 0 0 16px 0;
}

.works div{
  padding: 0 0 40px 0;
}

/*スマホレスポンシブ*/
@media screen and (max-width:600px) {
    ul{
      display: block;
      flex-wrap: wrap;
      justify-content:space-between;
      margin: 0;
      padding: 0;
    }
    li img {
      max-height: 585px;
      width: 100%;
      display: flex;
      object-fit: cover;
  }
  .contents{
    padding: 0;
  }
  .contents li{
    width: 100%;
  }

  .contents li img{
    width: 100%;
    max-height: 400px;
    object-fit: contain;
  }
  .menu {
    display: none;
  }
  .top{
    margin: 0;
  }
}
@media screen and (min-width:600px){
  .menu_sp{
    display: none;
  }
}

/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  justify-content: end;
  align-items: center;
  position: fixed;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 2px;
  width: 60px;
  border-radius: 2px;
  background: #3a3a3a;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 16px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 16px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(35deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-35deg);
}

#drawer_input:checked ~ iframe {
  height: 550px;
}
  
/* メニューのデザイン*/
.menu_contents_sp {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #fff;
  transition: .5s;
}

/* メニュー黒ポチを消す */
.menu_list_sp {
  list-style: none;
  margin: 80px 10px 0 0;
  text-align: end;
}

.menu_list_sp li{
  margin: 0 0 0 10px;
  padding: 24px 0;
  border-bottom:solid 1px #3a3a3a;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .menu_contents_sp {
  left: 0;/* メニューを画面に入れる */
}