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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*見出し初期化*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
padding: 0;
margin: 0;
background:none;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}
/*不要な部分を非表示*/
.article-header, .article-footer, .under-entry-content, .logo-footer .breadcrumb{
 display: none !important;
}

/*全体の背景色変更*/
#content {
	background-color: #fff !important;
	margin: 0 !important;
}

/*mainを中心に寄せる*/
#main {
  margin: 0 auto; 
}

/*目次のデザイン調整*/
#toc {
	width: 50%;
}

/*見出しデザイン*/
.article h2 {
  margin-bottom: 15px;
  padding: 5px 0 !important;
  border-bottom: 5px double #2589d0 !important;
  color: #696969 !important;
}

/*グローバルメニューのデザイン*/
.global-menu {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  gap: 20px; /* アイテム間の隙間（オプション） */
}

.global-menu a {
  color: #696969;
  font-weight: bold;
  text-decoration: none;
}

.global-menu li a:hover {
  opacity: 0.8;
}

/*希望報酬文字間隔調整*/
.work-contents {
	margin: 0 !important;
}
/*ボタンのホバーエフェクト設定*/
.is-style-fill:hover{
  opacity: 0.8; /* 透明度を変える */
  transition: all 0.3s ease; /* 0.3秒かけて変化させる */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 影をつける */
}
.is-style-fill:hover a{
   color: #ffffff !important; 
}
/*footerのmargin調整*/
#footer {
	margin-top: 0;
}

/*問い合わせページデザイン*/
.wpcf7-submit {
	display: block !important;
	font-size: 20px;
	padding: 5px !important;
	background-color: #FF7A00 !important;
	color: #fff !important;
}

.wpcf7-submit:hover {
	opacity: 0.7;
	transition: all 0.3s ease; /* 0.3秒かけて変化させる */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 影をつける */
}

.wpcf7-form-control {
	border-radius: 10px !important;
}


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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
 #content {
	background-color: #fff !important;
	margin: 0 !important;
}

/*mainを中心に寄せる*/
#main {
  margin: 0 auto; 
}
	.global-menu {
		padding-left: 0 !important;
	}
}