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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.logo {
  text-align: left;
}
.header{
	
}
/* 
* ヘッダーロゴ(テキスト)の反対側に問い合わせボタン表示
*/
div#header-in {
  /* ヘッダーロゴ(テキスト)と問い合わせボタンを横並び */
  flex-direction: row;
}
div#header-sp{
	flex-direction:column;
}

.header-in .logo-header {
  /* ヘッダーロゴ(テキスト)と問い合わせボタンの位置を両端にする */
  margin-right: auto;
}

.header-contact {
  /* 問い合わせボタンにパディングを追加（見た目を整える） */
  padding: 10px 0;
}
.header-sp{
	/* スマホ用 */
	display:none;
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.header-contact{
		display:none;
	}
	 /* スマホ用ボタンを表示し、縦に並べる */
  .header-sp {
    display: flex; /* フレックスボックスを使う */
    flex-direction: column; /* 要素を縦に並べる */
    align-items: center; /* 要素を中央に揃える */
    justify-content: center; /* 必要に応じて調整 */
    padding: 10px 0; /* 余白を追加（オプション） */
  }
	.navi{
		height:0!important;
	}

}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.header-contact{
		display:none;
	}
 /* スマホ用ボタンを表示し、縦に並べる */
  .header-sp {
    display: flex; /* フレックスボックスを使う */
    flex-direction: column; /* 要素を縦に並べる */
    align-items: center; /* 要素を中央に揃える */
    justify-content: center; /* 必要に応じて調整 */
    padding: 10px 0; /* 余白を追加（オプション） */
  }
.navi{
		height:0!important;
	}

}
/*グローバルメニュー メニュー項目の左右の余白*/
#navi .navi-in>ul>li>a {
	font-size:14px;
	padding-left:1.4em;
	padding-right:1.4em;
	padding-bottom:1.4em;
	padding-top:1.4em;

}

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

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

/*メニューの色を薄くつける*/
/*#navi .navi-in>ul>li {
	border-color:#4D4D4D;
	background-color:#EBEBEB;
	height:80px;
}*/

#navi .navi-in a:before{
	transform: scale(1);/*マウスオーバー後、線を100%出す*/
	position: absolute;/*線の位置を絶対配置に*/
	content: "";/*文字はなし*/
	left: 0px;/*線の位置*/
	bottom: 0;/*線の位置*/
	height: 3px;/*線の高さ*/
	width: 100%;/*幅いっぱいに線を引く*/
	background: #3eb370;/*線の色*/
}

/* メニューの区切り線 */
#navi .navi-in > ul > li{
	border-right: 2.5px solid #ffffff;
}

#navi .navi-in > ul > li:last-child{
	border-right-width: 0;
}

.navi-in > ul > .menu-item-has-children > a::after{
	right: 10px;
}

.navi{
	height:60px;
}

/*.wrap{
	width:1556px;
}*/

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