@charset "UTF-8";
/* Scss Document */
body:not(.scrolled) #head::before {
  width: 0%; }
body:not(.scrolled) #head .logo_wrap .logo .icon svg * {
  fill: #FFF !important; }
@media (min-width: 768px) {
  body:not(.scrolled) #head nav .navi .a {
    color: #FFF; } }
body.scrolled #texture {
  opacity: 0.3;
  filter: Alpha(opacity=30); }

.textures .texture {
  width: 96px;
  height: 96px; }
  .textures .texture#memphis01 {
    top: -12px;
    left: 66%; }
    .textures .texture#memphis01 svg g path {
      transition: 0.33s transform; }
    .textures .texture#memphis01:not(.active) svg g path {
      transform: translateX(-80px); }
      .textures .texture#memphis01:not(.active) svg g path:nth-chid(1) {
        transition-delay: 0.3s; }
      .textures .texture#memphis01:not(.active) svg g path:nth-chid(2) {
        transition-delay: 0.15s; }
  .textures .texture#memphis02 {
    top: 30%;
    right: 1%; }
  .textures .texture#memphis03 {
    top: 40%;
    left: 10%; }
  .textures .texture#memphis04 {
    bottom: -90px;
    right: 20%;
    width: 180px;
    height: 180px; }
  .textures .texture#memphis05 {
    bottom: -90px;
    left: 0%;
    width: 180px;
    height: 180px; }
  .textures .texture#memphis06 {
    top: 5%;
    right: 10%;
    width: 130px;
    height: 130px; }
  .textures .texture#memphis07 {
    top: 60px;
    right: 10%;
    width: 120px;
    height: 120px; }
  .textures .texture#memphis08 {
    bottom: 0%;
    right: 5%; }
  .textures .texture#memphis09 {
    bottom: -2%;
    left: 5%;
    width: 120px;
    height: 120px; }
  .textures .texture#memphis10 {
    top: -120px;
    left: 0;
    right: 0;
    width: 180px;
    height: 180px; }
  .textures .texture#memphis11 {
    bottom: 40px;
    left: 2%;
    width: 120px;
    height: 120px; }
@media (min-width: 768px) {
  .textures .texture {
    width: 200px;
    height: 200px; }
    .textures .texture#memphis01 {
      top: 20px;
      left: 32rem; }
    .textures .texture#memphis02 {
      right: 20px;
      top: 55%; }
    .textures .texture#memphis03 {
      top: auto;
      bottom: -64px;
      left: 30%;
      right: auto; }
    .textures .texture#memphis04 {
      right: 60%;
      bottom: -110px;
      width: 240px;
      height: 240px; }
    .textures .texture#memphis05 {
      bottom: -118px;
      width: 260px;
      height: 260px; }
    .textures .texture#memphis06 {
      top: 5%;
      width: 270px;
      height: 270px; }
    .textures .texture#memphis07 {
      right: 44%;
      top: 0px;
      width: 200px;
      height: 200px; }
    .textures .texture#memphis08 {
      bottom: -3%;
      right: 19%; }
    .textures .texture#memphis09 {
      bottom: 29%;
      left: -1%; }
    .textures .texture#memphis10 {
      top: auto;
      left: auto;
      right: 30%;
      bottom: -120px;
      width: 240px;
      height: 240px; }
    .textures .texture#memphis11 {
      bottom: 40px;
      left: 5%;
      width: 240px;
      height: 240px; } }
@media (min-width: 960px) {
  .textures .texture#memphis07 {
    top: 80px; } }

#head::before {
  transition: 0.33s width; }
#head nav .navi .a {
  transition: 0.33s color; }

#contents {
  padding-top: 0 !important; }
  #contents .section .section_title_wrap {
    margin-bottom: 0; }
  #contents .section[key=magazine]:last-child {
    padding-bottom: 40px; }
    @media (min-width: 768px) {
      #contents .section[key=magazine]:last-child {
        padding-bottom: 80px; } }
  #contents .photo_wrap {
    position: relative; }
    #contents .photo_wrap .logo_wrap {
      width: 120px;
      height: 150px;
      right: 20px; }
      @media (min-width: 768px) {
        #contents .photo_wrap .logo_wrap {
          width: 180px;
          height: 200px;
          right: 40px; } }
      #contents .photo_wrap .logo_wrap .logo {
        width: 100%;
        height: 100%; }
        #contents .photo_wrap .logo_wrap .logo svg * {
          fill: #FFF !important; }

