@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&family=Outfit:wght@300;400;500;600&display=swap');

/* ===== VARIABLES ===== */
:root {
  --bg: #fdf6ed;
  --white: #FFFFFF;
  --heading: #3a1507;
    --text2: #3a1507;
  --text: #6D6259;
  --accent: #B48A5A;
  --accent2: #d1af7e;
  --accent-light: #f9e7d2;
  --border: #DDD4C7;
  --lineup-bg: #FDF9F4;
  --serif: 'Noto Serif JP', serif;
  --sans: 'Noto Sans JP', sans-serif;
  --outfit: 'Outfit', sans-serif;
  --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ================================================================
   WP / FutureShop 干渉リセット — #rattan-feature スコープで完全上書き
   ================================================================ */

/* body line-height リセットは #rattan-feature 内のみに限定
   （WPヘッダー・フッターへの干渉を防ぐ） */

body {
    line-height: 1!important;
}
.hero-subtitle-jp-tablet {
    display: none!important;
}
#rattan-feature,
#rattan-feature main {
    line-height: 1.8 !important;
}

#rattan-feature,
#rattan-feature * ,
#rattan-feature *::before,
#rattan-feature *::after {
  box-sizing: border-box !important;
}
#rattan-feature {
  overflow-x: clip !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--sans) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.04em !important;
  -webkit-font-smoothing: antialiased !important;
}
#rattan-feature h1,
#rattan-feature h2,
#rattan-feature h3,
#rattan-feature h4,
#rattan-feature h5,
#rattan-feature h6 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--heading) !important;
  border: none !important;
  background: none !important;
  letter-spacing: normal !important;
}
#rattan-feature h4,
#rattan-feature h5,
#rattan-feature h6 {
  font-family: var(--sans) !important;
}
#rattan-feature p {
  margin: 0 !important;
  padding: 0 !important;
}
#rattan-feature ul,
#rattan-feature ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#rattan-feature li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#rattan-feature li::before,
#rattan-feature li::after { content: none !important; }
#rattan-feature img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
#rattan-feature a {
  color: inherit !important;
  text-decoration: none !important;
}
#rattan-feature main {
  display: block !important;
  overflow: visible !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#rattan-feature section {
  margin: 0 !important;
  /* padding は各セクション個別に !important 指定 */
}
#rattan-feature table {
  border-collapse: collapse !important;
  width: auto !important;
}
#rattan-feature th,
#rattan-feature td {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
#rattan-feature button {
  font-family: inherit !important;
  cursor: pointer !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#rattan-feature strong { color: var(--accent) !important; }

/* ================================================================
   LAYOUT
   ================================================================ */
#rattan-feature .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  width: 100% !important;
}
#rattan-feature .container-narrow {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}

/* ================================================================
   HEADING ACCENT
   ================================================================ */
#rattan-feature .heading-accent {
    font-family: 'Libre Baskerville', serif !important;
    color: #cf8a57 !important;
    font-size: 16.12px !important;
    letter-spacing: 0.18em !important;
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 400 !important;
}

/* ================================================================
   SECTION HEADER ROW
   ================================================================ */
#rattan-feature .section-header-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 32px !important;
  margin-bottom: 56px !important;
}

#rattan-feature .section-weaving .section-header-row {
    margin-bottom: 26px !important;
}

#rattan-feature .section-header-left { flex: 0 0 auto !important; }
#rattan-feature .section-title {
  font-size: 28.8px !important;
  letter-spacing: 0.08em !important;
  font-family: var(--serif) !important;
  color: var(--heading) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
@media (min-width: 768px) {
  #rattan-feature .section-title { font-size: 38.4px !important; }
}

/* ================================================================
   VERTICAL SQUARES SUBTITLE
   ================================================================ */
#rattan-feature .section-subtitle-squares { display: none !important; }
@media (min-width: 768px) {
  #rattan-feature .section-subtitle-squares {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: flex-end !important;
    padding-top: 4.8px !important;
    flex-shrink: 0 !important;
  }
  #rattan-feature .section-subtitle-squares .sq-row {
    display: flex !important;
    gap: 0 !important;
  }
  #rattan-feature .section-subtitle-squares .sq-char {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 27px !important;
    height: 27px !important;
    border: 1px solid var(--heading) !important;
    font-size: 16px !important;
    color: var(--heading) !important;
    font-family: var(--serif) !important;
    font-weight: 400 !important;
    flex-shrink: 0 !important;
    margin-left: -1px !important;
    margin-top: -1px !important;
  }
  #rattan-feature .section-subtitle-squares .sq-row:first-child .sq-char {
    margin-top: 0 !important;
  }
}

/* ================================================================
   SCROLL FADE
   ================================================================ */
#rattan-feature .scroll-fade {
  opacity: 0 !important;
  transform: translateY(28px) !important;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease) !important;
}
#rattan-feature .scroll-fade.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ================================================================
   INTRO
   ================================================================ */
