@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 {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
.entry-content p {
	margin-bottom: 0!important;
}
.header-container, .main, .sidebar, .footer {
  background: #f7f6f2!important;
}
.entry-content a {
  text-decoration: underline!important;
}
/* PCでサイトロゴ画像を白色に変更 */
@media screen and (min-width: 768px) {
  .site-logo-image {
    filter: brightness(0) invert(1); /* 画像を白色に変更 */
  }
}

.navi-in > ul li {
  width:auto!important;
}

.widget-sidebar th,
.widget-sidebar td,
.widget-sidebar p,
.widget-sidebar li {
  font-size: 14px!important;
}

.widget-sidebar th,
.widget-sidebar td {
  padding: 0.75em;
}

.widget-sidebar .wpp-list {
  padding: 0;;
}
.widget-sidebar .wpp-list li span {
  display: block;
  text-align: right;
  font-size: 12px!important;
}

.prof-read {
  border-bottom:5px solid #aaa!important;
  padding:0 0 1em!important;
  margin-bottom:1em!important;
}
.copy-button span {
  color: #fff!important;
}



.widget_categories ul li ul li{
  border-left: solid 10px #333333;
}

.widget_categories ul li ul {
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
  opacity: 0;
}

.widget_categories ul li:hover ul {
  display: block;
  max-height: 500px; /* 十分な高さを確保 */
  opacity: 1;
  transition: max-height 0.8s ease-in-out, opacity 0.8s ease-in-out; /* ゆっくり表示するためのトランジション */
}
.fixed-header .has-sub {
  display: inline-block;
}
.fixed-header .navi-in > ul li:hover > ul  {
  display: block;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  #header .site-name-text img {
    width: auto;
    margin: auto;
  }
  .menu-drawer li {
    padding: 0.75em 0.75em 0.75em 0.75em!important;
    border-bottom: 1px solid #999;
  }
  .entry-title, .archive-title {
    font-size: 1.6rem!important;
    margin: 0 0 1em 0!important;
    padding: 0!important;
  }
  #main {
    padding: 70px 0 30px!important;
  }
  .menu-drawer li {
    padding: 0.5em!important;
  }
  .menu-item li a {
    padding: 0.5em;
    font-size: 1.1rem!important;
  }
  .sub-menu li {
    padding: 0.25em!important;
  }
  .sub-menu li a {
    padding: 0.25em!important;
    font-size: 0.9rem!important;
  }

 
}

.header-container {
  display: flex !important;
  justify-content: center !important; /* ヘッダーを中央寄せ */
  width: 100% !important;
}

.header-container-in {
  max-width: 1650px !important; /* ヘッダーの最大幅を指定 */
  width: 100% !important;
  margin: 0 auto !important; /* 左右中央寄せ */
}

.header-in {
  display: flex !important;
  justify-content: center !important; /* 内部要素も中央寄せ */
  width: 100% !important;
}


.column-wrap .block-editor-block-list__layout {
  min-height: 2em;
}

.column-left,
.column-center,
.column-right {
  padding: 0.4em;
}

.column-left {
  background-color: #c7e1ef;
}

.column-center {
  background-color: #c9e8d8;
}

.column-right {
  background-color: #ffecd3;
}

.btn-wrap,
.blogcard-type {
  padding: 6px;
  position: relative;
}

.btn-wrap {
  padding: 10px !important;
}

span.btn-wrap {
  padding: 6px 18px 6px;
  display: inline-block;
  font-size: 0.8em;
}

.btn-wrap::before {
  position: absolute;
  top: -2px;
  right: 4px;
}

.btn-wrap::before {
  font-family: FontAwesome;
  color: #DBB004;
  content: "\f146";
}

.blogcard-type::before {
  font-family: FontAwesome;
  font-size: 0.6em;
  padding: 0 4px;
  background-color: #587b93;
  color: #fff;
  top: 0;
  right: 0;
  position: absolute;
  white-space: pre;
}

.btn-wrap {
  background-color: #f8e58c;
}

.blogcard-type {
  padding-top: 1em;
  background-color: #e6ecf0;
}

.blogcard-type.bct-none::before {
  content: "\f0c8   ラベルなし";
}

.blogcard-type.bct-related::before {
  content: "\f15c   関連記事";
}

.blogcard-type.bct-reference::before {
  content: "\f19d   参考記事";
}

.blogcard-type.bct-reference-link::before {
  content: "\f19d   参考リンク";
}

.blogcard-type.bct-popular::before {
  content: "\f005   人気記事";
}

.blogcard-type.bct-pickup::before {
  content: "\f005   ピックアップ";
}

.blogcard-type.bct-check::before {
  content: "\f00c   チェック";
}

