@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.8
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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

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


/*目次をトップページのみ表示させない*/
.home.page .toc {
 display: none;
}

/*見出しの設定*/
.article h2 {
    padding: 0;
    background: none;
}
.article h3 {
    border: none;
    padding: 0;
}
.article h4 {
    border: none;
    padding: 0;
}
.article h5 {
    border: none;
    padding: 0;
}
.article h6 {
    border: none;
    padding: 0;
}

/*　見出しH2~H6の変更　*/
.article h2 {
font-size: 24px; /*文字の大きさを変更（24px）*/
color: #333; /*文字の色を変更*/
padding: .8em 1em;
margin-top: 80px;
background: #ffffe0; /*内側の色を変更*/
border-top: 4px solid #ff7f50; /*線の色を変更*/
border-bottom: 4px solid #ff7f50; /*線の色を変更*/
}
.article h3 {
font-size: 22px; /*文字の大きさを変更（22px）*/
color: #333; /*文字の色を変更*/
padding: .5em 0;
margin-top: 40px;
border-top: 3px solid #ff7f50; /*線の色を変更*/
border-bottom: 3px solid #ff7f50; /*線の色を変更*/
}
.article h4 {
font-size: 21px; /*文字の大きさを変更（21px）*/
color: #333; /*文字の色を変更*/
padding: .2em 1em;
margin-top: 40px;
border-left: 6px solid #ff7f50; /*線の色を変更*/
}
.article h5 {
font-size: 20px; /*文字の大きさを変更（20px）*/
color: #333; /*文字の色を変更*/
margin-top: 40px;
border-bottom: solid 2px #ff7f50; /*線の色を変更*/
}
.article h6 {
font-size: 19px; /*文字の大きさを変更（19px）*/
color: #333; /*文字の色を変更*/
margin-top: 40px;
border-bottom: solid 1px #ff7f50; /*線の色を変更*/
}

/* サイドバー見出し装飾 */
  h3.widget-sidebar-title {
	font-size: 18px;
    color: #333333;                      /* 文字色 */
    background: #ffffe0;                 /* 背景色 */
    padding: 0.25em 0em;                 /* [上下][左右]の余白 */
    border-top: solid 2px #ff7f50;       /* 上枠 */
    border-right: none;                  /* 右枠 */
    border-bottom: solid 2px #ff7f50;    /* 下枠 */
    border-left: none;                   /* 左枠 */
  }
.sidebar .widget li a {					/* スキンで採用されているサイドバー内の文字の大きさ変更 */
    border-bottom: 1px solid #ddd;
    font-size: 16px;
}
.sidebar h3:before {					 /* スキンで採用されているサイドバータイトルのアンダーバー非表示 */
	content: '';
	position: absolute;
	bottom:6px;
	border-bottom: none;
}


/*固定ページのタイトルを非表示*/
/*フロントページのみ非表示にする場合は「.page」の前に「.home」を追加する*/
.page .entry-title{
  display: none;
}

/*固定ページのシェアボタンを非表示*/
.page .sns-share{
  display: none;
}

/*固定ページのフォローボタンを非表示*/
.page .sns-follow{
  display: none;
}

/*固定ページの投稿日を非表示*/
.page .post-date{
  display: none;
}

/*固定ページの更新日を非表示*/
.page .post-update{
  display: none;
}

/*固定ページの投稿者名を非表示*/
.page .author-info{
  display: none;
}

/*投稿ページのタイトルを非表示*/
.post .entry-title{
  display: none;
}

/*投稿ページのシェアボタンを非表示*/
.post .sns-share{
  display: none;
}

/*投稿ページのフォローボタンを非表示*/
.post .sns-follow{
  display: none;
}

/*投稿ページの投稿日を非表示*/
.post .post-date{
  display: none;
}

/*投稿ページの更新日を非表示*/
.post .post-update{
  display: none;
}

/*投稿ページの投稿者名を非表示*/
.post .author-info{
  display: none;
}

/*フッターの右・真ん中・左の表示をスマホでも表示させる*/
@media screen and (max-width: 768px) {
	.footer-widgets {
		display: block;
	}
}

