@import url("https://fonts.googleapis.com/css?family=Lato");
/* ---------------------------------------------------------- */
/* body*/
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
/* wrapper*/
/* ---------------------------------------------------------- */
#wrapper {
  background-image: url("../../story/images/main_bg.jpg");
  background-position: top center;
  background-repeat: no-repeat;
}
/* ---------------------------------------------------------- */
/* body debug のとき*/
/* ---------------------------------------------------------- */
.debug #loading {
  display: none;
}
.debug #column1 {
  background: rgba(255,0,0,0.5);
  border-bottom: 1px solid #333;
}
.debug #column2 {
  background: rgba(100,0,0,0.5);
  border-bottom: 1px solid #333;
}
.debug #column3 {
  background: rgba(100,100,0,0.5);
  border-bottom: 1px solid #333;
}
.debug #column4 {
  background: rgba(100,100,100,0.5);
  border-bottom: 1px solid #333;
}
.debug #column5 {
  background: rgba(50,50,100,0.5);
  border-bottom: 1px solid #333;
}
.debug #column6 {
  background: rgba(50,50,100,0.5);
  border-bottom: 1px solid #333;
}
.debug #column7 {
  background: rgba(50,50,50,0.5);
  border-bottom: 1px solid #333;
}
.debug #collaborated {
  background: rgba(100,100,100,0.5);
}
.debug #banner {
  background-repeat: no-repeat;
}
/* ---------------------------------------------------------- */
/* main*/
/* ---------------------------------------------------------- */
#main {
  width: 1100px;
  margin: 0 auto;
}
/* ---------------------------------------------------------- */
/* column all*/
/* ---------------------------------------------------------- */
#main > div {
  width: 980px;
  margin: 0 auto;
  position: relative;
}
#loading {
  display: none;
}
.desc {
  text-align: center;
  font-size: 100%;
  line-height: 1.916666666666667;
}
/* ---------------------------------------------------------- /*
/* intro*/
/* ---------------------------------------------------------- */
#intro {
  position: relative;
}
#intro h2,
#intro .img,
#intro .desc,
#intro .light {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  position: relative;
}
#intro h2 {
  margin-top: 100px;
  text-align: center;
  margin-right: 25px;
}
#intro .img {
  margin: 89px 0 0 103px;
}
#intro .desc {
  text-align: center;
  margin-bottom: 6px;
}
#intro .light {
  position: absolute;
  top: 216px;
  left: 172px;
}
/* ---------------------------------------------------------- /*
/* imagine*/
/* ---------------------------------------------------------- */
#imagine {
  position: relative;
  height: 620px;
}
#imagine h2,
#imagine .desc,
#imagine .light,
#imagine .img1,
#imagine .img2,
#imagine .green {
  position: absolute;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#imagine h2 {
  top: 266px;
  right: 131px;
}
#imagine .desc {
  width: 330px;
  top: 385px;
  right: 112px;
}
#imagine .light {
  top: 120px;
  left: -15px;
}
#imagine .img1 {
  top: 171px;
  left: 242px;
}
#imagine .img2 {
  top: 18px;
  left: -6px;
}
#imagine .green {
  top: 0;
  right: 97px;
}
/* ---------------------------------------------------------- /*
/* courage*/
/* ---------------------------------------------------------- */
#courage {
  position: relative;
  height: 666px;
}
#courage h2,
#courage .img,
#courage .desc,
#courage .light,
#courage .green {
  position: absolute;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#courage h2 {
  top: 187px;
  left: 65px;
}
#courage .img {
  top: 120px;
  right: -10px;
}
#courage .desc {
  width: 338px;
  top: 309px;
  left: 58px;
  z-index: 5;
}
#courage .light {
  top: 120px;
  left: 146px;
}
#courage .green {
  top: -142px;
  left: -39px;
}
/* ---------------------------------------------------------- /*
/* select*/
/* ---------------------------------------------------------- */
#select {
  position: relative;
  height: 650px;
}
#select h2,
#select .img,
#select .desc,
#select .light,
#select .green {
  position: absolute;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#select h2 {
  top: 134px;
  right: 128px;
}
#select .img {
  top: 71px;
  left: -20px;
}
#select .desc {
  width: 420px;
  top: 256px;
  right: 64px;
}
#select .light {
  top: 131px;
  left: 103px;
}
#select .green {
  top: -139px;
  left: 51px;
}
/* ---------------------------------------------------------- /*
/* action*/
/* ---------------------------------------------------------- */
#action {
  position: relative;
  height: 560px;
}
#action h2,
#action .img1,
#action .img2,
#action .desc,
#action .light,
#action .green {
  position: absolute;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#action h2 {
  top: 86px;
  left: 0;
}
#action .img1 {
  top: 120px;
  right: 169px;
}
#action .img2 {
  top: 22px;
  right: 0;
}
#action .desc {
  width: 318px;
  top: 208px;
  left: 13px;
}
#action .light {
  top: 167px;
  left: 51px;
}
/* ---------------------------------------------------------- /*
/* think*/
/* ---------------------------------------------------------- */
#think {
  position: relative;
  height: 853px;
}
#think h2,
#think .img,
#think .desc,
#think .light,
#think .green1,
#think .green2 {
  position: absolute;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#think h2 {
  top: 183px;
  left: 275px;
}
#think .img {
  top: 270px;
  right: 136px;
}
#think .green1 {
  top: 38px;
  right: 139px;
}
#think .green2 {
  top: 215px;
  left: 37px;
}
#think .desc {
  width: 330px;
  top: 485px;
  left: 29px;
}
#think .light {
  top: 167px;
  left: 51px;
}
/* ---------------------------------------------------------- /*
/* commitment*/
/* ---------------------------------------------------------- */
#commitment {
  position: relative;
  height: 1059px;
}
#commitment h2,
#commitment .light,
#commitment .book {
  position: absolute;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#commitment .book > li {
  position: relative;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#commitment h2 {
  top: 237px;
  left: 92px;
  z-index: 0;
}
#commitment .paint {
  position: absolute;
  top: 143px;
  left: 56px;
  z-index: 0;
}
#commitment .img {
  top: 270px;
  right: 136px;
}
#commitment .book {
  background: url("../../story/images/book_bg.png") top center no-repeat;
  width: 982px;
  height: 711px;
  box-sizing: border-box;
  padding: 18px 57px 56px;
  top: 346px;
  left: 4px;
}
#commitment .book:after {
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
  content: "";
}
#commitment .book li {
  margin: 33px 0 0 50px;
  float: left;
  width: 245px;
  text-align: center;
}
#commitment .book li.first {
  clear: both;
  margin-left: 0;
}
#commitment .book li.third,
#commitment .book li.case {
  margin-left: 48px;
}
#commitment .book li.l2 {
  margin-top: -1px;
}
#commitment .light {
  top: 73px;
  left: 192px;
}
/* ---------------------------------------------------------- /*
/* pageNav*/
/* ---------------------------------------------------------- */
#birds {
  height: 405px;
  position: relative;
}
#birds .img {
  position: absolute;
  top: 162px;
  left: 217px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
