@charset "utf-8";

div#contents { width: 100% !important; }


/* font
=========================================*/
body {
	font-family: "HondaGlobalFontJP-Regular", sans-serif;
	/*background: #f8f8f8;*/
	font-size: 13px;
}



#wrapper {
	width: 980px;
	padding: 0 7px;
	margin: 0 auto 30px;
	/*background: url(../img/bg/bg_wrapper.gif) repeat-y;*/
	text-align:left;
}


/* #header
=========================================*/
#header{
	padding: 20px 14px 5px;
}

#header h1{
	float: left;
}

#header p.go_accesstop{
	float:right;
	display: none; /*202001add*/
}

ul#pankuzu{
	clear: both;
	padding: 10px 0 5px !important;
}

ul#pankuzu li{
	display: inline;
	/*font-weight: bold;
	color: #369;*/
}

ul#pankuzu li a{
	padding-right: 19px;
	background:url(../img/header/pankuzu_bullet.gif) right center no-repeat;
	font-weight: normal;
	color: #000;
	text-decoration: none;
}

ul#pankuzu li a:visited{
	color: #000;
	text-decoration: none;
}

ul#pankuzu li a:hover{
	color: #369;
	text-decoration: underline;
}


/* #mainColumn
=========================================*/
#mainColumn {
	width: 670px;
	float: left;
}

ul#bnrArea {
	margin: 20px 0 30px 0 !important;
}

ul#bnrArea li {
	width: 203px;
	float: left;
	margin-right: 10px;
}

ul#bnrArea li img {
	width: 100%;
}

ul#bnrArea li:nth-child(4) {
	clear: both;
	padding-top: 7px;
}

#mainColumn dl.hosyou3nen6man {
	margin-left: 20px;
}

#mainColumn dl dt {
	display: block;
	width:145px;
	float: left;
}

#mainColumn dl dd {
	display: block;
	float: left;
}

#mainColumn dl dd a {
	display: block;
	padding: 5px 0 3px;
	padding-left: 19px;
	background:url(../../common/img/header/pankuzu_bullet.gif) left center no-repeat;
	color: #000;
	text-decoration: none;
}

#mainColumn dl dd a:visited,
p.ochikakuno a:visited {
	color: #000;
}

#mainColumn dl dd a:hover,
p.ochikakuno a:hover {
	color: #c00;
	text-decoration: underline;
}

p.ochikakuno {
	margin:3px 0 0 165px;
}

p.ochikakuno a {
	display: block;
	padding-left: 19px;
	background:url(../../common/img/header/pankuzu_bullet.gif) left center no-repeat;
	color: #000;
	text-decoration: none;
}


/* #subColumn
=========================================*/
#subColumn {
	width: 310px;
	float: right;
	background: #494949;
	color: #fff;
}

#subColumn h3 {
	text-align: center;
	height: 26px;
	padding-top:12px;
}

#catalogInfoWrapper {
	background: #202020;
	padding: 1px;
}

#catalogInfo {
	border: 1px solid #484848;
	padding: 26px 18px 0;
	min-height: 302px;
}

#kanarazuOyomi {
	 border: 1px solid #c00;
	 padding: 0 19px 12px;
	 margin-bottom: 14px;
}

#kanarazuOyomi h4 {
	text-align: center;
	position: relative;
	top :-12px;
}

.caution01 {
	font-size: 14px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	line-height: 1.4;
	margin-bottom: 10px;
}

.caution02 {
	font-size: 14px;
	color: #c00;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	line-height: 1.4;
}

.caution02 a {
	color: #c00;
}

.caution02 a:visited {
	color: #c00;
}

.caution02 a:hover {
	color: #fff;
}

p.nengetsu {
	font-size: 14px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	line-height: 1.5;
	margin-bottom:10px;
}

p.nengetsu span {
	background: #c00;
	padding:1px 0.3em;
}


#catalogDownload {
	border: 1px solid #000;
	border-top: none;
	padding: 19px 19px 14px 19px;
}

#catalogDownload dl {
	margin-bottom: 15px;
}

#catalogDownload dl dt {
	display: block;
	width: 106px;
	float: left;
}

#catalogDownload dl dd {
	display: block;
	float: right;
}

