@charset "UTF-8";
/*
Theme Name: hygge
Theme URI:
Author: waju
Author URI:
Description: WordPressテーマです
Version: 1.0
*/

/* Sansilk Webフォント読み込み */
@font-face {
  font-family: 'Sansilk';
  src: url('fonts/Sansilk.woff2') format('woff2'),
       url('fonts/Sansilk.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ======================
   共通ベース
   ====================== */

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #ffffff;
  color: #000;
  font-family: "Times New Roman", "YuMincho", serif;
}

/* テーマ・ライト */
body.theme-light {
  background: #ffffff;
  color: #000000;
}

/* テーマ・ダーク（single-worker 以外） */
body.theme-dark:not(.single-worker) {
  background: #1E2022;
  color: #DDDDDD;
}

body.theme-dark:not(.single-worker) .front-nav .nav-link {
  color: #DDDDDD;
}

body.theme-dark:not(.single-worker) .front-nav .nav-link:hover {
  color: #ffffff;
}

body.theme-dark:not(.single-worker) #footer {
  color: #DDDDDD;
  background: #1E2022;
}

/* 画像のはみ出し防止（念のため） */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ======================
   共通レイアウト（container）
   ====================== */
/* いったん中身は空っぽにしておく（今は使わない） */
.container {}

/* ======================
   共通ヘッダー（TOP 以外も含むベース）
   ====================== */

/* ヘッダー全体 */
.site-header {
  padding-top: 80px;
  padding-bottom: 60px;
}

/* ヘッダー・SALON・MENU の横幅＆左右余白は inner が担当 */
.site-header__inner,
.page-salon__inner,
.page-menu__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px){
  .site-header__inner,
  .page-salon__inner,
  .page-menu__inner {
    padding: 0 20px;
  }
}

/* ======================
   共通フッター
   ====================== */

#footer {
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.12em;
  padding: 16px 40px 24px;
  margin-top: auto;
}

#footer .copyright {
  margin: 0;
}

@media (max-width: 768px) {
  #footer {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ======================
   ナビ共通：文字色・ホバー・現在ページ
   ====================== */

/* すべてのメニューリンク共通（ヘッダー & TOP 中央） */
.nav-link {
  color: #777;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* ホバーで少し濃く（ライトテーマ時） */
.nav-link:hover {
  color: #000;
}

/* 現在ページ（ライトテーマ）：少し濃く・太字 */
.nav-link.is-current {
  color: #000;
  font-weight: 600;
}

/* ======================
   ダークテーマ：ナビ色
   ====================== */

/* 線を白系に */
body.theme-dark .front-divider::before {
  border-bottom-color: #DDDDDD;
}

/* 全ナビの通常色（やや淡いグレー） */
body.theme-dark .nav-link {
  color: #9A9A9B;
}

/* ホバー時だけ少し明るく */
body.theme-dark .nav-link:hover {
  color: #DDDDDD;
}

/* ★現在ページ：くっきり白＋下線（このブロックは必ず .nav-link / :hover より後ろ） */
body.theme-dark.home .nav-home,
body.theme-dark.page-salon .nav-salon,
body.theme-dark.post-type-archive-menu .nav-menu,
body.theme-dark.post-type-archive-photograph .nav-photo,
body.theme-dark.single-photograph .nav-photo,
body.theme-dark.page-photograph .nav-photo,
body.theme-dark.post-type-archive-worker .nav-worker,
body.theme-dark.single-worker .nav-worker,
body.theme-dark.post-type-archive-blog .nav-blog,
body.theme-dark.single-blog .nav-blog,
body.theme-dark.blog .nav-blog,
body.theme-dark.single-post .nav-blog,
body.theme-dark.page-recruit .nav-recruit,
body.theme-dark .nav-link.is-current {
  color: #FFFFFF !important;  /* 他の指定より優先させる */
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
  padding-bottom: 2px;
}

/* ダークテーマ時はロゴを反転して白っぽく見せる */
body.theme-dark .front-logo img {
  filter: invert(1) brightness(1.15);
}

/* ======================
   Instagram アイコン
   ====================== */

/* a.nav-ig 自体は文字リンクと同じ扱い＋中央揃え */
.nav-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ライトテーマ時は .nav-link の color をそのまま継承させる */
}

/* inline SVG / <img> どちらでもOKなサイズ指定 */
.instagram-icon {
  width: 14px;
  height: 14px;
  display: block;
  transition: opacity 0.2s ease;
}

/* ホバー時の軽い変化（ライトテーマ） */
.nav-ig:hover .instagram-icon {
  opacity: 0.8;
}

/* ======================
   ダークテーマ時の Instagram アイコン
   ====================== */

/* ダーク時：通常はやや淡いグレーで、ホバー時は白寄りに */
body.theme-dark .nav-ig {
  color: #DADADC;  /* ← これが currentColor になってパスのfillに反映される */
}

body.theme-dark .nav-ig:hover {
  color: #FFFFFF;  /* ホバーでしっかり白 */
}

/* ついでに、アイコンの濃さも少しだけ変化させる */
body.theme-dark .nav-ig .instagram-icon {
  opacity: 0.9;
}

body.theme-dark .nav-ig:hover .instagram-icon {
  opacity: 1;
}

/* ======================
   TOP（HOME）ページ
   ====================== */

/* TOPページだけ「画面ぴったり」レイアウト */
body.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column; /* 上から header / main / footer */
}

