@charset "utf-8";
/*--------------------------------------------------------------------------------

  main visual

--------------------------------------------------------------------------------*/
.mv {
  position: relative;
  padding-top: var(--space-l);
}
.mv_inner {
  display: grid;
}
@media not (max-width: 760px) {
  .mv_inner {
    grid-template-columns:
      var(--side-space) 
      repeat(4, min(calc(140 / var(--base-width) * 100vw), 140px)) 
      var(--space-m) 
      repeat(4, minmax(max(calc(140px + 10vw), 140px), 1fr));
      grid-template-rows: repeat(2, auto);
  }
  .mv-catch { grid-area: 1 / 2 / 2 / 6; align-self: end; }
  .mv-img.s1 { grid-area: 2 / 2 / 3 / 4; padding-right: var(--space-2s); }
  .mv-img.s2 { grid-area: 2 / 4 / 3 / 6; padding-right: var(--space-2s); }
  .mv-img.b1 { grid-area: 1 / 7 / 3 / 9; padding-left: var(--space-2s); padding-bottom: var(--space-2l); }
  .mv-img.b2 { grid-area: 1 / 9 / 3 / 11; padding-left: var(--space-2s); padding-bottom: var(--space-2l); }
}
@media (max-width: 760px) {
  .mv_inner {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(5, auto);
    column-gap: var(--space-2s);
  }
  .mv-catch { grid-area: 1 / 1 / 2 / 9; }
  .mv-img.s1 { grid-area: 3 / 3 / 5 / 5; }
  .mv-img.s2 { grid-area: 3 / 5 / 5 / 7; }
  .mv-img.b1 { grid-area: 2 / 1 / 6 / 3; }
  .mv-img.b2 { grid-area: 2 / 7 / 6 / 9; }
}

/* background
----------------------------------------*/
.mv:before {
  content: "";
  width: 100%;
  height: calc(100% + var(--hd-height));
  position: absolute;
  left: 0;
  top: calc(-1 * var(--hd-height));
  background: url("../img/bg.png") no-repeat center top;
  background-size: cover;
  z-index: -100;
}
.mv:after {
  content: "";
  width: 100%;
  height: calc(50% + var(--hd-height) + 1px);
  position: absolute;
  left: 0;
  top: calc(50% - var(--hd-height));
  background: linear-gradient(180deg,rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 100%);
  background-size: cover;
  z-index: -10;
}
body:not(:has(.sec-news)) .mv:before {
  height: calc(50% + var(--hd-height));
}
body:not(:has(.sec-news)) .mv:after {
  height: calc(25% + var(--hd-height) + 1px);
  top: calc(25% - var(--hd-height));
}

/*--------------------------------------------------------------------------------
  .mv-catch
--------------------------------------------------------------------------------*/
.mv-catch {
  container-type: inline-size;
  padding-bottom: var(--space-l);
}
.mv-catch_main {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  font-family: var(--ff-go);
  font-weight: 700;
  font-size: min(14.5cqw, calc(var(--fs-2l) * 2.2));
  line-height: var(--line-height-s);
  padding-bottom: var(--inner-space-s);
}
.mv-catch_main small { font-size: 65%; }
.mv-catch_main .txt1 { color: var(--color-primary); }
.mv-catch_main .txt2 { color: var(--color-tertiary); }
.mv-catch_sub {
  font-family: var(--ff-go);
  font-weight: 500;
  font-size: clamp(1.1rem, 4.5cqw, var(--fs-m));
}
@media (max-width: 760px) {
  .mv-catch {
    text-align: center;
    padding-left: calc(var(--side-space) * 2);
    padding-right: calc(var(--side-space) * 2);
  }
}

/*--------------------------------------------------------------------------------
  .mv-img
--------------------------------------------------------------------------------*/
.mv-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.8rem;
}
.mv-img.b2 img { border-top-right-radius: 0; border-bottom-right-radius: 0; }
@media not (max-width: 760px) {
  .mv-img.s1,
  .mv-img.s2 { align-self: end; }
  .mv-img.s1 img,
  .mv-img.s2 img { aspect-ratio: 1 / 1; }
  .mv-img.b1 { align-self: start; height: min(calc(600 / var(--base-width) * 100vw), 600px); }
}
@media (max-width: 760px) {
  .mv-img.s1,
  .mv-img.s2 { align-self: center; }
  .mv-img.s1 img,
  .mv-img.s2 img { aspect-ratio: 1 / 1; }
  .mv-img.b1 img,
  .mv-img.b2 img { aspect-ratio: 1 / 1.75; }
  .mv-img.b1 img { border-top-left-radius: 0; border-bottom-left-radius: 0; }
}

