@charset "utf-8";

/* ***************************************************************************************************
	COMMON
*************************************************************************************************** */

  @media screen and (max-width: 768px) {
	.mainRoleHeaderVisualBox .ppic img {
	  margin-left: -25%;
	}
}

	.equCategoryContainer .contbox {
		max-width:1000px;
	}
	.equCategoryContainer .equListWrap .generalColBox {
		--common-generalColBox-margin-t:	40px;
		/*margin-top:		calc(var(--common-generalColBox-margin-t) * -1);*/
	}
	
@media screen and (max-width: 520px) { /*{SPs}*/
	.equCategoryContainer .equListWrap .generalColBox {
		margin-top:		calc(var(--common-generalColBox-margin-t) * -1);
	}
}


/* ***************************************************************************************************
	PAGE
*************************************************************************************************** */

/* equCategoryContainer
------------------------------------------------------------------------ */
	.equCategoryContainer.cat-kitchen {
		margin-top:		clamp(60px, 8.333vw, 100px);	/* 1200px以下からサイズ変更 */
	}
	.equCategoryContainer:not(.cat-kitchen) {
		position: relative;
		margin-top:		clamp(90px, 10.833vw, 120px);	/* 1200px以下からサイズ変更 */
		padding-top:	clamp(90px, 10.833vw, 120px);	/* 1200px以下からサイズ変更 */
	}
	.equCategoryContainer:not(.cat-kitchen)::before {
		content: "";
		position: absolute;
		top: 0; bottom: auto; left: 0; right: 0;
		width: var(--default-contentWide-M);
		max-width: 1000px;
		margin: auto;
		border-top: 1px solid #555;
	}
@media screen and (max-width: 520px) { /*{SPs}*/
	.equCategoryContainer:not(.cat-kitchen) {
		position: relative;
		margin-top:		60px;
		padding-top:	60px;
	}
	.equCategoryContainer:not(.cat-kitchen)::before {
		width: 100%;
	}
}

/* categoryTtl
------------------------------------------------------------------------ */
	.categoryTtl .hTxt_en {
		margin-bottom: 0;
	}

/* equListWrap
------------------------------------------------------------------------ */
	.equListWrap .generalColBox {
		margin-top: 0;
	}
	.equListWrap .colUnit {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
	}
	.equListWrap .colUnit > * {
		width: 100%;
	}
	.equListWrap .colUnit .ttl {
		text-align: center;
	}
	.equListWrap .colUnit .pic {
		order: -1;
	}
	.equListWrap .colUnit .pic img {
		width: 100%;
		max-width: none;
	}
	.equListWrap .colUnit .pic .imgcapkeep {
		color: #fff;
		background: rgba(0, 0, 0, .65);
		padding: 0.2em 0.8em;
	}
	.equListWrap .colUnit .txt {
	}
@media screen and (max-width: 1340px) { /*{TBl}*/
	/*.equListWrap .generalColBox {
		--common-generalColBox-margin-lr:	20px;
	}*/
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.equListWrap  {
		width: 96%;
		margin-left:	auto;
		margin-right:	auto;
	}
}



/* cat-security
------------------------------------------------------------------------ */
	.cat-security .securityContents {
		color: #000;
		text-align: center;
		background: rgba(233, 233, 233, .95);
	}
	.cat-security .picBox {
		padding: clamp(40px, 4.081vw, 50px) 60px clamp(20px, 2.081vw, 25px);
		max-width:600px;
	}
	.cat-security small {
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		color: inherit;
		padding: 1em;
		/*padding: clamp(30px, 3.058vw, 39px) clamp(8px, 3vw, 1.5em) 0;*/
	}
	.cat-security small.capRtoL {
		text-align: right;
	}
	.cat-security small.capRtoL * {
		display: inline;
	}
