@charset "utf-8";

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

/* -------------------------------------------------- */
/* #block-development */
/* -------------------------------------------------- */
#block-development{background:url(/tech/smart_future_vision/img/back.jpg) no-repeat center center;background-size:cover;color:#fff;}
#block-development .lead{line-height:2.1;text-align:center;}
#block-development .lead2{font-size:26px;font-weight:bold;line-height:1.7;text-align:center;}
#block-development .img{text-align:center;}
#block-development .ttl{font-size:32px;font-weight:bold;text-align:center;margin-top:80px;margin-bottom:40px;overflow:hidden;}
#block-development .ttl span{display:inline-block;position:relative;}
#block-development .ttl span::before{content:"";display:block;width:100%;height:1px;position:absolute;top:50%;right:calc(100% + 30px);background:#fff;}
#block-development .ttl span::after{content:"";display:block;width:100%;height:1px;position:absolute;top:50%;left:calc(100% + 30px);background:#fff;}
#block-development .list-development{display:flex;text-align:center;flex-wrap:wrap;}
#block-development .list-development > li{width:calc((100% - 80px) / 3);margin:0 40px 40px 0;background:#fff;color:#161d25;}
#block-development .list-development > li > a{display:block;transition:.3s ease;}
#block-development .list-development > li > a img{opacity:1;}
#block-development .list-development > li > a:hover{opacity:0.7;}
#block-development .list-development > li:nth-child(3n){margin-right:0;}
#block-development .list-development > li .date{background:#161d25;font-size:24px;padding:10px;letter-spacing:0.05em;color:#fff;}
#block-development .list-development > li .list-inner{padding:0 30px 30px;}
#block-development .list-development > li .list-ttl{text-align:center;font-size:32px;font-weight:bold;line-height:1.2;margin:35px auto 10px;}
#block-development .list-development > li .list-ttl.en{font-size:42px;}
#block-development .list-development > li .list-ttl02{text-align:center;font-size:32px;font-weight:bold;line-height:1.2;margin:35px auto 10px;}
#block-development .list-development > li .list-ttl02 small{font-size:20px;margin-bottom:15px;display:block;}
#block-development .list-development > li .list-ttl02 .flex{display:flex;justify-content:center;align-items:center;width:100%;}
#block-development .list-development > li .list-ttl02 .flex img{width:70px;margin-right:20px;}
#block-development .list-development > li .list-ttl02 .flex span{font-size:22px;text-align:left;}
#block-development .list-development > li .list-txt{font-size:14px;padding-bottom:35px;}
#block-development .list-development > li .list-btn{padding-bottom:20px;margin-top:20px;}
#block-development .list-development > li .list-btn .common-btn01{min-width:1px;width:100%;padding-top:8px;padding-bottom:12px;}

/* projects */
#block-development .map-wrap{text-align:center;}
#block-development .map-inner{position:relative;text-align:center;}
#block-development .map{position:relative;}
#block-development .map .back{pointer-events:none;user-select:none;padding:100px 0 300px 0;}
#block-development .map .back img{max-width:78%;margin:auto;}
#block-development .projects{position:absolute;left:0;top:0;width:100%;height:100%;}
#block-development .projects .list-projects > li{display:inline-block;position:absolute;background:#fff;color:#161d25;width:260px;opacity:0;transform:translateY(20px);transition:.3s ease;}
#block-development .projects .list-projects > li > a{display:block;transition:.3s ease;}
#block-development .projects .list-projects > li > a img{opacity:1;}
#block-development .projects .list-projects > li > a:hover{opacity:0.7;}
#block-development .projects .list-projects > li::before{content:"";display:block;width:0;height:1px;background:#fff;position:absolute;}
#block-development .projects .list-projects > li .date{background:#161d25;font-size:20px;padding:5px 10px;letter-spacing:0.05em;color:#fff;}
#block-development .projects .list-projects > li .list-inner{padding:0 20px 20px;}
#block-development .projects .list-projects > li .list-ttl{text-align:center;font-size:24px;font-weight:bold;line-height:1.2;margin:20px auto 10px;}
#block-development .projects .list-projects > li .list-ttl.en{font-size:32px;}
#block-development .projects .list-projects > li .list-ttl02{text-align:center;font-weight:bold;line-height:1.2;margin:20px auto 10px;}
#block-development .projects .list-projects > li .list-ttl02 small{font-size:16px;margin-bottom:10px;display:block;}
#block-development .projects .list-projects > li .list-ttl02 .flex{display:flex;justify-content:center;align-items:center;width:100%;}
#block-development .projects .list-projects > li .list-ttl02 .flex img{width:60px;margin-right:20px;}
#block-development .projects .list-projects > li .list-ttl02 .flex span{font-size:20px;text-align:left;}
#block-development .projects .list-projects > li .list-txt{font-size:14px;padding-bottom:15px;}
#block-development .projects .list-projects > li .list-btn{padding-bottom:15px;margin-top:15px;}
#block-development .projects .list-projects > li .list-btn .common-btn01{min-width:1px;width:100%;padding-top:6px;padding-bottom:10px;padding-left:10px;padding-right:10px;}

