/*
Theme Name: nú:d Skincare
Theme URI: https://nudeskincare.jp
Author: mumumu Inc.
Author URI: https://nudeskincare.jp
Description: nú:d スキンケアブランド公式テーマ - セラミドによる保湿特化美容液 FutureBase Serum のブランドサイト。植物ヒト型セラミド配合、ジェンダーレス土台美容液。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nude-theme
Tags: one-column, custom-menu, featured-images, translation-ready, custom-logo
*/

/* ============================================
   nú:d WordPress Theme Styles
   ============================================ */

/* ============================================
   Custom Fonts - nude-style.css
   ============================================ */
/* Google Fonts are loaded via functions.php wp_enqueue_style */

/* ============================================
   Smooth Scroll
   ============================================ */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================
   Base Variables (from style.css)
   ============================================ */
:root {
  --text-color: #f0f0f0;
  --bg-color: #0a0a0a;
  --section-bg: #111111;
  --accent-color: #fff;
  --line-color: #333;
  --gray-bg: #1a1a1a;
  --font-base: 'Noto Sans JP', sans-serif;
  --font-en: 'Oswald', sans-serif;
  --font-impact: 'Anton', sans-serif;
  --font-logo: 'Nanum Pen Script', cursive;
  
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-hover: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.15);
  --glass-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.3);
  --glass-shadow-hover: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  --glass-blur: blur(12px);
  --glass-blur-strong: blur(24px);
  
  --solid-bg: #141414;
  --solid-bg-hover: #1a1a1a;
  --solid-border: rgba(255, 255, 255, 0.06);
  
  --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);

  /* nú:d Brand Color Palette */
  --nude-blue-lightest: #e8eef0;
  --nude-blue-light: #d4dfe2;
  --nude-blue: #B5C7CC;
  --nude-blue-mid: #9ab3ba;
  --nude-blue-deep: #7a9aa3;
  --nude-blue-dark: #5a7a82;
  
  --nude-lemon-lightest: #fafbf0;
  --nude-lemon-light: #F3F4CD;
  --nude-lemon: #e8eab8;
  --nude-lemon-mid: #d9dca0;
  --nude-lemon-deep: #c5c98a;
  
  --nude-gradient: linear-gradient(135deg, #B5C7CC 0%, #d4dfe2 25%, #e8eef0 50%, #F3F4CD 100%);
  --nude-gradient-soft: linear-gradient(135deg, rgba(181, 199, 204, 0.3) 0%, rgba(243, 244, 205, 0.3) 100%);
  --nude-gradient-hero: linear-gradient(180deg, #B5C7CC 0%, #d4dfe2 30%, #e8eef0 60%, #fafbf0 85%, #F3F4CD 100%);
  --nude-gradient-reverse: linear-gradient(135deg, #F3F4CD 0%, #B5C7CC 100%);
  
  --nude-white: #fdfdfb;
  --nude-charcoal: #2a2d2e;
  --nude-deep: #1a1c1d;
  --nude-stone: #4a4d4e;
  --nude-mist: #f5f7f7;
  
  --nude-accent: #8ca5ad;
  --nude-accent-warm: #d4d6a8;
  
  --font-mincho: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --font-gothic: 'Hiragino Sans', sans-serif;
  --font-display: 'Cormorant Garamond', serif;
  
  --ease-elegant: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================
   Base Reset & Settings (from style.css)
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-color);
  background: var(--bg-color);
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.02) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(255,255,255,0.01) 0%, transparent 50%);
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

a:hover {
  opacity: 0.8;
}

.inner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* ============================================
   Header (from style.css)
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  background: transparent;
  mix-blend-mode: difference;
  transition: background 0.3s;
}

.site-header.scrolled {
  background: rgba(10, 10, 10, 0);
  mix-blend-mode: difference;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
}

.logo {
  z-index: 1001;
  position: relative;
}

.logo a {
  font-family: var(--font-logo);
  font-size: 2.5rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.02em;
  line-height: 1;
  display: flex;
}

.logo a:hover {
  opacity: 1;
  text-shadow: none;
}

.logo-char {
  display: inline-block;
  position: relative;
}

.logo-extra {
  display: inline-flex;
  align-items: center;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.6s ease, opacity 0.6s ease;
  white-space: nowrap;
}

.logo-extra .logo-char {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.logo-extra .logo-char:last-child {
  font-size: 1.8rem;
  line-height: 1;
  vertical-align: middle;
}

.logo a:hover .logo-extra {
  max-width: 200px;
  opacity: 1;
}

.logo a:hover .logo-extra .logo-char {
  opacity: 1;
  transform: translateY(0);
}

.logo a:hover .logo-extra .logo-char:nth-child(1) { transition-delay: 0.15s; }
.logo a:hover .logo-extra .logo-char:nth-child(2) { transition-delay: 0.3s; }
.logo a:hover .logo-extra .logo-char:nth-child(3) { transition-delay: 0.45s; }
.logo a:hover .logo-extra .logo-char:nth-child(4) { transition-delay: 0.6s; }

.logo img {
  display: none;
  width: 120px;
  filter: invert(1) brightness(2);
}

/* ============================================
   Menu Trigger — MENU / CLOSE Text
   ============================================ */
.menu-trigger {
  position: fixed;
  top: 30px;
  right: 40px;
  z-index: 10010;
  cursor: pointer;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.22em;
  display: flex;
  align-items: center;
  color: #fff;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  mix-blend-mode: difference;
}

.menu-trigger .menu-text-open,
.menu-trigger .menu-text-close {
  display: block;
}

.menu-trigger .menu-text-close {
  display: none;
}

body.menu-open .menu-trigger .menu-text-open {
  display: none;
}

body.menu-open .menu-trigger .menu-text-close {
  display: block;
}

body.menu-open .menu-trigger {
  mix-blend-mode: normal;
  color: #393939;
}

/* ============================================
   Global Navigation Overlay
   ============================================ */
.global-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 10000;
  background: var(--nude-gradient-hero);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-elegant);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.menu-open .global-nav {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================
   Nav Container — Two-Column Layout
   ============================================ */
.nav-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100%;
}

/* ============================================
   Left Column: Brand Area
   ============================================ */
.nav-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 60px 60px;
  border-right: none;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s var(--ease-elegant) 0.15s, transform 0.6s var(--ease-elegant) 0.15s;
}

body.menu-open .nav-brand {
  opacity: 1;
  transform: translateX(0);
}

body:not(.menu-open) .nav-brand {
  transition: none;
}

.nav-brand-inner {
  max-width: 360px;
}

.nav-brand-label {
  display: block;
  font-family: var(--font-en);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--nude-blue-deep);
  margin-bottom: 20px;
}

.nav-brand-name {
  margin: 0 0 28px;
  color: var(--nude-charcoal);
  line-height: 1;
}

.nav-brand-name svg {
  width: 160px;
  height: auto;
  display: block;
}

.nav-brand-copy {
  font-family: var(--font-mincho);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--nude-charcoal);
  margin: 0 0 20px;
  letter-spacing: 0.08em;
}

.nav-brand-desc {
  font-family: var(--font-base);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 2;
  color: var(--nude-stone);
  margin: 0 0 32px;
  letter-spacing: 0.04em;
}

.nav-brand-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(90, 122, 130, 0.12);
}

.nav-brand-link {
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--nude-blue-deep);
  text-decoration: none;
  transition: color 0.3s var(--ease-elegant);
}

.nav-brand-link:hover {
  color: var(--nude-blue-dark);
  opacity: 1;
}

/* ============================================
   Right Column: Navigation Links
   ============================================ */
.nav-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 60px 60px;
  background:#b5c7cca8;
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-links li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-elegant), transform 0.5s var(--ease-elegant);
}

body.menu-open .nav-links li {
  opacity: 1;
  transform: translateY(0);
}

body.menu-open .nav-links li:nth-child(1) { transition-delay: 0.15s; }
body.menu-open .nav-links li:nth-child(2) { transition-delay: 0.21s; }
body.menu-open .nav-links li:nth-child(3) { transition-delay: 0.27s; }
body.menu-open .nav-links li:nth-child(4) { transition-delay: 0.33s; }
body.menu-open .nav-links li:nth-child(5) { transition-delay: 0.39s; }
body.menu-open .nav-links li:nth-child(6) { transition-delay: 0.45s; }
body.menu-open .nav-links li:nth-child(7) { transition-delay: 0.51s; }
body.menu-open .nav-links li:nth-child(8) { transition-delay: 0.57s; }

body:not(.menu-open) .nav-links li {
  transition: none;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  text-decoration: none;
  position: relative;
}

.nav-links a:hover {
  opacity: 1;
}

.nav-text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #393939;
  transition: color 0.4s var(--ease-elegant), transform 0.4s var(--ease-elegant);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(57, 57, 57, 0.4);
  transition: width 0.4s var(--ease-elegant);
}

.nav-links a:hover .nav-text {
  color: #1a1a1a;
  transform: translateX(6px);
}

.nav-links a:hover::after {
  width: 100%;
}

/* ============================================
   Footer (from style.css)
   ============================================ */
.site-footer {
  position: relative;
  z-index: 1;
  backdrop-filter: blur(4px);
  overflow: hidden;
}

.footer-main {
  padding: 100px 0 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

.footer-inner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 60px;
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-logo {
  display: inline-block;
  text-decoration: none;
}

.footer-logo-text {
  font-family: var(--font-logo);
  font-size: 2.8rem;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: all 0.4s ease;
}

.footer-logo:hover .footer-logo-text {
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
}

.footer-logo:hover {
  opacity: 1;
}

.footer-tagline {
  font-family: var(--font-mincho);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  letter-spacing: 0.05em;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.footer-social-link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.footer-nav-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-nav-toggle {
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 12px;
  cursor: default;
  text-align: left;
}

.footer-nav-icon {
  display: none;
}

.footer-nav-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav-list a {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

.footer-nav-list a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-nav-list a:hover {
  color: #fff;
  opacity: 1;
  text-shadow: none;
}

.footer-nav-list a:hover::after {
  width: 100%;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-contact-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  color: #fff;
  font-family: var(--font-gothic);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.footer-contact-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.footer-contact-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.06);
  opacity: 1;
}

.footer-contact-btn:hover::before { opacity: 1; }

.footer-contact-btn .btn-arrow {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-contact-btn:hover .btn-arrow {
  transform: translateX(4px);
}

.footer-address { margin-top: 8px; }

.footer-address p {
  font-size: 0.8rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

.footer-bottom {
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-bottom .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom-left,
.footer-bottom-right {
  flex: 1;
}

.footer-bottom-center {
  flex: 1;
  text-align: center;
}

.footer-bottom-right {
  text-align: right;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-legal-link {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-legal-link:hover {
  color: rgba(255, 255, 255, 0.8);
  opacity: 1;
}

.copyright {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-to-top:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  opacity: 1;
}

.back-to-top .top-arrow {
  font-size: 1rem;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-to-top:hover .top-arrow {
  transform: translateY(-3px);
}

.footer-bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.footer-glow {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
  filter: blur(60px);
}

/* ============================================
   nude Page Overrides (from nude-style.css)
   ============================================ */

body.nude-page {
  background: transparent;
  color: var(--nude-charcoal);
  background-image: none;
}

body.nude-page .lines {
  display: none;
}

body.nude-page #mv-canvas {
  display: none;
}

/* Page-wide Animated Light Background */
body.nude-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
  background: 
    radial-gradient(ellipse 150% 100% at 0% 0%, rgba(181, 199, 204, 0.9) 0%, transparent 50%),
    radial-gradient(ellipse 120% 80% at 100% 20%, rgba(212, 223, 226, 0.7) 0%, transparent 45%),
    radial-gradient(ellipse 100% 120% at 50% 100%, rgba(243, 244, 205, 0.85) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 80% 80%, rgba(232, 234, 184, 0.6) 0%, transparent 40%),
    linear-gradient(180deg, var(--nude-blue-lightest) 0%, var(--nude-lemon-lightest) 100%);
  animation: lightBreathing 12s ease-in-out infinite;
}

@keyframes lightBreathing {
  0%, 100% { opacity: 1; filter: brightness(1) saturate(1); }
  25% { opacity: 0.95; filter: brightness(1.05) saturate(1.1); }
  50% { opacity: 1; filter: brightness(1.1) saturate(1.05); }
  75% { opacity: 0.98; filter: brightness(1.02) saturate(1); }
}

/* Header Override */
body.nude-page .site-header {
  background: transparent;
  mix-blend-mode: difference;
  top: 0;
}

body.nude-page .site-header.scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}

body.nude-page .site-header .logo,
body.nude-page .site-header .logo a,
body.nude-page .site-header .logo-char {
  color: #fff;
}

body.nude-page .site-header .logo img {
  filter: brightness(0) saturate(100%);
}

/* Main Content Reset */
body.nude-page main {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  background: transparent;
}

body.nude-page .inner {
  width: 100%;
  max-width: none;
}

body.nude-page .sub-hero {
  display: none;
}

/* Global nav visibility handled by JS + pointer-events */

/* ============================================
   Message Bar
   ============================================ */
.nude-message-bar {
  position: relative;
  margin-top: 80px;
  background: transparent;
  color: #fff;
  text-align: center;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  mix-blend-mode: difference;
}

/* ============================================
   Hero Section
   ============================================ */
.nude-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: transparent;
  padding-top: 60px;
}

.nude-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 120% 80% at 30% 20%, rgba(181, 199, 204, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse 100% 60% at 70% 80%, rgba(243, 244, 205, 0.3) 0%, transparent 50%);
  pointer-events: none;
  animation: cinematicPulse 15s ease-in-out infinite;
}

@keyframes cinematicPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* Komorebi Effect */
.nude-hero-komorebi {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.4;
}

.komorebi-ray {
  position: absolute;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
  filter: blur(40px);
  animation: komorebiFloat 15s ease-in-out infinite;
}

.komorebi-ray-1 { width: 300px; height: 600px; top: -100px; left: 10%; transform: rotate(15deg); animation-delay: 0s; }
.komorebi-ray-2 { width: 200px; height: 500px; top: -50px; left: 40%; transform: rotate(-10deg); animation-delay: -5s; }
.komorebi-ray-3 { width: 250px; height: 550px; top: -80px; right: 15%; transform: rotate(20deg); animation-delay: -10s; }

@keyframes komorebiFloat {
  0%, 100% { opacity: 0.3; transform: rotate(15deg) translateY(0); }
  50% { opacity: 0.6; transform: rotate(15deg) translateY(20px); }
}

/* Hero Content */
.nude-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px;
  max-width: 1000px;
}

.nude-brand-logo {
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeInUp 1s var(--ease-elegant) 0.3s forwards;
}

.nude-brand-logo svg {
  width: 160px;
  height: auto;
  color: var(--nude-charcoal);
}

.nude-product-name {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--nude-stone);
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeInUp 1s var(--ease-elegant) 0.5s forwards;
}

.nude-hero-copy-en {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--nude-charcoal);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: fadeInUp 1s var(--ease-elegant) 0.7s forwards;
}

.nude-hero-copy-ja {
  font-family: var(--font-mincho);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 400;
  line-height: 1.8;
  color: var(--nude-charcoal);
  margin-bottom: 32px;
  letter-spacing: 0.08em;
  opacity: 0;
  animation: fadeInUp 1s var(--ease-elegant) 0.9s forwards;
}

.nude-hero-subcopy {
  font-family: var(--font-gothic);
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin-bottom: 48px;
  letter-spacing: 0.06em;
  opacity: 0;
  animation: fadeInUp 1s var(--ease-elegant) 1.1s forwards;
}

.nude-release-info {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(181, 199, 204, 0.3);
  border-radius: 100px;
  opacity: 0;
  animation: fadeInUp 1s var(--ease-elegant) 1.3s forwards;
}

.nude-release-info span {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--nude-blue-dark);
}

/* Scroll Indicator */
.nude-scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 0; right: 0;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeInUp 1s var(--ease-elegant) 1.5s forwards;
}

.scroll-text {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--nude-stone);
}

.scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, var(--nude-stone), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.6); opacity: 0.5; }
}

/* ============================================
   Section Common Styles
   ============================================ */
.nude-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
}

.nude-section-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--nude-blue-deep);
  margin-bottom: 12px;
  display: block;
}

.nude-section-title-en {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--nude-charcoal);
  margin: 0 0 16px;
}

.nude-section-title-ja {
  font-family: var(--font-mincho);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.8;
  color: var(--nude-charcoal);
  margin: 0;
  letter-spacing: 0.08em;
}

/* ============================================
   Brand Story Section
   ============================================ */
.nude-brand-story {
  padding: 160px 0;
  background: transparent;
  position: relative;
}

.nude-brand-story::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nude-blue-mid), transparent);
}

.nude-brand-story-header {
  text-align: center;
  margin-bottom: 80px;
}

.nude-brand-story-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.brand-story-visual { position: relative; }

.brand-story-quote {
  padding: 48px;
  background: linear-gradient(135deg, var(--nude-blue-lightest) 0%, var(--nude-lemon-lightest) 100%);
  border-radius: 24px;
  position: relative;
}

.quote-mark {
  position: absolute;
  top: 24px; left: 32px;
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: 300;
  color: var(--nude-blue);
  opacity: 0.3;
  line-height: 1;
}

.quote-text {
  font-family: var(--font-mincho);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 2.2;
  color: var(--nude-charcoal);
  margin: 0;
  position: relative;
  z-index: 1;
  padding-top: 24px;
}

.brand-story-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brand-story-text p {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--nude-stone);
  margin: 0;
  text-align: justify;
}

.brand-story-text p:first-child {
  font-family: var(--font-mincho);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--nude-charcoal);
}

.brand-name-meaning {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
}

.meaning-item {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  padding: 0;
  background: none;
  backdrop-filter: none;
  border: none;
  border-radius: 0;
}

.meaning-word {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--nude-charcoal);
  letter-spacing: 0.05em;
}

.meaning-pronunciation {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  color: var(--nude-stone);
}

.meaning-definition {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--nude-stone);
}

/* ============================================
   Product Section
   ============================================ */
.nude-product { padding: 160px 0; background: transparent; position: relative; }
.nude-product-header { text-align: center; margin-bottom: 80px; }
.nude-product-content { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.nude-product-visual { position: relative; }

.product-image-frame {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(245, 245, 243, 0.9) 0%, rgba(232, 230, 226, 0.9) 100%),
    linear-gradient(45deg, rgba(181, 199, 204, 0.1) 0%, rgba(243, 244, 205, 0.1) 50%, rgba(181, 199, 204, 0.1) 100%);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(42, 45, 46, 0.1), 0 8px 32px rgba(181, 199, 204, 0.15);
}

.product-image-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.02) 100%);
  pointer-events: none;
  z-index: 1;
}

.product-hero-image {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 0.5s var(--ease-elegant);
}

.product-hero-image:not([src]),
.product-hero-image[src=""] { opacity: 0; }

.product-variant-hint {
  position: absolute;
  bottom: -40px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-style: italic;
  letter-spacing: 0.1em;
  color: var(--nude-stone);
  white-space: nowrap;
}

.nude-product-info { padding: 20px 0; }

.product-name-display {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  margin: 0 0 32px;
  letter-spacing: 0.05em;
}

.product-specs { margin-bottom: 40px; }

.product-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(45, 45, 42, 0.08);
}

.spec-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nude-stone);
}

.spec-value {
  font-family: var(--font-gothic);
  font-size: 13px;
  font-weight: 400;
  color: var(--nude-charcoal);
}

.spec-value.price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
}

.product-freefrom { margin-bottom: 40px; }

.freefrom-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nude-stone);
  margin-bottom: 12px;
  display: block;
}

.freefrom-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.freefrom-tag {
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--nude-blue-dark);
  padding: 6px 14px;
  background: var(--nude-blue-lightest);
  border-radius: 100px;
}

.ingredients-toggle {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  color: var(--nude-stone);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 0.3s ease;
  background: none;
  border: none;
  padding: 0;
}

.ingredients-toggle:hover { color: var(--nude-charcoal); }

.product-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  padding: 14px 32px;
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--nude-charcoal);
  border: 1px solid var(--nude-charcoal);
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.product-detail-btn:hover {
  background: transparent;
  color: var(--nude-charcoal);
}

.product-detail-btn svg {
  transition: transform 0.3s ease;
}

.product-detail-btn:hover svg {
  transform: translateX(4px);
}

/* ============================================
   Concept Section
   ============================================ */
.nude-concept { padding: 160px 0; background: transparent; position: relative; }

.nude-concept::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nude-lemon-mid), transparent);
}

.nude-concept-header { text-align: center; margin-bottom: 80px; }
.nude-concept-body { max-width: 800px; margin: 0 auto; }

/* Water Drop */
.water-drop-container { display: flex; justify-content: center; margin-bottom: 48px; perspective: 500px; }
.water-drop { position: relative; width: 140px; height: 140px; transform-style: preserve-3d; }

.water-drop-inner {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(235, 245, 250, 0.85) 0%, rgba(200, 225, 235, 0.8) 20%, rgba(170, 205, 220, 0.75) 40%, rgba(145, 190, 210, 0.7) 60%, rgba(120, 175, 200, 0.65) 80%, rgba(100, 160, 190, 0.6) 100%);
  box-shadow:
    inset 0 -30px 50px rgba(100, 160, 190, 0.35),
    inset 0 30px 40px rgba(255, 255, 255, 0.7),
    inset -15px 0 30px rgba(180, 210, 225, 0.25),
    inset 15px 0 25px rgba(255, 255, 255, 0.35),
    inset 0 0 60px rgba(255, 255, 255, 0.2),
    0 15px 40px rgba(100, 160, 190, 0.25),
    0 5px 15px rgba(100, 160, 190, 0.15),
    0 0 80px rgba(181, 199, 204, 0.1);
  animation: waterJiggle 4s ease-in-out infinite;
  transform-origin: center bottom;
  overflow: hidden;
  filter: url(#water-goo);
}

.water-surface {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
  filter: url(#water-displacement);
  opacity: 0.6;
}

.water-highlight {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
  border-radius: 50%;
  filter: blur(2px);
}

.water-highlight-1 { width: 45%; height: 30%; top: 12%; left: 15%; transform: rotate(-25deg); animation: highlightShimmer 4s ease-in-out infinite; }
.water-highlight-2 { width: 18%; height: 14%; top: 22%; left: 58%; opacity: 0.8; background: radial-gradient(ellipse, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%); animation: highlightShimmer 4s ease-in-out infinite 0.5s; }
.water-highlight-3 { width: 8%; height: 8%; top: 38%; left: 68%; opacity: 0.6; background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 60%); filter: blur(1px); animation: highlightShimmer 4s ease-in-out infinite 1s; }

.water-reflection {
  position: absolute; bottom: 15%; left: 50%;
  width: 70%; height: 35%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 100% 100% at 50% 30%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(4px);
  animation: reflectionMove 4s ease-in-out infinite;
}

.water-caustic {
  position: absolute; inset: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse 30% 20% at 30% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 25% 15% at 60% 75%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 20% 20% at 45% 65%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  animation: causticMove 6s ease-in-out infinite;
  opacity: 0.7;
}

.water-ripple {
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(181, 199, 204, 0.2);
  animation: rippleExpand 4s ease-out infinite;
  opacity: 0;
}

