@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
@media print, screen and (min-width: 961px) {
  .sp {
    display: none !important; } }

@media screen and (max-width: 960px) {
  .pc {
    display: none !important; } }

body.debug::before {
  content: '';
  display: block;
  width: 100%;
  height: 9882px;
  background-image: url(../images/debug.jpg);
  background-size: 1400px;
  background-position: center 0;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5; }

/*==================================================
	RESET CSS
==================================================*/
* {
  position: relative;
  margin: 0;
  padding: 0;
  font-feature-settings: 'palt';
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
  outline: none; }

/*==================================================
	SCROLL ANIMATION
==================================================*/
.fadeIn {
  opacity: 0;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); }
  .fadeIn.active {
    opacity: 1.0; }

.fadeUp {
  opacity: 0;
  transform: translateY(50px);
  transition-duration: 0.95s;
  transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
  .fadeUp.active {
    opacity: 1.0;
    transform: translateY(0); }

.scaleIn {
  opacity: 0;
  transform: scale(0.5);
  transition-duration: 0.95s;
  transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
  .scaleIn.active {
    opacity: 1.0;
    transform: scale(1); }

.scaleInBack {
  transform: scale(0);
  transition-duration: 0.75s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); }
  .scaleInBack.active {
    transform: scale(1); }

.scaleRotateInBack {
  transform: scale(0) rotate(-45deg);
  transition-duration: 0.75s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); }
  .scaleRotateInBack.active {
    transform: scale(1) rotate(0); }

.__delay1 {
  transition-delay: 0.4s; }

.__delay2 {
  transition-delay: 0.5s; }

.__delay3 {
  transition-delay: 0.6s; }

.__delay4 {
  transition-delay: 0.7s; }

.__delay5 {
  transition-delay: 0.8s; }

/*==================================================
	COMMON
==================================================*/
html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.875;
  background-size: 64px 64px;
  background-position: 50% 0;
  background-image: repeating-linear-gradient(90deg, #6BAFF9, #6BAFF9 1px, transparent 1px, transparent 64px), repeating-linear-gradient(0deg, #6BAFF9, #6BAFF9 1px, #80c8ff 1px, #80c8ff 64px); }
  @media print, screen and (min-width: 961px) {
    html,
    body {
      font-size: 16px; } }
  @media screen and (max-width: 960px) {
    html,
    body {
      font-size: 3.46667vw;
      background-size: 8.53333vw 8.53333vw; } }
  @media print, screen and (min-width: 961px) {
    html.scrolled,
    body.scrolled {
      padding-top: 100px; } }
  @media screen and (max-width: 960px) {
    html.scrolled,
    body.scrolled {
      padding-top: 13.33333vw; } }

img {
  max-width: 100%;
  vertical-align: bottom; }

.top h2 {
  text-align: center;
  line-height: 1;
  opacity: 0;
  transform: translateX(-200px) skewX(100deg);
  transition-duration: 0.75s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); }
  .top h2.active {
    opacity: 1;
    transform: translateX(0) skewX(0); }
  @media screen and (max-width: 960px) {
    .top h2 img {
      width: auto;
      height: 13.33333vw; } }
  .top h2 span {
    padding: 0.5em 1.5em;
    border-radius: 3em;
    background-color: #000;
    color: #fff;
    letter-spacing: 0.125em; }
    @media print, screen and (min-width: 961px) {
      .top h2 span {
        font-size: 14px; } }
    @media screen and (max-width: 960px) {
      .top h2 span {
        font-size: 2.66667vw; } }
  .top h2 + p {
    margin-top: 2.7em; }

