@charset "utf-8";

body {
  /*    font-family: 'Montserrat', sans-serif;*/
  height: 100%;
  font-weight: 700;
  min-width: 320px;
  font-family: "Montserrat", heisei-kaku-gothic-std, sans-serif;
  font-style: normal;
}

#wrap {
  /*    width: 100%;*/
  /*    max-width: 1920px;*/
}

/*--SP--*/
@media screen and (max-width: 768px) {
  /*-------------------------
     基本設定
    --------------------------*/
  /*--main-container-area--*/
  .pc-container {
    padding-top: 100px;
    /*        margin: 0 6vw;*/
    width: 100%;
  }

  .sp-title {
    font-size: 2em;
    font-weight: 300;
    color: gray;
    position: fixed;
    z-index: 5;
    margin-left: 6vw;
  }

  .sp-top-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background-color: #fff;
    z-index: 2;
    opacity: 0.92;
  }

  .ex-top-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-color: #fff;
    z-index: 2;
    opacity: 0.92;
  }

  /*--nav--*/
  /*=============================
    .btn-trigger
    =============================*/
  nav {
    position: fixed;
    top: 0;
    z-index: 10;
    height: 0;
  }

  .btn-trigger {
    position: relative;
    top: 6vw;
    left: 6vw;
    width: 50px;
    height: 32px;
    cursor: pointer;
    z-index: 20;
  }

  .btn-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #000;
    border-radius: 4px;
  }

  .btn-trigger,
  .btn-trigger span {
    display: inline-block;
    transition: all 0.5s;
    box-sizing: border-box;
  }

  .btn-trigger span:nth-of-type(1) {
    top: 0;
  }

  .btn-trigger span:nth-of-type(2) {
    top: 13px;
  }

  .btn-trigger span:nth-of-type(3) {
    bottom: 0;
  }

  /*=============================
    #btn01
    =============================*/

  #btn01.active span:nth-of-type(1) {
    -webkit-transform: translateY(13px) rotate(45deg);
    transform: translateY(13px) rotate(45deg);
  }

  #btn01.active span:nth-of-type(2) {
    opacity: 0;
  }

  #btn01.active span:nth-of-type(3) {
    -webkit-transform: translateY(-13px) rotate(-45deg);
    transform: translateY(-13px) rotate(-45deg);
  }

  /*--ハンバーガー--*/

  .btn-sp {
    position: absolute;
    top: 0;
  }

  .nav-hide {
    width: 100vw;
    height: 100vh;
    padding: calc(6vw + 50px);
    padding-top: calc(6vw + 10vh);
    background-color: rgba(255, 255, 255, 0.9);
    position: relative;
    left: -100vw;
    transition: 0.25s ease-out;
    z-index: 10;
  }

  .nav-hide .ground-nav p {
    font-size: 1.6em;
    display: table;
    margin-bottom: 4vh;
  }

  .nav-hide .ground-nav p a {
    display: block;
    width: 100%;
    height: 100%;
  }

  .nav-hide span {
    position: absolute;
    left: calc(6vw + 50px);
    width: 18vw;
    height: 3px;
    background-color: #000;
    border-radius: 4px;
  }

  .nav-hide .fab {
    font-size: 1.2em;
    margin-right: 5vw;
    margin-top: 2.5vh;
  }

  .fade {
    left: 0;
  }

  /*--main--*/
  main {
  }

  .lp {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 3em;
    text-align: center;
  }

  .pc {
    display: none;
  }

  /*--------------------------
    　home
    ---------------------------*/
  .home-body {
    width: calc(100vw - calc(100vw - 100%));
    height: 100vh;
    background-image: url("../img/web_home_phone_02.jpg");
    background-size: cover;
  }

  /*-------------------------
    　works
    ----------------------------*/
  .works-container {
    font-size: 1em;
    /*        width: calc(100vw - calc(100vw - 100%));*/
    margin-top: 50px;
    height: 0;
  }

  #gallery {
    width: calc(100vw - calc(100vw - 100%));
    /*    margin: 0 6vw;*/
    margin: 0 auto;
    overflow: hidden;
    z-index: -10;
  }

  #gallery li {
    width: calc(88vw / 3);
    padding: 1vw;
  }

  #gallery li img {
    max-width: 100%;
    height: auto;
  }

  /*---------works-content---------------*/
  .tab-wrap {
    /*        height: 100%;*/
    /*        width: 100vw;*/
    /*        display: flex;*/
    /*        flex-wrap: wrap;*/
  }

  .works-container-item {
    font-size: 1em;
    width: calc(100vw - calc(100vw - 100%));
    /*        display: flex;*/
    /*        flex-wrap: wrap;*/
    /*        flex-direction: column;*/
    /*        margin-left: 30px;*/
    margin-top: 150px;
  }

  .back {
  }

  .back a {
    font-size: 1.8em;
    position: fixed;
    top: 150px;
    left: 6vw;
    z-index: 3;
    display: flex;
  }

  .back i {
    font-size: 1.1em;
  }

  .works-items img {
    width: calc(100vw - calc(100vw - 100%));
  }

  .works-items {
    margin-bottom: 100px;
  }

  .work-title {
    font-size: 2.2em;
    margin-bottom: 25px;
    margin-left: 6vw;
  }

  .work-text {
    width: calc(100% - 12vw);
    font-family: "Montserrat", source-han-sans-japanese, sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 1.4;
    margin: 0 auto;
    margin-bottom: 30px;
    /*        margin-left: 6vw;*/
    line-height: 2;
    letter-spacing: 1px;
  }

  .works-img {
    margin-bottom: 25px;
  }

  video {
    width: 100%;
    margin-bottom: 25px;
  }

  .link-text {
    color: blue;
    border-bottom: 1px solid blue;
  }

  /*-------------------------
     exhibition
    ----------------------------*/
  .tab-wrap {
    /*        height: 100%;*/
    /*        width: 100vw;*/
    /*        display: flex;*/
    /*        flex-wrap: wrap;*/
  }

  .exhibition-container {
    font-size: 1em;
    width: calc(100vw - calc(100vw - 100%));
    /*        display: flex;*/
    /*        flex-wrap: wrap;*/
    /*        flex-direction: column;*/
    /*        margin-left: 30px;*/
    margin-top: 150px;
  }

  .tab-label {
    width: 150px;
    color: #ccc;
    order: -1;
  }

  .list-2020 {
    font-size: 1.8em;
    position: fixed;
    top: 150px;
    left: 6vw;
    z-index: 3;
  }

  .list-2021 {
    font-size: 1.8em;
    position: fixed;
    top: 150px;
    left: calc(6vw + 90px);
    z-index: 3;
  }

  .list-2022 {
    font-size: 1.8em;
    position: fixed;
    top: 150px;
    left: calc(6vw + 180px);
    z-index: 3;
  }

  .tab-content {
    display: none;
    /*        width: 100vw;*/
    /*        min-width: 500px;*/
    /*        margin-right: 6vw;*/
  }

  /* アクティブなタブ */
  .tab-switch:checked + .tab-label {
    color: #000;
  }

  .tab-switch:checked + .tab-label + .tab-content {
    height: 100%;
    display: block;
  }

  /* ラジオボタン非表示 */
  .tab-switch {
    display: none;
  }

  .tab-content img {
    width: calc(100vw - calc(100vw - 100%));
  }

  .tab-content-item {
    margin-bottom: 100px;
  }

  .ex-title {
    font-size: 2.2em;
    margin-bottom: 25px;
    margin-left: 6vw;
  }

  .ex-text {
    width: calc(100% - 8vw);
    font-family: "Montserrat", source-han-sans-japanese, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1em;
    margin: 0 auto;
    margin-bottom: 30px;
    /*        margin-left: 6vw;*/
    line-height: 2;
    letter-spacing: 1px;
  }

  .exhibition-img {
    margin-bottom: 25px;
  }

  /*-------------------------
     about
    ----------------------------*/
  .about-container {
    font-size: 1em;
    width: calc(100vw - calc(100vw - 100%));
    /*        display: flex;*/
    /*        flex-wrap: wrap;*/
    /*        flex-direction: column;*/
    padding: 0 6vw;
    margin-top: 50px;
  }

  .about-container p {
    line-height: 1.4;
  }

  .name-title {
    font-size: 2.2em;
  }

  .about-container hr {
    /*        position: relative;*/
    /*        height: 4px;*/

    width: 100px;
    border: 1px solid #000;
    border-radius: 4px;
    background-color: #000;
    margin: 30px 0;
  }

  .about-container .about-jp-text {
    font-family: "Montserrat", source-han-sans-japanese, sans-serif;
    font-weight: 300;
    font-style: normal;
    margin-bottom: 30px;
    line-height: 2;
    letter-spacing: 1px;
  }

  .about-container .about-en-text {
    font-size: 1em;
    margin-bottom: 30px;
    line-height: 2;
    letter-spacing: 1px;
    font-weight: 500;
  }

  .mizuishi_profile {
    width: 50%;
    margin-bottom: 50px;
  }

  .mizuishi_profile img {
    width: 100%;
  }

  .biography {
    font-size: 2.2em;
    margin-bottom: 25px;
  }

  .biography-container {
    display: flex;
    margin-bottom: 30px;
  }

  .biography-year {
    margin-right: 6vw;
  }

  .biography-year p {
    font-size: 1em;
    font-weight: 300;
  }

  .biography-list {
    font-family: "Montserrat", source-han-sans-japanese, sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 2;
    letter-spacing: 1px;
  }

  /*-------------------------
     contact
    ----------------------------*/
  .contact-wrap {
    font-size: 1em;
    width: calc(100vw - calc(100vw - 100%));
    padding: 0 6vw;
    margin-top: 50px;
  }

  .contact-wrap hr {
    width: 100px;
    border: 1px solid #000;
    border-radius: 4px;
    background-color: #000;
    margin: 30px 0;
  }

  .contact-content {
    margin-bottom: 30px;
    font-size: 1.2em;
    font-weight: 300;
  }

  .contact-content p:first-child {
    margin-bottom: 10px;
  }

  .sns-container i {
    font-size: 2em;
    margin-right: 7vw;
  }
}

