/* ==========================================================================
	Common  */

html {
	height: 100%;
	width: 100%;
}

html,body {
	font: normal 1em/2em 'dinregular', 'dinlight', "Arial", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	padding: 0;
	width: 100%;
	min-height: 100%;
	color: #444;
	background-color: #FFF;
	max-width: 920px;
}
div,p,ul,li,dl,dt,dd {
	margin: 0;
	padding: 0;
}
img {
    border-style:none;
}

.marTo4p {
	margin-top:4.5% !important;
}
.marBo20 {
	margin-bottom:1em !important;
}
.marBo10 {
	margin-bottom:0.5em !important;
}
.marBo2em{
	margin-bottom:2em !important;
}
.marBo4em{
	margin-bottom:4em !important;
}
.marBo3em{
	margin-bottom:3em !important;
}
.marBo5em{
	margin-bottom:5em !important;
}
.marTo3em{
	margin-top:3em !important;
}
.marTo4em{
	margin-top:4em !important;
}

.marR0px{
	margin-right:0px !important;
}
.marL0px{
	margin-left:0px !important;
}
.marAuto{
	margin:auto !important;
}
.noShadow {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.tACenter {
	text-align:center !important;
}

/*A new micro clearfix hack*/

.clearFix:before,
.clearFix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearFix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearFix {
    *zoom: 1;
}

/*選択時カラー*/
::selection {
	background-color: #FFFA66;
	color: #333333;
}
::-moz-selection {
	background:#FFFA66;
	color: #333333;
}

/*リンク時の挙動*/
a {
	color: inherit;
	outline: none;
	text-decoration: none;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}
a:focus {
	outline: none;
	width: auto;
	margin-left: 0px;
}

h1,h2,h3,p,img a {
	color: inherit;
	outline: none;
	text-decoration: none;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}
h1,h2,h3,p,img a:focus {
	outline: none;
}


/* ==========================================================================
	プロダクトディテール> PC  */

#detailBody {
	background-color:#FFFFFF
}

#productDitail {
}
.prductUnit {
	margin-bottom: 6rem;
	padding-bottom:4rem !important;
}

#productDitail h2 {
	margin-left: 4%;
	margin-right: 4%;
	width: 92%;
	margin-top: 3rem;
	margin-bottom: 1rem;
	text-align: left;
	font-family: 'Droid Sans', sans-serif;
	font-weight : normal;
	font-size: 1.5rem;
}

#productDitail h2 span {
	font-family: 'Droid Sans', sans-serif;
	font-weight: normal;
	color:#CCCCCC;
	margin-left:0.75rem;
}
#productDitail .sampleTltle {
	margin-left: 4%;
	margin-right: 4%;
	width: 92%;
	margin-top: 4rem;
	margin-bottom: 1rem;
	text-align: left;
}
#productDitail h3 {
	font-family: 'Droid Sans', sans-serif;
	font-weight:normal;
	font-size:0.9rem;
	background-color:#DDDDDD;
	display:inline;
	padding:1%;
}
#productDitail .sample {
	margin-left: 4%;
	margin-right: 4%;
	width: 92%;
	margin-top: 0.5rem;
	text-align: left;
	font-family: 'Droid Sans', sans-serif;
	font-weight : normal;
	font-size: 0.8rem;
	color: #CCCCCC;
}
#productDitail .se {
	margin-left: 4%;
	margin-right: 4%;
	width: 92%;
	text-align: left;
	font-family: 'Droid Sans', sans-serif;
	font-weight : normal;
	font-size: 0.8rem;
	color: #CCCCCC;
}

#skuNo {
	margin-left: 4%;
	margin-right: 4%;
	margin-bottom: 4rem;
	width: 92%;
	font-family: 'Droid Sans', sans-serif;
	font-weight : normal;
	font-size: 0.8rem;
	color: #CCCCCC;
}
.prductUnit #comment {
	width:100%;
	font-size: 0.95rem;
	margin-bottom: 1rem;
}

