@charset "utf-8";

/* ***************************************************************************************************
	COMMON
*************************************************************************************************** */

/*mainRoleHeaderVisualBox*/
	.smarthomeP .mainRoleHeaderVisualBox {
		padding: var(--sentens-marpad-XXL) 0;
		background: url("../../../imgs/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;
	}



/* ***************************************************************************************************
	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%;
	}
}


/* =============================================================================
smartHomeSection
============================================================================= */
	.smartHomeSection {
		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;
	}
	





/* =============================================================================
lifeSection
============================================================================= */
	.lifeSection {
		background: #dcdcdc;
	}
	.lifeSection .contbox {
		max-width: 1000px;
	}
	
	/*.movieWrap-------------------------*/
	.movieWrap {
		max-width:800px;
		margin-left:auto;
		margin-right:auto;
	}
	.movieWrap .movieBox {
		width: 100%;
		 aspect-ratio: 16 / 9;
	}
	.movieWrap .movieBox {
	  width: 100%;
	  aspect-ratio: 16 / 9;
	}
	.movieWrap .movieBox iframe {
	  width: 100%;
	  height: 100%;
	}
	
	
	
	/*lifeWrap-------------------------*/
	.lifeSection .lifeBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.lifeSection .lifeBox:nth-of-type(2) {
		flex-direction: row-reverse;
	}
	.lifeSection .lifeBox:nth-of-type(n+2) {
		padding-top: clamp(100px, 18vw, 200px);
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
	}
	.lifeSection .lifeBox li.picBox {
		width: 40%;
		text-align: center;
	}
	.lifeSection .lifeBox li.txtBox {
		width: 54%;
	}
	.lifeSection .lifeBox li.txtBox dt {
		text-align: center;
	}
	.lifeSection .lifeBox li.txtBox dt .en {
		padding: 0.1rem 3rem 0.1rem;
        font-size: 1.6rem;
        font-family: var(--site-font_family-en2);
        line-height: 1;
        color: var(--site-themeColor-base-text);
        background: #4a4b4b;
	}
	.lifeSection .lifeBox li.txtBox dt .ja {
		--M-fluidFontSize-max-fontsize: 20;
		--M-fluidFontSize-min-fontsize: 15;
		--M-fluidFontSize-max-viewport: 1340;
		--M-fluidFontSize-min-viewport: 520;
		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)
		);
	}
	.lifeSection .lifeBox li.txtBox dt > span.ja {
		display: flex;
		align-items: center;
		margin-top:0.5em;
	}
	.lifeSection .lifeBox li.txtBox dt > span.ja:before,
	.lifeSection .lifeBox li.txtBox dt > span.ja:after {
		content: "";
		height: 1px;
		flex-grow: 1;
		background-color: #666;
		min-width:30px;
	}

	.lifeSection .lifeBox li.txtBox dt > span.ja:before {
		margin-right: 1rem;
	}
	.lifeSection .lifeBox li.txtBox dt > span.ja:after {
		margin-left: 1rem;
	}
	
	.lifeSection .lifeBox li.txtBox dd  {
		margin-top: var(--sentens-marpad-XXS);
		font-size: 1.4rem;
		line-height: 2.2;

	}
	.lifeSection .lifeBox li.txtBox dd:nth-of-type(2)  {
		padding: var(--sentens-marpad-S);
		background: #4a4b4b;
		color: var(--site-themeColor-base-text);
	}
	


@media screen and (max-width: 768px) { /*{SP}*/
	.lifeSection .lifeBox li.picBox,
	.lifeSection .lifeBox li.txtBox {
		width: 100%;
	}
	.lifeSection .lifeBox li.picBox {
		max-width:400px;
		margin-left:auto;
		margin-right:auto;
		padding-bottom:40px;
	}
	.lifeSection .lifeBox li.txtBox {
		max-width:400px;
		margin-left:auto;
		margin-right:auto;
	}


}
	
	/*ownedItemWrap-------------------------*/
	.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.8rem;
		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);
	}
}

@media screen and (max-width: 320px) { /*{SPss}*/

}








/* =============================================================================
	aboutappWrap
============================================================================= */
	.aboutappWrap h4.ptHeading .hTxt {
		max-width: 1000px;
		margin-left:auto;
		margin-right:auto;
		color: #9a8c70;
		border-bottom:1px solid #9a8c70;
		padding-bottom:10px;
		
	}





/* hometactIntroWrap
------------------------------------------------------------------------ */
	.hometactIntroWrap {
		width: 85%;
		max-width: 1000px;
		margin: 0 auto;
	}