.water-shadow {
  position: absolute; bottom: -18px; left: 50%;
  transform: translateX(-50%);
  width: 85%; height: 25px;
  background: radial-gradient(ellipse 100% 100% at 50% 20%, rgba(100, 160, 190, 0.25) 0%, rgba(100, 160, 190, 0.1) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(4px);
  animation: shadowPulse 4s ease-in-out infinite;
}

@keyframes waterJiggle {
  0%, 100% { transform: scale(1, 1) translateY(0) rotateX(0deg); border-radius: 50%; }
  8% { transform: scale(1.025, 0.975) translateY(1.5px) rotateX(1deg); border-radius: 47% 53% 51% 49% / 49% 51% 53% 47%; }
  16% { transform: scale(0.975, 1.025) translateY(-1.5px) rotateX(-1deg); border-radius: 53% 47% 49% 51% / 51% 49% 47% 53%; }
  24% { transform: scale(1.015, 0.985) translateY(1px) rotateX(0.5deg); border-radius: 48% 52% 52% 48% / 52% 48% 52% 48%; }
  32% { transform: scale(0.985, 1.015) translateY(-1px) rotateX(-0.5deg); border-radius: 52% 48% 48% 52% / 48% 52% 48% 52%; }
  40% { transform: scale(1.01, 0.99) translateY(0.5px) rotateX(0.3deg); border-radius: 49% 51% 51% 49% / 51% 49% 51% 49%; }
  48% { transform: scale(0.99, 1.01) translateY(-0.5px) rotateX(-0.3deg); border-radius: 51% 49% 49% 51% / 49% 51% 49% 51%; }
  56% { transform: scale(1, 1) translateY(0) rotateX(0deg); border-radius: 50%; }
  64% { transform: scale(1.02, 0.98) translateY(1.2px) rotateX(0.8deg); border-radius: 47% 53% 52% 48% / 50% 50% 52% 48%; }
  72% { transform: scale(0.98, 1.02) translateY(-1.2px) rotateX(-0.8deg); border-radius: 53% 47% 48% 52% / 50% 50% 48% 52%; }
  80% { transform: scale(1.008, 0.992) translateY(0.4px) rotateX(0.2deg); border-radius: 49% 51% 50% 50% / 51% 49% 51% 49%; }
  88% { transform: scale(0.992, 1.008) translateY(-0.4px) rotateX(-0.2deg); border-radius: 51% 49% 50% 50% / 49% 51% 49% 51%; }
}

@keyframes highlightShimmer {
  0%, 100% { opacity: 0.9; transform: rotate(-25deg) scale(1) translateY(0); }
  20% { opacity: 0.75; transform: rotate(-22deg) scale(0.96) translateY(1px); }
  40% { opacity: 0.85; transform: rotate(-28deg) scale(1.02) translateY(-0.5px); }
  60% { opacity: 0.7; transform: rotate(-24deg) scale(0.98) translateY(0.5px); }
  80% { opacity: 0.8; transform: rotate(-26deg) scale(1.01) translateY(-1px); }
}

@keyframes reflectionMove {
  0%, 100% { transform: translateX(-50%) translateY(0) scaleX(1) scaleY(1); opacity: 0.5; }
  25% { transform: translateX(-48%) translateY(3px) scaleX(0.94) scaleY(1.05); opacity: 0.4; }
  50% { transform: translateX(-52%) translateY(-2px) scaleX(1.06) scaleY(0.95); opacity: 0.6; }
  75% { transform: translateX(-49%) translateY(1px) scaleX(0.98) scaleY(1.02); opacity: 0.45; }
}

@keyframes causticMove {
  0%, 100% { transform: rotate(0deg); opacity: 0.7; }
  25% { transform: rotate(3deg); opacity: 0.6; }
  50% { transform: rotate(-2deg); opacity: 0.8; }
  75% { transform: rotate(1deg); opacity: 0.65; }
}

@keyframes rippleExpand {
  0% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.15); opacity: 0.15; }
  100% { transform: scale(1.3); opacity: 0; }
}

@keyframes shadowPulse {
  0%, 100% { transform: translateX(-50%) scale(1, 1); opacity: 0.3; }
  20% { transform: translateX(-50%) scale(1.08, 0.85); opacity: 0.35; }
  40% { transform: translateX(-50%) scale(0.92, 1.15); opacity: 0.25; }
  60% { transform: translateX(-50%) scale(1.04, 0.92); opacity: 0.32; }
  80% { transform: translateX(-50%) scale(0.96, 1.08); opacity: 0.28; }
}

.nude-concept-lead {
  font-family: var(--font-mincho);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 2;
  color: var(--nude-charcoal);
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: 0.06em;
}

.nude-concept-text {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--nude-stone);
  text-align: justify;
  margin: 0;
  letter-spacing: 0.04em;
}

.nude-concept-text + .nude-concept-text { margin-top: 24px; }

/* ============================================
   Technology Section
   ============================================ */
.nude-technology {
  padding: 160px 0;
  background-color: rgba(0, 0, 0, 0.85);
  color: var(--nude-white);
  position: relative;
  overflow: hidden;
}

.nude-technology::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 80% 50% at 0% 50%, rgba(181, 199, 204, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 100% 80%, rgba(243, 244, 205, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.nude-technology .nude-section-inner { position: relative; z-index: 1; }
.nude-technology .nude-section-label { color: var(--nude-blue); }
.nude-technology .nude-section-title-en,
.nude-technology .nude-section-title-ja { color: var(--nude-white); }

.nude-tech-header { text-align: center; margin-bottom: 48px; }

.nude-tech-lead {
  font-family: var(--font-mincho);
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin-bottom: 80px;
  letter-spacing: 0.06em;
}

.nude-ingredients-list { display: flex; flex-direction: column; gap: 60px; }

.nude-ingredient-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 40px;
  padding: 48px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  transition: all 0.5s var(--ease-elegant);
  position: relative;
  overflow: hidden;
}

.nude-ingredient-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-elegant);
}

.nude-ingredient-item:hover::before {
  opacity: 0.28;
}

.nude-ingredient-item > * {
  position: relative;
  z-index: 1;
}

.nude-ingredient-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(181, 199, 204, 0.3);
  transform: translateY(-4px);
}

.ingredient-number { font-family: var(--font-display); font-size: 4rem; font-weight: 300; color: var(--nude-blue); line-height: 1; opacity: 0.5; }
.ingredient-content { display: flex; flex-direction: column; gap: 16px; }
.ingredient-action { font-family: var(--font-display); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nude-blue); }
.ingredient-name-ja { font-family: var(--font-mincho); font-size: 1.4rem; font-weight: 500; color: var(--nude-white); margin: 0; }
.ingredient-catch { font-family: var(--font-mincho); font-size: 1.05rem; font-weight: 400; line-height: 1.8; color: rgba(255, 255, 255, 0.85); margin: 8px 0 0; }
.ingredient-desc { font-family: var(--font-gothic); font-size: 0.9rem; font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, 1); margin: 0; }
.ingredient-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ingredient-tag { font-family: var(--font-gothic); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.08em; color: var(--nude-blue); padding: 4px 12px; border: 1px solid rgba(181, 199, 204, 0.4); border-radius: 100px; }

/* ============================================
   How to Use Section
   ============================================ */
.nude-howtouse { padding: 160px 0; background: transparent; position: relative; }
.nude-howtouse-header { text-align: center; margin-bottom: 48px; }
.nude-howtouse-lead { font-family: var(--font-mincho); font-size: 1rem; font-weight: 400; line-height: 2; color: var(--nude-stone); text-align: center; margin-bottom: 80px; letter-spacing: 0.06em; }
.howtouse-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; max-width: 1000px; margin: 0 auto 80px; }

.howtouse-step {
  display: flex; gap: 24px; padding: 36px;
  background: var(--nude-white);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(45, 45, 42, 0.05);
  transition: all 0.4s var(--ease-elegant);
}

.howtouse-step:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(45, 45, 42, 0.08); }

.step-number {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--nude-blue-light) 0%, var(--nude-lemon-light) 100%);
  border-radius: 16px;
  flex-shrink: 0;
}

.step-number span { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; color: var(--nude-charcoal); }
.step-content { flex: 1; }
.step-title { font-family: var(--font-mincho); font-size: 1.1rem; font-weight: 500; color: var(--nude-charcoal); margin: 0 0 12px; }
.step-desc { font-family: var(--font-gothic); font-size: 0.9rem; font-weight: 300; line-height: 1.8; color: var(--nude-stone); margin: 0; }

/* ============================================
   For You Section
   ============================================ */
.nude-foryou { padding: 160px 0; background: transparent; position: relative; }
.nude-foryou-header { text-align: center; margin-bottom: 48px; }
.nude-foryou-lead { font-family: var(--font-mincho); font-size: 1rem; font-weight: 400; line-height: 2; color: var(--nude-stone); text-align: center; margin-bottom: 80px; letter-spacing: 0.06em; }
.nude-scenes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

.nude-scene-card {
  background: var(--nude-white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(45, 45, 42, 0.05);
  cursor: default;
}

.nude-scene-card:hover { transform: none; box-shadow: 0 4px 20px rgba(45, 45, 42, 0.05); }

.scene-visual {
  aspect-ratio: 4 / 3;
  background: var(--nude-blue, #B5C7CC);
  position: relative;
  overflow: hidden;
}

.scene-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s var(--ease-elegant), opacity 0.6s var(--ease-elegant);
}

.nude-scene-card:hover .scene-visual img {
  transform: none;
}

.scene-visual::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(45, 45, 42, 0.08) 100%);
  z-index: 1;
  pointer-events: none;
}

.scene-number { position: absolute; top: 20px; left: 20px; font-family: var(--font-display); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.15em; color: #fff; z-index: 2; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.scene-content { padding: 32px; }
.scene-title { font-family: var(--font-mincho); font-size: 1.1rem; font-weight: 500; color: var(--nude-charcoal); margin: 0 0 16px; letter-spacing: 0.04em; }
.scene-text { font-family: var(--font-gothic); font-size: 0.85rem; font-weight: 300; line-height: 1.8; color: var(--nude-stone); margin: 0; }

/* ============================================
   Sustainability Section
   ============================================ */
.nude-sustainability { padding: 160px 0; background: linear-gradient(180deg, var(--nude-lemon-lightest) 0%, var(--nude-blue-lightest) 100%); position: relative; }
.nude-sustainability-header { text-align: center; margin-bottom: 80px; }
.nude-sustainability-content { max-width: 1000px; margin: 0 auto; }
.sustainability-main { text-align: center; margin-bottom: 80px; }
.sustainability-icon { width: 200px; height: 150px; margin: 0 auto 32px; }
.sustainability-icon img { width: 100%; height: 100%; object-fit: contain; }
.sustainability-title { font-family: var(--font-mincho); font-size: 1.5rem; font-weight: 500; color: var(--nude-charcoal); margin: 0 0 24px; line-height: 1.8; }
.sustainability-desc { font-family: var(--font-gothic); font-size: 0.95rem; font-weight: 300; line-height: 1.8; color: var(--nude-stone); max-width: 800px; margin: 0 auto; }
.sustainability-desc + .sustainability-desc { margin-top: 16px; }
.sustainability-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

.sustainability-point {
  display: flex; gap: 20px; padding: 32px;
  background: var(--nude-white);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(45, 45, 42, 0.05);
  transition: all 0.4s var(--ease-elegant);
}

.sustainability-point:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(45, 45, 42, 0.08); }

.point-number { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; color: var(--nude-blue); opacity: 0.5; flex-shrink: 0; }
.point-content h4 { font-family: var(--font-mincho); font-size: 1rem; font-weight: 500; color: var(--nude-charcoal); margin: 0 0 8px; }
.point-content p { font-family: var(--font-gothic); font-size: 0.85rem; font-weight: 300; line-height: 1.8; color: var(--nude-stone); margin: 0; }

/* ============================================
   SkinScan Section
   ============================================ */
.nude-skinscan { padding: 120px 0 120px; background: transparent; position: relative; overflow: hidden; }
.nude-skinscan .nude-section-inner { margin-bottom: -100px; }
.nude-skinscan-content {
  display: flex;
  align-items: center;
  gap: 64px;
  margin-bottom: -240px;
}
.skinscan-phone {
  flex: 0 0 auto;
  width: 300px;
  position: relative;
}
.skinscan-phone img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.12));
}
.skinscan-text { max-width: 580px; flex: 1; text-align: left; padding-bottom: 200px; }
.skinscan-desc { font-family: var(--font-gothic); font-size: 0.95rem; font-weight: 300; line-height: 1.8; color: var(--nude-stone); margin: 32px 0 40px; }

.skinscan-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 40px;
  background: var(--nude-charcoal);
  color: var(--nude-white);
  font-family: var(--font-gothic);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.4s var(--ease-elegant);
  box-shadow: 0 4px 20px rgba(42, 45, 46, 0.2);
}

.skinscan-btn:hover { background: var(--nude-blue-dark); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(42, 45, 46, 0.3); }
.skinscan-btn svg { transition: transform 0.3s ease; }
.skinscan-btn:hover svg { transform: translate(3px, -3px); }

/* SkinScan phone entrance animation */
.skinscan-phone-entrance {
  opacity: 0;
  transform: translateY(80px) scale(0.92);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.skinscan-phone-entrance.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Floating animation after entrance */
@keyframes skinscan-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.skinscan-phone-entrance.visible img {
  animation: skinscan-float 4s ease-in-out 1.4s infinite;
}

/* ============================================
   FAQ Section
   ============================================ */
.nude-faq { padding: 160px 0; background: rgba(0, 0, 0, 0.85); position: relative; }
.nude-faq-header { text-align: center; margin-bottom: 80px; }
.nude-faq .nude-section-label { color: var(--nude-blue); }
.nude-faq .nude-section-title-en, .nude-faq .nude-section-title-ja { color: var(--nude-white); }
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

.faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s var(--ease-elegant);
}

.faq-item:hover { border-color: rgba(181, 199, 204, 0.3); }
.faq-item.open { background: rgba(255, 255, 255, 0.05); border-color: rgba(181, 199, 204, 0.4); }

.faq-question {
  width: 100%; padding: 24px 32px;
  display: flex; align-items: center; gap: 16px;
  background: none; border: none; cursor: pointer; text-align: left;
  transition: all 0.3s ease;
}

.faq-question:hover { background: rgba(255, 255, 255, 0.02); }

.faq-q-mark { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; color: var(--nude-blue); flex-shrink: 0; }
.faq-q-text { flex: 1; font-family: var(--font-mincho); font-size: 1rem; font-weight: 500; color: var(--nude-white); }
.faq-toggle { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; color: var(--nude-blue); flex-shrink: 0; transition: transform 0.3s ease; }
.faq-item.open .faq-toggle { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-elegant); }
.faq-answer p { padding: 0 32px 24px 68px; font-family: var(--font-gothic); font-size: 0.9rem; font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, 1); margin: 0; }

/* ============================================
   Instagram Section
   ============================================ */
.nude-instagram { padding: 160px 0 0; background: transparent; position: relative; }
.nude-instagram-header { text-align: center; margin-bottom: 48px; }
.nude-instagram-lead { font-family: var(--font-mincho); font-size: 1rem; font-weight: 400; line-height: 2; color: var(--nude-stone); text-align: center; margin-bottom: 48px; letter-spacing: 0.06em; }
.instagram-cta { text-align: center; margin-bottom: 60px; }

.instagram-follow-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 40px;
  background: linear-gradient(135deg, #833AB4 0%, #E1306C 50%, #F77737 100%);
  color: #fff;
  font-family: var(--font-gothic);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.4s var(--ease-elegant);
  box-shadow: 0 4px 20px rgba(225, 48, 108, 0.3);
}

.instagram-follow-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(225, 48, 108, 0.4); }

.instagram-icon { width: 24px; height: 24px; }
.instagram-preview { max-width: 800px; margin: 0 auto; }
.instagram-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }

.instagram-placeholder {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--nude-blue-lightest) 0%, var(--nude-lemon-lightest) 100%);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}

.instagram-placeholder span { font-family: var(--font-display); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.1em; color: var(--nude-stone); opacity: 0.6; }
.instagram-note { text-align: center; font-family: var(--font-gothic); font-size: 0.8rem; font-weight: 300; color: var(--nude-stone); opacity: 0.7; margin: 0; }

/* ============================================
   Waitlist / Purchase Section
   ============================================ */