#rattan-feature .section-intro {
  background: var(--bg) !important;
  padding: 80px 0 !important;
  position: relative !important;
  z-index: 2 !important;
}
@media (min-width: 768px) {
  #rattan-feature .section-intro { padding: 112px 0 !important; }
}
#rattan-feature .intro-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 40px !important;
  align-items: start !important;
}
@media (min-width: 768px) {
  #rattan-feature .intro-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 80px !important;
    align-items: center !important;
  }
}
#rattan-feature .intro-title {
  font-family: var(--serif) !important;
  font-size: 26.4px !important;
  font-weight: 500 !important;
  color: var(--heading) !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8.8px !important;
}
@media (min-width: 768px) {
  #rattan-feature .intro-title { font-size: 32px !important; }
}
#rattan-feature .intro-title-line {
  display: inline-block !important;
  background: #f4e9dd !important;
  padding: 7.2px 14.4px !important;
  width: fit-content !important;
}
#rattan-feature .intro-text-block p {
  font-size: 15.36px !important;
  font-family: var(--serif) !important;
  line-height: 1.95 !important;
  color: var(--text2) !important;
  margin-bottom: 16px !important;
}
#rattan-feature .intro-text-block p:last-child { margin-bottom: 0 !important; }
#rattan-feature .intro-right { position: relative !important; }
#rattan-feature .intro-image-wrapper {
  overflow: hidden !important;
  position: relative !important;
  z-index: 2 !important;
}
#rattan-feature .intro-image-wrapper img {
  width: 100% !important;
  display: block !important;
  object-fit: cover !important;
}
#rattan-feature .intro-pattern-deco {
  position: absolute !important;
  bottom: -12% !important;
  right: -8% !important;
  width: 90% !important;
  aspect-ratio: 5/3 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  opacity: 0.5 !important;
}
#rattan-feature .intro-pattern-deco svg {
  width: 100% !important; height: 100% !important; display: block !important;
}

/* ================================================================
   PARALLAX
   ================================================================ */
#rattan-feature .parallax-sticky-scope {
  height: 2% !important;
  position: relative !important;
  z-index: 1 !important;
}
@media (min-width: 768px) {
  #rattan-feature .parallax-sticky-scope { height: 300px !important; }
}
#rattan-feature .parallax-divider {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  height: 200px !important;
  overflow: hidden !important;
}
@media (min-width: 768px) {
  #rattan-feature .parallax-divider { height: 300px !important; }
}
#rattan-feature .parallax-bg {
  position: absolute !important;
  top: -40% !important;
  left: 0 !important; right: 0 !important;
  height: 180% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  will-change: transform !important;
  transform: translateY(0); /* !important 外す：JSのinline styleが上書きできるようにするため */
}

/* ================================================================
   RATTAN ABOUT
   ================================================================ */
#rattan-feature .section-rattan-desc {
  background: var(--bg) !important;
  padding: 80px 0 0 !important;
  position: relative !important;
  z-index: 2 !important;
}
@media (min-width: 768px) {
  #rattan-feature .section-rattan-desc { padding: 112px 0 0 !important; }
}
#rattan-feature .rattan-details {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 32px !important;
  margin-bottom: 120px !important;
}
@media (min-width: 768px) {
  #rattan-feature .rattan-details {
    grid-template-columns: 1fr 1fr !important;
    gap: 64px !important;
  }
}
#rattan-feature .rattan-details-col {
  border-top: var(--accent2) 4px solid !important;
  background: var(--white) !important;
  padding: 32px !important;
}
#rattan-feature .rattan-details-col h3 {
  font-size: 18.4px !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 16px !important;
  padding-bottom: 9.6px !important;
  border-bottom: 1px solid var(--border) !important;
}
#rattan-feature .rattan-details-col p {
  font-size: 15.2px !important;
  margin-bottom: 14.4px !important;
  line-height: 1.85 !important;
}
#rattan-feature .rattan-details-col p:last-child { margin-bottom: 0 !important; }

/* features-band */
#rattan-feature .features-band {
  background: var(--accent-light) !important;
  padding: 0 0 80px !important;
  margin-top: 0 !important;
}
@media (min-width: 768px) {
  #rattan-feature .features-band { padding-bottom: 112px !important; }
}
#rattan-feature .features-band-heading-wrap {
  text-align: center !important;
  margin-top: -1px !important;
  margin-bottom: 48px !important;
}
#rattan-feature .features-heading {
  display: inline-block !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  color: var(--heading) !important;
  font-family: var(--serif) !important;
  font-size: 19.2px !important;
  letter-spacing: 0.12em !important;
  font-weight: 500 !important;
  padding: 11.2px 44.8px !important;
  position: relative !important;
  top: -19.2px !important;
}
#rattan-feature .features-heading::after {
  content: '' !important;
  position: absolute !important;
  bottom: -9px !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0 !important; height: 0 !important;
  border-left: 7px solid transparent !important;
  border-right: 7px solid transparent !important;
  border-top: 9px solid var(--border) !important;
}
#rattan-feature .features-heading::before {
  content: '' !important;
  position: absolute !important;
  bottom: -7px !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0 !important; height: 0 !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 8px solid var(--white) !important;
  z-index: 1 !important;
}
#rattan-feature .features-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}
@media (min-width: 900px) {
  #rattan-feature .features-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
#rattan-feature .feature-card {
  background: var(--white) !important;
  border-radius: 12px !important;
  border:  var(--accent2) 3px solid !important;
  padding: 32px 19.2px !important;
  text-align: center !important;
  transition: all 0.4s var(--ease) !important;
}

#rattan-feature .feature-icon-wrapper {
  width: 54px !important; height: 54px !important;
  margin: 0 auto 17.6px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
#rattan-feature .feature-icon-wrapper img {
  width: 100% !important; height: 100% !important; object-fit: contain !important;
}
#rattan-feature .feature-card h4 {
  font-size: 16px !important;
  margin-bottom: 8px !important;
  color: var(--accent2) !important;
  letter-spacing: 0.06em !important;
  text-align: center !important;
}
#rattan-feature .feature-card p {
  font-size: 13.92px !important;
  line-height: 1.7 !important;
  color: var(--text) !important;
}

/* ================================================================
   PROS & CONS
   ================================================================ */
