@charset "UTF-8";

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

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



/*HPトップ画面の画像は表示・投稿ページのTop画像は消す */
#post-3499 .eye-catch img {
   display: block;
}
.eye-catch img {
   display: none;
}


/*投稿ページの左上に出てしまったバグを消す */
.eye-catch-caption {
        display: none;
}


/*画面上部の“タグ”の装飾 */
.eye-catch .cat-label {
    position: relative;
    border: 2px solid #828282;
		color: #2e2e2e;
		background-color:#fff;
}


/*トップ画面の日時を消す */
#post-3499 .post-update {
	display: none;
}
#post-3499 .post-date {
	display: none;
}



/*******************************
* 固定ページ記事タイトル非表示
********************************/
.type-page h1,
.type-page 
.post-meta
 {text-align: center}

/*固定ページの日時を消す */
.type-page .post-date,
.type-page .post-update,
.type-page .post-author,
.type-page .amp-back {
	display:none;
}





/*SNSの大きさ(下部) */
.sns-share-buttons a .button-caption {
    font-size: 13px;
    margin-left: 10px;
}
.sns-share-buttons a {
    width: 32%;
    margin-bottom: 2px;
    font-size: 17px;
    display: inline-flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sns-follow-buttons a {
    font-size: 23px;
}
.sns-buttons a {
    display: block;
    background-color: #333;
    text-align: center;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    height: 30px;
}

/*SNSの大きさ(上部) */
.sns-share.ss-high-and-low-lc a {
    flex-direction: row;
    height: 27px;
}
.sns-buttons a {
	background-color: #505050;
}


/*投稿ページの上の幅（マージン）(上部) */
.date-tags {
    line-height: 0.8;
    text-align: right;
    margin-bottom: 3em;
}



/*リンク文字の下のアンダーラインを消す*/
a:-webkit-any-link {
        cursor: pointer;
    text-decoration: none;
}



/*グローバルナビゲーションの加飾*/
.navi-in > ul li {
    display: block;
    width: 130px;
    height: 60px;
    line-height: 60px;
    position: relative;
}
/*グローバルナビゲーションのフォント*/
.navi-in a {
    color: #333;
    text-decoration: none;
    display: block;
    font-size: 17px;
    transition: all 0.3s ease-in-out;
		letter-spacing: 0.1em;
	  font-family: "MS Seriff", "Times New Roman", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
}


/*グローバルナビゲーションの下のアンダーライン*/
.navi-in > ul  {
border-bottom:solid;
border-top:solid;	
border-color: #cacaca;
border-width:1px;
}



/*H２の加飾*/
.article h2 {
    
    padding: 25px;
    background-color: #f3f4f5;
    border-radius: 2px;
    border-left: 8px solid #777;
	}

/*H３の加飾*/
.article h3 {
    border-left: 5px solid #777;
    border-right: 0px solid #ccc;
    border-top: 0px solid #ccc;
    border-bottom: 2px solid #ccc;
    
    padding: 12px 20px;
}


/*H1,H2,H3のフォント*/
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
	       font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  /* 追加 */
transform: rotate(.03deg); font-weight: 500;
}


/*サイドバーのH3のフォント*/
.sidebar h3 {    
	display: block;
	font-size: 18px;
	color: #797878;
	letter-spacing: 0.2em;
	font-family: "MS Seriff", "Times New Roman", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
}



/*サイト内検索の加飾*/
.search-edit, input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select {
    border-radius: 4px;
    font-size: 15px;
    width: 100%;
}



/*横の1本棒のマージン*/
hr {
    color: #eee;
	margin-top: -0.6em !important;
}



/*******************************
* 【画像系】の変更
********************************/


/*「ギャラリー」の大きさ変更*/
.gallery-item {
    padding: 4px 5px 0px 5px !important;
	margin-bottom: -18px !important;
}






/*******************************
* もくじの変更
********************************/

.toc-title {
    background-color: #f3f4f5;
	color: #797878;
	font-weight: bold;
}



/*******************************
* 箇条書きのスペースの変更
********************************/
.article ul li, .article ol li {
    margin: 0.4em;
}





/*******************************
* 編集ページ【スタイル】の変更
********************************/


