/* スライド画像 */
.cd-hero-slider li:first-of-type {
  background-color: #2c343b;
  background-image: url(../img/top.jpg);
  z-index: 10;
}

#contents .cd-hero-slider h1 {
     padding-top: 40px;
    font-weight: 600;
    color: #ffffff;
    font-size: 24px;
    text-shadow: 0px 1px 9px #3e3a39;
    margin-bottom: 10px;
}

.mark{
       background-color: #0F78B1;
       padding:10px 20px;
       color: #ffffff;
       font-weight: 600;
       font-size: 16px;
       text-align: center;
       display: inline-block;
       float: right;
       }
h1 span{
         font-size: 18px;
         }
h2 {
    width: 100%;
    font-size: 1.8rem;
    color: #0F78B1;
    font-weight: bold;
    line-height: 1.2em;
    border-bottom: 1px dotted;
    margin: 20px 0 10px 0;
    padding-bottom: 5px;
}

h3 {
    width: 100%;
    font-size: 1.6rem;
    color: #0F78B1;
    font-weight: bold;
    line-height: 1.5em;
    margin-bottom: 10px;
    padding-top:20px;
}

h4 {
    width: 100%;
    font-size: 1.6rem;
    color: #0F78B1;
    font-weight: bold;
    line-height: 1.2em;
    margin: 20px 0 10px 0;
    padding-bottom: 5px;
    border:0px;
}

@media only screen and (min-width: 768px) {
#contents .cd-hero-slider h1 {
    padding-top: 40px;
    font-weight: 400!important;
    color: #ffffff;
    font-size: 40px;
    text-shadow: 0px 1px 9px #3e3a39;
    margin-bottom: 10px;
    line-height: 40px;
}

h2{
font-size: 2.7rem;
    margin: 50px 0 10px 0;
    padding-bottom: 10px;
    line-height: 35px;
    clear: both;
}

h3 {
    font-size: 2.3rem;
    line-height: 1.5em;
    margin-bottom: 0px;
    padding:20px 0;
}

h4 {
     font-size: 1.8rem;
    margin-top: 30px;
    line-height: 1.5em;
    border: 0px;
}
}

/*バナー */
.cd-bg-1 {
  background-image: url("../img/6-s.jpg");
  background-size: cover;
  background-position: center;
  height: 100px;
  margin-bottom:30px;
}

/*enterprise */
.cd-bg-2 {
  background-image: url("../img/enterprise.jpg");
  background-size: cover;
  background-position: center;
  height: 100px;
  margin-bottom:30px;
  border-radius:15px;
}

/*産業用 */
.cd-bg-3 {
  background-image: url("../tsn/img/6-s.jpg");
  background-size: cover;
  background-position: center;
  height: 100px;
  margin-bottom:30px;
  border-radius:15px;
}

/*リモートI/O */
.cd-bg-4 {
  background-image: url("../img/io.jpg");
  background-size: cover;
  background-position: center;
  height: 100px;
  margin-bottom:30px;
  border-radius:15px;
}

@media only screen and (min-width: 768px) {
.cd-bg-1{
  background-image: url("../img/6.jpg");
  background-size: cover;
  background-position: center;
  height: 200px;
  max-width: 1100px;
  margin:0 auto;
  margin-bottom: 30px;
  margin-top:20px;
}

.cd-bg-2{
  background-image: url("../img/enterprise.jpg");
  background-size: cover;
  background-position: center;
  height: 200px;
  max-width: 1100px;
  margin:0 auto;
  margin-bottom: 30px;
  margin-top:20px;
  border-radius:15px;
}

.cd-bg-3{
  background-image: url("../tsn/img/6.jpg");
  background-size: cover;
  background-position: center;
  height: 200px;
  max-width: 1100px;
  margin:0 auto;
  margin-bottom: 30px;
  margin-top:20px;
  border-radius:15px;
  
}

.cd-bg-4{
  background-image: url("../img/io.jpg");
  background-size: cover;
  background-position: center;
  height: 200px;
  max-width: 1100px;
  margin:0 auto;
  margin-bottom: 30px;
  margin-top:20px;
  border-radius:15px;
}

.cd-bg-1:hover{
opacity: 0.8;
}
.cd-bg-2:hover{
opacity: 0.8;
}
.cd-bg-3:hover{
opacity: 0.8;
}
.cd-bg-4:hover{
opacity: 0.8;
}
}

