@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: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  background-color: #0f0f1d;
  color: #fff;
  overflow-y: auto;
}
body.active{
  overflow-y: hidden;
}
#main{
  background: rgb(0 0 0 / 30%);
}
.navi-entry-card-content .cat-label {
  display: none;
}
.widget-sidebar .cat-label{
  display: none;
}
.widget-sidebar .widget-entry-cards .new-entry-card-content{
  padding: 5px 0;
  line-height: 1.5;
}
.widget-footer-mobile .cat-label,
.widget-footer-center .cat-label,
.widget-footer-right .cat-label {
  display: none
}
a:hover { color: #58ff74; }

/*======== ヘッダーレイアウト ========*/
.header-container-in.hlt-top-menu .header{
  width: 100%;
}
.header-container-in.hlt-top-menu .logo-header img{
  max-height: 40px;
}
.header-in{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 15px;
}
.header-container-in.hlt-top-menu .tagline{
  display: block;
  order: 2;
  font-size: 18px;
  border-left: solid 1px #d3cdc8;
  padding-left: 24px;
  color: #2b1d15;
  font-weight: 700;
}
.header-container-in.hlt-top-menu .logo-header{
  height: 100%;
  order: 1;
}
.header-container-in.hlt-top-menu .add-header-contents{
  order: 3;
  margin-left: auto;
}
.header .menu-btn{
  width: 28px;
  cursor : pointer;
  z-index: 2;
  position: relative;
}
.header .menu-btn .text{
  font-size: 9px;
  margin-top: 8px;
  font-weight: bold;
  text-align: center;
}
/*---- icon ---- */
.header .menu-btn .menu-trigger,
.header .menu-btn .menu-trigger span {
  transition: all 2s;
  box-sizing: border-box;
}
.header .menu-btn .menu-trigger {
  position: relative;
  width: 28px;
  height: 23px;
}
.header .menu-btn .menu-trigger span {
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #58ff74;
}
.header .menu-btn .menu-trigger span:nth-of-type(1) {
  top: 0;
}
.header .menu-btn .menu-trigger span:nth-of-type(2) {
  top: 10px;
}
.header .menu-btn .menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
/*---- icon  anime---- */
.menu-trigger span:nth-of-type(1) {
  -webkit-animation: menu-bar01 .75s forwards;
  animation: menu-bar01 .75s forwards;
}
@-webkit-keyframes menu-bar01 {
  0% {
    -webkit-transform: translateY(9px) rotate(45deg);
    width: 100%;
  }
  50% {
    -webkit-transform: translateY(9px) rotate(0);
    width: 100%;
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}
@keyframes menu-bar01 {
  0% {
    transform: translateY(9px) rotate(45deg);
    width: 100%;
  }
  50% {
    transform: translateY(9px) rotate(0);
    width: 100%;
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
.menu-trigger span:nth-of-type(2) {
  transition: all .25s .25s;
  opacity: 1;
}
.menu-trigger span:nth-of-type(3) {
  -webkit-animation: menu-bar02 .75s forwards;
  animation: menu-bar02 .75s forwards;
}
@-webkit-keyframes menu-bar02 {
  0% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    width: 100%;
  }
  50% {
    -webkit-transform: translateY(-10px) rotate(0);
    width: 100%;
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}
@keyframes menu-bar02 {
  0% {
    transform: translateY(-10px) rotate(-45deg);
    width: 100%;
  }
  50% {
    transform: translateY(-10px) rotate(0);
    width: 100%;
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-animation: active-menu-bar01 .75s forwards;
  animation: active-menu-bar01 .75s forwards;
}
@-webkit-keyframes active-menu-bar01 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(9px) rotate(0);
    width: 100%;
  }
  100% {
    -webkit-transform: translateY(9px) rotate(45deg);
    width: 100%;
  }
}
@keyframes active-menu-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(9px) rotate(0);
    width: 100%;
  }
  100% {
    transform: translateY(9px) rotate(45deg);
    width: 100%;
  }
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-animation: active-menu-bar03 .75s forwards;
  animation: active-menu-bar03 .75s forwards;
}
@-webkit-keyframes active-menu-bar03 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(-10px) rotate(0);
    width: 100%;
  }
  100% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    width: 100%;
  }
}
@keyframes active-menu-bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-10px) rotate(0);
    width: 100%;
  }
  100% {
    transform: translateY(-10px) rotate(-45deg);
    width: 100%;
  }
}
/*---- nav ---- */
nav.header-menu{
  display: none;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  z-index: 2;
}
nav.header-menu .header-menu_bg{
  position: absolute;
  top: 80px;
  right: 0;
  background: rgba(0,0,0,0.5);
  height: calc(100vh - 85px);
  width: 100%;
}
nav.header-menu ul{
  position: absolute;
  top: 80px;
  right: 0;
  width: 420px;
  height: calc(100vh - 85px);
  padding: 20px;
  background-color: #000;
  border-top: 1px solid #fff;
}
nav.header-menu ul li{
  margin-bottom: 10px;
  display: block;
}
nav.header-menu ul li a{
  font-size: 16px;
  font-weight: normal;
  color: #fff;
  text-decoration: none;
}
nav.header-menu ul li.sub-list{
  position: relative;
  padding-left: 25px;
}
nav.header-menu ul li.sub-list::before {
  position: absolute;
  left: 0;
  top: 45%;
  content: "";
  display: inline-block;
  background-color: #ddd;
  height: 2px;
  width: 15px;
}
nav.header-menu ul li.sub-list a{
  font-size: 14px;
}
.wp-block-search__label{
  display: none;
}

