@charset "utf-8";

/* last-update: 20180214 */

/* ------------------------------------
	common.css: I N D E X
------------------------------------
- overwrite: _assets

- common css
	- reset (clearfix, base)
	- common:
		contents, headerMenu,
		right-nav (first hierarchy), floatNav

- index css
	- top slide
	- main
	- news
	- serch
	- contact
	- service
	- banner
	- caution

- news css
	- index
	- details: menu, contents, column

- product css
	- index
	- headerMenuWhite
	- sp_title
	- index
	- product: right-nav
	- details: index, intro, merit, catalog

- catalog css
------------------------------------ */


/* --------- overwrite: _assets --------- */
.st-GlobalInner {
  max-width: 100%;
  padding: 0;
}
.st-GlobalNav_Area .st-GlobalInner {
    position: absolute;
}

#catalog .a0319_a1,#product .a0319_a1{width:680px;}
#catalog .a0319_a2,#product .a0319_a2{width:98%; padding-left: 2%; margin:60px 0 20px 0; background:#333333; color:#ffffff; height:33px; line-height:33px; font-size:16px;}
#catalog .a0319_a3,#product .a0319_a3{width:100%; clear:both;}
#catalog .a0319_a3 ul li,#product .a0319_a3 ul li{float:left; width:23%; margin:0 2.5% 2% 0;}
#catalog .a0319_a3 ul li:nth-child(4n),#product .a0319_a3 ul li:nth-child(4n){margin:0 0 2% 0;}
@media screen and (max-width: 640px) {
	#catalog .a0319_a1,#product .a0319_a1{width:100%;}
	#catalog .a0319_a3 ul li,#product .a0319_a3 ul li{width:32%; margin:0 2% 2% 0;}
	#catalog .a0319_a3 ul li:nth-child(4n),#product .a0319_a3 ul li:nth-child(4n){margin:0 2% 2% 0;}
	#catalog .a0319_a3 ul li:nth-child(3n),#product .a0319_a3 ul li:nth-child(3n){margin:0 0 2% 0;}
}

/* -----------------------------------------------------------------
	common css
----------------------------------------------------------------- */
/* --------- reset --------- */
#contents *, #contents *:before, #contents *:after {
    /* box-sizing: inherit; */ /* overwrite: _assets */
    box-sizing: content-box;
}

body, #contents div, #contents dl, #contents dt, #contents dd,
#contents ul, #contents ol, #contents li,
#contents h1, #contents h2, #contents h3, #contents h4, #contents h5, #contents h6,
#contents pre, #contents form, #contents fieldset, #contents input, #contents textarea, #contents p, #contents blockquote{
padding:0;
margin:0;
}
#contents fieldset, #contents img{
border:0;
}
#contents div{
display:block;
}
#contents address, #contents caption, #contents cite, #contents code,
#contents dfn, #contents em, #contents strong, #contents th, #contents var{
font-weight:normal;
font-style:normal;
}
#contents ol, #contents ul{
list-style:none;
}
#contents caption, #contents th{
text-align:left;
}
#contents h1, #contents h2, #contents h3, #contents h4, #contents h5, #contents h6{
font-weight:normal;
font-size:100%;
}
#contents q:before, #contents q:after{
content:'';
}
#contents abbr, #contents acronym{
border:0;
}
#contents img{
vertical-align: bottom;
}
#contents input, #contents select, #contents textarea{
font-size:100%;
font-family:inherit;
}

/* clearfix */
.clearfix {
display:inline-block;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}

/* link */
#contents a:link { color:#1780c4; text-decoration:none; }
#contents a:visited { color:#1780c4; text-decoration:none; }
#contents a:hover { color:#1780c4; text-decoration:underline; }




/* --------- common: contents --------- */
body #contents{
	line-height:1.5;
	color:#555555;
	margin:0 auto;
}
#contents h1{
	color:#ffffff;
	font-size:21px;
	padding:5px 0 5px 10px;
	font-weight:bold;
}
#contents {
	background-color:#ffffff;
	width:100%;
}
#contents a:link, #contents a:visited {
	text-decoration:none;
	color:#2a96e1;
}
#contents a:hover, #contents a:active {
	text-decoration:underline;
	color:#2a96e1;
}
#contents #index,
#contents #news,
#contents #catalog,
#contents #product {
	margin:40px auto 50px auto;
	max-width:950px;
	text-align:left;
	z-index:0;
}
#contents .main {
	float:left;
	width:680px;
	text-align:left;
	word-break:normal;
}

@media screen and (max-width: 640px) {
	body #contents,
	#contents,
	#contents #index,
	#contents #news,
	#contents #catalog,
	#contents #product{
		float:none;
		width:92%;
		margin:40px auto 0 auto;
	}
}


/* --------- common: headerMenu --------- */
#contents #headerMenu{
	background-color:#ffffff;
	width:100%;
	height:37px;
	position:relative;
	z-index:500;
}
#contents #menu{
	width:100%;
	max-width:950px;
	margin:0 auto;
	padding:0;
	text-align:center;
	background-image:url("../images/menu_line.gif");
	background-repeat:no-repeat;
	background-position:left center;
}
#contents #menu ul{
	display:table;
	position:absolute;
	text-align:left;
}
#contents #menu li{
	background-image:url("../images/menu_line.gif");
	background-repeat:no-repeat;
	background-position:right center;
	float:left;
	display:table-cell;
	max-width:188px;
	width:20%;
	margin:0;
}
#contents #menu li:first-child{
	border-left:none;
}
#contents #menu li a{
	display:block;
	padding:15px 0;
	color:#333333;
	font-size:14px;
	text-decoration:none;
}
#contents #menu .level1 > a:hover {
	color:#1780c4;
}

#contents #menu .level2{
	display:none;
	overflow:hidden;
	border-top:solid 1px #ccc;
	border-left:solid 1px #ccc;
	border-right:solid 1px #ccc;
}
#contents #menu ul.level2,
#contents #menu ul.level2 li{
	box-sizing:inherit!important;
	list-style-type:none!important;
	list-style:none!important;
	list-style-position:outside!important;
	list-style-image:none!important;
}
#contents #menu .level2 li{
	display:block;
	float:none;
	z-index:500;
	width:auto;
	height:auto;
	background-color:#fafafa;
	background-image:url("../images/icon_arw.png");
	background-repeat:no-repeat;
	background-position:10% 22px;
    background-size:5%;
	border-bottom:solid 1px #ccc;
}
#contents #menu .level2 li a{
	display:inline-block;
	box-sizing:border-box;
	min-width:188px;
	padding:15px 0 15px 35px;
}
/* for Edge */
@supports (-ms-ime-align:auto) {
	#contents #menu .level2 li a{
		padding:15px 0 15px 35px;
	}
}
/* for IE11 */
@media all and (-ms-high-contrast:none){
	#contents #menu .level2 li a{
		padding:15px 0 15px 35px;
	}
}

#contents #menu .level2 li:hover,
#contents #menu .level2 li:active{
	background-color:#ebf4fc;
}



/* --------- common: right-nav (first hierarchy) --------- */
#contents .nav{
	float:right;
	max-width:220px;
	text-align:left;
}
#contents .nav ul{
	width:220px;
}
#contents .nav ul.list{
	margin-bottom:13px;
}
#contents .nav .list li,
#contents .nav .bnr li{
	margin-bottom:7px;
	text-align:left;
}
#contents .nav .contact li{
	margin-bottom:20px;
}
#contents .nav .bnr li{
	margin-bottom:9px;
}
#contents .nav .bnr li a{color:#333;}
#contents .nav .bnr li .tr{color:#333; font-size:12px; line-height:22px; text-align:right;}
#contents .nav .contact a:hover,
#contents .nav .bnr a:hover{
	opacity:0.8;
}

