/* 
body, wrapper, a, h, hr,
header(logo gnav) , 
main(inner, articleinner, toppage, medicalpage, aboutus, sitemap, contact, productpage), 
footer
の順に記載 */


.body {
	background-color: #fff;
	color: #444;
	font: 14px/14px sans-serif;
	text-align: center;
    height: 100%;
	overflow: auto;
	}

.wrapper {
    position: relative;
    min-height: 100vh;
	padding-bottom: 100px;
    box-sizing: border-box;
}

a {
  color: #444;
  text-decoration: none;
}

a:hover {
  color: #009aab;
  text-decoration-line: underline;
  cursor: pointer;
}

.cb {
	clear: both;
}

.clearRight {
	clear: right;
}

.displayInline {
	display: inline;
}

.center {
	text-align: center;
}


/* headline */
.medCode,.pageTitle {
	color: #009aab;
	display: inline;
	font: 30px/30px sans-serif;
}

.medName {
	color: #999;
	display: inline;
	font: 600 18px sans-serif;
	margin-left: 15px;
}

.medName--discon {
	color: red;
	display: inline;
	font: 600 12px sans-serif;
	margin-left: 15px;
}

.medTitle {
	color: #009aab;
	font: 300 20px/20px sans-serif;
	padding: 20px 7px 5px 20px;
	position: relative;
}

.medTitle:before {
    background: rgba(0,154,171,.5);
    content: "";
    height: 15px;
    left: 0;
	position: absolute;
    width: 15px;	
}


.hr1 {
	background-color: #009aab;
	border: none;
	height: 4px;
	width: 100%;
}

