/*
Theme Name:twentytwentyfour-child
Template:twentytwentyfour
サイト名:丸高ベーカリー
-------------------------------------------------------------------------------------------------------------- */
/* 共通の設定
-------------------------------------------------------------------------------------------------------------- */
/* ヘッダー　ロゴ　レスポンシブ調整
----------------------------------------------------------- */
@media (max-width: 768px) {
.header-logo-01 {
	width: 60%;
	}
}
/* ヘッダー　40thアイコン　レスポンシブ調整
----------------------------------------------------------- */
@media (max-width: 768px) {
.header-40th-01 {
	width: 14%;
	padding-left: 10px;
	}
}
/* フッター　注意文　レスポンシブ調整
----------------------------------------------------------- */
@media (max-width: 768px) {
.footer-text-01 {
	text-align: left;
	font-size: 0.8rem !important;
	}
}
/* 固定ページ　コンテンツエリア　レスポンシブ調整
----------------------------------------------------------- */
@media (max-width: 768px) {
.contents-area {
	margin-top: 60px !important;
	margin-bottom: 60px !important;
	}
}
/* 非表示
----------------------------------------------------------- */
.none {
	display: none;
}
/* レスポンシブでの表示・非表示
----------------------------------------------------------- */
/* 1280px以下で表示 */
.appear-1280 {
	display: none;
}
/* 1280px以下で非表示 */
.disappear-1280 {
	display: inline;
}
@media (max-width: 1280px) {
.appear-1280 {
	display: inline;
	}
.disappear-1280 {
    display: none;
	}
}
/* 768px以下で表示 */
.appear-768 {
	display: none;
}
/* 768px以下で非表示 */
.disappear-768 {
	display: inline;
}
@media (max-width: 768px) {
.appear-768 {
	display: inline;
	  }
.disappear-768 {
	display: none;
	}
}
/* タイトル　レスポンシブ調整
----------------------------------------------------------- */
@media (max-width: 768px) {
.title-01 {
	text-align: center;
	}
}
/* reCAPTCHA　ロゴ非表示
----------------------------------------------------------- */
.grecaptcha-badge {
	visibility: hidden;
}
/* reCAPTCHA　注意書き調整
----------------------------------------------------------- */
.grecaptcha-font {
	font-size: 0.6rem;
}
/* 個別の設定
-------------------------------------------------------------------------------------------------------------- */
/* 「インデックス」ページ　MetaSliderのレスポンシブ調整
----------------------------------------------------------- */
#metaslider-8 {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100vw !important;
	height: 70vh !important;
	background: #fff;
}
#metaslider_container_8 img {
	object-fit: cover;
	height: 70vh;
}
/* 「インデックス」ページ　序文のレスポンシブ調整
----------------------------------------------------------- */
@media (max-width: 768px) {
.index-text-01 {
	text-align: left;
	}
}
/* 「インデックス」ページ　横山たまねぎのレスポンシブ調整
----------------------------------------------------------- */
@media (max-width: 768px) {
.index-grid-01 {
	grid-template-columns: 1fr;
	column-gap: 0;
	}
}
/* 「インデックス」ページ　コンテンツメニューのレスポンシブ調整
----------------------------------------------------------- */
.index-grid-02 {
	grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
.index-back-01 {
	padding: 20px;
	}
.index-grid-02 {
	grid-template-columns: 1fr;
	}
.index-text-01 {
	order: 2;
	}
.index-img-01 {
	order: 1;
	}
.index-text-02 {
	order: 3;
	}
.index-img-02 {
	order: 4;
	}	
}
/* 「事業内容」ページ　交互のレイアウト
----------------------------------------------------------- */
.business-grid-01 {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
@media (max-width: 768px) {
.business-grid-01 {
	grid-template-columns: 1fr;
	}
.business-text-01 {
	order: 1;
	}
.business-img-01 {
	order: 2;
	}
.business-text-02 {
	order: 3;
	}
.business-img-02 {
	order: 4;
	}
.business-text-03 {
	order: 5;
	}
.business-img-03 {
	order: 6;
	}
}
/* 「商品紹介」ページ　商品写真レイアウト
----------------------------------------------------------- */
.product-grid-01 {
	grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 768px) {
.product-grid-01 {
	grid-template-columns: 1fr 1fr;
	}
}
/* 「商品紹介」ページ　受賞　レイアウト
----------------------------------------------------------- */
@media (max-width: 768px) {
.product-grid-02 {
	grid-template-columns: 1fr;
	}
}
/* 「会社概要」ページ　リスト表示
----------------------------------------------------------- */
.company-grid-01 {
	grid-template-columns: 1fr 3fr;
}
.company-grid-02 {
	grid-template-columns: 2fr 3fr;
}
@media (max-width: 768px) {
.company-grid-01 {
	grid-template-columns: 3.5fr 6.5fr;
	font-size: 0.9rem;
	}
.company-grid-02 {
	grid-template-columns: 3fr 7fr;
	font-size: 0.9rem;
	}
.company-font-01 {
	font-size: 0.9rem;
	}
}
/* 「お問い合わせ」ページ　フォーム　※ほぼ引用のまま
----------------------------------------------------------- */
/* フォーム全体 */
.wpcf7 {
	background-color: #f0f0f0;
	padding: 40px;
	border-radius: 10px;
	max-width: 800px;
	margin: auto;
}
/* 項目 */
.wpcf7-form label {
	display: block;
	margin-bottom: 10px;
	font-size: 16px;
	color: #736357;
}
/* 必須表示 */
.wpcf7-form .required {
	background-color: #ff0000;
	color: white;
	padding: 2px 5px;
	border-radius: 3px;
	margin-left: 10px;
	font-size: 14px;
}
/* 入力欄（1行） */
.wpcf7-text {
	width: 96%;
	padding: 10px;
	border: 1px solid #cccccc;
	border-radius: 5px;
	margin: 10px 0 20px 0;
	font-size: 16px;
	background-color: #ffffff;
}
/* 入力欄（複数行） */
.wpcf7-textarea {
	width: 96%;
	padding: 10px;
	border: 1px solid #cccccc;
	border-radius: 5px;
	margin-bottom: 20px;
	font-size: 16px;
	background-color: #ffffff;
	height: 200px;
	resize: vertical;
	line-height: 1.4;
}
/* 送信ボタン */
.wpcf7-form input[type="submit"] {
	background-color: #736357;
	color: white;
	cursor: pointer;
	transition: background-color 0.3s ease;
	border: none;
	padding: 10px;
	font-size: 20px;
	border-radius: 10px;
}
.wpcf7-form input[type="submit"]:hover {
	background-color: #FAAF3B;
}
/* エラーメッセージと成功メッセージのスタイル */
.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%;
	}
}