/*--------------------------------------------------------------------------------
  .mv-character
--------------------------------------------------------------------------------*/
.mv-character {
  position: relative;
  z-index: 2;
  container-type: inline-size;
  width: min(calc(420 / 1000 * 100vw), 420px);
  margin-left: auto;
  margin-right: calc(var(--side-space) / 2);
  display: flex;
  align-items: end;
}
@media not (max-width: 760px) {
  .mv-character {
    transform: translateY(-85%);
  }
  .mv-character_txt {
    transform: translate(-5cqw, -2cqh);
  }
}
@media (max-width: 760px) {
  .mv-character {
    width: min(calc(360 / 600 * 100vw), 360px);
    transform: translateY(-15%);
  }
  .mv-character_txt {
    transform: translate(-5cqw, max(-2cqh, -5%));
  }
}
.mv-character_txt {
  font-family: var(--ff-go);
  font-weight: 600;
  border: min(1.25cqw, 4px) solid #FFF;
  font-size: max(3cqw, 0.65em);
  line-height: 1.4;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  padding: 1.5em;
  background-color: var(--color-quaternary);
  display: grid;
  place-content: center;
  place-items: center;
  text-align: center;
  white-space: nowrap;
}
.mv-character_txt .kana {
  letter-spacing: -2px;
}
.mv-character_img {
  position: relative;
  z-index: 2;
  animation: mv-character 3s infinite ease-in-out;
}
@keyframes mv-character {
  0% { transform: translateY(0); }
  50% { transform: translateY(-15%); }
  100% { transform: translateY(0); }
}

