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

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

/*************** ヘッダー *********************/

/* サブメニュー */
.sub-menu .menu-item .item-label{
  font-size: 14px;
}

.navi-in > ul .sub-menu {
    display: block;
    z-index: -1;
}
.navi-in > ul li > ul {
    opacity: 0.0;
    transition: 0.47s ease-in-out;
}
.navi-in > ul li:hover > ul {
    opacity: 1.0;
    transition: 0.31s ease-in;
    z-index: 999;
}

/*グローバルメニューの高さを変更*/
#navi .navi-in > ul li{
  height: 50px;
  line-height: 50px;
}

/*グローバルナビメニュー メニュー項目の間隔*/
#navi .navi-in>ul>li>a{
  padding: 0 2.0em;
}

/*ホバー時メニューの色が薄くなるのをやめる*/
#navi .navi-in a:hover {
  background-color: rgb(255 255 255 / 0);
}

/*ホバー時にメニューにアンダーラインを出す*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 0;/*線の位置*/
height: 2px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #666666;/*線の色*/
transform: scale(0,1);/*ホバー前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

/*選択中のメニュー項目にアンダーライン*/
.current-menu-item:not(:first-child):after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 0px;/*線の位置*/
height: 2px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #666666;/*線の色*/
}

/*アドセンス広告上の余白*/
.ad-area{
	margin-top: 2.5em;
}

/*************** フッター *********************/
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.navi-footer-in a:hover {
    background-color: #3c5b60;
    transition: all 0.3s ease-in-out;
}


/*************** フッター固定化 *********************/
/* フッターをウィンドウ最下部に固定する */
html, body {
  height: 100%; /* HTMLとBODYの高さを100%に設定 */
  margin: 0;
}

#content {
  min-height: calc(100vh - 100px); /* フッターの高さを引いた値で高さを設定 */
  display: flex;
  flex-direction: column;
}

#footer {
  margin-top: auto; /* 自動で最下部に配置 */
}




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

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

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