@charset "UTF-8";





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
RESET_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
*{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

h1,h2,h3,h4,h5,h6,
div,p,
span,em,strong,
ul,ol,li,
dl,dt,dd,
a{
	background-repeat: no-repeat;
	background-size: 100% auto;
}

a{
	outline: none;
	text-decoration: none;
}

.pc{
	display: none;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　			　RESET_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
COMMON_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
body{
	background-color: #23201a;
	color: #ffffff;
}
html,body{
	width: 100%;
	height: 100%;
	font-weight: bold;
	font-style: normal;
	font-family: serif;
	vertical-align: baseline;
}
#grandwrapper{
	position: relative;
	width: 100%;
	overflow: hidden;
}





/*
〓〓〓書体演出〓〓〓
*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　			　COMMON_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/







/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
FOOTER_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
footer {
	padding: 60px 0;
	text-align: center;
}





/*
DEEPLINKS
*/
.deeplinks {
	margin: 0 0 50px 0;
}
.deeplinks ul {
	display: flex;
	justify-content: center;
	align-items: center;
}
.deeplinks ul li {
	margin: 0 20px;
}
.deeplinks ul li a {
	position: relative;
	top: 0;
	display: block;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	width: 60px;
	height: 80px;
	text-indent: -9999px;
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin:center;
}
.deeplinks ul li a:hover {
	top: -5px;
}
.deeplinks ul li.twitter a {
	background-image: url(../images/deeplink_twitter.png);
}
.deeplinks ul li.instagram a {
	background-image: url(../images/deeplink_instagram.png);
}
.deeplinks ul li.base a {
	background-image: url(../images/deeplink_base.png);
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　FOOTER_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/







/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
FV_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#fv{
	z-index: 2;
	position: relative;
	width: 100%;
	height: 375px;
	overflow: hidden;
}
#fv > p {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(../images/kv.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-color: #000000;
	width: 100%;
	height: 375px;
	transition-duration: 2000ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin:center;
	/*ForAnimationsProperties*/
	opacity: 0;
	transform: scale(1.3);
}
#fv.anime_active > p {
	/*ForAnimationsProperties*/
	opacity: 1;
	transform: scale(1);
}
#fv::after {
	z-index: 3;
	display: block;
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 16px;
    background-image: url(../images/pattern_line_a.png);
    background-repeat: repeat-x;
    background-position: top center;
    background-size: auto 100%;
}





/*
ロゴ
*/
#fv h1 {
	z-index: 2;
	position: absolute;
	top: 100px;
	left: 50%;
	width: 300px;
	margin: 0 0 0 -150px;
	text-align: center;
	filter: drop-shadow(0 0 10px #000000);
}
#fv h1 * {
	position: relative;
	display: block;
	margin: 0 auto;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transform-origin:center;
	/*ForAnimationsProperties*/
	opacity: 0;
}
#fv h1 span.element{
	background-image: url(../images/logo_element.png);
    width: 60px;
    height: 59px;
	margin: 0 auto 15px auto;
	text-indent: -9999px;
	/*ForAnimationsProperties*/
	top: -20px;
	transition-duration: 1600ms;
	transition-delay: 2000ms;
}
#fv.anime_active h1 span.element {
	/*ForAnimationsProperties*/
	opacity: 1;
	top: 0;
}
#fv h1 span.cat{
	background-image: url(../images/logo_category.png);
    width: 240px;
    height: 18px;
	margin: 0 auto 10px auto;
	text-indent: -9999px;
	/*ForAnimationsProperties*/
	transition-duration: 1000ms;
	transition-delay: 600ms;
}
#fv.anime_active h1 span.cat {
	/*ForAnimationsProperties*/
	opacity: 1;
	top: 0;
}
#fv h1 strong{
	width: 606px;
	height: 50px;
	margin: 0 auto 15px auto;
	/*ForAnimationsProperties*/
	opacity: 1;
}
#fv h1 strong span {
	position: absolute;
	display: block;
	text-indent: -9999px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	/*ForAnimationsProperties*/
	bottom: -10px;
	transition-duration: 1600ms;
}
#fv.anime_active h1 strong span {
	/*ForAnimationsProperties*/
	opacity: 1;
	bottom: 0;
}
#fv h1 strong span:nth-of-type(1) {
	background-image: url(../images/logo_text_1.png);
    background-position: 0px 0px;
    width: 62px;
    height: 47px;
    margin: 0px 0 0 0;
	/*ForAnimationsProperties*/
	transition-delay: 1000ms;
}
#fv h1 strong span:nth-of-type(2) {
	background-image: url(../images/logo_text_2.png);
	background-position: 0px 0px;
    width: 57px;
    height: 47px;
    margin: 0px 0 0 62px;
	/*ForAnimationsProperties*/
	transition-delay: 1200ms;
}
#fv h1 strong span:nth-of-type(3) {
	background-image: url(../images/logo_text_3.png);
	background-position: 0px 0px;
    width: 42px;
    height: 48px;
    margin: 0 0 0 121px;
	/*ForAnimationsProperties*/
	transition-delay: 1400ms;
}
#fv h1 strong span:nth-of-type(4) {
	background-image: url(../images/logo_text_4.png);
    background-position: 0px 6px;
    width: 48px;
    height: 51px;
    margin: 0 0 0 167px;
	/*ForAnimationsProperties*/
	transition-delay: 1600ms;
}
#fv h1 strong span:nth-of-type(5) {
	background-image: url(../images/logo_text_5.png);
	background-position: 0px 48px;
    width: 38px;
    height: 72px;
    margin: 0 0 0 220px;
	/*ForAnimationsProperties*/
	transition-delay: 1800ms;
}
#fv h1 strong span:nth-of-type(6) {
	background-image: url(../images/logo_text_6.png);
    width: 42px;
    height: 50px;
    margin: 0 0 0 259px;
	/*ForAnimationsProperties*/
	transition-delay: 2000ms;
}
#fv h1 em{
	background-image: url(../images/logo_text_en.png);
	width: 145px;
    height: 9px;
	margin: 0 auto 0 auto;
	text-indent: -9999px;
	transition-duration: 2000ms;
	transition-delay: 0ms;
	/*ForAnimationsProperties*/
	transition-delay: 2000ms;
}
#fv.anime_active h1 em {
	/*ForAnimationsProperties*/
	opacity: 1;
	top: 0;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　		FV_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/