a {
  color: inherit; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1em 0;
  border-radius: 50px;
  overflow: hidden;
  background-color: #000;
  color: #fff;
  letter-spacing: 0.18em;
  line-height: 1;
  box-shadow: 0px 8px 0px rgba(0, 0, 0, 0.1);
  z-index: 1;
  position: relative; }
  @media print, screen and (min-width: 961px) {
    .btn {
      margin-top: 38px;
      width: 280px;
      font-size: 1.125rem;
      transition-duration: .3s; } }
  @media screen and (max-width: 960px) {
    .btn {
      margin-top: 6.66667vw;
      width: 60vw; } }
  .btn::before {
    content: '';
    display: block;
    width: 0;
    height: 100%;
    background-color: #c4ff1e;
    position: absolute;
    top: 0;
    right: -5%;
    transform: skewX(25deg);
    transition-duration: .3s;
    z-index: -1; }
  @media print, screen and (min-width: 961px) {
    .btn:hover {
      transform: translateY(6px);
      color: #000;
      box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1); }
      .btn:hover::before {
        width: 110%;
        left: -5%; } }
  .btn.blog-btn, .btn.twitter-btn {
    border: 2px solid #000;
    margin: 1.35em 1em 0.15em;
    font-weight: bold;
    letter-spacing: 0; }
    @media print, screen and (min-width: 961px) {
      .btn.blog-btn, .btn.twitter-btn {
        width: 240px; }
        .btn.blog-btn:hover, .btn.twitter-btn:hover {
          color: #fff; }
        .btn.blog-btn::before, .btn.twitter-btn::before {
          background-color: #000; } }
  .btn.blog-btn {
    background-color: #fffa00;
    color: #000; }
  .btn.twitter-btn {
    background-color: #80c8ff;
    color: #000; }

.notes {
  display: block;
  font-size: 80%;
  margin-top: 1em;
  padding-left: 1em;
  text-indent: -1em; }

/*==================================================
	header
==================================================*/
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  line-height: 1;
  top: -100%;
  transition-duration: .75s;
  z-index: 100; }
  @media print, screen and (min-width: 961px) {
    header {
      height: 90px; } }
  @media screen and (max-width: 960px) {
    header {
      padding: 0 4vw;
      height: 13.33333vw; } }
  .scrolled header {
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35); }
  header h1 {
    font-size: 1px; }
    @media print, screen and (min-width: 961px) {
      header h1 {
        padding: 0 50px; } }
    @media screen and (max-width: 960px) {
      header h1 {
        width: 48vw; } }
  @media print, screen and (min-width: 961px) {
    header ul {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 13px; } }
  @media screen and (max-width: 960px) {
    header ul {
      position: fixed;
      top: 0;
      right: -60vw;
      padding-top: 13.33333vw;
      width: 58.66667vw;
      height: 100vh;
      background-color: #fff;
      transition-duration: .3s;
      z-index: -1; }
      header ul.active {
        right: 0; } }
  header ul a {
    display: block;
    padding: 2em 1.55em;
    letter-spacing: 0.1em; }
    @media screen and (max-width: 960px) {
      header ul a {
        border-top: 1px solid #eee; } }
    header ul a.contact {
      background-color: #31a1ff;
      color: #fff;
      letter-spacing: 0.15em; }
      header ul a.contact::after {
        content: none; }
      @media print, screen and (min-width: 961px) {
        header ul a.contact {
          margin-left: 1em;
          padding: 3em 6.5em 3em 5.5em;
          transform: skewX(25deg) translateX(1.85em);
          transition-duration: .3s; }
          header ul a.contact span {
            display: block;
            transform: skewX(-25deg);
            transition-duration: .3s; }
          header ul a.contact:hover {
            background-color: #80c8ff;
            color: #fff;
            transform: skewX(25deg) translateX(2.85em); }
            header ul a.contact:hover span {
              transform: skewX(-25deg) translateX(-1em); } }
    header ul a::after {
      content: '';
      display: block;
      width: 0;
      height: 1px;
      background-color: #31a1ff;
      position: absolute;
      right: 5%;
      bottom: 16px;
      transition-duration: .3s; }
    @media print, screen and (min-width: 961px) {
      header ul a:hover {
        color: #31a1ff; }
        header ul a:hover::after {
          left: 5%;
          width: 90%; } }
  @media screen and (max-width: 960px) {
    header .nv-menu {
      display: block;
      width: 6.4vw;
      height: 6.4vw;
      z-index: 101;
      cursor: pointer; }
      header .nv-menu span {
        display: inline-block;
        width: 6.4vw;
        height: 2px;
        background-color: #31a1ff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition-duration: .3s; }
        header .nv-menu span::before, header .nv-menu span::after {
          content: '';
          display: inline-block;
          width: 100%;
          height: 100%;
          background-color: #31a1ff;
          position: absolute;
          transition-duration: .3s; }
        header .nv-menu span::before {
          top: -1.86667vw;
          left: 0; }
        header .nv-menu span::after {
          top: 1.86667vw;
          left: 0; }
      header .nv-menu.active span {
        background-color: #fff; }
        header .nv-menu.active span::before, header .nv-menu.active span::after {
          background-color: #31a1ff; }
        header .nv-menu.active span::before {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) rotate(45deg); }
        header .nv-menu.active span::after {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) rotate(-45deg); } }
  @media (max-width: 1100px) and (min-width: 961px) {
    header h1 {
      padding: 50px 25px; }
    header ul a {
      padding: 2em 1em; }
      header ul a.contact {
        padding: 3em 3.5em 3em 2.5em; } }

/*==================================================
	kv
==================================================*/
#kv {
  display: block;
  width: 100%;
  height: 54.285vw;
  background: url(../images/mv.jpg) center no-repeat;
  background-size: cover; }
  @media print, screen and (min-width: 961px) {
    #kv {
      border-bottom: 50px solid #000; } }
  @media screen and (max-width: 960px) {
    #kv {
      border-bottom: 10px solid #000; } }

/*==================================================
	about
==================================================*/
#about {
  z-index: 2; }
  @media print, screen and (min-width: 961px) {
    #about {
      padding: 78px 0 62px; } }
  @media screen and (max-width: 960px) {
    #about {
      padding: 8vw 0; }
      #about h2 {
        opacity: 1;
        transform: translateX(0) skewX(0); } }
  #about p {
    text-align: center;
    line-height: 2; }
    @media print, screen and (min-width: 961px) {
      #about p {
        font-size: 20px;
        letter-spacing: 0.13em; } }
    @media screen and (max-width: 960px) {
      #about p {
        letter-spacing: 0.05em; } }
    #about p + p {
      margin-top: 1em; }
    #about p.thema {
      margin: 0 auto;
      padding: 0.5em;
      background-color: #c4ff1e;
      line-height: 1.1; }
      @media print, screen and (min-width: 961px) {
        #about p.thema {
          margin-top: 20px;
          width: 13em;
          font-size: 28px; } }
      @media screen and (max-width: 960px) {
        #about p.thema {
          margin-top: 5.33333vw;
          width: 13em;
          font-size: 4vw; } }
      #about p.thema strong {
        display: block;
        margin-top: 0.1em;
        font-weight: bold; }
      #about p.thema em {
        font-style: normal; }
        @media print, screen and (min-width: 961px) {
          #about p.thema em {
            font-size: 64px; } }
        @media screen and (max-width: 960px) {
          #about p.thema em {
            font-size: 10.13333vw; } }
  #about .image {
    display: flex;
    justify-content: center; }
    @media print, screen and (min-width: 961px) {
      #about .image {
        margin-top: 108px; } }
    @media screen and (max-width: 960px) {
      #about .image {
        margin-top: 13.33333vw;
        padding: 0 4vw; } }
    @media print, screen and (min-width: 961px) {
      #about .image p {
        margin: 0 15px; } }
    @media screen and (max-width: 960px) {
      #about .image p {
        margin: 0 1.33333vw; } }
    #about .image p:nth-child(1) {
      order: 2; }
    #about .image p:nth-child(2) {
      order: 1; }
      @media print, screen and (min-width: 961px) {
        #about .image p:nth-child(2) {
          transform: translateY(84px); } }
      @media screen and (max-width: 960px) {
        #about .image p:nth-child(2) {
          transform: translateY(11.2vw); } }
    #about .image p:nth-child(3) {
      order: 3; }
      @media print, screen and (min-width: 961px) {
        #about .image p:nth-child(3) {
          transform: translateY(-60px); } }
      @media screen and (max-width: 960px) {
        #about .image p:nth-child(3) {
          transform: translateY(-8vw); } }
    #about .image p img {
      display: block; }
      @media print, screen and (min-width: 961px) {
        #about .image p img + img {
          margin-top: 36px; } }
      @media screen and (max-width: 960px) {
        #about .image p img + img {
          margin-top: 2.66667vw; } }

