@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
#globalSupportFooter .btn-scenes-list-black,
#globalSupportFooter ul.list-sns {
	display: none;
}

/* サブセクション */
.products-sub-title {
	font-weight: 300;
}

.sub-section .ttl {
	font-weight: 500;
}

.sub-title {
	background: #e6e6e6;
}

/* 左アローボタン */
.has-btn-show-list {
	display: flex;
}

ul.list-btn-show-list {
	display: flex;
}

ul.list-btn-show-list li {
	display: flex;
	align-items: center;
}

/* メインビジュアル：スライドショー */
.main-visual-button-next, .main-visual-button-prev {
	position: absolute;
	top: 50%;
	width: 6%;
	height: 12%;
	margin-top: -6%;
	z-index: 2;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.6);
	background-size: 40% auto;
	background-position: center;
	background-repeat: no-repeat;
}

.main-visual-button-prev {
	background-image: url(/products/common/images/arrow-prev-b.svg);
	left: 0;
	right: auto
}

.main-visual-button-next {
	background-image: url(/products/common/images/arrow-next-b.svg);
	right: 0;
	left: auto
}

.main-img .swiper-pagination {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 20px 0;
	position: relative;
}

.main-img .swiper-pagination-bullet {
	width: 40px;
	height: 4px;
	margin: 0 5px;
	background: #aaa;
	border-radius: 0;
}

.main-img .swiper-pagination-bullet-active {
	background: #878787;
}

.font-bold {
	font-weight: 500;
}

.text-container {
	/*font-weight: 400;*/
}

/* シーンタイトル */
.category {
	min-width: 12em;
}

/* サブセクション */
.sub-ttl {
	background: #A0A0A0;
	color: #fff;
	border-radius: 0 0 1rem 1rem;
}

/* 3ステップ */
.flex-container.step3>.flex-item {
	position: relative;
	overflow: hidden;
}

.flex-container.step3 .num {
	background: #A0A0A0;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0
}

.flex-container.step3 .ttl {
	font-weight: 500;
}


