@charset "utf-8";

/* ---------------------------------------------------------------------------
 [ product/style.css ]
--------------------------------------------------------------------------- */

/* ------------------------------
 プロダクト 設定
------------------------------ */

.product_intro_area {
  margin: 40px 0;
  padding: 20px;
  border: #314E64 2px solid;
  font-weight: bold;
  font-size: 18px;
  font-size: 1.8rem;
  text-align: center;
  background: #f7f7f7;
}

.pr_sencha_logo {
  float:right;
  margin: 40px 20px 15px;
}

.ttl_product01 {
  margin: 20px 0;
  color: #314E64;
  font-weight: bold;
  font-size: 18px;
  font-size: 1.8rem;
}

.ttl_product02 {
  clear: both;
  margin: 20px 0 20px;
  color:#314E64;
  font-weight: bold;
  font-size: 18px;
  font-size: 1.8rem;
}

.product_lc01 {
  float:left;
  width: 48%;
  padding: 20px 0 0;
}

.product_lc02 {
  float: left;
  clear: both;
  width: 48%;
  padding: 20px 0 20px;
}

.product_rc01 {
  float: right;
  width: 48%;
  padding: 20px 0 0;
}

.product_rc02 {
  float: right;
  width: 48%;
  padding: 20px 0 20px;
}

.product_font01 {
  color: #314E64;
  font-weight: bold;
  font-size: 14px;
  font-size: 1.4rem;
}

img.pr_img01 {
  float:left;
  margin: 0 15px 10px 0;
}

.subs_area {
  padding: 0 13px 0 25px;
}

.subs {
  padding: 0 0 0 74px;
  background: url(../../images/product/icon_cart.gif) no-repeat left center;
}

/* 製品ロゴ */
.p_logo {
  margin: 0 0 46px;
}

.p_logo img {
  vertical-align: middle;
  padding: 0 15px 0 0;
}

.p_logo02 {
  padding: 20px 0 0;
}

/* 価格表 */
/*
.type_price01 {
  width: 688px;
  border: 1px solid #C5CCD4;
}

.type_price01 .bg_color {
  background: #F3F8FC;
}

.type_price01 .b_bottom {
  border-bottom: 1px solid #C5CCD4;
}

.type_price01 th,
.type_price01 td {
  padding: 8px 15px 6px;
}

.type_price01 th {
  border-bottom: 1px solid #C5CCD4;
  font-weight: bold;
  text-align: left;
  background: #F3F8FC;
}

.type_price01 td.find {
  font-weight: bold;
  background: #fafafa;
}

.type_price01 td.price {
  border-left: 1px solid #C5CCD4;
  font-weight: bold;
  text-align: right;
}

.type_price01 td span {
  color: #aaa;
  font-size: 0.9rem;
}
*/
/* prace */
.type_price01{
  width: 690px;
  border: 1px solid #E9E9E9;
  border-top: 0px;
}
.type_price01 tr{
  border: 1px solid #E9E9E9;
}
.type_price01 tr.price_box{
  padding: 20px;
  background: #FAFAFA;
}
.type_price01 tr th{
  padding: 5px 5px 5px 10px;
  border-bottom: 1px solid #E9E9E9;
  border-top: 1px solid #E9E9E9;
  font-weight: bold;
  font-size:16px;
  background: #FAFAFA;
}
.type_price01 tr td{
  vertical-align: top;
  padding: 30px 20px 40px;
}

.type_price01 tr td.price_right_area{
  width: 50%;
  border-right: 1px solid #E9E9E9;
}
.type_price01 tr td.price_center_area{
  border-right: 1px solid #E9E9E9;
  border-left: 1px solid #E9E9E9;
}
.type_price01 tr td.img_box{
  border-bottom: 1px solid #E9E9E9;
  text-align: center;
  padding: 60px 0 10px;
}
.type_price01 tr td.img_box p{
  font-weight: 100;
  font-size: 25px;
  color: #66ab16;
  font-family: Klavika Basic;
}
.type_price01 tr td p{
  font-weight: bold;
}
.type_price01 tr td p.dev{
  height: 12px;
  line-height: 12px;
  padding-left:10px;
  background: url("../../images/product/icon_price_mark.gif") no-repeat top left;
}
.type_price01 tr td p.product_name{
  margin: 20px 0 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #D9D9D9;
}
.type_price01 tr td p.price{
  color: #2b4673;
  margin-bottom: 15px;
  padding-top: 4px;
  border-top: 1px solid white;
  font-size: 18px;
  text-align: right;
}
.type_price01 tr td p span{
  display: block;
  color: #b2b2b2;
  font-weight: normal;
  font-size: 10px;
}