.nude-waitlist {
  padding: 160px 0;
  background-color: rgba(0, 0, 0, 0.85);
  color: var(--nude-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.nude-waitlist::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(181, 199, 204, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.nude-waitlist .nude-section-inner { position: relative; z-index: 1; max-width: 860px; }
.nude-waitlist .nude-section-label { color: var(--nude-blue); }
.nude-waitlist .nude-section-title-en { color: var(--nude-white); }

.nude-waitlist-lead { font-family: var(--font-mincho); font-size: 1.1rem; font-weight: 400; line-height: 2; color: rgba(255, 255, 255, 0.7); margin-bottom: 48px; letter-spacing: 0.06em; }

.nude-purchase-btns { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.nude-official-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 24px;
  background: #fff;
  color: var(--nude-charcoal, #232323);
  font-family: var(--font-gothic);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid rgba(35, 47, 62, 0.15);
  transition: all 0.4s var(--ease-elegant);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.nude-official-btn .official-logo {
  width: 56px;
  height: auto;
  color: var(--nude-charcoal, #232323);
  opacity: 1;
  flex-shrink: 0;
  transition: all 0.4s var(--ease-elegant);
}
.nude-official-btn:hover { background: var(--nude-blue, #B5C7CC); color: #fff; border-color: var(--nude-blue, #B5C7CC); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(181, 199, 204, 0.4); }
.nude-official-btn:hover .official-logo { color: #fff; opacity: 1; }
.nude-official-btn span { font-weight: 500; }

.nude-amazon-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 24px;
  background: #fff;
  color: #232F3E;
  font-family: var(--font-gothic);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid rgba(35, 47, 62, 0.15);
  transition: all 0.4s var(--ease-elegant);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.nude-amazon-btn:hover { background: #232F3E; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); }
.nude-amazon-btn:hover .amazon-logo { filter: brightness(0) invert(1); }
.nude-amazon-btn:hover .amazon-logo g { fill: #FF9900; filter: none; }
.nude-amazon-btn .amazon-logo { width: 80px; height: auto; }
.nude-amazon-btn span { font-weight: 500; }

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

.nude-fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-elegant), transform 0.8s var(--ease-elegant);
}

.nude-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.nude-delay-1 { transition-delay: 0.1s; }
.nude-delay-2 { transition-delay: 0.2s; }
.nude-delay-3 { transition-delay: 0.3s; }
.nude-delay-4 { transition-delay: 0.4s; }

/* ============================================
   Footer Override (nude page)
   ============================================ */
body.nude-page footer {
  background: var(--nude-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Header nude logo */
body.nude-page .header-nude-logo {
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.4s ease;
}

body.nude-page .header-nude-logo:hover {
  opacity: 0.7;
}

/* Menu trigger is always visible (controlled by JS toggle) */

/* Footer nude logo */
body.nude-page .footer-nude-logo {
  color: #fff;
  transition: opacity 0.4s ease;
}

body.nude-page .footer-logo:hover .footer-nude-logo {
  opacity: 0.7;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 1024px) {
  .nav-container { grid-template-columns: 1fr 1fr; }
  .nav-brand { padding: 80px 40px 40px; }
  .nav-main { padding: 80px 40px 40px; }
  .nav-text { font-size: clamp(1.3rem, 3vw, 1.8rem); }
  .nav-brand-name svg { width: 130px; }

  .nude-section-inner { padding: 0 40px; }
  .archive-layout { gap: 32px; }
  .archive-layout .widget-area { width: auto; }
  .posts-grid { gap: 20px; }
  .nude-ingredient-item { grid-template-columns: 80px 1fr; gap: 24px; padding: 36px; }
  .ingredient-number { font-size: 3rem; }
  .nude-scenes-grid { grid-template-columns: 1fr; gap: 24px; }
  .nude-product-content { grid-template-columns: 1fr; gap: 60px; }
  .nude-product-visual { max-width: 400px; margin: 0 auto; }
  .nude-brand-story-content { grid-template-columns: 1fr; gap: 48px; }
  .brand-story-visual { max-width: 500px; margin: 0 auto; }
  .sustainability-points { grid-template-columns: 1fr; gap: 20px; }
  .howtouse-steps { grid-template-columns: 1fr; gap: 24px; }
  .instagram-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-brand { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
  .footer-brand .footer-tagline { flex-basis: 100%; }
  .footer-nav-section { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .site-header { padding: 0 20px; height: 60px; }
  .menu-trigger { top: 18px; right: 20px; }
  .nav-container { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .nav-brand { border-right: none; border-bottom: 1px solid rgba(90, 122, 130, 0.12); padding: 80px 24px 32px; }
  .nav-brand-inner { max-width: 100%; }
  .nav-brand-name svg { width: 120px; }
  .nav-brand-name { margin-bottom: 16px; }
  .nav-brand-desc { margin-bottom: 20px; }
  .nav-main { padding: 24px 24px 40px; }

  .nude-hero { min-height: 100svh; padding: 80px 0; }
  .nude-hero-content { padding: 24px; }
  .nude-brand-logo svg { width: 120px; }
  .nude-section-inner { padding: 0 24px; }
  .nude-message-bar { margin-top: 60px; font-size: 0.7rem; height: 60px; padding: 0 12px; letter-spacing: 0.1em; }
  body.nude-page .site-header { top: 0; }

  .nude-concept, .nude-technology, .nude-foryou, .nude-product, .nude-waitlist { padding: 100px 0; }
  .nude-brand-story, .nude-sustainability, .nude-howtouse, .nude-faq, .nude-instagram, .nude-skinscan { padding: 100px 0; }
  .nude-skinscan { padding-bottom: 80px; }
  .nude-skinscan .nude-section-inner { margin-bottom: -60px; }
  .nude-discover { padding: 80px 0; }

  .nude-ingredient-item { grid-template-columns: 1fr; gap: 16px; padding: 28px; position: relative; }
  .ingredient-number { font-size: 2.5rem; position: absolute; top: 20px; right: 20px; opacity: 0.3; }
  .scene-content { padding: 24px; }
  .product-image-frame { border-radius: 200px 200px 20px 20px; }
  .product-image-frame::before { border-radius: 180px 180px 12px 12px; }

  .brand-story-quote { padding: 36px; }
  .quote-mark { font-size: 4rem; top: 16px; left: 24px; }
  .quote-text { font-size: 1.05rem; padding-top: 16px; }
  .meaning-item { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding: 0; text-align: center; white-space: nowrap; }
  .meaning-word { font-size: 1.5rem; }
  .meaning-pronunciation, .meaning-definition { font-size: 0.8rem; }

  .sustainability-point { flex-direction: column; gap: 12px; padding: 24px; }
  .howtouse-step { flex-direction: column; gap: 16px; padding: 28px; }
  .step-number { width: 48px; height: 48px; }

  .faq-question { padding: 20px 24px; }
  .faq-answer p { padding: 0 24px 20px 52px; }
  .instagram-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .instagram-follow-btn { padding: 14px 28px; font-size: 0.9rem; }
  .skinscan-desc br { display: none; }

  /* --- SkinScan: stack on mobile --- */
  .nude-skinscan-content { flex-direction: column; gap: 40px; margin-bottom: -50px;}
  .skinscan-phone { width: 220px; }
  .skinscan-text { text-align: center; max-width: 100%; padding-bottom: 120px; }

  .water-drop { width: 120px; height: 120px; }
  .water-drop-container { margin-bottom: 36px; }

  /* Footer responsive */
  .footer-main { padding: 40px 0 30px; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .footer-logo-text { font-size: 2rem; }
  .footer-tagline { font-size: 0.8rem; margin-top: 8px; }
  .footer-brand { gap: 8px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-direction: column; }
  .footer-social { margin-top: 8px; }
  .footer-nav-section { grid-template-columns: 1fr; gap: 0; }
  .footer-nav-col { gap: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .footer-nav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; background: transparent; border: none; cursor: pointer; }
  .footer-nav-toggle .footer-nav-title { margin: 0; }
  .footer-nav-icon { display: inline-block; font-size: 1.2rem; color: rgba(255, 255, 255, 0.5); transition: transform 0.3s ease; line-height: 1; }
  .footer-nav-toggle[aria-expanded="true"] .footer-nav-icon { transform: rotate(45deg); }
  .footer-nav-list { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0; }
  .footer-nav-col.is-open .footer-nav-list { max-height: 200px; padding-bottom: 16px; }
  .footer-address { margin-top: 0; }
  .footer-address p { font-size: 0.75rem; line-height: 1.7; }
  .footer-bottom { padding: 16px 0; }
  .footer-bottom .footer-inner { flex-direction: column; gap: 12px; }
  .footer-bottom-left, .footer-bottom-center, .footer-bottom-right { flex: none; text-align: center; }
  .footer-legal-links { justify-content: center; gap: 16px; }
  .footer-legal-link { font-size: 0.7rem; }
  .back-to-top { margin-top: 4px; }
  .copyright { font-size: 0.7rem; }

}

@media (max-width: 480px) {
  .nude-message-bar { margin-top: 60px; font-size: 0.6rem; height: 60px; letter-spacing: 0.05em; }
  body.nude-page .site-header { top: 0; }
  .nude-scroll-indicator { display: none; }
  .nude-release-info { flex-direction: row; gap: 12px; padding: 12px 20px; white-space: nowrap; }
  .nude-release-info span { font-size: 0.8rem; }
  .ingredient-tags { display: none; }

  .water-drop { width: 100px; height: 100px; }
  .water-drop-container { margin-bottom: 28px; }

  /* --- Front page: meaning definition wrapping fix --- */
  .meaning-item {
    flex-direction: column;
    align-items: center;
    gap: 4px 0;
    white-space: normal;
  }
  .meaning-word { font-size: 1.3rem; }
  .meaning-pronunciation { font-size: 0.75rem; }
  .meaning-definition { font-size: 0.75rem; white-space: normal; text-align: center; }

  /* --- Front page: product variant hint overflow fix --- */
  .product-variant-hint {
    white-space: normal;
    text-align: center;
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin-top: 16px;
    font-size: 0.7rem;
  }

  /* --- Front page: reduce section paddings on small screens --- */
  .nude-concept, .nude-technology, .nude-foryou, .nude-product, .nude-waitlist { padding: 72px 0; }
  .nude-brand-story, .nude-sustainability, .nude-howtouse, .nude-faq, .nude-instagram, .nude-skinscan { padding: 72px 0; }
  .nude-skinscan { padding-bottom: 60px; }
  .nude-skinscan .nude-section-inner { margin-bottom: -40px; }
  .skinscan-text { padding-bottom: 80px; }

  /* --- Front page: brand story quote padding --- */
  .brand-story-quote { padding: 28px 20px; }
  .quote-mark { font-size: 3rem; top: 12px; left: 16px; }
  .quote-text { font-size: 0.95rem; line-height: 2; }

  /* --- Front page: FAQ answer left padding fix --- */
  .faq-question { padding: 16px 16px; }
  .faq-q-mark { font-size: 1rem; }
  .faq-q-text { font-size: 0.9rem; }
  .faq-answer p { padding: 0 16px 16px 40px; font-size: 0.85rem; }

  /* --- Front page: hero copy size adjustments --- */
  .nude-hero-copy-en { font-size: 1.4rem; }
  .nude-hero-copy-ja { font-size: 1.15rem; margin-bottom: 24px; }
  .nude-hero-subcopy { font-size: 0.82rem; margin-bottom: 32px; }
  .nude-product-name { font-size: 0.8rem; letter-spacing: 0.3em; margin-bottom: 28px; }

  /* --- Front page: sustainability point stacking --- */
  .sustainability-point { padding: 20px; }
  .point-content h4 { font-size: 0.92rem; }
  .point-content p { font-size: 0.82rem; }

  /* --- Front page: howtouse step spacing --- */
  .howtouse-step { padding: 24px 20px; }
  .step-title { font-size: 1rem; }
  .step-desc { font-size: 0.85rem; }

  /* --- Front page: scenes card content padding --- */
  .scene-content { padding: 20px; }
  .scene-title { font-size: 1rem; }
  .scene-text { font-size: 0.82rem; }

  /* --- Front page: Instagram grid 2x2 with tighter gap --- */
  .instagram-grid { gap: 8px; }
  .instagram-follow-btn { padding: 12px 24px; font-size: 0.85rem; }

  /* --- Front page: Purchase buttons --- */
  .nude-purchase-btns { grid-template-columns: 1fr; gap: 14px; }
  .nude-official-btn { padding: 14px 28px; font-size: 0.9rem; gap: 10px; }
  .nude-official-btn .official-logo { width: 44px; }
  .nude-amazon-btn { padding: 14px 28px; font-size: 0.9rem; }
  .nude-amazon-btn .amazon-logo { width: 64px; }

  /* --- Front page: SkinScan button & phone --- */
  .skinscan-btn { padding: 14px 28px; font-size: 0.9rem; }
  .skinscan-phone { width: 180px; }

  /* --- Front page: section titles --- */
  .nude-section-title-en { font-size: 1.5rem; }
  .nude-section-title-ja { font-size: 1rem; }
  .nude-section-label { font-size: 0.7rem; }

  /* --- Front page: technology section lead --- */
  .nude-tech-lead { margin-bottom: 48px; font-size: 0.9rem; }
  .nude-concept-lead { font-size: 1.05rem; }

  /* --- Front page: waitlist lead --- */
  .nude-waitlist-lead { font-size: 1rem; }
}

/* ============================================
   WordPress Post/Page Styles
   ============================================ */
.site-main .nude-section-inner {
  padding-top: 20px;
  padding-bottom: 80px;
}

/* Archive layout: content + sidebar */
.archive-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
  align-items: start;
}

.archive-main {
  min-width: 0;
}

.archive-layout .widget-area {
  padding: 8px 0 0;
  position: sticky;
  top: 100px;
  align-self: start;
}

/* Sidebar CTA */
.widget-area .single-cta {
  margin-top: 24px;
}

.widget-area .cta-inner {
  flex-direction: column;
  text-align: center;
  padding: 28px 20px 0;
  gap: 12px;
}

.widget-area .cta-image {
  position: static;
  width: 80px;
  order: 3;
  margin: 0 auto -20px;
  pointer-events: auto;
}

.widget-area .cta-text {
  order: 1;
}

.widget-area .cta-button {
  order: 2;
  padding: 10px 20px;
  font-size: 0.8rem;
}

.widget-area .cta-label {
  font-size: 0.95rem;
}

.widget-area .cta-copy {
  font-size: 0.78rem;
}

.widget-area .cta-copy .sp-only {
  display: inline;
}

/* Archive / Category pages: ensure content is visible immediately */
.site-main .page-header.nude-fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Single post / page: ensure article content is visible immediately
   (large articles exceed IntersectionObserver 10% threshold) */
.single-post-main .single-article.nude-fade-in,
.site-main > .nude-article.nude-fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Related Posts / Discover sections: ensure visible
   (these follow </article> and may not intersect the observer threshold) */
.single-post-main .single-related.nude-fade-in,
.single-post-main .single-discover.nude-fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Archive page header typography adjustments from preview */
.archive-main .page-header h1.nude-section-title-en {
  font-size: 25px;
}

.archive-main .page-header span.nude-section-label {
  font-size: 14px;
  color: var(--gray-bg);
}

.site-main .posts-grid .nude-article.nude-fade-in {
  opacity: 1;
  transform: translateY(0);
}

.nude-article {
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(45, 45, 42, 0.08);
}

.nude-article:last-child {
  border-bottom: none;
}

.entry-header {
  margin-bottom: 32px;
}

.entry-title {
  font-family: var(--font-gothic);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--nude-charcoal);
  margin: 0 0 16px;
  letter-spacing: 0.02em;
}

.entry-title a {
  color: var(--nude-charcoal);
  text-decoration: none;
  transition: color 0.3s ease;
}

.entry-title a:hover {
  color: var(--nude-blue-deep);
  opacity: 1;
}

.entry-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--nude-stone);
}

.entry-thumbnail {
  margin-bottom: 32px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--nude-lemon-light) 0%, var(--nude-blue-light) 100%);
}

.entry-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

.entry-content {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--font-mincho);
  color: var(--nude-charcoal);
  margin-top: 48px;
  margin-bottom: 16px;
}

.entry-content h2 { font-size: 1.5rem; }
.entry-content h3 { font-size: 1.3rem; }
.entry-content h4 { font-size: 1.1rem; }

.entry-content p {
  margin-bottom: 24px;
}

.entry-content a {
  color: var(--nude-blue-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.entry-content a:hover {
  color: var(--nude-blue-dark);
  opacity: 1;
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.entry-content blockquote {
  padding: 32px 40px;
  margin: 32px 0;
  background: linear-gradient(135deg, var(--nude-blue-lightest) 0%, var(--nude-lemon-lightest) 100%);
  border-left: 4px solid var(--nude-blue);
  border-radius: 0 16px 16px 0;
  font-family: var(--font-mincho);
  font-size: 1.05rem;
  line-height: 2;
  color: var(--nude-charcoal);
}

.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.entry-content ul,
.entry-content ol {
  padding-left: 24px;
  margin-bottom: 24px;
}

.entry-content li {
  margin-bottom: 8px;
}

.entry-footer {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  color: var(--nude-stone);
}

.entry-footer a {
  color: var(--nude-blue-deep);
}

.entry-summary {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--nude-stone);
}

/* Post Navigation (prev/next) */
.posts-navigation,
.post-navigation {
  margin: 48px 0;
  padding: 24px 0;
  border-top: 1px solid rgba(45, 45, 42, 0.08);
}

.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.posts-navigation a,
.post-navigation a {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  color: var(--nude-blue-deep);
  text-decoration: none;
  transition: color 0.3s ease;
}

.posts-navigation a:hover,
.post-navigation a:hover {
  color: var(--nude-charcoal);
  opacity: 1;
}

/* Pagination (numbered) */
.pagination {
  margin: 56px 0 0;
  padding: 32px 0;
  border-top: 1px solid rgba(45, 45, 42, 0.08);
}

.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--nude-stone);
  text-decoration: none;
  border: 1px solid rgba(45, 45, 42, 0.12);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.pagination a.page-numbers:hover {
  color: var(--nude-charcoal);
  border-color: var(--nude-charcoal);
  background: rgba(45, 45, 42, 0.03);
  opacity: 1;
}

.pagination .page-numbers.current {
  color: var(--nude-white);
  background: var(--nude-charcoal);
  border-color: var(--nude-charcoal);
}

.pagination .page-numbers.dots {
  border: none;
  background: none;
  min-width: auto;
  padding: 0 4px;
  color: rgba(45, 45, 42, 0.3);
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
  font-size: 1rem;
  border: none;
  background: none;
  color: var(--nude-blue-deep);
}

.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover {
  color: var(--nude-charcoal);
  background: none;
}

.nav-subtitle {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nude-stone);
  margin-bottom: 4px;
}

.nav-title {
  display: block;
}

/* Posts Grid */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 48px;
}

/* Card style for articles inside grid */
.posts-grid .nude-article {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  background: rgba(255, 255, 255, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease-elegant), box-shadow 0.4s var(--ease-elegant);
  box-shadow: 0 2px 16px rgba(45, 45, 42, 0.06);
}

.posts-grid .nude-article:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(45, 45, 42, 0.10);
}

.posts-grid .nude-article .entry-thumbnail {
  margin-bottom: 0;
  border-radius: 0;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: var(--nude-blue, #B5C7CC);
}

.posts-grid .nude-article .entry-thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
}

.posts-grid .nude-article .entry-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-elegant);
}

.posts-grid .nude-article:hover .entry-thumbnail img {
  transform: scale(0.95);
}

.posts-grid .nude-article .entry-header {
  padding: 15px 15px 0;
  margin-bottom: 8px;
}

.posts-grid .nude-article .entry-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.posts-grid .nude-article .entry-meta {
  font-size: 0.75rem;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}

.posts-grid .nude-article .entry-meta > * {
  white-space: nowrap;
}

.posts-grid .nude-article .entry-meta-bottom {
  padding: 0 15px 20px;
  color: #5c6062;
}

.posts-grid .nude-article .entry-category {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(181, 199, 204, 0.28);
  color: #5a7f88;
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.posts-grid .nude-article .entry-category:hover {
  opacity: 1;
  background: rgba(181, 199, 204, 0.44);
}

.posts-grid .nude-article .entry-content {
  padding: 0 15px 15px;
  font-size: 0.8rem;
  line-height: 1.8;
  flex: 1;
  color: #555859;
}

.posts-grid .nude-article .entry-content p {
  margin-top: 0;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Archive Description */
.archive-description {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  color: var(--nude-stone);
  margin-top: 16px;
  line-height: 1.8;
}

/* Search Form */
.search-form {
  display: flex;
  gap: 12px;
  max-width: 500px;
  margin: 32px auto 0;
}

.search-field {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid rgba(45, 45, 42, 0.15);
  border-radius: 100px;
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.8);
  color: var(--nude-charcoal);
  outline: none;
  transition: border-color 0.3s ease;
}

.search-field:focus {
  border-color: var(--nude-blue);
}

.search-submit {
  padding: 14px 28px;
  background: var(--nude-charcoal);
  color: var(--nude-white);
  border: none;
  border-radius: 100px;
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-submit:hover {
  background: var(--nude-blue-dark);
  transform: translateY(-2px);
}

/* Comments */
.comments-area {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid rgba(45, 45, 42, 0.08);
}

.comments-title {
  font-family: var(--font-mincho);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin-bottom: 32px;
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment-list li {
  margin-bottom: 24px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
}

.comment-form label {
  display: block;
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  color: var(--nude-stone);
  margin-bottom: 8px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(45, 45, 42, 0.15);
  border-radius: 12px;
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.8);
  color: var(--nude-charcoal);
  outline: none;
  transition: border-color 0.3s ease;
  margin-bottom: 16px;
}

.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--nude-blue);
}

.comment-form .form-submit input[type="submit"] {
  padding: 14px 32px;
  background: var(--nude-charcoal);
  color: var(--nude-white);
  border: none;
  border-radius: 100px;
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.comment-form .form-submit input[type="submit"]:hover {
  background: var(--nude-blue-dark);
  transform: translateY(-2px);
}

/* Screen Reader Text */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* WordPress Alignment Classes */
.alignleft {
  float: left;
  margin-right: 1.5em;
  margin-bottom: 1em;
}

.alignright {
  float: right;
  margin-left: 1.5em;
  margin-bottom: 1em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
}

.alignwide {
  max-width: calc(100% + 80px);
  margin-left: -40px;
  margin-right: -40px;
}

.alignfull {
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* WordPress Caption */
.wp-caption {
  max-width: 100%;
  margin-bottom: 1em;
}

.wp-caption img {
  display: block;
  max-width: 100%;
  height: auto;
}

.wp-caption-text {
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  color: var(--nude-stone);
  text-align: center;
  padding-top: 8px;
}

/* Page Links */
.page-links {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  color: var(--nude-stone);
  margin-top: 24px;
}

/* Widget Area */
.widget-area {
  padding: 40px 0;
}

.widget {
  margin-bottom: 40px;
}

.widget-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nude-stone);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(45, 45, 42, 0.08);
}

.widget ul {
  list-style: none;
  padding: 0;
}

.widget li {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  padding: 8px 0;
  border-bottom: 1px solid rgba(45, 45, 42, 0.04);
}

.widget a {
  color: var(--nude-stone);
  text-decoration: none;
  transition: color 0.3s ease;
}

.widget a:hover {
  color: var(--nude-blue-deep);
  opacity: 1;
}

/* Sidebar: Search */
.nude-sidebar-search .search-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

.nude-sidebar-search .search-form label {
  flex: 1;
  display: flex;
}

.nude-sidebar-search .search-field {
  flex: 1;
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  color: var(--nude-charcoal);
  height: auto;
  background: rgba(45, 45, 42, 0.03);
  border: 1px solid rgba(45, 45, 42, 0.1);
  border-right: none;
  border-radius: 4px 0 0 4px;
  outline: none;
  transition: border-color 0.3s ease;
}

.nude-sidebar-search .search-field:focus {
  border-color: var(--nude-blue-deep);
}

.nude-sidebar-search .search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: var(--nude-white);
  background: var(--nude-charcoal);
  border: 1px solid var(--nude-charcoal);
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background 0.3s ease;
}

.nude-sidebar-search .search-submit:hover {
  background: var(--nude-blue-deep);
  border-color: var(--nude-blue-deep);
}

/* Sidebar: Category counts */
.nude-sidebar-categories li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(45, 45, 42, 0.06);
}

.nude-sidebar-categories li:first-child {
  border-top: none;
}

.nude-sidebar-categories li a {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 12px 4px;
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  text-decoration: none;
  transition: all 0.3s ease;
}

.nude-sidebar-categories li a:hover {
  color: var(--nude-blue-deep);
  padding-left: 8px;
}

.sidebar-cat-count {
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  color: var(--nude-stone);
  background: rgba(45, 45, 42, 0.04);
  padding: 2px 10px;
  border-radius: 20px;
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}

/* Sidebar: Popular Posts */
.popular-posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
}

.popular-post-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(45, 45, 42, 0.04);
}

.popular-post-item:first-child {
  padding-top: 0;
}

.popular-post-item:last-child {
  border-bottom: none;
}

.popular-rank {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-family: var(--font-gothic);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--nude-stone);
  background: rgba(45, 45, 42, 0.05);
  border-radius: 50%;
  margin-top: 2px;
}

.popular-post-item:nth-child(1) .popular-rank {
  color: #fff;
  background: #c5a844;
}

.popular-post-item:nth-child(2) .popular-rank {
  color: #fff;
  background: #a8a8a8;
}

.popular-post-item:nth-child(3) .popular-rank {
  color: #fff;
  background: #b08d57;
}

.popular-post-content {
  flex: 1;
  min-width: 0;
}

.popular-post-info {
  flex: 1;
  min-width: 0;
}

.popular-post-title {
  display: block;
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--nude-charcoal);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.popular-post-title:hover {
  color: var(--nude-blue-deep);
  opacity: 1;
}

.popular-post-date {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: rgba(45, 45, 42, 0.4);
  letter-spacing: 0.05em;
}

/* Sidebar: Tag Cloud */
.nude-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nude-tag {
  display: inline-block;
  padding: 5px 12px;
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  color: var(--nude-stone);
  background: rgba(45, 45, 42, 0.04);
  border: 1px solid rgba(45, 45, 42, 0.08);
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
}

.nude-tag:hover {
  color: var(--nude-blue-deep);
  background: rgba(181, 199, 204, 0.15);
  border-color: rgba(181, 199, 204, 0.3);
  opacity: 1;
}

/* Sidebar: About */
.sidebar-about-content {
  padding: 20px;
  background: rgba(45, 45, 42, 0.02);
  border: 1px solid rgba(45, 45, 42, 0.06);
  border-radius: 8px;
}

.sidebar-about-logo {
  margin-bottom: 12px;
  opacity: 1;
}

.sidebar-about-logo svg {
  display: block;
}

.sidebar-about-text {
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--nude-stone);
  margin: 0 0 16px;
}

.sidebar-about-link {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--nude-blue-deep);
  text-decoration: none;
  transition: color 0.3s ease;
}

.sidebar-about-link:hover {
  color: var(--nude-charcoal);
  opacity: 1;
}

/* ============================================
   Static Pages — Legal (Privacy, Tokushoho)
   ============================================ */
.nude-legal-page .legal-header {
  text-align: center;
  margin-bottom: 64px;
}

.nude-legal-page .legal-lead {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 2;
  color: var(--nude-stone);
  max-width: 800px;
  margin: 0 auto 56px;
  text-align: center;
}

.nude-legal-page .legal-content {
  max-width: 800px;
  margin: 0 auto;
}

.nude-legal-page .legal-section {
  margin-bottom: 48px;
}

.nude-legal-page .legal-section h2 {
  font-family: var(--font-mincho);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--nude-charcoal);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(181, 199, 204, 0.3);
}

.nude-legal-page .legal-section p {
  font-family: var(--font-gothic);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin: 0 0 16px;
}

.nude-legal-page .legal-section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.nude-legal-page .legal-section ul li {
  font-family: var(--font-gothic);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  padding-left: 20px;
  position: relative;
}

.nude-legal-page .legal-section ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nude-blue);
}

.nude-legal-page .legal-contact-box {
  padding: 28px 32px;
  background: var(--nude-mist);
  border-radius: 16px;
  border: 1px solid rgba(181, 199, 204, 0.2);
}

.nude-legal-page .legal-contact-box p {
  margin: 0 0 8px;
}

.nude-legal-page .legal-contact-box p:last-child {
  margin-bottom: 0;
}

.nude-legal-page .legal-contact-box a {
  color: var(--nude-blue-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nude-legal-page .legal-contact-box a:hover {
  color: var(--nude-blue-dark);
  opacity: 1;
}

.nude-legal-page .legal-date {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(181, 199, 204, 0.2);
  text-align: right;
}

.nude-legal-page .legal-date p {
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  color: var(--nude-stone);
  margin: 0 0 4px;
}

/* Tokushoho Table */
.tokusho-table-wrap {
  max-width: 800px;
  margin: 0 auto;
}

.tokusho-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(45, 45, 42, 0.06);
}

.tokusho-table tr {
  transition: background 0.3s ease;
}

.tokusho-table tr:hover {
  background: var(--nude-blue-lightest);
}

.tokusho-table th,
.tokusho-table td {
  font-family: var(--font-gothic);
  font-size: 0.92rem;
  line-height: 1.8;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(181, 199, 204, 0.15);
  text-align: left;
  vertical-align: top;
}

.tokusho-table th {
  width: 180px;
  font-weight: 500;
  color: var(--nude-blue-dark);
  background: rgba(181, 199, 204, 0.08);
  white-space: nowrap;
}

.tokusho-table td {
  font-weight: 300;
  color: var(--nude-charcoal);
  background: var(--nude-white);
}

.tokusho-table tr:last-child th,
.tokusho-table tr:last-child td {
  border-bottom: none;
}

.tokusho-table td a {
  color: var(--nude-blue-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tokusho-table td a:hover {
  color: var(--nude-blue-dark);
  opacity: 1;
}

@media (max-width: 768px) {
  .tokusho-table th {
    width: 100px;
    font-size: 0.82rem;
    padding: 14px 12px;
    white-space: normal;
  }
  .tokusho-table td {
    font-size: 0.82rem;
    padding: 14px 12px;
    word-break: break-all;
  }
  .tokusho-table td a {
    word-break: break-all;
  }
}

@media (max-width: 480px) {
  .tokusho-table {
    display: block;
  }
  .tokusho-table tbody,
  .tokusho-table tr {
    display: block;
  }
  .tokusho-table th,
  .tokusho-table td {
    display: block;
    width: 100%;
    padding: 10px 16px;
  }
  .tokusho-table th {
    background: rgba(181, 199, 204, 0.12);
    border-bottom: none;
    padding-bottom: 6px;
    font-size: 0.78rem;
  }
  .tokusho-table td {
    padding-top: 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(181, 199, 204, 0.15);
    font-size: 0.82rem;
  }
}

/* ============================================
   FAQ Page
   ============================================ */
.faq-page-header {
  text-align: center;
  margin-bottom: 64px;
}

.faq-page-lead {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin-top: 24px;
}

.faq-page-content {
  max-width: 800px;
  margin: 0 auto;
}

.faq-page-category {
  margin-bottom: 80px;
}

.faq-category-title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 600;
  color: var(--nude-charcoal);
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: none;
}

.faq-category-number {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--nude-blue-deep);
}

.faq-page-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-page-item {
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.2);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s var(--ease-elegant);
}

.faq-page-item:hover {
  border-color: rgba(181, 199, 204, 0.4);
}

.faq-page-item.open {
  border-color: var(--nude-blue);
  box-shadow: 0 4px 20px rgba(181, 199, 204, 0.15);
}

.faq-page-question {
  width: 100%;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.3s ease;
}

.faq-page-question:hover {
  background: rgba(181, 199, 204, 0.06);
}

.faq-page-question .faq-q-mark {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--nude-blue-deep);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(181, 199, 204, 0.15);
  border-radius: 8px;
}

.faq-page-question .faq-q-text {
  flex: 1;
  font-family: var(--font-mincho);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  line-height: 1.7;
}

.faq-page-question .faq-toggle {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--nude-blue-deep);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-page-item.open .faq-page-question .faq-toggle {
  transform: rotate(45deg);
}

.faq-page-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-elegant);
}

