/* ==========================================================================
   かなさホーム — Component の土台
   - アイコン（c-kanasa-icon。truss_kanasa_icon()）: assets/img/kanasa/icons/*.svg（Figma c-icon/* から書き出し）を CSS の mask で描く。
     色は文字の色（currentColor）、大きさは使う所で width・height を決める（初期値 1em）
     基本の指定は :where() で詳細度を 0 にしている（layout-*.css は先に読み込むので、そちらのクラス1つの指定が効くように）
   - ボタン・見出し・パンくず・ページ見出し・よくある質問・コラムのカード・流れ・Instagram の帯・ページ送りは component-*.css
   ========================================================================== */

:where(.c-kanasa-icon) {
	display: inline-block;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: var(--kanasa-icon) center / contain no-repeat;
	mask: var(--kanasa-icon) center / contain no-repeat;
}

.c-kanasa-icon--accessibility {
	--kanasa-icon: url("../../img/kanasa/icons/accessibility.svg");
}

.c-kanasa-icon--alert {
	--kanasa-icon: url("../../img/kanasa/icons/alert.svg");
}

.c-kanasa-icon--arrow-left {
	--kanasa-icon: url("../../img/kanasa/icons/arrow-left.svg");
}

.c-kanasa-icon--arrow-right {
	--kanasa-icon: url("../../img/kanasa/icons/arrow-right.svg");
}

.c-kanasa-icon--award {
	--kanasa-icon: url("../../img/kanasa/icons/award.svg");
}

.c-kanasa-icon--camera {
	--kanasa-icon: url("../../img/kanasa/icons/camera.svg");
}

.c-kanasa-icon--chat {
	--kanasa-icon: url("../../img/kanasa/icons/chat.svg");
}

.c-kanasa-icon--check {
	--kanasa-icon: url("../../img/kanasa/icons/check.svg");
}

.c-kanasa-icon--chevron-right {
	--kanasa-icon: url("../../img/kanasa/icons/chevron-right.svg");
}

.c-kanasa-icon--clipboard {
	--kanasa-icon: url("../../img/kanasa/icons/clipboard.svg");
}

.c-kanasa-icon--clock {
	--kanasa-icon: url("../../img/kanasa/icons/clock.svg");
}

.c-kanasa-icon--door {
	--kanasa-icon: url("../../img/kanasa/icons/door.svg");
}

.c-kanasa-icon--droplet {
	--kanasa-icon: url("../../img/kanasa/icons/droplet.svg");
}

.c-kanasa-icon--external {
	--kanasa-icon: url("../../img/kanasa/icons/external.svg");
}

.c-kanasa-icon--file {
	--kanasa-icon: url("../../img/kanasa/icons/file.svg");
}

.c-kanasa-icon--heart {
	--kanasa-icon: url("../../img/kanasa/icons/heart.svg");
}

.c-kanasa-icon--home {
	--kanasa-icon: url("../../img/kanasa/icons/home.svg");
}

.c-kanasa-icon--instagram {
	--kanasa-icon: url("../../img/kanasa/icons/instagram.svg");
}

.c-kanasa-icon--mail {
	--kanasa-icon: url("../../img/kanasa/icons/mail.svg");
}

.c-kanasa-icon--map-pin {
	--kanasa-icon: url("../../img/kanasa/icons/map-pin.svg");
}

.c-kanasa-icon--menu {
	--kanasa-icon: url("../../img/kanasa/icons/menu.svg");
}

.c-kanasa-icon--minus {
	--kanasa-icon: url("../../img/kanasa/icons/minus.svg");
}

.c-kanasa-icon--phone {
	--kanasa-icon: url("../../img/kanasa/icons/phone.svg");
}

.c-kanasa-icon--plus {
	--kanasa-icon: url("../../img/kanasa/icons/plus.svg");
}

.c-kanasa-icon--shield-check {
	--kanasa-icon: url("../../img/kanasa/icons/shield-check.svg");
}

.c-kanasa-icon--users {
	--kanasa-icon: url("../../img/kanasa/icons/users.svg");
}

.c-kanasa-icon--x {
	--kanasa-icon: url("../../img/kanasa/icons/x.svg");
}

/* URL が決まるまで押せない外部リンク（Instagram。template-parts/kanasa/helpers.php の truss_kanasa_external_tag() が span にする）。
   塗装・防水の押せないボタン（c-button-paint[aria-disabled]）と同じく半透明に。ホバーの変化は各ファイルで a だけに付けている */
body.is-site-kanasa span[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.5;
}

/* ハイコントラストの表示（強制カラー）でもアイコンが見えるように */
@media (forced-colors: active) {
	.c-kanasa-icon {
		background-color: CanvasText;
	}
}