@charset "utf-8";

/* CSS Document */


/*----------------------------
構造
----------------------------*/

.area-dev-01, .area-dev-02 {
  padding-top: 0;
  text-align: left;
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin-top: 100px;
}

.area-dev-02 {
  margin-top: 80px;
}

.asia-map {
  width: 50%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

.asia-photo {
  width: 50%;
  display: block;
  margin: 180px auto 0 0;
  position: relative;
  float: left;
  max-width: 700px;
}

.area-dev-02 .asia-photo {
  margin: 80px auto 100px 0;
}

.asia-photo-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin: 20px 0 0 auto;
  max-width: 550px;
}

.asia-photo-list li {
  width: 47%;
  margin-bottom: 20px;
}

.asia-photo-list .caption {
  padding: 5px;
  font-size: 14px;
  line-height: 1.4em;
}

.asia-photo-list .caption .time {
  display: block;
  font-size: 0.8em;
}
.asia-photo-list .caption .small {
  font-size: 0.6em;
}

.area-dev .text-area {
  width: 45%;
  padding: 0 0 0 5%;
  display: inline-block;
  position: relative;
  z-index: 20;
}

.area-dev-01 .text-area {
  margin: 52vw auto 0;
}

.area-dev-02 .text-area {
  margin: 30vw auto 2vw;
}


.area-dev figure {
  position: relative;
}

.area-dev figcaption {
  position: absolute;
  right: 5px;
  bottom: 5px;
  text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 768px) {
  .area-dev-02 {
    margin-top: 0;
  }
  .asia-map {
    padding-top: 0;
    position: relative;
    width: 100%;
    top: auto;
    right: auto;
  }
  .area-dev .text-area {
    width: 90%;
    padding: 0;
    margin: 20px auto 20px;
    position: static;
    display: block;
  }
  
  .asia-photo {
    width: 100%;
    margin-top: 0;
	float: none;
  }
  .area-dev-02 .asia-photo {
    margin: 30px auto 20px 0;
  }

  .asia-photo-list {
    width: 90%;
    margin: 30px auto;
  }
}


/*----------------------------------
タブ
-----------------------------------*/

.tab {
  display: flex;
  justify-content: center;
}

.tab li {
  color: white;
  margin: 50px 10px 20px;
  padding: 10px 20px;
  cursor: pointer;
  list-style: none;
  transition: .3s;
  position: relative;
  border: 1px solid black;
  background: black;
  font-family: var(--font-family-mincho);
}

.tab li.active {
  color: #fff;
  cursor: auto;
}

.tab li:first-child {  border: 1px solid rgba(224, 124, 2, 1);}
.tab li:last-child { border: 1px solid rgba(44, 166, 224, 1);}

.tab li:first-child.active, .tab li:first-child:hover {
  background: linear-gradient(0deg, rgba(224, 124, 2, 1) 0%, rgba(254, 177, 0, 1) 100%);
  border: 1px solid rgba(224, 124, 2, 1);
}

.tab li:last-child.active, .tab li:last-child:hover {
  background: linear-gradient(0deg, rgba(44, 166, 224, 1) 0%, rgba(3, 110, 183, 1) 100%);
  border: 1px solid rgba(44, 166, 224, 1);
}

.tab li.active:after, .tab li:hover:after {
  display: block;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  border-color: rgba(255, 0, 0, 0);
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 10px;
  border-right-width: 10px;
  margin-left: -10px;
  border-top-color: inherit;
  top: 2.3em;
  left: 50%;
}

.area .floor-box {
  display: none;
}

.area .show.floor-box {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width:490px){
.tab li {
font-size: 12px;
padding: 10px;
}
}

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

-----------------------------------*/
.dev-photo-title {
  font-size: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  font-family: var(--font-family-mincho);
  margin: 20px auto;
  padding-bottom: 20px;
}

.hamamatsu-image video {
  width: 100%;
  height: 400px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  object-fit: cover;
  filter: brightness(40%) blur(10px);
}



/*----------------------------
再開発のリスト
----------------------------*/
.redev-list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.redev-list li {
width: 46.5%;
margin-bottom: 80px;
}

.redev-list figure {
position: relative;
}

.redev-list img.slide-arrow {
top: 25%;
transform: translateY(-25%);
}


/*----------------------------
subcontent
----------------------------*/
.subcontent-area {
background: rgba(255,255,255,0.9);
padding: 50px;
margin-top: 50px;
color: #000;
}
.subcontent-area .attention-area{
padding: 0;
  border-top: none;
}
.subcontent-area .title {
font-size: 1.2em;
border-bottom: 1px solid rgba(0,0,0,0.7);
margin-bottom: 10px;
}

#graph-area {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

#graph-area figure {
width: 47%;
}
#graph-area figcaption {
font-size: 10px;
color: #999;
text-align: justify;
margin-top: 5px;
letter-spacing: 0;
line-height: 1.5em;
}
#graph-area .text-area {
width: 47%;
color: #000;
}


@media screen and (max-width: 768px){
#graph-area .text-area,
#graph-area figure{
width: 100%;
}

#graph-area {
flex-direction: column-reverse;
}

#graph-area figure{
margin-top: 50px;
}
}