@charset "UTF-8";
/*
Theme Name: 株式会社OGK
Description: 株式会社OGK コーポレートサイト（モック ogk-top.html / ogk-lower.html を正とした実装）
Version: 1.0.0
*/
/* ============================================================
   ブレークポイント
   ============================================================ */
/* ============================================================
   デザイントークン
   ============================================================ */
/* ============================================================
   メディアクエリ mixin
   ============================================================ */
/* ============================================================
   リセット / ベース
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Shippori Antique B1", sans-serif;
  color: #2b2620;
  background: #F5F0E4;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

/* 固定横幅 */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
@media screen and (max-width: 1024px) {
  .wrap {
    padding: 0 28px;
  }
}
@media screen and (max-width: 768px) {
  .wrap {
    padding: 0 20px;
  }
}
@media screen and (min-width: 1441px) {
  .wrap {
    max-width: 1320px;
  }
}

/* 英字ユーティリティ */
.en {
  font-family: "Graduate", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* アクセント（赤字）
   ACFの見出し・リードに <span class="ac">〜</span> と書くとここが効く */
.ac {
  color: #A93B34;
}

/* ============================================================
   グレイン（紙ノイズ）オーバーレイ：全画面固定・クリック透過
   ============================================================ */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.disp-slab {
  font-family: "Alfa Slab One", serif;
}

/* ============================================================
   ローディング画面（クリーム地 + ロゴ + 六角ドット）
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F0E4;
  transition: opacity 0.6s ease, visibility 0.6s;
}
.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}
.loader-inner {
  text-align: center;
}
.loader-inner img {
  width: min(60vw, 220px);
  height: auto;
  margin-bottom: 26px;
}
.loader-dots {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.loader-dots span {
  width: 14px;
  height: 15px;
  background: #A93B34;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  animation: loaderPulse 1s infinite ease-in-out;
}
.loader-dots span:nth-child(2) {
  background: #C8922B;
  animation-delay: 0.15s;
}
.loader-dots span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes loaderPulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-6px); }
}

/* ============================================================
   共通：セクションラベル / セクションタイトル
   ============================================================ */
.slabel {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
}
.slabel .en-t {
  font-family: "Graduate", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: #A93B34;
}
.slabel .bar {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.15;
}
.slabel--center {
  justify-content: center;
  max-width: 360px;
  margin: 0 auto 22px;
}

.stitle {
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.stitle .ac {
  color: #A93B34;
}
.stitle .en-s {
  display: block;
  font-family: "Graduate", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: #999;
  margin-top: 10px;
  text-transform: uppercase;
}

/* 暗背景セクション内のラベルは白基調 */
.service .slabel,
.team .slabel {
  color: #F5F0E4;
}

/* ============================================================
   共通：スクロール発火アニメーション
   ============================================================ */
.rv {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.9s cubic-bezier(0.16, 0.8, 0.24, 1);
}
.rv.in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   共通：下層ページタイトル帯
   ============================================================ */
.lower {
  position: relative;
  height: 360px;
  background: #2b2620;
  background-size: cover;
  background-position: center 22%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .lower {
    height: 270px;
  }
}
.lower::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(120deg, #221d18, #2b2620 60%, #2e2119);
}
.lower::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(245, 240, 228, 0.03) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, rgba(245, 240, 228, 0.03) 0 1px, transparent 1px 8px);
}
.lower .lower-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.55);
}
.lower[style*=background-image]::before {
  opacity: 0.55;
}
.lower .en-t {
  font-family: "Alfa Slab One", serif;
  font-size: clamp(44px, 7vw, 82px);
  font-weight: 400;
  color: #F5F0E4;
  line-height: 1;
  letter-spacing: 0.01em;
}
.lower .en-t .ac {
  color: #A93B34;
}
.lower h1 {
  color: rgba(245, 240, 228, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-top: 16px;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 14px;
}
.lower h1::before {
  content: "";
  width: 14px;
  height: 15px;
  background: #A93B34;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.lower-in {
  position: relative;
  z-index: 3;
  padding-top: 40px;
}

/* パンくず */
.breadcrumb {
  position: absolute;
  bottom: 22px;
  left: 0;
  width: 100%;
  z-index: 3;
}
.breadcrumb .wrap {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: rgba(245, 240, 228, 0.5);
  font-family: "Graduate", sans-serif;
  letter-spacing: 0.08em;
}
.breadcrumb .sep {
  opacity: 0.4;
}

/* ============================================================
   共通：キーフレーム
   ============================================================ */
@keyframes rise {
  to {
    transform: none;
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes marq {
  to {
    transform: translateX(-50%);
  }
}
@keyframes sd {
  0% {
    top: -44px;
  }
  60%, 100% {
    top: 44px;
  }
}
/* ============================================================
   ページ別パーシャル
   ============================================================ */
/* ============================================================
   HEADER
   ------------------------------------------------------------
   ・PC：透過固定ヘッダー → スクロールで .scr（黒背景 + blur）
   ・SP：右からのスライドインメニュー
   ・z-index：header 100 / burger 110 / nav 105 / overlay 95
     ※オーバーレイは必ず header より小さくすること（リンクが押せなくなる）
   ============================================================ */
.hdr {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 14px 0;
  transition: 0.4s;
  /* クリーム地＋濃い文字。黒＋赤ロゴがそのまま映える */
  background: rgba(245, 240, 228, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #D9D0BB;
}
.hdr.scr {
  background: #F5F0E4;
  padding: 8px 0;
  box-shadow: 0 4px 0 rgba(43, 38, 32, 0.06);
}
.hdr.scr .hd-logo img {
  height: 68px;
}
.hdr--lower {
  background: #F5F0E4;
  border-bottom: 1px solid #D9D0BB;
}

.hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hd-logo {
  flex: none;
}
.hd-logo img {
  height: 88px;
  width: auto;
  max-width: 340px;
  -o-object-fit: contain;
     object-fit: contain;
  transition: height 0.4s;
}
@media screen and (max-width: 768px) {
  .hd-logo img {
    height: 60px;
    max-width: 230px;
  }
}

/* ---------- ナビゲーション ---------- */
.hd-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  /* 直下のaのみ＝メニュー項目。.sp-foot 内のa（電話・SNS）には当てない */
}
.hd-nav > a {
  flex: none;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: #2b2620;
  position: relative;
  padding: 4px 0;
  /* 英字サブラベル */
}
.hd-nav > a .lb {
  font-family: "Graduate", sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  opacity: 0.45;
  display: block;
  margin-top: 2px;
}
.hd-nav > a {
  /* ホバーで赤い下線 */
}
.hd-nav > a:not(.hd-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #A93B34;
  transition: width 0.3s;
}
.hd-nav > a:not(.hd-cta):hover::after {
  width: 100%;
}
.hd-nav > a:not(.hd-cta).current::after {
  width: 100%;
}

/* お問い合わせCTA（平行四辺形）
   ------------------------------------------------------------
   clip-path で要素ごと切り抜くと、幅が足りない瞬間に文字まで斜めに欠ける。
   そこで「要素は普通の矩形のまま、背景の疑似要素だけを skew で傾ける」方式にする。
   → 文字は絶対に切れない
   ------------------------------------------------------------ */
.hd-cta {
  position: relative;
  z-index: 0;
  flex: none;
  white-space: nowrap;
  /* 高さを固定して縦位置を揃える（paddingで高さを作らない） */
  height: 46px;
  min-width: 152px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #F5F0E4;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  background: transparent;
  clip-path: none;
  transition: transform 0.3s;
  /* 傾いた赤い背景（要素は矩形のまま＝文字が欠けない） */
}
.hd-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #A93B34;
  transform: skewX(-10deg);
  transition: background 0.3s;
}
.hd-cta .hd-cta-arw {
  font-family: "Graduate", sans-serif;
  font-size: 13px;
  transition: transform 0.3s;
}
.hd-cta:hover::before {
  background: #C24A3E;
}
.hd-cta:hover .hd-cta-arw {
  transform: translateX(4px);
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .hd-cta {
    height: 44px;
    min-width: 132px;
    padding: 0 18px;
    font-size: 13px;
  }
}

/* 中間幅ではナビの間隔と文字を詰める */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .hd-nav {
    gap: 18px;
  }
  .hd-nav > a {
    font-size: 13px;
  }
}
/* ---------- バーガー ---------- */
.hd-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
}
.hd-burger span {
  width: 26px;
  height: 2px;
  background: #2b2620;
  transition: 0.3s;
}

