@charset "utf-8";

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

/* -------------------------------------------------- */
/* #block-smartguide */
/* -------------------------------------------------- */
#block-smartguide{overflow:hidden;background:url(/tech/smart_future_vision/img/concept/back.jpg) no-repeat center center;background-size:cover;}
#block-smartguide .lead{color:#fff;text-align:center;margin-bottom:100px;}
#block-smartguide .lead .ttl{font-size:36px;font-weight:bold;margin-bottom:30px;}
#block-smartguide .lead p{font-size:18px;line-height:2.2;max-width:900px;margin:auto;}
#block-smartguide .lead .img{margin-bottom:40px;position:relative;}
#block-smartguide .lead .img .img02{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;}
#block-smartguide .lead.animated .img .img01{animation:img01 6s linear infinite forwards;}
#block-smartguide .lead.animated .img .img02{animation:img02 6s linear infinite forwards;}
@keyframes img01{0%{opacity:1;}35%{opacity:1;}50%{opacity:0;}85%{opacity:0;}100%{opacity:1;}}
@keyframes img02{0%{opacity:0;}35%{opacity:0;}50%{opacity:1;}85%{opacity:1;}100%{opacity:0;}}
#block-smartguide .list-smartguide > li{position:relative;color:#fff;display:flex;flex-direction:row;}
#block-smartguide .list-smartguide > li.slidein .img img{transform:scale(1.1);transition:1s ease .2s;}
#block-smartguide .list-smartguide > li.slidein.animated .img img{transform:none;}
#block-smartguide .list-smartguide > li + li{margin-top:100px;}
#block-smartguide .list-smartguide > li .inner{flex:1;align-self:center;margin-left:5%;position:relative;z-index:2;}
#block-smartguide .list-smartguide > li .inner .num{position:absolute;top:-100px;left:-10px;font-size:200px;line-height:1;opacity:0.1;font-style:italic;}
#block-smartguide .list-smartguide > li .inner .sub{font-size:36px;font-weight:bold;color:#fff;position:relative;padding-bottom:16px;margin-bottom:20px;}
#block-smartguide .list-smartguide > li .inner .sub::after{content:"";display:block;width:calc(100% + 80px);height:1px;background:#fff;position:absolute;right:0;bottom:0;}
#block-smartguide .list-smartguide > li .inner .txt{font-size:18px;line-height:2.2;}
#block-smartguide .list-smartguide > li .img{width:50%;position:relative;height:420px;}
#block-smartguide .list-smartguide > li .img span{display:block;overflow:hidden;width:100%;width:calc(100% + 120px);height:100%;position:absolute;right:0;top:0;}
#block-smartguide .list-smartguide > li .img span img{width:100%;height:100%;object-fit:cover;font-family:"object-fit:cover";position:absolute;top:0;left:0;}
#block-smartguide .list-smartguide > li:nth-child(even){flex-direction:row-reverse;}
#block-smartguide .list-smartguide > li:nth-child(even) .inner{margin-left:0;margin-right:5%;}
#block-smartguide .list-smartguide > li:nth-child(even) .inner .sub::after{right:auto;left:0;}
#block-smartguide .list-smartguide > li:nth-child(even) .inner .num{right:auto;left:-10px;}
#block-smartguide .list-smartguide > li:nth-child(even) .img span{right:auto;left:0;}

#block-smartguide .box{max-width:1600px;margin:auto;position:relative;}
#block-smartguide .box .inner{padding:60px 80px 55px;background:rgba(22,29,37,0.92);position:absolute;left:5%;top:50%;max-width:45%;color:#fff;transform:translateY(-48%);}
#block-smartguide .box .inner .num{position:absolute;top:-70px;left:20px;font-size:200px;line-height:1;opacity:0.1;font-style:italic;}
#block-smartguide .box .inner .sub{font-size:36px;font-weight:bold;color:#fff;position:relative;padding-bottom:16px;margin-bottom:20px;}
#block-smartguide .box .inner .sub::after{content:"";display:block;width:100%;height:1px;background:#fff;position:absolute;left:0;bottom:0;}
#block-smartguide .box .inner .txt{font-size:18px;line-height:2.2;}

