@charset "utf-8";
/* CSS Document */
/* ↓↓↓login時↓↓↓ */
#top header .language .login {
	margin-left: auto;
}

/* ↓↓↓共通部分 ↓↓↓*/
#wrapper{
	min-width:1200px;
	max-width:1500px;
	margin:auto;
	padding:0px;
}

#top {
	font-family: "ヒラギノ角ゴ W3 JIS2004", "Hiragino Kaku Gothic W3 JIS2004", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Helvetica, Arial, sans-serif;
	font-size: 12px;
	text-align: left;
}

#top_page{
	display: none;
}

/* main*/
#top main {
	width: 90%;
	margin: auto;
}

#top main #side {
	width: 18%;
    margin-top: 1rem;
}

#top main .main {
	width: 80%;
	margin-left: 2%;
	float: right;
}

/* main */
#top main .main article {
	margin-bottom: 3rem;
}

#top main .main .mb10px {
	margin-bottom: 10px;
}

/* 在庫数表示  (※既存ソース引継ぎ) */
#top_search_wrapper{
	background:#ffffff;
	padding:105px 0 15px 0;
	padding: 0;
	text-align:center;
}

#top_search{
	padding:5px 0 0 0;
}

#top_search_txtbox{
	display:inline-block;
	margin:0 auto;
	text-align:left;
}

#top_search_txtbox td#top_search_txtbox_date{

}

#top_search_txtbox td#top_search_txtbox_date p{
	border:solid 1px #ffffff;
	background:#f2f5f9;
	padding:3px;
	color:#426AB2;
	font-size:1.2em;
	line-height:1.2;
	font-weight:bold;
	text-align:right;
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

#top_search_txtbox td#top_search_txtbox_detail{
	font-size:1.2em;
	line-height:1.5;
}

#top_search_txtbox td#top_search_txtbox_detail table{

}

#top_search_txtbox td#top_search_txtbox_detail th{
	padding:0 1em 0 1em;
}

#top_search_txtbox td#top_search_txtbox_detail td{
	padding:0 0;
	font-size:117%;
	font-weight:bold;
}

#top_search_txtbox td#top_search_txtbox_detail td span{
	font-size:70%;
	font-weight:normal;
}

/* TOPお知らせ固定表示 */
#top_fixed {
	margin: 5px 0;
}
#top .bold {
	font-family: 'Hiragino Kaku Gothic W7 JIS2004';
    font-weight: bold;
}

/* メーカー一覧 */
#maker .contents1 {
	height: auto;
    max-height: 10rem;
	overflow-y: scroll;
	overflow-x: hidden;
}

#maker .contents2 {
	height: auto;
    max-height: 5rem;
	overflow-y: scroll;
	overflow-x: hidden;
}

#maker .makerList {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#maker .makerList p {
	width: 9%;
	padding-bottom: 1%;
	padding-left: 1%;
	text-align: center;
}

#maker img {
	image-rendering: -webkit-optimize-contrast;
}

#maker a:hover img {
	cursor: pointer;
	filter: alpha(opacity = 60); /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)"; /* ie 8 */
	-moz-opacity: 0.6; /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.6; /* Safari 1.x */
	opacity: 0.6;
	zoom: 1;
	image-rendering: -webkit-optimize-contrast;
}

/* サプライヤー一覧 */
#supplier .contents {
	height: auto;
    max-height: 6rem;
	overflow-y: scroll;
	overflow-x: hidden;
}

#supplier .supplierList {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#supplier .supplierList p {
	width: 9%;
	padding-bottom: 1%;
	padding-left: 1%;
	text-align: center;
}

#supplier img {
	image-rendering: -webkit-optimize-contrast;
}

#supplier a:hover img {
	cursor: pointer;
	filter: alpha(opacity = 60); /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)"; /* ie 8 */
	-moz-opacity: 0.6; /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.6; /* Safari 1.x */
	opacity: 0.6;
	zoom: 1;
	image-rendering: -webkit-optimize-contrast;
}

/* 製品情報 */
#product {
	width: 85%;
    margin-left: 8%;
}

#product ul{
	width: 440px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
	
#product .productdata {
    padding: 15px;
    margin-bottom: 20px;
    height: 150px;
}
#product .productdata h3 {
	text-align: left;
    font-size: 1rem;
    margin: 0;
    color: #144e94;
}

#product a:hover{
	opacity: 0.6; 
	filter: brightness(110%);
	text-decoration: none!important;
}
	
#product .productdata p {
	text-align: left;
}

#product .productdata img {
	margin: 5px 0;
	width: 150px;
	height: 120px;
}

#product .obj-fit{
	object-fit: contain;
}

#product .productdata .flx2{
	display: flex;
	justify-content: flex-start;
}
	
#product .productdata .flx3{
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #555566;
	text-align: left !important;
	margin-left: 20px;
}
	
#product .productdata .flx3 p{
	font-size: 1.1em;
}


/* 姉妹サイト */
#series a:hover img {
	cursor: pointer;
	filter: alpha(opacity = 60); /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)"; /* ie 8 */
	-moz-opacity: 0.6; /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.6; /* Safari 1.x */
	opacity: 0.6;
	zoom: 1;
}

