body {
  font-family: 'Noto Serif JP', serif;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #333;
}

.hero {
  position: relative;
  text-align: center;
  padding: 2rem;
  background: #fff;
}

.hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
}

.logo-image {
  display: block;
  width: 140px; /* default desktop size */
  height: auto;
  object-fit: contain;
}

@media screen and (max-width: 767px) {
  .logo-image {
    width: 100px;
  }
}

@media screen and (min-width: 1025px) {
  .logo-image {
    width: 160px;
  }
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: 0;
}

.nav-links a {
  text-decoration: none;
  color: #333;
}

.nav-links a:hover {
  color: #555;
  text-decoration: underline;
}

.hero-content h1 {
  font-size: 2rem;
  margin: 0.5rem 0;
}

.hero-content p {
  font-size: 1rem;
  color: #666;
}

.services, .gallery, .contact-form {
  padding: 2rem;
}

.services ul, .gallery ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0;
}

.contact-form form {
  max-width: 600px;
  margin: auto;
}

.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
}

button {
  padding: 0.5rem 1rem;
  background: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}

footer {
  text-align: center;
  padding: 1rem;
  background: #eee;
  font-size: 0.9rem;
}

@media screen and (max-width: 767px) {
  .hero-content h1 {
    font-size: 1.5rem;
  }
  .nav-links {
    flex-direction: column;
    gap: 0.5rem;
  }
}

@media screen and (min-width: 1025px) {
  .hero-image {
    width: 60%;
    margin: 0 auto;
  }
}
.services, .gallery, .contact-form {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;         /* セクション全体を中央に配置 */
  text-align: left;       /* テキストは左揃え */
}
.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem auto; /* 上下に余白＋中央配置 */
  border-radius: 8px; /* 角を少し丸くして柔らかい印象に */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影で立体感 */
}

/* 段落の読みやすさ向上（日本語向け） */
.gallery p, .services p {
  text-indent: 1.5em;    /* 行頭の字下げ */
  line-height: 1.9;      /* 行間を広めに */
  margin-top: 0;         /* 段落上の余白を抑える */
  margin-bottom: 1.25em; /* 段落間を広めにして読みやすく */
  white-space: pre-wrap; /* HTML内の改行を尊重する */
}

/* Vision セクションの署名を右揃えにする */
.vision-signature {
  text-align: right;
  text-indent: 0;      /* 署名は字下げしない */
  font-size: 0.95rem;
  color: #555;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

/* スムーズスクロール */
html {
  scroll-behavior: smooth;
}

/* 固定表示の「ホームに戻る」ボタン */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: #333;
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform .18s ease, opacity .18s ease;
}

.back-to-top:hover {
  transform: translateY(-3px);
}

.back-to-top:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 初期は非表示にしてスクロール時に表示する */
.back-to-top.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

@media screen and (max-width: 420px) {
  .back-to-top { right: 12px; bottom: 12px; padding: 0.6rem 0.8rem; font-size: 0.9rem; }
}
.signature {
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  text-align: right;
  color: #4b3b2f;
  margin-top: 2rem;
  letter-spacing: 1px;
}
.closing-message {
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  text-align: right;
  color: #4b3b2f;
  margin-top: 2rem;
  letter-spacing: 1px;
}