#rattan-feature .section-pros-cons {
  background: var(--bg) !important;
  padding: 80px 0 !important;
}
@media (min-width: 768px) {
  #rattan-feature .section-pros-cons { padding: 112px 0 !important;   }
}

@media (max-width: 768px) {
  #rattan-feature .section-pros-cons { padding: 80px 0 0 0 !important;   }
}

#rattan-feature .pros-cons-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}
@media (min-width: 768px) {
  #rattan-feature .pros-cons-container { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
}
#rattan-feature .pros-cons-box {
  background: var(--white) !important;
  padding: 32px !important;
  border-top: 4px solid #a3ccaf !important;
}
#rattan-feature .pros-cons-box.cons { border-top-color: #bbb8b4 !important; }
#rattan-feature .pros-cons-box h3 {
  font-size: 19.2px !important;
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#rattan-feature .check-icon { color:#a3ccaf  !important; font-size: 20.8px !important; }
#rattan-feature .warn-icon { color: #4b4b4b !important; font-size: 20.8px !important; font-weight: bold !important; }
#rattan-feature .pros-cons-item { margin-bottom: 22.4px !important; }
#rattan-feature .pros-cons-item:last-child { margin-bottom: 0 !important; }
#rattan-feature .pros-cons-item h4 {
  font-size: 15.52px !important;
  margin-bottom: 3.2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--serif) !important;
  font-weight: 500 !important;
}
#rattan-feature .pros-cons-item h4::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: #a3ccaf !important;
  flex-shrink: 0 !important;
}
#rattan-feature .pros-cons-box.cons .pros-cons-item h4::before {
  background: #bbb8b4 !important;
}
#rattan-feature .pros-cons-item p {
  font-size: 14.4px !important;
  color: var(--text) !important;
  padding-left: 14.4px !important;
  line-height: 1.8 !important;
}

/* ================================================================
   FAQ
   ================================================================ */
#rattan-feature .section-faq {
  background: var(--bg) !important;
  padding: 80px 0 !important;
}
@media (min-width: 768px) {
  #rattan-feature .section-faq { padding: 112px 0 !important; }
}
#rattan-feature .faq-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 48px !important;
  align-items: start !important;
}
@media (min-width: 900px) {
  #rattan-feature .faq-container { grid-template-columns: 2fr 0.85fr !important; gap: 72px !important; }
}
#rattan-feature .faq-accordion {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
#rattan-feature .faq-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
  transition: border-color 0.3s !important;
}
#rattan-feature .faq-card:hover { border-color: var(--accent) !important; }
#rattan-feature .faq-header {
  padding: 20.8px 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  user-select: none !important;
}
#rattan-feature .faq-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
#rattan-feature .faq-q-indicator {
  font-family: var(--serif) !important;
  font-size: 19.2px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  line-height: 1 !important;
}
#rattan-feature .faq-question {
  font-family: var(--serif) !important;
  font-size: 15.68px !important;
  color: var(--heading) !important;
  font-weight: 500 !important;
}
#rattan-feature .faq-icon {
  width: 16px !important; height: 16px !important;
  position: relative !important;
  flex-shrink: 0 !important;
  transition: transform 0.4s var(--ease) !important;
}
#rattan-feature .faq-icon::before {
  content: '' !important;
  position: absolute !important;
  top: 7px !important; left: 0 !important;
  width: 16px !important; height: 2px !important;
  background: var(--heading) !important;
}
#rattan-feature .faq-icon::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 7px !important;
  width: 2px !important; height: 16px !important;
  background: var(--heading) !important;
  transition: transform 0.4s var(--ease), opacity 0.4s !important;
}
#rattan-feature .faq-card.is-open .faq-icon::after {
  transform: rotate(90deg) !important;
  opacity: 0 !important;
}
#rattan-feature .faq-content {
  max-height: 0;
  overflow: hidden !important;
  transition: max-height 0.45s var(--ease) !important;
}
#rattan-feature .faq-answer-inner {
  padding: 14.4px 24px 22.4px 48px !important;
  font-size: 14.72px !important;
  line-height: 1.85 !important;
  color: var(--text) !important;
  border-top: 1px dashed var(--border) !important;
}

/* FAQ right */
#rattan-feature .faq-right { display: none !important; }
@media (min-width: 900px) { #rattan-feature .faq-right { display: block !important; } }
#rattan-feature .faq-collage {
  position: relative !important;
  height: 420px !important;
}
#rattan-feature .faq-collage-img {
  position: absolute !important;
  width: 82% !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  border: 6px solid var(--white) !important;
  box-shadow: 0 6px 28px rgba(91,74,63,0.13) !important;
  aspect-ratio: 3/4 !important;
}
#rattan-feature .faq-collage-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: opacity 0.5s ease !important;
}
#rattan-feature .faq-img-0 { top: 0 !important;    left: 0 !important;    z-index: 3 !important; transform: rotate(-2.5deg) !important; }
#rattan-feature .faq-img-1 { top: 16px !important; left: 16px !important; z-index: 2 !important; transform: rotate(1.5deg) !important;  }
#rattan-feature .faq-img-2 { top: 32px !important; left: 32px !important; z-index: 1 !important; transform: rotate(-0.8deg) !important; }

/* ================================================================
   NATURAL VS FAKE
   ================================================================ */