.type_price01 tr td p span.pattern2{
  margin-left: 5px;
  display: inline-block;
  color: #333;
}
.type_price01.animator tr td p span{
  margin-top: 5px;
}
.type_price01.animator tr td p{
  height:auto
}
/* bryntum */
.type_price01.bryntum tr td p.dev{
  background: url("../../images/product/icon_price_mark2.gif") no-repeat top left;
}

/* boder_pattern01 */
.boder_pattern01 tr td p.dev{
  margin-bottom: 0px;
  padding-bottom: 5px;
  border-bottom: 1px solid #D9D9D9;
}

.type_price01.bryntum tr td.img_box p{
  color: #2176ad;
  font-family: none;
  font-size: 20px;
}

/* mzsolutions */
.type_price01.mzsolutions tr td.img_box p{
  color: #67861e;
  font-family: none;
  font-size: 20px;
}

/* to_buy */
.to_buy{
  margin: 40px 0;
  padding: 20px 20px 15px;
  clear: both;
  border:1px solid #E9E9E9;
  background: #FAFAFA;
}
.to_buy p{
  float: left;
}
.to_buy p.btn_buy{
  float: right;
}
/* buy */
.btn_buy a{
  display: block;
  width: 161px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background: url(../../images/product/btn_buy.png) no-repeat;
}

.btn_buy a:hover{
  background: url(../../images/product/btn_buy.png) no-repeat -161px 0;
}
/* Learning Place*/
.learning_banner_area {
  padding: 30px 0 120px;
}

.learning_banner {
  display: block;
  width: 690px;
  height: 146px;
  background-image: url(../../images/product/item_bg_banner_learning.png);
  background-repeat: no-repeat;
}

.learning_banner:hover {
  background-position: 0 -146px;
}

/* コンテンツ上段 金額エリア */
.price_area {
  margin: 15px 0 40px;
  font-size: 20px;
  font-size: 2.0rem;
}
.price_area p{
  line-height: 35px;
  margin-left: 10px;
  float: right;
}
.price_area p:last-child{
  margin-top: 3px;
}

.callout {
  clear: both;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid #DFDFDF;
}


.learning_banner:hover {
  background-position: 0 -146px;
}

/* 共通
----------------------*/
/* 見出し */
.ttl_product_common {
  padding: 0 0 0 50px;
  color: #66AB16;
  font-family: 'Open Sans', sans-serif;
  font-size: 38px;
  font-size: 3.8rem;
}

.ttl_product_common span {
  color: #999;
  font-size: 20px;
  font-size: 2.0rem;
}

.columns .ttl_sa01,
.ttl_sa01,
.columns .ttl_product_sub,
.ttl_product_sub {
  line-height: 1.3em;
  margin: 0 0 10px;
  color: #314E64;
  font-family: "klavika-web",sans-serif;
  font-weight: 200;
  font-size: 22px;
  font-size: 2.2rem;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
  text-rendering: optimizeLegibility;
}

.top-content h4 {
  margin: 10px 0 20px;
  font-size: 18px;
  font-size: 1.8rem;
  color: #314E64;
}

.ext_js_column h3 {
  line-height: 20px;
  margin: 0 0 4px;
  color: #314E64;
  font-weight: bold;
  font-size: 16px;
  font-size: 1.6rem;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
  text-rendering: optimizelegibility;
}

#triH3 {
  margin-bottom: 10px;
  color: #66AB16;
  font-family: "klavika-web",sans-serif;
  font-weight: 200;
  font-size: 36px;
  font-size: 3.6rem;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
  text-rendering: optimizelegibility;
}

.cart-list th a, .cart-actions th a {
  line-height: 16px;
  color: #314E64;
  font-weight: bold;
  font-size: 14px;
  font-size: 1.4rem;
}

