@charset "UTF-8";
@font-face {
	font-family: 'ipamp';
	src: url('../font/ipamp.ttf') format('truetype');
}

.anchor {
	padding-top: 100px;
	margin-top: -100px;
}

body {
	font-size: 1em;
	background-color: #fff;
	font-family: 'Lato','ipamp',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	line-height: 170%;
}

p,.gothic {
	font-family:'Roboto', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	font-size: 0.8em;
}
.roboto {
	font-family: 'Roboto', sans-serif;
}
a {
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #aaa;
}
a img {
	border: 0 !important;
}

h2>div{
	font-family: 'Roboto', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	font-size: 18px;
	letter-spacing: 0;
	margin-top: 23px;
}

#wrapper {
	min-width: 995px;
	position: relative;
}

.backg{
	content: '';
	position: fixed;
	background-color: #000;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: none;
	z-index: 9999;
}

#global {
	height: 65px;
	font-size: 0.85em;
	padding: 10px 31px 0 0;

}
#global i {
	margin: 0 0.5em 0 0;
	font-size: 1em !important;
}

#header {
	border-bottom: 1px solid #c7c7c7;
	min-width: 1008px;
	position: absolute;
	width: 100%;
	background-color: #fff;
}
#logo {
	position: absolute;
	margin-left: 22px;
	top : 11px;
}
#gnav {
	float: right;
	text-align: right;
	height: 55px;
}
#gnav > li {
	float: left;
	line-height: 55px;
}
#gnav > li:last-child {
	padding-right: 0;
}
#gnav > li > a {
	padding: 0 30px;
	display: block;
	letter-spacing: 1px;
	font-size: 0.9em;
	font-weight: 700;
}
.slidedown a {
	padding: 0 1em;
	font-size: 0.9em;
}
.slidedown a:hover,
#gnav > li.active a {
	background-color: #000;
	color: #fff;
}
.slidedown-content {
	line-height: 280%;
}
.cb-slideshow {
	background-color: #000;
}

.js-fixed {

	margin-top: 51px;
}

.js-fixed.js-fixed-under {
	margin-top: 106px;
}

.slidedown {
	position: relative;
}
.slidedown-content {
	position: absolute;
	top: 55px;
	left: 0;
	background-color: #000;
	z-index: 9999;
	text-align: left;
	padding: 0 1em;
	height: 0;
	overflow: hidden;
	transition: all 0.5s ease-in-out 0s;
	-moz-transition: all 0.5s ease-in-out 0s;
	-webkit-transition: all 0.5s ease-in-out 0s;
	width: auto;
}
.slidedown-content.slidedown-content-show {
	height: 134px;
	display: block;
}
.slidedown-content li:first-child {
	margin-top: 1em;
}
.slidedown-content a {
	color: #fff;
	font-weight: 300;
	display: block;
	white-space: nowrap;
}
.slidedown-content a:hover {
	text-decoration: underline;
}
.slidedown-content a i {
	margin-right: 0.5em;
}

/* SLIDE
/*********************************************************
/*********************************************************/
#mainslider h3,#mainslider .h3 {
	font-size: 1.8em;
	letter-spacing: 3px;
	margin-bottom: 48px;
	line-height: 130%;
}
#mainslider h5,#mainslider .h5 {
	font-size: 1.8em;
	letter-spacing: 3px;
	margin-bottom: 39px;
	line-height: 130%;
}
#mainslider h4,#mainslider .h4 {
	font-size: 1.8em;
	font-weight: 300;
	line-height: 130%;
}
#mainslider li {
	height: 100%;
}
.slide1 {
	text-align: right !important;
	margin-left: -150px;
}
#mainslider li > div {
	vertical-align: middle;
	height: 100%;
	padding: 135px 50px 0 0 !important;

}


#mainslider .button-t2 {
	border-width: 2px !important;
	padding: 10px 38px;
}

#mainslider2 {
	width: 100%;
	height: 500px;
}
#image1{
	width: 100%;
	height: 100%;
	display: block;
	background-image: url(../img/slides/main_01.png)
}

/* SERVICE
/*********************************************************
/*********************************************************/
#service .col-2 > li {
	height: 460px;
	/*height: 363px;*/
	overflow: hidden;
}
#service .col-2 > li.text {
	padding: 96px 63px;
	/*padding: 32px 63px;*/
}
#service .col-2 > li .inner {
	max-width: 503px;
	margin: 0 auto;
}


/* NEWS
/*********************************************************
/*********************************************************/
#news .container {
	overflow: hidden;
}
#news h2 {
	margin: 0.6em 0 0.3em 0;
}
#news .list {
	margin-left: 28px;
}
#news .list > li {
	float: left;
	width: 320px;
	margin: 0 90px 0 0;
}
#news .list > li:nth-child(3n+3) {
	margin-right: 0;
	width: 320px;
}

#news .col-3 > li img {
	width: 100%;
}

#news .button-t2 {
	padding: 5px 28px;
	font-size: 0.6em;
}

#news .hover-image .hover {
	padding-top: 67px;
}
#news .hover-image{
	margin-bottom: 8px;
}