/* ---------------------------------------------------------- /*
/* driven*/
/* ---------------------------------------------------------- */
#driven {
  position: relative;
  height: 980px;
}
#driven h2,
#driven .light,
#driven .desc,
#driven .img {
  position: absolute;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#driven h2 {
  top: 167px;
  left: 234px;
}
#driven .img {
  top: 349px;
  left: 300px;
}
#driven .desc {
  width: 336px;
  top: 250px;
  left: 332px;
}
#driven .light {
  top: 125px;
  left: 146px;
}
/* ---------------------------------------------------------- /*
/* pageNav*/
/* ---------------------------------------------------------- */
#pageNav {
  position: fixed;
  top: 50%;
  margin-top: -78px;
  right: 30px;
  z-index: 1000;
}
#pageNav li {
  margin-top: 11px;
}
#pageNav li:first-child {
  margin-top: 0;
}
#pageNav a {
  width: 197px;
  height: 10px;
  display: block;
  text-align: right;
}
#pageNav a::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 10px;
  border: 1px solid #000;
}
#pageNav a:hover img {
  display: inline;
}
#pageNav a:hover::after {
  background-color: #000;
}
#pageNav a.is-active::after {
  background-color: #000;
}
#pageNav a.is-active img {
  display: inline;
}
#pageNav a img {
  display: none;
}