@charset "UTF-8";

/* Base */
html, body, .page_body {
    height: 100%;
    box-sizing:border-box;
}
.page_body {
  padding-bottom:100px;
}

/*
 * マスク
 */

.scene {
    margin:45px 0 0;
    height:90%;
    background:#fff url(../img/main_bk.jpg) no-repeat left top;
    background-size:cover;
}
.scene .mask {
    overflow: hidden;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height : 100%;
}
.scene .mask img {
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -960px;
    margin-top: -540px;
    width: 1920px;
    height : 1080px;
    z-index:0;
}

.scene .mask#cont-01{ z-index: 10; }
.scene .mask#cont-02{ z-index: 20; }
.scene .mask#cont-03{ z-index: 30; }
.scene .mask#cont-04{ z-index: 40; }
/*
.scene .mask#cont-01 .cont_ttl a{ background-color:#600; }
.scene .mask#cont-02 .cont_ttl a{ background-color:#900; }
.scene .mask#cont-03 .cont_ttl a{ background-color:#c00; }
.scene .mask#cont-04 .cont_ttl a{ background-color:#f00; }
*/
.scene .mask .line {
/*display:none;*/
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #fff;
    overflow:visible;
    top: 0;
    z-index:100;
}
.scene .mask .bar {
  display:block;
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0;
  left:0;
  background:transparent url(../img/70sp.png) repeat left top;
}
.scene .mask .cont_ttl{
    height:50px;
    margin:0;
    display:block;
    width:100%;
    white-space:nowrap;
    font-size:15px;
    font-weight:bold;
    position: absolute;
    bottom: 3px;
    left: 0px;
    text-align:center;
}
.mask .cont_ttl p{
  margin:3px 5px;
}
.mask:first-child .cont_ttl p{
  margin-left:10px;
}
.mask:last-child .cont_ttl p{
  margin-right:10px;
}

.scene .mask .cont_ttl p > a,
.scene .mask .cont_ttl p > span{
  display:block;
  width:100%;
  height:40px;
  margin:0;
  box-sizing:border-box;
/*  background-color:#eee; */
  line-height:40px;
  text-decoration:none;
  color:#036;
  transition:.5;
  -moz-transition:.5;
  -webkit-transition:.5;
  -ms-transition:.5;
  -o-transition:.5;
/*  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  -ms-border-radius:3px;
  -o-border-radius:3px;*/
  
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,eeeeee+100&1+1,0+100 */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 1%, rgba(238,238,238,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 1%,rgba(238,238,238,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 1%,rgba(238,238,238,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#00eeeeee',GradientType=0 ); /* IE6-9 */

}
  
.scene .mask .cont_ttl p > a:hover,
.scene .mask .cont_ttl p > span:hover{
/*  background-color:#eee;
  color:#333;*/
}

.scene .mask .line .cont_ttl p > a:before,
.scene .mask .line .cont_ttl p > span:before{
  content:'>';
  position:relative;
  left:-4px;
}
.scene .mask:first-child .line {
    background-color: none;
}