@charset "utf-8";
/* CSS Document */


/* =====================
スライドイン
開始
画像切り替え(フェードイン/フェードアウト)
カクカク動くアニメーション
フェードイン
回転するアニメーション
宙に浮くアニメーション
transitionスロー
new clearfix 

01.bodyのフォントとカラー設定
02.wrapperからはみ出す場合は非表示
03.hover
04.header
05.nav
06.footer
======================*/  

/* ===================
スライドイン
===================*/
@keyframes slide{
    0% { transform:translateX(640px); }
  100% { transform:translateX(320px); }
}

@-webkit-keyframes slide{ /*Safari & Chrome */
    0% { transform:translateX(640px); }
  100% { transform:translateX(320px); }
}

/* ===================
開始
===================*/
@keyframes start1{
    0% { opacity:0; }
   15% { opacity:1; }
   90% { opacity:1; }
  100% { opacity:0; }
}

@-webkit-keyframes start1{ /*Safari & Chrome */
    0% { opacity:0; }
   15% { opacity:1; }
   90% { opacity:1; }
  100% { opacity:0; }
}

@keyframes start2{
    0% { opacity:0; }
   15% { opacity:0; }
   30% { opacity:1; }
   90% { opacity:1; }
  100% { opacity:0; }
}

@-webkit-keyframes start2{ /*Safari & Chrome */
    0% { opacity:0; }
   15% { opacity:0; }
   30% { opacity:1; }
   90% { opacity:1; }
  100% { opacity:0; }
}

@keyframes start3{
    0% { opacity:0; }
   30% { opacity:0; }
   45% { opacity:1; }
   90% { opacity:1; }
  100% { opacity:0; }
}

@-webkit-keyframes start3{ /*Safari & Chrome */
    0% { opacity:0; }
   30% { opacity:0; }
   45% { opacity:1; }
   90% { opacity:1; }
  100% { opacity:0; }
}

@keyframes start4{
    0% { opacity:0; }
   45% { opacity:0; }
   60% { opacity:1; }
   90% { opacity:1; }
  100% { opacity:0; }
}

@-webkit-keyframes start4{ /*Safari & Chrome */
    0% { opacity:0; }
   45% { opacity:0; }
   60% { opacity:1; }
   90% { opacity:1; }
  100% { opacity:0; }
}

@keyframes start5{
    0% { opacity:0; }
   60% { opacity:0; }
   75% { opacity:1; }
   90% { opacity:1; }
  100% { opacity:0; }
}

@-webkit-keyframes start5{ /*Safari & Chrome */
    0% { opacity:0; }
   60% { opacity:0; }
   75% { opacity:1; }
   90% { opacity:1; }
  100% { opacity:0; }
}

/* ===================
画像切り替え(フェードイン/フェードアウト)
===================*/
@keyframes switch{
    0% { opacity:0;}
   40% { opacity:0;}
   60% { opacity:1;}
   90% { opacity:1;}  
  100% { opacity:0;}
}

@-webkit-keyframes switch{ /*Safari & Chrome */
    0% { opacity:0;}
   40% { opacity:0;}
   60% { opacity:1;}
   90% { opacity:1;}  
  100% { opacity:0;}
}

/* ===================
カクカク動くアニメーション
===================*/
@keyframes move{
    0% { transform: rotate(0deg); }
   50% { transform: rotate(0deg); }
   51% { transform: rotate(20deg); }
  100% { transform: rotate(20deg); }
}

@-webkit-keyframes move{ /*Safari & Chrome */
    0% { -webkit-transform: rotate(0deg); }
   50% { transform: rotate(0deg); }
   51% { transform: rotate(20deg); }
  100% { -webkit-transform: rotate(20deg); } 
}

@keyframes moveR{
    0% { transform: rotate(0deg); }
   50% { transform: rotate(0deg); }
   51% { transform: rotate(-20deg); }
  100% { transform: rotate(-20deg); }
}