#mv {
  height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(20deg, #1D2088 0%, #1D2088 30%, #00AFEC); }
  #mv .video_wrap .video video {
    width: 100%;
    height: 100%;
    object-fit: cover; }
  #mv .scroll {
    top: auto;
    bottom: 20px; }
    #mv .scroll .a {
      color: #FFF; }
      #mv .scroll .a .txt::before {
        content: "SCROLL"; }
      #mv .scroll .a .bar {
        height: 80px;
        background: rgba(255, 255, 255, 0.33); }
        #mv .scroll .a .bar::after {
          background: #FFF; }
  #mv .slider {
    width: 100%;
    height: 100%;
    overflow: hidden; }
    #mv .slider .slick-list,
    #mv .slider .slick-track {
      height: 100%; }
    #mv .slider .slide {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative; }
      #mv .slider .slide .bg {
        background-color: #FFF;
        transition: 8s transform linear;
        /*.textures{
            mix-blend-mode: overlay;
        }*/ }
      #mv .slider .slide .caption {
        left: auto;
        top: auto;
        right: 20px;
        bottom: 10px;
        color: #FFF;
        text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); }
      #mv .slider .slide .textures .texture {
        width: 240px;
        height: 240px; }
      #mv .slider .slide[key=tokyo] .bg {
        background-image: url("../images/home/mv_tokyo_sp.jpg");
        transform: scale(1); }
        #mv .slider .slide[key=tokyo] .bg #mv_memphis01 {
          left: 12%;
          top: 22%;
          width: 160px;
          height: 160px; }
        #mv .slider .slide[key=tokyo] .bg #mv_memphis02 {
          right: 12%;
          bottom: 10%; }
      #mv .slider .slide[key=nagano] .bg {
        transform: translateY(-20vh);
        background-image: url("../images/home/mv_nagano_sp.jpg");
        height: 120vh; }
        #mv .slider .slide[key=nagano] .bg #mv_memphis03 {
          left: 0%;
          top: calc( 50% - 240px ); }
        #mv .slider .slide[key=nagano] .bg #mv_memphis04 {
          width: 180px;
          height: 180px;
          right: 12%;
          top: 12%; }
        #mv .slider .slide[key=nagano] .bg #mv_memphis05 {
          left: calc( 50% - 240px );
          bottom: 0; }
      #mv .slider .slide[key=kashiwanoha] .bg {
        background-image: url("../images/home/mv_kashiwanoha_sp.jpg");
        width: 125vw; }
        #mv .slider .slide[key=kashiwanoha] .bg #mv_memphis06 {
          left: 25%;
          top: calc( 30% - 240px ); }
        #mv .slider .slide[key=kashiwanoha] .bg #mv_memphis07 {
          right: 30%;
          bottom: 0; }
      #mv .slider .slide[key=fix] #mv_memphis08 {
        left: -30px;
        bottom: 0; }
      #mv .slider .slide[key=fix] #mv_memphis09 {
        right: calc( 30% - 240px );
        top: calc( 50% - 240px ); }
      #mv .slider .slide[key=fix] #mv_memphis10 {
        left: 4%;
        top: 0;
        width: 320px;
        height: 320px; }
      #mv .slider .slide[key=fix] #mv_memphis11 {
        width: 320px;
        height: 320px;
        right: -8%;
        bottom: -80px; }
      #mv .slider .slide.active[key=tokyo] .bg, #mv .slider .slide.slick-current[key=tokyo] .bg {
        transform: scale(1.2); }
      #mv .slider .slide.active[key=nagano] .bg, #mv .slider .slide.slick-current[key=nagano] .bg {
        transform: translateY(0); }
      #mv .slider .slide.active[key=kashiwanoha] .bg, #mv .slider .slide.slick-current[key=kashiwanoha] .bg {
        transform: translateX(-25vw); }
      @media (min-width: 768px) {
        #mv .slider .slide .textures .texture {
          width: 320px;
          height: 320px; }
        #mv .slider .slide[key=tokyo] .bg {
          background-image: url("../images/home/mv_tokyo.jpg"); }
        #mv .slider .slide[key=nagano] .bg {
          background-image: url("../images/home/mv_nagano.jpg"); }
          #mv .slider .slide[key=nagano] .bg #mv_memphis05 {
            width: 240px;
            height: 240px; }
        #mv .slider .slide[key=kashiwanoha] .bg {
          background-image: url("../images/home/mv_kashiwanoha.jpg"); }
        #mv .slider .slide[key=fix] #mv_memphis08 {
          width: 500px;
          height: 500px;
          left: -20px; }
        #mv .slider .slide[key=fix] #mv_memphis10 {
          left: 30%;
          top: -12%; }
        #mv .slider .slide[key=fix] #mv_memphis11 {
          width: 480px;
          height: 480px;
          bottom: -120px; } }
  #mv .cover {
    display: flex;
    justify-content: center;
    align-items: center; }
    #mv .cover .door .up,
    #mv .cover .door .bottom {
      height: 51%;
      width: 100%;
      background: #FFF;
      transition: 0.33s transform; }
    #mv .cover .door .up {
      transform-origin: top center;
      bottom: auto; }
    #mv .cover .door .bottom {
      transform-origin: bottom center;
      top: auto; }
    #mv .cover .loading {
      transition: 0.33s opacity;
      height: 12px; }
      #mv .cover .loading .bar {
        right: auto;
        background: linear-gradient(90deg, #00AFEC, #1D2088);
        width: 0;
        transition: 0.33s width; }
    #mv .cover .logo_wrap {
      position: relative;
      min-height: 180px;
      width: 100%; }
      #mv .cover .logo_wrap .logo {
        width: 180px;
        height: 180px;
        opacity: 0;
        filter: Alpha(opacity=0);
        transition: 1s alpha,1s filter;
        filter: blur(20px); }
      #mv .cover .logo_wrap .copy {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        text-align: center;
        width: calc( 100% - 20px * 2 );
        font-size: 3rem;
        color: #FFF;
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.33);
        font-family: "Roboto", "Noto Sans JP", sans-serif;
        font-weight: 800;
        transition: 1s alpha,1s filter; }
        @media (min-width: 768px) {
          #mv .cover .logo_wrap .copy {
            font-size: 4rem; } }
  #mv.started .cover {
    pointer-events: none; }
    #mv.started .cover .door .up,
    #mv.started .cover .door .bottom {
      transform: scaleY(0); }
    #mv.started .cover .loading {
      opacity: 0;
      filter: Alpha(opacity=0); }
  #mv[status=end] .cover .logo_wrap .logo {
    opacity: 1;
    filter: Alpha(opacity=100);
    filter: blur(0); }
  #mv[status=end] .cover .logo_wrap .copy {
    opacity: 0;
    filter: Alpha(opacity=0);
    filter: blur(20px); }

