@charset "UTF-8";
html{
	height: 100%;
}

body{
	width: 100%;
	height: 100%;
	background: #ffffff;
	color:#000000;
}

#loading{
	display:none;
	width: 90px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-30px;
}


article{
	position: relative;
	display:inline-block;
	background: #ffffff;
	z-index: 10;
	width: 100%;
	margin-top:-42px;
	margin-bottom: 50px;
	/*メイキング削除分を調整する	margin-bottom: 400px; */
	min-width: 985px;
}
section{
	width: 100%;
	background: #ffffff;
}

section>div{
	margin: 0 auto;
	width: 980px;
}
a{
	/* リンクの文字色変更 */
	/* color: #045bab; */
	color:#ffffff;
	text-decoration: none;
}

/* 訪問済リンクの文字色を変えない対応 */
a:visited {
	color: #ffffff;
}

h2{
	margin: 230px 0 50px 0;
	text-align: center;
}

h2 b{
	margin: 230px 0 50px 0;
	text-align: center;
	font-size: 28px;
}

.ENGLISH-h2 {
    font-size: 19px; /* 見出し下英語のフォントサイズを調整 */
    margin-top: -5px; /* 見出し下英語の上の余白を調整 */
    margin-bottom: 5px; /* 見出し下英語の下の余白を調整 */
    display: block; /* 見出し下英語を新しい行に表示 */
}

h4{
	margin: 0 0 26px;
	padding: 0 0 0 0;
	border-left: 6px solid #0E2A44;
	font-size: 26px;
	letter-spacing: 2px;
}

nav{
	position: relative;
	z-index: 100;
}

nav ul{
	position: relative;
}

nav ul li{
	float: left;
	list-style: none;
}


/* topnavi */
nav#topNavi {
	position: relative;
	margin: 0 auto;
	width: 1100px;
}

nav#topNavi ul{
	margin: 0 auto;
	width: 1100px;
}

nav#topNavi ul li{
	display: block;
	overflow: hidden;
	margin: 25px 14px 0 30px;

/* ↑項目を一時的に減らすため、位置調整。元の設定は下記のモノ
	margin: 25px 80px 0 30px;
*/
	width: 130px;
	background: url(../images/btnMenu.png) no-repeat;
	text-indent: 100%;
}

nav#topNavi ul li.facebook{
	margin: 25px 25px 0 45px;
}


nav#topNavi ul li:last-child{
	margin: 25px 0 0 15px;
}

nav#topNavi ul li.facebook{
	margin-top: 20px;
}

nav#topNavi ul li.twitter{
	margin-top: 22px;
}

nav#topNavi ul li a{
	display: block;
	width: 100%;
}

/* 訪問済リンクの文字色を変えない対応 */
nav#topNavi ul li a:visited {
	color: #ffffff;
}

nav#topNavi ul li.nav01{
	width: 105px;
	height: 16px;
	background: none;
	text-indent: 0;
}

nav#topNavi ul li.nav01:hover{
	background-position: -108px -251px;
}

nav#topNavi ul li.nav02{
	width: 58px;
	height: 16px;
	background: none;
	text-indent: 0;
}

nav#topNavi ul li.nav02:hover{
	background-position: 0px -251px;
}

nav#topNavi ul li.nav025{
	width: 88px;
	height: 16px;
	background: none;
	text-indent: 0;
}

nav#topNavi ul li.nav025:hover{
	background-position: 0px -251px;
}

nav#topNavi ul li.nav03{
	width: 51px;
	height: 16px;
	background: none;
	text-indent: 0;
}

nav#topNavi ul li.nav03:hover{
	background-position: -234px -251px;
}

nav#topNavi ul li.nav04{
	width: 115px;
	height: 16px;
	background: none;
	text-indent: 0;
}

nav#topNavi ul li.nav04:hover{
	background-position: -193px -251px;
}
nav#topNavi ul li.nav05{
	width: 71px;
	height: 16px;
	background: none;
	text-indent: 0;
}

nav#topNavi ul li.nav05:hover{
	background-position: -317px -251px;
}


nav#topNavi ul li.nav06{
	width: 77px;
	height: 16px;
	background: none;
	text-indent: 0;
}


nav#topNavi ul li.nav06:hover{
	background-position: -46px -251px;
}



/* ↑画像をテキスト表示に調整。元の設定は下記のモノ
	nav#topNavi ul li.nav01{
	width: 85px;
	height: 14px;
	background-position: -108px -237px;
}
*/

nav#topNavi ul li.facebook{
	width: 11px;
	height: 22px;
	background-position: -284px -237px;
}

nav#topNavi ul li.facebook:hover{
	background-position: -284px -259px;
}
nav#topNavi ul li.twitter{
	width: 22px;
	height: 19px;
	background-position: -295px -237px;
}
nav#topNavi ul li.twitter:hover{
	background-position: -295px -259px;
}






/* followingNavi */
nav#followNavi {
	position: fixed;
	top: 0;
	width: 100%;
	height: 67px;
	background: #0E2A44;
	text-align: center;
	-webkit-transition:0.15s;
	transition:0.15s;
	-webkit-transform:translateY(-70px);
	transform:translateY(-70px);
	transition-timing-function:ease-out;
	-webkit-transition-timing-function:ease-out;
	min-width: 1015px;
}

nav#followNavi div#btnShow{
	display: none;
}

nav#followNavi.on{
	-webkit-transition:0.15s;
	transition:0.15s;
	transition-timing-function:ease-out;
	-webkit-transition-timing-function:ease-out;
	-webkit-transform:translateY(0px);
	transform:translateY(0px);
}

nav#followNavi ul{
    background: #0E2A44;
    right: 0;
    height: 67px;
    display: flex;  /* 追加 */
    justify-content: space-between;  /* 変更 */
    width: 70%;  /* 親要素の幅を狭くする */
    margin: 0 auto;  /* 中央寄せ */
}

nav#followNavi ul li{
    overflow: hidden;
    border: none;
    background: url(../images/btnMenu.png) no-repeat;
    text-indent: 0;
    top:20px;
    margin: 0px 0px 0 0px;
    position: relative;  /* 変更 */
    width: 15%;  /* メニュー項目自体の幅を広くする */
}


