/**********/
/*カスタムプロパティ*/
/**********/
:root {
  /*サイズ*/
  --display-size: 1190px; /*デスクトップサイズ*/
  --grid-size: 280px; /*グリッドとグリッド画像サイズ*/
  --radius-size: 5px; /*グリッドの角丸サイズ*/
  /*色*/
  --back-color: #333; /*ヘッダー・フッター色*/
  --menu-separator_color: #666; /*メニュー区切り線の色*/
}

/**********/
/*デフォルト設定*/
/**********/
html{
  /*フッターとの隙間*/
	height: 100%;
}
body{
  color: #333; /*基本の文字色*/
  background-color: #eee; /*基本の拝啓色*/
  font-size: 16px;

  /*フッターとの隙間*/
	min-height: 100%;
  /*min-height: 100%;*/
  display: flex;
  flex-direction: column;

}
a{
  text-decoration: underline;
}
a:hover{
  color: #777;
}

/**********/
/*ボディ基本部分*/
/**********/

/*外枠*/
.wrapper{
	height: 100%;
  width: 100%;
  margin:0; padding: 0;

  /*フッターとの隙間*/
  flex: 1;
}

/**********/
/*ヘッダー*/
/**********/
/*ヘッダー*/
header {
  width: 100%;
  background-color: var(--back-color);
  color: #fff;
  /*background-image: url(../img/bear400.png);*/
  position: sticky; /* ヘッダー固定 */
  top: 0; /* 上部配置 */
  left: 0; /* 左位置 */
  z-index: 1;
}

header > div{
  margin: 0 auto;
}

/*ヘッダー背景*/
header img{
}

/*テキスト*/
header p{

}

/*サイトのロゴ枠*/
.site-title-link{
  /*display: flex;*/
  text-decoration: none;

  margin-left: 10px;
  line-height: 50px;
  font-weight: bolder;
  font-size: 20px;
  height: 50px;
}
.site-logo{
  float: left;
  width: 50px;
  height: 50px;
}


/*ヘッダーメニュー*/
nav{
  width: 100%;
  background-color: var(--back-color);
}

nav > ul{
  margin: auto;
  background-color: var(--back-color);
  color: #fff;

}

nav ul li{

}

nav ul li a{
  display: block;
  padding: 7px 20px;
  color: #fff;
  text-shadow: 1px 2px 3px #eee;
  text-decoration: none;
}
nav ul li a:hover{
  background-color: #ddd;
  color: #333;
  text-shadow: 1px 2px 3px #666;
}


/*三本線メニュー*/
@media screen and (max-width:1190px) {
  .menu-btn {
      position: fixed;
      top: 0;
      right: 0;
      display: flex;
      height: 50px;
      width: 60px;
      justify-content: center;
      align-items: center;
      z-index: 90;
      background-color: #444;
  }
  .menu-btn span,
  .menu-btn span:before,
  .menu-btn span:after {
      content: '';
      display: block;
      height: 3px;
      width: 25px;
      border-radius: 3px;
      background-color: #ffffff;
      position: absolute;
  }
  .menu-btn span:before {
      bottom: 8px;
  }
  .menu-btn span:after {
      top: 8px;
  }

  #menu-btn-check:checked ~ .menu-btn span {
      background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
  }
  #menu-btn-check:checked ~ .menu-btn span::before {
      bottom: 0;
      transform: rotate(45deg);
  }
  #menu-btn-check:checked ~ .menu-btn span::after {
      top: 0;
      transform: rotate(-45deg);
  }
  #menu-btn-check {
      display: none;
  }
  #menu-btn-check:checked ~ .menu-content {
      left: 0;/*メニューを画面内へ*/
  }


  .menu-content {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 100%;/*leftの値を変更してメニューを画面外へ*/
      z-index: 80;
      /*background-color: #3584bb;*/
      background-color:  var(--back-color);
      transition: all 0.5s;/*アニメーション設定*/
  }
  .menu-content ul {
      padding: 70px 10px 0;
  }
  .menu-content ul li {
      border-bottom: solid 1px #ffffff;
      list-style: none;
  }
  .menu-content ul li a {
      display: block;
      width: 100%;
      font-size: 15px;
      box-sizing: border-box;
      color:#ffffff;
      text-decoration: none;
      padding: 9px 15px 10px 0;
      position: relative;
  }
  .menu-content ul li a::before {
      content: "";
      /*width: 7px;
      height: 7px;
      border-top: solid 2px #ffffff;
      border-right: solid 2px #ffffff;
      transform: rotate(45deg);
      position: absolute;
      right: 11px;
      top: 16px;*/
  }

}