.blogcard-type.bct-together::before {
  content: "\f02d   あわせて読みたい";
}

.blogcard-type.bct-detail::before {
  content: "\f15c   詳細はこちら";
}

.blogcard-type.bct-official::before {
  content: "\f024   公式サイト";
}

.blogcard-type.bct-dl::before {
  content: "\f019   ダウンロード";
}

.blogcard-type.bct-prev::before {
  content: "\f137   前回の記事";
}

.blogcard-type.bct-next::before {
  content: "\f138   続きの記事";
}

/*ビジュアルエディターにinstagramの引用符が表示される対応*/
.instagram-media {
  position: relative !important;
}

.postbody.main {
  width: auto;
}

.button-wrap-msg,
.box-block-msg {
  font-size: 10px;
  text-align: center;
}

.blank-box.bb-tab::before {
  background-color: var(--cocoon-custom-border-color);
  font-family: Aharoni, "Arial Black", Impact, Arial, sans-serif;
  position: absolute;
  font-size: 13px;
  top: -27px;
  height: 24px;
  color: var(--cocoon-white-color);
  left: -3px;
  border-radius: 6px 6px 0 0;
  padding: 0 1em 0 0.8em;
  font-family: FontAwesome, Aharoni, "Arial Black", Impact, Arial, sans-serif;
}
.blank-box.bb-red::before {
  background-color: var(--cocoon-red-color);
}
.blank-box.bb-pink::before {
  background-color: var(--cocoon-pink-color);
}
.blank-box.bb-purple::before {
  background-color: var(--cocoon-purple-color);
}
.blank-box.bb-blue::before {
  background-color: var(--cocoon-blue-color);
}
.blank-box.bb-green::before {
  background-color: var(--cocoon-green-color);
}
.blank-box.bb-orange::before {
  background-color: var(--cocoon-orange-color);
}
.blank-box.bb-yellow::before {
  background-color: var(--cocoon-yellow-color);
}
.blank-box.bb-brown::before {
  background-color: var(--cocoon-brown-color);
}
.blank-box.bb-grey::before {
  background-color: var(--cocoon-grey-color);
}
.blank-box.bb-black::before {
  background-color: var(--cocoon-black-color);
}
.blank-box.bb-deep::before {
  background-color: var(--cocoon-deep-color);
}
.blank-box.bb-indigo::before {
  background-color: var(--cocoon-indigo-color);
}
.blank-box.bb-light-blue::before {
  background-color: var(--cocoon-light-blue-color);
}
.blank-box.bb-cyan::before {
  background-color: var(--cocoon-cyan-color);
}
.blank-box.bb-teal::before {
  background-color: var(--cocoon-teal-color);
}
.blank-box.bb-light-green::before {
  background-color: var(--cocoon-light-green-color);
}
.blank-box.bb-lime::before {
  background-color: var(--cocoon-lime-color);
}
.blank-box.bb-amber::before {
  background-color: var(--cocoon-amber-color);
}
.blank-box.bb-deep-orange::before {
  background-color: var(--cocoon-deep-orange-color);
}
.blank-box.bb-white::before {
  background-color: var(--cocoon-white-color);
}

.bb-check::before {
  content: "\f00c   CHECK";
}

.bb-comment::before {
  content: "\f075   COMMENT";
}

.bb-point::before {
  content: "\f0eb   POINT";
}

.bb-tips::before {
  content: "\f19d   TIPS";
}

.bb-hint::before {
  content: "\f0f3   HINT";
}

.bb-pickup::before {
  content: "\f005   PICKUP";
}

.bb-bookmark::before {
  content: "\f02e   BOOKMARK";
}

.bb-memo::before {
  content: "\f249   MEMO";
}

.bb-download::before {
  content: "\f019   DOWNLOAD";
}

.bb-break::before {
  content: "\f0f4   BREAK";
}

.bb-amazon::before {
  content: "\f270   AMAZON";
}

.bb-ok::before {
  content: "\f10c   OK";
}

.bb-ng::before {
  content: "\f00d   NG";
}

.bb-good::before {
  content: "\f164   GOOD";
}

.bb-bad::before {
  content: "\f165   BAD";
}

.bb-profile::before {
  content: "\f007   PROFILE";
}

.has-small-font-size {
  font-size: 13px;
}

.has-medium-font-size {
  font-size: 20px;
}

.has-large-font-size {
  font-size: 36px;
}

.has-huge-font-size,
.has-larger-font-size {
  font-size: 42px;
}

.mce-content-body .btn-wrap a[data-mce-selected] {
  padding: 7px 13px;
}

.wp-block-freeform.block-library-rich-text__tinymce .btn[class*=btn-] {
  color: var(--cocoon-white-color);
}

.mce-content-body .blogcard-type br {
  display: initial;
}