/* CSS Document */
/*------------------------------------------------------------------------------*/
/* Base設定　*/

html{
    font-size: 62.5%;
}

body{
	position: relative;
    font-size:1.8rem;/* 16px*/
    line-height: 2;
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	overflow-x: hidden;
} 

main {
	display: block;
}

article, section, div {
	box-sizing: border-box;
}

img { 
	width:100%;
}

h1 {
    font-size: 32px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(3.2rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
    line-height: 1.3;
	font-weight: 400;
	font-style: normal;
}

h2 {
    font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.4rem + ((1vw - 0.64rem) * 0.2143));/* 20px~24pxで可変*/
    line-height: 1.3;
	font-weight: 600;
	margin: 1em 0 0.25em 0;
}

h3 {
    font-size: 22px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.2rem + ((1vw - 0.64rem) * 0.2143));/* 20px~24pxで可変*/
    line-height: 1.3;
	font-weight: 700;
	margin: 1em 0 0 0;
}

h4 {
    font-size: 20px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2rem + ((1vw - 0.64rem) * 0.2143));/* 20px~24pxで可変*/
    line-height: 1.3;
	font-weight: 700;
	margin: 1em 0 0 0;
}

small {
	font-size: 80%;
}
@media (min-width: 1200px) {/* 1200px以上*/
    h1 {
        font-size: 3.6rem;/* 36px*/
    }
    h2 {
        font-size: 2.8rem;/* 24px*/
    }
}
@media screen and (max-width: 999px) {/* 640px以下*/
    body{
		line-height: 2;
		font-size: 1.6rem;
    }
    h1{
        font-size: 2.4rem;/* 24px*/
    }
    h2 {
        font-size: 2.0rem;/* 20px*/
    }
}


/*------------------------------------------------------------------------------*/
/*　ここからデザイン用 */
/* header */
header {
	width:100%;
	background: rgb(0,0,0);
	height: 90px;
}

header section {
	box-sizing: border-box;
}

header section#Logo {
	width:300px;
	float: left;
}

header h1 {
	margin: 10px 0 0 5px;
}

header h1 img {
	width:65%;
	height: auto;
}

header section#Menu {
	width:70%;
	float: right;
}

/*--固定背景の設定--*/
main {
	background: rgba(0,0,0,1.00);
}

main article {
  box-sizing: border-box;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 2% 0;
}

main article.noflex {
	display: block;
}

main section {
	width:1000px;
	margin: auto;
}

main h2 {
	font-family: 'Russo One','M PLUS 1p', sans-serif;
	font-size: 5rem;
	font-style: italic;
	opacity: 0;
}

main h2 span {
	font-family: 'M PLUS 1p', sans-serif;
	border-top: 5px solid #fff;
	display: block;
	font-size: 3.2rem;
	font-weight: 700;
	font-style: normal;
}

main h2 span::before {
	display: inline-block;
	content: " ";
	border-top: 5px solid #fff;
}

main article section {
	text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
}

main article.bgc0 section {
	text-shadow:none;
}

.cd-fixed-bg{
    position: relative;
    min-height: 80vh;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2;
}

/*--固定背景01--*/
.cd-fixed-bg.bg1  {
  background-image: url('../images/background/001.jpg');
}

/*--固定背景02--*/
.cd-fixed-bg.bg2  {
  background-image: url('../images/background/002.jpg');
}

/*--固定背景03--*/
.cd-fixed-bg.bg3  {
  background-image: url('../images/background/003.jpg');
}

/*--固定背景04--*/
.cd-fixed-bg.bg4  {
  background-image: url('../images/background/004.jpg');
}

.bgc0 {
	background-color: rgba(255,255,255,1.00);
	color: rgba(0,0,0,1.00);
}

.bgc1 {
	background-color: rgba(159,0,2,1.00);
}

.bgc2 {
	background-color: rgba(0,75,184,1.00);
}

.bgc3 {
	background-color: rgba(6,133,0,1.00);
}

.bgc4 {
	background-color:rgba(222,102,0,1.00);
}

.bgc5 {
	background-color:rgba(0,17,130,1.00);
}

.js-scrollAnimation {
	opacity: 0;
}

@media screen and (min-width: 1000px) {/* 1000px以下*/

	.slide {
		animation-name: fadeUpAnime;/*アニメーションの定義名*/
		animation-duration:1s;/*アニメーション変化時間 ※デフォルト*/
		animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
		opacity:0;
	}

	.slide span {
		animation-name: fadeUpAnime2;/*アニメーションの定義名*/
		animation-duration:1s;/*アニメーション変化時間 ※デフォルト*/
		animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
		opacity:0;
	}
}


a {
	text-shadow:none
}


@keyframes fadeUpAnime{
	0%{
		opacity: 0;
		transform: translateX(100px);
	  }
	100%{
		opacity: 1;
		transform: translateX(0px);
	  }
}

@keyframes fadeUpAnime2{
	0%{
		opacity: 0;
		transform: translateX(-100px);
	  }

	100%{
		opacity: 1;
		transform: translateX(0px);
	  }
}
	

footer {
  box-sizing: border-box;
  color: #FFF;
	background: rgb(0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
}

#PageTop {
	background: rgba(120,120,120,0.5) none repeat scroll 0 0;
	border-radius: 5px;
	bottom: 1%;
	color: #fff;
	font-size: 2em;
	width:1em;
	height:1em;
	display:inline-block;
	text-align:center;
	padding: 0.5em;
	position: fixed;
	right: 5%;
	z-index: 100;
	line-height:1;
	text-decoration:none;
}

#PageTop:hover {
	background: rgba(120,120,120,1);
}

/*------------------------------------------------------------------------------*/
/*-- スマホ用 --*/
@media screen and (max-width: 999px) {/* 1000px以下*/
	header {
		height: auto;
	}
	
	header section#Logo {
		width:100%;
		float: inherit;
	}

	header section#Menu {
		width:auto;
		float: inherit;
	}

	header h1 {
		width:60%;
		margin: 0px auto;
		padding: 0px 0;
	}

	header h1 img {
		width:100%;
		height: auto;
	}
	
	main article {
		width:98%;
		height: auto;
	}
	
	main section {
		width:100%;
	}

	.cd-fixed-bg{
		position: relative;
		background-size:auto 100%;;
		background-attachment:local;
		background-repeat: no-repeat;
		background-position: center center;
		z-index: 2;
		min-height: 50vh;
	}
	
	.cd-fixed-bg.bg1  {
		background-image: url('../images/background/001.jpg');
		background-attachment:scroll;
		background-size: auto 130%;
		background-position: center bottom;
	}
	
	.slide {
		animation-name: fadeUpAnimesp;/*アニメーションの定義名*/
		animation-duration:1s;/*アニメーション変化時間 ※デフォルト*/
		animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
		opacity:0;
	}

	.slide span {
		animation-name: fadeUpAnimesp2;/*アニメーションの定義名*/
		animation-duration:1s;/*アニメーション変化時間 ※デフォルト*/
		animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
		opacity:0;
	}
	
	#PageTop {
		bottom: 1em;
	}

}

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

@keyframes fadeUpAnimesp2{
	0%{
		opacity: 0;
		transform: translateY(-80px);
	  }

	100%{
		opacity: 1;
		transform: translateY(0px);
	  }
}