@charset "UTF-8";
/**
 * スマホ TOPCSS
 * [変更履歴]
 * ---------------------------------------
 * [00] 2019/04/21 SGK 新規作成
 */
.clearfix:after {
  display: block;
  content: "";
  clear: both;
}

/**
 * 上部の地図と同じボタンの調整
 */
@media only screen and (orientation: portrait) {
  #mapNav ul li {
    width: 33%;
  }
  #mapNav ul li:first-child {
    width: 34%;
  }
  .areaSelectBox {
    width: 100%;
  }
}

@media only screen and (orientation: landscape) {
  #mapNav ul li {
    height: 33%;
  }
  #mapNav ul li:first-child {
    height: 34%;
  }
  .areaSelectBox {
    width: 85%;
    margin: 0 0 0 auto;
  }
}

.areaSelectBox {
  padding: 10px;
}

/**
 * 見出し
 */
.selectMsg {
  font-size: 1.8rem;
  margin: 10px;
}

.selectMsg span {
  display: none;
}

.selectMsg i {
  color: #ffffff;
  font-size: 1rem;
  background-color: #544cad;
  -webkit-transform: rotate(-270deg);
          transform: rotate(-270deg);
  padding-top: 4px;
  padding-left: 2px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
  margin-right: 5px;
}

/**
 * 地域選択
 */
.areaBox {
  background: #ffffff linear-gradient(#ffffff, #ebebeb);
  border: 1px solid #544cad;
  color: #232323;
  margin-bottom: 10px;
}

.areaBox .groupBox {
  margin: 3px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.areaBox .groupBox .groupName {
  font-size: 1.6rem;
}

.areaBox .groupBox .groupName span {
  font-size: 3.2rem;
  margin-right: 5px;
}

.areaBox .groupBox .map img {
  height: 60px;
}

.areaBox ul {
  background-color: #f1f3f6;
  border: 1px solid #b4b3c6;
  padding: 7px;
  flex-wrap: wrap;
  font-size: 1.2rem;
  display: none;
  margin: 5px;
}

.areaBox ul li:after {
  content: "、";
}

.areaBox ul li:last-child:after {
  content: "";
}

/**
 * 全市町村表示中
 */
.areaSelectBox.open .selectMsg span {
  display: inline-block;
}

.areaSelectBox.open .selectMsg i {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  padding-top: 3px;
  padding-left: 0px;
}

.areaSelectBox.open .areaBox ul {
  display: flex;
}