/* ---------- SP専用要素（PCでは非表示） ---------- */
.sp-menu-lb,
.sp-no,
.sp-foot {
  display: none;
}

.nav-overlay {
  display: none;
}

/* ============================================================
   SP/タブレットメニュー（1024px以下はバーガー）
   ------------------------------------------------------------
   PCナビが窮屈になる幅で早めにバーガーへ切り替える
   ============================================================ */
@media screen and (max-width: 1024px) {
  /* 全幅スライドイン（右から） */
  .hd-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    background: #2b2620;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 100px 28px 40px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: right 0.5s cubic-bezier(0.16, 0.8, 0.24, 1);
    z-index: 105;
  }
  .hd-nav.open {
    right: 0;
  }
  .hd-nav {
    /* 全幅でも中身が間延びしないよう、コンテンツは中央寄せで幅を制限 */
  }
  .hd-nav > * {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .hd-nav {
    /* メニュー項目（直下のaのみ） */
  }
  .hd-nav > a:not(.hd-cta) {
    display: flex;
    align-items: baseline;
    gap: 16px;
    width: 100%;
    padding: 19px 0;
    font-size: 21px;
    font-weight: 900;
    color: #F5F0E4;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(245, 240, 228, 0.12);
    transition: 0.3s;
  }
  .hd-nav > a:not(.hd-cta)::after {
    display: none;
  }
  .hd-nav > a:not(.hd-cta) .sp-no {
    display: block;
    flex: none;
    width: 24px;
    font-family: "Graduate", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #A93B34;
    letter-spacing: 0.1em;
  }
  .hd-nav > a:not(.hd-cta) .sp-jp {
    flex: 1;
  }
  .hd-nav > a:not(.hd-cta) .lb {
    font-family: "Graduate", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: rgba(245, 240, 228, 0.35);
    margin-top: 0;
  }
  .hd-nav > a:not(.hd-cta):hover, .hd-nav > a:not(.hd-cta):active {
    color: #A93B34;
    padding-left: 8px;
  }
  .hd-nav {
    /* SPメニュー内は全幅CTA */
  }
  .hd-nav .hd-cta {
    width: 100%;
    height: 62px;
    min-width: 0;
    padding: 0 24px;
    margin-top: 26px;
    justify-content: center;
    font-size: 17px;
  }
  /* MENUラベル */
  .sp-menu-lb {
    display: block;
    font-family: "Graduate", sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;
    color: #A93B34;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-left: 2px;
  }
  .sp-menu-lb::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 10px;
    background: #A93B34;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    margin-right: 10px;
    vertical-align: middle;
  }
  /* メニュー内フッター */
  .sp-foot {
    display: block;
    margin-top: 30px;
  }
  /* 枠線は「外側=線色ベタ ＋ 内側1px=地色」の2枚重ねで作る
     （clip-path 形状に box-shadow:inset は正しく乗らないため） */
  .sp-tel {
    position: relative;
    z-index: 0;
    display: block;
    padding: 22px 24px;
    text-align: center;
    background: rgba(245, 240, 228, 0.16);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  }
  .sp-tel::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    background: #332d26;
    clip-path: inherit;
  }
  .sp-tel-lb {
    display: block;
    font-size: 11px;
    color: rgba(245, 240, 228, 0.55);
    letter-spacing: 0.08em;
    margin-bottom: 6px;
  }
  .sp-tel-num {
    display: block;
    font-family: "Graduate", sans-serif;
    font-size: 27px;
    font-weight: 600;
    color: #F5F0E4;
    letter-spacing: 0.03em;
    line-height: 1.1;
  }
  .sp-tel-hrs {
    display: block;
    font-size: 11px;
    color: rgba(245, 240, 228, 0.5);
    margin-top: 6px;
  }
  /* SNS（六角ボタン）
     ※ clip-path の六角に box-shadow:inset で枠線を引くと左右の直線しか残らないため、
        「外側の六角（線色ベタ）＋ 1px内側の六角（地色）」の2枚重ねで枠線を作る */
  .sp-sns {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
  }
  .sp-sns a {
    position: relative;
    z-index: 0; /* 疑似要素を文字の背面に置くための重なり基準 */
    width: 42px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Graduate", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(245, 240, 228, 0.7);
    transition: color 0.3s;
    /* 外側＝枠線の色 */
  }
  .sp-sns a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: rgba(245, 240, 228, 0.22);
    transition: 0.3s;
  }
  .sp-sns a {
    /* 内側＝地色で塗りつぶし → 1pxの六角枠に見える */
  }
  .sp-sns a::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: #2b2620;
    transition: 0.3s;
  }
  .sp-sns a:hover, .sp-sns a:active {
    color: #F5F0E4;
  }
  .sp-sns a:hover::before, .sp-sns a:active::before {
    background: #A93B34;
  }
  .sp-sns a:hover::after, .sp-sns a:active::after {
    background: rgba(169, 59, 52, 0.35);
  }
  .sp-copy {
    text-align: center;
    font-family: "Graduate", sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: rgba(245, 240, 228, 0.3);
    margin-top: 26px;
  }
  /* バーガー（navより上） */
  .hd-burger {
    display: flex;
    z-index: 110;
  }
  .hd-burger.act span {
    background: #F5F0E4;
  }
  .hd-burger.act span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .hd-burger.act span:nth-child(2) {
    opacity: 0;
  }
  .hd-burger.act span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  /* オーバーレイ（header 100 より小さい 95） */
  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
    z-index: 95;
  }
  .nav-overlay.open {
    opacity: 1;
    visibility: visible;
  }
}
/* ============================================================
   FRONT PAGE（TOP）
   ------------------------------------------------------------
   Hero → マーキー → Intro → Service → Strength → Works → Team → Company
   ※ Contact は _footer.scss
   ============================================================ */
