@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;
	}

	/* タイトルエリア */
	.headlogoArea{
		position: relative;
		width:100%;
		border-bottom: solid 1px #c8c7b8;
	}
	.headlogoArea .topLogoItem{
		width: 222px;
		padding: 5px 0;
		margin: 0px auto;
		text-align: center;
		vertical-align: center;
		font-size: 160%;
		/*font-weight: bold;*/
		color: #535353;
	}
	.headlogoArea ul.movCatLink{
		display: flex;
		margin:0 auto;
		justify-content: center;
	}
	.headlogoArea ul.movCatLink li{
		color: #5c5c50;
		font-size: 0.86em;
	}
	.headlogoArea ul.movCatLink li a{
		text-decoration: none;
	}
	.headlogoArea ul.movCatLink li.movLink{
		padding-left:22px;
		padding-right:1em;
		
	}
	.headlogoArea ul.movCatLink li.catLink{
		padding-left:22px;		
	}
	
	/* サブセクション */
	.sub-section {
		padding-top: 2rem;
		padding-bottom: 2rem;
		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: 1.6rem;
	}
	.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.2rem;/*font-size: 1.8rem;*/
		text-align: center;
	}
	
	/* add 2021/04/15  */
	.sub-sub-title {
		margin-top: 2rem;
		margin-bottom: 1.4rem;
		/* padding: 0.25em 0; */
		font-size: 1.6rem;
		text-align: left;
		/* text-align: center; */
	}
	/* end of add */
	
	/* add2021/04/16 */
	.subttl {
		font-size: 1.2rem;
		font-weight: bold;
		margin-bottom: 1rem;
	}
	/* end of add */

	.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-break: break-all;
	}
	.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: 1.4rem;/*font-size: 2rem;*/
		line-height: 1.4;
	}
	.flex-container.step3 .img {
		float: left;
		width: 32%;/*width: 34%;*/
	}
	.flex-container.step3 .text, .flex-container.step3 .ttl {
		float: left;
		width: 64%;/*width: 66%;*/
		padding-left: 4%;
	}
	.flex-container.step3 .ttl {

	}
	.flex-container.step3 .text {
		margin-top: .5em;
		font-size: 1rem;/*font-size: 1.4rem;*/
	}
	.caption-container {
		margin-bottom: 2rem;
		margin-top: 0.4rem;
	}
	
	
	/* products */
	.flex-container.products {
		justify-content: space-between;
		word-break: break-all;
	}
	.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;
	}

	/* タイトルエリア */
	.headlogoArea{
		position: relative;
		max-width:1200px;
		height: 70px;
		margin:0 auto;
	}
	.headlogoArea .topLogoItem{
		width: 222px;
		padding: 10px 10px;
		margin: 0px auto;
		text-align: center;
		vertical-align: center;
		font-size: 160%;
		/*font-weight: bold;*/
		color: #535353;
	}
	
	.headlogoArea ul.movCatLink{
		position: absolute;
		right: 0;
		top: 30px;
		display: flex;
	}
	.headlogoArea ul.movCatLink li{
		color: #5c5c50;
		font-size: 0.86em;
	}
	.headlogoArea ul.movCatLink li a{
		text-decoration: none;
	}
	.headlogoArea ul.movCatLink li.movLink{
		padding-left:22px;
		padding-right:1em;
		
	}
	.headlogoArea ul.movCatLink li.catLink{
		padding-left:22px;		
	}

	/* サブセクション */
	.sub-section {
		padding-top: 4rem;
	}
	.sub-title-container {
		padding-top: 3rem;
		border-top: solid 1px #d9d9d9;
	}
	.sub-title-container .products-sub-title {
		font-size: 2rem;
	}
	.sub-section:first-of-type .sub-title-container {
		padding-top: 0;
		padding-bottom: 1rem;
		border-top: none;
	}
	.sub-title {
		margin-top: 7rem;/*margin-top: 12rem;*/
		margin-bottom: 3rem;
		padding: 0.2em 0;
		font-size: 1.4rem;/*font-size: 1.8rem;*/
		text-align: center;
	}
	
	/* add 2021/04/15 */
	.sub-sub-title {
		/* margin-top: 3rem; */
		margin-bottom: 1.4rem;
		/* padding: 0.2em 0; */
		font-size: 1.6rem;
		text-align: left;
		/* text-align: center; */
	}	
	/* end of add */

	/* add 2021/04/16 */
		.subttl {
		font-size: 1.3rem;
		font-weight: bold;
		margin-bottom: 1rem;
	}

	.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%;
	}
	
	/* フレックスコンテナ：ハーフ add2021/04/08 */
	.flex-container.half {
		justify-content: space-between;
	}
	.flex-container.half>.flex-item {
		width: 48%;
	}
	
	/* フレックスコンテナ：3ステップ */
	.flex-container.step3 {
		margin-top: 2rem;
		font-size: 1.4rem;
		word-break: break-all;
		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: 1.6rem;/*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;
	}
	.flex-container.step3 .text {
		font-size: 1rem;
	}
	.caption-container {
		margin-top: 0.4rem;
		margin-bottom: 1rem;
	}


	/* products */
	.flex-container.products {
		margin-top: 2rem;
		font-size: 1.4rem;
		word-break: break-all;
	}
	.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) {
}

