@charset "utf-8";

/* =================================================

	Common base
	 
----------------------------------------------------
*
		Browser Reset

		Format
		Layout
		footer
		Parts
*
================================================= */

/* =================================================

		Browser Reset

================================================= */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block;}

html {}

blockquote,
q { quotes: none;}

blockquote:before,
blockquote:after,
q:before, q:after { content: ""; content: none;}

input,
textarea,
select { margin: 0; padding: 0; font-family: inherit; font-size: inherit; font-weight: inherit;}

ol ,
ul { list-style: none;}

table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: inherit;}

th { text-align: left;}

sup,
sub { font-size: 75%;}


a,
a:focus { outline: none;}

img { border: 0; vertical-align: top; line-height: 0;}

hr { height: 0; margin: 0; border: none; border-bottom: 1px solid #f90;}


/*	break
---------------------------------------------- */

div, h1, h2, h3, h4, h5, h6, dt, dd, p {
	word-break: break-word;
	overflow-wrap: break-word;
}



/*	border-box
---------------------------------------------- */

*, *:before, *:after {
	-webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
			 -o-box-sizing: border-box;
			-ms-box-sizing: border-box;
					box-sizing: border-box;
}


/*	form parts reset
---------------------------------------------- */

input[type="button"],
input[type="text"],
input[type="submit"] {
	-webkit-appearance: none;
}
input[type="button"],
input[type="text"] {
	border-radius: 0;
}

input[type="button"],
input[type="text"],
input[type="submit"], 
textarea,
select {
	margin: 0px;
	padding: 0px;
	border: none;
	border: 1px solid #ccc;
	border-radius: 0px;
	outline: 0px;
	outline: none;
	background: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input[type="radio"],
input[type="checkbox"] {
	cursor: pointer;
}








/* =================================================

		Format

================================================= */

@font-face {
  font-family: "YuGothic";
  src: local("YuGothic M");
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic B");
	font-weight: bold;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic bold");
	font-weight: bold;
}

html {
	font-size: 62.5%;
}

body {
	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 12px;
	line-height: 1.8;
	color: #888; /* color basic */
	background-color: #fff;
}

/*@media all and (-ms-high-contrast:none){
body {
	font-family: "メイリオ", "Meiryo", sans-serif;
	line-height: 1.8;
}
}
*/
.ie9 body {
	font-family: "メイリオ", "Meiryo", sans-serif;
	line-height: 24px;
}

html,
body {
	height: 100%;
}

img {
	width: 100%;
	height: auto;
}


/*
@-moz-document url-prefix() {
	firefox hack 
}
*/
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
	chrome,safari hack 
}
*/


/* ----------------------------------------------
		a
---------------------------------------------- */

a {
	text-decoration: underline;
	color: #888; /* color basic */
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
a:hover {
	opacity: 0.7;
}
a.txtDecoNo {
	text-decoration: none;
}

a img {
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
a:hover img {
	opacity: 0.7;
}

.ios a,
.ios a img {
	-webkit-transition: 0;
	-moz-transition: 0;
	-o-transition: 0;
	transition: 0;
}
.ios a:hover,
.ios a:hover img {
	opacity: 1;
}


@media screen and (max-width: 750px) {
	
a,
a img {
	-webkit-transition: 0;
	-moz-transition: 0;
	-o-transition: 0;
	transition: 0;
}
a:hover,
a:hover img {
	opacity: 1;
}
}



/* ----------------------------------------------
		input
---------------------------------------------- */

input[type="text"],
textarea {
	padding: 8px 10px;
	border-radius: 6px;
	background-color: #fff;
}
input[type="text"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #666; /* color1 */
	font-family: 'Domine', serif;
}
input[type="text"]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	color: #666; /* color1 */
	font-family: 'Domine', serif;
}
input[type="text"]::-moz-placeholder,
textarea::-moz-placeholder {
	color: #666; /* color1 */
	font-family: 'Domine', serif;
}



/* ----------------------------------------------
		css anime
---------------------------------------------- */

#document {
	-ms-animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
	animation: fadeIn 2s ease 0s 1 normal;
}

@-webkit-keyframes fadeIn {
	0% { opacity: 0;}
	100% { opacity: 1;}
}
@keyframes fadeIn {
	0% { opacity: 0;}
	100% { opacity: 1;}
}









/* =================================================

		Layout

================================================= */

#document {
	position: relative;
	/*min-height: 100%;*/
}

