@charset "utf-8";

/* NAVI */
.global_navi_project a {
  border-bottom: solid 1px #000;
}

/* main */
.main {
  background-color: #000;
  color: #fff;
}
/*@media all and (max-width: 1280px) {*/
/*  .main{ margin-top: calc(96vw / 1280 * 100);}*/
/*}*/
@media all and (max-width: 767px) {
  .main{ margin-top: calc(47vw / 375 * 100);}
}

.main .imagebox {
  /* max-height: 80vh; */
  position: relative;
  overflow: hidden;
}
.main .imagebox img {
  width: 100%;
  position: absolute;
  margin: auto 0;
  top: -100%; bottom: -100%;
}

.main .textbox {}
@media all and (max-width: 767px) {
  .main .textbox {
    position: relative;
    margin: 0;
  }
}

.main .lang {
  margin: 48px 28px 0;
}
@media all and (max-width: 1280px) {
  .main .lang {
    margin: calc(48vw / 1280 * 100) calc(28vw / 1280 * 100) 0;
  }
}
@media all and (max-width: 767px) {
  .main .lang {
    margin: 0 calc(19vw / 375 * 100);
    padding: 0;
  }
}

.main .flex {
  display: -webkit-flex;
  display: flex;
  width: 100%;
}
@media all and (max-width: 767px) {
  .main .flex {
    display: block;
    width: auto !important;
  }
}

