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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
  display: none;
}

/*Youtube表示設定(前テーマから引継ぎ)*/
.youtube{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.youtube iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}


/*トップページ用見出し*/
h1.top {
  position: relative;
  padding: 0 65px;
  text-align: center;
  color: #333;
}

h1.top:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: #333;
}

h1.top span {
  position: relative;
  padding: 0 1em;
  background: #fff;
}

h2.top {
  font-size: 16px;
  font-size: 1.6rem;
  position: relative;
  padding: 1.5rem;
  text-align: center;
  background-color: #fff;
  color: #333;
}

h2.top span {
  font-size: 16px;
  font-size: 1.6rem;
  display: block;
}

h2.top:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #003477;
}

/*ブログカードカスタマイズ*/
.blogcard {
	padding: 1rem;
	color: #666;
	position: relative;
	padding-bottom: 50px;
	border-color: ; /* 枠線の色を変更 */
}

.blogcard-title{
	margin-top: 3px;
	font-size: 1.6rem;
    border-bottom: solid 3px #cce4ff;
    position: relative;
}

a.blogcard-wrap:hover{
	background-color: transparent!important;
	opacity: 0.8;
}

a.blogcard-wrap:hover img.blogcard-thumb-image{
	transform: scale(1.1);
	transition: .3s;
}

.blogcard-thumbnail {
	line-height: 0;
	margin-right: 1rem;
	overflow: hidden;
}

/* 縦並び */
.blogcard-thumbnail {
	float: none!important;
	width: auto;
}

.blogcard-content{
    margin-left: 0px;
	min-height: 150px;
}

/* 縦並び ここまで */

.blogcard-title{
	margin-bottom: .5rem;
}

.blogcard-snipet{
	font-size: 70%;
	line-height: 1.7;
	padding-right: 10%;
}

@media screen and (max-width: 480px){
	.blogcard-thumbnail{
		width: 40%;
	}
	.blogcard-snipet{
		display: none;
	}
}

.internal-blogcard-footer{
	display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}

.internal-blogcard::after{
	content: 'もっと詳しく \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #ffd242; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}



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



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

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

.blogcard-thumbnail {
    width: 100%;
}}

@media (min-width: 782px){
.wp-block-column.solution:not(:first-child) {
    margin-left: 0px!important;
	}}

/*楽楽の画像に枠線を付ける*/
.img-border {
    padding:32px;
    border:3px solid #BFBFBF; 
}


/*楽楽の画像にアイレーションを付ける*/
.img-padding {
    padding:32px;
}

.tab-switch:checked + .tab-label {
	color: #003477 !important;
}
.tab-label::after {
	background: #003477 !important;
}
.logo-image {
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo-image span,
.logo-image a,
.site-name-text {
	line-height: 1;
	height: 39px;
}

.category-information .list.ect-entry-card {
	position: relative;
	border-top: 1px solid rgba(0,0,0,0.1);
}
.category-information .entry-card-wrap {
	border-bottom: 1px solid rgba(0,0,0,0.1);
	margin-bottom: 0;
	padding: 15px 5px !important;
}
.category-information .entry-card-thumb {
	display: none !important;
}
.category-information .entry-card-content {
	margin-left: 0 !important;
}
.category-information .entry-card-title {
	color: #1967d2;
	font-weight: normal;
	text-decoration: underline;
}
.category-information a:hover .entry-card-title {
	color: #e53900;
}
.category-information .fa-clock-o {
	display: none;
}
.category-information .entry-date,
.category-information .post-date {
	margin: 0 !important;
	padding: 0 !important;
}
.category-information .entry-card-meta {
	left: 0;
	right: auto;
	text-align: left;
}