@charset "shift_jis";

body {font-family: 'HondaGlobalFontJP-Regular', sans-serif !important;}
/* --------------------------------------------------------------------
	メインコンテンツ
-------------------------------------------------------------------- */
#mainCont {text-align: center;margin-bottom: 75px;}
#mainCont p {
	font-size: 16px;
	line-height: 1.8;
	text-align: left;
}
#mainCont p.heading {
	font-weight: bold;
	padding-top: 65px;
}
#mainCont p.heading2 {
	font-weight: bold;
	padding-top: 0px;
}
#mainCont p.caution {
	font-size: 14px;
	line-height: 1.6;
	margin-top: 10px;
}
#mainCont p.description {
	color: #054ba1;
	font-style: italic;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #054ba1;
	padding-left: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
}
#mainCont .img_box {
	margin-right: auto;
	margin-left: auto;
	margin-top: 25px;
	margin-bottom: 0px;
	width: 880px;
}
/*  タイトルエリア  */
#mainCont .title_area {
	background-color: #343434;
	position: relative;
}
#mainCont .title_area h2 {font-family: 'HondaGlobalFontJP-Bold', sans-serif !important;font-weight: normal !important;
	color: #FFF;
	text-align: left;
	padding-right: 50px;
	padding-left: 50px;
	padding-top: 40px;
	padding-bottom: 25px;
	font-size: 34px;
	line-height: 1.3;
	font-weight: bold;
}
#mainCont .title_area h2 span  {
	font-size: 16px;
	line-height: 1.3;
	font-weight: normal;
	display: block;
	padding-bottom: 5px;
}


/*  イントロエリア  */
#mainCont .intro_area{
	width: 880px;
	margin-top: 40px;
	margin-right: 50px;
	margin-left: 50px;
}
/*  答える人  */
#mainCont .respondent_area{
	width: 788px;
	margin-top: 50px;
	margin-right: 50px;
	margin-left: 50px;
	border: 1px solid #343434;
	position: relative;
	padding-top: 30px;
	padding-right: 45px;
	padding-bottom: 0px;
	padding-left: 45px;
	margin-bottom: 0px;
}
#mainCont .respondent_area p {
	font-size: 14px;
	color: #343434;
	line-height: 1.7;
}
#mainCont .respondent_area p span{
	font-size: 16px;
}
#mainCont .respondent_area p.fL {
	width: 104px;
	padding-bottom: 30px;
	clear: both;
}
#mainCont .respondent_area p.fR {
	width: 640px;
	padding-bottom: 30px;
}
#mainCont .respondent_area .name {
	background-color: #343434;
	width: 150px;
	position: absolute;
	left: -1px;
	top: -23px;
	height: 23px;
	text-align: center;
}
#mainCont .respondent_area .name p{
	font-size: 13px;
	line-height: 2;
	color: #FFF;
	text-align: center;
}
/*  ビデオエリア  */
#mainCont .video_area{
	width: 880px;
	margin-top: 30px;
	margin-right: 0px;
	margin-left: 0px;
}
#mainCont .video_area a:hover {
    opacity: 0.8;
}

/*  コラムエリア  */
#mainCont .column_area{
	width: 880px;
	margin-top: 65px;
	margin-right: 50px;
	margin-left: 50px;
}
#mainCont .column_area h3 {
	font-size: 21px;
	line-height: 1;
	text-align: left;
	background-color: #343434;
	color: #FFF;
	padding-left: 20px;
	padding-top: 13px;
	padding-bottom: 10px;
	font-weight: bold;
	padding-right: 20px;
}
#mainCont .column_area h4 {
	font-size: 21px;
	line-height: 1.4;
	text-align: left;
	color: #333;
	padding-left:0px;
	padding-top: 40px;
	padding-bottom: 0px;
	font-weight: bold;
	padding-right: 0px;
}
#mainCont .column_area dl {
	width: 100%;
	padding-top: 25px;
}
#mainCont .column_area dt {
	width: 100%;
	clear: both;
}
#mainCont .column_area dd {
	width: 100%;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
	margin-top: 0px;
	clear: both;
}
#mainCont .column_area dt .fL {
	width: 65px;
	position: relative;
	top: 6px;
}
#mainCont .column_area dt .fR {
	width: 785px;
}
#mainCont .column_area .mt05{
	margin-top: 5px;
}
#mainCont .column_area .mt25{margin-top: 25px;}
#mainCont .column_area .mt30{margin-top: 30px;}
#mainCont .column_area dd.img_box{margin-top: 30px;}