@media screen and (max-width: 980px) { /*{TBs}*/
	.cat-security {
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}
	.cat-security .picBox {
		/*padding: clamp(30px, 7.5vw, 60px) 0 clamp(15px, 3.75vw, 30px);*/
	}
	/*.cat-security small {
		padding-top: clamp(20px, 6.75vw, 60px);
	}*/
	.cat-security small.capRtoL {
		text-align: left;
	}
	.cat-security small.capRtoL .symItem {
		display: flex;
	}
	.cat-security small.capRtoL .symItem > * {
		display: block;
	}
}
@media screen and (max-width: 768px) { /*{SP}*/
	.cat-security .picBox {
		padding:clamp(37px, 8.75vw, 60px) 30px clamp(18px, 4vw, 30px);
	}
	.cat-security .picBox > p {
		max-width: 500px;
		margin: 0 auto;
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.cat-security small {
		font-size: 1rem;
		letter-spacing: .03em;
	}
}



/* linoughContents
------------------------------------------------------------------------ */
	.linoughContents {
		color:var(--site-themeColor-base-inversion-text);
		background: #fff;
		padding:60px;
	}
	.linoughContents ul li dt {
		font-size: 1.28571em;
		line-height: 1.5;
	}
	.linoughContents ul li:nth-of-type(2) {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: space-between;
		margin-top:12px;
	}
	.linoughContents ul li:nth-of-type(2) dd {
		width: 47%;
	}
	.linoughContents li .pic {
		max-width:440px;
	}
	
@media screen and (max-width: 980px) { /*{TBs}*/
	.linoughContents {
		padding:40px;
	}
}

@media screen and (max-width: 768px) { /*{SP}*/
	.linoughContents {
		padding:30px;
	}
	.linoughContents ul li dt {
		font-size: 1.175em;
	}
	.linoughContents ul li:nth-of-type(2) dd {
		width: 100%;
		line-height: 1.55;
		font-size: .965em;
	}
	.linoughContents ul li:nth-of-type(2) dd:nth-of-type(2) {
		padding-top:20px;
	}
}







/* smarthomeContents
------------------------------------------------------------------------ */
/* smarthomeBnBox
---------------------------------------------------- */
	.smarthomeBnBox {
		padding: 60px 3.5%;
		/*background: #6d6452;*/
		background: var(--site-themeColor-base-inversion);
		color: var(--site-themeColor-base-inversion-text);
	}
	.smarthomeBnBox .shLink {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-end;
		line-height: 1.35;
		font-size: 1.4rem;
		letter-spacing: 0.03em;
		text-align: center;
	}
	/* txtBox
	----------------------- */
	.smarthomeBnBox .txtBox {
		/*width: 38%;*/
		width: 100%;
	}
	.smarthomeBnBox .txtBox .shHeading {
		display: block;
		font-size: 1.571em;
		letter-spacing: 0.07em;
		padding: 0.5em 0;
	}
	.smarthomeBnBox .txtBox .shList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		font-size: 1.1em;
	}
	.smarthomeBnBox .txtBox .shList li {
		width: 100%;
		margin-top: 1.4%;
		padding: 0.4em 0.5em;
		border: 1px solid rgba(255,255,255,.5);
	}
	.IE11BROWSER .smarthomeBnBox .txtBox .shList li .label {	transform: translateY(0.17em);	} /* YuMincho対策 */	/* picBox
	----------------------- */
	.smarthomeBnBox .picBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		max-width:666px;
		margin-left:auto;
		margin-right:auto;
	}
	.smarthomeBnBox .picBox figure {
		display: flex;
		flex-direction: column;
		width: 32%;
		margin-top:  var(--sentens-marpad-XS);
		
	}
	.smarthomeBnBox .picBox .pic {
		position: relative;
		width: 100%;
		min-height: 1px; /* IE対策（Flaxboxの余白対策） */
	}
	.smarthomeBnBox .picBox .pic img {
		width: 100%;
		max-width: none;
	}
	.smarthomeBnBox .picBox figcaption {
		flex: 1 1 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-family: inherit;
		font-size: 1em;
		background: #272624;
		padding: 0.25em 0.5em;
		margin-top:10px;
	}
	.IE11BROWSER .smarthomeBnBox .picBox figcaption .label {	transform: translateY(0.19em);	} /* YuMincho対策 */
	
	/* longArrowBtnBox
	----------------------- */
	.smarthomeContents .longArrowBtnBox {
		max-width:14em;
		margin:30px auto 0;
	}
	.smarthomeContents .longArrowBtnBox .longArrowBtnUnit .longArrow,
	.smarthomeContents .longArrowBtnBox .longArrowBtnUnit .longArrow::after {
		border-bottom:1px solid #333;
	}
	
	
	
	
@media screen and (max-width: 980px) { /*{belowTB}*/
	.smarthomeBnBox {
		padding: 40px 4.5%;
	}

	.smarthomeBnBox .shLink .shHeading {
		font-size: 1.45vw; /* */
	}
	/* txtBox
	----------------------- */
	.smarthomeBnBox .txtBox {
		/*display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		width: 100%;*/
	}
	.smarthomeBnBox .txtBox .shHeading {
		width: 100%;
		text-align: center;
		padding-top: 0.1em; /* 微調整 */
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 980;
		/*--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)
		);
	}
	.smarthomeBnBox .txtBox .shList {
		font-size: 1.6rem;
		max-width:600px;
		margin-left:auto;
		margin-right:auto;
		
		--M-fluidFontSize-max-fontsize: 16;
		--M-fluidFontSize-min-fontsize: 12;
		--M-fluidFontSize-max-viewport: 980;
		/*--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)
		);
	}
	.smarthomeBnBox .txtBox .shList li {
		margin-top: 3px;
		padding-top:	0.25em;
		padding-bottom:	0.25em;
	}
	/* picBox
	----------------------- */
	.smarthomeBnBox .picBox {
		width: 100%;
		/*max-width:600px;*/
		margin-top: 3.5%;
		margin-left:auto;
		margin-right:auto;
	}
	.smarthomeBnBox .picBox figcaption {
		padding: 0.5em;
	}
	
	.smarthomeBnBox .picBox figcaption {
		--M-fluidFontSize-max-fontsize: 14;
		--M-fluidFontSize-min-fontsize: 11;
		--M-fluidFontSize-max-viewport: 980;
		/*--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)
		);
	}
}


@media screen and (max-width: 768px) { /*{SP}*/
	.smarthomeBnBox {
		padding: 30px 4.5%;
	}
	.smarthomeBnBox .picBox {
		max-width:450px;
	}
	.smarthomeBnBox .picBox figure {
		width: 49%;
	}
	.smarthomeBnBox .picBox figure:nth-of-type(n+3) {
		margin-top:30px;
	}
}
@media screen and (max-width: 600px) { /*{MinorBreakpoint}*/
	/* txtBox
	----------------------- */
	.smarthomeBnBox .txtBox {
		display: block;
	}
	.smarthomeBnBox .txtBox .shHeading .inbl {
		display: block;
	}
	.smarthomeBnBox .txtBox .shList {
		width: 100%;
	}
	.smarthomeBnBox .txtBox .shList li {
		padding: 0.5em 0.3em;
	}
}









