@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
*/

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

/* GTranslate --------------------------------------------*/
@media screen and (min-width:1024px){
	.gt_switcher_wrapper {
		bottom: 10px!important;
		right: 90px!important;
	}
}

/* Top-nav -----------------------------------------------*/
.header-container,.header,.navi{
	background-color:transparent;
}
.recommended.rcs-center-label-title .card-content:hover .card-title,
.widget-entry-cards.large-thumb-on .a-wrap:hover .card-content{
	opacity:1!important;
}

.recommended.rcs-center-label-title .card-content:hover .card-title{
	padding:6px 2.4em;
}

.header, .header .site-name-text {
	color: #000;
}

/* アピールエリア---------------------------------------------- */
/*全体*/
.appeal-in {
	min-height: 700px;/*アピールエリア高さ*/
	min-width:100%;/*アピールエリア横幅*/
}

/*480px以下*/
@media screen and (max-width: 480px){
	.appeal-in {
		min-height: 600px!important;/*スマホでの高さ調整*/
	}
}

/*コンテンツエリア*/
.appeal-content {
	width:100%;/*幅を最大に*/
	padding:2em 1em;/*内側余白調整*/
	background-color:rgba(255, 255, 255, 0.5);/*コンテンツエリアの背景色*/
	backdrop-filter: blur(3px);/*ぼかし*/
}

/*タイトル*/
.appeal-title{
	padding-bottom:1.5em;/*タイトル下の余白*/
	font-weight:normal;/*文字の太さ*/
	font-size:1.1em;/*タイトル文字の大きさ*/
}

/*本文*/
.appeal-message {
	font-size: 1em;/*本文文字の大きさ*/
}
/*480px以下*/
@media screen and (max-width: 480px){
	.appeal-message {
		font-size: .8em;/*スマホ表示する文字の大きさ*/
	}
}

/*ボタン*/
.appeal-button{
	background-color:transparent!important;/*ボタンの背景色無効化*/
	font-weight:normal;/*文字の太さ*/
	color: #777; /*ボタン部分文字とアイコンの色*/
}

/*アイコンを追加*/
.appeal-button:before{
	display:block;
	font-family: "Font Awesome 5 Free";
	font-weight:bold;
	content: "\f103";/*アイコン指定*/
	font-size: 2em;/*アイコンの大きさ*/
	animation: move 1s infinite alternate ease-in-out;/*以下、アイコンを動かすアニメーション*/
}

@keyframes move{
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}

/*スムーズにスクロール*/
html { scroll-behavior: smooth;}


/*トップページカスタマイズ***************************************/
.toppage{
	padding:0 0 3em;
}

/*見出し*/
.article h2.title{
   font-family: "Noto Sans JP" ,sans-serif!important;
   font-weight: 100;
   background: none;
   border: none;
	margin:2rem 0;
	padding:0;
	text-align:center;
	font-size:2rem;
	letter-spacing:1px;
	line-height:1.8;
	background-color:transparent;
	color: #888;
}

.article h2.title:after{
	display:block;
	font-size:.8rem;
}

.concept:after{
	content:'コンセプト';
}
.recomended:after{
	content:'おすすめ記事';
}
.newpost:after{
	content:'新着記事';
}
.category:after{
	content:'カテゴリー別の記事';
}
.popular:after{
	content:'人気記事';
}

.instagram:after{
	content:'インスタグラム';
}


/***リンクボタン***/
.link-btn{
	display:block;/*ブロック要素にする*/
	margin:1em auto;/*外側余白*/
	padding: 0.7em 2.5em;/*内側余白*/
	text-align: center;/*中央寄せ*/
	text-decoration: none;/*文字装飾なし*/
	border:1px solid #ccc; /*枠線（太さ、種類、色）*/
	font-size:.9em;/*文字の大きさ*/
	color:#666;/*文字色*/
	width:250px;/*ボタンの幅*/
}

/***記事横並べ(flex)***/
.widget-entry-cards.large-thumb,.recomended-posts{
	display: flex; /* フレックスにする */
	flex-wrap: wrap;
	justify-content:center;
}

.recomended-posts .blogcard-wrap{
	width:33%;	
}
.recomended-posts .blogcard-wrap .blogcard{
	border:none;	
}
.recomended-posts .blogcard-wrap .blogcard-thumbnail{
	float:inherit;
	width:100%;
}
.recomended-posts .blogcard-wrap .blogcard-content{
	margin-left:0;
}
.recomended-posts .blogcard-wrap .blogcard-title{
	font-size:18px;
	font-weight:400;
}
.recomended-posts .blogcard-wrap .blogcard-footer{
	display:none;
}

/*新着、人気記事サムネイル（大）*/
.new-entry-cards.large-thumb a{
	width:calc(100% / 2);/*pcで横2列に並べる*/
}

.cate .new-entry-cards.large-thumb a,
.popular-entry-cards.large-thumb a{
	width:calc(100% / 3);/*pcで横3列に並べる*/
}

.post-2 .column-wrap..widget-entry-card-snippet{
	display:none;
}

/* Instagram */
.sb_instagram_header h3{
	border:none;
}

/*834px以下*/
@media screen and (max-width: 834px){
	.new-entry-cards.large-thumb a{
		width:100%;/*スマホで横１列に*/
	}
	.cate .new-entry-cards.large-thumb a,
	.popular-entry-cards.large-thumb a{
		width:calc(100% / 2);/*スマホで横２列*/	
	}
}




/**************************
 タブ切り替え
***************************/

/* 親要素で囲みタブの横並びのためflexを指定*/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:5px 0;
	justify-content:center;
}


/*タブ(label)のスタイル*/
.tab-label {
  border:1px solid #ccc;
  text-align: center;
  padding: .5em 1em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

/*タブの間に余白をあける*/
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}

/* タブのコンテンツ部分*/
.tab-content {
  width: 100%;
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}

/* アクティブなタブ、選択されていることが分かるようにチェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
  color:#fff;/*文字色*/
  background-color:#b5b5ae;/*タブの背景色*/
  border:1px solid #b5b5ae;/*タブの枠線　太さ　種類　色*/
}

/*吹き出し部分のスタイル*/
.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: calc(50% + 5px);
	margin-left: -15px;
	border: 10px solid transparent;
       border-top:10px solid #b5b5ae;/*タブの吹き出し部分*/
	width: 0;
	height: 0;
}

.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 20px 0 0 0;
  opacity: 1;
  transition: .5s opacity;
}

/* radioボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
  display: none;
}

.page .eye-catch{
	display:none;
}

/*選択されているタブのコンテンツのみを表示*/
#TAB-01:checked ~ #TAB-01_content,
#TAB-02:checked ~ #TAB-02_content,
#TAB-03:checked ~ #TAB-03_content {
  display: block;
}


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

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

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