@charset "UTF-8";
/*
Theme Name: 株式会社Rusty
Description: 株式会社Rusty コーポレートサイト
Version: 1.0
*/
/* ============================================================
   ブレークポイント
   ============================================================ */
/* ============================================================
   カラー変数（実装指示書 §1-1）
   テンプレ⑤デフォルトの水色系(#66a5c9)は一切残さない
   ============================================================ */
/* ============================================================
   フォント（実装指示書 §1-2）
   ============================================================ */
/* ============================================================
   ブレークポイント mixin（既存踏襲）
   ============================================================ */
/* 1024px以下（tab＋sp）をまとめて指定するとき */
/* ============================================================
   リセット & ベース
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #22282F;
  background: #F6F3ED;
  line-height: 2.05;
  letter-spacing: 0.06em;
  /* Light(300)は小さい和文で線が細く読みにくいため、本文はRegular(400)にする */
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@media screen and (min-width: 1441px) {
  body {
    font-size: 15px;
  }
}
@media screen and (max-width: 768px) {
  body {
    line-height: 1.95;
  }
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style: none;
}

.en {
  font-family: "Marcellus", serif;
  letter-spacing: 0.24em;
  font-weight: 400;
}

.en-it {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  letter-spacing: 0.1em;
  font-weight: 300;
}

.mincho {
  font-family: "Zen Old Mincho", serif;
}

/* ============================================================
   共通レイアウト
   ============================================================ */
.sec {
  padding: 110px 0;
}
@media screen and (max-width: 1024px) {
  .sec {
    padding: 80px 0;
  }
}
@media screen and (max-width: 768px) {
  .sec {
    padding: 64px 0;
  }
}
.sec.dark {
  background: #0B121C;
}
.sec.tint {
  background: #EDE8DF;
}

.inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 44px;
}
@media screen and (min-width: 1441px) {
  .inner {
    max-width: 1340px;
  }
}
@media screen and (max-width: 1024px) {
  .inner {
    padding: 0 28px;
  }
}
@media screen and (max-width: 768px) {
  .inner {
    padding: 0 24px;
  }
}
.inner.wide {
  max-width: 1320px;
}
@media screen and (min-width: 1441px) {
  .inner.wide {
    max-width: 1560px;
  }
}
.inner.ta_c {
  text-align: center;
}

/* 下層セクション見出し */
.shead {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .shead {
    margin-bottom: 40px;
  }
}
.shead .lb {
  display: block;
  font-family: "Italiana", serif;
  letter-spacing: 0.12em;
  color: #0B121C;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.15;
  margin-bottom: 12px;
}
@media screen and (max-width: 768px) {
  .shead .lb {
    font-size: 28px;
  }
}
/* 下のゴールドの縦線（::after）は削除。
   中央寄せ（.ctr）のときだけ、末尾の字間ぶんを左に足して見た目の中心を揃える。 */
.shead h2 {
  font-family: "Zen Old Mincho", serif;
  font-size: 12.5px;
  font-weight: 400;
  color: #75612F;
  letter-spacing: 0.4em;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .shead h2 {
    font-size: 11px;
    letter-spacing: 0.32em;
  }
}
.shead.ctr {
  text-align: center;
}
.shead.ctr h2 {
  padding-left: 0.4em;
}
.shead.lt .lb {
  color: #fff;
}
.shead.lt h2 {
  color: #B99A57;
}

/* ボタン（下層で共通） */
.btn_o {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  border: 1px solid #0B121C;
  background: none;
  color: #0B121C;
  padding: 16px 46px;
  font-size: 11px;
  letter-spacing: 0.24em;
  font-family: inherit;
  cursor: pointer;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
}
.btn_o span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: color 0.5s;
}
.btn_o::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0B121C;
  transform: translateX(-101%);
  transition: transform 0.55s cubic-bezier(0.6, 0, 0.2, 1);
}
.btn_o:hover::before {
  transform: translateX(0);
}
.btn_o:hover span {
  color: #fff;
}

.btn_g {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  border: 1px solid #B99A57;
  background: none;
  color: #B99A57;
  padding: 17px 52px;
  font-size: 11px;
  letter-spacing: 0.26em;
  font-family: inherit;
  cursor: pointer;
  transition: 0.6s;
  position: relative;
  overflow: hidden;
}
.btn_g span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: color 0.6s;
}
.btn_g::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #8E7440, #E3CD9A);
  transform: translateX(-101%);
  transition: transform 0.6s cubic-bezier(0.6, 0, 0.2, 1);
}
.btn_g:hover::before {
  transform: translateX(0);
}
.btn_g:hover span {
  color: #0B121C;
}

/* 電話番号の下の注意書き（※営業電話お断り など）
   受付時間の注記より一段強く見せるため、枠で囲んで独立させる。 */
.tel_note {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 18px;
  border: 1px solid rgba(185, 154, 87, 0.6);
  color: #8E7440;
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1.7;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .tel_note {
    font-size: 11.5px;
    padding: 6px 14px;
    margin-top: 12px;
  }
}

/* 暗い背景（フッター）ではゴールドを明るめに */
#footer_contact .tel_note {
  border-color: rgba(185, 154, 87, 0.7);
  color: #E3CD9A;
}

/* パンくず */
.crumb {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 44px 0;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: #666C75;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 1024px) {
  .crumb {
    padding: 20px 28px 0;
  }
}
@media screen and (max-width: 768px) {
  .crumb {
    padding: 16px 24px 0;
    font-size: 10px;
    gap: 8px;
  }
}
.crumb a:hover {
  color: #8E7440;
}
.crumb i {
  font-size: 8px;
  opacity: 0.5;
}
.crumb {
  /* 採用情報のようにMV直下が暗いセクションのページ用。
     明るい帯だけが上下の暗い面に挟まれて浮いて見えるため、帯ごと暗くする。
     .crumb自体は max-width で中央寄せしているので、
     背景は ::before を左右にビューポート幅まで広げて全幅にしている。 */
}
.crumb.dark {
  position: relative;
  color: rgba(255, 255, 255, 0.5);
  padding-bottom: 22px;
}
@media screen and (max-width: 768px) {
  .crumb.dark {
    padding-bottom: 16px;
  }
}
.crumb.dark::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: #0B121C;
  z-index: -1;
}
.crumb.dark a:hover {
  color: #B99A57;
}
.crumb.dark i {
  opacity: 0.35;
}

/* ============================================================
   共通アニメーション（実装指示書 §3）
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1.9s cubic-bezier(0.16, 0.7, 0.2, 1), transform 1.9s cubic-bezier(0.16, 0.7, 0.2, 1);
}
.fade-in.scroll-in {
  opacity: 1;
  transform: translateY(0);
}

.d1 {
  transition-delay: 0.18s;
}

.d2 {
  transition-delay: 0.36s;
}

.d3 {
  transition-delay: 0.54s;
}

.d4 {
  transition-delay: 0.72s;
}

/* 見出し 1文字ずつ */
.split {
  display: inline-block;
}
.split .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  transform-origin: 50% 100%;
}
.split.scroll-in .ch {
  animation: chIn 1.5s cubic-bezier(0.16, 0.72, 0.16, 1) forwards;
}

@keyframes chIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* カーテン・リビール（画像） */
.reveal {
  position: relative;
  overflow: hidden;
}
.reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #0B121C;
  transform: scaleX(1);
  transform-origin: right;
}
.reveal.scroll-in::before {
  animation: curtain 1.9s cubic-bezier(0.66, 0, 0.2, 1) forwards;
}
.reveal .bg {
  transform: scale(1.2);
  transition: transform 3s cubic-bezier(0.14, 0.72, 0.18, 1) 0.4s;
}
.reveal.scroll-in .bg {
  transform: scale(1.04);
}

@keyframes curtain {
  0% {
    transform: scaleX(1);
    transform-origin: left;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}
/* ゴールドライン 伸長 */
.line-grow {
  position: relative;
}
.line-grow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  width: 1px;
  height: 14px;
  background: #B99A57;
  transform-origin: top;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) 0.3s;
}
.line-grow.scroll-in::after {
  transform: translateX(-50%) scaleY(1);
}

/* 流れる背景テキスト */
.marquee {
  position: absolute;
  bottom: -2vw;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.marquee .track {
  display: flex;
  white-space: nowrap;
  width: -moz-max-content;
  width: max-content;
  animation: flow 42s linear infinite;
}
.marquee .track span {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 12vw;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(34, 40, 47, 0.045);
  padding-right: 0.4em;
}
@media screen and (max-width: 768px) {
  .marquee .track span {
    font-size: 20vw;
  }
}

@keyframes flow {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* パララックス */
.plx {
  will-change: transform;
}

/* スクロール進捗バー */
#progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 1200;
  background: linear-gradient(90deg, #8E7440, #E3CD9A);
  transform: scaleX(0);
  transform-origin: left;
}

/* 動きを減らす設定（実装指示書 §3） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .split .ch, .fade-in {
    opacity: 1 !important;
    transform: none !important;
  }
  .reveal::before {
    display: none;
  }
}
/* SPパララックス無効化 & 固定背景解除（実装指示書 §6） */
@media screen and (max-width: 768px) {
  .plx {
    transform: none !important;
  }
}
/* ============================================================
   ページ別パーシャル
   ============================================================ */
/* ============================================================
   _header.scss ── ヘッダー / グローバルメニュー / ローダー
                    ＋ 下層共通メインビジュアル
   ============================================================ */
/* ---- ローダー ---------------------------------------------- */
#loader {
  position: fixed;
  inset: 0;
  background: #0B121C;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 22px;
  transition: opacity 1.1s ease 0.4s, visibility 1.1s ease 0.4s;
}
#loader.done {
  opacity: 0;
  visibility: hidden;
}
/* ヘッダーと同じロゴ画像。ヘッダー(62px)より一回り大きく見せる */
#loader .lg_img {
  height: 96px;
  width: auto;
  opacity: 0;
  animation: loaderLogo 1.5s cubic-bezier(0.16, 0.7, 0.2, 1) 0.15s forwards;
}
@media screen and (max-width: 768px) {
  #loader .lg_img {
    height: 64px;
  }
}
#loader .lg {
  font-family: "Italiana", serif;
  font-size: 60px;
  letter-spacing: 0.42em;
  padding-left: 0.34em;
  color: transparent;
  background: linear-gradient(100deg, #8E7440, #E3CD9A, #8E7440);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer 2.4s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  #loader .lg {
    font-size: 40px;
    letter-spacing: 0.34em;
  }
}
#loader .bar {
  width: 120px;
  height: 1px;
  background: rgba(185, 154, 87, 0.2);
  position: relative;
  overflow: hidden;
}
#loader .bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #B99A57;
  transform: translateX(-100%);
  animation: load 1.9s ease forwards;
}