/* hometactIntroBox
---------------------------------------------------- */
	.hometactIntroBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 90%;
		max-width: 890px;
		margin-left:	auto;
		margin-right:	auto;
	}
	.hometactIntroBox .txtBox {
		width: 73%;
	}
	.hometactIntroBox .txtBox .heading {
		line-height: 2;
		color: #9a8c70;
		font-size: 2.4rem;
		letter-spacing: 0.14em;
	}
	.hometactIntroBox .txtBox .heading sup.kome {
		display: inline-block;
		margin-left: -0.5em;
	}
	.hometactIntroBox .txtBox .logo {
		width: 60%;
		max-width: 231px;
		padding: 35px 0;
	}
	.hometactIntroBox .txtBox .cap {
		margin-top: 1.75em;
		letter-spacing: 0.1em;
	}
	.hometactIntroBox .picBox {
		width: 19%;
		text-align: right;
		margin-top: -10px;
	}
	.hometactIntroBox .picBox img {
		width: 100%;
		max-width: 158px;
	}
@media screen and (max-width: 980px) { /*{TBs}*/
	.hometactIntroBox .txtBox .heading {
		font-size: 1.9rem;
	}
}
@media screen and (max-width: 768px) { /*{SP}*/
	.hometactIntroBox .txtBox {
		width: 100%;
	}
	.hometactIntroBox .txtBox .heading {
		font-size: calc(1.9rem + ((1vw - 7.36px) * 0.9615));
		text-align: center;
	}
	.hometactIntroBox .txtBox .logo {
		margin: 0 auto;
		padding: 30px 0;
	}
	.hometactIntroBox .txtBox .cap {
		margin-top: 0.5em;
	}
	.hometactIntroBox .picBox {
		width: 100%;
		text-align: center;
		margin: 40px auto;
	}
	.hometactIntroBox .picBox img {
		max-width: 180px;
	}
}

/* hometactPointListWrap
---------------------------------------------------- */
	.hometactPointListWrap {}
	
	.hometactPointList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.hometactPointList .pointUnit {
		position: relative;
		width: 100%;
		margin-top: 40px;
		padding: 35px 50px;
		border: 1px solid #c2baa9;
	}
	.hometactPointList .pointUnit:nth-of-type(-n+2) {
		width: 48.1818%;
	}
	.hometactPointList .pointUnit dt {
		margin-bottom: 1.5em;
		border-bottom: 2px solid #c2baa9;
	}
	.hometactPointList .pointUnit dt .ttl {
		display: block;
		margin-bottom: -1px;
	}
	.hometactPointList .pointUnit dd {
		text-align: justify;
        font-size: 1.4rem;
        line-height: 1.5;
	}
	.hometactPointList .pointUnit dd .cap {
		display: block;
		line-height: 1.6;
		/*font-size: 0.857em;*/
		text-align: left;
		margin-top: 1em;
	}
	/* -- 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: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		max-width: 700px;
		margin: 30px auto 0;
	}
	.hometactPointList .pointUnit.point3 .interfacePicBox .interfacePic {
		width: 29.57143%;
	}
	.hometactPointList .pointUnit.point3 .interfacePicBox .interfacePic small {
		line-height: 1.5;
		font-family: inherit;
		font-size: 1em;
		text-align: center;
		margin-top: 0.75em;
	}
@media screen and (max-width: 980px) { /*{TBs}*/
	.hometactPointList .pointUnit {
		padding-left: 4.2vw;
		padding-right: 4.2vw;
	}
}
@media screen and (max-width: 768px) { /*{SP}*/
	.hometactPointList .pointUnit:nth-of-type(n) {
		width: 100%;
		margin-top: 30px;
	}
	.hometactPointList .pointUnit.point3 .interfacePicBox .interfacePic small {
		font-size: 1.11rem;
		letter-spacing: -0.05em;
	}
	/* -- 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%);
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.hometactPointList .pointUnit:nth-of-type(n) {
		padding: 9vw 6vw 6vw;
	}
	.hometactPointList .pointUnit.point3 .interfacePicBox .interfacePic small {
		font-size: 1rem;
	}
}





/* shdsettingWrap
------------------------------------------------------------------------ */
	.shdsettingWrap {
		width: 85%;
		max-width: 1000px;
		margin-left:auto;
		margin-right:auto;
		
	}
	.shdsettingWrap > .heading {
		line-height: 1.6363;
		color: #fff;
		font-size: 2.2rem;
		text-align: center;
		background: #a7a7a7;
		padding: 0.775em 1.25em 0.7em;
	}
	.shdsettingWrap .txtBox {
		padding: 40px 50px;
		border: 1px solid #a7a7a7;
	}
	.shdsettingWrap .picBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 1.2em;
	}
	.shdsettingWrap .picBox .logo {
		width: 40%;
		max-width: 204px;
		margin-left: 30px;
	}
	.shdsettingWrap .picBox .cap {
		order: -1;
		flex: 1 1;
	}