@media screen and (max-width: 640px) {
	#contents .nav{
		float:none;
		width:100%;
		max-width:100%;
		text-align:left;
	}
	#contents .nav .contact{
		width:100%;
	}
	#contents .nav ul{
		width:100%;
		margin:0 auto;
	}
	#contents .nav .contact li,
	#contents .nav .bnr{
		margin-bottom:20px;
	}
	#contents .nav ul li img {
		max-width:100%;
		width:100%;
	}
}


/* --------- common: floatNav --------- */
#floatNav{
	display:block;
    position:fixed;
    right:-287px;
	width:327px;
    height:180px;
    z-index:600;
	color:#ffffff;
    transition:0.3s;
}
#floatNav a{
	color:#ffffff;
}
#floatNav:hover{
	width:327px;
    right:0;
}
#floatNav .floatNav-btn{
	display:block;
	width:40px;
    position:relative;
}
#floatNav .floatNav-banner{
    position:absolute;
    top:0;
    right:0;
	width:287px;
    height:179px;
    background-color:#e87769;
    z-index:600;
}

#floatNav .floatNav-btn .floatNav-icon {
    background-color:#df0522;
    border-radius:4px 0 0 0;
	padding:10px 0;
	border-bottom:1px solid #ea7666;
	text-align:center;
}
#floatNav .floatNav-btn .floatNav-contact {
	display:block;
    height:133px;
    background-color:#df0522;
    border-radius:0 0 0 4px;
	padding:15px 0 0 0;
	text-align:left;
}
#floatNav .floatNav-btn p {
	font-size:0.9375rem;
	-webkit-writing-mode:vertical-rl;
	    -ms-writing-mode:tb-rl;
          	writing-mode:vertical-rl;
    line-height:1;
  	letter-spacing:0.1em;
	position:absolute;
    top:77px;
    right:-3px;
}
/* for Edge */
@supports (-ms-ime-align:auto) {
	#floatNav .floatNav-btn p {
    	right:12px;
	}
}
/* for IE11 */
@media all and (-ms-high-contrast:none){
	*::-ms-backdrop, #floatNav .floatNav-btn p {
		right:12px;
	}
	*::-ms-backdrop, #floatNav .floatNav-banner{
	    height:180px;
	}
}

#floatNav .floatNav-banner ul{
	overflow:hidden;
	list-style:none;
	margin:0;
	padding:0;
}
#floatNav .floatNav-banner li{
	float:left;
	width:143px;
	height:55px;
    border-top:1px solid #f1aaa2;
    border-left:1px solid #f1aaa2;
}
#floatNav .floatNav-banner img{
	max-width:none;
	vertical-align:bottom;
}
#floatNav .floatNav-banner li:nth-child(2){
	width:100%;
}
#floatNav .floatNav-banner li:first-child{
	width:286px;
	height:124px;
}

@media screen and (max-width: 640px){
	#floatNav{
    	transition:0;
	}
	#floatNav:hover{
		width:327px;
    	right:-287px;
	}
	#floatNav .floatNav-btn .floatNav-icon a[href^="tel:"]{
		cursor:pointer;
	}
}



/* -----------------------------------------------------------------
	index css
----------------------------------------------------------------- */
/* ----- index: top slide ----- */

/* ========= #image_slider01 ========= */
#image_slider01{
  overflow: hidden;
  width: 100%;
  margin:0 auto;
}
#image_slider01 .bx-viewport{
  overflow:visible!important;
  max-width: 100%!important;
  left:0;
}
#image_slider01 .main-container{
  overflow:hidden;
}
#image_slider01 .bxslider1{
  list-style:none;
  margin:0;
  padding:0;
}
#image_slider01 .bxslider1 li{
  float:left;
  max-width: 100%!important;
  margin:0 1px;
  padding:0;
}
#image_slider01 .bx-wrapper .bx-prev,
#image_slider01 .bx-wrapper .bx-next{
  display:block;
}
#image_slider01 .bxslider1 li{
  opacity:0.5;
}
#image_slider01 .bxslider1 li.is-current{
  opacity:1;
}

#image_slider01 .bx-pager{
	text-align:center;
}
#image_slider01 .bx-pager .bx-pager-item{
	display:inline-block;
}
#image_slider01 .bx-pager .bx-pager-item a{
	display:block;
	width:12px;
	height:12px;
	margin:0 6px;
	text-indent:-9999px;
	background:url("../images/top_mainimage/nav_off.png") center center no-repeat;
}
#image_slider01 .bx-pager .bx-pager-item a.active{
	background:url("../images/top_mainimage/nav_on.png") center center no-repeat;
}
#image_slider01 .bx-controls-direction{
	display:none;
}

@media screen and (max-width: 640px){
	#image_slider01{
	  overflow:hidden;
	  max-width:100%!important;
	}
	#image_slider01 .bx-viewport{
	  max-width:100%!important;
	}
	#image_slider01 .main-container{
	  overflow:hidden;
	  padding-bottom:15px;
	}
	#image_slider01 .bxslider1{
	  list-style:none;
	  margin:0;
	  padding:0;
	}
	#image_slider01 .bxslider1 li{
      max-width:640px!important;
	  margin:0;
	  padding:0;
	}
	#image_slider01 .bx-wrapper .bx-viewport{
	  box-shadow:none;
	  border:none;
	  background:none;
	  left:0;
	}
	#image_slider01 .bx-wrapper .bx-prev,
	#image_slider01 .bx-wrapper .bx-next{
	  display:none;
	}
	#image_slider01 .bx-pager{
      padding-top:8px;
      text-align:center;
	}
	#image_slider01 .bx-pager .bx-pager-item{
      display:inline-block;
	}
	#image_slider01 .bx-pager .bx-pager-item a{
      display:block;
      width:12px;
      height:12px;
      margin:0 5px;
      text-indent:-9999px;
      background:url("../images/top_mainimage/nav_sp_off.png") center center no-repeat;
      background-size:20px 20px;
	}
	#image_slider01 .bx-pager .bx-pager-item a.active{
      background:url("../images/top_mainimage/nav_sp_on.png") center center no-repeat;
      background-size:20px 20px;
	}
	#image_slider01 .bx-controls-direction{
      display:none;
	}
}
@media screen and (max-width: 320px){
	#image_slider01 .bx-wrapper .bx-pager {
      bottom: -10px;
	}
	#image_slider01 .bx-pager .bx-pager-item a{
      display:block;
      width:10px;
      height:10px;
      margin:0 5px;
      text-indent:-9999px;
      background:url("../images/top_mainimage/nav_sp_off.png") center center no-repeat;
      background-size:12px 12px;
	}
	#image_slider01 .bx-pager .bx-pager-item a.active{
      background:url("../images/top_mainimage/nav_sp_on.png") center center no-repeat;
      background-size:12px 12px;
	}
}


/* ----- index: area ----- */
body #contents #index{
	margin:40px auto 30px auto;
	max-width:1110px;
	text-align:left;
	z-index:0;
}
body #contents #index .main-area{
	background-color:#ffffff;
}

@media screen and (max-width: 1110px){
	body #contents #index .main-area,
	body #contents div.contact .contact-index {
		padding:0 2%;
	}
}
@media screen and (max-width: 640px){
	body #contents{
		width:100%;
		margin:0 auto;
		background-color:#ffffff;
	}
	body #contents #index{
	    margin:20px auto 30px auto;
		width:100%;
	}
	body #contents #index .main-area{
		padding:0;
	}
}

/* ----- index: common ----- */
#contents #index .search-ttl,
#contents #index .search,
#contents #index .service-ttl,
#contents #index .service,
#contents #index .recommendbnr,
#contents #index .caution{
	width:100%;
	max-width:1110px;
}
#contents #index .search-ttl h3,
#contents #index .news-ttl h3,
#contents #index .other-ttl h3,
#contents #index .catalog-ttl h3,
#contents #index .service-ttl h3{
	color:#333333;
	font-size:26px;
}
#contents #index .search-ttl h3 span,
#contents #index .news-ttl h3 span,
#contents #index .other-ttl h3 span,
#contents #index .catalog-ttl h3 span,
#contents #index .service-ttl h3 span{
	display:inline-block;
    margin:0 0 20px 20px;
	color:#0079cd;
	font-size:20px;
}
#contents #index .news-ttl h3,
#contents #index .other-ttl h3,
#contents #index .catalog-ttl h3{
	float:left;
}
#contents #index .news-ttl h3 span,
#contents #index .other-ttl h3 span,
#contents #index .catalog-ttl h3 span{
    margin:0 0 10px 20px;
	color:#0079cd;
}