/* ====================================
	スマートフォン専用スタイル
===================================== */
@media only screen and (max-width: 767px) {
	.sp-content-width {
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
	
	/* サブセクション */
	.sub-section {
		padding-top: 4rem;
		padding-bottom: 4rem;
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.sub-title-container {
		/*margin-bottom: 3rem;*/
		padding-top: 3rem;
		border-top: solid 1px #d9d9d9;
	}
	.sub-title-container .products-sub-title {
		flex-shrink: 0;
		font-size: 2.2rem;
	}
	.sub-section:first-of-type .sub-title-container {
		padding-top: 0;
		padding-bottom: 1rem;
		border-top: none;
	}
	.sub-title {
		margin-top: 6rem;
		margin-bottom: 2rem;
		padding: 0.25em 0;
		font-size: 1.8rem;
		text-align: center;
	}
	.sub-section .base-width>.sub-title:first-of-type {
		margin-top: 0;
	}

	/* フレックスコンテナ：イメージテキスト */
	.flex-container.img-text {
		justify-content: space-between;
	}
	.flex-container.img-text>.img-container, .flex-container.img-text>.text-container
		{
		width: 48%;
	}

	/* 3ステップ */
	.flex-container.step3 {
		justify-content: space-between;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
	.flex-container.step3>.flex-item {
		width: 100%;
		margin-top: 2rem;
	}
	.flex-container.step3>.flex-item:first-of-type {
		margin-top: 3rem;
	}
	.flex-container.step3 .num {
		width: 22px;
		font-size: 2rem;
		line-height: 1.4;
	}
	.flex-container.step3 .img {
		float: left;
		width: 34%;
	}
	.flex-container.step3 .text, .flex-container.step3 .ttl {
		float: left;
		width: 66%;
		padding-left: 4%;
	}
	.flex-container.step3 .ttl {

	}
	.flex-container.step3 .text {
		margin-top: .5em;
		font-size: 1.4rem;
	}
	.caption-container {
		margin-bottom: 2rem;
		margin-top: 0.4rem;
	}
	
	/* products */
	.flex-container.products {
		justify-content: space-between;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
	.flex-container.products>.flex-item {
		width: 100%;
		margin-top: 2rem;
	}
	.flex-container.products>.flex-item:first-of-type {
		margin-top: 3rem;
	}
	.flex-container.products .num {
		width: 22px;
		font-size: 2rem;
		line-height: 1.4;
	}
	.flex-container.products .img {
		float: left;
		width: 44%;
	}
	.flex-container.products .text, .flex-container.products .ttl {
		float: left;
		width: 56%;
		padding-left: 4%;
	}
	.flex-container.products .ttl {

	}
	.flex-container.products .text {
		margin-top: .5em;
		font-size: 1.4rem;
	}
}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print , screen and (min-width: 768px) {
	/* メインビジュアル */
	.img-container {
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	
	/* サブセクション */
	.sub-section {
		padding-top: 6rem;
	}
	.sub-title-container {
		padding-top: 5rem;
		border-top: solid 1px #d9d9d9;
	}
	.sub-title-container .products-sub-title {
		font-size: 2.8rem;
	}
	.sub-section:first-of-type .sub-title-container {
		padding-top: 0;
		padding-bottom: 1rem;
		border-top: none;
	}
	.sub-title {
		margin-top: 12rem;
		margin-bottom: 3rem;
		padding: 0.2em 0;
		font-size: 1.8rem;
		text-align: center;
	}
	.sub-section .base-width>.sub-title:first-of-type {
		margin-top: 4rem;
	}

	/* フレックスコンテナ：イメージテキスト */
	.flex-container.img-text {
		justify-content: space-between;
	}
	.flex-container.img-text>.img-container, .flex-container.img-text>.text-container
		{
		width: 48%;
	}
	
	/* 3ステップ */
	.flex-container.step3 {
		margin-top: 2rem;
		font-size: 1.4rem;
		word-wrap: break-word;
		overflow-wrap: break-word;
		justify-content: center;
	}
	.flex-container.step3>.flex-item {
		width: 20%;
		margin-left: 8.3333%;
	}
	.flex-container.step3>.flex-item:nth-of-type(3n-2) {
		margin-left: 0;
	}
	.flex-container.step3 .num {
		width: 26px;
		font-size: 2.2rem;
		line-height: 1.4;
		top: 1rem;
		left: 1rem;
	}
	.flex-container.step3 .img {
		padding: 1rem;
	}
	.flex-container.step3 .ttl {
		margin-bottom: .5em;
		font-size: 1.6rem;
	}
	.caption-container {
		margin-top: 0.4rem;
		margin-bottom: 1rem;
	}


	/* products */
	.flex-container.products {
		margin-top: 2rem;
		font-size: 1.4rem;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
	.flex-container.products>.flex-item {
		width: 28%;
		margin-left: 8.3333%;
	}
	.flex-container.products>.flex-item:nth-of-type(3n-2) {
		margin-left: 0;
	}
	.flex-container.products .num {
		width: 26px;
		font-size: 2.2rem;
		line-height: 1.4;
		top: 1rem;
		left: 1rem;
	}
	.flex-container.products .img {
		padding: 1rem;
	}
	.flex-container.products .ttl {
		margin-bottom: .5em;
		font-size: 1.6rem;
	}
}

/* ====================================
	タブレット、印刷専用スタイル
===================================== */
@media print , screen and (min-width: 768px) and (max-width: 1079px) {
}

/* ====================================
	PC専用スタイル
===================================== */
@media only screen and (min-width: 1080px) {
}


/* --------------202107追加--------------------------------------------------- */
.clearfix::after {
	display: block;
	clear: both;
	content: "";
}
.mgb4em, .sentence {margin-bottom: 4em !important;}
.mgb3em {margin-bottom: 3em !important;}
.mgb2em, .paragraph {margin-bottom: 2em !important;}
.mgbLine {margin-bottom: 1em !important;}
.taL,.alignLeft { text-align: left !important;}
.taC,.alignCenter { text-align: center !important;}
.taR,.alignRight { text-align: right  !important;}

/* MainVisual */
.main-visual-container {
	padding-top: 39.16%;
	background-image: url("../images/index/main-visual.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	z-index: 1;
}
.mainVisualTtlWrap {
	text-align: center;
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	background-color: rgba(255,255,255,0.7);
	opacity: 0;
	animation: fadeIn 1s ease 0.5s 1 forwards;
	-webkit-animation: fadeIn 1s ease 0.5s 1 forwards;
}

/* 2022/05/25 add for iF award*/
.mainVisualIFWrap {
	text-align: center;
	position: absolute;
	top: 15%;
	right: -10%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	background-color: rgba(255,255,255,0.7);
}

/*movie*/
.youtube {
  	position: relative;
  	width: 100%;
  	padding-top: 56.25%;
  	margin-top: 30px;
}
.youtube iframe {
  position: absolute;
  top: 10px;
  right: 5%;
  left:  5%;
  width: 90% !important;
  height: 90% !important;
}
@keyframes fadeIn {
  100% {
    opacity: 1
  }
}
@-webkit-keyframes fadeIn {
  100% {
    opacity: 1
  }
}

.mainVisualMainTtl {
	font-weight: bold;
}

/* アイコンlist */
.effectList {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.effectList > li {
	text-align: center;
}
.effectList > li .txt {
	margin-top: 0.5em;
}
.here {
	margin-top: 1em;
}
/* 特長 */
.img-ttl {
	margin-top: 0.5em;
}
/* SIAA認証シャープの可視光応答型光触媒 */
.markImg {
	text-align: right;
	margin-top: 0.5em;
}
/* 主な実証データ */
.titleH04 {
	background-color: #dbedfe;
	border-left: #3399ff 4px solid;
	padding: 0.25em 0.25em 0.25em 1em;
	margin-bottom: 1em;
	font-weight: bold;
}
.dataTtl {
	text-align: center;
	font-weight: bold;
	margin: 1em 0 1.5em;
}
.imgFrame {
	border: #dedede 1px solid;
	box-sizing: border-box;
}
.testList {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.testList dt {
	font-weight: normal;
	min-height: 1em;
	height: auto;
	position: relative;
}
.testList dt::after {
	content: ':';
	display: block;
	position: absolute;
	right: 0;
	top: 0;
}
.testList dt,
.testList dd {
	margin-bottom: 0.75em;
	line-height: 1.4;
}
.testList.testResult dt,
.testList.testLab dt {
	padding-left: 1em;
	position: relative;
}
.testList.testResult dt::before {
	content: '';
	width: 0.75em;
	height: 0.75em;
	background-color: #434343;
	display: block;
	position: absolute;
	left: 0;
	top: 0.4em;
}
.testList.testLab dt::before {
	content: '';
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background-color: #434343;
	display: block;
	position: absolute;
	left: 0;
	top: 0.5em;
}
.testList dd {
	padding-left: 0.25em;
}
.testList.heading6em dt {
	width: 6.5em;
}
.testList.heading6em dd {
	/*padding-left: 7em;*/
	width: calc(100% - 7em);
}
.testList.heading5em dt {
	width: 5.5em;
}
.testList.heading5em dd {
	/*padding-left: 6em;*/
	width: calc(100% - 6em);
}
.testList.heading8em dt {
	width: 8.5em;
}
.testList.heading8em dd {
	/*padding-left: 9em;*/
	width: calc(100% - 9em);
}
.testList.heading10em dt {
	width: 10.5em;
}
.testList.heading10em dd {
	/*padding-left: 11em;*/
	width: calc(100% - 11em);
}

table {
	width: 100%;
}
table th {
	font-weight: normal;
	text-align: center;
}
table,
table th,
table td {
	border: #dedede 1px solid;
	vertical-align: middle;
}
.dataTable th {
	font-weight: bold;
}
.halfTable th {
	width: 50%;
	font-weight: bold;
}
.one3rdTable th {
	width: 33.33%;
	font-weight: bold;
}

/* ====================================
	SP
===================================== */
@media screen and (max-width:767px){
.spDisNone {display: none !important;}
.mainVisualTtlWrap {
	padding: 0.5em;
	white-space: nowrap;
}
/* 2022/05/25 add for iF AWARD */
.mainVisualIFWrap {
	top: 18%;
	right: -8%;
	width: 20%;
	padding: 0.1em;
	white-space: nowrap;
}
	
.mainVisualSubTtl {
	font-size: 1.6rem;
}
.mainVisualMainTtl {
	font-size: 2.2rem;
}
/* アイコンlist */
.effectList {
	flex-wrap: wrap;
}
.effectList > li {
	width: 50%;
	padding: 0 15px;
	margin-top: 30px;
}
.effectList > li:nth-child(-n + 2) {
	margin-top: 0;
}
.effectList > li .ic {
	padding: 0 15px;
}
.markImg {
	width: 40%;
	margin-left: auto;
	margin-right: 0;
}
.visual.copyprotectImg {
	margin-top: 1em;
}
/* 主な実証データ */
.titleH04 {
	font-size: 1.8rem;
}
.dataTtl {
	font-size: 2rem;
}
.col2Wrap .imgL {
	margin-bottom: 1em;
}
/* tableScroll */
table {width: 100%;}
table th,
table td {
	padding: 0.5em;
}
.tableScroll {
	overflow: auto;
	white-space: nowrap;
}
.tableScroll::-webkit-scrollbar{
	height: 5px;
}
.tableScroll::-webkit-scrollbar-track {
	background: #f1f1f1;
}
.tableScroll::-webkit-scrollbar-thumb {
	background: #bcbcbc;
}
.tableScroll table {
	margin-bottom: 5px;
}
.ligtTimeTable thead th:nth-child(2),
.ligtTimeTable thead th:nth-child(3){
	padding: 0.5em 0.75em;
}
.ligtTimeTable tbody td:nth-child(2),
.ligtTimeTable tbody td:nth-child(3),
.ligtTimeTable tbody td:nth-child(4),
.ligtTimeTable tbody td:nth-child(5) {
	padding: 0.5em 0.25em;
}
.ligtTimeTable img {
	width: 35px;
	height: auto;
}
/* 法人向けラインアップ(製品・サービス) */
.sub-title-container + .flex-container.sp-column2 > .flex-item:nth-of-type(-n+2) {
	margin-top: 3rem;
}
}
/* ====================================
	PC
===================================== */
@media print, screen and (min-width:768px){
.pcDisNone {display: none !important;}
/* mainVisual */
.mainVisualTtlWrap {
	padding: 45px 40px;
	line-height: 1.6;
}
.mainVisualSubTtl {
	font-size: 1.8rem;
}
.mainVisualMainTtl {
	font-size: 3rem;
}
/* 2022/05/25 add for iF AWARD */	
.mainVisualIFWrap {
	padding: 5px;
	line-height: 1.6;
}	
/* アイコンlist */
.effectList {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.effectList > li {
	width: 14%;
	padding: 0 15px 15px;
	box-sizing: border-box;
}
/* SIAA認証シャープの可視光応答型光触媒 */
.markImg {
	width: 22.22%;
	margin-right: 0;
	margin-left: auto;
	padding: 0 40px;
}
/* メカニズム */
.flex-container.step3>.flex-item {
	width: 28.7%;
	margin-left: 6.95%;
}
/* 主な実証データ */
.titleH04 {
	font-size: 1.8rem;
}
.dataTtl {
	font-size: 2.4rem;
}
.col2Wrap .imgL {
	width: 47.7%;
	float: left;
}
.col2Wrap .txtR {
	width: 47.7%;
	float: right;
}
table th {
	padding: 0.5em;
}
table td {
	padding: 1em;
}
.dataTable th,
.dataTable td {
	vertical-align: middle;
}
.dataTable thead th:first-child {
	width: 25%;
}
.dataTable thead th:nth-child(3),
.dataTable thead th:nth-child(4) {
	width: 12.4%;
}
.ligtTimeTable th,
.ligtTimeTable td {
	padding: 0.5em;
}
.ligtTimeTable th {
	font-weight: bold;
}
.ligtTimeTable thead th:nth-child(2),
.ligtTimeTable thead th:nth-child(3),
.ligtTimeTable thead th:nth-child(4),
.ligtTimeTable thead th:nth-child(5) {
	width: 20%;
}
.pc-w50Wrap {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
/* 製品ラインアップ */
.sub-title-container + .flex-container.column4 {
	margin-top: 3rem;
}
.flex-container.products>.flex-item {
	width: 20.7%;
	margin-left: 5.7%
}
}