/***** PC用のデザインCSS *****/
@charset "UTF-8";
body {
  font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  color: #666666;
}

/* エレメント / タグセレクター */
ul, ol, dl { 
/* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
/* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
	padding-right: 15px;
	padding-left: 15px;
 /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}

a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
}

/* サイトのリンクのスタイル付け */
a:link {
	color: #666666;
	text-decoration: none;
}

/*a:visited {
	color: #00a1e9;
	text-decoration: none;
}*/

a:hover, a:active, a:focus {
	text-decoration: underline;
}

a .hover_img{
  transition:all 0.8s ease; /*0.5秒かけて要素を変化させる*/
}

/* マウスオーバーで要素変化 */
a:hover {
  transition:all 0.8s ease; /*0.8秒かけて要素を変化させる*/
  filter: alpha(opacity=30);        /* ie lt 8 */
  -ms-filter: "alpha(opacity=30)";  /* ie 8 */
  -moz-opacity:0.3;                 /* FF lt 1.5, Netscape */
  -khtml-opacity: 0.3;              /* Safari 1.x */
  opacity:0.3;
}


/* ~~ この固定幅コンテナが他の div を囲みます。~~ */
.container {
  width: 1000px;
  margin: 0 auto; /* レイアウト中央揃え */
}


/***** 共通ヘッダーここから *****/
.header {
  width: 100%;
  margin: 0;
  /*background-color: #ccccff;*/
}
.sitename {
  width: 100%;
  height: 120px;
  padding: 20px;
  font-size: 3em;
}

.head01 {
  height: 120px;
}



/* メニュー */
nav{
  letter-spacing: -0.4em;
  font-weight: 700;
  font-size: 1.2em;
}

nav ul{
    padding: 0px; 	
    margin: 0px;
}

nav ul li {
  color: #666666;
  display: inline-block;
  width: 24.5%;
  height: 60px;
  letter-spacing: normal;
}

nav li+li {
  border-left: solid 1px rgba(162,194,230,0.5);
}

nav ul li > a {
  color: #666666;
  display: table;
  text-align: center;
  line-height: 60px;
  width: 100%;
  height: 60px;
/*  padding-top: 30px;*/
  background: -moz-linear-gradient(top,rgba(162,194,230,0.1),rgba(162,194,230,0.5),rgba(162,194,230,0.5)); /* Firefox用 */   
  background: -o-linear-gradient(rgba(162,194,230,0.1),rgba(162,194,230,0.5),rgba(162,194,230,0.5)); /* Opera */ 
  background: -webkit-gradient(linear,left top,left bottom,from(rgba(162,194,230,0.1)),color-stop(70%,rgba(162,194,230,0.1)),to(rgba(162,194,230,0.5))); /* Safari,Google Chrome用 */ 
}

.contents {
  width: 700px;
  padding: 10px;
  color: #ffffff;
  font-size: 1.2em;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/***** 共通ヘッダーここまで *****/

/***** 共通フッターここから *****/
.footer {
  width: 100%;
  padding: 20px;
}

.footer_box {
  width: 100%;
  padding: 0;
}


.footer_link {
    position: relative;
}
.footer_k2 {
    position: absolute;
    left: 350px;
    top: 20px;
}

.footer_km {
    position: absolute;
    left: 100px;
    top: 230px;
}

.footer_kz {
    position: absolute;
    left: 580px;
    top: 230px;
}

.footer_text {
  position: absolute;
  bottom: 20px;
  margin: 20px 100px;
}


#copyright {
  padding: 0;
  text-align: center;
  font-size: 0.8em;
}

/***** 共通フッターここまで *****/


/**** トップページここから ****/
.top_news {
  padding: 40px 160px;
}

.top_news p {
  font-size: 1.4em;
  font-weight: 700;
  padding: 0px;
  margin: 0px;
}

#news_text {
  padding: 20px;
  border-style: solid;
  border-color: #a2c2e6;
  height: 120px;
  overflow-y: scroll;
}

#news_text hr {
  border-top: 1px dotted #8c8b8b;
}


/* スライダー 20180326追加 */ 
#css-slider { 
width: 1000px; 
height: 512px; 
overflow: hidden; 
} 
  
.slide-item { 
width: 1000px; 
height: 512px; 
float: left; 
position: relative; 
} 
  
  
.slider-wrapper { 
width: 300%; 
position: relative; 
left: 0; 
will-change: transform; 
animation: slider 15s infinite; 
} 
  
@keyframes slider { 
  0% { transform: translateX(0); } 
  50% { transform: translateX(-1000px); } 
  100% { transform: translateX(0); } 
} 

/* スライダー 20180326ここまで */ 





/**** トップページここまで ****/

