/*
Theme Name: portfolio machine-corp
*/

/* -----------------------------------
 * ナビゲーションモーダル
 * --------------------------------- */
.nav-dialog {
  /* デフォルトのdialogスタイルをリセット */
  border: none;
  padding: 0;
  margin: 0;
  max-width: unset;
  max-height: unset;
  overflow: unset;
  background: none;

  /* フルスクリーン表示 */
  width: 100%;
  height: 100%;

  /* テキストカラー */
  color: var(--color--text--1);

  /* 背景を半透明の黒 + ブラー効果 */
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);

  /* アニメーション */
  opacity: 0;
  transition: opacity var(--duration), var(--duration);
  z-index: 100;
}

/* ::backdrop のスタイル */
.nav-dialog::backdrop {
  background-color: transparent;
}

/* トランジション用（data-open でフェードイン） */
.nav-dialog[data-open] {
  opacity: 1;
}

/* dialogのdisplay操作はできるだけ避けたいので、innerを用意してレイアウト管理 */
.nav-dialog__inner {
  /* 内部を縦向きフレックス（__body を flex:1 で広げるため） */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.nav-dialog__wrapper {
  display: flex;
  justify-content: center;
}
/* 閉じるボタンを配置するヘッダー */
.nav-dialog__head {
  max-width: 860px;
  width: 100%;
}
.nav-dialog__head__inner {
  display: flex;
  flex-shrink: 0;
}

/* ナビゲーションコンテンツ本体 */
.nav-dialog__body {
  /* 高さを広げる */
  flex: 1;

  /* 要素が増えて画面サイズを超えたらここをスクロールできるようにする */
  overflow: auto;
  overscroll-behavior: contain;

  /* 中央配置 */
  display: grid;
  align-content: center;
  justify-items: center;
}

/* SPナビゲーションリスト */
.site-nav__list {
  list-style: none;
  padding: 0;

  /* 項目を縦並びで余白をgapで管理 */
  display: flex;
  flex-direction: column;
  gap: var(--space--4);
}

/* モーダル展開時のアニメーションを付ける */
.site-nav__item {
  opacity: 0;
  transform: translateY(2em);
  transition: transform var(--duration), opacity var(--duration);
}
.nav-dialog[data-open] .site-nav__item {
  transform: translateY(0) scale(1);
  opacity: 1;
}
/* 各アイテムに stagger（遅延）を付ける */
.nav-dialog[data-open] .site-nav__item:nth-child(1) { transition-delay: 0.05s; }
.nav-dialog[data-open] .site-nav__item:nth-child(2) { transition-delay: 0.10s; }
.nav-dialog[data-open] .site-nav__item:nth-child(3) { transition-delay: 0.15s; }
.nav-dialog[data-open] .site-nav__item:nth-child(4) { transition-delay: 0.20s; }


/* ナビゲーションリンク */
.site-nav__item > a {
  color: var(--color--text--2);
  text-decoration: none;
  font-size: 2em;
  font-family: serif;
  font-style: italic;

  display: inline-flex;
  padding: 0.25em 0.5em;
  border-radius: 2px;
  transition-duration: var(--duration);
  transition-property: color, scale;
}
@media (any-hover: hover) {
  .site-nav__item > a:hover {
    color: var(--color--accent);
    scale: 1.05;
  }
}

/* --- サイトナビゲーション用トグルボタン --- */
.menu-btn {
  /* buttonのスタイルリセット */
  font: inherit;
  width: auto;
  height: auto;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;

  /* ボタンのスタイル */
  border-radius: 4px;
  padding: 0.5rem;
  margin-inline-start: auto;
  transition: opacity var(--duration);
}

/* メニューを開くボタン: メニュー展開時にフェードアウト */
.menu-btn--open {
  opacity: 1;
}
/* body:has() は処理負荷が高いので、隣接セレクタを使う */
.nav-dialog[data-open] ~ .header .menu-btn--open,
.nav-dialog[data-open] + .header .menu-btn--open {
  opacity: 0;
  pointer-events: none;
}

/* メニューを閉じるボタン: dialog展開時にフェードイン */
.menu-btn--close {
  opacity: 0;
}
.nav-dialog[data-open] .menu-btn--close {
  opacity: 1;
}

/* ハンバーガーアイコン */
.menu-icon {
  width: 1.5em;
  height: 1.5em;
  display: grid;
  align-content: center;
  gap: 0.375em;
  transition: gap var(--duration);
}
.menu-icon > span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: rgb(17 24 39);
  transition-duration: var(--duration);
  transition-property: transform, opacity;
}

