@charset "utf-8";
#notice {
    border: 1px solid #CCCCCC;
    padding: 20px 20px 10px;
    margin: 0 auto;
    width: 100%;
    max-width: 970px;
}
.notice-box {
	padding: 0 30px;
}
#notice .inner {
	padding: 0;
}
#notice .left {
	float:left;
}
#notice .right {
	float:right;
}
#notice .left .info_title{
	font-weight:bold;
	font-size:24px;
	margin-bottom:0px;
}
#notice .info {
	width: 95%;
	margin: 11px auto 0px;
	padding: 0 10px;
}
#notice .info .date,
#notice .info .content {
	margin: 0;
	float:left;
}
#notice .info .date {
	width: 15%;
}

#notice .info .content{
	    background: url(/content/dam/nttcom/hq/jp/personal/services/mobile/one/img/201712/icon_link01.png) no-repeat;
		background-position: left 5px;
		padding-left: 12px;
		width: 85%;
}

#notice .nav_list {
	margin: 0;
	padding: 0;
	width: 100%;
}

#notice .nav_list li a {
	padding: 7px 20px;
	color: #004795;
	border: 1px solid #004795;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	display: block;
	background: url(/content/dam/nttcom/hq/jp/personal/services/mobile/one/img/201712/icon_link01.png) no-repeat 9px center;
}

#notice .info a[target="_blank"]::after{
	content:"\20" url(/content/dam/nttcom/hq/jp/personal/services/mobile/one/img/icon_out2.png);
	width: 15px;
}


	@media screen and (max-width: 1064px) {
		#notice .info .date,
		#notice .info .content{
			width:100%;
		}
		#notice .nav_list li {
			margin: 0;
		}
		#notice .nav_list li a {
			margin: 0 auto;
			display: block;
		}
	}
	@media screen and (max-width: 768px) {
		#notice .nav_list {
			width: 100%;
		}
		#notice .info .date, #notice .info .content{
			display:block;
		}
		#notice .info{
			padding: 10px 0px 0px;
			margin:0px auto;
			width: 100%;
		}
		#notice .nav_list li a{
			margin: 0 auto;
		}
	}
	@media screen and (max-width: 480px) {
		.notice-box{
			padding:0 15px;
		}
		#notice .nav_list li {
			width: 100%;
			display: block;
		}
		#notice .info_title{
			margin-bottom:0px;
		}
		#notice .nav_list li a {
			margin:0px;
		}
		#notice .nav_list li:first-child a {
			margin-right: auto;
		}
		
	}
	@media screen and (max-width: 320px) {
		#notice .left{
			float:none;
		}
		#notice .right{
			float:none;
		}
		#notice .nav_list li a{
			display: initial;
		}
		#notice .nav_list li{
			text-align:center;
			margin:10px 0;
		}
	}