.prductUnit #material{
	width:100%;
	font-size: 0.8rem;
	margin-bottom: 2rem;
}

@media screen and (max-width: 640px ) {
#productDitail h2 {
	margin-left: 4%;
	margin-right: 4%;
	width: 92%;
	margin-bottom: 3rem !important;
}
}



#productDitail img{
	border: none;
	-webkit-box-shadow: 2px 2px 2px #CCCCCC;
	box-shadow: 2px 2px 2px #CCCCCC;
}
#productDitail img:hover {
	opacity: 0.7;
}

#productDitail  .imgSmallAll {
	margin-left: 4%;
	text-align: left;
	width: 100%;
}

#productDitail  .imgSmall  {
	width: 22%;
	margin-top: 0.5%;
	margin-right: 0.5%;
	margin-left: 0%;
	margin-bottom: 1%;
}


@media screen and (max-width: 640px ) {
#productDitail  .img  {
	margin-top: 1rem;
	margin-bottom:1rem;
	width:100%;
}
#productDitail .imgSmall  {
	width: 43%;
	margin-top: 0%;
	margin-right: 1%;
	margin-left: 1%;
	margin-bottom: 3%;
}	
}

.detailTable{
	font-size:0.8rem;
	border-collapse: collapse;
	width:90%;
	margin-left:5%;
	margin-right:5%;
}
.detailTable th{
	margin-left:1rem;
	padding: 0;
	text-align: left;
	vertical-align: top;
	color: #333;
	background-color: #FFFFFF;
	border: none;
}
.detailTable td{
	padding: 0;
	background-color: #fff;
	border: none;
}



/* ==========================================================================
	コンタクトページ > PC  */


#mailForm {
	font-size: 1rem;
	text-align: left;
	line-height: 2em;
	font-family: "ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho", "MS 明朝",serif;
	font-weight: normal;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}
#mailForm  p {
	text-align:left;
	margin-bottom:0.8rem;
}
#mailForm span {
	margin-right:1em;
}
#mailForm .submit {
	width: 100%;
	margin-top: 20px;
	font-size: 1em;
	padding-top: 15px;
	padding-right: 30px;
	padding-left: 30px;
	padding-bottom: 15px;
	background-color: #222222;
	color: #fff;
	border-style: none;
	box-shadow: 2px 2px 3px 1px #666;
	-moz-box-shadow: 2px 2px 3px 1px #666;
	-webkit-box-shadow: 2px 2px 3px 1px #666;
	text-shadow: 1px 1px 2px #000;
	border-radius: 4px;
}
#mailForm .msg {
	width: 100%;
}
#mailForm .submit:hover {
	background-color: #595959;
	color: #fff;
}

@media screen and (max-width: 640px ) {
#mailForm {
	width: 100%;
	margin-left: 0%;
	margin-right: 0%;
}
}


/* ==========================================================================
	ニュースオーバーレイ用 > PC＆スマホ  */
	
  .cap-overlay {
	width: 100%;
	color: #fff;
	background: rgba(45,63,68, 0.5);
	padding: 12px;
	line-height: 1.4em;
	font-size: 0.8em;
}
.cap-overlay h3 {
	font-weight: normal;
	font-style: normal;
	width: 90%;
	height:100%;
}
.cap-overlay .date {
	font-size: 1em;
	line-height: 1em;
}
.cap-overlay .cate {
	font-size: 0.9em;
	line-height: 3em;
	text-decoration:underline;
}
.cap-overlay .title {
	line-height: 1.4em;
	font-size: 1em;
	line-height: 1.4em;
	margin-bottom:1.4em;
}

#imgNewSP {
	display: none;
	min-width: 0;
}






/* ==========================================================================
	スクロールアップ > スマホ＆PC  */

#scrollUp {
	bottom: 10px;
	right: 10px;
	color: #fff;
	font-size: 1.5em;
	text-decoration: none;
	opacity: 1;
	width: 2.5em;
	height: 2.5em;
	text-align: center;
	line-height: 2.5em;
	background-color: #CCCCCC;
	border-radius: 2px;
}

