@charset "utf-8";
/* -------------------------------------------------------
	solution
------------------------------------------------------- */
/* sub-title
------------------------------------------------------- */
.sub-title{
 width:100%;
 max-width: 1120px;
 padding:45px 25px 55px;
 margin: 0 auto;
}
.sub-title ul.title{
 width:100%;
 height:320px;
 display: flex;
 align-items: center;
 background-color: #f5f7f8;
}
.sub-title ul.title li.photo{
 width:50%;
 height:100%;
}
.sub-title ul.title li.photo.traffic{
 background: url(../../image/solution/traffic_title.png) no-repeat right 66% bottom 35%;
 background-size: cover;
}
.sub-title ul.title li.photo.road{
 background: url(../../image/solution/road_title.png) no-repeat right 34% top 56%;
 background-size: cover;
}
.sub-title ul.title li.text{
 width:50%;
 padding:0 5%;
}
.sub-title ul.title li.text h2{
 display: inline-block;
 padding-bottom:6px;
 font-size: 2.6rem;
 font-weight: 500;
 line-height: 1.4;
 letter-spacing: 5px;
 border-bottom: 2px solid #0e3447;
}
.sub-title ul.title li.text p{
 margin-top:20px;
 font-weight: 500;
}
.sub-title ul.title li.text sup{
 font-size: 1.2rem;
 vertical-align: top;
}
.sub-title ul.notes{
 margin-top:15px;
}
.sub-title ul.notes li{
 text-indent: -1.9em;
 padding-left: 2em;
 font-size: 1.2rem;
 color: #758891;
 line-height: 1.4;
}
.sub-title ul.notes li + li{
 margin-top:5px;
}
/*  sp(767px以下)  ----------- */
@media screen and (max-width:767px) {
 .sub-title{
  width:100%;
  max-width: 100%;
  padding:0;
 }
 .sub-title ul.title{
  width:100%;
  height:auto;
  display: block;
  align-items: center;
  background-color: #f5f7f8;
 }
 .sub-title ul.title li.photo{
  width:100%;
  height:220px;
 }
 .sub-title ul.title li.text{
  width:100%;
  padding:25px 5% 10px;
 }
 .sub-title ul.title li.text h2{
  display: inline-block;
  padding-bottom:4px;
  font-size: 2rem;
  letter-spacing: 4px;
 }
 .sub-title ul.notes{
  margin:0;
  padding:0 5% 25px;
  background-color: #f5f7f8;
 }
}

/* contents
------------------------------------------------------- */
.cont-wrap{
 width:100%;
 max-width: 1120px;
 padding:0 25px;
 margin: 0 auto;
}
h3{
 padding-left: 30px;
 font-size: 2.6rem;
 font-weight: 500;
 line-height: 1.4;
 letter-spacing: 2px;
 position: relative;
}
h3::before{
 content: "";
 display: block;
 width:2px;
 height: 28px;
 background-color: #0f90d1;
 position: absolute;
 left:0;
 top:6px;
}
h4{
 margin-bottom: 15px;
 padding-left:26px;
 font-size: 2rem;
 font-weight: 500;
 line-height: 1.4;
 letter-spacing: 2px;
 position: relative;
}
h4::before{
 content: "";
 width:12px;
 height:2px;
 background-color: currentColor;
 position: absolute;
 left:0;
 top:12px;
}
h4 .movie_link_icon{
 display: inline-block;
 vertical-align: top;
 height: 1em;
 aspect-ratio: 1 / 0.65;
 background: url(/common/image/icon_movie.svg) no-repeat center / contain;
 margin: 0.2em 0 0 2rem;
}
h4 .movie_link_text{
	font-size: 1.5rem;
	font-weight: normal;
	display: inline-block;
	vertical-align: top;
	margin-top: 3px;
	margin-left: 8px;
}
p.credit{
 font-size: 1.2rem;
 color: #758891;
 line-height: 1.2;
 letter-spacing: 0;
 height: auto;
 position: absolute;
 top: 289px;
 right: 0;
 width: calc(100% - 570px);
}
/*  sp(767px以下)  ----------- */
@media screen and (max-width:767px) {
 .cont-wrap{
  max-width: 100%;
  margin-top: 30px;
  padding:0 5%;
 }
 h4{
  padding-left: 20px;
  font-size: 1.7rem;
 }
 p.credit{
  font-size: 1.1rem;
  position: static;
  width: 100%;
  margin: 6px 0 0;
 }
}

