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

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



/************************************
** 各固定ページのタイトルを非表示にする
************************************/
.page .entry-title {
display: none;
}


/* ヘッダーロゴ、PCでのロゴ上下余白、センター選択のみ */
/*
.logo-header {
padding: 20px 0 0 50px;
}
*/

/*ヘッダーロゴを左端に*/
/*
.logo{
	text-align:left;
}
*/

/*ヘッダーのキャッチフレーズを左端に*/
/*
.header-in .tagline {
  text-align:left;
  padding-left: 10px;
}
*/


/*グローバルメニューのフォントサイズ等変更、標準は16*/
.navi-in .menu-header .item-label{
	font-size: 13px;
}

/*グローバルメニューを左寄せ表示（2段目用）、ロゴと近すぎでマージン挿入*/
#navi .navi-in > ul {
	margin-left:40px;
	justify-content:flex-start;	
}


/*グローバルメニューの高さ2個同じ数字で、標準は60*/
#navi .navi-in > ul li{
	height: 35px;
	line-height: 35px;
}

/*グローバルメニューにマウスホバーで色変更*/
#navi .navi-in a:hover {
  background-color: #E2F2E4;
  border-radius: 5px;
  transition: all 0.1s ease-in-out;
  color: #000;
}

/*グローバルメニューの一つだけ文字色を変える*/
#menu-item-58 .item-label{
  color: #ffffff;
}

/*グローバルメニューの一つだけ背景色を変える*/
#menu-item-58 a{
  padding: 0px;
  background-color: #306C4A !important;
  border-radius: 5px;
}

/*グローバルメニューの文字隙間*/
#navi .navi-in > ul > li > a {
	padding: 0 0.3em;
}

/************** フッターメニュー関連　*************/

 /*「ウィジット-フッター中央」のロゴ画像をセンター揃えに*/
.f-logo{
	display: block;
	margin:auto;
}
/*「ウィジット-フッター中央」のロゴ画像を下のメニューに近づけるため*/
.footer-center{
	padding-bottom:0px;
}
/*フッターメニューを上のウィジットロゴ画像に近づけるため*/
.footer-bottom{
	margin-top:0px;
}

/*フッターメニューの文字隙間*/
#navi-footer .navi-footer-in > ul > li > a {
	padding: 0 0.3em;
}

/*フッターメニューにマウスホバーで色変更*/
.navi-footer-in a:hover {
    background-color: #E2F2E4;
}

/*フッターメニューの区切り線を消す*/
#navi-footer li {
  border: none;
}

/*モバイル表示でのウィジット-フッターロゴ画像をセンターにする*/
.footer-mobile img{
	display: block;
	margin:auto;
}
/*******************************************/


/*ヘッダー、フッターとメインコンテンツの隙間*/
.content {
margin-top: 0px; /*ヘッダーとコンテンツ間の縦幅*/
margin-bottom: 0px /*フッターとコンテンツ間の縦幅*/
}

/*　アピールエリアの文字の装飾　*/
.appeal-message {
	line-height: 1.8em;
	color: #000;
	 font-size: 1.2em;
	text-shadow: 1px 2px 3px #808080;
	margin-bottom: 0em;
}

/*　アピールエリア文字の背景枠*/
.appeal-content {
	padding: 15px 40px 15px 40px;
	background-color: #fff;
	opacity: 0.9;
}

/************************************
** パンくずリストの記事タイトルアイコンを非表示（Font Awesome 5）
************************************/
.breadcrumb .fa-file {
	display: none; /*非表示*/
}

/*****  パンくずリストの色変更  *****/
.breadcrumb-home{
	color: #3d3d3d;
	font-size: 14px;
}

.breadcrumb-item{
	color: #3d3d3d;
	font-size: 14px;
}

.breadcrumb-caption{
	color: #3d3d3d;
	font-size: 14px;
}