nav#followNavi ul li a{
	display: block;
	width: 100%;
	height: 65px;
}

	nav#followNavi ul li#logo{
	top:20px;
	left:60px;
	background-position: -839px 0px;
	width: 168px;
	height: 26px;
	background: none;
	text-indent: 0;
}
		nav#followNavi ul li#logo:hover{
			background-position: -839px -26px;
		}
		nav#followNavi ul li#logo a{
			width: 168px;
			height: 26px;
		}

	nav#followNavi ul li.nav01{
	background-position: -108px -251px;
	width: 153px;
	height: 79px;
	background: none;
	text-indent: 0;
}
		nav#followNavi ul li.nav01:hover{
		background-position: -238px -79px;
		}
		nav#followNavi ul li.nav01.current{
		background-position: -238px -158px;
		}

	nav#followNavi ul li.nav02{
	background-position: 0px 100px;
	width: 110px;
	height: 79px;
	background: none;
	text-indent: 0;
}

		nav#followNavi ul li.nav02:hover{
		background-position: 0px -79px;
		}
		nav#followNavi ul li.nav02.current{
		background-position: 0px -158px;
		}

		nav#followNavi ul li.nav025{
			background-position: 0px 100px;
			width: 110px;
			height: 79px;
			background: none;
			text-indent: 0;
		}
				nav#followNavi ul li.nav025:hover{
				background-position: 0px -79px;
				}
				nav#followNavi ul li.nav025.current{
				background-position: 0px -158px;
				}
		
	nav#followNavi ul li.nav03{
	background-position: -618px 0px;
	width: 113px;
	height: 79px;
	background: none;
	text-indent: 0;
}
		nav#followNavi ul li.nav03:hover{
		background-position: -618px -79px;
		}
		nav#followNavi ul li.nav03.current{
		background-position: -618px -158px;
		}

	nav#followNavi ul li.nav04{
	background-position: -513px 0px;
	width: 115px;
	height: 79px;
	background: none;
	text-indent: 0;
}
		nav#followNavi ul li.nav04:hover{
		background-position: -513px -79px;
		}
		nav#followNavi ul li.nav04.current{
		background-position: -513px -158px;
		}

	nav#followNavi ul li.nav05{
	background-position: -391px 0px;
	width: 122px;
	height: 79px;
	background: none;
	text-indent: 0;
}
		nav#followNavi ul li.nav05:hover{
		background-position: -391px -79px;
		}
		nav#followNavi ul li.nav05.current{
		background-position: -391px -158px;
		}
		
	nav#followNavi ul li.nav06{
	background-position: -110px 0px;
	width: 128px;
	height: 79px;
	background: none;
	text-indent: 0;
}
		nav#followNavi ul li.nav06:hover{
		background-position: -110px -79px;
		}
		nav#followNavi ul li.nav06.current{
		background-position: -110px -158px;
		}



	nav#followNavi ul li.facebook{
		width: 11px;
	height: 22px;
	background-position: -284px -237px;
	text-indent: -9999px;  /* 変更 */
}
		nav#followNavi ul li.facebook:hover{
			background-position: -284px -259px;
}

	nav#followNavi ul li.twitter{
	width: 22px;
	height: 19px;
	background-position: -295px -237px;
	text-indent: -9999px;  /* 変更 */
}
		nav#followNavi ul li.twitter:hover{
		background-position: -295px -259px;
}



div#samurai{
	position: relative;
	width: 100%;
	height: 900px;
	background: url(../images/bgTop.jpg) no-repeat;
	background-position: center top;
	background-size: cover;
	z-index: 100;

}

div#samurai h1{
	display: block;
	text-align: center;
	margin: 0 auto;
	background: url(../images/logo.png) no-repeat center center;
	background-size: 95%;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
}

div#samurai p#btnScroll{
	position: absolute;
	bottom:62px;
	text-align: center;
	width: 100%;
}

div#samurai p#btnScroll a{
	background: url(../images/btnEtc.png) no-repeat;
	display: block;
	background-position: -704px 0px;
	width: 69px;
	height: 94px;
	margin: 20px auto 0;
	text-align: center;
	text-indent: -9999px;
	overflow: hidden;
}

div#samurai p#btnScroll a:hover{
	background-position: -704px -94px;
}

/*
div#philosophyBox{

	width: 96%;
}
*/


div#philosophy{
/*	z-index: 2;*/
	margin: 0 auto;
	padding: 100px 0 50px 0;
	width: 1000px;

	position: relative;
	top: 0;
	z-index: 1;
	overflow: hidden;
	background-position: center center;
	background-size: cover;

}

div#philosophy h2{

	/* margin: 0 0 50px; */
	/* text-align: center; */
	margin-block-start: 0;
	margin: 25px auto 0;
	font-size: 25px;
	line-height: 2;
	color:#0E2A44;
	letter-spacing: 4px;
	border-bottom:solid;
	border-color:#0E2A44;
	border-width: 3px;
	margin-right: auto;
	margin-left: auto;
	width: 410px;
}

/* philosophy用のh3設定を追加 */
div#philosophy h3{

	font-size: 25px;
	line-height: 2;
	letter-spacing: 2px;
	color:#C9242B;
	font-weight: 100;
/*
	border-bottom:solid;
	border-color:#e9e9e9;
	border-width: 1px;
*/
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
	text-decoration: none;
}

/* 
div#philosophy p{
	margin: 0 0 30px;
	letter-spacing: 2px;
	font-size: 14px;
	line-height: 2.0em;
}

div#philosophy div#enText{
	margin: 50px 0 0 0;
}

div#philosophy div#enText p{
	color: #707070;
}
*/





#news {
	width: 100%;
	height: 400px;
	background: url(../images/bgTop.jpg) no-repeat;
	background-position: center top;
	background-size: cover;
	background-color: #000000;
	text-align: center;
	display: flex;
    flex-direction: column; /* 縦方向に要素を並べる */
    justify-content: flex-start; /* 要素を上に配置 */
    align-items: center; /* 要素を中央に配置 */
	background-attachment: fixed;
	position: relative;
	overflow: hidden; /* 必要に応じて追加 */
	color:#ffffff;
}

#news::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* 透明度30%の黒色 */
    z-index: 1;
}