@media screen and (max-width: 640px){
	#contents #index .search,
    #contents #index .search-ttl,
	#contents #index .other-wrap-area,
	#contents #index .service-ttl,
	#contents #index .service,
	#contents #index .recommendbnr,
    #contents #index .caution{
        max-width:92%;
    }
	#contents #index .service-ttl,
	#contents #index .service{
	    margin:0 auto;
    }
    #contents #index .search-ttl h3,
	#contents #index .news-ttl h3,
	#contents #index .other-ttl h3,
	#contents #index .catalog-ttl h3,
	#contents #index .service-ttl h3{
		font-size:20px;
	}
	#contents #index .search-ttl h3 span,
	#contents #index .news-ttl h3 span,
	#contents #index .other-ttl h3 span,
	#contents #index .catalog-ttl h3 span,
	#contents #index .service-ttl h3 span{
	    margin:0 0 10px 10px;
		font-size:14px;
	}
}


/* ----- index: search ----- */
#contents #index .search{
    display:flex;
    flex-wrap:wrap;
    border-top:solid 1px #ccc;
    margin-bottom:60px;
}
#contents #index .search img{
    width:100%;
    max-width:100%;
    height:auto;
}
#contents #index .search li{
	position:relative;
    background:#fff;
    width:calc(20% - 1px);
    border-left:solid 1px #ccc;
    border-bottom:solid 1px #ccc;
}
#contents #index .search li:nth-child(5),
#contents #index .search li:last-child{
    width:calc(20% - 2px);
    border-right:solid 1px #ccc;
}
#contents #index .search li:nth-child(10){
    width:calc(20% - 2px);
    border-right:solid 1px transparent;
    border-bottom:solid 1px transparent;
}
#contents #index .search .item-name{
    display:flex;
    height:3em;
    padding-bottom:10px;
	background-color:#ffffff;
}
#contents #index .search .item-name p{
    display:flex;
    align-items:center;
    text-align:center;
    justify-content:center;
    width:100%;
}
#contents #index .search a,
#contents #index .search a:hover{
	display:block;
	font-size:16px;
	color:#333333;
	text-decoration:none;
}
#contents #index .search li a:hover{
	background-color:#1780c4;
}
#contents #index .search li a:hover img,
#contents #index .search .item-name{
	opacity:0.8;
}

@media screen and (max-width: 640px){
	#contents #index .search img{
	    margin-top: 0;
	}
    #contents #index .search,
    #contents #index .search-ttl{
        margin:0 auto;
    }
    #contents #index .search{
        margin:0 auto 30px;
    }
    #contents #index .search li{
        width:calc(33.333% - 1px);
    }
    #contents #index .search li:nth-child(3),
    #contents #index .search li:nth-child(6),
    #contents #index .search li:nth-child(9){
        width:calc(33.333% - 2px);
        border-right:solid 1px #ccc;
    }
    #contents #index .search li:nth-child(2),
    #contents #index .search li:nth-child(5),
    #contents #index .search li:nth-child(8){
        width:calc(33.333% - 1px);
        border-right:none;
    }
    #contents #index .search li:nth-child(10){
        border-right:solid 1px transparent;
        border-bottom:solid 1px transparent;
    }
    #contents #index .search .item-name{
	    font-size:14px;
	    line-height:1.2;
	}
}


/* ----- index: news ----- */
#contents #index .news-ttl h3{
	float:left;
}
#contents #index .news-ttl h3 span{
    margin-bottom:10px;
}
#contents #index .news-ttl-index{
	float:right;
	margin-top:15px;
}
#contents #index .news-ttl-index li{
	font-size:14px;
    line-height:1.2;
}
#contents #index .news-ttl-index li:nth-child(1){
	display:inline-block;
	background-image:url("../images/icon_arw.png");
	background-repeat:no-repeat;
	background-size:15%;
	background-position:right center;
    padding-right:20px;
    margin-right:15px;
}
#contents #index .news-ttl-index li:nth-child(2){
	display:inline-block;
	background-image:url("../images/index/icon_rss.png");
	background-repeat:no-repeat;
	background-size:34%;
	background-position:right center;
    padding-right:20px;
}
#contents #index .news-ttl-index a,
#contents #index .news-ttl-index a:hover{
	color:#333333;
	text-decoration:none;
}
#contents #index .news-ttl-index a:hover{
	color:#2a96e1;
}
#contents #index .topics{
    max-width:100%;
    margin-bottom:60px;
}
#contents #index .tr{color:#333; font-size:14px; line-height:24px; text-align:right;}
#contents #index .topics .topicsinner{
    border-top:solid 1px #ccc;
}
#contents #index .topics dl{
	padding:16px 0;
    border-bottom:solid 1px #ccc;
}
#contents #index .topics dt{
	float:left;
	padding-left:2%;
}
#contents #index .topics dt p{
	float:left;
	min-width:80px;
}
#contents #index .topics dt p.category{
	float:left;
	background-color:#777777;
	margin:2px 30px 0 30px;
	text-align:center;
}
#contents #index .topics dt p.category span{
	display:block;
	min-width:4em;
	color:#fff;
	font-size:11px;
	margin:0;
	padding:2px 24px;
	letter-spacing:0.1em;
}
#contents #index .topics dd{
	float:left;
	width:67%;
}
#contents #index .topics a,
#contents #index .topics a:hover{
	color:#2a96e1;
	text-decoration:none;
}
#contents #index .topics a:hover{
	opacity:0.8;
}

@media screen and (max-width: 813px) {
	#contents #index .topics dt{
		padding-left:0;
	}
}
@media screen and (max-width: 640px) {
    #contents #index .news,
    #contents #index .news-ttl,
	#contents #index .topics{
        max-width:92%;
        margin:0 auto;
    }
    #contents #index .news-ttl-index{
		float:right;
		margin-top:5px;
		margin-bottom:5px;
	}
	#contents #index .news-ttl-index li:nth-child(1){
	    padding-right:13px;
	    margin-right:8px;
	}
	#contents #index .news-ttl-index li:nth-child(2){
		display:inline-block;
		background-image:url("../images/index/icon_rss.png");
		background-repeat:no-repeat;
		background-size:32%;
		background-position:right center;
	    padding-right:18px;
	}
	#contents #index .topics{
	    margin-bottom:35px;
	}
    #contents #index .topics dl{
		padding:15px 0;
	}
	#contents #index .topics dt{
		width:100%;
	}
	#contents #index .topics dt p{
		margin-right:0;
	}
    #contents #index .topics dt p.category{
		margin:2px 0 0 15px;
	}
    #contents #index .topics dt p.category span{
		padding:1px 14px;
		letter-spacing:0;
	}
	#contents #index .topics dd{
		width:100%;
		margin-right:0;
		padding-top:2px;
	}
}

/* ----- index: other-item ----- */
#contents #index .other-wrap{
    float:left;
    width: 48%;
}
#contents #index .catalog-wrap{
    float:right;
    width: 48%;
}

@media screen and (max-width: 640px) {
	#contents #index .other-wrap,
	#contents #index .catalog-wrap{
	    float:none;
	    width:100%;
	    max-width:100%;
	    padding:0 4%;
	}
}