#mainCont .column_area dt.w480 {width: 460px;clear: none;float: left;display: block;}
#mainCont .column_area dt.w480 .fL{width: 65px;position: relative;top: 6px;}
#mainCont .column_area dt.w480 .fR{width: 365px;}
#mainCont .column_area dt.w480 .fL.mt25{margin-top: 25px;}
#mainCont .column_area dt.w480 .fR.mt25{margin-top: 25px;}
#mainCont .column_area dd.img_box2{margin-top: 0px;width: 390px;float: right;clear: none;display: block;}
#mainCont .column_area dd.img_box2_{margin-top: 25px;width: 390px;float: right;clear: none;display: block;}
#mainCont .column_area dd.img_box3 {margin: 25px auto 0px auto;width: 540px;}
#mainCont .column_area dd.img_box4 {margin: 25px auto 0px auto;width: 680px;}

#mainCont .column_area dt p span{font-weight: bold;display: block;margin-bottom: 3px;}
#mainCont .column_area dd:nth-child(2) {padding-top: 0px;}
#mainCont .column_area dd >*:first-child + *{padding-top: 0px;}

#mainCont .column_area dl.separate dt{width: 420px;float: left;}
#mainCont .column_area dl.separate dd{width: 430px;float: right;}
#mainCont .column_area dl.separate dd .img_box{width: 100%;margin: 8px 0px 0px 0px;}

#mainCont .column_area a   {
	text-decoration: underline;
	color: #06C;
}
#mainCont .column_area a:hover {
	text-decoration: underline;
	color: #C00;
}


/* --------------------------------------------------------------------
	ボトムエリア
-------------------------------------------------------------------- */
#mainCont .bottom_area{
	margin-top: 100px;
}

/*  ネクスト  */
#mainCont ul.next{
	display: inline-block;
}
#mainCont ul.next li {
	float: left;
}
#mainCont ul.next li p {
	line-height: 1.8;
	padding-left: 5px;
}
#mainCont ul.next li p a{
	text-decoration: underline;
}
#mainCont ul.next li p a:hover{
	text-decoration: none;
	color: #CC0000;
}
/*  下部リンク  */
#mainCont ul.f_link{
	width: 878px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 100px;
}
#mainCont ul.f_link li{
	border: 1px solid #343434;
	width: 420px;
	position: relative;
	text-align: left;
}
#mainCont ul.f_link li .img img  {
	vertical-align: top;
}
#mainCont ul.f_link li .arrow   {
	position: absolute;
	top: 0px;
	right: 10px;
	bottom: 0px;
	width: 10px;
	margin-top: auto;
	margin-bottom: auto;
	height: 15px;
}
#mainCont ul.f_link li p{
	font-size: 14px;
	line-height: 1.6;
	width: 200px;
	position: absolute;
	top: 20px;
	right: 30px;
}

#mainCont ul.f_link li a{
	text-decoration: none;
}
#mainCont ul.f_link li a:hover p {
	color: #C00;
	text-decoration: none;
}