#rattan-feature .section-comparison {
  background: var(--white) !important;
  padding: 80px 0 !important;
}
@media (min-width: 768px) {
  #rattan-feature .section-comparison { padding: 112px 0 !important; }
}
#rattan-feature .comparison-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 40px !important;
  align-items: flex-start!important; 
}
@media (min-width: 768px) {
  #rattan-feature .comparison-layout { grid-template-columns: 220px 1fr !important; gap: 48px !important; 
  align-items: flex-start!important;  }
}
#rattan-feature .comparison-images { display: flex !important; flex-direction: row !important; gap: 16px !important; }
@media (min-width: 768px) { #rattan-feature .comparison-images { flex-direction: column !important; gap: 24px !important; } }
#rattan-feature .comp-img-wrap { position: relative !important; flex: 1 !important; }
#rattan-feature .comp-img-wrap img {
  width: 100% !important; aspect-ratio: 1/1 !important; object-fit: cover !important; border: 1px solid var(--border) !important;
}
#rattan-feature .comp-img-label {
  display: block !important; text-align: center !important;
  font-size: 13.12px !important; color: var(--heading) !important;
  font-family: var(--serif) !important; margin-top: 8px !important; letter-spacing: 0.05em !important;
}
#rattan-feature .comparison-table-wrapper {
  overflow-x: auto !important;
  border: 1px solid var(--border) !important;
}
#rattan-feature .comparison-table {
  width: 100% !important;
  border-collapse: collapse !important;
  text-align: left !important;
  min-width: 500px !important;
}
#rattan-feature .comparison-table th,
#rattan-feature .comparison-table td {
  padding: 16px 19.2px !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 14.56px !important;
  vertical-align: top !important;
}
#rattan-feature .comparison-table th {
  background: var(--accent-light) !important;
  color: var(--heading) !important;
  font-weight: 500 !important;
  font-family: var(--serif) !important;
}
#rattan-feature .comparison-table tr:last-child td { border-bottom: none !important; }

/* ================================================================
   WEAVING
   ================================================================ */
#rattan-feature .section-weaving {  background: var(--accent-light) !important;
  padding: 80px 0 !important;
}
@media (min-width: 768px) {
  #rattan-feature .section-weaving { padding: 112px 0 !important; }
}
#rattan-feature .weaving-lead { margin-bottom: 40px !important; font-size: 15.52px !important; }
#rattan-feature .catalog-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 32px !important;
}
@media (min-width: 768px) {
  #rattan-feature .catalog-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
#rattan-feature .catalog-item {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
  transition: all 0.4s var(--ease) !important;
}
#rattan-feature .catalog-item:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 8px 25px rgba(91,74,63,0.07) !important;
}
#rattan-feature .catalog-img-wrapper {
  aspect-ratio: 1.1/1 !important;
  overflow: hidden !important;
  background: var(--accent-light) !important;
}
#rattan-feature .catalog-img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s var(--ease) !important;
}
#rattan-feature .catalog-item:hover .catalog-img { transform: scale(1.06) !important; }
#rattan-feature .catalog-info { padding: 24px !important; }
#rattan-feature .catalog-tag {
  font-size: 11.52px !important; letter-spacing: 0.08em !important;
  color: var(--accent) !important; display: block !important; margin-bottom: 4.8px !important;
}
#rattan-feature .catalog-info h3 { font-size: 16.8px !important; margin-bottom: 9.6px !important; line-height: 1.4 !important; }
#rattan-feature .catalog-info p { font-size: 14.4px !important; line-height: 1.7 !important; color: var(--text) !important; margin-bottom: 8px !important; }
#rattan-feature .catalog-detail { font-size: 13.76px !important; margin-top: 11.2px !important; }

/* ================================================================
   HISTORY
   ================================================================ */
#rattan-feature .section-history {
  background: var(--accent-light) !important;
  padding: 80px 0 !important;
}

@media (max-width: 768px) {
    #rattan-feature .section-history {
        padding: 0 0 80px 0 !important;
    }
}

@media (min-width: 768px) {
  #rattan-feature .section-history { padding: 112px 0 !important; }
}
#rattan-feature .history-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 48px !important;
  align-items: start !important;
}
@media (min-width: 900px) {
  #rattan-feature .history-layout {
    grid-template-columns: 1fr 300px !important;
    gap: 64px !important;
    align-items: stretch !important; /* 右カラムをタイムライン列と同じ高さに引き伸ばしてstickyを有効にする */
  }
}
#rattan-feature .history-right { display: none !important; }
@media (min-width: 900px) { #rattan-feature .history-right { display: block !important; } }
#rattan-feature .history-sticky-img {
  position: sticky !important;
  top: 80px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px rgba(91,74,63,0.08) !important;
  overflow: hidden !important;
}
#rattan-feature .history-sticky-img img { width: 100% !important; display: block !important; }

/* Timeline */
#rattan-feature .timeline-container { position: relative !important; padding: 8px 0 !important; }
#rattan-feature .timeline-track {
  position: absolute !important; left: 18px !important; top: 0 !important; bottom: 0 !important;
  width: 2px !important; background: var(--border) !important; z-index: 1 !important;
}
#rattan-feature .timeline-progress-bar {
  position: absolute !important; left: 18px !important; top: 0 !important;
  width: 2px !important; height: 0 !important;
  background: var(--accent) !important; z-index: 2 !important;
  transition: height 0.08s linear !important;
}
/* ================================================================
   HERO
   ================================================================ */
#rattan-feature .hero {
  overflow: hidden !important;
  background: var(--bg) !important;
  padding: 0 !important;
  position: relative !important;
}
#rattan-feature .hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background: var(--accent-light) !important;
  z-index: 0 !important;
}

#rattan-feature .hero-container {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  height: calc(100vh - 180px) !important;
  max-height: 100vh !important;
  min-height: 520px !important;
}
/* hero-anim: JSが失敗した場合でも必ず表示されるよう
   @keyframes フォールバック付きで実装。
   JSが is-visible を付与すると transition が発火。
   JSが一切動かなくても animation-fill-mode:forwards で最終状態(opacity:1)を保持。 */