/* scene-list
------------------------------------------------------- */
ul.scene-list{
}
ul.scene-list li{
 width: 100%;
 margin: 44px 0 0;
 position: relative;
 padding-right: calc(100% - 570px);
 min-height: 338px;
 border-bottom: solid 1px #c2c2c2;
}
ul.scene-list li img{
 width: calc(100% - 570px);
 height: auto;
 position: absolute;
 top: 5px;
 right: 0;
}
ul.scene-list p.text{
 padding: 5px 70px 0 0;
 font-size: 14px;
 line-height: 1.6;
}
ul.scene-list p.text span{
	color: #758080;
	font-size: 12px;
	display: block;
	margin: 15px 0 0;
}
ul.scene-list div.link {
	padding: 74px 0 0;
}
ul.scene-list div.link a {
	font-size: 15px;
	font-weight: 600;
	padding: 2px 44px 2px 0;
	text-decoration: none;
	border-bottom: solid 1px #0f90d1;
	color: #0f90d1;
	position: relative;
	display: block;
	width: 290px;
	margin: 0 0 15px;
}
ul.scene-list div.link a::after {
	content: '';
	position: absolute;
	top: 15px;
	right: 0;
	width: 31px;
	height: 6px;
	mask: url(/common/image/arrow.svg) no-repeat center / contain;
	background: #0f90d1;
}
.link-btn{
 width:100%;
 padding-top:30px;
 text-align: center;
}
/*  sp(767px以下)  ----------- */
@media screen and (max-width:767px) {
 ul.scene-list{
  display: block;
 }
 ul.scene-list li{
  width: 100%;
  max-width:100%;
  margin: 20px 0 0;
  padding: 0 0 40px;
 }
 ul.scene-list li + li{
  margin: 40px 0 0;
 }
 ul.scene-list p.text{
  font-size: 1.5rem;
  padding: 15px 0 0;
 }
 ul.scene-list li img{
  width:100%;
  max-width: 100%;
  position: static;
 }
	ul.scene-list div.link {
	padding: 26px 0 0;
}
}

/* provide-list
------------------------------------------------------- */
ul.provide-list > li{
 margin-top: 40px;
}
ul.provide-list >  li + li{
 margin-top: 60px;
}
ul.provide-list >  li .image{
 display: block;
 margin-top: 25px;
}
.image-dsbd{
 display: block;
 margin-top: 25px;
 position: relative;
}
.image-dsbd ul{
 display: flex;
 justify-content: center;
 background-color: #f5f7f8;
 padding:25px 0;
 border-radius: 8px;
}
.image-dsbd ul li{
 width:44%;
 max-width: 402px;
}
.image-dsbd li img{
 width:100%;
 max-width: 402px;
 height: auto;
}
.image-dsbd ul li + li{
 width:47.3%;
 margin-left:8%;
 max-width: 433px;
}
.image-dsbd li + li img{
 max-width: 433px;
}
.image-dsbd .graph{
 display: block;
 position: relative;
 top:-15px;
}
@media screen and (max-width:990px) {
 .image-dsbd ul li + li{
  margin-left:4%;
 }
}
/*  sp(767px以下)  ----------- */
@media screen and (max-width:767px) {
 ul.provide-list > li{
  margin-top: 20px;
 }
 ul.provide-list >  li + li{
  margin-top: 4 0px;
 }
 ul.provide-list >  li .image{
  display: block;
  margin-top: 15px;
 }
 .image-dsbd{
  margin-top: 15px;
 }
 .image-dsbd ul{
  display: block;
  padding:25px 4%;
 }
 .image-dsbd ul li{
  width:100%;
  max-width: 100%;
 }
 .image-dsbd ul li + li{
  width:100%;
  max-width: 100%;
  margin:20px 0 0;
 }
 .image-dsbd li img{
  width:100%;
  max-width: 100%;
 }
 .image-dsbd li + li img{
  max-width: 100%;
 }
 .image-dsbd .graph{
  top:0;
 }
}