#series .flx {
	justify-content: space-between;
}

#series section {
	width: 20%;
	flex-direction: column;
	text-align: center;
}

.pb15 {
	padding-bottom: 1.5rem;
}

.mb2 {
	margin-bottom: 2rem;
}

.onMouse a:hover {
    cursor: pointer;
    filter: alpha(opacity = 60); /* ie lt 8 */
    -ms-filter: "alpha(opacity=60)"; /* ie 8 */
    -moz-opacity: 0.6; /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.6; /* Safari 1.x */
    opacity: 0.6;
    zoom: 1;
}

.relatedsite{
	display: flex;
  max-width: 100%;
  margin: auto;
  justify-content: space-between
}

/* サービス */

#service h2 {
    font-size:  20px;
    text-align: center;
    margin-bottom: 1rem;
}
#service .solution {
    display: flex;
    max-width: 100%;
    margin: auto;
     justify-content: space-between
}
#service .solution p{
    margin-bottom: 5px;
}
#service a:hover{
    cursor: pointer;
    filter: alpha(opacity = 60); /* ie lt 8 */
    -ms-filter: "alpha(opacity=60)"; /* ie 8 */
    -moz-opacity: 0.6; /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.6; /* Safari 1.x */
    opacity: 0.6;
    zoom: 1;
}
#service {
    margin-top: -150px;
    padding-top: 150px;
}

#buy, #ems {
	margin-top: -150px; /* 固定ナビの高さ分のネガティブマージン */
    padding-top: 150px; /*  打ち消し用のパディング */
}

#service .flx {
	justify-content: space-between;
}

#service .flx section {
	display: flex;
	flex-direction: column;
	width: 15%;
	border: solid #144e94 2px;
}

#service h3 {
	padding: .25rem .5rem;
	background: #144e94;
	color: #fff;
	word-break: break-all;
}

#service p {
	margin-bottom: auto;
	word-break: break-all;
}

#service a {
	margin-top: auto;
	text-align: right;
	padding-bottom: .25rem;
	text-decoration: underline;
	color:blue;
	word-break: break-all;
}

#service .cs {
	margin-top: auto;
	text-align: right;
	padding-bottom: .25rem;
	word-break: break-all;
}

/* ニュースリリース、コアスタッフ オンライントピックス  (※既存ソース引継ぎ) */
.dlist01 dt {
	padding:3px 0 0 0 !important;
}

.dlist01 dd {
	margin: -1.5em 0 0 0;
	padding: 0 0 3px 10em !important;
}

#top_news a:hover,
#top_topics a:hover{
	color:#426ab2;
	text-decoration:underline;
}

/* ひとつから在庫 */
#os_container {
	padding: 13px 0 0 0;
	margin: 0 0 60px 0;
}
#os_items{
	margin-top: 35px;
}
.os_item {
	width: 160px;
	line-height: 1.4em;
	vertical-align: top;
	display: inline-block;
	margin-bottom: 30px;
}
.os_item_not5n1 {
	margin-left: 70px;
	margin-bottom: 30px;
}

.os_item a {
	display: block;
}

.os_item a:hover {
	text-decoration: none;
	opacity: 0.7;
}

.os_item .os_image {
	position: relative;
	margin: 0 0 7px 0;
	width: 100%;
	height: 100px;
	overflow: hidden;
	text-align: center;
	align-items: center;
	display: flex;
	justify-content: center;
	border: 1px solid #f3f3f3;
}

.os_item .os_image img {
	height: 64px;
	width: auto;
	max-width: 100%;
}

.os_item .os_maker {
	margin: 0 0 3px 0;
	font-size: 12px;
	color: #333;
	line-height: 1.4em;
}
.os_item h3 {
	font-size: 12px;
	color: #426ab2;
	line-height: 1.4em;
}
/* ページ下部 バナー */
#bt_banner{
	margin:2rem auto;
}

#bt_banner a:hover img {
	cursor: pointer;
	filter: alpha(opacity = 60); /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)"; /* ie 8 */
	-moz-opacity: 0.6; /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.6; /* Safari 1.x */
	opacity: 0.6;
	zoom: 1;
}
/* ひとつからリンク
------------------------------------------*/
#link_hitotsu{
	border: solid 1px #cccccc;
	margin: 10px 0;
}
#link_hitotsu :hover {
opacity: 0.6;
}

/* 各サービスリンク
------------------------------------------*/
.image-container {
  display: flex;
  justify-content: space-between; /* 均等配置 */
  align-items: center;
  width: 100%;
  max-width: 1078px; /* 任意で制限 */
  margin:15px 0 15px 0;
  gap: 10px; /* 均等余白を確保（space-betweenの代替にも可） */
}

.image-container a {
  display: block;
  width: 33%; /* 各要素を均等幅に */
  text-align: center;
}

.image-container picture,
.image-container img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s;
}
.image-container img:hover {
  opacity: 0.8; /* ホバー時の軽いフェード効果 */
}