/*  ページセレクト  */
#mainCont ul.select{
	font-size: 0;
	margin-top: 30px;
	font-family: 'HondaGlobalFontJP-Regular', sans-serif !important;
}
#mainCont ul.select li{
	display: inline-block;
	border: 1px solid #343434;
	text-align: center;
	margin-left: 10px;
}
#mainCont ul.select li:first-child{
	margin-left: 0px;
}
#mainCont ul.select li .on,#mainCont ul.select li a{
	font-size: 24px;
	line-height: 1;
	height: 40px;
	width: 45px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding-top: 5px;
}
#mainCont ul.select li .on,#mainCont ul.select li a:hover {
	color: #FFF;
	background-color: #343434;
	text-decoration: none;
}
#mainCont ul.select li a img {
	vertical-align: middle;
	position: relative;
	top: -0.1em;
}
#related-contents-container{text-align: left;}


#mainCont .column_area .table_of_contents {text-align: left;margin: 0px;padding: 0px;}
#mainCont .column_area .table_of_contents li {text-align: left;font-size: 17px;line-height: 1.8;margin: 0px;padding: 14px 0px 12px 20px;border-bottom: 1px solid #CCC;position: relative;background-color: #f9f9f9;letter-spacing: 0.02em;}
#mainCont .column_area .table_of_contents li.index {background-color: #fff;font-size: 21px;font-weight: bold;padding: 0px 0px 5px 20px;}
#mainCont .column_area .table_of_contents li a {text-decoration: none;}
#mainCont .column_area .table_of_contents li:first-child {margin-left: 0px;}
#mainCont .column_area .table_of_contents li ul {position: absolute;top: 0px;left: 180px;}
#mainCont .column_area .table_of_contents li ul li {text-align: left;font-size: 14px;line-height: 1.4;padding-left: 1.4em;margin: 6px 0px 0px 0px;float: left;border-bottom: 1px none #CCC;background-color: transparent;}
span.supText {font-size: 75.5%;vertical-align: top;position: relative;top: -0.1em;display: inline-block !important;}
/*span.subText {font-size: 75.5%;vertical-align: bottom;position: relative;top: 0.1em;}*/



.links_box {
    width: 800px;
    margin: 2em auto 0 auto;
}
.links_box a {
    display: flex;
    text-decoration: none !important;
    color: #000 !important;
}
.links_box a:hover {
    text-decoration: none;
    color: #000;
    background-color: #777;
    color: #fff;
}
.links_box div:first-child {
    width: 200px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000; 
}
.links_box div.v1 { background-image: url("../../../spirit-sdw2/N-ONE_RS_engineerstory/images/img02.jpg");}
.links_box div.v2 { background-image: url("../../../spirit-sdw2/N-ONE_RS_engineerstory/images/img04.jpg");}
.links_box div.v3 { background-image: url("../../../spirit-sdw2/N-ONE_RS_engineerstory/images/img11.jpg");}
.links_box div.v4 { background-image: url("../../../spirit-sdw2/N-ONE_RS_engineerstory/images/img12.jpg");}

.links_box div:nth-child(2) {
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    width: 600px;
    display: flex;
    align-items: center;
    padding: 1.2em 0 0 2em;
}
#mainCont .links_box p {
    font-size: 14px;
    line-height: 1.8em;
}
#mainCont .links_box p span {
	font-size: 20px;
	letter-spacing: -0.03em;
    font-weight: bold;
	display: block;
    padding-bottom: 0.8em;
}
#mainCont .links_box p span:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    border: transparent solid 9px;
    border-left-color: #c00;
    vertical-align: 0px;
}


/* --------------------------------------------------------------------
	SNS
-------------------------------------------------------------------- */
#snsBtns {
	padding-left: 0px;
	width: 204px;
	position: absolute;
	right: 50px;
	padding-bottom: 0px;
	top: 15px;
}
#snsBtns li {
	width:102px;
	float: left;
}

/* --------------------------------------------------------------------
	汎用
-------------------------------------------------------------------- */

/*  clearfix  */
.clearfix:after{
	display:block;
	visibility:hidden;
	clear:both;
	width:0;
	height:0;
	content:".";
}
.clearfix {zoom: 1;}
.fL {float: left;}
.fR {float: right;}
#mainCont img {vertical-align: bottom;}
.under_line {text-decoration: underline;}
.pc {display: block !important;}
.sp {display: none !important;}