@charset "utf-8";

/* ID */
#navi {
  margin : 0;
  padding : 0;
  background-color : #eee;
}
#navi a {
  margin : 0;
  padding : 0;
  font-family : a-otf-futo-go-b101-pr6n, sans-serif;
  font-size : 16px;
  color : #000;
  width : 400px;
  height : 50px;
  display : table-cell;
  text-align : center;
  vertical-align : middle;
}
#navi a:hover {
  border-bottom : 4px solid #000;
}

/* CLASS */
.caption {
  font-size : 12px;
  color : #999;
}
.menu {
  margin : 0 auto;
  padding : 0;
  width : 410px;
  height : 150px;
}
.btn {
  display : block;
  margin : 0;
  padding : 0;
  width : 400px;
  height : 50px;
}
.on {
  cursor : default;
  pointer-events : none;
  border-bottom : 4px solid #000;
}
.off {
  cursor : pointer;
  pointer-events : auto;
  border-bottom : 4px solid #eee;
}

/* SP */
.photos, .persons {
  margin : 0;
  padding : 0;
  display : flex;
  flex-wrap : wrap;
  justify-content : space-between;
}
.photos {
  flex-direction: column;
}
.persons {
  flex-direction: column-reverse;
}
.movies {
  margin : 0;
  padding : 0;
  display : flex;
  flex-wrap : wrap;
  justify-content : space-between;
}
.photo_1, .photo_2, .person_1, .person_2, .movie_1, .movie_2 {
  margin : 0;
  padding : 0;
  width : 100%;
}
.photo, .person {
  margin : 0;
  /*padding : 10px;*/
}
.person_p {
  /*padding : 25px 0;*/
}

.architecture .mt20 {
  margin-top: 20px;
}
.architecture .mt40 {
  margin-top: 40px;
}
.architecture .pt40 {
  padding-top: 40px;
}
.architecture .person_p {
  margin-bottom: 20px;
}
.architecture .photo {
  margin-top: 20px;
}
.architecture .cont_heading {
  margin-bottom: 20px;
}
.architecture .cont_heading i {
  display: block;
  font-style: normal;
  font-size: 1.4rem;
}
.architecture .movies {
  margin-top: 80px;
}
.architecture .movies .movie_2 {
  margin-top: 20px;
}

.architecture .movies .movie_1 {
  width:100%;
  padding-bottom: 56.25%;
  height:0;
  position: relative;
}
.architecture .movies .movie_1 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and ( min-width : 768px ) {
  /* TAB */
  .menu {
    width : 615px;
    height : 70px;
  }
  #navi a {
    width : 200px;
    height : 70px;
  }
  .btn {
    width : 200px;
    height : 70px;
    display : inline-block;
  }
  .photos, .persons {
    flex-wrap: nowrap;
    flex-direction: row;
  }
  .photo_1, .photo_2 {
    width : 47%;
  }
  .photo_1 img, .photo_2 img {
    /*width : 50%;*/
  }
  .architecture .person_p {
    min-width: 320px;
    margin-left: 40px;
  }
  .person_1 {
    width: calc(80% - 40px);
  }
  .person_2 { width : 20%; }
  
  .movie_1, .movie_2 {
    width: 100%;
  }
  .movie_1 iframe {
    width: 100%;
  }
}
@media screen and ( min-width : 1280px ) {
  /* PC */
  .menu {
    width : 615px;
    height : 70px;
  }
  #navi a {
    width : 200px;
    height : 70px;
  }
  .btn {
    width : 200px;
    height : 70px;
    display : inline-block;
  }
  .photo_1, .photo_2 {
    width : 47%;
  }
  .architecture .movies {
    width: 80%;
    margin: 80px auto 0;
  }
  .architecture .movies .movie_2 {
    margin-top: 0;
  }
  .architecture .sub_heading {
    padding-top: 110px
  }
  .architecture .sub_headingFirst {
    padding-top: 0;
  }
  .person_1 .text p a {
    position: relative;
    padding-bottom: 1px;
  }
  .person_1 .text p a::before {
    content: '';
    position: absolute;
    display: block;
  }
  .person_1 .text p a::after {
    content: '';
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #333;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .5s;
  }
  .person_1 .text p a:hover::after {
    transform-origin: left;
    transform: scaleX(1);
    transition: transform .5s;
  }
}