/* ===== Base Styles ===== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333333;
  overflow-x: hidden;
}

/* ===== Seigaiha (Blue Ocean Wave) SVG Pattern ===== */
.seigaiha-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%235B8C6A' stroke-width='0.8'%3E%3Cpath d='M0 40 A20 20 0 0 1 40 40 A20 20 0 0 1 80 40'/%3E%3Cpath d='M0 40 A15 15 0 0 1 40 40 A15 15 0 0 1 80 40'/%3E%3Cpath d='M0 40 A10 10 0 0 1 40 40 A10 10 0 0 1 80 40'/%3E%3Cpath d='M-40 80 A20 20 0 0 1 0 80 A20 20 0 0 1 40 80'/%3E%3Cpath d='M-40 80 A15 15 0 0 1 0 80 A15 15 0 0 1 40 80'/%3E%3Cpath d='M-40 80 A10 10 0 0 1 0 80 A10 10 0 0 1 40 80'/%3E%3Cpath d='M40 80 A20 20 0 0 1 80 80 A20 20 0 0 1 120 80'/%3E%3Cpath d='M40 80 A15 15 0 0 1 80 80 A15 15 0 0 1 120 80'/%3E%3Cpath d='M40 80 A10 10 0 0 1 80 80 A10 10 0 0 1 120 80'/%3E%3Cpath d='M-40 0 A20 20 0 0 1 0 0 A20 20 0 0 1 40 0'/%3E%3Cpath d='M-40 0 A15 15 0 0 1 0 0 A15 15 0 0 1 40 0'/%3E%3Cpath d='M-40 0 A10 10 0 0 1 0 0 A10 10 0 0 1 40 0'/%3E%3Cpath d='M40 0 A20 20 0 0 1 80 0 A20 20 0 0 1 120 0'/%3E%3Cpath d='M40 0 A15 15 0 0 1 80 0 A15 15 0 0 1 120 0'/%3E%3Cpath d='M40 0 A10 10 0 0 1 80 0 A10 10 0 0 1 120 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ===== Scroll Animation ===== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== Watermark Numbers ===== */
.watermark-number {
  position: absolute;
  font-size: 180px;
  font-weight: 700;
  color: rgba(91, 140, 106, 0.06);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  font-family: 'Noto Serif JP', serif;
}

@media (max-width: 767px) {
  .watermark-number {
    font-size: 120px;
  }
}

/* ===== Wave Dividers ===== */
.wave-divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== Header transition ===== */
.header-scrolled {
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* ===== FAQ Accordion transition ===== */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out, padding 0.35s ease-out;
}

.faq-answer.open {
  max-height: 500px;
}

