/*
Theme Name:twentytwentyfour-child
Template:twentytwentyfour
サイト名:川田石材 株式会社
-------------------------------------------------------------------------------------------------------------- */
/* 基本設計 ver260501
-------------------------------------------------------------------------------------------------------------- */
/* 要素のアウトラインを表示
----------------------------------------------------------- */
/** {
	outline: 1px solid #DDDDDD;
}*/
/* レスポンシブでの表示・非表示
----------------------------------------------------------- */
/* 1280px以上で非表示　1280px以下で表示 */
.appear-1280 {
	display: none;
}
@media (max-width: 1280px) {
	.appear-1280 {
		display: inline;
	}
}
/* 1280px以上で表示　1280px以下で非表示 */
.disappear-1280 {
	display: inline;
}
@media (max-width: 1280px) {
	.disappear-1280 {
		display: none;
	}
}
/* 768px以上で非表示　768px以下で表示 */
.appear-768 {
	display: none;
}
@media (max-width: 768px) {
	.appear-768 {
		display: inline;
	}
}
/* 768px以上で表示　768px以下で非表示 */
.disappear-768 {
	display: inline;
}
@media (max-width: 768px) {
	.disappear-768 {
		display: none;
	}
}
/* 非表示
----------------------------------------------------------- */
.none {
	display: none;
}
/* リンク要素のクリック時のアウトライン表示を透明化
----------------------------------------------------------- */
a {
	outline-color: transparent;
	text-decoration: none;
}
:focus, a {
	outline-color: transparent;
}
/* サイト共通の設定
-------------------------------------------------------------------------------------------------------------- */
/* レスポンシブ調整用　各種
----------------------------------------------------------- */
@media (max-width: 768px) {
	.header-logo-01 {
		width: 80%;
	}
}
/* リンクの下線を非表示
----------------------------------------------------------- */
.underline-none, .underline-none a {
	text-decoration: none;
}
/* リンクにホバーエフェクトを追加（アンダーライン）
----------------------------------------------------------- */
.link-underline-left-01 a, .link-underline-center-01 a {
	position: relative;
	display: inline-block;
	transition: .3s;
}
.link-underline-left-01 a::after, .link-underline-center-01 a::after {
	position: absolute;
	bottom: 0;
	content: '';
	width: 0;
	height: 2px;
	background-color: #5CB2F3;
	transition: .3s;
}
.link-underline-left-01 a:hover::after, .link-underline-center-01 a:hover::after {
	width: 100%;
}
.link-underline-left-01 a::after {
	left: 0%;
	transform: translateX(0%);
}
.link-underline-center-01 a::after {
	left: 50%;
	transform: translateX(-50%);
}
/* リンクにホバーエフェクトを追加（半透明）
----------------------------------------------------------- */
.link-effect-01 {
	transition:0.3s;
}
.link-effect-01:hover{
	opacity:0.5;
}
/* ボタンにホバーエフェクトを追加（カラーチェンジ）
----------------------------------------------------------- */
.button-color-02 a {
	background-color: #5CB2F3;
	transition: .3s;
}
.button-color-02 a:hover {
	background-color: #315597;
}
.button-color-03 a {
	background-color: #315597;
	transition: .3s;
}
.button-color-03 a:hover {
	background-color: #5CB2F3;
}
/* 個別の設定
-------------------------------------------------------------------------------------------------------------- */
/* 「インデックス」ページ　MetaSliderのレスポンシブ調整
----------------------------------------------------------- */
@media (max-width: 768px) {
	#metaslider-51 {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 0;
		width: 100vw !important;
		height: 60vh !important;
		background: #fff;
	}
	#metaslider_container_51 img {
		object-fit: cover;
		height: 60vh;
	}
}
/* 「事業内容」ページ　グリッドの線のレスポンシブ対応
----------------------------------------------------------- */
@media (max-width: 768px) {
	.grid-1fr {
		grid-template-columns: 1fr;
	}
	.border-none-01 {
		border: none;
	}
	.border-none-02 {
		border-bottom: 0;
	}
	.border-none-03 {
		border-top: 0;
	}
}
/* 「お問い合わせ」ページ　フォーム　※ほぼ引用のまま
----------------------------------------------------------- */
/* フォーム全体 */
.wpcf7 {
	background-color: #F9F9F9;
	padding: 40px;
	border-radius: 10px;
	max-width: 800px;
	margin: auto;
}
/* 項目 */
.wpcf7-form label {
	display: block;
	margin-bottom: 10px;
	font-size: 16px;
	color: #000000;
}
/* 必須表示 */
.wpcf7-form .required {
	background-color: #ff0000;
	color: white;
	padding: 2px 5px;
	border-radius: 0px;
	margin-left: 10px;
	font-size: 14px;
}
/* 入力欄（1行） */
.wpcf7-text {
	width: 96%;
	padding: 10px;
	border: 1px solid #cccccc;
	border-radius: 0px;
	margin: 10px 0 20px 0;
	font-size: 16px;
	background-color: #ffffff;
}
/* 入力欄（複数行） */
.wpcf7-textarea {
	width: 96%;
	padding: 10px;
	border: 1px solid #cccccc;
	border-radius: 0px;
	margin-bottom: 20px;
	font-size: 16px;
	background-color: #ffffff;
	height: 200px;
	resize: vertical;
	line-height: 1.4;
}
/* 送信ボタン */
.wpcf7-form input[type="submit"] {
	background-color: #315597;
	color: white;
	cursor: pointer;
	transition: background-color 0.3s ease;
	border: none;
	padding: 10px;
	font-size: 20px;
	border-radius: 0px;
}
.wpcf7-form input[type="submit"]:hover {
	background-color: #5CB2F3;
}
/* エラーメッセージと成功メッセージのスタイル */
.wpcf7-form .wpcf7-not-valid-tip {
	color: red;
	font-size: 14px;
}
@media (max-width: 768px) {
.wpcf7 {
	padding: 20px;
	}
.wpcf7-text {
	width: 90%;
	}
.wpcf7-textarea {
	width: 90%;
	}
}