/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ABOUT_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#about {
	background-image: url(../images/pattern_tile_b.png);
	background-repeat: repeat;
	background-size: 800px auto;
	background-position:  top center;
	position: relative;
	padding: 100px 0;
}
#about h2 {
    background-image: url(../images/sp_subtitle_about.png);
    width: 280px;
    height: 124px;
    margin: 0 auto 20px auto;
    text-indent: -9999px;
	transition-duration: 2000ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin:center;
	/*ForAnimationsProperties*/
	opacity: 0;
	top: -20px;
}
#about h2.anime_active {
	/*ForAnimationsProperties*/
	opacity: 1;
	top: 0;
}
#about::before {
    opacity: 0.8;
    display: block;
    content: "";
    position: absolute;
    top: 0px;
    width: 100%;
    height: 25px;
    background-image: url(../images/decoration_text_about.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
}
#about::after {
    opacity: 0.8;
    display: block;
    content: "";
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 25px;
    background-image: url(../images/decoration_text_about.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
}





/*
リード文言
*/
#about .read > p {
    width: 85%;
	max-width: 600px;
    font-size: 13px;
    letter-spacing: 0.125em;
    line-height: 2em;
	margin: 0 auto;
	text-shadow: 0 0 5px #000000;
	transition-duration: 2000ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin:center;
	/*ForAnimationsProperties*/
	opacity: 0;
}
#about .read > p.anime_active {
	/*ForAnimationsProperties*/
	opacity: 1;
}





/*
写真
*/
#about .photo {
	background-color: #000000;
	width: 100%;
	height: 120px;
	margin: 60px 0;
	transition-duration: 2000ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin:center;
	/*ForAnimationsProperties*/
	opacity: 0;
}
#about .photo.anime_active {
	/*ForAnimationsProperties*/
	opacity: 1;
}
#about .photo ul {
	position: relative;
	top: -15px;
	width: 100%;
	margin: 0 auto;
}
#about .photo ul li img {
	width: 270px;
	margin: 0 auto;
	border: 3px #d6bd48 solid;
}
#about .slick-allow-left,
#about .slick-allow-right {
	z-index: 3;
	position: absolute;
	top: 58px;
	left: 50%;
	display: block;
    width: 30px;
    height: 39px;
}
#about .slick-allow-left {
	background-image: url(../images/arrow_left.png);
	margin: 0 0 0 -175px;
}
#about .slick-allow-right {
	background-image: url(../images/arrow_right.png);
	margin: 0 0 0 145px;
}





