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

/************************************************************************************
ALL RESET
*************************************************************************************/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	zoom:1;   /* for IE */
}

/************************************************************************************
HTML5 FOR OLD BROWSER
*************************************************************************************/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
    display:block;
}

/************************************************************************************
GENERAL ADJUST
*************************************************************************************/
body {
    line-height:1;
}
html {
	height:100%;
}
html>/**/body {   /* for Firefox */
	overflow-y:scroll;
}
html:first-child body {   /* for Opera */
	min-height:100%;
	padding-bottom:1px;
}
table {
	border-collapse:collapse;   /* for IE */
	border:none;
	border-spacing:0;
}
th,td {
	border:solid 1px #000;
	font-weight:normal;
	text-align:left;
}
th {
	font-weight:bold;
	white-space:nowrap;
}
caption, th, td {
	text-align:left;
	vertical-align:top;
}
ul,ol,dl {
	list-style:none;
}
li{   /* for IE */
	display:list-item;
	zoom:normal;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}
img,a img {
	vertical-align:bottom;
	border:none;
	background:transparent;
}
object,embed {
	vertical-align:top;
}
fieldset {
	border:none;
}
input,textarea {
	font-size:1em;
}
textarea {   /* for IE */
	overflow:auto;
}
em,address,dfn {
 	font-style:normal;
}
ul ul,ul dl,dl ul,ul,table p,table ul,table table,table {
	font-size:1em;
}
hr {
	height:0px;
	margin:7px 0;
	border:none;
	border-top:1px solid #000;
}
* html hr {   /* for IE6 */
	margin:0;
}
*:first-child+html hr {   /* for IE7 */
	margin:0;
}

/************************************************************************************
*
*************************************************************************************/
* {
	-moz-box-sizing: border-box;   /* html fit brows */
	box-sizing: border-box;   /* html fit brows */
}
*:before, *:after {
	-moz-box-sizing: border-box;   /* html fit brows */
	box-sizing: border-box;   /* html fit brows */
}

/************************************************************************************
HTML,BODY
*************************************************************************************/
html,body {
	width:100%;
	height:100%;
	min-height:100%; /* html fit brows */
}
body {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-family:'Raleway','メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','sans-serif';
	color:#202020;
	font-size:1.0rem;
	font-size:10px\9;   /* for IE<8 */
	line-height:150%;
	text-align:center;
	overflow-x: hidden;
}

/************************************************************************************
CLEARFIX
*************************************************************************************/
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear: both;
	visibility:hidden;
}
.clearfix {/* for IE<8 */
	zoom:1;
}

/************************************************************************************
FLOAT
*************************************************************************************/
.floatleft {
	float:left;
}
.floatright {
	float:right;
}
.floatnone {
	float:none;
}

/************************************************************************************
LINK
*************************************************************************************/
a {
	white-space:nowrap;
}
a:link {
	color:#FFFFFF;
	text-decoration:none;
	outline:none;
}
a:visited {
	color:#FFFFFF;
	text-decoration:none;
}
a:hover {
	color:;
	text-decoration:none;
}
a:active, a:focus{
	outline:none;
}
.alphaover a img {
	opacity:0.5;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	-ms-transition-duration:1s;
	transition-duration:1s;
}
.alphaover a:hover img {
	opacity:1.0;
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	-ms-transition-duration:1s;
	transition-duration:1s;
}
.none{
	opacity:0.4;
	filter:alpha(opacity=40);
	-moz-opacity:0.4;
}
a.ghostButton {
	width:240px;
	color:#ffffff;
	text-align:center;
	line-height:30px;
	font-family:'Raleway','メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','sans-serif';
	padding:10px 30px;
	margin:24px auto;
	background-color:transparent;
	border:2px #fff solid;
	border-radius:1px;
	box-shadow:0px 0px 6px 1px rgba(0,0,0,0.1);
	cursor:pointer;
	transition: all 0.4s;
	display:block;
	opacity:1.0;
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
}
a.ghostButton:hover {
	opacity:0.7;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
}
/************************************************************************************
TEXT
*************************************************************************************/
.yellow {
	color:#fdb712;
}
.gray01 {
	color:#f5f5f5;
}
.gray02 {
	color:#e9e9e9;
}
.gray03 {
	color:#202020;
}

/************************************************************************************
CONTAINER
*************************************************************************************/
#container {
	width:100%;
	height:100%;
	min-height:100%; /* html fit brows */
	font-size:0.9rem;
	font-size:9px\9;   /* for IE<8 */
	margin:0 auto;
}

/************************************************************************************
LOGO
*************************************************************************************/
#logo {
	width:50px;
	height:50px;
	position:fixed;
	left:0;
	top:0;
	z-index:9999;
}

#logo a {
	width:50px;
	height:50px;
	display:block;
}
#logo a img {
	width:100%;
	height:100%;
}

/************************************************************************************
HEADER
*************************************************************************************/