@keyframes rattan-hero-fadein {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
#rattan-feature .hero-anim {
  opacity: 0 !important;
  transform: translateY(28px) !important;
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease) !important;
  /* フォールバック: JSが動かなくても 3s 後に必ず表示 */
  animation: rattan-hero-fadein 0.85s var(--ease) 3s forwards !important;
}
#rattan-feature .hero-anim.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: none !important; /* JSが動いた場合はanimationをキャンセル */
}

/* ---- LEFT ---- */
#rattan-feature .hero-left {
  flex: 0 0 auto !important;
  width: 44% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 48px 24px 64px 0 !important;
  position: relative !important;
}
#rattan-feature .hero-meta {
  margin-bottom: 42px !important;
  padding-left: 3% !important;
}
#rattan-feature .hero-eng-small {
  display: block !important;
  font-family: 'Libre Baskerville', serif!important;
  font-size: 18px !important;
  color: #3a1507 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 10px !important;
  font-weight: 300 !important;
}
#rattan-feature .hero-title {
  font-family:  'Libre Baskerville', serif!important;
  font-size: 42px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: #3a1507 !important;
  line-height: 1.1 !important;
  margin-bottom: 10px !important;
  white-space: nowrap !important;
}
@media (min-width: 900px)  { #rattan-feature .hero-title { font-size: 42px !important; } }
@media (min-width: 1100px) { #rattan-feature .hero-title { font-size: 42px !important; } }
#rattan-feature .hero-subtitle-jp {
  font-size: 14px !important;
  color: #3a1507 !important;
  letter-spacing: 0.1em !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
}

/* ---- メディアグループ（PCはラタンブロック＋ヴィンテージ写真の共通ラッパー） ---- */
#rattan-feature .hero-media-group {
  position: relative !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  margin-left: -2% !important;
  margin-bottom: 32px !important;
}
#rattan-feature .hero-rattan-block {
  position: relative !important;
  width: clamp(220px, 300px, 390px) !important;
  aspect-ratio: 1 / 1.2 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}
#rattan-feature .hero-rattan-bg {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
}
#rattan-feature .hero-rattan-overlay {
  position: absolute !important; inset: 0 !important;
  background: rgba(247,243,237,0.32) !important;
  z-index: 2 !important; pointer-events: none !important;
}
#rattan-feature .hero-rattan-text {
  position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: center !important;
  gap: 11px !important; padding: 24px !important; z-index: 3 !important;
}
#rattan-feature .hero-rattan-text span {
  writing-mode: vertical-rl !important; text-orientation: mixed !important;
  font-family: var(--serif) !important; font-size: 16px !important;
  color: #3a1507!important; letter-spacing: 0.28em !important;
  font-weight: 500 !important; line-height: 1.8 !important;
}
/* vintage-img：PCはメディアグループ右下に絶対配置 */
#rattan-feature .hero-vintage-img {
  position: absolute !important;
  bottom: -75px !important;
  right: -140px !important;
  width: 75% !important;
  z-index: 10 !important;
  overflow: hidden !important;

}
#rattan-feature .hero-vintage-img img {
  width: 100% !important; display: block !important; object-fit: cover !important;
}

/* ---- RIGHT ---- */
#rattan-feature .hero-right {
  flex: 1 1 auto !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 5% 2% 5% !important;
}
#rattan-feature .hero-main-img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
}
/* rattan装飾img（PC非表示・SPで表示） */
#rattan-feature .hero-rattan-deco {
  display: none !important;
}

/* ---- RULER ---- */
#rattan-feature .hero-ruler {
  flex: 0 0 68px !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; padding: 24px 0 !important;
}
#rattan-feature .hero-ruler-top,
#rattan-feature .hero-ruler-bottom {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; gap: 6px !important;
}
#rattan-feature .hero-ruler-dot {
  width: 8px !important; height: 8px !important; border-radius: 50% !important;
  background: #3a1507 !important; flex-shrink: 0 !important;
}
#rattan-feature .hero-ruler-label {
  font-size: 10px !important; color: #3a1507 !important;
  writing-mode: vertical-rl !important; letter-spacing: 0.1em !important;
  font-family: var(--outfit) !important;
}
#rattan-feature .hero-ruler-line-wrap {
  flex: 1 !important; display: flex !important; flex-direction: column !important;
  align-items: center !important; padding: 6px 0 !important; width: 100% !important;
}
#rattan-feature .hero-ruler-line { flex: 1 !important; width: 1px !important; background: #3a1507 !important; }
#rattan-feature .hero-ruler-mid {
  font-size: 11px !important; color: #3a1507!important;
  writing-mode: vertical-rl !important; letter-spacing: 0.12em !important;
  font-weight: 500 !important; font-family: var(--outfit) !important; padding: 11px 0 !important;
}

/* ================================================================
   HERO タブレット大（1024〜1199px）
   横並び維持・サイズを一回り縮小
   ================================================================ */
@media (max-width: 1199px) and (min-width: 1025px) {
  #rattan-feature .hero-left { width: 40% !important; padding: 36px 16px 48px 0 !important; }
  #rattan-feature .hero-title { font-size: 36px !important; white-space: normal !important; }
  #rattan-feature .hero-meta { margin-bottom: 28px !important; }
  #rattan-feature .hero-media-group { margin-left: 5% !important; }
  #rattan-feature .hero-rattan-block { width: clamp(180px, 240px, 300px) !important; }
  #rattan-feature .hero-vintage-img { right: -100px !important; width: 65% !important; }
  #rattan-feature .hero-right { margin: 0 3% 2% 3% !important; }
  #rattan-feature .hero-ruler { flex: 0 0 52px !important; }
}