/******/
/*メイン一覧*/
/******/
main{
  width: 100%;
  padding: 2em 1em;
  margin: 0 auto;
}

/*投稿カテゴリ表記*/
.contribution-list{
  padding: 5px 2px 20px 2px;
  font-size: 24px;
  font-weight: bold;
}

  /*グリッド*/
.glid{
  display: grid;
  justify-content: center;

  grid-gap: 10px;
  grid-template-columns: repeat(1, minmax(var(--grid-size),var(--grid-size)));
  /*
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  grid-template-rows: repeat(4, minmax(200px, 1fr));
  */
}
.glid > .list-artwork {
  position: relative;
  border: 1px solid #CCC;
  box-shadow: 2px 2px 2px #aaa;
  border-radius: var(--radius-size);
}
.glid > .list-artwork > a{
  display: block;
  width:100%;
  height:100%;
  font-weight: bolder;
  text-decoration: none;
}
.glid > .list-artwork > a:hover{
  background-color: rgba(128,128,128,0.1);
  color: var(--back-color);
  color: #444;
  filter: brightness(110%);
}
.glid > .list-artwork > a:hover > .article_title{
  text-decoration: underline;
}
.glid img{
  min-width: var(--grid-size);
  min-height: var(--grid-size);
  object-fit: cover;
  border-radius: var(--radius-size);
  /*
  padding: 10px 10px 5px;
  max-width: 100%;
  max-width: 240px;
  max-height: 240px;
  height: auto;
  */
}
.glid img:hover{
  /*
  padding: 10px 10px 5px;
  max-width: 100%;
  max-width: 240px;
  max-height: 240px;
  height: auto;
  */
}
.glid .article_title{
  width: var(--grid-size);
  height:50px;
  position: absolute;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  padding: 5px 10px 10px;
  background-color: rgba(255, 255, 255, 0.6);
  border-bottom-right-radius: var(--radius-size);
  border-bottom-left-radius: var(--radius-size);
}
.glid .article_cat{
  padding:2px;
  position: absolute;
  box-sizing: border-box;
  top: 5px;
  left: 5px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid;
  border-radius: var(--radius-size);
  font-size: 10px;
  color: #666;
}

/*
.glid a{
  display: block;
}*/

/*お知らせ*/
/*メイン下のフレーム外枠*/
.frame{
  height: auto;
  padding: 1em;
  margin: 0 auto;
  border-top: 1px solid var(--menu-separator_color);

}

#news{
  padding: 0;
  margin: 0 auto;
  /*枠線*/
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 10px 5px 5px #aaa;
}

#news h2{
  width:100%;
  margin: 0 auto;
  padding: 5px 10px;
  background-color: var(--back-color);
  color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#news dl{
  padding: 1em;
  width:100%;
}
#news div{
  display: flex;
}

#news div dt{
  margin: 5px;
}

#news div dd{
  margin: 5px;
}

#news a:hover{

}

/*3カラム表示*/
.frame_grid{
  min-height: 15vw;
  padding: 20px 10px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(1, minmax(180px, 1fr));
}
.frame_grid > div{
  padding: 20px 10px;
}

.frame_grid > div > div{
  padding: 20px 10px;
}

.frame_grid > div > h1{
  padding: 5px 20px;
  background-color: var(--back-color);
  color: #eee;
}

