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

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

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


/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/** note 風のワンカラム*/

@media screen  and (min-width: 834px){
  #content {
    width: 700px;
    background: #ffffff;
    margin:0 auto;
    min-height: 100vh;
  }
  .content-in {
    width: 700px;
  }
  body.no-sidebar {
    background: #ffffff;
  }
  /* ヘッダーをすっきりさせる */

  .no-sidebar .content {
    margin-top: 0;
  }
  .no-sidebar .main {
    padding: 0px 29px;
  }
  .no-sidebar .header-container {
    background: #ffffff !IMPORTANT;
    border: #e6e6e6 1px solid;
  }
  .no-sidebar .navi-in>ul li {
    width: 120px;
  }
  .no-sidebar .navi-in>ul li:hover {
    background: #eee;
  }
  .no-sidebar .navi-in .item-label {
    color: #000 !IMPORTANT;
  }
  .no-sidebar .footer-bottom {
    color: gray;
    background-color: #f9f9f9;
  }
  .no-sidebar .widget_search {
    position: relative;
    top: 0px;
  }
}



/************************************
** SNS ボタンをまとめてシンプルにする
************************************/

/*シェア・フォローボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons,
.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
	justify-content: center; /*中央に寄せる*/
	flex-wrap: wrap; /*折り返す*/
}

/*シェア・フォローボタンのリンク*/
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
	width: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border: none; /*線*/
}

/*フォローボタン（プロフィール）のリンク*/
.sns-follow.sf-profile .sns-buttons a {
	border: none; /*線*/
}

/*シェアボタンのアイコン*/
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 20px; /*アイコンの大きさ*/
}

/*フォローボタンのアイコン*/
.sns-follow.sf-bottom .sns-follow-buttons .follow-button,
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
	font-size: 25px; /*アイコンの大きさ*/
}

/*シェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*シェア・フォローボタンのシェア数*/
.sns-share.ss-top .sns-buttons a .share-count,
.sns-share.ss-bottom .sns-buttons a .share-count,
.sns-follow.sf-bottom .sns-buttons a .follow-count,
.sns-follow.sf-widget .sns-buttons a .follow-count {
	right: 0; /*右側からの距離*/
	bottom: -10px; /*下側からの距離*/
	left: 0; /*左側からの距離*/
	font-size: 10px; /*文字の大きさ*/
	color: #333; /*文字の色*/
}

/*シェア・フォローボタンの各アイコンをまとめて指定*/
[class*="sns-share"][class*="ss-"] [class*="-button"],
[class*="sns-follow"][class*="sf-"] [class*="-button"] {
	background-color: inherit; /*背景の色*/
}

/*ボタンカラーがモノクロ時のアイコンをまとめて指定*/
[class*="sns-"][class*="bc-monochrome"] [class*="icon-"]:before {
	color: #333; /*アイコンの色*/
}

/*SNSシェア誘導メッセージ非表示*/
.sns-share-message {
	display: none;
}


/* シェアボタンの各アイコン
-----------------------------------*/

/*Twitterアイコン*/
.icon-twitter:before {
	color: #1da1f2; /*アイコンの色*/
}

/*Facebookアイコン*/
.icon-facebook:before {
	color: #3b5998; /*アイコンの色*/
}

/*はてブアイコン*/
.icon-hatena:before {
	color: #2c6ebd; /*アイコンの色*/
}

/*Pocketアイコン*/
.icon-pocket:before {
	color: #ef4056; /*アイコンの色*/
}

/*LINEアイコン*/
.icon-line:before {
	color: #00c300; /*アイコンの色*/
}

/*Pinterestアイコン*/
.icon-pinterest:before {
	color: #bd081c; /*アイコンの色*/
}

/*LinkedInアイコン*/
.icon-linkedin:before {
	color: #0077b5; /*アイコンの色*/
}

/*コピーアイコン*/
.icon-copy:before {
	color: #333; /*アイコンの色*/
}

/*コメントアイコン*/
.icon-comment:before {
	color: #333; /*アイコンの色*/
}


/* フォローボタンの各アイコン
-----------------------------------*/

/*ウェブサイトアイコン*/
.sns-follow.sf-bottom .icon-home-logo:before,
.sns-follow.sf-widget .icon-home-logo:before {
	color: #002561;/*アイコンの色*/
}

/*Twitterアイコン*/
.sns-follow.sf-bottom .icon-twitter-logo:before,
.sns-follow.sf-widget .icon-twitter-logo:before {
	color: #1da1f2; /*アイコンの色*/
}

/*Facebookアイコン*/
.sns-follow.sf-bottom .icon-facebook-logo:before,
.sns-follow.sf-widget .icon-facebook-logo:before {
	color: #3b5998; /*アイコンの色*/
}

