@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*必要ならばここにコードを書く*/

:root {
	--outline-color: #ff0000;/* 輪郭線のデフォルトカラー */
}

/* ヘッダ文字、画像調節 */
body, .header, .appeal {
	background-position: top 62% center;
}
.header, .header .site-name-text,.appeal-content{
    text-shadow: 0px 0px 6px #000;
}

/* コメント欄のメールアドレスとサイトの削除*/
/*.comment-form-url , .comment-form-email { display:none; }*/

/* シェアアイコンサイズ設定 */
#main .sns-share a {
	width: 3.2em;
	height: 3.2em;
	margin-left: 0.5em;
	/*font-size: 2px;*/
}
.sns-share-buttons {
	justify-content: center;
}
#main .button-caption {
	display: none;
}
#main .social-icon {
	font-size: 2.3em;
}

.sns-follow-buttons a {
    width: 1.8em;
    height: 1.8em;
	margin-left: 0.45em;
    font-size: 1.8em;
}
.sns-follow-buttons {
    justify-content: center;
}

/* 見出し設定 */
.article h2 {
font-size: 1.8em;
letter-spacing: 0.0em;/*文字間*/
color: #fff;/*文字色*/
background: #49ADD1; /*背景色*/
padding: 0.5em 0.75em;/*文字周りの余白*/
border-radius: 0.3em;/*角の丸み*/
}
.article h2:before {margin-left: 0.5em;}

.article h3 {
 border: none; 
 padding: 0.7em;/*文字周りの余白*/
 color: #000;/*文字色*/
 background: #BADFEC;/*背景色*/
 border-left: solid 10px #49ADD1;/*左線（実線 太さ 色）*/
}

.article h4 {
  border: none;
  border-bottom: solid 2px #BADFEC;
  position: relative;
  border-left: solid 5px #49ADD1;/*左線（実線 太さ 色）*/
  padding-left: 0.5em;/*アイコン分のスペース*/
}

.article .outline-1px,.outline-1px-white,.outline-1px-black,.outline-1px-red,.outline-1px-green,.outline-1px-blue {
  text-shadow : 
    -1px -1px 0px var(--outline-color),
    0px -1px 0px var(--outline-color),
    1px -1px 0px var(--outline-color),
    -1px 0px 0px var(--outline-color),
    1px 0px 0px var(--outline-color),
    -1px 1px 0px var(--outline-color),
    0px 1px 0px var(--outline-color),
    1px 1px 0px var(--outline-color);
}
.article .outline-2px,.outline-2px-white,.outline-2px-black,.outline-2px-red,.outline-2px-green,.outline-2px-blue {
  text-shadow : 
    -2px -2px 0px var(--outline-color),
    -1px -2px 0px var(--outline-color),
    0px -2px 0px var(--outline-color),
    1px -2px 0px var(--outline-color),
    2px -2px 0px var(--outline-color),
    -2px -1px 0px var(--outline-color),
    -1px -1px 0px var(--outline-color),
    0px -1px 0px var(--outline-color),
    1px -1px 0px var(--outline-color),
    2px -1px 0px var(--outline-color),
    -2px 0px 0px var(--outline-color),
    -1px 0px 0px var(--outline-color),
    1px 0px 0px var(--outline-color),
    2px 0px 0px var(--outline-color),
    -2px 1px 0px var(--outline-color),
    -1px 1px 0px var(--outline-color),
    0px 1px 0px var(--outline-color),
    1px 1px 0px var(--outline-color),
    2px 1px 0px var(--outline-color),
    -2px 2px 0px var(--outline-color),
    -1px 2px 0px var(--outline-color),
    0px 2px 0px var(--outline-color),
    1px 2px 0px var(--outline-color),
    2px 2px 0px var(--outline-color);
}


.article .outline-1px-white {
	--outline-color: #ffffff;
}
.article .outline-1px-black {
	--outline-color: #000000;
}
.article .outline-1px-reg {
	--outline-color: #ff0000;
}
.article .outline-1px-green {
	--outline-color: #00ff00;
}
.article .outline-1px-blue {
	--outline-color: #0000ff;
}

.article .outline-2px-white {
	--outline-color: #ffffff;
}
.article .outline-2px-black {
	--outline-color: #000000;
}
.article .outline-2px-reg {
	--outline-color: #ff0000;
}
.article .outline-2px-green {
	--outline-color: #00ff00;
}
.article .outline-2px-blue {
	--outline-color: #0000ff;
}



/*ブログカートのカスタマイズ*/
.blogcard {
	padding: 1rem;
	color: #666;
	position: relative;
	border-color: #49ADD1 !important; /* 枠線の色を変更 */
}

/* ブログカードに「おすすめ記事」を表示する */
.internal-blogcard-label {
	position: absolute;
	top: -18px;
	left: 16px;
	font-size: 13px;
	padding: 3px .6em;
	background-color: #54b0dd;
	color: #fff;
	border-radius: 3px;
	letter-spacing: .7px;
	display: block;
}

