@charset "UTF-8";
@import url("global.css");
.concept {
  margin-bottom: 100px;
}
.concept .block {
  padding-top: 120px;
  position: relative;
}
.concept .block .image {
  width: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  left: 0;
}
.concept .block .wrapper {
  z-index: 2;
  position: relative;
}
.concept .block .main {
  background-color: #fff;
  width: 50%;
  padding-top: 100px;
  padding-bottom: 100px;
  padding-left: 80px;
  margin-left: auto;
  border-top-left-radius: 30px;
}
.concept .block .title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 40px;
}
.concept .block p {
  text-align: justify;
}
.concept .block p + p {
  margin-top: 20px;
}

/* ------------------------------
 Event
------------------------------ */
.section .sectitle {
  text-align: center;
  margin-bottom: 40px;
}
.section .sectitle span {
  display: block;
}
.section .sectitle .en {
  font-size: 50px;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  -webkit-text-stroke: 1px #111;
  text-stroke: 1px #111;
  line-height: 1;
}
.section .sectitle .ja {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

#event {
  margin-bottom: 100px;
}
#event ul.eventlist {
  margin: 0 -25px;
  display: flex;
  flex-wrap: wrap;
}
#event ul.eventlist li {
  width: 50%;
  box-sizing: border-box;
  padding: 0 25px;
}
#event ul.eventlist li a {
  display: block;
  line-height: 1.5;
}
#event ul.eventlist li a:hover .image::before {
  opacity: .3;
}
#event ul.eventlist li a:hover .image figure img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
#event ul.eventlist li .image {
  position: relative;
  margin-bottom: 30px;
}
#event ul.eventlist li .image::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #374360;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
  z-index: 2;
}
#event ul.eventlist li .image figure {
  height: 0;
  padding-top: 60%;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
#event ul.eventlist li .image figure img {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#event ul.eventlist li .image .category {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #374360;
  color: #fff;
  text-align: center;
  font-weight: bold;
  width: 160px;
  padding: 8px 10px;
  font-size: 14px;
  z-index: 3;
}
#event ul.eventlist li .image .staff {
  position: absolute;
  border-radius: 50%;
  border: #fff 2px solid;
  overflow: hidden;
  width: 68px;
  height: 68px;
  right: 20px;
  bottom: -20px;
  z-index: 4;
}
#event ul.eventlist li .image .staff img {
  border-radius: 50%;
}
#event ul.eventlist li .posttitle {
  text-align: justify;
  font-weight: 700;
  padding: 0 20px;
}
#event ul.eventlist li .date {
  margin: 20px 10px 0;
  padding: 10px 10px;
  border-top: #ccc 1px solid;
  border-bottom: #ccc 1px solid;
}
#event ul.eventlist li .text {
  font-size: 14px;
  margin-top: 15px;
  padding: 0 20px;
}

/* ------------------------------
 Works
------------------------------ */
#works ul.carousel li {
  margin: 0 10px;
}
#works ul.carousel li a {
  display: block;
  height: 0;
  padding-top: 66%;
  position: relative;
}
#works ul.carousel li a figure {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#works ul.carousel li a figure img {
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#works ul.carousel li a::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(45deg, #374360, rgba(55, 67, 96, 0) 50%);
  mix-blend-mode: multiply;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
#works ul.carousel li a .title {
  position: absolute;
  bottom: 15px;
  left: 20px;
  color: #fff;
  line-height: 1.5;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 3;
  opacity: 0;
  transform: translateX(-20px);
}
#works ul.carousel li a:hover figure img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
#works ul.carousel li a:hover::before {
  opacity: 1;
}
#works ul.carousel li a:hover .title {
  opacity: 1;
  transform: none;
}

/* ------------------------------
 Estate
------------------------------ */
#estate .estatelist {
  margin: 70px -20px 0;
  display: flex;
  flex-wrap: wrap;
}
#estate .estatelist li {
  width: 33.33333%;
  box-sizing: border-box;
  padding: 0 20px 40px;
}
#estate .estatelist li a {
  display: block;
  text-align: center;
}
#estate .estatelist li a:hover .image::before {
  opacity: 1;
}
#estate .estatelist li a:hover .image img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}
#estate .estatelist li .name {
  position: relative;
  background-color: #f3f3f3;
  margin-bottom: 4px;
  font-weight: 700;
  padding: 10px 70px;
  line-height: 26px;
}
#estate .estatelist li .name span {
  display: block;
}
#estate .estatelist li .name .cat {
  color: #fff;
  width: 60px;
  height: 30px;
  line-height: 29px;
  letter-spacing: 3px;
  padding-left: 3px;
  position: absolute;
  box-sizing: border-box;
  top: 8px;
  left: 5px;
}
#estate .estatelist li .name .cat.land {
  background-color: #374360;
}
#estate .estatelist li .name .cat.house {
  background-color: #62749B;
}
#estate .estatelist li .name .new {
  position: absolute;
  top: -24px;
  left: 50%;
  margin-left: -40px;
  width: 80px;
  background-color: #CE394D;
  color: #fff;
  letter-spacing: 0;
  border-radius: 3px;
  padding: 2px 0 1px 2px;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 700;
}
#estate .estatelist li .name .new::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 6px 0 6px;
  border-color: #CE394D transparent transparent transparent;
  position: absolute;
  bottom: -7px;
  left: 50%;
  margin-left: -6px;
}
#estate .estatelist li .inner {
  position: relative;
  height: 300px;
}
#estate .estatelist li .image {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#estate .estatelist li .image::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right top, #374360, rgba(55, 67, 96, 0));
  z-index: 2;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