/* ====================================
	スクリーン専用スタイル
===================================== */
@media screen {
}


/* --------------202107追加--------------------------------------------------- */
.clearfix::after {
	display: block;
	clear: both;
	content: "";
}
/* main visual */
#global__keyvisual__bg {
	position: relative;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}
#global__keyvisual__ttl {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	line-height: 1.4;
	
}
#global__keyvisual__ttl .ttl {
	font-weight: bold;
}
/* add for iF design 2022/5/25 */
#global__keyvisual__if {
	position: absolute;
	bottom: 0%;
	left: 8%;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	line-height: 1.4;
}

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

/* table */
.ttlTable {
	margin-bottom: 0.5em;
}
table {
	width: 100%;
}
table th {
	font-weight: normal;
	text-align: center;
}
table,
table th,
table td {
	border: #dedede 1px solid;
}
table th {
	text-align: center;
	padding: 0.5em;
}


/* ====================================
	SP
===================================== */
@media screen and (max-width:767px){
.spDisNone {display: none !important;}
/* main visual */
#global__keyvisual__bg {
	background-image: url("../images/index/main_visual_sp.png");
	padding-top: 88.88%;
}
#global__keyvisual-a__bg {
	background-image: url("../images/index/main_visual-a_sp.png");
	padding-top: 88.88%;
}	
#global__keyvisual-b__bg {
	background-image: url("../images/index/main_visual-b_sp.png");
	padding-top: 88.88%;
}	
#global__keyvisual__ttl {
	padding-left: 5px;
}
#global__keyvisual__ttl .ttl {
	font-size: 1.42rem;
	text-shadow: 0px 0px 5px #fff;
}

/* 20230302 add */

#global__keyvisual__if {
	position: absolute;
	bottom: -10%;
	/*left: 0%; */
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	line-height: 1.4;
	width:180px;
}

#global__keyvisual__ttl .catch {
	font-size: 1.2rem;
}

#global__keyvisual__ttl {
	position: absolute;
	top: 63%;
	left: 0%;
	transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	line-height: 1.4;
	
}

/* table */
table th,
table td {
	padding: 0.5em;
}
.exampleTable {
	width: 100%;
	font-size: 1rem;
}
.exampleTable thead th:first-child {
	width: 30%;
}
}
/* ====================================
	PC
===================================== */
@media print, screen and (min-width:768px){
.pcDisNone {display: none !important;}
/* main visual */
#global__keyvisual__bg {
	background-image: url("../images/index/main_visual_pc.png");
	padding-top: 39.166%;
}
#global__keyvisual-a__bg {
	background-image: url("../images/index/main_visual-a_pc.png");
	padding-top: 39.166%;
}
#global__keyvisual-b__bg {
	background-image: url("../images/index/main_visual-b_pc.png");
	padding-top: 39.166%;
}	
#global__keyvisual__ttl {
	padding-left: 46px;
}


#global__keyvisual__ttl .catch {
	font-size: 1.7rem;
}
#global__keyvisual__ttl .ttl {
	font-size: 2.14rem;
}



/* 光触媒スプレーOEM供給 */
.col2Wrap .imgR {
	width: 47.7%;
	float: right;
}
.col2Wrap .txtL {
	width: 47.7%;
	float: left;
}
/* table */
table th {
	padding: 0.5em;
}
table td {
	padding: 1em;
}
.exampleTable {
	width: 90%;
	font-size: 1rem;
}
.exampleTable thead th:first-child {
	width: 31.9%;
}
.nowrapPc {
	white-space: nowrap;
}



}