@charset 'UTF-8';

/*loading*/
#loading {
   background: #000;
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1;
}
#loading .load_icon { width: 24px; height: 24px; position: absolute; z-index: 100; left: 50%; top: 50%; margin: -12px 0 0 -12px; background: url(../img/loading.gif) ; background-size: cover;
  animation: load_fade 4s ease 0s both;
}
@keyframes load_fade {
  0% {opacity: 1}
  100% {opacity: 0}
}
body {
	-webkit-font-smoothing: antialiased;
	color: #555556;
	/*
  animation: fadeIn 3s ease 0s 1 normal;
  -webkit-animation: fadeIn 3s ease 0s 1 normal;*/
	 overflow-x: hidden;
}
/*---------------------------------
	main
----------------------------------*/
/*main video*/
#main{ background: #000; display: block; width: 100%;}
#main .pc_video { display: block; position: relative; width: 100%;}
#main .pc_video-video { z-index: 0;width: 100%;}
#main .pc_video img{ width: 100%;}
#main .sp_video{ display: none;}
#works .top_pc  { display: block !important; }
#works .top_sp { display: none !important; }
@media screen and (max-width: 768px) {
#main .pc_video { display: none;}
#main .sp_video { display: block; position: relative; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; overflow: hidden;  background: #000; }
#main .sp_video video { height: 100%; position: absolute; top: 0; left: 0; z-index: 1; margin-left: 50vw; transform: translateX(-50%); }
#works .top_pc { display: none !important; }
#works .top_sp { display: block !important; }
}/*END*/
/*main h1*/
#main h1 { position: absolute; top: 50%; left: 50%; width: 83%; max-height: 100vh; height: 90%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); z-index: 2; padding: 0; margin:0; background: #;}
#main h1 svg{ width: 100%; height: 100%; position: relative; margin: 0 0 0% 0; padding: 0; }
@media screen and (max-width: 750px) {
#main h1 { position: absolute; top: 47%; left: 50%; width: 90%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); z-index: 2; }
}/*END*/
#main h1 g .logo{
fill: transparent;
stroke: #fff;
stroke-width: 0.5px;/*太さ*/
stroke-linecap:round;
stroke-linejoin:round;
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation: main_LOGO 3s ease-in-out;/*linear ease   ease-in ease-out  ease-in-out   */
animation-fill-mode: forwards;
animation-delay:2s;
}
@media screen and (max-width: 750px) {
#main h1 g .logo{stroke-width: 0.9px;}/*太さ*/
}/*END*/
@keyframes main_LOGO {
0% {
    stroke-dashoffset: 2000;
		opacity: 1;
		fill:transparent;
	}
10% {
    stroke-dashoffset: 2000;
	}
50% {
		fill:transparent;
		stroke-opacity:1;
	}
90% {
    stroke-dashoffset: 0;
		
	}
100% {
    stroke-dashoffset: 0;
		fill:#fff;
		stroke-opacity:0;
	}
}
#main h1 g.copy{
fill: transparent;
animation: main_COPY 4s linear;
animation-delay:2s;
animation-fill-mode: forwards;
}
#main h1 g.copy_sp{
fill: transparent;
animation: main_COPY_sp 4s linear;
animation-delay:2s;
animation-fill-mode: forwards;
}
@keyframes main_COPY {
	0% {
			opacity: 0;
	}
	50% {
			opacity: 0;
			fill: transparent;
	}
	100% {
			opacity: 1;
			fill: #fff;
	}
}
@keyframes main_COPY_sp {
	0% {
			opacity: 0;
	}
	50% {
			opacity: 0;
			fill: transparent;
	}
	100% {
			opacity: 1;
			fill: #fff;
	}
}
g.copy{ opacity: 1; display: inline-block; }
g.copy_sp{ opacity: 0; display: none;}
@media screen and (max-width: 750px) {
g.copy{ opacity: 0; display: none; }
g.copy_sp{ opacity: 1; display: inline-block; }
}/*END*/

/*IE11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.title{
		line-height: 1.4em;
	}
}

/*ie logo*/
#main img.ie_logo{ display: none; }
/* ieハック */
@media all and (-ms-high-contrast: none){
#main img.ie_logo{ display: block;  position: absolute; top: 50%; left: 50%; width: 83%; max-height: 100vh; height: 90%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%);}
}

