@charset "utf-8";
/*=============================================================
 index
=============================================================*/
/* contents */
#contents{margin-top: 0;}

/* contentsInner */
.contentsInner{
	max-width: 1700px;
	position: relative;
}

/*=============================================================
 pageTtlMain
=============================================================*/
/*#pageTtlMain{height: 638px;}*/
#pageTtlMain .sliderBox{position: relative;}
#pageTtlMain .sliderBox .link-btn-normal{margin-top: 10px;}
#pageTtlMain .sliderBox .item{
	display: flex;
	column-gap: 10px;
	align-items: center;
	justify-content: space-between;
}
#pageTtlMain .sliderBox .item .text{
	display: flex;
	align-items: center;
	/*height: 638px;*/
	padding: 20px 0;
	max-width: 710px;
	width: 100%;
}
#pageTtlMain .sliderBox .item .text .inner{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 360px;
}
#pageTtlMain .sliderBox .item .text .vac{
	
}
#pageTtlMain .sliderBox .item .text .subttl{}
#pageTtlMain .sliderBox .item .text .lead{
	font-size: 2.6rem;
	line-height: 1.4;
	font-weight: 500;
	margin-top: 10px;
	letter-spacing: -.1em;
}
#pageTtlMain .sliderBox .item .text .lead span{
	display: block;
	font-size: 4.6rem;
	line-height: 1.3;
}
#pageTtlMain .sliderBox .item .text .fz22{
	font-size: 2.2rem;
	line-height: 1.5;
	margin-top: 10px;
}
#pageTtlMain .sliderBox .item .img{
	max-width: calc((1700px - 720px));
	width: 100%;
}
#pageTtlMain #playButton,
#pageTtlMain #stopButton{
	width: 22px;
	height: 22px;
	position: relative;
	text-indent: -9999px;
	overflow: hidden;
	background: transparent;
	border: none;
}
#pageTtlMain #playButton span{display: block;}
#pageTtlMain #playButton span::after{
	content: '';
	position: absolute;
	top: 3px;
	left: 5px;
  display: inline-block;
  vertical-align: middle;
  color: #0064B6;
  line-height: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 8px 12px;
  border-left-color: currentColor;
  border-right: 0;
}
#pageTtlMain #stopButton span::after,
#pageTtlMain #stopButton span::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 3px;
	height: 18px;
	box-sizing: border-box;
	border-radius: 2px;
	background-color: #0064B6;
}
#pageTtlMain #stopButton span::after{margin-left: -4px;}
#pageTtlMain #stopButton span::before{margin-left: 4px;}
#pageTtlMain .btn{
	position: absolute;
	bottom: 0;
	left: calc((4.8% + 260px));
}
/* dots */
.slick-dots {
	display: flex;
	column-gap: 26px;
	position: relative;
	/*margin-top: -120px;*/
}
.slick-dots li button {
	text-indent: -9999px;
  width: 12px;
  height: 12px;
  background-color: #D3E0E5;
  border: 2px solid #D3E0E5;
  border-radius: 50%;
  margin: 0;
  font-size: 12px; 
  line-height: 0;
  overflow: hidden;
}
.slick-dots li.slick-active button {
  background-color: #0064B6;
  border: 2px solid #0064B6;
}


/*.pTcalc{
	position: relative;
	padding-top: calc((-50px / 638px) * 100%);
}*/


/*=============================================================
 products-search-box
=============================================================*/
#products-search-box{
	background: rgb(16,203,234);
	background: linear-gradient(0deg, rgba(16,203,234,1) 0%, rgba(203,248,255,1) 100%);
	padding: 54px 0;
}
#products-search-box #products-search{
	/*max-width: 960px;*/
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	column-gap: 20px;
	align-items: flex-start;
}
#products-search-box #products-search dt{
	max-width: 204px;
	font-size: 2.0rem;
	line-height: 1.4;
	font-weight: bold;
	display: inline-block;
	vertical-align: middle;
	margin-top: 18px;
}
#products-search-box #products-search dd{width: calc((100% - 254px));}
#products-search-box #products-search dd .formArea{
	position: relative;
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	height: 60px;
}
#products-search-box #products-search dd .input-form{
	width: 100%;
	border: 1px solid #222;
	border-radius: 5px;
}
#products-search-box #products-search dd .btn{
	position: absolute;
	width: 60px;
	height: 60px;
	background: url(/shared/img/search-btn.png) no-repeat;
	background-size: 60px 60px;
	top: 0;
	right: 0;
	font-weight: 700;
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}
#products-search-box #products-search dd .col-3{
	column-gap: 2%;
	margin-top: 40px;
}
#products-search-box #products-search dd .col-3>*{width: calc((100% - 4%) / 3);}
#products-search-box #products-search dd .link-icon{
	width: 100%;
	background: #fff;
	padding: 16px 56px 16px 20px;
}
/*=============================================================
 attention-area
=============================================================*/
#attention-area{
	border: 1px solid #D42522;
	padding: 20px 30px;
	box-sizing: border-box;
}
#attention-area .attention-news{
	display: flex;
}
#attention-area .attention-news dt{
	color: #DC000C;
	font-size: 2.0rem;
	line-height: 1.4;
	max-width: 220px;
	width: 100%;
	margin-top: 3px;
}
#attention-area .attention-news dd{
	width: calc((100% - 220px));
	font-size: 1.8rem;
}