@keyframes loaderLogo {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes shimmer {
  0% {
    background-position: 180% 0;
  }
  100% {
    background-position: -60% 0;
  }
}
@keyframes load {
  to {
    transform: translateX(0);
  }
}
/* ---- ヘッダー ---------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 44px;
  transition: background 0.6s ease, box-shadow 0.6s ease, padding 0.6s ease;
}
@media screen and (max-width: 768px) {
  .header {
    padding-left: 20px;
  }
}
.header.change-color {
  background: rgba(11, 18, 28, 0.93);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(185, 154, 87, 0.22);
}

.header_logo {
  padding: 16px 0;
  margin-right: auto;
  transition: padding 0.6s ease;
}
.header.change-color .header_logo {
  padding: 12px 0;
}
@media screen and (max-width: 768px) {
  .header_logo {
    padding-right: 12px;
  }
}
.header_logo img {
  height: 62px;
  width: auto;
  max-width: 100%;
  transition: height 0.6s;
}
@media screen and (max-width: 768px) {
  .header_logo img {
    height: auto;
    max-height: 48px;
  }
}
.header.change-color .header_logo img {
  height: 48px;
}
@media screen and (max-width: 768px) {
  .header.change-color .header_logo img {
    height: auto;
    max-height: 38px;
  }
}

.logo-mark {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-r {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(from 205deg, #1E7FE0 0deg, #3FC7F5 90deg, #E3CD9A 190deg, #B99A57 250deg, #1E7FE0 360deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 34px;
  color: #fff;
  font-weight: 400;
  transition: width 0.6s, height 0.6s, font-size 0.6s;
}
.logo-r::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(185, 154, 87, 0.35);
}
@media screen and (max-width: 768px) {
  .logo-r {
    width: 38px;
    height: 38px;
    font-size: 21px;
  }
}

.header.change-color .logo-r {
  width: 48px;
  height: 48px;
  font-size: 27px;
}
@media screen and (max-width: 768px) {
  .header.change-color .logo-r {
    width: 38px;
    height: 38px;
    font-size: 21px;
  }
}

.logo-txt {
  color: #fff;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 0.1em;
  font-style: italic;
  font-family: "Cormorant Garamond", serif;
}
@media screen and (max-width: 768px) {
  .logo-txt {
    font-size: 18px;
  }
}
.logo-txt small {
  display: block;
  font-family: "Zen Old Mincho", serif;
  font-size: 8px;
  letter-spacing: 0.44em;
  font-style: normal;
  font-weight: 400;
  opacity: 0.55;
  margin-top: 2px;
}
@media screen and (max-width: 768px) {
  .logo-txt small {
    font-size: 7.5px;
    letter-spacing: 0.36em;
  }
}

/* ---- PCインラインナビ ---- */
.header_nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-right: 36px;
}
@media screen and (max-width: 1024px) {
  .header_nav {
    display: none;
  }
}
.header_nav a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #fff;
  font-family: "Marcellus", serif;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  padding: 8px 0;
  transition: color 0.4s;
}
.header_nav a span {
  font-family: "Zen Old Mincho", serif;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}
.header_nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: #B99A57;
  transform: translateX(-50%);
  transition: width 0.4s;
}
.header_nav a:hover {
  color: #E3CD9A;
}
.header_nav a:hover span {
  color: #B99A57;
}
.header_nav a:hover::after {
  width: 100%;
}

.header_right {
  display: flex;
  align-items: stretch;
}

@media screen and (max-width: 768px) {
  .header_tel_btn {
    display: none;
  }
}
.header_tel_btn a {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  padding: 0 30px;
  height: 66px;
  font-family: "Cormorant Garamond", serif;
  font-size: 19px;
  letter-spacing: 0.09em;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.4s;
}
.header_tel_btn a:hover {
  background: rgba(185, 154, 87, 0.12);
}
.header_tel_btn i {
  color: #B99A57;
  font-size: 13px;
}
/* 3行（番号／受付時間／注意書き）を高さ66pxに収めるため行間を詰める */
.header_tel_btn span {
  line-height: 1.35;
}
.header_tel_btn small {
  display: block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 9px;
  opacity: 0.55;
  letter-spacing: 0.16em;
  line-height: 1.5;
}
.header_tel_btn small.t_note {
  font-size: 8.5px;
  letter-spacing: 0.06em;
  opacity: 1;
  color: #E3CD9A;
  margin-top: 1px;
}

/* ブログボタン（電話ボタンの左隣・SPは非表示＝ハンバーガー内で担保） */
@media screen and (max-width: 768px) {
  .header_blog_btn {
    display: none;
  }
}
.header_blog_btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  height: 66px;
  padding: 0 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  font-family: "Zen Old Mincho", serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  transition: background 0.4s, color 0.4s;
}
.header_blog_btn a i {
  color: #B99A57;
  font-size: 14px;
  transition: color 0.4s;
}
.header_blog_btn a:hover {
  background: rgba(185, 154, 87, 0.12);
  color: #E3CD9A;
}
.header_blog_btn a:hover i {
  color: #E3CD9A;
}

/* グラデーション同士は transition が効かず、ホバーで瞬時に切り替わって“チカッ”と光って見える。
   明るいほうのグラデーションを疑似要素で重ねておき、その不透明度をフェードさせる。 */
.header_contact_btn a {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #8E7440, #B99A57);
  color: #0B121C;
  height: 66px;
  padding: 0 30px;
  font-family: "Zen Old Mincho", serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
}
.header_contact_btn a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #B99A57, #E3CD9A);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.header_contact_btn a:hover::before {
  opacity: 1;
}
.header_contact_btn a i,
.header_contact_btn a span {
  position: relative;
  z-index: 1;
}
.header_contact_btn a i {
  font-size: 15px;
}
@media screen and (max-width: 768px) {
  .header_contact_btn a {
    width: 56px;
    height: 54px;
    padding: 0;
    gap: 0;
  }
  .header_contact_btn a span {
    display: none;
  }
}

.hamburger {
  width: 68px;
  height: 66px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  z-index: 1100;
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.4s;
}
.hamburger:hover {
  background: rgba(185, 154, 87, 0.14);
}
@media screen and (max-width: 768px) {
  .hamburger {
    width: 56px;
    height: 54px;
  }
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: #fff;
  transition: 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}
.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* PC（1025px以上）はインラインナビがあるのでハンバーガーを隠す */
@media screen and (min-width: 1025px) {
  .hamburger {
    display: none;
  }
}
/* ---- グローバルメニュー ------------------------------------ */
.globalMenuSp {
  position: fixed;
  inset: 0;
  background: #0B121C;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.7s cubic-bezier(0.6, 0, 0.2, 1);
}
.globalMenuSp::before {
  content: "RUSTY";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Cormorant Garamond", serif;
  font-size: 26vw;
  color: rgba(185, 154, 87, 0.035);
  letter-spacing: 0.1em;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .globalMenuSp::before {
    font-size: 40vw;
  }
}
.globalMenuSp.active {
  opacity: 1;
  visibility: visible;
}
.globalMenuSp {
  /* 閉じるボタン（×） */
}
.globalMenuSp .gm_close {
  position: absolute;
  top: 34px;
  right: 34px;
  z-index: 5;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  background: none;
  cursor: pointer;
  font-size: 15px;
  transition: 0.4s;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .globalMenuSp .gm_close {
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
  }
}
.globalMenuSp .gm_close:hover {
  border-color: #B99A57;
  color: #B99A57;
  transform: rotate(90deg);
}
.globalMenuSp .header_menu {
  text-align: center;
  position: relative;
  z-index: 2;
}
.globalMenuSp .header_menu li {
  margin: 14px 0;
  opacity: 0;
  transform: translateY(20px);
}
@media screen and (max-width: 768px) {
  .globalMenuSp .header_menu li {
    margin: 11px 0;
  }
}
.globalMenuSp.active .header_menu li {
  animation: menuIn 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.globalMenuSp.active .header_menu li:nth-child(1) {
  animation-delay: 0.16s;
}
.globalMenuSp.active .header_menu li:nth-child(2) {
  animation-delay: 0.24s;
}
.globalMenuSp.active .header_menu li:nth-child(3) {
  animation-delay: 0.32s;
}
.globalMenuSp.active .header_menu li:nth-child(4) {
  animation-delay: 0.4s;
}
.globalMenuSp.active .header_menu li:nth-child(5) {
  animation-delay: 0.48s;
}
.globalMenuSp.active .header_menu li:nth-child(6) {
  animation-delay: 0.56s;
}
.globalMenuSp.active .header_menu li:nth-child(7) {
  animation-delay: 0.64s;
}
.globalMenuSp .header_menu li a {
  color: #fff;
  font-family: "Italiana", serif;
  font-size: 26px;
  letter-spacing: 0.16em;
  position: relative;
  padding-bottom: 10px;
  display: inline-block;
  line-height: 1.25;
}
@media screen and (max-width: 768px) {
  .globalMenuSp .header_menu li a {
    font-size: 21px;
  }
}
.globalMenuSp .header_menu li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: #B99A57;
  transition: 0.5s;
  transform: translateX(-50%);
}
.globalMenuSp .header_menu li a:hover::after {
  width: 100%;
}
.globalMenuSp .header_menu li span {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 10px;
  color: #B99A57;
  letter-spacing: 0.4em;
  margin-bottom: 3px;
}
.globalMenuSp .header_sns {
  display: flex;
  gap: 30px;
  margin-top: 52px;
  position: relative;
  z-index: 2;
}
.globalMenuSp .header_sns a {
  color: rgba(255, 255, 255, 0.55);
  font-size: 19px;
  transition: 0.4s;
}
.globalMenuSp .header_sns a:hover {
  color: #B99A57;
}

@keyframes menuIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ---- 下層 共通メインビジュアル ----------------------------- */
.lower_main {
  position: relative;
  height: 52vh;
  min-height: 380px;
  overflow: hidden;
  background: #0B121C;
}
@media screen and (max-width: 768px) {
  .lower_main {
    height: 38vh;
    min-height: 270px;
  }
}
.lower_main .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  animation: lmZoom 8s ease-out forwards;
}
.lower_main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(11, 18, 28, 0.9) 0%, rgba(11, 18, 28, 0.62) 48%, rgba(11, 18, 28, 0.32) 100%);
}

@keyframes lmZoom {
  to {
    transform: scale(1);
  }
}
.lower_frame {
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(185, 154, 87, 0.28);
  z-index: 3;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .lower_frame {
    inset: 14px;
  }
}
.lower_frame span {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid #B99A57;
}
.lower_frame span:nth-child(1) {
  top: -4.5px;
  left: -4.5px;
}
.lower_frame span:nth-child(2) {
  top: -4.5px;
  right: -4.5px;
}
.lower_frame span:nth-child(3) {
  bottom: -4.5px;
  left: -4.5px;
}
.lower_frame span:nth-child(4) {
  bottom: -4.5px;
  right: -4.5px;
}

.lower_head {
  position: absolute;
  left: 9%;
  top: 58%;
  transform: translateY(-50%);
  z-index: 4;
  /* 画像の下寄りに置きたいページ用（ブログ） */
}
.lower_head.low {
  top: 74%;
}
@media screen and (max-width: 768px) {
  .lower_head.low {
    top: 70%;
  }
}
@media screen and (max-width: 768px) {
  .lower_head {
    left: 24px;
    right: 24px;
    top: 56%;
  }
}
.lower_head .en {
  display: block;
  font-family: "Italiana", serif;
  font-size: clamp(40px, 5.6vw, 84px);
  color: #fff;
  letter-spacing: 0.1em;
  line-height: 1.05;
  margin-bottom: 14px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
@media screen and (max-width: 768px) {
  .lower_head .en {
    font-size: 38px;
    margin-bottom: 10px;
  }
}
.lower_head h1 {
  font-family: "Zen Old Mincho", serif;
  font-size: 13px;
  font-weight: 400;
  color: #B99A57;
  letter-spacing: 0.42em;
  padding-left: 0.42em;
}
@media screen and (max-width: 768px) {
  .lower_head h1 {
    font-size: 11px;
    letter-spacing: 0.34em;
  }
}

/* ============================================================
   _front-page.scss ── TOPページ
   FV / About / 事業内容(アコーディオン) / Recruit / 3コンテンツ / Blog
   ============================================================ */
/* ---- FV ---------------------------------------------------- */
#top_main {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #0B121C;
}
@media screen and (max-width: 768px) {
  #top_main {
    height: 88vh;
  }
}

.slide-images {
  position: absolute;
  inset: 0;
  background: #0B121C;
}

