/* ================================================================================================
 Font */
@import url('../../fonts/font-awesome.min.css');	/* Font Awesome */
@import url('../../fonts/GenShinGothic-P/font-face.css');
@import url('https://fonts.googleapis.com/css?family=Cabin');


* {
	font-family: 'Cabin', sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
	letter-spacing: 0.05em;
	color: #3f3b3a;
/*	color: #e70012;					/*La-Luce RED*/
/*	color: #3f3b3a;					/*La-Luce BLACK*/
}

.catch {
	font-family: "GenShinGothic-P" !important;
	font-weight: normal;
}




/* ================================================================================================
 汎用 */
html, body {
	position: relative;
	margin: 0;
	height: 100%;
	width: 100%;
}

html {
	font-size: 62.5%;
	overflow-y: scroll;
}

body {
	background: #fff;
/*	background-size: cover;
	background-attachment: fixed;*/
}


body:after {
	content: " ";
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 150px;
	background: url(../images/bg_diagonal.png);
	opacity: 0.15;
	z-index: 0;
}

/*body:after {
	content: url(../images/bg_point_l.png);
	position: fixed;
	right: 80px;
	bottom: 80px;
	width: 24px;
	height: 24px;
}*/


ul { list-style-image: url(../images/list_style.png); }


strong {
	font-weight: bold;
}

/* ================================================================================================
  */
header {
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0;
	border-right: 1px solid #e70012;
	background: #fff;
	z-index: 10;
	width: 150px;
}

header #mobile-menu {
	display: none;
}

header * {
	color: #e70012;
}

header #logo img {
	width: 150px;
	height: 150px;
}

header nav ul.menu {
	margin: 0;
	padding: 10px 0 0;
	list-style: none;
}
header nav ul.menu li {
	position: relative;
}
header nav ul.menu a {
	position: relative;
	display: block;
	padding: 10px 20px;

	background: #fff;
	font-size: 16px;
	font-size: 1.6rem;
	text-decoration: none;
	text-align: right;
	overflow: hidden;
}
header nav ul.menu li:before ,
header nav ul.menu a:before {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;

	top: 50%;
	margin-top: -5px;
	transform:rotate(45deg);
}
header nav ul.menu li:before { right: -5px; z-index: 0; }
header nav ul.menu a:before  { right: -5px; }

body#home		header nav ul.menu li#gn-home:before ,
body#about		header nav ul.menu li#gn-about:before ,
body#works		header nav ul.menu li#gn-works:before ,
body#service	header nav ul.menu li#gn-service:before ,
body#workflows	header nav ul.menu li#gn-workflows:before ,
body#profile	header nav ul.menu li#gn-profile:before ,
body#contact	header nav ul.menu li#gn-contact:before ,
header nav ul.menu a:hover:before {
	background: #e70012;
/*	box-shadow: 0 0 2px rgba(0,0,0,0.5);*/
}


header nav ul.menu #gn-enter_page a:hover img { opacity: 0.7; }
header nav ul.menu #gn-enter_page a:before { display: none; }

#toTop {
	position: fixed;
	left: 0;
	bottom: 126px;
	width: 150px;
	text-decoration: none;
	z-index: 20;
	text-align: center;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1;
	box-sizing: border-box;
	color: #e70012;
	transition: 0.3s;
}
#toTop:hover {
	opacity: 0.7;
}

#toTop:after {
	content: "\f0d8";
	font-family: FontAwesome;
	margin-left: 5px;
	color: #e70012;
}

footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 150px;
	height: 150px;
	padding: 35px 0 0;
	border-right: 3px solid #e70012;
	box-sizing: border-box;
	text-align: center;
	z-index: 15;
}
footer * {
	color: #e70012;
}


footer p {
	line-height: 1;
	margin: 0;
	text-align: center;
	vertical-align: bottom;
}


footer .unit.text {
	padding-top: 8px;
}
.copyright {
	font-size: 15px;
	font-size: 1.5rem;
}

