@charset "UTF-8";


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

Name: rd2.css

Description: Special Setting for RD

Create: 2014.6.11

Update: 8888.88.88

Copyright 2014 Hitachi, Ltd.


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

/*---navigation modify---*/
#GlobalNaviTop {
	font-size: 90%;
}
#GlobalNaviTop li div.NaviItem {
	line-height: 2.5;
}
#HorizontalLocalNavi {
	font-size: 90%;
}
#HorizontalLocalNavi li div.NaviItem {
	line-height: 2.5;
}

ul.LinkListStyle1.TitleLink {
	font-size:100%;
	margin:-15px 0 15px;
}


/* [s5] Breadcrumb Trail
=========================================================================================== */

#TopicPath ul li.TopicTitle {
	word-break: normal;
}


/* ---コンテンツエリア横幅最大1275px---

=========================================================================================== */
div.RdContentsWidthWide {
    max-width: 1275px;
    margin: 0 auto;
}


/* ---横幅を最大700pxに制限---
2020/02/14 700px から 720px から 965px へ変更
=========================================================================================== */
div.RdGeneralWrap {
    width: 965px;
    margin: auto;
}
div.RdGeneralWrap .ImgOnlyStyle img {
  max-width: 100%;
  height: auto;
}

@media screen and (min-width :995px) and (max-width: 1304px) {
	.OptionWideRWD div.RdGeneralWrap {
		width: auto;
		max-width: 965px;
	}
	.OptionWideRWD div.RdGeneralWrap .ColumnSet {
		width: auto;
		margin: 0 0 0 -15px;
	}
}
@media screen and (max-width: 994px) {
	.JS div.RdGeneralWrap {
		width: auto;
		max-width: 965px;
	}
	.JS div.RdGeneralWrap .ColumnSet {
		width: auto;
		margin: 0 0 0 -15px;
	}
}
@media screen and (max-width: 767px) {
    div.RdGeneralWrap {
        width: auto;
    }
}


/* ---2段カラム---

=========================================================================================== */
.RdGeneralColumn2 {
	columns: 2;
	column-rule: 1px solid #cdcdcd;
	column-gap: 2.5em;
    margin: 0 0 10px;
}
@media screen and (max-width: 965px) {
    .RdGeneralColumn2 {
	    columns: 1;
        margin: 0 0 0;
    }
}


/* Column for 965px
=========================================================================================== */

.RdColumnSet {
	width: 100%;
}
.RdColumnSet:after {
	content: "";
	display: block;
	clear: both;
}

.RdColumn1 {
	float: left;
	width: 230px;
	margin: 0 0 0 15px;
}

.RdColumn1andthird {
	float: left;
	width: 311px;
	margin: 0 0 0 15px;
}

.RdColumn2 {
	float: left;
	width: 475px;
	margin: 0 0 0 15px;
}

.RdColumn3 {
	float: left;
	width: 720px;
	margin: 0 0 0 15px;
}

.RdColumn1.FirstItem,
.RdColumn1andthird.FirstItem,
.RdColumn2.FirstItem,
.RdColumn3.FirstItem {
	margin: 0;
}

@media screen and (min-width :995px) and (max-width: 1304px) {

	.OptionWideRWD .RdColumnSet {
		width: auto;
		margin: 0 0 0 -15px;
	}

	.OptionWideRWD .RdColumn1 {
		width: 25%;
		margin: 0;
		padding: 0 0 0 15px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
	}

	.OptionWideRWD .RdColumn1andthird {
		width: 33.33333333%;
		margin: 0;
		padding: 0 0 0 15px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
	}

	.OptionWideRWD .RdColumn2 {
		width: 50%;
		margin: 0;
		padding: 0 0 0 15px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
	}

	.OptionWideRWD .RdColumn3 {
		width: 75%;
		margin: 0;
		padding: 0 0 0 15px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
	}

}

@media screen and (max-width: 994px) {
	.JS .RdColumnSet {
		width: auto;
		margin: 0 0 0 -15px;
	}

	.JS .RdColumn1 {
		width: 25%;
		margin: 0;
		padding: 0 0 0 15px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
	}

	.JS .RdColumn1andthird {
		width: 33.33333333%;
		margin: 0;
		padding: 0 0 0 15px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
	}

	.JS .RdColumn2 {
		width: 50%;
		margin: 0;
		padding: 0 0 0 15px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
	}

	.JS .RdColumn3 {
		width: 75%;
		margin: 0;
		padding: 0 0 0 15px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
	}
}

@media screen and (max-width: 767px) {
	.JS .RdColumn1,
	.JS .RdColumn1andthird,
	.JS .RdColumn2,
	.JS .RdColumn3 {
		float: none;
		width: auto;
	}
	.JS .RdColumn1:after,
	.JS .RdColumn1andthird:after,
	.JS .RdColumn2:after,
	.JS .RdColumn3:after {
		content: "";
		display: block;
		clear: both;
	}
	.JS .ImgHeadingSet .RdColumn1 {
		float: left;
		width: 33.33333333%;
	}
	.JS .ImgHeadingSet .RdColumn1:nth-child(4) {clear: both;}
    
    .JS .ImgHeadingSet .RdColumn1andthird {
		float: left;
		width: 50%;
	}
    .JS .ImgHeadingSet .RdColumn1andthird:nth-child(3) {clear: both;}
}

@media screen and (max-width: 579px) {
	.JS .ImgHeadingSet .RdColumn1 {width: 50%;}

	.JS .ImgHeadingSet .RdColumn1:nth-child(3) {clear: both;}

	.JS .ImgHeadingSet .RdColumn1:nth-child(4) {clear: none;}
}

@media screen and (max-width: 399px) {
	.JS .ImgHeadingSet .RdColumn1,
    .JS .ImgHeadingSet .RdColumn1andthird {
		float: none;
		width: auto;
	}
}


/*---text decoration---*/

.RdCenter {
text-align:center;
}
.RdBlockWord {
white-space:nowrap;
}
span.RdSpeaker {
font-weight:bold;
color: #001b70;
margin-right:15px;
}
span.RdSpeaker2{
	color: #001b70;
	margin-right:15px;
	font-size: 130%;
	font-weight: normal;
}

/* ---[c3-1-1] paragraph > font size:90%(small margin)--- */
/* ---[c3-2-1] paragraph > Right align > font size:90%(small margin)--- */
p.RdTextStyle1 {
margin: 0 0 5px;
font-size: 90%;
line-height: 1.5;
}

p.RdTextStyle1 a { line-height: 1.5; }

