/* 見出し・リード（仮） */
.c-heading1{
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: .02em;
}
.c-lead{
  margin-top: 12px;
  color: var(--muted);
}

/* ボタン */
.c-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  line-height: 1;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.c-btn:hover{ transform: translateY(-1px); }
.c-btn--primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.c-btn--primary:hover{ background: var(--accent2); border-color: var(--accent2); }

/* ヘッダー共通（仮） */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner{
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header__logo img{ height: 36px; width: auto; }

.site-nav__list{
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ハンバーガー */
.hamburger{
  display: none;
  border: 0;
  background: transparent;
  padding: 10px;
}
.hamburger__lines{
  display: block;
  width: 28px;
  height: 2px;
  background: var(--text);
  position: relative;
}
.hamburger__lines::before,
.hamburger__lines::after{
  content:"";
  position: absolute;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--text);
  transition: transform .2s ease, top .2s ease, opacity .2s ease;
}
.hamburger__lines::before{ top: -8px; }
.hamburger__lines::after{ top: 8px; }
.hamburger__label{
  display:block;
  font-size: 11px;
  margin-top: 6px;
  color: var(--muted);
}

/* SPメニュー */
.sp-menu{
  border-top: 1px solid var(--line);
  background: #fff;
}
.sp-menu__inner{ padding: 18px var(--gutter); }
.sp-menu__list a{
  display:block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 960px){
  .site-nav{ display:none; }
  .hamburger{ display:block; }
}

/* ハンバーガー開いた状態（JSで body に .is-menu-open を付ける） */
.is-menu-open .hamburger__lines{ background: transparent; }
.is-menu-open .hamburger__lines::before{ top: 0; transform: rotate(45deg); }
.is-menu-open .hamburger__lines::after{ top: 0; transform: rotate(-45deg); }

/* =========================
   Header (Toyo Kounetsu)
========================= */

.tk-header{
  position: sticky;
  top: 0;
  z-index: 80;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.tk-header__inner{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
}

.tk-header__brand{
  display: grid;
  gap: 10px;
}

.tk-header__logo img{
  width: min(220px, 100%);
  height: auto;
}

.tk-header__tagline{
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: .02em;
}

/* 右側（PC） */
.tk-header__right{
  display: grid;
  justify-items: end;
  gap: 10px;
}

/* utility */
.tk-utility__list{
  display: flex;
  gap: 26px;
  align-items: center;
  font-size: 16px;
  line-height: 1.2;
}

.tk-utility__list a{
  color: var(--text);
  opacity: .95;
}

/* gnav */
.tk-gnav__list{
  display: flex;
  gap: 44px;
  align-items: end;
}

.tk-gnav__link{
  position: relative;
  display: inline-block;
  padding: 8px 4px 10px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* アンダーライン：真ん中から出る */
.tk-gnav__link::after{
  content:"";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 100%;
  height: 2px;
  background: #CCC;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}

.tk-gnav__link:hover::after,
.tk-gnav__link:focus-visible::after{
  transform: translateX(-50%) scaleX(1);
}

/* 現在地（HOME下線固定） */
.tk-gnav__link.is-current::after{
  transform: translateX(-50%) scaleX(1);
}
.tk-gnav__link.is-current::after{
  transform: translateX(-50%) scaleX(1);
  background: #00bffe;
}
/* ===== SP burger ===== */
.tk-burger{
  display: none;
  border: 0;
  background: transparent;
  padding: 10px;
  margin-left: auto;
}

.tk-burger__lines{
  display: block;
  width: 36px;
  height: 3px;
  background: #111;
  position: relative;
}
.tk-burger__lines::before,
.tk-burger__lines::after{
  content:"";
  position: absolute;
  left: 0;
  width: 36px;
  height: 3px;
  background: #111;
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.tk-burger__lines::before{ top: -10px; }
.tk-burger__lines::after{ top: 10px; }

.tk-burger__sr{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===== Drawer ===== */
.tk-drawer{
  position: fixed;
  inset: 0;
  z-index: 200;
}

.tk-drawer__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .28s ease;
}

.tk-drawer__panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(80vw, 420px); /* “8割ぐらい” */
  background: #f2eee7; /* 画像のベージュっぽい雰囲気 */
  transform: translateX(100%);
  transition: transform .28s ease;
  padding: 24px 20px;
  overflow: auto;
}

.tk-drawer__close{
  border: 0;
  background: transparent;
  font-size: 34px;
  line-height: 1;
  padding: 6px 10px;
  margin-left: auto;
  display: block;
  opacity: .7;
}

.tk-drawer__list a{
  display: block;
  padding: 16px 8px;
  border-top: 1px solid rgba(0,0,0,.12);
  font-size: 18px;
  font-weight: 600;
}

/* open state */
.tk-drawer__overlay{
  opacity: 0;
  transition: opacity .30s ease;
}

.tk-drawer__panel{
  transform: translateX(102%); /* 少しだけ奥から */
  transition: transform .48s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

/* open */
.is-drawer-open .tk-drawer__overlay{
  opacity: 1;
}

.is-drawer-open .tk-drawer__panel{
  transform: translateX(0);
}
.is-drawer-open .tk-drawer__panel{
  transition-delay: .02s;
}
.tk-drawer__overlay{ background: rgba(0,0,0,.28); }


.is-drawer-open .tk-burger__lines{ background: transparent; }
.is-drawer-open .tk-burger__lines::before{ top: 0; transform: rotate(45deg); }
.is-drawer-open .tk-burger__lines::after{ top: 0; transform: rotate(-45deg); }

/* ===== Responsive ===== */
@media (max-width: 960px){

  /* 右側（PC用）を消す・バーガー表示 */
  .tk-header__right{ display: none; }
  .tk-burger{ display: inline-flex; align-self: start; }

  /* SPの全体：2段構成にする */
  .tk-header__inner{
    grid-template-columns: 1fr auto;  /* 1段目：ロゴ / バーガー */
    grid-template-rows: auto auto;    /* 2段目：タグライン */
    gap: 8px 12px;
    padding: 14px 0 12px;
    align-items: start;
  }

  /* 左のブランド枠：グリッドで“ロゴだけ”と“タグラインだけ”に分ける */
  .tk-header__brand{
    display: contents; /* ← これがポイント：中身を親グリッドに参加させる */
  }

  /* ロゴは1段目の左 */
  .tk-header__logo{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  /* タグラインは2段目で横いっぱい */
  .tk-header__tagline{
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: .02em;
    margin-top: 0;
    color: #111;
  }

  /* バーガーは1段目右、同じライン */
  .tk-burger{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self: end;
    margin: 0;
    padding: 8px;
  }

  /* ロゴサイズ（SPで小さめに） */
  .tk-header__logo img{
    width: min(180px, 68vw);
    height: auto;
  }

  /* sticky時に変な余白出さない */
  .tk-header{
    background: #fff;
  }

  .tk-burger{
    margin-top: 4px;      /* ← ここで下げる。好みで 4〜10px */
    align-self: center;   /* 上揃えじゃなく“中央寄せ”にする */
  }
}


/* =========================
   Footer
========================= */

.tk-footer{
  padding: clamp(34px, 4vw, 56px) 0 28px;
  background: #fff;
  width:1000px;
  margin:auto;
}

.tk-footer__inner{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
}

/* ロゴ */
.tk-footer__logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.tk-footer__logo img{
  height: clamp(34px, 4vw, 46px);
  width: auto;
  display: block;
}

/* ナビ（PC：横並び） */
.tk-footer__nav{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
  flex-wrap: nowrap; /* 1行で出したい */
  min-width: 0;
}

.tk-footer__nav a{
  color: #0b1b3a;           /* ここだけ好みで */
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
  font-size: 18px;
}

@media (hover:hover){
  .tk-footer__nav a:hover{
    opacity: .8;
    text-decoration: underline;
    text-underline-offset: 6px;
  }
}

/* コピーライト */
.tk-footer__copy{
  margin: clamp(26px, 3vw, 40px) 0 0;
  text-align: center;
  color: #222;
  font-size: 18px;
  letter-spacing: .02em;
}

/* =========================
   SP（スクショの2列並び）
========================= */
@media (max-width: 768px){
  .tk-footer{
    padding: 34px 0 26px;
    width:auto;
  }

  .tk-footer__inner{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 26px;
  }

  /* 2列のリンク一覧 */
  .tk-footer__nav{
    width: 80%;
    max-width: 520px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    justify-items: start;
    justify-content: center;
    margin:auto;
  }

  .tk-footer__nav a{
    font-size: 17px;
    letter-spacing: .04em;
  }

  .tk-footer__copy{
    margin-top: 34px;
    font-size: 15px;
  }
}


/* ベースコンテナ（昨日のと被るなら不要。クラス名だけ合わせてOK） */
.tk-container{
  width:min(1100px, calc(100% - 36px));
  margin-inline:auto;
}

/* パンくず */
.tk-breadcrumb{
  background:#fff;
  padding: 12px 0;
}
.tk-breadcrumb__nav{
  font-size: 14px;
  line-height: 1.4;
  color:#111;
}
.tk-breadcrumb__link{
  color:#111;
  text-decoration:none;
}
.tk-breadcrumb__link:hover{
  text-decoration:underline;
}
.tk-breadcrumb__sep{
  margin: 0 6px;
  color:#555;
}
.tk-breadcrumb__current{
  color:#111;
}

/* タイトル（ヒーロー） */
.tk-page-hero{
  position: relative;
  min-height: 160px;
  display:flex;
  align-items:center;
  background: #ddd; /* 画像がない時の保険 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.tk-page-hero::before{
  /* 文字が読めるように薄いベール */
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.15), rgba(255,255,255,.35));
}
.tk-page-hero__inner{
  position: relative;
  padding: 28px 0;
}
.tk-page-hero__title{
  font-size: clamp(28px, 2.4vw, 44px);
  font-weight: 800;
  letter-spacing: .02em;
  margin:0;
  color:#111;
}

/* ✅ ページ固有IDで背景を差し替え（会社概要） */
#tk-company-hero{
  background-image: url("../img/page/company/hero.jpg"); /* ←ここだけ差し替え */
}


/* SP調整 */
@media (max-width: 768px){
  .tk-breadcrumb{
    padding: 10px 0;
  }
  .tk-breadcrumb__nav{
    font-size: 12.5px;
  }
  .tk-page-hero{
    min-height: 120px;
  }
  .tk-page-hero__inner{
    padding: 22px 0;
  }
  .tk-page-hero__title{
  font-size: clamp(25px, 2.4vw, 44px);
  }
}

/* =========================================
  Scroll Reveal (common)
========================================= */

[data-reveal]{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}

[data-reveal].is-show{
  opacity: 1;
  transform: translateY(0);
}

/* 連続表示を気持ちよく：子要素ディレイ */
[data-reveal-stagger] > *{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}

[data-reveal-stagger].is-show > *{
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-stagger].is-show > *:nth-child(1){ transition-delay: .05s; }
[data-reveal-stagger].is-show > *:nth-child(2){ transition-delay: .12s; }
[data-reveal-stagger].is-show > *:nth-child(3){ transition-delay: .19s; }
[data-reveal-stagger].is-show > *:nth-child(4){ transition-delay: .26s; }
[data-reveal-stagger].is-show > *:nth-child(5){ transition-delay: .33s; }
[data-reveal-stagger].is-show > *:nth-child(6){ transition-delay: .40s; }

/* 動き弱めたい人用（端末設定に配慮） */
@media (prefers-reduced-motion: reduce){
  [data-reveal],
  [data-reveal-stagger] > *{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* =========================
  Shared: section head
========================= */
.tk-secHead{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 3vw, 56px);
  align-items: end;
  margin-bottom: clamp(26px, 4vw, 44px);
}

.tk-secHead__en{
  margin: 0;
  font-size: clamp(52px, 7vw, 92px);
  line-height: 1;
  font-weight: 300;
  letter-spacing: .01em;
}

.tk-secHead__right{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding-bottom: 10px;
}

.tk-secHead__jp{
  margin: 0;
  font-size: 16px;
  letter-spacing: .08em;
  font-weight: 600;
  white-space: nowrap;
}

.tk-secHead__right::after{
  content:"";
  height: 1px;
  background: #cfcfcf;
  width: 100%;
  display:block;
}

@media (max-width: 640px){
  .tk-secHead{
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
  }
  .tk-secHead__right{ padding-bottom: 0; }
}

/* =========================
  Shared: button
========================= */
.tk-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  font-size: 16px;
  letter-spacing: .06em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .2s ease, opacity .2s ease;
}
.tk-btn--primary{
  background: var(--tk-accent);
  color: #fff;
}
.tk-btn:hover{ transform: translateY(-1px); opacity: .92; }


/* =========================
  PageTitle
========================= */

.tk-page-hero {
  position: relative;
  padding: 60px 0;
  color: #fff;
  background-size: cover;
  background-position: center;
}

/* 会社概要 */
.tk-page-hero--company {
  background-image: url("../img/page/company/hero.jpg");
}

/* 事業内容 */
.tk-page-hero--business {
  background-image: url("../img/page/company/hero.jpg");
}

/* 施工実績 */
.tk-page-hero--works {
  background-image: url("../img/page/company/hero.jpg");
}

/* 採用情報 */
.tk-page-hero--recruit {
  background-image: url("../img/page/company/hero.jpg");
}

/* お問い合わせ */
.tk-page-hero--contact {
  background-image: url("../img/page/company/hero.jpg");
}

/* プライバシー */
.tk-page-hero--privacy {
  background-image: url("../img/page/company/hero.jpg");
}
/* ニュース */
.tk-page-hero--news {
  background-image: url("../img/page/company/hero.jpg");
}

/* =========================
   Breadcrumb
========================= */
.tk-breadcrumb{
  padding: 18px 0;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
}

.tk-breadcrumb .tk-container{
  width: min(100%, 1200px);
  margin: 0 auto;
  padding-inline: clamp(18px, 4vw, 60px);
}

.tk-breadcrumb nav{
  display: block;
}

.tk-breadcrumb__list{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-breadcrumb__item{
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #222;
}

.tk-breadcrumb__item + .tk-breadcrumb__item::before{
  content: "｜";
  display: inline-block;
  margin: 0 14px;
  color: #888;
}

.tk-breadcrumb__item a{
  color: #222;
  text-decoration: none;
  transition: opacity .25s ease;
}

.tk-breadcrumb__item a:hover{
  opacity: .7;
}

.tk-breadcrumb__item[aria-current="page"]{
  color: #222;
}

@media (max-width: 640px){
  .tk-breadcrumb{
    padding: 14px 0;
  }

  .tk-breadcrumb__item{
    font-size: 13px;
  }

  .tk-breadcrumb__item + .tk-breadcrumb__item::before{
    margin: 0 10px;
  }
}

.tk-globalNav a.is-current::after {
  transform: translateX(-50%) scaleX(1);
  background: #ccc;
}