@charset "utf-8";
/* ==========================================================================

# area-map.css
ホームメイト介護 エリアマップCSS

## Filepath
/css-cmn/

## History
2018/08/14 新規作成
2018/09/04 修正

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

.area_map {
  background: url(../image-cmn/bg-mainvisual-map.png) 95px 30px no-repeat;
  margin-top: 23px;
  min-height: 463px;
  position: relative;
  width: 635px;
}
.com_area_map dl, .top_recommend_area_box {
  display: flex;
  flex-wrap: wrap;
}
.area_map dl {
  position: absolute;
}
.com_area_map dt,
.top_recommend_area_ttl {
  align-items: center;  
  color: #fff;
  display: flex;
  justify-content: center;
}
.area_map dt {
  font-size: 1.4rem;
  margin-bottom: 5px;
  padding: 3px;
  width: 100%;
}
.area_map dd {
  margin: 0 5px 5px 0;
  width: 68px; 
}

.modal_map .area_map dt {
  margin-bottom: 0;
}
.modal_map .area_map dd {
  margin: 0;
  width: 63px;
}
.modal_map .area_map dd a{
  font-size: 14px;
}
.modal_map .com_area_map dl {
  gap: 6px 9px;
}

.com_area_map dd a,
.top_recommend_area_select a {
  align-items: center;
 /* border:1px solid; */
  border-radius: 3px;
  color: #000;
  display: flex;
  font-weight: 600;
  justify-content: center;  
   background: #fff;
   border: solid 1px #fff ;
   border-bottom: solid 3px #fff ;
}
.area_map dd a {
  height: 32px;
}
.pc_style .com_area_map dd a:hover,
.pc_style .top_recommend_area_list a:hover,
.tablet_style .com_area_map dd a:active,
.tablet_style .top_recommend_area_list a:active,
.sp_style .com_area_map dd a:active,
.sp_style .top_recommend_area_list a:active {
  color: #fff;
  text-shadow: none;
}
.area_map .area_map_hokkaido {
  right: 0;
  top: 57px;
  width: 65px;  
}
.com_area_map .area_map_hokkaido dt,
.com_area_map .area_map_hokkaido .top_recommend_area_ttl {
  background: #6476b4;
}
.com_area_map .area_map_hokkaido dd {
  margin-right: 0;
}
.com_area_map .area_map_hokkaido a {
  background: #e5e8f2;
  border-color: #6476b4;
 /* box-shadow: 0 1px 0 #6476b4; */
}
.pc_style .com_area_map .area_map_hokkaido a:hover,
.tablet_style .com_area_map .area_map_hokkaido a:active,
.sp_style .com_area_map .area_map_hokkaido a:active {
  background: #6476b4;
}
.area_map .area_map_tohoku {
  right: 0;
  top: 133px;
  width: 214px;  
}
.com_area_map .area_map_tohoku dt,
.com_area_map .area_map_tohoku .top_recommend_area_ttl{
  background: #1c89bd;
}
.com_area_map .area_map_tohoku dd:nth-of-type(3n+3) {
  margin-right: 0;
}
.com_area_map .area_map_tohoku a {
  background: #ddedf5 ;
  border-color: #1c89bd;
 /* box-shadow: 0 1px 0 #1c89bd;*/
}
.pc_style .com_area_map .area_map_tohoku a:hover,
.tablet_style .com_area_map .area_map_tohoku a:active,
.sp_style .com_area_map .area_map_tohoku a:active {
  background: #1c89bd;
}
.area_map .area_map_kanto {
  right: 0;
  top: 246px;
  width: 288px;  
}
.modal_wrap .area_map .area_map_kanto {
  width: 279px;
}
.com_area_map .area_map_kanto dt,
.com_area_map .area_map_kanto .top_recommend_area_ttl{
  background: #1ba9a9;
}
.com_area_map .area_map_kanto dd:nth-of-type(3n+3) {
  margin-right: 0;
}
.com_area_map .area_map_kanto a {
  background:  #def2f2;
  border-color: #1ba9a9;
/*  box-shadow: 0 2px 0 #1ba9a9;*/
}
.pc_style .com_area_map .area_map_kanto a:hover,
.tablet_style .com_area_map .area_map_kanto a:active,
.sp_style .com_area_map .area_map_kanto a:active {
  background: #1ba9a9;
}
.area_map .area_map_koshinetsu {
  left: 334px;
  top: 67px;
  width: 67px;  
}
@media screen and (min-width: 768px) {
  .area_map .area_map_koshinetsu {
    width: 63px;
  }
}

