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

2017.06.16 栄タワーヒルズ 周辺施設のご案内用CSS

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

/* ------------------------------------------------------------------
	Location 周辺施設のご案内
	===================================================================
　#location
------------------------------------------------------------------ */
#location {
  width: 1024px;
  margin: 0 auto;
  background: url(../image/bg_top.png) 0 0 no-repeat;
  position: relative;
}

#location h1 {
  padding: 30px 0 45px 21px;
}

.first_lead {
  margin: 11px 0 0 61px;
  /*width: 430px;*/
}

/* 周辺地図 */
.map_img {
  width: 924px;
  margin: 20px auto 0;
}

.map_img > img {
/*  border: 2px solid #f3e8cd;*/
}

.dr {
  text-align: right;
  margin: 20px 6px 0 0;
}

/* ------------------------------------------------------------------
	共通
	===================================================================
　[id$="_area"]
------------------------------------------------------------------ */
[id$="_area"] {
  width: 924px;
  margin: 34px auto 0;
}

[id$="_area"]:nth-of-type(1) {
  margin-top: 30px;
}

[id$="_area"] h2 {
  margin-bottom: -20px;
}

.content_area,
.other_item_content:nth-of-type(1){
  width: 900px;
}

[class^="content_"],
#purple_area .content_area .con_shirakawa,
.other_item_content:nth-of-type(1) {
  margin: 0 auto;
  /* flex */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

/* 白川公園用 */
#purple_area .content_area .con_shirakawa {
  background: #FFF1FE;
  margin: 40px 0 0;
  padding: 10px;
}

#purple_area .content_area　.con_shirakawa .box_wide {
  width: 880px!important;
  margin: 0;
}

#purple_area .content_area .con_shirakawa .item_box {
  width: 430px!important;
}

/* 2カラム用の横幅 */
#pink_area .content_area .item_box,
#purple_area .content_area .item_box {
  width: 440px;
  margin: 40px 0 0;
}

#pink_area .content_area,
#purple_area .content_area,
#purple_area .content_area .con_shirakawa {
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#pink_area .title_no,
#purple_area .title_no {
  font-size: 21px;}

 /* 3カラム用の横幅 */
.item_box {
  width: 290px;
  margin: 40px 14px 0 0;
}

.item_box:nth-of-type(3n) {
  margin: 40px 0 0;
}

/* 見出し */
[id$="_area"] .title_no,
#pink_area .other_item_content .title_no {
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  padding: 5px;
  /* flex */
  display: flex;
  align-items: center;
}

[id$="_area"] .title_no span {
  margin-left: 5px;
}

[id$="_area"] .no {
  font-size: 21px;
}

/* 画像やテキスト */
.item_content {
  /* flex */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

/* 画像 */

.item_content .spots_movie{
  margin: 10px 0 0;	
}

.item_content .first_img_item {
  width: 200px;
}

.item_content .first_img_item img {
  width: 100%;
}

.box_wide .item_content .first_img_item:first-of-type {
  width: auto;
}

.item_content a,
.no_img {
  display: block;
  margin: 10px 0 0;
  position: relative;
}

.item_content > a::after,
.item_content .first_img_item a::after{
	content: url(/sakae/image_cmn/second/ico_mag_yellow_brown.png);
	display: block;
	pointer-events: none;
	position: absolute;
	right: 0;
	bottom: 0;
	line-height: 0;
}


/* 画像周りのボーダー */
.item_content > a img {
  border: 1px solid #c5bfad;
}

/* 1カラム用画像配置 */
.box_wide dd .thumb_area {
  margin-left: 5px;
  overflow: hidden;
  width: 280px;
}

.box_wide dd .thumb_area ul {
  margin: 0;
}

.box_wide dd .thumb_area ul li {
  float: left;
  margin-left: 5px;
  width: 135px;
}

.box_wide dd .thumb_area ul li a:after {
  content: url(/sakae/image_cmn/second/ico_mag_yellow_brown.png);
  display: block;
  pointer-events: none;
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 0;
}


/* テキスト */
.item_content p {
  width: 228px;
  margin: 10px 4px 0;
  line-height: 1.5em;
}

#purple_area .content_area .con_shirakawa .item_box p{
  line-height: 1.5em;
  width: 218px;
}