#news * {
    position: relative;
    z-index: 2;
}

#news h2 {
    transform: translateY(50px); /* 移動 */
	/* margin: 0 0 50px; */
	/* text-align: center; */
	margin-block-start: 0;
	margin: 25px auto 0;
	font-size: 25px;
	line-height: 2;
	color:#ffffff;
	letter-spacing: 4px;
	border-bottom:solid;
	border-color:#ffffff;
	border-width: 3px;
	margin-right: auto;
	margin-left: auto;
	width: 410px;
}

div#newsItemList {
	margin: 60px auto 0;
	width: 860px;
}

.oval-button {
    text-decoration: none;
	text-align: left;
}

div.newsItem {
	margin-bottom: 20px;
    padding: 15px  30px;
	background-color: #0E2A44;
	border-radius: 40px;
	transition: background-color 0.3s;
	display: flex;
}

div.newsItem:hover {
	background-color: #0976d5;
}

div.newsItem p {
	color: white;
}

div.newsDate {
	width: 150px;
	display: flex;
	align-items: center;
}
div.newsContent {
	width: 650px;
	display: flex;
	align-items: center;
}

/* スマホの画面サイズに合わせてスタイルを調整 */
@media (max-width: 640px) {
	#news {
        height: 640px; /* ここに適切な高さを設定します */
    }
	div#newsItemList {
		width: 90%;
		margin: 60px auto 0;
	}
	div.newsItem {
		display: block;
	}
    .oval-button {
        width: 100%;
    }
	div.newsDate {
		display: block;
		width: 100%;
	}
	div.newsContent {
		display: block;
		width: 100%;
		padding-left: 10px;
	}
}


#recruit {
	width: 100%;
	height: 100%;
	background: url(../images/bgTop.jpg) no-repeat;
	background-position: center top;
	background-size: cover;
	text-align: center;
    flex-direction: column; /* 縦方向に要素を並べる */
    justify-content: flex-start; /* 要素を上に配置 */
    align-items: center; /* 要素を中央に配置 */
	background-attachment: fixed;
	position: relative;
}

#recruit::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* 透明度50%の黒色 */
    z-index: 1;
}

#recruit * {
    position: relative;
    z-index: 2;
}




#recruitTitle {
    clear: both;
	background-size: cover;
}



div#companyTitle{
	position: relative;
	top: 0;
	z-index: 1;
	overflow: hidden;

	margin: 0 auto;
	padding: 50px 0 0 0;
	width: 930px;
	/*
	width: 100%;
	height: 544px;
	
*/
	background-position: center center;
	background-size: cover;
	text-align: center;
}


div#companyContent{
	z-index: 2;
/* 	margin: 0 auto; */
	padding: 25px 0 50px 0;
/* 	min-height: 634px; */
	width: 930px;
/*
	z-index: 2;
	margin: 100px 0;
 	min-height: 640px; 
	background: white;*/
}

div#companyContent dl{
	display: block;
	float: left;
	width: 360px;
}

div#companyContent dt{
	float:left;
	clear:left;
	margin:0;
/*
	padding:10px 0 10px 0.5em;
*/
	width:8em;
	letter-spacing: 2px;
	font-size: 14px;
	line-height:2em;
}

div#companyContent dd{
	margin:0;
/*
	padding:10px 0.5em 10px 9em;
*/
	letter-spacing: 2px;
	font-size: 14px;
	line-height:2em;
}

span.explain{
margin: 0 0 0 5px;
}
span.caution{
	display: block;
	font-size: 12px;
}

span.caution:before{
	content: "※";
}

span.inLink{
	display: block;
	margin: 0 0 0 6px;
	font-size: 14px;
}
span.inLink:before{
	content: ">";
	color: #ffffff;
}

div#companyContent div#topMovie{
	margin: 0 0 0 411px;
}

div#companyContent div#topMovie h4{
	font-size: 16px;
	margin: 10px 0;
}

div#companyContent div#topMovie p{
	font-size: 14px;
	line-height: 2em;
	letter-spacing: 1px;
}


div#contentsTitle{
	position: relative;
	top: 0;
	z-index: 1;
	overflow: hidden;

	margin: 0 auto;
	padding: 50px 0 0 0;
	width: 1000px;
	/*
	width: 100%;
	height: 544px;
	
*/
	background-position: center center;
	background-size: cover;
	text-align: center;
}


div#contentsContent{
	z-index: 2;
/* 	margin: 0 auto; */
	padding: 25px 0 50px 0;
/* 	min-height: 634px; */
	width: 1000px;
/*
	z-index: 2;
	margin: 100px 0;
 	min-height: 640px; 
	background: white;*/
}

div#contentsContent dl{
	display: block;
	float: left;
	width: 360px;
}

div#contentsContent dt{
	float:left;
	clear:left;
	margin:0;
/*
	padding:10px 0 10px 0.5em;
*/
	width:8em;
	letter-spacing: 2px;
	font-size: 14px;
	line-height:2em;
}

div#contentsContent dd{
	margin:0;
/*
	padding:10px 0.5em 10px 9em;
*/
	letter-spacing: 2px;
	font-size: 14px;
	line-height:2em;
}

span.explain{
margin: 0 0 0 5px;
}
span.caution{
	display: block;
	font-size: 12px;
}

span.caution:before{
	content: "※";
}

span.inLink{
	display: block;
	margin: 0 0 0 6px;
	font-size: 14px;
}
span.inLink:before{
	content: ">";
	color: #ffffff;
}

div#contentsContent div#topMovie{
	margin: 0 0 0 411px;
}

div#contentsContent div#topMovie h4{
	font-size: 16px;
	margin: 10px 0;
}

div#contentsContent div#topMovie p{
	font-size: 14px;
	line-height: 2em;
	letter-spacing: 1px;
}





div#movie{
    position: relative;
    height: 360px; 
    background: url(../images/roblox.png) no-repeat;
    background-position: center bottom;
    background-attachment: scroll;
    background-size: 85% auto;
}



p#play{
	position: absolute;
	top:163px;
	left: 50%;
	display: block;
	overflow: hidden;
	margin: 0 0 0 -35px;
	width: 69px;
	height: 69px;
	background: url(../images/btnEtc.png) no-repeat;
	background-position: -842px 0px;
	text-align: center;
	cursor: pointer;
}

