/* 0107 Products Page Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300!important;400!important;500!important;600&family=Noto+Sans+JP:wght@300!important;400!important;500!important;700&family=Noto+Serif+JP:wght@300!important;400!important;600!important;700&display=swap')!important;

.otona-about {
  --otona-pink: #7eb817!important;
  --otona-gray: #6a6c6e!important;
  --otona-text: #333333!important;
  --otona-muted: #777777!important;
  --otona-line: #dfdfde!important;
  --otona-bg: #f8f8f8!important;
  --otona-bg-pink: #f4f4f3!important;
  --otona-bg-soft: #f7f7f6!important;
  --otona-white: #ffffff!important;

  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif!important;
  color: var(--otona-text)!important;
  line-height: 1.8!important;
  background-color: var(--otona-white)!important;
  overflow-x: hidden!important;
}

.otona-about {
  width: 100vw!important;
  max-width: 100vw!important;
  margin-left: calc(50% - 50vw)!important;
  margin-right: calc(50% - 50vw)!important;
  overflow-x: hidden!important;
}

.otona-about *,
.otona-about *::before,
.otona-about *::after {
  box-sizing: border-box!important;
}

.otona-about-container {
  max-width: 1200px!important;
  margin: 0 auto!important;
  padding: 0 24px!important;
}

.otona-about-container-narrow {
  max-width: 800px!important;
}

.otona-about-section {
  padding: 100px 0!important;
}

@media (max-width: 768px) {
  .otona-about-section {
    padding: 64px 0!important;
  }
}

.otona-about-text-center {
  text-align: center!important;
}

.otona-about-text-pink {
  color: var(--otona-pink)!important;
}

.otona-about-text-pink-lead {
  color: var(--otona-pink)!important;
  font-weight: 700!important;
  font-size: 1.15rem!important;
  line-height: 1.6!important;
}

.otona-about-mt-md {
  margin-top: 40px!important;
}

.otona-about-section-header {
  margin-bottom: 56px!important;
}

.otona-about-section-english {
  display: block!important;
  font-family: 'Inter', sans-serif!important;
  color: var(--otona-pink)!important;
  font-weight: 600!important;
  font-size: 0.9rem!important;
  letter-spacing: 0.15em!important;
  margin-bottom: 12px!important;
}

.otona-about-section-title {
  font-family: 'Noto Serif JP', serif!important;
  font-size: 2.2rem!important;
  font-weight: 600!important;
  color: var(--otona-text)!important;
  line-height: 1.4!important;
  margin: 0 0 20px 0!important;
}

.otona-about-section-subtitle {
  font-size: 1.05rem!important;
  color: var(--otona-gray)!important;
  max-width: 680px!important;
  margin: 0 auto!important;
}

@media (max-width: 768px) {
  .otona-about-section-title {
    font-size: 1.6rem!important;
  }
  .otona-about-section-header {
    margin-bottom: 36px!important;
  }
}

.otona-about-btn {
  display: inline-block!important;
  font-family: 'Noto Sans JP', sans-serif!important;
  font-size: 0.95rem!important;
  font-weight: 500!important;
  padding: 14px 36px!important;

  text-decoration: none!important;
  transition: all 0.3s ease!important;
  text-align: center!important;
  cursor: pointer!important;
}

.otona-about-btn-primary {
  background-color: var(--otona-pink)!important;
  color: var(--otona-white)!important;
  border: 1px solid var(--otona-pink)!important;
}

.otona-about-btn-primary:hover {
  background-color: transparent!important;
  color: var(--otona-pink)!important;
}

.otona-about-btn-secondary {
  background-color: transparent!important;
  color: var(--otona-gray)!important;
  border: 1px solid var(--otona-gray)!important;
}

.otona-about-btn-secondary:hover {
  background-color: var(--otona-gray)!important;
  color: var(--otona-white)!important;
}

/* Scroll Animation System */
.otona-about-fade-up {
  opacity: 0!important;
  transform: translateY(40px)!important;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1)!important;
}

.otona-about-fade-up.otona-about-visible {
  opacity: 1!important;
  transform: translateY(0)!important;
}

.otona-about-delay-1 { transition-delay: 0.1s!important; }
.otona-about-delay-2 { transition-delay: 0.2s!important; }
.otona-about-delay-3 { transition-delay: 0.3s!important; }
.otona-about-delay-4 { transition-delay: 0.4s!important; }
.otona-about-delay-5 { transition-delay: 0.5s!important; }

/* Reveal Image Animation */
.otona-about-reveal-img {
  position: relative!important;
  overflow: hidden!important;

}

.otona-about-reveal-img img {
  transform: scale(1.2)!important;
  transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1)!important;
  display: block!important;
}