/*バナータイトル */
.banner-title{
    font-weight:600;
    font-size:20px;
  font-family: 'Noto Sans JP', 'Sawarabi Gothic',sans-serif;
  color:#ffffff;
  line-height: 30px;
  padding-left:10px;
  margin-top:-80px;
  text-shadow: 3px 0px 10px #18316c;
  }

@media only screen and (min-width: 768px) {
.banner-title{
    font-weight:600;
    font-size:30px;
    font-family: 'Sawarabi Gothic', sans-serif;
  font-family: 'Noto Sans JP', sans-serif;
  color:#ffffff;
  line-height: 40px;
  padding-left:30px;
  margin-top:-60px;
  }
  }
 

/* -------------------------------- 
製品ラインナップ
-------------------------------- */
#hirschmann dl.product{
	width: 100%;
	border: #0F78B1 1px solid;
	margin-bottom: 15px;
	overflow: auto;
}

#hirschmann dl.product dt{
	width: 100%;
	background: #0F78B1;
	color: #FFF;
	padding: 5px;
}

#hirschmann dl.product dd{
	width: 100%;
	padding: 5px;
}

#hirschmann dl.product dd.img{
	text-align: center;
}
#hirschmann dl.product dd ul{
	margin-top: -10px;
}

@media only screen and (min-width: 768px) {
	#hirschmann dl.product{
	margin-bottom: 30px;
	}
	#hirschmann dl.product dd.img{
	width: 40%;
	text-align: left;
    float: left;
	}
	#hirschmann dl.product dd p{
	padding: 0 30px;
	line-height: 1.4em;
}
	#hirschmann dl.product dd ul li{
		list-style-position:inside;
		line-height: 1.5em;
		padding-right:20px;
	}
}

/* 4カラム */
.grid4{
border:0px solid #ccc;
margin:20px 0;
}

.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
    margin-left: 0;
    clear: left;
}

/* col */
.col {
	float: left;
	margin-left: 3.2%;
	}
	
.inner-box{
       vertical-align: middle;
       }
	
.icon{
     margin:0 auto;
     text-align:center;
     margin-bottom:30px;
     margin-top:30;
     }
     
/* grid4 col */
.grid4 .col {
	width: 22.6%;
}

/* grid3 col */
.grid3 .col {
	width: 31.2%;
	border-radius: 10px;
}

/* grid2 col */
.grid2 .col {
	width: 48.4%;
}

@media screen and (max-width: 740px) {
	/* change grid4 to 2-column */

.grid4{
border:0px solid #ccc;
margin:0 0;
}
	
	.grid4 .col {
		width: 48.4%;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

	/* change grid3 to 2-column */
	.grid3 .col {
		width: 48.4%;
		border:0px;
	}
	.grid3 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid3 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
		border:0px;
	}
	}
	
@media screen and (max-width: 400px) {
	.col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
}

.table-title{
              font-size:16px;
              font-weight: 700;
              color: #595757;
              line-height: 20px;
              text-align: center;
              }
@media only screen and (min-width: 768px) {
.table-title{
              font-size:23px;
              font-weight: 700;
              color: #595757;
              text-align: center;
              margin-top: 50px;
              line-height: 27px;
              }
              }
.table-title-2{
              font-size:16px;
              font-weight: 700;
              color: #595757;
              line-height: 25px;
              height: 65px;
              vertical-align: bottom;
              display: table-cell;
              }
