@charset "utf-8";

main {
	margin-bottom: 70px;
	text-align: justify;
}

/*-------- hタグ --------*/
h2,h3,h4,h5 {letter-spacing: 0.05em;}

h2 {
	margin-bottom: 30px;
	text-align: center;
}

h3 {
	margin: 0 0 5px;
	color: #272b76;
	font-size: 135%;
	line-height: 1.4;
}

h4 {
	padding: 10px 25px;
	color: #fff;
	font-size: 140%;
	text-align: center;
	background: #272b76;
	border-radius: 50px;
}

@media all and (-ms-high-contrast:none){
	h4 {
	padding: 15px 25px 10px 25px;
	}
}


/*-------- パンくず --------*/
#sec1 {
	margin-bottom: 40px;
	padding: 10px 0;
	background: #f0f3f5;
}

/*-------- メインリード文 --------*/
.main-read {
	font-size: 108%;
	letter-spacing: 0.05em;
}

/*-------- 製品トップ --------*/
/* アコーディオンボタン */
#acd_title,#acd_title a {
	padding: 10px 10px 10px 0;
	display: block;
	color: #272b76;
	font-size: 18px;
	cursor: pointer;
	border-bottom: 1px solid #272b76;
}

#acd_title i {float: right;}
#acd_title a {padding: 0; border: none;}

#acd_title span {
	margin: 0 0 0 10px;
	color: #999;
	font-size: 70%;
}

#denshi-top .accordion_detail {
	padding: 20px;
	display: none;
}

#denshi-top .accordion_detail a {margin-right: 15px;}

#denshi-top .accordion_detail i {
	margin-right: 5px;
	font-size: 110%;
}

/*-------- ドライルームウエア --------*/
#drw h3 {
	font-size: 190%;
	font-weight: bold;
}

#drw .point-detail img {width: 60%;}

#drw .point-detail ul {
	width: 100%;
	float: none;
}

#drw .point-detail ul a {color: #cc3333;}

#drw .point-detail p.sub_title {
	width: 100%;
	margin: 15px 0 5px;
	color: #272b76;
	font-size: 140%;
	font-weight: bold;
	float: none;
}

/*-------- 静電靴 --------*/
#seiden-shoes #sec3 {margin-top: 35px;}
#seiden-shoes #sec4 {text-align: center;}

/*-------- クリーンブーツ --------*/
.cleanboots {
	text-align: center;
}

.cleanboots img {
	margin-top: 30px;
	max-width: 900px;
	width: 100%;
}

/*-------- 静電気対策 --------*/
#seidenki h3 {
	font-size: 190%;
	font-weight: bold;
}

#seidenki .name {font-weight: bold;}

#seidenki .main-read {
	width: 69%;
	float: left;
}

#seidenki .main-img {
	width: 30%;
	float: right;
}

#seidenki .main-read .title {
	color: #272b76;
	font-size: 140%;
	font-weight: bold;
}

#seidenki .main-read .border-top {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px dashed #272b76;
}

#seidenki .main-read ul li { 
	padding-left: 1.1em; 
	text-indent: -1.1em;
}

#seidenki .main-read ul li:before {
	content: "■ ";
	font-size: 80%;
}


/*-------- タフネス --------*/
#toughness h3 {
	margin: 0 0 30px;
	color: #333;
	font-size: 170%;
	font-weight: normal;
}

#toughness h3 span {color: #cc9900;}

#toughness h4 {
	margin: 0 0 5px;
	padding: 0;
	color: #272b76;
	font-size: 125%;
	font-weight: bold;
	text-align: left;
	background: none;
	border-radius: 0;
}

#toughness h5 {
	color: #272b76;
	font-size: 200%;
	font-weight: normal;
	line-height: 1;
	letter-spacing: 0.1em;
}

#toughness h5 span {font-size: 150%;}

#toughness .product {
	width: 69%;
	float: left;
}

#toughness .main-img {
	width: 27%;
	float: right;
}

#toughness .product ul {margin-top: 10px;}

#toughness .product ul li { 
	padding-left: 1.1em; 
	text-indent: -1.1em;
}

#toughness .product ul li:before {
	content: "■ ";
	font-size: 80%;
}