@-webkit-keyframes moveR{ /*Safari & Chrome */
    0% { transform: rotate(0deg); }
   50% { transform: rotate(0deg); }
   51% { transform: rotate(-20deg); }
  100% { transform: rotate(-20deg); }
}

/* ===================
フェードイン
===================*/
@keyframes Fade-in1{
    0% { opacity:0; transform:translateY(-25px); }
  100% { opacity:1; transform:translateY(  0px); }
}

@-webkit-keyframes Fade-in1{ /*Safari & Chrome */
    0% { opacity:0; transform:translateY(-25px); }
  100% { opacity:1; transform:translateY(  0px); }
}

@keyframes Fade-in2{
    0% { opacity:0; transform:translateY(-15px); }
   50% { opacity:0; transform:translateY(-15px); }
  100% { opacity:1; transform:translateY(  0px); }
}

@-webkit-keyframes Fade-in2{ /*Safari & Chrome */
    0% { opacity:0; transform:translateY(-15px); }
   50% { opacity:0; transform:translateY(-15px); }
  100% { opacity:1; transform:translateY(  0px); }
}

/* ===================
回転するアニメーション
===================*/
@keyframes rotate{
    0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes rotate{ /*Safari & Chrome */
    0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); } 
}

@keyframes rotateR{
    0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@-webkit-keyframes rotateR{ /*Safari & Chrome */
    0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-360deg); } 
}

/* ===================
宙に浮くアニメーション
===================*/
@keyframes vertical {
    0% { transform:translateY(-25px); }
  100% { transform:translateY(  0px); }
}

/* ===================
transitionスロー
===================*/
*{
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition:    all 0.25s ease-in-out;
  -o-transition:      all 0.25s ease-in-out;
  transition:         all 0.25s ease-in-out;
}

/* ===================
new clearfix 
===================*/  
.clearfix:after {  
visibility:hidden;/*見えなくする*/ 
height:0;/*見えなくする*/
display: block;/*block要素にする*/
font-size: 0;  
content: " ";  
clear: both;  
}  
* html .clearfix             { zoom: 1; } /* IE6 */  
*:first-child+html .clearfix { zoom: 1; } /* IE7 */ 

/* ===================
01.bodyのフォントとカラー設定
===================*/

body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#6e6e6e;
	font-size:1em;
	-webkit-text-size-adjust: none;
}

/* ===================
02.wrapperからはみ出す場合は非表示
===================*/


/* ===================
03.hover
===================*/

/*リンクの通常時の設定*/
a:link,
a:visited,
a:active{
	text-decoration:underline;
	color:#ffffff;
}

/*リンクのホバー時の設定(透過)*/
a:hover{
	text-decoration:underline;
	filter: alpha(opacity=75);
	-moz-opacity:0.75;
	opacity:0.75;
}

/* ===================
04.header
===================*/

/*headerTopの背景設定*/
#headerTop{
	background:url(../img/Share_headerLine.png) center repeat-x;
	height:20px;
	width:100%;
	position:fixed;
	top:0px;
	z-index:1000;
}

#headerBackground1{
	width:100%;
	height:160px;
	background-color:#FFFFFF;
}

#headerBackground2{
	width:100%;
	height:40px;
	background:url(../img/headerBackground.png) center repeat-x;
}

/*headerTopの文字設定*/
#headerLine{
	width:960px;
	line-height:20px;
	margin:0 auto;
	color:#ffffff;
	font-size:0.8em;
}

#headerLine h1{
	margin-left:20px;
	float:left;
}

#headerLine li{
	float:right;
	margin-right:20px;
}

/*ロゴ設定*/
#headerTop h2 img{
	width:162px;
	height:auto;
}

#headerTop h2{
	margin-top:-165px;
	text-align:center;
}

/*headerTop_SPの背景設定*/
#headerTop_SP{
	display:none;
}