/*---------------------------------
	attention
----------------------------------*/
#attention { background: #fff; width: 90%; margin: 0 auto;  padding:53px 0; text-align: center; color: #555556;}
#attention p{ font-size: 12px; line-height: 22px; letter-spacing: 1px; display: inline-block; text-align: left;}
@media screen and (max-width: 950px) {
#attention p span{ display: inline-block;}
#attention p{ font-size: 12px; line-height: 21px; letter-spacing: 0.9px; display: inline-block; text-align: left;}
}/*END*/
@media screen and (max-width: 768px) {
#attention { background: #fff; width: 90%; margin: 0 auto;  padding:49px 0; text-align: center; color: #555556;}
#attention p br{ display: none;}
#attention p span{ display: inline-block;}
#attention p{ font-size: 12px; line-height: 21px; letter-spacing: 0.9px; display: inline-block; text-align: left;}
}/*END*/

/*---------------------------------
	WORKS SHOP
----------------------------------*/
#works{ width: 100%;}
#works ul{list-style: none; margin: 0; padding: 0;overflow: hidden;}
#works ul::after{ content:" "; display:block; clear:both;}/*clearfix*/
#works ul li{ width: 16.666%; float: left; overflow: hidden; position:relative; transition: .8s;}
.mv{opacity: 0;}
.mv2{opacity: 1;}
#works ul li a .mask {content:" "; display:block; z-index: 5; width: 100%; height: 100%; position: absolute; top :0; left: 0; opacity: 0; background-color:	rgba(0,0,0,0.6); transition: 0.5s; -webkit-transform: scale(1.15); transform: scale(1.15);}
#works ul li a:hover .mask { opacity:1;-webkit-transform: scale(1); transform: scale(1); }
#works ul li a .mask p { font-size: 14px; line-height: 160%; letter-spacing: 2px; font-weight: 500; position: absolute; top: 50%; left: 50%; width: 94%; height: 80px; display: flex; align-items: center; justify-content: center; margin: -40px 0 0 -47%; text-align: center; color: #fff;}
#works ul li img{width: 100%; vertical-align: bottom; }
@media screen and (max-width: 375px) {
#works ul li{ width: 33.333%!important; float: left; overflow: hidden; position:relative; transition: .8s;}
}/*END*/

/*---------------------------------
	SHOP
----------------------------------*/
#shop .top_pc  { display: block !important; }
#shop .top_midle  { display: none !important; }
#shop .top_sp{ display: none !important; }
#shop { width: 100%; text-align: center;}
#shop h2{ font-size: 20px; line-height: 160%; letter-spacing: 1px; padding: 240px 0 10px 0; font-weight: normal;}
#shop ul {list-style: none; margin: 0; padding: 0;overflow: hidden;}
#shop ul::after, #SNS_icon ul::after { content:" "; display:block; clear:both;}/*clearfix*/
#shop ul li{ width: 14.28%; float: left; overflow: hidden; position:relative; transition: .8s;}
#shop ul li img{width: 100%; vertical-align: bottom; }
.sns{text-align: center; margin-top:20px;}
.clearfix{ content:" "; display:block; clear:both;}
.clearfix li {margin: 0 2rem; display: inline-block;}
#SNS_icon .sns li{height:1.5rem; width:auto;}
#SNS_icon .sns li img{width:auto; height:100%;}
#SNS_icon ul {list-style: none; padding: 0; overflow: hidden;}

@media screen and (max-width: 768px) {
	#shop .top_pc  { display: none !important; }
	#shop .top_midle  { display: block !important; }
	#shop .top_sp { display: none !important; }
	#shop ul li{ width: 16.66% !important; float: left; overflow: hidden; position:relative; transition: .8s;}
	#shop h2{padding: 98px 0 10px 0;}
	}

@media screen and (max-width: 375px) {
	#shop .top_pc  { display: none !important; }
	#shop .top_midle  { display: none !important; }
	#shop .top_sp { display: block !important; }
	#shop ul li{ width: 25%!important; float: left; overflow: hidden; position:relative; transition: .8s;}
	#shop h2{padding: 98px 0 10px 0;}
}

