@charset "UTF-8";
@import url("global.css");
#mainvisual {
  position: relative;
  height: 100vh;
  width: 100%; }
  #mainvisual .mainvisual-logo {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 100;
    width: 130px; }
  #mainvisual #mainslide {
    position: relative;
    overflow: hidden; }
    #mainvisual #mainslide .swiper-container {
      overflow: visible; }
    #mainvisual #mainslide .swiper-main .swiper-wrapper {
      height: 100vh;
      position: relative;
      overflow: hidden; }
      #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide {
        overflow: hidden;
        position: relative; }
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide .slide-img {
          height: 100%; }
          #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide .slide-img .slidebg-wrap {
            width: 100%;
            height: 100%;
            position: relative; }
            #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide .slide-img .slidebg-wrap .slidebg {
              position: absolute;
              top: 0;
              left: 0;
              z-index: 0;
              width: 100%;
              height: 100%;
              background-repeat: no-repeat;
              background-position: center;
              background-size: cover;
              backface-visibility: hidden; }
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide1 .ontext {
          z-index: 10;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
          left: 8vw;
          text-align: left; }
          #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide1 .ontext .logo {
            width: 60%; }
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide1 .slidebg-wrap .slidebg {
          background-image: url("../img/slide01_231113.jpg");
          background-position: center center; }
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide2 .ontext {
          z-index: 10;
          position: absolute;
          left: 5vw;
          bottom: 90px;
          text-align: left;
          color: #fff; }
          #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide2 .ontext .subtitle {
            font-size: 36px;
            line-height: 1.6;
            font-weight: 900;
            margin-bottom: 10px;
            letter-spacing: 0.1em; }
          #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide2 .ontext .title {
            font-size: 84px;
            line-height: 1.4;
            font-weight: 900;
            letter-spacing: 0.1em; }
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide2 .slidebg-wrap .slidebg {
          background-image: url("../img/slide02.jpg");
          background-position: center center; }
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .slide-img {
          display: -webkit-flex;
          display: flex; }
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext {
          order: 2;
          width: 50%;
          height: 100%;
          margin-left: auto;
          position: relative;
          background-color: #ECEBE8;
          display: -webkit-flex;
          display: flex;
          align-content: center;
          -ms-flex-line-pack: center;
          flex-wrap: wrap; }
          #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea {
            position: relative;
            text-align: left;
            padding: 0 60px; }
            #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .en {
              position: absolute;
              top: -65px;
              left: -40px;
              color: #EE7900;
              font-family: "Caveat", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
              letter-spacing: 0;
              font-size: 54px;
              transform: rotate(-12deg);
              -webkit-transform: rotate(-12deg);
              line-height: 1;
              z-index: 5; }
            #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .maintitle {
              line-height: 1.5;
              font-size: 74px;
              font-weight: 900;
              position: relative;
              z-index: 10;
              letter-spacing: 0.1em;
              white-space: nowrap;
              color: #464343; }
            #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .subtitle {
              margin: 25px 0; }
              #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .subtitle .text1 {
                display: inline-block;
                vertical-align: middle;
                color: #fff;
                font-weight: 700;
                font-size: 23px;
                background-color: #63757E;
                letter-spacing: 0.1em;
                line-height: 1.6; }
              #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .subtitle .text2 {
                display: inline-block;
                vertical-align: middle;
                font-size: 38px;
                font-weight: 900;
                margin-left: 20px;
                letter-spacing: 0.1em;
                color: #464343; }
            #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .comment {
              font-size: 15px; }
          #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .subimg1 {
            position: absolute;
            z-index: 2;
            width: 340px;
            transform: rotate(5deg);
            -webkit-transform: rotate(5deg);
            top: -70px;
            right: 30%; }
            #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .subimg1 img {
              border: 4px solid #fff;
              box-shadow: 2px 0 10px rgba(31, 31, 31, 0.15); }
          #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .subimg2 {
            position: absolute;
            z-index: 1;
            width: 260px;
            transform: rotate(-4deg);
            -webkit-transform: rotate(-4deg);
            top: 45px;
            right: 8%; }
            #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .subimg2 img {
              border: 4px solid #fff;
              box-shadow: 2px 0 8px rgba(31, 31, 31, 0.15); }
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .slidebg-wrap {
          width: 50%; }
          #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .slidebg-wrap .slidebg {
            background-image: url("../img/slide03_mainimg.jpg");
            background-position: center center; }
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slidefavo .ontext {
          z-index: 10;
          position: absolute;
          left: 5vw;
          top: 50%;
          margin-top: -100px; }
          #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slidefavo .ontext .title {
            width: 420px; }
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slidefavo .slidebg-wrap .slidebg {
          background-image: url("../img/slidefavo.jpg");
          background-position: center center; }
    #mainvisual #mainslide .thumbarea {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 130px;
      box-sizing: border-box;
      padding: 15px 15px 30px;
      z-index: 100;
      display: -webkit-flex;
      display: flex;
      justify-content: flex-end;
      align-items: center; }
      #mainvisual #mainslide .thumbarea .swiper-thumb {
        display: flex;
        display: -webkit-flex;
        margin: 0;
        height: 100%; }
        #mainvisual #mainslide .thumbarea .swiper-thumb .swiper-slide {
          height: 100%; }
          #mainvisual #mainslide .thumbarea .swiper-thumb .swiper-slide .thumb-img {
            width: 150px;
            margin-right: 15px;
            box-sizing: border-box;
            border: 1px solid #1F1F1F;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
            height: 100%;
            transition: all 0.3s cubic-bezier(0.52, 0.08, 0.18, 1);
            -webkit-transition: all 0.3s cubic-bezier(0.52, 0.08, 0.18, 1);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden; }
            #mainvisual #mainslide .thumbarea .swiper-thumb .swiper-slide .thumb-img::after {
              content: "";
              background-color: rgba(31, 31, 31, 0.6);
              opacity: 1;
              transition: all 0.3s cubic-bezier(0.52, 0.08, 0.18, 1);
              -webkit-transition: all 0.3s cubic-bezier(0.52, 0.08, 0.18, 1);
              backface-visibility: hidden;
              -webkit-backface-visibility: hidden;
              position: absolute;
              width: 100%;
              height: 100%;
              z-index: 1;
              left: 0;
              top: 0; }
          #mainvisual #mainslide .thumbarea .swiper-thumb .swiper-slide.swiper-slide-thumb-active .thumb-img::after {
            opacity: 0; }
          #mainvisual #mainslide .thumbarea .swiper-thumb .swiper-slide:hover .thumb-img {
            opacity: .7;
            cursor: pointer; }
  #mainvisual .scroll-arrow {
    position: absolute;
    z-index: 100;
    bottom: 40px;
    width: 80px;
    left: 0;
    right: 0;
    margin: 0 auto; }
    #mainvisual .scroll-arrow a {
      display: block;
      border: 1px solid #fff;
      border-radius: 999px;
      width: 80px;
      height: 80px;
      margin: 0 auto; }
      #mainvisual .scroll-arrow a:hover {
        opacity: .6; }
      #mainvisual .scroll-arrow a::before {
        content: "";
        background-color: #fff;
        margin-left: 2px;
        margin-top: 10px;
        width: 1px;
        height: 22px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        left: 0;
        right: 0;
        margin: 0 auto; }
      #mainvisual .scroll-arrow a::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        border-bottom: solid 1px #fff;
        border-right: solid 1px #fff;
        left: 0;
        right: 0;
        bottom: 25px;
        margin: 0 auto;
        -webkit-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(45deg); }