/* BRAND
/*********************************************************
/*********************************************************/
#brand {
	position: relative;
	width: 100%;
	overflow: hidden;
}
#brand .bg-light-gray{
	min-width: 1289px;
	margin: 0 auto;
}
#brand .container {
	width: 1200px;
	margin: 0 auto;
}
#brand .text {
	padding: 72px 7px 7em 3em;
	width: 45%;
	float: left;
}
#brand .image {
	float: left;
	width: 55%;
	overflow: hidden;
}
#brand .text .inner {

	float: right;
}
#brand .col-2 {

}
.bg-kazaro {
	width: 100%;
	height: 500px;
	background: url(../img/top/kazaro_full.jpg) no-repeat 100% 100%;
	-webkit-background-size: 728px;
	background-size: 728px;
}

/* GALLERY
/*********************************************************
/*********************************************************/
#gallery li {
	text-align: center;
	margin: 0 0 60px 0;
	height: 190px;
	overflow: hidden;
}
#gallery li div {
	width: 239px;
	margin: 0 auto;
}

#gallery .hover-image .hover {
	display: table-cell;
	padding-top: 34%;
}
#gallery .hidden .hover {
	opacity: 0;
	padding-top: 39%;
}

#gallery a:hover{
	color: #fff !important;
}

#gallery .em08 { font-size: 0.9em !important; }


/* SNS
/*********************************************************
/*********************************************************/
#sns .text {
	vertical-align: middle;
	padding: 100px 45px 0;
}
#sns .text2 {
	padding: 150px 45px 0;
}
#sns .text3 {
	padding: 110px 45px 0;
}

#sns li {
	width: 33.3%;
	height: 335px;
}

/* Company
/*********************************************************
/*********************************************************/
#company dl {
	clear: both;
	margin: 0 0 1em;
}
#company dt {
	float: left;
	font-weight: bold;
	width: 6em;
}
#company dd{
	float: left;
	width: 24em;
}

/* Contact
/*********************************************************
/*********************************************************/
#contact {
	background: url(../img/common/bg_footer.png) no-repeat 0 0;
	-webkit-background-size: cover;
	background-size: cover;
	padding: 73px 0;
	color: #fff;
}
#contact .container {
	width: 760px;
	margin: 0 auto;
}
#contact .container textarea {
	height: 135px;
}
#contact .container textarea,
#contact .container input[type=text],
#contact .container input[type=email] {
	width: 100%;
	padding: 16px 0 15px 20px;
	resize: none;
	font-family: 'Lato','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	margin-bottom: 29px;
	font-size: 1em;
	border: 0;
}

:placeholder-shown {
	font-size: 0.9em;
	font-weight: bold;
    color: #000; }

/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
	font-size: 0.9em;
	font-weight: bold;
    color: #000; }

/* Firefox 18- */
:-moz-placeholder {
	font-size: 0.9em;
	font-weight: bold;
    color: #000; opacity: 1; }

/* Firefox 19+ */
::-moz-placeholder {
	font-size: 1em;
	font-weight: bold;
    color: #000; opacity: 1; }

/* IE 10+ */
:-ms-input-placeholder {
	font-size: 0.9em;
	font-weight: bold;
    color: #000; }

/* Footer
/*********************************************************
/*********************************************************/
#footer {
	background-color: #101011;
	color: #fff;
	padding-top: 43px;
	padding-bottom: 30px;
}
#footer a {
	color: #fff;
	font-size: 1.2em;
}
#footer li {
	margin: 0 2.5em;
	font-size: 1.2em;
}
#footer li:first-child {

}
#footer .fa-angle-up{
	font-size: 4em;
}
#footer .totop {
	margin-bottom: 54px;
}
#copyright {
	text-align: center;
}

/* Opener
/*********************************************************
/*********************************************************/
.openButton {
	position: relative;
}
.openButton .inner {
	display: none;
}
.openButton .icon_container
{
	position: absolute;
	top: 25px;
	right: 1em;
}

.openButton .bar1,.openButton .bar2 {
	width: 18px;
	height: 1px;
}
.openButton .bar1
{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	background-color: #fff;

}
.openButton .bar2
{
	display: block;
	position: absolute;
	background-color: #fff;
	top: 0;
	right: 0;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	transition: all 0.25s ease-in-out 0s;
	-moz-transition: all 0.25s ease-in-out 0s;
	-webkit-transition: all 0.25s ease-in-out 0s;
}
.openButton .step2 .bar2
{
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);

}

.openButton + div
{
	border-bottom: 1px solid #888;
	box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.5) inset;
}