/*==================================================
	time table
==================================================*/
#timetable {
  z-index: 1; }
  @media print, screen and (min-width: 961px) {
    #timetable {
      padding: 80px 0 150px; } }
  @media screen and (max-width: 960px) {
    #timetable {
      padding: 10.66667vw 0 20vw; } }
  #timetable ol {
    margin: 0 auto; }
    @media print, screen and (min-width: 961px) {
      #timetable ol {
        margin-top: 38px;
        width: 880px; } }
    @media screen and (max-width: 960px) {
      #timetable ol {
        margin: 5.33333vw; } }
    #timetable ol li {
      width: 100%;
      background-position: left top;
      background-repeat: no-repeat;
      background-size: 100%; }
      @media print, screen and (min-width: 961px) {
        #timetable ol li {
          display: flex;
          min-height: 153px;
          padding: 12px 0 0 166px; } }
      @media screen and (max-width: 960px) {
        #timetable ol li {
          padding: 4vw 0 0 14.66667vw; } }
      @media print, screen and (min-width: 961px) {
        #timetable ol li + li {
          margin-top: 60px; } }
      @media screen and (max-width: 960px) {
        #timetable ol li + li {
          margin-top: 8vw; } }
      #timetable ol li:nth-child(1) {
        background-image: url(../images/timetable_1.png); }
      #timetable ol li:nth-child(2) {
        background-image: url(../images/timetable_2.png); }
      #timetable ol li:nth-child(3) {
        background-image: url(../images/timetable_3.png); }
      #timetable ol li:nth-child(4) {
        background-image: url(../images/timetable_4.png); }
      #timetable ol li:nth-child(5) {
        background-image: url(../images/timetable_5.png); }
      #timetable ol li:nth-child(6) {
        background-image: url(../images/timetable_6.png); }
      #timetable ol li span {
        color: #31a1ff;
        font-weight: bold;
        line-height: 1.5; }
        @media print, screen and (min-width: 961px) {
          #timetable ol li span {
            width: 310px;
            font-size: 29px; } }
        @media screen and (max-width: 960px) {
          #timetable ol li span {
            font-size: 4.53333vw; } }
      #timetable ol li dl dt {
        padding-bottom: 0.4em;
        border-bottom: 1px solid #000;
        font-weight: 700;
        letter-spacing: 0.05em;
        line-height: 1.5; }
        @media print, screen and (min-width: 961px) {
          #timetable ol li dl dt {
            font-size: 26px; } }
        @media screen and (max-width: 960px) {
          #timetable ol li dl dt {
            font-size: 4.53333vw; } }
      #timetable ol li dl dd {
        padding-top: 0.7em;
        letter-spacing: 0.05em;
        line-height: 1.87; }
  #timetable::before {
    content: '';
    display: block;
    width: 100%;
    background-color: #fff;
    background-image: url(../images/bg_dot.png);
    background-repeat: repeat;
    background-size: 30px;
    position: absolute;
    transform: skewY(-12.1deg);
    z-index: -1; }
    @media print, screen and (min-width: 961px) {
      #timetable::before {
        height: calc(100% + 344px);
        top: -302px; } }
    @media screen and (max-width: 960px) {
      #timetable::before {
        height: calc(100% + 40vw);
        top: -52.53333vw; } }