/*======== 右ナビレイアウト ========*/
.sidebar{
  background: none;
}
.sidebar h2,
.sidebar h3{
  background-color: #58ff74;
  color: #0f0f1d;
}
.widget-entry-card{
  font-size: 14px
}
.widget-entry-cards .a-wrap{
  border-bottom: dashed 1px #fff;
}
.entry-card-thumb,
.widget-entry-card-thumb,
.related-entry-card-thumb,
.carousel-entry-card-thumb{
  margin-top: 0;
}
.footer{
  margin-top: 0;
  padding: 0;
}
.footer-bottom{
  margin-top: 0;
  padding: 0
}
.copyright{
  margin-top:0;
  padding: 16px;
}

/*======== SP追従フッター ========*/
.mobile-menu-buttons {
  color: #fff;
  background: #000;
  box-shadow: none;
  border-top: 1px solid #494949;
}
.mobile-footer-menu-buttons li.menu-button > a ,
.mobile-footer-menu-buttons li.menu-button {
  color: #58ff74 !important;
}
.menu-content {
  background: #000;
}
#slide-in-sidebar {
  color: #fff;
}


/*======== パーツ調整 ========*/

/*---- 目次 ---- */
.toc {
  width: 100%;
}

/*---- テキスト ---- */
.red {
  color: #ff59b4;
}
.blue {
  color: #75d4ff;
}
.green {
  color: #98ffc4;
}
.cocoon-custom-text-1{
  color: #fff900;
}
.marker {
  background-color: rgb(249 255 0 / 30%);
}
.marker-under {
  background: linear-gradient(transparent 60%, rgb(249 255 0 / 30%) 60%);
}
.marker-red {
  background-color: rgb(255 0 245 / 20%);
}
.marker-under-red {
  background: linear-gradient(transparent 60%, rgb(255 0 245 / 20%) 60%);
}
.marker-blue {
  background-color: rgb(0 147 255 / 50%);
}
.marker-under-blue {
  background: linear-gradient(transparent 60%, rgb(0 147 255 / 50%) 60%);
}

/*---- テーブル ---- */
.scrollable-table.stfc-sticky table:not(.wp-calendar-table) tr > *:first-child {
  background-color: rgba(88 255 116 / 10%);
  font-weight: bold;
}

/*---- 動画コンテンツ ---- */
.video-container, .instagram-container, .facebook-container {
  max-width: 100%;
}

/*---- cocoon デザインパーツ ---- */
.is-style-information-box, .information-box, .information {
  background: rgb(0 147 255 / 30%);
  border: none;
}
.blank-box.bb-tab .bb-label {
  background-color: #ff925d;
}
.blank-box.bb-tab {
  border-color: #ff925d;
  background-color: rgb(219 152 81 / 10%);
}
.blank-box.sticky {
  border-color: #ffd043;
  background-color: rgb(203 219 81 / 20%);
}
.cocoon-block-balloon.not-nested-style>.speech-balloon {
  color: #333;
  width: 100%;
}
.toggle-button {
  padding: 10px;
  background-color: #58ff74;
  color: #333;
}
.tab-label-group .tab-label.is-active {
  background-color: #9df97c;
  color: #333;
}
.tab-label-group .tab-label {
  background-color: var(--cocoon-tab-label-active-color);
}
.cta-button {
  margin-top: 0;
}

/*---- gifアニメ制御（一時停止） ---- */
/*.cat-label {
  z-index: 1;
}
:is(.entry-card-thumb-image, .eye-catch-image)[src$=".gif"] {
  opacity: 0;
}*/