.otona-about-reveal-img::after {
  content: ""!important;
  position: absolute!important;
  top: 0!important;
  left: 0!important;
  width: 100%!important;
  height: 100%!important;
  background-color: var(--otona-bg-pink)!important;
  transform: scaleX(1)!important;
  transform-origin: right!important;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1)!important;
  z-index: 3!important;
}

.otona-about-reveal-img.otona-about-visible img {
  transform: scale(1)!important;
}

.otona-about-reveal-img.otona-about-visible::after {
  transform: scaleX(0)!important;
}

@media (prefers-reduced-motion: reduce) {
  .otona-about-fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .otona-about-reveal-img img {
    transform: none !important;
  }
  .otona-about-reveal-img::after {
    display: none !important;
  }
}

/* Hero Section */
.otona-about-hero {
  position: relative!important;
  background-color: var(--otona-bg-soft)!important;
  padding: 120px 0!important;
  min-height: 600px!important;
  display: flex!important;
  align-items: center!important;
}

.otona-about-hero-bg-text {
  position: absolute!important;
  top: 40px!important;
  left: 24px!important;
  font-family: 'Inter', sans-serif!important;
  font-size: 9vw!important;
  font-weight: 700!important;
  color: rgba(126, 184, 23, 0.02)!important;
  pointer-events: none!important;
  line-height: 1!important;
  letter-spacing: -0.02em!important;
  transition: transform 0.1s ease-out!important;
  will-change: transform!important;
}

.otona-about-hero-container {
  display: grid!important;
  grid-template-columns: 1.15fr 0.85fr!important;
  gap: 56px!important;
  align-items: center!important;
  position: relative!important;
  z-index: 2!important;
}

.otona-about-hero-tag {
  display: inline-block!important;
  font-family: 'Inter', sans-serif!important;
  font-size: 0.8rem!important;
  letter-spacing: 0.2em!important;
  color: var(--otona-pink)!important;
  margin-bottom: 16px!important;
  font-weight: 600!important;
}

.otona-about-hero-title {
  font-family: 'Noto Serif JP', serif!important;
  font-size: 2.8rem!important;
  font-weight: 700!important;
  line-height: 1.4!important;
  margin: 0 0 24px 0!important;
  color: var(--otona-text)!important;
}

.otona-about-hero-sub {
  font-size: 1.1rem!important;
  color: var(--otona-gray)!important;
  line-height: 1.6!important;
  margin-bottom: 32px!important;
}

.otona-about-hero-image-wrapper {
  position: relative!important;
}

.otona-about-hero-image-deco {
  position: absolute!important;
  top: -12px!important;
  right: -12px!important;
  width: 100%!important;
  height: 100%!important;
  border: 1px solid var(--otona-pink)!important;

  z-index: 1!important;
}

.otona-about-hero-image {
  position: relative!important;
  z-index: 2!important;
  width: 100%!important;
  height: auto!important;

  box-shadow: 0 10px 30px rgba(0,0,0,0.05)!important;
}

@media (max-width: 991px) {
  .otona-about-hero-container {
    grid-template-columns: 1fr!important;
    gap: 40px!important;
  }
  .otona-about-hero-image-wrapper {
    max-width: 500px!important;
    margin: 0 auto!important;
    width: 100%!important;
  }
}

@media (max-width: 768px) {
  .otona-about-hero {
    padding: 80px 0!important;
  }
  .otona-about-hero-title {
    font-size: 2rem!important;
  }
}

/* Products Detail Page Layout (2 Columns List style for details) */
.otona-about-products-detail-grid {
  display: flex!important;
  flex-direction: column!important;
  gap: 80px!important;
}

.otona-about-prod-detail-card {
  display: grid!important;
  grid-template-columns: 0.9fr 1.1fr!important;
  gap: 56px!important;
  align-items: center!important;
}

.otona-about-prod-detail-img-box {
  width: 100%!important;
  height: 380px!important;

}

.otona-about-prod-detail-img-box img {
  width: 100%!important;
  height: 100%!important;
  object-fit: cover!important;

}

.otona-about-prod-detail-content {
  display: flex!important;
  flex-direction: column!important;
}

.otona-about-prod-detail-cat {
  font-family: 'Inter', sans-serif!important;
  font-size: 0.85rem!important;
  font-weight: 600!important;
  color: var(--otona-pink)!important;
  letter-spacing: 0.1em!important;
  margin-bottom: 8px!important;
}

.otona-about-prod-detail-title {
  font-family: 'Noto Serif JP', serif!important;
  font-size: 1.8rem!important;
  font-weight: 600!important;
  margin: 0 0 12px 0!important;
  color: var(--otona-text)!important;
  line-height: 1.4!important;
}