/* ===================
05.nav
===================*/

/*globalNavの基本設定*/
#globalNav{
	position:fixed;
	top:90px;
	left:50vw;
	z-index:1000;
}

#globalNav ul{
	width:960px;
	margin-left:-490px;
}

#globalNav ul li{
	position:relative;
	height:81px;
	width:81px;
	float:left;
	margin-left:80px;
}

/*ホバー時の画像との位置調整*/
#globalNav ul li img{
	position:absolute;
	top:15px;
}

#globalNav #about img{
	position:absolute;
	left:0;
}

#globalNav #menu img{
	position:absolute;
	left:5px;
}

#globalNav #staff img,
#globalNav #info img{
	position:absolute;
	left:10px;
}

/*globalNavの位置設定*/
#globalNav #staff{
	margin-left:310px;
}

/*ホバー時のglobalNavの設定*/
#globalNav li:hover{
	background:url(../img/Menuhover.png) center no-repeat;
}

/*globalNav_SPの基本設定*/
#globalNav_SP{
	display:none;
}

/* ===================
06.footer
===================*/

/*フッターの設定*/
#footer{
	width:100%;
	background:url(../img/Share_headerLine.png) center repeat-x;
	font-size:0.8em;
	text-align:center;
	color:#ffffff;
	line-height:20px;
	min-height:20px;
}

/*Topボタンの設定*/
#footer img{
	position:fixed;
	bottom:40px;
	right:50px;
	animation: vertical 1s ease-in-out infinite alternate;
}

/*メディアクエリ設定（※widthが959px以下の場合にCSSを適用する）*/
@media screen and (max-width:959px){

/* =====================
01.body設定
02.wrapperからはみ出す場合は非表示
03.hover
04.header
05.nav
06.footer
======================*/  

/* ===================
01.body
===================*/

/*フォントの設定*/
body{
	font-size:0.85em;
}

/* ===================
02.wrapperからはみ出す場合は非表示
===================*/


/* ===================
03.hover
===================*/


/* ===================
04.header
===================*/

/*headerTopの文字設定*/
#headerLine{
	width:640px;
}

#headerLine h1{
	display:none;
}

/*headerTopの背景設定*/
#headerBackground1{
	width:100%;
	height:180px;
}

/*ロゴ設定*/
#headerTop h2{
	margin-top:-170px;
}

/* ===================
05.nav
===================*/

/*globalNavの基本設定*/
#globalNav{
	top:45px;
	left:50vw;
}

#globalNav ul{
	width:640px;
	margin-left:-324px;
}

#globalNav ul li{
	position:relative;
	height:81px;
	width:81px;
	float:left;
	margin-left:50px;
}

/*ホバー時の画像との位置調整*/
#globalNav ul li img{
	position:absolute;
	top:15px;
}

#globalNav #about img{
	position:absolute;
	left:0;
}

#globalNav #menu img{
	position:absolute;
	left:5px;
}

#globalNav #staff img,
#globalNav #info img{
	position:absolute;
	left:10px;
}

/*globalNavの位置設定*/
#globalNav #menu{
	margin-left:360px;
}

#globalNav #staff{
	margin-left:48px;
}

#globalNav #info{
	margin-left:366px;
}

/*ホバー時のglobalNavの設定*/
#globalNav li:hover{
	background:url(../img/Menuhover.png) center no-repeat;
}

/* ===================
06.footer
===================*/

/*フッターの設定*/
#footer{
	font-size:0.7em;
}

/*Topボタンの設定*/
#footer img{
	height:100px;
	width:auto; /*IE8のみに適用*/
	bottom:25px;
	right:35px;
}

}

