@charset "utf-8";

/* PC は常時有効。SP用 CSS で上書きされる (SP用は @media (max-width: 768px)) */

:root {
  /* レンダリング誤差によるウェーブ下端の白い継ぎ目を、塗りレイヤーの重なりで防ぐ。 */
  --wave-fill-overlap: clamp(5px, 0.5vw, 12px);
}

/*-------------------------------------ユーティリティ-------------------------------------*/
.sp-only {
  display: none !important;
}
#sp-header,
#hamburger {
  display: none !important;
}
body {
  position: relative;
}

.wrap {
  width: 100%;
}
/* .content の幅バリエーション (max-width で narrow viewport にも対応) */
.content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.content-narrow {
  max-width: 1080px;
}
.content-tight {
  max-width: 1000px;
}

/*-------------------------------------固定要素-------------------------------------*/
/* TOPへボタン */
.button-page-top {
  position: fixed;
  z-index: 100;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  text-indent: -9999px;
  background: var(--color-green);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}
.button-page-top::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  transform: translate(-50%, -30%) rotate(-45deg);
}
.button-page-top:hover {
  background: var(--color-green-dark);
  opacity: 1;
}

/*-------------------------------------ヘッダー-------------------------------------*/
header.header {
  width: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.6) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  transition: box-shadow 0.35s ease;
}
header.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-white);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
header.header.is-scrolled {
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 0 3px 15px rgba(28, 94, 51, 0.08);
}
header.header.is-scrolled::before {
  opacity: 1;
}
/* ヘッダーは画面幅いっぱい使う（デザイン実測: ロゴ左端x=42〜ピル右端x=1466、幅≒1424） */
.header .wrap {
  position: relative;
  z-index: 1;
  padding: 15px 40px;
}
.header .content {
  width: 100%;
  max-width: 1500px;
  padding: 0;
}
.header .box-outer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;
}

/*--- ロゴ ---*/
.header .box-logo a {
  display: flex;
  align-items: center;
  gap: 15px;
}
.header .logo-mark {
  width: 80px;
  flex-shrink: 0;
}
.header .logo-mark img {
  width: 100%;
  height: auto;
}
.header .logo-text .tag-line {
  font-size: 1.1rem;
  color: #494922;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  white-space: nowrap;
}
.header .logo-text h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #494922;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/*--- グロナビ ---*/
.header .g-nav ul {
  display: flex;
  align-items: center;
  gap: 35px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.header .g-nav li:not(.btn-pill) a {
  display: block;
  height: 22px;
  line-height: 22px;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.05em;
}
.header .g-nav li.btn-pill a {
  color: var(--color-white);
}

/*--- メニュー文字のローリングホバー ---*/
.header .g-nav.nav-roll-ready a {
  position: relative;
  overflow: hidden;
  color: transparent !important;
}
.header .g-nav.nav-roll-ready a::before,
.header .g-nav.nav-roll-ready a::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.header .g-nav.nav-roll-ready li.btn-pill a::before,
.header .g-nav.nav-roll-ready li.btn-pill a::after {
  color: var(--color-white);
}
.header .g-nav.nav-roll-ready a::before {
  transform: translateY(0);
}
.header .g-nav.nav-roll-ready a::after {
  transform: translateY(110%);
}
.header .g-nav.nav-roll-ready a:hover::before {
  transform: translateY(-110%);
}
.header .g-nav.nav-roll-ready a:hover::after {
  transform: translateY(0);
}

/*--- ピルボタン（1500px基準: 220×50, ピル間隔15） ---*/
.header .g-nav .btn-pill-recruit {
  margin-left: 10px;  /* 通常ナビからピル群までのゆとり */
}
.header .g-nav .btn-pill-contact {
  margin-left: -20px;  /* gnav gap 35px を打ち消して 15px間隔にする */
}
.header .btn-pill a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 50px;
  border-radius: 25px;
  color: var(--color-white);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  transition: background-color 0.35s ease;
}
.header .btn-pill-recruit a {
  background: var(--color-green);
}
.header .btn-pill-contact a {
  background: var(--color-pink);
}
.header .btn-pill-recruit a:hover {
  background: #009A38;
}
.header .btn-pill-contact a:hover {
  background: #D9004F;
}
.header .btn-pill a:hover {
  opacity: 1;
}

