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

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



/* ボタンを縦方向に中央揃え */
.menu-sanzyo-button {
  display: flex !important;
  align-items: center !important;
  height: 100%;
}

.menu-sanzyo-button > a {
  padding: 6px 16px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  height: auto !important;
  display: inline-block;
  background-color: #f7931e !important; /* オレンジ色 */
  color: #fff !important;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

.menu-sanzyo-button > a:hover {
  background-color: #e67e00;
}


/* アピールエリアタイトル文字の色とサイズ、影 */
.appeal-title {
	font-size: 24px;
	color: #fff;
}

/* アピールエリアメッセージ文字の色とサイズ、影 */
.appeal-message {
	font-size:20px;color: #fff;
	text-shadow: 3px 3px 2px #000000;
}
/* アピールエリアコンテンツ背景色 */
.appeal-content {  background-color: rgba(80, 80, 80, 0.00);}

/************************************
** ■日付のカスタマイズ
************************************/
.date-tags{
  line-height: 1.4; /*行間設定*/
  color: #666; /*文字色*/
}
.post-date, .post-update{
  font-size: 14px; /*フォントサイズ*/
  padding-right: 4px; /*右余白*/
  display: inline; /*横並びで縦中央揃え*/
}
.post-date::before{ /*アイコンの変更*/
  font-family: FontAwesome;
  content: "\f017"; /*fa-uploadアイコン*/
  padding-right: 4px; /*右余白*/
}
.post-update::before{ /*アイコンの変更*/
  font-family: FontAwesome;
  content: "\f148"; /*fa-level-upアイコン*/
  padding-right: 4px; /*右余白*/
}

/************************************
** 記事一覧で日付を出す
************************************/
.new-entry-card-date {
  display: block;
}

/*更新日を非表示にする*/
.widget-entry-card-update-date{
	display: none;
}
/************************************
** ヘッダメニューを左に移動
************************************/
.hlt-top-menu .navi {
  margin-right: 40px;
}

/************************************
**フォームの幅調整
************************************/

.wpcf7 input[name="Company-name"],input[name="department"],input[name="website"],input[name="your-name"],input[name="kana"],input[name="direction"],input[name="hiduke"],input[name="rireki"],input[name="jyokyo"]  {
	width: 50%;
}

.wpcf7 input[type="tel"] {
width: 50%!important
}

.wpcf7 input[type="date"] {
width: 50%!important
}

.wpcf7 input[type="email"] {
width: 50%!important
}
.wpcf7 input[type="submit"]{
	width: 20%;
}
.wpcf7 input[name="number-app"] { /* 口数入力欄 */
	width: 15%;
}

.btn_send {
    text-align: center;
}
/************************************
**カラムの間消し
************************************/
.wp-block-columns{
  gap: 0;
}
/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:#90C31F;/*矢印色変更はこちら*/
}

.navi-menu-content{
	left: auto;
	right: 0;

	transform: translateX(101%);
}

ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
font-size:1.3em;
background-color:#ffffff;
color:#545454;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#f7f7f7;
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .9em;
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#7b7b7b;
margin:0 .5em 0 1em;
}

/************************************
****　モバイル表示　ヘッダーメニュー・検索アイコン
************************************/

.mobile-menu-buttons{
height:50px;
box-shadow: none;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fas.fa-search::before{
color:#0084ff;/*検索マーク色変更はこちら*/
margin-left:1em;
}
span.fas.fa-bars::before{
color:#0084ff;/*ハンバーガーメニュー色変更はこちら*/
margin-right:0em;
}
.navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{
display:none;
}

/************************************
****　ヘッダロゴ位置調整
************************************/

img.site-logo-image{
		width: 200px;
	margin-top: 10px;
	margin-left: 30px;
	margin-bottom: 10px;
}
/** モバイルヘッダーロゴが中央になっていたので左に直した 2024-04-26**/


.mobile-menu-buttons .menu-icon,
.menu-close-button{
	color:#0084ff;
}
/************************************
****　googlefonts設定
************************************/

.biz-udgothic-regular {
  font-family: "BIZ UDGothic", sans-serif;
  font-weight: 400;

  font-style: normal;
}
body {
	font-family: 'BIZ UDGothic', sans-serif;
}

.mobile-menu-buttons .menu-button.logo-menu-button {
			
justify-content: start;
	
}

/************************************
** ■Fadein
************************************/

.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition-property: transform, opacity;
	transition-duration: 1.5s;
	transition-delay: 0s;
}