/* ------------------------------------------------------------
   1. Hero（フルスクリーン）
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  background: #2b2620;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* 黒グラデ地 + 45°クロスライン */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(120deg, #221d18, #2b2620 60%, #2e2119);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(245, 240, 228, 0.03) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, rgba(245, 240, 228, 0.03) 0 1px, transparent 1px 8px);
}

/* ---- Heroスライダー（最大3枚・フェード自動切替）---- */
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s ease, transform 7s ease;
}
.hero-slide.on {
  opacity: 1;
  transform: scale(1);
}

/* スライダー使用時は黒グラデを少し暗くして文字を読ませる */
.hero--slider .hero-bg {
  background: rgba(10, 10, 10, 0.5);
}
.hero--slider .hero-bg::after {
  opacity: 0.5;
}

/* ---- Hero 中身 ---- */
.hero-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .hero-inner {
    padding-bottom: 90px;
  }
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 0.9s 0.3s forwards;
}
.hero-eyebrow .hx-mini {
  width: 16px;
  height: 18px;
  background: #A93B34;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.hero-eyebrow span {
  font-family: "Graduate", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: #F5F0E4;
}

.hero h1 {
  color: #F5F0E4;
  font-weight: 900;
  font-size: clamp(32px, 5.4vw, 68px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-bottom: 32px;
  /* 2行を下からせり上げる */
}
.hero h1 .ln {
  display: block;
  overflow: hidden;
  padding: 2px 0;
}
.hero h1 .ln i {
  display: inline-block;
  font-style: normal;
  transform: translateY(110%);
}
.hero h1 .ac {
  color: #A93B34;
}

.hero.play h1 .ln:nth-child(1) i {
  animation: rise 1.1s cubic-bezier(0.16, 0.8, 0.24, 1) 0.5s forwards;
}

.hero.play h1 .ln:nth-child(2) i {
  animation: rise 1.1s cubic-bezier(0.16, 0.8, 0.24, 1) 0.7s forwards;
}

.hero-sub {
  color: rgba(245, 240, 228, 0.68);
  font-size: clamp(14px, 1.6vw, 17px);
  max-width: 520px;
  opacity: 0;
  animation: fadeUp 0.9s 1.3s forwards;
}

/* SCROLLインジケーター */
.hero-scroll {
  position: absolute;
  left: 40px;
  bottom: 28px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(245, 240, 228, 0.5);
}
@media screen and (max-width: 768px) {
  .hero-scroll {
    display: none;
  }
}
.hero-scroll .en {
  font-family: "Graduate", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
}
.hero-scroll .bar {
  width: 1px;
  height: 44px;
  background: rgba(245, 240, 228, 0.28);
  position: relative;
  overflow: hidden;
}
.hero-scroll .bar::after {
  content: "";
  position: absolute;
  top: -44px;
  left: 0;
  width: 100%;
  height: 44px;
  background: #A93B34;
  animation: sd 2s infinite;
}

/* Hero下端の斜めカット */
.hero-cut {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 70px;
  z-index: 4;
  background: #F5F0E4;
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 60%);
}

/* ------------------------------------------------------------
   2. 赤マーキー帯
   ------------------------------------------------------------ */
.marq {
  background: #A93B34;
  overflow: hidden;
  padding: 14px 0;
  white-space: nowrap;
  position: relative;
  z-index: 6;
}

.marq-in {
  display: inline-flex;
  gap: 40px;
  font-family: "Graduate", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #F5F0E4;
  animation: marq 22s linear infinite;
}
.marq-in span {
  display: inline-flex;
  align-items: center;
  gap: 40px;
}
.marq-in {
  /* 区切りの白い小六角 */
}
.marq-in i {
  width: 8px;
  height: 9px;
  background: #F5F0E4;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-style: normal;
}

/* ------------------------------------------------------------
   3. Intro
   ------------------------------------------------------------ */
.intro {
  padding: 130px 0 120px;
  background: #F5F0E4;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .intro {
    padding: 80px 0;
  }
}
.intro {
  /* 左上にはみ出す巨大六角 */
}
.intro::before {
  content: "";
  position: absolute;
  left: -140px;
  top: -80px;
  width: 420px;
  height: 460px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: #EAE3D2;
  z-index: 0;
}

/* リード＋ボタンを1ブロックに統合＝中央寄せのステートメント */
.intro-single {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* 会社ロゴ入り 六角クレスト（外＝焦げ茶／内＝クリーム／中にロゴ） */
.intro-crest {
  position: relative;
  z-index: 0;
  width: 132px;
  height: 144px;
  margin: 0 auto 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-crest::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: #2b2620;
}
.intro-crest::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: #F5F0E4;
}
.intro-crest img {
  width: 58%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.intro-lead {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.01em;
}


.intro-txt p {
  color: #555;
  font-size: 15px;
  margin-bottom: 20px;
}
.intro-txt p:last-child {
  margin-bottom: 0;
}

.intro-since {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  /* 六角の枠線＝外側(赤ベタ) + 内側2px(白) の2枚重ね */
}
.intro-since .hx {
  width: 56px;
  height: 62px;
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-since .hx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: #A93B34;
}
.intro-since .hx::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: #F5F0E4;
}
.intro-since .hx b {
  font-family: "Graduate", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #A93B34;
}
.intro-since small {
  font-size: 13px;
  color: #777;
}

/* 会社概要への導線（Introセクションに統合・中央寄せ） */
.intro-btn {
  margin-top: 34px;
}

/* ------------------------------------------------------------
   4. Service（黒背景・2×2カード）
   ------------------------------------------------------------ */
.service {
  padding: 120px 0;
  background: #2b2620;
  color: #F5F0E4;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .service {
    padding: 80px 0;
  }
}
.service {
  /* 右下の六角（薄いベタ。clip-path形状に border/inset影は乗らないためベタ塗り） */
}
.service::after {
  content: "";
  position: absolute;
  right: -6%;
  bottom: -12%;
  width: 400px;
  height: 440px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: rgba(245, 240, 228, 0.035);
  z-index: 0;
}
.service .wrap {
  position: relative;
  z-index: 2;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 44px;
}
@media screen and (max-width: 1024px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}

