/* =========================================
   基本設定
========================================= */
body {
  margin: 1px;
  padding-top: 80px;  /* 固定ヘッダーの高さ分 */
  background: #fff;
  font-family: "univers-next-pro", sans-serif;
  /* =========================================
   全ページ共通・ページ最下部余白
========================================= */
  padding-bottom: 50px; /* 余白は自由に調整可能 */

}

/* 共通リンクスタイル（ヘッダー用） */
a {
  text-decoration: none;
  color: #000;
}

a:visited {
  color: #000;
}

/* =========================================
   固定ヘッダー
========================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  padding: 0px;
}

/* ヘッダー内レイアウト（幅はギャラリーと共通） */
.site-header .inner {
  max-width: 1035px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px 0;
}

/* 左上ブランド */
.brand {
  font-size: 17px;
  font-weight: 500;
  font-style: normal;
}

/* 右上ナビ */
.header-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: #000;
  font-size: 15px;
  font-weight: 300;
}

.header-nav a:hover {
  color: #888f;
}

/* =========================================
   ヘッダー色変化
========================================= */
.site-header {
  mix-blend-mode: difference;
}

.site-header a,
.site-header .brand {
  color: #fff;   /* difference で白を基準に反転させる */
}

/* =========================================
   スマホ対応
========================================= */
@media screen and (max-width: 600px) {

  /* ヘッダー内の幅 */
  .site-header .inner {
    max-width: 100%;
  }

  /* brand（左揃え + 左余白10px） */
  .brand {
    align-self: flex-start;
    font-size: 15px;
    padding-left: 10px;   /* ← ここに変更 */
  }

  /* nav（右揃えのまま + 右余白10px） */
  .header-nav {
    align-self: flex-end;
    padding-right: 10px;
    text-align: left;
  }
    }

/* =========================================
   プロフィール
========================================= */

main {
  margin-top: 60px; /* お好みで数値調整 */
}

.en {
  max-width: 1035px;
  margin: 0px auto;
  padding: 0 px;
  box-sizing: border-box;
  row-gap: 5px;
  column-gap: 0px;
  font-family: "univers-next-pro", serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 60px; /* 英文のあとにスペースを空ける */
  
}

.jp {
  max-width: 1035px;
  margin: 0px auto;
  padding: 0px;
  box-sizing: border-box;
  row-gap: 5px;
  column-gap: 0px;
  font-size: 12px;
  font-weight: 100;
  line-height: 1.5;
}

.title-en {
  font-size: 13px;
  font-weight: 300;
}

.title-jp {
  font-size: 12px;
  font-family: "Yu Gothic", "游ゴシック体", "YuGothic", sans-serif;
  font-weight: 100;
}

.jp-font {
  font-family: "Yu Gothic", "游ゴシック体", "YuGothic", sans-serif;
  line-height: 1.6;
}

.title-en {
  margin-bottom: 4px; /* ← 英語タイトルと名前の間を縮める */
}

.designer-names {
  margin-top: 0;
}

.title-jp {
  margin-bottom: 4px; /* ← 日本語タイトルと名前の間を縮める */
}

.jp-font {
  margin-top: 0;
}


.contact-block {
  max-width: 1035px;
  margin: 50px auto 0;
  padding: 0px;
  font-size: 13px;
  font-family: "univers-next-pro", sans-serif;
  font-weight: 300;
  box-sizing: border-box;
}

.contact-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 6px;
}

.contact-label {
  width: 75px;
  font-weight: 100;
  white-space: nowrap;
}

.contact-value a {
  color: #000;
  text-decoration: none;
}

.contact-value a:hover {
  text-decoration: underline;
}

/* =========================================
   スマホ時：ヘッダー以外のテキストに左右10px余白
========================================= */
@media screen and (max-width: 600px) {

  /* 英語プロフィール */
  .en {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* 日本語プロフィール */
  .jp {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* 問い合わせブロック */
  .contact-block {
    padding-left: 10px;
    padding-right: 10px;
  }
}