/*==================================================
	exhibition / project
==================================================*/
#exhibition,
#project {
  text-align: center; }
  @media print, screen and (min-width: 961px) {
    #exhibition,
    #project {
      padding: 150px 0 108px; } }
  #exhibition h2 + p,
  #project h2 + p {
    margin-top: 0.3em;
    padding-bottom: 1.6em;
    letter-spacing: 0.1em;
    line-height: 2;
    text-align: center; }
    @media print, screen and (min-width: 961px) {
      #exhibition h2 + p,
      #project h2 + p {
        font-size: 1.125rem; } }
  @media screen and (max-width: 960px) {
    #exhibition > div h3 img,
    #project > div h3 img {
      width: 93.33333vw; } }
  #exhibition > div div,
  #project > div div {
    margin: 0 auto;
    width: 93.33333vw;
    max-width: 1000px;
    background-color: #000;
    color: #fff;
    letter-spacing: 0.08em;
    line-height: 2; }
    @media print, screen and (min-width: 961px) {
      #exhibition > div div,
      #project > div div {
        margin-top: 20px;
        padding: 35px 60px 40px;
        font-size: 1.125rem; } }
    @media screen and (max-width: 960px) {
      #exhibition > div div,
      #project > div div {
        margin-top: 2.66667vw;
        padding: 5.33333vw 2.66667vw 8vw; } }
    @media screen and (max-width: 960px) {
      #exhibition > div div p,
      #project > div div p {
        padding: 0 4vw;
        text-align: left; } }
    #exhibition > div div img,
    #project > div div img {
      margin-top: 2em; }
  #exhibition > div div.point,
  #project > div div.point {
    position: relative;
    margin-top: 0;
    border: 1px solid #000;
    background-size: 64px 64px;
    background-position: 50% 50%;
    background-image: repeating-linear-gradient(90deg, #e9e8e8, #e9e8e8 1px, transparent 1px, transparent 64px), repeating-linear-gradient(0deg, #e9e8e8, #e9e8e8 1px, #fff 1px, #fff 64px);
    color: #000;
    line-height: 1.875; }
    @media screen and (max-width: 960px) {
      #exhibition > div div.point,
      #project > div div.point {
        padding: 12vw 2.66667vw 6.66667vw;
        background-size: 6.4vw 6.4vw; } }
    #exhibition > div div.point h4,
    #project > div div.point h4 {
      position: absolute;
      transform-origin: right bottom; }
      @media print, screen and (min-width: 961px) {
        #exhibition > div div.point h4,
        #project > div div.point h4 {
          top: -54px;
          left: -72px; } }
      @media screen and (max-width: 960px) {
        #exhibition > div div.point h4,
        #project > div div.point h4 {
          top: -13.33333vw;
          left: -4.53333vw;
          width: 24vw; } }
    #exhibition > div div.point p,
    #project > div div.point p {
      text-align: left; }
      @media print, screen and (min-width: 961px) {
        #exhibition > div div.point p,
        #project > div div.point p {
          padding-left: 120px;
          font-size: 16px; } }
  @media print, screen and (min-width: 961px) {
    #exhibition > div + div,
    #project > div + div {
      margin-top: 118px; } }
  @media screen and (max-width: 960px) {
    #exhibition > div + div,
    #project > div + div {
      margin-top: 12vw; } }
  #exhibition > div.bg::before,
  #project > div.bg::before {
    content: '';
    display: block;
    width: 100%;
    background-color: #a6d8ff;
    position: absolute;
    top: -5px;
    transform: skewY(-12.1deg); }
    @media print, screen and (min-width: 961px) {
      #exhibition > div.bg::before,
      #project > div.bg::before {
        height: calc(100% + 118px); } }
    @media screen and (max-width: 960px) {
      #exhibition > div.bg::before,
      #project > div.bg::before {
        height: calc(100% + 11vw); } }