p#play:hover{
	background-position: -842px -69px;
}

p#play a{
	display: block;
	width: 69px;
	height: 69px;
	text-indent: -9999px;
}

@media (max-width: 640px) {
    div#movie {
		height: 260px; 
        width: 95%; /* 幅を95%にする */
        margin-left: auto; /* 左右のマージンを自動にして中央配置 */
        margin-right: auto;
    }

	p#play {
        top: 50%;  /* top位置を50%に変更 */
        transform: translateY(-50%);  /* Y方向に50%移動して上下中央寄せ */
    }
}

div#worksTitle{
	position: relative;
	top: 0;
	z-index: 1;
	overflow: hidden;
	width: 100%;
	height: 544px;
	background: url(../images/bgWorksMyCryptoFootballer.png) no-repeat fixed #ffffff;
	background-position: center center;
	background-size: cover;
}

div#worksContents{
	margin: 100px auto;
	width: 900px;
}

#works h3{
	margin-bottom: 65px;
}

#works div.gamePict{
	margin: 0 auto 26px;
}

#works p{
	margin: 0px auto 18px;
	font-size:14px;
}
#works dl{
	margin: 0 0 0 -10px;
}
#works dt{
	line-height:2em;
	float: left;
	margin: 0 10px 0 0;
	font-size: 14px;
}
	#works dt:before{
		content: "［";
	}
	#works dt:after{
		content: "］";
	}

#works dd{
	font-size: 14px;
	line-height:2em;
	margin: 0;
	font-size: 14px;
}

#works p.copyright{
	margin: 12px 0 80px 0;
	color:#1e1e1e;
	font-size: 13px;
}

/*
div#teamTitle{
	position: relative;
	top: 0;
	z-index: 1;
	overflow: hidden;
	width: 100%;
	height: 544px;
	
	background-position: center center;
	background-size: cover;
}
*/

div#teamContents{
	position: relative;
	margin: 0 auto 0;
	min-height: 488px;
	width: 980px;
}

div#teamContents div.staffBox{
	position:absolute;
	display: block;
	float: left;
	overflow: hidden;
	margin: 0;
	width: 196px;
	height: 488px;
	border: none;
}

	#no1{
		left:0;
	}
	#no2{
		left:196px;
	}
	#no3{
		left:392px;
	}
	#no4{
		left:588px;
	}
	#no5{
		left:784px;
	}



div#teamContents div.staffBox div.teamText{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	color:#ffffff;
	width: 166px;
	padding: 15px;
}

div#teamContents div.staffBox div.teamText p{
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 20px;
	text-align: left;
	margin: 0 0 10px;
}


div#teamContents div.staffBox p.teamPhoto{
	position: absolute;
	opacity: 1;
	left: 0;
	z-index: 1;
	height: 489px;
	transition: opacity 0.4s linear 0s;
	border: 1px solid #ffffff;
}

div#teamContents div.staffBox p.teamPhoto:hover{
	opacity: 0;
}

div#teamContents div.staffBox p.teamPhotoHOVER{
	position: absolute;
	opacity: 1;
	top:0;
	left: 0;
	height: 489px;
	border: 1px solid #ffffff;
}

div#recruitTitle{
	margin: 10px auto 0px;
	/* margin: 150px auto 100px; */
}

div#recruitTitle h2{
/*	margin: 0 0 25px;
	text-align: center;
*/
	margin-block-start: 0;
	margin: 25px auto 0;
	font-size: 25px;
	line-height: 2;
	color:#ffffff;
	letter-spacing: 4px;
	border-bottom:solid;
	border-color:#ffffff;
	border-width: 3px;
	margin-right: auto;
	margin-left: auto;
	width: 410px;
	line-height:2em;
	
}

div#recruitTitle p{
	/* text-align: center; */
	font-size: 24px;
	letter-spacing: 2px;
	line-height: 68px;
	width: 1000px;
	color:#ffffff;
	font-weight: 500;
	
}



div#recruitContents{
	margin: 80px auto 0;
}

div#recruitContents dl{
	margin: 0 0 80px;
}

#recruitContents dl {
    background-color: rgba(0, 0, 0, 0.7); /* 透明度50%の黒 */
    padding: 20px; /* テキストとボックスの間にスペースを作る */
    border-radius: 10px; /* ボックスの角を丸くする */
    color: white; /* テキストの色を白にする */
}


div#recruitContents dt{
	float:left;
	clear:left;
	margin:0;
	padding:10px 0 5px 0;
	width:7em;
	letter-spacing: 2px;
	font-weight: 500;
	font-size: 14px;
	line-height:1.5em;
	color: #ffffff;
	
}

div#recruitContents dd{
	margin:0;
	padding:10px 0.5em 5px 8em;
	letter-spacing: 2px;
	font-size: 14px;
	line-height:1.5em;
	color: #ffffff;
}

div#recruitContents p{
	font-size: 14px;
	letter-spacing: 2px;
	color:#ffffff;
	text-shadow: 0px 0px 0px #000000; 
}

div#recruitContents div#bunnerImg{
	width: 600px;
	text-align: center;
	margin: 80px auto 0;
}

div#recruitContents div#entryButton{
	position: relative;
	width: 352px;
	text-align: center;
/*
	margin: 80px auto 0;
*/
	border: 3px solid #0E2A44;
	background: #F0B133;
	margin: 40px auto 0;
}




div#entryButton a{
	display: block;
	width: 100%;
	height: 48px;
	color: #0E2A44;
	text-align: center;
	font-size: 20px;
	padding: 26px 0 0 0;
}


div#entryButton:hover{
	-webkit-transition: all .3s;
	transition: all .3s;
	border: 3px solid #0E2A44;
	background: #0E2A44;
}

div#entryButton a:hover{
	color: #0E2A44;
	background: #ffffff;
}


section#news{
	margin: 65px 0 0 0;

	padding: 0px 0 0px 0px;

	/* 	height: 470px; */
}

section#recruit{
	margin: 0px 0 0 0;
	padding:100px 0 130px 0;
/*
	margin: 100px 0 0 0;
	padding:100px 0;
*/
	/* 	height: 470px; */
}


