@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================================
   kukuriya.jp の追記ぶん
   親テーマの更新で消えないよう、カスタムはすべてここに書く。
   ページの中身（見出し・文章・ブロック）には手を出さない —
   本人が編集画面から直せる状態を保つため、ここはサイトの器だけ。
   ========================================================= */

:root {
	--kk-shu: #b0472f;        /* 差し色。ロゴの帯と同じ朱 */
	--kk-shu-dark: #8e3925;
	--kk-sumi: #2b2724;       /* 文字の墨 */
	--kk-paper: #fbf8f1;
}

/* トップはヘッダー直下からファーストビューを始める。
   SWELL は #content に 64px の上余白を持たせているが、トップは
   全幅の色付きセクションで始まるので、そこが白い帯になって浮く。 */
.home #content {
	padding-top: 0;
}

/* ---------------------------------------------------------
   ボタン
   既定は小さく、色も墨とグレーで、隣同士がくっついていた。
   サイトの差し色（朱）を主ボタンに当て、寸法と間隔をそろえる。
   角丸はプラグインの既定（ほぼ四角）に合わせる。
   --------------------------------------------------------- */
.wp-block-buttons {
	/* 横に並ぶときは広めに離す。ボタンが大きいので、これくらい空けないと詰まって見える。
	   縦に積むとき（スマホ）は離しすぎると 1 組に見えないので、行間は狭く。 */
	column-gap: 88px;
	row-gap: 16px;
}

.wp-block-button__link {
	/* 左右で幅をそろえる。文言が短くてもこの幅までは広がる。
	   🔴 `min(16em, 100%)` は効かない — ボタンは幅が中身で決まる箱なので、
	      % が「中身の幅」に解決してしまい、常に小さいほうが選ばれる。 */
	min-width: 16em;
	max-width: 100%;
	padding: 16px 30px;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.5;
	border-radius: 4px;
	transition: background-color 0.15s ease, color 0.15s ease,
		border-color 0.15s ease;
}

/* 主ボタン */
.wp-block-button.is-style-fill > .wp-block-button__link {
	background-color: var(--kk-shu);
	color: #fff;
	border: 2px solid var(--kk-shu);
}

.wp-block-button.is-style-fill > .wp-block-button__link:hover,
.wp-block-button.is-style-fill > .wp-block-button__link:focus {
	background-color: var(--kk-shu-dark);
	border-color: var(--kk-shu-dark);
	color: #fff;
}

/* 副ボタン。押せることが分かる太さの枠にして、ホバーで塗る。 */
.wp-block-button.is-style-outline > .wp-block-button__link {
	/* SWELL が枠線ボタンの padding を別に持っているので、ここでも指定して
	   塗りボタンと高さをそろえる。 */
	padding: 16px 30px;
	background-color: transparent;
	color: var(--kk-sumi);
	border: 2px solid var(--kk-sumi);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--kk-sumi);
	color: var(--kk-paper);
}

/* 料金カードの中だけは、ボタンをカード幅いっぱいに。
   文言の長さが違っても左右で幅と位置がそろう。 */
.is-price-card .wp-block-buttons {
	display: block;
}

.is-price-card .wp-block-button {
	width: 100%;
}

.is-price-card .wp-block-button__link {
	display: block;
	width: 100%;
	min-width: 0;
	text-align: center;
}

/* ---------------------------------------------------------
   暗い地のセクション（デモへの導線）
   SWELL の h2 は上下に線を引く。その色が紺なので、暗い地に置くと
   線だけ沈んで見出しが浮いた見た目になる。地に合わせて明るくする。
   --------------------------------------------------------- */
.is-invert h2 {
	color: var(--kk-paper);
	border-color: rgba(251, 248, 241, 0.32);
}

.is-invert h2::before,
.is-invert h2::after {
	border-color: rgba(251, 248, 241, 0.32);
	background-color: rgba(251, 248, 241, 0.32);
}