
.main_top h2{font-size: 14px;margin-top: -170px;margin-bottom: 50px; width: 70%;line-height: 1.8}
.main{position: relative;}
.main img{width: 100%;margin: 0 0 0 0;}

.bg_white{background: #FFF;}
.bg_image{background-image: url("../imgs/sh_bg.jpg");background-size: cover;background-position: center;}

.sh01{padding: 100px 0;text-align: center;}
.sh01 h2{font-size: 30px;margin: 50px 0;line-height: 1.6;}
.sh01 h3{font-size: 18px;margin: 50px 0;line-height: 2.2;}
.logoarea{display: flex;justify-content: center;align-items: center;margin: }
.logoarea02{margin: 0 3%;}

.sh02{padding: 100px 0;text-align: center;}
.sh02 h2{font-size: 30px;margin: 50px 0;line-height: 1.6;max-width: 540px;position: relative;margin: 0 auto 40px;height: 92px;}
.sh02 h2::before{line-height: 1.6;background-image: url("../imgs/sh_obj_left.svg");width: 23px;height: 92px;content: "";display: block;position: absolute;top:0;left:0;opacity: 0.7;}
.sh02 h2::after{line-height: 1.6;background-image: url("../imgs/sh_obj_right.svg");width: 23px;height: 92px;content: "";display: block;position: absolute;top:0;right:0;opacity: 0.7;}
.sh02 ul{display: flex;justify-content: space-between;flex-wrap: wrap;max-width: 800px;margin: 0 auto;}
.sh02 li{width: 45%;margin: 0 0 3%;}
.sh02_logo01{max-width: 240px;margin: 15px auto;}
.sh02_logo02{max-width: 120px;margin: 15px auto;padding: 15px 0;}
.sh02_logo03{max-width: 160px;margin: 15px auto;padding: 5px 0;}
.sh02_logo04{max-width: 160px;margin: 15px auto;padding: 15px 0;}
.sh02 h3{font-size: 16px;margin: 0 0 15px;line-height: 1.4;font-weight: bold;}
.sh02 h4{font-size: 14px;margin: 0 0;line-height: 1.6;text-align: left;}
.sh02 h5{font-size: 12px;margin: 5px 0 0 0;line-height: 1.4;text-align: left;}

.sh03{padding: 100px 0;;color: #FFF;}
.sh03 h2{font-size: 24px;margin: 0 0 60px;text-align: center;}
.sh03 h6{font-size: 24px;margin: 0 0 45px;font-family: "Times New Roman", Times, "serif";}
.sh03 h6 .txt_big{font-size: 50px;margin-left: 8px;opacity: 0.6;}
.sh03 h3{font-size: 20px;margin: 0 0 30px;line-height: 1.6;}
.sh03 h4{font-size: 16px;margin: 0 0 30px;line-height: 2;}

.sh03_case01{display: flex;padding: 40px 0;border-top:1px solid #FFF;border-bottom:1px solid #FFF;justify-content: space-between;text-align: left;}
.sh03_case01 .sh_block01{width: 57%;}
.sh03_case01 .sh_block02{width: 38%;position: relative;}

.sh03_case02{display: flex;padding: 40px 0;border-bottom:1px solid #FFF;justify-content: space-between;text-align: right;}
.sh03_case02 .sh_block01{width: 57%;order: 2;}
.sh03_case02 .sh_block03{width: 38%;position: relative;order: 1;padding-top:41%; }
.sh03_case02 .sh_block0301{width: 80%;position: absolute;top: 0;left: 0;}
.sh03_case02 .sh_block0302{width: 45%;position: absolute;right: 0;bottom: 0;}
.sh03 .sh03_case02 h4{text-align: left;}

.sh03_case03{display: flex;padding: 40px 0;border-bottom:1px solid #FFF;justify-content: space-between;text-align: left;}
.sh03_case03 .sh_block01{width: 57%;}
.sh03_case03 .sh_block02{width: 38%;position: relative;}

.sh_caption{position: absolute;text-shadow: 0px 0px 8px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 1);letter-spacing: 0em;font-size: 12px;right: 5px;bottom: 5px;color: #FFF;}
.sh_caption_l{position: absolute;text-shadow: 0px 0px 8px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 1);letter-spacing: 0em;font-size: 12px;left: 5px;bottom: 5px;}
.sh_bcaption{font-size: 12px;line-height: 1.6;margin: 20px 0;text-align: left;}

.sh04{padding: 100px 0;text-align: center;}
.sh04 h2{font-size: 30px;margin: 50px 0;line-height: 1.6;max-width: 540px;position: relative;margin: 0 auto 40px;height: 92px;}
.sh04 h2::before{line-height: 1.6;background-image: url("../imgs/sh_obj_left.svg");width: 23px;height: 92px;content: "";display: block;position: absolute;top:0;left:0;opacity: 0.7;}
.sh04 h2::after{line-height: 1.6;background-image: url("../imgs/sh_obj_right.svg");width: 23px;height: 92px;content: "";display: block;position: absolute;top:0;right:0;opacity: 0.7;}
.sh04_logo{max-width: 280px;margin: 0 auto 30px;}
.sh04_grh01{max-width: 240px;margin: 0 auto 40px;}
.sh04 ul{display: flex;justify-content: space-between;}
.sh04 li{width: 31%;border: 1px solid #666;padding: 20px 15px;}
.sh04 h6{font-size: 24px;margin: 0 0 10px;font-family: "Times New Roman", Times, "serif";}
.sh04 h6 .txt_big{font-size: 52px;;margin-left: 8px;opacity: 0.6;}
.sh04 h3{font-size: 14px;margin: 0;line-height: 1.8;text-align: left;}

.sh04_frame{display: flex;justify-content: center;border: 1px solid #555;flex-wrap: wrap;background: rgba(255,255,255,1.00);padding: 0 0 15px;}
.sh04 h4{font-size: 24px;margin: 0;line-height: 1.8;text-align: left;width: 100%;text-align: center;margin: 20px 0;}
.sh04 h5{font-size: 24px;width: 100%;background: #44423A;color: #FFF;font-size: 14px;padding: 5px 0 7px;}
.sh04_frame_list{width: 15%;margin-right: 2%;}
.sh04_frame_list_long{width: 30%;}

.btn_hometact{margin: 40px 0 0 0;}
.btn_hometact a{transition: opacity 0.3s ease-in-out;}
.btn_hometact a:hover{opacity: 0.8;}

.sh05{text-align: center;margin: 60px 0;}
.sh05 h2{font-size: 24px;margin: 0 0 60px;border-bottom: 1px solid #999;padding-bottom: 5px;}
.sh05 .ttlblock{background: #FFF;border-radius: 40px;padding: 60px 0;max-width: 760px;margin: 0 auto 60px;}
.sh05 .ttlblock01{max-width: 500px;margin: 0 auto 30px;}
.sh05 .ttlblock02{max-width: 500px;margin: 0 auto 30px;}
.sh05 .ttlblock03{max-width: 160px;margin: 0 auto 0;}
.sh05 h3{font-size: 16px;line-height: 2.4;margin: 0 0 10px}
.sh05 h4{font-size: 12px;line-height: 2.4;}

@media (max-width: 768px) {

.main_top h2{font-size: 14px;margin-top: -30px;margin-bottom: 40px; width: 100%;line-height: 1.8}
.main{position: relative;}
.main img{width: 100%;margin: 0 0 0 0;}

.bg_white{background: #FFF;}
.bg_image{background-image: url("../imgs/sh_bg.jpg");background-size: cover;background-position: center;}

.sh01{padding: 50px 0 20px;text-align: center;}
.sh01 h2{font-size: 16px;margin: 20px 0;line-height: 1.6;}
.sh01 h3{font-size: 12px;margin: 15px 0;line-height: 2.2;}
.logoarea{display: flex;justify-content: center;align-items: center;margin: }
.logoarea02{margin: 0 3%;}

.sh02{padding: 50px 0;text-align: center;}
.sh02 h2{font-size: 18px;margin: 50px 0;line-height: 1.6;max-width: 300px;position: relative;margin: 0 auto 20px;height: auto;}
.sh02 h2::before{line-height: 1.6;background-image: url("../imgs/sh_obj_left.svg");width: 12px;height: 48px;content: "";display: block;position: absolute;top:0;left:0;opacity: 0.7;background-size: cover;}
.sh02 h2::after{line-height: 1.6;background-image: url("../imgs/sh_obj_right.svg");width: 12px;height: 48px;content: "";display: block;position: absolute;top:0;right:0;opacity: 0.7;background-size: cover;}
.sh02 ul{display: flex;justify-content: space-between;flex-wrap: wrap;max-width: 800px;margin: 0 10%;}
.sh02 li{width: 100%;margin: 0 0 3%;}
.sh02_logo01{max-width: 180px;margin: 15px auto;}
.sh02_logo02{max-width: 90px;margin: 15px auto;padding: 15px 0;}
.sh02_logo03{max-width: 120px;margin: 15px auto;padding: 5px 0;}
.sh02_logo04{max-width: 120px;margin: 15px auto;padding: 15px 0;}
.sh02 h3{font-size: 16px;margin: 0 0 15px;line-height: 1.4;font-weight: bold;}
.sh02 h4{font-size: 14px;margin: 0 0;line-height: 1.6;text-align: left;}
.sh02 h5{font-size: 10px;margin: 5px 0 0 0;line-height: 1.4;text-align: left;}

.sh03{padding: 50px 0;;color: #FFF;}
.sh03 h2{font-size: 18px;margin: 0 0 30px;line-height: 1.6;}
.sh03 h6{font-size: 18px;margin: 0 0 10px;font-family: "Times New Roman", Times, "serif";}
.sh03 h6 .txt_big{font-size: 50px;margin-left: 8px;opacity: 0.6;}
.sh03 h3{font-size: 16px;margin: 0 0 10px;line-height: 1.6;}
.sh03 h4{font-size: 12px;margin: 0 0 30px;line-height: 2;}

.sh03_case01{display: flex;padding: 20px 0;border-top:1px solid #FFF;border-bottom:1px solid #FFF;justify-content: space-between;text-align: left;flex-wrap: wrap;}
.sh03_case01 .sh_block01{width: 100%;order: 2;}
.sh03_case01 .sh_block02{width: 100%;position: relative;order: 1;margin: 0 0 0 auto;}

.sh03_case02{display: flex;padding: 20px 0;border-bottom:1px solid #FFF;justify-content: space-between;text-align: left;flex-wrap: wrap;}
.sh03_case02 .sh_block01{width: 100%;order: 2;margin-top: -10%}
.sh03_case02 .sh_block03{width: 100%;position: relative;order: 1;padding-top:115%;order: 1;}
.sh03_case02 .sh_block0301{width: 80%;position: absolute;top: 0;left: 0;}
.sh03_case02 .sh_block0302{width: 45%;position: absolute;right: 0;bottom: 0;}
.sh03 .sh03_case02 h4{text-align: left;}

.sh03_case03{display: flex;padding: 20px 0;border-bottom:1px solid #FFF;justify-content: space-between;text-align: left;flex-wrap: wrap;}
.sh03_case03 .sh_block01{width: 100%;order: 2;}
.sh03_case03 .sh_block02{width: 100%;position: relative;order: 1;}

.sh_caption{position: absolute;text-shadow: 0px 0px 8px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 1);letter-spacing: 0em;font-size: 12px;right: 5px;bottom: 5px;color: #FFF;}
.sh_caption_l{position: absolute;text-shadow: 0px 0px 8px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 1);letter-spacing: 0em;font-size: 12px;left: 5px;bottom: 5px;}
.sh_bcaption{font-size: 12px;line-height: 1.6;margin: 20px 0;text-align: left;}

.sh04{padding: 50px 0;text-align: center;}
.sh04 h2{font-size: 18px;margin: 50px 0;line-height: 1.6;max-width: 540px;position: relative;margin: 0 auto 20px;height: auto;}
.sh04 h2::before{line-height: 1.6;background-image: url("../imgs/sh_obj_left.svg");width: 12px;height: 48px;content: "";display: block;position: absolute;top:0;left:0;opacity: 0.7;background-size: cover;}
.sh04 h2::after{line-height: 1.6;background-image: url("../imgs/sh_obj_right.svg");width: 12px;height: 48px;content: "";display: block;position: absolute;top:0;right:0;opacity: 0.7;background-size: cover;}
.sh04_logo{max-width: 210px;margin: 0 auto 30px;}
.sh04_grh01{max-width: 180px;margin: 0 auto 40px;}
.sh04 ul{display: flex;justify-content: space-between;flex-wrap: wrap;}
.sh04 li{width: 100%;border: 1px solid #666;padding: 20px 15px;margin: 0 0 15px;}
.sh04 h6{font-size: 18px;margin: 0 0 8px;font-family: "Times New Roman", Times, "serif";}
.sh04 h6 .txt_big{font-size: 39px;;margin-left: 8px;opacity: 0.6;}
.sh04 h3{font-size: 12px;margin: 0;line-height: 1.8;text-align: left;}

.sh04_frame{display: flex;justify-content: center;border: 1px solid #555;flex-wrap: wrap;background: rgba(255,255,255,1.00);padding: 0 0 15px;}
.sh04 h4{font-size: 16px;margin: 0;line-height: 1.6;text-align: left;width: 100%;text-align: center;margin: 20px 0;}
.sh04 h5{width: 100%;background: #44423A;color: #FFF;font-size: 12px;padding: 5px 0 7px;}
.sh04_frame_list{width: 30%;margin-right: 2%;}
.sh04_frame_list:nth-child(4){width: 30%;margin-right: 0;}
.sh04_frame_list_long{width: 60%;}

.sh05{text-align: center;margin: 60px 0;}
.sh05 h2{font-size: 24px;margin: 0 0 30px;border-bottom: 1px solid #999;padding-bottom: 5px;}
.sh05 .ttlblock{background: #FFF;border-radius: 20px;padding: 30px;max-width: 760px;margin: 0 auto 30px;}
.sh05 .ttlblock01{max-width: 500px;margin: 0 auto 20px;}
.sh05 .ttlblock02{max-width: 500px;margin: 0 auto 20px;}
.sh05 .ttlblock03{max-width: 100px;margin: 0 auto 0;}
.sh05 h3{font-size: 12px;line-height: 1.8;margin: 0 0 10px}
.sh05 h4{font-size: 10px;line-height: 1.8;}

}






@charset "utf-8";

/* ***************************************************************************************************
	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');



/* ***************************************************************************************************
	COMMON
*************************************************************************************************** */
/* ============================================================================
	CssCustomProperties 											2025.01
============================================================================ */
	:root {
		/* family */
		--smarthome-font_family-en_1: 'Jost', var(--site-font_family-sans);
		
		/* hometactColor | rgba(var(--smarthome-hometactColor-main), 1) */
		--smarthome-hometactColor-main:		162, 163, 93;	/* rgb | #a2a35d */
		--smarthome-hometactColor-dark:		132, 139, 45;	/* rgb | #848b2d */
	}


/* ============================================================================
	Setting
============================================================================ */
	.fontJost,
	.fontJostBox * {
		font-family: var(--smarthome-font_family-en_1);
	}



/*mainRoleHeaderVisualBox*/
	.smarthomeP .mainRoleHeaderVisualBox {
		padding: var(--sentens-marpad-XXL) 0;
		background: url("../images/smarthome/ppic.jpg") top center / cover no-repeat;
	}
	.smarthomeP .mainRoleHeaderVisualBox .hTxt {
		text-align: left;

	}
	.smarthomeP .mainRoleHeaderVisualBox .leadTxt {
		--M-fluidFontSize-max-fontsize: 15;
		--M-fluidFontSize-min-fontsize: 12.5;
		--M-fluidFontSize-max-viewport: 1340;
		--M-fluidFontSize-min-viewport: 768;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */

		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		line-height: 2.4;
	}


/*layoutSH_*/
	.layoutSH_container {
		width: 100%;
	}
	.layoutSH_containerInner {
		--smarthome-layoutSH_containerInner-yohaku: 14px;
		--smarthome-layoutSH_containerInner-bgColor: yellow; /* 各コンテンツで設定すること */
		--smarthome-layoutSH_containerInner-bdColor: rgba(var(--smarthome-hometactColor-main), 1);
		width: 94%;
		max-width: 1260px;
		background-color: var(--smarthome-layoutSH_containerInner-bgColor);
		margin-left: auto;
		margin-right: auto;
		box-shadow: 0 0 0 var(--smarthome-layoutSH_containerInner-yohaku) var(--smarthome-layoutSH_containerInner-bgColor) inset,
					0 0 0 calc(var(--smarthome-layoutSH_containerInner-yohaku) + 1px) var(--smarthome-layoutSH_containerInner-bdColor) inset;font-size:0.625em;
	}
	.layoutSH_containerInner_widthStyleOnly {
		width: 94%;
		max-width: 1260px;
	}
	.layoutSH_contents {
		width: 90%;
		max-width: 1084px;
		margin-left: auto;
		margin-right: auto;
	}
@media screen and (max-width: 768px) { /*{SP}*/
	.layoutSH_containerInner {
		--smarthome-layoutSH_containerInner-yohaku: 7px;
	}
	.layoutSH_contents {
		width: 85%;
		/*max-width: 520px;*/
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.layoutSH_containerInner {
		width: 92%;
	}
	.layoutSH_containerInner_widthStyleOnly {
		width: 92%;
	}
}




/* ***************************************************************************************************
	PAGE
*************************************************************************************************** */
	.pt-smarthome {
		background: var(--site-themeColor-base-inversion);
		color: var(--site-themeColor-base-inversion-text);
	}
	.pageThemeHeader h4.ptHeading .logo {
		display: block;
		text-align: center;
	}
	.pageThemeHeader h4.ptHeading .logo img {
		max-width: 500px;
		width: 60%;
	}

@media screen and (max-width: 768px) { /*{SP}*/
	.pageThemeHeader h4.ptHeading .logo img {
		width: 80%;
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.pageThemeHeader h4.ptHeading .logo img {
		width: 100%;
	}
}





/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	bukkenSmartIntroductionWrap | 当物件のスマートホーム機器
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

	.bukkenSmartIntroductionWrap {}


/* =============================================================================
smartHomeSection
============================================================================= */
	.smartHomeSection {
		width: 94%;			/* 幅広げる */
		max-width: 1260px;	/* 幅広げる */
		padding:var(--sentens-marpad-L) 0;
		background: #dcdddf;
	}
	.smartHomeItemWrap {
		display: none; /* [venobox]用 初期値 */
	}
@media screen and (max-width: 768px) { /*{SP}*/
	.smartHomeSection.contbox {
		width:var(--default-contentWide-L);
	}
}


/*smartHomeWrap--------------------------------*/
	.smartHomeWrap {
		max-width:1100px;
		width:var(--default-contentWide-M);
		margin-left:auto;
		margin-right:auto;
	}
	.smartHomeWrap [class*="btnBox"] {
		display: flex;
		flex-wrap: wrap;
		max-width:1100px;
		margin-left:auto;
		margin-right:auto;
	}
	.smartHomeWrap .btnBox01 {
		justify-content:center;
	}
	.smartHomeWrap .btnBox02 {
		justify-content: space-between;
	}
	.smartHomeWrap [class*="btnBox"] li {
		width: 22.72%;
		max-width:250px;
	}

	.smartHomeWrap .btnBox01 li:nth-of-type(2) {
		margin-right:3%;
		margin-left:3%;
	}


@media (hover: hover) and (pointer: fine) {
		.smartHomeWrap [class*="btnBox"] li a {
			transition: opacity 0.5s ease-out; 
		}
		.smartHomeWrap [class*="btnBox"] li a:hover {
			opacity: .6;
		}
}	
@media screen and (max-width: 768px) { /*{SP}*/
	.smartHomeWrap {
		width:var(--default-contentWide-XM);
	}
	.smartHomeWrap [class*="btnBox"] li {
		/*width: 32%;*/
	}
}




/*smartHomeThumbSection--------------------------------*/
	.smartHomeThumbSection {
		max-width:1100px;
		margin-left:auto;
		margin-right:auto;
		width:var(--default-contentWide-M);
	}
	.smartHomeThumbSection [class*="hTxtStyh"] {
		/*display: inline-block;*/
		text-align: center;
	}
	.smartHomeThumbSection [class*="hTxtStyh"] > span {
		display: flex;
		align-items: center;
	}
	.smartHomeThumbSection [class*="hTxtStyh"] > span:before,
	.smartHomeThumbSection [class*="hTxtStyh"] > span:after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #666;
	min-width:60px;
	}
	.smartHomeThumbSection [class*="hTxtStyh"] > span:before {
		margin-right: 1rem;
	}
	.smartHomeThumbSection [class*="hTxtStyh"] > span:after {
		margin-left: 1rem;
	}
	.smartHomeThumbWrap {
		max-width: 1000px;
		margin-left:auto;
		margin-right:auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.smartHomeThumbWrap li {
		position: relative;
		width: 30%;
	}
	.smartHomeThumbWrap li:nth-child(n+3) {
		padding-bottom:var(--sentens-marpad-S);

	}
	.smartHomeThumbWrap li .btnCircle {
		position: absolute;
		top:10px;
		right:10px;
		width:40px;
		height:40px;
		border-radius:50%;
		background: var(--site-themeColor-base02);
	}
	.smartHomeThumbWrap li .btnCircle .plus {
		position: absolute;
		text-align: center;
		width: 100%;
		height:100%;
	}
	.smartHomeThumbWrap li .btnCircle .plus span {
		position:absolute;
		width: 1em;
		height: 0.1em;
		background: #fff;
		line-height: 1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.smartHomeThumbWrap li .btnCircle .plus span::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: inherit;
		transform: rotate(90deg);
	}
	/*hover*/
	.smartHomeThumbWrap li a[href] {
		transition: opacity 0.3s ease-out; 
	}
	.smartHomeThumbWrap li a[href]:hover {
		opacity:0.7;
	}

@media screen and (max-width: 1340px) { /*{TBl}*/
	.smartHomeThumbWrap li .btnCircle {
		width:30px;
		height:30px;
	}
}


/*js_swipeMe*/
@media screen and (max-width: 520px) { /*{SPs}*/
	.smartHomeWrap [class*="btnBox"] {
		width: 200%;
	}
	.smartHomeWrap [class*="btnBox"] img {
		width: 100%;
	}



}






/*smartHomeItemBox---------------------------------------*/
	.smartHomeItemBox {
		padding:30px;
		--M-fluidFontSize-max-fontsize: 14;
		--M-fluidFontSize-min-fontsize: 13;
		--M-fluidFontSize-max-viewport: 1340;
		--M-fluidFontSize-min-viewport: 360;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */

		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		font-family: var(--site-font_family-serif);
		color:var(--site-themeColor-base-inversion-text);
		line-height: 1.8;
	}
	.smartHomeItemBox dt {
		text-align: center;
	}
	.smartHomeItemBox dt img {
		max-width:300px;
	}

	.smartHomeItemBox dd small.bl {
		line-height: 1.6;
	}






/* =============================================================================
	usefulSection														2025.01
============================================================================= */
	.usefulSection {
		margin-top: var(--default-marpad-M);
	}
	.usefulSection button {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		color: inherit;
		font: inherit;
		text-align: inherit;
		background: transparent;
		border: none;
		border-radius: 0;
	}
	.usefulSection button:not([disabled]) {
		cursor: pointer;
	}

/* usefulSectionInner
------------------------------------------------------------------------ */
	.usefulSectionInner {
		--smarthome-layoutSH_containerInner-bgColor: #efefef;
		padding: 100px 0;
        margin: 100px auto;
	}
@media screen and (max-width: 520px) { /*{SPs}*/
	.usefulSectionInner {
		padding: 60px 0;
        margin: 60px auto;
	}
}

/* usefulSectionHeader
------------------------------------------------------------------------ */
	.usefulSectionHeader {
		text-align: center;
	}
	.usefulSectionHeader .ptHeading img {
		max-width: 630px;
		width: 65%;
	}
	.usefulSectionHeader .leadTxt {
		--M-fluidFontSize-max-fontsize: 17;
		--M-fluidFontSize-min-fontsize: 15;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 900;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size:18px;
        margin: 40px auto 60px;
		line-height: 2;
	}
@media screen and (max-width: 768px) { /*{SP}*/
	.usefulSectionHeader .ptHeading img {
		max-width: 230px;
		min-width: 170px;
		width: 43%;
	}
	.usefulSectionHeader .leadTxt {
		--M-fluidFontSize-max-fontsize: 15;
		--M-fluidFontSize-min-fontsize: 13;
		--M-fluidFontSize-max-viewport: 700;
		--M-fluidFontSize-min-viewport: 520;
		font-size:14px;
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.usefulSectionHeader .ptHeading img {
		width: 53%;
	}
}

/* usefulContentsWrap
------------------------------------------------------------------------ */
	.usefulContentsWrap {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px 0;
		font-family: var(--site-font_family-sans);
	}
@media screen and (max-width: 768px) { /*{SP}*/
	.usefulContentsWrap {
		max-width: 520px;
	}
}

/* button------------------------- */
	.usefulContentsWrap .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));
		
		--M-fluidFontSize-max-fontsize: 20;
		--M-fluidFontSize-min-fontsize: 17;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 900;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: 18px;
		display: block;
		position: relative;
		z-index: 0;
		width: 100%;
		line-height: 1.35;
		color: #000;
		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);
	}
@media screen and (max-width: 768px) { /*{SP}*/
	.usefulContentsWrap .js_slideToggleFocusBtn {
		font-size: 14px;
	}
}
	.usefulContentsWrap .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);
	}
	.usefulContentsWrap .js_slideToggleFocusBtn .txt {
	}
	.usefulContentsWrap .js_slideToggleFocusBtn .icon {
		position: absolute;
		inset: auto var(--smarthome-usefulContentsToggleBtn-icon-right) auto auto;
		z-index: 0;
		width: var(--smarthome-usefulContentsToggleBtn-icon-width);
		aspect-ratio: 1;
	}
	.usefulContentsWrap .js_slideToggleFocusBtn .icon::before,
	.usefulContentsWrap .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);
	}
	.usefulContentsWrap .js_slideToggleFocusBtn .icon::before {
		height: 0;
		border-top-width: 1px;
	}
	.usefulContentsWrap .js_slideToggleFocusBtn .icon::after {
		width: 0;
		border-left-width: 1px;
	}
	/* open時 */
	.usefulContentsWrap .js_slideToggleFocusWrapper[aria-expanded="true"] .js_slideToggleFocusBtn .txt {
		color: rgba(var(--smarthome-hometactColor-dark), 1);
	}
	.usefulContentsWrap .js_slideToggleFocusWrapper[aria-expanded="true"] .js_slideToggleFocusBtn .icon::after {
		display: none;
	}
	/* hover */
	@media (hover: hover) and (pointer: fine) {
		.usefulContentsWrap .js_slideToggleFocusBtn:hover::before {
			transform: scaleX(1);
			transform-origin: left;
		}
		.usefulContentsWrap .js_slideToggleFocusWrapper[aria-expanded="false"] .js_slideToggleFocusBtn:hover .icon::before,
		.usefulContentsWrap .js_slideToggleFocusWrapper[aria-expanded="false"] .js_slideToggleFocusBtn:hover .icon::after {
			transform: rotate(90deg);
		}
	}
	.usefulContentsWrap .js_slideToggleFocusBtn:focus-visible::before {
			transform: scaleX(1);
			transform-origin: left;
	}
	.usefulContentsWrap .js_slideToggleFocusWrapper[aria-expanded="false"] .js_slideToggleFocusBtn:focus-visible .icon::before,
	.usefulContentsWrap .js_slideToggleFocusWrapper[aria-expanded="false"] .js_slideToggleFocusBtn:focus-visible .icon::after {
			transform: rotate(90deg);
		}

@media screen and (max-width: 768px) { /*{SP}*/
	.usefulContentsWrap .js_slideToggleFocusBtn {
		--smarthome-usefulContentsToggleBtn-icon-width: 21px;
		--smarthome-usefulContentsToggleBtn-icon-right: 16px;
		
		--M-fluidFontSize-max-fontsize: 16;
		--M-fluidFontSize-min-fontsize: 14;
		--M-fluidFontSize-max-viewport: 520;
		--M-fluidFontSize-min-viewport: 380;
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.usefulContentsWrap .js_slideToggleFocusBtn {
		--smarthome-usefulContentsToggleBtn-icon-width: 17px;
		--smarthome-usefulContentsToggleBtn-icon-right: 12px;
	}
}

/* contents------------------------- */
	.usefulContentsWrap .js_slideToggleFocusContent {
		display: none;		/* ///// 初期値 display: none; | JSで開閉します ///// */
	}

	.usefulSceneWrap {
		background: #fff;
		padding: 24px 0;
	}
	.usefulSceneWrap .sceneGridBox {
		grid-template-columns: repeat(2, 1fr);
		gap: 0 max(26px, (40 / 1084 * 100%));
		width: 92%;
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
								/*background: pink;*/
	}
	.usefulSceneWrap .sceneGridBoxInner {
    display: flex;justify-content: space-between;flex-wrap: wrap;
								/*background: skyblue;*/
	}
	
	/* usefulSceneCaseSection
	--------------------------------- */
	.usefulSceneCaseSection {
    font-size: 14px;

		display: grid;
		grid-template: 
			"number description" auto
			".      picture"     1fr /
			4.642857em  1fr;
		gap: 0;
		padding: 2.85em 0;
        width: 48%;
	}
	.usefulSceneCaseSection .caseNumber {		grid-area: number;}
	.usefulSceneCaseSection .caseDescription {	grid-area: description}
	.usefulSceneCaseSection .casePicture {		grid-area: picture;}

	.usefulSceneCaseSection ~ .usefulSceneCaseSection {
	}
	.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: 26px;
		letter-spacing: .06em;
		text-align: center;
	}
	.usefulSceneCaseSection .caseDescription {
		line-height: 1.8;
		font-size: 1em;
		letter-spacing: .1em;
		padding-left: 1.07em;
	}
	.usefulSceneCaseSection .casePicture {
		position: relative;
		margin-top: 35px;
	}
	.usefulSceneCaseSection .casePicture img {
		width: 100%;
		max-width: none;
		height: auto;
	}
    .caseCaption{font-size: 12px;line-height: 1.4;margin: 10px 0 0;text-indent: -1em;padding-left: 1em;}
@media screen and (max-width: 768px) { /*{SP}*/
    .caseCaption{font-size: 10px;line-height: 1.4;margin: 5px 0 0;}
	.usefulSceneWrap {
		padding: 10px 0;
	}
	.usefulSceneWrap .sceneGridBox {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.usefulSceneWrap .sceneGridBoxInner ~ .sceneGridBoxInner {
	}
	.usefulSceneWrap .sceneGridBoxInner {
    display: block;
	}
	/* usefulSceneCaseSection
	--------------------------------- */
	.usefulSceneCaseSection {
		--M-fluidFontSize-max-fontsize: 14;
		--M-fluidFontSize-min-fontsize: 13;
		--M-fluidFontSize-max-viewport: 520;
		--M-fluidFontSize-min-viewport: 420;
        width: 100%;
	}
}
@media screen and (min-width: 768.2px) and (max-width: 900px),
								screen and (max-width: 520px) { /*{MinorBreakpoint}*/
	/* usefulSceneCaseSection
	--------------------------------- */
	.usefulSceneCaseSection {
		grid-template: 
			"number  description" auto
			"picture picture"     1fr /
			4.642857em  1fr;
	}
	.usefulSceneCaseSection .caseDescription br[aria-hidden="true"] {
		display: none;
	}
}





/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	serviceIntroductionWrap | サービスのご紹介
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
						/*.serviceIntroductionWrap__header {background: rgba(0, 0, 0, .1) !important;}
						.serviceIntroductionWrap__header .ttl {background: rgba(255, 0, 0, .1) !important;}
						.serviceIntroductionWrap__header .ttl::before {background: rgba(0, 0, 255, .1) !important;}*/
	.serviceIntroductionWrap {
		--_header-translateY: 8.5rem;	/* {★1} */
		--_header-paddingTop: 5.35rem;	/* {★2} */
		padding-top: 0;
		background: #f5f5f5;
		margin-top: calc(var(--default-marpad-S) + var(--_header-translateY));
	}
	.serviceIntroductionWrap__header {
		display: grid;
		place-content: center;
		overflow: hidden;
		line-height: 1.65;
		font-size: 2rem;
		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 .ttl {
		position: relative;
		z-index: 0;
	}
	.serviceIntroductionWrap__header .ttl::before {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		z-index: -1;
		width: 100%;
		aspect-ratio: 1 / .8;
		background: #f5f5f5;
		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 .ttl i {
		font-size: 1.3em;
	}


	/* serviceIntroductionLogoBox
	---------------------------------------------------- */
	.serviceIntroductionLogoBox {
		width: 75%;
		max-width: 900px;
		margin-top:	var(--sentens-marpad-M);
		margin-left: auto;
		margin-right: auto;
	}
	.serviceIntroductionLogoBox .inner {
		padding-top: 8.555556%;
		padding-bottom: 6.444444%;
		background: #fff;
		
		--M-fluidBorderRadiusSize-max-radiussize: 50;
		--M-fluidBorderRadiusSize-min-radiussize: 30;
		--M-fluidBorderRadiusSize-max-viewport: 980;
		--M-fluidBorderRadiusSize-min-viewport: 520;
		border-radius: clamp(
			calc(var(--M-fluidBorderRadiusSize-min-radiussize) * .1rem),
			calc(calc(var(--M-fluidBorderRadiusSize-min-radiussize) * .1rem) + (1vw - calc(var(--M-fluidBorderRadiusSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidBorderRadiusSize-max-radiussize) - var(--M-fluidBorderRadiusSize-min-radiussize)) / (var(--M-fluidBorderRadiusSize-max-viewport) - var(--M-fluidBorderRadiusSize-min-viewport)))),
			calc(var(--M-fluidBorderRadiusSize-max-radiussize) * .1rem)
		);
		/*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:	var(--sentens-marpad-M);
	}
	.serviceIntroductionLeadTxtBox .txt {
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 15;
		--M-fluidFontSize-max-viewport: 1000;
		--M-fluidFontSize-min-viewport: 768;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */

		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		line-height: 2.1;
		text-align: center;
		letter-spacing: .1em;
	}
	.serviceIntroductionLeadTxtBox .txt small {
		font-family: inherit;
		font-size: .777778em;
	}

@media screen and (max-width: 768px) { /*{SP}*/
	/* serviceIntroductionLogoBox
	---------------------------------------------------- */
	.serviceIntroductionLogoBox {
		width: 94%;
	}
	.serviceIntroductionLogoBox .inner {
		padding-top: min(13.5%, 77px);
		padding-bottom: min(11.5%, 63px);
	}
	.serviceIntroductionLogoBox .logo_hometact {
		width: 70%;
		max-width: 420px;
	}
	.serviceIntroductionLogoBox .logo_corp {
		width: 30%;
		max-width: 160px;
		margin-top: min(6.5%, 41px);
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.serviceIntroductionWrap {
		--_header-translateY: 7rem;
		--_header-paddingTop: 4rem;
	}
	.serviceIntroductionWrap__header {
		font-size: 1.55rem;
	}
	.serviceIntroductionWrap__header .ttl::before {
		scale: 1.75;
	}
}


/* =============================================================================
	lifeSection
============================================================================= */
	.lifeSection {
		/*background: #dcdcdc;*/
		margin-top:	var(--sentens-marpad-M);
		/*padding-top:	var(--sentens-marpad-L);
		padding-bottom:	var(--sentens-marpad-L);*/
	}

	/*.movieBnrBox-------------------------*/
	.movieBnr a {
		display: block;
		box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .035);
		transition: opacity .13s ease-out;
	}
	/* hover */
	@media (hover: hover) and (pointer: fine) {
		.movieBnr a:hover {
			opacity: .7;
		}
	}
	.movieBnr a:focus-visible {
			opacity: .7;
	}
@media screen and (max-width: 768px) { /*{SP}*/
	.movieBnr a {
		max-width: 450px;
		margin-left: auto;
		margin-right: auto;
	}
}





/* =============================================================================
	featuresSection														2025.01
============================================================================= */
	.featuresSection {
		/*background: #efefef;*/
		margin-top:	var(--sentens-marpad-M);
	}
@media screen and (max-width: 520px) { /*{SPs}*/
	.featuresSection {
		margin-top:	var(--sentens-marpad-XXS);
	}
}

/* featuresSectionHeader
------------------------------------------------------------------------ */
	.featuresSectionHeader {
		text-align: center;
	}
	.featuresSectionHeader .ptHeading img {
		max-width: 450px;
		width: 43%;
	}
@media screen and (max-width: 768px) { /*{SP}*/
	.featuresSectionHeader .ptHeading img {
		max-width: 230px;
		min-width: 170px;
		width: 43.5%;
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.featuresSectionHeader .ptHeading img {
		width: 53%;
	}
}

/* featuresSectionInner
------------------------------------------------------------------------ */
	.featuresSectionInner {
		--smarthome-layoutSH_containerInner-bgColor: #fff;
		padding: var(--sentens-marpad-M) 0;
	}
@media screen and (max-width: 768px) { /*{SP}*/
	.featuresSectionInner {
		padding-top: 20px;
	}
}

/* featuresContentsWrap
------------------------------------------------------------------------ */
	.featuresContentsWrap {
		display: grid;
		grid-template-columns: 1fr calc(600 / 1084 * 100%);
		align-items: center;
		gap: 0;
	}

	.featuresContentsWrap .appScreenPicBox .pic {
		width: 87%;
		max-width: 386px;
		margin-left: auto;
		margin-right: auto;
	}

	.featuresContentsWrap .pointBox {
		--M-fluidFontSize-max-fontsize: 14;
		--M-fluidFontSize-min-fontsize: 13;
		--M-fluidFontSize-max-viewport: 1000;
		--M-fluidFontSize-min-viewport: 900;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */

		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		line-height: 1.75;
		letter-spacing: .1em;
	}
	.featuresContentsWrap .pointBox ol {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px 0;
	}
	.featuresContentsWrap .pointBox li .ttl {
		width: auto;
		height: 80px;
		aspect-ratio: 7 / 8;
		margin-bottom: -1.75em;
		margin-left: auto;
		margin-right: auto;
	}
	.featuresContentsWrap .pointBox li .txtBox {
		padding: 2em 2em 1.5em;
		border: 1px solid rgba(var(--smarthome-hometactColor-main), .7);
	}
	.featuresContentsWrap .pointBox li .txt {
		line-height: 1.35;
		color: #fff;
		font-size: 1.428571em;
		text-align: center;
		background: rgba(var(--smarthome-hometactColor-main), 1);
		padding: .55em .5em .6em;
	}
	.featuresContentsWrap .pointBox li .desc {
		margin-top: .85em;
	}
	.featuresContentsWrap .pointBox li .desc .descCap {
		display: block;
		margin-top: .5em;
	}
@media screen and (max-width: 768px) { /*{SP}*/
	.featuresContentsWrap {
		grid-template-columns: 1fr;
	}

	.featuresContentsWrap .appScreenPicBox .pic {
		width: 70%;
		max-width: 250px;
		translate: 7% 0;
	}

	.featuresContentsWrap .pointBox {
		--M-fluidFontSize-max-fontsize: 14;
		--M-fluidFontSize-min-fontsize: 13;
		--M-fluidFontSize-max-viewport: 520;
		--M-fluidFontSize-min-viewport: 420;
		margin-top: 20px;
	}
	.featuresContentsWrap .pointBox li .ttl {
		margin-bottom: -1.5em;
	}
	.featuresContentsWrap .pointBox li .txtBox {
		padding: 1.75em 1.5em 1.5em;
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.featuresContentsWrap .pointBox li .ttl {
		height: 65px;
		margin-bottom: -1.2em;
	}
	.featuresContentsWrap .pointBox li .txtBox {
		padding: 1.5em 1em;
	}
	.featuresContentsWrap .pointBox li .txt {
		font-size: 1.275em;
		letter-spacing: .07em;
		padding: 1em .5em;
	}
}





/* hometactLinkWrap
------------------------------------------------------------------------ */
	.hometactLinkWrap {
		/*width: 85%;
		max-width: 1000px;*/
		margin-left:auto;
		margin-right:auto;
	}
	.hometactLinkWrap a {
		position: relative;
		text-decoration: underline;
	}
	.hometactLinkWrap a[data-textlinkicon="simpleArrow_tri"]::after {
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		margin: 0 .4em;
		border-style: solid;
		border-width: 6px 0 6px 6px;
		border-color: transparent transparent transparent #666;
	}
	@media (hover: hover) and (pointer: fine) {
		.hometactLinkWrap a:hover {
			text-decoration: none;
		}
	}
@media screen and (max-width: 768px) { /*{SP}*/
	.hometactLinkWrap a {
		font-size: .975em;
	}
	.hometactLinkWrap a[data-textlinkicon="simpleArrow_tri"]::after {
		border-width: 5px 0 5px 5px;
	}
}





/* =============================================================================
	ownedItemContainer
============================================================================= */
	.ownedItemContainer {
		padding-top:	0;
		/*padding-top:	var(--sentens-marpad-M);*/
		/*padding-top:	var(--sentens-marpad-XS);*/
		padding-bottom:	var(--sentens-marpad-XS);
	}
	.ownedItemWrap {}
	.ownedItemBox {
		/*max-width: 1000px;*/
		margin: 0 auto;
		padding: 40px 4.5%;
		background: #fff;
		border: 1px solid #ccc;
	}
	.ownedItemBox .heading {
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 1.5;
		color: #333;
		font-size: 1.357em;
		text-align: center;
	}
	.ownedItemBox .heading::before,
	.ownedItemBox .heading::after {
		content: "";
		flex: 0 0 55px;
		height: 1px;
		background: #333;
	}
	.ownedItemBox .heading .label {
		display: block;
		margin: 0 1em;
	}
	.ownedItemBox .ownedItemList {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 40px 0;
	}
	.ownedItemBox .ownedItemList li {
		width: 18%;
		max-width: 147px;
		text-align: center;
		margin: 0 1%;
	}
	.ownedItemBox .ownedItemList li:last-of-type {
		width: 36%;
		max-width: 294px;
		text-align: center;
		margin: 0 1%;
	}
	.ownedItemBox .ownedItemList img {
		width: 100%;
	}
	.ownedItemBox .cap {}


@media screen and (max-width: 980px) { /*{TBs}*/

	.ownedItemBox .ownedItemList li {
		width: 30%;
		max-width:100%;
		margin: 0 1%;
	}
	.ownedItemBox .ownedItemList li:last-of-type {
		width: 60%;
		max-width:100%;
		margin: 0 1%;
	}
	.ownedItemBox .ownedItemList li:nth-of-type(n+4) {
		margin-top: calc(10px + 4vw);
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.ownedItemBox {
		padding: 30px 0;
	}
	.ownedItemBox .heading {
		font-size: 1.275em;
	}
	.ownedItemBox .heading::before,
	.ownedItemBox .heading::after {
		flex: 0 0 calc(25px + 4vw);
	}
	.ownedItemBox .cap {
		padding: 0 5vw;
	}
	.ownedItemBox .ownedItemList {
		width: 90%;
		margin: 0 auto;
		padding: 30px 0;
	}
	.ownedItemBox .ownedItemList li {
		width: 45%;
		margin: 0 2%;
	}
	.ownedItemBox .ownedItemList li:last-of-type {
		width: 90%;
		max-width:100%;
		margin: 0 2%;
	}


	.ownedItemBox .ownedItemList li:nth-of-type(n+3) {
		margin-top: calc(10px + 4vw);
	}
}



















//===========================================================================================================================================================================

@charset "utf-8";
/* *************************************************************************************************************
 *	file name:		common.css
 *	Alteration:		2022.06		[Major update]（WidthCheckerForJs等の削除。クラス名変更など）
 *	style info:		全ページ共通のリセット・コモンCSS
----------------------------------------------------------------------------------------------------------------
 *	<load>
 *	<COMMON> - WidthCheckerForJs - Normalize - Reset - CssCustomProperties - Setting - AddParts - Display - etc
 *	<@KEYFRAMES>
----------------------------------------------------------------------------------------------------------------
 * 01	メディアクエリの 1340px よりも上の設定には print をつける。
************************************************************************************************************* */

/* ***************************************************************************************************
	load | @importより上にコード記述不可。
*************************************************************************************************** */
/* ----------------------------------------------------------------------------
 * [ Noto Serif ][ Noto Serif Japanese (300) ][ Cinzel ][ Red Rose ]
 * URL	: https://fonts.google.com/share?selection.family=Cinzel%7CNoto%20Serif%7CNoto%20Serif%20JP:wght@300%7CRed%20Rose:wght@300
 * CODE	:
 *		font-family: 'Cinzel', serif;
 *		font-family: 'Cormorant Garamond;
 *		font-family: 'Noto Serif JP', 'Noto Serif', serif;
 *		font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
 * 		font-weight: 300;
 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel&family=Noto+Serif&family=Noto+Serif+JP:wght@300&family=Noto+Sans&family=Noto+Sans+JP:wght@300&family=Cormorant+Garamond:wght@500&family=EB+Garamond&display=swap');









/* ----------------------------------------------------------------------------
 * [ Yaku Han JP (MP_Noto) ]
 * URL	: https://yakuhanjp.qranoko.jp
 * CODE	:
 * 		font-family: YakuHanMP_Noto, 'Noto Serif JP', 'Noto Serif', serif;
 */
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanmp-noto.min.css');



@media print, screen and (min-width: 768.2px) { /*{overTB}*/}
@media print, screen and (max-width: 1620px) { /*{PCs}*/}
@media screen and (max-width: 1340px) { /*{TBl}*/}
@media screen and (max-width: 980px) { /*{TBs}*/}
@media screen and (max-width: 768px) { /*{SP}*/}
@media screen and (max-width: 520px) { /*{SPs}*/}
@media screen and (max-width: 320px) { /*{SPss}*/}

/* ***************************************************************************************************
	COMMON
*************************************************************************************************** */

/* ============================================================================
	[ WidthCheckerForJs ] setting.jsと連携 | ※CSS依存型ウィンドウ幅判別
============================================================================ */
.WidthCheckerForJs {position:absolute;top:0;left:0;z-index:-100;width:0;height:0;} /* blank span */
/* initial value */									.WidthCheckerForJs {z-index:-160;}	/*{PCl}*/
@media print, screen and (max-width: 1620px) {		.WidthCheckerForJs {z-index:-150;}}	/*{PCs}*/
@media screen and (max-width: 1340px) {				.WidthCheckerForJs {z-index:-140;}}	/*{TBl}*/
@media screen and (max-width: 980px) {				.WidthCheckerForJs {z-index:-130;}}	/*{TBs}*/
@media screen and (max-width: 768px) {				.WidthCheckerForJs {z-index:-120;}}	/*{SP}*/
@media screen and (max-width: 520px) {				.WidthCheckerForJs {z-index:-110;}}	/*{SPs}*/
@media screen and (max-width: 320px) {				.WidthCheckerForJs {z-index:-100;}}	/*{SPss}*/


/* ============================================================================
	CssCustomProperties 											2021.10
============================================================================ */
/* SITE
---------------------------------------------------- */
	:root {
		/* family */
		/*--site-font_family-sans: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;*/
		--site-font_family-sans:  YakuHanMP_Noto, "Noto Sans JP", "Noto Sans","Helvetica Neue","Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
		--site-font_family-serif: YakuHanMP_Noto, "Noto Serif JP", "Noto Serif", "Hiragino Mincho ProN", "Yu Mincho", serif;
		--site-font_family-en1: "Cinzel", YakuHanMP_Noto, "Noto Serif JP", "Noto Serif", "Hiragino Mincho ProN", "Yu Mincho", serif;
		--site-font_family-en2: "Cormorant Garamond", YakuHanMP_Noto, "Noto Serif JP", "Noto Serif", "Hiragino Mincho ProN", "Yu Mincho", serif;
		--site-font_family-en3: "EB Garamond", YakuHanMP_Noto, "Noto Serif JP", "Noto Serif", "Hiragino Mincho ProN", "Yu Mincho", serif;

		/* themeColor */
		--site-themeColor-base: #000;
		--site-themeColor-base02: #252b34;
		--site-themeColor-base-text: #fff;
		--site-themeColor-base-inversion: #fff;
		--site-themeColor-base-inversion-text: #333;
/*		--site-themeColor-main: 3, 3, 3;*/				/* rgb | #030303 */
		--site-themeColor-accent_1: 131, 177, 62;		/* rgb | #83b13e */
		--site-themeColor-accent_2: 242, 246, 237;		/* rgb | #f2f6ed */

		/* link */
		--site-moduleLink-color: 147,143,137;			/* rgb | #938f89 */
		--site-moduleLink-color-hover: 164,148,118;	/* rgb | #a49476 */
		--site-moduleLink-color-active: 125,109,85;	/* rgb | #7d6d55 */
		

		/* item_size */
		--site-siteHeaderMinimalContents-width: 350;	/* 単位(px)はつけない!! */
		--site-siteHeaderLogo-tphb-width: 73;			/* 単位(px)はつけない!! */
		--site-siteHeaderLogo-name-width: 226;			/* 単位(px)はつけない!! */

		--site-headerWrap-height: clamp(100px, 7vw, 120px);	/* PC時の高さ */ /* 7vw is feeling */
		--site-header-height: 56px;							/* TB時の高さ */
		--site-actionLink-height: 50px;
		
		--site-siteFooter-inner-width: 94%;
		--site-siteFooter-inner-max-width: 1260px;
		--site-siteFooter-inner-margin: 0 auto;
		--site-siteFooter-mitsubishiFooterBnr-padding: 25px;
	}
	/* hover */
	@media (hover: hover) and (pointer: fine) {
		a[href]:hover,
		a[href]:focus {
			--site-moduleLink-color: var(--site-moduleLink-color-hover);
		}
	}
	/* current */
	.is_current > a[href] {
		--site-moduleLink-color: var(--site-moduleLink-color-active);
	}
@media screen and (max-width: 768px) { /*{SP}*/
	:root {
		--site-siteFooter-inner-width: 90%;
	}
}


/* ============================================================================
	Setting
============================================================================ */
/* html */
	/*html {font-size:0.625em;}	 ~= 10px | for 'rem' Criteria. */

/* Img */
	img,
	object[data-obj-roleimg*="roleImg"] {
		width:auto;
		max-width:100%;
		height:auto;
	}
	a object[data-obj-roleimg*="_link"] {	/* リンクが効かなくなる仕様の解除 | 例：<a href="#"><object data="xxx.svg" data-obj-roleimg="roleImg_link"></object></a> */
		pointer-events:none;
	}

/* svg */
	svg:not(:root) {
		overflow:hidden;
	}
	img[src$=".svg"],
	img[src$=".svgz"],
	object[data-obj-roleimg*="roleImg"][data$=".svg"],
	object[data-obj-roleimg*="roleImg"][data$=".svgz"] {	/* for IE11 | ※親要素に幅指定必須 (Width specification is mandatory for parent element.) */
		width:100%;
		backface-visibility: hidden;
		transform: translateZ(0);
	}