.blogcard-label::after {
  	content: 'おすすめ記事';
}

.blogcard-label .fa::before {
 	content: "\f164";
}

/*
.bct-prev .blogcard-label::after {
  content: "前回の記事";
}
.bct-related .blogcard-label::after {
  content: "関連記事";
}
.bct-next .blogcard-label::after {
  content: "続きの記事";
}
.bct-detail .blogcard-label::after {
  content: "詳細はこちら";
}
*/

/************************************
** ■人気記事ランキング表示のカスタマイズ
************************************/
 /*順位数表示のカスタマイズ*/

/*タイトル縦中央*/
.popular-entry-card-title.widget-entry-card-title.card-title{
  height: 67px!important; /*メニュー縦幅設定*/
  display: flex;
  align-items: center; /*縦中央寄せ*/
}

/*モバイル表示のフォントサイズ*/
@media screen and (max-width: 480px){
  .popular-entry-card-title{
    font-size: 12px;
  }
}
/*ランキング間の隔幅調整*/
.popular-entry-card-link.a-wrap{
  padding-top: 2px;
  padding-bottom: 2px;
  margin-top: 2px;
  margin-bottom: 2px;
}
/*サムネイル画像加工*/
.attachment-thumb120.size-thumb120.wp-post-image{
  border-radius: 3px; /*角丸コーナー*/
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
}

/*カテゴリーカスタマイズ*/
.widget_categories ul li a { /*親カテゴリ用のコード*/
    color: #333;
    text-decoration: none;
    padding: 6px 0;
    display: block;
    padding-right: 4px;
    padding-left: 4px;
    border-top: 1px dotted #ccc; /*上部にボーダーを引く*/
    font-size: 14px;
}
.widget_categories ul li a::before { /*親カテゴリのアイコン*/
    font-family: FontAwesome;
    content: "\f0da";
    padding-right: 10px;
}
.widget_categories > ul > li > a:first-child { 
    border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}
.widget_categories > ul > li > a:last-child {
    border-bottom: 1px dotted #ccc; /*最後の親カテゴリは下部ボーダーを引く*/
}
.widget_categories ul li a .post-count { /*記事数用のコード*/
    display: block;
    float: right;
    background: #ededed;
    padding: 0 1em;
    font-size: 14px;
    margin-top: .2em;
    border-radius: 4px;
}
.widget_categories ul li a:hover { /*親子共通マウスホバー時*/
    background: none;
    transition: 0.5s;
    color: #72c7e6;
}
.widget_categories ul li a:hover .post-count { /*記事数のマウスホバー時*/
    background: #72c7e6;
    color: #fff;
    transition: 0.5s;
}
.widget_categories ul li ul { /*子カテゴリのボックス*/
    border-bottom: 1px dotted #ccc;
}
.widget_categories ul li ul li a { /*子カテゴリ用のコード*/
    color: #333;
    text-decoration: none;
    padding: 0 4px 4px 4px;
    display: block;
    border: none;
}
.widget_categories ul li ul li a::before { /*子カテゴリのアイコン*/
    font-family: FontAwesome;
    content: "・";
    padding: 0;
}

/* 記事一覧カスタマイズ */
.cat-label {
    top: 0;
    left: 10px;
    border: none;
    font-size: 12px;
    color: #fff;
    background-color: #49add1;
    padding: 1px 5px;
    margin: -6px 0 0 0;
    overflow: visible;
}
.cat-label::after { /*左上に小さな三角を作る*/
    position: absolute;
    content: '';
    top: 0;
    right: -6px;
    border: none;
    border-bottom: solid 6px #3089a9; /*小さな三角の色*/
    border-right: solid 6px transparent;
}

.entry-card-thumb {
    transition-duration: 0.3s; /*アニメーションの時間*/
    box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75); /*通常時の画像の影*/
}
.entry-card-thumb:hover {
    transform: translateY(-6px); /*マウスホバーで上に移動*/
    box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75); /*マウスホバー時の画像の影*/
}
.entry-card-thumb img { /*画像下の隙間を消す*/
    vertical-align: bottom;
}
.a-wrap:hover { /*マウスホバー時の全体の背景色を消す*/
    background: none;
}

.entry-card-title {
    margin-top: 10px; /*上に余白を付ける*/
    line-height: 1.5; /*行間を広く*/
}
.entry-card-title:hover {
    color: #49add1; /*マウスホバー時の色*/
}
@media screen and (max-width: 768px){
    .entry-card-title {
        font-size: 14px; /*スマホでの文字の大きさ*/
        line-height: 1.4; /*スマホでの行間*/
    }
}

/* 記事一覧の画像の角を丸める */
figure > img{
  border-radius: 5px;
}

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