.faq-answer-inner {
  display: flex;
  gap: 16px;
  padding: 0 24px 24px;
}

.faq-a-mark {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--nude-lemon-deep);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(243, 244, 205, 0.3);
  border-radius: 8px;
}

.faq-answer-inner p {
  flex: 1;
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin: 0;
}

.faq-answer-inner p a {
  color: var(--nude-blue-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.faq-page-contact {
  max-width: 800px;
  margin: 48px auto 0;
  padding-top: 48px;
  border-top: 1px solid rgba(181, 199, 204, 0.2);
}

.faq-contact-inner {
  text-align: center;
  padding: 48px;
  background: linear-gradient(135deg, var(--nude-blue-lightest) 0%, var(--nude-lemon-lightest) 100%);
  border-radius: 24px;
}

.faq-contact-inner h3 {
  font-family: var(--font-mincho);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 12px;
}

.faq-contact-inner p {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  color: var(--nude-stone);
  margin: 0 0 28px;
}

.faq-contact-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.faq-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.4s var(--ease-elegant);
}

.faq-contact-instagram {
  background: var(--nude-charcoal);
  color: var(--nude-white);
}

.faq-contact-instagram:hover {
  background: var(--nude-blue-dark);
  transform: translateY(-2px);
  opacity: 1;
}

.faq-contact-company {
  background: transparent;
  color: var(--nude-charcoal);
  border: 1px solid var(--nude-charcoal);
}

.faq-contact-company:hover {
  background: var(--nude-charcoal);
  color: var(--nude-white);
  transform: translateY(-2px);
  opacity: 1;
}

/* ============================================
   How to Use Page
   ============================================ */
.howtouse-page-header {
  text-align: center;
  margin-bottom: 80px;
}

.howtouse-page-lead {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin-top: 24px;
}

.howtouse-page-section {
  margin-bottom: 120px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.howtouse-section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  margin: 0 0 8px;
}

.howtouse-section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 0.5rem;
  line-height: 1;
  color: var(--nude-blue-deep);
  background: rgba(181, 199, 204, 0.3);
  border-radius: 50%;
  will-change: border-radius, transform;
}

.howtouse-section-subtitle {
  font-family: var(--font-mincho);
  font-size: 0.95rem;
  color: var(--nude-stone);
  margin: 0 0 40px;
  letter-spacing: 0.06em;
  text-align: center;
}

.howtouse-steps-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.howtouse-step-card {
  display: flex;
  gap: 24px;
  padding: 28px 32px;
  background: var(--nude-white);
  border-radius: 20px;
  border: 1px solid rgba(181, 199, 204, 0.15);
  transition: all 0.4s var(--ease-elegant);
}

.howtouse-step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(45, 45, 42, 0.06);
}

.howtouse-step-highlight {
  background: linear-gradient(135deg, var(--nude-blue-lightest) 0%, var(--nude-lemon-lightest) 100%);
  border-color: var(--nude-blue-light);
}

.step-card-number {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--nude-blue-light) 0%, var(--nude-lemon-light) 100%);
  border-radius: 16px;
}

.howtouse-step-highlight .step-card-number {
  background: rgba(255, 255, 255, 0.7);
}

.step-card-number span {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--nude-charcoal);
}

.step-card-content {
  flex: 1;
}

.step-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--nude-blue-dark);
  background: rgba(255, 255, 255, 0.6);
  padding: 2px 10px;
  border-radius: 100px;
  margin-bottom: 8px;
}

.step-card-content h3 {
  font-family: var(--font-mincho);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 10px;
}

.step-card-content p {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--nude-stone);
  margin: 0;
}

.step-card-content strong {
  color: var(--nude-charcoal);
  font-weight: 500;
}

/* Tips Grid */
.howtouse-tips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.howtouse-tip-card {
  padding: 28px;
  background: var(--nude-white);
  border-radius: 20px;
  border: 1px solid rgba(181, 199, 204, 0.15);
  transition: all 0.4s var(--ease-elegant);
}

.howtouse-tip-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(45, 45, 42, 0.08);
}

.tip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--nude-blue-lightest) 0%, var(--nude-lemon-lightest) 100%);
  border-radius: 14px;
  margin-bottom: 16px;
  color: var(--nude-blue-deep);
}

.howtouse-tip-card h3 {
  font-family: var(--font-mincho);
  font-size: 1rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 10px;
}

.howtouse-tip-card p {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--nude-stone);
  margin: 0;
}

/* Q&A */
.howtouse-qa-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.howtouse-qa-item {
  padding: 28px;
  background: var(--nude-white);
  border-radius: 20px;
  border: 1px solid rgba(181, 199, 204, 0.15);
}

.qa-question, .qa-answer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.qa-question {
  margin-bottom: 16px;
}

.qa-mark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--nude-blue-deep);
  background: rgba(181, 199, 204, 0.15);
  border-radius: 8px;
}

.qa-mark-a {
  color: var(--nude-lemon-deep);
  background: rgba(243, 244, 205, 0.3);
}

.qa-question span:not(.qa-mark) {
  font-family: var(--font-mincho);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  line-height: 1.7;
  padding-top: 2px;
}

.qa-answer p {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--nude-stone);
  margin: 0;
  padding-top: 2px;
}

/* How to Use CTA */
.howtouse-page-cta {
  max-width: 900px;
  margin: 0 auto 60px;
}

.howtouse-cta-inner {
  text-align: center;
  padding: 56px 40px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(42, 45, 46, 0.9) 100%);
  border-radius: 24px;
  color: var(--nude-white);
}

.howtouse-cta-copy {
  font-family: var(--font-mincho);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 2;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 32px;
  letter-spacing: 0.08em;
}

.howtouse-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  background: var(--nude-white);
  color: var(--nude-charcoal);
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.4s var(--ease-elegant);
}

.howtouse-cta-btn:hover {
  background: var(--nude-blue-light);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 1;
}

@media (max-width: 768px) {
  .howtouse-steps-grid { gap: 16px; }
  .howtouse-step-card { flex-direction: column; gap: 16px; padding: 24px; }
  .step-card-number { width: 48px; height: 48px; }
  .howtouse-tips-grid { grid-template-columns: 1fr; }
  .howtouse-page-section { margin-bottom: 56px; }
  .howtouse-cta-inner { padding: 40px 24px; }
  .howtouse-section-title { font-size: 1.8rem; }
  .howtouse-cta-copy { font-size: 1.1rem; }
}

@media (max-width: 480px) {
  .howtouse-step-card { padding: 20px 16px; gap: 12px; }
  .step-card-number { width: 40px; height: 40px; border-radius: 12px; }
  .step-card-content h3 { font-size: 1rem; }
  .step-card-content p { font-size: 0.85rem; }
  .howtouse-tip-card { padding: 20px; }
  .howtouse-tip-card h3 { font-size: 0.92rem; }
  .howtouse-tip-card p { font-size: 0.82rem; }
  .howtouse-cta-inner { padding: 32px 20px; }
  .howtouse-cta-copy { font-size: 1rem; }
  .howtouse-cta-btn { padding: 14px 28px; font-size: 0.88rem; }
  .howtouse-section-title { font-size: 1.5rem; }
}

/* ============================================
   About Brand Page
   ============================================ */
.brand-page-header {
  text-align: center;
  margin-bottom: 80px;
}

.brand-page-section {
  margin-bottom: 120px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.brand-page-section.brand-name-section {
  margin-top: -60px;
}

.brand-page-section.brand-values {
  margin-bottom: 120px;
}

.brand-section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  margin: 0 0 0;
}

.brand-section-subtitle {
  font-family: var(--font-mincho);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--nude-charcoal);
  text-align: center;
  margin: 0 0 40px;
}

.brand-section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 0.5rem;
  line-height: 1;
  color: var(--nude-blue-deep);
  background: rgba(181, 199, 204, 0.18);
  border-radius: 50%;
  will-change: border-radius, transform;
}

/* Philosophy */
.brand-quote-block {
  text-align: center;
  padding: 56px 40px;
  background: var(--nude-white);
  border-radius: 24px;
  margin-bottom: 48px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.brand-quote-mark {
  position: absolute;
  top: 20px;
  left: 32px;
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: 300;
  color: var(--nude-blue);
  opacity: 0.2;
  line-height: 1;
}

.brand-quote-text {
  font-family: var(--font-mincho);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 12px;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 1;
}

.brand-quote-en {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  color: var(--nude-stone);
  margin: 0;
  letter-spacing: 0.05em;
}

.brand-philosophy-text p {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin: 0 0 20px;
  text-align: justify;
}

.brand-philosophy-text p:first-child {
  font-family: var(--font-mincho);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--nude-charcoal);
}

/* Brand Name Card */
.brand-name-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: 48px;
  background: unset;
  border-radius: 24px;
  border: none;
}

.brand-name-display {
  color: var(--nude-charcoal);
}

.brand-name-display svg {
  display: block;
}

.brand-name-meaning {
  max-width: 560px;
}

.meaning-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.meaning-phonetic {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 300;
  font-style: italic;
  color: var(--nude-charcoal);
}

.meaning-origin {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 300;
  font-style: italic;
  color: var(--nude-stone);
}

.meaning-def {
  font-family: var(--font-mincho);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 16px;
  letter-spacing: 0.08em;
}

.meaning-desc {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--nude-stone);
  margin: 0;
}

/* Brand Identity Honeycomb */
.brand-identity-honeycomb {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 56px auto 0;
}

.honeycomb-row {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.honeycomb-row:nth-child(2),
.honeycomb-row:nth-child(3) {
  margin-top: -58px;
}

.honeycomb-cell {
  width: 240px;
  height: 276px;
  flex-shrink: 0;
}

.honeycomb-hex {
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(181, 199, 204, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  transition: background 0.3s ease, transform 0.3s ease;
}

.honeycomb-hex:hover {
  background: rgba(181, 199, 204, 0.2);
}

.honeycomb-core .honeycomb-hex {
  background: var(--nude-charcoal);
}

.honeycomb-core .honeycomb-hex:hover {
  background: #3d3d3d;
}

.hex-label-en {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--nude-charcoal);
  margin-bottom: 2px;
  line-height: 1.3;
}

.honeycomb-core .hex-label-en {
  color: #fff;
}

.hex-label-ja {
  font-family: var(--font-gothic);
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--nude-stone);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.honeycomb-core .hex-label-ja {
  color: rgba(255, 255, 255, 0.6);
}

.hex-desc {
  font-family: var(--font-gothic);
  font-size: 0.76rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--nude-text-muted);
  margin: 0;
}

.honeycomb-core .hex-desc {
  color: rgba(255, 255, 255, 0.85);
}

/* Values */
.brand-values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.brand-value-card {
  padding: 32px;
  background: var(--nude-white);
  border-radius: 20px;
  border: 1px solid rgba(181, 199, 204, 0.15);
  transition: all 0.4s var(--ease-elegant);
}

.brand-value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(45, 45, 42, 0.08);
}

.value-number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  color: var(--nude-blue);
  opacity: 0.4;
  display: block;
  margin-bottom: 12px;
}

.brand-value-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--nude-charcoal);
  margin: 0 0 8px;
  letter-spacing: 0.03em;
}

.value-text-ja {
  font-family: var(--font-mincho);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 16px !important;
}

.brand-value-card p {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--nude-stone);
  margin: 0;
}

/* Story */
.brand-story-content {
  max-width: 700px;
  margin: 0 auto;
}

.brand-story-lead {
  font-family: var(--font-mincho);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 2;
  color: var(--nude-charcoal);
  margin: 0 0 32px;
  text-align: center;
}

.brand-story-content p:not(.brand-story-lead) {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin: 0 0 20px;
  text-align: justify;
}

/* Sustainability */
.brand-sustainability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sustainability-item {
  padding: 28px;
  background: var(--nude-white);
  border-radius: 20px;
  border: 1px solid rgba(181, 199, 204, 0.15);
  transition: all 0.4s var(--ease-elegant);
}

.sustainability-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(45, 45, 42, 0.08);
}

.sustainability-item h3 {
  font-family: var(--font-mincho);
  font-size: 1rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 12px;
}

.sustainability-item p {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--nude-stone);
  margin: 0;
}

/* Brand CTA */
.brand-page-cta {
  max-width: 900px;
  margin: 0 auto 60px;
}

.brand-cta-inner {
  text-align: center;
  padding: 56px 40px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 24px;
}

.brand-cta-logo {
  color: var(--nude-charcoal);
  margin-bottom: 16px;
}

.brand-cta-tagline {
  font-family: var(--font-mincho);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--nude-charcoal);
  margin: 0 0 8px;
  letter-spacing: 0.08em;
}

.brand-cta-lead {
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--nude-stone);
  margin: 0 0 32px;
  letter-spacing: 0.04em;
}

.brand-cta-links {
  list-style: none;
  margin: 0 auto 28px;
  padding: 0;
  max-width: 480px;
  text-align: left;
}

.brand-cta-links li {
  border-bottom: 1px solid rgba(181, 199, 204, 0.3);
}

.brand-cta-links li:first-child {
  border-top: 1px solid rgba(181, 199, 204, 0.3);
}

.brand-cta-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 4px;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.brand-cta-link:hover {
  opacity: 0.6;
}

.brand-cta-link-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--nude-stone);
  text-transform: uppercase;
  min-width: 80px;
  flex-shrink: 0;
}

.brand-cta-link-title {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  flex: 1;
}

.brand-cta-link-arrow {
  font-size: 0.85rem;
  color: var(--nude-stone);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.brand-cta-link:hover .brand-cta-link-arrow {
  transform: translateX(4px);
  color: var(--nude-charcoal);
}

.brand-cta-purchase {
  margin-top: 4px;
}

.brand-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.4s var(--ease-elegant);
  background: transparent;
  color: var(--nude-charcoal);
  border: 1px solid var(--nude-charcoal);
}

.brand-cta-btn:hover {
  background: var(--nude-charcoal);
  color: var(--nude-white);
  border-color: var(--nude-charcoal);
  transform: translateY(-2px);
}

.brand-cta-btn-primary {
  background: var(--nude-charcoal);
  color: var(--nude-white);
  border-color: var(--nude-charcoal);
}

.brand-cta-btn-primary:hover {
  background: transparent;
  color: var(--nude-charcoal);
  border-color: var(--nude-charcoal);
}

@media (max-width: 768px) {
  .brand-name-card { gap: 24px; padding: 40px 24px; }
  .brand-values-grid { grid-template-columns: 1fr; }
  .brand-sustainability-grid { grid-template-columns: 1fr; }
  .brand-quote-block { padding: 40px 24px; }
  .brand-quote-mark { font-size: 4rem; top: 12px; left: 20px; }
  .brand-cta-inner { padding: 40px 24px; }
  .brand-cta-link-label { min-width: 64px; font-size: 0.62rem; }
  .brand-cta-link-title { font-size: 0.82rem; }
  .brand-page-section { margin-bottom: 72px; }
  .brand-section-title { font-size: 1.8rem; }
  .brand-section-subtitle { font-size: 0.88rem; margin-bottom: 28px; }
  .brand-page-section.brand-name-section { margin-top: -30px; }
  .meaning-row { gap: 8px; }
  .meaning-phonetic { font-size: 1.1rem; }
  .meaning-def { font-size: 0.95rem; }
  .meaning-desc { font-size: 0.82rem; }
  .brand-story-lead { font-size: 1.1rem; }
  .brand-value-card h3 { font-size: 20px; }

  /* Honeycomb responsive */
  .honeycomb-cell {
    width: 145px;
    height: 166px;
  }
  .honeycomb-row:nth-child(2),
  .honeycomb-row:nth-child(3) {
    margin-top: -34px;
  }
  .honeycomb-hex {
    padding: 42px 16px;
  }
  .hex-label-en {
    font-size: 0.65rem;
  }
  .hex-label-ja {
    font-size: 0.58rem;
    margin-bottom: 4px;
  }
  .hex-desc {
    font-size: 0.56rem;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .honeycomb-cell {
    width: 105px;
    height: 121px;
  }
  .honeycomb-row {
    gap: 3px;
  }
  .honeycomb-row:nth-child(2),
  .honeycomb-row:nth-child(3) {
    margin-top: -24px;
  }
  .honeycomb-hex {
    padding: 30px 8px;
  }
  .hex-label-en {
    font-size: 0.55rem;
  }
  .hex-label-ja {
    font-size: 0.48rem;
    margin-bottom: 2px;
  }
  .hex-desc {
    font-size: 0.44rem;
    line-height: 1.35;
  }
}

@media (max-width: 374px) {
  .honeycomb-cell {
    width: 95px;
    height: 110px;
  }
  .honeycomb-row {
    gap: 2px;
  }
  .honeycomb-row:nth-child(2),
  .honeycomb-row:nth-child(3) {
    margin-top: -22px;
  }
  .honeycomb-hex {
    padding: 28px 6px;
  }
  .hex-label-en {
    font-size: 0.5rem;
  }
  .hex-label-ja {
    font-size: 0.44rem;
  }
  .hex-desc {
    font-size: 0.4rem;
    line-height: 1.3;
  }
}

/* ============================================
   Company Page
   ============================================ */
.company-page-header {
  text-align: center;
  margin-bottom: 64px;
}

.company-page-section {
  margin-bottom: 64px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.company-info-card {
  padding: 48px;
  background: var(--nude-white);
  border-radius: 24px;
  border: 1px solid rgba(181, 199, 204, 0.2);
}

.company-name {
  font-family: var(--font-mincho);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--nude-charcoal);
  margin: 0 0 8px;
}

.company-name-en {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 300;
  color: var(--nude-stone);
  margin: 0 0 32px;
  letter-spacing: 0.08em;
}

.company-table-wrap {
  overflow-x: auto;
}

.company-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.company-table th,
.company-table td {
  font-family: var(--font-gothic);
  font-size: 0.92rem;
  line-height: 1.8;
  padding: 18px 0;
  border-bottom: 1px solid rgba(181, 199, 204, 0.15);
  text-align: left;
  vertical-align: top;
}

.company-table th {
  width: 140px;
  font-weight: 500;
  color: var(--nude-stone);
  white-space: nowrap;
  padding-right: 24px;
}

.company-table td {
  font-weight: 300;
  color: var(--nude-charcoal);
}

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

.company-table td a {
  color: var(--nude-blue-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.company-table td a:hover {
  color: var(--nude-blue-dark);
  opacity: 1;
}

.company-business-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.company-business-list li {
  padding-left: 16px;
  position: relative;
  margin-bottom: 4px;
}

.company-business-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--nude-blue);
  font-weight: 700;
}

.company-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(181, 199, 204, 0.08);
  border-radius: 100px;
  color: var(--nude-charcoal);
}

.company-brand-badge span {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* Company Message */
.company-message-inner {
  padding: 56px;
  background: linear-gradient(135deg, var(--nude-blue-lightest) 0%, var(--nude-lemon-lightest) 100%);
  border-radius: 24px;
}

.company-message-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nude-blue-deep);
  margin: 0 0 28px;
}

.company-message-lead {
  font-family: var(--font-mincho);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 500;
  line-height: 2;
  color: var(--nude-charcoal);
  margin: 0 0 28px !important;
  letter-spacing: 0.06em;
}

.company-message-content p {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin: 0 0 16px;
}

.company-message-content p:last-child {
  margin-bottom: 0;
}

/* Company Links */
.company-links-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nude-stone);
  margin: 0 0 24px;
}

.company-links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.company-link-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 28px;
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.15);
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.4s var(--ease-elegant);
  position: relative;
}

.company-link-card:hover {
  border-color: var(--nude-blue);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(45, 45, 42, 0.08);
  opacity: 1;
}

.company-link-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nude-stone);
}

.company-link-name {
  font-family: var(--font-mincho);
  font-size: 1rem;
  font-weight: 500;
  color: var(--nude-charcoal);
}

.company-link-arrow {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--nude-blue-deep);
  transition: transform 0.3s ease;
}

.company-link-card:hover .company-link-arrow {
  transform: translateY(-50%) translateX(4px);
}

@media (max-width: 768px) {
  .company-info-card { padding: 28px; }
  .company-table th { width: 100px; font-size: 0.82rem; }
  .company-table td { font-size: 0.82rem; }
  .company-message-inner { padding: 32px 24px; }
  .company-links-grid { grid-template-columns: 1fr; }
  .company-name { font-size: 1.3rem; }
}

@media (max-width: 480px) {
  .company-info-card { padding: 20px 16px; }
  .company-table th {
    width: auto;
    display: block;
    padding: 10px 0 4px;
    border-bottom: none;
    font-size: 0.78rem;
    color: var(--nude-blue-deep);
  }
  .company-table td {
    display: block;
    padding: 0 0 14px;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(181, 199, 204, 0.15);
  }
  .company-table tr { display: block; }
  .company-table { display: block; }
  .company-table tbody { display: block; }
  .company-message-inner { padding: 24px 16px; }
  .company-message-lead { font-size: 1.1rem !important; }
  .company-link-card { padding: 20px; }
  .company-link-name { font-size: 0.92rem; }
}

/* WordPress Admin Bar Adjustment */
body.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

@media (max-width: 999px) {
  .archive-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .archive-layout .widget-area {
    position: static;
    top: auto;
    padding-top: 0;
  }

  .posts-grid {
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .posts-grid .nude-article .entry-header {
    padding: 20px 20px 0;
  }
  
  .posts-grid .nude-article .entry-content {
    padding: 0 20px 20px;
  }

  .posts-grid .nude-article .entry-meta-bottom {
    padding: 0 20px 18px;
  }
  
  .site-main .nude-section-inner {
    padding-top: 100px;
    padding-bottom: 60px;
  }

  .single-breadcrumb + .nude-section-inner,
  .single-breadcrumb + section .nude-section-inner,
  .single-breadcrumb + .archive-layout {
    padding-top: 24px;
  }
  
  .search-form {
    flex-direction: column;
  }
  
  .search-submit {
    width: 100%;
  }
}

/* ============================================
   Single Post - SEO Optimized Layout
   ============================================ */

/* Breadcrumb (top of article) */
.single-breadcrumb {
  padding: 100px 0 0;
}

.single-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.single-breadcrumb-list li {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--nude-stone);
}

.single-breadcrumb-list li:not(:last-child)::after {
  content: '/';
  margin: 0 12px;
  color: rgba(45, 45, 42, 0.25);
}

.single-breadcrumb-list a {
  color: var(--nude-stone);
  text-decoration: none;
  transition: color 0.3s ease;
}

.single-breadcrumb-list a:hover {
  color: var(--nude-blue-deep);
  opacity: 1;
}

.single-breadcrumb-list .is-current {
  color: var(--nude-charcoal);
}

/* パンくず内のセクション内余白をリセット */
.single-breadcrumb .nude-section-inner {
  padding-top: 0;
  padding-bottom: 0;
}

/* Container */
.single-post-container {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 80px;
  position: relative;
}

/* 記事エリアの背景を白へ漸次フェード（視認性向上・固定） */
.single-post-main::before,
.archive-page-main::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background:
    linear-gradient(180deg, transparent 0%, rgba(253, 253, 251, 0.6) 25%, rgba(253, 253, 251, 0.92) 45%, rgba(253, 253, 251, 1) 60%),
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(212, 223, 226, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 90% 70% at 100% 100%, rgba(240, 242, 190, 0.45) 0%, transparent 55%);
  pointer-events: none;
  z-index: -1;
}

.single-post-main .nude-section-inner {
  padding-top: 0;
}

/* パンくずがある場合、直後のセクション内余白を調整 */
.single-breadcrumb + .nude-section-inner,
.single-breadcrumb + section .nude-section-inner,
.single-breadcrumb + .archive-layout {
  padding-top: 40px;
}

/* Article Header */
.single-header {
  margin-bottom: 40px;
}

.single-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.single-category-badge {
  display: inline-block;
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--nude-blue-dark);
  background: var(--nude-blue-lightest);
  padding: 4px 14px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.single-category-badge:hover {
  background: var(--nude-blue-light);
  color: var(--nude-charcoal);
  opacity: 1;
}

