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

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

/*内部リンクのラベル背景色を設定*/
.blogcard-label.internal-blogcard-label {
background-color: #3E9CF1; 
}

/*内部ブログカードの抜粋文を消す*/
.internal-blogcard-snippet{
	display: none;
}

/*内部ブログカードのファビコンとURLを消す*/
.internal-blogcard-footer{
	display: none
}

.blogcard{
	position: relative;
	border: 3px solid #3E9CF1 !important;
	padding-top:20px;
	padding-bottom:20px;
}

.internal-blogcard:after{
	position: absolute;
	bottom: 10px;
	right: 20px;
	font-family: 'Font Awesome 5 free';
	content: '記事を読む \f101';
	font-size: 70%;
	font-weight: bold;
	background-color: #3E9CF1;
	color: #FFF; 
	padding: 0.2em 2em;
	border-radius: 2px
}

/* ページID277のみ適用（スマホ 480px以下） */
@media screen and (max-width: 480px){

    .page-id-277 #main h1{
        margin: 1em 0 0;
        padding: 0;
        font-size: 0.8em;
    }

    .page-id-277 #main .widget-entry-cards .e-card { 
        margin: 0 5px;
    }

    .page-id-277 #main .large-thumb a { 
        width: 100%;
        padding: 0;
        margin: 0 0 15px;
    }

    .page-id-277 .mobile-2{
        justify-content: space-between;
    }

    .page-id-277 .mobile-2 a{ 
        width: 49% !important;
    }

    .page-id-277 .mobile-2 figure img { 
        object-fit: unset !important;
        height: auto !important;
    }

    .page-id-277 #main .large-thumb .new-entry-card-title{ 
        line-height: 1.3;
		font-size: 0.85em;
    }
	
	.page-id-277 #main .widget-entry-cards .card-content {
    padding:5px 5px;
	}
	
	.page-id-277 .custom-list figure {
    width: 40% !important;
  }

	.page-id-277 .custom-list .card-content {
    width: 60% !important;
	padding:5px 5px;
  }

    .page-id-277 #main .custom-list .new-entry-card-title{ 
        line-height: 1.3;
		font-size: 0.85em;
    }	
	
}


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

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

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