/* ---[c3-1-2] paragraph > font size:83%(small margin)--- */
/* ---[c3-2-2] paragraph > Right align > font size:83%(small margin)--- */
p.RdTextStyle2 {
margin: -10px 0 8px;
font-size: 83%;
line-height: 1.5;
}

p.RdTextStyle2 a { line-height: 1.5; }

h2.RdBgNone {
background: none;
}
h2.midashi {
font-size: 26px;
background-image: none;
}
p.midashi_text {
font-size: 15px;
margin-bottom: 30px;
}

/*---Social Network---*/
.RdSocial {
margin-bottom: 20px;
}

.RdSocial div {
display:inline-block;
	padding-left: 10px;
	float: right;
}

.RdSocial div.Facebook,
.RdSocial div.Linkedin,
.RdSocial div.Twitter,
.RdSocial div.Hatena,
.RdSocial div.Line {
width:auto;
}

.RdSocial div.Googleplus {
width:60px;
}

.fb_iframe_widget > span {
vertical-align: baseline !important;
}

#RdFollowingSocialbuttons {
	display: none;
	position:fixed;
	left: 0;
	right: 0;
	background-color: rgba(255,255,255,0.7);
	z-index: 100;
}

@media print {
	.RdSocial {
		display: none;
	}
}

/*---image decoration---*/

img.RdArchiveListImg{
vertical-align:top;
}

img.RdImgBorder1 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #eeeeee;
border-right-color: #888888;
border-bottom-color: #888888;
border-left-color: #eeeeee;
}

img.RdImgBorder2 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #888888;
border-right-color: #888888;
border-bottom-color: #888888;
border-left-color: #888888;
}


/* --- [c6-xx] 2Image Left and Right --- */

.Rd2ImgLeftSide {
float: left;
margin: 0 0 0 0;
text-align: left;
}

.Rd2ImgRightSide {
float: right;
margin: 0 0 0 0;
text-align: left;
}

.Rd2ImgLeftSide .ImgOnlyStyle,
.Rd2ImgRightSide .ImgOnlyStyle {margin: 0 0 10px;}

.JS .RdImgLeftAdjustClear {
	float: left !important;
	margin: 0 20px 0 0 !important;
}

.JS .RdImgRightAdjustClear {
	float: right !important;
	margin: 0 0 0 20px !important;
}
.JS .RdImgRightAdjustClear {
	float: right !important;
	margin: 0 0 0 20px !important;
}
/*画像複数配置*/
.JS .RdImgRightAdjustClear .ImgOnlyStyle:not(:first-of-type){
	margin-top: 40px !important;
}

@media screen and (max-width:994px){
.JS .RdImgRightAdjustClear,
.JS .RdImgLeftAdjustClear {
	float: none !important;
	margin: 0 !important;
}
/*画像複数配置*/
.JS .RdImgRightAdjustClear .ImgOnlyStyle:not(:first-of-type){
	margin-top: 15px !important;
}
}


/*---box decoration---*/
.RdBox {
	border-bottom: solid 1px #dddddd;
	margin-bottom: 17px !important;
}
.RdBoxFixHeight1 {
	height: 275px;
}

@media screen and (max-width: 994px) {
	.JS .RdBox {
		margin-bottom: 17px;
	}
}
@media screen and (max-width: 767px) {
	.JS .RdBox {
		border-bottom: none;
		margin-bottom: 0;
	}
	.JS .RdBoxFixHeight1 {
		height: auto;
	}
}



/* [c16] Box
=========================================================================================== */

.RdBoxPatternA {
	clear: both;
	margin: 0 0 15px;
	padding: 15px 0 0 0;
	background-color: #f2f2f2;
}
.RdBoxPatternA:after {
	content: "";
	display: block;
	clear: both;
}

.RdBoxPatternA .Title,
.RdBoxPatternA h2,
.RdBoxPatternA h3,
.RdBoxPatternA h4 {
	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: #737373;
}
.RdBoxPatternA h2 {background-image: none;}

.RdBoxPatternA .Title a,
.RdBoxPatternA h2 a,
.RdBoxPatternA h3 a,
.RdBoxPatternA h4 a {
	display: block;
	min-height: 20px;
	margin: -8px -15px;
	background-image: none;
	background-image: url(/image/en/r1/icon/icon_link_right_l_white_hd.gif) !important;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 16px 16px;
	-moz-background-size: 16px 16px;
	-webkit-background-size: 16px 16px;
	-o-background-size: 16px 16px;
	-ms-background-size: 16px 16px;
}
.RdBoxPatternA .Title a:link,
.RdBoxPatternA h2 a:link,
.RdBoxPatternA h3 a:link,
.RdBoxPatternA h4 a:link,
.RdBoxPatternA .Title a:visited,
.RdBoxPatternA h2 a:visited,
.RdBoxPatternA h3 a:visited,
.RdBoxPatternA h4 a:visited {
	padding: 8px 22px 8px 15px;
	color: #fff;
	background-color: #e60027;
	text-decoration: none;
	border-right: solid 3px transparent;
}
.RdBoxPatternA .Title a:hover,
.RdBoxPatternA h2 a:hover,
.RdBoxPatternA h3 a:hover,
.RdBoxPatternA h4 a:hover,
.RdBoxPatternA .Title a:active,
.RdBoxPatternA h2 a:active,
.RdBoxPatternA h3 a:active,
.RdBoxPatternA h4 a:active {
	padding: 8px 24px 8px 15px;
	color: #fff;
	background-color: #b1000e;
	text-decoration: none;
	border-right: solid 1px transparent;
}

.RdBoxPatternA .Title strong {
	color: #fff;
	font-weight: normal;
}

.RdBoxPatternA .BoxImgStyle {
	margin: -15px 0 15px;
	padding: 0;
}

.RdBoxPatternA .ImgOnlyStyle {
	margin-bottom: 10px;
}

.RdBoxPatternA p,
.RdBoxPatternA ul,
.RdBoxPatternA dl {
	margin-bottom: 10px;
	padding-left: 15px;
	padding-right: 15px;
}

.RdBoxPatternA .ThumbW60SetStyle,
.RdBoxPatternA .ThumbW120SetStyle,
.RdBoxPatternA .ThumbW180SetStyle,
.RdBoxPatternA .ThumbW230SetStyle {margin-left: 15px;}

.RdBoxPatternA .ThumbW60SetStyle .Img,
.RdBoxPatternA .ThumbW120SetStyle .Img,
.RdBoxPatternA .ThumbW180SetStyle .Img,
.RdBoxPatternA .ThumbW230SetStyle .Img {padding-right: 5px;}