.single-title {
  font-family: var(--font-mincho);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--nude-charcoal);
  margin: 0 0 24px;
  letter-spacing: 0.02em;
}

/* Meta Row */
.single-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgba(45, 45, 42, 0.06);
  border-bottom: 1px solid rgba(45, 45, 42, 0.06);
}

.single-meta-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.single-author-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.single-meta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.single-author-name {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--nude-charcoal);
}

/* author-name はリンクなし表示（セキュリティ対策） */

.single-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--nude-stone);
  letter-spacing: 0.05em;
}

.single-date-modified {
  color: var(--nude-blue-deep);
  font-weight: 500;
}

.single-date-separator {
  color: rgba(45, 45, 42, 0.2);
}

.single-reading-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  color: var(--nude-stone);
  white-space: nowrap;
}

.single-reading-time svg {
  opacity: 0.5;
  flex-shrink: 0;
}

/* Featured Image */
.single-thumbnail {
  margin: 0 0 40px;
  border-radius: 20px;
  overflow: hidden;
  line-height: 0;
}

@media (max-width: 768px) {
  .single-thumbnail {
    border-radius: 8px;
  }
}

.single-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

.single-thumbnail-caption {
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  color: var(--nude-stone);
  text-align: center;
  padding: 12px 0 0;
}

/* Article Excerpt / Lead (リード文) */
.single-excerpt {
  position: relative;
  font-family: var(--font-gothic);
  font-size: 1rem;
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: 0.02em;
  color: var(--nude-stone);
  background: linear-gradient(135deg, rgba(232, 238, 240, 0.35) 0%, rgba(243, 244, 205, 0.15) 100%);
  border: 1px solid rgba(181, 199, 204, 0.2);
  padding: 28px 32px 28px 56px;
  margin: 0 0 48px;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(45, 45, 42, 0.04);
}

.single-excerpt::before {
  content: '\201C';
  position: absolute;
  top: 16px;
  left: 20px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--nude-blue);
  opacity: 0.5;
}

.single-excerpt p {
  margin: 0;
}

/* Single Content */
.single-content {
  font-family: var(--font-gothic);
  font-size: 1rem;
  font-weight: 300;
  line-height: 2.2;
  color: var(--nude-charcoal);
}

.single-content h2 {
  font-family: var(--font-gothic);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nude-charcoal);
  margin: 56px 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--nude-blue-light);
}

.single-content h3 {
  font-family: var(--font-gothic);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--nude-charcoal);
  margin: 40px 0 16px;
  padding-left: 16px;
  border-left: 3px solid var(--nude-blue);
}

.single-content h4 {
  font-family: var(--font-mincho);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 32px 0 12px;
}

.single-content p {
  margin-bottom: 28px;
}

/* 参考文献ブロック */
.single-content .references-block {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(45, 45, 42, 0.08);
}

.single-content .references-block p {
  margin-bottom: 6px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--nude-stone);
}

.single-content .references-block .nude-external-icon {
  width: 10px;
  height: 10px;
}

.single-content a {
  color: var(--nude-blue-deep);
  text-decoration: underline;
  text-decoration-color: rgba(122, 154, 163, 0.3);
  text-underline-offset: 4px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.single-content a:hover {
  color: var(--nude-blue-dark);
  text-decoration-color: var(--nude-blue-dark);
  opacity: 1;
}

/* 外部リンクアイコン */
.single-content .nude-external-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

.single-content a.nude-external-link:hover .nude-external-icon {
  opacity: 1;
}

/* 内部リンク（カード風インライン装飾） */
.single-content a.nude-internal-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  padding: 4px 12px 4px 8px;
  border-radius: 20px;
  text-decoration: none;
  margin-right: 3px;
  color: rgba(38, 38, 38, 1);
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(122, 154, 163, 0.12);
  transition: box-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.single-content a.nude-internal-link:hover {
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(122, 154, 163, 0.2);
  transform: translateY(-1px);
}

.single-content .nude-internal-icon {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
}

.single-content a.nude-internal-link:hover .nude-internal-icon {
  opacity: 1;
}

/* リンクカード（ブックマークカード） */
.nude-link-card {
  margin: 32px 0;
}

.nude-link-card-inner {
  display: flex;
  align-items: stretch;
  background: var(--nude-mist, #f9f8f6);
  border: 1px solid rgba(45, 45, 42, 0.08);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.nude-link-card-inner:hover {
  border-color: rgba(181, 199, 204, 0.5);
  box-shadow: 0 4px 20px rgba(45, 45, 42, 0.06);
  text-decoration: none;
}

.nude-link-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 20px 24px;
}

.nude-link-card-title {
  font-family: var(--font-gothic);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--nude-charcoal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nude-link-card-inner:hover .nude-link-card-title {
  color: var(--nude-blue-deep);
}

.nude-link-card-desc {
  font-family: var(--font-gothic);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--nude-stone);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nude-link-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-gothic);
  font-size: 0.72rem;
  color: var(--nude-stone);
  opacity: 0.7;
}

.nude-link-card-icon {
  flex-shrink: 0;
  opacity: 0.6;
}

.nude-link-card-thumb {
  width: 200px;
  min-width: 200px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--nude-blue-light, #e8eff1);
}

.nude-link-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-elegant);
}

.nude-link-card-inner:hover .nude-link-card-thumb img {
  transform: scale(0.95);
}

/* リンクカード — モバイル対応 */
@media (max-width: 600px) {
  .nude-link-card-inner {
    flex-direction: column-reverse;
  }

  .nude-link-card-thumb {
    width: 100%;
    min-width: auto;
    aspect-ratio: 1200 / 630;
  }

  .nude-link-card-content {
    padding: 16px 18px;
  }

  .nude-link-card-title {
    font-size: 0.88rem;
  }

  .nude-link-card-desc {
    -webkit-line-clamp: 1;
  }
}

.single-content img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 8px 0;
}

.single-content blockquote {
  padding: 32px 36px;
  margin: 32px 0;
  background: linear-gradient(135deg, var(--nude-blue-lightest) 0%, var(--nude-lemon-lightest) 100%);
  border-left: 4px solid var(--nude-blue);
  border-radius: 0 20px 20px 0;
  font-family: var(--font-mincho);
  font-size: 1.05rem;
  line-height: 2;
  color: var(--nude-charcoal);
}

.single-content blockquote p:last-child { margin-bottom: 0; }

.single-content ul, .single-content ol {
  padding-left: 28px;
  margin-bottom: 28px;
}

.single-content li {
  margin-bottom: 10px;
}

/* Single Content - Table */
.single-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 36px 0;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(45, 45, 42, 0.06);
  font-size: 0.92rem;
}

.single-content table thead tr,
.single-content table tr:first-child {
  background: linear-gradient(135deg, var(--nude-blue) 0%, var(--nude-blue-deep) 100%);
}

.single-content table thead th,
.single-content table thead td,
.single-content table tr:first-child th,
.single-content table tr:first-child td {
  font-family: var(--font-gothic);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--nude-white) !important;
  background: linear-gradient(135deg, var(--nude-blue) 0%, var(--nude-blue-deep) 100%) !important;
  padding: 16px 20px !important;
  border: none !important;
  letter-spacing: 0.04em;
  text-align: left;
}

.single-content table tbody td,
.single-content table tr:not(:first-child) td,
.single-content table tbody th,
.single-content table tr:not(:first-child) th {
  font-family: var(--font-gothic);
  font-weight: 300;
  color: var(--nude-charcoal) !important;
  padding: 15px 20px !important;
  border: none !important;
  border-bottom: 1px solid rgba(181, 199, 204, 0.2) !important;
  line-height: 1.7;
}

.single-content table tbody tr:nth-child(even),
.single-content table tr:nth-child(odd):not(:first-child) {
  background: var(--nude-white);
}

.single-content table tbody tr:nth-child(odd),
.single-content table tr:nth-child(even):not(:first-child) {
  background: var(--nude-mist);
}

.single-content table tbody tr:last-child td,
.single-content table tr:last-child td {
  border-bottom: none;
}

.single-content table tbody tr:hover,
.single-content table tr:not(:first-child):hover {
  background: var(--nude-blue-lightest);
  transition: background 0.3s ease;
}

.single-content table tbody td:first-child,
.single-content table tr:not(:first-child) td:first-child {
  font-weight: 500;
  color: var(--nude-blue-dark);
}

@media (max-width: 768px) {
  .single-content table {
    font-size: 0.82rem;
    border-radius: 12px;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .single-content table thead th,
  .single-content table thead td,
  .single-content table tr:first-child th,
  .single-content table tr:first-child td {
    padding: 12px 16px;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .single-content table tbody td,
  .single-content table tr:not(:first-child) td {
    padding: 12px 16px;
    white-space: nowrap;
  }
}

/* Table of Contents */
.toc-container {
  background: var(--nude-mist);
  border: 1px solid rgba(45, 45, 42, 0.06);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 40px;
  position: relative;
}

.toc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.toc-label {
  font-family: var(--font-mincho);
  font-size: 1rem;
  font-weight: 500;
  color: var(--nude-charcoal);
}

.toc-list-wrapper {
  position: relative;
  max-height: 180px;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.toc-list-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(transparent, var(--nude-mist));
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.toc-container.toc-expanded .toc-list-wrapper {
  max-height: 2000px;
}

.toc-container.toc-expanded .toc-list-wrapper::after {
  opacity: 0;
}

.toc-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid rgba(45, 45, 42, 0.06);
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  color: var(--nude-stone);
  cursor: pointer;
  padding: 12px 8px 0;
  margin-top: 8px;
  transition: color 0.3s ease;
  position: relative;
  z-index: 2;
}

.toc-toggle:hover {
  color: var(--nude-charcoal);
}

.toc-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(45, 45, 42, 0.15);
  font-size: 0.85rem;
  line-height: 1;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.toc-container.toc-expanded .toc-toggle-icon {
  transform: rotate(45deg);
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-main toc-sub;
}

.toc-list li:not(.toc-sub) {
  counter-increment: toc-main;
  counter-reset: toc-sub;
  margin-bottom: 4px;
}

.toc-list li:not(.toc-sub)::before {
  content: counter(toc-main) ".";
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  color: var(--nude-blue-deep);
  margin-right: 8px;
}

.toc-list li.toc-sub {
  counter-increment: toc-sub;
  margin-bottom: 3px;
  padding-left: 24px;
}

.toc-list li.toc-sub::before {
  content: counter(toc-main) "." counter(toc-sub);
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  color: var(--nude-stone);
  margin-right: 8px;
}

.toc-list li a {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  color: var(--nude-stone);
  text-decoration: none;
  transition: color 0.3s ease;
}

.toc-list li a:hover {
  color: var(--nude-blue-deep);
  opacity: 1;
}

/* Content Freshness Signal (最終確認日) */
.single-freshness {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  color: var(--nude-stone);
  padding: 12px 0 16px;
  margin: 32px 0 0;
  border-top: 1px solid rgba(45, 45, 42, 0.06);
}

.single-freshness svg {
  color: var(--nude-blue);
  flex-shrink: 0;
}

.single-freshness time {
  font-weight: 500;
  color: var(--nude-charcoal);
}

/* Tags */
.single-tags {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(45, 45, 42, 0.06);
}

.single-tags-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nude-stone);
  padding-top: 6px;
  flex-shrink: 0;
}

.single-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.single-tag {
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  color: var(--nude-blue-dark);
  background: var(--nude-blue-lightest);
  padding: 6px 14px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.single-tag:hover {
  background: var(--nude-blue-light);
  color: var(--nude-charcoal);
  opacity: 1;
}

/* SNS Share */
.single-share {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 24px 0;
  border-top: 1px solid rgba(45, 45, 42, 0.06);
  border-bottom: 1px solid rgba(45, 45, 42, 0.06);
}

.single-share-label {
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  color: var(--nude-stone);
  flex-shrink: 0;
}

.single-share-buttons {
  display: flex;
  gap: 10px;
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.share-x { background: #000; }
.share-facebook { background: #1877F2; }
.share-line { background: #06C755; }
.share-threads { background: #000; }

.share-copy {
  background: var(--nude-stone, #7a9aa3);
  border: none;
  cursor: pointer;
  position: relative;
}
.share-copy.is-copied {
  background: #06C755;
}
.share-copy-check {
  position: absolute;
}

.share-btn:hover {
  transform: translateY(-2px);
  opacity: 0.8;
}

/* Author Box */
.single-author-box {
  display: flex;
  gap: 24px;
  padding: 32px;
  margin-top: 48px;
  background: var(--nude-mist);
  border-radius: 20px;
}

.author-box-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.author-box-info {
  flex: 1;
}

.author-box-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nude-stone);
}

.author-box-name {
  font-family: var(--font-mincho);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 4px 0 8px;
}

/* author-box-name はリンクなし表示（セキュリティ対策） */

.author-box-bio {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--nude-stone);
  margin: 0 0 12px;
}

.author-box-link {
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  color: var(--nude-blue-deep);
  text-decoration: none;
  transition: color 0.3s ease;
}

.author-box-link:hover {
  color: var(--nude-charcoal);
  opacity: 1;
}

/* Post Navigation */
.single-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid rgba(45, 45, 42, 0.06);
}

.post-nav-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--nude-white);
  border-radius: 16px;
  border: 1px solid rgba(45, 45, 42, 0.04);
  text-decoration: none;
  transition: all 0.4s var(--ease-elegant);
}

.post-nav-item:hover {
  border-color: var(--nude-blue-light);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(45, 45, 42, 0.06);
  opacity: 1;
}

.post-nav-empty { visibility: hidden; }

.post-nav-next { text-align: right; }

.post-nav-direction {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nude-stone);
}

.post-nav-title {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Related Posts */
.single-related {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid rgba(45, 45, 42, 0.06);
}

.related-heading {
  font-family: var(--font-gothic);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--nude-charcoal);
  margin: 0 0 32px;
}

.related-heading .nude-section-label {
  display: block;
  margin-bottom: 8px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.related-card {
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  background: var(--nude-white);
  border: 1px solid rgba(45, 45, 42, 0.04);
  transition: all 0.4s var(--ease-elegant);
}

.related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(45, 45, 42, 0.08);
  opacity: 1;
}

.related-card-image {
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  background: var(--nude-blue, #B5C7CC);
}

.related-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.related-card:hover .related-card-image img {
  transform: scale(0.95);
}

.related-card-noimage {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--nude-blue-lightest), var(--nude-lemon-lightest));
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--nude-stone);
}

.related-card-body {
  padding: 0 20px 20px;
}

.related-card-date {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--nude-stone);
}

.related-card-title {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--nude-charcoal);
  margin: 8px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================
   Discover: Category List + Popular Posts
   ============================================ */
.single-discover {
  margin-top: 56px;
}

.single-discover-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
}

/* Discover Heading */
.discover-heading {
  font-family: var(--font-gothic);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--nude-charcoal);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.discover-heading .nude-section-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nude-stone);
}

/* Category List */
.discover-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.discover-cat-list li {
  border-bottom: 1px solid rgba(45, 45, 42, 0.06);
}

.discover-cat-list li:first-child {
  border-top: 1px solid rgba(45, 45, 42, 0.06);
}

.discover-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  text-decoration: none;
  color: var(--nude-charcoal);
  transition: all 0.3s ease;
}

.discover-cat-link:hover {
  color: var(--nude-blue-deep);
  padding-left: 8px;
}

.discover-cat-name {
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 500;
}

.discover-cat-count {
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  color: var(--nude-stone);
  background: rgba(45, 45, 42, 0.04);
  padding: 2px 10px;
  border-radius: 20px;
  min-width: 28px;
  text-align: center;
}

/* Popular Posts */
.discover-pop-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
}

.discover-pop-item {
  border-bottom: 1px solid rgba(45, 45, 42, 0.06);
}

.discover-pop-item:first-child {
  border-top: 1px solid rgba(45, 45, 42, 0.06);
}

.discover-pop-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.discover-pop-link:hover {
  padding-left: 8px;
}

.discover-pop-rank {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-family: var(--font-gothic);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--nude-stone);
  background: rgba(45, 45, 42, 0.05);
  border-radius: 50%;
  line-height: 1;
}

.discover-pop-item:nth-child(1) .discover-pop-rank {
  color: #fff;
  background: #c5a844;
}

.discover-pop-item:nth-child(2) .discover-pop-rank {
  color: #fff;
  background: #a8a8a8;
}

.discover-pop-item:nth-child(3) .discover-pop-rank {
  color: #fff;
  background: #b08d57;
}

.discover-pop-body {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.discover-pop-thumb {
  width: 64px;
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--nude-blue, #B5C7CC);
}

.discover-pop-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-elegant);
}

.discover-pop-link:hover .discover-pop-thumb img {
  transform: scale(0.95);
}

.discover-pop-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.discover-pop-title {
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.discover-pop-link:hover .discover-pop-title {
  color: var(--nude-blue-deep);
}

.discover-pop-date {
  font-family: var(--font-gothic);
  font-size: 0.72rem;
  color: var(--nude-stone);
  opacity: 0.7;
}

/* Discover モバイル対応 */
@media (max-width: 768px) {
  .single-discover-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 480px) {
  .discover-pop-thumb {
    width: 56px;
    height: 37px;
  }

  .discover-pop-rank {
    width: 22px;
    height: 22px;
    font-size: 0.65rem;
  }

  .discover-pop-title {
    font-size: 0.82rem;
  }

  .discover-cat-name {
    font-size: 0.84rem;
  }
}

/* CTA Section */
.single-cta {
  margin-top: 48px;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 50px 40px 50px 160px;
  background: linear-gradient(135deg, var(--nude-blue-lightest) 0%, var(--nude-lemon-lightest) 100%);
  border-radius: 20px;
  border: 1px solid rgba(181, 199, 204, 0.2);
  overflow: hidden;
  position: relative;
  min-height: 100px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.cta-image {
  position: absolute;
  left: 16px;
  bottom: -20%;
  width: 120px;
  pointer-events: none;
}

.cta-image img {
  width: 100%;
  height: auto;
  display: block;
}

.cta-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--nude-charcoal);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}

.cta-copy {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  color: var(--nude-stone);
  margin: 0;
}

.cta-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  background: var(--nude-charcoal);
  color: var(--nude-white);
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.4s ease;
}

.cta-button:hover {
  background: var(--nude-blue-dark);
  transform: translateY(-2px);
  opacity: 1;
}

/* Single Post Responsive */
@media (max-width: 768px) {
  .single-breadcrumb { padding: 80px 0 0; }
  .single-post-container { padding-top: 24px; }
  .single-meta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .single-post-nav { grid-template-columns: 1fr; }
  .post-nav-next { text-align: left; }
  .post-nav-empty { display: none; }
  .related-grid { grid-template-columns: 1fr; }
  .single-author-box { flex-direction: column; align-items: center; text-align: center; }
  .author-box-avatar img { width: 64px; height: 64px; }
  .cta-inner { flex-direction: column; text-align: center; padding: 32px 24px 0; gap: 16px; }
  .cta-text { order: 1; }
  .cta-button { order: 2; }
  .cta-image { position: static; width: 100px; order: 3; margin: 0 auto -25px; pointer-events: auto; }
  .single-share { flex-direction: column; align-items: flex-start; }
  .toc-container { padding: 20px 24px; }
}

@media (max-width: 480px) {
  .single-breadcrumb { padding: 68px 0 0; }
  .single-breadcrumb-list li { font-size: 0.72rem; }
  .single-breadcrumb-list li:not(:last-child)::after { margin: 0 8px; }
  .single-excerpt { padding: 22px 24px 22px 46px; font-size: 0.9rem; margin-bottom: 36px; }
  .single-excerpt::before { font-size: 2.4rem; top: 12px; left: 14px; }
  .single-content { font-size: 0.92rem; }
  .single-content h2 { font-size: 1.2rem; }
  .single-content h3 { font-size: 1.05rem; }
  .cta-inner { padding: 24px 16px 0; }
  .cta-image { width: 85px; }
  .cta-label { font-size: 1rem; }
  .cta-copy { font-size: 0.82rem; }
  .cta-button { padding: 12px 20px; font-size: 0.82rem; }
  .related-card-body { padding: 0 16px 16px; }
  .toc-container { padding: 16px 20px; }
}

/* ============================================
   Ingredients Page Styles
   ============================================ */
.ingredients-page-header {
  text-align: center;
  margin-bottom: 80px;
}

.ingredients-page-lead {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin-top: 24px;
}

.ingredients-page-section {
  margin-bottom: 80px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.ingredients-section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  margin: 0 0 8px;
}

.ingredients-section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 0.5rem;
  line-height: 1;
  color: var(--nude-blue-deep);
  background: rgba(181, 199, 204, 0.18);
  border-radius: 50%;
  will-change: border-radius, transform;
}

.ingredients-section-subtitle {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--nude-stone);
  margin: 0 0 40px;
  letter-spacing: 0.05em;
  text-align: center;
}

/* Featured Ingredients */
.ingredients-featured-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ingredient-featured-card {
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.15);
  border-radius: 24px;
  padding: 40px;
  transition: var(--transition-smooth);
}

.ingredient-featured-card:hover {
  border-color: rgba(181, 199, 204, 0.3);
  box-shadow: 0 8px 40px rgba(45, 45, 42, 0.06);
}

.ingredient-featured-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

.ingredient-badge {
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--nude-blue-dark);
  background: rgba(181, 199, 204, 0.15);
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: 0.05em;
}

.ingredient-badge-original {
  color: var(--nude-lemon-deep);
  background: rgba(217, 220, 160, 0.2);
}

.ingredient-number {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  color: rgba(181, 199, 204, 0.3);
}

.ingredient-featured-name-en {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  margin: 0 0 4px;
}

.ingredient-featured-name-ja {
  font-family: var(--font-gothic);
  font-size: 1rem;
  font-weight: 500;
  color: var(--nude-blue-deep);
  margin: 0 0 12px;
}

.ingredient-featured-inci {
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--nude-stone);
  margin: 0 0 20px;
  padding: 8px 16px;
  background: rgba(181, 199, 204, 0.06);
  border-radius: 8px;
  display: inline-block;
}

.ingredient-featured-inci span {
  font-weight: 500;
  color: var(--nude-blue-dark);
}

.ingredient-featured-desc {
  font-family: var(--font-gothic);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin: 0 0 24px;
  text-align: justify;
}

.ingredient-featured-effects {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ingredient-featured-effects li {
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  padding-left: 20px;
  position: relative;
  line-height: 1.8;
}

.ingredient-featured-effects li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nude-blue);
}

/* Free From Grid */
.ingredients-free-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.free-from-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.12);
  border-radius: 12px;
}

.free-from-icon {
  color: var(--nude-blue-deep);
  flex-shrink: 0;
  display: flex;
}

.free-from-text {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--nude-charcoal);
}

/* Ingredients Table */
.ingredients-table-wrap {
  max-width: 900px;
  margin: 0 auto;
  overflow-x: auto;
}

.ingredients-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(45, 45, 42, 0.06);
}

.ingredients-table thead th {
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--nude-blue-dark);
  background: rgba(181, 199, 204, 0.12);
  padding: 14px 20px;
  text-align: left;
  border-bottom: 2px solid rgba(181, 199, 204, 0.2);
}

.ingredients-table tbody tr {
  transition: background 0.3s ease;
}

.ingredients-table tbody tr:hover {
  background: rgba(181, 199, 204, 0.05);
}

.ingredients-table tbody tr.ingredient-highlight {
  background: rgba(181, 199, 204, 0.06);
}

.ingredients-table tbody tr.ingredient-highlight:hover {
  background: rgba(181, 199, 204, 0.12);
}

.ingredients-table tbody tr.ingredient-highlight td.col-name {
  font-weight: 500;
  color: var(--nude-blue-dark);
}

.ingredients-table td {
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.6;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(181, 199, 204, 0.1);
  color: var(--nude-charcoal);
  vertical-align: middle;
}

.ingredients-table .col-no {
  width: 50px;
  text-align: center;
  color: var(--nude-stone);
  font-size: 0.82rem;
}

.ingredients-table .col-role {
  width: 140px;
  font-size: 0.82rem;
  color: var(--nude-stone);
}

