@charset "UTF-8";

/* ========================================
  Design tokens (CSS Custom Properties)
======================================== */
:root {

  /* brand-color */
  --color-text: #000;

  /* layout */
  --header-height: 9.6rem;
  --contents-width-sm: min(80%, 102rem);
  --contents-width-md: min(90%, 136rem);
  --contents-width-lg: min(94%, 182rem);

  /* font */
  --font-sans: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-size-xs: 1.2rem;
  --font-size-sm: 1.3rem;
  --font-size-md: 1.6rem;
  --font-size-lg: 1.8rem;
  --font-size-xl: 1.9rem;

  @media screen and (max-width: 1024px) {
    --header-height: 7.4rem;
  }
  @media screen and (max-width: 767px) {
    --header-height: 6rem;
    --contents-width-md: calc((315 / 375) * 100vw);
  }
}


/* ========================================
  HTML/BODY Settings
======================================== */
html {
  scroll-behavior: smooth;
  font-size: min(62.5%, calc((10 / 1360) * 100vw));

  @media screen and (max-width: 1024px) {
    font-size: 8px;
  }
  @media screen and (max-width: 767px) {
  }
}
body {
  line-height: 2;
  font-family: var(--font-sans);
  font-size: 1.8rem;
  color: var(--color-text);
}


/* ========================================
Elements (global default styles)
======================================== */
ul,
ol {
  list-style-type: none;
}
table {
  border-collapse: collapse;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
a {
  text-decoration: none;
  color: inherit;
}
em, i {
  font-style: normal;
}
[id] {
  scroll-margin-top: var(--header-height);
}

/* Usability
---------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media screen and (min-width: 681px) {
  .u-only-sp { display: none !important; }
}
@media screen and (max-width: 767px) {
  .u-only-pc { display: none !important; }
}


/* ========================================
  Common
======================================== */
/* Components
---------------------------------------- */
.l-container {
  margin-right: auto;
  margin-left: auto;

  &.sz-lg { width: var(--contents-width-lg); }
  &.sz-md { width: var(--contents-width-md); }
  &.sz-sm { width: var(--contents-width-sm); }
}
.c-copy {
  margin-bottom: 2rem;
  line-height: 1.6;
  font-family: serif;
  font-size: 3.2rem;
  font-weight: 500;
  letter-spacing: .05em;

  &:not(:first-child) {
    margin-top: 4rem;
  }
}
.c-text {
  line-height: 1.8;
  text-align: justify;
}
.c-buttons {
  margin-top: 4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;

  @media screen and (max-width: 767px) {
    flex-direction: column;
  }
  &.center {
    justify-content: center;
  }
}
.c-button {
  min-width: 28rem;
  height: 5.6rem;
  border-radius: 2.8rem;
  background-color: #959595;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  transition: background-color .3s ease;

  @media (hover: hover) {
    &:hover {
      background-color: #76849f;
    }
  }
  @media screen and (max-width: 767px) {
    min-width: initial;
    width: 100%;
  }
}
.c-image {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* ========================================
  Layout
======================================== */
/* Header
---------------------------------------- */
.header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, .9);
  backdrop-filter: blur(2rem);
  display: flex;
  align-items: center;
}
.header-logo {
  width: 25rem;
  margin-left: calc((43 / 1920) * 100%);
  line-height: 0;
  font-size: 0;

  a {
    display: block;
  }
}
.header-btn {
  display: none;

  @media screen and (max-width: 1024px) {
    position: relative;
    width: var(--header-height);
    margin-left: auto;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    span {
      position: relative;
      width: 3.4rem;
      height: 1px;
      background-color: var(--color-text);

      &::before, &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: var(--color-text);
        transition: transform .3s ease;
      }
      &::before {
        top: -1rem;
      }
      &::after {
        bottom: -1rem;
      }
    }
  }
  @media screen and (max-width: 767px) {
    span {
      width: 3rem;

      &::before {
        top: -.8rem;
      }
      &::after {
        bottom: -.8rem;
      }
    }
  }
  &.is-open {
    span {
      background: transparent;

      &::before {
        top: 0;
        transform: rotate(45deg);
      }
      &::after {
        top: 0;
        transform: rotate(-45deg);
      }
    }
  }
}
.header-nav {
  margin-left: auto;

  @media screen and (max-width: 1024px) {
    position: fixed;
    top: var(--header-height);
    right: -100vw;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    background-color: #FFF;
    transition: right .5s ease;

    &.is-open {
      right: 0;
    }
  }
  @media screen and (max-width: 767px) {
    width: 100vw;
  }
}
.header-nav__list {
  display: flex;

  @media screen and (max-width: 1024px) {
    flex-direction: column;
    border-top: solid 1px #CACACA;
  }
  > li {
    position: relative;

    > a {
      position: relative;
      width: 20rem;
      height: var(--header-height);
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      transition: background-color .3s ease;

      @media screen and (max-width: 1024px) {
        justify-content: flex-start;
        width: auto;
        height: auto;
        padding: .5rem 2rem;
        border-bottom: solid 1px #CACACA;
        text-align: left;
      }
      &::before {
        content: "";
        position: absolute;
        top: 2rem;
        left: 0;
        width: 0;
        height: calc(100% - 4rem);
        border-left: solid 1px var(--color-text);

        @media screen and (max-width: 1024px) {
          content: none;
        }
      }
      @media (hover: hover) {
        &:hover {
          background-color: #E5E5E5;
        }
      }
      &.contact {
        &::before {
          order: 1;
        }
        &::after {
          order: 2;
          content: "";
          width: 2rem;
          aspect-ratio: 1;
          margin-right: .6rem;
          background: url(../images/contact-icon.svg) center center / contain no-repeat;

          @media screen and (max-width: 1024px) {
            width: 2.4rem;
          }
        }
        span {
          order: 3;
        }
      }
    }
  }
}
.header-subnav {
  position: absolute;
  left: 0;
  background-color: #E5E5E5;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;

  @media screen and (max-width: 1024px) {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
  li {
    a {
      display: block;
      padding: .5rem 2rem;
      border-bottom: solid 1px #CACACA;
      white-space: nowrap;
      transition: background-color .2s ease;

      @media (hover: hover) {
        &:hover {
          background-color: #FFF;
        }
      }
    }
  }
}
@media (hover: hover) and (pointer: fine) {
  .has-subnav:hover .header-subnav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .3s ease, visibility 0s;
  }
  .subnav-toggle {
    display: none;
  }
}
@media (hover: none) {
  .has-subnav.is-open .header-subnav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .3s ease, visibility 0s;
  }
  .subnav-toggle {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
  }
}
@media screen and (max-width: 1024px) {
  .subnav-toggle {
    display: none;
  }
}