.section_here_wrap {
  z-index: 5;
  width: 100%;
  height: 0;
  position: sticky;
  top: calc( var(--headheight) + 40px );
  pointer-events: none; }
  .section_here_wrap .inner {
    position: relative;
    display: flex;
    justify-content: flex-end; }
  .section_here_wrap .section_here {
    width: 40px;
    height: 200px; }
    @media (min-width: 768px) {
      .section_here_wrap .section_here {
        width: 80px; } }
  .section_here_wrap .bar {
    height: 80px; }

#concept .section_title_wrap .title_wrap:not(.active),
#project .section_title_wrap .title_wrap:not(.active),
#solution .section_title_wrap .title_wrap:not(.active),
#news .section_title_wrap .title_wrap:not(.active) {
  transform: translateX(-100px); }
#concept .section_title_wrap .title_wrap .title,
#project .section_title_wrap .title_wrap .title,
#solution .section_title_wrap .title_wrap .title,
#news .section_title_wrap .title_wrap .title {
  font-size: 4rem; }
@media (min-width: 768px) {
  #concept .section_title_wrap .title_wrap .title,
  #project .section_title_wrap .title_wrap .title,
  #solution .section_title_wrap .title_wrap .title,
  #news .section_title_wrap .title_wrap .title {
    font-size: 6rem; } }

#concept,
#casestudy,
#project,
#solution,
#news {
  margin-bottom: 160px; }

#topics {
  margin-bottom: 40px;
  background: linear-gradient(20deg, #1D2088 0%, #1D2088 30%, #00AFEC);
  color: #FFF;
  padding-top: 20px !important;
  padding-bottom: 20px !important; }
  #topics .section_title_wrap {
    margin-bottom: 0; }
    #topics .section_title_wrap .title_wrap .eng {
      color: #FFF; }
  @media (max-width: 520px) {
    #topics .box_wrap.flex {
      flex-direction: column; } }
  #topics .archives .archive .a {
    color: #FFF; }
  @media (min-width: 521px) {
    #topics .box_wrap.flex {
      align-items: center; }
      #topics .box_wrap.flex .section_title_wrap {
        min-width: 120px;
        max-width: 120px; } }
  @media (min-width: 768px) {
    #topics .archives.archives_news .archive .a {
      grid-gap: 10px 30px; }
      #topics .archives.archives_news .archive .a .info .inner {
        grid-gap: 10px; }
      #topics .archives.archives_news .archive .a .photo {
        min-width: 160px;
        max-width: 160px; } }