section#contact{
	margin: 0px 0 0 0;
	padding:60px 0 60px 0;
/*
	margin: 100px 0 0 0;
	padding:100px 0;
*/
	/* 	height: 470px; */
	background: /*url(../images/bgSamurai2.png)*/ no-repeat center right #0E2A44;

}


section#contact h2{
		/* margin: 0 0 50px; */
		/* text-align: center; */
		margin-block-start: 0;
		margin: 25px auto 0;
		font-size: 25px;
		line-height: 2;
		color:#ffffff;
		letter-spacing: 4px;
		border-bottom:solid;
		border-color:#ffffff;
		border-width: 3px;
		margin-right: auto;
		margin-left: auto;
		width: 410px;
	}


section#contact p{
	margin: 20px 0 0 0;
	color: #ffffff;
	text-align: center;
	font-size: 14px;
	line-height: 2.0rem;
	letter-spacing: 2px;
}

section#contact div#contactButton{
	position: relative;
	margin: 60px auto 0;
	width: 352px;
	border: 3px solid #ffffff;
	background: #F0B133;
}

section#contact div#contactButton a {
    display: flex;           /* フレックスボックスを有効にする */
    align-items: center;     /* 子要素を縦方向の中央に配置 */
    justify-content: center; /* 子要素を横方向の中央に配置 (必要に応じて) */
    width: 100%;
    height: 48px;
    color: #000000;
    font-size: 20px;
    padding: 0;              /* 上部のパディングを削除 */
}

section#contact div#contactButton:hover{
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	border: 3px solid #ffffff;
	background: #ffffff;
}

section#contact div#contactButton a:hover{
	color: #0E2A44;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
div#entryButton a{
	height: 51px;
	padding: 22px 0 0 0;
	}
	section#contact div#contactButton a{
	height: 51px;
	font-size: 18px;
	text-align: center;
	padding: 10px 0;
	}

}

/* スマホの画面サイズに合わせてスタイルを調整 */
@media (max-width: 640px) {
	#contact {
        height: 1200px; /* ここに適切な高さを設定します */
    }
	
}

@media screen and (max-width: 640px) { /* スマホ画面の場合 */
    section#contact div#contactButton {
        width: 390px; /* もとの352pxから増やす。値は必要に応じて調整してください。 */
    }
}


/*
div#gotop{
	position: fixed;
	right: 40px;
	width: 69px;
	bottom: 70px;
	z-index: 100;
	display: none;
}

div#gotop a{
	display: block;

	width: 100%;
	height: 94px;
	overflow: hidden;

}

div#gotop a:hover{


}
*/

footer{
	position: fixed;
	bottom: 0;
	left: 0;
	display: block;
	z-index: 1;
	width: 100%;
	background: #0E2A44;
	padding-top:30px; /* 元は 400px */
}

/* ムービー部分は削除
*/

footer p{
	color: #ffffff;
	text-align: center;
	font-size: 11px;
	margin: 5px 0 0 0;
	bottom: 0;
}

div#footerBox{
	position: absolute;
	bottom:0;
	width: 100%;
	background: #0E2A44;
	padding:10px 0 0 0;
	height: 40px;
}

div#footerBox p{
	width: 500px;
	/*会社名に併せて調整　元は→ width: 400px; */
	text-align: center;
}

footer span#privacy{
	margin: 0 10px 0 0;
	line-height: 1.2rem;
	border-right:1px solid #ffffff;
	padding: 0 10px 0 0;
}


footer #privacy a{
	color: #ffffff;
}





/* privacy.html */

body.privacy article{
	width: 100%;
	margin: 0 0 100px 0;
}

body.privacy article section{
	width: 800px;
	margin: 0 auto;
}
body.privacy article section h1{
	font-size: 28px;
	margin: 30px 0 50px 0;
}
body.privacy article section h2{
	text-align: left;
	font-size: 20px;
	margin: 30px 0 10px;
}

body.privacy article section ul{
	margin: 10px 0 10px 20px;
}

body.privacy article section p#form{
	margin: 30px 0 0 0;
}

body.privacy footer{
	position: relative;
	height: 30px;
	padding: 10px 0 0;
}

div.forPcText{
	width: 100%;
}


/* add 20160307 */

#company h2{
	margin-block-start: 0;
	margin: 25px auto 0;
	font-size: 25px;
	line-height: 2;
	color:#0E2A44;
	letter-spacing: 4px;
	border-bottom:solid;
	border-color:#0E2A44;
	border-width: 3px;
	margin-right: auto;
	margin-left: auto;
	width: 410px;
}

#company h3{
	font-size: 25px;
	line-height: 2;
	letter-spacing: 2px;
	color:#0E2A44;
	font-weight: 100;
/*
	border-bottom:solid;
	border-color:#e9e9e9;
	border-width: 1px;
*/
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
	text-decoration: none;
}

#company h4{
	font-size: 26px;
	letter-spacing: 5px;
/*
	border-left:6px solid #0E2A44;
*/
	line-height: 1.1;
	padding:3px 0 0 20px;
	margin-bottom: 25px;
}

/*
div#serviceContents {
}
*/

body.sp div#serviceContents{
	width: 640px;
}

/*
body.sp div#serviceContents h3{
 padding:0 0 0 20px;
}
*/

div#serviceContents div#serviceTop{
	padding: 0px 0 10px 0;
	text-align: center;
}

div.serviceBox {
	padding: 20px 0 0;
}


#serviceContents h2 {
	margin-block-start: 0;
	margin: 2px auto 0;
	font-size: 25px;
	line-height: 2;
	color:#2f2d2d;
	letter-spacing: 4px;
	border-bottom:solid;
	border-color:#0E2A44;
	border-width: 3px;
	margin-right: auto;
	margin-left: auto;
	width: 410px;
}

#serviceContents h3 {
	font-size: 25px;
	line-height: 2;
	letter-spacing: 2px;
	color:#0E2A44;
	font-weight: 100;
/*
	border-bottom:solid;
	border-color:#e9e9e9;
	border-width: 1px;
*/
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
	text-decoration: none;
}

div.serviceTop img.serviceTop{
	text-align: center;
	margin: 80px auto 0;
	width: 400px;
}

