@charset "UTF-8";

#about {
  .outer {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    .inr {
      position: relative;
      .txt_area {
        position: relative;
        z-index: 2;
        h1 {
          margin-bottom: 5rem;
          font-size: 3.8rem;
          color: var(--maincolor);
          line-height: 1.5;
          letter-spacing: 0.03em;
          text-align: center;
          span {
            display: block;
          }
        }
        h2 {
          display: flex;
          line-height: 2.4;
          letter-spacing: 0.1em;
          font-size: 3.3rem;
          letter-spacing: 0.05em;
          font-weight: 700;
          text-align: center;
          justify-content: center;
          align-items: center;
          margin-bottom: 3rem;
          span {
            line-height: 1;
          }
          &::before,
          &::after {
            content: "";
            display: block;
            width: 0.4rem;
            height: 4.2rem;
            background-color: var(--textcolor);
            transform: rotate(-25deg);
            margin: 0 1.5rem;
          }
          &::after {
            transform: rotate(25deg);
          }
        }
      }
      .cnt_area {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        position: relative;
        .left {
          position: relative;
          width: 40%;
          flex-shrink: 0;
          font-size: 0;
          div {
            position: relative;
            z-index: 1;
          }
          .bg {
            display: block;
            width: 100%;
            height: 100%;
            background-color: #534741;
            position: absolute;
            top: 1rem;
            left: 1rem;
          }
        }
        .right {
          position: relative;
          width: 56%;
          .txt {
            margin-left: 3rem;
            p {
              line-height: 2.4;
              letter-spacing: 0.1em;
              font-size: 1.6rem;
            }
            .min {
              font-size: 1.4rem;
              font-weight: 700;
              letter-spacing: 0.1em;
              margin-top: 2rem;
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 743px) {
    padding: 5rem 2.5rem;
    .outer {
      padding: 0;
      .inr {
        position: relative;
        .txt_area {
          margin-bottom: 0;
          h1 {
            font-size: 1.75rem;
            line-height: 1.5;
            letter-spacing: 0.03em;
            margin-bottom: 3rem;
            text-align: center;
          }
          h2 {
            font-size: 1.6rem;
            margin-bottom: 1.5rem;
            &::before,
            &::after {
              width: 0.2rem;
              height: 2.1rem;
              margin: 0 1.5rem;
            }
          }
        }
        .cnt_area {
          display: block;
          .left {
            width: auto;
            margin-bottom: 3rem;
            .bg {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            width: auto;
            .txt {
              margin-left: 0;
              p {
                line-height: 2;
                font-size: 1.3rem;
              }
              .min {
                font-size: 1.2rem;
                margin-top: 2rem;
                p {
                  display: block;
                }
              }
            }
          }
        }
      }
    }
  }
}

#gallery {
  position: relative;
  z-index: 1;
  .outer {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    .inr {
      max-width: 1200px;
      margin: 0 auto;
      .txt_area {
        position: relative;
        z-index: 1;
        margin-bottom: 4rem;
        h1 {
          font-size: 3.8rem;
          color: var(--maincolor);
          line-height: 1.5;
          letter-spacing: 0.1em;
          margin-bottom: 1rem;
          text-shadow: 1px 2px 3px #f8f8f8;
          text-align: center;
          span {
            display: block;
            font-family: var(--roboto);
          }
        }
      }
      .thunbnail {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
          width: 32.8%;
          font-size: 0;
          list-style: none;
          text-align: center;
          position: relative;
          padding: 0;
          margin-bottom: 0.8%;
          cursor: pointer;
          transition: opacity 0.3s ease-in-out;
          &:hover {
            opacity: 0.5;
          }
          .li_wrap {
            display: none;
          }
        }
      }
    }
  }
  @media screen and (max-width: 743px) {
    padding: 5rem 2.5rem;
    .outer {
      padding: 0;
      .inr {
        .txt_area {
          text-align: center;
          margin-bottom: 4rem;
          h1 {
            font-size: 2.3rem;
            letter-spacing: 0.1em;
            margin-bottom: 0.4rem;
            white-space: nowrap;
            text-align: center;
            span {
              font-size: 1.2rem;
            }
          }
        }
        .thunbnail {
          button {
            width: 49.5%;
            margin-bottom: 1%;
            padding: 0;
          }
        }
      }
    }
  }
}