/*--------------------------------------------------------------------------------
  .mv-logo
--------------------------------------------------------------------------------*/
.mv-logo {
  width: 100%;
  overflow: hidden;
  z-index: -1;
  margin-top: max(calc(-1 * (80 / 760 * 100vw)), -60px);
}
@media not (max-width: 760px) {
  .mv-logo_list { width: min(400vw, 4800px); }
}
@media (max-width: 760px) {
  .mv-logo_list { width: 600vw; }
}
.mv-logo_list {
  line-height: 1;
  list-style: none;
  pointer-events: none;
  display: flex;
  overflow: hidden;
}
.mv-logo_list li {
  width: 50%;
  animation: mv-logo 60s infinite linear 0s both;
  will-change: transform;
}
.mv-logo_list img { object-fit: cover; }
@keyframes mv-logo {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/*--------------------------------------------------------------------------------

  news

--------------------------------------------------------------------------------*/
.sec-news {
  --ttl-mgb: var(--space-s);
  padding-top: var(--space-3l);
}
.news_more {
  width: fit-content;
  margin-left: auto;
  margin-top: var(--space-l);
}
@media not (max-width: 1000px) {
  .news {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 
      "news-hd news-content";
    column-gap: var(--space-3l);
  }
  .news_hd { grid-area: news-hd; margin-top: -0.75rem; }
  .news_content { grid-area: news-content; }
}
@media not (max-width: 760px) {
  .sec-news:not(:has(.news_more)) {
    padding-bottom: var(--space-s);
  }
}
@media (max-width: 760px) {
  .sec-news {
    padding-bottom: var(--space-s);
  }
}

/*--------------------------------------------------------------------------------

  about us

--------------------------------------------------------------------------------*/
.sec-about {
  position: relative;
  padding-top: var(--space-2l);
}
.sec-about:before {
  content: "";
  width: 100%;
  height: min(calc(600 / 760 * 100vw), 600px);
  position: absolute;
  top: max(calc(-1 * (250 / 760 * 100vw)), -250px);
  left: 0;
  z-index: -5;
  background: linear-gradient(0deg,rgba(224,244,248, 0) 0%, rgba(205,235,248, 1) 40%, rgba(224,244,248, 0) 80%);
  background-color: #FFF;
}
.sec-about:after {
  content: "";
  width: 200%;
  height: min(calc(600 / 760 * 100vw), 600px);
  position: absolute;
  top: max(calc(-1 * (150 / 760 * 100vw)), -150px);
  left: 50%;
  transform: translateX(-50%);
  z-index: -4;
  background: radial-gradient(circle,rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 80%);
}
.about-hd {
  width: fit-content;
  margin-inline: auto;
  position: relative;
}
.about-hd:before {
  content: "";
  width: 150%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 9999px;
  filter:blur(min((60 / var(--base-width) * 100vw), 60px));
  background: rgba(255,255,255, 1);
  background: radial-gradient(circle,rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 100%);
}
.about-txt {
  line-height: var(--line-height-l);
  padding-bottom: 1rem;
}
.about-txt .highlight {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: #FFF;
  font-family: var(--ff-go);
  font-size: var(--fs-m);
  font-weight: 600;
  padding: 0.2em;
  background-color: var(--color-secondary);
}
@media not (max-width: 760px) {
  .about-txt { text-align: center; }
}

/*--------------------------------------------------------------------------------
  .about-feature
--------------------------------------------------------------------------------*/
@media not (max-width: 760px) { .about-feature { --col: 2; } }
@media (max-width: 760px) { .about-feature { --col: 1; } }
.about-feature {
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  gap: var(--space-s);
  padding-top: var(--space-l);
}
.about-feature_item {
  display: grid;
  padding: min(7%, 3 * var(--inner-space-unit));
  background-color: var(--bg-secondary);
  border-radius: 0.8rem;
  container-type: inline-size;
}
.about-feature_item .inner {
  font-size: min(4.5cqw, 1rem);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  grid-template-columns: 1fr min(36%, 220px);
  grid-template-areas: 
    "feature-hd feature-img"
    "feature-ttl feature-img"
    "feature-txt feature-txt";
  gap: var(--space-s);
}
@media not (max-width: 760px) {
  .about-feature_item .inner {
    font-size: min(4.5cqw, 1rem);
  }
}
@media (max-width: 760px) {
  .about-feature_item .inner {
    font-size: clamp(var(--fs-s), 4.5cqw, 1rem);
  }
}
.about-feature_hd { grid-area: feature-hd; }
.about-feature_ttl { grid-area: feature-ttl; }
.about-feature_img { grid-area: feature-img; }
.about-feature_txt { grid-area: feature-txt; }
.about-feature_hd {
  display: flex;
  align-items: center;
  column-gap: 0.75rem;
  line-height: var(--line-height-2s);
}
.about-feature_hd .txt {
  font-family: var(--ff-go);
  font-weight: 600;
  color: var(--color-secondary);
  padding: 0.6em 0 0.4em 0;
  border-bottom: 1px solid var(--color-secondary);
}
.about-feature_hd .no {
  font-family: var(--ff-en);
  font-weight: 500;
  font-size: var(--fs-2l);
  color: var(--color-secondary-lighter);
}
.about-feature_ttl {
  font-family: var(--ff-go);
  font-size: var(--fs-2l);
  font-weight: 700;
  line-height: var(--line-height-s);
}
.about-feature_img {
  margin: -0.5rem -0.5rem 0 0;
}
.about-feature_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.4rem;
}

