/*
Theme Name: gcolors-makiya-kirihara
Theme URI: 
Author: garan
Author URI: 
Description: 
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 
Version: 1.0
License: GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gcolors-makiya-kirihara
Tags: 

/* =====================================================
   1. 変数・ベース設定 (Variables & Base)
   ===================================================== */

/* =====================================================
   1. 変数・ベース設定 (Variables & Base)
   ===================================================== */
:root {
	--z-base: 1;
	--z-header: 50;
	--z-floating-ui: 100;
	--z-modal: 1000;
	--wp--style--root--padding-left: 1rem;
	--wp--style--root--padding-right: 1rem;
}

html {
	scroll-behavior: smooth;
	overflow-x: clip;
	width: 100%;
}

body {
	background-color: var(--wp--preset--color--gc-kinari-iro);
	color: var(--wp--preset--color--gc-sumi-iro);
	line-height: 1.8;
	letter-spacing: 0.02em;
	font-weight: 400;
	overflow-x: clip;
	width: 100%;
}

/* =====================================================
   2. タイポグラフィ・共通パーツ
   ===================================================== */
h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--text-main);
}

.wp-block-site-title {
	font-size: var(--wp--preset--font-size--normal) !important;
}

.my-element {
	color: var(--wp--preset--color--gc-enji-iro);
	background-color: var(--wp--preset--color--gc-kinari-iro);
}

/* =====================================================
   3. レイアウト・セクション制御
   ===================================================== */

/* メイン領域の初期化 */
main.wp-block-group {
	font-size: 18px;
	padding: 0;
	margin-block-start: 0;
	overflow-x: clip;
	width: 100vw;
}

/* .wp-block-post-contentの幅制限を解除 */
.wp-block-post-content {
	max-width: none;
}

/* コンテンツ幅制限（通常ブロック） */
.wp-block-post-content > *:not(.alignfull):not(.alignwide) {
	max-width: 42em;
	margin-inline: auto;
	padding-inline: 1.2rem;
}

/* alignwide: wide幅表示 */
.alignwide {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto;
	margin-right: auto;
}

section.wp-block-group.alignwide {
	padding-left: var(--wp--preset--spacing--s);
	padding-right: var(--wp--preset--spacing--s);
}

section.wp-block-group.alignwide > * {
	max-width: none;
}

/* alignfull: 全幅表示 */
.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	position: relative;
	box-sizing: border-box;
}

section.wp-block-group.alignfull {
	padding-left: 0;
	padding-right: 0;
}

section.wp-block-group.alignfull.is-layout-constrained {
	max-width: 100vw;
	padding-top: 6rem;
	padding-bottom: 6rem;
	padding-left: max(var(--wp--preset--spacing--s), calc((100vw - 1200px) / 2));
	padding-right: max(var(--wp--preset--spacing--s), calc((100vw - 1200px) / 2));
}

/* セクション共通スタイル */
main section.wp-block-group {
	padding: 6rem var(--wp--preset--spacing--s);
	margin-block-start: 0;
}

main section.wp-block-group:nth-of-type(even) {
	background: rgba(251, 247, 240, 0.5); /* kinari-iro */
}

/* 特殊テキストボックス */
section.is-layout-constrained .top-block-main-text {
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
	main section.wp-block-group,
	section.wp-block-group.alignfull.is-layout-constrained {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}

/* =====================================================
   3.5 疑似パララックス（汎用）
   ===================================================== */
.para-bg {
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 100px 40px;
	position: relative;
}

.para-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(250, 249, 246, 0.92) 0%,
		rgba(244, 241, 232, 0.88) 50%,
		rgba(250, 249, 246, 0.92) 100%
	);
	z-index: 0;
}

.para-bg > * {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.para-bg {
		background-attachment: scroll;
	}
}

/* =====================================================
   4. ナビゲーション・UI
   ===================================================== */
.wp-block-navigation__responsive-container.has-modal-open.is-menu-open {
	padding: 2rem 1.5rem;
}

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

/* 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 !important;
	height: 3rem !important;
	padding: 0 !important;
	border-radius: 50%;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
}

/* =====================================================
   5. フォーム (Contact Form 7)
   ===================================================== */
.wpcf7-form input:not([type="submit"]),
.wpcf7-form textarea {
	width: 100%;
	padding: 12px 15px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-sizing: border-box;
}

.wpcf7-submit {
	width: 100%;
	max-width: 250px;
	display: block;
	margin: 20px auto;
	background-color: #1e293b;
	color: #fff;
	padding: 16px 32px;
	border-radius: 30px;
	font-weight: bold;
	cursor: pointer;
	transition: 0.3s;
	border: none;
}

.wpcf7-submit:hover {
	background-color: #555;
	opacity: 0.8;
}

span.required {
	color: #9F1D35;
}

/* =====================================================
   6. アクセシビリティ・調整
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-main);
	outline-offset: 3px;
}

iframe {
	width: 100%;
}

/* =====================================================
   7. 共通レイアウト
   ===================================================== */
header {
	border-bottom: 1px var(--wp--preset--color--gc-rikyu-cha-iro) solid;
}

footer {
	margin-block-start: 0;
}

/* ホームページ専用 */
.home main > div,
.home main > section,
.home main > article {
	border-bottom: 1px var(--wp--preset--color--gc-rikyu-cha-iro) solid;
	padding-top: 6rem;
	padding-bottom: 6rem;
	margin-block-start: 0;
}