#concept .block .body .text {
  line-height: 2.5; }
#concept .photo_wrap {
  box-sizing: border-box;
  padding-right: 20px; }
@media (min-width: 768px) {
  #concept .section_title_wrap {
    margin-bottom: -40px !important; }
  #concept .flex {
    align-items: center; }
  #concept .photo_wrap {
    padding-right: 40px; } }
@media (min-width: 960px) {
  #concept .section_title_wrap {
    margin-bottom: -80px !important; } }

#casestudy .section_title_wrap {
  margin-bottom: 20px !important; }
  #casestudy .section_title_wrap .flex {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center; }
    #casestudy .section_title_wrap .flex .to_link {
      margin: 0; }
@media (max-width: 520px) {
  #casestudy .archives.archives_casestudy .archive > .a {
    flex-direction: column; }
    #casestudy .archives.archives_casestudy .archive > .a .photo {
      width: 100%;
      max-width: none; }
    #casestudy .archives.archives_casestudy .archive > .a .info .relation {
      font-size: 0.66rem; } }

#bf .bf_wrap {
  position: relative; }
  #bf .bf_wrap .title_wrap {
    display: flex;
    justify-content: center;
    align-items: center; }
    #bf .bf_wrap .title_wrap .h1 {
      font-size: 4rem;
      text-align: center;
      color: #FFF; }
  #bf .bf_wrap .archives.archives_bf_category .archive > .a .photo::after {
    display: none; }
  #bf .bf_wrap .archives.archives_bf_category .archive > .a .info {
    display: none; }
@media (min-width: 768px) {
  #bf .bf_wrap .title_wrap .h1 {
    font-size: 6rem;
    text-align: left; } }

#project .text {
  color: #FFF; }
#project .archives .archive > .a {
  color: #FFF; }

@media (max-width: 520px) {
  #solution .columns.column3 .column {
    width: calc( ( 100% - var(--gap) ) / 2 ); } }
#solution .archives .archive:not(.to_archive_list) > .a {
  align-items: center;
  justify-content: center; }
  #solution .archives .archive:not(.to_archive_list) > .a > .photo {
    background: #FFF; }
#solution .archives .archive.to_archive_list > .a {
  align-items: flex-start; }
  #solution .archives .archive.to_archive_list > .a .photo .bg {
    background: none !important;
    padding-top: calc( ( 5 / 9 ) * 100% ); }

#news .archives.archives_news .archive > .a {
  color: #FFF; }
#news .section_title_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  #news .section_title_wrap .to_link {
    margin: 0; }
@media (min-width: 521px) {
  #news .section_title_wrap {
    margin-bottom: 30px !important; } }
@media (min-width: 768px) {
  #news .section_title_wrap {
    margin-bottom: 0 !important;
    height: 156px;
    flex-direction: column;
    align-items: flex-start; }
    #news .section_title_wrap .to_link {
      margin-top: 20px; }
  #news .section_body_wrap {
    width: calc( 100% - 260px );
    margin-left: auto; } }
@media (min-width: calc( 1206px + 40px * 2 + 1px )) {
  #news .section_body_wrap {
    width: calc( 1206px + ( ( 100vw - 1206px ) / 2 ) - 260px ); } }

#associate {
  padding-bottom: 160px; }
  @media (min-width: 768px) {
    #associate {
      padding-bottom: 240px; } }
  #associate .section_title_wrap {
    margin-bottom: 20px !important; }
    #associate .section_title_wrap .title_wrap {
      grid-gap: 10px; }
      #associate .section_title_wrap .title_wrap .sub_title {
        margin-top: -10px; }
    @media (min-width: 768px) {
      #associate .section_title_wrap {
        margin-bottom: 40px !important; }
        #associate .section_title_wrap .title_wrap .sub_title {
          margin-top: -20px; } }
  #associate .banners_associate {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    grid-gap: 30px;
    max-width: 800px;
    margin: 40px auto 60px auto; }
    #associate .banners_associate .banner {
      flex: 1;
      width: 90px;
      min-width: 90px;
      max-width: 90px; }
  #associate .names {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    grid-gap: 10px 10px;
    flex-wrap: wrap; }
    #associate .names .name:not(:last-child)::after {
      margin-left: 10px;
      content: "／"; }