/* =======================================================================================
	サイト固有
======================================================================================= */
/* ***************************************************************************************
	load | @importより上にコード記述不可。
*************************************************************************************** */
/* ----------------------------------------------------------------------------
 * [ Jost ]
 * CODE	:
 *		font-family: "Jost", sans-serif;
 * 		font-optical-sizing: auto;
 * 		font-weight: 100..900;
 * 		font-style: normal | italic;
 */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');


/* ============================================================================
	CssCustomProperties 											2026.06
============================================================================ */
	:root {
		/* 余白 */
		--smarthome-marpad-M:	100px;
		--smarthome-serviceIntroduction-overlapWidth:	5.5rem;

		/* HOMETACTが叶えてくれること */
		--smarthome-font_family-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
		--smarthome-font_family-en_1: "Jost", sans-serif;
		--smarthome-hometactColor-main:		162, 163, 93;	/* rgb | #a2a35d */
		--smarthome-hometactColor-dark:		132, 139, 45;	/* rgb | #848b2d */
	}
@media (max-width: 768px) {
	:root {
		/* 余白 */
		--smarthome-marpad-M:	60px;
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	:root {
		--smarthome-serviceIntroduction-overlapWidth:	4rem;
	}
}





/* ========================================================================
	COMMON
======================================================================== */
	:where(main) em {
		font-style: normal;
	}

/* Symbol List */
	.symList-kome {
		display:block!important;
		font-family: var(--site-font_family-sans, sans-serif);
		margin-top: 1em;
	}
	.symList-kome .symItem {display:table;width:100%;clear:both;}
	.symList-kome .sym {display:table-cell;white-space:nowrap;padding-right:0.25em;  font-style: normal;}
	.symList-kome .sym + span {display:table-cell;width:100%;}


/* BASE
------------------------------------------------------------------------ */
/* 左右余白40px→15pxにする（div.wrap.is_wrap_padS）
----------------------- */
@media (max-width: 768px) {
	.is_wrap_padS {
		padding-left: 15px;
		padding-right: 15px;
	}
}


/* 見出し
------------------------------------------------------------------------ */
	:where(main) [class*="hStyh"] {
		line-height: 1.6;
		text-align: center;
		letter-spacing: .07em;
	}
	:where(main) [class*="hStyh"] .en {
		font-family: var(--site-font_family-en_1);
		font-size: 1.105em;
	}
	:where(main) .hStyh3 {
		font-size: 26px;
		letter-spacing: .12em;
		margin-bottom: 40px;
	}
	:where(main) .hStyh4 {
		font-size: 20px;
		margin-bottom: 30px;
	}
@media (max-width: 768px) {
	:where(main) [class*="hStyh"] {
		letter-spacing: .05em;
	}
	:where(main) .hStyh3 {
		font-size: 20px;
		letter-spacing: .05em;
		margin-bottom: 30px;
	}
	:where(main) .hStyh4 {
		font-size: 16px;
		margin-bottom: 20px;
	}
}





/* ========================================================================
	PAGE
======================================================================== */

	.smarthome-items {
		font-size: 15px;
		letter-spacing: .1em;
	}
@media (max-width: 768px) {
	.smarthome-items {
		font-size: 13px;
		letter-spacing: .01em;
	}
}



/* ------------------------------------------------------------------------
	smarthomeIntroWrap
------------------------------------------------------------------------ */
	.smarthomeIntroWrap {
		padding-bottom: var(--smarthome-marpad-M);
	}
	.smarthomeIntroWrap .heding {
	}
	.smarthomeIntroWrap .txtBox {
		line-height: 2.25;
		text-align: center;
	}
	.smarthomeIntroWrap .hometactLogo {
		width: 231px;
		margin-top: 45px;
		margin-left: auto;
		margin-right: auto;
	}
	.smarthomeIntroWrap .hometactLogo a {
		display: block;
	}
	.smarthomeIntroWrap .capBox {
		text-align: center;
		margin-top: 45px;
	}
	.smarthomeIntroWrap .capBox .caption {
		display: block;
		line-height: 2.25;
		color: inherit;
		font-family: var(--site-font_family-sans, sans-serif);
		margin-top: 1em;
	}
	.smarthomeIntroWrap .capBox a.url {
		display: inline-block;
		word-break: break-all;
		text-decoration: underline;
	}
	@media (hover: hover) and (pointer: fine) {
		.smarthomeIntroWrap .capBox a.url:hover {
			text-decoration: none;
		}
	}
	.smarthomeIntroWrap .capBox a.url:focus-visible {
			text-decoration: none;
	}
@media (max-width: 768px) {
	.smarthomeIntroWrap .txtBox {
		line-height: 2;
		text-align: justify;
	}
	.smarthomeIntroWrap .hometactLogo {
		width: min(55%, 190px);
		margin-top: 37px;
	}
	.smarthomeIntroWrap .capBox {
		text-align: left;
		margin-top: 37px;
	}
}



/* ------------------------------------------------------------------------
	securityWrap
------------------------------------------------------------------------ */
	.securityWrap {
		background: #efefef;
		padding-top: var(--smarthome-marpad-M);
		padding-bottom: var(--smarthome-marpad-M);
	}

/* faceKeyWrap
---------------------------------------------------- */
	.faceKeyWrap {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
		align-content: center;
		gap: 0 40px;
	}
	.faceKeyWrap .heding {
		text-align: left;
	}
	.faceKeyWrap .txt {
		line-height: 1.75;
	}
	.faceKeyWrap .picBox {
		letter-spacing: .01em;
	}
@media (max-width: 768px) {
	.faceKeyWrap {
		grid-template-columns: 1fr;
		gap: 30px 0;
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* faceKeyFlow
---------------------------------------------------- */
	.faceKeyFlow {
		margin-top: 40px;
	}
	.faceKeyFlow .pic {
	}
	.faceKeyFlow .caption {
		display: block;
		text-align: right;
		margin-top: .4em;
	}



/* ------------------------------------------------------------------------
	smarthomeDevicesWrap
------------------------------------------------------------------------ */
	.smarthomeDevicesWrap {
		background: #fff;
		padding-top: var(--smarthome-marpad-M);
		padding-bottom: var(--smarthome-marpad-M);
	}

/* smarthomeDevicesBox
---------------------------------------------------- */
	.smarthomeDevicesBox {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30px 20px;
		max-width: 865px;
		margin-left: auto;
		margin-right: auto;
	}
	.smarthomeDevicesBox button {
		letter-spacing: .01em;
	}
	.smarthomeDevicesBox button img {
		transition: opacity .2s ease-out;
	}
	@media (hover: hover) and (pointer: fine) {
		.smarthomeDevicesBox button:hover img {
			opacity: .75;
		}
	}
@media (max-width: 768px) {
	.smarthomeDevicesBox {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px 5px;
		max-width: 500px;
	}
}

/* smarthomeDevicesModal | .planModalからの流用（一部調整★★★）
---------------------------------------------------- */
@media (max-width: 768px) {
  .smarthomeDevicesModal .modalItem__bg {
    pointer-events: none;
  }
}

@media screen and (min-width: 769px) {
  .smarthomeDevicesModal .modalItem .modalContent {
    height: auto;
    margin: 80px 0 0;
    max-height: calc(100% - 160px);
  }
}

@media (max-width: 768px) {
  .smarthomeDevicesModal .modalItem .modalContent {
    /*height: 100%; ★★★*/
    width: 305px;
    height: auto;      /* 一番長いコンテンツに合わせた高さにする。★★★*/
	max-height: 100%;  /* 上限設定（はみ出す長さならスクロールバーを出す）★★★*/
  }
}

.smarthomeDevicesModal .modalItem .modalContent__inner {
  background-color: #ffffff;
  padding: 40px 0;
}

@media (max-width: 768px) {
  .smarthomeDevicesModal .modalItem .modalContent__inner {
    padding: 0;
  }
}

.smarthomeDevicesModal .modalItem .modalContent .swiper-button-prev,
.smarthomeDevicesModal .modalItem .modalContent .swiper-button-next {
  background: none;
  margin-top: 0;
  /*outline: none; は不可。必ず表示させてください。★★★*/
  position: fixed;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

@media screen and (min-width: 769px) {
  .smarthomeDevicesModal .modalItem .modalContent .swiper-button-prev,
  .smarthomeDevicesModal .modalItem .modalContent .swiper-button-next {
    height: 108px;
    padding: 20px;
    width: 75px;
  }
}

@media (max-width: 768px) {
  .smarthomeDevicesModal .modalItem .modalContent .swiper-button-prev,
  .smarthomeDevicesModal .modalItem .modalContent .swiper-button-next {
    height: 34px;
    width: 17.5px;
  }
}

.smarthomeDevicesModal .modalItem .modalContent .swiper-button-prev:before, .smarthomeDevicesModal .modalItem .modalContent .swiper-button-prev:after,
.smarthomeDevicesModal .modalItem .modalContent .swiper-button-next:before,
.smarthomeDevicesModal .modalItem .modalContent .swiper-button-next:after {
  content: '';
}

@media screen and (min-width: 769px) {
  .smarthomeDevicesModal .modalItem .modalContent .swiper-button-prev {
    /*left: calc((100vw - 1040px) / 3); ★★★*/
	left: calc(50% - (min((860 / 1140 * 100vw), 1040px) / 2) - 75px - 50px);/*★★★*/
  }
}

@media screen and (min-width: 769px) {
  .smarthomeDevicesModal .modalItem .modalContent .swiper-button-next {
    /*right: calc((100vw - 1040px) / 3); ★★★*/
	right: calc(50% - (min((860 / 1140 * 100vw), 1040px) / 2) - 75px - 50px);/*★★★*/
  }
}

@media screen and (min-width: 769px) {
  .smarthomeDevicesModal .modalItem .modalSlider {
    width: 1040px;
  }
}

.smarthomeDevicesModal .modalItem .modalSlider.is-open .swiper-wrapper,
.smarthomeDevicesModal .modalItem .modalSlider.is-open .swiper-slide {
  -webkit-transition: .4s ease !important;
  transition: .4s ease !important;
}

.smarthomeDevicesModal .modalItem .modalSlider .swiper-wrapper {
  height: initial;
}

/* smarthomeDevicesDetail | モーダル開いた後の詳細情報
---------------------------------------------------- */
	.smarthomeDevicesDetail {
		display: grid;
		grid-template-columns: 460px 370px;
		justify-content: space-between;
		align-items: center;
		padding: 50px 80px;
	}
	.smarthomeDevicesDetail .picBox {}
	.smarthomeDevicesDetail .txtBox {}
	.smarthomeDevicesDetail .txtBox .ttl {
		line-height: 1.45;
		font-size: 1.35em;
	}
	.smarthomeDevicesDetail .txtBox .ttl .sml {
		font-size: max(11px, .7em);
	}
	.smarthomeDevicesDetail .txtBox .txt {
		line-height: 1.6;
		margin-top: 1em;
	}
	.smarthomeDevicesDetail .txtBox .txt .cap {
		display: block;
		line-height: 1.45;
		font-size: max(10px, .7em);
		letter-spacing: .07em;
		margin-top: 1.2em;
	}
@media (max-width: 768px) {
	.smarthomeDevicesDetail {
		grid-template-columns: 1fr;
		gap: 19px 0;
		padding: 20px;
	}
}



/* ------------------------------------------------------------------------
	newlifeWrap
------------------------------------------------------------------------ */
	.newlifeWrap {
		background: #f7f7f7;
		padding-top: var(--smarthome-marpad-M);
		padding-bottom: var(--smarthome-marpad-M);
	}

/* newlifeBox
---------------------------------------------------- */
	.newlifeBox {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: calc(1.9em + .2em) 40px;
	}
	.newlifeBox .unit {
		padding-bottom: 1.9em;
		border-bottom: 1px solid;
	}
	.newlifeBox .pic {
		letter-spacing: .01em;
	}
	.newlifeBox .ttl {
		margin-top: .8em;
		margin-bottom: .6em;
	}
	.newlifeBox .txt {
		line-height: 1.5;
		letter-spacing: .07em;
	}
@media (max-width: 768px) {
	.newlifeBox {
		grid-template-columns: 1fr;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}
}






/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	usefulSectionWrap | HOMETACTが叶えてくれること
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
	.usefulSectionWrap {
		background: #fff;
		padding-top: var(--smarthome-marpad-M);
		padding-bottom: calc(var(--smarthome-marpad-M) + var(--smarthome-serviceIntroduction-overlapWidth, 5.5rem)); /* 後続コンテンツの重なり縦幅をプラスする */
	}
	.usefulSectionWrap button {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		color: inherit;
		font: inherit;
		text-align: inherit;
		background: transparent;
		border: none;
		border-radius: 0;
	}
	.usefulSectionWrap button:not([disabled]) {
		cursor: pointer;
	}


/* usefulSection
---------------------------------------------------- */
	.usefulSection {
		background: #efefef;
		padding: calc(var(--smarthome-marpad-M) + 10px) 60px;
		box-shadow: 0 0 0 14px #efefef inset, 0 0 0 15px rgba(var(--smarthome-hometactColor-main), 1) inset;
	}
@media (max-width: 768px) {
	.usefulSection {
		padding-left: 26px;
		padding-right: 26px;
		box-shadow: 0 0 0 7px #efefef inset, 0 0 0 8px rgba(var(--smarthome-hometactColor-main), 1) inset;
	}
}


/* usefulSectionHeader
---------------------------------------------------- */
	.usefulSectionHeader {
		text-align: center;
	}
	.usefulSection .heding {
		margin-left: auto;
		margin-right: auto;
	}
	.usefulSectionHeader .leadTxt {
		line-height: 2;
		font-size: 1.133333em;
		letter-spacing: .09em;
		margin-top: 2.3em;
	}
	.usefulSectionHeader .leadTxt .note {
		font-family: inherit;
		font-size: .777778em;
		text-align: center;
	}
@media (max-width: 768px) {
	.usefulSection .heding {
		width: min(59%, 200px);
	}
	.usefulSectionHeader .leadTxt {
		line-height: 1.85;
		font-size: 1.05em;
		letter-spacing: .05em;
		margin-top: 1.75em;
	}
}


/* usefulSectionBody
---------------------------------------------------- */
	.usefulSectionBody {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px 0;
		font-family: var(--smarthome-font_family-sans, sans-serif);
		margin-top: calc(var(--smarthome-marpad-M) - 30px);
	}
@media (max-width: 768px) {
	.usefulSectionBody {
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* button------------------------- */
	.usefulSectionBody .js_slideToggleFocusBtn {
		--smarthome-usefulContentsToggleBtn-icon-width: 25px;
		--smarthome-usefulContentsToggleBtn-icon-right: 25px;
		--smarthome-usefulContentsToggleBtn-padding_lr: calc(.25em + var(--smarthome-usefulContentsToggleBtn-icon-width) + var(--smarthome-usefulContentsToggleBtn-icon-right));
		display: block;
		position: relative;
		z-index: 0;
		width: 100%;
		line-height: 1.35;
		color: #000;
		font-size: 1.25em;
		/*font-weight: 300;*/
		text-align: center;
		letter-spacing: .1em;
		background: #fff;
		padding: calc(.725em + 7px) var(--smarthome-usefulContentsToggleBtn-padding_lr);
		box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .15);
	}
	.usefulSectionBody .js_slideToggleFocusBtn::before {
		content: "";
		display: block;
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: rgba(var(--smarthome-hometactColor-main), .05);
		transform: scaleX(0);
		transform-origin: right;
		transition: transform 0.25s cubic-bezier(0, 0.62, 0.33, 0.99);
	}
	.usefulSectionBody .js_slideToggleFocusBtn .txt {
	}
	.usefulSectionBody .js_slideToggleFocusBtn .icon {
		position: absolute;
		inset: 0 var(--smarthome-usefulContentsToggleBtn-icon-right) 0 auto;
		z-index: 0;
		width: var(--smarthome-usefulContentsToggleBtn-icon-width);
		aspect-ratio: 1;
		margin: auto;
	}
	.usefulSectionBody .js_slideToggleFocusBtn .icon::before,
	.usefulSectionBody .js_slideToggleFocusBtn .icon::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		border: 0 solid rgba(var(--smarthome-hometactColor-main), 1);
		margin: auto;
		transition: transform 0.25s cubic-bezier(0, 0.62, 0.33, 0.99);
	}
	.usefulSectionBody .js_slideToggleFocusBtn .icon::before {
		height: 0;
		border-top-width: 1px;
	}
	.usefulSectionBody .js_slideToggleFocusBtn .icon::after {
		width: 0;
		border-left-width: 1px;
	}
	/* open時 */
	.usefulSectionBody .js_slideToggleFocusWrapper[aria-expanded="true"] .js_slideToggleFocusBtn .txt {
		color: rgba(var(--smarthome-hometactColor-dark), 1);
	}
	.usefulSectionBody .js_slideToggleFocusWrapper[aria-expanded="true"] .js_slideToggleFocusBtn .icon::after {
		display: none;
	}
	/* hover */
	@media (hover: hover) and (pointer: fine) {
		.usefulSectionBody .js_slideToggleFocusBtn:hover::before {
			transform: scaleX(1);
			transform-origin: left;
		}
		.usefulSectionBody .js_slideToggleFocusWrapper[aria-expanded="false"] .js_slideToggleFocusBtn:hover .icon::before,
		.usefulSectionBody .js_slideToggleFocusWrapper[aria-expanded="false"] .js_slideToggleFocusBtn:hover .icon::after {
			transform: rotate(90deg);
		}
	}
	.usefulSectionBody .js_slideToggleFocusBtn:focus-visible::before {
			transform: scaleX(1);
			transform-origin: left;
	}
	.usefulSectionBody .js_slideToggleFocusWrapper[aria-expanded="false"] .js_slideToggleFocusBtn:focus-visible .icon::before,
	.usefulSectionBody .js_slideToggleFocusWrapper[aria-expanded="false"] .js_slideToggleFocusBtn:focus-visible .icon::after {
			transform: rotate(90deg);
		}
@media (max-width: 768px) {
	.usefulSectionBody .js_slideToggleFocusBtn {
		--smarthome-usefulContentsToggleBtn-icon-width: 17px;
		--smarthome-usefulContentsToggleBtn-icon-right: 12px;
	}
}

/* contents------------------------- */
	.usefulSectionBody .js_slideToggleFocusContent {
		transition: height 0.3s ease;
		/*overflow: hidden;*/		/* ///// 初期値 overflow: hidden; height: 0; | JSで開閉します ///// */
	}

	.usefulSceneWrap {
		background: #fff;
		padding: 24px 0;
	}
	.usefulSceneWrap .sceneGridBox {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 40px;
		width: 95.652173%;
		max-width: 880px;
		margin-left: auto;
		margin-right: auto;
								/*background: pink;*/
	}
	.usefulSceneWrap .sceneGridBoxInner {
								/*background: skyblue;*/
	}

	/* usefulSceneCaseSection
	--------------------------------- */
	.usefulSceneCaseSection {
		display: grid;
		grid-template: 
			"number description" auto
			".      picture"     1fr /
			4.6em   1fr;
		gap: 0;
		font-size: .933333em;
		padding: 2.85em 0;
	}
	.usefulSceneCaseSection .caseNumber {		grid-area: number;}
	.usefulSceneCaseSection .caseDescription {	grid-area: description}
	.usefulSceneCaseSection .casePicture {		grid-area: picture;}

	.usefulSceneCaseSection ~ .usefulSceneCaseSection {
		border-top: 1px dashed rgba(var(--smarthome-hometactColor-main), 1);
	}
	.usefulSceneCaseSection .caseNumber {
		display: grid;
		grid-template-columns: 1fr 5px;
		gap: 0;
		font-family: var(--smarthome-font_family-en_1);
	}
	.usefulSceneCaseSection .caseNumber::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		border: 0 solid rgba(var(--smarthome-hometactColor-main), 1);
		border-width: 0 1px 0 2px;
	}
	.usefulSceneCaseSection .caseNumber .num {
		display: block;
		line-height: 1.35;
		color: #9fa0a0;
		font-size: 1.857142em;
		letter-spacing: .06em;
		text-align: center;
	}
	.usefulSceneCaseSection .caseDescription {
		line-height: 1.8;
		font-size: 1em;
		letter-spacing: .05em;
		padding-left: 1em;
	}
	.usefulSceneCaseSection .casePicture {
		position: relative;
		margin-top: 35px;
	}
	.usefulSceneCaseSection .casePicture img {
		width: 100%;
		max-width: none;
		height: auto;
	}
	.usefulSceneCaseSection .casePicture .capBox {
		display: block;
		margin-top: 1em;
	}
@media (max-width: 768px) {
	.usefulSceneWrap {
		padding: 10px 0;
	}
	.usefulSceneWrap .sceneGridBox {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.usefulSceneWrap .sceneGridBoxInner ~ .sceneGridBoxInner {
		border-top: 1px dashed rgba(var(--smarthome-hometactColor-main), 1);
	}
	/* usefulSceneCaseSection
	--------------------------------- */
	.usefulSceneCaseSection {
		grid-template: 
			"number  description" auto
			"picture picture"     1fr /
			4.6em    1fr;
	}
	.usefulSceneCaseSection .caseDescription br:not(.brImportant) {
		display: none;
	}
}






/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	serviceIntroductionWrap | サービスのご紹介
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
						/*.serviceIntroductionWrap__header {background: rgba(0, 0, 0, .1) !important;}
						.serviceIntroductionWrap__header .heding {background: rgba(255, 0, 0, .1) !important;}
						.serviceIntroductionWrap__header .heding::before {background: rgba(0, 0, 255, .1) !important;}*/

	.serviceIntroductionWrap {
		--_header-translateY: var(--smarthome-serviceIntroduction-overlapWidth, 5.5rem); /* {★1} */
		--_header-paddingTop: 3.35rem; /* {★2} */
		padding-top: 0;
		padding-bottom: calc(var(--smarthome-marpad-M) - 10px);
		background: #f7f7f7;
	}
	.serviceIntroductionWrap__header {
		display: grid;
		place-content: center;
		overflow: hidden;
		line-height: 1.65;
		font-size: 1.25rem;
		text-align: center;
		letter-spacing: .17em;
		margin-bottom: calc(var(--_header-translateY) * -1);		/* {★1} translateではみ出した分を相殺 */
		padding: var(--_header-paddingTop) 2em 1rem;				/* {★2} 上余白。楕円背景の上辺位置を確保 */
		translate: 0 calc(var(--_header-translateY) * -1);			/* {★1} 上にはみ出す */
	}
	.serviceIntroductionWrap__header .heding {
		position: relative;
		z-index: 0;
		margin: 0;
		padding: 0;
	}
	.serviceIntroductionWrap__header .heding::before {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		z-index: -1;
		width: 100%;
		aspect-ratio: 1 / .8;
		background: #f7f7f7;
		clip-path: ellipse(50% 50% at 50% 50%);
		scale: 2.1;
		translate: 0 calc(var(--_header-paddingTop) * -1);			/* {★2} .serviceIntroductionWrap__header の上辺までずらす */
		transform-origin: center top;
	}
	.serviceIntroductionWrap__header .heding i {
		font-size: 1.3em;
		font-style: normal;
	}
	.serviceIntroductionWrap__body {
	}

	/* serviceIntroductionLogoBox
	---------------------------------------------------- */
	.serviceIntroductionLogoBox {
		max-width: 900px;
		margin-top:	60px;
		margin-left: auto;
		margin-right: auto;
	}
	.serviceIntroductionLogoBox .inner {
		padding-top: 60px;
		padding-bottom: 45px;
		background: #fff;
		border-radius: 50px;
	}
	.serviceIntroductionLogoBox .logo_hometact {
		width: calc(538 / 900 * 100%);
		margin-left: auto;
		margin-right: auto;
	}
	/*.serviceIntroductionLogoBox .logo_corp {
		width: calc(176 / 900 * 100%);
		margin-top: 5%;
		margin-left: auto;
		margin-right: auto;
	}*/

	/* serviceIntroductionLogoBox
	---------------------------------------------------- */
	.serviceIntroductionLeadTxtBox {
		margin-top:	60px;
	}
	.serviceIntroductionLeadTxtBox .txt {
		font-size: 18px;
		line-height: 2.1;
		text-align: center;
		letter-spacing: .1em;
	}
	.serviceIntroductionLeadTxtBox .txt .note {
		font-family: inherit;
		font-size: .777778em;
		text-align: center;
	}

	/* serviceIntroductionMovieBnrBox
	---------------------------------------------------- */
	.serviceIntroductionMovieBnrBox {
		margin-top:	60px;
	}
	.serviceIntroductionMovieBnrBox .movieBnr a {
		display: block;
		box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .035);
		transition: opacity .13s ease-out;
	}
	@media (hover: hover) and (pointer: fine) {
	.serviceIntroductionMovieBnrBox .movieBnr a:hover {
			opacity: .7;
		}
	}
	.serviceIntroductionMovieBnrBox .movieBnr a:focus-visible {
			opacity: .7;
	}

@media (max-width: 768px) {
	/* serviceIntroductionLogoBox
	---------------------------------------------------- */
	.serviceIntroductionLogoBox {
		margin-top: 40px;
	}
	.serviceIntroductionLogoBox .inner {
		padding-top: 30px;
		padding-bottom: 25px;
		border-radius: 30px;
	}
	.serviceIntroductionLogoBox .logo_hometact {
		width: 77%;
		max-width: 420px;
	}
	/*.serviceIntroductionLogoBox .logo_corp {
		width: 30%;
		max-width: 160px;
		margin-top: min(6.5%, 41px);
	}*/
	.serviceIntroductionLeadTxtBox .txt {
		font-size: 14px;
		line-height: 1.8;
	}
	/* serviceIntroductionLogoBox
	---------------------------------------------------- */
	.serviceIntroductionLeadTxtBox {
		margin-top:	40px;
	}
	/* serviceIntroductionMovieBnrBox
	---------------------------------------------------- */
	.serviceIntroductionMovieBnrBox {
		margin-top:	40px;
	}
	.serviceIntroductionMovieBnrBox .movieBnr a {
		max-width: 450px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media (max-width: 520px) {
	.serviceIntroductionWrap {
		/*--_header-translateY: var(--smarthome-serviceIntroduction-overlapWidth, 4rem);*/
		--_header-paddingTop: 2rem;
	}
	.serviceIntroductionWrap__header {
		font-size: 1rem;
		line-height: 1.45;
	}
	.serviceIntroductionWrap__header .heding::before {
		scale: 1.75;
	}
}






/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	aboutappWrap | アプリについて
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
	.aboutappWrap {
		background: #f7f7f7;
		padding-top: var(--smarthome-marpad-M);
		padding-bottom: var(--smarthome-marpad-M);
	}
	.aboutappWrapHeading {
		--_bdColorPos_start:	calc(50% - 40px);
		--_bdColorPos_end:		calc(50% + 40px);
		margin-bottom: 50px;
		padding-bottom: 1em;
		border-bottom: 1px solid #bcbcbc;
		border-image: linear-gradient(to right, #bcbcbc var(--_bdColorPos_start), #ea6897 var(--_bdColorPos_start) var(--_bdColorPos_end), #bcbcbc var(--_bdColorPos_end));
		border-image-slice: 1;
	}
@media (max-width: 768px) {
	.aboutappWrapHeading {
		--_bdColorPos_start:	40%;
		--_bdColorPos_end:		60%;
		margin-bottom: 30px;
		padding-bottom: .6em;
		margin-left: -12px;
		margin-right: -12px;
	}
}

/* hometactIntroWrap
------------------------------------------------------------------------ */
	.hometactIntroWrap {}

/* hometactIntroBox
---------------------------------------------------- */
	.hometactIntroBox {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		align-content: center;
		gap: 0 5.5%;
		max-width: 920px;
		margin-left: auto;
		margin-right: auto;
	}
	.hometactIntroBox .txtBox {}
	.hometactIntroBox .txtBox .heding {
		line-height: 2;
		text-align: left;
		letter-spacing: .12em;
		margin-bottom: 0;
	}
	.hometactIntroBox .txtBox .heding sup.kome {
		display: inline-block;
		margin-left: -.3em;
		scale: .85;
		transform-origin: top left;
	}
	.hometactIntroBox .txtBox .logo {
		width: 70%;
		max-width: 312px;
		margin-top: 25px;
	}
	.hometactIntroBox .txtBox .cap {
		line-height: 1.65;
		letter-spacing: .06em;
		margin-top: 55px;
	}
	.hometactIntroBox .txtBox .cap a.url {
		display: inline-block;
		word-break: break-all;
		text-decoration: underline;
	}
	@media (hover: hover) and (pointer: fine) {
		.hometactIntroBox .txtBox .cap a.url:hover {
			text-decoration: none;
		}
	}
	.hometactIntroBox .txtBox .cap a.url:focus-visible {
			text-decoration: none;
	}

	.hometactIntroBox .picBox {}
	.hometactIntroBox .picBox img {
		width: 100%;
		max-width: 158px;
		height: auto;
	}
@media (max-width: 768px) {
	.hometactIntroBox {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.hometactIntroBox .txtBox .heding {
		text-align: center;
	}
	.hometactIntroBox .txtBox .logo {
		margin-top: 35px;
		margin-left: auto;
		margin-right: auto;
	}
	.hometactIntroBox .txtBox .cap {
		font-size: 84%;
		margin-top: 45px;
	}
	.hometactIntroBox .picBox {
		text-align: center;
		margin-top: 35px;
	}
	.hometactIntroBox .picBox img {
		max-width: 170px;
	}
}

/* hometactPointListWrap
---------------------------------------------------- */
	.hometactPointListWrap {
		margin-top: 50px;
	}
	.hometactPointList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 40px 40px;
	}
	.hometactPointList .pointUnit {
		position: relative;
		width: 100%;
		padding: 35px 49px;
		border: 1px solid #bcbcbc;
	}
	.hometactPointList .pointUnit:nth-of-type(-n+2) {
		width: calc((100% - 40px) / 2);
	}
	.hometactPointList .pointUnit dt {
		color: #000;
		margin-bottom: 1.5em;
		border-bottom: 2px solid;
	}
	.hometactPointList .pointUnit dt .ttl {
		display: block;
		margin-bottom: -1px;
	}
	.hometactPointList .pointUnit dd {
		line-height: 1.75;
		text-align: justify;
	}
	/* -- Individual -- */
	.hometactPointList .pointUnit.point1 dt .ttl {
		width: calc(32.83% + 15%);
		max-width: 174px;
	}
	.hometactPointList .pointUnit.point2 dt .ttl {
		width: calc(32.452% + 15%);
		max-width: 172px;
	}
	.hometactPointList .pointUnit.point3 dt .ttl {
		width: calc(29% + 7%);
		max-width: 319px;
	}
	.hometactPointList .pointUnit.point3 .interfacePicBox {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 40px;
		width: 100%;
		max-width: 454px;
		margin: 30px auto 0;
	}
	.hometactPointList .pointUnit.point3 .interfacePicBox .interfacePic img {
		box-shadow: 0 0 0 1px #eaeaea;
	}
	.hometactPointList .pointUnit.point3 .interfacePicBox .interfacePic small {
		display: inline-block;
		line-height: 1.35;
		font-family: inherit;
		font-size: 1em;
		text-align: left;
		letter-spacing: normal;
		margin-top: .4em;
	}
@media (max-width: 768px) {
	.hometactPointListWrap {
		margin-top: 40px;
	}
	.hometactPointList {
		gap: 16px 0;
	}
	.hometactPointList .pointUnit {
		padding: 30px 22px 23px;
	}
	.hometactPointList .pointUnit:nth-of-type(n) {
		width: 100%;
	}
	/* -- Individual -- */
	.hometactPointList .pointUnit.point1 dt .ttl {
		width: calc(24.167% + 30%);
	}
	.hometactPointList .pointUnit.point2 dt .ttl {
		width: calc(23.889% + 30%);
	}
	.hometactPointList .pointUnit.point3 dt .ttl {
		width: calc(44.3056% + 50%);
	}
	.hometactPointList .pointUnit.point3 .interfacePicBox {
		gap: 0 5%;
		margin-top: 20px;
	}
	.hometactPointList .pointUnit.point3 .interfacePicBox .interfacePic small {
		font-size: max(11px, .875em);
	}
}

/* aboutappMySettingBox | シーン、タイミングを設定
------------------------------------------------------------------------ */
	.aboutappMySettingBox {
		margin-top: 70px;
		border: 1px solid #bcbcbc;
	}
	[data-aboutapp_my_setting_box="scene"] {}
	[data-aboutapp_my_setting_box="timing"] {}

	.aboutappMySettingBox .aboutappMySettingHeading {
		line-height: 1.5;
		color: #fff;
		background: #4c4c4c;
		margin: -1px -1px 0;
		padding: .35em;
	}
	.aboutappMySettingBox .aboutappMySettingLeadTxt {
		line-height: 1.75;
		padding: 38px 49px 0;
	}
	.aboutappMySettingBox > .flowList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 40px 49px;
	}
	.aboutappMySettingBox .flowUnit {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
		width: 29.34783%;
		margin: 0 0 0;
	}
	.aboutappMySettingBox .flowUnit > * {
		width: 100%;
	}
	.aboutappMySettingBox .flowUnit dt {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		line-height: 1.35;
		font-size: 1.0714em;
		text-align: center;
		border: 0px double #7b7b7b;
		border-width: 3px 0;
		margin-top: 15px;
		padding: 0.5em 1em;
	}
	.aboutappMySettingBox .flowUnit dd {
		margin: 0;
		padding: 0;
	}
	.aboutappMySettingBox .flowUnit .flowPicBox {
		position: relative;
		order: -1;
	}
	.aboutappMySettingBox .flowUnit .flowPicBox .arrow {
		display: block;
		position: absolute;
		top: 0; bottom: 0; left: 0; right: auto;
		width: 9%;
		height: 0;
		margin: auto;
		padding-top: 9%;
		transform: translateX(-165%);
	}
	.aboutappMySettingBox > .flowList .flowUnit:first-child .flowPicBox .arrow {
		display: none;
	}
	.aboutappMySettingBox .flowUnit .flowPicBox .arrow::before,
	.aboutappMySettingBox .flowUnit .flowPicBox .arrow::after {
		content: "";
		display: block;
		position: absolute;
		top: 0; bottom: 0; left: 0; right: 0;
		width: 60%;
		height: 0;
		margin: auto;
		padding-top: 60%;
		border: 0 solid #000;
		border-width: 1.5px 1.5px 0 0;
		transform: translateX(-50%) rotate(45deg);
	}
	.aboutappMySettingBox .flowUnit .flowPicBox .arrow::before {
		left: 45%;
	}
	.aboutappMySettingBox .flowUnit .flowPicBox .flowPic {}

	.aboutappMySettingBox .flowUnit .flowTxtBox {
		line-height: 1.55;
	}
	.aboutappMySettingBox .flowUnit .flowTxtBox .flowTxt {
		margin-top: 10px;
	}
@media (max-width: 768px) {
	.aboutappMySettingBox {
		margin-top: 50px;
	}
	.aboutappMySettingBox .flowUnit {
		width: 100%;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}
	.aboutappMySettingBox .aboutappMySettingLeadTxt {
		text-align: justify;
		padding: 25px 22px 30px;
		border-bottom: 1px solid #bcbcbc;
	}
	.aboutappMySettingBox > .flowList {
		padding: 30px 22px;
	}
	.aboutappMySettingBox .flowUnit:nth-of-type(n+2) {
		margin-top: calc(35px + (19px * 2));
	}
	.aboutappMySettingBox .flowUnit .flowPicBox .arrow {
		top: 0; bottom: auto; left: 0; right: 0;
		width: 35px;
		padding-top: 35px;
		transform: translateY(-140%);
	}
	.aboutappMySettingBox .flowUnit .flowPicBox .arrow::before,
	.aboutappMySettingBox .flowUnit .flowPicBox .arrow::after {
		border-width: 2px 2px 0 0;
		transform: translateY(-50%) rotate(135deg);
	}
	.aboutappMySettingBox .flowUnit .flowPicBox .arrow::before {
		top: 40%; left: 0;
	}
}






/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	ownedequItemWrap | お手持ちの機器の連携も可能
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
	.ownedequItemWrap {
		background: #fff;
		padding-top: var(--smarthome-marpad-M);
		padding-bottom: var(--smarthome-marpad-M);
	}
	.ownedequItembox {}
	.ownedequItemboxHeding {}

	.ownedequItemList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 20px auto 0;
	}
	.ownedequItemList li {
		width: 14.53%;
		text-align: center;
	}
	.ownedequItemList li:nth-child(4) {
		width: 32.866%;
	}
	.ownedequItemWrap .ttl {
		width: 100%;
		line-height: 1.35;
		color: #fff;
		font-size: clamp(10px,3.8vw,14px);
		text-align: center;
		background: #4c4c4c;
		margin: 0 auto 10px;
		padding: 0.2em;
	}
	.ownedequItemWrap .cap {
		display: block;
		line-height: 1.55;
		margin-top: 30px;
	}

@media (max-width: 768px) {
	.ownedequItemboxHeding {
		font-size: 17px;
		letter-spacing: .02em;
		padding: .5em 0 .55em;
		border: 0 solid;
		border-width: 1px 0;
	}
	.ownedequItemList {
		gap: 20px 0;
	}
	.ownedequItemList li {
		width: 48%;
	}
	.ownedequItemList li:nth-child(4) {
		width: 100%;
		order: 5;
	}
}





/* ------------------------------------------------------------------------
	ZZZZZZZZZZZZZZZZZZZZWrap
------------------------------------------------------------------------ */
	/*.ZZZZZZZZZZZZZZZZZZZZWrap {
		background: #fff;
		padding-top: var(--smarthome-marpad-M);
		padding-bottom: var(--smarthome-marpad-M);
	}*/