@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* CSS Document */

/* ===============================================
190321_販売サービス窓口
=============================================== */

/* 01_都道府県を選択ボタン =========================== */

.sales #contents #selectKen{
	position: relative;
	width: 100%;
	margin: 30px auto 80px;
	font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.sales #contents #selectKen #btn_selectKen{
	position:relative;
	display: block;
	width: 650px;
	margin: 0 auto;
	padding: 18px;
	box-sizing: border-box;
	background-color: #333f48;
	color: #fff;
	font-size: 115%;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-align: center;
	text-decoration: none;
	border-radius: 4px;
	opacity: 1.0;
	transition: opacity .15s linear;
}
.sales #contents #selectKen #btn_selectKen:hover{
	opacity: 0.75;
}
.sales #contents #selectKen #btn_selectKen::after{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 5px 0 5px;
	border-color: #ffffff transparent transparent transparent;
	right: 25px;
	top: 45%;
}
.sales #contents #selectKen #btn_selectKen.active::after{
	border-width: 0 5px 7px 5px;
	border-color: transparent transparent #ffffff transparent;
}
.sales #contents #selectKen #btn_selectKen span::after{
	content: "";
	position: absolute;
	width: 1px;
	height: 100%;
	background-color: #556470;
	top: 0;
	right: 60px;
}


.sales #contents #selectKen #KenList{
  display: none;
  z-index: 10;
  position: absolute;
  width: 100%;
}
.sales #contents #selectKen #KenList #KenListWrap{
	margin-top: 20px;
	background-color: #ffffff;
	display: block;
	position: relative;
	border: 3px solid #333f48;
}
.sales #contents #selectKen #KenList #KenListWrap::before{
	content: ' ';
    height: 0;
    position: absolute;
    width: 0;
	border-style: solid;
	border-width: 0 14px 12px 14px;
	border-color: transparent transparent #333f48 transparent;
    left: 49%;
    top: -12px;
}
.sales #contents #selectKen #KenListWrap dl{padding: 0;}
.sales #contents #selectKen #KenListWrap dl:nth-child(even){background-color: #eee;}
.sales #contents #selectKen #KenListWrap dl dt{
	color: #ffffff;
	display: inline-block;
	text-align: center;
	width: 4em;
	letter-spacing: 0.1em;
	margin: 0 25px 0 0;
	padding: 18px 28px;
	font-weight: 500;
}
.sales #contents #selectKen #KenListWrap dl:nth-child(1) dt{background-color: #3E71B1;}
.sales #contents #selectKen #KenListWrap dl:nth-child(2) dt{background-color: #2B98B6;}
.sales #contents #selectKen #KenListWrap dl:nth-child(3) dt{background-color: #4BC0B2;}
.sales #contents #selectKen #KenListWrap dl:nth-child(4) dt{background-color: #A4AD26;}
.sales #contents #selectKen #KenListWrap dl:nth-child(5) dt{background-color: #E6991E;}
.sales #contents #selectKen #KenListWrap dl:nth-child(6) dt{background-color: #EF6623;}
.sales #contents #selectKen #KenListWrap dl:nth-child(7) dt{background-color: #E97F71;}
.sales #contents #selectKen #KenListWrap dl:nth-child(8) dt{background-color: #DA544C;}


.sales #contents #selectKen #KenListWrap dl:first-child dt{padding-top:20px;}
.sales #contents #selectKen #KenListWrap dl:last-child dt{padding-bottom:20px;}
.sales #contents #selectKen #KenListWrap dl dd{
	display:inline-block;
	width: 73px;
	font-size: 100%;
}


/* 02_地図から選ぶ =========================== */
.sales #contents #dealerMap{
	margin: 0 0 60px 0; 
}
.sales #contents #dealerMap .js-useMap img{
	width: 100%;
	height: auto;
}
.sales #contents #dealerMap map area{
	border:none;
	outline:none;
}






@media screen and (max-width: 767px){

/* ===============================================
180926_代理店ページ改修　SP用
=============================================== */


/* 01_都道府県を選択ボタン =========================== */
.sales #contents .textCenter{
	text-align: left !important;
	margin-bottom: 5px;
}
.sales #contents #selectKen{
	width: 100%;
	margin: 30px auto 40px;
}
.sales #contents #selectKen #btn_selectKen{
	width: 100%;
	font-size: 90%;
	position:relative;
	display: block;
	margin: 0 auto;
	padding: 15px 18px;
}
.sales #contents #selectKen #btn_selectKen:hover{opacity: inherit;}
.sales #contents #selectKen #btn_selectKen::after{right: 20px;}
.sales #contents #selectKen #btn_selectKen span::after{right: 50px;}
.sales #contents #selectKen #KenList{
  display: block;
  position: relative;
  z-index: 1;
}
.sales #contents #selectKen #KenList #KenListWrap::before{
	content: ' ';
    height: 0;
    position: absolute;
    width: 0;
	border-style: solid;
	border-width: 0 14px 12px 14px;
	border-color: transparent transparent #333f48 transparent;
    left: 49%;
    top: -12px;
}
.sales #contents #selectKen #KenListWrap dl{
	padding: 0;
	font-size: 90%;
	width: 100%;
}
.sales #contents #selectKen #KenListWrap dl:nth-child(even){background-color: #fff;}
.sales #contents #selectKen #KenListWrap dl:last-child{padding-bottom: 20px;}
.sales #contents #selectKen #KenListWrap dl dt{
	display: block;
	width: 100%;
	margin: 15px 0 10px 0;
	padding: 10px 0;
}
.sales #contents #selectKen #KenListWrap dl:first-child dt{
	padding-top:10px;
	margin: 0 0 10px 0;
}
.sales #contents #selectKen #KenListWrap dl:last-child dt{padding-bottom:10px;}
.sales #contents #selectKen #KenListWrap dl dd{
	display:inline-block;
	width: 32%;
	margin-bottom: 10px;
	text-align: center;
	font-size: 90%;
}



/* 02_代理店情報 =========================== */
.sales #contents h2.salesh2_selectSheng::before{
	width: 100%;
	left: 0px;
}
.sales #contents #dealerMap{
	margin: 0; 
}
/*.sales #contents #dealerMap map area{
	border:none;
	outline:none;
}*/








}