@media only screen and (min-width: 796px) {
.table-title-2{
              font-size: 20px;
              font-weight: 700;
              color: #595757;
              text-align: center;
              margin-top: 50px;
              line-height: 27px!important;
              display: table-cell;
              vertical-align: bottom;
              height: 65px;
              }
              }
@media only screen and (min-width: 915px) {
.table-title-2{
              font-size: 23px;
              font-weight: 700;
              color: #595757;
              text-align: center;
              margin-top: 50px;
              line-height: 27px!important;
              display: table-cell;
              vertical-align: bottom;
              height: 65px;
              }
              }
/*NW構築サポート*/
#support .table01{
  width: 100%;
  height: auto;
  font-size: 1.4rem;
  margin: 0 auto;
  table-layout: fixed;
  margin-top:30px;
  margin-bottom: 50px;
}

#support .table01 th{
	width: 25%;
	padding: 5px;
	text-align: center;
	font-weight: 700;
	vertical-align: middle;
	background: linear-gradient(135deg, #007ac5, #1a1e80);
	border:1px solid #ccc;
	line-height: 18px;
	color: #ffffff;
}

#support .table01 td{
	padding: 10px;
	vertical-align: middle;
	border:1px solid #ccc;
	word-break: break-all;
	background-color: #ffffff;
	font-size: 14px;
}
#support .table01 td.pd-name {
        padding: 5px;
        text-align: center;
        font-weight: bold;
        vertical-align: middle;
        background: linear-gradient(135deg, #007ac5, #1a1e80);
        color: #ffffff;
        line-height: 18px;
        font-size: 16px;
    }
#support .table01 ul li{
	text-align: left;
	line-height: 20px;
}

@media only screen and (min-width: 768px) {
#support .table01{
  width: 100%;
  height: auto;
  font-size: 1.4rem;
  margin: 0 auto;
  table-layout: fixed;
  margin-top:30px;
  margin-bottom: 50px;
}

#support .table01 th{
	width: 25%;
	padding: 5px;
	text-align: center;
	font-weight: 700;
	vertical-align: middle;
	background: linear-gradient(135deg, #007ac5, #1a1e80);
	border:1px solid #ccc;
	line-height: 18px;
	color: #ffffff;
}

#support .table01 td{
	padding: 10px;
	vertical-align: middle;
	border:1px solid #ccc;
	word-break: break-all;
	background-color: #ffffff;
	font-size: 15px;
}
#support .table01 td.pd-name {
        padding: 5px;
        text-align: center;
        font-weight: bold;
        vertical-align: middle;
        background: linear-gradient(135deg, #007ac5, #1a1e80);
        color: #ffffff;
        line-height: 18px;
        font-size: 16px;
    }
#support .table01 ul li{
	text-align: left;
	line-height: 25px;
	font-size: 15px;
}
#support .table01 th{
	width: 160px;
	padding: 10px;
}
}

/*テーブル*/
#product .table01{
  width: 100%;
  height: auto;
  font-size: 1.4rem;
  margin: 0 auto;
  table-layout: fixed;
  margin-top:30px;
  margin-bottom: 50px;
}

#product .table01 th{
	width: 25%;
	padding: 5px;
	text-align: center;
	font-weight: 700;
	vertical-align: middle;
	background: linear-gradient(135deg, #007ac5, #1a1e80);
	border:1px solid #ccc;
	line-height: 18px;
	color: #ffffff;
}

#product .table01 td{
	padding: 5px;
	text-align: center;
	vertical-align: middle;
	border:1px solid #ccc;
	word-break: break-all;
	background-color: #ffffff;
}

#product .table01 td.pd-name{
	padding: 5px;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
	background: linear-gradient(135deg, #007ac5, #1a1e80);
	color: #ffffff;
	line-height: 18px;
	font-size: 14px;
}

#product .table01 td.pd-name2{
	padding: 5px;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
	background: #eaeff9;
	line-height: 18px;
	font-size: 14px;
}