.com_area_map .area_map_koshinetsu dt,
.com_area_map .area_map_koshinetsu .top_recommend_area_ttl {
  background: #31a682;
}
.com_area_map .area_map_koshinetsu dd {
  margin-right: 0;
}
.com_area_map .area_map_koshinetsu a {
  background: #e6f4f0 ;
  border-color: #31a682;
/*  box-shadow: 0 2px 0 #31a682;*/
}
.pc_style .com_area_map .area_map_koshinetsu a:hover,
.tablet_style .com_area_map .area_map_koshinetsu a:active,
.sp_style .com_area_map .area_map_koshinetsu a:active {
  background: #31a682;
}
.area_map .area_map_tokai {
  left: 339px;
  top: 359px;
  width: 136px;  
}
.modal_content .area_map .area_map_tokai {
  left: auto;
  right: 0;
}
.com_area_map .area_map_tokai dt,
.com_area_map .area_map_tokai .top_recommend_area_ttl {
  background: #729c3b;
}
.com_area_map .area_map_tokai dd:nth-of-type(2n+2) {
  margin-right: 0;
}
.com_area_map .area_map_tokai a {
  background:  #ebf3e0 ;
  border-color: #729c3b;
/*  box-shadow: 0 2px 0 #729c3b; */
}
.pc_style .com_area_map .area_map_tokai a:hover,
.tablet_style .com_area_map .area_map_tokai a:active,
.sp_style .com_area_map .area_map_tokai a:active {
  background: #729c3b;
}
.area_map .area_map_hokuriku {
  left: 242px;
  top: 67px;
  width: 67px;  
}
@media screen and (min-width: 768px) {
  .area_map .area_map_hokuriku {
      width: 63px;
  }
}

.com_area_map .area_map_hokuriku dt,
.com_area_map .area_map_hokuriku .top_recommend_area_ttl {
  background: #a58f29;
}
.com_area_map .area_map_hokuriku dd {
  margin-right: 0;
}
.com_area_map .area_map_hokuriku a {
  background:  #eee9d5 ;
  border-color: #a58f29;
/*  box-shadow: 0 2px 0 #a58f29; */
}
.pc_style .com_area_map .area_map_hokuriku a:hover,
.tablet_style .com_area_map .area_map_hokuriku a:active,
.sp_style .com_area_map .area_map_hokuriku a:active {
  background: #a58f29;
}
.area_map .area_map_kansai {
  left: 150px;
  top: 67px;
  width: 215px;  
}
.modal_content .area_map .area_map_kansai {
  left: 0; 
}
.com_area_map .area_map_kansai dt,
.com_area_map .area_map_kansai .top_recommend_area_ttl {
  background: #e7913d;
}
.com_area_map .area_map_kansai dd:nth-of-type(2n+2) {
  margin-right: 0;
}
.com_area_map .area_map_kansai a {
  background: #fbf8f4;
  border-color: #e7913d;
/*  box-shadow: 0 2px 0 #e7913d; */
}
.pc_style .com_area_map .area_map_kansai a:hover,
.tablet_style .com_area_map .area_map_kansai a:active,
.sp_style .com_area_map .area_map_kansai a:active {
  background: #e7913d;
}
.area_map .area_map_chugoku {
  left: 0;
  top: 177px;
  width: 215px;  
}
.com_area_map .area_map_chugoku dt,
.com_area_map .area_map_chugoku .top_recommend_area_ttl {
  background: #db7457;
}
.com_area_map .area_map_chugoku dd:nth-of-type(2n+2) {
  margin-right: 0;
}
.com_area_map .area_map_chugoku a {
  background:  #fef9f7 ;
  border-color: #db7457;
/*  box-shadow: 0 2px 0 #db7457; */
}
.pc_style .com_area_map .area_map_chugoku a:hover,
.tablet_style .com_area_map .area_map_chugoku a:active,
.sp_style .com_area_map .area_map_chugoku a:active {
  background: #db7457;
}
.area_map .area_map_shikoku {
  left: 169px;
  top: 359px;
  width: 142px;  
}
.modal_content .area_map .area_map_shikoku {
    left: auto;
    right: 169px;
    width: 136px;
}
.com_area_map .area_map_shikoku dt,
.com_area_map .area_map_shikoku .top_recommend_area_ttl {
    background: #c880a8;
}
.com_area_map .area_map_shikoku dd:nth-of-type(2n+2) {
  margin-right: 0;
}
.com_area_map .area_map_shikoku a {
  background:  #fff9fc ;
  border-color: #c880a8;
/*  box-shadow: 0 2px 0 #c880a8; */
}
.pc_style .com_area_map .area_map_shikoku a:hover,
.tablet_style .com_area_map .area_map_shikoku a:active,
.sp_style .com_area_map .area_map_shikoku a:active {
  background: #c880a8;
}
.area_map .area_map_kyushu {
  left: 0;
  top: 287px;
  width: 142px;  
}
.com_area_map .area_map_kyushu dt,
.com_area_map .area_map_kyushu .top_recommend_area_ttl {
  background: #d07886;
}
.com_area_map .area_map_kyushu dd:nth-of-type(2n+2) {
  margin-right: 0;
}
.com_area_map .area_map_kyushu a {
  background: #fdf8f9;
  border-color: #d07886;
/*  box-shadow: 0 2px 0 #d07886; */
}
.pc_style .com_area_map .area_map_kyushu a:hover,
.tablet_style .com_area_map .area_map_kyushu a:active,
.sp_style .com_area_map .area_map_kyushu a:active {
  background: #d07886;
}