/*=============================================================
 news-area
=============================================================*/
.news-area{
	border-top: 1px solid #222222;
	border-bottom: 1px solid #222222;
	padding: 40px 0 0;
	box-sizing: border-box;
	display: flex;
	column-gap: 2%;
}
.news-area + .news-area{border: none;}
.news-area .tab-btn{flex-wrap: wrap;}
.news-area .ttl{
	width: 23.294%;
	font-size: 2.0rem;
	line-height: 1.4;
}
.news-area .ttl p{
	font-size: 1.6rem;
	margin-top: 10px;
}
.news-area .tab-set,
.important-area .list-news{
	max-width: 74.706%;
	width: 100%;
}
.news-area:not(.important-area ) .list-news{border-top: 1px dotted #ccc;}
.news-area .list-news dt {
	padding-top: 16px;
	color: #666;
}
.news-area.important-area .list-news dt{padding-top: 0;}
.news-area .list-news .newsIcon:first-of-type {
    margin-left: 10px;
}
.news-area .list-news .newsIcon{
	display: inline-block;
	text-align: center;
	font-size: 14px;
	font-style: normal;
	border: 1px solid #ccc;
	max-width: 200px;
	min-width: 130px;
	padding: 2px;
	box-sizing: border-box;
	margin-right: 10px;
    margin-top: 4px;
}
.news-area .list-news dd{
	padding-bottom: 20px;
	border-bottom: 1px dotted #ccc;
}
.news-area .list-news dd:last-child{border-bottom: none;}
.news-area .list-news a{padding: 2px 0}
.news-area .list-news>* + *{margin-top: 10px;}
.news-area .ttl_inner {
	display: flex;
  gap: 20px;
  align-items: center;
}
.news-area .ttl_inner .link-rss {
	margin-top: 0;
}
.news-area .ttl_inner .link-rss a {
	display: flex;
  align-items: center;
  font-size: 1.6rem;
	position: relative;
  margin: 0 0 0 20px;
}
.news-area .ttl_inner .link-rss a img {
	width: 16px;
  height: 16px;
  object-fit: contain;
  position: absolute;
  top: 6px;
  left: -20px;
}
.news-area .ttl_inner .link-rss a::after {
	content: none;
}

/*=============================================================
 basic-chemicals / specialty-chemicals
=============================================================*/
.basic-chemicals.block,
.specialty-chemicals.block{
	position: relative;
	padding: 100px 0 0;
	margin-bottom: 135px;
}
.basic-chemicals.block::after{
	content: '';
	background-color: #EFFDFF;
	position: absolute;
	top: 0;
	height: 580px;
	left: -100vw;
	width: calc(100vw + 80%);
	z-index: -1;
}
.specialty-chemicals.block::after{
	content: '';
	background-color: #EFFDFF;
	position: absolute;
	top: 0;
	height: 580px;
	right: -100vw;
	width: calc(100vw + 80%);
	z-index: -1;
}
.basic-chemicals.block .bdr,
.specialty-chemicals.block .bdr{
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
	width: 80%;
}
.basic-chemicals.block .bdr{max-width: 680px;}
.specialty-chemicals.block .bdr{max-width: 680px;}
.basic-chemicals.block .bdr::after,
.specialty-chemicals.block .bdr::after{
	content: '';
	height: 4px;
	background-color: #EF9B9B;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.specialty-chemicals.block .bdr::after{background-color: #B49EFD;}
.basic-chemicals.block .ttlBox,
.specialty-chemicals.block .ttlBox{
/*	display: flex;
	align-items: center;
	column-gap: 3%;*/
	line-height: 1.4;
}
.basic-chemicals.block .ttlBox .ttl,
.specialty-chemicals.block .ttlBox .ttl{
	font-size: 3.2rem;
	line-height: 1.2;
	white-space: nowrap;
}
.basic-chemicals.block .ttlBox .lead,
.specialty-chemicals.block .ttlBox .lead{
	font-size: 2.0rem;
	line-height: 1.4;
}

.specialty-chemicals .bdr{
	position: absolute;
	left: 20%;
}

/*=============================================================
 showcase-area
=============================================================*/
#showcase-area{
	padding: 80px 0;
	box-sizing: border-box;
	color: #fff;
}
.no-webp #showcase-area{background: url("/img/index_showcase.jpg") no-repeat center top;background-size: cover;}
.webp #showcase-area{background: url("/img/index_showcase.webp") no-repeat center top;background-size: cover;}
#showcase-area .ttl{
	font-size: 5.5rem;
	line-height: 1.4;
	text-align: center;
	font-weight: 400;		
}
#showcase-area .thum-area a{color: #222;}
#showcase-area .thum-area a .thum-link-ttl{background-color: #fff;}

