/* 全ての要素のリセット */
* {
  margin : 0;
  padding : 0;
  box-sizing : border-box;
}

html, body 
{
  height : 100%;
  font-family : Arial, sans-serif;
  color : white;
  overflow-x : hidden; /* 横スクロールを防ぐ */
}

/* 背景動画用のスタイル */
#video-background 
{
  position : fixed;
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
  overflow : hidden;
  z-index : -1; /* 背景に配置 */
}

#video-background video 
{
  position : absolute;
  top : 50%;
  left : 50%;
  width : 100%;
  height : 100%;
  object-fit : cover; /* ビデオのアスペクト比を保ったまま要素をカバー */
  transform : translate(-50%, -50%);
}

.clearfix::after
{
  content : "";
  display : table;
  clear : both;
}

#wrapper
 {
    max-width : 960px;
    width : 100%;
    margin : 0 auto;
    position : relative;
    display: block;
}

#menu_btn
{
  float : left;
}

header
{
    display : block;
    position : fixed;
    z-index : 10;
    margin: 0 auto;
    padding : 0;
    width : 70%;
    height : 64px;
    border : 1px double #333333;
    background-color: #ccccff;
}

header h5{
  color :#333333;
    float : right;
    line-height: 64px;
    
}

#logo
{
    float : right;
    width : auto;
    height : 64px;
}

#menu
{
  display : block;
  position : fixed;
  z-index : 10;
  top : 70px;
  width : 200px;
}

#menu li
{
  display : block;
  list-style : block;
  border : solid 1px #aaaaaa;
}

#menu a
{
  display : block;
  border : none;
  text-decoration : none;
  color : black;
  padding : 10px 16px;
}

.menus
{
    background : #eeeeee;
}

.menus:hover
{
    background : #ffcccc; 
    font-weight : bold;
}

 main 
 {
    display : block; 
    position : absolute; 
    top :90px;
    width : auto;
    left : 300px;
}

#slideshow
{
    left : -50px;
    max-width : 640px;
    visibility: hidden;
}

/* スライダー全体に3Dトランスフォームを適用 */
#slideshow.slick-slider
{
  /* 余分な再描画を防ぐ */
  transform: translate3d(0, 0, 0);
}

/* 各スライド要素にバックフェイス隠蔽を適用 */
#slideshow .slick-slide
{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Safari 対策 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);     /* iOS Safari 対策 */
}

/* 画像要素はブロック要素にして余白やラインを消す */
#slideshow .slick-slide img
{
  display: block;
}

#mes-top
    {
        position: absolute;
        top:  25%;
        left: 5%;
        transform: translate(-50%, -50%);
        color: white; /* テキストの色 */
        font-size: 20px;
        font-weight: bold;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        /* text-shadow は黒いエッジを作成します */
    }

.picture
{
    display: block;
    width:555px; 
}

footer 
{
  max-width : 960px;
  width : 100%;
  position : absolute;
  top : 3300px;
  height : 90px;
  color: #333333;
  background-color:  #ccccff;
  border : 1px double #333333;
  line-height : 90px;
  text-align : center;
  display: block;
}

.movie
{
    /*width: 100%;*/
    max-width: 767px;
    height: auto;    /* 縦横比を維持 */
    display: block;  /* 余計な空行が入らないように */
}

.movie-type2
{
    /*width: 100%;*/
    max-width: 480px;
    height: auto;    /* 縦横比を維持 */
    display: block;  /* 余計な空行が入らないように */
}