/*
Theme Name: gColors
Description: A block theme inspired by traditional Japanese colors.
Version: 1.0.0
Author: Your Name
License: GPL v2 or later
Text Domain: wagashi-traditional
*/


:root {
	--z-base: 1;
	--z-header: 50;
	--z-floating-ui: 100;
	--z-modal: 1000;
}

html {
	scroll-behavior: smooth;
}

body {
    background-color: var(--wp--preset--color--kinari-iro);
    color: var(--wp--preset--color--sumi-iro);
}

header > div.wp-block-group,
footer > div.wp-block-group {
	padding: 1rem;
}

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.4rem;
}

main.wp-block-group {
	font-size: 20px;
	padding: 0;
	margin-block-start: 0;
}

section .wp-block-buttons {
	margin-block-start: 2rem;
}

.wp-element-button {
	background: var(--wp--preset--color--ai-iro);
	border-radius: 3px;
}

@media (max-width: 768px) {
	main h1 {padding: 0 1rem;}
	main .wp-block-cover h1 {padding: 0;}
	main > div {padding: 0 1rem;}
}

/* add */

/* ===================================
   9. Page Top Button
=================================== */
.page-top-nav {
	position: fixed;
	right: 0.5rem;
	bottom: 6rem;
	z-index: var(--z-floating-ui);
}

.page-top-nav a.wp-block-button__link.wp-element-button {
	width: 3rem;
	height: 3rem;
	inline-size: 3rem;
	block-size: 3rem;
	background: var(--wp--preset--color--ai-iro);
	padding: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
}

/* ===================================
   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%;
}

/* お客様の声 - ホバーエフェクト */
.wp-block-group .wp-block-column .wp-block-group {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-group .wp-block-column .wp-block-group:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* 引用符のスタイル */
.wp-block-quote.is-style-plain {
    border-left: none;
    padding-left: 0;
}

.wp-block-quote cite {
    font-style: normal;
    color: var(--wp--preset--color--contrast-2);
}

/* 特徴カードのホバーエフェクト */
.wp-block-columns .wp-block-column .wp-block-group {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-columns .wp-block-column .wp-block-group:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.wp-block-post-excerpt__more-text {
	margin-top: 0.25rem;
}

main section.is-layout-constrained {margin-block-start: 0;}


header .wp-block-site-title {
	display:none;
}



/* ======================================
   Industry Styles
====================================== */

/* A: 和菓子・飲食店 */
.is-style-industry-a {
	/*background-color: var(--wp--preset--color--kinari-iro);*/
	color: var(--wp--preset--color--sumi-iro);
}
.is-style-industry-a h2,
.is-style-industry-a h3 {
	color: var(--wp--preset--color--enji-iro);
}
.is-style-industry-a .wp-block-button__link {
	background-color: var(--wp--preset--color--enji-iro);
}

/* 和菓子・飲食店スタイル */
.is-style-industry-a {
    /*background: linear-gradient(135deg, #fef9f3 0%, #fff 100%);*/
}

.is-style-industry-a h1 {
    color: #2d1810;
    font-family: "Yu Mincho", "游明朝", serif;
}

.is-style-industry-a .wp-block-button__link {
    background: #8b4513;
    border: none;
    transition: all 0.3s ease;
}

.is-style-industry-a .wp-block-button__link:hover {
    background: #6d3410;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3);
}

/* B: 建設・士業 */
.is-style-industry-b {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--sumi-iro);
}
.is-style-industry-b h2 {
	color: var(--wp--preset--color--ai-iro);
	border-left: 4px solid var(--wp--preset--color--shu-iro);
	padding-left: 1rem;
}
.is-style-industry-b .wp-block-button__link {
	background-color: var(--wp--preset--color--ai-iro);
}

/* 建設・士業スタイル */
.is-style-industry-b {
    background: #f8f9fa;
}

.is-style-industry-b h1 {
    color: #1a1a1a;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
}

.is-style-industry-b .wp-block-button__link {
    background: #0066cc;
    font-weight: 600;
    transition: all 0.3s ease;
}

.is-style-industry-b .wp-block-button__link:hover {
    background: #0052a3;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
}

.is-style-industry-b .is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid #0066cc;
    color: #0066cc;
}

.is-style-industry-b .is-style-outline .wp-block-button__link:hover {
    background: #0066cc;
    color: #fff;
}

/* C: 美容・工芸 */
.is-style-industry-c {
	background-color: var(--wp--preset--color--white);
}
.is-style-industry-c h2 {
	color: var(--wp--preset--color--fuji-iro);
}
.is-style-industry-c .wp-block-button__link {
	background-color: var(--wp--preset--color--fuji-iro);
}