/* -------------------------------------------------- */
/* #block-concept */
/* -------------------------------------------------- */
#block-concept{background:url(/tech/smart_future_vision/img/technology/concept_back.jpg) no-repeat center top;background-size:100% auto;}
#block-concept .box{color:#fff;text-align:center;}
#block-concept .box .img{margin-bottom:50px;}
#block-concept .box .txt{line-height:2.1;}
#block-concept .list-concept{margin-top:100px;}
#block-concept .list-concept > li{border:1px solid #fff;color:#fff;padding:40px 5%;display:flex;align-items:flex-start;}
#block-concept .list-concept > li + li{margin-top:80px;}
#block-concept .list-concept > li .left{text-align:center;margin:-50px 5% 10px 0;max-width:29%;position:relative;z-index:3;}
#block-concept .list-concept > li .left .ttl{font-size:60px;margin-top:5px;}
#block-concept .list-concept > li .left .ttl small{font-size:20px;display:block;letter-spacing:0.05em;}
#block-concept .list-concept > li .right{flex:1;}
#block-concept .list-concept > li .right .txt{line-height:1.6;position:relative;margin-top:10px;padding-bottom:15px;margin-bottom:30px;}
#block-concept .list-concept > li .right .txt::after{content:"";display:block;width:calc(100% + 100px);height:1px;position:absolute;right:0;bottom:0;background:#fff;opacity:0.5;z-index:1;}
#block-concept .list-concept > li .right .list-children{display:flex;margin-bottom:-30px;}
#block-concept .list-concept > li .right .list-children > li{width:calc((100% - 60px) / 3);margin-right:30px;margin-bottom:30px;text-align:center;}
#block-concept .list-concept > li .right .list-children > li:nth-child(3n){margin-right:0;}
#block-concept .list-concept > li .right .list-children > li .list-ttl{text-align:center;letter-spacing:0.1em;margin-bottom:15px;display:flex;align-items:center;justify-content:center;line-height:1.4;}
#block-concept .list-concept > li .right .list-children > li .list-name{background:#481e1a;margin-top:20px;padding:5px;}
#block-concept .attention{color:#fff;font-size:16px;margin-top:20px;}

#block-concept .list-concept02 > li{position:relative;color:#fff;}
#block-concept .list-concept02 > li .inner{display:flex;flex-direction:row;}
#block-concept .list-concept02 > li.slidein .img img{transform:scale(1.1);transition:1s ease .2s;}
#block-concept .list-concept02 > li.slidein.animated .img img{transform:none;}
#block-concept .list-concept02 > li + li{margin-top:100px;}
#block-concept .list-concept02 > li .inner02{flex:1;align-self:center;margin-left:5%;position:relative;z-index:2;}
#block-concept .list-concept02 > li .inner02 .txt{font-size:18px;line-height:2.2;}
#block-concept .list-concept02 > li .img{width:55%;position:relative;height:420px;}
#block-concept .list-concept02 > li .img.img-slider{height:auto;}
/*
#block-concept .list-concept02 > li .img .slider{display:block;overflow:hidden;width:100%;width:calc(100% + 120px);margin-left:-120px;}
*/
#block-concept .list-concept02 > li .img .slider{display:block;overflow:hidden;width:100%;}
#block-concept .list-concept02 > li .img .slider video{width:100%;}
#block-concept .list-concept02 > li .img .slider .caption{margin-top:12px;font-size:18px;opacity:0.6;}
#block-concept .list-concept02 > li .img .slider .caption small{font-size:16px;}
#block-concept .list-concept02 > li .img .slider .slick-arrow{position:absolute;top:50%;background:green;z-index:10;}
#block-concept .list-concept02 > li .img .slider .slick-next{right:0;}
#block-concept .list-concept02 > li .ttl-wrap{display:flex;align-items:center;margin-bottom:30px;}
#block-concept .list-concept02 > li .ttl-wrap .ttl{font-size:90px;margin-left:30px;display:flex;align-items:center;line-height:1.2;}
#block-concept .list-concept02 > li .ttl-wrap .ttl small{display:inline-block;font-size:24px;letter-spacing:0.05em;margin-left:30px;padding-top:10px;}
#block-concept .slider-concept{display:flex;}

