@charset "UTF-8";

/* -----------------------------------------------
 *  	         layout1 style setting
 * ----------------------------------------------- */

 /* =========== font =========== */
@font-face {
  font-family: "Quickpen";
  src: url("../font/Quickpen/2F7BEE_0_0.eot?#iefix");
  src: url("../font/Quickpen/2F7BEE_0_0.eot?#iefix") format("eot"), url("../font/Quickpen/2F7BEE_0_0.woff2") format("woff2"), url("../font/Quickpen/2F7BEE_0_0.woff") format("woff");
}
/*========= スクロールダウンのCSS ===============*/
/*タイムライン全体の設定*/
.timeline{
	width: 60%;
  color: #ffffff;
  margin: auto;
}
.timeline .timeline_inner{
}
.timeline div{
    /*線の起点とするためrelativeを設定*/
	list-style: none;
	padding:0 0 20px 0;
}
.timeline div{
	margin:0 0 20px 3em;
}
.timeline h2{
  font-size: 60px;
  line-height: 1.2;
  font-family: Noto Sans, serif;
  font-weight: normal;
}
.timeline h2 span{
  font-size: 40px;
}
.timeline p{
  font-size: 18px;
  font-family: Noto Sans, serif;
}
@media only screen and (max-width: 48em) {
.timeline p{
  font-size: 14px;
}
}
/*絶対配置で線を設定*/
.border-line {
    /*線の位置*/
	position: absolute;
	left:0.3em;
	top:190px;
	width:1px;/*線の太さ*/
	height:0;/*はじめは高さを0に*/
	background: #ffffff;
}
.timeline div.block {
  position: relative;
  padding-top: 150px;
}
/*タイムラインの見出し横の丸の位置と形状*/
.timeline div.block::after{
	content:'';
	position: absolute;
	top:190px;
	left:0;
	width:10px;
	height: 10px;
	background:#ffffff  ;
	border-radius: 50%;
}

@media only screen and (max-width: 48em) {
  .timeline{
    width: 95%;
    margin: auto;
  }
/*絶対配置で線を設定*/
.border-line {
    /*線の位置*/
	left:0.4em;
}
/*タイムラインの見出し横の丸の位置と形状*/
.timeline div.block::after{
	top:170px;
	left:0;
}
  .timeline div{
    margin:0 0 20px 0;
  }
  .timeline h2{
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .timeline_inner .text_area{
    margin-left: 15px;
  }
  /*.timeline_inner .text_area br{
    display: none; */
  }


/*========= 背景動画設定のCSS ===============*/
/*header設定*/
#header{
  position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
  height: 100vh;/*高さを全画面にあわせる*/
} 
.video-area{
  position: fixed;
  z-index: -1;/*最背面に設定*/
  top: 0;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;
}
.video {
  /*天地中央配置*/
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
}
.video-area_mb{
  display: none;
}
@media only screen and (max-width: 48em) {
.video-area_pc{
display: none;
}
.video-area_mb{
  display: block;
}
.video-area_mb img{
background-image: url(../img/movie_sp.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
}
/*見出し設定*/
h1{
  /*要素の配置*/
  position:absolute;
  /*要素を天地中央寄せ*/
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  /*見た目の調整*/
  color:#fff;
  text-shadow: 0 0 15px #666;
}




/* パララックス */
.image_box {
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.5));
}
.image_box img {
  border: #ffffff 1px solid;
}


/*アニメーション要素のスタイル*/
.animation {
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(20px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}