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

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

body {
background-color: #fffffe;
	font-family: "UDデジタル教科書体 M","UDDigiKyokasho M",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

#main  {
background-color: #fffffe;
}

nav#navi, .menu-header .sub-menu{
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2);
}

#navi .navi-in > .menu-header .item-label{
	font-size: 16pt;
}

	.nwa .author-box {
		padding: 10px 0 0 0;
	}
	.nwa .author-box .author-description {
		text-align:center;
		font-size:11pt;
	}
	.nwa .author-box .author-thumb {
		width:160px;
	}
	.author-box .author-name {
		margin: 0 0;
	}
	.author-box img.avatar.photo {
		border-radius:10%;
	}

ul {
	list-style-type: none;
    margin: 0px 10px;
}
}

a{
text-decoration: none;
}

p {
    padding: 0px 20px;
}

.navi {
background-image: linear-gradient(to right, #ffa9a6 10%, #ffa01c 30%, #ffe16e 70%, #ffa9a6 100%);
}

.article h2 {
	background-image: linear-gradient(to right, #ffa01c 30%, #ffe16e 70%, #ffa01c 100%);
    font-size: 24px;
    padding: 18px;
    border-radius: 2px;
}
.article h3 {
    border-left: 7px solid #ffa01c;
    border-right: 1px solid #ffa01c;
    border-top: 1px solid #ffa01c;
    border-bottom: 1px solid #ffa01c;
    font-size: 22px;
    padding: 12px 20px;
}
.article h4 {
    border-top: 2px solid #ffa01c;
    border-bottom: 2px solid #ffa01c;
}

.marker-blue {background-color: #daffcc; }

.marker-under-blue {
background: linear-gradient(transparent 60%, #daffcc 60%);
}



.marker-under-dcff2e {
background: linear-gradient(transparent 60%, #dcff2e 60%);
}

/* アイキャッチを中央寄せにする */
.eye-catch-wrap{
  margin: center;
}

/*シェア・フォローボタンの枠組み*/
.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:hover,
.sns-share.ss-bottom .sns-buttons a:hover,
.sns-follow.sf-bottom .sns-buttons a:hover,
.sns-follow.sf-widget .sns-buttons a:hover {
  transform: translateY(-4px);
}

/*シェアボタンのアイコン*/
.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: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; /*線*/
}

.sidebar h3 {
  background: none;
  font-size: 17px;
  letter-spacing: 2px;
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 0;
  text-align: center;
  color: #80696b; 
}

.sidebar h3::before,
.sidebar h3::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26%;
  border-top: 3px solid #80696b; 
}

.sidebar h3::before {
  left: 0;
}
.sidebar h3::after {
  right: 0;
}
.widget_categories ul li a {
  color: #333;
  text-decoration: none;
  padding: 6px 0;
  display: block;
  padding-right: 4px;
  padding-left: 4px;
  border-top: 1px dotted #ccc;
  font-size: 16px;
}
.widget_categories ul li a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f07b";
  padding-right: 10px;
}
.widget_categories > ul > li > a:first-child {
  border-top: none;
}
.widget_categories > ul > li > a:last-child {
  border-bottom: 1px dotted #ffc679;
}
.widget_categories ul li a .post-count {
  display: block;
  float: right;
  background: #fff;
  padding: 0 1em;
  font-size: 14px;
  margin-top: 0.2em;
  border-radius: 4px;
}
.widget_categories ul li a:hover {
  background: none;
  transition: 0.5s;
  color: #ffc679;
}
.widget_categories ul li a:hover .post-count {
  background: #ffc679;
  color: #fff;
  transition: 0.5s;
}
.widget_categories ul li ul {
  border-bottom: 1px dotted #ccc;
}
.widget_categories ul li ul li a {
  color: #333;
  text-decoration: none;
  padding: 0 4px 4px 4px;
  display: block;
  border: none;
}
.widget_categories ul li ul li a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  padding-right: 0.45em;
  font-weight: bold;
}
.author-box .sns-follow-buttons a.follow-button {
  background-color: #fff;
  color: black;
  border: 0px;
}
.author-box {
  border: 0px;
}
.author-box p {
  margin-top: 0.3em;
  line-height: 1.6;
}
.author-box p a {
  text-decoration: none;
}
.author-box p a:hover {
  text-decoration: underline;
  color: #008cee; /* プロフィールにリンクを貼っている場合, ホバーした際の色指定 */
}
/* スマホサイドバー設定 */
#sidebar .author-box {
  border: none;
  border-radius: 4px;
  margin: 1em 0;
  line-height: 1.4;
  position: relative;
  padding: 1.4% 2% 1.8%;
}
#sidebar .author-thumb {
  float: none;
  width: 100%;
  margin: 9px auto 0;
  height: 0;
  padding-top: 75px;
  position: relative;
}
#sidebar .author-thumb img {
  border: 3px dashed #ffc679;
  width: 35%;
  padding: 6px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25%;
}
#sidebar .author-content {
  margin-top: 16%;
  font-size: 0.9em;
}

