@charset "Shift_JIS";

/* **************************************************

Name: ra.css

Create: 2021.10.27
update: 2022.09

Copyright 2021 Hitachi, Ltd.

***************************************************** */


@media screen and (max-width: 994px){
	.JS .GridSet {
		max-width: initial;
		overflow:hidden;
	}
}

/* TitleArea
======================================================== */

#NbTitle {
	background-image:none;
	background-color: #333333;
	min-height: 130px;
}

#NbTitle .NbIn {
	max-width: 965px;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 10px;
}
@media screen and (min-width: 995px) { /*2022.09追加*/
	#NbTitle .NbIn {
		max-width: 1275px;
	}
}

#NbTitle .SubTitle {
	color: #fff;
	margin: 0;
	padding: 0 16px 0 42px;
	font-size: 20px;
	text-align: left;
	font-weight: normal;
}

@media screen and (max-width: 767px) {
	#NbTitle .SubTitle {
		padding-left: 40px;
	}
}
@media screen and (max-width: 579px) {
	#NbTitle .SubTitle {
		padding-left: 16px;
		font-size: 16px;
	}
}

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

#NbTitle h1 span {
	font-size: 20px;
}

@media screen and (max-width: 767px) {
	#NbTitle h1 {
		font-size: 28px;
		padding-left: 40px;
	}
}

@media screen and (max-width: 579px) {
	#NbTitle h1 {
		font-size: 24px;
		padding-left: 16px;
	}
}

#NbDate {
	background-color: #630014;
}

#NbDate .NbDateIn {
	max-width: 965px;
	margin: 0 auto 60px;
	color: #ffffff;
	padding: 6px 16px;
}
@media screen and (min-width: 995px) { /*2022.09追加*/
	#NbDate .NbDateIn {
		max-width: 1275px;
	}
}
/* LeadeArea
======================================================== */

#LeadArea {
	margin-bottom: 60px;
}

#LeadArea .ImgOnlyStyle {
	position: relative;
	margin: 0;
	z-index: 2;
}
#LeadArea p img {
	margin-bottom: -5%;
}
.LeadText {
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
	background-color: #f2f2f2;
	margin: 0 auto;
	max-width: 97%;
	z-index: 3;
}

.LeadText p {
	padding: 24px;
	font-size: 16px;
}

.LinkTab {
	position: relative;
	margin: 0 auto;
	max-width: 97%;
	z-index: 1;
	display: flex;
	margin-top: -30px;
	justify-content: flex-end;
}

@media screen and (max-width: 767px) {
	.LinkTab {
		display: block;
		margin-top: -20px;
	}
}

.LinkTab li {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
	border: 1px solid #bbb;
	border-radius: 5px;
	padding: 20px 4px 4px;
	font-size: 14px;
}

@media screen and (max-width: 767px) {
	.LinkTab li {
		border-top:none;
		border-radius: 0 0 5px 5px;
		padding: 10px 16px 4px;
	}
}

.LinkTab a:link {
	text-decoration: none;
}

.LinkTab a:hover li {
	text-decoration: none;
	background-color: #b1000e;
	color:#fff;
}

.LinkTab li strong {
	color: #c02;
}

.LinkTab a:hover li strong {
	color: #fff;
}

.LinkTab li::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url(/products/it/lumada/images/icon/icon_link_right_hd.gif);
	background-size: contain;
	vertical-align: middle;
	margin: 0px 2px;
}

.LinkTab a:hover li::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url(/products/it/lumada/images/icon_ticker_next.png);
	background-repeat: no-repeat;
	background-position: right 3% center;
}




/* 
======================================================== */

@media screen and (max-width: 767px) {
	.JS h2 {
		margin-bottom: 24px;
	}
}

h2.nb001 {
	text-align: center;
	background: url(/products/it/lumada/spcon/nb/images/bg_title_img.png) no-repeat;
	color: #fff;
	padding: 20px;
	background-size: cover;
	margin: 36px 0;
	font-size: 160%;
}
h2.nb002 {
	text-align: center;
	background: url(/products/it/lumada/spcon/nb/images/bg_title_img_02.png) no-repeat;
	color: #fff;
	padding: 20px;
	background-size: cover;
	margin: 36px 0;
	font-size: 160%;
}
@media screen and (max-width: 767px) {
	h2.nb001,
	h2.nb002 {
		font-size: 130%;
	}
}

.PersonIntroL {
	display: flex;
	justify-content: center;
	margin-bottom: 36px;
}
.PersonIntroR {
	display: flex;
	justify-content: center;
	flex-direction: row-reverse;
	margin-bottom: 36px;
}

.PersonIntroL p,
.PersonIntroR p{
	margin:0;
}

@media screen and (max-width: 579px) {
	.PersonIntroL,
	.PersonIntroR {
		display: block;
	}
}

.TextArea {
	max-width: 935px;
	margin: 0 auto;
}
@media screen and (min-width: 995px) { /*2022.09追加*/
	.TextArea {
		max-width: 1245px;
		padding: 0 16px;
	}
}
@media screen and (max-width: 994px) {
	.TextArea {
		padding: 0 16px;
		}
}