#serviceContents p {
	font-size: 15px;
	text-align: left;
	line-height: 1.8;
	color:#2f2d2d;
	margin-bottom: 30px;
	letter-spacing: 3px;
	font-weight: 50;
}



div.developmentBox {
	width:100%;
}

div.development {
	width:980px;
	margin:0 auto;
	padding: 30px 20px 10px 10px;
}

div.developmentBox p.developmentBox {
	font-size: 18px !important;
	color:#2f2d2d;
	letter-spacing: 2px;
}

div.managementBox{
	width:100%;
}

div.management{
	width:980px;
	margin:0 auto;
	padding: 30px 20px 30px 10px;
}

div.managementBox p.managementBox {
	font-size: 18px !important;
	color:#2f2d2d;
	letter-spacing: 2px;
}


#company .managementBox ul li,#company .developmentBox ul li{
	box-sizing: border-box;
	display:block;
	width:442px;
	height:155px;
	list-style: none;
	float:left;
	background:#f8f8f8;
	margin-right:18px;
	margin-bottom:18px;
	position:relative;
	padding: 30px 25px 0 145px;
	/* box-shadow */
	box-shadow:rgba(211, 211, 211, 0.309804) 0px 0px 0px 1px;
	-webkit-box-shadow:rgba(211, 211, 211, 0.309804) 0px 0px 0px 1px;
	-moz-box-shadow:rgba(211, 211, 211, 0.309804) 0px 0px 0px 1px;
	border-bottom: 1px solid #d3d3d3;
	}

#company .managementBox ul li:nth-child(even),#company .developmentBox ul li:nth-child(even){
	margin-right:0;
}


div.sliderBox{
	text-align: center;
	width:900px;
	margin-bottom: 120px;
}





/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before {
    content:url(../images/iconSliderNext.png);
}
.slick-prev:before{
	display:block;
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	     -o-transform: rotate(180deg);
	        transform: rotate(180deg);
}


/*左右の矢印の位置を変える*/
.slick-next {
	right: -77px;
	z-index: 99;
	width:34px;
	height:34px;
}
.slick-prev {
	left: -77px;
	z-index: 100;
	width:34px;
	height:34px;
}

/*スライド数のドットの色を変える*/
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
	color: #0E2A44;
}

/*スライド画像の横幅可変*/
img {
	max-width: 100%;
	height: auto;
}


#company h5:before{
	position:absolute;
	top:25px;
	left:20px;
	vertical-align: middle;
}

#company h5 {
	margin-bottom: 9px;
	font-size: 16px;
	letter-spacing: 2px;
	font-weight: 100;
}

#company ul li p{
	font-size: 12px;
	letter-spacing: 2px;
	font-weight: 100;
}

#company .developmentBox ul li:nth-child(1) h5:before{
	content:url(../images/iconAboutDevelopment02.png);
}
#company .developmentBox ul li:nth-child(2) h5:before{
	content:url(../images/iconAboutDevelopment03.png);
}
#company .developmentBox ul li:nth-child(3) h5:before{
	content:url(../images/iconAboutDevelopment03.png);
}
#company .developmentBox ul li:nth-child(4) h5:before{
	content:url(../images/iconAboutDevelopment04.png);
}
#company .managementBox ul li:nth-child(1) h5:before{
	content:url(../images/iconAboutManagement01.png);
}
#company .managementBox ul li:nth-child(2) h5:before{
	content:url(../images/iconAboutManagement02.png);
}
#company .managementBox ul li:nth-child(3) h5:before{
	content:url(../images/iconAboutManagement03.png);
}
#company .managementBox ul li:nth-child(4) h5:before{
	content:url(../images/iconAboutManagement04.png);
}


#information {
	width: 100%;
	height: 100%; /* ビューポートの高さを100%に設定 */
	background: url(../images/bgTop.jpg) no-repeat;
	background-position: center top;
	background-size: cover;
	background-color: #000000;
	text-align: center;
	display: flex;
    flex-direction: column; /* 縦方向に要素を並べる */
    justify-content: flex-start; /* 要素を上に配置 */
    align-items: center; /* 要素を中央に配置 */
	background-attachment: fixed;
	position: relative;
	overflow: hidden; /* 必要に応じて追加 */
	color:#ffffff;
	
}

#information::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 透明度50%の黒色 */
    z-index: 1;
}

#information * {
    position: relative;
    z-index: 2;
}

/* スマホの画面サイズに合わせてスタイルを調整 */
@media (max-width: 640px) {
	#information {
        height: 860px; /* ここに適切な高さを設定します */
    }
	

}



#company .companyInformation{
	position:relative;
	width:900px;
	height:420px;
	padding-top: 100px;
	margin-bottom:62px;
}

#company .companyInformation h4{
	border:none;
	font-size: 14px;
	margin:0 0 0px;
	padding:0;
	float:left;
	line-height: 3;
	vertical-align: baseline;
	width:140px;
}

#company .companyInformation h4 span{
	display:block;
	letter-spacing: 1px;
	line-height: 1.2;
	margin:-7px 0 0 -9px;
}

#company .companyInformation p{
	font-size: 14px;
	margin:0 0 5px 140px;
	line-height: 3;
}

#company .companyInformation a{
	/* リンクの文字色変更 */
	/* color: #045bab; */
	color:#ffffff;
	text-decoration: none;
}

/* 訪問済リンクの文字色を変えない対応
#company .companyInformation a:visited {
	color: #0E2A44;
}
*/


#company .companyInformation .informationBox01 {
	position:absolute;
	top:250px;
	left:0;
	width:450px;
	height:320px;
	background-color: rgba(0, 0, 0, 0.7); /* 透明度70%の黒 */
	border-radius: 10px; /* ボックスの角を丸くする */
	transform: translateY(-40px); /* 移動 */
	overflow: hidden; /* 新たに追加する境界線要素を隠す */
	padding-right: 30px;
	box-sizing: border-box; /* 追加 */
}

#company .companyInformation .informationBox01:before {
	content: '';
	position: absolute;
	right: 0;
	top: 10px; /* この値はボックスの丸みと一致させます */
	bottom: 10px; /* この値もボックスの丸みと一致させます */
	width: 0.3px; /* 境界線の幅 */
	background-color: #ffffff; /* 境界線の色 */
}




