@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================================
//  グローバルナビ
// ========================================================= */
/* 背景色 */
.court-box{
	background-color:#14c1fe;/*背景色*/
	color: #FFFDFB;/*文字色*/
}
.court-box .c-smallNavTitle{
	color:#FFFDFB;/*サブテキスト色*/
}

.phone-box{
	background-color:#0fd76a;/*背景色*/
	color: #FFFDFB;/*文字色*/
  	font-weight: bold;/*太文字に*/
}
.phone-box .c-smallNavTitle{
	color:#FFFDFB;/*サブテキスト色*/
}

/* =========================================================
//  無限ループするテキスト
// ========================================================= */
/*文字が横に流れる*/
/*ul*/
.flows-text {
  display: flex;
  list-style: none;
  overflow: hidden;
}
/*li*/
.flows-text li {
  color:#6d7f88;/*文字の色*/
  font-size: 50px;/*スマホの文字サイズ*/
  font-weight: bold;/*太文字に*/
  white-space: nowrap;
  animation: flows-left 70s linear infinite;/*秒数を変えて流れるスピードを変更*/
}
/*PCの時のフォントサイズ*/
@media (min-width: 600px) {
  .flows-text li {
    font-size: 70px;
  }
}
/*アニメーション*/
@keyframes flows-left {
  100% {
    transform: translateX(-100%);
  }
}

/* =========================================================
//  コピペで簡単！無限ループアニメーション
// ========================================================= */
/* 無限ループアニメーション */
@keyframes infinite-loop {
  to {
    transform: translateX(-100%);
  }
}
/* 無限ループアニメーションのメインスタイル */
.infiniteLoop {
  /* 設定項目 START */
  --item-max-width: 400px; /* 各アイテムの最大幅 */
  --item-mobile-width: 80vw; /* スマホでのアイテムの幅 */
  --duration: 12s; /* アニメーションスピード */
  --gap: 1rem; /* 各アイテム同士の間隔 */
  /* 設定項目 END */
  --play-state: running;
  --direction: normal;
  --flex-direction: row;
}
.infiniteLoop.-reverse{--direction: reverse;--flex-direction: row-reverse}.infiniteLoop:hover{--play-state: paused}.infiniteLoop>*{display:flex}.infiniteLoop>*>*>*{overflow:hidden;transform:translateX(0);flex-wrap:nowrap !important;flex-direction:var(--flex-direction, row);margin:0 !important;padding-left:var(--gap) !important;gap:var(--gap);width:calc(var(--infinite-loop_width, 100vw)*1)}.infiniteLoop>*>*>*>*{padding:0 !important}.infiniteLoop>*>*>*>*>*{max-width:var(--item-max-width, 0px);margin-inline:auto}@media(min-width: 600px){.infiniteLoop>*>*>*{animation:infinite-loop var(--duration) linear infinite both var(--play-state) var(--direction);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}}@media not all and (min-width: 600px){.infiniteLoop>*>*:nth-child(n+2){display:none}.infiniteLoop>*>*>*{-webkit-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;padding:0 calc((100vw - var(--item-mobile-width, 80vw)) / 2) !important;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}.infiniteLoop>*>*>*::-webkit-scrollbar{display:none}.infiniteLoop>*>*>*>*{flex-shrink:0;width:var(--item-mobile-width, 80vw) !important;scroll-snap-align:center}}






/* GoogleMapをモノクロ化 */
.map-monochrome iframe { filter: grayscale(100%); }


/* SWELL テーブル全体の枠線とセルの境界線を太くする */
.wp-block-table .has-fixed-layout {
    border-width: 4px !important; /* ここで太さを調整 (例: 2px, 3px) */
    border-style: solid !important;
    border-color: #97d6f5 !important; /* 線の色も任意で変更可能 */
}

/* =========================================================
//  SWELL タブ（吹き出し）未選択時
// ========================================================= */
/* 未選択タブ */
.swell-block-tab.is-style-balloon .c-tabList__button[aria-selected="false"]{
  background-color: #f2f2f2;
  color: #333;
}

/* 未選択タブ hover 時の色を上書き */
.swell-block-tab.is-style-balloon
.c-tabList__button[aria-selected="false"]:hover {
  background-color: #14c1fe;
  color: #333;
}


/*ContactForm7カスタマイズ*/
table.CF7_table{
	width:80%;
	margin:0 auto;
	border: 4px solid #97d6f5;
}

table.CF7_table tr{
	border-top: 1px solid #e5e5e5;
}

.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
	display:table;
}

/*入力欄*/
.CF7_table input, .CF7_table textarea {
	border: 1px solid #d8d8d8;
}

.CF7_table ::placeholder {
	color:#797979;
}

/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: #f79034;/*オレンジ*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/*「任意」文字*/
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #bdbdbd;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}
/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th{
	width:30%;/*横幅*/
	background-color:#e5e5e5;/*ブルーグレー*/
	}
}

/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:95%;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
	line-height:2.5em;
	}
	.CF7_table th{
	background-color:#e5e5e5;
	}
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#14c1fe;/* オレンジ*/
	border:0;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	margin:0 auto;
}

.CF7_btn{
	text-align:center;
	margin-top:20px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}



/* =========================================================
//  フローティングバナー
// ========================================================= */
/* スマートフォン */
#footer-floating {
	visibility: hidden;
}

@media not all and (min-width: 960px) {


	[data-scrolled=true] #footer-floating {
	    opacity: 1; /* 不透明度 0～1で調整 */
    	-webkit-transform: translateY(0);
    	transform: translateY(0);
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff; /* 背景色（必要に応じて変更） */
		z-index: 9999; /* 他の要素の上に表示 */
    	visibility: visible;
	}

	#footer-floating .swell-block-column:first-child .swell-block-button a {
		background-color: #007BFF !important; /* 左のカラム（青） */
		color: #fff !important; /* 文字色を白 */
	}

	#footer-floating .swell-block-column:last-child .swell-block-button a {
		background-color: #28A745 !important; /* 右のカラム（緑） */
		color: #fff !important; /* 文字色を白 */
	}

	/* アイコンの色も白に統一 */
	#footer-floating .swell-block-button a svg {
		fill: #fff !important;
	}

	#footer-floating .is-style-more_btn{
		padding:0;
	}

	/* 上に戻るボタンの下余白を調整 */
	.p-fixBtnWrap {
		bottom: 4em;
	}
}