.ingredients-table .col-note {
  width: 180px;
  font-size: 0.82rem;
  color: var(--nude-blue-deep);
}

.ingredients-table tbody tr:last-child td {
  border-bottom: none;
}

.ingredients-table-note {
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--nude-stone);
  margin-top: 16px;
  text-align: right;
}

/* Ingredients CTA */
.ingredients-page-cta {
  margin-top: 80px;
  text-align: center;
  padding: 56px 40px;
  background: linear-gradient(135deg, var(--nude-blue-lightest) 0%, var(--nude-lemon-lightest) 100%);
  border-radius: 24px;
}

.ingredients-cta-copy {
  font-family: var(--font-mincho);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 32px;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

.ingredients-cta-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ingredients-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.3);
  border-radius: 100px;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.ingredients-cta-btn:hover {
  background: var(--nude-charcoal);
  color: var(--nude-white);
  border-color: var(--nude-charcoal);
  transform: translateY(-2px);
}

.ingredients-cta-btn-primary {
  background: var(--nude-charcoal);
  color: var(--nude-white);
  border-color: var(--nude-charcoal);
}

.ingredients-cta-btn-primary:hover {
  background: transparent;
  color: var(--nude-charcoal);
  border-color: var(--nude-charcoal);
}

/* Ingredients Page Responsive */
@media (max-width: 768px) {
  .ingredient-featured-card { padding: 28px 20px; }
  .ingredients-free-grid { grid-template-columns: 1fr; }
  .ingredients-table .col-note { display: none; }
  .ingredients-table .col-role { width: auto; }
  .ingredients-cta-links { flex-direction: column; align-items: center; }
  .ingredients-section-title { font-size: 1.5rem; }
  .ingredient-featured-name-en { font-size: 1.2rem; }
}

@media (max-width: 480px) {
  .ingredient-featured-card { padding: 20px 16px; }
  .ingredient-featured-name-en { font-size: 1.1rem; }
  .ingredient-featured-name-ja { font-size: 0.9rem; }
  .ingredient-featured-desc { font-size: 0.85rem; }
  .ingredient-featured-inci { font-size: 0.75rem; padding: 6px 12px; }
  .ingredients-table td { font-size: 0.82rem; padding: 10px 12px; }
  .ingredients-table thead th { font-size: 0.78rem; padding: 10px 12px; }
  .ingredients-table .col-no { width: 36px; }
  .ingredients-page-cta { padding: 36px 20px; }
  .ingredients-cta-copy { font-size: 1.05rem; }
  .ingredients-cta-btn { padding: 12px 24px; font-size: 0.85rem; }
}


/* ============================================
   FutureBase Serum Page Styles
   ============================================ */
.serum-page-header {
  text-align: center;
  margin-bottom: 80px;
}

.serum-page-tagline {
  font-family: var(--font-mincho);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--nude-stone);
  margin-top: 20px;
  letter-spacing: 0.15em;
}

.serum-page-section {
  margin-bottom: 120px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.serum-section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 2.33rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  margin: 0 0 8px;
  text-align: center;
}

.serum-section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 0.5rem;
  line-height: 1;
  color: var(--nude-blue-deep);
  background: rgba(181, 199, 204, 0.18);
  border-radius: 50%;
  will-change: border-radius, transform;
  transform: translateZ(0);
}

.serum-section-subtitle {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--nude-stone);
  margin: 0 0 40px;
  letter-spacing: 0.05em;
  text-align: center;
}

/* Serum Overview */
.serum-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}

.serum-product-visual {
  text-align: center;
}

.serum-product-visual .product-image-frame {
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--nude-blue-lightest) 0%, var(--nude-lemon-lightest) 100%);
  box-shadow: 0 8px 40px rgba(45, 45, 42, 0.08);
}

.serum-product-visual .product-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.serum-product-visual .product-variant-hint {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 300;
  font-style: italic;
  color: var(--nude-stone);
  margin-top: 16px;
  letter-spacing: 0.05em;
}

.serum-product-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  margin: 0 0 16px;
  letter-spacing: 0.05em;
}

.serum-product-copy {
  font-family: var(--font-gothic);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin: 0 0 32px;
}

.serum-specs {
  margin-bottom: 32px;
}

.serum-spec-row {
  display: flex;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(181, 199, 204, 0.12);
}

.serum-spec-label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--nude-stone);
  width: 80px;
  flex-shrink: 0;
}

.serum-spec-value {
  font-family: var(--font-gothic);
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  line-height: 1.6;
}

.serum-price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--nude-charcoal);
}

.serum-price small {
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--nude-stone);
}

.serum-buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  font-family: var(--font-gothic);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--nude-white);
  background: var(--nude-charcoal);
  border: 1px solid var(--nude-charcoal);
  border-radius: 100px;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.serum-buy-btn:hover {
  background: transparent;
  color: var(--nude-charcoal);
  transform: translateY(-2px);
}

.serum-overview-btns {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.serum-buy-btn-primary {
  background: var(--nude-charcoal);
  color: var(--nude-white);
  border-color: var(--nude-charcoal);
}
.serum-buy-btn-primary:hover {
  background: transparent;
  color: var(--nude-charcoal);
}

.serum-buy-btn-amazon {
  background: transparent;
  color: var(--nude-charcoal);
  border-color: rgba(35, 47, 62, 0.25);
}
.serum-buy-btn-amazon:hover {
  background: var(--nude-charcoal);
  color: var(--nude-white);
}

/* Concept Section */
.serum-concept-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.serum-concept-block {
  padding: 0;
  background: var(--nude-white);
  border: none;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.serum-concept-block-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: #f8f7f5;
  border-radius: 12px 12px 0 0;
}

.serum-concept-block-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.serum-concept-block-image.image-placeholder {
  background: linear-gradient(180deg, transparent 60%, rgba(45, 45, 42, 0.02) 100%);
  background-color: rgba(181, 199, 204, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.serum-concept-block-image.image-placeholder .placeholder-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nude-stone);
  opacity: 0.35;
}

.serum-concept-block-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.serum-concept-block h3 {
  font-family: var(--font-mincho);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 12px;
}

.serum-concept-block p {
  font-family: var(--font-gothic);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--nude-stone);
  margin: 0;
  text-align: justify;
}

/* Serum Ingredients */
.serum-ingredients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.serum-ingredient-card {
  background: #fff;
  border: 1px solid rgba(181, 199, 204, 0.15);
  border-radius: 20px;
  padding: 28px 24px;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.serum-ingredient-summary {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--nude-stone);
  margin-top: auto;
  padding-top: 12px;
}

.serum-ingredient-card:hover {
  border-color: rgba(181, 199, 204, 0.3);
  box-shadow: 0 8px 40px rgba(45, 45, 42, 0.06);
}

.serum-ingredient-main {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(181, 199, 204, 0.2);
}

.serum-ingredient-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.serum-ingredient-badge {
  font-family: var(--font-gothic);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--nude-blue-dark);
  background: rgba(181, 199, 204, 0.15);
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: 0.05em;
}

.serum-badge-original {
  color: var(--nude-lemon-deep);
  background: rgba(217, 220, 160, 0.2);
}

.serum-ingredient-num {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  color: rgba(181, 199, 204, 0.25);
}

.serum-ingredient-illust {
  display: flex;
  justify-content: center;
  margin: 8px 0 16px;
}

.serum-ingredient-illust img {
  width: auto;
  height: 100px;
  object-fit: contain;
}

.serum-ingredient-name {
  font-family: var(--font-mincho);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 4px;
}

.serum-ingredient-name-en {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--nude-stone);
  margin: 0 0 8px;
  letter-spacing: 0.05em;
}

.serum-ingredient-inci {
  font-family: var(--font-gothic);
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--nude-stone);
  margin: 0 0 16px;
  padding: 6px 12px;
  background: rgba(181, 199, 204, 0.06);
  border-radius: 6px;
  display: inline-block;
}

.serum-ingredient-desc {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin: 0 0 20px;
  text-align: justify;
}

.serum-ingredient-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(181, 199, 204, 0.08);
  border-radius: 12px;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--nude-blue-deep);
  line-height: 1;
}

.stat-number small {
  font-size: 1rem;
}

.stat-desc {
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--nude-stone);
  line-height: 1.5;
}

.serum-ingredient-stats-row {
  display: flex;
  gap: 16px;
}

.serum-ingredient-stats-row .serum-ingredient-stat {
  flex: 1;
}

/* Triple HA */
.serum-ingredient-triple {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.triple-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  padding: 14px 16px;
  background: rgba(181, 199, 204, 0.05);
  border-radius: 12px;
  border-left: 3px solid var(--nude-blue);
}

.triple-type {
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--nude-blue-dark);
  background: rgba(181, 199, 204, 0.15);
  padding: 4px 8px;
  border-radius: 6px;
  text-align: center;
}

.triple-name {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--nude-charcoal);
}

.triple-desc {
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--nude-stone);
}

.serum-ingredients-link {
  text-align: center;
  margin-top: 32px;
}

.serum-ingredients-link a {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--nude-stone);
  text-decoration: underline;
  text-underline-offset: 4px;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.3s ease;
}

.serum-ingredients-link a:hover {
  color: var(--nude-charcoal);
}

/* Free From */
.serum-freefrom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.serum-freefrom-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.12);
  border-radius: 12px;
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--nude-charcoal);
}

.serum-freefrom-icon {
  color: var(--nude-blue-deep);
  flex-shrink: 0;
  display: flex;
}

/* How to Use Steps */
.serum-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.serum-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 28px;
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.12);
  border-radius: 16px;
  transition: var(--transition-smooth);
}

.serum-step:hover {
  border-color: rgba(181, 199, 204, 0.25);
}

.serum-step-highlight {
  background: #ffffff;
  border-color: rgba(181, 199, 204, 0.35);
}

.serum-step-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--nude-blue);
  flex-shrink: 0;
  width: 40px;
  line-height: 1.2;
}

.serum-step-content h3 {
  font-family: var(--font-gothic);
  font-size: 1rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 6px;
}

.serum-step-content p {
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--nude-stone);
  margin: 0;
}

.serum-howtouse-link {
  text-align: center;
  margin-top: 24px;
}

.serum-howtouse-link a {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--nude-stone);
  text-decoration: underline;
  text-underline-offset: 4px;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.3s ease;
}

.serum-howtouse-link a:hover {
  color: var(--nude-charcoal);
}

/* Ingredient Compatibility */
.serum-compat-group {
  margin-bottom: 40px;
  text-align: center;
}

.serum-compat-group:last-of-type {
  margin-bottom: 0;
}

.serum-compat-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
  margin-bottom: 16px;
  padding: 8px 18px;
  background: var(--nude-blue-deep, #7a9aa3);
  border-radius: 100px;
}

.serum-compat-label svg {
  flex-shrink: 0;
}

.serum-compat-label--caution {
  color: #fff;
  background: var(--nude-stone, #8a8a7a);
}

.serum-compat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.serum-compat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.12);
  border-radius: 12px;
  transition: var(--transition-smooth);
}

.serum-compat-card:hover {
  border-color: rgba(181, 199, 204, 0.25);
}

.serum-compat-group--caution .serum-compat-card {
  border-style: dashed;
}

.serum-compat-name {
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  line-height: 1.4;
}

.serum-compat-desc {
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--nude-stone);
  line-height: 1.7;
}

.serum-compat-note {
  text-align: center;
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--nude-stone);
  margin-top: 32px;
  line-height: 1.6;
}

/* Texture */
.serum-texture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
  align-items: center;
}

.serum-texture-visual {
  border-radius: 16px;
  overflow: hidden;
}

.serum-texture-video {
  width: 60%;
  display: block;
  border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  will-change: border-radius, transform;
  transform: translateZ(0);
}

.serum-texture-headline {
  font-family: var(--font-mincho);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--nude-charcoal);
  margin: 0 0 20px;
}

.serum-texture-desc {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin: 0 0 12px;
}

.serum-texture-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.serum-texture-point {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(181, 199, 204, 0.06);
  border-radius: 10px;
}

.serum-texture-point-label {
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--nude-blue-deep);
  min-width: 48px;
  letter-spacing: 0.04em;
}

.serum-texture-point-value {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--nude-charcoal);
}

/* Your Routine */
.serum-routine-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  padding: 40px 0;
}

.serum-routine-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 24px 24px;
  background: transparent;
  border: 1px solid rgba(181, 199, 204, 0.1);
  border-radius: 20px;
  min-width: 140px;
  flex: 1;
  max-width: 200px;
  text-align: center;
  transition: var(--transition-smooth);
  position: relative;
  opacity: 0.55;
}

.serum-routine-step:hover {
  opacity: 0.75;
}

.serum-routine-step--active {
  background: var(--nude-white);
  border-color: rgba(181, 199, 204, 0.2);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
  padding-bottom: 36px;
  opacity: 1;
}

.serum-routine-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nude-stone);
}

.serum-routine-icon svg {
  width: 100%;
  height: 100%;
}

.serum-routine-step--active .serum-routine-icon {
  color: var(--nude-blue-deep);
}

.serum-routine-num {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--nude-stone);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.serum-routine-step--active .serum-routine-num {
  color: var(--nude-blue-deep);
}

.serum-routine-name {
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--nude-charcoal);
  line-height: 1.4;
}

.serum-routine-step--active .serum-routine-name {
  font-weight: 500;
  color: var(--nude-charcoal);
}

.serum-routine-badge {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-gothic);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--nude-blue-deep);
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: rgba(181, 199, 204, 0.12);
  padding: 2px 10px;
  border-radius: 100px;
}

.serum-routine-arrow {
  color: var(--nude-stone);
  opacity: 0.3;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.serum-routine-note {
  text-align: center;
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--nude-stone);
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto;
}

/* Developer's Note */
.serum-devnote-content {
  max-width: 720px;
  margin: 0 auto;
}

.serum-devnote-quote {
  margin: 0 0 32px;
  padding: 0;
  border: none;
}

.serum-devnote-quote p {
  font-family: var(--font-mincho);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.9;
  color: var(--nude-charcoal);
  text-align: left;
  position: relative;
  padding: 0;
  background: none;
  border-radius: 0;
  border-left: none;
}

.serum-devnote-body p {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 2.1;
  color: var(--nude-stone);
  margin: 0 0 16px;
  text-align: justify;
}

.serum-devnote-body p:last-child {
  margin-bottom: 0;
}

/* FAQ */
.serum-faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.serum-faq-item {
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.12);
  border-radius: 12px;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.serum-faq-item[open] {
  border-color: rgba(181, 199, 204, 0.25);
}

.serum-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--nude-charcoal);
  line-height: 1.6;
  list-style: none;
}

.serum-faq-question::-webkit-details-marker {
  display: none;
}

.serum-faq-question::marker {
  display: none;
  content: '';
}

.serum-faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.serum-faq-icon::before,
.serum-faq-icon::after {
  content: '';
  position: absolute;
  background: var(--nude-stone);
  border-radius: 1px;
  transition: transform 0.3s ease;
}

.serum-faq-icon::before {
  top: 50%;
  left: 3px;
  right: 3px;
  height: 1.5px;
  transform: translateY(-50%);
}

.serum-faq-icon::after {
  left: 50%;
  top: 3px;
  bottom: 3px;
  width: 1.5px;
  transform: translateX(-50%);
}

.serum-faq-item[open] .serum-faq-icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.serum-faq-answer {
  padding: 0 22px 20px;
}

.serum-faq-answer p {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--nude-stone);
  margin: 0;
}

/* Full Ingredients List */
.serum-ingredients-list {
  max-width: 720px;
  margin: 0 auto;
}

.serum-ingredients-inci {
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin: 0 0 16px;
}

.serum-ingredients-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--nude-blue-deep);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.serum-ingredients-detail-link:hover {
  opacity: 0.7;
}

/* For You */
.serum-foryou-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.serum-foryou-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.1);
  border-radius: 12px;
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  line-height: 1.6;
}

.foryou-check {
  color: var(--nude-blue-deep);
  flex-shrink: 0;
  display: flex;
}

/* ── Serum CTA (Redesign) ── */
.serum-page-cta {
  margin-top: 96px;
  padding: 64px 48px;
  background:
    radial-gradient(ellipse 120% 80% at 20% 10%, rgba(140, 165, 173, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 80% 90%, rgba(212, 214, 168, 0.1) 0%, transparent 50%),
    linear-gradient(160deg, var(--nude-blue-lightest) 0%, #f5f6f0 50%, var(--nude-lemon-lightest) 100%);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
}

.serum-page-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 1px solid rgba(181, 199, 204, 0.25);
  pointer-events: none;
}

/* ── CTA Header ── */
.serum-cta-header {
  text-align: center;
  margin-bottom: 48px;
}

.serum-cta-eyecatch {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nude-blue-deep);
  margin: 0 0 12px;
}

.serum-cta-heading {
  font-family: var(--font-mincho);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--nude-charcoal);
  margin: 0 0 14px;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.serum-cta-lead {
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--nude-stone);
  line-height: 1.9;
  margin: 0;
  letter-spacing: 0.03em;
}

/* ── Layout ── */
.serum-cta-layout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 40px;
  align-items: start;
}

/* ── Media Column (slider) ── */
.serum-cta-media {
  display: block;
  max-width: 380px;
}

/* ── Spec Column ── */
.serum-cta-spec-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  height: 100%;
}

/* ── Product Intro ── */
.serum-cta-intro {
  text-align: left;
}

.serum-cta-intro-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--nude-charcoal);
  margin: 0 0 12px;
}

.serum-cta-intro-text {
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--nude-stone);
  margin: 0 0 8px;
}

.serum-cta-intro-text:last-child {
  margin-bottom: 0;
}

/* ── Image Slider ── */
.serum-slider {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.serum-slider-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.serum-slider-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.serum-slider-slide .serum-cta-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.serum-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}

.serum-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.serum-slider-dot.is-active {
  background: var(--nude-white, #fff);
  transform: scale(1.25);
}

.serum-slider-dot:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.8);
}

/* legacy single image (backward compat) */
.serum-cta-image-wrap {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(181, 199, 204, 0.25);
  border-radius: 20px;
  padding: 16px;
  transition: var(--transition-smooth);
}

.serum-cta-image-wrap:hover {
  box-shadow: 0 8px 32px rgba(42, 45, 46, 0.06);
}

.serum-cta-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  object-fit: cover;
}

/* ── Spec Card ── */
.serum-cta-spec-card {
  text-align: left;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(181, 199, 204, 0.2);
  border-radius: 14px;
  padding: 16px 18px;
}

.serum-cta-spec-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nude-charcoal);
}

.serum-cta-spec-grid {
  display: grid;
  gap: 10px;
}

.serum-cta-spec-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.serum-cta-spec-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--nude-blue-deep);
  margin-top: 1px;
}

.serum-cta-spec-label {
  display: block;
  font-family: var(--font-gothic);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--nude-blue-deep);
  margin-bottom: 2px;
}

.serum-cta-spec-value {
  display: block;
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--nude-stone);
}

/* ── Content Column ── */
.serum-cta-content {
  text-align: center;
}

/* ── Plans Section (full-width below layout) ── */
.serum-cta-plans {
  margin-top: 80px;
  text-align: center;
}

/* ── Plan Cards ── */
.serum-plan-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 24px;
}

.serum-plan-cards--3col {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.serum-plan-card {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 2px solid transparent;
  border-radius: 18px;
  padding: 24px 20px;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.serum-plan-card:hover {
  border-color: rgba(122, 154, 163, 0.25);
  box-shadow: 0 4px 20px rgba(42, 45, 46, 0.04);
}

.serum-plan-card.is-active {
  background: var(--nude-white);
  border-color: var(--nude-charcoal);
  box-shadow: 0 8px 32px rgba(42, 45, 46, 0.08);
}

/* おすすめバッジ */
.serum-plan-card-recommend {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 14px;
  font-family: var(--font-gothic);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--nude-white);
  background: var(--nude-blue-deep);
  border-radius: 100px;
  white-space: nowrap;
}

.serum-plan-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.serum-plan-card-name {
  font-family: var(--font-gothic);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--nude-charcoal);
}

.serum-plan-card-desc {
  font-family: var(--font-gothic);
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--nude-stone);
}

.serum-plan-card-badge {
  display: inline-block;
  padding: 2px 10px;
  font-family: var(--font-gothic);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #b44d2d;
  background: rgba(180, 77, 45, 0.1);
  border-radius: 100px;
  line-height: 1.4;
}

/* 価格表示 */
.serum-plan-card-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 8px;
}

.serum-plan-card-yen {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--nude-charcoal);
}

.serum-plan-card-amount {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--nude-charcoal);
  line-height: 1;
  letter-spacing: -0.02em;
}

.serum-plan-card-unit {
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--nude-stone);
  margin-left: 2px;
}

.serum-plan-card-tax {
  font-family: var(--font-gothic);
  font-size: 0.7rem;
  font-weight: 300;
  color: var(--nude-stone);
  margin-left: 4px;
}

.serum-plan-card-shipping {
  display: block;
  font-family: var(--font-gothic);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--nude-stone);
  margin-top: 4px;
}

.serum-plan-card-original {
  font-family: var(--font-gothic);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--nude-accent, #c9a87c);
  margin: 0 0 12px;
}

/* プランカード内の特徴リスト */
.serum-plan-card-features {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.serum-plan-card-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-gothic);
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--nude-stone);
  line-height: 1.5;
}

.serum-plan-card-features svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--nude-blue-deep);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 定期購入時のみ表示する注意事項 */
.serum-subscription-notice {
  margin: 0 auto 20px;
  max-width: 980px;
  padding: 18px 20px;
  text-align: left;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(181, 199, 204, 0.35);
  border-radius: 12px;
}

.serum-subscription-notice-title {
  margin: 0 0 10px;
  font-family: var(--font-gothic);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--nude-charcoal);
}

.serum-subscription-notice-list {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 6px;
}

.serum-subscription-notice-list li {
  font-family: var(--font-gothic);
  font-size: 0.79rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--nude-stone);
}

.serum-subscription-notice-list a,
.serum-subscription-notice-note a {
  color: var(--nude-blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.serum-subscription-notice-list a:hover,
.serum-subscription-notice-note a:hover {
  color: var(--nude-blue-dark);
  opacity: 1;
}

.serum-subscription-notice-note {
  margin: 10px 0 0;
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--nude-stone);
}

/* ── CTA Button ── */
.serum-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  padding: 18px 40px;
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--nude-charcoal);
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.3);
  border-radius: 100px;
  text-decoration: none;
  transition: var(--transition-smooth);
  cursor: pointer;
}

.serum-cta-btn:hover {
  background: var(--nude-charcoal);
  color: var(--nude-white);
  border-color: var(--nude-charcoal);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(42, 45, 46, 0.12);
}

.serum-cta-btn-primary {
  background: var(--nude-charcoal);
  color: var(--nude-white);
  border-color: var(--nude-charcoal);
}

.serum-cta-btn-primary:hover {
  background: transparent;
  color: var(--nude-charcoal);
  border-color: var(--nude-charcoal);
  box-shadow: none;
}

.serum-cta-btn .btn-arrow {
  transition: transform 0.3s ease;
}

.serum-cta-btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* ── CTA Buttons Container ── */
.serum-cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ── Amazon Button ── */
.serum-cta-btn-amazon {
  background: #fff;
  color: #232F3E;
  border: 1px solid rgba(35, 47, 62, 0.15);
  gap: 12px;
  border-radius: 100px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.serum-cta-btn-amazon .amazon-logo {
  width: 80px;
  height: auto;
  flex-shrink: 0;
}

.serum-cta-btn-amazon:not(.is-disabled):hover {
  background: #232F3E;
  color: #fff;
  border-color: #232F3E;
}

.serum-cta-btn-amazon:not(.is-disabled):hover .amazon-logo {
  filter: brightness(0) invert(1);
}

.serum-cta-btn-amazon:not(.is-disabled):hover .amazon-logo g {
  fill: #FF9900;
  filter: none;
}

.serum-cta-btn-soon {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--nude-stone);
  background: rgba(181, 199, 204, 0.2);
  border-radius: 100px;
  line-height: 1.4;
}