/**** 会社概要ページここから ****/
.about_company {
  padding: 40px 160px;
}

.about_company p {
  font-size: 1.4em;
  font-weight: 700;
  padding: 0px;
  margin: 0px;
  border-bottom: solid 2px #a2c2e6;
}

.about_company_in {
  padding: 20px;
}

.about_company_in th {
  width: 140px;
  padding: 10px;
  text-align: left;
  vertical-align: top;
}
.about_company_in td {
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.about_tbl_ub {
  border-bottom: solid 1px #a2c2e6;
}
/**** 会社概要ページここまで ****/


/**** 製品情報ページここから ****/

.prot_data {
  width: 800px;
  padding: 10px 90px;
  display: flex;
  flex-wrap: wrap;  /* 子要素の折り返し */
  background-color: #ffffff;
}

.prot_data  span {
  font-size: 1.8em;
  line-height: 1.5em;
  font-weight: bold;
}


.prot_data_in {
  padding: 0px 0px 100px 40px;
}

.prot_data_in span {
  font-size: 1.2em;
  line-height: 1.2em;
  font-weight: bold;
}

.prot_data ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #ffffff;
}
.prot_data ul::after {
  display: block;
  clear: both;
  content: '';
}
.prot_data ul li {
  position: relative;
  float: left;
  padding: 10px;
  margin:  10px;
  height: 200px;
  /*border: 2px solid #fff;
  background-color: #eeeeff;*/
}

/*.prot_data ul li:not(:first-child) {
  border-left: none;
}
.prot_data ul li:hover {
  background-color: rgba(255,255,255,.3);
}*/

.prot_data ul li a {
  display: inline-block;
  /*padding: 0.5em 0;*/
  color: #000;
  line-height: 1;
  text-align: center;
    vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
      height: 50px;
	  width: 160px;
}
.prot_data ul ul {
  position: absolute;
  /*top: 100%;*/
  top: 100px;
  /*left: 2px;*/
}
.prot_data ul ul li {
  float: none;
  margin: 0;
}
.prot_data ul ul li:not(:first-child) {
  /*border: 2px solid #fff;*/
  border-top: none;
}
/*.prot_data ul ul ul {
  position: absolute;
  top: -2px;
  left: 100%;
}*/

ul ul {
  visibility: hidden;
  opacity: 0;
  transition: .2s ease-in-out;
}
ul li:hover > ul {
  visibility: visible;
  opacity: 1;
}

/*  ****  */




.box {
  display: inline-block;
      width: 160px;
      height: 110px;
      border: 1px solid #fff;
      background-color: #ffffff;
      text-align: center;
    vertical-align: middle;
    /*  line-height: 150px;*/
}

/*.box a {
  display: block;
}*/
.box img {
      width: 150px;
      padding: 0 2px;
}




/* ▼タブ */

#tabcontrol a{
   text-decoration: none;            /* リンクの下線を消す */
}

/* ▼タブにマウスポインタが載った際（任意） */
#tabcontrol a:hover {
   text-decoration: underline;   /* リンクの下線を引く */
	/* ▼ 透過グラデーション設定 ▼ */
	background: -moz-linear-gradient(top,rgba(255,255,255,0.3),rgba(255,255,255,0.9)); /* Firefox用 */  
	background: -o-linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.9)); /* Opera */
	background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.3)),to(rgba(255,255,255,0.9))); /* Safari,Google Chrome用 */
}

/* ▼タブの中身 */
#tabbody {
	width: 100%;
}

#tabbody span {
  font-size: 1.8em;
  line-height: 1.5em;
  font-weight: bold;
}

#tabbody div {
  padding: 1em 80px;            /* 内側の余白量 */
  margin: 20px 80px;
  line-height: 1.3em;
  background-color: #fafafa; /* 背景色：白色 */
  position: relative;      /* z-indexを調整するために必要 */
  z-index: 0;              /* 重なり順序を「最も背面」にするため */
  clear:both;
}






/**** 製品ページここまで ****/

/***** 問い合わせページ ここから *****/
.mail_box_title {
  font-size: 2.5em;
  text-align: left;
}

.mail_box {
  width: 800px;
  margin:0 auto;
  text-align: left;
  padding: 10px;
  background-color: #fff;
  line-height: 180%;
}

.mail_box p {
  border-left: outset 10px #00a1e9;
  border-bottom: inset 2px #00a1e9;
  font-size: 1.6em;
  line-height: 200%;
}

.mail_box_in {
  margin: 20px;
}

.mail_form_tbl {
  width: 780px;
  margin: 0;
  text-align: left;
  background-color: #fff;
  font-size: 1em;
  line-height: 120%;
}

.mail_form_tbl th {
  width: 200px;
  text-align: left;
  padding: 18px;
  background-color : #a2c2e6;
}

