@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.archive-title :before,
.entry-categories span,
.entry-tags span,
.post-date,
.post-update,
.author-info  {
  display: none;
}

.custom-wrap {
  display: flex;
  flex-wrap: wrap;
}
.custom-card {
  margin-top: 1rem;
}
.custom-post {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.custom-post figure {
  width: 20%;
  height: 100px;
  max-width: 300px;
  min-width: 158px;
  margin-right: 10px;
}
.custom-post figure img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}
.custom-post h3 {
  width: 80%;
  min-width: 410px;
}

.custom-disco {
  width: 19%;
  margin: 0 1% 1% 0;
}

.custom-disco:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}




/*歌詞タブ*/
.acftab{
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  max-width: 1250px;
  padding: 0 !important;
}

.acftab li a{
  display: block;
  font-weight: 400;
  padding:10px 20px;
  color: #000;
  text-decoration: none;
}
.acftab li {
  list-style-type: none;
}

.acftab li.tabactive a{
  border-bottom: solid #000 4px;	
}

.tabarea_wrapper{	
  background: linear-gradient(to bottom, #bbb 0px, #ddd 10px);	
}
.tabarea_wrapper ul{	
  margin-bottom: 1em;
}

.tabarea{
  max-width:1250px;
  margin: auto;
}

.area {
  display: none;
  opacity: 0;
  padding: 10px 0;
}

.area.is-active {
    display: block;
    animation-name: displayAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.acftab_wrapper{
  width: 100%;
  margin: auto;
    background: #fefefe;
}

.area h3{
  font-size: 1.3rem;
  padding: 0.5em 20px 0.3em;
}

.area li{
  padding: 10px 0; 
  border-bottom: 1px solid #ddd;
}

@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*歌詞テーブル */

.acftab_table{
  margin: auto;
  overflow-x: scroll;
  padding: 2% 0;
}

.acftab_table th,td {
  padding: 0.7em;
  vertical-align: middle;
}

.acftab_table table {
    border-collapse:  collapse; /* セルの線を重ねる */
    width:  100%;
    margin: 0;
}
  

.acftab_table tbody tr :first-child {
  font-weight: 400;
}
  
.acftab_table tbody tr :last-child {
  border-right: none;
}

.acftab_table tbody td {
    text-align: left;  
}

.acftab_table tbody tr:nth-child(odd){
    background: #eee; 
}
  
.acftab_table td{
  padding: 1em 20px ;
}

@media screen and (min-width: 850px) {

  .tabarea_wrapper{
    padding: 0 2%;
  }
  
  .area h3{
    padding: 0.5em 0 0;
  }
}


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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  .custom-post {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .custom-post figure {
    width: 100%;
    min-width: 100%;
    height: 200px;
    margin: 0;
  }
  .custom-post figure img {
    width: 100%;
    height: 200px;
  }
  .custom-post h3 {
    width: 100%;
    min-width: 200px;
  }
  .custom-disco {
    width: 32%;
    margin: 0 1% 1% 0;
  }
}