/* 閉じるボタンのアイコン */
.menu-icon--close > span {
  grid-area: 1/1;
  --rotate: 45deg;
  transition: transform var(--duration);
}
.menu-icon--close > span:first-child {
  transform: rotate(var(--rotate));
}
.menu-icon--close > span:last-child {
  transform: rotate(calc(var(--rotate) * -1));
}
/* ホバーアニメーション */
@media (any-hover: hover) {
  .menu-btn--open:hover > .menu-icon {
    gap: 0.25em;
  }
  .menu-btn--close:hover > .menu-icon > span {
    --rotate: 30deg;
  }
}

.display-none {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================
  Header
========================================================= */
/* ヘッダー（全ページ共通ベース） */
.header {
  position: fixed;
  display: flex;
  width: 100%;
  padding: 0 var(--space--8);
  top: 0;
  color: var(--color--text--1);
  z-index: 100;

  /* すりガラス背景 */
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  /* 下部に薄いボーダー */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  /* 影で浮き上がり感を演出 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);


}
/* トップページ（front-page）のみヘッダーを黒にする */
.home .header {
  color: var(--color--text--2);
  mix-blend-mode: normal;
}

.site-header__inner {
  /* max-width: 860px; */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.site-header__inner > a {
  color: inherit;

}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space--2g);
  /* padding: calc(var(--space--2)*1) calc(var(--space--2)*2); */
  /* border: 1px solid transparent; */
}
.site-header__logo > img {
  width: 100px;
  height: 100px;
}

.site-header__logoText {
  font-weight: 700;
  letter-spacing: .02em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}

/* プライマリボタン */
.btn--primary {
  /* position: relative; */
  background-color: var(--color--btn);
  color: #fff;
  padding: calc(var(--space--2)*1.25) calc(var(--space--2)*2);
  box-shadow: inset 0 0 0 1px var(--color--btn);
  /* 擬似要素に z-index: -1 を使うのでスタッキングコンテキストを閉じておく */
  /* isolation: isolate; */
}

/* ----- ループアニメーションとホバーアニメーションを持つ、光るボタン ----- */
/* 定期的にキラッと光るボタン */
.button--shine {
  position: relative;
  overflow: hidden;
}

/* ループアニメーション */
@keyframes shine-run {
  0% {
    translate: -100% 0;
  }
  /* 全体の秒数のうち15%で素早く移動を完結させる */
  15% {
    translate: 100% 0;
  }
  /* 残り時間は待機 */
  100% {
    translate: 100% 0;
  }
}

/* ホバー時に発火するアニメーション */
@keyframes shine-hover {
  from {
    translate: -100% 0;
  }
  to {
    translate: 100% 0;
  }
}

/* 光りを表現する擬似要素 */
.button--shine::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  translate: -100% 0; /* 最初は左枠外に隠しておく */
  background: linear-gradient(
    60deg,
    transparent 40%,
    rgba(255, 255, 255, 0.3) 45%,
    rgba(255, 255, 255, 0.5) 60%,
    transparent 65%
  );

  /* 4秒のアニメーションをループする。 delay時間(3s)はhover解除からの再開時間になる. */
  animation: 4s shine-run 3s infinite;
}

/* ホバー時 */
@media (any-hover: hover) {
  .button--shine:hover::after {
    animation: 0.5s shine-hover;
  }
}
/* Tabキーによるフォーカス時も同じ表現 */
.button--shine:focus-visible::after {
  animation: 0.5s shine-hover;
}





/* ==========================================
  PC ナビゲーション
   ======================================= */
.pc-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.pc-nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pc-nav__item > a {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color--text--1);
  /* text-decoration: none; */
  transition: color var(--duration), background-color var(--duration);
}

@media (any-hover: hover) {
  .pc-nav__item > a:hover {
    color: var(--color--accent);
  }
}

/* 現在ページ */
.pc-nav__item.current-menu-item > a,
.pc-nav__item.current-page-ancestor > a {
  color: var(--color--accent);
  font-weight: 700;
  border-bottom: 2px solid var(--color--accent);
}
/* ==========================================
  PC CTA ボタン（ヘッダー右端）
   ======================================= */
.site-header__cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* =========================================================
  アクティブナビゲーションリンク（現在ページの下線）
  ========================================================= */

/* PC ナビ：アクティブリンクに下線 */
.pc-nav__item > a.is-active {
  color: var(--color--accent);
  font-weight: 700;
  border-bottom: 2px solid var(--color--accent);
  border-radius: 0;
}

/* SP ナビ：アクティブリンクに下線 */
.site-nav__item > a.is-active {
  color: var(--color--accent);
  border-bottom: 2px solid var(--color--accent);
}