.base {
	max-width: 960px;
	margin-left:  auto;
	margin-right: auto;
}
#footer .base {
	max-width: 1000px;
	margin-left:  auto;
	margin-right: auto;
}

.inrTB {
	padding-top: 50px;
	padding-bottom: 50px;
}
.inrA {
	padding-left:  0px;
	padding-right: 0px;
}
.inrB {
	padding-left:  20px;
	padding-right: 20px;
}


@media screen and (max-width: 1070px) {

#document {
	width: auto;
	/*min-width: 0px;
	min-width: none;
	min-width: auto;
	min-width: initial;*/
}

.base {
	max-width: 0px;
	max-width: none;
	max-width: auto;
	max-width: initial;
	padding-left: 55px;
	padding-right: 55px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#footer .base {
	max-width: 0px;
	max-width: none;
	max-width: auto;
	max-width: initial;
	padding-left:  35px;
	padding-right: 35px;
}
}


@media screen and (max-width: 750px) {

.base {
	padding-left:  0px;
	padding-right: 0px;
}
#footer .base {
	padding-left:  0px;
	padding-right: 0px;
}

.inrA,
.inrB {
	padding-left:  55px;
	padding-left:  7.333333333333333%;
	padding-right: 55px;
	padding-right: 7.333333333333333%;
}
}








/* =================================================

		footer

================================================= */

/* ----------------------------------------------
		footerCopyright
---------------------------------------------- */

#footer .footerCopyright {
	margin: 20px 0px;
	text-align: center;
	font-size: 12px; font-size:  86%;
}








/* =================================================

		Parts

================================================= */

/* ----------------------------------------------
		Display Variation
---------------------------------------------- */

/*	align --- basic
---------------------------------------------- */
.taC { text-align: center;}
.taL { text-align: left;}
.taR { text-align: right;}

.vaM  { vertical-align: middle;}
.vaT  { vertical-align: top;}
.vaB  { vertical-align: bottom;}
.vaBS { vertical-align: baseline;}


/*	align --- change
---------------------------------------------- */
.taCL { text-align: center;}
.taRL { text-align: right;}

.vaMT  { vertical-align: middle;}
.vaBT  { vertical-align: bottom;}
.vaBST { vertical-align: baseline;}


@media screen and (max-width: 750px) {

.taCL { text-align: left;}
.taRL { text-align: left;}

.vaMT  { vertical-align: top;}
.vaBT  { vertical-align: top;}
.vaBST { vertical-align: top;}
}


/*	PC/SP change
---------------------------------------------- */
.pc_view { display:block;}
.sp_view { display:none;}


@media screen and (max-width: 750px) {
.pc_view { display:none;}
.sp_view { display:block;}
}


/* ----------------------------------------------
		clearfix / clear
---------------------------------------------- */

.cf::before,
.cf::after { content: ""; display: table;}
.cf::after { clear: both;}

.clearB { clear: both;}



/* ----------------------------------------------
		Font Variation --- base size:14px
---------------------------------------------- */

/*	font-size --- base size:12px
---------------------------------------------- */
/*.fontS   { font-size: 11px; font-size:  92%;}
.fontR   { font-size: 12px; font-size: 100%;}
.fontL   { font-size: 13px; font-size: 108%;}*/

/*	font-size
---------------------------------------------- */
.fontS4 { font-size: 10px; font-size:  71%;}
.fontS3 { font-size: 11px; font-size:  79%;}
.fontS2 {	font-size: 12px; font-size:  86%;}
.fontS  { font-size: 13px; font-size:  93%;}
.fontR  { font-size: 14px; font-size: 100%;}
.fontL  { font-size: 15px; font-size: 107%;}
.fontL2 { font-size: 16px; font-size: 114%;}
.fontL3 { font-size: 17px; font-size: 121%;}
.fontL4 { font-size: 18px; font-size: 129%;}
.fontL5 { font-size: 19px; font-size: 136%;}
.fontL6 { font-size: 20px; font-size: 143%;}
.fontL7 { font-size: 21px; font-size: 150%;}
.fontL8 { font-size: 22px; font-size: 157%;}
.fontL7 { font-size: 23px; font-size: 164%;}
.fontL8 { font-size: 24px; font-size: 171%;}