@media screen and (max-width: 980px) { /*{TBs}*/
	.shdsettingWrap > .heading {
		font-size: calc(2.2rem + ((1vw - 9.8px) * 1.0893)); /* 22~17 px */
		padding: calc(.475em + 10px) 1em calc(.4em + 10px);
	}
	.shdsettingWrap .txtBox {
		padding: calc(3vw + 10px) calc(3vw + 20px);
	}
	.shdsettingWrap .picBox {
		display: block;
		margin-top: 2em;
	}
	.shdsettingWrap .picBox .logo {
		width: 80%;
		margin-left: 0;
		text-align: center;
		margin: 0 auto;
	}
	.shdsettingWrap .picBox .cap {
		width: 100%;
		margin-top: 2em;
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.shdsettingWrap > .heading {
		font-size: 1.6rem;
	}
	.shdsettingWrap .txtBox {
		padding: 8vw;
	}
}


/* hometactLinkWrap
------------------------------------------------------------------------ */
	.hometactLinkWrap {
		width: 85%;
		max-width: 1000px;
		margin-left:auto;
		margin-right:auto;
	}
	.hometactLinkWrap a {
		position: relative;
		text-decoration: underline;
		padding-right:30px;
        font-size: 1.4rem;
	}
@media (hover: hover) and (pointer: fine) {
	.hometactLinkWrap a:hover {
		text-decoration: none;
	}
}	
	
@media screen and (max-width: 768px) { /*{SP}*/
}






/* 調整 */
.main {
    font-family: YakuHanMP_Noto, "Noto Serif JP", "Noto Serif", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.header.is-hidden.is-mod .header-menu:before {
    background-color: rgba(255, 255, 255, 0.6);
    opacity: 1;
}
h3.ptHeading {
    color: #ffffff;
}
p.leadTxt.sentensTopXXS {
    color: #ffffff;
}
.generalHeading .sub, .brandBnr__label {
    font-family: YakuHanMP, 'Zen Old Mincho', YuMincho, 'Hiragino Mincho ProN', 'Yu Mincho', 'MS PMincho', serif;
}
.shdsettingWrap .txtBox .txt {
    line-height: 1.5;
}
.shdsettingWrap .txtBox .txt {
    font-size: 1.4rem;
}

@media screen and (min-width: 769px) {
    .lowPageHeading {
        margin-left: calc((100vw - 1040px) / -2);
        padding: 120px 0 150px;
        width: 100vw;
        z-index: 0;
    }
    .shdsettingWrap .txtBox .txt {
        font-size: 1.4rem;
    }
}
@media (max-width: 768px) {
    .lowPageHeading {
        margin-right: -40px;
        padding: 85px 0 60px;
        width: 335px;
        z-index: 0;
    }
    .lifeSection .lifeBox li.txtBox dt .en {
        font-size: 1.6em;
    }
}

/* usefulSection */
:root {

    /* hometactColor | rgba(var(--smarthome-hometactColor-main), 1) */
    --smarthome-hometactColor-main:		162, 163, 93;	/* rgb | #a2a35d */
    --smarthome-hometactColor-dark:		132, 139, 45;	/* rgb | #848b2d */
}

/*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;
}
.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%;
}
}
.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: #ededdf;
    padding: calc(var(--sentens-marpad-XL) * 1.083333) 0 calc(var(--sentens-marpad-M) * 1.1);
}
@media screen and (max-width: 520px) { /*{SPs}*/
.usefulSectionInner {
    padding: calc(var(--sentens-marpad-XL) * .8) 0 calc(var(--sentens-marpad-M) * .8);
}
}

/* 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: 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;
}
@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;
}
}
@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: 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)
    );
    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);
}
.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 {
    display: grid;
    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 {
                            /*background: skyblue;*/
}

/* usefulSceneCaseSection
--------------------------------- */
.usefulSceneCaseSection {
    --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)
    );

    display: grid;
    grid-template: 
        "number description" auto
        ".      picture"     1fr /
        4.642857em  1fr;
    gap: 0;
    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: 2.6rem;
    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;
}
@media screen and (max-width: 768px) { /*{SP}*/
.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 {
    --M-fluidFontSize-max-fontsize: 14;
    --M-fluidFontSize-min-fontsize: 13;
    --M-fluidFontSize-max-viewport: 520;
    --M-fluidFontSize-min-viewport: 420;
}
}
@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;
	}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
	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: #f7f7f7;
        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: #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 .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;
    }
}


/*.movieBnrBox-------------------------*/
.movieBnr a {
    display: block;
    box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .035);
    transition: opacity .13s ease-out;
}
.contbox.movieBnrBox {
    margin-top: 5rem;
}
/* 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;
}
.contbox.movieBnrBox {
    margin-top: 3rem;
}
}

.caption-r{
    font-size: 12px;
     margin-top: 5rem;
    text-align: end;
}