@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
** トップページカスタマイズ
************************************/
/*カードタイプデフォルトの画像*/
.home #main .widget-entry-cards figure {
	max-width: 280px;
	width: 100%;
}
@media screen and (max-width: 480px) {
	.home #main .widget-entry-cards figure {
		width: 130px;
	}
}
/*カードタイプデフォルトのタイトル*/
.home #main .new-entry-card-title, .home #main .popular-entry-card-title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.7;
	color: #555;
}
/*カードタイプlarge-thumb、large-thumb-onを横並びに*/
.home #main .large-thumb, .home #main .large-thumb-on {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
/*カードタイプlarge-thumb、large-thumb-onの横幅を50%に*/
.home #main .large-thumb a, .home #main .large-thumb-on a {
	width: 50%;
}
.home #main .large-thumb a:nth-child(even), .home #main .large-thumb-on a:nth-child(even) {
	margin: 0;
}
.home #main .large-thumb .new-entry-cards {
	margin: 0;
}
/*カードタイプlarge-thumb、large-thumb-onの画像*/
.home #main .widget-entry-cards.not-default figure {
	width: 100%;
}
.home #main .large-thumb figure, .home #main .large-thumb-on figure {
	width:100%;
	max-width:100%;
}
/*カードタイプlarge-thumbのタイトル*/
.home #main .large-thumb .new-entry-card-title {
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.7;
	color: #555;
}
/*480px以下(スマホ用)*/
@media screen and (max-width: 480px) {
	.home #main .large-thumb, .home #main .large-thumb-on {
		-webkit-box-orient: column;
		-webkit-box-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		margin: 0;
	}
	.home #main .large-thumb a, .home #main .large-thumb-on a {
		width: 100%;
	}
	.home #main .new-entry-card-title, .home #main .popular-entry-card-title {
		font-size: 0.9em;
	}
	.e-card-title {
		font-size: 0.8em;
		line-height: 1.7;
	}
}

/************************************
** トップページタブ切り替え
************************************/
.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-image: linear-gradient(120deg, #f6d365 0%, #fda085 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: #285294;
  color: #fff;
}

.btn {
  opacity: 0.75;
}
.article h2 {
  background: #285294;
  font-size: 1em;
  padding: 18px;
  background-color: #f3f4f5;
  border-radius: 3px;
  letter-spacing: 2px;
  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);}
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
}