/* 0107 Guide 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;

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

  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 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 *,
.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;
}

/* Delay classes */
.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-desc {
  border-left: 2px solid var(--otona-pink)!important;
  padding-left: 20px!important;
  margin-bottom: 40px!important;
}

.otona-about-hero-desc p {
  margin: 0 0 6px 0!important;
  font-size: 1.05rem!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;
  }
  .otona-about-hero-buttons {
    flex-direction: column!important;
    gap: 12px!important;
  }
}

/* Concept / Flex Layouts */
.otona-about-concept-flex {
  display: grid!important;
  grid-template-columns: 0.82fr 1.18fr!important;
  gap: 56px!important;
  align-items: center!important;
}

.otona-about-concept-image-box {

}

.otona-about-concept-image {
  width: 100%!important;
  height: 460px!important;
  object-fit: cover!important;

}

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

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

.otona-about-concept-quote {
  font-family: 'Noto Serif JP', serif!important;
  font-size: 1.5rem!important;
  font-weight: 600!important;
  color: var(--otona-pink)!important;
  border-left: 3px solid var(--otona-pink)!important;
  padding-left: 24px!important;
  margin: 0 0 32px 0!important;
  line-height: 1.5!important;
}

.otona-about-concept-text p {
  font-size: 0.95rem!important;
  margin-bottom: 20px!important;
  line-height: 1.8!important;
}

@media (max-width: 991px) {
  .otona-about-concept-flex {
    grid-template-columns: 1fr!important;
    gap: 40px!important;
  }
  .otona-about-concept-image {
    height: 320px!important;
  }
}

/* Products/Concerns Grid */
.otona-about-products-overview {
  background-color: var(--otona-bg)!important;
}

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

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

  overflow: hidden!important;
  box-shadow: 0 5px 20px rgba(0,0,0,0.02)!important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1)!important;
  display: flex!important;
  flex-direction: column!important;
}

.otona-about-prod-card:hover {
  transform: translateY(-8px)!important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06)!important;
}

.otona-about-prod-img-wrapper {
  position: relative!important;
  height: 220px!important;
  overflow: hidden!important;
}

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

.otona-about-prod-badge {
  position: absolute!important;
  bottom: 12px!important;
  left: 12px!important;
  background-color: rgba(255, 255, 255, 0.9)!important;
  color: var(--otona-pink)!important;
  font-family: 'Inter', sans-serif!important;
  font-size: 0.75rem!important;
  font-weight: 600!important;
  letter-spacing: 0.1em!important;
  padding: 4px 10px!important;

}

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

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

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

/* Daily Routine Scene Grid */
.otona-about-salon-born {
  background-color: var(--otona-white)!important;
}

.otona-about-meet-grid {
  display: grid!important;
  grid-template-columns: 1fr 1fr!important;
  gap: 32px!important;
}

.otona-about-meet-card {
  background-color: var(--otona-bg-soft)!important;

  box-shadow: 0 5px 20px rgba(0,0,0,0.01)!important;
  display: flex!important;
  flex-direction: column!important;
}

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

.otona-about-meet-card-title {
  font-family: 'Noto Serif JP', serif!important;
  font-size: 1.5rem!important;
  font-weight: 600!important;
  margin: 0 0 8px 0!important;
  color: var(--otona-text)!important;
}

.otona-about-meet-card-subtitle {
  font-size: 0.9rem!important;
  font-weight: 600!important;
  color: var(--otona-pink)!important;
  margin-bottom: 24px!important;
}

.otona-about-meet-card-text {
  font-size: 0.92rem!important;
  color: var(--otona-gray)!important;
  line-height: 1.8!important;
}

@media (max-width: 991px) {
  .otona-about-meet-grid {
    grid-template-columns: 1fr!important;
    gap: 24px!important;
  }
  .otona-about-meet-content {
    padding: 32px 24px!important;
  }
}

/* FAQ Table */
.otona-about-company {
  background-color: var(--otona-bg-soft)!important;
}

.otona-about-company-table-wrapper {
  background-color: var(--otona-white)!important;
  padding: 48px!important;

  box-shadow: 0 5px 20px rgba(0,0,0,0.02)!important;
  border: 1px solid var(--otona-line)!important;
}

.otona-about-company-table {
  width: 100%!important;
  border-collapse: collapse!important;
}

.otona-about-company-table th,
.otona-about-company-table td {
  padding: 24px!important;
  border-bottom: 1px solid var(--otona-line)!important;
  font-size: 0.95rem!important;
}

.otona-about-company-table tr:last-child th,
.otona-about-company-table tr:last-child td {
  border-bottom: none!important;
}

.otona-about-company-table th {
  font-weight: 600!important;
  color: var(--otona-text)!important;
  width: 35%!important;
  text-align: left!important;
  vertical-align: top!important;
  line-height: 1.5!important;
}

.otona-about-company-table td {
  color: var(--otona-gray)!important;
  width: 65%!important;
  line-height: 1.8!important;
}

@media (max-width: 768px) {
  .otona-about-company-table-wrapper {
    padding: 24px!important;
  }
  .otona-about-company-table th,
  .otona-about-company-table td {
    padding: 16px 8px!important;
    font-size: 0.88rem!important;
  }
  .otona-about-company-table th {
    width: 100%!important;
    display: block!important;
    margin-bottom: 8px!important;
  }
  .otona-about-company-table td {
    width: 100%!important;
    display: block!important;
  }
}