/* コンテンツ最上段  */
.top-content h3 {
  margin-bottom: 8px;
  color: #314E64;
  font-family: "klavika-web",sans-serif;
  font-weight: 200 !important;
  font-weight: normal;
  font-size: 28px;
  font-size: 2.8rem;
  -webkit-animation-name: fade-in;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0.2s;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-animation-name: fade-in;
  -moz-animation-duration: 0.5s;
  -moz-animation-fill-mode: both;
  -moz-animation-delay: 0.2s;
}

.top-content p {
  margin: 0 0 20px;
  color: #888;
  font-size: 12px;
  font-size: 1.2rem;
  -webkit-animation-name: fade-in;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0.3s;
  -webkit-transform: translate3d(0,0,0);
  -moz-animation-name: fade-in;
  -moz-animation-duration: 0.5s;
  -moz-animation-fill-mode: both;
  -moz-animation-delay: 0.3s;
}

.top-content {
  color: #434343;
  font-size: 16px;
  font-size: 1.6rem;
}

.top-content .video {
  margin-right: 18px;
}

.top-content .left {
  display: block;
  float: left;
  -webkit-animation-name: pop-in;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-animation-name: pop-in;
  -moz-animation-duration: 0.5s;
  -moz-animation-fill-mode: both;
  -moz-animation-delay: 0s;
}

.top-content .video img {
  vertical-align: top;
}

/* ナビ */
#secondary-nav {
  margin: 0 0 30px;
  text-align: center;
  -webkit-animation-name: fade-in;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0.4s;
  -webkit-transform: translate3d(0,0,0);
  -moz-animation-name: fade-in;
  -moz-animation-duration: 0.5s;
  -moz-animation-fill-mode: both;
  -moz-animation-delay: 0.4s;
}

#secondary-nav ul {
  display: inline-block;
  margin: 0;
}

#secondary-nav li.active {
  background-color: #EBF7FF;
  background-image: none;
}

#secondary-nav li:first-child {
  margin-left: 0;
  border-left: 1px solid #DDD;
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

#secondary-nav li {
  float: left;
  height: 34px;
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  background-repeat: no-repeat;
  background-position: 0 50%;
}

#secondary-nav li:hover {
  background: #F9F9F9;
}

#secondary-nav li.active {
  background-color: #EBF7FF;
  background-image: none;
}

#secondary-nav li.active a {
  background: url(../../images/product/nav-sub-arrow.png) no-repeat 50% 100%;
}

#secondary-nav li:first-child a {
  margin-left: 0 !important;
}

#secondary-nav a {
  display: block;
  height: 37px;
  line-height: 1.3em;
  padding: 8px 20px 0;
  color: #126499;
  font-size: 16px;
  font-size: 1.6rem;
  text-decoration: none;
}

#secondary-nav.secondary-nav-ajust a {
  font-size: 11px;
  font-size: 1.1rem;
}

#secondary-nav li a:hover {
  color: #314E64;
}

#secondary-nav li.last {
  border-right: 1px solid #DDD;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

nav.local_nav {
  margin-bottom: 50px;
//  padding-top: 40px;
}

/* 角丸 */
.rounded, pre, .top-list a, .ux-widget .icon img, .preview, .preview img {
  border-radius: 5px;
}

/* ページ遷移ボタン */
.pagination {
  position: relative;
  line-height: 1.0;
  vertical-align: middle;
  overflow: hidden;
  margin: 12px 0 36px;
  padding: 15px 0 16px;
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
  color: #686868;
  font-weight: bold;
  text-align: right;
}

/* 見出し下のボタングループ */
.btn_g {
  margin: 0 0 40px;
}

/* ボタン */
a.button-link,
.button-link {
  line-height: 1.0em;
  /*vertical-align: middle;*/
  margin-left: 5px;
  padding: 6px 8px 9px;
  border: 1px solid #477A09;
  border-color: #274807 !important;
  color: white;
  font-family: "Helvetica Neue",Arial,"Lucida Grande",sans-serif;
  font-weight: bold;
  font-size: 15px;
  font-size: 1.5rem;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  background: url(../../images/product/button-bg-scf5487bc26.png) no-repeat;
  background-color: #4C8E0E;
  background-repeat: repeat-x !important;
  background-position: 0 -152px;
  border-radius: 3px;
  background-clip: padding-box;
  -o-background-clip: padding;
  -ms-background-clip: padding;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
}

