@charset "utf-8";

.block{height:100vh;overflow:hidden;position:relative;background:#15181b;}
.block .container{height:100%;z-index:3;}
.block .block-box{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:absolute;top:0;right:0;transition:width .8s ease;}
.block .block-logo{opacity:0;transform:scale(1.2);transition:transform 1s ease,opacity 1s ease;}
.block .block-logo img{transition:.6s ease;}
.block .block-ttl{position:absolute;left:0;top:40px;color:#fff;font-size:24px;letter-spacing:0.18em;opacity:0;transform:scale(1,0) translateX(-50px);transition:1s ease;}
.block .block-ttl .en{margin-right:20px;letter-spacing:0;}
.block.animated .block-ttl{opacity:1;transform:none;}
.block.animated .block-logo{opacity:1;transform:none;}
.block.active .block-box{transition:.8s ease;}
.block.active .block-logo{transition:.8s ease;}
.block p + p{margin-top:0!important;}
#block-footer::before{display:none;}

/* -------------------------------------------------- */
/* #block-section01 */
/* -------------------------------------------------- */
#block-section01{background:url(/tech/smart_future_vision/img/top/spirit_back.jpg) no-repeat center center #161d25;background-size:cover;position:relative;}
#block-section01 .common-ttl03{position:absolute;left:60px;top:150px;}
#block-section01 .container{z-index:3;height:100%;}
#block-section01 .inner{text-shadow:0 0 20px rgba(0,0,0,0.8);position:absolute;right:0;top:0;height:100%;display:flex;align-items:center;font-size:22px;font-style:italic;color:#fff;line-height:1.5;opacity:0;width:100%;max-width:520px;transform:translateX(-100px);transition:1s .2s ease;}
#block-section01 .inner span{background:#161d25;display:inline-block;padding:5px 15px;margin-bottom:8px;}
#block-section01 .img{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;}
#block-section01 .img .person{width:100%;height:100%;position:absolute;left:0;top:0;background:url(/tech/smart_future_vision/img/spirit/section01_img.png) no-repeat center center;background-size:auto 100%;z-index:2;opacity:0;transform:translateX(-100px);transition:1s ease;}
#block-section01 .img .back{position:absolute;width:100%;height:100%;z-index:1;overflow:hidden;}
#block-section01 .img .back::before{content:"";display:block;width:600px;height:0;position:absolute;right:-400px;top:0;transform-origin:right top;transform:rotate(45deg);background:rgba(230,0,45,0.9);z-index:2;}
#block-section01 .img .back::after{content:"";display:block;width:600px;height:0;position:absolute;right:-600px;top:0;transform-origin:right top;transform:rotate(45deg);background:rgba(22,29,37,0.5);z-index:1;}
#block-section01 .scroll{position:fixed;left:50%;bottom:40px;color:#fff;font-size:24px;letter-spacing:0.2em;transition:1s ease;}
#block-section01 .scroll::after{content:"";display:block;width:36px;height:16px;background:url(/tech/smart_future_vision/img/spirit/scroll.png) no-repeat;background-size:100% auto;margin:10px auto 0;}
#block-section01.animated .img .person{transform:none;opacity:1;transition:.8s ease;}
#block-section01.animated .img .back::before{height:250%;transition:.8s ease;}
#block-section01.animated .img .back::after{height:250%;transition:.8s .2s ease;}

/* active */
#block-section01.active .img .person{background-image:url(/tech/smart_future_vision/img/spirit/section01_img02.png);}
#block-section01.active .inner{opacity:1;transform:none;}
#block-section01.active .scroll{opacity:0;}

/* -------------------------------------------------- */
/* #block-section02 */
/* -------------------------------------------------- */
#block-section02::before{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:no-repeat center center;background-size:cover;z-index:0;transition:.6s ease;}
#block-section02::after{content:"";display:block;width:600px;height:0;position:absolute;right:-600px;top:0;transform-origin:right top;transform:rotate(30deg);background:rgba(230,0,45,0.9);z-index:2;transition:.8s ease;}
#block-section02 .block-inner{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;color:#fff;width:55%;margin-right:10%;transform:translateX(-100px);opacity:0;transition:1s ease;}
#block-section02 .block-inner02{width:100%;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;letter-spacing:0.08em;line-height:1.8;}
#block-section02 .block-ttl02{margin-left:30px;}
#block-section02 .block-ttl02 span{background:#fff;display:inline-block;color:#12171d;font-style:italic;font-size:30px;font-weight:bold;line-height:1.2;padding:10px 5px 10px 0;margin-right:5px;}
@media screen and (min-width:960px){#block-section02::before{background-image:url(/tech/smart_future_vision/img/spirit/section02_img.jpg);}}
@media screen and (min-width:1px) and (max-width:959px){#block-section02::before{background-image:url(/tech/smart_future_vision/img/spirit/section02_img_sp.jpg);}}

/* active */
#block-section02.active::before{opacity:0.3;}
#block-section02.active::after{height:250%;}
#block-section02.active .block-box{width:420px;margin-left:auto;text-align:right;}
#block-section02.active .block-logo{text-align:right;}
#block-section02.active .block-logo img{width:420px;}
#block-section02.active .block-inner{opacity:1;transform:none;}

/* -------------------------------------------------- */
/* #block-section03 */
/* -------------------------------------------------- */
#block-section03::before{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:no-repeat center center;background-size:cover;z-index:0;transition:.6s ease;}
#block-section03::after{content:"";display:block;width:600px;height:0;position:absolute;left:0;top:0;transform-origin:right top;transform:rotate(30deg);background:rgba(230,0,45,0.9);z-index:2;transition:.8s ease;}
#block-section03 .block-inner{position:absolute;left:48%;top:0;height:100%;display:flex;align-items:center;color:#fff;width:52%;transform:translateX(-100px);opacity:0;transition:1s ease;}
#block-section03 .block-inner02{width:100%;line-height:1.8;}
#block-section03 .block-inner02 p + p{margin-top:15px!important;}
#block-section03 .block-box{right:auto;left:0;}
#block-section03 .block-ttl02{margin-bottom:15px;}
#block-section03 .block-ttl02 span{background:#fff;display:inline-block;color:#12171d;font-style:italic;font-size:30px;font-weight:bold;line-height:1.2;padding:5px 8px;margin-bottom:5px;}
@media screen and (min-width:960px){#block-section03::before{background-image:url(/tech/smart_future_vision/img/spirit/section03_img.jpg);}}
@media screen and (min-width:1px) and (max-width:959px){#block-section03::before{background-image:url(/tech/smart_future_vision/img/spirit/section03_img_sp.jpg);}}

/* active */
#block-section03.active::before{opacity:0.3;}
#block-section03.active::after{height:250%;}
#block-section03.active .block-box{width:360px;margin-right:auto;}
#block-section03.active .block-logo img{width:360px;}
#block-section03.active .block-inner{opacity:1;transform:none;}

/* -------------------------------------------------- */
/* #block-section04 */
/* -------------------------------------------------- */
#block-section04 .container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:220px;padding-bottom:10%;}
#block-section04::before{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:no-repeat center center;background-size:cover;z-index:0;transition:.6s ease;}
#block-section04::after{content:"";display:block;width:600px;height:0;position:absolute;left:50%;top:0;transform-origin:right top;transform:rotate(30deg);background:rgba(230,0,45,0.9);z-index:2;transition:.8s ease;}
#block-section04 .block-inner{height:100%;display:flex;align-items:flex-start;justify-content:center;color:#fff;width:100%;transform:translateY(-100px);opacity:0;transition:1s ease;position:absolute;}
#block-section04 .block-inner02{-ms-writing-mode: tb-rl;writing-mode: vertical-rl;letter-spacing:0.08em;line-height:1.8;}
#block-section04 .block-inner02 p + p{margin-right:15px!important;}
#block-section04 .block-box{position:static;transition:height .6s ease;}
#block-section04 .block-ttl02{margin-left:30px;}
#block-section04 .block-ttl02 span{background:#fff;display:inline-block;color:#12171d;font-style:italic;font-size:30px;font-weight:bold;line-height:1.2;padding:10px 5px 10px 0;margin-right:5px;}
@media screen and (min-width:960px){#block-section04::before{background-image:url(/tech/smart_future_vision/img/spirit/section04_img.jpg);}}
@media screen and (min-width:1px) and (max-width:959px){#block-section04::before{background-image:url(/tech/smart_future_vision/img/spirit/section04_img_sp.jpg);}}

/* active */
#block-section04.active::before{opacity:0.3;}
#block-section04.active::after{height:250%;}
#block-section04.active .block-box{height:140px;margin-top:0px;}
#block-section04.active .block-box img{width:590px;}
#block-section04.active .block-inner{opacity:1;transform:none;margin-top:40px;position:static;}

/* -------------------------------------------------- */
/* #block-section05 */
/* -------------------------------------------------- */
#block-section05::before{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:no-repeat center center;background-size:cover;z-index:0;transition:.6s ease;}
#block-section05::after{content:"";display:block;width:600px;height:0;position:absolute;right:-600px;top:0;transform-origin:right top;transform:rotate(30deg);background:rgba(230,0,45,0.9);z-index:2;transition:.8s ease;}
#block-section05 .block-inner{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;color:#fff;width:65%;margin-right:10%;transform:translateX(-100px);opacity:0;transition:1s ease;}
#block-section05 .block-inner02{width:100%;line-height:1.8;position:relative;padding-left:90px;}
#block-section05 .block-ttl02{margin-bottom:15px;}
#block-section05 .block-ttl02 span{background:#fff;display:inline-block;color:#12171d;font-style:italic;font-size:30px;font-weight:bold;line-height:1.2;padding:5px 8px;margin-bottom:5px;}
#block-section05 .block-inner02 p + p{margin-top:15px!important;}
@media screen and (min-width:960px){#block-section05::before{background-image:url(/tech/smart_future_vision/img/spirit/section05_img.jpg);}}
@media screen and (min-width:1px) and (max-width:959px){#block-section05::before{background-image:url(/tech/smart_future_vision/img/spirit/section05_img_sp.jpg);}}

/* active */
#block-section05.active::before{opacity:0.3;}
#block-section05.active::after{height:250%;}
#block-section05.active .block-box{width:30%;margin-left:auto;}
#block-section05.active .block-logo img{width:200px;}
#block-section05.active .block-inner{opacity:1;transform:none;}

/* ======================================================================================================================= */
/* for SP */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:959px){

  .block{height:auto!important;max-height:none!important;}
  .block .block-box{position:static;margin:35px auto 40px;}
  .block .block-ttl{font-size:14px;left:20px;top:30px;}
  .block .block-inner{font-size:14px;}
  .block .dq-mark,
  .block .dq-mark2{font-size:0;}
  .block .dq-mark::before{content:"“";font-size:14px;}
  .block .dq-mark2::before{content:"”";font-size:14px;}
  .block p + p{margin-top:15px!important;}

  .block{position:static!important;}
  .pin-spacer{height:auto!important;padding-bottom:0!important;}

  /* -------------------------------------------------- */
  /* #block-section01 */
  /* -------------------------------------------------- */
  #block-section01{background:url(/tech/smart_future_vision/img/nav_back.jpg) no-repeat center center #161d25;background-size:cover;}
  #block-section01 .common-ttl03{top:60px;left:30px;}
  #block-section01 .img{height:0;padding-bottom:75vw;}
  #block-section01 .back{background:url(/tech/smart_future_vision/img/top/spirit_back.jpg) no-repeat center center #161d25;background-size:cover;}
  #block-section01 .img .back::before{width:40vw;right:-35vw;}
  #block-section01 .img .back::after{width:40vw;right:-55vw;}
  #block-section01 .inner{position:static;margin-top:calc(75vw - 30px);text-align:center;max-width:100%;}
  #block-section01 .inner p{text-align:center;width:100%;}
  #block-section01 .inner span{font-size:15px;margin-bottom:2px;background:transparent;padding:0;}
  #block-section01 .scroll{display:none;}
  #block-section01.animated .inner{opacity:1;transform:none;transition-delay:.8s;}

  /* -------------------------------------------------- */
  /* #block-section02 */
  /* -------------------------------------------------- */
  #block-section02 .block-inner{position:static;width:100%;}
  #block-section02 .block-inner02{writing-mode: horizontal-tb;-webkit-writing-mode: horizontal-tb;-ms-writing-mode: horizontal-tb;}
  #block-section02 .block-logo img{width:170px!important;}
  #block-section02 .block-ttl02{margin-left:0;margin-bottom:15px;}
  #block-section02 .block-ttl02 span{font-size:18px;padding:5px 8px;margin-right:0;margin-bottom:3px;}
  #block-section02::after{width:200px;right:auto;left:0;}
  #block-section02 .block-box{width:100%;}
  #block-section02.animated::before{opacity:0.3;}
  #block-section02.animated::after{height:250%;}
  #block-section02.animated .block-inner{opacity:1;transform:none;transition-delay:.8s;}

  /* -------------------------------------------------- */
  /* #block-section03 */
  /* -------------------------------------------------- */
  #block-section03 .block-inner{position:static;width:100%;}
  #block-section03 .block-inner02{writing-mode: horizontal-tb;-webkit-writing-mode: horizontal-tb;-ms-writing-mode: horizontal-tb;}
  #block-section03 .block-logo img{width:160px!important;}
  #block-section03 .block-ttl02{margin-left:0;margin-bottom:15px;}
  #block-section03 .block-ttl02 span{font-size:18px;padding:5px 8px;margin-right:0;margin-bottom:3px;}
  #block-section03::after{width:200px;right:auto;left:0;}
  #block-section03 .block-box{width:100%;}
  #block-section03.animated::before{opacity:0.3;}
  #block-section03.animated::after{height:250%;}
  #block-section03.animated .block-inner{opacity:1;transform:none;transition-delay:.8s;}

  /* -------------------------------------------------- */
  /* #block-section04 */
  /* -------------------------------------------------- */
  #block-section04 .block-inner{position:static;width:100%;}
  #block-section04 .block-inner02{writing-mode: horizontal-tb;-webkit-writing-mode: horizontal-tb;-ms-writing-mode: horizontal-tb;}
  #block-section04 .block-logo img{width:300px!important;}
  #block-section04 .block-ttl02{margin-left:0;margin-bottom:15px;}
  #block-section04 .block-ttl02 span{font-size:18px;padding:5px 8px;margin-right:0;margin-bottom:3px;}
  #block-section04::after{width:200px;right:auto;left:0;}
  #block-section04 .block-box{width:100%;height:auto;margin-top:35px;}
  #block-section04 .block-inner{margin-top:0;transform:translateX(-100px);}
  #block-section04.animated::before{opacity:0.3;}
  #block-section04.animated::after{height:250%;}
  #block-section04.animated .block-inner{opacity:1;transform:none;margin-top:0;position:static;transition-delay:.8s;}

  /* -------------------------------------------------- */
  /* #block-section05 */
  /* -------------------------------------------------- */
  #block-section05 .block-inner{position:static;width:100%;}
  #block-section05 .block-inner02{writing-mode: horizontal-tb;-webkit-writing-mode: horizontal-tb;-ms-writing-mode: horizontal-tb;padding-left:0;}
  #block-section05 .block-logo img{width:80px!important;}
  #block-section05 .block-ttl02{margin-left:0;margin-bottom:15px;position:static;writing-mode: horizontal-tb;-webkit-writing-mode: horizontal-tb;-ms-writing-mode: horizontal-tb;}
  #block-section05 .block-ttl02 span{font-size:18px;padding:5px 8px;margin-right:0;margin-bottom:3px;}
  #block-section05::after{width:200px;right:auto;left:0;}
  #block-section05 .block-box{width:100%;height:auto;}
  #block-section05.animated::before{opacity:0.3;}
  #block-section05.animated::after{height:250%;}
  #block-section05.animated .block-inner{opacity:1;transform:none;transition-delay:.8s;}
}

/* ======================================================================================================================= */
/* for IE */
/* ======================================================================================================================= */
@media screen\0 {
}