#company .companyInformation .informationBox02 {
	position:absolute;
	top:250px;
	right:0;
	width:450px;
	height:320px;
	background-color: rgba(0, 0, 0, 0.7); /* 透明度70%の黒 */
	border-radius: 10px; /* ボックスの角を丸くする */
	transform: translateY(-40px); /* 移動 */
	overflow: hidden; /* 新たに追加する境界線要素を隠す */
	padding-right: 30px;
	box-sizing: border-box; /* 追加 */
}

#company .companyInformation .informationBox02:before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px; /* この値はボックスの丸みと一致させます */
	bottom: 10px; /* この値もボックスの丸みと一致させます */

}






@media screen and (max-width: 640px) {
	#company .companyInformation .informationBox01 {
        width: 100%; /* 幅を100%に設定 */
		height: auto;
    }
    #company .companyInformation .informationBox02 {
        width: 100%; /* 幅を100%に設定 */
		height: auto;
    }
	#company .companyInformation .informationBox01:before,
  #company .companyInformation .informationBox02:before {
    display: none;
  }
}


#works div.privateBrandBox{
	width:100%;
	background:#fbfbfb;
}

#works div#privateBrand{
	padding-top: 100px;
	padding-bottom: 40px;
	width:900px;
	margin:0 auto;
}


small{
	font-size: 12px;
}

#recruitContents h3{
	font-size: 26px;
	letter-spacing: 5px;
	border-left:6px solid #ffffff;
	line-height: 1.1;
	padding:3px 0 0 20px;
	margin-bottom: 40px;
	text-align: left;

}


body .sp{
	display:none;
}
body .pc{
	display:inline;
}



/* スマホコンテンツ */

body.sp{
	-webkit-text-size-adjust: 100%; 
	max-height: 100%; 
}
body.sp img{
	max-width: 600px;
}

body.sp div.forPcText br{
	display:none;
}
body.sp div.forPcText br:nth-of-type(1){
	display:block;
}
body.sp p, body.sp h1, body.sp h2,body.sp h3, body.sp h4, body.sp h5,body.sp ul li, body.sp dt, body.sp dd{
	max-height: 100%; 
	line-height: 1.5 !important;
}


body.sp div#philosophy p,
body.sp , body.sp div#serviceContents p, div#serviceContents h2,
body.sp div#companyContent dl dt,body.sp div#companyContent dl dd,
body.sp #works dl dt,body.sp #works dl dd,body.sp #works p,
body.sp div#recruitContents dl dt,body.sp div#recruitContents dd, body.sp div#recruitContents p,
body.sp section#contact p,body.sp div#companyContent div#topMovie h4,
body.sp div#companyContent div#topMovie p, body.sp span,body.sp section div#teamContents div.teamText p
{
	font-size: 1.4rem !important;
	max-height: 100%;
}


body.sp div{
	background-size: cover !important;
	background-attachment: scroll !important;
}

body.sp p#btnScroll{
	display: none;
}

body.sp nav#followNavi{
	display: none;
}

body.sp nav#topNavi{
	position:fixed;
	margin: 0 auto;
	width: 640px;
/* 	height: 640px; */
	background:none;
	/* スマホ版メニューの上下部分の色 */
	/* background: #0E2A44; */
	background: #0E2A44;
}

body.sp nav#topNavi div#btnShow{
	position: absolute;
	display: block;
	top: 10px;
	right: 10px;
	width: 80px;
	height: 70px;
	cursor: pointer;
	z-index: 1000;
}

body.sp nav#topNavi div#btnShow span.bar{
	display: block;
	height: 4px;
	width: 60px;
	margin: 10px 0 0 10px;
	-webkit-transition:0.3s;
	transition:0.3s;
	/* スマホ版ハンバーガーメニューの色(折り畳み時) */
	/* background: #0E2A44; */
	background: #ffffff;
}

body.sp nav#topNavi.visible div#btnShow span.bar{
	background: #ffffff;
	transition:0.3s;
	-webkit-transition:0.3s;

}

body.sp nav#topNavi ul{
		display: none;
		margin: 95px auto 120px;
		height:auto;
		/* スマホ版メニューの文字の背景部分 */
		/* background: #0E2A44; */
		background: #0E2A44;
		list-style: none;
		text-align: center;
		width: 640px;
	}


body.sp nav#topNavi ul li{
		float: none;
		overflow: visible;
		margin: 0 0 65px;
		width: 100%;
		background: none;
		text-indent: 0;
		font-size: 2rem;
		letter-spacing: 5px;
		color: #ffffff;
	}
body.sp nav#topNavi ul li.current{
			color: #e60012;
			text-indent: 0;
		}

body.sp nav#topNavi ul a{
			padding: 10px;
			width: 100%;
			/* スマホ版ハンバーガーメニュー内のフォントサイズ */
			font-size: 2rem;
			color: #ffffff;
			text-decoration: none;
		}
	
body.sp nav#topNavi ul li.current a{
			color: #e60012;
		}

body.sp article{
	min-width: 640px;
	margin: 0;
}

body.sp section>div{
	width: 600px;
	margin: 0 auto;
}


body.sp div#samurai{
	background: url(../images/bgTopMobile.jpg) no-repeat center top;
	background-size: 100% auto !important;
	height: 550px !important;
}

body.sp div#samurai h1{
	background:none;
}

body.sp div#philosophyBox{
	background: none #ffffff;
	padding: 0;
}

body.sp div#philosophy{
	width: 600px;
	padding: 50px 0 0 0;
}

body.sp div#serviceContent{
	background: none #ffffff;
	padding: 0;
}

body.sp div#companyTitle{
	width: 100%;
	margin: 80px auto 30px;
}

body.sp div#companyTitle h2{
	margin: 0px auto 0px;
}

body.sp div#companyTitle h3,p{
	margin: 0px 5px 0px;
}

body.sp div#contentsTitle{
	width: 100%;
	margin: 80px auto 30px;
}

body.sp div#contentsTitle h2{
	margin: 0px auto 0px;
}

body.sp div#contentsTitle h3,p{
	margin: 0px 5px 0px;
}

body.sp div#companyContent{
	margin-top: 50px;
}

body.sp div#companyContent dl{
	float: none;
	display: block;
	width: 600px;
}

