@charset "utf-8";

/* ヒーローセクション */
.heroSection {
  position: relative;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  
  .heroImageContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    
    .heroImage {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.6);
    }
  }
  
  .heroContent {
    text-align: center;
    color: #fbfbfb;
    z-index: 1;
    max-width: 800px;
    padding: 0 20px;
    
    .heroTitle {
      font-size: clamp(2.5rem, 2rem + 2.5vw, 5rem);
      font-weight: 900;
      margin-bottom: 20px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }
    
    .heroSubtitle {
      font-size: clamp(1.2rem, 1rem + 1vw, 2rem);
      font-weight: 700;
      margin-bottom: 30px;
      color: #ffd700;
    }
    
    .heroDescription {
      font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
      line-height: 1.8;
      margin-bottom: 40px;
    }
    
    .heroBtn {
      display: inline-block;
      background: linear-gradient(45deg, #dc143c, #ff6347);
      color: #fbfbfb;
      padding: 15px 40px;
      border-radius: 50px;
      font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
      font-weight: 700;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(220, 20, 60, 0.3);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(220, 20, 60, 0.4);
      }
    }
  }
}

/* 特徴セクション */
.featuresSection {
  padding: 100px 0;
  background: #fbfbfb;
  
  .featuresGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    
    .featureCard {
      background: #fff;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
      }
      
      .featureImageContainer {
        .featureImage {
          height: 200px;
          object-fit: cover;
        }
      }
      
      .featureContent {
        padding: 30px;
        
        .featureTitle {
          font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
          font-weight: 700;
          color: #d2691e;
          margin-bottom: 15px;
        }
        
        .featureDescription {
          font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.1rem);
          line-height: 1.7;
          color: #666;
        }
      }
    }
  }
}

/* メニューセクション */
.menuSection {
  padding: 100px 0;
  background: linear-gradient(135deg, #2f4f4f 0%, #556b2f 100%);
  color: #fbfbfb;
  
  .sectionTitle {
    color: #fbfbfb;
    
    &::after {
      background: #ffd700;
    }
  }
  
  .menuGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    
    .menuCard {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 15px;
      overflow: hidden;
      backdrop-filter: blur(10px);
      transition: transform 0.3s ease, background 0.3s ease;
      
      &:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.15);
      }
      
      .menuImageContainer {
        .menuImage {
          height: 200px;
          object-fit: cover;
        }
      }
      
      .menuContent {
        padding: 25px;
        
        .menuTitle {
          font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
          font-weight: 700;
          color: #ffd700;
          margin-bottom: 15px;
        }
        
        .menuDescription {
          font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1rem);
          line-height: 1.6;
          color: #e0e0e0;
        }
      }
    }
  }
}

/* ウイルス感染拡大防止策セクション */
.virusPreventionSection {
  padding: 100px 0;
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
  color: #fbfbfb;
  
  .sectionTitle {
    color: #fbfbfb;
    
    &::after {
      background: #fbbf24;
    }
  }
  
  .virusPreventionContent {
    max-width: 1000px;
    margin-inline: auto;
    
    .virusPreventionIntro {
      text-align: center;
      margin-bottom: 60px;
      
      .virusPreventionMainText {
        font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
        font-weight: 700;
        color: #fef3c7;
        margin-bottom: 25px;
        line-height: 1.6;
      }
      
      .virusPreventionSubText {
        font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
        color: #e0e7ff;
        line-height: 1.8;
      }
    }
    
    .virusPreventionMeasures {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
      
      .measureItem {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        padding: 30px 20px;
        text-align: center;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-5px);
          background: rgba(255, 255, 255, 0.15);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        .measureIcon {
          font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
          margin-bottom: 15px;
          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }
        
        .measureTitle {
          font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
          font-weight: 700;
          color: #fef3c7;
          line-height: 1.4;
        }
      }
    }
  }
}

/* お問い合わせセクション */
.contactSection {
  padding: 100px 0;
  background: #d2691e;
  color: #fbfbfb;
  
  .sectionTitle {
    color: #fbfbfb;
    
    &::after {
      background: #ffd700;
    }
  }
  
  .contactContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    
    .contactInfo {
      .contactItem {
        margin-bottom: 30px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        backdrop-filter: blur(10px);
        
        .contactItemTitle {
          font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
          font-weight: 700;
          color: #ffd700;
          margin-bottom: 10px;
        }
        
        .contactItemText {
          font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1.1rem);
          line-height: 1.6;
        }
      }
    }
    
    .contactForm {
      .contactFormTitle {
        font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
        font-weight: 700;
        color: #ffd700;
        margin-bottom: 30px;
        text-align: center;
      }
      
      .form {
        .formGroup {
          margin-bottom: 25px;
          
          .formLabel {
            display: block;
            font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1.1rem);
            font-weight: 700;
            margin-bottom: 8px;
            color: #ffd700;
          }
          
          .formInput,
          .formTextarea {
            width: 100%;
            padding: 12px 15px;
            border: none;
            border-radius: 8px;
            font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1rem);
            background: rgba(255, 255, 255, 0.9);
            color: #333;
            transition: background 0.3s ease;
            
            &:focus {
              outline: none;
              background: #fff;
            }
          }
          
          .formTextarea {
            resize: vertical;
            min-height: 120px;
          }
        }
        
        .formBtn {
          width: 100%;
          background: linear-gradient(45deg, #dc143c, #ff6347);
          color: #fbfbfb;
          padding: 15px;
          border: none;
          border-radius: 8px;
          font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
          font-weight: 700;
          cursor: pointer;
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(220, 20, 60, 0.3);
          }
        }
      }
    }
  }
}

/* メディアクエリ */
@media (width < 768px) {
  .featuresGrid {
    grid-template-columns: 1fr;
  }
  
  .menuGrid {
    grid-template-columns: 1fr;
  }
  
  .virusPreventionMeasures {
    grid-template-columns: 1fr;
  }
  
  .contactContent {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .heroSection {
    .heroContent {
      .heroDescription br {
        display: none;
      }
    }
  }
}