/* --------------------------------------------------------------------
 for products Page CSS
 -------------------------------------------------------------------- */
/**/
.heightbox li { width: 24%;}

/**/
.rightbtn { max-width: 960px; margin: 0 auto 20px; display: flex; justify-content: flex-start; }
.rightbtn figure { width: 340px; margin-right: 20px; }
.rightbtn .description { width: 600px; display: flex; flex-direction: column; justify-content: space-between; }
.rightbtn .description .text { margin-bottom: 20px; font-size: 1.3em; }
.rightbtn .description .btn { align-self: flex-end; background: #a5a0CF; }
.rightbtn .description .btn a { background-color: #ecb02f; color: #fff; padding: 15px 50px; text-decoration: none; display: inline-block; }

/* NEW ribbon */
.frameRibbonNEW { position: relative; display: inline-block; overflow: hidden; padding: 1px; }
.frameRibbonNEW:after { content: ""; position: absolute; z-index: 1; width: 100px; height: auto; background: red; content: "New"; text-align: center; color: #fff; font-family: 'Arial'; font-weight: bold; padding: 5px 10px; left: -30px; top: 3px; transform: rotate(-30deg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
/* VerUP ribbon */
.frameRibbonVUP { position: relative; display: inline-block; overflow: hidden; padding: 1px; }
.frameRibbonVUP:after { content: ""; position: absolute; z-index: 1; width: 100px; height: auto; background: green; content: "Ver.UP"; text-align: center; color: #fff; font-family: 'Arial'; font-weight: bold; padding: 5px 10px; left: -30px; top: 3px; transform: rotate(-30deg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
/* items */
.heightbox2 { display: flex; justify-content: space-between; -webkit-flex-wrap: wrap; /* Safari */ flex-wrap: wrap; align-items: stretch;}
.heightbox2 li { width: 18%; border: 1px solid #ccc; padding: 0px; margin-bottom: 0px; margin-top:10px; }
.heightbox2 figure { margin-bottom: 0px; margin-top:20px; }
.heightbox2 p { text-align:center; margin-bottom: 0px; margin-top:0px; }
.heightbox2 .item { font-weight: bold; text-align:center;}

/* itemNavi style */
.itemNavi {
 background-color: #618FC0; color: #ffffff; font-weight:200;
 padding-top: .25em; padding-left: 1.25em;; padding-bottom: .25em; padding-right: 0em;
 margin-top: 1em; margin-left: 0em; margin-bottom: 0em; margin-right: 0em;
 border-top: 0px solid #3498db; border-left: ; border-bottom: 1px solid #fff; border-right: ;
 display: flex;} /*横並び*/
.itemNavi li:first-child { margin-right: auto;} /*先頭は左揃え、他は右揃え*/
.ft {
 font-size: 16px; color: #fff;
 font-weight:500;
 margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; padding: 10px;
}
/* itemNavi button base style */
.itemNaviButton {
 display: inline-block; font-size:85%; text-decoration: none; line-height: 22px; outline: none;
 vertical-align: middle; text-align: middle;
}
.itemNaviButton a:link { text-decoration: none; color: #eee; }
.itemNaviButton a:hover { text-decoration: none; color: #5f5; }
.itemNaviButton a:visited { text-decoration: none; color: #eee; }
.itemNaviButton::before,
.itemNaviButton::after { position: absolute; z-index: -1; display: block; content: ''; }
.itemNaviButton,
.itemNaviButton::before,
.itemNaviButton::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; }
/*button 02 style*/
#inButton {
 background-color: #618FC0;
 margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; padding: 10px;
 border-top: 0px solid #aaa; border-bottom: 0px solid #aaa; border-left: 1px solid #99e; border-right: 0px solid #ccc;
}
#inButton:hover { background-color: #4ae; color: #333;}

/* ひょう量・目量から探すのテーブル用---------
テーブルの縦横ラインをハイライトする
---------------------------------------------*/
table.hightlite { font-size: 10px; margin: 0 auto; border-collapse: separate; border-spacing: 0px 0px; width:100%; }
table.hightlite th {
 padding: 10px; vertical-align: middle; text-align: middle; color: #fff; background: #447791;
 border-top: #fff 0px solid; border-right: #fff 1px solid; border-bottom: #fff 1px solid; border-left: #fff 0px solid;
}
table.hightlite td {
 padding: 10px; vertical-align: top; text-align: left; font-size: 11px; background: #ACDCF2;
 border-top: #fff 0px solid; border-right: #fff 1px solid; border-bottom: #fff 1px solid; border-left: #fff 0px solid;
}
/* hightlite tbody */
table.hightlite:hover tbody tr:hover th { background: #7cacc2; }
table.hightlite:hover tbody td {
 color: #ccc; background: #ACDCF2;
 border-top: #fff 0px solid; border-right: #fff 1px solid; border-bottom: #fff 1px solid; border-left: #fff 0px solid;
}
table.hightlite:hover tbody tr:hover td { color: #000; background: #A4D4EA; }
table.hightlite:hover tbody:hover td:hover { opacity: 1; color: #fff; background: #84B4CA; } /* hightlite td */
table.hightlite:hover tbody:hover td:hover a:hover {  color: #fff; } /* hightlite td in a */

/* */
.lbLink { width: 100%;}
.lbLink ul li a { background: url(../products/yamatoarrow.gif) no-repeat 10px 3px;/* リストマークはデフォルトの画像を使用します。*/
display: block;/* displayの値をblockにして画面いっぱいまで広げます。*/
border-top: 0px dotted #C3BFAA; text-decoration: none !important; border-bottom: 0px dotted #C3BFAA;}
.lbLink ul li a:hover { background: #EDEBE6 url(../products/yamatoarrow2.gif) no-repeat 10px 3px; color: #00f;}
.lbLink ul.lbLinkGlobal { margin: 0; padding: 0; list-style: none;}
.lbLink li.lbLinkGli { font-weight: 400; font-size: 1.2em;}
.lbLink ul li.lbLinkGli { margin: 0 0 0 0;}
.lbLink ul li.lbLinkGli a { padding: 1px 90px; width: 100%;}

/* */
.bSiteMap { width: 100%;}
.bSiteMap ul li a {
 background: url(../products/yamatoarrow.gif) no-repeat 10px 10px; display: block;
 border-top: 1px dotted #C3BFAA; text-decoration: none !important; border-bottom: 1px dotted #C3BFAA;}
.bSiteMap ul li a:hover { background: #EDEBE6 url(../products/yamatoarrow2.gif) no-repeat 10px 10px; color: #00f;}
.bSiteMap ul.bSiteMapGlobal { margin: 0; padding: 0; list-style: none;}
.bSiteMap li.bSiteMapGli { font-weight: 400; font-size: 1.6em;}
.bSiteMap ul li.bSiteMapGli { margin: 0 0 25px 0;}
.bSiteMap ul li.bSiteMapGli a { padding: 6px 90px; width: 100%;}
.bSiteMap ul.bSiteMapLocal { margin: 0; padding: 0 0 0 170px;/* インデントを設定します。*/ list-style: none;}
.bSiteMap li.bSiteMapLli { font-weight: normal; font-size: 0.8em;}
.bSiteMap ul li.bSiteMapLli a { padding: 8px 90px; width: 100%; border-top: none;}

/* */
table.listTable { font-size: 10px; margin: 0 auto; border-collapse: separate; border-spacing: 0px 0px; width:100%; }
table.listTable th {
 padding: 10px; vertical-align: middle; text-align: center; color: #fff; background: #447791;
 border-top: #fff 0px solid; border-right: #fff 1px solid; border-bottom: #fff 1px solid; border-left: #fff 0px solid;
}
table.listTable td {
 padding: 10px; vertical-align: middle; text-align: center; font-size: 11px; background: #bfdeFd;
 border-top: #fff 0px solid; border-right: #fff 1px solid; border-bottom: #fff 1px solid; border-left: #fff 0px solid;
}

/* アコーディオン（チェックボックス） */
.accordion { margin: 0 auto; padding: 0px; max-width: 960px; margin: 0 auto 0px; display: flex; justify-content: flex-start; }
.accordion .ac-content { margin: 0 0px; width: 600px; margin-left: auto; }
.accordion input { display: none; }
.accordion label { display: block; background: #ccc; cursor: pointer; padding: 10px; border-bottom: 1px solid #fff; }
.accordion label:hover { background: #9fb7d4; }
.accordion .ac-cont { transition: 0.2s; height: 0; overflow: hidden; background: #eee; padding: 0 10px; }
.accordion input:checked + .ac-cont { height: auto; padding: 10px; }

/* description table */
.desctbl { width:100%; }
.desctbl th { background-color:#b1b4f1; border: 1px solid #999; font-size: 8pt; }
.desctbl td { background-color:#ffffff; border: 1px solid #999; padding:6px; font-size: 8pt; text-align:center;}

/* テーブルの上端にアクセントカラーの線を付けます。*/
table.topColor { font-size:0.9em; margin:0 auto; border-collapse:collapse; width:100%;
    padding-top: 10px; padding-left: 20px; padding-bottom: 10px; padding-right: 0px;
/* テーブル上端のアクセントカラー線が不要な時はコメントアウトします。*/
    margin-top: 1em; margin-left: 0em; margin-bottom: 1em; margin-right: 0em;
    border-top: 3px solid #393; border-left: ; border-bottom: 1px solid #ccc; border-right: ;}
table.topColor th { padding:0.5em; border:1px solid #ccc; text-align:left; background-color:#F4F4f4; color:#333333;}
table.topColor td { padding:0.5em; border:1px solid #ccc; text-align:left; background-color:#FaFafa; color:#333333;}

/* クリックで開閉するツリーメニュー */
.myTree { margin:10px; font-family:sans-serif;}
/* Tree core styles */
.tree { margin:0.5em; }
.tree input { position:absolute; clip:rect(0, 0, 0, 0); }
.tree input ~ ul { display:none; }
.tree input:checked ~ ul { display:block; }
/* Tree rows */
.tree li { line-height:0.7; position:relative; padding:0 0 1em 1em; }
.tree ul li { padding:1em 0 0 1em; 
list-style:none;/*行頭マークを表示しない*/
/*list-style-position:inside;全体の行頭が揃う*/
}
.tree > li:last-child { padding-bottom:0; }
/* Tree labels */
.tree_label { position:relative; display:inline-block; background:#fff; }
label.tree_label { cursor:pointer; }
label.tree_label:hover { color:#666; }
/* Tree expanded icon */
label.tree_label:before { background:#ccf; color:#000; position:relative; z-index:1; float:left; margin:0 1em 0 -2em; width:1em; height:1em; border-radius:0.0em; content:"+"; text-align:center; line-height:0.9em;}
:checked ~ label.tree_label:before { content:"-"; }
/* Tree branches */
.tree li:before { position:absolute; top:0; bottom:0; left:-0.5em; display:block; width:0; border-left:1px solid #777; content:""; }
.tree_label:after { position:absolute; top:0; left:-1.5em; display:block; height:0.5em; width:1em; border-bottom:1px solid #777; border-left:1px solid #777; border-radius:0 0 0 0.3em; content:""; }

label.tree_label:after { border-bottom:0; 
}
:checked ~ label.tree_label:after {
/*  border-radius: 0 0.3em 0 0;*/
  border-radius: 0 0 0 0;
  border-top: 1x solid #777;
  border-right: 0px solid #777;
/*  border-right: 1px solid #777;*/
  border-bottom: 0;
  border-left: 0;
  bottom: 0;
  top: 0.5em;
  height: auto;
}
.tree li:last-child:before { height:1em; bottom:auto; }
.tree > li:last-child:before { display:none;}
.tree_custom { display:block; background:#eee; padding:1em; border-radius:0.3em; }
/*IE SVG対策*/
img[src$=".svg"] {
	width: 100%;
	height: auto;
}
/* for rankbox 
   横並びリスト画像ホバーで、画像右上に配置されたリツイート数と画面下に配置されたキャプションが入れ替わる。
*/
.rankbox {display:flex;justify-content:space-between;-webkit-flex-wrap:wrap;/*Safari*/flex-wrap:wrap;align-items:stretch;margin:0;padding:0;}
.rankbox ul {text-indent:0;}
.rankbox li {list-style:none;width:22%;border:1px solid #ccc;padding:10px;margin:0;margin-bottom:10px;}
.rankbox figure {margin:0;padding:0;margin-bottom:10px;}
.rankbox .item {font-weight:bold;}
.rankbox figure {line-height:0;width:100%;}
.rankbox figure img {max-width:100%;}
.rankbox .title { box-sizing: border-box; -moz-box-sizing: border-box; }
.rankbox a { background: rgb(204, 204, 204); transition:0.3s; overflow: hidden; text-decoration: none; display: block; position: relative; }
.rankbox a .title { padding: 2px 3px; left: 0px; width: 100%; height: 32px; bottom: 0px; color:#fff; line-height: 1.3; overflow: hidden; font-size: 12px; position: absolute; background-color: rgba(0, 0, 0, 0.6); }
/* for 'title' Moveing effect*/
.rankbox li:hover > a span.title { height: 100%; }
/* for 'tag' Moveing effect*/
.rankbox li:hover > a span.tag { top: 80%; }
.rankbox .tag { background: deepskyblue; padding: 3px 2px; top: 0px; right: 0px; color:#fff; font-size: 12px; font-weight: bold; position: absolute; z-index: 1; text-shadow: 1px 1px 2px #888; }
.rankbox .tag { background: deepskyblue; }
/* for 'tagORG' Moveing effect*/
.rankbox li:hover > a span.tagORG { top: 80%; }
.rankbox .tagORG { background: orange; padding: 3px 2px; top: 0px; right: 0px; color:#fff; font-size: 12px; font-weight: bold; position: absolute; z-index: 1; text-shadow: 1px 1px 2px #888; }
.rankbox .tagORG { background: orange; }
/* for 'tagGRN' Moveing effect*/
.rankbox li:hover > a span.tagGRN { top: 80%; }
.rankbox .tagGRN { background: green; padding: 3px 2px; top: 0px; right: 0px; color:#fff; font-size: 12px; font-weight: bold; position: absolute; z-index: 1; text-shadow: 1px 1px 2px #888; }
.rankbox .tagGRN { background: green; }
/* for 'tagBWN' Moveing effect*/
.rankbox li:hover > a span.tagBWN { top: 80%; }
.rankbox .tagBWN { background: brown; padding: 3px 2px; top: 0px; right: 0px; color:#fff; font-size: 12px; font-weight: bold; position: absolute; z-index: 1; text-shadow: 1px 1px 2px #888; }
.rankbox .tagBWN { background: brown; }
/* for 'tagLIM' Moveing effect*/
.rankbox li:hover > a span.tagLIM { top: 80%; }
.rankbox .tagLIM { background: limegreen; padding: 3px 2px; top: 0px; right: 0px; color:#fff; font-size: 12px; font-weight: bold; position: absolute; z-index: 1; text-shadow: 1px 1px 2px #888; }
.rankbox .tagLIM { background: limegreen; }
/* for 'tagYEL' Moveing effect*/
.rankbox li:hover > a span.tagYEL { top: 80%; }
.rankbox .tagYEL { background: yellow; padding: 3px 2px; top: 0px; right: 0px; color:#fff; font-size: 12px; font-weight: bold; position: absolute; z-index: 1; text-shadow: 1px 1px 2px #888; }
.rankbox .tagYEL { background: yellow; }
/* for 'tagBLU' Moveing effect*/
.rankbox li:hover > a span.tagBLU { top: 80%; }
.rankbox .tagBLU { background: blue; padding: 3px 2px; top: 0px; right: 0px; color:#fff; font-size: 12px; font-weight: bold; position: absolute; z-index: 1; text-shadow: 1px 1px 2px #888; }
.rankbox .tagBLU { background: blue; }
/* for 'tagPERU' Moveing effect*/
.rankbox li:hover > a span.tagPERU { top: 80%; }
.rankbox .tagPERU { background: peru; padding: 3px 2px; top: 0px; right: 0px; color:#fff; font-size: 12px; font-weight: bold; position: absolute; z-index: 1; text-shadow: 1px 1px 2px #888; }
.rankbox .tagPERU { background: peru; }

.rankbox li { transition:0.3s; }
.rankbox a span { transition:0.3s; }
.rankbox img { transition:opacity 0.3s; }
/* Yamato Link Button*/
a.btn03 {
    padding: 10px 30px;
    border-radius: 4px;
    border: 1px solid #0086cd;
    background: #fff url(./image/_pdf.gif) no-repeat right 19px center;
    background-size: 16px 16px;
    box-sizing: border-box;
    color: #006fbc;
    transition: all .2s ease-out;
}
a.btn03:hover {
	background-color: #93d5f4;
	color: #fff;
}
a.btn02 {
    padding: 10px 30px;
    border-radius: 4px;
    border: 1px solid #0086cd;
    background: #fff url(./image/_arrow03.png) no-repeat right 19px center;
    background-size: 16px 16px;
    box-sizing: border-box;
    color: #006fbc;
    transition: all .2s ease-out;
}
a.btn02:hover {
	background-color: #93d5f4;
	color: #fff;
}
a.btn01 {
    padding: 10px 30px;
    border-radius: 4px;
    border: 1px solid #0086cd;
    background: #fff url(./image/_DL01.png) no-repeat right 19px center;
    background-size: 16px 16px;
    box-sizing: border-box;
    color: #006fbc;
    transition: all .2s ease-out;
}
a.btn01:hover {
	background-color: #93d5f4;
	color: #fff;
}
.zoom_table > .column {
width:190px; height:100%; overflow:hidden; float:left; position:relative; transform:scale(1); transition-duration:100ms; transition-timing-function:ease-out; background-image: -ms-linear-gradient(left, rgb(240, 240, 240) 0%, rgb(250, 250, 250) 44%, rgb(250, 250, 250) 86%, rgb(240, 240, 240) 100%); background-color: rgb(250, 250, 250); -webkit-transform: scale(1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 100ms; -moz-transform: scale(1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 100ms; -o-transform: scale(1); -o-transition-timing-function: ease-out; -o-transition-duration: 100ms;
}
.zoom_table > .column:hover {
position:relative; z-index:2; box-shadow:0px 0px 32px #000; transform:scale(1.05); background-image:-ms-linear-gradient(left, rgb(250, 250, 250) 0%, rgb(250, 250, 250) 100%); background-color: rgb(250, 250, 250); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05);
}
.column-clear {clear:left;}

</style>