/* index: other, catalog */
#contents #index .other-ttl h3,
#contents #index .catalog-ttl h3{
	float:left;
}
#contents #index .other-ttl h3 span,
#contents #index .catalog-ttl h3 span{
    margin-bottom:10px;
}
#contents #index .other,
#contents #index .catalog{
    display:flex;
    flex-wrap:wrap;
    border-top:solid 1px #ccc;
    margin-bottom:60px;
}
#contents #index .other img,
#contents #index .catalog img{
    width:100%;
    max-width:100%;
    height:auto;
}
#contents #index .other li,
#contents #index .catalog li{
	position:relative;
    background:#fff;
    width:calc(50% - 1px);
    border-left:solid 1px #ccc;
    border-bottom:solid 1px #ccc;
    margin:0 auto;
}
#contents #index .other li:last-child,
#contents #index .catalog li:last-child{
    width:calc(50% - 2px);
    border-right:solid 1px #ccc;
}
#contents #index .other .other-name,
#contents #index .catalog .catalog-name{
    display:flex;
    height:3em;
    padding-bottom:10px;
	background-color:#ffffff;
}
#contents #index .other .other-name p,
#contents #index .catalog .catalog-name p{
    display:flex;
    align-items:center;
    text-align:center;
    justify-content:center;
    width:100%;
	padding-bottom:10px;
}
#contents #index .other a,
#contents #index .other a:hover,
#contents #index .catalog a,
#contents #index .catalog a:hover{
	display:block;
	font-size:16px;
	color:#333333;
	text-decoration:none;
}
#contents #index .other li a:hover,
#contents #index .catalog li a:hover{
	background-color:#1780c4;
	text-decoration:none;
}
#contents #index .other li a:hover img,
#contents #index .other .other-name,
#contents #index .catalog li a:hover img,
#contents #index .catalog .catalog-name{
	opacity:0.8;
}

/* index: catalog */
#contents #index .other .other-name p .br-pc,
#contents #index .catalog .catalog-name p .br-pc{
    display:block;
}
#contents #index .other .other-name p .br-sp,
#contents #index .catalog .catalog-name p .br-sp{
    display:none;
}

@media screen and (max-width: 640px) {
    #contents #index .other,
    #contents #index .catalog{
        margin:0 auto 30px;
    }
	#contents #index .other a,
	#contents #index .catalog a{
		display:block;
    	width:100%;
	}
	#contents #index .other li a:hover,
	#contents #index .other .other-name,
	#contents #index .catalog li a:hover,
	#contents #index .catalog .catalog-name{
		opacity:0.8;
		background-color:#ffffff;
	}
    #contents #index .other li,
    #contents #index .catalog li{
        width:calc(50% - 1px);
    }
    #contents #index .other li:last-child,
    #contents #index .catalog li:last-child{
        width:calc(50% - 2px);
    }
    #contents #index .other .other-item-wrap,
    #contents #index .catalog .catalog-item-wrap{
	    display:flex;
	    align-items:center;
	    text-align:left;
	    flex-direction:row-reverse;
	    justify-content:flex-end;
    }
    #contents #index .other .other-item,
    #contents #index .catalog .catalog-item{
    	width:40%;
    	margin-top:1px;
    }
    #contents #index .other .other-name,
    #contents #index .catalog .catalog-name{
	    width:60%;
	    height:auto;
	    font-size:14px;
	    line-height:1.2;
    	padding-bottom:0;
    }
    #contents #index .other .other-name p,
    #contents #index .catalog .catalog-name p{
		color:#333333;
		text-decoration:none;
	    justify-content:left;
		text-align:left;
    	padding-left:10px;
    	padding-bottom:0;
	}
	#contents #index .other .other-name p .br-pc,
    #contents #index .catalog .catalog-name p .br-pc{
    	display:none;
	}
	#contents #index .other .other-name p .br-sp,
    #contents #index .catalog .catalog-name p .br-sp{
    	display:block;
	}
}

@media screen and (max-width: 320px) {
    #contents #index .other .other-name,
    #contents #index .catalog .catalog-name{
	    font-size:12px;
    }
}


/* ----- index: contact ----- */
body #contents div.contact{
    width:100%;
	background-image:url("../images/index/bg_contact_pc.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    background-color:#434e78;
}
body #contents div.contact .contact-index{
	display:flex;
    align-items:center;
	margin:0 auto;
	padding:60px 0;
	max-width:1110px;
	text-align:left;
}
body #contents div.contact .contact-ttl{
	align-items:stretch;
	margin-right:auto;
	color:#ffffff;
	background-image:url("../images/index/top_contact_icon.png");
    background-repeat:no-repeat;
    background-size:12%;
    background-position:left 43%;
	text-decoration:none;
    padding-left:5%;
}
body #contents div.contact .contact-ttl h3{
	font-size:14px;
	letter-spacing:0.14em;
	font-weight:bold;
}
body #contents div.contact .contact-ttl p{
	font-size:14px;
}
body #contents div.contact .contact-ttl p span{
	font-size:35px;
	line-height:1;
	letter-spacing:0.1em;
}
body #contents div.contact .contact-ttl p.contact-time{
	font-size:12px;
	letter-spacing:0.04em;
	font-weight:normal;
}

body #contents div.contact .contact-btn-wrap{
	clear:none;
	overflow:visible;
	display:flex;
	width:68%;
}
body #contents div.contact .contact-btn{
	align-items:stretch;
    background:#3298df;
    flex-basis:50%;
    font-size:18px;
    font-weight:bold;
    margin-right:20px;
}
body #contents div.contact .contact-btn:last-child{
    margin-right:0;
}

body #contents div.contact a{
	color:#ffffff;
	text-decoration:none;
}
body #contents div.contact .contact-btn p{
	align-items:center;
	padding:35px 0;
	text-align:center;
}
body #contents div.contact .contact-btn,
body #contents div.contact .contact-btn:hover{
	display:block;
}
body #contents div.contact .contact-btn:hover{
    background:#65b2e7;
}

body #contents div.contact .contact-btn p.contact01{
	background-image:url("../images/index/top_contact01_icon.png");
    background-repeat:no-repeat;
    background-size:7%;
    background-position:30% center;
    padding-left:10%;
}
body #contents div.contact .contact-btn p.contact02{
	background-image:url("../images/index/top_contact02_icon.png");
    background-repeat:no-repeat;
    background-size:7%;
    background-position:30% center;
    padding-left:10%;
}

@media screen and (max-width: 640px) {
	body #contents div.contact{
		width:100%;
	    padding:5% 0;
		background-image:url("../images/index/bg_contact_sp.jpg");
	    background-repeat:no-repeat;
	    background-size:cover;
	    margin-bottom:30px
	}
	body #contents div.contact .contact-index{
	    display:block;
		max-width:92%;
		margin:0 auto;
		padding:0;
		text-align:center;
	}
	body #contents div.contact .contact-ttl{
	    background-image:none;
    	padding-left:0;
	}
	body #contents div.contact .contact-ttl h3{
		font-size:18px;
		line-height:2;
		font-weight:bold;
	}
	body #contents div.contact .contact-ttl p span{
		font-size:35px;
	    letter-spacing:0.1em;
		font-weight:bold;
	}
	body #contents div.contact .contact-ttl p.contact-time{
		font-size:16px;
    	padding:8px 0 16px 0;
	}
	body #contents div.contact .contact-btn-wrap{
		clear:both;
		overflow:hidden;
		display:block;
		width:100%;
	}
	body #contents div.contact .contact-btn{
	    display:inline-block;
		float:left;
		width:48%;
	    margin-right:0;
	    margin:0 auto;
	    font-size:18px;
	    letter-spacing:0.1em;
	}
	body #contents div.contact .contact-btn:last-child{
		float:right;
		width:48%;
	    margin-right:0;
	}
	body #contents div.contact .contact-btn p{
		padding:24px 0;
	}
	body #contents div.contact .contact-btn p.contact01{
		background-image:url("../images/index/top_contact01_icon.png");
	    background-repeat:no-repeat;
	    background-size:9%;
	    background-position:10% center;
	    padding-left:12%;
	}
	body #contents div.contact .contact-btn p.contact02{
		background-image:url("../images/index/top_contact02_icon.png");
	    background-repeat:no-repeat;
	    background-size:9%;
	    background-position:10% center;
	    padding-left:12%;
	}
}