#toughness .product a.product_btn{
	width: 35%;
	margin: 15px 0 0;
	padding: 2.5%;
}

/* ポイント */
#toughness #sec3 {margin: 40px 0 0;}

#toughness ul.point {
	width: 100%;
	margin-left: -30px;
	display: table;
}

#toughness ul.point li {
	width: 30%;
	padding-left: 30px;
	display: table-cell;
}

#toughness ul.point li p {margin: 20px 0;}

/*-------- セオα --------*/
#ceo-a .main-read p.sub_title {
	width: 100%;
	margin: 0 0 5px;
	color: #272b76;
	font-size: 108%;
	font-weight: bold;
	float: none;
}

#ceo-a .main-read {
	width: 62%;
	float: left;
}

#ceo-a .main-img {
	width: 35%;
	float: right;
}


/*-------- SS-HEADシステム --------*/
/* ドライマスクも同様レイアウト */
#ss-head .main-read p.sub_title,
#drymask .main-read p.sub_title {
	width: 100%;
	margin: 0 0 5px;
	color: #272b76;
	font-size: 140%;
	font-weight: bold;
	float: none;
}

#ss-head .main-read,
#drymask .main-read {
	width: 63%;
	float: left;
}

#ss-head .main-read a,#drymask .main-read a {color: #cc3333;}

#ss-head .main-read ul li,
#drymask .main-read ul li {
	padding-left: 1.1em; 
	text-indent: -0.8em;
}

#ss-head .main-read ul li:last-child,#drymask .main-read ul li:last-child {margin: 7px 0 0;}

#ss-head .main-read ul li:before,
#drymask .main-read ul li:before {
	content: "■";
	font-size: 80%;
}

#ss-head .main-img,
#drymask .main-img {
	width: 35%;
	float: right;
}

#ss-head .point01_img {
	width: 85%;
	margin-top: 15px;
}

#ss-head .point-detail .txt {width: 100%;}

/* 製品ブロック */
#ss-head #product .detail span,
#drymask #product .detail span {
	margin: 0 0 5px;
	padding: 2px 10px;
	display: block;
	color: #999;
	font-size: 90%;
	text-align: center;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
}

#ss-head #sec4 {text-align: center;}
#drymask #sec4 {text-align: center;}

/*-------- ドライマスク --------*/
#drymask .point-detail {
	width: 100%;
	display: block;
}

#drymask .point-detail .text {padding: 0 20px;}

#drymask .point-detail img {
	width: auto;
	margin: 30px auto;
	display: block;
}

#drymask .point-detail ol {
	padding: 5px 20px 0;
	list-style: decimal;
}

#drymask .point-detail ol li { 
	padding-left: 0.1em;
	text-indent: 0em;
}

/* ドライマスク 製品ブロック */
#drymask #product .detail .product-name {
	margin: 0 0 5px;
	font-weight: bold;
}

#drymask .img02 {width: 55% !important;}
#drymask #sec3 {margin-top: 40px;}



/*-------- 共通 --------*/
/* 品番・製品名 */
.number {font-weight: bold;}

.name {
	margin: 0 0 5px;
	color: #272b76;
	font-size: 115%;
	font-weight: bold;
}

/* 製品ボタン */
a.product_btn {
	width: 45%;
	margin: 15px auto 0;
	padding: 3%;
	display: block;
	color: #fff;
	font-size: 120%;
	letter-spacing: 0.05em;
	text-align: center;
	background: #272b76;
	border: 2px solid #272b76;
}

a.product_btn:hover {
	color: #272b76;
	background: #fff;
	border: 2px solid #272b76;
}

a.product_btn i {
	margin-left: 7px;
	font-size: 120%;
}

#product_3rows a.product_btn {
	width: 100%;
	padding: 4%;
}

/* 製品ボタン-ブルー */
a.product_btn-blue {
	width: 100%;
	margin: 15px auto 0;
	padding: 5% 0;
	display: block;
	color: #fff;
	text-align: center;
	background: #272b76;
	border: 2px solid #272b76;
}

a.product_btn-blue:hover {
	color: #272b76;
	background: #fff;
	border: 2px solid #272b76;
}