/* ================================================================
   HERO タブレット中（768〜1024px）
   hero-leftを左上、hero-rightを右下に（縦割り2段）
   ================================================================ */
 
@media (max-width: 1024px) and (min-width: 779px) {
  #rattan-feature .hero-container {
    flex-wrap: wrap !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    align-items: flex-start !important;
  }

  #rattan-feature .hero-left {
    width: 100% !important;
    flex: 0 0 100% !important;
    flex-direction: row !important;        
    align-items: center !important;
    padding: 40px 80px 32px 5% !important; 
  }
  #rattan-feature .hero-meta {
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto !important;
    padding-top: 8px !important;
  }
  #rattan-feature .hero-title {
    white-space: normal !important;
    font-size: 32px !important;
  }
  #rattan-feature .hero-media-group {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    flex: 1 1 auto !important;
    align-self: flex-start !important;
  }
  #rattan-feature .hero-rattan-block {
    width: clamp(160px, 45%, 260px) !important;
  }
  #rattan-feature .hero-vintage-img {
    right: 70px !important;
    width: 40% !important;
    bottom: -16px !important;
  }
  #rattan-feature .hero-right {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-height: 45vw !important;
    margin: 0 !important;
            padding: 0 80px 0 0 !important;
  }
  #rattan-feature .hero-ruler {
    position: absolute !important;
    right: 0 !important; top: 0 !important; bottom: 0 !important;
    flex: none !important;
    width: 52px !important;
    padding: 16px 0 !important;
    z-index: 5 !important;
    height: auto !important;
  }
  #rattan-feature .hero { position: relative !important; }
  #rattan-feature .hero-container { position: relative !important; }
  #rattan-feature .hero-rattan-deco {
    display: block !important;
    position: absolute !important;
    bottom: 0 !important; right: 0 !important;
    width: 38% !important;
    height: 50% !important;
    object-fit: cover !important;
    opacity: 0.55 !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  #rattan-feature .hero-rattan-bg  { display: none !important; }
      #rattan-feature .hero-subtitle-jp-tablet {
        display: block!important;
    }
      #rattan-feature .hero-rattan-block  { display: none !important; }
      #rattan-feature .hero-rattan-text { display: none !important; }
      #rattan-feature .hero-vintage-img {         position: static !important; 
        bottom: 0px !important;        width: 40% !important;}
            #rattan-feature .hero-media-group {
        display: flex;
        justify-content: end;
    }
}

/* ================================================================
   HERO SP（〜767px）
   ================================================================ */
@media (max-width: 780px) {

  /* コンテナ：縦並び・高さ自動 */
  #rattan-feature .hero-container {
    flex-direction: column !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
  }

  /* 左カラム：全幅 */
  #rattan-feature .hero-left {
    width: 100% !important;
    padding: 32px 0 32px 20px !important;
    position: relative !important;
  }

  /* ① タイトルブロック */
  #rattan-feature .hero-meta {
    padding-left: 0 !important;
    margin-bottom: 24px !important;
    padding-right: 60px !important; /* ルーラー幅分 */
  }
  #rattan-feature .hero-title {
    white-space: normal !important;
    font-size: 28px !important;
  }

  /* ルーラー：SP では右端に縦貫通・絶対配置 */
  #rattan-feature .hero-ruler {
    display: flex !important;
    position: absolute !important;
    right: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 48px !important;
    flex: none !important;
    padding: 16px 0 !important;
    z-index: 5 !important;
  }

  /* ② メディアグループ：横並び（縦書きテキスト左 ＋ 歴史写真右） */
  #rattan-feature .hero-media-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 48px 0 0 !important;
    width: 100% !important;
    position: relative !important;
    align-self: auto !important;
    margin-bottom: 0 !important;
  }

  /* ラタンブロック（縦書きテキスト）：左側 — 背景・オーバーレイ非表示 */
  #rattan-feature .hero-rattan-block {
    width: 52% !important;
    aspect-ratio: auto !important;
    min-height: 200px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  #rattan-feature .hero-rattan-bg { display: none !important; }
  #rattan-feature .hero-rattan-overlay { display: none !important; }

  /* 縦書きテキスト：relative に戻して自然配置 */
  #rattan-feature .hero-rattan-text {
    position: relative !important;
    top: auto !important; left: auto !important;
    width: 100% !important;
    min-height: 200px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
    gap: 8px !important;
  }
  #rattan-feature .hero-rattan-text span {
    font-size: 15px !important;
    letter-spacing: 0.22em !important;
  }

  /* 歴史写真：右側・フロー配置 */
  #rattan-feature .hero-vintage-img {
    position: relative !important;
    bottom: auto !important; right: auto !important;
    width: 48% !important;
    flex-shrink: 0 !important;
    z-index: auto !important;
    align-self: flex-start !important;
    margin-top: 16px !important;
              max-width: 300px !important;
  }

  /* ③ メイン写真：下に全幅 */
  #rattan-feature .hero-right {
    width: 80% !important;
    min-height: 55vw !important;
    flex: none !important;
    margin: 12px 0 0 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* ④ rattan.jpg装飾：メイン写真の右下に重ねる */
  #rattan-feature .hero-rattan-deco {
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 42% !important;
    height: 50% !important;
    object-fit: cover !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

}
#rattan-feature .timeline-item {
  position: relative !important; padding-left: 52px !important; margin-bottom: 48px !important; z-index: 5 !important;
  opacity: 0 !important; transform: translateY(28px) !important;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease) !important;
}
#rattan-feature .timeline-item.is-visible {
  opacity: 1 !important; transform: translateY(0) !important;
}
#rattan-feature .timeline-item:last-child { margin-bottom: 0 !important; }
#rattan-feature .timeline-dot {
  position: absolute !important; left: 14px !important; top: 28px !important;
  width: 10px !important; height: 10px !important; border-radius: 50% !important;
  background: var(--border) !important; border: 2px solid var(--bg) !important;
  z-index: 10 !important; transition: all 0.5s var(--ease) !important; transform: translateY(-50%) !important;
}
#rattan-feature .timeline-item.is-visible .timeline-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 0 5px rgba(180,138,90,0.15) !important;
  transform: translateY(-50%) scale(1.3) !important;
}
#rattan-feature .timeline-date {
  font-family: var(--outfit) !important; font-size: 27.2px !important;
  color: var(--accent) !important; font-weight: 400 !important; line-height: 1 !important; margin-bottom: 8px !important;
}
#rattan-feature .timeline-content {
  background: var(--white) !important; padding: 24px !important;
  border: 1px solid var(--border) !important; box-shadow: 0 4px 12px rgba(91,74,63,0.03) !important;
}
#rattan-feature .timeline-content h4 { font-size: 16.8px !important; margin-bottom: 8px !important; font-family: var(--serif) !important; }
#rattan-feature .timeline-content p { font-size: 14.4px !important; line-height: 1.75 !important; }