#estate .estatelist li .image img {
  z-index: 1;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#estate .estatelist li .data {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 15px;
  line-height: 1.5;
}
#estate .estatelist li .data .address {
  font-size: 14px;
}
#estate .estatelist li .data .price {
  font-weight: 700;
}
#estate .estatelist li .data .price span {
  color: #374360;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-size: 20px;
  padding-right: 5px;
  letter-spacing: 0;
}
#estate .estatelist li .data .square {
  display: inline-block;
  text-align: left;
}
#estate .estatelist li .data .square dl {
  line-height: 26px;
  font-weight: bold;
}
#estate .estatelist li .data .square dl dt {
  border: #ccc 1px solid;
  line-height: 24px;
  padding: 0 7px 0 8px;
  background-color: rgba(255, 255, 255, 0.5);
  float: left;
  font-size: 14px;
}
#estate .estatelist li .data .square dl dd {
  margin-left: 55px;
}
#estate .estatelist li .data .square dl + dl {
  margin-top: 3px;
}

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

 Responsive-Breakpoint-1 (1500px)
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1.5 (1320px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1320px) {
  /* ------------------------------
   Event
  ------------------------------ */
  #event ul.eventlist {
    margin: 0 -20px;
  }
  #event ul.eventlist li {
    padding: 0 20px;
  }

  /* ------------------------------
   Estate
  ------------------------------ */
  #estate .estatelist {
    margin: 70px -1vw 0;
  }
  #estate .estatelist li {
    padding: 0 1vw 2vw;
  }
  #estate .estatelist li .data .address {
    letter-spacing: 0;
  }
  #estate .estatelist li .data .square {
    font-size: 14px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .concept .block {
    padding-top: 80px;
  }
  .concept .block .main {
    padding-top: 60px;
    padding-bottom: 30px;
    padding-left: 60px;
  }
  .concept .block .title {
    font-size: 20px;
  }

  /* ------------------------------
   Event
  ------------------------------ */
  #event {
    margin-bottom: 100px;
  }
  #event ul.eventlist {
    margin: 0 -12px;
  }
  #event ul.eventlist li {
    padding: 0 12px;
  }
  #event ul.eventlist li a:hover .image figure img {
    transform: none;
  }
  #event ul.eventlist li .image::before {
    display: none;
  }
  #event ul.eventlist li .image .staff {
    width: 60px;
    height: 60px;
    right: 5px;
    bottom: -20px;
  }
  #event ul.eventlist li .posttitle {
    padding: 0 10px;
  }
  #event ul.eventlist li .date {
    margin: 20px 0 0;
  }
  #event ul.eventlist li .text {
    padding: 0 10px;
  }

  /* ------------------------------
   Estate
  ------------------------------ */
  #estate .estatelist {
    margin: 60px -10px 0;
  }
  #estate .estatelist li {
    width: 50%;
    padding: 0 10px 30px;
  }
  #estate .estatelist li a:hover .image img {
    transform: none;
  }
  #estate .estatelist li .name {
    padding: 10px;
    font-size: 15px;
  }
  #estate .estatelist li .name .cat {
    width: 70px;
    height: 26px;
    line-height: 24px;
    font-size: 14px;
    top: -16px;
    left: 50%;
    margin-left: -35px;
    border-radius: 3px;
  }
  #estate .estatelist li .name .new {
    top: -16px;
    left: -8px;
    margin: 0;
    width: 50px;
    border-radius: 3px;
    padding: 0 0 0 2px;
    font-size: 14px;
    transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
  }
  #estate .estatelist li .image::before {
    display: none;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .concept {
    margin-bottom: 50px;
  }
  .concept .block {
    padding-top: 0;
  }
  .concept .block .image {
    width: 90%;
    position: relative;
    height: 0;
    padding-top: 50%;
  }
  .concept .block .image img {
    position: absolute;
    top: 0;
    left: 0;
  }
  .concept .block .main {
    width: 90%;
    padding-top: 40px;
    padding-bottom: 0;
    padding-left: 40px;
    border-top-left-radius: 10px;
    margin-left: auto;
    margin-top: -8vw;
  }
  .concept .block .title {
    font-size: 21px;
    margin-bottom: 30px;
  }

  /* ------------------------------
   Event
  ------------------------------ */
  .section .sectitle {
    margin-bottom: 30px;
  }
  .section .sectitle .en {
    font-size: 40px;
  }
  .section .sectitle .ja {
    font-size: 18px;
  }

  #event {
    margin-bottom: 60px;
  }
  #event ul.eventlist {
    margin: 0;
    display: block;
  }
  #event ul.eventlist li {
    width: auto;
    margin-bottom: 30px;
    padding: 0;
  }
  #event ul.eventlist li .image {
    margin-bottom: 22px;
  }
  #event ul.eventlist li .image .category {
    width: 100px;
    padding: 5px 10px;
    font-size: 13px;
  }
  #event ul.eventlist li .text {
    margin-top: 10px;
  }

  /* ------------------------------
   Works
  ------------------------------ */
  #works {
    margin: 0;
  }
  #works ul.carousel li {
    margin: 0;
  }
  #works ul.carousel li a::before {
    opacity: 1;
  }
  #works ul.carousel li a .title {
    opacity: 1;
    transform: none;
  }
  #works ul.carousel li a:hover figure img {
    transform: none;
  }

  /* ------------------------------
   Estate
  ------------------------------ */
  #estate .estatelist {
    margin: 50px 0 0;
    display: block;
  }
  #estate .estatelist li {
    width: auto;
    padding: 0 0 45px;
  }
  #estate .estatelist li .name {
    font-size: 14px;
  }
  #estate .estatelist li .inner {
    height: 0;
    padding-top: 70%;
  }
}