.svc-card {
  position: relative;
  display: block;
  background: #332d26;
  padding: 44px 40px;
  overflow: hidden;
  transition: 0.4s;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 28px 100%, 0 calc(100% - 28px));
  /* ホバーで左端に赤い縦バー */
}
.svc-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: #A93B34;
  transition: height 0.45s;
}
.svc-card:hover {
  background: #3b342c;
}
.svc-card:hover::before {
  height: 100%;
}
.svc-card:hover .svc-arw {
  color: #A93B34;
  gap: 14px;
}
.svc-card h3 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 900;
  letter-spacing: 0.03em;
}
.svc-card p {
  font-size: 14px;
  color: rgba(245, 240, 228, 0.62);
  line-height: 1.75;
  margin-top: 6px;
}

.svc-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

/* 六角アイコン枠 */
.svc-hexico {
  width: 44px;
  height: 48px;
  position: relative;
  flex: none;
}
.svc-hexico::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: rgba(169, 59, 52, 0.14);
}
.svc-hexico span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 2;
}
.svc-hexico img {
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* アイコン未設定時のナンバー */
.svc-hexico-no {
  font-family: "Graduate", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #A93B34;
}

.svc-en {
  font-family: "Graduate", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(245, 240, 228, 0.4);
  margin-top: 2px;
}

.svc-arw {
  position: absolute;
  right: 32px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Graduate", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(245, 240, 228, 0.4);
  transition: 0.4s;
}

/* ------------------------------------------------------------
   5. Strength（ライトグレー・4枚カード）
   ------------------------------------------------------------ */
.strength {
  padding: 120px 0;
  background: #EAE3D2;
}
@media screen and (max-width: 768px) {
  .strength {
    padding: 80px 0;
  }
}

.str-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 44px;
}
@media screen and (max-width: 1024px) {
  .str-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .str-grid {
    grid-template-columns: 1fr;
  }
}

.str-card {
  display: block;
  position: relative;
  background: #F5F0E4;
  padding: 40px 30px;
  min-height: 280px;
  transition: 0.4s;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.str-card:hover {
  background: #2b2620;
  color: #F5F0E4;
  transform: translateY(-6px);
}
.str-card:hover .str-hex::before {
  background: #A93B34;
}
.str-card:hover .str-hex b {
  color: #F5F0E4;
}
.str-card:hover .str-p {
  color: rgba(245, 240, 228, 0.66);
}
.str-card:hover .str-en {
  color: rgba(245, 240, 228, 0.3);
}

.str-hex {
  width: 56px;
  height: 62px;
  position: relative;
  margin-bottom: 24px;
}
.str-hex::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: #EAE3D2;
  transition: 0.4s;
}
.str-hex b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Graduate", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #A93B34;
  z-index: 2;
  transition: 0.4s;
}

.str-h {
  font-size: 19px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.str-p {
  font-size: 13.5px;
  color: #666;
  line-height: 1.75;
  transition: color 0.4s;
}

.str-en {
  position: absolute;
  right: 24px;
  bottom: 20px;
  font-family: "Graduate", sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #D9D0BB;
  transition: 0.4s;
}

/* ------------------------------------------------------------
   6. Works（白背景・最新3件）
   ------------------------------------------------------------ */
.works {
  padding: 120px 0;
  background: #F5F0E4;
}
@media screen and (max-width: 768px) {
  .works {
    padding: 80px 0;
  }
}
.works .wk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
}
@media screen and (max-width: 1024px) {
  .works .wk-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .works .wk-grid {
    grid-template-columns: 1fr;
  }
}

/* 一覧カードは _archive-works.scss と共通仕様（.wk-item） */
.wk-more {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.wk-more a {
  color: #F5F0E4;
  background: #2b2620;
  padding: 17px 44px;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: 0.3s;
}
.wk-more a:hover {
  background: #A93B34;
}

/* ------------------------------------------------------------
   7. Team（黒背景）
   ------------------------------------------------------------ */
.team {
  padding: 120px 0;
  background: #2b2620;
  color: #F5F0E4;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .team {
    padding: 80px 0;
  }
}
.team {
  /* 背景中央上に赤い六角グロー */
}
.team::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -20%;
  width: 600px;
  height: 660px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: radial-gradient(circle, rgba(169, 59, 52, 0.16), transparent 62%);
  z-index: 0;
}

.team-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.team-lead {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 24px;
}
.team-lead .ac {
  color: #A93B34;
}

.team-p {
  color: rgba(245, 240, 228, 0.66);
  font-size: 15px;
  margin-bottom: 18px;
}

.team-tags {
  /* PC・SPとも2個ずつ並べる（PCはタグ幅なり、SPは均等幅） */
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px;
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .team-tags {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .team-tag {
    justify-content: center;
    text-align: center;
  }
}

/* 枠線は 外側(線色ベタ) + 内側1px(地色) の2枚重ね */
.team-tag {
  position: relative;
  z-index: 0;
  padding: 9px 20px;
  font-size: 13px;
  font-family: "Graduate", sans-serif;
  letter-spacing: 0.1em;
  color: rgba(245, 240, 228, 0.85);
  background: rgba(245, 240, 228, 0.16);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: 0.3s;
}
.team-tag::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: #2b2620;
  clip-path: inherit;
}
.team-tag:hover {
  background: #A93B34;
  color: #F5F0E4;
}

/* 写真枠自体を六角形にクリップ */
.team-visual {
  aspect-ratio: 1/1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(135deg, #2b2620, #332d26);
}
.team-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: repeating-linear-gradient(-58deg, rgba(245, 240, 228, 0.03) 0 1px, transparent 1px 34px);
}
.team-visual img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.team-visual .en {
  font-family: "Graduate", sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(245, 240, 228, 0.28);
  position: relative;
  z-index: 2;
}

/* ------------------------------------------------------------
   8. 会社概要への導線ボタン
      ※ TOPの独立Companyセクションは廃止し、Introに統合
   ------------------------------------------------------------ */
.cmp-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Graduate", sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #2b2620;
  border-bottom: 2px solid #A93B34;
  padding-bottom: 6px;
  transition: gap 0.3s;
}
.cmp-cta-btn:hover {
  gap: 18px;
}

/* ============================================================
   SERVICE（事業内容 / page-service.php）
   ------------------------------------------------------------
   タイトル帯 → 中央リード → 工種ブロック×4（左右交互）
   ============================================================ */
.page-service {
  /* ---------- 中央リード ---------- */
}
.page-service .intro-txt {
  padding: 90px 0 50px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .page-service .intro-txt {
    padding: 60px 0 40px;
  }
}
.page-service .intro-txt .lead {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 20px;
}
.page-service .intro-txt .lead .ac {
  color: #A93B34;
}
.page-service .intro-txt p {
  color: #555;
  font-size: 15px;
}

/* ---------- 工種ブロック ---------- */
.svc-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 400px;
}
@media screen and (max-width: 1024px) {
  .svc-block {
    grid-template-columns: 1fr;
  }
}
.svc-block {
  /* 偶数ブロック（--rev）は画像を右に、テキスト背景をグレーに */
}
.svc-block--rev .svc-img {
  order: 2;
}
@media screen and (max-width: 1024px) {
  .svc-block--rev .svc-img {
    order: 0;
  }
}
.svc-block--rev .svc-txt {
  background: #EAE3D2;
}

