* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */

@font-face {
  font-family: "mplus";
  src: url('/assets/font/mplus-1p-thin.eot');
  src: url('/assets/font/mplus-1p-thin.eot?#iefix') format('embedded-opentype'), url("/assets/font/mplus-1p-thin.woff") format("woff"), url("/assets/font/mplus-1p-thin.ttf") format("truetype");
  font-weight: 300; }
@font-face {
  font-family: "mplus";
  src: url('/assets/font/mplus-1p-light.eot');
  src: url('/assets/font/mplus-1p-light.eot?#iefix') format('embedded-opentype'), url("/assets/font/mplus-1p-light.woff") format("woff"), url("/assets/font/mplus-1p-light.ttf") format("truetype");
  font-weight: 400; } /*normal*/
@font-face {
  font-family: "mplus";
  src: url('/assets/font/mplus-1p-regular.eot');
  src: url('/assets/font/mplus-1p-regular.eot?#iefix') format('embedded-opentype'), url("/assets/font/mplus-1p-regular.woff") format("woff"), url("/assets/font/mplus-1p-regular.ttf") format("truetype");
  font-weight: 700; } /*bold*/

/*  
@font-face {
  font-family: "mplus";
  src: url('/assets/font/mplus-1p-medium.eot');
  src: url('/assets/font/mplus-1p-medium.eot?#iefix') format('embedded-opentype'), url("/assets/font/mplus-1p-medium.woff") format("woff"), url("/assets/font/mplus-1p-medium.ttf") format("truetype");
  font-weight: 800; }
@font-face {
  font-family: "mplus";
  src: url('/assets/font/mplus-1p-bold.eot');
  src: url('/assets/font/mplus-1p-bold.eot?#iefix') format('embedded-opentype'), url("/assets/font/mplus-1p-bold.woff") format("woff"), url("/assets/font/mplus-1p-bold.ttf") format("truetype");
  font-weight: 900; }
*/

html, button, input, select, textarea, code, 
.pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
    font-family: "mplus", "Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
    font-weight:  700;
} 

body {
  line-height: 1.5em;
  color: #717171;
  font-size: 14px;
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #f7f7f7;
	font-family: "mplus", "Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
	font-weight: 700;
}

.ua-ie-8 body {
    line-height: 1.5em;
    color: #717171;
    font-size: 14px;
	margin: 0; 
	padding: 0; 
	height: 100%; 
	background-color: #f7f7f7; 
	min-width:1024px; /*add ie7,8では固定幅*/
	font-family: "mplus", "Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
	font-weight: 700;
	}

  @media print, screen and (min-width: 0) {
    body {
      font-size: 14px; } }
  @media print, screen and (min-width: 993px) {
    body {
      font-size: 14.5px; }
    .m-r-25p-mw993 {
      margin-right: 25%; } }
  @media print, screen and (min-width: 1280px) {
    body {
      font-size: 15px; } }

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address font sizes and margins set differently in IE 6/7.
 * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.67em;
    margin: 2.33em 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
    color: #717171;
    line-height: 1.1;
    font-weight: bold;
}

h1{ line-height:1.2;}

a { text-decoration: none; color: #717171;}

p { color:#717171; line-height: 1.5;} 

b { font-weight: bold;}

sup { top: 0; vertical-align: super; }

.pure-img {
    max-width: 100%;
    width:100%;
    height: auto;
    display: block;
}

.pure-img-responsive {
    width: 100%;
    height: auto;
}

.pure-img-half {
    max-width: 50%;
		width:50%;
    height: auto;
}


#search-box { /*add*/
		display:block;
        position: relative;
        width: 100%;
	    /*width: 100%;*/
        margin:10px auto;
		margin-top:20px;
	    /*margin: 0;*/
	    background-color:;
    }
#search-form {
    height: 30px;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
}
#search-text {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
	height: 30px; /*add*/
	line-height: 30px; /*add*/
}
#search-box input[type="text"] {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #333;
    outline: none;
}
#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 30px;
    width: 30px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    border-width: 0;
    background-color: #a6b1ba;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
}

.state01 {
	color: red; 
}

.state02 {
	color: yellow; 
}
.state03 {
	color: green; 
}


/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */

/* 
.l-box-s {
    padding: 0.5em;
	word-wrap: break-word;
	word-break:break-all;
}
.l-box {
    padding: 1em;
	word-wrap: break-word;
	word-break:break-all;
}
.gap {
  margin: 1em;
	padding: 1em;
	word-wrap: break-word;
	word-break:break-all;
}
*/