/* クロスフェード：切替中に背景が透けて暗くならないよう、
   退場スライドは新スライドが覆いきる（1.8秒）まで不透明のまま残し、
   その後だけ瞬時に消す。入場スライドは前面(z-index:2)で1.8秒かけて出す。

   ズーム（ケンバーンズ）は animation ではなく transition で持たせる。
   ※旧実装は .active が外れた瞬間に animation ごと消えて transform が
     等倍へ即時復帰していた。退場スライドは1.8秒間まだ不透明なので、
     その縮みが見えて“カクッ”となっていた。
   等倍への巻き戻しは 2.9秒 遅らせ、完全に隠れきってから行う（表示中は戻らない）。
   ズームは10.3秒＝1枚が見えている時間（表示7.6秒＋フェード2.7秒）とほぼ同じにして、
   消えるまで一定方向にゆっくり寄り続けるようにしている。 */
.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 0;
  transform: scale(1);
  transition: opacity 0.1s ease 2.6s, transform 1.6s cubic-bezier(0.4, 0, 0.2, 1) 2.9s;
}
.slide.active {
  opacity: 1;
  z-index: 1;
  transform: scale(1.065);
  transition: opacity 2.6s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 10.3s cubic-bezier(0.22, 0.55, 0.35, 1) 0s;
}

/* FVオーバーレイ
   ①ヘッダー帯：ロゴ・ナビの可読性を確保する薄い上グラデ
   ②左→右：コピーが載る左側を締め、右は写真が映えるよう段階を細かく取ってやんわり抜く */
#top_main::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(11, 18, 28, 0.58) 0%, rgba(11, 18, 28, 0.2) 14%, rgba(11, 18, 28, 0) 30%), linear-gradient(100deg, rgba(11, 18, 28, 0.97) 0%, rgba(11, 18, 28, 0.93) 16%, rgba(11, 18, 28, 0.84) 30%, rgba(11, 18, 28, 0.68) 42%, rgba(11, 18, 28, 0.48) 54%, rgba(11, 18, 28, 0.29) 66%, rgba(11, 18, 28, 0.15) 77%, rgba(11, 18, 28, 0.06) 88%, rgba(11, 18, 28, 0) 100%);
  /* SPはコピーが全幅に載るため、右まで抜かず全体をやわらかく落とす */
}
@media screen and (max-width: 768px) {
  #top_main::after {
    background: linear-gradient(to bottom, rgba(11, 18, 28, 0.5) 0%, rgba(11, 18, 28, 0.14) 16%, rgba(11, 18, 28, 0) 32%), linear-gradient(112deg, rgba(11, 18, 28, 0.95) 0%, rgba(11, 18, 28, 0.88) 26%, rgba(11, 18, 28, 0.74) 50%, rgba(11, 18, 28, 0.6) 74%, rgba(11, 18, 28, 0.5) 100%);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.top_main_text {
  position: absolute;
  top: 50%;
  left: 9%;
  transform: translateY(-50%);
  z-index: 3;
  max-width: 980px;
}
@media screen and (max-width: 768px) {
  .top_main_text {
    left: 8%;
    right: 8%;
  }
}
.top_main_text .sub {
  color: #B99A57;
  font-family: "Marcellus", serif;
  font-size: 10.5px;
  letter-spacing: 0.62em;
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  gap: 22px;
  opacity: 0;
  animation: fadeUp 2.6s cubic-bezier(0.16, 0.7, 0.2, 1) 1.5s forwards;
}
@media screen and (max-width: 768px) {
  .top_main_text .sub {
    font-size: 9px;
    letter-spacing: 0.44em;
    margin-bottom: 24px;
    gap: 12px;
  }
}
.top_main_text .sub::before {
  content: "";
  width: 62px;
  height: 1px;
  background: #B99A57;
}
@media screen and (max-width: 768px) {
  .top_main_text .sub::before {
    width: 34px;
  }
}

.top_main_headline {
  color: #fff;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 72px);
  line-height: 1.7;
  letter-spacing: 0.19em;
  margin-bottom: 26px;
  text-shadow: 0 2px 34px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 768px) {
  .top_main_headline {
    font-size: 26px;
    letter-spacing: 0.15em;
    line-height: 1.8;
    margin-bottom: 18px;
  }
}
.top_main_headline .ln {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
}
.top_main_headline .ln i {
  display: block;
  font-style: normal;
  transform: translateY(112%);
  opacity: 0;
  animation: lineUp 2.4s cubic-bezier(0.16, 0.72, 0.16, 1) forwards;
}
.top_main_headline .ln:nth-child(1) i {
  animation-delay: 1.8s;
}
.top_main_headline .ln:nth-child(2) i {
  animation-delay: 2.15s;
}
.top_main_headline .accent {
  background: linear-gradient(100deg, #E3CD9A 8%, #B99A57 52%, #8E7440 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes lineUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.fv_en {
  font-family: "Italiana", serif;
  color: rgba(255, 255, 255, 0.5);
  font-size: clamp(12px, 1.15vw, 16px);
  letter-spacing: 0.34em;
  margin-bottom: 30px;
  opacity: 0;
  animation: fadeUp 2.6s cubic-bezier(0.16, 0.7, 0.2, 1) 2.8s forwards;
}
@media screen and (max-width: 768px) {
  .fv_en {
    font-size: 11px;
    letter-spacing: 0.28em;
    margin-bottom: 20px;
  }
}

.top_main_writing {
  color: rgba(255, 255, 255, 0.72);
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(12.5px, 1.02vw, 15.5px);
  line-height: 2.7;
  letter-spacing: 0.2em;
  opacity: 0;
  animation: fadeUp 2.8s cubic-bezier(0.16, 0.7, 0.2, 1) 3.15s forwards;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 768px) {
  .top_main_writing {
    font-size: 11.5px;
    line-height: 2.35;
    letter-spacing: 0.14em;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ---- スライド連動コピー ------------------------------------ */
/* 全スライドのコピーをグリッドの同じセルに重ねる。
   ※以前は「表示中の1枚だけ position:relative」で高さを作っていたため、
     行数の違う文言に切り替わった瞬間に .cw の高さが変わり、
     .top_main_text（上下中央寄せ）ごと再センタリングされて
     退場中の文言が縦にズレて二重に見えていた。
     グリッド重ねなら高さは常に最も高い文言に固定され、ズレは起きない。 */
.cw {
  position: relative;
  display: grid;
}
@media screen and (max-width: 768px) {
  .cw {
    min-height: 240px;
  }
}
.cw .cp {
  grid-area: 1/1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* 文字は写真と違って背面が透けるため、同時にフェードさせると
     途中で新旧が半分ずつ重なって読めなくなる。
     前半（0〜1.1秒）で旧を消し、後半（1.1〜2.6秒）で新を出す“送り”にする。
     全体の尺2.6秒は写真のクロスフェードと同じなので、
     始まりと終わりは写真とぴったり揃う。 */
  transition: opacity 1.1s cubic-bezier(0.4, 0, 1, 1) 0s, visibility 0s linear 1.1s;
}
.cw .cp.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 1.5s cubic-bezier(0, 0, 0.2, 1) 1.1s, visibility 0s linear 0s;
}
.cw {
  /* 2枚目以降は文字を1行ずつ動かさない。
     ※以前は切り替わるたびに見出しがせり上がり、写真のフェードと別の動きに見えていた。
       中身は常に表示状態にしておき、.cp のフェードだけで入れ替える。 */
}
.cw .cp:not(:first-child) .top_main_headline .ln i {
  animation: none;
  transform: none;
  opacity: 1;
}
.cw .cp:not(:first-child) .fv_en,
.cw .cp:not(:first-child) .top_main_writing {
  animation: none;
  opacity: 1;
}

.fv_scroll {
  position: absolute;
  bottom: 56px;
  left: 9%;
  z-index: 4;
  color: rgba(255, 255, 255, 0.5);
  font-size: 9.5px;
  letter-spacing: 0.4em;
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  animation: fadeIn 1.6s ease 3s forwards;
}
@media screen and (max-width: 768px) {
  .fv_scroll {
    bottom: 38px;
    left: 8%;
  }
}
.fv_scroll::after {
  content: "";
  width: 70px;
  height: 1px;
  background: rgba(185, 154, 87, 0.6);
  animation: scrollLine 2.6s ease infinite;
}

@keyframes scrollLine {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  45% {
    transform: scaleX(1);
    transform-origin: left;
  }
  55% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}
/* ---- セクション見出し（TOP） ------------------------------- */
.sec_head {
  text-align: center;
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .sec_head {
    margin-bottom: 52px;
  }
}
.sec_head .en {
  display: block;
  font-family: "Italiana", serif;
  font-size: clamp(30px, 3.4vw, 50px);
  letter-spacing: 0.12em;
  color: #0B121C;
  margin-bottom: 14px;
  line-height: 1.15;
}
@media screen and (max-width: 768px) {
  .sec_head .en {
    font-size: 30px;
  }
}
.sec_head h2 {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(12.5px, 1.1vw, 15px);
  font-weight: 400;
  color: #8E7440;
  letter-spacing: 0.4em;
  position: relative;
  display: inline-block;
  padding-bottom: 26px;
  padding-left: 0.42em;
}
@media screen and (max-width: 768px) {
  .sec_head h2 {
    font-size: 11px;
    letter-spacing: 0.34em;
    padding-bottom: 20px;
  }
}
.sec_head h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 16px;
  background: #B99A57;
}
.sec_head.light .en {
  color: #fff;
}
.sec_head.light h2 {
  color: #B99A57;
}

/* ---- About ------------------------------------------------- */
#top_about {
  position: relative;
  background: #0B121C;
  padding: 40px 0 0;
  overflow: hidden;
}
#top_about::before {
  content: "About";
  position: absolute;
  top: 56px;
  left: 5%;
  z-index: 1;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13vw;
  line-height: 1;
  color: rgba(185, 154, 87, 0.045);
  letter-spacing: 0.02em;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  #top_about::before {
    font-size: 22vw;
    top: 24px;
  }
}