/* 画像側 */
.svc-img {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #2b2620, #3b342c);
  background-size: cover;
  background-position: center;
  /* 左上の薄い巨大ナンバー */
}
.svc-img .no {
  position: absolute;
  top: 26px;
  left: 26px;
  font-family: "Graduate", sans-serif;
  font-size: 82px;
  font-weight: 700;
  color: rgba(245, 240, 228, 0.07);
  line-height: 1;
}
.svc-img {
  /* プレースホルダー */
}
.svc-img .ph {
  text-align: center;
  color: rgba(245, 240, 228, 0.3);
}
.svc-img .ph .en {
  font-family: "Graduate", sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
}
.svc-img {
  /* 右下の六角（ベタ塗り） */
}
.svc-img::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 66px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: rgba(245, 240, 228, 0.09);
}

/* テキスト側 */
.svc-txt {
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #F5F0E4;
}
@media screen and (max-width: 1024px) {
  .svc-txt {
    padding: 44px 28px;
  }
}
.svc-txt {
  /* 英字カテゴリ（頭に赤い小六角） */
}
.svc-txt .cat-en {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Graduate", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #A93B34;
  margin-bottom: 10px;
}
.svc-txt .cat-en::before {
  content: "";
  width: 10px;
  height: 11px;
  background: #A93B34;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.svc-txt {
  /* 見出し + 赤下線 */
}
.svc-txt h2 {
  position: relative;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
  padding-bottom: 18px;
}
.svc-txt h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  background: #A93B34;
}
.svc-txt p {
  color: #555;
  font-size: 15px;
  margin-bottom: 14px;
}
.svc-txt {
  /* 平行四辺形の黒タグ */
}
.svc-txt .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.svc-txt .tag {
  font-size: 12px;
  background: #2b2620;
  color: #F5F0E4;
  padding: 6px 16px 6px 12px;
  font-family: "Graduate", sans-serif;
  letter-spacing: 0.06em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

/* ============================================================
   WORKS（施工事例 / archive-works.php・single-works.php）
   ------------------------------------------------------------
   ・.wk-item カードはTOPのWorksセクションと共通仕様
   ============================================================ */
.page-works {
  padding-bottom: 90px;
}

/* ---------- リード ---------- */
.wk-lead {
  padding: 70px 0 0;
  text-align: center;
}
.wk-lead p {
  color: #555;
  font-size: 15px;
}

/* ---------- フィルター ---------- */
.wk-filter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 70px 0 44px;
}
@media screen and (max-width: 768px) {
  .wk-filter {
    padding: 44px 0 32px;
  }
}

/* 枠線は 外側(罫線色ベタ) + 内側1px(白) の2枚重ね */
.wk-fbtn {
  position: relative;
  z-index: 0;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: "Shippori Antique B1", sans-serif;
  background: #D9D0BB;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: 0.3s;
}
.wk-fbtn::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: #F5F0E4;
  clip-path: inherit;
  transition: 0.3s;
}
.wk-fbtn.on, .wk-fbtn:hover {
  background: #2b2620;
  color: #F5F0E4;
}
.wk-fbtn.on::before, .wk-fbtn:hover::before {
  background: #2b2620;
}

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

/* ---------- カード（TOP / 一覧 共通） ---------- */
.wk-item {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #2b2620;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
.wk-item:hover .wk-ph {
  transform: scale(1.06);
}
.wk-item:hover .wk-meta {
  opacity: 1;
  transform: none;
}

/* サムネイル（未登録時はプレースホルダー） */
.wk-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2b2620, #3b342c);
  transition: transform 0.7s cubic-bezier(0.16, 0.8, 0.24, 1);
}
.wk-ph img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wk-ph .inner {
  text-align: center;
  color: rgba(245, 240, 228, 0.28);
}
.wk-ph .en {
  font-family: "Graduate", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
}

/* 左上の赤い平行四辺形タグ */
.wk-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: #A93B34;
  color: #F5F0E4;
  font-family: "Graduate", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 6px 16px 6px 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

/* ホバーで出るメタ情報 */
.wk-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  opacity: 0;
  transform: translateY(8px);
  transition: 0.4s;
}
.wk-meta .cat,
.wk-meta .wk-cat {
  font-family: "Graduate", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #A93B34;
  font-weight: 600;
}
.wk-meta .ttl,
.wk-meta .wk-ttl {
  color: #F5F0E4;
  font-size: 15px;
  font-weight: 700;
  margin-top: 3px;
}

/* ---------- 投稿なし / 注記 / ページャー ---------- */
.wk-empty {
  color: #999;
  font-size: 14px;
}

.wk-note {
  text-align: center;
  padding: 60px 0 0;
  color: #999;
  font-size: 13px;
}

.wk-pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 50px;
}
.wk-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  font-family: "Graduate", sans-serif;
  font-size: 14px;
  color: #2b2620;
  box-shadow: 0 0 0 1px #D9D0BB inset;
  transition: 0.3s;
}
.wk-pager .page-numbers:hover, .wk-pager .page-numbers.current {
  background: #2b2620;
  color: #F5F0E4;
  box-shadow: 0 0 0 1px #2b2620 inset;
}

/* ============================================================
   施工事例 詳細（single-works.php）
   ============================================================ */