.is-center { text-align: center;}
.is-left{ text-align:left;}
.is-right{ text-align:right;}

.fl-left{ float:left;}
.fl-right{ float:right;}
.fl-none { float: none;}

.is-left-to-center{ text-align:left;}
.is-center-to-left{ text-align:center;}
.is-center-to-right{ text-align:center;}
.is-left-to-right{ text-align:left;}
@media (max-width:600px){
.is-left-to-center{ text-align:center;}
.is-center-to-left{ text-align:left;}
.is-center-to-right{ text-align:right;}
.is-left-to-right{ text-align:right;}
}

/*
-- Landing Box height adjust --
 */
.box-height-big{height:; overflow:hidden; position:relative;}
.box-height-long{height:400px; overflow:hidden; position:relative;}
.box-height-half{height:200px; overflow:hidden; position:relative;}
.box-height-half-to-long{height:200px; overflow:hidden; position:relative;}
@media (max-width:600px){
.box-height-big{height:400px; overflow:hidden; position:relative;}
.box-height-long{height:300px; overflow:hidden; position:relative;}
.box-height-half{height:150px; overflow:hidden; position:relative;}
.box-height-half-to-long{height:300px; overflow:hidden; position:relative;}
}

.table-height-long{height:400px; overflow-y:scroll; position:relative;}
.table-height-half{height:200px; overflow-y:scroll; position:relative;}
.table-height-half-to-long{height:200px; overflow-y:scroll; position:relative;}
@media (max-width:600px){
.table-height-long{height:300px; overflow-y:scroll; position:relative;}
.table-height-half{height:150px; overflow-y:scroll; position:relative;}
.table-height-half-to-long{height:300px; overflow-y:scroll; position:relative;}
}



.fw_normal { font-weight: normal;}
.fw_bold { font-weight: bold;}

.fs-10 { font-size: 10px;}
.fs-11 { font-size: 11px;}
.fs-12 { font-size: 12px;}
.fs-13 { font-size: 13px;}
.fs-14 { font-size: 14px;}
.fs-145 { font-size: 14.5px;}
.fs-15 { font-size: 15px;}
.fs-16 { font-size: 16px;}
.fs-17 { font-size: 17px;}
.fs-18 { font-size: 18px;}
.fs-20 { font-size: 20px;}
.fs-22 { font-size: 22px;}
.fs-32 { font-size: 32px;}
.fs-36 { font-size: 36px;}
.fs-40 { font-size: 40px;}

.fs-06em { font-size: .6em;}
.fs-07em { font-size: .7em;}
.fs-08em { font-size: .8em;}
.fs-09em { font-size: .9em;}
.fs-1em { font-size: 1em;}
.fs-12em { font-size: 1.2em;}
.fs-15em { font-size: 1.5em;}
.fs-2em { font-size: 2em;}
.fs-25em { font-size: 2.5em;}
.fs-3em { font-size: 3em;}
.fs-4em { font-size: 4em;}
.fs-5em { font-size: 5em;}

.lh_10 { line-height: 1;}
.lh_11 { line-height: 1.1;}
.lh_12 { line-height: 1.2;}
.lh_13 { line-height: 1.3;}
.lh_14 { line-height: 1.4;}
.lh_15 { line-height: 1.5;}
.lh_16 { line-height: 1.6;}
.lh_17 { line-height: 1.7;}
.lh_18 { line-height: 1.8;}
.lh_19 { line-height: 1.9;}
.lh_20 { line-height: 2;}
.va_top { vertical-align: top;}
.va_middle { vertical-align: middle;}
.va_bottom { vertical-align: bottom;}


/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
	.pure-form .pure-radio {
    margin: 0.5em 0;
    display: inline;
}




/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
 