/*メディアクエリ設定（※widthが639px以下の場合にCSSを適用する）*/
@media screen and (max-width:639px){

/* =====================
01.body設定
02.wrapperからはみ出す場合は非表示
03.hover
04.header
05.nav
06.footer
======================*/  

/* ===================
01.body
===================*/

/*フォントの設定*/
body{
	font-size:0.75em;
}


/* ===================
02.wrapperからはみ出す場合は非表示
===================*/


/* ===================
03.hover
===================*/


/* ===================
04.header
===================*/

/*headerTopの設定*/
#headerTop{
	display:none;
}

/*headerTop_SPの背景設定*/
#headerTop_SP{
	display:block;
	height:64px;
	width:100%;
	background:url(../img/Share_headerLine_SP.png) center no-repeat;
}

/*ロゴ設定*/
#headerTop_SP h2 img{
	height:32px;
	width:auto;
}

#headerTop_SP h2{
	text-align:center;
	padding-top:16px;
}

/*headerTop_SPのナビのアイコン設定*/
.pusher {
	width:60px;
	height:50px;
	position:fixed;
	top:7px;
	left:0px;
	z-index: 10000;
}

.pusher span {
	width:26px;
	height:2px;
	display:block;
	background:#ffffff;
	margin:0 0 6px 16px;
}

.pusher span:first-child {
	margin:16px 0 6px 16px;
}
.pusher span:last-child {
	margin:0 0 0 16px;
}

.pusher.click span:nth-of-type(1) {
	-webkit-transform: rotate(45deg);
	-moz-transform:    rotate(45deg);
	-o-transform:      rotate(45deg);
	transform:         rotate(45deg);
	margin:22px 0 0 16px;
	-webkit-transition: all 0.25s ease-in-out;
  	-moz-transition:    all 0.25s ease-in-out;
  	-o-transition:      all 0.25s ease-in-out;
  	transition:         all 0.25s ease-in-out;
}
.pusher.click span:nth-of-type(2) {
	opacity:0;
	-webkit-transition: all 0.25s ease-in-out;
  	-moz-transition:    all 0.25s ease-in-out;
  	-o-transition:      all 0.25s ease-in-out;
  	transition:         all 0.25s ease-in-out;
}
.pusher.click span:nth-of-type(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform:    rotate(-45deg);
	-o-transform:      rotate(-45deg);
	transform:         rotate(-45deg);
	margin:-10px 0 0 16px;
	
}

.open{
	//background-color:rgba(0, 0, 0, 0.8);
}

.floating {
    position: fixed;
    top:23px;
	background:#FF8C14;
}

/* ===================
05.nav
===================*/

/*globalNavの設定*/
#globalNav{
	display:none;
}

/*globalNav_SPの設定*/
#globalNav_SP{
	display:block;
	width:320px;
	margin:0 auto;
}

nav {
    backface-visibility: hidden;
    left: 0;
    overflow: hidden;
    padding-top: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
	display:block;
}

nav .bg-cover{
	z-index:1500;
	position:absolute;
	top:0px;
	width:100%;
	height:100%;
	display:table;
}

nav .menupuncher{
	visibility:hidden;
	top:-10%;
	width:100%;
	padding:0;
	opacity:0;
	display:table-cell !important;
	vertical-align:middle;
}

nav .menupuncher li{
	list-style:none;
	text-align:left;
}

nav .menupuncher li a{
	padding-left:10px;
	padding-top:10px;
	width:100%;
	display:block;
	letter-spacing:0.02em;
	color:#fff;
	text-decoration:none;
	font-size: 50px;
}

nav .menupuncher li a:hover{
	background:#fff;
	color:#000;
}

nav .menupuncher li a:focus{
	outline:0
}
nav.open{
	height:100%
}
nav.open ul{
	visibility:visible;
	opacity:1;
}


/* ===================
06.footer
===================*/

/*フッターの設定*/
#footer{
	font-size:0.6em;
}

/*Topボタンの設定*/
#footer img{
	height:80px;
	width:auto; /*IE8のみに適用*/
	bottom:10px;
	right:15px;
}

}