#event .titlearea {
  position: relative;
  margin-bottom: 50px; }
  #event .titlearea::before {
    position: absolute;
    background-color: #1F1F1F;
    width: calc((100% - 1200px) / 2);
    height: 1px;
    left: -35px;
    top: 35px;
    content: ""; }
  #event .titlearea .wrapper {
    position: relative; }
    #event .titlearea .wrapper::before {
      content: "EVENT";
      font-size: 220px;
      font-weight: 900;
      color: #f5f5f5;
      position: absolute;
      right: 0;
      top: -30px;
      line-height: 1;
      z-index: -1; }
  #event .titlearea .contentstitle {
    display: -webkit-flex;
    display: flex;
    align-items: center; }
    #event .titlearea .contentstitle .title {
      font-size: 39px;
      font-weight: 700; }
    #event .titlearea .contentstitle .sub {
      margin-left: 30px;
      font-weight: 500; }
#event .list {
  display: -webkit-flex;
  display: flex;
  margin: 0 -3%; }
  #event .list li {
    margin: 0 3%;
    flex: 1; }
    #event .list li a {
      display: block; }
      #event .list li a:hover figure .image::after {
        opacity: .5; }
      #event .list li a:hover figure .image img {
        transform: scale(1.1);
        -webkit-transform: scale(1.1); }
      #event .list li a:hover figure .arrow {
        opacity: 1; }
      #event .list li a figure {
        position: relative;
        overflow: hidden; }
        #event .list li a figure .image {
          position: relative;
          padding-top: 66.66%; }
          #event .list li a figure .image img {
            position: absolute;
            left: 0;
            top: 0;
            transition: all 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
            -webkit-transition: all 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden; }
          #event .list li a figure .image::after {
            content: "";
            background-color: rgba(70, 67, 67, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
            -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden; }
        #event .list li a figure .arrow {
          border: 1px solid #fff;
          border-radius: 999px;
          width: 85px;
          height: 85px;
          position: absolute;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
          z-index: 11;
          left: 0;
          right: 0;
          margin: 0 auto;
          opacity: 0;
          transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
          -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden; }
          #event .list li a figure .arrow::before {
            content: "";
            background-color: #fff;
            margin-left: 2px;
            margin-top: 10px;
            width: 22px;
            height: 1px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            left: 0;
            right: 0;
            margin: 0 auto; }
          #event .list li a figure .arrow::after {
            content: "";
            position: absolute;
            width: 8px;
            height: 8px;
            border-top: solid 1px #fff;
            border-right: solid 1px #fff;
            top: 50%;
            left: 0;
            right: -12px;
            margin: 0 auto;
            -webkit-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg); }
      #event .list li a .textarea {
        margin-top: 35px; }
        #event .list li a .textarea .datearea {
          display: -webkit-flex;
          display: flex;
          align-content: center;
          margin-bottom: 8px;
          line-height: 1; }
          #event .list li a .textarea .datearea .head {
            border-right: 1px solid #C8C8C8;
            padding-right: 12px;
            margin-right: 12px; }
            #event .list li a .textarea .datearea .head i {
              margin-right: 3px; }
        #event .list li a .textarea .entrytitle {
          font-size: 20px;
          color: #124A97;
          line-height: 1.6;
          font-weight: 500; }