.pure-btn {
    /* Structure */
    display: inline-block;
    *display: inline; /*IE 6/7*/
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: baseline;
    text-align: center;
    /*cursor: pointer;*/
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Firefox: Get rid of the inner focus border */
.pure-btn::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/*csslint outline-none:false*/

.pure-btn {
    font-family: inherit;
    font-size: 100%;
    *font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/
    *overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */
    padding: 0.5em 1em;
    color: #444; /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.80); /* rgba supported */
    *color: #444; /* IE 6 & 7 */
    border: 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    background-color: #E6E6E6;
    text-decoration: none;
    border-radius: 2px;
	margin:0.5em;
}

.pure-btn-hover,
.pure-btn:hover,
.pure-btn:focus {
    filter: none;
    background-image: none;
    background-image: none;
    background-image: none;
    background-image: none;
    background-image: none;
}
.pure-btn:focus {
    outline: 0;
}
.pure-btn-active,
.pure-btn:active {
    box-shadow: none;
}

.pure-btn[disabled],
.pure-btn-disabled,
.pure-btn-disabled:hover,
.pure-btn-disabled:focus,
.pure-btn-disabled:active {
    border: none;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    filter: alpha(opacity=40);
    -khtml-opacity: 0.40;
    -moz-opacity: 0.40;
    opacity: 0.40;
    cursor: not-allowed;
    box-shadow: none;
}

.pure-btn-hidden {
    display: none;
}

/* Firefox: Get rid of the inner focus border */
.pure-btn::-moz-focus-inner{
    padding: 0;
    border: 0;
}
.btn-xsmall {
            font-size: 70%;
        }

        .btn-small {
            font-size: 85%;
        }

        .btn-large {
            font-size: 110%;
        }

        .btn-xlarge {
            font-size: 125%;
        }
.icon-btn-link:before { content: "\f103"; font-size: 1.4em; vertical-align: middle; padding-left: 10px;}
.icon-btn-exlink:before { content: "\f08e"; font-size: 1.4em; vertical-align: middle; padding-left: 10px;}
.icon-btn-file:before { content: "\f0f6"; font-size: 1.4em; vertical-align: middle; padding-left: 10px;}
.icon-btn-sds:before { content: "\f002"; font-size: 1.4em; vertical-align: middle; padding-left: 10px;}
.icon-btn-contact:before { content: "\f0e0"; font-size: 1.4em; vertical-align: middle; padding-left: 10px;}


.wrap{
	display:inline-block;/* Mozilla */
	white-space: -moz-pre-wrap; 
	/* CSS3 */
	white-space: pre-wrap; 
	/* IE 5.5+ */
	word-wrap: break-word;
	word-break:break-all;
	}

/*
 * -- CONTENT STYLES --
 * This represents the content area (everything below the blue section)
 */
.content-wrapper {
    /* These styles are required for the "scroll-over" effect */
    position: absolute;
    top: 87%;
    width: 100%;
    min-height: 12%;
    z-index: 2;
    background:;
}

.pagetop {
	display: none;
	position: fixed;
	bottom: 10px;
	right: 20px;
	z-index:999999;
}
.pagetop a {
	display: block;
	width: 44px;
	height: 44px;
	/*background-color: #1d3c4f;*/
	background-color: rgba(94, 190, 188, 0.85);
	border-radius: 44px;
	text-align: center;
	color: #fff;
	font-size: 23px;
	text-decoration: none;
	line-height: 44px;
}

.breadcrumbs {padding: .2em 1em; position:relative; font-size: .9em; color: #f7f7f7; line-height: 1.8em; word-wrap: break-word; word-break:break-all;}
@media (max-width:600px){
.breadcrumbs {padding: .4em 1em; position:relative; font-size: .8em; color: #f7f7f7; line-height: 1.5em;}
}
.breadcrumbs a { color: #f7f7f7;}
.breadcrumbs a:hover { text-decoration: underline;}
.breadcrumbs .active { color: #66be95;}

.heading {position:relative; height:6em; margin-bottom:1em;}
.heading-title {position:absolute; bottom:0; left:1em; line-height: 1.2;}
.heading-sign {position:absolute; bottom:25%; right:1em;}
.heading-hr {position:absolute; bottom:.7em;}
@media (max-width:600px){
.heading {height:7em;}
}

.drop-caps-5 { float:left; font-size: 5em; line-height: 1; padding:5px;}
.drop-caps-4 { float:left; font-size: 4em; line-height: 1; padding:4px;}
.drop-caps-3 { float:left; font-size: 3em; line-height: 1; padding:3px;}
.drop-caps-2 { float:left; font-size: 2em; line-height: 1; padding:2px;}

hr {
  border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    /*border-bottom: 1px solid rgba(255, 255, 255, 0.3);*/
    }

blockquote {
  background: #eee url(../img/common/quote.gif) no-repeat 10px 10px;
  padding: 25px;
}
.menuRibbon {
	margin:0 0 10px 0;
	padding:2px 8px;
	background:#717171;/*#029EBC*/
	color:#FFF;/*#EBF7FA*/
	line-height:140%;
	font-weight:bold;
}

.menuRibbonLight {
	margin:0 0 10px 0;
	padding:2px 8px;
	background:#80CEDD;
	color:#017589;
	line-height:140%;
	font-weight:bold;
}

.menuTab {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 0 5px;
	border-color: #717171;
	border-style:solid;
	background:;
	color:#717171;
	line-height:1.2;
	font-weight:bold;
}
.menuTabNomal {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 0 5px;
	border-color: #717171;
	border-style:solid;
	background:;
	color:#717171;
	line-height:1.2;
	font-weight:normal;
}


.menuTabLight {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 0 5px;
	border-color:#029EBC;
	border-style:solid;
	background:#80CEDD;
	color:#017589;
	line-height:140%;
	font-weight:bold;
}

.menuTabDouble {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 5px;
	border-color: #80CEDD;
	border-style:solid;
	background:#029EBC;
	color:#EBF7FA;
	line-height:140%;
	font-weight:500;
	text-align:center;
}

.menuTabDoubleLight {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 5px;
	border-color:#029EBC;
	border-style:solid;
	background:#80CEDD;
	color:#017589;
	line-height:140%;
	font-weight:500;
	text-align:center;
}

.menuLine {
	margin:0 0 10px 0;
	padding:2px;
	border-width:0 0 5px 0;
	border-color: #717171;
	border-style:solid;
	background:;
	color:;
	line-height:140%;
	font-weight:bold;
}

.menuLineLight {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 2px 0 ;
	border-color:#717171;
	border-style:solid;
	background:;
	color:;
	line-height:140%;
	font-weight:bold;
}

.menuLineDouble {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:5px 0;
	border-color: #717171;
	border-style:solid;
	background:;
	color:#717171;
	line-height:140%;
	font-weight:bold;
	text-align:;
}

.menuLineDoubleLightW {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:5px 0;
	border-color:#029EBC;
	border-style:solid;
	background:#fff;
	color:#017589;
	line-height:140%;
	font-weight:bold;
	text-align:center;
}

.menuLineDoubleLight {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:5px 0;
	border-color:#029EBC;
	border-style:solid;
	background:#80CEDD;
	color:#017589;
	line-height:140%;
	font-weight:bold;
	text-align:center;
}

.menuLineLightW {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 5px 0 ;
	border-color:#029EBC;
	border-style:solid;
	background:#fff;
	color:#017589;
	line-height:140%;
	font-weight:bold;
}

.progress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
  color: #849397;
}
.progress > li {
  position: relative;
  display: table-cell;
  text-align: center;
  font-size: 0.8em;
}
.progress > li:before {
  content: attr(data-step);
  display: block;
  margin: 0 auto;
  background: #DFE3E4;
  width: 3em;
  height: 3em;
  text-align: center;
  margin-bottom: 0.25em;
  line-height: 3em;
  border-radius: 100%;
  position: relative;
  z-index: 1000;
}
.progress > li:after {
  content: '';
  position: absolute;
  display: block;
  background: #DFE3E4;
  width: 100%;
  height: 0.5em;
  top: 1.25em;
  left: 50%;
  margin-left: 1.5em\9;
  z-index: -1;
}
.progress > li:last-child:after {
  display: none;
}
.progress > li.is-complete {
  color: #2ECC71;
}
.progress > li.is-complete:before, .progress > li.is-complete:after {
  color: #FFF;
  background: #2ECC71;
}
.progress > li.is-active {
  color: #1a237e;
}
.progress > li.is-active:before {
  color: #FFF;
  background: #1a237e;
}

dl.specification { padding-left:10px; }
dl.specification dt, dl.specification dd { display: table-cell !important; }
dl.specification dt {
  width: 20%;
  float: left;
}
dl.specification dd {
  width: 80%;
}
@media (max-width:600px){
dl.specification dt, dl.specification dd { width: 100%; }
}

.contact {
  text-align: center;
  margin-top: 40px;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #999;
  padding-top: 10px;
  padding-bottom: 10px;
}
.contact .logo_tnsc {
  width: 190px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
}


/**
 * Needed for IE8
 */
.progress__last:after {
  display: none !important;
}

/**
 * Size Extensions
 */
.progress--medium {
  font-size: 1.5em;
}

.progress--large {
  font-size: 2em;
}

table.th-blue-si-2 th { background-color: #74C3D7; color: #fff;}
table.th-green-si-2 th { background-color: #5bc485; color: #fff;}
table.th-gray-si-2 th { background-color: #717171; color: #fff;}

table.table-layout-fixed { table-layout: fixed; width: 100%;}

.pure-table-bordered .bordered th { border-bottom: 1px solid #cbcbcb;}

.pure-table-bordered  th.bd-l-1 { border-left-width: 1px; }

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 
@media (min-width: 48em) {

    body {
        font-size: 14.5px;
    }

/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 
@media (min-width: 78em) {
}
*/