/*	font-size --- change
---------------------------------------------- */
/*https://websemantics.uk/tools/responsive-font-calculator/*/

@media screen and (max-width: 750px) {
  .fontL8 {
    font-size: calc(1.5rem + ((1vw - 7.5px) * 0.8));
  }
}


/*	font-weight
---------------------------------------------- */
h1, h2, h3, h4, h5, h6, dt, strong, em { font-weight: bold;}
.fontWB { font-weight: bold !important;}
.fontWN { font-weight: normal !important;}



/* ----------------------------------------------
		Title Variation
---------------------------------------------- */

.ttlA {
	margin-bottom: 60px;
	text-align: center;
	font-family: 'Domine', serif;
	font-weight: normal;
	font-size: 36px;
	font-size: 257%;
	line-height: 1.2;
	color: #666; /* color2 */
}
.ttlA::after {
	display: block;
	content: "";
	width: 80px;
	height: 100%;
	margin: 25px auto 0px;
	border-bottom: 1px solid #000;
}
.ttlA span {
	display: block;
	padding-top: 5px;
	font-family: Yu Gothic, YuGothic M, YuGothic, "游ゴシック Medium", "游ゴシック", "游ゴシック体", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size: 18px;
	font-size: 50%;
	line-height: 1.4;
}

.ttlB {
	margin-bottom: 40px;
	text-align: center;
	font-family: 'Domine', serif;
	font-weight: bold;
	font-size: 24px;
	font-size: 171%;
	line-height: 1.2;
	color: #666; /* color3 */
}

.ttlC {
	margin-bottom: 30px;
	font-size: 24px;
	font-size: 171%;
	line-height: 1.5;
	color: #666; /* color3 */
}



/* ----------------------------------------------
		Text Variation
---------------------------------------------- */

/*	text color
---------------------------------------------- */
.colorBasic {
	color: #888; /* color basic */
}

.colorA {
	color: #999; /* colorA */
}
.colorB {
	color: #333; /* colorB */
}
.colorC {
	color: #1a1a1a; /* colorC */
}
.colorD {
	color: #000; /* colorD */
}
.colorE {
	color: #545454; /* colorE */
}

.colorRed {
	color: #f00; /* color red */
}


/*	notes
---------------------------------------------- */
.notesA {
	padding-left: 1em;
	text-indent: -1em;
}
.notesB {
	padding-left: 1em;
	text-indent: -1em;
	text-align: right;
}


/*	break
---------------------------------------------- */
.wbAll { word-break: break-all;}



/* ----------------------------------------------
		Button Variation
---------------------------------------------- */

/*	btnA
---------------------------------------------- */
.btnA {
	width: 100%;
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
}
.btnA a {
	display: block;
	padding: 9px 10px 10px;
	border-radius: 6px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	font-size: 18px;
	font-size: 129%;
	line-height: 1.5;
	color: #fff;
	background-color: #333;
}
.btnA a span {
	display: block;
	font-size: 14px;
	font-size: 82%;
}


