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

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

#navi {
  padding: 0.5rem 0;
}

.header, .header .site-name-text, #navi .navi-in a, #navi .navi-in a:hover, .article h2, .sidebar h2, .sidebar h3, #footer, #footer a:not(.sns-button),
.cat-label, .cat-link {
  color: var(--cocoon-text-color);
}

#navi .navi-in .header_menu_button a:hover {
  transition: all 0.8s ease;
  opacity: .6;
}

#navi .navi-in .header_menu_button a,
.menu-drawer .header_menu_button {
  background-color: #DC000C;
  color: #FFF;
  border-radius: 7px;
}

.menu-drawer .header_menu_button {
  margin-top: 7px;
}

.menu-drawer .header_menu_button a {
  color: #FFF;
}

a:hover {
  opacity: 0.6;
  transition: all 0.8s ease;
}

.cta-box {
  background-color: #faf1dc;
  color: var(--cocoon-text-color);
}

.cta-thumb {
  background-color: #FFF;
}

.cta-thumb img {
  max-height: 180px;
}

#appeal {
  height: calc(100vw * calc(350 / 1200));
  max-height: 350px;
}

#header-container {
  margin: 10px 0;
}

#content-top-in {
  text-align: center;
}

#content-top-in .is_sp {
  display: none;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1024px以上*/
@media screen and (min-width: 1024px){
  .header_menu_button {
    padding-left: 8px;
  }
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
  #navi .navi-in > .menu-mobile {
    gap: 8px;
  }

  #navi .navi-in > .menu-mobile li {
    width: 156px;
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  #header-container {
    margin: 0;
  }
  #content-top-in .is_pc {
    display: none;
  }
  #content-top-in .is_sp {
    display: block;
  }
  .content-top {
    margin: 0;
    padding: 0 15px;
  }
  #media_image-3 {
    margin-bottom: 0;
  }
  #media_image-4 {
    margin-bottom: 0;
  }
}


/*600px以下*/
@media screen and (max-width: 600px){
  /*必要ならばここにコードを書く*/
  .site-name-text-link {
    padding: 0;
  }
  .header-container-in.hlt-top-menu .logo-header img {
    max-height: unset;
  }
}

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