/* ======================================================================================================================= */
/* for SP */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:959px){
  /* -------------------------------------------------- */
  /* #block-smartguide */
  /* -------------------------------------------------- */
  #block-smartguide .lead{margin-bottom:60px;}
  #block-smartguide .lead .ttl{font-size:24px;margin-bottom:15px;}
  #block-smartguide .lead p{font-size:15px;line-height:2;text-align:left;}
  #block-smartguide .lead .img{margin-bottom:26px;}
  #block-smartguide .list-smartguide > li{display:block;}
  #block-smartguide .list-smartguide > li + li{margin-top:60px;}
  #block-smartguide .list-smartguide > li .inner{padding:0!important;width:100%;margin-left:0!important;margin-right:0!important;}
  #block-smartguide .list-smartguide > li .img{width:100%;margin-bottom:20px;height:180px;}
  #block-smartguide .list-smartguide > li .img span{width:107%;}
  #block-smartguide .list-smartguide > li .inner .sub{font-size:22px;padding-bottom:10px;margin-bottom:15px;}
  #block-smartguide .list-smartguide > li .inner .txt{font-size:15px;line-height:2;}
  #block-smartguide .list-smartguide > li .inner .num{font-size:120px;left:auto;right:0;top:-30px;}
  #block-smartguide .list-smartguide > li:nth-child(even) .inner{margin-left:0;}

  #block-smartguide .box .inner{max-width:88%;margin:-50px auto 0;position:relative;left:auto;top:auto;transform:none;padding:30px 6%;}
  #block-smartguide .box .img{overflow:hidden;padding:8% 0;}
  #block-smartguide .box .img img{transform:scale(1.4);transform-origin:right center;}
  #block-smartguide .box .inner .sub{font-size:22px;padding-bottom:10px;margin-bottom:15px;}
  #block-smartguide .box .inner .txt{font-size:15px;line-height:2;}
  #block-smartguide .box .inner .num{font-size:120px;left:auto;right:20px;top:-5px;}

  /* -------------------------------------------------- */
  /* #block-concept */
  /* -------------------------------------------------- */
  #block-concept{background-size:200% auto;}
  #block-concept .box .img{max-width:600px;margin:0 auto 30px;}
  #block-concept .box .txt{text-align:left;}
  #block-concept .list-concept{margin-top:50px;}
  #block-concept .list-concept > li{display:block;padding:30px 20px;}
  #block-concept .list-concept > li + li{margin-top:40px;}
  #block-concept .list-concept > li .left{max-width:100%;margin:-50px auto 20px;}
  #block-concept .list-concept > li .left .icon{width:150px;margin:auto;}
  #block-concept .list-concept > li .left .ttl{font-size:40px;margin-top:0;}
  #block-concept .list-concept > li .right .txt{padding-bottom:20px;margin-bottom:25px;}
  #block-concept .list-concept > li .right .txt::after{width:100%;}
  #block-concept .list-concept > li .right .list-children{display:block;margin-bottom:0;}
  #block-concept .list-concept > li .right .list-children > li{width:100%;margin:0 20px 0 0;position:relative;padding-left:43%;min-height:20vw;}
  #block-concept .list-concept > li .right .list-children > li + li{margin-top:15px;}
  #block-concept .list-concept > li .right .list-children > li .list-ttl{margin-bottom:5px;text-align:left;display:block;}
  #block-concept .list-concept > li .right .list-children > li .list-img{position:absolute;left:0;top:0;width:38%;}
  #block-concept .list-concept > li .right .list-children > li .list-name{margin-top:5px;font-size:14px;}
  #block-concept .attention{font-size:12px;}
  #block-concept .list-concept02 > li + li{margin-top:60px;}
  #block-concept .list-concept02 > li .inner{display:block;}
  #block-concept .list-concept02 > li .inner02{padding:0!important;width:100%;margin-left:0!important;margin-right:0!important;}
  #block-concept .list-concept02 > li .inner02 .txt{font-size:15px;}
  #block-concept .list-concept02 > li .img{width:100%;margin-bottom:20px;height:180px;}
  #block-concept .list-concept02 > li .img .slider{margin:0;width:100%;}
  #block-concept .list-concept02 > li .img .slider .caption{font-size:16px;}
  #block-concept .list-concept02 > li .img .slider .caption small{font-size:12px;}
  #block-concept .list-concept02 > li .ttl-wrap{display:block;text-align:center;}
  #block-concept .list-concept02 > li .ttl-wrap .icon{margin:auto;width:120px;margin-bottom:10px;}
  #block-concept .list-concept02 > li .ttl-wrap .ttl{font-size:50px;margin-left:0;display:block;}
  #block-concept .list-concept02 > li .ttl-wrap .ttl small{display:block;font-size:20px;margin:0;}

  #block-concept .slider-concept img{width:200px;}

}