/* ===== Focus visible ===== */
*:focus-visible {
  outline: 2px solid #2E7D8C;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== Smooth CTA hover ===== */
.cta-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-hover:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ===== Pricing card highlight ===== */
.pricing-popular {
  border: 2px solid #5B8C6A;
  position: relative;
}

/* ===== Profile section seigaiha subtle ===== */
.profile-seigaiha {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='0.8'%3E%3Cpath d='M0 40 A20 20 0 0 1 40 40 A20 20 0 0 1 80 40'/%3E%3Cpath d='M0 40 A15 15 0 0 1 40 40 A15 15 0 0 1 80 40'/%3E%3Cpath d='M0 40 A10 10 0 0 1 40 40 A10 10 0 0 1 80 40'/%3E%3Cpath d='M-40 80 A20 20 0 0 1 0 80 A20 20 0 0 1 40 80'/%3E%3Cpath d='M-40 80 A15 15 0 0 1 0 80 A15 15 0 0 1 40 80'/%3E%3Cpath d='M-40 80 A10 10 0 0 1 0 80 A10 10 0 0 1 40 80'/%3E%3Cpath d='M40 80 A20 20 0 0 1 80 80 A20 20 0 0 1 120 80'/%3E%3Cpath d='M40 80 A15 15 0 0 1 80 80 A15 15 0 0 1 120 80'/%3E%3Cpath d='M40 80 A10 10 0 0 1 80 80 A10 10 0 0 1 120 80'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ===== CTA seigaiha pattern ===== */
.cta-seigaiha {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='0.8'%3E%3Cpath d='M0 40 A20 20 0 0 1 40 40 A20 20 0 0 1 80 40'/%3E%3Cpath d='M0 40 A15 15 0 0 1 40 40 A15 15 0 0 1 80 40'/%3E%3Cpath d='M0 40 A10 10 0 0 1 40 40 A10 10 0 0 1 80 40'/%3E%3Cpath d='M-40 80 A20 20 0 0 1 0 80 A20 20 0 0 1 40 80'/%3E%3Cpath d='M-40 80 A15 15 0 0 1 0 80 A15 15 0 0 1 40 80'/%3E%3Cpath d='M-40 80 A10 10 0 0 1 0 80 A10 10 0 0 1 40 80'/%3E%3Cpath d='M40 80 A20 20 0 0 1 80 80 A20 20 0 0 1 120 80'/%3E%3Cpath d='M40 80 A15 15 0 0 1 80 80 A15 15 0 0 1 120 80'/%3E%3Cpath d='M40 80 A10 10 0 0 1 80 80 A10 10 0 0 1 120 80'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ===== Hero seigaiha decorative ===== */
.hero-seigaiha-deco {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%235B8C6A' stroke-width='0.8'%3E%3Cpath d='M0 40 A20 20 0 0 1 40 40 A20 20 0 0 1 80 40'/%3E%3Cpath d='M0 40 A15 15 0 0 1 40 40 A15 15 0 0 1 80 40'/%3E%3Cpath d='M0 40 A10 10 0 0 1 40 40 A10 10 0 0 1 80 40'/%3E%3Cpath d='M-40 80 A20 20 0 0 1 0 80 A20 20 0 0 1 40 80'/%3E%3Cpath d='M-40 80 A15 15 0 0 1 0 80 A15 15 0 0 1 40 80'/%3E%3Cpath d='M-40 80 A10 10 0 0 1 0 80 A10 10 0 0 1 40 80'/%3E%3Cpath d='M40 80 A20 20 0 0 1 80 80 A20 20 0 0 1 120 80'/%3E%3Cpath d='M40 80 A15 15 0 0 1 80 80 A15 15 0 0 1 120 80'/%3E%3Cpath d='M40 80 A10 10 0 0 1 80 80 A10 10 0 0 1 120 80'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
  opacity: 0.1;
}

/* ===== Alpine.js cloak ===== */
[x-cloak] {
  display: none !important;
}

/* ===== Contact Form 7 スタイル上書き ===== */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #E0DDD8;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.2s;
  background-color: rgba(247, 245, 242, 0.5);
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  ring: 2px;
  border-color: #5B8C6A;
  box-shadow: 0 0 0 3px rgba(91, 140, 106, 0.15);
}

.wpcf7 select {
  appearance: none;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath fill=%27%23666%27 d=%27M1.4 0L6 4.6 10.6 0 12 1.4l-6 6-6-6z%27/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.wpcf7 textarea {
  resize: vertical;
  min-height: 120px;
}

.wpcf7 input[type="submit"] {
  width: 100%;
  padding: 1rem;
  background-color: #5B8C6A;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.wpcf7 input[type="submit"]:hover {
  opacity: 0.9;
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.wpcf7 .wpcf7-not-valid-tip {
  color: #ef4444;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.wpcf7 .wpcf7-response-output {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.wpcf7 .wpcf7-mail-sent-ok {
  background-color: #E8F0EA;
  color: #5B8C6A;
  border: 1px solid #5B8C6A;
}

.wpcf7 .wpcf7-validation-errors {
  background-color: #fef2f2;
  color: #ef4444;
  border: 1px solid #ef4444;
}

.wpcf7 label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.375rem;
}

.wpcf7 .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 1.25rem;
}

.wpcf7 .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: #666666;
  line-height: 1.5;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1rem;
  height: 1rem;
}

.wpcf7 .wpcf7-spinner {
  display: none;
}