/*--------------------------------------------------------------------------------

  contact LINE

--------------------------------------------------------------------------------*/
.sec-contact-line {
  margin-top: var(--space-2l);
}
@media not (max-width: 1000px) {
  .sec-contact-line {
    --img-width: clamp(170px, calc(210 / (var(--base-width) + 100) * 100vw), 210px);
    position: relative;
    padding-left: calc(var(--img-width) + var(--space-l));
  }
  .contact-line-hd {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: clamp(3rem, -7rem + 16vw, 6rem);
    padding-bottom: var(--space-s);
  }
  .contact-line-hd_img {
    width: var(--img-width);
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .contact-line-hd_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .contact-line-hd_ttl,
  .contact-line-hd_ttl img { width: min(calc(430 / (var(--base-width) + 100) * 100vw), 430px); }
  .contact-line-hd_qr { justify-self: end; }
  .contact-line-hd_qr img { width: min(calc(390 / var(--base-width) * 100vw), 390px); }
}
@media (max-width: 1000px) and (not (max-width: 760px)) { .contact-line-hd { --max-width: min(75%, 600px); } }
@media (max-width: 760px) { .contact-line-hd { --max-width: min(calc(100% - var(--side-space)), 560px); } }
@media (max-width: 1000px) {
  .contact-line-hd {
    width: var(--max-width);
    margin-inline: auto;
    padding-bottom: var(--space-l);
    display: grid;
    grid-template-columns: 22.5% auto;
    gap: var(--space-s) clamp(1.5rem, -3.308rem + 15.38vw, 4rem);
  }
  .contact-line-hd_img { grid-area: 1 / 1 / 3 / 2; align-self: end; }
  .contact-line-hd_ttl { grid-area: 1 / 2 / 2 / 3; align-self: end; }
  .contact-line-hd_qr { grid-area: 2 / 2 / 3 / 3; align-self: start; }
}

/*--------------------------------------------------------------------------------
  .contact-line-flow
--------------------------------------------------------------------------------*/
.contact-line-flow {
  container-type: inline-size;
  border: min(0.75cqw, 3px) solid var(--line-color-light);
  border-radius: 0.8rem;
  padding: 1rem;
}
.contact-line-flow_item {
  line-height: var(--line-height-s);
}
.contact-line-flow_item .ttl {
  background-color: var(--color-quaternary);
  font-family: var(--ff-go);
  font-size: var(--fs-m);
  font-weight: 600;
  line-height: var(--line-height-2s);
  text-align: center;
  border-radius: 0.2rem;
  position: relative;
}
.contact-line-flow_item .area-txt { position: relative; }
@media not (max-width: 760px) {
  .contact-line-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--inner-space-s);
  }
  .contact-line-flow_item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: var(--inner-space-s) 0;
    font-size: min(3cqw, var(--fs-n));
  }
  .contact-line-flow_item .ttl {
    letter-spacing: 0.5em;
    padding: 0.5em 0.5em 0.5em 1.25em;
  }
  .contact-line-flow_item:not(:last-of-type) .ttl {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .contact-line-flow_item:not(:last-of-type) .ttl:before {
    content: "";
    width: 1rem;
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: calc(100% - 1px);
    background-color: var(--color-quaternary);
    clip-path: polygon(10% 100%, 0 100%, 0 0, 10% 0, 100% 50%);
  }
  .contact-line-flow_item .area-txt {
    padding-left: 0.25rem;
    padding-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1rem;
  }
  .contact-line-flow_item:not(:last-of-type) .area-txt:after {
    content: "";
    width: 1px;
    height: 100%;
    border-right: 1px solid var(--border-color-light);
    position: absolute;
    right: -1.125rem;
    top: 0;
  }
  .contact-line-flow_item .txt { padding: 0 0.5rem; }
  .contact-line-flow_item .img img { height: 3.5em; }
}
@media (max-width: 760px) {
  .contact-line-flow {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 1.5rem;
  }
  .contact-line-flow_item {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / span 2;
    column-gap: max(3%, 1em);
    font-size: min(4cqw, var(--fs-n));
  }
  .contact-line-flow_item .ttl {
    display: grid;
    align-items: center;
    white-space: nowrap;
    letter-spacing: 0.25em;
    padding: 0.5em 0.5em 0.5em 0.675em;
  }
  .contact-line-flow_item:not(:last-of-type) .ttl {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: 0.25em;
  }
  .contact-line-flow_item:not(:last-of-type) .ttl:before {
    content: "";
    width: 100%;
    height: 1rem;
    position: absolute;
    z-index: 2;
    top: calc(100% - 1px);
    left: 0;
    background-color: var(--color-quaternary);
    clip-path: polygon(0 10%, 0 0, 100% 0, 100% 10%, 50% 100%);
  }
  .contact-line-flow_item .area-txt {
    padding: 0.5rem;
    display: flex;
    align-items: center;
    column-gap: 1rem;
  }
  .contact-line-flow_item:not(:last-of-type) .area-txt:after {
    content: "";
    width: 100%;
    height: 1px;
    border-bottom: 1px solid var(--border-color-light);
    position: absolute;
    right: 0;
    bottom: -0.75rem;
  }
  .contact-line-flow_item .txt { order: 1; flex-grow: 2; }
  .contact-line-flow_item .img { order: 2; flex-shrink: 0; }
  .contact-line-flow_item .img img { height: 3em; }
}

/*--------------------------------------------------------------------------------

  service

--------------------------------------------------------------------------------*/
.sec-service { padding-top: var(--space-2l); }

