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

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

/* https://stackoverflow.com/questions/29299574/responsive-size-font-awesome-icons */
.fbo {
	font-size: 7.8vw;
	color: #1e50a2;
	text-shadow: 5px 5px 0px rgba(0, 0, 0, .25);
}

.fh {
	font-size: 7.8vw;
	color: #954e2a;
	text-shadow: 5px 5px 0px rgba(0, 0, 0, .25);
}

.fcb {
	font-size: 7.8vw;
	color: #8bc34a;
	text-shadow: 5px 5px 0px rgba(0, 0, 0, .25);
}

.fu {
	font-size: 7.8vw;
	color: #e95295;
	text-shadow: 5px 5px 0px rgba(0, 0, 0, .25);
}

/* https://stackoverflow.com/questions/47235256/bootstrap-4-change-the-carousel-indicators-into-dots?rq=1 */
.carousel-indicators,
ol {
	margin-bottom: 0px;
}

.carousel-indicators li {
	background-color: black !important;
}

div .carousel-caption {
	top: 0px;
	bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.carousel-caption h5 {
	width: 142%;
	margin-left: -21%;
	background: rgba(0, 0, 0, 0.25);
	text-shadow: 2px 2px 0px rgba(0, 0, 0, .75);
}

.eye-catch {
	margin-left: auto;
	margin-right: auto;
}

/* woocommerce */
.page-title {
	text-align: center;
}

/* H1見出しの中央寄せ */
.entry-title {
	text-align: center;
}

/* 投稿日・更新日の非表示 */
/*.post-23 .date-tags {
	display: none;
}*/

.page .date-tags {
	display: none;
}

.top-service-content {
	max-height: 200px;
	padding-left: 10px;
	padding-right: 10px;
}

.white {
	color: #ffffff;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {

	/*必要ならばここにコードを書く*/
	#wp-live-chat-by-3CX {
		bottom: 20px;
	}
}

/*834px以下*/
@media screen and (max-width: 834px) {

	/*必要ならばここにコードを書く*/
	#wp-live-chat-by-3CX {
		bottom: 70px;
	}
}

/*480px以下*/
@media screen and (max-width: 480px) {

	/*必要ならばここにコードを書く*/
	#wp-live-chat-by-3CX {
		bottom: 70px;
	}

	.fbo {
		font-size: 27.8vw;
	}

	.fh {
		font-size: 27.8vw;
	}

	.fcb {
		font-size: 27.8vw;
	}

	.fu {
		font-size: 27.8vw;
	}
}

/************************************
** カルーセルの表示設定
************************************/
.carousel {
	opacity: 1;
	transition: unset;
}

/************************************
** VK PR Blocksの縦並び表示を横並び表示に修正する
************************************/
/* Bootstrap風の row を再現 */
.veu_prBlocks.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

/* Bootstrap風の col-sm-3 を再現（横幅：25%） */
.veu_prBlocks .col-sm-3 {
  flex: 0 0 25%;
  max-width: 25%;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}


/************************************
** Cocoon ＋ VK Blocksのヘッダーの表示くずれを解消
** https://vws.vektor-inc.co.jp/forums/topic/vk-blocks%E3%82%92%E6%9C%89%E5%8A%B9%E5%8C%96%E3%81%99%E3%82%8B%E3%81%A8cocoon%E3%81%AE%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E5%B9%85%E3%81%8C%E5%A4%89%E3%82%8F%E3%81%A3%E3%81%A6%E3%83%AC%E3%82%A4
************************************/
.container.cf {
    max-width: unset;
}

/* モバイル固定フッターの各ボタンの配色 */
/* Q&A（1番目） */
.mobile-footer-menu-buttons li:nth-child(1) {
  background-color: #37474F !important;
}
.mobile-footer-menu-buttons li:nth-child(1) .menu-button-in {
  background-color: #37474F;
}
.mobile-footer-menu-buttons li:nth-child(1) .custom-menu-icon .fas {
  color: #ffffff;
}

/* LINE公式（2番目） */
.mobile-footer-menu-buttons li:nth-child(2) {
  background-color: #00C300;
}
.mobile-footer-menu-buttons li:nth-child(2) .menu-button-in {
  background-color: #00C300;
}
.mobile-footer-menu-buttons li:nth-child(2) .custom-menu-icon .fab {
  color: #ffffff;
}

/* MAIL（3番目） */
.mobile-footer-menu-buttons li:nth-child(3) {
  background-color: #0288D1;
}
.mobile-footer-menu-buttons li:nth-child(3) .menu-button-in {
  background-color: #0288D1;
}
.mobile-footer-menu-buttons li:nth-child(3) .custom-menu-icon .fas {
  color: #ffffff;
}

/* TEL（4番目） */
.mobile-footer-menu-buttons li:nth-child(4) {
  background-color: #F57C00;
}
.mobile-footer-menu-buttons li:nth-child(4) .menu-button-in {
  background-color: #F57C00;
}
.mobile-footer-menu-buttons li:nth-child(4) .custom-menu-icon .fas {
  color: #ffffff;
}

/* TOP（5番目） */
.mobile-footer-menu-buttons li:nth-child(5) {
  background-color: #BDBDBD;
}
.mobile-footer-menu-buttons li:nth-child(5) .menu-button-in {
  background-color: #BDBDBD;
  border-radius: 50px;
}
.mobile-footer-menu-buttons li:nth-child(5) .custom-menu-icon .fas {
  color: #424242;
}