@charset 'utf-8';
/* =========================================================
 /products/detail.css
========================================================= */


/* ---------------------------------------------------------
 common
--------------------------------------------------------- */
/* list-style */
#article-body ul {
  padding-left: 26px;
  margin-bottom: 30px;
  }
  #article-body ul li {
    padding-left: 13px;
    margin: 0 0 18px;
    }

  /* ----- title ----- */
  .page-ttl span {
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
    }
    .ttl-link {
    	background: #005bac;
    	font-size: 11px;
    	margin-top: -10px;
    	-moz-border-radius: 4px;
    			 border-radius: 4px;
    	position: absolute;
    	top: 50%;
    	right: 18px;
    	}
    #article-body .ttl-link a {
    	color: #fff;
    	padding: 3px 12px 1px;
    	display: block;
    	}
    #article-body .ttl-link a:hover {
    	text-decoration: none;
    	}


/* ---------------------------------------------------------
 #header
--------------------------------------------------------- */


/* ---------------------------------------------------------
 #contents
--------------------------------------------------------- */
/* ----- #article-body ----- */
#article-body a {
  color: #00C0FF;
  }
  #article-body a:hover,
	#article-body a:active {
	  text-decoration: underline;
		}
  #article-body h2 {
  	background: url(../png/bg_page-sttl.png) 0 center repeat-x;
  	color: #fff;
  	clear: both;
  	}
  #article-body img {
    display: block;
    margin: 0 auto;
    }
p.lead {
	padding: 20px 0 0 24px;
	}
.page-sttl + p.lead,
.section-ttl + p.lead {
  padding-top: 0;
  }


/* Responsive max-width: 786px
--------------------------------------------------------- */
@media screen and (max-width: 786px) {
/* ---------------------------------------------------------
 #contents
--------------------------------------------------------- */
/* ----- #article-body ----- */
  #article-body h2 {
    background-size: 20px 50px;
    }

}



/* Responsive max-width: 640px
--------------------------------------------------------- */
@media screen and (max-width: 640px) {
/* ----- #contact-form ----- */
.page-sttl {
	padding: 14px 14px 12px;
	}
.section-ttl {
	padding: 18px 15px 14px;
	}
p.lead {
	padding: 20px 0 0 0;
	}
	p.lead img {
		margin: 0 auto 20px;
		display: block;
		float: none;
		}
#article-body ul {
	padding-left: 5px;
	}

}