@charset "utf-8";


*{
box-sizing:border-box;
position:relative;}

body{	font-family: Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;	font-size:14px;	font-size:95%\9; 	color:#313131; 	margin:0; 	padding:0;	-webkit-text-size-adjust: 100%;	width:100%; min-width: inherit;}

h2{width: 100%; max-width: 1200px;}

#Header{width: 100%; padding:0 30px; max-width: 1200px;}
#Header:after{content: "";display: table; clear: left;}
#Header h1{width: 200px; float: left;}
#Header h1 img{width: 200px;}
#Header > a > img{width: 200px;}
#Header ul{width: calc(100% - 200px);}

#Header .Inner ul{text-align:right;width: 100%;}
#Header .Inner li{ padding-right: 20px;display: inline-block;}
#Header .Inner li.Inquiry a{background: url(/common/img/icon_mail.png) no-repeat left;background-size: auto 16px;padding-left: 37px;}
#Header .Inner li.Lang a { background: url(/common/img/icon_global.png) no-repeat left; background-size: auto 16px;   padding-left: 32px;}
#Header .Inner li.Search{width:170px;}
#cse input#search{width: 126px;}
#HeadLine .Inner p.Close{top:10px; right:10px;}

#Navigation > ul{width: 100%; max-width: 1200px; background: none; padding-left: 0;display: flex; height: auto; min-height: auto;   justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */}
#Navigation > ul li{width:25%; padding: 0; margin: 0; height: 100%;}
#Navigation ul li a{padding:20px 20px; height: 100%; display:inherit; float: none;}
	/*underlayer*/
	#Navigation ul ul{display:none;	position:absolute;	width:500% !important; max-width: 1200px !important;　z-index:100;	background:#004583;	padding:0; top: 60px;}
_:-ms-fullscreen, :root #Navigation ul ul {
  top:55px;}
	#Navigation > ul ul li{width: 20% !important;}
	/*#Navigation ul ul li a{padding: 10px 20px;}*/
	#Navigation ul li.SpOnly{display: none;}

#HeadLine .Inner{width: 100%;}
#HeadLine .Wrap{width: 100%; max-width: 1200px;}
#HeadLine .HeadTopics{width: 50%; border-left: none;}
#HeadLine .HeadPro{width: 50%}
#HeadLine .Inner .Bloc{width: 100%;}

#Index #MainImage{width: 100%;height: 450px;}
#Index #MainImage ul {width: 100%;height: 100%;}
#Index #MainImage ul li{overflow: hidden; height: 100%;position: relative;}
#Index #MainImage ul li img{min-width:auto; max-width: 1200px;}
#Index #MainImage .Copy{width: 650px; margin-left: -325px; top: 50px;}

#Product {padding-left: 0 !important;}
#Index #Product h2{width: 100%;}
#Product h2{width: 100%; max-width: 1200px; padding: 40px 30px}
#Product #TabCtrl{width: 100%; max-width: 1200px;}
#Product #TabCtrl li{font-size:1rem;}
#Product .TabContents{width: 100%; max-width: 1200px;}
#Product .TabContents .Cont1{display: block;}
#Product .TabBox ul{width: 100%;}
#Product .TabBox ul li{width: 31%; margin: 0 3% 3% 0;}
#Product .TabBox ul li a img{max-width: 100%;}
#Product .TabBox ul li dt{font-size: 1.4rem;}

#Index #PickUp{width: 100%; padding:40px 30px}
#Index #PickUp .Wrap{width: 100%; margin: 0 auto;}
#Index #PickUp .Wrap ul{width: 80%; margin: 0 auto;}
#Index #PickUp .Wrap ul li img{margin: 0 auto; max-width: 100%;}
#Index #PickUp .Prev{display: none;}
#Index #PickUp .Next{display: none;}

#Product #TabCtrl li{ display: block;}

#Index #Feature{max-width: none; min-width: inherit; width: 100%;padding: 0 30px;}
#Index #Feature .Wrapper{width: 100%; max-width: 1200px;}

#Topics {padding: 0px;}
#Topics h2{width: 100%; max-width: 1200px;}

#Index #Topics{ padding: 0 30px;}
#Index #Topics ul{width: 100%; max-width: 1200px;}
#Topics ul li{padding: 15px 0;}
#Topics ul li span.Cat{width: 20%; float: left;}
#Topics ul li span.Data{width: 20%; float: left; padding: 5px 0; text-align: center;}
#Topics ul li span.Tit{width: 100%; clear: left; display: block; }

#Index #Tech{width: 100%;padding: 0 30px}
#Index #Tech .Wrapper{}

.ModImgTxBox .Bloc{width: 48.5%; margin: 0 3% 3% 0;}
.ModImgTxBox .Bloc:nth-child(2n){margin: 0 0% 3% 0}
.ModImgTxBox .Bloc:nth-child(4n){margin: 0 0% 3% 0}
.ModImgTxBox .Bloc .ImgWrap{width: 100%;}
.ModImgTxBox .Bloc .ImgWrap img{width: auto; max-width: 100%;}

.ConAre .Wrapper div h2{margin-bottom: 30px;}
.ConAre .Wrapper div dl{ top: 0; min-height: inherit;position: relative; margin-bottom: 0;}
.ConAre .Wrapper{width: 100%; padding:35px 20px 30px;  max-width: 1200px;}
.ConAre .Wrapper > div{height: auto; margin-bottom: 0px;}
.ConAre .Wrapper > div.Phone{ width: 50%;float: left;}
.ConAre .Wrapper > div.Phone dl{background: url(/common/img/con_ico_tel.png) no-repeat left top; padding:0 15px 0 85px; background-size: 70px;}
.ConAre .Wrapper div.Phone dd img{ max-width: 100%;}
.ConAre .Wrapper > div.Web{width: 50%;float: left; padding: 0 15px}
.ConAre .Wrapper > div.Web dl{background: url(/common/img/con_ico_mail.png) no-repeat 0px 0px; padding:0 15px 0 85px; top: 20px;}

.ConAre .Wrapper > div.Retailer{ width: 50%; background: none; }
.ConAre .Wrapper div.Retailer dl{padding:0 15px 0 85px;background: url(/common/img/con_ico_map.png) no-repeat left top; background-size:70px auto;}

		.ConAre .Wrapper div.MailMag{width: 50%; background: none;}
		.ConAre .Wrapper div.MailMag dl{background:url(/common/img/con_ico_mg.png)  no-repeat left top;padding:0 15px 0 85px;background-size:50px auto;}
		.ConAre .Wrapper div.MailMag dt{margin:20px 0 10px;}

#PathList ul{border-left: none; width: 100%; max-width: 1200px;}
#Contents {width: 100%;}
#Contents .Inner{width: auto; padding: 0 30px; max-width: 1200px;}

.ImgGallery a{height: 170px;}

#ProWideLink .Wrapper{ width:100%; max-width: 1200px; background: none;}
#ProWideLink p.Tit{padding-left: 15px; font-size: 0.8rem;}
#ProWideLink p.Tit span{ padding: 10px; width: 100%; float: none;}
#ProWideLink ul{font-size: 0.8rem; float: none; width: 100%;}
#ProWideLink ul ul{margin-left: 0; padding: 10px 25px 0; width: 100%;}
#ProWideLink ul li > a{padding: 20px 10px;}
	#FooterPathList ul{
	width:100%;
    max-width: 1200px;
	margin:0 auto;
	padding:0 15px;
	border-left:1px dotted #999999;}

#Footer .WideLink li{ margin: 0 20px;}

/*ir*/
body.Ir #Contents #Product .TabBox ul li img{max-width: 100%;}