/* 住所・TEL */
.item_data {
  width: 100%;
  margin-top: 5px;
  font-size: 15px;
  /* flex */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.item_data dt {
  width: 22.7272727272%;
  width: -webkit-calc( 100 / 440 *100% );
  width: calc( 100 / 440 *100% );
  text-align: center;
  margin: 5px 0 0;
  padding: 8px 0;
  background: #f3ead8;
  /* flex */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.item_data dd {
  width: 76.1363636363%;
  width: -webkit-calc( 335 / 440 *100% );
  width: calc( 335 / 440 *100% );
  margin: 5px 0 0;
  padding: 8px 4px;
  background: #f9f7ec;
}

/* 施設の詳細を見るボタン */
.view_detail {
  background: #e199a2;
  background: -moz-linear-gradient(top, #e199a2 0%, #cf4f50 100%);
  background: -webkit-linear-gradient(top, #e199a2 0%,#cf4f50 100%);
  background: linear-gradient(to bottom, #e199a2 0%,#cf4f50 100%);
  border: 1px solid #9F3132;
  border-radius: 3px;
  text-align: center;
  position: relative;
  width: 230px;
  margin: 0.5em auto 0;
}

.view_detail a {
  color: #fff;
  display: block;
  font-size: 120%;
  padding: .3em 0;
  line-height: 1.3em;
  margin: 0;
  text-decoration: none;
}

.view_detail:after {
  content: "";
  bottom: 0;
  right: 0.5em;
  height: 0.5em;
  position: absolute;
  width: 0.5em;
  top: 50%;
  margin-top: -0.3em;
  box-sizing: border-box;
  border: 0.4em solid transparent;
  border-left: 0.4em solid #fff;
}

.view_detail:hover {
  opacity: .8;
  transition: .5s all;
}




/* 1カラム用　施設紹介表示 */
.box_wide .desc_area {
  margin-left: 10px;
  width: 340px;
}

.box_wide .desc_area p {
  line-height: 1.5em;
  margin: 10px 0 0;
  width: 335px;
}

.box_wide .desc_area .item_data {
  margin-top: 0;
  width: 335px;
}


/* 見出し背景色 */
#pink_area .title_no {  background: #ec8dbd;}
#purple_area .title_no {  background: #be86d6;}
#orange_area .title_no {  background: #e67c57;}
#blue_area .title_no {  background: #49b0d0;}
#red_area .title_no {  background: #d86264;}
#dark_blue_area .title_no {  background: #64849b;}

/* バナー */
.bnr_list {
  width: 563px;
  margin: 50px auto 0;
}

.bnr_list p {
  font-feature-settings: "palt";
  font-size: 14px!important;
  padding: 3px 0.5em 0; 
}


/* ------------------------------------------------------------------
	産業施設
	===================================================================
　#pink_area
------------------------------------------------------------------ */
/*#pink_area .content_area {
  background: url(../image/bg_pink.png) right bottom no-repeat;
}*/
.content_other_box {
  justify-content: space-between;
}

.other_item_content:not(:nth-of-type(1)) {
  width: 290px;
}

.other_item_content:nth-of-type(1) figcaption {
  width: 100%;
  margin-bottom: -37px;
}

/* figureの中の見出し */
.other_item_content figcaption {
  width: 100%;
  margin-bottom: -36px;
  margin-top: 40px;
  color: #554926;
  font-size: 18px;
  font-weight: bold;
}

/* 見出し周りの装飾 */
.other_item_content figcaption {
	overflow: hidden;
}
.other_item_content figcaption span {
	position: relative;
	display: inline-block;
	margin: 0 0.5em 0 0;
	padding: 0 1.2em;
	text-align: left;
}

.other_item_content figcaption span::before {
	position: absolute;
	content: '●';
	width: 10%;
  top: 0;
	left: 0%;
  color: #cbb066;
}

.other_item_content figcaption span::after {
	position: absolute;
	content: '';
	width: 400%;
	top: 46%;
	height: 2px;
	background-color: #cbb066;
	left: 100%;
}

/* ------------------------------------------------------------------
	文化・公園施設
	===================================================================
　#purple_area
------------------------------------------------------------------ */
/*#purple_area .content_area {
  background: url(../image/bg_purple.png) right bottom no-repeat;
}*/

/* ------------------------------------------------------------------
	教育施設
	===================================================================
　#purple_area
------------------------------------------------------------------ */
#blue_area .bnr_list {
  width: 840px;
  margin-top: 10px;
  /* flex */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

#blue_area .bnr_list li {
  margin-top: 20px;
}

/* ------------------------------------------------------------------
	医療機関
	===================================================================
　#red_area
------------------------------------------------------------------ */
#red_area .content_area {
  background: url(../image/bg_red.png) right bottom no-repeat;
}

.con_bnrarea {
  border-top: 1px solid #b2b6b6;
  width: 1000px;
  margin: 40px auto 0;
  padding-top: 40px;
}

.con_bnrarea .bx-viewport,
.con_bnrarea.bx-controls {
  width: 563px!important;
  margin: 0 auto;
}

.con_bnrarea .bx-controls {
  width: 1000px!important;
}

.con_bnrarea .bx-pager {
  color: #666;
  font-family: Arial;
  font-size: .85em;
  font-weight: bold;
  text-align: center;
}

.con_bnrarea .bx-pager-item {
  display: inline-block;
  vertical-align: bottom;
}

.con_bnrarea .bx-pager.bx-default-pager a {
  background: #A4BBA3;
  border-radius: 5px;
  display: block;
  text-indent: -9999px;
  height: 10px;
  margin: 0 8px;
  outline: 0;
  width: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.con_bnrarea .bx-pager.bx-default-pager a:hover,
.con_bnrarea .bx-pager.bx-default-pager a.active,
.con_bnrarea .bx-pager.bx-default-pager a:focus {
  background: #2F6524;
}

.con_bnrarea .bx_slider li p {
  font-size: 14px!important;
  padding: 3px .5em 0;
}

.bnr_block {
  width: 1000px;
  margin: 40px auto 50px;
  padding: 0 170px;
  /* flex */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.bnr_block  li p {
    font-size: 14px!important;
    padding: 3px .5em 0;
}

.text_center{
    text-align: center;
}

.bnr_block li:not(:nth-of-type(1)) {
  width: 300px;
  margin: 20px 14px 0;
}