/*---------------------------------
	fade
----------------------------------*/
@media screen and ( max-width: 1450px) {
#works ul li a .mask p { font-size: 0.9vw; line-height: 160%; letter-spacing: 0.13vw;}
}/*END*/
@media screen and ( max-width: 1100px) {
#works ul li a .mask p br{display: none;}
}/*END*/
@media screen and ( max-width: 768px) {
#works ul li{width: 20%; float: left;}
#works ul li a .mask p{ display: none;}
}/*END*/

/*---------------------------------
	ACCESS
----------------------------------*/
#access { width: 100%; text-align: center;}
#access h2{ font-size: 20px; line-height: 160%; letter-spacing: 1px; padding: 240px 0 10px 0; font-weight: normal;}
#access #map_canvas{ width:100%; height:500px; margin:0 auto; }
#access p{ width: 95%;  font-size: 12px; line-height: 21px; letter-spacing: 1px; margin: 20px auto 17px auto; font-weight: normal;}
#access p span{ display: inline-block;}
@media screen and (max-width: 375px) {
#access h2{ font-size: 22.5px; line-height: 160%; letter-spacing: 1px; padding: 98px 0 10px 0; font-weight: normal;}
#access #map_canvas{ width:100%; height:281px; margin:0 auto; }
#access p{ width: 95%;  font-size: 12px; line-height: 21px; letter-spacing: 1px; margin: 17px auto 17px auto; font-weight: normal;}
}/*END*/

/*---------------------------------
	PROFILE
----------------------------------*/
#profile { width: 100%; text-align: center; padding-bottom: 0;}
#profile h2{ font-size: 20px; line-height: 160%; letter-spacing: 1px;  padding: 260px 0 13px 0; font-weight: normal;}
#profile .profile_LR { width: 90%; max-width:720px; margin:0 auto;  font-size: 12px; line-height: 21px; letter-spacing: 1px;}
#profile .profile_LR::after { content:" "; display:block; clear:both;}/*clearfix*/
#profile .profile_LR h3{ font-size: 15px; line-height: 30px; letter-spacing: 1px; padding-bottom: 0px; font-weight: normal;}
#profile .profile_LR .profile_L{ width: 50%; float: left; text-align: center; }
#profile .profile_LR .profile_L div{display: inline-block; text-align: left; }
#profile .profile_LR .profile_R{ width: 50%; float: left; text-align: left; }
#profile .profile_LR .profile_R dl::after { content:" "; display:block; clear:both;}/*clearfix*/
#profile .profile_LR .profile_R dl dt{ float: left; clear: both; width: auto; padding-right: 10px; }
#profile .profile_LR .profile_R dl dd{ float: left; }
@media screen and ( max-width: 768px) {
#profile .profile_LR { width: 90%; max-width:720px; margin:0 auto; font-size: 11.81px; line-height: 20px; letter-spacing: 1px;}
#profile .profile_LR .profile_L{ width: 100%; max-width: 500px; margin: 0 auto; float: none; text-align: left; }
#profile .profile_LR .profile_R{ width: 100%; max-width: 500px; margin: 12px auto 0 auto;  float: none; text-align: left; }
#profile .profile_LR .profile_R dl dt{ float: left; clear: both; width: auto; padding-right: 10px; }
}/*END*/
@media screen and ( max-width: 375px) {
#profile h2{ font-size: 22.5px; line-height: 160%; letter-spacing: 1px;  padding: 95px 0 13px 0; font-weight: normal;}
#profile .profile_LR { width: 90%; max-width:720px; margin:0 auto;  font-size: 11.81px; line-height: 20px; letter-spacing: 0.5px;}
#profile .profile_LR h3{ font-size: 14px; line-height: 20px; letter-spacing: 1px; padding-bottom: 0px; font-weight: normal;}
}/*END*/

/*---------------------------------
	footer
----------------------------------*/
footer { padding: 0 ;margin: 0; height: 10px!important; }
footer p{ padding: 0 ;margin: 0; }
footer p.copyright{ font-size: 9px; line-height: 100%; padding: 15px 0 193px 0; margin: 0; text-align: center;}
@media screen and ( max-width: 375px) {
footer p.copyright{ font-size: 9px; line-height: 100%; padding: 15px 0 103px 0; margin: 0; text-align: center;}
}/*END*/