@media print, screen and (min-width: 961px) {
  #project {
    padding: 108px 0 68px; }
    #project > div > .btn::before {
      background-color: #fffa00; } }

@media screen and (max-width: 960px) {
  #project {
    padding: 14.4vw 0 9.06667vw; } }

/*==================================================
	contact
==================================================*/
#contact {
  text-align: center; }
  @media print, screen and (min-width: 961px) {
    #contact {
      padding: 116px 0 82px; } }
  @media screen and (max-width: 960px) {
    #contact {
      padding: 13.33333vw 0; } }
  #contact .btn {
    border: 1px solid #000;
    background-color: #fff;
    color: #000; }
    @media print, screen and (min-width: 961px) {
      #contact .btn {
        width: 440px; }
        #contact .btn:hover {
          color: #fff; }
        #contact .btn::before {
          background-color: #000; } }
  #contact h4 {
    margin-top: 2em;
    font-size: 1.25rem;
    font-weight: 500; }
  #contact p {
    margin-top: 0.6em; }

/*==================================================
	footer
==================================================*/
footer {
  background-color: black;
  color: #fff;
  text-align: center; }
  @media print, screen and (min-width: 961px) {
    footer p {
      margin: 0;
      padding: 30px;
      font-size: 11px; } }
  @media screen and (max-width: 960px) {
    footer p {
      padding: 4vw;
      font-size: 2vw; } }

/*# sourceMappingURL=style.css.map */