@charset "utf-8";
/* CSS Document */

html, body {
  height: 100%;
}

body {
	background-color: #FFFFFF;
	font-family:  'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, 'MS PGothic', arial, helvetica, sans-serif;
   margin: 0;
}
.page_wrap{
/*   margin-top: 50px;*/
   margin-top: 0px;
}
.page_wrap .page_ttl{
   color: #fff;
/*   background-color: #666666;*/
   background-color: #f6ae6a;
   padding: 10px 0;
   margin-bottom: 30px;

   position: fixed;
   top:0;
   left:0px;
   width: 100%;
   z-index: 9990;

}
.page_wrap .page_ttl h1{
   color: #fff;
   text-align: center;
   margin: 0;
   padding: 0 45px;
}
.page_intro{
   display: block;
   width: 1200px;
   max-width: 100%;
/*   margin: 0 auto;*/
   margin: 160px auto 0;
   margin-bottom: 30px;
}
.page_intro p{
   color: #333;
   padding: 0 1em;
}
.page_video__wrap{
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   max-width: 1600px;
   padding-bottom: 60px;
   margin: 0 auto;
}

.page_video{
   display: block;
   width: calc(25% - 20px);
   max-width: 100%;
   text-decoration: none;
   color: #333;
   margin: 10px;
}
.page_video img{
   display: block;
   max-width: 100%;
}
.page_video h2{
   background-color: #dfe0e0;
   margin: 0;
   padding: 10px 0;
   text-align: center;
   font-size: 1.3em;
}
.page_video .page_video--time{
   position: relative;
   height: 20px;
   margin-top: -20px;
   text-align: right;
}
.page_video .page_video--time p{
   position: absolute;
   right: 0;
   bottom: 0;
   display: block;
   line-height: 20px;
   padding: 2px;
   margin: 5px;
   font-size: 16px;
   font-weight: bold;
   background-color: rgba(255,255,255,0.60);
   border-radius: 3px;
}
.page_photo__wrap{
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   max-width: 1600px;
   padding-bottom: 60px;
   margin: 0 auto;
}

.page_photo{
   display: block;
   width: calc(25% - 20px);
   max-width: 100%;
   text-decoration: none;
   color: #333;
   margin: 10px;
}
.page_photo img{
   display: block;
   max-width: 100%;
}
.page_photo h2{
   background-color: #dfe0e0;
   margin: 0;
   padding: 10px 0;
   text-align: center;
   font-size: 1.3em;
}
.page_top{
   position: fixed;
   bottom: 15px;
   right: 10px;
   width: 45px;
   height: 45px;
   z-index: 9999;
}
.page_top img{
    width: 100%;
    height: 100%;
   }

/* tablet */
@media all and (max-width: 768px) {
   .page_wrap .page_ttl{
      font-size: 16px;
      line-height: 50px;
   }
   .page_video{
   width: calc(50% - 20px);
   }
   .page_photo{
   width: calc(50% - 20px);
   }
}

/* sp */
@media all and (max-width: 480px) {
   
   .page_wrap .page_ttl{
      font-size: 12px;
      line-height: 50px;
   }
   .page_video{
      width: 100%;
   }
   .page_photo{
      width: 100%;
   }
}