@charset "utf-8";


/*#######################################################*/
/*##                                                   ##*/
/*##  クリスタルモール大濠                             ##*/
/*##                                                   ##*/
/*#######################################################*/

/*---------------------------------------------------------
カテゴリタイトル
---------------------------------------------------------*/
#mall #categoryTtl{
	background-image: url(../mall/img/bg_category_ttl.jpg);
}

#categoryTtl #cateTtl{
	width: 394px;
}
	@media screen and (max-width: 959px) {
		#categoryTtl{
			height: 137px;
			padding-top: 25px;
		}
		#categoryTtl .inner{
			padding: 0px 0px;
		}
		#categoryTtl #cateTtl{
			width: 204px;
		}
	}


/*---------------------------------------------------------
contents
---------------------------------------------------------*/
#mall #contents {
	padding-bottom: 80px;
}
	@media screen and (max-width: 959px) {
		#mall #contents {
			padding-bottom: 110px;
		}
	}
	
	@media screen and (max-width: 640px) {
		#mall #contents {
			padding-bottom: 40px;
		}
	}

/*--------------------------------------------------------

	クリスタルモール大濠  
	
----------------------------------------------------------*/

/* クリスタルモール大濠について */
#mall .mallAbout {
  margin-bottom: 80px;
}
	@media screen and (max-width: 640px) {
    #mall .mallAbout {
      margin-bottom: 40px;
    }
	}
#mall .mall-list {
  overflow: hidden;
  margin-left: -34px;
  margin-bottom: 15px;
}
	@media screen and (max-width: 640px) {
    #mall .mall-list {
      overflow: hidden;
      margin-left: -20px;
    }
	}
  @media screen and (max-width: 339px) {
    #mall .mall-list {
      margin-left: 0px;
    }
  }
  #mall .mall-list li {
    float: left;
    width: calc(33.3% - 34px);
    margin-left: 34px;
    margin-bottom: 28px;
  }
    @media screen and (max-width: 640px) {
      #mall .mall-list li {
        width: calc(50% - 20px);
        margin-left: 20px;
      }
    }
    @media screen and (max-width: 339px) {
      #mall .mall-list li {
        float: none;
        width: 100%;
        margin-left: 0px;
      }
    }

#mall .mallAbout img {
  max-width: 100%;
}
  #mall .mallAbout .catch {
    text-align: center;
    color: #22aaaa;
    font-weight: bold;
    font-size:112.5%;
    padding: 22px 0px;
  }
    @media screen and (max-width: 640px) {
      #mall .mallAbout .catch {
        padding: 15px 0px 7px 0px;
      }
    }
  #mall .mallAbout .other {
    overflow: hidden;
  }
    #mall .mallAbout .other .photo {
      width: 520px;
      float: left;
    }
    @media screen and (max-width: 640px) {
      #mall .mallAbout .other .photo {
        width: auto;
        float: none;
        margin-left: -10px;
        overflow: hidden;
      }
    }
    #mall .mallAbout .other .catch {
      text-align: left;
    }
    #mall .mallAbout .other .photo li {
      float: left;
      margin-right: 18px;
    }
    @media screen and (max-width: 640px) {
      #mall .mallAbout .other .photo li {
      width: calc(50% - 10px);
      float: left;
      margin-right: 0px;
      margin-left: 10px;
      }
    }

/* 交通アクセス	*/
#mall .mallAccess {
  overflow: hidden;
  margin-bottom: 30px;
}
  #mall .mallAccess .photo{
    float: right;
    padding-left: 25px;
  }
    @media screen and (max-width: 959px) {
      #mall .mallAccess .photo{
        width:45%;
        padding-left: 15px;
      }
    }
    @media screen and (max-width: 640px) {
      #mall .mallAccess .photo{
        max-width:100%;
        width: auto;
        padding-left: 0px;
        float: none;
        display: block;
        margin: 0px auto 20px auto;
      }
    }
  #mall .mallAccess .ad{
    overflow: hidden;
    margin-bottom: 15px;
  }
    #mall .mallAccess .ad dt{
      position: relative;
      font-size: 112.5%;
      color: #077272;
      font-weight: bold;
      padding-left: 22px;
      margin-bottom: 10px;
    }

  #mall .mallAccess .ad dt:before {
    border: 3px solid #398e8e;
    content: "";
    height: 8px;
    width: 8px;
    left: 0;
    position: absolute;
    border-radius: 25px;
    top: 6px;
  }

  #mall .mallAccess .howto{
    overflow: hidden;
  }
    #mall .mallAccess .howto dt{
      background: #077272;
      color: #fff;
      font-weight: bold;
      width: 100px;
      text-align: center;
      line-height: 120%;
      padding: 15px 0px;
      float: left;
    }
    #mall .mallAccess .howto dd{
      overflow: hidden;
      padding-left: 20px;
      padding-top: 10px;
    }
    #mall .mallAccess .howto dd span{
      position: relative;
      font-weight: bold;
      padding-left: 18px;
    }
    #mall .mallAccess .howto dd span:before{
      content: "";
      position: absolute;
      top:5px;
      left: 0px;
      border: 8px solid transparent;
      border-top: 10px solid #398e8e;
    }

#mall .gmap {
  margin-bottom: 70px;
}
	@media screen and (max-width: 959px) {
    #mall .gmap {
      position: relative;
      padding-top: 75%;
      height: 0;
      overflow: hidden;
      margin-bottom: 40px;
    }
    #mall .gmap iframe,
    #mall .gmap object,
    #mall .gmap embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
	}


