@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap");
/*============================
/* 896px以上用（PC用）の記述
==============================*/
@media screen and (min-width: 896px) {
  /*============================
  visual
  ==============================*/
  #visual {
    height: 800px;
    position: relative;
    margin-right: 5%; }
    #visual .visual-slider {
      display: block;
      width: 100%;
      height: 100%; }
      #visual .visual-slider .visual-slider-concept {
        position: absolute;
        top: 0;
        left: 0;
        width: 30%;
        height: 100%;
        background-color: #E4DFC3; }
      #visual .visual-slider .visual-slider-body {
        top: 0;
        left: 25%;
        position: absolute;
        background-size: cover;
        width: 75%;
        height: 100%;
        /* animation: bgAnime 14s infinite; */
        opacity: 0.6; }

      /* #visual .visual-slider .visual-slider-image1 {
        background-image: url("../images/top1.jpg"); }
      #visual .visual-slider .visual-slider-image2 {
        background-image: url("../images/top2.png");
        animation-delay: -2s; }
      #visual .visual-slider .visual-slider-image3 {
        background-image: url("../images/top3.png");
        animation-delay: 5s; } */



  @keyframes bgAnime {
     0%{
    opacity:0;
      }
    14.28%{
    opacity:0.6;
      }
    50%{
    opacity:0.6;
    }
    64.28%{
    opacity:0;
    }
    100%{
    opacity:0;
    } 
  }

    


    #visual .visual-text {
      position: absolute;
      top: 25%;
      left: 8%;
      letter-spacing: 0.3em;
      z-index: 1; }
      #visual .visual-text h2 {
        font-size: 48px;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 100;
        margin-bottom: 48px;
        opacity: 0; }
        #visual .visual-text h2 span {
          font-size: 60px;
          opacity: 0; }
      #visual .visual-text .visual-lead {
        letter-spacing: 3.23px;
        font-size: 20px;
        font-weight: 100;
        opacity: 0; }
        #visual .visual-text .visual-lead .pc {
          display: none; }
        #visual .visual-text .visual-lead span {
          font-size: 28px;
          opacity: 0; }
  /*============================
  about
  ==============================*/
  #about {
    height: 100%;
    position: relative;
    font-weight: lighter; }
    #about .about-main {
      background: #F6F5EA;
      margin: 2em 0 2em 24%;
      height: 48vw; }
      #about .about-main .about-main-inner {
        padding: 32px;
        height: 100%; }
        #about .about-main .about-main-inner .about-info {
          padding: 51px; }
          #about .about-main .about-main-inner .about-info .about-title {
            display: flex;
            justify-content: center;
            padding: 36px 0 0;
            font-size: 40px;
            font-weight: 300;
            letter-spacing: 0.15em; }
            #about .about-main .about-main-inner .about-info .about-title ul {
              display: flex;
              letter-spacing: 0.3em; }
              #about .about-main .about-main-inner .about-info .about-title ul:not(:last-child) {
                padding-right: 32px; }
              #about .about-main .about-main-inner .about-info .about-title ul:last-child {
                padding-left: 32px; }
              #about .about-main .about-main-inner .about-info .about-title ul li span {
                font-size: 14px; }
              #about .about-main .about-main-inner .about-info .about-title ul li:not(:last-child) {
                font-family: 'Josefin Slab';
                font-size: 32px;
                margin-right: 16px; }
              #about .about-main .about-main-inner .about-info .about-title ul li:last-child {
                font-size: 24px;
                padding-top: 16px; }
          #about .about-main .about-main-inner .about-info .about-description {
            display: inline-block;
            margin: 3em 1em 0 34%;
            font-size: 20px;
            line-height: 2.5;
            letter-spacing: 0.15em; }
            #about .about-main .about-main-inner .about-info .about-description p .sp {
              display: none; }
            #about .about-main .about-main-inner .about-info .about-description .about-button-more {
              float: right;
              margin: 25px 2px;
              font-weight: normal; }
    #about .about-image {
      opacity: 0.8; }
      #about .about-image .about-image1 {
        position: absolute;
        top: 8vw;
        max-width: 30vw;
        max-height: 100vw;
        filter: brightness(110%);
        transform: translateX(-80px);
        transition-delay: 0s; }
        #about .about-image .about-image1.is-show {
          transform: translateX(0); }
      #about .about-image .about-image2 {
        position: absolute;
        top: 35vw;
        left: 45vw;
        max-width: 38vw;
        filter: brightness(110%);
        transform: translateX(80px);
        transition-delay: 0s; }
        #about .about-image .about-image2.is-show {
          transform: translateX(0); }
  /*============================
  item
  ==============================*/
  #item {
    padding: 20vw 0 16px 0; }
    #item h2 {
      text-align: center;
      font-size: 2em;
      font-family: 'Century Gothic';
      font-weight: bold;
      letter-spacing: 2.27px; }
    #item .item-inner {
      max-width: 1280px;
      margin: 48px auto;
      text-align: center;
      padding: 0 48px; }
      #item .item-inner ul.item-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0; }
        #item .item-inner ul.item-list li.item-info {
          width: 100%;
          flex: 0 0 20%;
          margin-bottom: 10px;
          position: relative;
          text-align: center; }
          #item .item-inner ul.item-list li.item-info a {
            color: #000; }
          #item .item-inner ul.item-list li.item-info img.item-thum {
            overflow: hidden;
            max-width: 400px;
            height: auto; }
          #item .item-inner ul.item-list li.item-info .item-description {
            display: block;
            position: absolute;
            bottom: 5px;
            width: 100%;
            padding: 16px 0;
            font-size: 14px;
            text-align: left;
            background-color: #fff;
            opacity: 0; }
            #item .item-inner ul.item-list li.item-info .item-description .item-name {
              margin-bottom: 6px;
              padding: 0 16px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap; }
            #item .item-inner ul.item-list li.item-info .item-description .item-price {
              margin-bottom: 6px;
              padding: 0 16px;
              font-weight: bold; }
              #item .item-inner ul.item-list li.item-info .item-description .item-price small {
                font-weight: lighter;
                margin-left: 8px;
                color: gray; }
            #item .item-inner ul.item-list li.item-info .item-description .item-color {
              padding: 0 16px;
              font-size: 12px; }
        #item .item-inner ul.item-list li:hover .item-description {
          opacity: 0.7;
          transition: all 0.6s ease; }
      #item .item-inner .item-button-more {
        display: inline-block;
        width: 30%; }
        #item .item-inner .item-button-more a {
          border: 1px solid #5d5b5b; }
  /*============================
  works
  ==============================*/
  #works {
    padding: 10vw 0 16px 0;
    font-weight: lighter; }
    #works h2 {
      text-align: center;
      font-size: 2em;
      font-family: 'Century Gothic';
      letter-spacing: 2.27px; }
    #works .works-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding-top: 90px;}
      #works .works-inner .works-main {
        display: flex; }
        #works .works-inner .works-main .works-main-description {
          line-height: 2;
          width: 50%;
          padding: 8px 16px 0 0; }
          #works .works-inner .works-main .works-main-description h3 {
            font-weight: lighter;
            font-size: 20px; }
          #works .works-inner .works-main .works-main-description p {
            margin-top: 56px;
            font-size: 20px;
            line-height: 2.5; }
          #works .works-inner .works-main .works-main-description .works-description-button-more {
            display: inline-block;
            font-weight: normal; }
            #works .works-inner .works-main .works-main-description .works-description-button-more a {
              border: 1px solid #5d5b5b;
              margin-top: 56px; }
        #works .works-inner .works-main .works-main-image {
          width: 50%; }
  /*============================
  Information
  ==============================*/
  #information {
    margin: 10vw 0 16px 0;
    padding: 60px 64px;
    background-color: #e7e7e7; }
    #information .information-inner .information-main {
      display: flex;
      margin: 0 auto;
      max-width: 1280px;
      justify-content: center; }
      #information .information-inner .information-main .information-title {
        /*padding-right: 20%;*/
        padding-right: 20%;
        width: 30%; }
        #information .information-inner .information-main .information-title h2 {
          font-size: 2em;
          font-family: 'Century Gothic';
          font-weight: bold;
          letter-spacing: 2.27px;
          margin: 0; }
        #information .information-inner .information-main .information-title .information-button-more-pc {
          display: inline-block;
          margin-top: 56px; }
      #information .information-inner .information-main .information-list {
        width: 80%;
        padding-top: 24px; }
        #information .information-inner .information-main .information-list ul {
          margin: 0;
          padding: 0; }
          #information .information-inner .information-main .information-list ul li {
            font-size: 16px;
            border-bottom: 1px solid #f2f2f2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; 
            letter-spacing: 0.04em;}
            #information .information-inner .information-main .information-list ul li:first-child {
              padding-bottom: 8px; }
            #information .information-inner .information-main .information-list ul li:not(:first-child) {
              padding: 22px 0; }
            #information .information-inner .information-main .information-list ul li a {
              color: #000;
              font-weight: lighter; }
            #information .information-inner .information-main .information-list ul li a:hover {
              opacity: 0.6; } 
              #information .information-inner .information-main .information-list ul li a span {
                font-family: 'Century Gothic';
                font-weight: normal;
                font-size: 14px;
                padding-right: 30px;
                color: #918D6682;
                letter-spacing: 2.25px; }
      #information .information-inner .information-main .information-button-more-sp {
        display: none; }
  /*============================
  instagram
  ==============================*/
  #instagram {
    padding: 10vw 0 16px 0;
    background-color: #fff; }
    #instagram .instagram-title {
      position: relative;
      background-color: #E4DFC3;
      opacity: 0.7;
      padding: 16px 0;
      text-align: center; }
      #instagram .instagram-title h2 {
        position: absolute;
        width: 100%;
        top: 5px;
        font-size: 2em;
        font-family: 'Century Gothic';
        font-weight: bold;
        letter-spacing: 2.27px; }
    #instagram .instagram-main {
      margin: 40px; }
  /*============================
  contact
  ==============================*/
  #contact {
    margin: 10vw 48px 0;
    background-color: #e7e7e7;
    font-weight: lighter; }
    #contact h2 {
      text-align: center;
      font-size: 2em;
      font-family: 'Century Gothic';
      font-weight: bold;
      letter-spacing: 2.27px;
      padding: 50px 10px; }
    #contact .contact-inner .contact-main .contact-info {
      color: #9C9C9C; 
      letter-spacing: .05em;}
      #contact .contact-inner .contact-main .contact-info ul {
        display: flex;
        justify-content: center;
        font-size: 18px;
        font-family: 'Century Gothic'; }
        #contact .contact-inner .contact-main .contact-info ul li:not(:last-child) {
          border-right: 1px solid #9C9C9C;
          padding-right: 16px;
          margin-right: 16px; }
    #contact .contact-inner .contact-main .contact-form {
      margin: 0 auto;
      max-width: 1280px;
      padding: 56px 0 40px 0; }
      #contact .contact-inner .contact-main .contact-form .contact-body {
        display: flex;
        justify-content: space-between;
        font-size: 14px; }
        #contact .contact-inner .contact-main .contact-form .contact-body .contact-description {
          font-size: 16px; }
        #contact .contact-inner .contact-main .contact-form .contact-body .contact-form-group {
          width: 380px; }
        #contact .contact-inner .contact-main .contact-form .contact-body .contact-form-input-block {
          display: grid;
          margin-bottom: 8px;
          border: none;
          outline: none; }
          #contact .contact-inner .contact-main .contact-form .contact-body .contact-form-input-block label {
            margin-bottom: 8px; }
          #contact .contact-inner .contact-main .contact-form .contact-body .contact-form-input-block input {
            padding: 1rem;
            border: none;
            outline: none;
            width: 100%;
            font-family: "Hiragino Sans", "Hiragino Kaku Gothic Std";
            box-sizing: border-box;
            -moz-box-sizing: border-box; /* Firefox */
            -webkit-box-sizing: border-box; /* Chrome, Safari */ }
        #contact .contact-inner .contact-main .contact-form .contact-body .contact-form-textarea-block {
          display: grid; 
          }
          #contact .contact-inner .contact-main .contact-form .contact-body .contact-form-textarea-block label {
            margin-bottom: 8px; }
          #contact .contact-inner .contact-main .contact-form .contact-body .contact-form-textarea-block textarea {
            width: 500px;
            height: 230px;
            padding: 1.2rem;
            font-size: 16px;
            border: none;
            outline: none;
            resize: none;
            font-family: "Hiragino Sans", "Hiragino Kaku Gothic Std";
            box-sizing: border-box;
            -moz-box-sizing: border-box; /* Firefox */
            -webkit-box-sizing: border-box; /* Chrome, Safari */ }
          #contact .contact-inner .contact-main .contact-form .contact-body .contact-form-textarea-block .contact-submit-container {
            text-align: right;
            padding: 24px 0 24px 0; }
            #contact .contact-inner .contact-main .contact-form .contact-body .contact-form-textarea-block .contact-submit-container .contact-submit-button {
              display: inline-block;
              text-decoration: none;
              color: #FFF;
              background-color: #000;
              transition: .4s;
              border: none;
              cursor: pointer;
              padding: 8px 32px;
              width: 100%; }
              #contact .contact-inner .contact-main .contact-form .contact-body .contact-form-textarea-block .contact-submit-container .contact-submit-button:hover {
                opacity: 0.8; }
    #contact .contact-inner table {
      padding: 10px;
      width: 80%;
      margin: 0 auto;
      border-right: 1px solid #CCCCCC;
      border-top: 1px solid #CCCCCC; }
      #contact .contact-inner table th, #contact .contact-inner table td {
        border-bottom: 1px solid #CCCCCC;
        border-left: 1px solid #CCCCCC;
        padding: 10px 20px; }
      #contact .contact-inner table th {
        background: #DEB2B2;
        font-weight: normal;
        text-align: left;
        vertical-align: top; }
    #contact .contact-inner .color-red {
      border-radius: 5px;
      margin: 5px;
      padding: 5px;
      background: #BD2D2D;
      color: #fff;
      font-size: 10px; }
    #contact .contact-inner input {
      padding: 8px 30px;
      font-size: 14px; }
      #contact .contact-inner input::placeholder {
        color: #BCBCBC; }
  .modal-lg {
    max-width: 700px;
    max-height: 500px; }
    .modal-lg .modal-item-info {
      display: flex; }
      .modal-lg .modal-item-info img {
        width: 50%; }
      .modal-lg .modal-item-info .modal-item-description {
        width: 50%;
        padding: 32px; }
        .modal-lg .modal-item-info .modal-item-description .modal-item-price {
          margin-top: 8px; }
        .modal-lg .modal-item-info .modal-item-description .modal-item-color {
          margin-top: 8px; } }

@media screen and (max-width: 1300px) {
  /*============================
  about
  ==============================*/
  #about .about-main {
    height: 48vw; }
  #about .about-image .about-image2 {
    top: 35vw; } }

@media screen and (max-width: 1200px) {
  /*============================
  about
  ==============================*/
  #about .about-main {
    height: 68vw; }
  #about .about-image .about-image2 {
    top: 55vw; } }