/*=============================================================
 bnr-areaa
=============================================================*/
.bnr-area{
	display: flex;
	flex-wrap: wrap;
	column-gap: 16px;
    justify-content: center;
	margin-bottom: 30px;
}
.bnr-area>*{width: calc((100% - 80px) / 6);}
.bnr-area>* a{display: block;}
.bnr-area>* a .bnr-box{margin-bottom: 10px;}
.bnr-area>* a .bnr-box .bnr-inner{
	overflow: hidden;
	border: 1px solid #707070;
	box-sizing: border-box;
}
.bnr-area>* a .bnr-box .bnr-inner img{
	height: auto;
	transition: all .3s ease;	
	transform: scale(1.02);	
}
.bnr-area>* a:hover .bnr-box .bnr-inner img{transform: scale(1.05);}
.bnr-area>* a .bnr-link-ttl{
	line-height: 1.4;
	display: inline;
	padding: 2px 0 2px 0;
	position: relative;
	background: linear-gradient(#0064B6, #0064B6) 0 100%/0 1px no-repeat;
	transition: background .6s;
	text-decoration: none;
	margin-bottom: 3px;
	color: var(--linkColor);
}
.bnr-area>* a:hover .bnr-link-ttl{background-size: 100% 1px;}
.bnr-area>* a:hover .bnr-link-ttl img{content: url(/shared/img/icon-blank-o.svg);}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Tablet (portrait)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (min-width:768px) and (max-width:1023px){
/*=============================================================
 index
=============================================================*/


/*=============================================================
 pageTtlMain
=============================================================*/
/*#pageTtlMain{height: 638px;}*/
#pageTtlMain .sliderBox{position: relative;}
#pageTtlMain .sliderBox .item{
	display: flex;
	column-gap: 0;
	flex-direction: column-reverse;
	align-items: flex-start;
}
#pageTtlMain .sliderBox .item .text{
	display: block;
	max-width: inherit;
}
#pageTtlMain .sliderBox .item .text .inner{
	display: block;
	height: inherit;
}
#pageTtlMain .sliderBox .item .text .subttl{}
#pageTtlMain .sliderBox .item .text .lead{font-size: 3.0rem;}
#pageTtlMain .sliderBox .item .text .lead span{
	display: block;
	font-size: 4.6rem;
}
#pageTtlMain .sliderBox .item .text .fz22{
	margin: 10px 0 20px;
}
#pageTtlMain .sliderBox .item .img{
	max-width: 768px;
	margin: 0 auto 30px;
}
	
#pageTtlMain .btn{left: calc((4.8% + 260px));}


/*=============================================================
 products-search-box
=============================================================*/
#products-search-box{
	padding: 54px 0;
}
#products-search-box #products-search{
	max-width: inherit;
	margin: 0 auto;
	display: block;
}
#products-search-box #products-search dt{
	max-width: 100%;
	font-size: 2.4rem;
	text-align: center;
	display: block;
	margin: 10px 0 20px;
}
#products-search-box #products-search dd{width: 100%;}
#products-search-box #products-search dd .col-3{
	display: block;
	margin: 0 auto;
	margin-top: 40px;
}
#products-search-box #products-search dd .col-3>*{
	width: 60%;
	margin: 0 auto 10px;;
}
/*=============================================================
 attention-area
=============================================================*/
#attention-area{padding: 20px;}
#attention-area .attention-news{display: block;}
#attention-area .attention-news dt{
	max-width: inherit;
	width: 100%;
	margin: 0 0 10px;
}
#attention-area .attention-news dd{width: 100%;}