@media screen and (max-width: 380px) {
	body #contents div.contact .contact-ttl h3{
		font-size:14px;
		line-height:2;
	    letter-spacing:0;
		font-weight:bold;
	}
	body #contents div.contact .contact-ttl p span{
		font-size:21px;
	    letter-spacing:0.1em;
		font-weight:bold;
	}
	body #contents div.contact .contact-ttl p.contact-time{
		font-size:14px;
    	padding:6px 0 12px 0;
	    letter-spacing:0;
	}
	body #contents div.contact .contact-btn{
	    font-size:14px;
	}
	body #contents div.contact .contact-btn p{
		padding:15px 0;
	}
	body #contents div.contact .contact-btn p.contact01{
		background-image:url("../images/index/top_contact01_icon.png");
	    background-repeat:no-repeat;
	    background-size:11%;
	    background-position:10% center;
	    padding-left:15%;
	}
	body #contents div.contact .contact-btn p.contact02{
		background-image:url("../images/index/top_contact02_icon.png");
	    background-repeat:no-repeat;
	    background-size:11%;
	    background-position:10% center;
	    padding-left:15%;
	}
}


/* ----- index: service ----- */
#contents #index .service{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    border-top:solid 1px #cccccc;
    margin-bottom:50px;
}
#contents #index .service li{
    width:33.333%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#fafafa;
    box-sizing:border-box;
    border-left:solid 1px #cccccc;
    border-bottom:solid 1px #cccccc;
}
#contents #index .service li:last-child{
    box-sizing:border-box;
    border-right:solid 1px #cccccc;
}
#contents #index .service li:nth-child(1){
	background-image:url("../images/index/top_service01_icon.png");
    background-repeat:no-repeat;
    background-size:8%;
    background-position:31% center;
    padding-left:135px;
}
#contents #index .service li:nth-child(2){
	background-image:url("../images/index/top_service02_icon.png");
    background-repeat:no-repeat;
    background-size:8%;
    background-position:34% center;
    padding-left:150px;
}
#contents #index .service li:nth-child(3){
	background-image:url("../images/index/top_service03_icon.png");
    background-repeat:no-repeat;
    background-size:8%;
    background-position:36% 43%;
    padding-left:155px;
}
#contents #index .service a,
#contents #index .service a:hover{
	display:block;
    font-size:14px;
    line-height:1.3;
	color:#333333;
	text-decoration:none;
}
#contents #index .service li:hover{
	background-color:#ebf4fc;
    text-decoration:none;
}
#contents #index .service p{
    padding:30px 10px;
}

@media screen and (max-width: 1110px){
    #contents #index .service li:nth-child(1){
		background-image:url("../images/index/top_service01_icon.png");
	    background-repeat:no-repeat;
	    background-size:9%;
	    background-position:31% center;
	    padding-left:13%;
	}
	#contents #index .service li:nth-child(2){
		background-image:url("../images/index/top_service02_icon.png");
	    background-repeat:no-repeat;
	    background-size:9%;
	    background-position:35% center;
	    padding-left:14%;
	}
	#contents #index .service li:nth-child(3){
		background-image:url("../images/index/top_service03_icon.png");
	    background-repeat:no-repeat;
	    background-size:9%;
	    background-position:35% 45%;
	    padding-left:14%;
	}
}

@media screen and (max-width: 768px) {
    #contents #index .service li:nth-child(1){
		background-image:url("../images/index/top_service01_icon.png");
	    background-repeat:no-repeat;
	    background-size:10%;
	    background-position:18% center;
	    padding-left:9%;
	}
	#contents #index .service li:nth-child(2){
		background-image:url("../images/index/top_service02_icon.png");
	    background-repeat:no-repeat;
	    background-size:10%;
	    background-position:27% center;
	    padding-left:12%;
	}
	#contents #index .service li:nth-child(3){
		background-image:url("../images/index/top_service03_icon.png");
	    background-repeat:no-repeat;
	    background-size:10%;
	    background-position:30% center;
	    padding-left:13%;
	}
}

@media screen and (max-width: 500px) {
    #contents #index .service-ttl,
	#contents #index .service{
        margin:0 auto;
    }
    #contents #index .service li{
        width:100%;
        box-sizing:border-box;
        align-items:center;
        border-right:solid 1px #cccccc;
    }
    #contents #index .service li:nth-child(1){
		background-image:url("../images/index/top_service01_icon.png");
	    background-repeat:no-repeat;
	    background-size:5%;
	    background-position:6% center;
	    padding-left:12%;
	}
	#contents #index .service li:nth-child(2){
		background-image:url("../images/index/top_service02_icon.png");
	    background-repeat:no-repeat;
	    background-size:5%;
	    background-position:6% center;
	    padding-left:12%;
	}
	#contents #index .service li:nth-child(3){
		background-image:url("../images/index/top_service03_icon.png");
	    background-repeat:no-repeat;
	    background-size:6%;
	    background-position:6% 46%;
	    padding-left:12%;
	}
	#contents #index .service p{
	    padding:14px 10px;
	}
}


/* ----- index: recommend_banner ----- */
#contents #index .recommendbnr{
	clear:both;
	margin-bottom:20px;
}
#contents #index .recommendbnr li{
	float:left;
	width:32%;
	margin-left:2%;
}
#contents #index .recommendbnr li:first-child{
	margin-left:0;
}
#contents #index .recommendbnr img{
	display:block;
    max-width:100%;
}
#contents .recommendbnr a:hover img{
	opacity:0.8;
}

@media screen and (max-width: 640px) {
	#contents #index .recommendbnr{
        margin:35px auto 25px auto;
	}
	#contents #index .recommendbnr li{
		clear:both;
		width:100%;
		margin-left:0;
		margin-bottom:10px;
	}
}


/* ----- index: caution ----- */
#contents #index .caution{
	margin:20px auto 0;
}
#contents #index .caution dt{
	font-size:14px;
}
#contents #index .caution dd{
	margin-top:5px;
	font-size:12px;
}

@media screen and (max-width: 640px) {
    #contents #index .caution{
		margin:25px auto;
    }
	#contents #index .caution dt{
		font-size:12px;
		font-weight:bold;
	}
}





/* -----------------------------------------------------------------
	news css
----------------------------------------------------------------- */
/* index */
#news .main{
	min-height:600px;
}
#news h1{
	padding:0 0 10px 0;
	font-size:30px;
	color:#333333;
	font-weight:normal;
}
#news p.top{
	font-size:16px;
	padding:0 0 45px 0;
}
#news .title{
	padding-bottom:15px;
}
#news h2{
	float:left;
	padding-bottom:5px;
	color:#555555;
	font-size:20px;
	font-weight:bold;
}
#news .title ul{
	float:right;
	margin-top:10px;
	text-align:left;
}
#news .title li{
	float:left;
	display:inline;
	margin-left:10px;
}
#news .title li a{
	text-decoration:none;
	font-size:14px;
	color:#555555;
	background-color:#ffffff;
	padding:1px 0 1px 10px;
}
#news .title li{
	font-size:14px;
    line-height:1.2;
	display:inline-block;
	background-image:url("../images/icon_arw.png");
	background-repeat:no-repeat;
	background-size:25%;
	background-position:left center;
    margin-right:15px;
    padding-left:10px;
}
#news .title li:nth-child(2){
    margin-right:0;
}
#news .title li a,
#news .title li a:hover{
	color:#333333;
	text-decoration:none;
}
#news .title li a:hover{
	color:#2a96e1;
}

#news .url{
	word-break:break-all;
}