.otona-about-prod-detail-lead {
  font-size: 1.05rem!important;
  font-weight: 600!important;
  color: var(--otona-pink)!important;
  margin-bottom: 20px!important;
}

.otona-about-prod-detail-text {
  font-size: 0.92rem!important;
  color: var(--otona-gray)!important;
  margin-bottom: 24px!important;
  line-height: 1.8!important;
}

.otona-about-prod-detail-meta {
  display: flex!important;
  flex-direction: column!important;
  margin-bottom: 32px!important;
  border-top: 1px solid var(--otona-line)!important;
  border-bottom: 1px solid var(--otona-line)!important;
  padding: 16px 0!important;
}

.otona-about-prod-detail-price {
  font-family: 'Inter', sans-serif!important;
  font-size: 1.6rem!important;
  font-weight: 600!important;
  color: var(--otona-text)!important;
  margin-bottom: 4px!important;
}

.otona-about-prod-detail-spec {
  font-size: 0.85rem!important;
  color: var(--otona-muted)!important;
}

.otona-about-prod-detail-content .otona-about-btn {
  align-self: flex-start!important;
}

@media (max-width: 991px) {
  .otona-about-products-detail-grid {
    gap: 56px!important;
  }
  .otona-about-prod-detail-card {
    grid-template-columns: 1fr!important;
    gap: 28px!important;
  }
  .otona-about-prod-detail-img-box {
    height: 280px!important;
  }
  .otona-about-prod-detail-title {
    font-size: 1.5rem!important;
  }
}

/* Philosophy Section for Eye care (Alternative soft background style) */
.otona-about-philosophy {
  background-color: var(--otona-bg-soft)!important;
}

/* Related Cards */
.otona-about-related {
  background-color: var(--otona-white)!important;
}

.otona-about-related-grid {
  display: grid!important;
  grid-template-columns: repeat(3, 1fr)!important;
  gap: 32px!important;
}

.otona-about-related-card {
  background-color: var(--otona-white)!important;

  overflow: hidden!important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02)!important;
  border: 1px solid var(--otona-line)!important;
  text-decoration: none!important;
  display: flex!important;
  flex-direction: column!important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1)!important;
}

.otona-about-related-card:hover {
  transform: translateY(-8px)!important;
  border-color: var(--otona-pink)!important;
  box-shadow: 0 12px 30px rgba(126, 184, 23, 0.08)!important;
}

.otona-about-related-img-box {
  position: relative!important;
  height: 180px!important;
  overflow: hidden!important;
}

.otona-about-related-img-box img {
  width: 100%!important;
  height: 100%!important;
  object-fit: cover!important;
  transition: transform 0.8s ease!important;
}

.otona-about-related-card:hover .otona-about-related-img-box img {
  transform: scale(1.05)!important;
}

.otona-about-related-badge {
  position: absolute!important;
  top: 12px!important;
  left: 12px!important;
  background-color: var(--otona-pink)!important;
  color: var(--otona-white)!important;
  font-family: 'Inter', sans-serif!important;
  font-size: 0.7rem!important;
  font-weight: 600!important;
  letter-spacing: 0.1em!important;
  padding: 3px 8px!important;

  box-shadow: 0 2px 5px rgba(0,0,0,0.1)!important;
}

.otona-about-related-content {
  padding: 24px!important;
  flex-grow: 1!important;
  display: flex!important;
  flex-direction: column!important;
}

.otona-about-related-title {
  font-size: 1.15rem!important;
  font-weight: 600!important;
  margin: 0 0 12px 0!important;
  color: var(--otona-text)!important;
}

.otona-about-related-text {
  font-size: 0.85rem!important;
  color: var(--otona-gray)!important;
  line-height: 1.7!important;
  margin: 0 0 20px 0!important;
  flex-grow: 1!important;
}

.otona-about-related-link {
  font-size: 0.88rem!important;
  font-weight: 600!important;
  color: var(--otona-pink)!important;
  display: flex!important;
  align-items: center!important;
  gap: 6px!important;
  transition: gap 0.3s ease!important;
}

.otona-about-related-link::after {
  content: "→"!important;
  font-family: 'Inter', sans-serif!important;
}

.otona-about-related-card:hover .otona-about-related-link {
  gap: 12px!important;
}

@media (max-width: 991px) {
  .otona-about-related-grid {
    grid-template-columns: repeat(2, 1fr)!important;
    gap: 24px!important;
  }
}

@media (max-width: 768px) {
  .otona-about-related-grid {
    grid-template-columns: 1fr!important;
    gap: 20px!important;
  }
}

@media (max-width: 768px) {
.otona-about-btn {
    display: block!important;
}
.otona-about-btn-primary {
    margin-bottom: 20px;
}
}