.RdBoxPatternA .ImgW60SetStyle .ImgSet {margin-left: -90px;}
.RdBoxPatternA .ImgW120SetStyle .ImgSet {margin-left: -150px;}
.RdBoxPatternA .ImgW180SetStyle .ImgSet {margin-left: -210px;}
.RdBoxPatternA .ImgW230SetStyle .ImgSet {margin-left: -270px;}



/* [xx] トップページ

=========================================================================================== */
.keisen_p{margin-bottom: 20px!important;font-weight: bold; margin-top: 70px;}
.person_name{font-weight: bold;}
.keisen{letter-spacing: -1px;}


/* [xx] 開発ストーリー ローカルナビのバナー写真付き

=========================================================================================== */
.main_img_box{width: 100%;
position: absolute;
top: 0;
left: 0;
margin-top: 240px;}
.main_img_box_smaller_margin{
	margin-top: 190px;
}

.main_img_box_inner{min-height:250px;margin: 0 auto;position: relative;text-align: center;
}
.main_img_box_inner h1{font-size: 30px;line-height: 250px;}
/*.main_img_box .kaihatsu_story{
background: url(/hcrd/portal/contents/story/image/main.jpg) no-repeat;
background-size: 130% auto;
background-position:50% 50%;
}*/
.main_img_box .highlight{
background: url(/hcrd/image/top/img_rd_region04.jpg) no-repeat;
background-size: 100% auto;
background-position:50% 22%;
}


/* [xx] 開発ストーリー インタビュアー見出し

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

h3.RdStoryInterview {
	padding: 4px 0 4px 28px;
	background: url("/hcrd/image/common/icon_interview.gif") no-repeat 0 0.2em;
	font-size: 105%;
}
h3.RdStoryInterview2{
	padding: 4px 0 4px 28px;
	background: url("/hcrd/image/common/icon_interview.gif") no-repeat 0 0.2em;
	margin-top: 55px;
	margin-bottom: 20px;
	font-size: 125%;
	font-weight: normal;
	clear: both;
}


/* [xx] 開発ストーリー 年別インデックスページ

=========================================================================================== */
.rd_linkbtn_box{padding-top: 30px;margin-bottom: 30px;}
.rd_linkbtn_box a{float:right;}
div.RdStoryTab {
background-color:#eaeaea;
/*	margin-top: -15px;*/
    margin-bottom: 15px;
    margin-left: 0;
    margin-right: 0;
}
div.RdStoryTab img{
float:left;
margin-right: 2px;
}
div.RdStoryTab a:last-child img{
margin-right: 0;
}
div.RdStoryBox {
	width: 230px;
    display:  inline-block;
    vertical-align:  top;
	margin-left:9px;
	margin-bottom:9px;
    box-sizing: border-box;
}
div.RdStoryBoxCol2 {
	width: 469px;
	margin-left:9px;
	margin-bottom:9px;
}

/* [xx] 開発ストーリー ページインデックス

=========================================================================================== */
div.RdPageIndex {
margin: 5px 0 15px 0;
background: #eeeeee;
}

div.RdPageIndex ul {
padding: 5px 10px;
}

div.RdPageIndex ul li {
padding: 5px 0 5px 12px;
border-top: 1px solid #cccccc;
line-height: 1.5;
}

div.RdPageIndex ul li.FirstItem {
border: none;
}

div.RdPageIndex ul li a {
text-decoration:none;
color: #002b80;
}

div.RdPageIndex ul li a:visited {
text-decoration:none;
color: #602b80;
}

div.RdPageIndex ul li a:hover,
div.RdPageIndex ul li a:active {
text-decoration:underline;
color: #b1000e;
}

div.RdPageIndex2 {
	margin: 15px auto 15px auto;
	width: 90%;
	background: url(/hcrd/sc/story/image/bg_img.jpg) repeat;
	background-size: 20px 15px;
}

div.RdPageIndex2 ul {
padding: 5px 10px;
}

div.RdPageIndex2 ul li {
padding: 6px 0 6px 12px;
border-top: 2px dotted #a7f9fe;
line-height: 1.5;
}

div.RdPageIndex2 ul li.FirstItem {
border: none;
}

div.RdPageIndex2 ul li a {
	background-image: url(/image/en/r1/icon/icon_link_right_l_white.gif) !important;
	text-decoration:none;
	color: #fff;
}

div.RdPageIndex2 ul li a:visited,
div.RdPageIndex2 ul li a:link {
	padding: 10px 22px 10px 10px;
	text-decoration:none;
	color: #fff;
}

div.RdPageIndex2 ul li a:hover,
div.RdPageIndex2 ul li a:active {
	padding: 10px 24px 10px 10px;
	text-decoration:underline;
	color: #a7f9fe;
}



/* ---開発ストーリー プロローグページ RdCaption（キャプションエリア）---

=========================================================================================== */
div#RdCaption_3 {
margin: 0;
	padding: 0;
	width: 100%;
	clear: both;
}

/* ---RdCaption_3（3分割）--- */
ul#RdCaption_3 li {
list-style-type: none;
	display: block;
	width : calc(100% / 3) ;
	float: left;
	padding: 0 0 10px 0;
	vertical-align: middle;
	text-align: center;
	font-size: 83%;
	line-height: 1.5;
}
ul#RdCaption_3 li img {
margin-bottom:5px;
}

/* ---RdCaption_950_2（950pxを2分割）--- */
ul#RdCaption_2 li {
list-style-type: none;
	display: block;
	width : calc(100% / 2) ;
	float: left;
	padding : 0 0 10px 0;
	vertical-align: middle;
	text-align: center;
	font-size: 83%;
	line-height: 1.5;
}
ul#RdCaption_2 li img {
margin-bottom:5px;
}


/* ---開発ストーリー 記事中の設定---

=========================================================================================== */
div.RdStoryWrap {
    width: 700px;
    margin: auto;
}
@media screen and (max-width: 700px) {
    div.RdStoryWrap {
        width: auto;
    }
}

h2.RdStoryTitle {
	margin-top: 0;
	margin-bottom: 5px;
	padding-bottom: 10px;
	background: url(/hcrd/sc/story/image/bg_img.jpg) repeat;
	background-size: 20px 15px;
}

h2.RdStoryTitle span {
	font-size: 160%;
	font-weight: normal;
	text-align: center;
	color: #1d83aa;
	background-color: #f2f2f2;
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 7%;
	padding-right: 7%;
	line-height: 130%;
}
h2.RdStoryTitle2 {
	margin: 0 0 10px 0;
	padding-left: 7px;
	padding-bottom: 1px;
	background: url(/hcrd/sc/story/image/bg_img.jpg) repeat;
	background-size: 20px 15px;
}