.single-works {
  padding-top: 80px;
}
.single-works .wk-single {
  max-width: 880px;
  margin: 0 auto;
}
.single-works .wk-single-head {
  margin-bottom: 28px;
}
.single-works .wk-single-head h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.4;
  margin-top: 8px;
}
.single-works .wk-single-cat {
  display: inline-block;
  font-family: "Graduate", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #F5F0E4;
  background: #A93B34;
  padding: 5px 16px 5px 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.single-works .wk-single-ph {
  position: relative;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2b2620, #3b342c);
  margin-bottom: 34px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
.single-works .wk-single-ph img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.single-works .wk-single-ph .en {
  font-family: "Graduate", sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(245, 240, 228, 0.28);
}
.single-works .wk-single-body {
  color: #444;
  font-size: 15px;
}
.single-works .wk-single-body p {
  margin-bottom: 18px;
}
.single-works .wk-more a {
  background: #2b2620;
}
.single-works .wk-more a:hover {
  background: #A93B34;
}

/* ============================================================
   COMPANY（会社概要 / page-company.php）
   ------------------------------------------------------------
   タイトル帯 → 代表メッセージ（画像＝ロゴ）→ 会社概要テーブル → 沿革
   ============================================================ */
/* ---------- 代表メッセージ（画像の場所はロゴ） ---------- */
.cmp-msg {
  padding: 90px 0;
  background: #EAE3D2;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .cmp-msg {
    padding: 60px 0;
  }
}
.cmp-msg .grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 60px;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .cmp-msg .grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
/* 写真枠 → ロゴのみ（枠なし） */
.cmp-msg .ph {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1024px) {
  .cmp-msg .ph {
    max-width: 360px;
  }
}
.cmp-msg .ph img {
  width: 100%;
  max-width: 300px;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.cmp-msg .lead {
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 900;
  line-height: 1.55;
  margin-bottom: 24px;
}
.cmp-msg .lead .ac {
  color: #A93B34;
}
.cmp-msg .txt p {
  color: #555;
  font-size: 15px;
  margin-bottom: 16px;
}
.cmp-msg .sign {
  margin-top: 24px;
  font-size: 14px;
  color: #333;
}
.cmp-msg .sign b {
  font-size: 20px;
  font-weight: 900;
  margin-left: 8px;
}

/* ---------- 会社概要テーブル ---------- */
.cmp-info {
  padding: 90px 0;
}
@media screen and (max-width: 768px) {
  .cmp-info {
    padding: 60px 0;
  }
}

.cmp-stitle {
  margin-bottom: 30px;
}

.cmp-table {
  width: 100%;
  border-collapse: collapse;
}
.cmp-table th,
.cmp-table td {
  text-align: left;
  padding: 20px 8px;
  border-bottom: 1px solid #D9D0BB;
  vertical-align: top;
  font-size: 15px;
}
.cmp-table {
  /* 項目名の頭に赤い小六角 */
}
.cmp-table th {
  position: relative;
  width: 180px;
  padding-left: 22px;
  font-weight: 700;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .cmp-table th {
    width: 110px;
    font-size: 14px;
  }
}
.cmp-table th::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 28px;
  width: 9px;
  height: 10px;
  background: #A93B34;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.cmp-table td {
  color: #444;
}
@media screen and (max-width: 768px) {
  .cmp-table td {
    font-size: 14px;
  }
}

/* ---------- 沿革（六角マーカーのタイムライン） ---------- */
.cmp-history {
  padding: 0 0 100px;
}
@media screen and (max-width: 768px) {
  .cmp-history {
    padding-bottom: 70px;
  }
}

.hist-list {
  margin-top: 30px;
  padding-left: 0;
}

.hist-item {
  position: relative;
  padding: 0 0 34px 44px;
  /* 六角マーカー */
}
.hist-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 22px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: #A93B34;
}
.hist-item {
  /* 縦の連結線 */
}
.hist-item::after {
  content: "";
  position: absolute;
  left: 9.5px;
  top: 24px;
  bottom: 0;
  width: 1px;
  background: #D9D0BB;
}
.hist-item:last-child::after {
  display: none;
}
.hist-item .yr {
  font-family: "Graduate", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #A93B34;
}
.hist-item .ev {
  font-size: 15px;
  color: #444;
  margin-top: 4px;
}

/* ============================================================
   CONTACT（お問い合わせ / page-contact.php・confirm・completion）
   ------------------------------------------------------------
   左サイド（説明・TEL）＋ 右フォーム（Contact Form 7）
   ============================================================ */
.page-contact .ct-wrap {
  padding: 80px 0 100px;
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: 60px;
}
@media screen and (max-width: 1024px) {
  .page-contact .ct-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media screen and (max-width: 768px) {
  .page-contact .ct-wrap {
    padding: 56px 0 70px;
  }
}
.page-contact .ct-wrap {
  /* 確認・完了画面は1カラム */
}
.page-contact .ct-wrap--single {
  grid-template-columns: 1fr;
  max-width: 820px;
}

/* ---------- 左サイド ---------- */
.ct-side h2 {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 20px;
}
.ct-side p {
  color: #555;
  font-size: 15px;
  margin-bottom: 30px;
}
.ct-side .ct-note {
  font-size: 13px;
  color: #999;
  margin-bottom: 0;
}

/* TELブロック（左下ノッチ）
   枠線は 外側(罫線色ベタ) + 内側1px(白) の2枚重ね */
.ct-tel {
  position: relative;
  z-index: 0;
  display: block;
  padding: 26px;
  margin-bottom: 16px;
  background: #D9D0BB;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  transition: 0.3s;
}
.ct-tel::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: #F5F0E4;
  clip-path: inherit;
}
.ct-tel:hover {
  background: #A93B34;
}
.ct-tel .lb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Graduate", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #A93B34;
  margin-bottom: 8px;
}
.ct-tel .lb::before {
  content: "";
  width: 9px;
  height: 10px;
  background: #A93B34;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.ct-tel .num {
  font-family: "Graduate", sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ct-tel .hrs {
  font-size: 13px;
  color: #777;
  margin-top: 6px;
}

/* ---------- フォーム（CF7） ---------- */
.ct-form {
  background: #EAE3D2;
  padding: 44px;
}
@media screen and (max-width: 768px) {
  .ct-form {
    padding: 28px;
  }
}
.ct-form {
  /* ------------------------------------------------------------
     CF7 実マークアップ（label で input をラップする形）に対応
       <label> 氏名<span class="red">必須</span>
         [text* your-name ...]
       </label>
     ------------------------------------------------------------ */
  /* 項目＝labelブロック単位 */
}
.ct-form label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 22px;
}
.ct-form {
  /* CF7がinputを包むspan。ラベル文字の下に落として全幅にする */
}
.ct-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 8px;
}
.ct-form {
  /* 必須／任意バッジ */
}
.ct-form .red,
.ct-form .blue {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: 8px;
  padding: 2px 8px;
  vertical-align: middle;
}
.ct-form .red {
  color: #F5F0E4;
  background: #A93B34;
}
.ct-form .blue {
  color: #666;
  background: #F5F0E4;
  box-shadow: 0 0 0 1px #D9D0BB inset;
}
.ct-form input[type=text],
.ct-form input[type=email],
.ct-form input[type=tel],
.ct-form select,
.ct-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid #D9D0BB;
  background: #F5F0E4;
  font-family: "Shippori Antique B1", sans-serif;
  font-size: 15px;
  font-weight: 400;
  transition: border 0.3s;
}
.ct-form input[type=text]:focus,
.ct-form input[type=email]:focus,
.ct-form input[type=tel]:focus,
.ct-form select:focus,
.ct-form textarea:focus {
  outline: none;
  border-color: #A93B34;
}
.ct-form textarea {
  min-height: 130px;
  resize: vertical;
}
.ct-form {
  /* 確認画面（multistep）で値が readonly / disabled 表示になるケース */
}
.ct-form input[readonly],
.ct-form textarea[readonly],
.ct-form input[disabled],
.ct-form textarea[disabled] {
  background: #EFE9DA;
  color: #333;
  border-color: #CFC5AE;
}
.ct-form {
  /* ------------------------------------------------------------
     プライバシーポリシー同意（label.policy + CF7 checkbox）
     ------------------------------------------------------------ */
}
.ct-form label.policy {
  text-align: center;
  font-weight: 400;
  margin: 30px 0 24px;
}
.ct-form label.policy .wpcf7-list-item {
  margin: 0;
}
.ct-form label.policy .wpcf7-list-item-label {
  font-size: 14px;
  color: #555;
  margin-left: 8px;
}
.ct-form label.policy input[type=checkbox] {
  width: auto;
  accent-color: #A93B34;
  transform: translateY(1px);
}
.ct-form {
  /* 旧マークアップ用（.ct-field / .ct-check）も一応残す */
}
.ct-form .ct-field {
  margin-bottom: 22px;
}
.ct-form .ct-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #555;
  margin-bottom: 24px;
}
.ct-form .req {
  color: #F5F0E4;
  background: #A93B34;
  font-size: 10px;
  margin-left: 8px;
  padding: 2px 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ct-form {
  /* 送信ボタン（平行四辺形・赤・全幅） */
}
.ct-form input[type=submit],
.ct-form button[type=submit],
.ct-form .wpcf7-submit,
.ct-form .ct-submit {
  background: #A93B34;
  color: #F5F0E4;
  border: none;
  padding: 18px;
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: "Shippori Antique B1", sans-serif;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: 0.3s;
}
.ct-form input[type=submit]:hover,
.ct-form button[type=submit]:hover,
.ct-form .wpcf7-submit:hover,
.ct-form .ct-submit:hover {
  background: #C24A3E;
}
.ct-form {
  /* 戻るボタン（multistep の確認画面） */
}
.ct-form .cf7mls_back,
.ct-form .wpcf7-previous {
  display: block;
  width: 100%;
  padding: 18px;
  margin-bottom: 12px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  font-family: "Shippori Antique B1", sans-serif;
  color: #F5F0E4;
  background: #2b2620;
  cursor: pointer;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: 0.3s;
}
.ct-form .cf7mls_back:hover,
.ct-form .wpcf7-previous:hover {
  background: #3b342c;
}
.ct-form {
  /* multistep のステップ表示・ラッパーは素の幅で使う */
}
.ct-form .cf7mls_progress_bar,
.ct-form .fieldset_content {
  width: 100%;
}
.ct-form {
  /* ------------------------------------------------------------
     確認ステップ（[multiform] で値だけ表示される）
     項目名＝太字、値＝通常ウェイトの罫線付きリストに見せる
     ------------------------------------------------------------ */
}
.ct-form.ct-form--confirm label {
  margin-bottom: 0;
  padding: 18px 0;
  border-bottom: 1px solid #D9D0BB;
}
.ct-form.ct-form--confirm {
  /* 値の表示部分 */
}
.ct-form.ct-form--confirm .wpcf7-form-control-wrap {
  font-size: 15px;
  font-weight: 400;
  color: #333;
  word-break: break-all;
}
.ct-form.ct-form--confirm {
  /* ボタン群は罫線の下に余白を取って配置 */
}
.ct-form.ct-form--confirm .wpcf7-previous,
.ct-form.ct-form--confirm .cf7mls_back {
  margin-top: 30px;
}
.ct-form {
  /* CF7 バリデーションメッセージ */
}
.ct-form .wpcf7-not-valid-tip {
  color: #C24A3E;
  font-size: 13px;
  margin-top: 6px;
}
.ct-form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid #D9D0BB;
  font-size: 14px;
  background: #F5F0E4;
}