/* ===========================
  キューブボタン
=========================== */
/* キューブボタン：白ベースのアウトライン */
.cube-button {
  position: relative;
  display: grid;
  justify-content: stretch;
  width: var(--cube-width);
  min-width: 120px;
  height: var(--cube-height);
  font-size: var(--font-size--xs);

  padding: 0;
  margin: 0;

  transition-duration: 0.4s;
  transform-style:  preserve-3d;
  perspective: var(--cube-width);

}

.cube-button__text {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  transform-origin: center center calc(var(--cube-height) * -0.5);

  width: 100%;
  height: 100%;
}

.cube-button__text:first-child {
  color: var(--color--btn);
  background-color: var(--color--bg--1, #fff);
  border: solid 4px currentColor;
}
.cube-button__text:last-child {
  color: var(--color--bg--1);
  background-color: var(--color--btn);
  transform: rotateX(-90deg);
}

@media (any-hover: hover) {
  .cube-button:hover .cube-button__text {
    transform: rotateX(90deg);
  }
  .cube-button:hover .cube-button__text:last-child {
    transform: rotateX(0deg);
  }
}
/* Tabキーによるフォーカス時も同じ表現 */
.cube-button:focus-visible .cube-button__text {
  transform: rotateX(90deg);
}
.cube-button:focus-visible .cube-button__text:last-child {
  transform: rotateX(0deg);
}



/* ===========================
  メインコンテンツ（全ページ共通ベース）
  フロントページ以外は即時フェードイン
=========================== */
.main {
  grid-area: main;
  container-type: inline-size;
  container-name: main;
  width: 100%;
  /* overflow-x: hidden; */

}

/* =========================================================
  Footer
  ========================================================= */
.footer {
  background-color: var(--color--bg--3, #f3f4f6);
  border-top: 1px solid var(--color--border, #d1d5db);
  padding: clamp(3rem, 6vw, 5rem) var(--space--4) clamp(2rem, 4vw, 3rem);
}

.footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

/* ── フッターナビゲーション ── */
.footer__nav {
  display: flex;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
  flex-wrap: wrap;
}

.footer__nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ナビタイトル */
.footer__nav-title {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color--text--1);
}

.footer__nav-title > a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

@media (any-hover: hover) {
  .footer__nav-title > a:hover {
    color: var(--color--accent);
  }
}

/* ナビリスト */
.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1rem;
}

.footer__nav-item > a {
  font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
  color: var(--color--text--1);
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block;
  position: relative;
}

/* 下線アニメーション */
.footer__nav-item > a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color--accent);
  transition: width 0.3s ease;
}

@media (any-hover: hover) {
  .footer__nav-item > a:hover {
    color: var(--color--accent);
  }

  .footer__nav-item > a:hover::after {
    width: 100%;
  }
}

/* ── ロゴ + 会社情報エリア ── */
.footer-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 4vw, 3rem);
}

/* ── ロゴ ── */
.footer__logo {
  display: flex;
  justify-content: center;
}

.footer__logo img {
  display: block;
  width: clamp(140px, 20vw, 180px);
  height: auto;
}

/* 会社情報（社名・住所・電話） */
.footer__company-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: clamp(0.875rem, 1.5vw, 0.9375rem);
  line-height: 1.7;
  color: var(--color--text--1);
}

.footer__company-name {
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.125rem);
  letter-spacing: 0.02em;
  margin: 0;
}

.footer__company-address {
  font-style: normal;
  margin: 0;
}

.footer__company-tel {
  margin: 0;
}

.footer__company-tel a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration);
}

@media (any-hover: hover) {
  .footer__company-tel a:hover {
    color: var(--color--accent);
    text-decoration: underline;
  }
}


/* ── コピーライト ── */
.footer__bottom {
  text-align: center;
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--color--border, #e5e7eb);
}

.footer__copyright {
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  color: var(--color--text--1);
  opacity: 0.7;
}



/* =========================================================
  SP / PC 表示切り替え レスポンス設定
  ========================================================= */

/* PC（768px 以上）: ハンバーガーを隠す */
@media (width >= 768px) {
  .menu-btn--open {
    display: none;
  }
}

/* SP（767px 以下）: PC ナビ・PC CTA を隠す / ハンバーガーを右端へ */
@media (width <= 767px) {
  .pc-nav {
    display: none;
  }

  .site-header__cta {
    display: none;
  }

  .menu-btn--open {
    margin-inline-start: auto;
  }

  /* ヘッダー左右余白をSPで調整 */
  .header {
    padding: 0 var(--space--4);
  }

  .nav-dialog__head {
    padding: 0 var(--space--4);
  }


/* =========================================================
  Footer
  ========================================================= */
  .footer__top {
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }

  .footer__logo img {
    width: 140px;
  }

  .footer__company-info {
    font-size: 0.875rem;
  }

  .footer__nav {
    grid-template-columns: 1fr;
    gap: 2rem;
  }



}