.header {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  padding: clamp(20px, 4vw, 32px) 20px clamp(16px, 3vw, 24px);
  box-sizing: border-box;
  text-align: center;
}

body {
  margin: 0;
}

/* ロゴ：ヘッダー上部に中央配置 */
.logo {
  margin: 0 0 clamp(14px, 3vw, 24px);
}

.logo img {
  height: clamp(50px, 7vw, 90px);
}

.line{
  border: none;        /* デフォルトの線を消す */
  height: 1.5px;         /* 太さ */
  background-color: #333; /* 線の色 */
  width: calc(100% + 40px); /* .headerの左右padding(20px)分をはみ出させて端まで届かせる */
  margin-left: -20px;
  margin-right: -20px;
}

/* ハンバーガーボタン（モバイル用） */
.menu-btn,
.menu-close {
  display: none;
  background: none;
  border: none;
  font-size: 12px;
  letter-spacing: 0.15em;
  cursor: pointer;
}

/* ナビ全体：ロゴ下に横並びで中央配置 */
nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各リンク */
nav a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
  font-weight: 550;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* このファイルのデフォルト(緑)。各ページはbodyのページ識別クラスで個別の虹色に上書きする。 */
nav a:hover {
  color: #2e8b57;
}

/* レンタルスペース・料金：虹色の「赤」／作品募集ページ(class.html)も同色を流用 */
body.page-rental nav a:hover,
body.page-class nav a:hover {
  color: #e5484d;
}

/* 作家募集：虹色の「緑」 */
body.page-recruiting nav a:hover {
  color: #7fad8f;
}

/* お問い合わせ：虹色の「紫」 */
body.page-inquiry nav a:hover {
  color: #8e5fc4;
}

/* HOME：どのページからでも虹色のグラデーションで表示（ページ別の色より優先） */
body.page-rental nav a[href="main.html"]:hover,
body.page-class nav a[href="main.html"]:hover,
body.page-recruiting nav a[href="main.html"]:hover,
body.page-inquiry nav a[href="main.html"]:hover,
nav a[href="main.html"]:hover {
  background-image: linear-gradient(90deg, #e5484d, #c9a179, #e0b400, #7fad8f, #3f7fd1, #4a4e9e, #8e5fc4);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* 作家募集／お問い合わせページ用の見出し（レンタルスペース・料金／委託販売と同じアクセント線） */
.page-hero {
  max-width: 820px;
  margin: 40px auto 0;
  padding: 14px 20px 0;
  box-sizing: border-box;
  text-align: center;
  border-top: 3px solid #999;
}

.page-title {
  font-size: clamp(22px, 4vw, 28px);
  letter-spacing: 0.08em;
  margin: 0;
}

body.page-recruiting .page-hero {
  border-top-color: #7fad8f;
}

body.page-inquiry .page-hero {
  border-top-color: #8e5fc4;
}

/* 区切り線 */
nav .separator {
  color: #ccc;
  font-size: 21px;
  font-weight: 300;
  line-height: 1;
}

/* モバイル：ハンバーガーメニューに切り替え */
@media (max-width: 768px) {
  .menu-btn {
    display: block;
    position: absolute;
    top: clamp(20px, 4vw, 32px);
    right: 24px;
  }

  .menu-body {
    position: fixed;
    inset: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
  }

  .menu-body.is-open {
    transform: translateX(0);
  }

  .menu-close {
    display: block;
    position: absolute;
    top: 24px;
    right: 24px;
  }

  nav ul {
    flex-direction: column;
    gap: 28px;
  }

  .separator {
    display: none;
  }
}

/* ==== レンタルスペース料金 ==== */
/* アクセントは虹色をスペースごとに割り当てるが、彩度・明度を抑えて主張しすぎないようにする */
.rsp-page {
  max-width: 860px;
  margin: 0 auto 60px;
  padding: 0 20px;
  box-sizing: border-box;
  --rb-red: #c98888;
  --rb-orange: #c9a179;
  --rb-green: #7fad8f;
  --rb-blue: #7ea0c4;
  --rb-purple: #a189bf;
}

.rsp-hero {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
  padding-top: 14px;
  border-top: 3px solid #e5484d;
  opacity: 0.95;
}

.rsp-title {
  font-size: clamp(22px, 4vw, 28px);
  letter-spacing: 0.08em;
  margin: 0 0 12px;
}

/* スペースごとのカード（写真＋説明）。写真はクロップせず元画像の比率のまま全幅表示する */
.rsp-space {
  border-top: 1px solid #ddd;
  padding: 32px 0;
}

.rsp-space-1 { --rb-accent: var(--rb-red); }
.rsp-space-2 { --rb-accent: var(--rb-orange); }
.rsp-space-3 { --rb-accent: var(--rb-green); }

.rsp-space-photo {
  border-radius: 10px;
  overflow: hidden;
  background: #eee;
  margin-top: 18px;
}

.rsp-space-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.rsp-space-name {
  font-size: 19px;
  color: #333;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  border-left: 4px solid var(--rb-accent, #999);
  padding-left: 10px;
}

.rsp-space-desc {
  line-height: 1.8;
  margin: 0 0 14px;
}

.rsp-price-list {
  margin: 0 0 12px;
  padding-left: 1.1em;
  line-height: 1.9;
}

.rsp-price-list li::marker {
  color: var(--rb-accent, #999);
}

.rsp-space-note {
  font-size: 13px;
  color: #777;
  margin: 0 0 8px;
}

.rsp-space-free {
  font-size: 14px;
  color: #555;
  margin: 0;
}

/* 共通の案内セクション */
.rsp-info {
  border-top: 1px solid #ddd;
  padding: 28px 0;
}

.rsp-info-title {
  font-size: 18px;
  color: #333;
  letter-spacing: 0.05em;
  margin: 0 0 14px;
}

.rsp-info p {
  line-height: 1.8;
  margin: 0 0 10px;
}

.rsp-info-list {
  margin: 0 0 10px;
  padding-left: 1.2em;
  line-height: 1.9;
}

.rsp-info-list li {
  margin-bottom: 6px;
}

/* ==== フッター ==== */
.footer {
  text-align: center;
  padding: 24px 20px;
  border-top: 1px solid #eee;
  color: #999;
  font-size: 12px;
}

.footer p {
  margin: 0;
}