/************************************
** トップページタブ切り替え
************************************/
.tabs {
  width: 100%;
  margin: 0 auto;
}
.tabs .tab {
  font-size: 0.8em;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  border-right: 1px solid #fefefe;
  border-left: 1px solid #fefefe;
  box-shadow: 0 0 10px rgba(30, 30, 30, .1);
  height: 48px;
  line-height: 48px;
  text-align: center;
  display: block;
  float: left;
  transition: all 0.2s ease;
}
.tabs .tab:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-right: 1px solid #efefef;
  border-left: none;
}
.tabs .tab:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: 1px solid #efefef;
  border-right: none;
}
.tab-content {
  display: none;
  clear: both;
  overflow: hidden;
  padding-top: 1em;
}
.tabs .hover:hover {
  opacity: 0.75;
}
@media screen and (max-width: 480px) {
  .tabs .hover:hover {
    opacity: 1;
  }
}
.tabs input[type=radio] {
  display: none;
}
.more-btn {
  text-align: center;
}
/************************************
** ①新着人気タブ切り替え
************************************/
.new-popular-tab {
  background: #fff;
  width: calc(100%/2);
  color: #aaa;
}
#new:checked ~ #new-content, #popular:checked ~ #popular-content {
  display: block;
}
/*選択されているタブ*/
.tabs input:checked + .new-popular-tab {
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  color: #fff;
}
/************************************
** ②カテゴリタブ切り替え
************************************/
.cat-tab {
  background: #fff;
  width: calc(100%/3);
  color: #aaa;
}
#cat1:checked ~ #cat1-content, #cat2:checked ~ #cat2-content, #cat3:checked ~ #cat3-content {
  display: block;
}
/*選択されているタブ*/
.tabs input:checked + .cat-tab {
  background: linear-gradient(90deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%);
  color: #fff;
}
/************************************
** ③オリジナルタブ切り替え
************************************/
.original-tab {
  background: #fff;
  width: calc(100%/2);
  color: #aaa;
  margin:5px 0;
}
#new-o:checked ~ #new-o-content, #popular-o:checked ~ #popular-o-content, #cat1-o:checked ~ #cat1-o-content, #cat2-o:checked ~ #cat2-o-content {
  display: block;
}
/*選択されているタブ*/
.tabs input:checked + .original-tab {
  background: linear-gradient(90deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%);
  color: #fff;
}
/************************************
** アニメーション設定
************************************/
.tab-content{
  animation-name:fade-in;
  animation-duration:0.5s; 
  animation-timing-function: ease-out;
  animation-delay:0s;
}
@keyframes fade-in {
  0% {opacity: 0; transform: translate3d(0,20px,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}

/*新着図書紹介用枠線*/
.box30 {
    margin: 2em 0;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
    font-size: 1.2em;
    background: #FFC107;
    padding: 4px;
    text-align: center;
    color: white;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box30 p {
    padding: 15px 20px;
    margin: 0;
}

/*---サイドウィジットへのtwetter埋め込み修正*/

@media screen and (max-width: 768px) and (min-width: 480px) {
iframe .twitter-timeline{
width: 490px !important;
}
}

@media screen and (max-width: 480px) {
iframe.twitter-timeline {
width: 450px !important;
margin:0 auto;/*これを入れないとめっちゃ細く200pxくらいで表示されます。以下イメージあり！*/
}
}

.timeline-Widget {
max-width: 300px!important;
width:200px !important; }
/*サイドウィジットへのtwetter埋め込み修正終わり*/

/*テーブルをレスポンシブ化する */ 
/*表を挿入した時にスマホでは縦で表示されるようにする設定 */ 
/*そのままの表だとスマホでは見ずらいので*/ 
.agn-left {
  text-align: left;/*thはセンター揃えなので左揃えにしたいthセルに適用*/
}
.pc-tablehead th{
  white-space: nowrap;/*セル内で改行しない*/
}
/*スマホ表示用*/
  @media screen and (max-width: 480px) {
    .pc-tablehead{
      display: none;/*【1】PCで1行目に表示されているタイトルを非表示に*/
    }
    .vertical-table th{
      border-bottom: none;/*【2】上下の枠線が二重になるのを防止*/
      display: block;/*【3】PCの一列目を縦積みにする*/
      width: 100%;
    }
    .vertical-table td {
      border-bottom: none;/*【2】上下の枠線が二重になるのを防止*/
      display: block;/*【3】PCの2列目以降も縦積みにする*/
      width: 100%;
    }
      .last td:last-child {
        border-bottom: solid 1px #8a9992;/*【4】表の一番下になるセルだけ下線を引く*/
     }
    .vertical-table td:before {
      content: attr(aria-label);/*【5】aria-labelで指定した値を表示させる*/
      display: inline-block;
      font-weight: bold;
      float: left;
      text-align: left;
      padding-right: 1em;
      white-space: nowrap;
    }
    .label br {
      display: none;/*【6】PCでセル内改行した箇所を改行させない*/
    }
/*スマホ表示用ここまで*/
}
/*テーブルをレスポンシブ化するここまで */