/* 購入停止時メッセージ */
.serum-buy-disabled-notice {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px 24px;
  text-align: center;
  background: rgba(201, 84, 74, 0.05);
  border: 1px solid rgba(201, 84, 74, 0.18);
  border-radius: 12px;
}

.serum-buy-disabled-text {
  margin: 0;
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--nude-stone);
}

/* 無効状態 */
.serum-cta-btn.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.3);
}

.serum-cta-btn.is-disabled:hover {
  transform: none;
  box-shadow: none;
  background: var(--nude-white);
  color: var(--nude-charcoal);
  border-color: rgba(181, 199, 204, 0.35);
}

/* ── Sub Links ── */
.serum-cta-sub-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.serum-cta-sub-link {
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--nude-stone);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--transition-smooth);
  letter-spacing: 0.02em;
}

.serum-cta-sub-link:hover {
  color: var(--nude-charcoal);
  border-bottom-color: var(--nude-charcoal);
}

/* ── Trust Badges ── */
.serum-cta-trust {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.serum-cta-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-gothic);
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--nude-stone);
  letter-spacing: 0.03em;
}

.serum-cta-trust-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--nude-blue-deep);
}

/* Legacy compat (hidden) */
.serum-plan-selector[aria-hidden="true"],
.serum-plan-detail[aria-hidden="true"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ── Stripe Checkout Modal ── */

.nude-checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.nude-checkout-modal.is-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.nude-checkout-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.nude-checkout-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 100vh;
  background: var(--nude-white, #fff);
  overflow-y: auto;
  padding: 48px 36px 36px;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nude-checkout-modal.is-open .nude-checkout-panel {
  transform: translateX(0);
}

.nude-checkout-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--nude-stone, #6b7b82);
  cursor: pointer;
  border-radius: 50%;
  transition: var(--transition-smooth);
}

.nude-checkout-close:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--nude-charcoal, #353535);
}

/* Header */
.nude-checkout-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(181, 199, 204, 0.2);
}

.nude-checkout-header svg {
  color: var(--nude-charcoal, #353535);
  margin-bottom: 12px;
}

.nude-checkout-product {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--nude-charcoal, #353535);
  letter-spacing: 0.1em;
  margin: 0 0 8px;
}

.nude-checkout-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--nude-charcoal, #353535);
  margin: 0 0 4px;
}

.nude-checkout-plan-label {
  font-family: var(--font-gothic);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--nude-stone, #6b7b82);
  margin: 0;
}

.nude-checkout-breakdown {
  font-family: var(--font-gothic);
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--nude-stone, #6b7b82);
  margin: 4px 0 0;
}

/* Form */
.nude-checkout-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nude-checkout-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nude-checkout-label {
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--nude-stone, #6b7b82);
}

.nude-checkout-input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-gothic);
  font-size: 0.92rem;
  color: var(--nude-charcoal, #353535);
  background: var(--nude-white, #fff);
  border: 1px solid rgba(181, 199, 204, 0.4);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.nude-checkout-input:focus {
  border-color: var(--nude-charcoal, #353535);
  box-shadow: 0 0 0 1px var(--nude-charcoal, #353535);
}

.nude-checkout-input::placeholder {
  color: rgba(107, 123, 130, 0.5);
}

.nude-checkout-hint {
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  color: var(--nude-stone, #6b7b82);
  text-align: center;
  padding: 24px 0;
  margin: 0;
}

/* Error / Success */
.nude-checkout-error {
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  color: #c9544a;
  background: rgba(201, 84, 74, 0.06);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(201, 84, 74, 0.15);
}

.nude-checkout-success {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  color: #3d8b5e;
  background: rgba(61, 139, 94, 0.06);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(61, 139, 94, 0.15);
  text-align: center;
}

/* Submit Button */
.nude-checkout-submit {
  position: relative;
  width: 100%;
  padding: 16px 24px;
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--nude-white, #fff);
  background: var(--nude-charcoal, #353535);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: var(--transition-smooth);
  margin-top: 4px;
}

.nude-checkout-submit:hover:not(:disabled) {
  opacity: 0.88;
  transform: translateY(-1px);
}

.nude-checkout-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nude-checkout-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: nude-spin 0.6s linear infinite;
}

@keyframes nude-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Loading indicator */
.nude-checkout-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.nude-checkout-loading span {
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(181, 199, 204, 0.3);
  border-top-color: var(--nude-charcoal, #353535);
  border-radius: 50%;
  animation: nude-spin 0.7s linear infinite;
}

/* Secured badge */
.nude-checkout-secured {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-gothic);
  font-size: 0.72rem;
  color: var(--nude-stone, #6b7b82);
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(181, 199, 204, 0.2);
}

.nude-checkout-secured svg {
  flex-shrink: 0;
}

/* Payment success banner */
.nude-payment-success-banner {
  background: linear-gradient(135deg, rgba(61, 139, 94, 0.06) 0%, rgba(61, 139, 94, 0.02) 100%);
  border: 1px solid rgba(61, 139, 94, 0.12);
  border-radius: 16px;
  margin-bottom: 24px;
}

/* FutureBase Serum Page Responsive */
@media (max-width: 768px) {
  .serum-concept-content { grid-template-columns: 1fr; gap: 16px; }
  .serum-concept-block-image { /* auto height from contain */ }
  .serum-overview-grid { grid-template-columns: 1fr; gap: 40px; }
  .serum-product-visual { max-width: 360px; margin: 0 auto; }
  .serum-ingredients-grid { grid-template-columns: 1fr; gap: 16px; }
  .serum-ingredient-card { padding: 24px 20px; }
  .serum-texture-grid { grid-template-columns: 1fr; gap: 32px; }
  .serum-texture-headline { font-size: 1.5rem; }
  .serum-routine-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .serum-routine-step { min-width: 0; padding: 20px 12px 18px; border-radius: 16px; }
  .serum-routine-step--active { padding-bottom: 30px; }
  .serum-routine-icon { width: 32px; height: 32px; }
  .serum-routine-name { font-size: 0.75rem; }
  .serum-routine-num { font-size: 0.6rem; }
  .serum-routine-arrow { display: none; }
  .serum-devnote-quote p { font-size: 1.1rem; }
  .serum-foryou-grid { grid-template-columns: 1fr; }
  .serum-compat-grid { grid-template-columns: 1fr; }
  .serum-freefrom-grid { grid-template-columns: 1fr 1fr; }
  .triple-item { grid-template-columns: 60px 1fr; }
  .serum-page-cta { margin-top: 56px; padding: 40px 20px; border-radius: 20px; }
  .serum-cta-header { margin-bottom: 32px; }
  .serum-cta-heading { font-size: 1.2rem; }
  .serum-cta-lead br { display: none; }
  .serum-cta-layout { grid-template-columns: 1fr; gap: 24px; }
  .serum-cta-media { max-width: 420px; margin: 0 auto; }
  .serum-cta-spec-card { padding: 16px 18px; }
  .serum-cta-spec-grid { gap: 12px; }
  .serum-cta-plans { margin-top: 28px; }
  .serum-plan-cards,
  .serum-plan-cards--3col { grid-template-columns: 1fr; gap: 12px; }
  .serum-plan-card { padding: 20px 18px; }
  .serum-plan-card-amount { font-size: 1.6rem; }
  .serum-subscription-notice { padding: 14px 16px; margin-bottom: 16px; }
  .serum-cta-btn { max-width: 100%; padding: 16px 32px; }
  .serum-cta-sub-links { flex-direction: column; align-items: center; gap: 12px; }
  .serum-cta-trust { flex-direction: column; align-items: center; gap: 8px; }
  .nude-checkout-panel { max-width: 100%; padding: 40px 24px 28px; }
  .serum-step { flex-direction: column; gap: 8px; }
}

@media (max-width: 480px) {
  .serum-routine-flow { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .serum-routine-step { padding: 16px 10px 14px; }
  .serum-freefrom-grid { grid-template-columns: 1fr; }
  .serum-page-cta { padding: 28px 16px; }
  .serum-cta-heading { font-size: 1.05rem; }
  .serum-plan-card-amount { font-size: 1.4rem; }
  .serum-cta-btn { padding: 14px 24px; font-size: 0.9rem; }
}

/* ============================================
   Sitemap Page
   ============================================ */

/* ヘッダー */
.sitemap-header {
  text-align: center;
  margin-bottom: 64px;
}

.sitemap-lead {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--nude-stone);
  margin-top: 16px;
  letter-spacing: 0.04em;
}

/* コンテンツコンテナ */
.sitemap-content {
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 40px;
}

/* セクション */
.sitemap-section {
  margin-bottom: 48px;
}

.sitemap-section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(181, 199, 204, 0.25);
}

.sitemap-section-number {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--nude-blue-deep);
  letter-spacing: 0.1em;
}

.sitemap-section-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--nude-charcoal);
  letter-spacing: 0.06em;
  margin: 0;
}

.sitemap-section-title-ja {
  font-family: var(--font-mincho);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--nude-stone);
  letter-spacing: 0.08em;
}

/* リスト */
.sitemap-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sitemap-item {
  border-bottom: 1px solid rgba(181, 199, 204, 0.15);
}

.sitemap-item:last-child {
  border-bottom: none;
}

/* リンク */
.sitemap-link {
  display: flex;
  align-items: center;
  padding: 16px 8px;
  text-decoration: none;
  color: var(--nude-charcoal);
  transition: all 0.3s var(--ease-elegant);
  gap: 12px;
}

.sitemap-link:hover {
  color: var(--nude-blue-dark);
  padding-left: 16px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  opacity: 1;
}

.sitemap-link-text {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  flex: 1;
}

.sitemap-link-desc {
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--nude-stone);
  letter-spacing: 0.04em;
}

.sitemap-link-date {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--nude-stone);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.sitemap-link-count {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--nude-blue-dark);
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: rgba(181, 199, 204, 0.2);
  padding: 2px 10px;
  border-radius: 20px;
}

.sitemap-link-arrow {
  font-size: 0.85rem;
  color: var(--nude-blue-deep);
  transition: all 0.3s var(--ease-elegant);
  opacity: 0;
  transform: translateX(-8px);
}

.sitemap-link:hover .sitemap-link-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--nude-blue-dark);
}

/* Sitemap Responsive */
@media (max-width: 768px) {
  .sitemap-header { margin-bottom: 48px; }
  .sitemap-section { margin-bottom: 36px; }
  .sitemap-section-header { gap: 8px; flex-wrap: wrap; }
  .sitemap-section-title { font-size: 1.1rem; }
  .sitemap-link { padding: 14px 6px; }
  .sitemap-link-text { font-size: 0.88rem; }
  .sitemap-link-arrow { opacity: 0.6; transform: translateX(0); }
}

@media (max-width: 480px) {
  .sitemap-section-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sitemap-link { padding: 12px 4px; }
  .sitemap-link-text { font-size: 0.85rem; }
  .sitemap-link-desc { display: none; }
}

/* ============================================
   Partner / Retailer Recruitment Page
   ============================================ */

/* Header Extension */
.partner-header {
  margin-bottom: 64px;
}

.partner-header-lead {
  font-family: var(--font-gothic);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin-top: 20px;
  text-align: center;
}

/* Partner Sections */
.partner-section {
  margin-bottom: 120px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Introduction */
.partner-intro-block {
  text-align: center;
  padding: 56px 40px;
  background: var(--nude-white);
  border-radius: 24px;
  margin-bottom: 48px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.partner-intro-mark {
  position: absolute;
  top: 20px;
  left: 32px;
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: 300;
  color: var(--nude-blue);
  opacity: 0.2;
  line-height: 1;
}

.partner-intro-text {
  font-family: var(--font-mincho);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 12px;
  letter-spacing: 0.08em;
  line-height: 1.8;
  position: relative;
  z-index: 1;
}

.partner-intro-en {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  color: var(--nude-stone);
  margin: 0;
  letter-spacing: 0.05em;
}

.partner-intro-desc p {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin: 0 0 20px;
  text-align: justify;
}

.partner-intro-desc p:first-child {
  font-family: var(--font-mincho);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--nude-charcoal);
}

/* Why nú:d Grid */
.partner-why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.partner-why-card {
  padding: 36px 28px;
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.12);
  border-radius: 20px;
  transition: var(--transition-smooth);
  position: relative;
}

.partner-why-card:hover {
  border-color: rgba(181, 199, 204, 0.3);
  box-shadow: 0 8px 32px rgba(45, 45, 42, 0.06);
  transform: translateY(-2px);
}

.partner-why-number {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--nude-blue-deep);
  background: rgba(181, 199, 204, 0.15);
  padding: 3px 10px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 16px;
}

.partner-why-card h3 {
  font-family: var(--font-gothic);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 12px;
}

.partner-why-card p {
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--nude-stone);
  margin: 0;
}

/* Partner Types */
.partner-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.partner-type-card {
  padding: 0;
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.12);
  border-radius: 20px;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.partner-type-card:hover {
  border-color: rgba(181, 199, 204, 0.3);
  box-shadow: 0 8px 32px rgba(45, 45, 42, 0.06);
  transform: translateY(-2px);
}

.partner-type-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: var(--nude-blue, #B5C7CC);
}

.partner-type-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-elegant);
}

.partner-type-card:hover .partner-type-image img {
  transform: scale(0.95);
}

.partner-type-body {
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Legacy icon support (keep for backward compat) */
.partner-type-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(181, 199, 204, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nude-blue-deep);
  margin-bottom: 20px;
}

.partner-type-card h3 {
  font-family: var(--font-gothic);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 8px;
}

.partner-type-target {
  font-family: var(--font-gothic);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--nude-blue-deep);
  margin: 0 0 16px;
  padding: 6px 12px;
  background: rgba(181, 199, 204, 0.08);
  border-radius: 8px;
  line-height: 1.6;
}

.partner-type-body > p:not(.partner-type-target) {
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--nude-stone);
  margin: 0 0 20px;
  flex-grow: 1;
}

/* Backward compatibility for cards without .partner-type-body wrapper */
.partner-type-card > p:not(.partner-type-target) {
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--nude-stone);
  margin: 0 0 20px;
  flex-grow: 1;
}

.partner-type-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(181, 199, 204, 0.12);
  padding-top: 16px;
}

.partner-type-benefits li {
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--nude-charcoal);
  padding: 6px 0 6px 20px;
  position: relative;
  line-height: 1.6;
}

.partner-type-benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nude-blue);
}

/* Business Model Cards */
.partner-models-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.partner-model-card {
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.15);
  border-radius: 24px;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.partner-model-card:hover {
  border-color: rgba(181, 199, 204, 0.3);
  box-shadow: 0 8px 40px rgba(45, 45, 42, 0.06);
  transform: translateY(-2px);
}

.partner-model-card-featured {
  border-color: rgba(181, 199, 204, 0.3);
  box-shadow: 0 4px 24px rgba(45, 45, 42, 0.06);
}

.partner-model-card-featured .partner-model-header {
  background: linear-gradient(135deg, var(--nude-blue-lightest) 0%, var(--nude-lemon-lightest) 100%);
}

.partner-model-header {
  padding: 28px 28px 20px;
  background: var(--nude-mist);
  border-bottom: 1px solid rgba(181, 199, 204, 0.1);
}

.partner-model-label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--nude-blue-dark);
  padding: 5px 18px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 10px;
}

.partner-model-card-featured .partner-model-label {
  background: linear-gradient(135deg, var(--nude-blue-deep) 0%, #6a8e7a 100%);
}

.partner-model-header h3 {
  font-family: var(--font-gothic);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 4px;
}

.partner-model-tagline {
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--nude-stone);
  margin: 0;
}

.partner-model-body {
  padding: 28px;
}

.partner-model-margin {
  text-align: center;
  padding: 20px;
  background: rgba(181, 199, 204, 0.06);
  border-radius: 16px;
  margin-bottom: 24px;
}

.margin-label {
  display: block;
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--nude-stone);
  margin-bottom: 6px;
}

.margin-value {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  line-height: 1.1;
}

.margin-unit {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--nude-stone);
}

.margin-note {
  display: block;
  font-family: var(--font-gothic);
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--nude-stone);
  margin-top: 4px;
}

.partner-model-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.partner-model-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  padding: 8px 0;
  line-height: 1.6;
}

.feature-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
}

.feature-icon-good {
  background: rgba(181, 199, 204, 0.2);
}

.feature-icon-good::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 6px;
  width: 5px;
  height: 8px;
  border: solid var(--nude-blue-deep);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.feature-icon-neutral {
  background: rgba(181, 199, 204, 0.12);
}

.feature-icon-neutral::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 4px;
  width: 10px;
  height: 1.5px;
  background: var(--nude-stone);
  border-radius: 1px;
}

.partner-model-recommend {
  font-family: var(--font-gothic);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--nude-blue-dark);
  background: rgba(181, 199, 204, 0.1);
  padding: 10px 16px;
  border-radius: 10px;
  margin: 0;
  line-height: 1.6;
}

.partner-models-note {
  margin-top: 24px;
  padding: 24px 28px;
  background: none;
  border-radius: 16px;
  text-align: center;
}

.partner-models-note p {
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--nude-stone);
  margin: 0;
}

/* Flow Steps */
.partner-flow-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 48px;
}

.partner-flow-step {
  flex: 1;
  text-align: center;
  padding: 0 16px;
}

.flow-step-number {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--nude-blue);
  margin-bottom: 12px;
  line-height: 1;
}

.partner-flow-step h3 {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 8px;
}

.partner-flow-step p {
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--nude-stone);
  margin: 0;
}

.partner-flow-connector {
  width: 40px;
  height: 1px;
  background: rgba(181, 199, 204, 0.4);
  flex-shrink: 0;
  margin-top: 18px;
}

/* CTA Form Section */
.partner-cta-section {
  max-width: 720px;
}

.partner-cta-block {
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.15);
  border-radius: 28px;
  padding: 56px 48px;
  box-shadow: 0 4px 40px rgba(45, 45, 42, 0.05);
}

.partner-cta-header {
  text-align: center;
  margin-bottom: 40px;
}

.partner-cta-logo {
  color: var(--nude-charcoal);
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.partner-cta-title {
  font-family: var(--font-mincho);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin: 0 0 12px;
  letter-spacing: 0.06em;
}

.partner-cta-subtitle {
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--nude-stone);
  margin: 0;
}

/* Form Styles */
.partner-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.partner-form-field {
  display: flex;
  flex-direction: column;
}

.partner-form-field-full {
  grid-column: 1 / -1;
}

.partner-form-field label:first-child {
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.partner-form-field label .required {
  color: #c0392b;
  font-weight: 500;
  font-size: 0.7rem;
}

.partner-form-field input[type="text"],
.partner-form-field input[type="email"],
.partner-form-field input[type="tel"],
.partner-form-field input[type="url"],
.partner-form-field select,
.partner-form-field textarea {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  background: var(--nude-mist);
  border: 1px solid rgba(181, 199, 204, 0.15);
  border-radius: 12px;
  padding: 12px 16px;
  outline: none;
  transition: var(--transition-fast);
  width: 100%;
  -webkit-appearance: none;
}

.partner-form-field input:focus,
.partner-form-field select:focus,
.partner-form-field textarea:focus {
  border-color: var(--nude-blue);
  box-shadow: 0 0 0 3px rgba(181, 199, 204, 0.2);
  background: #fff;
}

.partner-form-field input::placeholder,
.partner-form-field textarea::placeholder {
  color: rgba(74, 77, 78, 0.35);
}

.partner-form-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a9aa3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.partner-form-field textarea {
  resize: vertical;
  min-height: 120px;
}

/* Radio Group */
.partner-form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.partner-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-gothic);
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  padding: 8px 16px;
  background: var(--nude-mist);
  border: 1px solid rgba(181, 199, 204, 0.15);
  border-radius: 10px;
  transition: var(--transition-fast);
}

.partner-radio-label:hover {
  border-color: rgba(181, 199, 204, 0.35);
}

.partner-radio-label input[type="radio"] {
  display: none;
}

.partner-radio-custom {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(181, 199, 204, 0.4);
  flex-shrink: 0;
  transition: var(--transition-fast);
  position: relative;
}

.partner-radio-label input[type="radio"]:checked + .partner-radio-custom {
  border-color: var(--nude-blue-deep);
}

.partner-radio-label input[type="radio"]:checked + .partner-radio-custom::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nude-blue-deep);
  transform: translate(-50%, -50%);
}

.partner-radio-label input[type="radio"]:checked ~ span:last-child {
  font-weight: 500;
  color: var(--nude-blue-dark);
}

/* Checkbox */
.partner-form-privacy {
  margin-bottom: 28px;
}

.partner-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--nude-stone);
  line-height: 1.6;
}

.partner-checkbox-label input[type="checkbox"] {
  display: none;
}

.partner-checkbox-custom {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid rgba(181, 199, 204, 0.4);
  flex-shrink: 0;
  margin-top: 1px;
  transition: var(--transition-fast);
  position: relative;
}

.partner-checkbox-label input[type="checkbox"]:checked + .partner-checkbox-custom {
  border-color: var(--nude-blue-deep);
  background: var(--nude-blue-deep);
}

.partner-checkbox-label input[type="checkbox"]:checked + .partner-checkbox-custom::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.partner-checkbox-label a {
  color: var(--nude-blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.partner-checkbox-label a:hover {
  color: var(--nude-blue-dark);
}

.partner-checkbox-label .required {
  color: #c0392b;
  font-weight: 500;
  font-size: 0.7rem;
}

/* Submit Button */
.partner-form-submit {
  text-align: center;
}

.partner-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--nude-white);
  background: var(--nude-charcoal);
  border: none;
  border-radius: 100px;
  padding: 16px 48px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.partner-submit-btn:hover {
  background: var(--nude-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(42, 45, 46, 0.2);
}

.partner-submit-btn:active {
  transform: translateY(0);
}

.partner-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.partner-submit-btn .btn-arrow {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.partner-submit-btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* Validation Styles */
.partner-form-field.has-error input,
.partner-form-field.has-error select,
.partner-form-field.has-error textarea,
.partner-form-fieldset.has-error input,
.partner-form-fieldset.has-error select,
.partner-form-fieldset.has-error textarea {
  border-color: #e57373;
  box-shadow: 0 0 0 2px rgba(229, 115, 115, 0.15);
}

.partner-form-fieldset.has-error .partner-form-radio-group {
  border-color: #e57373;
}

/* sp-only br */
.sp-only { display: none; }

/* Partner Page Responsive */
@media (max-width: 900px) {
  .partner-types-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .partner-models-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .partner-header { margin-bottom: 48px; }
  .partner-header-lead { font-size: 0.95rem; }
  .sp-only { display: inline; }

  .partner-section { margin-bottom: 80px; }

  .partner-intro-block { padding: 40px 24px; }
  .partner-intro-text { font-size: 1.3rem; }

  .partner-why-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .partner-model-header { padding: 20px 20px 16px; }
  .partner-model-body { padding: 20px; }
  .margin-value { font-size: 2.4rem; }

  .partner-flow-steps {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .partner-flow-step {
    text-align: left;
    padding: 16px 0 16px 24px;
    border-left: 2px solid rgba(181, 199, 204, 0.3);
    position: relative;
  }

  .partner-flow-step::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 22px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nude-blue);
  }

  .partner-flow-connector {
    display: none;
  }

  .flow-step-number {
    font-size: 1.2rem;
    margin-bottom: 6px;
  }

  .partner-cta-block {
    padding: 36px 20px;
    border-radius: 20px;
  }

  .partner-form-grid {
    grid-template-columns: 1fr;
  }

  .partner-form-radio-group {
    flex-direction: column;
    gap: 8px;
  }

  .partner-submit-btn {
    width: 100%;
    justify-content: center;
  }

  .partner-models-note { padding: 20px 16px; }
}

@media (max-width: 480px) {
  .partner-intro-block { padding: 32px 20px; }
  .partner-intro-text { font-size: 1.1rem; }
  .partner-why-card { padding: 24px 16px; }
  .partner-why-card h3 { font-size: 1rem; }
  .partner-why-card p { font-size: 0.82rem; }
  .partner-type-card { padding: 20px 16px; }
  .partner-model-header { padding: 16px; }
  .partner-model-body { padding: 16px; }
  .margin-value { font-size: 2rem; }
  .partner-cta-block { padding: 28px 16px; }
  .partner-cta-block h2 { font-size: 1.2rem; }
  .partner-section-title { font-size: 1.6rem; }
}

/* ============================================
   Contact Page — カスタマーお問い合わせ
   ============================================
   フォーム部分は .partner-* クラスを共有。
   ここではコンタクトページ固有のセクションのみ定義。
   カラーはテーマ変数（明るい背景 + 暗いテキスト）に準拠。
   ============================================ */

/* Header */
.contact-header {
  text-align: center;
  margin-bottom: 64px;
}

.contact-header-lead {
  font-family: var(--font-gothic);
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--nude-stone);
  line-height: 2;
  margin-top: 24px;
}

/* Section spacing */
.contact-section {
  margin-bottom: 100px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* FAQ 誘導カード */
.contact-faq-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.2);
  border-radius: 16px;
  padding: 28px 32px;
  margin-top: 0;
  box-shadow: 0 2px 20px rgba(45, 45, 42, 0.04);
}