/* Keyvisual
---------------------------------------- */
.keyvisual {
  figure {

    img {
      width: 100%;
    }
  }
  @media screen and (max-width: 1024px) {
    padding-top: var(--header-height);
  }
  @media screen and (max-width: 767px) {
    figure {
      aspect-ratio: 375 / 210;

      img {
        object-fit: cover;
      }
    }
  }
}

/* movie
---------------------------------------- */
.movie {
  padding: min(10rem, 8vw) 0 min(10rem, 10vw);
  background-color: #000;
}
.movie-inner {
  width: min(90%, 126rem);
  margin: 0 auto;
  text-align: center;
  color: #FFF;
}
.movie-copy {
  margin-bottom: min(5rem, 7vw);
  font-size: 3rem;

  @media screen and (max-width: 767px) {
    line-height: 1.6;
  }
}
.movie-youtube {
  width: 100%;
  aspect-ratio: 16 / 9;

  iframe {
    width: 100%;
    height: 100%;
  }
}

/* sec01
---------------------------------------- */
.sec01 {
  background-color: #143362;
  color: #FFF;
}
.sec01-block01 {
  position: relative;
  padding-top: min(calc((616 / 1920) * 100vw), 61.6rem);
  background: url(../images/sec01-img01.png) center top / min(100%, 192rem) auto no-repeat #143362;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    background-color: #143362;

    @media screen and (max-width: 1024px) {
      height: 1rem;
    }
  }
}
.sec01-block01__inner {
  margin: auto 0 5rem;

  .title {
    padding-left: .1em;
    font-size: 5rem;
    letter-spacing: .1em;

    @media screen and (max-width: 767px) {
      font-size: 3rem;
    }
  }
  .copy {
    line-height: calc(63 / 34);
    font-size: 3.4rem;

    @media screen and (max-width: 767px) {
      margin-top: 2rem;
      line-height: calc(22 / 17);
      font-size: 2rem;
    }
  }
}
.sec01-block02 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
  }
  > div {
    img {
      width: 100%;
    }
  }
}
.sec01-block03 {
  margin-top: min(8rem, 8vw);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 6rem;

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 5rem 0;
  }
}
.sec01-block04 {
  padding: min(8rem, 8vw) 0 min(10rem, 10vw);

  .title {
    text-align: center;

    @media screen and (max-width: 767px) {
      text-align: left;
    }
  }
}
.sec01-block04__card {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;

  @media screen and (max-width: 767px) {
    gap: 2rem;
  }
  li {
    width: calc((100% - 3rem) / 3);
    padding: 3rem;
    border-radius: 1rem;
    background-color: #FFF;
    line-height: calc(31 / 18);
    color: #666;

    @media screen and (max-width: 767px) {
      width: 100%;
      padding: 5% 7%;
    }
    > *:first-child {
    margin-bottom: 1rem;
    line-height: calc(35 / 20);
    font-size: 2rem;
    }
  }
}
/* .sec01-block04__image {
  margin: 5rem 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
  }
  figure {
    aspect-ratio: 4 / 3;
  }
} */

