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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.cstm-blk-fullwide-inner {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
}

#appeal {
  height: 20vw;
}


/*全てをまとめて非表示*/
.home.page .entry-title,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}

.myImage02 {
    overflow: hidden;
}

.myImage02 img {
    transition: transform .6s ease;
}

.myImage02:hover img {
    transform: scale(1.1);
}

#toc_container {
        margin: auto;
}

#toc_container {
        margin: 2.4em auto !important;
}

#toc_container {
    width: 100%;
}


#toc_container {
    width: 100%;
        margin: 2.4em 0;
}

.youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.youtube iframe {
	width: 100%;
	height: 100%;
	border-radius: 20px;
}

.video-container {
margin: 0px auto;
}

/*SNSの埋め込みを中央に揃えるコード*/ 
.instagram-container, 
.facebook-container,
.twitter-tweet,
.instagram-media {
    margin: 30px auto !important;
}

/***見出しH6カスタマイズ***/
.article h6 {
	padding: 0;
	border-bottom: 0;
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; 
	font-size:1.2rem;/*文字の大きさ*/
	color: #333;/*文字の色*/
	letter-spacing:1px;/*文字間の余白*/
	position: relative;
	border-bottom: 2px solid #ddd;
	padding: 10px 0;
	margin-bottom: 10px;
}

h6:before {
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 20%;
	height: 2px;
	content: '';
	background: #1B4282;
	}
/***トップページ プロフィール画像カスタマイズ***/
.home .wp-block-image{
	margin-top: 1.6px;
	margin-bottom: 1.6px;/*下の余白調節*/	
}

.home .has-text-align-center{
	margin-bottom: 4px;/*名前の下の余白を調節*/	
}
/***リンクボタンのカスタマイズ***/
/*リンクボタン*/
.link-btn{
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; 
	display:block;/*ブロック要素にする*/
	text-decoration: none;/*文字装飾なし*/
	 /*矢印と下線の基点とするためrelativeを指定*/
	position: relative;/*形状*/
        margin:1em auto;/*外側余白*/
        padding: 0em 20px;/*内側余白*/
        text-align: center;/*中央寄せ*/
        border:none /*枠線（太さ、種類、色）*/
        font-size:.9em;/*文字の大きさ*/
        color:#333;/*文字色*/
        width:150px;/*ボタンの幅*/
}

/*矢印と下線の形状*/
.link-btn::before{
	content: ''; /*絶対配置で下線の位置を決める*/
	position: absolute;
	bottom:-8px;
	left:15%;/*下線の形状*/    
	width: 85%;
	height: 1px;
	background:#333;/*アニメーションの指定*/
	transition: all .3s;
}

.link-btn::after{
	content: '';/*絶対配置で矢印の位置を決める*/
	position: absolute;
	bottom:-3px;
	right:0;/*矢印の形状*/    
	width: 15px;
	height:1px;
	background:#333;
	transform: rotate(35deg);/*アニメーションの指定*/
	transition: all .3s;
}

/*hoverした際の移動*/
.link-btn:hover::before{
    left:20%;
}

.link-btn:hover::after{
    right:-5%;
}

.link-btn:hover {
	color: #333;
}
/***人気記事ランキングのカスタマイズ***/
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before{ /*順位数表示のカスタマイズ*/
	 border-radius: 50%; /*丸にする*/
	 top: -4px;  /*丸の位置上に*/
	 left: -4px;  /*丸の位置左に*/
	 width: 14px;  /*丸のサイズを小さく*/
	 height: 14px;  /*丸のサイズを小さく*/
	 font-family: 'Lato', sans-serif;  /*数字をグーグルフォントに変更*/
	 font-size: 12px;  /*数字のフォントサイズを小さく*/
}

.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {/*1位の数字を上に*/
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {/*2位の数字を上に*/
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {/*3位の数字を上に*/
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-4 .card-thumb::before {/*4位の数字を上にし背景色変更*/
	background: #d0d0d1;
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-5 .card-thumb::before {/*5位の数字を上にし背景色変更*/
   background: #d0d0d1;
	line-height: 14px;
}

.home div.popular-entry-card-content.widget-entry-card-content.card-content{/*タイトル*/
   padding: 0.2em 0 0 0.8em !important;  /*タイトル周りの余白を調整*/
	letter-spacing: 0.8px;  /*字間を広げる*/
}

.home a.popular-entry-card-link.a-wrap{/*miniブログカード*/
	margin-bottom: 8px;  /*カード間の余白を広げる*/
}

.widget-entry-card-content {
	font-size: 12px;/*タイトルの文字サイズ*/
	line-height: 17px;
}
/***検索ボックスのカスタマイズ***/
input::placeholder{
	font-size: 0.75em;/*「サイト内を検索」の文字サイズ*/
	line-height:1.9;
}

.search-submit {
	font-size: 15px;/*「サイト内を検索」のアイコンサイズ*/
	line-height:1.6;
}

.search-edit,
.search-box input[type="text"] {
	border-radius: 3px; /* 少し角丸にする*/
	height:40px;
}
/****************************************
トップページ　タグクラウドのカスタマイズ
*****************************************/
.home .tagcloud a {
    background: none; /*背景を消す*/
　　border: none;/*枠線なし*/
    border-radius: 4px; /*角の丸み*/
　　background-color: #F9F9F9;
    color: #505050; /*文字色*/
    padding: 3px 14px 3px 6px; /*要素の内部余白*/
    text-decoration: none; /*文字の装飾なし*/
    font-size: 13px; /*文字サイズ*/
　　margin: 2px; /*要素の外部余白*/
　　flex: 1 1 auto; /*余白分の自動伸縮比率*/
　　justify-content: space-between;
}

.home .tag-cloud-link::before{
    content: "#"; /*アイコンの変更*/
　　font-family: "FontAwesome";
　　font-size: 12px; /*文字サイズ*/
　　padding-top: 2px;
    padding-right: 2px;
}

.home .tagcloud a:hover { /*マウスホバー時*/
    background: #333333;
　　color: #fff;
　　transition: 0.5s; /*アニメーションの時間*/
}


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

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

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

/***アンカーリンクスクロールカスタマイズ***/
html {
  scroll-behavior: smooth;
}

html {scroll-behavior: smooth;}

/***ユーチューブ幅いっぱい***/
.video-container {
	max-width: none;
}