@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;
}

/* 固定ページの設定 */
/* 各カラム（wp-block-column）の高さを揃える */
.wp-block-columns {
  align-items: stretch; /* これで各カラムの高さを自動で揃える */
}

/* 各カラムの内部でボタンを最下部に固定 */
.wp-block-column {
  display: flex;
  flex-direction: column;
}

/* ボタンを下に押し下げる */
.wp-block-column .wp-block-cocoon-blocks-button-1 {
  margin-top: auto; /* 上の余白を自動で調整して、ボタンを下に配置 */
}

/* ボタンの角を丸くする */
.wp-block-columns .wp-block-cocoon-blocks-button-1 .btn,
.wp-block-media-text .wp-block-cocoon-blocks-button-1 .btn {
  border-radius: 7px;
}

/* 説明のフォントサイズの変更 */
/*.wp-block-column p {
  margin-bottom: .5em;
  font-size: 15px;
  line-height: 1.6em;
}*/

/* 画像を丸くする（日課表） */
/* 200px x 200px の丸抜き画像用クラス */
.circle-image-200 img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.circle-image-300 img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* メディアと文章ブロックの垂直方向中央揃え */
.wp-block-media-text.is-stacked-on-mobile.is-vertically-aligned-top.circle-image-300 .wp-block-media-text__media {
  /* ここに限定したスタイルを記述 */
  margin-top: auto;
  margin-bottom: auto;
  padding-bottom:30px
}


/* Font Awesome を使ったリストアイコンのカスタム */
ul.another-list {
  list-style: none;
  padding-left: 1.2em;
  margin: 0;
}

li.fa-list {
  position: relative;
  padding-left: 1.2em;
}

li.fa-list::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f101"; /* fa-angle-double-right */
  position: absolute;
  left: 0;
  color: #0073aa;
}

/* 「ここをクリック！」の設定 */
.summary-hint {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5em;
  font-size: 0.9em;
  color: #444;
}

.summary-hint .icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 220.8C0 266.416 37.765 304 83.2 304h35.647a93.148 93.148 0 0 0 7.929 22.064c-2.507 22.006 3.503 44.978 15.985 62.791C143.9 441.342 180.159 480 242.701 480H264c60.063 0 98.512-40 127.2-40h2.679c5.747 4.952 13.536 8 22.12 8h64c17.673 0 32-12.894 32-28.8V188.8c0-15.906-14.327-28.8-32-28.8h-64c-8.584 0-16.373 3.048-22.12 8H391.2c-6.964 0-14.862-6.193-30.183-23.668l-.129-.148-.131-.146c-8.856-9.937-18.116-20.841-25.851-33.253C316.202 80.537 304.514 32 259.2 32c-56.928 0-92 35.286-92 83.2 0 8.026.814 15.489 2.176 22.4H83.2C38.101 137.6 0 175.701 0 220.8zm48 0c0-18.7 16.775-35.2 35.2-35.2h158.4c0-17.325-26.4-35.2-26.4-70.4 0-26.4 20.625-35.2 44-35.2 8.794 0 20.445 32.712 34.926 56.1 9.074 14.575 19.524 27.225 30.799 39.875 16.109 18.374 33.836 36.633 59.075 39.596v176.752C341.21 396.087 309.491 432 264 432h-21.299c-40.524 0-57.124-22.197-50.601-61.325-14.612-8.001-24.151-33.979-12.925-53.625-19.365-18.225-17.787-46.381-4.95-61.05H83.2C64.225 256 48 239.775 48 220.8zM448 360c13.255 0 24 10.745 24 24s-10.745 24-24 24-24-10.745-24-24 10.745-24 24-24z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0.3em;
}