a.product_btn-blue i {
	margin-left: 7px;
	font-size: 120%;
}


/*-------- 共通　ポイント-2列 --------*/
.point-2rows {
	margin: 30px 0 0;
	text-align: justify;
}

.point-2rows:after {
	width: 100%;
	height: 0;
	content: "";
	display: inline-block;
	line-height:0;
}

.point-detail {
	width: 48%;
	display: inline-block;
	vertical-align: top;
}

.point-detail .w100 {width: 100% !important;}

.point-detail .txt,
.point-detail .txt_wrap {
	margin: 15px 0 0;
	padding: 0 20px;
}

.point-detail .txt_wrap img {margin: 0 15px 10px 0;}

.point-detail img {
	width: 40%;
	margin: 0 auto;
	display: block;
}

.point-detail ul li { 
	margin: 0 0 7px;
	padding-left: 1em; 
	text-indent: -1em;
}

.point-detail ul li:before {
	content: "■ ";
	color: #272b76;
}

/* ポイント-静電気対策 */
.point-seidenki {
	margin-top: 30px;
}
.point-seidenki div {
	padding: 20px 185px 30px;
	display: table;
}
.point-seidenki img {
	width: 300px;
	display: table-cell;
	margin-left: 20px;
}
.point-seidenki p {
	display: table-cell;
	vertical-align: middle;
}

/*-------- #sec3 --------*/
#sec3 .wid1 {text-align: justify;}

#sec3 .wid1:after {
	width: 100%;
	height: 0;
	content: "";
	display: inline-block;
	line-height:0;
}


/*-------- 製品ブロック-3列 --------*/
#product_3rows {
	width: 31%;
	margin: 0 0 2.5%;
	padding: 3%;
	display: inline-block;
	vertical-align: top;
	position: relative;
}


/*-------- 共通 製品ブロック --------*/
#product {
	width: 48.5%;
	margin: 0 0 2.5%;
	padding: 3%;
	display: inline-block;
	vertical-align: top;
	position: relative;
}

#product:before,
#product:after,
#product_3rows:before,
#product_3rows:after  {
	width: 35px;
	height: 35px;
	position: absolute;
	content: '';
	visibility: inherit;
}

#product:before,
#product_3rows:before {
	top: 0;
	left: 0;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
}

#product:after,
#product_3rows:after {
	bottom: 0;
	right: 0;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
}

.frame:before,
.frame:after {
	width: 35px;
	height: 35px;
	position: absolute;
	content: '';
	visibility: inherit;
}

.frame:before {
	top: 0;
	right: 0;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}

.frame:after {
	bottom: 0;
	left: 0;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
}

/* 製品ブロック 内容 */
#product img {
	width: 180px;
	float: left;
}

#product .name,
#product_3rows .name {
	margin: 10px 0;
	color: #272b76;
	font-size: 110%;
}

#product .detail,
#product_3rows .detail {
	width: 50%;
	margin-left: 20px;
	float: left;
	text-align: left;
}


/** middle
===================================*/
@media screen and (max-width: 990px){
/*-------- hタグ --------*/
h2 {
	width: 93%;
	margin: 30px auto 20px;
	text-align: center;
}


/*-------- パンくず --------*/
#sec1 {padding: 10px 20px;}


/*-------- ポイント-2列 --------*/
.point-detail ul,
.point-detail p {
	height: 100%;
}

/*-------- ポイント-静電気対策 --------*/
.point-seidenki div {
	padding: 20px 3% 30px;
}

/*-------- 製品ボタン --------*/
a.product_btn {width: 60%;}


/*-------- 製品ブロック --------*/
#sec3 #product img {
	margin: 0 auto;
	float: none;
	display: block;
}

#sec3 #product .detail {
	width: 100%;
	margin: 15px 0 0;
	float: none;
}
}


/** mobile
===================================*/
@media screen and (max-width: 768px){
main {margin-bottom: 50px;}

/*-------- hタグ --------*/
h2 {
	width: 100%;
	margin: 0 0 20px 0;
	text-align: center;
}

h3,h3 img {width: 100%;}
h4 {margin-top: 30px;}


/*-------- パンくず --------*/
#sec1 {
	margin: 0;
	padding: 10px 0;
	background: #f0f3f5;
}


