@charset "utf-8";

.common-submv{background-image:url(/tech/smart_future_vision/img/contents/mv.jpg);}

/* -------------------------------------------------- */
/* #block-movie */
/* -------------------------------------------------- */
#block-movie{position:relative;}
#block-movie::before{content:"";display:block;width:0;height:0;border-style:solid;border-width:0 0 350px 350px;border-color:transparent transparent rgba(255,255,255,0.05) transparent;position:absolute;right:0;bottom:0;z-index:0;}
#block-movie > .container{z-index:1;}
#block-movie .common-ttl03{position:absolute;left:60px;top:150px;}
#block-movie .box{padding-left:180px;display:block;text-align:center;}

/* -------------------------------------------------- */
/* #block-movie02 */
/* -------------------------------------------------- */
#block-movie02{background:url(/tech/smart_future_vision/img/back2.jpg) no-repeat #182737;background-size:cover;text-align:center;color:#fff;}
#block-movie02 .ttl{text-align:center;line-height:1;font-size:120px;color:rgba(255,255,255,0.05);position:relative;display:inline-block;font-style:italic;margin-bottom:40px;}
#block-movie02 .ttl span{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px;color:#fff;padding-top:10px;font-weight:bold;font-style:normal;line-height:1.4;}
#block-movie02 .list-movie > li{display:flex;flex-direction:row-reverse;align-items:center;}
#block-movie02 .list-movie > li + li{margin-top:80px;}
#block-movie02 .list-movie > li .list-ttl{width:280px;height:280px;position:relative;}
#block-movie02 .list-movie > li .list-ttl::before{content:"";display:block;width:100%;height:100%;background:rgba(255,255,255,0.1);transform:rotate(45deg);position:absolute;top:0;left:40px;z-index:0;}
#block-movie02 .list-movie > li .list-ttl::after{content:"";display:block;width:100%;height:100%;background:rgba(230,0,45,0.8);transform:rotate(45deg);position:absolute;top:0;left:0;z-index:1;}
#block-movie02 .list-movie > li .list-ttl h3{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2;font-size:36px;font-weight:bold;padding-bottom:10px;}
#block-movie02 .list-movie > li .list-ttl h3 span{display:inline-block;position:relative;}
#block-movie02 .list-movie > li .list-ttl h3 span::before{content:"";display:block;width:calc(100% + 160px);height:1px;background:#fff;position:absolute;right:-10px;bottom:-20px;}
#block-movie02 .list-movie > li .list-video{flex:1;text-align:right;position:relative;z-index:5;}
#block-movie02 .list-movie > li:nth-child(even){flex-direction:row;}
#block-movie02 .list-movie > li:nth-child(even) .list-video{text-align:left;}
#block-movie02 .list-movie > li:nth-child(even) .list-ttl h3 span::before{right:auto;left:-10px;}

/* -------------------------------------------------- */
/* #block-movie03 */
/* -------------------------------------------------- */
#block-movie03{position:relative;color:#fff;}
#block-movie03::before{content:"";display:block;width:0;height:0;border-style:solid;border-width:350px 350px 0 0;border-color:rgba(255,255,255,0.05) transparent transparent transparent;position:absolute;left:0;top:0;z-index:0;}
#block-movie03 .list-movie{display:flex;flex-wrap:wrap;}
#block-movie03 .list-movie > li{width:47.5%;margin:0 5% 6% 0;}
#block-movie03 .list-movie > li:nth-child(even){margin-right:0;}
#block-movie03 .list-movie > li .list-ttl{font-size:24px;font-weight:bold;border-left:4px solid #f08b2e;padding-left:30px;padding-bottom:3px;margin-bottom:20px;display:flex;align-items:center;justify-content:flex-start;}
#block-movie03 .list-movie > li .list-thumb{position:relative;overflow:hidden;}
#block-movie03 .list-movie > li .list-thumb::before{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:#161d25;opacity:0.7;transition:.3s ease;}
#block-movie03 .list-movie > li .list-thumb::after{content:"";display:block;width:100px;height:100px;position:absolute;top:50%;left:50%;background:url(/tech/smart_future_vision/img/contents/icon_play.png) no-repeat;background-size:100% auto;margin:-50px 0 0 -50px;transition:.3s ease;}
#block-movie03 .list-movie > li .list-thumb img{opacity:1!important;width:100%;}
#block-movie03 .list-movie > li a{color:#fff;}
#block-movie03 .list-movie > li a:hover .list-thumb::before{opacity:0.4;}
#block-movie03 .list-movie > li a:hover .list-thumb::after{transform:scale(1.15);}
#block-movie03 .list-movie > li .video{width:100%;height:0;padding-bottom:56.5%;position:relative;}
#block-movie03 .list-movie > li .video iframe{width:100%;height:100%;position:absolute;left:0;top:0;}