/* 貸しスペース一覧	*/
#mall .mallSpace {
  overflow: hidden;
  margin-bottom: 70px;
}
  #mall .mallSpace ul.tablist{
    width: 100%;
    border-bottom: 5px solid #248282;
    margin-left: -10px;
    overflow: hidden;
  }
    @media screen and (max-width: 640px) {
      #mall .mallSpace ul.tablist{
        margin-left: -5px;
      }
    }
  #mall .mallSpace ul.tablist li{
    float:left;
    width: calc(33.3% - 12px);
    margin-left: 10px;
    text-align:center;
    padding:11px 0px 8px 0px;
    border-top: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    cursor: pointer;
    color: #248282;
    font-weight: bold;
    }
    @media screen and (max-width: 640px) {
      #mall .mallSpace ul.tablist li{
        width: calc(33.3% - 7px);
        margin-left: 5px;
        }
    }
  #mall .mallSpace ul.tablist li.select{
    background:#248282;
    border-top: 1px solid #248282;
    border-left: 1px solid #248282;
    border-right: 1px solid #248282;
    color:#FFF;
  }

  #mall .mallSpace .disnon {
    display: none;
  }

  #mall .mallSpace .content_wrap {
    background: #e4f8f8;
    padding: 40px;
  }
    @media screen and (max-width: 640px) {
      #mall .mallSpace .content_wrap {
        padding: 25px;
      }
    }

  #mall .mallSpace .content_wrap h5 {
    text-align: center;
    font-size: 125%;
    font-weight: bold;
    color: #077272;
    padding: 0px 0px 25px 0px;
  }
  #mall .mallSpace .content_wrap figure{
    background: #fff;
    padding: 10px;
    text-align: center;
  }
  #mall .mallSpace .content_wrap img {
    max-width: 100%;
  }
  #mall .mallSpace .content_wrap .info {
    background: #fefefc;
    border-bottom: 1px dotted #bbb;
    border-top: 1px dotted #bbb;
    margin-top: 28px;
  }
  #mall .mallSpace .content_wrap .info dt {
    text-align: left;
    position: relative;
    width: 80px;
    padding: 20px 15px 20px 45px;
    float: left;
    font-weight: bold;
  }
    @media screen and (max-width: 640px) {
      #mall .mallSpace .content_wrap .info dt {
        width: 100%;
        float: none;
        padding: 10px;
        text-align: center;
        color:  #077272;
        box-sizing: border-box;
      }
    }
  #mall .mallSpace .content_wrap .info dt:before{
      content: "";
      position: absolute;
      top:24px;
      left: 20px;
      border: 7px solid transparent;
      border-left: 9px solid #398e8e;
    }
    @media screen and (max-width: 640px) {
      #mall .mallSpace .content_wrap .info dt:before{
        display: none;
        }
    }
  #mall .mallSpace .content_wrap .info dd {
    padding: 20px 15px;
    float: left;
  }
    @media screen and (max-width: 640px) {
      #mall .mallSpace .content_wrap .info dd {
        float: none;
        padding: 5px 15px 10px 15px;
        text-align: center;
      }
    }
  #mall .mallSpace .content_wrap .info dd.btn {
    float: right;
    padding: 12px 15px;
  }
    @media screen and (max-width: 640px) {
      #mall .mallSpace .content_wrap .info dd.btn {
        float: none;
        padding: 5px 15px 10px 15px;
      }
    }
  #mall .mallSpace .content_wrap .info dd.btn a {
    border: 2px solid #434343;
    border-radius: 25px;
    display: block;
    padding: 7px 20px 7px 45px;
    text-decoration: none;
    font-family: 'Noto Sans Japanese', sans-serif;
    font-size: 87.5%;
    background-image: url(../common/icon_pdf.png);
    background-repeat: no-repeat;
    background-position: 15px 4px;
  }
    @media screen and (max-width: 640px) {
      #mall .mallSpace .content_wrap .info dd.btn a {
        padding: 10px 20px 10px 45px;
        text-align: center;
      }
    }

/* 建築概要	*/
#mall .mallOutline {
  overflow: hidden;
  margin-bottom: 30px;
}
  #mall .mallOutline .photo {
    float: left;
  }
    @media screen and (max-width: 959px) {
      #mall .mallOutline .photo {
        width: 35%;
      }
    }
    @media screen and (max-width: 640px) {
      #mall .mallOutline .photo {
        float: none;
        display: block;
        margin: 0 auto 20px auto;
        max-width: 100%;
        width: auto;
      }
    }
  #mall .mallOutline table {
    width:  560px;
    float: right;
    border: 1px solid #c4c4c4;
  }
    @media screen and (max-width: 959px) {
      #mall .mallOutline table {
        width:  63%;
        font-size: 1.5rem;
      }
    }
    @media screen and (max-width: 640px) {
      #mall .mallOutline table {
        width:  100%;
        float: none;
      }
    }
  #mall .mallOutline table th {
    width:  115px;
    padding: 16px 0px;
    background: #e9fcfc;
    text-align: center;
    color:#077272;font-weight: bold;
    border-bottom: 1px dotted #bbb;
  }
    @media screen and (max-width: 640px) {
      #mall .mallOutline table th {
        width:  80px;
        padding: 14px 0px;
        font-size: 1.3rem;
      }
    }
  #mall .mallOutline table td {
    padding: 16px 15px 16px 30px;
    border-bottom: 1px dotted #bbb;
  }
    @media screen and (max-width: 640px) {
      #mall .mallOutline table td {
        padding: 14px 15px 14px 15px;
        font-size: 1.3rem;
      }
    }