@media only screen and (min-width: 768px) {
#product .table01 th{
	width: 140px;
	padding: 10px;
}
#product .table03 td{
	padding: 5px;
}
#product .table01 td.pd-name{
	padding: 5px;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
	background: linear-gradient(135deg, #007ac5, #1a1e80);
	color: #ffffff;
	line-height: 18px;
	font-size: 16px;
}
#product .table01 td.pd-name2{
	padding: 5px;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
	background: #eaeff9;
	line-height: 20px;
	font-size: 16px;
}
}
.kome{
       font-size: 10px;
       line-height: 19px;
       }
@media only screen and (min-width: 768px) {
.kome{
       font-size: 12px;
       }
       }
       
/* グレーバック */
.gray-bg{
         width:100%;
         height:auto;
         overflow: hidden;
         background-color:#F5F5F5;     
}

@media only screen and (min-width: 768px) {

.gray-bg{
         width:100%;
         height:auto;
         overflow: hidden;
         background-color:#F5F5F5;      
        
}
}

.products {
            font-size:20px;
            text-align: center;
            margin-top:-20px;
            margin-bottom: 40px;
            font-weight: 600;
            }
/* 改行*/
@media screen and (min-width: 768px){   
  .pc { display:block; }
  .sp { display:none; }
}
@media screen and (max-width: 768px){   
  .pc { display:none; }
  .sp { display:block; }
}

/* マーカー＋太字 */
.hightlight-text{
            text-align: left;
            font-weight: 600;
            margin-bottom:20px;
            background: linear-gradient(transparent 50%, #ffff66 0%);
            line-height: 20px;
            }
            
.bold-text{
            font-weight: 600;
            }

@media only screen and (min-width: 768px)  {
.hightlight-text{
            font-weight: 600;
            background: linear-gradient(transparent 50%, #ffff66 0%);
            margin-bottom:30px;
            }

.bold-text{
            font-weight: 600;
            }}
.yazirusi {
  display: flex;
  margin-top: 10px;
} 
.yazirusi::after {
  content: '';
  width: 70px;
  height: 15px;
  border-bottom: solid 1px;
  border-right: solid 1px;
  transform: skew(45deg);
}

/* 用途事例2カラム */
.case-container {
  display: flex;
  flex-wrap: wrap;
}
.column {
  width: 100%;
  border-right:1px solid #ffffff;
}

@media (min-width: 768px) {
  .column {
    width: 50%;
  }}

.bg{ 
    background-color: #ecf0f1;
    max-width: 44%;
    margin: 0px 0 5px 10px;
    padding-left: 0px!important;
    padding-right: 0px!important;
    }

.product-title{
font-weight: bold;
    margin: 5px 5px 0px 5px;;
    }

@media (min-width: 768px) {
.product-title{
font-weight: bold;
    margin: 5px 10px 0px 10px;
    font-size: 18px;
    }}

.grid4{
border:0px solid #ccc;
margin:20px 0;
}

.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
    margin-left: 0;
    clear: left;
}

/* col */
.col {
	float: left;
	margin-left: 3.2%;
	}

/* grid4 col */
.grid4 .col {
	width: 22.6%;
}

/* grid3 col */
.grid3 .col {
	width: 31.2%;
	border-radius: 10px;

}

/* grid2 col */
.grid2 .col {
	width: 48.4%;
}

@media screen and (max-width: 740px) {
	/* change grid4 to 2-column */

.grid4{
border:0px solid #ccc;
margin:0 0;
}
	
	.grid4 .col {
		width: 48.4%;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

	/* change grid3 to 2-column */
	.grid3 .col {
		width: 48.4%;
		border:0px;
	}
	.grid3 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid3 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
		border:0px;
	}
	}
	
@media screen and (max-width: 768px) {
	.col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
	}

/*事例モジュール*/

#sec-case .case-box dd span {
    display: block;
    padding: 10px 8px;
    text-align: center;
    line-height: 20px;
    min-height: 82px!important;
}