#event .morebtn {
  max-width: 400px;
  margin: 60px auto 0; }
  #event .morebtn a {
    display: block;
    text-align: center;
    padding: 15px;
    border: 1px solid #1F1F1F;
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
    -webkit-transition: all 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; }
    #event .morebtn a i {
      margin-right: 5px; }
    #event .morebtn a:hover {
      color: #fff; }
      #event .morebtn a:hover::after {
        left: 0; }
    #event .morebtn a::after {
      content: "";
      background-color: #1F1F1F;
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 99px;
      left: -101%;
      transition: all 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
      -webkit-transition: all 0.6s cubic-bezier(0.52, 0.08, 0.18, 1);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      top: 0;
      z-index: -1; }

#concept {
  margin-top: 160px;
  margin-left: calc((100% - 1200px) / 2); }
  #concept a {
    display: block; }
    #concept a:hover .box {
      opacity: .6; }
    #concept a .box {
      background: url("../img/concept_bg.jpg") no-repeat center center;
      background-size: cover;
      padding: 400px 0 80px;
      position: relative;
      transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
      -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden; }
      #concept a .box .textarea {
        text-align: left; }
        #concept a .box .textarea .title span {
          display: inline-block;
          background-color: #fff;
          font-weight: 700;
          padding: 18px;
          line-height: 1;
          font-size: 65px;
          color: #124A97; }
        #concept a .box .textarea .subtext {
          margin-top: 35px; }
          #concept a .box .textarea .subtext span {
            display: inline-block;
            font-weight: 500;
            background-color: #fff;
            padding: 11px 20px;
            font-size: 19px;
            line-height: 1;
            font-feature-settings: "palt";
            letter-spacing: 0.1em; }
        #concept a .box .textarea .more {
          background-color: #124A97;
          color: #fff;
          margin-top: 30px;
          padding: 10px;
          width: 270px;
          text-align: center;
          box-sizing: border-box;
          position: relative;
          font-size: 18px;
          font-weight: 600; }
          #concept a .box .textarea .more::after {
            content: "";
            margin: 0 auto;
            width: 24px;
            height: 5px;
            border-bottom: 1px solid #fff;
            border-right: 1px solid #fff;
            -webkit-transform: skew(45deg) translateY(-50%);
            transform: skew(45deg) translateY(-50%);
            z-index: 2;
            transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
            -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            position: absolute;
            top: 25px;
            right: 15px; }