.about_wrap {
  display: flex;
  align-items: stretch;
  min-height: 820px;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1024px) {
  .about_wrap {
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  .about_wrap {
    min-height: auto;
  }
}

.top_about_contents {
  width: 50%;
  padding: 150px 4% 150px 9%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 1024px) {
  .top_about_contents {
    width: 100%;
    padding: 100px 8% 90px;
  }
}
@media screen and (max-width: 768px) {
  .top_about_contents {
    padding: 70px 24px 60px;
  }
}
.top_about_contents {
  /* 写真が未設定のときは右側が空くので本文を全幅に */
}
.about_wrap.no_ph .top_about_contents {
  width: 100%;
  padding-right: 9%;
}
@media screen and (max-width: 1024px) {
  .about_wrap.no_ph .top_about_contents {
    padding-right: 8%;
  }
}
@media screen and (max-width: 768px) {
  .about_wrap.no_ph .top_about_contents {
    padding-right: 24px;
  }
}
.top_about_contents {
  /* ※白い「About」（.en）は背景の装飾文字と重複するため出力を止めた（front-page.php）。
     スタイルは他の用途で使う可能性を考えて残している。 */
}
.top_about_contents .en {
  display: block;
  font-family: "Italiana", serif;
  font-size: clamp(29px, 3.2vw, 47px);
  color: #fff;
  letter-spacing: 0.12em;
  line-height: 1.15;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .top_about_contents .en {
    font-size: 29px;
  }
}
.top_about_contents .en-sub {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "Zen Old Mincho", serif;
  font-size: 11.5px;
  color: #B99A57;
  letter-spacing: 0.4em;
  margin-bottom: 38px;
}
.top_about_contents .en-sub::before {
  content: "";
  width: 40px;
  height: 1px;
  background: #B99A57;
}
.top_about_contents h3 {
  font-family: "Zen Old Mincho", serif;
  color: #fff;
  font-size: clamp(21px, 2.1vw, 32px);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.17em;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .top_about_contents h3 {
    font-size: 20px;
    line-height: 1.9;
    letter-spacing: 0.14em;
  }
}

.top_about_text {
  color: rgba(255, 255, 255, 0.76);
  font-size: 14.5px;
  line-height: 2.55;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .top_about_text {
    font-size: 13px;
    line-height: 2.35;
  }
}
.top_about_text {
  /* リード文は「へ。」のように末尾1〜2文字だけが次行に落ちると間延びするため、
     行長を均す（balance）＋対応ブラウザでは文節単位で折り返す（auto-phrase）。 */
}
.top_about_text .lead {
  color: #E3CD9A;
  font-family: "Zen Old Mincho", serif;
  font-size: 16px;
  display: block;
  margin-bottom: 22px;
  letter-spacing: 0.14em;
  text-wrap: balance;
  word-break: auto-phrase;
}

/* 事業内容・採用情報と同じ .btn_gold を使用（見た目・ホバー・マグネット挙動を統一） */
.top_about_btn {
  margin-top: 52px;
}
.top_about_btn a {
  display: inline-block;
}

/* 写真は最大4枚。入れた枚数ぶんだけ縦に分割して並べる（.c1〜.c4）。
   タブレット以下は縦長の細い帯になってしまうため、3枚以上は2×2に折り返す。 */
.top_about_image {
  width: 54%;
  position: relative;
  overflow: hidden;
  /* 高さを本文に合わせて伸ばすと1枚あたりが細長くなりすぎて写真が判別しにくいため、
     高さを固定して上下中央に置く（4分割時でおよそ 1:3 の比率） */
  height: 640px;
  align-self: center;
  margin-left: -4%;
  margin-top: 56px;
  margin-bottom: -56px;
  box-shadow: -40px 40px 90px rgba(0, 0, 0, 0.45);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: #0B121C;
}
@media screen and (min-width: 1441px) {
  .top_about_image {
    height: 700px;
  }
}
.top_about_image.c1 {
  grid-template-columns: 1fr;
}
.top_about_image.c2 {
  grid-template-columns: repeat(2, 1fr);
}
.top_about_image.c3 {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 1024px) {
  .top_about_image {
    width: 100%;
    height: 400px;
    margin: 0;
    box-shadow: none;
    grid-template-columns: repeat(2, 1fr);
  }
  .top_about_image.c1 {
    grid-template-columns: 1fr;
  }
  .top_about_image.c3, .top_about_image.c4 {
    grid-template-rows: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .top_about_image {
    height: 300px;
  }
}
.top_about_image .ab_col {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.top_about_image .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 1.6s ease;
}
.top_about_image:hover .bg {
  transform: scale(1);
}
.top_about_image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 18, 28, 0.85) 0%, rgba(11, 18, 28, 0.15) 45%, transparent 100%);
}
@media screen and (max-width: 1024px) {
  .top_about_image::after {
    background: linear-gradient(0deg, rgba(11, 18, 28, 0) 55%, #0B121C 100%);
  }
}
.top_about_image .caption {
  position: absolute;
  bottom: 44px;
  right: 44px;
  z-index: 3;
  text-align: right;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  letter-spacing: 0.28em;
  font-family: "Cormorant Garamond", serif;
}

#top_about .marquee .track span {
  color: rgba(185, 154, 87, 0.05);
}

/* ---- 事業内容（アコーディオン） --------------------------- */
/* ※背景の巨大な装飾文字「Business」は、見出し（.sec_head .en）と同じ文字が
   2つ並んで見えるため削除した。 */
#top_service {
  padding: 130px 0 120px;
  background: #141D2B;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #top_service {
    padding: 86px 0;
  }
}

.service_acc {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 44px;
  position: relative;
  z-index: 2;
  display: flex;
  gap: 2px;
  height: 580px;
}
@media screen and (min-width: 1441px) {
  .service_acc {
    max-width: 1560px;
  }
}
@media screen and (max-width: 1024px) {
  .service_acc {
    height: auto;
    flex-direction: column;
    padding: 0 24px;
  }
}

.svc {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  background: #0B121C;
  transition: flex 0.7s cubic-bezier(0.22, 0.8, 0.2, 1);
}
@media screen and (max-width: 1024px) {
  .svc {
    flex: none;
    height: 98px;
    transition: height 0.7s cubic-bezier(0.22, 0.8, 0.2, 1);
  }
}
@media screen and (max-width: 768px) {
  .svc {
    height: 80px;
  }
}
.svc.on {
  flex: 4.4;
}
@media screen and (max-width: 1024px) {
  .svc.on {
    flex: none;
    height: 430px;
  }
}
@media screen and (max-width: 768px) {
  .svc.on {
    height: 370px;
  }
}
.svc .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.12);
  filter: grayscale(0.6);
  transition: transform 1.2s cubic-bezier(0.22, 0.8, 0.2, 1), filter 1s ease;
}
.svc.on .bg {
  transform: scale(1);
  filter: grayscale(0);
}
.svc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 18, 28, 0.95) 0%, rgba(11, 18, 28, 0.6) 55%, rgba(11, 18, 28, 0.45) 100%);
  transition: 0.55s;
}
.svc.on::after {
  background: linear-gradient(to top, rgba(11, 18, 28, 0.93) 0%, rgba(11, 18, 28, 0.28) 62%, rgba(11, 18, 28, 0.1) 100%);
}

/* 閉じている状態（縦組み）
   閉→開のときは即座に消す。開→閉（隣を開いたとき）は素早く戻す。 */
.svc_cl {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 40px 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  opacity: 1;
  transition: opacity 0.45s ease 0.15s;
}
@media screen and (max-width: 1024px) {
  .svc_cl {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0;
    gap: 22px;
  }
}
@media screen and (max-width: 768px) {
  .svc_cl {
    gap: 16px;
  }
}
.svc_cl .n {
  font-family: "Italiana", serif;
  font-size: 21px;
  color: #B99A57;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .svc_cl .n {
    font-size: 17px;
  }
}
.svc_cl .vt {
  writing-mode: vertical-rl;
  font-family: "Zen Old Mincho", serif;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.36em;
  white-space: nowrap;
}
@media screen and (max-width: 1024px) {
  .svc_cl .vt {
    writing-mode: horizontal-tb;
    letter-spacing: 0.26em;
  }
}
@media screen and (max-width: 768px) {
  .svc_cl .vt {
    font-size: 13.5px;
    letter-spacing: 0.22em;
  }
}

.svc.on .svc_cl {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.svc_op {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  padding: 50px 46px;
  width: 100%;
  max-width: 540px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@media screen and (max-width: 1024px) {
  .svc_op {
    padding: 36px 30px;
    max-width: none;
  }
}
@media screen and (max-width: 768px) {
  .svc_op {
    padding: 30px 24px;
  }
}
.svc_op .h_en {
  font-family: "Italiana", serif;
  color: #B99A57;
  font-size: 13px;
  letter-spacing: 0.3em;
  display: block;
  margin-bottom: 10px;
}
.svc_op h3 {
  font-family: "Zen Old Mincho", serif;
  color: #fff;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.16em;
  margin-bottom: 18px;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .svc_op h3 {
    font-size: 22px;
    white-space: normal;
  }
}
.svc_op .divider {
  width: 44px;
  height: 1px;
  background: #B99A57;
  margin-bottom: 20px;
}
.svc_op p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12.5px;
  line-height: 2.2;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 768px) {
  .svc_op p {
    font-size: 12px;
  }
}

.svc.on .svc_op {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s ease 0.35s, transform 1s cubic-bezier(0.2, 0.8, 0.3, 1) 0.35s;
}

.svc .ghost {
  position: absolute;
  top: 30px;
  right: 32px;
  z-index: 3;
  font-family: "Italiana", serif;
  font-size: 74px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.09);
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 1024px) {
  .svc .ghost {
    font-size: 58px;
    top: 24px;
    right: 26px;
  }
}
@media screen and (max-width: 768px) {
  .svc .ghost {
    font-size: 48px;
    top: 20px;
    right: 20px;
  }
}

.svc.on .ghost {
  opacity: 1;
  transition: opacity 0.8s ease 0.4s;
}

.svc_hint {
  text-align: center;
  margin-top: 38px;
  position: relative;
  z-index: 2;
  font-family: "Marcellus", serif;
  font-size: 10px;
  letter-spacing: 0.34em;
  color: rgba(255, 255, 255, 0.38);
}
@media screen and (max-width: 768px) {
  .svc_hint {
    margin-top: 26px;
  }
}
.svc_hint .sp_h {
  display: none;
}
@media screen and (max-width: 768px) {
  .svc_hint .pc_h {
    display: none;
  }
  .svc_hint .sp_h {
    display: inline;
  }
}

.svc_more {
  text-align: center;
  margin-top: 44px;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .svc_more {
    margin-top: 32px;
  }
}

/* ---- Recruit ----------------------------------------------- */
#top_recruit {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 180px 0;
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  #top_recruit {
    background-attachment: scroll;
    padding: 130px 0;
  }
}
@media screen and (max-width: 768px) {
  #top_recruit {
    padding: 110px 0;
    background-attachment: scroll;
  }
}
#top_recruit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(11, 18, 28, 0.94) 0%, rgba(11, 18, 28, 0.8) 55%, rgba(11, 18, 28, 0.6) 100%);
}
#top_recruit .vertical_en {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-family: "Italiana", serif;
  font-size: clamp(60px, 9vw, 150px);
  line-height: 0.94;
  color: rgba(185, 154, 87, 0.14);
  letter-spacing: 0.02em;
  text-align: right;
  pointer-events: none;
}
@media screen and (max-width: 1024px) {
  #top_recruit .vertical_en {
    opacity: 0.5;
  }
}
@media screen and (max-width: 768px) {
  #top_recruit .vertical_en {
    font-size: 64px;
    right: 4%;
    opacity: 0.6;
  }
}

.top_recruit_content {
  position: relative;
  z-index: 2;
  text-align: left;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 44px 0 9%;
}
@media screen and (max-width: 1024px) {
  .top_recruit_content {
    padding-left: 6%;
  }
}
@media screen and (max-width: 768px) {
  .top_recruit_content {
    padding: 0 24px;
  }
}
.top_recruit_content .inner_w {
  max-width: 620px;
}
.top_recruit_content .en {
  display: block;
  font-family: "Italiana", serif;
  font-size: clamp(31px, 3.6vw, 54px);
  color: #fff;
  letter-spacing: 0.12em;
  line-height: 1.15;
  margin-bottom: 14px;
}
@media screen and (max-width: 768px) {
  .top_recruit_content .en {
    font-size: 31px;
  }
}
.top_recruit_content .en-sub {
  display: block;
  font-family: "Zen Old Mincho", serif;
  font-size: 11.5px;
  color: #B99A57;
  letter-spacing: 0.42em;
  margin-bottom: 34px;
}
.top_recruit_content h2 {
  font-family: "Zen Old Mincho", serif;
  color: #fff;
  font-size: clamp(21px, 2.2vw, 33px);
  font-weight: 400;
  line-height: 1.95;
  margin-bottom: 34px;
  letter-spacing: 0.17em;
}
.top_recruit_content p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 2.55;
  letter-spacing: 0.11em;
  margin-bottom: 56px;
}

.btn_gold {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #B99A57;
  color: #B99A57;
  background: transparent;
  padding: 18px 58px;
  font-size: 11px;
  letter-spacing: 0.28em;
  font-family: inherit;
  cursor: pointer;
  transition: 0.6s;
  position: relative;
  overflow: hidden;
  min-height: 48px;
}
.btn_gold span {
  position: relative;
  z-index: 2;
  transition: color 0.6s;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.btn_gold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #8E7440, #E3CD9A);
  transform: translateX(-101%);
  transition: transform 0.6s cubic-bezier(0.6, 0, 0.2, 1);
}
.btn_gold:hover::before {
  transform: translateX(0);
}
.btn_gold:hover span {
  color: #0B121C;
}