/* Section Common
---------------------------------------- */
.sec {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom left, #E3E3E3, #FBFBFB);
  color: #787878;

  @media screen and (max-width: 767px) {
    .c-buttons {
      position: relative;
      z-index: 1;
      width: var(--contents-width-md);
      margin-left: -14vw;

      .reverse & {
        margin-right: -14vw;
        margin-left: 0;
      }
    }
  }
}
.sec-sidebar {
  --sidebar-width: max(calc((100vw - var(--contents-width-md)) / 2), 10vw);
  position: absolute;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100%;

  @media screen and (max-width: 767px) {
    --sidebar-width: calc((60 / 375) * 100vw);
    width: calc((60 / 375) * 100vw);
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: min(50%, 7.7rem);
    height: 100%;
    background-position: left top;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .reverse & {
    right: 0;
    left: auto;
  }
  &.residence::before { background-image: url(../images/sec-sidetxt-residence.svg); }
  &.house::before { background-image: url(../images/sec-sidetxt-house.svg); }
  &.store::before { background-image: url(../images/sec-sidetxt-store.svg); }
  &.architecture::before { background-image: url(../images/sec-sidetxt-architecture.svg); }
}
.sec-bg {
  padding: min(7.5rem, 8vw) 0 min(10rem, 10vw);
  background: url(../images/sec-bg-right.png) right top / calc((1246 / 1640) * 100%) auto no-repeat;

  @media screen and (max-width: 767px) {
    background-size: 100% auto;
  }
  .reverse & {
    background: url(../images/sec-bg-left.png) left top / calc((1246 / 1640) * 100%) auto no-repeat;
  }
}
.sec-inner {
  padding-left: calc((170 / 1360) * 100%);

  @media screen and (max-width: 767px) {
    padding-left: 14vw;
  }
  .reverse & {
    padding-left: 0;
    padding-right: calc((170 / 1360) * 100%);

    @media screen and (max-width: 767px) {
      padding-right: 14vw;
    }
  }
}
.sec-type01 {
  .sec-sidebar {
    background: linear-gradient(45deg, #E8E2D8, #C3B298);
  }
  .sec-header {
    &::before {
      background-image: url(../images/sec-title-pink.png);
    }
  }
}
.sec-type02 {
  .sec-sidebar {
    background: linear-gradient(45deg, #C2C2C5, #9A9A9E);
  }
  .sec-header {
    &::before {
      background-image: url(../images/sec-title-blue.png);
    }
  }
}
.sec-header {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: -1.92rem;
    left: -6.5rem;
    width: 13rem;
    aspect-ratio: 1;
    background-position: left top;
    background-size: contain;
    background-repeat: no-repeat;

    @media screen and (max-width: 767px) {
      top: -1rem;
      left: -2rem;
      width: 7rem;
    }
  }
  > * {
    position: relative;
  }
}
.sec-title {
  margin-bottom: 2rem;
  line-height: calc(63 / 40);
  font-size: min(3.8rem, 2.8vw);

  @media screen and (max-width: 767px) {
    margin-bottom: 1.5rem;
    font-size: 2.8rem;
  }
}
.sec-subttl {
  margin-bottom: 2rem;
  line-height: calc(56 / 32);
  font-family: var(--font-serif);
  font-size: min(3rem, 2.3vw);
  font-weight: 500;

  @media screen and (max-width: 767px) {
    line-height: calc(36 / 24);
    font-size: 2.6rem;
  }
}

/* sec01
---------------------------------------- */
@media screen and (max-width: 767px) {
  .sec01-img04 {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}
.sec01-block04 {
  .image {
    margin-top: 4rem;
    text-align: center;
  }
}

/* sec02
---------------------------------------- */
.sec02 .gda2025 {
  position: absolute;
  top: 0;
  right: 0;
  width: calc((304 / 1190) * 100%);

  @media screen and (max-width: 767px) {
    position: static;
    width: min(40vw, 304px);
    margin: 2rem 0 0 auto;
  }
}
.sec02 .image {
  margin-top: 4rem;

  @media screen and (max-width: 767px) {
    position: relative;
    z-index: 1;
    width: 90vw;
    margin-top: 1rem;
    margin-left: -18vw;
  }
}

/* sec03
---------------------------------------- */
.sec03-block {
  display: grid;
  grid-template-columns: 48fr 65fr;
  gap: 0 6rem;

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 3rem 0;
  }
}

/* sec04
---------------------------------------- */
.sec04 {
  .image {
    margin-top: 4rem;

    @media screen and (max-width: 767px) {}
  }
}

/* sec05
---------------------------------------- */
.sec05-block {
  display: grid;
  grid-template-columns: 65fr 48fr;
  align-items: flex-end;
  gap: 0 6rem;

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 1rem 0;
  }
}
.sec05 {
  .image01 {
    margin-top: 6rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;

    @media screen and (max-width: 767px) {
      margin-top: 3rem;
    }
  }
}

/* sec06
---------------------------------------- */
.sec06 {
  .image {
    margin-top: 4rem;
    text-align: center;

    @media screen and (max-width: 767px) {}
  }
}

/* sec07
---------------------------------------- */
.sec07 {
  .image {
    margin-top: 10rem;
    display: grid;
    grid-template-columns: 385fr 294fr 494fr;
    justify-content: space-between;
    gap: .85rem;

    @media screen and (max-width: 767px) {
      margin-top: 3rem;
      grid-template-columns: 294fr 494fr;
      grid-template-rows: auto auto;
      grid-template-areas: "a a" "b c";

      div {
        &:first-child {
          grid-area: a;
        }
        &:nth-child(2) {
          grid-area: b;
        }
        &:last-child {
          grid-area: c;
        }
      }
    }
  }
}

/* sec08
---------------------------------------- */
.sec08-block {
  display: grid;
  grid-template-columns: 48fr 65fr;
  gap: 0 6rem;

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 3rem 0;
  }
}