/*--- ヘッダー・フッターの中間幅対応（769px - 1199px） ---
   PC版の構成を保ったまま、1200px基準の寸法を段階的に縮める。 */
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .header .wrap {
    padding: 1.25vw 3.3333vw 1.25vw 1.6667vw;
  }
  .header .box-outer {
    gap: 1.6667vw;
  }
  .header .box-logo a {
    gap: 1.25vw;
  }
  .header .logo-mark {
    width: 6.6667vw;
  }
  .header .logo-text .tag-line {
    font-size: 0.9167vw;
    margin-bottom: 0.4167vw;
  }
  .header .logo-text h1 {
    font-size: 1.6667vw;
  }
  .header .g-nav ul {
    gap: calc(10px + 0.8333vw);
  }
  .header .g-nav li:not(.btn-pill) a,
  .header .btn-pill a {
    font-size: calc(10px + 0.4167vw);
  }
  .header .g-nav .btn-pill-recruit {
    margin-left: 0.4167vw;
  }
  .header .g-nav .btn-pill-contact {
    /* ボタン同士は画面幅が狭くなっても約 1.25vw 分を確保する。 */
    margin-left: -0.8333vw;
  }
  .header .btn-pill a {
    /* 中間幅ではメニュー文字の縮小に合わせ、ピルの横幅も抑える。 */
    width: 15vw;
    height: 4.1667vw;
  }

  /* 下層タイトルは、画面幅が狭くなっても文字を画面端へ密着させない。 */
  .page-title .page-title-copy .content {
    padding-inline: 2.5vw !important;
  }
  /* リード文は1200px時の14pxを基準に、狭幅では約13pxまで穏やかに縮小する。 */
  main .lead,
  main .section-lead {
    font-size: calc(12px + 0.1667vw) !important;
  }

}

/*-------------------------------------フッター-------------------------------------*/
footer.footer {
  width: 100%;
}

/*--- お問い合わせセクション ---*/
/* 2レイヤー背景:
   Layer1 (上) = footer_contact_back_01.png（ベージュ波）を top center 上端揃え
   Layer2 (下) = footer_contact_back_02.png（町並みイラスト）を bottom center 下端揃え
   両方とも 100% width で幅可変。切れないように上下それぞれ端に固定。
   ベースは元のグラデ(白→薄ピンク)。 */
.footer-contact {
  /* padding-bottom を大きくして、footer が -5vw で食い込んでも下部余白が確保される。
     町並みイラスト背景も下端揃えで表示範囲が伸びる。 */
  padding: 80px 0 calc(20vw - 50px);
  background:
    url('../images/footer_contact_back_01.png') no-repeat top center / 100% auto,
    url('../images/footer_contact_back_02.png') no-repeat bottom center / 100% auto,
    linear-gradient(180deg, #FFFFFF 0%, #FDF4F0 100%);
  position: relative;
}
.footer-contact .h2-outer {
  text-align: center;
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 20px;
}
.footer-contact .h2-outer h2 {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--color-green-dark);
  letter-spacing: 0.05em;
}
.footer-contact .h2-outer .eng {
  font-family: "Damion", cursive;
  font-weight: 400;
  display: inline-block;
  transform: rotate(-5deg);
  transform-origin: left center;
  font-size: 2.4rem;
  color: var(--color-pink);
  letter-spacing: 0.1em;
}
.footer-contact .lead {
  text-align: center;
  font-size: 1.4rem;
  color: var(--color-text);
  margin-bottom: 45px;
}
.footer-contact .box-outer {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin: 0 auto;
}
/* 3000px幅の2倍書き出しから実測: 750×200px → 表示375×100px */
.contact-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 375px;
  height: 100px;
  padding: 0 35px;
  background: var(--color-white);
  border: 1px solid var(--color-green-dark);
  border-radius: 15px;
  color: var(--color-text);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.contact-btn:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.contact-btn .icon {
  flex-shrink: 0;
  width: 40px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-btn-mail .icon {
  height: 50px;
  width: 40px;
}
.contact-btn .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.contact-btn .body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.contact-btn-tel .tel {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: 3rem;
  font-weight: 900;
  color: var(--color-green-dark);
  letter-spacing: 0.1em;
  line-height: 1.1;
  white-space: nowrap;
}
.contact-btn-tel .body {
  position: absolute;
  top: 50%;
  left: calc(50% + 5px);
  width: max-content;
  transform: translate(-50%, -50%);
  align-items: center;
}
.contact-btn-tel .hours {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  color: var(--color-text);
  opacity: 0.75;
  position: relative;
  left: 0.5em;
  white-space: nowrap;
}
.contact-btn-mail .text {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--color-green-dark);
  font-feature-settings: "palt" 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.contact-btn .arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--color-green-dark);
}