.project_header {
  -webkit-flex: 1 1 0;
  flex:1 1 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: -6px;
}
@media all and (max-width: 1280px) {
  .project_header {
    margin-top: calc(-6vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .project_header {
    width: 100%;
    margin-top: calc(36vw / 375 * 100);
    padding: 0;
  }
}

.project_office{
  color: #1e88e5;
}
@media all and (max-width: 767px) {
  .project_office{
    font-size: calc(14vw / 375 * 100);
    margin-bottom: calc(18vw / 375 * 100);
  }
}

.project_title {
  letter-spacing: .5px;
}
@media all and (max-width: 1280px) {
  .project_title {letter-spacing: calc(.5vw / 1280 * 100);}
}
@media all and (max-width: 767px) {
  .project_title {
    font-size: calc(20vw / 375 * 100);
    line-height: calc(30vw / 375 * 100);
    margin-top: calc(-5vw / 375 * 100);
    margin-bottom: calc(-5vw / 375 * 100);
  }
}

.project_office + .project_title{
  margin-top: 3px;
  color: #1e88e5;
}
@media all and (max-width: 1280px) {
  .project_office + .project_title{margin-top: calc(3vw / 1280 * 100);}
}
@media all and (max-width: 767px) {
  .project_office + .project_title{margin-top: calc(-5vw / 375 * 100);}
}

.project_sub{margin-top: -1px;}
@media all and (max-width: 1280px) {
  .project_sub{margin-top: calc(-1vw / 1280 * 100);}
}
@media all and (max-width: 767px) {
  .project_sub{margin-top: 0;}
}

.project_office + .project_title + .project_sub{
  color: #1e88e5;
}

.name {
  letter-spacing: 1px;
  margin-top: 2px;
  margin-bottom: -7px;
}
@media all and (max-width: 1280px) {
  .name {
    letter-spacing: calc(1vw / 1280 * 100);
    margin-top: calc(2vw / 1280 * 100);
    margin-bottom: calc(-7vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .name {
    margin-top: calc(12vw / 375 * 100);
    line-height: calc(22vw / 375 * 100);
    margin-bottom: calc(-4vw / 375 * 100);
  }
}

.area {
  line-height: 1;
  margin-top: 16px;
  color: #808080;
}
.project_office + .project_title + .project_sub > .area{
  color: #1e88e5;
}
@media all and (max-width: 1280px) {
  .area {
    margin-top: calc(16vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .area {
    margin-top: calc(18vw / 375 * 100);
  }
}

.project_text {
  -webkit-flex: 0 0 calc(616vw / 1320 * 100);
  flex: 0 0 calc(616vw / 1320 * 100);
  letter-spacing: 1px;
  white-space: pre-wrap;
  text-align: justify;
  margin: -7px 64px -7px;
}
@media all and (max-width: 1280px) {
  .project_text {
    letter-spacing: calc(1vw / 1280 * 100);
    margin: calc(-7vw / 1280 * 100) calc(64vw / 1280 * 100) calc(-7vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .project_text {
    line-height: calc(26vw / 375 * 100);
    margin: calc(30vw / 375 * 100) 0 calc(-6vw / 375 * 100);
  }
}

.project_text > div{
  width: calc(616vw / 1320 * 100);
}
@media all and (max-width: 767px) {
  .project_text > div {
    width: 100%;
  }
}

.main .image { margin-top: 48px; }
@media all and (max-width: 1280px) {
  .main .image { margin-top: calc(48vw / 1280 * 100); }
}
@media all and (max-width: 767px) {
  .main .image{ margin-top: calc(36vw / 375 * 100); }
}


.main .loop .image:first-child{margin-top: 48px;}
@media all and (max-width: 1280px) {
  .main .loop .image:first-child{ margin-top: calc(48vw / 1280 * 100); }
}
@media all and (max-width: 767px) {
  .main .loop .image:first-child{ margin-top: calc(36vw / 375 * 100); }
}

.main .image img { width: 100%; }

.main .image figcaption {
  letter-spacing: 1px;
}
@media all and (max-width: 1280px) {
  .main .image figcaption {
    margin-top: calc(12vw / 1280 * 100);
    letter-spacing: calc(1vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .main .image figcaption {
    font-size: calc(24vw / 800 * 100);
    letter-spacing: calc(.5vw / 800 * 100);
    line-height: calc(32vw / 800 * 100);
    margin-top: calc(28vw / 800 * 100);
  }
}

.sub_textbox .project_text{
  white-space: nowrap;
  margin-top: 0;
}
@media all and (max-width: 767px) {
  .sub_textbox .project_text{
    margin-top: calc(36vw / 375 * 100);
  }
}

.main .project_title2 {
  letter-spacing: .5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: -6px;
}
@media all and (max-width: 1280px) {
  .main .project_title2 {
    letter-spacing: calc(.5vw / 1280 * 100);
    margin-top: calc(-6vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .main .project_title2 {
    margin-top: 0;
  }
}

.main .project_text2 {
  letter-spacing: 1px;
  white-space: pre-wrap;
  text-align: justify;
  margin-top: -7px;
}
.main .project_title2 + .project_text2{
  margin-top: 11px;
}
@media all and (max-width: 1280px) {
  .main .project_text2 {
    letter-spacing: calc(1vw / 1280 * 100);
    margin-top: calc(-7vw / 1280 * 100);
  }
  .main .project_title2 + .project_text2{
    margin-top: calc(11vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .main .project_text2 {
    line-height: calc(26vw / 375 * 100);
    margin-top: calc(-6vw / 375 * 100);
  }
  .main .project_title2 + .project_text2{
    margin-top: calc(18vw / 375 * 100);
  }
}

.main .fields {
  margin-top: 24px;
  display: -webkit-flex;
  display: flex;
}
.main .sub_textbox + .fields {
  margin-top: 48px;
}
.main .fields:first-child { margin-top: 48px; }
.main .lang + .fields { margin-top: 48px; }
@media all and (max-width: 1280px) {
  .main .fields { margin-top: calc(24vw / 1280 * 100); }
  .main .sub_textbox + .main .fields { margin-top: calc(48vw / 1280 * 100); }
  .main .fields:first-child { margin-top: calc(48vw / 1280 * 100); }
  .main .lang + .fields { margin-top: calc(48vw / 1280 * 100); }
}
@media all and (max-width: 767px) {
  .main .fields {
    margin-top: calc(12vw / 375 * 100);
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .main .fields:first-child { margin: calc(36vw / 375 * 100) 0 0; }
  .main .lang + .fields { margin-top: calc(36vw / 375 * 100); }
}

.main .fields figure {
  -webkit-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.main .fields figure:not(:last-child) { margin-right: 8px; }
@media all and (max-width: 767px) {
  .main .fields figure {
    width: 100%;
  }
  .main .fields figure:not(:last-child) { margin-right: calc(7vw / 375 * 100); }
  .main .fields.col4 figure { width: calc(50% - 25vw / 800 * 100); }
  .main .fields.col4 figure:nth-child(2) { margin-top: 0; }
  .main .fields.col4 figure:nth-child(2n-1) { margin-right: calc(12.5vw / 800 * 100); }
  .main .fields.col4 figure:nth-child(2n) { margin-left: calc(12.5vw / 800 * 100); }
}

.main .fields figure .bg {
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
.main .fields figure .bg img { width: 100%; }

.main .fields figure figcaption {
  margin-top: 16px;
  letter-spacing: 1px;
  line-height: 32px;
}
@media all and (max-width: 1280px) {
  .main .fields figure figcaption {
    margin-top: calc(12vw / 1280 * 100);
    letter-spacing: calc(1vw / 1280 * 100);
    line-height: calc(32vw / 1280 * 100);
  }
}

@media all and (max-width: 767px) {
  .main .fields figure figcaption {
    font-size: calc(24vw / 800 * 100);
    letter-spacing: calc(.5vw / 800 * 100);
    line-height: calc(32vw / 800 * 100);
    margin-top: calc(28vw / 800 * 100);
  }
}

.main .project_data {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'MS ゴシック', sans-serif;
}

.main .project_data dt{
  color: #808080;
  font-size: 12px;
  line-height: 20px;
  margin-bottom: -4px;
  margin-top: 12px;
}
.main .project_data dt:first-of-type{
  margin-top: -4px;
}
.main .project_data-mt dt:first-of-type{/*タイトルがあるとき*/
  margin-top: 44px;
}
@media all and (max-width: 1280px) {
  .main .project_data dt{
    font-size: calc(12vw / 1280 * 100);
    line-height: calc(20vw / 1280 * 100);
    margin-bottom: calc(-4vw / 1280 * 100);
    margin-top: calc(12vw / 1280 * 100);
  }
  .main .project_data dt:first-of-type{
    margin-top: calc(-4vw / 1280 * 100);
  }
  .main .project_data-mt dt:first-of-type{
    margin-top: calc(44vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .main .project_data dt{
    font-size: calc(12vw / 375 * 100);
    line-height: calc(20vw / 375 * 100);
    margin-bottom: 0;
    margin-top: calc(18vw / 375 * 100);
  }
  .main .project_data dt:first-of-type{
    margin-top: calc(32vw / 375 * 100);
  }
  .main .project_data-mt dt:first-of-type{
    margin-top: calc(32vw / 375 * 100);
  }
}

.main .project_data dd{
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: -3px;
  margin-top: 5px;/*  margin-top: 8px;*/
  white-space: pre-wrap;
}
@media all and (max-width: 1280px) {
  .main .project_data dd{
    font-size: calc(14vw / 1280 * 100);
    line-height: calc(20vw / 1280 * 100);
    margin-bottom: calc(-3vw / 1280 * 100);
    margin-top: calc(5vw / 1280 * 100);/*  margin-top: 8px;*/
  }
}
@media all and (max-width: 767px) {
  .main .project_data dd{
    font-size: calc(14vw / 375 * 100);
    line-height: calc(20vw / 375 * 100);
    margin-bottom: calc(-3vw / 375 * 100);
    margin-top: 0;
  }
}

.footer{
  background-color: #000;
}
.footer .small{
  color: #fff;
  border-color: #fff;
}


/*Related----------------*/
.related{
  margin-top: 0;
  margin-right: 28px;
  margin-left: 28px;
  padding-top: 15px;
  border-top: 1px solid #fff;
  margin-top: 80px;
}
@media all and (max-width: 767px) {
.related{
  margin-right: calc(19vw / 375 * 100);
  margin-left: calc(19vw / 375 * 100);
}
}
.related .title h3{
  color:#fff;
  padding-bottom: 36px;
  font-size: 16px;
  letter-spacing: .1px;
  font-weight: bold;
}
@media all and (max-width: 767px) {
  .related .title h3{
    padding-bottom: 28px;
  }
}

.tab_cont {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: -48px;
}
@media all and (max-width: 1280px) {
  .tab_cont {
    margin-bottom: calc(-48vw / 1280 * 100);
  }
}


.tab_cont .item {
  margin: 0 32px 35px 0;
  width: calc(100% / 4 - 32px * 3 / 4);
  transition: .5s;
}
.tab_cont .item:nth-child(4n) {
  margin-right: 0;
}
@media all and (max-width: 1920px) {
  .tab_cont .item {
    width: calc(100% / 4 - 32px * 3 / 4);
  }
}
.tab_cont .item:hover {
  opacity: .5;
}
@media all and (max-width: 767px) {
  .tab_cont .item:hover {
    opacity: 1;
  }
}
/* @media all and (max-width: 1280px) {
  .tab_cont .item {
    margin: 0 calc(32vw / 1280 * 100) calc(48vw / 1280 * 100) 0;
    width: calc(100% / 3 - 32vw / 1280 * 100 * 2 / 3);
  }
} */
@media all and (max-width: 1280px) {
  .tab_cont .item {
    margin: 0 24px 36px 0;
    width: calc(100% / 3 - 24px * 2 / 3);
  }
  .tab_cont .item:nth-child(4n) {
    margin-right: 20px;
  }
  .tab_cont .item:nth-child(3n) {
    margin-right: 0;
  }
}

.tab_cont .item a { color: #fff; }


.tab_cont .item .cover{
  padding-bottom: 14px;
}

.tab_cont .item .cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tab_cont .item .lang {
  margin: 0;
  margin-top: -6px;
  margin-bottom: -6px;
}
@media all and (max-width: 1280px) {
  .tab_cont .item .lang {
    margin-top: calc(-6vw / 1280 * 100);
    margin-bottom: calc(-6vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .tab_cont .item .lang {
    margin-top: calc(-5vw / 375 * 100);
    margin-bottom: calc(-5vw / 375 * 100);
  }
}

.tab_cont .item .area {
  letter-spacing: .1px;
  margin-top: 15px;
  color: #fff;
}
.tab_cont .item:not(.hoshino) .area {
  color: #1e88e5;
}
@media all and (max-width: 1280px) {
  .tab_cont .item .area {
    letter-spacing: calc(.1vw / 1280 * 100);
  }
}

/*SP版 2Column甩*/
@media all and (max-width: 767px) {
  .tab_cont__2columns{
    display: flex;
    justify-content: flex-start;
  }
  .tab_cont__2columns .item{
    width: calc(50% - 13px);
    margin-bottom: calc(40vw / 375 * 100);
  }
  .tab_cont .item:nth-child(even) {
    margin-right: 0;
  }
  .tab_cont__2columns .item:nth-child(odd){
    margin-right: 26px;
  }
  .tab_cont__2columns .item:nth-child(2){
    margin-top: 0;
  }
}

/* item list */
.list_typography {
  font-size: 10px;
  line-height: 16px;
}