#galleryarea {
  overflow: hidden;
  margin-top: 130px; }
  #galleryarea .inner {
    display: -webkit-flex;
    display: flex;
    margin-right: -4px; }
    #galleryarea .inner > div {
      width: 50%;
      box-sizing: border-box;
      border-right: 4px solid #fff; }
      #galleryarea .inner > div a {
        display: block;
        position: relative;
        height: 0;
        padding-top: 78%;
        overflow: hidden; }
        #galleryarea .inner > div a:hover figure::after {
          opacity: .2; }
        #galleryarea .inner > div a:hover figure img {
          transform: scale(1.1);
          -webkit-transform: scale(1.1); }
        #galleryarea .inner > div a figure {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0; }
          #galleryarea .inner > div a figure::after {
            content: "";
            background-color: #464343;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: .5;
            transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
            -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden; }
          #galleryarea .inner > div a figure img {
            transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
            -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden; }
        #galleryarea .inner > div a .titlearea {
          color: #fff;
          line-height: 1;
          position: absolute; }
          #galleryarea .inner > div a .titlearea .title {
            font-size: 36px;
            font-weight: 700;
            letter-spacing: 0.15em; }
          #galleryarea .inner > div a .titlearea .en {
            font-family: "Caveat", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
            font-size: 170px;
            letter-spacing: 0; }
    #galleryarea .inner #works a .titlearea {
      bottom: -35px;
      left: 20px;
      position: absolute;
      text-align: left; }
      #galleryarea .inner #works a .titlearea .title {
        margin-left: 25px; }
    #galleryarea .inner #modelhouse a .titlearea {
      /*top: -35px;*/
      top: 35px;
      right: 40px;
      text-align: right; }
      #galleryarea .inner #modelhouse a .titlearea .title {
        font-size: 42px; }

#bnrarea {
  background-color: #F7F7F7;
  padding: 100px 0; }
  #bnrarea .list {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px; }
    #bnrarea .list li {
      box-sizing: border-box;
      padding: 20px;
      width: 50%; }
      #bnrarea .list li a {
        display: -webkit-flex;
        display: flex;
        align-content: center;
        position: relative;
        height: 0;
        padding-top: 66%;
        overflow: hidden;
        border-radius: 8px; }
        #bnrarea .list li a:hover figure::after {
          opacity: .2; }
        #bnrarea .list li a:hover figure img {
          transform: scale(1.05);
          -webkit-transform: scale(1.05); }
        #bnrarea .list li a figure {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: hidden; }
          #bnrarea .list li a figure::after {
            content: "";
            background-color: #464343;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: .5;
            transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
            -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden; }
          #bnrarea .list li a figure img {
            transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
            -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden; }
        #bnrarea .list li a .ontext {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
          left: 0;
          right: 0;
          text-align: center; }
          #bnrarea .list li a .ontext .icon {
            width: 60px;
            margin: 0 auto 5px; }
          #bnrarea .list li a .ontext .title {
            font-weight: 700;
            font-size: 30px;
            color: #fff; }