.hr1-fade {
	background: radial-gradient(#009aab,#fff);
	border: none;
	height: 2px;
 }

/*----- header-----*/

.header {
	background-color: #e6f6f6;
	font-size: 14px;
	height: 80px;
	position: relative;
	width: 100%;
}

.header--inner {	
	margin: 0 auto;
	width: 800px;
}

/* headerのmachida logo */
.logo {
	float: left;	
}

.logo--img {
	border: none;
	margin-left: 6px;
	position: absolute;
	top: 1px;
}

.logo--square {
    background: #009aab;
    height: 80px;
    margin: left;
    width: 80px;
}

/* Global navigation */

.header--nav-list {
	float: left;
	margin: 5px 0px 0px 30px;
	overflow: hidden;
}

.header--nav-item {
	float: left;
	position: relative;
	}

.header--nav-text {
	background-color: #e6f6f6;
	color: #009aab;
	display: block;
	font-size: 15px;
	height: 50px;
	line-height: 45px;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.3s;
	width: 115px;
}

.header--nav-text:hover {
	border-bottom: 4px solid #00bcd4;
	text-decoration-line: none;
}

.header--nav-text-active {
	border-bottom: 4px solid #00bcd4;	
}

.header--nav-last-child {
	border: none;
}

.header--nav-lang {
	text-align: end;
	height: 20px;
}

.header--nav-lang-button {
    background: #00bcd4;
    border-radius: 5px;
	border: 0px;
}



/*----- Main-----*/

.main--inner {
	background-color: #fff;
	height: 100%;
	margin: 0 auto;
	text-align: left;
	width: 800px;
	padding-bottom: 100px;
}

/* breadcrumbs*/
.breadcrumb {
	color: #bbb;
	display: inline-block;
	padding-top: 6pt;
	width: 300px;
}

.breadcrumb a {
	color: #bbb;
	
}

/* page navigation*/

.pageNav {
	display: inline;
	float:right;
	padding-top: 10px;
}

.pageNav--item {
	display: inline;
	color: #00bcd4;
}



/* product page button*/

.btn--print {
    cursor: pointer;
	display: inline;
    float: right; 
	margin: 5pt 10pt 0pt 20pt;
	
}

.btn--globe {
	display: inline;
    float: right; 
	margin: 7pt 2pt 0pt 10pt;
}

.btn--globe-text {
    cursor: pointer;
	display: inline;
    float: right; 
	margin: 10pt 2pt 0pt 2pt;
}


.article--inner  {
	clear: right;
	padding: 20px 10px 0px;
}

/* toppage */

/* toppage内のスライダー */
.top--sliderArea {
	background-color: #444;
	height: 296px;
	margin-top: 5px;
	position: relative;
	width: 100%;
}

.top--slider {
	margin: 0 auto;
    height: 300px;
    width: 800px;
}

.top--slider-img {
    height: 300px;
    width: 800px;
}

/* toppage内のtop画像*/

.top--imageArea {
	background-color: #e8e8e8;
	height: 300px;
	margin-top: 5px;
	position: relative;
	width: 100%;
}

.top--imageArea-img {
	height: 300px;
	width: 800px;
}



/* medical page */

.medical--iconArea {
	border: none;
	overflow: hidden;
	width: 800px;
	margin: 40px auto 0px;
}

.medical--icon {
	border-right: 20px solid #fff;
	border-left: 20px solid #fff;
	cursor: pointer;
	float: left;
	position: relative;
}

/*ロールオーバー*/

.medical--icon:hover img{
    opacity:0.4;
    filter:alpha(opacity=70);
    -ms-filter: “alpha( opacity=70 )”;
    transition: 0s;
}

.medical--textArea {
	border: none;
	overflow: hidden;
	width: 800px;
	margin:auto;
}

.medical--text {
	display: block;
	float: left;
	font-size: 13px;
	text-align: center;
	width: 110px;
}

.medical--icon-active {
    opacity:0.4;
    filter:alpha(opacity=70);
    -ms-filter: “alpha( opacity=70 )”;
    transition: 0s;
}

.productTable {
	width: 780px;
	margin: 5px 0px 10px 0px;	
}

.productTable th {
	border: solid 1px #00bcd4;
	background-color: #00bcd4;
	height: 20px;
	text-align: center;
	color: #fff;	
}

.productTable td {
	border: solid 1px #00bcd4;
	height: 30px;
	padding-left: 10px;
	
}

.arrow{
  position: relative;
  display: inline-block;
  padding-left: 20px;
}

.arrow::before{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #5bc0de;
  border-right: solid 2px #5bc0de;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -4px;
}

/* aboutus page */
.aboutus {
	margin: 0 auto;
	padding-top: 20px;
	width: 800px;
}

.aboutus--title {
	font: 600 20px/20px sans-serif;
	margin-top: 10px;
	margin-bottom: 5px;
	line-height: 1.5;
}

.profile-span {
	display: inline-block;
	line-height: 1.5;
	width: 10em;	
}

.history-span {
	display: inline-block;
	line-height: 1.5;
	width: 4em;	
}

/* sitemap page */

.sitemapTable {
	width: 780px;
	margin: 20px 10px 10px 10px;
}

.sitemapTable td {
	border: solid 1px #00bcd4;
	height: 30px;
	padding-left: 10px;
}


/* contact page */
.contact {
	margin: 0 auto;
	padding-top: 20px;
	width: 600px;
}

.contact--text {
	font-size: 16px;
	line-height: 1.5;
	margin-top: 10px;
}

.contact--name {
	color: #009aab;
	font: 600 20px/20px sans-serif;
	margin-top: 30px;	
}

.contact--department {
	font: 600 18px/18px sans-serif;
	margin-top: 10px;
	margin-bottom: 10px;
}

.contact--info {
	font: 300 16px/16px sans-serif;
	padding: 10px 0px 0px 20px;
	position: relative
}

.contact--info:before {
    background: rgba(0,154,171,.5);
    content: "";
    height: 15px;
    left: 0;
	position: absolute;
    width: 15px;	
}


/* products page */


/* main image & thumbnails */
.gallery {
	float: left;
	position: relative;
	width: 400px;
}

.gallery--mainimage {
	margin-bottom: 10px;
	margin-top: 15px;		
	width: 400px;
}

.gallery--thumbnails {
  	margin-top: 5px;
 	padding: 1px;
}
.gallery--thumbnails img {
 	cursor: pointer;
 	padding-right: 0px;
	width: 74px;
}

.gallery--mainimage-slide {
    display: none;
}

.gallery--mainimage-slide-active {/*.slide{...}よりも下に記述*/
    display: block;
}

.sample-box {
    position: relative;
}

/* feature */
.feature {
	float: right;
	margin-top: 15px;
	width: 380px;
}

.feature--text {
	list-style-type: none; 
	margin-bottom: 10px;
    position: relative; 
    padding-left: 1rem;
}

.feature--text-bullet { 
	list-style-type: disc;  
	margin: 0px 0px 10px 40px;
	margin-bottom: 10px;
    position: relative; 
    
}

.feature--text:before {
    background: rgba(0,154,171,.5); 
    content: "";
    display: block;
    height: 8px;
    left: 0;
    position: absolute;
    top: 0.2rem;
    width: 8px;
}

.feature--icon {
	vertical-align: middle;
	
}

/* movie */
.modal-movie {
	background: rgba(0,0,0,.8);
    display: none;
	height: 440px;
    position: fixed;
	text-align: right;
    top: 80px;
    width: 800px;
	z-index: 1;
}

.modal--content-movie {
}

.modal--content-movie a {
	color: #d5d5d5;
	font-size: 24px;
	line-height: 1.5;
}

/* specification */
.spec--mark {
	display: inline;
	float: right;
	padding-left: 10px;
}

.spec--table {
	border: none;
	line-height: 160%;
	margin: 1px auto;
}

.spec--table tr:nth-child(odd) {
	background-color: #eee;
}

.spec--table-td,.spec--table-th { 
	padding: 0px 0px 0px 10px;
	width: 375px;
}

.spec--table-td-last,.spec--table-th-last {
	padding: 0px 0px 0px 10px;
	width: 375px; 
	border-bottom: 2px solid #eee;
}

.spec--table-td-head,.spec--table-th-head {
	padding: 0px 0px 0px 10px;
	width: 375px; 
	border-bottom: 1px solid #999;
}

.spec--table-img { 
	padding: 6px 0px 0px 0px;
	width: 80px;
	height: 160%;
	text-align: center;
} 

.spec--table-title {
	color: #999;
	font: 16px sans-serif;
	margin: 5px;
}

/* optional accessories */
.option {
	border: none;
	overflow: hidden;
}

.option--item {
	border-right: 10px solid #fff;
	float: left;
	position: relative;
}

.option--text-first {
	display: block;
	float: left;
	height: auto;
	line-height: 20px;
	text-align: center;
	width: 155px;
}
.option--text {
	display: block;
	float: left;
	height: auto;
	line-height: 20px;
	text-align: center;
	width: 160px;
}

/* related product */
/* related product内のスライダー */
.sliderArea {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 25px;
}
.sliderArea.w300 {
    max-width: 300px;
}
.slick-slide {
    margin: 0 5px;
}
.slick-slide img {
    height: auto;
    width: 100%;
}
.slick-prev, .slick-next {
    z-index: 1;
}
.slick-prev:before, .slick-next:before {
    color: rgba(0,0,0,.6);
}
.slick-slide {
    opacity: .2;
    transition: all ease-in-out .3s;
}
.slick-active {
    opacity: 1;
}
.slick-current {
    opacity: 1;
}
.thumb {
    margin: 20px 0 0;
}
.thumb .slick-slide {
    cursor: pointer;
}
.thumb .slick-slide:hover {
    opacity: .7;
}

.container {
	height: 120px;
	margin: auto;
    width: 750px;
}

/*related products code No.*/
.figcaption {
  	text-align: center;
	margin-top: 5px;
}

/*related productsスライダーなしのときの code No.*/
.relate--text-first {
	display: block;
	float: left;
	height: auto;
	line-height: 20px;
	text-align: center;
	width: 150px;
}
.relate--text {
	display: block;
	float: left;
	height: auto;
	line-height: 20px;
	text-align: center;
	width: 155px;
}



/* -----Industrial Products----- */	

.indName {
	color: #009aab;
	font: 26px/26px sans-serif;
}

.indFeature1 {
	color: #999;
	font: 600 18px/30px sans-serif;
	margin: 8pt 0pt;
}

.indImage {
	margin-top: 5px;
	overflow: hidden;
}

.indImage--item {
	display: inline;
	float: left;
	text-align: center;
	width: 390px;
}

.indImage--text {
	display: inline;
	float: left;
	margin-left: 50px;
}

.indImage--text-span  {
	display: inline-block;
	line-height: 1.5;
	width: 10em;	
}


.indTable {
	width: 780px;
	line-height: 1.5;
	margin: 5px 0px 5px;
}

.indTable--th {
	border: solid 1px #009aab;
	background: rgba(0,154,171,.05);
	text-align: center;
	padding: 2px;
}

.indTable--td {
	border: solid 1px #009aab;
	text-align: center;
	padding: 2px;
}

.indperiph--inner {
	width:800px;
	height: auto;
	margin: 10px 0px;
	clear: both;
}

.indPeriph--image {
	float: left;
	position: relative;
	width: 300px;
	text-align: center;
}

.indPeriph--spec {
	float: right;
	width: 500px;
}

.indTable--periph {
	line-height: 1.5;
	width: 480px;
	margin-bottom: 15px;
}




/* -----Footer----- */	

.footer {
    bottom: 0;
    width: 100%;
    height: 100px;
	background-color: #e8e8e8;
	overflow: hidden;
	padding-top: 30px;
	padding-bottom: 20px;
	position: absolute;
}

.footer--wrap {	
	margin: 0 auto;
	width: 800px;
}

	
.footer--nav {
	float: left;
	margin-bottom: 20px;
	width: 180px;
}

.footer--nav-item {
	line-height: 1.7;
}

.footer--nav-text{
	color: #666;
	text-decoration: none;
}

.footer--address {
	color: #666;
	float: left;
	line-height: 1.7;
	margin-left: 50px;
	text-align: left;
	width: 360px;
}

.footer--address-name {
	font-weight: bold;
	font-size: 14px;
	text-align: left;
}

.footer--address-email {
	font-size: 14px;
	text-align: left;
}
	
.footer--copyright {
	clear: both;
	display: block;
	font-size: 12px;
	padding: 5px;
	text-align: center;
}	
	
.page--top {
	background: #333;
	bottom: 10px;
	height: 40px;
	opacity: 0.3;
	position: fixed;
	right: 0;
	width: 40px;
}
.page--top a {
	display: block;
	height: 40px;
	position: relative;
	text-decoration: none;
	width: 40px;
}

.page--top a::after {
	color: #fff; 
	content: '▲';
	font: bold/14px;
	position: absolute;
	top: 10px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}