/*会社概要のクラスgaiyouにフォントを適応*/
.gaiyou{
	font-family: 'Noto Serif JP', serif;
}


/**** ボタンホバーで少し大きくする ****/

.bu-free:hover {
    transform: scale(1.05);
}
.bu-tel:hover {
    transform: scale(1.05);
}
.bu-form:hover {
    transform: scale(1.05);
}

/*ボタンの幅と影*/

.bu-free{
    /*max-width:15em;*/
	font-size: 8px;
	border-radius: 20px;
    box-shadow: 0px 7px 3px -5px rgba(0,0,0,0.3);
}
.bu-tel{
    /*max-width:16em;*/	
	border-radius: 20px;
    box-shadow: 0px 7px 3px -5px rgba(0,0,0,0.3);
}
.bu-form{
   /* max-width:14em;*/
	border-radius: 20px;
    box-shadow: 0px 7px 3px -5px rgba(0,0,0,0.3);
}

/* スマホで消されるボタンのbrをinlineに戻す */
.wp-block-button br{
    display:inline;
}
/* フリーダイヤルボタンの初期フォントサイズ調整 */
.bu-free{
	font-size: 16px;
}

/******************************************
** SNSアイコンの変更、ツイッターの鳥をXに **
** アイコン横の文字の変更はjavascript.jsで**
******************************************/

/*シェアのツイッターの鳥ロゴをXにする*/
.icon-twitter {
  width: 18px;
  height: 18px;
  background: url(https://cassettetape.aimotokagaku-fukuoka.com/wp-content/uploads/2023/09/logo-white.png) no-repeat center center/18px auto;
}

.icon-twitter:before {
  display: none;
}

/*フォローのツイッターの鳥ロゴをXにする*/
.icon-twitter-logo {
  width: 18px;
  height: 18px;
  background: url(https://cassettetape.aimotokagaku-fukuoka.com/wp-content/uploads/2023/09/logo-white.png) no-repeat center center/18px auto;
}

.icon-twitter-logo:before {
  display: none;
}

/************************************
** ページ下のシェアとフォローのボタンカラーを変更する
************************************/
/*シェアのツイッターXを黒に*/
.bc-brand-color.sns-share.ss-bottom .twitter-button{
	background-color: #000000; /*背景の色*/
	color: #fff; /*アイコン・キャプション等の色 ※「#fff」は「#ffffff」の省略形*/
}
/*シェアのクリップコピーをオレンジに*/
.bc-brand-color.sns-share.ss-bottom .copy-button{
	background-color: #F29530; /*背景の色*/
	color: #fff; /*アイコン・キャプション等の色 ※「#fff」は「#ffffff」の省略形*/
}


/*ツイッターXフォローを黒に、ブランドカラーで利用*/
.bc-brand-color.sns-follow.sf-bottom .twitter-button{
	background-color: #000000; /*背景の色*/
	color: #fff; /*アイコン・キャプション等の色 ※「#fff」は「#ffffff」の省略形*/
}

/*フォローのツイッターXを黒に、白抜き設定で利用*/
.bc-brand-color-white.sns-follow.sf-bottom .twitter-button{
	border-color: #000000;/*線の色*/
	color: #000; /*アイコン・キャプション等の色*/
}

/*シェアメッセージ"シェアする"装飾*/
.sns-share-message{
  color: #364e96;/*文字色*/
  border-top: solid 2px #364e96;/*上線*/
	padding:10px 0px;
}

/*フォローメッセージ"フォローする"装飾*/
.sns-follow-message {
  color: #364e96;/*文字色*/
  border-top: solid 2px #364e96;/*上線*/
		padding:10px 0px;
}

/*シェアボタンと下のラインが近かったので隙間*/
.sns-share {
	margin: 5px 0px;
}


/* 見出し */

h1 {
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
	padding: 10px;
}
h2 {
  /*線の種類（二重線）太さ 色*/
  border-bottom: double 5px #FFC778;
	padding: 3px;
}
h4 {
	font-size: 0.8em;
}
h5 {
	font-size: 1em;
  padding: 1em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #db95e8;/*左線（実線 太さ 色）*/
}

/* ブログ */

/* 内部ブログカードのURLを非表示 */
.internal-blogcard-site {
    display: none;
}
.blogcard-type .blogcard-label{
background-color:orange;
}

.m_top_15 {
	margin-top: 15px;
}

.m_top_30 {
	margin-top: 30px}
}
/* 問い合せフォーム送信ボタン */
.wpcf7 input[type=“submit”] {
background:#9c5e31;
margin-bottom: 1em;
}
.wpcf7 input[type=“submit”]:hover {
background:#9c4230;
}

.wpcf7 .submit-btn {
	margin-bottom: 2em;
}

/* ヤフーロゴ掲出 */
.yshop {
display: flex;
flex-flow: row wrap;
justify-content:space-around;
	align-items: center;
	font-size: 0.8em;
	margin-top: 30px;
}
.yshop img {
  vertical-align: middle;
}
.yshop p {
  vertical-align: middle;
}
.yshop a:link {
  color: #004aa3;
  text-decoration: underline;
}
.yshop a:visited {
  color: #004aa3;
}
.yshop a:hover {
  color: darkred
}

.yshop_ys {
	display:flex;
	flex-direction: column;
	align-items: center;
	padding: 0px 0px 10px;
}

.yshop_au {
	display:flex;
	flex-direction: column;
	align-items: center;
	padding: 0px 0px 10px;
}


/* マージン調整 */
.m_top_5 {
  margin-top: 5px;
}

.m_bottom_10 {
  margin-bottom: 10px;
}
.m_bottom_20 {
  margin-bottom: 20px;
}
.m_bottom_30 {
  margin-bottom: 30px;
}

.m_left_20 {
	margin-left: 20px;
}


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

}