/* ---------- ステップ表示（確認・完了） ---------- */
.ct-steps {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 34px;
}
.ct-steps .step {
  position: relative;
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 700;
  color: #999;
  background: #EAE3D2;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.ct-steps .step.on {
  background: #A93B34;
  color: #F5F0E4;
}

/* ---------- 完了画面 ---------- */
.ct-thanks {
  text-align: center;
  padding: 40px 0 20px;
}
.ct-thanks .ct-thanks-hex {
  width: 64px;
  height: 70px;
  margin: 0 auto 26px;
  background: #A93B34;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.ct-thanks h2 {
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 900;
  margin-bottom: 18px;
}
.ct-thanks p {
  color: #555;
  font-size: 15px;
  margin-bottom: 34px;
}

.ct-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Graduate", sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #2b2620;
  border-bottom: 2px solid #A93B34;
  padding-bottom: 6px;
  transition: gap 0.3s;
}
.ct-back:hover {
  gap: 18px;
}

/* ============================================================
   POLICY（プライバシーポリシー / page-policy.php）
   ------------------------------------------------------------
   タイトル帯のみ共通化。本文は素直な縦組みテキスト。
   ============================================================ */
.page-policy {
  padding: 80px 0 100px;
}
@media screen and (max-width: 768px) {
  .page-policy {
    padding: 56px 0 70px;
  }
}

.policy_contents {
  max-width: 900px;
}
.policy_contents h2 {
  position: relative;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  padding-left: 20px;
  /* 見出し頭の赤い小六角 */
}
.policy_contents h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 10px;
  background: #A93B34;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
@media screen and (max-width: 768px) {
  .policy_contents h2 {
    font-size: 16px;
  }
}
.policy_contents p {
  color: #555;
  font-size: 15px;
  margin-bottom: 44px;
}
@media screen and (max-width: 768px) {
  .policy_contents p {
    font-size: 14px;
    margin-bottom: 34px;
  }
}

/* ============================================================
   FOOTER（footer.php）
   ------------------------------------------------------------
   上部：Contactセクション（全ページ共通）
   下部：フッター本体
   ============================================================ */
/* ------------------------------------------------------------
   Contact セクション（黒背景・巨大六角アウトライン）
   ------------------------------------------------------------ */
.contact {
  padding: 130px 0;
  background: #2b2620;
  color: #F5F0E4;
  position: relative;
  overflow: hidden;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .contact {
    padding: 90px 0;
  }
}
.contact {
  /* 中央の巨大六角（薄いベタ塗り） */
}
.contact::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 760px);
  aspect-ratio: 1/1;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: rgba(245, 240, 228, 0.035);
  z-index: 0;
}
.contact {
  /* 上部の赤いグロー */
}
.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 100% at 50% 0%, rgba(169, 59, 52, 0.22), transparent 60%);
}
.contact h2 {
  font-size: clamp(30px, 5vw, 58px);
  font-weight: 900;
  line-height: 1.24;
  margin-bottom: 20px;
}
.contact h2 .ac {
  color: #A93B34;
}
.contact p {
  color: rgba(245, 240, 228, 0.7);
  font-size: 16px;
  margin-bottom: 44px;
}
.contact {
  /* Contactラベル（両脇に赤い小六角） */
}
.contact .en-lb {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Graduate", sans-serif;
  font-size: 14px;
  letter-spacing: 0.28em;
  color: #A93B34;
  margin-bottom: 20px;
}
.contact .en-lb::before, .contact .en-lb::after {
  content: "";
  width: 10px;
  height: 11px;
  background: #A93B34;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.contact-inner {
  position: relative;
  z-index: 2;
}

.contact-btns {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .contact-btns {
    flex-direction: column;
  }
}

