@charset "utf-8";

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

/* -------------------------------------------------- */
/* #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-topics */
/* -------------------------------------------------- */
#block-topics{color:#fff;}
#block-topics .ttl{text-align:center;font-size:150px;color:rgba(255,255,255,0.05);position:relative;display:inline-block;font-style:italic;}
#block-topics .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;}

#block-topics .list-topics > li{border:1px solid #fff;border-left-width:8px;position:relative;}
#block-topics .list-topics > li + li{margin-top:40px;}
#block-topics .list-topics > li .list-contents{display:none;padding:20px 90px 60px;text-align:center;}
#block-topics .list-topics > li .list-ttl{font-size:28px;font-weight:bold;padding:28px 100px 28px 350px;position:relative;cursor:pointer;}
#block-topics .list-topics > li .list-ttl::before{content:"";display:block;width:186px;height:100%;background:no-repeat right center;background-size:cover;position:absolute;top:0;left:0;}
#block-topics .list-topics > li .list-ttl::after{content:"";display:block;width:50px;height:50px;background:rgba(255,255,255,0.1);position:absolute;top:50%;right:30px;transform:translateY(-50%);}
#block-topics .list-topics > li.active .list-ttl > span::after{opacity:0;transform:translateY(-50%);}
#block-topics .list-topics > li .list-ttl > span{display:block;width:100%;height:100%;}
#block-topics .list-topics > li .list-ttl > span::before{content:"";display:block;width:21px;height:1px;background:#fff;position:absolute;right:44px;top:50%;transform:translateY(-50%);}
#block-topics .list-topics > li .list-ttl > span::after{content:"";display:block;width:21px;height:1px;background:#fff;position:absolute;right:44px;top:50%;transform:translateY(-50%) rotate(90deg);transition:.3s ease;}
#block-topics .list-topics > li .list-ttl > span > small{font-size:26px;position:absolute;left:185px;top:50%;transform:translateY(-50%);}
#block-topics .list-topics > li .list-ttl > span > small span{font-size:48px;vertical-align:-6px;margin-left:10px;}
#block-topics .list-topics > li .list-subttl{background:#481e1a;color:#fff;text-align:center;font-size:24px;margin-bottom:20px;padding:15px;}
#block-topics .list-topics > li .list-children > li{position:relative;}
#block-topics .list-topics > li .list-children > li + li{margin-top:20px;position:relative;}
#block-topics .list-topics > li .list-children > li + li::before{content:"";display:block;width:96px;height:51px;background:url(/tech/smart_future_vision/img/technology/flow_arrow.png) no-repeat;background-size:100% auto;position:absolute;left:50%;top:-40px;margin-left:-48px;z-index:5;}
#block-topics .list-topics > li .list-children > li .list-img{position:relative;display:inline-block;}
#block-topics .list-topics > li .list-children > li .list-img .num{position:absolute;right:15px;bottom:15px;font-size:60px;line-height:1;}
#block-topics .list-topics > li .list-children > li .list-img::before{content:"";display:block;width:0;height:0;border-style:solid;border-width:0 0 150px 250px;border-color:transparent transparent #111 transparent;position:absolute;right:0;bottom:0;z-index:0;}

#block-topics .list-topics > li.item01,
#block-topics .list-topics > li.item02,
#block-topics .list-topics > li.item03{border-left-color:#f08b2e;}
#block-topics .list-topics > li.item04{border-left-color:#009ddd;}
#block-topics .list-topics > li.item05{border-left-color:#00a069;}
#block-topics .list-topics > li.item01 .list-ttl::before{background-image:url(/tech/smart_future_vision/img/technology/topics_thumb01.png);}
#block-topics .list-topics > li.item02 .list-ttl::before{background-image:url(/tech/smart_future_vision/img/technology/topics_thumb02.png);}
#block-topics .list-topics > li.item03 .list-ttl::before{background-image:url(/tech/smart_future_vision/img/technology/topics_thumb03.png);}
#block-topics .list-topics > li.item04 .list-ttl::before{background-image:url(/tech/smart_future_vision/img/technology/topics_thumb04.png);}
#block-topics .list-topics > li.item05 .list-ttl::before{background-image:url(/tech/smart_future_vision/img/technology/topics_thumb05.png);}
#block-topics .list-topics > li.item01 .list-children > li .list-img::before,
#block-topics .list-topics > li.item02 .list-children > li .list-img::before,
#block-topics .list-topics > li.item03 .list-children > li .list-img::before{border-bottom-color:#a26022;}
#block-topics .list-topics > li.item04 .list-children > li .list-img::before{border-bottom-color:#009ddd;}
#block-topics .list-topics > li.item05 .list-children > li .list-img::before{border-bottom-color:#00a069;}