/* Related Card 回遊 */
.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;
  }
}

/* =========================================================
   0107 Aboutと同じ画像演出：全画像を右からシュッと表示
   ========================================================= */
.otona-about {
  overflow-x: clip!important;
}

/* first-guide既存の画像マスク演出を止めて、aboutと同じ右スライドに統一 */
.otona-about .otona-about-reveal-img::after {
  display: none !important;
}

.otona-about .otona-about-reveal-img img,
.otona-about img.otona-about-img-ready {
  opacity: 1!important;
  transform: none!important;
}

.otona-about.js-ready img.otona-about-img-ready {
  opacity: 0!important;
  transform: translateX(86px) scale(1.035)!important;
  transition:
    opacity .74s ease,
    transform 1.05s cubic-bezier(.22, 1, .36, 1)!important;
  will-change: opacity, transform!important;
}

.otona-about.js-ready img.otona-about-img-ready.is-img-visible {
  opacity: 1!important;
  transform: translateX(0) scale(1)!important;
}

@media (prefers-reduced-motion: reduce) {
  .otona-about.js-ready img.otona-about-img-ready,
  .otona-about.js-ready img.otona-about-img-ready.is-img-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* =========================================================
   FAQ layout only: Q/Aを1段ずつ見せる
   ========================================================= */
.otona-about .otona-about-faq-list {
  width: min(100%, 1040px)!important;
  margin: 0 auto!important;
  background: var(--otona-white)!important;
  border-top: 1px solid var(--otona-line)!important;
}

.otona-about .otona-about-faq-item {
  margin: 0!important;
  padding: 0!important;
  border-bottom: 1px solid var(--otona-line)!important;
}

.otona-about .otona-about-faq-item dt,
.otona-about .otona-about-faq-item dd {
  display: grid!important;
  grid-template-columns: 46px minmax(0, 1fr)!important;
  gap: 18px!important;
  align-items: start!important;
  margin: 0!important;
  padding: 22px 28px!important;
  line-height: 1.85!important;
}

.otona-about .otona-about-faq-item dt {
  color: var(--otona-text)!important;
  font-weight: 500!important;
  background: var(--otona-white)!important;
}

.otona-about .otona-about-faq-item dd {
  color: var(--otona-gray)!important;
  background: var(--otona-bg-soft)!important;
  border-top: 1px solid rgba(223, 223, 223, .75)!important;
}

.otona-about .otona-about-faq-item dt span,
.otona-about .otona-about-faq-item dd span {
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  width: 32px!important;
  height: 32px!important;
  border: 1px solid currentColor!important;
  font-family: 'Inter', sans-serif!important;
  font-size: .85rem!important;
  font-weight: 600!important;
  line-height: 1!important;
  letter-spacing: .04em!important;
}

.otona-about .otona-about-faq-item dt span {
  color: var(--otona-pink)!important;
}

.otona-about .otona-about-faq-item dd span {
  color: var(--otona-gray)!important;
}

/* about下層共通：テーマ側のリンク色・blockquote装飾色を0107内だけ上書き */
.p-entry__body .otona-about a,
.custom-html-widget .otona-about a {
  color: inherit!important;
}

.p-entry__body .otona-about .otona-about-btn.otona-about-btn-primary,
.custom-html-widget .otona-about .otona-about-btn {
  color: #ffffff!important;
}

.p-entry__body .otona-about blockquote::before,
.custom-html-widget .otona-about blockquote::before,
.p-entry__body .otona-about blockquote::after,
.custom-html-widget .otona-about blockquote::after {
  color: #7eb817!important;
}

.p-entry__body .otona-about .otona-about-btn.otona-about-btn--outline,
.custom-html-widget .otona-about .otona-about-btn.otona-about-btn--outline,
.p-entry__body .otona-about .otona-about-btn.otona-about-btn--outline:hover,
.custom-html-widget .otona-about .otona-about-btn.otona-about-btn--outline:hover {
  color: #7eb817!important;
}

.p-entry__body h1.otona-about-hero__title,
.p-entry__body h1.otona-about-hero-title {
  font-size: 40px!important;
  margin-bottom: 30px!important;
}

.otona-about-section-subtitle {
  font-size: 18px!important;
  max-width: 100% !important;
  text-align: center!important;
}

@media (max-width: 768px) {
  .otona-about p {
    font-size: 14px!important;
  }

  .p-entry__body h1.otona-about-hero__title,
  .p-entry__body h1.otona-about-hero-title {
    font-size: 25px!important;
  }

  .otona-about .otona-about-faq-list {
    width: 100%!important;
  }

  .otona-about .otona-about-faq-item dt,
  .otona-about .otona-about-faq-item dd {
    grid-template-columns: 36px minmax(0, 1fr)!important;
    gap: 12px!important;
    padding: 18px 16px!important;
    font-size: .9rem!important;
  }

  .otona-about .otona-about-faq-item dt span,
  .otona-about .otona-about-faq-item dd span {
    width: 28px!important;
    height: 28px!important;
    font-size: .78rem!important;
  }
}


.p-entry__body blockquote {
    margin: 0 0 25px 0;
    padding: 20px 30px;
    border: none!important;
    border-left: 3px solid var(--otona-pink) !important;
    box-shadow: none!important;
}

.p-entry__body blockquote:before,.p-entry__body blockquote:after {
    content: none;
}


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

/* hero画像が読めているのに表示されない対策 */
.otona-about .otona-about-reveal-img img.is-img-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
}

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


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