/*--PC--*/
@media screen and (min-width: 769px) {
  /*--nav--*/
  .nav-hide {
    position: fixed;
    width: calc(100vw - calc(100vw - 100%));
    /*        max-width: 1920px;*/
    z-index: 10;
  }

  .header-cover {
    height: 80px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.35);
    position: fixed;
    top: 0;
    z-index: 1;
  }

  .nav-hide .ground-nav {
    width: 55vw;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    margin-right: 2.5vw;
    position: relative;
    top: 0;
    left: 0;
  }

  .nav-hide p {
    width: calc(55vw / 5);
    height: 80px;
    text-align: center;
    /*        770px - 15px | 1820 - 25px;*/
    font-size: calc(15px + 10 * calc(100vw - 770px) / 1500);
  }

  .nav-hide p a {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 40px;
  }

  .lp {
    position: fixed;
    top: 28px;
    left: 50px;
    font-size: 1.5em;
    z-index: 10;
  }

  .nav-hide .fab {
    /*        width: 100px;*/
    display: flex;
    /*        margin-right: 100px;*/
    font-size: 1.2em;
    /*        margin-right: 25px;*/
  }

  .nav-hide .fab img {
    font-size: 0.8em;
  }

  .current {
    color: #fff;
    /*        background-color: #222;*/
  }

  .ground-nav {
    width: 100%;
    /*        max-width: 1920px;*/
  }

  .ground-nav:hover :not(hover) {
    color: #000;
    transition: 0.45s;
  }

  .ground-nav p a {
    transition: 0.6s;
  }

  .ground-nav p a:hover {
    color: #fff;
  }

  .global-nav--bar {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    width: 20%;
    height: 100%;
    background: #000;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    z-index: -5;
  }

  .nav-hide .ground-nav p:nth-child(1):hover ~ .global-nav--bar {
    left: 0;
  }

  .nav-hide .ground-nav p:nth-child(2):hover ~ .global-nav--bar {
    left: 20%;
  }

  .nav-hide .ground-nav p:nth-child(3):hover ~ .global-nav--bar {
    left: 40%;
  }

  .nav-hide .ground-nav p:nth-child(4):hover ~ .global-nav--bar {
    left: 60%;
  }

  .nav-hide .ground-nav p:nth-child(6):hover ~ .global-nav--bar {
    left: 80%;
  }

  .ground-nav p:nth-child(1).current ~ .global-nav--bar {
    left: 0;
  }

  .ground-nav p:nth-child(2).current ~ .global-nav--bar {
    left: 20%;
  }

  .nav-hide div p:nth-child(3).current ~ .global-nav--bar {
    left: 40%;
  }

  .nav-hide div p:nth-child(4).current ~ .global-nav--bar {
    left: 60%;
  }

  .ground-nav p:nth-child(6).current ~ .global-nav--bar {
    left: 80%;
  }

  .ground-nav p:hover {
    color: #fff;
  }

  .nav-hide .fab img {
    width: 1.6em;
    /*        margin-right: 25px;*/
  }

  .nav-hide .fab a:nth-child(1) {
    position: fixed;
    right: 200px;
    bottom: 50px;
    /*        margin-right: 25px;*/
    /*        width: 100px;*/
  }

  .nav-hide .fab a:nth-child(2) {
    position: fixed;
    right: 150px;
    bottom: 50px;
    /*        width: 100px;*/
  }

  .nav-hide .fab a:nth-child(3) {
    position: fixed;
    right: 100px;
    bottom: 50px;
    /*        width: 100px;*/
  }

  .nav-hide .fab a:nth-child(4) {
    position: fixed;
    right: 50px;
    bottom: 50px;
    /*        width: 100px;*/
  }

  .sp {
    display: none;
  }

  /*--main-container-area--*/
  .pc-container {
    padding-top: 200px;
  }

  /*--------------------------
    　home
    ---------------------------*/
  .home-body {
    /*
        width: 100%;
        height: 100vh;
        background-image: url("../img/nmb2020_main_03.jpg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;

*/
  }

  /*--画面すべて同タイミングでのフェードインなら上部に変更--*/

  .home-img {
    width: 100%;
    height: 100vh;
    background-image: url("../img/nmb2020_main_03.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    animation: fadeIn 3s ease 0s 1 normal;
    position: absolute;
    top: 0;
    z-index: -20;
    animation: fadeIn 1.5s ease 0s 1 normal;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  /*-------------------------
    　works
    ----------------------------*/
  .works-container {
    font-size: 1em;
    width: 70vw;
    margin-top: 50px;
    margin: 0 auto;
    height: 0;
  }

  #gallery {
    /*        width: 900px;*/
    margin: 0 auto;
    overflow: hidden;
    z-index: -10;
  }

  #gallery li {
    max-width: 20vw;
    padding: 10px;
  }

  #gallery li img {
    max-width: 100%;
    height: auto;
  }

  /*---------works-content---------------*/

  .works-container-item {
    font-size: 1em;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }

  .back {
  }

  .back a {
    font-size: 2em;
    position: fixed;
    top: 200px;
    left: 50px;
    display: flex;
  }

  .back i {
    font-size: 1.1em;
  }

  .works-items img {
    width: calc(100vw - calc(100vw - 100%));
    margin-bottom: 30px;
  }

  .works-items {
    width: 45%;
    min-width: 400px;
    margin: 0 auto;
  }

  .work-title {
    font-size: 1.7em;
    margin-bottom: 25px;
  }

  .work-text {
    width: 100%;
    line-height: 1.4;
    margin-bottom: 25px;
    font-family: "Montserrat", source-han-sans-japanese, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1em;
    line-height: 2;
    letter-spacing: 1px;
  }

  .link-text {
    color: blue;
    border-bottom: 1px solid blue;
  }

  video {
    width: 100%;
    margin-bottom: 25px;
  }

  /*-------------------------
     exhibition
    ----------------------------*/
  .tab-wrap {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .exhibition-container {
    font-size: 1em;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-left: 30px;
  }

  .tab-label {
    width: 150px;
    color: #ccc;
    order: -1;
  }

  .list-2020 {
    font-size: 2em;
    position: fixed;
    top: 200px;
    left: 50px;
  }

  .list-2021 {
    font-size: 2em;
    position: fixed;
    top: 250px;
    left: 50px;
  }

  .list-2022 {
    font-size: 2em;
    position: fixed;
    top: 300px;
    left: 50px;
  }

  .tab-content {
    display: none;
    width: 45%;
    min-width: 500px;
    margin: 0 auto;
  }

  /* アクティブなタブ */
  .tab-switch:checked + .tab-label {
    color: #000;
  }

  .tab-switch:checked + .tab-label + .tab-content {
    height: 100%;
    display: block;
  }

  /* ラジオボタン非表示 */
  .tab-switch {
    display: none;
  }

  .tab-content img {
    width: 100%;
  }

  .tab-content-item {
    margin-bottom: 100px;
  }

  .ex-title {
    font-size: 1.7em;
    margin-bottom: 30px;
  }

  .ex-text {
    width: 100%;
    font-family: "Montserrat", source-han-sans-japanese, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1em;
    margin-bottom: 25px;
    line-height: 2;
    letter-spacing: 1px;
  }

  .exhibition-img {
    margin-bottom: 25px;
  }

  /*-------------------------
     about
    ----------------------------*/
  .about-container {
    font-size: 1em;
    width: 55%;
    margin-left: 20%;
    /*        display: flex;*/
    /*        flex-wrap: wrap;*/
    /*        flex-direction: column;*/
    padding: 0 6vw;
    /*        margin-top: 50px;*/
  }

  .about-container p {
    line-height: 1.4;
    font-style: normal;
  }

  .name-title {
    font-size: 2em;
    /*        font-weight: 300;*/
    margin-bottom: 25px;
  }

  .about-container hr {
    width: 100px;
    border: 1px solid #000;
    border-radius: 4px;
    background-color: #000;
    margin: 80px 0;
  }

  .about-container .about-jp-text {
    font-size: 1em;
    margin-bottom: 30px;
    font-family: "Montserrat", source-han-sans-japanese, sans-serif;
    /*        font-family: source-han-sans-japanese,'Montserrat', sans-serif;*/
    font-weight: 300;
    line-height: 2;
    letter-spacing: 1px;
  }

  .about-container .about-en-text {
    font-size: 1em;
    margin-bottom: 30px;
    line-height: 2;
    letter-spacing: 1px;
    font-weight: 500;
  }

  .mizuishi_profile {
    width: 20%;
    /*        min-width: 250px;*/
    margin-bottom: 50px;
    position: fixed;
    top: 200px;
    right: 6vw;
  }

  .mizuishi_profile img {
    width: 100%;
  }

  .biography {
    font-size: 2.2em;
    margin-bottom: 25px;
  }

  .biography-container {
    display: flex;
    margin-bottom: 30px;
  }

  .biography-year {
    margin-right: 6vw;
  }

  .biography-year p {
    font-size: 1em;
    font-weight: 300;
  }

  .biography-list {
    font-family: "Montserrat", source-han-sans-japanese, sans-serif;
    font-weight: 300;
    width: 60%;
    line-height: 2;
    letter-spacing: 1px;
  }

  .biography-list p {
  }

  /*-------------------------
     contact
    ----------------------------*/
  .contact-wrap {
    font-size: 1em;
    width: calc(100vw - calc(100vw - 100%));
    padding: 0 6vw;
  }

  .contact-wrap hr {
    width: 100px;
    border: 1px solid #000;
    border-radius: 4px;
    background-color: #000;
    margin: 60px 0;
  }

  .flex {
    display: flex;
  }

  .jst {
    font-weight: 300;
  }

  .contact-content {
    margin-bottom: 30px;
    font-size: 1.2em;
    font-weight: 300;
  }

  .contact-content p:first-child {
    width: 300px;
  }
}