@charset "utf-8";
@import url("/css/common.css");

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

title : 【栄タワーヒルズ】建設工事写真集｜ホテル型高級賃貸マンション
scope : /sakae/photogallery/build/

last modify : 2020/08/13 TCV_ヴィ/ Doan Thi Tuong Vi 

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

/* common ================================================
========================================================== */

/* ------------------------------------------------------------------
	栄タワーヒルズ 建設工事写真集
	===================================================================
　#gallery_content
------------------------------------------------------------------ */
body {
  font-size: 17px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

#content {
  margin: 0 auto;
  max-width: 970px;
  width: 95%;
}

@media screen and (max-width: 736px) {
  #content {
    width: 100%;
  }
}


#contents {
  margin: 0 auto;
  max-width: 930px;
}

.main_visual {
  background: url(../image/bg_main_img.jpg) 0 0 no-repeat;
  background-size: contain;
  margin: 1em auto 0;
  padding: 37.635% 0 0 0;
  position: relative;
}

@media screen and (max-width: 736px) {
  .main_visual {
    background: url(../image/bg_main_img_sp.jpg) 0 0 no-repeat;
    background-size: contain;
    margin: 0 auto;
    padding: 63.125% 0 0 0;
  }
}

.main_visual h1 {
  background: url(../image/ttl_bg.png) 0 0 no-repeat;
  padding: 1.722% 0 1.506% 0;
  position: absolute;
  top: 9.143%;
  width: 100%;
}

@media screen and (max-width: 736px) {
  .main_visual h1 {
    top: inherit;
    bottom: 6.25%;
    padding: 1.875% 0 2.188% 0;
  }
}

h1 span {
  display: inline-block;
  margin: 0 0 0 calc(27 / 930 * 100%);
}

h1 span:first-child {
  width: calc(191 / 930 * 100%);
}

@media screen and (max-width: 736px) {
  h1 span:first-child {
    width: 34.375%;
    margin: 0 0 0 5%;
    vertical-align: -16%;
  }
}

h1 span:last-child {
  width: calc(300 / 930 * 100%);
}

@media screen and (max-width: 736px) {
  h1 span:last-child {
    width: 50%;
    vertical-align: middle;
  }
}

h1 img {
  vertical-align: middle;
  width: 100%;
}

.txt_lead {
  margin: calc(40 / 930 * 100%) auto 0;
  width: calc(700 / 930 * 100%);
}

@media screen and (max-width: 736px) {
  .txt_lead {
    margin: 1em auto 0;
    width: 90%;
  }
}

/* ------------------------------------------------------------------
	栄タワーヒルズ 建設工事写真集 > 建設の推移
	===================================================================
　[id^="data_"]
------------------------------------------------------------------ */
[id^="data_"] {
  margin: calc(54 / 930 * 100%) auto 0;
  max-width: 890px;
}

@media screen and (max-width: 736px) {
  [id^="data_"] {
    margin: 1.5em auto 0;
    width: 95%;
  }
}


/* 見出し */
[id^="data_"] h2 {
  background: url(../image/img_bg_month.jpg) 0 0 no-repeat;
  overflow: hidden;
  padding: 2px 0 0 0;
}

/* 見出し周りの余白 */
[id^="data_"] h2 span {
  color: #91731a;
  /*position: relative;*/
  display: block;
  float: left;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  margin: 0 0;
  text-align: left;
}

[id^="data_"] .month_data {
  padding: 0 2.3em .227em;
  text-align: center;
  width: 240px;
}

@media screen and (max-width: 800px) {
  [id^="data_"] .month_data {
    padding: 0 2.3em .5em;
  }
}

[id^="data_"] .title {
  background: #fff;
  padding: 0 1em;
}

@media screen and (max-width: 736px) {
  [id^="data_"] .title {
    display: block;
    line-height: 1.5;
    padding: 0;
    width: 100%;
  }
}



[id^="data_"] p {
  margin: calc(5 / 890 * 100%) auto 0;
  text-align: center;
}

@media screen and (max-width: 800px) {
  [id^="data_"] .lead {
    margin-top: .8em;
  }
}

@media screen and (max-width: 736px) {
  [id^="data_"] .lead {
    text-align: left;
    margin: 2% 0 0;
  }
}

.photo_flame {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 50px;
  overflow: hidden;
}

.photo_flame li {
  border: 1px solid #b5a979;
  float: left;
  margin: calc(20 / 890 * 100%) 0 0;
  max-height: 218px;
  overflow: hidden;
  text-align: center;
  width: calc(290 / 890 * 100%);
}

.photo_flame li {
  position: relative;
}

.photo_flame li::after {
  background: url("/sakae/image_cmn/ico_mag_glass_brown.png");
  bottom: 0;
  content: "";
  height: 25px;
  pointer-events: none;
  position: absolute;
  right: 0;
  width: 25px;
}

@media screen and (max-width: 736px) {
  .photo_flame li::after {
    height: 4vw;
    width: 4vw;
    background-size: contain;
  }
}

.photo_flame li:nth-of-type(3n) {
  margin: calc(20 / 890 * 100%) 0 0 0;
}

.photo_flame li a {
  display: block;
  overflow: hidden;
}

.photo_flame li.space {
  background: url("https://jice.homemate.co.jp/picture/towerhills_img/sakae/build/img_no_image3.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.photo_flame li.space::after {
  content: none;
}

.tn_0 {
  top: 0;
}

.tn_70 {
  transform: translateY(-18.229%);
}

.tn_150 {
  transform: translateY(-39.063%);
}

.tn_170 {
  transform: translateY(-44.271%);
}

.tn_176 {
  transform: translateY(-44.233%);
}


/* 日付 */
[class^="bg_"] {
  color: #4c3a05;
  display: block;
  font-size: 18px;
  font-weight: bold;
  padding: 6px 5px 4px 5px;
}

/* 日付背景色 */
.bg_blue {
  background: #cae1ec;
}

.bg_yellow {
  background: #ece9ca;
}

.bg_green {
  background: #caece0;
}

.bg_purple {
  background: #eddef3;
}


/* マウスオーバー */
.photo_flame li a img:hover {
  opacity: .7;
}

/* 画像部分 */
.photo_flame figure {
  display: block;
  overflow: hidden;
  position: relative;
}

.thumb_img {
  position: relative;
  width: 100%;
}

.mag_glass {
  bottom: 0;
  position: absolute;
  right: 0;
}

.fancybox-close {
  background-image: url(../image/btn_close.png);
  background-position: 0 0;
  cursor: pointer;
  height: 57px;
  left: inherit;
  position: absolute;
  right: -29px;
  top: -29px;
  width: 55px;
  z-index: 8040;
}

#colorbox, #cboxOverlay, #cboxWrapper {
  z-index: 9999999;
}

#cboxTitle {
  margin-top: .5em;
}

/* SEO分 */
#seo {
  border: 2px solid #dfd9c0;
  margin: 70px auto 0 auto;
  padding: 10px 10px 10px 10px;
  width: 780px;
}