/*スタイル‐インライン‐緑→【青の太いアンダーライン】』の加飾*/

.green {
    color: #333;
    border-bottom: 7px solid #8facda;
	border-radius: 5px;
}






/*スタイル‐ボックス‐案内：グレー』の加飾*/
.secondary-box {
    color: #383d41;
    background-color: #e9edf5;
    border-color: #d6d8db;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/*スタイル‐ボックス‐白抜き‐　青　の加飾*/
.blank-box.bb-tab.bb-blue .bb-label {
    background-color: #03307b;
}
.blank-box.bb-blue {
    border-color: #03307b;
    background: #fbfbf9;
}


/*スタイル‐【案内】～濃い水色　*/

.primary-box, .sp-primary, .primary {
    color: #004085;
    background-color: #e7f0fe;
    border-color: #b8daff;
    padding: 15px;
    border-radius: 8px;
}

/*スタイル‐【案内】～薄い青　*/
.info-box, .sp-info, .info {
    color: #0c5460;
    background-color: #e5eff1;
    border-color: #bee5eb;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}




/*スタイル‐【付箋】青　→　青の囲み二重/インセット（内側に影）*/
.blank-box.sticky.st-blue {
padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: #fdfcf7;
    border: solid 8px #455191;
    box-shadow: inset 0px 0px 0px 4px #6f8f9e;
    border-radius: 17px;	
}




/*******************************
* スタイル/バッジ/の文字の大きさ変更
********************************/

.badge, .ref, .reffer, .sankou, .badge-red, .badge-pink, .badge-purple, .badge-blue, .badge-green, .badge-yellow, .badge-brown, .badge-grey {
    color: #fff;
    padding: 1px 5px 0;
    border-radius: 2px;
    font-size: 14px;
}



/*【バッジ】の変更*/
.badge-red {
    background-color: #d72e2e;
}

.badge-blue {
    background-color: #3698c6;
}

.badge-green {
    /* background-color: #57bb82; */
}

.badge-yellow {
    background-color: #ffc619;
}






/*******************************
* 囲みBlogカード【スタイル】の変更
********************************/

/*右下の曜日のフォントサイズ*/
.blogcard-footer {
    clear: both;
 	font-size: 13px;
	letter-spacing:0.06em;
    padding-top: 0.6%;
	color: #afadad;
}


/*******************************
* ブログカードの変更
********************************/

.blogcard {
    background-color: #f7fbfb;
}


#main .blogcard{
	border: solid 1px ;/*ブログカードの枠線を消す*/
	color:#5e5e5e;
}

#main .internal-blogcard-title {
	line-height: 1.8;
	font-size: 1em;
}

.blogcard-snipet {
	font-size: .65em;
}

.internal-blogcard::after {
	content: '続きを読む \f138\ ';/*続きを読むを入れる枠を挿入*/
	font-family: 'FontAwesome';/*続きを読むの右側にマークをつける*/
	position: absolute;
	color:#fff;
	margin-top:-1.3rem;/*関連記事の縦軸の調整*/
	padding: .2em .8em;/*関連記事の枠の大きさの調整*/
	right: 1.4rem;/*関連記事の横軸の調整*/
	bottom: 0.4rem;
	font-size: .8em;/*関連記事の文字の大きさの調整*/
	font-weight: bolder;/*関連記事の文字の太さの調整*/
	letter-spacing:0.1em;
	background-color: #2377b3;/*関連記事の背景色*/
	border: solid 1px #2377b3;/*関連記事の枠線*/
	border-radius: 4px;/*関連記事の枠の角を取る*/
}


/*スマホ以下で説明文を非表示*/
@media screen and (max-width: 480px){
.blogcard-snippet {
    display: none;
}
}

/*******************************
* Amazonの商品表示ボックスにぼやけた影を付ける
********************************/
.amazon-item-box{
     box-shadow: 1px 3px 3px 1px rgba(0, 0, 0, 0.1);
}


/*******************************
* Amazonの商品表示ボックス
********************************/









