@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Sawarabi+Mincho&display=swap");
a:link,
a:visited,
a:hover,
a:active,
a {
  text-decoration: none !important;
  color: inherit;
}

h1,
.h1-like {
  font-family: Futura, "Futura", sans-serif;
  font-size: clamp(24px, 5vw, 50px);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h2,
.h2-like {
  font-family: Futura, "Futura", sans-serif;
  font-size: 50px;
  font-weight: 500;
}

h3,
.h3-like {
  font-family: Futura, "Futura", sans-serif;
  font-size: clamp(25px, 3.5vw, 35px);
  font-weight: 700;
}

h4,
.h4-like {
  font-size: clamp(20px, 2.5vw, 25px);
  font-weight: 700;
}

p,
.p-like {
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 250%;
}

.p-small,
.p-16 {
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 400;
  letter-spacing: 0.1rem;
  line-height: 180%;
}

ul li, ol li {
  font-size: clamp(16px, 1.8vw, 18px);
}

.p-64 {
  font-size: clamp(32px, 6vw, 64px);
}

.p-60 {
  font-size: clamp(50px, 6vw, 60px);
}

.p-50 {
  font-size: clamp(20px, 2.8vw, 50px);
}

.p-45 {
  font-size: clamp(20px, 4vw, 45px);
}

.p-35 {
  font-size: clamp(18px, 3vw, 35px);
}

.p-24 {
  font-size: clamp(16px, 2vw, 24px);
}

.p-20 {
  font-size: clamp(16px, 2vw, 20px);
}

.h2-group {
  width: fit-content;
  padding: clamp(80px, 10vw, 100px) clamp(60px, 10vw, 120px) 40px 0;
  background: url(../img/top/dot-orange.png) right center no-repeat;
  background-size: contain;
}
.h2-group h2 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.h2-group.left-point {
  background-position: left center;
  padding: clamp(80px, 10vw, 140px) 0 60px clamp(80px, 12vw, 140px);
}

.vm-btn {
  font-family: "Sawarabi Mincho", serif;
  display: flex;
  position: relative;
  align-items: center;
  padding: 1em 0 1em 1em;
  width: fit-content;
}
.vm-btn p {
  z-index: 1;
}
.vm-btn:after {
  content: url(../img/common/vm-arrow.svg);
  width: 2em;
  margin: 0 auto 0.5em 1em;
}
.vm-btn:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  z-index: 0;
  height: 2.2em;
  width: 2.2em;
  border-radius: 50%;
}
.vm-btn.vm-orange:before {
  background-color: #FFD598;
}
.vm-btn.vm-green:before {
  background-color: #D7EBD3;
}

.top-main {
  background-color: #FDFBF8;
}

.landing {
  box-sizing: border-box;
  padding: clamp(180px, 24vh, 240px) 0 0 6.4vw;
  background-color: #F3FCEC;
  background-image: url(../img/top/bg-orange-1.png);
  background-position: right top 100px;
  background-repeat: no-repeat;
  background-size: 100%;
}
.landing .landing-catch {
  display: none;
}
.landing .text-container {
  width: 87vw;
  margin-bottom: 1em;
}
.landing .text-container h2 {
  font-size: clamp(35px, 4.5vw, 60px);
  font-weight: 400;
  margin-bottom: 0.2em;
}
.landing .img-container {
  display: block;
  width: 100%;
  height: clamp(366px, 50vw, 670px);
  background: url(../img/top/landing-img-mobile.jpg) right top no-repeat;
  background-size: cover;
  border-top-left-radius: 50px;
}
.landing .news-container {
  box-sizing: border-box;
  padding: 24px 26px;
  width: 100vw;
  margin: -75px 0 0 -6.4vw;
  background-color: #ffffff;
}
.landing .news-container .news-title {
  font-size: 18px;
  margin-bottom: 0.5em;
}
.landing .news-container .post-row {
  box-sizing: border-box;
  width: 100%;
}
.landing .news-container .post-row .blog-date {
  margin-right: 2em;
}
@media screen and (min-width: 801px) {
  .landing {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 40px 2fr 1fr 1fr;
    grid-template-rows: clamp(80px, 10vw, 160px) 1fr 2fr 120px;
    padding: clamp(180px, 24vh, 240px) 0 0 5vw;
    background-image: url(../img/top/bg-green-1.png), url(../img/top/bg-orange-2.png);
    background-position: left 3.5vw top 5vh, left 15vw bottom 60px;
    background-repeat: no-repeat;
    background-size: clamp(320px, 50vw, 800px), clamp(300px, 45vw, 800px);
  }
  .landing .landing-catch {
    display: block;
    grid-column: 2/5;
    grid-row: 1/3;
    color: #575757;
    font-size: clamp(20px, 5vw, 70px);
    font-family: Futura, "Futura", sans-serif;
    font-weight: 500;
    font-style: italic;
    line-height: 150%;
    z-index: 10;
  }
  .landing .text-container {
    grid-column: 2/3;
    grid-row: 3/4;
    width: 100%;
    max-width: 560px;
    padding-right: 2%;
    box-sizing: border-box;
  }
  .landing .text-container p {
    box-sizing: border-box;
    width: 100%;
    padding-right: 4em;
  }
  .landing .img-container {
    grid-column: 3/5;
    grid-row: 2/5;
    height: 100%;
    background: url(../img/top/landing-img.jpg) top center no-repeat;
    z-index: 1;
  }
  .landing .news-container {
    grid-column: 1/5;
    grid-row: 4/5;
    width: 100%;
    max-width: 1000px;
    z-index: 10;
    margin: 0;
    padding: 24px 5%;
  }
  .landing .news-container p {
    line-height: 180%;
  }
  .landing .news-container .news-title {
    margin-bottom: auto;
  }
}
@media screen and (min-width: 1200px) {
  .landing {
    grid-template-columns: clamp(60px, 8vw, 100px) clamp(320px, 33vw, 560px) 1fr 1fr;
    padding: clamp(180px, 24vh, 240px) 0 0 clamp(50px, 14vw, 260px);
  }
}