/*-------- #sec2 --------*/
#sec2 {
	margin: 0 auto 25px;
	padding: 0;
}


/*-------- 製品トップ --------*/
#acd_title,#acd_title a {font-size: 17px;}

#acd_title span {
	padding: 0;
	text-align: left;
	display: inline;
	background: none;
}

#acd_title i {margin-top: 1%;}

#denshi-top .accordion_detail a {
	margin: 0 0 10px;
	display: block;
	font-size: 110%;
}

#denshi-top .accordion_detail a:last-child {margin: 0;}


/*-------- ドライルームウエア --------*/
#drw .point-detail img {width: 65%;}


/*-------- 静電気対策 --------*/
#seidenki .main-read {
	width: 100%;
	float: none;
}

#seidenki .main-img {
	width: 60%;
	margin: 15px auto 0;
	float: none;
}

#seidenki .point-detail img {width: 80% !important;}


/*-------- タフネス --------*/
#toughness h3 {font-size: 135%;}
#toughness h4 {font-size: 108%;}

#toughness .product {
	width: 100%;
	float: none;
}

#toughness .main-img {
	width: 50%;
	margin: 20px auto 0;
	float: none;
}

#toughness .product a.product_btn{
	width: 80%;
	margin: 15px auto 0;
	padding: 5% 0;
}

/* ポイント */
#toughness #sec3 {margin: 30px auto 0;}

#toughness ul.point {
	width: 100%;
	margin: 0 auto;
	display: block;
}

#toughness ul.point li {
	width: 100%;
	margin: 40px 0 0;
	padding-left: 0;
	display: block;
}

#toughness ul.point li p {
	height: auto !important;
	margin: 10px 0 20px;
}

/*-------- セオα --------*/
#ceo-a .point-detail img {width: 80% !important;}

#ceo-a .main-read {
	width: 100%;
	float: none;
}

#ceo-a .main-img {
	width: 70%;
	margin: 15px auto 0;
	float: none;
}


/*-------- SS-HEADシステム --------*/
/* ドライマスクも同様のレイアウト */
#ss-head .main-read,
#drymask .main-read {
	width: 100%;
	float: none;
}

#ss-head .main-img,
#drymask .main-img {
	width: 60%;
	margin: 15px auto 0;
	float: none;
}

#ss-head .point-detail img,#drymask .point-detail img {width: 80% !important;}

#ss-head .txt_wrap img,
#drymask .txt_wrap img {
	width: 60%;
	margin: 0 auto 10px;
	display: block;
}


/*-------- ポイント-2列 --------*/
.point-2rows {text-align: left;}
.point-2rows:after {display: block;}

.point-detail {
	width: 100%;
	display: block;
}

.point-detail .txt {
	margin: 15px 0 10px;
	padding: 0;
}

.point-detail img {
	width: 75%;
	margin: 0 auto;
	display: block;
	float:none;
}

.point-detail ul,
.point-detail p {
	width: 100%;
	height: auto !important;
	min-height: 0;
	margin: 0 0 20px;
	float: none;
}

/*-------- ポイント-静電気対策 --------*/
.point-seidenki div {
	display: block;
	padding: 20px 8% 30px;
}
.point-seidenki img {
	width: 100%;
	display: block;
	margin: 15px auto 0;
}


/*-------- 製品ボタン --------*/
a.product_btn {
	width: 75%;
	margin: 20px auto 0;
	padding: 5% 0;
	display: block;
	color: #fff;
	text-align: center;
	background: #272b76;
	border: 2px solid #272b76;
}

a.product_btn:hover {
	color: #272b76;
	background: #fff;
	border: 2px solid #272b76;
}

a.product_btn i {
	margin-left: 7px;
	font-size: 120%;
}


/*-------- #sec3 --------*/
#sec3 {
	width: 92%;
	margin: 0 auto;
	padding: 0;
}

#sec3 .wid1 {padding: 0;}


/*-------- 製品ブロック --------*/
#product,
#product_3rows {
	width: 100% !important;
	margin: 0 0 20px;
	padding: 8%;
	display: block;
}

#product img,#product_3rows {width: 75%;}

}
