/* ========================================
   Kukulcan LP - Main Stylesheet
   ======================================== */

/* ========================================
   Color Palette (Design Regulation)
   ======================================== */
:root {
  /* BASE Colors */
  --kc-chocolate: #583b2e;  /* Chocolate Soil - BASE (テキスト、ダークカラー) */
  --kc-shell: #efebda;      /* Egg Shell - BASE (背景、ライトカラー) */
  
  /* THEME Color */
  --kc-green: #50ab9a;      /* Baby Green - THEME */
  
  /* ACCENT Color */
  --kc-red: #b6453e;        /* Tomato Jam - ACCENT (Kukulcan Red) */
  
  /* Legacy naming for compatibility */
  --kc-accent: var(--kc-red);
  --kc-ink: var(--kc-chocolate);
  --kc-cream: var(--kc-shell);
}

/* ========================================
   Typography (Design Regulation)
   ======================================== */
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--kc-chocolate);
}

/* 日本語タイトル用 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Shippori Mincho', serif;
}

/* 欧文タイトル用クラス */
.font-en {
  font-family: 'Figtree', sans-serif;
}

/* 本文用（デフォルトは既にNoto Sans JP） */
.font-ja {
  font-family: 'Noto Sans JP', sans-serif;
}

/* タイトル用明朝体 */
.font-mincho {
  font-family: 'Shippori Mincho', serif;
}

/* ========================================
   Utility Classes
   ======================================== */

/* Color Utilities */
.kc-accent {
  color: var(--kc-accent);
}

.kc-accent-bg {
  background: var(--kc-accent);
}

.kc-cream-bg {
  background: var(--kc-cream);
}

.kc-green {
  color: var(--kc-green);
}

.kc-green-bg {
  background: var(--kc-green);
}

