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

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

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

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

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



#header-in .logo-text{
  text-shadow: 0px 0px 5px #ffffff;
}

#header-in .tagline:before{
  content: '\300C\904A\3073\300D\A\300C\7652\3057\300D\306B\A\771F\5263\306B\3002';
  position: absolute;
  white-space: pre-wrap;
  -webkit-text-stroke: 8px #ffffff;
  text-stroke: 8px #ffffff;
  z-index: -1;
  filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5))
}
#header-in .tagline{
  font-size: min(73px, 7.7vw);
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  font-weight: bold;
  line-height: 1.4em;
  display: inline;
  width: 5.2em;
  margin: 0px;
  position: relative;
  text-align: left;
  left: 71%;
  margin-top: -19%;
  background: linear-gradient(90deg, #4158D0, #C850C0 30%, #FFCC70);
  background: -webkit-linear-gradient(0deg, #4158D0, #C850C0 30%, #FFCC70);
  -webkit-background-clip: text;
}

#header-in #blogdescription .stroke{
  position: absolute;
  -webkit-text-stroke: 8px #ffffff;
  filter: drop-shadow(0px 0px 4px #00000050);
  z-index: 1;
}
#header-in #blogdescription span{
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, #4158D0, #C850C0 30%, #FFCC70);
  background: -webkit-linear-gradient(0deg, #4158D0, #C850C0 30%, #FFCC70);
  -webkit-background-clip: text;
}
#header-in #blogdescription{
  font-size: min(73px, 7.7vw);
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  font-weight: bold;
  line-height: 1.4em;
  display: inline;
  width: 5.2em;
  margin: 0px;
  position: relative;
  text-align: left;
  left: 71%;
  margin-top: -19%;
}

.body.skin-grayish.front-top-page .container #header-container.header-container .header .grayish_topmv_dot{
  opacity: 0;
}
.body.skin-grayish.front-top-page .container #header-container.header-container .header .grayish_topmv_whovlay{
  opacity: 1;
  background: #000000;
  position: absolute;
  width: 25%;
  right: 0px;
  left: auto;
  height: 100vh;
}
.skin-grayish #navi-in{
  background: #ffffff;
}
.skin-grayish.front-top-page .container .header-container .header{
  background-color: #E50012;
  background-position-x: -30vw;
}

#header-in .logo-text{
  text-align: center;
  left: 70%;
  width: 5%;
  bottom: 40px;
  line-height: 0.5em;
  padding: 0px;
  position: absolute;
}
.skin-grayish .header-in .site-name .site-name-text{
  font-weight: bold;
  padding-top: 0px;
  line-height: 1.5em;
  color: #ffffff;
  font-size: 23px;
  display: block;
  width: 1em;
}

.skin-grayish.front-top-page .header .header-in{
  width: 100%;
}

.skin-grayish.front-top-page .skinadd-topmv-scroll .skinadd-topmv-scroll__txt{
  color: #ffffff;
  font-weight: bold;
}

.skin-grayish.front-top-page .skinadd-topmv-scroll{
  color: #ffffff;
}
.skin-grayish.front-top-page .skinadd-topmv-scroll::before{
  border-color: #ffffff;
  border-width: 0px 0px 2px 2px;
}
.navi .menu-item:has(a[href*="https://lin.ee/"]){
  padding: 0px;
  
}
.navi-footer-in a[href*="https://lin.ee/"],
.navi-footer-in a[href*="https://twitter.com/"],
.menu-drawer a[href*="https://lin.ee/"],
.menu-drawer a[href*="https://twitter.com/"],
.navi a[href*="https://lin.ee/"] .item-label,
.navi a[href*="https://twitter.com/"] .item-label{
  position: relative;
  border: 0px !important;
  text-indent: -99999px;
  width: 40px;
  height: 40px;
  background: url('../../uploads/2024/05/icon-line.png');
  background-size: 100%;
}
.navi-footer-in a[href*="https://twitter.com/"],
.menu-drawer a[href*="https://twitter.com/"],
.navi a[href*="https://twitter.com/"] .item-label{
  background-image: url('../../uploads/2024/05/icon-x.webp');
}
.menu-drawer .menu-item:has(a[href*="https://lin.ee/"]),
.menu-drawer .menu-item:has(a[href*="https://twitter.com/"]){
  display: inline-block;
  margin-right: 10px;
}

#menu-item-115 .caption-wrap{
  display: none;
}
#menu-item-115 {
  position: absolute;
  left: 0px;
  top: 0px;
}
#menu-item-115 a:before{
  content: '';
  height: 40px;
  width: 300px;
  display: inline-block;
  background-image: url('https://barapan.com/wp-content/uploads/2024/08/barapan-logo.webp');
  background-size: 100% auto;
  background-repeat: no-repeat;
}
#navi-menu-content .menu-item-115{
  position: absolute;
  top: 15px;
  left: 45px;
}
#navi-menu-content .menu-item-115 a{
  border: 0px;
}
.menu-item-115 a{
  height: 36px;
  width: 250px;
  display: inline-block;
  background-image: url('https://barapan.com/wp-content/uploads/2024/08/barapan-logo.webp');
  background-size: 100% auto;
  background-repeat: no-repeat;
  text-indent: -99999px;
}

.mobile-footer-menu-buttons .navi-menu-button:has(a[href*="https://lin.ee/"]),
.mobile-footer-menu-buttons .navi-menu-button:has(a[href*="https://twitter.com/"]){
  display: none;
}

.navi-footer-in .menu-item:has(a[href*="https://lin.ee/"]),
.navi-footer-in .menu-item:has(a[href*="https://twitter.com/"]){
  display: inline-block;
  vertical-align: middle;
  width: 40px !important;
}
.skin-grayish .navi-footer-in>.menu-footer li.menu-item{
  align-items: center;
}

.skin-grayish:not(.front-top-page) .navi-in>ul>li:has(.js-searchMenuDialog-open){
  display: none;
}
.skin-grayish:not(.front-top-page) .header #header-in.header-in .tagline {
    display: none;
}
@media screen and (max-width: 1023px) {
  .skin-grayish.front-top-page .mobile-header-menu-buttons.mobile-menu-buttons {
    background: #ffffff;
  }
  #header-in .logo-text{
    left: -2vw;
    bottom: 69px;
  }
  .skin-grayish.front-top-page .container .header-container .header{
    background-size: auto 70%;
    background-position: right top;
  }
  .body.skin-grayish.front-top-page .container #header-container.header-container .header .grayish_topmv_whovlay{
    height: 30%;
    top: 70%;
    left: 10%;
    width: 90%;
    background:#ffffff
  }
  .skin-grayish.front-top-page #header .site-name-text{
    font-size: 2vw;
  }
  #header-in #blogdescription,
  #header-in .tagline{
    left: 10%;
    top: 35%;
    width: 7em;
    line-height: 1.3em;
    font-size: 10vw
  }
  #header-in #blogdescription{
    width: 8em;
    font-size: 12vw;
    top: 40%;
  }
  #header-in .tagline:before{
    content: '\300C\904A\3073\300D\A0\300C\7652\3057\300D\306B\771F\5263\306B\3002';
  }
  .skin-grayish.front-top-page .skinadd-topmv-scroll{
    bottom: 33%;
  }
}