/*=============================================================
 news-area
=============================================================*/
.news-area{
	padding: 20px 0 0;
	display: block;
	column-gap: 2%;
}
.news-area .ttl{
	width: 100%;
	font-size: 1.8rem;
	margin-bottom: 20px;
}
.news-area .tab-set,
.important-area .list-news{max-width: 100%;}
.news-area .list-news dt {	padding-top: 12px;}
/*=============================================================
 basic-chemicals / specialty-chemicals
=============================================================*/	
.basic-chemicals.block .ttlBox,
.specialty-chemicals.block .ttlBox{display: block;}	
.basic-chemicals.block .ttlBox .ttl,
.specialty-chemicals.block .ttlBox .ttl{font-size: 2.4rem;margin-bottom: 10px;}
.basic-chemicals.block .ttlBox .lead,
.specialty-chemicals.block .ttlBox .lead{font-size: 1.8rem;}
	
/*=============================================================
 showcase-area
=============================================================*/
#showcase-area{padding: 50px 0;}
#showcase-area .ttl{font-size: 2.4rem;}
	
	
/*=============================================================
 bnr-areaa
=============================================================*/
.bnr-area>*{width: calc((100% - 50px) / 4);}
	
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:767px){
/*=============================================================
 index
=============================================================*/


/*=============================================================
 pageTtlMain
=============================================================*/
/*#pageTtlMain{height: 638px;}*/
#pageTtlMain .sliderBox{position: relative;}
#pageTtlMain .sliderBox .item{
	display: flex;
	column-gap: 0;
	flex-direction: column-reverse;
	align-items: flex-start;
}
#pageTtlMain .sliderBox .item .text{
	display: block;
	max-width: inherit;
}
#pageTtlMain .sliderBox .item .text .inner{
	display: block;
	height: inherit;
}
#pageTtlMain .sliderBox .item .text .subttl img{width: 30%;}
#pageTtlMain .sliderBox .item .text .lead{font-size: 1.8rem;}
#pageTtlMain .sliderBox .item .text .lead span{
	display: block;
	font-size: 2.6rem;
}
#pageTtlMain .sliderBox .item .text .fz22{
	margin: 10px 0 20px;
}
#pageTtlMain .sliderBox .item .img{
	max-width: 768px;
	margin: 0 auto 30px;
}
	
#pageTtlMain .btn{left: calc((4.8% + 260px));}


/*=============================================================
 products-search-box
=============================================================*/
#products-search-box{
	padding: 54px 0;
}
#products-search-box #products-search{
	max-width: inherit;
	margin: 0 auto;
	display: block;
}
#products-search-box #products-search dt{
	max-width: 100%;
	font-size: 2.4rem;
	text-align: center;
	display: block;
	margin: 10px 0 20px;
}
#products-search-box #products-search dd{width: 100%;}
#products-search-box #products-search dd .col-3{
	display: block;
	margin: 0 auto;
	margin-top: 40px;
}
#products-search-box #products-search dd .col-3>*{
	width: 70%;
	margin: 0 auto 10px;;
}
/*=============================================================
 attention-area
=============================================================*/
#attention-area{padding: 20px;}
#attention-area .attention-news{display: block;}
#attention-area .attention-news dt{
	max-width: inherit;
	width: 100%;
	margin: 0 0 10px;
}
#attention-area .attention-news dd{width: 100%;}


/*=============================================================
 news-area
=============================================================*/
.news-area{
	padding: 20px 0 0;
	display: block;
	column-gap: 2%;
}
.news-area .ttl{
	width: 100%;
	font-size: 1.8rem;
	margin-bottom: 20px;
}
.news-area .tab-set,
.important-area .list-news{max-width: 100%;}
.news-area .list-news dt {	padding-top: 12px;}
/*=============================================================
 basic-chemicals / specialty-chemicals
=============================================================*/
.basic-chemicals.block,
.specialty-chemicals.block{
	position: relative;
	padding: 50px 0 0;
	margin-bottom: 50px;
}
.basic-chemicals.block::after{height: 1000px;}
.specialty-chemicals.block::after{height: 1000px;}	
.basic-chemicals.block .ttlBox,
.specialty-chemicals.block .ttlBox{display: block;}	
.basic-chemicals.block .ttlBox .ttl,
.specialty-chemicals.block .ttlBox .ttl{font-size: 2.4rem;margin-bottom: 10px;}
.basic-chemicals.block .ttlBox .lead,
.specialty-chemicals.block .ttlBox .lead{font-size: 1.8rem;}

	
/*=============================================================
 basic-chemicals / specialty-chemicals
=============================================================*/



/*=============================================================
 showcase-area
=============================================================*/
#showcase-area{padding: 50px 0;}
#showcase-area .ttl{font-size: 2.4rem;}

/*=============================================================
 bnr-areaa
=============================================================*/
.bnr-area{justify-content: flex-start;}
.bnr-area>*{width: calc((100% - 16px) / 2);}
.bnr-area>*:nth-child(n+3){margin-top: 40px;}

	
	
}