/*
営業時間
*/
#about .businesshours {
	position: relative;
	margin: 0 auto;
	font-size: 13px;
	text-align: center;
	transition-duration: 2000ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin:center;
	/*ForAnimationsProperties*/
	opacity: 0;
	top: -20px;
}
#about .businesshours.anime_active {
	/*ForAnimationsProperties*/
	opacity: 1;
	top: 0px;
}
#about .businesshours h3 {
    margin: 0 0 1em 0;
    padding: 0 0 1em 0;
    line-height: 1em;
}
#about .businesshours ul {}
#about .businesshours ul li {
	margin: 1em 0;
	letter-spacing: 0.165em;
	text-shadow: 0 0 5px #000000;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ABOUT_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/







/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
PRODUCTLIST_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#productlist {
	position: relative;
	padding: 100px 0 40px 0;
	background-image: url(../images/pattern_tile_a.png);
	background-repeat: repeat;
	background-size: 600px auto;
	background-position:  top center;
	background-color: #35322a;
}
#productlist::before {
    opacity: 0.8;
    display: block;
    content: "";
    position: absolute;
    top: 0px;
    width: 100%;
    height: 25px;
    background-image: url(../images/decoration_text_productline.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
}
#productlist::after {
    opacity: 0.8;
    display: block;
    content: "";
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 25px;
    background-image: url(../images/decoration_text_productline.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
}





/*
プロダクト用汎用ボックス
*/
#productlist > .box {
	box-sizing: border-box;
    position: relative;
    background-image: url(../images/panel_a_middle.png);
    background-size: 290px auto;
    background-repeat: repeat-y;
    background-position: center center;
    width: 290px;
    padding: 30px 20px;
    margin: 0 auto 80px auto;
    text-align: center;
	transition-duration: 1000ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin:center;
}
#productlist > .box::before {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: -31px;
	background-image: url(../images/panel_a_top.png);
	background-size: 290px auto;
	background-repeat: no-repeat;
	background-position: center center;
    width: 290px;
    height: 32px;
}
#productlist > .box::after {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	bottom: -31px;
	background-image: url(../images/panel_a_bottom.png);
	background-size: 290px auto;
	background-repeat: no-repeat;
	background-position: center center;
    width: 290px;
    height: 32px;
}

/*個別アニメーション*/
#productlist > .box.lineup {
	/*ForAnimationsProperties*/
	opacity: 0;
	left: -40px;
}
#productlist > .box.purchased {
	/*ForAnimationsProperties*/
	opacity: 0;
	right: -40px;
}
#productlist > .box.lineup.anime_active {
	/*ForAnimationsProperties*/
	opacity: 1;
	left: 0px;
}
#productlist > .box.purchased.anime_active {
	/*ForAnimationsProperties*/
	opacity: 1;
	right: 0px;
}

/*サブタイトル*/
#productlist > .box h2 {
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: top center;
	width: 100%;
	height: 70px;
	margin: 0 0 30px 0;
	text-indent: -9999px;
}
#productlist > .box.lineup h2 {
	background-image: url(../images/subtitle_productline_lineup.png);
}
#productlist > .box.purchased h2 {
	background-image: url(../images/subtitle_productline_purchased.png);
}

/*リスト*/
#productlist > .box ul li {
	margin: 0 0 2em 0;
	font-size: 13px;
	line-height: 1.65em;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　PRODUCTLIST_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/







/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ACCESS_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#access {
	position: relative;
	padding: 70px 0;
	text-align: center;
}
#access::before {
    opacity: 0.8;
    display: block;
    content: "";
    position: absolute;
    top: 0px;
    width: 100%;
    height: 25px;
    background-image: url(../images/decoration_text_access.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
}
#access h2 {
	background-image: url(../images/subtitle_access.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
	width: 100%;
	height: 48px;
	margin: 0 0 30px 0;
	text-indent: -9999px;
	transition-duration: 2000ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin:center;
	/*ForAnimationsProperties*/
	opacity: 0;
	top: -20px;
}
#access h2.anime_active {
	/*ForAnimationsProperties*/
	opacity: 1;
	top: 0;
}
#access address {
	margin: 0 auto 30px auto;
	font-style: normal;
	width: 85%;
	transition-duration: 2000ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin:center;
	/*ForAnimationsProperties*/
	opacity: 0;
}
#access address.anime_active {
	/*ForAnimationsProperties*/
	opacity: 1;
}





/*
Map
*/
#access .maps {
	position: relative;
	width: 100%;
	height: 400px;
}
#access .maps iframe {
	width: 100%;
	height: 100%;
}
#access .maps .effect {
	z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #23201a;
    width: 100%;
    height: 100%;
	transition-duration: 1000ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin:left;
	/*ForAnimationsProperties*/
	opacity: 1;
}
#access .maps.anime_active .effect {
	transform: scaleX(0);
}





/*
上下飾り
*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　		　　　　　　　　　　ACCESS_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/