/*はてブアイコン*/
.sns-follow.sf-bottom .icon-hatebu-logo:before,
.sns-follow.sf-widget .icon-hatebu-logo:before {
	color: #2c6ebd; /*アイコンの色*/
}

/*Instagramアイコン*/
.sns-follow.sf-bottom .icon-instagram-logo:before,
.sns-follow.sf-widget .icon-instagram-logo:before {
	color: #405de6; /*アイコンの色*/
}

/*YouTubeアイコン*/
.sns-follow.sf-bottom .icon-youtube-logo:before,
.sns-follow.sf-widget .icon-youtube-logo:before {
	color: #cd201f; /*アイコンの色*/
}

/*LinkedInアイコン*/
.sns-follow.sf-bottom .icon-linkedin-logo:before,
.sns-follow.sf-widget .icon-linkedin-logo:before {
	color: #0077b5; /*アイコンの色*/
}

/*noteアイコン*/
.sns-follow.sf-bottom .icon-note-logo:before,
.sns-follow.sf-widget .icon-note-logo:before {
	color: #41c9b4; /*アイコンの色*/
}

/*SoundCloudアイコン*/
.sns-follow.sf-bottom .icon-soundcloud-logo:before,
.sns-follow.sf-widget .icon-soundcloud-logo:before {
	color: #ff8800; /*アイコンの色*/
}

/*Flickrアイコン*/
.sns-follow.sf-bottom .icon-flickr-logo:before,
.sns-follow.sf-widget .icon-flickr-logo:before {
	color: #111; /*アイコンの色*/
}

/*Pinterestアイコン*/
.sns-follow.sf-bottom .icon-pinterest-logo:before,
.sns-follow.sf-widget .icon-pinterest-logo:before {
	color: #bd081c; /*アイコンの色*/
}

/*LINEアイコン*/
.sns-follow.sf-bottom .icon-line-logo:before,
.sns-follow.sf-widget .icon-line-logo:before {
	color: #00c300; /*アイコンの色*/
}

/*Amazonアイコン*/
.sns-follow.sf-bottom .icon-amazon-logo:before,
.sns-follow.sf-widget .icon-amazon-logo:before {
	color: #ff9900; /*アイコンの色*/
}

/*ROOMアイコン*/
.sns-follow.sf-bottom .icon-rakuten-room-logo:before,
.sns-follow.sf-widget .icon-rakuten-room-logo:before {
	color: #c61e79; /*アイコンの色*/
}

/*Slackアイコン*/
.sns-follow.sf-bottom .icon-slack-logo:before,
.sns-follow.sf-widget .icon-slack-logo:before {
	color: #e01563; /*アイコンの色*/
}

/*GitHubアイコン*/
.sns-follow.sf-bottom .icon-github-logo:before,
.sns-follow.sf-widget .icon-github-logo:before {
	color: #4078c0; /*アイコンの色*/
}

/*CodePenアイコン*/
.sns-follow.sf-bottom .icon-codepen-logo:before,
.sns-follow.sf-widget .icon-codepen-logo:before {
	color: #333; /*アイコンの色*/
}

/*Feedlyアイコン*/
.sns-follow.sf-bottom .icon-feedly-logo:before,
.sns-follow.sf-widget .icon-feedly-logo:before {
	color: #2bb24c; /*アイコンの色*/
}

/*RSSアイコン*/
.sns-follow.sf-bottom .icon-rss-logo:before,
.sns-follow.sf-widget .icon-rss-logo:before {
	color: #f26522; /*アイコンの色*/
}

/** note風の目次 **/
#toc{
	padding: 16px;    
	width: 100%;
        margin: 36px 0;
        background-color: #f7f9f9;
        justify-content: center;
        margin: 0 auto;
	color: #787c7b;
	border: none;
        text-decoration: none!important;
	position:relative;
}
/*目次下の余白*/
#toc {
   margin-bottom: 5em;
}
.toc-title{
	font-weight: 700;
	text-align: start;
	padding:0;
	margin:0;
        margin-left: 24px;
}
.toc a{
	color: #787c7b;
}

.toc-checkbox:checked+.toc-title::before{
	font-family: FontAwesome;
        content: '\f0dd';
	transform: rotate(0deg);
	top: 14px
   　　 left: 18px;
}
.toc-title::before {
	display: inline-block;
	font-family: FontAwesome;
	transform: rotate(-90deg);
    　　content: '\f0dd';
	margin-right: 12px;
	position: absolute;
 	left: 20px;
    　　top: 13px;
}
.toc-title::after {
	content: '';	
}