#catalogDownload dl dd ul li {
	width:162px;
	height:60px;
	/*background:url(../../common/img/btn/btn_pdf.gif) no-repeat; 202001change*/
	/*border-bottom: 1px solid #131313; 202001change*/
}

#catalogDownload dl dd ul li.sono01 {
	background:url(../../common/img/btn/btn_pdf01.gif) no-repeat;
	margin-bottom: 10px;
}

#catalogDownload dl dd ul li.sono02 {
	background:url(../../common/img/btn/btn_pdf02.gif) no-repeat;
}

#catalogDownload dl dd ul li a {
	display: block;
	border: 1px solid #c00;
	height:58px;
	text-align: center;
	font-size: 14px;
	color: #c00;
	background: #fff;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	position: relative;
}

#catalogDownload dl dd ul li a::after {
	position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
	right: 10px;
    width: 5px;
    height: 5px;
    border-top: 2px solid #c00;
    border-right: 2px solid #c00;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#catalogDownload dl dd ul li a span {
	display: inline-block;
	padding-top:12px;
}

#catalogDownload dl dd ul li a:hover {
	background: #c00;
	color: #fff;
}

#catalogDownload dl dd ul li a:hover::after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}



/*202001add*/

/*********** pc ************/
.news__header {
  border-bottom: solid 1px #ba1015;
}
.news__header .news__header-unit {
  width: 980px;
  margin: 0 auto;
  padding: 13px 0 11px 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.news__header h1 {
  color: #333333;
  font-size: 22px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
}

.news__header a {
	color: #444 !important;
}

/*********** sp ************/
@media only print,screen and (max-width: 736px) {
  .news__header {
    border-bottom: 1px solid #ba1015;
    padding: 0 ;
  }
  .news__header .news__header-unit {
    width: 100%;
    margin: 0 auto;
    flex-direction: column;
  padding: 0;
  }
  .news__header h1 {
	  width: 90%;
	  margin: 0.8em 5%;
    font-size: 4vw;
    font-family: "HondaGlobalFontJP-Bold", sans-serif;
	  text-align: center;
  }
	
	
	#wrapper {
		width: 100%;
		padding: 0;
		margin: 0 auto 20px;
	}
	
	
	/* #header
	=========================================*/
	#header{
		width: 90.6666%;
		margin: 0 auto;
	}
	
	#header h1{
		float: none;
	}
	
	#header h1 img{
		max-width: 100%;
	}

	#header p.go_accesstop{
		float: none;
		display: none; /*202001add*/
	}

	ul#pankuzu{
		clear: both;
		padding: 7px 0 5px;
	}
	
	/* #mainColumn
	=========================================*/
	#mainColumn {
		width: 100%;
		float: none;
	}
	
	#mainColumn h2 img {
		width: 100%;
		vertical-align: bottom;
	}

	ul#bnrArea {
		width: 90.6666%;
		margin: 1.6em auto 2.4em !important;
	}
	
	ul#bnrArea li {
		width: 100%;
		float: none;
		margin-right: 0;
		margin-bottom: 1.2em;
	}
	
	ul#bnrArea li:last-child {
		margin-bottom: 0;
	}
	
	ul#bnrArea li img {
		width: 100%;
		vertical-align: bottom;
	}
	
	ul#bnrArea li:nth-child(4) {
		padding-top: 0;
	}

	dl.hosyou3nen6man {
		width: 90.6666%;
		margin: 0 auto;
	}

	dl.hosyou3nen6man dt {
		display: block;
		width:145px;
		float: none;
		margin-bottom: 10px;
	}

	dl.hosyou3nen6man dd {
		display: block;
		float: none;
	}

	dl.hosyou3nen6man dd a {
		display: block;
		padding: 5px 0 3px;
		padding-left: 19px;
		background:url(../../common/img/header/pankuzu_bullet.gif) left center no-repeat;
		color: #000;
		text-decoration: none;
	}

	p.ochikakuno {
		width: 90.6666%;
		margin: 0.2em auto 0;
	}

	p.ochikakuno a {
		display: block;
		padding-left: 19px;
		background:url(../../common/img/header/pankuzu_bullet.gif) left 5px no-repeat;
		color: #000;
		text-decoration: none;
	}
	
	/* #subColumn
	=========================================*/
	#subColumn {
		width: 100%;
		float: none;
	}
	
	#catalogInfo {
		min-height: initial;
		padding-bottom: 26px;
	}
	
	.caution02 a {
		text-decoration: underline !important;
	}

	.caution02 a:visited {
		color: #c00;
	}

	#catalogDownload dl dt {
		display: block;
		width: 93px;
		float: none;
		margin: 0 auto 10px;
	}

	#catalogDownload dl dd {
		display: block;
		float: none;
	}

	#catalogDownload dl dd ul li {
		width: 100%;
		height: auto;
	}

	#catalogDownload dl dd ul li a {
		display: block;
		border: 1px solid #c00;
		height: auto;
		color: #c00;
		padding: 1em 0;
	}

	#catalogDownload dl dd ul li a span {
		display: inline-block;
		padding-top:0;
	}
	
	#catalogDownload dl dd ul li a span br {
		display: none;
	}

}