h2.RdStoryTitle2 span {
	font-size: 125%;
	font-weight: normal;
	color: #2092BD;
	background-color: #ffffff;
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 130%;
}

p.RdStoryTextLead{
	line-height: 170%;
	margin-top: 0px;
	margin-bottom: 10px;
	font-size: 105%;
	color:#666666;
}
p.RdStoryTextLead2{
	line-height: 150%;
	font-weight: bold;
}

p.RdStoryText{
	line-height: 170%;
	margin-top: 0px;
	margin-bottom: 40px;
	font-size: 98%;
}
p.RdStoryText2{
	line-height: 150%;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 90%;
}
span.RdStoryFigText{
	font-size: 110%;
	line-height: 170%;
}
p.RdStoryFigText2{
	margin-top: 5px;
	margin-bottom: 20px;
	font-size: 90%;
	line-height: 170%;
}
div.RdStorySectionSeparator {
	margin-top:30px;
}
div.RdStoryImageSeparator {
	margin-top:100px;
}

.RdContentsWithBgimg {
    padding-left: 0!important;
    padding-right: 0!important;
    padding-bottom: 0;
}
.RdContentsWithBgimg .RdBgimg {
    margin-bottom: 15px;
}
@media screen and (max-width: 1304px) {
	.JS .RdContentsWithBgimg .Section,
	.JS .RdContentsWithBgimg .PageTitleStyle1 {
		min-width: 290px;
		padding-right: 15px !important;
		padding-left: 15px !important;
	}
	.JS .RdContentsWithBgimg .RdStoryTitle2 {
		min-width: 290px;
		margin-right: 15px !important;
		margin-left: 15px !important;
	}
	.JS .RdContentsWithBgimg .RdBgimg {
		padding-left: 0!important;
    	padding-right: 0!important;
	}
}

.Column1 .portal_area ul li {
	margin-bottom   : 15px;
}
.Column1 .portal_area ul li.hide {
	filter          : alpha(opacity=15);
	-moz-opacity    : 0.15;
	opacity         : 0.15;
}
.Column1 .BoxPatternC.keyword {
	padding        : 10px 0 0;
}
.Column1 dl.keyword {
	padding        : 0 0 2px 10px;
}
.Column1 dl.keyword dt {
	background      :url(/hcrd/image/keyword_sort/icon_check.png) no-repeat 0 5px;
	padding         : 0 0 5px 28px;
	font-weight     : bold;
	clear           : both;
}
.Column1 dl.keyword dd {
	margin-right: 10px;
}
.Column1 dl.keyword dd:after {
	content         : "";
	display         : block;
	clear           : both;
}
.Column1 dl.keyword dd.products {
	border-bottom   : 2px solid #ccc;
	padding-bottom  : 2px;
	margin-bottom   : 8px;
}
.Column1 dl.keyword dd ul {
	margin          : 0;
	padding         : 0;
}
.Column1 dl.keyword dd ul li {
	border-right    : 2px solid #ccc;
	color           : #666;
	float           : left;
	font-size       : 90%;
	font-weight     : bold;
	margin-bottom   : 6px;
	padding         : 0 10px;
}

@media screen and (max-width:767px){
.Column1 .portal_area ul li {
	float: left;
	width: 31.2075983%;
	margin-right: 3.1886024%;
}
.Column1 .portal_area ul li.LastItem {
	margin-right: 0;
}
}

