@charset "UTF-8";

/* main-area */
.main-area {
  margin-top: 86px;
  min-height: calc(100svh - 86px);
  background-image: url("../img/top/top-mv.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.main-area .main-inner {
  display: flex;
  align-items: flex-end;
  min-height: calc(100svh - 86px);
  max-width: 1580px;
  margin: 0 auto;
  padding: 0 40px;
}
.main-item {
  width: 100%;
}
.main-copy {
  padding-bottom: 100px;
  color: var(--color-white);
}
.main-copy h2 {
  font-size: var(--font-2xl-sm);
  font-weight: var(--font-weight-mid);
}
.main-copy p {
  font-size: var(--font-md);
  font-weight: var(--font-weight-mid);
  padding-top: 2.25rem;
  line-height: var(--line-height-xl);
}


/* 共通 */
/* h2 */
.content-ttl {
  color: var(--color-green);
  line-height: var(--line-height-md);
}
.content-ttl span {
  display: block;
  line-height: var(--line-height-sm);
}
.content-ttl-lg {
  font-size: var(--font-xl-plus);
}
.txt-en {
  font-family: var(--font-family-sub);
  font-size: var(--font-lg);
  text-transform: uppercase;
  color: var( --color-light-khaki);
  font-weight: var(--font-weight-mid);
}
.txt-ja {
  font-size: var(--font-xl-md);
  padding-top: 1rem;
}


/* concept-area */
.concept-area .inner {
  padding: 120px 40px;
  display: flex;
  flex-direction: row-reverse;
}
.concept-area .left {
  flex: 44;
  display: flex;
  flex-direction: column;
}
.concept-area .right {
  flex: 56;
}
.concept-lead {
  font-size: var(--font-lg-minus);
  color: var(--color-green);
}
.concept-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 30px;
}
.concept-ttl {
  font-size: var(--font-xl);
  color: var(--color-green);
  line-height: var(--line-height-md);
  padding-top: 1.125rem;
  padding-bottom: 2.25rem;
}
.concept-txt {
  color: var(--color-green);
  line-height: var(--line-height-lg);
}
.concept-sub-ttl {
  font-size: var(--font-lg-xl);
  color: var(--color-green);
  padding-bottom: 0.625rem;
}


/* top-txt-area */
.top-txt-area {
  background-image: url("../img/top/top-mv.webp");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.top-txt-area .inner {
  padding: 80px 40px;
  text-align: center;
}
.top-txt {
  font-size: clamp(1.875rem, 0.542rem + 6.67vw, 8.875rem);
  color: var(--color-white);
  font-family: var(--font-family-accent);
  letter-spacing: var(--letter-spacing-widest);
}

/* 共通 */
/* feature-area */
.feature-area .inner {
  display: flex;
  gap: 100px;
  padding: 100px 40px;
}
.feature-area .left {
  flex: 42;
}
.feature-area .left p {
  padding-top: 2rem;
  max-width: 342px;
  line-height: var(--line-height-lg);
}
.ttl-dots {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 90px;
}
.ttl-dots span {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-grey);
}
.feature-area .txt-en {
  padding-left: 0.25rem;
}
.feature-area .right {
  flex: 58;
  position: relative;
  z-index: 0;
}
.feature-area .right::before {
  content: "";
  position: absolute;
  top: 90px;
  width: 80%;
  height: 100%;
  background-color: var(--color-light-khaki);
  z-index: -1;
}
.feature-area .right img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 8px 10px rgb(0 0 0 / 16%);
}

/* about-area */
.about-area .inner {
  flex-direction: row-reverse;
  padding-top: 120px;
}
.about-area .ttl-dots span:first-child {
  background-color: var(--color-red);
}
.about-area .right::before {
  left: 200px;
  right: auto;
}

/* service-area */
.service-area .ttl-dots span:nth-child(2) {
  background-color: var(--color-red);
}
.service-area .right::before {
  left: auto;
  right: 200px;
}

/* construction-area */
.construction-area .inner {
  flex-direction: row-reverse;
  padding-bottom: 240px;
}
.construction-area .ttl-dots span:last-child {
  background-color: var(--color-red);
}
.construction-area .right::before {
  left: 200px;
  right: auto;
}

/* instagram-area */
.instagram-area .inner {
  padding: 100px 40px 60px;
  border-top: 2px solid var(--color-grey);
}
.instagram-ttl {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: var(--font-lg-plus);
}
.instagram-ttl img {
  display: block;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

/* Instagram feed */
.instagram-list {
  margin-top: 50px;
  background-color: var(--color-grey);
  font-family: var(--font-family-sub);
  color: var(--color-white);
  font-size: clamp(1.125rem, 1.03rem + 0.48vw, 1.625rem);
  height: 300px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.instagram-link {
  display: flex;
  justify-content: center;
  padding-top: 40px;
}
.instagram-link a {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--color-main-text);
  font-size: var(--font-md);
}
.circle-arrow {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-main-text);
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.circle-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 12px;
  height: 1px;
  background-color: var(--color-main-text);
  transform: translateY(-50%);
}
.circle-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 13px;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--color-main-text);
  border-right: 1px solid var(--color-main-text);
  transform: translateY(-50%) rotate(45deg);
}

@media (hover: hover) {
  .instagram-link a:hover {
    color: var(--color-green);
  }
  .instagram-link a:hover .circle-arrow {
    border-color: var(--color-green);
    transform: translateX(6px);
  }
  .instagram-link a:hover .circle-arrow::before {
    background-color: var(--color-green);
  }
  .instagram-link a:hover .circle-arrow::after {
    border-color: var(--color-green);
  }
}