#news .topics{
	border-top:solid 1px #ccc;
}
#news .topics dl{
	padding:20px 0;
	border-bottom:solid 1px #ccc;
}
#news .topics dt{
	float:left;
	width:30%;
}
#news .topics dt p{
	float:left;
	margin-right:8%;
}
#news .topics dt p.category{
	float:left;
	display:inline;
	width:100px;
	background-color:#777777;
	margin-right:0;
	text-align:center;
}
#news .topics dt p.category span {
    display:block;
    color:#fff;
    font-size:11px;
    margin:0;
    padding:2px 24px;
    letter-spacing:0.1em;
}
#news .topics dd{
	float:right;
	width:68%;
}


/* details: menu */
#news .menuTop{
	border-bottom:solid 1px #ccc;
	margin-bottom:40px;
	padding-top:10px;
	text-align:right;
}
#news .menuBtm{
	width:680px;
	border-top:solid 1px #ccc;
	margin-top:40px;
	text-align:right;
}
#news .menuTop p,
#news .menuBtm p{
	display:inline-block;
	background-image:url("../images/icon_arw.png");
	background-repeat:no-repeat;
	background-size:25%;
	background-position:left center;
    padding-left:20px;
}
#news .menuTop a,
#news .menuBtm a,
#news .menuTop a:hover,
#news .menuBtm a:hover{
	color:#333333;
	text-decoration:none;
}
#news .menuTop a:hover,
#news .menuBtm a:hover{
	color:#2a96e1;
}
#news .menuTop p{
	margin-bottom:10px;
}
#news .menuBtm p{
	margin:5px 0 30px 0;
}
#news .menuBtm ul{
	float:right;
	text-align:left;
}
#news .menuBtm li{
	float:left;
	display:inline;
	margin-left:20px;
}


/* details: contents */
#news .details h2{
	float:none;
	font-size:20px;
	padding-bottom:30px;
	font-weight:bold;
}
#news .details dl{
	padding-bottom:10px;
	line-height:1;
}
#news .details dt{
	float:left;
	display:inline;
	margin-right:15px;
	font-size:14px;
}
#news .details dd{
	float:left;
	display:inline;
	background-color:#777777;
	margin-right:0;
	text-align:center;
}
#news .details dd span{
    display:block;
    color:#fff;
    font-size:12px;
    margin:0;
    padding:2px 24px;
    letter-spacing:0.1em;
}


/* details: column */
#news .column1,
#news .column2{
	padding-bottom:30px;
}
#news .column1 .image{
	float:none;
	width:45%;
	padding-bottom:20px;
}
#news .column2 .image{
	float:left;
	width:45%;
	padding-bottom:30px;
}
#news .column2 .image img{
	max-width:100%;
}
#news .column2 .text{
	float:right;
	width:50%;
}
#news .column1 .text p,
#news .column2 .text p{
	padding-bottom:20px;
}
#news .column1 .text p:last-child,
#news .column2 .text p:last-child{
	padding-bottom:0;
}


@media screen and (max-width: 640px) {
	#news{
		margin:20px auto 0 auto;
	}
	#news .main{
		float:none;
		width:100%;
    	min-height:none;
		margin:0 auto 50px;
	}
	#news p.top{
		padding:0 0 25px 0;
	}
	/* sp_index */
	#news,
	#news .index,
	#news .index h2,
	#news .nav ul{
		width:100%;
	}
	#news h2{
		padding:0 0 10px 0;
	}
	#news .nav{
		float:none;
		margin:0 auto 20px;
	}
	#news ul.bnr{
		margin:0 auto 20px;
	}
	#news .title{
		width:100%;
	}
	#news .title ul{
		float:right;
		text-align:left;
	}

	/* topics */
	#news .topics dl,
	#news .topics dt{
		clear:both;
		overflow:hidden;
	}
	#news .topics dl {
	    padding-left:0;
	}
	#news .topics dt,
	#news .topics dd{
		float:none;
		width:100%;
	}
	#news .topics dd{
		padding-top:5px;
	}
	#news .topics,
	#news .details{
		word-break:normal;
	}

	/* column */
	#news .column1 .image {
	    width: 100%;
	}
	#news .column2 .text,
	#news .column2 .image{
		float:none;
		width:100%;
		padding-bottom:30px;
	}
	#news .column1 .image img,
	#news .column2 .image img{
		max-width:100%;
	}

	/* details */
	#news .details dt{
		font-size:16px;
	}
	#news .details dd span{
	    padding:3px 24px;
	}

	#news .menuTop,
	#news .menuBtm{
		float:none;
		width:100%;
	}
	#news .menuTop{
		float:none;
		width:100%;
	}
	#news .menuTop p,
	#news .menuBtm p{
		float:none;
	}
	#news .menuBtm p{
		padding-bottom:0;
	}
	#news .menuBtm ul{
		float:none;
		width:100%;
		margin:20px 0 0 0;
	}
}





/* -----------------------------------------------------------------
	product css
-----------------------------------------------------------------*/
/* product: index */
#product .main{
	float:left;
	text-align:left;
}
#product .nav{
	float:right;
	max-width:330px;
	text-align:left;
	margin-bottom:0;
}


/* --------- headerMenuWhite --------- */
#contents #headerMenuWhite{
	clear:both;
	width:100%;
	position:relative;
	z-index:500;
	background-color: #ffffff;
}
#contents #menuWrapper{
	clear:both;
	overflow:hidden;
	width:100%;
	border-top: solid 1px #cccccc;
	border-bottom: solid 1px #cccccc;
}


@media screen and (max-width: 640px) {
	#contents #menuWrapper{
		position:absolute;
		top:0;
		left:0;
		width:100%;
	}
}
/* sp_title */
#contents #spProducttitle{
	display:none;
}


/* index */
#contents #producttitle{
	background-image:url("../images/product/ttl_image.jpg");
	background-repeat:no-repeat;
	background-position:center top;
	min-height:140px;
	z-index:0;
}
#contents #producttitle h1{
	margin:0 auto;
	padding:46px 0 0 0;
	font-size:34px;
    letter-spacing:0.06em;
	text-align:center;
	font-weight: normal;
}

@media screen and (max-width: 640px) {
	/* sp_title */
	#contents #producttitle{
		background-size:cover;
		min-height:69px;
	}
	#contents #producttitle h1{
		margin:0 auto;
		padding:22px 3px 0 0;
		font-size:18px;
	    letter-spacing:0.06em;
		text-align:center;
		font-weight: normal;
	}
}

/* --------- product: right-nav --------- */
#product .nav{
	float:right;
	width:220px;
	text-align:left;
}
#product .nav ul{
	width:220px;
}
#product .nav ul.list li.product{
	margin:0;
	padding:0;
}


/* list1: product */
#product .product p,
#order .product p,
#contact .product p,
#catalog .product p{
	margin:0;
	padding:10px 0 0 34px;
	font-size:15px;
	font-weight:bold;
}
#product .product a{
	display:block;
	width:220px;
	height:41px;
	color:#555555;
	background-image:url("../images/nav_product_current_off.png");
	background-repeat:no-repeat;
	background-size:cover;
}
#product .product a:hover{
	color:#555555;
	background-image:url("../images/nav_product_current_on.png");
	background-repeat:no-repeat;
	background-size:cover;
	text-decoration:none;
}
#order .product a,
#contact .product a,
#catalog .product a{
	display:block;
	width:220px;
	height:42px;
	color:#555555;
	background-image:url("../images/nav_product_off.png");
	background-repeat:no-repeat;
	background-size:cover;
}
#order .product a:hover,
#contact .product a:hover,
#catalog .product a:hover{
	color:#555555;
	background-image:url("../images/nav_product_on.png");
	background-repeat:no-repeat;
	background-size:cover;
	text-decoration:none;
}
/* list1: cad */
#product .cad p,
#order .cad p,
#contact .cad p,
#catalog .cad p{
	margin:0;
	padding:8px 0 0 34px;
	font-size:15px;
	font-weight:bold;
}
#product .cad a,
#order .cad a,
#contact .cad a,
#catalog .cad a{
	display:block;
	width:220px;
	height:42px;
	color:#555555;
	background-image:url("../images/nav_cad_off.png");
	background-repeat:no-repeat;
	background-size:cover;
}
#product .cad a:hover,
#order .cad a:hover,
#contact .cad a:hover,
#catalog .cad a:hover{
	color:#555555;
	background-image:url("../images/nav_cad_on.png");
	background-repeat:no-repeat;
	background-size:cover;
	text-decoration:none;
}