#scrollUp:hover {
	opacity: 1.0;
	background: #ccc;
}


/* ==========================================================================
	フッター > PC  */

#footer {
}
.copy {
	font-size: 0.9rem;
	font-weight: bold;
	margin-top: 5rem;
	margin-bottom: 5rem;
	color: #222222;
	text-align: center;
	font-family: 'EB Garamond', serif;
}
@media screen and (max-width: 640px ) {
.copy {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
	position: relative;
	bottom: 2.5rem;
}
}



/* ==========================================================================
	.fitgrd - responsive grid system
	open http://www.fitgrd.com for more information
	download at https://github.com/jayalai/fitgrd
	Licensed under GPL and MIT. */


* {
	outline: none;
	vertical-align: top;
}

.center {
	max-width: 1200px;
	margin: 0 auto;
}

.row {
	margin: .5em; 
	padding: 0;
	overflow: hidden;
	height: 1%;
	*zoom: 1;
	min-height: 1%;
}

.row1 {
	margin: .5em .7em;
	padding: 2% 1em 0;
	overflow: hidden;
	height: 1%;
	*zoom: 1;
	min-height: 1%;
}

.rowMap {
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 1%;
	*zoom: 1;
	min-height: 1%;
}

.rowCollection {
	margin: 0; 
	padding: 0;
	overflow: hidden;
	height: 1%;
	*zoom: 1;
	min-height: 1%;
}


/* ========================================
   columns w/ margin*/
   
.fg1,
.fg2,
.fg3,
.fg4,
.fg5,
.fg6,
.fg7,
.fg8,
.fg9,
.fg10,
.fg11,
.fg12 {
	margin: 0 2%;
	padding: 0;
	float: left;
	position: relative;
}

.fg12Collection {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
}

.fg12 {
	width: 96%;
}

.fg11 {
	width: 87.66%;
}

.fg10 {
	width: 79.33%;
}

.fg9 {
	width: 71%;
}

.fg8 {
	width: 62.66%;
}

.fg7 {
	width: 54.33%;
}

.fg6 {
	width: 46%;
}

.fg5 {
	width: 37.66%;
}

.fg4 {
	width: 29.33%;
}

.fg3 {
	width: 21%;
}

.fg2 {
	width: 12.66%;
}

.fg1 {
	width: 4.33%;
}

/* ========================================
   push w/ columns */
   
.push12 {
	margin-left: 100%;
}

.push11 {
	margin-left: 93.66%;
}

.push10 {
	margin-left: 85.33%;
}

.push9 {
	margin-left: 77%;
}

.push8 {
	margin-left: 68.66%;
}

.push7 {
	margin-left: 60.33%;
}

.push6 {
	margin-left: 52%;
}

.push5 {
	margin-left: 43.66%;
}

.push4 {
	margin-left: 35.33%;
}

.push3 {
	margin-left: 27%;
}

.push2 {
	margin-left: 18.66%;
}

.push1 {
	margin-left: 10.33%;
}

/* ========================================
   columns w/ margin 1%*/

.fg-1_1,
.fg-1_2,
.fg-1_3,
.fg-1_4,
.fg-1_5,
.fg-1_6,
.fg-1_7,
.fg-1_8,
.fg-1_9,
.fg-1_10,
.fg-1_11,
.fg-1_12 {
	margin: 0 1%;
	padding: 0;
	float: left;
	position: relative;
}

.fg-1_12 {
	width: 98%;
}

.fg11 {
	width: 87.66%;
}

.fg10 {
	width: 79.33%;
}

.fg9 {
	width: 71%;
}

.fg8 {
	width: 62.66%;
}

.fg7 {
	width: 54.33%;
}

.fg6 {
	width: 46%;
}

.fg5 {
	width: 37.66%;
}

.fg4 {
	width: 29.33%;
}

.fg3 {
	width: 21%;
}

.fg2 {
	width: 12.66%;
}

