/*
Theme Name: gSkeleton-garan
Theme URI: https://www.garan.ne.jp/
Author: 伽藍堂
Author URI: https://www.garan.ne.jp/
Description: gBase をベースにした装飾専用 WordPress ブロックテーマ
Version: 1.0.0
License: GPL v2 or later
Text Domain: gSkeleton-garan
*/

/* ===================================
   gSkeleton Decorative Styles Only
=================================== */

.is-style-hero-visual {
	border-radius: 0;
}

.is-style-section-card {
	background: var(--wp--preset--color--g-kinari);
	padding: var(--wp--preset--spacing--m);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.is-style-cta-accent {
	text-align: center;
	padding: var(--wp--preset--spacing--l);
}

.is-style-faq-soft {
	background: #ffffff;
	border-left: 4px solid var(--wp--preset--color--g-asagi);
	padding: var(--wp--preset--spacing--m);
}


/* add */

html {
	scroll-behavior: smooth;
}

main ul.wp-block-list,
main ol.wp-block-list {
	padding-left: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open {
 padding: 1rem;
}

.is-menu-open .wp-block-navigation__responsive-dialog button{
 padding-top: 0.25rem;
}

/* ===================================
   9. Page Top Button
=================================== */

:root {
	--z-pagetop: 100;
}

.wp-block-buttons.page-top {
	width: auto;
	position: fixed;
	z-index: var(--z-pagetop);
	right: 1rem;
	bottom: 6rem;
}

.wp-block-buttons.page-top .wp-block-button a {
	width: 3rem;
	height: 3rem;
	background: var(--wp--preset--color--primary);
	padding: 0;
}

.note {
	margin-top: 2rem;
}
.note p {
	margin: 0;
}

/* ===================================
   10. Accessibility
=================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	a:not(.wp-element-button),
	.pagetop {
		transition: none;
	}
}

/* ===================================
   11. wpcf 7
=================================== */
.wpcf7 {
	margin-top: 2rem;
}

/* 1. テキスト入力・メール・電話・メッセージ欄をまとめて指定 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
	width: 100%; /* 横幅いっぱい */
	padding: 12px 15px; /* 内側の余白 */
	margin-bottom: 20px; /* 項目ごとの間隔 */
	border: 1px solid #ddd; /* 枠線の色 */
	border-radius: 6px; /* 角を少し丸く */
	background-color: #fff; /* 背景色 */
	font-size: 16px; /* 文字サイズ（16px以上がスマホで崩れないコツ） */
	box-sizing: border-box; /* 余白を含めたサイズ調整 */
	transition: all 0.3s; /* 変化を滑らかに */
}
/* 2. 入力中の状態（フォーカス時） */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	border-color: #007bff; /* 枠線を好みの色に（例：青） */
	box-shadow: 0 0 8px rgba(0, 123, 255, 0.2); /* ぼんやり光らせる */
	outline: none; /* ブラウザ標準の枠線を消す */
}
/* 3. 送信ボタンのスタイル */
.wpcf7-submit {
	display: block;
	width: 250px; /* ボタンの横幅（好みで調整） */
	margin: 20px auto; /* 中央寄せ */
	padding: 15px;
	background-color: #007bff; /* ボタンの色 */
	color: #fff;
	font-weight: bold;
	border: none;
	border-radius: 30px; /* カプセル型 */
	cursor: pointer;
	transition: 0.3s;
}
/* 4. 送信ボタンのホバー（マウスを乗せた時） */
.wpcf7-submit:hover {
	background-color: #0056b3;
	transform: translateY(-2px); /* 軽く浮き上がらせる */
}
/* 送信ボタンの基本スタイル */
.wpcf7-submit {
	width: 100%;
	background-color: #1e293b;
	color: #fff;
	padding: 16px 32px;
	border: none;
	border-radius: 3px;
	font-size: 16px;
	cursor: pointer;
	transition: 0.3s;
}
/* マウスを乗せた時（ホバー） */
.wpcf7-submit:hover {
	background-color: #555;
	opacity: 0.8;
}

span.required {color: #9F1D35;}


iframe {
	width: 100%;
}