@charset "utf-8";

/* fh5co-header
---------------------------------------------------------------------------*/
header {
	overflow: hidden;
	background: #222222;    /*背景色*/
	color: #fff;			/*文字色*/
	width: 94%;	/*幅。下のpadding3%(計6%)と合わせて100になるように。*/
	height: 80px;	/*高さ*/
	padding: 0 3%;		/*上下、左右へのボックス内の余白*/
	box-shadow: 0px 0px 10px rgba(0,0,0,0.4);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.4は透明度40%の事。*/
	position: fixed;	/*スクロールしても上部に固定表示させる設定（トップページ以外）*/
	z-index: 1;		/*下のコンテンツがヘッダー上に乗らないようヘッダーを最前面にする設定*/
}
#fh5co-header {
	height: 100vh;
	width: 100vw;
	position: relative;
	content: 'viewport-units-buggyfill; height:100vh; width: 100vw';
	display: table;
}

@media screen and (max-width: 768px) {
	#fh5co-header {
		height: auto !important;
		padding: 3em 0;
		width: 100vw;
		content: 'viewport-units-buggyfill; width: 100vw';
	}
}
#fh5co-header .fh5co-text-wrap {
	height: 100vh;
	width: 100vw;
	content: 'viewport-units-buggyfill; height:100vh; width: 100vw';
	display: table-cell;
	vertical-align: middle;
}
@media screen and (max-width: 768px) {
	#fh5co-header .fh5co-text-wrap {
		height: auto !important;
		padding: 3em 0;
		height: 100vh;
		width: 100vw;
		content: 'viewport-units-buggyfill; height:100vh; width: 100vw';
	}
}
#fh5co-header .fh5co-intro-text {
	-webkit-transform: skewY(-7deg);
	-moz-transform: skewY(-7deg);
	-ms-transform: skewY(-7deg);
	-o-transform: skewY(-7deg);
	transform: skewY(-7deg);
	text-align: center;
}
#fh5co-header h1 {
	font-size: 3.5em;
	line-height: 100px;
	font-weight: 600;
	letter-spacing: 15px;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	color: #fff;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
#fh5co-header h1 span {
	font-family: "Playfair Display", Times, serif;
	font-style: italic;
	text-transform: none !important;
}
@media screen and (max-width: 1200px) {
	#fh5co-header h1 {
		font-size: 2.9em;
		line-height: 80px;
		font-weight: 700;
		letter-spacing: 9px;
	}
}
@media screen and (max-width: 768px) {
	#fh5co-header h1 {
		font-size: 2.2em;
		line-height: 60px;
		font-weight: 700;
		letter-spacing: 9px;
	}
}
@media screen and (max-width: 480px) {
	#fh5co-header h1 {
			font-size: 1.5em;
			line-height: 50px;
			font-weight: 400;
			letter-spacing: 2px;
	}
}
#fh5co-header span {
	margin: 0;
	padding: 0;
}
#fh5co-header h2 {
	font-family: "Playfair Display", Times, serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 34px;
	font-style: italic;
	letter-spacing: .09em;
}
@media screen and (max-width: 480px) {
	#fh5co-header h2 {
		font-weight: 400;
		font-size: 18px;
		line-height: 30px;
	}
}

/*出現のアニメーション設定。opacityは透明度の事です。*/
@keyframes menu1 {

	0% {opacity: 0;}
	100% {opacity: 1;}

}

/*トップページのメニューブロック
---------------------------------------------------------------------------*/
/*トップページのヘッダーブロックへの追加設定*/
/* #menubar-topheader#logo {
	padding: 0;
	box-shadow: none;
	width: auto;
	min-height: 100%;
	overflow: auto;
	position: relative;
	background: #222222 url(../images/logo_s.png) no-repeat center center;
	background: #222222 url(../images/logo.png) no-repeat center center/25%;
	animation: show 16s infinite;
} */
/*アニメーション*/
 @keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
 }

@-webkit-keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
}

/*各画像のアニメーションの開始時間をずらす*/

/* #menubar-top header#logo:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
} */

/*トップページのメニューブロック
---------------------------------------------------------------------------*/
#fh5co-header h1,
#fh5co-header h2,
#menubar-top a#menu1,
#menubar-top a#menu2,
#menubar-top a#menu3,
#menubar-top a#menu4,
#menubar-top a#menu5 {
	animation-name: menu1;		/*上のアニメーションで指定しているkeyframesの名前（logo）*/
	animation-duration: 3S;		/*アニメーションの実行時間*/
	animation-fill-mode: both;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}

/*TOPページメッセージ*/
#fh5co-header h1 {
	animation-delay: 0.4s;	/*0.2秒だけ遅れてアニメーションをスタートさせる設定*/
}
#fh5co-header h2 {
	animation-delay: 0.8s;	/*0.2秒だけ遅れてアニメーションをスタートさせる設定*/
}
/*メニュー１つ目（HOME）*/
#menubar-top a#menu1 {
	animation-delay: 1.0s;	/*0.2秒だけ遅れてアニメーションをスタートさせる設定*/
}
/*メニュー２つ目（COMPANY）*/
#menubar-top a#menu2 {
	animation-delay: 1.2s;	/*0.4秒だけ遅れてアニメーションをスタートさせる設定*/
}
/*メニュー３つ目（SERVICE）*/
#menubar-top a#menu3 {
	animation-delay: 1.4s;	/*0.6秒だけ遅れてアニメーションをスタートさせる設定*/
}
/*メニュー４つ目（link）*/
#menubar-top a#menu4 {
	animation-delay: 1.6s;	/*0.8秒だけ遅れてアニメーションをスタートさせる設定*/
}
/*メニュー５つ目（CONTACT）*/
#menubar-top a#menu5 {
	animation-delay: 1.8s;	/*0.8秒だけ遅れてアニメーションをスタートさせる設定*/
}