@charset "UTF-8";

/* ==========================================================================
   base.css — リセット・デザイントークン・タイポグラフィ

   値の出所: Elementor デフォルトキット（post ID 8）から抽出。
   docs/inventory.md 「5. デザイントークン」参照。
   ========================================================================== */

:root {
	/* 色 — Elementor custom_colors より */
	--scjc-blue: #0097d7;         /* メインの青。リンク色も同値 */
	--scjc-blue-alpha: #0097d799; /* あお（透過） */
	--scjc-btn: #edbe38;          /* ボタン黄 */
	--scjc-text: #333333;

	--scjc-white: #ffffff;
	--scjc-bg: #ffffff;

	/* レイアウト */
	--scjc-container: 1160px;
	--scjc-container-padding: 20px;

	/* タイポグラフィ */
	--scjc-font: "M PLUS 1", sans-serif;
	--scjc-h1-size: 30px;
	--scjc-h1-lh: 43px;
	--scjc-h2-size: 26px;
	--scjc-h2-lh: 40px;
	--scjc-h3-size: 22px;
	--scjc-h3-lh: 30px;
}

/* --------------------------------------------------------------------------
   リセット
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

/* クラス付きリストのマーカーと余白を落とす。
   :where() で詳細度を 0,1,0 に下げてあるので、本文中の
   コンテンツ側CSS（.housin__list など）が普通に上書きできる。 */
:where(ul, ol)[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

img,
picture,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* --------------------------------------------------------------------------
   ベース
   -------------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--scjc-bg);
	color: var(--scjc-text);
	font-family: var(--scjc-font);
	font-weight: 400;
	/* 本番の実測値は 24px（16px の 1.5倍）。
	   ここを変えると line-height を明示していない要素の高さが全部ずれる。 */
	line-height: 1.5;
}

a {
	color: var(--scjc-blue);
}

h1 { font-size: var(--scjc-h1-size); line-height: calc(var(--scjc-h1-lh) / var(--scjc-h1-size)); }
h2 { font-size: var(--scjc-h2-size); line-height: calc(var(--scjc-h2-lh) / var(--scjc-h2-size)); }
h3 { font-size: var(--scjc-h3-size); line-height: calc(var(--scjc-h3-lh) / var(--scjc-h3-size)); }

/* --------------------------------------------------------------------------
   Elementor キットの custom_css を移植
   （出所: post ID 8 の custom_css。値は変更していない）
   -------------------------------------------------------------------------- */

input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
	border: none;
}

.text-space p {
	margin-bottom: 1em !important;
}

/* --------------------------------------------------------------------------
   ユーティリティ
   -------------------------------------------------------------------------- */

/* 本番はデスクトップでコンテンツ幅ちょうど1160px（左右パディング無し）。
   幅が足りなくなるタブレット以下でだけ内側に余白を入れる。 */
.container {
	width: 100%;
	max-width: var(--scjc-container);
	margin-inline: auto;
}

@media (max-width: 1201px) {
	/* 本番の左右余白は固定pxではなく画面幅の割合。
	   751〜1201px は 3%（768pxなら23.0px、1200pxなら36.0px）。 */
	:root {
		--scjc-container-padding: 3%;
	}

	.container {
		padding-inline: var(--scjc-container-padding);
	}
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 12px 16px;
	clip: auto;
	background: var(--scjc-white);
	color: var(--scjc-text);
}

/* --------------------------------------------------------------------------
   ブレークポイント（Elementor キットの viewport 設定に合わせる）
     モバイル    〜750px
     タブレット  751px〜1201px
     デスクトップ 1202px〜
   -------------------------------------------------------------------------- */

@media (max-width: 750px) {
	/* 750px以下は 5%（375pxなら18.75px）。 */
	:root {
		--scjc-container-padding: 5%;
	}
}