/*960px以下*/
@media screen and (max-width: 960px){
.yshop {
display: flex;
flex-flow: column wrap;
justify-content:space-around;
	align-items: center;
	padding: 15px;
	font-size: 0.8em;
}
.yshop_au {
margin-top: 15px;
margin-bottom: 3px;
}	
}	

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.point img {
		max-width: 200px;
	}
	br {
		display: none;
	}
		/*　アピールエリアの文字の装飾　*/
.appeal-message {
	 font-size: 0.8em;
}
	/*ボタンの文字サイズを小さくする*/
	.wp-block-button{
		font-size: 0.8em;
	}

}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.point img {
		max-width: 200px;
	}
		br {
		display: none;
	}
	.optionb td {
		width: 25%;
	}
	/*　アピールエリアの文字の装飾　*/
.appeal-message {
	 font-size: 0.7em;
}


}

/*常時表示、追従バナーボタン*/
.floating-banner {
  position: fixed; /* バナーを追従させる */
  z-index: 99999; /* 他の要素の下に隠れないように */
  bottom: 150px; /* バナーの上下の位置 */
  right: 0; /* バナーの左右の位置 */
  width: 50px; /* バナーの横幅 */
}
.floating-banner__image {
  max-width: 100%; /* 画像がスマホの横幅を超えるときに100%に最適化という意味 */
  height:auto;     /* 超えないならそのままのサイズで表示 画像高さ調整*/
}
@media screen and (max-width: 990px) { /* タブレット用のブレイクポイントを指定 */
  .floating-banner {
    display: none; /* タブレットサイズ以下でPC用のバナーを非表示に */
  }
}
@media screen and (max-width: 560px) { /* スマホ用のブレイクポイントを指定 */
  .floating-banner {
    display: block;/* 消していたバナーを表示させる noneで消せる*/
    bottom: 100px; /* バナーの上下の位置 */
    width: 40px; /* スマホでのバナーの横幅 */
  }
}

.cat-link-12 {
	background-color: #ff0000;
}