/*--- 上部イラスト帯（旧仮素材、非表示。町並みは .footer-contact 背景、波は .footer-nav-band 背景で代替） ---*/
.footer-illust {
  display: none;
}

/*--- 下部 暗緑ナビ帯 ---*/
/* 波飾り(footer_back_01.png 3000×800, aspect 3.75) を service と同じパターンで .wrap に配置。
   PNG 表示高さは 100vw/3.75 (≒26.67vw)、塗り色 #1C5E33。
   negative margin-top で contact 背景（町並み）に食い込ませる → 波が町並み上部に重なる。
   .wrap padding-top はコンテンツ（ロゴ・ナビ）が波の近くに来るよう控えめに。 */
.footer-nav-band {
  background: transparent;
  color: var(--color-white);
  padding: 0;
  margin-top: -10vw;   /* 1280px幅で約-130px。町並み素材下端の白地までウェーブで覆う */
  position: relative;
  z-index: 2;
}
.footer-nav-band .wrap {
  padding-top: 13vw;   /* 波の少し下から content 開始（波PNG 26.67vw のうち上部を波に、下は content 領域） */
  padding-bottom: 30px;
  background:
    url('../images/footer_back_01.png') no-repeat top center / 100% auto,
    linear-gradient(#1C5E33, #1C5E33) no-repeat 0 calc(100vw / 3.75 - var(--wave-fill-overlap)) / 100% calc(100% + var(--wave-fill-overlap));
}
.footer-nav-band .content {
  width: min(100%, 1200px);
  padding: 0 20px;
}
.footer-nav-band .box-outer {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  align-items: stretch;  /* 左右カラムの高さを揃える */
}

/*--- 左：会社情報 ---*/
.footer .box-company-info {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-logo {
  flex-shrink: 0;
  width: 80px;
}
.footer-logo img {
  width: 100%;
  height: auto;
}
.footer-name .tag-line {
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  white-space: nowrap;
}
.footer-name .company-name {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
/* 住所は「ロゴ幅 + gap」だけインデントしてタグライン／会社名の下に揃える */
.footer .box-company-info .address {
  padding-left: 100px;   /* 80 (ロゴ) + 20 (gap) */
  font-size: 1.2rem;
  line-height: 1.9;
}
.footer .box-company-info .address span {
  display: block;
}
.footer .box-company-info .address a {
  color: var(--color-white);
}

/*--- 右：ナビ ---*/
/*  縦分散：ナビ（上端）／サブナビ（中央）／コピーライト（下端） */
.footer .box-nav-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0;
  padding-top: 20px;
}
.footer-nav ul {
  display: flex;
  gap: 45px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.footer-nav li a {
  display: block;
  height: 22px;
  line-height: 22px;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-white);
}
.footer-nav.nav-roll-ready a {
  position: relative;
  overflow: hidden;
  color: transparent !important;
}
.footer-nav.nav-roll-ready a::before,
.footer-nav.nav-roll-ready a::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.footer-nav.nav-roll-ready a::before {
  transform: translateY(0);
}
.footer-nav.nav-roll-ready a::after {
  transform: translateY(110%);
}
.footer-nav.nav-roll-ready a:hover::before {
  transform: translateY(-110%);
}
.footer-nav.nav-roll-ready a:hover::after {
  transform: translateY(0);
}
.footer-nav-sub ul {
  display: flex;
  gap: 15px;
  align-items: center;
}
.footer-nav-sub {
  margin-top: 55px;
}
.footer-nav-sub li {
  font-size: 1.2rem;
  color: var(--color-white);
}
.footer-nav-sub li a {
  color: var(--color-white);
  transition: opacity 0.3s ease;
}
.footer-nav-sub li a:hover {
  opacity: 0.65;
}
.footer-nav-sub li + li::before {
  content: "｜";
  margin-right: 15px;
  color: var(--color-white);
  opacity: 0.5;
}
.footer .credit {
  margin-top: 20px;
  font-size: 1.1rem;
  color: var(--color-white);
  opacity: 0.9;
  letter-spacing: 0.05em;
}

/* 装飾は常に本文より背面に置く。ヒーローのみ写真・グラデーションより前、コピーより後ろ。 */
main .content {
  position: relative;
  z-index: 2 !important;
}
main [class*="kazari"] {
  z-index: 1 !important;
}
main .hero .hero-kazari-left {
  z-index: 3 !important;
}
main .message > .wrap,
main .interview > .wrap,
main .flow > .wrap {
  z-index: 2 !important;
}

/* フッターは基本スタイルより後で上書きし、1200px基準から比例縮小する。 */
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .footer-contact .content {
    width: 100%;
  }
  .footer-contact {
    padding-top: 6.6667vw;
  }
  .footer-contact .h2-outer {
    gap: 1.6667vw;
    margin-bottom: 2.0833vw;
  }
  .footer-contact .h2-outer h2 {
    font-size: 2.6667vw;
  }
  .footer-contact .h2-outer .eng {
    font-size: 2vw;
  }
  .footer-contact .lead {
    font-size: calc(12px + 0.1667vw);
    margin-bottom: 3.75vw;
  }
  .footer-contact .box-outer {
    width: auto;
    gap: 2.0833vw;
  }
  .contact-btn {
    width: 31.25vw;
    height: 8.3333vw;
    padding-right: 2.9167vw;
    padding-left: 2.9167vw;
  }
  .contact-btn .icon,
  .contact-btn-mail .icon {
    width: 3.3333vw;
    height: 4.1667vw;
  }
  .contact-btn-tel .tel {
    font-size: 2.5vw;
  }
  .contact-btn-mail .text {
    font-size: 1.9167vw;
  }
  .contact-btn .arrow {
    right: 1.6667vw;
  }
  .footer-nav-band .box-outer {
    gap: 5vw;
  }
  .footer .box-company-info {
    flex: 0 0 auto;
    min-width: max-content;
  }
  .footer-brand {
    gap: 1.6667vw;
  }
  .footer-logo {
    width: 6.6667vw;
  }
  .footer-name .tag-line {
    font-size: 0.9167vw;
  }
  .footer-name .company-name {
    font-size: 1.6667vw;
  }
  .footer .box-company-info .address {
    padding-left: 8.3333vw;
    font-size: 1.2rem;
  }
  .footer .box-company-info .address span {
    white-space: nowrap;
  }
  .footer-nav ul {
    gap: calc(10px + 0.8333vw);
  }
  .footer-nav li a {
    height: calc(14px + 0.4167vw);
    line-height: calc(14px + 0.4167vw);
    font-size: calc(10px + 0.4167vw);
  }
  .footer-nav-sub {
    margin-top: 3.75vw;
  }
  .footer-nav-sub ul {
    gap: 1.0833vw;
  }
  .footer-nav-sub li {
    font-size: calc(9px + 0.1667vw);
  }
  .footer-nav-sub li + li::before {
    margin-right: 1.0833vw;
  }
  .footer .credit {
    margin-top: 1.3333vw;
    font-size: calc(9px + 0.1667vw);
    letter-spacing: 0.03em;
  }
}