.frame_grid > div > form >label{
  font-weight: bold;
}

.widgettitle{
  padding: 15px 10px;
  font-weight: bold;
}
/*
.frame_grid > div > h2{
  padding: 15px 10px;
  font-weight: bold;
}
*/
.frame_grid > div > ul{
    padding-bottom: 15px;
}
.frame_grid > div > ul > li{
  padding-left: 15px;
  padding-bottom: 5px;
}
/* ブログウィジット専用 */
.widget > .widgettitle{
  padding: 0;
  font-weight: bold;
}
.widget > ul{
  padding-top: 15px;
  padding-bottom: 0px;
}
.widget > ul > li{
  padding: 0 0 15px 0;
  font-size: 14px;
}

/*SNSリンク*/
.sns{
  display: flex;
}
.sns img{
  margin: 0;
  padding: 0 5px 0 5px;
}
.tw-window{
  display: none;
}



/*フッター*/
footer {
  width: 100%;
  background-color: var(--back-color);

  color: #fff;
  text-align: center;
  /*padding: 30px 0;*/
  padding: 30px 0 ;
}

footer>p {
  color: #fff;
  text-shadow: 1px 2px 3px #eee;
 }


/**********/
/*投稿ページ*/
/**********/

 /*パンくずリスト*/
 #breadcrumb{
   padding: 0 5px 20px 5px;
 }

 #breadcrumb ul li{
   padding: 3px 0;
   font-weight: bolder;
 }
 #breadcrumb ul li::after{
   padding: 3px 5px;
   color: #777;
   content: ">";
 }
 #breadcrumb ul li:last-child::after{
    content: "";
}

/**********/
/* Wordpressエラー*/
/**********/
.frame_err{
  width: 96%;
  padding: 2em 1em;
  margin: 0 auto;
}

.err_message{
  font-size: 24px;
  font-weight: bold;
}


/*コンテンツページ*/
/*投稿ページ*/
/*記事タイトル*/
.content_title{
    padding: 15px;
    font-weight: bold;
    font-size: 36px;
}

/*記事*/
.content > p{
  padding: 10px;

}

/*画像*/
figure{
  text-align : center;
}
figure > img{
  margin: 0 auto;
}


/*レスポンシブ対応*/
/*ディスプレイサイズ*/
@media screen and (min-width:1190px) {
   header>div, nav>ul, main,  #news, .frame_grid, .frame_err{
     width: var(--display-size);
   }

   /*タイトル*/
   .site-title-link{
     font-size: 24px;
   }

   /*ヘッダーメニュー*/
   nav{
     width: 100%;
     background-color: var(--back-color);
   }

   nav > ul{
     margin: auto;
     /*
     justify-content: left;*/

     display:flex;
     background-color: var(--back-color);
     color: #fff;

   }

   nav ul li{
     border-left: 1px solid var(--menu-separator_color);
     border-right: 1px solid var(--menu-separator_color);
   }

   nav ul li+li{
     border-left: 0;
     border-right: 1px solid var(--menu-separator_color);
   }

   nav ul li a{
     display: block;
     padding: 7px 20px;
     color: #fff;
     text-shadow: 1px 2px 3px #eee;
     text-decoration: none;
   }
   nav ul li a:hover{
     background-color: #ddd;
     color: #333;
     text-shadow: 1px 2px 3px #666;
   }

   /*グリッド*/
   /*グリッド*/
 .glid{
   grid-template-columns: repeat(4, minmax(var(--grid-size),var(--grid-size)));
  }

 /*3カラム表示*/
 .frame_grid{
   grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

  /*3カラム枠の線*/
  .frame_grid > div+div{
    border-left: 1px solid #ccc;
    border-right: 0;

  }

  /*パンくずリスト*/
  #breadcrumb ul{
    display: flex;
  }

  /*表示/非表示*/
  .tw-window{
    display: block;
  }

  /*input非表示*/
  #menu-btn-check {
      display: none;
  }

}