/* ---- 3コンテンツ（施工事例／会社概要／ブログ） -------------- */
#top_three {
  position: relative;
  background: #F6F3ED;
  padding: 130px 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #top_three {
    padding: 86px 0;
  }
}
#top_three::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44%;
  height: 100%;
  background: linear-gradient(140deg, rgba(185, 154, 87, 0.09), transparent 70%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* 既定（2枚）は 1.15fr / .85fr の非対称。
   3枚になったときは .c3 が付くので等幅3カラムへ切り替える。 */
.top_three_container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 44px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}
@media screen and (min-width: 1441px) {
  .top_three_container {
    max-width: 1340px;
  }
}
@media screen and (max-width: 1024px) {
  .top_three_container {
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 640px;
  }
}
@media screen and (max-width: 768px) {
  .top_three_container {
    padding: 0 24px;
  }
}
.top_three_container.c3 {
  max-width: 1320px;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
@media screen and (min-width: 1441px) {
  .top_three_container.c3 {
    max-width: 1440px;
    gap: 40px;
  }
}
@media screen and (max-width: 1024px) {
  .top_three_container.c3 {
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 640px;
  }
}

.top_three {
  background: #fff;
  overflow: hidden;
  transition: 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
  position: relative;
}
.top_three::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  z-index: 5;
  pointer-events: none;
  transition: 0.7s;
}
.top_three:hover {
  transform: translateY(-12px);
  box-shadow: 0 26px 60px rgba(34, 40, 47, 0.16);
}
.top_three:hover::before {
  border-color: rgba(185, 154, 87, 0.45);
}
.top_three:nth-child(2) {
  margin-top: 90px;
}
@media screen and (max-width: 1024px) {
  .top_three:nth-child(2) {
    margin-top: 0;
  }
}
.top_three {
  /* 3枚並びは段差を浅くして、3枚目が下に落ちすぎないようにする */
}
.c3 .top_three:nth-child(2) {
  margin-top: 44px;
}
@media screen and (max-width: 1024px) {
  .c3 .top_three:nth-child(2) {
    margin-top: 0;
  }
}
.c3 .top_three:nth-child(3) {
  margin-top: 88px;
}
@media screen and (max-width: 1024px) {
  .c3 .top_three:nth-child(3) {
    margin-top: 0;
  }
}

/* 登場アニメーションは親（コンテナ）で一括発火させる。
   カードごとに監視すると、段差のぶん画面に入る位置がずれてしまい、
   順番がスクロール速度で変わる。親なら常に3枚同時に発火するので、
   下の transition-delay だけで必ず左から順に出る。 */
.top_three_container.scroll-in .top_three.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* PC表示のみ左から順にわずかに遅らせる
   （タブレット・SPは縦積みで1枚ずつ画面に入るため時間差は不要） */
@media screen and (min-width: 1025px) {
  .top_three_container .top_three:nth-child(2) {
    transition-delay: 0.14s;
  }
  .top_three_container .top_three:nth-child(3) {
    transition-delay: 0.28s;
  }
}
.top_three_bg {
  height: 400px;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .top_three_bg {
    height: 300px;
  }
}
@media screen and (max-width: 768px) {
  .top_three_bg {
    height: 230px;
  }
}
.top_three_bg {
  /* 3枚並びは1枚あたりの幅が狭くなるので写真も浅くする */
}
.c3 .top_three_bg {
  height: 300px;
}
@media screen and (max-width: 1024px) {
  .c3 .top_three_bg {
    height: 300px;
  }
}
@media screen and (max-width: 768px) {
  .c3 .top_three_bg {
    height: 230px;
  }
}
.top_three_bg .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 1.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.top_three_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 28, 0.32);
  transition: 0.7s;
}

.top_three:hover .top_three_bg .bg {
  transform: scale(1.12);
}

.top_three:hover .top_three_bg::after {
  background: rgba(11, 18, 28, 0.06);
}

.top_three:hover .top_three_bg.reveal .bg {
  transform: scale(1.14);
  transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.3, 1) 0s;
}

.top_three_contents {
  padding: 44px 38px 26px;
}
@media screen and (max-width: 768px) {
  .top_three_contents {
    padding: 32px 26px 20px;
  }
}
.top_three_contents .en {
  display: block;
  font-family: "Italiana", serif;
  font-size: 19px;
  letter-spacing: 0.28em;
  color: #8E7440;
  margin-bottom: 8px;
  line-height: 1.2;
}
@media screen and (max-width: 768px) {
  .top_three_contents .en {
    font-size: 17px;
  }
}
.top_three_contents h3 {
  font-family: "Zen Old Mincho", serif;
  font-size: 24px;
  font-weight: 500;
  color: #0B121C;
  letter-spacing: 0.16em;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .top_three_contents h3 {
    font-size: 20px;
  }
}
.top_three_contents p {
  font-size: 13px;
  color: #5C626B;
  line-height: 2.25;
  letter-spacing: 0.08em;
}
.top_three_contents {
  /* 3枚並びは幅が狭いので余白と見出しを一段詰める */
}
.c3 .top_three_contents {
  padding: 34px 30px 22px;
}
@media screen and (max-width: 768px) {
  .c3 .top_three_contents {
    padding: 32px 26px 20px;
  }
}
.c3 .top_three_contents h3 {
  font-size: 21px;
  margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
  .c3 .top_three_contents h3 {
    font-size: 20px;
  }
}

.t3_list {
  margin-top: 24px;
  border-top: 1px solid rgba(34, 40, 47, 0.12);
  padding-top: 20px;
}
@media screen and (max-width: 768px) {
  .t3_list {
    margin-top: 18px;
    padding-top: 16px;
  }
}
.t3_list li {
  font-size: 12px;
  color: #63686F;
  letter-spacing: 0.1em;
  line-height: 2.1;
  padding-left: 18px;
  position: relative;
}
.t3_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 7px;
  height: 1px;
  background: #B99A57;
}

.top_three_btn {
  padding: 0 38px 40px;
}
@media screen and (max-width: 768px) {
  .top_three_btn {
    padding: 0 26px 30px;
  }
}
.c3 .top_three_btn {
  padding: 0 30px 32px;
}
@media screen and (max-width: 768px) {
  .c3 .top_three_btn {
    padding: 0 26px 30px;
  }
}
.top_three_btn button {
  width: 100%;
  border: 1px solid rgba(34, 40, 47, 0.28);
  background: transparent;
  color: #0B121C;
  padding: 15px;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  font-family: inherit;
  cursor: pointer;
  transition: 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
}

.top_three:hover .top_three_btn button {
  background: #0B121C;
  color: #fff;
  border-color: #0B121C;
}

#top_three .marquee .track span {
  color: rgba(34, 40, 47, 0.045);
}

/* ---- Blog（最新記事） -------------------------------------- */
/* カード自体は _blog.scss の .bl_grid / .bl 系をそのまま使用。
   3コンテンツ（$paper）とフッター（ダーク）の間に挟まるため、
   背景は $paper2 にして境目を作る。 */
#top_blog {
  background: #EDE8DF;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  #top_blog {
    padding: 90px 0;
  }
}
@media screen and (max-width: 768px) {
  #top_blog {
    padding: 72px 0;
  }
}
#top_blog::before {
  content: "Blog";
  position: absolute;
  top: 40px;
  right: 4%;
  z-index: 0;
  font-family: "Italiana", serif;
  font-size: 12vw;
  line-height: 1;
  color: rgba(34, 40, 47, 0.035);
  letter-spacing: 0.06em;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  #top_blog::before {
    font-size: 22vw;
    top: 24px;
  }
}
#top_blog .inner {
  position: relative;
  z-index: 2;
}
#top_blog {
  /* TOPでは抜粋を出さず、写真・日付・タイトルだけの軽い見せ方にする */
}
#top_blog .bl_tx {
  padding-bottom: 26px;
}
@media screen and (max-width: 768px) {
  #top_blog .bl_tx {
    padding-bottom: 22px;
  }
}

.top_blog_more {
  text-align: center;
  margin-top: 56px;
}
@media screen and (max-width: 768px) {
  .top_blog_more {
    margin-top: 38px;
  }
}

/* ============================================================
   _service.scss ── 事業内容（下層）
   ============================================================ */
.svc_lead {
  max-width: 820px;
  margin: 0 auto 84px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .svc_lead {
    margin-bottom: 52px;
  }
}
.svc_lead h3 {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 400;
  letter-spacing: 0.17em;
  line-height: 1.95;
  margin-bottom: 26px;
  color: #0B121C;
}
@media screen and (max-width: 768px) {
  .svc_lead h3 {
    font-size: 19px;
    line-height: 1.95;
  }
}
.svc_lead p {
  font-size: 13.5px;
  line-height: 2.5;
  color: #5E646E;
  letter-spacing: 0.09em;
}
@media screen and (max-width: 768px) {
  .svc_lead p {
    font-size: 12.5px;
    line-height: 2.35;
  }
}

.svc_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 2px;
  background: #fff;
}
@media screen and (max-width: 1024px) {
  .svc_row {
    grid-template-columns: 1fr;
  }
}
.svc_row:nth-child(even) .svc_ph {
  order: -1;
}
@media screen and (max-width: 1024px) {
  .svc_row:nth-child(even) .svc_ph {
    order: 0;
  }
}
.svc_row {
  /* 写真が未設定のとき。2分割のままだと片側が白い空箱として残るため1カラムに畳む */
}
.svc_row.no_ph {
  grid-template-columns: 1fr;
}

.svc_ph {
  position: relative;
  min-height: 420px;
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  .svc_ph {
    min-height: 300px;
  }
}
@media screen and (max-width: 768px) {
  .svc_ph {
    min-height: 220px;
  }
}
.svc_ph .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.svc_ph .no {
  position: absolute;
  top: 26px;
  left: 28px;
  z-index: 2;
  font-family: "Italiana", serif;
  font-size: 56px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 768px) {
  .svc_ph .no {
    font-size: 42px;
    top: 18px;
    left: 20px;
  }
}

.svc_row:hover .svc_ph .bg {
  transform: scale(1.11);
}

.svc_tx {
  padding: 60px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 1024px) {
  .svc_tx {
    padding: 44px 30px;
  }
}
@media screen and (max-width: 768px) {
  .svc_tx {
    padding: 34px 24px 40px;
  }
}
.svc_tx .eng {
  font-family: "Italiana", serif;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: #8E7440;
  display: block;
  margin-bottom: 10px;
}
.svc_tx h3 {
  font-family: "Zen Old Mincho", serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.17em;
  margin-bottom: 20px;
  color: #0B121C;
}
@media screen and (max-width: 768px) {
  .svc_tx h3 {
    font-size: 21px;
  }
}
.svc_tx .line {
  width: 42px;
  height: 1px;
  background: #B99A57;
  margin-bottom: 22px;
}
.svc_tx p {
  font-size: 13px;
  line-height: 2.4;
  color: #5E646E;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 768px) {
  .svc_tx p {
    font-size: 12.5px;
    line-height: 2.3;
  }
}

.svc_tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.svc_tags span {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  padding: 5px 14px;
  border: 1px solid rgba(34, 40, 47, 0.18);
  color: #5C626B;
  line-height: 1.5;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .svc_tags span {
    font-size: 10.5px;
    letter-spacing: 0.02em;
    padding: 4px 11px;
  }
}
@media screen and (max-width: 768px) {
  .svc_tags {
    gap: 6px 7px;
    margin-top: 16px;
  }
}

/* 下部CTA
   text-wrap:balance で行の文字数を均等化し、孤立した1〜2文字の行を防ぐ */
.cta_text {
  font-size: 13.5px;
  line-height: 2.5;
  color: #5E646E;
  letter-spacing: 0.09em;
  margin-bottom: 40px;
  text-wrap: balance;
}
@media screen and (max-width: 768px) {
  .cta_text {
    font-size: 12px;
    line-height: 2.1;
    letter-spacing: 0.02em;
  }
}