/*--------------------------------------------------------------------------------
  .service-list
--------------------------------------------------------------------------------*/
.service-list {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-color);
}
.service-list_item {
  border-top: 1px solid var(--border-color);
  padding: var(--inner-space-m) 0;
  container-type: inline-size;
}
.service-list_item .inner {
  display: grid;
  gap: 0 var(--space-l);
}
.service-list_txt {
  margin-left: 0.5rem;
}
@media not (max-width: 760px) {
  .service-list_item .inner {
    font-size: min(2.5cqw, 1rem);
    grid-template-columns: 36% 1fr;
    grid-template-areas: 
      "service-img service-ttl"
      "service-img service-txt";
  }
  .service-list_ttl { grid-area: service-ttl; align-self: end; padding-bottom: var(--space-2s); }
  .service-list_img { grid-area: service-img; }
  .service-list_txt { grid-area: service-txt; align-self: start; }
  .service-list_ttl {
    font-size: clamp(var(--fs-2l), 4cqw, var(--fs-3l));
  }
}
@media (max-width: 760px) {
  .service-list_item { padding-bottom: var(--space-2l); }
  .service-list_ttl {
    text-align: center;
    font-size: clamp(var(--fs-2l), 6cqw, var(--fs-3l));
  }
}
.service-list_ttl {
  font-family: var(--ff-go);
  font-weight: 700;
  line-height: var(--line-height-s);
}
.service-list_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.4rem;
}
@media (max-width: 760px) {
  .service-list_img { padding-top: var(--space-s); padding-bottom: var(--space-m); }
  .service-list_img img { aspect-ratio: 2 / 1; }
}

/*--------------------------------------------------------------------------------

  works

--------------------------------------------------------------------------------*/
.sec-works {
  padding-top: var(--space-2l);
  padding-bottom: var(--space-2l);
}

/*--------------------------------------------------------------------------------
  .works-list
--------------------------------------------------------------------------------*/
@media not (max-width: 1000px) { .works-list { --col: 3; } }
@media (max-width: 1000px) { .works-list { --col: 2; } }
@media (max-width: 760px) { .works-list { --col: 1; } }
.works-list {
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  gap: var(--space-l) var(--space-s);
}
.works-list_item {
  line-height: var(--line-height-s);
  container-type: inline-size;
}
.works-list_item,
.works-list_item .inner {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 0;
}
.works-list_item .inner {
  font-size: min(5cqw, 1rem);
}
.works-list_item .cat {
  background-color: var(--color-secondary);
  color: #FFF;
  font-weight: bold;
  text-align: center;
  font-size: var(--fs-m);
  padding: 0.5em;
  line-height: var(--line-height-s);
}
.works-list_item .img {
  justify-self: center;
}
.works-list_item .img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.works-list_item .txt {
  padding: 1rem 0;
}
.works-list_item .area-price {
  padding: 1rem 0;
  font-weight: bold;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: end;
  column-gap: 1rem;
}
.works-list_item .price {
  line-height: 1;
  color: var(--color-quinary);
  font-size: var(--fs-l);
}
.works-list_item .price_num {
  font-size: var(--fs-2l-rem);
  font-weight: 600;
}
@media (max-width: 760px) {
  .works-list_item .price_num {
    font-size: var(--fs-3l);
  }
}

/*--------------------------------------------------------------------------------

  company

--------------------------------------------------------------------------------*/
.sec-company {
  padding-top: var(--space-2l);
  padding-bottom: var(--space-2l);
  position: relative;
}
.sec-company:before {
  content: "";
  width: 100%;
  height: min(calc(400 / 760 * 100vw), 480px);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -5;
  background: linear-gradient(180deg,rgba(var(--rgb-bg-gray), 1) 0%, rgba(255,255,255, 0) 100%);
  background-color: #FFF;
}
@media not (max-width: 1000px) {
  .company {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 
      "company-hd company-content";
    column-gap: var(--space-3l);
  }
  .company_hd { grid-area: company-hd; }
  .company_content { grid-area: company-content; padding-top: 1.25rem; }
}

