/* リスト全体(基本は3カラム) */
.sitemap{
  list-style-type: none;                  /* リストマーク */
  margin: 0;                              /* 外側の余白 */
  padding: 0;                             /* 内側の余白 */
  display: -webkit-flex;                  /* Safari用 */
  flex-direction: -webkit-column;         /* Safari用 */
  flex-wrap: -webkit-wrap;                /* Safari用 */
  display: flex;                          /* flexbox使用 */
  flex-direction: column;                 /* 並べ方(縦 or 横) */
  flex-wrap: wrap;                        /* 折り返し許可 */
  max-height: 600px;
  align-content: space-around;            /* 要素の置き方(space-around:要素の間(端も含める)を空けて配置) */
}
/* 各リスト*/
.sitemap_list{
  width: 32%;                             /* 幅(余白を出すため、3分の1より1～3%分小さめ) */
  margin: 10px 0px 10px 0px;              /* 外側の余白 */
  border-radius: 5px;                     /* 境界線の角の丸みの大きさ */
  background: #EEE;                       /* 背景色 */
}

/* 親リストのリンク部分 */
.sitemap_list > a {
  border-radius: 5px;                     /* 境界線の角の丸みの大きさ */
  background: #0095b9;                    /* 背景色 */
  color: #fff;                            /* 文字色 */
  display: block;                         /* 表示形式 */
  padding: 15px;                          /* 内側の余白 */
  text-decoration: none;                  /* リンクの装飾は消す */
  font-weight: bold;
}

/* 子リスト */
.sitemap_child{
  padding-left: 10px;                     /* 左余白 */
}
.sitemap_child > li{
  list-style-type: none;                  /* 既存のリストマークは消す */
  background: url(../images/icon_mark_right.png) left 0.3em no-repeat;
  background-size: 14px;
  padding-left:17px;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* 子の子リスト */
.sitemap_child li ul{
  padding-left: 0px;                     /* 左余白 */
}
.sitemap_child li ul li{
  list-style-type: none;                /* リストマークの種類 */
  background: url(../images/icon_mark_child_right.png) left 0.42em no-repeat;
  background-size: 8px;
  padding-left:12px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 14px;
}

/* IE用、リストマーク位置ズレの調節 */
@media all and (-ms-high-contrast: none){
  .sitemap_child > li{
    background-position: left 0.05em;
    margin: 10px 0px;
  }
  .sitemap_child li ul li{
    background-position:left 0.11em;
    margin: 4px 0px 8px 0px;
  }
}

/* Edge用、リストマーク位置ズレの調節(上記IE用CSSハックが適用される可能性があるため、再定義) */
_:-ms-lang(x), _::-webkit-meter-bar, .sitemap_child > li{
  background-position: left 0.3em;
  margin: 5px 0px;
}
_:-ms-lang(x), _::-webkit-meter-bar, .sitemap_child li ul li{
  background-position: left 0.45em;
  margin: 5px 0px;
}


/* firefox用、リストマーク位置ズレの調整 */
@-moz-document url-prefix(){
  .sitemap_child > li{
    background-position: left 0.23em;
  }
  .sitemap_child li ul li{
    background-position: left 0.4em;
  }
}

/* IE用、表示位置ズレの調節 */
@media all and (-ms-high-contrast: none){
  .sitemap{
    max-height:none;
    height:600px;
  }
  
/* Edge用、表示位置ズレの調節(上記IE用CSSハックが適用される可能性があるため、再定義) */
  _:-ms-lang(x), _::-webkit-meter-bar, .sitemap{
    height:auto;
    max-height:600px;
  }
}


/* 2カラム用 */
@media screen and (min-width:650px) and (max-width:1000px) {
  .sitemap{
    max-height: 850px;                     /* 高さ(2カラムになるように調整) */
  }
  .sitemap_list{
    width:48%;                            /* 幅(余白を出すため、半分よりも1～3%分小さめ) */
  }
}

/* IE用、表示位置ズレの調節 */
@media all and (min-width:650px) and (max-width:1000px) and (-ms-high-contrast: none){
  .sitemap{
    height:850px;
  }
  
/* Edge用、表示位置ズレの調節(上記IE用CSSハックが適用される可能性があるため、再定義) */
  _:-ms-lang(x), _::-webkit-meter-bar, .sitemap{
    height:auto;
    max-height:850px;
  }
}

/* 1カラム用 */
@media screen and (min-width:320px) and (max-width:650px) {
  .sitemap{
    height: auto;
    max-height: none;                     /* 高さ制限解除 */
    padding: 0px 10px 0px 10px;           /* 内側の余白 */
  }
  .sitemap_list{
    width:100%;                           /* 幅 */
  }
}