@media screen and (max-width: 640px) {
	/* list1 */
	#product .product p,
	#order .product p,
	#contact .product p,
	#catalog .product p{
		margin:0;
		padding:17px 0 0 44px;
		font-size:18px;
		font-weight:bold;
	}
	#product .cad p,
	#order .cad p,
	#contact .cad p,
	#catalog .cad p{
		margin:0;
		padding:15px 0 0 44px;
		font-size:18px;
		font-weight:bold;
	}
	#product .product a,
	#product .cad a,
	#order .product a,
	#contact .product a,
	#catalog .product a,
	#product .cad a,
	#order .cad a,
	#contact .cad a,
	#catalog .cad a{
		display:block;
		width:100%;
		height:auto;
		background-size:cover;
	}
}


/* list2 */
#product .nav ul.list2,
#product .nav ul.list3{
	margin:0;
	padding:0;
}
#product .nav ul.list2 li{
	width:220px;
	margin:0;
	padding:0;
	background-color:#ffffff;
	border-left:solid 1px #cccccc;
	border-right:solid 1px #cccccc;
	border-bottom:solid 1px #cccccc;
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
         -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
            box-sizing:border-box;
}
#product .nav .list2 li a,
#product .nav .list2 li.stay a{
	display:block;
	color:#555555;
	font-size:12px;
	margin:0;
	padding:12px 25px 10px 10px;
	background-image:url("../images/nav_r_icon_open.png");
	background-repeat:no-repeat;
	background-position:198px center;
	background-size:5%;
}
#product .nav .list2 li.stay a{
	color:#555555;
	font-size:12px;
	background-image:url("../images/nav_r_icon_close.png");
	font-weight:normal;
}
#product .nav .list2 li.mycat{
	background-color:#ebf4fc;
}
#product .nav .list2 li a:hover{
	background-color:#ebf4fc;
	text-decoration:none;
}


/* list2: last */
#product .nav ul.list2 li.last{
	border:0;
	background-color:#ffffff;
	background-image:url("../images/nav_bg_btm.png");
	background-repeat:no-repeat;
	background-position:center bottom;
}
#product .nav .list2 li.last a{
	border:0;
	padding:12px 25px 13px 9px;
}
#product .nav .list2 li.last a:hover{
	background-color:transparent;
	background-image:url("../images/nav_bg_btm_on.png");
	background-repeat:no-repeat;
	background-position:center bottom;
	margin:0;
	padding:12px 25px 13px 9px;
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
         -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
            box-sizing:border-box;
}
#product .nav .list2 li.last.stay{
	color:#555555;
	font-size:12px;
	margin:0;
}
#product .nav .list2 li.last.stay a:hover{
	color:#555555;
	font-size:12px;
	background-image:url("../images/nav_bg_btm_close.png");
	background-repeat:no-repeat;
	background-position:center bottom;
	margin:0;
}


/* list3 */
#product .nav .list2 .list3{
	width:218px;
	background-image:none;
}
#product .nav .list2 .list3 li,
#product .nav .list2 .list3 li:first-child{
	width:218px;
	border-top:solid 1px #cccccc;
	border-left:0;
	border-right:0;
	border-bottom:0;
	background-image:url("../images/nav_bg_btm_list3.png");
	background-repeat:no-repeat;
	background-position:center top;
}
#product .nav .list2 .list3 li a{
	display:block;
	font-size:12px;
	color:#555555;
	margin:0;
	padding:12px 10px 10px 30px;
	background-image:url("../images/nav_l_icon.png");
	background-repeat:no-repeat;
	background-position:15px 15px;
}
#product .nav .list2 .list3 li a:hover{
	color:#1780c4;
	text-decoration:underline;
}
#product .nav .list2 .list3 li.stay a{
	color:#1780c4;
	text-decoration:underline;
}
/* --------- product: right-nav_END --------- */


/* details: index */
#product .index{
	width:702px;
}
#product .index h2,
#product .index h2.other{
	width:100%;
	border-top:solid 3px #000000;
	background-image:url("../images/ttl_line.png");
	background-repeat:repeat-x;
	background-position:left bottom;
	margin:0 0 30px 0;
}
#product .index h2{
	padding:0;
}
#product .index h2.other{
	margin:30px 0;
}
#product .index h2 span{
	display:block;
	padding:15px 0;
	color:#333333;
	font-size:21px;
	letter-spacing:1.3px;
}

#product .index ul{
	width:100%;
	margin-bottom:0;
}
#product .index ul li{
	float:left;
	width:31%;
	height:auto;
	margin:0 2% 20px 0;
	padding:0;
	text-align:left;
}
#product .index li a:hover{
	opacity:0.8;
}


/* ----- details: intro ----- */
#product .intro,
#product .merit,
#product .catalog{
	width:100%;
	padding-bottom:50px;
}
#product .intro .image{
	float:left;
	width:248px;
}
#product .intro .text{
	float:right;
	width:410px;
}
#product .intro .text h2{
	font-size:30px;
	line-height:1.2;
	padding:0 0 20px 0;
	font-weight:bold;
}
#product .intro .text p{
	padding-bottom:10px;
}
#product .intro .text p.top{
	font-size:19px;
	padding-bottom:0;
	font-weight:bold;
}
#product .intro .text li{
	float:left;
	margin:0 10px 20px 0;
}
#product .introbtn li{
	display:block;
	border:solid 1px #1780c4;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#eeeeee 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
	padding:1px 30px;
	color:#1780c4;
	font-size:11px;
	text-align:center;
	border-radius:2px;
	box-shadow:1px 1px #ffffff;
}
#product .introbtn li a{
	text-decoration:none;
}


/* ----- details: merit ----- */
#product .merit h3,
#product .catalog h3{
	background-color:#333333;
	margin-bottom:20px;
	padding:7px 12px;
	color:#ffffff;
	font-size:16px;
	line-height:1.2;
	font-weight:normal;
}
#product .merit li{
	background-image:url("../images/icon.png");
	background-repeat:no-repeat;
	background-position:left 5px;
	padding-left:25px;
	font-size:16px;
	font-weight:bold;
	padding-bottom:15px;
}


/* ----- details: catalog ----- */
#product .catalog .image{
	float:left;
	margin:0 0 20px 0;
}
#product .catalog .image img{
	border:solid 4px #eee;
}
#product .catalog .text{
	float:right;
	width:534px;
}
#product .catalog .text p{
	padding:0 0 20px 10px;
}
#product .catalog .text p em{
	font-weight:bold;
}
#product .catalog .text ul{
	float:left;
	padding:0 0 10px 10px;
	width:100%;
}
#product .catalog .text li{
	float:left;
	width:48%;
	height:auto;
	margin:0 0 3% 0;
}
#product .catalog .text li:nth-child(even){
	width:49%;
	margin:0 0 3% 1%;
}
#product .catalog .text li p{
	position:relative;
	display:block;
	padding:0;
}
#product .catalog .text li span {
    position: absolute;
    display: block;
	top:40%;
	left:55%;
    font-size: 12px;
    line-height: 12px;
    z-index: 100;
}
#product .catalog .text li a{
	color:#666;
}