section.about {
  position: relative;
  align-items: center;
  margin: 20px auto 60px auto;
}
section.about .h2-group {
  max-width: 92%;
}
section.about .img-container {
  width: 100%;
  max-width: 400px;
}
section.about .img-container img {
  width: 100%;
}
section.about .text-container {
  width: 85.5%;
}
section.about .text-container h4 {
  margin: 2em 0 0.5em 0;
}
section.about .text-container .vm-btn {
  margin: 2em 0 0 auto;
}
section.about .green-bg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background-color: #F3FCEC;
  z-index: -1;
}
@media screen and (min-width: 801px) {
  section.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: clamp(80px, 10vw, 120px) clamp(100px, 12vw, 150px) 1fr 80px;
  }
  section.about .img-container {
    grid-column: 1/2;
    grid-row: 2/4;
    width: 95%;
    max-width: 860px;
    height: 100%;
  }
  section.about .img-container img {
    height: 100%;
    object-fit: cover;
  }
  section.about .h2-group {
    grid-column: 2/3;
    grid-row: 1/3;
    max-width: 100%;
  }
  section.about .text-container {
    box-sizing: border-box;
    width: 100%;
    max-width: 500px;
    grid-column: 2/3;
    grid-row: 3/4;
    padding-right: 1em;
  }
  section.about .green-bg {
    grid-column: 1/3;
    grid-row: 3/5;
  }
}

section.service {
  margin: 60px auto clamp(60px, 12vw, 120px) auto;
}
section.service .h2-group {
  margin-left: 10vw;
}
section.service .s-gallery {
  position: relative;
  width: 1560px;
  max-width: 100%;
  margin: auto 0 auto auto;
  padding: clamp(40px, 7.5vw, 75px) 0;
  overflow-x: hidden;
  z-index: 10;
}
section.service .s-gallery:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #FCF5EA;
  width: 83.3%;
  min-height: 100%;
  right: 0;
  top: 0;
  z-index: -1;
}
section.service .s-gallery.business-gallery {
  margin-top: 80px;
}
section.service .s-gallery.business-gallery:after {
  background-color: #F3FCEC;
}
section.service .s-gallery .gallery-card {
  box-sizing: border-box;
  padding: 24px;
  min-width: clamp(360px, 25vw, 400px);
  width: clamp(360px, 25vw, 400px);
  max-width: 100%;
  margin-right: clamp(30px, 4vw, 60px);
  background-color: #ffffff;
  color: #575757;
}
section.service .s-gallery .gallery-card h3 {
  font-weight: 500;
}
section.service .s-gallery .gallery-card .h3-group {
  margin-bottom: 1.5em;
}
section.service .s-gallery .gallery-card h4 {
  color: #2F2F2F;
  line-height: 200%;
  font-weight: 500;
  margin-bottom: 0.5em;
}
section.service .s-gallery .gallery-container {
  width: max-content;
  margin: auto 0;
}
section.service .s-gallery .gallery-container .img-container {
  width: 100%;
}
section.service .s-gallery .gallery-container .img-container img {
  border-radius: 13px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 1200px) {
  section.service .s-gallery {
    flex-direction: column;
  }
  section.service .s-gallery:after {
    width: 100%;
  }
  section.service .s-gallery .gallery-card {
    width: 85.5%;
    margin: 0 auto 32px auto;
  }
}