/* sec09
---------------------------------------- */
.sec09-block {
  display: grid;
  grid-template-columns: 48fr 65fr;
  gap: 0 6rem;

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 3rem 0;
  }
}

/* sec10
---------------------------------------- */
.sec10-block {
  display: grid;
  grid-template-columns: 65fr 48fr;
  gap: 0 6rem;

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 3rem 0;
  }
}
.sec10-text {
  min-width: 0;

  .sec-title {
    white-space: nowrap;

    @media screen and (max-width: 767px) {
      white-space: wrap;
    }
  }
}
.sec10-image .image {
  margin-top: 10rem;

  @media screen and (max-width: 767px) {
    margin-top: 0;
  }
}

/* sec11
---------------------------------------- */
.sec11-block {
  display: grid;
  grid-template-columns: 65fr 48fr;
  gap: 0 6rem;

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 3rem 0;
  }
}
.sec11 {
  .image02 {
    margin-top: 3.3rem;
  }
}

/* sec12
---------------------------------------- */
.sec12 {
  .image {
    margin-top: 4rem;
    text-align: center;

    @media screen and (max-width: 767px) {}
  }
}

/* sec13
---------------------------------------- */
.sec13 {
  .image {
    margin-top: 4rem;

    @media screen and (max-width: 767px) {}
  }
}

/* sec14
---------------------------------------- */
.sec14-image {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 1rem;

  @media screen and (max-width: 767px) {
    margin-top: 3rem;
    grid-template-columns: 1fr;
    gap: 2rem 0;
  }
  figcaption {
    margin-top: 1.2rem;
    text-align: center;
    font-size: 1.5rem;
  }
}

/* sec-aboutus
---------------------------------------- */
.sec-aboutus__title {
  width: calc((131 / 320) * 100%);
  margin-right: auto;
}
.sec-aboutus {
  padding: 10rem 0 20rem;
  background-color: #143362;
  color: #FFF;

  @media screen and (max-width: 767px) {
    padding: min(5rem, 5vw) 0 min(10rem, 8vw);
  }
}
.sec-aboutus__copy {
  width: min(calc((236 / 320) * 100%), 45rem);
  margin: 6.6rem auto 1rem;
}
.sec-aboutus__text {
  text-align: justify;
}

/* Footer
---------------------------------------- */
.copyright {
  padding: 3.5rem 0;
  background-color: #00377A;
  text-align: center;
  color: #FFF;

  @media screen and (max-width: 767px) {
    padding: 2rem 1rem calc(2rem + var(--header-height));
    
    small {
      font-size: 1.3rem;
    }
  }
}
.pagetop {
  position: fixed;
  z-index: 10;
  bottom: 0;
  right: 0;
  width: min(calc((100 / 1920) * 100%), 10rem);

  @media screen and (max-width: 767px) {
    width: max(10vw, var(--header-height));
  }
}