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

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

/*-----アピールエリアボタン-----*/
.appeal-content .appeal-button {
	border-radius:50px;
}

/*-----余白調整-----*/
.content {margin-top:0;}
.notice-area {padding:0.1em}


/*-----中央寄せ-----*/
.l-centered-container {
	text-align: center;
}

/*-----エントリーカードタイトル文字-----*/
.related-entry-card-title, .entry-card-title {
    font-size: 16px;
    font-weight: 500;
}

/*-----固定ページ日付・著者名タグ非表示-----*/
.page-date-author{display:none;}

/*-----ヘッダー背景・フッター背景画像-----*/
.header-container{
    background-image: url(https://www.akaeho.net/wp-content/uploads/2019/04/mokume-kabegami.jpg);
}

.navi{
    background-image: url(https://www.akaeho.net/wp-content/uploads/2019/04/mokume-kabegami.jpg);
}

.mobile-menu-buttons {
    background-image: url(https://www.akaeho.net/wp-content/uploads/2019/04/mokume-kabegami.jpg);
}

#footer {
    background-image: url(https://www.akaeho.net/wp-content/uploads/2019/04/mokume-kabegami.jpg);
}

/*-----投稿日・更新日表示位置変更-----*/
.article-header{
display:flex;
flex-flow: column;
}

.date-tags {
    text-align: right;
    margin-top: 1em;
    margin-bottom: .5em;
}


/*-----リンクホバー色変更-----*/
a:hover {color: #CCCCCC;}
#footer a:hover{color: #f25f70;}

/*-----グローバルナビ-----*/
#navi .navi-in a:hover {
background-color: #b3a19f7a;
transition: all 0.5s ease;
color: #333;
}

#navi .navi-in > ul .sub-menu {
background-color:#b3a19ffa;
}

/*-----ページネーション装飾-----*/
.pagination-next-link{
	background-color:white;
	border:1.5px solid #9dcde3;
	color:#63a6f7;
	font-size:1em;
	padding:4px 0;
	margin:1.5em 0 0;
	border-radius:50px;
}

.pagination-next-link:hover{
	background-color:#c1e0f5;
	border:1.5px solid #9dcde3;
	color:white;
	font-weight:bold;
}

.pagination .current {
	background-color: #9dcde3;
	color:white;
	font-weight:bold;
}

.page-numbers{
	height:40px;
	width:40px;
	line-height:40px;
	border:1px solid #9dcde3;
	border-radius:50px;
	color:#63a6f7;
}

/*-----固定ページ日付・著者名タグ非表示-----*/
.page .date-tags{display:none;}
.page .author-info{display:none;}

/*-----SNSボタンの個人設定-----*/
	
/*固定ページでSNSシェアボタン非表示*/
.page .sns-share, .sns-follow{display:none;}

/*-----見出し装飾-----*/

.article h1 {
  font-weight: bold;
  text-align:center;
  margin-left: 5px;
  margin-right: 5px;
}

.article h2 {
	font-size: 22px;
	background-color: #ebf5fc;
	color:#7e6962;
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-size: 3rem 3rem;
	border-radius: 20px;
	line-height: 2em;
}

.article h3 {
  color:#715a52;
  font-size:20px;
  border:0;
  position: relative;
  padding: 1.5rem 1rem;
}
.article h3:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #a1cbed, #a1cbed 2px, transparent 3px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #ffdfd1, #a1cbed 2px, transparent 3px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.article h4 {
	color:#715a52;
	font-size:18px;
	border-top:0;
	border-bottom:2px solid #a1cbed;
}

/*-----飾り枠-----*/
.stripe-frame{
	background-image: linear-gradient( -45deg, #fff 25%, #eeeeee 25%,#eeeeee 50%, #fff 50%, #fff 75%, #eeeeee 75%, #eeeeee );
	background-size: 5px 5px;
	font-size: 90%;
	color: #7e6962;
	padding: 10px;
	text-align:center;
}

/*-----サイドバーのタイトル装飾-----*/
.sidebar h3 {
	text-align:center;
	background-color:white;
	font-size:18px;
	font-weight: 500;
    padding: 0;
	border-bottom:1.5px dashed #D7BFAF;
}

/*-----著者情報-----*/
.author-box {
	border:none;
}
.author-content {
    font-size: 14px;
}

/*-----ウィジェットの記事タイトルフォントサイズ-----*/
.widget-entry-card {
    font-size: 14px;
}


/*モバイル画面で見出し文字サイズ縮小*/
@media screen and (max-width: 480px){
.article h1{font-size:18px;}
.article h2{font-size:18px;}
.article h3{font-size:18px;}
.article h4{font-size:18px;}
}

/*-----モバイル画面で記事一覧タイトル太字解除-----*/
@media screen and (max-width: 480px){
.entry-card-title, .related-entry-card-title {
	font-weight: 500;
}
}

/*-----日付位置調整-----*/
.date-tags {margin-right: 1em;}
@media screen and (max-width: 480px){.date-tags {margin-right: .5em;}}
	
/*-----目次のカスタマイズ-----*/
.toc{
	width:100%;
	border:none;
	margin-top: 2em;
	margin-left: auto;
	margin-right: auto;
	padding:.5em;
	font-size: 0.85em;
}

.toc-title{
	border-bottom:1.5px dashed #D7BFAF;
	margin-bottom:1em;
	line-height:2em;
}

.toc a:hover{color: #66c7ff;}
.toc li .current {/*現在位置*/
color: #333;/*文字色*/

background-color: #e4f1f5;/*背景色*/
}

/*-----目次文字サイズ-------*/
.nwa .toc {
	font-size: 16px;align-content}


/*-----戻るボタン角丸-----*/
.go-to-top .go-to-top-button {
    border-radius: 50px;
}

/*-----ボタンのカスタマイズ-----*/

/*角を丸く・余白を狭く*/
.btn{
	border-radius:50px;
	margin:.75em;
}

/*-----タブのカスタマイズ-----*/
.blank-box.bb-tab.bb-red::before {
    background-color: #f57a78;
}
.blank-box.bb-red {
    border-color: #f57a78;
}

.blank-box.bb-yellow {
    border-color: #ffc25e;
}
.blank-box.bb-tab.bb-yellow::before {
    background-color: #ffc25e;
}

/*-----カテゴリーラベル非表示-----*/
.cat-label {
    display: none;
}

.related-entry-card .cat-label {
    display: none;
}

/*-----カテゴリー・タグリンク-----*/
.cat-link, .tag-link{
	border-radius: 50px;
	padding: 4px 10px;
	margin-bottom:5px;
}

/*-----カテゴリ―・ブログカード背景色-----*/
.cat-link {background-color: #7e6962;}
.blogcard-label {background-color: #7e6962;}

/*引用枠の装飾*/
blockquote{
	background-color:#fffaed;
	border-radius:5px;
	padding:1.75em 1em;
	margin:2.5em 0.5em;
	font-size:90%;}

/*-----画像のキャプションの装飾-----*/
.wp-caption{
	background:none;
	border:none;
}

.wp-block-image .aligncenter>figcaption, .wp-block-image .alignleft>figcaption, .wp-block-image .alignright>figcaption, .wp-block-image.is-resized>figcaption{
	margin-top:0;
	font-size:70%;
text-align:center;}

/*-----絵本用画像影-----*/
.ehon-shadow{filter:drop-shadow(4px 4px 6px gray);}

/*-----表の枠線・背景-----*/
.wp-block-table td, .wp-block-table th{
	border:none;
	background-color:white;
}

/*-----関連記事下余白-----*/
.related-entry-card-content {padding-bottom: 0;}


/*-----アンダーライン・マーカー色変更-----*/
.red-under {
    border-bottom: 2px solid #ff000078;
}
.marker-under-red {
    background: linear-gradient(transparent 60%,#ffcdb6b5 60%);
}


/*-----モバイルフッター-トップボタン位置調整-----*/
@media screen and (max-width: 834px){
.go-to-top .go-to-top-button {margin-bottom: 2em;}
}
	


/*-----フェードイン-----*/
#main{
    animation: fadeIn 1.5s ease-out 0s 1 normal;
}
#sidebar {
    animation: fadeIn 1.5s ease-out 0s 1 normal;
}

@keyframes fadeIn {
    from {transform: translateY(0.2%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}
#header-container {
    animation: Down 1.5s ease-out 0s 1 normal;
}

@keyframes Down {
    from {transform: translateY(-0.2%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}

#breadcrumb {
    animation: Right 1.5s ease-out 0s 1 normal;
}

@keyframes Right {
    from {transform: translateX(0.2%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}



/*-----オリジナルボタン・装飾-----*/
.folder-button {
    color: #f57a78;
    font-size: 14px;
    border: solid 1.25px #f57a78;
    border-radius: 25px;
    padding: .25em 1em;
    display: inline-block;
    margin: .25em 0;
    transition: 150ms;
}

.folder-button:hover {
  background-color: #f57a78;
	color:white;
}

.button1 {
background: #fff;
border: solid 0.5px #f25f70;
border-radius: 20px;
padding: 0.25em 0.75em;
}

.dl-btn {
color: #fff;
font-size: 12px;
background: #f57a78;
box-shadow: 0px 1px 0px 0.5px #ccc;
border-radius: 5px;
padding: 0.75em 1.25em;
}

/*-----リンクボックス画像サイズ-----*/
.booklink-image>a>img, .kaerebalink-image>a>img, .tomarebalink-image>a>img, .product-item-thumb>a>img{
width:auto;
max-height:300px;
}

/*-----アプリ―チ-----*/


.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}



/*480px以下*/
@media screen and (max-width: 480px){
.appreach__aslink img{
	height: 33px;
	width: 110px;
	}
.appreach__gplink img{
	height: 33px;
	width: 110px;
	}
}


/*-----SNSシェアボタン丸-----*/
.sns-share-message{
font-weight: bold; 
color: #875d5b; 
}

.sns-share-buttons {
flex-wrap: nowrap; 
justify-content: center; 
}

.sns-share-buttons a {
border-radius: 50%; 
font-size: 20px; 
margin: 0 5px; 
}
#main .sns-share a {
width: 40px;
height: 40px; 
}

.sns-share.ss-high-and-low-lc a .button-caption.button-caption {
	display:none;
}
.sns-share-buttons a .button-caption {
	display: none;align-content
}



/*-----アドセンス-----*/
.ad-area {
    font-size: 80%;
	color: #ae9890;
}

/*-----プロフィール-----*/
.author-box{font-size:16px;}

/*-----twtter埋め込みセンタリング-----*/
.twitter-tweet{
margin:0 auto 2em !important;
}

/*-----コピーボタン装飾------*/

.button-decoration{
	display:block;
	margin:20px 13.5px;
	padding:14px 20px;
	border:solid 2px #ddd;  /* 線の色 */
	color:#333;  /* 文字の色 */
	font-size:16px;/* 文字のサイズ */
	text-align:center;
	cursor:pointer;
	border-radius:30px; /* ボタンの角の丸みを調整 */
}

.button-decoration:hover{
	opacity:0.6;
	cursor:pointer;
}

.button-decoration:active{
    background: #ae9890; /* クリックした瞬間のボタンの背景色 */
    color: #FFF; /* クリックした瞬間のボタンの文字色 */
}

/*-----画像横幅調整-----*/

.wp-block-image img { 
    max-width: 100%;
    height: auto;
    border: 0;
	border-radius: 10px;
}

/*-----サムネイル角丸-----*/

.widget-entry-cards.card-large-image figure img.card-thumb img .attachment-post-thumbnail .size-post-thumbnail .wp-post-image{
	    border-radius: 10px;
}


/*-----ファイルブロックボタン-----*/
.wp-block-file *+.wp-block-file__button {
    background: #f28180;
    border-radius: 2em;
    color: #fff;
    text-decoration: none;
    padding: 0.5em 1em;
    margin-left: 0.75em;
}

/*-----グローバルナビ内検索窓-----*/
.header-search {
  width: 180px !important;
}

.header-search .search-box {
  margin: 10px 0 0 0;
}

.header-search input[type="text"] {
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 14px 14px 14px 14px / 50% 50% 50% 50%;
}

.header-search .search-submit {
  margin-top:4px;
  color: #ff9f9e;
}


/*-----絞り込み検索-----*/
input[type='submit'].mysearch-submit{
    -webkit-appearance: none;
	background-color:#feecd2;
	color:#e84040;
	font-weight:bold;
    margin: 5px;
    border-radius: 30px;
}

input[type='submit'].mysearch-submit:hover{
	background-color:#f28180;
	color:#fff;
	transition: .3s;
}

.search-edit, input[type="text"], input[type="search"], textarea, select {
    padding: 11px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 50px;
    font-size: 14px;
    width: 100%;
}

/*---お気に入りボタン---*/
.simplefavorite-button{
	font-weight:bold;
	padding: 8px 15px;
	border-radius: 50px;
	border:none;
	height:40px;
}

.simplefavorites-clear{
	padding: 8px 15px;
	border-radius: 50px;
	border:none;
	height:45px;
}

/*-----表示タイル数変更-----*/

@media screen and (min-width:768px) {
	/* タイル4列 */
.ect-3-columns {
  justify-content: space-around;
}
.ect-3-columns .entry-card-wrap {
 width: 24%;
}
.ect-3-columns .entry-card-snippet {
  max-height: 4em;
  overflow: hidden;
}

.ect-3-columns .ad-area {
  width: 24%;
}
}


/************************************
** ボックスナビ
************************************/
.p-nav{
margin:2em 0;/* 全体外余白 */
padding:0;/* 全体内余白 */
}
.p-nav ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
list-style:none;
margin:0 !important;
padding:0 !important;
border:none;
}
.p-nav ul li{
-ms-flex-preferred-size: calc(100%/4);/* 4列 */
flex-basis: calc(100%/4);/* 4列 */
margin:0 !important;
padding:0 !important;
text-align:center;
box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;/* 罫線 */
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
min-height:100px;/* 最低の高さ */
cursor:pointer;
background:#fff;/* 背景色 */
}
.p-nav ul li:hover{
z-index:2;
box-shadow: inset 2px 2px 0 0 #d4ecea, 2px 2px 0 0 #d4ecea, 2px 0 0 0 #d4ecea, 0 2px 0 0 #d4ecea;/* 罫線(マウスホバー) */
transition: 0.35s ease-in-out;
}
.p-nav ul li:before{
content:unset !important;
}
.p-nav ul li a{
display:block;
padding: 0.5em 1em;/* 内余白 */
text-decoration:none;
width:100%;
}
.p-nav ul li a:hover{
background:none;
opacity:1;
}
.p-nav ul li a img{
max-width:50% !important;/* 画像横幅 */
height: auto !important;
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));/* 画像影 */
display: inline-block;
}
.p-nav .p-nav-title{
display: block;
color: #999;/* 文字色 */
font-size: 0.7em;/* 文字大きさ */
letter-spacing: 1px;
font-weight: 600;/* 文字太さ */
text-align: center;
line-height: 1.5;/* 文字行間高さ */
}
/* サイドバー */
.sidebar .p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}
/* スマホ */
@media screen and (max-width: 559px) {
  .p-nav ul li{
    -ms-flex-preferred-size: calc(100%/2);/* 2列 */
    flex-basis: calc(100%/2);/* 2列 */
  }
}
/* fontawesome */
.p-nav ul li a i,.p-nav ul li a svg{
font-size: 40px;/* アイコン大きさ */
padding: 10px 0;/* アイコン余白 */
color: #f6a068;/* アイコン色 */
display:inline-block;
}
/* fontawesome(2番目) */
.p-nav ul li:nth-of-type(2) a i,.p-nav ul li:nth-of-type(2) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(3番目) */
.p-nav ul li:nth-of-type(3) a i,.p-nav ul li:nth-of-type(3) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(4番目) */
.p-nav ul li:nth-of-type(4) a i,.p-nav ul li:nth-of-type(4) a svg{
color:#f6a068;/* アイコン色 */
}

/*-----ボックスナビホバー色変更-----*/

.p-nav ul li:hover{
z-index:2;
box-shadow: inset 2px 2px 0 0 #bbd4ef, 2px 2px 0 0 #bbd4ef, 2px 0 0 0 #bbd4ef, 0 2px 0 0 #bbd4ef;/* 罫線(マウスホバー) */
transition: 0.35s ease-in-out;
}



/*-----アイキャッチ-----*/
.wp-post-image{
	border-radius:20px;
	max-height: 300px;
    width: auto;
    display: block;
    margin: 5px auto;
}

/*-----コードの文字サイズ-----*/
pre{font-size:14px;}



/******************************
アイキャッチメインブログカード
******************************/
.eccard {
	max-width:320px;
	background-color: #ffffff;
	border: 1px solid #eeeeee;
	word-wrap: break-word;
	margin-top:10px;
	margin-right: auto;
	margin-left: auto;
	box-shadow: 0 0 5px 5px rgba(0,0,0,.025);
}
.eccard a {
	text-decoration: none;
	opacity: 1;
	transition: all 0.2s ease;
}
.eccard a:hover{
	opacity: 0.7;
}
.eccard_title {
	font-size: 0.9em;
	font-weight: bold;
	color:#333333;
	line-height: 1.4;
	padding: 0px 10px 10px;
}

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

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

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