/*ソーシャルリンク*/
footer .social-link {
	display: inline-block;
	margin-top: 5px;
	overflow: hidden;
}

.social-link a,
.social-link iframe {
	display: block;
	text-decoration: none;
	transition: 0.3s;
	padding: 8px;
	border-radius: 2px;
	background-color: #3f3b3a;
	box-sizing: border-box;
}

.social-link a ,
.social-link a * {
	vertical-align: middle;
}

.social-link a,
.social-link i {
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1;
	color: #fff;
}
.social-link a:hover {
	opacity: 0.7;
}

.social-link a.blog-link	{ padding: 8px 18px; font-weight: bold; font-size: 12px; font-size: 1.2rem; margin-bottom: 6px; }
.social-link a.facebook		{ float: left; }
.social-link a.instagram	{ float: right; }


/*.social-link .line-it-button {
	margin-top: 5px;
}*/




/* ================================================================================================
  */
h2 {
	position: relative;
	margin: 0;
	height: 150px;
	min-width: 810px;

	border-bottom: 1px solid #e70012;

	box-sizing: border-box;
	background: #fff;
	overflow: hidden;
}
h2 p {
	position: absolute;
	margin: 0;
	left: 80px;
	bottom: -14px;
}
h2 span {
	display: block;
	float: left;
	color: #e70012;					/*La-Luce RED*/
	font-size: 100px;
	font-size: 10.0rem;
	line-height: 100px;

	animation-name: fadeUp;
	animation-duration: 1s; 
	animation-iteration-count: 1;

	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;

	transform: translateY(100px);
	opacity: 0;
}
h2 span:nth-child(1) { animation-delay: 0.0s; }
h2 span:nth-child(2) { animation-delay: 0.2s; }
h2 span:nth-child(3) { animation-delay: 0.4s; }
h2 span:nth-child(4) { animation-delay: 0.6s; }
h2 span:nth-child(5) { animation-delay: 0.8s; }
h2 span:nth-child(6) { animation-delay: 1.0s; }
h2 span:nth-child(7) { animation-delay: 1.2s; }
h2 span:nth-child(8) { animation-delay: 1.4s; }
h2 span:nth-child(9) { animation-delay: 1.6s; }
h2 span:nth-child(10) { animation-delay: 1.8s; }
h2 span:nth-child(11) { animation-delay: 2.0s; }
h2 span:nth-child(12) { animation-delay: 2.2s; }

@keyframes fadeUp {
	0% {
		transform: translateY(100px);
		opacity: 0;
	}
	50% {
		transform: translateY(50px);
		opacity: 0;
	}
	100% {
		transform: translateY(0px);
		opacity: 1;
	}
}



h2:after {
	content: "DESIGN DIVISION";
	position: absolute;
	right: 5px;
	top: 130px;
	line-height: 1;
	display: block;
	margin-left: -70px;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: normal;
	z-index: 10;
	color: #e70012;					/*La-Luce RED*/

	animation-name: fadeLeft;
	animation-duration: 1s; 
	animation-delay: 2.0s; 
	animation-iteration-count: 1;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	transform: translateX(150px);
}

@keyframes fadeLeft {
	0% {
		transform: translateX(150px);
	}
	100% {
		transform: translateX(0px);
	}
}





.outline {
	position: relative;
	width: calc(100% - 150px);
	margin-left: 150px;
	z-index: 1;
}


h3 {
	position: relative;
	border-bottom: 1px solid #e70012;
	box-sizing: border-box;
	color: #e70012;
	font-size: 19px;
	font-size: 1.9rem;
}

section {
	margin: 50px 0 100px 80px;
	min-width: 730px;
	line-height: 2;

	position: relative;
	z-index: 1;
	overflow: hidden;
}
}

section p ,
section li {
}

section a {
	background: rgba(231,0,18,0.2);
	padding: 0 4px;
	color: #e70012;
}
section a:not(.button):hover {
	background-color: rgba(255,255,255,1);
	color: #e70012;
	text-decoration: none;
}



