@charset "UTF-8";
html {
  scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #ffffff;
  color: #4A5568;
  /* Slightly softer than pure black */ }

/* スクロール時のヘッダースタイル */
.header-scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  padding-top: .4rem;
  padding-bottom: .4rem; }
  .header-scrolled .nav-link, .header-scrolled .header-scrolled #menu-btn-container {
    color: #4A5568 !important;
    /* text-gray-700 */ }
  .header-scrolled .nav-link:hover {
    color: #14B8A6;
    /* text-teal-500 */ }
  .header-scrolled .logo-svg, .header-scrolled .logo-svg path, .header-scrolled #menu-btn-container path {
    stroke: #4A5568;
    color: #4A5568;
    fill: #4A5568; }

.hero-section {
  background-image: url("https://akkord.info/test/test2025-2/src/img/index.jpg");
  background-size: cover;
  background-position: center right;
  text-transform: uppercase; }

.page-hero-section {
  background-color: #F7FAFC; }

/* カスタムスタイル */
.swiper-pagination-bullet-active {
  background-color: #ffffff !important; }

.gallery-item:hover .gallery-overlay {
  opacity: 1; }

.news-card:hover img {
  transform: scale(1.05); }

.client-logo {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.3s ease; }

.client-logo:hover {
  filter: grayscale(0%);
  opacity: 1; }

.cta-section {
  background: linear-gradient(45deg, #14B8A6, #0D9488); }

/* ===== 追加：ページトップへ戻るボタンのスタイル ===== */
#back-to-top-btn {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; }

#back-to-top-btn.show {
  opacity: 1;
  visibility: visible; }

.cta-section {
  background: linear-gradient(45deg, #14B8A6, #0D9488); }

/* フォームのスタイル */
.form-input, .form-textarea, .form-select {
  border: 1px solid #CBD5E1;
  /* ボーダーの色を少し濃くしました */
  transition: border-color 0.3s ease; }

.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: #14B8A6;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2); }

.form-label {
  color: #4A5568;
  font-weight: 600; }

/* 必須・任意マークのスタイル */
.required-mark, .optional-mark {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 9999px;
  margin-left: 8px;
  vertical-align: middle;
  font-weight: 500; }

.required-mark {
  background-color: #FEE2E2;
  /* red-100 */
  color: #B91C1C;
  /* red-700 */ }

.optional-mark {
  background-color: #E5E7EB;
  /* gray-200 */
  color: #4B5563;
  /* gray-600 */ }

.template-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease; }

.template-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 15px -3px black, 0 4px 6px -4px black; }

.template-card-image-wrapper {
  aspect-ratio: 4 / 3;
  background-color: #f0f4f8; }