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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 
/* 
/* ========================================
   Cocoon ヘッダー全体設定
======================================== */

.logo,
.logo-header,
.tagline {
  text-align: left !important;
}

.header-container,
.header-container-in,
.header,
.header-in,
.logo-header,
#navi,
.navi,
.navi-in {
  overflow: visible !important;
}


/* ========================================
   PC表示
======================================== */

@media screen and (min-width: 835px) {

  /* ロゴとメニューを横並びにする */
  #header-container-in,
  .header-container-in {
    display: flex !important;
    align-items: flex-end !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ロゴ側 */
  #header,
  .header {
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 300px;
    margin: 0 !important;
    padding: 0 0 5px 30px !important;
    z-index: 20 !important;
  }

  #header-in,
  .header-in {
    width: auto !important;
    max-width: none !important;
    min-height: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .logo-header,
  .logo {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* ロゴのリンクを有効にする */
  .logo a,
  .logo-header a {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    pointer-events: auto !important;
    z-index: 21 !important;
  }

  /* ロゴ画像 */
  .logo img,
  .site-logo-image {
    display: block !important;
    width: auto !important;

    height: auto !important;
    max-height: 70px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* キャッチフレーズ */
  .tagline {
    width: auto !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    white-space: nowrap;
  }


  /* ========================================
     メニューをロゴの右側へ右寄せ
  ======================================== */

  #navi,
  .navi {
    position: relative !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 30px 5px 20px !important;
    background: transparent !important;
    z-index: 30 !important;
    pointer-events: auto !important;
  }

  #navi .navi-in,
  .navi .navi-in {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #navi .navi-in > ul,
  .navi .navi-in > ul {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    column-gap: 24px !important;
    overflow: visible !important;
  }

  #navi .navi-in > ul > li,
  .navi .navi-in > ul > li {
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  #navi .navi-in > ul > li > a,
  .navi .navi-in > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    color: #333333 !important;
    background-color: transparent !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    border-radius: 4px;
  }


  /* ========================================
     マウスオン時の色
  ======================================== */

  #navi .navi-in > ul > li:hover > a,
  #navi .navi-in > ul > li > a:hover,
  #navi .navi-in > ul > li:focus-within > a,
  .navi .navi-in > ul > li:hover > a,
  .navi .navi-in > ul > li > a:hover,
  .navi .navi-in > ul > li:focus-within > a {
    color: #ffffff !important;
    background-color: #a0d8ef !important;
  }

  /* メニュー内部の文字と矢印 */
  #navi .navi-in > ul > li:hover > a *,
  #navi .navi-in > ul > li > a:hover *,
  #navi .navi-in > ul > li:focus-within > a *,
  .navi .navi-in > ul > li:hover > a *,
  .navi .navi-in > ul > li > a:hover *,
  .navi .navi-in > ul > li:focus-within > a * {
    color: #ffffff !important;
    fill: #ffffff !important;
  }


  /* ========================================
     下向き矢印
  ======================================== */

  #navi .menu-item-has-children > a,
  .navi .menu-item-has-children > a {
    column-gap: 10px !important;
    padding-right: 10px !important;
  }

  #navi .sub-menu-icon,
  .navi .sub-menu-icon,
  #navi .menu-item-has-children > a .fa-angle-down,
  #navi .menu-item-has-children > a .fa-caret-down,
  #navi .menu-item-has-children > a .svg-inline--fa,
  .navi .menu-item-has-children > a .fa-angle-down,
  .navi .menu-item-has-children > a .fa-caret-down,
  .navi .menu-item-has-children > a .svg-inline--fa {
    position: static !important;
    display: inline-flex !important;
    margin: 0 0 0 8px !important;
    transform: none !important;
  }

  #navi .menu-item-has-children > a::after,
  .navi .menu-item-has-children > a::after {
    position: static !important;
    margin-left: 8px !important;
    transform: none !important;
  }


  /* ========================================
     子メニュー
  ======================================== */

  #navi .sub-menu,
  .navi .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 220px !important;
    min-width: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #ffffff !important;
    z-index: 1000 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  #navi .sub-menu li,
  .navi .sub-menu li {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #navi .sub-menu li > a,
  .navi .sub-menu li > a {
    display: block !important;
    width: 100% !important;
    padding: 12px 15px !important;
    color: #333333 !important;
    background-color: #ffffff !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  /* 子メニューのマウスオン色 */
  #navi .sub-menu li:hover > a,
  #navi .sub-menu li > a:hover,
  #navi .sub-menu li:focus-within > a,
  .navi .sub-menu li:hover > a,
  .navi .sub-menu li > a:hover,
  .navi .sub-menu li:focus-within > a {
    color: #ffffff !important;
    background-color: #a0d8ef !important;
  }

  #navi .sub-menu li:hover > a *,
  #navi .sub-menu li > a:hover *,
  .navi .sub-menu li:hover > a *,
  .navi .sub-menu li > a:hover * {
    color: #ffffff !important;
    fill: #ffffff !important;
  }

  /* 孫メニュー */
  #navi .sub-menu .sub-menu,
  .navi .sub-menu .sub-menu {
    top: 0 !important;
    left: 100% !important;
  }
}

/* ========================================
   PC：親メニューの横幅を統一
======================================== */

@media screen and (min-width: 835px) {

  #navi .navi-in > ul,
  .navi .navi-in > ul {
    column-gap: 10px !important;
  }

  #navi .navi-in > ul > li,
  .navi .navi-in > ul > li {
    flex: 0 0 130px !important;
    width: 130px !important;
  }

  #navi .navi-in > ul > li > a,
  .navi .navi-in > ul > li > a {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
}


/* フッター上の余白削除 */
#footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ========================================
     コラムページ
  ======================================== */

.sidebar .widget{
  background:#fff;
  border:1px solid #d7ebf5;
  border-radius:18px;
  padding:22px;
  box-shadow:0 6px 18px rgba(59,130,196,.08);
}

.sidebar .widget-title{
  background:#a0d8ef !important;
  color:#fff !important;
  border-radius:10px;
  padding:12px 15px;
}
 


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

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

.mobile-footer-menu-buttons .menu-button,
.mobile-footer-menu-buttons .menu-button:hover,
.mobile-footer-menu-buttons .menu-button a,
.navi-menu-content,
.menu-drawer a,
.menu-drawer a:hover{
  background-color: #a0d8ef;
  color: white;
}

/* スマホのみ フッターサイトタイトル・ロゴ非表示 */
@media screen and (max-width: 834px) {

  #footer .logo-footer,
  #footer .footer-logo,
  #footer .site-name-text,
  #footer .site-name {
    display: none !important;
  }

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