/* ================================================================================================
  */
.content_header {
	margin: 80px 0 80px 80px;
	min-width: 730px;
	height: 150px;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	border-left:  3px solid #e70012;
}
.content_header.image {
	height: 400px;
	background-color: rgba(255,255,255,0.5);
	background-position: center center;
	border: none;
}

.content_header p.catch {
	position: absolute;
	left: 30px;
	bottom: 0px;
	margin: 0;
	line-height: 1.6;
}
.content_header p.catch ,
.content_header p.catch * {
	font-size: 20px;
	font-size: 2.0rem;
}

.content_header.image p.catch {
	left: 50px;
	bottom: 40px;
	color: #fff;
	text-shadow: 0 0 5px rgba(0,0,0,0.6);
}



/* ================================================================================================
  */
.button {
	font-family: FontAwesome;
	display: block;
	width: 500px;
	padding: 10px;
	border: 4px solid rgba(255,255,255,0.5);
	background: #e70012;
	color: #fff;
	font-weight: bold;
	font-size: 18pt;
	line-height: 1.5;
	text-decoration: none;
	text-align: center;

	cursor: pointer;
	transition: 0.3s;
	margin-top: 20px;
}
.button:hover {
	opacity: 0.7;
}

.button:before {
	float: left;
	margin-left: 0.5em;
}



/* ----------------------------------------------------------------------------
 SALON BANNER */
a.banner {
	padding: 0;
	background: none;
}
a.banner img {
	display: inline-block;
	width: 420px;
	height: auto;
	transition: 0.3s;
}
a.banner:hover img {
    opacity: 0.7;
}



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

	for mobile