/*
#block-development .projects .list-projects > li.nagoya{left:300px;top:50px;}
#block-development .projects .list-projects > li.nagoya::before{left:50%;top:100%;transform:rotate(70deg);transform-origin:left top;}
#block-development .projects .list-projects > li.omiya{right:0;top:0;}
#block-development .projects .list-projects > li.omiya::before{right:100%;bottom:50px;transform:rotate(-37deg);transform-origin:right top;}
#block-development .projects .list-projects > li.kawasaki{left:350px;bottom:50px;}
#block-development .projects .list-projects > li.kawasaki::before{left:50%;top:0;transform:rotate(-53deg);transform-origin:left top;}
#block-development .projects .list-projects > li.yokohama{right:0;top:540px;}
#block-development .projects .list-projects > li.yokohama::before{right:100%;top:80px;transform:rotate(-11.5deg);transform-origin:right top;}
#block-development .projects .list-projects > li.midosuji{left:0;top:200px;}
#block-development .projects .list-projects > li.midosuji::before{left:100%;bottom:50px;transform:rotate(43deg);transform-origin:left top;}
#block-development .projects .list-projects > li.changi{left:0;bottom:0;}
#block-development .projects .list-projects > li.changi::before{display:none;}
#block-development .projects .list-projects > li.changi .inner::before{display:none;}
#block-development .map-wrap.animated .projects .list-projects > li{opacity:1;transform:none;transition:.6s ease .2s;}
#block-development .map-wrap.animated .projects .list-projects > li::before{transition:.4s ease .8s;}
#block-development .map-wrap.animated .projects .list-projects > li.nagoya::before{width:208px;}
#block-development .map-wrap.animated .projects .list-projects > li.omiya::before{width:360px;}
#block-development .map-wrap.animated .projects .list-projects > li.kawasaki::before{width:220px;}
#block-development .map-wrap.animated .projects .list-projects > li.yokohama::before{width:290px;}
#block-development .map-wrap.animated .projects .list-projects > li.midosuji::before{width:255px;}
*/

#block-development .map .back{padding:400px 0 400px 0;}
#block-development .map .back img{max-width:61%;width:700px;}
#block-development .map-wrap .projects .list-projects > li:hover::before{background:#e6002d;}
#block-development .projects .list-projects > li.midosuji{left:0;top:0;}
#block-development .projects .list-projects > li.midosuji::before{left:50%;bottom:0;transform:rotate(51.2deg);transform-origin:left top;}
#block-development .projects .list-projects > li.nagoya{left:50%;top:0;margin-left:-130px;}
#block-development .projects .list-projects > li.nagoya::before{left:50%;top:100%;transform:rotate(98.5deg);transform-origin:left top;}
#block-development .projects .list-projects > li.yokohama{right:0;top:0;}
#block-development .projects .list-projects > li.yokohama::before{left:50%;top:100%;transform:rotate(136.5deg);transform-origin:left top;}
#block-development .projects .list-projects > li.changi{left:0;top:1000px;}
#block-development .projects .list-projects > li.changi::before{display:none;}
#block-development .projects .list-projects > li.changi .inner::before{display:none;}
#block-development .projects .list-projects > li.kawasaki{left:50%;top:1000px;margin-left:-130px;}
#block-development .projects .list-projects > li.kawasaki::before{left:50%;top:0;transform:rotate(-80deg);transform-origin:left top;}
#block-development .projects .list-projects > li.omiya{right:0;top:1000px;}
#block-development .projects .list-projects > li.omiya::before{left:50%;top:0;transform:rotate(-158.5deg);transform-origin:left top;}

#block-development .map-wrap.animated .projects .list-projects > li{opacity:1;transform:none;transition:.6s ease .2s;}
#block-development .map-wrap.animated .projects .list-projects > li::before{transition:width .4s ease .8s,opacity .4s ease .8s,background .3s ease;}
#block-development .map-wrap.animated .projects .list-projects > li.midosuji::before{width:550px;}
#block-development .map-wrap.animated .projects .list-projects > li.nagoya::before{width:420px;}
#block-development .map-wrap.animated .projects .list-projects > li.yokohama::before{width:580px;}
#block-development .map-wrap.animated .projects .list-projects > li.kawasaki::before{width:150px;}
#block-development .map-wrap.animated .projects .list-projects > li.omiya::before{width:455px;}

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

  /* -------------------------------------------------- */
  /* #block-development */
  /* -------------------------------------------------- */
  #block-development .list-development{display:block;}
  #block-development .list-development > li + li{margin-left:0;margin-top:30px;}
  #block-development .img{max-width:400px;margin:0 auto;}
  #block-development .lead2{font-size:20px;}
  #block-development .ttl{font-size:24px;margin-top:60px;margin-bottom:30px;}
  #block-development .list-development{display:block;}
  #block-development .list-development > li{width:100%;}
  #block-development .list-development > li .date{font-size:18px;}
  #block-development .list-development > li .list-inner{padding:0 15px 15px;}
  #block-development .list-development > li .list-ttl{font-size:28px;margin-top:25px;}
  #block-development .list-development > li .list-ttl02 small{font-size:18px;margin-bottom:10px;}
  #block-development .list-development > li .list-ttl02 img{max-width:110px;}
  #block-development .list-development > li .list-txt{padding-bottom:20px;}

  /* projects */
  #block-development .map .back{padding:0;}
  #block-development .map .back img{max-width:100%;}
  #block-development .projects{position:static;}
  #block-development .projects .list-projects > li{position:static;width:100%;margin-left:auto!important;margin-right:auto!important;}
  #block-development .projects .list-projects > li::before{display:none!important;}
  #block-development .projects .list-projects > li + li{margin-top:40px;}
  #block-development .projects .list-projects > li .list-btn .common-btn01{padding-top:12px;padding-bottom:16px;max-width:286px;}

}