/*--------------------------------------------------------------------------------
  .company-tbl
--------------------------------------------------------------------------------*/
.company-tbl {
  width: 100%;
  line-height: var(--line-height-s);
}
.company-tbl tr {
  border-bottom: 1px solid var(--border-color);
}
.company-tbl th {
  white-space: nowrap;
  width: 20%;
}
.company-tbl th,
.company-tbl td {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.company-tbl td {
  padding-left: 1.5rem;
}

/*--------------------------------------------------------------------------------
  .company-map
--------------------------------------------------------------------------------*/
.company-map {
  padding-top: var(--space-2l);
}
.company-map iframe {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  max-height: 600px;
  border: 0;
  vertical-align: bottom;
}
@media (max-width: 760px) {
  .company-map iframe { aspect-ratio: 1 / 1; }
}

/*--------------------------------------------------------------------------------

  contact

--------------------------------------------------------------------------------*/
.sec-contact {
  background: rgba(var(--rgb-color-primary));
  background: linear-gradient(145deg,rgba(var(--rgb-color-primary)) 0%, rgba(var(--rgb-color-secondary)) 100%);
  color: #FFF;
}
.contact {
  display: grid;
  container-type: inline-size;
}
@media not (max-width: 1000px) {
  .sec-contact { padding: var(--space-l) 0; }
  .contact_hd { grid-area: contact-hd; }
  .contact_info { grid-area: contact_info; align-self: end; padding-bottom: 0.5rem; }
  .contact_btn { grid-area: contact-btn; align-self: center; }
  .contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
      "contact-hd contact-btn"
      "contact_info contact-btn";
    gap: var(--space-s) var(--space-m);
  }
}
@media (max-width: 1000px) {
  .sec-contact { padding: var(--space-2l) 0; }
  .contact_info {
    padding: var(--space-l) 0;
  }
}

/*--------------------------------------------------------------------------------
  .contact_hd
--------------------------------------------------------------------------------*/
.contact_hd {
  --ttl-en-color: #FFF;
  --ttl-mgb: 0;
}

/*--------------------------------------------------------------------------------
  .contact_tel
--------------------------------------------------------------------------------*/
.contact_tel {
  --link-color: #FFF;
  --link-color-hover: #FFF;
  --link-deco: none;
  --link-deco-hover: none;
  display: inline-flex;
  align-items: baseline;
  line-height: var(--line-height-2s);
  padding-right: 1.5rem;
  margin-top: 0.5rem;
}
@media not (max-width: 1000px) {
  .contact_tel { font-size: var(--fs-m); }
}
@media (max-width: 1000px) {
  .contact_tel { font-size: clamp(1rem, 4.75cqw, var(--fs-2m)); }
}
.contact_tel .no {
  display: flex;
  align-items: center;
  column-gap: 0.15rem;
  font-size: var(--fs-3l);
  font-family: var(--ff-en);
  font-weight: 500;
}
.contact_tel .no:before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  background: currentColor;
  color: currentColor;
  mask: var(--icon-tel) no-repeat center center;
  mask-size: contain;
  margin-top: 0.05em;
}
.contact_tel .time {
  text-align: center;
  font-size: var(--fs-2s);
  transform: translateX(calc(1em - 0.15rem)) translateY(-0.15em);
}

/*--------------------------------------------------------------------------------
  .contact_btn
--------------------------------------------------------------------------------*/
.contact_btn {
  --link-color: var(--txt-color);
  --link-color-hover: var(--txt-color);
  --link-deco: none;
  --link-deco-hover: none;
  --sns-size: 2em;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contact_btn a:has(.-mail) {
  --sns-mask-size: 1.75em;
  --sns-bg: var(--color-primary);
  --sns-bg-hover: var(--color-primary);
}
.contact_btn a:has(.-line) {
  --sns-bg: var(--line-color);
  --sns-bg-hover: var(--line-color);
}
.contact_btn li {
  width: 100%;
  display: flex;
  container-type: inline-size;
}
.contact_btn a {
  width: 100%;
  height: 100%;
  font-family: var(--ff-go);
  font-size: min(5.25cqw, var(--fs-2m));
  font-weight: 600;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: var(--inner-space-2s);
  align-items: center;
  background-color: #FFF;
  border-radius: 0.4rem;
  padding: var(--inner-space-2s);
  position: relative;
}
.contact_btn a:after {
  content: "";
  width: 0.85em;
  height: 0.85em;
  background: currentColor;
  color: var(--color-gray);
  mask-image: var(--icon-arrow);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: cover;
  transition: color 0.2s ease-in-out, transform 0.6s var(--cubic-bezier);
  transform: translateX(-0.2rem);
}
.contact_btn .c-sns {
  margin: 0 0.25em;
}
@media (max-width: 1000px) and (not (max-width: 760px)) {
  .contact_btn {
    flex-direction: row;
  }
}
@media (hover: hover) {
  .contact_btn a:hover:after {
    transform: translateX(0.2rem);
    color: var(--color-primary);
  }
}