@media screen and (max-width: 640px) {
	#product .intro,
	#product .merit,
	#product .catalog{
		padding-bottom:30px;
	}
	#product .catalog{
		width:100%;
		padding-bottom:0;
	}
	/* sp_title */
	#contents #spProducttitle{
		display:block;
	}
	#contents #spProducttitle{
		border-top:solid 2px #e2e2e2;
		background-color:#ffffff;
		height:auto;
	}
	#contents #spProducttitle h1{
		width:100%;
		padding:7px 0 8px 0;
		font-size:24px;
		text-align:center;
	}

	#product{
		margin:20px auto 0 auto;
	}

	/* sp_index */
	#product,
	#product .index,
	#product .index h2,
	#product .nav ul{
		width:100%;
	}
	#product .main,
	#product .nav{
		float:none;
		width:100%;
		max-width:100%;
	}
	#product .main{
    	margin: 0 auto 50px;
	}
	#product ul.bnr{
		margin:0 auto 30px;
	}
	#product .main img {
		min-width:100%;
	}

	#product .index h2{
		border-top:solid 2px #000000;
		margin:0 0 10px 0;
	}
	#product .index h2{
		padding:0;
	}
	#product .index h2 span{
		display:block;
		padding:6px 0 8px 0;
		color:#333333;
		font-size:16px;
		letter-spacing:1.3px;
	}
	#product .index ul{
		margin-bottom:15px;
	}
	#product .index ul li,
	#product .index ul li:nth-child(even){
		width:49%;
		height:auto;
		margin:0 0 3% 2%;
	}
	#product .index ul li:first-child,
	#product .index ul li:nth-child(odd){
		margin:0 0 2% 0;
	}
	/* sp_title */
	#contents #menuWrapper,
	#contents #spTitle,
	#contents #spMenu{
		display:none;
	}
	/* sp_nav */
	#product .nav li{
		width:100%;
	}
	#product .nav .list li{
		margin-bottom:10px;
	}
	#product .nav ul.list2,
	#product .nav ul.list3{
		width:100%;
	}
	#product .nav ul.list2 li{
		width:100%;
		border-left:solid 2px #cccccc;
		border-right:solid 2px #cccccc;
		border-bottom:solid 2px #cccccc;
	}
	#product .nav .list2 li a,
	#product .nav .list2 li.stay a{
		display:block;
		font-size:16px;
		background-image:url("../images/nav_r_icon_open.png");
		background-repeat:no-repeat;
		background-position:95% center;
		background-size:4%;
	}
	#product .nav .list2 li.mycat{
	    background-color:#f4ebcb;
	}
	#product .nav .list2 .list3{
		width:100%;
		background-image:none;
	}
	#product .nav .list2 .list3 li,
	#product .nav .list2 .list3 li:first-child{
		width:100%;
		border-top:solid 2px #cccccc;
		border-left:0;
		border-right:0;
		border-bottom:0;
		background-image:url("../images/nav_bg_btm_list3.png");
		background-repeat:no-repeat;
		background-position:center top;
	}
	#product .nav .list2 .list3 li a{
		display:block;
		color:#555555;
		margin:0;
		padding-left:8%;
		background-image:url("../images/nav_l_icon.png");
		background-repeat:no-repeat;
		background-position:2% 50%;
	}

	/* details: index */
	#product .index,
	#product .index h2{
		width:100%;
	}

	/* ----- details: intro ----- */
	#product .intro,
	#product .merit,
	#product .catalog{
		width:100%;
	}
	#product .intro .image,
	#product .intro .text{
		float:none;
		max-width:100%;
	}
	#product .intro .text{
		width:100%;
		padding-bottom:20px;
	}
	#product .intro .image{
		display: block;
		width:80%;
		margin:0 auto 30px;
	}
	#product .introbtn li{
		font-size:12px;
	}

	/* ----- details: catalog ----- */
	#product .catalog .image,
	#product .catalog .text{
		float:none;
		width:100%;
	}
	#product .catalog .image{
		display: block;
		width:50%;
		margin:0 auto 30px;
	}

	#product .catalog .text ul{
		padding:0;
	}
	#product .catalog .text ul,
	#product .catalog .text li,
	#product .catalog .text li:nth-child(even){
		float:none;
		width:100%;
		margin:0 0 3% 0;
	}
	#product .catalog .text li span{
		position:absolute;
		display:block;
		top:45%;
		left:60%;
		font-size:12px;
		line-height:12px;
		z-index:100;
	}
}





/* -----------------------------------------------------------------
	catalog css
-----------------------------------------------------------------*/
#catalog .main{
	float:left;
	width:700px;
	text-align:left;
}
#catalog h1{
	padding:0 0 10px 0;
	font-size:30px;
	color:#333333;
	font-weight:normal;
}
#catalog p.top{
	font-size:16px;
	padding-bottom:45px;
}
#catalog h2{
	width:680px;
	border-top:solid 3px #000000;
	background-image:url("../images/ttl_line.png");
	background-repeat:repeat-x;
	background-position:left bottom;
	margin-bottom:30px;
}
#catalog h2 span{
	display:block;
	padding:15px 0;
    color:#333333;
    font-size:21px;
    letter-spacing:1.3px;
}
#catalog h3{
	width:680px;
	background-color:#333333;
	margin:60px 0 20px 0;
}
#catalog h3 span{
	display:block;
	padding:7px 12px;
	color:#ffffff;
	font-size:16px;
	line-height:1.2;
	font-weight:normal;
}

#catalog .catalogs{
	width:680px;
}
#catalog .catalogs .image{
	float:left;
	width:132px;
	border:solid 4px #eee;
}
#catalog .catalogs .text{
	float:right;
	width:534px;
	text-align:left;
}
#catalog .catalogs .text p{
	font-size:12px;
	padding-left:10px;
}
#catalog .catalogs .text p em{
    font-style:normal;
    font-weight:bold;
}
#catalog .catalogs .text li{
	float:left;
	padding:0 0 10px 10px;
}
#catalog .download{
	width:700px;
}
#catalog .download li{
	float:left;
	width:22.8%;
	margin:0 2% 2% 0;
}
#catalog .download li span{
	display: block;
	color:#666666;
	font-size:10px;
	text-align:center;
}
#catalog .download li a{
	display:block;
	border:1px solid #cccccc;
	background-color:#fafafa;
	border-radius:2px;
	padding-bottom:13px;
}
#catalog .download li a:hover{
	display:block;
	border:1px solid #cccccc;
	background-color:#ebf4fc;
	border-radius:2px;
	padding-bottom:13px;
}
#catalog .download li a:link,
#catalog .download li a:visited{
	text-decoration:none;
}

@media screen and (max-width: 640px) {
	#catalog{
		width:100%;
		margin:20px auto 0 auto;
	}
	#catalog h2,
	#catalog h3,
	#catalog .main h3,
	#catalog .nav ul,
	#catalog .catalogs,
	#catalog .download,
	#catalog .catalogs .text,
	#catalog .catalogs .text li{
		width:100%;
	}
	#catalog .main,
	#catalog .nav{
		float:none;
		width:100%;
	}
	#contents #catalog .main{
    	margin: 0 auto 50px;
	}
	#catalog h2{
		margin-bottom:20px;
	}
	#catalog h3{
		margin:30px 0 20px 0;
	}
	#catalog h3 span{
		font-size:18px;
	}
	#catalog .nav{
		max-width:600px;
	}
	#catalog ul.bnr{
		margin:0 auto 30px;
	}
	#catalog .main img {
		min-width:100%;
	}
	#catalog h1{
		display:none;
	}

	#catalog .catalogs .image{
		float:none;
		width:35%;
		margin:0 auto 20px;
		text-align:center;
	}
	#catalog .catalogs .text li{
		padding:0 0 10px 0;
	}
	#catalog .catalogs .text p{
		padding-left:0;
	}

	#catalog .download li{
		float:left;
		width:49%;
		height:auto;
		margin:0 0 3% 2%;
	}
	#catalog .download li:nth-child(odd){
		margin:0 0 3% 0;
	}
	#catalog .download li a{
		border-radius:2px;
	}
	#catalog .download li span{
		font-size:12px;
	}
}