/* トップではヘッダー非表示（Wixと同じイメージ） */
body.home .site-header {
  display: none;
}

/* main（front-page）が余った高さを全部とる＆縦中央寄せ */
.front-page {
  flex: 1;
  display: flex;
  align-items: center; /* 縦方向まんなか */
}

/* 中身ラッパー */
.front-page__center {
  width: 100%;
}

/* ロゴ＋線ブロック（ロゴを線の少し下に重ねる） */
.front-bar {
  position: relative;
  width: 100%;
  margin-bottom: 20px; /* 線 → メニューの距離 */
}

/* 全幅の線（画面端から端まで） */
.front-divider {
  position: relative;
  height: 1px;      /* 疑似要素用の高さだけ確保 */
}

/* 画面幅いっぱいに伸びる線を疑似要素で描画 */
.front-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;              /* 画面幅いっぱい */
  border-bottom: 1px solid #000;
  top: 0;
}

/* ロゴ共通（位置の基準） */
.front-logo {
  position: absolute;
  bottom: -35px; /* 線からロゴまでの距離・好みで微調整 */
}

/* ★ TOP 用：今まで気に入っていた動きはそのまま */
body.home .front-logo {
  left: clamp(
    0px,               /* 狭い時：左端で止まる */
    calc(50vw - 550px),/* 画面幅に合わせてスルっと左へ寄る */
    400px              /* 広い時：ここより右には行かない */
  );
}

/* ロゴ画像サイズ */
.front-logo img {
  display: block;
  width: 140px; /* ロゴの見た目サイズ。好みで微調整OK */
  height: auto;
}

/* メニューバー（中央寄せ） */
.front-nav {
  display: flex;
  justify-content: center;
  gap: 36px;
  font-size: 12px;
  letter-spacing: 0.12em;
  flex-wrap: nowrap;
}

/* ======================
   HOME 以外のヘッダー（中ページ用調整）
   ====================== */

/* ヘッダー全体の高さ（中ページ用。今は TOP と同じ値） */
body:not(.home) .site-header {
  padding-top: 80px;
  padding-bottom: 60px;
}

/* 線の位置＆中央寄せ（front-bar 自体は .site-header__inner の中に） */
body:not(.home) .site-header .front-bar {
  position: relative;
  margin: 0 auto 24px;
  padding-top: 40px;
}

/* ★ 中ページのロゴ位置：CONCEPT とほぼ同じ開始位置になるよう -17px */
body:not(.home) .front-logo {
  bottom: -35px !important;
  left: -17px;
}

/* 中ページのナビ（幅制限 & 中央寄せ） */
body:not(.home) .front-nav {
  display: flex;
  justify-content: center;
  gap: 36px;
  font-size: 12px;
  letter-spacing: 0.12em;
  flex-wrap: nowrap;
}

/* 960px 以下：ナビ折り返し */
@media (max-width: 960px) {

  .front-nav,
  body:not(.home) .front-nav {
    flex-wrap: wrap;      /* ← ここでやっと折り返しON */
    row-gap: 8px;
    column-gap: 24px;
    max-width: 90%;
    margin: 0 auto;
  }

  /* 文字が1行固定にならないように */
  .front-nav .nav-link {
    white-space: normal;
  }
}