/* ============================================================
   _archive-works.scss ── 施工事例 一覧 / 詳細
   ============================================================ */
/* ---- 絞り込み ---------------------------------------------- */
.wk_filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 54px;
}
@media screen and (max-width: 768px) {
  .wk_filter {
    gap: 6px;
    margin-bottom: 36px;
  }
}
.wk_filter a {
  background: none;
  border: 1px solid rgba(34, 40, 47, 0.2);
  color: #5C626B;
  padding: 11px 24px;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-family: inherit;
  cursor: pointer;
  transition: 0.4s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .wk_filter a {
    padding: 10px 16px;
    font-size: 10.5px;
  }
}
.wk_filter a.on, .wk_filter a:hover {
  background: #0B121C;
  border-color: #0B121C;
  color: #fff;
}

/* ---- 一覧グリッド ------------------------------------------ */
.wk_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media screen and (max-width: 1024px) {
  .wk_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media screen and (max-width: 768px) {
  .wk_grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.wk {
  background: #fff;
  overflow: hidden;
  transition: 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
  cursor: pointer;
  display: block;
}
.wk:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 56px rgba(34, 40, 47, 0.15);
}

.wk_ph {
  height: 250px;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 768px) {
  .wk_ph {
    height: 210px;
  }
}
.wk_ph .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  transition: transform 1.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.wk:hover .wk_ph .bg {
  transform: scale(1.12);
}

.wk_cat {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.16em;
  background: rgba(11, 18, 28, 0.86);
  color: #E3CD9A;
  padding: 5px 13px;
}

.wk_tx {
  padding: 26px 26px 30px;
}
@media screen and (max-width: 768px) {
  .wk_tx {
    padding: 22px 22px 26px;
  }
}
.wk_tx h3 {
  font-family: "Zen Old Mincho", serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.13em;
  margin-bottom: 10px;
  color: #0B121C;
}
@media screen and (max-width: 768px) {
  .wk_tx h3 {
    font-size: 16px;
  }
}
.wk_tx .meta {
  font-size: 11px;
  color: #666C75;
  letter-spacing: 0.1em;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.wk_tx .meta i {
  color: #8E7440;
  margin-right: 6px;
  font-size: 10px;
}

.wk_empty {
  text-align: center;
  font-size: 13.5px;
  color: #5E646E;
  letter-spacing: 0.09em;
  padding: 40px 0;
}

/* ---- ページャー -------------------------------------------- */
.pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .pager {
    margin-top: 44px;
  }
}
.pager a, .pager span, .pager .page, .pager .current {
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Marcellus", serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  border: 1px solid rgba(34, 40, 47, 0.18);
  color: #5C626B;
  transition: 0.4s;
}
.pager .current, .pager .cur {
  background: #0B121C;
  border-color: #0B121C;
  color: #fff;
}
.pager a:hover {
  border-color: #B99A57;
  color: #8E7440;
}

/* wp-pagenavi 併用時 */
.wp-pagenavi {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wp-pagenavi a, .wp-pagenavi span {
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Marcellus", serif;
  font-size: 12px;
  border: 1px solid rgba(34, 40, 47, 0.18) !important;
  color: #5C626B;
  transition: 0.4s;
}
.wp-pagenavi span.current {
  background: #0B121C;
  border-color: #0B121C !important;
  color: #fff;
}
.wp-pagenavi a:hover {
  border-color: #B99A57 !important;
  color: #8E7440;
}

/* ============================================================
   施工事例 詳細
   ============================================================ */
.wk_head {
  max-width: 900px;
  margin: 0 auto 50px;
  text-align: center;
}
.wk_head .wk_cats {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.wk_head .wk_cats a {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  background: #0B121C;
  color: #E3CD9A;
  padding: 5px 14px;
  transition: 0.4s;
}
.wk_head .wk_cats a:hover {
  background: #8E7440;
}
.wk_head h2 {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #0B121C;
  margin-bottom: 20px;
}
.wk_head .wk_meta {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: #666C75;
  letter-spacing: 0.1em;
}
.wk_head .wk_meta i {
  color: #8E7440;
  margin-right: 7px;
  font-size: 11px;
}
.wk_head .wk_lead {
  margin-top: 26px;
  font-size: 13.5px;
  line-height: 2.5;
  color: #5E646E;
  letter-spacing: 0.09em;
}

.wk_main {
  max-width: 1000px;
  margin: 0 auto 60px;
  height: 520px;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .wk_main {
    height: 56vw;
    margin-bottom: 40px;
  }
}
.wk_main .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* ※ビフォーアフターは廃止（文言と画像のみの構成に変更） */
.wk_body {
  max-width: 820px;
  margin: 0 auto 60px;
  font-size: 14px;
  line-height: 2.5;
  color: #414852;
  letter-spacing: 0.08em;
}
.wk_body p {
  margin-bottom: 1.6em;
}
.wk_body img {
  margin: 1.6em auto;
}
.wk_body h2, .wk_body h3 {
  font-family: "Zen Old Mincho", serif;
  color: #0B121C;
  letter-spacing: 0.12em;
  margin: 1.6em 0 0.8em;
}

.wk_gallery {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media screen and (max-width: 768px) {
  .wk_gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
.wk_gallery li img {
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
  cursor: zoom-in;
  transition: opacity 0.4s;
}
.wk_gallery li img:hover {
  opacity: 0.85;
}

.wk_back {
  text-align: center;
  margin-top: 64px;
}

/* ============================================================
   _blog.scss ── ブログ 一覧 / 詳細
   ※ページャー（.pager）は _archive-works.scss の共通指定を使用
   ============================================================ */
/* ---- 絞り込み ---------------------------------------------- */
.bl_filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 54px;
}
@media screen and (max-width: 768px) {
  .bl_filter {
    gap: 6px;
    margin-bottom: 36px;
  }
}
.bl_filter a {
  background: none;
  border: 1px solid rgba(34, 40, 47, 0.2);
  color: #5C626B;
  padding: 11px 24px;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-family: inherit;
  cursor: pointer;
  transition: 0.4s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .bl_filter a {
    padding: 10px 16px;
    font-size: 10.5px;
  }
}
.bl_filter a.on, .bl_filter a:hover {
  background: #0B121C;
  border-color: #0B121C;
  color: #fff;
}

/* ---- 一覧グリッド ------------------------------------------ */
.bl_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media screen and (max-width: 1024px) {
  .bl_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media screen and (max-width: 768px) {
  .bl_grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.bl {
  background: #fff;
  overflow: hidden;
  transition: 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.bl:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 56px rgba(34, 40, 47, 0.15);
}

.bl_ph {
  height: 230px;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 768px) {
  .bl_ph {
    height: 200px;
  }
}
.bl_ph .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  transition: transform 1.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.bl:hover .bl_ph .bg {
  transform: scale(1.12);
}

.bl_cat {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.16em;
  background: rgba(11, 18, 28, 0.86);
  color: #E3CD9A;
  padding: 5px 13px;
}

.bl_tx {
  padding: 24px 26px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .bl_tx {
    padding: 20px 22px 24px;
  }
}
.bl_tx h3 {
  font-family: "Zen Old Mincho", serif;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.75;
  margin-bottom: 12px;
  color: #0B121C;
}
@media screen and (max-width: 768px) {
  .bl_tx h3 {
    font-size: 15.5px;
  }
}

.bl_date {
  display: block;
  font-size: 11px;
  color: #8E7440;
  letter-spacing: 0.2em;
  margin-bottom: 10px;
}

.bl_ex {
  font-size: 12.5px;
  line-height: 2.1;
  color: #5C626B;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.bl_more {
  margin-top: auto;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: #0B121C;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bl_more i {
  font-size: 10px;
  color: #8E7440;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.bl:hover .bl_more i {
  transform: translateX(7px);
}

.bl_empty {
  text-align: center;
  font-size: 13.5px;
  color: #5E646E;
  letter-spacing: 0.09em;
  padding: 40px 0;
}

/* ============================================================
   ブログ 詳細
   ============================================================ */
.bl_head {
  max-width: 900px;
  margin: 0 auto 44px;
  text-align: center;
}
.bl_head .bl_hmeta {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.bl_head .bl_date {
  margin-bottom: 0;
  font-size: 12px;
}
.bl_head .bl_cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bl_head .bl_cats a {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  background: #0B121C;
  color: #E3CD9A;
  padding: 5px 14px;
  transition: 0.4s;
}
.bl_head .bl_cats a:hover {
  background: #8E7440;
}
.bl_head h2 {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(21px, 2.3vw, 30px);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.75;
  color: #0B121C;
}
/* リード文（ACF：blog_lead） */
.bl_head .bl_lead {
  margin-top: 24px;
  font-size: 13.5px;
  line-height: 2.5;
  color: #5E646E;
  letter-spacing: 0.09em;
}

.bl_main {
  max-width: 1000px;
  margin: 0 auto 60px;
  height: 480px;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .bl_main {
    height: 54vw;
    margin-bottom: 40px;
  }
}
.bl_main .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.bl_body {
  max-width: 820px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 2.5;
  color: #414852;
  letter-spacing: 0.08em;
}
.bl_body p {
  margin-bottom: 1.6em;
}
.bl_body img {
  margin: 1.6em auto;
}
.bl_body h2, .bl_body h3, .bl_body h4 {
  font-family: "Zen Old Mincho", serif;
  color: #0B121C;
  letter-spacing: 0.12em;
  margin: 1.8em 0 0.8em;
  line-height: 1.8;
}
.bl_body h2 {
  font-size: 20px;
  padding-left: 16px;
  border-left: 2px solid #B99A57;
}
.bl_body h3 {
  font-size: 17px;
}
.bl_body ul, .bl_body ol {
  margin: 0 0 1.6em 1.4em;
}
.bl_body ul li, .bl_body ol li {
  list-style: disc;
  margin-bottom: 0.4em;
}
.bl_body ol li {
  list-style: decimal;
}
.bl_body a {
  color: #8E7440;
  text-decoration: underline;
  transition: 0.4s;
}
.bl_body a:hover {
  color: #B99A57;
}
.bl_body blockquote {
  margin: 1.6em 0;
  padding: 22px 26px;
  background: #EDE8DF;
  border-left: 2px solid #B99A57;
  font-size: 13.5px;
  color: #5E646E;
}

/* ---- ギャラリー（ACF：blog_gallery01〜06） ------------------ */
.bl_gallery {
  max-width: 820px;
  margin: 50px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media screen and (max-width: 768px) {
  .bl_gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
.bl_gallery li img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity 0.4s;
}
.bl_gallery li img:hover {
  opacity: 0.85;
}

/* ---- タグ（ACF：blog_tags） -------------------------------- */
.bl_tags {
  max-width: 820px;
  margin: 40px auto 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .bl_tags {
    gap: 6px 7px;
    margin-top: 30px;
  }
}
.bl_tags span {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  padding: 5px 14px;
  border: 1px solid rgba(34, 40, 47, 0.18);
  color: #5C626B;
  line-height: 1.5;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .bl_tags span {
    letter-spacing: 0.02em;
    padding: 4px 11px;
  }
}

/* ---- 前後記事 ---------------------------------------------- */
.bl_nav {
  max-width: 820px;
  margin: 70px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .bl_nav {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 50px;
  }
}
.bl_nav a {
  border: 1px solid rgba(34, 40, 47, 0.16);
  padding: 20px 24px;
  transition: 0.45s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bl_nav a:hover {
  border-color: #B99A57;
  background: #fff;
}
.bl_nav .en {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: #8E7440;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.bl_nav .en i {
  font-size: 9px;
}
.bl_nav em {
  font-family: "Zen Old Mincho", serif;
  font-style: normal;
  font-size: 13.5px;
  letter-spacing: 0.1em;
  line-height: 1.8;
  color: #0B121C;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.bl_nav .nx {
  text-align: right;
  align-items: flex-end;
}
@media screen and (max-width: 768px) {
  .bl_nav .empty {
    display: none;
  }
}

.bl_back {
  text-align: center;
  margin-top: 64px;
}

/* ============================================================
   _company.scss ── 会社概要（代表挨拶 / 会社情報 / 沿革）
   ============================================================ */
/* ---- 代表挨拶 ---------------------------------------------- */
.greet {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 70px;
  align-items: center;
  margin-bottom: 110px;
}
@media screen and (max-width: 1024px) {
  .greet {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}
@media screen and (max-width: 768px) {
  .greet {
    margin-bottom: 70px;
    gap: 34px;
  }
}
/* 代表写真が未設定のとき。2カラムのままだと右の380pxが空白として残るため1カラムに畳む。
   ただし全幅まで伸ばすと1行が長くなりすぎて読みにくいので、本文の幅は制限する。 */
.greet.no_ph {
  grid-template-columns: minmax(0, 820px);
}

.greet_tx h3 {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(20px, 2.2vw, 31px);
  font-weight: 400;
  letter-spacing: 0.17em;
  line-height: 1.95;
  margin-bottom: 30px;
  color: #0B121C;
}
@media screen and (max-width: 768px) {
  .greet_tx h3 {
    font-size: 19px;
    line-height: 1.95;
  }
}
.greet_tx p {
  font-size: 13.5px;
  line-height: 2.5;
  color: #5E646E;
  letter-spacing: 0.09em;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .greet_tx p {
    font-size: 12.5px;
    line-height: 2.35;
  }
}

.greet_sign {
  margin-top: 34px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.greet_sign .ttl {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #666C75;
}
.greet_sign .nm {
  font-family: "Zen Old Mincho", serif;
  font-size: 21px;
  letter-spacing: 0.2em;
  color: #0B121C;
}
@media screen and (max-width: 768px) {
  .greet_sign .nm {
    font-size: 18px;
  }
}

.greet_ph {
  position: relative;
}
@media screen and (max-width: 1024px) {
  .greet_ph {
    max-width: 420px;
  }
}
.greet_ph .bg {
  height: 460px;
  background-size: cover;
  background-position: center;
}
@media screen and (max-width: 1024px) {
  .greet_ph .bg {
    height: 380px;
  }
}
@media screen and (max-width: 768px) {
  .greet_ph .bg {
    height: 300px;
  }
}
.greet_ph::after {
  content: "";
  position: absolute;
  inset: -14px -14px 14px 14px;
  border: 1px solid rgba(185, 154, 87, 0.5);
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .greet_ph::after {
    inset: -10px -10px 10px 10px;
  }
}

/* ---- 会社情報テーブル -------------------------------------- */
.ctable {
  width: 100%;
  border-collapse: collapse;
}
.ctable tr {
  border-bottom: 1px solid rgba(34, 40, 47, 0.13);
}
.ctable tr:first-child {
  border-top: 1px solid rgba(34, 40, 47, 0.13);
}
.ctable th {
  text-align: left;
  width: 210px;
  padding: 22px 16px 22px 0;
  vertical-align: top;
  font-family: "Zen Old Mincho", serif;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: #75612F;
}
@media screen and (max-width: 1024px) {
  .ctable th {
    width: 160px;
    letter-spacing: 0.18em;
  }
}
.ctable td {
  padding: 22px 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #414852;
  line-height: 2.2;
}
.ctable td .note {
  font-size: 12px;
  color: #666C75;
}

/* ---- 沿革 -------------------------------------------------- */
.hist {
  max-width: 760px;
  margin: 0 auto;
}
.hist li {
  position: relative;
  padding: 0 0 40px 42px;
  border-left: 1px solid rgba(185, 154, 87, 0.35);
}
@media screen and (max-width: 768px) {
  .hist li {
    padding: 0 0 32px 28px;
  }
}
.hist li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.hist li::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B99A57;
}
.hist .yr {
  font-family: "Italiana", serif;
  font-size: 20px;
  letter-spacing: 0.12em;
  color: #8E7440;
  display: block;
  margin-bottom: 4px;
}
@media screen and (max-width: 768px) {
  .hist .yr {
    font-size: 17px;
  }
}
.hist p {
  font-size: 13px;
  color: #5E646E;
  letter-spacing: 0.08em;
  line-height: 2.2;
}
@media screen and (max-width: 768px) {
  .hist p {
    font-size: 12.5px;
  }
}

.hist_note {
  text-align: center;
  font-size: 11px;
  color: #666C75;
  letter-spacing: 0.12em;
  margin-top: 34px;
}

/* ============================================================
   _recruit.scss ── 採用情報（メッセージ / 訴求3点 / 募集要項）
   ============================================================ */
.rc_msg {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 90px;
}
@media screen and (max-width: 768px) {
  .rc_msg {
    margin-bottom: 56px;
  }
}
.rc_msg h3 {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(21px, 2.3vw, 33px);
  font-weight: 400;
  letter-spacing: 0.17em;
  line-height: 1.95;
  margin-bottom: 28px;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .rc_msg h3 {
    font-size: 20px;
  }
}
.rc_msg p {
  font-size: 13.5px;
  line-height: 2.5;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.09em;
}
@media screen and (max-width: 768px) {
  .rc_msg p {
    font-size: 12.5px;
    line-height: 2.35;
  }
}

.rc_pts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
@media screen and (max-width: 1024px) {
  .rc_pts {
    grid-template-columns: 1fr;
  }
}

.rc_pt {
  background: #141D2B;
  padding: 46px 34px;
  transition: 0.6s;
}
@media screen and (max-width: 768px) {
  .rc_pt {
    padding: 34px 26px;
  }
}
.rc_pt:hover {
  background: #1D2938;
}
.rc_pt .n {
  font-family: "Italiana", serif;
  font-size: 15px;
  color: #B99A57;
  letter-spacing: 0.28em;
  display: block;
  margin-bottom: 16px;
}
.rc_pt h4 {
  font-family: "Zen Old Mincho", serif;
  font-size: 19px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
  .rc_pt h4 {
    font-size: 17px;
  }
}
.rc_pt p {
  font-size: 12.5px;
  line-height: 2.2;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.07em;
}

/* ---- 募集要項テーブル -------------------------------------- */
.rtable {
  width: 100%;
  border-collapse: collapse;
}
.rtable tr {
  border-bottom: 1px solid rgba(34, 40, 47, 0.13);
}
.rtable tr:first-child {
  border-top: 1px solid rgba(34, 40, 47, 0.13);
}
.rtable th {
  text-align: left;
  width: 200px;
  padding: 22px 16px 22px 0;
  vertical-align: top;
  font-family: "Zen Old Mincho", serif;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: #75612F;
}
@media screen and (max-width: 1024px) {
  .rtable th {
    width: 160px;
    letter-spacing: 0.18em;
  }
}
.rtable td {
  padding: 22px 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #414852;
  line-height: 2.2;
}
.rtable td .note {
  font-size: 12px;
  color: #666C75;
}
.rtable td ul li {
  position: relative;
  padding-left: 16px;
}
.rtable td ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1em;
  width: 6px;
  height: 1px;
  background: #B99A57;
}

.rc_entry {
  text-align: center;
  margin-top: 56px;
}

/* ============================================================
   _contact.scss ── お問い合わせ（Call/Mail ＋ CF7フォーム）
   ============================================================ */
.ct_lead {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}
@media screen and (max-width: 768px) {
  .ct_lead {
    margin-bottom: 40px;
  }
}
.ct_lead p {
  font-size: 13.5px;
  line-height: 2.5;
  color: #5E646E;
  letter-spacing: 0.09em;
}
@media screen and (max-width: 768px) {
  .ct_lead p {
    font-size: 12.5px;
    line-height: 2.35;
  }
}

.ct_ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: 80px;
  background: rgba(34, 40, 47, 0.1);
}
@media screen and (max-width: 1024px) {
  .ct_ways {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 768px) {
  .ct_ways {
    margin-bottom: 56px;
  }
}

.ct_way {
  background: #fff;
  padding: 46px 34px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .ct_way {
    padding: 36px 24px;
  }
}
.ct_way .lb {
  font-family: "Italiana", serif;
  font-size: 34px;
  color: #8E7440;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 8px;
}
@media screen and (max-width: 768px) {
  .ct_way .lb {
    font-size: 29px;
  }
}
.ct_way .sb {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: #666C75;
  margin-bottom: 22px;
}
.ct_way .num {
  font-family: "Marcellus", serif;
  font-size: 30px;
  letter-spacing: 0.08em;
  color: #0B121C;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
@media screen and (max-width: 768px) {
  .ct_way .num {
    font-size: 25px;
  }
}
.ct_way .num i {
  font-size: 17px;
  color: #B99A57;
}
.ct_way .tm {
  font-size: 11px;
  color: #666C75;
  letter-spacing: 0.12em;
  margin-top: 8px;
}
.ct_way .tx {
  font-size: 12.5px;
  color: #5E646E;
  line-height: 2.2;
  letter-spacing: 0.08em;
  margin-top: 6px;
}

/* ============================================================
   CF7 フォーム（実際の投入マークアップに対応）
   お問い合わせ：氏名/フリガナ/メール/電話/内容/同意/確認ボタン
   確認画面　：multiform 値表示 ＋ 戻る/送信ボタン
   ------------------------------------------------------------
   マークアップ：
     <label> 氏名<span class="red">必須</span> [text* ...] </label>
     <label class="policy"> [checkbox* policy ...] </label>
     [submit] / [previous]
   ============================================================ */
.form_w {
  max-width: 820px;
  margin: 0 auto;
}

/* 送信・戻るボタンを中央寄せするため .ct_form 全体は中央、
   各 <label>（＝項目）は左揃えに戻す */
.ct_form {
  text-align: center;
}

.ct_form .wpcf7-form {
  text-align: center;
}

/* 各項目 ＝ <label>（CF7が<p>で包む場合に備え子孫セレクタ） */
.ct_form .wpcf7-form label {
  display: block;
  text-align: left;
  margin: 0 auto 26px;
  max-width: 660px;
  font-family: "Zen Old Mincho", serif;
  font-size: 12.5px;
  letter-spacing: 0.2em;
  color: #0B121C;
  line-height: 1.9;
}
@media screen and (max-width: 768px) {
  .ct_form .wpcf7-form label {
    font-size: 12px;
    letter-spacing: 0.16em;
    margin-bottom: 22px;
  }
}

/* CF7が段落<p>を挿入した場合、間隔が空きすぎないよう調整 */
.ct_form .wpcf7-form p {
  margin: 0;
}

/* 必須（.red）／任意（.blue）バッジ */
.ct_form .red,
.ct_form .blue {
  display: inline-block;
  margin-left: 10px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  line-height: 1;
  vertical-align: middle;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

.ct_form .red {
  background: #B99A57;
  color: #0B121C;
  padding: 4px 9px;
}

.ct_form .blue {
  border: 1px solid rgba(34, 40, 47, 0.22);
  color: #666C75;
  padding: 3px 9px;
}

/* 入力コントロールのラッパを block にして、ラベルの下に配置 */
.ct_form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 12px;
}

/* 入力欄 */
.ct_form .wpcf7-form-control {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(34, 40, 47, 0.2);
  background: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: #22282F;
  font-weight: 300;
  transition: border-color 0.4s, box-shadow 0.4s;
  min-height: 52px;
}
@media screen and (max-width: 768px) {
  .ct_form .wpcf7-form-control {
    font-size: 16px;
    padding: 14px 15px;
  }
}

.ct_form textarea.wpcf7-form-control {
  min-height: 180px;
  resize: vertical;
  line-height: 2;
}

.ct_form .wpcf7-form-control::-moz-placeholder {
  color: #B5B9BF;
}

.ct_form .wpcf7-form-control::placeholder {
  color: #B5B9BF;
}

.ct_form .wpcf7-form-control:focus {
  outline: none;
  border-color: #B99A57;
  box-shadow: 0 0 0 3px rgba(185, 154, 87, 0.12);
}

/* プライバシーポリシー同意チェック（<label class="policy">） */
.ct_form label.policy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: none;
  text-align: center;
  margin: 6px 0 36px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: #22282F;
}
@media screen and (max-width: 768px) {
  .ct_form label.policy {
    font-size: 12px;
  }
}

.ct_form label.policy .wpcf7-form-control-wrap {
  display: inline-block;
  margin: 0;
  width: auto;
}

.ct_form label.policy .wpcf7-checkbox .wpcf7-list-item {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ct_form label.policy .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  max-width: none;
  cursor: pointer;
}

.ct_form input[type=checkbox] {
  width: 18px;
  height: 18px;
  min-height: auto;
  accent-color: #8E7440;
  vertical-align: middle;
  cursor: pointer;
}

/* ボタン（確認・送信＝ゴールド／戻る＝枠線） */
.ct_form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  border: 1px solid #B99A57;
  background: linear-gradient(100deg, #8E7440, #E3CD9A);
  color: #0B121C;
  padding: 18px 56px;
  font-size: 12px;
  letter-spacing: 0.26em;
  font-family: "Zen Old Mincho", serif;
  cursor: pointer;
  transition: 0.4s;
  margin: 8px 6px 0;
}
.ct_form .wpcf7-submit:hover {
  filter: brightness(1.06);
}
@media screen and (max-width: 768px) {
  .ct_form .wpcf7-submit {
    padding: 16px 40px;
  }
}

.ct_form .wpcf7-previous {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border: 1px solid #0B121C;
  background: none;
  color: #0B121C;
  padding: 18px 46px;
  font-size: 12px;
  letter-spacing: 0.24em;
  font-family: "Zen Old Mincho", serif;
  cursor: pointer;
  transition: 0.4s;
  margin: 8px 6px 0;
}
.ct_form .wpcf7-previous:hover {
  background: #0B121C;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .ct_form .wpcf7-previous {
    padding: 16px 34px;
  }
}

/* CF7が挿入する <br> を送信ボタン周りで詰める */
.ct_form .wpcf7-form br {
  line-height: 0;
}

/* 個人情報の取り扱い（スクロール可能なボックス・フォーム上部に表示） */
.privacy {
  background: #EDE8DF;
  padding: 26px 28px;
  font-size: 12px;
  line-height: 2.1;
  color: #5E646E;
  letter-spacing: 0.07em;
  max-height: 170px;
  overflow-y: auto;
  margin: 0 auto 30px;
  text-align: left;
  max-width: 660px;
}
@media screen and (max-width: 768px) {
  .privacy {
    padding: 20px;
    font-size: 11.5px;
    max-height: 150px;
  }
}
.privacy strong {
  font-family: "Zen Old Mincho", serif;
  letter-spacing: 0.14em;
}

/* CF7 バリデーション・応答メッセージ */
.wpcf7 .wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: 11px;
  letter-spacing: 0.06em;
  margin-top: 6px;
  text-align: left;
}

.wpcf7 .wpcf7-response-output {
  border-color: #B99A57 !important;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  margin: 24px auto 0;
  padding: 14px 18px;
  max-width: 660px;
}

.wpcf7-spinner {
  margin: 0 auto;
}

/* 完了・確認画面 */
.thanks {
  text-align: center;
  font-family: "Zen Old Mincho", serif;
  font-size: 15px;
  line-height: 2.4;
  letter-spacing: 0.1em;
  color: #0B121C;
  margin-bottom: 40px;
}

/* ============================================================
   _policy.scss ── プライバシーポリシー
   ============================================================ */
.policy_contents {
  max-width: 900px;
}
.policy_contents h2 {
  font-family: "Zen Old Mincho", serif;
  font-size: 16px;
  font-weight: 500;
  color: #0B121C;
  letter-spacing: 0.1em;
  margin: 44px 0 14px;
  padding-left: 16px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .policy_contents h2 {
    font-size: 15px;
    margin: 32px 0 12px;
  }
}
.policy_contents h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 3px;
  height: 1.1em;
  background: #B99A57;
}
.policy_contents h2:first-child {
  margin-top: 0;
}
.policy_contents p {
  font-size: 13.5px;
  line-height: 2.5;
  color: #414852;
  letter-spacing: 0.07em;
}
@media screen and (max-width: 768px) {
  .policy_contents p {
    font-size: 12.5px;
    line-height: 2.35;
  }
}

/* ============================================================
   _footer.scss ── フッター Contact / Call ＋ SP追従バー
   ============================================================ */
#footer_contact {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 130px 0 110px;
}
@media screen and (max-width: 768px) {
  #footer_contact {
    padding: 80px 0 70px;
  }
}
#footer_contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 28, 0.93);
}

.footer_contents {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 44px;
  text-align: center;
}
@media screen and (min-width: 1441px) {
  .footer_contents {
    max-width: 1340px;
  }
}
@media screen and (max-width: 768px) {
  .footer_contents {
    padding: 0 24px;
  }
}

.footer_contact_image {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.footer_contact_image img {
  height: 74px;
  width: auto;
}
@media screen and (max-width: 768px) {
  .footer_contact_image img {
    height: 58px;
  }
}
.footer_contact_image .logo-r {
  width: 74px;
  height: 74px;
  font-size: 40px;
}
@media screen and (max-width: 768px) {
  .footer_contact_image .logo-r {
    width: 58px;
    height: 58px;
    font-size: 30px;
  }
}
.footer_contact_image .logo-r::after {
  inset: -8px;
}
.footer_contact_image .logo-txt {
  font-family: "Italiana", serif;
  font-size: 38px;
  letter-spacing: 0.2em;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  .footer_contact_image .logo-txt {
    font-size: 28px;
  }
}

.footer_contact_text {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 2.1;
  margin-bottom: 66px;
  letter-spacing: 0.12em;
}
@media screen and (max-width: 768px) {
  .footer_contact_text {
    font-size: 11.5px;
    margin-bottom: 46px;
  }
}
.footer_contact_text {
  /* 住所2行を左揃えのブロックにして中央寄せ（本店／資材置場でテキスト開始位置を揃える） */
}
.footer_contact_text .f_addrs {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
}
.footer_contact_text .f_addr {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.footer_contact_text .f_addr:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .footer_contact_text .f_addr {
    gap: 10px;
  }
}
.footer_contact_text .f_lb {
  flex-shrink: 0;
  min-width: 70px;
  text-align: center;
  font-family: "Zen Old Mincho", serif;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #B99A57;
  border: 1px solid rgba(185, 154, 87, 0.4);
  padding: 3px 6px;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  .footer_contact_text .f_lb {
    min-width: 60px;
    font-size: 9px;
  }
}
.footer_contact_text .f_ad {
  flex: 1;
  padding-top: 1px;
}
.footer_contact_text .f_fax {
  margin-top: 14px;
  text-align: center;
  font-family: "Marcellus", serif;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.42);
}

.footer_contact_contents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
}
@media screen and (max-width: 768px) {
  .footer_contact_contents {
    grid-template-columns: 1fr;
  }
}

.form {
  background: #0B121C;
  padding: 54px 34px;
  transition: 0.6s;
}
@media screen and (max-width: 768px) {
  .form {
    padding: 40px 24px;
  }
}
.form:hover {
  background: #1D2938;
}
.form h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 32px;
  color: #B99A57;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
  padding-left: 0.2em;
}
@media screen and (max-width: 768px) {
  .form h2 {
    font-size: 33px;
  }
}
.form h3 {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  font-weight: 300;
  margin-bottom: 32px;
}

.footer_contents_btn button {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  padding: 15px 48px;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  font-family: inherit;
  cursor: pointer;
  transition: 0.5s;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
}
.footer_contents_btn button:hover {
  background: #fff;
  color: #0B121C;
  border-color: #fff;
}

.footer_contents_tel_number a {
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-size: 37px;
  letter-spacing: 0.09em;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  transition: 0.4s;
}
@media screen and (max-width: 768px) {
  .footer_contents_tel_number a {
    font-size: 29px;
  }
}
.footer_contents_tel_number a:hover {
  color: #E3CD9A;
}
.footer_contents_tel_number i {
  font-size: 19px;
  color: #B99A57;
}
.footer_contents_tel_number p {
  color: rgba(255, 255, 255, 0.42);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  margin-top: 12px;
}

/* ---- フッターメニュー -------------------------------------- */
footer {
  background: #0B121C;
  padding: 52px 44px 34px;
}
@media screen and (max-width: 768px) {
  footer {
    padding: 44px 24px 100px;
  }
}

.footer_menu {
  max-width: 1050px;
  margin: 0 auto;
  text-align: center;
}
.footer_menu .f_nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 38px;
  margin-bottom: 34px;
}
@media screen and (max-width: 768px) {
  .footer_menu .f_nav {
    gap: 20px 26px;
  }
}
.footer_menu .f_nav li a {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  transition: 0.4s;
}
@media screen and (max-width: 768px) {
  .footer_menu .f_nav li a {
    display: inline-block;
    padding: 6px 0;
  }
}
.footer_menu .f_nav li a:hover {
  color: #B99A57;
}