/*******************************
* 【小さいAmazonリンク用】（黄色の囲みボタン）…スタイル/囲みボタン/パープル（小）を変更
********************************/
.btn-wrap.btn-wrap-purple > a  {
   	background: linear-gradient(90deg,#febe58 0%,#febe58 100%);
	font-size: 12px;
   	font-weight: bold;
	letter-spacing: 0.05em;
	padding: 0px 6px 0px 4px;
	border: 0px solid transparent;
	border-radius: 14px;
}


/*******************************
* 【小さい《参考ページ》リンク用】（薄・青色の囲みボタン）…スタイル/囲みボタン/ピンク（小）を変更
********************************/
.btn-wrap.btn-wrap-pink > a   {
	font-size: 13px;
    background-color: #72acd6;
	font-weight: normal;
	letter-spacing: 0.05em;
	padding: 0px 8px 0px 4px;
	border: 0px solid transparent;
	border-radius: 13px;
}


/*******************************
* 【小さい《参考動画》リンク用】（薄・弁柄色の囲みボタン）…スタイル/囲みボタン/ピンク（中）を変更
********************************/
.btn-wrap.btn-wrap-pink.btn-wrap-m > a  {
	font-size: 13px;
    background-color: #eda49b;
	font-weight: normal;
	letter-spacing: 0.05em;
	padding: 0px 8px 0px 4px;
	border: 0px solid transparent;
	border-radius: 13px;
}


/*******************************
* 大きい【参考ページリンク用】スタイル/囲みボタン/〈インディゴ〉の変更
********************************/
.btn-wrap.btn-wrap-indigo > a  {
	background-color: #2377b3;	
	border-radius: 6px;
	margin: 5px 2px 10px;
}

/*アイコンボタンを追加*/
.btn-wrap.btn-wrap-indigo > a::after{ 
	content: "\f02d";
	font-size: 19px;
	margin: 0px 10px 0px 10px;
	font-family: FontAwesome;
    font-weight: normal;
}




/*******************************
* 大きい【動画リンク用】スタイル/囲みボタン/〈レッド〉の変更
********************************/
.btn-wrap.btn-wrap-red > a  {
	background-color: #e7460d;
	border-radius: 6px;
	margin: 5px 2px 10px;
}

/*アイコンボタンを追加*/
.btn-wrap.btn-wrap-red > a::after{ 
	content: "\f16a";
	font-size: 20px;
	margin: 0px 10px 0px 10px;
	font-family: FontAwesome;
    font-weight: normal;
}


/*******************************
* 大きい【Amazon/外部販売サイトリンク用】スタイル/囲みボタン/イエローのバック色を変更
********************************/
.btn-wrap.btn-wrap-yellow > a  {
	background-color: #f79901;	
	border-radius: 6px;
	margin: 5px 2px 10px;
}





/*******************************
* スタイル/囲みボタン/シアン色のマージンを変更
********************************/

.btn-cyan, .btn-wrap.btn-wrap-cyan > a {
    background-color: #00a3af;
    margin: 5px 2px 10px;
}




/*******************************
* トグルボタンの変更
********************************/

.toggle-button {
    display: block;
    cursor: pointer;
    padding: 5px 10px;
    background-color: #ddd;
    border: 2px solid #ccc;
    text-align: center;
    border-radius: 4px;
    position: relative;
    margin: 0;
	font-weight: bold;
	color: #9c9b9b;
}

.toggle-button::before {
    content: '\f067';
    font-family: FontAwesome;
    margin-right: 0.4em;
    font-size: 1em;
    color: #fff7cc;
}





/*******************************
* 引用文
********************************/

blockquote {
    background-color: #fafbfc;
    border: 1px solid #ccc;
    margin: 1em 0;
    padding: 10px 1.2em;
    position: relative;
    border-radius: 6px;
}





/***********************************************************************************
** サイドバー
************************************/


/*******************************
* もくじ/追従
********************************/


.sidebar-scroll {
    top: 20px;
}

.widget.widget-sidebar.widget-sidebar-scroll.widget_toc{
	margin: 50px 3px 5px 3px;
	padding-top: 0.3em;
    padding-bottom: 0.5em;
    border: 2px solid #edeeef;
  	border-radius: 4px;
	
}


.widget-sidebar-scroll-title.widget-title{
	margin: 20px 5px 0px 5px;
}









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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	
	
	
	
	
/**************
* 目次の行間の隙間
*********/
.toc li {
    margin: 7px;
}

		
}