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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
:root {
  --color-contrast: #1a1a1a;
  --color-contrast-l1:#2b2b2b;
  --color-contrast-l2:#333333;
  --color-contrast-l3:#404040;
  --color-contrast-l4:#4d4d4d;
  --color-base:#dddddd;
  --color-base-d1:#bbbbbb;
  --color-main:#a314cd;
  --color-main-l1:#a92fcd;
  --color-error:#df2f2f;
}
/* メインカラムとサイドバー透明化 */
.main, .sidebar {
  background-color: transparent;
}
body{
	font-family:"Inter","Noto Sans JP","sans-serif";
}
.wrap{
	width:916px;
}
a {
  text-decoration: none;
}
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: initial;
  box-shadow: none;
  font-size: initial;
  line-height: initial;
  color: var(--color-base);
}
.article h1 {
  font-size: 1.95em;
}
.article h2 {
  font-size: 1.80em;
  margin-top:2.1em;
  margin-bottom: 0.538em;
}
.article h3{
  font-size:1.50em;
  margin-top:2.1em;
  margin-bottom: 0.538em;
}

.article h4{
  font-size:1.40em;
  margin-top:2.1em;
  margin-bottom: 0.538em;
}

.article hr{
	color:var(--color-contrast-l4);
}
/* 入力ボックス */
input[type="text"],.is-menu.is-dropdown form:not(.is-search-form) input[type="text"],input[type="email"],textarea{
	background-color:var(--color-contrast-l2);
	color:var(--color-base);
  border:none;
	border-radius: 7px;
}
input[type="text"]:focus,.is-menu.is-dropdown form:not(.is-search-form) input[type="text"]:focus,input[type="email"]:focus,textarea:focus{
  outline: 2px solid var(--color-main);
}
textarea {
  resize: vertical; /* 縦方向のリサイズを許可 */
}
/* 検索バー */
.is-menu.is-dropdown form:not(.is-search-form) input[type="text"], .search-box .search-edit{
border-radius:9999px;
background-color: var(--color-contrast-l2);
border:none;
}
/* ポップアップ検索バーのバツ消し */
.search-close,.popup-search-close::after, .search-close::after, .popup-search-close::before, .search-close::before {
  content: none;
  display: none;
  width: 0;
  height: 0;
}
/*
textarea{
	background-color:var(--main-bg-color);
	color:var(--main-text-color);
}
*/
input[type="submit"]{
	background-color:var(--color-main);
	color:var(--color-base);
	border:none;
	border-radius:9999px;
}
input[type="submit"]:hover{
	background-color:var(--color-main-l1);
	
}

/*ヘッダーメニューのカテゴリのリンクを無効化*/

#menu-item-208 > a:active{
	pointer-events:none;
}
/*ヘッダーメニューの文字調整*/
.navi-in a{
	font-size:14px;
}
#navi .navi-in a{
	color:var(--color-base-d1);
	transition:none;
}
#navi .navi-in a:hover {
  background-color: var(--color-contrast);
	color:var(--color-base);
}
#navi .navi-in > .menu-header .sub-menu{
	background-color:var(--color-contrast-l1);
}
/* カテゴリ角丸・はみ出さない */
.navi-in > ul .sub-menu{
	border-radius:7px;
	overflow:hidden;
}
#navi .navi-in .sub-menu a:hover {
	background-color:var(--color-contrast-l2);
	
}
.navi-in > ul li{
	width:90px;
}
.astm-search-menu.is-menu.is-dropdown.menu-item a{
	justify-content: center;
  align-items: center;
}

/*折りたたみブロックのデザイン変更*/
.toggle-button{
	background-color:var(--color-contrast-l2);
	border:none;
	text-align:left;
}
.toggle-button::before {
  color: var(--color-base);
  opacity:1;
}
.toggle-checkbox:checked ~ .toggle-content{
	border-color:var(--color-contrast-l2);
}
.toggle-checkbox:checked ~ .toggle-content{
	transition:none;
}
.toggle-wrap .toggle-content{
	transition:none;
}
/*アイコンブロックのデザイン変更*/
.is-style-alert-box:before{
	color: rgb(255 110 110 /1);
	border-right:1px solid rgb(255 110 110 /1);
}
.is-style-alert-box{
	background: rgb(255 70 70/ 0.3);
	border:none;
}
/*
.toc {
  display: block;
}

#sidebar .toc{
  padding:10px;
  border:solid;
  border-color:#666666;
  border-width:thin;
}
*/
/* オープンボタン */
.ez-toc-open-icon{
	background-color:var(--color-contrast-l1);
}
/* オープンボタン矢印 */
.ez-toc-open-icon span.arrow{
	color:var(--color-base-d1);
}
/* オープンボタンテキスト */
.ez-toc-open-icon span.text{
	color:var(--color-base-d1);
	transform:rotate(0deg);
}
/* 目次タイトル */
.ez-toc-sticky-fixed .ez-toc-sidebar .ez-toc-sticky-title-container{
	background-color:var(--color-contrast-l1);
	border-bottom:none;
}
/* 目次タイトルテキスト */
.ez-toc-sticky-fixed .ez-toc-sidebar .ez-toc-sticky-title-container .ez-toc-sticky-title{
	color:var(--color-base);
}
/* 目次本体 */
.ez-toc-sticky-fixed .ez-toc-sidebar{
	background:var(--color-contrast-l1);
}
/* 目次本体テキスト */
#ez-toc-sticky-container a:visited{
	color:var(--color-base);
}
.ez-toc-sticky-fixed .ez-toc-close-icon{
	color:var(--color-base);
}
/* 日付左寄せ */
.date-tags{
	text-align:left;
	margin:0;
	display:flex;
	align-items:center;
}
.post-meta-wrapper{
	display:flex;
    align-items: center;
	margin-top:10px;
}
/* タグ*/
.tag-link {
  border: none;
  border-radius:9999px;
  background-color:var(--color-contrast-l3);
  padding:1px 6px
}
.date-tags{
  color: var(--color-base); /*文字色*/
  line-height:1.8;
}
.writer-outer{
  font-size:13px;
  margin-right:16px;
}
.post-date, .post-update{
  font-size:13px;
}
/*
.fa-history::before{
  content:none;
}

.post-update::before{
  content:"(";
}

.post-update::after{
  content:")";
}
*/


.post-date{
  margin-right:0;
}
.commets-list .avatar {
  float: left;
  border-radius: 50%;
  margin-right: 10px;
}
/* ユーザーのリンクを切り通常体に */
.url{
	color:var(--color-base);
}
.fn{
	font-style:normal;
	pointer-events: none;
}

.comment-meta a:first-child{
  pointer-events: none;
	color:var(--color-base);
}
.says{
	display:none;
}
.comment-reply-link{
	border:none;
	background-color:var(--color-contrast-l3);
}
.comment-content{
	margin-top:1rem;
}
/* コメント前のテキスト */
#email-notes{
  font-size: 0px;
}
#email-notes::after{
  font-size:16px;
  content: "スパム対策のため、投稿されたコメントは管理人が承認するまで表示されませんm(_ _)m";
}
.comment-reply-title{
	display:none;
}
/* 必須項目マークを米印に変更 */
.comment-form .required{
  display:none;
}
.comment-form-comment label::after{
  content:"*";
  color: var(--color-error);
}
.comment-form-email label::after{
content: "（公開されません）";
}

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

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

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