/*202002add　モーダルの仕組み部分css*/

#overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, .65);
}

/*for pc*/	
@media only print,screen and (min-width: 737px) {
.spshow {
	display: none;
}	
	
#modal {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 99;
    transform: translate(-50%, -50%);
	width: 940px;
    /*max-width: 80vw;
    max-height: 80vh;*/
    box-sizing: border-box;
    padding: 50px;
    border-radius: 8px;
    background-color: #fff;
}
	
#modal p.title {
	font-size: 20px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	margin-bottom: 20px;
	text-align: center;
}

#modal p.lead {
	margin-bottom: 20px;
	line-height: 1.5;
}
	
#modal ul {
	margin-left: 20px;
	margin-bottom: 30px;
}
	
#modal ul > li {
	list-style: initial;
	line-height: 1.5;
	margin-bottom: 5px;
}
	
#modal ul li ol {
	margin-top: 5px;
}		
	
#modal ul li ol li {
	list-style: none;
	margin-bottom: 2px;
	padding-left: 2.6em;
	text-indent: -2.6em;
}
	
#modal div.agree_close {
	text-align: center;
}	

#modal div.agree_close button {
	cursor: pointer;
	background: none;
	border: none;
	width: 200px;
	height: 40px;
	border-radius: 4px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
}
	
#modal div.agree_close button:hover {
	opacity: 0.7;
}	

#modal div.agree_close button#agree {
	background: #c00;
	color: #fff;
	border: 1px solid #c00;
}	

#modal div.agree_close button#close {
	background: #aaa;
	color: #fff;
	border: 1px solid #aaa;
}
}
		
/*for sp*/	
@media only print,screen and (max-width: 736px) {
	.pcshow {
		display: none;
	}
	
	#modal {
    	display: none;
    	position: fixed;
    	left: 50%;
    	top: 30%;
    	z-index: 99;
    	transform: translate(-50%, -30%);
    	width: 90%;
		/*max-width: 80vw;*/
    	max-height: 95vh;
    	box-sizing: border-box;
    	padding: 20px;
    	border-radius: 8px;
    	background-color: #fff;
		font-size: 2.93vw;
	}
	
	#modal p.title {
		font-size: 4vw;
		font-family: "HondaGlobalFontJP-Bold", sans-serif;
		margin-bottom: 20px;
		text-align: center;
	}
	
	#modal p.lead {
		margin-bottom: 10px;
	}
	
	#modal ul {
		margin-left: 20px;
		margin-bottom: 10px;
	}
	
	#modal ul > li {
		list-style: initial;
		line-height: 1.4;
		margin-bottom: 3px;
		word-break: break-all;
	}
	
	#modal ul li ol {
		margin-top: 3px;
	}		
	
	#modal ul li ol li {
		list-style: none;
		margin-bottom: 2px;
		padding-left: 2.6em;
		text-indent: -2.6em;
	}
	
	#modal div.agree_close {
		text-align: center;
		margin-top: 20px;
	}	

	#modal div.agree_close button {
		background: none;
		border: none;
		width: 45%;
		height: 45px;
		border-radius: 4px;
		font-family: "HondaGlobalFontJP-Bold", sans-serif;
	}

#modal div.agree_close button#agree {
	background: #c00;
	color: #fff;
	border: 1px solid #c00;
}	

#modal div.agree_close button#close {
	background: #aaa;
	color: #fff;
	border: 1px solid #aaa;
}
	
}	
	
.active {
    display: block !important;
}