/*  MENU ICON CREATE */
.HiddenCheckbox {
	display:none;
}
.MenuIcon {
	width:50px;
	height:50px;
	cursor:pointer;
	display:block !important;
	
	-webkit-transition-duration:0.4s;
	-moz-transition-duration:0.4s;
	-o-transition-duration:0.4s;
	-ms-transition-duration:0.4s;
	transition-duration:0.4s;
	
	background-image:url(../images/humberger.png);
	-moz-background-size:contain;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:left top;
	position:fixed;
	right:0;
	top:0;
	z-index:9999 !important;
}

.HiddenCheckbox:checked ~ .MenuHeader {
	opacity:1;
	filter:alpha(opacity=100);
	-moz-opacity:1;
}
.HiddenCheckbox:checked ~ .MenuIcon {
	background-image:url(../images/close.png);
}

/*  MENU CSS */
.Menu {
	width:100%;
	height:100%;
	font-family:'メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','sans-serif';
	background:rgba(253,183,18,0.8);
	opacity:0.9;
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	
	-webkit-transition:right 0.4s;
	transition:right 0.4s;
	
	position:fixed;
	right:-100%;
	bottom:0;
	z-index:9997;
}	
.Menu-list {
	width:100%;
	height:auto;
	overflow:hidden;
	position:absolute;
	top:50%;
	margin-top:-213px;
	text-align:center;
}
.Menu-item a {
	color:#ffffff;
	font-size:30px;
	font-family:'Raleway';
	font-weight:200;
	line-height:150%;
	text-decoration: none;
	padding:20px 0;
	display:block;
	position:relative;
	z-index:5;
}
.Menu-item a:hover {
	color:#202020;
	text-indent:0;
	line-height:auto;
	transition:color 0.3s ease-in-out;
	-moz-transition:color 0.3s ease-in-out;
	-webkit-transition:color 0.3s ease-in-out;
}
.Menu li.current a {
	color:#202020;
}
@media only screen and (max-height: 377px) {
	.Menu-list {
		margin-top:-113px;
	}
	.Menu-item a {
		padding:0;
	}
}

/*  CALL SLIDE MENU  */
.HiddenCheckbox:checked ~ .Menu {
	right:0;
}

/************************************************************************************
CONTACT
*************************************************************************************/
#contact {
	width:50px;
	height:50px;
    position:fixed;
	_position: absolute;   /* for IE6 */
	left:0;
	bottom:0;
	z-index:9999;
}
#contact a {
	width:50px;
	height:50px;
	display:block;
	background-image:url(../images/mail.png);
	-moz-background-size:contain;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
    display:block;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	-ms-transition-duration:1s;
	transition-duration:1s;
}
#contact a:hover {
	background-image:url(../images/mail.png);
	-moz-background-size:contain;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	opacity:1.0;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	-ms-transition-duration:1s;
	transition-duration:1s;
}

/************************************************************************************
PAGE TOP
*************************************************************************************/
#page-top {
	width:50px;
	height:50px;
    position:fixed;
	_position: absolute;   /* for IE6 */
	right:0;
	bottom:0;
	z-index:9999;
}
#page-top a {
	width:50px;
	height:50px;
	display:block;
	background-image:url(../images/to_top.png);
	-moz-background-size:contain;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
    display:block;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	-ms-transition-duration:1s;
	transition-duration:1s;
}
#page-top a:hover {
	background-image:url(../images/to_top.png);
	-moz-background-size:contain;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	opacity:1.0;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	-ms-transition-duration:1s;
	transition-duration:1s;
}

/************************************************************************************
BG
*************************************************************************************/
.bg {
	width:100%;
	height:auto;
	min-width:640px;
	min-height:100%;
	position:absolute;
	top:50%;
	left:50%;
	z-index:-1;
}

/************************************************************************************
MODIFICATION
*************************************************************************************/
/*  TABLE  */
th,td {
	border:none !important;
}

/************************************************************************************
COMMON
*************************************************************************************/
section {
	display:-webkit-flex;   /* Safari */
	display:flex;
	-webkit-align-items:center;   /* Safari */
	align-items:center;
	padding:10px;
	position:relative;
}
section h2 {
	width:100%;
	font-size:40px;
	font-family:'Raleway';
	font-weight:100;
	padding:25px 0;
	position:absolute;
	top:25px;
	left:0;
}
section article {
	width:80%;
	margin:0 auto;
}

/************************************************************************************
INTRO
*************************************************************************************/
section#intro {
	width:100%;
	height:100%;
	min-height:100%; /* html fit brows */
	position:relative;
	overflow:hidden;
}
section#intro h1 {
	width:100%;
}
section#intro h1 img {
	width:20%;
	max-width:320px;
	min-width:200px;
	height:auto;
}