.contact-faq-icon {
  flex-shrink: 0;
  color: var(--nude-blue-deep);
  margin-top: 2px;
}

.contact-faq-heading {
  font-family: var(--font-mincho);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin-bottom: 6px;
}

.contact-faq-text {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--nude-stone);
  line-height: 1.8;
}

.contact-faq-text a {
  color: var(--nude-blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}

.contact-faq-text a:hover {
  color: var(--nude-charcoal);
}

/* Contact Form Section */
.contact-form-section {
  margin-top: 0;
  max-width: 720px;
}

/* ── Fieldset reset for radio groups ── */
.partner-form-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.partner-form-fieldset legend {
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin-bottom: 6px;
  padding: 0;
  float: none;
  width: 100%;
}

.partner-form-fieldset legend .required {
  color: #c0392b;
  font-weight: 500;
  font-size: 0.7rem;
}

/* ── Conditional field slide animation ── */
.partner-form-conditional {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease;
  max-height: 0;
  opacity: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.partner-form-conditional.is-visible {
  max-height: 120px;
  opacity: 1;
  margin-top: revert !important;
  margin-bottom: revert !important;
}

/* ── Submit button spinner ── */
.btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: nude-spin 0.6s linear infinite;
  flex-shrink: 0;
}

.partner-submit-btn.is-sending .btn-spinner {
  display: inline-block;
}

.partner-submit-btn.is-sending .btn-arrow {
  display: none;
}

@keyframes nude-spin {
  to { transform: rotate(360deg); }
}

/* ── Enhanced form status messages ── */
.partner-form-status {
  display: none;
  padding: 20px 24px;
  border-radius: 12px;
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.7;
  margin-top: 24px;
  text-align: center;
}

.partner-form-status.is-sending {
  display: block;
  background: var(--nude-mist);
  color: var(--nude-stone);
  border: 1px solid rgba(181, 199, 204, 0.2);
}

.partner-form-status.is-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #f0faf5 0%, #e8f5f0 100%);
  color: #2e7d5a;
  border: 1px solid rgba(46, 125, 90, 0.15);
  padding: 32px 24px;
}

.partner-form-status.is-success::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  background: #2e7d5a;
  border-radius: 50%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  -webkit-mask-size: 24px;
  mask-size: 24px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
  animation: nude-success-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes nude-success-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.partner-form-status.is-error {
  display: block;
  background: linear-gradient(135deg, #fef2f2 0%, #fde8e8 100%);
  color: #c62828;
  border: 1px solid rgba(198, 40, 40, 0.12);
}

/* ── Field error role="alert" ── */
.partner-form-field .field-error,
.partner-form-fieldset .field-error,
.partner-form-privacy .field-error {
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  font-weight: 400;
  color: #c62828;
  margin-top: 4px;
}

/* ── Contact method card as link ── */
a.contact-method-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Other Contact Methods */
.contact-methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.contact-method-card {
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.2);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 2px 20px rgba(45, 45, 42, 0.04);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-method-card:hover {
  border-color: rgba(181, 199, 204, 0.35);
  box-shadow: 0 4px 30px rgba(45, 45, 42, 0.08);
}

.contact-method-icon {
  color: var(--nude-blue-deep);
  margin-bottom: 16px;
}

.contact-method-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--nude-charcoal);
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}

.contact-method-card p {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--nude-stone);
  line-height: 1.6;
}

.contact-method-note {
  font-size: 0.78rem !important;
  color: var(--nude-accent) !important;
  margin-top: 8px;
}

/* Partner Link Section */
.contact-partner-card {
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.2);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 2px 20px rgba(45, 45, 42, 0.04);
}

.contact-partner-text {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--nude-stone);
  line-height: 1.9;
}

.contact-partner-text a {
  color: var(--nude-blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}

.contact-partner-text a:hover {
  color: var(--nude-charcoal);
}

/* ── Contact Page Responsive ── */
@media (max-width: 768px) {
  .contact-header {
    margin-bottom: 48px;
  }

  .contact-header-lead {
    font-size: 0.95rem;
  }

  .contact-section {
    margin-bottom: 64px;
  }

  .contact-form-section {
    max-width: 100%;
  }

  .contact-faq-card {
    flex-direction: column;
    gap: 12px;
    padding: 20px;
  }

  .contact-faq-link {
    max-width: 100%;
  }

  .contact-methods-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-method-card {
    padding: 24px 20px;
  }

  .contact-partner-card {
    padding: 24px 16px;
  }

  .contact-partner-text {
    font-size: 0.85rem;
  }

  /* Status message mobile */
  .partner-form-status.is-success {
    padding: 24px 16px;
  }

  .partner-form-status.is-success::before {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .contact-header-lead { font-size: 0.88rem; }
  .contact-section { margin-bottom: 48px; }
  .contact-faq-card { padding: 16px; }
  .contact-faq-heading { font-size: 0.88rem; }
  .contact-faq-text { font-size: 0.82rem; }
  .contact-method-card { padding: 20px 16px; }
  .contact-method-card h3 { font-size: 1rem; }
  .contact-method-card p { font-size: 0.85rem; }
  .contact-partner-card { padding: 20px 14px; }
  .contact-partner-text { font-size: 0.82rem; }
  .partner-form-field label { font-size: 0.78rem; }
  .partner-form-field input,
  .partner-form-field select,
  .partner-form-field textarea { font-size: 0.88rem; padding: 10px 14px; }
  .partner-submit-btn { padding: 14px 32px; font-size: 0.92rem; }
}

/* ============================================
   Sustainability Page
   ============================================ */

/* Lead Section */
.sustainability-lead-block {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 80px;
}

.sustainability-lead-text {
  font-family: var(--font-gothic);
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 2.2;
  color: var(--nude-stone);
  letter-spacing: 0.04em;
}

/* Story Section */
.sustainability-story-content {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
  margin-top: 40px;
}

.sustainability-story-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sustainability-story-visual img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
}

.sustainability-story-text p {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin-bottom: 1.2em;
}

.sustainability-story-text p:last-child {
  margin-bottom: 0;
}

/* Supply Chain */
.sustainability-supply-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.sustainability-supply-card {
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.15);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  transition: all 0.4s var(--ease-elegant);
}

.sustainability-supply-card h3,
.sustainability-supply-card p {
  padding-left: 28px;
  padding-right: 28px;
}

.sustainability-supply-card p {
  padding-bottom: 32px;
}

.sustainability-supply-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(45, 45, 42, 0.08);
}

.supply-icon {
  color: var(--nude-blue-deep);
  margin-bottom: 20px;
}

.supply-image {
  margin-bottom: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.supply-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sustainability-supply-card h3 {
  font-family: var(--font-mincho);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--nude-charcoal);
}

.sustainability-supply-card p {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--nude-stone);
}

/* Clean Formula */
.sustainability-clean-content {
  margin-top: 40px;
}

.sustainability-clean-lead {
  text-align: center;
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin-bottom: 48px;
}

.sustainability-freefrom-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 960px;
  margin: 0 auto;
}

.sustainability-freefrom-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.15);
  border-radius: 12px;
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  white-space: nowrap;
}

.freefrom-check {
  flex-shrink: 0;
  color: var(--nude-blue-deep);
  display: flex;
  align-items: center;
}

/* Where We Focus */
.sustainability-packaging-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.sustainability-packaging-card {
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.15);
  border-radius: 20px;
  padding: 32px;
  transition: all 0.4s var(--ease-elegant);
}

.sustainability-packaging-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(45, 45, 42, 0.08);
}

.packaging-icon-wrap {
  color: var(--nude-blue-deep);
  margin-bottom: 20px;
}

.sustainability-packaging-card h3 {
  font-family: var(--font-mincho);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--nude-charcoal);
}

.sustainability-packaging-card p {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--nude-stone);
}

/* Commitment */
.sustainability-commitment-block {
  max-width: 700px;
  margin: 0 auto;
}

.sustainability-commitment-text p {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin-bottom: 1em;
}

.sustainability-commitment-text p:last-child {
  margin-bottom: 0;
}

/* Sustainability Responsive */
@media (max-width: 768px) {
  .sustainability-lead-text {
    font-size: 1rem;
    line-height: 2;
  }

  .sustainability-story-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sustainability-supply-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sustainability-freefrom-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .sustainability-freefrom-item {
    white-space: normal;
  }

  .sustainability-packaging-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .sustainability-lead-text {
    font-size: 0.92rem;
  }

  .sustainability-freefrom-grid {
    grid-template-columns: 1fr;
  }

  .sustainability-freefrom-item {
    padding: 12px 14px;
    font-size: 0.82rem;
  }

  .sustainability-supply-card h3,
  .sustainability-supply-card p {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sustainability-supply-card p {
    padding-bottom: 24px;
  }

  .sustainability-packaging-card {
    padding: 24px 20px;
  }
}

/* ============================================
   Contact Thanks Page
   ============================================ */

.thanks-page {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 0 80px;
}

.thanks-check-icon {
  color: var(--nude-blue-deep);
  margin-bottom: 32px;
  animation: thanksCheckFadeIn 0.6s ease-out;
}

@keyframes thanksCheckFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.thanks-header {
  margin-bottom: 40px;
}

.thanks-body {
  margin-bottom: 64px;
}

.thanks-lead {
  font-family: var(--font-gothic);
  font-size: 1rem;
  font-weight: 300;
  line-height: 2;
  color: var(--nude-stone);
  margin-bottom: 24px;
}

.thanks-lead strong {
  color: var(--nude-charcoal);
  font-weight: 500;
}

.thanks-notice {
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.15);
  border-radius: 16px;
  padding: 24px 28px;
  text-align: left;
}

.thanks-notice p {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--nude-stone);
  margin: 0;
}

.thanks-notice strong {
  color: var(--nude-charcoal);
  font-weight: 500;
}

.thanks-notice a {
  color: var(--nude-blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.thanks-notice a:hover {
  color: var(--nude-blue-dark);
}

/* Helpful Links */
.thanks-links {
  margin-bottom: 56px;
}

.thanks-links-title {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}

.thanks-links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  text-align: left;
}

.thanks-link-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--nude-white);
  border: 1px solid rgba(181, 199, 204, 0.15);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.4s var(--ease-elegant);
}

.thanks-link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(45, 45, 42, 0.08);
}

.thanks-link-icon {
  flex-shrink: 0;
  color: var(--nude-blue-deep);
  display: flex;
  align-items: center;
}

.thanks-link-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.thanks-link-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nude-blue-deep);
}

.thanks-link-title {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  color: var(--nude-charcoal);
  font-weight: 400;
}

.thanks-link-arrow {
  flex-shrink: 0;
  color: #ccc;
  font-size: 1.1rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

.thanks-link-card:hover .thanks-link-arrow {
  color: var(--nude-blue-deep);
  transform: translateX(3px);
}

/* Back to Top */
.thanks-back {
  padding-top: 32px;
  border-top: 1px solid rgba(181, 199, 204, 0.15);
}

.thanks-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #888;
  text-decoration: none;
  transition: color 0.3s ease;
}

.thanks-back-link:hover {
  color: var(--nude-blue-deep);
}

/* Thanks Page Responsive */
@media (max-width: 768px) {
  .thanks-page {
    padding: 24px 0 60px;
  }

  .thanks-links-grid {
    grid-template-columns: 1fr;
  }

  .thanks-notice {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .thanks-check-icon svg {
    width: 48px;
    height: 48px;
  }

  .thanks-lead {
    font-size: 0.92rem;
  }

  .thanks-notice p {
    font-size: 0.82rem;
  }

  .thanks-link-card {
    padding: 16px 18px;
    gap: 12px;
  }

  .thanks-link-title {
    font-size: 0.85rem;
  }
}


/* ================================================================
   Front Page: Discover Section
   ================================================================ */

.nude-discover {
  padding: 100px 0;
  background: transparent;
  position: relative;
}

@media (max-width: 768px) {
  .nude-discover {
    padding: 72px 0;
  }
}

/* ================================================================
   Shared: Related Navigation Component (.nude-related-nav)
   各ページ下部に配置する統一デザインの内部リンクナビゲーション
   ================================================================ */

.nude-related-nav {
  margin-top: 80px;
  padding: 60px 0 0;
  border-top: 1px solid rgba(181, 199, 204, 0.25);
}

.nude-related-nav-inner {
  text-align: center;
}

.nude-related-nav-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nude-blue-deep);
  margin-bottom: 8px;
}

.nude-related-nav-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--nude-charcoal);
  margin: 0 0 40px;
}

.nude-related-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

/* 2列レイアウト */
.nude-related-nav-grid--2col {
  max-width: 900px;
  grid-template-columns: repeat(2, 1fr);
}

/* 3列レイアウト */
.nude-related-nav-grid--3col {
  max-width: 900px;
  grid-template-columns: repeat(3, 1fr);
}

/* 1列リスト型レイアウト */
.nude-related-nav-grid--list {
  max-width: 480px;
  grid-template-columns: 1fr;
  gap: 0;
}

.nude-related-nav-grid--list .nude-related-nav-card {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(181, 199, 204, 0.25);
  padding: 16px 4px;
  background: transparent;
}

.nude-related-nav-grid--list .nude-related-nav-card:first-child {
  border-top: 1px solid rgba(181, 199, 204, 0.25);
}

.nude-related-nav-grid--list .nude-related-nav-card:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
}

.nude-related-nav-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  text-decoration: none;
  color: var(--nude-charcoal);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(181, 199, 204, 0.2);
  border-radius: 14px;
  transition: all 0.35s var(--ease-elegant);
}

.nude-related-nav-card:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(122, 154, 163, 0.08);
  opacity: 1;
}

.nude-related-nav-card:focus-visible {
  outline: 2px solid var(--nude-blue-deep);
  outline-offset: 2px;
  opacity: 1;
}

.nude-related-nav-card-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nude-stone);
  margin-bottom: 2px;
}

.nude-related-nav-card-title {
  font-family: var(--font-mincho);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--nude-charcoal);
  flex: 1;
}

.nude-related-nav-card-body {
  flex: 1;
  min-width: 0;
}

.nude-related-nav-card-arrow {
  font-size: 0.85rem;
  color: var(--nude-stone);
  flex-shrink: 0;
  transition: transform 0.3s ease, color 0.3s ease;
}

.nude-related-nav-card:hover .nude-related-nav-card-arrow {
  transform: translateX(4px);
  color: var(--nude-charcoal);
}

/* ================================================================
   Shared: Focus-visible styles for accessibility
   ================================================================ */

a:focus-visible {
  outline: 2px solid var(--nude-blue-deep);
  outline-offset: 2px;
  opacity: 1;
}

button:focus-visible {
  outline: 2px solid var(--nude-blue-deep);
  outline-offset: 2px;
}

/* ================================================================
   Responsive: Related Navigation
   ================================================================ */

@media (max-width: 768px) {
  .nude-related-nav {
    margin-top: 56px;
    padding-top: 40px;
  }

  .nude-related-nav-title {
    font-size: 1.05rem;
    margin-bottom: 28px;
  }

  .nude-related-nav-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .nude-related-nav-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }

  .nude-related-nav-grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }

  .nude-related-nav-card {
    padding: 16px 18px;
  }
}

@media (max-width: 480px) {
  .nude-related-nav-grid {
    grid-template-columns: 1fr;
  }

  .nude-related-nav-grid--2col {
    grid-template-columns: 1fr;
  }

  .nude-related-nav-grid--3col {
    grid-template-columns: 1fr;
  }

  .nude-related-nav-card-label {
    font-size: 0.58rem;
  }

  .nude-related-nav-card-title {
    font-size: 0.84rem;
  }
}

/* ================================================================
   Page: Mypage (Customer Portal)
   ================================================================ */

.mypage-header {
  text-align: center;
  margin-bottom: 64px;
}

.mypage-header-lead {
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--nude-stone);
  line-height: 1.9;
  margin-top: 16px;
}

/* Login Section */
.mypage-login-section {
  max-width: 520px;
  margin: 0 auto 64px;
}

.mypage-login-card {
  text-align: center;
  padding: 48px 40px;
  background: var(--nude-white, #fff);
  border: 1px solid var(--nude-blue-light);
  border-radius: 16px;
}

.mypage-login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--nude-mist);
  color: var(--nude-stone);
  margin-bottom: 24px;
}

.mypage-login-title {
  font-family: var(--font-gothic);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin-bottom: 12px;
}

.mypage-login-desc {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--nude-stone);
  line-height: 1.8;
  margin-bottom: 32px;
}

/* Form */
.mypage-form {
  text-align: left;
}

.mypage-form-group {
  margin-bottom: 20px;
}

.mypage-form-label {
  display: block;
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--nude-stone);
  margin-bottom: 8px;
}

.mypage-form-input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--nude-charcoal);
  background: #fff;
  border: 1px solid rgba(181, 199, 204, 0.4);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

.mypage-form-input:focus {
  border-color: var(--nude-charcoal);
  box-shadow: 0 0 0 1px var(--nude-charcoal);
}

.mypage-form-input::placeholder {
  color: var(--nude-blue);
  opacity: 0.6;
}

/* Error */
.mypage-error {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  color: #c9544a;
  background: rgba(201, 84, 74, 0.06);
  border: 1px solid rgba(201, 84, 74, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  line-height: 1.6;
}

/* Submit Button */
.mypage-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px;
  font-family: var(--font-gothic);
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  background: var(--nude-charcoal);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  position: relative;
  min-height: 52px;
}

.mypage-submit-btn:hover {
  background: #252525;
  transform: translateY(-1px);
}

.mypage-submit-btn:active {
  transform: translateY(0);
}

.mypage-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.mypage-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mypage-spin 0.7s linear infinite;
  position: absolute;
}

@keyframes mypage-spin {
  to { transform: rotate(360deg); }
}

/* Info Cards */
.mypage-info-section {
  max-width: 800px;
  margin: 0 auto 64px;
}

.mypage-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.mypage-info-card {
  padding: 28px 24px;
  background: var(--nude-mist, #f4f7f8);
  border-radius: 12px;
  text-align: center;
}

.mypage-info-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--nude-stone);
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.mypage-info-card-title {
  font-family: var(--font-gothic);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin-bottom: 8px;
}

.mypage-info-card-desc {
  font-family: var(--font-gothic);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--nude-stone);
  line-height: 1.7;
}

/* Help Section */
.mypage-help-section {
  max-width: 520px;
  margin: 0 auto 0;
}

.mypage-help-card {
  padding: 28px 32px;
  background: rgba(181, 199, 204, 0.08);
  border: 1px solid rgba(181, 199, 204, 0.2);
  border-radius: 12px;
}

.mypage-help-title {
  font-family: var(--font-gothic);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--nude-charcoal);
  margin-bottom: 10px;
}

.mypage-help-desc {
  font-family: var(--font-gothic);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--nude-stone);
  line-height: 1.8;
}

.mypage-help-desc a {
  color: var(--nude-blue-deep);
  text-decoration: underline;
}

.mypage-help-desc a:hover {
  color: var(--nude-blue-dark);
  opacity: 1;
}

/* Responsive: Mypage */
@media (max-width: 768px) {
  .mypage-login-card {
    padding: 36px 24px;
  }

  .mypage-info-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mypage-info-card {
    text-align: left;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px 20px;
  }

  .mypage-info-card-icon {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .mypage-help-card {
    padding: 24px 20px;
  }
}

/* ============================================
   Mobile Layout Fix — 2026-02 Patch
   overflow-x 根本対策 & white-space / 見切れ修正
   ============================================ */

/* ---------- footer-glow: 固定幅 800px → レスポンシブ化 ---------- */
.footer-glow {
  max-width: 100vw;
}

/* ---------- komorebi-ray: 小画面で縮小 ---------- */
@media (max-width: 480px) {
  .komorebi-ray-1 { width: 150px; height: 300px; }
  .komorebi-ray-2 { width: 100px; height: 250px; }
  .komorebi-ray-3 { width: 125px; height: 275px; }
}

/* ---------- white-space: nowrap 修正 ---------- */

/* .nude-release-info: 小画面で折り返し可能に */
@media (max-width: 374px) {
  .nude-release-info {
    white-space: normal !important;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
}

/* .product-variant-hint: 768px以下でも折り返し */
@media (max-width: 768px) {
  .product-variant-hint {
    white-space: normal;
  }
}

/* .meaning-item: 768px以下で wrap 許可 */
@media (max-width: 768px) {
  .meaning-item {
    white-space: normal;
    flex-wrap: wrap;
  }
}

/* posts-grid: 480px以下で1カラム */
@media (max-width: 480px) {
  .posts-grid {
    grid-template-columns: 1fr;
  }
}

/* entry-meta: 長いメタテキストの折り返し */
@media (max-width: 480px) {
  .posts-grid .nude-article .entry-meta > * {
    white-space: normal;
  }
}

/* テーブルヘッダ: th の nowrap を解除（小画面） */
@media (max-width: 480px) {
  .tokusho-table th,
  .company-table th {
    white-space: normal;
    width: auto;
    min-width: 80px;
  }
}

/* single-content table: スマホでも横スクロール＋改行なし（768px以下の nowrap を維持） */

/* タグ・ラベルの nowrap: 小画面で折り返し */
@media (max-width: 480px) {
  .ingredient-category-tag,
  .ingredient-badge {
    white-space: normal;
  }
}

/* ---------- Instagram グリッド: 320px 以下で1列 ---------- */
@media (max-width: 374px) {
  .instagram-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ---------- パディング最適化: 超小画面 ---------- */
@media (max-width: 374px) {
  .nude-concept, .nude-technology, .nude-foryou,
  .nude-product, .nude-waitlist,
  .nude-brand-story, .nude-sustainability,
  .nude-howtouse, .nude-faq, .nude-instagram,
  .nude-skinscan {
    padding: 56px 0;
  }

  .skinscan-text {
    padding-bottom: 60px;
  }
}

/* ---------- フォント最小サイズ保証 ---------- */
@media (max-width: 480px) {
  .nav-text,
  .nav-brand-desc,
  .nav-link-label {
    font-size: max(0.8rem, 13px);
  }

  .nude-message-bar {
    font-size: max(0.6rem, 11px);
  }

  .footer-legal-link,
  .copyright {
    font-size: max(0.7rem, 11px);
  }
}

/* ---------- body overflow-x: hidden のルートコーズ対策 ---------- */
/* header/nav/footer の子要素が vw を超えないよう制約 */
.site-header,
.global-nav,
.site-footer,
.footer-bg-decoration {
  max-width: 100vw;
  overflow-x: clip;
}

/* .inner コンテナの安全マージン */
@media (max-width: 480px) {
  .inner,
  .nude-section-inner {
    width: 92%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
  }
}

/* ---------- serum-routine-flow: 超小画面で1列 ---------- */
@media (max-width: 374px) {
  .serum-routine-flow {
    grid-template-columns: 1fr;
  }
}