@charset "UTF-8";

/*
Theme Name: astra-child
Theme URI: https://ban67.cloudfree.jp/
Description: WordPressテーマ「Opinion」の自作子テーマです。
Template: astra
Author: S.Banno
Author URI: https://ban58.ina-ka.com/
Version: 0.0.8
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*------------------BAN AREA-------------------*/
* {text-transform:none;}
body {background:url(logo/bg-dots.png) repeat fixed top;}
div.clear {clear:both;}
button {margin:2px;padding:10px;}
/*br {display:block;content:"";margin:15px 0;}*/

/*--Search BOX---*/
div.search_box {
  width:100%;
  margin-top:5px;
  margin-bottom:5px;
  padding:2px 2px 5px 2px;
  border-bottom:0px solid gray;
}
div.search_box span{
  font-size:0.9em;
}
div.search_box input#textbox{
  padding:2px;
  height:40px;
  background:rgba(250,250,250,0.8);
  width:100%;
  margin-bottom:5px;
  border:1px solid gray;
}
.input_submit{
  width:80px;
  height:36px;
  margin:2px;
  padding:2px;
}
div.to_previous {
  span {
    color: #0000ff
  }
}

/*------------------BAN AREA-2-----------------*/
/*--テーブル---*
.t_content {
  clear:both;
  width:100%;
}

/* sticky table */
.sticky_table {
  thead th {
    height: 30px;
    overflow: visible;
    contain: paint;
    /* 縦スクロール時に固定する */
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    /* tbody内のセルより手前に表示する */
    z-index:1 !important;
  }
  thead th:first-child {
    /* 行内の他のセルより手前に表示する */
    z-index:2 !important;
  }
  th,td:first-child {
    /* 横スクロール時に固定する */
    position:-webkit-sticky !important;
    position:sticky !important;
    left:0 !important;
  }
}