/* 関連製品 2カラム */
.flex-product {
  display: flex;
  width: auto;
  border:1px solid #ccc;
  margin-top: 30px;
  background-color: #ffffff;
  }

.flex-product .item1 {
  flex: 0 0 170px;
  margin-right: 10px;
  background-color: #ffffff;
}

.flex-product .item2 {
  flex: 1;
  padding-right: 10px;
}

.flex-product-title{
  font-size: 20px;
  font-weight: 600;
  color:#0F78B1;
  border-bottom: 1px solid #0F78B1;
  padding:20px 10px 10px 0px;
}

.flex-product-title-2{
  font-size: 20px;
  font-weight: 600;
  color:#0F78B1;
  padding:10px 0px 0px 0px;
  text-align: center;
  line-height: 23px;
}

@media only screen and (min-width: 768px) {
.flex-product {
  display: flex;
  width: auto;
  border:1px solid #ccc;
  margin-top: 30px;
  background-color: #ffffff;

}
.flex-product .item1 {
  flex: 0 0 170px;
  margin-right: 10px;
  background-color: #ffffff;
  
}
.flex-product .item2 {
  flex: 1;
  padding-right: 30px;
  padding-left: 30px;
}

.flex-product-title{
  font-size: 20px;
  font-weight: 600;
  color:#0F78B1;
  border-bottom: 1px solid #0F78B1;
  padding:30px 30px 20px 0px;
}

.flex-product-title-2{
  font-size: 20px;
  font-weight: 600;
  color:#0F78B1;
  padding:30px 30px 0px 0px;
  text-align: center;
}

.flex-product-title-3{
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background-color:#8EC926;
  padding:10px;
  border-radius:3px;
  width: 20%;
  text-align: center;
  margin: 20px 0 10px 0;
}
.flex-product-title-4{
  font-size: 20px;
  font-weight: 600;
  color:#0F78B1;
  padding:20px 30px 0px 0px;
  text-align: center;
}
}

/*導入事例*/
.case-title{
              text-align: left;
              font-size: 20px;
              margin-top: 50px;
              }

.read-more{
  font-size: 12px;
  margin-top: 20px;
            }

@media only screen and (min-width: 768px) {
.case-title{
              text-align: left;
              font-size: 24px;
              margin-top: 50px;
              }

.read-more{
  margin-top: 20px;
  font-size: 14px;
            }
.read-more a:hover{
             text-decoration: underline;
             }
            
}

/*カタログダウンロード(緑→青）*/
.button a{
  width: 220px;
  height:auto;
  margin:0 auto;
  padding: 15px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border: 0;
  text-align: center;
  color: #ffffff;
  border-radius: 30px;
  background-color: #8EC926;
  transition: background-color 0.5s;
  margin-bottom: 20px;
}

.button a{
    color: #ffffff;
    display: block!important;
    }

@media only screen and (min-width: 768px) {
.button a{
  width:auto;
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  border: 0;
  text-align: center;
  margin: 0 auto;  
  color: #ffffff;
  border-radius: 30px;
  background-color: #8EC926;
  transition: background-color 0.5s;
}

.button a:hover {
  background-color: #0F78B1;
  border-radius: 30px;
  color: #ffffff;
  opacity: 1.0;
}

.button a{
    color: #ffffff;
    text-decoration: none;
    display: block!important;
    }
    }
/*製品ラインナップの中の製品検索ボタン*/
.button2 a{
  width: 220px;
  height:auto;
  margin:0 auto;
  padding: 15px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border: 0;
  text-align: center;
  color: #ffffff;
  border-radius: 30px;
  background-color: #8EC926;
  transition: background-color 0.5s;
}

.button2 a{
    color: #ffffff;
    display: block!important;
    margin-top: 10px;
    }

