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

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

/*プライマリー*/
.primary-box{
background-color: #c3d4da;
}
/*サクセス*/
.success-box{
background-color: #cdd8d8;
}
/*インフォ*/
.info-box{
background-color: #eebeb0;
}
/*ワーニング*/
.warning-box{
background-color: #d7c7bd;
}
/*デンジャー*/
.danger-box{
background-color: #dcd2c2;
}

body{
background-image: none;
}

.author-thumb:before { position: initial; }

/* プロフィール全体 */
.nwa .author-box {
	border: none;
	background: none;
}

.sidebar h3 {
	background:transparent; /* Cocoon親テーマCSSリセットのため */
	padding: 6px 0px;
	border-bottom: 3px #EFDCDD solid; /* 下線追加 */
	letter-spacing: 0.2em; /* 字間を広げる */
}

.sidebar h3 {
  color: #515561;
  text-align:center;
  font-size: 1.1em;
}

/* スタイル 7: アイコンボックス全体のスタイル */
.wp-block-cocoon-blocks-icon-box {
	background-color: initial; /* 背景色をなしに設定 */
	border-width: 2px; /* 外枠の太さを2pxに設定 */
	border-radius: 0; /* 外枠の角を四角く設定 */
	padding: 1.5em 1.5em 1em; /* 内側余白を上下1.5em、左右1.5emに設定 */
}

/* アイコンの基本スタイル */
.wp-block-cocoon-blocks-icon-box::before {
	top: -1em; /* アイコンをボックスの上に1em浮かせる */
	left: 0.75em; /* 左からの位置 */
	display:grid; /* アイコンを中央揃え */
	place-content:center; /* アイコンの配置を中央揃え */
	margin: 0; /* 余白なし */
	padding:0; /* パディングなし */
	width: 2em; /* アイコンの幅 */
	height:2em; /* アイコンの高さ */
	border-right: 0; /* 右側のボーダーなし */
	border-radius: 99px; /* アイコン背景の角を丸く */
	font-size: .9em; /* アイコンのフォントサイズ */
	color: #fff; /* アイコンの色 */
	box-shadow: 0 0 0 2px;
    font-weight: 900;
}

.information-box {
	border-color: #cae2e3;
}

.question-box {
	border-color: gold;
}

.alert-box {
	border-color: #B91646;
}

.memo-box {
	border-color: #D9E4DD;
}

.ok-box {
	border-color: #C4DDFF;
}

.ng-box {
	border-color: #FAD4D4;
}

/* アイコンの背景色変更: 状況に応じてアイコンの背景色を設定 */

/* 情報 (i): 水色の背景色 */
.information-box::before {
	background-color: #cae2e3;
	font-family: "Font Awesome 5 Free";
    content: "\f129";
}

/* 質問 (?): ゴールドの背景色 */
.question-box::before {
	background-color: gold;
}

/* アラート (!): 薄赤色の背景色 */
.alert-box::before {
	background-color: #B91646;
}

/* メモ: 緑色の背景色 */
.memo-box::before {
	background-color: #D9E4DD;
}

/* コメント: 灰色の背景色 */
.comment-box::before {
	background-color: #999;
}

/* OK: 青色の背景色 */
.ok-box::before {
	background-color: #C4DDFF;
}

/* NG: 赤色の背景色 */
.ng-box::before {
	background-color: #FAD4D4;
}

/* GOOD: 緑色の背景色 */
.good-box::before {
	background-color: #98e093;
}

/* BAD: ピンク色の背景色 */
.bad-box::before {
	background-color: #eb6980;
}

/* プロフィール: 灰色の背景色 */
.profile-box::before {
	background-color: #999;
}

.article h2,
.article h3,
.article h4,{
	background-color: transparent; /* 背景色を透明に */
    border-radius: 0; /* 角の丸みなし */
    border: 0;
}


.article h2 {
   background: linear-gradient(transparent 80%, #e7dede 80%);
}

.article h3{
   padding: 0.25em 0;/*上下 左右の余白*/
   color: #494949;/*文字色*/
   background: transparent;/*背景透明に*/
   border-left: none;/*左線*/
   border-top:none;
   border-bottom:solid 3px #EFDCDD;/*下線１：実線・太さ・色*/
   border-right:none;
}

h3{
     position: relative;
     padding: 0.25em 0;/*内側余白調整*/
     color:#555;/*文字色（黒）*/
}

h3:after {
    position: absolute;
	content: '';
	display: block;
	border-bottom: solid 3px #D1B5BD;/*下線２：実線・太さ・色*/
	bottom:-3px;
	width:30%;/*下線２の幅*/
}

.article h4 {
   border-top: solid 2px #ac9f96;/*上線*/
   border-bottom: solid 2px #ac9f96;/*下線*/
}

ul li, ol li {
padding-top:12px;
padding-bottom:2px;
line-height:1.6;
}

/*アイキャッチラベル*/
.cat-label{
  background-color: #95a9b7; /*ラベルの色*/
  border: none; /*ラベルに囲い線をつけない*/
}

	
.download-box{	
	border: none;
	margin:0 50px 50px 0;
	width: calc( calc( 100% - 10px ) / 3 ) !important;
	margin-top: 2em !important;
	margin-right: 30px !important;
	margin-left: 30px !important;
	box-sizing: border-box;
}	
	
.download-box-content h1{	
	font-size:15px;
}	
	
.download-button{	
	font-size:13px !important;
	background-color: #bce2e8 !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	border: 0px !important;
	text-align: center; 
}	
	
.download-count{	
	display:none;
}	
	
.dlm-download-complete::after {	
	content: '' !important;
}	
	
.download-button::before {	
	content: "ダウンロード" !important;
}	

.page .date-tags,
.page .author-info {
    display: none;
}

 .archive-title {
 font-size:1.2em; /*大きさ*/
 font-weight:normal; /*文字の太さ*/
 color:#CFABB0;
}

.pagination-next {
 display: none;
}

.pagination .current {
 background-color: #ECE3E4;
}

.page-numbers {
border: 0;
}

.page-numbers {
 border-radius: 50%;
}

.page-numbers {
 color: #D4B7AF;
}

/*---------------------------------
カテゴリの行間を狭くする
--------------------------------*/
.widget_nav_menu ul li a{
	line-height: 0.3;
}

.widget_nav_menu ul li a::before{ /*親カテゴリーのアイコン設定*/
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  color: #B0E0E6;
  padding-right: 6px; /*アイコン右側空間*/
  font-size: 18px; /*フォントサイズ*/
  font-weight: 900; /*アイコンの太さ*/
}



/*子カテゴリーのアイコンを変更*/
.widget_nav_menu ul li ul li a::before{ 
  font-family: "Font Awesome 5 Free"; /*Font Awesomeのバージョン*/
  content: "\f105"; /*アイコンのフォント*/
  color: #B0E0E6; /*アイコンの色*/
}

.widget_archive ul li a {
  line-height: 0.1;
}

a:hover {
     color: #d2a8aa;
	 opacity: 0.7; 
}

#navi .navi-in a:hover {
  background-color: #EFDCDD;
  transition: all 0.3s ease-in-out;
}

/*プルダウンメニュー色*/
#navi .navi-in > .menu-header .sub-menu {
background-color: #fffafa;
}

/*ホバー時の背景色設定*/
.widget_categories ul li a:hover {
 background-color: #fffafa;
}

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

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

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