.footer_sns {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 34px;
}
.footer_sns a {
  color: rgba(255, 255, 255, 0.45);
  font-size: 17px;
  transition: 0.4s;
}
.footer_sns a:hover {
  color: #B99A57;
}

.copyright {
  text-align: center;
  color: rgba(255, 255, 255, 0.28);
  font-size: 10px;
  letter-spacing: 0.2em;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-family: "Cormorant Garamond", serif;
}

/* ---- SP追従バー（実装指示書 §8） --------------------------- */
.spbar {
  display: none;
}

@media screen and (max-width: 768px) {
  .spbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 900;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  .spbar.on {
    transform: translateY(0);
  }
  .spbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 58px;
    font-size: 12px;
    letter-spacing: 0.14em;
    font-family: "Zen Old Mincho", serif;
  }
  .spbar .tel {
    background: #0B121C;
    color: #fff;
    border-top: 1px solid rgba(185, 154, 87, 0.4);
  }
  .spbar .tel i {
    color: #B99A57;
    font-size: 13px;
  }
  .spbar .mail {
    background: linear-gradient(100deg, #8E7440, #B99A57);
    color: #0B121C;
  }
}
/* ---- ページトップへ戻るボタン ------------------------------ */
.pagetop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 850;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #8E7440, #B99A57);
  color: #0B121C;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.3, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1), visibility 0.5s;
  box-shadow: 0 8px 24px rgba(11, 18, 28, 0.28);
}
.pagetop.on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.pagetop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #B99A57, #E3CD9A);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.pagetop:hover::before {
  opacity: 1;
}
.pagetop i {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .pagetop {
    right: 16px;
    bottom: 74px;
    width: 46px;
    height: 46px;
    font-size: 15px;
  }
}

/* ---- 画像拡大モーダル -------------------------------------- */
#modal-container {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(11, 18, 28, 0.92);
  align-items: center;
  justify-content: center;
  padding: 5vw;
}
#modal-container.open {
  display: flex;
}
#modal-container img {
  max-width: 92vw;
  max-height: 88vh;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
#modal-container .close {
  position: absolute;
  top: 28px;
  right: 34px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
#modal-container .close span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
}
#modal-container .close span:nth-child(1) {
  transform: rotate(45deg);
}
#modal-container .close span:nth-child(2) {
  transform: rotate(-45deg);
}

/* 施工事例カテゴリー初期投入用の隠しユーティリティ等が必要な場合はここに追記 *//*# sourceMappingURL=style.css.map */