@charset "UTF-8";

/* ===============================================
 city　
=============================================== */
/* #city（都市エリア/背景色/文字色）------------------*/
#mainArea #city {
  background-color: #2f8ebc;
  color: #fff;
  padding-bottom: 8%;
  margin-bottom: 0;
}

/* .cityTitle（都市タイトル）------------------*/
#city .cityTitle {
  text-align: center;
  font-size: 200%;
  padding: 13% 0 4%;
}
#city .subTitle {
  text-align: center;
  font-size: 135%;
  padding-bottom: 4%;
}

/* .pointArea（ポイントエリア/背景/文字色）------------------*/
#city .pointArea {
  color: #000;
  border: solid 1px #eadfc9;
  margin: 5% 0 0;
  padding: 7% 3%;
  background-image: url('../images_new/sp/point_bg001.jpg');
  background-size: 60px;
  background-position: 0 0;
  background-repeat: repeat;
}
.pointList li + li {
  margin-top: 5%;
}
.pointArea .descArea + .phArea {
  margin-top: 3%;
}

/* .pointlistTitle（ポイントリストタイトル）------------------*/
.pointArea .pointlistTitle {
  margin: 0 3%;
}
.pointArea .pointlistTitle.sub {
  margin-top: 4%;
}

/* .pointTitle（ポイントタイトル1）------------------*/
.pointArea .pointTitle span {
  border-left: solid 1px #2f8ebb;
  padding: 6px 12px;
  margin-left: 7px;
  display: block;
}
.pointArea .pointTitle {
  color: #2f8ebb;
  padding: 4% 0 4% 28px;
  font-size: 130%;
  font-weight: normal;
  background-repeat: no-repeat;
  background-position: 7px 50%;
  background-size: 15px;
}

/* .pointText（ポイントテキスト）------------------*/
.pointArea .columnArea.col1 .pointText {
  color: #318fbb;
  text-align: center;
  font-size: 120%;
  margin-bottom: 3%;
  font-weight: normal;
}
.pointArea .columnArea.col1 .pointText.pdnTB5 {
  padding: 5% 0 2%;
  font-size: 135%;
}

/* .number（ポイント数字アイコン）------------------*/
.pointArea .pointTitle.number01 {
  background-image: url('../images_new/sp/point_number001.png');
}
.pointArea .pointTitle.number02 {
  background-image: url('../images_new/sp/point_number002.png');
}
.pointArea .pointTitle.number03 {
  background-image: url('../images_new/sp/point_number003.png');
}
.pointArea .pointTitle.number04 {
  background-image: url('../images_new/sp/point_number004.png');
}
.pointArea .pointTitle.number05 {
  background-image: url('../images_new/sp/point_number005.png');
}

/* #blueBox（青枠）------------------*/
.pointArea .columnArea.col1 .descArea.blueBox {
  padding: 1em;
  background-color: #d9eaf1;
}
.pointArea .columnArea.col1 .descArea.blueBox img {
  margin-top: 0.8em;
}
.pointArea .columnArea.col1 .descArea.blueBox .recomend {
  font-size: 80%;
}

/* ===============================================
 other　
=============================================== */
/* #other（その他エリア/背景/エリア上部ライン）------------------*/
#mainArea #other {
  background-image: url('../images_new/sp/city_bottom_line.png'), url('../images_new/sp/other_bg001.jpg');
  background-repeat: no-repeat, repeat;
  background-size: 100%, 100px;
  background-position:
    50% -1px,
    50% 0;
  padding-bottom: 10%;
  margin: 0;
}

/* .other.otherTitle（その他タイトル）------------------*/
#other .otherTitle {
  padding: 20% 8% 10%;
}

/* .other.li（その他コンテンツ/背景）------------------*/
#other li.columnArea.col1 {
  background-color: #fff;
  border-bottom: solid 4px #1d7d94;
}
#other li .descBox {
  padding: 0 3% 5%;
}
#other li.columnArea.col1 + li.columnArea.col1 {
  margin-top: 10%;
}

/* .other.li（その他コンテンツタイトル）------------------*/
#other .otherlistTitle {
  color: #1d7d94;
  padding-bottom: 3%;
  font-size: larger;
}

/* #other（商品枠がない時）------------------*/
.cntsWrap #mainArea section:last-child#other {
  margin: 0 0 -10%;
}
.cntsWrap #mainArea section:last-child#other2 {
  margin: 0 0 -10%;
}

/* ===============================================
 city2　
=============================================== */
/* #city2（都市エリア/背景色/文字色）------------------*/
#mainArea #city2 {
  background-color: #2f8ebc;
  color: #fff;
  padding-bottom: 8%;
  margin-bottom: 0;
  background-image: url('../images_new/sp/other_bottom_line.png');
  background-repeat: repeat-x;
  background-size: 100%;
  background-position: 50% 0;
}

/* .cityTitle（都市タイトル）------------------*/
#city2 .cityTitle {
  text-align: center;
  font-size: 24px;
  padding: 13% 0 4%;
}
#city2 .subTitle {
  text-align: center;
  font-size: 135%;
  padding-bottom: 4%;
}

/* .pointArea（ポイントエリア/背景/文字色）------------------*/
#city2 .pointArea {
  color: #000;
  border: solid 1px #eadfc9;
  margin: 5% 0 0;
  padding: 7% 3%;
  background-image: url('../images_new/sp/point_bg001.jpg');
  background-size: 60px;
  background-position: 0 0;
  background-repeat: repeat;
}

/* ===============================================
 other2　
=============================================== */
/* #other2（その他エリア/背景/エリア上部ライン）------------------*/
#mainArea #other2 {
  background-image: url('../images_new/sp/city_bottom_line.png'), url('../images_new/sp/other_bg001.jpg');
  background-repeat: no-repeat, repeat;
  background-size: 100%, 100px;
  background-position:
    50% -1px,
    50% 0;
  padding-bottom: 10%;
  margin: 0;
}

/* #other2.otherTitle（その他タイトル）------------------*/
#other2 .otherTitle {
  padding: 20% 8% 10%;
}

/* #other2.li（その他コンテンツ/背景）------------------*/
#other2 li.columnArea.col1 {
  background-color: #fff;
  border-bottom: solid 4px #1d7d94;
}
#other2 li .descBox {
  padding: 0 3% 5%;
}
#other2 li.columnArea.col1 + li.columnArea.col1 {
  margin-top: 10%;
}

/* #other2.li（その他コンテンツタイトル）------------------*/
#other2 .otherlistTitle {
  color: #1d7d94;
  padding-bottom: 3%;
  font-size: larger;
}

/* ===============================================
 naviArea　
=============================================== */
/* #tour（ナビタイトル/アイコン）------------------*/
.titleArea.headlines.crystalIcon {
  background-image: url('../images_new/sp/crystal.png');
  margin: 0;
}

/* #tour（ナビリスト）------------------*/
#naviArea li.linkArea.list + li.linkArea.list {
  border-top: 1px solid #1d7d94;
  border-bottom: 0;
}
#naviArea .linkArea.list {
  background-color: #ecfbff;
  background-image: url('../images_new/sp/arrow_blue_green.png');
  background-size: 9px auto;
  background-position: 98% 50%;
}
.titleArea.headlines.featureIcon {
  margin: 0 0 3%;
}