@charset "utf-8";
/* CSS Document */

.pageTitle {
	padding:12px 0 0 0;
	margin:0 0 12px 0;
	text-align: center;
}

.pageTitle h2 {
	display:inline-block;
	padding:0 0 26px 0;
	margin:0;
	background:url(../img/title_mark.png) no-repeat bottom center;
	background-size:45px 17px;
	color:#a07f35;
	text-align:center;
	font-family:Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	font-size:24px;
	font-weight:normal;
}

.pageTitle h2:after {
	display:block;
	content:"Privacy policy";
	font-size:11px;
}

.productsSection {
	padding:0 0 48px 0;
	margin:0;
}

.productsSection .photo {
	position:relative;
	padding:0;
	margin:0;
}

.productsSection .photo .photoList {
	position:absolute;
	top:12px;
	right:12px;
	padding:0;
	margin:0;
	width:64px;
}

.productsSection .photo .photoList ul {
	padding:0;
	margin:0;
}

.productsSection .photo .photoList ul li {
	padding:0;
	margin:0 0 6px 0;
	border:solid 1px #a07f35;
	width:64px;
	height:64px;
	cursor:pointer;
}

.productsSection .description {
	padding:0;
	margin:0 auto;
	width:90%;
}

.productsSection .description h2 {
	padding:0;
	margin:0 0 24px 0;
	color:#a07f35;
	font-size:18px;
}

p.brand {
	display:block;
	padding:18px 0 0 0;
	margin:0 0 5px 2px;
	width:64px;
	height:0px;
	overflow:hidden;
	background:url(../img/cre_logo.png) no-repeat top center;
	background-size:64px 18px;
}

.productsSection .description p.title {
	color:#c2727d;
	font-size:18px;
}

.productsSection .description p.coment {
	font-size:13px;
}

.productsSection .description .price {
	border-top:solid 1px #a07f35;
	border-bottom:solid 1px #a07f35;
	padding:.75em 0;
	margin:0 0 24px 0;
	font-size:13px;	
}

.productsSection .description .price p {
	padding:0;
	margin:0;
	color:#a07f35;
}

.productsSection .description .price p span {
	padding:0;
	margin:0 1em 0 0;
}

.productsSection .howto {
	border-top:solid 1px #cccccc;
	padding:12px 0 0 0;
	margin:0 auto;
	width:90%;
	font-size:12px;
}

.productsSection .howto p {
	padding:0;
	margin:0;
}

.productsSection .howto p span {
	padding:.1em .3em;
	margin:0 .5em 0 0;
	border:solid 1px #272727;
	font-size:14px;
}

.componentList {
	padding:12px 0;
	margin:0 auto;
	width:90%;
	text-align:right;
}

.componentList p {
	display:inline-block;
	padding:6px 14px;
	margin:0;
	border:solid 1px #a07f35;
	border-radius:30px; 
    -webkit-border-radius:30px;  
    -moz-border-radius:30px;
	color:#a07f35;
	font-size:12px;
	cursor:pointer;
}

.componentList p span {
	padding:0 0 0 14px;
	background:url(../img/arrow_gold.png) no-repeat left 50%;
	background-size:10px 10px;
}

.component {
  position: fixed;
  top: 0;
  left: 0;
  z-index:999;
  width: 100%;
  height: 100%;
  background: rgba(240, 240, 240, .9);
  opacity: 0;
  visibility: hidden;
  transition: .3s linear;
}

.component .inner {
	padding:24px 0;
	margin:0 auto;
	width:90%;
	font-size:12px;
}

.component .inner h5 {
	padding:0 0 12px 0;
	margin:0 0 12px 0;
	background:url(../img/title_mark.png) no-repeat bottom center;
	background-size:32px 12px;
	color:#a07f35;
	text-align:center;
	font-size:18px;
}

.component .inner p.title {
	display:inline-block;
	padding:0 .5em;
	margin:0 0 1em 0;
	border:solid 1px #a07f35; 
	color:#a07f35;
	font-size:14px;
}

.component .inner p.brand {
	display:block;
	padding:18px 0 0 0;
	margin:0 0 5px 2px;
	width:64px;
	height:0px;
	overflow:hidden;
	background:url(../img/cre_logo.png) no-repeat top center;
	background-size:64px 18px;
}

.component .inner p.coment {
	padding:0;
	margin:0 0 3em 0;
	font-size:10px;
}

.component.open {
  opacity: 1;
  visibility: visible;
}


.component .close {
	text-align:center;
}

.component .close p {
	display:inline-block;
	padding:0 0 0 32px;
	margin:0;
	background:url(../img/close_mark.png) no-repeat top left;
	background-size:30px 30px;
	color:#a07f35;
	font-size:18px;
	font-weight:bold;
	text-decoration:underline;
	cursor:pointer;
}

.component .close p:hover {
	text-decoration:none;
}


/*----------------------------------------------------------------------------
 ***                                                                width480
----------------------------------------------------------------------------*/

@media only screen and (min-width: 480px){
}

/*----------------------------------------------------------------------------
 ***                                                                width768
----------------------------------------------------------------------------*/

@media only screen and (min-width: 768px){

.pageTitle {
	background:url(../img/qa_bg.png) no-repeat top center;
	text-align: center;
	height:480px;
	padding: 96px 0 0 0;
	margin:0;
	overflow: hidden;
}

.pageTitle h2 {
	font-size:55px;
	padding:0;
	line-height:1.3em;
	margin:0 auto;
	display:inline-block;
}

.pageTitle h2 span {
	display:block;
	font-size:18px;
	font-weight:bold;
	line-height:1em;
}

.pageTitle p.outline {
	font-size:42px;
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
	width:90%;
	max-width:992px;
	padding:48px 0 0 0;
	margin:0 auto;
}

.productsSection {
	padding:0 0 48px 0;
	margin:0 auto;
	width:90%;
	max-width:1024px;
}

.productsSection .photo {
	float:left;
	padding:0;
	margin:0 auto;
	width:50%;
}


.productsSection .description {
	float:left;
	padding:48px 0 0 0;
	margin:0 auto;
	width:50%;
}

.productsSection .description h2 {
	padding:0;
	margin:0 0 24px 0;
	font-size:22px;
}

.productsSection .description p.coment {
	padding:0 0 1.5em 0;
}

.productsSection .howto {
	padding:12px 0 0 0;
	margin:0 auto;
	width:auto;
	max-width:1024px
	font-size:14px;
}

.productsSection .howto h3 {
	font-size:16px;
}

.productsSection .howto p {
	padding:0 0 1.5em 0;
}

.productsSection .howto p span {
	padding:.1em .5em;
	margin:0 .5em 0 0;
	border:solid 1px #272727;
	font-size:14px;
}

.component .inner {
	padding:48px;
	margin:100px auto 0 auto;
	border:solid 3px #a07f35;
	width:90%;
	max-width:640px;
	background:#ffffff;
	font-size:12px;
}


}

/*----------------------------------------------------------------------------
 ***                                                                width992
----------------------------------------------------------------------------*/

@media only screen and (min-width: 992px){

}