/*	btnB
---------------------------------------------- */
.btnB {
	width: 320px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.btnB a {
	display: block;
	padding: 9px 10px 10px;
	border: 1px solid #000;
	border-radius: 6px;
	text-align: center;
	text-decoration: none;
	font-family: 'Domine', serif;
	font-weight: normal;
	font-size: 18px;
	font-size: 129%;
	line-height: 1.5;
	color: #666; /* color4 */
}
.btnB a span {
	display: block;
	font-size: 14px;
	font-size: 82%;
}
.btnB a:hover {
	border: 1px solid #333;
	color: #fff;
	background-color: #333;
	opacity: 1;
}

@media screen and (max-width: 750px) {
	
.btnB a:hover {
	border: 1px solid #000;
	color: #666; /* color4 */
	background-color: transparent;
}
}


/*	btnC
---------------------------------------------- */
.btnC a {
	display: block;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
	font-size: 129%;
	line-height: 1.2;
	color: #666; /* color2 */
}
.btnC a::after {
	display: block;
	content: "";
	width: 80px;
	height: 100%;
	margin: 10px auto 0px;
	border-bottom: 4px solid #000;
}


/*	btnD
---------------------------------------------- */
.btnD {
	width: 320px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.btnD a {
	display: block;
	padding: 9px 10px 10px;
	border: 1px solid #999;
	border-radius: 6px;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
	font-size: 129%;
	line-height: 1.5;
	color: #888;
	background-color: rgba(255,255,255,.2);
}
.btnD a span {
	display: block;
	font-size: 14px;
	font-size: 82%;
}


/*	btnBack
---------------------------------------------- */

.btnBack {
	width: 160px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.btnBack a {
	position: relative;
}
.btnBack a::before {
	position: absolute;
	z-index: 10;
	left: 20px;
	top: auto;
	bottom: auto;
	content: "";
	width: 13px;
	height: 13px;
	margin-top: 7px;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.btnBack.btnD {
	width: 320px;
	max-width: 100%;
}
.btnBack.btnD a::before {
	margin-top: 15px;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
}

.btnB.btnBack a:hover::before {
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
}

@media screen and (max-width: 750px) {
	
.btnB.btnBack a:hover::before {
	border-top: 1px solid #000;
	border-left: 1px solid #000;
}
}



/* ----------------------------------------------
		Icon Variation
---------------------------------------------- */

/*	arwA
---------------------------------------------- */

.arwA {
	position: relative;
}
.arwA  a::before {
	position: absolute;
	z-index: 10;
	left: 28px;
	top: auto;
	bottom: auto;
	content: "";
	width: 13px;
	height: 13px;
	margin-top: 7px;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}



/* ----------------------------------------------
		Box Variation
---------------------------------------------- */

/*	boxA
---------------------------------------------- */
.boxA {
	width: 100%;
	max-width: 320px;
	padding: 19px 10px 20px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 6px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	font-size: 18px;
	font-size: 129%;
	line-height: 1.5;
	color: #fff;
	background-color: #aaa;
}



/* ----------------------------------------------
		Block Variation
---------------------------------------------- */

/*	tab
---------------------------------------------- */
.blkTab {
}

.blkTab .tab ul {
	display: table;
	border-collapse: separate;
	border-spacing: 80px 0px;
	width: auto;
	margin-left: auto;
	margin-right: auto;
}
.blkTab .tab ul li {
	display: table-cell;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
	font-size: 129%;
	line-height: 1.2;
	color: #ccc;
	cursor: pointer;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
.blkTab .tab ul li.current {
	color: #666; /* color2 */
	cursor: default;
}
.blkTab .tab ul li::after {
	display: block;
	content: "";
	width: 80px;
	height: 100%;
	margin: 10px auto 0px;
	border-bottom: 4px solid #ccc;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
.blkTab .tab ul li.current::after {
	border-color: #000;
}
.blkTab .tab ul li:hover {
	color: #666;
}
.blkTab .tab ul li:hover::after {
	border-color: #000;
}


.blkTab .tabContents {
	display: none;
	margin-top: 50px;
}
.blkTab .tabContents.current {
	display: block;
}


@media screen and (max-width: 750px) {

.blkTab .tab ul {
	border-collapse: collapse;
	border-spacing: 0px;
	width: 100%;
}
.blkTab .tab ul li {
	width: 50%;
}
.blkTab .tab ul li:first-child {
	padding-right: 5px;
}
.blkTab .tab ul li:last-child {
	padding-left: 5px;
}
.blkTab .tab ul li::after {
	width: 100%;
}

.blkTab .tab ul li:hover {
	color: #ccc;
}
.blkTab .tab ul li:hover::after {
	border-color: #ccc;
}
.blkTab .tab ul li.current:hover {
	color: #666;
}
.blkTab .tab ul li.current:hover::after {
	border-color: #000;
}
}



/* ----------------------------------------------
		List Style
---------------------------------------------- */

/*	list --- basic
---------------------------------------------- */
.listDisc,
.listCircle,
.listDecimal,
.listUalfa,
.listLalfa,
.lstUroman,
.listLroman,
.listKatakana,
.listHiragana { padding-left: 1.5em;}

.listDisc li,
.listCircle li,
.listDecimal li,
.listUalfa li,
.listLalfa li,
.listUroman li,
.listLroman li,
.listKatakana li,
.listHiragana li { list-style-position: outside; margin-bottom: 0.2em;}

.listDisc li     { list-style-type: disc;}
.listCircle li   { list-style-type: circle;}
.listDecimal li  { list-style-type: decimal;}
.listUalfa li    { list-style-type: upper-alpha;}
.listLalfa li    { list-style-type: lower-alpha;}
.listUroman li   { list-style-type: upper-roman;}
.listLroman li   { list-style-type: lower-roman;}
.listKatakana li { list-style-type: katakana;}
.listHiragana li { list-style-type: hiragana;}
.listNone li     { list-style-type: none;}


/*	listProduct
---------------------------------------------- */
.listProduct {
	width: 970px;
	width: 101.0416666666667%;
	padding-top: 10px;
	margin-left: -5px;
	margin-left: -0.5208333333333333%;
	margin-top: -10px;
	overflow: hidden;
}

.listProduct ul {
	width: 996px;
	width: 102.680412371134%;
	margin-left: -14px;
	margin-left: -1.405622489959839%;
	margin-top: -70px;
}
.listProduct ul::before,
.listProduct ul::after { content: ""; display: table;}
.listProduct ul::after { clear: both;}

.listProduct ul li {
	float: left;
	width: 282px;
	width: 28.31325301204819%;
	margin: 70px 25px 0px;
	margin: 70px 2.51004016064257% 0px;
}

.listProduct ul li a {
	text-decoration: none;
}

.listProduct ul li div.productImg {
	position: relative;
	width: 282px;
	width: 100%;
	height: 0px;
	padding-top: 100%;
	overflow: hidden;

	-moz-box-shadow: 0px 0px 9px 0px #333;
	-webkit-box-shadow: 0px 0px 9px 0px #333;
	box-shadow: 0px 0px 9px 0px #333;
}
.listProduct ul li div.productImg img {
  position: absolute;
  top: 50%;
  left: 50%;
	max-width: 200%;
	width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.listProduct ul li div.productTxt h2 {
	margin-top: 20px;
	font-family: 'Domine', serif;
	font-weight: normal;
	font-size: 24px;
	font-size: 171%;
	line-height: 1.2;
	color: #666; /* color4 */
}
.listProduct ul li div.productTxt h2 span {
	display: inline-block;
	padding: 5px 8px 4px;
	margin-left: 1em;
	margin-top: -5px;
	vertical-align: middle;
	font-size: 12px;
	line-height: 12px;
	color: #fff;
	background-color: #c00;
}
.listProduct ul li div.productTxt p {
	margin-top: 10px;
	line-height: 1.4;
}


@media screen and (max-width: 750px) {

.listProduct {
	width: 100%;
	margin-left: 0px;
	overflow: visible;
}

.listProduct ul {
	width: auto;
	margin-left: 0px;
	margin-top: 0px;
}

.listProduct ul li {
	float: none;
	width: 100%;
	margin: 0px 0px 50px;
	text-align: center;
}
.listProduct ul li:last-child {
	margin: 0px 0px 0px;
}

.listProduct ul li::before {
	display: inline-block;
	content: "";
	width: 120px;
	height: 4px;
	margin: 0px auto;
	font-size: 0;
	line-height: 0;
	background-color: #999;
}
.listProduct ul li:nth-child(1)::before {
	display: none;
}

.listProduct ul li a {
	display: inline-block;
	width: 100%;
	margin-top: 60px;
}
.listProduct ul li:nth-child(1) a {
	margin-top: 0px;
}
.listProduct ul li a::before,
.listProduct ul li a::after { content: ""; display: table;}
.listProduct ul li a::after { clear: both;}

.listProduct ul li div.productImg {
	float: left;
	width: 300px;
	width: 46.875%;
	padding-top: 46.875%;
}

.listProduct ul li div.productTxt {
	float: left;
	width: 300px;
	width: 46.875%;
	margin-left: 40px;
	margin-left: 6.25%;
	text-align: left;
}
.listProduct ul li div.productTxt h2 {
	margin-top: 0px;
}
}


@media screen and (max-width: 420px) {

.listProduct ul li {
	margin-bottom: 35px;
}
.listProduct ul li:last-child {
	margin-bottom: 0px;
}

.listProduct ul li::before {
	height: 2px;
}
.listProduct ul li:nth-child(1)::before {
	display: none;
}

.listProduct ul li a {
	margin-top: 50px;
}
.listProduct ul li:nth-child(1) a {
	margin-top: 0px;
}

.listProduct ul li div.productImg {
	float: none;
	width: 260px;
	width: 72.22222222222222%;
	padding-top: 72.22222222222222%;
	margin-left: auto;
	margin-right: auto;
}

.listProduct ul li div.productTxt {
	float: none;
	width: 100%;
	margin-left: 0px;
}
.listProduct ul li div.productTxt h2 {
	margin-top: 20px;
}
}


/*	listPhoto
---------------------------------------------- */
.listPhoto {
	width: 970px;
	width: 101.0416666666667%;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: -5px;
	margin-left: -0.5208333333333333%;
	margin-top: -10px;
	overflow: hidden;
}

.listPhoto ul {
	width: 996px;
	width: 102.680412371134%;
	margin-left: -14px;
	margin-left: -1.405622489959839%;
	/*margin-top: -50px;*/
}
.listPhoto ul::before,
.listPhoto ul::after { content: ""; display: table;}
.listPhoto ul::after { clear: both;}

.listPhoto ul li {
	float: left;
	width: 282px;
	width: 28.31325301204819%;
	margin: 50px 25px 0px;
	margin: 50px 2.51004016064257% 0px;
}

.listPhoto ul li div.productImg {
	position: relative;
	width: 282px;
	width: 100%;
	height: 0px;
	padding-top: 100%;
	overflow: hidden;

	-moz-box-shadow: 0px 0px 9px 0px #333;
	-webkit-box-shadow: 0px 0px 9px 0px #333;
	box-shadow: 0px 0px 9px 0px #333;
	cursor: pointer;
}
.listPhoto ul li div.productImg img {
  position: absolute;
  top: 50%;
  left: 50%;
	max-width: 200%;
	width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.listPhoto ul li figure figcaption {
	display: none;
}

@media screen and (max-width: 750px) {

.listPhoto {
	width: 100%;
	margin-left: 0px;
	overflow: visible;
}

.listPhoto ul {
	width: 680px;
	width: 106.25%;
	margin-left: -20px;
	margin-left: -3.125%;
	/*margin-top: -50px;*/
}

.listPhoto ul li {
	width: 300px;
	width: 44.11764705882353%;
	margin: 40px 20px 0px;
	margin: 40px 2.941176470588235% 0px;
}

.listPhoto ul li div.productImg::after {
	content: "";
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 24px;
	height: 24px;
	background: url(../img/icon_zoom.png) right bottom no-repeat rgba(153,153,153,0.5);
	background-size: 24px 24px;
}
}


/*	listCategory
---------------------------------------------- */
.listCategory {
	margin-top: 30px;
	margin-bottom: 30px;
}

.listCategory ul {
	display: table;
	border-collapse: separate;
	border-spacing: 25px 0px;
	width: auto;
	margin-left: auto;
	margin-right: auto;
}
.listCategory ul li {
	display: table-cell;
}


@media screen and (max-width: 750px) {

.listCategory ul {
	display: block;
	border-collapse: collapse;
	border-spacing: 0px;
}
.listCategory ul li {
	display: block;
	margin-top: 20px;
}
.listCategory ul li:first-child {
	margin-top: 0px;
}
}


/*	collectionArea
---------------------------------------------- */
.collectionArea {
	max-width: 665px;
	margin-right: auto;
	margin-left: auto;
}

.collectionArea .itemDetailTxt {
	margin-top: 20px;
}

.collectionArea .itemDetailTxt p:nth-child(n+2){
	margin-top:1em;
}

.collectionArea .addBlk01,
.collectionArea .addBlk02{
	margin-top:60px;
}

.collectionArea .addBlk01 .addBlkBox01,
.collectionArea .addBlk02 .addBlkBox02 {
	float: left;
	width: 460px;
	width: 47.91666666666667%;
}

.collectionArea .addBlk01 .addBlkBox02,
.collectionArea .addBlk02 .addBlkBox01 {
	float: right;
	width: 460px;
	width: 47.91666666666667%;
}


@media screen and (max-width: 750px) {
.collectionArea .addBlk01 .addBlkBox01,
.collectionArea .addBlk02 .addBlkBox01 {
	margin-bottom:30px;
}

.collectionArea .addBlk01 .addBlkBox01,
.collectionArea .addBlk02 .addBlkBox02,
.collectionArea .addBlk01 .addBlkBox02,
.collectionArea .addBlk02 .addBlkBox01 {
	float: none;
	width: 100%;
	text-align:center;
}

}