.kc-green-bg-light {
  background: linear-gradient(180deg, #50ab9a10 0%, #50ab9a25 100%);
}

.kc-chocolate {
  color: var(--kc-chocolate);
}

.kc-chocolate-bg {
  background: var(--kc-chocolate);
}

.kc-shell-bg {
  background: var(--kc-shell);
}

.kc-red {
  color: var(--kc-red);
}

.kc-red-bg {
  background: var(--kc-red);
}

/* ========================================
   Wave Separators
   ======================================== */

/* Green wave (from design) */
.kc-green-wave {
  background: linear-gradient(180deg, 
    transparent 0%, 
    transparent 30%,
    var(--kc-green) 30%,
    var(--kc-green) 100%
  );
  clip-path: ellipse(70% 100% at 50% 100%);
}

/* Red/Pink wave gradient (from design) */
.kc-wave-red {
  background: linear-gradient(135deg, 
    #ff6b9d 0%,
    #c9466f 50%,
    var(--kc-green) 100%
  );
  clip-path: ellipse(70% 100% at 50% 100%);
}

/* Alternative wave styles */
.wave-top {
  clip-path: path("M0,80 C220,20 420,140 720,80 C980,30 1160,120 1440,80 L1440,0 L0,0 Z");
}

.wave-bottom {
  clip-path: path("M0,0 C220,60 420,-40 720,20 C980,70 1160,-20 1440,20 L1440,120 L0,120 Z");
}

/* ========================================
   Header Styles
   ======================================== */
header {
  transition: background-color 0.3s ease;
}

header.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* ========================================
   Smooth Scroll
   ======================================== */
html {
  scroll-behavior: smooth;
}

/* ========================================
   Animations
   ======================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.8s ease-out;
}



/* ========================================
   Teams Section - Organic Arc Clip Path
   ======================================== */
.team-image-clip {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  -webkit-clip-path: path("m85.19,66.74C.1,141.98-2.81,236.43,1.01,278.78c1.24,13.72,11.76,24.89,25.39,26.94,42.05,6.32,136.51,9,216.65-71.49,79.42-79.76,80.13-165.65,75.3-204.35-1.65-13.24-11.6-23.8-24.72-26.23C283.22,1.73,269.3,0,252.87,0c-44.07,0-106.26,12.43-167.68,66.74 Z");
    clip-path: path("m85.19,66.74C.1,141.98-2.81,236.43,1.01,278.78c1.24,13.72,11.76,24.89,25.39,26.94,42.05,6.32,136.51,9,216.65-71.49,79.42-79.76,80.13-165.65,75.3-204.35-1.65-13.24-11.6-23.8-24.72-26.23C283.22,1.73,269.3,0,252.87,0c-44.07,0-106.26,12.43-167.68,66.74 Z");
}
@media screen and (max-width: 768px) {
  .team-image-clip {
    -webkit-clip-path: path("m85.19,66.74C.1,141.98-2.81,236.43,1.01,278.78c1.24,13.72,11.76,24.89,25.39,26.94,42.05,6.32,136.51,9,216.65-71.49,79.42-79.76,80.13-165.65,75.3-204.35-1.65-13.24-11.6-23.8-24.72-26.23C283.22,1.73,269.3,0,252.87,0c-44.07,0-106.26,12.43-167.68,66.74 Z");
    clip-path: path("m85.19,66.74C.1,141.98-2.81,236.43,1.01,278.78c1.24,13.72,11.76,24.89,25.39,26.94,42.05,6.32,136.51,9,216.65-71.49,79.42-79.76,80.13-165.65,75.3-204.35-1.65-13.24-11.6-23.8-24.72-26.23C283.22,1.73,269.3,0,252.87,0c-44.07,0-106.26,12.43-167.68,66.74 Z");
  }
}

.profile-image {
  width: 320px;
}

/* ========================================
   Responsive Images
   ======================================== */
img {
  max-width: 100%;
  height: auto;
}

picture {
  display: block;
}

/* ========================================
   Custom Styles
   ======================================== */

/* Rounded sections for in Motion cards */
.rounded-card {
  border-radius: 50%;
  aspect-ratio: 1;
}

/* Shadow effects */
.shadow-soft {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Gradient overlays */
.gradient-overlay {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

/* ========================================
   Button Styles
   ======================================== */
.btn-primary {
  background: var(--kc-red);
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: opacity 0.3s ease;
}

.btn-primary:hover {
  opacity: 0.9;
}

/* ========================================
   Section Spacing
   ======================================== */
section {
  position: relative;
}

/* ========================================
   Mobile Menu (if needed)
   ======================================== */
#mobileMenu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background: white;
  transition: right 0.3s ease;
  z-index: 999;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

#mobileMenu.active {
  right: 0;
}

/* ========================================
   Accessibility
   ======================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus styles */
a:focus,
button:focus {
  outline: 2px solid var(--kc-green);
  outline-offset: 2px;
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  header,
  footer {
    display: none;
  }
}

#background-gradient {
  background: linear-gradient(to right, #b6453e 0%, #efebda 50%, #50ab9a 100%);
}

.background-gradient {
  background: linear-gradient(to right, #c6856e 0%, #efebda 50%, #50ab9a 100%);
}

#hero {
  background-image: url('../image/top_hero_background_square.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 底辺部を円弧状に切り取る */
  clip-path: ellipse(220% 100% at 50% 0%);
  padding-bottom: 100px; /* 円弧の深さを調整 */
  margin-bottom: 100px;
  @media (max-width: 768px) {
    clip-path: ellipse(350% 100% at 50% 0%);
  }
}

#journey {
  background-image: url('../image/top_Harvest_Journey.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.top-720 {
  margin-top: 1100px;
}

/* ========================================
   Tools Section Wave Border
   ======================================== */
#tools {
  position: relative;
/* 波線のスペースを確保 */
}

#motion {
  background-image: url('../image/top_inmotion_bg.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  @media (max-width: 1100px) {
    background-image: none;
    background-color: var(--kc-shell);
  }
}

/*
#tools::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: white;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='80' viewBox='0 0 1440 80' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M 0,40 Q 360,0 720,40 Q 1080,80 1440,40 L 1440,80 L 0,80 Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='80' viewBox='0 0 1440 80' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M 0,40 Q 360,0 720,40 Q 1080,80 1440,40 L 1440,80 L 0,80 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
*/

/* ========================================
   Motion Section Pointer Design
   ======================================== */

.motion-pointer {
  position: relative;
  height: 30px;
  width: 6px;
  background: white;
  margin: -25px auto 0 auto;
}

/* ポインターの先端の丸 */
.motion-pointer::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 完全な円形カード */
.motion-round-card {
  width: 240px;
  height: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  margin: 0 auto;
  @media (max-width: 768px) {
    width: 220px;
    height: 220px;
    padding: 0.5rem;
  }
}

@media (max-width: 768px) {
  .motion-round-card {
    padding: 2rem;
  }
}

/* ========================================
   Contact Button with Arrow
   ======================================== */
#contact-btn {
  position: relative;
}

#contact-btn::after {
  content: '▶';
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: white;
  opacity: 0.9;
}

#contact-btn:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(4px);
  transition: all 0.3s ease;
}