@charset "UTF-8";
.banner_link{
	display: block;
}
.banner_block img{
	width: 100%;
}
.banner_block .banner_link{
	overflow: hidden;
}
.banner_block .banner_link .link_inner{
	background: url(/content/dam/nttcom/hq/jp/business/sdpf/service/nodeai/img/bg.png) no-repeat top left #09134c;
	padding: 25px 30px 10px;
}
.banner_block .banner_link:hover .link_inner{

	transition: all .25s;
	transform: scale(1.05,1.05);
}
.banner_block .title_area{
	padding-left: 170px;
}
.banner_block .title_area .title{
	display: flex;
	border-bottom: 2px solid #fff;
	padding-bottom: 15px;
}
.banner_block .title_area .title p{
	width: 33.333%;
}
.banner_block .read_area{
	padding-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center; 
}
.banner_block .read_area p{
	color: #aa9673;
	font-weight: bold;
	font-size: 15px;
}
.banner_block .read_area .detail_txt{
	width: 130px;
}
.banner_block .read_area .detail_txt span {
	position: relative;
	background-color:#aa9673;
	color: #09134c;
	font-size: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	height: 30px;
	width: 100%;
	padding:0 5px 0 10px;
}

.banner_block .read_area .detail_txt span::before {
	content: '';
	position: absolute;
	top: 0;
	right: -10px;
	border-top: solid 15px transparent;
	border-bottom: solid 15px transparent;
	border-left: solid 10px #aa9673;
}
.banner_block .main_txt01{
	color: #fff;
	font-weight: bold;
	text-align: center;
	font-size: 20px;
	margin-top: 30px;
}
.banner_block .main_txt02{
	color: #d4ba80;
	font-weight: bold;
	text-align: center;
	margin-top: 10px;
}
.banner_block .merit_block{
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}
.banner_block .merit_block .merit_item{
	background: #fff;
	border-radius: 10px;
	padding: 20px 12px 15px;
	width: 32%;
	text-align: center;
}
.banner_block .merit_block .merit_item .img{
	width: 94px;
	margin: 0 auto 12px;
}
.banner_block .merit_block .merit_item .ttl{
	color: #0e367d;
	font-weight: bold;
	font-size: 20px;
}
.banner_block .merit_block .merit_item .txt{
	color: #000;
	text-align: left;
	margin-top: 20px;
}
.banner_block .merit_block .merit_item .txt span{
	color: #69b4ff;
}
.banner_block .note{
	margin: 0;
	padding: 10px 30px 25px;
	background: #09134c;
}
.banner_block .note p{
	color: #fff;
	text-indent: -1em;
	padding-left: 1em;
}
.banner_block .note p a{
	color: #fff;
}
@media screen and (max-width: 768px) {
	.banner_block .banner_link .link_inner{
		background: #09134c;
	}
	.banner_block .title_area{
		padding-left: 0;
	}
	.banner_block .read_area{
		display: block;
	}
	.banner_block .read_area p{
		text-align: center;
	}
	.banner_block .read_area .detail_txt {
		margin: 10px auto 0;
	}
	.banner_block .merit_block{
		display: block;
	}
	.banner_block .merit_block .merit_item{
		width: 100%;
		margin-bottom: 10px;
	}
	.banner_block .main_txt01{
		font-size: 18px;
	}
}

/*2022.12*/
/*文字色変更*/
.banner_block .read_area p {
	color: #D4BA80;
}
.banner_block .read_area p {
	color: #D4BA80;
}
/*詳しくはこちら*/
.banner_block .detail_txt span{
	color: #09134c;
	text-decoration: none;
	margin:0 !important;
	border-bottom:none !important;
}
/* ノート内リンク */
.banner_block .note a{
	margin: 0!important;
	text-decoration: underline;
}
/*フリートライアルボタン*/
.banner_block .btn_freetrial{
	margin:15px 0 0 0;
}
.banner_block .btn_freetrial{
	display:flex;
	align-items: center;
	justify-content: center;
	background-color:#B59E80;
	border-radius:5px;
	color:#09134C;
	font-size:14px;
	font-weight:bold;
	line-height:1.4;
	letter-spacing :-0.05em;
	text-align:center;
	padding:10px;
}
@media screen and (max-width: 768px){
	.banner_block .btn_freetrial,
	.banner_block .btn_freetrial span{
		display:block;
	}
	.banner_block .btn_freetrial span.arrow{
		display:inline-block;
	}
}
.banner_block .btn_freetrial .fs20{
	font-size:20px;
}
.banner_block .btn_freetrial .fs16{
	font-size:16px;
}
/*矢印*/
.arrow{
	position: relative;
	display: inline-block;
	padding: 0 16px 0 0;
	vertical-align: middle;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.arrow::before{
	right: 0;
	width: 10px;
	height: 2px;
	background: #09134C;
}
.arrow::after{
	right: 0;
	width: 10px;
	height: 10px;
	border-top: 2px solid #09134C;
	border-right: 2px solid #09134C;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}