/* ================================================================
   LINEUP SLIDER
   ================================================================ */
#rattan-feature .section-rattan-lineup {
  background: var(--lineup-bg) !important;
  padding: 0 0 80px !important;
  overflow: visible !important; /* hiddenだとtop:-xxpxのtag-boxが切り取られる。スライダーのclipはlineup-track-outerが担う */
  position: relative !important;
  z-index: 2 !important;
}

#rattan-feature .section-rattan-lineup .lineup-title {
  text-align: center !important;
}

@media (min-width: 1025px) {
  #rattan-feature .section-rattan-lineup { padding-bottom: 112px !important; }
}
#rattan-feature .lineup-inner { width: 100% !important; }
#rattan-feature .lineup-heading-wrap {
  text-align: center !important;
  margin-bottom: 48px !important;
  padding: 0 32px !important;
}
#rattan-feature .lineup-tag-box {
  display: inline-block !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  color: var(--heading) !important;
  font-family: var(--serif) !important;
  font-size: 16px !important;
  padding: 9.6px 35.2px !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 28.8px !important;
  position: relative !important;
  top: -20.8px !important;
}
#rattan-feature .lineup-tag-box::after {
  content: '' !important;
  position: absolute !important;
  bottom: -9px !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0 !important; height: 0 !important;
  border-left: 7px solid transparent !important;
  border-right: 7px solid transparent !important;
  border-top: 9px solid var(--border) !important;
}
#rattan-feature .lineup-tag-box::before {
  content: '' !important;
  position: absolute !important;
  bottom: -7px !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0 !important; height: 0 !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 8px solid var(--white) !important;
  z-index: 1 !important;
}
#rattan-feature .lineup-title {
  font-family: var(--serif) !important; font-size: 27.2px !important;
  font-weight: 500 !important; color: var(--heading) !important; line-height: 1.55 !important; letter-spacing: 0.06em !important;
}
@media (min-width: 1025px) { #rattan-feature .lineup-title { font-size: 35.2px !important; } }
#rattan-feature .lineup-slider-wrap { display: flex !important; align-items: center !important; }
/* SP：左端に余白を追加してスライドが画面端にくっつかないようにする */
@media (max-width: 767px) {
  #rattan-feature .lineup-slider-wrap { padding-left: 24px !important; }
}
#rattan-feature .lineup-btn {
  flex: 0 0 auto !important; width: 44px !important; height: 44px !important;
  border-radius: 50% !important; border: 1px solid var(--border) !important;
  background: var(--white) !important; color: var(--heading) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; transition: all 0.3s var(--ease) !important;
  box-shadow: 0 2px 10px rgba(91,74,63,0.08) !important;
  margin: 0 12px !important;
}
@media (min-width: 1025px) { #rattan-feature .lineup-btn { width: 50px !important; height: 50px !important; margin: 0 20px !important; } }
#rattan-feature .lineup-btn:hover { background: var(--accent-light) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
#rattan-feature .lineup-btn:disabled { opacity: 0.3 !important; cursor: default !important; }
#rattan-feature .lineup-track-outer { flex: 1 1 auto !important; overflow: hidden !important; min-width: 0 !important; }
#rattan-feature .lineup-track {
  display: flex !important; gap: 16px !important;
  transition: transform 0.5s cubic-bezier(0.35,0,0.25,1) !important;
  will-change: transform !important;
}
@media (min-width: 1025px) { #rattan-feature .lineup-track { gap: 24px !important; } }
#rattan-feature .lineup-slide {
  flex: 0 0 calc(50% - 8px) !important;
  min-width: 0 !important; display: flex !important; flex-direction: column !important;
}
@media (min-width: 600px) { #rattan-feature .lineup-slide { flex: 0 0 calc(33.333% - 12px) !important; } }
@media (min-width: 900px) { #rattan-feature .lineup-slide { flex: 0 0 calc(25% - 18px) !important; } }
#rattan-feature .lineup-img-wrap {
  aspect-ratio: 4/4 !important; overflow: hidden !important;
  background: var(--accent-light) !important; border: 1px solid var(--border) !important;
}
#rattan-feature .lineup-img-wrap img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; transition: transform 0.6s var(--ease) !important; display: block !important;
}
#rattan-feature .lineup-slide:hover .lineup-img-wrap img { transform: scale(1.05) !important; }
#rattan-feature .lineup-label {
  text-align: center !important; font-family: var(--serif) !important;
  font-size: 15.2px !important; color: var(--heading) !important; margin-top: 13.6px !important; letter-spacing: 0.06em !important;
}
#rattan-feature .lineup-dots {
  display: flex !important; justify-content: center !important; gap: 8px !important; margin-top: 32px !important; padding: 0 32px !important;
}
#rattan-feature .lineup-dot {
  width: 8px !important; height: 8px !important; border-radius: 50% !important;
  background: var(--border) !important; cursor: pointer !important;
  transition: background 0.3s, transform 0.3s !important;
  border: none !important; padding: 0 !important;
}
#rattan-feature .lineup-dot.active { background: var(--accent) !important; transform: scale(1.3) !important; }