/* 赤ボタン（フォームへ） */
.btn-red {
  background: #A93B34;
  color: #F5F0E4;
  padding: 20px 46px;
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: 0.3s;
}
.btn-red:hover {
  background: #C24A3E;
  transform: translateY(-3px);
}
@media screen and (max-width: 768px) {
  .btn-red {
    width: 100%;
    justify-content: center;
    clip-path: none;
  }
}

/* アウトラインボタン（電話）
   枠線は 外側(線色ベタ) + 内側1px(地色) の2枚重ね */
.btn-out {
  position: relative;
  z-index: 0;
  color: #F5F0E4;
  padding: 20px 46px;
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  background: rgba(245, 240, 228, 0.16);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: 0.3s;
}
.btn-out::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: #2b2620;
  clip-path: inherit;
}
.btn-out:hover {
  background: #A93B34;
  transform: translateY(-3px);
}
.btn-out .tel {
  font-family: "Graduate", sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
}
.btn-out .hrs {
  font-size: 12px;
  color: rgba(245, 240, 228, 0.6);
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .btn-out {
    width: 100%;
    justify-content: center;
    clip-path: none;
  }
}

/* ------------------------------------------------------------
   フッター本体
   ------------------------------------------------------------ */
/* ヘッダーと同じクリーム地＋濃い文字 */
.ft {
  background: #F5F0E4;
  color: rgba(43, 38, 32, 0.6);
  padding: 70px 0 30px;
}

.ft-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid #D9D0BB;
}
@media screen and (max-width: 768px) {
  .ft-top {
    flex-direction: column;
  }
}

.ft-logo img {
  height: 84px;
  margin-bottom: 20px;
}

.ft-info {
  font-size: 13px;
  line-height: 1.9;
}

.ft-nav {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}

.ft-col h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Graduate", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #A93B34;
  margin-bottom: 16px;
}
.ft-col h4::before {
  content: "";
  width: 9px;
  height: 10px;
  background: #A93B34;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.ft-col a {
  display: block;
  font-size: 14px;
  color: rgba(43, 38, 32, 0.72);
  margin-bottom: 12px;
  transition: 0.3s;
}
.ft-col a:hover {
  color: #2b2620;
}

.ft-bottom {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  font-family: "Graduate", sans-serif;
  letter-spacing: 0.08em;
}/*# sourceMappingURL=style.css.map */
/* ============================================================
   アメカジ 形状オーバーレイ（角丸・ステッチ・オフセット影）
   ------------------------------------------------------------
   _amekaji-shapes.scss のコンパイル結果。個別調整はSCSS側で。
   ============================================================ */

/* ヘッダーCTA：影は角丸の赤い面（::before）に付ける（四角い影のはみ出し防止） */
.hd-cta::before {
  transform: none;
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(43, 38, 32, 0.15);
}
.hd-cta:hover {
  transform: translate(2px, 2px);
}
.hd-cta:hover::before {
  box-shadow: 2px 2px 0 rgba(43, 38, 32, 0.15);
}

/* ボタン類：平行四辺形 → 角丸 */
.btn-red,
.wk-more a,
.ct-submit,
.wpcf7-submit,
.cf7mls_back,
.wpcf7-previous,
.ct-form input[type="submit"],
.ct-form button[type="submit"] {
  clip-path: none;
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(43, 38, 32, 0.15);
}
.btn-red:hover,
.wk-more a:hover,
.ct-submit:hover,
.wpcf7-submit:hover,
.ct-form input[type="submit"]:hover,
.ct-form button[type="submit"]:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(43, 38, 32, 0.15);
}

/* 電話アウトラインボタン：二重層 → 破線ボーダー */
.btn-out {
  clip-path: none;
  border-radius: 10px;
  background: transparent;
  border: 2px dashed rgba(245, 240, 228, 0.55);
  box-shadow: 4px 4px 0 rgba(43, 38, 32, 0.15);
}
.btn-out::before {
  display: none;
}
.btn-out:hover {
  background: rgba(169, 59, 52, 0.15);
  border-color: #A93B34;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(43, 38, 32, 0.15);
}

/* カード：ノッチ → 角丸＋オフセット影 */
.svc-card,
.str-card,
.wk-item,
.intro-img,
.wk-single-ph,
.cmp-msg .ph {
  clip-path: none;
  border-radius: 12px;
}
.svc-card {
  border: 2px dashed rgba(245, 240, 228, 0.2);
  box-shadow: 4px 4px 0 rgba(43, 38, 32, 0.15);
}
.str-card {
  box-shadow: 4px 4px 0 rgba(43, 38, 32, 0.15);
}
.str-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 rgba(43, 38, 32, 0.15);
}
.wk-item {
  box-shadow: 4px 4px 0 rgba(43, 38, 32, 0.15);
}

/* タグ／ピル：平行四辺形 → 角丸 */
.wk-fbtn {
  clip-path: none;
  border-radius: 999px;
  background: transparent;
  border: 2px dashed rgba(43, 38, 32, 0.35);
}
.wk-fbtn::before {
  display: none;
}
.wk-fbtn.on,
.wk-fbtn:hover {
  background: #2b2620;
  border-color: #2b2620;
}
.team-tag {
  clip-path: none;
  border-radius: 999px;
  background: transparent;
  border: 2px dashed rgba(245, 240, 228, 0.55);
}
.team-tag::before {
  display: none;
}
.team-tag::after {
  content: "●";
  font-size: 7px;
  margin-right: 8px;
  color: #C8922B;
  vertical-align: middle;
}
.team-tag:hover {
  background: #A93B34;
  border-color: #A93B34;
  color: #F5F0E4;
}
.svc-txt .tag {
  clip-path: none;
  border-radius: 6px;
  background: #2E3A4E;
}
.wk-tag,
.wk-single-cat {
  clip-path: none;
  border-radius: 6px;
}
.ct-steps .step {
  clip-path: none;
  border-radius: 999px;
}

/* TEL枠：ノッチ二重層 → 角丸＋ステッチ */
.ct-tel {
  clip-path: none;
  border-radius: 12px;
  background: transparent;
  border: 2px dashed rgba(43, 38, 32, 0.35);
}
.ct-tel::before {
  display: none;
}
.ct-tel:hover {
  background: rgba(169, 59, 52, 0.08);
  border-color: #A93B34;
}
.sp-tel {
  clip-path: none;
  border-radius: 12px;
  background: #332d26;
  border: 2px dashed rgba(245, 240, 228, 0.55);
}
.sp-tel::before {
  display: none;
}

/* Hero下端：斜めカット → ポケットの縫い取り線（破線） */
.hero-cut {
  clip-path: none;
  height: 0;
  background: transparent;
  border-bottom: 3px dashed rgba(245, 240, 228, 0.55);
  opacity: 0.55;
}

/* 背景の装飾六角を非表示（Intro / Service / Contact） */
.intro::before,
.service::after,
.contact::before {
  display: none;
}