#sidebar .wp-block-image {
  margin-bottom: 0;
}

.sidebar {
  color: #80696b; 
}

.widget-sidebar ul li {
font-size:12pt;
margin: 0px 10px;
}

.widget-sidebar p {
font-size:12pt;
margin: 0px 0px;
}

.footer {
  margin-top: 40px; /*フッターとコンテンツの間に余白追加*/
}

.footer-bottom {
  margin-top: 14px; /*フッター内上部の余白を詰める*/
}

.footer-bottom-logo { /*ロゴの位置調整*/
  float: none;
  bottom: auto;
  position: static;
  margin-bottom: 10px;
}

.footer-bottom-logo .logo-image {
  padding: 0;
  max-width: 10%; /*ロゴ画像を少し大きく*/
  margin: 0 auto;
}

.footer-bottom-content { /*メニュー＆クレジットの位置調整*/
  float: none;
  text-align: center;
}

.copyright {
  color: #fff; /*クレジットの文字色*/
}

.blank-box, .is-style-blank-box-red, .is-style-blank-box-navy, .is-style-blank-box-blue, .is-style-blank-box-yellow, .is-style-blank-box-green, .is-style-blank-box-pink, .is-style-blank-box-orange, .is-style-sticky-gray, .is-style-sticky-yellow, .is-style-sticky-red, .is-style-sticky-blue, .is-style-sticky-green {
padding: 0.5em 0.5em;	
}

/************************************
**モバイル表示　ヘッダーメニュー・検索アイコン
************************************/
.mobile-menu-buttons{
height:50px;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
color: #F7AD2E!important;
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fa.fa-search::before{
margin-left:1em;
color: #F7AD2E!important;
}
span.fa.fa-bars::before{
margin-right:1em;
}
.navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{
display:none;
}

/************************************
**モバイル表示　ヘッダーメニュー
************************************/
span.fa.fa-close::before{/*戻るボタン*/
font-family: FontAwesome;
content: "\f060";
}
.menu-content .menu-drawer {
padding: 0 1em;
margin:0;
}
ul.menu-drawer:before{
font-size:1.2em;
display: block;
font-weight: normal;
background: white;
color:#7b7b7b;
padding: .5em;
margin-bottom:1em;
font-family: sans-serif;
text-align: center;
border-bottom:3px dotted #90C31F;
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
background-color:#fff;
padding:0;
border-radius:20px;
}
/*×アイコンを移動*/
.menu-close-button {
 padding-top: 15px;
 padding-left: 25px;
 padding-bottom: 30px;
text-align: left;
font-size: 1.3em;
}

/*モバイルメニューを開いた時の記事色を変えない*/
#navi-menu-input:checked ~ #navi-menu-close,
#sidebar-menu-input:checked ~ #sidebar-menu-close,
#search-menu-input:checked ~ #search-menu-close,
#share-menu-input:checked ~ #share-menu-close,
#follow-menu-input:checked ~ #follow-menu-close {
opacity: 0;
}

/*モバイルメニュー背景色*/
.navi-menu-content {
background-color: #fffffff0;
}

.menu-drawer a {
font-size: 0.9em;
line-height: 1.6em;
border-bottom: solid 1px #e6e6e6;
}
.menu-drawer a:hover {
background-color:#ffc0cb;　/*マウスオーバー時の背景色*/
}
.sub-menu li {                                      
margin-left:-14px;
font-size: 0.9em;
color: #e6e6e6;
}
.menu-drawer ul.sub-menu li {/*サブメニューの文字サイズ*/
font-size: 1em;
}
@media (max-width:834px){
.sub-menu{
box-shadow: none!important;
}
}

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

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

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