/* 商品グリッドエリア */
#rattan-feature .rattan-product-section {
  padding: 64px 25px 32px !important;
}
#rattan-feature .rattan-recommendation-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 8px !important;
}

@media (max-width: 767px) {
#rattan-feature .rattan-recommendation-header {
flex-wrap: wrap !important;
}
}

#rattan-feature .rattan-rec-en {
  font-size: 12.48px !important;
  color: var(--accent) !important;
  letter-spacing: 0.1em !important;
  white-space: nowrap !important;
  font-family: var(--outfit) !important;
}
#rattan-feature .rattan-rec-line {
  flex: 1 !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  height: 0 !important;
  margin: 0 !important;
  background: none !important;
}
#rattan-feature .rattan-rec-title {
  font-family: var(--serif) !important;
  font-size: 20.8px !important;
  color: var(--heading) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}
#rattan-feature .lineup-container { width: 100% !important; }
#rattan-feature .rattan-rec-more { text-align: center !important; margin-top: 48px !important; }
#rattan-feature .btn-rattan-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid var(--heading) !important;
  color: var(--heading) !important;
  font-family: var(--serif) !important;
  font-size: 15.2px !important;
  padding: 13.6px 40px !important;
  letter-spacing: 0.1em !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}
#rattan-feature .btn-rattan-more:hover { background: var(--heading) !important; color: #fff !important; }
#rattan-feature .btn-arrow { font-size: 17.6px !important; }

/* ================================================================
   CTA
   ================================================================ */
#rattan-feature .section-cta {
  background: var(--accent-light) !important;
  padding: 80px 0 !important;
  text-align: center !important;
}

#rattan-feature .section-cta .cta-title  {
text-align: center !important;
}


#rattan-feature .section-cta .cta-text  {
text-align: center !important;
}
@media (min-width: 768px) { #rattan-feature .section-cta { padding: 112px 0 !important; } }
#rattan-feature .cta-title {
  font-family: var(--serif) !important; font-size: 28.8px !important;
  color: var(--heading) !important; font-weight: 500 !important;
  letter-spacing: 0.05em !important; line-height: 1.55 !important; margin: 16px 0 28px !important;
}
@media (min-width: 768px) { #rattan-feature .cta-title { font-size: 38.4px !important; } }
#rattan-feature .cta-text { font-size: 15.2px !important; line-height: 2 !important; color: var(--text) !important; margin-bottom: 40px !important; }
#rattan-feature .pc-only { display: none !important; }
@media (min-width: 768px) { #rattan-feature .pc-only { display: inline !important; } }
#rattan-feature .cta-button {
  display: inline-block !important; background: var(--heading) !important; color: var(--white) !important;
  font-family: var(--sans) !important; font-weight: 500 !important; font-size: 15.36px !important;
  padding: 17.6px 44.8px !important; letter-spacing: 0.15em !important;
  transition: all 0.4s var(--ease) !important;
  box-shadow: 0 4px 14px rgba(91,74,63,0.12) !important;
  text-decoration: none !important;
}
#rattan-feature .cta-button:hover {
  background: var(--accent) !important; transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(180,138,90,0.28) !important;
}

/* ==========================================
   FEATURES GRID SP 横スクロール
   ========================================== */
@media (max-width: 899px) {

  #rattan-feature .features-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;

    gap: 16px !important;

    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;

    padding-right: 0 !important;

    scrollbar-width: none !important;
  }

  #rattan-feature .features-grid::-webkit-scrollbar {
    display: none !important;
  }

  #rattan-feature .feature-card {
    flex: 0 0 76% !important;
    scroll-snap-align: start !important;
  }

  #rattan-feature .features-band .container{
      padding:0 0 0 32px !important;
  }

  #rattan-feature .features-grid{
      padding-right:32px !important;
  }

}



@media (max-width:767px){

  #rattan-feature .lineup-btn{
    display:none !important;
  }

  #rattan-feature .lineup-dots{
    display:none !important;
  }

  #rattan-feature .lineup-track-outer{
    overflow-x:auto !important;
    overflow-y:hidden !important;

    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
            margin-right: 25px !important;
  }

  #rattan-feature .lineup-track-outer::-webkit-scrollbar{
    display:none;
  }

  #rattan-feature .lineup-track{
    transform:none !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:16px !important;

    scroll-snap-type:x mandatory;
  }

  #rattan-feature .lineup-slide{
    flex:0 0 78% !important;
    scroll-snap-align:start;
  }

  #rattan-feature .lineup-track{
    padding-right:24px !important;
  }

}