/* design */
.sticky_table {
  margin-top:10px;
  border-collapse: collapse;
  th, td {
    text-align: left;
    line-height: 1.2;
    padding: 2px 4px;
    font-size: 100%;
    font-weight: normal;
    min-width:30px;
  }
  thead {
    th {
      text-align: center;
      background: #424242;
      color: #E0E0E0;
    }
    select, option {
      text-align: center;
      padding: 2px 4px;
      font-weight: normal;
      font-size: .9em;
    }
  }
  tbody {
    td:first-child {
      background: #c2c2c2 !important;
      color: #303030 !important;
      min-width:50px;
    }
    td div {
      text-align: left;
      line-height: 1.2;
      font-size: .8em;
      padding: 0;
      margin: 5px 0;
    }
    tr {
      &:nth-child(even) {
        th { background: darken(#E4D8D4, 4%); }
        td { background: darken(#FAFAFA, 4%); }
      }
      &:nth-child(odd) {
        th { background: #E4D8D4; }
        td { background: #FAFAFA; }
      }
    }
  }
}
.sticky_table img{
  width:200px;
  max-width:100%;
  height:auto;
}
.support {
  width: calc(100vw - 3.0rem);
  margin: 0 auto;
  border-collapse: collapse;
  tr {
    background: #FFF9C4;
    &:nth-child(odd) {
      background: darken(#FFF9C4, 4%);
    }
    td {
      color: #616161;
      padding: .2rem .5rem;
    }
  }
}

/* レスポンシブ対応 */
@media screen and (max-width:767px) {/* Smartphone */
  .t_content {
    overflow-x: auto;
  }
  .sticky_table {
    min-width: 640px;
  }
  .sticky_table td {
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
  }
  .input_submit {
    z-index:2 !important;
  }
}

/*--画像---*
.a_content {
  clear:both;
  max-width:1200px;
  width:100%;
  height:auto;
  margin:0 auto;
  margin-bottom:10px;
  padding:0 !important;
  border:0px solid gray;
}
.row {
  clear:both;
  display:flex;
  flex-wrap:wrap;
}
.col {
  height:auto !important;
  border:0px solid red;
  img {
    padding:2px !important;
  }
}

/* レスポンシブ対応 */
@media screen and (min-width:1024px) {/* DesktopPC */
  .col {width:20%;}
}
@media screen and (min-width:768px) and (max-width:1023px) {/* Tablet */
  .col {width:50%;}
}
@media screen and (max-width:767px) {/* Smartphone */
  .col {width:100%;}
}

/* 横幅が768pxに満たない場合（for mobile）*/
@media screen and (max-width: 767px) {
}
/* 横幅が768px以上場合（for PC）*/
@media screen and (min-width: 768px){
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/*------------------BAN AREA-3-----------------*/
/* --- 坂野耿一画集 --- */
div.book_cover {
  max-width:600px;
  margin-bottom:10px;
  div {padding-left:120px;}
}
div.book_msg {
  margin-bottom:10px;
}
div.book_staff {
  padding-left:20px;
}
div.art_book {
  clear:both;
  width:100%;
  padding:0;
  margin:0;
  img {
    width: 100%;
    display:block;
    margin:0 auto;
  }
  ul {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    list-style: none;
    padding-left: 0;
  }
  li {
    width: 100%;
    padding: 0 2px;
    border:0px solid gray;
  }
  ul li div {
    text-align: center;
    line-height: 1.2;
    padding: 0;
  }
  ul li div.image-desc {
     margin-bottom: 15px;
  }
}
.row {clear:both;display:flex;flex-wrap:wrap;}
/* レスポンシブ対応 */
@media screen and (min-width:1024px) {/* DesktopPC */
  .col {width:20%;}
  div.art_book li {width:19%;}
}
@media screen and (min-width:768px) and (max-width:1023px) {/* Tablet */
  .col {width:50%;}
  div.container li {width:50%;}
}
@media screen and (max-width:767px) {/* Smartphone */
  .col {width:100%;}
  div.art_book li {width:100%;}
}
/*------------------BAN AREA-4-----------------*/
/* 坂野耿一の年譜 */
/* sticky table */
.k_nenpu {
  thead th {
    height: 30px;
    overflow: visible;
    contain: paint;
    /* 縦スクロール時に固定する */
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    /* tbody内のセルより手前に表示する */
    z-index:1 !important;
  }
  thead th:first-child {
    /* 行内の他のセルより手前に表示する */
    z-index:2 !important;
  }
  th,td:first-child {
    /* 横スクロール時に固定する */
    position:-webkit-sticky !important;
    position:sticky !important;
    left:0 !important;
  }
}

/* design */
.k_nenpu {
  margin-top:10px;
  border-collapse: collapse;
  th, td {
    text-align: left;
    line-height: 1.2;
    padding: 2px 4px;
    font-weight: normal;
    min-width:50px;
  }
  thead {
    th {
      text-align: center;
      background: #424242;
      color: #E0E0E0;
    }
  }
  tbody {
    td {
      font-size:.9em;
    }
    td div {
      text-align: center;
      line-height: 1.2;
      padding: 0;
      margin: 5px 0;
    }
    tr {
      &:nth-child(even) {
        th { background: darken(#E4D8D4, 4%); }
        td { background: darken(#FAFAFA, 4%); }
      }
      &:nth-child(odd) {
        th { background: #E4D8D4; }
        td { background: #FAFAFA; }
      }
    }
  }
}
div.k_note {
	text-align:left;
	margin:40px 0 40px 20px;
	ul {
		margin:10px;
		padding:0px 10px 0px 30px;
	}
	li {
		padding-bottom:5px;
	}
}

.color00 { background-color: #fff5ee;}
.color01 { background-color: #f8f8ff;}
.color02 { background-color: #f0ffff;}
.color03 { background-color: #fffafa;}
.color04 { background-color: #fffaf0;}
.color05 { background-color: #f5fffa;}
.color06 { background-color: #fffff0;}
.color07 { background-color: #eeffee;}
.color08 { background-color: #fff8dc;}
.color09 { background-color: #f0f0ff;}
.color10 { background-color: #ffffd2;}
.color11 { background-color: #dbffdd;}
.color12 { background-color: #d8e7f9;}
.color13 { background-color: #fdebe3;}