@charset "utf-8";

/* =====================================================
--------------------------------------------------------
基本設定
--------------------------------------------------------
===================================================== */

/* 変数代入 */
:root {
	/* 文字関連 */
	--font-size-default: 14px;
	--line-height-default: 1.4;
	/* 無彩色 */
	--color-black: #000D18;
	--color-grey-dark: ;
	--color-grey-origin: #B7C1C9;
	--color-grey-pale: ;
	--color-grey-light: ;
	/* 有彩色 */
	--color-link: #004077;
	--color-red-origin: #bc000f;
}

html {
	font-size: var(--font-size-default);
}

body {
	color: var(--color-black);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: var(--font-size-default);
	font-weight: 500;
	line-height: var(--line-height-default);
}

a {
	/* display: inline-block; */
	color: var(--color-link);
	text-decoration: none;
}

a img {
	transition: opacity 0.5s;
}

a img:hover {
	opacity: 0.6;
}

@media screen and (min-width:768px) {
	:root {
		--font-size-default: 16px;
		--line-height-default: 1.6;
	}
}

@media screen and (min-width:1024px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}










/* =====================================================
--------------------------------------------------------
フォーム関係
--------------------------------------------------------
===================================================== */

*:disabled,
.disabled,
label:has(:disabled) {
	color: var(--color-grey-origin);
}



/* label */
label {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	line-height: 1;
}

label:not(:has(:disabled)) {
	cursor: pointer;
}



/* input.textarea */
input:not([type="radio"],[type="checkbox"],[type="range"],[type="file"]),
textarea {
	padding: 12px;
	border-radius: 4px;
	border: 1px solid var(--color-grey-origin);
	background: #fff;
}

input::placeholder,
textarea::placeholder {
	color: var(--color-grey-origin);
}

input:not([type="radio"],[type="checkbox"],[type="range"],[type="file"]):focus,
textarea:focus {
	border: 1px solid var(--color-link);
}



/* 単数・複数選択 */
input[type="radio"],
input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	position: relative;
	padding-left: var(--font-size-default);
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	outline: none;
	vertical-align: middle;
	line-height: inherit;
}

input[type="radio"]::before,
input[type="radio"]::after,
input[type="checkbox"]::before,
input[type="checkbox"]::after {
	display: block; 
	position: absolute;
	content: "";
}

input[type="radio"]::before {
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--color-grey-origin);
	width: calc(24px - 2px);
	height: calc(24px - 2px);
}

input[type="checkbox"]::before {
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	border-radius: 4px;
	background: #fff;
	border: 1px solid var(--color-grey-origin);
	width: calc(24px - 2px);
	height: calc(24px - 2px);
}

input[type="checkbox"]:checked::before {
	border: 1px solid var(--color-housecom-blue);
	background: var(--color-link);
}

input[type="radio"]::after,
input[type="checkbox"]::after {
	opacity: 0;
}

input[type="radio"]:checked::after {
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	border-radius: 50%;
	width: calc(24px - 8px);
	height: calc(24px - 8px);
	background: var(--color-link);
	opacity: 1;
}

input[type="checkbox"]:checked::after {
	top: calc(25% + 2px);
	left: calc(25% + 2px);
	translate: -25% -25%;
	rotate: -45deg;
	width: calc(24px - 10px);
	height: calc(24px - 16px);
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	opacity: 1;
}

input[type="radio"]:disabled::before,
input[type="checkbox"]:disabled::before {
	border: px solid var(--color-grey-origin);
	background: var(--color-grey-origin);
	opacity: 1;
}



/* button */
button {
	border-radius: 4px;
	background: #fff;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
[type="file"]:not(:disabled)::-webkit-file-upload-button,
[type="file"]:not(:disabled)::file-selector-button {
	cursor: pointer;
}










/* =====================================================
--------------------------------------------------------
共通・汎用
--------------------------------------------------------
===================================================== */

/* 文字リンク */
a:not(:has(> img)) {
	position: relative;
}

a:not(:has(> img))::after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	transform-origin: left top; /*変形の原点*/
	transition: transform 0.5s;
	background: var(--color-link);
	content: '';
}

a:not(:has(> img)):hover::after {
	transform: scale(0, 1); /* x軸に1（相対値）伸長 */
}



/* インナー幅 */
.u--inner {
	margin-left: auto;
	margin-right: auto;
	width: calc(100% - 32px);
}

@media screen and (min-width:1025px) {
	.u--inner {
		width: 1024px;
	}
}



/* 見出し */
.u--head02[class] {
	margin-bottom: 32px;
	font-weight: 700;
}

h2.u--head02,
.u--head02 h2 {
	margin-bottom: 16px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 40px;
	line-height: 1;
}

.u--head02 p {
	font-size: 20px;
}

.u--head02 p + p {
	margin-top: 4px;
	font-size: 32px;
}

.u--head02 p span {
	font-size: var(--font-size-default);
}

.u--head03 {
	margin-bottom: 16px;
	font-size: 20px;
	font-weight: 700;
}

@media screen and (min-width:768px) {
	.u--head02[class] {
		margin-bottom: 40px;
	}
	h2.u--head02,
	.u--head02 h2 {
		margin-bottom: 24px;
		font-size: 64px;
	}
	.u--head02 p {
		font-size: 24px;
	}
	.u--head03 {
		margin-bottom: 32px;
		font-size: 24px;
	}
}










/* =====================================================
--------------------------------------------------------
フッター
--------------------------------------------------------
===================================================== */

footer {
	margin: 24px 0 32px;
	font-size: 14px;
	text-align: center;
}