/* -------------------------------------------------- */
/* #block-press */
/* -------------------------------------------------- */
#block-press{background:url(/tech/smart_future_vision/img/back.jpg) no-repeat center center;background-size:cover;}
#block-press .ttl-press{color:#fff;max-width:1000px;margin:auto;font-size:48px;margin-top:60px;animation-delay:0s;font-style:italic;}
#block-press .list-press{color:#fff;font-size:18px;max-width:1000px;margin:auto;}
#block-press .list-press a{color:#fff;}
#block-press .list-press a:hover{text-decoration:underline;color:#fff;}
#block-press .list-press > li{border-bottom:1px solid rgba(255,255,255,0.3);}
#block-press .list-press > li > *{display:block;padding:20px 30px;display:flex;align-items:center;}
#block-press .list-press > li > a[target="_blank"] .ttl::after{content:"";display:inline-block;width:18px;height:18px;background:url(/tech/smart_future_vision/img/icon_external.png) no-repeat;background-size:100% auto;margin-left:10px;vertical-align:middle;}
#block-press .list-press > li .date{letter-spacing:0.1em;margin-right:30px;width:8em;position:relative;}
#block-press .list-press > li .date::after{content:"";display:block;width:1px;height:80%;position:absolute;top:10%;right:0;background:rgba(255,255,255,0.3);}
#block-press .list-press > li .ttl{flex:1;}

/* -------------------------------------------------- */
/* #block-pamphlet */
/* -------------------------------------------------- */
#block-pamphlet{background:url(/tech/smart_future_vision/img/back2.jpg) no-repeat #182737;background-size:cover;text-align:center;color:#fff;}
#block-pamphlet .box{display:flex;max-width:800px;margin:auto;}
#block-pamphlet .box img{width:100%;}
#block-pamphlet .wide{margin-right:2%;width:46%;}
#block-pamphlet .list-pamph{display:flex;align-items:flex-end;list-style:none;flex:1;flex-wrap:wrap;}
#block-pamphlet .list-pamph > li{width:calc((100% - 40px) / 2);margin:0 10px 10px;}
#block-pamphlet .list-pamph02{display:flex;align-items:flex-end;justify-content:center;list-style:none;flex:1;flex-wrap:wrap;}
#block-pamphlet .list-pamph02 > li{max-width:360px;margin:0 40px 20px;}
#block-pamphlet .list-pamph02 > li a{display:block;}
#block-pamphlet .list-pamph02 > li .ttl{color:#fff;font-size:20px;margin-top:20px;}

/* ======================================================================================================================= */
/* for SP */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:959px){
  /* -------------------------------------------------- */
  /* #block-movie */
  /* -------------------------------------------------- */
  #block-movie::before{border-width:0 0 150px 150px;}
  #block-movie .common-ttl03{position:static;margin-top:60px;margin-bottom:30px;text-align:center;transform:translateX(-100px);}
  #block-movie .common-ttl03 span{writing-mode: horizontal-tb;-webkit-writing-mode: horizontal-tb;-ms-writing-mode: horizontal-tb;  }
  #block-movie .common-ttl03.animated{transform:none;}
  #block-movie .box{padding-left:0;width:100%;}
  #block-movie .box .video{width:100%;height:0;padding-bottom:56.5%;position:relative;}
  #block-movie .box .video iframe{position:absolute;top:0;left:0;width:100%;height:100%;}

  /* -------------------------------------------------- */
  /* #block-movie02 */
  /* -------------------------------------------------- */
  #block-movie02 .ttl{font-size:60px;}
  #block-movie02 .ttl span{font-size:24px;}
  #block-movie02 .list-movie{margin-top:60px;}
  #block-movie02 .list-movie > li{display:block;text-align:center;}
  #block-movie02 .list-movie > li + li{margin-top:60px;}
  #block-movie02 .list-movie > li .list-ttl{text-align:center;display:inline-block;width:130px;height:130px;margin-bottom:-20px;}
  #block-movie02 .list-movie > li .list-ttl h3{font-size:20px;}
  #block-movie02 .list-movie > li .list-ttl h3 span::before{display:none;}
  #block-movie02 .list-movie > li .list-video{width:100%;height:0;padding-bottom:56.5%;position:relative;}
  #block-movie02 .list-movie > li .list-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;}

  /* -------------------------------------------------- */
  /* #block-movie03 */
  /* -------------------------------------------------- */
  #block-movie03 .list-movie > li{width:100%;margin:0 0 40px;}
  #block-movie03 .list-movie > li .list-ttl{font-size:16px;margin-bottom:10px;padding-left:15px;}
  #block-movie03 .list-movie > li .list-thumb::after{width:80px;height:80px;margin:-40px 0 0 -40px;}

  /* -------------------------------------------------- */
  /* #block-press */
  /* -------------------------------------------------- */
  #block-press .ttl-press{font-size:32px;margin-top:30px;}
  #block-press .list-press{font-size:14px;}
  #block-press .list-press > li > *{padding:15px 0;display:block;}
  #block-press .list-press > li .date{font-size:12px;margin-bottom:8px;opacity:0.7;}
  #block-press .list-press > li .date::after{display:none;}
  #block-press .list-press > li > a[target="_blank"] .ttl::after{width:14px;height:14px;}

  /* -------------------------------------------------- */
  /* #block-pamphlet */
  /* -------------------------------------------------- */
  #block-pamphlet .wide{width:45.8%;}
  #block-pamphlet .list-pamph > li{width:calc((100% - 20px) / 2);margin:0 5px 5px;}
  #block-pamphlet .list-pamph02 > li{max-width:100%;width:calc((100% - 30px) / 2);margin:0 30px 0 0;}
  #block-pamphlet .list-pamph02 > li:nth-child(even){margin-right:0;}
  #block-pamphlet .list-pamph02 > li .ttl{font-size:14px;margin-top:15px;}


}