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

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

/* フォント */
/*
@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: normal;
    src: local("Noto Sans CJK JP Regular"),
    url('https://kuropon.mobi/wp-includes/fonts/WebNotoRegular.woff2') format('woff2');
	font-display: swap;
}
.font-Noto Sans JP {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400,700;
}
@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: normal;
    src: url("https://kuropon.mobi/wp-includes/fonts/YakuHanJP-Regular.woff2") format("woff2");
	font-display: swap;
}
.font-YakuHanJP {
  font-family: "YakuHanJP", sans-serif;
  font-weight: 400,700;
}

body{
    font-family: "YakuHanJP","Noto Sans JP", sans-serif;
	font-weight: 400,700;
}
*/

/* リンク文字 */
a {
	font-weight: bold;
	text-decoration: none;
}

.entry-content p a {
	font-weight: bold;
	text-decoration: none;
}

.entry-content p a:hover {
	color: #1111cc;
	text-decoration: underline;
}

.toc-content p a:hover {
	color: #222222;
	text-decoration : underline;
}


/* 固定お知らせエリア（アフィ）*/
#notice-aff-area {
	color: #000;
	background-color: #c0c0c0;
	text-align: center:
	padding: 0.6em:
	font-size: 0.8em;
}

/* ページ幅 変更 */
.no-sidebar .wrap {
    width: 860px;
}

.breadcrumb.sbp-main-before, 
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before {
    padding-left: 30px;
    padding-right: 30px;
}


/* ページネーション */
.page-numbers {
  border-radius: 30px;
}
.pagination-next-link {
  border-radius: 30px;
}

/*固定ページ（トップページカスタマイズ）*/
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{ display: none; }
/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{ display: none; }
/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{ display: none; }
/*フロント固定ページの投稿日を非表示*/
/*.home.page .post-date{ display: none; }*/
/*フロント固定ページの更新日を非表示*/
.home.page .post-update{ display: none; }
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{ display: none; }

.new-entry-card-date {
  display: block;
}
/* アイキャッチ画像を全幅表示する */
/*枠組み*/
.eye-catch-wrap {
	margin-left: -29px; /*左の余白*/
	margin-right: -29px; /*右の余白*/
}

/* カテゴリーページ アイキャッチのラベル非表示 */
.category-content .cat-label {
	display: none;
}

/* アフィリンク用ボタン */
.button01 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em;
  width: 320px;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  background-color: #FFBF00;
  transition: 0.3s;
}

.button01 a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

.button01 a:hover {
  text-decoration: none;
  background-color: #FF9326;
}

/* Affiliate Button Config */
.button_wrapper {
	display: flex;
	text-align: center;
	justify-content: center
}

.button_amazon {
  color: #FFF !important;
  border-radius: 50em 50em 50em 50em;
  background: #ff9900;
  padding: .7em 2em;
  display: inline-block;
  text-decoration: none !important;
  margin: 15px 0;
}

.button_apple {
  color: #FFF !important;
  border-radius: 50em 50em 50em 50em;
  background: #55A8DC;
  padding: .7em 2em;
  display: inline-block;
  text-decoration: none !important;
  margin: 15px 0;
}

.button_docomo {
  color: #FFF !important;
  border-radius: 50em 50em 50em 50em;
  background: #b42e38;
  padding: .7em 2em;
  display: inline-block;
  text-decoration: none !important;
  margin: 15px 0;
}

.button_au {
  color: #FFF !important;
  border-radius: 50em 50em 50em 50em;
  background: #d36321;
  padding: .7em 2em;
  display: inline-block;
  text-decoration: none !important;
  margin: 15px 0;
}

.button_uq {
  color: #FFF !important;
  border-radius: 50em 50em 50em 50em;
  background: #4e8ed4;
  padding: .7em 2em;
  display: inline-block;
  text-decoration: none !important;
  margin: 15px 0;
}

.button_sb {
  color: #FFF !important;
  border-radius: 50em 50em 50em 50em;
  background: #a7a9ad;
  padding: .7em 2em;
  display: inline-block;
  text-decoration: none !important;
  margin: 15px 0;
}

.button_rm {
  color: #FFF !important;
  border-radius: 50em 50em 50em 50em;
  background: #e23c8c;
  padding: .7em 2em;
  display: inline-block;
  text-decoration: none !important;
  margin: 15px 0;
}

.button_gf {
  color: #FFF !important;
  border-radius: 50em 50em 50em 50em;
  background: #77aea6;
  padding: .7em 2em;
  display: inline-block;
  text-decoration: none !important;
  margin: 15px 0;
}

/* 固定ページ 日付非表示 */
.post-504 .date-tags,
.post-2504 .date-tags {
display: none;
}


/************************************
** エントリーカード
************************************/

.home main, .archive main{
    /* background-color: transparent; */
    margin-top: 0;
    padding-top: 0;
}

.entry-card-wrap{
    background-color: white;
    border-radius: 4px;
    margin-bottom: 1em!important;
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
}

.entry-card-wrap:hover{
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
    transform: translateY(-2px);
    background-color: white; 
    transition: all .3s ease;
}

/************************************
** 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-radius: 50%; /*丸み*/
}

/*プロフィールウィジェットのリンク*/
.sns-follow.sf-profile .sns-buttons a {
	border-radius: 50%; /*丸み*/
}

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

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

/*シェアボタンのキャプション*/
.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: -2px; /*右側からの距離*/
	bottom: -2px; /*下側からの距離*/
	padding: 2px; /*内側の余白*/
	font-size: 10px; /*文字の大きさ*/
	border: solid 1px; /*線*/
	border-radius: 3px; /*丸み*/
	background-color: inherit; /*背景色*/
}

/*シェア数の表示が必要ないシェア・フォローボタン*/
.sns-share.ss-top .sns-buttons a .share-count:empty,
.sns-share.ss-bottom .sns-buttons a .share-count:empty,
.sns-follow.sf-bottom .sns-buttons a .follow-count:empty,
.sns-follow.sf-widget .sns-buttons a .follow-count:empty {
	padding: 0; /*内側の余白*/
	border: 0; /*線*/
}

/************************************
** 見出し変更
************************************/
.article h2 {
  width: 100%;
  font-size: 20px !important;/*文字のサイズ*/
  position: relative;
  display: inline-block;
  padding: .3em 1em;
  border-top: solid 1px #323232;
  border-bottom: solid 1px #323232;
  color: #323232;
  margin-bottom: 15px;
  padding: 1em;
}
.article h2:before,
.article h2:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 1px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: #323232;
}
.article h2:before {
  left: 7px;/*左線*/
}
.article h2:after {
  right: 7px;/*右線*/
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	/* アイキャッチ画像を全幅表示する */
	/*枠組み*/
	.eye-catch-wrap {
		margin-left: -20px; /*左の余白*/
		margin-right: -20px; /*右の余白*/
	}
}

/*520px以下*/
@media screen and (max-width: 580px){
  /*必要ならばここにコードを書く*/
  /* ページ幅 変更 */
    .no-sidebar .wrap {
        width: auto;
    }
    .breadcrumb.sbp-main-before, 
    .breadcrumb.sbp-footer-before,
    .breadcrumb.pbp-main-before,
    .breadcrumb.pbp-footer-before {
        padding-left: 1em;
        padding-right: 1em;
    }
	/* CSSボタン */
.button01 a {
  width: 320px;
  color: #333;
  font-size: 14px;
  font-weight: 700;
}
}