/* スタイル */

/* Style for our header texts
* --------------------------------------- */
body {
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-weight: 100;
	line-height: 150%;
	font-size: 12px;
	color: #000000;
	margin:0;
	padding:0;
}

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

#loader-bg {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000 !important;
  z-index: 1;
}

#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  text-align: center;
  color: #fff;
  z-index: 2;
}

.font-navy {
	color:#003f76;
	font-weight: 100;
}

h1{
	font-size: 36px;
	font-weight: 900;
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	color: #000000;
	margin:0;
	padding:0;
}

h2{
	font-size: 4em;
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	color: #fff;
	margin:0;
	padding:0;
}

#white h1{
	color: #000;
}

@media (max-width: 1199px) {
h1{
	font-size: 28px;
}
}
@media (max-width: 991px) {
h1{
	font-size: 24px;
}
}
@media (max-width: 767px) {
h1{
	font-size: 18px;
}
}


/* text
* --------------------------------------- */
.read_header {
	font-size: 32px;
	line-height: 1.5;
	font-weight: 900;
	letter-spacing: 3px;
	color: #000000;
	text-shadow: 0px 0px 3px #ffffff;
}
@media (max-width: 1199px) {
.read_header {
	font-size: 28px;
	letter-spacing: 2px;
}
}
@media (max-width: 991px) {
.read_header {
	font-size: 24px;
	letter-spacing: 0px;
}
}
@media (max-width: 767px) {
.read_header {
	font-size: 20px;
	letter-spacing: 0px;
}
}

.read {
	font-size: 28px;
	line-height: 1.5;
	font-weight: 100;
	letter-spacing: 3px;
	color: #ffffff;
	text-shadow: 0px 0px 3px #000000;
}
@media (max-width: 1199px) {
.read {
	font-size: 24px;
	letter-spacing: 2px;
}
}
@media (max-width: 991px) {
.read {
	font-size: 20px;
	letter-spacing: 0px;
}
}
@media (max-width: 767px) {
.read {
	font-size: 18px;
	letter-spacing: 0px;
}
}

.read2 {
	font-size: 36px;
	line-height: 1.5;
	font-weight: 900;
	letter-spacing: 3px;
	color: #ff0000;
	text-shadow: 0px 0px 3px #000000;
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}
@media (max-width: 1199px) {
.read2 {
	font-size: 32px;
	letter-spacing: 2px;
}
}
@media (max-width: 991px) {
.read2 {
	font-size: 28px;
	letter-spacing: 0px;
}
}
@media (max-width: 767px) {
.read2 {
	font-size: 24px;
	letter-spacing: 0px;
}
}

.note {
	font-size: 12px;
	line-height: 1.5;
	font-weight: 100;
}
@media (max-width: 1199px) {
.note {
	font-size: 12px;
}
}
@media (max-width: 991px) {
.note {
	font-size: 10px;
}
}
@media (max-width: 767px) {
.note {
	font-size: 8px;
}
}

.discription {
	width: 80%;
	font-size: 16px;
	text-align: left;
	line-height: 1.5;
	font-weight: 100;
	color: #000000;
	text-shadow: 0px 0px 3px #ffffff;
}
@media (max-width: 1199px) {
.discription {
	font-size: 12px;
}
}
@media (max-width: 991px) {
.discription {
	font-size: 10px;
}
}
@media (max-width: 767px) {
.discription {
	font-size: 8px;
}
}

/* Centered texts in each section
* --------------------------------------- */
.section{
	text-align:center;
	overflow: hidden;
}

.opacity {
    opacity: 0.7;
}

#bgvideo{
	position: absolute;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
	background-image: /* our video */;
	background-position: center center;
	background-size: contain;
	object-fit: cover; /*cover video background */
	z-index:3;
}
#section_video .layer{
	position: absolute;
	z-index: 4;
	width: 100%;
	left: 0;
	top: 35%;
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
#section_video{
	overflow: hidden;
}
video::-webkit-media-controls {
	display:none !important;
}


/* Backgrounds will cover all the section
* --------------------------------------- */
#section_title{
	background-size: cover;
}

#section_page{
	background-size: cover;
}

#section_slide{
}

#slide{
	background-size: cover;
}

#section,
#section2,
#section3,
#section4,
#slide1,
#slide2{
	background-size: cover;
}

/* Defining each sectino background and styles
* --------------------------------------- */
#section2{
	background-image: url(../image/bg3.jpg);
}

#section3{
	background-image: url(../image/bg4.jpg);
}

#section4{
	background-image: url(../image/bg1.jpg);
}

/*Adding background for the slides
* --------------------------------------- */
#slide1{
	background-image: url(../image/bg2.jpg);
}

#slide2{
	background-image: url(../image/bg5.jpg);
}