.TextArea .TextStyle1 {
	font-size: 100%;
}

.ImgOnlyStyle {
	margin-bottom: 32px;
}

@media screen and (max-width: 579px) {
	br.sp-hid {
		display: none;
	}
}

#nextBtnArea .nextBtn a {
	width:60%;
	text-align:center;
	margin: 40px auto;
	border: double 3px #fff;
	border-radius:8px;
	display: flex;
	align-content: center;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	font-size:100%;
}

@media screen and (max-width: 767px) {
	#nextBtnArea .nextBtn a {
		width:80%;
	}
}
@media screen and (max-width: 579px) {
	#nextBtnArea .nextBtn a {
		display: block;
	}
}

#nextBtnArea .ButtonStyle1 a {
	background-position: right 2% center;
}

#nextBtnArea .nextBtn a:link,
#nextBtnArea .nextBtn a:visited {
	background-color: #9f0000;
	padding: 12px 36px 12px 16px;
}

#nextBtnArea .nextBtn a:hover {
	background-color: #630014;
	padding: 12px 36px 12px 16px;
}

#nextBtnArea .nextBtn span.vol {
	display: block;
	margin-right:8px;
	background-color: #fff;
	padding:4px 8px;
	color: #C10100;
	width: 45%;
}
@media screen and (max-width: 579px) {
	#nextBtnArea br.sp-hid {
		display: none;
	}
	#nextBtnArea .nextBtn span.vol {
		margin-bottom:8px;
		width: 100%;
	}
}


/* LinkArea
======================================================== */

#LinkArea .Section {
	margin-bottom: 30px;
}
@media screen and (min-width: 995px) { /*2022.09追加*/
	#LinkArea {
		padding:0 16px ;
	}
}
@media screen and (max-width: 994px) {
	#LinkArea {
		padding:0 16px ;
	}
}

.BoxPatternA  {
	clear: both;
	margin: 0 0 15px;
	padding: 0 0 5px 0;0
	background-color: #f2f2f2;
}

.BoxPatternA h2 {
	min-height: 20px;
	margin: -15px 0 15px;
	padding: 8px 15px;
	font-size: 96%;
	font-weight: normal;
	color: #fff;
	line-height: 130%;
	border: none;
	background-color: #657892;
}

.BoxPatternB h2 {
	min-height: 20px;
	margin: -15px 0 15px;
	padding: 8px 15px;
	font-size: 96%;
	font-weight: normal;
	color: #fff;
	line-height: 130%;
	border: none;
	background-color: #984f4e;
}

.BoxPatternB {
	padding-top: 0;
}

.BoxPatternC a:hover img {
	opacity: 0.8;
}


.BoxPatternA p, .BoxPatternA ul, .BoxPatternA dl, 
.BoxPatternB p, .BoxPatternB ul, .BoxPatternB dl, 
.BoxPatternC p, .BoxPatternC ul, .BoxPatternC dl {
	font-size: 100%;
}

.BoxPatternA p.TextStyle2, .BoxPatternA ul.LinkListStyle2 {
	font-size: 90%;
}

.BoxPatternC ul {
	text-align: right;
}

/*--LinkBnnerNb--*/

#LinkBnnerNb ul{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}
@media screen and (max-width: 767px) {
	#LinkBnnerNb ul{
		display: block;
		margin: 0 auto;
	}
}

#LinkBnnerNb li{
	width: 90%;
	height: 65%;
	padding: 24px;
	text-decoration: none;
	font-size: 14px;
}
@media screen and (max-width: 767px) {
	#LinkBnnerNb li{
		width: auto;
		height: 100%;
		padding: 24px 0 24px 20px;
		margin-bottom: 24px;
	}
}
#LinkBnnerNb a {
	width: 48%;
}
@media screen and (max-width: 767px) {
	#LinkBnnerNb a {
		width: 100%;
	}
}

#LinkBnnerNb ul a li.clbo {
	background: url(/products/it/lumada/spcon/images/link_bnr_01.png) no-repeat;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right;
}

#LinkBnnerNb ul a li.clbo span{
	font-size: 160%;
}

#LinkBnnerNb ul a li.spcon {
	background: url(/products/it/lumada/spcon/images/link_bnr_00.png) no-repeat;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right;
}
@media screen and (max-width: 767px) {
	#LinkBnnerNb ul a li.spcon {
		padding: 42px 0 42px 20px;
	}
}

#LinkBnnerNb ul a li.spcon span {
	position: relative;
	top: 35%;
	font-size: 160%;
}

#LinkBnnerNb a:link,
#LinkBnnerNb a:visited {
	text-decoration: none;
	color:#fff;
}

#LinkBnnerNb a:hover li {
	text-decoration: none;
	color:#fff;
	opacity: 0.8;
}


/* 2023.04.13 */
br.pc-hid {
	display: none;
}
@media screen and (max-width: 579px) {
	br.pc-hid {
		display: block;
	}
}