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

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

main#main.main {
	padding: 0px 10px;
}
/************************************
** アイキャッチ画像を全幅表示する
************************************/

/*枠組み*/
.eye-catch-wrap {
	margin-left: -29px; /*左の余白*/
	margin-right: -29px; /*右の余白*/
	margin-bottom: -29px; /*右の余白*/
}

/*横幅 834px 以下に適用される*/
@media screen and (max-width: 834px){
	/*枠組み*/
	.eye-catch-wrap {
		margin-left: -10px; /*左の余白*/
		margin-right: -10px; /*右の余白*/
		margin-bottom: -29px; /*右の余白*/
	}
}

#navi .navi-in > .menu-header .item-label{
	font-size: 14px;
}


/* 見出し */

h1 {
  color: #494949;/*文字色*/
	font-size: 2em;
}

.article h2 {
border-bottom: double 7px #a5c9c1; /*二重線・太さ・色*/
color: #494949;/*文字色*/
font-size:1.2em;
padding: 0.5em;
margin-bottom: 20px;
}

.article h3 {
font-size:1em;
padding:0.5em 1em;/*上下 左右の余白*/
color: #494949;/*文字色*/
border-left:none;
border-top:solid 2px #bae2ca;
border-bottom:solid 2px #bae2ca;
border-right:none;
}

.article h4 {
	font-size:1em;
	line-height:2em;
	text-indent: 1em;
  position: relative;
padding:0.25em 0;/*上下 左右の余白*/
}
.article h4:after {
  content: "";
  display: block;
  height: 3px;
  background: -webkit-linear-gradient(to right, rgb(234, 105, 29), #ffb2b2);
  background: linear-gradient(to right, rgb(234, 105, 29), #ffb2b2);
}

/* フォント */
.red {
color: red;
}
.m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-1p-bold {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.cabin {
  font-family: "Cabin", sans-serif;
}
.indent {
  text-indent: 2em;
}
.indent1 {
  text-indent: 1em;
}
.change-area {
    background: #bae2ca;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
　height: 30px;
}
.change-area-pink {
	color: #fff;
    background: #EF5A6F;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
　height: 20px;
line-height:20px;
}
.change-area-bluegray {
	color: #fff;
    background: #666f85;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
　height: 20px;
line-height:20px;
}

.tagline {
background:#bae2ca;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
padding-right: calc(50vw - 50%);
padding-left: calc(50vw - 50%);
height: 30px;
line-height:30px;
}

#navi .navi-in>ul>li>a {
padding: 0 1em;
}


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

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

.f-text {
	font-size: 0.8em;
	margin: auto;
}
.footer-mobile {
	padding: 0 16px;
}
 /*「ウィジット-フッター中央」のロゴ画像をセンター揃えに*/
.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 i {
	margin-right: 0.2em;
}
/*フッターメニューにマウスホバーで色変更*/
#navi-footer .navi-footer-in a:hover {
background-color: #d9fae6;
}

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

.footer-widgets-mobile {
  text-align: center;
}
/*******************************************/


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

/************************************
** パンくずリストの記事タイトルアイコンを非表示（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;
}

/* ブログ */

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


/* 問い合せフォーム送信ボタン */
.wpcf7 .submit-btn {
background:#bae2ca;
margin-bottom: 2em;
}
.wpcf7 .submit-btn:hover {
background:#EF5A6F;
color: #fff;
}
.wq-Button .wq-type-normal .wq-for-back {
background:#bae2ca;
}
/* ボタンにホバーで押し下げ */
.contact-btn :hover {
transform: translateY(-3px);
}

/* マージン調整 */
.m_10 {
	margin: 10px;
}

.m_top_5 {
  margin-top: 5px;
}
.m_top_u5 {
  margin-top: -5px;
}
.m_top_10 {
  margin-top: 10px;
}
.m_top_u10 {
  margin-top: -10px;
}
.m_top_15 {
	margin-top: 15px;
}

.m_top_30 {
	margin-top: 30px}
}
.m_bottom_5 {
  margin-bottom: 5px;
}
.m_bottom_10 {
  margin-bottom: 10px;
}
.m_bottom_u10 {
  margin-bottom: -10px;
}
.m_bottom_20 {
  margin-bottom: 20px;
}
.m_bottom_30 {
  margin-bottom: 30px;
}

.m_left_20 {
	margin-left: 20px;
}
.m_left_u20 {
	margin-left: -20px;
}
.m_left_u30 {
	margin-left: -30px;
}
.m_left_u10 {
	margin-left: -10px;
}

.jyouge {
vertical-align: top;
}
.jyouge-m {
vertical-align: middle;
}
.jyouge-c {
  height:30px;
  line-height:30px;
}

/* ヤフーロゴ掲出 */
.yshop {
display: flex;
flex-flow: row wrap;
justify-content:space-around;
	align-items: center;
	font-size: 0.8em;
}
.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;
}
/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
/* ページ下の初回20％引ふよふよ */
#footer {
	padding-bottom: 45px;
}

.target {
  animation: floating-y 2.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(20%);
  }
}

.bottom-float {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
z-index: 99999;
padding: 8px;
background: #EF5A6F;
border: 4px double #CACFEB;
text-align: center;
color: #ffffff;
}

.bottom-float a:link { color: #ffffff; }
.bottom-float a:visited { color: #ffffff; }
.bottom-float a:hover { color: #ffffff; }
.bottom-float a:active { color: #ffffff; }

.bottom-float-contact {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
z-index: 99999;
padding: 8px;
background: #e60033;
border: 4px double #CACFEB;
text-align: center;
color: #ffffff;
}
.bottom-float-contact a:link { color: #ffffff; }
.bottom-float-contact a:visited { color: #ffffff; }
.bottom-float-contact a:hover { color: #ffffff; }
.bottom-float-contact a:active { color: #ffffff; }

/*トップに戻るボタンの位置変更*/
.go-to-top {
  right: 10px; /*右から10px*/
  bottom: 55px; /*下から55px*/
}
.go-to-top-button {
  opacity:0.5; /*透明度*/
}

/*サブメニューの色を変更*/
#navi .navi-in > .menu-header .sub-menu{
background: #e6ffef;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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;
	}

		/*　アピールエリアの文字の装飾　*/
.appeal-message {
	 font-size: 0.8em;
}
	/*ボタンの文字サイズを小さくする*/
	.wp-block-button{
		font-size: 0.8em;
	}

}
@media(min-width:481px){
    .select-mobile{
        display: none !important;
    }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.select-pc {display: none;}
	.point img {
		max-width: 200px;
	}

	.optionb td {
		width: 25%;
	}
.fukidashi {
margin-top: -300px;
}
	/*　アピールエリアの文字の装飾　*/
.appeal-message {
	 font-size: 0.7em;
}
	.about-text {
		text-align: left;
	}
}

/*常時表示、追従バナーボタン*/
.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;
}

/*会社概要のクラス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;
}
/*　アピールエリアの文字の装飾　*/
.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;
}