/* CLASS
/*********************************************************
/*********************************************************/

	.clearfix:before, .clearfix:after { content: ""; display: table; }
	.clearfix:after { clear: both; }

	.hover-image {
		position: relative;
		color: #fff;
		overflow: hidden;
	}
	.hover-image .hover {
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		width: 100%;
		height: 100%;
		background-color: rgba( 0,0,0,0.7 );
		padding-top: 56px;
		transition: all 0.5s linear;
		-moz-transition: all 0.5s linear;
		-webkit-transition: all 0.5s linear;
	}
	.hidden .hover {
		opacity: 0;
		padding-top: 70px;
	}

	/* scale container
	/*------------------------*/
	.scale {
		overflow: hidden;
	}
	.scale img {
		width: 100%;
		height: auto;
		transition: transform 8s linear;
		-moz-transition: transform 8s linear;
		-webkit-transition: transform 8s linear;
	}
	.scale img:hover {
		transform: scale(1.2);
		-moz-transform: scale(1.2);
		-webkit-transform: scale(1.2);
	}
	.fit img {
		width: 100%;
	}

	/* button
	/*------------------------*/
	.button-t1 {
		color: #000;
		display: inline-block;
		border: 2px solid #000;
		padding: 11px 38px;
		letter-spacing: 4px;
		font-size: 0.75em;
		font-weight: 700;
		transition: background 1s linear;
		-moz-transition: background 1s linear;
		-webkit-transition: background 1s linear;
	}
	.button-t1-active,
	.button-t1:hover {
		background-color: #000;
		color: #fff;
	}

	.button-t2 {
		color: #fff;
		display: inline-block;
		border: 2px solid #fff;
		padding: 15px 38px;
		letter-spacing: 4px;
		font-size: 0.75em;
		font-weight: 700;
		transition: background 1s linear;
		-moz-transition: background 1s linear;
		-webkit-transition: background 1s linear;
	}
	.button-t2:hover {
		background-color: rgba( 255,255,255,0.3 );
		text-align: center;
	}

	.button-t3 {
		color: #fff;
		display: inline-block;
		border: 2px solid #fff;
		padding: 15px 38px;
		letter-spacing: 4px;
		font-size: 0.75em;
		font-weight: 700;
		transition: background 1s linear;
		-moz-transition: background 1s linear;
		-webkit-transition: background 1s linear;
		background-color: rgba( 0,0,0,0 );
	}
	.button-t3:hover {
		background-color: rgba( 255,255,255,0.3 );
		text-align: center;
	}
	.button-t3:active {
		color: #888;
	}

	/* layout
	/*------------------------*/
	.width100 { width: 100%; }
	.container {
		width: 1196px;
		margin: 0 auto;
	}
	.container2 {
		width: 1140px;
		margin: 0 auto;
	}
	.text-right  { text-align: right;  }
	.text-center { text-align: center; }
	.text-left   { text-align: left;   }

	.col-2 > * {
		width: 50%;
		float: left;
	}
	.col-3 > * {
		width: 33%;
		float: left;
	}
	.col-4 > * {
		width: 25%;
		float: left;
	}

	.pull{ float: left !important; }
	.push{ float: right !important; }

	.table {
		display: table;
		width: 100%;
	}
	.table > * {
		display: table-cell;
	}

	.inline-children > * {
		display: inline-block;
	}

	.inline-block {
		display: inline-block;
	}

	.xs-visible { display: none; }

	/* bg
	/*------------------------*/
	.bg-light-gray{ background-color: #f4f5f7; }
	.bg-black{ background-color: #000; }

	/* MARGIN
	/*-------------------------------------*/
	.mb05em { margin-bottom: 0.5em !important; }
	.mb07em { margin-bottom: 0.7em !important; }
	.mb1em  { margin-bottom: 1em !important; }
	.mb15em  { margin-bottom: 1.5em !important; }
	.mb17em  { margin-bottom: 1.7em !important; }
	.mb2em  { margin-bottom: 2em !important; }
	.mb3em  { margin-bottom: 3em !important; }
	.mb4em  { margin-bottom: 4em !important; }
	.mb6em  { margin-bottom: 6em !important; }
	.mb5em  { margin-bottom: 5em !important; }
	.mb7em  { margin-bottom: 7em !important; }
	.mb8em  { margin-bottom: 8em !important; }
	.mb9em  { margin-bottom: 9em !important; }
	.mbr1em { margin-right: 1em; }
	.mbl1em { margin-left: 1em; }

	/* TEXT
	/*-------------------------------------*/
	.em07{ font-size: 0.7em; }
	.em075{ font-size: 0.75em; }
	.em08{ font-size: 0.8em !important; }
	.em09{ font-size: 0.9em; }
	.em1 { font-size: 1em; }
	.em11{ font-size: 1.1em; }
	.em12{ font-size: 1.2em; }
	.em13{ font-size: 1.3em; }
	.em14{ font-size: 1.4em; }
	.em15{ font-size: 1.5em; }
	.em17{ font-size: 1.7em; }
	.em18{ font-size: 1.8em; }
	.em19{ font-size: 1.9em; }
	.em2{ font-size: 2em; }
	.em24{ font-size: 2.4em; }

	.bold { font-weight: bold; }
	.fw300 { font-weight: 300; }
	.fw400 { font-weight: 400 !important; }
	.fw700 { font-weight: 700 !important; }

	.ls1 { letter-spacing: 1px; }
	.ls3 { letter-spacing: 3px; }

	.gray { color: #666; }
	.white { color: #fff; }

	.item { width: 100%; padding: 8px 20px; box-sizing: border-box; }