================================================================================================ */
@media screen and (max-width: 736px) {

	#toTop {
		position: fixed;
		left: auto;
		bottom: 0px;
		right: 0px;
		width: 60px;
		height: 60px;
		text-align: left;
		text-indent: -9999px;
		background: rgba(255,255,255,0.7);
		border-top: 1px solid #e70012;
		border-left: 1px solid #e70012;
	}
	#toTop:after {
		position: absolute;
		left: 0;
		right: 0px;
		bottom: 10px;
		text-indent: 0;
		text-align: center;
		font-size: 40px;
	}

	.outline {
		width: 100%;
		margin: 0;
	}
	.content_header ,
	section {
		min-width: 0;
		margin-left: 0;
		padding: 0 10px;
	}

	h2 {
		min-width: 0;
	}
	h2 p {
		left: 10px;
		bottom: -9px;
	}
	h2 span {
		font-size: 50px;
		font-size: 5.0rem;
		line-height: 50px;
	}
	h2:after {
		top: 70px;
		z-index: 0;
	}

	img {
		max-width: 100%;
	}



	/* header ------------------------------------------------------------- */
	header {
		min-width: 0;
		width: auto;
		height: 60px;
		bottom: auto;
		right: 0;
		border-right: none;
		border-bottom: 1px solid #e70012;
		box-shadow: 0 0 5px rgba(0,0,0,0.5);
		z-index: 10;
	}
	header #logo img {
		height: 60px;
		width: auto;
		vertical-align: top;
	}

	header #mobile-menu {
		display: block;
		position: absolute;
		left: 18px;
		top: calc(50% - 12px);
	}
	header #mobile-menu i {
		display: block;
		font-size: 24px;
		color: #e70012;
	}

	header #mobile-menu i.fa-times ,
	header.menu-open #mobile-menu i.fa-bars { display: none; }
	header.menu-open #mobile-menu i.fa-times { display: block; }

	header nav ,
	header nav ul.menu a {
		text-align: center;
	}
	header nav ul.menu a {
		background: #e70012;
		color: #fff;
		border-top: 1px solid rgba(255,255,255,0.2);
		padding: 20px 0;
	}
	header nav ul.menu a:after {
		content: "\f054";
		display: block;
		font-family: FontAwesome;
		position: absolute;
		right: 10px;
		top: calc(50% - 10px);
		font-size: 20px;
		line-height: 1;
	}

	header nav ul.menu {
		width: 100%;
		display: block;
		padding: 0;
		box-shadow: 0 2px 2px rgba(0,0,0,0.5);
	}

	header ul.menu li {
		display: none;
	}

	header.menu-open  ul.menu li {
		display: block;
	}

	header.menu-open ul.menu li#gn-enter_page a {
		background-color: #fff;
		color: #e70012;
	}

	header.menu-open ul.menu li#gn-enter_page img {
		display: none;
	}
	header.menu-open ul.menu li#gn-enter_page a:before {
		content: "ENTER PAGE";
		display: inline;
		position: relative;
		right: auto;
		width: auto;
		height: auto;
		background: none;
	}
	header.menu-open ul.menu li#gn-enter_page a:after {
		content: "\f077";
		right: auto;
		left: 10px;
	}


	/* footer ------------------------------------------------------------- */
	footer {
		position: relative;
		width: auto;
		height: auto;
		bottom: auto;
		right: auto;
		top: auto;
		padding: 20px 0;
		background: #fff;
		border-right: none;
		border-top: 1px solid #e70012;
		box-shadow: 0 0 5px rgba(0,0,0,0.5);
	}


	footer .social-link {
		margin-top: 0;
	}
	footer .social-link a {
		float: left;
		margin-left: 5px;
		margin-bottom: 0;
	}
	.social-link a.blog-link {
		padding: 10px 18px;
		margin-bottom: 0;
	}

	footer .unit_text {
		padding: 0;
	}


	/* ------------------------------------------------------------- */
	#home .content_header {
		background-position: 10px top;
	}
	#home .content_header:before ,
	#home .content_header:after {
		left: 10px;
	}

	#home .infiniteslide {
		margin-left: 0 !important;
	}

	/* ------------------------------------------------------------- */
	#about section.profile .image {
		float: none;
		width: 100%;
	}
	#about section.profile .detail {
		padding-left: 10px;
	}

	/* ------------------------------------------------------------- */
	#works section {
		margin-right: 0;
	}
	#works .container {
		display: block;
	}
	#works .item {
		margin-right: 0;
		text-decoration: none;
	}

	#works .container .item.h2:not(.w2) {
		width: 50%;
		margin: 0 auto 25px;
	}
	#works .container .item.h2:not(.w2):before {
		padding-top: 150%;
	}
	#works .container .item.blank.brand:before {
		padding-top: 50%;
	}

	#works .item.blank:not(.brand) {
		display: none;
	}

	#works .container a.item span {
		position: relative;
		transform: none;
		opacity: 1;
		width: 100%;
		padding: 1em 0;
		height: auto;
		left: 0;
		background-color: rgba(0,0,0,0.3);
	}


	#works .container a.item span br {
		display: none;
	}
	#works .container a.item span:after {
		top: calc(50% - 12px);
		left: 6px;
		margin-left: 0;
	}

	#works section.split2 .image {
		float: none;
		max-width: 100%;
	}

	/* ------------------------------------------------------------- */
	#service section p br {
		display: none;
	}

	/* ------------------------------------------------------------- */
	#workflows section {
		margin-left: 0px;
	}
	#workflows h4 span {
		display: block;
		margin-bottom: 10px;
	}
	#workflows .inline {
		padding: 2em 0 1em 10px;
	}

	/* ------------------------------------------------------------- */
	#contact input[type=text],
	#contact textarea ,
	#contact .button {
		width: 100%;
	}
	#contact tr.required th:after {
		margin-top: 3px;
		margin-left: 0px;
		float: none;
		display: block;
		width: 3em;
		padding: 3px 0;
		text-align: center;
	}
	#contact th,
	#contact td {
		padding: 0 0 0 10px;
	}
	#contact .attention {
		width: auto;
	}
}



/*[EOF]*/