/*
Theme Name: KUNOTRAUM
Theme URI: https://kunotraum.com/
Author: KUNOTRAUM
Description: KUNOTRAUMの事業サイト用テーマ。白を基調に黒文字で構成し、ブロックエディター（サイトエディター）で文章や写真を直せる。
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.6.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kunotraum
*/

/* 細かい見た目の調整。色・文字・余白の基本は theme.json で管理する */

.kt-label {
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.kt-card {
	border-top: 1px solid var(--wp--preset--color--contrast);
}

.kt-step-number {
	font-family: var(--wp--preset--font-family--latin);
	letter-spacing: 0.04em;
}

.kt-note {
	color: var(--wp--preset--color--muted);
}

.wp-block-navigation a:hover,
.kt-link a:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--muted);
}

/* 写真は色を抑えて統一感を出す */
.kt-mono img {
	filter: grayscale(100%);
}

/* ロゴができるまでの文字ロゴ */
.kt-brand {
	margin: 0;
	font-family: var(--wp--preset--font-family--latin);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.2em;
}

.kt-brand a {
	text-decoration: none;
}

/* ボタンの文字色が本文リンクの色に負けないようにする */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--contrast);
}

/* 帯と帯のあいだに白いすき間を出さない */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

main.wp-block-group > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* フッターのリンク */
.kt-footer-link {
	margin-block-start: 0.4rem;
}

.kt-footer-link a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/* 実績の一行 */
.kt-work {
	padding-block: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin-block-start: 0;
}

/*
 * 前のテーマ用の「追加CSS」に、すべての文字を黒にする強い指定（!important）が残っている。
 * それに負けないよう、黒地の上の白文字とボタンの文字色だけはここで強く指定する。
 */
.has-base-color,
.has-base-color *:not(.wp-block-button__link) {
	color: var(--wp--preset--color--base) !important;
}

.has-base-color [style*="color:#BDBDB8"],
.has-base-color .has-text-color[style*="#BDBDB8"] {
	color: #BDBDB8 !important;
}

.has-base-color [style*="color:#8A8A85"] {
	color: #8A8A85 !important;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--base) !important;
}

.wp-block-button__link.has-contrast-color,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--contrast) !important;
}

.has-muted-color {
	color: var(--wp--preset--color--muted) !important;
}

/* 問い合わせフォーム */
.kt-form dl {
	margin: 0;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.kt-form dt {
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.kt-form dt.kt-required::after {
	content: "必須";
	margin-left: 0.75em;
	padding: 0.1em 0.6em;
	font-size: 0.75rem;
	font-weight: 600;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base) !important;
}

.kt-form dd {
	margin: 0;
}

.kt-form input[type="text"],
.kt-form input[type="email"],
.kt-form input[type="tel"],
.kt-form textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	font: inherit;
	background: var(--wp--preset--color--base);
}

.kt-form input:focus,
.kt-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 1px;
}

.kt-form .horizontal-item {
	display: inline-block;
	margin: 0 1.25rem 0.5rem 0;
}

.kt-form-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-top: 2.5rem;
}

.kt-form-buttons input[type="submit"] {
	padding: 1rem 3rem;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base) !important;
	font: inherit;
	font-weight: 600;
	letter-spacing: 0.1em;
	cursor: pointer;
}

.kt-form-buttons input[name="submitBack"] {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast) !important;
}

.kt-form .error {
	color: #B42318 !important;
	font-size: 0.8125rem;
}

/* 大きな横長写真（トップ・理念） */
.kt-hero-img {
	margin: 0;
}

.kt-hero-img img {
	width: 100%;
	height: min(70vh, 640px);
	object-fit: cover;
	display: block;
}

/* 写真は差し替え前提。白黒で統一する */
.wp-block-image.kt-mono img {
	filter: grayscale(100%);
}

/* フッターのSNS（管理画面の「ナビゲーション」で追加・変更できる） */
.kt-footer-nav {
	margin-block-start: 0.4rem;
	gap: 0.4rem;
}

.kt-footer-nav a {
	color: var(--wp--preset--color--base) !important;
	text-decoration: none;
}

/* ロゴ（文字ロゴ） */
.kt-brand .kt-logo {
	display: block;
	width: 160px;
	height: auto;
}

/* イラスト（白黒の線画。文章の横に小さく置く） */
.wp-block-image.kt-illust {
	margin: 0 0 1rem;
}

.wp-block-image.kt-illust img {
	width: 120px;
	height: auto;
}

.kt-value-row .wp-block-image.kt-illust {
	margin: 0;
}

.kt-value-row .wp-block-image.kt-illust img {
	width: 80px;
}

.kt-value-row {
	padding-block: 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin-block-start: 0;
}

@media (max-width: 600px) {
	.wp-block-image.kt-illust img {
		width: 96px;
	}
}

/* 紹介動画（トップ「企業・自治体の方へ」） */
.kt-intro .wp-block-video {
	margin: 0;
}

.kt-intro .wp-block-video video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--contrast);
}

.kt-intro .wp-block-video video:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 4px;
}

.kt-intro-fallback {
	margin-block-start: 0.5rem;
}