@charset "UTF-8";
/* CSS Document */
#contents{
    margin-top: -120px;
}
.bg{
    background-image: url(../images/mv_exapmle.jpg);
}
#mv {
    overflow: hidden;
    position: relative;
    background: url(../images/overlay.png) no-repeat center / cover,url(../images/overlay_02.png) no-repeat center / cover;
}
#mv.vidWrap {
    height: calc(100% - 83px); 
    height: calc(100vh - 83px);
    position: relative;  
    width: 100%;
}
#mv .vid{
    min-height: calc(100% - 83px); 
    min-height: calc(100vh - 83px);
    min-width: 100%;
    min-width: 100vw;
    position: absolute;
    top: 0;
    z-index: -1;
}
#mv .mvInr{
    height: calc(100% - 83px);  
    height: calc(100vh - 83px);
    max-width: 100%;
    display: table;
}
.tblCell{
    display: table-cell;
    vertical-align: middle;
}
.mvLead{
    float: right;
    padding-top: 15%;
    padding-right: 70px;
    display: block;
    width: calc(100% - 230px);
}
.mvLead img{
    max-width: 100%;
}
.mvLead span{
    display: block;
    color: #FFF;
    font-size: 2.0rem;
    font-style: italic;
    line-height: 1.7;
    padding: 25px 0 0 50px;
}
.mvLead em{
    display: inline-block;
    margin-top: -25px;
    transition: .3s all ease-in-out;
}
.mvLead em:hover{
    transition: .3s all ease-in-out;
    opacity: 0.8;
    transform: translateY(8px);
}
.copy{
    transform: rotate(90deg);
    position: absolute;
    top: 40%;
    left: -70px;
}
.copy small{
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    font-style: italic;
    letter-spacing: 2px;
    color: #FFF;
	width:100%;
}
.mvInr .center img{
    max-width: 100%;
}
.mvInr .center:hover{
    opacity: 0.7;
    transition: .3s;
}
.bg01{
    width: 100%;
    background: 
    url(../images/bg_top_01.png) no-repeat top center / cover,
    url(../images/bg_top_mv.png) no-repeat right 20px;
/*    height: 1536px;*/
    padding: 10% 0;
    position: relative;
    z-index: 1;
    color: #FFF;
    margin-bottom: 0;
}
.bg01 ul{
    overflow: hidden;
}
.bg01 ul li{
    float: left;
    width: 48%;
    background: #FFF;
}
.bg01 ul li p:nth-child(1){
    background: url(../images/img_top_01.jpg) no-repeat center / cover;
    height: 240px;
    margin-bottom: 20px;
}
.bg01 ul li+li p:nth-child(1){
    background: url(../images/img_top_02.jpg) no-repeat center / cover;
}
.bg01 ul li p+p{
    padding: 0 8%;
}
.bg01 ul li p+p span{
    display: block;
    color: #005ea1;
    font-size: 2.2rem;
    padding-bottom: 10px;
    border-bottom: 1px dashed #005ea1;
    margin-bottom: 20px;
    text-align: center;
}
.bg01 ul li p+p span+span{
    font-size: 1.4rem;
    color: initial;
    border-bottom: none;
}
.bg01 ul li:nth-child(2n){
    float: right;
}
.bg01 .head01{
    color: #00a0e9;
}
.bg01 .scInr{
    display: table;
    height: 100%;
    vertical-align: middle;
}

.topHead{
    font-size: 3.2rem;
	text-align: center;
	margin-bottom: 80px;
    font-weight: 700;
    color: #FFF;
    letter-spacing: 4px;
}
.topHead::before{
	content: attr(data-text);
    font-family: 'Oswald', sans-serif;
	font-size: 1.8rem;
    font-weight: 600;
	display: block;
    color: #00a0e9;
    margin-bottom: 10px;
}
.bg02{
    background: url(../images/bg_top_mv_02.png) no-repeat left top;
    padding: 80px 0;
    margin-bottom: 0;
}
.bg02 .topHead{
    color: #000;
    margin-bottom: 30px;
}

#logo{
    max-width: 974px;
}
#logo path {
  stroke: transparent;
  fill: transparent;
}

#logo.start .st0, #logo.start .st1 {
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: .5;
}
#logo.start .st0 {
  stroke: #FFFFFF;
  animation: st0_anime 3s ease-in 0s forwards;
}
#logo.start .st1 {
  stroke: #1C96D4;
  stroke-dashoffset: 2000;
  animation: st1_anime 3s ease-in .5s forwards;
}

@keyframes st0_anime {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
  }
  80% {
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #FFFFFF;
  }
}
@keyframes st1_anime {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
  }
  80% {
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #1C96D4;
  }
}





/*SP*/
@media only screen and (max-width: 800px) {
#mv {
    background: url(../images/overlay.png) no-repeat center / cover,url(../images/overlay_02.png) no-repeat center / cover,url(../images/poster.jpg) no-repeat center / cover;
}
#contents{
    margin-top: -130px;
}
#mv.vidWrap {
/*
    min-height: 782px;
    max-height: 782px;
*/
    height: 100%; 
    height: 100vh;
    position: relative;  
    width: 100%;
}
#mv .vid{
    min-height: 100%; 
    min-height: 100vh;
    min-width: 100%;
    min-width: 100vw;
    position: absolute;
    top: 0;
    z-index: -1;
}
#mv div.mvInr{
    height: 100%;  
    height: 100vh;
    max-width: 1200px;
    display: table;
    width: 94%;
}
.mvLead{
    display: table-cell;
    width: 100%;
    padding: 0;
    vertical-align: middle;
    height: 100%;
    float: none;
}
.mvLead span{
    font-size: 1.6rem;
    padding: 15px 0 0 0;
}
.mvLead em{
    margin-top: 0;
}
.copy{
    display: none;
}
.bg01{
    padding: 30% 0 10%;
}
.bg01 ul li{
    float: none;
    width: 100%;
}
.bg01 ul li p:nth-child(1){
    height: 180px;
    margin-bottom: 15px;
}
.bg01 ul li p+p span{
    font-size: 1.8rem;
}
.bg01 ul li:nth-child(2n){
    float: none;
}
.topHead{
    font-size: 2.4rem;
	margin-bottom: 40px;
}
.topHead::before{
    font-weight: 600;
}
.bg02{
    background-size: contain;
    padding: 60px 0 40px;
    margin-bottom: 0;
}
.bg02 .topHead{
    color: #000;
    margin-bottom: 30px;
}







}
/*/*/