@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 .navi-in > ul li{
	height: 60px;
	line-height: 60px;
}
/*グローバルメニュー 文字の大きさを変更*/
#navi .navi-in > .menu-header .item-label{
	font-size: 20px;
}
/*マウスオーバー時のメニューの色を変更*/
#navi .navi-in a:hover{
	color: #000000!important;
	background: #ffffff;
	transition: all 0.5s ease;
}
/*グローバルメニューをグラデーション化*/
#navi.navi.cf{
	background: linear-gradient(#ddcaa6,#f8f4e6);
}
/*サブメニューの色を変更*/
#navi .navi-in > .menu-header .sub-menu{
	background: #f7eccf;
}
/*サブメニューをグラデーション化*/
#navi .navi-in > .menu-header .sub-menu{
	background: #ffffff;
}

#navi .navi-in > .menu-header .sub-menu a{
	background: linear-gradient(#f8f4e6,#f7eccf);
}

#navi .navi-in > ul .sub-menu a:hover{
	opacity: 0.8 ;
}
/*グローバルメニューをグラデーション化*/
#navi.navi.cf{
	background: linear-gradient(#ddcaa6,#f8f4e6);
}

/*サブメニューの背景をグレーに*/
#navi .navi-in > .menu-header .sub-menu{
	background: #d89a0a;
}

/*1番左と2番目の仕切り線*/
#navi .navi-in > ul li{
	border-right: 3px solid #ffffff;
	border-left: 3px solid #ffffff;
}

/*左から3番目以降の仕切り線*/
#navi .navi-in > ul li + li{
	border-right: 3px solid #ffffff;
	border-left: none;
}

/*サブメニューの仕切り線は無し*/
#navi .navi-in > ul ul li{
	border-right: none;
	border-left: none;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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

 /* 通知エリアの流れるテキスト */
 .notice-area {
  overflow: hidden; /* はみ出た部分を隠す 
*/
  white-space: nowrap; /* 折り返しなしで1
行表示 */
 }
 /* 通知メッセージのスタイル */
 .notice-area-message {
  display: inline-block;
  padding-left: 100%; /* 初期位置を右端に 
*/
  animation: slideMessage 12s linear 
infinite;
 }
 /* スライドアニメーションの定義 */
 @keyframes slideMessage {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
 }
 /* PCの速度調整 */
 @media screen and (min-width: 1024px) 
{
  .notice-area-message {
    animation-duration: 20s;
  }
 }