@media only screen and (min-width: 768px) {
.button2 a{
  width:30%;
  padding: 20px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  border: 0;
  text-align: center;
  margin: 0 auto;  
  color: #ffffff;
  border-radius: 30px;
  background-color: #8EC926;
  transition: background-color 0.5s;
}

.button2 a:hover {
  background-color: #0F78B1;
  border-radius: 30px;
  color: #ffffff;
  opacity: 1.0;
}

.button2 a{
    color: #ffffff;
    text-decoration: none;
    display: block!important;
    float: right;
    margin-right: 10px;
    }
    }
/* -------------------------------- 

資料ダウンロード

-------------------------------- */
.column-2 {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  margin-right: 10px;
  margin-bottom: 40px;
  margin-left: 10px;
}
.column-2-img {
  width: 40%;
}
.column-2-img img {
  width: 100%;
}
.column-2-texts {
  box-sizing: border-box;
  padding-left: 10px;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .column-2 {
    flex-direction: column;
  }
  .column-2--reserve {
    flex-direction: column-reverse;
  }
  .column-2-img {
    width: 100%;
  }
  .column-2-texts {
    width: 100%;
    padding:10px 0;
    margin:0 auto;
  }
}
.line{border:1px solid #ccc;padding:0px 10px;margin:40px 0;background-color: #ffffff;}

.g-title{
    width: 100%;
    font-size: 1.8rem;
    color: #586775;
    font-weight: bold;
    line-height: 1.4em;
    border-bottom: 1px dotted;
    margin: 20px 0 10px 0;
    padding: 10px;
    }

@media only screen and (min-width: 768px)  {
.g-title{
     font-size: 20px;
    margin: 0 0 10px 0;
    padding-bottom: 10px;
    line-height: 30px;
    clear: both;
}
}

.discon{
         background-color: #FF0000;
         color: #ffffff;
         padding: 10px;
         font-size: 20px;
         font-weight: 600;
         text-align: center;
         margin: 20px 20px 10px 20px;
         }
.discon a{
           color: #ffffff;
           }
.discon a:hover{
           color: #ffffff;
           text-decoration: underline;
           }
           
.discon-data{
              font-size: 80%;
              line-height: 25px;
              }
.discon-2{
           color: #FF0000;
           font-weight: 400;
           font-size: 16px;
           text-align: center;
           padding:10px;
           line-height: 23px;
           }
.discon-label{
               color: #595757;
               border:1px solid #595757;
               font-size: 12px;
               font-weight: 600;
               margin-left: 5px;
               padding:0 5px;
               }
.line .kanren{
          background-color: #8EC926;
          color: #ffffff;
          text-align: center;
          padding: 10px;
          width: 18%;
          font-size: 14px;
          font-weight: 600;
          border-radius:0 0 10px 0;
          margin-left: -10px;
          }
@media screen and (max-width: 607px) {
.line .kanren{
          background-color: #8EC926;
          color: #ffffff;
          text-align: center;
          padding: 10px;
          width: 30%;
          font-size: 14px;
          font-weight: 600;
          border-radius:0 0 10px 0;
          margin-left: -10px;
          }
          }
.text-bold-c{
            font-weight: 600;
            text-align: center;
            font-size: 18px;
            line-height: 27px;
            }
.text-bold{
            font-weight: 600;
            }
.indent-1 {
    padding-left: 1em;
    text-indent: -1em;
    font-size: 12px;
    text-align: left;
    margin-top: 20px;
    line-height: 18px;
}
@media only screen and (min-width: 768px)  {
.indent-1 {
        padding-left: 1em;
        text-indent: -1em;
        font-size: 14px;
        text-align: left;
        margin-top: 20px;
        line-height: 20px;
    }
    }
.mgt20{
        margin-top: 20px;
        }
.mgt30{
        margin-top: 30px;
        }
        
.case-text{
    display: block;
    text-align: center;
    padding: 10px;
    letter-spacing: 0px!important;
    line-height: 18px;
}