body.sp div#recruitTitle{
	margin: 80px auto 30px;
	letter-spacing: 2px;
}

body.sp div#recruitTitle br{
	display:none;
}

body.sp div#recruitTitle p{
	width:100%;
}


body.sp div#companyContent div#topMovie {
	margin: 50px 0 50px;
}

body.sp div#worksContents{
	width:600px;
}


body.sp section div#teamContents{
	width: 600px;
}

body.sp section div#teamContents div.staffBox{
	position:relative;
	width: 250px;
	min-height: 620px;
	margin: 0 25px 20px;
}

body.sp section div#teamContents div.staffBox#no3,body.sp section div#teamContents div.staffBox#no2,body.sp section div#teamContents div.staffBox#no4,body.sp section div#teamContents div.staffBox#no5,body.sp section div#teamContents div.staffBox#no1{
left:auto;
}

body.sp section div#teamContents div.staffBox img{
	width: 100%;
}

/*
body.sp div#teamContents div.staffBox div.teamText{
	width: 220px;
	margin: 0 auto;
	line-height: 27px;
}
*/

body.sp div#teamContents div.staffBox p.teamPhoto{
	width: 250px;
}

body.sp div#teamContents div.staffBox p.teamPhotoHOVER{
	width: 250px;
}

body.sp section#contact{
	background-position: 190px 0;
}

body.sp footer{
	position: relative;
	padding-top:0;
	z-index: 1000;
}

body.sp div#footerBox{
	height: 60px;
}

body.sp footer p{
	margin: 20px 0 0 0;
	font-size: 18px;
}

body.sp div#footerBox p{
	width: 100%;
	height: 20px;
	font-size: 15px;

}


body.sp div#footerBox p span#privacy{
    vertical-align: top;
	line-height: 1.5;
}


body.sp div#footerBox p span#copy{
	font-size: 15px;
	vertical-align: top;
	line-height: 1.5;

}

/* 問い合わせボタン用に出し分け */
body.sp section#contact div#contactButton a{
	font-size: 1.2rem;
	height: 54px;
	text-align: center;
	padding: 10px 0;
	/* padding: 20px 0 0; */
}

body.sp div#recruitContents div#entryButton a{
	font-size: 1.6rem;
	height: 54px;
	padding: 20px 0 0;
}



body.sp div#gotop {
	display: none !important;
}


body.sp div#companyTitle,body.sp div#worksTitle,body.sp div#teamTitle{
	background-position: center center !important;
}

body.sp div#contentsTitle,body.sp div#worksTitle,body.sp div#teamTitle{
	background-position: center center !important;
}






/* privacyスマホ */

body.privacy.sp article section{
	width: 600px;
}

body.privacy.sp article section p#form{
	margin: 50px 0;
	font-size: 1.4rem;
}

body.privacy.sp footer p{
	margin:0;
}






body.sp .mfp-iframe-holder .mfp-close {
    top: -60px;
}
body.sp .mfp-image-holder .mfp-close, body.sp .mfp-iframe-holder .mfp-close {
	font-size: 100px;
}


/* add 20160307 */
body.sp h4{
	margin-bottom: 36px;
}
body.sp div.serviceBox{
	padding-top: 92px;
}

/* 事業内容の冒頭文章　フォントサイズ指定用 */
body.sp #company {
	width:600;
}

/* 事業内容の冒頭文章　フォントサイズ指定用 */
body.sp #company p{
	font-size: 1.4rem;
	width:600;
}

body.sp #company div.companyInformation{
	height:auto;
	width:600px;
}
body.sp #company div.informationBox01,body.sp #company div.informationBox02{
	position:static;
	width:auto;
	border:none;
}

body.sp #company .managementBox{
	width:600px;
}

body.sp #company .developmentBox{
	width:600px;
}

body.sp #company .managementBox ul li, body.sp #company div.developmentBox ul li{
	width:600px;
	height:200px;
	padding-top:18px;
	padding-left: 150px;
}

body.sp #company .developmentBox ul li{
	width:600px;
	height:200px;
	padding-top:18px;
	padding-left: 150px;
}

body.sp #company ul li p{
	font-size: 1.4rem;
	line-height: 1.2;
}
body.sp #company ul li h5{
	font-size: 1.6rem;
}

body.sp #company ul li h5:before{
top:50px;
}

body.sp #company div.informationBox01, body.sp #company div.informationBox02{
	padding-left: 0px;
}
body.sp #company div.informationBox02{
	margin-bottom: 80px;
}
body.sp #company div.informationBox01 h4,body.sp #company div.informationBox02 h4,body.sp #company div.informationBox01 p,body.sp #company div.informationBox02 p{
	font-size: 1.4rem;
	max-height: 100%; 
}
body.sp div.management, body.sp div.development{
	width: 600px;
}
body.sp #company .managementBox ul li,body.sp #company .developmentBox ul li{
	float:none;
}

body.sp #company div.informationBox01 h4,body.sp #company div.informationBox02 h4{
	width:8em;
}
body.sp #company .companyInformation{
	margin-bottom: 40px;
}
body.sp #company .companyInformation p{
	margin-left: 8em;
	padding-bottom:10px;
}

body.sp small{
	display:block;
}

body.sp span.time{
	font-size:1rem;
	line-height: 1;
	display:block;
	letter-spacing: 1px;
}


body.sp .sliderBox{
	margin-bottom: 140px;
	width:600px;
}

body.sp #works div#privateBrand{
	width:600px;
}


body.sp .slick-next {
	right: 0px;
	visibility: hidden;
}
body.sp .slick-prev {
	left:0;
	visibility: hidden;
}

body.sp .sp{
	display:inline;
}
body.sp .pc{
	display:none;
}

/*
body.sp div#teamContents div.staffBox div.teamText p{
	line-height: 25px !important;
	font-size: 1.3rem;
}
*/

body.sp .slick-dots li button:before{
	font-size: 10px;
	max-height: 100%;
}


body.sp #works div.gamePict{
	margin-bottom: 36px;
}
body.sp #works p{
	margin-bottom: 28px;
}
body.sp #works p.copyright{
	margin-bottom: 100px;
}

/*========= 流れる画像 ===============*/

.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}