.fadein.is-active {
	opacity: 1;
	transform: translateY(0);
}

/************************************
** ■リンクの色変更
************************************/

.entry-content a:hover { color: #0084ff; }
.toc-content a:hover { color: #0084ff; }

/************************************
** ■コンテンツ領域の上下間調整
************************************/
.content { 
margin-top: 0; 
}
.header {
margin-bottom: 0;
}

.content {
margin-top: 0;
margin-bottom: 0;
}

.main {
margin-top: 0;
margin-bottom: 0;
}

.article-footer.entry-footer {
	display: none;
}

#main {
	padding-top: 0;
	padding-bottom: 0;
}

.entry-content,
#pl-36 {
	margin-top: 0;
	margin-bottom: 0;
}

#footer {
	margin-top: 0;
}

/* 見出しのデザインリセット */

/* H2 */
.entry-content h2{
color: #ffffff;/*文字色*/
border:none;
background: #0084ff;/*背景色*/
padding: 5px 20px 8px;/*文字まわり（上下左右）の余白*/
}

/* H3 */
.entry-content h3{
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #0084ff;/*左線*/
}

/* H4 */
.entry-content h4{
color: #333333;/*文字色*/
border:none;
background:none;
padding: 10px;
}

/* H5 */
.entry-content h5{
border:none;
background:none;
padding: 0;
}

/* H6 */
.entry-content h6{
border:none;
background:none;
padding: 0;
}

/*******************************
* 固定ページ記事タイトル非表示
********************************/
.type-page h1,
.type-page 
.post-meta{
  display:none;
}

/*******************************
* リストのカスタマイズ
********************************/

.list-1{
   counter-reset:number; 
   list-style-type: none; 
   padding: 2.8em;
   margin; 0;
}
.list-1 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 0;
}
.list-1 li:before {
  position: absolute;
  top: 0.5em;
  left: 0;/*丸数字の位置*/
  content: counter(number);
  counter-increment: number;
  width: 15px;  height: 15px;
  background-color: #0084ff;
  color: #fff; /* 文字色 */
  line-height: 16px;
  margin-left: -25px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 50%;
}

.list-2{
   counter-reset:number; 
   list-style-type: none; 
   padding: 2.8em;
   margin: 0;

}
.list-2 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 1.8em;
}
.list-2 li:before {
  position: absolute;
  top: 0.5em;
  left: 0;/*丸数字の位置*/

  content: counter(number);
  counter-increment: number;
  width: 15px;  height: 15px;
  background-color: #0084ff;
  color: #fff; /* 文字色 */
  line-height: 16px;
  margin-left: -25px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 0%;
}

/*1023px以下でロゴを消す*/
@media screen and (max-width: 1023px){
	img.site-logo-image{
		width: 180px;
	margin-top: 5px;
	margin-left: 15px;
	margin-bottom: 5px;
	}
}

/*1023px以下でモバイル用のロゴ表示
@media screen and (max-width: 1023px){
	.logo-menu-button.menu-button{
		background-image: url(http://npo-cns.com/wp-content/uploads/2024/06/980835ffed0b6027944c9941f542bbd5.png);
		background-size: 80px;
		background-position: center;
		background-repeat: no-repeat;
}
}*/
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*-----記事一覧3列横並び-----*/

.widget-entry-cards.card-large-image .a-wrap {
width:32%;  /*PCで3列*/
display: inline-flex;
text-align: left; /*タイトルを左寄せ*/
}


@media screen and (max-width: 834px) {
.widget-entry-cards.card-large-image .a-wrap {
width:49%;  /*タブレットで2列*/
display: inline-flex;
}
}

@media screen and (max-width: 480px) {
.widget-entry-cards.card-large-image .a-wrap {
width:100%;  /*スマホで1列*/	
}

}