.mail_form_tbl th span {
  color: #ff0000;
  font-size: 0.8em;
  font-weight: normal;
}

.mail_form_tbl td {
  text-align: left;
  padding: 18px;
}

.mail_form_tbl td span {
  font-size: 0.8em;
  font-weight: 300;
}



/* テキストボックスのデザイン */
.mail_form_tbl td input[type="text"] {
  width:400px;
  height:40px;
  margin: 0px;
/*  padding: 4px 10px;*/
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 1.1em;
}

/* テキストエリアのデザイン */
.mail_form_tbl textarea {
  width:400px;
  height:80px;
  margin: 0px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  vertical-align: top;
  text-wrap:normal;
  white-space: pre-wrap;
  font-size: 1.1em;
}

/* チェックボックスのラベルのデザイン */
.cr_parts {
  font-size: 1.2em !important;
  position:relative;
  padding-left: 4px;
  margin-right: 20px;
  vertical-align: middle;
  cursor: pointer;
}

p.privacy {
  font-size: 0.9em;
  border: 0;
  line-height: 1em;
  padding: 0.5em;
}

p.privacy a {
  color: #aa6666;
  text-decoration: underline;
}

/* 仮に入れたテキストの装飾 */
:placeholder-shown {
    color: #aaaaaa;
}
/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder { 
    color: #aaaaaa;
}

/* Firefox 18- */
:-moz-placeholder {
  color: #aaaaaa;
  opacity: 1;
}

/* Firefox 19+ */
::-moz-placeholder {
  color: #aaaaaa;
  opacity: 1;
}

/* IE 10+ */
:-ms-input-placeholder {
  color: #aaaaaa;
  opacity: 1;
}

/* 送信ボタンのデザイン ここから */
.mail_form_button {
  height: 3em;
  margin: 0 1em;
  padding: 0 2em;
  background-color: #00a1e9;
  color: #ffffff;
  font-size: 1.2em;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  border-style: none;
}


.mail_form_button:hover {
  transition:all 0.8s ease; /*0.8秒かけて要素を変化させる*/
  filter: alpha(opacity=30);        /* ie lt 8 */
  -ms-filter: "alpha(opacity=30)";  /* ie 8 */
  -moz-opacity:0.3;                 /* FF lt 1.5, Netscape */
  -khtml-opacity: 0.3;              /* Safari 1.x */
  opacity:0.3;
  cursor: pointer;
}

/* 送信ボタンのデザイン ここまで */


.thanx_text {
  margin: 100px 140px;
  padding: 10px;
  top: 5em;
  line-height: 1.5em;
  text-align: center;
}

.thanx_text span {
  font-size: 2em;
  font-weight:bold;
}

/***** お問い合わせページ ここまで *****/
/***** 製品情報ページの装飾 ここから *****/

.sub-menu {
  display: none;  /*サブメニューは最初は非表示にしておく*/
  position: absolute;  /*絶対配置にしておかないとうまくいかない*/
  top: 30px;  /*位置の指定*/
  left: 0;
}
.sub-menu {
  display: block;    /*マウスオーバー時にサブメニューを表示する*/
}
.sub-menu li{
  float: none;  /*サブメニューはフロートさせないので解除*/
  padding: 0;  /*親メニューのパディングを解除。これをしないとボーダーがはみ出る*/
}
.sub-menu li:first-child{
  border-top: 1px solid #eee;  /*最初の要素のみボーダートップを指定*/
}
.sub-menu li a {
  border: 1px solid #eee;  /*ボーダーの指定*/
  border-top: none;  /*ボーダートップは重なって太くなるので解除*/
  padding: 0 10px;  /*ボーダーとの間にパディングを入れる*/
  background-color: #FFF;  /*背景色を白に指定*/
  color: #666;
}
 
.sub-menu li a:hover  {
  background-color: #EEE;  /*マウスオーバー時に背景色を変える*/
  display: block;
}

/*---------------------*/

/***** 個人情報ページ ここから *****/
.privacy_title {
  font-size: 2.5em;
  text-align: left;
}

.privacy_box {
  width: 800px;
  margin:0 auto;
  text-align: left;
  padding: 10px;
  background-color: #fff;
  line-height: 180%;
}

.privacy_box p {
  border-left: outset 10px #00a1e9;
  border-bottom: inset 2px #00a1e9;
  font-size: 1.6em;
  line-height: 200%;
}

.privacy_box_in {
  margin: 30px;
}

.privacy_box_in ul {
  font-weight: 900;
  padding-top: 1.5em;
}

.privacy_box_in li {
  list-style-type: none;
  line-height: 1.1em;
}



/***** 個人情報ページ ここまで *****/