/* others-area */
.others-area .inner {
  padding: 60px 40px 120px;
  text-align: center;
}
.others-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 30px;
  padding-top: 60px;
}
.others-list li a {
  display: block;
}
.others-list .img {
  overflow: hidden;
  border-radius: 1rem;
}
.others-list .img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}
.others-list .txt-en {
  display: block;
  padding-top: 1.25rem;
  font-size: var(--font-md-plus);
}
.others-ttl {
  padding-top: 0.5rem;
  color: var(--color-green);
  font-size: var(--font-lg);
  opacity: .3;/*後で消す*/
}

@media (hover: hover) {
  .others-list li a:hover .img img {
    transform: scale(1.05);
  }
  .others-list li a:hover .others-ttl {
    color: var(--color-main-text);
  }
}

@media screen and (max-width: 1430px) {
/* concept-area */
  .concept-ttl {
    font-size: var(--font-xl-sm);
    padding-top: 0.625rem;
    padding-bottom: 1.25rem;
  }
  .concept-sub-ttl {
    font-size: var(--font-lg-md);
    padding-bottom: 0.375rem;
  }
  .concept-txt {
    line-height: inherit;
  }
}

@media screen and (max-width: 1200px) {
/* concept-area */
  .concept-area .left {
    flex: 46;
  }
  .concept-area .right {
    flex: 54;
  }

/* 共通 */
/* feature-area */
  .feature-area .inner {
    gap: 60px;
  }
}

@media screen and (max-width: 1000px) {
/* mainArea */
  .main-area {
    margin-top: 70px;
    min-height: calc(100svh - 70px);
  }
  .main-area .main-inner {
    padding: 0 6vw;
  }
  .main-copy h2 {
    font-size: clamp(2.125rem, 1.478rem + 3.24vw, 3.5rem);
  }
  .main-copy p {
    font-size: clamp(0.875rem, 0.816rem + 0.29vw, 1rem);
    padding-top: 1.25rem;
    line-height: var(--line-height-lg);
  }

/* 共通 */
/* h2 */
  .txt-ja {
    font-size: clamp(1.875rem, 1.581rem + 1.47vw, 2.5rem);
    padding-top: 1rem;
  }
  .txt-en {
    font-size: clamp(1.188rem, 1.04rem + 0.74vw, 1.5rem);
  }

/* concept-area */
  .concept-area .inner {
    padding: 60px 6vw;
    flex-direction: column;
    gap: 50px;
  }
  .concept-area .left,
  .concept-area .right {
    flex: none;
    width: 100%;
  }
  .concept-lead {
    font-size: clamp(1rem, 0.824rem + 0.88vw, 1.375rem);
  }
  .concept-ttl {
    font-size: clamp(1.5rem, 1.147rem + 1.76vw, 2.25rem);
  }
  .concept-sub-ttl {
    font-size: clamp(1.25rem, 1.074rem + 0.88vw, 1.625rem);
  }

/* top-txt-area */
  .top-txt-area {
    background-attachment: scroll;
  }
  .top-txt-area .inner {
    padding: 60px 6vw;
  }

/* 共通 */
/* feature-area */
  .feature-area .inner {
    gap: 30px;
    padding: 80px 6vw;
  }
  .feature-area .left {
    flex: 38;
  }
  .ttl-dots {
    padding-bottom: 50px;
  }
  .feature-area .txt-en {
    padding-left: 0.125rem;
  }
  .feature-area .right {
    flex: 62;
  }
  .feature-area .right::before {
    height: 90%;
  }

/* construction-area */
  .construction-area .inner {
    padding-bottom: 160px;
  }

/* instagram-area */
  .instagram-area .inner {
    padding: 80px 6vw 40px;
  }
  .instagram-ttl {
    font-size: clamp(1rem, 0.706rem + 1.47vw, 1.625rem);
  }

/* others-area */
  .others-area .inner {
    padding: 40px 6vw 80px;
  }
  .others-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
    padding-top: 50px;
  }
  .others-ttl {
    font-size: clamp(1.25rem, 1.074rem + 0.88vw, 1.625rem);
    padding-top: 0.0;
  }
  .others-list .txt-en {
    font-size: clamp(1.125rem, 1.066rem + 0.29vw, 1.25rem);
  }
}

@media screen and (max-width: 767px) {
/* 共通 */
/* feature-area */
  .feature-area .inner {
    gap: 60px;
  }
  .feature-area .left {
    flex: none;
    width: 100%;
  }
  .ttl-dots {
    padding-bottom: 30px;
  }
  .feature-area .left p {
    padding-top: 1.25rem;
    max-width: 100%;
    line-height: inherit;
  }
  .feature-area .right {
    flex: none;
    width: 100%;
  }

/* about-area */
  .about-area .inner {
    flex-direction: column;
    padding-bottom: 40px;
  }

/* service-area */
  .service-area .inner {
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 40px;
  }

/* construction-area */
  .construction-area .inner {
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 80px;
  }
}

@media screen and (max-width: 600px) {
/* 共通 */
/* feature-area */
  .ttl-dots {
    gap: 8px;
    padding-bottom: 40px;
  }
  .ttl-dots span {
    width: 8px;
    height: 8px;
  }
  .feature-area .right img {
    border-radius: 0.5rem;
  }
  .feature-area .right::before {
    top: 60px;
  }

/* about-area */
  .about-area .right::before {
    left: 142px;
  }

/* service-area */
  .service-area .right::before {
    right: 142px;
  }

/* construction-area */
  .construction-area .right::before {
    left: 142px;
  }

/* instagram-area */
  .instagram-ttl {
    gap: 16px;
    flex-direction: column;
  }
  .instagram-list {
    margin-top: 40px;
    height: 200px;
  }
  .instagram-link {
    padding-top: 30px;
  }

/* others-area */
  .others-list {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .others-list .img {
    border-radius: 0.5rem;
  }
}