/* -------------------------------------------------- */
/* #block-news */
/* -------------------------------------------------- */
#block-news .sub-ttl{font-size:30px;color:#fff;font-weight:bold;letter-spacing:0.04em;margin-bottom:40px;line-height:1.7;text-align:center;}
#block-news .ttl-year{font-size:48px;color:#fff;position:relative;margin-bottom:20px;}
#block-news .ttl-year::after{content:"";display:block;width:calc(100% - 3.2em);height:1px;background:#fff;position:absolute;right:0;top:50%;}
#block-news .list-news{display:flex;flex-wrap:wrap;margin-bottom:-40px;}
#block-news .list-news > li{width:30%;margin:0 5% 40px 0;color:#fff;border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom:20px;}
#block-news .list-news > li:nth-child(3n){margin-right:0;}
#block-news .list-news > li a{color:#fff;display:block;transition:.3s ease;}
#block-news .list-news > li a:hover{opacity:0.7;}
#block-news .list-news > li .img{margin-bottom:15px;position:relative;}
#block-news .list-news > li .img img{opacity:1;}
#block-news .list-news > li .img.movie::before{content:"";display:block;width:100%;height:100%;position:absolute;left:0;top:0;background:rgba(0,0,0,0.5);z-index:1;}
#block-news .list-news > li .img.movie::after{content:"";display:block;width:70px;height:70px;background:url(/tech/smart_future_vision/img/technology/icon_movie.png) no-repeat;background-size:100% auto;position:absolute;top:50%;left:50%;z-index:2;margin:-35px 0 0 -35px;transition:.25s ease;}
#block-news .list-news > li .img.movie:hover::after{transform:scale(1.2);}
#block-news .list-news > li .sub{display:flex;margin-bottom:10px;font-weight:normal;align-items:center;}
#block-news .list-news > li .sub .category{font-size:18px;background:#aaa;line-height:1;padding:4px 15px;}
#block-news .list-news > li .sub .category.project{background:#7b4fa7;}
#block-news .list-news > li .sub .category.work{background:#f08b2e;}
#block-news .list-news > li .sub .category.engineering{background:#019965;}
#block-news .list-news > li .sub .category.management{background:#009ddd;}
#block-news .list-news > li .sub .category.vision{background:#e34e91;}
#block-news .list-news > li .sub > * + *{margin-left:15px;padding-left:15px;position:relative;}
#block-news .list-news > li .sub > * + *::before{content:"";display:block;width:1px;height:50%;background:#ddd;position:absolute;left:0;top:25%;}
#block-news .list-news > li .sub .date{font-size:20px;}
#block-news .list-news > li .caption{font-size:13px;font-weight:normal;line-height:1.7;opacity:0.5;margin:8px 0 0 0;}
#block-news .list-news > li .ttl{font-size:18px;line-height:1.6;}

/* ======================================================================================================================= */
/* for SP */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:959px){
  /* -------------------------------------------------- */
  /* #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-topics */
  /* -------------------------------------------------- */
  #block-topics .ttl{font-size:100px;}
  #block-topics .ttl span{font-size:24px;}
  #block-topics .list-topics > li + li{margin-top:20px;}
  #block-topics .list-topics > li{border-left-width:6px;}
  #block-topics .list-topics > li .list-ttl{padding:15px 60px 15px 20px;font-size:20px;}
  #block-topics .list-topics > li .list-ttl::before{height:50px;width:120px;}
  #block-topics .list-topics > li .list-ttl::after{width:30px;height:30px;right:15px;}
  #block-topics .list-topics > li .list-ttl > span > small{position:static;transform:none;display:block;font-size:18px;padding-left:100px;line-height:1;margin-bottom:20px;}
  #block-topics .list-topics > li .list-ttl > span > small span{font-size:32px;vertical-align:-2px;}
  #block-topics .list-topics > li .list-ttl > span::before{width:17px;right:21px;}
  #block-topics .list-topics > li .list-ttl > span::after{width:17px;right:21px;}
  #block-topics .list-topics > li .list-contents{padding:5px 5% 5%;}
  #block-topics .list-topics > li .list-subttl{font-size:18px;margin-bottom:10px;padding:10px 15px;}
  #block-topics .list-topics > li .list-children > li + li::before{transform:scale(0.5);}
  #block-topics .list-topics > li .list-children > li .list-img .num{font-size:24px;right:10px;bottom:8px;}
  #block-topics .list-topics > li .list-children > li .list-img::before{border-width:0 0 70px 105px;}

  /* -------------------------------------------------- */
  /* #block-news */
  /* -------------------------------------------------- */
  #block-news .sub-ttl{font-size:4vw;margin-bottom:4vw;}
  #block-news .ttl-year{font-size:32px;margin-bottom:15px;}
  #block-news .list-news{display:block;margin-bottom:0;}
  #block-news .list-news > li{width:100%;margin:0;padding-bottom:15px;}
  #block-news .list-news > li + li{margin-top:15px;}
  #block-news .list-news > li .wrap.movie,
  #block-news .list-news > li .wrap:not(.movie) > a{display:flex!important;position:relative;}
  #block-news .list-news > li .wrap.movie > a:first-child{width:35%;margin-right:5%;}
  #block-news .list-news > li .wrap.movie > a:nth-child(2){flex:1;}
  #block-news .list-news > li .wrap.movie > a .img{width:100%;margin-right:0;}
  #block-news .list-news > li .img{width:35%;margin-right:5%;margin-bottom:0;}
  #block-news .list-news > li .inner{flex:1;}
  #block-news .list-news > li .ttl{font-size:14px;line-height:1.6;font-weight:normal;}
  #block-news .list-news > li .caption{display:none;}
  #block-news .list-news > li .sub .category{font-size:13px;padding:4px 10px 3px;}
  #block-news .list-news > li .sub .date{font-size:13px;font-weight:normal;}
  #block-news .list-news > li .sub > * + *{margin-left:10px;padding-left:10px;}
}