@charset "UTF-8";
.rough {
  background: url("../design/images/design.png") no-repeat center top;
  height: 10481px; }

main {
  background: #FFF; }
  main img {
    width: 100%; }

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

common

------------------------- */
/* ページタイトル */
.page-title {
  background: url("../design/images/mv-page.jpg") no-repeat center; }
  @media screen and (max-width: 750px) {
    .page-title {
      background: url("../design/images/mv-page-sp.jpg") no-repeat center; } }

/* ぱんくず */
.breadcrumbs {
  position: absolute;
  top: 0;
  max-width: 1024px;
  width: 90%; }
  .breadcrumbs ol li {
    color: #333; }
    .breadcrumbs ol li a {
      color: #333; }

/* title */
.title-cate-en {
  font-family: "EB Garamond", serif;
  font-size: calc(30px + ((60 - 30) * (100vw - 480px) / (1920 - 480)));
  margin-bottom: 1.5rem;
  color: #A89F8D;
  font-weight: 500;
  letter-spacing: 0.05em; }
  .title-cate-en span {
    font-size: calc(70px + ((100 - 70) * (100vw - 480px) / (1920 - 480))); }
  @media screen and (max-width: 750px) {
    .title-cate-en {
      margin-bottom: 3rem; } }

/* 画像内caption　*/
.img .img-cap {
  bottom: 1rem; }

/* caption */
.block-caption {
  /*border-top: 1px solid #E3E2E2;*/
  padding: 3rem 0;
  margin-top: 6rem; }
  .block-caption .caption {
    color: #333; }

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

sunset-view

------------------------- */
.block-sunset-view {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 47.1354166667%;
  background: url("../design/images/img_sunset-view.png") 50% 50% no-repeat;
  background-size: cover;
  background-position: center;
  background-size: cover;
  position: relative; }
  @media screen and (max-width: 750px) {
    .block-sunset-view {
      display: block;
      width: 100%;
      height: 0;
      padding-top: 99.2%;
      background: url("../design/images/img_sunset-view_sp.png") 50% 50% no-repeat;
      background-size: cover; } }
  .block-sunset-view .title {
    width: 90%;
    text-align: center;
    position: absolute;
    font-size: calc(20px + ((38 - 20) * (100vw - 480px) / (1920 - 480)));
    color: #8A7751;
    top: 10rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); }
    @media screen and (max-width: 750px) {
      .block-sunset-view .title {
        line-height: 1.8;
        top: 8rem; } }
  .block-sunset-view .img-cap {
    font-size: calc(10px + ((12 - 10) * (100vw - 480px) / (1920 - 480)));
    font-family: "Noto Serif CJK JP", "Noto Serif JP", YuMincho, "YuMincho", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", -apple-system, blinkMacSystemFont, serif;
    position: absolute;
    bottom: 2rem;
    right: 1rem;
    color: #FFF; }

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

block-facade

------------------------- */
.block-facade {
  padding-top: 12rem; }
  @media screen and (max-width: 1170px) {
    .block-facade {
      padding-top: 9rem; } }
  @media screen and (max-width: 750px) {
    .block-facade {
      padding-top: 5rem; } }
  .block-facade .title-cate-en {
    text-align: center;
    margin-bottom: 3rem; }
    @media screen and (max-width: 750px) {
      .block-facade .title-cate-en {
        text-align: left; } }
  .block-facade .h3-wrap {
    margin-bottom: 7rem; }
    @media screen and (max-width: 750px) {
      .block-facade .h3-wrap {
        margin-bottom: 4rem; } }
    .block-facade .h3-wrap .text {
      color: #333;
      width: 100%;
      font-size: calc(14px + ((18 - 14) * (100vw - 480px) / (1920 - 480))); }
      @media screen and (max-width: 750px) {
        .block-facade .h3-wrap .text {
          line-height: 1.8; } }
    .block-facade .h3-wrap .h3-common {
      text-align: center;
      width: 90%;
      margin: 0 auto;
      font-size: calc(18px + ((28 - 18) * (100vw - 480px) / (1920 - 480)));
      line-height: 1.6;
      color: #8A7751; }
      @media screen and (max-width: 750px) {
        .block-facade .h3-wrap .h3-common {
          width: 100%;
          text-align: left; } }
  .block-facade .designer-profile {
    margin-top: 7rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid #333333; }
    @media screen and (max-width: 750px) {
      .block-facade .designer-profile {
        margin-top: 5rem; } }
    .block-facade .designer-profile .title-profile {
      color: #8A7751;
      font-size: 2.0rem;
      font-family: "EB Garamond", serif;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 2rem; }
      .block-facade .designer-profile .title-profile:after {
        border-top: 1px solid #333;
        content: "";
        width: 90%;
        margin-left: 2rem; }
    .block-facade .designer-profile .wrap-profile {
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      flex-wrap: wrap;
      flex-wrap: -webkit-wrap; }
      .block-facade .designer-profile .wrap-profile .photo-logo {
        width: 35%;
        padding-right: 3rem;
        margin-right: 3rem;
        border-right: 1px solid #9B9B9B;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        -webkit-align-items: center; }
        @media screen and (max-width: 1170px) {
          .block-facade .designer-profile .wrap-profile .photo-logo {
            padding-right: 2rem;
            margin-right: 2rem; } }
        @media screen and (max-width: 750px) {
          .block-facade .designer-profile .wrap-profile .photo-logo {
            justify-content: space-between;
            -webkit-justify-content: space-between;
            max-width: inherit;
            width: 50%;
            margin: 0 auto 1.3rem;
            padding-right: 0;
            border-right: none; } }
        .block-facade .designer-profile .wrap-profile .photo-logo .photo {
          max-width: 149px;
          width: 47%; }
        .block-facade .designer-profile .wrap-profile .photo-logo .logo {
          max-width: 130px;
          width: 44%;
          margin: 0 0 0 3rem; }
          @media screen and (max-width: 750px) {
            .block-facade .designer-profile .wrap-profile .photo-logo .logo {
              margin: 0; } }
      .block-facade .designer-profile .wrap-profile .profile {
        width: 62%; }
        @media screen and (max-width: 750px) {
          .block-facade .designer-profile .wrap-profile .profile {
            width: 100%; } }
        .block-facade .designer-profile .wrap-profile .profile .title {
          color: #8A7751;
          font-size: calc(16px + ((24 - 16) * (100vw - 480px) / (1920 - 480)));
          margin-bottom: 1.5rem; }
          @media screen and (max-width: 750px) {
            .block-facade .designer-profile .wrap-profile .profile .title {
              text-align: center;
              margin-bottom: 2rem; } }
          .block-facade .designer-profile .wrap-profile .profile .title .sub {
            font-size: calc(12px + ((16 - 12) * (100vw - 480px) / (1920 - 480)));
            margin-bottom: 0.7rem; }
            @media screen and (max-width: 750px) {
              .block-facade .designer-profile .wrap-profile .profile .title .sub {
                display: inline; } }
        .block-facade .designer-profile .wrap-profile .profile .text {
          font-size: calc(12px + ((14 - 12) * (100vw - 480px) / (1920 - 480)));
          line-height: 1.8; }

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

block-ent-app
block-ent-hall

------------------------- */
.block-ent-app .h3-wrap .text,
.block-ent-hall .h3-wrap .text {
  color: #FFF;
  text-align: left;
  width: 100%;
  margin-left: 0;
  margin-right: 0; }
.block-ent-app .h3-wrap .h3-common,
.block-ent-hall .h3-wrap .h3-common {
  text-align: left;
  color: #FFF;
  width: 100%; }
  @media screen and (max-width: 750px) {
    .block-ent-app .h3-wrap .h3-common,
    .block-ent-hall .h3-wrap .h3-common {
      font-size: 2.4rem;
      line-height: 1.8; } }
.block-ent-app .h3-wrap .wrap-text-img,
.block-ent-hall .h3-wrap .wrap-text-img {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  flex-wrap: wrap;
  flex-wrap: -webkit-wrap;
  align-items: center;
  -webkit-align-items: center; }
  .block-ent-app .h3-wrap .wrap-text-img .text,
  .block-ent-hall .h3-wrap .wrap-text-img .text {
    width: 790px;
    width: 77%; }
    @media screen and (max-width: 750px) {
      .block-ent-app .h3-wrap .wrap-text-img .text,
      .block-ent-hall .h3-wrap .wrap-text-img .text {
        width: 100%;
        margin-bottom: 3rem; } }
  .block-ent-app .h3-wrap .wrap-text-img .img,
  .block-ent-hall .h3-wrap .wrap-text-img .img {
    max-width: 229px;
    width: 22%; }
    @media screen and (max-width: 750px) {
      .block-ent-app .h3-wrap .wrap-text-img .img,
      .block-ent-hall .h3-wrap .wrap-text-img .img {
        width: 100%;
        max-width: inherit;
        margin-bottom: 3rem; } }

/* アプローチ */
.block-ent-app {
  margin-top: 15rem; }
  @media screen and (max-width: 1170px) {
    .block-ent-app {
      margin-top: 9rem; } }
  @media screen and (max-width: 750px) {
    .block-ent-app {
      margin-top: 7rem; } }
  .block-ent-app .img-bg {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 52.34375%;
    background: url("../design/images/img_ent-app.png") 50% 50% no-repeat;
    background-size: cover;
    background-position: center;
    background-size: cover; }
    @media screen and (max-width: 750px) {
      .block-ent-app .img-bg {
        display: block;
        width: 100%;
        height: 0;
        padding-top: 71.7333333333%;
        background: url("../design/images/img_ent-app_sp.png") 50% 50% no-repeat;
        background-size: cover; } }
  .block-ent-app .bg-container {
    background: url("../design/images/bg_ent-app.png") no-repeat center;
    background-size: cover;
    padding: 9rem 0 13rem; }
    @media screen and (max-width: 1170px) {
      .block-ent-app .bg-container {
        padding: 7rem 0 11rem; } }
    @media screen and (max-width: 750px) {
      .block-ent-app .bg-container {
        padding: 5rem 0 7rem; } }

/* ホール */
.block-ent-hall .img-bg {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 52.34375%;
  background: url("../design/images/img_ent-hall_01.png") 50% 50% no-repeat;
  background-size: cover;
  background-position: center;
  background-size: cover; }
  @media screen and (max-width: 750px) {
    .block-ent-hall .img-bg {
      display: block;
      width: 100%;
      height: 0;
      padding-top: 70.1333333333%;
      background: url("../design/images/img_ent-hall_01_sp.png") 50% 50% no-repeat;
      background-size: cover; } }
.block-ent-hall .bg-container {
  background: url("../design/images/bg_ent-hall.png") no-repeat center top;
  background-size: cover;
  padding: 9rem 0 13rem; }
  @media screen and (max-width: 1170px) {
    .block-ent-hall .bg-container {
      padding: 7rem 0 11rem; } }
  @media screen and (max-width: 750px) {
    .block-ent-hall .bg-container {
      padding: 5rem 0 7rem; } }
.block-ent-hall .img .sp {
  margin-top: 3rem; }

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

landplan

------------------------- */
.block-landplan {
  background: #EFEFEF;
  padding: 12rem 0; }
  @media screen and (max-width: 1170px) {
    .block-landplan {
      padding: 9rem 0; } }
  @media screen and (max-width: 750px) {
    .block-landplan {
      padding: 7rem 0; } }
  .block-landplan .h3-wrap .text {
    color: #333;
    text-align: left;
    width: 100%;
    margin-left: 0; }
  .block-landplan .h3-wrap .h3-common {
    text-align: left;
    color: #333;
    width: 100%; }
  .block-landplan .landplan .box .wrap-title {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    flex-wrap: -webkit-wrap;
    align-items: center;
    -webkit-align-items: center;
    margin-bottom: 1rem; }
    .block-landplan .landplan .box .wrap-title .number {
      background: #8A7751;
      color: #FFF;
      margin-right: 1rem;
      width: 30px;
      padding: .5rem 0;
      font-size: calc(11px + ((20 - 11) * (100vw - 480px) / (1920 - 480)));
      text-align: center; }
      @media screen and (max-width: 750px) {
        .block-landplan .landplan .box .wrap-title .number {
          width: 20px; } }
    .block-landplan .landplan .box .wrap-title .title {
      font-size: calc(14px + ((22 - 14) * (100vw - 480px) / (1920 - 480)));
      color: #8A7751; }
  .block-landplan .landplan .box .img {
    margin-bottom: 1.5rem; }
  .block-landplan .landplan .box .text {
    font-size: calc(12px + ((16 - 12) * (100vw - 480px) / (1920 - 480)));
    line-height: 1.6; }
  .block-landplan .landplan .img-bg {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 76.1220825853%;
    background: url("../design/images/img_landplan_01.png") 50% 50% no-repeat;
    background-size: cover;
    background-position: center;
    background-size: cover;
    max-width: 1114px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    margin-bottom: 3rem; }
    @media screen and (max-width: 750px) {
      .block-landplan .landplan .img-bg {
        background: none;
        height: auto;
        padding-top: 0; } }
    .block-landplan .landplan .img-bg .box {
      max-width: 470px;
      width: 46%;
      margin-top: -18rem; }
      @media screen and (max-width: 750px) {
        .block-landplan .landplan .img-bg .box {
          max-width: inherit;
          width: 100%;
          margin-top: 3rem; } }
  .block-landplan .landplan .wrap-box {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    flex-wrap: wrap;
    flex-wrap: -webkit-wrap; }
    .block-landplan .landplan .wrap-box .box {
      max-width: 320px;
      width: 32%; }
      @media screen and (max-width: 970px) {
        .block-landplan .landplan .wrap-box .box {
          max-width: inherit;
          display: -webkit-box;
          display: -moz-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          justify-content: space-between;
          -webkit-justify-content: space-between;
          width: 100%;
          margin-top: 3rem;
          flex-direction: row-reverse; } }
      @media screen and (max-width: 970px) {
        .block-landplan .landplan .wrap-box .box .img {
          width: 47%; } }
      @media screen and (max-width: 970px) {
        .block-landplan .landplan .wrap-box .box .set-text {
          width: 50%; } }

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

block-view

------------------------- */
.block-view {
  padding-top: 12rem; }
  @media screen and (max-width: 1170px) {
    .block-view {
      padding-top: 9rem; } }
  .block-view .h3-wrap .text {
    color: #333;
    text-align: left;
    width: 100%;
    margin-left: 0; }
  .block-view .h3-wrap .h3-common {
    text-align: left;
    color: #333;
    width: 100%; }
  .block-view .h3-wrap .wrap-text-img {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    flex-wrap: wrap;
    flex-wrap: -webkit-wrap;
    align-items: center;
    -webkit-align-items: center; }
    .block-view .h3-wrap .wrap-text-img .set {
      width: 43%; }
      @media screen and (max-width: 750px) {
        .block-view .h3-wrap .wrap-text-img .set {
          width: 100%;
          margin-bottom: 3rem; } }
    .block-view .h3-wrap .wrap-text-img .img {
      width: 55%; }
      @media screen and (max-width: 750px) {
        .block-view .h3-wrap .wrap-text-img .img {
          width: 100%; } }
      .block-view .h3-wrap .wrap-text-img .img .cap {
        font-size: 1.2rem;
        margin-top: 1rem;
        text-align: right; }
  .block-view .view {
    margin-top: 7rem; }
    @media screen and (max-width: 750px) {
      .block-view .view {
        margin-top: 3rem; } }
    .block-view .view .img-bg {
      display: block;
      width: 100%;
      height: 0;
      padding-top: 26.09375%;
      background: url("../design/images/img_view_01.png") 50% 50% no-repeat;
      background-size: cover;
      background-position: center;
      background-size: cover; }
      @media screen and (max-width: 750px) {
        .block-view .view .img-bg {
          display: block;
          width: 100%;
          height: 0;
          padding-top: 61.6%;
          background: url("../design/images/img_view_01_sp.png") 50% 50% no-repeat;
          background-size: cover; } }