#footer {
  margin-top: 0; }

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

 Responsive-Breakpoint-1 (1400px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1400px) {
  #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide1 .ontext {
    left: 8vw; }
  #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide2 .ontext .subtitle {
    font-size: 2vw; }
  #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide2 .ontext .title {
    font-size: 4.8vw; }
  #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea {
    padding: 0 30px; }
    #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .en {
      top: -3vw;
      left: -3vw;
      font-size: 3vw; }
    #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .maintitle {
      font-size: 4vw; }
    #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .subtitle .text1 {
      font-weight: 700;
      font-size: 1.6vw; }
    #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .subtitle .text2 {
      font-size: 2vw;
      font-weight: 700;
      margin-left: 10px; }
  #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .subimg1 {
    top: -3vw;
    width: 20vw; }
  #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .subimg2 {
    width: 15vw;
    top: 3vw; }
  #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slidefavo .ontext .title {
    width: 360px; }
  #mainvisual #mainslide .thumbarea {
    height: 120px; }
    #mainvisual #mainslide .thumbarea .swiper-thumb .swiper-slide .thumb-img {
      width: 120px; }
  #mainvisual .scroll-arrow a {
    width: 70px;
    height: 70px; }
    #mainvisual .scroll-arrow a::after {
      bottom: 20px; }

  #concept {
    margin-left: 0; }

  #galleryarea .inner > div a .titlearea .title {
    font-size: 28px; }
  #galleryarea .inner > div a .titlearea .en {
    font-size: 9.5vw; }
  #galleryarea .inner #works a .titlearea {
    bottom: -2vw; }
  #galleryarea .inner #modelhouse a .titlearea {
    /*top: -2vw;*/
    top: 2vw; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide1 .ontext {
    left: 6vw;
    top: auto;
    transform: none;
    -webkit-transform: none;
    bottom: 160px; }
  #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide2 .ontext {
    bottom: 145px; }
    #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide2 .ontext .subtitle {
      font-size: 3vw; }
    #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide2 .ontext .title {
      font-size: 6.2vw; }
  #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide2 .slidebg-wrap .slidebg {
    background: url("../img/slide02-tab.jpg") no-repeat center center;
    background-size: cover; }
  #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .slide-img {
    display: block;
    position: relative; }
  #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext {
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: 30px;
    right: 30px;
    margin: 0 auto;
    z-index: 10;
    padding: 45px 15px;
    background-color: rgba(236, 235, 232, 0.9); }
    #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .en {
      top: -8vw;
      left: -3vw;
      font-size: 5vw; }
    #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .maintitle {
      font-size: 5.5vw;
      line-height: 1.4; }
    #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .subtitle {
      margin: 15px 0; }
      #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .subtitle .text1 {
        font-size: 2.5vw; }
      #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .subtitle .text2 {
        font-size: 3vw; }
    #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .subimg1 {
      top: -3vw;
      width: 20vw;
      right: 10%; }
    #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .subimg2 {
      width: 14vw;
      top: 9vw;
      right: 3vw; }
  #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .slidebg-wrap {
    width: 100%; }
  #mainvisual #mainslide .thumbarea {
    height: 130px; }
    #mainvisual #mainslide .thumbarea .swiper-thumb .swiper-slide .thumb-img {
      width: 130px; }
  #mainvisual .scroll-arrow {
    right: auto;
    left: 25px;
    bottom: 25px; }

  #event .titlearea {
    margin-bottom: 30px; }
    #event .titlearea .wrapper::before {
      font-size: 110px;
      top: -10px; }
    #event .titlearea .contentstitle .title {
      font-size: 30px; }
    #event .titlearea .contentstitle .sub {
      font-size: 14px;
      margin-left: 20px; }
  #event .list li a .textarea {
    margin-top: 25px; }
    #event .list li a .textarea .datearea {
      font-size: 13px; }
    #event .list li a .textarea .entrytitle {
      font-size: 16px; }
  #event .morebtn {
    max-width: 370px;
    margin-top: 50px; }

  #concept {
    margin-top: 90px; }
    #concept a .box {
      padding: 270px 0 60px; }
      #concept a .box .textarea .title span {
        font-size: 50px;
        padding: 15px; }
      #concept a .box .textarea .subtext {
        margin-top: 20px;
        background-color: #fff;
        padding: 12px;
        margin-right: 14vw; }
        #concept a .box .textarea .subtext span {
          display: block;
          padding: 0;
          line-height: 1.6;
          font-size: 16px; }
        #concept a .box .textarea .subtext br {
          display: none; }
      #concept a .box .textarea .more {
        width: 200px;
        font-size: 16px;
        margin-top: 20px; }

  #galleryarea {
    margin-top: 90px; }
    #galleryarea .inner > div a .titlearea .title {
      font-size: 20px; }
    #galleryarea .inner #works a .titlearea {
      left: 10px; }
      #galleryarea .inner #works a .titlearea .title {
        margin-left: 13px; }
    #galleryarea .inner #modelhouse a .titlearea {
      right: 25px; }
      #galleryarea .inner #modelhouse a .titlearea .title {
        margin-right: -5px;
        font-size: 26px; }

  #bnrarea {
    padding: 50px 0; }
    #bnrarea .list {
      margin: 0 -15px; }
      #bnrarea .list li {
        padding: 15px; }
        #bnrarea .list li a .ontext .icon {
          width: 40px;
          margin-bottom: 0; }
        #bnrarea .list li a .ontext .title {
          font-size: 23px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #mainvisual {
    height: 400px; }
    #mainvisual .mainvisual-logo {
      display: none; }
    #mainvisual #mainslide .swiper-main .swiper-wrapper {
      height: 400px; }
      #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide1 .ontext {
        bottom: 80px; }
      #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide2 .ontext {
        bottom: 75px; }
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide2 .ontext .subtitle {
          font-size: 3.5vw;
          font-weight: 700;
          margin-bottom: 5px; }
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide2 .ontext .title {
          font-size: 6.5vw; }
      #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext {
        padding: 25px 0;
        left: 10vw;
        right: 10vw; }
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea {
          padding: 0 6vw; }
          #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .en {
            top: -10vw;
            left: -5vw;
            font-size: 6vw; }
          #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .maintitle {
            font-size: 28px; }
          #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .subtitle {
            margin: 10px 0 0;
            line-height: 1.4; }
            #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .subtitle .text1 {
              display: inline;
              font-size: 14px;
              color: #63757E;
              background-color: transparent;
              letter-spacing: 0.05em; }
            #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .subtitle .text2 {
              display: inline;
              font-size: 16px;
              margin: 5px 0 0; }
          #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .textarea .comment {
            display: none; }
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .subimg1,
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slide3 .ontext .subimg2 {
          display: none; }
      #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slidefavo .ontext {
        bottom: 40px;
        margin: 0; }
        #mainvisual #mainslide .swiper-main .swiper-wrapper .swiper-slide.slidefavo .ontext .title {
          width: 200px; }
    #mainvisual #mainslide .thumbarea {
      height: 60px;
      padding: 10px 0; }
      #mainvisual #mainslide .thumbarea .swiper-thumb .swiper-slide .thumb-img {
        width: 60px;
        margin-right: 10px; }
    #mainvisual .scroll-arrow {
      display: none; }

  #event {
    margin-top: 15px; }
    #event .titlearea .wrapper::before {
      display: none; }
    #event .titlearea .contentstitle {
      display: block;
      text-align: center; }
      #event .titlearea .contentstitle .title {
        font-size: 24px; }
      #event .titlearea .contentstitle .sub {
        font-size: 13px;
        margin-left: 0; }
    #event .list li {
      margin: 0 5vw; }
    #event .list .slick-prev,
    #event .list .slick-next {
      z-index: 10;
      width: 34px;
      height: 34px; }
      #event .list .slick-prev::before,
      #event .list .slick-next::before {
        font-family: "Font Awesome 5 free";
        color: #464343;
        font-weight: 900;
        font-size: 34px;
        opacity: 1; }
    #event .list .slick-prev {
      left: 0; }
      #event .list .slick-prev::before {
        content: "\f0a8"; }
    #event .list .slick-next {
      right: 0; }
      #event .list .slick-next::before {
        content: "\f0a9"; }
    #event .morebtn {
      margin-top: 35px; }
      #event .morebtn a {
        padding: 12px; }

  #concept {
    margin-top: 60px; }
    #concept a .box {
      padding: 130px 0 30px; }
      #concept a .box .textarea .title span {
        font-size: 30px;
        padding: 10px;
        background-color: rgba(255, 255, 255, 0.9); }
      #concept a .box .textarea .subtext {
        padding: 7px 10px;
        margin-top: 15px;
        background-color: rgba(255, 255, 255, 0.9); }
        #concept a .box .textarea .subtext span {
          display: inline;
          font-size: 13px;
          background-color: transparent; }
      #concept a .box .textarea .more {
        font-size: 13px;
        width: 160px;
        padding: 10px;
        margin-top: 15px; }
        #concept a .box .textarea .more::after {
          width: 16px;
          height: 3px;
          top: 20px;
          right: 10px; }

  #galleryarea {
    margin-top: 60px; }
    #galleryarea .inner {
      display: block;
      margin: 0; }
      #galleryarea .inner > div {
        width: auto;
        border-right: none;
        border-bottom: 4px solid #fff; }
        #galleryarea .inner > div:last-child {
          border-bottom: none; }
        #galleryarea .inner > div a .titlearea .title {
          font-size: 17px;
          font-weight: 500; }
        #galleryarea .inner > div a .titlearea .en {
          font-size: 62px; }
      #galleryarea .inner #works a .titlearea {
        left: 10px;
        bottom: 10px; }
        #galleryarea .inner #works a .titlearea .title {
          margin-left: 13px; }
      #galleryarea .inner #modelhouse a .titlearea {
        right: 25px;
        top: 10px; }
        #galleryarea .inner #modelhouse a .titlearea .title {
          margin-right: -5px;
          font-size: 26px; }

  #bnrarea {
    padding: 40px 0; }
    #bnrarea .list {
      margin: 0 -5px; }
      #bnrarea .list li {
        padding: 5px; }
        #bnrarea .list li a {
          border-radius: 4px; }
          #bnrarea .list li a .ontext .icon {
            width: 32px; }
          #bnrarea .list li a .ontext .title {
            font-size: 17px; } }