.fg1 {
	width: 4.33%;
}

/* ========================================
   columns w/o margin */
  
.fg-no-gutter {
	padding: 0 2.5em;
	margin-top: 0;
	margin-bottom: 0;
}

.fg-no-gutter > [class*="fg"] {
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
}

.fg-no-gutter .fg12 {
	width: 100%;
}

.fg-no-gutter .fg11 {
	width: 91.66%;
}

.fg-no-gutter .fg10 {
	width: 83.33%;
}

.fg-no-gutter .fg9 {
	width: 75%;
}

.fg-no-gutter .fg8 {
	width: 66.66%;
}

.fg-no-gutter .fg7 {
	width: 58.33%;
}

.fg-no-gutter .fg6 {
	width: 50%;
}

.fg-no-gutter .fg5 {
	width: 41.66%;
}

.fg-no-gutter .fg4 {
	width: 33.33%;
}

.fg-no-gutter .fg3 {
	width: 25%;
}

.fg-no-gutter .fg2 {
	width: 16.66%;
}

.fg-no-gutter .fg1 {
	width: 8.33%;
}

/* ======================================= 
   push columns w/o margin  */
   
.fg-no-gutter .push12 {
	margin-left: 100%;
}

.fg-no-gutter .push11 {
	margin-left: 91.66%;
}

.fg-no-gutter .push10 {
	margin-left: 83.33%;
}

.fg-no-gutter .push9 {
	margin-left: 75%;
}

.fg-no-gutter .push8 {
	margin-left: 66.66%;
}

.fg-no-gutter .push7 {
	margin-left: 58.33%;
}

.fg-no-gutter .push6 {
	margin-left: 50%;
}

.fg12 .push5 {
	margin-left: 41.66%;
}

.fg-no-gutter .push4 {
	margin-left: 33.33%;
}

.fg-no-gutter .push3 {
	margin-left: 25%;
}

.fg-no-gutter .push2 {
	margin-left: 16.66%;
}

.fg-no-gutter .push1 {
	margin-left: 8.33%;
}

.fg-no-mobile {
	display: block;
}

.fg-no-desktop {
	display: none;
}

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

.row { /*padding: 0 1em;*/
	padding: 0 5px;
	margin: 0;
}

.fg1,
.fg2 {
	width: 46%;
	margin-bottom: 1em;
}

.fg3,
.fg4,
.fg5,
.fg6,
.fg7,
.fg8,
.fg9,
.fg10,
.fg11,
.fg12 {
	margin-top: 0;
	margin-right: 5%;
	margin-left: 5%;
	margin-bottom: 1em;
	padding: 0;
	width: 90%;
}

.fg12Collection {
	margin-top: 0;
	margin-right: 5%;
	margin-left: 5%;
	margin-bottom: 1em;
	padding: 0;
	width: 90%;
}

.fg-no-gutter > [class*="fg"] {
	width: 50%;
}

.fg-no-mobile {
	display: none;
}

.fg-no-desktop {
	display: block;
}
}

/* smartphone */	  	 
@media screen and (max-width: 640px ) {

/*@media screen and (max-width: 30em ) {*/
	
.row { /*padding: 0 1em;*/
	padding: 0 5px;
	margin: 0;
}

.fg1,
.fg2 {
	width: 46%;
	margin-bottom: 1em;
}

.fg3,
.fg4,
.fg5,
.fg6,
.fg7,
.fg8,
.fg9,
.fg10,
.fg11,
.fg12 {
	margin-top: 0;
	margin-right: 2%;
	margin-left: 2%;
	margin-bottom: 1em;
	padding: 0;
	width: 96%;
}

.fg12Collection {
	margin-top: 0;
	margin-right: 5%;
	margin-left: 5%;
	margin-bottom: 1em;
	padding: 0;
	width: 90%;
}

.fg-no-gutter > [class*="fg"] {
	width: 50%;
}

.fg-no-mobile {
	display: none;
}

.fg-no-desktop {
	display: block;
}
}