.toc-checkbox:checked+.toc-title::after{
	content: '';
}
.toc-content {
	margin-left: 8px;
	transition: unset;
}
/*目次の下線*/
#toc.article ul li, .article ol li{
	border-top: 1px solid #e6e6e6;
}
#toc.article ul li, .article ol li:first-child{
	border-top:none;
}
/*関連記事*/
.pager-post-navi {
	border-top: 1px solid #f1f1f1;
	border-bottom: 1px solid #f1f1f1;
    　　flex-direction: row;
}
.pager-post-navi a {
	width:50%;
}
.under-entry-content{
	position:relative;
}
.pager-post-navi::after {
    position: absolute;
    top: 16px;
    left: 50%;
    display: block;
    width: 1px;
    height: 64px;
    content: "";
    background-color: #f2f2f2;
}
.article h2{
	background-color:#fff;
	padding:0;
}
/*カテゴリのアイコン*/
.fa-folder:before {
	content: "#"!important;
}
.fa-folder-open:before {
   content: "#"!important;
}
/*codeの見た目*/
.wp-block-code{
　　padding: 36px;
    margin-top: 36px;
    margin-bottom: 36px;
    font-family: note monospace,SFMono-Regular,Consolas,Menlo,Courier,monospace;
    line-height: 18px;
    color: #fff;
    white-space: pre-wrap;
    background-color: #282c34;
    font-size: 12px;
}
  /*引用時の「"」を非表示*/


blockquote{
	border: 1px solid #fff;
}
blockquote.wp-block-quote::before {
	content: ""!important;
}

blockquote.wp-block-quote::after {
	content: ""!important;
}

/*copy*/
.copyright{
    font-size: 12px;	
}

/*drop-shadow*/
.fixed-header {
    box-shadow: 0 1px 3px 0 rgb(239 239 239 / 25%);
}

/*blog card*/
.blogcard{
　　border: #e6e6e6 solid 1px;	
}
.blogcard-footer{
    display: grid;
}
.blogcard-date{
　　font-size: small;
    color: #787c7b;	
}
.blogcard-snippet {
    word-break: break-all;
    font-size: 12px;
    line-height: 1.5;
    color: #787c7b;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
/*834px以下*/
@media screen and (max-width: 834px){
  .no-sidebar .wrap {
    width: auto;
  }
  /*必要ならばここにコードを書く*/
#header-container, #header-container .navi, #navi .navi-in>.menu-header .sub-menu {
    background-color: #fff;
}
.header-container-in.hlt-top-menu .logo-header {
    max-height: none;
    text-align: start;
}
	
.pager-post-navi::after {
   　height: 32px;
}
}

/************************************
** アイキャッチ画像を記事タイトルの上に移動する
************************************/
/*記事ヘッダーの枠組み*/
.article-header {
	display: flex; /*フレックスボックスレイアウト*/
	flex-direction: column; /*ブロック要素を縦に並べる*/
}
/*アイキャッチの枠組み*/
.eye-catch-wrap {
	order: -1; /*順番*/
	overflow: hidden; /*はみ出した部分を非表示 ※IE対策*/
}
/*アイキャッチ*/
.eye-catch {
	margin-bottom: 0; /*下の余白*/
}


/** 目次フォントサイズを小さめに修正 **/
.toc {
	font-size: 0.85em;
}
/** エントリタイトル上下にマージン再設定 **/
.entry-title {
	margin: 3em 0 1em;
}
/** トップSNSシェアボタン下にマージン設定 **/
.ss-top {
	margin-bottom: 10px;
}

/*定義リスト*/
dl {
    padding: 1em 1em 1em 2.5em;
}
dt {
    display: list-item;
	list-style-type: none;
    font-weight: bold;
}
dt, dd {
    line-height: 1.6;
    padding: .4em 0;
}
div.indent {
	padding-left: 1em;
}
.kyocho {
	font-weight: bold;
	background-color:#ffd900;
}


/***** チェックを入れるとクリック可能になるボタン *****/
.div-ha-buy-button{
margin:0 auto;
text-align:center;
margin-bottom:30px;
margin-top:16px;
}

.ha-buy-button {
    display: block;
    font-size: 1.5em;
    padding: 4px 30px;
    margin: 0 auto;
    margin-top: 16px;
    margin-bottom: 16px;
    color: #fff;
    background: #f44336;
    border: 2px solid #a22f27;
    border-radius: 8px;
    cursor: pointer;
}

.ha-buy-button:hover {
    background: #a22f27;
}

.ha-buy-button:disabled {
    color: #fff;
    background: #eee;
    border: 2px solid #eee;
    pointer-events:none;
}

.ha-checkol {
    display: flex;
    justify-content: center;
    text-align: left;
}

.ha-check-button{
display:block;
text-align:center;
}

.ha-checkol ol {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px;
    font-size:0.8em;
    padding: 0px 36px;
}

.ha-mini-text{
font-size:0.8em;
}

input#ha-buy-check {
    transform: scale(1.8);
    margin-right: 1.2em;
}

/***** 固定ページの日付を非表示 *****/
.page .date-tags {
display: none;
}