a.button-link:hover {
  text-decoration: none;
  background-color: #38690A;
  background-position: 0 -190px;
}

a.button-link.shadow,
.button-link.shadow {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

a.button-link.blue,
.button-link.blue {
  border-color: #80B1D3 !important;
  color: #516F83;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  background-color: #B9D4E7;
  background-repeat: repeat-x !important;
  background-position: 0 -228px;
}

a.button-link.blue:hover {
  color: #344754;
}

a.button-link.arrow span,
.button-link.arrow span {
  padding-right: 20px;
  background: url(../../images/product/link-down-arrow.png) center right no-repeat;
}

.button-link.arrow.next span {
  padding-right: 20px;
  background: url(../../images/product/extjs/link-arrow-next.png) center right no-repeat;
}

.button-link.grey {
  border-color: #C2C2C2 !important;
  color: #516F83;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  background-color: #E8E8E8;
  background-repeat: repeat-x !important;
  background-position: 0 -339px;
}

.button-link.grey:hover {
  background-color: #D4D4D4;
  background-position: 0 -374px;
}

.button-link.small {
  padding: 4px 10px 6px;
  color: #FFFFFF;
  font-size: 12px;
  font-size: 1.2rem;
  border-radius: 3px;
}

.button_example {
  padding: 5px 20px;
  border: 1px solid #274807;
  color: #FFFFFF;
  font-family: arial, helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
  text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
  background-color: #93C33C;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #93C33C), color-stop(100%, #5D9D15));
  background-image: -webkit-linear-gradient(top, #93C33C, #5D9D15);
  background-image: -moz-linear-gradient(top, #93C33C, #5D9D15);
  background-image: -ms-linear-gradient(top, #93C33C, #5D9D15);
  background-image: -o-linear-gradient(top, #93C33C, #5D9D15);
  background-image: linear-gradient(top, #93C33C, #5D9D15);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#93C33C, endColorstr=#5D9D15);
}

.button_example:hover {
  border: 1px solid #274807;
  background-color: #79B52E;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#79B52E), color-stop(100%, #44820F));
  background-image: -webkit-linear-gradient(top, #79B52E, #44820F);
  background-image: -moz-linear-gradient(top, #79B52E, #44820F);
  background-image: -ms-linear-gradient(top, #79B52E, #44820F);
  background-image: -o-linear-gradient(top, #79B52E, #44820F);
  background-image: linear-gradient(top, #79B52E, #44820F);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#79B52E, endColorstr=#44820F);
}

/* アニメーション */
.popIn {
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: pop-in;
}

/* フォント */
.blue a {
  color: #126499;
  font-weight: bold;
  font-size: 14px;
  font-size: 1.4rem;
}

/* 購入用ボタンエリア */
#bigBuyButton {
  width: 690px;
  height: 122px;
  margin: 66px 0 40px;
  padding: 28px 28px 0 150px;
  background: url(../../images/product/bigbuybutton-architect.png) no-repeat;
}

#bigBuyButton .download {
  float: left;
  width: 170px;
}

#bigBuyButton .buy_btn_space {
  float: left;
  margin: 0 30px 0 0;
}

#bigBuyButton a {
  text-decoration: none;
}

#bigBuyButton h3 {
  margin: 0;
  font-size: 16px;
}

/* 区切り線 */
.range_line {
  outline: none;
  height: 1px;
  border: none;
  color: #E0E0E0;
  background: url(../../images/product/hr870.png) #E0E0E0 10% 0;
}

.range_line_space01 {
  margin: 33px auto;
}

.range_line_space02 {
  margin: 0 auto 33px;
}

hr.fade870 {
  margin: 66px auto;
}

/* メタ文章 */
.meta {
  min-height: 70px;
  height: auto !important;
  height: 70px;
  color: #8F8F8F;
  font-style: normal;
}

.meta a {
  color: #8F8F8F;
  font-style: normal;
}


/* カラム */
.columns.three .column {
  width: 200px;
}

.column p, .auto_column p {
  margin-bottom: 12px;
}

.columns.three .column {
  margin-right: 45px;
}

.columns.three .column:last-child {
  margin-right: 0;
}

.columns.three h4 {
  line-height: 16px;
  margin-top: 1em;
  margin-bottom: 4px;
  color: #314E64;
  font-weight: bold;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
  text-rendering: optimizelegibility;
}

.columns.three .meta {
  text-align: center;
}

.columns.two .alignleft {
  display: block;
  float: left;
  margin: 0 16px 12px 0;
}

.columns.two .column:first-child {
  margin-right: 40px;
}

.columns.two .column {
  width: 324px;
}

.columns.two .column02 {
  width: 450px;
}

.column, .auto_column {
  float: left;
}

.columns h3 {
  line-height: 20px;
  margin: 0 0 4px;
  color: #314E64;
  font-weight: bold;
  font-size: 16px;
  font-size: 1.6rem;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
  text-rendering: optimizeLegibility;
}

/* サイドバー */
.callout h3 {
  margin-top: 0.25em;
}

.callout.blue {
  border: 1px solid #C7D1D8;
  background-color: #ECF5FC;
}

.callout.plain {
  background-image: none;
}

.callout {
  clear: both;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid #DFDFDF;
}

.callout article {
  position: relative;
  padding: 15px 0 15px;
  border-top: 1px solid #DFDFDF;
}

.columns.layout .sidebar {
  float: right;
  width: 200px;
}

.columns.layout .sidebar .callout {
  padding: 11px;
  background-image: none;
}

.callout.gray {
  border: 1px solid #DDDDDD;
  background-color: #EEEEEE;
}

.callout {
  clear: both;
  margin-bottom: 18px;
}

/* フロート */
.left, .alignleft, .glossy_left {
  display: block;
  float: left;
  margin-right: 16px;
  margin-bottom: 12px;
}

.alignright {
  display: block;
  float: right;
  margin: 0 0 12px 16px;
}

/* アイコン */
a.more-icon {
  background: url(../../images/product/png.png) no-repeat right center;
}

a.more-icon, #news-container ul li a, a.vid-icon, a.pdf-icon, a.doc-icon {
  padding-right: 16px;
  color: #126499;
  font-weight: bold;
  font-size: 12px;
}

/* 一覧 */
ul.product_list {
  float: left;
  width: 48%;
  padding: 20px 0 0;
}

ul.product_list_right {
  float: right;
}

ul.product_list li {
  margin: 0 0 10px;
  padding: 10px 0;
}

ul.product_list li.comp {
  background: url(../../images/product/comp.png) no-repeat left 0;
}

ul.product_list li.archi {
  background: url(../../images/product/archi.png) no-repeat left 0;
}

ul.product_list li.extjs {
  background: url(../../images/product/extjs.png) no-repeat left 0;
}

ul.product_list li.gxt {
  background: url(../../images/product/gxt.png) no-repeat left 0;
}

ul.product_list li.io {
  background: url(../../images/product/io.png) no-repeat left 0;
}

ul.product_list li.compt {
  background: url(../../images/product/compt.png) no-repeat left 0;
}

ul.product_list li.desktop {
  background: url(../../images/product/icon_desk.png) no-repeat left 3px;
}

ul.product_list li.touch {
  background: url(../../images/product/touch.png) no-repeat left 0;
}

ul.product_list li.anim {
  background: url(../../images/product/anim.png) no-repeat left 0;
}

ul.product_list li.core {
  background: url(../../images/product/core.png) no-repeat left 0;
}

ul.product_list li.mobile {
  background: url(../../images/product/icon_mobile.png) no-repeat left 0;
}

ul.product_list li a {
  padding: 0 0 0 45px;
  font-weight: bold;
  font-size: 16px;
  font-size: 1.6rem;
}

/* bullet_checked */
ul.bullet_checked li {
  margin: 0 0 5px;
  padding: 0 0 0 25px;
  background: url(../../images/product/bullet_checked.png) no-repeat left 0;
}

/* bullet_arrow */
ul.bullet_arrow li {
  margin: 0 0 5px;
  padding: 0 0 0 18px;
  background: url(../../images/product/bullet_arrow.png) no-repeat left 0;
}

ul.bullet_arrow li a{
    color: #2176ad
}

/* EoS */