/************************************************************************************
NEWS
*************************************************************************************/
section#news {
	width:100%;
	min-height:100%; /* html fit brows */
	color:#202020;
	background-color:#f5f5f5;
}
section#news ul li.info {
	margin-bottom:10px !important;
}
@media only screen and (max-height:350px){
	section#news article {
		padding-top:15%;
		padding-bottom:15%;
	}
}

/************************************************************************************
ABOUT
*************************************************************************************/
section#about {
	width:100%;
	min-height:100%; /* html fit brows */
	color:#FFFFFF;
	position:relative;
	overflow:hidden;
}
section#about p {
	text-align:center;
	text-shadow: 0px 4px 3px rgba(0,0,0,0.8),0px 8px 13px rgba(0,0,0,0.2),0px 18px 23px rgba(0,0,0,0.2);
}
@media only screen and (max-height:481px){
	section#about article {
		padding-top:30%;
		padding-bottom:30%;
	}
}
@media only screen and (min-width:481px){
	section#about article {
		padding-top:15%;
		padding-bottom:15%;
	}
}

/************************************************************************************
COLLECTION
*************************************************************************************/
section#collection {
	width:100%;
	color:#202020;
	background-color:#e9e9e9;
	padding-bottom:24px;
}
section#collection article {
	margin-top:104px;
}
section#collection article  img {
	width:100%;
	height:auto;
	position:relative !important;
	overflow:hidden;
	max-width:100%;
	vertical-align:middle;

}
/*  MOUSEOVER ANIMATION  */
section#collection .collectionImg {
	margin-bottom:30px;
	position:relative;
	display:block;
}

section#collection article ul li span {
	position:absolute;
	display:none;
	text-indent:-99999em;
	
}
section#collection span h3 {
	width:80%;
	max-width:240px;
	font-family:'Raleway';
	font-weight:200;
	text-align:center;
	line-height:30px;
	padding:10px 30px;
	margin:24px auto;
	background-color:transparent;
	border:2px #fff solid;
	border-radius:1px;
	box-shadow:0px 0px 6px 1px rgba(0,0,0,0.1);

	padding-left:1em;
	padding-right:1em;
	margin-top:48%;
	
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
	opacity:0;
}
section#collection ul li.collectionImg:hover span {
	width:100%;
	height:100%;
	text-align:center;
	line-height:auto;
	text-indent:0;
	cursor:pointer;
	background:rgba(253,183,18,0.4);
	display:block;
	
	position:absolute;
	left:0;
	top:0;
	z-index:9997;
	
	transition:background 0.5s ease-in-out;
	-moz-transition:background 0.5s ease-in-out;
	-webkit-transition:background 0.5s ease-in-out;
}
section#collection ul li.collectionImg span:hover h3 {
	display:block;
	
	transition:all 0.5s ease-out 0s;
	-moz-transition:all 0.5s ease-out 0s;
	-webkit-transition:all 0.5s ease-out 0s;
	opacity:1;
}

/************************************************************************************
SHOP
*************************************************************************************/
section#shop {
	width:100%;
	min-height:100%; /* html fit brows */
	color:#FFFFFF;
	background-color:#202020;
}
section#shop article {
	margin-top:104px;
}

/************************************************************************************
FOOTER
*************************************************************************************/
#footer {
	color:#FFFFFF;
	font-size:0.8rem;
	font-size:8px\9;   /* for IE<8 */
	background-color:#202020;
	padding-bottom:5px;
}

/************************************************************************************
ANIMATION
*************************************************************************************/
/*  CSS3 ANIMATION fadeInDown  */
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
		-ms-transform: translateY(-20px);
		transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}
.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	animation-duration: 3.0s;
	-webkit-animation-duration: 3.0s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

/*  CSS3 ANIMATION fadeInUp  */
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
		-ms-transform: translateY(20px);
		transform: translateY(20px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}
.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}

/*  CSS3 ANIMATION fadeIn  */
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}
.fadeIn {
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	/*animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;*/
}

/*  CSS3 ANIMATION slideInRight  */
@-webkit-keyframes slideInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
		transform: translateX(2000px);
	}
	
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
@keyframes slideInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
		-ms-transform: translateX(2000px);
		transform: translateX(2000px);
	}
	
	100% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
}
.slideInRight {
	-webkit-animation-name: slideInRight;
	animation-name: slideInRight;
}

/*  CSS3 ANIMATION slideInLeft  */
@-webkit-keyframes slideInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
		transform: translateX(-2000px);
	}
	
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
@keyframes slideInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
		-ms-transform: translateX(-2000px);
		transform: translateX(-2000px);
	}
	
	100% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
}
.slideInLeft {
	-webkit-animation-name: slideInLeft;
	animation-name: slideInLeft;
}

/*  CSS3 ANIMATION delay  */
.delay-05s {
	animation-delay: 0.5s;
	-webkit-animation-delay: 0.5s;
}
.delay-10s {
	animation-delay: 1.0s;
	-webkit-animation-delay: 1.0s;
}
.delay-15s {
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
}





#toPC a{
	color:#F00;
}