@media screen and (max-width:579px){
.Column1 .portal_area ul li {
	float: none;
	width: 100%;
	margin-right: 0;
	text-align: left;
}
.Column1 .portal_area ul li.csi { background-color: #6f45ba; }
.Column1 .portal_area ul li.cti { background-color: #3967c6; }
.Column1 .portal_area ul li.cer { background-color: #287928; }
}

.Column2 .portal_area ul li {
	margin-bottom   : 15px;
}
.Column2 .portal_area ul li.hide {
	filter          : alpha(opacity=15);
	-moz-opacity    : 0.15;
	opacity         : 0.15;
}
.Column2 .BoxPatternC.keyword {
	padding        : 10px 0 0;
}
.Column2 dl.keyword {
	padding        : 0 0 2px 10px;
}
.Column2 dl.keyword dt {
	background      :url(/hcrd/image/keyword_sort/icon_check.png) no-repeat 0 5px;
	padding         : 0 0 5px 28px;
	font-weight     : bold;
	clear           : both;
}
.Column2 dl.keyword dd {
	margin-right: 10px;
}
.Column2 dl.keyword dd:after {
	content         : "";
	display         : block;
	clear           : both;
}
.Column2 dl.keyword dd.products {
	border-bottom   : 2px solid #ccc;
	padding-bottom  : 2px;
	margin-bottom   : 8px;
}
.Column2 dl.keyword dd ul {
	margin          : 0;
	padding         : 0;
}
.Column2 dl.keyword dd ul li {
	border-right    : 2px solid #ccc;
	color           : #666;
	float           : left;
	font-size       : 90%;
	font-weight     : bold;
	margin-bottom   : 6px;
	padding         : 0 10px;
}

@media screen and (max-width:767px){
.Column2 .portal_area ul li {
	float: left;
	width: 31.2075983%;
	margin-right: 3.1886024%;
}
.Column2 .portal_area ul li.LastItem {
	margin-right: 0;
}
}

@media screen and (max-width:579px){
.Column2 .portal_area ul li {
	float: none;
	width: 100%;
	margin-right: 0;
	text-align: left;
}
.Column2 .portal_area ul li.csi { background-color: #6f45ba; }
.Column2 .portal_area ul li.cti { background-color: #3967c6; }
.Column2 .portal_area ul li.cer { background-color: #287928; }
}

/* ---研究紹介とハイライトページ---

=========================================================================================== */
.RdTitleLinkSet {
	margin: 15px 0 15px 0;
	padding: 0 0 10px 0;
	background: url(/hcrd/research/image/bg_img.jpg) repeat;
	background-size: 20px 15px;
}

.RdTitleLinkSet div {
	padding: 10px 13px 10px 15px;
	background-color: #f2f2f2;
}

.RdTitleLinkSet div h2 {
	float: left;
	margin: 0;
	padding: 5px 0 0 7px;
	color: #5570e8;
	font-size: 150%;
	font-weight: normal;
	line-height: 130%;
}

.RdTitleLinkSet div h2 a:link,
.RdTitleLinkSet div h2 a:visited {
	color:#5570e8;
	background-image: url(/hcrd/image/icon_link_right.gif);
}

.RdTitleLinkSet div h2 a:hover,
.RdTitleLinkSet div h2 a:active {
	color:#5570e8;
	background-image: url(/hcrd/image/icon_link_right_hover.gif);
}

.RdTitleLinkSet div ul {
	float: right;
	padding-top: 10px;
}

.RdTitleLinkSet div ul li {
	font-size: 76%;
	line-height: 130%;
}

.RdTitleLinkSet div ul li a {
	padding: 0 17px 0 0;
	color:#5570e8;
}

.RdTitleLinkSet div ul li a:link,
.RdTitleLinkSet div ul li a:visited {
	text-decoration: none;
}

.RdTitleLinkSet div ul li a:hover,
.RdTitleLinkSet div ul li a:active {
	text-decoration: underline;
}

.RdTheme h2 a:link,
.RdTheme h2 a:visited {
	background-color: #0000aa;
}

.RdTheme h2 a:hover,
.RdTheme h2 a:active {
	background-color: #000077;
}


/* ---ニュースリリース---

=========================================================================================== */
.RdNewsreleaseTitleLinkSet {
	margin: 15px 0 15px 0;
	padding: 0 0 10px 0;
	background: url(/hcrd/news/image/bg_img.jpg) repeat;
	background-size: 20px 15px;
}

.RdNewsreleaseTitleLinkSet div {
	padding: 10px 13px 10px 15px;
	background-color: #f2f2f2;
}

.RdNewsreleaseTitleLinkSet div h2 {
	float: left;
	margin: 0;
	padding: 5px 0 0 7px;
	color: #317491;
	font-size: 150%;
	font-weight: normal;
	line-height: 130%;
}

p.RdNewsreleaseText{
	line-height: 170%;
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 96%;
}

sup.news {
	color: orangered;
}

.RdRelatedLink {
/*    background-color: #f6f6f6;*/
    margin-top: 40px;
    padding: 40px 0 20px;
}
.RdRelatedLink .Wrap {
    width: 965px;
    margin: auto;
}
.RdRelatedLink .Text {
    font-size: 170%;
    padding: 0 0 30px;
}
@media screen and (max-width: 1304px) {
    .RdRelatedLink {
        margin-left: -15px;
        margin-right: -15px;
        padding: 40px 15px 20px;
    }
    .RdContentsWithBgimg .RdRelatedLink {
        margin-left: 0;
        margin-right: 0;
    }
}
@media screen and (max-width: 965px) {
    .RdRelatedLink .Wrap {
        width: 100%;
    }
}
@media screen and (max-width: 767px) {
    .RdRelatedLink {
        background-color: #ffffff;
        margin-top: 10px;
    }
    .RdRelatedLink .Text {
        font-size: 150%;
    }
}


/* ---映像集などムービーへのリンク---


=========================================================================================== */
.ImgOnlyStyle .RdModalVideoLink {
	position: relative;
	display: inline-block;
}
.ImgOnlyStyle .RdModalVideoLink:before {
	content: "";
	position: absolute;
	z-index: 1;
	width: 50px;
	height: 50px;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	/*background-color: #222222;*/
	background-color: #e60027;
	opacity: .5;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
}
.ImgOnlyStyle .RdModalVideoLink:after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 36px;
	height: 36px;
	top: 50%;
	left: 50%;
	margin: -18px 0 0 -18px;
	/*background-color: #222222;*/
	background-color: #e60027;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}
.ImgOnlyStyle .RdModalVideoLink span {
	position: relative;
	display: block;
}
.ImgOnlyStyle .RdModalVideoLink span:after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 0;
	height: 0;
	top: 50%;
	left: 50%;
	margin: -9px 0 0 -3px;
	border-left: solid 9px #fff;
	border-top: solid 9px transparent;
	border-bottom: solid 9px transparent;
}


/* [xx] Date List for archive list

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

.DateListStyle2 a .RdArchiveListImg { width: 13.8%; }

.RdArchiveList{
display:inline-block;
padding-left:15px;
max-width:77.8443113%;
}


/* [xx] Date List for related link list -- inline style

=========================================================================================== */
* html .RdDateListStyle3 dd a,
* html .RdDateListStyle5 dd a,
*:first-child+html .RdDateListStyle3 dd a,
*:first-child+html .RdDateListStyle5 dd a {
vertical-align:top;
}
.RdDateListStyle3 {
font-size:90%;
 margin:0;
 padding:0;
 zoom:1;
}
.RdDateListStyle3 .LinkListStyle1,
.RdDateListStyle5 .LinkListStyle2 {
font-size:100%;
 margin:0 0 5px 0;
}
.RdDateListStyle3 a,
.RdDateListStyle5 a {
padding:0 10px 0 0;
 zoom:1;
}
.RdDateListStyle3 a:active,
.RdDateListStyle3 a:hover,
.RdDateListStyle5 a:active,
.RdDateListStyle5 a:hover {
text-decoration:underline;
}
.RdDateListStyle3 a:link,
.RdDateListStyle3 a:visited,
.RdDateListStyle5 a:link,
.RdDateListStyle5 a:visited {
text-decoration:none;
}
.RdDateListStyle3 dd,
.RdDateListStyle5 dd {
margin:0 0 0 150px;
 padding:0;
}
.RdDateListStyle3 dt,
.RdDateListStyle5 dt {
clear:both;
 float:left;
}
.RdDateListStyle3 dt a,
.RdDateListStyle3 dt span,
.RdDateListStyle5 dt a,
.RdDateListStyle5 dt span {
display:inline-block;
 min-height:24px;
 vertical-align:middle;
 width:135px;
}
.RdDateListStyle3 dt a.RdAward,
.RdDateListStyle3 dt span.RdAward,
.RdDateListStyle5 dt a.RdAward,
.RdDateListStyle5 dt span.RdAward {
	background: url(/hcrd/image/common/category_award.gif) no-repeat;
	background-size: 135px 24px;
}
.RdDateListStyle3 dt a.RdEvent,
.RdDateListStyle3 dt span.RdEvent,
.RdDateListStyle5 dt a.RdEvent,
.RdDateListStyle5 dt span.RdEvent  {
	background: url(/hcrd/image/common/category_event.gif) no-repeat;
	background-size: 135px 24px;
}
.RdDateListStyle3 dt a.RdStory,
.RdDateListStyle3 dt span.RdStory,
.RdDateListStyle5 dt a.RdStory,
.RdDateListStyle5 dt span.RdStory {
	background: url(/hcrd/image/common/category_story.gif) no-repeat;
	background-size: 135px 24px;
}
.RdDateListStyle3 dt a.RdExplanation,
.RdDateListStyle3 dt span.RdExplanation,
.RdDateListStyle5 dt a.RdExplanation,
.RdDateListStyle5 dt span.RdExplanation {
	background: url(/hcrd/image/common/category_explanation.gif) no-repeat;
	background-size: 135px 24px;
}
.RdDateListStyle3 dt a.RdGlossary,
.RdDateListStyle3 dt span.RdGlossary,
.RdDateListStyle5 dt a.RdGlossary,
.RdDateListStyle5 dt span.RdGlossary {
	background: url(/hcrd/image/common/category_glossary.gif) no-repeat;
	background-size: 135px 24px;
}
.RdDateListStyle3 dt a.RdInfo,
.RdDateListStyle3 dt span.RdInfo,
.RdDateListStyle5 dt a.RdInfo,
.RdDateListStyle5 dt span.RdInfo {
	background: url(/hcrd/image/common/category_info.gif) no-repeat;
	background-size: 135px 24px;
}
.RdDateListStyle3 dt a.RdInterview,
.RdDateListStyle3 dt span.RdInterview,
.RdDateListStyle5 dt a.RdInterview,
.RdDateListStyle5 dt span.RdInterview {
	background: url(/hcrd/image/common/category_interview.gif) no-repeat;
	background-size: 135px 24px;
}
.RdDateListStyle3 dt a.RdNewsrelease,
.RdDateListStyle3 dt span.RdNewsrelease,
.RdDateListStyle5 dt a.RdNewsrelease,
.RdDateListStyle5 dt span.RdNewsrelease {
	background: url(/hcrd/image/common/category_newsrelease.gif) no-repeat;
	background-size: 135px 24px;
}
.RdDateListStyle3 dt a.RdNews,
.RdDateListStyle3 dt span.RdNews,
.RdDateListStyle5 dt a.RdNews,
.RdDateListStyle5 dt span.RdNews {
	background: url(/hcrd/image/common/category_news.gif) no-repeat;
	background-size: 135px 24px;
}
.RdDateListStyle3 dt a.RdTopics,
.RdDateListStyle3 dt span.RdTopics,
.RdDateListStyle5 dt a.RdTopics,
.RdDateListStyle5 dt span.RdTopics {
	background: url(/hcrd/image/common/category_topics.gif) no-repeat;
	background-size: 135px 24px;
}
.RdDateListStyle3 dt a.RdOverview,
.RdDateListStyle3 dt span.RdOverview,
.RdDateListStyle5 dt a.RdOverview,
.RdDateListStyle5 dt span.RdOverview {
	background: url(/hcrd/image/common/category_overview.gif) no-repeat;
	background-size: 135px 24px;
}
.RdDateListStyle3 dt a.RdProduct,
.RdDateListStyle3 dt span.RdProduct,
.RdDateListStyle5 dt a.RdProduct,
.RdDateListStyle5 dt span.RdProduct {
	background: url(/hcrd/image/common/category_product.gif) no-repeat;
	background-size: 135px 24px;
}
.RdDateListStyle3 dt a.RdPublist,
.RdDateListStyle3 dt span.RdPublist,
.RdDateListStyle5 dt a.RdPublist,
.RdDateListStyle5 dt span.RdPublist {
	background: url(/hcrd/image/common/category_publist.gif) no-repeat;
	background-size: 135px 24px;
}
.RdDateListStyle3 dt a.RdResearch,
.RdDateListStyle3 dt span.RdResearch,
.RdDateListStyle5 dt a.RdResearch,
.RdDateListStyle5 dt span.RdResearch {
	background: url(/hcrd/image/common/category_research.gif) no-repeat;
	background-size: 135px 24px;
}
.RdDateListStyle3 dt a.RdFeature,
.RdDateListStyle3 dt span.RdFeature,
.RdDateListStyle5 dt a.RdFeature,
.RdDateListStyle5 dt span.RdFeature {
	background: url(/hcrd/image/common/category_feature.gif) no-repeat;
	background-size: 135px 24px;
}

.RdDateListStyle3 img,
.RdDateListStyle5 img {
vertical-align:middle;
 vertical-align:top;
}
.RdDateListStyle3:after,
.RdDateListStyle5:after {
clear:both;
 content:"";
 display:block;
}
.RdDateListStyle5 {
font-size:83%;
 margin:0;
 padding:0;
 zoom:1;
}



@media screen and (max-width: 767px) {
.DateListStyle2 dt {
padding-top: 15px;
}
.DateListStyle2 dd {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin: 0 0 15px 0;
padding-left: 9em;
}
.DateListStyle2 a .RdArchiveListImg {
width: 135px;
float: none;
padding-top: 15px;
}
.DateListStyle2 dd .ResponsiveLinkListStyle.BottomBorderSet {
border-top: none;
border-bottom: none;
margin-bottom: 0;
width: 100%;
}
.DateListStyle2 .RdArchiveList {
max-width: 100%;
padding-left: 0;
}
.RdDateListStyle3 {
margin: 0 -15px;
border-bottom: 1px solid #ddd;
}
.RdDateListStyle3 dt {
padding: 15px 0 0 15px;
}
.RdDateListStyle3 dd {
border-top: 1px solid #ddd;
margin-left: 0;
padding-left: 150px;
}
.RdDateListStyle3 dd > .LinkListStyle1 {
padding: 15px 0;
}
.RdDateListStyle3 dd > .LinkListStyle1 li {
padding: 0 0 0 10px;
}
.JS .RdDateListStyle3 dd .ResponsiveLinkListStyle,
.JS .RdDateListStyle3 dd .ResponsiveListStyle {
border-top: none;
padding-right: 0;
margin-right: 0;
}
.JS .RdDateListStyle3 dd .ResponsiveListStyle .LinkListStyle1 {
padding: 15px 0;
}
.JS .RdDateListStyle3 dd .ResponsiveListStyle .LinkListStyle1 li {
padding: 0 15px;
}
.JS .RdDateListStyle3 dd .ResponsiveLinkListStyle .LinkListStyle1 a,
.JS .RdDateListStyle3 dd .ResponsiveListStyle .LinkListStyle1 a {
margin-left: 15px;
}
.JS .RdDateListStyle3 dd .ResponsiveLinkListStyle .LinkListStyle1 span{
margin-left: 30px;
color: #000;
display: block;
}
.JS .RdDateListStyle3 dd .ResponsiveListStyle .LinkListStyle1 span{
color: #000;
display: block;
}
.JS .ResponsiveLinkListStyle.Line2,
.JS .ResponsiveListStyle.Line2 {
margin-left: 15px;
}
.JS .ResponsiveLinkListStyle.Line2 .LinkListStyle1 li,
.JS .ResponsiveLinkListStyle.Line2 .LinkListStyle1 li a {
padding-left: 0;
}
.JS .ResponsiveLinkListStyle.Line2 .LinkListStyle1 li a:hover,
.JS .ResponsiveLinkListStyle.Line2 .LinkListStyle2 li a:hover {
background-color: transparent;
}
.JS .ResponsiveLinkListStyle.Line2 .LinkListStyle1 li:hover,
.JS .ResponsiveLinkListStyle.Line2 .LinkListStyle2 li:hover {
background-color: #f2f2f2;
}
.JS .ResponsiveLinkListStyle.Line2 .LinkListStyle1 li span {
margin-left: 15px;
}

.JS .ResponsiveLinkListStyle.Line3,
.JS .ResponsiveListStyle.Line3 {
margin-top: 0;
}
.JS .ResponsiveLinkListStyle.Line3 .LinkListStyle1 li a:hover,
.JS .ResponsiveLinkListStyle.Line3 .LinkListStyle2 li a:hover {
background-color: transparent;
}
.JS .ResponsiveLinkListStyle.Line3 .LinkListStyle1 li:hover,
.JS .ResponsiveLinkListStyle.Line3 .LinkListStyle2 li:hover {
background-color: #f2f2f2;
}
.JS .ResponsiveLinkListStyle.Line4 .LinkListStyle1 li a:hover,
.JS .ResponsiveLinkListStyle.Line4 .LinkListStyle2 li a:hover {
background-color: transparent;
}
.JS .ResponsiveLinkListStyle.Line4 .LinkListStyle1 li:hover,
.JS .ResponsiveLinkListStyle.Line4 .LinkListStyle2 li:hover {
background-color: #f2f2f2;
}

.Grid3 h2.midashi, 	.Grid4 h2.midashi{
margin: 0 auto;
}
.kaihatsu_story{height:26vw;}
.main_img_box_inner h1{
line-height: 27vw!important;
font-size: 19px!important;
}
.rd_linkbtn_box {
margin-top: 0px!important;
padding-top:60px!important;
margin-bottom: 19px;
}

div.RdStoryTab img {
float: left;
margin-right: 0px!important;
width:120px!important;
}
.JS .PageTitleStyle1.title_center{padding-top: 20px;}
.JS .PageTitleStyle1.title_center h1{font-size: 180%;}
.Section.font_normal p{width: 90%;margin: 0 auto; text-align:left;}
}



@media screen and (max-width: 579px) {
.DateListStyle2 dt {
border-top: 1px solid #ddd;
}
.DateListStyle2 dd {
border-top: none;
border-bottom: none;
padding-left: 0;
}
.DateListStyle2 dd a .RdArchiveListImg {
margin-left: 0;
padding: 10px 0 0;
}
.DateListStyle2 dd .ResponsiveLinkListStyle {
margin: 0 0;
}
.RdDateListStyle3 dt {
float: none;
border-top: 1px solid #ddd;
}
.RdDateListStyle3 dd {
padding-left: 0;
border-top: none;
}
.JS .RdDateListStyle3 dd .ResponsiveListStyle .LinkListStyle1 li {
padding-left: 0;
}
.JS .RdDateListStyle3 dd .ResponsiveLinkListStyle .LinkListStyle1 li a {
margin-left: 0;
}
.JS .ResponsiveLinkListStyle.Line2,
.JS .ResponsiveListStyle.Line2 {
margin-left: 0;
}
.JS .RdDateListStyle3 dd .ResponsiveLinkListStyle.Line2 .LinkListStyle1 li,
.JS .RdDateListStyle3 dd .ResponsiveListStyle.Line2 .LinkListStyle1 li {
padding-left: 15px;
}
.JS .RdDateListStyle3 dd .ResponsiveLinkListStyle.Line2 .LinkListStyle1 li span {
margin-left: 0;
}
}


@media screen and (max-width:399px){
.RdDateListStyle3 dt, .RdDateListStyle5 dt {
float: none;
}
.RdDateListStyle3 dd, .RdDateListStyle5 dd {
margin: 0 0 10px 0;
}
}

@media screen and (max-width: 994px) {
	.main_img_box {
	position: relative!important;
	margin-top: 0px!important;}

	.rd_linkbtn_box {
margin-bottom: 30px!important;
}
.JS #Contents .main_img_box_inner {
width: 100%;
min-width: inherit;
min-height: inherit;
height: auto;
/*margin: 0 auto;*/
position: relative;
text-align: center;
margin: 0 -15px;
padding: 0 15px;
}

.JS .Grid3.noneside {width: 100%;}

.main_img_box_inner {
min-width: inherit!important;
width:100%;
min-height: inherit!important;
margin: 0 auto;
position: relative;
text-align: center;
}
.kaihatsu_story{background-size: auto 100%!important;}

.JS .ColumnSet.portalColumn_full{
width: auto;
margin: 0 0 10px 0px!important;
padding-top: 30px;
}
}

/* ---AI Blog---

=========================================================================================== */
div.AIBlog {
	width: 282px;
    display:  inline-block;
    vertical-align:  top;
	margin: 0 0 24px 26px;
    border: #aaa solid 1px;
    box-sizing: border-box;
    min-height: 290px;
}
div.AIBlog .inner {
	position: relative;
    min-height: 282px;
}
div.AIBlog .thum {
  background: linear-gradient(to top, rgba(0,0,0,0) 4%, rgba(181,160,46,0.8) 0%, rgba(181,160,46,0.1) 70%);
  max-width: 280px;
  margin: 0 auto 10px;
}
div.AIBlog .thum img {
  opacity: 1;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}
div.AIBlog .thum img:hover {
  opacity: 0.4;
}

div.AIBlog ul.LinkListStyle1 {
	margin: -5px 10px 5px 10px;
    padding-bottom: 1.8em;
}
div.AIBlog p.TextStyle2 {
    position: absolute;
	bottom: 0;
    right: 10px;
    margin-bottom: 0;
    color: #333;
    font-weight: bold;
}

@media screen and (max-width: 1304px) {
    div.AIBlog {
        width: 22% !important;
        margin: 0 0 24px 14px !important;
		padding: 0 !important;
	}
}

@media screen and (max-width: 1110px) {
    div.AIBlog {
        width: 25% !important;
        margin: 0 0 24px 14px !important;
	}
}

@media screen and (max-width: 950px) {
    div.AIBlog {
        width: 30% !important;
        margin: 0 0 24px 4px !important;
	}
}

@media screen and (max-width: 767px) {
    div.AIBlog {
		float: none;
		width: 100% !important;
        border: none;
        border-bottom: #aaa solid 1px;
        margin: 0 0 30px 0;
        text-align: center;
        min-height: 280px;
	}
	div.AIBlog:after {
		content: "";
		display: block;
		clear: both;
	}
    div.AIBlog .inner {
        min-height: 272px;
    }
    div.AIBlog ul.LinkListStyle1 {
	    text-align: left;
    }
    div.AIBlog p.TextStyle2 {
        right: 15px;
    }
}

div.AIBlogBanner {
    width: 50%;
    text-indent:290px;
	background-color:#b5a02e;
    padding: 5px 0 5px 0;
    margin: 0 0 25px 0;
    color: #fff;
    font-size: 130%;
    font-weight: bold;
}
@media screen and (max-width: 1304px) {
    div.AIBlogBanner {
        width: 56%;
        text-indent: 290px;
        /*text-indent:calc((100% * 2.27 - 700px) / 2);*/
    }
}
@media screen and (max-width: 995px) {
    div.AIBlogBanner {
        width: 56%;
        text-indent: 150px;
    }
}
@media screen and (max-width: 767px) {
    div.AIBlogBanner {
        text-indent: 0;
        padding: 5px 0 5px 45px;
    }
}
@media screen and (max-width: 579px) {
    div.AIBlogBanner {
        width: auto;
        text-align: center;
        padding: 5px 5px 5px 5px;
    }
}

div.AIBlogWrap {
    width: 700px;
    margin: auto;
}
hr.AIBlogLine {
    display: block;
    height: 1px;
    margin-top: 50px;
    margin-bottom: 20px;
    background-color: #aaa;
    border: none;
}
hr.AIBlogLine2 {
    display: block;
    height: 1px;
    margin-bottom: 20px;
    background-color: #aaa;
    border: none;
}
h1.AIBlogTitle {
    font-weight: normal;
    font-size: 190%;
    line-height: 1.4;
    color: #333;
}

@media screen and (max-width: 700px) {
    div.AIBlogWrap {
        width: auto;
    }
	h1.AIBlogTitle {
        font-size: 135%;
	}
}

div.AIBlogNavi {
    margin: 30px 0 20px 0;
    font-size: 90%;
}
div.AIBlogNavi ul li.top {
    background-image: url(/hcrd/sc/aiblog/image/common/icon_link_left_hd.gif);
    background-repeat: no-repeat;
 	-webkit-background-size: 16px 16px;
	-ms-background-size: 16px 16px;
    background-size: 16px 16px;
    background-position: 0% 50%;
    text-indent: 20px;
}
div.AIBlogNavi a {
    text-decoration: none;
}
div.AIBlogNavi a:hover {
    text-decoration: underline;
}


/* ---common elements---

=========================================================================================== */
.BtnWhite {
	color: #c02;
	margin: 0 auto;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	position: relative;
	width: 400px;
}
.BtnWhite a {
	border: 1px solid #c02;
	display: block;
  padding: 12px 20px;
	box-sizing: border-box;
	text-decoration: none;
}
.BtnWhite a:hover {
	opacity: .6;
	-moz-opacity: .6;
	filter: alpha(opacity=60);
}

.BtnWhite.LeftArrow a:before {
	content: url("/hcrd/image/icon_btnwhite_left_arrow.png");
	position: absolute;
	left: 20px;
	width: 10px;
	height: 26px;
}
.BtnWhite.LeftArrow a:hover:before {left: 17px;}
.BtnWhite.RightArrow a:after {
	content: url("/hcrd/image/icon_btnwhite_right_arrow.png");
	position: absolute;
	right: 20px;
	width: 10px;
	height: 26px;
}
.BtnWhite.RightArrow a:hover:after {right: 17px;}
.BtnWhite.mtbSpacing {margin: 60px auto;}
.BtnWhite.mbSpacing {margin: 0 auto 60px;}
.BtnWhite.mtSpacing {margin: 60px auto;}

@media screen and (max-width: 994px) {
	.BtnWhite {width: 100%;}
  .BtnWhite.mtbSpacing {margin: 30px auto;}
  .BtnWhite.mbSpacing {margin-bottom: 30px;}
  .BtnWhite.mtSpacing {margin: 30px auto;}
}

/* --- about/japan - flexbox ---

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

.about-base-container {
  margin: auto;
  max-width: 965px;
  width: 100%;
}
.about-base {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  align-content: center;
  flex-wrap: wrap;
}
.about-base + .about-base {
  margin-top: 10px;
}
.about-base:last-child {
  margin-bottom: 45px;
}
.column-label {
  background-color: #215968;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  width: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}
.column-label__abbr {
  font-size: 30px;
  width: 100%;
}
.column-info {
  background-color: #b7dee8;
  box-sizing: border-box;
  width: calc(100% - 170px);
  padding: 20px;
}
.column-info__sub {
  border-bottom: 3px solid #215968;
  color: #215968;
  font-size: 24px;
}
.column-info__list {
  list-style-type: none;
  margin: 0.5em 0 0 0.5em;
}
.column-info__list li {
  padding-left: 1.5em;
  position: relative;
}
.column-info__list li::before {
  content: "";
  background-color: #215968;
  border-radius: 50%;
  display: inline-block;
  height: 0.5em;
  left: 0;
  margin-right: 1em;
  position: absolute;
  vertical-align: middle;
  top: 0.5em;
  width: 0.5em;
}
@media screen and (max-width: 767px) {
  .about-base:last-child {
    margin-bottom: 20px;
  }
  .about-base {
    display: block;
  }
  .column-label {
    padding: 5px;
    width: 100%;
  }
  .column-label br {
    display: none;
  }
  .column-label__abbr {
    font-size: 150%;
    margin-right: 0.5em;
    width: auto;
  }
  .column-info {
    width: 100%;
  }
  .column-info__sub {
    font-size: 112.5%;
  }
  .column-info__list li {
    font-size: 90%;
  }
}

/* --- city_home - Cities and homes / Slider ---

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

#FutureContents #GreenLead h2 {
    font-weight: bold;
    color: #84B346;
}
#FutureContents #YellowLead h2 {
    font-weight: bold;
    color: #F29700;
}
#FutureContents #PinkLead h2 {
    font-weight: bold;
    color: #CA3A55;
}

.FutureMore #RotationBanner #SliderArea {
    width: 100%;
}
#Contents .FutureMore #RotationBanner li {
	width: 300px;
}

#RotationBanner li img {
    width: 100%;
}
@media screen and (min-width :995px) and (max-width: 1304px) {
	.FutureMore #RotationBanner #SliderArea {
		width: auto;
		margin-right: 25px;
	}
	#Contents .FutureMore #RotationBanner li {
		box-sizing: content-box;
		max-width: 300px;
		width: calc(((100% /10) - 75px) / 4);
	}
}