@charset "Shift_JIS";

/*ページタイトル*/
#overviewTitle{
background-image:none;
background-color:#333333;
margin:0 0 20px 0;
padding:20px;
}

#overviewTitle .OvIn{
max-width: 1275px;
margin: 0 auto;
padding-bottom: 10px;
}

#overviewTitle h1{
color: #ffffff;
font-size: 30px;
font-weight: bold;
line-height: 1.3em;
margin: 0;
padding: 16px 16px 10px 40px;
}

/*事例・記事リスト*/
.MainContents ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}

.MainContents ul:after{
display:block;
content:'';
width:calc(100% / 3 - 20px);
}

.MainContents ul li{
display:flex;
width:calc(100% / 3 - 20px);
box-shadow:0px 4px 13px rgba(83, 86, 90, 0.18);
margin-bottom:40px;
}

.MainContents ul li a{
display: block;
color:#333;
text-decoration:none;
}

.MainContents ul li a:hover{
color:#145595;
}

.MainContents ul li a:hover .thumb img{
opacity:0.7;
}

.MainContents ul li .thumb{
margin-bottom:16px;
}

.MainContents ul li .thumb img{
width:100%;
border-bottom:1px solid #c9c9c9;
}

.MainContents ul li a:hover img{
opacity:0.7;
}

.MainContents ul li .summary{
padding:0 16px 24px 16px;
}

.MainContents ul li .summary p.title{
font-weight:bold;
}

.MainContents ul li .summary p{
font-size:90% !important;
margin-bottom:0;
}

.MainContents ul li .summary dl{
display:flex;
justify-content:space-between;
margin-bottom:8x;
}

.MainContents ul li .summary dl dd{
font-size:12px;
}

.MainContents ul li .summary .NewWin{
margin-bottom:0 !important;
}

.MainContents ul li .summary .NoWin::after{
content: '';
display: inline-block;
width: 16px;
height: 16px;
background-image: url(/products/it/lumada/spcon/generative_ai/images/carousel/icon_s_arrow05.png);
background-size: contain;
vertical-align: middle;
margin: 0px 2px;
}

.MainContents ul li .summary .NewWin::after{
content: '';
display: inline-block;
width: 16px;
height: 16px;
background-image: url(/products/it/lumada/spcon/generative_ai/images/carousel/icon_new_window_hd02.png);
background-size: contain;
vertical-align: middle;
margin: 0px 2px;
}

.MainContents ul li .summary .Movie::after{
content: '';
display: inline-block;
width: 16px;
height: 16px;
background-image: url(/products/it/lumada/spcon/generative_ai/images/carousel/icon_movie_navy.png);
background-size: contain;
vertical-align: middle;
margin: 0px 2px;
}

/*レスポンシブ*/
@media screen and (max-width: 579px){
#overviewTitle h1{
font-size:24px;
padding-left:16px;
}
}

@media screen and (max-width: 767px){
.MainContents ul li{
width:calc(100% / 2 - 10px);
}
}

@media screen and (max-width: 579px){
.MainContents ul{
display:block
}
.MainContents ul li{
width:100%;
}
}


/*---- LinkArea ----*/

#LinkArea {
	margin-top:80px;
	margin-bottom:80px;
}


span.BorderLine {
	display:block;
	margin-bottom:80px;
	height: 1px;
	border-radius: 1px;
	background-image: -webkit-gradient(linear, left top, right top, from(#0A2957), to(#51B4DC));
	background-image: -webkit-linear-gradient(left, #0A2957 0%, #51B4DC 100%);
	background-image: linear-gradient(to right, #0A2957 0%, #51B4DC 100%);
}



#LinkArea ul {
	display: flex;
}
@media screen and (max-width: 767px) {
	#LinkArea ul {
		display: block;
	}
}
#LinkArea ul li{
	display:flex;
	width: 25%;
	border-top: 1px solid #C6C6C6;
	border-left: 1px solid #C6C6C6;
	border-bottom: 1px solid #C6C6C6;
	box-sizing: border-box;
	align-self: stretch;
}
#LinkArea ul li:last-child{
	border-right: 1px solid #C6C6C6;
}
@media screen and (max-width: 767px) {
	#LinkArea ul li{
		display:flex;
		width: 100%;
		border:none;
		border-bottom: 1px solid #C6C6C6;
	}
	#LinkArea ul li:first-child {
		border-top: 1px solid #C6C6C6;
	}
	#LinkArea ul li:last-child{
		border-right: none;
	}
	#LinkArea ul li img {
		width: 100%;
	}
}
#LinkArea ul li a {
	display: block;
	padding: 12px;
	text-decoration: none;
}

#LinkArea ul li a:link,
#LinkArea ul li a:visited {
	color: #333333;
}

#LinkArea ul li a:hover,
#LinkArea ul li a:active {
	color:#145595;
}

#LinkArea ul li a:hover img,
#LinkArea ul li a:visited img {
	opacity:0.7;
}

#LinkArea ul li img {
	width: 100%;
}

#LinkArea ul li dl {
	margin: 24px 0 12px ;
}

#LinkArea ul li dl dt {
	font-weight: bold;
	font-size: 22px;
	margin-bottom: 20px;
	line-height: 1.2em;
}

#LinkArea ul li dl dt span{
	font-size: 16px;
}

#LinkArea ul li dl dt::after {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url(/products/it/lumada/images/icon_s_arrow05.png);
	background-size: contain;
	vertical-align: middle;
	margin: 0px 8px;
}