section.achievement {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto 60px auto;
  background-color: #FCF5EA;
}
section.achievement .h2-group {
  max-width: 92%;
  align-self: flex-start;
}
section.achievement .h2-group h2 {
  font-size: clamp(32px, 8vw, 50px);
}
section.achievement .img-container {
  width: 100%;
  max-width: 400px;
}
section.achievement .img-container img {
  width: 100%;
}
section.achievement .text-container {
  width: 85.5%;
}
section.achievement .text-container ul {
  width: 100%;
  list-style-type: none;
  justify-content: space-between;
  flex-wrap: wrap;
}
section.achievement .text-container ul li {
  width: fit-content;
  margin: 30px 1em 30px 1em;
}
section.achievement .text-container ul li .list-title {
  border-bottom: 3px solid #2F2F2F;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 0.1em;
}
section.achievement .text-container ul li .list-title .list-no {
  margin-right: 0.5em;
  font-weight: 500;
  letter-spacing: 0.06em;
}
section.achievement .text-container ul li .list-content {
  position: relative;
  font-weight: 500;
  line-height: 120%;
  width: fit-content;
  margin-top: 0.8em;
  padding: 0 0.1em;
  letter-spacing: 0.05em;
}
section.achievement .text-container ul li .list-content span.z1,
section.achievement .text-container ul li .list-content span.content-no {
  z-index: 1;
  position: relative;
}
section.achievement .text-container ul li .list-content::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0.5em;
  left: 0;
  bottom: 0;
  background-color: #D7EBD3;
  z-index: 0;
}
section.achievement .text-container ul li .list-content .content-no {
  margin-right: 0.1em;
}
@media screen and (min-width: 801px) {
  section.achievement {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: clamp(80px, 10vw, 120px) clamp(100px, 12vw, 150px) 1fr 80px;
  }
  section.achievement .img-container {
    grid-column: 1/2;
    grid-row: 2/4;
    width: 95%;
    max-width: 860px;
    height: 100%;
  }
  section.achievement .img-container img {
    height: 100%;
    object-fit: cover;
    object-position: left;
  }
  section.achievement .h2-group {
    grid-column: 2/3;
    grid-row: 1/3;
    max-width: 100%;
    transform: translateX(-5vw);
    padding-left: 5vw;
  }
  section.achievement .text-container {
    box-sizing: border-box;
    width: 100%;
    max-width: 660px;
    grid-column: 2/3;
    grid-row: 3/4;
    padding-right: 1em;
  }
}

section.contact {
  padding: 26px 0 clamp(80px, 12vw, 130px) 0;
  align-items: center;
  text-align: center;
}
section.contact h2 {
  margin-bottom: 0.5em;
  letter-spacing: 0.1em;
}
section.contact .subtitle {
  margin-bottom: 2em;
  letter-spacing: 0.1em;
}
section.contact .two-col .contact-card {
  width: 50%;
  align-items: center;
  padding: clamp(60px, 10vw, 100px) 0;
  background-color: #FFD598;
}
section.contact .two-col .contact-card > * {
  letter-spacing: 0.1em;
}
section.contact .two-col .contact-card h4 {
  margin-bottom: 0.5em;
  text-transform: uppercase;
  font-weight: 500;
}
section.contact .two-col .contact-card .h4-sub {
  margin-bottom: 1em;
}
section.contact .two-col .contact-card .link-btn {
  align-items: center;
  background-color: #ffffff;
  border-radius: 35px;
  padding: 1em 2em;
}
section.contact .two-col .contact-card .link-btn img {
  width: 2em;
  margin-right: 1em;
}
section.contact .two-col .contact-card.business-card {
  background-color: #D7EBD3;
}
@media screen and (max-width: 800px) {
  section.contact .two-col {
    flex-direction: column;
    align-items: center;
  }
  section.contact .two-col .contact-card {
    width: 100%;
    max-width: 600px;
  }
}

/*# sourceMappingURL=top.css.map */